/* ============================================================
   Enoxo Sites — v7  ·  Startseite „Aufmass & Druck"
   Laedt NACH enoxo-sites-v6.css und baut darauf auf.
   Alle neuen Klassen tragen das Praefix v7-.

   Hausregeln (engineering-standards) sind eingehalten:
   nur lineare Verlaeufe (harte Kanten fuer Regler-Fuellung),
   keine 3D-Kartendreher, keine Weichzeichner, keine
   Leucht-Schatten (nur versetzte Flaechen), border-radius
   durchgehend hoechstens 3 px, keine Kreise.
   ============================================================ */

:root{
  --v7-tempo:steps(8);
}

/* overflow-x:hidden am body macht ihn zum Scroll-Container und
   legt die klebende Kopfzeile lahm. clip schneidet gleich ab,
   ohne Container zu sein. */
body{overflow-x:clip}

/* Kopfzeilen-Knopf: v6 faerbte ihn ueber .es-nav a dunkel ein,
   dunkle Schrift auf Kupfer ist zu schwach. */
.es-nav a.es-btn--kupfer,.es-nav a.es-btn--kupfer:hover{color:#fff;border-bottom-color:var(--kupfer-tief)}

/* ── Gemeinsame Bausteine ─────────────────────────────── */
.v7-sec{padding:112px 0;position:relative}
.v7-h2{
  font-size:clamp(32px,5.4vw,68px);line-height:1;letter-spacing:-.04em;
  margin-bottom:18px;max-width:18ch;
}
.v7-lede{font-size:clamp(17px,1.7vw,20px);color:var(--tinte-2);max-width:56ch}
.v7-sec .es-wrap>.v7-lede{margin-top:6px}
.es-zeile[hidden]{display:none}
.v7-mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

/* Knoepfe: etwas groesser, Druck-Versatz bleibt */
.v7-gross{font-size:16.5px;padding:16px 30px}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.v7-hero{padding:44px 0 72px;position:relative}
.v7-hero-in{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:56px;align-items:start;
}
.v7-kicker{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--tinte-3);
  margin-bottom:22px;padding-bottom:10px;border-bottom:1px solid var(--kante);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.v7-h1{
  font-size:clamp(42px,5.5vw,78px);line-height:.98;letter-spacing:-.045em;
  text-wrap:balance;
}
/* Der Druckversatz setzt sich einmal beim Laden — das ist die
   eine Bewegung der Kopfzeile. */
.v7-druck{position:relative;display:inline-block;color:var(--kupfer)}
.v7-druck::before{
  content:attr(data-text);position:absolute;left:-3px;top:3px;z-index:-1;
  color:var(--tinte);opacity:.16;pointer-events:none;
  animation:v7-setzen .9s steps(6) both;
}
@keyframes v7-setzen{
  from{left:-22px;top:12px;opacity:.5}
  to{left:-3px;top:3px;opacity:.16}
}
.v7-hero .es-lede{margin-top:26px;font-size:clamp(17px,1.7vw,20px)}

.v7-wahl-l{
  margin:34px 0 10px;font-weight:700;font-size:15px;color:var(--tinte-2);
}
.v7-wahl{display:flex;flex-wrap:wrap;gap:8px}
.v7-chip{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:14.5px;
  padding:10px 15px;min-height:44px;
  background:var(--blatt);color:var(--tinte);
  border:1.5px solid var(--kante);border-radius:var(--r);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.v7-chip:hover{border-color:var(--tinte);transform:translate(-1px,-1px);box-shadow:var(--druck-tief)}
.v7-chip[aria-pressed="true"]{
  background:var(--tinte);color:var(--blatt);border-color:var(--tinte);
  box-shadow:var(--druck);
}
.v7-chip:focus-visible{outline:2.5px solid var(--kupfer);outline-offset:3px}

.v7-hero .es-hero-akt{margin-top:32px}
.v7-hero .es-fakten{margin-top:44px}

/* ── Buehne: das Handy ─────────────────────────────────── */
.v7-buehne{position:relative;justify-self:center;width:min(100%,336px)}
/* Die zweite Farbplatte, leicht verrutscht wie beim Zweifarbdruck */
.v7-phone-wrap{position:relative}
.v7-phone-wrap::before{
  content:'';position:absolute;inset:16px -16px -16px 16px;
  background:var(--kupfer);opacity:.24;border-radius:var(--r);
  transform:rotate(2.4deg);
}
.v7-phone{
  position:relative;height:568px;
  background:var(--blatt);border:3px solid var(--tinte);border-radius:var(--r);
  box-shadow:8px 8px 0 var(--durchschlag);
  display:flex;flex-direction:column;overflow:hidden;
}
.v7-phone-notch{height:8px;background:var(--tinte);flex:0 0 8px}
.v7-scr{flex:1;display:flex;flex-direction:column;min-height:0}
.v7-scr.v7-druckt{animation:v7-druck-ein .5s var(--v7-tempo) both}
@keyframes v7-druck-ein{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
.v7-scr-bar{
  margin:12px;padding:9px 12px;background:var(--durchschlag);
  border:1px solid var(--kante);border-radius:var(--r);
  font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--tinte-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v7-scr-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}

/* Zustand "Heute": nackter Eintrag */
.v7-treffer{
  border:1px solid var(--kante);border-radius:var(--r);padding:12px;background:var(--blatt);
}
.v7-treffer--grau{opacity:.55}
.v7-strich{height:9px;background:var(--karo);border-radius:1px;margin-top:8px}
.v7-strich--kurz{width:62%}
.v7-strich--titel{height:13px;width:74%;margin-top:0;background:var(--kante)}
.v7-tag{
  display:inline-block;margin-top:9px;padding:2px 8px;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  border:1px solid var(--kante);color:var(--tinte-3);border-radius:1px;
}
.v7-treffer--du{border:2px solid var(--kupfer);background:var(--kupfer-blass)}
.v7-treffer-name{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:19px;line-height:1.1}
.v7-treffer-sub{font-size:13.5px;color:var(--tinte-2);margin-top:4px}
.v7-treffer-fehlt{
  margin-top:10px;font-size:13.5px;font-weight:700;color:var(--rot);
}
.v7-hinweis-unten{
  margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tinte-4);
}

/* Zustand "Mit Seite": die Seite selbst */
.v7-seite-hero{
  background:var(--kupfer);color:#fff;padding:20px 16px 22px;
  border-radius:var(--r);
}
.v7-seite-firma{font-family:'JetBrains Mono',monospace;font-size:12px;opacity:.92;margin-bottom:10px}
.v7-seite-claim{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:25px;line-height:1.02;letter-spacing:-.03em;
}
.v7-seite-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--kante)}
.v7-seite-liste li{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px dotted var(--kante);font-weight:600;font-size:15px;
}
.v7-haken{
  flex:0 0 15px;width:15px;height:15px;background:var(--kupfer);border-radius:1px;position:relative;
}
.v7-haken::after{
  content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.v7-seite-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.v7-seite-knopf{
  padding:12px 8px;text-align:center;font-weight:700;font-size:14px;
  border:1.5px solid var(--tinte);border-radius:var(--r);
}
.v7-seite-knopf--voll{background:var(--tinte);color:var(--blatt)}

.v7-schalter{
  display:grid;grid-template-columns:1fr 1fr;margin-top:30px;
  border:1.5px solid var(--tinte);border-radius:var(--r);overflow:hidden;background:var(--blatt);
  position:relative;z-index:1;
}
.v7-schalter button{
  font-family:'Exo 2',sans-serif;font-weight:700;font-size:14px;
  padding:12px 8px;min-height:46px;border:0;background:transparent;color:var(--tinte);cursor:pointer;
}
.v7-schalter button+button{border-left:1.5px solid var(--tinte)}
.v7-schalter button[aria-pressed="true"]{background:var(--tinte);color:var(--blatt)}
.v7-schalter button:focus-visible{outline:2.5px solid var(--kupfer);outline-offset:-4px}
.v7-unterschrift{
  position:relative;z-index:1;margin-top:12px;font-size:14px;color:var(--tinte-2);min-height:44px;
}

/* ══════════════════════════════════════════════════════
   BAND — Gewerke im Vorbeilauf
   ══════════════════════════════════════════════════════ */
.v7-band{
  background:var(--kupfer);border-block:2px solid var(--tinte);
  overflow:hidden;padding:18px 0;
}
.v7-band-spur{
  display:flex;width:max-content;
  animation:v7-lauf 46s steps(230) infinite;
}
.v7-band:hover .v7-band-spur{animation-play-state:paused}
.v7-band-spur span{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em;line-height:1;
  color:var(--papier);white-space:nowrap;
  display:inline-flex;align-items:center;
}
.v7-band-spur span::after{
  content:'';width:11px;height:11px;background:var(--tinte);
  margin:0 30px;transform:rotate(45deg);
}
@keyframes v7-lauf{to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════
   AUFMASS — der Regler
   ══════════════════════════════════════════════════════ */
.v7-aufmass{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:56px;margin-top:54px;align-items:start;
}
.v7-regler-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px;
}
.v7-regler-kopf label{font-weight:700;font-size:18px}
.v7-regler-wert{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(46px,6vw,72px);letter-spacing:-.04em;line-height:1;color:var(--kupfer);
}
.v7-regler-wert small{font-size:.32em;color:var(--tinte-2);letter-spacing:0;font-weight:700;margin-left:8px}

.v7-skalawrap{position:relative}
.v7-range{
  -webkit-appearance:none;appearance:none;display:block;
  width:calc(90% + 22px);margin:0 0 0 calc(5% - 11px);height:44px;
  background:transparent;cursor:pointer;
  --fuell:22%;
}
.v7-range::-webkit-slider-runnable-track{
  height:10px;border:1.5px solid var(--tinte);border-radius:1px;
  background:linear-gradient(90deg,var(--kupfer) var(--fuell),var(--durchschlag) var(--fuell));
}
.v7-range::-moz-range-track{
  height:7px;border:1.5px solid var(--tinte);border-radius:1px;
  background:linear-gradient(90deg,var(--kupfer) var(--fuell),var(--durchschlag) var(--fuell));
}
.v7-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:38px;margin-top:-16px;
  background:var(--tinte);border:0;border-radius:2px;box-shadow:3px 3px 0 var(--kupfer);
}
.v7-range::-moz-range-thumb{
  width:22px;height:38px;background:var(--tinte);border:0;border-radius:2px;box-shadow:3px 3px 0 var(--kupfer);
}
.v7-range:focus-visible{outline:2.5px solid var(--kupfer);outline-offset:4px}

.v7-skala{display:grid;grid-template-columns:repeat(10,1fr);margin-top:2px}
.v7-skala span{
  text-align:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--tinte-4);
  padding:6px 0;
}
.v7-skala span.v7-jetzt{color:var(--kupfer);font-weight:500}
.v7-klammern{display:grid;grid-template-columns:repeat(10,1fr);margin-top:4px;gap:0}
.v7-klammer{height:6px;border-top:3px solid var(--kante);margin-right:4px}
.v7-klammer--1{grid-column:1 / span 1}
.v7-klammer--2{grid-column:2 / span 4}
.v7-klammer--3{grid-column:6 / span 5;margin-right:0}
.v7-klammer.v7-jetzt{border-top-color:var(--kupfer)}

.v7-stufen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.v7-stufe{
  padding:11px 12px;border:1.5px solid var(--kante);border-radius:var(--r);
  font-size:13.5px;color:var(--tinte-3);line-height:1.3;background:var(--blatt);
}
.v7-stufe b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:16px;color:var(--tinte-2);letter-spacing:-.01em}
.v7-stufe.v7-jetzt{border-color:var(--kupfer);background:var(--kupfer-blass);color:var(--tinte);box-shadow:var(--druck)}
.v7-stufe.v7-jetzt b{color:var(--kupfer)}

