/* ============================================================
   eyedee – geteilte CSS-Ebene, KASKADEN-ENDE (alle 9 Seiten)
   Wird NACH dem Seiten-CSS geladen (zweiter <link> hinter dem
   <style>-Block). Enthält Regel 14/15 (mobile Verdichtung, inkl.
   E1: .subsec 3rem), Rev 7, Regel 16 und die Entscheidungen
   E2–E4. Audit: Segment CSS_SHARED_MOBILE in check_segments.py.
   ============================================================ */
/* ============================================================
   Regel 14 (Feinschliff Rev 6): MOBILE VERDICHTUNG
   Regel 15 (Feinschliff Rev 6): TOUCH-SCROLLER
   Rein additive Media-Queries am Ende der Kaskade - die
   Desktop-Darstellung (>1000px bzw. >700px) bleibt unberuehrt.
   ============================================================ */
/* Zertifikate (Rev 6): Hover-Zoom x3 laeuft ueberall per GSAP - die
   Transform-Transition wuerde die Inline-Transforms des Schwebe-Segments
   verschleppen (bekannte Erkenntnis), daher siteweit neutralisiert. */
.certs-row img{transition:box-shadow .25s ease}
.certs-row img.cert-zoom{position:relative;z-index:3;box-shadow:0 14px 30px -12px rgba(28,28,30,.45)}
@media (max-width:1000px){
  /* Regel 15: gepinnte Scroller werden auf Touch-Breiten nativ wischbar
     (JS setzt .touch-scroll und ueberspringt den Pin) */
  .touch-scroll .cases-track,.touch-scroll .mbh-track{
    overflow-x:auto;width:auto;max-width:100vw;
    /* Runde 18: -webkit-overflow-scrolling:touch entfernt - die Legacy-
       Eigenschaft erzeugte einen eigenen Scroll-Kontext, Verdacht fürs
       blockierte Vertikal-Scrollen über dem Track (Real-Device-Check). */
    /* Runde 19: scroll-snap entfernt - horizontale Snap-Container
       kapern auf iOS erfahrungsgemäß auch vertikale Gesten (zweiter
       Verdacht fürs blockierte Runterscrollen, Real-Device-Check). */
    scrollbar-width:none}
  .touch-scroll .cases-track::-webkit-scrollbar,
  .touch-scroll .mbh-track::-webkit-scrollbar{display:none}
  /* Runde 14: Real-Device-Härtung - horizontale Gesten gehören dem
     Track (pan-x) und werden nicht an die Seite durchgereicht. */
  .touch-scroll .cases-track,.touch-scroll .mbh-track{
    touch-action:pan-x pan-y;overscroll-behavior-x:contain}
  .touch-scroll .mbh-base{display:none}
}
/* Runde 13 (Tablet-Vereinheitlichung): das Spacing-Set (Regel 14/E1)
   gilt jetzt bis 1000px - die iPad-Abstände waren sonst Desktop-groß
   ("Abstand über Kontakt viel zu groß", Chris). */
