/* ============================================================ base.css – Reset, Typo-Basis, Barrierefreiheit, Layout-Hülle Wird global geladen. Abhängig von tokens.css. ============================================================ */ /* ----- Reset / Basis (global, in aller Templates) ----- */ *{box-sizing:border-box;font-weight:400!important;font-style:normal!important} h1,h2,h3,.h1,.wordmark{font-family:var(--font-head);text-wrap:balance} p{text-wrap:pretty} html{scroll-behavior:smooth} body{margin:0;background:var(--bg0);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip} img{max-width:100%} ::selection{background:var(--orange);color:#fff} /* Dunkle Sektionen erben weißen Text (Ersatz für das [data-root] des Original-Designs). */ .on-dark{color:#fff} /* ----- Barrierefreiheit (global) ----- */ /* .visually-hidden – nur für Screenreader sichtbarer Text (z. B. Hotspot-Beschriftungen). */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* .skip-link – „Zum Inhalt springen", erstes Element in header.php. */ .skip-link{position:absolute;left:-624.9375rem;top:0;background:#1D1D1D;color:#fff;padding:.75rem 1rem;z-index:1000;font-weight:600;text-decoration:none} .skip-link:focus{left:1rem;top:0.75rem} /* Sichtbarer Fokus-Ring auf allen interaktiven Elementen. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:0.125rem} /* Heller Ring auf dunklen/orangenen Flächen (.on-dark in Nav-Overlay & Footer). */ .on-dark a:focus-visible,.on-dark button:focus-visible,.on-dark input:focus-visible,.on-dark textarea:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px #1D1D1D} /* .hp-field – Spam-Honigtopf im Kontaktformular (kontakt-formular.php), optisch entfernt. */ .hp-field{position:absolute!important;left:-625rem!important;width:1px;height:1px;overflow:hidden} /* Bewegung reduzieren, wenn vom System gewünscht. */ @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ----- Layout-Hülle (global; .container in Nav, Formular, Footer) ----- */ .container{max-width:75rem;margin:0 auto;padding:0 2rem;position:relative} .narrow{max-width:42.5rem} /* ----- Geteilte Überschriften-Bausteine (Formular & FAQ) ----- */ /* .ht-eyebrow – kleine orange Überzeile über einer Sektionsüberschrift. */ .ht-eyebrow{font-size:0.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:1.125rem} /* .ht-title-dim – abgesetzter (grauer) Teil einer Überschrift. */ .ht-title-dim{color:#b9b9bf} /* ----- Geteilte Buttons (in Nav-CTA, Formular-Buttons, Overlay-CTA) ----- */ /* .btn-orange – primärer oranger Button/Link (ersetzt style-hover/active des Prototyps). */ .btn-orange{transition:background .2s ease,transform .12s ease} .btn-orange:hover{background:var(--orange-2)} .btn-orange:active{transform:translateY(1px)} /* .btn-ghost-dark – heller Sekundär-Button mit Rahmen (Zurück-Button im Formular). */ .btn-ghost-dark{transition:border-color .2s ease} .btn-ghost-dark:hover{border-color:#0a0a0a} /* ----- Responsive Container-Innenabstände (global) ----- */ @media(max-width:1024px){ .container{padding:0 1.5rem} } @media(max-width:600px){ .container{padding:0 1.25rem} } /* .ht-stretch – „Stretched Link": macht die ganze positionierte Eltern-Karte klickbar. */ .ht-stretch::after{content:"";position:absolute;inset:0;z-index:5} /* Service-Chart-Punkt: am Ende der Linie zum Checkmark werden (.is-done per JS). */ [data-svcdot]{transition:width .25s ease,height .25s ease,background .25s ease,border-color .25s ease} [data-svcdot].is-done{width:1.5rem!important;height:1.5rem!important;background:var(--orange)!important;border-color:#fff!important;display:flex;align-items:center;justify-content:center}