.v7-pflege-l{font-weight:700;font-size:15px;margin:38px 0 10px}
.v7-seg{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1.5px solid var(--tinte);border-radius:var(--r);overflow:hidden;background:var(--blatt);
}
.v7-seg input{position:absolute;opacity:0;width:0;height:0}
.v7-seg label{
  display:block;padding:12px 10px;min-height:56px;cursor:pointer;text-align:center;
  font-weight:700;font-size:14px;line-height:1.25;
}
.v7-seg label small{display:block;font-weight:500;font-size:12.5px;color:var(--tinte-3);margin-top:2px;font-family:'JetBrains Mono',monospace}
.v7-seg label+input+label,.v7-seg input+label+input+label{border-left:1.5px solid var(--tinte)}
.v7-seg input:checked+label{background:var(--tinte);color:var(--blatt)}
.v7-seg input:checked+label small{color:var(--durchschlag)}
.v7-seg input:focus-visible+label{outline:2.5px solid var(--kupfer);outline-offset:-4px}
.v7-fuss-hinweis{margin-top:16px;font-size:14px;color:var(--tinte-3)}
.v7-fuss-hinweis a{font-weight:700}

/* Der Beleg */
.v7-beleg{position:sticky;top:92px}
.v7-beleg .es-vordruck-leib{padding:22px}
.v7-paketname{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;
}
.v7-preis{
  display:flex;align-items:baseline;gap:10px;margin:6px 0 4px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(64px,8vw,104px);letter-spacing:-.05em;line-height:.95;
  font-variant-numeric:tabular-nums;
}
.v7-preis small{font-size:.22em;font-weight:700;letter-spacing:0;color:var(--tinte-2);font-family:'Exo 2',sans-serif}
.v7-drin{list-style:none;margin:18px 0;padding:0}
.v7-drin li{
  display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:15px;
  border-bottom:1px dotted var(--kante);
}
.v7-drin li .v7-haken{margin-top:3px}
.v7-drin li.v7-extra{color:var(--tinte-3)}
.v7-drin li.v7-extra .v7-haken{background:var(--kante)}
.v7-beleg .es-btn{width:100%;margin-top:18px}

