/* =========================================================================
   seitenfertig.de — app4.css · Fassung 4 „Das Regal: elf, die laufen"
   13.09.2026

   Gebaut nach /srv/assets/berichte/seitenfertig-BAUANLEITUNG-regal-2026-09-13.md.
   Diese Datei ist der Bau, nicht die Erfindung.

   Richtung:
     · Der Beweis traegt die Seite. Elf Aufnahmen echter Kundenseiten, senkrecht
       in der Achse, in voller Spaltenbreite. Kein Wischen, keine Mosaikkacheln.
     · Die Handyaufnahmen sind 390 px breit und laufen in einem 390 px breiten
       Fenster — Massstab 1,0, keine Skalierung, jeder Buchstabe scharf.
     · Tiefe entsteht aus der harten waagerechten Kante: randlose Bilder ueber
       die volle Breite, die auf einer geraden Linie enden, darunter Papier.
       Kein Glas, kein Gehaeuse, kein Glow, kein Korn, keine Kippung.
     · Orange #E4572E ausschliesslich als STRICH (Kickerlinie, Preisstriche,
       Domain-Unterstrich, Knopf-Unterkante beim Hover, Fokusring, Wortmarke).
       Nie als Flaeche, nie als Knopf.
     · Fraunces NUR fuer h1/h2/h3, die Wortmarke und die drei Preiszahlen.
       Alles andere Switzer. Eine Familie, die alles traegt, ist der naechste
       Gemeinplatz — Zitate, Telefonnummer und Deko-Ziffern wandern auf Switzer.
     · Radius hoechstens 3 px.

   Gerechnet wird gegen 740 px sichtbare Hoehe (iPhone 12/13/14, Safari, Leisten
   ausgefahren), davon 68 px festes Aktionsband. Nutzbar: 672 px. NICHT 844.

   AUFBAU — Pflicht, wegen FEHLER-019 (eine nackte Regel NACH einer
   max-width-Query gewinnt auf ALLEN Breiten):
     TEIL A   alle Regeln fuer Handy (nackt, mobile first)
     TEIL B   @media (min-width:700px)
     TEIL C   @media (min-width:1000px)
     TEIL D   @media (min-width:1280px)
     TEIL E   Bewegungsreduktion, hover:none und max-width-Overrides, ganz am Ende
   In TEIL A steht KEINE Regel, die spaeter als Desktop-Wert gemeint ist.

   Diese Datei laedt NUR mit fassung = 4 (body.f4) und liegt hinter app.css.
   app2.css und app3.css laden in dieser Fassung nicht; alles, was von dort
   gebraucht wurde (.sr, .betont, Reveal), steht hier neu.
   ========================================================================= */

/* =========================================================================
   TEIL A — GRUNDLAGE UND HANDY (390 px zuerst)
   ========================================================================= */

body.f4{
  /* --- Flaechen --- */
  --p4-papier:#F7F1E6;      /* Grundflaeche */
  --p4-blatt:#FFFCF6;       /* das Formularblatt */
  --p4-tief:#ECE2D2;        /* abgesetzte Flaeche, auch der Grund der Fenster */
  --p4-ink:#140F0B;         /* Tintenfeld (Stimmen, Schluss, Kopfleiste, Fuss) */

  /* --- Schrift: gemessene Kontraste gegen #F7F1E6 bzw. #140F0B --- */
  --p4-text:#2B221A;            /* 13,9:1 auf Papier */
  --p4-leise:#665A4E;           /* 5,95:1 auf Papier, 5,22:1 auf --p4-tief */
  --p4-auf-ink:#EFE7DA;         /* 15,5:1 auf Tinte */
  --p4-auf-ink-leise:#B3A695;   /* 7,98:1 auf Tinte */

  --p4-akzent:#E4572E;          /* 5,17:1 auf Tinte; auf Papier NUR als Strich */
  --p4-feld:#6E6155;            /* Feldkante, 5,85:1 auf dem Blatt (WCAG 1.4.11) */

  --p4-linie:rgba(43,34,26,.17);
  --p4-linie-fein:rgba(43,34,26,.10);
  --p4-linie-ink:rgba(239,231,218,.18);
  --p4-linie-ink-fein:rgba(239,231,218,.09);

  /* EIN Lichtsystem: Licht von oben, zwei Stufen, sonst nichts. */
  --p4-nah:0 1px 2px rgba(43,34,26,.08);
  --p4-fern:0 2px 5px rgba(43,34,26,.06), 0 22px 46px -24px rgba(43,34,26,.42);
  --p4-fern-ink:0 3px 8px rgba(0,0,0,.30), 0 34px 64px -30px rgba(0,0,0,.72);

  --p4-e:cubic-bezier(.22,.61,.36,1);
  --p4-dur:240ms;

  /* Hoehe der klebenden Kopfzeile: 13 + 44 + 13 + 1 px Kante. Die Zaehlleiste
     des Regals klebt genau darunter. */
  --p4-kopf:71px;

  /* Satzspiegel dieser Fassung. --gutter steht in app.css auf :root und
     rechnet dort gegen --max:1340. Custom Properties substituieren am
     deklarierenden Element — eine Aenderung von --max/--rand hier erreicht das
     dortige --gutter NICHT. Deshalb hier neu, mit festen Zahlen. */
  --max:1280px;
  --rand:18px;
  --gutter:max(18px,calc((100vw - 1280px) / 2));

  background:var(--p4-papier);
  color:var(--p4-text);
  font-family:var(--fb);
  font-size:16.5px;
  line-height:1.62;
  hyphens:manual;
  overflow-wrap:break-word;
}

/* Der Inhaber lehnt Korn und Lichtflecken ausdruecklich ab. Die Koernung aus
   app.css liegt als fixe Ebene ueber der ganzen Seite — hier aus. */
body.f4::before{display:none}

/* app2.css ist in dieser Fassung nicht geladen; .sr kam von dort. */
.f4 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.f4 h1,.f4 h2,.f4 h3{
  font-family:var(--fd);font-weight:400;font-style:normal;
  color:var(--p4-text);letter-spacing:-.016em;line-height:1.08;
  word-break:keep-all;margin:0;
}
/* Hinweis fuer spaetere Pruefungen: Fraunces ist eine kalligrafische Serif und
   wird AUFRECHT geladen (nur latin-wght-normal, keine Italic-Datei im Projekt).
   Was wie Kursiv aussieht, ist der Schriftcharakter (FEHLER-084). */
.f4 h2{font-size:clamp(27px,3.6vw,40px)}

.f4 a{color:var(--p4-text)}
.f4 :focus-visible{outline:2.5px solid var(--p4-akzent);outline-offset:3px;border-radius:2px}
.f4 section[id]{scroll-margin-top:80px}
.f4 #betrieb{scroll-margin-top:86px}

/* Reveal: EINE Bewegung fuer die ganze Seite — 16 px hoch, gleiche Dauer,
   gleiche Kurve. motion.js schaltet .ist-da, inklusive Sicherheitsnetz nach
   2,2 s. Ohne Skript steht alles sofort da (html ohne .hat-js). */
.hat-js .f4 [data-rev]{
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity 700ms var(--p4-e),transform 700ms var(--p4-e);
}
.hat-js .f4 [data-rev].ist-da{opacity:1;transform:none}

/* ------------------------------------------------------------- Bausteine */

/* Der Kicker steht auf dieser Seite nur noch ZWEIMAL (Stimmen, Schluss).
   Vorher achtmal — der deutlichste Vorlagenmarker der Seite. */
.f4 .f4-kick{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px 11px;margin:0;
  font-family:var(--fb);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--p4-leise);
}
.f4 .f4-kick::before{content:"";width:24px;height:2px;background:var(--p4-akzent);flex:none}
.f4 .f4-kick--hell{color:var(--p4-auf-ink-leise)}

.f4 .f4-sub{margin:14px 0 0;font-size:16px;line-height:1.62;color:var(--p4-leise);max-width:58ch}
.f4 .f4-klein{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--p4-leise)}
.f4 .f4-klein--hell{color:var(--p4-auf-ink-leise)}
.f4 .f4-klein a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.f4 .f4-sterne{color:var(--p4-leise);font-size:11.5px;letter-spacing:.1em;flex:none}
.f4 .f4-sterne-link{color:inherit;text-decoration:underline;
  text-decoration-color:var(--p4-akzent);text-underline-offset:3px}
/* 13.09.2026: auf 390 px waren der Sterne-Link (22 px hoch) und die Rufnummer in der
   Fusszeile (34 px) kleiner als die 44 px, die ein Daumen zuverlaessig trifft. Die Hoehe
   kommt ueber den Innenabstand und nicht ueber die Schriftgroesse, damit sich am Satz
   nichts aendert; der negative Aussenabstand haelt den Zeilenfluss, wo er war. */
@media (pointer:coarse),(max-width:699px){
  .f4 .f4-sterne-link,
  .f4 .fuss a[href^="tel:"],
  .f4 .f4-klein a[href^="tel:"]{
    display:inline-block;min-height:44px;line-height:44px;
    margin-block:-11px;
  }
}

/* Knopf: Tinte auf Papier. Kein Orange als Flaeche, keine Pille, kein Glanz.
   Die einzige Zustandsgeste ist ein oranger Strich an der Unterkante. */
