/* ============================================================
   show it consulting – Hauptstylesheet

   Farbpalette (abgeleitet aus dem Logo):
     Primär-Dunkel  --c-primary:    #4a5c6c  (Schiefer, "SHOW IT"-Text)
     Akzent-Blau    --c-accent:     #8ab4d4  (Stahlblau, Untertitel)
     Akzent-Dunkel  --c-accent-dk:  #6a96b8  (für Hover, Links)
     Weiß           --c-white:      #ffffff
     Hell-Hintergrund --c-bg:       #f4f6f8
     Textfarbe      --c-text:       #2c3e50
     Text gedämpft  --c-muted:      #6b7c8d
     Rand           --c-border:     #dde3e9
   ============================================================ */


/* ============================================================
   CSS-VARIABLEN
   ============================================================ */
:root {
    /* Farben */
    --c-primary:    #4a5c6c;
    --c-accent:     #8ab4d4;
    --c-accent-dk:  #6a96b8;
    --c-white:      #ffffff;
    --c-bg:         #f4f6f8;
    --c-text:       #2c3e50;
    --c-muted:      #6b7c8d;
    --c-border:     #dde3e9;

    /* Typografie */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Abstände */
    --gap-xs:   0.5rem;   /*  8px */
    --gap-sm:   1rem;     /* 16px */
    --gap-md:   2rem;     /* 32px */
    --gap-lg:   4rem;     /* 64px */
    --gap-xl:   6rem;     /* 96px */

    /* Layout */
    --container: 1200px;
    --header-h:  72px;

    /* Formensprache: eine große Rundung als wiederkehrende Signatur
       (Logo-Badge in der Kopfleiste, Sektionsbilder) */
    --radius-signatur:        48px;
    --radius-signatur-mobil:  32px;

    /* Tiefe des Bogens, mit dem die Hero-Textfläche über das Bild greift */
    --bogen:        140px;
    --bogen-mobil:   44px;

    /* Animationen */
    --ease: 0.25s ease;

    /* Abgeleitete Farbwerte (für Verläufe und Flächen) */
    --c-primary-dk: #3c4c5a;
    --c-accent-sf:  rgba(138, 180, 212, 0.14);   /* Stahlblau, sehr weich */

    /* Schatten – bewusst flach, kein Schatten-Overkill */
    --shadow-sm: 0 2px 10px rgba(74, 92, 108, 0.06);
    --shadow-md: 0 10px 34px rgba(74, 92, 108, 0.10);
}


/* ============================================================
   RESET & BASIS
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    font-size: 16px;
}

body {
    font-family: var(--font);
    color: var(--c-text);
    background: var(--c-white);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img          { max-width: 100%; height: auto; display: block; }
a            { color: inherit; text-decoration: none; }
ul, ol       { list-style: none; }
button       { cursor: pointer; border: none; background: none; font: inherit; }


/* ============================================================
   HILFKLASSEN
   ============================================================ */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gap-md);
}

/* Sektions-Hintergründe */
.bg-white   { background: var(--c-white); }
.bg-light   { background: var(--c-bg);    }
.bg-primary { background: var(--c-primary); }

/* Abstand für alle Sektionen */
.section {
    padding-block: var(--gap-xl);
}


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    padding: 0.7rem 1.875rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
    white-space: nowrap;
}

/* Gefüllter Button */
.btn-primary {
    background:   var(--c-accent);
    color:        var(--c-white);
    border-color: var(--c-accent);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background:   var(--c-accent-dk);
    border-color: var(--c-accent-dk);
}

/* Outline-Button */
.btn-outline {
    background:   transparent;
    color:        var(--c-primary);
    border-color: var(--c-primary);
}
.btn-outline:hover,
.btn-outline:focus-visible {
    background: var(--c-primary);
    color:      var(--c-white);
}


/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h);
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    z-index: 100;
    overflow: visible;      /* Logo-Badge darf unter die Leiste hängen */
    transition: box-shadow var(--ease);
}

/* Schatten erscheint beim Scrollen (via JavaScript) */
.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(44, 62, 80, 0.08);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

.nav-brand {
    position: relative;
    z-index: 2;             /* eigener Stacking-Context für ::after */
    align-self: stretch;    /* füllt die volle Header-Höhe */
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-inline: 1.5rem;
}

/* Geschwungene Ausbuchtung: weißes Badge, das unter die Navigationsleiste hängt
   und links bis an den Bildschirmrand läuft                                      */
.nav-brand::after {
    content: '';
    position: absolute;
    left: -100vw;                       /* bis weit über den linken Viewport-Rand */
    right: 0;
    top: 0;
    bottom: -32px;                      /* hängt 32px unter den Header */
    background: var(--c-white);
    border-radius: 0 0 var(--radius-signatur) 0;   /* nur rechte untere Ecke gerundet */
    box-shadow: 0 10px 28px rgba(74, 92, 108, 0.13);
    z-index: -1;                        /* hinter dem Logo, vor dem Header-Hintergrund */
}

.nav-logo {
    height: 66px;                       /* etwas größer als zuvor */
    width: auto;
    position: relative;
    z-index: 1;                         /* sicher vor ::after */
}

/* Navigationslinks */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--gap-md);
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--c-text);
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
    transition: color var(--ease), border-color var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-link.active {
    color:         var(--c-accent-dk);
    border-bottom-color: var(--c-accent);
}

