/* Inhaltsseiten (Anlässe, Funktionen, Ratgeber) — baut auf landing.css auf
   (.main, .section, .faq-*, .cta-banner, .ai-marked/.ai-badge, .hero-eyebrow).

   Gestaltung in den Landing-Akzenten: Blau (--primary) für Handlungen und Schritte,
   Gold (--accent-warm, das Gold der Trennstriche) als Schmuckfarbe für Listen, Ziffern und
   den Strich unter jeder Überschrift. EIN Listenstil pro Zweck:
     ul          → goldener Punkt (Aufzählung mit fettem Stichwort vorn)
     ol          → goldene Ziffer (Ideen-Sammlungen mit Nummer)
     .idea-list  → kleine Karten mit goldenem Punkt
     .content-steps → blaue Schritt-Nummern (wie „So einfach ist es…")
     .pro-con    → zwei gekennzeichnete Kästen
   Text-Regeln schließen .cta-banner aus: der Abschluss-Banner kommt unverändert aus landing.css. */

/* Eine Spaltenbreite für alles, auch den Abschluss-Banner (in voller 880er-Breite stand er
   seitlich über den Text hinaus). Schmaler als die Landing der Lesbarkeit wegen. */
.content-page > *{max-width:760px;margin-left:auto;margin-right:auto}
/* Artikeltext darf man markieren (base.css sperrt das global für die App-Oberfläche). */
.content-page{-webkit-user-select:text;user-select:text}

/* ── Kopf ── */
/* Kopf zentriert wie Hero der Landing und Kopf der Preise-Seite (kurzer Block); die Abschnitte
   darunter bleiben linksbündig — zentrierter Fließtext über mehrere Zeilen liest sich schlecht. */
.content-head{margin-bottom:2.5rem;text-align:center}
.content-head .content-lead{max-width:640px;margin:0 auto}
.content-head .hero-eyebrow{margin-bottom:0.7rem}
/* Gleiche Größe wie die H1 der Preise-Seite (.page-hero-title) — Unterseiten eine Stufe unter dem Landing-Hero */
.content-head h1{font-family:var(--font-display);font-size:1.75rem;line-height:1.2;font-weight:700;color:var(--text);margin-bottom:1rem;letter-spacing:-0.02em}
.content-lead{font-size:1.1rem;line-height:1.7;color:var(--text-secondary)}

/* ── Abschnitte ── */
.content-page .section:not(.cta-banner) h2{font-size:1.3rem;font-weight:700;color:var(--text);margin:0 0 1rem;line-height:1.3}
/* Der Trennstrich der Landing (Gold, 36×2) — hier linksbündig unter jeder Abschnittsüberschrift */
.content-page .section:not(.cta-banner) h2::after{content:"";display:block;width:36px;height:2px;margin-top:0.55rem;background:var(--accent-warm);border-radius:2px;opacity:0.85}
.content-page .section:not(.cta-banner) h3{font-size:1.02rem;font-weight:600;color:var(--text);margin:1.4rem 0 0.4rem}
.content-page .section:not(.cta-banner) p{font-size:0.98rem;line-height:1.75;color:var(--text-secondary);margin-bottom:0.9rem}
.content-page .section:not(.cta-banner) p:last-child{margin-bottom:0}
.content-page .section strong{color:var(--text);font-weight:600}
.content-page .section:not(.cta-banner) p a,.content-page .section > ul:not([class]) li a{color:var(--primary);text-underline-offset:2px}
/* Mehrere Unter-Überschriften in einem Abschnitt (Foto-Aufgaben nach Anlass) */
.content-page .section:not(.cta-banner) > * + h2{margin-top:2.25rem}

/* ── Aufzählung: goldener Punkt ── */
.content-page .section > ul:not([class]){list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:0.6rem}
.content-page .section > ul:not([class]) > li{position:relative;padding-left:1.35rem;font-size:0.98rem;line-height:1.7;color:var(--text-secondary)}
.content-page .section > ul:not([class]) > li::before{content:"";position:absolute;left:0.15rem;top:0.68em;width:7px;height:7px;border-radius:50%;background:var(--accent-warm)}

/* ── Nummerierte Liste: goldene Ziffer, zweispaltig (start-Attribut bleibt gültig) ── */
.content-page .section > ol:not([class]){padding-left:2.1rem;margin:0 0 1rem;columns:2;column-gap:2rem}
.content-page .section > ol:not([class]) > li{break-inside:avoid;padding:0.2rem 0 0.2rem 0.3rem;font-size:0.96rem;line-height:1.55;color:var(--text-secondary)}
.content-page .section > ol:not([class]) > li::marker{color:var(--accent-warm-dark);font-weight:700;font-variant-numeric:tabular-nums}

