/* ============================================
   LoveChain – Design System
   Aesthetic: "Eternal Engravings"
   Dark luxury meets blockchain permanence
   ============================================ */

:root {
    /* Warmes Weinrot statt Schwarz. Kam mit der romantischen Startseite und
       gilt seitdem fuer die ganze Seite: Wer dort auf "Verewigt eure Liebe"
       klickt, soll nicht auf einer kalten Seite landen. Die einzige Ausnahme
       ist die Paris-Fassung der Startseite, siehe body.landing-paris. */
    --bg: #150c11;
    --bg-surface: #1d1219;
    --bg-elevated: #251820;
    --gold: #c9a96e;
    --gold-light: #e4cc9c;
    --gold-dim: #8a7340;
    --rose: #d4979e;
    --cream: #ede0d0;
    --text: #f1e8dc;
    --text-muted: #9d968a;
    --border: rgba(201, 169, 110, 0.15);
    --border-strong: rgba(201, 169, 110, 0.35);
    --radius: 14px;
    --radius-sm: 8px;
    /* Das Metall aller Schloesser an einer Stelle: Hero-Schloss, Nachbarn auf
       der Kartenseite, Kacheln der Kette. Als Variable, weil dieselbe Flaeche
       vorher an vier Stellen einzeln stand und beim Umfaerben eine davon
       zurueckblieb. Traegt denselben Rotstich wie der Hintergrund, neutrales
       Anthrazit wirkte darauf wie ein Loch in der Seite. */
    --metal: linear-gradient(165deg, #2b1d24 0%, #34242c 45%, #20151b 100%);
    /* Gedaempfte Fassung fuer das Platzhalterschloss am Ende der Kette. */
    --metal-dim: linear-gradient(165deg, #221720 0%, #281c25 45%, #1a1117 100%);
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: inherit;
}

/* Lichtstimmung: ein weiches Rosé von oben, zwei ruhige Schimmer an den
   Seiten. Liegt fest ueber der ganzen Seite und wandert beim Scrollen nicht
   mit, dadurch wirkt jede Seite wie in dasselbe Licht getaucht. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -5%, rgba(212, 151, 158, 0.16) 0%, transparent 70%),
        radial-gradient(ellipse at 12% 30%, rgba(201, 169, 110, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 72%, rgba(212, 151, 158, 0.09) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    min-height: 100dvh;
}

/* ============================================
   Typography
   ============================================ */

h1, h2, h3, .display {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
}

/* ============================================
   Hero / Header
   ============================================ */

.hero {
    text-align: center;
    padding: 2.5rem 0 2rem;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Goldverlauf der Wortmarke, identisch zum OG-Bild. Fuer die LoveChain-
   Ueberschriften, nicht fuer schlichte Seitentitel wie "Impressum".
   inline-block, damit die Hintergrund-Box nur so breit wie der Text ist: sonst
   fuellt der Verlauf die volle (zentrierte) Blockbreite und der Text zeigt nur
   die hellere Verlaufsmitte. So laeuft der Verlauf ueber die ganze Wortmarke
   wie auf der OG-Karte (Creme bis Dunkelgold). */
.brand-gradient {
    display: inline-block;
    background: linear-gradient(115deg, #f5efe4 0%, #f5efe4 38%, #e8d5ae 52%, #c9a96e 78%, #b08d52 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.125rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* ============================================
   Lock Card – metallic embossed look
   ============================================ */

.lock-card {
    background: var(--metal);
    border: 2px solid var(--gold);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 40px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(201, 169, 110, 0.04),
        inset 0 1px 0 rgba(255, 236, 205, 0.09),
        inset 0 -26px 50px rgba(0, 0, 0, 0.38);
    aspect-ratio: 6 / 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lock-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(201, 169, 110, 0.04) 42%,
        rgba(201, 169, 110, 0.08) 48%,
        rgba(201, 169, 110, 0.04) 54%,
        transparent 61%
    );
    animation: shimmer 8s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% { transform: translateX(-120%); }
    50% { transform: translateX(120%); }
}


.lock-card-emoji {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

.lock-card-names {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--cream);
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.85),
        0 -1px 0 rgba(255, 255, 255, 0.07),
        0 0 22px rgba(201, 169, 110, 0.10);
    letter-spacing: 0.01em;
    word-break: break-word;
}

.lock-card-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
    margin: 1.25rem auto;
}

.lock-card-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
}

/* ============================================
   Vorhaengeschloss: Buegel und Schluesselloch
   machen aus der Karte ein erkennbares Schloss
   ============================================ */

.padlock {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.padlock-shackle {
    width: 180px;
    height: 150px;
    border: 30px solid transparent;
    border-bottom: 0;
    border-radius: 90px 90px 0 0;
    background: linear-gradient(125deg,
        var(--gold-light) 0%, var(--gold) 30%, var(--gold-dim) 55%,
        var(--gold) 78%, var(--gold-light) 100%) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(2px 4px 5px rgba(0, 0, 0, 0.55));
    margin-bottom: -26px;
    position: relative;
    z-index: 0;
}

.padlock .lock-card {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 18px 18px 12px 12px;
}

/* ============================================
   Nachbarschloesser auf der Kartenseite
   Abgedunkelte Andeutung, dass es auf der Explore-Uebersicht
   links und rechts weitergeht; Klick -> /explore
   ============================================ */

.card-stage {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Platz fuer die hervorlugenden Nachbarn, ohne die Karte zu verschieben */
    overflow: visible;
}

.card-neighbor {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 84px;
    /* nur die innere Haelfte lugt hervor, aber gut erkennbar */
    opacity: 0.6;
    filter: grayscale(0.15) brightness(0.95);
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
    cursor: pointer;
}

.card-neighbor.left {
    left: -30px;
    transform: translateY(-50%) scale(0.9);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 85%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 85%);
}

.card-neighbor.right {
    right: -30px;
    transform: translateY(-50%) scale(0.9);
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 85%);
            mask-image: linear-gradient(270deg, transparent 0%, #000 85%);
}

.card-neighbor:hover {
    opacity: 0.85;
    filter: grayscale(0) brightness(1.05);
}

.card-neighbor.left:hover {
    transform: translateY(-50%) scale(0.9) translateX(-4px);
}

.card-neighbor.right:hover {
    transform: translateY(-50%) scale(0.9) translateX(4px);
}

/* Kompaktes Schloss: Buegel plus Korpus, wie das grosse, nur klein und mit
   Platz fuer Emoji und Namen des Nachbarn */
.neighbor-lock {
    display: block;
    width: 84px;
    position: relative;
}

.nl-shackle {
    display: block;
    width: 52px;
    height: 44px;
    margin: 0 auto -8px;
    border: 10px solid var(--gold-dim);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    position: relative;
    z-index: 0;
}

.nl-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 74px;
    padding: 10px 6px;
    border-radius: 12px;
    background: var(--metal);
    border: 1.5px solid var(--gold-dim);
}

.nl-emoji {
    font-size: 1.4rem;
    line-height: 1;
}

.nl-names {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    line-height: 1.1;
    color: var(--cream);
    text-align: center;
    word-break: break-word;
}

