/* ==========================================================================
   Emilio’s Space – Designsystem
   --------------------------------------------------------------------------
   1. Tokens         Farben, Typografie, Spacing, Radien, Motion
   2. Base           Reset, Body, Hintergrund, Typografie, Fokus
   3. Layout         Container, Header, Footer, Sektionen
   4. Komponenten    Buttons, Inputs, Cards, Panels, Chips
   5. Seiten         Dashboard, Link Shortener
   6. Motion         Einblend-Animationen (nur ohne reduced-motion)
   7. Responsive     Tablet / Mobile
   ========================================================================== */


/* 1. TOKENS
   ========================================================================== */

:root {
    color-scheme: dark;

    /* Farben – Basis der bisherigen Palette, um Abstufungen ergänzt */
    --bg-0: #0a0f1c;
    --bg-1: #0c1322;
    --surface: rgba(22, 26, 36, 0.7);
    --surface-hover: rgba(28, 34, 48, 0.78);
    --surface-sunken: rgba(10, 15, 28, 0.55);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --accent: #2f81f7;
    --accent-strong: #1f6feb;
    --accent-light: #6cb2ff;
    --accent-tint: rgba(47, 129, 247, 0.12);
    --accent-border: rgba(47, 129, 247, 0.3);
    --accent-border-hover: rgba(47, 129, 247, 0.6);

    --danger: #ff7b72;
    --danger-tint: rgba(248, 81, 73, 0.1);
    --danger-border: rgba(248, 81, 73, 0.35);
    --success: #56d364;

    --text: #eaecf2;
    --text-muted: #a3acc0;
    --text-subtle: #7d879c;

    /* Typografie */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-xs: 0.8125rem;                                       /* 13 */
    --fs-sm: 0.9375rem;                                       /* 15 */
    --fs-base: 1rem;                                          /* 16 */
    --fs-lg: 1.25rem;                                         /* 20 */
    --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);          /* 24 → 30 */
    --fs-2xl: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);         /* 40 → 68 */
    --tracking-caps: 0.08em;                                  /* Sperrung für versale Label-Texte */

    /* Spacing – 8px-Raster (4px nur für feine Korrekturen) */
    --s-1: 0.25rem;   /*  4 */
    --s-2: 0.5rem;    /*  8 */
    --s-3: 1rem;      /* 16 */
    --s-4: 1.5rem;    /* 24 */
    --s-5: 2rem;      /* 32 */
    --s-6: 3rem;      /* 48 */
    --s-7: 4rem;      /* 64 */
    --s-8: 6rem;      /* 96 */

    /* Radien */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Schatten */
    --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 50px -30px rgba(0, 0, 0, 0.8);
    --shadow-card-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 60px -28px rgba(0, 0, 0, 0.9), 0 0 48px -16px rgba(47, 129, 247, 0.4);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;
    --dur: 250ms;

    /* Layout */
    --container: 70rem;   /* 1120 */
    --container-narrow: 44rem;   /* 704 */
    --gutter: clamp(1rem, 4vw, 2rem);
    --header-h: 4rem;     /* 64 */
}


/* 2. BASE
   ========================================================================== */

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

html {
    background-color: var(--bg-0);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;

    background: linear-gradient(155deg, var(--bg-0), var(--bg-1) 45%, var(--bg-0)) fixed;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Hintergrund: weiche Glows (statt filter: blur – günstiger zu rendern) … */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(42rem 32rem at 0% 0%, rgba(47, 129, 247, 0.24), transparent 70%),
        radial-gradient(36rem 30rem at 100% 100%, rgba(99, 102, 241, 0.1), transparent 70%);
}

/* … und ein feines Punktraster, das nach unten ausblendet */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000, transparent 75%);
}

h1, h2, h3, p {
    margin: 0;
}

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

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

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

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

::selection {
    background: rgba(47, 129, 247, 0.4);
    color: #fff;
}

[hidden] {
    display: none !important;
}

/* Fokus – nur für Tastaturnutzer sichtbar, gleiche Regel für alles Interaktive */
:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

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

.skip-link {
    position: fixed;
    top: var(--s-2);
    left: var(--s-2);
    z-index: 100;
    padding: var(--s-2) var(--s-3);
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
    transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline-offset: 2px;
}