/* CTA-Link als kleiner Rahmen-Button */
.nav-link-cta {
    padding: 0.45rem 1.125rem;
    border: 2px solid var(--c-accent);
    border-bottom-color: var(--c-accent); /* überschreibt den Hover-Unterstr. */
    color: var(--c-primary);
    transition: background var(--ease), color var(--ease);
}

.nav-link-cta:hover,
.nav-link-cta:focus-visible {
    background:   var(--c-accent);
    color:        var(--c-white);
    border-color: var(--c-accent);
}

/* ------------------------------------------------------------
   SPRACHUMSCHALTER DE | EN
   Sitzt rechts in der Kopfleiste und bleibt auch dann sichtbar,
   wenn die Navigation zum Klappmenü zusammenfällt.
   ------------------------------------------------------------ */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    margin-left: var(--gap-md);
    border: 1px solid var(--c-border);
    padding: 2px;
}

.lang-switch a,
.lang-switch span {
    display: block;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    transition: background var(--ease), color var(--ease);
}

/* Aktive Sprache: gefüllt */
.lang-switch .lang-current {
    background: var(--c-primary);
    color: var(--c-white);
    cursor: default;
}

/* Andere Sprache: anklickbar */
.lang-switch a {
    color: var(--c-muted);
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
    background: var(--c-accent);
    color: var(--c-white);
}


/* Hamburger-Schaltfläche (nur mobil sichtbar) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0.5rem;
}

.toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--c-primary);
    transition: transform var(--ease), opacity var(--ease);
}

/* Animation der drei Balken beim Öffnen */
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   HERO

   Aufbau: Die Textfläche sitzt am linken Bildschirmrand, läuft über
   die volle Höhe und greift mit einer bogenförmigen rechten Kante
   über das Bild. Das Bild liegt dahinter und füllt die rechte Seite,
   bleibt aber deutlich in der Nebenrolle.
   ============================================================ */
.hero {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--header-h));
    margin-top: var(--header-h);
    background: var(--c-bg);
}

/* Textfläche: bündig am linken Rand, volle Höhe, Bogen nach rechts */
.hero-text {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 56%;

    /* Links auf die Containerkante der übrigen Seite ausgerichtet.
       Die Prozentangabe bezieht sich auf die Breite von .hero und
       entspricht damit exakt der Rechnung in .container.            */
    padding-left: max(
        var(--gap-md),
        calc((100% - var(--container)) / 2 + var(--gap-md))
    );
    /* Rechts Platz lassen, damit der Text nicht in den Bogen läuft */
    padding-right: calc(var(--bogen) + var(--gap-md));
    padding-block: var(--gap-lg);

    /* Leicht durchscheinend: das Bild bleibt hinter der Fläche spürbar */
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Der Bogen: obere und untere rechte Ecke mit halber Höhe als
       vertikalem Radius – beide Rundungen treffen sich auf halber
       Höhe zu einer durchgehenden Kurve.                            */
    border-radius: 0 var(--bogen) var(--bogen) 0 / 0 50% 50% 0;

    /* Moderner Schatten: mehrere weiche Lagen statt einer harten Kante */
    box-shadow:
        0 1px 2px    rgba(44, 62, 80, 0.05),
        0 10px 24px  rgba(44, 62, 80, 0.08),
        0 32px 64px  rgba(44, 62, 80, 0.14);
}

.hero-text-inner {
    max-width: 520px;
    width: 100%;
}

/* Feine Akzentkante über dem Logo */
.hero-text-inner::before {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--c-accent);
    margin-bottom: var(--gap-sm);
}

.hero-logo {
    width: 240px;
    height: auto;
    margin-bottom: var(--gap-md);
}

.hero-tagline {
    font-size: 1.1rem;
    font-weight: 300;
    color: var(--c-muted);
    line-height: 1.7;
    margin-bottom: var(--gap-sm);
    padding-left: var(--gap-sm);
    border-left: 3px solid var(--c-accent);
}

.hero-actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

/* Bild: liegt hinter der Textfläche und läuft bis an den rechten Rand.
   Die linke Bildkante bleibt vollständig hinter der Textfläche, die
   sichtbare Trennung übernimmt allein deren Bogen – deshalb hier
   keine eigene Rundung, die sonst durchschimmern würde. */
.hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 38%;
    z-index: 1;
    overflow: hidden;
    background: var(--c-bg);
}

.hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Bildausschnitt nach links verankert: So rückt der Operator weit genug
       nach rechts, dass der Bogen der Textfläche sein Gesicht nicht überdeckt. */
    object-position: left center;
}

/* Unterschrift nach rechts unten, damit sie nicht hinter der Karte liegt */
.hero-caption {
    position: absolute;
    bottom: var(--gap-md);
    left: auto;
    right: var(--gap-md);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.38);
    padding: 0.375rem 0.75rem;
    z-index: 2;
    backdrop-filter: blur(4px);
}


/* ============================================================
   SEKTIONS-KOPFZEILEN
   ============================================================ */
.section-header {
    margin-bottom: var(--gap-lg);
}

.section-header-center {
    text-align: center;
}

/* Kleines Label über der Überschrift */
.eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: 0.5rem;
}

.eyebrow.light { color: var(--c-accent); }

/* Sektions-Hauptüberschrift */
.section-header h2,
.section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-primary);
    margin-bottom: var(--gap-sm);
}

.section-header h2.light,
.light { color: var(--c-white); }

/* Einleitungstext */
.section-subtitle {
    font-size: 1.05rem;
    color: var(--c-muted);
    max-width: 640px;
    line-height: 1.7;
}

