/* ==========================================================================
   neonp — Design System
   Hyper-Digital Neobrutalism + Vibrant Glassmorphism
   Ergänzt style.css (dort liegen die Neon-Kern-Variablen & Auth-Komponenten).
   Wird NACH style.css eingebunden, damit Overrides greifen.
   ========================================================================== */

/* Verhindert horizontales Scrollen durch 100vw-Full-Bleed-Sektionen:
   100vw enthält die Scrollbar-Breite, die Sektionen ragen dadurch am Desktop
   um genau diese Breite heraus (auf Mobil mit Overlay-Scrollbars nicht).
   'clip' kappt das, OHNE einen Scroll-Container zu erzeugen — anders als
   'hidden', das u. a. position:sticky (Editor-Panel) kaputt machen würde. */
html {
    overflow-x: hidden;  /* Fallback für ältere Browser */
    overflow-x: clip;

    /* Reserviert die Rinne der vertikalen Scrollbar dauerhaft. Ohne das
       verschiebt sich jeder zentrierte Container (margin: 0 auto) um die halbe
       Scrollbar-Breite, sobald eine Seite kurz genug ist, um nicht zu scrollen —
       sichtbar z. B. beim Wechsel zwischen den Moderations-Reitern. */
    scrollbar-gutter: stable;
}

:root {
    /* Surface-Ladder (aus DESIGN.md), ergänzt die Neons aus style.css */
    --surface-lowest: #0e0e0e;
    --surface: #131313;
    --surface-container-low: #1c1b1b;
    --surface-container: #201f1f;
    --surface-container-high: #2a2a2a;
    --surface-highest: #353534;

    --on-surface: #e5e2e1;
    --on-surface-variant: #d4c0d7;
    --outline: #9d8ba0;
    --outline-variant: #514255;

    /* Destruktive Aktionen (Fehler-Familie aus DESIGN.md) */
    --color-danger: #ff4d4d;        /* klares Rot, gut lesbar auf Dunkel */
    --color-danger-deep: #93000a;   /* error-container */
    --color-danger-on: #ffffff;

    /* Spacing-Skala (4px-Basis) */
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 48px;
    --container-max: 1440px;

    --transition-snap: 100ms ease;
}

/* --------------------------------------------------------------------------
   Layout-Helfer
   -------------------------------------------------------------------------- */

/* Volle-Breite-Sektion, die aus dem zentrierten <main> ausbricht.
   <main> ist max 1100px breit; .section spannt die volle Viewport-Breite.
   --sbw (Scrollbar-Breite, gesetzt von js/layout-metrics.js) wird abgezogen,
   damit am Desktop nichts horizontal überläuft. Ohne JS: Fallback 0px. */
.section {
    width: calc(100vw - var(--sbw, 0px));
    margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
    padding: 96px 0;
}

.section--tight { padding: 56px 0; }

.section-inner {
    width: min(100% - (2 * var(--margin-mobile)), var(--container-max));
    margin: 0 auto;
}

@media (min-width: 1025px) {
    .section-inner { width: min(100% - (2 * var(--margin-desktop)), var(--container-max)); }
}

.section--lowest { background-color: var(--surface-lowest); }
.section--border-top { border-top: 2px solid var(--color-neutral); }

.eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--color-primary-light);
}

.section-title {
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-neutral);
    margin: 8px 0 12px;
}

.section-lead {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--on-surface-variant);
    max-width: 640px;
}

/* --------------------------------------------------------------------------
   Effekt-Utilities: Glass + harte Neobrutalist-Offsets
   -------------------------------------------------------------------------- */

.glass {
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.neo-shadow { box-shadow: 8px 8px 0 0 var(--color-primary); }
.neo-shadow--cyan { box-shadow: 8px 8px 0 0 var(--color-secondary); }
.neo-shadow--black { box-shadow: 8px 8px 0 0 var(--color-fullk); }

/* Hover-Lift: hebt das Element an und zeigt einen Cyan-Offset darunter */
.neo-lift {
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
.neo-lift:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--color-secondary);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    /* Schattenfarbe für den einheitlichen Hover-Lift (siehe unten). Default
       weiß; Varianten mit eigener Schattenfarbe überschreiben sie. */
    --btn-shadow-color: var(--color-neutral);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 16px 32px;
    border: 2px solid var(--color-neutral);
    border-radius: 0;

    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;

    transition: transform var(--transition-snap), box-shadow var(--transition-snap),
                background-color var(--transition-snap), color var(--transition-snap);
}

.btn:hover { color: inherit; }

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-neutral);
    box-shadow: 6px 6px 0 0 var(--color-neutral);
}
.btn-primary:hover { color: var(--color-neutral); }
.btn-primary:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 0 var(--color-neutral);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-neutral);
}
.btn-ghost:hover {
    background-color: var(--color-primary);
    color: var(--color-neutral);
}
.btn-ghost:active { transform: translate(2px, 2px); }

.btn-cyan {
    background-color: var(--color-secondary);
    color: var(--color-fullk);
    box-shadow: 6px 6px 0 0 var(--color-neutral);
}
.btn-cyan:hover {
    background-color: var(--color-fullk);
    color: var(--color-secondary);
}
.btn-cyan:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 0 var(--color-neutral);
}

/* Destruktiv: löschen/entfernen. Deutlich rot, damit es sich klar von den
   normalen (cyan/lila) Aktionen abhebt. */
.btn-danger {
    --btn-shadow-color: var(--color-danger-deep);
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
    box-shadow: 4px 4px 0 0 var(--color-danger-deep);
}
.btn-danger:hover {
    background-color: var(--color-danger);
    color: var(--color-danger-on);
}
.btn-danger:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 0 var(--color-danger-deep);
}
.btn-danger:focus-visible {
    outline: 2px solid var(--color-danger);
    outline-offset: 3px;
}

/* Quadratischer Icon-Button */
.icon-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2px + on-surface: das 1px/neutral zuvor war auf dem dunklen Grund kaum
       vom Kartenrand zu unterscheiden. */
    border: 2px solid var(--outline);
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
    transition: background-color var(--transition-snap), color var(--transition-snap),
                border-color var(--transition-snap);
}

.icon-btn .icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.icon-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.icon-btn--danger:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #131313;
}

/* ==========================================================================
   Startseite: interaktive Demo, Schritte, Abschluss-CTA
   ========================================================================== */
.hero__fineprint {
    margin-top: 14px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--on-surface-variant);
}

.demo {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 32px;
}

.demo__controls { display: flex; flex-direction: column; gap: 20px; }
.demo__group { display: flex; flex-direction: column; gap: 8px; }
.demo__buttons { display: flex; flex-wrap: wrap; gap: 6px; }

/* Nutzt .span-btn aus dem Editor — bewusst dieselbe Optik wie im echten
   Werkzeug, damit die Demo nicht wie ein Fremdkörper wirkt. */
.demo__buttons .span-btn { min-width: 0; font-size: 12px; padding: 8px 12px; }

.demo__canvas {
    padding: 20px;
    border: 2px solid var(--color-neutral);
    min-height: 380px;
    transition: background var(--transition-snap);
}

.demo__bento { grid-auto-rows: 120px; gap: 12px; }
.demo__bento .tile { padding: 14px; box-shadow: 4px 4px 0 0 var(--color-primary); }
.demo__bento .tile__title { font-size: 16px; }
.demo__bento .tile__meta { font-size: 11px; }
.demo-bento--compact { grid-auto-rows: 90px; }

@media (max-width: 1024px) {
    .demo { grid-template-columns: 1fr; }
    .demo__canvas { min-height: 300px; }
}

/* --- Drei Schritte --- */
.steps {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.step {
    position: relative;
    padding: 24px 20px 20px;
    background: var(--surface-container-low);
    border-left: 4px solid var(--color-secondary);
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--color-secondary);
    color: #131313;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 10px;
}

.step h4 { margin: 0 0 6px; }
.step p { margin: 0; font-size: 15px; color: var(--on-surface-variant); }

.step__url {
    font-family: 'Space Mono', monospace;
    color: var(--color-secondary);
    word-break: break-all;
}

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

