/* ============================================================================
   Karten-Landingpages (Liebesbrief, Weihnachten, Taufe, …) — lädt NUR auf
   Seiten mit dem Layout card.njk / card-hub.njk, zusätzlich zu styles.css.
   Alles hängt an body.card-page, damit keine Regel auf die übrigen Seiten
   durchschlägt.

   FARBEN kommen nicht von hier: Jede Seite setzt ihre Farben als CSS-Variablen
   in einem <style>-Block (erzeugt in _data/cardPages.js aus `theme` der
   Anlass-Datei). Diese Datei kennt nur die Variablen:
     --orange, --orange-dark, --orange-soft, --grad-warm, --shadow-orange
       (Marken-Tokens aus styles.css, umgefärbt → Buttons & Formular ziehen mit)
     --card-ink, --card-line, --card-line-soft, --card-ring, --card-btn-glow,
     --card-float, --card-check, --card-title-grad, --card-gold,
     --card-bg, --card-bg-image (nur dunkle Seiten)

   SCHALTER (Klassen card-page--…, gesetzt über `classes` der Anlass-Datei):
     dark    dunkle Seite, helle Schrift außerhalb der Formularkarte
     fall    Hintergrund-Zeichen fallen (Schnee, Konfetti) statt aufzusteigen
     lights  Lichterkette am oberen Rand
     bauble  Preis hängt als Christbaumkugel
     calm    ruhige Seite: kein Aufkleber, keine Bewegung (Beileid)
     compact kleinere Kachel-Beschriftung (bei sechs Briefpapieren)
   ========================================================================== */

/* Schmuckschriften — dieselben Dateien, die auch ins PDF eingebettet werden.
   Im Formular zeigen sie Schrift- und Unterschrift-Auswahl „in echt“. */
