/* ==========================================================================
   Sabz-Online.de – Stylesheet
   --------------------------------------------------------------------------
   Aufbau:
     01  Design-Tokens
     02  Reset & Grundlagen
     03  Layout-Hilfen
     04  Buttons
     05  Kopfbereich & Navigation
     06  Hero (inkl. Hund)
     07  Abschnitte & Karten
     07c Links / Projekte
     08  Status
     09  Kontakt & Formular
     10  Fußbereich
     11  Datenschutzhinweis
     12  Scroll-Animationen
     13  Responsive
     14  prefers-reduced-motion
     14b Fehlerseite (404)
   Es werden keine externen Schriften oder Ressourcen geladen.
   ========================================================================== */

/* 01 — Design-Tokens ====================================================== */

:root {
    --c-bg:          #04070f;
    --c-bg-soft:     #070d1d;
    --c-surface:     rgba(18, 30, 60, 0.45);
    --c-surface-2:   rgba(12, 22, 46, 0.65);
    --c-line:        rgba(142, 174, 255, 0.14);
    --c-line-strong: rgba(142, 174, 255, 0.28);

    --c-text:        #e8eefc;
    --c-text-soft:   #b6c4e0;
    --c-text-muted:  #8b9cbe;

    --c-accent:      #6ea6ff;
    --c-accent-2:    #63dcf0;
    --c-accent-deep: #2a4fb8;

    --c-online:      #4ade80;
    --c-work:        #fbbf24;
    --c-design:      #60a5fa;

    --shadow-soft:   0 24px 60px -24px rgba(0, 0, 0, 0.9);
    --shadow-card:   0 20px 50px -30px rgba(0, 0, 0, 0.95);

    --radius-sm:     10px;
    --radius:        18px;
    --radius-lg:     26px;

    --shell:         1180px;
    --gutter:        clamp(1.25rem, 4vw, 2.5rem);
    --header-h:      78px;

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Werden per JavaScript für den sehr dezenten Hintergrund-Parallax gesetzt. */
    --mx: 0;
    --my: 0;
}

/* 02 — Reset & Grundlagen ================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    /* Verhindert, dass iOS im Querformat die Schrift eigenmaechtig vergroessert. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
    line-height: 1.65;
    color: var(--c-text);
    background-color: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Kein grauer Blitz beim Antippen unter iOS und Android. */
    -webkit-tap-highlight-color: transparent;
    /* Kein Ueberscrollen der Seite hinter dem Inhalt (Android/Chrome). */
    overscroll-behavior-y: none;
}

/* Entfernt die kuenstliche Verzoegerung beim Antippen. */
a, button, input, textarea, select, label, summary {
    touch-action: manipulation;
}

body.nav-open { overflow: hidden; }

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

p { margin: 0; text-wrap: pretty; }

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

a {
    color: var(--c-accent);
    text-decoration-color: rgba(110, 166, 255, 0.4);
    text-underline-offset: 0.22em;
    transition: color 0.25s var(--ease), text-decoration-color 0.25s var(--ease);
}

a:hover { color: var(--c-accent-2); text-decoration-color: currentColor; }

/* Sichtbarer Fokus – nie entfernen, nur gestalten. */
:focus-visible {
    outline: 2px solid var(--c-accent-2);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: rgba(110, 166, 255, 0.3); color: #fff; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--c-accent);
    color: #041022;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s var(--ease);
}

