/* ============================================================ MMS — Design-System Elegant und festlich: weisse/neutrale Basis mit Gold als einzigem Akzent. Hell als Standard, dunkel (neutrales Anthrazit) über prefers-color-scheme. Alle Farben/Abstände laufen über CSS-Variablen — keine Zauberzahlen in Templates. ============================================================ */ :root { /* Spacing-Skala */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; /* Radien */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; /* Bedienelemente */ --control-h: 2.5rem; --control-h-sm: 2rem; --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif; /* Helles Farbschema (Standard): weiss/neutral mit Gold als einzigem Akzent */ --bg: #f7f6f3; --bg-soft: #efede8; --card: #ffffff; --fg: #22201c; --muted: #6d6a63; --line: #ebe9e3; --line-strong: #dbd8d0; --accent: #b8933f; --accent-hover: #9c7a2f; --accent-light: #ceac5b; --accent-soft: #f6efdc; /* Gold-Button traegt dunklen Text — Weiss auf Gold hat zu wenig Kontrast. */ --fg-on-fill: #241d06; --danger: #a23b30; --danger-hover: #872f26; --danger-soft: #f7e6e2; --focus: #b8933f; /* Gold-Akzent fuer Zier-Trenner, Ornamente, feine Glanzpunkte */ --gold: #b8933f; --gold-soft: #f6efdc; --gold-line: rgba(184, 147, 63, 0.35); --shadow-sm: 0 1px 3px rgba(40, 38, 30, 0.07); --shadow: 0 10px 28px rgba(40, 38, 30, 0.09); --shadow-accent: 0 6px 18px rgba(184, 147, 63, 0.24); /* Sehr dezenter Verlauf, praktisch weiss: fast weiss -> zartes Neutral */ --bg-grad: linear-gradient(180deg, #ffffff 0%, #faf9f6 55%, #f4f2ec 100%); } /* Dunkelmodus haengt am data-theme-Attribut, nicht mehr an der Media-Query. Ein Init-Skript im setzt data-theme beim Laden (gespeicherte Wahl, sonst Systemvorgabe), der Umschalt-Button aendert es zur Laufzeit. */ :root[data-theme="dark"] { /* Neutrales Anthrazit (kein Braunstich) mit Gold */ --bg: #17171a; --bg-soft: #1f1f23; --card: #212125; --fg: #f0efe9; --muted: #a5a29b; --line: #303036; --line-strong: #43434b; --accent: #d8bd74; --accent-hover: #e6cd8a; --accent-light: #e6cd8a; --accent-soft: #2a2718; --fg-on-fill: #1b1707; --danger: #e2867a; --danger-hover: #ec9a8f; --danger-soft: #3a221c; --focus: #d8bd74; --gold: #d8bd74; --gold-soft: #2a2718; --gold-line: rgba(216, 189, 116, 0.3); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32); --shadow: 0 14px 36px rgba(0, 0, 0, 0.44); --shadow-accent: 0 8px 22px rgba(216, 189, 116, 0.16); /* Neutrales Anthrazit, ganz leichter Schimmer nach oben */ --bg-grad: linear-gradient(180deg, #1c1c20 0%, #17171a 50%, #131315 100%); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ---------- Hell/Dunkel-Umschalter ---------- */ .theme-toggle { position: fixed; top: var(--s-3); right: var(--s-3); z-index: 100; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--card); color: var(--accent); font-size: 1.15rem; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); background: var(--accent-soft); } /* ---------- Reset & Grundlagen ---------- */ * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--bg-grad) fixed; color: var(--fg); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; } img { max-width: 100%; } .wrap { max-width: 960px; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-7); } .wrap--narrow { max-width: 460px; } /* ---------- Typografie ---------- */ h1, h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -0.01em; color: var(--fg); } h1 { font-size: 1.9rem; margin: 0 0 var(--s-1); } h2 { font-size: 1.25rem; margin: 0 0 var(--s-3); } p { margin: 0 0 var(--s-3); } p:last-child { margin-bottom: 0; } .sub { color: var(--muted); margin: 0 0 var(--s-5); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } .back-link { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--muted); text-decoration: none; font-size: 0.9rem; margin-bottom: var(--s-3); } .back-link:hover { color: var(--accent); } .card-link { display: block; color: inherit; text-decoration: none; } .card-link:hover h2 { color: var(--accent); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } /* ---------- Festlicher Hero (Gast-Seiten: Galerie, Upload) ---------- Volle Breite, sanfter Radialverlauf im Hintergrund, grosse Serif- Ueberschrift, darunter ein kleiner Zier-Trenner statt einer nackten Linie. Bewusst dezent gehalten -- kein Konfetti, kein Bild. */ .hero { position: relative; padding: var(--s-7) var(--s-4) var(--s-5); text-align: center; overflow: hidden; background: radial-gradient(ellipse 80% 100% at 50% -10%, var(--accent-soft) 0%, transparent 65%); } .hero::before { /* Sehr feines Punktraster als Textur -- kaum sichtbar, bricht nur die Flaeche etwas auf. */ content: ""; position: absolute; inset: 0; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 24px 24px; color: var(--gold); opacity: 0.05; pointer-events: none; } .hero__eyebrow { position: relative; margin: 0 0 var(--s-2); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } .hero__title { position: relative; margin: 0 auto; max-width: 32rem; font-size: 2.1rem; line-height: 1.2; } .hero__sub { position: relative; max-width: 34rem; margin: var(--s-2) auto 0; color: var(--fg); } /* Zier-Trenner: kleine Raute/Ornament zwischen zwei feinen Linien. Wiederverwendbar zwischen Abschnitten (Hero -> Inhalt, Galerie -> Gaestebuch). */ .divider { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-5) 0; color: var(--gold); line-height: 1; } .divider::before, .divider::after { content: ""; flex: 1 1 auto; max-width: 5rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-line)); } .divider::after { background: linear-gradient(90deg, var(--gold-line), transparent); } .divider__mark { font-size: 1.05rem; } .hero .divider { margin: var(--s-4) 0 0; } /* Abschnittstitel mit kleinem Ornament davor statt nackter

-- fuer Gast-Seiten, wo ein Abschnittswechsel (z.B. zum Gaestebuch) etwas Feierliches verdient. */ .section-title { display: flex; align-items: center; gap: var(--s-2); } .section-title::before { content: "\2766"; color: var(--gold); font-size: 1rem; } /* ---------- Seitenkopf (Admin-Topbar) ---------- */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--s-4); margin-bottom: var(--s-5); /* Platz oben rechts fuer den fixierten Hell/Dunkel-Umschalter freihalten, damit er den Abmelden-Button nicht ueberdeckt. */ padding-right: calc(2.5rem + var(--s-2)); } .page-header .sub { margin-bottom: 0; } .page-header form { margin: 0; } /* ---------- Buttons ---------- */ .btn, button { font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1; height: var(--control-h); padding: 0 var(--s-4); border-radius: var(--radius); border: 1px solid var(--accent); background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%); color: var(--fg-on-fill); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease, transform .15s ease; } .btn:hover, button:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%); border-color: var(--accent-hover); box-shadow: var(--shadow-accent); } .btn:active, button:active { transform: translateY(1px); } .btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; } .btn.ghost, button.ghost { background: transparent; color: var(--accent); border-color: var(--line-strong); } .btn.ghost:hover, button.ghost:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: none; } .btn.danger, button.danger { background: var(--danger); border-color: var(--danger); color: var(--fg-on-fill); } .btn.danger:hover, button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); box-shadow: none; } .btn.ghost.danger, button.ghost.danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn.ghost.danger:hover, button.ghost.danger:hover { background: var(--danger-soft); color: var(--danger); } /* Solider Karten-Look: Hintergrund wie eine Karte (weiss bzw. dunkel je Theme), nicht transparent. Fuer den Diashow-Button in der Galerie. */ .btn.btn--card, button.btn--card { background: var(--card); color: var(--fg); border-color: var(--line-strong); box-shadow: var(--shadow-sm); } .btn.btn--card:hover, button.btn--card:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-sm); } /* Voll ueber die Breite der Box — z.B. der Haupt-Button "Fotos hinzufuegen". */ .btn--block { display: flex; width: 100%; } .btn-sm, button.btn-sm { height: var(--control-h-sm); padding: 0 var(--s-3); font-size: 0.8rem; border-radius: var(--radius-sm); } /* Button-Gruppen: egal ob ,