/* --- Zahlenband --- */
.numbers { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* --- Abschluss-CTA --- */
.section--cta {
    background-color: var(--color-primary);
    text-align: center;
}

.section--cta__lead {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    max-width: 560px;
    margin: 0 auto 24px;
}

.btn-cta {
    --btn-shadow-color: rgba(0, 0, 0, .35);
    display: inline-block;
    padding: 16px 32px;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 18px;
    background: #131313;
    color: #fff;
    border: 2px solid #131313;
    box-shadow: 8px 8px 0 0 rgba(0, 0, 0, .35);
    text-decoration: none;
}

.btn-cta:hover { background: var(--color-secondary); color: #131313; border-color: #131313; }

.section--cta__sub { margin-top: 18px; font-size: 14px; }
.section--cta__sub a { color: #131313; font-weight: 700; }

/* ==========================================================================
   Profil
   ========================================================================== */
.profile-head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
    margin: 8px 0 8px;
}

.profile-avatar {
    width: 144px;
    height: 144px;
    flex: 0 0 auto;
    border: 3px solid var(--color-primary);
    background: var(--surface-container);
    box-shadow: 8px 8px 0 0 var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-avatar--sm {
    width: 96px;
    height: 96px;
    box-shadow: 4px 4px 0 0 var(--color-primary);
}

.profile-avatar__initial {
    font-family: 'Lexend', sans-serif;
    font-weight: 900;
    font-size: 64px;
    color: var(--color-primary-light);
    user-select: none;
}

.profile-avatar--sm .profile-avatar__initial { font-size: 42px; }

.profile-meta h1 { margin: 0; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.profile-since {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--on-surface-variant);
    margin: 10px 0 0;
}

.profile-bio { margin-top: 32px; max-width: 60ch; }
.profile-bio h2 { font-size: 24px; margin-bottom: 8px; }

.profile-stats { margin-top: 32px; }
.profile-stats h2 { font-size: 24px; margin-bottom: 6px; }
.profile-stats__note {
    font-size: 13px;
    color: var(--on-surface-variant);
    max-width: 60ch;
    margin-bottom: 14px;
}

.profile-stats__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.stat {
    flex: 1 1 150px;
    padding: 16px;
    background: var(--surface-container-low);
    border-left: 4px solid var(--color-secondary);
}

.stat__value {
    display: block;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: var(--color-secondary);
    line-height: 1.1;
}

.stat__label {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--on-surface-variant);
}

/* --- Profil-Einstellungen --- */
.profile-fieldset {
    border: 1px solid var(--outline-variant);
    padding: 16px;
    margin: 0 0 20px;
}

/* Formularblock für zerstörerische Aktionen — optisch abgesetzt, damit er
   nicht versehentlich wie die harmlosen darüber gelesen wird. */
.profile-fieldset--danger {
    border-color: var(--color-danger);
    border-width: 2px;
}

.profile-fieldset legend {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--color-secondary);
    padding: 0 8px;
}

.profile-avatar-current { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }

.avatar-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.avatar-preset { cursor: pointer; display: inline-block; }
.avatar-preset input { position: absolute; opacity: 0; width: 0; height: 0; }

.avatar-preset__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border: 2px solid var(--outline);
    background: var(--surface-container);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--on-surface-variant);
}

.avatar-preset input:checked + .avatar-preset__box {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px var(--color-secondary);
}

.avatar-preset input:focus-visible + .avatar-preset__box {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

.profile-bio-input {
    width: 100%;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    padding: 10px;
    background: var(--color-box-bg);
    border: 2px solid var(--color-neutral);
    color: var(--on-surface);
    resize: vertical;
}

.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    cursor: pointer;
}

.switch-row input { margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 640px) {
    .profile-avatar { width: 104px; height: 104px; }
    .profile-avatar__initial { font-size: 46px; }
}

/* --------------------------------------------------------------------------
   Kompaktes „Neue Seite"-Formular (Dashboard)
   -------------------------------------------------------------------------- */
.create-page {
    margin: 16px 0 32px;
    max-width: 640px;
    padding: 14px 16px;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
}

.create-page__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.create-page__field { flex: 1 1 180px; display: flex; flex-direction: column; gap: 4px; }
.create-page__field--type { flex: 0 1 180px; }
.create-page__field input,
.create-page__field .ds-select { width: 100%; margin-top: 0; font-size: 14px; padding: 8px 10px; }
.create-page__submit { padding: 9px 18px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Aktionsleiste der Dashboard-Karten
   -------------------------------------------------------------------------- */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
}

/* „Zur Seite" ist das eigentliche Ziel — volle Breite, eigene Zeile, oben. */
.card-actions__primary {
    display: block;
    text-align: center;
    padding: 10px 16px;
    font-size: 15px;
}

.card-actions__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.card-actions__btn {
    padding: 8px 14px;
    font-size: 14px;
}

/* Duplizieren + Löschen zusammen, rechts abgesetzt. */
.card-actions__icons {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.card-actions__icons form { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Chips / Badges (die einzigen abgerundeten Elemente = Pillen)
   -------------------------------------------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 2px solid var(--color-primary);

    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-primary-light);
    background: rgba(189, 0, 255, 0.10);
}

.chip--cyan {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background: rgba(0, 240, 255, 0.10);
}

.chip--solid {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: var(--color-fullk);
}

/* Für Zustände, die eine Warnung sind (z. B. gesperrtes Konto). */
.chip--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: #131313;
}

/* Kleiner „Status"-Punkt für Mono-Labels */
.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 9999px;
    background: var(--color-secondary);
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Icons (aus inc-icons.php)
   -------------------------------------------------------------------------- */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* --------------------------------------------------------------------------
   Bento-Grid + Tiles (Anzeige-Klassen; der Editor kommt in einer späteren Stufe)
   -------------------------------------------------------------------------- */

.bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--gutter);
}

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.row-2 { grid-row: span 2; }

.tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    /* Bezugsrahmen für die Affiliate-Ecke (.tile__aff) */
    position: relative;
    overflow: hidden;

    background-color: var(--surface-container);
    border: 2px solid var(--color-neutral);
    color: var(--color-neutral);
    text-decoration: none;

    box-shadow: 8px 8px 0 0 var(--color-primary);
    transition: transform var(--transition-snap), box-shadow var(--transition-snap),
                background-color var(--transition-snap);
}
.tile:hover {
    transform: translate(-4px, -4px);
    box-shadow: 12px 12px 0 0 var(--color-secondary);
    color: var(--color-neutral);
}

.tile__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-neutral);
    font-size: 24px;
    margin-bottom: 16px;
}

.tile__title {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
}

.tile__desc {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin-top: 6px;
}

.tile__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--outline-variant);

    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
}

/* Tile-Design-Varianten (Vorschau der späteren Kachel-Designs) */
.tile--neon {
    background: var(--surface-lowest);
    border-color: var(--color-primary);
    box-shadow: 8px 8px 0 0 var(--color-primary), 0 0 24px rgba(189, 0, 255, 0.35);
}
.tile--glass {
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 8px 8px 0 0 var(--color-secondary);
}
.tile--cyan { background: var(--color-secondary); color: var(--color-fullk); }
.tile--cyan .tile__desc,
.tile--cyan .tile__meta { color: rgba(0, 0, 0, 0.7); }
.tile--purple { background: var(--color-primary); }
.tile--pixel {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 4px),
        var(--surface-container-high);
    image-rendering: pixelated;
}
.tile--text {
    background: var(--surface-container-low);
    justify-content: center;
    box-shadow: 8px 8px 0 0 var(--color-tertiary);
}

/* Diese drei standen bereits in TILE_DESIGNS und waren im Editor auswählbar,
   hatten aber gar keine Gestaltung — wer sie wählte, sah keinen Unterschied. */
.tile--retro {
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 0, 92, .18) 0 10px,
            rgba(255, 145, 0, .18) 10px 20px),
        var(--surface-container);
    border-color: var(--color-tertiary);
    box-shadow: 8px 8px 0 0 var(--color-tertiary);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

.tile--icon {
    background: var(--surface-container-high);
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 8px 8px 0 0 var(--outline);
}

.tile--icon .tile__icon svg { width: 40px; height: 40px; }

/* Hero: fürs große Format gedacht, Titel dominiert. */
.tile--hero {
    background: linear-gradient(145deg, var(--color-primary) 0%, var(--surface-lowest) 70%);
    border-color: var(--color-primary-light);
    justify-content: flex-end;
    box-shadow: 8px 8px 0 0 var(--color-primary-light);
}

.tile--hero .tile__title { font-size: 26px; line-height: 1.15; }

