/* ============================================================================
   VARIANTE 02 · DAS ZÄHLWERK            hero-zaehlwerk.css
   Scroll-getriebene Messinstrument-Bühne für "Lead Generation".

   Sprache der Seite: Papier #eeede6 · Tinte #101218 · ein Akzent #244df7 ·
   Haarlinie #cdd0cb · Mono-Beschriftungen mit Sperrung.
   Technik: ausschliesslich transform/opacity · Geometrie gecacht ·
   kein Layout-Lesen pro Frame.
   ========================================================================== */

/* ---------- 1 · Tokens ---------------------------------------------------- */
#zaehlwerk{
  --zw-paper:#eeede6;
  --zw-plate-a:#f8f8f3;
  --zw-plate-b:#f2f2ea;
  --zw-ink:#101218;
  --zw-blue:#244df7;
  --zw-mute:#59636b;
  --zw-dim:#647078;
  --zw-hair:#cdd0cb;
  --zw-hair-2:#d3d6cf;
  --zw-rule:#e3e4dc;
  --zw-tick:#c3c7c0;
  --zw-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --zw-sans:Space,Arial,sans-serif;

  /* Kurven — nichts ist linear */
  --zw-mech:cubic-bezier(.22,1,.36,1);    /* weiches Auslaufen */
  --zw-snap:cubic-bezier(.34,1.30,.64,1); /* mechanischer Überschwinger */
  --zw-inout:cubic-bezier(.65,0,.35,1);   /* Anlauf und Auslauf der Walze */

  --zw-d:clamp(64px,min(13.2vw,21vh),192px);   /* Grad der Ziffernwalzen */
  --zw-zell:clamp(28px,min(3.2vw,5vh),46px); /* Mindesthöhe der Kalenderzeile */
  --zw-pad:clamp(16px,1.7vw,28px);        /* Innenmass der Messplatte */
  --zw-gap:clamp(16px,2.2vw,42px);        /* halbe Achsweite */
  --zw-rail:54px;
  --zw-kopf:76px;                         /* globale Kopfleiste */
  /* Freihaltezone für den fixen KI-Demo-Knopf der Seite (131×58 px,
     26 px Abstand zum Rand) — hier liegt keine Zeichnung und keine Zelle. */
  --zw-frei-h:90px;
  --zw-frei-b:170px;
  position:relative;
  font-family:var(--zw-sans);
  color:var(--zw-ink);
}

/* ---------- 2 · Bühne und Pinning ---------------------------------------- */
#zaehlwerk.zw-hero{height:260vh}
#zaehlwerk .zw-stage{
  position:sticky;top:0;
  display:flex;flex-direction:column;
  height:100vh;height:100svh;
  overflow:clip;
  background:var(--zw-paper);
  padding-top:var(--zw-kopf);
  isolation:isolate;
}

/* sehr dezentes Papier-Korn über der Fläche.
   Vorgerasterte 64×64-Kachel (3,0 KB) statt feTurbulence-SVG: ein
   SVG-Filter würde bei jedem Anstrich neu gerechnet, die Kachel nicht. */
#zaehlwerk .zw-korn{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background-image:url("hero-zaehlwerk-korn.png");
  background-size:64px 64px;
  background-repeat:repeat;
}

/* Passermarken an den Ecken der Satzfläche — die untere rechte liegt
   ausserhalb der Freihaltezone des KI-Knopfes. */
#zaehlwerk .zw-passer{
  position:absolute;width:13px;height:13px;z-index:8;pointer-events:none;
  left:calc(5.5vw - 7px);top:calc(var(--zw-kopf) + 14px);
  opacity:.85;
}
#zaehlwerk .zw-passer::before,
#zaehlwerk .zw-passer::after{content:"";position:absolute;background:var(--zw-hair)}
#zaehlwerk .zw-passer::before{left:0;right:0;top:6px;height:1px}
#zaehlwerk .zw-passer::after{top:0;bottom:0;left:6px;width:1px}
#zaehlwerk .zw-passer.p2{
  left:auto;right:calc(5.5vw - 20px);top:auto;
  bottom:calc(var(--zw-frei-h) + 8px);
}