.f4 .f4-knopf{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--fb);font-size:16px;font-weight:600;line-height:1;
  min-height:54px;padding:0 26px;border:0;border-radius:3px;cursor:pointer;
  text-decoration:none;background:var(--p4-ink);color:var(--p4-papier);
  forced-color-adjust:none;box-shadow:var(--p4-nah);
  transition:background-color var(--p4-dur) var(--p4-e),
             box-shadow var(--p4-dur) var(--p4-e),
             transform var(--p4-dur) var(--p4-e);
}
.f4 .f4-knopf::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--p4-akzent);transform:scaleX(0);transform-origin:left center;
  transition:transform 320ms var(--p4-e);
}
.f4 .f4-knopf:hover{background:#33281E;box-shadow:var(--p4-fern);transform:translateY(-1px)}
.f4 .f4-knopf:hover::after,.f4 .f4-knopf:focus-visible::after{transform:scaleX(1)}
.f4 .f4-knopf:active{transform:none}
.f4 .f4-knopf--breit{display:flex;width:100%}
.f4 .f4-knopf.wird-geladen{opacity:.75}

/* Formular: das eine Element, das angefasst werden muss. Kante 5,85:1.
   Feldhoehe exakt 53 px = 20 (16 px / 1.25) + 2x15 Polster + 2x1,5 Kante. */
.f4 .f4-form{margin:0}
.f4 .f4-felder{display:grid;gap:10px;margin:0 0 12px}
.f4 .f4-felder input{
  width:100%;min-width:0;font:inherit;font-size:16px;line-height:1.25;
  padding:15px 15px;border:1.5px solid var(--p4-feld);border-radius:3px;
  background:#fff;color:var(--p4-text);
  box-shadow:inset 0 1px 2px rgba(43,34,26,.07);
  transition:border-color var(--p4-dur) var(--p4-e),box-shadow var(--p4-dur) var(--p4-e);
}
.f4 .f4-felder input::placeholder{color:#6B5E51;opacity:1}
.f4 .f4-felder input:hover{border-color:var(--p4-text)}
.f4 .f4-felder input:focus{outline:0;border-color:var(--p4-ink);
  box-shadow:0 0 0 3px rgba(228,87,46,.45)}

/* .formular-beweis kommt aus app.css (Zeile ~1069, nackte Regel am Dateiende,
   display:flex + Bernstein). Hier vollstaendig neu gesetzt — der Link ist
   gekuerzt, der Ehrlichkeitshinweis steht als leise Fortsetzung dahinter. */
.f4 .formular-beweis{
  display:block;margin:16px 0 0;padding-top:14px;
  border-top:1px solid var(--p4-linie-fein);
  font-size:13.5px;line-height:1.5;color:var(--p4-leise);
}
.f4 .formular-beweis a{
  display:inline;font-weight:600;color:var(--p4-text);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--p4-akzent);
}
.f4 .formular-beweis a:hover{text-decoration-thickness:2px}
.f4 .formular-beweis span{font-size:13.5px;color:var(--p4-leise)}

.f4 .f4-vertrauen{
  list-style:none;margin:18px 0 0;padding:16px 0 0;
  border-top:1px solid var(--p4-linie-fein);
  display:flex;flex-wrap:wrap;gap:7px 20px;font-size:13.5px;color:var(--p4-leise);
}
.f4 .f4-vertrauen li{display:flex;align-items:center;gap:8px;min-width:0}

/* Die Beweiszeile ueber jedem Bild. Sie ist das Einzige, was verhindert, dass
   der Besucher fuer eine Sekunde glaubt, er sei auf der Seite des Kunden. */
.f4 .f4-beleg{
  display:flex;align-items:baseline;gap:10px;margin:0;min-width:0;
  font-family:var(--fb);
}
.f4 .f4-beleg b{font-size:15px;font-weight:600;color:var(--p4-text);
  font-variant-numeric:tabular-nums;flex:none}
.f4 .f4-beleg span{font-size:11.5px;color:var(--p4-leise);flex:none}
.f4 .f4-beleg em{
  font-style:normal;font-size:13px;color:var(--p4-text);
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Die Domain steht als TEXT, nie als Link (Owner-Regel). Der orange Strich ist
   die einzige Auszeichnung. */
.f4 .f4-domain{margin:0;font-size:12.5px;line-height:1.5;color:var(--p4-leise);
  word-break:break-word}
.f4 .f4-domain span{border-bottom:1px solid var(--p4-akzent);padding-bottom:1px}

/* =========================================================================
   TEIL A · KOPF, LEISTE, FUSS — eigener Kopf, kein Standardkopf
   Papierzeile mit ueberbreiter Wortmarke, durchgehende Kante nach unten.
   Keine Karte, kein Radius, keine Schwebekante, keine Pille.
   Hoehenbudget: 13 + 44 + 13 + 1 = 71 px. Breitenbudget bei 390 px:
   Wortmarke ~140 + Knopf ~118 + Burger 44 + 2x14 Abstand = 330 < 354.
   ========================================================================= */

.f4 .rail{background:var(--p4-ink);color:var(--p4-auf-ink-leise);font-size:12.5px}
.f4 .rail b{color:var(--p4-auf-ink);font-weight:500}
.f4 .rail a{color:var(--p4-auf-ink);text-decoration-color:var(--p4-linie-ink)}
.f4 .rail a:hover{text-decoration-color:var(--p4-akzent)}

.f4 .kopf{
  background:var(--p4-papier);padding-top:0;
  border-bottom:1px solid var(--p4-linie);
  transition:box-shadow var(--p4-dur) var(--p4-e);
}
.f4 .kopf-karte{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:13px 0;gap:14px;transition:padding var(--p4-dur) var(--p4-e);
}
.f4.ist-geschrumpft .kopf{padding-top:0;box-shadow:0 12px 26px -22px rgba(43,34,26,.65)}
.f4.ist-geschrumpft .kopf-karte{padding-block:8px;box-shadow:none}
/* gemessen: 60 px hoch, sobald .ist-geschrumpft steht. Die Zaehlleiste muss mit, sonst Spalt. */
.f4.ist-geschrumpft .f4-zaehler{top:60px}

.f4 .kopf .marke{
  font-family:var(--fd);font-size:clamp(22px,5.6vw,29px);font-weight:400;
  letter-spacing:-.032em;color:var(--p4-text);margin-right:auto;
}
.f4 .kopf .marke i{font-style:normal;color:var(--p4-text);
  box-shadow:inset 0 -3px 0 var(--p4-akzent)}
.f4 .kopf-ort{display:none}
.f4 .kopf-nav{display:none}

/* Der auffaelligste Punkt ueber der Falz nannte bisher den PREIS („ab 490 €
   netto", app.css:576 blendet den langen Text erst ab 620 px ein) und
   verschwieg das Geschenk. Ab jetzt auf allen Breiten „Kostenlos ansehen".
   Hoehere Spezifitaet als die app.css-Regel, gilt also auch in deren Query. */
.f4 .kopf-tat{
  background:transparent;color:var(--p4-text);border-radius:0;box-shadow:none;
  padding:10px 0;gap:8px;font-size:13px;font-weight:600;letter-spacing:.01em;
  border-bottom:1.5px solid var(--p4-text);min-height:44px;
  transition:border-color var(--p4-dur) var(--p4-e);
}
.f4 .kopf-tat:hover{box-shadow:none;border-bottom-color:var(--p4-akzent)}
.f4 .kopf-tat .tat-lang{display:inline}
.f4 .kopf-tat .tat-kurz{display:none}
.f4 .kopf-tat svg{display:block;width:15px;height:12px}

.f4 .burger{border:0;border-radius:0;width:44px;height:44px}
.f4 .burger i{width:20px;height:1.6px;background:var(--p4-text);border-radius:0}
.f4 .burger i + i{margin-top:5px}

.f4 .kopf > .wrap{position:relative}
.f4 .panel{
  display:block;position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:2;
  background:var(--p4-blatt);border:1px solid var(--p4-linie);border-radius:2px;
  box-shadow:var(--p4-fern);padding:6px;margin-top:0;
  opacity:0;transform:translateY(-10px);visibility:hidden;
  transition:opacity 220ms var(--p4-e),transform 220ms var(--p4-e),
             visibility 0s linear 220ms;
}
.f4 .panel.ist-offen{
  opacity:1;transform:none;visibility:visible;
  transition:opacity 220ms var(--p4-e),transform 220ms var(--p4-e),
             visibility 0s linear 0s;
}
.f4 .panel a{
  display:flex;align-items:center;min-height:50px;padding:12px 14px;
  font-size:16px;color:var(--p4-text);border-bottom:1px solid var(--p4-linie-fein);
}
.f4 .panel a:hover{background:var(--p4-papier)}

.f4 .fuss{background:var(--p4-ink);color:var(--p4-auf-ink-leise);padding:56px 0 40px}
.f4 .fuss .marke{font-family:var(--fd);font-size:32px;font-weight:400;
  letter-spacing:-.032em;color:var(--p4-auf-ink)}
.f4 .fuss .marke i{font-style:normal;color:var(--p4-auf-ink);
  box-shadow:inset 0 -3px 0 var(--p4-akzent)}
.f4 .fuss-meta{color:var(--p4-auf-ink-leise)}
.f4 .fuss-meta a,.f4 .fuss-nav a{color:var(--p4-auf-ink);
  text-decoration-color:var(--p4-linie-ink)}
.f4 .fuss-nav a:hover{text-decoration-color:var(--p4-akzent)}
.f4 .fuss-hinweis{color:var(--p4-auf-ink-leise);border-top:1px solid var(--p4-linie-ink-fein)}

/* =========================================================================
   TEIL A · 1 — DER ERSTE BILDSCHIRM
   Pixel fuer Pixel gegen 672 px nutzbare Hoehe. Jede Zahl unten ist die
   Oberkante des Elements auf einem 390 x 740 grossen Bildschirm:
      71  Unterkante Kopfzeile
      85  H1            (14 Luft)   31 px / 1.06, zwei Zeilen  ->  65,7 px
     162  Beweiszeile   (12 Luft)   15 px / 1.3               ->  19,5 px
     190  Beweisfenster ( 8 Luft)                             -> 300,0 px
     500  Domainzeile   (10 Luft)   12,5 px / 1.5             ->  18,8 px
     537  Angebotssatz  (18 Luft)   16,5 px / 1.5, zwei Zeilen ->  49,5 px
     603  Formularblatt (17 Luft)   1 px Kante + 18 px Polster
     622  erstes Eingabefeld, 53 px hoch -> 50 von 53 px sichtbar
     672  Oberkante Aktionsband
   Wer hier eine Zahl aendert, verschiebt das Feld unter das Band.
   ========================================================================= */

.f4 .f4-buehne{padding:14px var(--rand) 44px}

/* 31 px sind gerechnet, nicht gegriffen: „Ihre Arbeit sieht jeder." misst in
   Fraunces rund 292 px bei Satzbreite 354. Der Umbruch liegt trotzdem fest —
   .betont ist ein Block, damit aus zwei Saetzen nie drei Zeilen werden. */
.f4 .f4-h1{font-size:31px;line-height:1.06;letter-spacing:-.022em;margin:0}
/* Der eine Akzent im Satz: ein oranger Unterstrich, kein Farbwechsel. */
.f4 .f4-h1 .betont{
  display:block;
  text-decoration:underline;
  text-decoration-color:var(--p4-akzent);
  text-decoration-thickness:.05em;
  text-underline-offset:.15em;
}

.f4 .f4-beweis{margin:12px 0 0}
.f4 .f4-beweis .f4-beleg{margin:0}

/* DAS BEWEISFENSTER. Randlos ueber die volle Bildschirmbreite, 390 x 300.
   Keine seitliche Kante, keine Rundung, kein Schatten, kein Gehaeuse, keine
   Kippung. Weil die Quelle 390 px breit ist und das Fenster 390 px breit ist,
   laeuft die Aufnahme mit Massstab 1,0 — Originalgroesse.
   Sichtbar sind die Quellzeilen 0 bis 300. */
/* 13.09.2026: `height:300px` bei einer 390x844-Aufnahme liess 26 Prozent uebrig — die
   Kopfleiste. Der Hero zeigt jetzt die Rechneraufnahme (720x450, Verhaeltnis 1,60), also
   bekommt der Kasten genau dieses Verhaeltnis. Bei 354 px Breite sind das 221 px Hoehe:
   NIEDRIGER als die 300 vorher und dabei vollstaendig sichtbar. Warum nicht die Handyaufnahme
   in voller Hoehe: das Fenster waere 766 px hoch und schoebe das erste Eingabefeld von y=627
   auf y=1093, also weit unter die Falz. Die Begruendung steht ausfuehrlich in home4.njk. */
.f4 .f4-fenster{
  margin:8px calc(var(--rand) * -1) 0;
  height:auto;aspect-ratio:16/10;overflow:hidden;background:var(--p4-tief);
  border-top:1px solid var(--p4-linie);
  border-bottom:1px solid var(--p4-linie);
}
.f4 .f4-fenster picture{display:block;width:100%;height:100%}
.f4 .f4-fenster img{width:100%;height:100%;object-fit:cover;object-position:50% 0}

.f4 .f4-beweis .f4-domain{margin:10px 0 0}

.f4 .f4-angebot{
  margin:18px 0 0;font-size:16.5px;line-height:1.5;color:var(--p4-text);
  max-width:42ch;
}

/* Das Formularblatt. Erstes Feld bei 622 px: 603 (Oberkante) + 1 px Kante
   + 18 px Polster. Kein Bild in diesem Abschnitt, hier lenkt nichts ab. */
.f4 .f4-blatt{
  margin:17px 0 0;padding:18px 17px 22px;
  background:var(--p4-blatt);border:1px solid var(--p4-linie);
  box-shadow:var(--p4-fern);
}

/* =========================================================================
   TEIL A · 2 — DAS REGAL (Papier)
   Grund ist PAPIER, nicht Tinte: mindestens sechs der elf Kundenseiten haben
   dunkle Heros; auf Tinte verschmelzen sie zu einer Reihe dunkler Kloetze,
   auf Papier hat jede Aufnahme eine Kante gegen den Grund.
   ========================================================================= */

.f4 .f4-regal{padding:50px 0 56px}
.f4 .f4-regal-kopf h2{max-width:20ch}

/* DIE EINE BEWEGUNG. Eine klebende Papierleiste, 34 px, die mitzaehlt,
   solange das Regal laeuft. Sie wechselt nur Text: kein Transform, kein rAF,
   kein Inline-JS. Zwischen zwei Kacheln steht sie vollkommen still.
   Sie sitzt oben unter dem Kopf, nicht neben dem einzigen Knopf — eine
   wechselnde Zeile direkt neben dem Knopf waere eine Laufschrift.
   z-index 40 < 80 der Kopfzeile: sie schiebt sich unter den Kopf. */
.f4 .f4-zaehler{
  position:sticky;top:var(--p4-kopf);z-index:40;
  display:flex;align-items:center;gap:10px;
  height:34px;margin:26px 0 18px;padding:0 var(--rand);
  background:var(--p4-papier);border-bottom:1px solid var(--p4-linie);
  /* 13.09.2026: Die Kopfzeile schrumpft beim Scrollen von 71 auf 60 px, die Leiste klebte
     aber weiter bei 71. Durch die elf Pixel dazwischen lief bei jedem Scrollschritt ein
     Streifen fremden Bildinhalts halb ausgeblendet hindurch. Zwei Massnahmen, beide noetig:
     die Leiste zieht im geschrumpften Zustand mit (unten), und dieser Schlagschatten deckt
     die 14 px darueber mit Papier ab, damit auch waehrend des Uebergangs nichts durchlaeuft.
     Ein Schatten, weil er das Layout nicht anfasst. */
  box-shadow:0 -14px 0 0 var(--p4-papier);
  font-family:var(--fb);font-size:12.5px;line-height:1;
}
.f4 .f4-zaehler b{font-weight:600;color:var(--p4-text);font-variant-numeric:tabular-nums;flex:none}
.f4 .f4-zaehler span{color:var(--p4-leise);flex:none}
/* 13.09.2026: "02 / 11" stand in der Leiste und 80 px darunter noch einmal in der Kachel.
   Zweimal dieselbe Zahl auf einem Bildschirm liest sich als Fehler, nicht als Fuehrung.
   Die Kachel behaelt die Nummer, weil sie dort neben dem Namen steht und etwas erklaert;
   in der Leiste bleibt die Laufnummer als stiller Fortschritt und die Adresse als Inhalt. */
.f4 .f4-zaehler span{display:none}
.f4 .f4-zaehler b{font-weight:400;color:var(--p4-leise);font-size:11.5px;letter-spacing:.08em}
.f4 .f4-zaehler i{font-style:normal;color:var(--p4-leise);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 14.09.2026: zwei Kacheln je Reihe statt einer. Bis heute stand jede Kachel allein und
   nahm 74 Prozent der Spalte — bei drei Beispielen ging das, bei sechs waere die Seite um
   rund 1.600 px laenger geworden, und der Inhaber hatte die Geraete ohnehin als "viel zu
   gross" verworfen. Zwei Spalten halbieren die Hoehe und lassen die Reihe wie eine
   Sammlung wirken statt wie eine Abfolge einzelner Bildschirme. */
.f4 .f4-kacheln{padding:0 var(--rand);display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;align-items:start}
.f4 .f4-kachel{margin:0}
.f4 .f4-kachel:last-child{margin-bottom:0}
.f4 .f4-kachel .f4-beleg em{font-weight:600}
.f4 .f4-kachel-meta{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--p4-leise)}

/* Randlos, 390 px breit, Massstab 1:1. Kein Rahmen, kein Schatten, keine
   Rundung — nur die 1-px-Kante oben und unten. Bei jhn ist sie zwingend: der
   Grund jener Seite ist cremefarben und liegt sehr nah an unserem Papier.
   Hoehe und senkrechter Ausschnitt haengen an --h / --op (siehe unten) und
   damit an p.img, nicht an der Kachelnummer: server.js sortiert bei ?b= um. */
.f4 .f4-kachel-fenster{
  margin:10px calc(var(--rand) * -1) 0;
  height:var(--h,320px);overflow:hidden;background:var(--p4-tief);
  border-top:1px solid var(--p4-linie);
  border-bottom:1px solid var(--p4-linie);
}
.f4 .f4-kachel-fenster picture{display:block;width:100%;height:100%}
.f4 .f4-kachel-fenster img{width:100%;height:100%;object-fit:cover;
  object-position:50% var(--op,20%)}
/* 13.09.2026, gemessen: die Kante stand bei 1,39:1 gegen unser Papier, der Kopfbalken der
   Azad-Aufnahme bei 1,02:1 und der Grund von jhn bei 1,01:1. Auf dem Handy — dem Viewport
   der Anzeigen — war damit nicht zu erkennen, wo unsere Seite aufhoert und die fremde
   anfaengt: zwei Kopfzeilen, zwei Menue-Knoepfe, eine fremde Rufnummer innerhalb von 400 px.
   Ab 700 px setzt weiter unten ein echter Rahmen mit Seitenkanten an, dort bleibt es leise.
   Der Wert 0.50 ist gerechnet, nicht geschaetzt: er ergibt 3,05:1. */
@media (max-width:699px){
  /* 13.09.2026, Kuerzung des Regals: Kachel 07 bis 11 zeigen kein Bild mehr, sondern nur
     noch Nummer, Name, Branche, Ort und Adresse — eng gesetzt, mit Haarlinie. Das spart
     rund 2.500 px, ohne einen einzigen Beleg wegzunehmen. Rueckfahrt: diesen Block loeschen. */
  .f4 .f4-kachel--knapp{margin-block:0;padding-block:11px;border-top:1px solid var(--p4-linie-fein)}
  .f4 .f4-kachel--knapp .f4-kachel-fenster{display:none}
  .f4 .f4-kachel--knapp .f4-beleg{margin:0}
  .f4 .f4-kachel--knapp .f4-kachel-meta{margin:1px 0 0}
  .f4 .f4-kachel--knapp .f4-domain{margin:3px 0 0}

  /* Dasselbe fuer den Beleg auf dem ersten Bildschirm, und dort wiegt es am schwersten:
     die Azad-Aufnahme beginnt mit einer eigenen Kopfleiste samt Rufnummer und einem eigenen
     Menue-Knopf, an derselben x-Position wie unserer. Ohne Rahmen standen auf den obersten
     600 px zwei Kopfzeilen und zwei Menue-Knoepfe untereinander — der erste Bildschirm, den
     jeder aus der Anzeige sieht. Gerahmt ist es ein gezeigtes Handy, nicht unsere Navigation. */
  .f4 .f4-fenster{
    margin-inline:0;
    border:1px solid rgba(43,34,26,.50);
  }

  /* Erster Versuch war, nur die beiden Haarlinien dunkler zu machen. Im Bild reicht das
     nicht: die JHN-Aufnahme hat cremefarbenen Grund, eine kursive Serifen-Schlagzeile in
     Rostrot und Fliesstext in derselben Anmutung wie unserer — sie las sich als EIGENER
     Abschnitt unserer Seite, nicht als Bildschirmfoto einer fremden. Damit faellt der
     Beweis in sich zusammen, denn die Ueberschrift darueber verspricht gerade "jede dieser
     Seiten ist online, keine Musterbilder". Also bekommt das Fenster unter 700 px denselben
     allseitigen Rahmen, den es ab 700 px ohnehin hat, und rueckt auf den Textrand ein:
     links und rechts bleibt Papier stehen. Ein gerahmtes Bild ist unmissverstaendlich ein
     Bild. Rueckfahrt: diesen Block loeschen, dann ist es wieder randlos. */
  .f4 .f4-kachel-fenster{
    margin-inline:0;
    border:1px solid rgba(43,34,26,.50);
  }

  /* 13.09.2026, spaeter Nachmittag — die eigentliche Reparatur.
     Bis hierher stand jede Kachel auf einer FESTEN Hoehe (--h, 300 bis 430 px) und zeigte
     davon einen gewaehlten Ausschnitt (--op). Jede dieser Zahlen war am Inhalt begruendet,
     und trotzdem war das Prinzip falsch: Die Aufnahme ist 390x844 (Verhaeltnis 0,462), der
     Kasten 352x430 (0,82). Sichtbar blieben rund 56 Prozent, und der Schnitt lag dort, wo
     die Hoehe endete — nicht dort, wo ein Satz endet. Im Bild las sich das als „Aufmass auf
     dem", „Farbmuster an", ein halbierter Knopf. Genau das hat der Inhaber gemeint.
     Jetzt bekommt der Kasten das Verhaeltnis der Datei. Damit ist NICHTS mehr beschnitten,
     --op wird wirkungslos und der Schnitt kann nicht mehr im Satz liegen, weil es keinen
     gibt. Die Kachel rueckt dafuer auf 74 Prozent der Spalte ein — sonst waere sie 761 px
     hoch und die Seite um 1.700 px laenger; so sind es 547 px und rund 350 px mehr, und die
     Einrueckung gibt der Reihe nebenbei die Varianz, die ihr fehlte.
     Ab 700 px bleibt alles wie es war: dort liefert <source> das Querformat (720x450, 1,60)
     in einen 16/10-Kasten — das passt bereits genau und war nie das Problem. */
  .f4 .f4-kacheln .f4-kachel{--kachel-breite:100%}
  /* Das Gehaeuse. Es ist bewusst schmal (2,8 %) und einfarbig — ein Geraet, kein
     Metallgehaeuse; Verlaeufe und Glanz stehen auf der Verbotsliste. Die innere Rundung
     ist die aeussere minus dem Steg (Rs = Rg − r), sonst laeuft die Bildecke nicht
     parallel zur Gehaeuseecke, und genau daran erkennt man ein gezeichnetes Geraet. */
  .f4 .f4-kacheln .f4-kachel .f4-kachel-fenster{
    width:var(--kachel-breite);margin-inline:auto;
    height:auto;aspect-ratio:auto;
    padding:2.8%;background:#1A1D21;border:0;border-radius:16px;
    box-shadow:0 1px 2px rgba(24,18,12,.28),0 16px 30px -13px rgba(24,18,12,.40);
  }
  .f4 .f4-kacheln .f4-kachel .f4-kachel-fenster picture{
    display:block;aspect-ratio:390/844;overflow:hidden;border-radius:11px;background:#fff;
  }
  .f4 .f4-kacheln .f4-kachel .f4-kachel-fenster img{
    height:auto;aspect-ratio:auto;object-fit:fill;object-position:50% 50%;
  }
  /* Der Beweis oben steht allein und darf die volle Spalte nehmen. */
  .f4 .f4-kachel--gross .f4-kachel-fenster{
    width:84%;margin-inline:auto;
    height:auto;aspect-ratio:auto;
    padding:2.6%;background:#1A1D21;border:0;border-radius:18px;
    box-shadow:0 1px 2px rgba(24,18,12,.28),0 18px 34px -14px rgba(24,18,12,.42);
  }
  .f4 .f4-kachel--gross .f4-kachel-fenster picture{
    display:block;aspect-ratio:390/844;overflow:hidden;border-radius:13px;background:#fff;
  }
  .f4 .f4-kachel--gross .f4-kachel-fenster img{
    height:auto;aspect-ratio:auto;object-fit:fill;object-position:50% 50%;
  }
}
.f4 .f4-kachel .f4-domain{margin:9px 0 0}

/* Je Datei gemessen, nicht geschaetzt. Der Prozentwert rechnet gegen den
   Ueberhang (844 minus Fensterhoehe).
     gz            Schlagzeile, weisser Knopf „Online anmelden", Bewertungszeile
     lahndill      Logoleiste, ganze Schlagzeile, Anfang des goldenen Knopfs
     enzos         Pizza, „ab 16,80 €", roter Knopf „JETZT BESTELLEN"
     masam         Schlagzeile, Fliesstext, weinroter Knopf, Inhaberin
     hausundgarten schneidet die fremde Kopfleiste weg, fuehrt mit der Schlagzeile
     jhn           Schlagzeile, Text, beide Knoepfe
     lospeces      Kopf und Schlagzeile
     gabriel       Schlagzeile plus goldener Knopf „GOLD VERKAUFEN"
     kg            unsere eigene Seite
     immo          haelt den Cookie-Balken (ab ~640) sicher aus dem Bild
   Die Hoehen sind bewusst ungleich und aus dem Inhalt begruendet. Ein fester
   Wechsel gross-Paar-quer waere nach dem zweiten Durchlauf ein erkanntes
   Raster; Paarkacheln in 165x220 (Massstab 0,42) machen aus Fliesstext
   7-px-Mosaik — genau der Vorwurf „Bild als Deko", den dieser Abschnitt
   entkraeften soll. Keine Kachel ist schmaler als die volle Spalte. */
.f4 .f4-k--gz{--h:300px;--op:30%}
.f4 .f4-k--lahndill{--h:360px;--op:12%}
.f4 .f4-k--enzos{--h:300px;--op:100%}
.f4 .f4-k--masam{--h:340px;--op:30%}
.f4 .f4-k--hausundgarten{--h:300px;--op:18%}
.f4 .f4-k--jhn{--h:340px;--op:30%}
.f4 .f4-k--lospeces{--h:300px;--op:5%}
.f4 .f4-k--gabriel{--h:340px;--op:18%}
.f4 .f4-k--kg{--h:340px;--op:40%}
.f4 .f4-k--immo{--h:300px;--op:8%}
.f4 .f4-k--azad{--h:300px;--op:0%}
/* 13.09.2026, die drei Musterseiten. Startwerte: oben ansetzen, weil bei ihnen das
   Musterband, die Wortmarke und die Ueberschrift ganz oben stehen — anders als bei den
   gewachsenen Kundenseiten, wo der obere Rand oft eine leere Kopfleiste ist. */
/* Am Ausschnitt nachgemessen: Band 60 px, Wortmarke 100, Navigation 80, Badge 70 —
   die Ueberschrift beginnt bei rund 350. Mit 330 px zeigte die Kachel Marke und
   Navigation und damit nichts ueber das Gewerk. 430 px holen die Ueberschrift herein,
   die das Gewerk benennt; das ist der einzige Satz, der in Kachelgroesse traegt. */
.f4 .f4-k--muster-dach{--h:430px;--op:0%}
.f4 .f4-k--muster-maler{--h:430px;--op:0%}
.f4 .f4-k--muster-tischler{--h:430px;--op:0%}

/* Der Beweisabschnitt und die Musterzeile, 13.09.2026 ------------------------ */
.f4 .f4-beweis-domain{border-bottom:1px solid var(--p4-akzent);white-space:nowrap}
.f4 .f4-alle{margin:22px 0 0;font-size:15px;line-height:1.55;color:var(--p4-leise)}
.f4 .f4-alle a{color:var(--p4-text);border-bottom:1px solid var(--p4-akzent);text-decoration:none}
/* Der Musterabschnitt setzt oben ab, damit man sieht: hier beginnt etwas anderes. */
.f4 .f4-muster{margin-top:46px;padding-top:40px;border-top:1px solid var(--p4-linie)}
/* Die Musterzeile steht in derselben Groesse wie der uebrige Kachelsatz. Kleiner oder
   blasser waere nach § 5 UWG kein Hinweis, sondern eine Fussnote. */
.f4 .f4-musterzeile a{color:var(--p4-leise);text-decoration:none;
  border-bottom:1px solid var(--p4-linie)}
.f4 .f4-musterzeile a:hover{color:var(--p4-text);border-bottom-color:var(--p4-akzent)}

/* ---------------------------------------------------------------------------
   2a · WAS ES KOSTET, KEINE ZU HABEN
   Auf Tinte gesetzt, als einzige dunkle Flaeche vor der Zaesur: der Abschnitt
   soll unterbrechen, nicht mitlaufen. Die Zahlen stehen gross in der
   Anzeigenschrift, der Satz daneben klein — wer nur scrollt, nimmt 94, 40 und
   83 mit, und das reicht schon.
   --------------------------------------------------------------------------- */
.f4 .f4-kosten{background:var(--p4-ink);color:var(--p4-auf-ink);padding:54px 0 50px;margin:40px 0 0}
.f4 .f4-kosten-kopf h2{margin:0;font-family:var(--fd);font-weight:400;
  font-size:clamp(27px,7vw,40px);line-height:1.14;letter-spacing:-.01em;color:var(--p4-auf-ink)}
.f4 .f4-zahl{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--p4-linie-ink-fein)}
.f4 .f4-zahl:first-of-type{border-top:1px solid var(--p4-linie-ink-fein);margin-top:26px}
.f4 .f4-zahl b{font-family:var(--fd);font-weight:400;font-size:clamp(38px,11vw,58px);line-height:1;
  color:var(--p4-auf-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.f4 .f4-zahl p{margin:0;font-size:15.5px;line-height:1.55;color:var(--p4-auf-ink-leise);max-width:46ch}
.f4 .f4-kosten-quelle{margin:18px 0 0;font-size:12.5px;line-height:1.55;color:var(--p4-auf-ink-leise);max-width:60ch}
.f4 .f4-kosten-link{border-bottom:1px solid var(--p4-akzent);color:var(--p4-auf-ink)}

/* ---------------------------------------------------------------------------
   2b · EIN FALL, AUSGESCHRIEBEN
   Kein Bild, keine Ziffern, keine Kachel. Eine Liste mit Haarlinien, gesetzt
   wie ein Lieferschein — das ist die Form, die zum Inhalt passt: hier steht,
   was geliefert wird. Der Preis steht im selben Bild wie der Umfang, sonst
   rechnet niemand das eine gegen das andere.
   --------------------------------------------------------------------------- */
.f4 .f4-fall{padding:54px 0 8px;background:var(--p4-papier)}
.f4 .f4-fall-kopf h2{margin:0;font-family:var(--fd);font-weight:400;
  font-size:clamp(27px,7vw,40px);line-height:1.14;letter-spacing:-.01em;color:var(--p4-text)}
.f4 .f4-fall-kopf .f4-sub{margin:11px 0 0;font-size:15.5px;line-height:1.6;color:var(--p4-leise);max-width:52ch}
.f4 .f4-fall-domain{color:var(--p4-text);border-bottom:1px solid var(--p4-akzent);white-space:nowrap}
.f4 .f4-fall-liste{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--p4-linie)}
.f4 .f4-fall-liste li{border-bottom:1px solid var(--p4-linie-fein);padding:13px 0 13px 26px;
  position:relative;font-size:15.5px;line-height:1.5;color:var(--p4-text);max-width:60ch}
/* Der Haken ist gezeichnet, nicht gesetzt: ein Listenpunkt-Zeichen waere in dieser
   Schrift ein Kreis, und ein Emoji kaeme aus einer fremden Schrift. */
.f4 .f4-fall-liste li::before{content:"";position:absolute;left:2px;top:20px;width:9px;height:5px;
  border-left:1.5px solid var(--p4-akzent);border-bottom:1.5px solid var(--p4-akzent);
  transform:rotate(-45deg)}
.f4 .f4-fall-schluss{margin:20px 0 0;font-size:15.5px;line-height:1.6;color:var(--p4-leise);max-width:56ch}
.f4 .f4-fall-schluss b{color:var(--p4-text);font-weight:650}

/* Der einzige Einschub im Regal: dieselbe Kundenseite am Rechner, 16:10,
   volle Breite, flach. Sonst steht hier KEIN zweites Motiv. */
.f4 .f4-einschub{margin:0 0 30px}
.f4 .f4-einschub-fenster{
  margin:0 calc(var(--rand) * -1);
  aspect-ratio:16/10;overflow:hidden;background:var(--p4-tief);
  border-top:1px solid var(--p4-linie);
  border-bottom:1px solid var(--p4-linie);
}
.f4 .f4-einschub-fenster img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.f4 .f4-einschub figcaption{margin:10px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--p4-leise)}

/* =========================================================================
   TEIL A · 3 — ZAESUR (das Dachfoto, einmal)
   Randlos, ohne Schrift, ohne Bewegung, ohne Filter. Der einzige
   Stimmungs-Atemzug der Seite und die Bruecke zum Anzeigenmotiv v7-a.
   Fuer dieses Motiv liegen nur p780, p1170, q1000, q1600 im Ordner; der
   2:1-Eindruck entsteht ueber die feste Fensterhoehe plus cover.
   ========================================================================= */

.f4 .f4-zaesur{
  margin:0;overflow:hidden;background:var(--p4-tief);height:260px;
}
.f4 .f4-zaesur img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* =========================================================================
   TEIL A · 4 — ABLAUF (Papier)
   Die einzige Liste der Seite, die wirklich eine Reihenfolge ist. Nur hier
   und im Regal stehen noch Ziffern.
   ========================================================================= */

.f4 .f4-ablauf{padding:58px 0 62px}

.f4 .f4-schritte{list-style:none;margin:30px 0 0;padding:0;
  border-top:1px solid var(--p4-linie)}
.f4 .f4-schritte li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 18px;
  align-items:start;padding:22px 0;border-bottom:1px solid var(--p4-linie);
}
.f4 .f4-schritte li > div{min-width:0}
/* Switzer statt Fraunces: die Serif traegt ab jetzt nur noch h1/h2/h3, die
   Wortmarke und die drei Preiszahlen. */
