:root {
    /* Tisch (Grundzustand: dunkel) */
    --bg: #14100b;
    --bg-soft: #1d1710;
    --text: #e9dcc0;                     /* Schrift auf dem Tisch: helles Pergament */
    --muted: #a4937a;
    --line: rgba(233, 220, 192, 0.16);

    /* Papier */
    --panel: #f3e9d3;                    /* oberstes Blatt im Licht  */
    --panel-2: #e6d8ba;                  /* Blattunterkante          */
    --ink: #2b241a;                      /* Eisengallustinte         */
    --ink-muted: #6e6353;
    --ink-line: rgba(43, 36, 26, 0.22);

    /* Akzente */
    --accent: #9c3a2a;                   /* Stempelrot               */
    --accent-2: #35526d;                 /* Registratur-Blau         */
    --lamp: 255, 202, 130;               /* Lampenlicht (RGB)        */
    --kraft: #c3ab7e;                    /* Aktendeckel              */
    --kraft-deep: #a18655;

    --shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
    --radius: 6px;                       /* Papier hat keine runden Ecken */
    --radius-small: 4px;
    --max: 1180px;

    --font-serif: Georgia, "Times New Roman", "Book Antiqua", serif;
    --font-type: "Courier New", Courier, "Nimbus Mono PS", monospace;
}

/* Papier-Geltungsbereich: Tinte statt Pergament */
.frame,
.topbar,
.footer-box,
.side-card,
.notice {
    --text: var(--ink);
    --muted: var(--ink-muted);
    --line: var(--ink-line);
    color: var(--ink);
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

/* ------------------------------------------------------------
   DIE LAMPE — ein Lichtkegel über der gesamten Szene.
   Liegt ÜBER dem Inhalt (soft-light), erhellt also auch das
   Papier dort, wo das Licht steht, und lässt die Ränder der
   Seite ins Dunkel fallen. Bewegt sich in einer langsamen
   Schleife über den Tisch und atmet dabei minimal.
   ------------------------------------------------------------ */
html::before {
    content: "";
    position: fixed;
    inset: -55%;                         /* deutlich größer als der Viewport */
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(
            42% 42% at 50% 46%,
            rgba(var(--lamp), 0.95) 0%,
            rgba(var(--lamp), 0.55) 26%,
            rgba(120, 90, 52, 0.32) 48%,
            rgba(8, 6, 4, 0.82) 78%,
            rgba(4, 3, 2, 0.92) 100%
        );
    mix-blend-mode: soft-light;
    animation:
        lamp-drift 46s ease-in-out infinite,
        lamp-breathe 9s ease-in-out infinite;
    will-change: transform;
}

@keyframes lamp-drift {
    0%   { transform: translate3d(-7%, -6%, 0) scale(1); }
    28%  { transform: translate3d(6%, -2%, 0)  scale(1.06); }
    52%  { transform: translate3d(3%, 6%, 0)   scale(0.97); }
    76%  { transform: translate3d(-5%, 3%, 0)  scale(1.04); }
    100% { transform: translate3d(-7%, -6%, 0) scale(1); }
}

/* das Atmen der Glühbirne: reine Opazität, kaum wahrnehmbar,
   aber es hält die Fläche am Leben */
@keyframes lamp-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.88; }
}

/* ------------------------------------------------------------
   STAUB IM LICHT — feine Partikel, die träge nach oben und
   seitlich driften. Zwei überlagerte Punktraster in leicht
   unterschiedlichem Takt ergeben Tiefe.
   ------------------------------------------------------------ */
