/* Schriften lokal (DSGVO: keine Verbindung zu Google) */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/figtree-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: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/fraunces-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/fraunces-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; }

/* ---------- Farben & Grundwerte ---------- */
:root {
  --radius: 0.875rem;
  --background: oklch(0.985 0.008 75);
  --foreground: oklch(0.26 0.03 40);
  --card: #fff;
  --primary: #a34b2b; /* WCAG AA: ≥ 4.5:1 auf Hintergrund und mit weißer Schrift */
  --primary-foreground: oklch(0.99 0.005 75);
  --secondary: oklch(0.955 0.018 70);
  --muted: oklch(0.95 0.015 70);
  --muted-foreground: oklch(0.48 0.03 45);
  --accent: oklch(0.93 0.04 40);
  --accent-foreground: oklch(0.45 0.12 35);
  --border: oklch(0.9 0.02 65);
  --destructive: oklch(0.577 0.245 27.325);
  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Figtree", system-ui, sans-serif;
  --shadow-soft: 0 6px 24px -12px color-mix(in oklab, var(--foreground) 25%, transparent);
  --shadow-lift: 0 22px 50px -20px color-mix(in oklab, var(--primary) 40%, transparent);
}

/* Feiertags-Theme: Akzentfarben werden aus der Theme-Hauptfarbe abgeleitet */
body.themed {
  --accent: color-mix(in oklab, var(--primary) 14%, white);
  --accent-foreground: color-mix(in oklab, var(--primary) 80%, black);
  --secondary: color-mix(in oklab, var(--primary) 6%, oklch(0.97 0.01 75));
}

*, *::before, *::after { box-sizing: border-box; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon-lg { width: 2.5rem; height: 2.5rem; color: var(--primary); }
.container { max-width: 72rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.display { font-family: var(--font-display); font-weight: 600; }
.h1 { font-size: clamp(2.25rem, 6vw, 3rem); line-height: 1.1; margin-top: .5rem; }
.h2 { font-size: clamp(1.875rem, 4vw, 2.25rem); line-height: 1.15; margin-top: .5rem; }
.eyebrow { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); }
.eyebrow.small { font-size: .75rem; }
.row { display: flex; gap: .5rem; align-items: center; }
.bg-hero { background: radial-gradient(circle at 85% 10%, var(--accent), transparent 45%), radial-gradient(circle at 5% 90%, var(--secondary), transparent 50%), var(--background); }
.section { margin-top: 5rem; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .75rem 1.5rem; font: inherit; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: opacity .15s, background .15s; text-align: center; }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-soft); }
.btn-primary:hover, .btn-light:hover { opacity: .9; }
.btn-outline { background: var(--card); border-color: var(--border); }
.btn-outline:hover { background: var(--secondary); }
.btn-light { background: var(--background); color: var(--foreground); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(8px); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; }
.brand { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); flex-shrink: 0; }
.brand-mark .icon { width: 1.25rem; height: 1.25rem; }
.brand-logo { height: 2.75rem; width: auto; max-width: 9rem; object-fit: contain; }
.brand-text { line-height: 1.2; min-width: 0; }
.brand-name { display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.brand-sub { display: block; font-size: .75rem; color: var(--muted-foreground); }
.nav-desktop { display: none; gap: 1.75rem; font-size: .875rem; font-weight: 500; }
.nav-desktop a:hover, .nav-desktop a.active, .nav-mobile a.active { color: var(--primary); }
.nav-mobile { display: flex; justify-content: center; gap: 1.5rem; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: .5rem 0; font-size: .875rem; font-weight: 500; }
.hide-xs { display: none; }
@media (min-width: 640px) { .hide-xs { display: inline; } }
@media (min-width: 768px) { .nav-desktop { display: flex; } .nav-mobile { display: none; } }

.preview-bar { background: var(--foreground); color: var(--background); text-align: center; font-size: .8125rem; padding: .4rem 1rem; }
.preview-bar a { text-decoration: underline; }

/* ---------- Schließhinweis ---------- */
.notice { border-bottom: 1px solid var(--border); background: var(--accent); color: var(--accent-foreground); }
.notice .container { padding-top: 1rem; padding-bottom: 1rem; display: grid; gap: .5rem; }
.notice-item { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; }
.notice-item .icon { width: 1.25rem; height: 1.25rem; margin-top: .1rem; }
.notice-item span { display: block; }

/* ---------- Startseite ---------- */
.hero { position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; padding-top: 4rem; padding-bottom: 4rem; }
.pill { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-foreground); padding: .25rem .75rem; font-size: .75rem; font-weight: 600; }
.hero-kicker { display: block; font-family: var(--font-sans); font-size: .875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; line-height: 1.4; }
.hero-title { margin-top: 1.25rem; font-size: clamp(2.75rem, 7vw, 3.75rem); line-height: 1.05; }
.rotating { display: inline-block; color: var(--primary); }
.rotating.swap { animation: verbIn .5s ease; }
@keyframes verbIn { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
.lead { margin-top: 1.5rem; max-width: 32rem; font-size: 1.125rem; color: var(--muted-foreground); }
.actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-media { position: relative; padding-bottom: 2rem; }
.hero-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hero-images img { aspect-ratio: 3/4; width: 100%; object-fit: cover; border-radius: 1.5rem; box-shadow: var(--shadow-lift); }
.hero-images .offset { margin-top: 2.5rem; }
.hours-card { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 16rem; border: 1px solid var(--border); background: var(--card); border-radius: 1rem; padding: 1rem; box-shadow: var(--shadow-lift); }
.hours-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; }
.hours-title .icon { color: var(--primary); }
.hours-row { display: flex; justify-content: space-between; font-size: .875rem; color: var(--muted-foreground); margin-top: .125rem; }
@media (min-width: 768px) { .hero-grid { grid-template-columns: 1fr 1fr; padding-top: 6rem; padding-bottom: 6rem; } }