.f4 .f4-schritte b{
  font-family:var(--fb);font-weight:600;font-size:15px;line-height:1.7;
  letter-spacing:.12em;color:var(--p4-leise);font-variant-numeric:tabular-nums;
}
.f4 .f4-schritte h3{font-size:19.5px;line-height:1.24}
.f4 .f4-schritte p{margin:9px 0 0;font-size:15.5px;line-height:1.6;
  color:var(--p4-leise);max-width:56ch}

/* Der offene Satz ueber das fehlende Bild. Kein Baukasten-Anbieter gibt zu,
   dass ihm ein Bild fehlt. */
.f4 .f4-offen{
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--p4-linie-fein);
  font-size:14px;line-height:1.6;color:var(--p4-leise);max-width:62ch;
}

/* =========================================================================
   TEIL A · 5 — SECHS GRUENDE (Papier)
   Ziffern gestrichen. Ablauf 01-03, Gruende 01-06 und Bringt 01-04 waren
   dreizehn Ziffern in Folge und derselbe Aufbau dreimal hintereinander.
   ========================================================================= */

.f4 .f4-gruende{padding:0 0 62px}
.f4 .f4-gruende-bild{margin:0}
.f4 .f4-gruende-bild picture{
  display:block;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:var(--p4-tief);
  border-top:1px solid var(--p4-linie);
  border-bottom:1px solid var(--p4-linie);
}
.f4 .f4-gruende-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.f4 .f4-gruende-bild figcaption{
  margin:12px var(--rand) 0;font-size:12.5px;line-height:1.5;color:var(--p4-leise);
}
.f4 .f4-gruende-bild figcaption b{color:var(--p4-text);font-weight:600}

