/* ergaenzung.css — Korrekturen am Claude-Design-Export (Relaunch 01.10.2026). baue.mjs haengt die Datei an
   jede Seite als letztes Stylesheet; so ueberlebt sie einen neuen Import (importiere-design.mjs
   ueberschreibt neu*.css). Jede Regel hat einen gemessenen Grund, die Barrierefreiheitserklaerung
   verspricht 320 px Breite ohne waagerechtes Scrollen. */

/* Rechtsseiten: Die breiten Tabellen (Datenschutz, AVV) scrollen in ihrem Kasten, statt die Seite auf
   451 bzw. 507 px zu verbreitern. Der Kasten stand schon im Quelltext, nur ohne Regel. */
.doc__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* Terminseite: termin.css zieht den Kalender fuer das alte, breitere Polster mit negativem Rand nach
   aussen; im neuen Handy-Layout ragte er bei 320 px 6 px ueber den Bildschirm. */
@media(max-width:760px){.cal{margin-left:0;margin-right:0}}

/* Lange Knopftexte (/bewerten: „Text kopieren und bei Google bewerten“) brechen auf sehr schmalen
   Handys um, statt ueber den Rand zu laufen. */
@media(max-width:380px){.btn{white-space:normal;text-align:center;height:auto;padding-top:12px;padding-bottom:12px}}

/* Bewegung reduzieren: Die Erklaerung verspricht keinen weichen Bildlauf und keine Einblend- oder
   Uebergangsanimationen. Der Export nahm nur den Online-Punkt und das Foto-Leuchten aus; Projekt-Slider
   (.sl, .sc) und Uebergaenge liefen weiter (Pruefer 01.10.2026). */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* Tippziele 44 x 44 auf Touch-Geraeten in Kopfzeile, Navigationen und bei den Symbolknoepfen im Fuss.
   Gemessen vorher: Termin-Knopf 42, Wortmarke 26, Kopf-Navigation 18 (Tablet), Navigation der
   Rechtsseiten 34, Fuss-Symbole 40 px. */
@media (pointer:coarse){
  .nk .brand,.nk .nkL a,.nk .skip{display:inline-flex;align-items:center;min-height:44px}
  .nk .nkL a{min-width:44px;justify-content:center}
  .nk .nkBook{min-height:44px}
  nav a{min-height:44px;box-sizing:border-box}
  .sib a{display:inline-flex;align-items:center}
  .toc a{display:flex;align-items:center}
  .nf2 .ico{min-width:44px;min-height:44px}
}

/* Startseite, erster Bildschirm ab 761 px (Userwunsch 01.10.2026): Der Hero passt sich dem Bildschirm an
   und endet an der Unterkante mit der Referenzleiste „Diese Betriebe vertrauen uns“. Handy hochkant und
   quer regelt der eigene Mobil-Abschnitt (Aufteilung Desktop/Mobil vom 01.10.).
   Gemessen vorher: min(860px, 100svh - 76px) liess die Leiste auf 1280x720, 1366x657 und 1536x730 unter
   der Kante; ab 940 px Hoehe ragte das Portraet 50 px unter die Leiste und die naechste Sektion schaute
   herein; die Bildunterschrift lag auf jedem Desktop hinter Verlauf und Leiste. */
@media (min-width:761px){
  /* --u ist 1px, solange die Hoehe fuer den Entwurf reicht (ab etwa 820 px). Darunter schrumpfen
     Abstaende und Ueberschrift im selben Verhaeltnis, hoechstens bis 0,4: so passt alles bis etwa
     490 px Fensterhoehe (bis 1119 px Breite 525 px); noch flacher waechst der Hero ueber die Kante. */
  .hero{--u:clamp(.4px,calc((100svh - 280px) / 540),1px);min-height:calc(100svh - 76px);overflow:clip}
  .hero .copy{padding-top:calc(56 * var(--u));padding-bottom:calc(56 * var(--u))}
  .hero .badge{margin-bottom:calc(30 * var(--u))}
  .hero h1{font-size:clamp(28px,min(5.2vw,calc(70 * var(--u))),70px)}
  .hero .checks{margin-top:calc(34 * var(--u));gap:calc(13 * var(--u))}
  .hero .row{margin-top:calc(44 * var(--u))}
  .hero .trust{padding-top:calc(34 * var(--u));padding-bottom:calc(40 * var(--u))}
  .hero .fadeB{height:calc(300 * var(--u))}
  /* Das Foto sitzt in der oberen Grid-Zeile (1/1/2/2: mit offener Endlinie reicht ein absolutes
     Grid-Kind bis zum Containerrand) und endet wie im Entwurf 172 px unter der Leistenoberkante;
     overflow:clip schneidet ab, was darunter hervorschaute. Der Deckel von 1000 px haelt das Gesicht
     auf grossen Bildschirmen von der Ueberschrift fern (geschaetzt, Haaransatz bei 30 % der Fotobreite:
     98 px Luft, mit 1100 px nur 46; auf hochkant gedrehten Monitoren rueckte der Kopf an die Knoepfe).
     Ohne eigenen z-index liegt die Bildunterschrift (z 4) ueber Verlauf und Leiste statt dahinter. */
  .hero .foto{grid-area:1/1/2/2;top:auto;bottom:-172px;height:min(calc(100% + 182px),1000px);z-index:auto}
  .hero .ap{bottom:198px}
}
/* Bis 1110 px Breite bricht die Referenzleiste zweizeilig um (gemessen 166 statt 122 px). */
@media (min-width:761px) and (max-width:1119px){.hero{--u:clamp(.4px,calc((100svh - 324px) / 540),1px)}}

/* Hero-Portraet: Beim Ueberfahren leuchtet der Hintergrund hinter Alexander orange auf, im Glow der
   Seite (radialer Verlauf in --glow wie bei „Ueber mich“). Der Textblock liegt ueber der ganzen oberen
   Zeile und finge die Maus sonst ab; deshalb reagieren nur seine Inhalte auf den Zeiger, Ueberschrift,
   Punkte und Knopfzeile nur so breit wie ihr Inhalt (bei 1024 px lag das Gesicht sonst unter dem leeren
   h1-Kasten, bei 1920 px der Oberkoerper 164 px breit unter der Knopfzeile). */
@media (hover:hover) and (min-width:761px){
  .hero .copy,.hero .fadeB{pointer-events:none}
  .hero .copy>*{pointer-events:auto}
  .hero h1,.hero .checks,.hero .row{width:fit-content}
  .hero .foto::before{content:"";position:absolute;inset:0 -12%;background:radial-gradient(50% 44% at 50% 40%,rgba(var(--glow),.42),transparent 72%);opacity:0;transform:scale(.9);transition:opacity .5s,transform .9s cubic-bezier(.2,.7,.2,1)}
  .hero .foto:hover::before{opacity:1;transform:none}
}