/* Skizze "Mischung", Runde 2 (20.10.2026, Jens: smootheres Scrollen, bessere Infokarten, Hallenplan größer und stylischer,
   Countdown mittig und groß, größere Überschriften, Teilnehmer aus dem Dashboard). Reihenfolge nach Zielgruppen-Agent:
   1 Flug (Film als Bildfolge auf Canvas, weich geglättet), 2 Hallenplan als Vollbild-Bühne, 3 Info-Karten,
   4 Trau dich, 5 Für Eltern, 6 Schluss. Nur zum Anschauen, nicht Teil der echten Seite. */
:root{--blau:#12335e;--blau-tief:#0b1f3b;--gruen:#8cb229;--gruen-tief:#5d7a14;--gelb:#fac00a;--holz:#c9a77a;--grund:#eef0e8;--panel:#f8f9f4;--grau:#4b5b70;
  --a-ausbildung:#8cb229;--a-praktikum:#fac00a;--a-studium:#4aa3df;--a-ferienjob:#f2795b;--a-job:#a98be0;
  --titel:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--text:"Instrument Sans","Segoe UI",system-ui,sans-serif;--mono:"Jura","JetBrains Mono",ui-monospace,Consolas,monospace;--logo:"Jura","Segoe UI",system-ui,sans-serif;
  --schatten:0 1px 2px rgba(5,12,24,.9),0 3px 12px rgba(5,12,24,.7),0 10px 40px rgba(5,12,24,.6);--weich:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:auto}html,body{margin:0;overflow-x:clip}
body{background:var(--grund);color:var(--blau);font:400 1.06rem/1.6 var(--text)}
.etikett{position:fixed;left:1rem;bottom:1rem;z-index:20;font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;background:rgba(18,51,94,.88);color:#fff;padding:.35rem .7rem;border-radius:999px}
.knopf{display:inline-block;background:var(--gelb);color:var(--blau);font:700 1.05rem var(--text);text-decoration:none;padding:.95rem 1.8rem;border-radius:999px;text-shadow:none;border:0;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(250,192,10,.8);transition:transform .3s var(--weich),box-shadow .3s}
.knopf:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(250,192,10,.95)}
.knopf:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}

/* Einheitliche Überschriften: Kennzeile, große Zeile, Unterzeile */
.kenn{display:inline-flex;align-items:center;gap:.65rem;font:700 .82rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blau);margin:0 0 1.2rem;
  background:#fff;border-radius:999px;padding:.38rem 1.05rem .38rem .38rem;box-shadow:0 14px 30px -18px rgba(18,51,94,.55),0 0 0 1px #e3e7da}