.f4 .f4-gruende-kopf{
  width:min(100% - (var(--rand) * 2),var(--max));margin:32px auto 0;
  padding-top:22px;border-top:1px solid var(--p4-linie);
}

.f4 .f4-sechs{list-style:none;margin:32px 0 0;padding:0}
.f4 .f4-sechs li{padding:20px 0;border-top:1px solid var(--p4-linie-fein)}
.f4 .f4-sechs b{display:block;font-family:var(--fb);font-weight:600;
  font-size:16.5px;line-height:1.35;color:var(--p4-text)}
.f4 .f4-sechs p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--p4-leise)}

/* =========================================================================
   TEIL A · 6 — WAS ES BRINGT (abgesetzte Flaeche)
   Lexikonschnitt: links der Begriff, rechts die Erklaerung. Keine Ziffern.
   ========================================================================= */

.f4 .f4-bringt{background:var(--p4-tief);padding:56px 0 62px}
.f4 .f4-bringt-kopf h2{max-width:19ch}

.f4 .f4-lexikon{margin:32px 0 0;padding:0}
.f4 .f4-lexikon > div{padding:22px 0;border-top:1px solid var(--p4-linie)}
.f4 .f4-lexikon dt{font-family:var(--fd);font-weight:400;font-size:20px;
  line-height:1.22;color:var(--p4-text);letter-spacing:-.016em;word-break:keep-all}
