/* 14-LEHM — die Platte.

   Two operations exist on this page and only two:
     RITZEN   a groove pressed into the clay, oxide rubbed in.  Structure.
     ENGOBE   iron-oxide slip painted on, sitting proud.        Gesture.
   Light comes from the upper left and never from anywhere else, so a groove is
   dark on its upper-left wall and bright on its lower-right one, and anything
   proud is bright on top and drops a shadow to the lower right. Every shadow in
   this file obeys that. Nothing is styled because it looked nice.

   Two brand colours, and they are one substance: iron oxide fires red where it is
   laid thick and ochre where it is laid thin. See CONCEPT.md § 2. */

:root{
  /* Ton */
  --lehm:#DED4C6; --lehm-hell:#E7DFD3; --lehm-tief:#CEC2B1;
  --gebrannt:#2E1D16; --gebrannt-hoch:#3B2820;
  --tinte:#2A211C; --tinte-80:rgba(42,33,28,.82); --tinte-64:rgba(42,33,28,.66);
  --papier:#F2EBE0; --papier-dunkel:#E7DDCE; --papier-64:rgba(231,221,206,.7);
  /* Eisenoxid */
  --rot:#9B3E24; --rot-tief:#3A2018; --rot-hell:#C4623C;
  --ocker:#8A6A2F; --ocker-text:#6F5324; --ocker-hell:#B8913F;
  /* Licht */
  --schatten:rgba(70,45,31,.34); --licht:rgba(255,252,246,.78);
  --schatten-d:rgba(0,0,0,.55); --licht-d:rgba(233,214,192,.20);

  /* Maß */
  --rand:clamp(30px,7vw,118px);         /* die Ritzlinie */
  --gasse:clamp(22px,3.2vw,56px);       /* Satzspiegel dahinter */
  --aussen:clamp(20px,5vw,110px);
  --satz:calc(var(--rand) + var(--gasse));

  --e-aus:cubic-bezier(.16,1,.3,1);
  --e-satt:cubic-bezier(.22,.61,.24,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--lehm); color:var(--tinte);
  font:400 16px/1.72 'Archivo',system-ui,sans-serif;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:rgba(155,62,36,.22)}

/* ---------- der Grund: Ton ist nie gleichmäßig ---------- */
/* die Körnung: der feine Sand im Ton. Zwei Frequenzen, damit sie nicht kachelt. */
.korn{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.95;mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23m)' opacity='.16'/%3E%3C/svg%3E");
  background-size:220px 220px,420px 420px}
/* die Wolkung: eine gedrehte Platte ist nie gleichmäßig gefärbt */
.mottle{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 42% at 12% 6%, rgba(255,252,246,.62), transparent 66%),
    radial-gradient(34% 30% at 84% 22%, rgba(163,138,110,.30), transparent 70%),
    radial-gradient(46% 36% at 62% 78%, rgba(163,138,110,.26), transparent 72%),
    radial-gradient(30% 26% at 4% 62%, rgba(255,252,246,.40), transparent 68%),
    radial-gradient(24% 20% at 38% 44%, rgba(163,138,110,.16), transparent 74%)}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:'Vollkorn',Georgia,serif;font-weight:600;margin:0;
  letter-spacing:-.012em;color:var(--tinte)}
h1{font-size:clamp(2.05rem,6.4vw,5.4rem);line-height:.98}
h2{font-size:clamp(1.62rem,3.5vw,3.05rem);line-height:1.1}
h3{font-size:clamp(1.16rem,1.65vw,1.55rem);line-height:1.24}
p{margin:0}

.ausz{font:600 .6875rem/1.5 'Archivo',sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ocker-text)}
.lead{font-size:clamp(1.04rem,1.3vw,1.24rem);line-height:1.62;color:var(--tinte-80);max-width:47ch}
.fliess{font-size:.97rem;line-height:1.72;color:var(--tinte-80);max-width:60ch}
.fliess.gross{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.68;color:var(--tinte)}
.klein{font:400 .75rem/1.7 'Archivo',sans-serif;color:var(--tinte-64);max-width:64ch}

