/* Memoro landing — minimal SaaS, mobile-first */

/* Landing-Page Variablen: Aliase auf die zentralen Tokens (tokens.css).
   Brand-Farben kommen ab jetzt aus einer Quelle – Landing und App
   sind visuell konsistent. */
:root {
    --bg:                var(--neutral-bg);
    --bg-alt:            #ebeef5;
    --text:              var(--neutral-text-strong);
    --text-muted:        var(--neutral-text-muted);
    --surface:           var(--neutral-surface);
    --primary:           var(--brand-primary);
    --primary-hover:     var(--brand-primary-hover);
    --primary-soft:      var(--brand-primary-soft);
    --accent:            var(--brand-accent);
    --accent-soft:       var(--brand-accent-soft);
    --border:            var(--neutral-border);
    /* Vertikaler Rhythmus. Vorher standen diese Werte an sieben Stellen
       einzeln im Stylesheet; wer einen davon aenderte, bekam nichts zu
       sehen, weil die Rand-Abstaende benachbarter Bloecke kollabieren und
       jeweils der groesste gewinnt. Jetzt an einer Stelle. */
    --space-section:     clamp(2.25rem, 5vw, 3.5rem);   /* Sektion oben/unten */
    --space-block:       clamp(1.5rem, 3vw, 2.25rem);   /* Ueberschrift <-> Inhaltsblock */
    --space-block-tight: clamp(1.25rem, 2.75vw, 2rem);  /* Block <-> Schlusssatz */

    --radius-sm:         10px;
    --radius-md:         14px;
    --radius-lg:         20px;
    --shadow-card:       0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(15, 23, 42, 0.08);
    --container:         1120px;
    --narrow:            var(--layout-narrow-max);
    --tap-min:           var(--layout-tap-min);
    --font:              system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html {
    scroll-behavior: smooth;

    /* ——— Sprungmarken unter dem Sticky-Header ———

       Der Header klebt oben (position: sticky) und ist damit fuer den
       Browser nicht vorhanden, wenn er ein Sprungziel anfaehrt: die
       Sektion landet mit ihrer Oberkante am Viewport-Rand, der Header
       liegt darueber und verdeckt genau die Ueberschrift, wegen der man
       gesprungen ist. Gemessen hat KEIN Sprungziel einen Abstand gehabt
       (scrollMarginTop = 0px), bei 75px Headerhoehe.

       scroll-padding-top am html loest das fuer ALLE Ziele auf einmal —
       Sektionen, FAQ-Eintraege, Karussell-Karten. An jedes Ziel einzeln
       ein scroll-margin-top zu schreiben hiesse, es beim naechsten neuen
       Abschnitt wieder zu vergessen.

       --header-h setzt main.js aus der tatsaechlichen Hoehe; der Wert
       hier ist der Notnagel, falls das JS nicht laeuft. Die 12px obendrauf
       sind Luft, damit die Ueberschrift nicht an der Headerkante klebt. */
    scroll-padding-top: calc(var(--header-h, 76px) + 12px);
}

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

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0.5rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background: var(--text);
    color: #fff;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.skip-link:focus {
    left: 0.5rem;
}

/* ——— Layout ——— */

.container {
    width: min(var(--container), calc(100% - 2.5rem));
    margin-inline: auto;
}

.container--narrow {
    width: min(var(--narrow), calc(100% - 2.5rem));
}

/* ——— Header ——— */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(244, 246, 250, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--tap-min);
    padding-block: 0.65rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.brand img {
    height: 34px;
    width: auto;
}

.nav {
    display: none;
    align-items: center;
    gap: 0.25rem 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.nav a {
    position: relative;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.35rem 0;
    transition: color 0.15s ease;
}

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

/* Claim in der Kopfleiste: enger gesetzt als sonst, damit die klebende
   Leiste nicht spuerbar waechst. Unter 900px ganz weg — dort teilt sich
   die Zeile mit dem Burger-Menue und dem Startknopf. */
.brand-lockup--header { gap: .12rem; }
.brand-lockup--header .brand-lockup__claim { font-size: .68rem; }

@media (max-width: 899px) {
    .brand-lockup--header .brand-lockup__claim { display: none; }
}

/* Trenner zwischen den Sprungmarken dieser Seite und den Links auf
   eigene Seiten. Eine gezeichnete Linie statt eines Gedankenstrichs im
   Text: Zeichen waeren Inhalt und wuerden vorgelesen.

   Die Seitenlinks bleiben typografisch gleich — der Trenner genuegt, und
   zwei Schriftbehandlungen in einem sechsteiligen Menue waeren Unruhe.
   Den Unterschied macht ohnehin schon das Verhalten: die Sprungmarken
   werden beim Scrollen markiert, ein Seitenlink nie. */
.nav__sep {
    width: 1px;
    height: 1.1em;
    background: var(--border);
    margin-inline: 0.4rem;
    flex-shrink: 0;
}

/* Aktiver Menuepunkt beim Scrollen (gesetzt vom Scroll-Spy in main.js,
   nur ab 900px, wo das Menue ueberhaupt sichtbar ist).

   Text im dunkleren Blau: das reine Markenblau kommt auf dem
   Headergrund nur auf 4.41 und bleibt damit unter 4.5 fuer die 0.9rem
   der Navigation. Den Balken traegt die helle Marke — fuer
   Nicht-Text-Elemente genuegen 3:1, und er soll leuchten.

   Der Balken ist absolut positioniert und die Schriftstaerke bleibt
   unveraendert: beides wuerde sonst die Breite bzw. Hoehe des Links
   aendern und die Navigation beim Scrollen zittern lassen. */
.nav a.is-current {
    color: var(--brand-primary-dark, #1A57BD);
}

.nav a.is-current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-primary, #226CEA);
}

/* ——— Lesefortschritt (nur mobil) ———

   Auf dem Desktop beantwortet die Menue-Markierung "wo bin ich". Mobil
   ist das Menue zugeklappt, also bleibt nur "wie weit noch" — bei
   vierzehn Sektionen die eigentliche Frage.

   Die Leiste liegt absolut auf der Unterkante des Headers und kostet
   keine Bauhoehe; auf einem Telefon ist jeder Pixel oberhalb des
   Inhalts teuer. Das geht nur, weil .mobile-nav ebenfalls absolut
   positioniert ist und den Header beim Aufklappen nicht wachsen laesst
   — sonst wanderte die Leiste an die Unterkante des offenen Panels. */
.read-progress {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;          /* deckt die 1px-Trennlinie des Headers */
    height: 3px;
    z-index: 95;           /* ueber dem Menue-Panel (z-index 90) */
    pointer-events: none;
    overflow: hidden;
}

.read-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--brand-primary, #226CEA);
    /* Bewusst ohne Uebergang: eine Animation liefe dem Finger hinterher
       und liesse die Leiste traege wirken. */
}

@media (max-width: 899px) {
    .read-progress {
        display: block;
    }
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ——— Buttons ——— */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    padding: 0.65rem 1.15rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(59, 111, 217, 0.25);
}

.btn--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: 0 4px 14px rgba(59, 111, 217, 0.35);
}

.btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.btn--secondary:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* Gedeckt statt blau. "Anmelden" stand in derselben Signalfarbe direkt
   neben "Kostenlos starten" — zwei blaue Beschriftungen nebeneinander
   lesen sich als gleichrangig, obwohl nur eine davon der Weg fuer neue
   Besucher ist. Wer schon ein Konto hat, sucht "Anmelden" gezielt und
   findet es auch gedeckt. */
.btn--ghost {
    background: transparent;
    color: var(--text-muted, #64748b);
    border-color: transparent;
    min-height: auto;
    padding-inline: 0.65rem;
}

.btn--ghost:hover {
    background: var(--primary-soft);
    color: var(--primary-hover);
}

.header__actions .btn--ghost {
    min-height: var(--tap-min);
    padding-inline: 0.85rem;
}

.btn--lg {
    min-height: 48px;
    padding-inline: 1.35rem;
    font-size: 1rem;
    border-radius: 12px;
}

.btn--hero {
    min-height: 52px;
    padding-inline: 2rem;
    font-size: 1.0625rem;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(59, 111, 217, 0.3);
}

.btn--hero:hover {
    box-shadow: 0 6px 24px rgba(59, 111, 217, 0.4);
    transform: translateY(-1px);
}

.btn--block {
    width: 100%;
}

/* ——— Hero ——— */

.hero {
    padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(2.5rem, 6vw, 4rem);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(124, 108, 240, 0.08), transparent 50%),
        radial-gradient(90% 60% at 0% 100%, rgba(59, 111, 217, 0.1), transparent 45%),
        var(--bg);
    border-bottom: 1px solid var(--border);
}

.hero__grid {
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 4vw, 3rem);
}

.hero__copy {
    max-width: 38rem;
    text-align: center;
    margin-inline: auto;
}

.badge {
    display: inline-block;
    background: var(--primary-soft);
    color: #2f4f9e;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}
/* „Ihr plant eine Feier?" — die erste Ansprache der Seite. Als
   13-px-Pille ging sie neben der Headline unter. Waechst mit dem
   Viewport statt fester Groesse, damit sie auf dem Telefon nicht die
   halbe Zeile frisst und auf dem Desktop nicht verloren wirkt. */
.badge--hero {
    font-size: clamp(1rem, 0.85rem + 1vw, 1.35rem);
    font-weight: 700;
    padding: 0.5rem 1.15rem;
    margin-bottom: 0.4rem;
}

.hero__title {
    margin: 0.75rem 0 0.5rem;
    font-size: clamp(1.85rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.hero__lead {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.125rem);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 36rem;
    margin-inline: auto;
}

.hero-diagram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem 0.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hero-diagram__step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.hero-diagram__icon {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.hero-diagram__icon svg {
    width: 1rem;
    height: 1rem;
}

.hero-diagram__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

.hero-diagram__arrow {
    display: grid;
    place-items: center;
    color: var(--text-muted);
    list-style: none;
}

.hero-diagram__arrow svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.5;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
}

/* Die Zusatzzeile nimmt dem Knopf die Unsicherheit ("was kostet mich
   das Klicken?"), ohne selbst um Aufmerksamkeit zu buhlen. Deshalb
   klein und gedeckt — sie wird gelesen, nachdem der Knopf gesehen ist. */
.hero__actions-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
    text-align: center;
}

/* "Preise" als Textlink statt als Knopf: erreichbar, aber kein zweiter
   Wettbewerber neben der einen Aktion. Gedeckt statt blau, damit im
   Hero genau EIN Element die Signalfarbe traegt. */
.hero__actions-aside {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.hero__actions-aside:hover,
.hero__actions-aside:focus-visible {
    color: var(--primary, #3b6fd9);
    border-bottom-color: currentColor;
}

.hero__visual {
    position: relative;
    max-width: 420px;
    margin-inline: auto;
}

.preview-browser {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-card-hover);
}

.preview-browser__chrome {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.85rem;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
}

.preview-browser__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.preview-browser__dot:first-child {
    background: #f87171;
}

.preview-browser__dot:nth-child(2) {
    background: #fbbf24;
}

.preview-browser__dot:nth-child(3) {
    background: #4ade80;
}

.preview-browser__url {
    flex: 1;
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: ui-monospace, monospace;
}

.preview-browser__body {
    padding: 0.85rem;
}

.preview-browser__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.preview-toolbar__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.preview-toolbar__pill {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.preview-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}

.preview-gallery__thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-alt);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.preview-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ——— Sections ——— */

/* KEIN content-visibility: auto mehr.

   Es stand hier als Rechenzeit-Ersparnis und hat die Navigation
   zerlegt: Abschnitte ausserhalb des Sichtfelds werden damit nicht
   gerechnet und haben KEINE Hoehe, solange sie nicht dran waren. Ohne
   contain-intrinsic-size als Platzhalter war die Seite beim Laden
   3425px lang statt 11435 und wuchs beim Scrollen Abschnitt fuer
   Abschnitt nach.

   Auf einem iPhone gemessen, beim Tippen auf „Vorlagen":

     klick        y=0     ziel=1823   doc=3425
     klick+0,3s   y=765   ziel=3229   doc=4831
     klick+1,5s   y=5505  ziel=7347   doc=8949
     klick+3s     y=7272  ziel=9832   doc=11435

   Der Anker zeigte korrekt auf 1823 — dort lag der Abschnitt in dem
   Moment ja auch. Nur lag er kurz darauf bei 9832. Kein Sprungziel
   ueberlebt es, wenn es nach dem Sprung achttausend Pixel weiterwandert.

   Am Desktop fiel es nicht auf: breiter Viewport, flachere Abschnitte,
   und Blink rechnet mehr vor. Auf iOS ist jeder Browser WebKit —
   deshalb traf es dort Safari UND die Chrome-App.

   Mit contain-intrinsic-size waere es nur kleiner geworden, nicht weg:
   eine geschaetzte Platzhalterhoehe ist immer noch die falsche. Eine
   Seite, deren Hoehe stimmt, ist mehr wert als die eingesparte
   Rechenzeit. */
.section {
    padding-block: var(--space-section);
}

.section--alt {
    background: var(--bg-alt);
}

.section-header {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    margin-bottom: var(--space-block);
}

.section-header__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.section-header__kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary-dark, #1A57BD);
}