/* --------------------------------------------------------------------------
   Kompakte Link-Liste (Vorschau „kleine Schnellwahl" / „Sammlung")
   -------------------------------------------------------------------------- */

.linklist { display: flex; flex-direction: column; gap: 12px; }

.linklist__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 2px solid var(--color-neutral);
    background: var(--surface);
    color: var(--color-neutral);
    text-decoration: none;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 500;
    transition: background-color var(--transition-snap), color var(--transition-snap);
}
.linklist__item:hover { background: var(--color-neutral); color: var(--color-fullk); }

.linklist__swatch { width: 32px; height: 32px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Affiliate-Transparenz-Hinweis
   -------------------------------------------------------------------------- */

.affiliate-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-low);
    color: var(--on-surface-variant);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Kontaktformular-Ergänzungen (baut auf Input-Styles aus style.css auf)
   -------------------------------------------------------------------------- */

.form-stack { display: flex; flex-direction: column; gap: 20px; max-width: 560px; }

.form-stack label { display: block; }

/* Select im Formularstil (passend zu den Inputs aus style.css) */
.ds-select {
    font-size: 16px;
    margin-top: 8px;
    width: 100%;
    padding: 12px;
    border: 2px solid var(--color-neutral);
    background-color: var(--color-box-bg);
    color: var(--color-neutral);
    font-family: 'Hanken Grotesk', sans-serif;
    cursor: pointer;
}
.ds-select:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 1px var(--color-secondary);
}

.form-stack input[type="text"],
.form-stack input[type="email"] { width: 100%; }

.form-stack textarea {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    margin-top: 8px;
    width: 100%;
    min-height: 160px;
    padding: 12px;
    border: 2px solid var(--color-neutral);
    background-color: var(--color-box-bg);
    color: var(--color-neutral);
    resize: vertical;
}
.form-stack textarea:focus,
.form-stack input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 1px var(--color-secondary);
}

/* Honeypot: für Menschen unsichtbar, Bots füllen es aus */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-message--error {
    border-left: 4px solid var(--color-tertiary);
    padding: 12px 16px;
    background: rgba(255, 0, 92, 0.08);
    color: var(--color-neutral);
}
.form-message--success {
    border-left: 4px solid var(--color-secondary);
    padding: 12px 16px;
    background: rgba(0, 240, 255, 0.08);
    color: var(--color-neutral);
}

/* --------------------------------------------------------------------------
   Rechts-/Content-Seiten (Fließtext)
   -------------------------------------------------------------------------- */

.prose { max-width: 760px; }
.prose h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 12px;
}
.prose h3 {
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 28px 0 8px;
    color: var(--color-neutral);
}
.prose p, .prose li {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--on-surface-variant);
}
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 14px 22px; }
.prose a { text-underline-offset: 3px; }

/* Klar markierter Platzhalter für noch zu prüfende Rechtstexte */
.legal-placeholder {
    display: inline-block;
    padding: 2px 8px;
    border: 1px dashed var(--color-tertiary);
    color: var(--color-tertiary);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
}

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

.hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 40px 0 24px;
}

.hero__badge { margin-bottom: 24px; }

.hero h1 {
    font-size: 72px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.hero__lead {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--on-surface-variant);
    max-width: 520px;
    margin-bottom: 32px;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 20px; }

/* „Floating Visual" — Glas-Panel mit Mini-Kacheln */
.hero__visual {
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-neutral);
    background: var(--surface-lowest);
    padding: 16px;
    box-shadow: 12px 12px 0 0 var(--color-primary);
}
.hero__visual-inner {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 14px;
    padding: 16px;
}
.hero__vt { border: 2px solid var(--color-neutral); background: var(--surface-container-high); }
.hero__vt--primary { background: var(--color-primary); }
.hero__vt--cyan { background: var(--color-secondary); }
.hero__vt--wide { grid-column: span 2; }

/* --------------------------------------------------------------------------
   Grid-Utilities für Feature-/Showcase-Bereiche
   -------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.feature-card {
    padding: 24px;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
}
.feature-card h4 {
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin: 12px 0 8px;
}
.feature-card p {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--on-surface-variant);
}
.feature-card .icon { font-size: 32px; color: var(--color-primary-light); }

/* Showcase-Rahmen für die drei Seitentypen */
.showcase {
    border: 2px solid var(--color-neutral);
    background: var(--surface);
    padding: 48px 24px 24px;
    position: relative;
    height: 100%;
}
.showcase__tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.05em;
    background: var(--color-primary);
    color: var(--color-fullk);
}
.showcase__tag--cyan { background: var(--color-secondary); }
.showcase__tag--pink { background: var(--color-tertiary); color: var(--color-neutral); }
.showcase__caption {
    font-family: 'Lexend', sans-serif;
    font-size: 20px;
    font-weight: 600;
    margin-top: 16px;
}
.showcase__sub {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    color: var(--on-surface-variant);
}

/* ==========================================================================
   Entdecken: Karten für öffentliche Seiten
   ========================================================================== */

.page-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px;

    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    color: var(--color-neutral);
    text-decoration: none;

    box-shadow: 6px 6px 0 0 var(--color-primary);
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
.page-card:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 0 var(--color-secondary);
    color: var(--color-neutral);
}

.page-card__type {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--color-primary-light);
}
.page-card__title {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.25;
    word-break: break-word;
}
.page-card__owner {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--color-secondary);
}
.page-card__meta {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--outline-variant);
    font-size: 13px;
    color: var(--on-surface-variant);
}

/* Zuletzt aktive Nutzer – kompakte Namensliste, bewusst ohne Zeitangaben */
.active-users { margin-top: 48px; }

.active-users__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.active-user {
    display: inline-block;
    padding: 8px 14px;

    border: 2px solid var(--outline-variant);
    background: var(--surface-container);
    color: var(--color-neutral);
    text-decoration: none;

    font-family: 'Space Mono', monospace;
    font-size: 14px;

    transition: transform var(--transition-snap), border-color var(--transition-snap),
                color var(--transition-snap);
}
.active-user:hover {
    transform: translate(-2px, -2px);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* Leerzustand des Verzeichnisses */
.discover-empty {
    padding: 32px;
    border: 2px dashed var(--outline);
    background: var(--surface-container-low);
    text-align: center;
}

/* ==========================================================================
   Öffentliche neonp-Seite (page.php) — minimales Chrome, kein Dashboard
   ========================================================================== */

.pub-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Linksammlung (/tree): rein mobil gedacht. Auf breiten Viewports die ganze Seite
   auf Handy-Breite begrenzen und zentrieren — das Hintergrundbild liegt auf
   .pub-page und füllt damit automatisch nur diese Spalte. Der dunkle body-
   Hintergrund (--color-bg) bildet den ruhigen Rahmen ringsum. margin-inline:auto
   zentriert auch als Flex-Kind (hebt das Stretch auf). Auf Mobil greift die Query
   nicht -> vollflächig wie bisher. */
@media (min-width: 640px) {
    .pub-page--hub {
        width: 430px;
        max-width: 100%;
        /* flex:none hebt das `flex:1` aus .pub-page auf — sonst zieht flex-grow
           die Karte im Flex-Body (footer.css: body{display:flex}) trotz
           min-height auf die volle Viewport-Höhe. margin:auto zentriert die
           Karte dann waag- UND senkrecht im dunklen Rahmen. */
        flex: none;
        margin: auto;
        /* Höhe an das Hintergrundbild koppeln: die Motive sind 941×1672 (9:16).
           Bei 430px Breite passt das Bild bei ~760px Höhe unbeschnitten hinein –
           die Karte sieht damit aus wie ein echtes Smartphone. min-height statt
           height: Profile mit vielen Kacheln dürfen nach unten wachsen, damit
           nichts abgeschnitten wird. */
        min-height: 760px;
    }
}

.pub-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}
.pub-brand {
    font-family: 'Lexend', sans-serif;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 1px;
    color: var(--color-primary-light);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.pub-main {
    flex: 1;
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
    padding: 32px 0 64px;

    /* WICHTIG: style.css setzt für <main> eine Hintergrundfarbe. Ohne dieses
       Zurücksetzen läge eine graue Fläche über dem eingestellten Seitenhintergrund. */
    background: transparent;
}
.pub-title {
    font-family: 'Lexend', sans-serif;
    font-weight: 900;
    font-size: 44px;
    line-height: 1.1;
    color: var(--color-neutral);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    word-break: break-word;
}
.pub-owner {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    margin: 8px 0 32px;
    color: var(--color-neutral);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.pub-owner a { color: var(--color-secondary); }

/* Im Hub steht der Profilkopf schon oben — die Autorenzeile rückt darunter
   und wird zur dezenten Fußnote statt zur Überschrift. */
.pub-owner--hub {
    max-width: 640px;
    margin: 0 auto 20px;
    text-align: center;
    font-size: 13px;
    opacity: 0.85;
}

/* Rückweg-Link neben der Besitzer-Angabe */
.pub-back {
    display: inline-block;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.pub-back a { color: var(--color-neutral); opacity: 0.9; }
.pub-back a:hover { opacity: 1; color: var(--color-secondary); }

/* "7× gespeichert" neben dem Autor — nur wenn es überhaupt Speicherungen gibt. */
.pub-savecount {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--outline-variant);
    color: var(--on-surface-variant);
}

/* Seite-speichern-Aktion auf öffentlichen Seiten */
.pub-save {
    margin: -20px 0 28px;
}

.pub-save__btn {
    padding: 8px 16px;
    font-size: 14px;
}

.pub-bento { grid-auto-rows: 160px; }

.pub-empty,
.pub-affiliate {
    color: var(--color-neutral);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.pub-affiliate { margin-top: 28px; max-width: 640px; }

.pub-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 20px 24px 32px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
}
.pub-footer a {
    color: var(--color-neutral);
    opacity: 0.85;
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.pub-footer a:hover { opacity: 1; color: var(--color-secondary); }

/* ==========================================================================
   Lightbox — Profilbilder u. a. klickbar etwas größer ansehen (js/lightbox.js)
   ========================================================================== */
.js-zoomable { cursor: zoom-in; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.82);
    opacity: 0;
    transition: opacity 140ms ease;
}
/* `display:flex` oben schlägt sonst das UA-`[hidden]{display:none}`. */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
    position: relative;
    margin: 0;
    line-height: 0;
}
.lightbox__img {
    display: block;
    width: min(320px, 80vw);
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    border: 3px solid var(--color-neutral);
    box-shadow: 8px 8px 0 0 var(--color-primary);
    background: var(--color-box-bg, #131313);
}
.lightbox__close {
    position: absolute;
    top: -16px;
    right: -16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    color: #131313;
    background: var(--color-secondary);
    border: 3px solid var(--color-neutral);
    cursor: pointer;
}
.lightbox__close:hover { background: var(--color-primary-light); }

/* Scroll des Hintergrunds sperren, solange die Lightbox offen ist. */
.lightbox-open { overflow: hidden; }

/* /tree-Footer: „Erstellt mit neonp" oben, Rechts-Links darunter (zwei Zeilen). */
.pub-footer--hub { flex-direction: column; gap: 6px; }
.pub-footer--hub .pub-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Werkzeug-Links im Dashboard (Shortener u. a. – bewusst nicht in der Hauptnav) */
/* Sitzt am Fuß des Dashboards -> Abstand nach oben statt nach unten. */
.dash-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 48px 0 8px;
    padding-top: 24px;
    border-top: 1px solid var(--outline-variant);
}
.dash-tools__link { padding: 8px 18px; font-size: 14px; }

/* Hinweisbanner, wenn Staff eine nicht-öffentliche Seite ansieht */
.staff-peek {
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 2px dashed var(--color-danger);
    background: rgba(147, 0, 10, 0.35);
    color: var(--color-neutral);
    font-size: 14px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.staff-peek a { color: var(--color-secondary); }

/* ==========================================================================
   Moderations-Einblick auf Profilseiten (nur Staff)
   ========================================================================== */

.staff-panel {
    margin-top: 48px;
    padding: 24px;
    border: 2px dashed var(--color-danger);
    background: var(--surface-container-low);
}
.staff-panel > h2 {
    font-size: 24px;
    margin: 0 0 6px;
    color: var(--color-danger);
}
.staff-panel__note {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin: 0 0 20px;
}

.staff-page {
    border: 2px solid var(--outline-variant);
    background: var(--surface-container);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.staff-page__head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
}
.staff-page__title {
    display: inline-block;
    margin-left: 8px;
    font-family: 'Lexend', sans-serif;
    font-size: 18px;
    color: var(--color-neutral);
}
.staff-page__meta {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 4px;
    word-break: break-all;
}
.staff-page__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.staff-page__empty { font-size: 13px; color: var(--on-surface-variant); margin: 12px 0 0; }

.staff-links { list-style: none; margin: 12px 0 0; padding: 0; }
.staff-link {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--outline-variant);
}
.staff-link__info { min-width: 0; }
.staff-link__title {
    display: block;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    font-size: 14px;
}
.staff-link__url {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--color-secondary);
    word-break: break-all;
}
.staff-link__meta { font-size: 11px; color: var(--on-surface-variant); }

/* ==========================================================================
   Moderation: Reiter, Nutzersuche, Nutzerliste
   ========================================================================== */

.mod-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 16px 0 24px;
    border-bottom: 2px solid var(--outline-variant);
}
.mod-tab {
    padding: 12px 22px;
    border: 2px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;

    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color var(--transition-snap), background-color var(--transition-snap);
}
.mod-tab:hover { color: var(--color-neutral); background: var(--surface-container-low); }
.mod-tab.is-active {
    border-color: var(--outline-variant);
    border-bottom: 2px solid var(--color-bg);
    background: var(--surface-container);
    color: var(--color-secondary);
}

.mod-search {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
    margin-bottom: 24px;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
}
.mod-search input[type="text"] { width: 100%; }

.mod-details {
    border: 2px solid var(--outline-variant);
    background: var(--surface-container-low);
    padding: 12px 16px;
    margin-bottom: 12px;
}
.mod-details > summary {
    cursor: pointer;
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-neutral);
}
.mod-details > summary:hover { color: var(--color-secondary); }
.mod-details__hint {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    color: var(--on-surface-variant);
    margin-left: 8px;
}

.mod-user-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.mod-user {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.mod-user__main { min-width: 0; flex: 1 1 280px; }
.mod-user__name {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 17px;
}
.mod-user__name a { color: var(--color-neutral); text-decoration: none; }
.mod-user__name a:hover { color: var(--color-secondary); }
.mod-user__mail {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--color-secondary);
    word-break: break-all;
}
.mod-user__meta {
    font-size: 12px;
    color: var(--on-surface-variant);
    margin-top: 2px;
}
.mod-user__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mod-user__chips .chip { font-size: 11px; padding: 4px 10px; }

/* ==========================================================================
   Linksammlung als Social-Media-Hub (Linktree-Stil)
   --------------------------------------------------------------------------
   Profilkopf zur Wiedererkennung, darunter eine schmale Spalte gestapelter
   Links. Bewusst schmal: diese Seiten werden fast nur aus Social-Media-Bios
   heraus auf dem Handy geöffnet.
   ========================================================================== */

.hub-head {
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}

/* Speichern-Button und Partnerhinweis auf die Spaltenbreite ziehen. */
.pub-main--hub .pub-save,
.pub-main--hub .pub-affiliate {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.hub-avatar {
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    object-fit: cover;
    border: 3px solid var(--color-neutral);
    box-shadow: 6px 6px 0 0 var(--color-primary);
    background: var(--surface-container);
}
.hub-avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 42px;
    color: var(--color-neutral);
}