.section-header-center .section-subtitle {
    margin-inline: auto;
}

.section-subtitle.light { color: rgba(255, 255, 255, 0.72); }


/* ============================================================
   ÜBER UNS
   ============================================================ */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
}

.about-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center top;
}

.about-text-col p + p {
    margin-top: var(--gap-sm);
}

.lead {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-primary);
    line-height: 1.65;
    margin-bottom: var(--gap-sm);
}

/* Kennzahlen */
.about-stats {
    display: flex;
    gap: var(--gap-md);
    margin-top: var(--gap-md);
    padding-top: var(--gap-md);
    border-top: 1px solid var(--c-border);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--c-accent-dk);
    line-height: 1;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
}


/* ============================================================
   AIRFLOW VISUALIZATION
   ============================================================ */

/* Zweispaltiges Layout: Bild links, Text rechts */
.afv-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: start;
    margin-bottom: var(--gap-lg);
}

.afv-photo {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.afv-text-col {
    color: rgba(255, 255, 255, 0.88);
}

/* Einzelner Textblock mit Trennlinie */
.afv-block {
    padding-bottom: var(--gap-md);
    margin-bottom: var(--gap-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.afv-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.afv-block h3 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 0.625rem;
}

.afv-block p {
    font-size: 0.95rem;
    line-height: 1.8;
}

/* Aufzählung mit Diamant-Marker */
.feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-list li {
    font-size: 0.95rem;
    padding-left: 1.25rem;
    position: relative;
}

.feature-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--c-accent);
    transform: rotate(45deg);
}

/* Prozess-Schritte */
.process-row {
    margin-bottom: var(--gap-lg);
}

.process-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--gap-md);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

.process-step {
    padding: var(--gap-md);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.step-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--c-accent);
    line-height: 1;
    margin-bottom: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.process-step h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-white);
    margin-bottom: 0.5rem;
}

.process-step p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.65;
}

/* Vier-Felder Highlight-Raster */
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255, 255, 255, 0.12);
    gap: 1px;
    background: rgba(255, 255, 255, 0.12);
}

.highlight {
    background: var(--c-primary);
    padding: var(--gap-md);
}

.highlight h4 {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-white);
    margin-bottom: 0.5rem;
}

.highlight p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.65;
}


/* ============================================================
   LEISTUNGEN
   ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
}

.service-card {
    padding: var(--gap-md);
    border: 1px solid var(--c-border);
    background: var(--c-white);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.service-card:hover {
    border-color: var(--c-accent);
    box-shadow: 0 6px 28px rgba(138, 180, 212, 0.22);
    transform: translateY(-3px);
}

/* "Mehr erfahren"-Hinweis am unteren Rand der Karte */
.card-link {
    display: inline-block;
    margin-top: auto;
    padding-top: var(--gap-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    transition: color var(--ease);
}

.card-link::after {
    content: ' \2192';     /* Pfeil rechts */
}

.service-card:hover .card-link {
    color: var(--c-primary);
}

.service-icon {
    width: 48px;
    height: 48px;
    color: var(--c-accent-dk);
    margin-bottom: var(--gap-sm);
}

.service-icon svg {
    width: 100%;
    height: 100%;
}

.service-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.5rem;
}

.service-card p {
    font-size: 0.875rem;
    color: var(--c-muted);
    line-height: 1.75;
}


/* ============================================================
   KONTAKT
   ============================================================ */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--gap-xl);
    align-items: start;
}

.contact-details h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-primary);
    line-height: 1.4;
    margin-bottom: var(--gap-md);
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
}

.contact-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--gap-xs);
}

.contact-row dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
    padding-top: 0.15rem;
}

.contact-row dd {
    font-size: 0.95rem;
    line-height: 1.65;
}

.contact-row dd a {
    color: var(--c-accent-dk);
    transition: color var(--ease);
}

.contact-row dd a:hover {
    color: var(--c-primary);
}

/* Formular */
.contact-form {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    padding: var(--gap-md);
}

.form-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-sm);
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--gap-sm);
}

.form-field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.form-field label span {
    color: var(--c-accent-dk);
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    font-family: var(--font);
    font-size: 0.9rem;
    color: var(--c-text);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--ease), background var(--ease);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--c-white);
}

.form-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.65;
}

.form-note {
    font-size: 0.8rem;
    color: var(--c-muted);
    line-height: 1.6;
    margin-bottom: var(--gap-sm);
}

.form-note a {
    color: var(--c-accent-dk);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--ease);
}

.form-note a:hover { color: var(--c-primary); }

/* Status-Meldung nach dem Absenden */
.form-status {
    margin-top: var(--gap-sm);
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    display: none;
}

.form-status.success {
    display: block;
    background: #f0f9f4;
    color: #276749;
    border: 1px solid #b2dfcc;
}

.form-status.error {
    display: block;
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #fed7d7;
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    background: var(--c-primary);
    color: rgba(255, 255, 255, 0.78);
    padding-block: var(--gap-md);
}

/* Logo im Footer: auf Weiß invertiert */
.footer-logo {
    height: 48px;
    width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.footer-brand p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Instagram-Link im Footer */
.footer-instagram {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Instagram-Link im Kontaktbereich */
.instagram-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--c-accent-dk);
    transition: color var(--ease);
}

.instagram-link:hover { color: var(--c-primary); }


/* ============================================================
   SERVICE-DETAILSEITEN – Layout
   Die Mediendarstellung selbst steckt weiter unten in .media-panel.
   ============================================================ */

