:root { /* Verhindert die automatische Zwangs-Abdunklung durch Browser und Hersteller-Oberflaechen (Chrome "Auto Dark Theme", MIUI). Die greift nur bei Seiten, die kein eigenes Farbschema deklarieren — unsere Seite bringt ihren Dark Mode selbst mit und wuerde sonst doppelt gedimmt, inklusive Bildern. "only light" sagt dem Browser ausdruecklich: nicht nachtraeglich einfaerben. Gilt fuer alle hellen Themes (classic, blue, brown, gold, green, mauve, purple, rose, slate). */ color-scheme: only light; } /* Das einzige dunkle Theme meldet sich sauber als dunkel an — dadurch passen auch Scrollbalken und Formularelemente zum Seitenhintergrund. */ [data-theme^="dark"] { color-scheme: dark; /* Auf dem dunklen Untergrund brauchen die Statusfarben mehr Helligkeit, sonst verschwimmen sie mit dem Hintergrund. */ --badge-available: #6E9169; --badge-reserved: #9B767C; --badge-home: #B98254; --badge-young: #8A9B6C; --badge-guest: #7E8DA0; } /* ═══════════════════════════════════════════════ BABAJEWO – Gemeinsame Styles ═══════════════════════════════════════════════ */ /* ── RESET & ROOT ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── ARTIKEL-BILDER (Ratgeber, Tipps, Rassestandard) ── */ /* Platzhalter sind per hidden-Attribut unsichtbar und werden clientseitig aus settings.articleImages befüllt. Kein Bild im Admin = kein Loch im Layout. */ .article-figure { margin: 1.75rem auto; max-width: 640px; } .article-figure img { width: 100%; max-height: 420px; object-fit: cover; display: block; border-radius: 4px; } .article-figure figcaption { font-size: 0.78rem; color: var(--text-muted, #888); margin-top: 0.45rem; font-style: italic; text-align: center; } /* Kopfbild: dasselbe Foto, das die Ratgeber-Kachel zeigt, steht jetzt oben im Artikel statt mitten im Text. Breiter und flacher als die Inline-Figur, damit es den Text ankündigt statt ihn zu unterbrechen. */ .article-hero-img { margin: 0 auto 2.5rem; max-width: 100%; } .article-hero-img img { max-height: 340px; border-radius: 6px; } @media (max-width: 640px) { .article-hero-img { margin-bottom: 1.75rem; } .article-hero-img img { max-height: 220px; } } /* Vorschaubild oben in Ratgeber-Karten (Übersicht + Weiterlesen-Boxen) */ .rc-thumb { margin: -0.25rem 0 0.9rem; } .rc-thumb img { width: 100%; height: 150px; object-fit: cover; display: block; border-radius: 4px; } /* ── GLOBALER BILD-RAHMEN ── */ /* Dünner Rahmen in der Rose-Gold-Akzentfarbe um alle Fotos site-weit — passt sich automatisch jedem Farbthema an, da --rose-gold als CSS-Variable pro Theme neu definiert ist. Ausnahmen (Logos, Icons, UI-Elemente) über die Klasse .no-frame. */ img:not(.no-frame) { border: 2px solid var(--rose-gold); } html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* A-1384: wer am Geraet „Bewegung reduzieren" eingestellt hat, springt ueberall direkt, auch innerhalb einer Seite. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } :root { --amber: #7A7670; --amber-dark: #4A4845; --amber-light: #A8A4A0; /* A-1164: die Schriftfarbe auf dem Akzent, nach Mehrheit der 29 Themen gesetzt (mess-akzentschrift.mjs). Die Ausnahmen stehen bei den Themen. */ --auf-amber: #1a1a1a; --auf-amber-dark: #ffffff; --rose: #9B8F85; --rose-gold: #9B8F85; --cream: #F5F3F1; --cream-dark: #ECEAE8; --warm-white: #FAFAFA; --card-bg: #FFFFFF; --card-bg-alt: #F5F3F1; --card-border: #DDDBD9; --text: #1E1E1E; --text-soft: #5A5755; --text-muted: #8A8785; --border: #DDDBD9; --shadow: rgba(74,72,69,0.12); /* A-300: Diese beiden standen bisher NUR in den Vorlagen und im dunklen Thema. Sobald die Vorlagen ihre Theme-Token abgeben, muessen sie hier stehen — sonst fallen sie ins Leere. Der Verlauf wird aus den Akzent-Token gebaut und folgt damit dem gewaehlten Farbthema, statt eine feste Neonspur zu sein. */ --shadow-deep: rgba(74,72,69,0.22); --s-verlauf: linear-gradient(120deg, var(--amber), var(--rose-gold) 55%, var(--amber-light)); /* Statusfarben. Vorher standen sechs Festwerte verstreut in index.html, vermittelt.html, style.css und _worker.js — grelles Orange, Flaschengruen, Weinrot. Die passten zu keinem der zehn Farbthemen und stachen aus dem warmen Grau heraus. Jetzt einmal definiert und im dunklen Theme aufgehellt. */ --badge-available: #5F7F5C; --badge-reserved: #86656A; --badge-home: #A0724A; --badge-young: #77875E; --badge-guest: #6C7A8B; --badge-neutral: var(--rose-gold); /* A-1381: „Showkatze", ein warmes Gold wie die Titelplakette. */ --badge-show: #A8893A; } html { overflow-x: clip; } /* ── LIGHTBOX (geteilt: Galerie + Detailseiten) ── */ .lightbox { display: none; position: fixed; inset: 0; background: rgba(26,26,24,0.96); z-index: 999; align-items: center; justify-content: center; padding: 2rem; } .lightbox.active { display: flex; } .lightbox img, .lightbox video { max-width: 90vw; max-height: 90vh; border-radius: 1px; object-fit: contain; } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; color: rgba(255,255,255,0.5); font-size: 1.8rem; cursor: pointer; transition: color 0.2s; } .lightbox-close:hover { color: white; } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: white; font-size: 2.5rem; width: 52px; height: 72px; cursor: pointer; border-radius: 2px; transition: background 0.2s; display: flex; align-items: center; justify-content: center; } .lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; } .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.25); } .lightbox-counter { position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.4); font-size: 0.8rem; } .detail-thumb-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .detail-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; cursor: pointer; opacity: 0.85; transition: opacity .15s; } .detail-thumb:hover, .detail-thumb.active { opacity: 1; } .detail-thumb-wrap { position: relative; display: inline-block; cursor: pointer; line-height: 0; } .detail-thumb-wrap .detail-thumb { display: block; } .detail-thumb-wrap::after { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.55); color: white; font-size: 0.7rem; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; padding-left: 2px; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,0.5); } body { font-family: 'Source Sans 3', sans-serif; background: var(--cream); color: var(--text); font-size: 16px; line-height: 1.8; overflow-x: clip; overflow-wrap: break-word; word-break: break-word; } /* ── NAV ── */ nav:not(.footer-links) { /* A-764: war rgba(250,247,242,0.97) — ein fester heller Wert, der auf jeder dunklen Farbwelt stehen blieb und den Zuchtname darin verschluckte (gemessen 1.83 bis 2.49). Jetzt die Wandfarbe. */ background: var(--wand); border-top: none; border-bottom: 1px solid var(--border); padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 68px; position: sticky; top: 0; z-index: 100; } /* Medaillon links neben dem Schriftzug. Bild und Logo sitzen zusammen in .nav-brand, weil