/* =============================================================================
   luithardt.family – im Stil der Familien-Mails (branding/family/mail/quellen/_kopf.html):
   Creme #f4f1ea, Wappen-Logo oben mittig, weiße Karte mit Goldlinie, Georgia,
   kleine gesperrte Goldzeilen, Kästen mit Goldrand, Knöpfe in Dunkelblau,
   gesperrte Fußzeile. Keine externen Schriften/Skripte (Datenschutz).
   Logos kommen aus /marke/family/ (setup). Hintergrundbild: siehe .mit-bild unten.
   ============================================================================= */
:root {
  color-scheme: light;
  --grund: #f4f1ea; --karte: #ffffff; --text: #1f2937; --leise: #6b7280; --linie: #eee7da;
  --blau: #1e2a44; --blau-hell: #2f3f63; --gold: #c9973f; --gold-text: #b8862f; --gold-gross: #a8781f;
  --kasten: #f8f5ef; --knopf-text: #ffffff; --fuss: #8a7a5c;
  --schrift: Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund: #0f1420; --karte: #161d2c; --text: #e5e7eb; --leise: #a3a9b6; --linie: #263048;
    --blau: #e8d3a2; --blau-hell: #f1e2bf; --gold: #d9ae5f; --gold-text: #d9ae5f; --gold-gross: #e2b866;
    --kasten: #1c2436; --knopf-text: #0f1420; --fuss: #a3977c;
    color-scheme: dark;
  }
}
:root[data-thema="dunkel"] {
  --grund: #0f1420; --karte: #161d2c; --text: #e5e7eb; --leise: #a3a9b6; --linie: #263048;
  --blau: #e8d3a2; --blau-hell: #f1e2bf; --gold: #d9ae5f; --gold-text: #d9ae5f; --gold-gross: #e2b866;
  --kasten: #1c2436; --knopf-text: #0f1420; --fuss: #a3977c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--grund); color: var(--text); font: 17px/1.65 var(--schrift);
       min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--blau); text-underline-offset: 3px; }
img { max-width: 100%; }

/* Optional wieder mit leichtem Hintergrundbild: <body class="… mit-bild"> */
body.mit-bild { background: var(--grund) url("/bilder/hintergrund.svg") center bottom / cover no-repeat fixed; }

/* --- Kopfzeile: nur die Knöpfe, rechts ------------------------------------------- */
.kopf { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap;
        padding: 16px clamp(14px, 4vw, 32px) 0; }
.hallo { font-size: 15px; color: var(--leise); margin-right: 4px; }
.knopf { display: inline-flex; align-items: center; gap: 8px; font: 15px/1 var(--schrift); text-decoration: none;
         padding: 11px 20px; border-radius: 4px; border: 1px solid var(--blau); color: var(--blau);
         background: var(--karte); white-space: nowrap; }
.knopf:hover { background: var(--kasten); }
.knopf.voll { background: var(--blau); color: var(--knopf-text); }
.knopf.voll:hover { background: var(--blau-hell); }
.knopf svg { width: 16px; height: 16px; flex: none; }

/* angemeldet / abgemeldet (konto.js setzt die Klasse am <html>) */
.nur-angemeldet { display: none !important; }
html.angemeldet .nur-angemeldet { display: inline-flex !important; }
html.angemeldet .nur-abgemeldet { display: none !important; }

/* --- Seitenspalte wie die Mail: Logo, Karte(n), Fuß ---------------------------------- */
.spalte { width: 100%; max-width: 640px; margin: 0 auto; padding: 24px 12px 0; flex: 1;
          display: flex; flex-direction: column; }
.spalte.breit { max-width: 760px; }
.startseite .spalte { justify-content: center; padding-bottom: 6vh; }
.logo { display: block; margin: 0 auto 24px; width: 140px; height: auto; }
.startseite .logo { width: clamp(130px, 22vw, 168px); }
.logo-link { align-self: center; }
.karte { background: var(--karte); border-top: 4px solid var(--gold); border-radius: 6px;
         padding: 36px clamp(22px, 6vw, 40px); margin: 0 0 22px; }