@media (max-width:1000px){
  /* Blockabstaende pauschal verringert */
  .statement{padding:4.5rem 0 3.5rem}
  .services{padding:4rem 0 1.5rem}
  .quote{padding:4.5rem 0 2.5rem}
  .stats{padding:1rem 0 4rem}
  .contact{padding:4rem 0 3.5rem}
  .tsm{padding:4.5rem 0 3.5rem}
  .tsm-nav{margin-bottom:4.5rem}
  .tsm-list{gap:3rem}
  .cases-head{padding-top:3rem;padding-bottom:1.5rem}
  .cases-track{padding-bottom:2.5rem}
  .film{padding-bottom:1.5rem}
  .marquee-clip{padding:1.7rem 0}
  .footer{padding:3.5rem 0 2rem}
  .footer-grid{gap:2.2rem;padding-bottom:2.2rem}
  .subhero{padding:7rem 0 2.8rem}
  .subsec{padding:3rem 0}  /* E1 (07/2026): Standard-Sektionen mobil 3rem, siteweit */
  .mbh-head{padding-top:3.2rem;padding-bottom:1.4rem}
  .mbh-track{padding-bottom:3rem}  /* Runde 14: Luft unter dem Scroller (iPad) */
  .model{padding:4.5rem 0}
  .abgr{padding:4.5rem 0 2rem}
  .honest{padding:4rem 0 1.5rem}
  .faq{padding:4rem 0 1.5rem}
  .gp-band{padding:3rem 0}  /* Runde 14: auf E1-Blockstandard angehoben */
  .ls-dark{padding:4.5rem 0 3.5rem}
  .ls-layout{margin-top:2rem}
  .cta-band{margin:3rem 0 1.5rem}
  .flt{padding-top:4rem}
  .process{padding-top:2.5rem}
  /* Rezensionen: eine reicht (Chris: iPad wie iPhone) - geblaettert
     wird per Pfeilen, die Rotation laeuft durch alle fuenf Stimmen */
  .tsm-item:nth-child(n+2){display:none}
  .tsm-list{gap:0}
}
@media (max-width:700px){
  /* Buttons: mobil nur "Erstgespraech" */
  .btn-l{display:none}
  /* Kontaktformular: kompakter, Raender symmetrisch */
  .contact-grid{gap:2.4rem}
  .form{padding:1.5rem 1.15rem 1.3rem}
  .field{margin-bottom:1.1rem}
  /* Feedback Vereinheitlichung: BFSG-Button + Panel mobil nach RECHTS -
     links kollidierte der Button im Footer mit dem Copyright. Der
     Anruf-Button (nur bei offenem Overlay) rückt auf den freien Platz. */
  .a11y-btn{left:auto;right:18px}
  .a11y-panel{left:auto;right:18px}
  .nav-overlay a.nav-call{left:18px}
  /* Overlay-Navigation: kompakter (Logo/Moewe und Claim-Zeile entfernt) */
  .nav-overlay a{font-size:clamp(1.7rem,7.2vw,2.6rem);padding:.42rem 0}
  .ov-label{font-size:clamp(1.7rem,7.2vw,2.6rem);padding:.42rem 0 .15rem}
  .nav-overlay .ov-sub a{font-size:clamp(1.15rem,4.4vw,1.5rem);padding:.24rem 0}
}

/* ============================================================
   Feinschliff Rev 7: Overlay-Feinjustage, Kontakt-Anker,
   Kundenstimmen mobil, Seiten-Pan-Sperre.
   Rein additive Regeln am Ende der Kaskade.
   ============================================================ */
/* Kontakt/Erstgespraech landen direkt an der Ueberschrift -
   scroll-margin haelt den fixierten Header frei */