html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0.5;
    background-image:
        radial-gradient(1.5px 1.5px at 23% 71%, rgba(var(--lamp), 0.55), transparent 100%),
        radial-gradient(1px 1px   at 61% 34%, rgba(var(--lamp), 0.45), transparent 100%),
        radial-gradient(2px 2px   at 82% 62%, rgba(var(--lamp), 0.35), transparent 100%),
        radial-gradient(1px 1px   at 44% 12%, rgba(var(--lamp), 0.5),  transparent 100%),
        radial-gradient(1.5px 1.5px at 9% 28%,  rgba(var(--lamp), 0.4),  transparent 100%),
        radial-gradient(1px 1px   at 71% 88%, rgba(var(--lamp), 0.45), transparent 100%);
    background-size: 520px 680px;
    background-repeat: repeat;
    animation: dust-drift 70s linear infinite;
}

@keyframes dust-drift {
    from { background-position: 0 0; }
    to   { background-position: 130px -680px; }   /* eine Kachelhöhe = nahtlose Schleife */
}

/* ------------------------------------------------------------
   Der Tisch: dunkles, mattes Holz mit angedeuteter Maserung
   ------------------------------------------------------------ */
body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-serif);
    line-height: 1.7;
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(80, 58, 32, 0.22), transparent 55%),
        repeating-linear-gradient(88deg, rgba(255, 255, 255, 0.015) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 14px),
        linear-gradient(160deg, #1a140d 0%, #120e09 55%, #0c0906 100%);
    min-height: 100vh;
    position: relative;
}

/* Gebrauchsspuren auf dem Tisch: Kratzer, ein alter Wasserrand */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.6;
    background:
        radial-gradient(closest-side at 78% 18%, transparent 62%, rgba(190, 150, 90, 0.05) 64%, transparent 67%),
        linear-gradient(24deg, transparent 49.8%, rgba(255, 255, 255, 0.025) 50%, transparent 50.3%),
        linear-gradient(-31deg, transparent 49.85%, rgba(255, 255, 255, 0.02) 50%, transparent 50.25%);
}

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

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

p,
h1,
h2,
h3,
h4 {
    margin-top: 0;
}

::selection {
    background: var(--ink);
    color: var(--panel);
}

:focus-visible {
    outline: 2px dashed var(--accent);
    outline-offset: 3px;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #4a3c28;
    border: 3px solid var(--bg);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--kraft-deep);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    z-index: 999;
    background: var(--panel);
    color: var(--ink);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-small);
    font-family: var(--font-type);
    letter-spacing: 0.08em;
}

.shell {
    width: min(var(--max), calc(100% - 2rem));
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------
   Kopfzeile: Deckblattleiste, liegt wie ein schmaler Streifen
   Papier quer auf dem Tisch
   ------------------------------------------------------------ */
.site-header {
    padding: 1.1rem 0 0;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.5rem;
    padding: 0.85rem 1.15rem;
    border: 1px solid rgba(43, 36, 26, 0.35);
    border-bottom: 3px double rgba(43, 36, 26, 0.45);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 244, 220, 0.5), transparent 45%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.6) inset,
        0 16px 34px rgba(0, 0, 0, 0.5);
}

.brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
    white-space: nowrap;
}

.brand strong {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: none;
}

