/* ============================================================================
   wuensche-zum-geburtstag.de — Redesign 16.08.2026 (Artem)
   Richtung: Werkzeug-Look. Die Sprueche sind das Produkt, alles andere tritt
   zurueck. Ziel ist nicht lange Verweildauer auf EINER Seite, sondern schnelles
   Finden und Weiterstoebern (Seitenaufrufe je Besuch = spaetere Anzeigen-
   Einblendungen).
   SEO-Regel dieses Umbaus: keine Aenderung an URLs, Texten, Ueberschriften-
   Hierarchie, Meta-Angaben oder strukturierten Daten. Nur Darstellung.
   Keine Webfonts (Content-Security-Policy erlaubt keine externen Quellen und
   sie kosten Ladezeit) — durchgehend Systemschriften.
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  --paper:        #FBF9F9;
  --card:         #FFFFFF;
  --raise:        #F4EFF0;
  --ink:          #241C1F;
  --muted:        #6B5C61;
  --accent:       #B32853;
  --accent-hover: #8F1F41;
  --accent-soft:  #FBE9EE;
  --line:         #EBE0E3;
  --header-bg:    rgba(251, 249, 249, .86);
  --shadow:       0 1px 2px rgba(36, 28, 31, .06), 0 4px 14px rgba(36, 28, 31, .05);
  --shadow-lift:  0 2px 4px rgba(36, 28, 31, .08), 0 12px 28px rgba(36, 28, 31, .10);

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 12px;
  --breite: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #161013;
    --card:         #1E1619;
    --raise:        #251C20;
    --ink:          #F3E9EC;
    --muted:        #B39BA3;
    --accent:       #F2718F;
    --accent-hover: #FF8FA6;
    --accent-soft:  #33202A;
    --line:         #322429;
    --header-bg:    rgba(22, 16, 19, .88);
    --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-lift:  0 2px 4px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --paper:        #161013;
  --card:         #1E1619;
  --raise:        #251C20;
  --ink:          #F3E9EC;
  --muted:        #B39BA3;
  --accent:       #F2718F;
  --accent-hover: #FF8FA6;
  --accent-soft:  #33202A;
  --line:         #322429;
  --header-bg:    rgba(22, 16, 19, .88);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --shadow-lift:  0 2px 4px rgba(0, 0, 0, .5), 0 12px 28px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------- Basis */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.container { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }

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

/* ---------------------------------------------------------------- Kopfzeile
   Klebt oben: der Wechsel in eine andere Kategorie ist damit immer einen Klick
   entfernt — das ist der Haupthebel fuer Seitenaufrufe je Besuch. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--breite); margin: 0 auto; padding: .6rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.logo {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--ink); font-weight: 700;
  font-size: 1.02rem; white-space: nowrap; flex-shrink: 0;
}
.logo:hover { color: var(--ink); }
.logo-badge {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--accent-soft); font-size: 1rem;
}
.logo-main em { font-style: normal; color: var(--muted); font-weight: 500; }

/* HANDY-FIX 16.08.2026. Am 375-Pixel-Bildschirm nachgemessen: Innenabstand 40,
   Abstaende 32, Logo 241 (darf nicht schrumpfen), Theme-Knopf 36. Fuer das Menue
   blieben 26 Pixel. Fuenf der sechs Punkte lagen ausserhalb des Bildschirms und
   waren nicht erreichbar. Das Menue scrollt zwar seitlich, aber nicht in 26
   Pixeln. Auf schmalen Bildschirmen bekommt es deshalb eine eigene Zeile;
   ab 640 Pixeln bleibt alles wie vorher in einer Zeile. */
.header-inner { flex-wrap: wrap; row-gap: .35rem; }
.main-nav { flex: 1 0 100%; order: 3; min-width: 0; }
.theme-toggle { margin-left: auto; }
@media (min-width: 640px) {
  .header-inner { flex-wrap: nowrap; }
  .main-nav { flex: 1 1 0%; order: 0; }
}
.main-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .15rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.main-nav ul::-webkit-scrollbar { display: none; }
.main-nav a {
  display: block; padding: .4rem .7rem; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-size: .93rem;
  font-weight: 500; white-space: nowrap;
}
.main-nav a:hover { background: var(--raise); color: var(--ink); }