.oberzeile { margin: 0; font-size: 12px; letter-spacing: 4px; color: var(--gold-text); text-transform: uppercase; }
h1, h2, h3 { font-family: var(--schrift); font-weight: normal; color: var(--blau); line-height: 1.25; }
h1 { font-size: 30px; margin: 6px 0 22px; }
h2 { font-size: 21px; margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 4px; }
p { margin: 0 0 18px; }
.karte > :last-child { margin-bottom: 0; }

/* Spruch auf der Startseite */
.spruch { margin: 6px 0 4px; text-align: center; line-height: 1.05; }
.spruch .gross { display: block; font-size: clamp(44px, 10vw, 66px); }
.spruch .zwischen { display: block; font-size: 19px; font-style: italic; color: var(--gold-text);
                    letter-spacing: .06em; margin: .45em 0 .3em; }
.spruch .gold { color: var(--gold-gross); }
.mittig { text-align: center; }
.trenner { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 26px auto; }

/* Kasten mit Goldrand (wie „Deine Mail-Adresse“ in der Mail) */
.kasten { background: var(--kasten); border-left: 3px solid var(--gold); padding: 16px 22px; margin: 0 0 26px; }
.kasten .oberzeile { font-size: 11px; letter-spacing: 3px; }
.platzhalter { color: var(--leise); font-style: italic; }

/* Zeitleiste */
.zeitleiste { list-style: none; padding: 0; margin: 0; }
.zeitleiste li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.zeitleiste li:last-child { border-bottom: 0; }
.zeitleiste b { display: block; font-weight: normal; color: var(--gold-text); font-size: 13px; letter-spacing: 3px; }

/* Zweige als Kästen nebeneinander */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.raster .kasten { margin: 0; }

/* Termine */
.termine { width: 100%; border-collapse: collapse; }
.termine td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.termine tr:last-child td { border-bottom: 0; }
.termine td:first-child { white-space: nowrap; color: var(--blau); width: 1%; }

/* Linkliste wie in „Deine Links“ */
.links { list-style: none; padding: 0; margin: 0; }
.links li { padding: 10px 0; border-bottom: 1px solid var(--linie); }
.links li:last-child { border-bottom: 0; }
.links a { font-size: 17px; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.links span { display: block; font-size: 14px; color: var(--leise); }

/* --- Fuß wie in der Mail ---------------------------------------------------------- */
.fuss { text-align: center; font: 12px/1.9 var(--schrift); letter-spacing: 3px; color: var(--fuss);
        padding: 8px 12px 30px; }
.fuss a { color: inherit; }

@media (max-width: 560px) {
  .kopf { padding: 12px 12px 0; }
  .knopf { padding: 10px 14px; font-size: 14px; }
  .hallo { display: none; }
  .karte { padding: 28px 20px; }
}

/* --- Tag-/Dunkelmodus (thema.js): Knopf und passende Logos ------------------------ */
.knopf.rund { padding: 0; width: 42px; height: 42px; justify-content: center; }
.knopf.rund svg { width: 18px; height: 18px; }
.nur-dunkel { display: none !important; }
:root[data-thema="dunkel"] .nur-hell { display: none !important; }
:root[data-thema="dunkel"] .nur-dunkel { display: inline !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .nur-hell { display: none !important; }
  :root:not([data-thema="hell"]) .nur-dunkel { display: inline !important; }
}
/* Logos als Block (zentriert) – nicht als Textzeile */
:root[data-thema="dunkel"] img.logo.nur-dunkel { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) img.logo.nur-dunkel { display: block !important; } }
/* im Dunkeln: „Willkommen,“ hell, „Luithardt“ gold – wie hell Dunkelblau/Gold */
:root[data-thema="dunkel"] .spruch .gross:not(.gold) { color: #f3f4f6; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .spruch .gross:not(.gold) { color: #f3f4f6; } }