/* Auf schmalen Viewports weniger weit hineinragen */
@media (max-width: 380px) {
    .card-neighbor {
        width: 64px;
    }
    .card-neighbor.left { left: -26px; }
    .card-neighbor.right { right: -26px; }
    .neighbor-lock { width: 64px; }
    .nl-shackle { width: 40px; height: 34px; }
    .nl-names { font-size: 0.62rem; }
}


.padlock-yours .padlock-shackle {
    background: linear-gradient(125deg,
        #f4e3c0 0%, var(--gold-light) 35%, var(--gold) 62%,
        var(--gold-light) 100%) border-box;
}

/* Hero-Schloss: quadratischer Korpus, dadurch klare Vorhaengeschloss-Silhouette */
.padlock-hero .lock-card {
    aspect-ratio: 1 / 1;
    padding: 2rem 1.25rem;
    border-radius: 16px 16px 12px 12px;
}

/* Schluesselloch: dunkle Bohrung mit Goldrand, Kreis plus Schaft */
.lock-card-keyhole {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 1rem auto 1.8rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #000 0%, #0a0a0a 60%, #151515 100%);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 0 2.5px rgba(201, 169, 110, 0.55),
        0 1px 2px rgba(255, 236, 205, 0.14);
}

.lock-card-keyhole::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    height: 16px;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #000 0%, #0d0d0d 100%);
}

/* ============================================
   Emoji Picker
   ============================================ */

.emoji-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}

/* Anlass-Ueberschrift im Symbolraster. Spannt sich ueber alle vier Spalten,
   damit der Picker ein einziger Grid-Container bleibt und die Auswahllogik
   in app.js unveraendert weiterlaeuft. */
.emoji-group-label {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dim);
}

.emoji-group-label:first-child {
    margin-top: 0;
}

.emoji-btn {
    aspect-ratio: 1;
    font-size: 1.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-btn:hover {
    border-color: var(--border-strong);
    background: var(--bg-elevated);
    transform: scale(1.08);
}

.emoji-btn.selected {
    border-color: var(--gold);
    background: rgba(201, 169, 110, 0.08);
    box-shadow: 0 0 20px rgba(201, 169, 110, 0.1);
}

/* ============================================
   Form Elements
   ============================================ */

.form-group {
    margin: 1.5rem 0;
}

.form-label {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    color: var(--cream);
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    transition: border-color 0.2s ease;
    outline: none;
}

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

.form-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.08);
}

.char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
}

.char-counter.warn {
    color: var(--rose);
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: block;
    width: 100%;
    padding: 1rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    text-align: center;
}

.btn-gold,
a.btn-gold:link,
a.btn-gold:visited,
a.btn-gold:hover,
a.btn-gold:active {
    background: linear-gradient(135deg, var(--gold), var(--gold-dim));
    color: #0a0a0a;
    box-shadow: 0 2px 16px rgba(201, 169, 110, 0.2);
}

.btn-gold:hover:not(:disabled) {
    box-shadow: 0 4px 24px rgba(201, 169, 110, 0.35);
    transform: translateY(-1px);
}

.btn-gold:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

/* EU-Kaeufer: Zahlungsmittel-Auswahl. Als gerahmter Block im selben Stil wie
   der Consent-Kasten darueber, damit die Auswahl als eigener Abschnitt wirkt
   und nicht als Streifen loser weisser Kacheln. Klick markiert genau eine
   Kachel (Goldrand + Haken). */
.pay-method-block {
    margin: 0 0 1rem;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

/* Festes Raster statt flex-wrap: sonst brechen die sechs Kacheln am Handy
   unausgewogen auf 4+2. So bleibt es Desktop 6x1, Handy sauber 3x2. */
.pay-method {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.pay-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    /* Warmes Off-White statt hartem Weiss: die Marken-Logos brauchen einen
       hellen Grund, dieser Ton fuegt sich aber in die Gold/Creme-Palette. */
    background: #f5efe3;
    border: 1px solid rgba(201, 169, 110, 0.25);
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pay-tile:hover {
    border-color: var(--gold);
}

/* Einheitliche Logo-Groesse trotz sehr unterschiedlicher Seitenverhaeltnisse:
   in dieselbe Box eingepasst (Hoehe und Breite begrenzt). */
.pay-tile img {
    max-height: 20px;
    max-width: 46px;
    width: auto;
    display: block;
}

.pay-tile.is-selected {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(201, 169, 110, 0.3);
}

.pay-tile-check {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    color: #0a0a0a;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
    display: none;
}

.pay-tile.is-selected .pay-tile-check {
    display: block;
}

/* Handy: sechs Kacheln passen nicht in eine Reihe -> sauberes 3x2. */
@media (max-width: 480px) {
    .pay-method {
        grid-template-columns: repeat(3, 1fr);
    }
    .pay-tile {
        height: 46px;
    }
}

.btn-outline,
a.btn-outline:link,
a.btn-outline:visited,
a.btn-outline:hover,
a.btn-outline:active {
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--border-strong);
}

.btn-outline:hover {
    background: rgba(201, 169, 110, 0.06);
    border-color: var(--gold);
}

.btn-small {
    display: inline-block;
    width: auto;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

.btn-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* ============================================
   Writing Page – Steps Timeline
   ============================================ */

.writing-steps {
    margin: 2rem 0;
    position: relative;
}

/* Vertical line */
.writing-steps::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    position: relative;
    opacity: 0.25;
    transition: opacity 0.6s ease;
}

.step.active, .step.done {
    opacity: 1;
}

.step-dot {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.step.active .step-dot {
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.25);
    animation: pulse-dot 2s ease-in-out infinite;
}

.step.done .step-dot {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a0a0a;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 12px rgba(201, 169, 110, 0.2); }
    50% { box-shadow: 0 0 24px rgba(201, 169, 110, 0.4); }
}

.step-content {
    padding-top: 0.25rem;
}

.step-text {
    font-size: 0.9375rem;
    color: var(--text);
}

.step.active .step-text {
    color: var(--cream);
}

.step-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.125rem;
}

/* Chain animation during active write */
.chain-anim {
    display: inline-flex;
    gap: 2px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.chain-anim span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    animation: chain-bounce 1.4s ease-in-out infinite;
}

.chain-anim span:nth-child(2) { animation-delay: 0.2s; }
.chain-anim span:nth-child(3) { animation-delay: 0.4s; }

@keyframes chain-bounce {
    0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   Card Page – Blocknummer
   ============================================ */

/* Die Blocknummer ist die Adresse des Love Locks und traegt die ganze Idee,
   deshalb steht sie ganz oben ueber dem Schloss statt in den technischen
   Details. */
.block-headline {
    margin-bottom: 2rem;
    text-align: center;
}

.block-headline-label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.block-headline-value {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.1;
    color: var(--gold);
    text-decoration: none;
    text-shadow: 0 0 28px rgba(201, 169, 110, 0.28);
    transition: text-shadow 0.3s ease, transform 0.3s ease;
}

/* Traegt jetzt das Verewigungsdatum statt der Blocknummer, deshalb die
   Serifenschrift der Marke statt der Monospace des Belegs. */
.block-headline-value {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
}

a.block-headline-value:hover {
    text-shadow: 0 0 38px rgba(201, 169, 110, 0.45);
    transform: translateY(-1px);
}

.block-headline-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* ============================================
   Card Page – Tech Details
   ============================================ */

.tech-details {
    margin-top: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.tech-details-header {
    padding: 0.75rem 1rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}

.tech-details-header::after {
    content: '▾';
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.tech-details.open .tech-details-header::after {
    transform: rotate(180deg);
}

.tech-details-body {
    display: none;
    padding: 0 1rem 1rem;
}

.tech-details.open .tech-details-body {
    display: block;
}

.tech-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    gap: 0.5rem;
}

.tech-row:last-child {
    border-bottom: none;
}

.tech-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.tech-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--cream);
    text-align: right;
    word-break: break-all;
}

