/* ---------- Schriften, lokal ---------- */
@font-face{
  font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face{
  font-family:"Big Shoulders Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/big-shoulders-600.woff2") format("woff2");
}
@font-face{
  font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/big-shoulders-700.woff2") format("woff2");
}
@font-face{
  font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/big-shoulders-800.woff2") format("woff2");
}
@font-face{
  font-family:"Big Shoulders Display";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/big-shoulders-900.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/manrope-400.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/manrope-500.woff2") format("woff2");
}
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/manrope-600.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/space-grotesk-700.woff2") format("woff2");
}
/* =========================================================
   Boddenbiber, Marvin Wendlandt
   Stylesheet
   Farben: Weiss, Grau, Mint #2BFA86, Nacht #393F63
   ========================================================= */

:root{
  --weiss:#FFFFFF;
  --papier:#F3F4F7;
  --streifen:#E7E8EE;
  --kante:#CFD2DE;
  --grau:#6E7186;

  --nacht:#393F63;
  --mint:#2BFA86;

  --display:"Big Shoulders Display",system-ui,sans-serif;
  --marke:"Bebas Neue",system-ui,sans-serif;
  --text:"Manrope",system-ui,sans-serif;
  --technik:"Space Grotesk",ui-monospace,monospace;

  --rand:clamp(20px,5vw,72px);
  --scherung:-13deg;
  --gegen:13deg;
  --kippung:-3deg;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--weiss);color:var(--nacht);
  font-family:var(--text);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

img,picture,svg{max-width:100%}

/* Sprungmarke fuer Tastatur und Screenreader */
.sprung{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--nacht);color:var(--weiss);padding:12px 18px;
  font-family:var(--display);font-weight:800;text-transform:uppercase;
}
.sprung:focus{left:12px;top:12px}

/* ---------- Balken ---------- */
.balken{
  display:inline-block;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
  background:var(--nacht);color:var(--weiss);
  padding:.06em .3em .12em;
}
.balken--mint{background:var(--mint);color:var(--nacht)}
.balken--offen{background:var(--weiss);color:var(--nacht);box-shadow:inset 0 0 0 3px var(--nacht)}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.logo__rahmen{flex:0 0 auto;width:52px;border:0;background:none;line-height:0}
.logo__rahmen svg{display:block;width:100%;height:auto}
.logo__figur{fill:none;stroke:var(--nacht);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.logo__kappe{fill:var(--mint);stroke:var(--nacht);stroke-width:5;stroke-linejoin:round}
.logo__punkt{fill:var(--nacht)}
.logo__schrift{display:flex;flex-direction:column;line-height:1}
.logo__klein{
  font-family:var(--technik);font-weight:500;font-size:11px;
  letter-spacing:.12em;text-transform:none;color:var(--grau);margin-bottom:3px;
}
.logo__gross{
  font-family:var(--marke);font-weight:400;
  font-size:30px;letter-spacing:.03em;text-transform:uppercase;color:var(--nacht);
}

/* ---------- Kopfzeile ---------- */
.kopf{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:12px var(--rand);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
}
.menue{display:flex;gap:4px;list-style:none}
.menue a{
  font-family:var(--technik);font-weight:500;font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--nacht);text-decoration:none;
  display:inline-block;padding:8px 12px;transform:skewX(var(--scherung));
}
.menue a:hover,.menue a:focus-visible{background:var(--mint)}
@media(max-width:980px){.menue{display:none}}
.ruf{
  font-family:var(--display);font-weight:800;font-size:18px;
  text-transform:uppercase;letter-spacing:.03em;
  background:var(--mint);color:var(--nacht);text-decoration:none;
  padding:8px 18px;transform:skewX(var(--scherung));white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
}
.ruf:hover{background:var(--nacht);color:var(--weiss)}
.ruf svg{width:17px;height:17px;transform:skewX(var(--gegen))}

/* ---------- Buehne ---------- */
.buehne{position:relative;overflow:hidden;padding:clamp(40px,6vw,84px) var(--rand) clamp(52px,8vw,96px)}
.buehne__inhalt{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.buehne__satz{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,64px);align-items:center}
.buehne__text{flex:1 1 340px;min-width:0}

.augenbraue{
  font-family:var(--technik);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:8px;list-style:none;
}
.augenbraue .balken{padding:7px 12px}

.parole{font-family:var(--display);font-weight:900;font-size:clamp(34px,7vw,86px);line-height:.92;text-transform:uppercase}
.parole .zeile{display:block;margin-bottom:.07em}
.parole .balken + .balken{margin-left:.2em}