.hub-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 1.15;
    margin: 0;
    color: var(--color-neutral);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    word-break: break-word;
}
.hub-title {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-secondary);
    margin: 6px 0 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hub-bio {
    font-size: 15px;
    line-height: 1.55;
    max-width: 460px;
    margin: 12px auto 0;
    color: var(--color-neutral);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Einklappbare Bio (nur Linksammlung/Hub): eingeklappt nur ~2 Zeilen als Teaser,
   Rest per "mehr" ausklappen. Reiner CSS-Checkbox-Hack, kein JS. Der volle Text
   bleibt immer im DOM — Screenreader lesen ihn komplett, die Kürzung ist rein
   visuell. Reihenfolge im HTML: Checkbox -> .hub-bio -> Label (für die ~-Selektoren). */
.hub-bio--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hub-bio-toggle:checked ~ .hub-bio--clamp {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.hub-bio-more {
    display: inline-block;
    margin: 6px auto 0;
    cursor: pointer;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--color-secondary);
    text-decoration: underline;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hub-bio-more::after { content: "mehr lesen"; }
.hub-bio-toggle:checked ~ .hub-bio-more::after { content: "ausblenden"; }
.hub-bio-toggle:focus-visible ~ .hub-bio-more {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Preset-Auswahl der Linksammlung im Builder: Klick-Grid mit Thumbnails. */
.tree-bg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 6px;
}
.tree-bg-item {
    position: relative;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
.tree-bg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tree-bg-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--color-secondary);
}
.tree-bg-item.is-active {
    border-color: var(--color-secondary);
    box-shadow: 4px 4px 0 0 var(--color-secondary);
}
.tree-bg-item:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* --- /tree Hintergrund: Panel-Trigger (aktuelle Auswahl + „wählen") ---------- */
.tree-bg-current {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    color: var(--color-neutral);
    background: var(--surface-container);
    border: 2px solid var(--color-neutral);
    box-shadow: 4px 4px 0 0 var(--color-primary);
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
.tree-bg-current:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 var(--color-secondary);
}
.tree-bg-current:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}
.tree-bg-current img {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    object-fit: cover;
    border: 2px solid var(--color-neutral);
}
.tree-bg-current__empty {
    flex: 1;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--on-surface-variant);
}
.tree-bg-current__cta {
    margin-left: auto;
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-secondary);
}

/* --- /tree Hintergrund-Galerie (Overlay) ------------------------------------ */
.bg-gallery {
    position: fixed;
    inset: 0;
    z-index: 80;                     /* über dem Editor-Sheet (z-index 60) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--transition-snap, 120ms ease);
}
.bg-gallery.is-open { opacity: 1; }
.bg-gallery[hidden] { display: none; }

.bg-gallery__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: 88vh;
    padding: 20px;
    background: var(--surface-container, #1a1a1a);
    border: 2px solid var(--color-neutral);
    box-shadow: 10px 10px 0 0 var(--color-primary);
}
.bg-gallery__panel > h3 {
    margin: 0 40px 12px 0;
    font-family: 'Lexend', sans-serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--color-neutral);
}
.bg-gallery__close {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    color: var(--color-neutral);
    font-size: 28px;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
}

/* Themen-Reiter */
.bg-gallery__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--outline-variant, rgba(255, 255, 255, 0.15));
}
.bg-gallery__tab {
    padding: 6px 14px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--on-surface-variant);
    background: none;
    border: 2px solid transparent;
    cursor: pointer;
}
.bg-gallery__tab:hover { color: var(--color-neutral); }
.bg-gallery__tab.is-active {
    color: var(--color-neutral);
    border-color: var(--color-secondary);
}
.bg-gallery__tab:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Körper: Grid links, große Vorschau rechts */
.bg-gallery__body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    margin-top: 14px;
    min-height: 0;                   /* erlaubt internes Scrollen des Grids */
    flex: 1;
}
.bg-gallery__body .tree-bg-grid {
    overflow-y: auto;
    align-content: start;
    margin: 0;
    padding-right: 4px;
}
.bg-gallery__preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    min-width: 0;
}
.bg-gallery__preview img {
    width: 100%;
    max-height: 46vh;
    object-fit: contain;
    background: #131313;
    border: 2px solid var(--color-neutral);
}
.bg-gallery__preview-cap {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--on-surface-variant);
    overflow-wrap: anywhere;
}

.bg-gallery__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .bg-gallery { padding: 0; }
    .bg-gallery__panel {
        width: 100%;
        max-height: 100vh;
        height: 100vh;
        box-shadow: none;
        border: 0;
    }
    /* Vorschau nach oben, Grid darunter — auf schmalen Screens besser bedienbar. */
    .bg-gallery__body {
        grid-template-columns: 1fr;
    }
    .bg-gallery__preview { order: -1; }
    .bg-gallery__preview img { max-height: 30vh; }
}

/* "Jetzt gerade" — kurzlebiger Status, läuft serverseitig automatisch ab. */
.hub-status {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 8px 14px;
    border: 2px solid var(--color-secondary);
    background: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    color: var(--color-neutral);
}
.hub-status--inline { margin: 10px 0 0; }
/* Linksammlung: Status in voller Kachelbreite über den Links — dieselbe Breite
   wie .bento--hub (width:100% / max-width:640px / mittig), damit er bündig über
   den Kacheln sitzt und mehr Platz für den Text bietet. */
.hub-status--block {
    display: flex;
    width: 100%;
    max-width: 640px;
    margin: 4px auto 14px;
    justify-content: flex-start;
}
.hub-status__dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 8px var(--color-secondary);
}
.hub-status__label {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
}
.hub-status__text { font-weight: 600; overflow-wrap: anywhere; }

/* Gestapelte Links.
   WICHTIG — doppelte Klasse (.bento.bento--hub) ist Absicht: weiter unten in
   dieser Datei stehen Mobile-Breakpoints mit `.bento { grid-template-columns:
   repeat(2,1fr); grid-auto-rows:180px }`. Bei gleicher Spezifität gewinnt die
   spätere Regel — der Hub wäre auf Mobil wieder zweispaltig mit 180px hohen
   Kacheln geworden. Die zweite Klasse hebt uns darüber, ohne den Block ans
   Dateiende verschieben zu müssen.
   Die .tile-Regeln sind aus demselben Grund zweiklassig (schlagen .span-*). */
.bento.bento--hub {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(66px, auto);
    gap: 14px;
    /* width:100% ist Pflicht, nicht Deko: .pub-main--hub ist ein Column-Flex-
       Container, und `margin: 0 auto` sind auf der Querachse eines Flex-Items
       Auto-Margins. Die schalten das Stretch ab und lassen den Grid auf seine
       Inhaltsbreite (fit-content) schrumpfen — die Links wurden dadurch nur
       ~120px "dünn". Mit width:100% füllt die Spalte wieder ihre max-width. */
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.bento--hub .tile {
    grid-column: 1 / -1;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    min-height: 66px;
}
.bento--hub .tile > div {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.bento--hub .tile__title {
    font-size: 17px;
    overflow-wrap: anywhere;
}
.bento--hub .tile__icon { flex: 0 0 auto; }
.bento--hub .tile__meta { flex: 0 0 auto; opacity: 0.75; }

@media (max-width: 640px) {
    .bento--hub .tile__meta { display: none; }  /* Platz für den Titel */
    .hub-avatar { width: 80px; height: 80px; }
    .hub-name { font-size: 25px; }
}

/* --- Zeitgesteuerte Kacheln (nur der Eigentümer sieht diese Zustände) ----- */
.tile--scheduled,
.tile--expired {
    opacity: 0.55;
    border-style: dashed;
}
.tile--expired { filter: grayscale(0.7); }
.tile__sched {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 3px 8px;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--color-fullk);
    color: var(--color-secondary);
    border-top: 2px solid var(--color-secondary);
    border-right: 2px solid var(--color-secondary);
}
.tile--expired .tile__sched {
    color: var(--color-tertiary);
    border-color: var(--color-tertiary);
}

.pub-sched-note {
    max-width: 560px;
    margin: 16px auto 0;
    padding: 10px 14px;
    border: 2px dashed var(--outline);
    background: rgba(0, 0, 0, 0.45);
    font-size: 13px;
    color: var(--color-neutral);
}

/* ==========================================================================
   Moderation: Statistik-Reiter
   ========================================================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.stats-kpi { display: flex; flex-direction: column; gap: 4px; }
/* Doppelt breite KPI-Kachel (z. B. „Klicks gesamt", wo hohe Zahlen entstehen).
   Überspannt zwei Rasterspalten; auf schmalen Layouts mit nur einer Spalte
   greift span 2 folgenlos, die Kachel bleibt einfach volle Breite. */
.stats-kpi--wide { grid-column: span 2; }
.stats-kpi__label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--on-surface-variant);
}
.stats-kpi__value {
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.1;
    color: var(--color-neutral);
}
.stats-kpi__foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.stats-kpi__month { font-size: 13px; color: var(--color-secondary); }
.stats-kpi__prev { font-size: 12px; color: var(--on-surface-variant); }
.stats-kpi__spark { margin: 4px 0; }

.stats-delta { font-size: 11px; padding: 3px 9px; }
.stats-delta--up   { border-color: var(--color-secondary); color: var(--color-secondary); }
.stats-delta--down { border-color: var(--color-tertiary); color: var(--color-tertiary); }