/* ══════════════════════════════════════════════════════
   ABLAUF — Blaupause
   ══════════════════════════════════════════════════════ */
.v7-blau{
  background:var(--blau);color:var(--papier);
  border-block:2px solid var(--tinte);
  background-image:
    linear-gradient(rgba(242,239,230,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(242,239,230,.09) 1px,transparent 1px);
  background-size:36px 36px;
}
.v7-blau .v7-h2{color:var(--papier)}
.v7-blau .v7-lede{color:rgba(242,239,230,.86)}
.v7-strecke{list-style:none;margin:60px 0 0;padding:0;position:relative}
.v7-strecke::before{
  content:'';position:absolute;z-index:0;left:23px;top:8px;bottom:36px;width:3px;
  background:rgba(242,239,230,.3);
}
.v7-strecke::after{
  content:'';position:absolute;z-index:0;left:23px;top:8px;width:3px;
  height:calc((100% - 44px) * var(--p,1));background:var(--papier);
}
.v7-etappe{
  position:relative;z-index:1;padding:0 0 56px 92px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:6px 48px;
}
.v7-etappe:last-child{padding-bottom:8px}
.v7-nr{
  position:absolute;left:0;top:0;z-index:1;width:49px;height:49px;
  display:grid;place-items:center;
  background:var(--blau);border:3px solid var(--papier);border-radius:var(--r);
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:23px;color:var(--papier);
}
.v7-etappe.v7-erreicht .v7-nr{background:var(--kupfer);border-color:var(--kupfer);color:#fff;box-shadow:3px 3px 0 var(--tinte)}
.v7-zeit{
  grid-column:1;font-family:'JetBrains Mono',monospace;font-size:13px;
  color:rgba(242,239,230,.75);margin-bottom:4px;
}
.v7-etappe h3{
  grid-column:1;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.035em;line-height:1;color:var(--papier);
}
.v7-etappe p{
  grid-column:2;grid-row:1 / span 2;align-self:center;
  font-size:clamp(16px,1.5vw,18px);color:rgba(242,239,230,.9);max-width:46ch;
}
.v7-js .v7-etappe{opacity:.42;transition:opacity .3s ease}
.v7-js .v7-etappe.v7-erreicht{opacity:1}

/* ══════════════════════════════════════════════════════
   SPENDE
   ══════════════════════════════════════════════════════ */
.v7-spende{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.v7-riesig{
  position:relative;display:inline-block;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(96px,13vw,190px);line-height:.85;letter-spacing:-.06em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2.5px var(--tinte);
  margin:0 0 26px;
}
.v7-riesig::before{
  content:attr(data-text);position:absolute;left:8px;top:8px;z-index:-1;
  color:var(--kupfer);-webkit-text-stroke:0;opacity:.85;
}
.v7-spende .v7-h2{max-width:14ch}
.v7-spende .es-hinweis{margin-top:22px}

.v7-rechner{background:var(--blatt);border:1.5px solid var(--tinte);border-radius:var(--r);box-shadow:var(--druck-tief);padding:24px}
.v7-rechner h3{font-size:22px;margin-bottom:6px}
.v7-rechner .es-klein{margin-bottom:6px}
.v7-rechner-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:18px}
.v7-rechner-kopf label{font-weight:700;font-size:15px}
.v7-rechner-wert{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:34px;letter-spacing:-.03em}
.v7-rechner .v7-range{width:100%;margin:6px 0 0}
.v7-zehntel{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:10px}
.v7-zehntel span{height:46px;border:1.5px solid var(--tinte);border-radius:1px;background:var(--papier)}
.v7-zehntel span:first-child{background:var(--kupfer);border-color:var(--kupfer);box-shadow:3px 3px 0 var(--tinte)}
.v7-zehntel-l{display:flex;justify-content:space-between;margin-top:9px;font-size:13px;color:var(--tinte-3)}
.v7-zehntel-l b{color:var(--kupfer)}
.v7-ergebnis{
  margin-top:20px;padding-top:18px;border-top:2px solid var(--tinte);
  font-size:17px;line-height:1.45;
}
.v7-ergebnis b{
  display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(38px,4.6vw,54px);letter-spacing:-.04em;line-height:1;color:var(--kupfer);margin-bottom:6px;
}
.v7-regeln{margin-top:22px}

/* ══════════════════════════════════════════════════════
   DEMO-BAND
   ══════════════════════════════════════════════════════ */
.v7-demo{
  background:var(--durchschlag);border-block:1px solid var(--kante);padding:96px 0;
}
.v7-demo-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.v7-demo .es-hero-akt{margin-top:30px}
.v7-schritte{list-style:none;margin:0;padding:0;border-top:2px solid var(--tinte)}
.v7-schritte li{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--kante);
}
.v7-schritte strong{font-family:'Bricolage Grotesque',sans-serif;font-size:22px;letter-spacing:-.02em}
.v7-schritte span{color:var(--tinte-2);font-size:15px;text-align:right}

/* ══════════════════════════════════════════════════════
   FRAGEN
   ══════════════════════════════════════════════════════ */
.v7-fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.v7-fragen-kopf{position:sticky;top:100px}
.v7-fragen-kopf .v7-h2{font-size:clamp(30px,4vw,52px)}
.v7-frage{border-top:2px solid var(--tinte)}
.v7-frage:last-child{border-bottom:2px solid var(--tinte)}
.v7-frage summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;min-height:64px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.025em;line-height:1.15;
}
.v7-frage summary::-webkit-details-marker{display:none}
.v7-frage summary::after{
  content:'+';flex:0 0 34px;height:34px;display:grid;place-items:center;
  border:1.5px solid var(--tinte);border-radius:var(--r);
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:22px;line-height:1;
  transition:transform .18s steps(3),background .12s ease;
}
.v7-frage summary:hover::after{background:var(--kupfer-blass)}
.v7-frage[open] summary::after{content:'×';background:var(--kupfer);border-color:var(--kupfer);color:#fff}
.v7-frage summary:focus-visible{outline:2.5px solid var(--kupfer);outline-offset:2px}
.v7-frage p{padding:0 54px 24px 0;color:var(--tinte-2);font-size:16.5px;max-width:58ch}

/* ══════════════════════════════════════════════════════
   KONTAKT
   ══════════════════════════════════════════════════════ */
.v7-tel{
  display:inline-block;margin-top:6px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(28px,4vw,46px);letter-spacing:-.035em;color:var(--tinte);
  text-decoration:none;border-bottom:3px solid var(--kupfer);
}
.v7-tel:hover{color:var(--kupfer)}

@media (min-width:1041px){
  #kontakt .es-hero-gitter>div:first-child{position:sticky;top:100px}
}

/* ── Klebe-Knopf am Handy ── */
.v7-sticky{
  position:fixed;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));
  z-index:90;display:none;
  transform:translateY(160%);transition:transform .22s steps(5);
}
.v7-sticky.v7-zeigen{transform:none}