/* Merkzettel-Zaehler in der Kopfzeile. Wird per JavaScript eingesetzt und nur,
   wenn wirklich etwas gemerkt ist — steht deshalb nicht im ausgelieferten HTML. */
.merkzettel-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .7rem; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent-soft);
  color: var(--accent); text-decoration: none;
  font-size: .87rem; font-weight: 650; white-space: nowrap;
}
.merkzettel-link:hover { background: var(--accent); color: #fff; }

/* Herkunftsangabe auf einer gemerkten Karte */
.merk-herkunft {
  font-size: .82rem; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: .5rem;
}
.merk-herkunft:hover { color: var(--accent); }

.theme-toggle {
  flex-shrink: 0; width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: .95rem;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: inline; }
}

/* ---------------------------------------------------------------- Hero
   Bewusst flach gehalten. Vorher fuellte das Foto den ganzen Bildschirm und
   schob die Spr]ueche unter die Falz — bei einer Seite, die man zum schnellen
   Abholen besucht, ist das der falsche Handel. */
.hero {
  position: relative;
  padding: 2.6rem 1.25rem 2.2rem;
  text-align: center;
  background: var(--raise);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero-foto { background-size: cover; background-position: center; }
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(251,249,249,.82), rgba(251,249,249,.94));
}
:root[data-theme="dark"] .hero-foto::after {
  background: linear-gradient(180deg, rgba(22,16,19,.86), rgba(22,16,19,.95));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-foto::after {
    background: linear-gradient(180deg, rgba(22,16,19,.86), rgba(22,16,19,.95));
  }
}
.hero-inner { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; }
.hero-svg { width: 54px; height: 54px; margin-bottom: .5rem; }
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4.4vw, 2.7rem);
  line-height: 1.15; margin: 0 0 .6rem;
  letter-spacing: -.015em; text-wrap: balance;
}
.hero p { margin: 0 auto; color: var(--muted); font-size: 1.03rem; max-width: 34rem; }
.hero-cta {
  display: inline-block; margin-top: 1.1rem;
  background: var(--accent); color: #fff;
  padding: .7rem 1.3rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .97rem;
}
.hero-cta:hover { background: var(--accent-hover); color: #fff; }

/* ---------------------------------------------------------------- Raster */
.page-grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem; padding: 2.2rem 0 3.5rem;
}
@media (min-width: 1024px) {
  .page-grid.with-sidebar { grid-template-columns: minmax(0, 1fr) 290px; }
}
/* Ohne Seitenspalte (Startseite, Rechtsseiten) die Spalte mittig setzen und
   begrenzen — sonst klebt der Text links und rechts bleibt eine grosse Leere. */
.page-grid:not(.with-sidebar) > .article { max-width: 60rem; margin-inline: auto; }
.article { min-width: 0; }
.article > h2, .article section > h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.25; margin: 2.4rem 0 1rem;
  letter-spacing: -.01em; text-wrap: balance;
}
.article h3 {
  font-size: 1.08rem; margin: 1.8rem 0 .8rem; letter-spacing: -.005em;
}
.article p { margin: 0 0 1rem; max-width: 42rem; }
.article section { scroll-margin-top: 70px; }

