/* ==========================================================================
   Florian Ludwig · Website
   Basis: Bootstrap 5.3.8 (assets/dist), dieses Stylesheet legt Flos Marke darüber.
   Aufbau:
     1  Schrift (selbst gehostet, keine Google-Verbindung)
     2  Tokens (Farben aus Flos Styleguide)
     3  Bootstrap-Variablen überschreiben
     4  Grundlagen und Typografie
     5  Layout (Container, Abschnitte)
     6  Kopf und Navigation
     7  Bausteine (Kicker, Buttons, Listen, Kacheln, Karten, FAQ, Formular)
     8  Seiten-Signaturen (Leistungen, Über mich, Fragen)
     9  Fuß
    10  Hilfsklassen, Bewegung, Druck
   ========================================================================== */


/* 1  Schrift
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/AlbertSans/albert-sans-300.woff2') format('woff2'),
         url('../fonts/AlbertSans/albert-sans-300.woff') format('woff');
}
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/AlbertSans/albert-sans-400.woff2') format('woff2'),
         url('../fonts/AlbertSans/albert-sans-400.woff') format('woff');
}
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/AlbertSans/albert-sans-500.woff2') format('woff2'),
         url('../fonts/AlbertSans/albert-sans-500.woff') format('woff');
}
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/AlbertSans/albert-sans-600.woff2') format('woff2'),
         url('../fonts/AlbertSans/albert-sans-600.woff') format('woff');
}


/* 2  Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Nacht (Tinte, dunkle Flächen) */
    --nacht-900: #121A22;
    --nacht-850: #17212B;
    --nacht-800: #1A242E;
    --nacht-700: #27333E;
    --nacht-600: #34414D;

    /* Grau */
    --grau-500: #5B6774;
    --grau-300: #97A4B0;
    --grau-150: #DCE0E5;
    --grau-100: #E8ECEF;
    --grau-50:  #F4F5F7;

    /* Bernstein (Akzent) */
    --bernstein-700: #8A5A0A;
    --bernstein-400: #E7BC62;
    --bernstein-100: #F6EBD3;

    --weiss: #FFFFFF;

    /* Rollen */
    --text: var(--nacht-850);
    --text-soft: var(--nacht-600);
    --text-muted: var(--grau-500);
    --line: var(--grau-150);
    --accent-text: var(--bernstein-700);
    --accent-line: var(--bernstein-400);

    /* Maße */
    --wrap-max: 1240px;
    --wrap-pad: 32px;
    --header-h: 84px;
    --header-h-kompakt: 64px;
    --section-y: 128px;
    --section-y-sm: 96px;

    --font: 'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
}

@media (max-width: 767.98px) {
    :root {
        --wrap-pad: 20px;
        --header-h: 68px;
        --header-h-kompakt: 58px;
        --section-y: 80px;
        --section-y-sm: 64px;
    }
}


/* 3  Bootstrap-Variablen
   -------------------------------------------------------------------------- */

:root {
    --bs-body-font-family: var(--font);
    --bs-body-font-size: 1.125rem;      /* 18px */
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--nacht-850);
    --bs-body-bg: var(--weiss);
    --bs-emphasis-color: var(--nacht-850);
    --bs-heading-color: var(--nacht-850);
    --bs-link-color: var(--nacht-850);
    --bs-link-color-rgb: 23, 33, 43;
    --bs-link-hover-color: var(--bernstein-700);
    --bs-link-hover-color-rgb: 138, 90, 10;
    --bs-border-color: var(--grau-150);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-focus-ring-color: rgba(231, 188, 98, .55);
    --bs-secondary-color: var(--grau-500);
}


/* 4  Grundlagen und Typografie
   -------------------------------------------------------------------------- */

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

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-weight: 500;
    margin: 0;
}

p { margin: 0; }

a { text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color .2s ease; }

::selection { background: var(--bernstein-100); color: var(--nacht-850); }

:focus-visible { outline: 2px solid var(--nacht-850); outline-offset: 3px; }
/* Auf dunklen Flächen Bernstein (Kontrast 9:1), auf hellen Nachtblau */
.section--dunkel :focus-visible,
.site-footer :focus-visible { outline-color: var(--bernstein-400); }
/* Bootstrap-Fokusringe (blau, schwach) durch die eigene Kontur ersetzen */
.btn:focus-visible,
.nav-link:focus-visible,
.form-check-input:focus,
.navbar-brand:focus-visible { box-shadow: none; }
/* Bootstrap setzt hier outline: 0, deshalb ausdrücklich wieder einschalten */
.btn:focus-visible,
.nav-link:focus-visible,
.chip:focus-visible { outline: 2px solid var(--nacht-850); outline-offset: 3px; }
.section--dunkel .btn:focus-visible,
.section--dunkel .chip:focus-visible { outline-color: var(--bernstein-400); }
.form-check-input:focus-visible { outline: 2px solid var(--nacht-850); outline-offset: 2px; }
.section--dunkel .form-check-input:focus-visible { outline-color: var(--bernstein-400); }