/* 3. LAYOUT
   ========================================================================== */

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

.container--narrow {
    max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

main {
    flex: 1;
    padding-block: var(--s-6) var(--s-8);
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(10, 15, 28, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    border-radius: var(--radius-sm);
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: linear-gradient(140deg, var(--accent), var(--accent-strong));
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 16px -6px rgba(47, 129, 247, 0.7);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.brand:hover .brand__mark {
    transform: rotate(-8deg) scale(1.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 22px -6px rgba(47, 129, 247, 0.9);
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.nav a {
    padding: var(--s-2) 12px;
    white-space: nowrap;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.nav a:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.nav a[aria-current="page"] {
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-4);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.site-footer a {
    transition: color var(--dur-fast) ease;
}

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

/* Seitenkopf (Hero / Tool-Header) */
.page-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-6);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) 12px;
    color: var(--accent-light);
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: 999px;
}

.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.page-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    /* Fallback-Farbe zuerst, dann dezenter Verlauf */
    color: var(--text);
    background: linear-gradient(180deg, #ffffff 25%, #9db4dc 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.lead {
    max-width: 38rem;
    font-size: var(--fs-lg);
    line-height: 1.55;
    color: var(--text-muted);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--border);
}

.section-title {
    color: var(--text-subtle);
}

.section-meta {
    color: var(--text-subtle);
}

/* Textlink mit Pfeil (z. B. „Zurück“) */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
    padding: var(--s-1) var(--s-2) var(--s-1) 0;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--dur-fast) ease;
}

.back-link svg {
    transition: transform var(--dur) var(--ease-out);
}

.back-link:hover {
    color: var(--text);
}

.back-link:hover svg {
    transform: translateX(-4px);
}


/* 4. KOMPONENTEN
   ========================================================================== */

/* Icons (Inline-SVG, erben die Textfarbe) */
.i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 3rem;
    padding: 0 var(--s-4);
    font-size: var(--fs-base);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        box-shadow var(--dur) var(--ease-out),
        filter var(--dur-fast) ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled {
    cursor: progress;
    opacity: 0.85;
    transform: none;
}

.btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #2a78f0, var(--accent-strong));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 24px -12px rgba(47, 129, 247, 0.9);
}

.btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 14px 30px -12px rgba(47, 129, 247, 1);
}

.btn--primary:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.96);
}

.btn--secondary {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-strong);
}

.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.28);
}

.btn--sm {
    min-height: 2.5rem;
    padding: 0 var(--s-3);
    border-radius: var(--radius-sm);
}

/* Ladezustand im Button */
.btn__spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 700ms linear infinite;
}

.btn.is-loading .btn__spinner {
    display: block;
}

/* Formularfelder */
.field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.label {
    color: var(--text-muted);
}

.hint {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.input {
    width: 100%;
    min-height: 3rem;
    padding: 0 var(--s-3);
    font-size: var(--fs-base);
    color: var(--text);
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.input::placeholder {
    color: var(--text-subtle);
}

.input:hover {
    border-color: rgba(255, 255, 255, 0.26);
}

.input:focus {
    outline: none;
    border-color: var(--accent);
    background: rgba(10, 15, 28, 0.8);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(47, 129, 247, 0.25);
}

.input[aria-invalid="true"] {
    border-color: var(--danger-border);
}

.input[aria-invalid="true"]:focus {
    border-color: var(--danger);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(248, 81, 73, 0.2);
}

.field-row {
    display: flex;
    gap: var(--s-2);
}

.field-row .input {
    flex: 1;
    min-width: 0;
}

/* Feste Mindestbreite, damit der Button beim Wechsel zu „Wird gekürzt …“ nicht springt */
.field-row .btn {
    min-width: 10.5rem;
}

/* Formular mit mehreren Feldern: einheitlicher vertikaler Rhythmus */
.form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}

.field__value {
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--accent-light);
}

/* Range-Slider: natives Element, per accent-color im Designsystem eingefärbt */
.range {
    width: 100%;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Checkbox-Optionen als anklickbare Kacheln */
.options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}