.tech-value a {
    color: var(--gold);
    text-decoration: none;
}

.tech-value a:hover {
    text-decoration: underline;
}

.tech-info-link {
    display: block;
    margin-top: 0.875rem;
    text-align: right;
    font-size: 0.75rem;
    color: var(--gold);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.tech-info-link:hover {
    text-decoration: underline;
}

/* ============================================
   Share Section
   ============================================ */

.share-section {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.share-section .btn {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 0;
}

.share-hint {
    font-size: 0.8125rem;
    color: var(--gold);
    text-align: center;
    margin-top: 0.75rem;
    padding: 0.625rem;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Copy feedback */
.btn .copied-text {
    display: none;
}

.btn.copied .original-text {
    display: none;
}

.btn.copied .copied-text {
    display: inline;
}

/* ============================================
   Completion animation
   ============================================ */

.completion-glow {
    animation: glow-in 1s ease forwards;
}

/* Zuschnappen am Ende des Schreibvorgangs: der Buegel faellt in den Koerper,
   federt einmal nach und der Korpus nimmt den Stoss auf. */
.padlock.is-locking .padlock-shackle {
    animation: shackle-snap 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

.padlock.is-locking .lock-card {
    animation: lock-impact 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
}

@keyframes shackle-snap {
    0% { transform: translateY(-14px); }
    55% { transform: translateY(4px); }
    100% { transform: translateY(0); }
}

@keyframes lock-impact {
    0%, 45% { transform: scale(1); }
    62% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .padlock.is-locking .padlock-shackle,
    .padlock.is-locking .lock-card {
        animation: none;
    }
}

@keyframes glow-in {
    0% { box-shadow: 0 0 0 rgba(201, 169, 110, 0); }
    100% { box-shadow: 0 0 60px rgba(201, 169, 110, 0.15), 0 0 120px rgba(201, 169, 110, 0.05); }
}

/* Sparkle particles */
.sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--gold-light);
    border-radius: 50%;
    animation: sparkle-float 2s ease-out forwards;
}

@keyframes sparkle-float {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0); }
}

/* ============================================
   Section headings
   ============================================ */

.section-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* ============================================
   Preview section
   ============================================ */

.preview-section {
    margin: 2rem 0;
}

.lock-card-emoji.is-placeholder,
.lock-card-names.is-placeholder {
    opacity: 0.28;
    transition: opacity 0.3s ease;
}

.lock-card-names.is-placeholder {
    font-style: italic;
    font-weight: 400;
}

/* ============================================
   Etherscan link
   ============================================ */

.explorer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.8125rem;
    margin-top: 1.5rem;
    transition: color 0.2s;
}

.explorer-link:hover {
    color: var(--gold-light);
}

/* ============================================
   Error / Status messages
   ============================================ */

.error-msg {
    text-align: center;
    padding: 2rem;
    color: var(--rose);
}

/* ============================================
   Loading spinner
   ============================================ */

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   Landing Page
   ============================================ */

.landing-section {
    margin: 3rem 0;
}

.landing-heading {
    font-size: 1.75rem;
    color: var(--gold);
    margin-bottom: 1rem;
    text-align: center;
}

.landing-text {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.7;
    text-align: center;
}

/* Wortmarke und Gefuehlszeile sind eine gemeinsame H1, sehen aber aus wie
   zwei Zeilen: beide Spans brauchen dafuer display: block. */
.hero-heading {
    font-weight: inherit;
}

/* Nur die Gefuehlszeile wird zum Block, sie erzwingt damit den Umbruch nach
   der Wortmarke. Die Wortmarke selbst bleibt inline-block, sonst zoege sich
   die Verlaufsbox von .brand-gradient ueber die volle Breite. */
.hero-heading .hero-headline {
    display: block;
}

/* Hero: Gefuehl zuerst, der Beweis steht als Subline darunter. */
.hero-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cream);
    margin-bottom: 0.5rem;
}

/* Ruhige Schlusszeile unter einer Sektion, traegt das Praktische, ohne
   dafuer eine eigene Feature-Kachel zu brauchen. */
.landing-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* ============================================
   Startseite, Paris-Fassung: die eine Seite, die kalt bleiben soll
   Sie erzaehlt vom leeren Gelaender im Regen und vom Container. Das warme
   Rosé der uebrigen Seiten wuerde dieser Erzaehlung widersprechen, deshalb
   holt sie sich hier den fruehreren, fast schwarzen Grund zurueck.
   ============================================ */

body.landing-paris {
    --bg: #070707;
    --bg-surface: #111111;
    --bg-elevated: #1a1a1a;
    --metal: linear-gradient(165deg, #1d1d1d 0%, #262626 45%, #181818 100%);
    --metal-dim: linear-gradient(165deg, #171717 0%, #1c1c1c 45%, #141414 100%);
}

body.landing-paris::before {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(201, 169, 110, 0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(212, 151, 158, 0.02) 0%, transparent 60%);
}

/* Paris: der Gegenbeweis. Bild verliert nach unten in den Seitenhintergrund,
   damit der Schnitt zwischen Foto und Flaeche nicht als Kante wirkt. */
.paris-section {
    text-align: center;
}

.paris-figure {
    position: relative;
    margin: 0 0 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
}

.paris-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.paris-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(7, 7, 7, 0.2) 0%,
        rgba(7, 7, 7, 0) 40%,
        rgba(7, 7, 7, 0.9) 100%);
    pointer-events: none;
}

/* Kennzeichnung, dass die Szene nachgestellt und nicht fotografiert ist.
   z-index, weil der Verlauf oben als positioniertes ::after darueber laege. */
.paris-figure-note {
    position: absolute;
    right: 0.625rem;
    bottom: 0.5rem;
    z-index: 1;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241, 232, 220, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.paris-kicker {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 0.5rem;
}

.paris-punch {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--cream);
    margin-top: 1.25rem;
}

/* Vertrauensblock: was passiert, wenn es uns nicht mehr gibt */
.proof-note {
    margin-top: 1.5rem;
    padding: 1.125rem 1.125rem 1.125rem 1rem;
    border-left: 2px solid var(--gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: linear-gradient(90deg, rgba(201, 169, 110, 0.07), transparent 70%);
    text-align: left;
}

.proof-note-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 0.4375rem;
}

.proof-note-text {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.65;
}

.proof-note-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 2px;
}

.proof-note-link:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
}

/* Reasons grid */
.reasons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}

.reason-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1.25rem 1rem;
    text-align: center;
}

.reason-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.reason-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cream);
    margin-bottom: 0.375rem;
}