.f4 .f4-lexikon dd{margin:10px 0 0;font-size:15.5px;line-height:1.62;
  color:var(--p4-leise);max-width:60ch}

/* =========================================================================
   TEIL A · 7 — STIMMEN (Tintenfeld)
   Erster von zwei Farbwechseln. Die erste Stimme steht gross und allein.
   ========================================================================= */

.f4 .f4-stimmen{background:var(--p4-ink);color:var(--p4-auf-ink);padding:56px 0 60px}
.f4 .f4-stimmen h2{color:var(--p4-auf-ink);margin-top:16px}
.f4 .f4-stimmen .f4-sub{color:var(--p4-auf-ink-leise)}
.f4 .f4-stimmen .f4-sterne{color:var(--p4-auf-ink-leise)}
.f4 .f4-echtheit{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--p4-linie-ink-fein);
  font-size:12.5px;line-height:1.55;color:var(--p4-auf-ink-leise);max-width:64ch;
}
.f4 .f4-stimmen-fuss{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--p4-auf-ink)}

.f4 .f4-stimmenreihe{margin-top:32px;display:grid;gap:24px}
.f4 .f4-stimme{margin:0;padding:20px 0 0;border-top:1px solid var(--p4-linie-ink)}
.f4 .f4-stimme blockquote{margin:12px 0 0;font-size:15.5px;line-height:1.6;
  color:var(--p4-auf-ink)}