.brand span {
    font-family: var(--font-type);
    font-size: 0.72rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.top-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.top-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px dashed rgba(43, 36, 26, 0.4);          /* Perforationskante */
    border-radius: var(--radius-small);
    padding: 0.5rem 0.8rem;
    font-family: var(--font-type);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: rgba(255, 250, 238, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

/* Flaggenmaße unverändert übernommen — nicht anfassen */
.top-links a img {
    width: 20px !important;
    height: 15px !important;
    min-width: 20px !important;
    min-height: 15px !important;
    max-width: 20px !important;
    max-height: 15px !important;
    display: block;
    flex: 0 0 20px;
    object-fit: fill;
    object-position: center;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(20, 14, 6, 0.4);
    filter: sepia(0.2) saturate(0.85);                 /* Flaggen leicht gealtert */
}

.top-links a[href="/UA/"] img {
    width: 18px !important;
    height: 13px !important;
    min-width: 18px !important;
    min-height: 13px !important;
    max-width: 18px !important;
    max-height: 13px !important;
    flex: 0 0 18px !important;
    margin-top: 1px;
    margin-bottom: 1px;
}

.top-links a:hover,
.top-links a:focus-visible {
    color: var(--ink);
    border-color: var(--accent);
    border-style: solid;
    background: rgba(156, 58, 42, 0.07);
    transform: translateY(-1px);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2rem;
    align-items: stretch;
    padding: 2.4rem 0 1.5rem;
}

/* ------------------------------------------------------------
   .frame — ein Blatt der Akte im Licht.
   Gestapelte Blätter darunter, zwei Lochungen, rote Rand-
   linie. Das Blatt hat ein warmes Eigenlicht, das langsam
   atmet und minimal wandert — als würde der Lichtkegel
   darüberstreichen.
   ------------------------------------------------------------ */
.frame {
    position: relative;
    border: 1px solid rgba(30, 23, 14, 0.55);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(255, 246, 224, 0.5), transparent 32%),
        linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.6) inset,
        0 26px 60px rgba(0, 0, 0, 0.55),
        /* zwei weitere Blätter darunter, leicht versetzt */
        7px 8px 0 -3px #d9caa8,
        7px 8px 0 -2px rgba(15, 11, 6, 0.7),
        14px 16px 0 -8px #c9b58f,
        14px 16px 0 -7px rgba(15, 11, 6, 0.55);
    overflow: hidden;
}

/* Warmes, atmendes Licht auf dem Blatt (nur transform/opacity,
   läuft auf der GPU). Bewusst asynchron zur großen Lampe —
   dadurch wirken die Bewegungen organisch statt mechanisch. */
.frame::before {
    content: "";
    position: absolute;
    inset: -30%;
    pointer-events: none;
    background: radial-gradient(
        50% 44% at 38% 26%,
        rgba(var(--lamp), 0.22) 0%,
        rgba(var(--lamp), 0.08) 45%,
        transparent 70%
    );
    animation: sheet-light 17s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes sheet-light {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1);    opacity: 0.9; }
    50%  { transform: translate3d(3%, 2%, 0)   scale(1.05); opacity: 1; }
    100% { transform: translate3d(6%, -2%, 0)  scale(0.98); opacity: 0.85; }
}

/* Lochung (2-fach), rote Randlinie, Stockflecken — statisch */
.frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 17px 31%, #d3c19c 0 5px, rgba(20, 14, 6, 0.6) 5px, rgba(20, 14, 6, 0.6) 6px, transparent 7px),
        radial-gradient(circle at 17px 69%, #d3c19c 0 5px, rgba(20, 14, 6, 0.6) 5px, rgba(20, 14, 6, 0.6) 6px, transparent 7px),
        linear-gradient(90deg, transparent 36px, rgba(156, 58, 42, 0.35) 36px, rgba(156, 58, 42, 0.35) 37px, transparent 37px),
        radial-gradient(220px 140px at 86% 6%, rgba(151, 116, 60, 0.13), transparent 65%),
        radial-gradient(160px 130px at 8% 94%, rgba(151, 116, 60, 0.11), transparent 65%),
        radial-gradient(70px 70px at 68% 84%, rgba(122, 88, 40, 0.09), transparent 70%);
}

.frame-inner {
    position: relative;
    z-index: 1;
    padding: 2.1rem 2.1rem 2.1rem 3.3rem;   /* links Platz für Lochung + Randlinie */
}

/* ------------------------------------------------------------
   Stempel & Vermerke
   ------------------------------------------------------------ */

/* .eyebrow = Gummistempel: doppelter Rahmen, leicht verkantet */
.eyebrow {
    display: inline-block;
    margin-bottom: 1.1rem;
    padding: 0.32em 0.85em 0.26em;
    font-family: var(--font-type);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    border: 2px solid currentColor;
    border-radius: 3px;
    outline: 1px solid rgba(156, 58, 42, 0.4);
    outline-offset: 3px;
    transform: rotate(-1.6deg);
    opacity: 0.88;
    mix-blend-mode: multiply;
}