.skip-link:focus { top: 1rem; color: #041022; }

/* 03 — Layout-Hilfen ====================================================== */

.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
    /* Im Querformat auf Geraeten mit Kameraaussparung zusaetzlich einruecken.
       Browser ohne env()-Unterstuetzung verwerfen diese Zeilen und behalten
       den Wert darueber. */
    padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

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

.section__head {
    max-width: 46rem;
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

.section__eyebrow {
    display: inline-block;
    margin-bottom: 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/*
   Verlaufstext (background-clip: text): Der Farbverlauf wird an den
   Buchstabenformen beschnitten, gemalt wird er aber nur innerhalb des
   Elementkastens. Ist der wegen enger Zeilenhoehe kleiner als die Schrift,
   fehlt unter den Unterlaengen (g, p, j, y) die Farbe - der Buchstabe wirkt
   abgeschnitten. Deshalb hier mehr Zeilenhoehe und etwas Innenabstand.
*/
.hero__title,
.section__title,
.legal__title {
    line-height: 1.18;
    padding-bottom: 0.14em;
}

.section__title {
    font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
    background: linear-gradient(180deg, #ffffff 20%, #b9cbf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section__title--small { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); }

.section__lead {
    margin-top: 0.95rem;
    font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
    color: var(--c-text-soft);
}

/* 04 — Buttons ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
                background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn svg { width: 1.1em; height: 1.1em; }

.btn--primary {
    color: #04101f;
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    box-shadow: 0 14px 34px -14px rgba(110, 166, 255, 0.75);
}

.btn--primary:hover {
    color: #04101f;
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -14px rgba(110, 166, 255, 0.9);
}

.btn--ghost {
    color: var(--c-text-soft);
    background: transparent;
    border-color: var(--c-line-strong);
}

.btn--ghost:hover {
    color: var(--c-text);
    background: rgba(110, 166, 255, 0.1);
    border-color: var(--c-accent);
}

.btn--small { padding: 0.65rem 1.15rem; font-size: 0.9rem; }

/* 05 — Kopfbereich & Navigation =========================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
}

/*
   Der Glass-Effekt liegt bewusst auf einem Pseudo-Element und nicht auf
   .site-header selbst: backdrop-filter erzeugt sonst einen Containing-Block,
   an dem das mobile Menue (position: fixed) haengen bleiben wuerde.
*/
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 10, 24, 0.72);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 12px 40px -30px rgba(0, 0, 0, 1);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}

.site-header.is-scrolled::before { opacity: 1; }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--header-h);
    transition: height 0.35s var(--ease);
}

.site-header.is-scrolled .site-header__inner { height: 62px; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--c-text);
    font-weight: 600;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand:hover { color: var(--c-text); }

/* Bildmarke: das freigestellte SO-Monogramm aus dem Logo. */
.brand__picture {
    display: flex;
    flex: none;
}

.brand__mark {
    flex: none;
    width: auto;
    height: 40px;
    /* Hebt die Marke minimal vom dunklen Untergrund ab. */
    filter: drop-shadow(0 4px 12px rgba(60, 120, 230, 0.35));
    transition: filter 0.3s var(--ease);
}

.brand:hover .brand__mark {
    filter: drop-shadow(0 4px 16px rgba(99, 220, 240, 0.55));
}

.brand__mark--small { height: 34px; }

.site-header.is-scrolled .brand__mark { height: 34px; }

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

/*
   Kopf- und Fussnavigation teilen sich bewusst EINE Formatierung: gleiche
   Schriftgroesse, gleiche Farbe, gleiches Verhalten. Aenderungen hier wirken
   automatisch auf beide Menues, sie koennen also nicht auseinanderlaufen.
   Der negative Aussenabstand der Liste gleicht den Innenabstand des letzten
   Links aus, damit dessen Text buendig mit dem Seitenrand abschliesst.
*/
.nav__list,
.site-footer__nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.6rem;
    margin: 0 -0.75rem;
    padding: 0;
    list-style: none;
}

/*
   Innenabstand statt reiner Schriftgroesse: Sonst waere das Tippziel nur so
   hoch wie die Textzeile (18px) - deutlich unter den 44px, die Apple und
   Google als Mindestgroesse empfehlen.
*/
.nav__link,
.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--c-text-soft);
    font-size: 0.94rem;
    text-decoration: none;
    transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible,
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
    color: var(--c-accent);
    background: rgba(110, 166, 255, 0.08);
}

.nav-toggle {
    display: none;
    position: relative;
    /* Muss ueber dem geoeffneten Menuepanel liegen, sonst laesst sich das
       Menue nicht mehr ueber dasselbe Symbol schliessen. */
    z-index: 101;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--c-line-strong);
    border-radius: 12px;
    background: rgba(10, 18, 38, 0.6);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: var(--c-text);
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 98;
    background: rgba(2, 5, 12, 0.6);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.nav-backdrop.is-visible { opacity: 1; }

/* 06 — Hero =============================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    isolation: isolate;
    overflow: hidden;
}

/*
   Ab einer brauchbaren Fensterhoehe bekommt der Hero eine feste Hoehe.
   Erst dadurch ist die mittlere Rasterzeile definit und der Hund passt sich
   an den verfuegbaren Platz an, statt den Abschnitt nach unten zu schieben.
   Bei sehr flachen Fenstern bleibt die Hoehe automatisch – dort darf der
   Bereich lieber mitwachsen als Inhalt abzuschneiden.
*/
@media (min-height: 560px) {
    .hero { height: 100vh; height: 100svh; }
}

.hero__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    justify-items: center;
    gap: clamp(0.75rem, 2vh, 1.5rem);
    padding-top: calc(var(--header-h) + clamp(0.75rem, 3vh, 2rem));
    padding-bottom: clamp(1rem, 3vh, 2rem);
}

/* --- Hintergrund: ausschließlich CSS ------------------------------------ */

.hero__bg {
    position: absolute;
    inset: -10%;
    z-index: -1;
    background:
        radial-gradient(120% 90% at 50% 8%,  #12224d 0%, transparent 60%),
        radial-gradient(90% 70% at 50% 105%, #0a1230 0%, transparent 60%),
        linear-gradient(180deg, #050b1a 0%, #04070f 55%, #04070f 100%);
    will-change: transform;
}

.hero__aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}

.hero__aurora--one {
    width: 60vw; height: 60vw;
    max-width: 780px; max-height: 780px;
    left: 50%; top: 6%;
    transform: translate3d(calc(-50% + var(--mx) * 18px), calc(var(--my) * 14px), 0);
    background: radial-gradient(circle, rgba(58, 108, 230, 0.55) 0%, rgba(58, 108, 230, 0) 70%);
}

.hero__aurora--two {
    width: 46vw; height: 46vw;
    max-width: 620px; max-height: 620px;
    left: 6%; bottom: 4%;
    transform: translate3d(calc(var(--mx) * -22px), calc(var(--my) * -12px), 0);
    background: radial-gradient(circle, rgba(38, 190, 214, 0.28) 0%, rgba(38, 190, 214, 0) 70%);
}

.hero__aurora--three {
    width: 44vw; height: 44vw;
    max-width: 560px; max-height: 560px;
    right: 4%; top: 22%;
    transform: translate3d(calc(var(--mx) * 24px), calc(var(--my) * 18px), 0);
    background: radial-gradient(circle, rgba(96, 76, 220, 0.3) 0%, rgba(96, 76, 220, 0) 70%);
}

/* Feines Punktraster – ruhig, technisch, nach außen weich ausgeblendet. */
.hero__grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(146, 180, 255, 0.16) 1px, transparent 1.2px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
    mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, transparent 78%);
    opacity: 0.75;
    transform: translate3d(calc(var(--mx) * 10px), calc(var(--my) * 8px), 0);
}