/* Zweispaltiges Layout: Medien links, Eckdaten rechts */
.service-detail-intro {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--gap-xl);
    align-items: start;
    margin-bottom: var(--gap-xl);
}

/* Kennzahlen/Stärken rechts neben dem Video */
.service-key-facts {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding-top: 0.25rem;
}

.key-fact {
    padding-left: var(--gap-sm);
    border-left: 3px solid var(--c-accent);
}

.key-fact h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-bottom: 0.25rem;
}

.key-fact p {
    font-size: 0.85rem;
    color: var(--c-muted);
    line-height: 1.65;
}

/* Responsive Service-Detailseiten */
@media (max-width: 768px) {
    .service-detail-intro {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   UNTERSEITEN (Impressum & Datenschutz)
   ============================================================ */
.page-hero {
    background: var(--c-primary);
    color: var(--c-white);
    padding: var(--gap-xl) 0 var(--gap-lg);
    margin-top: var(--header-h);
}

.page-hero h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--gap-xs);
}

.page-hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
}

/* Fliesstext auf Unterseiten */
.page-content {
    padding-block: var(--gap-xl);
}

.prose {
    max-width: 780px;
}

.prose h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-top: var(--gap-lg);
    margin-bottom: var(--gap-sm);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--c-accent);
}

.prose h2:first-of-type {
    margin-top: 0;
}

.prose h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-top: var(--gap-md);
    margin-bottom: var(--gap-xs);
}

.prose p {
    font-size: 0.95rem;
    color: var(--c-text);
    line-height: 1.85;
    margin-bottom: var(--gap-sm);
}

.prose p:last-child {
    margin-bottom: 0;
}

.prose a {
    color: var(--c-accent-dk);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.prose a:hover { color: var(--c-primary); }

.prose ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: var(--gap-sm);
}

.prose ul li {
    font-size: 0.95rem;
    color: var(--c-text);
    line-height: 1.85;
    margin-bottom: 0.25rem;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-accent-dk);
    margin-bottom: var(--gap-md);
    transition: color var(--ease);
}

.back-link:hover { color: var(--c-primary); }

.back-link::before {
    content: '\2190';  /* Pfeil links */
    font-size: 1rem;
}


/* ============================================================
   TEAM
   ============================================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

.team-card {
    border: 1px solid var(--c-border);
    background: var(--c-white);
    overflow: hidden;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.team-card:hover {
    border-color: var(--c-accent);
    box-shadow: 0 4px 24px rgba(138, 180, 212, 0.18);
}

/* Foto-Bereich: nimmt echte <img>-Tags genauso auf wie den Platzhalter */
.team-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--c-bg);
}

.team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Text unterhalb des Fotos */
.team-info {
    padding: var(--gap-sm) var(--gap-md) var(--gap-md);
    border-top: 2px solid var(--c-accent);
}

.team-info h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.25rem;
}

.team-role {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: 0.75rem;
}

.team-info p:not(.team-role) {
    font-size: 0.875rem;
    color: var(--c-muted);
    line-height: 1.7;
}


/* ============================================================
   RESPONSIVE – TABLET (max. 1024px)
   ============================================================ */
@media (max-width: 1024px) {

    :root { --gap-xl: 4rem; }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Team: auf Tablet 2+1 statt 3 Spalten */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Flacherer Bogen, damit dem Text die Breite nicht ausgeht */
    :root { --bogen: 90px; }

    .hero-text {
        width: 62%;
        padding-block: var(--gap-md);
    }

    .hero-image {
        left: 34%;
    }
}


/* ============================================================
   RESPONSIVE – MOBIL (max. 768px)
   ============================================================ */
@media (max-width: 768px) {

    :root {
        --gap-xl: 3rem;
        --gap-lg: 2rem;
    }

    /* --- Navigation --- */
    .nav-toggle {
        display: flex;
    }

    /* Dropdown-Menü, das per JavaScript geöffnet wird */
    .nav-links {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--c-white);
        flex-direction: column;
        align-items: stretch;
        padding: var(--gap-xs) 0;
        border-top: 1px solid var(--c-border);
        box-shadow: 0 8px 24px rgba(44, 62, 80, 0.1);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--ease), opacity var(--ease);
        gap: 0;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-link {
        display: block;
        padding: 0.875rem var(--gap-md);
        border-bottom: 1px solid var(--c-border) !important;
        border-right: none;
    }

    .nav-link:last-child { border-bottom: none !important; }

    .nav-link-cta {
        margin: var(--gap-sm) var(--gap-md);
        text-align: center;
        border: 2px solid var(--c-accent);
    }

    /* --- Hero --- */
    /* Untereinander statt übereinander: Bild oben, Karte darunter –
       die Karte schiebt sich weiterhin über die Bildkante. */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .hero-image {
        order: -1;              /* Bild vor die Textkarte ziehen */
        position: relative;
        inset: auto;
        height: 62vw;
        min-height: 240px;
        border-radius: 0 0 var(--radius-signatur-mobil) var(--radius-signatur-mobil);
    }

    .hero-caption {
        bottom: var(--gap-sm);
        left: var(--gap-sm);
    }

    /* Untereinander: Der Bogen wandert von der rechten Kante nach oben
       und wölbt sich über die Unterkante des Bildes. */
    .hero-text {
        width: 100%;
        padding-inline: var(--gap-md);
        padding-block: var(--gap-md) var(--gap-lg);
        margin-top: calc(var(--bogen-mobil) * -1);   /* Überlappung zum Bild */

        border-radius: 50% 50% 0 0 / var(--bogen-mobil) var(--bogen-mobil) 0 0;

        box-shadow:
            0 -2px 4px   rgba(44, 62, 80, 0.05),
            0 -10px 24px rgba(44, 62, 80, 0.10);
    }

    .hero-text-inner {
        max-width: none;
    }

    .hero-logo {
        width: 200px;
    }

    .hero-tagline {
        font-size: 0.95rem;
    }

    /* --- Über uns --- */
    .about-layout {
        grid-template-columns: 1fr;
    }

    .about-photo {
        aspect-ratio: 16 / 9;
    }

    .about-stats {
        flex-wrap: wrap;
        gap: var(--gap-md) var(--gap-lg);
    }

    /* --- Airflow Visualization --- */
    .afv-layout {
        grid-template-columns: 1fr;
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .highlight-grid {
        grid-template-columns: 1fr;
    }

    /* --- Team --- */
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-inline: auto;
    }

    /* --- Leistungen --- */
    .services-grid {
        grid-template-columns: 1fr;
    }

    /* --- Kontakt --- */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .form-row-two {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   RESPONSIVE – SEHR KLEIN (max. 400px)
   ============================================================ */
@media (max-width: 400px) {
    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        text-align: center;
    }
}