/* Stempel drücken sich beim Hereinscrollen aufs Papier.
   Nur in Browsern mit scroll-driven animations — alle
   anderen sehen den fertigen Stempel, kein Schaden. */
@supports (animation-timeline: view()) {
    .eyebrow,
    .cover-top,
    .pill.active {
        animation: stamp-press both ease-out;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
    }
}

@keyframes stamp-press {
    from {
        opacity: 0;
        transform: rotate(-6deg) scale(1.9);
    }
    70% {
        opacity: 0.95;
        transform: rotate(-1deg) scale(0.96);
    }
    to {
        opacity: 0.88;
        transform: rotate(-1.6deg) scale(1);
    }
}

.hero-title {
    font-size: clamp(2.9rem, 8vw, 6.2rem);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 1rem;
    max-width: 8ch;
    text-shadow: 0 1px 0 rgba(255, 250, 235, 0.55);   /* Letterpress */
}

.hero-lead {
    max-width: 60ch;
    font-size: 1.05rem;
    color: var(--muted);
}

/* Blindprägung "THS" im Papier */
.hero-copy::after {
    content: "THS";
    position: absolute;
    right: -0.15rem;
    bottom: -0.55rem;
    font-size: clamp(5rem, 16vw, 12rem);
    line-height: 0.8;
    letter-spacing: 0.08em;
    color: rgba(43, 36, 26, 0.05);
    text-shadow:
        0 1px 0 rgba(255, 250, 235, 0.5),
        0 -1px 0 rgba(43, 36, 26, 0.08);
    transform: rotate(-2deg);
    pointer-events: none;
}

.lang-panel .frame-inner,
.buy-box .frame-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.small-note {
    font-family: var(--font-type);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--muted);
}

/* ------------------------------------------------------------
   Sprachkarten = Karteikarten mit blauen Linien.
   Beim Hover hebt die Karte ins Licht: sie kippt minimal,
   ihr Schatten wächst, die Linien treten hervor.
   ------------------------------------------------------------ */
.language-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.2rem;
}

.lang-card {
    display: block;
    min-height: 190px;
    border: 1px solid rgba(43, 36, 26, 0.3);
    border-top: 3px double rgba(156, 58, 42, 0.55);
    border-radius: var(--radius-small);
    padding: 1.15rem 1.2rem 1.2rem;
    background:
        repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent calc(1.7em - 1px),
            rgba(53, 82, 109, 0.16) calc(1.7em - 1px),
            rgba(53, 82, 109, 0.16) 1.7em
        ),
        linear-gradient(180deg, #f7eeda, #eee1c4);
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.5) inset,
        0 8px 18px rgba(0, 0, 0, 0.28);
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.3s ease, border-color 0.25s ease;
}

.lang-card:hover,
.lang-card:focus-visible {
    transform: perspective(700px) translateY(-6px) rotateX(2.5deg) rotate(-0.4deg);
    border-color: var(--accent);
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.5) inset,
        0 26px 44px rgba(0, 0, 0, 0.45);
}

.lang-card small {
    display: block;
    font-family: var(--font-type);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-2);
    margin-bottom: 0.75rem;
}

.lang-card strong {
    display: block;
    font-size: 1.45rem;
    line-height: 1.12;
    margin-bottom: 0.65rem;
}

.lang-card span {
    color: var(--muted);
    font-size: 0.94rem;
}

/* ------------------------------------------------------------
   Pills = getippte Etiketten / Registerreiter
   ------------------------------------------------------------ */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1.2rem;
}

.pill {
    display: inline-flex;
    align-items: center;
    border: 1px dashed rgba(43, 36, 26, 0.4);
    border-radius: var(--radius-small);
    padding: 0.4rem 0.75rem;
    font-family: var(--font-type);
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    background: rgba(255, 250, 238, 0.4);
}