/* Sehr dezente Lichtpunkte, einmal gezeichnet, langsam atmend. */
.hero__sparks {
    position: absolute;
    inset: 0;
    opacity: 0.55;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1.4px 1.4px at 26% 68%, rgba(160,205,255,.7), transparent 60%),
        radial-gradient(1.8px 1.8px at 41% 14%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1.3px 1.3px at 58% 80%, rgba(150,235,255,.65), transparent 60%),
        radial-gradient(1.7px 1.7px at 73% 30%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1.4px 1.4px at 86% 60%, rgba(170,200,255,.6), transparent 60%),
        radial-gradient(1.5px 1.5px at 66% 48%, rgba(255,255,255,.5), transparent 60%),
        radial-gradient(1.3px 1.3px at 8% 84%, rgba(190,215,255,.55), transparent 60%),
        radial-gradient(1.6px 1.6px at 94% 16%, rgba(255,255,255,.5), transparent 60%);
    animation: spark-breathe 11s ease-in-out infinite alternate;
}

@keyframes spark-breathe {
    from { opacity: 0.32; }
    to   { opacity: 0.7; }
}

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 50% 45%, transparent 45%, rgba(3, 6, 14, 0.75) 100%),
        linear-gradient(180deg, transparent 70%, var(--c-bg) 100%);
}

/* --- Hero-Text ---------------------------------------------------------- */

.hero__text { text-align: center; max-width: 44rem; }

.hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: clamp(0.75rem, 2vh, 1.25rem);
    padding: 0.5rem 1.1rem 0.5rem 0.85rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: rgba(12, 22, 46, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--c-text-soft);
}

.hero__badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent-2);
    box-shadow: 0 0 0 0 rgba(99, 220, 240, 0.6);
    animation: pulse-dot 2.8s var(--ease) infinite;
}

@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(99, 220, 240, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(99, 220, 240, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 220, 240, 0); }
}

.hero__title {
    font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    background: linear-gradient(180deg, #ffffff 25%, #a9c1ec 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Ab dieser Breite passt die Ueberschrift in eine Zeile. Der gewonnene
   Platz kommt dem Hund zugute, der das Hauptmotiv bleiben soll. */
@media (min-width: 1100px) {
    .hero__title-br { display: none; }

    /* Der Textblock darf dafuer breiter werden, sonst bricht die Zeile
       trotzdem um. Der Fliesstext bleibt schmal und damit gut lesbar. */
    .hero__text { max-width: 58rem; }
    .hero__lead { max-width: 36rem; margin-inline: auto; }
}

.hero__title-accent {
    background: linear-gradient(100deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lead {
    margin-top: clamp(0.6rem, 1.5vh, 1.1rem);
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
    color: var(--c-text-soft);
}

/* --- Der Hund ----------------------------------------------------------- */
/*
   WICHTIG für die spätere Kopf-/Blickverfolgung:
   Auf #hero-dog liegt bewusst KEINE transform und KEINE Animation.
   Die Schwebebewegung sitzt auf .hero-dog-float, das Leuchten auf einem
   eigenen Element dahinter. So kann JavaScript später frei über
   heroDog.style.transform arbeiten, ohne etwas zu überschreiben.
*/

.hero-dog-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.hero-dog-glow {
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(78vw, 620px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(96, 150, 255, 0.26) 0%,
        rgba(60, 110, 220, 0.12) 42%,
        rgba(5, 10, 24, 0) 70%);
    filter: blur(14px);
    pointer-events: none;
    animation: glow-breathe 9s ease-in-out infinite alternate;
}

@keyframes glow-breathe {
    from { opacity: 0.75; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.03); }
}

.hero-dog-float {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 0;
    animation: dog-float 7.5s ease-in-out infinite alternate;
}

@keyframes dog-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-4px); }
}

/* <picture> ist der Flex-Nachfahre; ohne eigene Hoehe haette das img
   darin keinen Bezugswert fuer height: 100%. */
.hero-dog-picture {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 0;
}

.hero-dog {
    width: auto;
    height: 100%;
    max-height: min(68vh, 660px);
    max-width: min(88vw, 480px);
    object-fit: contain;
    object-position: bottom center;
    /* Weicher Schatten direkt an der Silhouette – kein harter Kasten. */
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 46px rgba(94, 150, 255, 0.22));
}

/* Aufsetzschatten am Boden, damit der Hund nicht „schwebt“. */
.hero-dog-shadow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: min(46vw, 300px);
    height: 26px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 72%);
    filter: blur(6px);
    pointer-events: none;
}

/* --- Scroll-Hinweis ----------------------------------------------------- */

