/* ==========================================================================
   Needle & Ink – dunkles Design „Tinte und Stencil“
   Eine Schriftart: Inter (variabel, lokal ausgeliefert).
   ========================================================================== */

/* Einzige Schriftart: Signika Negative (SIL OFL, variabel, lokal ausgeliefert).
   Humanistische Grotesk mit leicht schmaler Anmutung - traegt vom Fließtext
   bis zu den monumentalen Ueberschriften. Kein externer Abruf. */
@font-face {
    font-family: "Signika Negative";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/signika-latin.6161496eca18.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Signika Negative";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/signika-latin-ext.ca77832686ec.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------------------------------------------------------- Flaechen
       Tinte, leicht kuehl statt Neutralschwarz - reines #000 wirkt hart und
       laesst die Fotos flach erscheinen. */
    --surface: #0b0a0c;          /* Grundflaeche der Seite */
    --surface-sunken: #060507;   /* abgesetzte Baender, ruhige Rhythmuswechsel */
    --surface-raised: #141317;   /* Karten, Formularfelder */
    --surface-hover: #1c1a20;    /* Hover auf hellen Flaechen */
    --surface-high: #1a1820;     /* hoechste Ebene, z. B. Chat-Blasen */
    --surface-contrast: #ede8e0; /* Fussbereich - warmes Anthrazit, kein Schwarz */

    --line: rgba(237, 232, 224, 0.13);
    --line-strong: rgba(237, 232, 224, 0.28);

    /* Struktur der Grundflaeche: ein feines Punktraster, angelehnt an
       Dotwork. Bewusst sehr zurueckhaltend - es soll Papier andeuten, nicht
       als Muster auffallen. Hier zentral aenderbar. */
    --textur-punkt: rgba(237, 232, 224, 0.055);
    --textur-abstand: 26px;

    /* Dauer eines vollen Durchlaufs im Ankündigungs-Laufband.
       Auf schmalen Geräten wird der Wert weiter unten erhöht. */
    --announce-tempo: 48s;

    /* ------------------------------------------------------------ Hoehen
       Kopfzeile und Laufband stehen hier EINMAL. Vorher waren die 112px an
       vier Stellen als Zahl verteilt, und das Laufband fehlte in jeder
       Rechnung - die Login-Seite war dadurch zu hoch. Alles Abhaengige
       rechnet ab jetzt mit diesen beiden Werten. */
    --kopfzeile-hoehe: 112px;
    --laufband-hoehe: 0px;   /* wird von .hat-laufband gesetzt */

    /* ------------------------------------------------------------- Schrift */
    --text: #ede8e0;             /* Fliesstext, 14,5:1 auf --surface */
    --text-dim: #b4aca2;         /* Sekundaertext, 7,7:1 */
    --text-faint: #8d857c;       /* Beschriftungen in Kleinschrift, 5,4:1 -
                                    dunkler als urspruenglich geplant, weil
                                    das hellere Grau die 4,5:1 verfehlte */
    --text-on-contrast: #0b0a0c; /* Schrift auf --surface-contrast */

    /* -------------------------------------------------------------- Akzent
       Das Rot des Logos. Zwei Werte: #e23b30 traegt Flaechen; weisse Schrift
       darauf erreicht nur 4,28:1, deshalb steht auf roten Knoepfen DUNKLE
       Schrift (--on-accent, 4,61:1). Fuer Text/Links auf Tinte ist #e23b30
       zu dunkel - dort gilt das aufgehellte --accent-text (7,0:1). */
    --on-accent: #0b0a0c;
    --accent: #e23b30;           /* Buttonflaechen - weisse Schrift 4,9:1 */
    --accent-text: #ff6a5e;      /* Links und Text - 5,8:1 auf --surface */
    --accent-deep: #ff9d94;      /* Hover - auf Tinte heller statt dunkler */
    --accent-soft: rgba(226, 59, 48, 0.15);   /* zarte Tonflaeche */
    --accent-line: rgba(226, 59, 48, 0.42);   /* Rahmen in Akzentfarbe */
    --accent-glow: rgba(226, 59, 48, 0.45);

    /* Rot traegt nur noch die Marke, nicht mehr die Bedienung: Weisse Schrift
       darauf erreicht 4,28:1 und faellt durch AA - auf dem Violett sind es
       5,17:1. Die Rechnung hat die gestalterische Entscheidung bestaetigt. */
    --marke-rot: #e23b30;  /* identisch zum Akzent - Rot ist jetzt einheitlich */   /* Schlagschatten unter Buttons */

    /* ------------------------------------------------------------- Schleier
       Die Lightbox bleibt bewusst dunkel: Zum Betrachten von Fotografien ist
       ein dunkler Rahmen richtig, die Bilder treten hervor. */
    --scrim: rgba(20, 18, 16, 0.93);
    --scrim-soft: rgba(20, 18, 16, 0.55);

    /* -------------------------------------------------------------- Status
       Auf hellem Grund abgestimmt; die alten Werte waren fuer dunkel gewaehlt
       und wirken hier zu blass. */
    --ok: #5fcf94;
    --info: #7fb8ff;
    --warn: #e0b155;
    --danger: #ff8d82;

    /* --------------------------------------------------------------- Form */
    --radius: 4px;
    --radius-lg: 10px;
    --shadow: 0 26px 70px -34px rgba(0, 0, 0, 0.85);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

    --wrap: 1240px;
    --gutter: clamp(24px, 5vw, 64px);

    --font: "Signika Negative", system-ui, sans-serif;
    --font-display: "Signika Negative", system-ui, sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    color: var(--text);
    background-color: var(--surface);
    /* Punktraster als Grundstruktur. Reines CSS - keine Bilddatei, kein
       zusaetzlicher Abruf. Kein background-attachment: fixed, das ruckelt
       auf Mobilgeraeten beim Scrollen. */
    background-image: radial-gradient(
        circle at 1px 1px,
        var(--textur-punkt) 1px,
        transparent 0
    );
    background-size: var(--textur-abstand) var(--textur-abstand);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv05" 1, "ss01" 1, "cv11" 1;
    /* Bricht lange Woerter nur dann um, wenn sie sonst ueberlaufen wuerden -
       etwa die E-Mail-Adresse oder eine im Portal-Chat eingefuegte Adresse. */
    overflow-wrap: break-word;
    overflow-x: hidden;
}

/* Feine Papierkorn-Textur für Atmosphäre.
   "multiply" statt "screen": screen hellt auf und wäre auf hellem Grund
   unsichtbar. Deckkraft entsprechend zurückgenommen. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.02;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 600;
    /* Grosse Grade brauchen enger gesetzte Buchstaben, sonst zerfallen sie. */
    letter-spacing: -0.035em;
    line-height: 1.06;
    color: var(--text);
}

p {
    margin: 0 0 1em;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

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

.container.narrow {
    max-width: 760px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 1.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--accent);
}

.eyebrow-light {
    color: var(--text-dim);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 1000;
    background: var(--accent);
    color: var(--on-accent);
    padding: 12px 18px;
    border-radius: var(--radius);
    transition: top 0.2s;
}
.skip-link:focus {
    top: 16px;
}