/* ---------- Ritz & Engobe: die zwei Techniken ---------- */
.geritzt-h{height:2px;border-top:1px solid var(--schatten);border-bottom:1px solid var(--licht)}
.geritzt-v{width:2px;border-left:1px solid var(--schatten);border-right:1px solid var(--licht)}

/* ---------- Kopfzeile ---------- */
#kopf{position:fixed;top:0;left:0;right:0;z-index:20;height:76px;
  display:flex;align-items:center;gap:clamp(14px,3vw,44px);
  padding:0 var(--aussen);
  background:linear-gradient(rgba(222,212,198,.92),rgba(222,212,198,.78));
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border-bottom:1px solid rgba(70,45,31,.14);
  transition:background .7s var(--e-satt),border-color .7s var(--e-satt),transform .5s var(--e-aus);
  opacity:0}
#kopf.da{opacity:1;transition:opacity .8s var(--e-satt),background .7s var(--e-satt),border-color .7s var(--e-satt)}
#kopf.dunkel{background:linear-gradient(rgba(46,29,22,.94),rgba(46,29,22,.86));border-bottom-color:rgba(233,214,192,.16)}
.marke{display:block;position:relative;flex:0 0 auto;line-height:0}
.marke img{height:34px;width:auto;transition:opacity .6s var(--e-satt)}
.marke-dunkel{position:absolute;inset:0;opacity:0}
#kopf.dunkel .marke-hell{opacity:0}
#kopf.dunkel .marke-dunkel{opacity:1}
.kopf-nav{margin-left:auto;display:flex;gap:clamp(16px,2vw,32px)}
.kopf-nav a{font:500 .8125rem/44px 'Archivo',sans-serif;letter-spacing:.03em;color:var(--tinte-80);
  text-decoration:none;position:relative;transition:color .4s var(--e-satt)}
.kopf-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:12px;height:2px;
  background:var(--rot);transition:right .5s var(--e-aus)}
.kopf-nav a:hover{color:var(--tinte)}
.kopf-nav a:hover::after{right:0}
#kopf.dunkel .kopf-nav a{color:var(--papier-64)}
#kopf.dunkel .kopf-nav a:hover{color:var(--papier)}
#kopf.dunkel .kopf-nav a::after{background:var(--rot-hell)}
.kopf-cta{font:600 .8125rem/1 'Archivo',sans-serif;letter-spacing:.04em;text-decoration:none;
  color:var(--rot);min-height:44px;display:inline-flex;align-items:center;padding:0 16px;
  border:1px solid rgba(155,62,36,.42);background:transparent;
  transition:background .5s var(--e-satt),border-color .5s var(--e-satt),color .5s var(--e-satt)}
.kopf-cta:hover{background:var(--rot);color:var(--papier);border-color:var(--rot)}
#kopf.dunkel .kopf-cta{color:var(--rot-hell);border-color:rgba(196,98,60,.55)}
#kopf.dunkel .kopf-cta:hover{background:var(--rot-hell);color:var(--gebrannt);border-color:var(--rot-hell)}

/* ---------- die Platte ---------- */
#platte{position:relative;z-index:1}
/* die Ritzlinie: der einzige gerade Strich der Seite */
#ritz{position:absolute;top:0;bottom:0;left:var(--rand);width:2px;z-index:0;
  border-left:1px solid var(--schatten);border-right:1px solid var(--licht)}
#linie{position:absolute;top:0;left:0;z-index:3;pointer-events:none;overflow:visible}
#linie-pfad{stroke:var(--rot);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(1.4px 1.9px 1.2px rgba(70,45,31,.34))}
/* der Saum: die Engobe zieht ein Stück in den Ton, wie Farbe in ungebranntes Material */
#linie-saum{stroke:rgba(155,62,36,.16);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.kasse-hell #linie-pfad{stroke:var(--rot-hell)}

main{position:relative;z-index:1}

/* ---------- Abschnitte + die Ritzmarke (das Signaturdetail) ---------- */
.abschnitt{position:relative;padding:clamp(76px,11vh,150px) var(--aussen) clamp(76px,11vh,150px) var(--satz)}
.abschnitt::before{content:attr(data-nr);position:absolute;left:calc(var(--rand) - 17px);
  top:clamp(58px,9vh,124px);width:36px;height:36px;z-index:2;
  display:grid;place-items:center;
  font:600 .6875rem/1 'Archivo',sans-serif;letter-spacing:.06em;color:var(--ocker-text);
  background:var(--lehm-tief);
  box-shadow:inset 1.5px 1.5px 2.5px var(--schatten),inset -1px -1px 1.5px var(--licht)}

.kopfsatz{max-width:24ch}
.kopfsatz h2{margin-top:14px}
.kopfsatz .fliess{margin-top:22px}
.kopfsatz{max-width:none}
.kopfsatz h2,.kopfsatz .fliess{max-width:22ch}
.kopfsatz .fliess{max-width:52ch}

/* ---------- 01 Ankunft ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(120px,18vh,190px);padding-bottom:clamp(48px,7vh,90px)}
.hero-satz{max-width:min(100%,1080px)}
.hero h1{margin:clamp(18px,2.4vh,30px) 0 0;display:flex;flex-direction:column}
.hero h1 i{font-style:italic;color:var(--ocker);font-weight:600}
/* der eine gewollte Regelbruch je Abschnitt: ein Element tritt über die Ritzlinie */
.hero h1 .z2{margin-left:calc(-1 * var(--gasse) - 2.6vw)}
.hero h1 .z3{margin-left:clamp(30px,7vw,132px)}
.hero .lead{margin-top:clamp(22px,3.2vh,38px)}
.tasten{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.6vh,42px)}
.naht{position:relative;height:2px;margin:clamp(34px,6vh,74px) calc(-1 * var(--aussen)) 0 calc(-1 * var(--gasse));
  border-top:1px solid var(--schatten);border-bottom:1px solid var(--licht);opacity:.9}
.meta{margin-top:18px;font:500 .75rem/1.7 'Archivo',sans-serif;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ocker-text)}

/* Tasten: Engobe, aufgetragen */
.taste{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;
  background:var(--rot);color:var(--papier);text-decoration:none;
  font:600 .875rem/1 'Archivo',sans-serif;letter-spacing:.035em;
  box-shadow:-1px -1px 0 rgba(255,246,236,.22),2px 3px 7px rgba(70,45,31,.3);
  transition:background .45s var(--e-satt),transform .45s var(--e-aus),box-shadow .45s var(--e-aus)}
.taste:hover{background:var(--rot-tief);transform:translate(-1px,-1px);
  box-shadow:-1px -1px 0 rgba(255,246,236,.24),4px 5px 11px rgba(70,45,31,.34)}
.taste:active{transform:translate(1px,1px);box-shadow:inset 1px 1px 3px rgba(0,0,0,.3)}
.taste-hell{background:var(--rot-hell);color:var(--gebrannt)}
.taste-hell:hover{background:var(--papier-dunkel);color:var(--gebrannt)}
.taste-still{display:inline-flex;align-items:center;min-height:52px;padding:0 2px;
  font:500 .875rem/1 'Archivo',sans-serif;letter-spacing:.02em;color:var(--tinte);
  text-decoration:none;align-self:flex-start;width:auto;
  background-image:linear-gradient(rgba(155,62,36,.45),rgba(155,62,36,.45));
  background-repeat:no-repeat;background-size:100% 2px;
  background-position:0 calc(50% + .78em);
  transition:background-image .45s var(--e-satt)}
.taste-still:hover{background-image:linear-gradient(var(--rot),var(--rot))}
.strichlink{display:inline-flex;align-items:center;min-height:44px;
  font:500 .8125rem/1 'Archivo',sans-serif;letter-spacing:.045em;text-transform:uppercase;
  color:var(--rot);text-decoration:none;position:relative;padding-right:26px}