.section-header--pricing .section-header__title {
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    color: #1a1d26;
}

.section-header__intro {
    margin: 0;
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* ——— Cards ——— */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: clamp(1.1rem, 2.5vw, 1.35rem);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.card--elevated {
    box-shadow: var(--shadow-card);
}

.card--elevated:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: #d8dee9;
}

/* ——— How it works ——— */

.section--how {
    background:
        radial-gradient(ellipse 50% 60% at 15% 80%, rgba(124, 108, 240, 0.06) 0%, transparent 100%),
        radial-gradient(ellipse 40% 50% at 85% 20%, rgba(59, 111, 217, 0.05) 0%, transparent 100%),
        linear-gradient(180deg, #f8f7ff 0%, #eef2ff 50%, #f4f2ff 100%);
}

.how-steps {
    display: grid;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.how-step {
    position: relative;
    background: var(--surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
    box-shadow: 0 1px 4px rgba(124, 108, 240, 0.05), 0 6px 20px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    transform: translateY(24px);
}

.how-step.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.how-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(124, 108, 240, 0.1), 0 12px 32px rgba(15, 23, 42, 0.07);
    border-color: #d0d5ee;
}

.how-step.is-visible:hover {
    transform: translateY(-4px);
}

.how-step__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 14px;
    margin: 0 auto 0.75rem;
    transition: transform 0.3s ease;
}

.how-step:hover .how-step__icon {
    transform: scale(1.1);
}

.how-step__icon svg {
    width: 1.6rem;
    height: 1.6rem;
}

.how-step--event .how-step__icon {
    background: rgba(59, 111, 217, 0.14);
    color: var(--primary);
}

.how-step--qr .how-step__icon {
    background: rgba(124, 108, 240, 0.14);
    color: var(--accent);
}

.how-step--upload .how-step__icon {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
}

.how-step--shield .how-step__icon {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.how-step__label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.2rem;
}

.how-step__title {
    margin: 0 0 0.2rem;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
}

.how-step__tagline {
    margin: 0 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
    font-style: italic;
}

.how-step__text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ——— Feature Highlights ——— */

.section--highlights {
    background:
        radial-gradient(ellipse 50% 60% at 20% 75%, rgba(124, 108, 240, 0.05) 0%, transparent 100%),
        radial-gradient(ellipse 40% 50% at 80% 25%, rgba(59, 111, 217, 0.04) 0%, transparent 100%),
        linear-gradient(180deg, #f8f7ff 0%, #eef2ff 50%, #f4f2ff 100%);
}

.highlights-grid {
    display: grid;
    gap: 1rem;
}

/* User-Feedback: Icon zentriert oben, Text darunter linksbuendig. */
.highlight-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 1rem);
    padding: 1.5rem 1.4rem 1.4rem;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.highlight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(34, 108, 234, 0.1);
}

/* farbige Icon-Tiles zurück (Hybrid alt × neu).
   Semantische Sub-Gruppe — warm = Erlebnis, cool = Organisation. */
.highlight-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    /* Block + margin auto -> Icon horizontal zentriert ueber linksbuendigem Text. */
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.highlight-card__icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

.highlight-card__body {
    min-width: 0;
}

