:root{ --paper:#F7F5F1; --beige:#EEE9E1; --ink:#171717; --stone:#6B665F /* war #6F6A63: auf Beige nur 4.44:1, damit unter der AA-Schwelle. 4.71:1, optisch nicht unterscheidbar */; --line:#E6E1D9; --accent:#068649; }
    *,::before,::after{ border-color:var(--line); }
    body{ font-family:'Inter',sans-serif; background:var(--paper); color:var(--ink); font-size:1.0625rem; line-height:1.6; }
    .font-display,.t-hero,.t-title{ font-family:'Inter Tight',sans-serif; }
    .t-hero{ font-weight:600; letter-spacing:-.035em; line-height:.98; font-size:clamp(2.4rem, 5vw, 4.5rem); overflow-wrap:break-word; }
    .t-title{ font-weight:600; letter-spacing:-.02em; line-height:1.08; font-size:clamp(1.55rem, 3.6vw, 3rem); overflow-wrap:break-word; }
    .t-lead{ font-size:clamp(1.1rem, 1.6vw, 1.35rem); line-height:1.5; }
    /* Grid- und Flex-Kinder dürfen unter ihre Mindestbreite schrumpfen.
       Standard ist min-width:auto — dadurch schiebt ein langes Wort oder eine
       nicht umbrechbare Nummer die ganze Seite breiter als das Fenster
       (auf 320 px messbar). */
    .grid > *, .flex > *{ min-width:0; }

    /* ===== Zeilenumbrüche (v3.5) =====
       Überschriften sollen an inhaltlich sinnvollen Stellen brechen, nicht dort,
       wo die Zeile zufällig endet.
         text-wrap:balance  verteilt die Zeilen gleichmässig, statt ein Restwort
                            allein auf die letzte Zeile zu setzen.
         text-wrap:pretty   verhindert Schusterjungen im Fliesstext.
         hyphens:manual     KEINE automatische Trennung. Chrome trennt mit
                            deutschem Wörterbuch sonst auch Markennamen
                            («imo-fix.io») und an falschen Stellen
                            («Mie-terservice»). Getrennt wird nur an den
                            weichen Trennzeichen, die im Text stehen — und
                            auch nur dann, wenn die Zeile sonst nicht passt.
       Ältere Browser ignorieren text-wrap und brechen wie bisher. */
    h1, h2, h3, .t-hero, .t-title, .t-display, .punch-line, .bigos-h, .hp-claim{
      text-wrap:balance; -webkit-hyphens:manual; hyphens:manual;
    }
    .t-lead, p, li, figcaption, dd, .hp-trigger{ text-wrap:pretty; }

    .t-eyebrow{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); font-weight:500; }
    .num{ font-variant-numeric:tabular-nums; }
    .rule{ border-top:1px solid var(--line); }
    ::selection{ background:var(--beige); }
    html{ scroll-behavior:smooth; }
    @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
    /* Sprachumschalter: Zustand nicht nur über Farbe, sondern auch über Gewicht + Unterstreichung */
    /* Sprunglink: liegt ausserhalb des Bildschirms und erscheint beim Fokus.
       Fehlte auf dieser Seite, obwohl sie einen main-Bereich hat. */
    .skip-link{ position:absolute; left:1rem; top:-4rem; background:var(--ink); color:#fff;
                padding:.6rem 1rem; border-radius:9999px; z-index:100; transition:top .2s ease; }
    .skip-link:focus{ top:1rem; }
    .lang-opt{ padding:.35rem .15rem; min-height:44px; min-width:32px; color:var(--stone); background:none; border:0; cursor:pointer; font:inherit; font-size:.875rem; letter-spacing:.04em; transition:color .2s; }
    .lang-opt:hover{ color:var(--ink); }
    .lang-opt[aria-current="true"]{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:4px; }
    .lang-opt:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }