/* ==========================================================================
   Needle & Ink – helles, warmes Design
   Eine Schriftart: Inter (variabel, lokal ausgeliefert).
   ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin.260c81a4759b.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, 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: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---------------------------------------------------------- Flaechen
       Warmes Papier statt Weiss: Tattoo-Fotos sind kontraststark und zeigen
       Hauttoene - auf reinem #fff wirken sie hart und die Haut fahl. */
    --surface: #f4f1ea;          /* Grundflaeche der Seite */
    --surface-sunken: #ece7dd;   /* abgesetzte Baender, ruhige Rhythmuswechsel */
    --surface-raised: #fffdf9;   /* Karten, Formularfelder */
    --surface-hover: #ebe5da;    /* Hover auf hellen Flaechen */
    --surface-high: #ffffff;     /* hoechste Ebene, z. B. Chat-Blasen */
    --surface-contrast: #1a1815; /* Fussbereich - warmes Anthrazit, kein Schwarz */

    --line: rgba(36, 31, 27, 0.12);
    --line-strong: rgba(36, 31, 27, 0.26);

    /* 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(36, 31, 27, 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: #241f1b;             /* Fliesstext, 14,5:1 auf --surface */
    --text-dim: #514a43;         /* Sekundaertext, 7,7:1 */
    --text-faint: #6a615a;       /* Beschriftungen in Kleinschrift, 5,4:1 -
                                    dunkler als urspruenglich geplant, weil
                                    das hellere Grau die 4,5:1 verfehlte */
    --text-on-contrast: #f4f1ea; /* Schrift auf --surface-contrast */

    /* -------------------------------------------------------------- Akzent
       Zwei Rottoene mit Absicht: der helle traegt nur Flaechen, fuer Text
       reicht sein Kontrast auf hellem Grund nicht (3,8:1 statt 4,5:1). */
    --accent: #d1352a;           /* Buttonflaechen - weisse Schrift 4,9:1 */
    --accent-text: #b02a20;      /* Links und Text - 5,8:1 auf --surface */
    --accent-deep: #8f2018;      /* Hover, gedrueckter Zustand */
    --accent-soft: rgba(209, 53, 42, 0.09);   /* zarte Tonflaeche */
    --accent-line: rgba(209, 53, 42, 0.32);   /* Rahmen in Akzentfarbe */
    --accent-glow: rgba(209, 53, 42, 0.28);   /* 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: #1f7a4d;
    --info: #1c5fa8;
    --warn: #8a5a00;
    --danger: #b02a20;

    /* --------------------------------------------------------------- Form */
    --radius: 4px;
    --radius-lg: 10px;
    --shadow: 0 18px 50px -30px rgba(36, 31, 27, 0.35);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);

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

    --font: "Inter", 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;
    letter-spacing: -0.028em;
    line-height: 1.06;
    color: var(--text);
}

p {
    margin: 0 0 1em;
}

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

.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: 26px;
    height: 1px;
    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: #fff;
    padding: 12px 18px;
    border-radius: var(--radius);
    transition: top 0.2s;
}
.skip-link:focus {
    top: 16px;
}

/* --------------------------------------------------------------- Buttons */
.button {
    --btn-bg: var(--accent);
    --btn-fg: #fff;
    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: #fff;
    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(244, 241, 234, 0.80);
    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(244, 241, 234, 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;
    /* Aufgehellt statt abgedunkelt: Das Video liegt jetzt unter dunkler Schrift. */
    filter: grayscale(0.3) contrast(0.92) brightness(1.18);
}
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Heller Schleier, nach unten dichter werdend - dort steht die Schrift.
       Oben bleibt das Video sichtbar, unten geht es in die Seitenfarbe ueber. */
    background: radial-gradient(
            120% 90% at 75% 15%,
            var(--accent-soft),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            rgba(244, 241, 234, 0.30) 0%,
            rgba(244, 241, 234, 0.78) 52%,
            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.15rem, 8.5vw, 8.2rem);
    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;
    /* Traegt jetzt Bedeutung ("das bleibt") und muss lesbar sein. Die
       fruehere Deckkraft von 30 % ergaebe nur 1,87:1. */
    color: var(--text-faint);
}
.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;
}
.section-heading h2,
.split-intro h2 {
    font-size: clamp(1.65rem, 4.3vw, 3.6rem);
    letter-spacing: -0.03em;
}

.split-intro {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: clamp(2rem, 6vw, 6rem);
    align-items: start;
}
.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 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}
.style-row h3 {
    font-size: clamp(1.3rem, 3.4vw, 2.7rem);
    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.4vw, 3.6rem);
    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, 4vw, 3.2rem);
    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: #fff;
    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: #fff;
    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;
}

/* ---------------------------------------------------------- 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 > *,
    .masonry .shot img,
    .category-tile img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .lightbox img {
        opacity: 1;
        transform: none;
    }
    /* 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(244, 241, 234, 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,
    .contact-grid,
    .portal-teaser-inner,
    .chat-layout {
        grid-template-columns: 1fr;
    }
    .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;
    }
    .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;
    }
}