/* --------------------------------------------------------------- Buttons */
.button {
    --btn-bg: var(--accent);
    --btn-fg: var(--on-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.85rem 1.6rem;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
        background 0.3s, color 0.3s, border-color 0.3s;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px -18px var(--accent-glow);
}
.button-primary {
    box-shadow: 0 12px 30px -16px var(--accent-glow);
}
.button-ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    border-color: var(--line-strong);
}
.button-ghost:hover {
    --btn-fg: var(--text);
    border-color: var(--text);
    box-shadow: none;
}
.button-paper {
    --btn-bg: var(--surface-contrast);
    --btn-fg: var(--text-on-contrast);
}
.button-full {
    width: 100%;
    justify-content: center;
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    border-bottom: 1px solid var(--line-strong);
    padding-bottom: 4px;
    transition: gap 0.3s var(--ease), border-color 0.3s, color 0.3s;
}
.text-link:hover {
    gap: 0.85em;
    color: var(--accent-text);
    border-color: var(--accent);
}

/* ---------------------------------------------------------------- Header */
/* --------------------------------------------------- Ankündigungs-Laufband
   Flache Leiste in voller Breite direkt unter der Navigation. Der Text läuft
   durch; die Spur enthält denselben Abschnitt acht Mal, damit der Sprung bei
   translateX(-50%) nahtlos ist. */
/* Die Hoehe ist bewusst festgelegt statt vom Inhalt abgeleitet: Kopfzeile,
   mobiles Menue, Meldungen und die Login-Seite rechnen mit ihr. */
.hat-laufband {
    --laufband-hoehe: 40px;
}
.announce {
    height: var(--laufband-hoehe);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--accent);
    border-bottom: 1px solid var(--accent-deep);
}
.announce-track {
    display: flex;
    width: max-content;
    animation: announceLauf var(--announce-tempo) linear infinite;
}

/* Auf schmalen Geräten langsamer.
   Die Spur ist wegen white-space: nowrap überall gleich breit, die
   Geschwindigkeit in Pixeln pro Sekunde also identisch. Auf einem schmalen
   Display durchquert ein Satz das sichtbare Fenster aber in weniger Zeit –
   zum Mitlesen bleibt weniger übrig. Deshalb die längere Dauer. */
@media (max-width: 960px) {
    :root {
        --announce-tempo: 70s;
    }
}
@media (max-width: 560px) {
    :root {
        --announce-tempo: 92s;
    }
}
.announce-item {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding-inline-end: 2.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--on-accent);
    white-space: nowrap;
}
.announce-item b {
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
}
/* Trennzeichen zwischen den Durchläufen */
.announce-item::after {
    content: "✦";
    margin-inline-start: 2.6rem;
    opacity: 0.65;
}
@keyframes announceLauf {
    to {
        transform: translateX(-50%);
    }
}
/* Anhalten beim Darüberfahren oder per Tastatur – damit sich der Text
   in Ruhe lesen lässt (WCAG 2.2.2). */
.announce:hover .announce-track,
.announce:focus-within .announce-track {
    animation-play-state: paused;
}