.reason-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* How it works steps */
.steps-list {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.how-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.how-step strong {
    display: block;
    color: var(--cream);
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.how-step-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.9375rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.125rem;
}

/* FAQ */
.faq-item {
    border-bottom: 1px solid var(--border);
}

.faq-item:first-of-type {
    border-top: 1px solid var(--border);
}

.faq-question {
    padding: 1rem 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--cream);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    font-family: 'DM Sans', sans-serif;
    font-size: 1.25rem;
    color: var(--text-muted);
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 1rem;
}

details[open] .faq-question::after {
    content: '−';
}

.faq-answer {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    padding: 0 0 1rem;
}

.chain-mode-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-top: 1rem;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
    cursor: pointer;
}

.chain-mode-row .consent-check {
    margin-top: 0.22rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    cursor: pointer;
}

.chain-mode-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.4rem;
    font-style: italic;
}

.chain-preview {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.02);
}

.chain-preview-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.chain-preview-value {
    color: var(--cream);
    word-break: break-all;
    line-height: 1.4;
}

.bg-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.625rem;
    font-style: italic;
}

/* ============================================
   Crop modal
   ============================================ */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--gold);
    font-size: 1.5rem;
    text-align: center;
    margin: 0;
}

.crop-container {
    flex: 1;
    max-height: 60vh;
    background: var(--bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.crop-container img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
}

.modal-actions .btn {
    flex: 1;
}

/* Cropper.js overrides to match the theme */
.cropper-view-box,
.cropper-face {
    border-radius: 4px;
}

.cropper-view-box {
    outline: 2px solid var(--gold);
    outline-color: rgba(201, 169, 110, 0.85);
}

.cropper-line, .cropper-point {
    background-color: var(--gold);
}

/* ============================================
   Background adjust sliders (alpha + blur)
   ============================================ */

.bg-adjust {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.bg-adjust-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bg-adjust-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    flex: 0 0 7.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bg-adjust-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--cream);
    flex: 0 0 3rem;
    text-align: right;
}

.bg-adjust input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 2px;
    outline: none;
}

.bg-adjust input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg-surface);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.4);
}

.bg-adjust input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    border: 2px solid var(--bg-surface);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.4);
}

.lock-card-content {
    position: relative;
    z-index: 2;
}

/* VAT notice */
.vat-notice {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

.stripe-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    color: var(--text-muted);
}

.stripe-trust img {
    height: 26px;
    width: auto;
    opacity: 0.75;
}

.stripe-trust span {
    font-size: 0.72rem;
    text-align: center;
    max-width: 22rem;
    line-height: 1.35;
}

/* Warme Zeile vor den Pflichtangaben. Die Checkboxen muessen bleiben, sie
   sollen aber nicht die Ueberschrift des Moments sein. */
.consent-warmup {
    margin-top: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--cream);
    text-align: center;
}

.consent-warmup + .legal-consent {
    margin-top: 0.75rem;
}

/* Legal consent block (create page) */
.legal-consent {
    margin: 1.75rem 0 1rem;
    padding: 1rem 1.1rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.legal-consent .section-label {
    margin-bottom: 0.6rem;
}

.consent-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.35rem 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-muted);
    cursor: pointer;
}

.consent-row + .consent-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.consent-row .consent-check {
    margin-top: 0.22rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--gold);
    cursor: pointer;
}

.consent-row a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ============================================
   Counter section
   ============================================ */

.count-section {
    text-align: center;
    margin: 3rem 0;
}

.count-number {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--gold);
    letter-spacing: 0.02em;
    text-shadow:
        0 0 30px rgba(201, 169, 110, 0.2),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

.count-plus {
    font-weight: 400;
    margin-left: 0.05em;
    opacity: 0.85;
}

.count-label {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}

.count-teaser {
    margin-top: 1.5rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.375rem;
    color: var(--cream);
    opacity: 0.9;
}

@media (min-width: 640px) {
    .count-number {
        font-size: 6rem;
    }
    .count-teaser {
        font-size: 1.5rem;
    }
}

/* ============================================
   Pricing section — 8 = ∞ rotated
   ============================================ */

.price-section {
    text-align: center;
    position: relative;
}

.price-stage {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;
    margin: 2rem 0 1rem;
    padding: 1.5rem 2rem;
    position: relative;
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.price-stage::before {
    content: '€';
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 4rem;
    line-height: 1;
    visibility: hidden;
    pointer-events: none;
    user-select: none;
}

.price-glyph {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    font-size: 9rem;
    line-height: 1;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    color: var(--gold);
    text-shadow:
        0 0 40px rgba(201, 169, 110, 0.25),
        0 4px 20px rgba(0, 0, 0, 0.5);
}

.price-glyph-eight {
    display: inline-block;
    line-height: 1;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Subtle breathing animation to hint interactivity */
@keyframes price-breathe {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 169, 110, 0.15)); }
    50% { filter: drop-shadow(0 0 20px rgba(201, 169, 110, 0.35)); }
}

.price-glyph {
    animation: price-breathe 3.5s ease-in-out infinite;
}

.price-euro {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 4rem;
    color: var(--gold);
    line-height: 1;
    text-shadow:
        0 0 24px rgba(201, 169, 110, 0.2),
        0 2px 12px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(-0.12em);
    transition:
        opacity 0.55s ease 0.15s,
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}

.price-stage.revealed .price-euro {
    opacity: 0.92;
    transform: translateY(0);
}

/* Text below */
.price-reveal-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--cream);
    margin-top: 1.25rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.price-section.revealed .price-reveal-text {
    opacity: 1;
    transform: translateY(0);
}

.price-tagline-text {
    font-size: 0.8125rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    margin-top: 0.75rem;
}

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

/* Mobile: use tap hint instead of hover */
@media (hover: none) {
    .price-hint::before {
        content: attr(data-mobile);
    }
}

/* Desktop: bigger */
@media (min-width: 900px) {
    .price-stage {
        gap: 0.75rem;
    }
    .price-stage::before {
        font-size: 6rem;
    }
    .price-glyph {
        font-size: 14rem;
    }
    .price-euro {
        font-size: 6rem;
    }
    .price-reveal-text {
        font-size: 1.5rem;
    }
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-items: center;
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

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

.footer-link-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--text-muted);
    transition: color 0.2s;
}

.footer-link-btn:hover {
    color: var(--gold);
}

/* Consent als Panel am unteren Rand: am Handy die untere Haelfte (50vh), am
   Desktop ein Viertel (25vh). Der Inhalt wird per margin:auto zentriert; das
   zentriert bei kurzem Inhalt und bleibt bei langem (sehr kleine Displays) vom
   oberen Rand her scrollbar, ohne den Titel abzuschneiden. Fonts und Abstaende
   sind kompakt gehalten, damit Titel, Text und beide Buttons hineinpassen. */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: 50vh;
    background: linear-gradient(180deg, #1f141a 0%, #271a21 55%, #1c1218 100%);
    border-top: 1px solid var(--border-strong);
    box-shadow:
        0 -10px 50px rgba(0, 0, 0, 0.6),
        0 -1px 0 rgba(201, 169, 110, 0.12);
    display: flex;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    color: var(--text);
    overflow-y: auto;
    animation: consent-slide-up 0.35s ease-out;
}

@keyframes consent-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.consent-banner[hidden] {
    display: none;
}

