/* Schlüssel & Mehr · Entwurf · statisch, ohne Fremdquellen */
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/bricolage-grotesque.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree.woff2") format("woff2");font-weight:300 900;font-display:swap}

:root{
  --papier:#f0f0ec;
  --flaeche:#fafaf7;
  --tinte:#2d2823;
  --taupe:#5d544b;
  --linie:#d6d3cb;
  --akzent:#b83c14;
  --akzent-hell:#ff8552;
  --buehne:#2d2823;
  --hell:#f3efe9;
  --mittel:#9a8e81;
  --radius:10px;
  --rand:clamp(1rem,4vw,3rem);
  --breit:1240px;
  --kopf:64px;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.55 "Figtree",system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3{font-family:"Bricolage Grotesque","Figtree",system-ui,sans-serif;font-weight:700;line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:4px}
.buehne :focus-visible,.buehne:focus-visible{outline-color:var(--akzent-hell)}
.sprung{position:absolute;left:1rem;top:-5rem;z-index:20;background:var(--tinte);color:var(--hell);padding:.75rem 1rem;border-radius:var(--radius)}
.sprung:focus{top:.5rem}
.innen{width:100%;max-width:var(--breit);margin-inline:auto;padding-inline:var(--rand)}

/* Kopfzeile */
.kopf{position:sticky;top:0;z-index:10;background:rgba(240,240,236,.94);border-bottom:1px solid var(--linie)}
.kopf .innen{height:var(--kopf);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:nowrap}
.marke{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.marke span{color:var(--akzent);padding-inline:.18em}
@media (max-width:400px){.marke{font-size:1.2rem}.kopf .innen{gap:.5rem}.knopf.klein{padding-inline:.8rem}}
.kopf nav{display:flex;align-items:center;gap:.25rem;flex-wrap:nowrap}
.kopf nav a.text{display:none;white-space:nowrap;text-decoration:none;font-weight:600;padding:.6rem .8rem;border-radius:var(--radius)}
.kopf nav a.text:hover{background:var(--linie)}
@media (min-width:760px){.kopf nav a.text{display:inline-flex;align-items:center;min-height:44px}}

.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.35rem;border-radius:var(--radius);background:var(--akzent);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap;transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s}
.knopf:hover{background:#9c310f}
.knopf:active{transform:scale(.97)}
.knopf.klein{min-height:44px;padding:.5rem 1rem}
.zweit{display:inline-flex;align-items:center;min-height:48px;padding:.7rem .4rem;font-weight:700;white-space:nowrap;text-underline-offset:.25em}
.zweit:hover{color:var(--akzent)}

/* Einstieg */
.einstieg{padding-block:clamp(1.5rem,5vw,4.5rem) clamp(3rem,7vw,6rem)}
.einstieg .innen{display:grid;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.einstieg h1{font-size:clamp(2.3rem,5.4vw,4.6rem)}
.einstieg .unter{margin-top:1rem;max-width:34ch;font-size:clamp(1.0625rem,1.5vw,1.3rem);color:var(--taupe)}
.aktion{margin-top:1.4rem;display:flex;align-items:center;gap:0 1rem;flex-wrap:wrap}
@media (min-width:980px){.einstieg .innen{grid-template-columns:5fr 6fr}}

/* Kernstück: Was haben Sie dabei? */
.dabei h2{font-size:clamp(1.35rem,2.2vw,1.9rem)}
.wahl{margin-top:.8rem;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(3px,.7vw,8px)}
.wahl button{appearance:none;border:1.5px solid var(--linie);background:var(--flaeche);color:var(--tinte);border-radius:var(--radius);min-height:52px;padding:.35rem .1rem;font:600 .8rem/1.1 "Figtree",sans-serif;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:transform .18s cubic-bezier(.16,1,.3,1),background-color .18s,border-color .18s,color .18s}
.wahl button svg{width:30px;height:30px}
.wahl button .name{display:none}
.wahl button:hover{border-color:var(--taupe);transform:translateY(-2px)}
.wahl button:active{transform:scale(.95)}
.wahl button[aria-selected="true"]{background:var(--buehne);border-color:var(--buehne);color:var(--hell)}
.wahl button[aria-selected="true"] svg{color:var(--akzent-hell)}
@media (min-width:560px){.wahl button{min-height:78px}.wahl button .name{display:block}.wahl button svg{width:34px;height:34px}}

.buehne{margin-top:.6rem;background:var(--buehne);color:var(--hell);border-radius:var(--radius);padding:clamp(1rem,2.4vw,1.75rem)}
.dinge{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.ding{display:grid;grid-template-columns:40px 1fr;column-gap:.9rem;align-items:start}
.ding .zeichen{width:36px;height:36px;color:var(--akzent-hell);grid-row:span 2}
.ding h3{font-size:1.2rem;letter-spacing:-.01em}
.ding p{color:#d8d1c7;margin-top:.2rem}
.ding .szene{display:none}
@media (min-width:700px){.dinge{grid-template-columns:1fr 1fr;column-gap:2rem}}

/* mit Skript: eine Bühne, ein Ding */
.js .dinge{display:block}
.js .ding{display:block}
.js .ding .zeichen{display:none}
.js .ding .szene{display:block;width:100%;height:auto;aspect-ratio:360/200}
.js .ding h3{font-size:clamp(1.35rem,2.2vw,1.75rem);margin-top:.5rem}
.js .ding p{font-size:1.0625rem;max-width:46ch;min-height:3.3em}

/* Zeichenstil der Szenen */
.szene{--h:var(--hell);--m:var(--mittel);--a:var(--akzent-hell);--d:var(--buehne)}
.szene .k{fill:#c9bcab} .szene .h{fill:var(--h)} .szene .m{fill:var(--m)} .szene .a{fill:var(--a)} .szene .d{fill:var(--d)}
.szene .lh{fill:none;stroke:var(--h);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.szene .lm{fill:none;stroke:var(--m);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.szene .la{fill:none;stroke:var(--a);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.szene .ld{fill:none;stroke:var(--d);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.szene .fein{stroke-width:3}
.szene text{font-family:"Bricolage Grotesque",sans-serif;font-weight:700}

/* Endzustand = Grundzustand; die Bewegung läuft nur darauf zu */
.k-rohling{transform-box:fill-box;transform-origin:right center;transform:scaleX(0)}
.k-rad{opacity:0}
.k-zahn{transform-origin:176px 150px}
.u-batterie{opacity:0}
.u-sekunde,.u-minute{transform-origin:180px 100px}
.s-decke{transform-box:fill-box;transform-origin:right center;transform:scaleX(0)}
.s-stichel{opacity:0}
.sch-sohle{transform-origin:70px 150px}
.p-etikett,.p-haken,.m-glanz,.k-glanz,.w-zettel{transform-box:fill-box;transform-origin:center}
.w-hemd{transform-origin:180px 30px}

@media (prefers-reduced-motion:no-preference){
  .js .ding:not([hidden]) .k-rohling{animation:k-fraesen 2.4s .35s linear both}
  .js .ding:not([hidden]) .k-rad{animation:k-fahren 2.75s .35s linear both}
  .js .ding:not([hidden]) .k-zahn{animation:drehen .5s linear 6}
  .js .ding:not([hidden]) .k-glanz{animation:auf .5s 2.9s cubic-bezier(.16,1,.3,1) both}

  .js .ding:not([hidden]) .u-batterie{animation:u-rein 1s .2s cubic-bezier(.5,0,.3,1) both}
  .js .ding:not([hidden]) .u-sekunde{animation:u-lauf 3.6s 1.2s linear both}
  .js .ding:not([hidden]) .u-minute{animation:u-minute 3.6s 1.2s linear both}

  .js .ding:not([hidden]) .m-messer{animation:m-ziehen .62s .2s ease-in-out 6 alternate both}
  .js .ding:not([hidden]) .m-glanz{animation:auf .5s 3.9s cubic-bezier(.16,1,.3,1) both}

  .js .ding:not([hidden]) .s-decke{animation:k-fraesen 1.9s .3s linear both}
  .js .ding:not([hidden]) .s-stichel{animation:s-fahren 2.1s .3s linear both}
  .js .ding:not([hidden]) .s-stempel{animation:s-druck 1s 2.4s cubic-bezier(.5,0,.3,1) both}
  .js .ding:not([hidden]) .s-abdruck{animation:ein .01s 2.85s both}

  .js .ding:not([hidden]) .sch-sohle{animation:sch-zu 1.1s .5s cubic-bezier(.5,0,.2,1) both}
  .js .ding:not([hidden]) .sch-naht{animation:ein .9s 1.7s both}
  .js .ding:not([hidden]) .sch-nadel{animation:sch-nadel 1.4s 1.5s ease-in-out both}

  .js .ding:not([hidden]) .p-paket{animation:p-fall .8s .2s cubic-bezier(.3,1.4,.5,1) both}
  .js .ding:not([hidden]) .p-etikett{animation:auf .45s 1s cubic-bezier(.16,1,.3,1) both}
  .js .ding:not([hidden]) .p-haken{animation:auf .5s 1.5s cubic-bezier(.3,1.6,.5,1) both}

  .js .ding:not([hidden]) .w-hemd{animation:w-schwung 1.9s .15s cubic-bezier(.3,.7,.3,1) both}
  .js .ding:not([hidden]) .w-zettel{animation:auf .45s 1.7s cubic-bezier(.3,1.6,.5,1) both}

  .js .ding:not([hidden]) h3,.js .ding:not([hidden]) p{animation:text-ein .5s cubic-bezier(.16,1,.3,1) both}
  .js .ding:not([hidden]) p{animation-delay:.08s}
}
@keyframes k-fraesen{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes k-fahren{0%{transform:translateX(0);opacity:1}87%{transform:translateX(104px);opacity:1}100%{transform:translateX(104px);opacity:0}}
@keyframes drehen{to{transform:rotate(360deg)}}
@keyframes auf{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ein{from{opacity:0}to{opacity:1}}
@keyframes u-rein{0%{transform:translateX(0);opacity:1}80%{opacity:1}100%{transform:translateX(-112px);opacity:0}}
@keyframes u-lauf{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes u-minute{from{transform:rotate(-30deg)}to{transform:rotate(0)}}
@keyframes m-ziehen{from{transform:translateX(-46px)}to{transform:translateX(34px)}}
@keyframes s-fahren{0%{transform:translateX(0);opacity:1}90%{transform:translateX(172px);opacity:1}100%{transform:translateX(172px);opacity:0}}
@keyframes s-druck{0%{transform:translateY(0)}45%{transform:translateY(34px)}60%{transform:translateY(34px)}100%{transform:translateY(0)}}
@keyframes sch-zu{from{transform:rotate(-8deg)}to{transform:rotate(0)}}
@keyframes sch-nadel{0%{transform:translate(-150px,-10px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes p-fall{from{transform:translateY(-150px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes w-schwung{0%{transform:translateX(-260px) rotate(-14deg)}55%{transform:translateX(0) rotate(9deg)}75%{transform:translateX(0) rotate(-5deg)}90%{transform:translateX(0) rotate(2deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes text-ein{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}

/* Abschnitte */
.abschnitt{padding-block:clamp(4rem,10vw,8.5rem)}
.abschnitt h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.abschnitt .einleitung{margin-top:1rem;max-width:44ch;color:var(--taupe);font-size:1.15rem}

/* Leistungen */
.leistungen{background:var(--flaeche);border-block:1px solid var(--linie)}
.leistungen .innen{display:grid;gap:clamp(2rem,5vw,5rem)}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.4rem,2.6vw,2.2rem) clamp(1.5rem,4vw,3.5rem)}
.liste li{display:grid;grid-template-columns:44px 1fr;column-gap:1rem;align-items:start}
.liste svg{width:40px;height:40px;color:var(--akzent)}
.liste h3{font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.015em;line-height:1.12;padding-top:.3rem}
.liste p{grid-column:2;color:var(--taupe);margin-top:.3rem}
@media (min-width:640px){.liste{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.leistungen .innen{grid-template-columns:4fr 7fr}.leistungen .kopfteil{position:sticky;top:calc(var(--kopf) + 2.5rem);align-self:start}}

/* Ablauf */
.ablauf ol{list-style:none;margin:clamp(2rem,4vw,3.5rem) 0 0;padding:0;display:grid;gap:clamp(1.8rem,4vw,3rem)}
.ablauf li h3{font-size:clamp(2.4rem,6.4vw,5.4rem);letter-spacing:-.035em}
.ablauf li:nth-child(3) h3{color:var(--akzent)}
.ablauf li p{margin-top:.8rem;max-width:30ch;color:var(--taupe);font-size:1.1rem}
@media (min-width:860px){.ablauf ol{grid-template-columns:1.25fr 1fr 1fr}}

/* Besuch */
.besuch{background:var(--buehne);color:var(--hell)}
.besuch .innen{display:grid;gap:clamp(2rem,5vw,5rem)}
.besuch .einleitung{color:#d8d1c7}
.besuch address{font-style:normal;margin-top:1.6rem;font-size:1.2rem;line-height:1.5}
.besuch .wege{margin-top:1.6rem;display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
.besuch .wege a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:1.15rem;text-underline-offset:.25em;overflow-wrap:anywhere}
.besuch .wege a:hover{color:var(--akzent-hell)}
.besuch .wege a.route{margin-bottom:.6rem;padding:.7rem 1.35rem;border-radius:var(--radius);background:var(--hell);color:var(--tinte);text-decoration:none;min-height:48px;transition:transform .18s cubic-bezier(.16,1,.3,1)}
.besuch .wege a.route:hover{background:#fff;color:var(--tinte)}
.besuch .wege a.route:active{transform:scale(.97)}
.zeiten{width:100%;border-collapse:collapse;font-size:1.15rem}
.zeiten caption{text-align:left;font:700 1.5rem/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.015em;padding-bottom:1rem}
.zeiten th,.zeiten td{padding:.7rem 0;text-align:left;font-weight:400;vertical-align:middle}
.zeiten th{width:8.2em;font-weight:600}
.zeiten td.zeit{white-space:nowrap;width:8.4em}
.zeiten td.balken{padding-left:1rem}
.zeiten td.balken i{display:block;height:10px;border-radius:5px;background:var(--mittel);transform-origin:left center}
.zeiten .halb i{width:44.4%}
.zeiten tr.heute th,.zeiten tr.heute td{color:var(--akzent-hell);font-weight:700}
.zeiten tr.heute td.balken i{background:var(--akzent-hell)}
@media (max-width:480px){.zeiten td.balken{display:none}.zeiten{font-size:1.0625rem}}
@media (min-width:900px){.besuch .innen{grid-template-columns:1fr 1fr;align-items:end}}

/* Schluss */
.schluss .innen{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center}
.schluss figure{margin:0}
.schluss img{width:100%;height:auto;border-radius:var(--radius)}
.schluss .gruss{margin-top:1.1rem;color:var(--taupe);font-size:1.15rem;max-width:38ch}
.schluss .gruss strong{color:var(--tinte)}
@media (min-width:980px){.schluss .innen{grid-template-columns:5fr 7fr}}

/* Fuß */
.fuss{border-top:1px solid var(--linie);padding-block:2.5rem;color:var(--taupe);font-size:1rem}
.fuss .innen{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;justify-content:space-between;align-items:baseline}
.fuss strong{color:var(--tinte);font-family:"Bricolage Grotesque",sans-serif}
.fuss nav{display:flex;gap:.4rem 1.4rem;flex-wrap:wrap}
.fuss a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.25em}
.fuss .vorschau{width:100%;font-size:.9rem}

/* Einblenden beim Scrollen: nur wo der Browser es ohne Skript kann */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .kommt{animation:kommt linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    .zeiten td.balken i{animation:wachsen linear both;animation-timeline:view();animation-range:entry 20% cover 35%}
  }
}
@keyframes kommt{from{opacity:.25;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes wachsen{from{transform:scaleX(.05)}to{transform:scaleX(1)}}

/* Rechtstexte */
.recht{padding-block:clamp(2rem,6vw,4.5rem) clamp(3rem,8vw,6rem)}
.recht .innen{max-width:780px}
.recht h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.recht h2{font-size:1.4rem;margin-top:2.2rem;letter-spacing:-.01em}
.recht p,.recht ul{margin-top:.8rem}
.recht ul{padding-left:1.2rem}
.recht a{text-underline-offset:.2em;overflow-wrap:anywhere}
.hinweis{background:var(--flaeche);border:1.5px solid var(--akzent);border-radius:var(--radius);padding:.8rem 1rem;margin-bottom:2rem;font-weight:600}
.offen{background:#ffe3d6;color:#7a2408;padding:.05em .4em;border-radius:4px;font-weight:600;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}