/* Das Leitzitat lief auf Fraunces 22/26/29 px. Switzer 20 / 1.45 / 500. */
.f4 .f4-stimme--leit blockquote{font-family:var(--fb);font-weight:500;
  font-size:20px;line-height:1.45;letter-spacing:-.004em}
.f4 .f4-stimme figcaption{
  margin-top:16px;display:flex;align-items:center;gap:9px;
  font-size:12.5px;line-height:1.4;color:var(--p4-auf-ink-leise);
}
.f4 .f4-stimme figcaption img{flex:none}
.f4 .f4-stimme figcaption span{min-width:0}
.f4 .f4-stimme figcaption b{display:block;font-size:14px;font-weight:600;
  color:var(--p4-auf-ink)}

/* =========================================================================
   TEIL A · 8 — PREIS (Papier)
   Der beste Bildschirm der Seite, unveraendert uebernommen: die drei Zahlen
   zuerst, jede unter dem einen orangen Strich.
   ========================================================================= */

.f4 .f4-preis{padding:58px 0 66px}
.f4 .f4-klar{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.f4 .f4-klar li{display:grid;gap:9px;padding-top:15px;
  border-top:2px solid var(--p4-akzent)}
.f4 .f4-klar b{
  font-family:var(--fd);font-weight:400;font-size:clamp(42px,11vw,76px);
  line-height:.96;color:var(--p4-text);letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.f4 .f4-klar span{font-size:14.5px;line-height:1.5;color:var(--p4-leise);max-width:32ch}

.f4 .f4-preis-unten{margin-top:44px;padding-top:30px;
  border-top:1px solid var(--p4-linie);display:grid;gap:30px}
.f4 .f4-preis-kopf .f4-knopf{margin-top:24px}

.f4 .f4-liste{list-style:none;margin:0;padding:0}
.f4 .f4-liste li{
  position:relative;padding:11px 0 11px 26px;font-size:15.5px;line-height:1.5;
  color:var(--p4-text);border-bottom:1px solid var(--p4-linie-fein);
}
.f4 .f4-liste li::before{content:"";position:absolute;left:0;top:1.15em;
  width:13px;height:1.5px;background:var(--p4-leise)}

/* =========================================================================
   TEIL A · 9 — FRAGEN (abgesetzte Flaeche)
   ========================================================================= */

.f4 .f4-fragen{background:var(--p4-tief);padding:56px 0 62px}
.f4 .f4-ruf{margin:22px 0 0;font-size:15px;line-height:1.7;color:var(--p4-leise)}
/* Telefonnummer von Fraunces 26 px auf Switzer 24 px / 600. */
.f4 .f4-ruf a{
  display:inline-block;font-family:var(--fb);font-weight:600;font-size:24px;
  line-height:1.35;color:var(--p4-text);text-decoration:none;
  border-bottom:2px solid var(--p4-akzent);
}
.f4 .f4-ruf span{font-size:13.5px}

.f4 .f4-fragenliste{margin-top:28px;border-top:1px solid var(--p4-linie)}
.f4 .f4-frage{border-bottom:1px solid var(--p4-linie)}
.f4 .f4-frage summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;
  justify-content:space-between;gap:18px;padding:16px 0;min-height:48px;
  font-family:var(--fd);font-weight:400;font-size:18px;line-height:1.32;
  color:var(--p4-text);
}
.f4 .f4-frage summary::-webkit-details-marker{display:none}
.f4 .f4-frage summary::marker{content:""}
.f4 .f4-frage summary i{flex:none;width:14px;height:14px;margin-top:7px;position:relative}
.f4 .f4-frage summary i::before,.f4 .f4-frage summary i::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:1.6px;
  background:var(--p4-text);transition:transform 260ms var(--p4-e);
}
.f4 .f4-frage summary i::after{transform:rotate(90deg)}
.f4 .f4-frage[open] summary i::after{transform:rotate(0deg)}
.f4 .f4-frage p{margin:0;padding:0 32px 20px 0;font-size:15.5px;line-height:1.65;
  color:var(--p4-leise);max-width:72ch}
@keyframes f4-auf{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.f4 .f4-frage[open] > p{animation:f4-auf 240ms var(--p4-e) both}

/* =========================================================================
   TEIL A · 10 — SCHLUSS (Tintenfeld)
   Zweiter und letzter Farbwechsel. Das Papierblatt liegt auf der Tinte.
   ========================================================================= */

.f4 .f4-schluss{background:var(--p4-ink);color:var(--p4-auf-ink);padding:58px 0 66px}
.f4 .f4-schluss h2{color:var(--p4-auf-ink);margin-top:16px}
.f4 .f4-schluss .f4-sub{color:var(--p4-auf-ink-leise)}
.f4 .f4-schluss .f4-klein--hell a{color:var(--p4-auf-ink)}

.f4 .f4-blatt--schluss{
  margin:30px 0 0;padding:24px 20px 26px;background:var(--p4-blatt);
  border:1px solid rgba(0,0,0,.22);box-shadow:var(--p4-fern-ink);
}

/* =========================================================================
   TEIL A · AKTIONSBAND
   motion.js setzt [hidden], sobald #formular im Blick ist — beim Laden ist es
   das nicht, das Band steht also ab Pixel 1. Gewollt: von der ersten Sekunde
   an gibt es genau EINEN Weg ins Feld.
   Hoehenbudget: 10 + 48 + 10 = 68 px plus safe-area.
   Links zweizeilig, „kostenlos" ZUERST; der Preis steht in der zweiten Zeile.
   Bisher rief das Band 490 € in 20 px und verschwieg das Wort kostenlos.
   ========================================================================= */

.f4 .f4-band{
  position:fixed;left:0;right:0;bottom:0;z-index:85;
  display:flex;align-items:center;gap:14px;
  background:var(--p4-ink);color:var(--p4-auf-ink);
  padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--p4-linie-ink);
  box-shadow:0 -16px 34px -20px rgba(0,0,0,.7);
}
.f4 .f4-band[hidden]{display:none}
.f4 .f4-band-wort{
  min-width:0;font-size:11.5px;line-height:1.25;color:var(--p4-auf-ink-leise);
  white-space:normal;
}
.f4 .f4-band-wort b{display:block;font-family:var(--fb);font-size:15px;
  font-weight:600;line-height:1.3;color:var(--p4-auf-ink)}
