/* ==========================================================================
   KI BIENE — Design System
   Konzept: "Der Bau" — warme Papiertöne, Honig-Gold, präzise Geometrie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften
   =========

   1) Ubuntu Sans Mono — Hausschrift aus dem Logo. Wird gezielt für
      Auszeichnungen eingesetzt (Logo-Schriftzug, Eyebrow-Labels,
      Breadcrumb, Laufband, Footer-Rubriken), nicht für Fließtext.

      Ausschließlich lokal ausgeliefert: keine Google Fonts, kein CDN.
      Beim Seitenaufruf wird also keine IP-Adresse an Dritte übertragen
      (DSGVO). Variable Fonts, Achse wght 400–700, als WOFF2 auf
      Latin/Latin-Extended reduziert (je ~30 KB statt ~180 KB).
      Lizenz: Ubuntu Font Licence 1.0, siehe fonts/LICENCE.txt

   2) Fließtext und Überschriften nutzen die System-Schrift des jeweiligen
      Geräts (--font-body). Das lädt nichts nach, rendert auf jeder
      Plattform nativ scharf und sieht überall vertraut aus:
      San Francisco auf macOS/iOS, Segoe UI auf Windows, Roboto auf
      Android, Noto/Liberation auf Linux, Arial als letzte Reserve.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Ubuntu Sans Mono';
    src: url('../../fonts/UbuntuSansMono.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Sans Mono';
    src: url('../../fonts/UbuntuSansMono-Italic.woff2') format('woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}

:root {
    --paper: #FBF8EF;
    --paper-2: #F4EEDD;
    --surface: #FFFFFF;
    --ink: #24200F;
    --ink-soft: #6A6350;
    --gold: #E6B800;
    --gold-deep: #C9A000;
    --gold-bright: #FFD700;
    --honey: #FCEEA7;
    --line: rgba(36, 32, 15, 0.12);
    --line-soft: rgba(36, 32, 15, 0.07);
    --dark: #191505;
    --dark-2: #221D0A;
    --dark-line: rgba(251, 248, 239, 0.14);
    /* System-Schrift: macOS/iOS → San Francisco, Windows → Segoe UI,
       Android → Roboto, Linux → Noto/Liberation, sonst Arial. */
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    /* Auszeichnungsschrift (lokal eingebettet, s. o.) */
    --font-mono: 'Ubuntu Sans Mono', ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow-1: 0 2px 6px rgba(36, 32, 15, 0.05), 0 16px 40px rgba(36, 32, 15, 0.07);
    --shadow-2: 0 4px 10px rgba(36, 32, 15, 0.07), 0 28px 60px rgba(36, 32, 15, 0.12);
    --wrap: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Notbremse für lange deutsche Komposita ("Investitionsentscheidungen",
       "Digitalisierungsfahrplan"). Greift ausschließlich dann, wenn ein Wort
       sonst über seinen Container hinausliefe; am Satzbild ändert sich sonst
       nichts. Ohne die Regel schnitt das overflow: hidden der Karten solche
       Wörter auf schmalen Geräten stumm ab. */
    overflow-wrap: break-word;
}

img, svg, canvas { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--honey); color: var(--ink); }

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p { margin: 0 0 1.1em; }

/* --------------------------------------------------------------------------
   Language switching: html[lang] controls which [data-l] nodes render
   -------------------------------------------------------------------------- */
