/* Kronos Pictures - Marken-Konsistenz-Overlay. Wird auf allen Unterseiten geladen (NICHT auf der Startseite - die ist die Referenz). Bricht keine bestehenden Layouts auf, sondern prägt die typischen Startseiten-Signaturen auf: Italic-Gold-Akzent in Headlines, einheitliche Eyebrow + Divider, sanfter Hover-Lift, Lead-Typografie. Reihenfolge im : nach der Seiten-eigenen CSS einbinden, damit die Markenschicht gewinnt. Versionsparameter (?v=) wird nach Änderungen erhöht. */ /* ─── Italic-Gold-Akzent in Headlines ─────────────────────────────── */ /* In den Headlines verwendet die Startseite oder für den schräggesetzten Gold-Teil. Wir vereinheitlichen das auf allen Seiten. */ h1 em, h2 em, h3 em, .page-title em, .hero h1 em, .hero h2 em, .page-title span, .hero h1 span:not([class*="logo-line"]):not([class*="badge"]) { font-family: 'Cormorant Garamond', Georgia, serif !important; font-style: italic; font-weight: 600; color: #C4A35A; letter-spacing: -0.005em; } /* ─── Eyebrow / Label vereinheitlichen ────────────────────────────── */ .eyebrow, .label, .page-eyebrow, .nav-eyebrow { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: #C4A35A; display: inline-flex; align-items: center; gap: 12px; } .eyebrow::before, .label::before, .page-eyebrow::before { content: ''; display: inline-block; width: 28px; height: 1px; background: #C4A35A; } /* Doppelte Linie vermeiden, falls die Seite schon eine eigene hat */ .page-eyebrow::before { display: inline-block; } /* ─── Lead-Absatz Typografie wie Startseite ───────────────────────── */ .lead, .hero-p, .page-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(18px, 1.5vw, 21px); font-weight: 400; font-style: normal; line-height: 1.6; color: rgba(26, 20, 16, 0.72); max-width: 540px; } /* ─── Gold-Divider unter h2 (wo .divider explizit eingesetzt wird) ── */ .divider { width: 56px; height: 1.5px; background: #C4A35A; } /* ─── Sanfter Hover-Lift auf Primary-Buttons ──────────────────────── */ .btn-primary, .btn-dark, .nav-cta, .cta-primary, .mobile-menu-cta { transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .btn-primary:hover, .btn-dark:hover, .nav-cta:hover, .cta-primary:hover, .mobile-menu-cta:hover { transform: translateY(-2px); } /* Ghost / Secondary Buttons konsistenter Pfeil-Slide */ .btn-secondary, .btn-ghost { transition: color 0.3s ease, border-color 0.3s ease; } .btn-secondary .arrow, .btn-ghost .arrow { display: inline-block; transition: transform 0.3s ease; } .btn-secondary:hover .arrow, .btn-ghost:hover .arrow { transform: translateX(5px); } /* ─── Section-Rhythm angleichen (sanft, nicht erzwingen) ──────────── */ /* Nur, falls eine Sektion noch sehr eng ist - wir setzen Mindestmaß. */ section { scroll-margin-top: 80px; } /* Public nav rhythm: keep vertical header spacing consistent across pages. */ body:not(.auth-page) > nav[aria-label="Hauptnavigation"] { padding-top: 20px !important; padding-bottom: 20px !important; } /* ─── Footer-Tone-Angleichung ─────────────────────────────────────── */ footer .footer-logo, footer .f-logo { letter-spacing: 0.18em; } footer:has(> .footer-logo + .footer-contact + .footer-copy) { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(min-content, 480px) minmax(0, 1fr) !important; align-items: center !important; column-gap: clamp(20px, 3vw, 48px) !important; } footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-logo { justify-self: start !important; min-width: 0 !important; } footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-contact { justify-self: center !important; width: min(100%, 480px) !important; max-width: 480px !important; text-align: center !important; } footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-copy { justify-self: end !important; min-width: 0 !important; text-align: right !important; } @media (max-width: 900px) { footer:has(> .footer-logo + .footer-contact + .footer-copy) { grid-template-columns: 1fr !important; justify-items: center !important; row-gap: 18px !important; text-align: center !important; } footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-logo, footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-contact, footer:has(> .footer-logo + .footer-contact + .footer-copy) > .footer-copy { justify-self: center !important; text-align: center !important; } } /* ─── h1 / h2 Hierarchy: kleiner Marken-Tweak ─────────────────────── */ h1 { text-wrap: balance; } h2 { text-wrap: balance; } /* ─── Body-Tracking auf Body-Text leicht enger für Lesbarkeit ─────── */ p { text-wrap: pretty; } /* Fallback mobile navigation for simpler pages that only load brand.css. */ .hamburger { display: none; width: 30px; height: 24px; flex-direction: column; justify-content: space-between; flex: 0 0 auto; margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; z-index: 200; } .hamburger span { display: block; width: 100%; height: 2px; background: #1A1410; transition: transform 0.25s ease, opacity 0.25s ease; } .hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } .mobile-menu { display: none; position: fixed; inset: 0; z-index: 150; background: #F6F1E9; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 24px; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .mobile-menu.open { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 9vw, 48px); letter-spacing: 0.05em; line-height: 1; color: #1A1410; text-decoration: none; } .mobile-menu a:hover, .mobile-menu a.active { color: #C4A35A; } .mobile-menu .mobile-menu-cta { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #1A1410; background: #C4A35A; padding: 14px 22px; width: min(100%, 320px); } @media (max-width: 900px) { nav .nav-links, nav .nav-cta { display: none !important; } nav .hamburger { display: flex !important; } .mobile-menu { display: flex; } } @media (min-width: 901px) { nav .nav-links { display: flex !important; } nav .nav-cta { display: inline-flex !important; } nav .hamburger { display: none !important; } .mobile-menu { display: none !important; } } @media (max-width: 480px) { nav .nav-logo { font-size: 18px !important; letter-spacing: 0.1em !important; } } /* Mobile menu must sit above cookie surfaces, while the close button remains usable. */ #kpcc, #cookie-banner { z-index: 90 !important; } nav { z-index: 700 !important; } .mobile-menu, .mobile-menu.open { z-index: 650 !important; } body.mobile-menu-open #kpcc, body.mobile-menu-open #cookie-banner { display: none !important; } footer:not(:has(> .footer-logo + .footer-contact + .footer-copy)):not(:has(.f-grid)) { justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; text-align: center !important; } footer:not(:has(> .footer-logo + .footer-contact + .footer-copy)):not(:has(.f-grid)) > div { text-align: center !important; } /* ─── Kanonischer 4-Spalten-Footer (f-grid) auf allen Seiten ──────── */ footer:has(.f-grid){ display:block !important; background:#110E0A !important; padding:4rem 9vw 2rem !important; border-top:1px solid rgba(196,163,90,0.2) !important; } .f-grid{ display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem; max-width:1280px;margin:0 auto;text-align:left; } .f-grid .f-heading{ font-family:'Outfit',sans-serif;font-weight:500;font-size:0.72rem; letter-spacing:0.22em;text-transform:uppercase;color:rgba(246,241,233,0.5) !important; margin-bottom:1.1rem; } .f-grid .f-col a,.f-grid .f-col p{ display:block;font-size:0.92rem;line-height:1.85;color:rgba(246,241,233,0.78) !important; text-decoration:none;transition:color 0.2s ease;margin:0 0 0.15rem; } .f-grid .f-col a:hover{color:#C4A35A !important} .f-grid .f-col a.f-phone{ font-family:'Bebas Neue',sans-serif;font-size:1.65rem;letter-spacing:0.04em; color:#F6F1E9 !important;line-height:1.1;margin-bottom:0.7rem; } .f-grid .f-col a.f-portal{ display:inline-flex;align-items:center;gap:0.5em;margin-top:0.6rem; padding:0.5em 1em;border:1px solid rgba(196,163,90,0.30); font-size:0.78rem;letter-spacing:0.1em;text-transform:uppercase; color:#C4A35A !important;transition:border-color 0.2s ease,background 0.2s ease; } .f-grid .f-col a.f-portal:hover,.f-grid .f-col a.f-portal:focus-visible{ background:#C4A35A;color:#1A1410 !important;border-color:#C4A35A; } footer:has(.f-grid) .f-bottom{ max-width:1280px;margin:3rem auto 0;padding-top:1.5rem; border-top:1px solid rgba(196,163,90,0.12); display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem; font-size:0.72rem;color:rgba(246,241,233,0.4) !important;text-align:left; } footer:has(.f-grid) .f-bottom a{color:inherit !important;text-decoration:none} footer:has(.f-grid) .f-bottom a:hover{color:#C4A35A !important} @media(max-width:820px){ .f-grid{grid-template-columns:1fr 1fr;gap:2rem} .f-grid .f-col:first-child{grid-column:1/-1} footer:has(.f-grid) .f-bottom{flex-direction:column;text-align:center} } @media(max-width:480px){ .f-grid{grid-template-columns:1fr} } /* U3: Lesefortschrittsbalken rechts */ .kp-progress { position: fixed; top: 0; right: 0; width: 3px; height: 100vh; height: 100svh; background: transparent; z-index: 80; pointer-events: none; } .kp-progress__fill { width: 100%; height: 0%; background: var(--gold, #c9a227); opacity: 0.85; transition: height 0.08s linear; } @media (max-width: 600px) { .kp-progress { width: 2px; } } @media (prefers-reduced-motion: reduce) { .kp-progress__fill { transition: none; } }