/* Größerer Aufruf im Hero, solange die Ankündigung läuft */
.button-lg {
    padding: 1.05rem 2.2rem;
    font-size: 0.95rem;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(11, 10, 12, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--line);
    transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.site-header.scrolled {
    background: rgba(11, 10, 12, 0.94);
    border-bottom-color: var(--line-strong);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: var(--kopfzeile-hoehe);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.brand-mark {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.6s var(--ease);
}
.brand:hover .brand-mark {
    transform: rotate(6deg) scale(1.04);
}
.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.brand-copy strong {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
.brand-copy small {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.site-nav a {
    position: relative;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dim);
    transition: color 0.25s;
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}
.site-nav a:hover {
    color: var(--text);
}
.site-nav a:hover::after {
    transform: scaleX(1);
}
.nav-portal {
    padding: 0.55rem 1.15rem;
    color: var(--text) !important;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    transition: border-color 0.25s, background 0.25s;
}
.nav-portal::after {
    display: none;
}
.nav-portal:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    cursor: pointer;
}
.nav-toggle span:not(.sr-only) {
    width: 18px;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.3s, opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ------------------------------------------------------------------ Hero */
.hero {
    position: relative;
    /* svh statt vh: vh meint auf Mobilgeraeten das Fenster ohne
       Adressleiste - beim Laden ist sie aber da. */
    min-height: min(92vh, 900px);
    min-height: min(92svh, 900px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-media video,
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Das Material soll tragen: kaum Entsaettigung, keine Aufhellung.
       Vorher wurde es mit brightness(1.18) und hellem Schleier weggewaschen. */
    filter: grayscale(0.12) contrast(1.06) saturate(1.05);
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Zwei Schleier statt einem:
       - waagerecht von links, wo die Schrift steht (das Video ist dort hell,
         knochenweisse Schrift wuerde darin verschwinden)
       - senkrecht nach unten fuer den Uebergang in die Seitenfarbe
       Die rechte Bildhaelfte bleibt dadurch offen - dort laeuft das Material. */
    background: linear-gradient(
            100deg,
            rgba(11, 10, 12, 0.92) 0%,
            rgba(11, 10, 12, 0.78) 26%,
            rgba(11, 10, 12, 0.52) 52%,
            rgba(11, 10, 12, 0.18) 70%,
            transparent 82%
        ),
        linear-gradient(
            180deg,
            rgba(11, 10, 12, 0.35) 0%,
            transparent 26%,
            transparent 58%,
            rgba(11, 10, 12, 0.80) 88%,
            var(--surface) 100%
        );
}
.hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: clamp(48px, 8vw, 110px);
    padding-top: 120px;
}
.hero-kicker {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.8rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.hero-kicker span {
    width: 46px;
    height: 1px;
    background: var(--accent);
}
.hero h1 {
    font-size: clamp(2.4rem, 9.5vw, 9.5rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 0.92;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}
.hero h1 em {
    font-style: normal;
    font-weight: 500;
    /* Stencil-Violett: die Farbe des Motivs, BEVOR es bleibt - und mit
       6,5:1 kraeftiger als --text-faint, was hier zaehlt, weil die Zeile
       teilweise vor hellem Videomaterial steht. */
    color: var(--accent-text);
}
.hero-lead {
    max-width: 42ch;
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    font-weight: 400;
    color: var(--text-dim);
    margin-bottom: 2.8rem;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.4rem 2.2rem;
}
.hero-meta {
    display: flex;
    gap: 2.4rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}
.hero-meta div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.hero-meta strong {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hero-meta small {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-faint);
}

/* --------------------------------------------------------------- Marquee */
.marquee {
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
    overflow: hidden;
    padding: 1.15rem 0;
}
.marquee-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: marquee 34s linear infinite;
    white-space: nowrap;
}
.marquee span {
    display: inline-flex;
    align-items: center;
    gap: 3rem;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.marquee span::after {
    content: "✦";
    color: var(--accent-text);
}
@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

/* -------------------------------------------------------------- Sections */
.section {
    padding: clamp(52px, 11vw, 150px) 0;
    position: relative;
}
.section-band {
    background: var(--surface-sunken);
    border-block: 1px solid var(--line);
}
.section-soft {
    background: var(--surface-raised);
    border-block: 1px solid var(--line);
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    flex-wrap: wrap;
}

@media (min-width: 961px) {
    .split-label .eyebrow,
    .split-intro > .eyebrow {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        transform-origin: center;
        margin: 0;
        font-size: 0.82rem;
        letter-spacing: 0.45em;
        white-space: nowrap;
    }
    /* Der rote Strich sitzt im vertikalen Fluss unten - als Fusspunkt der Schiene. */
    .split-label .eyebrow::before,
    .split-intro > .eyebrow::before {
        width: 2px;
        height: 40px;
    }

    /* -------------------------------------------------- Die tätowierende Nadel
       Die Schiene "Das Atelier" liest sich als Tattoo-Maschine: der Text ist
       der Schaft, der rote ::before-Strich die Spitze. Sie wird leicht schräg
       gehalten (so führt man eine Maschine) und sticht fortwährend leise auf
       und ab - kurze Stiche Richtung Spitze, dann eine Mikropause, damit es
       "arbeitet" statt zu vibrieren.

       Grundregeln:
       - Die vorhandene rotate(180deg) muss jede Keyframe mitführen, sonst
         kippt die Schiene aus ihrer Ausrichtung.
       - Gepivotet wird um die rote Spitze (transform-origin: bottom center;
         "bottom" der vor-transformierten Box liegt nach der 180deg-Drehung
         unten, am Fusspunkt).
       - Die Animation läuft NUR bei .nadel-aktiv (setzt der Observer, solange
         die Schiene im Bild ist). Ohne JavaScript bleibt sie still und lesbar.
       - Kleine Amplitude (2px), damit der Text lesbar bleibt. */
    .split-intro > .eyebrow[data-nadel] {
        transform: rotate(180deg) rotate(-4.5deg);
        /* WICHTIG: center, NICHT bottom center. Bei rotate(180deg) um den
           unteren Punkt kippt die sichtbare Schiene um ihre eigene Hoehe nach
           UNTEN aus der Layout-Position - sie taucht dann beim Scrollen in den
           Text darunter. Mit center bleibt sichtbar = Layout. Die 4,5°-Neigung
           ist konstant, der Pivot ist daher optisch belanglos. */
        transform-origin: center;
    }
    .split-intro > .eyebrow[data-nadel].nadel-aktiv {
        animation: nadelStich 2.4s ease-in-out infinite;
    }

    /* Farbspritzer: kleine rote Striche, die an der Einstichstelle (rote
       Spitze) abprallen. Sie sitzen absolut an der Spitze - in der Box VOR
       der 180deg-Drehung ist das oben (top: 6px), nach der Drehung visuell
       unten am Fusspunkt. Die Flugrichtungen sind in Vor-Drehungs-Koordinaten
       gesetzt; die 180deg spiegelt sie in den sichtbaren Fluchtwinkel.
       Nur bei .nadel-aktiv - ausser Sicht kein Compositing. */
    .einstich {
        position: absolute;
        top: 6px;
        left: 50%;
        width: 0;
        height: 0;
    }
    .einstich i {
        position: absolute;
        top: 0;
        left: 0;
        width: 2px;
        height: 7px;
        border-radius: 1px;
        background: var(--accent);
        opacity: 0;
        will-change: transform, opacity;
    }
    /* Ein Funke pro Zyklus je Strich, exakt getaktet auf die Einstich-Spitzen
       von nadelStich (bei 4/24/44 % = Nadel im Fleisch). Gleiche 2,4s-Periode,
       dieselbe Phase (beide starten mit .nadel-aktiv), daher synchron. Danach
       bleibt der Strich bis zum Zyklusende unsichtbar - waehrend die Nadel
       oben abhebt (49-100 %), spruehen keine Flaemmchen. */
    .nadel-aktiv .einstich i {
        animation: spritzer 2.4s linear infinite;
    }
    .einstich i:nth-child(1) { --dx: -10px; --dy: 13px; animation-delay: 0.10s; }
    .einstich i:nth-child(2) { --dx:   3px; --dy: 16px; animation-delay: 0.58s; }
    .einstich i:nth-child(3) { --dx:  12px; --dy: 11px; animation-delay: 1.06s; }
}

@keyframes spritzer {
    /* Kurzer Funke (erste ~13 % des Zyklus), dann Rest des Zyklus unsichtbar. */
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.5); }
    2%   { opacity: 1; transform: translate(calc(var(--dx) * 0.3), calc(var(--dy) * 0.3)) rotate(12deg) scale(1); }
    13%  { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(40deg) scale(0.85); }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(40deg) scale(0.85); }
}

@keyframes nadelStich {
    /* Ein Zyklus in zwei klar getrennten Phasen. Achtung Vorzeichen: das
       Element ist um 180deg gedreht, translateY ist daher gegenueber der
       Bildschirmrichtung gespiegelt - translateY(-2px) bewegt die Spitze
       sichtbar NACH UNTEN in die "Haut" darunter, translateY(+5px) hebt sie
       nach oben ab.
       - 0-49 %: fuenf kurze Stiche in die Haut. Genau hier - und nur hier -
         spruehen die Flaemmchen.
       - 49-100 %: die Nadel HEBT AB (weg vom Fleisch) und setzt neu an.
         Kein Kontakt, keine Funken.
       Die 175,5deg (180 - 4,5) halten die Schraege konstant. */
    0%   { transform: rotate(175.5deg) translateY(0); }
    4%   { transform: rotate(175.5deg) translateY(-2px); }
    9%   { transform: rotate(175.5deg) translateY(0); }
    14%  { transform: rotate(175.5deg) translateY(-2px); }
    19%  { transform: rotate(175.5deg) translateY(0); }
    24%  { transform: rotate(175.5deg) translateY(-2px); }
    29%  { transform: rotate(175.5deg) translateY(0); }
    34%  { transform: rotate(175.5deg) translateY(-2px); }
    39%  { transform: rotate(175.5deg) translateY(0); }
    44%  { transform: rotate(175.5deg) translateY(-2px); }
    49%  { transform: rotate(175.5deg) translateY(0); }
    /* Abheben und oben verweilen - hier beruehrt die Nadel das Fleisch nicht. */
    62%  { transform: rotate(175.5deg) translateY(5px); }
    84%  { transform: rotate(175.5deg) translateY(5px); }
    /* Zurueck zur Haut, bereit fuer den naechsten Satz Stiche. */
    100% { transform: rotate(175.5deg) translateY(0); }
}

/* ------------------------------------------------- Redaktionelles Layout
   Bricht mit der Mittelachse: Das Label steht links und bleibt beim Scrollen
   stehen, der Inhalt läuft rechts daran vorbei. Bilder bekommen mehr Breite
   als die Textspalte - daraus entsteht die Spannung. */
.wide-wrap {
    width: 100%;
    max-width: 1560px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.split-head {
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.split-label {
    position: sticky;
    top: calc(var(--kopfzeile-hoehe) + 2rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.2rem;
}
.split-head h2 {
    /* Deutlich groesserer Sprung zum Fließtext als bisher. */
    font-size: clamp(2rem, 5.8vw, 5.8rem);
    letter-spacing: -0.04em;
    line-height: 0.98;
}

/* Bildraster: gleiche Zuschnitte, sauberer unterer Abschluss.
   Vorher lief CSS-columns spaltenweise aus und endete ausgefranst. */
.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.2vw, 20px);
}
.work-grid .shot {
    aspect-ratio: 4 / 5;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    cursor: zoom-in;
    position: relative;
}
.work-grid .shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}
.work-grid .shot:hover img {
    transform: scale(1.04);
}
.section-heading h2,
.split-intro h2 {
    font-size: clamp(1.65rem, 4.8vw, 4.4rem);
    letter-spacing: -0.03em;
}

.split-intro {
    display: grid;
    grid-template-columns: 0.42fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
/* Das Label bleibt stehen, waehrend der Text daran vorbeilaeuft.
   Kein negatives margin-top mehr: das kaschierte nur den frueheren
   transform-origin-Fehler. Mit korrektem Origin sitzt die Schiene an der
   Rasteroberkante (auf Hoehe der Ueberschrift) und bleibt beim Scrollen
   sauber im split-intro, statt in den Text darunter zu tauchen. */
.split-intro > .eyebrow {
    position: sticky;
    top: calc(var(--kopfzeile-hoehe) + 1rem);
    margin: 0;
}
.split-intro p {
    font-size: 1.08rem;
    color: var(--text-dim);
    max-width: 52ch;
}
.split-intro p:first-of-type {
    color: var(--text);
    font-size: 1.2rem;
}

/* ------------------------------------------------------ Intro statements */
.statements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: clamp(3rem, 6vw, 5rem);
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.statement {
    background: var(--surface);
    padding: clamp(1.8rem, 3vw, 2.8rem);
    transition: background 0.4s;
}
.statement:hover {
    background: var(--surface-hover);
}
.statement .num {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}
.statement h3 {
    margin: 1.2rem 0 0.7rem;
    font-size: 1.35rem;
}
.statement p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.98rem;
}

/* ------------------------------------------------------- Style directory */
.style-list {
    border-top: 1px solid var(--line);
}
.style-row {
    display: grid;
    grid-template-columns: 0.5fr 1.4fr auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.4rem, 3vw, 2.4rem) 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: padding-left 0.4s var(--ease);
}
.style-row:hover {
    padding-left: 1.2rem;
}
.style-row .idx {
    /* Vorher 0,8 rem und kaum sichtbar. Als grosse Ziffer traegt sie den
       Rhythmus der Liste mit. */
    font-size: clamp(1.6rem, 3.4vw, 3rem);
    font-weight: 300;
    line-height: 1;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.style-row h3 {
    font-size: clamp(1.35rem, 3.6vw, 3rem);
    letter-spacing: -0.03em;
    transition: color 0.3s;
}
.style-row:hover h3 {
    color: var(--accent-text);
}
.style-row p {
    margin: 0.5rem 0 0;
    color: var(--text-dim);
    font-size: 0.98rem;
    max-width: 50ch;
}
.style-row .go {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--accent-text);
    font-size: 1.1rem;
    transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.style-row:hover .go {
    background: var(--accent);
    border-color: var(--accent);
    transform: rotate(-45deg);
}
.style-thumb {
    position: absolute;
    right: 12%;
    top: 50%;
    width: 190px;
    height: 130px;
    transform: translateY(-50%) scale(0.9);
    border-radius: var(--radius-lg);
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.5s var(--ease);
    z-index: 3;
    box-shadow: var(--shadow);
}
.style-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.style-row:hover .style-thumb {
    opacity: 1;
    transform: translateY(-50%) rotate(-3deg) scale(1);
}

/* ------------------------------------------------------------- Process */
.process-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.process-grid li {
    background: var(--surface);
    padding: clamp(1.8rem, 3vw, 2.8rem);
}
.process-grid span {
    display: block;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}
.process-grid h3 {
    margin: 1.2rem 0 0.7rem;
    font-size: 1.3rem;
}
.process-grid p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.98rem;
}

/* ------------------------------------------------------- Portal teaser */
.portal-teaser {
    background: var(--surface-sunken);
    border-block: 1px solid var(--line);
}
.portal-teaser-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.portal-teaser h2 {
    font-size: clamp(1.65rem, 4.8vw, 4.4rem);
    letter-spacing: -0.03em;
}
.portal-teaser p {
    color: var(--text-dim);
    font-size: 1.08rem;
    margin-bottom: 2rem;
}

/* ------------------------------------------------------------- Contact */
.contact-section {
    background: var(--surface-raised);
    border-top: 1px solid var(--line);
}
/* Rasterkinder schrumpfen von sich aus nicht unter ihre Inhaltsbreite. */
.contact-grid > *,
.footer-grid > *,
.chat-layout > * {
    min-width: 0;
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: start;
}
.contact-copy h2 {
    font-size: clamp(1.65rem, 4.4vw, 4rem);
    margin-bottom: 1.4rem;
}
.contact-copy > p {
    color: var(--text-dim);
    font-size: 1.06rem;
}
.contact-details {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.3rem;
}
.contact-details div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-bottom: 1.3rem;
    border-bottom: 1px solid var(--line);
}
.contact-details small {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.contact-details a,
.contact-details span {
    font-size: 1.12rem;
    font-weight: 500;
    color: var(--text);
}
.contact-details a:hover {
    color: var(--accent-text);
}

/* Formulare */
.contact-form,
.auth-form {
    display: grid;
    gap: 1.2rem;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Raster- und Flex-Kinder schrumpfen von sich aus nicht unter ihre
       Inhaltsbreite. Ohne min-width: 0 sprengt ein breites Feld die Spalte. */
    min-width: 0;
}
.field label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}
input,
textarea,
select {
    /* Ohne diese Breite richtet sich ein Feld nach seinen HTML-Attributen:
       Django rendert das Nachrichtenfeld mit cols="40", was rund 380 px ergibt.
       Auf einem 320-px-Display stehen 272 px zur Verfügung - der Überlauf
       wurde bisher von overflow-x: hidden abgeschnitten statt behoben. */
    width: 100%;
    max-width: 100%;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--text);
    background: var(--surface-hover);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