.pill.active {
    color: var(--accent);
    font-weight: 700;
    border: 2px solid var(--accent);
    background: rgba(156, 58, 42, 0.08);
    transform: rotate(-1deg);                          /* gestempelt */
}

/* ------------------------------------------------------------
   Abschnitte — Titel stehen auf dem dunklen Tisch und werden
   vom Lampenlicht gestreift (heller Pergamentton)
   ------------------------------------------------------------ */
.section {
    padding: 1rem 0 1.6rem;
}

.section-title {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding-bottom: 0.35em;
    border-bottom: 3px double var(--line);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.section-kicker {
    font-family: var(--font-type);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: rgba(var(--lamp), 0.75);
    font-size: 0.7rem;
    margin-bottom: 0.8rem;
}

.section-kicker::before {
    content: "///";
    margin-right: 0.6em;
    color: rgba(var(--lamp), 0.4);
    letter-spacing: 0.05em;
}

/* ------------------------------------------------------------
   Buchkarte: Cover als Kraftpapier-Aktenmappe
   ------------------------------------------------------------ */
.book-card {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.cover-block {
    aspect-ratio: 2 / 3;
    border-radius: var(--radius-small);
    border: 1px solid rgba(50, 36, 16, 0.7);
    padding: 1.15rem 1.15rem 1.15rem 1.3rem;
    color: #2e2110;
    background:
        radial-gradient(140px 100px at 80% 12%, rgba(255, 236, 200, 0.16), transparent 60%),
        radial-gradient(120px 90px at 15% 88%, rgba(40, 26, 8, 0.2), transparent 65%),
        repeating-linear-gradient(96deg, rgba(255, 244, 220, 0.05) 0 1px, transparent 1px 6px),
        linear-gradient(165deg, var(--kraft) 0%, var(--kraft-deep) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow:
        0 1px 0 rgba(255, 246, 224, 0.25) inset,
        0 26px 55px rgba(0, 0, 0, 0.6),
        /* der Inhalt der Mappe schaut unten heraus */
        5px 6px 0 -2px var(--panel),
        5px 6px 0 -1px rgba(15, 11, 6, 0.7);
    transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15), box-shadow 0.35s ease;
}

/* Die Mappe hebt sich dem Leser entgegen */
.cover-block:hover {
    transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-4px);
    box-shadow:
        0 1px 0 rgba(255, 246, 224, 0.25) inset,
        0 40px 70px rgba(0, 0, 0, 0.65),
        5px 6px 0 -2px var(--panel),
        5px 6px 0 -1px rgba(15, 11, 6, 0.7);
}

/* Verschlussöse mit angedeutetem Bindfaden (Jurismappe) */
.cover-block::before {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #8a7148 0 4px, transparent 4px),
        radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(50, 34, 12, 0.65) 7px 9px, transparent 9px);
    box-shadow:
        -30px 9px 0 -8px rgba(50, 34, 12, 0.4),
        -14px 4px 0 -9px rgba(50, 34, 12, 0.45);
    pointer-events: none;
}

/* Rückenschild als aufgeklebtes Etikett */
.cover-block::after {
    content: "Harold Smith";
    position: absolute;
    top: 1rem;
    right: 0.35rem;
    writing-mode: vertical-rl;
    font-family: var(--font-type);
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.66rem;
    color: rgba(43, 30, 12, 0.6);
    padding: 0.45em 0.15em;
    background: rgba(243, 233, 211, 0.6);
    border: 1px solid rgba(50, 34, 12, 0.35);
    border-radius: 2px;
}

.cover-top {
    align-self: flex-start;
    font-family: var(--font-type);
    font-weight: 700;
    color: #6d2a1e;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.68rem;
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: 0.3em 0.7em 0.24em;
    transform: rotate(-2deg);
    opacity: 0.85;
    mix-blend-mode: multiply;
}

