/* ==========================================================
   Ludico — Brand-Website Stylesheet v2 (Kür-Ausbau)
   Farben & Schriften: brand/ci.md · Canva Brand Kit kAHC6n20z8E
   Design-These: Die Website fühlt sich an wie ein Ludico-Material —
   Klassenzimmer, Bastelpapier, Stempel, Sammelkarten. Keine Tech-Site.
   ========================================================== */

@font-face{
  font-family:'Quicksand';
  src:url('fonts/quicksand-latin.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('fonts/nunito-latin.woff2') format('woff2');
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
}

:root{
  --teal:#1A9E8F;
  --teal-deep:#0F6B60;
  --teal-ink:#12463F;
  --honig:#EDAE4C;
  --honig-deep:#B87F24;
  --creme:#FDF8F0;
  --creme-2:#F6EEDF;
  --schiefer:#3A4A48;
  --ink-soft:#5E6E6B;
  --korall:#E07461;
  --korall-deep:#C4553F;
  --tint:#EAF3F1;
  --tint-warm:#FBEEDA;
  --tint-korall:#FBE7E1;
  --line:rgba(58,74,72,.14);
  --line-strong:rgba(58,74,72,.28);
  --display:'Quicksand','Trebuchet MS','Avenir Next',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --radius:20px;
  --maxw:1100px;
  --shadow-soft:0 2px 6px rgba(58,74,72,.06),0 10px 30px rgba(58,74,72,.07);
  --shadow-lift:0 6px 14px rgba(58,74,72,.10),0 18px 44px rgba(58,74,72,.12);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background-color:var(--creme);
  /* Punkteraster wie Rechenkaro — sehr dezent */
  background-image:radial-gradient(rgba(58,74,72,.055) 1px,transparent 1.6px);
  background-size:24px 24px;
  color:var(--schiefer);
  font-family:var(--body);
  font-size:1.05rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--teal-deep)}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--korall);outline-offset:3px;border-radius:6px}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;color:var(--schiefer)}
h1{font-size:clamp(2.4rem,6.5vw,4.2rem)}
h2{font-size:clamp(1.8rem,4.2vw,2.7rem)}
h3{font-size:1.22rem}
.lede{font-size:clamp(1.05rem,1.8vw,1.32rem);color:var(--ink-soft);max-width:62ch}
.eyebrow{
  font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.7rem;height:3px;border-radius:3px;background:var(--honig)}
strong{font-weight:800}