/* ############################################################
   #                                                          #
   #   ERWEITERUNGEN – Designsignatur & weitere Komponenten   #
   #                                                          #
   ############################################################ */


/* ============================================================
   ZUGÄNGLICHKEIT & GRUNDLAGEN
   ============================================================ */

/* Einheitlicher, sichtbarer Fokusrahmen für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--c-accent-dk);
    outline-offset: 3px;
}

/* Sprunglink für Screenreader und Tastatur */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--c-primary);
    color: var(--c-white);
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.skip-link:focus {
    left: 0;
}

/* Auswahlfarbe im Markenton */
::selection {
    background: var(--c-accent);
    color: var(--c-white);
}


/* ============================================================
   DESIGNSIGNATUR – Lichtstrahl aus dem Logo
   Der schräge Balken der Wortmarke als wiederkehrendes Element.
   ============================================================ */
.beam-deco {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Zwei schräge Lichtbahnen, sehr zurückhaltend */
.beam-deco::before,
.beam-deco::after {
    content: '';
    position: absolute;
    background: linear-gradient(
        90deg,
        rgba(138, 180, 212, 0)    0%,
        rgba(138, 180, 212, 0.28) 55%,
        rgba(138, 180, 212, 0)    100%
    );
    transform: rotate(-11deg);
}

.beam-deco::before {
    top: 12%;
    left: -12%;
    width: 70%;
    height: 3px;
}

.beam-deco::after {
    bottom: 22%;
    right: -14%;
    width: 55%;
    height: 2px;
    opacity: 0.6;
}

/* Feines Raster als Flächentextur – erinnert an Messgitter/Strömungsnetz */
.grid-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right,  rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
}

/* Inhalte über der Dekoration halten */
.section > .container,
.page-hero > .container,
.cta-band > .container {
    position: relative;
    z-index: 1;
}

.section,
.page-hero,
.cta-band {
    position: relative;
    overflow: hidden;
}

/* Dünne Akzentlinie unter Sektionsüberschriften */
.section-header h2::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--c-accent);
    margin-top: var(--gap-sm);
}

.section-header-center h2::after {
    margin-inline: auto;
}


/* ============================================================
   BUTTONS – Ergänzungen
   ============================================================ */

/* Heller Outline-Button für dunkle Flächen */
.btn-light {
    background: transparent;
    color: var(--c-white);
    border-color: rgba(255, 255, 255, 0.55);
}

.btn-light:hover,
.btn-light:focus-visible {
    background: var(--c-white);
    color: var(--c-primary);
    border-color: var(--c-white);
}

/* Gefüllter Button auf dunkler Fläche */
.btn-on-dark {
    background: var(--c-accent);
    color: var(--c-primary);
    border-color: var(--c-accent);
    font-weight: 700;
}

.btn-on-dark:hover,
.btn-on-dark:focus-visible {
    background: var(--c-white);
    border-color: var(--c-white);
}


/* ============================================================
   HERO – grafische Aufwertung
   ============================================================ */

/* Eyebrow über dem Hero-Logo */
.hero-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: var(--gap-sm);
}

/* Kurze Vertrauensmerkmale unter den Hero-Buttons */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: var(--gap-sm);
    padding-top: var(--gap-sm);
    border-top: 1px solid var(--c-border);
}

.hero-badges li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-muted);
}

.hero-badges li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    background: var(--c-accent);
    transform: rotate(45deg);
}

/* Bildunterschrift eleganter absetzen */
.hero-caption {
    background: rgba(44, 62, 80, 0.55);
    border-left: 3px solid var(--c-accent);
    max-width: 26rem;
}


/* ============================================================
   SEKTIONSBILDER – Einfassung

   „Über uns" und „Airflow Visualization" bekommen dieselbe Behandlung:
   ein dünner Akzentrahmen, der versetzt hinter dem Foto liegt,
   plus die Signatur-Rundung an zwei gegenüberliegenden Ecken.
   Damit steht das Bild gefasst da statt frei im Raum.
   ============================================================ */
.about-image-col,
.afv-image-col {
    position: relative;
    isolation: isolate;
}