.cover-title {
    font-size: 1.9rem;
    line-height: 1.04;
    max-width: 8ch;
    color: #2e2110;
    text-shadow: 0 1px 0 rgba(255, 246, 224, 0.2);
}

.cover-bottom {
    font-family: var(--font-type);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    color: rgba(46, 33, 16, 0.75);
    max-width: 16ch;
}

/* ------------------------------------------------------------
   Buttons: Stempel (primär) und getippter Vermerk (sekundär)
   ------------------------------------------------------------ */
.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.2rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 3px;
    padding: 0.85rem 1.2rem;
    font-family: var(--font-type);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
}

.button:active {
    transform: translateY(0);                          /* Stempel wird aufgedrückt */
}

.button-primary {
    background: linear-gradient(160deg, #a8432f, #7e2c1d);
    color: #f6efdf;
    border: 1px solid #5c1f12;
    box-shadow:
        0 1px 0 rgba(255, 246, 224, 0.25) inset,
        0 14px 30px rgba(0, 0, 0, 0.45);
}

.button-primary:active {
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.button-secondary {
    border: 1px solid rgba(43, 36, 26, 0.5);
    color: var(--text);
    background: rgba(255, 250, 238, 0.35);
}

.button-secondary:hover,
.button-secondary:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

/* ------------------------------------------------------------
   Meta-Karten: Formularfelder mit getippter Beschriftung
   ------------------------------------------------------------ */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}

.meta-card {
    border: 1px solid var(--ink-line);
    border-left: 3px solid rgba(53, 82, 109, 0.55);
    border-radius: var(--radius-small);
    padding: 0.95rem 1rem;
    background: rgba(255, 250, 238, 0.45);
}

.meta-card strong {
    display: block;
    font-family: var(--font-type);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-2);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
}

.meta-card span {
    color: var(--ink);
    font-size: 0.96rem;
    display: inline-block;
    border-bottom: 1px dotted rgba(43, 36, 26, 0.35);
    padding-bottom: 0.1em;
}

/* ------------------------------------------------------------
   Buch-Detailseite
   ------------------------------------------------------------ */
.book-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    padding: 2.2rem 0 1rem;
    align-items: stretch;
}

/* Breadcrumb = Aktenzeichenzeile (steht auf dem Tisch: hell) */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--muted);
    font-family: var(--font-type);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.breadcrumb a {
    color: var(--muted);
    border-bottom: 1px dotted currentColor;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: rgba(var(--lamp), 0.9);
}

/* Sprachwahl = Registerreiter am Hängeordner */
.lang-switch {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.lang-switch a {
    border: 1px solid rgba(43, 36, 26, 0.35);
    border-radius: 6px 6px 2px 2px;
    padding: 0.5rem 0.9rem;
    font-family: var(--font-type);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted);
    background: rgba(255, 250, 238, 0.3);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.lang-switch a:hover,
.lang-switch a:focus-visible {
    color: var(--ink);
    border-color: var(--accent);
}

.lang-switch a.active {
    color: var(--accent);
    font-weight: 700;
    background: rgba(156, 58, 42, 0.1);
    border-color: var(--accent);
    border-bottom: 3px solid var(--accent);            /* gezogener Reiter */
}

.buy-box h2,
.side-card h2 {
    font-family: var(--font-type);
    font-size: 0.92rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 1rem;
    color: var(--accent-2);
}

.buy-box p,
.side-card p {
    color: var(--muted);
}

/* ------------------------------------------------------------
   Statements: protokollierte Aussagen mit rotem Anstrich
   ------------------------------------------------------------ */
.statements {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.statement {
    border-left: 3px solid rgba(156, 58, 42, 0.6);
    padding-left: 1rem;
    color: var(--muted);
    font-size: 1.02rem;
    font-style: italic;
}

/* ------------------------------------------------------------
   Inhaltsbereich
   ------------------------------------------------------------ */
.content-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    padding-bottom: 2rem;
}

.prose-box .frame-inner,
.side-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prose p {
    color: var(--text);
    margin-bottom: 1rem;
}

.prose .lead-block {
    font-size: 1.16rem;
    color: var(--text);
}

/* Pull-Quote mit deutschem Anführungszeichen */
.pull-quote {
    position: relative;
    font-size: clamp(1.7rem, 4vw, 2.9rem);
    line-height: 1.08;
    color: var(--text);
    max-width: 14ch;
    margin: 0 0 1.2rem;
    padding-left: 0.55em;
    text-shadow: 0 1px 0 rgba(255, 250, 235, 0.5);
}

.pull-quote::before {
    content: "\201E";                                  /* „ */
    position: absolute;
    left: -0.12em;
    top: -0.28em;
    font-size: 2.4em;
    line-height: 1;
    color: rgba(156, 58, 42, 0.3);
    pointer-events: none;
}

/* ------------------------------------------------------------
   Features: Formularfelder
   ------------------------------------------------------------ */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.feature {
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-small);
    padding: 1rem;
    background: rgba(255, 250, 238, 0.45);
}