.strichlink::after{content:"";position:absolute;right:0;top:50%;width:16px;height:1px;
  background:currentColor;transition:width .5s var(--e-aus),right .5s var(--e-aus)}
.strichlink:hover::after{width:22px;right:-6px}

.tat{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:clamp(38px,5vh,64px)}
.tat-satz{font:400 .8125rem/1.65 'Archivo',sans-serif;color:var(--tinte-64);max-width:38ch}
.tat-satz a{color:var(--rot);text-underline-offset:3px}

/* ---------- 02 Methode ---------- */
.methode{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,80px);align-items:center}
.methode .kopfsatz h2{max-width:15ch}
.methode-satz{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.methode-satz .fliess{max-width:54ch}

/* ---------- 03 Kurse: drei Schichten, keine drei Karten ---------- */
.schichten{margin-top:clamp(40px,6vh,76px);border-top:1px solid var(--schatten);
  box-shadow:0 1px 0 var(--licht)}
.schicht{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);
  gap:clamp(14px,2vw,34px);
  padding:clamp(30px,4.4vh,56px) 0;
  border-bottom:1px solid var(--schatten);box-shadow:0 1px 0 var(--licht)}
.schicht-satz{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.schicht-satz .fliess{max-width:56ch}
.schicht h3+.fliess{margin-top:-2px}
/* die Zählmarken: eingeritzt, so viele wie die Schicht zählt */
.zaehl{display:flex;flex-direction:column;gap:7px;padding-top:9px}
.zaehl i{display:block;width:30px;height:3px;background:rgba(112,74,50,.10);
  border-top:1px solid rgba(70,45,31,.5);border-bottom:1px solid var(--licht)}
/* die zweite Schicht liegt tiefer und rückt ein */
.s-b{background:linear-gradient(rgba(198,185,167,.72),rgba(198,185,167,.46));
  margin-left:calc(-1 * var(--satz));padding-left:var(--satz);
  margin-right:calc(-1 * var(--aussen));padding-right:var(--aussen);
  box-shadow:inset 0 3px 5px -1px rgba(70,45,31,.22),0 1px 0 var(--licht)}
.s-c{padding-left:clamp(18px,4vw,86px)}
.s-c .zaehl{margin-left:calc(-1 * clamp(18px,4vw,86px))}

/* ---------- 04 Krankenkasse: die eine gebrannte Fläche ---------- */
.kasse{background:var(--gebrannt);color:var(--papier-dunkel);overflow:hidden}
.kasse::after{content:"";position:absolute;top:0;bottom:0;left:var(--rand);width:2px;
  border-left:1px solid var(--schatten-d);border-right:1px solid var(--licht-d)}
.kasse::before{background:var(--gebrannt-hoch);color:var(--ocker-hell);
  box-shadow:inset 1.5px 1.5px 2.5px var(--schatten-d),inset -1px -1px 1.5px var(--licht-d)}
.kasse h2,.kasse h3{color:var(--papier)}
.kasse .ausz{color:var(--ocker-hell)}
.kasse .fliess{color:var(--papier-64)}
.kasse .fliess.gross{color:var(--papier-dunkel)}
.kasse .klein{color:rgba(231,221,206,.52);margin-top:clamp(38px,5vh,60px);
  border-top:1px solid rgba(233,214,192,.16);padding-top:20px}
.kasse .strichlink{color:var(--rot-hell)}

.schritte{list-style:none;margin:clamp(44px,6vh,80px) 0 0;padding:0;position:relative}
.schritt{display:grid;grid-template-columns:1fr 168px 1fr;align-items:center;
  min-height:clamp(178px,22vh,236px)}
.schritt-satz{max-width:40ch}
.schritt:nth-child(odd) .schritt-satz{grid-column:1;text-align:right;justify-self:end}
.schritt:nth-child(even) .schritt-satz{grid-column:3}
.schritt h3{margin-bottom:9px}
.scheibe{grid-column:2;grid-row:1;justify-self:center;position:relative;
  width:76px;height:76px;border-radius:50%;
  background:radial-gradient(circle at 33% 28%,#D8CCBB,#B9A992 62%,#9C8B75 100%);
  box-shadow:inset 2px 2px 5px rgba(0,0,0,.42),inset -2px -2px 4px rgba(255,246,236,.24),
             0 0 0 5px rgba(46,29,22,.85),0 0 0 6px rgba(0,0,0,.3),
             0 10px 20px -8px rgba(0,0,0,.6);
  display:grid;place-items:center;z-index:2}
.scheibe b{font:600 .875rem/1 'Archivo',sans-serif;letter-spacing:.02em;color:#3E2C1E;position:relative;z-index:2;
  text-shadow:0 1px 0 rgba(255,246,236,.4)}
/* die Ringe sind die Zahl: Schritt N trägt N Rillen */
.scheibe .rille{position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;
  border:1px solid rgba(52,34,20,.42);box-shadow:0 1px 0 rgba(255,246,236,.3)}

.tat-kasse{margin-top:clamp(38px,5vh,62px)}

/* ---------- 05 Lehrer ---------- */
.lehrer{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(30px,4vw,86px);align-items:center}
.lehrer-satz h2{margin-top:14px;max-width:16ch}
.lehrer-satz .fliess{margin-top:22px}
.belege{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:9px;max-width:52ch}
.belege li{position:relative;padding-left:26px;font:400 .8125rem/1.6 'Archivo',sans-serif;
  color:var(--tinte-64)}
.belege li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;
  border-top:1px solid var(--schatten);border-bottom:1px solid var(--licht)}
.enso-feld{position:relative;display:grid;place-items:center;min-height:min(62vh,520px);padding:40px 0}
#spruch{margin:0;width:min(300px,68%);text-align:center;position:relative;z-index:2}
#spruch p{font:600 clamp(1.1rem,1.55vw,1.42rem)/1.42 'Vollkorn',serif;color:var(--tinte);
  letter-spacing:-.008em}