.consent-banner-inner {
    width: 100%;
    max-width: 640px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Desktop/Tablet: ein Viertel des Bildschirms am unteren Rand. */
@media (min-width: 640px) {
    .consent-banner {
        height: 25vh;
        min-height: 200px;
    }
    .consent-banner-inner {
        max-width: 760px;
    }
}

.consent-banner-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.2;
    margin: 0;
}

.consent-banner-text {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0;
}

.consent-banner-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0;
}

.consent-banner-actions .btn {
    width: 100%;
    margin: 0;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
}

@media (min-width: 480px) {
    .consent-banner-actions {
        flex-direction: row-reverse;
    }
    .consent-banner-actions .btn {
        flex: 1;
    }
}

.footer-dot {
    margin: 0 0.5rem;
    color: var(--border);
}

.lang-switcher {
    display: inline-flex;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.lang-option {
    padding: 0.25rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.lang-option.active {
    color: var(--gold);
    border-color: var(--border);
}

.lang-option:hover {
    color: var(--gold-light);
}

.made-with {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.made-with {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.made-with-heart {
    color: var(--rose);
    display: inline-block;
    animation: heart-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(212, 151, 158, 0.25));
}

.flag-de {
    display: inline-block;
    vertical-align: -3px;
    margin-left: 0.25rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

@keyframes heart-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Imprint page */
.back-link {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0 0 1.5rem;
    transition: color 0.2s;
}

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

.imprint-section {
    margin: 2rem 0;
}

.imprint-section h2 {
    color: var(--gold);
    font-size: 1.25rem;
    margin-bottom: 0.875rem;
}

/* Zwischenueberschrift innerhalb eines Rechtsabschnitts. Ohne eigene Regel
   bliebe sie durch den globalen Reset ganz ohne Abstand stehen. */
.imprint-section h3 {
    color: var(--cream);
    font-size: 1.0625rem;
    margin: 1.75rem 0 0.625rem;
}

.imprint-section p,
.imprint-section ul,
.imprint-section ol {
    color: var(--text);
    line-height: 1.7;
    font-size: 0.9375rem;
    margin-bottom: 1em;
}

.imprint-section ul,
.imprint-section ol {
    padding-left: 1.25rem;
    margin-top: 0.75em;
    font-weight: 400;
}

.imprint-section li {
    font-weight: 400;
    margin-bottom: 0.4rem;
}

.imprint-section p:last-child,
.imprint-section ul:last-child,
.imprint-section ol:last-child {
    margin-bottom: 0;
}

.imprint-section li::marker {
    font-weight: 400;
    color: var(--gold-dim);
}

.imprint-section a[href^="mailto:"],
.imprint-section a[href^="mailto:"]:link,
.imprint-section a[href^="mailto:"]:visited,
.imprint-section a[href^="mailto:"]:hover,
.imprint-section a[href^="mailto:"]:active {
    color: inherit;
    text-decoration: none;
}

.imprint-section code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875em;
    color: var(--cream);
    background: rgba(201, 169, 110, 0.08);
    padding: 0.05em 0.35em;
    border-radius: 3px;
    word-break: break-all;
}

.imprint-section code.code-block {
    display: block;
    padding: 0.6rem 0.8rem;
    margin: 0.25rem 0;
    line-height: 1.45;
    text-align: center;
}

.info-cta {
    margin-top: 2.5rem;
    text-align: center;
}

/* ============================================
   Responsive fine-tuning
   ============================================ */

@media (min-width: 640px) {
    .container {
        padding: 3rem 2rem 4rem;
    }

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

/* ============================================
   Desktop – Landing page wider layout
   ============================================ */

@media (min-width: 900px) {
    /* All other pages: slightly wider for breathing room */
    .container {
        max-width: 560px;
        padding: 4rem 2rem;
    }

    body.landing .container {
        max-width: 1080px;
        padding: 4rem 2.5rem 4rem;
    }

    body.landing .hero {
        padding: 3rem 0 2.5rem;
    }

    body.landing .hero-title {
        font-size: 5rem;
    }

    body.landing .hero-headline {
        font-size: 2.25rem;
    }

    body.landing .hero-subtitle {
        font-size: 1.375rem;
    }

    /* Landing: center card + CTA with limited width */
    body.landing > .container > .lock-card,
    body.landing > .container > .btn,
    body.landing .landing-cta-final {
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }

    body.landing .landing-cta-final {
        text-align: center;
        padding: 2rem 0 1rem;
    }

    body.landing .landing-section {
        margin: 4.5rem 0;
    }

    body.landing .landing-heading {
        font-size: 2.25rem;
        margin-bottom: 2rem;
    }

    body.landing .landing-text {
        font-size: 1.0625rem;
        max-width: 640px;
        /* Nur horizontal zentrieren. Die Kurzform "margin: 0 auto" hat hier
           auch den oberen Abstand auf 0 gesetzt und war spezifischer als die
           Abstandsregeln einzelner Absaetze - .blockchain-outro stand dadurch
           ab 900px direkt an den Eigenschafts-Pillen. */
        margin-left: auto;
        margin-right: auto;
    }

    /* Anlass-Kacheln – 3 Spalten, damit sechs Anlaesse in zwei vollen
       Reihen aufgehen statt in 4 + 2 mit Rest. */
    body.landing .reasons-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    body.landing .reason-card {
        padding: 1.75rem 1.25rem;
    }

    body.landing .reason-icon {
        font-size: 2rem;
    }

    body.landing .reason-title {
        font-size: 1.25rem;
    }

    /* How it works – horizontal with line connectors */
    body.landing .steps-list {
        flex-direction: row;
        gap: 1rem;
    }

    body.landing .how-step {
        flex-direction: column;
        text-align: center;
        flex: 1;
        padding: 1.5rem 1rem;
    }

    body.landing .how-step-num {
        margin: 0 auto 0.75rem;
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    /* FAQ – 2 columns on desktop */
    body.landing .landing-section:has(.faq-item) {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    body.landing .faq-question {
        font-size: 1.1875rem;
    }

    body.landing .faq-answer {
        font-size: 0.9375rem;
    }
}

/* Tablet middle breakpoint */
@media (min-width: 640px) and (max-width: 899px) {
    body.landing .reasons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Lade-Overlay fuer die Create-Seite (waehrend OpenAI-Pruefung) */
.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 18, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: loading-overlay-in 0.25s ease;
    transition: background 0.7s ease;
}

/* Uebergang zur weissen Stripe-Seite: Hintergrund weich aufhellen */
.loading-overlay.is-redirecting {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
}

.loading-overlay .heart-loader {
    width: 72px;
    height: 72px;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 0 16px rgba(230, 57, 70, 0.6));
    animation: heart-beat 1.1s ease-in-out infinite;
}

.loading-overlay .heart-loader svg {
    width: 100%;
    height: 100%;
}

.loading-overlay .heart-loader path {
    fill: #e63946;
}

.loading-overlay .loading-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.7s ease;
}

.loading-overlay .loading-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: #d8c7cf;
    transition: color 0.7s ease;
}

.loading-overlay.is-redirecting .loading-title {
    color: #1a1a1a;
}

.loading-overlay.is-redirecting .loading-subtitle {
    color: #6b7280;
}

/* Beim Redirect den roten Herzloader ausblenden, Fokus auf die Logos */
.loading-overlay.is-redirecting .heart-loader {
    display: none;
}

.loading-overlay .redirect-logos {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    opacity: 0;
    animation: loading-overlay-in 0.5s ease 0.35s forwards;
}

.loading-overlay .redirect-logo {
    height: 26px;
    width: auto;
}

.loading-overlay .redirect-logo-sep {
    width: 1px;
    height: 22px;
    background: #d8dbe2;
}

/* Vertikales PayPal-Logo (Icon + Schriftzug gestapelt): groesser als die
   Wortmarken, damit der Schriftzug lesbar bleibt. */
.loading-overlay .redirect-logo.redirect-logo-paypal {
    height: 56px;
}

@keyframes heart-beat {
    0% { transform: scale(1); }
    25% { transform: scale(1.18); }
    40% { transform: scale(0.95); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes loading-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Rueckweg von Stripe: weisses Auftakt-Overlay, das weich auf die schwarze
   Writing-Seite ueberblendet. Der erste Paint ist weiss (wie die Stripe-Seite),
   danach folgt der Fade zu Schwarz. */
.payment-intro {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    pointer-events: none;
    animation: payment-intro-out 3.4s ease forwards;
}

.payment-intro-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 2rem;
    text-align: center;
    animation: payment-intro-content 0.5s ease both;
}

.payment-intro-check {
    width: 68px;
    height: 68px;
    margin-bottom: 0.6rem;
}

.payment-intro-check svg {
    width: 100%;
    height: 100%;
}

.payment-intro-check circle {
    stroke: #16a34a;
    stroke-width: 3;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: payment-check-circle 0.55s ease 0.15s forwards;
}

.payment-intro-check path {
    stroke: #16a34a;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 34;
    stroke-dashoffset: 34;
    animation: payment-check-mark 0.35s ease 0.6s forwards;
}

.payment-intro-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
}

.payment-intro-subtitle {
    margin: 0;
    font-size: 0.95rem;
    color: #6b7280;
    max-width: 22rem;
}

@keyframes payment-check-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes payment-check-mark {
    to { stroke-dashoffset: 0; }
}

@keyframes payment-intro-content {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes payment-intro-out {
    0%   { opacity: 1; }
    64%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .payment-intro { animation-duration: 2s; }
    .payment-intro-inner,
    .payment-intro-check circle,
    .payment-intro-check path { animation: none; }
    .payment-intro-check circle { stroke-dashoffset: 0; }
    .payment-intro-check path { stroke-dashoffset: 0; }
}

/* ============================================
   Chain: an ein anderes Love Lock haengen
   ============================================ */

/* Create-Seite: optionales Anhaengen */
.attach-group {
    margin-top: 0.25rem;
}

.attach-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--gold);
    font-family: inherit;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.attach-fields {
    margin-top: 0.75rem;
}

.attach-status {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
    min-height: 1.1em;
}

.attach-status.ok {
    color: var(--cream);
}

.attach-status.err {
    color: var(--rose);
}

.attach-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 0.4rem;
}

/* Karten-Seite: Kette anzeigen */
.chain-links {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.chain-attached-to {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--gold);
    font-size: 0.9rem;
    text-decoration: none;
}

/* Hinweis auf die Beweiskette: verknuepfte Love Locks sind on-chain
   nachpruefbar miteinander verbunden. */
.chain-proof {
    margin-top: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: rgba(201, 169, 110, 0.04);
    text-align: center;
}

.chain-proof-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
}

.chain-proof-hint {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.chain-glyph {
    color: var(--gold-dim);
}

.chain-here {
    text-align: center;
}

.chain-here-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.chain-here-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.chain-child {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--cream);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.chain-child:hover {
    border-color: var(--border-strong);
}

.chain-invite {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin-top: 1rem;
}

.chain-invite .mono {
    color: var(--gold);
}

/* ============================================
   Explore-Uebersicht: oeffentliche Galerie aller Love Locks
   ============================================ */

.gallery-search {
    display: flex;
    gap: 0.6rem;
    margin: 0.5rem 0 1rem;
}

.gallery-search .form-input {
    flex: 1;
}

.gallery-clear {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    column-gap: 0.85rem;
    row-gap: 1.1rem;
    margin-top: 1rem;
}

.bridge-preview-grid {
    margin-top: 1.5rem;
}

/* Zelle = ein Schloss: Buegel (Geschwister) verschwindet hinter dem Korpus */
.gallery-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s ease;
}

.gallery-shackle {
    width: 84px;
    height: 76px;
    border: 15px solid transparent;
    border-bottom: 0;
    border-radius: 42px 42px 0 0;
    background: linear-gradient(125deg,
        var(--gold-light) 0%, var(--gold) 30%, var(--gold-dim) 55%,
        var(--gold) 78%, var(--gold-light) 100%) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(1px 3px 4px rgba(0, 0, 0, 0.5));
    margin-bottom: -13px;
    z-index: 0;
}

.gallery-item {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1rem 0.6rem 1.1rem;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--gold);
    border-radius: 14px 14px 11px 11px;
    background: var(--metal);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 236, 205, 0.09),
        inset 0 -14px 26px rgba(0, 0, 0, 0.32);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

