@layer base { /* ============================================================ JENNIQUE BEAUTY – base.css Reset, Grundtypografie, Accessibility-Basisregeln. Global auf jeder Frontend-Seite geladen (s. .ai/css-architecture.md, Ladereihenfolge: base.css -> layout.css -> components.css -> pages/.css). Alle Farb- und Schriftvariablen kommen per PHP inline als :root { --color-... } aus config.php (includes/head.php). ============================================================ */ /* Bambi Handwritten – eigene Datei in assets/fonts/ ablegen */ @font-face { font-family: 'Bambi Handwritten'; src: url('../fonts/BambiHandwritten.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } /* ---- RESET ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: clip; } /* Sperrt Scrollen waehrend das Mobile-Nav-Drawer offen ist. Bewusst auf html (nicht body): overflow auf body wuerde die position:sticky-Berechnung des Headers verfaelschen (body ist dessen direktes Elternelement). Die Root-Element-Sonderregel behandelt html-Overflow als Viewport-Overflow, das bricht sticky-Nachfahren nicht. */ html.mobile-nav-locked { overflow-y: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } address { font-style: normal; } ul, ol { list-style: none; } /* ---- BASE ---- */ body { font-family: var(--font-body); background: var(--color-background); color: var(--color-text-dark); line-height: 1.7; -webkit-font-smoothing: antialiased; } /* ---- TYPOGRAFIE ---- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; /* Sicherheitsnetz: lange, admin-editierbare oder einfach zusammengesetzte Woerter ohne Leerzeichen (z.B. "Datenschutzerklärung", "Geschäftsbedingungen") koennen bei kleinen Mobilbreiten breiter als der verfuegbare Platz sein. Ohne ein Sicherheitsnetz wird dann NICHT die Zeile umgebrochen, sondern (je nach umgebendem Layout) die ganze Seite horizontal breiter als der Viewport. hyphens:auto statt overflow-wrap:break-word (frueherer Versuch): in Kombination mit text-wrap:balance (direkt darunter) hat Chrome mit break-word JEDE moegliche Umbruchstelle genutzt, auch mitten im Wort OHNE Trennzeichen, um Zeilen gleichmaessiger zu verteilen - selbst wenn das Wort komplett auf eine Zeile gepasst haette (beobachtet bei "Wimpernverlängerung" -> "Wimpernverlängeru"/"ng ..."). hyphens:auto bricht stattdessen nur an echten Silbengrenzen MIT sichtbarem Trennstrich (Sprache ueber lang="de" auf bekannt) - liest sich auch dann sauber, wenn balance diese Stelle fuer die Verteilung nutzt. */ hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: normal; word-break: normal; /* Verhindert "Waisen" (eine einzelne kurze letzte Zeile) bei mehrzeiligen Ueberschriften, indem der Browser die Zeilenlaengen gleichmaessiger verteilt. Reines Progressive Enhancement - Browser ohne Unterstuetzung ignorieren die Deklaration und brechen wie bisher normal um. */ text-wrap: balance; } h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); } h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); } /* War zuvor ein fixer rem-Wert ohne vw-Anteil - einzige Ueberschriftenebene ohne jede Fluid-Skalierung. Die meisten .h3-Elemente haben zwar eigene, spezifischere Groessen-Regeln (z.B. .svc-card-title), die weiterhin greifen; dies ist der Basiswert fuer alle uebrigen/zukuenftigen h3. */ h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); } em { font-style: italic; color: var(--color-primary); } .label { display: block; /* Groesse/Schriftart admin-editierbar, s. admin/content-design.php + includes/head.php (--label-size/--label-font). Fallback-Werte hier entsprechen dem vorherigen fest einprogrammierten Wert. */ font-size: var(--label-size, 0.72rem); font-family: var(--label-font, var(--font-body)); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 0.6rem; } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Alle Hero-Einblendstufen behalten ihre vorgesehene Dauer (auf Wunsch 2026-07-24) - auch fuer reduced-motion erzwungen, sonst wuerde der globale 0.01ms-Reset oben die gestaffelten Delays wirkungslos machen (alle Elemente erschienen dann gleichzeitig). */ .hero-landing .hero-title-line, .hero-landing .hero-landing-divider, .hero-landing .hero-landing-sub, .hero-landing .hero-cta, .hero-landing .hero-cta-secondary, .hero-landing .hero-features .hero-feature-item { animation-duration: 0.5s !important; } /* Der "Hier, ich bin klickbar"-Pfeil-Nudge (components.css) ist eine endlos wiederholte Bewegung - ohne diese explizite Abschaltung wuerde der 0.01ms-Reset oben ihn nur auf eine winzige, endlos schnell flackernde Version zusammenstauchen statt ihn wirklich zu deaktivieren. */ .btn-mehr-erfahren svg { animation: none !important; } } @media (prefers-reduced-motion: reduce) and (min-width: 769px) and (hover: hover) and (pointer: fine) { .gallery-grid .gallery-item, #pairs .ba-grid .gallery-item { transition-property: transform, box-shadow !important; transition-duration: 500ms, 500ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1), cubic-bezier(0.2, 0, 0.2, 1) !important; } .gallery-grid .gallery-item img, #pairs .ba-grid .gallery-item img { transition-property: transform, filter !important; transition-duration: 500ms, 500ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1), cubic-bezier(0.2, 0, 0.2, 1) !important; } .review-slide-text { transition-property: transform, color, text-shadow !important; transition-duration: 80ms, 80ms, 80ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1), cubic-bezier(0.2, 0, 0.2, 1), cubic-bezier(0.2, 0, 0.2, 1) !important; } /* Leistungskarten (Startseite/Leistungsuebersicht) haben seit dem Unschaerfe-/Ruckel-Bugfix keinen Hover-Hub mehr (s. .svc-card/ .menu-card-wrap in components.css) - nur noch Schatten (bereits 80ms, braucht keine Ausnahme) und Bildzoom (naechster Block). */ .svc-card-img { transition-property: transform !important; transition-duration: 500ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1) !important; } .btn-mehr-erfahren { transition-property: color, gap !important; transition-duration: 500ms, 500ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1), cubic-bezier(0.2, 0, 0.2, 1) !important; } .btn-mehr-erfahren::after { transition-property: transform !important; transition-duration: 500ms !important; transition-timing-function: cubic-bezier(0.2, 0, 0.2, 1) !important; } } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } /* Ende @layer base */