/* Überschriften brechen ausgewogen um (keine einzelnen Wörter in der letzten Zeile).
   Eigene Umbrüche gehen mit <br>, nur für große Bildschirme mit <br class="d-none d-lg-inline">. */
.t-hero, .t-page, .t-section, .t-sub, .t-statement { text-wrap: balance; }
.t-hero, .t-page { max-width: 18ch; }

.t-hero {
    font-size: clamp(48px, 7.2vw, 92px);
    line-height: 1.0;
    letter-spacing: -0.035em;
    font-weight: 500;
}

.t-page {
    font-size: clamp(44px, 6vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 500;
}

.t-section {
    font-size: clamp(32px, 3.6vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 500;
}

.t-sub {
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 500;
}

.t-statement {
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 400;
}

.t-lead {
    font-size: clamp(19px, 1.6vw, 21px);
    font-weight: 300;
    color: var(--text-soft);
    max-width: 32em;
}

.t-item {
    font-size: 21px;
    line-height: 1.4;
    font-weight: 500;
}

.t-small { font-size: 15px; }
.t-muted { color: var(--text-muted); }
.t-soft { color: var(--text-soft); }
.t-accent { color: var(--accent-text); }
.measure { max-width: 36em; }
.measure-narrow { max-width: 30em; }


/* 5  Layout
   -------------------------------------------------------------------------- */

.wrap {
    width: 100%;
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--wrap-pad);
}

.section { padding-block: var(--section-y); }
.section-sm { padding-block: var(--section-y-sm); }
.section-top-0 { padding-top: 0; }
.section--grau { background: var(--grau-50); }
.section--linie { border-top: 1px solid var(--line); }

.section--dunkel {
    background: var(--nacht-850);
    color: var(--grau-100);
    --text-soft: var(--grau-300);
    --text-muted: var(--grau-300);
    --line: var(--nacht-600);
    --accent-text: var(--bernstein-400);
    --bs-heading-color: var(--grau-100);
}
.section--dunkel a { color: var(--grau-100); }
.section--dunkel a:hover { color: var(--bernstein-400); }

/* Zwei Spalten: Überschrift links, Inhalt rechts */
.split {
    display: grid;
    gap: 40px 48px;
}
@media (min-width: 992px) {
    .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
    .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 72px; }
}

.page-intro { padding-top: 96px; padding-bottom: 72px; }
@media (max-width: 767.98px) { .page-intro { padding-top: 56px; padding-bottom: 48px; } }

/* Bootstrap-Raster: Abstand an den Seitenrand anpassen, damit nichts übersteht */
@media (max-width: 767.98px) {
    .wrap .row { --bs-gutter-x: 40px; }
}

.stack > * + * { margin-top: var(--stack, 28px); }
.stack-sm { --stack: 16px; }
.stack-xs { --stack: 10px; }


/* 6  Kopf und Navigation
   -------------------------------------------------------------------------- */

/* Kopf liegt fest oben. So verschiebt sich beim Kompaktwerden nichts im Inhalt. */
body { padding-top: var(--header-h); }

.site-header {
    --nav-h: var(--header-h);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--grau-150);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    transition: box-shadow .35s ease, background-color .35s ease;
}

.site-header.menu-open { background: #fff; box-shadow: 0 24px 40px -24px rgba(23, 33, 43, .3); }

/* Beim Scrollen: etwas flacher, mit feinem Schatten (Klasse setzt main.js) */
.site-header.is-scrolled {
    --nav-h: var(--header-h-kompakt);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 10px 30px -18px rgba(23, 33, 43, .25);
}

.site-header .navbar {
    min-height: var(--nav-h);
    padding-block: 0;
    transition: min-height .35s cubic-bezier(.2, .7, .2, 1);
}

.navbar-brand.brand {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    color: var(--nacht-850);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    min-height: var(--nav-h);
    transition: min-height .35s cubic-bezier(.2, .7, .2, 1);
}
.navbar-brand.brand:hover { color: var(--nacht-850); }

.site-nav .nav-link {
    font-size: 15px;
    color: var(--grau-500);
    padding: 8px 0;
}
.site-nav .nav-link:hover { color: var(--nacht-850); }
.site-nav .nav-link.active,
.site-nav .nav-link[aria-current="page"] { color: var(--nacht-850); font-weight: 500; }

.site-nav .nav-link--box {
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid var(--grau-150);
}
.site-nav .nav-link--box:hover { border-color: var(--nacht-850); }

@media (min-width: 992px) {
    .site-nav { align-items: center; gap: 32px; }
}

@media (max-width: 991.98px) {
    .site-nav { padding: 12px 0 24px; }
    .site-nav .nav-link { font-size: 20px; padding: 10px 0; color: var(--nacht-850); }
    .site-nav .nav-link--box { display: inline-block; margin-top: 12px; font-size: 15px; padding: 10px 16px; }
}

/* Schlichter Umschalter: zwei Linien */
.nav-toggle {
    border: 0;
    padding: 10px 0 10px 10px;
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: var(--nav-h);
    transition: min-height .35s cubic-bezier(.2, .7, .2, 1);
}
.nav-toggle:focus { box-shadow: none; }
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--nacht-850);
    transition: transform .25s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }


/* 7  Bausteine
   -------------------------------------------------------------------------- */

/* Kicker mit Bernstein-Linie */
.kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.kicker::before {
    content: "";
    flex: 0 0 36px;
    height: 2px;
    background: var(--bernstein-400);
}

.label {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.label--accent { color: var(--accent-text); font-weight: 600; font-size: 14px; }

/* Buttons */
.btn-ink,
.btn-amber,
.btn-line {
    --bs-btn-padding-x: 30px;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 18px;
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 0;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
}
.btn-ink {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--nacht-850);
    --bs-btn-border-color: var(--nacht-850);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--nacht-700);
    --bs-btn-hover-border-color: var(--nacht-700);
    --bs-btn-active-bg: var(--nacht-900);
    --bs-btn-active-color: #fff;
}
.btn-amber {
    --bs-btn-color: var(--nacht-850);
    --bs-btn-bg: var(--bernstein-400);
    --bs-btn-border-color: var(--bernstein-400);
    --bs-btn-hover-color: var(--nacht-850);
    --bs-btn-hover-bg: #EFCB80;
    --bs-btn-hover-border-color: #EFCB80;
    --bs-btn-active-bg: #DDB053;
    --bs-btn-font-weight: 600;
}
.btn-line {
    --bs-btn-color: var(--nacht-850);
    --bs-btn-border-color: var(--grau-300);
    --bs-btn-hover-color: var(--nacht-850);
    --bs-btn-hover-border-color: var(--nacht-850);
    --bs-btn-disabled-color: var(--grau-500);
    --bs-btn-disabled-border-color: var(--grau-150);
    --bs-btn-disabled-opacity: 1;
}

.link-strong {
    font-weight: 500;
    padding-bottom: 3px;
}

/* Sprungmarken */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    padding: 8px 16px;
    border: 1px solid var(--grau-300);
    text-decoration: none;
    font-size: 15px;
}
.chip--muted { color: var(--grau-500); border-color: var(--grau-150); }