.nachsatz{margin-top:clamp(22px,3vw,32px);max-width:44ch;color:var(--grau);font-size:clamp(16px,1.35vw,18px)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.knopf{
  font-family:var(--display);font-weight:800;font-size:19px;
  text-transform:uppercase;letter-spacing:.03em;padding:11px 24px;
  text-decoration:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
}
.knopf svg{width:18px;height:18px;transform:skewX(var(--gegen))}
.knopf--voll{background:var(--nacht);color:var(--weiss)}
.knopf--voll:hover{background:var(--mint);color:var(--nacht)}
.knopf--leer{background:var(--weiss);color:var(--nacht);box-shadow:inset 0 0 0 3px var(--nacht)}
.knopf--leer:hover{background:var(--nacht);color:var(--weiss)}

/* ---------- Siegel ---------- */
.siegel{flex:0 0 auto;width:clamp(152px,17vw,212px);transform:rotate(6deg)}
.siegel svg{display:block;width:100%;height:auto}
.siegel__scheibe{fill:var(--mint)}
.siegel__ring{fill:none;stroke:var(--nacht);stroke-width:2.5}
.siegel__umlauf{
  font-family:var(--technik);font-size:12.6px;font-weight:700;
  letter-spacing:.235em;text-transform:uppercase;fill:var(--nacht);
  transform-origin:110px 110px;transform-box:view-box;
  animation:kreiseln 46s linear infinite;
}
@keyframes kreiseln{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.siegel__innen{fill:var(--nacht);stroke:var(--nacht);stroke-width:2.5}
.siegel__figur{fill:none;stroke:var(--nacht);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.siegel__kappe{fill:var(--mint);stroke:var(--nacht);stroke-width:4;stroke-linejoin:round}
.siegel__punkt{fill:var(--nacht)}
.siegel__fuss{
  font-family:var(--technik);font-size:9.4px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;fill:var(--nacht);text-anchor:middle;
}

/* ---------- Laufband ---------- */
.laufband{overflow:hidden;white-space:nowrap;background:var(--nacht);padding:10px 0}
.laufband__zug{display:inline-block;animation:ziehen 36s linear infinite}
.laufband__zug span{
  font-family:var(--display);font-weight:800;font-size:22px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--weiss);
  padding:0 16px;display:inline-block;transform:skewX(var(--scherung));
}
.laufband__zug .punkt{color:var(--mint)}
@keyframes ziehen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.feld{position:relative;overflow:hidden;padding:clamp(58px,8vw,108px) var(--rand)}
.feld--hell{background:var(--papier)}
.feld__inhalt{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.marke{
  font-family:var(--technik);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;
}
.marke .balken{padding:7px 12px}
.ueberschrift{
  font-family:var(--display);font-weight:900;font-size:clamp(34px,5.4vw,68px);
  line-height:.92;text-transform:uppercase;max-width:17ch;transform:skewX(var(--scherung));
}
.hinweis{margin-top:14px;font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.vorspann{margin-top:20px;max-width:52ch;color:var(--grau)}

/* ---------- Leistungen ---------- */
.paar{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5.5vw,76px);margin-top:clamp(32px,4.5vw,56px)}
@media(max-width:800px){.paar{grid-template-columns:1fr}}
.halbe{position:relative;z-index:1;background:transparent;border:0;padding:0;display:flex;flex-direction:column}
.kasten{
  position:relative;flex:1;margin-top:22px;border:3px solid var(--nacht);
  padding:clamp(20px,2.6vw,30px);padding-left:36%;
}
.halbe--mint .kasten{background:var(--nacht)}
.halbe--nacht .kasten{background:var(--mint)}
.halbe--mint .kasten .liste li{color:var(--weiss)}
.halbe--nacht .kasten .liste li{color:var(--nacht)}
.halbe:hover,.halbe:focus-within{z-index:40}
.halbe__biber{position:absolute;z-index:6;left:-19%;bottom:26px;width:46%;height:auto;display:block}
.halbe__box{min-width:0}
@media(max-width:640px){
  .kasten{padding-left:clamp(20px,2.6vw,30px)}
  .halbe__biber{position:static;width:62%;max-width:230px;margin:0 auto 14px}
}
.halbe h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,42px);text-transform:uppercase;line-height:1;margin-bottom:14px}
.halbe p{margin-top:16px;color:var(--grau);max-width:38ch}

.liste{list-style:none;margin-top:26px}
.liste li{
  position:relative;z-index:1;padding:0;margin-bottom:14px;
  display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.45;
}
.liste li:last-child{margin-bottom:0}
.liste li::before{
  content:"";flex:0 0 13px;width:13px;height:13px;margin-top:5px;
  background:var(--mint);border-radius:2px;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
}
.halbe--nacht .kasten .liste li::before{background:var(--nacht)}
.liste li{transition:color .2s ease}
.halbe--mint .kasten .liste li:hover,.halbe--mint .kasten .liste li:focus-within{color:var(--mint)}
.halbe--nacht .kasten .liste li:hover,.halbe--nacht .kasten .liste li:focus-within{color:var(--weiss)}
.liste li:hover,.liste li:focus-within{z-index:41}

/* Hovervorschau */
.vorschau{
  position:absolute;top:50%;z-index:30;width:min(272px,72%);aspect-ratio:4/3;
  border:7px solid var(--mint);border-radius:3px;background:var(--weiss);overflow:hidden;line-height:0;
  opacity:0;pointer-events:none;
  transform:translateY(-46%) skewX(-5deg) rotate(-1.5deg) scale(.94);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 14px 30px rgba(57,63,99,.24);
}
.vorschau img{display:block;width:100%;height:100%;object-fit:cover;transform:skewX(5deg) scale(1.1)}
.halbe--mint .vorschau{right:-8%}
.halbe--nacht .vorschau{left:auto;right:-6%}
.liste li:hover .vorschau,.liste li:focus-within .vorschau{
  opacity:1;transform:translateY(-50%) skewX(-5deg) rotate(-1.5deg) scale(1);
}
@media(max-width:800px){.vorschau{display:none}}

/* ---------- Ablauf ---------- */
.spur{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:clamp(32px,4.5vw,56px);list-style:none;counter-reset:schritt}
@media(max-width:800px){.spur{grid-template-columns:1fr}}
.schritt{background:var(--weiss);border:3px solid var(--nacht);padding:clamp(24px,3.2vw,38px);counter-increment:schritt}
.schritt::before{
  content:"0" counter(schritt);
  font-family:var(--display);font-weight:800;font-size:26px;
  display:inline-block;transform:skewX(var(--scherung)) rotate(var(--kippung));
  background:var(--mint);color:var(--nacht);padding:2px 12px;
}
.schritt h3{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;margin-top:16px;line-height:1}
.schritt p{margin-top:10px;color:var(--grau);font-size:16px}

/* ---------- Vorher / Nachher ---------- */
.wende{position:relative;margin-top:clamp(32px,4.5vw,56px);border:3px solid var(--nacht);overflow:hidden;line-height:0}
.wende__lage{position:relative;width:100%;aspect-ratio:8/5}
.wende__lage svg{position:absolute;inset:0;width:100%;height:100%}
.wende__nachher{clip-path:inset(0 0 0 var(--stand,50%))}
.wende__kante{position:absolute;top:0;bottom:0;left:var(--stand,50%);width:4px;background:var(--mint);box-shadow:0 0 0 2px var(--nacht);pointer-events:none}
.wende__griff{
  position:absolute;top:50%;left:var(--stand,50%);
  transform:translate(-50%,-50%) skewX(var(--scherung)) rotate(var(--kippung));
  background:var(--mint);color:var(--nacht);
  font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;
  padding:8px 16px;box-shadow:0 0 0 3px var(--nacht);pointer-events:none;white-space:nowrap;
}
.wende__regler{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.wende__schild{
  position:absolute;top:14px;font-family:var(--technik);font-weight:700;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;background:var(--nacht);color:var(--weiss);
  padding:6px 11px;transform:skewX(var(--scherung));pointer-events:none;
}
.wende__schild--links{left:16px}
.wende__schild--rechts{right:16px;background:var(--mint);color:var(--nacht)}

/* ---------- Marvin ---------- */
.zweispalt{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:860px){.zweispalt{grid-template-columns:1fr}}
.portraet{border:3px solid var(--nacht);line-height:0;background:var(--streifen)}
.portraet img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.portraet--leer{
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grau);
}
.zitat{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,52px);line-height:1.02;text-transform:uppercase}
.zweispalt p{margin-top:20px;color:var(--grau);max-width:48ch}
.zweispalt > div:first-child{position:relative}
.siegel--klein{position:absolute;top:-30px;right:-34px;z-index:3;width:clamp(112px,13vw,146px);margin:0;transform:rotate(-9deg)}