.f4 .f4-band-knopf{
  margin-left:auto;flex:0 0 auto;min-height:48px;padding:0 20px;font-size:15px;
  background:var(--p4-papier);color:var(--p4-ink);
}
.f4 .f4-band-knopf:hover{background:#fff;transform:none}

/* =========================================================================
   TEIL B — ab 700 px (grosses Handy quer, Tablet)
   ========================================================================= */
@media (min-width:700px){

  body.f4{--rand:30px;--gutter:max(30px,calc((100vw - 1280px) / 2));font-size:17px}

  .f4 .f4-kick{font-size:11.5px;letter-spacing:.18em;gap:4px 12px}
  .f4 .f4-kick::before{width:28px}

  /* 1 · Erster Bildschirm — das Fenster wird ein Band, die Aufnahme bleibt
     bei fester Breite 390 px mittig darin, damit der Massstab 1,0 bleibt.
     1-px-Kante jetzt rundum. */
  /* 700 px Bandbreite = 640 Satz + 2x30 Rand; das Fenster blutet auf 700. */
  .f4 .f4-buehne{padding:26px var(--rand) 56px;
    width:min(100%,700px);margin-inline:auto}
  .f4 .f4-h1{font-size:clamp(38px,4.6vw,58px);line-height:1.05}
  .f4 .f4-fenster{
    margin:12px calc(var(--rand) * -1) 0;height:430px;
    border:1px solid var(--p4-linie);
    display:flex;justify-content:center;
  }
  .f4 .f4-fenster picture{width:390px;flex:none;height:100%}
  .f4 .f4-angebot{font-size:19px}
  .f4 .f4-blatt{padding:26px 26px 28px}
  .f4 .f4-blatt .f4-felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  /* 2 · Regal — zwei Spalten, einheitliches 16:10 aus der Rechneraufnahme.
     Die per-Datei gesetzten Hoehen/Ausschnitte gelten nur am Handy; hier
     zuruecksetzen, gleiche Spezifitaet wie .f4 .f4-k--*, spaeter im File. */
  .f4 .f4-regal{padding:66px 0 72px}
  .f4 .f4-kacheln{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:40px 30px;padding:0;
    width:min(100% - (var(--rand) * 2),var(--max));margin:34px auto 0;
  }
  /* --h/--op sind die je Datei gemessenen Handywerte; hier setzt das Raster die
     Hoehe. Gleiche Spezifitaet wie .f4 .f4-k--*, steht aber spaeter im File. */
  .f4 .f4-kachel{--h:auto;--op:0%;margin:0}
  .f4 .f4-kachel--gross{grid-column:span 2}
  .f4 .f4-kosten{padding:78px 0 74px}
  .f4 .f4-kosten-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    column-gap:clamp(32px,5vw,72px);align-items:start}
  .f4 .f4-kosten-kopf{position:sticky;top:calc(var(--p4-kopf) + 30px)}
  .f4 .f4-zahl:first-of-type{margin-top:0;border-top:0}
  .f4 .f4-zahl{grid-template-columns:auto minmax(0,1fr);column-gap:26px}

  .f4 .f4-fall{padding:76px 0 12px}
  .f4 .f4-fall-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    column-gap:clamp(32px,5vw,72px);align-items:start}
  .f4 .f4-fall-kopf{grid-column:1;grid-row:1/span 2}
  .f4 .f4-fall-liste{grid-column:2;grid-row:1;margin-top:6px}
  .f4 .f4-fall-schluss{grid-column:2;grid-row:2}

  .f4 .f4-kachel-fenster{margin:10px 0 0;aspect-ratio:16/10;border:1px solid var(--p4-linie)}
  .f4 .f4-einschub{grid-column:1/-1;margin:0}
  .f4 .f4-einschub-fenster{margin:0;border:1px solid var(--p4-linie)}

  /* 3 · Zaesur */
  .f4 .f4-zaesur{height:min(46vh,380px)}

  /* 4 · Ablauf */
  .f4 .f4-ablauf{padding:76px 0 80px}
  .f4 .f4-schritte li{grid-template-columns:auto minmax(0,1fr);gap:0 30px;padding:26px 0}
  .f4 .f4-schritte h3{font-size:21px}

  /* 5 · Gruende — zwei Spalten mit Haarlinie dazwischen */
  .f4 .f4-gruende{padding-bottom:80px}
  .f4 .f4-sechs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:0;margin-top:40px}
  .f4 .f4-sechs li{padding:22px 0;min-width:0}
  .f4 .f4-sechs li:nth-child(2n+1){padding-right:44px}
  .f4 .f4-sechs li:nth-child(2n){padding-left:44px;border-left:1px solid var(--p4-linie-fein)}

  /* 6 · Bringt */
  .f4 .f4-bringt{padding:74px 0 80px}
  .f4 .f4-lexikon > div{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);
    gap:0 44px;align-items:start;padding:24px 0}
  .f4 .f4-lexikon dd{margin-top:0}

  /* 7 · Stimmen */
  .f4 .f4-stimmen{padding:72px 0 78px}
  .f4 .f4-stimmenreihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  .f4 .f4-stimme--leit{grid-column:span 2}

  /* 8 · Preis */
  .f4 .f4-preis{padding:76px 0 84px}
  .f4 .f4-klar{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  .f4 .f4-klar b{font-size:clamp(46px,6vw,74px)}

  /* 9 · Fragen */
  .f4 .f4-fragen{padding:74px 0 80px}
  .f4 .f4-frage summary{font-size:20px;padding:20px 0}

  /* 10 · Schluss */
  .f4 .f4-schluss{padding:74px 0 82px}
  .f4 .f4-blatt--schluss{padding:30px 32px 32px;margin-top:36px}
  .f4 .f4-blatt--schluss .f4-felder{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* =========================================================================
   TEIL C — ab 1000 px (Rechner)
   ========================================================================= */
@media (min-width:1000px){

  .f4 section[id]{scroll-margin-top:92px}
  .f4 #betrieb{scroll-margin-top:98px}
  body.f4{--p4-kopf:77px}

  /* -------------------------------------------------- Kopf: Marke + Ort */
  .f4 .kopf-karte{padding:16px 0;gap:22px}
  .f4 .kopf .marke{font-size:33px;margin-right:0}
  .f4 .kopf-ort{
    display:inline-flex;align-items:center;align-self:center;margin-right:auto;
    padding-left:18px;border-left:1px solid var(--p4-linie);
    font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--p4-leise);
  }
  .f4 .kopf-nav{display:flex;align-items:center;gap:28px}
  .f4 .kopf-nav a{
    display:inline-flex;align-items:center;min-height:44px;
    font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:var(--p4-leise);text-decoration:none;
    border-bottom:1.5px solid transparent;
    transition:color var(--p4-dur) var(--p4-e),border-color var(--p4-dur) var(--p4-e);
  }
  .f4 .kopf-nav a:hover{color:var(--p4-text);border-bottom-color:var(--p4-akzent)}
  .f4 .kopf-tat{font-size:13.5px}
  .f4 .burger{display:none}
  .f4.ist-geschrumpft .kopf-karte{padding-block:10px}

  /* ---------------------------------------- 1 · Erster Bildschirm (Raster)
     Spaltenlinien: 1 | Rand | 2 | Satz (1fr) | 3 | Naht 60px | 4 | Bild 40vw | 5
     Satz und Fenster liegen wie in der Anleitung formal in 2/4 und 3/5, teilen
     sich also die Nahtspalte. Damit trotzdem NICHTS auf dem Beweis liegt,
     bekommt die Satzspalte 84 px Innenabstand rechts (Blatt 88 px, weil sein
     Schatten rund 22 px weit reicht): der Satz endet 24 px, das Blatt 28 px vor
     der Bildkante. Die harte senkrechte Kante ist die Tiefe dieser Seite —
     kein ueberlappendes Blatt, kein Schatten auf dem Bild, kein Gehaeuse. */
  .f4 .f4-buehne{
    display:grid;padding:0;width:auto;margin-inline:0;
    grid-template-columns:var(--gutter) minmax(0,1fr) 60px minmax(0,40vw);
    align-items:stretch;
  }
  /* 3,7vw statt 4vw: bei 1000 px Breite bleiben der Satzspalte 426 px, „Ihre
     Arbeit sieht jeder." misst in Fraunces bei 37 px rund 348 px. Eine Stufe
     groesser bricht die erste Zeile um und macht aus zwei Zeilen drei. */
  .f4 .f4-h1{grid-column:2 / 4;grid-row:1;font-size:clamp(34px,3.7vw,52px);
    padding:72px 84px 0 0;align-self:end}
  .f4 .f4-angebot{grid-column:2 / 4;grid-row:2;padding-right:84px;
    margin-top:22px;font-size:20px;max-width:38ch}
  .f4 .f4-blatt--hero{grid-column:2 / 4;grid-row:3;margin:28px 88px 84px 0;
    padding:28px 30px 30px}
  .f4 .f4-beweis{
    grid-column:3 / 5;grid-row:1 / 4;min-width:0;margin:0;
    display:flex;flex-direction:column;justify-content:center;
    padding:72px 0 84px;
  }
  .f4 .f4-beweis .f4-beleg{margin:0 0 8px}
  .f4 .f4-fenster{
    margin:0;height:auto;flex:1 1 auto;min-height:min(64vh,520px);
    display:block;border:1px solid var(--p4-linie);
  }
  .f4 .f4-fenster picture{width:100%;flex:none;height:100%}
  /* Der linke Teil der Rechneraufnahme traegt Schlagzeile und Knopf. */
  .f4 .f4-fenster img{object-position:0 0}
  .f4 .f4-beweis .f4-domain{margin:10px 0 0}

  /* -------------------------------------------------------- 2 · Regal */
  .f4 .f4-regal{padding:92px 0 100px}
  .f4 .f4-regal-kopf h2{max-width:17ch}
  /* Die Zaehlleiste ist eine Handy-Hilfe. Am Rechner stehen drei Kacheln
     nebeneinander, eine mitzaehlende Zeile haette keinen Bezug mehr. */
  .f4 .f4-zaehler{display:none}
  .f4 .f4-kacheln{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 34px;margin-top:46px}
  .f4 .f4-kachel--gross{grid-column:span 2}

  /* ------------------------------------------------------- 3 · Zaesur */
  /* Bildausschnitt gerechnet, nicht geraten: Quelle 3:2 (1600x1067). 26 %
     haelt den Dachdecker von 1000 bis 1920 px Breite im Bild und schneidet
     den Himmel weg. Hoeher als 30 % faellt er bei 1920 aus dem Bild. */
  .f4 .f4-zaesur{height:min(58vh,520px)}
  .f4 .f4-zaesur img{object-position:50% 26%}

  /* ------------------------------------------------------- 4 · Ablauf */
  .f4 .f4-ablauf{padding:100px 0 104px}
  .f4 .f4-ablauf-raster{
    display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);
    gap:0 72px;align-items:start;
  }
  .f4 .f4-ablauf-kopf{position:sticky;top:110px}
  .f4 .f4-ablauf-kopf .formular-beweis{
    margin-top:30px;padding-top:0;border-top:0;
    border:1px solid var(--p4-linie);background:var(--p4-blatt);
    box-shadow:var(--p4-nah);
  }
  .f4 .f4-ablauf-kopf .formular-beweis a{
    display:block;padding:18px 20px 20px;font-size:14.5px;line-height:1.45;
    font-weight:600;color:var(--p4-text);text-decoration:none;
  }
  .f4 .f4-ablauf-kopf .formular-beweis a::after{
    content:"";display:block;width:28px;height:2px;margin-top:14px;
    background:var(--p4-akzent);transition:width 320ms var(--p4-e);
  }
  .f4 .f4-ablauf-kopf .formular-beweis a:hover::after,
  .f4 .f4-ablauf-kopf .formular-beweis a:focus-visible::after{width:72px}
  .f4 .f4-schritte{margin-top:0}
  .f4 .f4-schritte li{grid-template-columns:auto minmax(0,1fr);gap:0 40px;padding:32px 0}
  .f4 .f4-schritte b{font-size:16px}
  .f4 .f4-schritte h3{font-size:23px}
  .f4 .f4-schritte p{font-size:16px}

  /* ------------------------------------------------------ 5 · Gruende */
  .f4 .f4-gruende{padding:0 0 100px}
  .f4 .f4-gruende-oben{
    display:grid;align-items:center;padding-top:92px;
    grid-template-columns:var(--gutter) minmax(0,1fr) 110px minmax(0,52vw);
  }
  /* Bild in Spalte 4, Satz in Spalte 2: die 110-px-Spalte dazwischen ist ein
     echter Abstand, kein geteilter Ueberlappungsraum. Auf dem Beweis liegt
     nichts — dieselbe Regel wie im ersten Bildschirm. */
  .f4 .f4-gruende-bild{grid-column:4 / 5;grid-row:1}
  .f4 .f4-gruende-bild figcaption{margin:14px 0 0;padding-left:0}
  .f4 .f4-gruende-kopf{
    grid-column:2 / 3;grid-row:1;position:relative;z-index:3;
    width:auto;margin:0;border-top:0;padding:0;
  }
  .f4 .f4-gruende-kopf h2{max-width:15ch}
  .f4 .f4-sechs{margin-top:60px}
  .f4 .f4-sechs li{padding:26px 0}
  .f4 .f4-sechs li:nth-child(2n+1){padding-right:70px}
  .f4 .f4-sechs li:nth-child(2n){padding-left:70px}
  .f4 .f4-sechs b{font-size:18px}

  /* ------------------------------------------------------- 6 · Bringt */
  .f4 .f4-bringt{padding:96px 0 100px}
  .f4 .f4-lexikon > div{grid-template-columns:minmax(0,340px) minmax(0,1fr);
    gap:0 60px;padding:30px 0}
  .f4 .f4-lexikon dt{font-size:24px}

  /* ------------------------------------------------------ 7 · Stimmen */
  .f4 .f4-stimmen{padding:96px 0 100px}
  .f4 .f4-stimmen-raster{
    display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
    gap:0 88px;align-items:start;
  }
  .f4 .f4-stimmenreihe{margin-top:0}

  /* -------------------------------------------------------- 8 · Preis */
  .f4 .f4-preis{padding:100px 0 106px}
  .f4 .f4-klar{gap:52px}
  .f4 .f4-klar b{font-size:clamp(56px,5.4vw,76px)}
  .f4 .f4-preis-unten{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 88px;
    margin-top:64px;padding-top:44px;
  }
  .f4 .f4-preis-kopf h2{max-width:15ch}

  /* ------------------------------------------------------- 9 · Fragen */
  /* Zusaetzlicher Fussraum: darin liegt das Blatt des Schlussabschnitts. */
  .f4 .f4-fragen{padding:96px 0 180px}
  .f4 .f4-fragen-raster{
    display:grid;grid-template-columns:minmax(0,350px) minmax(0,1fr);
    gap:0 88px;align-items:start;
  }
  .f4 .f4-fragen-kopf{position:sticky;top:118px}
  .f4 .f4-fragenliste{margin-top:0}
  .f4 .f4-frage summary{font-size:21px;padding:22px 0}

  /* ----------------------------------------------------- 10 · Schluss */
  .f4 .f4-schluss{padding:92px 0 98px}
  .f4 .f4-schluss-raster{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);
    gap:0 88px;align-items:start;
  }
  .f4 .f4-schluss-wort{padding-top:8px}
  .f4 .f4-schluss-wort .f4-klein--hell{margin-top:28px;padding-top:20px;
    border-top:1px solid var(--p4-linie-ink-fein)}
  .f4 .f4-blatt--schluss{margin-top:-182px;padding:34px 36px 36px}

  /* Das feste Band ist eine Handy-Hilfe; am Rechner steht der Kopf-Knopf. */
  .f4 .f4-band{display:none}
  /* Der Burger ist ab hier aus; ein zuvor geoeffnetes Feld darf nicht stehen bleiben. */
  .f4 .panel{display:none}
}