/* Ankreuzfelder behalten ihre eigene Größe - sonst würden sie mitgestreckt. */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
}
input::placeholder,
textarea::placeholder {
    color: var(--text-faint);
}
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-raised);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea {
    resize: vertical;
    min-height: 130px;
}
.honeypot {
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
}
.check-field {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    font-size: 0.86rem;
    color: var(--text-dim);
    line-height: 1.5;
}
.check-field a {
    color: var(--accent-text);
    border-bottom: 1px solid var(--accent);
}
.check-field input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--accent);
    padding: 0;
}
.errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--accent-text);
    font-size: 0.82rem;
}
.form-errors {
    padding: 0.85rem 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
    color: var(--danger);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------- Page hero */
.page-hero {
    padding: clamp(72px, 16vw, 190px) 0 clamp(40px, 7vw, 84px);
    border-bottom: 1px solid var(--line);
    background: radial-gradient(90% 120% at 80% 0%, var(--accent-soft), transparent 60%),
        var(--surface-sunken);
}
.page-hero h1 {
    font-size: clamp(1.95rem, 6.5vw, 6rem);
    letter-spacing: -0.04em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.page-hero p {
    color: var(--text-dim);
    font-size: 1.1rem;
    max-width: 56ch;
}
.page-hero-small h1 {
    font-size: clamp(1.8rem, 5vw, 3.8rem);
}

/* ---------------------------------------------------- Gallery categories */
.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.category-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-raised);
}
.category-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.25) brightness(0.72);
    transition: transform 0.9s var(--ease), filter 0.6s;
}
.category-tile:hover img {
    transform: scale(1.05);
    filter: grayscale(0) brightness(0.92);
}
.category-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Bewusst dunkel: die Bildunterschrift steht auf dem Foto. */
    background: linear-gradient(0deg, var(--scrim) 5%, transparent 55%);
}
.category-tile figcaption {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 1.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
}
.category-tile h2 {
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}
.category-tile p {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
    max-width: 30ch;
}
.category-tile .count {
    flex-shrink: 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
}