/* ---------- Einsatzgebiet ---------- */
.orte{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px;list-style:none}
.orte li{
  font-family:var(--display);font-weight:800;font-size:20px;text-transform:uppercase;
  background:var(--nacht);color:var(--weiss);padding:4px 14px;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
}

/* ---------- Kontakt ---------- */
.kontaktkarte{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,3vw,34px);
  border:3px solid var(--nacht);background:var(--weiss);
  padding:clamp(20px,3vw,32px);max-width:820px;margin-top:clamp(30px,4vw,44px);
}
.kontaktkarte__bild{flex:0 0 auto;width:clamp(150px,20vw,230px);line-height:0;background:none;border:0;margin:-16px 22px -22px 0}
.kontaktkarte__bild svg,.kontaktkarte__bild img{display:block;width:100%;height:auto}
.kontaktkarte__text{flex:1 1 320px;min-width:0}
.kontaktkarte__wer{display:block;font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--grau)}
.kontaktkarte__zeile{
  display:block;font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,40px);
  line-height:1;text-transform:uppercase;transform:skewX(var(--scherung));margin:8px 0 4px;
}
.kontaktkarte__nummer{display:block;font-family:var(--text);font-size:15px;color:var(--grau)}

.aktionen{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px;list-style:none}
.aktionen a{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--nacht);color:var(--weiss);padding:10px 17px;
  font-family:var(--display);font-weight:800;font-size:19px;
  text-transform:uppercase;letter-spacing:.03em;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
}
.aktionen a:hover{background:var(--mint);color:var(--nacht)}
.aktionen a.ist-mint{background:var(--mint);color:var(--nacht)}
.aktionen a.ist-mint:hover{background:var(--nacht);color:var(--weiss)}
.aktionen svg{width:21px;height:21px;flex:0 0 auto;transform:skewX(var(--gegen))}
.aktionen span{transform:skewX(var(--gegen))}