/* =========================================================================
   TEIL D — ab 1280 px (voller Satzspiegel)
   ========================================================================= */
@media (min-width:1280px){
  body.f4{font-size:17.5px}
  .f4 .f4-h1{padding-top:84px}
  .f4 .f4-beweis{padding:84px 0 96px}
  .f4 .f4-blatt--hero{margin-bottom:96px}
  .f4 .f4-regal{padding:108px 0 116px}
  .f4 .f4-gruende-oben{padding-top:108px}
}

/* =========================================================================
   TEIL E — BEWEGUNGSREDUKTION, HOVER UND OVERRIDES (immer ganz am Ende)
   Hier steht alles, was eine max-width-Query braucht. Eine nackte Regel nach
   einer max-width-Query wuerde auf ALLEN Breiten gewinnen (FEHLER-019) —
   deshalb steht ab hier nichts Nacktes mehr.
   ========================================================================= */

/* Drei Bildbewegungen sind ersatzlos gestrichen: die Hero-Einfahrt aus 1,055,
   die Hero-Parallaxe ueber #hero-fenster und der Ken-Burns-Zug auf der Zaesur.
   Eine Bildschirmaufnahme, die sich bewegt, ist ein Effekt an einem
   Beweisstueck und untergraebt genau das, was sie beweisen soll.
   Es bleibt: der 16-px-Reveal und die Zaehlleiste (die nur Text wechselt). */
@media (prefers-reduced-motion:reduce){
  .f4 .f4-knopf::after{transition:none}
  .f4 .f4-frage summary i::before,.f4 .f4-frage summary i::after{transition:none}
  .f4 .f4-frage[open] > p{animation:none}
  .f4 .panel,.f4 .panel.ist-offen{transition:none}
  .f4 .f4-ablauf-kopf .formular-beweis a::after{transition:none}
}

/* Zeigegeraete ohne Hover (Handy): keine Hover-Zustaende einfrieren lassen. */
@media (hover:none){
  .f4 .f4-knopf:hover{background:var(--p4-ink);box-shadow:var(--p4-nah);transform:none}
  .f4 .f4-band-knopf:hover{background:var(--p4-papier)}
  .f4 .f4-knopf:hover::after{transform:scaleX(0)}
}

/* Die Ankuendigungsleiste kostete am Handy ~50 px ueber der Falz fuer einen
   Satz, den jeder als Ankuendigungsbalken ueberliest (app.css:102 nimmt nur
   `p:last-child` weg). Der Satz lebt weiter im Angebotssatz bei 537 px und im
   Aktionsband. Unter 620 px also ganz aus — die 672-px-Rechnung haengt daran. */
@media (max-width:619px){
  .f4 .rail{display:none}
}

/* Ohne diese Zeile deckt das feste Band das Impressum ab. */
@media (max-width:999px){
  .f4 .fuss{padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom))}
}