@font-face { font-family: 'Parisienne'; src: url('/assets/fonts/cards/Parisienne-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sacramento'; src: url('/assets/fonts/cards/Sacramento-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Mr Dafoe'; src: url('/assets/fonts/cards/MrDafoe-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Courgette'; src: url('/assets/fonts/cards/Courgette-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Indie Flower'; src: url('/assets/fonts/cards/IndieFlower-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Crimson Text'; src: url('/assets/fonts/cards/CrimsonText-Italic.ttf') format('truetype'); font-style: italic; font-display: swap; }

/* Rückfallwerte, falls eine Seite eine Variable nicht setzt (z. B. die Übersicht) */
.card-page {
    --card-ink: #3b2a1a;
    --card-line: #ffd0a6;
    --card-line-soft: #ffe2c7;
    --card-ring: rgba(236, 116, 4, .16);
    --card-btn-glow: 0 16px 32px -10px rgba(236, 116, 4, .65), 0 6px 12px -2px rgba(236, 116, 4, .3);
    --card-float: var(--orange);
    --card-check: "✓";
    --card-title-grad: linear-gradient(100deg, #ff8a3d 0%, #ec7404 50%, #e0245e 100%);
    --card-gold: #ffd978;
}
.card-page .btn-primary:hover:not(:disabled) { box-shadow: var(--card-btn-glow); }
.card-page input:focus { box-shadow: 0 0 0 4px var(--card-ring); }

/* ---------- Schwebende Zeichen im Hintergrund ---------- */
.card-sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.card-sky__item {
    position: absolute;
    bottom: -3rem;
    left: calc(3% + var(--i) * 8.2%);
    font-size: calc(1rem + (var(--i) * 7 - (var(--i) * var(--i) * .55)) * .06rem);
    opacity: .34;
    color: var(--card-float);    /* ❤ ohne Emoji-Darstellung wäre sonst grau */
    animation: card-float calc(15s + var(--i) * 1.7s) linear infinite;
    animation-delay: calc(var(--i) * -3.1s);
    will-change: transform;
}
.card-sky__item:nth-child(3n) { font-size: 1.9rem; opacity: .22; }
.card-sky__item:nth-child(4n) { font-size: .95rem; }
@keyframes card-float {
    0%   { transform: translate3d(0, 0, 0) rotate(-8deg); }
    50%  { transform: translate3d(1.6rem, -55vh, 0) rotate(10deg); }
    100% { transform: translate3d(-.8rem, -112vh, 0) rotate(-6deg); }
}
/* fall: von oben nach unten (Schnee, Konfetti) */
.card-page--fall .card-sky__item {
    top: -3rem;
    bottom: auto;
    left: calc(1% + var(--i) * 5.5%);
    opacity: .75;
    font-size: calc(.7rem + (var(--i) * 5 - (var(--i) * var(--i) * .27)) * .035rem);
    animation-name: card-fall;
    animation-duration: calc(13s + var(--i) * 1.1s);
    animation-delay: calc(var(--i) * -2.3s);
}
.card-page--fall .card-sky__item:nth-child(3n) { font-size: 1.5rem; opacity: .45; }
.card-page--fall .card-sky__item:nth-child(4n) { font-size: .7rem; opacity: .9; }
.card-page--dark.card-page--fall .card-sky__item { text-shadow: 0 0 8px rgba(255, 255, 255, .5); }
@keyframes card-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(1.8rem, 56vh, 0) rotate(120deg); }
    100% { transform: translate3d(-1rem, 114vh, 0) rotate(240deg); }
}
@media (prefers-reduced-motion: reduce) {
    .card-sky__item { animation: none; bottom: auto; top: calc(8% + var(--i) * 7%); }
    .card-page--fall .card-sky__item { top: calc(4% + var(--i) * 5%); }
}

/* ---------- Hero ---------- */
.card-hero {
    position: relative;
    max-width: 860px;
    margin: 0 auto 2rem;
    text-align: center;
}
.card-hero__eyebrow {
    display: inline-block;
    margin: 0 0 .9rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--card-line-soft);
    color: var(--orange);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: var(--shadow-xs);
}
.card-hero__title {
    margin: 0;
    font-size: clamp(2.1rem, 6vw, 4rem);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.035em;
    color: var(--ink);
}
.card-hero__title em {
    font-style: normal;
    background: var(--card-title-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.card-hero__sub {
    max-width: 580px;
    margin: 1.1rem auto 0;
    font-size: 1.1rem;
    color: var(--ink-2);
}
.card-hero__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}
.card-hero__steps li {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--card-line-soft);
    font-size: .92rem;
    font-weight: 600;
    color: var(--card-ink);
}
.card-hero__steps li + li::before {
    content: "→";
    margin: 0 .35rem 0 -.2rem;
    color: var(--card-line);
    font-weight: 400;
}
/* Preis-Aufkleber: schief draufgeklebt, wackelt beim Drüberfahren.
   Unter 1320 px ist neben der Überschrift kein Platz — dann darunter. */
.card-hero__price {
    display: grid;
    justify-items: center;
    align-content: center;
    width: 9.4rem;
    aspect-ratio: 1;
    margin: 1.4rem auto 0;
    padding: 1.1rem .9rem 1rem;
    border-radius: 50%;
    background: var(--grad-warm);
    color: #fff;
    box-shadow: var(--shadow-orange);
    transform: rotate(-5deg);
    transition: transform .25s ease;
}
.card-hero__price:hover { transform: rotate(4deg) scale(1.05); }
.card-hero__price-ab { font-size: .8rem; font-weight: 700; line-height: 1; opacity: .9; }
.card-hero__price-value { font-size: 1.7rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.card-hero__price-note { font-size: .62rem; font-weight: 600; line-height: 1.2; text-align: center; opacity: .95; }
@media (min-width: 1321px) {
    .card-hero__price {
        position: absolute;
        right: -10.5rem;         /* ganz neben der Überschrift, auch wenn sie die volle Breite füllt */
        top: .4rem;
        margin: 0;
        transform: rotate(11deg);
    }
    .card-hero__price:hover { transform: rotate(-4deg) scale(1.05); }
}

/* Brotkrumen über dem Hero */
.card-crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin: 0 0 1rem;
    font-size: .82rem;
    color: var(--muted);
}
.card-crumbs a { color: var(--muted); text-decoration: underline; text-decoration-color: transparent; }
.card-crumbs a:hover { color: var(--orange-dark); text-decoration-color: currentColor; }
.card-crumbs [aria-current] { color: var(--ink-2); font-weight: 600; }

/* ---------- dark: dunkle Seite, helle Schrift außerhalb der Formularkarte ---------- */
.card-page--dark {
    background-color: var(--card-bg);
    background-image: var(--card-bg-image);
}
.card-page--dark .brand-text { color: #fff; }
.card-page--dark .brand-dot { color: var(--card-gold); }
.card-page--dark .brand-sub { color: rgba(255, 255, 255, .7); }
.card-page--dark .card-hero__eyebrow {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .28);
    color: var(--card-gold);
    box-shadow: none;
}
.card-page--dark .card-hero__title { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.card-page--dark .card-hero__sub { color: rgba(255, 255, 255, .86); }
.card-page--dark .card-hero__steps li {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}
.card-page--dark .card-hero__steps li + li::before { color: rgba(255, 255, 255, .5); }
.card-page--dark .faq-title,
.card-page--dark .card-how__title,
.card-page--dark .card-texts__title,
.card-page--dark .card-more__title { color: #fff; }
.card-page--dark .card-crumbs,
.card-page--dark .card-crumbs a { color: rgba(255, 255, 255, .66); }
.card-page--dark .card-crumbs a:hover { color: var(--card-gold); }
.card-page--dark .card-crumbs [aria-current] { color: #fff; }
.card-page--dark .card-more__all a { color: var(--card-gold); }
.card-page--dark .site-footer {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .7);
}
.card-page--dark .footer-inner a { color: rgba(255, 255, 255, .78); }
.card-page--dark .footer-inner a:hover { color: var(--card-gold); }

/* ---------- lights: Lichterkette am oberen Seitenrand ---------- */
.card-lights {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    height: 2.4rem;
    border-top: 2px solid #2b3f5a;
    pointer-events: none;
}
.card-lights i {
    position: relative;
    flex: 0 0 auto;
    width: .72rem;
    height: 1.05rem;
    margin-top: .34rem;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    background: var(--bulb);
    box-shadow: 0 0 12px 3px var(--bulb);
    animation: card-twinkle 2.6s ease-in-out infinite alternate;
}
.card-lights i::before {            /* Fassung */
    content: "";
    position: absolute;
    top: -.34rem;
    left: 50%;
    width: .36rem;
    height: .38rem;
    transform: translateX(-50%);
    background: #2b3f5a;
    border-radius: 1px;
}
.card-lights i:nth-child(odd) { margin-top: .75rem; }
.card-lights i:nth-child(odd)::before { top: -.75rem; height: .8rem; width: 2px; }
.card-lights i:nth-child(5n + 1) { --bulb: #ff4d5e; animation-delay: -.3s; }
.card-lights i:nth-child(5n + 2) { --bulb: #ffd166; animation-delay: -1.4s; }
.card-lights i:nth-child(5n + 3) { --bulb: #4cd08a; animation-delay: -2.1s; }
.card-lights i:nth-child(5n + 4) { --bulb: #5aa9ff; animation-delay: -.9s; }
.card-lights i:nth-child(5n + 5) { --bulb: #ff8ad1; animation-delay: -1.8s; }
@keyframes card-twinkle {
    0%   { opacity: .55; filter: brightness(.85); }
    100% { opacity: 1; filter: brightness(1.2); }
}
@media (prefers-reduced-motion: reduce) {
    .card-lights i { animation: none; }
}
@media (max-width: 600px) {
    .card-lights i:nth-child(3n) { display: none; }
}

/* ---------- bauble: Preis als Christbaumkugel — Kappe, Glanzlicht, pendelt ---------- */
.card-page--bauble .card-hero__price {
    position: relative;
    margin-top: 2.6rem;
    background:
        radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .55) 0, rgba(255, 255, 255, 0) 26%),
        var(--grad-warm);
    transform-origin: 50% -1.6rem;
    animation: card-swing 4.5s ease-in-out infinite alternate;
}
.card-page--bauble .card-hero__price::before {      /* Kappe */
    content: "";
    position: absolute;
    top: -.62rem;
    left: 50%;
    width: 1.7rem;
    height: .9rem;
    transform: translateX(-50%);
    border-radius: .3rem .3rem .12rem .12rem;
    background: linear-gradient(180deg, #ffe9a8, #c9a227);
}
.card-page--bauble .card-hero__price::after {       /* Faden */
    content: "";
    position: absolute;
    top: -2.4rem;
    left: 50%;
    width: 2px;
    height: 1.8rem;
    transform: translateX(-50%);
    background: #e3c565;
}
.card-page--bauble .card-hero__price:hover { animation-play-state: paused; }
@keyframes card-swing {
    0%   { transform: rotate(7deg); }
    100% { transform: rotate(-5deg); }
}
@media (min-width: 1321px) {
    .card-page--bauble .card-hero__price { position: absolute; margin: 0; top: 1.2rem; right: -10.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .card-page--bauble .card-hero__price { animation: none; }
}

/* ---------- calm: ruhige Seite (Beileid) — nichts wackelt, nichts klebt schief ---------- */
.card-page--calm .card-hero__title { font-weight: 700; letter-spacing: -.025em; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.12; }
.card-page--calm .card-hero__price,
.card-page--calm .card-hero__price:hover {
    position: static;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    width: auto;
    aspect-ratio: auto;
    margin: 1.4rem auto 0;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--card-line-soft);
    box-shadow: var(--shadow-xs);
    color: var(--card-ink);
    transform: none;
}
.card-page--calm .card-hero__price-ab,
.card-page--calm .card-hero__price-note { font-size: .82rem; font-weight: 500; opacity: 1; }
.card-page--calm .card-hero__price-value { font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.card-page--calm .card-hero__price-note::before { content: "· "; }
.card-page--calm .cd-design:hover,
.card-page--calm .cd-design:nth-child(even):hover { transform: none; }
.card-page--calm .cd-num { box-shadow: none; }
.card-page--calm .cd-tab__icon { display: none; }

/* ---------- Formular: Upload-Block weg, Gestalter rein ---------- */
/* Der generische „Dokument hochladen / Brief schreiben“-Block ist hier ohne
   Funktion — das PDF kommt aus dem Gestalter. Auch die Vorteils-Kacheln unter
   dem Formular passen nicht: Sie sprechen vom Hochladen und von Kündigungen. */
.card-page .tool-form [data-block="1"],
.card-page .benefits { display: none; }

.card-designer { padding-bottom: .25rem; }
.cd-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.9rem 0 .8rem;
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--ink);
}
.cd-title:first-of-type { margin-top: 0; }
.cd-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--grad-warm);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    box-shadow: var(--shadow-orange);
}
.cd-hint {
    margin: -.35rem 0 .8rem;
    color: var(--muted);
    font-size: .92rem;
}

/* Briefpapier-Kacheln: so viele Spalten, wie Designs da sind (4 bis 6) */
.cd-designs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: .7rem;
}
.cd-design {
    position: relative;
    display: grid;
    align-content: start;
    gap: .15rem;
    padding: .4rem .4rem .55rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cd-design img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(31, 36, 48, .12);
}
.cd-design__name { margin-top: .35rem; font-size: .86rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.cd-design__tag { font-size: .68rem; line-height: 1.25; color: var(--muted); }
.cd-design:hover { transform: translateY(-4px) rotate(-1.5deg); border-color: var(--card-line); box-shadow: var(--shadow-sm); }
.cd-design:nth-child(even):hover { transform: translateY(-4px) rotate(1.5deg); }
.cd-design.is-active {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--card-ring), var(--shadow-sm);
}
.cd-design.is-active::after {
    content: var(--card-check);
    position: absolute;
    top: -.65rem;
    right: -.55rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--grad-warm);
    color: #fff;
    font-size: .9rem;
    box-shadow: var(--shadow-orange);
}
.card-page--compact .cd-design { padding: .35rem .3rem .5rem; }
.card-page--compact .cd-design__name { font-size: .78rem; letter-spacing: -.02em; }
.card-page--compact .cd-design__tag { font-size: .64rem; }
.cd-design:focus-visible,
.cd-chip:focus-visible,
.cd-tab:focus-visible,
.cd-sigstyle:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Chips: Textvorschläge und Schriftwahl */
.cd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1rem;
}
.cd-chip {
    padding: .5rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cd-chip:hover { border-color: var(--card-line); transform: translateY(-1px); }
.cd-chip.is-active { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-dark); }
.cd-fontrow .cd-chips { margin: .35rem 0 0; }
.cd-font--courgette { font-family: 'Courgette', cursive; }
.cd-font--indieflower { font-family: 'Indie Flower', cursive; font-size: 1.02rem; }
.cd-font--crimson { font-family: 'Crimson Text', serif; font-style: italic; font-size: 1.05rem; }
.cd-font--parisienne { font-family: 'Parisienne', cursive; }
.cd-font--sacramento { font-family: 'Sacramento', cursive; }
.cd-font--mrdafoe { font-family: 'Mr Dafoe', cursive; }

/* Textfeld wie die übrigen Eingabefelder (styles.css kennt nur #write-body) */
.card-designer textarea {
    width: 100%;
    min-height: 11rem;
    font: inherit;
    font-size: 1rem;             /* ≥16px → kein iOS-Auto-Zoom beim Fokussieren */
    line-height: 1.6;
    padding: .9rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.card-designer textarea:hover { border-color: #d8d8e0; }
.card-designer textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px var(--card-ring);
}
.cd-warn {
    margin: .5rem 0 0;
    padding: .55rem .8rem;
    border-radius: var(--radius-sm);
    background: #fff4e5;
    border: 1px solid #ffd8a8;
    color: #8a4b08;
    font-size: .88rem;
}

.cd-warn + .cd-warn { margin-top: .4rem; }
.cd-warn--error { background: #fff0f1; border-color: #f5b5bd; color: #9f1239; }

/* Anhänge (Schritt 4) */
.cd-optional { margin-left: .2rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.cd-attach { display: grid; gap: .5rem; margin: 0 0 .7rem; padding: 0; list-style: none; }
.cd-attach__item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
}
.cd-attach__thumb {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 54px;
    border-radius: 6px;
    background: var(--orange-soft);
    object-fit: cover;
    font-size: .68rem;
    font-weight: 800;
    color: var(--orange-dark);
}
.cd-attach__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; font-weight: 600; color: var(--ink); }
.cd-attach__pages { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }
.cd-attach__remove {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.cd-attach__remove:hover { border-color: #f5b5bd; color: #9f1239; }
.cd-attach__add {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.05rem;
    border: 1.5px dashed var(--card-line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .93rem;
    font-weight: 700;
    color: var(--orange-dark);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.cd-attach__add:hover { border-color: var(--orange); background: var(--orange-soft); }
.cd-attach__busy { margin-left: .7rem; font-size: .88rem; color: var(--muted); }
.cd-attach__add ~ .cd-warn { margin-top: .7rem; }

/* Unterschrift */
.cd-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    padding: .3rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    background: #f4f3f6;
}
.cd-tab {
    padding: .6rem .5rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
}
.cd-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.cd-sigstyles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}
.cd-sigstyle {
    display: grid;
    place-items: center;
    min-height: 3.6rem;
    padding: .35rem .6rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--card-ink);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
}
.cd-sigstyle:hover { border-color: var(--card-line); }
.cd-sigstyle.is-active { border-color: var(--orange); background: var(--orange-soft); }
.cd-sigstyle__label { font-family: var(--font-sans); font-size: .88rem; font-weight: 600; color: var(--ink-2); }
.cd-sigstyle__name { font-size: 1.75rem; line-height: 1.15; white-space: nowrap; }
.cd-font--mrdafoe .cd-sigstyle__name { font-size: 1.5rem; }

.cd-sigpad {
    position: relative;
    height: 150px;
    border: 2px dashed var(--card-line);
    border-radius: var(--radius-md);
    background: #fffdfd;
    touch-action: none;
}
.cd-sigpad canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.cd-sigpad__hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: .92rem;
    pointer-events: none;
}
.cd-sigpad__clear {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .25rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

/* ---------- So funktioniert’s: was passiert, in ganzen Sätzen ---------- */
.card-how { margin-top: 2.5rem; }
.card-how__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.card-how__item {
    padding: 1.2rem 1.3rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.card-how__item h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.card-how__item p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-2); }
.card-how__num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--orange-soft);
    font-size: .85rem;
    color: var(--orange-dark);
}
@media (max-width: 1100px) { .card-how__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .card-how__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Textvorschläge als lesbarer Inhalt ---------- */
.card-texts { margin-top: 2.5rem; }
.card-how__title,
.card-texts__title {
    margin: 0 0 1.1rem;
    text-align: center;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}
.card-texts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1rem;
}
.card-texts__item {
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.3rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-xs);
}
.card-texts__item h3 { margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; color: var(--orange-dark); }
.card-texts__item p { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.card-texts__greeting { font-weight: 700; color: var(--ink) !important; }
.card-texts__closing { font-style: italic; }
.card-texts__use { margin-top: auto; padding-top: .3rem; font-size: .9rem; font-weight: 700; color: var(--orange-dark); }

/* ---------- Querverweise: weitere Anlässe + normaler Briefversand ---------- */
.card-more { margin-top: 2.5rem; }
.card-more__title {
    margin: 0 0 1.1rem;
    text-align: center;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}
.card-more__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .9rem;
}
.card-more__item,
.card-more__home {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem .8rem .8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-more__item:hover,
.card-more__home:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--card-line);
    box-shadow: var(--shadow-sm);
}
.card-more__item img {
    flex: 0 0 auto;
    width: 58px;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(31, 36, 48, .14);
    transform: rotate(-3deg);
}
.card-more__item:nth-child(even) img { transform: rotate(3deg); }
.card-more__text { display: grid; gap: .1rem; min-width: 0; }
.card-more__name { font-weight: 800; line-height: 1.25; }
.card-more__teaser { font-size: .88rem; line-height: 1.35; color: var(--muted); }
.card-more__all { margin: 1rem 0 0; text-align: center; font-weight: 700; }
.card-more__all a { color: var(--orange-dark); }
.card-more__home { margin-top: 1.4rem; padding: 1rem 1.2rem; }
.card-more__home-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 14px;
    background: var(--orange-soft);
    font-size: 1.3rem;
}
.card-more__cta { margin-left: auto; flex: 0 0 auto; font-weight: 700; color: var(--orange-dark); white-space: nowrap; }