/* ---------- 3 · Raster ---------------------------------------------------- */
/* eine Achse: Textspalte · 1px Trennlinie · Messplatte */
#zaehlwerk .zw-grid{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) 1px minmax(0,.98fr);
  column-gap:var(--zw-gap);
  align-items:stretch;
  padding-top:clamp(14px,2.4vh,34px);
  /* Die Platte endet immer oberhalb der Freihaltezone unten rechts. */
  padding-bottom:max(clamp(14px,2.4vh,34px),calc(var(--zw-frei-h) - var(--zw-rail) + 10px));
}
#zaehlwerk .zw-axis{
  height:100%;width:1px;background:var(--zw-hair);
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.05s var(--zw-mech) .16s;
}
#zaehlwerk.zw-a .zw-axis{transform:scaleY(1)}

/* ---------- 4 · Textspalte ------------------------------------------------ */
#zaehlwerk .zw-copy{min-width:0;align-self:center}
#zaehlwerk h1{
  margin:0 0 clamp(16px,2.2vh,26px);
  font-size:clamp(38px,4.55vw,74px);
  line-height:.95;                       /* enge Zeilenhöhe bei grossem Grad */
  letter-spacing:-.042em;
  font-weight:700;
  max-width:15ch;
}
#zaehlwerk h1 span{color:var(--zw-blue)}
#zaehlwerk .zw-sub{
  margin:0 0 clamp(22px,3vh,34px);
  font-size:clamp(13.5px,1.02vw,15px);
  line-height:1.72;
  color:var(--zw-mute);
  max-width:44ch;
}
#zaehlwerk .zw-ctas{margin-bottom:clamp(18px,2.6vh,30px)}
#zaehlwerk .zw-hint{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--zw-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--zw-dim);
  transition:opacity .5s linear,transform .7s var(--zw-mech);
}
#zaehlwerk .zw-hint i{display:block;width:34px;height:1px;background:var(--zw-hair);position:relative}
#zaehlwerk .zw-hint i::after{
  content:"";position:absolute;right:0;top:-2px;width:5px;height:5px;
  border-right:1px solid var(--zw-dim);border-bottom:1px solid var(--zw-dim);
  transform:rotate(-45deg);
}
#zaehlwerk.zw-s .zw-hint{opacity:0;transform:translateY(6px)}

/* Schlusszeile — erscheint erst im aufgeräumten Endzustand.
   Sie liegt in derselben Rasterzelle wie der Scroll-Hinweis und löst ihn ab. */
#zaehlwerk .zw-schluss{
  display:grid;
  margin-top:clamp(14px,2.2vh,24px);
}
#zaehlwerk .zw-schluss>*{grid-area:1/1;align-self:center}
#zaehlwerk .zw-ende{
  display:flex;align-items:center;gap:12px;
  font-family:var(--zw-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--zw-dim);
  opacity:0;transform:translateY(8px);
  transition:opacity .6s linear,transform .8s var(--zw-mech);
}
#zaehlwerk .zw-ende i{display:block;width:26px;height:1px;background:var(--zw-blue);flex:0 0 auto}
#zaehlwerk.zw-e .zw-ende{opacity:1;transform:translateY(0)}

/* ---------- 5 · Messplatte ------------------------------------------------ */
/* Die Platte füllt die Bühnenhöhe: Kopfzeile oben, Zählwerk darunter,
   Kalender bis zum Fuss. Die Kalenderzeilen nehmen den Rest auf — dadurch
   gibt es nie ein Loch in der Fläche, egal wie hoch das Fenster ist. */
