:root{--blue:#0750a9;--pink:#eb1752;--ink:#07366f}*{box-sizing:border-box}body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.5}a{color:inherit}.hero{width:100%;max-height:100vh;overflow:hidden}.hero img{display:block;width:100%;height:100vh;object-fit:cover;object-position:center}.motto{margin:0;padding:1.1rem;text-align:center;color:#fff;background:var(--blue);font-size:clamp(1.05rem,2.3vw,1.65rem);font-weight:800}.motto span{color:#ffd454}.rollup{width:100%;overflow:hidden}.rollup img{display:block;width:100%;height:auto}footer{display:flex;justify-content:space-between;gap:2rem;padding:2rem clamp(1rem,6vw,6rem);color:#fff;background:#052758}footer p{margin:0}footer div{display:flex;gap:1.2rem}.legal{min-height:75vh;padding:clamp(4rem,8vw,7rem) clamp(1rem,18vw,18rem);background:#eef9ff}.legal>h1{margin:.2rem 0 2rem;color:var(--pink);font-size:clamp(3rem,7vw,6rem);line-height:1}.legal section{padding:clamp(1.2rem,4vw,3rem);border-radius:1rem;background:#fff;box-shadow:0 14px 35px #06478620}.legal h2{margin:2rem 0 .5rem;color:var(--blue)}.legal h2:first-child{margin-top:0}.legal-note{margin-top:2rem;padding:1rem;border-left:5px solid #f3b930;background:#fff7d7}.kicker{color:var(--pink);font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media(max-width:850px){.hero,.hero img{height:auto;max-height:none}}@media(max-width:520px){.motto span{display:block}footer{flex-direction:column}}
:root{--green:#42931f}.wissen{padding:clamp(3rem,7vw,6rem) clamp(1rem,10vw,9rem);background:#eef8fc}.wissen-kopf{max-width:52rem;margin:0 auto 2rem;text-align:center}.wissen-kopf>span{color:var(--pink);font-weight:900;letter-spacing:.12em;text-transform:uppercase}.wissen h1{margin:.35rem 0 .6rem;font-size:clamp(2.3rem,6vw,5rem);line-height:1.05;color:var(--blue)}.wissen-kopf p{margin:0;font-size:clamp(1rem,2vw,1.2rem)}.themen{max-width:62rem;margin:0 auto}.thema{margin:.8rem 0;border:0;border-left:.55rem solid;border-radius:.4rem;background:#fff;box-shadow:0 .5rem 1.5rem #07366f12}.thema-blau{color:var(--blue)}.thema-pink{color:var(--pink)}.thema-gruen{color:var(--green)}.thema summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;cursor:pointer;font-size:clamp(1.1rem,2.3vw,1.45rem);font-weight:850;list-style:none}.thema summary::-webkit-details-marker{display:none}.thema summary b{display:grid;place-items:center;width:2rem;height:2rem;flex:0 0 2rem;border:2px solid currentColor;border-radius:50%;font-size:1.5rem;line-height:1;transition:transform .2s}.thema[open] summary b{transform:rotate(45deg)}.thema-text{padding:0 1.4rem 1.3rem;color:var(--ink);font-size:1.03rem}.thema-text p:first-child{margin-top:0}.thema-text p:last-child{margin-bottom:0}.hinweis{max-width:62rem;margin:2rem auto 0;padding:1.1rem 1.3rem;border-left:.4rem solid #e9b827;background:#fff9df;color:#493c18}@media(max-width:520px){.wissen{padding-inline:.8rem}.thema summary{padding:1rem}.thema-text{padding:0 1rem 1rem}}
:root{--rollup-ratio:2.341}.rollup{position:relative;overflow:visible}.wissensfach>summary{position:absolute;z-index:3;top:calc(217vw);left:4%;display:flex;align-items:center;justify-content:center;gap:.55rem;width:27%;min-height:4.2rem;padding:.5rem .8rem;transform:translateY(-50%);cursor:pointer;list-style:none;border:2px solid #e4b72d;border-radius:.7rem;color:var(--blue);background:#fffbed;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:clamp(.9rem,2vw,1.6rem);font-weight:800;text-align:center;box-shadow:0 .35rem 1rem #07366f1c}.wissensfach>summary::-webkit-details-marker{display:none}.wissensfach>summary b{display:grid;place-items:center;width:1.8rem;height:1.8rem;flex:0 0 1.8rem;border:2px solid var(--pink);border-radius:50%;color:var(--pink);font-family:"Segoe UI",Arial,sans-serif;font-size:1.3rem;line-height:1}.wissensfach[open]>summary b{transform:rotate(45deg)}.wissensfach:not([open]) .wissen{display:none}.wissensfach[open] .wissen{display:block}.wissen h1{display:none}@media(max-width:650px){.wissensfach>summary{left:3%;width:29%;min-height:2.8rem;padding:.3rem;font-size:clamp(.62rem,2.7vw,1rem)}.wissensfach>summary b{width:1.35rem;height:1.35rem;flex-basis:1.35rem;font-size:1rem}}
@font-face{font-family:"SHG Handschrift";src:url("fonts/shg-handschrift.ttf") format("truetype");font-display:swap}.wissensfach>summary{font-family:"SHG Handschrift","Segoe Print",cursive;font-size:clamp(1.15rem,2.35vw,1.85rem);font-weight:700;letter-spacing:.01em}
.wissensfach>summary{min-height:0;padding:.25rem;justify-content:center;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--blue);line-height:1.05}.wissensfach>summary b{width:auto;height:auto;flex:0 0 auto;border:0;border-radius:0;color:var(--pink);font-size:1.5em;font-weight:500}
@font-face{font-family:"SHG Schreibschrift";src:url("fonts/shg-schreibschrift.ttf") format("truetype");font-display:swap}.wissensfach>summary{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.25rem;width:29%;font-family:"SHG Schreibschrift","Brush Script MT",cursive;font-size:clamp(1.3rem,2.7vw,2.2rem);font-weight:400}.wissens-pfeil{grid-row:1/3;align-self:center;color:var(--pink);font-family:"Segoe UI Symbol","Segoe UI",sans-serif;font-size:2.15em;line-height:.8;transform:rotate(10deg)}.wissens-frage{align-self:end}.klick-mich{justify-self:center;margin-top:.15rem;padding:.08rem .75rem;border-radius:45% 55% 48% 52%;color:var(--blue);background:#fff0a8;font-family:"SHG Schreibschrift","Brush Script MT",cursive;font-size:.72em;line-height:1.15;transform:rotate(-2deg)}.whatsapp-zusatz{position:absolute;z-index:2;top:calc(229vw);right:4%;width:28%;color:#159447;font-size:clamp(.55rem,1.25vw,1rem);font-weight:700;text-align:center}
.website-abdeckung{position:absolute;z-index:1;left:0;top:calc(205vw);width:33.34%;height:calc(30vw);background:#eaf7fc}.wissensfach>summary{z-index:4;top:calc(211vw);left:2.5%;grid-template-columns:42% 1fr;grid-template-rows:auto auto;width:30%;font-family:"SHG Handschrift","Segoe Print",cursive;font-size:clamp(.95rem,2vw,1.65rem);font-weight:700}.wissens-pfeil{grid-row:1/3;align-self:center;display:block;width:100%;height:auto;object-fit:contain;transform:none}.klick-mich{font-family:"SHG Handschrift","Segoe Print",cursive}.whatsapp-zusatz{display:none}
.website-abdeckung{height:35vw}
.website-abdeckung{top:210vw;width:31%;height:29vw}.wissensfach>summary{top:calc(211vw);left:2.5%;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;width:29%;padding-left:4vw;overflow:visible}.wissens-pfeil{position:absolute;left:-.8vw;top:1.1vw;width:8vw;height:auto;transform:rotate(90deg) scaleY(.48);transform-origin:center;opacity:.88}.wissens-frage{grid-column:1;grid-row:1;align-self:end}.klick-mich{grid-column:1;grid-row:2;justify-self:center;margin-top:.3rem;padding:.06rem .65rem}
.website-abdeckung{top:auto;bottom:0;left:0;width:30%;height:12.8%;background:#eaf7fc}.wissensfach>summary{top:auto;bottom:2.3%;left:3%;width:27%;padding:0 0 0 2.7vw;font-family:"SHG Schreibschrift","Brush Script MT",cursive;font-size:clamp(1.2rem,2.45vw,2rem);font-weight:400}.wissens-pfeil{left:-3.8vw;top:-1.2vw;width:14vw;transform:rotate(90deg) scale(.45);opacity:.82}.wissens-frage{line-height:1}.klick-mich{margin-top:.25rem;padding:.02rem .65rem;font-family:"SHG Schreibschrift","Brush Script MT",cursive;font-size:.78em}
.wissens-pfeil{left:-2.8vw;top:1.1vw;width:12vw;transform:rotate(40deg) scale(.5);transform-origin:left center;opacity:.78}.klick-mich{justify-self:end;margin-right:1.8vw}
.wissens-pfeil{left:-1vw;top:-6vw;width:11vw;transform:rotate(52deg) scale(.3);transform-origin:center;opacity:.75}
.einstiegs-pfeil{position:absolute;left:-6vw;top:-1.6vw;display:block;width:12vw;height:auto;object-fit:contain;transform:scaleX(.72) scaleY(.4);transform-origin:right center;opacity:.72}
.einstiegs-pfeil{left:-16vw;top:-7vw;width:10vw;transform:scaleX(.6) scaleY(.32);transform-origin:right center;opacity:.7}
.einstiegs-pfeil{transform:scaleX(.45) scaleY(.32)}
.website-abdeckung{left:3%;width:22%;height:11.5%}.wissensfach>summary{font-size:clamp(1.35rem,2.8vw,2.25rem)}.einstiegs-pfeil{top:-5.2vw}.klick-mich{justify-self:center;margin-right:0;margin-top:.35rem;font-size:.9em;padding:.05rem .8rem}
.einstiegs-pfeil{left:.6vw;top:-1vw;width:12vw;transform:rotate(68deg) scaleX(.48) scaleY(.28);transform-origin:left center;opacity:.72}
.einstiegs-pfeil{left:4.5vw;top:-9vw;transform:rotate(62deg) scaleX(.34) scaleY(.24);opacity:.72}
.einstiegs-pfeil{left:5.5vw}
.einstiegs-pfeil{left:5.5vw;top:-8.6vw;transform:rotate(55deg) scaleX(.42) scaleY(.22);transform-origin:left center}
.einstiegs-pfeil{left:7.5vw;top:-7vw;width:8vw;transform:none;transform-origin:center;opacity:.82}
.einstiegs-pfeil{left:5.2vw;top:-6.8vw;width:9vw;height:12vw;object-fit:contain;transform:none;opacity:.88}
.einstiegs-pfeil{left:2.4vw;top:-.4vw;width:4.2vw;height:5vw;object-fit:contain;transform:none;opacity:.84}
.rollup .einstiegs-pfeil{left:4.5vw;top:0;width:6vw;height:8vw;object-fit:contain;transform:none;opacity:.84}
.rollup .einstiegs-pfeil{left:3.2vw;top:.05vw;width:7.4vw;height:8vw;object-fit:contain;transform:none;opacity:.84}
.wissensfach>summary{left:3%;width:22%;padding:0}
@keyframes klick-aufmerksamkeit{0%,100%{transform:rotate(-2deg) scale(1);box-shadow:0 0 0 0 #f0c73a00}50%{transform:rotate(-2deg) scale(1.08);box-shadow:0 0 .8rem .22rem #f0c73a70}}
.klick-mich{animation:klick-aufmerksamkeit 2.4s ease-in-out infinite;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.wissensfach>summary:hover .klick-mich,.wissensfach>summary:focus-visible .klick-mich{animation-play-state:paused;transform:rotate(-2deg) scale(1.12);background:#ffe168;box-shadow:0 0 1rem .28rem #f0c73a85}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
@keyframes klick-vorne-hinten{0%,14%{transform:perspective(320px) rotateY(0deg)}43%,57%{transform:perspective(320px) rotateY(180deg)}86%,100%{transform:perspective(320px) rotateY(360deg)}}
.klick-mich{animation:klick-vorne-hinten 6s ease-in-out infinite;transform-origin:center;transform-style:preserve-3d;backface-visibility:visible}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
@keyframes klick-drehscheibe{from{transform:perspective(320px) rotateX(58deg) rotateZ(0deg)}to{transform:perspective(320px) rotateX(58deg) rotateZ(-360deg)}}
.klick-mich{animation:klick-drehscheibe 4.2s linear infinite;transform-origin:center;transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
@keyframes klick-radar-waagerecht{from{transform:perspective(260px) rotateY(0deg)}to{transform:perspective(260px) rotateY(-360deg)}}
.klick-mich{animation:klick-radar-waagerecht 4s linear infinite;transform-origin:center;backface-visibility:visible;transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
@keyframes klick-radar{from{transform:rotate(-2deg)}to{transform:rotate(-362deg)}}
.klick-mich{animation:klick-radar 3.8s linear infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
@keyframes text-schreiben{0%,8%{clip-path:inset(0 100% 0 0);opacity:.35}38%,88%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 100% 0 0);opacity:.35}}
.klick-mich{animation:none;box-shadow:0 0 .45rem #f0c73a45}
.klick-mich>span{display:block;white-space:nowrap;animation:text-schreiben 4.2s steps(12,end) infinite}
@media(prefers-reduced-motion:reduce){.klick-mich>span{animation:none}}
@keyframes klick-linksherum{0%,58%{transform:rotate(-2deg)}82%,100%{transform:rotate(-362deg)}}
.klick-mich{animation:klick-linksherum 5.2s ease-in-out infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
/* Endgültige Bewegung: ein senkrechtes Schild dreht von Vorderseite über Rückseite zurück. */
.klick-mich{animation:klick-vorne-hinten 6s ease-in-out infinite;transform-origin:center;transform-style:preserve-3d;backface-visibility:visible}
@media(prefers-reduced-motion:reduce){.klick-mich{animation:none}}
.klick-mich>span{animation:none;clip-path:none;opacity:1}
/* Gewählte SHG-Schrift: weicher Fluss wie auf Roll-up und Flyer. */
.wissens-frage,.klick-mich{font-family:"Hurricane","SHG Schreibschrift",cursive;font-weight:400;-webkit-text-stroke:.55px currentColor;text-shadow:0 0 .28px currentColor}
.wissens-frage{font-size:1.35em;line-height:.9}.klick-mich{font-size:1.08em}
/* Eigener SHG-Schriftzug nach dem Stil der Roll-up-Vorlage. */
.wissens-frage{display:block;width:100%;font-size:0;line-height:0;-webkit-text-stroke:0;text-shadow:none}
.wissens-frage img{display:block;width:100%;height:auto;object-fit:contain}

/* Wissen-Einstieg: freigestellt, einzeilig und weich in das Roll-up eingebettet. */
.website-abdeckung{
  left:0;
  width:34%;
  height:13.5%;
  background:radial-gradient(ellipse at 31% 48%,rgba(234,247,252,.98) 0 54%,rgba(234,247,252,.88) 70%,rgba(234,247,252,0) 100%);
}
.wissensfach>summary{
  left:1.2%;
  width:30%;
  padding:0;
}
.wissens-frage{
  width:112%;
  margin-left:-6%;
  overflow:visible;
}
.wissens-frage img{
  width:100%;
  max-width:none;
}

/* Nach dem Freistellen: ohne unsichtbaren Rand und ohne Überlagerung. */
.wissensfach>summary{
  left:2.2%;
  width:27%;
}
.wissens-frage{
  width:100%;
  margin-left:0;
}

/* Der Website-QR wurde direkt aus dem Roll-up entfernt; keine Abdeckung mehr nötig. */
.website-abdeckung{display:none}

/* „Möchten Sie mehr wissen?“ rollt beim ersten Sichtbarwerden von links herein. */
@keyframes wissen-reinrollen{
  0%{opacity:0;transform:translateX(-125%) rotate(-12deg)}
  72%{opacity:1;transform:translateX(5%) rotate(1.5deg)}
  88%{transform:translateX(-2%) rotate(-.5deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}
}
.wissens-frage{opacity:0;transform:translateX(-125%) rotate(-12deg)}
.wissens-frage.ist-sichtbar{animation:wissen-reinrollen 1.45s cubic-bezier(.2,.72,.25,1) both}
@media(prefers-reduced-motion:reduce){
  .wissens-frage,.wissens-frage.ist-sichtbar{opacity:1;transform:none;animation:none}
}

/* Ruhige Wiederholung: hereinrollen, stehen bleiben, sanft ausblenden. */
@keyframes wissen-gemuetlich-rollen{
  0%{opacity:0;transform:translateX(-120%) rotate(-10deg)}
  8%{opacity:1}
  58%{opacity:1;transform:translateX(4%) rotate(1deg)}
  68%{opacity:1;transform:translateX(0) rotate(0)}
  82%{opacity:1;transform:translateX(0) rotate(0)}
  100%{opacity:0;transform:translateX(-24%) rotate(-2deg)}
}
.wissens-frage.ist-sichtbar{animation:wissen-gemuetlich-rollen 6s ease-in-out infinite}

/* Zuverlässige Dauerbewegung direkt auf der sichtbaren Schriftgrafik. */
@keyframes wissen-sichtbar-rollen{
  0%,6%{opacity:0;transform:translateX(-145%)}
  15%{opacity:1}
  27%{opacity:1;transform:translateX(0)}
  88%{opacity:1;transform:translateX(0)}
  99%{opacity:1;transform:translateX(-145%)}
  100%{opacity:0;transform:translateX(-145%)}
}
.wissens-frage,
.wissens-frage.ist-sichtbar{
  opacity:1;
  transform:none;
  animation:none;
}
.wissens-frage img{
  animation:wissen-sichtbar-rollen 15s ease-in-out infinite !important;
  will-change:transform,opacity;
}

/* Klick-mich-Variante: bestehende Schilddrehung plus wandernde SHG-Farbstreifen. */
@keyframes klick-farbstreifen{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.klick-mich{
  background-image:repeating-linear-gradient(
    115deg,
    #ffe99a 0 18px,
    #f9b6c9 18px 30px,
    #b9ddf4 30px 42px,
    #cce9bb 42px 54px,
    #ffe99a 54px 72px
  );
  background-size:200% 100%;
  animation:klick-vorne-hinten 6s ease-in-out infinite,
            klick-farbstreifen 5s linear infinite;
  box-shadow:0 0 .55rem #f0c73a55;
}

/* Ruhige Variante: gelber Pinselgrund mit einem dezenten Lichtschimmer. */
@keyframes klick-lichtschimmer{
  0%,18%{background-position:130% 50%;box-shadow:0 0 .35rem #f0c73a35}
  55%{background-position:-30% 50%;box-shadow:0 0 .75rem #f0c73a65}
  100%{background-position:-30% 50%;box-shadow:0 0 .35rem #f0c73a35}
}
.klick-mich{
  background-color:#ffe99a;
  background-image:linear-gradient(110deg,#ffe99a 0 38%,#fff8d5 47%,#fffdf0 50%,#fff8d5 53%,#ffe99a 62% 100%);
  background-size:240% 100%;
  animation:klick-vorne-hinten 6s ease-in-out infinite,
            klick-lichtschimmer 5.5s ease-in-out infinite;
}

/* Schlichte Variante: Drehung plus ein ruhiger Aufmerksamkeitsimpuls. */
@keyframes klick-sanfter-impuls{
  0%,62%,100%{box-shadow:0 0 .25rem #f0c73a30}
  72%{box-shadow:0 0 1rem .28rem #f0c73a78}
  82%{box-shadow:0 0 .35rem .05rem #f0c73a42}
}
.klick-mich{
  background:#ffe99a;
  animation:klick-vorne-hinten 6s ease-in-out infinite,
            klick-sanfter-impuls 6s ease-in-out infinite;
}

/* "Wir sind anders": Pinselstrich, Handschrift und anschließend die Schilddrehung. */
@keyframes klick-pinsel-malen{
  0%,12%{opacity:0;transform:scaleX(.03)}
  14%{opacity:1}
  21%,91%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}
}
@keyframes klick-handschrift-schreiben{
  0%,17%{opacity:0;clip-path:inset(0 100% 0 0)}
  19%{opacity:1}
  27%,91%{opacity:1;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 0 0 0)}
}
@keyframes klick-schild-drehen{
  0%,16%{opacity:0;transform:perspective(340px) rotateY(0deg)}
  20%,50%{opacity:1;transform:perspective(340px) rotateY(0deg)}
  64%{opacity:1;transform:perspective(340px) rotateY(180deg)}
  78%,88%{opacity:1;transform:perspective(340px) rotateY(360deg)}
  94%,100%{opacity:0;transform:perspective(340px) rotateY(360deg)}
}
.klick-mich{
  position:relative;
  isolation:isolate;
  background:transparent;
  box-shadow:none;
  animation:klick-schild-drehen 15s ease-in-out infinite;
  transform-origin:center;
  transform-style:preserve-3d;
}
.klick-mich::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:.02em -.55em -.04em -.5em;
  border-radius:0;
  clip-path:polygon(0 31%,5% 18%,11% 23%,17% 10%,25% 17%,34% 8%,43% 15%,52% 7%,61% 14%,70% 9%,79% 17%,88% 12%,96% 22%,100% 39%,97% 69%,91% 78%,83% 73%,74% 87%,65% 79%,55% 91%,46% 82%,36% 92%,27% 80%,18% 88%,10% 75%,3% 81%,0 65%);
  background:
    linear-gradient(180deg,#ffeaa0 0 18%,#ffe27a 22% 70%,#f7cf55 76% 82%,#ffe99a 88% 100%);
  transform-origin:left center;
  animation:klick-pinsel-malen 15s ease-in-out infinite;
}
.klick-mich>span{
  display:block;
  animation:klick-handschrift-schreiben 15s steps(12,end) infinite;
}

/* Echter waagerechter Farbauftrag mit sichtbaren Borstenspuren. */
.klick-mich::before{
  inset:-.4em -1.18em;
  clip-path:none;
  border-radius:0;
  background:transparent url("klick-mich-pinselstrich.png") center/100% 100% no-repeat;
}
.klick-mich{
  padding:.12em .95em;
}

/* Geöffneter Wissensbereich: kein schwebender Hinweis über den Texten. */
.wissen-schliessen{display:none}
.wissensfach[open]>summary{
  position:relative;
  inset:auto;
  display:flex;
  width:100%;
  min-height:0;
  margin:0;
  padding:.85rem 1rem;
  transform:none;
  background:#eef8fc;
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:1rem;
  line-height:1.2;
}
.wissensfach[open] .wissens-frage,
.wissensfach[open] .klick-mich{display:none}
.wissensfach[open] .wissen-schliessen{
  display:inline-block;
  padding:.45rem 1.1rem;
  border-radius:999px;
  color:#fff;
  background:var(--blue);
  font-weight:700;
}

/* Zweistufiger Einstieg: erst kleine Tafel zeigen, dann die Inhalte öffnen. */
.wissen-start{
  position:absolute;
  z-index:4;
  left:3%;
  bottom:2.3%;
  width:27%;
  transform:translateY(-50%);
}
.klick-ausloeser{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto auto;
  width:100%;
  padding:0;
  border:0;
  color:var(--blue);
  background:transparent;
  font-family:"SHG Schreibschrift","Brush Script MT",cursive;
  font-size:clamp(1.2rem,2.45vw,2rem);
  line-height:1;
  cursor:pointer;
}
.klick-ausloeser .klick-mich{margin-top:.7rem;font-size:1.08em}
.wissen-tafel{
  position:absolute;
  z-index:5;
  left:72%;
  bottom:-.15rem;
  width:max-content;
  max-width:12rem;
  padding:.62rem 1rem;
  border:0;
  border-radius:.35rem;
  color:#fff;
  background:var(--blue);
  font:700 .95rem/1.2 "Segoe UI",Arial,sans-serif;
  box-shadow:0 .45rem 1rem #05275835;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateX(-.8rem) scale(.94);
  transition:opacity .2s ease,transform .2s ease;
}
.wissen-tafel::after{
  content:"";
  position:absolute;
  left:-.55rem;
  top:50%;
  border:.55rem solid transparent;
  border-right-color:var(--blue);
  border-left:0;
  transform:translateY(-50%);
}
.wissen-start.tafel-sichtbar .wissen-tafel,
.wissen-start:focus-within .wissen-tafel{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0) scale(1);
}
.wissen-start.wissen-offen{visibility:hidden}
.wissen-schliessen{
  display:block;
  margin:3.4rem auto .5rem;
  padding:.75rem 1.55rem;
  border:0;
  border-radius:999px;
  color:#fff;
  background:var(--blue);
  font-size:1.15rem;
  font-weight:700;
  cursor:pointer;
}
.wissensfach .wissen:not([hidden]){display:block}
@media(max-width:650px){
  .wissen-start{left:3%;width:29%}
  .wissen-tafel{left:58%;bottom:-1.9rem;max-width:8.5rem;font-size:.72rem}
}

/* Direkter Einstieg: Klick auf den Pinsel öffnet sofort den Wissensbereich. */
.wissen-tafel{display:none}
#wissen-inhalte{scroll-margin-top:1rem}

/* Kompaktere Desktop-Ansicht: Das Roll-up bleibt lesbar, zeigt aber deutlich mehr Inhalt auf einmal. */
@media (min-width:851px){
  body{background:#eef8fc}
  .rollup{max-width:680px;margin:0 auto}
}

.wissens-frage{overflow:hidden}

/* Kurzer, gut lesbarer Infobereich für Besucher und Suchmaschinen. */
.seo-kurzinfo{
  max-width:680px;
  margin:0 auto;
  padding:2.2rem clamp(1.25rem,4vw,2.6rem) 2.5rem;
  color:#073a78;
  background:linear-gradient(180deg,#eef8fc 0%,#fffdf3 100%);
  text-align:center;
}
.seo-kurzinfo .seo-kicker{
  margin:0 0 .35rem;
  color:#ee1552;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.seo-kurzinfo h1{
  margin:.2rem 0 1rem;
  color:#0756ac;
  font-size:clamp(1.75rem,5vw,2.65rem);
  line-height:1.08;
}
.seo-kurzinfo>p:not(.seo-kicker){
  margin:.7rem auto 1.5rem;
  max-width:40rem;
  font-size:1.05rem;
  line-height:1.6;
}
.seo-treffpunkt{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}
.seo-treffpunkt p{
  margin:0;
  padding:1rem .8rem;
  border-radius:1rem;
  background:#fff;
  box-shadow:0 .35rem 1rem rgba(7,58,120,.08);
  line-height:1.45;
}
.seo-treffpunkt strong{color:#ee1552}
.seo-treffpunkt a{color:#0756ac;overflow-wrap:anywhere}
@media(max-width:650px){
  .seo-treffpunkt{grid-template-columns:1fr}
  .seo-kurzinfo{text-align:left}
  .seo-kurzinfo .seo-kicker,.seo-kurzinfo h1{text-align:center}
}