/* Haarlinien-Liste */
.lines { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.lines > li { padding: 14px 0; border-top: 1px solid var(--line); }
.lines--roomy > li { padding: 28px 0; }

/* Zeile: Aussage links, Erklärung rechts */
.row-pair {
    display: grid;
    gap: 8px 40px;
}
@media (min-width: 768px) { .row-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.row-pair--date { grid-template-columns: 1fr; }
@media (min-width: 768px) { .row-pair--date { grid-template-columns: 140px minmax(0, 1fr); } }

.lines--skills > li { padding: 22px 0; }
.row-pair--skills { grid-template-columns: 1fr; gap: 12px 40px; }
@media (min-width: 768px) { .row-pair--skills { grid-template-columns: 220px minmax(0, 1fr); } }

/* Element mit Bernstein-Linie oben */
.topline {
    border-top: 2px solid var(--bernstein-400);
    padding-top: 24px;
}

.note {
    border-top: 2px solid var(--bernstein-400);
    padding-top: 18px;
    color: var(--text-muted);
    font-size: 16px;
}

.box {
    background: var(--grau-50);
    padding: 20px 24px;
    font-size: 16px;
    color: var(--text-soft);
}
.box--weiss { background: var(--weiss); }
.box--gross { padding: 28px 32px; font-size: 18px; }

/* Kachelraster mit Haarfugen */
.tiles {
    display: grid;
    gap: 2px;
    background: var(--grau-150);
    border: 2px solid var(--grau-150);
}
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile {
    background: var(--weiss);
    padding: 40px 36px;
}
.tile--grau { background: var(--grau-50); }
.tile--breit { grid-column: 1 / -1; }
.tile--fakt { padding: 28px; }
.tile .icon { width: 32px; height: 32px; color: var(--bernstein-700); }
.tile-title { font-size: 22px; font-weight: 500; line-height: 1.35; }
.tile-value { font-size: 22px; font-weight: 500; line-height: 1.35; }

/* Karten auf Dunkel */
.cards-dark { display: grid; gap: 16px; }
@media (min-width: 768px) { .cards-dark { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-dark {
    background: var(--nacht-800);
    border: 1px solid var(--nacht-700);
    padding: 32px;
}
.card-dark .icon { width: 28px; height: 28px; color: var(--bernstein-400); }
.card-dark-title { font-size: 20px; font-weight: 500; color: var(--grau-100); line-height: 1.4; }

/* Zahlen */
.figure-num {
    font-size: clamp(52px, 5.6vw, 72px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 400;
    color: var(--bernstein-700);
}

/* Schritte */
.steps { display: grid; gap: 32px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { border-top: 2px solid var(--bernstein-400); padding-top: 20px; }
.step-nr { font-size: 14px; font-weight: 600; color: var(--accent-text); }
.step-title { font-size: 21px; font-weight: 500; margin-top: 10px; }
.step p:last-child { margin-top: 10px; color: var(--text-soft); }

/* Bild-Platzhalter, bis echte Bilder da sind */
.ph {
    width: 100%;
    background: var(--grau-100);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--grau-500);
    font-size: 15px;
}
.ph--dunkler { background: var(--grau-150); }
.ratio-16x7 { aspect-ratio: 16 / 7; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
@media (max-width: 767.98px) { .ratio-16x7, .ratio-21x9 { aspect-ratio: 4 / 3; } }

/* Häufige Fragen */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); padding: 24px 0; }
.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    color: var(--accent-text);
    font-weight: 400;
    flex: 0 0 auto;
    transition: transform .2s ease;
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.faq details > p { margin-top: 16px; color: var(--text-muted); max-width: 36em; }

/* Schlagworte */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 4px 14px; border: 1px solid var(--grau-150); font-size: 15px; }
.tag--fokus { border-color: var(--bernstein-400); background: var(--bernstein-100); }

/* Tabelle Projekthistorie */
.table-history {
    --bs-table-bg: var(--weiss);
    --bs-table-border-color: var(--grau-150);
    font-size: 15px;
    min-width: 860px;
    margin: 0;
}
.table-history th { padding: 16px 20px; border-bottom: 2px solid var(--nacht-850) !important; font-weight: 600; }
.table-history td { padding: 20px; vertical-align: top; color: var(--nacht-600); }
.table-history td:first-child,
.table-history td:last-child { color: var(--grau-500); }
.table-history tr:last-child td { border-bottom: 0; }
.table-history b { color: var(--nacht-850); font-weight: 600; }

/* Formular: Linien statt Kästen */
.form-line .form-label { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
.form-line .form-control,
.form-line .form-select {
    min-height: 52px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--grau-500);
    border-radius: 0;
    background-color: transparent;
    color: inherit;
    font-size: 18px;
}
.form-line .form-select { background-position: right 0 center; padding-right: 28px; }
.form-line .form-control:focus,
.form-line .form-select:focus {
    box-shadow: none;
    border-bottom-color: var(--bernstein-700);
}
.form-line .form-check { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; padding-left: 0; }
.form-line .form-check .form-check-label { flex: 1 1 0; min-width: 0; }

/* Fehlermeldungen: nur Rot für Fehler, kein Grün für richtig ausgefüllte Felder */
.form-line { --fehler: #B42318; }
.section--dunkel .form-line { --fehler: #FF9C8F; }
.form-line .invalid-feedback { color: var(--fehler); font-size: 15px; margin-top: 6px; }
.form-line .form-check .invalid-feedback { flex-basis: 100%; margin: 0 0 0 32px; }
.was-validated .form-line .form-control:invalid,
.form-line.was-validated .form-control:invalid,
.form-line.was-validated .form-select:invalid {
    border-color: transparent;
    border-bottom-color: var(--fehler);
    background-image: none;
    padding-right: 0;
}
.form-line.was-validated .form-control:invalid:focus { box-shadow: none; border-bottom-color: var(--fehler); }
.form-line.was-validated .form-control:valid,
.form-line.was-validated .form-select:valid {
    border-color: transparent;
    border-bottom-color: var(--grau-500);
    background-image: none;
    padding-right: 0;
}
.form-line.was-validated .form-select:valid { padding-right: 28px; background-image: var(--bs-form-select-bg-img); }
.form-line.was-validated .form-control:valid:focus { box-shadow: none; border-bottom-color: var(--bernstein-700); }
.form-line.was-validated .form-check-input:valid ~ .form-check-label { color: inherit; }
.form-line.was-validated .form-check-input:valid { border-color: var(--grau-500); }
.form-line.was-validated .form-check-input:valid:checked { background-color: var(--nacht-850); border-color: var(--nacht-850); }
.section--dunkel .form-line.was-validated .form-check-input:valid:checked { background-color: var(--bernstein-400); border-color: var(--bernstein-400); }
.form-line.was-validated .form-check-input:invalid { border-color: var(--fehler); }
.form-line.was-validated .form-check-input:invalid ~ .form-check-label { color: inherit; }
.form-hinweis { margin: 0; font-size: 15px; }
.section--dunkel .form-hinweis { color: var(--grau-300); }
.form-status { margin: 0; font-size: 15px; font-weight: 500; }
.form-status.is-error { color: var(--fehler); }
.form-line .form-check-input {
    float: none;
    margin: 3px 0 0;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-color: var(--grau-300);
}
.form-line .form-check-input:checked { background-color: var(--nacht-850); border-color: var(--nacht-850); }
.form-line .form-check-label { font-size: 15px; color: var(--grau-500); }
.form-line .form-text { font-size: 14px; color: var(--grau-500); }

.section--dunkel .form-line .form-control,
.section--dunkel .form-line .form-select { border-bottom-color: var(--grau-300); color: var(--grau-100); }
.section--dunkel .form-line .form-control:focus { border-bottom-color: var(--bernstein-400); }
.section--dunkel .form-line .form-check-label { color: var(--grau-300); }
.section--dunkel .form-line .form-check-input { background-color: transparent; border-color: var(--grau-500); }
.section--dunkel .form-line .form-check-input:checked { background-color: var(--bernstein-400); border-color: var(--bernstein-400); }

.contact-lines { font-size: 20px; font-weight: 500; }

/* Rechtstexte */
.legal h2 { font-size: 24px; margin: 48px 0 12px; }
.legal p, .legal li { color: var(--nacht-600); max-width: 42em; }
.legal { overflow-wrap: anywhere; }  /* lange URLs brechen auf schmalen Bildschirmen um */
.legal p + p { margin-top: 12px; }
.legal h3 { font-size: 20px; margin: 32px 0 10px; }
.legal h4 { font-size: 17px; margin: 24px 0 8px; }
.legal ul { max-width: 42em; margin: 12px 0; padding-left: 1.2em; }
.legal ul + p, .legal p + ul { margin-top: 12px; }
.legal h2, .legal h3 { hyphens: manual; }


/* 8  Seiten-Signaturen
   -------------------------------------------------------------------------- */

/* Leistungen: Bereiche im Wechsel links und rechts, je mit Bild */
.service {
    display: grid;
    gap: 40px;
    align-items: start;
}
@media (min-width: 992px) {
    .service { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
    .service--rechts .service-media { order: 2; }
    .service--rechts { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
    .service-media { align-self: stretch; }
    .service-media > * { position: sticky; top: calc(var(--header-h) + 32px); }
}
.service + .service { margin-top: var(--section-y); padding-top: var(--section-y); border-top: 1px solid var(--grau-150); }
.service .icon { width: 36px; height: 36px; color: var(--bernstein-700); }

/* Über mich: Foto über die volle Breite */
.bleed { width: 100%; }
.bleed .ph { min-height: 320px; }

/* Über mich: Zitat */
.pullquote {
    margin: 0;
    padding: 0;
    border: 0;
}
.pullquote p {
    font-size: clamp(34px, 4.8vw, 60px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    font-weight: 400;
    max-width: 18ch;
}
.pullquote p::before {
    content: "“";
    display: block;
    font-size: 2em;
    line-height: .8;
    height: .5em;
    font-weight: 500;
    color: var(--bernstein-400);
}
.pullquote footer { margin-top: 28px; font-size: 16px; color: var(--grau-500); }

/* Fragen: Überschrift bleibt beim Scrollen stehen */
@media (min-width: 992px) {
    .sticky-head {
        position: sticky;
        top: calc(var(--header-h) + 40px);
        align-self: start;
    }
}
.sticky-head .count { margin-top: 12px; font-size: 15px; color: var(--grau-500); }


/* 9  Fuß
   -------------------------------------------------------------------------- */

/* Fuß bleibt auch auf kurzen Seiten unten */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

.site-footer {
    background: var(--nacht-900);
    color: var(--grau-300);
    font-size: 14px;
    padding: 32px 0 40px;
}
.site-footer a { color: var(--grau-300); }
.site-footer a:hover { color: var(--bernstein-400); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }

/* Cookie-Einwilligung (vanilla-cookieconsent, Farben aus den Tokens) */
#cc-main {
    --cc-font-family: var(--font);
    --cc-modal-border-radius: 0;
    --cc-btn-border-radius: 0;
    --cc-pm-toggle-border-radius: 0;
    --cc-bg: var(--weiss);
    --cc-primary-color: var(--nacht-850);
    --cc-secondary-color: var(--nacht-600);
    --cc-link-color: var(--bernstein-700);
    --cc-btn-primary-bg: var(--nacht-850);
    --cc-btn-primary-color: var(--weiss);
    --cc-btn-primary-border-color: var(--nacht-850);
    --cc-btn-primary-hover-bg: var(--nacht-700);
    --cc-btn-primary-hover-color: var(--weiss);
    --cc-btn-primary-hover-border-color: var(--nacht-700);
    --cc-btn-secondary-bg: var(--weiss);
    --cc-btn-secondary-color: var(--nacht-850);
    --cc-btn-secondary-border-color: var(--grau-300);
    --cc-btn-secondary-hover-bg: var(--weiss);
    --cc-btn-secondary-hover-color: var(--nacht-850);
    --cc-btn-secondary-hover-border-color: var(--nacht-850);
    --cc-separator-border-color: var(--grau-150);
    --cc-toggle-on-bg: var(--bernstein-700);
    --cc-toggle-off-bg: var(--grau-300);
    --cc-toggle-readonly-bg: var(--grau-150);
    --cc-cookie-category-block-bg: var(--grau-50);
    --cc-cookie-category-block-border: var(--grau-150);
    --cc-cookie-category-block-hover-bg: var(--grau-100);
    --cc-cookie-category-block-hover-border: var(--grau-150);
    --cc-footer-bg: var(--grau-50);
    --cc-footer-color: var(--nacht-600);
    --cc-footer-border-color: var(--grau-150);
}
#cc-main .cm,
#cc-main .pm { border-top: 3px solid var(--bernstein-400); }


/* 10  Hilfsklassen, Bewegung, Druck
   -------------------------------------------------------------------------- */

.icon { display: block; flex: 0 0 auto; }

/* Platzhalter-Hinweis für Inhalte, die Flo noch liefert */
.todo { background: var(--bernstein-100); padding: 0 4px; }


/* --------------------------------------------------------------------------
   Hover
   Eine Idee für alles: Bernstein kommt von links.
   -------------------------------------------------------------------------- */

:root {
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-line: cubic-bezier(.65, 0, .35, 1);
}

/* Buttons: Fläche schiebt sich von links hinein */
.btn-ink,
.btn-amber,
.btn-line {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    transition: color .45s var(--ease-line) .1s, border-color .45s ease;
}
.btn-ink::before,
.btn-amber::before,
.btn-line::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--fill);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .55s var(--ease-line);
}
.btn-ink:hover::before,  .btn-ink:focus-visible::before,
.btn-amber:hover::before, .btn-amber:focus-visible::before,
.btn-line:hover::before, .btn-line:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}
.btn-ink {
    --fill: var(--bernstein-400);
    --bs-btn-hover-bg: var(--nacht-850);
    --bs-btn-hover-color: var(--nacht-850);
    --bs-btn-hover-border-color: var(--bernstein-400);
    --bs-btn-active-bg: var(--bernstein-400);
    --bs-btn-active-color: var(--nacht-850);
    --bs-btn-active-border-color: var(--bernstein-400);
}
.btn-amber {
    --fill: #fff;
    --bs-btn-hover-bg: var(--bernstein-400);
    --bs-btn-hover-color: var(--nacht-850);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
}
.btn-line {
    --fill: var(--nacht-850);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: var(--nacht-850);
    --bs-btn-active-bg: var(--nacht-850);
    --bs-btn-active-color: #fff;
}
.btn.disabled::before { display: none; }

/* Sprungmarken (Chips) wie die Rahmen-Buttons: dunkle Fläche von links */
.chip {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: color .45s var(--ease-line) .1s, border-color .45s ease;
}
.chip::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: var(--nacht-850);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .55s var(--ease-line);
}
.chip:hover, .chip:focus-visible { color: #fff; border-color: var(--nacht-850); }
.chip:hover::before, .chip:focus-visible::before { transform: scaleX(1); transform-origin: left center; }
html.motion [data-reveal-group] > .chip {
    transition:
        opacity .9s var(--ease-out) var(--d, 0s),
        transform 1s var(--ease-out) var(--d, 0s),
        color .45s var(--ease-line) .1s,
        border-color .45s ease;
}

/* Links: die Linie wird von links nach rechts in Bernstein übermalt.
   Gilt für .link-strong, Links im Fließtext (ohne Klasse) und im Fuß. */
.link-strong,
main a:not([class]),
.site-footer a {
    text-decoration: none;
    padding-bottom: 2px;
    background-image:
        linear-gradient(var(--bernstein-400), var(--bernstein-400)),
        linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%, 0 100%;
    background-size: 0 2px, 100% 1px;
    transition: background-size .5s var(--ease-line), color .3s ease;
}
.link-strong:hover, .link-strong:focus-visible,
main a:not([class]):hover, main a:not([class]):focus-visible,
.site-footer a:hover, .site-footer a:focus-visible {
    color: inherit;
    background-size: 100% 2px, 100% 1px;
}
/* Mail und Telefon: ohne Grundlinie, Bernstein zeichnet sich nur beim Hover */
main .contact-lines a:not([class]) { background-size: 0 2px, 0 1px; }
main .contact-lines a:not([class]):hover,
main .contact-lines a:not([class]):focus-visible { background-size: 100% 2px, 0 1px; }

/* Navigation: Bernstein-Strich unter dem Punkt, bei der aktuellen Seite bleibt er */
@media (min-width: 992px) {
    .site-nav .nav-link:not(.nav-link--box) { position: relative; }
    .site-nav .nav-link:not(.nav-link--box)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 2px;
        height: 2px;
        background: var(--bernstein-400);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .45s var(--ease-line);
    }
    .site-nav .nav-link:not(.nav-link--box):hover::after,
    .site-nav .nav-link:not(.nav-link--box):focus-visible::after,
    .site-nav .nav-link[aria-current="page"]:not(.nav-link--box)::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}
.site-nav .nav-link--box { transition: border-color .3s ease, color .3s ease, background-color .3s ease; }
.site-nav .nav-link--box:hover { background: var(--nacht-850); border-color: var(--nacht-850); color: #fff; }

/* Leistungs-Kacheln (klickbar): Linie oben zeichnet sich, Symbol hebt sich */
.tile--link { position: relative; }
.tile--link::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--bernstein-400);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .6s var(--ease-line);
}
.tile--link .icon { transition: transform .5s var(--ease-out); }
.tile--link .tile-title a { color: inherit; text-decoration: none; }
.tile--link .tile-title a:focus-visible { outline: none; }
.tile--link:hover::before,
.tile--link:focus-within::before { transform: scaleX(1); }
.tile--link:hover .icon,
.tile--link:focus-within .icon { transform: translateY(-3px); }
.tile--link:focus-within { outline: 2px solid var(--bernstein-400); outline-offset: -2px; }
.tile--link .tile-extra { position: relative; z-index: 2; }

/* Agentur-Karten: Rahmen wird Bernstein, Fläche etwas heller */
.card-dark { transition: border-color .4s ease, background-color .4s ease; }
.card-dark:hover { border-color: rgba(231, 188, 98, .55); background-color: #1D2833; }
html.motion [data-reveal-group] > .card-dark {
    transition:
        opacity .9s var(--ease-out) var(--d, 0s),
        transform 1s var(--ease-out) var(--d, 0s),
        border-color .4s ease,
        background-color .4s ease;
}

/* --------------------------------------------------------------------------
   Bewegung
   Alles hier greift nur, wenn <html> die Klasse "motion" trägt. Die setzt ein
   kleines Skript im <head>, und nur, wenn am Gerät nicht "weniger Bewegung"
   eingestellt ist. Ohne JavaScript ist alles sofort sichtbar.
   Die Sichtbarkeit steuert main.js über die Klasse "is-in".
   -------------------------------------------------------------------------- */

:root {
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-line: cubic-bezier(.65, 0, .35, 1);
    --reveal-y: 28px;
}

/* 1  Sanft einblenden */
html.motion [data-reveal],
html.motion [data-reveal-group] > *,
html.motion .page-intro .stack:not(form) > *,
html.motion .page-intro form {
    opacity: 0;
    transform: translateY(var(--reveal-y));
    transition:
        opacity .9s var(--ease-out) var(--d, 0s),
        transform 1s var(--ease-out) var(--d, 0s);
}
html.motion [data-reveal].is-in,
html.motion [data-reveal-group] > .is-in,
html.motion .page-intro .stack:not(form) > .is-in,
html.motion .page-intro form.is-in {
    opacity: 1;
    transform: none;
}

/* Verschachtelt: inneres Element nur einblenden, nicht zusätzlich verschieben */
html.motion [data-reveal] [data-reveal],
html.motion [data-reveal] [data-reveal-group] > *,
html.motion [data-reveal-group] > * [data-reveal],
html.motion [data-reveal-group] > * [data-reveal-group] > * { transform: none; }

/* Bilder kommen ohne Versatz, nur weich */
html.motion .ph[data-reveal] { transform: none; transition-duration: 1.2s; }

/* 2  Bernstein-Linien zeichnen sich von links */
html.motion .kicker::before {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--ease-line) calc(var(--d, 0s) + .15s);
}
html.motion .is-in.kicker::before,
html.motion .is-in .kicker::before { transform: scaleX(1); }

html.motion .topline,
html.motion .step,
html.motion .note {
    border-top-color: transparent;
    background-image: linear-gradient(var(--bernstein-400), var(--bernstein-400));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0 2px;
    transition:
        background-size 1.1s var(--ease-line) calc(var(--d, 0s) + .1s),
        opacity .9s var(--ease-out) var(--d, 0s),
        transform 1s var(--ease-out) var(--d, 0s);
}
html.motion .is-in.topline, html.motion .is-in .topline,
html.motion .is-in.step,    html.motion .is-in .step,
html.motion .is-in.note,    html.motion .is-in .note { background-size: 100% 2px; }

/* Haarlinien in Listen */
html.motion .lines > li {
    border-top-color: transparent;
    background-image: linear-gradient(var(--line), var(--line));
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 0 1px;
    transition:
        background-size .9s var(--ease-line) var(--d, 0s),
        opacity .9s var(--ease-out) var(--d, 0s),
        transform 1s var(--ease-out) var(--d, 0s);
}
html.motion .lines > li.is-in { background-size: 100% 1px; }

/* 3  Große Überschrift Zeile für Zeile */
html.motion .page-intro h1 { visibility: hidden; }
html.motion .page-intro .stack > h1 { opacity: 1; transform: none; }
html.motion .page-intro h1.is-split { visibility: visible; }
.split-line {
    display: block;
    overflow: hidden;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}
.split-line > span {
    display: block;
    transform: translateY(110%);
    transition: transform 1.1s var(--ease-out) calc(var(--d, 0s) + var(--i, 0) * .1s);
}
.is-in > .split-line > span,
.is-in .split-line > span { transform: none; }

/* 4  Fragen: weiches Auf- und Zuklappen (Höhe steuert main.js) */
html.motion .faq details > p { transition: opacity .4s ease .05s; }
html.motion .faq details.is-closing > p { opacity: 0; transition-delay: 0s; }
.faq details.is-closing > summary::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    body { padding-top: 0; }
    html.motion [data-reveal], html.motion [data-reveal-group] > *, html.motion .page-intro * { opacity: 1 !important; transform: none !important; visibility: visible !important; }
    .site-header, .site-footer, .nav-toggle, form { display: none !important; }
    .section--dunkel { background: none; color: #000; }
}


/* Projekthistorie: am Handy jede Zeile als Karte statt Tabelle */
@media (max-width: 767.98px) {
    .table-history { min-width: 0; }
    .table-history thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .table-history, .table-history tbody, .table-history tr, .table-history td { display: block; width: 100%; }
    .table-history tr { padding: 20px; border-bottom: 1px solid var(--grau-150); }
    .table-history tr:last-child { border-bottom: 0; }
    .table-history td { padding: 6px 0; border: 0; }
    .table-history td::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--grau-500);
        margin-bottom: 2px;
    }
    .table-responsive:has(.table-history) { overflow: visible; }
}
.section--dunkel .form-line.was-validated .form-control:valid { border-bottom-color: var(--grau-300); }