/* Erlebnis-Reihe (warm). */
.highlight-card__icon--slideshow  { background: #F1ECFE; color: #7C3AED; }
.highlight-card__icon--challenges { background: #FEF3C7; color: #D97706; }
.highlight-card__icon--social     { background: #FCE7F3; color: #EC4899; }

/* Organisations-Reihe (cool). */
.highlight-card__icon--menu       { background: #EAF2FE; color: #226CEA; }
.highlight-card__icon--moderation { background: #DBEAFE; color: #1D4ED8; }
.highlight-card__icon--export     { background: #E6F7EF; color: #10B981; }

.highlight-card__title {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.highlight-card__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ——— Templates ——— */

.template-grid {
    display: grid;
    gap: 1rem;
}

.template-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.template-card__preview {
    position: relative;
    height: clamp(150px, 28vw, 200px);
    overflow: hidden;
    background: var(--bg-alt);
}

.template-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.35s ease;
}

.template-card:hover .template-card__photo {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .template-card:hover .template-card__photo {
        transform: none;
    }
}

.template-card__title {
    margin: 0;
    padding: 1rem 1.25rem 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
}

.template-card__tag {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ——— Pricing ——— */

.section--pricing {
    background: #f7f4ef;
}

.pricing-billing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem 1rem;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.pricing-billing__label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #3d4454;
}

.pricing-billing__label--event {
    color: #1a1d26;
}

.pricing-billing__right {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
}

.pricing-billing__save {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.18);
    color: #166534;
    letter-spacing: 0.02em;
}

.pricing-billing__switch {
    position: relative;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    background: #cfe2ff;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.pricing-billing__switch:hover {
    background: #bcd7ff;
}

.pricing-billing__switch.is-subscription,
.pricing-billing__switch[aria-checked="true"] {
    background: #3b6fd9;
}

.pricing-billing__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
    transition: transform 0.2s ease;
}

.pricing-billing__switch.is-subscription .pricing-billing__thumb,
.pricing-billing__switch[aria-checked="true"] .pricing-billing__thumb {
    transform: translateX(24px);
}

@media (prefers-reduced-motion: reduce) {
    .pricing-billing__thumb {
        transition: none;
    }
}

.pricing-grid {
    display: grid;
    gap: 1rem;
    align-items: stretch;
}

.plan-card {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 1.65rem 1.35rem 1.5rem;
    border-radius: 16px;
    border: 1px solid #e6e4df;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    min-height: 100%;
}

.plan-card--light {
    padding-top: 1.5rem;
}

/* ── Tarif-Identität: Starter Roségold · Plus Nachtblau · Pro Gold ──
   Aufbau und Layout der Karten bleiben unverändert; jeder Tarif bekommt
   nur seine eigene Akzentfarbe über --plan-accent / --plan-ink.

   Wichtig: Roségold (#CE7F63) und Gold (#B0863A) erreichen als Textfarbe
   nur 3.07 bzw. 3.32 gegen Weiß — zu wenig für die 0,9rem der Feature-
   Liste. Für alles, was Text ist, gilt deshalb --plan-ink (die
   abgedunkelte Variante); die reine Markenfarbe bleibt Flächen und
   Rändern vorbehalten. */
.plan-card[data-plan-code="starter"] {
    --plan-accent: var(--tier-starter);
    --plan-ink:    var(--tier-starter-ink);
    --plan-soft:   var(--tier-starter-bg);
    border-color: var(--tier-starter-border);
}

.plan-card[data-plan-code="pro"] {
    --plan-accent: var(--tier-pro);
    --plan-ink:    var(--tier-pro-ink);
    --plan-soft:   var(--tier-pro-bg);
    border-color: var(--tier-pro-border);
}

/* Free steht hier bewusst NICHT: der Gratis-Tarif ist keine .plan-card,
   sondern die kleinere .plan-free-card weiter unten (Sub-Card unter den
   Hauptkarten). Eine Regel auf [data-plan-code="free"] traefe nichts —
   im Browser nachgesehen: das Element existiert nicht. Seine Farben
   holt er sich aus --tier-free. */

/* Plus ist normalerweise die hervorgehobene Karte und traegt dann
   Nachtblau + Champagner. Faellt die Hervorhebung im Admin weg, stuende
   die Karte sonst voellig ohne Tarifidentitaet da. */
.plan-card[data-plan-code="plus"] {
    --plan-accent: var(--tier-plus);
    --plan-ink:    var(--tier-plus-ink);
    --plan-soft:   var(--tier-plus-bg);
    border-color: var(--tier-plus-border);
}

/* Doppelte Klasse mit Absicht: die Tarif-Regeln oben sind
   .plan-card[data-plan-code="..."] und damit spezifischer als eine
   einzelne Klasse. Ohne die Verdopplung hat der hervorgehobene Tarif
   sein eigenes dunkles ink zurueckgeholt — dunkler Text auf dunkelblauer
   Karte. Welcher Tarif hervorgehoben ist, entscheidet der Admin; die
   Regel muss deshalb fuer jeden Code gewinnen, nicht nur fuer Plus. */
.plan-card.plan-card--popular {
    /* Auf dem dunklen Nachtblau trägt Champagner die Akzente — hoher
       Kontrast und zugleich die zweite Markenfarbe statt eines
       beliebigen Hellblaus. */
    --plan-accent: var(--brand-champagne);
    --plan-ink:    var(--brand-champagne);
    border: 1px solid #16233a;
    background: linear-gradient(165deg, #16233a 0%, #0F1B2E 55%, var(--tier-plus) 100%);
    color: #f4f4f5;
    box-shadow: 0 18px 50px rgba(11, 20, 36, 0.3);
    z-index: 1;
}

@media (min-width: 900px) {
    .plan-card--popular {
        transform: scale(1.02);
    }
}

.plan-card__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0.35rem 0.85rem;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Champagner statt des blauen Markenverlaufs: die Plakette sitzt auf
       der nachtblauen Karte, und Blau auf Blau war der Rest des alten
       Farbschemas. Nachtblau auf Champagner kommt auf 13.57. */
    color: var(--tier-plus);
    background: var(--brand-champagne);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(11, 20, 36, 0.45);
    white-space: nowrap;
}

/* Name und Preis tragen die Tariffarbe — vorher lagen die Farben nur
   auf Haekchen, Rand und Button, und die Karte las sich neutral. Die
   beiden groessten Elemente entscheiden, ob ein Tarif golden wirkt.
   Gegen Weiss kommt Gold-Ink auf 5.00 und Rosegold-Ink auf 5.09; die
   reinen Markenfarben blieben mit 3.32 / 3.07 zu schwach. */
.plan-card__name {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--plan-ink, inherit);
}

.plan-card--popular .plan-card__name {
    color: var(--plan-ink);
}

.plan-card__desc {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #5c6578;
}

.plan-card--popular .plan-card__desc {
    color: rgba(255, 255, 255, 0.72);
}

.plan-card__price {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.2;
    color: inherit;
}

.plan-card__amount {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--plan-ink, #0f172a);
}

.plan-card--popular .plan-card__amount {
    color: var(--plan-ink);
}

.plan-card__euro {
    font-size: 1.35rem;
    font-weight: 800;
    margin-left: 0.1rem;
    color: var(--plan-ink, #0f172a);
}

.plan-card--popular .plan-card__euro {
    color: var(--plan-ink);
}

.plan-card__period {
    font-weight: 500;
    font-size: 0.88rem;
    color: #64748b;
    margin-left: 0.15rem;
}

.plan-card--popular .plan-card__period {
    color: rgba(255, 255, 255, 0.55);
}

.plan-card__features {
    margin: 0 0 1.35rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.6rem;
    flex: 1;
}

.plan-card__features li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #334155;
}

.plan-card--popular .plan-card__features li {
    color: rgba(255, 255, 255, 0.92);
}

.plan-card__check {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.12rem;
    /* --plan-ink statt der reinen Tariffarbe: das Häkchen ist ein feines
       Zeichen und braucht denselben Kontrast wie Text. */
    color: var(--plan-ink, #3b82f6);
}

.plan-card--popular .plan-card__check {
    color: var(--plan-ink);
}

.plan-card__check svg {
    width: 100%;
    height: 100%;
}

.plan-card__cta {
    margin-top: auto;
    min-height: 46px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.plan-card__cta:active {
    transform: scale(0.98);
}

/* Der Button trägt die Tariffarbe als Fläche, der Text die
   kontraststarke ink-Variante. Ohne Tarif-Kontext bleibt es beim
   bisherigen Grau. */
.plan-card__cta--soft {
    background: var(--plan-soft, #eef1f5);
    color: var(--plan-ink, #334155);
    border: 1px solid var(--plan-accent, transparent);
}

/* Beim Hover trägt die ink-Variante die Fläche, nicht die reine
   Tariffarbe: Weiß auf Roségold käme nur auf 3.07, auf der
   abgedunkelten Variante dagegen auf 5.09. */
.plan-card__cta--soft:hover {
    background: var(--plan-ink, #e2e7ef);
    color: #fff;
    border-color: var(--plan-ink, transparent);
}

/* Auf der nachtblauen Karte war ein blauer Button kaum abgesetzt.
   Champagner traegt hier die Aktion — dieselbe Markenfarbe wie die
   Plakette, 13.57 gegen den Kartengrund. */
.plan-card__cta--primary-solid {
    background: var(--brand-champagne);
    color: var(--tier-plus);
    border: 1px solid var(--brand-champagne);
}

.plan-card__cta--primary-solid:hover {
    background: #F2EADB;
    border-color: #F2EADB;
}

/* Der Pro-Button war schiefergrau und damit das einzige Element der
   Karte ohne Gold. Jetzt Umriss in der Tariffarbe, beim Hover gefuellt. */
.plan-card__cta--outline {
    background: #fff;
    color: var(--plan-ink, #334155);
    border: 1px solid var(--plan-accent, #e2e8f0);
}

.plan-card__cta--outline:hover {
    background: var(--plan-ink, #f1f5f9);
    color: #fff;
    border-color: var(--plan-ink, #cbd5e1);
}

/* ——— Privacy ——— */

.privacy-grid {
    display: grid;
    gap: 1.25rem;
}

/* User-Feedback: Icon mittig oben, Titel + Bullet-List linksbuendig
   darunter. Konsistent mit den anderen Karten-Sektionen. */
.privacy-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 1rem);
    padding: 1.5rem 1.4rem 1.4rem;
    text-align: left;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.privacy-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(34, 108, 234, 0.1);
}

.privacy-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    /* Icon horizontal zentriert ueber dem linksbuendigen Text. */
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.85rem;
    background: var(--brand-tint, #EAF2FE);
    color: var(--brand-primary, #226CEA);
}

.privacy-card__icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

.privacy-card__body {
    /* Titel + Liste bleiben linksbuendig im Card-Body. */
    min-width: 0;
}
.privacy-card__list {
    text-align: left;
}

/* Legacy-Klassen — bleibt fuer Rueckwaerts-Kompat falls noch genutzt. */
.privacy-card__icon--shield { background: #E6F7EF; color: #10B981; }
.privacy-card__icon--eye    { background: #EAF2FE; color: #226CEA; }

.privacy-card__title {
    margin: 0 0 0.65rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.privacy-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.45rem;
    text-align: left;
}

.privacy-card__list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}

.privacy-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.7;
}

/* ——— FAQ ——— */

/* Polish: 12 Fragen in 3 thematischen Gruppen — Heading als kleines
   Eyebrow-Label über jeder Liste, damit die Antwortebene scanbarer wird. */
.faq-group + .faq-group {
    margin-top: 2rem;
}

.faq-group__heading {
    margin: 0 0 0.75rem;
    padding: 0 0.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-primary-dark, #1A57BD);
}

.faq-list {
    display: grid;
    gap: 0.65rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.faq-item__summary {
    padding: 1rem 1.1rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--tap-min);
}

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

.faq-item__summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-item__summary::after {
    transform: rotate(-135deg);
}

.faq-item__body {
    padding: 0 1.1rem 1rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    border-top: 1px solid transparent;
}

.faq-item[open] .faq-item__body {
    border-top-color: var(--border);
    padding-top: 0.75rem;
}

.faq-item__body p {
    margin: 0;
}

/* ——— Footer ——— */

.auth-footer-site.landing-site-footer {
    width: 100%;
    margin-top: 0;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.auth-footer-site-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

.auth-footer-copy {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.auth-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.5rem;
}

.auth-footer-links a {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    min-height: var(--tap-min);
    display: inline-flex;
    align-items: center;
}

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

.auth-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: var(--text-muted);
    transition: color 0.15s ease;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
}

.auth-footer-social a:hover {
    color: var(--primary);
}

.auth-footer-social svg {
    width: 12px;
    height: 12px;
    max-width: 12px;
    max-height: 12px;
    display: block;
    flex-shrink: 0;
    fill: currentColor;
}

/* ——— Trust-Strip ——— */

.trust-strip {
    padding: clamp(1.25rem, 3vw, 2rem) 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.trust-strip__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
}

.trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.trust-strip__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--primary-soft);
    color: var(--primary);
    flex-shrink: 0;
}

.trust-strip__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* ——— Upsells ——— */

.upsell-grid {
    display: grid;
    gap: 1rem;
}

.upsell-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.upsell-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: #d0d5de;
}

.upsell-card__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    flex-shrink: 0;
    color: #fff;
}

.upsell-card__icon--watermark {
    background: linear-gradient(135deg, #7c6cf0, #5b4fc4);
}

.upsell-card__icon--storage {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.upsell-card__icon--download {
    background: linear-gradient(135deg, #10b981, #059669);
}

.upsell-card__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.upsell-card__body {
    flex: 1;
    min-width: 0;
}

.upsell-card__title {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    font-weight: 700;
}

.upsell-card__text {
    margin: 0 0 0.45rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.upsell-card__price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
}

/* ——— Comparison Table ——— */

.comparison-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.75rem;
    padding: 0 0.75rem;
}

.comparison-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.comparison-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-alt);
    padding: 0.85rem 0.75rem;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.comparison-table thead th:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
}

.comparison-table__highlight {
    background: rgba(59, 111, 217, 0.06) !important;
    position: relative;
}

.comparison-table thead .comparison-table__highlight {
    color: var(--primary);
}

.comparison-table tbody td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}

.comparison-table tbody td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text);
}

/* User-Feedback: Sub-Rows unter den Gruppen-Headern einruecken,
   damit die Hierarchie sichtbar wird. Gruppen-Zellen bleiben buendig. */
.comparison-table tbody tr:not(.comparison-table__group) td:first-child {
    padding-left: 1.75rem;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table .check-icon {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    color: #22c55e;
}

.comparison-table .cross-icon {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    color: #cbd5e1;
}

.comparison-table__hint {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.2rem;
    line-height: 1.35;
}

.comparison-table__link {
    display: inline-block;
    font-size: 0.72rem;
    color: var(--primary);
    text-decoration: none;
    margin-top: 0.15rem;
}

.comparison-table__link:hover {
    text-decoration: underline;
}

.comparison-table__footnote {
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: center;
}

.comparison-table__group td {
    padding: 0.65rem 0.75rem 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: transparent;
    border-bottom: 2px solid var(--primary);
}

.comparison-table tbody tr.comparison-table__group:not(:first-child) td {
    padding-top: 1.25rem;
}

/* ——— CTA Banner ——— */

/* Brand-Blau-Gradient statt Lila — Conversion-Sektion bleibt im
   Farbsystem. Lila war pre-Audit. */
.cta-banner {
    padding: clamp(3rem, 7vw, 4.5rem) 0;
    background: linear-gradient(135deg, #226CEA 0%, #1A56C2 100%);
    color: #fff;
    text-align: center;
}

.cta-banner--brand {
    background: linear-gradient(135deg, #226CEA 0%, #1A56C2 100%);
}

.cta-banner__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cta-banner__text {
    margin: 0 0 1.75rem;
    font-size: 1.05rem;
    opacity: 0.88;
    max-width: 36rem;
    margin-inline: auto;
    line-height: 1.55;
}

.cta-banner .btn--secondary {
    background: #fff;
    color: #1e293b;
    border-color: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.cta-banner .btn--secondary:hover {
    background: #f1f5f9;
    border-color: #f1f5f9;
}

/* ——— Disabled features in plan cards ——— */

.plan-card__features--disabled li {
    text-decoration: line-through;
    opacity: 0.5;
}

/* ——— Breakpoints ——— */

@media (max-width: 479px) {
    .header__actions .btn {
        padding-inline: 0.7rem;
        font-size: 0.85rem;
    }

    .hero-diagram__arrow {
        display: none;
    }

    .hero-diagram {
        gap: 0.5rem;
    }

    .hero-diagram__step {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (min-width: 480px) {
    .template-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 640px) {
    /* Die Zeilenrichtung ist hier absichtlich weg. Sie stammt aus der
       Zeit mit zwei gleich grossen Knoepfen nebeneinander; jetzt stehen
       im Hero Knopf, Zusatzzeile und Preis-Link untereinander, und
       "row" haette sie ab 640px nebeneinander gelegt. */

    .how-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .highlights-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .privacy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* User-Feedback: Icon-Tile bleibt auf allen Viewports horizontal
       zentriert (margin auto). Frueher hier auf margin:0 0 0.75rem
       gesetzt -> Icon ist linksbuendig geworden. Behoben. */
    .privacy-card {
        text-align: left;
    }

    .upsell-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .template-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pricing-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .nav {
        display: flex;
    }

    .hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
        /* start statt center: die Textspalte ist deutlich kuerzer als das
           Handy daneben. Mittig ausgerichtet landete der ganze
           Hoehenunterschied als Leerraum UEBER der Ueberschrift — das
           Erste, was man sieht, war Nichts. */
        align-items: start;
        gap: clamp(2rem, 5vw, 4rem);
    }

    .hero__copy {
        text-align: left;
        margin-inline: 0;
    }

    .hero__lead {
        margin-inline: 0;
    }

    .hero-diagram {
        justify-content: flex-start;
    }

    .hero__actions {
        align-items: flex-start;
        justify-content: flex-start;
        margin-inline: 0;
    }

    .hero__visual {
        margin-inline: 0;
    }

    .auth-footer-site-inner {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
    }

    .trust-strip__inner {
        gap: 1rem 3rem;
    }
}

@media (min-width: 1024px) {
    .how-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        position: relative;
        counter-reset: step;
    }

    .how-step {
        z-index: 1;
        border-radius: var(--radius-lg);
        margin: 0 0.625rem;
    }

    .highlights-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    /* User-Feedback: Icon-Tile bleibt auch hier zentriert ueber dem
       linksbuendigen Text. Frueher: margin:0 0 0.75rem -> linksbuendig. */
    .highlight-card {
        text-align: left;
    }

    .how-step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -0.75rem;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid var(--primary);
        border-right: 2px solid var(--primary);
        transform: translateY(-50%) rotate(45deg);
        opacity: 0.25;
    }
}


/* ============================================================
   Landing — neue & überarbeitete Bausteine
   ============================================================ */

/* ──────────── Header: Scroll-Shadow + Mobile-Burger ──────────── */
.header.is-scrolled {
    box-shadow: 0 1px 0 rgba(11, 18, 32, 0.06), 0 10px 30px rgba(11, 18, 32, 0.05);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
}

.header__burger {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
}
.header__burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-dark, #0B1220);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--border, #E5E7EB);
    box-shadow: 0 12px 24px rgba(11, 18, 32, 0.08);
    z-index: 90;
}
.mobile-nav[hidden] {
    display: none !important;
}
.mobile-nav__inner {
    padding: 1rem 0 1.25rem;
    display: grid;
    gap: 1rem;
}
.mobile-nav__group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
/* „Erkunden", „Kaufen", „Mehr" sind Rubriken, keine Ziele. Sie sahen
   aber aus wie kraeftig gesetzte Menuepunkte — fett, fast so gross wie
   die Links darunter — und wurden prompt angetippt („kaufen ist gar
   nicht hinterlegt"). Jetzt kleiner, leichter, mit einer Haarlinie
   darunter: das liest sich als Beschriftung einer Gruppe. */
.mobile-nav__title {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted, #6B7280);
    opacity: 0.75;
    padding-bottom: 0.35rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border, #E5E7EB);
}
/* Die Links im Gegenzug deutlicher — und mit voller Tippflaeche.
   0.4rem Polster ergaben rund 35px Zeilenhoehe, unter der 44px-Marke,
   die Apple und Google fuer Fingerziele angeben. */
.mobile-nav__group a {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark, #0B1220);
    text-decoration: none;
    padding: 0.6rem 0;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.mobile-nav__actions {
    display: grid;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border, #E5E7EB);
}

@media (max-width: 880px) {
    .header .nav,
    .header__actions {
        display: none;
    }
    .header__burger {
        display: inline-flex;
    }
}

/* ──────────── Hero: Phone-Frame Mockup + Photo-Pop ──────────── */
.phone-frame {
    --frame-w: 320px;
    width: var(--frame-w);
    max-width: 88vw;
    aspect-ratio: 9 / 19;
    margin: 0 auto;
    background: #0B1220;
    border-radius: 38px;
    padding: 14px 12px 14px 12px;
    position: relative;
    box-shadow:
        0 0 0 2px rgba(11, 18, 32, 0.06),
        0 22px 60px rgba(11, 18, 32, 0.22),
        0 8px 22px rgba(11, 18, 32, 0.12);
    overflow: hidden;
}
.phone-frame__notch {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 22px;
    background: #0B1220;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.phone-frame__screen {
    width: 100%;
    height: 100%;
    background: #F5F7FA;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}
/* Memoro-Wordmark ueber dem Galerie-Header — traegt jetzt den
   Notch-Freiraum, der vorher als padding-top auf der Topbar lag. */
.phone-frame__brand {
    flex-shrink: 0;
    padding: 34px 16px 0;
    background: #fff;
    display: flex;
    justify-content: center;
}
.phone-frame__brand img {
    height: 24px;
    width: auto;
    display: block;
}

.phone-frame__topbar {
    flex-shrink: 0;
    padding: 10px 16px 12px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #ECE9E2;
}
.phone-frame__title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: #0B1220;
}
.phone-frame__live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ECFDF5;
    color: #047857;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.phone-frame__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pf-pulse 1.6s infinite;
}
@keyframes pf-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.phone-frame__gallery {
    flex: 1;
    padding: 8px;
    /* Unten Platz fuer die Aktivitaets-Zeile: die liegt absolut ueber der
       Galerie und verdeckte sonst die letzte volle Bildreihe (gemessen:
       37 px Leiste, 29 px Ueberlappung auf 375 px Breite). */
    padding-bottom: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    overflow: hidden;
    align-content: start;
}

/* Ab Tablet folgt die Rahmenhoehe dem Inhalt statt einer festen
   Geraeteproportion. Mit aspect-ratio 9/19 war der Rahmen bei 320 px Breite
   676 px hoch, die vierte Kachelreihe endete aber schon bei 519 px — darunter
   klafften 106 px Nichts, weil .phone-frame__activity absolut am Boden klebt.
   Gemessen bei 1280 px und 834 px, beide identisch; danach 588 px.

   Warum keine kuerzere aspect-ratio: die Kachelhoehe haengt an der
   Spaltenbreite (aspect-ratio 1/1), die Reihenzahl am Markup. Jede feste
   Proportion waere eine Zahl, die beim naechsten zusaetzlichen Bild wieder
   falsch ist. flex:0 0 auto nimmt der Galerie das Dehnen — der Rest ergibt
   sich von selbst.

   Dieser Block MUSS hinter .phone-frame__gallery stehen: gleiche Spezifitaet,
   also entscheidet die Reihenfolge. Weiter oben notiert haette flex:1 aus
   Zeile 2209 gewonnen und die Regel waere wirkungslos gewesen.

   Mobil (<=768px) bleibt unberuehrt — dort gilt der eigene Block mit 4/5.4
   und ohne Geraeterahmen, wo die Hoehe bewusst gedeckelt ist, damit der Hero
   nicht den halben Viewport frisst. */
@media (min-width: 769px) {
    .phone-frame {
        /* Insgesamt kompakter: 284 statt 320 px breit. Der Rahmen ist im Hero
           ein Beleg, kein Hauptdarsteller. */
        --frame-w: 284px;
        aspect-ratio: auto;
        height: auto;
        /* Gehaeuserand von 14/12 auf 11/9. Zusammen mit dem Galerie-Padding
           unten bleiben seitlich 15 statt 20 px zwischen Bild und Gehaeuse —
           bei 284 px Breite sind 20 px sichtbar zu viel Luft. */
        padding: 11px 9px;
        border-radius: 34px;   /* folgt dem schmaleren Gehaeuse */
    }
    .phone-frame__gallery {
        flex: 0 0 auto;
        /* 6 statt 8 px seitlich; unten Reserve fuer die 37 px hohe, absolut
           gesetzte Aktivitaetszeile — 48 laesst 14 px Luft unter der letzten
           Kachelreihe. */
        padding: 6px 6px 48px;
        gap: 6px;
    }
}

.phone-frame__thumb {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    background: #ECE9E2;
    opacity: 1;
    transform: scale(1);
    transition: opacity .5s ease, transform .5s ease;
}
.phone-frame__thumb[data-defer="1"] {
    opacity: 0;
    transform: scale(.92);
}
.phone-frame__thumb.is-popped {
    opacity: 1;
    transform: scale(1);
}
.phone-frame__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.phone-frame__activity {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: rgba(11, 18, 32, 0.7);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
}
/* Toast-Text rotiert via JS; sanftes Cross-Fade beim Wechsel. */
.phone-frame__activity-text {
    transition: opacity 0.22s ease;
}
.phone-frame__activity-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary, #226CEA);
}

/* ──────────── Mobile (≤768px): kompakte Gallery-Preview-Card ────────────
   Auf echten Handys wirkte der schwere 9/19-Device-Rahmen wie ein „Handy im
   Handy": ~320×675px, fast bildschirmbreit, und der untere Rahmen verschwand
   unter der Safari-Bottom-Bar (dynamischer Viewport) -> sah abgeschnitten aus.
   Loesung: dunklen Device-Rahmen + Notch entschaerfen, kompaktere Karte mit
   garantiert vollstaendig sichtbarem Rahmen, kein 100vh, Safe-Area unten.
   Desktop (>768px) bleibt komplett unveraendert. */
@media (max-width: 768px) {
    .hero__visual {
        overflow: visible;                 /* unteren Rahmen nie abschneiden */
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
    .phone-frame {
        width: min(86vw, 360px);
        max-width: 100%;
        /* Etwas laenger als 4/5: so bleiben drei volle Bildreihen ueber der
           Aktivitaets-Zeile, statt dass die letzte davon halb darunter
           verschwindet. Immer noch kompakte Karte, kein sehr hohes Phone. */
        aspect-ratio: 4 / 5.4;
        height: auto;
        margin-inline: auto;
        padding: 0;                        /* kein dicker schwarzer Device-Rand */
        background: var(--surface, #fff);
        border: 1px solid var(--border, #E5E7EB);
        border-radius: 24px;
        box-shadow: 0 18px 50px rgba(11, 18, 32, 0.16);
        /* overflow:hidden bleibt — clippt nur den Inhalt, der Rahmen ist sichtbar */
    }
    .phone-frame__notch {
        display: none;                     /* ohne Device-Rahmen kein Notch */
    }
    .phone-frame__screen {
        border-radius: 24px;               /* an die Karte angleichen, kein Rest-Radius */
    }
    .phone-frame__brand {
        padding-top: 12px;                 /* Notch-Freiraum nicht mehr noetig */
    }
}

/* ──────────── 4-Step Cards mit semantischen Farb-Tiles ────────────
   Blaue Numeral-Bubbles raus, warme/coole Icon-Tiles zurück.
   1=Brand-Blau (du), 2=Lila (Distribution), 3=Grün (Gäste), 4=Orange (Kontrolle). */
.how-steps--cards {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
}
@media (min-width: 880px) {
    .how-steps--cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}
.how-step {
    /* Audit-v3-Polish: Karten-Hoehen ueber alle vier Schritte ausgleichen.
       In einem CSS-Grid mit repeat(4,1fr) sind die Tracks gleich hoch,
       aber das Card-100%-Height braucht einen definierten Parent.
       align-self:stretch ist Default, plus expliziter height: 100% damit
       die Card-Hoehe sicher uebernommen wird. */
    display: flex;
    height: 100%;
}
/* User-Feedback: Icon mittig oben (das Icon-links-Layout hat im
   4-Spalten-Grid den Text boese umbrechen lassen). */
.how-step__card {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.25rem;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.35rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.how-step__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 18, 32, 0.06);
}
.how-step__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    margin: 0 auto 0.6rem;
}
.how-step__icon svg {
    width: 26px;
    height: 26px;
}

/* Step-spezifische Farben (semantisch). */
.how-step--event .how-step__icon {
    background: #EAF2FE;
    color: #226CEA;
}
.how-step--qr .how-step__icon {
    background: #F1ECFE;
    color: #7C3AED;
}
.how-step--upload .how-step__icon {
    background: #E6F7EF;
    color: #10B981;
}
/* Auch das Symbol raus aus dem Gelb: es war das letzte, was die vierte
   Karte aus der Reihe hob. */
.how-step--shield .how-step__icon {
    background: #E0E7FF;
    color: #4F46E5;
}

.how-step__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark, #0B1220);
}
/* Eyebrow: SCHRITT N · TAGLINE als Uppercase über dem Titel. */
.how-step__eyebrow {
    margin: 0 0 0.15rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--neutral-text-muted, #6B7280);
    line-height: 1.3;
}
.how-step__eyebrow-num {
    color: var(--brand-primary, #226CEA);
}
.how-step__eyebrow-sep {
    color: rgba(11, 18, 32, 0.25);
    margin: 0 0.15rem;
}
.how-step__tagline {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-primary, #226CEA);
    letter-spacing: 0.2px;
}
.how-step__text {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted, #6B7280);
    line-height: 1.5;
}
/* Schritt 4 sah als einziger anders aus — gelber Verlauf, gelber Rand.
   Gemeint war „Abschluss", angekommen ist „hier stimmt etwas nicht".
   Vier gleichwertige Schritte sehen gleich aus; die Farbe steckt im
   Symbol darueber, das reicht. */
.how-step--final .how-step__card {
    background: #fff;
}
/* Legacy Timeline-Stile (how-steps--timeline, ::before-Connector, __bullet,
   __num) sind ersetzt durch das oben definierte
   how-steps--cards Layout mit semantischen Farb-Tiles. */

/* ──────────── Pricing: Free Sub-Card + Diff-Block ──────────── */
/* Drei-Spalten-Variante fuer das Pricing-Grid (Starter/Plus/Pro nebeneinander
   auf Desktop). Mobile-first: 1 Spalte default, ab 640px 2, ab 900px 3. */
.pricing-grid--three {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .pricing-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 900px) {
    .pricing-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.plan-card__diff {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-primary-dark, #1A57BD);
    background: var(--brand-tint-soft, #F4F8FF);
    border: 1px solid var(--brand-tint, #EAF2FE);
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    line-height: 1.45;
}

.plan-card__usecase {
    margin: -0.25rem 0 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted, #6B7280);
    font-style: italic;
    line-height: 1.4;
}

/* ── Free Sub-Card: bewusst gestalteter Teaser unter den drei
   Haupttarifen. DOM hat 4 direkte Kinder (head, price-block, features, cta);
   das alte Grid hatte nur 3 Spalten -> Layout brach. Jetzt 4-Spalten-Grid
   mit klarem Rhythmus auf Desktop, Single-Column auf Mobile. */
/* Rand und Flaeche aus der Tarif-Identitaet, so wie es die bezahlten
   Karten halten (Starter Roségold, Plus Nachtblau, Pro Gold). Vorher
   trug nur die kleine „Gratis"-Pille im Kopf die Tarif-Farbe, die Karte
   selbst stand im Standardgrau — im Browser gemessen: Rand #E2E8F0,
   Flaeche Weiss. Damit war Free neben dem goldgeraenderten Pro nicht als
   eigener Tarif zu erkennen, und genau das war die Beanstandung. */
.plan-free-card {
    margin-top: 1.5rem;
    padding: 1.1rem 1.25rem 1.2rem;
    background: var(--tier-free-bg, #F4F6F9);
    border: 1px solid var(--tier-free-border, #E1E7EF);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 760px) {
    .plan-free-card {
        grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 1.25rem;
        padding: 1.1rem 1.5rem;
    }
}

.plan-free-card__head {
    min-width: 0;
}
/* Free lag noch komplett im alten Blau — Plakette, Häkchen und Button —
   und war damit das einzige Kalte neben Rosegold, Champagner und Gold.
   Jetzt warm-neutral: derselbe Farbraum wie die bezahlten Tarife, aber
   ohne eigene Buntfarbe, damit der Gratis-Teaser nicht mit ihnen
   konkurriert. */
.plan-free-card__hint {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tier-free-ink, #4A5666);
    background: var(--tier-free-bg, #F4F6F9);
    border: 1px solid var(--tier-free, #6B7A8F);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    margin-bottom: 0.4rem;
}
.plan-free-card__name {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text, #0B1220);
    line-height: 1.2;
}
.plan-free-card__desc {
    margin: 0;
    font-size: 0.82rem;
    color: var(--neutral-text-muted, #6B7280);
    line-height: 1.45;
}

.plan-free-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
}
.plan-free-card__price {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text, #0B1220);
    letter-spacing: -0.02em;
    line-height: 1;
}
.plan-free-card__period {
    font-size: 0.78rem;
    color: var(--neutral-text-muted, #6B7280);
    white-space: nowrap;
}

.plan-free-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.25rem;
    font-size: 0.82rem;
    color: var(--text, #0B1220);
    min-width: 0;
}
.plan-free-card__features li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.3;
}
.plan-free-card__features svg {
    width: 14px;
    height: 14px;
    color: var(--tier-free-ink, #4A5666);
    flex-shrink: 0;
}

.plan-free-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.1rem;
    border-radius: 999px;
    background: var(--tier-free-bg, #F4F6F9);
    border: 1px solid var(--tier-free, #6B7A8F);
    color: var(--tier-free-ink, #4A5666);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s, transform .15s;
}
/* Beim Hover füllt sich der Umriss — wie beim Pro-Button, damit sich
   die beiden Umriss-Buttons der Seite gleich verhalten. */
.plan-free-card__cta:hover {
    background: var(--tier-free-ink, #4A5666);
    color: #fff;
    transform: translateY(-1px);
}
@media (max-width: 759px) {
    /* Mobile: CTA volle Breite, sitzt am unteren Rand der Stack-Karte. */
    .plan-free-card__cta {
        width: 100%;
    }
}

/* ──────────── Compare-Tabelle: Accordion + Sticky-Header ──────────── */
.comparison-accordion {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    overflow: hidden;
}
.comparison-accordion__summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark, #0B1220);
    user-select: none;
}
.comparison-accordion__summary::-webkit-details-marker { display: none; }
.comparison-accordion__chevron {
    color: var(--text-muted, #6B7280);
    transition: transform .2s;
}
.comparison-accordion[open] .comparison-accordion__chevron {
    transform: rotate(180deg);
}
/* Accordion-Wrapper entfernt – Tabelle direkt sichtbar.
   .comparison-accordion-* Stile bleiben fuer Rueckwaerts-Kompat, werden
   aber im Render-Pfad nicht mehr verwendet. */
.comparison-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--neutral-border, #E5E7EB);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}
.comparison-table--sticky {
    width: 100%;
    border-collapse: collapse;
}
.comparison-table--sticky .comparison-table__head th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    box-shadow: 0 1px 0 var(--neutral-border, #E5E7EB);
    padding: 0.85rem 1rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--neutral-text-muted, #6B7280);
    text-align: center;
}
.comparison-table--sticky .comparison-table__head th:first-child {
    text-align: left;
}
.comparison-table--sticky .comparison-table__head th.comparison-table__highlight {
    background: var(--brand-tint-soft, #F4F8FF);
    color: var(--brand-primary-dark, #1A57BD);
}

/* ──────────── Templates: Tint fallback if SVG cover ──────────── */
.template-card {
    position: relative;
}
.template-card__preview {
    background: var(--template-tint, #F4F1EA);
}
.template-card__photo.is-broken {
    opacity: 0;
}
.template-grid__note {
    margin: 1.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted, #6B7280);
}
.template-grid__note-label {
    font-weight: 700;
    color: var(--text-dark, #0B1220);
}
.template-grid__note-tag {
    display: inline-flex;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--brand-tint-soft, #F4F8FF);
    border: 1px solid var(--brand-tint, #EAF2FE);
    color: var(--brand-primary, #226CEA);
    font-size: 0.78rem;
    font-weight: 700;
}

/* ──────────── Social Proof Sektion ──────────── */
.section--social {
    background: linear-gradient(180deg, #fff 0%, #F4F1EA 100%);
}
.social-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 0 0 2rem;
    text-align: center;
}
.social-stat {
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}
.social-stat__num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-primary, #226CEA);
    letter-spacing: -0.5px;
    line-height: 1;
}
.social-stat__lbl {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #6B7280);
}
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.testimonial {
    margin: 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}
.testimonial__quote {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark, #0B1220);
}
.testimonial__caption {
    font-size: 0.78rem;
    color: var(--text-muted, #6B7280);
    display: grid;
    gap: 0.1rem;
}
.testimonial__author {
    font-weight: 700;
    color: var(--text-dark, #0B1220);
}
@media (max-width: 880px) {
    .social-stats, .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ──────────── Privacy: 3-Spalten mit differenzierten Tints ──────────── */
.privacy-grid--three {
    grid-template-columns: repeat(3, 1fr);
}
/* jede der 3 Karten bekommt einen eigenen Tint statt monochromer Wand.
   Wo deine Daten liegen = Gruen (Sicherheit)
   Wer sie sieht         = Blau  (Brand/Sichtbarkeit)
   Wie lange sie bleiben = Orange (Zeit/Lebensdauer)
*/
.privacy-card--green .privacy-card__icon  { background: #E6F7EF; color: #10B981; }
.privacy-card--blue  .privacy-card__icon  { background: #EAF2FE; color: #226CEA; }
.privacy-card--orange .privacy-card__icon { background: #FEF3C7; color: #D97706; }
@media (max-width: 880px) {
    .privacy-grid--three {
        grid-template-columns: 1fr;
    }
}

/* ──────────── CTA Banner mit Demo-QR ──────────── */
.cta-banner__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
}
.cta-banner__body {
    text-align: left;
}
.cta-banner__bullets {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.5rem;
    display: grid;
    gap: 0.4rem;
}
.cta-banner__bullets li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.95);
}
.cta-banner__bullets span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 11px;
}
.cta-banner__btn {
    margin: 0;
}
.cta-banner__demo {
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}
/* QR ist jetzt ein klickbarer <a>, der auf canonicalUrl zeigt. */
.cta-banner__qr {
    width: 152px;
    height: 152px;
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    padding: 12px;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.cta-banner__qr:hover,
.cta-banner__qr:focus-visible {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
    outline: none;
}
.cta-banner__qr svg {
    width: 100%;
    height: 100%;
    display: block;
}
.cta-banner__demo-text {
    margin: 0.75rem 0 0.15rem;
    font-size: 0.82rem;
    line-height: 1.5;
    max-width: 18ch;
    margin-inline: auto;
}
.cta-banner__demo-url {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.2px;
}
@media (max-width: 880px) {
    .cta-banner__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cta-banner__body {
        text-align: center;
    }
    .cta-banner__bullets {
        justify-content: center;
    }
    .cta-banner__bullets li {
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════════
   Neue Komponenten
   ════════════════════════════════════════════════════════════════ */

/* CTA Primary-on-Brand-BG — weiße Karte mit dunklem Text + Pfeil.
   Sichtbar auf dem blauen CTA-Hintergrund. */
.btn--primary-onbrand {
    background: #fff;
    color: #0B1220;
    border: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
    font-weight: 700;
}
.btn--primary-onbrand:hover,
.btn--primary-onbrand:focus-visible {
    background: #f8fafc;
    color: #0B1220;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
    outline: none;
}

/* Founder-Quote — schmaler Übergang zwischen Templates und Trust,
   ersetzt die entfernten Testimonials. */
/* Founder-Quote im Hero: kleines, ehrliches
   Statement direkt unter den Hero-CTAs. Linksbuendig, dezent. */
.hero__founder-quote {
    margin: 1.5rem 0 0;
    padding: 0.85rem 1.1rem;
    border-left: 3px solid var(--brand-primary, #226CEA);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 0 10px 10px 0;
    max-width: 36rem;
}
.hero__founder-quote-text {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--text, #0B1220);
    letter-spacing: -0.005em;
}
.hero__founder-quote-caption {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--neutral-text-muted, #6B7280);
}

/* Legacy section--founder Stile bleiben fuer Rueckwaerts-Kompat
   bestehen, werden aber im Render-Pfad nicht mehr verwendet. */
.section--founder {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    background: var(--bg);
}
.container--narrow {
    max-width: 720px;
    margin-inline: auto;
}
.founder-quote {
    margin: 0;
    text-align: center;
}
.founder-quote__text {
    margin: 0 0 0.85rem;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    line-height: 1.5;
    font-style: italic;
    color: var(--text);
    letter-spacing: -0.005em;
}
.founder-quote__caption {
    font-size: 0.82rem;
    color: var(--neutral-text-muted, #6B7280);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 700;
}

/* FAQ-Kontakt-Box — Ausgang am Ende der FAQ. */
.faq-contact {
    margin: 1.75rem auto 0;
    max-width: 720px;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, var(--brand-tint-soft, #F4F8FF) 0%, #fff 60%);
    border: 1px solid var(--brand-tint, #EAF2FE);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}
.faq-contact__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--brand-gradient, #226CEA);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 1px 2px rgba(34, 108, 234, 0.3);
}
.faq-contact__body {
    flex: 1;
    min-width: 220px;
}
.faq-contact__title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.15rem;
}
.faq-contact__text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--neutral-text-muted, #6B7280);
    line-height: 1.45;
}
.faq-contact__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    background: var(--brand-gradient, var(--brand-primary, #226CEA));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(34, 108, 234, 0.25), 0 6px 16px rgba(34, 108, 234, 0.18);
    transition: filter 0.15s;
    flex-shrink: 0;
}
.faq-contact__cta:hover {
    filter: brightness(1.05);
    color: #fff;
}

/* Pricing — Use-Case-Zeile (italic, gemutet) für alle drei Tarif-Karten. */
.plan-card__usecase {
    margin: 0 0 1rem;
    padding: 0 0 0.9rem;
    border-bottom: 1px dashed rgba(11, 18, 32, 0.08);
    font-size: 0.82rem;
    font-style: italic;
    color: var(--neutral-text-muted, #6B7280);
    line-height: 1.45;
}
.plan-card--featured .plan-card__usecase {
    color: rgba(255, 255, 255, 0.72);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Free-Sub-Card-Styling konsolidiert weiter oben — die
   Doppel-Regeln fuer name/price-block/price/period sind dort gebuendelt.
   Alter Audit-v2-Block hier entfernt. */

/* 4-Step — Eyebrow oberhalb des Titels statt italic-Subtitle zwischen Titel und Body. */
.how-step__eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--neutral-text-muted, #6B7280);
}

/* Templates: polierter warm-getoenter Placeholder fuer das
   Rustikal-Cover (statt grosser Letter-Mark mit "COVER FOLGT").
   Beige/Olive-Verlauf + dezente Mittelpunkt-Vignette wirkt wie ein
   Stoff-Layout statt eines Empty-States. */
.template-card--no-photo .template-card__preview {
    background:
        radial-gradient(ellipse 60% 70% at 50% 55%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(135deg, #E8D9B5 0%, #C9B58C 45%, #8B7F5C 100%);
}
.template-card__placeholder {
    width: 100%;
    aspect-ratio: 800 / 520;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    padding: 1.5rem 1.5rem 1.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* Letter-Mark wird nicht mehr angezeigt – Verlauf spricht fuer sich. */
.template-card__placeholder-mark {
    display: none;
}
.template-card__placeholder-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Comparison — Mini-Tabelle inline. */
.comparison-mini {
    margin: 0 auto 1.25rem;
    max-width: 880px;
    overflow-x: auto;
    background: var(--card, #fff);
    border: 1px solid var(--borderSoft, #ECE9E2);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}
.comparison-mini__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.comparison-mini__table th,
.comparison-mini__table td {
    padding: 0.7rem 0.9rem;
    text-align: center;
    border-bottom: 1px solid var(--borderSoft, #ECE9E2);
}
.comparison-mini__table th:first-child,
.comparison-mini__table td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--text);
}
.comparison-mini__table thead th {
    background: var(--neutral-bg-soft, #F9FAFB);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--neutral-text-muted, #6B7280);
}
.comparison-mini__table .comparison-table__highlight {
    background: var(--brand-tint-soft, #F4F8FF);
    color: var(--brand-primary, #226CEA);
    font-weight: 700;
}
.comparison-mini__table tbody tr:last-child td {
    border-bottom: 0;
}
.comparison-mini__table .check-icon svg {
    width: 16px;
    height: 16px;
    color: var(--state-success, #10B981);
}
.comparison-mini__table .cross-icon svg {
    width: 14px;
    height: 14px;
    color: var(--neutral-text-subtle, #94A3B8);
}

/* Phone-Frame: 12 Slots, letzte Reihe "lädt nach". */
.phone-frame__gallery--full {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    /* grid-auto-rows ist hier PFLICHT, nicht Kosmetik: mobil deckelt
       .phone-frame die Hoehe (aspect-ratio 4/5), die Galerie bekommt per
       flex:1 weniger Platz als die 4 Kachelreihen brauchen. Ohne diese
       Zeile staucht das Grid seine Reihen, die Kacheln behalten wegen
       aspect-ratio:1/1 aber ihre Hoehe — und ragen in die naechste Reihe
       (gemessen: 20 px Ueberlappung auf 375 px Breite). Mit max-content
       bleiben die Reihen quadratisch, und was nicht mehr passt, schneidet
       das overflow:hidden des Frames sauber ab. */
    grid-auto-rows: max-content;
}
.phone-frame__thumb {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #f1f5f9;
}
/* Bild absolut in der Zelle: kann die Grid-Zeile nie aufblaehen —
   iOS Safari ueberdeckte sonst benachbarte Reihen (Abnahme 23.07.). */
.phone-frame__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.phone-frame__thumb--loading {
    opacity: 0.55;
    filter: saturate(0.85);
}

/* ──────────── Site-Footer (3-Spalten) ──────────── */
.site-footer {
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #E5E7EB);
    padding: 2.5rem 0 1.5rem;
    color: var(--text-muted, #6B7280);
}
.site-footer__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border, #E5E7EB);
}
.site-footer__brand {
    display: grid;
    gap: 0.75rem;
}
.site-footer__brand .brand {
    display: inline-flex;
}
.site-footer__tag {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted, #6B7280);
}
/* ── Newsletter im Footer ──────────────────────────────────────────
   Das Honeypot-Feld war bis hierher NUR in der Inline-Style-Sektion von
   coming-soon.php versteckt. Im Footer haette ohne diese Regel ein
   sichtbares Feld „Website" gestanden — genau das, was Menschen
   verwirrt und Bots verraten soll. */
.cs-hp {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
/* Beschriftung nur fuer Screenreader: das Feld traegt sichtbar einen
   Platzhalter, der ist aber kein Label. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.site-footer__nl {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.5rem;
}
.site-footer__nl-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.site-footer__nl-form input[type="email"] {
    flex: 1 1 190px;
    min-width: 0;               /* sonst sprengt das Feld den Flex-Container */
    padding: 0.55rem 0.7rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text, #111827);
    background: var(--surface, #fff);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 8px;
}
.site-footer__nl-form input[type="email"]:focus-visible {
    outline: 2px solid var(--primary, #226CEA);
    outline-offset: 1px;
}
.site-footer__nl-form button {
    flex: 0 0 auto;
    padding: 0.55rem 1rem;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    background: var(--primary, #226CEA);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
.site-footer__nl-form button:hover {
    filter: brightness(1.08);
}
.site-footer__nl-msg {
    margin: 0;
    font-size: 0.8rem;
    color: var(--primary, #226CEA);
}
.site-footer__nl-privacy {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--text-muted, #6B7280);
}

/* Vier Spalten, seit Social Media eine eigene bekommen hat. minmax(0,1fr)
   statt 1fr: ein 1fr-Track waechst notfalls ueber seinen Anteil hinaus,
   wenn ein Wort nicht umbricht („Verträge kündigen") — dann stehen die
   vier Spalten ungleich breit. Mit der 0-Untergrenze bleiben sie gleich
   und der Text bricht. */
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
.site-footer__col-title {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-dark, #0B1220);
}
.site-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}
.site-footer__col a {
    color: var(--text-muted, #6B7280);
    text-decoration: none;
    font-size: 0.88rem;
}
.site-footer__col a:hover {
    color: var(--brand-primary, #226CEA);
}
.site-footer__bottom {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.82rem;
}
.site-footer__copy {
    margin: 0;
}
/* Die Nummer soll nie allein in die naechste Zeile rutschen — sie ist
   der kuerzeste Teil der Zeile und saehe dort aus wie ein Versehen. */
.site-footer__version {
    white-space: nowrap;
}

/* Icons unten neben dem Copyright. Eigene Klasse, seit dieselben Kanaele
   auch oben in der Social-Spalte stehen: dort sind es Textzeilen mit
   Icon, hier runde Knoepfe ohne Text. Eine Klasse fuer beides haette
   bedeutet, die Spalte muss jede Regel hier wieder zuruecknehmen.
   list-style und padding muessen weg, sonst erbt die Liste die
   Aufzaehlungspunkte der Fuss-Spalten darueber. */
.site-footer__socials {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 40px Trefferflaeche: die Grafik misst 20px, und drei kleine Ziele
       nebeneinander sind auf dem Telefon sonst nicht sicher zu treffen. */
    width: 40px;
    height: 40px;
    border-radius: 999px;
    color: var(--text-muted, #6B7280);
    transition: color .15s, background-color .15s;
}
.site-footer__social-icon:hover,
.site-footer__social-icon:focus-visible {
    color: var(--brand-primary, #226CEA);
    background: rgba(34, 108, 234, .08);
}

/* Kanal-Zeile in der Social-Spalte: Icon, dann Name. Die Farbe erbt sie
   von .site-footer__col a, damit sie sich beim naechsten Farbwechsel des
   Fusses nicht als Einzelfall herausstellt; hier steht nur, was die
   Nachbarzeilen nicht brauchen. */
.site-footer__social {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Die Zeile ist nur so hoch wie ihr Text; die 18px-Grafik daneben
       hebt sie auf ~24px. Zusammen mit dem 0.5rem-Abstand der Liste
       ergibt das eine Trefferflaeche, die auch auf dem Telefon reicht —
       ohne die 40px-Kreise, die neben Textzeilen fehl am Platz waeren. */
    padding: 0.1rem 0;
}
.site-footer__social svg {
    flex: 0 0 auto;
}
@media (max-width: 880px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .site-footer__cols {
        grid-template-columns: 1fr 1fr;
    }
}

/* ──────────── Highlight-Cards: dickere Karten ──────────── */
.highlight-card {
    padding: 1.25rem 1.25rem 1.5rem;
}
.highlight-card__title {
    margin-bottom: 0.4rem;
}
.highlight-card__text {
    font-size: 0.88rem;
    line-height: 1.55;
}


/* ──────────── Drucksachen-Showcase: QR-Visitenkarte (Abnahme 23.07.) ────────────
   Eine echte HTML/CSS-Karte statt Screenshots — vier Editor-Looks per
   CSS-Variablen, umgeschaltet ueber [data-design]. */
.print-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
}
@media (max-width: 820px) {
    .print-showcase { grid-template-columns: 1fr; gap: 1.75rem; }
}
.print-showcase__stage {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(148, 163, 184, .14), transparent 60%),
        linear-gradient(160deg, #F8FAFC 0%, #EEF2F6 100%);
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 20px;
}
.biz-card {
    --bc-bg: #171310;
    --bc-text: #F5EDDD;
    --bc-accent: #C9A55C;
    --bc-muted: rgba(245, 237, 221, .65);
    width: min(100%, 420px);
    aspect-ratio: 85 / 55;
    background: var(--bc-bg);
    color: var(--bc-text);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 4px 14px rgba(15, 23, 42, .14);
    transition: background-color .35s ease, color .35s ease, transform .35s ease;
}
.biz-card[data-design="ocean"] { --bc-bg: #F7FAFC; --bc-text: #1E3A5F; --bc-accent: #3B82C4; --bc-muted: rgba(30, 58, 95, .6); }
.biz-card[data-design="rose"]  { --bc-bg: #FBF3F1; --bc-text: #6B3B3B; --bc-accent: #C98A7D; --bc-muted: rgba(107, 59, 59, .6); }
.biz-card[data-design="sage"]  { --bc-bg: #F4F6F0; --bc-text: #3F4A3C; --bc-accent: #5F7A56; --bc-muted: rgba(63, 74, 60, .6); }
.biz-card.is-flipping { transform: scale(.97); }
.biz-card__frame {
    margin: 7px;
    border: 1px solid var(--bc-accent);
    border-radius: 9px;
    height: calc(100% - 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .8rem 1rem;
    text-align: center;
}
.biz-card__kicker {
    margin: 0;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bc-muted);
}
.biz-card__names {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(1.25rem, 4.2vw, 1.7rem);
    line-height: 1.15;
    color: var(--bc-text);
}
.biz-card__rule {
    width: 46px;
    height: 1px;
    background: var(--bc-accent);
    margin: .15rem 0 .3rem;
}
.biz-card__qr {
    width: clamp(56px, 18%, 74px);
    color: var(--bc-accent);
    line-height: 0;
}
.biz-card__qr svg { width: 100%; height: auto; }
.biz-card__cta {
    margin: 0;
    font-size: .68rem;
    letter-spacing: .08em;
    color: var(--bc-muted);
}
.print-showcase__text {
    margin: 0 0 1.1rem;
    color: var(--text-muted, #6B7280);
    line-height: 1.6;
}
.print-showcase__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.print-swatch {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 999px;
    background: var(--surface, #fff);
    font-size: .85rem;
    font-weight: 600;
    color: var(--text, #111827);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.print-swatch:hover { border-color: #94A3B8; }
.print-swatch.is-active {
    border-color: var(--brand, #3E6DF3);
    box-shadow: 0 0 0 3px rgba(62, 109, 243, .14);
}
.print-swatch__dots { display: inline-flex; }
.print-swatch__dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, .12);
}
.print-swatch__dots span + span { margin-left: -4px; }
.print-showcase__note {
    margin: 1.1rem 0 0;
    font-size: .85rem;
    color: var(--text-muted, #6B7280);
}

/* ═══════════════════════════════════════════════════════════════════
   Vor / Während / Nach dem Event
   Die mittlere Karte ist hervorgehoben — dort passiert die Feier.
   ═══════════════════════════════════════════════════════════════════ */
.phases {
    display: grid;
    gap: 1.1rem;
    margin-top: var(--space-block);
}

@media (min-width: 860px) {
    .phases { grid-template-columns: repeat(3, 1fr); }
}

.phase {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    padding: 1.6rem 1.4rem 1.5rem;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}

/* Champagner als Akzentfläche — die zweite Markenfarbe, sparsam
   eingesetzt genau dort, wo die Feier selbst stattfindet. */
.phase--during {
    background: var(--brand-champagne, #E8DCC4);
    border-color: #DDCFB2;
}

.phase__tag {
    margin: 0 0 0.55rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-primary-dark, #1A57BD);
}

/* Auf Champagner erreicht Brand-Blau nur 3.51 — dort das dunklere
   Nachtblau, das auf 13.6 kommt. */
.phase--during .phase__tag { color: var(--tier-plus, #0B1424); }

.phase__title {
    margin: 0 0 0.9rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text, #0f172a);
}

.phase__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.phase__list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.4rem;
    font-size: 0.94rem;
    line-height: 1.45;
    color: var(--text-muted, #586678);
}

.phase__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary, #226CEA);
}

.phase--during .phase__list li {
    color: #4A4231;
}

.phase--during .phase__list li::before {
    background: var(--tier-pro, #B0863A);
}

.phases__close {
    margin: var(--space-block-tight) auto 0;
    max-width: 34ch;
    text-align: center;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

/* ═══════════════════════════════════════════════════════════════════
   Highlight-Karten: Funktionsname als kleines Label unter dem Nutzen
   Die Ueberschrift traegt jetzt den Nutzen und ist dadurch laenger —
   Zeilenumbruch wird ausgeglichen (text-wrap: balance), damit keine
   einzelnen Woerter haengen bleiben.
   ═══════════════════════════════════════════════════════════════════ */
.highlight-card__title {
    line-height: 1.3;
    text-wrap: balance;
}

/* Die Karte wird zur Spalte, damit das Label unten andockt — sonst
   sitzt es je nach Textlaenge auf unterschiedlicher Hoehe und die
   Reihe wirkt unruhig. */
.highlight-card {
    display: flex;
    flex-direction: column;
}

.highlight-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.highlight-card__label {
    margin: auto 0 0;
    padding-top: 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted, #586678);
}

/* ═══════════════════════════════════════════════════════════════════
   Drucksachen: Nutzungszeile im Kopf, Abschluss-Satz unter dem Showcase
   Derselbe Rhythmus wie in der Problem- und Phasen-Sektion: erst die
   Frage im Kicker, dann die Antwort, am Ende ein Satz, der steht.
   ═══════════════════════════════════════════════════════════════════ */
.templates-usage {
    margin: 0.9rem 0 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--text, #0f172a);
}

.templates-close {
    margin: var(--space-block-tight) auto 0;
    max-width: 32ch;
    text-align: center;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

/* Weiterweg auf die QR-Karten-Seite. Bewusst ein Textlink und kein
   zweiter Knopf: der Abschnitt endet mit einem Satz, und darunter
   gehoert eine Einladung, kein Wettbewerb zum Haupt-CTA weiter unten. */
.templates-more {
    margin: 0.9rem 0 0;
    text-align: center;
}
.templates-more a {
    font-size: 1rem;
    font-weight: 650;
    color: var(--brand-primary, #226CEA);
    text-decoration: none;
}
.templates-more a:hover,
.templates-more a:focus-visible { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════
   Anlassvielfalt  ·  vor den Tarifen
   Bewusst typografisch statt mit Bildern: es gibt derzeit keine
   Anlass-Fotos ausser Hochzeit, und genau diese Einseitigkeit soll die
   Sektion ja widerlegen. Sobald gemischte Bilder da sind, kann hier
   eine Bildstrecke ergaenzt werden.
   ═══════════════════════════════════════════════════════════════════ */
/* Anlaesse mit eigener Seite sind anklickbar. Der Link soll die
   Aufzaehlung nicht zerreissen: gleiche Schrift, gleiche Farbe, nur
   eine feine Unterstreichung — wer sucht, findet ihn, wer liest,
   stolpert nicht. */
.occasions__item a {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}
.occasions__item a:hover,
.occasions__item a:focus-visible { color: var(--brand-primary, #226CEA); }

.occasions__answer {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.occasions__heart {
    font-size: 0.8em;
}

.occasions {
    list-style: none;
    margin: var(--space-block) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

.occasions__item {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 550;
    color: var(--text, #0f172a);
}

/* Frueher lag jede dritte Kachel auf Champagner, um die Reihe
   aufzubrechen. In der Abnahme las sich das nicht als Rhythmus, sondern
   als Auszeichnung: „warum sind Schuleintritt und Taufe hervorgehoben
   und Hochzeit nicht?" Alle Anlaesse sind gleichwertig, also sehen sie
   jetzt auch gleich aus. */

.occasions__item--more {
    background: transparent;
    border-style: dashed;
    color: var(--text-muted, #586678);
    font-weight: 400;
}

.occasions__close {
    margin: var(--space-block-tight) auto 0;
    max-width: 34ch;
    text-align: center;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

/* ═══════════════════════════════════════════════════════════════════
   Warum es Memoro gibt  ·  nach den Tarifen, vor der FAQ
   Ein Lesetext, kein Karten-Raster. Schmale Spalte, ruhiger Rhythmus.
   ═══════════════════════════════════════════════════════════════════ */
.section--why {
    background: var(--brand-cream, #FAF8F3);
}

.why {
    max-width: 62ch;
    margin: 0 auto;
}

.why .section-header__kicker {
    text-align: left;
}

.why__title {
    margin: 0 0 1.4rem;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

.why__text {
    margin: 0 0 1.1rem;
    font-size: 1.05rem;
    line-height: 1.68;
    color: var(--text-muted, #586678);
}

.why__text--close {
    color: var(--text, #0f172a);
    font-weight: 550;
}

/* Die Kernaussage — Gold als Markierung, nicht als Schriftfarbe:
   Gold auf hellem Grund erreicht als Text nur 3.3. */
.why__pull {
    margin: 2rem 0;
    padding: 0.2rem 0 0.2rem 1.3rem;
    border-left: 3px solid var(--tier-pro, #B0863A);
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

.why__sign {
    margin: 2.4rem 0 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border, #E5E7EB);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.why__logo {
    height: 30px;
    width: auto;
}

.why__claim {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-muted, #586678);
}

.why__names {
    font-weight: 600;
    color: var(--text, #0f172a);
}

/* Weiterleitung in die Langfassung unter /ueber-memoro. */
.why__more {
    margin: 1.6rem 0 0;
}

.why__more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 650;
    color: var(--brand-primary, #226CEA);
    text-decoration: none;
}

.why__more-link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   Drucksachen-Familie: Menuekarte, Tagesablauf, Klappbogen
   Kleine Mockups neben der grossen Visitenkarte. Sie erben die
   --bc-*-Variablen der aktiven Designwahl, damit sichtbar wird, dass
   alle Formate EIN Design teilen — genau das ist der Unterschied zu
   "hier sind ein paar Flyer-Vorlagen".
   ═══════════════════════════════════════════════════════════════════ */
.print-family {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    /* Unten buendig: die Formate sind unterschiedlich hoch (A5 hoch
       gegen Klappbogen quer). Ohne das haengen sie oben und die
       Beschriftungen sitzen auf drei verschiedenen Linien. */
    align-items: end;
}

.print-family__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.print-family__label {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted, #586678);
    text-align: center;
}

.print-mini {
    --bc-bg: #171310;
    --bc-text: #F5EDDD;
    --bc-accent: #C9A55C;
    background: var(--bc-bg);
    color: var(--bc-text);
    border-radius: 8px;
    padding: 0.6rem 0.55rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
    transition: background-color .35s ease, color .35s ease, opacity .12s ease;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    overflow: hidden;
}

.print-mini.is-flipping { opacity: 0.35; }

/* Dieselben Designs wie die Visitenkarte — sonst liefe die Familie
   optisch auseinander, sobald jemand die Farbe wechselt. */
.print-mini[data-design="ocean"] { --bc-bg: #F7FAFC; --bc-text: #1E3A5F; --bc-accent: #3B82C4; }
.print-mini[data-design="rose"]  { --bc-bg: #FBF3F1; --bc-text: #6B3B3B; --bc-accent: #C98A7D; }
.print-mini[data-design="sage"]  { --bc-bg: #F4F6F0; --bc-text: #3F5236; --bc-accent: #5F7A56; }

.print-mini--portrait { aspect-ratio: 148 / 210; }

.print-mini__title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bc-accent);
}

.print-mini__lines {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.print-mini__lines i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.34;
}

.print-mini__lines i.is-short { width: 62%; }

.print-mini__agenda {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.26rem 0.35rem;
    margin-top: 0.1rem;
}

.print-mini__agenda b {
    font-size: 0.42rem;
    font-weight: 700;
    color: var(--bc-accent);
    font-variant-numeric: tabular-nums;
}

.print-mini__agenda i {
    display: block;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.34;
}

.print-mini__agenda i.is-short { width: 55%; }

/* Klappbogen: zwei Panels mit Falzlinie in der Mitte. */
.print-mini--fold {
    aspect-ratio: 297 / 210;
    flex-direction: row;
    gap: 0;
    padding: 0;
    position: relative;
}

.print-mini__fold-line {
    position: absolute;
    inset-block: 8%;
    left: 50%;
    width: 1px;
    background: currentColor;
    opacity: 0.28;
}

.print-mini__panel {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 0.5rem 0.4rem;
    text-align: center;
}

.print-mini__panel .print-mini__title {
    font-size: 0.52rem;
    text-transform: none;
    letter-spacing: 0;
}

.print-mini__qr {
    width: 46%;
    aspect-ratio: 1;
    border-radius: 2px;
    background:
        linear-gradient(var(--bc-accent) 0 0) 0 0 / 34% 34% no-repeat,
        linear-gradient(var(--bc-accent) 0 0) 100% 0 / 34% 34% no-repeat,
        linear-gradient(var(--bc-accent) 0 0) 0 100% / 34% 34% no-repeat;
    background-color: color-mix(in srgb, var(--bc-accent) 22%, transparent);
}

@media (max-width: 560px) {
    .print-family { gap: 0.6rem; }
    .print-family__label { font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Zwei Sorgen: KI-Unterstuetzung und schlechter Empfang
   Zwei ruhige Karten nebeneinander statt zweier grosser Sektionen —
   die Anforderung warnt ausdruecklich davor, die Seite zu ueberladen.
   ═══════════════════════════════════════════════════════════════════ */
.worries {
    display: grid;
    gap: 1.1rem;
    margin-top: var(--space-block);
}

@media (min-width: 820px) {
    .worries { grid-template-columns: 1fr 1fr; }
}

.worry {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 16px;
    padding: 1.7rem 1.5rem 1.5rem;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.03);
}

.worry__ask {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted, #586678);
}

.worry__title {
    margin: 0 0 0.7rem;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--text, #0f172a);
}

.worry__text {
    margin: 0 0 0.8rem;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--text-muted, #586678);
}

/* Der Kleingedruckte-Absatz traegt die Einschraenkungen — er gehoert
   sichtbar dazu, nicht in eine Fussnote. */
.worry__note {
    margin: 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border, #E5E7EB);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-subtle, #7B8798);
}

/* ═══════════════════════════════════════════════════════════════════
   Drucksachen-Karussell

   Gefuehrt wird es vom nativen Scroll-Snapping, nicht von JavaScript:
   Wischen, Trackpad, Shift+Rad und die Tastatur funktionieren damit von
   sich aus, und ohne JS bleibt es eine benutzbare, scrollbare Reihe.
   Die Knoepfe setzen nur oben drauf.
   ═══════════════════════════════════════════════════════════════════ */
.pcar {
    margin-top: var(--space-block);
}

.pcar__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--radius-lg, 1rem);
}

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

.pcar__viewport:focus-visible {
    outline: 2px solid var(--brand-primary, #226CEA);
    outline-offset: 3px;
}

.pcar__track {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcar__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}

@media (min-width: 860px) {
    /* Die Nachbarn schauen hervor — das zeigt ohne Pfeil oder Hinweis,
       dass es weitergeht. */
    /*
       Die Folie folgt der Karte, nicht umgekehrt.

       Vorher stand hier flex-basis: 74 %. Seit die Karte in der Hoehe
       gedeckelt ist, blieb der Rest der Folie leer — zwischen zwei
       Karten klaffte auf breiten Fenstern eine Luecke von mehreren
       hundert Pixeln, die aussah wie ein Fehler. Bekommt die Folie
       dieselbe Breite wie die Karte, greift wieder der Abstand aus
       .pcar__track (1,25 rem) und sonst nichts.
    */
    .pcar__slide {
        flex: 0 0 auto;
        width: min(760px, max(320px, calc((100vh - 420px) * 1.55)));
        width: min(760px, max(320px, calc((100dvh - 420px) * 1.55)));
    }

    /*
       Breite aus der HOEHE ableiten, nicht umgekehrt.

       Vorher hing die Kartengroesse allein an der Fensterbreite: 74 %
       von 1200 px sind 888 px, geteilt durch das Seitenverhaeltnis
       ergibt das 573 px Bildhoehe — plus Beschreibung landet man ueber
       700 px. Auf einem MacBook mit rund 800 px sichtbarer Hoehe passte
       damit nicht einmal eine Karte ins Bild, die Beschreibung schon
       gar nicht. Auf einem hohen Monitor faellt es nicht auf, und genau
       deshalb bleibt so etwas lange stehen.

       Die Rechnung: von der Fensterhoehe geht ab, was Beschreibung,
       Pfeile und Luft brauchen; der Rest ist die verfuegbare Bildhoehe,
       mal Seitenverhaeltnis ergibt die zulaessige Breite. Das Bild wird
       dadurch NICHT beschnitten — der Zierrahmen sitzt dicht am Rand,
       ein max-height mit object-fit haette ihn angeschnitten.

       dvh statt vh: auf Notebooks identisch, auf Mobilgeraeten meint vh
       das Fenster mit ausgefahrener Adressleiste und rechnet zu gross.
    */
    .pcar__figure {
        /* 420 statt 330 Reserve: die Karte soll nicht bis an den unteren
           Rand reichen, sondern mit Luft darunter stehen — dann sieht man
           auf einen Blick, dass die Sektion hier endet. Der Deckel bei
           760 px verhindert, dass sie auf einem hohen Monitor zur
           Plakatwand wird; ab da traegt mehr Groesse nichts mehr bei. */
        max-width: min(760px, max(320px, calc((100vh - 420px) * 1.55)));
        max-width: min(760px, max(320px, calc((100dvh - 420px) * 1.55)));
        margin-inline: auto;
    }
}

.pcar__figure {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border-radius: var(--radius-lg, 1rem);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 44px rgba(11, 18, 32, .12);
}

.pcar__img {
    display: block;
    width: 100%;
    height: auto;
    /* 1.55 statt 3:2. Die echten Exporte liegen zwischen 1.535 und
       1.573; auf 1.5 beschnitten wuerde bei diesen Karten der Zierrahmen
       angeschnitten, der dicht am Rand sitzt. So bleibt der Beschnitt
       unter 1.5 Prozent und trifft nur den Aussenrand. */
    aspect-ratio: 31 / 20;
    object-fit: cover;
    flex: 0 0 auto;
}

/* Die Beschreibung sitzt UNTER dem Bild, nicht darauf.

   Als Auflage sah sie eleganter aus, verdeckte aber genau das untere
   Drittel der Karten — und dort stehen QR-Code und Aufforderung, also
   das, was das Beispiel zeigen soll. Ein Schaufenster, das die Ware
   verdeckt.

   Der Nebel bleibt: ein heller Verlauf, der aus der Bildkante nach
   unten aufklart, plus eine Trennlinie in Champagner. */
.pcar__caption {
    position: relative;
    flex: 1;
    padding: 1.15rem 1.35rem 1.35rem;
    color: var(--text, #0f172a);
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(232, 220, 196, .30), transparent 60%),
        linear-gradient(to bottom, var(--brand-cream, #FAF8F3) 0%, #fff 70%);
    border-top: 1px solid var(--brand-champagne, #E8DCC4);
}

/* Weicher Uebergang aus dem Bild in den Text, damit die Kante nicht
   schneidet. */
.pcar__caption::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2.5rem;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to top, rgba(250, 248, 243, .55), transparent);
}

.pcar__occasion {
    margin: 0 0 .15rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-primary-dark, #1A57BD);
}

.pcar__title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    text-wrap: balance;
}

.pcar__text {
    margin: 0;
    max-width: 52ch;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text-muted, #586678);
}

.pcar__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.1rem;
}

.pcar__arrow {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 999px;
    background: #fff;
    color: var(--text, #0f172a);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.pcar__arrow svg { width: 1.1rem; height: 1.1rem; }

.pcar__arrow:hover:not([disabled]) {
    border-color: var(--brand-primary, #226CEA);
    color: var(--brand-primary-dark, #1A57BD);
}

.pcar__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.pcar__dots {
    display: flex;
    gap: .45rem;
}

.pcar__dot {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--border, #cbd5e1);
    cursor: pointer;
    transition: background .15s, transform .15s;
}

.pcar__dot.is-current {
    background: var(--brand-primary, #226CEA);
    transform: scale(1.35);
}

/* Die Trefferflaeche der Punkte ist absichtlich groesser als der Punkt —
   ein halber Zentimeter ist auf dem Telefon nicht zuverlaessig zu
   treffen. */
.pcar__dot::before {
    content: "";
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    margin: -.85rem;
}

.pcar__dot { position: relative; }


/* ——— Nachtrag Abnahme 10.08. ———————————————————————— */

/* Kleingedruckte Einordnung unter einer Sektionsueberschrift. Erster
   Einsatz: der Hinweis, dass die QR-Karten Beispiele sind und kein
   festes Angebot — seit der Menuepunkt „QR-Karten" heisst, ist das
   nicht mehr selbstverstaendlich. */
.section-header__note {
    margin: 0.5rem auto 0;
    max-width: 42ch;
    font-size: 0.85rem;
    color: var(--text-muted, #586678);
}

/* Anlass und Datum im Kopf der Beispiel-Galerie. Die Zeile stand nur
   auf den Namen — „Alice & Pascal" allein sagt nicht, worum es geht. */
.phone-frame__date {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted, #586678);
    margin-top: 0.1rem;
}