/* --------------------------------------------------- Masonry image grid */
.masonry {
    columns: 3;
    column-gap: 16px;
}
.masonry .shot {
    break-inside: avoid;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    cursor: zoom-in;
    position: relative;
}
.masonry .shot img {
    width: 100%;
    filter: grayscale(0.12) brightness(0.9);
    transition: transform 0.8s var(--ease), filter 0.5s;
}
.masonry .shot:hover img {
    transform: scale(1.04);
    filter: none;
}
.masonry .shot::after {
    content: "↗";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--scrim-soft);
    backdrop-filter: blur(6px);
    border-radius: 50%;
    color: var(--text-on-contrast);
    opacity: 0;
    transition: opacity 0.3s;
}
.masonry .shot:hover::after {
    opacity: 1;
}

/* Weitere Stile unten auf der Kategorieseite */
.more-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.6rem;
}
.chip {
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-size: 0.85rem;
    color: var(--text-dim);
    transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.chip:hover {
    color: var(--accent-text);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* -------------------------------------------------------------- Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 5vw, 60px);
    background: var(--scrim);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s, visibility 0.35s;
}
.lightbox.open {
    opacity: 1;
    visibility: visible;
}
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: scale(0.96);
    transition: transform 0.35s var(--ease);
}
.lightbox.open img {
    transform: scale(1);
}
.lightbox button {
    position: absolute;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text-on-contrast);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.25s, border-color 0.25s;
}
.lightbox button:hover {
    background: var(--accent);
    border-color: var(--accent);
}
.lb-close {
    top: 24px;
    right: 24px;
}
.lb-prev {
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
}
.lb-next {
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

/* ----------------------------------------------------------------- Care */
.care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.care-card {
    padding: clamp(1.8rem, 3vw, 2.6rem);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.care-card span {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
}
.care-card h2 {
    margin: 1rem 0 1.3rem;
    font-size: 1.4rem;
}
.care-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.8rem;
}
.care-card li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-dim);
    font-size: 0.96rem;
}
.care-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}
.care-card-dark {
    background: var(--surface-sunken);
}
.care-card-red {
    border-color: var(--accent-line);
    background: linear-gradient(180deg, var(--accent-soft), var(--surface-raised));
}
/* --------------------------------------------------- Pflege: Bildschritte
   Sieben bebilderte Hinweise. Der Text steht bewusst als HTML daneben und
   nicht im Bild: so bleibt er vorlesbar, uebersetzbar, durchsuchbar - und
   auf dem Handy lesbar, weil er umbrechen kann. */
.care-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    margin-top: 2.4rem;
}
.care-step {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
        border-color 0.3s;
}
/* Ein Selektor mehr als noetig, mit Absicht: die Reveal-Regel
   "[data-stagger].in > *" setzt transform:none und steht weiter unten in
   dieser Datei - bei gleicher Spezifitaet wuerde sie den Hover aufheben. */
.care-steps .care-step:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}
.care-step picture {
    display: block;
    /* Feste Proportion, damit beim Laden nichts springt (4:5 wie die Quellen). */
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--surface-sunken);
}
.care-step img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease);
}
.care-step:hover img {
    transform: scale(1.03);
}
.care-step > div {
    padding: 1.4rem 1.5rem 1.6rem;
}
.care-step-phase {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-text);
}
.care-step h3 {
    font-size: 1.08rem;
    margin-bottom: 0.6rem;
}
.care-step p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.94rem;
    line-height: 1.65;
}

.care-note {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.4rem;
    align-items: start;
    padding: 1.8rem;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-lg);
}
.care-note strong {
    color: var(--accent-text);
    letter-spacing: 0.02em;
}
.care-note p {
    margin: 0;
    color: var(--text-dim);
}
.compact-cta {
    text-align: center;
}
.compact-cta h2 {
    font-size: clamp(1.5rem, 3.6vw, 2.8rem);
    margin-bottom: 1.8rem;
}

/* ----------------------------------------------------------- Legal pages */
.legal-page {
    padding-top: clamp(48px, 7vw, 80px);
}
.legal-page h2 {
    font-size: 1.35rem;
    margin: 2.4rem 0 0.8rem;
    color: var(--text);
}
.legal-page h2:first-child {
    margin-top: 0;
}
.legal-page p {
    color: var(--text-dim);
    max-width: 68ch;
}
.legal-page a {
    color: var(--accent-text);
    border-bottom: 1px solid var(--accent);
}
.legal-meta {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
    opacity: 0.7;
}
.legal-meta + h2 {
    margin-top: 1.6rem;
}

/* --------------------------------------------------------------- Footer */
.site-footer {
    background: var(--surface-sunken);
    border-top: 1px solid var(--line);
    padding-top: clamp(56px, 8vw, 90px);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 3.5rem;
}
.footer-grid h2 {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 1.2rem;
}
.footer-grid a {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 2;
    transition: color 0.25s;
}
.footer-grid a:hover {
    color: var(--accent-text);
}
.footer-grid address {
    font-style: normal;
    color: var(--text-dim);
    line-height: 1.7;
    margin-bottom: 0.8rem;
}
.brand-footer .brand-mark {
    /* 116 px entspricht bei doppelter Pixeldichte exakt der Quellgroesse
       von 232 px - darueber wuerde das Logo weich werden. */
    width: 116px;
    height: 116px;
}
.brand-footer .brand-copy small {
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.8rem 0 2.4rem;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    color: var(--text-faint);
}

