/* Dein Mondkalender (/mondkalender/), Vorlage 08.10.2026
 * Farben und Karten wie der Mondkalender der App (violette Nacht, Gold), Schriften wie auf der ganzen Seite
 * (Fraunces fuer Ueberschriften, Hanken Grotesk fuer Text; der UI-Standard erzwingt beides).
 * Zwei Ansichten: .mk-verkauf (ohne Abo) und .mk-gekauft (mit Abo, dazu mk-app.css = die Ebenen der App).
 * Bewegung nur ueber transform und opacity; auf Touch-Geraeten (Handy-Sparmodus) ohne Weichzeichner und Dauerschleifen.
 */
body.mk-seite {
  --mk-nacht-0: #06051a;
  --mk-nacht-1: #0c0a22;
  --mk-nacht-2: #151030;
  --mk-violett: #9a80ed;
  --mk-violett-2: #c2b0ff;
  --mk-gold: #e8c886;
  --mk-gold-hell: #f6e3b4;
  --mk-gold-tief: #c9a25a;
  --mk-text: #f1eaf8;
  --mk-text-2: rgba(236, 228, 248, 0.8);
  --mk-text-3: rgba(236, 228, 248, 0.58);
  --mk-rand: rgba(170, 140, 255, 0.2);
  --mk-rand-2: rgba(196, 172, 255, 0.36);
  --mk-karte: linear-gradient(158deg, rgba(43, 30, 84, 0.9), rgba(17, 12, 38, 0.93));
  --mk-karte-hell: linear-gradient(158deg, rgba(58, 42, 108, 0.9), rgba(22, 16, 48, 0.93));
  --mk-gut: #8fdc9c;
  --mk-schlecht: #f0a3b4;
  --mk-schatten: 0 24px 60px rgba(3, 2, 14, 0.55);
  --mk-gold-verlauf: linear-gradient(100deg, #f8e7bd 5%, #dcb56b 50%, #f3dba5 95%);
  --mk-knopf-gold: linear-gradient(135deg, #f5e1ad, #e2c27c 45%, #c99f52);
  background: var(--mk-nacht-0);
  color: var(--mk-text);
}
body.mk-seite .astro-content { background: transparent; }
body.mk-seite .astro-standalone-wrapper { max-width: none; padding: 0; margin: 0; }
body.mk-seite .astro-seo-intro { display: none; }

#mk { position: relative; isolation: isolate; overflow-x: clip; font-family: 'Hanken Grotesk', system-ui, sans-serif; }
#mk *, #mk *::before, #mk *::after { box-sizing: border-box; }
#mk img { max-width: 100%; }
.mk-wrap { position: relative; z-index: 2; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.mk-wrap-schmal { max-width: 860px; }
.mk-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Himmel (fest hinter allem) ---------- */
.mk-himmel { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(70% 55% at 78% 22%, rgba(120, 92, 230, 0.26), transparent 70%),
    radial-gradient(50% 45% at 10% 80%, rgba(126, 70, 200, 0.18), transparent 70%),
    radial-gradient(80% 40% at 50% 110%, rgba(236, 208, 143, 0.08), transparent 70%),
    linear-gradient(180deg, #05041a 0%, #0b0824 45%, #120c30 78%, #0a0820 100%); }
.mk-milchstrasse { position: absolute; left: -20%; top: -10%; width: 140%; height: 70%; opacity: 0.55; transform: rotate(-16deg);
  background:
    radial-gradient(42% 16% at 46% 50%, rgba(208, 196, 255, 0.12), transparent 72%),
    radial-gradient(26% 9% at 58% 47%, rgba(255, 236, 214, 0.1), transparent 70%),
    radial-gradient(60% 22% at 40% 52%, rgba(140, 110, 230, 0.12), transparent 75%); }
.mk-sterne { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Der Mond: eine Leinwand, per transform bewegt (Aufgang hinter der Erde; vor "Was der Mond heute sagt" nach rechts hinaus) */
.mk-mond { position: absolute; left: 0; top: 0; width: 260px; height: 260px; transform-origin: 50% 50%; will-change: transform; opacity: 0; z-index: 1; }
.mk-mond.ist-da { opacity: 1; transition: opacity 0.9s ease; }
.mk-mond-kugel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-mond-schein { position: absolute; inset: -60%; border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 228, 255, 0.34) 0%, rgba(190, 170, 255, 0.14) 28%, rgba(150, 120, 240, 0.05) 48%, transparent 66%);
  opacity: var(--mk-schein, 1); }

/* ---------- Gemeinsame Bausteine ---------- */
.mk-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 12.5px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--mk-gold); }
.mk-kicker svg { width: 13px; height: 13px; fill: var(--mk-gold); flex: none; }
.mk-kicker-klein { font-size: 11px; letter-spacing: 0.26em; margin-bottom: 6px; }
.mk-h2 { margin: 0 0 18px; font-family: 'Fraunces', serif; font-weight: 300; font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--mk-text); text-wrap: balance; }
.mk-h2 em, .mk-h1 em { font-style: normal; font-weight: 500; background: var(--mk-gold-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mk-h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.32rem; line-height: 1.25; color: var(--mk-text); }
.mk-sub { margin: 0 auto; max-width: 640px; font-size: 1.06rem; line-height: 1.7; color: var(--mk-text-2); }
.mk-kopfzeile { text-align: center; margin: 0 auto 54px; max-width: 760px; }
.mk-abschnitt { position: relative; z-index: 2; padding: 116px 0; }
.mk-karte { position: relative; border-radius: 24px; background: var(--mk-karte); border: 1px solid var(--mk-rand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 18px 40px rgba(150, 120, 230, 0.06), var(--mk-schatten); }

.mk-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin: clamp(24px, 4vh, 34px) 0 0; }
.mk-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 999px;
  font: 700 15.5px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; overflow: hidden; }
.mk-knopf-gold { color: #1b1404; background: var(--mk-knopf-gold); box-shadow: 0 12px 34px rgba(226, 190, 110, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.mk-knopf-gold::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); animation: mk-glanz 5.5s ease-in-out 2s infinite; }
.mk-knopf-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(226, 190, 110, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
.mk-knopf-glas { color: var(--mk-text); background: rgba(34, 24, 70, 0.62); border: 1px solid var(--mk-rand-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-knopf-glas:hover { transform: translateY(-2px); border-color: rgba(232, 200, 134, 0.6); color: #fff; }
@keyframes mk-glanz { 0%, 70% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }

/* ---------- Kopf der Verkaufsseite ---------- */
.mk-hero { position: relative; z-index: 2; min-height: calc(100vh - 84px); min-height: calc(100svh - 84px); display: flex; align-items: flex-start;
  padding: clamp(36px, 7vh, 72px) 0 120px; }
.mk-hero-innen { z-index: 3; }
.mk-hero-text { max-width: 640px; }
.mk-h1 { margin: 0; font-family: 'Fraunces', serif; font-weight: 300; color: var(--mk-text); }
.mk-h1 .mk-kicker { display: flex; margin-bottom: 22px; }
.mk-h1-zeile { display: block; font-size: clamp(2.7rem, min(5.2vw, 8.4vh), 4.7rem); line-height: 1.03; letter-spacing: -0.02em; text-wrap: balance; }
.mk-lead { margin: 24px 0 0; max-width: 560px; font-size: 1.12rem; line-height: 1.7; color: var(--mk-text-2); }
.mk-zahlen { display: flex; gap: 0; margin: clamp(26px, 4.5vh, 44px) 0 0; padding: 0; list-style: none; }
.mk-zahlen li { padding: 0 28px; border-left: 1px solid var(--mk-rand-2); }
.mk-zahlen li:first-child { padding-left: 0; border-left: 0; }
.mk-zahlen b { display: block; font-family: 'Fraunces', serif; font-weight: 400; font-size: 2rem; line-height: 1.1; color: var(--mk-gold-hell); }
.mk-zahlen span { display: block; margin-top: 4px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-text-3); }
.mk-heute-pille { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 30px; padding: 9px 18px 9px 14px; border-radius: 999px;
  background: rgba(16, 11, 38, 0.66); border: 1px solid var(--mk-rand-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 0.9rem; color: var(--mk-text); max-width: 100%; }
.mk-punkt { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--mk-gold); box-shadow: 0 0 0 0 rgba(232, 200, 134, 0.6); animation: mk-puls 2.4s ease-out infinite; }
@keyframes mk-puls { 0% { box-shadow: 0 0 0 0 rgba(232, 200, 134, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(232, 200, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(232, 200, 134, 0); } }

/* Die Erde (mk-erde.js zeichnet hinein) */
.mk-erde { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 260px), rgba(0, 0, 0, 0.35) calc(100% - 90px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 260px), rgba(0, 0, 0, 0.35) calc(100% - 90px), transparent 100%); }
.mk-erde canvas { position: absolute; left: 0; bottom: 0; display: block; }

.mk-hero-text::before { content: ''; position: absolute; z-index: -1; left: -14%; top: -18%; width: 92%; height: 128%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 4, 22, 0.62), rgba(6, 4, 22, 0) 100%); }

/* ---------- Heute (Kostprobe) ---------- */
.mk-heute { padding-top: 70px; }
.mk-heute-raster { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 26px; align-items: stretch; }
.mk-mondkarte { padding: 34px 32px 30px; text-align: center; background: var(--mk-karte-hell); }
.mk-mondkarte-mond { position: relative; width: 180px; height: 180px; margin: 0 auto 18px; }
.mk-mondkarte-mond::before { content: ''; position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(circle, rgba(226, 216, 255, 0.24), rgba(160, 130, 240, 0.08) 45%, transparent 68%); }
.mk-kugel { position: relative; width: 100%; height: 100%; display: block; }
.mk-datum { margin: 0; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mk-text-3); }
.mk-phase { margin: 8px 0 4px; font-family: 'Fraunces', serif; font-weight: 400; font-size: 1.9rem; line-height: 1.15; color: var(--mk-gold-hell); }
.mk-prozent { margin: 0 0 22px; color: var(--mk-text-2); font-size: 0.98rem; }
.mk-fakten { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; text-align: left; }
.mk-fakten li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(190, 165, 255, 0.12); }
.mk-fakten b { display: block; font-weight: 600; font-size: 1rem; color: var(--mk-text); }
.mk-fakten small { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--mk-text-3); }
.mk-fakt-bild { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: contain;
  font-size: 22px; line-height: 1; color: var(--mk-gold); background: radial-gradient(circle, rgba(232, 200, 134, 0.16), rgba(232, 200, 134, 0) 70%); }
.mk-fakt-pfeil { font-size: 20px; font-weight: 700; }
.mk-gartenkarte { padding: 30px 32px 28px; }
.mk-gartenkarte-kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.mk-gartenkarte-bild { width: 64px; height: 64px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4)); }
.mk-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.mk-liste li { position: relative; padding: 9px 12px 9px 30px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); font-size: 0.95rem; line-height: 1.4; color: var(--mk-text); }
.mk-liste li::before { content: ''; position: absolute; left: 13px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-gut); box-shadow: 0 0 10px rgba(143, 220, 156, 0.6); }
.mk-liste-nein li::before { background: var(--mk-schlecht); box-shadow: 0 0 10px rgba(240, 163, 180, 0.55); }
.mk-liste li.mk-laedt { color: var(--mk-text-3); }
.mk-liste li.mk-laedt::before { background: var(--mk-text-3); box-shadow: none; }
.mk-liste-titel { margin: 20px 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mk-schlecht); }
.mk-gesperrt { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mk-rand); }
.mk-gesperrt > p { margin: 0 0 12px; font-size: 0.9rem; color: var(--mk-text-3); }
.mk-zu-reihe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mk-zu { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(145deg, #241838, #110d25); border: 1px solid rgba(149, 115, 203, 0.42); color: #d9cceb; font-size: 0.74rem; font-weight: 500;
  transition: transform 0.25s ease, border-color 0.25s ease; }
.mk-zu:hover { transform: translateY(-3px); border-color: rgba(232, 200, 134, 0.7); }
.mk-zu-bild { width: 42px; height: 42px; object-fit: contain; filter: saturate(0.85) brightness(0.92); }
.mk-zu i { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(10, 7, 26, 0.8); }
.mk-zu i svg { width: 10px; height: 10px; fill: none; stroke: var(--mk-gold); stroke-width: 2.2; }
.mk-zu i svg rect { fill: var(--mk-gold); stroke: none; }
.mk-vorschau { margin-top: 26px; padding: 28px 32px; }
.mk-vorschau-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.mk-wahl select { appearance: none; -webkit-appearance: none; min-height: 46px; padding: 0 46px 0 18px; border-radius: 14px; border: 1px solid var(--mk-rand-2);
  background: rgba(20, 14, 44, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e8c886' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center / 12px 8px;
  color: var(--mk-text); font: 500 15px/1 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; }
.mk-tage { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.mk-tage li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 74px; border-radius: 14px; border: 1px solid rgba(170, 148, 195, 0.18);
  background: rgba(255, 255, 255, 0.025); font-size: 0.74rem; color: var(--mk-text-3); transition: transform 0.3s ease, background-color 0.3s ease; }
.mk-tage li b { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.2rem; line-height: 1; color: var(--mk-text); }
.mk-tage li.ist-heute { outline: 1px solid var(--mk-gold); outline-offset: 2px; }
.mk-tage li.mk-t-gut { background: linear-gradient(145deg, #42735e, #214a40); border-color: rgba(145, 198, 160, 0.5); color: #cfeedb; }
.mk-tage li.mk-t-sehr { background: linear-gradient(145deg, #4f9a6d, #2a6248); border-color: rgba(170, 230, 190, 0.6); color: #e2f8ea; }
.mk-tage li.mk-t-schlecht { background: linear-gradient(145deg, #683746, #3e2536); border-color: rgba(216, 140, 145, 0.5); color: #ffd0cd; }
.mk-tage li.mk-t-wechsel { background: repeating-linear-gradient(135deg, rgba(66, 115, 94, 0.9) 0 7px, rgba(60, 46, 82, 0.9) 7px 14px); border-color: rgba(170, 148, 195, 0.35); color: var(--mk-text); }
.mk-tage li.mk-t-laedt { animation: mk-atmen 1.6s ease-in-out infinite; }
@keyframes mk-atmen { 50% { opacity: 0.45; } }
.mk-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 18px 0 0; font-size: 0.84rem; color: var(--mk-text-3); }
.mk-l { display: inline-block; width: 12px; height: 12px; margin-right: -10px; border-radius: 4px; vertical-align: -1px; }
.mk-l-gut { background: #42735e; } .mk-l-sehr { background: #4f9a6d; } .mk-l-schlecht { background: #683746; }
.mk-l-neutral { background: rgba(255, 255, 255, 0.12); } .mk-l-wechsel { background: repeating-linear-gradient(135deg, #42735e 0 3px, #3c2e52 3px 6px); }
.mk-legende .mk-l { margin-right: 6px; }

/* ---------- Sieben Bereiche ---------- */
.mk-bereich-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mk-bereich { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: 24px; background: linear-gradient(150deg, #241838, #100d24);
  border: 1px solid rgba(149, 115, 203, 0.42); box-shadow: inset 0 1px 0 rgba(207, 178, 247, 0.13), var(--mk-schatten); transition: transform 0.35s ease, border-color 0.35s ease; text-decoration: none; color: inherit; }
.mk-bereich:hover { transform: translateY(-6px); border-color: rgba(232, 200, 134, 0.62); }
.mk-bereich-bild { position: relative; width: 112px; height: 112px; margin: 0 0 12px; }
.mk-bereich-bild::before { content: ''; position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 200, 134, 0.2), transparent 66%); opacity: 0; transition: opacity 0.35s ease; }
.mk-bereich:hover .mk-bereich-bild::before { opacity: 1; }
.mk-bereich-motiv { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); transition: transform 0.45s cubic-bezier(.2, .8, .2, 1); }
.mk-bereich:hover .mk-bereich-motiv { transform: scale(1.07) rotate(-2deg); }
.mk-bereich h3 { margin: 0 0 8px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; color: var(--mk-gold-hell); }
.mk-bereich h3 small { display: block; margin-top: 3px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-3); }
.mk-bereich > p { margin: 0 0 16px; font-size: 0.93rem; line-height: 1.6; color: var(--mk-text-2); }
.mk-bereich ul { margin: auto 0 0; padding: 14px 0 0; list-style: none; display: grid; gap: 8px; border-top: 1px solid rgba(190, 165, 255, 0.14); }
.mk-bereich li { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--mk-text); }
.mk-bsp-bild { width: 34px; height: 34px; flex: none; object-fit: contain; }
.mk-bereich-mehr { justify-content: center; align-items: flex-start; background: linear-gradient(150deg, rgba(118, 83, 56, 0.42), rgba(53, 33, 64, 0.9)); border-color: rgba(236, 209, 160, 0.5); }
.mk-mehr-stern svg { width: 40px; height: 40px; fill: var(--mk-gold); filter: drop-shadow(0 0 14px rgba(232, 200, 134, 0.55)); }
.mk-bereich-mehr h3 { margin-top: 14px; }
.mk-mehr-los { margin-top: 6px; font-weight: 700; color: var(--mk-gold); }
.mk-band { position: relative; z-index: 2; margin-top: 90px; display: grid; gap: 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mk-band-reihe { display: flex; gap: 34px; width: max-content; will-change: transform; }
.mk-band-links { animation: mk-band 70s linear infinite; }
.mk-band-rechts { animation: mk-band 82s linear infinite reverse; }
.mk-band-bild { width: 96px; height: 96px; flex: none; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)); opacity: 0.92; }
@keyframes mk-band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- So funktioniert es ---------- */
.mk-schritte { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; counter-reset: mk; }
.mk-schritt { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; border-radius: 24px; background: var(--mk-karte); border: 1px solid var(--mk-rand); box-shadow: var(--mk-schatten); }
.mk-nr { width: 44px; height: 44px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: 'Fraunces', serif; font-size: 1.25rem; font-weight: 500; color: #1b1404; background: var(--mk-knopf-gold); box-shadow: 0 8px 22px rgba(226, 190, 110, 0.32); }
.mk-schritt h3 { margin: 0 0 10px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.32rem; color: var(--mk-text); }
.mk-schritt > p { margin: 0 0 22px; font-size: 0.95rem; line-height: 1.65; color: var(--mk-text-2); }
.mk-schritt-bild { margin-top: auto; min-height: 176px; padding: 16px; border-radius: 18px; background: rgba(8, 6, 22, 0.55); border: 1px solid rgba(190, 165, 255, 0.12); }
.mk-mini-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.mk-mini { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 4px; border-radius: 14px; text-align: center;
  background: linear-gradient(145deg, #241838, #110d25); border: 1px solid rgba(149, 115, 203, 0.42); }
.mk-mini img { width: 58px; height: 58px; object-fit: contain; }
.mk-mini b { font-size: 0.74rem; font-weight: 600; line-height: 1.25; color: #d9cceb; }
.mk-mini-an { border-color: #ecd1a0; background: linear-gradient(140deg, rgba(118, 83, 56, 0.45), #352140); box-shadow: 0 0 16px rgba(209, 165, 106, 0.22); transform: translateY(-4px); }
.mk-mini i { position: absolute; top: 6px; left: 6px; }
.mk-mini i svg { width: 13px; height: 13px; fill: var(--mk-gold); }
.mk-mini-tag-kopf { display: flex; align-items: center; gap: 12px; }
.mk-mini-tag-bild { width: 52px; height: 52px; object-fit: contain; }
.mk-mini-tag-kopf b { display: block; font-size: 1rem; color: var(--mk-text); }
.mk-mini-tag-kopf small { display: block; font-size: 0.82rem; color: var(--mk-text-3); }
.mk-mini-urteil { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-weight: 700; font-size: 0.92rem; color: var(--mk-gut); }
.mk-mini-urteil .mk-l { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-gut); box-shadow: 0 0 10px rgba(143, 220, 156, 0.7); margin: 0; }
.mk-mini-grund { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--mk-text-2); }
.mk-mini-monat { padding: 14px 14px 12px; }
.mk-mm-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 0.82rem; color: var(--mk-text-3); }
.mk-mm-kopf b { font-family: 'Fraunces', serif; font-weight: 500; font-size: 0.98rem; color: var(--mk-gold-hell); }
.mk-mm-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.mk-mm-raster span { display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 6px; font-size: 0.68rem; color: var(--mk-text-3); background: rgba(255, 255, 255, 0.03); }
.mk-mm-raster span.mk-mm-wt { background: none; height: 16px; font-size: 0.62rem; letter-spacing: 0.05em; }
.mk-mm-raster span.mk-t-gut { background: #42735e; color: #dff5e6; }
.mk-mm-raster span.mk-t-wechsel { background: repeating-linear-gradient(135deg, #42735e 0 4px, #3c2e52 4px 8px); color: #fff; }
.mk-mm-raster span.ist-heute { outline: 1px solid var(--mk-gold); }

/* ---------- Tagesqualitaeten ---------- */
.mk-tagart-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.mk-tagart { position: relative; padding: 28px 24px 26px; border-radius: 24px; background: var(--mk-karte); border: 1px solid var(--mk-rand); text-align: center; box-shadow: var(--mk-schatten);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.mk-tagart-bilder { position: relative; width: 120px; height: 104px; margin: 0 auto 14px; }
.mk-tagart-teil { position: absolute; left: 6px; top: 0; width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); }
.mk-tagart-element { position: absolute; right: -2px; bottom: 0; width: 50px; height: 50px; object-fit: contain; padding: 6px; border-radius: 50%; background: rgba(12, 9, 30, 0.9); border: 1px solid var(--mk-rand-2); }
.mk-tagart h3 { margin: 0 0 4px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.36rem; color: var(--mk-gold-hell); }
.mk-tagart-el { margin: 0 0 12px !important; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--mk-text-3) !important; }
.mk-tagart p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--mk-text-2); }
.mk-tagart-heute { position: absolute; top: 14px; right: 14px; padding: 5px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: #1b1404; background: var(--mk-knopf-gold); opacity: 0; transform: translateY(-4px); transition: opacity 0.4s ease, transform 0.4s ease; }
.mk-tagart.ist-heute { border-color: rgba(232, 200, 134, 0.75); box-shadow: 0 0 0 1px rgba(232, 200, 134, 0.25), 0 24px 60px rgba(120, 90, 30, 0.25); transform: translateY(-6px); }
.mk-tagart.ist-heute .mk-tagart-heute { opacity: 1; transform: none; }

/* ---------- Pflanzen ---------- */
.mk-lexikon { padding-top: 40px; }
.mk-pflanzen-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.mk-pflanze { position: relative; padding: 18px 12px 16px; border-radius: 20px; text-align: center;
  background: radial-gradient(ellipse at 50% 28%, rgba(64, 36, 86, 0.6), transparent 67%), linear-gradient(145deg, #151129, #0c0b20);
  border: 1px solid rgba(185, 155, 201, 0.5); box-shadow: inset 0 1px 0 rgba(231, 197, 145, 0.19), 0 8px 20px rgba(4, 2, 17, 0.4); transition: transform 0.35s ease, border-color 0.35s ease; }
.mk-pflanze:hover { transform: translateY(-5px); border-color: rgba(239, 216, 165, 0.75); }
.mk-pflanze-bild { width: 92px; height: 92px; object-fit: contain; margin: 4px auto 8px; display: block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45)); }
.mk-pflanze h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: #efd9a9; }
.mk-pflanze p { margin: 3px 0 0; font-size: 0.74rem; font-style: italic; color: #cfc1eb; }
.mk-pflanze-teil { position: absolute; top: 9px; right: 9px; padding: 3px 8px; border-radius: 999px; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.mk-teil-wurzel { background: rgba(207, 169, 113, 0.18); color: #e5c592; }
.mk-teil-blatt { background: rgba(127, 196, 230, 0.16); color: #a8daf2; }
.mk-teil-bluete { background: rgba(188, 198, 230, 0.16); color: #d4dbf3; }
.mk-teil-frucht { background: rgba(232, 154, 106, 0.18); color: #f2b48e; }

/* ---------- Mondkalender nach Monaten (Abschnitt aus dem Mondkalender-Plugin, monatsseiten.php; 17.10.2026) ---------- */
.mk-monate { padding-top: 0; }
.mk-monate .mk-kopfzeile { margin-bottom: 30px; }
.mk-monate-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mk-monat-link { display: block; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--mk-rand); background: var(--mk-karte); color: var(--mk-text);
  text-decoration: none; font-family: 'Fraunces', serif; font-size: 1.12rem; line-height: 1.2; transition: border-color 0.25s ease, transform 0.25s ease; }
.mk-monat-link span { display: block; margin-top: 3px; font-family: 'Hanken Grotesk', system-ui, sans-serif; font-size: 0.86rem; color: var(--mk-text-3); }
.mk-monat-link:hover { border-color: var(--mk-rand-2); color: var(--mk-gold-hell); transform: translateY(-2px); }
.mk-monat-jahr { border-color: rgba(232, 200, 134, 0.34); }
@media (min-width: 761px) { .mk-monate-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-pflanzen-mehr { margin: 36px 0 0; text-align: center; }

/* ---------- Preise ---------- */
.mk-preis-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; align-items: start; }
.mk-enthalten { display: grid; gap: 20px; }
.mk-inklusive { padding: 28px 30px; }
.mk-inklusive h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; color: var(--mk-gold-hell); }
.mk-inklusive-zeichen { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; color: var(--mk-gold);
  border: 1px solid rgba(232, 200, 134, 0.5); background: radial-gradient(circle, rgba(232, 200, 134, 0.16), transparent 70%); }
.mk-haken { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mk-haken li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.98rem; line-height: 1.45; color: var(--mk-text); }
.mk-haken svg { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--mk-gut); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mk-inklusive-moment { background: linear-gradient(158deg, rgba(70, 48, 120, 0.82), rgba(20, 14, 44, 0.92)); }
.mk-kauf { padding: 32px 30px 26px; background: linear-gradient(160deg, rgba(64, 46, 118, 0.94), rgba(18, 13, 40, 0.96)); border-color: rgba(232, 200, 134, 0.42);
  box-shadow: 0 0 0 1px rgba(232, 200, 134, 0.08), 0 30px 80px rgba(60, 40, 140, 0.35); }
.mk-kauf-titel { margin: 0 0 16px; font-family: 'Fraunces', serif !important; font-size: 1.3rem; color: var(--mk-text); }
.mk-tarife { display: grid; gap: 12px; }
.mk-tarif { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'name preis' 'sub preis'; align-items: center; gap: 2px 14px; width: 100%;
  padding: 18px 20px; border-radius: 18px; text-align: left; cursor: pointer; color: var(--mk-text);
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(200, 195, 220, 0.2); font-family: 'Hanken Grotesk', system-ui, sans-serif; transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; }
.mk-tarif:hover { border-color: rgba(232, 200, 134, 0.45); }
.mk-tarif.ist-gewaehlt { border-color: var(--mk-gold); background: linear-gradient(160deg, rgba(232, 200, 134, 0.16), rgba(232, 200, 134, 0.04)); box-shadow: 0 6px 28px -10px rgba(232, 200, 134, 0.55); }
.mk-tarif.ist-gewaehlt::after { content: ''; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: var(--mk-knopf-gold) ; box-shadow: 0 0 0 3px rgba(18, 13, 40, 0.95); }
.mk-tarif-band { position: absolute; top: -11px; right: 18px; padding: 4px 11px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; color: #1b1404; background: var(--mk-knopf-gold); }
.mk-tarif-name { grid-area: name; font-size: 1.08rem; font-weight: 700; }
.mk-tarif-sub { grid-area: sub; font-size: 0.86rem; color: var(--mk-text-3); }
.mk-tarif-preis { grid-area: preis; font-size: 0.92rem; color: var(--mk-text-2); text-align: right; }
.mk-tarif-preis b { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.55rem; color: var(--mk-gold-hell); }
.mk-kauf-felder:not(:empty) { margin-top: 18px; }
.mk-kauf-los { width: 100%; margin-top: 18px; }
.mk-kauf-fuss { margin: 14px 0 0; font-size: 0.84rem; line-height: 1.55; text-align: center; color: var(--mk-text-3); }
.mk-kauf-konto { margin: 10px 0 0; font-size: 0.88rem; text-align: center; color: var(--mk-text-2); }
.mk-kauf-konto a { color: var(--mk-gold); }
.mk-kauf .aram-shop-birth-fields .astro-input { background: rgba(10, 7, 26, 0.7); border-color: var(--mk-rand-2); color: var(--mk-text); }
.mk-vorlage-hinweis { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(232, 200, 134, 0.1); border: 1px dashed rgba(232, 200, 134, 0.5); font-size: 0.84rem; color: var(--mk-gold-hell); }

/* ---------- Fragen und Text ---------- */
.mk-fragen-liste { display: grid; gap: 12px; }
.mk-frage { border-radius: 18px; background: var(--mk-karte); border: 1px solid var(--mk-rand); overflow: hidden; }
.mk-frage summary { position: relative; display: block; padding: 20px 60px 20px 24px; cursor: pointer; list-style: none; font-size: 1.04rem; font-weight: 600; color: var(--mk-text); }
.mk-frage summary::-webkit-details-marker { display: none; }
.mk-frage-zeichen { position: absolute; right: 22px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 1px solid rgba(232, 200, 134, 0.55); }
.mk-frage-zeichen::before, .mk-frage-zeichen::after { content: ''; position: absolute; left: 5px; right: 5px; top: 10px; height: 1.6px; background: var(--mk-gold); transition: transform 0.3s ease; }
.mk-frage-zeichen::after { transform: rotate(90deg); }
.mk-frage[open] .mk-frage-zeichen::after { transform: rotate(0); }
.mk-frage p { margin: 0; padding: 0 24px 22px; font-size: 0.98rem; line-height: 1.7; color: var(--mk-text-2); }
.mk-seo { margin-top: 70px; padding: 34px 36px; border-radius: 24px; background: rgba(12, 9, 30, 0.6); border: 1px solid rgba(190, 165, 255, 0.12); }
.mk-seo h2 { margin: 0 0 16px; font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.4rem; line-height: 1.3; color: var(--mk-gold-hell); }
.mk-seo p { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.75; color: var(--mk-text-2); }
.mk-seo p:last-child { margin-bottom: 0; }

/* ---------- Schluss ---------- */
.mk-schluss { padding-bottom: 140px; }
.mk-schluss-karte { position: relative; overflow: hidden; padding: 76px 40px; border-radius: 32px; text-align: center;
  background: radial-gradient(50% 90% at 50% 0%, rgba(150, 120, 250, 0.42), transparent 75%), linear-gradient(180deg, #24185a, #0e0a2a);
  border: 1px solid rgba(232, 200, 134, 0.3); box-shadow: 0 40px 100px rgba(40, 20, 120, 0.4); }
.mk-schluss-karte::before { content: ''; position: absolute; left: 50%; bottom: -540px; width: 900px; height: 600px; margin-left: -450px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 150, 255, 0.0) 88%, rgba(140, 170, 255, 0.55) 96%, rgba(140, 170, 255, 0) 100%); opacity: 0.6; }
.mk-schluss-karte .mk-sub { margin-bottom: 30px; }

/* ---------- Ansicht mit Abo ---------- */
.mk-hero-abo { min-height: 0; padding: 92px 0 54px; align-items: flex-end; }
.mk-hero-abo .mk-h1-zeile { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.mk-abo-fakten { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.mk-abo-fakten li { display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 999px; background: rgba(20, 14, 46, 0.72); border: 1px solid var(--mk-rand-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mk-abo-fakten small { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mk-text-3); }
.mk-abo-fakten b { display: block; font-size: 0.98rem; color: var(--mk-text); }
.mk-abo-fakt-zeichen { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 18px; color: var(--mk-gold);
  background: radial-gradient(circle, rgba(232, 200, 134, 0.18), transparent 70%); }
.mk-abo-fakt-bild { width: 34px; height: 34px; object-fit: contain; }
.mk-werkzeug { position: relative; z-index: 2; padding: 10px 0 120px; }
.mk-wrap-werkzeug { max-width: 1080px; }

/* ---------- Ansicht mit Abo: der Kalender der App, auf grossen Bildschirmen breiter gesetzt ----------
   Die Regeln der App (mk-app.css) bleiben; hier nur mehr Spalten und Platz. Wo die App ihre Groessen in der Ebene
   astromantie-activity-layout mit !important setzt, steht die Ergaenzung in derselben Ebene (sonst gewaenne die Ebene). */
body.mk-seite #mk #astromantie-garten-root { font-family: 'Hanken Grotesk', system-ui, sans-serif; }
@media (min-width: 960px) {
  body.mk-seite #mk #astromantie-garten-root .astro-garten-hero { max-width: 760px; margin: 0 auto 10px !important; text-align: center; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-hero-intro { max-width: 760px !important; margin: 0 auto !important; font-size: 1.12rem !important; line-height: 1.7 !important; color: var(--mk-text-2) !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-mk-summary-lead { text-align: center; margin: 26px auto 14px !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-mk-overview.astro-mk-summary-ready { max-width: 720px; margin: 0 auto 26px !important; gap: 14px !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-mk-summary-detail { max-width: 720px; margin-left: auto !important; margin-right: auto !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-chipbar-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-chip { min-height: 172px !important; border-radius: 20px !important; gap: 12px !important; transition: transform 0.3s ease, border-color 0.3s ease !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-chip:hover { transform: translateY(-4px) !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-chip-icon { width: 112px !important; height: 112px !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-chip-label { font-size: 15px !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed > .astro-mk-top-search { max-width: 640px !important; }
  /* Heute-Karte: links Mond, Zeichen und Tagesqualitaet, rechts die Listen */
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute > .astro-garten-heute-card { display: grid !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); column-gap: 30px; align-items: start; padding: 28px 30px !important; border-radius: 22px !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute > .astro-garten-heute-card > * { grid-column: 1; min-width: 0; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute > .astro-garten-heute-card > .astro-garten-heute-listen { grid-column: 2; grid-row: 1 / span 12; grid-template-columns: minmax(0, 1fr) !important; margin-top: 0 !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute > .astro-garten-heute-card > .astro-garten-heute-listen ul { columns: 2; column-gap: 26px; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute > .astro-garten-heute-card > .astro-garten-heute-listen li { break-inside: avoid; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-heute-no ul { columns: 1; }
  /* Pflanzen-Lexikon und Vorschau */
  body.mk-seite #mk #astromantie-garten-root .cdui-fruit .astro-garten-pflanzen-grid,
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-garten-pflanzen-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
  body.mk-seite #mk #astromantie-garten-root .cdui-fruit .astro-garten-pflanze-card { padding: 16px 12px 18px !important; }
  body.mk-seite #mk #astromantie-garten-root .cdui-fruit .astro-garten-pflanze-card:hover { transform: translateY(-4px); border-color: rgba(239, 216, 165, 0.75) !important; }
  body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-garten-pflanze-glyph { width: 104px !important; height: 104px !important; min-width: 104px !important; min-height: 104px !important; max-width: 104px !important; max-height: 104px !important; flex-basis: 104px !important; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-filter-row { justify-content: center; }
  body.mk-seite #mk #astromantie-garten-root .astro-garten-vorschau-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
  body.mk-seite #mk #astromantie-garten-root .asm-chooser { max-width: 760px; margin-left: auto; margin-right: auto; }
}
@layer astromantie-activity-layout {
  @media (min-width: 960px) {
    body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-actgrid,
    body.mk-seite #mk #astromantie-garten-root.moon-designed .astro-mk-fav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 16px !important; }
    body.mk-seite #mk #astromantie-garten-root.moon-designed button.astro-mk-actcard { min-height: 196px !important; }
  }
}

/* ---------- Mondbahn (Fassung Bahn): goldene Himmelsuhr mit Tierkreis und Mondbahn, der Mond in der Mitte ---------- */
.mk-uhr-platz { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mk-uhr { position: absolute; left: 0; top: 0; opacity: 0; transform: scale(0.94); transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.2, .8, .2, 1); }
.mk-uhr.ist-da { opacity: 1; transform: none; }
.mk-uhr > svg, .mk-uhr-glanz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.mk-uhr-glanz { border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 292deg, rgba(255, 238, 200, 0.55) 338deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(circle closest-side, transparent 0 58.8%, #000 59.6% 60.6%, transparent 61.4% 85.6%, #000 86.2% 98%, transparent 98.8%);
  mask-image: radial-gradient(circle closest-side, transparent 0 58.8%, #000 59.6% 60.6%, transparent 61.4% 85.6%, #000 86.2% 98%, transparent 98.8%);
  animation: mk-dreh 16s linear infinite; mix-blend-mode: screen; }
@keyframes mk-dreh { to { transform: rotate(360deg); } }
.mk-uhr-zeichen path { transition: opacity 0.6s ease; }
.mk-uhr-zeichen .ist-jetzt { filter: drop-shadow(0 0 8px rgba(255, 226, 160, 0.95)); }
.mk-uhr-phase { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(232, 200, 134, 0.35), 0 0 18px rgba(160, 130, 240, 0.25); background: #0b0920; }
.mk-uhr-phase canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.mk-uhr-marke { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0 28%, rgba(255, 226, 160, 0.9) 34%, rgba(255, 226, 160, 0) 72%); box-shadow: 0 0 22px rgba(255, 226, 160, 0.85); will-change: transform; }
.mk-uhr-titel { font: 600 11px/1 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; fill: rgba(246, 227, 180, 0.82); }
.mk-hg-bahn .mk-hero-text::before { opacity: 0.85; }
@media (max-width: 760px) {
  .mk-hg-bahn .mk-hero { padding-top: calc(var(--mk-uhr, 360px) + 30px); }
  .mk-uhr-titel { font-size: 15px; }
}
@media (hover: none) and (pointer: coarse) { .mk-uhr-glanz { animation-duration: 24s; } }
@media (prefers-reduced-motion: reduce) { .mk-uhr-glanz { animation: none; display: none; } .mk-uhr { transition: none; } }

/* Sanftes Einblenden beim Scrollen (nur mit Skript, nur was beim Laden noch unter dem Bildrand liegt) */
.mk-js .mk-zeigen { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.mk-js .mk-zeigen.mk-da { opacity: 1; transform: none; }

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 1080px) {
  .mk-bereich-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-pflanzen-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mk-tagart-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-schritte { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .mk-preis-raster { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
  .mk-heute-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .mk-wrap { padding: 0 18px; }
  .mk-abschnitt { padding: 78px 0; }
  .mk-kopfzeile { margin-bottom: 36px; }
  .mk-hero { align-items: flex-start; padding: calc(40vh - 64px + 34px) 0 70px; padding: calc(40svh - 64px + 34px) 0 70px; text-align: center; }
  .mk-hero-text::before { top: -6%; height: 112%; background: radial-gradient(closest-side, rgba(6, 4, 22, 0.78), rgba(6, 4, 22, 0.35) 70%, rgba(6, 4, 22, 0) 100%); }
  .mk-hero-text { max-width: none; margin: 0 auto; }
  .mk-h1 .mk-kicker { justify-content: center; }
  .mk-lead { margin-left: auto; margin-right: auto; font-size: 1.02rem; }
  .mk-knoepfe { justify-content: center; }
  .mk-knopf { width: 100%; max-width: 360px; }
  .mk-zahlen { justify-content: center; margin-top: 34px; }
  .mk-zahlen li { padding: 0 16px; }
  .mk-zahlen b { font-size: 1.6rem; }
  .mk-heute-pille { font-size: 0.78rem; margin-bottom: 22px; padding: 8px 14px 8px 12px; text-align: left; }
  .mk-hero-text::before { left: -10%; width: 120%; }
  .mk-mondkarte, .mk-gartenkarte, .mk-vorschau { padding: 24px 18px; }
  .mk-liste { grid-template-columns: 1fr; }
  .mk-zu-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-tage { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mk-tage li { min-height: 60px; }
  .mk-bereich-raster { grid-template-columns: 1fr; }
  .mk-bereich { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 16px; padding: 20px 18px; }
  .mk-bereich-bild { width: 80px; height: 80px; margin: 0; }
  .mk-bereich h3 { flex: 1; margin: 0; }
  .mk-bereich > p { flex-basis: 100%; margin: 12px 0 12px; }
  .mk-bereich ul { flex-basis: 100%; }
  .mk-bereich-mehr { flex-direction: column; align-items: flex-start; }
  .mk-band-bild { width: 72px; height: 72px; }
  .mk-pflanzen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-tagart-raster { grid-template-columns: 1fr; }
  .mk-seo { padding: 24px 20px; }
  .mk-schluss-karte { padding: 56px 22px; }
  .mk-hero-abo { padding: 128px 0 36px; text-align: left; }
  .mk-abo-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-abo-fakten li { border-radius: 18px; }
  .mk-abo-fakten li:last-child { grid-column: 1 / -1; }
  .mk-hero-abo .mk-h1 .mk-kicker { justify-content: flex-start; }
  .mk-abo-fakten li { padding: 8px 14px 8px 10px; }
  .mk-tarif { padding: 16px; }
}

/* Handy-Sparmodus: kein Weichzeichner hinter Glas, Laufband und Glanz ruhen */
@media (hover: none) and (pointer: coarse) {
  .mk-knopf-glas, .mk-heute-pille, .mk-abo-fakten li { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(20, 14, 46, 0.9); }
  .mk-knopf-gold::after { animation: none; display: none; }
  .mk-band-links, .mk-band-rechts { animation-duration: 120s; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-band-reihe, .mk-knopf-gold::after, .mk-punkt, .mk-tage li.mk-t-laedt { animation: none !important; }
  .mk-bereich, .mk-bereich-motiv, .mk-pflanze, .mk-zu { transition: none; }
}