.stats-heading { font-size: 26px; margin: 32px 0 12px; }

/* Höchstens zwei Diagramme nebeneinander. Mit auto-fit würden auf dem breiten
   .builder-Layout (1400px) vier Spalten entstehen und die Achsenbeschriftungen
   unlesbar klein skalieren. Ein einzelnes Panel bleibt so automatisch halbbreit. */
.stats-charts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}
@media (min-width: 900px) {
    .stats-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stats-panel { display: flex; flex-direction: column; gap: 8px; }
.stats-panel__title {
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 17px;
    margin: 0;
    color: var(--color-neutral);
}

/* Diagramme skalieren mit dem Panel; auf sehr schmalen Viewports darf der
   Chart-Container selbst scrollen — die Seite soll nie horizontal scrollen. */
.stats-chart { overflow-x: auto; }
.stats-chart .chart {
    width: 100%;
    max-width: 560px;   /* über diese Breite hinaus wirken die Charts aufgeblasen */
    height: auto;
    min-width: 280px;
    display: block;
}
.sparkline { width: 120px; height: 28px; display: block; }

.stats-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--on-surface-variant);
    margin: 8px 0 0;
    max-width: 640px;
}
.stats-empty { font-size: 13px; color: var(--on-surface-variant); margin: 4px 0 0; }

.stats-top {
    list-style: none;
    counter-reset: statstop;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stats-top li {
    counter-increment: statstop;
    display: grid;
    grid-template-columns: 22px 1fr auto;
    grid-template-areas: "num name value" "num meta value";
    gap: 0 8px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant);
}
.stats-top li:last-child { border-bottom: none; padding-bottom: 0; }
.stats-top li::before {
    content: counter(statstop);
    grid-area: num;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--on-surface-variant);
}
/* Nur direkte Kind-Links sind der Titel. Links INNERHALB von .stats-top__meta
   dürfen hier nicht mitgreifen, sonst zieht grid-area sie in die Titelzeile. */
.stats-top > li > a,
.stats-top__name {
    grid-area: name;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-neutral);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.stats-top > li > a:hover { color: var(--color-secondary); }
.stats-top__meta {
    grid-area: meta;
    font-size: 12px;
    color: var(--on-surface-variant);
    overflow-wrap: anywhere;
}
.stats-top__meta a {
    color: var(--on-surface-variant);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.stats-top__meta a:hover { color: var(--color-secondary); }
.stats-top__value {
    grid-area: value;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--color-secondary);
    white-space: nowrap;
}

/* ==========================================================================
   Page-Builder / Kachel-Editor
   ========================================================================== */

main.builder { width: min(100% - 32px, 1400px); }

.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    box-shadow: 6px 6px 0 0 var(--color-primary);
}
.builder-toolbar h1 { font-size: 28px; margin: 0; margin-right: auto; }
.builder-toolbar .toolbar-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.builder-status { font-family: 'Space Mono', monospace; font-size: 13px; color: var(--on-surface-variant); }
.builder-status.is-ok { color: var(--color-secondary); }
.builder-status.is-error { color: var(--color-tertiary); }

/* „Rückgängig" nach dem Löschen einer Kachel — sitzt in der Statuszeile. */
.builder-undo {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--color-secondary);
    background: none;
    border: none;
    border-bottom: 1px solid currentColor;
    padding: 0;
    cursor: pointer;
}

.builder-undo:hover { color: var(--on-surface); }

.builder-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.builder-canvas {
    padding: 24px;
    border: 2px dashed var(--outline);
    min-height: 400px;
    background: var(--surface);
}
.builder-canvas .bento { grid-auto-rows: 150px; }
.builder-canvas .tile { cursor: grab; user-select: none; position: relative; }
.builder-canvas .tile.is-selected { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
.builder-canvas .tile.dragging { opacity: 0.4; }
.builder-canvas .tile.drop-target { outline: 3px dashed var(--color-primary-light); outline-offset: 3px; }
.builder-canvas .tile:hover { transform: none; box-shadow: 8px 8px 0 0 var(--color-primary); }

.builder-empty {
    display: flex; align-items: center; justify-content: center;
    min-height: 340px; text-align: center;
    color: var(--on-surface-variant);
    font-family: 'Space Mono', monospace;
}
/* `display:flex` oben schlägt das UA-`[hidden]{display:none}` — ohne diese Regel
   bliebe „Noch keine Kacheln" auch sichtbar, wenn längst welche da sind. */
.builder-empty[hidden] { display: none; }

/* Editor-Panel */
.editor-panel {
    position: sticky;
    top: 92px;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.editor-panel h3 {
    font-family: 'Lexend', sans-serif;
    font-size: 18px;
    margin: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--outline-variant);
}
.editor-field { display: flex; flex-direction: column; gap: 6px; }
.editor-field > span {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
}
.editor-panel input[type="text"],
.editor-panel input[type="url"],
.editor-panel .ds-select { width: 100%; margin-top: 0; font-size: 15px; }
.editor-panel input[type="color"] {
    width: 100%; height: 40px; padding: 2px;
    border: 2px solid var(--color-neutral);
    background: var(--color-box-bg); cursor: pointer;
}

.span-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.span-btn {
    min-width: 40px; padding: 8px 10px;
    border: 2px solid var(--color-neutral);
    background: transparent; color: var(--color-neutral);
    font-family: 'Space Mono', monospace; cursor: pointer;
    transition: transform var(--transition-snap), box-shadow var(--transition-snap),
                border-color var(--transition-snap), color var(--transition-snap);
}
.span-btn.is-active { background: var(--color-primary); }

.editor-row { display: flex; align-items: center; gap: 8px; }
.editor-hint {
    font-size: 12px; color: var(--on-surface-variant);
    background: var(--surface-container-low);
    border-left: 3px solid var(--color-primary);
    padding: 8px 10px;
}
/* (destruktive Buttons nutzen jetzt .btn-danger – siehe oben) */

.bg-editor { border-top: 1px solid var(--outline-variant); padding-top: 14px; margin-top: 4px; }
.bg-swatches { display: flex; gap: 8px; }
.bg-swatches input[type="color"] { flex: 1; }

/* ==========================================================================
   /tree-Editor (Linksammlung): Hochformat + Akkordeon
   --------------------------------------------------------------------------
   Der Builder soll aussehen wie die fertige Seite: schmale, gestapelte
   Spalte statt breitem Kachelraster. Die Arbeitsfläche wird deshalb auf die
   Breite der echten /tree-Seite (430px) begrenzt und zentriert; die Kacheln
   erben über .bento--hub das gestapelte Zeilen-Layout.
   ========================================================================== */
.builder--tree .builder-canvas {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
    padding: 20px;
}
/* Drei Klassen (0,3,0) — schlägt sowohl `.builder-canvas .bento` (0,2,0) als
   auch `.bento.bento--hub` (0,2,0), die je nach Quellreihenfolge sonst
   gewinnen würden. */
.builder--tree .builder-canvas .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(66px, auto);
    gap: 14px;
}
.builder--tree .builder-empty { min-height: 200px; }

/* --- Akkordeon (Kachel / Status / Seiten) -------------------------------- */
.acc { display: flex; flex-direction: column; }
.acc-form { display: contents; }        /* Formular umschließt Status+Seiten, ohne das Layout zu brechen */
.acc-item { border-bottom: 1px solid var(--outline-variant); }

.acc-head {
    list-style: none;
    cursor: pointer;
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--on-surface);
}
.acc-head::-webkit-details-marker { display: none; }
.acc-head::after {
    content: '+';
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    line-height: 1;
    color: var(--color-secondary);
}
.acc-item[open] > .acc-head::after { content: '\2013'; }   /* – */

.acc-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 2px 2px 18px;
}
/* Die zweite Überschrift „Kachel bearbeiten" im offenen Kachel-Panel ist
   redundant zum Reiter — kleiner und ruhiger halten. */
.acc-h { border: 0; padding: 0; font-size: 14px; color: var(--on-surface-variant); }

.editor-panel--tree textarea {
    width: 100%;
    min-height: 84px;
    resize: vertical;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    line-height: 1.4;
    padding: 10px 12px;
    background: var(--color-box-bg);
    color: var(--on-surface);
    border: 2px solid var(--color-neutral);
}
#statusCount.is-max { color: var(--color-tertiary); }

/* ==========================================================================
   Barrierefreiheit: Skip-Link, Fokus, Bewegungsreduktion
   ========================================================================== */