.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.link-more { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--primary); }
.link-more:hover { text-decoration: underline; }
.tiles { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; overflow: hidden; border-radius: 1.5rem; box-shadow: var(--shadow-soft); }
.tile img { aspect-ratio: 1; width: 100%; object-fit: cover; transition: transform .5s; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--foreground) 70%, transparent), transparent 60%); }
.tile span { position: absolute; z-index: 1; left: 1rem; right: 1rem; bottom: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--background); }
@media (min-width: 768px) { .tile span { font-size: 1.25rem; } }

.cta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; border-radius: 1.5rem; background: var(--primary); color: var(--primary-foreground); padding: 2rem; }
.cta .row { margin-top: .75rem; opacity: .9; }
.cta .row .icon { width: 1.25rem; height: 1.25rem; }
.cta-actions { display: flex; flex-direction: column; gap: .75rem; }
.cta-mail { font-size: .875rem; opacity: .9; }
.cta-mail:hover { text-decoration: underline; }
@media (min-width: 768px) { .cta { grid-template-columns: 1.4fr 1fr; padding: 3rem; } .cta-actions { align-items: flex-end; justify-content: center; } }

/* ---------- Unterseiten ---------- */
.page-head { padding-top: 4rem; padding-bottom: 4rem; }
.chips { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips a { border: 1px solid var(--border); background: var(--card); border-radius: 999px; padding: .375rem 1rem; font-size: .875rem; font-weight: 500; }
.chips a:hover { border-color: var(--primary); color: var(--primary); }
.service-grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card { scroll-margin-top: 7rem; overflow: hidden; border-radius: 1.5rem; border: 1px solid var(--border); background: var(--card); box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.service-img { aspect-ratio: 4/3; overflow: hidden; background: var(--muted); }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.service-card:hover .service-img img { transform: scale(1.05); }
.service-body { padding: 1.5rem; }
.service-body h3 { margin-top: .25rem; font-size: 1.25rem; }
.service-body ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.service-body li { display: flex; gap: .5rem; }
.service-body li .icon { margin-top: .15rem; color: var(--primary); }

.contact-grid { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1.3fr; } }
.stack { display: grid; gap: 1rem; align-content: start; }
.info-card { display: flex; align-items: center; gap: 1rem; min-width: 0; border: 1px solid var(--border); background: var(--card); border-radius: 1rem; padding: 1.25rem; box-shadow: var(--shadow-soft); overflow-wrap: anywhere; }
.info-card.block { display: block; }
.info-card.link:hover { border-color: var(--primary); }
.info-card small { display: block; font-size: .75rem; color: var(--muted-foreground); }
.info-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 999px; background: var(--accent); color: var(--primary); flex-shrink: 0; }
.info-icon .icon { width: 1.25rem; height: 1.25rem; }
.hours-list { margin-top: .75rem; font-size: .875rem; }
.hours-list p { display: flex; justify-content: space-between; padding: .5rem 0; border-top: 1px solid var(--border); }
.hours-list p:first-child { border-top: 0; }
.hours-list span:first-child { font-weight: 500; }

.map { min-width: 0; }
.map-consent { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; text-align: center; border: 1px solid var(--border); border-radius: 1.5rem; background: var(--secondary); padding: 2.5rem 1.5rem; }
.map-consent h2 { margin-top: 1.25rem; font-size: 1.5rem; }
.map-consent p a { color: var(--primary); text-decoration: underline; }
.map-consent p { margin-top: .75rem; max-width: 28rem; font-size: .875rem; color: var(--muted-foreground); }
.map-consent .btn { margin-top: 1.5rem; }
.map iframe { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 1.5rem; box-shadow: var(--shadow-soft); }
.map-tools { margin-top: .75rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .875rem; }
.map-tools a, .map-tools button { color: var(--primary); background: none; border: 0; font: inherit; cursor: pointer; padding: .25rem 0; }
.map-tools a:hover, .map-tools button:hover { text-decoration: underline; }