/* Foto von Flo */
.portrait { background: var(--grau-100); }
.portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hero-portrait { max-width: 460px; margin-left: auto; }
@media (max-width: 991.98px) { .hero-portrait { margin-left: 0; } }
.profil-portrait { width: 200px; flex: 0 0 auto; }
@media (max-width: 575.98px) { .profil-portrait { width: 140px; } }
html.motion .portrait[data-reveal] { transform: none; transition-duration: 1.2s; }

/* Signet im Kopf: FL mit Bernstein-Strich, daneben der Name */
.navbar-brand.brand { gap: 12px; }
.brand-mark { width: 30px; height: auto; flex: 0 0 auto; color: var(--nacht-850); }
@media (max-width: 575.98px) { .brand-mark { width: 26px; } }

/* Leistungen: Tafel mit Nummer und Linien-Symbol (vorläufig statt Foto) */
.service-plate {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--grau-50);
    border-top: 2px solid var(--bernstein-400);
    overflow: hidden;
}
.service-nr {
    position: absolute;
    left: 32px;
    top: 20px;
    font-size: clamp(96px, 11vw, 168px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.05em;
    color: var(--nacht-850);
}
.service-glyph {
    position: absolute;
    right: 32px;
    bottom: 32px;
    width: clamp(88px, 10vw, 140px);
    height: auto;
    color: var(--bernstein-700);
    stroke-width: .45;
}
@media (max-width: 991.98px) {
    .service-plate { aspect-ratio: 16 / 7; }
    .service-nr { font-size: 88px; left: 20px; top: 14px; }
    .service-glyph { width: 72px; right: 20px; bottom: 20px; }
}

/* Startseite: großes Bild unter dem Einstieg (16:7, am Handy 3:2) */
.hero-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    object-position: 50% 60%;
    background: var(--grau-50);
}
@media (max-width: 767.98px) {
    .hero-image { aspect-ratio: 3 / 2; }
}

/* Bild im Kontakt-Abschluss (Über mich): links Bild, rechts Text */
.band-media { margin: 0; }
.band-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }