/* PRUEFMARKE: site.css Stand 2026-08-26-CR (Engine 1.0.2, Paket CR) */
:root{ --arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M1 12h20M15 7.5l5.5 4.5-5.5 4.5'/%3E%3C/svg%3E"); }

/* WIEDERHERGESTELLT: Kern-Variablen (waren versehentlich mitentfernt worden) */
:root {
    /* --- Grundflaechen & Text --- */
    --paper:        #FFFFFF;   /* Seiten-Hintergrund (hell) */
    --paper-2:      #EEEEEE;   /* leicht abgesetzte Flaeche (Logos, Testimonial) */
    --white:        #FFFFFF;   /* echtes Weiss (Overlay-Taefelchen, Karten) */
    --ink:          #000000;   /* Textfarbe - reines Schwarz */
    --ink-soft:     #000000;   /* gedaempfter Text - bewusst auch Schwarz, kein Grau */
    --line:         #EEEEEE;   /* Rahmen/Trennwert (im GD-Design kaum genutzt) */

    /* --- Markenfarben (Namen historisch) --- */
    --petrol:       #302F33;   /* Markenschwarz: Footer, Knoepfe, dunkles Logo */
    --petrol-deep:  #161922;   /* tiefstes Schwarz */
    --petrol-tint:  #EEEEEE;   /* sehr helle Akzentflaeche */
    --coral:        #3FAF6A;   /* Akzent (monochrom = Schwarz) */
    --coral-soft:   #EEEEEE;   /* weicher Akzent / Raender */

    /* --- Verlauf: traegt die Mitte der Seite, nicht nur Knoepfe --- */
    --accent-from:  #3FAF6A;   /* fbng gruen */
    --accent-to:    #FED622;   /* fbng gelb */
    --accent-gradient: linear-gradient(100deg, #3FAF6A 0%, #FED622 100%);
    --muted:        #777777;   /* Fliesstext auf Weiss */
    --rating:       #D87935;   /* Bewertungssterne */

    /* --- Typografie --- */
    --font-display: "museo-sans", system-ui, -apple-system, "Segoe UI", sans-serif;  /* Titel, Nav */
    --font-body:    "museo-sans", system-ui, -apple-system, "Segoe UI", sans-serif;  /* Fliesstext */

    /* --- Form & Abstand --- */
    --radius:        14px;    /* Eckenradius gross (Kacheln, Karten) */
    --radius-sm:     10px;    /* Eckenradius klein */
    --wrap:          1180px;  /* maximale Inhaltsbreite */
    --measure:       44rem;   /* angenehme Lesebreite fuer Textspalten */
    --space-section: clamp(3.5rem, 5vw, 5rem);              /* vertikaler Sektionsabstand */
    --step-fluid:    clamp(2.4rem, 1.4rem + 3.4vw, 4.1rem); /* fluide Ueberschrift-Groesse */

    /* --- Heller Seiten-Mesh (fixierter Hintergrund, body::before) --- */
    --mesh-base:  #FBFBFC;
    --mesh-image:
        radial-gradient(60% 55% at 14% 18%, #DCE3EC 0%, transparent 60%),
        radial-gradient(55% 55% at 88% 12%, #ECE6DC 0%, transparent 56%),
        radial-gradient(60% 60% at 82% 86%, #CAD6E4 0%, transparent 62%),
        radial-gradient(55% 55% at 16% 92%, #E3E9F1 0%, transparent 60%);

    /* --- Schatten (Trennung ohne Linien) --- */
    --shadow-sm:  0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
    --shadow-md:  0 10px 40px rgba(0,0,0,.12);
}

/* =========================================================
   SCHRIFT: Museo Sans ueber Adobe Fonts (Typekit-Kit in config
   'fonts.typekit'). Das Layout laedt das Kit nicht-blockierend.
   Book = 300 Fliesstext, Bold = 700 Titel/Navigation.
   Kein self-hosted @font-face noetig.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ink);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 .5em;
}

p { margin: 0 0 1rem; }
a { color: var(--petrol-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--petrol-deep); }
img { max-width: 100%; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }

.visually-hidden, .skip-link:not(:focus) {
    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 {
    position: absolute; left: 1rem; top: 1rem; z-index: 100;
    background: var(--ink); color: var(--white); padding: .6rem 1rem;
    border-radius: var(--radius-sm); text-decoration: none;
}

:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 4px; }

/* ---------- Eyebrow ---------- */
.eyebrow {
    font-size: .8rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--petrol-deep); margin: 0 0 .9rem;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 600; font-size: .98rem;
    padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none;
    border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--petrol-deep); color: var(--white); }
.btn-primary:hover { background: var(--petrol-deep); color: var(--white); }
.btn-ghost { background: transparent; color: var(--petrol-deep); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--petrol); color: var(--petrol-deep); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn-ghost-light:hover { border-color: var(--white); color: var(--white); }

.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " \2192"; transition: margin .15s ease; }
.link-arrow:hover::after { margin-left: .25rem; }

/* ---------- Header (Taupe-Leiste, weisses Logo) ---------- */
html { background: var(--petrol); }
html.intro-seen { background: var(--paper); }

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--petrol); color: var(--white);
    height: 100px; display: flex; align-items: center; gap: 1.5rem;
    padding: 0 clamp(1.2rem, 4vw, 2.4rem);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--white); }
.brand-logo { display: block; height: 56px; overflow: hidden; transition: height .32s cubic-bezier(.65,0,.2,1); }
.brand .kk-logo { width: 106px; height: auto; display: block; opacity: 0; }
.brand .logo-wordmark { transition: opacity .24s ease; }
/* Beim Scrollen faltet die Wortmarke weg, das Signet bleibt */
.site-header.header-compact .brand-logo { height: 40px; }
.site-header.header-compact .brand .logo-wordmark { opacity: 0; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 1.9rem); }
.search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -8px 0; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--white); cursor: pointer; opacity: 0; transition: opacity .45s ease, background-color .2s ease; }
.search-toggle:hover { background: rgba(255,255,255,.12); }
.site-nav {}
.nav-list { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; opacity: 0; }
.nav-list a { position: relative; color: var(--white); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 1.12rem; opacity: 1; }
.nav-list a:hover, .nav-list a[aria-current="page"] { opacity: 1; }
.nav-list a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 100%; background: var(--white); border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .35s ease; }
.nav-list a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="page"]::after { transform: scaleX(1); animation: navUnderline .45s ease both; }
@keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .nav-list a::after { transition: none; } .nav-list a[aria-current="page"]::after { animation: none; } }

/* Hamburger, nur mobil */
.burger { display: none; width: 30px; height: 20px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; opacity: 0; }
.burger::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; }
.burger span { position: absolute; left: 0; right: 0; height: 2.5px; background: var(--white); border-radius: 2px; transition: transform .3s cubic-bezier(.65,0,.2,1), opacity .2s ease; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; margin-top: -1.25px; }
.burger span:nth-child(3) { bottom: 0; }
body.menu-open .burger span:nth-child(1) { top: 50%; margin-top: -1.25px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { bottom: 50%; margin-bottom: -1.25px; transform: rotate(-45deg); }

/* Mobiles Dropdown */
.mobile-menu { display: none; position: fixed; top: 100px; left: 0; right: 0; background: var(--petrol);
    flex-direction: column; padding: .4rem 0 1rem; z-index: 45;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: transform .28s cubic-bezier(.65,0,.2,1), opacity .28s ease;
    box-shadow: 0 14px 24px -16px rgba(0,0,0,.45); }
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu a { color: var(--white); text-decoration: none; padding: .95rem clamp(1.2rem,4vw,2.4rem); font-size: 1.18rem; font-weight: 600; }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"] { background: rgba(255,255,255,.10); }

/* Intro-Vorhang */
#introOverlay { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: var(--petrol); z-index: 900; }
#introWrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 950; pointer-events: none; }
#introWrap .kk-logo { width: min(360px, 68vw); height: auto; display: block; color: var(--white); opacity: 0; }

/* Einblenden nach dem Intro */
.nav-list, .burger, .search-toggle { transition: opacity .45s ease; }
/* Inhalt ist von Anfang an gemalt (gut fuer LCP) und wird nur optisch vom Vorhang verdeckt */
html.intro-seen #introOverlay, html.intro-seen #introWrap { display: none; }
html.intro-seen .brand .kk-logo,
html.intro-seen .nav-list,
html.intro-seen .search-toggle,
html.intro-seen .burger { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    #introOverlay, #introWrap { display: none; }
    html { background: var(--paper); }
    .brand .kk-logo, .nav-list, .search-toggle, .burger, main#inhalt { opacity: 1; }
}

/* Mobiler Umschaltpunkt fuer den Kopf */
@media (max-width: 720px) {
    .site-header { height: 84px; padding: 0 clamp(1rem, 4vw, 1.5rem); }
    .brand-logo { height: 46px; }
    .brand .kk-logo { width: 87px; }
    .site-header.header-compact .brand-logo { height: 33px; }
    .nav-list { display: none; }
    .burger { display: block; }
    .mobile-menu { display: flex; top: 84px; }
}

/* ---------- Suche (Overlay) ---------- */
body.search-open { overflow: hidden; }
.search-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; }
.search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(2px); }
.search-box { position: relative; width: min(640px, 92vw); margin-top: clamp(4rem, 12vh, 9rem); background: var(--white); color: var(--ink); border-radius: var(--radius); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); overflow: hidden; animation: searchIn .26s cubic-bezier(.65,0,.2,1) both; }
@keyframes searchIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
.search-field { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.search-input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--font-body); font-size: 1.15rem; color: var(--ink); padding: .25rem 0; }
.search-input::placeholder { color: var(--ink-soft); opacity: .8; }
.search-close { background: none; border: 0; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; padding: 0 .2rem; }
.search-close:hover { color: var(--ink); }
.search-hint { margin: 0; padding: 1.1rem 1.2rem 1.3rem; color: var(--ink-soft); font-size: .96rem; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: min(56vh, 460px); overflow-y: auto; }
.search-results li a { display: block; padding: .85rem 1.2rem; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background-color .15s ease; }
.search-results li:last-child a { border-bottom: 0; }
.search-results li a:hover, .search-results li a:focus { background: var(--petrol-tint); }
.sr-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; }
.sr-text { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: .15rem; }
.search-none { padding: 1.1rem 1.2rem 1.3rem; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .search-box { animation: none; } }


.hero { position: relative; padding: var(--space-section) 0; }
.hero-inner {
    display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 4vw, 3.2rem); align-items: center;
    padding-bottom: clamp(3rem, 5vw, 4.5rem);
}
.hero-inner > * { min-width: 0; }
.hero-title { font-size: var(--step-fluid); margin-bottom: .6rem; }
.hero-lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 34ch; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Hero-Slider ---------- */
.hero-slider { position: relative; width: 100%; max-width: 360px; margin-left: auto; min-width: 0; }

.hero-pulse { position: relative; min-height: 220px; display: flex; align-items: center; }

/* ---------- Quickbar ---------- */
.quickbar {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    background: var(--white); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm); margin-top: 0;
}
.quick { background: var(--white); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .15rem; }
.quick-label { font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.quick-main { font-size: 1.05rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.quick-sub { font-size: .9rem; color: var(--ink-soft); }
.status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: 1.05rem; }
.status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; }
.status-open { color: var(--petrol-deep); }
.status-open::before { background: #2E9E6B; box-shadow: 0 0 0 3px rgba(46,158,107,.18); }
.status-closed { color: var(--ink-soft); }
.status-closed::before { background: #C0563C; box-shadow: 0 0 0 3px rgba(192,86,60,.16); }

/* ---------- Sections ---------- */
.section { padding: var(--space-section) 0; }
.section-alt { background: var(--white); }
.section-intro { padding: var(--space-section) 0; }
.section-head { max-width: 40rem; margin-bottom: 2.2rem; }
.section-head h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.section-more { margin-top: 2rem; }

/* ---------- Abwechselnde Sektions-Hintergruende ---------- */
/* Ruhiges Mesh-Feld (Sanftes Blau), feststehend hinter der Seite */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-color: #FBFBFC;
    background-image:
        radial-gradient(60% 55% at 14% 18%, #DCE3EC 0%, transparent 60%),
        radial-gradient(55% 55% at 88% 12%, #ECE6DC 0%, transparent 56%),
        radial-gradient(60% 60% at 82% 86%, #CAD6E4 0%, transparent 62%),
        radial-gradient(55% 55% at 16% 92%, #E3E9F1 0%, transparent 60%);
}
/* Ungerade Sektionen weiss (decken das Mesh ab), gerade lassen es durchscheinen */
main#inhalt > section:nth-of-type(odd)  { background: var(--white); position: relative; }
main#inhalt > section:nth-of-type(even) { background: transparent; position: relative; }
/* Ausnahme: einzelne Sections bewusst weiss, auch wenn sie an gerader Position stehen */
main#inhalt > section.section-plain { background: var(--white); padding-top: clamp(1.4rem, 3vw, 2rem); }
/* Kopf der Listenseiten naeher an die Kacheln ruecken */
.page-header-attached { padding-bottom: 0; }

/* Kacheln zeitversetzt von unten einfaden (Aerzte + Team) */
@keyframes cardFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; }
.card {
    background: var(--white); border-radius: var(--radius);
    padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-title { font-size: 1.2rem; margin-bottom: .4rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .98rem; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem; }
.team-grid-full { gap: 1.8rem; }
.team-card { text-align: center; }
.team-photo {
    width: 92px; height: 92px; margin: 0 auto .9rem; border-radius: 50%; overflow: hidden;
    background: linear-gradient(135deg, var(--petrol), var(--petrol-deep));
    color: var(--white); display: grid; place-items: center;
    font-family: var(--font-display); font-size: 2.2rem; box-shadow: var(--shadow-sm);
}
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-name { font-size: 1.15rem; margin-bottom: .15rem; }
.team-role { color: var(--petrol-deep); font-weight: 600; font-size: .92rem; margin-bottom: .5rem; }
.team-bio { color: var(--ink-soft); font-size: .94rem; margin: 0 auto; max-width: 30ch; }

/* ---------- News ---------- */
.news-list { display: grid; gap: 1.6rem; }
.news-item { display: grid; grid-template-columns: 8rem 1fr; gap: 1.2rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; padding-bottom: 0; }
.news-date { color: var(--ink-soft); font-size: .9rem; font-weight: 600; padding-top: .2rem; }
.news-title { font-size: 1.25rem; margin-bottom: .3rem; }
.news-pinned .news-title { color: var(--petrol-deep); }
.pin { color: var(--coral); }

/* ---------- CTA band ---------- */
.cta-band { border-radius: 0; }
.cta-band h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
.cta-band p { color: var(--ink-soft); margin: 0; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Page header ---------- */
.page-header { padding: var(--space-section) 0; }
.page-header h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }
.page-lead { font-size: 1.18rem; color: var(--ink-soft); max-width: 46ch; }

/* ---------- Prose ---------- */
.prose { color: var(--ink); }
.prose h2 { font-size: 1.6rem; margin-top: 2rem; }
.prose h3 { font-size: 1.25rem; margin-top: 1.5rem; }
.prose p { margin-bottom: 1.1rem; }
.prose a { font-weight: 500; }
.prose-sm { font-size: .96rem; }
.prose-sm p:last-child { margin-bottom: 0; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.contact-card { background: var(--white); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-sm); }
.contact-card h2 { font-size: 1.4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.contact-card .status { font-size: .85rem; }
.contact-address { font-style: normal; margin-bottom: 1.2rem; line-height: 1.6; }
.contact-line { display: flex; gap: .8rem; margin: .4rem 0; }
.contact-label { min-width: 5rem; color: var(--ink-soft); font-size: .92rem; }
.contact-emergency { margin-top: 1.2rem; padding: .9rem 1.1rem; background: var(--white); border-left: 3px solid var(--coral); border-radius: var(--radius-sm); font-size: .94rem; color: var(--ink-soft); }
.hours { width: 100%; border-collapse: collapse; }
.hours th { text-align: left; font-weight: 500; padding: .55rem 0; color: var(--ink); vertical-align: top; }
.hours td { text-align: right; padding: .55rem 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours tr { border-bottom: 1px solid var(--line); }
.hours tr:last-child { border-bottom: 0; }
.hours-label { display: block; font-size: .8rem; }

.empty { color: var(--ink-soft); font-style: italic; }

/* ---------- Footer ---------- */
.site-footer { background: var(--petrol); color: var(--white); padding: 3.5rem 0 1.8rem; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.22); }
.footer-logo { color: var(--white); margin-bottom: .9rem; }
.footer-logo .kk-logo { height: 76px; width: auto; display: block; }
.footer-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--white); margin: .6rem 0 .3rem; }
.footer-tagline { font-size: .94rem; max-width: 32ch; }
.footer-head { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 0 0 .9rem; font-family: var(--font-body); font-weight: 600; }
.footer-address { font-style: normal; line-height: 1.8; }
.footer-address a, .footer-links a { color: var(--white); text-decoration: none; }
.footer-address a:hover, .footer-links a:hover { color: var(--white); }
.footer-links { list-style: none; margin: 0; padding: 0; line-height: 2; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: 1.4rem; font-size: .88rem; color: rgba(255,255,255,.9); }
.footer-base a { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .hero-inner { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2.5rem; }
    .hero-slider { max-width: 360px; margin-inline: auto; margin-left: auto; width: 100%; }
    /* hs-pic bleibt quadratisch (aspect-ratio 1/1 aus der Grundregel) */
    .hero-pulse { order: -1; min-height: 120px; }
    .quickbar { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; }

    .cta-inner { flex-direction: column; align-items: flex-start; }
    .news-item { grid-template-columns: 1fr; gap: .3rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}
.back-link { display: inline-block; color: var(--petrol-deep); text-decoration: none; font-weight: 500; margin-bottom: 1.4rem; }
.back-link:hover { text-decoration: underline; }

/* Werdegang als zweispaltiges Raster, ohne Tabelle */
.cv { display: grid; gap: .1rem; margin: 0; }
.cv-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    padding: .55rem 0;
    border-bottom: 1px solid #fff;
}
.cv-year { font-weight: 600; color: var(--petrol-deep); margin: 0; }
.cv-text { margin: 0; color: var(--ink); }
@media (max-width: 460px) {
    .cv-row { grid-template-columns: 4.5rem 1fr; gap: .7rem; }
}

.lang-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
.lang-list li {
    background: var(--petrol-tint);
    color: var(--petrol-deep);
    border-radius: 999px;
    padding: .3rem .9rem;
    font-size: .92rem;
}

/* =========================================================
   GABRIEL DESIGN THEME — ueberschreibt die Basis.
   Gleiche Selektoren stehen bewusst hier unten: spaeter = gewinnt.
   Header hell + dunkles Logo, Intro hell, Footer schwarz, monochrom.
   Stand 2026-06-29-D
   ========================================================= */
/* (Design-Variablen sind oben in STELLSCHRAUBEN gebuendelt) */
body{ background:var(--paper); }

/* Logo-Faltung mit Rand, damit das Signet nie angeschnitten wird */
.brand-logo{ height:58px; }
.site-header.header-compact .brand-logo{ height:44px; }

/* Header hell, keine Linie, weicher Blur-Saum darunter */
.site-header{ background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--ink); border-bottom:0; }
.site-header::after{ content:""; position:absolute; left:0; right:0; top:100%; height:34px; pointer-events:none; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent); mask-image:linear-gradient(to bottom, rgba(0,0,0,.95), transparent); }
.brand{ color:var(--ink); }
.brand .kk-logo{ color:var(--ink); }
.nav-list a{ color:var(--ink); }
.nav-list a::after{ background:var(--ink); }
.search-toggle{ color:var(--ink); }
.search-toggle:hover{ background:var(--paper-2); }
.burger span{ background:var(--ink); }
.mobile-menu{ background:#fff; border-top:1px solid var(--line); box-shadow:0 14px 24px -16px rgba(0,0,0,.18); }
.mobile-menu a{ color:var(--ink); }
.mobile-menu a:hover, .mobile-menu a[aria-current="page"]{ background:var(--paper-2); }

/* Intro hell mit dunklem Logo */
#introOverlay{ background:#fff; }
#introWrap .kk-logo{ color:var(--ink); }

/* Footer schwarz */
.site-footer{ background:#fff; color:#000; padding:clamp(3.5rem,6vw,5.5rem) 0 2.5rem; margin-top:0; }
.gd-footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1fr; gap:2rem; }
.gd-footer-brand address{ font-style:normal; color:#000; line-height:1.8; font-size:.94rem; }
.gd-footer-socials{ display:flex; gap:1rem; margin:1.2rem 0; }
.gd-footer-socials a{ color:#000; text-decoration:none; display:inline-flex; opacity:.85; transition:opacity .2s ease; }
.gd-footer-socials a:hover{ color:#000; opacity:1; }
.gd-footer-note{ color:#000; font-size:.9rem; margin:0; }
.gd-footer-col h2{ font-family:var(--font-display); font-weight:700; font-size:.92rem; margin:0 0 1rem; color:#000; }
.gd-footer-col ul{ list-style:none; margin:0; padding:0; line-height:2.1; }
.gd-footer-col a{ position:relative; color:#000; text-decoration:none; font-size:.94rem; opacity:.85; }
.gd-footer-col a::after{ content:""; position:absolute; left:0; bottom:-4px; height:3px; width:100%; background:#000; border-radius:2px;
  transform:scaleX(0); transform-origin:left center; transition:transform .35s ease; }
.gd-footer-col a:hover{ color:#000; opacity:1; }
.gd-footer-col a:hover::after{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .gd-footer-col a::after{ transition:none; } }
.gd-footer-base{ display:flex; justify-content:space-between; align-items:center; margin-top:2.6rem; color:#000; font-size:.88rem; }
.gd-footer-top{ color:rgba(0,0,0,.55); text-decoration:none; }
.gd-footer-top:hover{ color:#000; }

/* Buttons */
/* Einheitliche Buttons: Pill, 3px Rand, Pfeil via ::after. Hover = einfache Invertierung (Endzustand). */
.gd-btn{ display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1.5rem; border-radius:999px; border:3px solid #000; color:#000; background:transparent;
  text-decoration:none; font-family:inherit; font-size:1rem; font-weight:700; line-height:1; cursor:pointer;
  transition:background-color .2s ease, color .2s ease; }
.gd-btn::after{ content:""; width:1.5em; height:1em; flex:none; align-self:center; background-color:currentColor;
  -webkit-mask:var(--arrow-r) no-repeat center / contain; mask:var(--arrow-r) no-repeat center / contain; }
.gd-btn:hover{ background:#000; color:#fff; }
/* Auf dunklem Hintergrund (z. B. Referenz-Detail): invertiert */
.gd-btn.on-dark{ border-color:#fff; color:#fff; }
.gd-btn.on-dark:hover{ background:#fff; color:#000; }

/* Eyebrows site-weit ausgeblendet (Wunsch) */
.eyebrow, .hh-eyebrow{ display:none; }

/* Sektionen */
.gd-section{ padding:clamp(4rem,8vw,7.5rem) 0; }
.gd-alt{ background:var(--paper-2); }
.gd-section-head{ margin-bottom:clamp(2rem,4vw,3rem); }
.gd-section-head h1, .gd-section-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem,1.2rem+1.6vw,2.6rem); letter-spacing:-.01em; margin:0; }
.gd-section-lead{ color:var(--ink-soft); margin-top:.8rem; max-width:48ch; }

/* Hero */
.gd-hero{ padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,4vw,3.5rem); }
.gd-hero h1{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.015em; font-size:clamp(2.5rem,1.3rem+4.6vw,5.2rem); margin:0; }
.gd-hero-lead{ font-size:clamp(1.1rem,1rem+.4vw,1.32rem); color:var(--ink-soft); max-width:48ch; margin:1.6rem 0 2rem; }
.gd-hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Showcase */
.gd-showcase{ display:grid; grid-template-columns:1.15fr 1fr .8fr; gap:1rem; padding-bottom:clamp(4rem,8vw,7.5rem); }

/* Mesh-Platzhalter */
.gd-ph{ width:100%; height:100%; }
.gd-ph-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:.85rem; letter-spacing:.04em; text-align:center; padding:.5rem; }
.gd-ph1{ background:#FBFBFC; background-image:radial-gradient(60% 55% at 18% 20%,#F2E7E1 0,transparent 60%),radial-gradient(55% 55% at 85% 15%,#E7ECF2 0,transparent 56%),radial-gradient(60% 60% at 80% 88%,#EDE7DD 0,transparent 62%); }
.gd-ph3{ background:#FBFBFC; background-image:radial-gradient(60% 55% at 80% 20%,#E6ECF2 0,transparent 60%),radial-gradient(55% 55% at 15% 85%,#F2E9E1 0,transparent 56%); }
.gd-ph4{ background:#EDEAE4; }
.gd-ph5{ background:#FBFBFC; background-image:radial-gradient(60% 60% at 30% 30%,#EAEFF4 0,transparent 60%),radial-gradient(55% 55% at 85% 80%,#F3ECE3 0,transparent 56%); }

/* Editorial Showcase (Desktop-Split + Handy) */
.gd-show-sec{ padding:clamp(2rem,4vw,4rem) 0 clamp(2.5rem,5vw,4.5rem); }
.gd-show{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; grid-template-areas:"intro stage"; }
.gd-show-intro{ grid-area:intro; }
.gd-show-intro h1{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.015em; font-size:clamp(2rem,1.3rem+2.4vw,3.4rem); margin:0 0 1.6rem; }
.gd-show-list{ list-style:none; margin:0 0 1.6rem; padding:0; }
.gd-show-list a{ display:block; text-decoration:none; color:var(--ink); padding:.65rem .85rem; border-radius:10px; transition:background .2s ease; }
.gd-show-list a:hover, .gd-show-list a.on{ background:var(--paper-2); }
.gd-show-list b{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; }
.gd-show-list b::after{ content:" — "; }
.gd-show-list i{ font-style:normal; font-size:1.08rem; }
.gd-show-lead{ color:var(--ink); max-width:46ch; margin:0; font-size:1.02rem; line-height:1.6; }
.gd-show-dots{ grid-area:dots; display:none; }

/* About + FAQ */
.gd-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.gd-about-grid h2{ font-size:clamp(1.4rem,1rem+1.2vw,2rem); margin:0 0 1.2rem; }
.gd-portrait{ position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; margin-bottom:1.6rem; max-width:360px; }

/* Kontaktband + Logos */
.gd-contact-band{ text-align:center; padding:clamp(2rem,4vw,3.5rem) 0; }
.gd-contact-band h2{ font-size:clamp(1.8rem,1.2rem+2vw,3rem); max-width:18ch; margin:0 auto 1.8rem; }
.gd-logos-label{ text-align:center; color:var(--ink-soft); font-size:.92rem; letter-spacing:.03em; margin:2.6rem 0 1.4rem; }

/* Referenzen-Raster (Startseite): full-bleed, 16:9, dunkle Ramp + weisse Schrift, Parallax */
.home-refs{ padding-top: var(--space-section); padding-bottom: clamp(.7rem,1.4vw,1.3rem); }

/* Landing zweite Section: zweispaltig, links Angebot-Leiste (sticky), rechts Text */
.landing-split{ --lsg:clamp(2rem,4vw,4rem); display:grid; grid-template-columns:calc(50% - var(--lsg)) 1fr; column-gap:var(--lsg); align-items:start; }
.landing-rail{ position:sticky; top:calc(var(--hh) + 1rem); }
.landing-prose > :first-child{ margin-top:0; }
.landing-rail h2{ margin:0 0 1.1rem; }
@media (max-width:900px){
  .landing-split{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.4rem); }
  .landing-rail{ position:static; }
}

/* Referenz-Detail */
.gd-back{ display:inline-block; color:var(--ink-soft); text-decoration:none; margin-bottom:1.5rem; }
.gd-back:hover{ color:var(--ink); }
.gd-prose{ max-width:60ch; color:var(--ink); font-size:1.1rem; }
.gd-empty{ color:var(--ink-soft); }

/* Kundenstimmen */
.gd-tst{ text-align:center; max-width:760px; margin:0 auto; }
.gd-tst-photo{ width:72px; height:72px; border-radius:8px; margin:0 auto 1.6rem; background:#DDDAD3; }
.gd-tst-quote{ font-size:clamp(1.05rem,1rem+.4vw,1.3rem); color:#000; line-height:1.7; }
.gd-tst-name{ font-weight:700; margin:1.4rem 0 .1rem; }
.gd-tst-role{ color:var(--ink-soft); font-size:.92rem; margin:0; }
.gd-tst-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.8rem; }
.gd-tst-dots button{ width:26px; height:26px; border:0; background:transparent; cursor:pointer; padding:0; position:relative; }
.gd-tst-dots button::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#CFCCC5; }
.gd-tst-dots button[aria-current="true"]::before{ background:var(--ink); }

/* Scroll-to-Top */
.gd-to-top{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); width:46px; height:46px; border-radius:50%; border:0; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.15rem; cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .3s, transform .3s; z-index:60; }
.gd-to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.gd-to-top:hover{ transform:translateY(-2px); }

@media (max-width:880px){
  .gd-showcase{ grid-template-columns:1fr 1fr; }
  .gd-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .gd-about-grid{ grid-template-columns:1fr; }
  .gd-showcase{ grid-template-columns:1fr; }
  .gd-footer-grid{ grid-template-columns:1fr 1fr; }
  .gd-footer-base{ flex-direction:column; gap:.6rem; text-align:center; }
}
@media (max-width:820px){
  .gd-show{ grid-template-columns:1fr; grid-template-areas:"stage" "dots" "intro"; gap:1.2rem; align-items:start; }
  .gd-show-list{ display:none; }
  .gd-show-intro h1{ font-size:clamp(1.6rem,1.2rem+2vw,2.2rem); margin:.2rem 0 .8rem; }
  .gd-show-dots{ display:flex; gap:.4rem; justify-content:center; }
  .gd-show-dots button{ width:28px; height:28px; border:0; background:transparent; padding:0; cursor:pointer; position:relative; }
  .gd-show-dots button::before{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:#CFCCC5; transition:width .25s ease, background .25s ease; }
  .gd-show-dots button[aria-current="true"]::before{ width:22px; background:var(--ink); border-radius:4px; }
}

@media (max-width:720px){
  .brand-logo{ height:50px; }
  .brand .kk-logo{ width:92px; }
  .site-header.header-compact .brand-logo{ height:38px; }
}

/* ============================================================
   REFERENZ-DETAILSEITE (zweispaltig, volle Breite)  – Stand V
   ============================================================ */

/* Minimaler Kopf auf der Detailseite: transparent, nur Menü rechts. */
.site-header.header-min{ position:fixed; left:0; right:0; top:0; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; justify-content:flex-end; gap:0; }
.site-header.header-min::after{ display:none; }
.site-header.header-min .header-right-min{ position:absolute; right:clamp(1rem,4vw,2.4rem); top:50%; transform:translateY(-50%); display:flex; align-items:center; }
.site-header.header-min .burger-min{ display:inline-flex; opacity:1; }
.site-header.header-min .burger-min span{ background:#fff; }
.is-detail main#inhalt{ padding:0; }

/* Zentriertes Detail-Logo als EIGENSTÄNDIGES fixiertes Element (direktes Body-Kind).
   Nur so rechnet mix-blend-mode:difference mit dem Seiteninhalt dahinter (Schablonen-Effekt):
   über Schwarz weiss, über einem Bild die jeweilige Gegenfarbe. */
.rd-logo-fixed{ position:fixed; top:0; left:0; right:0; margin-inline:auto; width:max-content;
  height:100px; display:flex; align-items:center; justify-content:center; z-index:60;
  color:#fff; mix-blend-mode:difference; text-decoration:none; }
.rd-logo-fixed .kk-logo{ opacity:1; width:106px; height:auto; display:block; }
@media (max-width:760px){
  .rd-logo-fixed{ height:84px; }
  .rd-logo-fixed .kk-logo{ width:87px; }
}

/* Grundgerüst: zwei gleich breite Spalten, volle Höhe. */
.rd{ position:relative; }
.rd-grid{ display:grid; grid-template-columns:1fr 1fr; }
.rd-left{ background:#000; color:#fff; }
.rd-right{ background:#000; }

/* Linke Textspalte – bleibt beim Scrollen stehen (sticky). */
.rd-left-inner{ position:sticky; top:0; box-sizing:border-box; min-height:100vh;
  padding:calc(100px + 2.6rem) clamp(1.8rem,3.6vw,4rem) clamp(2.5rem,5vh,4rem);
  display:flex; flex-direction:column; justify-content:flex-start; }
/* Gestapelt (Handy/Tablet): Abstand zwischen Kopf (inkl. Vorschaubild) und Fliesstext,
   damit es nicht gedrängt wirkt. */
.rd-body{ margin-top:clamp(1.6rem,5.5vw,2.4rem); }

/* Linke Spalte ab Desktop zweigeteilt: Meta/Titel (A) | Fliesstext (B). */
@media (min-width:1100px){
  /* Titel + Meta ueber die volle Breite; darunter der Fliesstext zweispaltig, CTA darunter. */
  .rd-left-inner{ display:block; }
  .rd-title{ font-size:clamp(2rem,2.7vw,2.9rem); margin:0 0 clamp(1rem,1.8vw,1.6rem); }
  .rd-meta{ margin:0 0 clamp(2rem,3.6vw,3rem); }
  .rd-cols{ column-count:2; column-gap:clamp(1.6rem,2.6vw,3.2rem); }
  .rd-cols .rd-prose{ max-width:none; }
  .rd-prose h2, .rd-prose h3{ break-after:avoid; }
  .rd-prose li{ break-inside:avoid; }
  .rd-sec{ break-inside:avoid; }
}

.rd-eyebrow{ font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7; margin:0 0 1rem; }
.rd-title{ font-family:var(--font-display); font-weight:700; line-height:1.05; font-size:clamp(1.9rem,3.2vw,3rem); margin:0 0 1rem; color:#fff; }
.rd-sub{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.4; opacity:.85; margin:0 0 1.4rem; }
.rd-meta{ list-style:none; margin:0 0 1.8rem; padding:0; }
.rd-meta li{ color:#fff; font-size:.95rem; line-height:1.7; }
.rd-sub{ color:#fff; font-size:1.05rem; line-height:1.5; margin:0 0 1.4rem; }
.rd-client{ font-size:.95rem; margin:0 0 1.8rem; color:#fff; }
.rd-client strong{ opacity:1; }

/* Beschreibungstext in der schwarzen Spalte. */
.rd-prose{ max-width:46ch; }
.rd-prose, .rd-prose p, .rd-prose li{ color:#fff; }
.rd-prose h2,.rd-prose h3{ font-family:var(--font-display); font-weight:700; color:#fff; margin:2rem 0 .7rem; font-size:1.12rem; letter-spacing:.01em; }
.rd-prose h2:first-child,.rd-prose h3:first-child{ margin-top:0; }
.rd-prose p{ line-height:1.6; margin:0 0 1rem; }
.rd-prose ul{ list-style:none; margin:0 0 1rem; padding:0; }
.rd-prose li{ position:relative; padding-left:1.9rem; line-height:1.55; margin:.4rem 0; }
.rd-prose li::before{ content:""; position:absolute; left:0; top:.72em; width:1.1rem; height:2px; background:#fff; }
.rd-prose a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* Vorschaubild (Beitragsbild) links unter "Kunde" – volle Spaltenbreite, ohne runde Ecken. */
.rd-thumb{ margin:1.6rem 0 0; }
.rd-thumb-img, .rd-thumb img{ display:block; width:100%; height:auto; border-radius:0; }

/* CTA-Knopf (zur Web-App / Website). */
.rd-cta{ margin:2rem 0 0; }


/* Rechte Bildspalte – Originalverhältnis, randlos gestapelt. */
.rd-right{ display:flex; flex-direction:column; }
.rd-fig{ margin:0; }
.rd-fig:first-child{ padding-top:0; }
.rd-img,.rd-fig img{ display:block; width:100%; height:auto; }

/* Bilder einzeln nacheinander einblenden (nur mit JS, kein Flash). */
.rd-fig{ transition:opacity .7s ease, transform .7s ease; }
html.js .rd-fig:not(.is-in){ opacity:0; transform:translateY(26px); }
.rd-fig.is-in{ opacity:1; transform:none; }

/* Schwebende zeitliche Vor/Zurück-Navigation – runde weisse Knöpfe, unten mittig,
   symmetrisch zur Mittellinie (Stil wie der Nach-oben-Knopf). */
.rd-jumps{ position:fixed; left:50%; bottom:clamp(1rem,3vw,2rem); transform:translateX(-50%);
  display:flex; gap:1.1rem; z-index:60; }
.rd-jump{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:50%; background:#fff; color:#000; font:inherit; font-size:1.15rem; line-height:1; text-decoration:none;
  border:0; padding:0; -webkit-appearance:none; appearance:none; cursor:pointer; box-shadow:none; transition:none; }
.rd-jump span{ display:block; line-height:1; }
/* Eine Pfeil-Geometrie ueberall; Richtung nur per Rotation. */
.gd-ico-arrow{ width:22px; height:22px; display:block; }
.rd-jump-prev .gd-ico-arrow{ transform:scaleX(-1); }        /* nach links */
.gd-to-top .gd-ico-arrow{ transform:rotate(-90deg); width:20px; height:20px; }  /* nach oben */
.gd-btn-down .gd-ico-arrow{ transform:rotate(90deg); width:18px; height:18px; } /* nach unten */
.rd-jump:hover{ box-shadow:none; }
.rd-jump-prev:hover{ transform:none; }
.rd-jump-next:hover{ transform:none; }

/* Gestaffelte Einblendung der normalen Navigation (Rückweg von Detail). */
@keyframes navItemIn{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:translateY(0); } }
html.nav-intro .nav-list li{ opacity:0; animation:navItemIn .5s cubic-bezier(.4,.1,.2,1) forwards; animation-delay:calc(.14s + var(--i,0) * .08s); }

/* Mobil: Spalten stapeln – erst Text, dann Bilder. */
@media (max-width:900px){
  .rd{ background:#000; }
  .rd-grid{ display:flex; flex-direction:column; }
  .rd-left, .rd-right{ display:contents; }
  .rd-featured{ order:1; }                          /* Titelbild zuoberst */
  .rd-left-inner{ order:2; position:static; min-height:0; justify-content:flex-start; padding:clamp(1.6rem,6vw,2.2rem) clamp(1.3rem,6vw,2rem) clamp(2rem,6vh,3rem); }
  .rd-video{ order:3; }
  .rd-right > .rd-fig:not(.rd-featured){ order:4; }
  .rd-fig:first-child:not(.rd-featured){ padding-top:0; }
  .rd-featured.rd-fig{ padding-top:var(--hh); }     /* schwarze Zone: Header sitzt zuerst auf Schwarz, unabhaengig vom Referenztyp */
}

/* Bewegung reduzieren: alles sofort sichtbar, keine Animation. */
@media (prefers-reduced-motion: reduce){
  html.js .rd-fig:not(.is-in){ opacity:1; transform:none; }
  .rd-fig{ transition:none; }
  html.nav-intro .nav-list li{ animation:none; opacity:1; }
  .site-header.header-min .brand{ transition:none !important; }
}

/* Automatische Silbentrennung im Fliesstext (Sprache via <html lang="de">). */
main{ -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
/* Silbentrennung auch fuer Ueberschriften (site-weit, nicht nur Fliesstext). */
h1, h2, h3, h4, h5, h6,
.hh-title, .hh-eyebrow, .rd-title, .rd-eyebrow, .mm-main, .gd-section-head h2,
.legal-title, .close-title{
  -webkit-hyphens:manual; -ms-hyphens:manual; hyphens:manual; overflow-wrap:break-word; }
/* Buttons und Pfeil-Navigation nie trennen. */
.gd-btn, .rd-btn, .rd-jump, button{
  -webkit-hyphens:manual; -ms-hyphens:manual; hyphens:manual; }

/* ============================================================
   KOPF + KREIS-MENUE (Stand AC) — EIN Kopf ueberall.
   Lupe (weisser Kreis) links · Logo mittig (Schablone) · Hamburger (weisser Kreis) rechts.
   Kein Milchglas. Menue: Handy voll, Desktop 50% rechts, Kreis fuellt die Flaeche voll.
   Eingangs-Animation: grosses Logo mittig -> kleines Logo oben.
   ============================================================ */
:root{ --hh:100px; }
@media (max-width:720px){ :root{ --hh:84px; } }
.site-header{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:.5rem; z-index:70;
  /* background hier bewusst OHNE !important: diese Marke setzt einen
     Verlaufsbalken, siehe weiter unten. */
  box-shadow:none !important; border:0 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }html:not(.is-detail):not(.is-home):not(.is-landing):not(.is-legal) main#inhalt{ padding-top:var(--hh); }

/* Lupe + Hamburger als weisse Kreise, schwarzes Icon */
.hdr-search{ margin-right:auto; color:#000; }
.burger{ margin-left:auto; }   /* Hamburger immer rechts, auch wenn die Lupe ausgeblendet ist */
.hdr-search, .burger{ width:44px; height:44px; border-radius:50%; background:#fff;
  display:inline-flex; align-items:center; justify-content:center; padding:0; border:0;
  cursor:pointer; position:relative; z-index:5; opacity:1 !important;
  box-shadow:0 2px 12px -5px rgba(0,0,0,.3); }
.hdr-search svg{ width:20px; height:20px; }
body.menu-open .hdr-search{ display:none; }   /* Lupe beim Oeffnen weg (verdeckt sonst die Punkte) */

/* Hamburger-Striche zentriert im Kreis (Kreismitte 22px) */
.burger span{ position:absolute; top:50%; left:50%; width:20px; height:2px; margin-top:-1px; background:#000;
  border-radius:2px; transition:transform .3s cubic-bezier(.65,0,.2,1), opacity .2s ease; }
.burger span:nth-child(1){ top:50%; bottom:auto; transform:translate(-50%,-6px); }
.burger span:nth-child(2){ top:50%; bottom:auto; transform:translate(-50%,0); }
.burger span:nth-child(3){ top:50%; bottom:auto; transform:translate(-50%,6px); }
body.menu-open .burger span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translate(-50%,0) rotate(-45deg); }
.burger::after{ content:none !important; }

/* Zentriertes Body-Logo (Schablone) + Animationen */
.gd-logo-c{ position:fixed; top:0; left:0; right:0; margin-inline:auto; width:max-content;
  height:var(--hh); display:flex; align-items:center; justify-content:center; z-index:100;
  color:#fff; mix-blend-mode:difference; text-decoration:none;
  transform-origin:center center; transition:transform .5s cubic-bezier(.5,0,.12,1); }
.gd-logo-c .kk-logo{ width:104px; height:auto; display:block; opacity:1; }
body.menu-open .gd-logo-c{ transform:translate(calc(50vw - 48px), calc(100dvh - 114px)) rotate(90deg); }

/* --- Kreis-Menue --- */
html{ scrollbar-gutter:stable; }
body.menu-open{ overflow:hidden; }
.mm{ display:block; position:fixed; inset:0; z-index:1; background:#000; color:#fff;
  clip-path:circle(0px at var(--cx,100%) var(--cy,0px));
  transition:clip-path .55s cubic-bezier(.7,0,.2,1);
  pointer-events:none; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(var(--hh) / 2 - 0.35rem) clamp(1.3rem,5vw,3rem) calc(2.2rem + env(safe-area-inset-bottom)); }
body.menu-open .mm{ clip-path:circle(var(--r,175%) at var(--cx,100%) var(--cy,0px)); pointer-events:auto; }
@media (min-width:1024px){ .mm{ left:50%; } }

.mm-inner{ max-width:34rem; }
.mm-nav{ list-style:none; margin:0; padding:0; }
.mm-item{ margin-top:clamp(1.15rem,3.4vw,1.7rem); }
.mm-item:first-child{ margin-top:0; }
.mm-main{ display:inline-block; color:#fff; text-decoration:none; font-family:var(--font-display,inherit);
  font-weight:600; letter-spacing:-.01em; line-height:1.1; font-size:clamp(1.15rem,4.5vw,1.35rem);
  padding:.3rem 0; position:relative; }
.mm-main::after{ content:""; position:absolute; left:0; right:0; bottom:.1em; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.65,0,.2,1); }
.mm-main[aria-current="page"]::after{ transform:scaleX(1); }
@media (hover:hover){ .mm-main:hover::after{ transform:scaleX(1); } }
.mm-sub{ list-style:none; margin:.3rem 0 0; padding:0 0 0 1.3rem; }
.mm-sub li{ display:block; }
.mm-sub a{ display:inline-block; color:#fff; text-decoration:none; font-weight:400; font-size:1.02rem;
  opacity:.92; padding:.38rem 0; position:relative; }
.mm-sub a::after{ content:""; position:absolute; left:0; right:0; bottom:.05em; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.65,0,.2,1); }
.mm-sub a[aria-current="page"]{ opacity:1; }
.mm-sub a[aria-current="page"]::after{ transform:scaleX(1); }
@media (hover:hover){ .mm-sub a:hover::after{ transform:scaleX(1); } }
.mm-foot{ margin-top:clamp(2rem,7vw,3rem); display:flex; flex-direction:column; gap:.5rem; }
.mm-mail{ color:#fff; text-decoration:none; font-size:1.05rem; }
.mm-addr{ margin:0; color:#fff; opacity:.8; font-size:.95rem; }
.mm-social{ margin:.3rem 0 0; display:flex; gap:1.1rem; }
.mm-social a{ color:#fff; text-decoration:none; opacity:.85; font-size:.9rem; letter-spacing:.02em; }

@media (prefers-reduced-motion: reduce){
  .gd-logo-c, .mm{ transition:none; }
  html.intro-run .gd-logo-c{ transform:none; }
}

/* AD: Blur-Verlauf unter dem Kopf entfernen (kein Milchglas mehr) */
.site-header::after{ content:none !important; }

/* AF: Hover-Farbe fixieren (a:hover in Zeile 109 machte Menue-Punkte dunkel und stoerte das Logo) */
.gd-logo-c, .gd-logo-c:hover, .gd-logo-c:focus{ color:#fff; }
.mm a, .mm a:hover, .mm a:focus{ color:#fff; }


/* AH: Auf Referenz-/Detailseiten oeffnet das Menue invertiert – weisser Layer, schwarze Punkte.
   Das Logo braucht nichts: mix-blend-mode:difference macht es auf Weiss automatisch schwarz. */
html.is-detail .mm{ background:#fff; color:#000; }
html.is-detail .mm a, html.is-detail .mm a:hover, html.is-detail .mm a:focus,
html.is-detail .mm-mail, html.is-detail .mm-addr, html.is-detail .mm-social a{ color:#000; }

/* ============================================================
   STARTSEITEN-HERO (AJ): gesplittet. Links weiss/schwarz Text,
   rechts schwarzer Auto-Slider (neueste Referenzen, von unten nach oben).
   ============================================================ */
.home-hero{ position:relative; }

/* ===== FAQ als Accordion (semantisch: details/summary), Trennung via Abstand (keine Haarlinien) ===== */
.gd-faq{ margin-top:clamp(2rem,4vw,3rem); }
.landing-right > .gd-faq:first-child, .landing-right .gd-faq:first-child{ margin-top:0; }
.landing-right > .gd-interview:first-child{ margin-top:0; }
.gd-faq-item:first-child summary{ padding-top:0; }
.gd-faq-item{ margin:0; }
.gd-faq-item summary{ list-style:none; cursor:pointer; display:block; position:relative; padding:.55rem 2.2rem .55rem 0;
  font-weight:700; font-size:1rem; line-height:1.55; color:#000; }
.gd-faq-item summary::-webkit-details-marker{ display:none; }
.gd-faq-item summary::after{ content:"+"; position:absolute; right:.2rem; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; line-height:1; }
.gd-faq-item[open] summary::after{ content:"\2013"; }
.gd-faq-a{ padding:0 0 .6rem; }
.gd-faq-a p{ margin:0; }

/* Kundenstimmen: Sterne + Aggregat-Zeile (monochrom) */
.gd-tst-agg{ margin:.5rem 0 0; font-size:.9rem; color:#000; opacity:.75; }
.gd-tst-stars{ color:#000; font-size:1.15rem; letter-spacing:.15em; margin:0 auto 1.4rem; text-align:center; }

/* ===== Abschluss-Section: links Testimonial-Marquee (Farbkacheln, weisse Schrift), rechts Offertenformular ===== */
.home-close{ position:relative; }
.close-grid{ display:grid; grid-template-columns:1fr 1fr; min-height:100vh; min-height:100svh; }
.close-left{ position:relative; overflow:hidden; background:#000; }
.tst-slider{ position:absolute; inset:0; }
.tst-card{ box-sizing:border-box; width:100%; padding:clamp(1.8rem,3vw,3rem); color:#fff; }
.tst-stars{ font-size:1.05rem; letter-spacing:.15em; margin:0 0 1rem; }
.tst-quote{ font-size:clamp(1.1rem,1.4vw,1.4rem); line-height:1.55; margin:0 0 1.2rem; }
.tst-name{ font-weight:700; margin:0; }
.tst-role{ font-weight:400; opacity:.85; }
.close-right{ background:#fff; display:flex; align-items:center; }
.close-form-inner{ box-sizing:border-box; width:100%; max-width:40rem; margin-inline:auto; padding:clamp(3rem,7vh,5rem) clamp(1.6rem,4vw,4.5rem); }
.close-title{ font-family:var(--font-display); font-size:clamp(2rem,3.5vw,3rem); margin:0 0 1rem; }
.close-lead{ margin:0 0 2rem; max-width:34rem; }
.gd-offer{ display:flex; flex-direction:column; gap:1rem; }
.gd-offer label{ display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.95rem; color:#000; }
.gd-offer input, .gd-offer textarea, .gd-offer select{ font:inherit; padding:.85rem .95rem; border:0; border-radius:10px; background:var(--paper-2); color:#000; width:100%; appearance:none; -webkit-appearance:none; }
.gd-offer select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .95rem center; padding-right:2.6rem; cursor:pointer; }
.gd-offer input:focus, .gd-offer textarea:focus, .gd-offer select:focus{ outline:3px solid #000; outline-offset:2px; }
.gd-offer textarea{ resize:vertical; min-height:7.5rem; }
.gd-offer ::placeholder{ color:#000; opacity:.45; }
.gd-offer .gd-btn{ align-self:flex-start; margin-top:.4rem; }
@media (max-width:900px){
  .close-grid{ grid-template-columns:1fr; min-height:0; }
  .close-left{ order:-1; height:60vh; }
  .close-form-inner{ max-width:none; }
}

/* Offertenformular: erweiterte Felder + Datum in Stimmen */
.gd-offer-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.gd-opt{ font-weight:400; }
.gd-offer label .cap{ display:block; }
.tst-date{ margin:.4rem 0 0; font-size:.85rem; opacity:.8; color:#fff; }
.gd-tst-date{ margin:.5rem 0 0; font-size:.85rem; color:var(--ink-soft); }
@media (max-width:520px){ .gd-offer-row{ grid-template-columns:1fr; } }

/* Referenz-Detail: eingebettetes Video zuoberst in der rechten Spalte (16:9) */
.rd-video{ position:relative; aspect-ratio:16/9; margin:0 0 1rem; background:#000; }
.rd-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Offertenformular: Honeypot (unsichtbar), Datenschutz-Hinweis, Meldungen */
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.gd-offer-privacy{ font-size:.85rem; margin:.2rem 0 0; }
.gd-offer-privacy a{ color:inherit; }
.gd-offer-done{ font-weight:700; }
.gd-offer-error{ color:#000; font-weight:600; }

/* ── Legal-Seiten: weisse Textspalte (Titel + Accordion), rechts Referenz-Slider ── */
.is-legal .legal-inner{ justify-content:flex-start; max-width:48rem;
  padding-top:calc(var(--hh) + 2.2rem); padding-bottom:clamp(2.4rem,5vh,4rem); }
.legal-title{ font-size:clamp(2rem,4vw,3rem) !important; margin:0 0 1.4rem !important; color:#000; }
.legal-intro{ color:#000; font-size:1rem; line-height:1.6; margin:0 0 1.4rem; }
.legal-intro p{ margin:0 0 .9rem; }
.legal-acc details{ padding:.85rem 0; }
.legal-acc summary{ cursor:pointer; list-style:none; font-weight:700; font-size:1.05rem; color:#000;
  display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem; }
.legal-acc summary::-webkit-details-marker{ display:none; }
.legal-acc summary::after{ content:"+"; font-weight:400; font-size:1.4rem; line-height:1; flex:none; }
.legal-acc details[open] summary::after{ content:"\2013"; }
.legal-panel{ color:#000; font-size:.95rem; line-height:1.65; padding-top:.8rem; }
.legal-panel p{ margin:0 0 .9rem; }
.legal-panel ul{ margin:0 0 .9rem; padding-left:1.3rem; list-style:none; }
.legal-panel li{ position:relative; padding-left:1rem; margin:.3rem 0; }
.legal-panel li::before{ content:""; position:absolute; left:0; top:.7em; width:.7rem; height:2px; background:#000; }
.legal-panel a{ color:#000; text-decoration:underline; text-underline-offset:2px; word-break:break-word; }

/* ── Galerie-Raster + Vollbild-Lightbox (Landingpages mit galerie-Feld) ── */
.gd-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:clamp(.5rem,1.1vw,1rem); padding:0 clamp(1rem,4vw,3rem); }
.gd-gallery-item{ position:relative; display:block; margin:0; padding:0; border:0; background:#000; cursor:zoom-in; overflow:hidden; aspect-ratio:4/5; border-radius:2px; }
.gd-gallery-img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.gd-gallery-item:hover .gd-gallery-img{ transform:scale(1.045); }
.gd-gallery-tag{ position:absolute; left:.6rem; bottom:.55rem; font-size:.72rem; letter-spacing:.03em; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.gd-gallery-item:hover .gd-gallery-tag{ opacity:1; }

.gd-lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.94); display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.gd-lightbox[hidden]{ display:none; }
.gd-lb-stage{ margin:0; display:flex; align-items:center; justify-content:center; }
.gd-lb-img{ max-width:92vw; max-height:86vh; width:auto; height:auto; object-fit:contain; display:block; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); }
.gd-lb-close{ position:fixed; top:1rem; right:1rem; width:46px; height:46px; border-radius:50%; background:#fff; color:#000; border:0; font-size:1.6rem; line-height:1; cursor:pointer; z-index:202; display:inline-flex; align-items:center; justify-content:center; }
.gd-lb-nav{ z-index:202; }   /* ueber dem Lightbox-Hintergrund; erbt Position/Stil von .rd-jumps */

/* ── Terminformular: Slot-Auswahl (Bewerbungsfoto) ── */
html{ scroll-behavior:smooth; }
.gd-btn-down::after{ content:none; }
.gd-btn-down span{ display:inline-block; margin-left:.3em; }
#offerte{ scroll-margin-top:calc(var(--hh) + 1rem); }
.gd-slot-intro{ font-size:.9rem; opacity:.85; margin:.2rem 0 .4rem; }
.gd-slot{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-items:end; margin:0 0 .6rem; }
.gd-slot .gd-slot-lab{ display:flex; flex-direction:column; font-size:.85rem; }
.gd-slot-date, .gd-slot-time{ font:inherit; padding:.6rem .7rem; border:0; border-radius:8px; background:var(--paper-2,#f4f3f1); color:#000; margin-top:.25rem; }
.gd-slot-note{ grid-column:1 / -1; font-size:.82rem; color:#000; min-height:1em; }
.gd-slot-note:not(:empty){ padding:.2rem 0; }
@media (max-width:520px){ .gd-slot{ grid-template-columns:1fr; } }
.home-logoband{ padding-bottom:clamp(1.2rem,2.5vw,2rem); }
.home-logos{ display:none; }  /* alte Extra-Section entfernt */
.gd-footer-badge{ display:block; width:100%; max-width:150px; margin:.9rem 0 1.6rem; }
.gd-footer-badge img{ display:block; width:100%; height:auto; }

/* ── Split-Layout (Über mich): Lead + Prose-Überschriften links ── */
.legal-lead{ font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.55; color:#000; margin:0 0 1.5rem; }
.legal-inner .legal-intro h2{ font-size:clamp(1.3rem,2.4vw,1.7rem); margin:2rem 0 .6rem; color:#000; }
.legal-inner .legal-intro h3{ font-size:1.05rem; margin:1.3rem 0 .3rem; color:#000; }
.legal-inner .legal-intro p{ margin:0 0 .9rem; }

/* ── Split-Layout Feinschliff: weniger Abstand oben + Netzwerk-Links ── */
.is-split .legal-inner{ padding-top:calc(var(--hh) + 1.7rem); }
.netz-link{ margin:.45rem 0 2rem; }
.netz-link a{ color:#000; text-decoration:underline; text-underline-offset:3px; font-weight:600; word-break:break-word; }

/* ── Split-H1 gleich gross wie Landing + saubere Silbentrennung nur im Hero-Titel ── */
.is-split .legal-title{ font-size:clamp(2.5rem,5.2vw,4.2rem) !important; letter-spacing:-.025em; }
.gd-map iframe{ width:100%; height:100%; border:0; display:block; }
.gd-map-load{ position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; padding:2rem; text-align:center;
  background:var(--petrol); color:#fff; border:0; cursor:pointer; font-family:inherit; }
.gd-map-title{ font-weight:700; font-size:1.1rem; text-decoration:underline; text-underline-offset:4px; }
.gd-map-load small{ max-width:22rem; opacity:.9; font-size:.85rem; line-height:1.45; }

.kontakt-block{ margin:0 0 1.6rem; }
.kontakt-block h2{ font-size:1.05rem; margin:0 0 .5rem; color:#000; }
.kontakt-address{ font-style:normal; line-height:1.65; color:#000; }
.kontakt-actions{ margin:0 0 1.7rem; }
.kontakt-mail{ margin:.95rem 0 0; color:#000; }
.kontakt-hours{ border-collapse:collapse; }
.kontakt-hours th{ text-align:left; font-weight:600; padding:.15rem 1.6rem .15rem 0; color:#000; white-space:nowrap; }
.kontakt-hours td{ color:#000; }
.kontakt-note{ margin:.7rem 0 0; font-size:.9rem; color:#000; opacity:.8; }

.kontakt-anfahrt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.5rem; margin-top:1rem; }
.kontakt-anfahrt-grid h3{ font-size:1rem; margin:0 0 .3rem; }
.kontakt-anfahrt-link{ margin-top:1.3rem; }
.kontakt-anfahrt-link a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:700px){ .kontakt-anfahrt-grid{ grid-template-columns:1fr; } }

.kontakt-form-wrap{ max-width:44rem; }
.kontakt-form-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem; }
.kontakt-form-head h2{ margin:0; }
.gd-reviews{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; color:inherit; }
.gd-reviews-stars{ color:#f5a623; letter-spacing:1px; }
.gd-reviews-text{ font-size:.9rem; }

/* ── Kontakt: Karte sofort, 3 Buttons, Footer-Badge ── */
.gd-map-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.gd-btn-plain::after{ content:none !important; }
.kontakt-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; margin:1.5rem 0 1.9rem; }
.kontakt-actions .gd-btn{ font-size:.95rem; }
.kontakt-anfahrt p{ margin:0 0 .7rem; }
.gd-footer-reviews{ display:inline-flex; margin:.2rem 0 1.6rem; text-decoration:none; }
.gd-footer-reviews .gd-reviews-text{ color:#000; font-size:.9rem; }

/* Lead/Intro ohne Silbentrennung (wie Überschriften) */
.hh-lead, .legal-lead{ -webkit-hyphens:manual; -ms-hyphens:manual; hyphens:manual; }

/* ── CMS-Vergleichstabelle (Webdesign) ── */
.cms-compare{ margin:1.8rem 0 1.4rem; }
.cms-compare table{ width:100%; border-collapse:separate; border-spacing:0; }
.cms-compare th, .cms-compare td{ padding:.75rem 1rem; text-align:left; vertical-align:top; font-size:.95rem; line-height:1.45; color:#000; }
.cms-compare thead th{ font-weight:700; }
.cms-compare tbody th.cc-dim{ font-weight:700; white-space:nowrap; }
.cms-compare tbody tr:nth-child(even) th.cc-dim, .cms-compare tbody tr:nth-child(even) td:not(.cc-gd){ background:rgba(0,0,0,.025); }
.cms-compare .cc-gd{ background:var(--petrol-tint,#efece8); }
.cms-compare thead th.cc-gd{ border-radius:10px 10px 0 0; }
.cms-compare tbody tr:last-child td.cc-gd{ border-radius:0 0 10px 10px; }
@media (max-width:640px){
  .cms-compare thead{ display:none; }
  .cms-compare table, .cms-compare tbody, .cms-compare tr, .cms-compare th, .cms-compare td{ display:block; width:auto; }
  .cms-compare tbody tr{ margin:0 0 1.4rem; }
  .cms-compare tbody th.cc-dim{ font-size:1.08rem; padding:0 0 .35rem; background:none !important; white-space:normal; }
  .cms-compare tbody td{ padding:.25rem 0; background:none !important; border-radius:0 !important; }
  .cms-compare tbody td[data-label]::before{ content:attr(data-label) ": "; font-weight:700; }
  .cms-compare tbody td.cc-gd[data-label]::before{ color:var(--petrol,#90897E); }
}

/* Verlinkte Section-Überschrift (Referenzen -> Übersicht) */
.gd-head-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.gd-head-link .gd-ico-arrow{ width:.8em; height:.8em; opacity:.55; transition:opacity .2s ease, transform .2s ease; }
.gd-head-link:hover .gd-ico-arrow{ opacity:1; transform:translateX(3px); }

/* ── Referenzen-Übersicht: Filter-Pills ── */
.ref-overview{ padding-top:clamp(2.5rem,5vw,4rem); }
.ref-filters{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.ref-pill{ appearance:none; border:0; cursor:pointer; font-family:inherit; font-size:.9rem; font-weight:600;
  padding:.5rem 1.1rem; border-radius:999px; background:rgba(0,0,0,.05); color:#000;
  transition:background-color .2s ease, color .2s ease; }
.ref-pill:hover{ background:rgba(0,0,0,.1); }
.ref-pill.is-active{ background:#000; color:#fff; }
.ref-empty-note{ text-align:center; opacity:.7; padding:2.5rem 1rem; }
.is-refintro .legal-inner{ justify-content:center; padding-top:var(--hh); padding-bottom:var(--hh); }

/* Footer-Spalten: noch nicht verlinkte Punkte – gleiche Optik wie Links, aber nicht klickbar */
.gd-footer-col li span{ color:#000; font-size:.94rem; opacity:.85; cursor:default; }

/* ── Logo-Galerie: quadratisch, randlos; graue Section hebt die Logos ab ── */
.gd-logos-section{ background:#eeeeee; padding-top:clamp(2.5rem,5vw,4rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.gd-gallery.is-logos{ grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:clamp(.6rem,1.4vw,1.2rem); }
.gd-gallery.is-logos .gd-gallery-item{ aspect-ratio:1/1; background:transparent; cursor:zoom-in; border-radius:0; }
.gd-gallery.is-logos .gd-gallery-img{ object-fit:cover; padding:0; background:transparent; }
.gd-gallery.is-logos .gd-gallery-item:hover .gd-gallery-img{ transform:scale(1.03); }
.gd-gallery.is-logos .gd-gallery-tag{ display:none; }

/* ── 404-Seite ── */
.not-found{ padding-top:clamp(3rem,7vw,6rem); padding-bottom:clamp(3rem,7vw,6rem); }
.nf-inner{ max-width:40rem; margin:0 auto; text-align:center; }
.nf-code{ font-size:clamp(3rem,10vw,6rem); font-weight:800; line-height:1; margin:0 0 .5rem; color:var(--petrol,#90897E); }
.nf-inner h1{ margin:0 0 1rem; }
.nf-lead{ color:#000; margin:0 0 1.8rem; }
.nf-links{ display:flex; justify-content:center; margin:0 0 1.4rem; }
.nf-more{ font-size:.95rem; color:#000; }
.nf-more a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }

/* ── Startup Package: Kundinnen-Interview (abgehobene Section, zweispaltig) ── */
.gd-interview{ --iv-bg:#e7f1e3; background:var(--iv-bg); padding:clamp(1.6rem,4vw,2.8rem); margin:2.2rem 0; }
.gd-interview .iv-kicker{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:#000; margin:0 0 .35rem; }
.gd-interview .iv-title{ margin:0 0 .7rem; }
.gd-interview .iv-lead{ color:#000; margin:0 0 1.4rem; }
.gd-interview .iv-images{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; margin:0 0 1.5rem; }
.gd-interview .iv-images img{ width:100%; height:auto; display:block; }
.gd-interview .iv-images-single{ grid-template-columns:1fr; }
.gd-interview .iv-qa{ }
.gd-interview .iv-pair{ break-inside:avoid; margin:0 0 1.1rem; }
.gd-interview .iv-q{ font-weight:700; color:#000; margin:0 0 .25rem; }
.gd-interview .iv-qa p{ color:#000; }
.gd-interview .gd-btn{ margin-top:1.3rem; }
@media (max-width:640px){ .gd-interview .iv-qa{ columns:1; } }

/* Logodesign: Galerie-Sektion vollflaechig hellgrau (kaskaden-sicher am Dateiende) */
section.gd-section.gd-logos-section{ background:#eeeeee; }

/* Google-Bewertungen prominent (Startseite) */
.gd-trust{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:#000; margin:0 0 1.4rem; }
.gd-trust-stars{ color:#F5A623; font-size:1.05rem; letter-spacing:.06em; }
.gd-trust-text{ font-size:1rem; }
.gd-trust b{ font-weight:700; }
.gd-trust:hover .gd-trust-text{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){
  /* Smartphone: Sterne oben zentriert, Text darunter (nur Startseite, nicht Footer) */
  .gd-trust{ flex-direction:column; align-items:center; text-align:center; gap:.3rem; }
  .gd-trust-text{ font-size:.95rem; }
}

/* =========================================================
   FAHRSCHULE NEXT — Marken-Bausteine
   Der Verlauf ist Flaeche, nicht Zierde. Auf ihm gilt:
   Textfarbe durchgehend Schwarz. Weiss loest sich auf dem
   gelben Ende auf (Kontrast ~1.7:1), Schwarz traegt ueber
   den ganzen Verlauf.
   ========================================================= */

.fs-gradient { background: var(--accent-gradient); }
.fs-gradient,
.fs-gradient h1, .fs-gradient h2, .fs-gradient h3,
.fs-gradient p,  .fs-gradient li, .fs-gradient a,
.fs-gradient b,  .fs-gradient strong { color: var(--ink); }
.fs-gradient a { text-decoration: underline; text-underline-offset: .18em; }

.fs-dark { background: var(--petrol); color: #fff; }
.fs-dark h1, .fs-dark h2, .fs-dark h3, .fs-dark p { color: #fff; }

/* --- Kopfzone einer Seite --- */
.fs-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem); }
.fs-head h1 { margin: 0 0 .4em; }
.fs-head .eyebrow { margin: 0 0 .6em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; }
.fs-head .page-lead { margin: 0; font-size: 1.12rem; }

/* --- Hero --- */
.fs-hero { background: #fff; padding: clamp(3rem, 9vw, 7rem) 0; text-align: center; }
.fs-hero-logo { max-width: min(90%, 640px); margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); }
.fs-hero-logo img { width: 100%; height: auto; display: block; }
.fs-hero-title { margin: 0 0 .5em; }  /* Auszeichnung siehe unten */
.fs-hero-lead  { margin: 0 0 .8em; font-size: 1.08rem; }
.fs-hero-claim { margin: 0 0 clamp(1.5rem, 4vw, 2.2rem); font-size: 1.08rem; }

/* --- Verlaufsband mit Textspalte + Aktionsleiste --- */
.fs-band { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.fs-band-title { margin: 0 0 clamp(1.5rem, 4vw, 2.4rem); }
.fs-band-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .fs-band-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); align-items: start; } }
.fs-band-text h2 { margin-top: 0; }
.fs-band-text h3 { margin: 1.6em 0 .4em; font-size: 1.12rem; text-transform: uppercase; letter-spacing: .03em; }
.fs-quote { font-weight: 700; }

/* Das Portraet ist ein Freisteller und bringt seine runde Form selbst mit.
   Darum hier keine Maske und kein Hintergrund - sonst schneidet der Kreis
   die Kanten an und legt eine zweite Flaeche darunter. */
.fs-portrait { width: min(62vw, 300px); margin: 0 auto clamp(1.5rem, 4vw, 2.2rem); }
.fs-portrait img { width: 100%; height: auto; display: block; }

.fs-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.fs-action {
    display: inline-flex; align-items: center; gap: .8rem;
    padding: .85em 1.4em; border-radius: 999px;
    background: #fff; color: var(--ink);
    font-weight: 700; text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fs-gradient .fs-action { text-decoration: none; }
.fs-action:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.fs-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* --- Knopf mit Verlauf --- */
.fs-btn {
    display: inline-flex; align-items: center; gap: .7rem;
    padding: .95em 1.7em; border-radius: 999px;
    font-weight: 700; text-decoration: none; color: var(--ink);
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fs-btn-grad { background: var(--accent-gradient); }
.fs-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fs-gradient .fs-btn { text-decoration: none; }

/* --- Blog-Karten: Bild mit Abdunklung, Titel oben, Knopf unten --- */
.fs-cards { display: grid; gap: clamp(1.2rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .fs-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fs-cards { grid-template-columns: repeat(3, 1fr); } }
.fs-card {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 280px; padding: 1.4rem; border-radius: var(--radius);
    overflow: hidden; background: var(--petrol); isolation: isolate;
}
.fs-card-media { position: absolute; inset: 0; z-index: -2; }
.fs-card-img   { width: 100%; height: 100%; object-fit: cover; display: block; }
.fs-card-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.45) 100%); }
.fs-card-title { margin: 0; color: #fff; font-size: 1.25rem; line-height: 1.25; }
.fs-gradient .fs-card-title { color: #fff; }
.fs-card-btn   { align-self: flex-start; margin-top: 1.5rem; }

/* --- Bewertungen --- */
.fs-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.fs-stars { color: var(--rating); font-size: 1.35rem; letter-spacing: .08em; }
.fs-rating-txt { font-size: 1.02rem; }
.fs-rating-note { margin: 0; color: #BEBEBE; font-size: .92rem; }

/* --- Accordion fuer Rechtstexte --- */
.fs-acc { margin-top: 2rem; }
.fs-acc details { padding: 1rem 0; }
.fs-acc summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; }
.fs-acc summary::-webkit-details-marker { display: none; }
.fs-acc summary::after { content: '+'; float: right; font-weight: 400; }
.fs-acc details[open] summary::after { content: '–'; }

.fs-beitrag-bild { margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); max-width: 800px; }
.fs-beitrag-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); }

/* Fliesstext auf Weiss darf gedaempft sein, auf dem Verlauf nie. */
.section .prose p { color: var(--ink); }

/* =========================================================
   FAHRSCHULE NEXT - Korrekturen gegen das Erbe der Vorlage

   Zwei Dinge muessen hier gewonnen werden:

   1) Die Zebra-Regel `main#inhalt > section:nth-of-type(odd|even)`
      enthaelt eine ID und schlaegt jede Klassenregel. Die
      Verlaufsflaechen brauchen deshalb dieselbe Struktur im
      Selektor, sonst bleiben sie weiss.

   2) Der Kopf der Vorlage ist ein freistehendes, mittig fixiertes
      Logo mit mix-blend-mode. Diese Marke braucht stattdessen einen
      Verlaufsbalken mit Logo links und Menue rechts.
   ========================================================= */

/* --- 1) Flaechen setzen sich gegen die Zebra-Regel durch --- */
main#inhalt > section.fs-gradient { background: var(--accent-gradient); }
main#inhalt > section.fs-dark     { background: var(--petrol); }
main#inhalt > section.fs-hero     { background: var(--petrol-tint); }

main#inhalt > section.fs-gradient,
main#inhalt > section.fs-gradient h1, main#inhalt > section.fs-gradient h2,
main#inhalt > section.fs-gradient h3, main#inhalt > section.fs-gradient p,
main#inhalt > section.fs-gradient li, main#inhalt > section.fs-gradient b,
main#inhalt > section.fs-gradient strong { color: var(--ink); }

main#inhalt > section.fs-dark,
main#inhalt > section.fs-dark h1, main#inhalt > section.fs-dark h2,
main#inhalt > section.fs-dark h3, main#inhalt > section.fs-dark p { color: #fff; }
main#inhalt > section.fs-dark .fs-rating-note { color: #BEBEBE; }

/* Karten-Titel bleiben weiss, auch im Verlaufsband. */
main#inhalt > section.fs-gradient .fs-card-title { color: #fff; }

/* --- 2) Kopf: Verlaufsbalken, Logo links, Navigation rechts --- */
.site-header {
    background: var(--accent-gradient);
    color: #fff;
    height: var(--hh);
    display: block;
    padding: 0;
}
/* Inhalt auf dieselbe Breite wie die Sektionen darunter (--wrap).
   Der Verlaufsbalken selbst laeuft weiterhin ueber die volle Breite. */
.hdr-inner {
    max-width: var(--wrap);
    margin-inline: auto;
    height: 100%;
    display: flex; align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: 0 clamp(1.1rem, 4vw, 2rem);
}

.hdr-logo { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.hdr-logo .kk-logo { display: block; width: clamp(120px, 14vw, 178px); }
.hdr-logo .kk-logo img { width: 100%; height: auto; display: block; }
.hdr-logo .kk-logo-text {
    font-family: var(--font-display); font-weight: 700; color: #fff;
    font-size: clamp(1rem, 2.2vw, 1.35rem); white-space: nowrap;
}

/* --- Navigation: weiss, Grossbuchstaben, aktiv/hover schwarz --- */
.hdr-nav { margin-left: auto; }
.hdr-nav-list { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); list-style: none; margin: 0; padding: 0; }
.hdr-nav-item { position: relative; }
.hdr-nav-link {
    display: inline-flex; align-items: center; gap: .35em;
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(.82rem, 1.05vw, .95rem);
    letter-spacing: .06em; text-transform: uppercase;
    color: #fff; text-decoration: none;
    padding: .5em 0;
    transition: color .18s ease;
}
.hdr-nav-link:hover,
.hdr-nav-link:focus-visible,
.hdr-nav-link[aria-current="page"] { color: var(--ink); }
.nav-caret { transition: transform .22s ease; }
.hdr-nav-item.has-sub:hover .nav-caret,
.hdr-nav-item.has-sub:focus-within .nav-caret { transform: rotate(180deg); }

/* Aufklappmenue (Angebot) */
.hdr-sub {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
    min-width: 15rem; margin: 0; padding: .5rem 0; list-style: none;
    background: #fff; border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 60;
}
.hdr-nav-item.has-sub:hover .hdr-sub,
.hdr-nav-item.has-sub:focus-within .hdr-sub {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.hdr-sub a {
    display: block; padding: .62em 1.2em;
    font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none;
    white-space: nowrap;
}
.hdr-sub a:hover, .hdr-sub a[aria-current="page"] { background: var(--petrol-tint); }

/* Lupe entfaellt im Kopf dieser Marke, Hamburger nur auf schmalen Schirmen. */
.hdr-search { display: none; }
.burger { display: none; }
@media (max-width: 900px) {
    .hdr-nav { display: none; }
    .burger { display: inline-flex; color: #fff; margin-left: 0; }
    .burger span { background: #fff; }
}

/* --- 3) Hero: Stadtplan im Hintergrund, Inhalt mittig --- */
main#inhalt > section.fs-hero {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    min-height: calc(100svh - var(--hh));
    padding: clamp(2rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2.6rem);
    /* Reines Weiss: helle Grafiken heben sich sonst nicht vom Grund ab -
       genau daran lag es, dass die Hintergrundbilder unsichtbar blieben. */
    background: #fff;
    overflow: hidden;
    text-align: center;
}
.fs-hero-bg {
    position: absolute; inset: -10% 0 -10%;
    /* Deckkraft ueber eine Variable, damit sie pro Projekt und pro Seite
       anpassbar ist. Helle Strichgrafiken brauchen volle Deckkraft, sonst
       verschwinden sie auf dem hellgrauen Grund. */
    opacity: var(--hero-bg-deckkraft, 1);
    will-change: transform;
    z-index: 0;
    overflow: hidden;
    /* Kein transform im Ausgangszustand: Lighthouse wertet Elemente, die
       sich beim Laden bewegen, nicht als LCP-Kandidaten. */
    transform: none;
}
/* Das Bild liegt als <img> in der Flaeche, nicht als background-image:
   SVG ohne feste Masse liefert keine intrinsische Groesse, womit
   background-size:cover nichts zu rechnen haette. Ein img bekommt seine
   Groesse vom Container und funktioniert mit jedem Format gleich. */
.fs-hero-bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.fs-hero-inner { position: relative; z-index: 1; max-width: 44rem; }
.fs-hero-logo { max-width: min(88%, 620px); margin: 0 auto clamp(1.4rem, 3.5vw, 2.4rem); }
.fs-hero-logo img { width: 100%; height: auto; display: block; }

/* Abwaerts-Pfeil im Knopf pulsiert dezent. */
html.geladen .fs-btn-down .fs-ico { animation: fsNudge 2.4s ease-in-out infinite; }
@keyframes fsNudge {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .fs-btn-down .fs-ico { animation: none; }
    .fs-hero-bg { transform: none !important; }
}

/* =========================================================
   Aufklappbare Blöcke (Akkordeon / FAQ)
   <details>/<summary>: kein JavaScript nötig, tastaturbedienbar,
   und der Inhalt steht auch zugeklappt im HTML - also für
   Suchmaschinen und KI-Systeme lesbar.
   ========================================================= */

.gd-akk {
    background: #EDEDED;
    border-radius: 12px;
    margin: .7rem 0;
    overflow: hidden;
}
.gd-akk > summary {
    display: flex; align-items: center; gap: .6em;
    padding: .8em 1.15em;
    font-size: .98rem;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
}
.gd-akk > summary::-webkit-details-marker { display: none; }
/* Dreieck links vor dem Titel, wie in der Vorlage. */
.gd-akk > summary::before {
    content: '';
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: .34em solid currentColor;
    border-top: .27em solid transparent;
    border-bottom: .27em solid transparent;
    transition: transform .2s ease;
    opacity: .7;
}
.gd-akk[open] > summary::before { transform: rotate(90deg); }
.gd-akk > summary:hover { background: #E5E5E5; }
/* Kein Einzug: der Inhalt beginnt buendig unter dem Titel, nicht
   eingerueckt neben dem Dreieck - das wirkte wie ein Fehler. */
.gd-akk-inhalt { padding: 0 1.15em 1.1em; }
.gd-akk-inhalt > :first-child { margin-top: 0; }
.gd-akk-inhalt > :last-child { margin-bottom: 0; }
.gd-akk-inhalt ul { margin: .6em 0; padding-left: 1.15em; }
.gd-akk-inhalt li { margin: .25em 0; }

/* Auf dunklem Grund heller absetzen. */
.fs-dark .gd-akk { background: rgba(255, 255, 255, .10); }
.fs-dark .gd-akk > summary:hover { background: rgba(255, 255, 255, .15); }

/* Bilder im Fliesstext */
.md-bild { margin: 1.6rem 0; }
.md-bild img { width: 100%; height: auto; display: block; border-radius: var(--radius, 12px); }
.md-bild figcaption { margin-top: .5rem; font-size: .88rem; opacity: .75; }

/* =========================================================
   Feinschliff nach Vorlage
   ========================================================= */

/* Hero: Startseite fast bildschirmfuellend, Unterseiten halbe Hoehe. */
main#inhalt > section.fs-hero-klein {
    min-height: 52vh;
    padding-block: clamp(2rem, 5vw, 3.5rem);
}
.fs-hero-klein .fs-hero-logo { max-width: min(82%, 520px); }
.fs-hero-klein .fs-hero-title { margin-bottom: 0; }

/* Zwischentitel: schwarz, kraeftiger und groesser als der Fliesstext. */
.fs-band .prose h2,
main#inhalt > section.fs-gradient .prose h2 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    margin: 2rem 0 .8rem;
    color: #fff;
}
.fs-band .prose h2:first-child { margin-top: 0; }
.fs-band .prose h3 {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    margin: 1.6rem 0 .5rem;
    color: #fff;
}
/* Innerhalb der hellen Akkordeon-Karten bleiben Titel dunkel, sonst
   waeren sie auf Hellgrau unlesbar. */
.gd-akk-inhalt h2, .gd-akk-inhalt h3 { color: var(--ink) !important; }

/* Links im Fliesstext: schwarz und unterstrichen, nicht farbig. */
main#inhalt > section.fs-gradient .prose a:not(.fs-btn),
.gd-akk-inhalt a:not(.fs-btn) {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .16em;
    text-decoration-thickness: 1px;
}
main#inhalt > section.fs-gradient .prose a:not(.fs-btn):hover,
.gd-akk-inhalt a:not(.fs-btn):hover { text-decoration-thickness: 2px; }

/* Aufzaehlungen mit echten Punkten. */
.fs-band .prose ul:not(.gd-liste-haken) { list-style: disc; padding-left: 1.3em; margin: .9em 0; }
/* Gutzeichen statt Punkt: sonst erscheinen beide. */
.fs-band .prose ul.gd-liste-haken { list-style: none; padding-left: 0; }
.fs-band .prose ol { padding-left: 1.4em; margin: .9em 0; }
.fs-band .prose li { margin: .35em 0; }

/* Bewertungsblock mit eigenem Hintergrundbild (fest, nicht bearbeitbar). */
/* (alter Bewertungsblock entfernt - ersetzt weiter unten) */Versalien, gleiche Auszeichnung wie die Zwischentitel. */
/* H1 einheitlich: gleiche Auszeichnung wie die Zwischentitel, keine
   Versalien. Mit main#inhalt davor, damit die Zebra-artigen Regeln der
   Vorlage sie nicht ueberschreiben. */
main#inhalt .fs-hero-title,
.fs-hero-title {
    font-family: var(--font-display);
    font-weight: 900;
    /* Versalien und gross: Die H1 ist das Erste, was man sieht, und die
       Marke richtet sich an junge Leute - da darf sie zupacken.
       Negative Sperrung, damit die Grossbuchstaben nicht auseinanderfallen. */
    text-transform: uppercase;
    font-size: clamp(3rem, 8.5vw, 6.5rem);
    letter-spacing: -.03em;
    line-height: .95;
}

/* Logo auf Unterseiten so breit wie auf der Startseite. */
.fs-hero-klein .fs-hero-logo { max-width: min(88%, 620px); }

/* =========================================================
   Listen: dritte Art mit Gutzeichen, sanftes Einblenden
   ========================================================= */

.gd-liste { margin: .9em 0; }
.gd-liste li { margin: .35em 0; }

/* Liste mit Gutzeichen */
.gd-liste-haken {
    list-style: none;
    padding-left: 0;
}
.gd-liste-haken li {
    position: relative;
    padding-left: 1.9em;
}
.gd-liste-haken li::before {
    content: '';
    position: absolute;
    left: .25em; top: .42em;
    width: .62em; height: .34em;
    border-left: .17em solid currentColor;
    border-bottom: .17em solid currentColor;
    transform: rotate(-45deg);
}

/* Einträge blenden nacheinander ein, sobald die Liste sichtbar wird.
   Ohne JavaScript oder bei reduzierter Bewegung sind sie sofort da -
   Inhalt darf nie von einer Animation abhängen. */
.js .gd-liste[data-fade] > li {
    opacity: 0;
    transform: translateY(.5rem);
}
.js .gd-liste[data-fade].ist-sichtbar > li {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
    .js .gd-liste[data-fade] > li { opacity: 1; transform: none; }
    .js .gd-liste[data-fade].ist-sichtbar > li { transition: none; }
}

/* Kopfzeile eines Akkordeon-Punkts im Studio */

/* =========================================================
   Mobile Navigation
   Kein Kreis um den Hamburger, Verlaufsfläche beim Öffnen,
   Menüpunkte in Versalien mit Schriftdicke 900.
   ========================================================= */

/* Hamburger: weisses Icon direkt auf dem Verlauf, ohne Kreis. */
@media (max-width: 900px) {
    .burger {
        width: 44px; height: 44px;
        background: none;
        border-radius: 0;
        box-shadow: none;
    }
    /* Schwarz auf dem Verlauf: besser sichtbar als Weiss, besonders
       am gelben Ende. */
    .burger span { background: var(--ink); }
}

/* Menüfläche im Markenverlauf statt Schwarz. */
.mm { background: var(--accent-gradient); color: var(--ink); }
.mm a, .mm a:hover, .mm a:focus { color: var(--ink); }

/* Menüpunkte: Versalien, Schriftdicke 900, durchgehend Schwarz.
   Auf dem Handy zählt der Kontrast mehr als die Feinheit - Schwarz
   trägt über den ganzen Verlauf, Weiss verliert am gelben Ende. */
.mm-main {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: clamp(1.25rem, 5.2vw, 1.6rem);
    color: var(--ink);
}
.mm a.mm-main { color: var(--ink); }

/* Aktiver Punkt zusätzlich mit Unterlinie. */
.mm-main::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .1em;
    height: 3px; background: currentColor;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .32s cubic-bezier(.65, 0, .2, 1);
}
.mm a.mm-main[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) { .mm-main:hover::after { transform: scaleX(1); } }

.mm-sub a {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .95rem;
    color: var(--ink);
    opacity: 1;
}

/* Punkte blenden nacheinander ein, sobald sich das Menü öffnet -
   dieselbe Handschrift wie bei den Listen im Inhalt. */
.js .mm .mm-item {
    opacity: 0;
    transform: translateY(.7rem);
}
body.menu-open .mm .mm-item {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease, transform .45s ease;
    transition-delay: calc(.18s + var(--i, 0) * 65ms);
}
@media (prefers-reduced-motion: reduce) {
    .js .mm .mm-item { opacity: 1; transform: none; }
    body.menu-open .mm .mm-item { transition: none; }
}

/* =========================================================
   Footer: eine zentrierte Zeile, darunter der Agentur-Hinweis
   ========================================================= */
.site-footer {
    background: var(--petrol);
    color: #fff;
    padding: clamp(2.2rem, 5vw, 3.2rem) 0 clamp(2.4rem, 5vw, 3.4rem);
    text-align: center;
}
.footer-zeile {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.7;
}
.footer-zeile a { color: var(--accent-from); text-decoration: none; }
.footer-zeile a:hover { text-decoration: underline; }
.footer-trenner { opacity: .45; margin: 0 .15em; font-weight: 400; }

.footer-agentur {
    margin: .9rem 0 0;
    font-size: .8rem;
}
/* Ganzer Ausdruck als Link, im selben Gruen wie die Zeile darueber -
   aber kleiner, damit die Rechtslinks fuehrend bleiben. */
.footer-agentur a { color: var(--accent-from); text-decoration: none; }
.footer-agentur a:hover { text-decoration: underline; }

/* =========================================================
   Google-Bewertungen
   ========================================================= */
/* Die Zebra-Regel `main#inhalt > section:nth-of-type(odd|even)` enthaelt
   eine ID und schlaegt jede reine Klassenregel. Deshalb hier dieselbe
   Struktur im Selektor, sonst bleibt die Flaeche weiss oder durchsichtig. */
main#inhalt > section.fs-bewertungen,
.fs-bewertungen {
    position: relative;
    /* Mittelgrau: das schwarz-weisse Zytglogge-Motiv hat darauf genug
       Kontrast, ohne dass die weissen Karten erschlagen werden. */
    background: #777777;
    color: #fff;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.4rem, 5vw, 3.6rem) 0 clamp(2.6rem, 5vw, 3.8rem);
    overflow: hidden;
    isolation: isolate;
}
/* Das Motiv ist schwarz-weiss. Mit "multiply" wird Weiss zur Flaechenfarbe
   und Schwarz bleibt Schwarz - dadurch verschwinden die hellen Bereiche des
   Bildes im Grau, statt als weisse Flecken stehenzubleiben.
   isolation sorgt dafuer, dass sich das Mischen auf diese Sektion beschraenkt
   und nicht mit dem darunterliegenden Verlauf rechnet. */
.bw-grund {
    /* Ueberstand oben und unten, damit beim Verschieben keine Kante
       sichtbar wird - wie beim Bild im Kopfbereich. */
    position: absolute; inset: -12% 0; z-index: 0;
    mix-blend-mode: multiply;
    will-change: transform;
}
.bw-grund img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Alles ueber dem Hintergrund: Ohne diese Zeile liegt ein Bereich
   unter der Flaeche mit mix-blend-mode und bekommt das Reifenspur-
   Muster ueber sich gelegt. */
.fs-bewertungen > .wrap,
.fs-bewertungen > .sf-band,
.fs-bewertungen > .bw-lauf { position: relative; z-index: 1; }

main#inhalt > section.fs-bewertungen .bw-titel,
.bw-titel {
    margin: 0 0 clamp(1.4rem, 3.2vw, 2rem);
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    color: #FFFFFF;
    text-align: center;
}

/* Waagrechter Lauf: rollt mit dem Finger, Pfeile zum Blättern. */
.bw-lauf { position: relative; }
.bw-spur {
    display: flex;
    /* Mehr Abstand: Die versetzte Ebene ragt links heraus. */
    gap: 1.8rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: .3rem clamp(1.1rem, 4vw, 2.6rem) 1.6rem;
    /* WICHTIG (Fix NO_LCP): Der Einrastpunkt muss das seitliche Padding
       einberechnen. Ohne diese Zeile zieht Chrome die erste Karte beim
       Laden von selbst buendig an den Rand - ein automatischer Scroll um
       die Padding-Breite. Aktuelle Chrome-Versionen beenden bei jedem
       Scroll die LCP-Messung endgueltig; PageSpeed meldet dann Error!
       NO_LCP und kann die Leistung gar nicht mehr berechnen. Mit dem
       scroll-padding ist die erste Karte von Anfang an "eingerastet",
       es gibt nichts zu scrollen, die Messung bleibt am Leben. */
    scroll-padding-inline: clamp(1.1rem, 4vw, 2.6rem);
    scrollbar-width: none;
}
.bw-spur::-webkit-scrollbar { display: none; }

.bw-karte {
    position: relative;
    flex: 0 0 clamp(240px, 78vw, 300px);
    scroll-snap-align: start;
    background: #fff;
    color: var(--ink);
    border-radius: 12px;
    padding: 1rem 1.1rem 1.2rem;
}
/* Versetzte Verlaufsebene wie bei den Selfies: gleiche Grösse, gleiche
   Rundung, nach links unten geschoben. Ersetzt den weichen Schatten. */
.bw-karte::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(-10px, 10px);
    background: var(--accent-gradient);
    border-radius: 12px;
    z-index: -1;
}
.bw-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.bw-avatar {
    width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
    border-radius: 50%;
    background: var(--accent-from);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: .95rem;
}
.bw-person { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.bw-person b { font-size: .92rem; }
.bw-datum { font-size: .76rem; color: var(--muted); }
.bw-google { flex: 0 0 auto; }
.bw-sterne { color: #F5B300; letter-spacing: .08em; font-size: 1rem; }
/* Karten stehen oben buendig, nicht auf gleicher Hoehe: sonst wuerde die
   laengste Bewertung alle anderen aufblaehen. */
.bw-karte { align-self: start; }

.bw-text { margin: .5rem 0 0; font-size: .9rem; line-height: 1.55; }
.bw-text p { margin: 0; }
/* Gekuerzt per CSS - der volle Text steht im HTML und bleibt fuer
   Suchmaschinen und Screenreader lesbar. */
.bw-text.ist-lang p {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bw-text.ist-offen p {
    display: block;
    overflow: visible;
}
.bw-mehr {
    margin-top: .5rem;
    padding: 0;
    border: 0; background: none;
    color: var(--muted);
    font: inherit; font-size: .85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: .16em;
}
.bw-mehr:hover { color: var(--ink); }

.bw-pfeil {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
    width: 2.4rem; height: 2.4rem;
    border: 0; border-radius: 50%;
    background: #fff; color: var(--ink);
    font-size: 1.4rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    display: flex; align-items: center; justify-content: center;
}
.bw-pfeil-links { left: .4rem; }
.bw-pfeil-rechts { right: .4rem; }
.bw-pfeil[hidden] { display: none; }
@media (max-width: 700px) { .bw-pfeil { display: none; } }

/* Zeile unter der Ueberschrift: helle Plakette mit Sternen, Anzahl und
   Durchschnitt. Auf schmalen Schirmen brechen Sterne und Text umeinander,
   statt die Plakette zu sprengen. */
.bw-summe {
    margin: -.4rem 0 clamp(1.5rem, 3.4vw, 2.2rem);
    text-align: center;
}
.bw-plakette {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .3rem .7rem;
    max-width: 100%;
    padding: .6em 1.2em;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    font-size: clamp(.88rem, 2.4vw, 1rem);
    line-height: 1.4;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
a.bw-plakette { transition: transform .18s ease, box-shadow .18s ease; }
a.bw-plakette:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .24); }
.bw-summe-sterne { color: #F5B300; letter-spacing: .06em; font-size: 1.05em; white-space: nowrap; }
.bw-summe-text { white-space: nowrap; }

/* Unter 480px: Sterne oben, Text darunter. */
@media (max-width: 480px) {
    .bw-plakette { border-radius: 18px; padding: .7em 1.1em; }
    .bw-summe-sterne { flex: 0 0 100%; }
    .bw-summe-text { flex: 0 0 100%; white-space: normal; }
}

.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;
}

/* Die Intro-Animation der Vorlage ist abgeschaltet (siehe layout.php).
   Sie deckte den Inhalt beim ersten Aufruf kurz ab; Lighthouse fand
   dadurch kein LCP-Element und meldete NO_LCP.
   Sicherheitshalber auch hier: nichts verdeckt den Inhalt. */
#introOverlay, #introWrap { display: none !important; }
main#inhalt { opacity: 1 !important; }

/* Blogbeiträge: heller Schleier über dem Titelbild.
   Das Beitragsbild ist ein Foto und oft dunkel oder unruhig - ohne
   Aufhellung wäre die Überschrift darauf nicht lesbar. Nur hier, nicht
   auf den übrigen Seiten, deren Kopfgrafik bewusst hell ist. */
.is-detail .fs-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, .5);
    pointer-events: none;
}

/* =========================================================
   Blogbeitrag: zwei Spalten zu je 50 %, ohne Zwischenraum.
   Die rechte Spalte ist bei allen Beiträgen gleich und steht
   fest im Template - sie ist im Studio nicht bearbeitbar.
   ========================================================= */
.fs-beitrag-grid {
    display: grid;
    gap: 0;
    align-items: start;
}
@media (min-width: 900px) {
    .fs-beitrag-grid { grid-template-columns: 1fr 1fr; }
    .fs-beitrag-grid > .prose { padding-right: clamp(1.5rem, 4vw, 3rem); }
    .fs-autor { padding-left: clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 899px) {
    .fs-autor { margin-top: clamp(2rem, 6vw, 3rem); }
}

/* Kein eigener Kreis und keine Flaeche: das Bild bringt den Kreis selbst
   mit. Ein zusaetzlicher weisser Grund waere darunter sichtbar. */
.fs-autor-bild {
    width: min(62vw, 320px);
    margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
}
.fs-autor-bild img { width: 100%; height: auto; display: block; }
.fs-autor p { margin: 0 0 1rem; }

/* Weisser Button, wie in der Vorlage. */
.fs-btn-weiss {
    display: inline-flex; align-items: center; gap: .6em;
    margin-top: .6rem;
    padding: .72em 1.5em;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.fs-btn-weiss:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.fs-btn-weiss .fs-ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* =========================================================
   Sanftes Einblenden beim Scrollen.
   Die Klassen setzt das JavaScript - ohne JavaScript ist alles
   sofort sichtbar, weil die Regeln dann gar nicht greifen.
   ========================================================= */
.gd-faden {
    opacity: 0;
    transform: translateY(1.1rem);
}
.gd-faden.ist-da {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
    /* Versatz nur bei Kacheln und Karten (--i wird dort gesetzt).
       Textbausteine erscheinen ohne Verzoegerung, sobald sie in den
       Blick kommen - sonst wartet man beim Lesen auf den naechsten Absatz. */
    transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
    .gd-faden { opacity: 1; transform: none; }
    .gd-faden.ist-da { transition: none; }
}

/* =========================================================
   Startseite: Blog-Band schliesst nahtlos an das Band darueber an.
   Beide tragen fs-gradient, wodurch der Verlauf zweimal neu beginnt
   und eine sichtbare Kante entsteht. Statt background-attachment
   (das auf Handys ruckelt) bekommt das zweite Band keinen eigenen
   Verlauf mehr - es sitzt optisch im selben Band.
   ========================================================= */
/* Blog-Kacheln in einem <div> statt einer <section>: Damit greift die
   Zebra-Regel der Vorlage nicht, die abwechselnd Weiss setzt. Der Verlauf
   ist derselbe wie im Band darueber und geht ohne Kante ineinander ueber,
   weil beide waagrecht verlaufen und die Farben identisch sind. */
/* Die Blog-Kacheln liegen jetzt INNERHALB der Sektion darueber (siehe
   home.php). Damit traegt eine einzige Flaeche den Verlauf - der schraege
   Verlauf laeuft ohne Kante durch, ohne Rechnerei im JavaScript. */
.fs-band-blog {
    background: none;
    padding-block: clamp(1.8rem, 4vw, 2.8rem) 0;
}
.fs-band-blog .fs-band-title { margin-top: 0; }

/* Blog-Kacheln: sanfter Zoom und Pfeil beim Überfahren der ganzen Kachel,
   nicht nur des Knopfes. */
.fs-card { position: relative; overflow: hidden; }
.fs-card-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.fs-card-img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
@media (hover: hover) {
    .fs-card:hover .fs-card-img,
    .fs-card:focus-within .fs-card-img { transform: scale(1.06); }

    /* Der Pfeil im Knopf rückt nach rechts, sobald die Kachel berührt wird. */
    .fs-card .fs-card-btn .fs-ico {
        transition: transform .32s cubic-bezier(.2, .7, .2, 1);
    }
    .fs-card:hover .fs-card-btn .fs-ico,
    .fs-card:focus-within .fs-card-btn .fs-ico { transform: translateX(.35em); }

    .fs-card .fs-card-btn { transition: box-shadow .3s ease, transform .3s ease; }
    .fs-card:hover .fs-card-btn { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
}

/* Die ganze Kachel anklickbar machen: der Knopf legt sich unsichtbar
   darüber, bleibt aber für Screenreader und Tastatur ein normaler Link. */
/* Die ganze Kachel ist anklickbar - umgesetzt im JavaScript, weil ein
   CSS-Feld an overflow:hidden der Kachel scheitert. */
.fs-card-title { position: relative; z-index: 2; }
.fs-card-btn { position: relative; z-index: 2; }

/* Zeigefinger über der ganzen Kachel, nicht nur über dem Knopf. */
.fs-card { cursor: pointer; }

/* Kacheltitel: H3, aber mit der Auszeichnung der Zwischentitel. */
.fs-band-blog .fs-card-title,
.fs-card-title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.15rem, 1.9vw, 1.35rem);
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

/* Blog-Übersicht: Einleitung über den Kacheln. */
.fs-blog-intro { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

/* Kacheln behalten ihre Breite, auch wenn die letzte Reihe nicht voll ist. */
.fs-cards { justify-content: start; }

/* =========================================================
   Unterseiten: zweite Sektion zweispaltig, je 50 %.
   Ist die rechte Spalte leer, läuft der Inhalt über die
   volle Breite - so bleiben einspaltige Seiten möglich.
   ========================================================= */
.fs-zwei-spalten {
    display: grid;
    gap: 0;
    align-items: start;
}
@media (min-width: 900px) {
    .fs-zwei-spalten:not(.ist-einspaltig) { grid-template-columns: 1fr 1fr; }
    .fs-zwei-spalten:not(.ist-einspaltig) > :first-child { padding-right: clamp(1.5rem, 4vw, 3rem); }
    .fs-zwei-spalten:not(.ist-einspaltig) > :last-child { padding-left: clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 899px) {
    .fs-zwei-spalten > :last-child:not(:first-child) { margin-top: clamp(2rem, 6vw, 3rem); }
}
.fs-zwei-spalten.ist-einspaltig > :first-child { max-width: var(--measure); }

/* Buttons im Fliesstext: weisse Pillen, untereinander. */
.gd-button-zeile { margin: .5rem 0; }
.gd-button-zeile .fs-btn-weiss { margin-top: 0; }

/* Buttons: kräftige Schrift, dickere Symbole, keine Unterstreichung. */
main#inhalt .fs-btn-weiss,
.fs-btn-weiss {
    font-weight: 900;
    text-decoration: none;
}
.fs-btn-weiss:hover { text-decoration: none; }
.fs-btn-weiss .fs-ico { stroke-width: 2.6; width: 1.15em; height: 1.15em; }
.gd-button-zeile a { text-decoration: none; }


/* Bilder mit dem Haken «kleine Anzeige»: höchstens 300 Pixel, linksbündig. */
.md-bild.ist-klein { max-width: 300px; margin-inline: 0; }

/* Footer: Zeichen der Verlinkungen zwischen den beiden Zeilen. */
.footer-netz {
    display: flex; justify-content: center; align-items: center;
    gap: 1.3rem;
    margin: 1rem 0 .8rem;
}
.footer-netz a {
    display: inline-flex;
    color: inherit;
    opacity: .85;
    transition: opacity .2s ease, transform .2s ease;
}
.footer-netz a:hover { opacity: 1; transform: translateY(-2px); }
.footer-netz svg { width: 28px; height: 28px; display: block; }

/* Terminbuchung: eingebetteter Kalender. */
.gd-termin {
    margin: 1.4rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
}
.gd-termin iframe {
    width: 100%;
    border: 0;
    display: block;
}

/* =========================================================
   Formulare: weisse Karte auf dem Verlaufsband.
   ========================================================= */
.gd-form {
    background: #fff;
    border-radius: var(--radius);
    padding: clamp(1.4rem, 3.5vw, 2.2rem);
    box-shadow: var(--shadow-sm);
    color: var(--ink);
}
.gd-form label { display: block; margin-bottom: 1rem; font-size: .95rem; }
.gd-form input[type="text"],
.gd-form input[type="email"],
.gd-form input[type="tel"],
.gd-form input[type="number"],
.gd-form textarea {
    width: 100%;
    margin-top: .35rem;
    padding: .7em .85em;
    border: 0;
    border-radius: var(--radius-sm);
    background: #E9E9E9;
    font: inherit;
    color: var(--ink);
}
.gd-form input:focus-visible,
.gd-form textarea:focus-visible {
    outline: 2px solid var(--accent-from);
    outline-offset: 1px;
}
.gd-form textarea { resize: vertical; min-height: 6em; }
.gd-feld-gross { font-size: 1.08rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.gd-feld-gross:first-child { margin-top: 0; }
.gd-pflicht { color: var(--muted); font-weight: 400; }
.gd-hinweis { font-size: .84rem; color: var(--muted); margin: -.6rem 0 1.2rem; }

.gd-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 520px) { .gd-zwei { grid-template-columns: 1fr; } }

/* Haken: Kästchen und Text nebeneinander, nicht untereinander. */
/* Mit .gd-form davor: sonst gewinnt die allgemeine label-Regel
   (hoehere Spezifitaet) und setzt display:block. */
.gd-form .gd-haken {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: start;
    margin: 1.2rem 0;
    line-height: 1.5;
}
.gd-form .gd-haken input {
    margin-top: .25rem;
    width: 1.15rem; height: 1.15rem;
    accent-color: var(--accent-from);
}

/* Honigtopf: für Menschen unsichtbar, für Maschinen ausfüllbar.
   Bewusst nicht display:none - manche Skripte überspringen das. */
.gd-hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* --- Schritte --- */
.gd-schritt { border: 0; padding: 0; margin: 0; min-width: 0; }
.gd-fortschritt { margin-bottom: 1.6rem; }
.gd-fortschritt-text { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.gd-fortschritt-bahn {
    display: block;
    height: 1.5rem;
    border-radius: 999px;
    background: #D8D8D8;
    overflow: hidden;
}
.gd-fortschritt-fuellung {
    display: flex; align-items: center; justify-content: flex-end;
    height: 100%;
    padding-right: .7rem;
    border-radius: 999px;
    background: var(--accent-gradient);
    font-size: .78rem; font-weight: 700; color: var(--ink);
    transition: width .35s cubic-bezier(.2, .7, .2, 1);
    width: 33%;
}
.gd-schritt-knoepfe { display: flex; gap: .8rem; margin-top: 1.4rem; flex-wrap: wrap; }

.gd-summe { margin: 1.4rem 0 0; }
.gd-summe-titel { display: block; font-size: 1.08rem; font-weight: 700; margin-bottom: .3rem; }
.gd-summe-wert { display: block; font-size: 1rem; }

.gd-form-dank p { margin: 0; font-size: 1.05rem; }
.gd-form-fehler {
    margin: 0 0 1.2rem;
    padding: .8em 1em;
    border-radius: var(--radius-sm);
    background: #FDECEA;
    color: #B3261E;
    font-size: .92rem;
}

/* Knöpfe im Formular: ohne Rahmen und Schatten. Anders als auf den
   übrigen Seiten sind es echte <button>-Elemente - die bringen einen
   Rahmen vom Browser mit, den .fs-btn nicht abräumt. */
.gd-form button.fs-btn {
    border: 0;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.gd-form button.fs-btn:hover { box-shadow: none; }

/* Auswahlfeld im Formular: gleiche Anmutung wie die Textfelder. */
.gd-form select {
    width: 100%;
    margin-top: .35rem;
    padding: .7em .85em;
    border: 0;
    border-radius: var(--radius-sm);
    background: #E9E9E9;
    font: inherit;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--arrow-r);
    background-repeat: no-repeat;
    background-position: right .9em center;
    background-size: 1.1em;
    padding-right: 2.6em;
}
.gd-form select:focus-visible { outline: 2px solid var(--accent-from); outline-offset: 1px; }

/* Kennzeichnung der Felder: Sternchen für Pflicht, Wort für freiwillig.
   Beides schwächer als die Beschriftung, damit es nicht ablenkt. */
.gd-pflicht {
    color: var(--muted);
    font-weight: 400;
}
.gd-freiwillig {
    font-size: .82em;
    font-weight: 400;
    color: var(--muted);
}

/* =========================================================
   H1 im Kopfbereich: Buchstaben fliegen einzeln ein, von links
   nach rechts.

   Der Text steht vollständig im HTML; die Aufteilung macht erst das
   JavaScript. Ohne Skript oder bei reduzierter Bewegung erscheint die
   Überschrift normal.
   ========================================================= */
.fs-hero-title .zeichen {
    display: inline-block;
    /* Versalien hier zusätzlich: Die Vererbung vom h1 greift zwar, aber
       so steht die Auszeichnung dort, wo der Buchstabe entsteht. */
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(.55em) rotate(-6deg) scale(.9);
    animation: zeichenRein .7s cubic-bezier(.2, .8, .25, 1) forwards;
    animation-delay: calc(var(--z, 0) * 55ms);
}
/* Wörter bleiben zusammen: Ohne diese Hülle bricht der Browser
   zwischen einzelnen inline-block-Buchstaben um - mitten im Wort. */
.fs-hero-title .wort {
    display: inline-block;
    white-space: nowrap;
}

@keyframes zeichenRein {
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fs-hero-title .zeichen { opacity: 1; transform: none; animation: none; }
}

/* Keine Silbentrennung in der H1. Bei dieser Schriftgrösse fällt ein
   Trennstrich besonders auf, und der Titel ist kurz genug, um ganze
   Wörter umbrechen zu lassen. */
h1,
.fs-hero-title,
.fs-hero-title .zeichen {
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
    overflow-wrap: normal;
    word-break: normal;
}

/* =========================================================
   Selfie-Band über den Google-Bewertungen.

   Läuft von selbst von rechts nach links, ohne Bedienung: Die Bilder
   sollen wirken, nicht gelesen werden. Zum Lesen sind die Bewertungen
   darunter da — die haben ihre Pfeile.

   Feste Höhe, freie Breite: Hoch-, Quer- und Quadratformate stehen
   nebeneinander, ohne dass etwas beschnitten wird.
   ========================================================= */
.sf-band {
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: 0 0 12px;
    overflow: hidden;
}
.sf-bahn {
    display: flex;
    /* Etwas mehr Abstand: Die versetzte Ebene ragt links heraus und
       soll das Nachbarbild nicht beruehren. */
    gap: 1.6rem;
    width: max-content;
    animation: sfLauf var(--sf-dauer, 60s) linear infinite;
}
/* Die Reihe liegt zweimal hintereinander; -50 % ist genau eine Runde. */
@keyframes sfLauf {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Anhalten, wenn jemand hinschaut oder mit der Tastatur hineingerät.
   WCAG verlangt für Bewegung über fünf Sekunden eine Möglichkeit
   anzuhalten - das erfüllt es, ohne eine Schaltfläche zu brauchen. */
.sf-band:hover .sf-bahn,
.sf-band:focus-within .sf-bahn { animation-play-state: paused; }

/* Versetzte Verlaufsebene hinter jedem Bild: gleiche Grösse, gleiche
   Rundung, 10 Pixel nach links unten geschoben. Wirkt wie ein harter
   Schatten in den Markenfarben - plakativ statt dezent, was zur Marke
   passt. Ein border könnte keinen Verlauf tragen, eine Ebene schon. */
.sf-bild {
    position: relative;
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}
.sf-bild::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translate(-10px, 10px);
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    z-index: -1;
}
.sf-bild img {
    height: 260px;
    width: auto;
    display: block;
    border-radius: var(--radius-sm);
    position: relative;
}
@media (max-width: 700px) {
    .sf-bild img { height: 190px; }
    .sf-bild::before { transform: translate(-7px, 7px); }
}

/* Bei reduzierter Bewegung steht das Band still und wird rollbar. */
@media (prefers-reduced-motion: reduce) {
    .sf-bahn {
        animation: none;
        overflow-x: auto;
        width: auto;
        scrollbar-width: none;
    }
    .sf-bahn::-webkit-scrollbar { display: none; }
}


/* =========================================================
   Hero-Hintergrund als CSS-Bild (Raster-Fotos).

   Dekorative Vollflaechen-Bilder (alt="") gehoeren semantisch in den
   Hintergrund - und CSS-Hintergruende wertet Chrome bewusst nicht als
   "groessten Inhalt" (LCP). Damit misst Google ehrlich die Ueberschrift,
   die beim ersten Rendern schon steht, statt auf das dekorative Foto zu
   warten. SVG-Grafiken bleiben als <img> in der Flaeche: ohne feste
   Masse haette background-size:cover nichts zu rechnen (siehe hero.php).
   Zwei Stufen: --hero-bg-m fuers Handy, --hero-bg-d ab 901px.
   ========================================================= */
.fs-hero-bg-css {
    background-image: var(--hero-bg-m);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media (min-width: 901px) {
    .fs-hero-bg-css { background-image: var(--hero-bg-d, var(--hero-bg-m)); }
}