/* Versetzter Rahmen aus einer dünnen Akzentlinie */
.about-image-col::before,
.afv-image-col::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -20px;
    bottom: -20px;
    left: 20px;
    border: 2px solid var(--c-accent);
    border-radius: var(--radius-signatur) 0 var(--radius-signatur) 0;
    z-index: -1;
    pointer-events: none;
}

/* Auf dunklem Grund die Linie etwas zurücknehmen */
.afv-image-col::before {
    border-color: rgba(138, 180, 212, 0.55);
}

.about-photo,
.afv-photo {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-signatur) 0 var(--radius-signatur) 0;
}

.about-photo {
    box-shadow:
        0 2px 6px   rgba(44, 62, 80, 0.06),
        0 18px 40px rgba(44, 62, 80, 0.12);
}

.afv-photo {
    box-shadow:
        0 2px 6px   rgba(15, 23, 30, 0.25),
        0 18px 40px rgba(15, 23, 30, 0.35);
}


/* ============================================================
   VERTRAUENSBAND – Branchen und Anforderungen
   ============================================================ */
.trust-band {
    background: var(--c-primary);
    padding-block: var(--gap-md);
}

.trust-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--gap-md) var(--gap-lg);
}

.trust-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    max-width: 12rem;
    line-height: 1.6;
}

.trust-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm) var(--gap-md);
}

.trust-items li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.82);
}

.trust-items li::before {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--c-accent);
    transform: rotate(45deg);
    flex-shrink: 0;
}


/* ============================================================
   PROZESS – Schritte als Zeitstrahl
   ============================================================ */
.process-steps {
    position: relative;
}

/* Durchgehende Linie hinter den drei Schritten */
.process-steps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--c-accent) 0%,
        rgba(138, 180, 212, 0.25) 100%
    );
}

.process-step {
    position: relative;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}

.process-step:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(138, 180, 212, 0.5);
    transform: translateY(-3px);
}

/* Markierungspunkt auf dem Zeitstrahl */
.process-step::before {
    content: '';
    position: absolute;
    top: -5px;
    left: var(--gap-md);
    width: 9px;
    height: 9px;
    background: var(--c-accent);
    transform: rotate(45deg);
}


/* ============================================================
   LEISTUNGSKARTEN – grafische Aufwertung
   ============================================================ */
.services-grid {
    align-items: stretch;
}

.service-card {
    position: relative;
    overflow: hidden;
}

/* Akzentkante, die beim Überfahren einläuft */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--c-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--ease);
}

.service-card:hover::before,
.service-card:focus-visible::before {
    transform: scaleX(1);
}

/* Icon in einer weichen Fläche statt frei stehend */
.service-icon {
    box-sizing: content-box;
    padding: 0.75rem;
    background: var(--c-accent-sf);
    transition: background var(--ease), color var(--ease);
}

.service-card:hover .service-icon {
    background: var(--c-accent);
    color: var(--c-white);
}


/* ============================================================
   TEAM – Monogramm statt grauer Silhouette
   ============================================================ */
.team-monogram {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
}

/* Schräger Lichtstrahl über dem Monogramm – Logo-Signatur */
.team-monogram::after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    top: 58%;
    height: 5px;
    background: linear-gradient(
        90deg,
        rgba(138, 180, 212, 0) 0%,
        var(--c-accent) 50%,
        rgba(138, 180, 212, 0) 100%
    );
    transform: rotate(-11deg);
    opacity: 0.75;
}

.team-monogram span {
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1;
}

/* Kontaktzeile in der Teamkarte */
.team-contact {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-accent-dk);
    word-break: break-all;
    transition: color var(--ease);
}

.team-contact:hover {
    color: var(--c-primary);
}

.team-card {
    display: flex;
    flex-direction: column;
}

.team-info {
    flex: 1;
}


/* ============================================================
   NAVIGATOR – Produktsektion mit schematischer Darstellung
   ============================================================ */
.navigator-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-xl);
    align-items: center;
}

/* Schema: Kunde → Kategorie → Seite → Messpunkt */
.nav-schema {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    padding: var(--gap-md);
    box-shadow: var(--shadow-md);
}

.nav-schema-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: center;
    gap: var(--gap-sm);
    padding-block: 0.75rem;
    position: relative;
}

/* Verbindungslinie zwischen den Ebenen */
.nav-schema-row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 1.25rem;
    top: 2.4rem;
    bottom: -0.4rem;
    width: 1px;
    background: var(--c-border);
}

.nav-schema-step {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-accent-sf);
    color: var(--c-accent-dk);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

.nav-schema-row:last-child .nav-schema-step {
    background: var(--c-accent);
    color: var(--c-white);
}

.nav-schema-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-primary);
}

.nav-schema-text span {
    font-size: 0.82rem;
    color: var(--c-muted);
}

/* Nutzenpunkte des Navigators */
.benefit-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-md);
    margin-top: var(--gap-md);
}

.benefit {
    padding-left: var(--gap-sm);
    border-left: 3px solid var(--c-accent);
}

.benefit h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-primary);
    margin-bottom: 0.25rem;
}

.benefit p {
    font-size: 0.85rem;
    color: var(--c-muted);
    line-height: 1.65;
}

.navigator-action {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-sm);
    margin-top: var(--gap-md);
}


/* ============================================================
   CTA-BAND – Abschluss jeder Seite
   ============================================================ */
.cta-band {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
    color: var(--c-white);
    padding-block: var(--gap-lg);
}

.cta-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--gap-md) var(--gap-lg);
}

.cta-inner h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-white);
    margin-bottom: 0.5rem;
}