#zaehlwerk .zw-platte{
  position:relative;min-width:0;
  display:flex;flex-direction:column;
  align-self:center;
  height:100%;max-height:720px;
  padding:var(--zw-pad) var(--zw-pad) calc(var(--zw-pad) * .72);
  background:linear-gradient(180deg,var(--zw-plate-a) 0%,var(--zw-plate-b) 100%);
  border:1px solid var(--zw-hair-2);
  border-radius:3px;
  box-shadow:inset 0 1px 0 #fff,0 30px 64px -50px rgba(16,18,24,.55);
}
/* Eckwinkel wie auf einem Entwurfsblatt */
#zaehlwerk .zw-winkel{position:absolute;width:9px;height:9px;pointer-events:none}
#zaehlwerk .zw-winkel::before,
#zaehlwerk .zw-winkel::after{content:"";position:absolute;background:var(--zw-hair)}
#zaehlwerk .zw-winkel::before{width:100%;height:1px}
#zaehlwerk .zw-winkel::after{width:1px;height:100%}
#zaehlwerk .zw-winkel.w1{left:6px;top:6px}
#zaehlwerk .zw-winkel.w2{right:6px;bottom:6px}
#zaehlwerk .zw-winkel.w2::before{right:0}
#zaehlwerk .zw-winkel.w2::after{right:0}

/* Mono-Kopfzeile der Platte */
#zaehlwerk .zw-mono{
  font-family:var(--zw-mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--zw-dim);
}
#zaehlwerk .zw-platte-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:10px;
}
#zaehlwerk .zw-led{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--zw-blue);margin-right:7px;vertical-align:middle;
}
#zaehlwerk .zw-status{display:inline-flex;align-items:center;white-space:nowrap}

/* Haarlinien, die sich beim Aufbau ziehen */
#zaehlwerk .zw-linie{
  display:block;height:1px;background:var(--zw-hair);
  transform:scaleX(0);transform-origin:left;
  transition:transform .95s var(--zw-mech);
}
#zaehlwerk.zw-a .zw-linie{transform:scaleX(1)}
#zaehlwerk.zw-a .zw-linie.l2{transition-delay:.1s}
#zaehlwerk.zw-a .zw-linie.l3{transition-delay:.18s}

/* ---------- 6 · Zählwerk: Walzen ----------------------------------------- */
#zaehlwerk .zw-zaehler{
  flex:0 0 auto;
  margin-top:clamp(18px,3.2vh,46px);
}
#zaehlwerk .zw-z-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
#zaehlwerk .zw-werk{
  display:flex;align-items:flex-start;gap:.03em;
  margin-top:.04em;
  font-size:var(--zw-d);
  line-height:1;
  font-weight:700;
  /* Bei einem Zählwerk entscheidend: die Breite darf beim Ticken nicht springen. */
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
#zaehlwerk .zw-stelle{
  position:relative;display:block;
  width:.68em;height:1em;
  overflow:hidden;
}
/* Walzenkrümmung: die Nachbarziffern verlöschen an den Kanten der Trommel.
   Die Ziffern der Schrift füllen 12,7 % … 86 % der 1em-Zelle (gemessen an
   den Fontmetriken) — die Verläufe liegen genau in den leeren Rändern,
   damit die stehende Ziffer unangetastet scharf bleibt.
   (Ein Farbverlauf statt einer Maske — das kostet keine eigene Ebene.) */
#zaehlwerk .zw-stelle::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    #f7f7f2 0,#f7f7f2 4%,rgba(247,247,242,.55) 8%,rgba(247,247,242,0) 13%,
    rgba(247,247,242,0) 87%,rgba(247,247,242,.55) 92%,#f7f7f2 96%,#f7f7f2 100%);
}
#zaehlwerk .zw-walze{display:block;will-change:transform;backface-visibility:hidden}
#zaehlwerk .zw-walze i{
  display:block;height:1em;line-height:1em;
  font-style:normal;text-align:center;
}
/* führende Null ist zurückgenommen — sie zählt nicht */
#zaehlwerk .zw-walze i.lead{color:#c9ccc5}
#zaehlwerk .zw-plus{
  font-size:.46em;line-height:1;margin-top:.16em;margin-left:.03em;
  color:var(--zw-blue);font-weight:700;
  transform-origin:left top;
}