/* ============================================
   Explore – die Explore-Uebersicht ablaufen
   ============================================ */

/* Auf dieser Seite stehen nur die Schloesser. Der Container der uebrigen
   Seiten ist auf Lesebreite begrenzt, hier soll die Reihe durchlaufen. */
body.explore .container {
    max-width: none;
    padding: 2rem 0 2.5rem;
    display: flex;
    flex-direction: column;
}

/* Dekorative Haengebruecke hinter der Reihe. Fest im Viewport, hinter allem
   (negativer z-index), damit sie beim horizontalen Scrollen der Reihe ruhig
   stehen bleibt und die Love Locks wie an einem Gelaender daran haengen. */
.explore-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
}

.explore-bg .bridge-svg {
    width: 118%;
    max-width: 1600px;
    height: auto;
    color: #8a7340; /* gedaempftes Gold, hell genug zum Erkennen */
    opacity: 0.35;
}

@media (max-width: 640px) {
    /* Auf schmalen Schirmen die Bruecke breiter ziehen, damit die Pylone nicht
       mittig ins Bild ruecken, sondern die Spannweite spuerbar bleibt. */
    .explore-bg .bridge-svg { width: 200%; }
}

/* Haengt die Reihe mittig in den freien Raum und schiebt den Footer nach
   unten, statt beide zusammen in die Bildmitte zu ruecken. */
.explore-strip {
    margin-block: auto;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    /* Ohne min-width:0 waechst die Reihe (Flex-Item) auf ihre Inhaltsbreite und
       laesst die Seite horizontal ueberlaufen, wodurch zentrierte Elemente wie
       Ueberschrift/CTA verschoben werden. */
    min-width: 0;
    /* Oben mehr Luft: das mittige Schloss ist vergroessert und waechst nach
       oben, sonst wuerde sein Buegel an overflow-y: hidden abgeschnitten. */
    /* Unten Luft fuer die Anhaengen-Lasche, die unter der jeweils untersten
       Karte haengt, sonst schneidet overflow-y: hidden sie an. */
    padding: 3rem 50vw 2.25rem;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Kein Browser-Scroll-Anchoring: beim Nachladen links richten wir die
       Position selbst aus. Sonst kompensieren Browser und JS doppelt und die
       Ansicht (Kette) springt. */
    overflow-anchor: none;
}

