/* ========================================================================== Rosenrot — Design System Aufgebaut mit CSS Custom Properties — Themes können später durch Überschreiben der --rr-* Variablen via [data-theme="..."] aktiviert werden. ========================================================================== */ /* --- Self-Hosted Fonts --------------------------------------------------- */ /* Cormorant Garamond + Inter selbst gehostet (nicht von Google-CDN) → keine IP-Übertragung an Dritte, DSGVO-konform ohne Consent-Banner. Variable Fonts: je eine Datei pro Subset deckt alle Weights ab. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/cormorant-garamond/cormorant-garamond-regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/cormorant-garamond/cormorant-garamond-regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond/cormorant-garamond-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/cormorant-garamond/cormorant-garamond-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* --- Design-Tokens ------------------------------------------------------- */ /* * Theme-System (Sitzung 8): * - :root enthält alle Design-Tokens + die Rosenrot-Standardpalette * - [data-theme="…"] am -Element überschreibt NUR die Farbvariablen * - Gesteuert per content_blocks `site.theme` → helpers.php current_theme() * - Whitelist: rosenrot, spring, summer, autumn, advent * Wer neue Paletten anlegt: nur --rr-bg* / --rr-text* / --rr-accent* / --rr-border* * / --rr-shadow* setzen — der Rest (Typo, Spacing, Layout) bleibt konstant. */ :root { /* Farben — Standard: Rosenrot (wird von data-theme="rosenrot" gespiegelt) */ --rr-bg: #faf6f2; --rr-bg-alt: #f3ebe4; --rr-bg-card: #ffffff; --rr-text: #2a1a1f; --rr-text-soft: #6b4a52; --rr-text-muted: #9a7e85; --rr-accent: #a23d54; --rr-accent-dk: #6e2838; --rr-accent-lt: #d88698; --rr-border: #ead7cc; --rr-border-lt: #f3e6dc; --rr-shadow: 0 4px 20px rgba(110, 40, 56, 0.06); --rr-shadow-lg: 0 10px 40px rgba(110, 40, 56, 0.12); /* Typografie */ --rr-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --rr-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Abstände — Mobile First */ --rr-space-xs: 0.5rem; --rr-space-sm: 1rem; --rr-space: 1.5rem; --rr-space-md: 2.5rem; --rr-space-lg: 4rem; --rr-space-xl: 6rem; /* Layout */ --rr-container: 1200px; --rr-container-narrow: 720px; --rr-radius: 8px; --rr-radius-lg: 16px; /* Animation */ --rr-transition: 180ms ease; } /* Farbwechsel sanft animieren (außer wer reduced-motion hat — der Block unten fängt das) */ body, .site-header, .site-footer, .card, .btn, .notice, .gallery-tile, .gallery-grid__link { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } /* --- Paletten ------------------------------------------------------------ */ /* Rosenrot (Standard, identisch zu :root) */ [data-theme="rosenrot"] { --rr-bg: #faf6f2; --rr-bg-alt: #f3ebe4; --rr-bg-card: #ffffff; --rr-text: #2a1a1f; --rr-text-soft: #6b4a52; --rr-text-muted: #9a7e85; --rr-accent: #a23d54; --rr-accent-dk: #6e2838; --rr-accent-lt: #d88698; --rr-border: #ead7cc; --rr-border-lt: #f3e6dc; --rr-shadow: 0 4px 20px rgba(110, 40, 56, 0.06); --rr-shadow-lg: 0 10px 40px rgba(110, 40, 56, 0.12); } /* Frühling — Moosgrün, heller Hintergrund, Apfelblüten-Note */ [data-theme="spring"] { --rr-bg: #f7faf2; --rr-bg-alt: #eaf1df; --rr-bg-card: #ffffff; --rr-text: #1f2a1a; --rr-text-soft: #4d6344; --rr-text-muted: #8aa08a; --rr-accent: #5a8a4f; --rr-accent-dk: #3e6336; --rr-accent-lt: #a8c894; --rr-border: #d5e3c5; --rr-border-lt: #e8f0dd; --rr-shadow: 0 4px 20px rgba(62, 99, 54, 0.06); --rr-shadow-lg: 0 10px 40px rgba(62, 99, 54, 0.12); } /* Sommer — Sonnenblume, honigwarm */ [data-theme="summer"] { --rr-bg: #fdf8ea; --rr-bg-alt: #f6ecc9; --rr-bg-card: #ffffff; --rr-text: #2a2218; --rr-text-soft: #6d5a2f; --rr-text-muted: #a89568; --rr-accent: #c4883e; --rr-accent-dk: #8c5e28; --rr-accent-lt: #e8c07a; --rr-border: #e5d4a3; --rr-border-lt: #f1e6c2; --rr-shadow: 0 4px 20px rgba(140, 94, 40, 0.08); --rr-shadow-lg: 0 10px 40px rgba(140, 94, 40, 0.14); } /* Herbst — Kürbisorange, Erd-Töne */ [data-theme="autumn"] { --rr-bg: #f9f2ec; --rr-bg-alt: #efe1d4; --rr-bg-card: #ffffff; --rr-text: #2a1d15; --rr-text-soft: #6e432a; --rr-text-muted: #a47c61; --rr-accent: #b8542a; --rr-accent-dk: #7f3a1c; --rr-accent-lt: #d8885d; --rr-border: #e4c8b1; --rr-border-lt: #f0ddc9; --rr-shadow: 0 4px 20px rgba(127, 58, 28, 0.07); --rr-shadow-lg: 0 10px 40px rgba(127, 58, 28, 0.14); } /* Advent — Tannengrün, warmes Bratapfel-Rot als Akzent-Lt */ [data-theme="advent"] { --rr-bg: #f5f4ee; --rr-bg-alt: #e6ead9; --rr-bg-card: #ffffff; --rr-text: #1b2418; --rr-text-soft: #3f5a42; --rr-text-muted: #88968a; --rr-accent: #3d6b4a; --rr-accent-dk: #2a4a33; --rr-accent-lt: #b2464c; --rr-border: #cad6c3; --rr-border-lt: #dfe6d5; --rr-shadow: 0 4px 20px rgba(42, 74, 51, 0.08); --rr-shadow-lg: 0 10px 40px rgba(42, 74, 51, 0.14); } /* ========================================================================== Dark Mode -------------------------------------------------------------------------- Aktivierung auf zwei Wegen: 1) System: @media prefers-color-scheme: dark → wirkt, wenn kein expliziter Override gesetzt ist 2) Manuell: html[data-color-scheme="dark"] oder "light" übersteuert das System Der Wert kommt aus dem Cookie `rr_cs` und wird in layout.php serverseitig als Attribut gerendert (→ kein Flash beim Seitenaufbau). Dunkel-Werte sind palette-übergreifend gleich (gedimmtes Warm-Schwarz, cremefarbener Text). Nur --rr-accent bleibt palettenspezifisch, sodass Frühlings-Grün / Sommer-Gelb / Advent-Grün auch im Dark Mode durchscheinen. Palettenspezifische Dark-Feinjustierung (falls mal ein Akzent zu dunkel wirkt): einfach eigenen Block html[data-theme="x"][data-color-scheme="dark"] darunter hängen. ========================================================================== */ :root { /* Dark-Palette zentral definiert — wird weiter unten per Selektor-Liste auf --rr-bg / --rr-text etc. gemappt. Separater Name (--rr-dm-*) damit sie nicht versehentlich im Light Mode wirken. */ --rr-dm-bg: #1a1416; --rr-dm-bg-alt: #221a1d; --rr-dm-bg-card: #2a2124; --rr-dm-text: #f3e6dc; --rr-dm-text-soft: #cfb8ae; --rr-dm-text-muted: #9a827c; --rr-dm-border: #3a2d31; --rr-dm-border-lt: #2d2427; --rr-dm-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --rr-dm-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6); } /* Expliziter Override via Cookie (rr_cs=dark) */ html[data-color-scheme="dark"] { --rr-bg: var(--rr-dm-bg); --rr-bg-alt: var(--rr-dm-bg-alt); --rr-bg-card: var(--rr-dm-bg-card); --rr-text: var(--rr-dm-text); --rr-text-soft: var(--rr-dm-text-soft); --rr-text-muted: var(--rr-dm-text-muted); --rr-border: var(--rr-dm-border); --rr-border-lt: var(--rr-dm-border-lt); --rr-shadow: var(--rr-dm-shadow); --rr-shadow-lg: var(--rr-dm-shadow-lg); color-scheme: dark; } /* Systempräferenz — nur aktiv, wenn NICHT explizit auf "light" festgelegt */ @media (prefers-color-scheme: dark) { html:not([data-color-scheme="light"]) { --rr-bg: var(--rr-dm-bg); --rr-bg-alt: var(--rr-dm-bg-alt); --rr-bg-card: var(--rr-dm-bg-card); --rr-text: var(--rr-dm-text); --rr-text-soft: var(--rr-dm-text-soft); --rr-text-muted: var(--rr-dm-text-muted); --rr-border: var(--rr-dm-border); --rr-border-lt: var(--rr-dm-border-lt); --rr-shadow: var(--rr-dm-shadow); --rr-shadow-lg: var(--rr-dm-shadow-lg); color-scheme: dark; } } /* Dark Mode: kleine palettenspezifische Akzent-Korrekturen für Kontrast. Advent-Grün und Rosenrot sind im dunklen Kontext etwas zu dumpf — wir verwenden dort eine aufgehellte Variante. */ html[data-color-scheme="dark"][data-theme="rosenrot"], html[data-color-scheme="dark"][data-theme="advent"] { --rr-accent: var(--rr-accent-lt); } @media (prefers-color-scheme: dark) { html:not([data-color-scheme="light"])[data-theme="rosenrot"], html:not([data-color-scheme="light"])[data-theme="advent"] { --rr-accent: var(--rr-accent-lt); } } /* Footer-Override: im Light Mode ist .site-footer dunkel (background: --rr-text). Im Dark Mode ist --rr-text aber hell → Footer würde plötzlich hell werden. Hier zwingen wir ihn auf einen eigenständig dunklen Ton, damit er weiterhin gegen den Seiten-BG abgesetzt bleibt. */ html[data-color-scheme="dark"] .site-footer { background: #0e0a0c; } @media (prefers-color-scheme: dark) { html:not([data-color-scheme="light"]) .site-footer { background: #0e0a0c; } } /* Sanfter Übergang beim Umschalten — sonst ist es ein harter Flash. Nur auf den Farbwerten, kein allgemeines transition: all. */ body, .site-footer, .site-header, .site-footer__social-link, .btn, input, textarea, select, .admin-body, .admin-header, .admin-footer, .admin-card, .theme-option, .theme-preview, .theme-preview__card { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg, video { max-width: 100%; height: auto; display: block; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } a { color: inherit; } /* --- Base ---------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { font-family: var(--rr-sans); font-size: 17px; line-height: 1.6; color: var(--rr-text); background: var(--rr-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--rr-serif); font-weight: 500; line-height: 1.15; color: var(--rr-text); margin: 0 0 0.5em; letter-spacing: 0.01em; } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); } h3 { font-size: 1.35rem; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } a { color: var(--rr-accent); text-decoration: none; transition: color var(--rr-transition); } a:hover { color: var(--rr-accent-dk); text-decoration: underline; } ::selection { background: var(--rr-accent-lt); color: var(--rr-text); } /* --- Layout-Utilities ---------------------------------------------------- */ .container { width: 100%; max-width: var(--rr-container); margin: 0 auto; padding: 0 var(--rr-space); } .container--narrow { max-width: var(--rr-container-narrow); } .text-center { text-align: center; } .mt-lg { margin-top: var(--rr-space-lg); } .eyebrow { display: inline-block; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rr-accent); font-weight: 600; margin: 0 0 var(--rr-space-sm); } .lead { font-size: 1.15rem; line-height: 1.7; color: var(--rr-text-soft); } .note { background: var(--rr-bg-alt); border-left: 3px solid var(--rr-accent-lt); padding: var(--rr-space-sm); border-radius: var(--rr-radius); font-size: 0.9rem; color: var(--rr-text-soft); } /* --- Sections (vertikales Rhythmus) -------------------------------------- */ .section { padding: var(--rr-space-lg) 0; } .section__header { text-align: center; margin-bottom: var(--rr-space-lg); } .section__title { margin-bottom: var(--rr-space-xs); } .section__sub { color: var(--rr-text-soft); max-width: 40ch; margin: 0 auto; } .section--intro { padding-top: var(--rr-space-xl); } .section--cta { background: var(--rr-bg-alt); } /* --- Header / Navigation ------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--rr-bg); border-bottom: 1px solid var(--rr-border-lt); /* Kein backdrop-filter: erzeugt sonst einen containing block, der position:fixed-Kinder (Mobile-Nav) auf die Header-Größe einsperrt. */ } .site-header__inner { max-width: var(--rr-container); margin: 0 auto; padding: 0 var(--rr-space); display: flex; align-items: center; justify-content: space-between; min-height: 72px; } .brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; } .brand__name { font-family: var(--rr-serif); font-size: 1.75rem; color: var(--rr-accent); font-weight: 500; letter-spacing: 0.02em; } .brand__tagline { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rr-text-muted); margin-top: 0.2rem; } /* Burger */ .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: var(--rr-radius); } .nav-toggle__bar { display: block; width: 100%; height: 2px; background: var(--rr-text); border-radius: 2px; transition: transform var(--rr-transition), opacity var(--rr-transition); transform-origin: center; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Navigation */ .site-nav { position: fixed; inset: 72px 0 0 0; z-index: 90; background: var(--rr-bg); padding: var(--rr-space-md) var(--rr-space); overflow-y: auto; transform: translateX(100%); transition: transform 240ms ease; visibility: hidden; } .site-nav.is-open { transform: translateX(0); visibility: visible; } .site-nav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--rr-space-sm); } .site-nav__list a { display: block; padding: var(--rr-space-sm); font-size: 1.25rem; font-family: var(--rr-serif); text-decoration: none; color: var(--rr-text); border-radius: var(--rr-radius); transition: background var(--rr-transition), color var(--rr-transition); } .site-nav__list a:hover, .site-nav__list a.is-active { background: var(--rr-bg-alt); color: var(--rr-accent); text-decoration: none; } /* --- Buttons ------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none !important; transition: background var(--rr-transition), color var(--rr-transition), transform var(--rr-transition), box-shadow var(--rr-transition); border: 1.5px solid transparent; line-height: 1.2; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--rr-accent); color: #fff; border-color: var(--rr-accent); } .btn--primary:hover { background: var(--rr-accent-dk); border-color: var(--rr-accent-dk); color: #fff; box-shadow: var(--rr-shadow); } .btn--ghost { background: transparent; color: var(--rr-accent); border-color: var(--rr-accent); } .btn--ghost:hover { background: var(--rr-accent); color: #fff; } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; min-height: 72vh; display: flex; align-items: center; overflow: hidden; background: var(--rr-bg-alt); } .hero__image { position: absolute; inset: 0; } .hero__image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero__overlay { position: relative; z-index: 2; width: 100%; padding: var(--rr-space-lg) var(--rr-space); background: linear-gradient( 180deg, rgba(42, 26, 31, 0.15) 0%, rgba(42, 26, 31, 0.55) 100% ); min-height: 72vh; display: flex; align-items: center; } .hero__content { max-width: var(--rr-container-narrow); color: #fff; } .hero__eyebrow { color: #fff; opacity: 0.9; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; font-weight: 600; margin: 0 0 var(--rr-space-sm); } .hero__title { color: #fff; font-size: clamp(2.25rem, 7vw, 4.5rem); line-height: 1.05; margin: 0 0 var(--rr-space); text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2); } .hero__text { color: #fff; opacity: 0.95; font-size: 1.15rem; line-height: 1.6; max-width: 38ch; margin: 0 0 var(--rr-space-md); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); } .hero__actions { display: flex; gap: var(--rr-space-sm); flex-wrap: wrap; } .hero__actions .btn--ghost { color: #fff; border-color: #fff; } .hero__actions .btn--ghost:hover { background: #fff; color: var(--rr-accent); } /* --- Page-Hero (kleiner als Home-Hero) ----------------------------------- */ .page-hero { padding: var(--rr-space-lg) 0 var(--rr-space-md); background: var(--rr-bg-alt); } .page-hero__title { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 var(--rr-space-xs); } .page-hero__sub { color: var(--rr-text-soft); font-size: 1.1rem; max-width: 50ch; margin: 0 auto; } /* --- Services ------------------------------------------------------------ */ .services { display: grid; gap: var(--rr-space); grid-template-columns: 1fr; } .service-card { background: var(--rr-bg-card); border: 1px solid var(--rr-border-lt); border-radius: var(--rr-radius-lg); padding: var(--rr-space-md); transition: transform var(--rr-transition), box-shadow var(--rr-transition); } .service-card:hover { transform: translateY(-2px); box-shadow: var(--rr-shadow); } .service-card h3 { color: var(--rr-accent); margin-bottom: var(--rr-space-xs); } .service-card p { color: var(--rr-text-soft); font-size: 0.95rem; } /* --- Gallery-Teaser ------------------------------------------------------ */ .gallery-teaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--rr-space-sm); margin-bottom: var(--rr-space-md); } .gallery-teaser__item { aspect-ratio: 1; border-radius: var(--rr-radius); overflow: hidden; background: var(--rr-bg-alt); } .gallery-teaser__item--placeholder { background: linear-gradient(135deg, var(--rr-bg-alt) 0%, var(--rr-border-lt) 100%); position: relative; } .gallery-teaser__item--placeholder::after { content: "🌸"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; opacity: 0.4; } /* --- Info-Cards (Anfahrt) ------------------------------------------------ */ .info-grid { display: grid; gap: var(--rr-space); grid-template-columns: 1fr; } .info-card { background: var(--rr-bg-card); border: 1px solid var(--rr-border-lt); border-radius: var(--rr-radius-lg); padding: var(--rr-space-md); } .info-card h2 { color: var(--rr-accent); font-size: 1.35rem; margin-bottom: var(--rr-space-sm); } .info-card address { font-style: normal; line-height: 1.7; } /* Öffnungszeiten */ .hours { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--rr-space-sm); margin: 0; font-size: 0.95rem; } .hours dt { color: var(--rr-text-soft); font-weight: 500; } .hours dd { margin: 0; font-variant-numeric: tabular-nums; } .hours--large { font-size: 1.05rem; gap: 0.5rem var(--rr-space); } /* --- Kontakt-Cards ------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: var(--rr-space); } .contact-card { background: var(--rr-bg-card); border: 1px solid var(--rr-border-lt); border-radius: var(--rr-radius-lg); padding: var(--rr-space-md); text-align: center; text-decoration: none !important; color: inherit; transition: transform var(--rr-transition), box-shadow var(--rr-transition), border-color var(--rr-transition); display: block; } .contact-card:hover { transform: translateY(-3px); box-shadow: var(--rr-shadow-lg); border-color: var(--rr-accent-lt); } .contact-card__icon { font-size: 2.5rem; margin-bottom: var(--rr-space-sm); } .contact-card h2 { font-size: 1.25rem; color: var(--rr-accent); margin-bottom: var(--rr-space-xs); } .contact-card__value { font-size: 1.15rem; font-weight: 600; color: var(--rr-text); margin: 0 0 var(--rr-space-xs); } .contact-card__hint { font-size: 0.85rem; color: var(--rr-text-muted); } /* --- Map ----------------------------------------------------------------- */ .map-frame { margin-top: var(--rr-space); border-radius: var(--rr-radius-lg); overflow: hidden; box-shadow: var(--rr-shadow); background: var(--rr-bg-alt); } .map-frame iframe { width: 100%; height: 420px; border: 0; display: block; } /* --- Prose (Über uns, Impressum, Datenschutz) ---------------------------- */ .prose h2 { color: var(--rr-accent); margin-top: var(--rr-space-md); font-size: 1.5rem; } .prose h2:first-child { margin-top: 0; } .prose p, .prose address { font-size: 1.05rem; line-height: 1.75; margin-bottom: var(--rr-space); } .prose .lead { font-size: 1.25rem; color: var(--rr-text-soft); margin-bottom: var(--rr-space-md); } /* --- News-Banner (Startseite) -------------------------------------------- */ .news-banner { background: var(--rr-bg-alt); border-bottom: 1px solid var(--rr-border); position: relative; } .news-banner__inner { display: flex; align-items: center; gap: var(--rr-space-sm); padding: var(--rr-space-sm) var(--rr-space); } .news-banner__text { flex: 1; margin: 0; color: var(--rr-text); font-size: 1rem; line-height: 1.5; } .news-banner__text--link { display: block; text-decoration: none; color: var(--rr-accent); font-weight: 500; } .news-banner__text--link:hover { color: var(--rr-accent-dk); text-decoration: underline; } .news-banner__image { max-height: 220px; width: auto; max-width: 100%; border-radius: var(--rr-radius); margin: 0 auto; } .news-banner__media-link { display: block; flex: 1; text-align: center; } .news-banner__close { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; color: var(--rr-text-soft); font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--rr-transition), color var(--rr-transition); } .news-banner__close:hover { background: var(--rr-border-lt); color: var(--rr-accent); } /* --- Notice (Galerien-Platzhalter) --------------------------------------- */ .notice { background: var(--rr-bg-card); border: 1px solid var(--rr-border-lt); border-radius: var(--rr-radius-lg); padding: var(--rr-space-md); text-align: center; box-shadow: var(--rr-shadow); } .notice h2 { color: var(--rr-accent); margin-bottom: var(--rr-space-sm); } /* --- Footer -------------------------------------------------------------- */ .site-footer { background: var(--rr-text); color: #e3d4d8; margin-top: var(--rr-space-xl); } .site-footer__inner { max-width: var(--rr-container); margin: 0 auto; padding: var(--rr-space-lg) var(--rr-space); display: grid; gap: var(--rr-space-md); grid-template-columns: 1fr; } .site-footer__heading { font-family: var(--rr-serif); color: #fff; font-size: 1.35rem; margin: 0 0 var(--rr-space-sm); } .site-footer__text, .site-footer address { color: #c9b5bb; line-height: 1.8; font-style: normal; font-size: 0.95rem; } .site-footer a { color: #f3e6dc; } .site-footer a:hover { color: #fff; } .site-footer .hours dt { color: #a89097; } .site-footer .hours dd { color: #f3e6dc; } /* Social-Media-Liste unter Kontakt: Icons + Text-Label in einer Zeile. currentColor im SVG sorgt dafür, dass das Icon die Link-Farbe erbt — bei Hover wird es also automatisch weiß. */ .site-footer__social { list-style: none; padding: 0; margin: var(--rr-space-sm) 0 0; display: flex; flex-wrap: wrap; gap: 0.75rem; } .site-footer__social-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: 4px; transition: background-color 0.15s ease; } .site-footer__social-link:hover { background: rgba(255, 255, 255, 0.06); } .site-footer__social-link svg { flex-shrink: 0; } .site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: var(--rr-space) var(--rr-space); max-width: var(--rr-container); margin: 0 auto; display: flex; flex-direction: column; gap: var(--rr-space-sm); align-items: center; justify-content: space-between; font-size: 0.85rem; } .site-footer__bottom p { margin: 0; color: #a89097; } .site-footer__bottom nav { display: flex; gap: var(--rr-space); } /* Farbschema-Umschalter: kleines 3er-Segment-Control im Footer-Bottom. Aktiver Zustand (aria-pressed="true") wird mit heller Hintergrund-Fläche markiert — dasselbe Pattern wie iOS-Segmented-Controls. */ .color-scheme-toggle { display: inline-flex; gap: 2px; padding: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 999px; } .color-scheme-toggle button { border: 0; background: transparent; color: #a89097; width: 32px; height: 28px; line-height: 1; border-radius: 999px; font-size: 0.95rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .color-scheme-toggle button:hover { color: #f3e6dc; } .color-scheme-toggle button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); color: #fff; } .color-scheme-toggle button:focus-visible { outline: 2px solid var(--rr-accent-lt); outline-offset: 2px; } /* Screenreader-only Text für Button-Labels (visually-hidden evtl. schon anderswo definiert; doppelte Regeln sind harmlos). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Responsive Breakpoints --------------------------------------------- */ /* Tablet */ @media (min-width: 640px) { .services { grid-template-columns: repeat(3, 1fr); } .contact-grid { grid-template-columns: repeat(3, 1fr); } .info-grid { grid-template-columns: repeat(2, 1fr); } .gallery-teaser { grid-template-columns: repeat(4, 1fr); } .site-footer__bottom { flex-direction: row; } } /* Desktop */ @media (min-width: 900px) { .info-grid { grid-template-columns: repeat(3, 1fr); } .site-footer__inner { grid-template-columns: repeat(3, 1fr); } /* Desktop-Navigation: Burger weg, Links horizontal */ .nav-toggle { display: none; } .site-nav { position: static; inset: auto; padding: 0; transform: none; visibility: visible; background: transparent; overflow: visible; } .site-nav__list { flex-direction: row; gap: 0.25rem; } .site-nav__list a { padding: 0.6rem var(--rr-space-sm); font-size: 1rem; font-family: var(--rr-sans); } } /* Wenn Burger offen — Scroll verhindern */ body.is-nav-open { overflow: hidden; } /* Reduced Motion respektieren */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* === Galerien-Übersicht (Sitzung 7) ==================================== */ .gallery-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .gallery-tile { background: var(--rr-bg-soft, #fff); border: 1px solid var(--rr-border-lt); border-radius: var(--rr-radius-lg, 1rem); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .gallery-tile:hover, .gallery-tile:focus-within { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); } .gallery-tile__link { display: block; color: inherit; text-decoration: none; height: 100%; } .gallery-tile__cover { aspect-ratio: 4 / 3; background: var(--rr-accent-lt, #f5e6eb); display: flex; align-items: center; justify-content: center; overflow: hidden; } .gallery-tile__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-tile__placeholder { font-size: 3rem; opacity: 0.5; } .gallery-tile__body { padding: 1rem 1.25rem 1.25rem; } .gallery-tile__title { font-family: var(--rr-font-serif, 'Cormorant Garamond', serif); font-size: 1.5rem; margin: 0 0 0.3rem; color: var(--rr-accent); } .gallery-tile__desc { margin: 0 0 0.5rem; color: var(--rr-text-soft); font-size: 0.95rem; } .gallery-tile__meta { margin: 0; color: var(--rr-text-muted); font-size: 0.85rem; } .page-hero__back { color: var(--rr-text-soft); text-decoration: none; } .page-hero__back:hover { text-decoration: underline; } /* === Galerie-Detail: Bildergitter ===================================== */ .gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; } .gallery-grid__item { margin: 0; } .gallery-grid__link { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--rr-radius, 0.5rem); background: var(--rr-accent-lt, #f5e6eb); } .gallery-grid__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .gallery-grid__link:hover img, .gallery-grid__link:focus-visible img { transform: scale(1.05); } .gallery-grid__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.7rem; background: linear-gradient(to top, rgba(0,0,0,0.55), transparent); color: #fff; font-size: 0.85rem; opacity: 0; transition: opacity 0.2s ease; } .gallery-grid__link:hover .gallery-grid__caption, .gallery-grid__link:focus-visible .gallery-grid__caption { opacity: 1; } /* === Lightbox ========================================================= */ body.has-lightbox { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 10, 12, 0.92); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; animation: lightbox-fade 0.2s ease; } .lightbox[hidden] { display: none; } @keyframes lightbox-fade { from { opacity: 0; } to { opacity: 1; } } .lightbox__figure { max-width: 100%; max-height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .lightbox__img { max-width: 95vw; max-height: 85vh; object-fit: contain; border-radius: 0.25rem; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .lightbox__caption { color: #f0e8e6; font-size: 0.95rem; text-align: center; max-width: 80ch; margin: 0; } .lightbox__caption[hidden] { display: none; } .lightbox__btn { position: absolute; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; width: 3rem; height: 3rem; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .lightbox__btn:hover, .lightbox__btn:focus-visible { background: rgba(255,255,255,0.25); outline: none; } .lightbox__btn--close { top: 1rem; right: 1rem; } .lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); } .lightbox__counter { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.8rem; font-variant-numeric: tabular-nums; margin: 0; } @media (max-width: 640px) { .lightbox__btn { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; } .lightbox__btn--close { top: 0.5rem; right: 0.5rem; } .lightbox__btn--prev { left: 0.25rem; } .lightbox__btn--next { right: 0.25rem; } .lightbox__img { max-height: 80vh; } } /* Home-Teaser: echte Galerien (Sitzung 7) */ a.gallery-teaser__item { display: block; position: relative; text-decoration: none; color: inherit; background: var(--rr-accent-lt); } a.gallery-teaser__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } a.gallery-teaser__item:hover img, a.gallery-teaser__item:focus-visible img { transform: scale(1.05); } .gallery-teaser__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.75rem; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: #fff; font-size: 0.9rem; font-weight: 500; }