/* ----------------------------------------------------------- Flash msgs */
.flash-stack {
    position: fixed;
    /* Unter Kopfzeile UND Laufband. Vorher feste 92px - das lag 21px in der
       113px hohen Kopfzeile, sichtbar direkt nach dem Absenden des
       Kontaktformulars. */
    top: calc(var(--kopfzeile-hoehe) + var(--laufband-hoehe) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: min(92%, 480px);
    display: grid;
    gap: 0.6rem;
    padding: 0;
}
.flash {
    padding: 1rem 1.3rem;
    border-radius: var(--radius);
    background: var(--surface-high);
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--accent);
    color: var(--text);
    font-size: 0.92rem;
    box-shadow: var(--shadow);
    animation: flash-in 0.4s var(--ease);
}
.flash-success {
    border-left-color: var(--ok);
}
@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ================================================================ PORTAL */
.test-strip {
    background: var(--accent-soft);
    border-bottom: 1px solid var(--accent-line);
    padding: 0.7rem 0;
}
.test-strip .container {
    display: flex;
    gap: 0.8rem;
    align-items: baseline;
    flex-wrap: wrap;
}
.test-strip strong {
    color: var(--accent-text);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.test-strip span {
    color: var(--text-dim);
    font-size: 0.86rem;
}

.portal-shell {
    padding: clamp(64px, 12vw, 140px) 0 clamp(48px, 9vw, 110px);
    min-height: 80vh;
    min-height: 80svh;
}
.portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}
.portal-topbar h1 {
    font-size: clamp(1.65rem, 4.4vw, 3.2rem);
    margin: 0.4rem 0;
}
.portal-topbar p {
    color: var(--text-dim);
    margin: 0;
}
.portal-account {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    font-size: 0.9rem;
}
.portal-account a {
    color: var(--text-dim);
    transition: color 0.25s;
}
.portal-account a:hover {
    color: var(--text);
}
.portal-account button {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--text);
    padding: 0.55rem 1.15rem;
    border-radius: 100px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.25s, background 0.25s;
}
.portal-account button:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.project-list {
    display: grid;
    gap: 14px;
}
.project-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    padding: 1.6rem 1.8rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: border-color 0.3s, transform 0.4s var(--ease), background 0.3s;
}
.project-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    background: var(--surface-hover);
}
.project-card-main {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.project-card-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-weight: 700;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.project-card-main h2 {
    font-size: 1.25rem;
    margin: 0.35rem 0 0;
}
.project-card-main p {
    margin: 0.3rem 0 0;
    color: var(--text-dim);
    font-size: 0.92rem;
}
.project-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-faint);
}
.project-card-meta strong {
    color: var(--text);
    font-weight: 600;
}
.status {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    border-radius: 100px;
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
}
.status-new,
.status-open {
    color: var(--info);
    border-color: var(--line-strong);
}
.status-in_progress,
.status-active {
    color: var(--warn);
    border-color: var(--line-strong);
}
.status-done,
.status-closed {
    color: var(--ok);
    border-color: var(--line-strong);
}
.unread-badge {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
}
.portal-empty,
.empty-public {
    text-align: center;
    padding: clamp(3rem, 8vw, 6rem) 1.5rem;
    background: var(--surface-raised);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-lg);
}
.portal-empty span,
.empty-public .empty-symbol,
.empty-public span {
    display: inline-block;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--accent-text);
    margin-bottom: 1rem;
}
.portal-empty h2,
.empty-public h2 {
    margin-bottom: 0.8rem;
}
.portal-empty p,
.empty-public p {
    color: var(--text-dim);
    max-width: 46ch;
    margin-inline: auto;
}

/* Projektansicht / Chat */
.project-header {
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--line);
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-dim);
    margin-bottom: 1.6rem;
    transition: color 0.25s;
}
.back-link:hover {
    color: var(--accent-text);
}
.project-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    flex-wrap: wrap;
}
.project-title-row h1 {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    margin: 0.5rem 0 0;
}
.project-facts {
    display: flex;
    gap: 2rem;
}
.project-facts small {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 0.3rem;
}
.project-facts strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.project-description {
    margin-top: 1.6rem;
    color: var(--text-dim);
    max-width: 70ch;
}
.chat-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
.chat-panel {
    display: flex;
    flex-direction: column;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 520px;
}
.chat-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-bottom: 1px solid var(--line);
}
.chat-heading h2 {
    font-size: 1.2rem;
    margin: 0;
}
.connection-state {
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ok);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.connection-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.18);
}
.chat-log {
    flex: 1;
    overflow-y: auto;
    max-height: 56vh;
    max-height: 56svh;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.chat-message {
    max-width: 80%;
    padding: 1rem 1.2rem;
    background: var(--surface-high);
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
}
.chat-message.mine {
    align-self: flex-end;
    background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft));
    border-color: var(--accent-line);
    border-radius: 14px 14px 4px 14px;
}
.message-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.76rem;
    color: var(--text-faint);
}
.message-meta strong {
    color: var(--text);
}
.chat-message p {
    margin: 0;
    font-size: 0.96rem;
}
.attachment-list {
    margin-top: 0.8rem;
    display: grid;
    gap: 0.5rem;
}
.attachment-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color 0.25s;
}
.attachment-list a:hover {
    border-color: var(--accent);
}
.file-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 50%;
    flex-shrink: 0;
}
.attachment-list small {
    display: block;
    color: var(--text-faint);
    font-size: 0.74rem;
}
.chat-empty {
    margin: auto;
    text-align: center;
    color: var(--text-dim);
}
.chat-empty span {
    font-size: 2rem;
    color: var(--accent-text);
}
.message-composer {
    border-top: 1px solid var(--line);
    padding: 1.2rem 1.6rem 1.4rem;
    background: var(--surface);
}
.message-composer textarea {
    width: 100%;
    min-height: 70px;
    margin-bottom: 1rem;
}
.composer-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.file-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--line-strong);
    border-radius: 100px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.25s;
}
.file-button:hover {
    border-color: var(--accent);
}
.selected-files {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin-right: auto;
}
.composer-error {
    margin-top: 0.8rem;
    color: var(--accent-text);
    font-size: 0.85rem;
}
.project-sidebar {
    display: grid;
    gap: 14px;
}
.sidebar-card {
    padding: 1.6rem;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.sidebar-card h2 {
    font-size: 1.15rem;
    margin: 0 0 0.7rem;
}
.sidebar-card p {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin: 0 0 0.6rem;
}
.sidebar-help a {
    display: block;
    color: var(--accent-text);
    font-weight: 500;
    margin-top: 0.3rem;
}
.sidebar-help a:hover {
    color: var(--accent-text);
}

/* --------------------------------------------------------------- Auth */
.auth-body {
    background: radial-gradient(80% 100% at 50% 0%, var(--accent-soft), transparent 55%),
        var(--surface);
}
.auth-section {
    min-height: calc(100vh - var(--kopfzeile-hoehe) - var(--laufband-hoehe));
    min-height: calc(100svh - var(--kopfzeile-hoehe) - var(--laufband-hoehe));
    display: grid;
    place-items: center;
    padding: clamp(64px, 12vw, 130px) var(--gutter) 60px;
}
.auth-card {
    width: 100%;
    max-width: 440px;
    padding: clamp(2rem, 4vw, 3rem);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.auth-card-head {
    text-align: center;
    margin-bottom: 2rem;
}
.auth-card-head .brand-mark {
    margin: 0 auto 1.5rem;
    width: 168px;
    height: 168px;
}
.auth-card-head .eyebrow {
    justify-content: center;
}
.auth-card-head h1 {
    font-size: 2rem;
    margin-bottom: 0.6rem;
}
.auth-card-head p {
    color: var(--text-dim);
    margin: 0;
}
.test-banner {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
}
.test-banner strong {
    color: var(--accent-text);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.test-banner span {
    color: var(--text-dim);
    font-size: 0.84rem;
}
.auth-help {
    margin: 1.6rem 0 0;
    text-align: center;
    font-size: 0.84rem;
    color: var(--text-faint);
}
.auth-help a {
    color: var(--accent-text);
    border-bottom: 1px solid var(--accent);
}

/* --------------------------------------------------- Passwort ändern */
.simple-form {
    max-width: 480px;
}
.simple-form ul,
.helptext {
    color: var(--text-faint);
    font-size: 0.82rem;
}

/* ------------------------------------------------------ Display-Typografie
   Eine Schrift, aber die grossen Grade laufen schwer und eng - daraus kommt
   die Wucht, nicht aus einer zweiten Schriftfamilie. */
.hero h1,
.split-head h2,
.section-heading h2,
.split-intro h2,
.page-hero h1,
.statement h3,
.contact-copy h2 {
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.94;
}
.hero h1 {
    letter-spacing: -0.045em;
    line-height: 0.9;
}

/* --------------------------------------------------------- Stencil-Moment
   Die Ueberschrift kommt als violette Kontur an - wie ein frisch aufgelegtes
   Transferbild - und setzt sich dann in massive Tinte. Ein einziger
   orchestrierter Moment; alles andere auf der Seite bleibt still. */
@keyframes stencilFuellt {
    0% {
        color: transparent;
        -webkit-text-stroke: 1px var(--accent-text);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    55% {
        color: transparent;
        -webkit-text-stroke: 1px var(--accent-text);
    }
    100% {
        color: var(--text);
        -webkit-text-stroke: 1px transparent;
    }
}
.hero h1 .line > * {
    animation: zeileAuf 1s var(--ease) both, stencilFuellt 2.4s var(--ease) both;
}
.hero h1 .line:nth-child(2) > * {
    animation-delay: 0.12s, 0.42s;
}

/* ---------------------------------------------------------- Reveal anim
   Der verborgene Startzustand gilt NUR, wenn JavaScript ausgeführt werden
   kann – denn nur dann kommt jemand, der ihn wieder aufhebt. Ohne Skripte
   (oder in Browsern, die diese Abfrage nicht kennen) greift der Block gar
   nicht und der Inhalt ist von Anfang an sichtbar. */
@media (scripting: enabled) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    }

    /* Gestaffelte Enthüllung der Kinder eines Containers */
    [data-stagger] > * {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }
}
[data-reveal].in {
    opacity: 1;
    transform: none;
}
[data-stagger].in > * {
    opacity: 1;
    transform: none;
}

/* Hero-Einblendung beim Laden */
@keyframes heroUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.hero-inner > * {
    animation: heroUp 0.9s var(--ease) both;
}
.hero-kicker {
    animation-delay: 0.05s;
}
.hero h1 {
    animation-delay: 0.16s;
}
.hero-lead {
    animation-delay: 0.34s;
}
.hero-actions {
    animation-delay: 0.48s;
}

/* Langsamer Ken-Burns-Zoom im Hero-Hintergrund */
@keyframes kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.12);
    }
}
.hero-media video,
.hero-media img {
    animation: kenburns 24s ease-out both;
}