.explore-strip::-webkit-scrollbar {
    display: none;
}

.explore-head {
    text-align: center;
    padding: 0 1.25rem;
}

.explore-head .hero-title {
    margin: 0 0 0.4rem;
}

/* Logo verlinkt auf die Landingpage. */
.explore-logo {
    display: inline-block;
    text-decoration: none;
}

.explore-subtitle {
    color: var(--text-muted);
    max-width: 44rem;
    margin: 0 auto;
    line-height: 1.5;
}

.explore-footer {
    text-align: center;
    padding: 1.5rem 1.25rem 0;
}

/* Button wie auf der Landingpage: nicht ueber die ganze Explore-Uebersicht, sondern in
   derselben Spaltenbreite zentriert. */
.explore-footer .btn {
    max-width: 480px;
    margin: 0 auto;
}

/* Ein Stapel ist eine Saeule der Explore-Uebersicht: oben das Schloss, darunter die daran
   haengende Kette. Ohne Kette ist es ein Stapel der Groesse eins. */
.chain-stack {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: center;
}

.explore-cell {
    flex: 0 0 auto;
    width: 140px;
}

/* Das geteilte Schloss hebt sich ab: leichter Schein und deutlich groesser,
   damit man in der Reihe sofort sieht, um welches es geht. Der Ursprung unten
   laesst die Karte nach oben wachsen, sodass ihre Basis auf der Explore-Uebersicht bleibt
   und daran haengende Schloesser verbunden bleiben. Die Vergroesserung laeuft
   ueber transform, veraendert also nicht das Layout und schiebt die Nachbarn
   nicht weg. */
.explore-cell.is-center {
    transform: scale(1.2);
    transform-origin: bottom center;
    z-index: 3;
}

.explore-cell.is-center .gallery-item {
    border-color: var(--gold);
    box-shadow: 0 0 26px rgba(201, 169, 110, 0.22);
}

/* Beim Hover den leichten Lift zusaetzlich zur Vergroesserung erhalten. */
.explore-cell.is-center:hover {
    transform: scale(1.2) translateY(-2px);
}

/* Verkettete Schloesser (Teil einer Beweiskette): leicht hellerer Rahmen. */
.explore-cell.is-chained .gallery-item {
    border-color: var(--gold-light);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 236, 205, 0.09),
        inset 0 -14px 26px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(201, 169, 110, 0.4);
}

/* Die daran haengenden Schloesser stehen als Saeule direkt darunter. Kein
   eigenes Verbindungselement: der negative Abstand zieht das Kind so weit hoch,
   dass sein eigener Buegel hinter die Unterkante der Elternkarte greift (der
   Buegel liegt bei z-index 0, die Karte bei z-index 1). Dadurch haengt das
   Kind sichtbar mit dem eigenen Buegel am Schloss darueber. */
.chain-kids {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    margin-top: -22px;
}

/* Platzhalterschloss am rechten Ende der Explore-Uebersicht: ausgegraut, gestrichelt,
   laedt zum Erstellen eines neuen Love Locks ein. */
.explore-cell.explore-cta .gallery-item {
    border-style: dashed;
    border-color: var(--gold-dim);
    /* Undurchsichtig, damit der dahinterliegende Buegel nicht durchscheint. Der
       Platzhalter-Charakter kommt ueber den gestrichelten Rand und die
       gedaempften Inhalte. */
    background: var(--metal-dim);
    transition: border-color 0.25s ease;
}

.explore-cell.explore-cta .gallery-names {
    color: var(--text-muted);
}

/* "Euer Moment": noch geoeffnetes Schloss, wie chain-lock-yours. Das rechte
   Bein ist kurz (clip-path), das linke Bein steckt im (undurchsichtigen)
   Koerper -> verbunden, aber nicht durchscheinend. Gleiche Hoehe wie die
   anderen (Standard-margin bleibt), nur der Buegel ist leicht angehoben. */
.explore-cell.explore-cta .gallery-shackle {
    opacity: 0.4;
    clip-path: polygon(0 0, 84px 0, 84px 52px, 69px 52px, 69px 76px, 0 76px);
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.explore-cell.explore-cta .gallery-emoji {
    filter: grayscale(0.3);
    opacity: 0.8;
}

.explore-cell.explore-cta:hover .gallery-item {
    border-color: var(--gold);
}

.explore-cell.explore-cta:hover .gallery-shackle {
    opacity: 0.75;
}

.gallery-cell:hover {
    transform: translateY(-2px);
}

.gallery-cell:hover .gallery-item {
    border-color: var(--gold-light);
}

.gallery-emoji {
    font-size: 1.9rem;
    line-height: 1;
}

.gallery-names {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--cream);
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.85),
        0 -1px 0 rgba(255, 255, 255, 0.07);
}