.hero__scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    color: var(--c-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero__scroll:hover { color: var(--c-text); }

.hero__scroll-arrow {
    width: 22px;
    height: 22px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    animation: scroll-hint 2.4s var(--ease) infinite;
}

@keyframes scroll-hint {
    0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
    50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* 07 — Abschnitte & Karten ================================================ */

.section--social { background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-soft) 100%); }

.section--social::before,
.section--links::before,
.section--contact::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-line-strong), transparent);
}

/* 07b — Social Media ====================================================== */

.social-grid {
    display: grid;
    /* Feste Spaltenzahlen statt auto-fit: sechs Kacheln sollen sich sauber
       aufteilen (1 / 2 / 3) und nicht als 4+2 auseinanderfallen. */
    grid-template-columns: 1fr;
    gap: clamp(0.8rem, 2vw, 1.15rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 30em) {
    .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
    .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.social {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-surface);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--c-text);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease),
                background-color 0.3s var(--ease);
}

/* Sehr dezenter Schimmer in der Markenfarbe, nur beim Zeigen. */
.social::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 140% at 0% 0%,
        color-mix(in srgb, var(--marke) 16%, transparent) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}

a.social:hover,
a.social:focus-visible {
    transform: translateY(-3px);
    border-color: var(--c-line-strong);
    border-color: color-mix(in srgb, var(--marke) 55%, transparent);
    background: var(--c-surface-2);
    color: var(--c-text);
}

a.social:hover::before,
a.social:focus-visible::before { opacity: 1; }

.social__logo {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--c-line-strong);
    border: 1px solid color-mix(in srgb, var(--marke) 30%, var(--c-line));
    border-radius: 13px;
    background: rgba(6, 12, 26, 0.6);
    background: color-mix(in srgb, var(--marke) 12%, rgba(6, 12, 26, 0.6));
    color: var(--marke);
    transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

a.social:hover .social__logo { transform: scale(1.06); }

.social__icon { width: 23px; height: 23px; }

.social__body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.social__name { font-weight: 600; font-size: 1.02rem; }

.social__handle {
    font-size: 0.87rem;
    color: var(--c-text-muted);
    overflow-wrap: anywhere;
}

.social__go {
    position: relative;
    margin-left: auto;
    flex: none;
    color: var(--c-text-muted);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), color 0.3s var(--ease);
}

.social__go svg { width: 18px; height: 18px; }

a.social:hover .social__go,
a.social:focus-visible .social__go {
    opacity: 1;
    transform: none;
    color: var(--marke);
}

/* Noch nicht verknuepft: sichtbar, aber ohne Klickversprechen. */
.social--leer { cursor: default; }
.social--leer .social__logo { opacity: 0.55; }
.social--leer .social__name { color: var(--c-text-soft); }

.social-hinweis {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius);
    background: rgba(251, 191, 36, 0.07);
    font-size: 0.9rem;
    color: var(--c-text-soft);
}

.social-hinweis strong { color: #fcd34d; }

.social-hinweis code {
    padding: 0.12em 0.45em;
    border-radius: 5px;
    background: rgba(110, 166, 255, 0.12);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
    color: var(--c-text);
}

/* --- Dieselben Kanaele kompakt im Fussbereich --------------------------- */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-social__link {
    display: grid;
    place-items: center;
    /* 44px ist der Mindestwert fuer sicher treffbare Tippziele. */
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background: rgba(10, 18, 38, 0.6);
    color: var(--c-text-soft);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
                background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

a.footer-social__link:hover,
a.footer-social__link:focus-visible {
    color: var(--marke);
    border-color: var(--c-line-strong);
    border-color: color-mix(in srgb, var(--marke) 55%, transparent);
    background: rgba(10, 18, 38, 0.6);
    background: color-mix(in srgb, var(--marke) 12%, rgba(10, 18, 38, 0.6));
    transform: translateY(-2px);
}

.footer-social__link--leer { opacity: 0.4; cursor: default; }

.footer-social .social__icon { width: 19px; height: 19px; }

/* 07c — Links / Projekte ================================================== */

/* Liegt zwischen Status (--c-bg-soft) und Kontakt (Verlauf nach --c-bg),
   uebernimmt deshalb denselben Grundton und bleibt im Fluss der Seite. */
.section--links { background: var(--c-bg-soft); }

.projekt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ab Tablet nebeneinander, darunter sauber untereinander. */
@media (min-width: 48em) {
    .projekt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.projekt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    height: 100%;
    padding: clamp(1.5rem, 3.5vw, 2.15rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-card);
    color: var(--c-text);
    text-decoration: none;
    overflow: hidden;
    /* Eigener Stapelkontext, damit der Schimmer hinter dem Text bleibt. */
    isolation: isolate;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease),
                box-shadow 0.35s var(--ease);
}

/* Schimmer in der Projektfarbe – im Ruhezustand nur angedeutet. */
.projekt__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(115% 130% at 100% 0%,
        color-mix(in srgb, var(--marke) 20%, transparent) 0%, transparent 62%);
    opacity: 0.35;
    transition: opacity 0.35s var(--ease);
    pointer-events: none;
}

.projekt:hover,
.projekt:focus-visible {
    transform: translateY(-4px);
    border-color: var(--c-line-strong);
    border-color: color-mix(in srgb, var(--marke) 55%, transparent);
    box-shadow: var(--shadow-soft);
}