.prose { max-width: 48rem; padding-top: 4rem; padding-bottom: 4rem; color: var(--muted-foreground); display: grid; gap: 1.25rem; }
.prose h1, .prose h2, .prose h3 { color: var(--foreground); }
.prose h2 { margin-top: 2.5rem; font-family: var(--font-display); font-size: 1.5rem; }
.prose h3 { margin-top: 1.5rem; }
.prose .info-card { color: var(--foreground); }
.prose a { color: var(--primary); }
.prose .mt { margin-top: .75rem; }
.prose .small { font-size: .875rem; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 6rem; background: var(--secondary); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: 3.5rem; padding-bottom: 3.5rem; font-size: .875rem; }
.footer-grid > div { display: grid; gap: .75rem; align-content: start; }
.footer-grid h3 { font-family: var(--font-display); font-size: 1.125rem; }
.footer-grid .icon { color: var(--primary); }
.footer-grid a:hover { color: var(--primary); }
.footer-grid .day { width: 3.5rem; font-weight: 500; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.copyright { border-top: 1px solid var(--border); padding: 1.25rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; font-size: .75rem; color: var(--muted-foreground); }
.credit a { text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--primary); }

/* ---------- Dekorationen (Feiertags-Themes) ---------- */
.decoration { position: fixed; inset: -100vh 0 0; pointer-events: none; z-index: 30; background-repeat: repeat; animation: fall 18s linear infinite; opacity: .75; }
.deco-snow .decoration {
  background-image:
    radial-gradient(3px 3px at 20px 30px, #b9cbe3 50%, transparent 51%),
    radial-gradient(4px 4px at 120px 80px, #c9d8ec 50%, transparent 51%),
    radial-gradient(2px 2px at 70px 150px, #b9cbe3 50%, transparent 51%),
    radial-gradient(3px 3px at 170px 190px, #d3dff0 50%, transparent 51%);
  background-size: 200px 220px;
}
.deco-confetti .decoration {
  background-image:
    radial-gradient(3px 3px at 30px 40px, #e11d48 50%, transparent 51%),
    radial-gradient(3px 3px at 130px 90px, #f59e0b 50%, transparent 51%),
    radial-gradient(3px 3px at 80px 170px, #2563eb 50%, transparent 51%),
    radial-gradient(3px 3px at 180px 200px, #16a34a 50%, transparent 51%);
  background-size: 220px 240px; animation-duration: 14s;
}
.deco-petals .decoration {
  background-image:
    radial-gradient(5px 3px at 40px 50px, #f9a8d4 50%, transparent 51%),
    radial-gradient(4px 3px at 150px 120px, #fbcfe8 50%, transparent 51%),
    radial-gradient(5px 3px at 90px 200px, #fde68a 50%, transparent 51%);
  background-size: 230px 250px; animation-duration: 24s;
}
@keyframes fall { to { transform: translateY(100vh); } }
@media (prefers-reduced-motion: reduce) { .decoration { animation: none; } html { scroll-behavior: auto; } .rotating.swap { animation: none; } }

/* WhatsApp-Teilen */
.btn-whatsapp { background: #25d366; color: #fff; box-shadow: var(--shadow-soft); justify-self: start; }
.btn-whatsapp:hover { opacity: .9; }
.wa-link .icon { color: #25d366 !important; }

/* ---------- 404 ---------- */
.nf-inner { padding-top: 3rem; padding-bottom: 4rem; text-align: center; display: grid; justify-items: center; }
.nf-art { width: 100%; max-width: 520px; height: auto; margin-bottom: 1.5rem; overflow: visible; }
.nf-digit { font-family: var(--font-display); font-weight: 600; font-size: 150px; fill: var(--foreground); }
.nf-btn-outer { fill: var(--primary); }
.nf-btn-inner { fill: none; stroke: var(--primary-foreground); stroke-opacity: .35; stroke-width: 2; }
.nf-hole { fill: var(--background); }
.nf-cross { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; }
.nf-seam { stroke: var(--primary); stroke-width: 3; stroke-dasharray: 10 8; fill: none; stroke-linecap: round; }
.nf-loose { stroke: var(--primary); stroke-width: 2; fill: none; stroke-linecap: round; opacity: .7; }
.nf-scissors { fill: none; stroke: var(--foreground); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-button { transform-box: fill-box; transform-origin: center; animation: nf-wobble 4s ease-in-out infinite; }
.nf-seam { animation: nf-sew 1.6s linear infinite; }
.nf-scissors { animation: nf-snip 1.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes nf-wobble { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes nf-sew { to { stroke-dashoffset: -36; } }
@keyframes nf-snip { 0%, 100% { translate: 0 0; } 50% { translate: 4px -2px; } }
.nf-lead { margin-left: auto; margin-right: auto; }
.nf-actions { justify-content: center; }
.nf .h1 { max-width: 40rem; }
@media (prefers-reduced-motion: reduce) { .nf-button, .nf-seam, .nf-scissors { animation: none; } }