.gallery-block {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Schnell-Anhaengen direkt an einem Schloss der Reihe: fuehrt auf die Create-
   Seite mit vorbelegter Blocknummer. Absolut positioniert, damit die Zellenhoehe
   und damit die Ketten-Verschachtelung (chain-kids: negativer margin) unberuehrt
   bleiben. Sitzt als kleine Lasche unter der Karte. */
.gallery-attach {
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 3px 11px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold-light);
    background: rgba(9, 9, 9, 0.9);
    border: 1px solid var(--gold-dim);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.gallery-attach::before {
    content: "\FF0B";
    font-size: 0.85em;
    line-height: 1;
}

.gallery-attach:hover,
.gallery-attach:focus-visible {
    background: var(--gold);
    border-color: var(--gold);
    color: #111;
}

.gallery-pager {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.gallery-empty {
    text-align: center;
    color: var(--text-muted);
    margin: 2rem 0;
}

.chain-attach-btn {
    margin-top: 1rem;
}

/* ============================================
   Blockchain visuell: Kette aus verewigten Bloecken
   ============================================ */

.blockchain-explain {
    text-align: center;
}

.chain-viz {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: clamp(4px, 1.6vw, 14px);
    margin: 2.25rem auto 0.5rem;
}

.chain-lock {
    flex: 0 1 80px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* Buegel des Schlosses */
/* Buegel des Schlosses. Geometrie bewusst dieselbe wie beim Galerie-Schloss
   (.gallery-shackle), nur kleiner: Breite 54 % der Korpusbreite, Radius die
   halbe Bueglbreite (also ein voll runder Bogen), Ueberlappung 17 % der
   Buegelhoehe. Vorher war der Bogen flacher und ein Bein per clip-path
   verkuerzt, wodurch die Kette ein anderes Schloss zeigte als der Rest der
   Seite. */
.lock-shackle {
    box-sizing: border-box;
    width: 44px;
    height: 39px;
    border: 8px solid transparent;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(125deg,
        var(--gold-light) 0%, var(--gold) 30%, var(--gold-dim) 55%,
        var(--gold) 78%, var(--gold-light) 100%) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
    margin-bottom: -7px;
    z-index: 0;
}

/* Korpus des Schlosses, metallisch und graviert. Quadratisch wie das
   Galerie-Schloss. */
.lock-body {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    aspect-ratio: 1 / 1;
    padding: 0.35rem 0.25rem;
    border: 2px solid var(--gold);
    border-radius: 8px 8px 6px 6px;
    background: linear-gradient(165deg, #1d1d1d 0%, #262626 45%, #181818 100%);
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 236, 205, 0.09),
        inset 0 -14px 26px rgba(0, 0, 0, 0.35);
}

/* Die Blocknummer steht unter dem Schloss, nicht darin: so traegt der Korpus
   dieselben zwei Zeilen wie ueberall sonst (Symbol und Namen). */
.lock-serial {
    margin-top: 0.3rem;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lock-engraving {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    margin-top: 0.1rem;
}

.lock-symbol {
    font-size: 1.3rem;
    line-height: 1;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

.lock-names {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 0.66rem;
    color: var(--cream);
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.8),
        0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Euer Schloss, golden hervorgehoben und dauerhaft offen. Offen liest sich
   nicht am angehobenen Buegel allein, sondern am kurzen rechten Bein: es
   steckt sichtbar nicht im Gehaeuse. Gleiche Konstruktion wie "Euer Moment"
   auf der Explore-Uebersicht (.explore-cell.explore-cta), nur auf die
   kleinere Buegelgroesse umgerechnet: das abgeschnittene Stueck ist so breit
   wie das Bein (8px) und endet bei 68 % der Buegelhoehe. Die Deckkraft von
   dort wird bewusst nicht uebernommen, das Explore-Schloss ist ein
   ausgegrauter Platzhalter, dieses hier ist der goldene Hoehepunkt. */
.chain-lock-yours .lock-shackle {
    background: linear-gradient(125deg,
        #f4e3c0 0%, var(--gold-light) 35%, var(--gold) 62%,
        var(--gold-light) 100%) border-box;
    clip-path: polygon(0 0, 44px 0, 44px 27px, 36px 27px, 36px 39px, 0 39px);
    transform: translateY(-4px);
}

.chain-lock-yours .lock-body {
    border-color: var(--gold);
    background: linear-gradient(165deg, #221d14 0%, #2c2419 45%, #1b160d 100%);
    box-shadow:
        0 6px 26px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(201, 169, 110, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chain-lock-yours .lock-serial,
.chain-lock-yours .lock-names {
    color: var(--gold-light);
}

/* Reveal nur, wenn JS die Klasse .pre setzt. Ohne JS bleiben die
   Schloesser geschlossen sichtbar (nur "euer Moment" offen). */
.chain-viz.pre .chain-lock {
    opacity: 0;
    transform: translateY(14px);
}

/* Vor dem Schliessen sind alle anderen Schloesser offen (Buegel angehoben) */
.chain-viz.pre .chain-lock:not(.chain-lock-yours) .lock-shackle {
    transform: translateY(-9px);
}

.chain-viz.in .chain-lock {
    opacity: 1;
    transform: none;
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Buegel faehrt nacheinander von links nach rechts senkrecht ins Gehaeuse */
.chain-viz.in .chain-lock:not(.chain-lock-yours) .lock-shackle {
    transform: none;
    transition: transform 0.45s cubic-bezier(0.5, 0, 0.3, 1.25);
}

/* Auftauchen der Schloesser, leicht gestaffelt (fertig nach ca. 1.0s) */
.chain-viz.in > :nth-child(1) { transition-delay: 0.05s; }
.chain-viz.in > :nth-child(2) { transition-delay: 0.15s; }
.chain-viz.in > :nth-child(3) { transition-delay: 0.25s; }
.chain-viz.in > :nth-child(4) { transition-delay: 0.35s; }
.chain-viz.in > :nth-child(5) { transition-delay: 0.45s; }

/* Buegel schliessen erst NACH dem Einblenden aller Schloesser, dann
   nacheinander von links nach rechts (Welle bis ca. 2.85s) */
.chain-viz.in > :nth-child(1) .lock-shackle { transition-delay: 1.2s; }
.chain-viz.in > :nth-child(2) .lock-shackle { transition-delay: 1.6s; }
.chain-viz.in > :nth-child(3) .lock-shackle { transition-delay: 2.0s; }
.chain-viz.in > :nth-child(4) .lock-shackle { transition-delay: 2.4s; }

.chain-props {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.chain-prop {
    font-size: 0.85rem;
    color: var(--text);
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
}

.blockchain-outro {
    margin-top: 2rem;
}

/* ============================================
   Startseite, romantische Fassung
   Die warme Grundstimmung steckt inzwischen in :root und gilt fuer die ganze
   Seite. Hier stehen nur noch die Bausteine, die es allein auf dieser Fassung
   gibt: der Schein hinter dem Hero-Schloss, die wechselnde Gravur und die
   Moment-Sektion.
   ============================================ */

body.landing-love .hero-subtitle {
    color: #d8b3b1;
}

body.landing-love .landing-heading {
    color: var(--gold-light);
}

/* Schein hinter dem Hero-Schloss, damit es leuchtet statt nur zu haengen. */
.love-padlock {
    position: relative;
}

.love-padlock::before {
    content: "";
    position: absolute;
    inset: -26% -22% -14%;
    background: radial-gradient(ellipse at 50% 55%, rgba(212, 151, 158, 0.3) 0%, transparent 66%);
    filter: blur(10px);
    pointer-events: none;
    z-index: -1;
}

/* Wechselnde Beispielgravur: ausblenden, tauschen, einblenden. Die Dauer
   entspricht dem Timeout in index_romantic.html. */
.love-example {
    transition: opacity 0.6s ease;
}

.love-example.fading {
    opacity: 0;
}

/* Bild der Moment-Sektion. Wie .paris-figure, aber der Verlauf laeuft in den
   warmen Grund dieser Fassung aus statt ins Schwarz. */
.love-moment {
    text-align: center;
}

.love-figure {
    position: relative;
    margin: 0 0 1.5rem;
    border-radius: var(--radius);
    overflow: hidden;
}

.love-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.love-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
        rgba(21, 12, 17, 0.15) 0%,
        rgba(21, 12, 17, 0) 45%,
        rgba(21, 12, 17, 0.92) 100%);
    pointer-events: none;
}

/* Kennzeichnung, dass die Szene nicht fotografiert, sondern erzeugt ist.
   z-index, weil der Verlauf oben als positioniertes ::after darueber laege. */
.love-figure-note {
    position: absolute;
    right: 0.625rem;
    bottom: 0.5rem;
    z-index: 1;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(241, 232, 220, 0.7);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.love-kicker {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 0.5rem;
}

.love-punch {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.25rem;
    line-height: 1.45;
    color: var(--cream);
    margin-top: 1.25rem;
}

/* Der Beweis-Kasten traegt auf dieser Fassung Rosé statt Gold: er soll ruhig
   danebenstehen und nicht wie eine Warnung wirken. */
body.landing-love .proof-note {
    border-left-color: var(--rose);
    background: linear-gradient(90deg, rgba(212, 151, 158, 0.09), transparent 70%);
}

@media (min-width: 900px) {
    body.landing-love .love-punch {
        font-size: 1.5rem;
    }
}