.projekt:hover .projekt__glow,
.projekt:focus-visible .projekt__glow { opacity: 1; }

.projekt__logo {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--c-line-strong);
    border: 1px solid color-mix(in srgb, var(--marke) 30%, var(--c-line));
    border-radius: 15px;
    background: rgba(6, 12, 26, 0.6);
    background: color-mix(in srgb, var(--marke) 12%, rgba(6, 12, 26, 0.6));
    color: var(--marke);
    transition: transform 0.35s var(--ease);
}

.projekt:hover .projekt__logo,
.projekt:focus-visible .projekt__logo { transform: scale(1.06); }

.projekt__icon { width: 26px; height: 26px; }

.projekt__body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.projekt__name {
    font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
    font-weight: 600;
}

.projekt__domain {
    font-size: 0.9rem;
    color: var(--c-text-muted);
    overflow-wrap: anywhere;
}

/* margin-top: auto haelt den Hinweis am unteren Rand – auch wenn eine
   Karte laenger ist als die andere. */
.projekt__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-text-soft);
    transition: color 0.3s var(--ease);
}

.projekt:hover .projekt__cta,
.projekt:focus-visible .projekt__cta { color: var(--marke); }

.projekt__arrow {
    display: inline-flex;
    transition: transform 0.3s var(--ease);
}

.projekt__arrow svg { width: 18px; height: 18px; }

.projekt:hover .projekt__arrow,
.projekt:focus-visible .projekt__arrow { transform: translate(3px, -3px); }

/* 08 — Status ============================================================= */

.section--status { background: var(--c-bg-soft); }

.status-panel {
    padding: clamp(1.75rem, 4vw, 2.75rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(60, 110, 220, 0.16) 0%, transparent 55%),
        var(--c-surface-2);
    box-shadow: var(--shadow-soft);
}

.status-panel__head { margin-bottom: 1.75rem; }

.status-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.95rem 1.15rem;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: rgba(8, 14, 30, 0.5);
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.status-item:hover { border-color: var(--c-line-strong); transform: translateX(3px); }

.status-item__dot {
    flex: none;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--status-color);
    box-shadow: 0 0 12px var(--status-color);
}

.status-item__label { flex: 1 1 auto; color: var(--c-text); font-size: 0.98rem; }

/* Der Zustand steht zusätzlich als Text da – nicht nur als Farbe. */
.status-item__state {
    flex: none;
    padding: 0.28rem 0.75rem;
    border: 1px solid var(--c-line-strong);
    border: 1px solid color-mix(in srgb, var(--status-color) 45%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    background: color-mix(in srgb, var(--status-color) 14%, transparent);
    color: var(--status-color);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-item--online { --status-color: var(--c-online); }
.status-item--work   { --status-color: var(--c-work); }
.status-item--design { --status-color: var(--c-design); }

/* 09 — Kontakt & Formular ================================================= */

.section--contact { background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-bg) 100%); }

.contact {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
}

.contact__side {
    padding: clamp(1.6rem, 3vw, 2.1rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    box-shadow: var(--shadow-card);
}

.contact__side-title {
    margin-bottom: 1.35rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.contact__meta { margin: 0 0 1.5rem; }

.contact__meta dt {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.contact__meta dd {
    margin: 0.3rem 0 1.15rem;
    font-size: 1.02rem;
    color: var(--c-text);
    overflow-wrap: anywhere;
}

.contact__meta dd:last-child { margin-bottom: 0; }

.contact__hint {
    padding-top: 1.35rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.9rem;
    color: var(--c-text-muted);
}

.contact__form-wrap {
    padding: clamp(1.6rem, 3vw, 2.25rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-surface-2);
    box-shadow: var(--shadow-soft);
}

.form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 1.1rem;
}

.form__field { margin-bottom: 1.1rem; }
.form__row .form__field { margin-bottom: 0; }
.form__row { margin-bottom: 1.1rem; }

.form__field > label:not(.checkbox) {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c-text-soft);
}

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

.form input[type="text"],
.form input[type="email"],
.form textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background: rgba(4, 9, 20, 0.6);
    color: var(--c-text);
    font: inherit;
    /*
       Mindestens 16px: Faellt die Schriftgroesse eines Eingabefeldes darunter,
       zoomt iOS Safari beim Antippen automatisch in die Seite hinein und der
       Nutzer muss danach von Hand wieder herauszoomen.
    */
    font-size: max(16px, 0.98rem);
    /* Eigenes Aussehen behalten, nicht das des Systems. */
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
                background-color 0.25s var(--ease);
}

.form textarea { resize: vertical; min-height: 8rem; line-height: 1.6; }

.form input::placeholder,
.form textarea::placeholder { color: var(--c-text-muted); }

.form input:focus,
.form textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    background: rgba(8, 16, 34, 0.85);
    box-shadow: 0 0 0 3px rgba(110, 166, 255, 0.18);
}

.form input[aria-invalid="true"],
.form textarea[aria-invalid="true"] { border-color: #f87171; }

.form__error {
    margin-top: 0.45rem;
    color: #fca5a5;
    font-size: 0.86rem;
}

.form__note {
    margin-bottom: 1.4rem;
    font-size: 0.82rem;
    color: var(--c-text-muted);
}

/* Honeypot – unsichtbar, aber nicht display:none (manche Bots prüfen das). */
.form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Eigene Checkbox, echtes Feld bleibt bedienbar und fokussierbar. */
.checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    cursor: pointer;
    font-weight: 400;
    font-size: 0.93rem;
    color: var(--c-text-soft);
}