/* Textmarker-Highlight — wie mit dem Leuchtstift durchgezogen */
.hl{
  background-image:linear-gradient(100deg,
    rgba(237,174,76,0) 0.5%, rgba(237,174,76,.55) 3.5%,
    rgba(237,174,76,.42) 96%, rgba(237,174,76,0) 99%);
  border-radius:.25em .6em .35em .5em;
  padding:.05em .18em;margin:-.05em -.05em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.band-teal .hl{
  background-image:linear-gradient(100deg,
    rgba(237,174,76,0) 0.5%, rgba(237,174,76,.32) 3.5%,
    rgba(237,174,76,.24) 96%, rgba(237,174,76,0) 99%);
}

/* Gekritzelter Unterstrich (SVG inline im HTML, hier nur Layout) */
.squiggle{position:relative;display:inline-block}
.squiggle svg{
  position:absolute;left:0;right:0;bottom:-.22em;width:100%;height:.34em;
  overflow:visible;
}
.squiggle svg path{
  fill:none;stroke:var(--korall);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;
  animation:draw 1s .5s ease forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(253,248,240,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s;
}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 18px rgba(58,74,72,.07)}
.nav-wrap{
  max-width:var(--maxw);margin:0 auto;padding:.8rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1.5rem;
}
.brand{
  display:flex;align-items:center;gap:.55rem;text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--schiefer);
}
.brand .dot{
  width:.8em;height:.8em;border-radius:50%;background:var(--honig);
  box-shadow:0 0 0 .22em rgba(237,174,76,.3);transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand:hover .dot{transform:scale(1.25) translateY(-2px)}
.nav-toggle{display:none}
.nav-burger{display:none;margin-left:auto;cursor:pointer;padding:.4rem;border-radius:8px}
.nav-burger span{display:block;width:24px;height:3px;background:var(--schiefer);border-radius:3px;margin:5px 0;transition:transform .2s,opacity .2s}
nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;gap:.25rem;flex-wrap:wrap}
nav.main a{
  text-decoration:none;color:var(--schiefer);font-weight:700;font-size:.95rem;
  padding:.45rem .9rem;border-radius:999px;transition:background .15s,transform .15s;
  display:inline-block;
}
nav.main a:hover{background:var(--tint);transform:translateY(-1px)}
nav.main a[aria-current="page"]{background:var(--teal);color:#fff}
@media (max-width:860px){
  .nav-burger{display:block}
  nav.main{position:absolute;left:0;right:0;top:100%;background:var(--creme);
    border-bottom:1px solid var(--line);display:none;padding:.6rem 1rem 1.1rem;box-shadow:0 14px 30px rgba(58,74,72,.12)}
  nav.main ul{flex-direction:column;gap:.2rem}
  nav.main a{display:block;font-size:1.08rem}
  .nav-toggle:checked ~ nav.main{display:block}
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

/* ---------- Layout & Bänder ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(2.8rem,7vw,4.8rem) clamp(1rem,4vw,2rem)}
.section.tight{padding-top:clamp(1.5rem,4vw,2.5rem)}

.band{background:#fff;position:relative}
/* Bastelpapier-Wellenrand oben & unten (Pinnwand-Optik) */
.band::before,.band::after{
  content:"";position:absolute;left:0;right:0;height:14px;pointer-events:none;
  background-image:radial-gradient(circle at 14px 14px,#fff 14px,transparent 15px);
  background-size:28px 14px;background-repeat:repeat-x;
}
.band::before{top:-13px}
.band::after{
  bottom:-13px;
  background-image:radial-gradient(circle at 14px 0px,#fff 14px,transparent 15px);
}

.band-teal{
  background:linear-gradient(160deg,var(--teal) 0%,var(--teal-deep) 55%,var(--teal-ink) 100%);
  color:#FBF6EC;position:relative;overflow:hidden;
}
.band-teal h1,.band-teal h2,.band-teal h3{color:#fff}
.band-teal .lede{color:rgba(255,255,255,.88)}
.band-teal .eyebrow{color:var(--honig)}
/* Sternenstaub im Teal-Band */
.band-teal .stars{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.8px),
    radial-gradient(rgba(237,174,76,.8) 1.2px,transparent 2px);
  background-size:140px 140px,220px 220px;
  background-position:0 0,60px 80px;
}
.band-teal > .section{position:relative;z-index:1}

/* Abenteuer-Pfad: gestrichelte Route zwischen Sektionen */
.trail{max-width:var(--maxw);margin:-.5rem auto;padding:0 clamp(1rem,4vw,2rem);pointer-events:none}
.trail svg{display:block;width:min(340px,60%);height:70px;margin-left:clamp(.5rem,8vw,5rem);overflow:visible}
.trail path{fill:none;stroke:var(--line-strong);stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round}
.trail circle{fill:var(--honig)}
.trail.flip svg{margin-left:auto;margin-right:clamp(.5rem,8vw,5rem);transform:scaleX(-1)}

.grid{display:grid;gap:1.15rem;margin-top:1.9rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
@media (max-width:760px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- Karten ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.45rem 1.55rem;box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.34,1.3,.64,1),box-shadow .25s;
}
.card:hover{transform:translateY(-5px) rotate(-.3deg);box-shadow:var(--shadow-lift)}
.card.tint{background:var(--tint);border-color:transparent}
.card.warm{background:var(--tint-warm);border-color:transparent}
.card h3{margin-bottom:.5rem}
.card p{font-size:.97rem;color:var(--ink-soft)}

/* Washi-Tape-Streifen (Bastel-Detail für hervorgehobene Karten) */
.taped{position:relative}
.taped::before{
  content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(237,174,76,.55);border-radius:3px;
  box-shadow:0 1px 3px rgba(58,74,72,.12);
}

/* ---------- Buttons & Chips ---------- */
.btn{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:1.02rem;
  padding:.8rem 1.6rem;border-radius:999px;text-decoration:none;text-align:center;
  transition:transform .15s,box-shadow .15s;border:none;cursor:pointer;
}
.btn-primary{background:var(--korall);color:#fff;box-shadow:0 4px 0 var(--korall-deep)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--korall-deep)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--korall-deep)}
.btn-secondary{background:transparent;color:var(--teal-deep);border:2px solid var(--teal);box-shadow:0 3px 0 rgba(26,158,143,.35)}
.btn-secondary:hover{background:var(--tint);transform:translateY(-2px)}
.btn-secondary:active{transform:translateY(1px);box-shadow:none}
.band-teal .btn-secondary{color:#fff;border-color:rgba(255,255,255,.65);box-shadow:0 3px 0 rgba(255,255,255,.25)}
.band-teal .btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn[aria-disabled="true"],.btn:disabled{background:var(--creme-2);color:var(--ink-soft);box-shadow:none;cursor:not-allowed;transform:none}

.chip{
  display:inline-flex;align-items:center;gap:.4em;font-weight:800;font-size:.72rem;
  letter-spacing:.05em;text-transform:uppercase;padding:.32em .75em;border-radius:999px;
  background:var(--tint);color:var(--teal-ink);
}
.chip.honig{background:var(--tint-warm);color:var(--honig-deep)}
.chip.korall{background:var(--tint-korall);color:var(--korall-deep)}
.chip.solid{background:var(--teal);color:#fff}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(3rem,8vw,5.5rem);padding-bottom:clamp(3rem,8vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero .claim{
  font-family:var(--display);font-weight:600;color:var(--honig);
  font-size:clamp(1.2rem,2.6vw,1.7rem);margin:1.1rem 0 1.3rem;
}
.hero .cta-row{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.9rem}

/* Schwebende Maskottchen */
.float-zone{position:relative;height:0}
.floaty{
  position:absolute;font-size:clamp(1.6rem,3vw,2.4rem);
  filter:drop-shadow(0 4px 6px rgba(18,70,63,.35));
  animation:bob 5s ease-in-out infinite;
}
.floaty:nth-child(2){animation-delay:-1.2s;animation-duration:6s}
.floaty:nth-child(3){animation-delay:-2.5s;animation-duration:5.4s}
.floaty:nth-child(4){animation-delay:-3.4s;animation-duration:6.6s}
.floaty:nth-child(5){animation-delay:-4.1s;animation-duration:5.8s}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-14px) rotate(4deg)}
}

/* ---------- Mini-Rätsel (Signature-Moment) ---------- */
.minigame{
  background:#fff;border-radius:var(--radius);padding:1.6rem 1.7rem 1.4rem;
  box-shadow:var(--shadow-lift);transform:rotate(1.6deg);
  border:1px solid var(--line);position:relative;
}
.minigame:hover{transform:rotate(1.6deg)}
.minigame .mg-eyebrow{
  font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--korall-deep);margin-bottom:.6rem;
}
.minigame h3{font-size:1.35rem;color:var(--schiefer)}
.mg-chips{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem}
.mg-chips button{
  font-family:var(--display);font-weight:700;font-size:1.1rem;
  padding:.6rem 1.3rem;border-radius:14px;cursor:pointer;
  background:var(--creme);border:2.5px dashed var(--line-strong);color:var(--schiefer);
  transition:transform .15s,background .2s,border-color .2s,color .2s;
}
.mg-chips button:hover{transform:translateY(-2px);border-color:var(--teal)}
.mg-chips button.win{
  background:var(--teal);border:2.5px solid var(--teal-deep);color:#fff;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
.mg-chips button.nope{animation:shake .4s;border-color:var(--korall)}
.mg-chips button:disabled{cursor:default;opacity:.92}
@keyframes pop{0%{transform:scale(.85)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px) rotate(-1.5deg)}
  75%{transform:translateX(6px) rotate(1.5deg)}
}
.mg-msg{margin-top:1rem;font-size:.95rem;color:var(--ink-soft);min-height:3em;line-height:1.45}
.mg-msg.won{color:var(--teal-deep);font-weight:700}
.mg-star{
  position:absolute;top:-16px;right:-12px;font-size:2.4rem;opacity:0;transform:scale(.3) rotate(-30deg);
  transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 3px 5px rgba(58,74,72,.25));
}
.mg-star.on{opacity:1;transform:scale(1) rotate(12deg)}

/* Konfetti */
.confetti{position:absolute;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:5;
  animation:confetti-fall .9s ease-out forwards}
@keyframes confetti-fall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--cx,0),var(--cy,80px)) rotate(var(--cr,180deg))}
}