/* ── Ideen: kleine Karten mit goldenem Punkt (kein Symbol — 30 Kameras auf einer Seite waren zu viel) ── */
.idea-list{list-style:none;padding:0;margin:0 0 1rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.idea-list li{display:flex;align-items:center;gap:0.7rem;padding:0.7rem 0.95rem;background:var(--card);border:1px solid var(--border);border-radius:10px;font-size:0.92rem;line-height:1.4;color:var(--text);margin:0}
.idea-list li::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--accent-warm)}

/* ── Schritte: blaue Nummern wie die Landing-Schritte ── */
.content-steps{list-style:none;padding:0;margin:0;display:grid;gap:0.75rem;counter-reset:cstep}
.content-steps li{counter-increment:cstep;position:relative;padding:1rem 1.15rem 1rem 3.6rem;background:var(--card);border:1px solid var(--border);border-radius:12px;font-size:0.95rem;line-height:1.65;color:var(--text-secondary)}
.content-steps li::before{content:counter(cstep);position:absolute;left:1rem;top:0.95rem;width:1.8rem;height:1.8rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-weight:700;font-size:0.85rem;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(91,106,191,0.3)}
.content-steps li > strong:first-child{display:block;color:var(--text);margin-bottom:0.15rem;font-size:1rem}

/* ── Pro / Contra (Ratgeber) ── */
.pro-con{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin:0.25rem 0 0;align-items:start}
.pro-con > div{border-radius:12px;padding:0.85rem 1rem;font-size:0.93rem;line-height:1.65;color:var(--text-secondary)}
.pro-con .pro{background:var(--primary-light)}
.pro-con .con{background:var(--card);border:1px solid var(--border)}
.pro-con .pro-con-label{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.3rem}
.pro-con .pro .pro-con-label{color:var(--primary)}
.pro-con .con .pro-con-label{color:var(--text-muted)}

/* ── Bild ── */
.content-figure{margin:0 0 2.5rem}
.content-figure img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,0.08)}

/* ── Tischkarten-Galerie ── */
.card-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0.25rem 0 1rem}
.card-gallery figure{margin:0;text-align:center}
.card-gallery img{width:100%;height:auto;display:block;border:1px solid var(--border);border-radius:8px;background:#fff;box-shadow:var(--shadow-sm);transition:transform 0.2s,box-shadow 0.2s}
@media (hover:hover){.card-gallery img:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}}
.card-gallery figcaption{font-size:0.8rem;font-weight:600;letter-spacing:0.04em;color:var(--accent-warm-dark);margin-top:0.5rem}
.card-gallery-few{grid-template-columns:repeat(3,1fr);max-width:540px}

/* ── FAQ: bündig mit dem Fließtext statt 700px aus landing.css ── */
.content-page .faq-list{max-width:none}

/* ── Querverweise ── */
.content-related h2{font-size:1rem !important;color:var(--text-secondary) !important}
.content-related h2::after{display:none !important}
.content-related ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.content-related a{display:inline-block;padding:0.45rem 0.9rem;border:1px solid var(--border);border-radius:9999px;font-size:0.86rem;color:var(--text);text-decoration:none;background:var(--card);transition:border-color 0.15s,color 0.15s}
@media (hover:hover){.content-related a:hover{border-color:var(--primary);color:var(--primary)}}

/* ── Ratgeber-Übersicht ── */
.ratgeber-list{list-style:none;padding:0;margin:0;display:grid;gap:0.75rem}
.ratgeber-list a{display:block;position:relative;padding:1.05rem 2.6rem 1.05rem 1.2rem;border:1px solid var(--border);border-left:3px solid var(--accent-warm);border-radius:12px;background:var(--card);text-decoration:none;transition:border-color 0.15s,box-shadow 0.15s}
.ratgeber-list a::after{content:"›";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--text-muted)}
.ratgeber-list a strong{display:block;color:var(--text);font-size:1rem;margin-bottom:0.25rem}
.ratgeber-list a span{color:var(--text-secondary);font-size:0.9rem;line-height:1.55}
@media (hover:hover){.ratgeber-list a:hover{border-color:var(--primary);border-left-color:var(--accent-warm);box-shadow:var(--shadow-md)}}

@media (max-width:768px){
    .card-gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
    /* Auf dem Handy wird die Einleitung 6–7 Zeilen lang — zentriert liest sich das holprig */
    .content-head{text-align:left}
    .idea-list,.pro-con{grid-template-columns:1fr}
    .content-page .section > ol:not([class]){columns:1}
    .card-gallery{grid-template-columns:repeat(2,1fr)}
    .card-gallery-few{grid-template-columns:repeat(3,1fr)}  /* drei Karten in einer Reihe statt 2 + verwaiste dritte */
}
.hero-eyebrow .eyebrow-link{color:inherit;text-decoration:none}
/* Anlass-Umschalter im Eyebrow: aktueller Anlass gold, die anderen gedämpft */
.occasion-switch{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0.2rem 0.55rem}
.occasion-switch a{color:var(--text-muted);text-decoration:none;transition:color 0.15s}
@media (hover:hover){.occasion-switch a:hover{color:var(--accent-warm-dark)}}
.occasion-current{color:var(--accent-warm-dark);border-bottom:2px solid var(--accent-warm);padding-bottom:2px}
.occasion-sep{color:var(--border)}
@media (hover:hover){.hero-eyebrow .eyebrow-link:hover{text-decoration:underline;text-underline-offset:3px}}