.option {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 3rem;
    padding: 0 var(--s-3);
    font-size: var(--fs-sm);
    cursor: pointer;
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.option:hover {
    border-color: var(--accent-border);
}

.option:has(input:checked) {
    background: var(--accent-tint);
    border-color: var(--accent-border);
}

.option:has(input:focus-visible) {
    outline: 2px solid var(--accent-light);
    outline-offset: 3px;
}

.option input {
    width: var(--s-3);
    height: var(--s-3);
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent);
}

.option__hint {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

/* Panel (Container für Tool-Inhalte) */
.panel {
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Cards (Dashboard) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--s-4);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-height: 13rem;
    padding: var(--s-4);
    overflow: hidden;
    isolation: isolate;
    background: var(--surface);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    transition:
        transform var(--dur) var(--ease-out),
        border-color var(--dur) ease,
        background-color var(--dur) ease,
        box-shadow var(--dur) var(--ease-out);
}

/* Lichtschein von oben, blendet beim Hover ein */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(28rem 14rem at 50% -20%, rgba(47, 129, 247, 0.2), transparent 70%);
    opacity: 0;
    transition: opacity var(--dur) ease;
}

a.card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-border-hover);
    background: var(--surface-hover);
    box-shadow: var(--shadow-card-hover);
}

a.card:hover::before {
    opacity: 1;
}

a.card:active {
    transform: translateY(-1px);
}

.card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-md);
    transition: background-color var(--dur) ease, border-color var(--dur) ease, transform var(--dur) var(--ease-out);
}

.card__icon img {
    width: 24px;
    height: 24px;
}

a.card:hover .card__icon {
    background: rgba(47, 129, 247, 0.2);
    border-color: var(--accent-border-hover);
    transform: scale(1.06);
}

.card__arrow {
    color: var(--text-subtle);
    transition: color var(--dur) ease, transform var(--dur) var(--ease-out);
}

a.card:hover .card__arrow {
    color: var(--accent-light);
    transform: translate(3px, -3px);
}

.card__title {
    font-size: var(--fs-lg);
    line-height: 1.3;
    margin-top: auto;
}

.card__text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* Platzhalter-Card: klar als „noch nicht verfügbar“ erkennbar */
.card--placeholder {
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    text-align: center;
    background: transparent;
    border: 1px dashed var(--border-strong);
    box-shadow: none;
    color: var(--text-subtle);
}

.card--placeholder .card__icon {
    color: var(--text-subtle);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}

.card--placeholder .card__title {
    margin-top: var(--s-1);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--text-muted);
}

.card--placeholder .card__text {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}


/* 5. SEITEN
   ========================================================================== */

/* --- Link Shortener --- */

.result {
    margin-top: var(--s-4);
}

.result__state {
    display: none;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-4);
    border-radius: var(--radius-md);
}

.result[data-state="empty"] .result__state--empty,
.result[data-state="loading"] .result__state--loading,
.result[data-state="success"] .result__state--success,
.result[data-state="error"] .result__state--error {
    display: flex;
}

/* Empty-State */
.result__state--empty {
    align-items: center;
    gap: var(--s-1);
    padding-block: var(--s-5);
    text-align: center;
    color: var(--text-subtle);
    border: 1px dashed var(--border-strong);
}

.result__state--empty .i {
    width: 28px;
    height: 28px;
    margin-bottom: var(--s-1);
}

.result__state--empty strong {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.result__state--empty span {
    font-size: var(--fs-xs);
}

/* Ladezustand: Skeleton mit Shimmer */
.result__state--loading {
    background: var(--surface-sunken);
    border: 1px solid var(--border);
}

.skeleton {
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.05) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}

.skeleton--short {
    width: 32%;
    height: 10px;
}

.skeleton--long {
    width: 72%;
    height: 20px;
    margin-top: var(--s-1);
}

/* Erfolg */
.result__state--success {
    background: var(--accent-tint);
    border: 1px solid var(--accent-border);
}

.result__label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--success);
}

.result__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.result__link {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--accent-light);
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.result__link:hover {
    color: #fff;
    text-decoration-color: currentColor;
}

/* Generierter Wert (z. B. Passwort): Monospace, komplett markierbar */
.result__value {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: 500;
    color: var(--text);
    overflow-wrap: anywhere;
    user-select: all;
}