/* ---------- 06 Abschluss ---------- */
.schluss{min-height:74vh;display:flex;flex-direction:column;justify-content:center}
.schluss-satz{max-width:46ch}
.schluss h2{max-width:19ch}
.schluss .fliess{margin-top:22px;max-width:46ch}
#siegel-platz{position:absolute;right:clamp(30px,11vw,230px);bottom:clamp(90px,16vh,190px);
  width:84px;height:84px;opacity:0;transform:scale(.86) rotate(-3deg);
  transition:opacity .9s var(--e-satt),transform 1.1s var(--e-aus)}
#siegel-platz.gestempelt{opacity:1;transform:none}
#siegel-platz::before{content:"";position:absolute;inset:0;background:var(--rot);
  box-shadow:-1px -1px 0 rgba(255,246,236,.2),3px 4px 10px rgba(70,45,31,.34)}
#siegel-platz::after{content:"";position:absolute;inset:15%;
  background:url(../marke-ring.svg) center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(58,32,24,.5))}

/* ---------- Fuß: ein Kolophon, kein Menü ---------- */
#fuss{padding:clamp(40px,6vh,72px) var(--aussen) clamp(34px,5vh,58px) var(--satz);
  border-top:1px solid var(--schatten);box-shadow:0 -1px 0 var(--licht) inset}
.fuss-reihe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.fuss-marke{height:30px;width:auto;opacity:.9}
.fuss-nav{display:flex;flex-wrap:wrap;gap:6px 24px}
.fuss-nav a{font:500 .8125rem/44px 'Archivo',sans-serif;color:var(--tinte-64);text-decoration:none;
  transition:color .4s var(--e-satt)}