.checkbox input {
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    /* Auch das unsichtbare Feld erbt die Schrift, damit Browser keine
       eigene Mindestgroesse annehmen. */
    font: inherit;
    opacity: 0;
    cursor: pointer;
}

.checkbox__box {
    position: relative;
    display: block;
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.1rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 6px;
    background: rgba(4, 9, 20, 0.6);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.checkbox__box::after {
    content: "";
    position: absolute;
    left: 0.44rem;
    top: 0.18rem;
    width: 0.32rem;
    height: 0.62rem;
    border: solid #04101f;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s var(--ease);
}

.checkbox input:checked + .checkbox__box {
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.checkbox input:checked + .checkbox__box::after { transform: rotate(45deg) scale(1); }

.checkbox input:focus-visible + .checkbox__box {
    outline: 2px solid var(--c-accent-2);
    outline-offset: 3px;
}

.checkbox__text { line-height: 1.55; }

.notice {
    margin-bottom: 1.6rem;
    padding: 1rem 1.2rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: 0.96rem;
}

.notice--success {
    border-color: rgba(74, 222, 128, 0.45);
    background: rgba(74, 222, 128, 0.1);
    color: #bbf7d0;
}

.notice--error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(248, 113, 113, 0.1);
    color: #fecaca;
}

/* 10 — Fußbereich ========================================================= */

.site-footer {
    padding-block: clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: calc(clamp(2.5rem, 5vw, 3.5rem) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-line);
    background: #030610;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.site-footer__brand { display: flex; align-items: center; gap: 0.8rem; }

.site-footer__title { font-weight: 600; color: var(--c-text); }

.site-footer__owner { font-size: 0.9rem; color: var(--c-text-muted); }

/* Formatierung siehe Abschnitt 05 – Kopf- und Fussnavigation teilen sie sich. */

.site-footer__copy {
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
    font-size: 0.86rem;
    color: var(--c-text-muted);
}

/* 11 — Datenschutzhinweis ================================================= */

.privacy-note {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    z-index: 120;
    width: min(100% - 2rem, 34rem);
    transform: translate(-50%, 140%);
    transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
    opacity: 0;
}

.privacy-note.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Bei geoeffnetem Menue tritt der Hinweis in den Hintergrund. */
body.nav-open .privacy-note {
    opacity: 0;
    pointer-events: none;
}

/* Auf breiten Fenstern an den Rand, damit der Hund frei bleibt. */
@media (min-width: 900px) {
    .privacy-note {
        left: 1.75rem;
        bottom: 1.75rem;
        bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
        width: min(100% - 3.5rem, 26rem);
        transform: translate(0, 140%);
    }

    .privacy-note.is-visible { transform: translate(0, 0); }
}

.privacy-note__inner {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius);
    background: rgba(8, 14, 30, 0.9);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--shadow-soft);
}

.privacy-note__title {
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.privacy-note__text {
    margin-bottom: 1rem;
    font-size: 0.88rem;
    color: var(--c-text-soft);
}

.privacy-note__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* 12 — Scroll-Animationen ================================================= */

/* Nur wenn JavaScript wirklich laeuft, wird ueberhaupt etwas ausgeblendet.
   Ohne JS (html.js fehlt) ist der gesamte Inhalt sofort sichtbar. */
.js .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

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

/* 13 — Responsive ========================================================= */

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

@media (max-width: 860px) {
    .nav-toggle { display: grid; place-items: center; }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 99;
        display: flex;
        align-items: center;
        width: min(84vw, 20rem);
        height: 100vh;
        height: 100dvh;
        padding: 5.5rem 1.5rem 2rem;
        padding-right: calc(1.5rem + env(safe-area-inset-right, 0px));
        padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-left: 1px solid var(--c-line-strong);
        background: rgba(6, 11, 24, 0.96);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
        box-shadow: -30px 0 60px -40px rgba(0, 0, 0, 1);
        transform: translateX(105%);
        transition: transform 0.4s var(--ease);
        visibility: hidden;
    }

    .nav.is-open { transform: translateX(0); visibility: visible; }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        /* Im Panel gibt es keinen Seitenrand auszugleichen. */
        margin: 0;
        width: 100%;
    }

    .nav__link {
        /* Die Mindesthoehe aus der gemeinsamen Regel sichert das Tippziel
           bereits ab; mit zusaetzlichem Innenabstand oben und unten wuerden
           die Eintraege im Panel unnoetig auseinandergezogen. */
        min-height: 52px;
        padding: 0 1rem;
        font-size: 1.05rem;
    }

    .nav__item--sub { margin-top: 0.4rem; }
    .nav__item--sub:first-of-type { padding-top: 0.8rem; border-top: 1px solid var(--c-line); }
}

@media (max-width: 640px) {
    :root { --header-h: 66px; }

    .hero__inner { gap: 1rem; }

    .hero-dog {
        max-height: min(50vh, 440px);
        max-width: 82vw;
    }

    .hero-dog-glow { width: min(96vw, 420px); }

    .site-footer__inner { flex-direction: column; align-items: flex-start; }

    .status-item { flex-wrap: wrap; }
    .status-item__label { flex-basis: calc(100% - 2rem); }
}