/* Nur für Screenreader — sichtbar entfernt, aber vorgelesen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Affiliate-Kennzeichnung auf Kacheln
   ==========================================================================
   Abgeschnittene 45°-Ecke oben rechts. Bewusst auffällig: die Kennzeichnung
   von Partnerlinks ist in DE Pflicht und darf nicht dezent sein. Das Icon ist
   partnerneutral (Preisschild), nicht Amazon-spezifisch.
   ========================================================================== */
.tile__aff {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    /* Dreieck: füllt nur die obere rechte Ecke */
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background: var(--color-tertiary);
    color: #131313;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 5px 5px 0 0;
    pointer-events: auto;
}

.tile__aff-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

/* Dasselbe Symbol in den Affiliate-Hinweistexten, damit die Ecke auf den
   Kacheln wiedererkannt wird. */
.aff-note__icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    color: var(--color-tertiary);
}

/* Auf kleinen Kacheln etwas zurücknehmen, damit sie den Titel nicht erschlägt. */
@media (max-width: 640px) {
    .tile__aff { width: 48px; height: 48px; }
    .tile__aff-icon { width: 15px; height: 15px; }
}

/* Sichtbar nur bei Tastaturfokus — sonst muss man auf jeder Seite durch die
   komplette Navigation tabben (WCAG 2.4.1). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 12px 20px;
    background: var(--color-secondary);
    color: #131313;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* Ein gemeinsamer Fokusring. Vorher gab es im ganzen Projekt drei :focus-visible
   Regeln — auf .btn, .tile, .page-card und allen Links fehlte er komplett, womit
   Tastaturnavigation praktisch unsichtbar war. */
:root {
    --focus-ring: 3px solid var(--color-secondary);
    --focus-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.tile:focus-visible,
.page-card:focus-visible,
.span-btn:focus-visible,
.pw-toggle:focus-visible,
.builder-undo:focus-visible,
.sheet-close:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
}

/* Nutzer mit Bewegungsempfindlichkeit: Transforms/Transitions abschalten.
   Betrifft u. a. .primary-button, .tile:hover, .page-card:hover, den
   Header-Slide (0.72s) und das Editor-Sheet. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .tile:hover,
    .page-card:hover,
    .primary-button:hover,
    .primary-button:active,
    .btn:hover,
    .btn:active,
    .span-btn:hover,
    .span-btn:active {
        transform: none !important;
    }
}

/* Blätternavigation im Verzeichnis */
.pager {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pager-position {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-left: 8px;
}

/* 404-Seite: vorher mit drei <br> und einem hartkodierten Font-Stack am
   Designsystem vorbei gebaut. */
.lead-404 {
    max-width: 52ch;
    margin: 16px 0 28px;
    color: var(--on-surface);
    font-size: 16px;
}

.links-404 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ==========================================================================
   Toast-Benachrichtigungen
   ========================================================================== */
.toast-region {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(420px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface-container-high);
    border-left: 4px solid var(--color-secondary);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .4);
    font-size: 14px;
    color: var(--on-surface);
}

.toast--error { border-left-color: var(--color-tertiary); }
.toast--success { border-left-color: var(--color-secondary); }

.toast__close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--on-surface-variant);
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

@media (max-width: 640px) {
    .toast-region { left: 16px; right: 16px; max-width: none; }
}

/* ==========================================================================
   Passwort-Checkliste (register.php, new-password.php)
   ========================================================================== */
.pw-rules {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--surface-container-low);
    border-left: 3px solid var(--outline);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    line-height: 1.9;
    color: var(--on-surface-variant);
}

.pw-rules .pw-mark {
    display: inline-block;
    width: 1.2em;
    font-weight: bold;
}

.pw-rules .is-ok { color: var(--color-secondary); }
.pw-rules .is-missing { color: var(--on-surface-variant); }

/* Sheet-Öffner und -Schließer sind reine Mobil-Steuerelemente. */
#openPanelBtn, .sheet-close { display: none; }

/* Reihenfolge-Steuerung im Editor-Panel (Touch- und Tastatur-Ersatz für Drag&Drop) */
.order-controls { display: flex; gap: 8px; }
.order-btn { flex: 1; padding: 8px 10px; font-size: 13px; }
.order-btn:disabled { opacity: .4; cursor: not-allowed; }
.editor-hint-inline {
    font-size: 12px;
    color: var(--on-surface-variant);
    font-family: 'Space Mono', monospace;
    margin-top: 4px;
}

/* Builder-Breakpoint auf den globalen Tablet-Wert (1024px) angeglichen —
   vorher 900px, was zu keinem anderen Breakpoint im Projekt passte. */
@media (max-width: 1024px) {
    .builder-layout { grid-template-columns: 1fr; }

    /* Panel als Bottom-Sheet: vorher stand es (position:static) unterhalb des
       gesamten Canvas — bei vielen Kacheln musste man erst daran vorbeiscrollen. */
    .editor-panel {
        position: fixed;
        /* Basisregel setzt top:92px (sticky) — muss hier zurückgenommen werden,
           sonst gewinnt top gegen bottom und das Sheet klebt oben. */
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        max-height: 68vh;
        overflow-y: auto;
        border-top: 2px solid var(--color-primary);
        box-shadow: 0 -8px 0 rgba(0, 0, 0, .35);
        transform: translateY(100%);
        transition: transform var(--transition-snap, 100ms ease);
    }

    .editor-panel.is-open { transform: translateY(0); }

    #openPanelBtn { display: inline-block; padding: 10px 18px; font-size: 15px; }

    .sheet-close {
        display: block;
        position: absolute;
        top: 8px;
        right: 12px;
        background: none;
        border: none;
        color: var(--on-surface);
        font-size: 28px;
        line-height: 1;
        padding: 4px 10px;
        cursor: pointer;
    }
}

/* ==========================================================================
   Responsive Breakpoints (fehlten bisher komplett)
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .hero { grid-template-columns: 1fr; gap: 32px; }
    .hero h1 { font-size: 56px; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .span-3, .span-4 { grid-column: span 2; }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 72px 0; }
}

/* Mobile */
@media (max-width: 640px) {
    /* Header-/Nav-Styles liegen bewusst in header.css (wird NACH dieser Datei
       geladen und würde Regeln hier sonst überschreiben). */

    h1 { font-size: 40px; }
    h2 { font-size: 34px; }
    .hero h1 { font-size: 40px; }
    .section-title { font-size: 30px; }

    .bento { grid-template-columns: 1fr; grid-auto-rows: 180px; }
    .span-2, .span-3, .span-4 { grid-column: span 1; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }

    .section { padding: 56px 0; }

    .hero__cta { flex-direction: column; }
    .hero__cta .btn { width: 100%; }

    /* Auth-Cards & Inputs aus style.css mobil entfixen */
    #loginform, #registerform { width: 100%; padding: 24px; }
    #registerform > form > div[style*="flex"] { flex-direction: column; gap: 16px !important; }
    input[type="text"], input[type="email"], input[type="password"] { width: 100%; }
    .box-trenner { width: 100%; }
}

/* ==========================================================================
   Große Schnellwahl: breiterer Kachelbereich (6 statt 4 Spalten)
   --------------------------------------------------------------------------
   Nur ab 1201px — darunter greifen die normalen Breakpoints (4 → 2 → 1),
   damit die Kacheln nicht gequetscht werden. Steht bewusst NACH den
   Breakpoints oben, sonst würden diese die Spaltenzahl überschreiben.

   Nur der Kachelbereich bricht aus dem zentrierten <main> aus; Titel,
   Besitzerangabe und Fußzeile bleiben in der schmalen Spalte.
   --sbw = Scrollbar-Breite (js/layout-metrics.js) — ohne den Abzug würde
   100vw um die Scrollbar-Breite überlaufen.
   ========================================================================== */
@media (min-width: 1201px) {
    .bento--wide {
        --wide-w: min(100vw - 48px - var(--sbw, 0px), 1660px);

        width: var(--wide-w);
        margin-left: calc(50% - var(--wide-w) / 2);   /* auf den Viewport zentrieren */

        grid-template-columns: repeat(6, 1fr);
    }

    /* Editor: gleiche Spaltenzahl, aber ohne Ausbruch — das Panel steht daneben. */
    .bento--wide-editor { grid-template-columns: repeat(6, 1fr); }

    /* Damit die 6 Spalten im Editor nicht winzig werden, bekommt die
       Arbeitsfläche so viel Breite wie die Live-Ansicht (1660) plus Panel. */
    main.builder--wide { width: min(100% - 32px, 2040px); }
}