.feature strong {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--font-type);
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.68rem;
    font-weight: 700;
    padding-bottom: 0.3em;
    border-bottom: 1px dotted rgba(53, 82, 109, 0.4);
}

/* ------------------------------------------------------------
   Seitenkarten & Verzeichnis-Links
   ------------------------------------------------------------ */
.side-card {
    position: relative;
    border: 1px solid rgba(30, 23, 14, 0.55);
    border-radius: var(--radius-small);
    padding: 1.2rem;
    background:
        linear-gradient(180deg, rgba(255, 246, 224, 0.45), transparent 40%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.6) inset,
        0 18px 40px rgba(0, 0, 0, 0.5),
        5px 6px 0 -2px #d9caa8,
        5px 6px 0 -1px rgba(15, 11, 6, 0.65);
}

.side-links {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.side-links a {
    position: relative;
    border: 1px solid var(--ink-line);
    border-radius: var(--radius-small);
    padding: 0.8rem 2.2rem 0.8rem 0.95rem;
    color: var(--muted);
    background: rgba(255, 250, 238, 0.35);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.side-links a::after {
    content: "\2192";                                  /* → */
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-type);
    color: rgba(156, 58, 42, 0.5);
    transition: transform 0.2s ease, color 0.2s ease;
}

.side-links a:hover,
.side-links a:focus-visible {
    color: var(--ink);
    border-color: var(--accent);
    background: rgba(156, 58, 42, 0.06);
}

.side-links a:hover::after,
.side-links a:focus-visible::after {
    color: var(--accent);
    transform: translateY(-50%) translateX(3px);
}

/* ------------------------------------------------------------
   Fußzeile: letzte Seite der Akte
   ------------------------------------------------------------ */
.site-footer {
    padding: 0 0 2rem;
}

.footer-box {
    border: 1px solid rgba(43, 36, 26, 0.35);
    border-top: 3px double rgba(43, 36, 26, 0.45);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    padding: 1rem 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    box-shadow:
        0 1px 0 rgba(255, 250, 235, 0.6) inset,
        0 16px 34px rgba(0, 0, 0, 0.45);
}

.footer-box p {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-type);
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
}