/* Copy-Button: Icon wechselt bei Erfolg */
.copy-btn .i--check {
    display: none;
    color: var(--success);
}

.copy-btn[data-copied="true"] .i--copy {
    display: none;
}

.copy-btn[data-copied="true"] .i--check {
    display: block;
}

/* Fehler */
.result__state--error {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    color: var(--danger);
    background: var(--danger-tint);
    border: 1px solid var(--danger-border);
}

.result__state--error > .i {
    margin-top: 2px;
}

.result__state--error p {
    font-size: var(--fs-sm);
    color: var(--text);
}

/* Fehlertext und optionale Aktion (z. B. „Neue Adresse“) untereinander */
.result__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
}

/* Zusatzzeile unter dem Ergebniswert (z. B. Countdown + Aktion) */
.result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-1);
    padding-top: var(--s-3);
    border-top: 1px solid var(--accent-border);
}

/* Panels untereinander */
.panel + .panel {
    margin-top: var(--s-4);
}

.panel > .hint {
    margin-top: var(--s-3);
}

.hint a {
    text-decoration: underline;
    text-underline-offset: var(--s-1);
    transition: color var(--dur-fast) ease;
}

.hint a:hover {
    color: var(--text);
}

/* Button, der wie ein Textlink aussieht (z. B. „Zurück zum Postfach“) */
button.back-link {
    background: none;
    border: 0;
    cursor: pointer;
}


/* --- Temp Mail --- */

.countdown {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-2);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur) ease;
}

.countdown strong {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text);
}

/* Weniger als 5 Minuten: Zeit wird zur Warnung */
.countdown[data-urgent="true"],
.countdown[data-urgent="true"] strong {
    color: var(--danger);
}

.inbox__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-3);
}

.inbox__status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-subtle);
}

.pulse {
    width: var(--s-2);
    height: var(--s-2);
    background: var(--success);
    border-radius: 50%;
}

.inbox__status[data-state="paused"] .pulse {
    background: var(--text-subtle);
}

.inbox__status[data-state="error"] {
    color: var(--danger);
}

.inbox__status[data-state="error"] .pulse {
    background: var(--danger);
}

.mail-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: var(--s-4) 0 0;
    padding: 0;
    list-style: none;
}

.mail-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-1) var(--s-3);
    width: 100%;
    padding: var(--s-3);
    text-align: left;
    cursor: pointer;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, transform var(--dur) var(--ease-out);
}

.mail-item:hover {
    background: var(--accent-tint);
    border-color: var(--accent-border);
}

.mail-item:active {
    transform: translateY(1px);
}

.mail-item__from {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
}

.mail-item__from span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ungelesen-Punkt vor dem Absender */
.mail-item[data-unread="true"] .mail-item__from::before {
    content: "";
    flex-shrink: 0;
    width: var(--s-2);
    height: var(--s-2);
    background: var(--accent);
    border-radius: 50%;
}