#kontakt{scroll-margin-top:clamp(5rem,11vh,6.5rem)}
@media (max-width:1000px){
  /* iPhone: die Seite laesst sich nicht mehr horizontal verschieben -
     die Wisch-Scroller (Regel 15) scrollen intern weiter */
  html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
  /* Overlay: Liste beginnt weiter oben, die Nummer sitzt unten mit Luft */
  .nav-overlay{justify-content:flex-start;
    /* Rev 10 (Chris): Menueinhalt einen Tick hoeher - unten mehr Raum */
    padding-top:clamp(3.9rem,9.5vh,5.2rem);
    /* Rev 9: unten die Zone des fixierten BFSG-Buttons freihalten (52px + 18px + Luft) -
       die Nummer sitzt dadurch OBERHALB des Buttons */
    padding-bottom:calc(78px + max(14px, env(safe-area-inset-bottom)))}
  .nav-overlay > a:last-of-type{border-bottom:0}  /* Linie ueber der Nummer weg */
  /* Rev 14 (Chris): Anruf-Button fix NEBEN dem BFSG-Button (18+52+12=82px) -
     die laengere Navigation schob die Nummer sonst wieder in dessen Zone */
  /* Rev 15.3: Selektor .nav-overlay a.nav-call - die allgemeine Overlay-
     Linkregel (.nav-overlay a, font-size clamp(2rem,8vw,3.4rem), Fraunces)
     hatte hoehere Spezifitaet und ueberschrieb die Buttongroesse; deshalb
     blieb die Nummer trotz Rev 15.1/15.2 unveraendert gross. */
  .nav-overlay a.nav-call{position:fixed;left:82px;bottom:18px;z-index:80;height:52px;
    padding:0 1.15rem;border-radius:26px;background:var(--brand);color:#fff;
    display:none;align-items:center;gap:.55rem;font-weight:600;
    font-family:var(--font-body);font-size:1rem;border-bottom:0;  /* Rev 15.5 (Chris): bewusst deutlich sichtbarer Schritt zum Kalibrieren */
    letter-spacing:.04em;box-shadow:0 12px 32px -12px rgba(215,14,84,.55)}
  body.nav-open .nav-overlay a.nav-call{display:inline-flex}
  .nav-overlay a.nav-call:hover{text-decoration:none;color:#fff}
}
@media (max-width:700px){
  /* englischer Hinweis rueckt dicht ans Formular */
  .contact-grid{gap:1.2rem}
  .contact-en{margin-top:1.2rem}
}
/* Feinschliff Rev 8: Footer-Gruppierung - etwas Luft zwischen der
   Hauptsitz-Zeile und der Telefonnummer */
.footer-address a[href^="tel:"]{display:inline-block;margin-top:.5rem}

/* ============================================================
   Regel 16 (Feinschliff Rev 10): MOBILE PERFORMANCE
   Rein additiv <=1000px - Desktop unberuehrt.
   ============================================================ */
@media (max-width:1000px){
  /* 1. Bleistift-Filter aus: feTurbulence/feDisplacementMap zwingt
     WebKit zu staendigem Neu-Rastern (teuerster Posten). Die Linien
     wirken minimal glatter - auf Displaygroesse kaum sichtbar. */
  [filter^="url"]{filter:none}
  /* 2. Header-Blur aus: backdrop-filter auf fixiertem Element
     erzwingt auf iOS einen Repaint pro Scroll-Frame. */
  .site-head.scrolled{backdrop-filter:none;background:rgba(251,250,247,.96)}
}

/* ============================================================
   VEREINHEITLICHUNG (07/2026) – Entscheidungen E2, E3, E4.
   E1 steht in Regel 14 (.subsec mobil 3rem). E5: Startseite behält
   ihre bewusst engeren Werte (HOME-ONLY-Block der Startseite).
   E6: Mitreden->Kontakt (insights/artikel) bleibt dokumentierter
   Sonderfall im Seiten-CSS. Muster übernommen aus Bundle 4.
   ============================================================ */
@media (max-width:1000px){
  /* E2 – Subhero-Grafik: klein, rechtsbündig, ÜBER dem ersten Text
     (Runde 13: gilt bis 1000 - auf dem iPad "wie überall", Chris) */
  .subhero-grid{grid-template-columns:1fr}
  .subhero-grid .lm-scene{order:-1;min-height:0;width:50%;max-width:188px;margin:0 0 .1rem auto}
  .subhero-grid .lm-scene svg{position:static;width:100%;height:auto}
  /* E4 – Kontakt-Kopf: Eyebrow dichter an der Überschrift (Desktop bleibt 1.4rem) */
  .contact .eyebrow{margin-bottom:.5rem}
  .contact h2{margin-top:.6rem}
}
@media (max-width:760px){
  /* E3 – Kennzahlen-Band: zweispaltig (nur Phone; Tablet: eine Reihe, s.u.) */
  .stats-band{gap:1.6rem 1rem}
  .stat{flex:0 1 calc(50% - .5rem)}
}
/* Runde 13 – TABLET-BAND (701-1000): Elemente mit genug seitlichem
   Platz bleiben nebeneinander (Chris-Prinzip). */
@media (min-width:701px) and (max-width:1000px){
  /* Runde 25 (Chris, iPad): +20px Luft unter dem ersten Block (Subhero),
     siteweit - z. B. Beratung wirkte zu dicht auf der Folgesektion */
  .subhero{padding-bottom:4.05rem}
  /* Kennzahlen (Startseite + Agentur): die vier in EINER Reihe */
  .stats-band{flex-wrap:nowrap;gap:1.6rem 1.2rem}
  .stat{flex:1 1 0;min-width:0}
  /* Hero-Trust (Startseite): eine Reihe; das vierte Badge
     ("Antwort < 24h") entfällt auf dem Tablet (Chris-Entscheid). */
  .trust{display:flex;flex-wrap:nowrap;gap:.5rem}
  .badge{font-size:.72rem;padding:.45rem .6rem;white-space:nowrap;min-width:0}
  .trust .badge:last-child{display:none}
  /* Runde 14 (Chris): Subhero ZWEISPALTIG - kleine Szene rechts, der
     Text rückt daneben hoch (statt Luft oben links). Überschreibt die
     E2-Stapelung nur in diesem Band; Phone bleibt gestapelt. */
  .subhero-grid{grid-template-columns:minmax(0,1fr) minmax(150px,188px);
    align-items:start;gap:1.2rem 2.2rem}
  /* Runde 15 (Chris): Textspalte ~100px tiefer - bewusster Versatz zur
     kleinen Szene oben rechts, statt beides buendig oben. */
  .subhero-grid > :not(.lm-scene){margin-top:100px}
  .subhero-grid .lm-scene{order:2;width:100%;max-width:none;margin:.4rem 0 0}
  /* Runde 14 (Chris): Zitat-Element - Foto und Text nebeneinander */
  .quote-grid{grid-template-columns:.75fr 1.25fr;gap:2.5rem;align-items:center}
  /* Runde 14 (Vorschlag im Chris-Prinzip): Leistungs-Karten 2x2 */
  .svc-grid{grid-template-columns:1fr 1fr}
}

/* ===== Artikel-/Text-Template mobil (Schritt 4, geteilt; Runde 13: bis 1000) ===== */
@media (max-width:1000px){
  .art{padding-block:7rem 1.5rem}  .art-contact-sep{height:1.5rem;margin-top:1rem}  .backlink{margin-bottom:1.6rem}  .art-body,.art .teaser{max-width:100%}
}

/* ============================================================
   Trust-Badges im Startseiten-Hero (08.07., Chris): mobil als
   2x2-Raster statt Flatterzeilen; alle vier Kacheln gleich hoch,
   kompaktere Polster, kleineres Siegel. .trust/.badge existieren
   nur im Hero (HOME-ONLY) - wirkt also nur auf der Startseite.
   ============================================================ */
@media (max-width:700px){
  .trust{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
    gap:.55rem;margin-top:2.6rem}
  .badge{justify-content:flex-start;align-items:center;
    padding:.55rem .7rem;font-size:.76rem;line-height:1.35}
  .badge-seal{padding:.42rem .7rem .42rem .55rem}
  .seal{width:34px;height:34px}
}

/* Trust-Reihe im Formular (Runde 12): mobil untereinander */
@media (max-width:760px){
  .form-trust{flex-wrap:wrap;flex-direction:column;align-items:flex-start;gap:.45rem}
}

/* ============================================================
   Runde 18 (Chris): iPad-/iPhone-Feinschliff.
   Rein additive Regeln am Ende der Kaskade.
   ============================================================ */
@media (max-width:1000px){
  /* Overlay kompakter: Zeilenabstand runter, keine Linie unter "Kontakt".
     Runde 19: deutlich enger - der erste Schritt lag nur ~2 px über dem
     Phone-Bestand und war praktisch unsichtbar. */
  .nav-overlay a{padding:.12rem 0}
  .ov-label{padding:.12rem 0 .05rem}
  .nav-overlay .ov-sub a{padding:.08rem 0}
  /* Runde 19b: strukturell statt per href - der Testordner schreibt
     hrefs um (kontakt.html), dadurch griff die href-Regel dort nie.
     Kontakt ist überall der vorletzte Direktlink (nav-call zuletzt). */
  .nav-overlay > a:nth-last-of-type(2){border-bottom:0}
  /* Anker "Leistungen": die Eyebrow lag ein paar Pixel unterm fixierten Header */
  #leistungen{scroll-margin-top:88px}
  /* Kontaktblock: Abstand Formular <-> EN-Hinweis einheitlich deutlich kleiner */
  .contact-grid{gap:1rem}
  .contact-en{margin-top:.5rem}
  /* FAQ-Möwen: höher - sie flogen durch die Überschrift; Chris R40: noch
     ein Hauch hoeher, sie beruehrten auf iPhone/iPad die Eyebrow */
  .faq-gull{top:-30px}
  /* Wisch-Hinweis für Touch-Scroller (JS: kleiner Block vor </body>):
     Karten dimmen kurz, gezeichneter Links-Rechts-Pfeil in Magenta */
  .touch-scroll{position:relative}
  .touch-scroll .mb-card,.touch-scroll .case{transition:opacity .35s ease}
  .ts-dim .mb-card,.ts-dim .case{opacity:.32}
  .ts-hint{position:absolute;left:0;right:0;top:0;height:100%;display:grid;place-items:center;
    pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:6} /* Chris R38: JS setzt top/height auf die Track-Spanne */
  .ts-hint.on{opacity:1}
  .ts-hint svg{width:min(340px,80vw);height:auto;color:var(--brand);
    filter:drop-shadow(0 10px 26px rgba(215,14,84,.3))}  /* Runde 19: ~3x */
}
@media (min-width:701px) and (max-width:1000px){
  /* Subhero-Grafiken oben rechts ~50% größer (Chris, iPad) */
  .subhero-grid{grid-template-columns:minmax(0,1fr) minmax(220px,282px)}
}
@media (max-width:700px){
  /* BFSG-Button wieder nach links (Chris); Panel folgt, der Anruf-Button
     (nur bei offenem Overlay) rückt zurück neben den Button (left 82).
     Hinweis: die Rechts-Verlegung kam einst von der Copyright-Kollision
     im Footer - bei Bedarf dort gegensteuern. */
  .a11y-btn{left:18px;right:auto}
  .a11y-panel{left:18px;right:auto}
  .nav-overlay a.nav-call{left:82px}
  /* FAQ: Überschrift näher am ersten Punkt */
  .faq-list{margin-top:1.7rem}
  /* Artikel-/Rechtsseiten: Grau-Kante näher am Kontaktblock (~15px) */
  .art-contact-sep{height:.5rem}
  /* Projekte, Einblicke: oben ~40px weniger, unterhalb ~20px weniger */
  .flt{padding-top:1.5rem}
  .flt ~ .contact{padding-top:2.75rem}  /* zwischen flt und contact liegt die Lightbox */
}

/* Runde 20b (Chris): Overlay auf dem iPad >20 % kürzer - die
   Typo-Verkleinerung galt bisher nur <=700, im Tablet-Band liefen die
   Zeilen mit Desktop-Größe (3.4rem). */
@media (min-width:701px) and (max-width:1000px){
  .nav-overlay a{font-size:clamp(1.6rem,4.2vw,2.2rem)}
  .ov-label{font-size:clamp(1.6rem,4.2vw,2.2rem)}
  .nav-overlay .ov-sub a{font-size:clamp(1.05rem,2.6vw,1.35rem)}
  .nav-overlay a.nav-call{font-size:1rem}  /* Anruf-Button behält Buttongröße */
}

/* Kundenlogo-Band mobil (Runde 21) */
@media (max-width:1000px){
  .logoband{padding:3rem 0 2.6rem}
  .lb-set img{height:34px;max-width:150px}
  .lb-set{gap:2rem;padding-right:2rem}
}

/* Chris R40: iPad-Querformat (coarse, >1000px) - FAQ-Moewen hoeher,
   sie beruehrten die Eyebrow (Desktop-Basis top:34px bleibt fuer Maus). */
@media (min-width:1001px) and (max-width:1366px) and (pointer:coarse){
  .faq-gull{top:10px}
}