html[lang="de"] [data-l="en"] { display: none !important; }
html[lang="en"] [data-l="de"] { display: none !important; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
    width: min(var(--wrap), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.section {
    padding: clamp(4.5rem, 10vw, 8rem) 0;
    position: relative;
}

.section--tight { padding: clamp(3rem, 7vw, 5rem) 0; }

.section + .section--flush { padding-top: 0; }

/* Überall minmax(0, 1fr) statt 1fr.
   1fr bedeutet minmax(auto, 1fr), und dieses "auto" ist die min-content-Breite
   des Inhalts: eine Spalte kann dadurch breiter werden als ihr Container und
   die Seite horizontal aufreißen. Die 0 als Minimum verhindert das, ohne die
   Aufteilung zu ändern. Der Footer nutzt die Schreibweise bereits. */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

@media (max-width: 980px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Typography components
   -------------------------------------------------------------------------- */
/* max-width und der nicht schrumpfende Strich gehören zum Blowout-Fix:
   Ein einzeiliger Flex-Container meldet als min-content seine
   max-content-Breite. Lange Eyebrows wie "Was wir mit der PISO-Analyse
   erreichen" blähten damit die Rasterspalte über den Viewport hinaus
   (auf 320 px scrollte die Seite um 23 px horizontal). Zusammen mit den
   minmax(0, 1fr)-Spuren weiter oben ist die Spalte jetzt begrenzt, der
   Text bricht innerhalb des Eyebrows um.
   Kein flex-wrap am Container: sonst rutscht der Deko-Strich auf eine
   eigene Zeile. flex: none hält ihn auf seinen 26 px. */
.eyebrow {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 1.4rem;
}

.eyebrow::before {
    content: '';
    flex: none;
    width: 26px;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
}

.display {
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* Sehr schmale Geräte (iPhone SE 1. Generation, Falt-Displays im
   geschlossenen Zustand). Die längste hervorgehobene Wortgruppe,
   "dein Unternehmen" auf der Kontaktseite, misst bei 2.4rem 311 px und
   ragte damit über den 280 px breiten Satzspiegel hinaus. Umbrechen darf
   sie nicht: .mark-honey trägt white-space: nowrap, weil die
   Hervorhebung sonst als ein Balken über beide Zeilen gezogen würde. */
@media (max-width: 360px) {
    .display { font-size: 2.15rem; }
}

.h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.7rem);
}

.h3 {
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    letter-spacing: -0.01em;
}

.lead {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 46em;
}

.muted { color: var(--ink-soft); }

.mark-honey {
    position: relative;
    white-space: nowrap;
}

.mark-honey::after {
    content: '';
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    bottom: 0.06em;
    height: 0.34em;
    background: var(--honey);
    border-radius: 0.2em;
    z-index: -1;
}

.section-head {
    max-width: 52em;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
    background: rgba(251, 248, 239, 0.82);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom-color: var(--line-soft);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 76px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
}

.brand__logo {
    width: 42px;
    height: 42px;
    flex: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.06); }

/* Schriftzug nach Logo-Vorlage: Ubuntu Sans Mono, kleiner Punkt, schmales Spatium */
.brand__name {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.brand__gap { font-size: 0.32em; }
.brand__dot { font-size: 0.32em; font-weight: 600; }

.nav {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1.4vw, 1.1rem);
}

.nav__link {
    position: relative;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    transition: color 0.2s ease;
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown (Leistungen) */
/* display: flex ist hier nicht Dekoration, sondern der Baseline-Ausgleich.
   Die Geschwister von .nav__item sind selbst Flex-Items von .nav und damit
   blockifiziert; der <a> in .nav__item bliebe dagegen inline. Seine Box-Höhe
   käme dann vom Strut des div (1rem), die der Geschwister von ihrer eigenen
   Schriftgröße (0.95rem). Bei align-items: center ergibt das eine um rund
   1 px tiefere Baseline: "Leistungen" saß sichtbar tiefer als die anderen
   Menüpunkte. Als Flex-Container wird der <a> blockifiziert und bekommt
   dieselbe Box wie seine Geschwister.
   Das Dropdown ist position: absolute und damit kein Flex-Item; auf Mobil,
   wo es static wird, schaltet die Media-Query unten auf display: block
   zurück. */
.nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    min-width: 300px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.nav__dropdown a {
    display: block;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.nav__dropdown a:hover { background: var(--paper-2); }

.nav__dropdown a span.sub {
    display: block;
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--ink-soft);
    margin-top: 0.1rem;
}

/* Language switch */
.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.lang-switch button {
    appearance: none;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--ink-soft);
    padding: 0.42rem 0.75rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lang-switch button.is-active {
    background: var(--ink);
    color: var(--gold-bright);
}

/* Burger + mobile nav */
.burger {
    display: none;
    appearance: none;
    background: transparent;
    border: 0;
    width: 44px;
    height: 44px;
    cursor: pointer;
    position: relative;
    z-index: 130;
}

.burger span {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }

body.nav-open .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
    .burger { display: block; }

    /* WICHTIG: Solange das Menü offen ist, muss der backdrop-filter des Headers
       abgeschaltet werden. Ein Element mit backdrop-filter (ebenso filter oder
       transform) wird zum Bezugsrahmen für position:fixed-Kinder — das Menü
       wäre sonst auf die 76 px hohe Kopfzeile eingesperrt, sobald die Seite
       gescrollt ist und .is-scrolled greift. */
    body.nav-open .site-header {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: transparent;
        border-bottom-color: transparent;
    }

    .nav {
        position: fixed;
        inset: 0;
        z-index: 120;
        /* Grid statt Flex: Der Spaltentrack ist genau so breit wie der
           längste Menüpunkt. justify-content zentriert diesen Block im
           Bildschirm (besser mit dem Daumen erreichbar), justify-items hält
           die Einträge darin linksbündig auf einer gemeinsamen Kante.
           Die Breite ergibt sich automatisch aus den Texten. */
        display: grid;
        grid-auto-flow: row;
        justify-content: center;
        justify-items: start;
        align-content: center;
        /* Läuft der Inhalt über (kleines Display, Querformat), oben beginnen
           statt oben abzuschneiden; Browser ohne "safe" behalten "center". */
        align-content: safe center;
        gap: 0.4rem;
        background: var(--paper);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 5rem 1.5rem 2rem;
    }

    body.nav-open .nav {
        opacity: 1;
        visibility: visible;
    }

    body.nav-open { overflow: hidden; }

    /* Kein horizontales Padding, damit der Text exakt an der Padding-Kante
       des Overlays beginnt; die Aktiv-Unterstreichung folgt der Textbreite. */
    /* inline-block statt inline: An einem inline-Element reserviert
       vertikales Padding keinen Platz, es läuft über den Nachbarn. Der
       Link "Leistungen" ragte dadurch 5 px in seinen ersten Untermenü-
       punkt hinein, und ein Tipp auf dessen Oberkante landete auf
       "Leistungen" statt auf "PISO-Prozessanalyse".
       Die Breite bleibt bei inline-block die Textbreite, die aktive
       Unterstreichung folgt also weiterhin dem Text. */
    .nav__link { display: inline-block; font-size: 1.4rem; padding: 0.7rem 0; }
    .nav__link::after { left: 0; right: 0; }

    /* Im Overlay steht das Untermenü im Fluss (position: static, siehe unten)
       und muss unter dem Hauptpunkt liegen, nicht daneben. Der Baseline-
       Ausgleich per Flex wird hier deshalb zurückgenommen. */
    .nav__item { display: block; }

    /* Die Hover-/Focus-Regeln oben sind spezifischer als eine einfache
       .nav__dropdown-Regel. Ohne die beiden zusätzlichen Selektoren würde das
       Untermenü auf Touch-Geräten beim Antippen um 50 % nach links rutschen
       (iOS/Android lösen :hover bzw. :focus-within beim Tippen aus). */
    .nav__dropdown,
    .nav__item:hover .nav__dropdown,
    .nav__item:focus-within .nav__dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        text-align: left;
        padding: 0;
        min-width: 0;
    }

    /* Untermenü bündig mit den Hauptpunkten; die Hierarchie zeigt sich über
       Schriftgröße und Farbe, nicht über Einzug. */
    .nav__dropdown a { font-size: 1rem; color: var(--ink-soft); padding: 0.55rem 0; }
    .nav__dropdown a span.sub { display: none; }

    .nav .lang-switch { margin-top: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--gold-bright);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    will-change: transform;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 215, 0, 0.25) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.6s ease;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.btn:hover::before { transform: translateX(110%); }