/* ---------- 7 · Skala ----------------------------------------------------- */
#zaehlwerk .zw-skala{
  position:relative;height:38px;
  margin-top:clamp(8px,1.4vh,16px);
  padding-top:10px;
}
#zaehlwerk .zw-grad{
  position:absolute;left:0;right:0;bottom:15px;height:14px;
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.15s var(--zw-mech) .22s;
  /* 51 Skalenstriche: jeder 5. (ganze Zahl) ist länger und dunkler */
  background-image:
    repeating-linear-gradient(90deg,var(--zw-tick) 0 1px,transparent 1px 2%),
    repeating-linear-gradient(90deg,#a9aea6 0 1px,transparent 1px 20%);
  background-size:100% 6px,100% 14px;
  background-position:bottom left,bottom left;
  background-repeat:repeat-x,repeat-x;
}
#zaehlwerk.zw-a .zw-grad{transform:scaleX(1)}
#zaehlwerk .zw-grad-lbl{
  position:absolute;left:0;right:0;bottom:0;height:1em;
  opacity:0;transition:opacity .6s linear .85s;
}
#zaehlwerk.zw-a .zw-grad-lbl{opacity:1}
#zaehlwerk .zw-grad-lbl b{
  position:absolute;bottom:0;font-family:var(--zw-mono);font-size:9.5px;
  font-weight:400;letter-spacing:.08em;color:var(--zw-dim);
  font-variant-numeric:tabular-nums;
  transform:translateX(-50%);
}
#zaehlwerk .zw-grad-lbl b:first-child{transform:translateX(-1px)}
#zaehlwerk .zw-grad-lbl b:last-child{transform:translateX(-100%)}
/* Zeiger: blaue Indexlinie, die den Zählstand markiert */
#zaehlwerk .zw-zeiger{
  position:absolute;left:0;top:8px;bottom:15px;width:1px;
  background:var(--zw-blue);
  will-change:transform;
}
#zaehlwerk .zw-zeiger::before{
  content:"";position:absolute;top:-5px;left:-2px;width:5px;height:5px;
  background:var(--zw-blue);
}

/* ---------- 8 · Kalender -------------------------------------------------- */
#zaehlwerk .zw-kal{
  flex:1 1 auto;display:flex;flex-direction:column;
  margin-top:clamp(10px,1.8vh,20px);
}
#zaehlwerk .zw-kal-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:10px;
}
#zaehlwerk .zw-tage{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:22px repeat(7,1fr);
  grid-auto-rows:minmax(var(--zw-zell),1fr);
  margin-top:8px;
}
#zaehlwerk .zw-wt{
  display:grid;grid-template-columns:22px repeat(7,1fr);
  height:15px;align-items:end;
}
#zaehlwerk .zw-wt b{
  font-family:var(--zw-mono);font-size:8.5px;font-weight:400;
  letter-spacing:.12em;text-transform:uppercase;color:var(--zw-dim);
  text-align:center;padding-bottom:3px;
}
#zaehlwerk .zw-kw{
  grid-column:1;
  font-family:var(--zw-mono);font-size:8px;letter-spacing:.06em;
  color:#b3b8b0;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;padding-left:1px;
}
#zaehlwerk .zw-tag{
  position:relative;display:grid;place-items:center;
  border-right:1px solid var(--zw-rule);border-bottom:1px solid var(--zw-rule);
  font-family:var(--zw-mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--zw-dim);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .55s linear;
}
#zaehlwerk .zw-tag:nth-child(7n){border-right:0}
#zaehlwerk .zw-tag:nth-child(n+22){border-bottom:0}
#zaehlwerk.zw-a .zw-tag{opacity:1}
#zaehlwerk.zw-a .zw-tag:nth-child(n+8):nth-child(-n+14){transition-delay:.06s}
#zaehlwerk.zw-a .zw-tag:nth-child(n+15):nth-child(-n+21){transition-delay:.12s}
#zaehlwerk.zw-a .zw-tag:nth-child(n+22){transition-delay:.18s}
#zaehlwerk .zw-tag b{position:relative;z-index:1;font-weight:400;transition:color .22s linear}
#zaehlwerk .zw-fuell{
  position:absolute;inset:0;background:var(--zw-blue);
  transform:scale(.42);opacity:0;
  transition:transform .4s var(--zw-mech),opacity .22s linear;
}
#zaehlwerk .zw-tag.an .zw-fuell{transform:scale(1);opacity:1}
#zaehlwerk .zw-tag.an b{color:#fff}
#zaehlwerk .zw-legende{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--zw-hair);
}
#zaehlwerk .zw-legende span{display:inline-flex;align-items:center;gap:7px}
#zaehlwerk .zw-marke{
  display:inline-block;width:8px;height:8px;background:var(--zw-blue);flex:0 0 auto;
}
#zaehlwerk .zw-stand{color:var(--zw-ink)}

/* ---------- 9 · Fussleiste der Bühne ------------------------------------- */
#zaehlwerk .zw-rail{
  flex:0 0 var(--zw-rail);position:relative;
  display:flex;align-items:center;
}
#zaehlwerk .zw-rail-linie{
  position:absolute;left:0;right:0;top:0;height:1px;background:var(--zw-hair);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--zw-mech) .05s;
}
#zaehlwerk.zw-a .zw-rail-linie{transform:scaleX(1)}
#zaehlwerk .zw-rail-in{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;min-width:0;
  padding-right:max(5.5vw,var(--zw-frei-b));
}
#zaehlwerk .zw-rail-in>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#zaehlwerk .zw-rail a{
  color:var(--zw-dim);transition:color .22s ease;
}
#zaehlwerk .zw-rail a:hover{color:var(--zw-ink)}
#zaehlwerk .zw-zurueck{display:inline-flex;align-items:center;gap:8px}
#zaehlwerk .zw-zurueck i{
  display:block;width:16px;height:1px;background:currentColor;position:relative;
}
#zaehlwerk .zw-zurueck i::before{
  content:"";position:absolute;left:0;top:-2px;width:5px;height:5px;
  border-left:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}

/* Fortschritt: 1px blaue Linie über die ganze Breite */
#zaehlwerk .zw-fortschritt{
  position:absolute;left:0;right:0;top:0;height:1px;z-index:9;
  background:var(--zw-blue);
  transform:scaleX(0);transform-origin:left;
  will-change:transform;
}

/* ---------- 10 · Vor dem Aufbau (JS-Stand) -------------------------------- */
/* Ohne JS bleibt der Endzustand stehen: 10+, Kalender gefüllt, Skala gezogen. */
.zw-js #zaehlwerk [data-plus]{transform:translate3d(0,-.12em,0) scale(0)}
.zw-js #zaehlwerk .zw-fortschritt{transform:scaleX(0)}
/* Kein JS: die Walzen stehen auf dem Endstand (Einerwalze elf Ziffern). */
html:not(.zw-js) #zaehlwerk [data-w="z"]{transform:translate3d(0,-1em,0)}
html:not(.zw-js) #zaehlwerk [data-w="e"]{transform:translate3d(0,-10em,0)}
html:not(.zw-js) #zaehlwerk .zw-tag .zw-fuell{transform:scale(1);opacity:1}
/* Nur die belegten Tage tragen die Ziffer auf der blauen Fläche. */
html:not(.zw-js) #zaehlwerk .zw-tag[data-k] b{color:#fff}
html:not(.zw-js) #zaehlwerk .zw-grad{transform:scaleX(1)}
html:not(.zw-js) #zaehlwerk .zw-zeiger{left:auto;right:0}
html:not(.zw-js) #zaehlwerk .zw-fortschritt{transform:scaleX(1)}
/* Ohne JS steht der Endstand auch in der Textanzeige. */
#zaehlwerk .zw-nur-ohne-js{display:none}
html:not(.zw-js) #zaehlwerk .zw-nur-js{display:none}
html:not(.zw-js) #zaehlwerk .zw-nur-ohne-js{display:inline}
html:not(.zw-js) #zaehlwerk .zw-grad-lbl,
html:not(.zw-js) #zaehlwerk .zw-tag,
html:not(.zw-js) #zaehlwerk .zw-ende{opacity:1;transform:none}
html:not(.zw-js) #zaehlwerk .zw-linie,
html:not(.zw-js) #zaehlwerk .zw-axis,
html:not(.zw-js) #zaehlwerk .zw-rail-linie{transform:none}