/* ---------- Übersicht „Grüße für jeden Anlass“ ---------- */
.card-hero--hub { margin-bottom: 2.4rem; }
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.2rem;
}
.hub-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.hub-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.hub-card__paper {
    display: grid;
    place-items: center;
    padding: 1.3rem 1rem 1rem;
    background: linear-gradient(180deg, #faf7f2 0%, #f1ece4 100%);
}
.hub-card__paper img {
    width: 62%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(31, 36, 48, .18);
    transform: rotate(-2.5deg);
    transition: transform .2s ease;
}
.hub-card:nth-child(even) .hub-card__paper img { transform: rotate(2.5deg); }
.hub-card:hover .hub-card__paper img { transform: rotate(0deg) scale(1.04); }
.hub-card__body { display: grid; gap: .25rem; padding: .9rem 1rem 1rem; }
.hub-card__title { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
.hub-intro { max-width: 640px; margin: 2rem auto 0; text-align: center; color: var(--ink-2); }
.hub-card__teaser { font-size: .9rem; line-height: 1.4; color: var(--muted); }
.hub-card__cta { margin-top: .35rem; font-size: .9rem; font-weight: 700; color: var(--orange-dark); }
.card-more__home--hub { margin: 2rem 0 0; }
.card-page--hub .site-footer { margin-top: 2.5rem; }

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
    .card-hero { margin-bottom: 1.25rem; order: -2; }
    .card-hero__sub { font-size: 1rem; }
    .card-hero__steps li { font-size: .84rem; padding: .4rem .7rem; }
    .card-hero__steps li + li::before { content: none; }
    /* Kacheln zum Wischen — nebeneinander wären sie zu klein zum Erkennen */
    .cd-designs {
        display: flex;
        gap: .6rem;
        margin: 0 -1rem;
        padding: .7rem 1rem .4rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .cd-design { flex: 0 0 38%; scroll-snap-align: center; }
    .cd-design:hover, .cd-design:nth-child(even):hover { transform: none; }
    .card-page--compact .cd-design__name { font-size: .86rem; letter-spacing: 0; }
    .card-page--compact .cd-design__tag { font-size: .68rem; }
    .cd-title { font-size: 1.1rem; }
    .cd-sigstyle__name { font-size: 1.5rem; }
    .card-more__home { flex-wrap: wrap; }
    .card-more__cta { margin-left: 3.7rem; white-space: normal; }
    .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .hub-card__body { padding: .7rem .75rem .85rem; }
    .hub-card__title { font-size: .95rem; }
    .hub-card__teaser { font-size: .82rem; }
}