/* ══════════════════════════════════════════════════════
   BEWEGUNG
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .v7-band-spur{animation:none;flex-wrap:wrap;width:auto}
  .v7-band-spur span[aria-hidden]{display:none}
  .v7-druck::before,.v7-scr.v7-druckt{animation:none}
  .v7-js .v7-etappe{opacity:1}
}

/* ══════════════════════════════════════════════════════
   BREITE / SCHMAL
   ══════════════════════════════════════════════════════ */
@media (max-width:1040px){
  .v7-hero-in{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .v7-hero-in>div:first-child{display:contents}
  .v7-kicker{order:1}
  .v7-h1{order:2}
  .v7-hero .es-lede{order:3;margin-top:4px}
  .v7-buehne{order:4;margin-top:14px}
  .v7-wahl-l{order:5;margin:18px 0 0}
  .v7-wahl{order:6}
  .v7-hero .es-hero-akt{order:7;margin-top:14px}
  .v7-hero .es-fakten{order:8;margin-top:22px}
}
@media (max-width:1040px){
  .v7-aufmass,.v7-spende,.v7-demo-in,.v7-fragen{grid-template-columns:minmax(0,1fr);gap:44px}
  .v7-beleg{position:static}
  .v7-fragen-kopf{position:static}
  .v7-buehne{justify-self:start}
}

@media (max-width:860px){
  .v7-sec{padding:68px 0}
  .v7-hero{padding:34px 0 56px}
  .v7-demo{padding:64px 0}
  .v7-h1{font-size:clamp(38px,11.4vw,58px)}
  .v7-h2{font-size:clamp(32px,9.4vw,46px)}
  .v7-druck::before{display:none}
  .v7-kicker{font-size:12px}
  .v7-buehne{justify-self:center;margin-top:8px}
  .v7-phone{height:480px}
  .v7-sticky{display:flex}
  body{padding-bottom:0}

  .v7-strecke::before,.v7-strecke::after{left:19px}
  .v7-etappe{padding:0 0 44px 68px;grid-template-columns:minmax(0,1fr)}
  .v7-nr{width:41px;height:41px;font-size:19px}
  .v7-etappe p{grid-column:1;grid-row:auto;margin-top:10px}
  .v7-etappe h3{font-size:clamp(26px,7.4vw,34px)}

  .v7-frage p{padding-right:0}
  .v7-schritte span{font-size:14px}
  .v7-aufmass{margin-top:36px}
  .v7-seg label{padding:10px 6px;font-size:13.5px}
  .v7-stufe{padding:9px 8px;font-size:12px}
  .v7-stufe b{font-size:14px}
}

@media (max-width:420px){
  .v7-stufe b{font-size:13px}
  .v7-seg label small{font-size:11.5px}
  .v7-rechner{padding:20px 16px}
}