.footer-links a {
    color: var(--muted);
    font-family: var(--font-type);
    font-size: 0.8rem;
    border-bottom: 1px dotted rgba(43, 36, 26, 0.4);
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ------------------------------------------------------------
   Hinweiszettel: Notiz mit Klebestreifen, leicht schief.
   Pendelt beim Laden einmal kurz aus, als wäre er gerade
   angeklebt worden.
   ------------------------------------------------------------ */
.notice {
    position: relative;
    border: 1px solid rgba(43, 36, 26, 0.35);
    background:
        linear-gradient(180deg, rgba(255, 250, 238, 0.55), transparent 50%),
        #f7ecd2;
    border-radius: 2px;
    padding: 1.2rem 1rem 1rem;
    transform: rotate(-0.5deg);
    transform-origin: 50% -10px;                       /* hängt am Klebestreifen */
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
    animation: notice-settle 2.4s cubic-bezier(0.3, 1.4, 0.4, 1) 0.3s backwards;
}

@keyframes notice-settle {
    0%   { transform: rotate(2.2deg); }
    45%  { transform: rotate(-1.6deg); }
    75%  { transform: rotate(-0.1deg); }
    100% { transform: rotate(-0.5deg); }
}

.notice::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 50%;
    width: 92px;
    height: 22px;
    transform: translateX(-50%) rotate(1.5deg);
    background: rgba(226, 214, 182, 0.7);
    border-left: 1px dashed rgba(43, 36, 26, 0.2);
    border-right: 1px dashed rgba(43, 36, 26, 0.2);
    box-shadow: 0 2px 4px rgba(20, 14, 6, 0.25);
}

/* ------------------------------------------------------------
   Responsiv
   ------------------------------------------------------------ */
@media (max-width: 960px) {
    .hero,
    .book-hero,
    .content-grid,
    .book-card {
        grid-template-columns: 1fr;
    }

    .hero-title {
        max-width: none;
    }

    .meta-grid,
    .feature-grid,
    .language-grid {
        grid-template-columns: 1fr;
    }

    .brand {
        white-space: normal;
    }
}

@media (max-width: 680px) {
    html::after {
        opacity: 0.35;                                 /* weniger Staub auf kleinen Screens */
    }

    .frame-inner {
        padding: 1.35rem 1.35rem 1.35rem 2.6rem;
    }

    .frame::after {
        background:
            radial-gradient(circle at 13px 31%, #d3c19c 0 4px, rgba(20, 14, 6, 0.6) 4px, rgba(20, 14, 6, 0.6) 5px, transparent 6px),
            radial-gradient(circle at 13px 69%, #d3c19c 0 4px, rgba(20, 14, 6, 0.6) 4px, rgba(20, 14, 6, 0.6) 5px, transparent 6px),
            linear-gradient(90deg, transparent 28px, rgba(156, 58, 42, 0.35) 28px, rgba(156, 58, 42, 0.35) 29px, transparent 29px),
            radial-gradient(180px 120px at 86% 6%, rgba(151, 116, 60, 0.12), transparent 65%);
    }

    .frame {
        box-shadow:
            0 1px 0 rgba(255, 250, 235, 0.6) inset,
            0 18px 40px rgba(0, 0, 0, 0.5),
            5px 6px 0 -2px #d9caa8,
            5px 6px 0 -1px rgba(15, 11, 6, 0.65);
    }

    .hero {
        padding-top: 1.5rem;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .section-title {
        font-size: 1.9rem;
    }

    .cta-row,
    .top-links,
    .lang-switch,
    .pill-row {
        gap: 0.55rem;
    }

    .topbar {
        justify-content: center;
        text-align: center;
    }

    .brand {
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
    }

    .top-links {
        justify-content: center;
    }

    .button {
        width: 100%;
    }

    .notice {
        transform: none;
        animation: none;
    }
}

/* ------------------------------------------------------------
   Reduzierte Bewegung: Lampe steht, Staub steht, alles steht
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
        animation: none !important;
    }

    html::after {
        display: none;                                 /* stehender Staub sieht wie Dreck aus */
    }
}

/* ------------------------------------------------------------
   Druck: Licht aus, weißes Papier
   ------------------------------------------------------------ */
@media print {
    html::before,
    html::after,
    body::before {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
    }

    .frame,
    .side-card,
    .notice,
    .topbar,
    .footer-box {
        box-shadow: none;
        background: #fff;
    }

    .frame::before,
    .frame::after {
        display: none;
    }

    .frame-inner {
        padding: 1.5rem;
    }
}