/* ---------- 11 · Reduzierte Bewegung ------------------------------------- */
#zaehlwerk.zw-statisch{height:auto}
#zaehlwerk.zw-statisch .zw-stage{
  position:relative;height:auto;min-height:0;padding-bottom:0;
}
#zaehlwerk.zw-statisch .zw-grid{align-items:start;padding-top:34px;padding-bottom:42px}
#zaehlwerk.zw-statisch .zw-axis,
#zaehlwerk.zw-statisch .zw-grad,
#zaehlwerk.zw-statisch .zw-linie,
#zaehlwerk.zw-statisch .zw-rail-linie{transform:none;transition:none}
#zaehlwerk.zw-statisch .zw-grad-lbl,
#zaehlwerk.zw-statisch .zw-tag,
#zaehlwerk.zw-statisch .zw-ende{opacity:1;transform:none;transition:none}
#zaehlwerk.zw-statisch .zw-hint{display:none}
@media(prefers-reduced-motion:reduce){
  #zaehlwerk .zw-grad,#zaehlwerk .zw-linie,#zaehlwerk .zw-axis,
  #zaehlwerk .zw-rail-linie{transform:none!important}
  #zaehlwerk .zw-grad-lbl,#zaehlwerk .zw-tag{opacity:1!important}
}