/* Sehr niedrige, breite Fenster: Hund darf nicht aus dem Bild wachsen. */
@media (max-height: 700px) and (min-width: 861px) {
    .hero-dog { max-height: 48vh; }
    .hero__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }
}

/*
   Handy im Querformat: In der Hoehe ist kaum Platz, untereinander passt
   nichts mehr - der Hund wuerde unten abgeschnitten. Deshalb hier Text und
   Hund nebeneinander; das nutzt die vorhandene Breite und alles bleibt
   ohne Scrollen sichtbar.
*/
@media (orientation: landscape) and (max-height: 600px) {
    :root { --header-h: 58px; }

    .hero { height: 100vh; height: 100svh; }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
        grid-template-rows: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: clamp(1rem, 3vw, 2.5rem);
        padding-top: calc(var(--header-h) + 0.5rem);
        padding-bottom: 0.5rem;
    }

    .hero__text {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        text-align: left;
    }

    .hero-dog-wrapper { grid-column: 2; grid-row: 1; }

    .hero__scroll { grid-column: 1 / -1; grid-row: 2; }

    .hero__badge {
        margin-bottom: 0.5rem;
        padding: 0.35rem 0.85rem 0.35rem 0.7rem;
        font-size: 0.72rem;
    }

    .hero__title { font-size: clamp(1.5rem, 2.6vw + 0.7rem, 2.3rem); }

    .hero__lead {
        margin-top: 0.5rem;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-dog {
        max-height: 100%;
        max-width: 100%;
    }

    /* Trotz kleinerer Schrift ein sicher treffbares Tippziel behalten. */
    .hero__scroll {
        justify-content: center;
        min-height: 44px;
        padding-inline: 0.75rem;
        font-size: 0.68rem;
        gap: 0.25rem;
    }

    .hero__scroll-arrow { width: 13px; height: 13px; }
}

/* 13b — Touchgeraete ====================================================== */

/*
   Auf Geraeten ohne echten Mauszeiger bleibt ein :hover-Zustand nach dem
   Antippen haengen, bis woanders hingetippt wird. Bewegungen wirken dort
   deshalb wie ein Fehler - die Fokuszustaende bleiben davon unberuehrt.
*/
@media (hover: none) {
    .btn:hover,
    a.social:hover,
    a.social:hover .social__logo,
    .status-item:hover,
    a.footer-social__link:hover,
    .brand:hover .brand__mark {
        transform: none;
    }
}

/* Fein aufloesende Zeigegeraete: nur hier lohnen aufwendige Hover-Effekte. */
@media (hover: hover) and (pointer: fine) {
    a.social:hover { will-change: transform; }
}

/* 14 — Reduzierte Bewegung ================================================ */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .js .reveal { opacity: 1; transform: none; }
    /* Position kommt aus den regulaeren Regeln – hier nur die Bewegung raus. */
    .privacy-note { transition: none; }
    .hero__aurora,
    .hero__grid,
    .hero__bg { transform: none !important; }
    .hero-dog-float { animation: none; }
}

/* 14b — Fehlerseite (404) ================================================= */

.page-fehler { background: var(--c-bg); }

.fehler {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    /* Eigener Stapelkontext, damit der Hintergrund (z-index: -1) im
       Abschnitt bleibt und nicht hinter den Seitenhintergrund rutscht. */
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4rem));
    padding-bottom: clamp(2.5rem, 8vh, 5rem);
}

.fehler__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Die Ziffernfolge ist reine Dekoration – für Screenreader steht sie
   auf aria-hidden, den Sinn trägt die Überschrift darunter. */
.fehler__code {
    margin-bottom: clamp(0.5rem, 2vh, 1rem);
    font-size: clamp(5rem, 3rem + 16vw, 12rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    background: linear-gradient(180deg, #ffffff 15%, rgba(110, 166, 255, 0.45) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Ohne background-clip bliebe der Text sonst unsichtbar. */
    text-shadow: 0 24px 60px rgba(110, 166, 255, 0.18);
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .fehler__code { color: var(--c-text); }
}

.fehler__title {
    max-width: 22ch;
    margin-bottom: 1rem;
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.18;
    color: var(--c-text);
}

.fehler__text {
    max-width: 44ch;
    margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
    font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem);
    color: var(--c-text-soft);
}

.fehler__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: clamp(2.5rem, 6vh, 3.5rem);
}