/* Scroll-Fortschrittsleiste */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-deep));
    box-shadow: 0 0 12px var(--accent-glow);
    z-index: 300;
    transition: width 0.12s linear;
}

/* Dezenter Lichtschimmer über dem Primär-Button */
.button-primary {
    position: relative;
    overflow: hidden;
}
.button-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent
    );
    transform: skewX(-18deg);
    transition: left 0.7s var(--ease);
}
.button-primary:hover::after {
    left: 140%;
}

/* ==========================================================================
   Moderne Bewegung
   Alles hier ist zusaetzlich und faellt sauber aus, wo der Browser noch nicht
   mitmacht. Grundsatz: ruhig statt sprunghaft - die Seite handelt von einem
   Ritual, nicht von einem Feuerwerk.
   ========================================================================== */

/* --------------------------------------------------- Seitenuebergaenge
   Beim Klick auf einen Link blendet die alte Seite in die neue ueber, statt
   hart umzuspringen. Eine Regel, kein JavaScript; Browser ohne Unterstuetzung
   navigieren einfach wie bisher. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root) {
    animation: vtRaus 0.28s var(--ease) both;
}
::view-transition-new(root) {
    animation: vtRein 0.42s var(--ease) both;
}
@keyframes vtRaus {
    to {
        opacity: 0;
    }
}
@keyframes vtRein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

/* Die Kopfzeile soll beim Uebergang stehenbleiben, nicht mitblenden. */
.site-header {
    view-transition-name: kopfzeile;
}

/* ------------------------------------------ Zeilenweise Hero-Enthuellung
   Jede Zeile steigt hinter einer Maske hervor - der klassische, ruhige
   Editorial-Effekt. Braucht die verschachtelten <span> im Markup. */
.hero h1 .line {
    display: block;
    overflow: hidden;
}
.hero h1 .line > * {
    display: block;
    animation: zeileAuf 1s var(--ease) both;
}
.hero h1 .line:nth-child(2) > * {
    animation-delay: 0.12s;
}
@keyframes zeileAuf {
    from {
        transform: translateY(105%);
    }
}

/* --------------------------------------------- Scroll-getriebene Bewegung
   animation-timeline laeuft im Compositor: kein Scroll-Listener, kein Ruckeln.
   Streng in @supports gekapselt - sonst blieben Elemente in aelteren Browsern
   unsichtbar liegen. */
@supports (animation-timeline: view()) {
    /* Bilder wandern langsam durch ihren Rahmen, waehrend man scrollt.
       Bewusst das <img> INNERHALB der Kachel: die Kachel selbst wird bereits
       vom JavaScript-Reveal (data-stagger) eingeblendet - zwei Mechanismen
       auf demselben Element wuerden sich gegenseitig ueberschreiben. */
    .masonry .shot img,
    .category-tile img {
        animation: bildWandert linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
        /* Kein will-change: Das Archiv zeigt bis zu 111 Bilder gleichzeitig -
           so viele Compositor-Ebenen kosten mehr Speicher als sie bringen.
           Scroll-getriebene Animationen laufen ohnehin im Compositor. */
    }
    @keyframes bildWandert {
        from {
            transform: scale(1.1) translateY(-2.5%);
        }
        to {
            transform: scale(1.1) translateY(2.5%);
        }
    }

    /* Ruhiges Parallax: der Hero-Hintergrund wandert langsamer als die Seite. */
    .hero-media video,
    .hero-media img {
        animation: kenburns 24s ease-out both, heroParallax linear both;
        animation-timeline: auto, view();
        animation-range: normal, cover 0% cover 100%;
    }
    @keyframes heroParallax {
        to {
            transform: translateY(9%) scale(1.12);
        }
    }

    /* Die Fortschrittsleiste kommt ohne JavaScript aus. */
    .scroll-progress {
        width: 100%;
        transform-origin: 0 50%;
        transform: scaleX(0);
        transition: none;
        animation: fortschritt linear both;
        animation-timeline: scroll(root block);
    }
    @keyframes fortschritt {
        to {
            transform: scaleX(1);
        }
    }
}