.social{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:26px;list-style:none}
.social__wort{font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--grau);margin-right:4px}
.social a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;background:var(--weiss);color:var(--nacht);
  box-shadow:inset 0 0 0 3px var(--nacht);transform:skewX(var(--scherung)) rotate(var(--kippung));
}
.social a:hover{background:var(--mint)}
.social svg{width:22px;height:22px;transform:skewX(var(--gegen))}

[data-tipp]{position:relative}
[data-tipp]::after{
  content:attr(data-tipp);position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) skewX(var(--gegen)) rotate(3deg);
  background:var(--nacht);color:var(--weiss);
  font-family:var(--technik);font-weight:500;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;padding:7px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
[data-tipp]:hover::after,[data-tipp]:focus-visible::after{opacity:1}
.fuss__social [data-tipp]::after{background:var(--weiss);color:var(--nacht)}

/* ---------- Fusszeile ---------- */
.fuss{padding:clamp(42px,5.5vw,70px) var(--rand);background:var(--nacht);color:var(--weiss)}
.fuss__inhalt{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:1000px){.fuss__inhalt{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.fuss__inhalt{grid-template-columns:1fr}}
.fuss h2{font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);margin-bottom:13px}
.fuss p,.fuss a{color:#DCDEE9;font-size:15px;text-decoration:none;display:block;margin-bottom:7px}
.fuss a:hover{color:var(--mint)}
.fuss ul{list-style:none}
.fuss__marke{
  font-family:var(--display);font-weight:800;font-size:clamp(34px,4.6vw,58px);
  text-transform:uppercase;line-height:1;color:var(--weiss);margin-bottom:14px;
  transform:skewX(var(--scherung));display:inline-block;
}
.fuss__social{display:flex;gap:9px;margin-top:16px;list-style:none}
.fuss__social a{
  display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--mint);color:var(--nacht);margin:0;
  transform:skewX(var(--scherung)) rotate(var(--kippung));
}
.fuss__social a{transition:background-color .18s ease,color .18s ease}
.fuss__social a:hover,.fuss__social a:focus-visible{background:var(--nacht);color:var(--mint);box-shadow:inset 0 0 0 3px var(--mint)}
.fuss__social svg{width:20px;height:20px;transform:skewX(var(--gegen))}