/* SmartLinks: Auswahlseite (/c/<code>) — gestapelte Ziel-Buttons. */
.smart-choose {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
    margin-top: 20px;
}

.smart-choose__btn {
    width: 100%;
    text-align: center;
}

/* Dashboard: Reihenfolge-Buttons je Seiten-Karte — bewusst klein & dezent
   (Randoptionen), rechts abgesetzt, leuchten erst beim Hover neon auf. */
.page-order {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}
.page-order form { margin: 0; }
.page-order__btn {
    /* Feste, identische Größe für alle drei Buttons (Pin-SVG + Text-Pfeile),
       Inhalt exakt zentriert — so ist der Pin genauso groß wie ↑/↓. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    min-width: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    color: var(--on-surface-variant);
    background: transparent;
    border: 1.5px solid var(--outline-variant);
    box-shadow: none;
}
.page-order__btn:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
    background: var(--surface-container-low);
    transform: none;
    box-shadow: none;
}
.page-order__btn:active { transform: translate(1px, 1px); box-shadow: none; }
.page-order__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    color: var(--on-surface-variant);
    border-color: var(--outline-variant);
    background: transparent;
}
/* Pin-SVG so groß wie die Pfeil-Glyphen; zentriert dank inline-flex des Buttons. */
.page-order__btn .icon {
    width: 14px;
    height: 14px;
    vertical-align: 0;
    stroke-width: 2.2;
}

/* Dashboard: hervorgehobener Link zu Kurzlinks & SmartLinks.
   Neobrutalismus: Neon-Gradient + harter Offset-Schatten, Hover hebt an. */
.dash-tools__link--smart {
    background: linear-gradient(120deg, var(--color-primary, #bd00ff), var(--color-secondary, #00f0ff));
    color: #0a0a0a;
    border: 2px solid var(--color-fullk, #131313);
    box-shadow: 6px 6px 0 0 var(--color-fullk, #131313);
    font-weight: 800;
    letter-spacing: 0.3px;
}
.dash-tools__link--smart:hover {
    color: #0a0a0a;
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 0 var(--color-fullk, #131313);
    filter: brightness(1.06);
}
.dash-tools__link--smart:active {
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 0 0 var(--color-fullk, #131313);
}

/* ==========================================================================
   STARTSEITE — Sektionen (2026, v2: "persönliche Startseite")
   Hero-Vorschau (Fenster-Mockup) · Nutzen-Karten · Extras · FAQ.
   Neobrutalismus wie .tile/.showcase: 2px-Rahmen + harte Offset-Neon-Schatten.
   Bewusst am Dateiende: nutzt nur eigene Klassen, überschreibt nichts.
   ========================================================================== */

/* --- Hero-Visual: gefüllte Mini-Startseite als Fenster-Mockup ------------- */
.hero__preview {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
}
/* Fensterleiste: drei Punkte + Titel — liest sich sofort als "eine Seite". */
.hero__preview-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--outline-variant);
}
.hero__preview-dot {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 2px solid var(--color-neutral);
    background: transparent;
}
.hero__preview-dot:nth-child(1) { background: var(--color-tertiary); }
.hero__preview-dot:nth-child(2) { background: var(--color-primary); }
.hero__preview-dot:nth-child(3) { background: var(--color-secondary); }
.hero__preview-title {
    margin-left: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--on-surface-variant);
}
.hero__preview-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 12px;
    min-height: 0;   /* verhindert Überlauf des Grids in den Flex-Container */
}
.hp-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 14px;
    overflow: hidden;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container-high);
    color: var(--color-neutral);
    box-shadow: 4px 4px 0 0 var(--color-fullk);
}
.hp-tile--wide { grid-column: span 2; }
.hp-tile--neon { background: var(--color-primary); color: var(--color-fullk); }
.hp-tile--cyan { background: var(--color-secondary); color: var(--color-fullk); }
.hp-tile--pink { background: var(--color-tertiary); color: var(--color-neutral); }
.hp-tile__icon .icon { font-size: 22px; }
.hp-tile__t { font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 15px; line-height: 1.2; }

/* --- Nutzen-Karten: echtes Neobrutalismus (Offset-Neon-Schatten) --------- */
.usp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px;
}
.usp-card {
    padding: 28px 24px;
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    transition: transform var(--transition-snap), box-shadow var(--transition-snap);
}
/* Ruhezustand: je Karte eine andere Neon-Akzentfarbe. */
.usp-card--primary { box-shadow: 8px 8px 0 0 var(--color-primary); }
.usp-card--cyan    { box-shadow: 8px 8px 0 0 var(--color-secondary); }
.usp-card--pink    { box-shadow: 8px 8px 0 0 var(--color-tertiary); }
.usp-card--primary .icon { color: var(--color-primary-light); }
.usp-card--cyan .icon    { color: var(--color-secondary); }
.usp-card--pink .icon    { color: var(--color-tertiary); }
.usp-card .icon { font-size: 40px; }
/* Hover NACH den Modifiern, damit der Lift zuverlässig gewinnt. */
.usp-card:hover { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 var(--color-secondary); }
.usp-card h4 {
    font-family: 'Lexend', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin: 16px 0 10px;
    color: var(--color-neutral);
}
.usp-card p {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--on-surface-variant);
}

/* --- Extras: bewusst sekundär (Shortener/QR/Statistik/Bio) --------------- */
.extras {
    margin-top: 32px;
    padding: 20px 24px;
    border: 2px dashed var(--outline-variant);
}
.extras__label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--color-primary-light);
    margin-bottom: 14px;
}
.extras__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 32px;
}
.extra {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 15px;
    color: var(--on-surface-variant);
}
.extra .icon { font-size: 20px; color: var(--color-secondary); flex: 0 0 auto; }

/* --- Regler-/Umschalt-Buttons: neobrutalistischer Hover (Demo + Editor) ---
   Sichtbar auf BEIDEN Zuständen: der aktive (magenta) Button hebt sich mit
   cyanem Offset-Schatten an, der inaktive (transparent) zusätzlich cyan getönt.
   Der frühere `.is-active:hover` war ein No-Op (setzte Weiß auf Weiß). */
.span-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 0 var(--color-secondary);
}
.span-btn:not(.is-active):hover {
    /* Beim aktiven (magenta) Button wäre cyaner Text auf Magenta schlecht
       lesbar — daher nur die inaktiven zusätzlich einfärben. */
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.span-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 0 var(--color-secondary);
}

/* --- FAQ: native <details>/<summary>, kein JS ---------------------------- */
.faq { margin-top: 32px; max-width: 760px; }
.faq__item {
    border: 2px solid var(--color-neutral);
    background: var(--surface-container);
    margin-bottom: 14px;
}
.faq__item summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 18px 52px 18px 20px;
    font-family: 'Lexend', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--color-neutral);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    line-height: 1;
    color: var(--color-secondary);
}
.faq__item[open] summary::after { content: "\2013"; }   /* – */
.faq__item summary:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: -2px; }
.faq__a {
    padding: 0 20px 18px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--on-surface-variant);
}

/* --- Responsiv ----------------------------------------------------------- */
@media (max-width: 1024px) {
    .usp { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
    .extras__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Einheitlicher Button-Hover (neobrutalistischer Lift), seitenübergreifend
   --------------------------------------------------------------------------
   Alle Aktions-Buttons heben sich beim Hover gleich an (translate + größerer
   Offset-Schatten in ihrer eigenen Schattenfarbe --btn-shadow-color) und
   drücken beim Klick ein. Die vorhandenen Farb-Hovers je Variante bleiben —
   hier kommt nur die einheitliche BEWEGUNG dazu.

   Bewusst auf die Varianten gescoped, NICHT auf bloßes `.btn`: die kleinen
   Reorder-Buttons `.btn.page-order__btn` sollen ihren dezenten Hover behalten.
   ========================================================================== */
.btn-primary:hover,
.btn-cyan:hover,
.btn-ghost:hover,
.btn-danger:hover,
.btn-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 0 var(--btn-shadow-color);
}
.btn-primary:active,
.btn-cyan:active,
.btn-ghost:active,
.btn-danger:active,
.btn-cta:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--btn-shadow-color);
}