/* ---------- Material-Karten ---------- */
.mat{display:flex;flex-direction:column;gap:.6rem;position:relative;overflow:hidden}
.mat .em{font-size:2.1rem;line-height:1}
.mat .meta{display:flex;gap:.45rem;flex-wrap:wrap}
.mat .desc{font-size:.93rem;color:var(--ink-soft);flex-grow:1}
.ribbon{
  position:absolute;top:17px;right:-36px;transform:rotate(45deg);
  font-weight:800;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem 2.8rem;box-shadow:0 2px 5px rgba(58,74,72,.15);
}
.ribbon.gratis{background:var(--honig);color:var(--teal-ink)}
.ribbon.bald{background:var(--korall);color:#fff}

/* ---------- Maskottchen-Sammelkarten ---------- */
.mascot-card{
  text-align:center;display:flex;flex-direction:column;gap:.5rem;align-items:center;
  border:3px solid var(--creme-2);border-radius:22px;
  background:linear-gradient(180deg,#fff 62%,var(--tint) 62%);
  padding-top:1.8rem;
}
.grid .mascot-card:nth-child(odd){transform:rotate(-1.6deg)}
.grid .mascot-card:nth-child(even){transform:rotate(1.3deg)}
.grid .mascot-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--shadow-lift)}
.mascot-card .face{
  width:5rem;height:5rem;border-radius:50%;background:var(--tint);
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;
  border:3px solid #fff;box-shadow:0 3px 10px rgba(58,74,72,.12);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.mascot-card:hover .face{transform:scale(1.12) rotate(-6deg)}
.mascot-card.warmface .face{background:var(--tint-warm)}
.mascot-card.korallface .face{background:var(--tint-korall)}
.mascot-card.soon{opacity:.68;filter:saturate(.7)}
.mascot-card .fach{font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.mascot-card p{font-size:.88rem;color:var(--ink-soft);padding:0 .8rem .5rem}

/* ---------- Checkliste & Stempel ---------- */
ul.checks{list-style:none;margin-top:1.2rem;display:flex;flex-direction:column;gap:.7rem}
ul.checks li{position:relative;padding-left:2rem;max-width:62ch}
ul.checks li::before{
  content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;
  border-radius:6px;background:var(--tint);border:2px solid var(--teal);
}
ul.checks li::after{
  content:"";position:absolute;left:.34rem;top:.45em;width:.38rem;height:.65rem;
  border:solid var(--teal);border-width:0 3px 3px 0;transform:rotate(42deg);
}

/* GEPRÜFT-Stempel */
.stampcard{position:relative;overflow:visible}
.stamp{
  position:absolute;top:-14px;right:14px;
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.12em;
  color:var(--korall-deep);border:2.5px solid var(--korall-deep);border-radius:8px;
  padding:.25em .6em;transform:rotate(-8deg) scale(1);
  background:rgba(253,248,240,.85);text-transform:uppercase;
  opacity:.92;
}
.reveal .stamp{transform:rotate(-8deg) scale(1)}
.reveal:not(.in) .stamp{opacity:0;transform:rotate(-20deg) scale(1.8)}
.in .stamp{transition:transform .45s cubic-bezier(.34,1.4,.64,1) .25s,opacity .3s .25s}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:1.15rem;margin-top:1.9rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{
  counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem 1.45rem;box-shadow:var(--shadow-soft);
  transition:transform .25s cubic-bezier(.34,1.3,.64,1),box-shadow .25s;
}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.step::before{
  content:counter(s);display:flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:50%;background:var(--honig);color:var(--teal-ink);
  font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:.85rem;
  box-shadow:0 3px 0 var(--honig-deep);
}
.step h3{font-size:1.08rem;margin-bottom:.4rem}
.step p{font-size:.93rem;color:var(--ink-soft)}

/* ---------- Hinweis-Boxen ---------- */
.note{
  margin-top:1.6rem;padding:1rem 1.25rem;border-left:4px solid var(--teal);
  background:var(--tint);border-radius:0 14px 14px 0;max-width:70ch;
}
.note.warn{border-left-color:var(--korall);background:var(--tint-korall)}
.note p{font-size:.95rem}

/* ---------- Formular ---------- */
.form-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.form-row input[type="email"]{
  flex:1 1 260px;padding:.78rem 1.15rem;border-radius:999px;border:2px solid var(--line-strong);
  font-family:var(--body);font-size:1rem;background:#fff;color:var(--schiefer);
}
.form-row input[type="email"]:focus{border-color:var(--teal);outline:none}

/* ---------- Footer ---------- */
.site-footer{
  background:linear-gradient(180deg,var(--teal-deep),var(--teal-ink) 70%);
  color:rgba(255,255,255,.85);margin-top:3.5rem;position:relative;
}
.site-footer::before{
  content:"";position:absolute;top:-13px;left:0;right:0;height:14px;pointer-events:none;
  background-image:radial-gradient(circle at 14px 14px,var(--teal-deep) 14px,transparent 15px);
  background-size:28px 14px;background-repeat:repeat-x;
}
.site-footer .starfield{
  position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:
    radial-gradient(rgba(255,255,255,.9) 1px,transparent 1.8px),
    radial-gradient(rgba(237,174,76,.7) 1.2px,transparent 2px);
  background-size:150px 150px,230px 230px;background-position:0 0,70px 90px;
}
.site-footer .inner{
  position:relative;max-width:var(--maxw);margin:0 auto;padding:2.8rem clamp(1rem,4vw,2rem) 2.2rem;
  display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr;
}
@media (max-width:760px){.site-footer .inner{grid-template-columns:1fr}}
.site-footer .brand{color:#fff;margin-bottom:.6rem}
.site-footer p{font-size:.92rem;line-height:1.55}
.site-footer h4{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--honig);margin-bottom:.7rem}
.site-footer ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.site-footer a{color:rgba(255,255,255,.85);text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{
  position:relative;border-top:1px solid rgba(255,255,255,.15);text-align:center;
  padding:1rem;font-size:.82rem;color:rgba(255,255,255,.6);
}

/* ---------- Tabellen ---------- */
.tablewrap{margin-top:1.4rem;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:480px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-size:.95rem}
thead th{font-weight:800;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);background:var(--creme-2)}
tbody tr:last-child td{border-bottom:none}

/* ---------- Scroll-Reveals ----------
   Versteckt wird NUR wenn JS läuft (html.fx) — ohne JS ist alles sichtbar. */
html.fx .reveal{opacity:0;transform:translateY(26px)}
html.fx .reveal.in{opacity:1;transform:translateY(0);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.36,1)}
html.fx .reveal.in.now{transition:none}
.reveal.d1.in{transition-delay:.08s}
.reveal.d2.in{transition-delay:.16s}
.reveal.d3.in{transition-delay:.24s}

/* ---------- Reduced Motion: alles ruhigstellen ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .floaty{animation:none!important}
}