.kenn .ikon{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--gruen);color:#fff;display:grid;place-items:center;flex:none}
.kenn .ikon svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kenn .nr{color:var(--gruen-tief)}
.kenn .nr::after{content:"";display:inline-block;width:1.4rem;height:2px;background:currentColor;margin:0 0 .22em .6rem;vertical-align:middle;opacity:.6}
.dunkel .kenn{background:rgba(255,255,255,.1);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dunkel .kenn .nr{color:#c9dd8a}
/* Auftritt: Plakette gleitet herein, Symbol ploppt */
/* Einflug beim Scrollen (Jens 20.10.: mehr Dynamik, Elemente fliegen seitlich ein). Ohne Skript bleibt alles sichtbar. */
.js [data-flug]{opacity:0;translate:-56px 0;transition:opacity .65s var(--weich),translate .8s var(--weich);transition-delay:calc(var(--n,0) * 110ms)}
.js [data-flug="rechts"]{translate:56px 0}
.js [data-flug].da{opacity:1;translate:0 0}
.halb{display:inline-block;translate:calc((1 - var(--sq,1)) * -32vw) 0;opacity:calc(.15 + var(--sq,1) * .85)}
.halb-r{translate:calc((1 - var(--sq,1)) * 32vw) 0}
@media (max-width:760px){.js [data-flug]{translate:-28px 0}.js [data-flug="rechts"]{translate:28px 0}.halb{translate:calc((1 - var(--sq,1)) * -18vw) 0}.halb-r{translate:calc((1 - var(--sq,1)) * 18vw) 0}}
@media (prefers-reduced-motion:reduce){.js [data-flug]{opacity:1;translate:none;transition:none}.halb,.halb-r{translate:none;opacity:1}}
.kenn{opacity:0;transform:translateY(14px);transition:opacity .6s var(--weich),transform .6s var(--weich)}
.kenn .ikon{transform:scale(.3) rotate(-25deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1) .15s}
.kenn.da{opacity:1;transform:none}.kenn.da .ikon{transform:none}
.titel{font:800 clamp(2.8rem,7vw,6.5rem)/.95 var(--titel);letter-spacing:-.035em;margin:0}
.unterzeile{font:500 clamp(1.1rem,1.7vw,1.45rem)/1.4 var(--text);margin:1rem 0 0;max-width:46ch;color:var(--grau)}
.dunkel .unterzeile{color:#c9d4e2}

/* Klapp-Countdown */
.countdown{display:flex;gap:.45rem;margin:0}
.countdown span{display:flex;flex-direction:column;align-items:center}
.countdown b{font:700 clamp(1.7rem,3.4vw,3rem)/1 var(--logo);background:linear-gradient(180deg,#1b4477 0 50%,#0f2a4d 50%);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.4rem .55rem .32rem;min-width:2.3ch;text-align:center;font-variant-numeric:tabular-nums;color:#fff;text-shadow:none;box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.countdown b.tick{animation:klapp .3s var(--weich)}
.countdown.mit-text span{display:none}
.countdown-text{display:inline-block;font:700 clamp(1.25rem,2.8vw,2.3rem)/1.1 var(--logo);font-style:normal;color:#fff;background:linear-gradient(180deg,#1b4477,#0f2a4d);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:.5em .9em;text-align:center;box-shadow:0 0 28px -6px rgba(54,180,255,.55)}
@keyframes klapp{0%{transform:perspective(300px) rotateX(-70deg);opacity:.25}100%{transform:none;opacity:1}}
.countdown small{font:500 .64rem var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-top:.3rem;color:#fff;opacity:.9}

/* 1 Flug */
.flug{position:relative;height:540vh}
.flug-buehne{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--blau-tief)}
.flug-buehne::before{content:"";position:absolute;inset:0;background:url("../medien/start.jpg") center/cover;opacity:1;transition:opacity .6s}
.flug.film-bereit .flug-buehne::before{opacity:0}
.flug canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(calc(1.02 + var(--p,0)*.05));transform-origin:50% 55%}
.flug-logo-link{position:absolute;left:clamp(1.2rem,4vw,3.5rem);top:1.1rem;z-index:3;display:block;line-height:0}
.flug-logo-link .flug-logo{position:static;display:block}
.flug-logo-link:focus-visible{outline:3px solid var(--gelb);outline-offset:4px}
.flug-logo{position:absolute;left:clamp(1.2rem,4vw,3.5rem);top:1.1rem;height:clamp(52px,6vw,74px);width:auto;filter:drop-shadow(0 0 .5px rgba(255,255,255,.9));z-index:3}
.schleier{position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 62% at 50% 52%,rgba(8,18,34,.78) 0%,rgba(8,18,34,.5) 55%,rgba(8,18,34,.15) 100%);opacity:var(--s,1)}
/* Großes, verwaschenes JOBMESSE 2026 hinter dem Kopf (Jens 20.10., Vorbild Kingfisher-Hero) */
/* Großes, verwaschenes JOBMESSE 2026 auf einem Bogen, Krümmung wie das Karten-Rad (Jens 20.10.) */
.wasser{position:absolute;left:0;right:0;top:-7.5vh;margin:0;z-index:1;pointer-events:none;opacity:calc(var(--w,1) * .36);
  filter:blur(1.6px);-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 65%,transparent 100%);
  transform:translateY(calc(var(--p,0) * -70px)) scale(calc(1 + var(--p,0) * .05));transform-origin:50% 0}
.wasser svg{display:block;width:100%;height:auto;overflow:visible}
.wasser text{fill:#fff;font:800 205px var(--titel);letter-spacing:-.04em}
.wasser .schmal{display:none}
.wasser .schmal text{font-size:150px}
.flug-buehne{--h:clamp(0,calc((var(--p,0) - .22) * 6),1)}
.logo-hof{position:absolute;left:-160px;top:-150px;width:620px;height:420px;z-index:2;pointer-events:none;opacity:calc(.45 + .55 * var(--h));background:radial-gradient(closest-side,rgba(255,255,255,.88) 0%,rgba(255,255,255,.74) 22%,rgba(255,255,255,.48) 45%,rgba(255,255,255,.22) 68%,rgba(255,255,255,.07) 86%,rgba(255,255,255,0) 100%)}
@media (max-width:760px){.logo-hof{left:-120px;top:-115px;width:420px;height:290px}}
/* KI-Kennzeichnung direkt am Film (EU-KI-Verordnung, sichtbar beim Ansehen), führt zum Bildnachweis (Jens 21.10.) */
.ki-etikett{position:absolute;right:clamp(1rem,3vw,2.5rem);top:1.3rem;z-index:4;display:inline-flex;align-items:center;gap:.35rem;font:600 .74rem/1 var(--text);letter-spacing:.02em;color:#fff;text-decoration:none;background:rgba(5,12,24,.55);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.42rem .75rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ki-etikett::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:#36b4ff;box-shadow:0 0 8px #36b4ff}
.ki-etikett:hover{background:rgba(5,12,24,.75)}
/* Original-Logo bleibt; Lichthof bläulich statt weiß, blitzt beim Laden einmal blau auf und leuchtet dann ruhig (Jens 21.10.) */
.logo-hof{background:radial-gradient(closest-side,rgba(228,243,255,.92) 0%,rgba(206,232,255,.8) 22%,rgba(163,213,255,.52) 45%,rgba(112,188,255,.26) 68%,rgba(80,170,255,.09) 86%,rgba(80,170,255,0) 100%)}
.logo-hof::after{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(40,165,255,.95) 0%,rgba(54,180,255,.7) 30%,rgba(54,180,255,.3) 55%,rgba(54,180,255,0) 78%);opacity:0;animation:hof-blitz 2s cubic-bezier(.22,.7,.2,1) .5s both}
@keyframes hof-blitz{0%{opacity:0;transform:scale(.6)}28%{opacity:1;transform:scale(1.06)}100%{opacity:.22;transform:scale(1)}}
.flug-logo{animation:logo-blitz 2s cubic-bezier(.22,.7,.2,1) .5s both}
@keyframes logo-blitz{0%{filter:drop-shadow(0 0 .5px rgba(255,255,255,.9))}28%{filter:drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 22px rgba(54,180,255,1)) drop-shadow(0 0 60px rgba(54,180,255,.8))}100%{filter:drop-shadow(0 0 .5px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(54,180,255,.45))}}
@media (prefers-reduced-motion:reduce){.logo-hof::after,.flug-logo{animation:none}.logo-hof::after{opacity:.22}.flug-logo{filter:drop-shadow(0 0 .5px rgba(255,255,255,.9)) drop-shadow(0 0 14px rgba(54,180,255,.45))}}
.flug-buehne::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22vh;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(11,31,59,0) 0%,rgba(11,31,59,.55) 55%,var(--blau-tief) 100%)}
.ausblende{position:absolute;inset:0;pointer-events:none;background:var(--blau-tief);opacity:var(--e,0)}
.tafel{position:absolute;left:50%;top:var(--mitte,50%);width:min(92vw,1100px);color:#fff;text-shadow:var(--schatten);text-align:center;z-index:2;
  opacity:var(--k,0);transform:translate(-50%,calc(-50% + (1 - var(--k,0))*26px)) scale(calc(.97 + var(--k,0)*.03));pointer-events:none}
.tafel a{pointer-events:auto}
.tafel .dach{font:500 clamp(.72rem,1vw,.85rem) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#dfe8c6;margin:0 0 1rem}
.held{--mitte:55%}
.marke{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 clamp(1rem,2.4vh,1.6rem);padding:.45rem 1.1rem .45rem .5rem;border-radius:999px;
  background:rgba(11,31,59,.55);border:1.5px solid rgba(250,192,10,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none}
.marke b{font:700 clamp(1.05rem,1.7vw,1.45rem)/1 var(--logo);letter-spacing:0;color:var(--blau);background:var(--gelb);border-radius:999px;padding:.42rem .85rem}
.marke span{font:600 clamp(.9rem,1.3vw,1.1rem) var(--logo);color:#fff}
.marke b,.marke span{white-space:nowrap}
@media (max-width:480px){.marke{gap:.45rem;padding-right:.8rem}.marke b{font-size:.95rem;padding:.4rem .7rem}.marke span{font-size:.8rem}}
.held h1{font:800 clamp(2.5rem,6vw,5.6rem)/.98 var(--titel);letter-spacing:-.035em;margin:0 auto;max-width:16ch}
.held .lockt{font:600 clamp(1.1rem,2vw,1.6rem)/1.35 var(--text);margin:.9rem 0 0;color:#eef3e0}
.held .countdown{justify-content:center;gap:clamp(.35rem,.9vw,.7rem);margin:0 0 clamp(1.3rem,3vh,2rem)}
.held .countdown b{font-size:clamp(1.9rem,4.4vw,4rem);border-radius:clamp(8px,1vw,14px);padding:.12em .14em .08em;border-color:rgba(255,255,255,.28);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),inset 0 -1px 0 rgba(255,255,255,.08)}
.held .countdown small{font-size:clamp(.62rem,.9vw,.8rem);margin-top:.55rem}
.eckdaten{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem 1.1rem;margin:clamp(1.1rem,2.6vh,1.7rem) 0 clamp(1rem,2.4vh,1.5rem);font:600 clamp(1rem,1.5vw,1.25rem) var(--text)}
.eckdaten .datum{font:800 clamp(1.3rem,2.2vw,1.9rem)/1 var(--titel);letter-spacing:-.03em;color:var(--gelb)}
.eckdaten span+span::before{content:"";display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--gruen);margin-right:1.1rem;vertical-align:.12em}
.eckdaten .datum+span::before{margin-left:.1rem}
.held-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem 1rem;margin:0}
/* Ab Messe-Ende (13.11., 16 Uhr) steht "Feedback geben" groß vorn, leuchtet einmal auf; "Wer ist dabei?" tritt zurück (Jens 21.10.) */
.feedback-knopf[hidden],.knopf[hidden]{display:none}
.feedback-knopf{font-size:1.15rem;padding:1.05rem 2rem;animation:feedback-auf 1.6s cubic-bezier(.22,.7,.2,1) .6s both}
@keyframes feedback-auf{0%{box-shadow:0 0 0 0 rgba(250,192,10,0)}35%{box-shadow:0 0 0 6px rgba(255,255,255,.55),0 0 42px 10px rgba(250,192,10,.95)}100%{box-shadow:0 0 26px 2px rgba(250,192,10,.55)}}
.feedback-zeit .knopf:not(.feedback-knopf){background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
@media (prefers-reduced-motion:reduce){.feedback-knopf{animation:none;box-shadow:0 0 26px 2px rgba(250,192,10,.55)}}
.hoer-knopf{display:inline-flex;align-items:center;gap:.6rem;font:700 1rem var(--text);color:#fff;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:.45rem 1.1rem .45rem .45rem;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:none;pointer-events:auto;transition:background .3s,border-color .3s}
.hoer-knopf:hover{background:rgba(255,255,255,.2);border-color:#fff}
.hoer-ring{position:relative;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gelb) calc(var(--fort,0) * 1turn),rgba(255,255,255,.25) 0)}
.hoer-ring::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blau)}
.hoer-ring svg{position:relative;width:1rem;height:1rem;fill:#fff}
.hoer-ring .pause,.hoer-knopf[aria-pressed="true"] .spielen{display:none}.hoer-knopf[aria-pressed="true"] .pause{display:inline}
.hoer-zeit{font:500 .8rem var(--mono);opacity:.75}
.tafel .gross{font:800 clamp(2.6rem,7vw,6.5rem)/.98 var(--titel);letter-spacing:-.035em;margin:0}
.tafel-unter{font:600 clamp(1.1rem,2vw,1.6rem)/1.4 var(--text);margin:1.1rem 0 0;color:#eef3e0}
.tafel.unten{top:auto;bottom:clamp(2rem,8vh,5rem);opacity:calc(var(--k,0) * clamp(0, 1 - var(--raus,0) * 1.5, 1));transform:translate(-50%,calc((1 - var(--k,0))*26px - var(--raus,0) * 34vh))}
.tafel.unten .gross{font-size:clamp(2rem,4.6vw,4.2rem)}
.tafel.unten .knopf{margin-top:1.3rem}

/* 1b Kurz gefragt: Was machst du lieber? (Scroll-Reise, Zielgruppen-Agent 20.10.) Die Wahl filtert Plan und Karten vor. */
.wahl{background:linear-gradient(180deg,rgba(11,31,59,0) 0,rgba(11,31,59,.82) 13vh,var(--blau-tief) 24vh);color:#fff;position:relative;overflow:hidden;z-index:3;margin-top:-60vh}
.wahl::before{content:"";position:absolute;inset:24vh -10% auto;height:60%;background:radial-gradient(50% 60% at 50% 0%,rgba(140,178,41,.22),transparent 70%);pointer-events:none}
.wahl-innen{position:relative;max-width:1320px;margin:0 auto;padding:calc(24vh + clamp(2.5rem,6vh,4.5rem)) clamp(1.2rem,5vw,4rem) clamp(4rem,9vh,6rem);text-align:center}
.wahl .unterzeile{margin-left:auto;margin-right:auto}
.wahl-kacheln{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.7rem,1.6vw,1.2rem);margin:2.4rem 0 1.6rem}
.kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;text-align:left;padding:1.3rem 1.2rem 1.2rem;border-radius:24px;cursor:pointer;color:#fff;font:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1.5px solid rgba(255,255,255,.18);
  --q:var(--wq,1);translate:calc((1 - var(--q)) * var(--dx,0px)) calc((1 - var(--q)) * 40px);rotate:calc((1 - var(--q)) * var(--dr,0deg));opacity:calc(.1 + var(--q) * .9);
  transition:border-color .3s,background .3s,box-shadow .3s,transform .3s var(--weich)}
.kachel:nth-child(1){--dx:-44vw;--dr:-6deg}.kachel:nth-child(2){--dx:-24vw;--dr:-3deg}.kachel:nth-child(3){--dx:0vw;--dr:0deg}.kachel:nth-child(4){--dx:24vw;--dr:3deg}.kachel:nth-child(5){--dx:44vw;--dr:6deg}
.wahl:not(.bereit) .kachel{pointer-events:none}
.kachel:hover{border-color:rgba(255,255,255,.5);transform:translateY(-4px);transition-delay:0s}
.kachel .sym{width:3.2rem;height:3.2rem;border-radius:16px;display:grid;place-items:center;background:var(--c);color:var(--blau)}
.kachel .sym svg{width:1.7rem;height:1.7rem;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.kachel b{font:800 clamp(1.25rem,1.9vw,1.6rem)/1.1 var(--titel);margin-top:.4rem}
.kachel small{font-size:.92rem;color:#c9d4e2;line-height:1.4}
.kachel[aria-pressed="true"]{border-color:var(--gelb);background:linear-gradient(160deg,rgba(250,192,10,.22),rgba(255,255,255,.05));box-shadow:0 24px 50px -28px rgba(250,192,10,.7)}
.kachel[aria-pressed="true"]::after{content:"";position:absolute;right:1rem;top:1rem;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--gelb) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2312335e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.wahl .alles{font:700 1rem var(--text);color:#fff;background:none;border:2px solid rgba(255,255,255,.4);border-radius:999px;padding:.7rem 1.4rem;cursor:pointer}
.wahl .alles:hover{border-color:#fff}
#wahl-antwort{min-height:1.6rem;margin:1.2rem 0 0;font-weight:600;color:#eef3e0}
#wahl-antwort b{color:var(--gelb);font:800 1.5rem var(--titel)}
@media (max-width:860px){.wahl-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}.kachel:nth-child(5){grid-column:1 / -1}.kachel small{display:none}
  .kachel:nth-child(odd){--dx:-24vw}.kachel:nth-child(even){--dx:24vw}.kachel:nth-child(5){--dx:0vw}}
@media (prefers-reduced-motion:reduce){.kachel{opacity:1;transform:none;transition:none;translate:none;rotate:none}}

/* 2 Hallenplan als Vollbild-Bühne */
.karte{background:radial-gradient(130% 80% at 50% 0%,#1f4f86 0%,var(--blau) 50%,var(--blau-tief) 100%);color:#fff;position:relative}
.karte-kopf{padding:clamp(4rem,9vh,6.5rem) clamp(1.2rem,5vw,4rem) 1.4rem;max-width:1500px;margin:0 auto}
.buehne-karte{position:relative;height:100vh;height:100dvh;min-height:640px;display:flex;flex-direction:column;padding:0 clamp(.8rem,2vw,1.6rem) clamp(.8rem,2vw,1.4rem);overflow:hidden}
.werkzeug{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;padding:.7rem;border-radius:22px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}
.suche{position:relative;flex:1 1 300px;min-width:240px}
.suche input{width:100%;font:600 1.08rem var(--text);color:var(--blau);background:#fff;border:0;border-radius:15px;padding:.78rem 1rem .78rem 2.7rem}
.suche::before{content:"";position:absolute;left:1rem;top:50%;width:.95rem;height:.95rem;border:2.5px solid var(--blau);border-radius:50%;transform:translateY(-62%)}
.suche::after{content:"";position:absolute;left:1.85rem;top:58%;width:.5rem;height:2.5px;background:var(--blau);transform:rotate(45deg)}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chips button{font:600 .86rem var(--text);color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.35);border-radius:999px;padding:.38rem .8rem;cursor:pointer;transition:background .25s,border-color .25s}
.chips button:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* Ein Filter für Karten und Plan (Jens 21.10.): die Wahl-Kacheln; der aktive Filter steht als Etikett mit "Alle zeigen" da */
.filter-stand{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin:0;background:#fff;color:var(--blau);border-radius:16px;padding:.3rem .3rem .3rem 1rem;font:600 .95rem var(--text);box-shadow:0 12px 30px -20px rgba(18,51,94,.5)}
.filter-stand[hidden]{display:none}
.filter-stand b{font-weight:800}
.filter-stand button{min-height:44px;font:700 .9rem var(--text);color:#fff;background:var(--blau);border:0;border-radius:12px;padding:.4rem .9rem;cursor:pointer}
.filter-stand button:hover{background:#0d2a52}
.filter-wechseln{color:var(--blau);font-weight:600;font-size:.9rem;min-height:44px;display:inline-flex;align-items:center}
/* Filter-Knöpfe über dem Hallenplan: passende Stände leuchten in der Farbe des Angebots (Jens 21.10. abends: zurückgeholt) */
.filter-reiter{display:inline-flex;flex-wrap:wrap;gap:.25rem;background:rgba(5,12,24,.35);border-radius:16px;padding:.28rem}
.filter-reiter button{display:inline-flex;align-items:center;gap:.4rem;font:600 .9rem var(--text);color:#fff;background:transparent;border:0;border-radius:12px;padding:.5rem .8rem;cursor:pointer;transition:background .25s,color .25s}
.filter-reiter button:hover{background:rgba(255,255,255,.1)}
.filter-reiter button[aria-pressed="true"]{background:#fff;color:var(--blau)}
.punkt-a{width:.62rem;height:.62rem;border-radius:50%;background:var(--c,#fff);flex:none}
.werkzeug .rechts{display:flex;gap:.4rem;margin-left:auto}
.werkzeug .rechts button{font:700 .9rem var(--text);color:var(--blau);background:#fff;border:0;border-radius:14px;padding:.6rem .95rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem}
.werkzeug .rechts button[aria-pressed="true"]{background:var(--gelb)}
.werkzeug .rechts .plan-pdf{font:700 .9rem var(--text);color:var(--blau);background:var(--gelb);border-radius:14px;padding:.6rem .95rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.werkzeug .rechts .plan-pdf[hidden]{display:none}
.herz{width:1rem;height:1rem;flex:none}
#treffer{position:relative;z-index:4;min-height:2.4rem;margin:.6rem .4rem 0;font-weight:600;display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;color:#eef3e0}
#treffer .treffer-weg{font:700 .9rem var(--text);color:var(--blau);background:var(--gelb);border:0;border-radius:999px;padding:.4rem .9rem;cursor:pointer;margin-left:.4rem;min-height:2.4rem}
#treffer .zahl{font:800 2rem/1 var(--titel);color:var(--gelb)}
.plan{position:relative;flex:1;min-height:0;margin-top:.2rem;border-radius:22px}
/* Hallenplan in 3D (Jens 20.10. abends): assets/halle3d.css; Filterpunkte leuchten kräftiger */
.punkt-a{box-shadow:0 0 6px var(--c,#fff),0 0 14px color-mix(in srgb,var(--c,#fff) 65%,transparent)}
/* Stand-Infokarte (Jens 21.10.): dunkles Standschild passend zur 3D-Halle, Lichtkante in der Leuchtfarbe des Stands (--sc) */
.schublade{--sc:var(--gelb);position:absolute;z-index:6;right:clamp(.8rem,2vw,1.6rem);top:var(--oben,6.4rem);max-height:calc(100% - var(--oben,6.4rem) - clamp(.8rem,2vw,1.4rem));width:min(400px,calc(100% - 1.6rem));
  display:flex;flex-direction:column;color:#fff;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 70% at 18% 0%,color-mix(in srgb,var(--sc) 20%,transparent),transparent 62%),linear-gradient(180deg,#14335e 0%,#0d2547 45%,#0a1d39 100%);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 color-mix(in srgb,var(--sc) 70%,transparent);
  transform:translateX(calc(100% + 2rem));transition:transform .6s var(--weich)}
.schublade.offen{transform:none}
.schublade .griff{display:none}
.schublade .zu{position:absolute;top:.75rem;right:.75rem;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font:600 1.4rem/1 var(--text);cursor:pointer;z-index:3;display:grid;place-items:center;transition:background .2s}
.schublade .zu:hover{background:rgba(255,255,255,.2)}
.schublade :focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.info{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:1.25rem 1.3rem 0;display:flex;flex-direction:column}
.info.rein{animation:rein .55s var(--weich)}
@keyframes rein{from{opacity:0;transform:translateX(26px)}}
.info .leer{color:#c3d0df;margin:0 0 1rem;line-height:1.5}
.si-kopf{display:flex;gap:.9rem;align-items:center;padding-right:3.2rem;margin:0 0 1rem}
.si-platte{flex:none;display:grid;place-items:center;align-content:center;gap:.15rem;min-width:4.2rem;height:4.4rem;padding:.35rem .55rem;border-radius:16px;background:var(--sc);color:#0b1f3b;margin:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 10px 28px -10px color-mix(in srgb,var(--sc) 80%,transparent)}
.si-platte span{font:700 .62rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase}
.si-platte b{font:800 2.2rem/1 var(--titel);letter-spacing:-.03em}
.si-platte.frei{background:#c3cedb}
.info h3{font:800 1.5rem/1.08 var(--titel);margin:0;letter-spacing:-.01em;text-wrap:balance}
.info h3:focus{outline:none}
.info .ort{margin:.3rem 0 0;color:#b9c7d9;font-size:.95rem}
.si-logo.logo-feld{height:84px;border:0;border-radius:16px;background:#fff;padding:.7rem 1rem;margin:0 0 1rem;flex:none}
.si-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0;list-style:none}
.si-chips li{display:inline-flex;align-items:center;gap:.45rem;font:600 .86rem var(--text);color:#fff;padding:.38rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 65%,transparent)}
.si-chips i{width:.55rem;height:.55rem;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.si-zwischen{font:700 .76rem var(--text);letter-spacing:.08em;text-transform:uppercase;color:#a9bbd1;margin:0 0 .3rem}
.si-berufe{list-style:none;margin:0 0 .3rem;padding:0}
.si-berufe li{position:relative;padding:.55rem 0 .55rem 1.3rem;font:500 .96rem/1.4 var(--text);color:#e9eff7;border-top:1px solid rgba(255,255,255,.08)}
.si-berufe li:first-child{border-top:0}
.si-berufe li::before{content:"";position:absolute;left:.18rem;top:1.08rem;width:.42rem;height:.42rem;border-radius:2px;background:var(--sc);transform:rotate(45deg)}
.si-berufe li[hidden]{display:none}
.si-mehr{align-self:flex-start;min-height:44px;font:700 .9rem var(--text);color:#fff;background:none;border:0;padding:.3rem 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:color-mix(in srgb,var(--sc) 80%,transparent)}
.info .frag{color:#c3d0df;margin:0 0 .6rem}
.info .wegtext{display:flex;gap:.5rem;align-items:center;margin:.5rem 0 1rem;font-weight:600;color:#ffd75e;font-size:.92rem}
.info .wegtext svg{width:1.1rem;height:1.1rem;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.si-fuss{position:sticky;bottom:0;margin:auto -1.3rem 0;padding:.85rem 1.3rem 1rem;background:linear-gradient(180deg,rgba(10,29,57,.9),#0a1d39 35%);border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:.45rem}
.si-reihe{display:flex;gap:.5rem;align-items:stretch}
.si-fuss .stelle-haupt{flex:1;justify-content:center;min-height:48px;font-size:.98rem}
.si-fuss .stelle-folgt{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;color:#c3d0df;border:1.5px dashed rgba(255,255,255,.3);border-radius:999px;font:600 .85rem var(--mono);padding:0 .8rem}
.info .merken-text{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:48px;padding:0 1.05rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);background:transparent;color:#fff;font:700 .92rem var(--text);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.info .merken-text:hover{background:rgba(255,255,255,.08)}
.info .merken-text[aria-pressed="true"]{border-color:var(--gelb);color:var(--gelb);background:rgba(250,192,10,.12)}
.si-klein{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 .8rem}
.si-klein a,.info .zurueck,.info .alle-weg{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font:600 .88rem var(--text);color:#d5e0ec;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.si-klein a:hover,.info .zurueck:hover,.info .alle-weg:hover{color:#fff}
.info .zurueck svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.info .alle-weg{color:#ffb9a8}
.info ol.rundgang{padding:0;margin:.2rem 0 1rem;list-style:none;counter-reset:r}
.info ol.rundgang li{counter-increment:r;display:flex;gap:.7rem;align-items:center;padding:.1rem 0;border-top:1px solid rgba(255,255,255,.1)}
.info ol.rundgang li:first-child{border-top:0}
.info ol.rundgang li::before{content:counter(r);display:grid;place-items:center;flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--gelb);color:#0b1f3b;font:800 .95rem var(--titel)}
.info ol.rundgang .rg-name{flex:1;min-height:48px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;background:none;border:0;color:#fff;font:600 .96rem var(--text);cursor:pointer;padding:.3rem 0}
.info ol.rundgang .rg-name small{font:500 .78rem var(--mono);color:#a9bbd1}
.info ol.rundgang .merk-weg{color:#fff}
.listen-panel{position:absolute;z-index:6;left:clamp(.8rem,2vw,1.6rem);top:var(--oben,6.4rem);bottom:clamp(.8rem,2vw,1.4rem);width:min(340px,calc(100% - 1.6rem));background:#fff;color:var(--blau);border-radius:24px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.75);transform:translateX(calc(-100% - 2rem));transition:transform .6s var(--weich);display:flex;flex-direction:column;overflow:hidden}
.listen-panel.offen{transform:none}
.listen-panel h3{font:800 1.2rem var(--titel);margin:0;padding:1.1rem 1.2rem .6rem}
#standliste{list-style:none;padding:0 .6rem .8rem;margin:0;overflow:auto;overscroll-behavior:contain;flex:1}
#standliste li{display:flex;gap:.7rem;align-items:center;padding:.5rem .6rem;border-radius:10px;cursor:pointer;font-size:.95rem}
#standliste li b{font:500 .85rem var(--mono);color:var(--gruen-tief);min-width:2.2ch}
#standliste li .punkte{display:flex;gap:.2rem;margin-left:auto}
#standliste li .punkte i{width:.5rem;height:.5rem;border-radius:50%;background:var(--c)}
#standliste li:hover{background:#eef3e0}
#standliste li.weg{display:none}

/* 3 Info-Karten als Deck (Umdrehen nach dem Typen-Rad von Planetensignatur; Jens 20.10.: waagerecht statt Bogen),
   die mittlere ist aktiv und dreht sich beim Antippen um. Rückseite: alles, was der Betrieb bietet und sucht. */
.infokarten{position:relative;height:480vh;background:var(--grund)}
.infokarten-buehne{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(.5rem,1.8vh,1.4rem)}
.infokarten-kopf{padding:0 clamp(1.2rem,6vw,6rem);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem 2rem}
.infokarten-kopf .titel{font-size:clamp(2.4rem,5.4vw,5rem)}
.infokarten-kopf .unterzeile{margin-top:.5rem}
.rad{position:relative;flex:none;height:var(--rad-h,520px);touch-action:pan-y;cursor:grab;outline:none;overflow:visible}
.rad.zieht{cursor:grabbing}
.rad:focus-visible{outline:3px solid var(--gelb);outline-offset:-3px;border-radius:24px}
.bahn[hidden]{display:none}
.bahn{position:absolute;left:50%;border:1.5px dashed rgba(18,51,94,.2);border-radius:50%;pointer-events:none;transform:translateX(-50%)}
.spur{position:absolute;inset:0}
.infokarte{position:absolute;left:50%;top:0;width:var(--kw,310px);height:var(--kh,450px);perspective:1400px;will-change:transform;user-select:none;-webkit-user-select:none}
.infokarte[hidden]{display:none}
.karte-zoom{width:100%;height:100%;transform:scale(.88);transition:transform .7s var(--weich)}
.infokarte.aktiv .karte-zoom{transform:scale(1.04);cursor:pointer}
.karte-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--weich)}
.infokarte.gedreht .karte-flip{transform:rotateY(180deg)}
.seite{position:absolute;inset:0;border-radius:24px;background:#fff;color:var(--blau);padding:.75rem .75rem .95rem;display:flex;flex-direction:column;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px -36px rgba(18,51,94,.55),0 0 0 1px #e3e7da;opacity:.78;transition:opacity .5s,box-shadow .5s}
.infokarte.aktiv .seite{opacity:1;box-shadow:0 44px 80px -36px rgba(18,51,94,.65),0 0 0 2px var(--gruen)}
.seite.hinten{transform:rotateY(180deg);background:radial-gradient(130% 90% at 50% 0%,#1f4f86 0%,var(--blau) 70%);color:#fff;padding:1.1rem 1.15rem .95rem;overflow:auto;overscroll-behavior:contain}
.karte-oben{display:flex;justify-content:space-between;align-items:center;margin:0 0 .5rem}
.stand-chip{font:700 .74rem var(--mono);letter-spacing:.06em;background:var(--blau);color:#fff;border-radius:999px;padding:.28rem .62rem}
.merken{width:2.2rem;height:2.2rem;border-radius:50%;border:0;background:var(--grund);color:var(--blau);display:grid;place-items:center;cursor:pointer;transition:transform .25s var(--weich),background .25s}
.merken:hover{transform:scale(1.08)}
.merken[aria-pressed="true"]{background:var(--gelb)}
.merken[aria-pressed="true"] .herz path,.merken-text[aria-pressed="true"] .herz path,.rechts button[aria-pressed="true"] .herz path{fill:currentColor}
/* Herz zum Merken auffälliger (Jens 21.10.): rotes Feld mit Wort, beim Merken hüpft das Herz und kleine Herzen fliegen heraus,
   beim ersten Blick auf die Karten schlägt es einmal und eine Sprechblase erklärt es. Kein Dauer-Pulsieren. */
.merken{position:relative;width:auto;height:2.4rem;padding:0 .85rem 0 .7rem;border-radius:999px;background:#fff0f2;color:#d1304b;display:inline-flex;align-items:center;gap:.38rem;font:700 .84rem var(--text);box-shadow:0 0 0 1.5px rgba(209,48,75,.4);transition:transform .35s var(--weich),background .3s,box-shadow .3s,color .3s}
.merken::after{content:"Merken"}
.merken .herz{width:1.15rem;height:1.15rem}
.merken:hover{transform:scale(1.06);background:#ffe3e7}
.merken[aria-pressed="true"]{background:#d1304b;color:#fff;box-shadow:0 10px 20px -10px rgba(209,48,75,.9)}
.merken[aria-pressed="true"]::after{content:"Gemerkt"}
.info .merken-text{position:relative}
.info .merken-text[aria-pressed="true"]{border-color:#ff6b81;color:#fff;background:#d1304b}
.herz-pop .herz{animation:herz-pop .65s cubic-bezier(.3,1.6,.5,1)}
@keyframes herz-pop{0%{transform:scale(1)}30%{transform:scale(1.55)}55%{transform:scale(.86)}78%{transform:scale(1.12)}100%{transform:scale(1)}}
.herz-funken{position:absolute;left:1.15rem;top:50%;width:0;height:0;pointer-events:none}
.herz-funken i{position:absolute;left:0;top:0;animation:herz-flug .85s cubic-bezier(.2,.7,.3,1) forwards}
.herz-funken i::before{content:"\2665";position:absolute;transform:translate(-50%,-50%);font:normal .85rem/1 sans-serif;color:#e0435a}
.herz-funken i:nth-child(3n)::before{color:var(--gelb);font-size:.65rem}
@keyframes herz-flug{0%{transform:rotate(var(--w)) translateY(0) scale(.3);opacity:1}70%{opacity:1}100%{transform:rotate(var(--w)) translateY(calc(var(--d) * -1)) scale(1.05);opacity:0}}
#merk-zahl{display:inline-block}
.hupf{animation:hupf .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hupf{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.herz-tipp .herz{animation:herz-schlag 1.4s ease-in-out}
@keyframes herz-schlag{0%,100%{transform:scale(1)}14%{transform:scale(1.4)}28%{transform:scale(1)}42%{transform:scale(1.4)}58%{transform:scale(1)}}
.herz-blase{position:absolute;right:-.3rem;top:calc(100% + .6rem);z-index:6;width:max-content;max-width:13rem;background:var(--blau);color:#fff;font:600 .84rem/1.3 var(--text);padding:.6rem .8rem;border-radius:12px;box-shadow:0 14px 28px -12px rgba(18,51,94,.75);text-align:left;pointer-events:none;animation:blase-auf .45s var(--weich) both}
.herz-blase::before{content:"";position:absolute;right:1.2rem;top:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--blau)}
.herz-blase.weg{animation:blase-weg .4s ease forwards}
@keyframes blase-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes blase-weg{to{opacity:0;transform:translateY(-4px)}}
.merkzettel-leer.hupf-text{animation:hupf-text .9s ease}
.merkzettel-leer.warnung{color:#fff;background:rgba(250,192,10,.14);border:1.5px solid rgba(250,192,10,.65);border-radius:14px;padding:.8rem 1rem}
.merkzettel-leer.warnung b{color:var(--gelb)}
.merk-zu-karten{color:var(--gelb);font-weight:700;white-space:nowrap}
@keyframes hupf-text{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.herz-pop .herz,.herz-tipp .herz,.hupf,.herz-blase,.herz-blase.weg,.merkzettel-leer.hupf-text{animation:none}.herz-funken{display:none}}
.logo-feld{height:118px;border-radius:16px;background:#fff;border:1px solid #e3e7da;display:grid;place-items:center;padding:1rem;overflow:hidden}
.infokarte .logo-feld{height:var(--logo-h,92px);background:var(--panel);border:0;padding:.8rem 1rem;flex:none}
.logo-feld.dunkel-grund{background:var(--blau)!important}
.logo-feld img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}
.logo-feld.mono{background:color-mix(in srgb,var(--c,#dfe5d3) 26%,#fff)}
.logo-feld .monogramm{font:800 2.5rem/1 var(--titel);letter-spacing:-.04em;color:var(--blau)}
.logo-feld .schriftzug{font:800 1.25rem/1.08 var(--titel);text-align:center;color:var(--blau);letter-spacing:-.01em}
.infokarte h3{font:800 1.3rem/1.1 var(--titel);margin:.75rem .3rem .1rem}
.infokarte .ort{margin:0 .3rem .6rem;color:var(--grau);font-size:.88rem}
.angebote{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem;margin:0 .3rem .65rem;padding:0;list-style:none}
.angebote li{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem .1rem .35rem;border-radius:10px;background:#f1f3ec;color:#9aa5b3;font:600 .74rem/1.1 var(--text);text-align:center}
.angebote li i{width:.7rem;height:.7rem;border-radius:50%;border:2px solid #c7ced8}
.angebote li.an{background:color-mix(in srgb,var(--c) 18%,#fff);color:var(--blau)}
.angebote li.an i{background:var(--c);border-color:var(--c)}
.extra{margin:-.3rem .3rem .6rem;font-size:.85rem;color:var(--grau)}
.berufe-liste{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 .3rem .6rem;padding:0;list-style:none}
.berufe-liste li{font:600 .92rem/1.25 var(--text);background:var(--grund);border-radius:10px;padding:.32rem .58rem;max-width:100%}
.berufe-liste li.mehr{background:none;padding:.32rem .2rem;color:var(--gruen-tief);font-weight:700}
.infokarte .frag{margin:0 .3rem .6rem;font-size:.95rem;color:var(--grau)}
.dreh-tipp{margin:auto .3rem 0;display:flex;align-items:center;gap:.45rem;font:700 .86rem var(--text);color:var(--gruen-tief)}
.dreh-tipp svg,.rund-knopf svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.infokarte:not(.aktiv) .dreh-tipp{visibility:hidden}
.hinten .nr{font:500 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c9dd8a;margin:0}
.hinten h3{color:#fff;margin:.2rem 0 .2rem;font:800 1.35rem/1.1 var(--titel)}
.hinten h4{font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#c9d4e2;margin:.85rem 0 .4rem}
.hinten .bietet{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;padding:0;list-style:none}
.hinten .bietet li{display:flex;align-items:center;gap:.35rem;font:600 .85rem var(--text);background:rgba(255,255,255,.12);border-radius:999px;padding:.25rem .65rem}
.hinten .bietet i{width:.55rem;height:.55rem;border-radius:50%;background:var(--c)}
.hinten .berufe-voll{margin:0;padding:0 0 0 1.05rem;font-size:.93rem;line-height:1.45}
.hinten .berufe-voll li::marker{color:var(--gruen)}
.hinten .frag{color:#c9d4e2;margin:0;font-size:.95rem}
.stellen{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;margin:.7rem 0 .2rem}
.stelle-haupt{display:inline-flex;align-items:center;min-height:44px;font:700 .95rem var(--text);color:var(--blau);background:var(--gelb);border-radius:999px;padding:.55rem 1.1rem;text-decoration:none}
.stelle-haupt:hover{background:#ffd23f}
.stelle-folgt{font:600 .82rem var(--mono);letter-spacing:.04em;color:#c9d4e2;border:1.5px dashed rgba(255,255,255,.35);border-radius:999px;padding:.4rem .8rem}
.stellen .website{font:600 .88rem var(--text);color:#fff;text-decoration:underline;text-underline-offset:3px}
.stellen.hell .stelle-folgt{color:var(--grau);border-color:#c9d1bd}
.stellen.hell .website{color:var(--blau)}
.hinten-fuss{margin-top:auto;padding-top:.9rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.zum-plan{font:700 .92rem var(--text);color:#fff;background:var(--blau);border:0;border-radius:999px;padding:.55rem 1rem;cursor:pointer;transition:background .25s}
.zum-plan:hover{background:#1b4477}
.hinten .zum-plan{background:var(--gelb);color:var(--blau)}
.stelle{font:600 .9rem var(--text);color:var(--blau)}
.hinten .stelle{color:#fff}
.rund-knopf{width:2.3rem;height:2.3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.rund-knopf:hover{background:rgba(255,255,255,.12)}
.merk-hinweis{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin:0;font-size:.95rem;color:var(--grau)}
.merk-hinweis .herz{width:1.1rem;height:1.1rem;color:#d1495b}
.merk-hinweis.voll .herz path{fill:currentColor}
.merk-hinweis-link{font-weight:700;color:var(--blau);background:var(--gelb);border-radius:999px;padding:.4rem .9rem;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.rad-steuer{display:flex;justify-content:center;align-items:center;gap:1rem}
.rad-steuer button{width:2.8rem;height:2.8rem;border-radius:50%;border:0;background:var(--blau);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 26px -14px rgba(18,51,94,.8);transition:transform .25s var(--weich)}
.rad-steuer button:hover{transform:scale(1.08)}
.rad-steuer svg{width:1.2rem;height:1.2rem;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rad-steuer .ton-knopf{width:2.4rem;height:2.4rem;background:#fff;color:var(--blau);box-shadow:0 8px 20px -12px rgba(18,51,94,.6),0 0 0 1px #e3e7da}
.ton-knopf .aus{display:none}.ton-knopf[aria-pressed="false"] .aus{display:inline}.ton-knopf[aria-pressed="false"] .welle{display:none}
.rad-steuer .alle-zeigen{width:auto;height:2.8rem;border-radius:999px;padding:0 1.2rem;background:var(--gelb);color:var(--blau);font:700 .95rem var(--text);display:inline-flex;align-items:center;gap:.3rem;animation:auftauchen .4s var(--weich)}
.rad-steuer .alle-zeigen[hidden]{display:none}
.rad-steuer .alle-zeigen span{font:inherit;min-width:0}
@keyframes auftauchen{from{opacity:0;transform:scale(.8)}}
.ton-wrap{position:relative;display:inline-flex}
.ton-hinweis{position:absolute;left:50%;bottom:calc(100% + .55rem);transform:translateX(-50%);white-space:nowrap;font:700 .82rem var(--text);color:var(--blau);background:var(--gelb);border-radius:999px;padding:.35rem .75rem;opacity:0;pointer-events:none;transition:opacity .3s}
.ton-knopf.gesperrt{animation:tonpuls 1.6s ease-out infinite}
.ton-wrap:has(.ton-knopf.gesperrt) .ton-hinweis{opacity:1}
@keyframes tonpuls{0%{box-shadow:0 0 0 0 rgba(250,192,10,.7)}100%{box-shadow:0 0 0 14px rgba(250,192,10,0)}}
@media (max-width:760px){.ton-hinweis{left:auto;right:0;transform:none}}
.rad-steuer #rad-zahl,.rad-steuer span.platzhalter{font:600 .95rem var(--mono);min-width:6ch;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Schwebende Knöpfe rechts: Teilen und nach oben (wie bei Planetensignatur) */
.schwebe{position:fixed;right:clamp(.8rem,2vw,1.4rem);bottom:clamp(.8rem,2vw,1.4rem);z-index:5;display:flex;flex-direction:column;gap:.55rem;opacity:0;transform:translateY(20px);pointer-events:none;translate:0 calc(var(--hoch,0px) * -1);transition:opacity .4s var(--weich),transform .4s var(--weich),translate .35s var(--weich)}
.schwebe.da{opacity:1;transform:none;pointer-events:auto}
.schwebe button{width:3.2rem;height:3.2rem;border-radius:50%;border:0;background:#fff;color:var(--blau);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(5,12,24,.55),0 0 0 1px rgba(18,51,94,.08);transition:transform .25s var(--weich)}
.schwebe button:hover{transform:scale(1.08)}
.schwebe #teilen-knopf{background:var(--gelb)}
.schwebe svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.schublade-auf .schwebe{opacity:0;pointer-events:none}
.hinweis-toast{position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,20px);z-index:30;background:var(--blau);color:#fff;font:600 .95rem var(--text);padding:.7rem 1.1rem;border-radius:999px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100vw - 2rem)}
.hinweis-toast.da{opacity:1;transform:translate(-50%,0)}

/* 4 Trau dich */
.trau{max-width:1320px;margin:0 auto;padding:clamp(5rem,11vw,9rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.trau-fliess{font-size:1.15rem;line-height:1.6;margin:1.6rem 0 1.6rem;max-width:42ch}
.gespraech{display:grid;gap:.8rem}
.gespraech-kopf{font:500 .78rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gruen-tief);margin:0 0 .2rem}
.frage-karte{position:relative;background:#fff;border-radius:22px;padding:1.2rem 1.3rem 1.2rem 4.4rem;box-shadow:0 22px 46px -30px rgba(18,51,94,.55),0 0 0 1px #e3e7da;transition:transform .35s var(--weich),box-shadow .35s}
.frage-karte:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 30px 56px -30px rgba(18,51,94,.6),0 0 0 1.5px var(--gruen)}
.frage-nr{position:absolute;left:1.2rem;top:1.15rem;width:2.4rem;height:2.4rem;border-radius:14px;background:var(--gelb);color:var(--blau);display:grid;place-items:center;font:800 1.2rem var(--titel)}
.frage-karte h3{font:800 clamp(1.15rem,1.6vw,1.4rem)/1.2 var(--titel);margin:0 0 .5rem}
.frage-karte p{margin:0;color:var(--grau);font-size:.98rem;line-height:1.5}
.frage-karte p b{display:block;font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gruen-tief);margin-bottom:.2rem}
.trau figure{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(18,51,94,.7)}
.trau figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;clip-path:inset(0 0 0 calc(100% - var(--r,0%)) round 24px);transition:clip-path 1.2s var(--weich)}
.trau.offen figure img{--r:100%}
.trau ol{list-style:none;padding:0;margin:1.8rem 0 0;counter-reset:t}
.trau li{counter-increment:t;position:relative;padding:1rem 0 1rem 3.2rem;border-top:2px solid #d5dbcb;font-size:1.15rem}
.trau li::before{content:counter(t);position:absolute;left:0;top:.7rem;font:800 1.8rem var(--titel);color:var(--gruen-tief)}

/* 5 Für Eltern */
.eltern{background:#fff;overflow-x:clip}
.eltern-innen{max-width:1320px;margin:0 auto;padding:clamp(4.5rem,9vw,7rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem clamp(2rem,4vw,3.5rem);align-items:start}
.eltern-kopf{grid-column:1 / -1}
.eltern .titel{font-size:clamp(2.4rem,5vw,4.6rem);max-width:16ch}
/* Eintrittskarte: dunkles Ticket mit Lochrand */
.ticket{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,.7fr);gap:0;background:radial-gradient(120% 140% at 0% 0%,#1f4f86 0%,var(--blau) 55%,var(--blau-tief) 100%);color:#fff;border-radius:26px;overflow:hidden;box-shadow:0 34px 70px -40px rgba(18,51,94,.8)}
.ticket>div{padding:1.6rem 1.8rem;display:flex;flex-direction:column;gap:.25rem;justify-content:center}
.ticket>div+div{border-left:2px dashed rgba(255,255,255,.22)}
.ticket::before,.ticket::after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#fff;top:50%;transform:translateY(-50%)}
.ticket::before{left:-15px}.ticket::after{right:-15px}
.ticket .ticket-datum b{font:800 clamp(3rem,6vw,5rem)/.9 var(--titel);letter-spacing:-.04em;color:var(--gelb)}
.ticket-datum span{font-weight:600;color:#dfe8c6}
.ticket-label{font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#c9dd8a}
.ticket b{font-size:1.25rem}
.ticket .leise{color:#c9d4e2;font-size:.92rem}
.ticket .ticket-eintritt b{font:800 2.2rem/1 var(--titel);color:var(--gelb)}
.rollen{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.ticket-route{margin-top:.6rem;align-self:flex-start;color:var(--blau);background:#fff;font-weight:700;text-decoration:none;border-radius:999px;padding:.5rem 1rem;min-height:44px;display:inline-flex;align-items:center}
.ticket-route:hover{background:var(--gelb)}
/* Rollen-Karten */
.rolle-karte{position:relative;background:var(--grund);border-radius:24px;padding:1.6rem 1.6rem 1.7rem;display:flex;flex-direction:column}
.rolle-ikon{width:3rem;height:3rem;border-radius:16px;background:var(--gruen);color:#fff;display:grid;place-items:center;margin-bottom:.9rem}
.rolle-karte:nth-child(2) .rolle-ikon{background:var(--a-studium)}
.rolle-ikon svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.rolle-karte h3{font:800 1.5rem var(--titel);margin:0 0 .6rem}
.rolle-karte ol{list-style:none;padding:0;margin:0 0 1rem;counter-reset:r}
.rolle-karte li{counter-increment:r;position:relative;padding:.55rem 0 .55rem 2.4rem;border-top:1px solid #d5dbcb;line-height:1.5}
.rolle-karte li::before{content:counter(r);position:absolute;left:0;top:.5rem;width:1.7rem;height:1.7rem;border-radius:50%;background:#fff;color:var(--blau);font:800 .95rem/1.7rem var(--titel);text-align:center}
.rolle-karte .knopf{margin-top:auto;align-self:flex-start}
.rolle-hinweis{font-size:.86rem;color:var(--grau);margin:.6rem 0 0}
@media (max-width:860px){.eltern-innen{grid-template-columns:1fr}.rollen{grid-template-columns:1fr}.ticket{grid-template-columns:1fr}.ticket>div+div{border-left:0;border-top:2px dashed rgba(255,255,255,.22)}.ticket::before,.ticket::after{display:none}}
.knopf-linie{background:none;border:2px solid var(--blau);box-shadow:none}
.knopf-linie:hover{box-shadow:none;background:var(--blau);color:#fff}

/* Für Jobsuchende */
.jobsuche{background:linear-gradient(120deg,var(--blau-tief),#1f4f86);color:#fff}
.jobsuche-innen{max-width:1320px;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem}
.jobsuche-innen>div{max-width:62ch}
.jobsuche-titel{font:800 clamp(2rem,4vw,3.4rem)/1.05 var(--titel);letter-spacing:-.03em;margin:0 0 .8rem}
.jobsuche p{margin:0;font-size:1.12rem;line-height:1.55;color:#dfe6ef}
.jobsuche p b{color:var(--gelb)}

/* 5b Häufige Fragen */
.faq{background:var(--grund)}
.faq-innen{max-width:1320px;margin:0 auto;padding:clamp(4.5rem,9vw,7rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem clamp(2rem,5vw,4.5rem);align-items:start}
.faq .titel{font-size:clamp(2.6rem,5.4vw,5rem)}
.faq-kopf{position:sticky;top:2rem}
.faq-liste details{background:#fff;border-radius:18px;margin:0 0 .6rem;box-shadow:0 0 0 1px #e3e7da;transition:box-shadow .3s}
.faq-liste details[open]{box-shadow:0 18px 40px -26px rgba(18,51,94,.45),0 0 0 1.5px var(--gruen)}
.faq-liste summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 1.2rem;font:700 1.08rem/1.35 var(--titel);color:var(--blau);min-height:44px}
.faq-liste summary::-webkit-details-marker{display:none}
.faq-liste summary::after{content:"";flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2312335e' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center/60% no-repeat;transition:transform .35s var(--weich),background-color .3s}
.faq-liste details[open] summary::after{transform:rotate(45deg);background-color:var(--gelb)}
.faq-liste details p{margin:0;padding:0 1.2rem 1.15rem;color:var(--grau);line-height:1.6}
@media (max-width:860px){.faq-innen{grid-template-columns:1fr}.faq-kopf{position:static}}

/* Formulare (Feedback ab 13.11., Betriebe 2027 im Fuß). Versand über senden.php nur im Upload-Paket; in der Vorschau wird nichts verschickt. */
.feedback{background:var(--grund)}
.feedback-innen{max-width:1320px;margin:0 auto;padding:clamp(4.5rem,9vw,7rem) clamp(1.2rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem clamp(2rem,5vw,4.5rem);align-items:start}
.feedback .titel{font-size:clamp(2.6rem,5.4vw,5rem)}
.formular{display:grid;gap:1rem;background:#fff;border-radius:24px;padding:1.5rem;box-shadow:0 0 0 1px #e3e7da}
.formular .feld{display:grid;gap:.4rem;border:0;padding:0;margin:0;min-width:0}
.formular .feld>span,.formular legend{font:700 .98rem var(--titel);color:var(--blau);padding:0}
.formular input:not([type=radio]):not([type=checkbox]),.formular select,.formular textarea{font:500 1rem var(--text);color:var(--blau);background:var(--panel);border:1.5px solid #cfd6c4;border-radius:12px;padding:.7rem .85rem;min-height:44px;width:100%}
.formular input:focus,.formular select:focus,.formular textarea:focus{outline:3px solid var(--gelb);outline-offset:1px;border-color:var(--blau)}
.formular small{color:var(--grau)}
.sterne,.wahlknoepfe{display:flex;flex-wrap:wrap;gap:.4rem}
.sterne label,.wahlknoepfe label{position:relative}
.sterne input,.wahlknoepfe input{position:absolute;opacity:0;width:1px;height:1px}
.sterne span,.wahlknoepfe span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .9rem;border-radius:999px;border:1.5px solid #cfd6c4;background:var(--panel);font:700 .95rem var(--text);color:var(--blau);cursor:pointer}
.sterne input:checked+span,.wahlknoepfe input:checked+span{background:var(--blau);border-color:var(--blau);color:#fff}
.sterne input:focus-visible+span,.wahlknoepfe input:focus-visible+span{outline:3px solid var(--gelb);outline-offset:2px}
.form-hinweis{font-size:.85rem;color:var(--grau);margin:0}
.form-status{margin:0;font-weight:600;min-height:1.2em}
.form-status.ok{color:var(--gruen-tief)}.form-status.fehler{color:#b3261e}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.einwilligung{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem}
.einwilligung input{width:1.3rem;height:1.3rem;margin-top:.15rem;flex:none}
.formular .knopf{justify-self:start}
.betriebe-form{max-width:1320px;margin:2.6rem auto 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem 3rem;align-items:start;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.12)}
.fuss .betriebe-titel{font:800 clamp(1.7rem,2.8vw,2.4rem)/1.1 var(--titel);color:#fff;margin:0 0 .8rem;padding:0;border:0;display:block}
.dunkel-form{background:rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.dunkel-form .feld>span,.dunkel-form legend{color:#fff}
.dunkel-form input:not([type=radio]):not([type=checkbox]){background:rgba(255,255,255,.95)}
.dunkel-form .wahlknoepfe span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
.dunkel-form .wahlknoepfe input:checked+span{background:var(--gelb);border-color:var(--gelb);color:var(--blau)}
.dunkel-form .einwilligung{color:#c9d4e2}
.dunkel-form .form-status.ok{color:#c9dd8a}
@media (max-width:860px){.feedback-innen,.betriebe-form{grid-template-columns:1fr}}

/* 6 Schluss */
.schluss{background:var(--blau);color:#fff;text-align:center;padding:clamp(5rem,10vw,8rem) 1.2rem}
.schluss .titel{margin:0 auto .8rem;max-width:18ch}
.merkzettel{max-width:640px;margin:0 auto;text-align:left;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:1.4rem 1.5rem}
.merkzettel-kopf{font:500 .76rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#c9dd8a;margin:0 0 .6rem}
.merkzettel-liste{list-style:none;padding:0;margin:0 0 1rem;counter-reset:m}
.merkzettel-liste li{counter-increment:m;display:flex;gap:.8rem;align-items:baseline;padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.merkzettel-liste li::before{content:counter(m);font:800 1.1rem var(--titel);color:var(--gelb);min-width:1.3rem}
.merkzettel-liste li b{margin-left:auto;font:500 .82rem var(--mono);color:#c9d4e2}
.merk-weg{flex:none;width:2.2rem;height:2.2rem;min-width:44px;min-height:44px;border-radius:50%;border:0;background:transparent;color:inherit;font:700 1.3rem/1 var(--text);cursor:pointer;opacity:.7}
.merk-weg:hover{opacity:1;background:rgba(255,255,255,.12)}
.info ol.rundgang .merk-weg:hover{background:rgba(255,255,255,.12)}
.info .zurueck+.zurueck{margin-left:.5rem}
.merkzettel-leer{color:#c9d4e2;margin:0 0 1rem}
.merkzettel-knoepfe{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.knopf-hell{background:rgba(255,255,255,.12);color:#fff;box-shadow:none;border:1.5px solid rgba(255,255,255,.4)}
.knopf-hell:hover{background:rgba(255,255,255,.22);box-shadow:none}
.schluss .schluss-daten{margin:0 auto 1.8rem;color:#c9d4e2}
.schluss .countdown{justify-content:center;margin:0 0 2rem}
.schluss .hinweis{margin:2.6rem auto 0;max-width:60ch;font-size:.88rem;color:#c9d4e2}
.schluss a.zur{color:#fff;font-weight:600}

/* Fuß: Veranstalter, Rechtliches, Eigenwerbung Regio (Jens 20.10.) */
.fuss{background:var(--blau-tief);color:#c9d4e2;padding:clamp(3rem,6vw,4.5rem) clamp(1.2rem,5vw,4rem) 2rem;font-size:.95rem}
.fuss-innen{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1.3fr;gap:2rem 3rem;align-items:start}
.fuss h3{font:800 clamp(1.25rem,1.8vw,1.55rem)/1.15 var(--titel);letter-spacing:-.01em;color:#fff;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:2px solid var(--gelb);display:inline-block}
.fuss p{margin:0 0 .5rem;line-height:1.5}
.fuss a{color:#fff}
.fuss .verein{display:flex;gap:1rem;align-items:flex-start}
.fuss .verein img{height:58px;width:auto;flex:none}
.fuss .verein b{color:#fff;font-weight:600}
.fuss .schirm{color:#c9dd8a;font-weight:600;font-size:.9rem}
.fuss ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.fuss ul a{display:flex;align-items:center;gap:.85rem;min-height:52px;padding:.45rem .9rem .45rem .45rem;border-radius:16px;text-decoration:none;font:600 1.05rem var(--text);color:#fff;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:background .3s,border-color .3s,transform .3s var(--weich)}
.fuss ul a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateX(4px)}
.fuss-ikon{flex:none;width:2.6rem;height:2.6rem;border-radius:12px;display:grid;place-items:center;background:var(--gelb);color:var(--blau)}
.fuss-ikon svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fuss ul li:nth-child(2) .fuss-ikon{background:var(--gruen);color:#fff}
.fuss ul li:nth-child(3) .fuss-ikon{background:var(--a-studium);color:#fff}
.fuss ul li:nth-child(4) .fuss-ikon{background:#fff;color:var(--blau)}
.fuss ul .pfeil{margin-left:auto;opacity:.55;transition:opacity .3s}
.fuss ul a:hover .pfeil{opacity:1}
.fuss .mitglied{display:block;margin-top:1.1rem;text-decoration:none;color:var(--blau);background:var(--gelb);border-radius:18px;padding:.85rem 1.1rem;transition:transform .3s var(--weich),box-shadow .3s}
.mitglied:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(250,192,10,.8)}
.fuss .mitglied b{display:block;font:800 1.1rem var(--titel);color:var(--blau)}
.fuss .mitglied span{font-size:.92rem;color:var(--blau)}
.regio-kachel{display:block;text-decoration:none;color:#fff;background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:1.1rem 1.2rem;transition:border-color .3s,transform .3s var(--weich)}
.regio-kachel:hover{border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.regio-kachel b{display:block;font:800 1.2rem var(--titel);margin-bottom:.25rem}
.regio-kachel span{color:#c9d4e2;font-size:.92rem}
.regio-kachel em{display:block;margin-top:.6rem;font-style:normal;font-weight:700;color:var(--gelb)}
.fuss-unten{max-width:1320px;margin:2.4rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;font-size:.85rem;color:#9fb0c5}
@media (max-width:860px){.fuss-innen{grid-template-columns:1fr}}

@media (max-width:860px){
  .eltern dl{grid-template-columns:1fr}.trau{grid-template-columns:1fr}
  .werkzeug .rechts{margin-left:0}
}
@media (max-width:760px){
  .flug{height:440vh}
  .tafel .gross{font-size:clamp(2.2rem,10vw,3.4rem)}
  .eckdaten{gap:.15rem .9rem}.eckdaten span+span::before{margin-right:.9rem}
  .wasser{top:3.5vh;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 80%,transparent 100%)}.wasser .breit{display:none}.wasser .schmal{display:block}
  .eckdaten{flex-direction:column;align-items:center;gap:.2rem}.eckdaten span+span::before{display:none}
  .held-knoepfe{flex-direction:column}
  /* Hallenplan am Handy: Liste zählt mehr als das Bild, Standinfo kommt von unten */
  .buehne-karte{height:auto;min-height:0;padding:0 .8rem 1.4rem}
  .werkzeug{border-radius:18px}
  .plan{flex:none;height:min(88svh,800px);margin:.4rem -.8rem 0;border-radius:0}
  .listen-panel{position:static;transform:none;width:auto;margin-top:1rem;max-height:none;box-shadow:none}
  #standliste{max-height:none}
  #liste-knopf{display:none}
  .schublade{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:46vh;border-radius:24px 24px 0 0;transform:translateY(105%);transition:transform .5s var(--weich)}
  .schublade.gross{max-height:88vh}
  .schublade.offen{transform:none}
  .schublade .griff{display:flex;justify-content:center;align-items:center;flex:none;height:30px;cursor:grab;touch-action:none}
  .schublade .griff span{width:44px;height:5px;border-radius:999px;background:rgba(255,255,255,.42)}
  .schublade .zu{top:.45rem;right:.6rem}
  .info{padding-top:.2rem}
  .si-logo.logo-feld{height:64px;margin-bottom:.8rem}
  .si-platte{height:3.8rem;min-width:3.7rem}.si-platte b{font-size:1.9rem}
  .info h3{font-size:1.3rem}
  body.schublade-auf .hinweis-toast{bottom:calc(46vh + 1rem)}
  .si-fuss .stelle-haupt{white-space:nowrap;font-size:.94rem;padding:.55rem .9rem}
  .info .merken-text{width:48px;padding:0}
  .info .merken-text span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* Karten am Handy: Rad bleibt, Kopf kompakter */
  .infokarten-kopf .unterzeile{display:none}
  .angebote li{font-size:.68rem;padding:.45rem .05rem .4rem}
  .filter-reiter button{min-height:44px}
  .werkzeug .rechts button,.zum-plan,.si-mehr-betrieb,.merken,.rund-knopf,.rad-steuer .ton-knopf,.schublade .zu,.info .zurueck,.info .merken-text{min-height:44px;min-width:44px}
  #standliste li{min-height:44px}
  .infokarte h3{font-size:1.12rem;margin-top:.55rem}.infokarte .ort{margin-bottom:.45rem}.berufe-liste li{font-size:.82rem}.angebote{margin-bottom:.5rem}
  .filter-stand{font-size:.86rem}
  .schluss .countdown{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flug{height:auto}.flug-buehne{position:relative;min-height:100vh;height:auto}.flug canvas{display:none}
  .flug-buehne::before{background-image:url("../medien/halle-voll.jpg");opacity:1!important}
  .tafel,.tafel.unten{position:relative;left:auto;top:auto;bottom:auto;opacity:1;transform:none;width:auto;padding:6rem 1.2rem 2rem}
  .tafel+.tafel{padding-top:0}.ausblende{display:none}.wasser{transform:none}
  .wahl{margin-top:0;background:var(--blau-tief)}.wahl-innen{padding-top:clamp(2.5rem,6vh,4.5rem)}.wahl::before{inset:-20% -10% auto}
  .infokarten{height:auto!important}.infokarten-buehne{position:relative;height:auto;padding:4rem 0}.rad{height:auto!important}.bahn,.rad-steuer{display:none}
  .spur{position:relative;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding:0 1.2rem}.infokarte{position:relative;left:auto;transform:none!important;visibility:visible!important}
  .karte-flip,.karte-zoom{transition:none}.seite{opacity:1}.schwebe{transition:none}
  .countdown b.tick{animation:none}.trau figure img{clip-path:none}
  .info.rein{animation:none}
  .schublade,.listen-panel{transition:none}.kenn,.kenn .ikon{transition:none;opacity:1;transform:none}.knopf,.infokarte,.merken{transition:none}
}
.druckblatt{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body[data-druck]{background:#fff}
  body[data-druck]>*:not(.druckblatt){display:none!important}
  body[data-druck] .druckblatt{display:block;color:var(--blau);font:400 11pt/1.45 var(--text);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .db-kopf{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--gelb);padding-bottom:5mm;margin-bottom:6mm}
  .db-kopf img{height:16mm;width:auto}
  .db-marke{font:800 11pt var(--titel);background:var(--gelb);color:var(--blau);border-radius:999px;padding:1.5mm 4mm}
  .db-titel{font:800 26pt/1.05 var(--titel);letter-spacing:-.02em;margin:0 0 2mm}
  .db-daten{display:flex;gap:6mm;flex-wrap:wrap;font-weight:600;margin:0 0 6mm}
  .db-daten b{color:var(--gruen-tief)}
  .db-liste{list-style:none;padding:0;margin:0 0 6mm;counter-reset:d}
  .db-liste li{counter-increment:d;display:grid;grid-template-columns:9mm 1fr auto;gap:3mm;align-items:baseline;padding:2.5mm 0;border-bottom:1px solid #d5dbcb;break-inside:avoid}
  .db-liste li::before{content:counter(d);font:800 14pt var(--titel);color:var(--blau)}
  .db-liste b{font:700 12pt var(--titel)}
  .db-liste small{display:block;color:var(--grau);font-size:9.5pt}
  .db-liste .db-stand{font:700 10pt var(--mono);background:var(--blau);color:#fff;border-radius:999px;padding:1mm 3mm;white-space:nowrap}
  .db-plan{border:1px solid #d5dbcb;border-radius:4mm;padding:3mm;margin:0 0 6mm;break-inside:avoid;background:#fff}
  .db-plan svg{display:block;width:100%;height:auto;max-height:110mm}
  .db-fragen{list-style:none;padding:0;margin:0;counter-reset:f}
  .db-fragen li{counter-increment:f;border:1.5px solid #d5dbcb;border-radius:4mm;padding:4mm 5mm 4mm 15mm;margin:0 0 4mm;position:relative;break-inside:avoid}
  .db-fragen li::before{content:counter(f);position:absolute;left:4mm;top:4mm;width:8mm;height:8mm;border-radius:2.5mm;background:var(--gelb);font:800 13pt/8mm var(--titel);text-align:center}
  .db-fragen h3{font:800 14pt/1.2 var(--titel);margin:0 0 1.5mm}
  .db-fragen p{margin:0;color:var(--grau)}
  .db-fuss{border-top:1px solid #d5dbcb;padding-top:3mm;font-size:9pt;color:var(--grau);display:flex;justify-content:space-between;gap:4mm}
}