.cta-inner p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.72);
    max-width: 44rem;
}

.cta-actions {
    display: flex;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}


/* ============================================================
   MEDIEN-PANEL auf den Leistungsseiten
   Ersetzt den technischen Video-Platzhalter durch eine gestaltete
   Fläche. Ein späteres <video> übernimmt dieselbe Position.
   ============================================================ */
.media-panel {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-primary);
    margin: 0;
}

.media-panel img,
.media-panel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Abdunkelung von unten für die Bildunterschrift */
.media-panel figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--gap-md) var(--gap-md) var(--gap-sm);
    background: linear-gradient(
        to top,
        rgba(44, 62, 80, 0.78) 0%,
        rgba(44, 62, 80, 0) 100%
    );
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.media-panel figcaption strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 0.2rem;
}

/* Grafik-Variante ohne Foto: gezeichnete Illustration im CD */
.media-panel--graphic {
    background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-panel--graphic svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Abstand zum folgenden Inhalt, analog zum früheren Video-Container */
.service-detail-intro .media-panel {
    margin-bottom: 0;
}


/* ============================================================
   QUERVERWEISE zu weiteren Leistungen
   ============================================================ */
.related-services {
    margin-top: var(--gap-xl);
    padding-top: var(--gap-lg);
    border-top: 1px solid var(--c-border);
}

/* Steht der Block allein in seinem Abschnitt, trägt der Abschnitt
   bereits den Abstand – dann keine zweite Trennlinie. */
.container > .related-services:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.related-heading {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: var(--gap-md);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
}

.related-card {
    display: block;
    padding: var(--gap-sm) var(--gap-md) var(--gap-md);
    border: 1px solid var(--c-border);
    border-top: 3px solid var(--c-accent);
    background: var(--c-white);
    transition: box-shadow var(--ease), transform var(--ease);
}

.related-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.related-card strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.25rem;
}

.related-card span {
    font-size: 0.82rem;
    color: var(--c-muted);
    line-height: 1.6;
}


/* ============================================================
   FLIESSTEXT – Diamant-Marker statt runder Punkte
   ============================================================ */
.prose ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.prose ul li {
    position: relative;
    padding-left: 1.4rem;
    margin-bottom: 0;
}

.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    background: var(--c-accent);
    transform: rotate(45deg);
}

/* Hervorgehobener Merksatz im Fliesstext */
.prose .callout {
    border-left: 3px solid var(--c-accent);
    background: var(--c-bg);
    padding: var(--gap-sm) var(--gap-md);
    margin-block: var(--gap-md);
    font-size: 0.95rem;
    color: var(--c-primary);
    line-height: 1.75;
}


/* ============================================================
   SEITENKOPF der Unterseiten – Lichtstrahl-Dekoration
   ============================================================ */
.page-hero {
    background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dk) 100%);
}

.page-hero h1 {
    max-width: 24ch;
}

.page-hero p {
    max-width: 62ch;
}

/* Akzentlinie unter der Seitenüberschrift */
.page-hero h1::after {
    content: '';
    display: block;
    width: 56px;
    height: 3px;
    background: var(--c-accent);
    margin-block: var(--gap-sm);
}


/* ============================================================
   FUNKTIONSWEISE – nummerierte Schritte auf heller Fläche
   ============================================================ */
.howto-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap-md);
    margin-bottom: var(--gap-lg);
}

.howto-step {
    padding-top: var(--gap-sm);
    border-top: 2px solid var(--c-border);
    transition: border-color var(--ease);
}

.howto-step:hover {
    border-top-color: var(--c-accent);
}

.howto-num {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-accent-dk);
    font-variant-numeric: tabular-nums;
    display: block;
    margin-bottom: 0.4rem;
}

.howto-step h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-primary);
    margin-bottom: 0.35rem;
}

.howto-step p {
    font-size: 0.875rem;
    color: var(--c-muted);
    line-height: 1.7;
}


/* ============================================================
   FOOTER – dreispaltiger Aufbau mit Sitemap
   ============================================================ */
.site-footer {
    position: relative;
    overflow: hidden;
    padding-block: var(--gap-lg) var(--gap-md);
}

.site-footer > .container {
    position: relative;
    z-index: 1;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr;
    gap: var(--gap-lg);
    padding-bottom: var(--gap-md);
    margin-bottom: var(--gap-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-claim {
    font-size: 0.85rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.6);
    max-width: 34ch;
    margin-top: 0.75rem;
}

/* Spaltenüberschrift */
.footer-col h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: var(--gap-sm);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-col li,
.footer-col a {
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.68);
}

.footer-col a {
    transition: color var(--ease);
}

.footer-col a:hover,
.footer-col a:focus-visible {
    color: var(--c-white);
}

/* Untere Leiste: Copyright und Rechtliches */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap-md);
}

.footer-bottom p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-legal {
    display: flex;
    gap: var(--gap-md);
}

.footer-legal a {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    transition: color var(--ease);
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--c-white);
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--gap-md);
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   DATENSCHUTZ-HINWEIS
   Liegt am unteren Bildschirmrand und bleibt stehen, bis der
   Besucher ihn bestätigt. Die Entscheidung merkt sich der Browser.
   ============================================================ */
.ds-hinweis {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: var(--c-white);
    border-top: 3px solid var(--c-accent);
    box-shadow:
        0 -2px 6px   rgba(44, 62, 80, 0.06),
        0 -12px 32px rgba(44, 62, 80, 0.14);

    /* Startzustand: unterhalb des Bildrands, wird eingeblendet */
    transform: translateY(100%);
    transition: transform 0.35s ease;
}