.fehler__links-title {
    margin-bottom: 0.9rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.fehler__links ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fehler__links a {
    color: var(--c-text-soft);
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.fehler__links a:hover,
.fehler__links a:focus-visible {
    color: var(--c-accent);
    border-bottom-color: var(--c-line-strong);
}

/* 15 — Rechtstexte (Impressum, Datenschutz) =============================== */

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.page-legal {
    background:
        radial-gradient(90% 45% at 50% 0%, rgba(24, 46, 100, 0.55) 0%, transparent 70%),
        var(--c-bg);
    background-repeat: no-repeat;
}

.legal {
    padding-top: calc(var(--header-h) + clamp(2.5rem, 7vw, 4.5rem));
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.legal__inner { max-width: 52rem; }

.legal__title {
    margin-bottom: 0.8rem;
    font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3rem);
    /* „Datenschutzerklärung“ passt auf schmalen Displays sonst nicht in
       eine Zeile und schiebt die ganze Seite seitlich hinaus. */
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    background: linear-gradient(180deg, #ffffff 25%, #b9cbf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.legal__intro {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.14rem);
    color: var(--c-text-soft);
}

/* Inhaltsuebersicht der Rechtstexte – reine Sprungmarken, kein JavaScript. */
.legal__toc {
    margin-bottom: clamp(2rem, 5vw, 3rem);
    padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.2rem, 3vw, 1.8rem);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-surface-2);
    box-shadow: var(--shadow-card);
}

.legal__toc-title {
    margin: 0 0 0.9rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}

.legal__toc-list {
    /* Zweispaltig, solange Platz ist – bricht von selbst auf eine Spalte um. */
    margin: 0;
    padding-left: 1.3rem;
    columns: 2;
    column-gap: 2rem;
    font-size: 0.95rem;
    color: var(--c-text-muted);
}

.legal__toc-list li {
    margin-bottom: 0.45rem;
    /* Verhindert, dass ein Eintrag zwischen den Spalten zerrissen wird. */
    break-inside: avoid;
}

.legal__toc-list a {
    color: var(--c-text-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.legal__toc-list a:hover,
.legal__toc-list a:focus-visible {
    color: var(--c-accent);
    border-bottom-color: var(--c-line-strong);
}

@media (max-width: 640px) {
    .legal__toc-list { columns: 1; }
}

/* Zwischenueberschrift innerhalb eines Abschnitts. */
.legal__sub {
    margin: 1.9rem 0 0.8rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--c-text);
}

.legal__block > .legal__sub:first-of-type { margin-top: 1.5rem; }

.legal__block {
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
    padding-bottom: clamp(1.5rem, 3vw, 2rem);
    border-bottom: 1px solid var(--c-line);
}

.legal__block:last-of-type { border-bottom: 0; }

.legal__block h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    color: var(--c-text);
}

.legal__block p { margin-bottom: 1rem; color: var(--c-text-soft); }
.legal__block p:last-child { margin-bottom: 0; }

.legal__block ul {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
    color: var(--c-text-soft);
}

.legal__block li { margin-bottom: 0.4rem; }

.legal__block strong { color: var(--c-text); font-weight: 600; }

.legal__block code {
    padding: 0.15em 0.45em;
    border: 1px solid var(--c-line);
    border-radius: 6px;
    background: rgba(110, 166, 255, 0.08);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.86em;
    color: var(--c-text);
}

.legal__dl { margin: 0; }
.legal__dl dt {
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.legal__dl dd { margin: 0.3rem 0 1.1rem; color: var(--c-text-soft); }
.legal__dl dd:last-child { margin-bottom: 0; }

.legal__hint { font-size: 0.92rem; color: var(--c-text-muted) !important; }

/* Fehlende Pflichtangaben – bewusst auffällig, damit nichts übersehen wird. */
.todo {
    display: inline-block;
    padding: 0.1em 0.6em;
    border: 1px dashed rgba(251, 191, 36, 0.6);
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.1);
    color: #fcd34d;
    font-size: 0.86em;
    font-weight: 600;
}

.todo-inline { color: #fcd34d; font-size: 0.92em; }

.legal__notice {
    margin-top: 2.5rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid rgba(251, 191, 36, 0.35);
    border-radius: var(--radius);
    background: rgba(251, 191, 36, 0.07);
}

.legal__notice p { color: var(--c-text-soft); font-size: 0.94rem; }
.legal__notice p:first-child { margin-bottom: 0.5rem; color: #fcd34d; }

.table-wrap {
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
}

.legal__table {
    width: 100%;
    min-width: 36rem;
    border-collapse: collapse;
    font-size: 0.92rem;
}

/* Zwei-Spalten-Tabelle (Speicherdauer): passt auch aufs Smartphone,
   deshalb kein erzwungenes Querscrollen. */
.legal__table--schmal { min-width: 0; }

.legal__table th,
.legal__table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text-soft);
}

.legal__table thead th {
    background: rgba(110, 166, 255, 0.08);
    color: var(--c-text);
    font-weight: 600;
    white-space: nowrap;
}

.legal__table tbody tr:last-child td { border-bottom: 0; }

/* Vierspaltige Tabellen sind auf dem Smartphone nicht lesbar. Dort wird
   jede Zeile zu einer eigenen Karte; die Spaltennamen stehen dann als
   Beschriftung ueber dem Wert (data-label im HTML). */
@media (max-width: 640px) {
    .table-wrap--karten {
        border: 0;
        overflow-x: visible;
    }

    .legal__table--karten {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 0.75rem;
    }

    .legal__table--karten thead { display: none; }

    .legal__table--karten tbody tr {
        display: block;
        padding: 0.35rem 1rem 0.9rem;
        border: 1px solid var(--c-line);
        border-radius: var(--radius-sm);
        background: rgba(110, 166, 255, 0.05);
    }

    .legal__table--karten td,
    .legal__table--karten tbody tr:last-child td {
        display: block;
        padding: 0.65rem 0 0;
        border-bottom: 0;
    }

    .legal__table--karten td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--c-text-muted);
    }
}

.legal__back { margin-top: 2.5rem; }