/* ---------- Zugaenglichkeit ---------- */
:focus-visible{outline:3px solid var(--nacht);outline-offset:2px}
.nur-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Bewegung ---------- */
.parole .balken{clip-path:inset(-14% 102% -14% 0);animation:wischen .62s cubic-bezier(.2,.75,.2,1) forwards}
.parole .zeile:nth-child(1) .balken{animation-delay:.15s}
.parole .zeile:nth-child(2) .balken{animation-delay:.32s}
.parole .zeile:nth-child(3) .balken{animation-delay:.49s}
.augenbraue li{opacity:0;animation:auftauchen .5s ease forwards}
.augenbraue li:nth-child(1){animation-delay:.05s}
.augenbraue li:nth-child(2){animation-delay:.12s}
.augenbraue li:nth-child(3){animation-delay:.19s}
.buehne .nachsatz{opacity:0;animation:auftauchen .6s ease .95s forwards}
.buehne .knopfreihe{opacity:0;animation:auftauchen .6s ease 1.08s forwards}
.siegel{animation:stempeln .5s cubic-bezier(.2,1.4,.4,1) 1.2s backwards}
@keyframes wischen{to{clip-path:inset(-14% -2% -14% 0)}}
@keyframes auftauchen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes stempeln{0%{opacity:0;transform:translateY(24px) scale(.94)}100%{opacity:1;transform:none}}

.auftritt .ueberschrift{clip-path:inset(-16% 102% -8% 0);transition:clip-path .7s cubic-bezier(.2,.75,.2,1) .1s}
.ist-da .ueberschrift{clip-path:inset(-16% -2% -8% 0)}
.auftritt{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.auftritt.ist-da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .auftritt{opacity:1;transform:none;transition:none}
  .parole .balken,.augenbraue li,.buehne .nachsatz,.buehne .knopfreihe,.siegel{animation:none;opacity:1;clip-path:none}
  .ueberschrift{clip-path:none;transition:none}
  .liste li,.liste li::before{transition:none}
  .laufband__zug,.siegel__umlauf{animation:none}
}

@media print{
  .kopf,.laufband,.wende,.vorschau,.siegel{display:none}
  body{font-size:12pt;color:#000}
}

/* ---------- Maskottchen in der Bühne ---------- */
.maskottchen{flex:0 0 auto;width:clamp(300px,42vw,560px)}
.maskottchen img{display:block;width:100%;height:auto}
.logo__rahmen{border:0;width:66px}
@media (prefers-reduced-motion:no-preference){
  .maskottchen{animation:stempeln .55s cubic-bezier(.2,1.3,.4,1) 1.15s backwards}
}

/* ---------- Zwinkern des Maskottchens in der Bühne ---------- */
@keyframes zwinkern{0%{transform:scaleY(1)}4%,8%{transform:scaleY(.08)}12%,100%{transform:scaleY(1)}}
@keyframes glanzweg{0%{opacity:1}4%,8%{opacity:0}12%,100%{opacity:1}}
@keyframes brauezucken{0%{transform:translateY(0) rotate(0)}4%,8%{transform:translateY(8px) rotate(-5deg)}12%,100%{transform:translateY(0) rotate(0)}}
@media (prefers-reduced-motion:reduce){
  .maskottchen .auge-r,.maskottchen .glanz-r,.maskottchen .braue-r{animation:none}
}
/* ---------- M hüpft auf die Mütze ---------- */
.maskottchen .kappen-m{
  transform-box:view-box;transform-origin:340px 96px;
  animation:m-huepft 1.25s cubic-bezier(.35,0,.6,1) 1.65s backwards;
}
@keyframes m-huepft{
  0%{opacity:0;transform:translate(284px,12px) rotate(28deg)}
  10%{opacity:1}
  26%{transform:translate(228px,-58px) rotate(20deg)}
  46%{transform:translate(150px,10px) rotate(9deg)}
  66%{transform:translate(78px,-54px) rotate(-7deg)}
  86%{transform:translate(14px,8px) rotate(4deg)}
  93%{transform:translate(2px,-12px) rotate(-2deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .maskottchen .kappen-m{animation:none}
}
/* ---------- Fusszeile unten ---------- */
.fuss__unten{
  max-width:1200px;margin:clamp(30px,4vw,44px) auto 0;padding-top:22px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;
}
.fuss__unten p{font-size:13px;color:#A9AEC4;margin:0}
.fuss__unten a{display:inline;color:#A9AEC4;font-size:13px;margin:0;text-decoration:underline;text-underline-offset:3px}
.fuss__unten a:hover{color:var(--mint)}
/* ---------- Rechtstexte ---------- */
.recht{max-width:760px}
.recht h1{margin-bottom:8px}
.recht h2{
  font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;
  margin-top:38px;margin-bottom:10px;transform:skewX(var(--scherung));
}
.recht p{font-size:16px;line-height:1.65;margin-bottom:12px;color:var(--grau)}
.recht a{color:var(--nacht);text-decoration:underline;text-underline-offset:3px}
.recht a:hover{color:var(--mint)}
.platzhalter{background:rgba(43,250,134,.3);padding:1px 4px;border-radius:2px}
.rechtsseite{display:none;padding-top:clamp(30px,4vw,54px)}
.rechtsseite .ueberschrift,.rechtsseite-einzeln .ueberschrift{clip-path:none}
.rechtsseite .ueberschrift{margin-bottom:8px}
.rechtsseite:target{display:block}
.zurueck{margin-top:34px}
.zurueck a{font-family:var(--technik);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--nacht)}
.mehr{margin-top:22px}
.mehr a{font-family:var(--technik);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mint);text-decoration:none;border-bottom:2px solid var(--mint);padding-bottom:3px}
.mehr a:hover{color:var(--weiss);border-color:var(--weiss)}
.orte a{color:inherit;text-decoration:none}
.orte li:hover{background:var(--nacht);color:var(--weiss)}
.rechtsseite-einzeln{padding-top:0}

/* ---------- Unterseiten ---------- */
.krume{font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);margin-bottom:16px}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--nacht)}