.ds-hinweis.ist-sichtbar {
    transform: translateY(0);
}

.ds-inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--gap-sm) var(--gap-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-sm) var(--gap-md);
}

.ds-text {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--c-text);
    max-width: 68ch;
}

.ds-text strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-accent-dk);
    margin-bottom: 0.2rem;
}

.ds-text a {
    color: var(--c-accent-dk);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.ds-text a:hover {
    color: var(--c-primary);
}

.ds-aktion {
    flex-shrink: 0;
}

/* Nach-oben-Schaltfläche über den Hinweis heben. Die Höhe trägt das
   Skript als --ds-hoehe ein, damit der Versatz auch bei umbrechendem
   Text und in beiden Sprachen stimmt. */
body.ds-offen .to-top {
    bottom: calc(var(--gap-md) + var(--ds-hoehe, 124px));
}

@media (max-width: 768px) {
    .ds-inner {
        flex-direction: column;
        align-items: stretch;
        padding: var(--gap-sm);
    }

    .ds-aktion .btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    body.ds-offen .to-top {
        bottom: calc(var(--gap-sm) + var(--ds-hoehe, 200px));
    }
}

/* Im Ausdruck nicht mitdrucken */
@media print {
    .ds-hinweis { display: none !important; }
}


/* ============================================================
   NACH-OBEN-SCHALTFLÄCHE
   ============================================================ */
.to-top {
    position: fixed;
    right: var(--gap-md);
    bottom: var(--gap-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-primary);
    color: var(--c-white);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease), background var(--ease);
    z-index: 90;
}

.to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.to-top:hover {
    background: var(--c-accent-dk);
}

.to-top svg {
    width: 18px;
    height: 18px;
}


/* ============================================================
   EINBLENDEN BEIM SCROLLEN
   ============================================================ */
/* Nur ausblenden, wenn JavaScript aktiv ist – ohne JS bleibt alles sichtbar */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Gestaffeltes Einblenden für Rasterelemente */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}


/* ============================================================
   RESPONSIVE – Ergänzungen
   ============================================================ */
@media (max-width: 1024px) {
    .navigator-layout {
        grid-template-columns: 1fr;
        gap: var(--gap-lg);
    }

    .related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Navigation früher auf das Klappmenü umstellen: mit sechs Einträgen wird
   die Leiste sonst schon ab rund 900px zu eng für das Logo-Badge. */
@media (max-width: 900px) {

    .nav-toggle {
        display: flex;
        order: 2;               /* Hamburger ganz nach rechts */
    }

    /* Sprachumschalter bleibt sichtbar, auch wenn das Menü zu ist */
    .lang-switch {
        order: 1;
        margin-left: auto;
        margin-right: var(--gap-sm);
    }

    .nav-links {
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        background: var(--c-white);
        flex-direction: column;
        align-items: stretch;
        padding: var(--gap-xs) 0;
        border-top: 1px solid var(--c-border);
        box-shadow: 0 8px 24px rgba(44, 62, 80, 0.1);
        transform: translateY(-110%);
        opacity: 0;
        pointer-events: none;
        transition: transform var(--ease), opacity var(--ease);
        gap: 0;
    }

    .nav-links.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: all;
    }

    .nav-link {
        display: block;
        padding: 0.875rem var(--gap-md);
        border-bottom: 1px solid var(--c-border) !important;
        border-right: none;
    }

    .nav-link:last-child {
        border-bottom: none !important;
    }

    .nav-link-cta {
        margin: var(--gap-sm) var(--gap-md);
        text-align: center;
        border: 2px solid var(--c-accent);
    }
}

@media (max-width: 768px) {

    /* Rahmenversatz auf schmalen Ansichten zurücknehmen */
    .about-image-col::before,
    .afv-image-col::before {
        top: 12px;
        right: -12px;
        bottom: -12px;
        left: 12px;
        border-radius: var(--radius-signatur-mobil) 0 var(--radius-signatur-mobil) 0;
    }

    .about-photo,
    .afv-photo {
        border-radius: var(--radius-signatur-mobil) 0 var(--radius-signatur-mobil) 0;
    }

    .trust-inner {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }

    .trust-label {
        max-width: none;
    }

    .cta-inner {
        grid-template-columns: 1fr;
    }

    .benefit-list {
        grid-template-columns: 1fr;
        gap: var(--gap-sm);
    }

    .related-grid {
        grid-template-columns: 1fr;
    }

    /* Zeitstrahl vertikal führen */
    .process-steps::before {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            var(--c-accent) 0%,
            rgba(138, 180, 212, 0.25) 100%
        );
    }

    .process-step::before {
        top: var(--gap-md);
        left: -5px;
    }

    .to-top {
        right: var(--gap-sm);
        bottom: var(--gap-sm);
    }
}


/* ============================================================
   DRUCKAUSGABE
   ============================================================ */
@media print {
    .site-header,
    .nav-toggle,
    .to-top,
    .cta-band,
    .contact-form,
    .beam-deco,
    .grid-deco {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    .hero,
    .page-hero {
        margin-top: 0;
    }

    .page-hero {
        background: none !important;
        color: #000;
    }

    .page-hero h1,
    .page-hero p,
    .eyebrow.light {
        color: #000 !important;
    }

    .section {
        padding-block: 1.5rem;
        break-inside: avoid;
    }

    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 0.75em;
        color: #555;
    }
}