/* Mondkalender nach Monaten (monatsseiten.php), seit 17.10.2026.
 * Farben, Karten und Knoepfe wie /mondkalender/ (themes/astromantie/css/mk.css), Schriften wie auf der ganzen Seite:
 * Fraunces fuer Ueberschriften, Hanken Grotesk fuer Text. Handy zuerst, keine Bewegung, kein Skript, nichts Fremdes.
 */
body.mkm-seite {
  --mkm-nacht: #06051a;
  --mkm-gold: #e8c886;
  --mkm-gold-hell: #f6e3b4;
  --mkm-text: #f1eaf8;
  --mkm-text-2: rgba(236, 228, 248, 0.8);
  --mkm-text-3: rgba(236, 228, 248, 0.6);
  --mkm-rand: rgba(170, 140, 255, 0.2);
  --mkm-rand-2: rgba(196, 172, 255, 0.36);
  --mkm-karte: linear-gradient(158deg, rgba(43, 30, 84, 0.9), rgba(17, 12, 38, 0.93));
  --mkm-gold-verlauf: linear-gradient(100deg, #f8e7bd 5%, #dcb56b 50%, #f3dba5 95%);
  --mkm-knopf-gold: linear-gradient(135deg, #f5e1ad, #e2c27c 45%, #c99f52);
  --mkm-gut: #8fdc9c;
  background: var(--mkm-nacht);
  color: var(--mkm-text);
}
body.mkm-seite .astro-content { background: transparent; }
body.mkm-seite .astro-seo-intro { display: none; }

.mkm-main { position: relative; isolation: isolate; overflow-x: clip; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
.mkm-main *, .mkm-main *::before, .mkm-main *::after { box-sizing: border-box; }
.mkm-himmel { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 64%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 46% 12%, rgba(255, 246, 220, 0.8), transparent 60%),
    radial-gradient(1px 1px at 63% 38%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 81% 22%, rgba(255, 255, 255, 0.65), transparent 60%),
    radial-gradient(1px 1px at 90% 72%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1px 1px at 8% 86%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.3px 1.3px at 54% 88%, rgba(255, 246, 220, 0.6), transparent 60%),
    radial-gradient(70% 55% at 78% 22%, rgba(120, 92, 230, 0.24), transparent 70%),
    radial-gradient(50% 45% at 10% 80%, rgba(126, 70, 200, 0.16), transparent 70%),
    linear-gradient(180deg, #05041a 0%, #0b0824 45%, #120c30 78%, #0a0820 100%); }

.mkm-wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 22px 16px 56px; }
.mkm-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mkm-main a { color: var(--mkm-gold-hell); text-underline-offset: 3px; }
.mkm-main a:hover { color: #fff; }

/* Kopf */
.mkm-krumen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 22px; font-size: 13px; color: var(--mkm-text-3); }
.mkm-krumen a { color: var(--mkm-text-2); text-decoration: none; }
.mkm-krumen a:hover { color: var(--mkm-gold-hell); }
.mkm-kicker { margin: 0 0 10px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 11.5px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mkm-gold); }
.mkm-h1 { margin: 0 0 14px; font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(2.05rem, 7.4vw, 3.3rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--mkm-text); text-wrap: balance; }
.mkm-h1 em, .mkm-h2 em { font-style: normal; font-weight: 500; background: var(--mkm-gold-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mkm-lead { margin: 0; max-width: 640px; font-size: 1.04rem; line-height: 1.65; color: var(--mkm-text-2); }
.mkm-kopf { margin-bottom: 8px; }

.mkm-abschnitt { margin-top: 44px; }
.mkm-main h2[id] { scroll-margin-top: 96px; }
.mkm-h2 { margin: 0 0 12px; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.5rem, 5.2vw, 2.1rem); line-height: 1.18; color: var(--mkm-text); text-wrap: balance; }
.mkm-h3 { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.16rem; line-height: 1.3; color: var(--mkm-text); }
.mkm-sub { margin: 0 0 16px; max-width: 640px; font-size: 0.98rem; line-height: 1.6; color: var(--mkm-text-2); }
.mkm-karte { border-radius: 20px; background: var(--mkm-karte); border: 1px solid var(--mkm-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px rgba(3, 2, 14, 0.45); }

/* Mondbilder */
.mkm-mond { display: block; flex: none; }
.mkm-mond-nacht { fill: #24203f; stroke: rgba(206, 192, 153, 0.35); stroke-width: 0.6; }
.mkm-mond-licht { fill: #efe6cc; }

/* Phasen */
.mkm-phasen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mkm-phase { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 1px; align-items: center; padding: 12px 16px; border-radius: 16px;
  background: var(--mkm-karte); border: 1px solid var(--mkm-rand); }
.mkm-phase .mkm-mond { grid-row: 1 / span 3; }
.mkm-phase-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.05rem; color: var(--mkm-text); }
.mkm-phase-datum { font-size: 0.9rem; color: var(--mkm-gold-hell); }
.mkm-phase-zeit { font-size: 0.86rem; color: var(--mkm-text-2); }
.mkm-phase-0, .mkm-phase-2 { border-color: rgba(232, 200, 134, 0.42); }

/* Monatstext */
.mkm-text { max-width: 680px; }
.mkm-text p { margin: 0 0 14px; font-size: 1.04rem; line-height: 1.75; color: var(--mkm-text-2); }
.mkm-text p:last-child { margin-bottom: 0; }
.mkm-text h2 { margin: 0 0 12px; font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.4rem, 5vw, 1.9rem); line-height: 1.2; color: var(--mkm-text); }
.mkm-text strong { color: var(--mkm-text); font-weight: 600; }

/* Tagestabelle */
.mkm-tabelle-rahmen { border-radius: 18px; border: 1px solid var(--mkm-rand); background: rgba(17, 12, 38, 0.72); overflow: hidden; }
.mkm-tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.35; }
.mkm-tabelle th, .mkm-tabelle td { padding: 9px 5px; text-align: left; vertical-align: top; border-top: 1px solid rgba(170, 140, 255, 0.12); }
.mkm-tabelle thead th { border-top: 0; padding-top: 11px; padding-bottom: 9px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mkm-text-3); background: rgba(43, 30, 84, 0.55); }
.mkm-tabelle th:first-child, .mkm-tabelle td:first-child { padding-left: 10px; }
.mkm-tabelle th:last-child, .mkm-tabelle td:last-child { padding-right: 10px; }
.mkm-tabelle tbody th { font-weight: 600; white-space: nowrap; color: var(--mkm-text); }
.mkm-wt { display: inline-block; min-width: 1.5em; font-weight: 400; color: var(--mkm-text-3); }
.mkm-td-mond { width: 24px; min-width: 24px; padding-left: 0 !important; padding-right: 2px !important; }
.mkm-td-mond .mkm-mond { width: 20px; height: 20px; max-width: none; margin-top: -1px; }
.mkm-tabelle small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--mkm-text-3); }
.mkm-z { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'DejaVu Sans', sans-serif; color: var(--mkm-gold); }
.mkm-tag.mkm-hat-zusatz > td { padding-bottom: 3px; }
.mkm-zusatz > td { border-top: 0; padding-top: 0; padding-bottom: 10px; font-size: 0.8rem; line-height: 1.4; color: var(--mkm-text-3); }
.mkm-ereignis, .mkm-wechsel { display: block; }
.mkm-ereignis { font-weight: 600; color: var(--mkm-gold-hell); }
.mkm-hat-phase { background: rgba(232, 200, 134, 0.07); }
.mkm-art { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.mkm-art-wurzel { background: rgba(207, 169, 113, 0.18); color: #e5c592; }
.mkm-art-blatt { background: rgba(127, 196, 230, 0.16); color: #a8daf2; }
.mkm-art-bluete { background: rgba(188, 198, 230, 0.16); color: #d4dbf3; }
.mkm-art-frucht { background: rgba(232, 154, 106, 0.18); color: #f2b48e; }
.mkm-legende { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 0.86rem; color: var(--mkm-text-2); }
.mkm-legende .mkm-art { min-width: 4.6em; text-align: center; margin-right: 6px; }

.mkm-tabelle-jahr td small { display: block; margin: 0 0 6px; }
.mkm-tabelle-jahr tbody th a { text-decoration: none; }

/* Kostprobe */
.mkm-ziele { display: grid; gap: 12px; }
.mkm-ziel { padding: 18px; }
.mkm-regel { margin: 0 0 10px; font-size: 0.92rem; line-height: 1.55; color: var(--mkm-text-3); }
.mkm-tage-gut, .mkm-tage-sehr, .mkm-tage-schlecht { margin: 6px 0 0; font-size: 0.96rem; line-height: 1.6; color: var(--mkm-text-2); }
.mkm-tage-gut b { color: var(--mkm-gut); }
.mkm-tage-sehr b { color: #c2f2c9; }
.mkm-tage-schlecht b { color: #f0a3b4; }

/* Angebot */
.mkm-angebot { padding: 24px 20px; text-align: center; border-color: rgba(232, 200, 134, 0.3); }
.mkm-angebot p { margin: 0 auto 12px; max-width: 560px; font-size: 0.98rem; line-height: 1.65; color: var(--mkm-text-2); }
.mkm-angebot .mkm-preise { color: var(--mkm-text); font-weight: 600; }
.mkm-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; }
.mkm-main a.mkm-knopf-gold { color: #1b1404; background: var(--mkm-knopf-gold); box-shadow: 0 10px 28px rgba(226, 190, 110, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.mkm-main a.mkm-knopf-gold:hover { color: #1b1404; transform: translateY(-1px); }
.mkm-klein { margin-top: 12px !important; font-size: 0.9rem !important; }

/* Weiter */
.mkm-blaettern { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.mkm-blaettern a { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--mkm-rand-2); background: rgba(34, 24, 70, 0.6); text-decoration: none; font-size: 0.92rem; }
.mkm-wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.96rem; }
.mkm-quelle { margin: 22px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--mkm-text-3); }
.mkm-monate { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mkm-monat-link { display: block; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--mkm-rand); background: var(--mkm-karte); text-decoration: none; font-family: 'Fraunces', serif; font-size: 1.05rem; }
.mkm-monat-link span { color: var(--mkm-text-3); font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 0.86rem; }
.mkm-hinweis { padding: 40px 0; color: var(--mkm-text-2); }

@media (min-width: 640px) {
  .mkm-wrap { padding: 34px 24px 72px; }
  .mkm-phasen { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
  .mkm-phase { grid-template-columns: 1fr; row-gap: 3px; justify-items: start; align-content: start; padding: 16px; }
  .mkm-phase .mkm-mond { grid-row: auto; margin-bottom: 6px; }
  .mkm-tabelle { font-size: 0.95rem; }
  .mkm-tabelle th, .mkm-tabelle td { padding: 10px 12px; }
  .mkm-td-mond { width: 34px; min-width: 34px; }
  .mkm-td-mond .mkm-mond { width: 24px; height: 24px; }
  .mkm-ziele { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mkm-angebot { padding: 34px 32px; }
  .mkm-monate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .mkm-tabelle { font-size: 0.82rem; }
  .mkm-tabelle th, .mkm-tabelle td { padding: 8px 4px; }
  .mkm-wt { min-width: 1.4em; }
}