/* ── Zeitstrahl (Anlass-Seiten, zuerst /hochzeit 2026-10-21) ──
   Der Ablauf des Anlasses als eigene Struktur der Seite: goldene Linie, Symbol pro Station,
   Foto-Aufgabe als Chip. Bewusst kein Baustein der Landing (die Seite soll keine zweite Landing sein). */
.timeline{list-style:none;padding:0 !important;margin:1.5rem 0 0;position:relative}
.timeline-step{position:relative;display:grid;grid-template-columns:48px 1fr;gap:1.1rem;padding-bottom:1.75rem}
.timeline-step:last-child{padding-bottom:0}
/* Linie von Symbol zu Symbol — endet am letzten (eine Linie am ol lief unter dem letzten weiter) */
.timeline-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:48px;bottom:0;width:2px;background:var(--accent-warm);opacity:0.55}
.timeline-icon{position:relative;z-index:1;width:48px;height:48px;border-radius:50%;background:var(--card);border:2px solid var(--accent-warm);color:var(--accent-warm-dark);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--bg)}
.timeline-icon svg{width:22px;height:22px}
.timeline-body{padding-top:0.55rem}
.content-page .section:not(.cta-banner) .timeline-body h3{margin:0 0 0.35rem;font-size:1.08rem;font-weight:700}
.content-page .section:not(.cta-banner) .timeline-body p{margin-bottom:0.6rem}
.timeline-task{display:inline-flex;align-items:center;gap:0.5rem;padding:0.35rem 0.75rem 0.35rem 0.4rem;border-radius:9999px;background:var(--accent-warm-light);font-size:0.85rem;font-weight:500;color:var(--text)}
.timeline-task-label{padding:0.15rem 0.5rem;border-radius:9999px;background:var(--accent-warm);color:#fff;font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;white-space:nowrap;flex-shrink:0}
@media (max-width:560px){
    .timeline-step:not(:last-child)::before{left:19px;top:40px}
    .timeline-step{grid-template-columns:40px 1fr;gap:0.85rem}
    .timeline-icon{width:40px;height:40px}
    .timeline-icon svg{width:19px;height:19px}
    .timeline-body{padding-top:0.35rem}
}
@media (max-width:560px){
    /* Alle vier in EINER Zeile (umbrechend standen Trennpunkte am Zeilenende); passt ab 320px */
    .occasion-switch{justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap;font-size:0.68rem;letter-spacing:0.05em;gap:0.4rem}
}
@media (max-width:360px){
    .occasion-switch{font-size:0.62rem;letter-spacing:0.02em;gap:0.3rem}
}
/* Foto-Bingo (Ratgeber Hochzeitsspiele): eine ausgedruckte Papierkarte, kein App-Bauteil —
   weißes Papier (auch im Dark Mode, wie die Tischkarten), gedrucktes Gitter, die obere Reihe
   mit Kugelschreiber angekreuzt. Leicht schräg wie der Foto-Aufgaben-Mock der Landing. */
.bingo-card{max-width:340px;margin:1.25rem auto 0.5rem;padding:1.1rem 1.1rem 0.9rem;background:#fffdf8;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,0.14),0 1px 3px rgba(0,0,0,0.08);transform:rotate(-1.5deg);transition:transform 0.3s ease}
@media (hover:hover){.bingo-card:hover{transform:rotate(0deg)}}
.bingo-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.7rem}
.bingo-card-title{font-size:0.9rem;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#a5772f}
.bingo-card-table{font-size:0.75rem;color:#6b6b6b}
.bingo-grid{list-style:none;padding:0 !important;margin:0 !important;display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid #2a2a2a;border-left:1.5px solid #2a2a2a}
.bingo-grid li{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;padding:0.45rem;border-right:1.5px solid #2a2a2a;border-bottom:1.5px solid #2a2a2a;font-size:0.76rem;line-height:1.3;color:#1f1f1f;margin:0 !important}
.bingo-grid li.hit::after{content:"";position:absolute;inset:8%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232d4fa3' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M18 20 C 34 38, 56 60, 83 82'/%3E%3Cpath d='M80 17 C 63 37, 41 61, 20 84'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0.85;pointer-events:none}
.bingo-card figcaption{margin-top:0.65rem;text-align:center;font-size:0.8rem;font-weight:600;color:#a5772f}
@media (max-width:560px){.bingo-card{max-width:300px}.bingo-grid li{font-size:0.7rem;padding:0.3rem}}