.mail-item__time {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.mail-item__subject,
.mail-item__excerpt {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mail-item__subject {
    font-size: var(--fs-sm);
}

.mail-item[data-unread="true"] .mail-item__subject {
    font-weight: 600;
}

.mail-item__excerpt {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
}

.mail-view__subject {
    font-size: var(--fs-lg);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mail-view__meta {
    margin-top: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* Nachrichteninhalt: Sandbox-iframe. Das fremde HTML bekommt bewusst
   die Standard-Farbwelt (hell), unabhängig vom dunklen Seiten-Theme. */
.mail-frame {
    display: block;
    width: 100%;
    min-height: var(--s-8);
    margin-top: var(--s-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}


/* --- Spacey (Chat) --- */

/* Mehrzeiliges Eingabefeld im Look von .input; wächst per JS mit dem Text */
.input--textarea {
    display: block;
    max-height: calc(var(--s-8) * 1.5);
    padding-block: calc((3rem - 1lh) / 2);   /* eine Zeile steht mittig in der Mindesthöhe */
    overflow-y: auto;
    resize: none;
}

.field-row--end {
    align-items: flex-end;
}

.chat__log {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    max-height: calc(var(--s-8) * 4);
    padding-right: var(--s-1);
    overflow-y: auto;
}

.chat__log > .result {
    margin-top: 0;
}

.chat__messages {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.msg {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    max-width: 85%;
}

.msg--user {
    align-self: flex-end;
    align-items: flex-end;
}

.msg__bubble {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.6;
    white-space: pre-wrap;        /* Nutzernachrichten: Zeilenumbrüche bleiben erhalten (Antworten: siehe .md) */
    overflow-wrap: anywhere;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
}

.msg__bubble.md {
    white-space: normal;
    min-width: 0;
}

/* Markdown-Inhalt in Antworten (erzeugt von markdown.js) */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }

.md p,
.md ul,
.md ol,
.md blockquote,
.md hr,
.md .md__code,
.md .md__table {
    margin: 0 0 var(--s-2);
}

.md strong { font-weight: 700; color: var(--text); }
.md del { color: var(--text-muted); }

.md a {
    color: var(--accent-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.md a:hover { color: var(--text); }

.md__heading {
    margin: var(--s-3) 0 var(--s-1);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
}

.md__heading--1 { font-size: var(--fs-lg); }
.md__heading--2 { font-size: calc(var(--fs-base) * 1.1); }
.md__heading--3,
.md__heading--4,
.md__heading--5,
.md__heading--6 { font-size: var(--fs-base); }
.md__heading--5,
.md__heading--6 { color: var(--text-muted); }

.md ul,
.md ol {
    padding-left: var(--s-4);
}

.md li { margin: var(--s-1) 0; }
.md li::marker { color: var(--text-subtle); }
.md li > ul,
.md li > ol { margin: var(--s-1) 0 0; }

.md blockquote {
    padding: var(--s-1) var(--s-3);
    color: var(--text-muted);
    border-left: 3px solid var(--accent-border);
}

.md hr {
    border: 0;
    border-top: 1px solid var(--border-strong);
}

/* Inline-Code */
.md :not(pre) > code {
    padding: 0.1em 0.4em;
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--accent-tint);
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Codeblock mit Kopfzeile (Sprache + Kopieren) */
.md__code {
    overflow: hidden;
    background: var(--bg-0);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.md__code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
    border-bottom: 1px solid var(--border);
}

.md__copy {
    min-height: 0;
    padding: var(--s-1) var(--s-2);
    font-size: var(--fs-xs);
}

.md__code pre {
    margin: 0;
    padding: var(--s-2) var(--s-3);
    overflow-x: auto;
    white-space: pre;
    tab-size: 4;
}

.md__code pre code {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.6;
    overflow-wrap: normal;
}

.md__table {
    overflow-x: auto;
}

.md table {
    border-collapse: collapse;
    font-size: var(--fs-xs);
}

.md th,
.md td {
    padding: var(--s-1) var(--s-2);
    text-align: left;
    vertical-align: top;
    overflow-wrap: normal;        /* Wörter in Zellen nicht mitten im Wort trennen; die Tabelle scrollt stattdessen */
    border: 1px solid var(--border-strong);
}

.md th {
    background: var(--accent-tint);
    font-weight: 600;
}

.msg--user .msg__bubble {
    background: var(--accent-tint);
    border-color: var(--accent-border);
    border-bottom-right-radius: var(--radius-sm);
}

.msg--assistant .msg__bubble {
    background: var(--surface-sunken);
    border-bottom-left-radius: var(--radius-sm);
}

.chat__suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-2);
    margin-top: var(--s-3);
}

.chat__suggestions .btn {
    white-space: normal;
    text-align: center;
}

.chat__form {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
}

.chat__form .hint {
    margin-top: var(--s-2);
}

.field-row--chat .btn {
    min-width: 0;   /* "Senden" braucht nicht die Breite des Shortener-Buttons */
}

/* Diktieren und Anhängen: quadratische Icon-Buttons (das Mikrofon ist beim Zuhören rot und pulsierend) */
.field-row--chat .btn.mic-btn,
.field-row--chat .btn.attach-btn {
    width: 3rem;
    padding: 0;
}

/* Vorschau des angehängten Bildes über der Eingabezeile */
.chat__attachment {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding: var(--s-2);
    background: var(--surface-sunken);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
}

.chat__attachment .btn {
    margin-left: auto;
}

.chat__attachment-thumb {
    flex-shrink: 0;
    width: var(--s-7);
    height: var(--s-7);
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Das vom Nutzer angehängte Bild in seiner Chat-Nachricht */
.msg__attachment {
    display: block;
    width: calc(var(--s-8) * 2);
    max-width: 100%;
    height: auto;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
}

.mic-btn__icon--active {
    display: none;
}

.mic-btn[data-listening="true"] .mic-btn__icon--idle {
    display: none;
}

.mic-btn[data-listening="true"] .mic-btn__icon--active {
    display: block;
}

.btn.mic-btn[data-listening="true"] {
    background: var(--danger-tint);
    border-color: var(--danger-border);
}

/* Nicht unterstützt: sichtbar gedämpft, bleibt aber fokussierbar und erklärt sich beim Klick */
.mic-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.chat__listening {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
}

.chat__listening.caps {
    color: var(--danger);
}

.chat__listening .pulse {
    background: var(--danger);
}


/* --- Bilder von Spacey (FLUX) im Chatverlauf --- */

.msg__figure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
    width: calc(var(--s-8) * 4);
    max-width: 100%;
    margin: 0;
}

.msg__image {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-sunken);
}


/* --- Small-Caps-Akzent ---------------------------------------------------
   Kapitälchen ("ʜᴀʟʟᴏ"): auch Kleinbuchstaben erscheinen als kleine Großbuchstaben. Das ist das durchgängige
   Gestaltungselement der Seite: Marke, Navigation, Seiten- und Kartentitel, Labels, Status und Buttons.
   Nur Fließtext (Absätze, Beschreibungen, Hinweise, Chat-Inhalte) bleibt normal, damit er gut lesbar bleibt.

   Die Typografie liegt hier an EINER Stelle; die Einzelklassen regeln nur noch Farbe und Layout.
   Für neue Stellen genügt die Hilfsklasse .caps (dezente Farbe).

   Hinweis: Die geladene Schrift (Inter aus Google Fonts) enthält keine gezeichneten Kapitälchen, und auch andere
   Google-Fonts-Schriften liefern die Funktion nicht mit aus. Der Browser skaliert deshalb Großbuchstaben auf ca. 70 %
   ("synthetisiert"). Darum sind die Schriftgrößen hier größer als bei normalem Text gleicher Wirkung. */
.caps,
.eyebrow,
.label,
.section-title,
.section-meta,
.result__label,
.inbox__status,
.countdown,
.btn,
.brand,
.nav a,
.back-link,
.page-title,
.card__title,
.option,
.result__state--empty strong {
    font-variant-caps: all-small-caps;
    font-weight: 600;
    letter-spacing: var(--tracking-caps);
}

.caps,
.eyebrow,
.label,
.section-title,
.section-meta,
.result__label,
.inbox__status,
.countdown,
.option,
.back-link,
.result__state--empty strong {
    font-size: var(--fs-base);
}

/* Überall gleichmäßige Kapitälchen (alle Buchstaben klein, "ᴇᴍɪʟɪᴏ’s sᴘᴀᴄᴇ"). Die Variante "small-caps" würde die
   Anfangsbuchstaben jedes Wortes groß lassen; das wirkte unruhig und ist bewusst nicht im Einsatz.
   Größere Elemente bekommen einen Ausgleich, weil Kapitälchen kleiner wirken als normaler Text. */
.brand {
    font-size: calc(var(--fs-lg) * 1.1);
    font-weight: 700;
}

.nav a {
    font-size: var(--fs-base);
}

.page-title {
    font-size: calc(var(--fs-2xl) * 1.3);
    font-weight: 700;
    letter-spacing: calc(var(--tracking-caps) / 2);
}

.card__title {
    font-size: calc(var(--fs-lg) * 1.1);
    font-weight: 700;
    letter-spacing: calc(var(--tracking-caps) / 2);
}

.caps {
    color: var(--text-subtle);
}

/* Ausnahme: Die Vorschläge im Chat sind ganze Fragen, keine kurzen Aktionswörter, und bleiben normal lesbar. */
.chat__suggestions .btn {
    font-variant-caps: normal;
    font-size: var(--fs-sm);
    letter-spacing: normal;
}


/* 6. MOTION
   ========================================================================== */

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes ring {
    from { box-shadow: 0 0 0 0 var(--danger-border); }
    to   { box-shadow: 0 0 0 var(--s-3) transparent; }
}

@keyframes pop {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Gestaffelter Seitenaufbau: Reihenfolge über --i im HTML (0, 1, 2 …) */
@media (prefers-reduced-motion: no-preference) {
    .reveal {
        animation: rise 700ms var(--ease-out) both;
        animation-delay: calc(var(--i, 0) * 90ms);
    }

    .result__state--success,
    .result__state--error,
    .msg,
    .mail-list > li {
        animation: pop 350ms var(--ease-out) both;
    }

    /* „Live“-Punkt im Postfach: ruhiges Pulsieren, solange aktiv */
    .inbox__status[data-state="ok"] .pulse,
    .chat__listening .pulse {
        animation: pulse 1.8s ease-in-out infinite;
    }

    /* Mikrofon-Button: roter Ring, der sich nach außen ausbreitet, solange aufgenommen wird */
    .btn.mic-btn[data-listening="true"] {
        animation: ring 1.6s ease-out infinite;
    }
}

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

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .skeleton,
    .btn__spinner {
        animation-duration: 2s;   /* bleibt als Lebenszeichen, aber ruhiger */
    }
}


/* 7. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
    main {
        padding-block: var(--s-5) var(--s-7);
    }
}

/* Header: Marke oben, Navigation als eigene, scrollbare Zeile.
   Greift, sobald die fünf Links (in Kapitälchen) nicht mehr sicher neben der Marke passen (Bedarf ca. 890px).
   Kommt ein weiteres Tool dazu, diesen Wert prüfen (Breite der Navigation + Marke + Ränder). */
@media (max-width: 940px) {
    .site-header__inner {
        flex-wrap: wrap;
        row-gap: var(--s-1);
        padding-top: var(--s-2);
    }

    .nav {
        order: 3;
        width: calc(100% + var(--s-3));
        margin-inline: calc(var(--s-2) * -1);   /* gleicht das Padding der Links aus, Text bleibt bündig */
        padding-bottom: var(--s-2);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nav a {
        padding-inline: var(--s-2);
    }

    .nav::-webkit-scrollbar {
        display: none;
    }
}

/* Mobile */
@media (max-width: 640px) {
    main {
        padding-block: var(--s-4) var(--s-7);
    }

    .page-head {
        margin-bottom: var(--s-5);
    }

    .lead {
        font-size: var(--fs-base);
    }

    /* Grid explizit einspaltig */
    .card-grid {
        grid-template-columns: 1fr;
        gap: var(--s-3);
    }

    .card {
        min-height: 0;
        gap: var(--s-2);
    }

    .card__title {
        margin-top: var(--s-3);
    }

    .panel {
        padding: var(--s-3);
        border-radius: var(--radius-lg);
    }

    .field-row {
        flex-direction: column;
    }

    .field-row .btn {
        width: 100%;
    }

    /* Chat: Das Eingabefeld nimmt die volle Breite, darunter stehen Anhängen, Mikrofon und Senden in einer Zeile */
    .field-row--chat {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .field-row--chat .input {
        flex: 1 1 100%;
    }

    .field-row--chat .btn {
        width: auto;
        padding-inline: var(--s-3);
    }

    .field-row--chat .btn--primary {
        margin-left: auto;
    }

    /* Vorschau-Chip: nur das Symbol zum Entfernen, damit nichts über den Rand ragt (Name kommt per aria-label) */
    .chat__attachment .btn__label {
        display: none;
    }

    .chat__attachment .btn {
        padding-inline: var(--s-2);
    }

    .msg {
        max-width: 92%;
    }

    .result__state {
        padding: var(--s-3);
    }

    .result__row {
        flex-direction: column;
        align-items: stretch;
    }

    .result__link {
        font-size: var(--fs-sm);
    }

    .result__value {
        font-size: var(--fs-base);
    }

    .result__meta {
        flex-direction: column;
        align-items: stretch;
    }

    .countdown {
        justify-content: center;
    }

    .options {
        grid-template-columns: 1fr;
    }

    .result__state--success .btn {
        width: 100%;
    }
}