.btn--gold {
    --btn-bg: var(--gold);
    --btn-fg: var(--ink);
}

.btn--sm {
    padding: 0.55rem 1.15rem;
    font-size: 0.9rem;
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--line);
}

.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

.btn__arrow { transition: transform 0.25s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

.band-dark .btn--ghost {
    --btn-fg: var(--paper);
    box-shadow: inset 0 0 0 1.5px var(--dark-line);
}

.band-dark .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--paper); }

/* --------------------------------------------------------------------------
   Hero (Startseite)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;   /* Reserve fuer Browser ohne svh (iOS < 15.4) */
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    overflow: hidden;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__canvas canvas { width: 100%; height: 100%; }

.hero::after {
    /* soft vignette so text always stays readable over the 3D scene */
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(90rem 40rem at 18% 30%, rgba(251, 248, 239, 0.92) 0%, rgba(251, 248, 239, 0.55) 45%, rgba(251, 248, 239, 0) 75%),
        linear-gradient(to bottom, rgba(251, 248, 239, 0.35), rgba(251, 248, 239, 0) 30%, rgba(251, 248, 239, 0.9) 96%);
    pointer-events: none;
}

.hero .wrap { position: relative; z-index: 2; }

.hero__content { max-width: 46rem; }

/* Maske für die GSAP-Einblendung: der innere <span> startet unterhalb und
   fährt hoch, overflow blendet ihn davor aus.

   Fallstrick: line-height der .display ist 1.05, die Content-Area jeder
   System-Schrift ist größer (San Francisco 1.18em, Roboto 1.17em,
   Segoe UI und Noto Sans rund 1.33em). Ohne Ausgleich schneidet
   overflow: hidden Unterlängen (g, y, ß, Komma) und Umlautpunkte ab.

   Deshalb vergrößert das Padding nur den Clip-Bereich; die negativen
   Margins nehmen den Platz im Layout wieder heraus, sodass der
   Zeilenabstand exakt bei 1.05em bleibt:
     Box    = 1.05 + 2 × 0.2 = 1.45em
     Vorschub = 1.45 - 0.4   = 1.05em                                     */