/* ---------------------------------------------------------------- Brotkrumen, Meta, Inhalt */
.breadcrumb { font-size: .88rem; color: var(--muted); margin-bottom: .9rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  font-size: .85rem; color: var(--muted);
  padding-bottom: 1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.toc {
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.6rem 0 2rem;
}
.toc strong { display: block; margin-bottom: .5rem; font-size: .95rem; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
@media (min-width: 640px) { .toc ul { grid-template-columns: 1fr 1fr; } }
.toc a { color: var(--ink); text-decoration: none; font-size: .93rem; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.sprung-zu-wuenschen { font-weight: 600; }
.sprung-zu-wuenschen a { text-decoration: none; }
.sprung-zu-wuenschen a:hover { text-decoration: underline; }

.article-figure { margin: 1.6rem 0; }
.article-figure img { width: 100%; border-radius: var(--radius); display: block; }
.article-figure figcaption {
  margin-top: .5rem; font-size: .84rem; color: var(--muted); text-align: center;
}

/* ---------------------------------------------------------------- Sprueche
   Das Kernstueck. Zweispaltig ab Tablet: mehr Spruch je Bildschirm, weniger
   Scrollen bis zum passenden. Serifenschrift, damit der Text als Inhalt wirkt
   und nicht als Oberflaeche. */
.spruch-grid { display: grid; gap: .9rem; margin: 1.2rem 0 2rem; }
@media (min-width: 700px) { .spruch-grid { grid-template-columns: 1fr 1fr; } }

.spruch {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: .8rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.spruch:hover, .spruch:focus-within {
  box-shadow: var(--shadow-lift); border-color: var(--accent);
  transform: translateY(-1px);
}
.spruch p {
  margin: 0; max-width: none;
  font-family: var(--serif); font-size: 1.1rem; line-height: 1.55;
}

.spruch-actions { display: flex; align-items: center; gap: .5rem; }
.copy-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  border: 1px solid var(--accent); border-radius: 8px;
  background: transparent; color: var(--accent);
  padding: .5rem .8rem; font: inherit; font-size: .88rem; font-weight: 600;
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.copy-btn:hover { background: var(--accent); color: #fff; }
.copy-btn.copied { background: var(--accent); color: #fff; border-color: var(--accent); }

.fav-btn {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--muted);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.fav-btn:hover { color: var(--accent); border-color: var(--accent); }
.fav-btn.is-fav { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Entfernen-Knopf auf dem Merkzettel — bewusst NICHT .fav-btn, damit der
   globale Merk-Handler nicht mitfeuert. Aussehen identisch zum gemerkten
   Zustand, damit klar ist: nochmal tippen entfernt. */
.merk-weg {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent-soft); color: var(--accent);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.merk-weg:hover { background: var(--accent); color: #fff; }

/* Dezente Themen-Marker statt bunter Flaechen */
.spruch.icon-herz::before,
.spruch.icon-konfetti::before,
.spruch.icon-ballons::before,
.spruch.icon-geschenk::before,
.spruch.icon-prost::before,
.spruch.icon-blumen::before,
.spruch.icon-hut::before {
  font-size: .95rem; line-height: 1; opacity: .55;
}
.spruch.icon-herz::before     { content: "♥"; color: var(--accent); }
.spruch.icon-konfetti::before { content: "✦"; color: var(--accent); }
.spruch.icon-ballons::before  { content: "◍"; color: var(--accent); }
.spruch.icon-geschenk::before { content: "✚"; color: var(--accent); }
.spruch.icon-prost::before    { content: "❖"; color: var(--accent); }
.spruch.icon-blumen::before   { content: "❀"; color: var(--accent); }
.spruch.icon-hut::before      { content: "▲"; color: var(--accent); }

/* ---------------------------------------------------------------- Karten / Weiterstoebern */
.card-grid { display: grid; gap: .9rem; margin: 1.2rem 0 2rem; }
@media (min-width: 560px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  box-shadow: var(--shadow);
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card:hover {
  color: var(--ink); border-color: var(--accent);
  box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
.card-title { font-weight: 650; margin-bottom: .25rem; }
.card h3 { margin: 0 0 .25rem; font-size: 1rem; }
.card p { margin: 0; font-size: .9rem; color: var(--muted); max-width: none; }

/* ---------------------------------------------------------------- Seitenspalte */
.sidebar { display: flex; flex-direction: column; gap: 1.2rem; }
@media (min-width: 1024px) { .sidebar { position: sticky; top: 72px; align-self: start; } }
.sidebar-box, .related-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.sidebar-box h3, .related-box h3 { margin: 0 0 .7rem; font-size: .97rem; }
.sidebar-box ul, .related-box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sidebar-box a, .related-link {
  display: block; padding: .4rem .5rem; margin: 0 -.5rem; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: .93rem;
}
.sidebar-box a:hover, .related-link:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------------------------------------------------------------- Anzeigenplätze
   Vorbereitet, aber leer. Solange kein Inhalt drin ist, nehmen sie KEINEN Platz
   ein — ein reservierter Leerraum waere schlechter als gar keiner (Layout-
   Spruenge beim spaeteren Befuellen vermeidet man ueber feste Groessen erst
   dann, wenn das Format feststeht). */
.ad-slot { margin: 1.8rem 0; text-align: center; }
.ad-slot:empty { display: none; }
.ad-slot::before {
  content: "Anzeige"; display: block;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .4rem;
}
.ad-slot:empty::before { display: none; }

/* ---------------------------------------------------------------- FAQ */
.faq { margin: 2.4rem 0; }
.faq details {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.15rem; margin-bottom: .6rem;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { margin: .7rem 0 0; color: var(--muted); }

/* ---------------------------------------------------------------- Autorenkasten */
.author-box {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--raise); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.25rem; margin: 2.4rem 0;
}
.author-avatar {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .95rem;
}
.author-box strong { display: block; margin-bottom: .2rem; }
.author-box p { margin: 0; font-size: .9rem; color: var(--muted); }

/* ---------------------------------------------------------------- Spruch-Finder */
.finder {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem; margin: 1.6rem 0;
}
.finder h2 { margin-top: 0; }
.finder-controls { display: grid; gap: .8rem; margin: 1rem 0; }
@media (min-width: 720px) { .finder-controls { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } }
.finder-controls label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .84rem; font-weight: 600; color: var(--muted);
}
.finder-status { margin: .2rem 0 0; font-size: .88rem; color: var(--muted); }
.finder-controls select:disabled, .finder-controls button:disabled {
  opacity: .5; cursor: not-allowed;
}
.finder-controls select, .finder-controls button {
  width: 100%; padding: .6rem .8rem; font: inherit; font-size: .95rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink);
}
.finder-controls button {
  background: var(--accent); color: #fff; border-color: var(--accent);
  font-weight: 600; cursor: pointer;
}
.finder-controls button:hover { background: var(--accent-hover); }
.finder-results { display: grid; gap: .9rem; }
@media (min-width: 700px) { .finder-results { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- Fusszeile */
.site-footer {
  background: var(--raise); border-top: 1px solid var(--line);
  margin-top: 3rem; padding: 2.5rem 1.25rem 1.5rem;
}
.footer-inner {
  max-width: var(--breite); margin: 0 auto;
  display: grid; gap: 1.8rem;
}
@media (min-width: 620px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-inner { grid-template-columns: repeat(4, 1fr); } }
.footer-title { font-weight: 650; margin: 0 0 .6rem; font-size: .95rem; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .22rem; }
.footer-inner a { color: var(--muted); text-decoration: none; font-size: .89rem; }
.footer-inner a:hover { color: var(--accent); text-decoration: underline; }
.footer-bottom {
  max-width: var(--breite); margin: 2rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between;
  font-size: .85rem; color: var(--muted);
}
.footer-bottom a { color: var(--muted); }

/* ---------------------------------------------------------------- Cookie-Hinweis */
.cookie-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 100;
  max-width: 30rem;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding: 1rem 1.15rem;
  display: flex; flex-direction: column; gap: .8rem;
}
.cookie-banner p { margin: 0; font-size: .88rem; color: var(--muted); }
.cookie-banner-actions { display: flex; gap: .6rem; }
.cookie-banner-actions button {
  flex: 1; padding: .5rem .8rem; font: inherit; font-size: .87rem; font-weight: 600;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.cookie-banner-actions #cookie-accept {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.cookie-banner-actions #cookie-accept:hover { background: var(--accent-hover); }
.cookie-banner-actions #cookie-deny:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- Rechtsseiten */
.legal p { max-width: 46rem; }
.legal h2 { margin-top: 2rem; }