/* ------------------------------------------------ Weiches Oeffnen der Lightbox
   Das Bild waechst beim Oeffnen leicht heran. Bewusst ueber die .open-Klasse
   und nicht ueber @starting-style: die Lightbox liegt dauerhaft im DOM und
   schaltet nur visibility um - @starting-style wuerde dabei nie ausloesen. */
.lightbox img {
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.lightbox.open img {
    opacity: 1;
    transform: scale(1);
}

/* --------------------------------------------------------- Ruhebeduerfnis
   Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt die
   Inhalte sofort und vollstaendig - ohne Ausnahme. */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal],
    [data-stagger] > * {
        opacity: 1;
        transform: none;
    }
    .hero-inner > *,
    .hero-media video,
    .hero-media img,
    .hero h1 .line > * {
        animation: none !important;
        color: var(--text) !important;
        -webkit-text-stroke: 1px transparent !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .masonry .shot img,
    .category-tile img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .lightbox img {
        opacity: 1;
        transform: none;
    }
    /* Die tätowierende Nadel steht still - und in ihrer Grundausrichtung,
       nicht in einem eingefrorenen Schräg-Zwischenstand. */
    .split-intro > .eyebrow[data-nadel] {
        animation: none !important;
        transform: rotate(180deg) !important;
    }
    .einstich i {
        animation: none !important;
        opacity: 0 !important;
    }
    /* Rein dekorativ - ohne Bewegung hat die Leiste keinen Zweck.
       (Nicht auf transform:none setzen: das ergaebe einen dauerhaft
       vollbreiten Balken.) */
    .scroll-progress {
        display: none;
    }
    /* Laufband anhalten: Der Text bleibt lesbar stehen, statt zu wandern.
       Nur der erste Abschnitt wird gezeigt - die uebrigen sind Wiederholungen
       fuer den nahtlosen Lauf und waeren hier nur Dopplung. */
    .announce-track {
        animation: none !important;
        width: 100%;
    }
    .announce-item:not(:first-child) {
        display: none;
    }
    .announce-item {
        white-space: normal;
    }
    /* Umbrechender Text passt nicht in die feste Hoehe. */
    .announce {
        height: auto;
        min-height: var(--laufband-hoehe);
        padding-block: 0.5rem;
    }
    .announce-item::after {
        content: none;
    }
    /* Seitenuebergaenge ganz abschalten. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
    @view-transition {
        navigation: none;
    }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 960px) {
    :root {
        /* Vorher blieb die Kopfzeile auch auf dem Telefon 112px hoch. Mit dem
           Laufband darunter waren das ~24 % eines 640px-Displays, bevor
           Inhalt kam. */
        --kopfzeile-hoehe: 72px;
    }
    /* Das Logo war mit 96px nie verkleinert worden - zusammen mit Schriftzug
       und Menueknopf lief die Kopfzeile auf 320px-Geraeten ueber. */
    .brand-mark {
        width: 52px;
        height: 52px;
    }
    .brand {
        gap: 0.6rem;
    }
    .brand-copy strong {
        font-size: 0.92rem;
    }
    .brand-copy small {
        font-size: 0.6rem;
        letter-spacing: 0.14em;
    }
    .hero-inner {
        /* Bezieht sich auf die tatsaechliche Kopfzeile statt auf feste 120px. */
        padding-top: calc(var(--kopfzeile-hoehe) + 2rem);
    }

    .nav-toggle {
        display: flex;
    }
    .site-nav {
        position: fixed;
        inset: calc(var(--kopfzeile-hoehe) + var(--laufband-hoehe)) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 1rem var(--gutter) 2rem;
        background: rgba(11, 10, 12, 0.98);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--line);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    }
    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    .site-nav a {
        padding: 1rem 0;
        font-size: 1.05rem;
        border-bottom: 1px solid var(--line);
    }
    .site-nav a::after {
        display: none;
    }
    .nav-portal {
        margin-top: 1rem;
        text-align: center;
        padding: 0.9rem;
    }
    .split-intro,
    .split-head,
    .contact-grid,
    .portal-teaser-inner,
    .chat-layout {
        grid-template-columns: 1fr;
    }
    /* Mitlaufende Labels ergeben nur neben einer zweiten Spalte Sinn. */
    .split-label,
    .split-intro > .eyebrow {
        position: static;
    }
    .split-label .eyebrow,
    .split-intro > .eyebrow {
        writing-mode: horizontal-tb;
        transform: none;
        letter-spacing: 0.28em;
    }
    .split-label {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        width: 100%;
    }
    .feature-grid,
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .masonry {
        columns: 2;
    }
    .statements,
    .process-grid,
    .care-grid {
        grid-template-columns: 1fr;
    }
    .style-thumb {
        display: none;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .project-facts {
        gap: 1.5rem;
    }
}

@media (max-width: 560px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .feature-grid,
    .category-grid {
        grid-template-columns: 1fr;
    }
    .masonry {
        columns: 1;
    }
    /* Zwei Spalten statt einer: neun Bilder untereinander wären auf dem
       Telefon eine 3.600 px lange Strecke. */
    .work-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .feature-card.wide,
    .feature-card.tall {
        grid-column: auto;
        grid-row: auto;
        aspect-ratio: 3 / 4;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .hero-meta {
        gap: 1.6rem;
    }
    .style-row {
        grid-template-columns: auto 1fr;
    }
    .style-row .go {
        display: none;
    }

    /* Gesperrte Versalien bei 10,5–11,5 px sind auf einem Telefon mühsam.
       Mehr Grundgröße, weniger Sperrung – nicht umgekehrt. */
    .eyebrow,
    .footer-grid h2,
    .hero-kicker {
        font-size: 0.75rem;
        letter-spacing: 0.18em;
    }
    .care-step-phase {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
    }

    /* Pflegekarten kompakt: Bild links, Text rechts. Untereinander mit
       4:5-Bild über die volle Breite ergab rund 3.850 px Scrollstrecke. */
    .care-step {
        display: grid;
        grid-template-columns: 38% 1fr;
        align-items: stretch;
    }
    .care-step picture {
        aspect-ratio: 1 / 1;
        height: 100%;
    }
    .care-step > div {
        padding: 1.1rem 1.2rem;
        align-self: center;
    }
    .care-step h3 {
        font-size: 1rem;
    }
    .care-step p {
        font-size: 0.88rem;
    }

    /* Kontaktdaten etwas kleiner – schafft Luft für die lange E-Mail-Adresse. */
    .contact-details a,
    .contact-details span {
        font-size: 1rem;
    }

    /* Das Logo auf der Login-Seite nahm mit 168 px fast die halbe Breite ein. */
    .auth-card-head .brand-mark {
        width: 96px;
        height: 96px;
        margin-bottom: 1rem;
    }
}