.hero__title .line {
    display: block;
    overflow: hidden;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-top: -0.4em;
}

/* Erste Zeile: nur das eigene Padding ausgleichen, nicht den Zeilenabstand. */
.hero__title .line:first-child { margin-top: -0.2em; }

/* Letzte Zeile: unteres Padding ausgleichen, damit der Abstand zum
   Lead-Absatz unverändert bleibt. */
.hero__title .line:last-child { margin-bottom: -0.2em; }

.hero__title .line > span {
    display: block;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2.2rem;
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem 2.5rem;
    margin-top: clamp(2.5rem, 6vh, 4.5rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-soft);
}

.hero__meta div strong {
    display: block;
    font-size: 1.35rem;
    letter-spacing: -0.02em;
}

.hero__meta div span {
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.scroll-hint {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
}

.scroll-hint::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 4px;
    height: 8px;
    background: var(--gold-deep);
    border-radius: 4px;
    animation: scrollDot 1.8s ease-in-out infinite;
}

@keyframes scrollDot {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    70%  { transform: translate(-50%, 14px); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Sub-page hero
   -------------------------------------------------------------------------- */
.hero-sub {
    position: relative;
    padding: calc(76px + clamp(3.5rem, 9vw, 7rem)) 0 clamp(3rem, 7vw, 5.5rem);
    background:
        radial-gradient(60rem 30rem at 85% -10%, rgba(252, 238, 167, 0.55), transparent 60%),
        var(--paper);
    overflow: hidden;
}

.hero-sub__hex {
    position: absolute;
    right: -140px;
    top: -80px;
    width: 560px;
    opacity: 0.5;
    pointer-events: none;
}

.hero-sub .wrap { position: relative; }

.hero-sub h1 { max-width: 18em; }

.breadcrumb {
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.breadcrumb a { color: var(--gold-deep); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 2.5vw, 2.2rem);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-2);
    border-color: transparent;
}

.card::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-bright), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover::after { transform: scaleX(1); }

.card--link { display: block; text-decoration: none; }

.card__num {
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--gold-deep);
    margin-bottom: 1rem;
    display: block;
}

.card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--honey), rgba(252, 238, 167, 0.35));
    display: grid;
    place-items: center;
    margin-bottom: 1.2rem;
    color: var(--gold-deep);
}

.card__icon svg { width: 26px; height: 26px; }

.card h3 { margin-bottom: 0.5rem; }

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

.card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--gold-deep);
}

.card--link:hover .card__more { text-decoration: underline; }

/* Feature / pain-point list card variant */
.card--flat {
    background: transparent;
    border: 1px solid var(--line);
}

.card--flat:hover { box-shadow: none; transform: none; border-color: var(--gold); }
.card--flat::after { display: none; }

/* --------------------------------------------------------------------------
   PISO letters strip
   -------------------------------------------------------------------------- */
.piso-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    counter-reset: piso;
}

.piso-tile {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: clamp(1.4rem, 2.2vw, 2rem);
    overflow: hidden;
}

.piso-tile__letter {
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--gold);
    margin-bottom: 0.8rem;
}

.piso-tile__hex {
    position: absolute;
    right: -26px;
    top: -26px;
    width: 90px;
    opacity: 0.14;
}