.zweispalt--seite{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,52px);align-items:start;margin-top:clamp(28px,4vw,44px)}
@media(max-width:760px){.zweispalt--seite{grid-template-columns:1fr}}
.zweispalt--seite picture img{display:block;width:100%;height:auto;border:3px solid var(--nacht)}

.unterpunkt{font-family:var(--display);font-weight:800;font-size:22px;text-transform:uppercase;margin-top:32px;margin-bottom:8px;transform:skewX(var(--scherung))}
.fliess{font-size:17px;line-height:1.65;color:var(--grau);max-width:66ch}
.fliess a{color:var(--nacht);text-decoration:underline;text-underline-offset:3px}

.fragen{margin-top:clamp(26px,3.5vw,40px);max-width:820px}
.frage{border-top:3px solid var(--nacht);padding:16px 0}
.frage:last-child{border-bottom:3px solid var(--nacht)}
.frage summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";color:var(--mint);font-size:26px;line-height:1}
.frage[open] summary::after{content:"–"}
.frage p{margin-top:12px;font-size:17px;line-height:1.65;color:var(--grau);max-width:64ch}

.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.6vw,30px);margin-top:clamp(26px,3.5vw,40px)}
.kachel{display:block;border:3px solid var(--nacht);background:var(--weiss);text-decoration:none;color:var(--nacht);transition:transform .2s ease}
.kachel:hover{transform:translateY(-4px)}
.kachel--still:hover{transform:none}
.kachel picture img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.kachel h3{font-family:var(--display);font-weight:900;font-size:26px;text-transform:uppercase;margin:16px 18px 6px;transform:skewX(var(--scherung))}
.kachel p{margin:0 18px 18px;font-size:15px;line-height:1.55;color:var(--grau)}

.ortskacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:clamp(26px,3.5vw,40px)}
.ortskachel{display:block;border:3px solid var(--nacht);padding:20px;text-decoration:none;color:var(--nacht);background:var(--weiss)}
.ortskachel:hover{background:var(--nacht);color:var(--weiss)}
.ortskachel h3{font-family:var(--display);font-weight:900;font-size:28px;text-transform:uppercase;transform:skewX(var(--scherung));margin-bottom:8px}
.ortskachel p{font-size:14px;line-height:1.5;color:inherit;opacity:.8}

.stimmen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,28px);margin-top:clamp(26px,3.5vw,40px)}
.stimme{border:3px solid var(--nacht);padding:24px;background:var(--weiss);margin:0}
.stimme p{font-size:17px;line-height:1.6}
.stimme footer{margin-top:14px;font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}

.orte a{color:inherit;text-decoration:none}

.bildblock{position:relative}
.bildblock__biber{position:absolute;left:-16%;bottom:-13%;width:52%;height:auto;z-index:3;pointer-events:none}
@media(max-width:760px){.bildblock__biber{left:-8%;bottom:-10%;width:44%}}

.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(16px,2.2vw,26px);margin-top:clamp(30px,4vw,46px)}
.galerie figure{margin:0}
.galerie img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--nacht)}
.galerie figcaption{margin-top:10px;font-family:var(--technik);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}