.fuss-nav a:hover{color:var(--rot)}
.kolophon{margin-top:26px;font:400 .6875rem/1.85 'Archivo',sans-serif;letter-spacing:.05em;
  color:rgba(42,33,28,.5);max-width:76ch}

/* ---------- Daumenleiste (nur Mobil) ---------- */
#daumen{position:fixed;left:0;right:0;bottom:0;z-index:18;display:none;
  padding:10px max(12px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-bottom));
  background:linear-gradient(rgba(222,212,198,0),rgba(222,212,198,.94) 42%);
  transform:translateY(120%);transition:transform .6s var(--e-aus)}
#daumen.da{transform:none}
#daumen .taste{width:100%;min-height:52px}

/* ---------- das Intro ---------- */
#intro{position:fixed;inset:0;z-index:60;background:var(--lehm);
  display:grid;place-items:center;overflow:hidden}
#intro.weg{opacity:0;pointer-events:none;transition:opacity .34s var(--e-satt)}
#intro-buehne{position:relative;width:100%;height:100%;
  transform-origin:50% 50%;will-change:transform}
#intro-ring{position:absolute;inset:0;width:100%;height:100%}
#intro-wort{position:absolute;left:0;top:0;overflow:visible}
#intro-wort .schrift{fill:none;stroke:var(--rot);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round}
#intro-wort .druck{fill:var(--ocker);opacity:0}
#intro-skip{position:absolute;right:clamp(16px,4vw,40px);bottom:clamp(16px,4vh,40px);
  min-height:44px;padding:0 16px;background:none;border:1px solid rgba(70,45,31,.24);
  color:var(--ocker-text);font:600 .6875rem/1 'Archivo',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;opacity:0;
  transition:opacity .6s var(--e-satt),border-color .4s var(--e-satt),color .4s var(--e-satt)}
#intro-skip.da{opacity:1}
#intro-skip:hover{border-color:var(--rot);color:var(--rot)}

/* ---------- Auftauchen ---------- */
[data-auf]{opacity:0;transform:translateY(16px);
  transition:opacity 1.05s var(--e-satt) var(--v,0s),transform 1.15s var(--e-aus) var(--v,0s)}
[data-auf].auf{opacity:1;transform:none}

/* ---------- 1000 und darunter ---------- */
@media (max-width:1000px){
  .methode{grid-template-columns:1fr;gap:26px}
  .methode-satz{padding-top:0}
  .lehrer{grid-template-columns:1fr;gap:14px}
  .enso-feld{min-height:400px}
  #spruch{width:min(320px,80%)}
  .schritt{grid-template-columns:76px minmax(0,1fr);column-gap:clamp(18px,4vw,32px);
    min-height:150px;align-items:start}
  .schritt:nth-child(odd) .schritt-satz,.schritt:nth-child(even) .schritt-satz{
    grid-column:2;grid-row:1;text-align:left;justify-self:start;padding-top:6px}
  .scheibe{grid-column:1;justify-self:start}
  #siegel-platz{right:clamp(14px,3vw,40px);bottom:40px;width:72px;height:72px}
}

@media (max-width:720px){
  .kopf-nav{display:none}
  .kopf-cta{margin-left:auto}
  #kopf{height:64px}
  .marke img{height:30px}
  .hero{padding-top:104px}
  .hero h1 .z2{margin-left:calc(-1 * var(--gasse))}
  .hero h1 .z3{margin-left:22px}
  .naht{margin-right:calc(-1 * var(--aussen))}
  .schicht{grid-template-columns:1fr;gap:12px}
  .zaehl{flex-direction:row;padding-top:0}
  .s-c{padding-left:0}
  .s-c .zaehl{margin-left:0}
  .schluss{min-height:0;padding-bottom:224px}
  #daumen{display:block}
  .tasten .taste,.tat .taste{width:100%}
  .tasten,.tat{gap:12px}
}

/* ---------- reduzierte Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-auf]{opacity:1;transform:none}
  #intro.weg{opacity:0}
  #daumen{transform:none}
  #siegel-platz{opacity:1;transform:none}
}