.piso-tile h3 { font-size: 1.1rem; }
.piso-tile p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 980px) { .piso-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .piso-strip { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   Steps (process)
   -------------------------------------------------------------------------- */
.steps {
    position: relative;
    display: grid;
    gap: clamp(1.5rem, 3vw, 2rem);
}

.step {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.4rem);
    align-items: start;
    padding: clamp(1.4rem, 2.4vw, 2rem);
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
}

.step__badge {
    width: 74px;
    height: 82px;
    flex: none;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--ink);
    background: linear-gradient(160deg, var(--gold-bright), var(--gold));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.step h3 { margin-bottom: 0.4rem; }
.step ul { margin: 0.4rem 0 0; }

@media (max-width: 640px) {
    .step { grid-template-columns: minmax(0, 1fr); }
    .step__badge { width: 58px; height: 64px; font-size: 1.2rem; }
}

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */
ul.list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2em;
}

ul.list li {
    position: relative;
    padding-left: 1.9rem;
    margin-bottom: 0.7rem;
}

ul.list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 13px;
    height: 15px;
    background: var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

ul.list--check li::before {
    background: transparent;
    clip-path: none;
    width: 16px;
    height: 16px;
    top: 0.3em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 8px var(--honey);
}

ul.list--check li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: calc(0.3em + 4px);
    width: 8px;
    height: 5px;
    border-left: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Dark band sections
   -------------------------------------------------------------------------- */
.band-dark {
    background:
        radial-gradient(70rem 35rem at 80% 0%, rgba(230, 184, 0, 0.12), transparent 55%),
        var(--dark);
    color: var(--paper);
}

.band-dark .eyebrow { color: var(--gold-bright); }
.band-dark .muted, .band-dark .lead { color: rgba(251, 248, 239, 0.68); }
.band-dark .card {
    background: rgba(251, 248, 239, 0.045);
    border-color: var(--dark-line);
}
.band-dark .card:hover { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45); }
.band-dark .card p { color: rgba(251, 248, 239, 0.72); }

.band-dark .step {
    background: rgba(251, 248, 239, 0.045);
    border-color: var(--dark-line);
}

.band-dark .situation {
    background: rgba(251, 248, 239, 0.045);
    border-color: var(--dark-line);
}

.band-dark .situation .rec { color: rgba(251, 248, 239, 0.68); }
.band-dark ::selection { background: var(--gold); color: var(--dark); }

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */
.marquee {
    overflow: hidden;
    border-block: 1px solid var(--line-soft);
    padding: 1.1rem 0;
    background: var(--paper-2);
}

.marquee__track {
    display: flex;
    gap: 3rem;
    width: max-content;
    will-change: transform;
    animation: marquee 36s linear infinite;
}

.marquee span {
    font-family: var(--font-mono);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    white-space: nowrap;
}

/* Trenner als CSS-Wabe statt Unicode-Zeichen: das Sechseck U+2B21 fehlt in
   vielen System-Schriften und würde je nach Gerät anders aussehen. */