/* ---------- 12 · Schmale und kurze Sichtflächen -------------------------- */
/* Flache Laptops: das Instrument wird kleiner, die Ordnung bleibt. */
@media(max-height:780px){
  #zaehlwerk{--zw-d:clamp(56px,7.4vw,112px);--zw-zell:clamp(26px,2.5vw,34px);--zw-rail:46px}
}
@media(max-width:1100px){
  #zaehlwerk{--zw-kopf:105px;--zw-rail:44px}
  #zaehlwerk.zw-hero{height:230vh}
}
@media(max-width:760px){
  #zaehlwerk{
    /* Am Handy hängen die Grade an der Höhe: das Instrument bleibt
       vollständig sichtbar, statt aus der Bühne zu laufen. */
    --zw-d:clamp(44px,min(16vw,7.2vh),80px);
    --zw-zell:clamp(22px,min(7vw,3.2vh),32px);
    --zw-pad:16px;
    --zw-rail:40px;
  }
  #zaehlwerk.zw-hero{height:200vh}
  /* Handy: gestapelt, dieselben Achsen — kein Schrumpfen, eine neue Ordnung.
     Knappes Mass heisst: die Aussage (H1), die Handlung (CTAs) und das
     Instrument bleiben; Abzeichen und Vertrauenszeile kommen erst, wenn
     die Höhe es hergibt. */
  #zaehlwerk .zw-grid{
    grid-template-columns:minmax(0,1fr);
    align-content:center;
    row-gap:clamp(8px,1.6vh,16px);
    padding-top:clamp(6px,1.4vh,16px);
    padding-bottom:max(clamp(6px,1.4vh,16px),calc(var(--zw-frei-h) - var(--zw-rail) + 12px));
  }
  #zaehlwerk .zw-axis{display:none}
  #zaehlwerk .zw-copy{align-self:auto}
  #zaehlwerk .hero-eyebrow{margin-bottom:12px}
  #zaehlwerk .hero-badge{display:none}
  #zaehlwerk .hero-trust{display:none}
  #zaehlwerk h1{font-size:clamp(23px,min(8.4vw,4.4vh),34px);margin-bottom:8px;max-width:20ch}
  #zaehlwerk .zw-sub{
    font-size:12.5px;line-height:1.55;margin-bottom:10px;max-width:56ch;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  #zaehlwerk .zw-ctas{margin-bottom:0;gap:8px;flex-wrap:nowrap}
  #zaehlwerk .zw-ctas .btn{flex:1 1 0;min-width:0;padding:13px 12px;font-size:13px;white-space:nowrap}
  #zaehlwerk .zw-hint{display:none}
  #zaehlwerk .zw-schluss{margin-top:8px}
  #zaehlwerk .zw-ende{margin-top:0;font-size:8.5px;letter-spacing:.16em}
  #zaehlwerk .zw-platte{padding:16px 16px 12px;max-height:none;height:auto}
  #zaehlwerk .zw-winkel{display:none}
  #zaehlwerk .zw-passer{display:none}
  #zaehlwerk .zw-zaehler{margin-top:clamp(5px,1.2vh,12px)}
  #zaehlwerk .zw-werk{margin-top:.02em}
  #zaehlwerk .zw-skala{height:26px;margin-top:6px;padding-top:6px}
  #zaehlwerk .zw-grad{bottom:13px;height:9px;background-size:100% 5px,100% 9px}
  #zaehlwerk .zw-zeiger{top:5px;bottom:13px}
  #zaehlwerk .zw-grad-lbl b{font-size:9.5px}
  #zaehlwerk .zw-tage,
  #zaehlwerk .zw-wt{grid-template-columns:repeat(7,1fr)}
  #zaehlwerk .zw-kw{display:none}
  /* ohne KW-Spalte muss auch der Abstandshalter der Wochentagszeile weichen */
  #zaehlwerk .zw-wt>span{display:none}
  #zaehlwerk .zw-wt b{font-size:10.5px}
  #zaehlwerk .zw-tag{font-size:11.5px}
  #zaehlwerk .zw-kal{margin-top:10px}
  #zaehlwerk .zw-kal-kopf{padding-top:6px}
  #zaehlwerk .zw-tage{margin-top:8px;gap:3px}
  #zaehlwerk .zw-legende{margin-top:6px;padding-top:5px}
  #zaehlwerk .zw-mono{font-size:10.5px;letter-spacing:.12em}
  #zaehlwerk .zw-rail-in{gap:12px;padding-right:max(5.5vw,var(--zw-frei-b))}
  #zaehlwerk .zw-rail-mass,
  #zaehlwerk .zw-rail-mess{display:none}
}
/* Genug Höhe: das Abzeichen und die Vertrauenszeile passen dazu. */
@media(max-width:760px) and (min-height:880px){
  #zaehlwerk .hero-badge{display:inline-flex;margin-bottom:10px;padding:8px 11px}
  #zaehlwerk .hero-trust{display:flex;gap:5px 18px;margin-top:12px}
  #zaehlwerk .hero-trust span{font-size:9px;letter-spacing:.09em;gap:7px}
  #zaehlwerk .hero-trust svg{width:13px;height:13px}
}
/* Sehr flach: der Fliesstext weicht, H1 und Instrument bleiben. */
@media(max-width:760px) and (max-height:700px){
  #zaehlwerk .zw-sub{display:none}
}
/* Knappe Höhe: engere Innenmasse, damit über der Bühne und über der
   Freihaltezone des KI-Knopfes Luft bleibt. */
@media(max-width:760px) and (max-height:800px){
  #zaehlwerk{--zw-d:clamp(34px,min(13.5vw,5.8vh),60px);--zw-zell:clamp(15px,min(5.6vw,2.4vh),21px)}
  #zaehlwerk .zw-sub{-webkit-line-clamp:2}
  #zaehlwerk .hero-eyebrow{margin-bottom:8px}
  #zaehlwerk h1{margin-bottom:5px}
  #zaehlwerk .zw-schluss{margin-top:6px}
  #zaehlwerk .zw-zaehler{margin-top:5px}
  #zaehlwerk .zw-skala{height:22px;margin-top:4px;padding-top:4px}
  #zaehlwerk .zw-grad{bottom:12px}
  #zaehlwerk .zw-zeiger{bottom:12px}
  #zaehlwerk .zw-kal{margin-top:5px}
  #zaehlwerk .zw-kal-kopf{padding-top:5px}
  #zaehlwerk .zw-tage{margin-top:5px}
  #zaehlwerk .zw-legende{margin-top:5px;padding-top:4px}
}