.marquee span::after {
    content: '';
    width: 9px;
    height: 10px;
    flex: none;
    background: var(--gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Quote / philosophy
   -------------------------------------------------------------------------- */
.bee-quote {
    max-width: 56rem;
    margin-inline: auto;
    text-align: center;
}

.bee-quote blockquote {
    margin: 0;
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.bee-quote blockquote .mark-honey { white-space: normal; }

/* --------------------------------------------------------------------------
   Facts box
   -------------------------------------------------------------------------- */
.facts {
    display: grid;
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
}

.facts > div {
    background: var(--surface);
    padding: 1.3rem 1.5rem;
}

.facts strong {
    display: block;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.facts span { color: var(--ink-soft); font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.cta-final {
    text-align: center;
}

.cta-final .h2 { max-width: 20em; margin-inline: auto; }

.cta-final .lead { margin-inline: auto; }

.cta-final__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.cta-final__alt {
    margin-top: 1.6rem;
    font-size: 0.95rem;
    color: rgba(251, 248, 239, 0.68);
}

.cta-final__alt a { color: var(--gold-bright); text-decoration: none; }
.cta-final__alt a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Situation chooser (Leistungen)
   -------------------------------------------------------------------------- */
.situation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem 2rem;
    align-items: center;
    padding: 1.5rem clamp(1.2rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: 1rem;
    transition: border-color 0.25s ease, transform 0.25s ease;
}

.situation:hover { border-color: var(--gold); transform: translateX(4px); }

.situation q {
    font-weight: 600;
    font-size: 1.08rem;
    quotes: "\201E" "\201C";
}

html[lang="en"] .situation q { quotes: "\201C" "\201D"; }

.situation .rec {
    font-size: 0.9rem;
    color: var(--ink-soft);
    margin-top: 0.25rem;
    display: block;
}

@media (max-width: 700px) {
    .situation { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.form-shell {
    max-width: 860px;
    margin-inline: auto;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: clamp(1.6rem, 4vw, 3rem);
    box-shadow: var(--shadow-1);
}

/* Forms */
.form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem 1.4rem;
}

.form .full { grid-column: 1 / -1; }

.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.field label .opt {
    font-weight: 400;
    color: var(--ink-soft);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(230, 184, 0, 0.15);
}

.field textarea { resize: vertical; min-height: 140px; }

.field--error input,
.field--error select,
.field--error textarea { border-color: #C0392B; }

.field .err {
    display: none;
    font-size: 0.8rem;
    color: #C0392B;
    margin-top: 0.3rem;
}

.field--error .err { display: block; }

.check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.check input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--gold-deep);
    flex: none;
}

.check a { color: var(--gold-deep); }

/* Honeypot: visually removed from screen, still present for bots.
   Deliberately NOT display:none — many bots skip hidden fields. */
.form__website {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.form-status {
    grid-column: 1 / -1;
    display: none;
    padding: 1rem 1.2rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.form-status.is-ok { display: block; background: #EAF7E9; color: #1E6B33; border: 1px solid #BFE5C0; }
.form-status.is-err { display: block; background: #FBECEA; color: #A93226; border: 1px solid #F0C6C0; }

@media (max-width: 640px) {
    .form { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */
.prose { max-width: 46em; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.8em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--gold-deep); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--dark);
    color: rgba(251, 248, 239, 0.75);
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(50rem 25rem at 10% 110%, rgba(230, 184, 0, 0.1), transparent 60%);
    pointer-events: none;
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
    gap: clamp(2rem, 5vw, 4rem);
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--dark-line);
}

.site-footer .brand { color: var(--paper); margin-bottom: 1rem; }

.site-footer h4 {
    color: var(--paper);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    font-style: italic;
    font-weight: 600;
    margin-bottom: 1.1rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li { margin-bottom: 0.55rem; }

.site-footer a {
    color: rgba(251, 248, 239, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover { color: var(--gold-bright); }

.footer-bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    padding-top: 1.8rem;
    font-size: 0.85rem;
    color: rgba(251, 248, 239, 0.45);
}

/* flex-wrap ist Pflicht, nicht Kür: seit dem dritten Eintrag
   ("Datenschutzeinstellungen") ist die Zeile auf schmalen Geräten breiter als
   der Viewport. Ohne Umbruch schob sie den Footer über den rechten Rand
   hinaus, wo ihn dessen overflow: hidden stumm abschnitt. */
.footer-bottom nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 1.4rem;
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Touch-Ziele
   Auf Touch-Geräten mindestens 44 px hoch (Apple HIG; WCAG 2.2 verlangt 24 px).
   Textlinks im Footer und der Sprachschalter lagen darunter.
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .site-footer li { margin-bottom: 0; }

    .site-footer li a,
    .footer-bottom nav a {
        display: inline-block;
        padding-block: 0.7rem;
    }

    .lang-switch button {
        min-height: 44px;
        padding-inline: 1.15rem;
    }

    .breadcrumb a {
        display: inline-block;
        padding-block: 0.25rem;
    }
}

/* --------------------------------------------------------------------------
   Reveal animations (GSAP sets final state; CSS provides no-JS fallback)
   -------------------------------------------------------------------------- */
.reveal, .reveal-group > * { opacity: 1; }

html.js .reveal,
html.js .reveal-group > * {
    opacity: 0;
    transform: translateY(28px);
}

html.js.gsap-ready .reveal,
html.js.gsap-ready .reveal-group > * {
    /* GSAP takes over; ensure no CSS transition conflicts */
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal, html.js .reveal-group > * { opacity: 1 !important; transform: none !important; }
    .marquee__track { animation: none; }
    .scroll-hint { display: none; }
    html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Page transition veil
   -------------------------------------------------------------------------- */
.veil {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--paper);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

body.is-leaving .veil { opacity: 1; pointer-events: all; }

/* --------------------------------------------------------------------------
   Kontaktseite: sekundärer Hinweis auf die digitale Visitenkarte
   -------------------------------------------------------------------------- */
.karten-hinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    max-width: 860px;
    margin: 1.6rem auto 0;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.95rem;
}