/* =====================================================================================================
   Glacis-Apotheke Graz – Design „Promenade am Glacis“
   Luftig, grün, ruhig: die baumbestandene Promenade am Grazer Stadtpark als Leitmotiv.
   Motive: Baumkronen-Rahmen für Bilder, Blätterschatten (Licht & Schatten), Allee-Silhouette mit Laternen,
   Stationen am Spazierweg (Schnellzugriff, Schritte). Hell: Morgenlicht im Park · Dunkel: Abendpromenade im Laternenlicht.
   Schriften: Lora (Überschriften, inkl. Kursiv) + Karla (Text) – lokal, SIL OFL 1.1.
   ===================================================================================================== */

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/lora-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/lora-latin-wght-italic.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('../fonts/karla-latin-wght-normal.woff2') format('woff2'); }

:root {
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', 'Segoe UI', system-ui, -apple-system, sans-serif;
  /* Markenfarben kommen aus „Apotheke → Einstellungen“ (inline, s. ap_color_css) – hier nur Rückfallwerte */
  --brand: #2f5d46; --brand-deep: #1b3628; --brand-soft: #eaefec; --brand-mist: #f4f7f5;
  --gold: #86650a; --gold-soft: #f3ede0;
  --sun: #f2c94c;          /* Forsythie / Sonnenfleck – nur dekorativ */
  --bg: #fbfcf8; --bg-alt: #f2f6ef; --surface: #ffffff; --surface-2: #f7f9f5;
  --ink: #1b2620; --ink-soft: #4b5a51; --line: #dbe4dc; --line-strong: #c3d0c6;
  --on-brand: #ffffff;
  --footer-bg: #17301f; --footer-ink: #e6eee8; --footer-soft: #b9c9bd;
  --shade-color: #1b3a2a; --shade-op: .075;
  --glow: rgba(255, 236, 170, .55);
  --shadow-sm: 0 1px 2px rgba(23, 48, 31, .06), 0 4px 14px -6px rgba(23, 48, 31, .12);
  --shadow: 0 1px 2px rgba(23, 48, 31, .05), 0 22px 48px -28px rgba(23, 48, 31, .32);
  --shadow-lg: 0 2px 4px rgba(23, 48, 31, .05), 0 36px 70px -36px rgba(23, 48, 31, .42);
  --radius: 22px; --radius-sm: 14px;
  --crown: 50% 50% 22px 22px / 30% 30% 22px 22px;
  --crown-wide: 48% 48% 22px 22px / 24% 24% 22px 22px;
  --header-h: 76px;
  --wrap: 1200px;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22, .8, .24, 1);
  color-scheme: light;
}
[data-theme=dark] {
  --sun: #e9c25a;
  --bg: #0d1511; --bg-alt: #111c16; --surface: #15211b; --surface-2: #192820;
  --ink: #e8efe9; --ink-soft: #b3c2b8; --line: #26362d; --line-strong: #34473c;
  --on-brand: #0b1510;
  --footer-bg: #122419; --footer-ink: #e2ebe4; --footer-soft: #a9baae;
  --shade-color: #f0cf7a; --shade-op: .05;
  --glow: rgba(255, 214, 130, .22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .5);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 50px -28px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 36px 70px -34px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.7 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .5s ease, color .5s ease, border-color .5s ease !important; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
picture { display: block; }
[hidden] { display: none !important; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brand-deep); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
h1, h2, h3, h4, .h3, .h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; margin: 0 0 .5em; color: var(--ink); letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.2vw, 4.25rem); line-height: 1.06; }
h2, .section-title { font-size: clamp(1.9rem, 3.6vw, 2.85rem); }
h3, .h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); }
h4, .h4 { font-size: 1.2rem; }
h1 em, h2 em, h3 em, .section-title em, .hero-title em, .cta-copy h2 em { font-style: italic; font-weight: 500; color: var(--brand); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--brand); color: var(--on-brand); padding: .7rem 1.1rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip-link:focus { top: .75rem; color: var(--on-brand); }
main:focus { outline: none; }
.container { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: calc(780px + 2 * var(--gut)); }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); }
.break { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Abschnitte */
.section { position: relative; isolation: isolate; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }
.section--alt { background: var(--bg-alt); }
.section-head { max-width: 46rem; margin: 0 auto clamp(2.2rem, 4vw, 3.4rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head .section-title { margin-bottom: .4em; }
.section-text { color: var(--ink-soft); font-size: 1.08rem; }
.section-text p:last-child { margin-bottom: 0; }
.section-head--light .section-title, .section-head--light .section-text { color: var(--footer-ink); }
.section-head--light .section-title em { color: var(--sun); }
.kicker { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; font: 700 .78rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.kicker-leaf { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 60% 0 60% 0; background: var(--gold-soft); color: var(--gold); }
.kicker-leaf .icon { width: 1rem; height: 1rem; }
.section-head--light .kicker { color: var(--sun); }
.section-head--light .kicker-leaf { background: rgba(255, 255, 255, .1); color: var(--sun); }

/* Blätterschatten: weiches Licht- und Schattenspiel, wandert langsam */
.shade { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.shade::before {
  content: ''; position: absolute; inset: -18% -12%; background: var(--shade-color); opacity: var(--shade-op);
  -webkit-mask: url('../img/leaves.webp') 0 0 / 980px auto repeat; mask: url('../img/leaves.webp') 0 0 / 980px auto repeat;
  animation: drift 46s ease-in-out infinite alternate; will-change: transform;
}
.shade--hero::before { opacity: calc(var(--shade-op) * 1.25); }
.shade--band::before { -webkit-mask-size: 1200px auto; mask-size: 1200px auto; animation-duration: 58s; }
.shade--cta::before, .shade--map::before, .shade--nav::before { -webkit-mask-size: 760px auto; mask-size: 760px auto; }
@keyframes drift { 0% { transform: translate3d(-2%, -1.5%, 0) rotate(-.6deg); } 100% { transform: translate3d(2.5%, 2%, 0) rotate(.8deg); } }

/* Allee: Baumreihe mit Laternen als obere Kante dunkler Bänder */
.allee { height: clamp(54px, 7vw, 92px); background: var(--footer-bg); -webkit-mask: url('../img/allee.svg') 0 100% / auto 100% repeat-x; mask: url('../img/allee.svg') 0 100% / auto 100% repeat-x; margin-bottom: -1px; }

/* ---------------------------------------------------------------- Buttons & Links */
.btn {
  --b: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .8rem 1.45rem;
  border: 1.5px solid var(--b); border-radius: 999px; background: var(--b); color: var(--on-brand); font: 700 1rem/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s; box-shadow: var(--shadow-sm);
}
.btn .icon { transition: transform .25s var(--ease); }
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: var(--on-brand); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover .icon { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--brand); box-shadow: none; }
.btn--ghost:hover { background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand-deep); }
[data-theme=dark] .btn--ghost:hover { color: var(--brand); border-color: var(--brand); }
.btn--sm { min-height: 44px; padding: .55rem 1.1rem; font-size: .94rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.btn-row--center { justify-content: center; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

/* Listen */
.checks { list-style: none; display: grid; gap: .7rem; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; }
.checks .icon { color: var(--brand); margin-top: .2em; }
.checks--cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; }
.checks--light { color: var(--footer-ink); }
.checks--light .icon { color: var(--sun); }
.amenities { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .9rem; }
.amenities li { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.amenities .icon { color: var(--brand); margin-top: .15em; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.chips--center { justify-content: center; }
.chips a { display: inline-block; padding: .55rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); text-decoration: none; font-weight: 600; }
.chips a:hover { border-color: var(--brand); }

/* Karten */
.card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.1rem); box-shadow: var(--shadow); }
.card--flat { box-shadow: none; background: var(--surface-2); }
.card-title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; margin-bottom: 1rem; }
.card-title .icon { color: var(--brand); width: 1.4rem; height: 1.4rem; }

/* Baumkronen-Rahmen */
.canopy { position: relative; isolation: isolate; margin: 0; }
.canopy::before { content: ''; position: absolute; inset: -14px 14px 14px -14px; border: 1.5px solid var(--gold); border-radius: var(--crown); opacity: .55; z-index: -1; transition: transform .8s var(--ease); }
.canopy::after { content: ''; position: absolute; width: 46%; aspect-ratio: 1; right: -9%; top: -6%; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 68%); z-index: -1; pointer-events: none; }
.canopy-frame { border-radius: var(--crown); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--brand-soft); }
.canopy-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.canopy:hover .canopy-frame img { transform: scale(1.03); }
.canopy--wide::before, .canopy--wide .canopy-frame { border-radius: var(--crown-wide); }
.canopy figcaption { margin-top: 1rem; font-size: .88rem; color: var(--ink-soft); text-align: center; }

/* ---------------------------------------------------------------- Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background-color .3s; }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(23, 48, 31, .45); background: var(--bg); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); max-width: calc(1320px + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.brand { display: flex; align-items: center; min-width: 0; color: var(--brand); text-decoration: none; margin-right: auto; padding: .3rem 0; }
.logo-mask { display: block; width: 196px; aspect-ratio: 5453 / 1308; background: currentColor; -webkit-mask: url('../img/logo.svg') center / contain no-repeat; mask: url('../img/logo.svg') center / contain no-repeat; }
.mark-mask { display: block; aspect-ratio: 1163 / 1213; background: currentColor; -webkit-mask: url('../img/mark.svg') center / contain no-repeat; mask: url('../img/mark.svg') center / contain no-repeat; }
.main-nav { display: none; }
.nav-list { list-style: none; display: flex; gap: .2rem; }
.nav-link { position: relative; display: block; padding: .6rem .85rem; color: var(--ink); font-weight: 600; text-decoration: none; border-radius: 999px; }
.nav-link::after { content: ''; position: absolute; left: 50%; bottom: .28rem; width: 6px; height: 6px; border-radius: 60% 0 60% 0; background: var(--gold); transform: translateX(-50%) scale(0); transition: transform .3s var(--ease); }
.nav-link:hover { color: var(--brand); }
.nav-link:hover::after, .nav-link[aria-current]::after { transform: translateX(-50%) scale(1); }
.nav-link[aria-current] { color: var(--brand); }
.header-actions { display: flex; align-items: center; gap: .5rem; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }
.icon-btn .icon { width: 1.3rem; height: 1.3rem; }
.theme-toggle .i-sun, [data-theme=dark] .theme-toggle .i-moon { display: none; }
[data-theme=dark] .theme-toggle .i-sun { display: block; }
.menu-toggle .i-close, .menu-toggle[aria-expanded=true] .i-menu { display: none; }
.menu-toggle[aria-expanded=true] .i-close { display: block; }
.header-cta { display: none; }
.status.status--header { display: none; }

/* Mobiles Menü (außerhalb des Headers, damit position:fixed sich auf den Viewport bezieht) */
.mobile-nav { position: fixed; inset: var(--header-h) 0 0; z-index: 49; display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem var(--gut) 2rem; background: var(--bg); overflow-y: auto; isolation: isolate; }
.mobile-nav-mark { position: absolute; right: -40px; bottom: 90px; width: 220px; color: var(--brand); opacity: .07; z-index: -1; }
.mobile-nav ul { list-style: none; display: grid; }
.mobile-nav li a { display: flex; align-items: center; justify-content: space-between; padding: .95rem .2rem; border-bottom: 1px solid var(--line); font: 500 1.45rem/1.2 var(--serif); color: var(--ink); text-decoration: none; }
.mobile-nav li a[aria-current] { color: var(--brand); font-style: italic; }
.mobile-nav-foot { margin-top: auto; display: grid; gap: .5rem; }
.mobile-nav-foot .btn-row { margin-top: .5rem; }
.menu-open { overflow: hidden; }

/* Live-Status */
.status { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-weight: 600; font-size: .95rem; color: var(--ink); }
.status-dot { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: var(--ink-soft); flex: none; }
.status[data-state=open] .status-dot { background: #2f8a54; }
.status[data-state=soon] .status-dot { background: #b7791f; }
.status[data-state=closed] .status-dot { background: #b4473c; }
.status[data-state=open] .status-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #2f8a54; opacity: 0; animation: pulse 2.4s ease-out infinite; }
[data-theme=dark] .status[data-state=open] .status-dot, [data-theme=dark] .status[data-state=open] .status-dot::after { background-color: #5fc98a; border-color: #5fc98a; }
[data-theme=dark] .status[data-state=open] .status-dot::after { background: none; }
[data-theme=dark] .status[data-state=closed] .status-dot { background: #e58a7f; }
[data-theme=dark] .status[data-state=soon] .status-dot { background: #e7b35a; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* ---------------------------------------------------------------- Hero */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 560px; height: min(calc(100svh - var(--header-h)), 860px); overflow: hidden; background: var(--brand-soft); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-pic, .hero-pic img { width: 100%; height: 100%; }
.hero-pic img { object-fit: cover; object-position: 62% 55%; transform-origin: 70% 40%; animation: heroIn 2.4s var(--ease) both; }
@keyframes heroIn { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 72%, var(--bg) 100%), linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 90%, transparent) 30%, color-mix(in srgb, var(--bg) 55%, transparent) 50%, transparent 70%); }
.hero::after { content: ''; position: absolute; z-index: -1; width: 70vmax; aspect-ratio: 1; right: -18vmax; top: -34vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 243, 200, .55), rgba(255, 243, 200, 0) 62%); mix-blend-mode: soft-light; animation: sun 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes sun { from { opacity: .55; transform: translate3d(0, 0, 0) scale(1); } to { opacity: 1; transform: translate3d(-3%, 2%, 0) scale(1.06); } }
.shade--hero-photo { z-index: -1; }
.shade--hero-photo::before { --shade-op: .06; }
[data-theme=dark] .hero-pic img { filter: brightness(.62) saturate(.9); }
[data-theme=dark] .hero::after { background: radial-gradient(circle, rgba(255, 210, 120, .35), rgba(255, 210, 120, 0) 60%); mix-blend-mode: screen; }
.hero-inner { position: relative; padding-block: 3rem 6.5rem; }
.hero-copy { max-width: 40rem; }
.hero-title { margin-bottom: .35em; font-size: clamp(2.3rem, 4.5vw, 3.85rem); }
.hero-title em { white-space: nowrap; }
.hero-lead { font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); max-width: 32rem; }
.hero-actions { margin-top: 1.8rem; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.6rem; }
.hero-meta .status { padding: .5rem .95rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.hero-phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.hero-phone .icon { color: var(--brand); }
.hero-phone:hover { color: var(--brand); }
.hero--plain { background: var(--bg-alt); }

/* ---------------------------------------------------------------- Promenade (Schnellzugriff) */
.promenade-band { position: relative; z-index: 2; margin-top: -4.5rem; }
.promenade { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; counter-reset: st; }
.promenade::before { content: ''; position: absolute; left: 6%; right: 6%; top: 2.85rem; height: 0; border-top: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent); z-index: -1; }
.station { position: relative; display: flex; flex-direction: column; gap: .9rem; padding: 1.35rem 1.35rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 26px 26px var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s; }
.station:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.station-lamp { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.station-lamp::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: 0; transition: opacity .4s; z-index: -1; }
.station:hover .station-lamp::after { opacity: 1; }
.station-lamp .icon { width: 1.4rem; height: 1.4rem; }
.station-body { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.station-title { font: 600 1.18rem/1.25 var(--serif); color: var(--ink); }
.station-text { color: var(--ink-soft); font-size: .96rem; line-height: 1.5; }
.station-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .4rem; font-weight: 700; text-decoration: none; font-size: .95rem; }
.station-link .icon { transition: transform .25s var(--ease); }
.station:hover .station-link .icon { transform: translateX(3px); }
.stretched::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.station-num { position: relative; z-index: 1; color: var(--brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.station .status { font-size: .95rem; }
.station--duty .station-lamp { background: var(--gold-soft); color: var(--gold); }

/* ---------------------------------------------------------------- Willkommen */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.welcome-media { max-width: 520px; margin-inline: auto; width: 100%; }
.welcome-copy .section-head { margin-bottom: 1.1rem; }
.welcome-copy .section-text p:first-child { font-size: 1.15rem; color: var(--ink); }
.signature { display: flex; flex-direction: column; margin-top: 1.4rem; }
.sig-name { font: italic 500 1.35rem/1.3 var(--serif); color: var(--brand); }
.sig-role { font-size: .92rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Rezeptübermittlung: Schritte am Weg */
.rx-band { background: var(--brand-mist); }
.rx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.rx-note { display: flex; gap: .7rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: .98rem; }
.rx-note .icon { color: var(--gold); margin-top: .15em; }
.steps { list-style: none; position: relative; display: grid; gap: 1rem; counter-reset: s; }
.steps::before { content: ''; position: absolute; left: 1.7rem; top: 1.8rem; bottom: 1.8rem; border-left: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent); }
.step { position: relative; display: flex; align-items: center; gap: 1.2rem; padding: 1.05rem 1.3rem 1.05rem .55rem; border-radius: 999px 28px 28px 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.step-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; margin-left: .25rem; border-radius: 50%; background: var(--brand); color: var(--on-brand); font: 600 1.15rem/1 var(--serif); box-shadow: 0 0 0 6px var(--surface); }
.step-text { font-size: 1.06rem; font-weight: 600; }
.steps--band .step:nth-child(2) { margin-left: clamp(0rem, 3vw, 2.2rem); }
.steps--band .step:nth-child(3) { margin-left: clamp(0rem, 6vw, 4.4rem); }

/* ---------------------------------------------------------------- Leistungen */
.svc-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; }
.svc-link { position: relative; display: flex; flex-direction: column; gap: .55rem; height: 100%; padding: 1.8rem 1.6rem 1.6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; overflow: hidden; isolation: isolate; }
.svc-link::after { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; top: -110px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 70%); opacity: 0; transition: opacity .5s; z-index: -1; }
.svc-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); color: var(--ink); }
.svc-link:hover::after { opacity: 1; }
.svc-ic { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 62% 0 62% 0; background: var(--brand-soft); color: var(--brand); margin-bottom: .5rem; transition: border-radius .5s var(--ease), background-color .3s; flex: none; }
.svc-ic .icon { width: 1.6rem; height: 1.6rem; }
.svc-link:hover .svc-ic { border-radius: 0 62% 0 62%; }
.svc-title { font: 500 1.35rem/1.25 var(--serif); }
.svc-text { color: var(--ink-soft); line-height: 1.6; }
.svc-go { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .7rem; font-weight: 700; color: var(--brand); font-size: .95rem; }
.svc-go .icon { transition: transform .25s var(--ease); }
.svc-link:hover .svc-go .icon { transform: translateX(4px); }
.services .btn-row { margin-top: 2.6rem; }
.svc-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr)); gap: 1.2rem; }
.svc-detail { display: flex; gap: 1.3rem; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-h) + 20px); }
.svc-detail h3 { margin-bottom: .45em; }
.svc-detail-body > :last-child { margin-bottom: 0; }
.svc-detail-body .checks { margin-bottom: 1rem; }
.advice-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; align-items: start; }
.offer-media { max-width: 360px; justify-self: center; }

/* ---------------------------------------------------------------- Lage am Glacis (dunkles Band mit Allee) */
.place { padding-block: 0; background: none; color: var(--footer-ink); }
.allee--place { position: relative; }
.place-body { position: relative; isolation: isolate; background: var(--footer-bg); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem); overflow: hidden; }
.place-body::before { content: ''; position: absolute; width: 60vmax; aspect-ratio: 1; left: -20vmax; bottom: -30vmax; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 76, .14), transparent 62%); z-index: -1; }
.place-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.place .section-text a { color: var(--sun); }
.place-media .canopy-frame { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.place-media::before { border-color: var(--sun); opacity: .45; }
.place-media figcaption { color: var(--footer-soft); }

/* ---------------------------------------------------------------- Team */
.team-photo { margin: 0 auto 2.6rem; max-width: 1160px; }
.team-photo-frame { border-radius: 40% 40% 22px 22px / 13% 13% 22px 22px; overflow: hidden; box-shadow: var(--shadow-lg); }
.team-photo-frame img { width: 100%; }
.team-photo figcaption { margin-top: .9rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.faces { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 1.4rem .8rem; max-width: 1100px; margin-inline: auto; }
.face { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.face .pic, .face .member-initials { width: 92px; height: 92px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5.5px color-mix(in srgb, var(--gold) 55%, transparent), var(--shadow-sm); transition: transform .4s var(--ease); }
.face .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.face:hover .pic { transform: translateY(-4px) scale(1.04); }
.face-name { font-size: .84rem; line-height: 1.35; color: var(--ink-soft); }
.member-initials { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font: 600 1.6rem var(--serif); }
.team-teaser .btn-row { margin-top: 2.4rem; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 2.4rem 1.6rem; }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1020px; margin-inline: auto; gap: 3rem 2.4rem; } }
.member { display: flex; flex-direction: column; gap: 1.1rem; }
.member-photo { position: relative; isolation: isolate; }
.member-photo .pic { border-radius: var(--crown); overflow: hidden; aspect-ratio: 3 / 4; box-shadow: var(--shadow); background: var(--brand-soft); }
.member-photo .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.member:hover .member-photo .pic img { transform: scale(1.04); }
.member-photo::before { content: ''; position: absolute; inset: -10px 10px 10px -10px; border: 1.5px solid var(--gold); border-radius: var(--crown); opacity: .4; z-index: -1; }
.member-photo .member-initials { aspect-ratio: 3 / 4; border-radius: var(--crown); font-size: 2.6rem; }
.member-name { font-size: 1.3rem; margin-bottom: .2rem; }
.member-role { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.team-note { margin: 2.8rem auto 0; max-width: 46rem; }
.group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }

/* ---------------------------------------------------------------- Bewertungen */
.reviews { background: var(--bg-alt); }
.reviews-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.reviews-head .section-head { margin-bottom: 0; }
.rating-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; padding: 1.3rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); justify-self: start; }
.rp-score { margin: 0; display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.rp-num { font: 500 3.2rem/1 var(--serif); color: var(--ink); }
.rp-of { color: var(--ink-soft); font-weight: 600; }
.rp-side p { margin: .25rem 0 0; }
.rp-meta { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-soft); }
.rp-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .92rem; }
.stars { display: inline-flex; gap: .1rem; color: #c58b06; }
[data-theme=dark] .stars { color: var(--sun); }
.stars .icon { width: 1.05rem; height: 1.05rem; }
.stars .icon.off { color: var(--line-strong); }
.stars--lg .icon { width: 1.35rem; height: 1.35rem; }
.rv-grid { list-style: none; columns: 3 17rem; column-gap: 1.2rem; }
.rv-grid > .review { break-inside: avoid; margin-bottom: 1.2rem; }
.review--long blockquote { font-size: 1.15rem; }
.review figure { margin: 0; display: flex; flex-direction: column; gap: 1rem; height: 100%; padding: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 28px 28px var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-sm); }
.review-top { display: flex; justify-content: space-between; align-items: center; }
.review-q { color: var(--gold); opacity: .55; width: 1.7rem; height: 1.7rem; }
.review blockquote { margin: 0; font: 400 1.05rem/1.6 var(--serif); color: var(--ink); }
.review blockquote p:last-child { margin-bottom: 0; }
.review figcaption { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 600 1.05rem var(--serif); flex: none; }
.review-who { display: flex; flex-direction: column; line-height: 1.3; }
.review-who small { color: var(--ink-soft); font-size: .85rem; }
.rv-more { display: none; margin-top: 1.2rem; }
.rv-more.is-open { display: block; }
.rv-actions { text-align: center; margin-top: 2rem; }

/* ---------------------------------------------------------------- FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
.faq-list { display: grid; gap: .8rem; }
.faq-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: box-shadow .3s, border-color .3s; }
.faq-item[open] { box-shadow: var(--shadow); border-color: var(--line-strong); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font: 600 1.08rem/1.4 var(--sans); letter-spacing: 0; color: var(--ink); }
.faq-icon { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand-soft); flex: none; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: .8rem; height: 2px; background: var(--brand); transform: translate(-50%, -50%); transition: transform .3s var(--ease); }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 1.35rem 1.25rem; color: var(--ink-soft); }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Besuch, Öffnungszeiten, Kontakt, Karte */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.hours { margin: 0 0 1rem; display: grid; }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem .2rem; border-bottom: 1px dashed var(--line-strong); }
.hours-row:last-child { border-bottom: 0; }
.hours dt { font-weight: 700; }
.hours dt abbr { text-decoration: none; }
.hours dd { margin: 0; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.hours .closed { color: var(--ink-soft); }
.hours-row.is-today { background: var(--brand-soft); border-radius: 10px; padding-inline: .7rem; border-bottom-color: transparent; }
.hours-row.is-today dt::after { content: ' · heute'; font-weight: 600; color: var(--brand); font-size: .85em; }
.contact-list { list-style: none; display: grid; gap: 1.05rem; }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-list .icon { color: var(--brand); margin-top: .25em; }
.contact-list small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); font-weight: 700; }
.contact-list a { font-weight: 600; }
.visit-map, .map-wide { min-height: 380px; }
.embed { position: relative; height: 100%; min-height: inherit; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--brand-mist); isolation: isolate; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-consent { position: relative; display: grid; place-items: center; height: 100%; min-height: inherit; padding: 1.6rem; text-align: center; }
.embed-consent .inner { max-width: 26rem; }
.embed-pin { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand); color: var(--on-brand); margin-bottom: 1rem; }
.embed-pin .icon { transform: rotate(45deg); width: 1.5rem; height: 1.5rem; }
.embed-title { font: 600 1.2rem/1.3 var(--serif); margin-bottom: .6rem; }
.embed-consent p { font-size: .92rem; color: var(--ink-soft); }
.embed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1rem 0 .8rem; }
.remember { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.remember input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); }
.duty { display: flex; gap: 1.2rem; align-items: flex-start; margin-top: 1.4rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); background: var(--footer-bg); color: var(--footer-ink); position: relative; overflow: hidden; isolation: isolate; }
.duty::after { content: ''; position: absolute; width: 260px; height: 260px; left: -90px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 76, .28), transparent 65%); z-index: -1; }
.duty-lamp { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: rgba(242, 201, 76, .16); color: var(--sun); flex: none; }
.duty-lamp .icon { width: 1.6rem; height: 1.6rem; }
.duty-title { font: 600 1.25rem/1.3 var(--serif); margin-bottom: .3rem; }
.duty p { margin-bottom: .5rem; }
.duty-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .4rem 0 0 !important; }
:where(.duty, .place, .site-footer) a { color: var(--sun); }
:where(.duty, .place, .site-footer) a:hover { color: #fff; }

/* ---------------------------------------------------------------- Abschluss-Band („Lichtung“) */
.cta-band { padding-block: 0 clamp(4rem, 8vw, 6.5rem); }
.cta-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; align-items: center; padding: clamp(2rem, 5vw, 3.6rem); border-radius: 40% 40% var(--radius) var(--radius) / 120px 120px var(--radius) var(--radius); background: var(--brand-mist); border: 1px solid var(--line); }
.cta-mark { position: absolute; right: clamp(-60px, -3vw, -20px); bottom: -40px; width: clamp(180px, 22vw, 280px); color: var(--brand); opacity: .07; z-index: -1; }
.cta-copy h2 { font-size: clamp(1.8rem, 3.3vw, 2.6rem); margin-bottom: .35em; }
.cta-copy p { color: var(--ink-soft); margin: 0; max-width: 34rem; }
.cta-actions { display: grid; gap: .3rem; }
.cta-actions .btn-row { margin-top: .9rem; }

/* ---------------------------------------------------------------- Footer */
.site-footer { position: relative; color: var(--footer-ink); }
.footer-body { background: var(--footer-bg); padding-block: clamp(2.6rem, 5vw, 3.8rem) 1.6rem; }
.footer-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; padding-bottom: 2rem; margin-bottom: 2.2rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer-logo { display: block; color: #f3f7f4; }
.footer-logo .logo-mask { width: 240px; }
.footer-claim { margin: 0; max-width: 30rem; font: italic 400 1.1rem/1.5 var(--serif); color: var(--footer-soft); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 2.2rem; }
.footer-title { font: 700 .8rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sun); margin-bottom: 1rem; }
.footer-links { list-style: none; display: grid; gap: .6rem; }
.footer-links a { color: var(--footer-ink); text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact .icon { color: var(--sun); margin-top: .2em; }
.footer-text { margin-top: 1.2rem; color: var(--footer-soft); font-size: .95rem; }
.hours--footer .hours-row { border-bottom-color: rgba(255, 255, 255, .14); padding-block: .45rem; }
.hours--footer .hours-row.is-today { background: rgba(255, 255, 255, .08); }
.hours--footer .hours-row.is-today dt::after { color: var(--sun); }
.hours--footer .closed { color: var(--footer-soft); }
.status--footer { color: var(--footer-ink); }
.social { list-style: none; display: flex; gap: .6rem; margin-top: 1.2rem; }
.social-link { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: var(--footer-ink) !important; }
.social-link:hover { border-color: var(--sun); color: var(--sun) !important; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 2rem; margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: var(--footer-soft); }
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; }
.footer-bottom a, .footer-bottom .linklike { color: var(--footer-soft); }
.footer-bottom a:hover, .footer-bottom .linklike:hover { color: #fff; }

/* Mobile Schnellkontakt-Leiste */
.mobile-cta { position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .55rem; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); transform: translateY(140%); transition: transform .4s var(--ease); }
.mobile-cta.is-visible { transform: none; }
.mobile-cta .btn { min-height: 46px; padding: .55rem .8rem; font-size: .95rem; }

/* Datenschutz-Dialog */
.privacy-dialog { max-width: min(30rem, calc(100vw - 2rem)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.privacy-dialog::backdrop { background: rgba(10, 20, 14, .55); }
.privacy-dialog p { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Seitenkopf der Unterseiten */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.6rem, 6vw, 4.8rem) clamp(3.2rem, 7vw, 5.5rem); background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.page-hero::after { content: ''; position: absolute; width: 60vmax; aspect-ratio: 1; right: -22vmax; top: -36vmax; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 62%); z-index: -1; pointer-events: none; }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.6rem; align-items: center; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.page-hero .lead { max-width: 40rem; }
.page-hero-media { max-width: 460px; width: 100%; justify-self: center; }
.page-hero--center { text-align: center; }
.page-hero--center .lead { margin-inline: auto; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.4rem; font-size: .9rem; color: var(--ink-soft); }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: .35rem; color: var(--gold); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--brand); }
.err-code { font: italic 500 clamp(5rem, 14vw, 9rem)/1 var(--serif); color: var(--brand); opacity: .25; margin-bottom: .2rem; }
.hint-icon { display: inline-grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 62% 0 62% 0; background: var(--brand); color: var(--on-brand); margin-bottom: 1.4rem; }
.hint-icon .icon { width: 2rem; height: 2rem; }

/* ---------------------------------------------------------------- Fließtext (Impressum, Datenschutz …) */
.prose h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-top: 2.2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3rem; margin-bottom: 1em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--brand); }
.legal { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Formulare */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem 1.2rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.field label, .field .label { font-weight: 700; font-size: .95rem; }
.req { color: #b4473c; }
[data-theme=dark] .req { color: #f0a197; }
.opt { font-weight: 400; color: var(--ink-soft); }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink);
  font: 400 1rem/1.4 var(--sans); transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.field input[type=file] { padding: .6rem; cursor: pointer; }
.field input[type=file]::file-selector-button { margin-right: .8rem; padding: .5rem 1rem; border: 0; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font: 700 .92rem var(--sans); cursor: pointer; }
.field [aria-invalid=true] { border-color: #b4473c !important; }
.field-hint { font-size: .86rem; color: var(--ink-soft); }
.field-error { font-size: .88rem; font-weight: 700; color: #a23a30; }
[data-theme=dark] .field-error { color: #f0a197; }
.field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--check { flex-direction: row; align-items: flex-start; gap: .7rem; }
.field--check input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; flex: none; accent-color: var(--brand); }
.field--check label { font-weight: 400; font-size: .95rem; }
.radios { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.radios label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; min-height: 44px; cursor: pointer; }
.radios input { width: 1.2rem; height: 1.2rem; accent-color: var(--brand); }
.form-hint { font-size: .88rem; color: var(--ink-soft); margin: 1.2rem 0; }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status:empty { display: none; }
.form-status.is-ok { padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--ink); }
.form-status.is-error { padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: #fbe9e7; color: #7d241b; }
[data-theme=dark] .form-status.is-error { background: #3a1d1a; color: #f6c3bc; }
.form .btn[disabled] { opacity: .6; cursor: progress; }

.contact-grid, .rx-page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.contact-side, .rx-side { display: grid; gap: 1.4rem; }
.contact-side h2, .rx-side h2 { margin-bottom: 0; }
.rx-side .steps { gap: .8rem; }
.rx-side .step { padding-block: .85rem; }
.rx-side .step-text { font-size: 1rem; }
.rx-alert { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 0; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--ink); font-weight: 600; }
.rx-alert .icon { color: var(--gold); margin-top: .15em; }
.map-wide { height: 440px; }

/* Notdienst */
.calls { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.2rem; }
.call { padding: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 28px 28px var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-sm); }
.call-ic { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 62% 0 62% 0; background: var(--brand-soft); color: var(--brand); margin-bottom: 1rem; }
.call-ic .icon { width: 1.5rem; height: 1.5rem; }
.call-title { margin-bottom: .4rem; }
.call-num { margin-bottom: .6rem; }
.call-num a { font: 500 2.6rem/1 var(--serif); color: var(--brand); text-decoration: none; }
.call-num a:hover { text-decoration: underline; }
.pharm-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.pharm { display: flex; gap: 1rem; padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pharm h3 { font-size: 1.1rem; }
.pharm-a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font: 600 1.2rem var(--serif); flex: none; }
.pharm-tag { display: inline-block; font: 700 .7rem var(--sans); text-transform: uppercase; letter-spacing: .1em; padding: .2rem .5rem; border-radius: 999px; background: var(--gold-soft); color: var(--gold); }

/* Aktuelles, Zahlen */
.news { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.2rem; }
.news-card { padding: 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.news-meta { display: flex; align-items: center; gap: .5rem; color: var(--gold); font-weight: 700; font-size: .9rem; }
.facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1.2rem; text-align: center; }
.fact strong { display: block; font: 500 2.8rem/1.1 var(--serif); color: var(--brand); }
.fact-label { color: var(--ink-soft); }

/* Sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 2rem; }
.sitemap-list { list-style: none; display: grid; gap: .5rem; }
.sitemap-list a { font-weight: 600; }

/* ---------------------------------------------------------------- Einblendungen */
.js .reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .canopy.reveal .canopy-frame { clip-path: none; }
.js .canopy.reveal::before { transform: translate(14px, -14px); }
.js .canopy.reveal.is-visible::before { transform: none; }
.d-1 { transition-delay: .08s !important; }
.d-2 { transition-delay: .16s !important; }
.d-3 { transition-delay: .24s !important; }
.d-4 { transition-delay: .32s !important; }

/* ---------------------------------------------------------------- Breakpoints */
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}
@media (min-width: 720px) {
  .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-map { grid-column: 1 / -1; }
  .reviews-head { grid-template-columns: minmax(0, 1fr) auto; }
  .rating-panel { justify-self: end; }
  .cta-card { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .welcome-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .rx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .place-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .group-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .section-head--sticky { position: sticky; top: calc(var(--header-h) + 2rem); }
  .advice-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .contact-grid, .rx-page-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 3rem; }
  .page-hero--img .page-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (min-width: 1100px) {
  .main-nav { display: block; }
  .menu-toggle { display: none; }
  .header-cta { display: inline-flex; }
  .mobile-nav { display: none !important; }
  .visit-grid { grid-template-columns: minmax(0, .9fr) minmax(0, .9fr) minmax(0, 1.2fr); }
  .visit-map { grid-column: auto; }
  .mobile-cta { display: none; }
}
@media (min-width: 1280px) { .status.status--header { display: inline-flex; font-size: .88rem; } }
@media (max-width: 1099px) {
  .promenade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .promenade::before { display: none; }
  body { padding-bottom: 0; }
}
@media (max-width: 719px) {
  :root { --header-h: 64px; }
  .logo-mask { width: 160px; }
  .footer-logo .logo-mask { width: 210px; }
  .promenade-band { margin-top: -2.5rem; }
  .promenade { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .station { flex-direction: row; align-items: flex-start; padding: 1.1rem; }
  .station-lamp { width: 2.6rem; height: 2.6rem; }
  .footer-body { padding-bottom: 5.5rem; }
  .steps--band .step:nth-child(n) { margin-left: 0; }
  .rating-panel { width: 100%; }
  .cta-card { border-radius: 30% 30% var(--radius) var(--radius) / 70px 70px var(--radius) var(--radius); }
  .btn-row .btn { flex: 1 1 auto; }
  .duty { flex-direction: column; gap: .9rem; }
  .canopy::before, .member-photo::before { inset: -8px 8px 8px -8px; }
}
@media (max-width: 380px) {
  .header-inner { gap: .5rem; }
  .logo-mask { width: 146px; }
  .header-actions { gap: .35rem; }
  .icon-btn { width: 42px; height: 42px; }
}
/* Hochformat (Smartphone, Tablet hoch, responsivly-Laptop 1024 × 1200): eigener Bildausschnitt, Text unten auf hellem Verlauf */
@media (max-aspect-ratio: 4/5) {
  .hero { align-items: flex-end; height: auto; min-height: calc(100svh - var(--header-h)); max-height: none; }
  .hero-pic img { object-position: 50% 30%; transform-origin: 50% 30%; }
  .hero::before { background: linear-gradient(180deg, transparent 0%, transparent 20%, color-mix(in srgb, var(--bg) 72%, transparent) 33%, color-mix(in srgb, var(--bg) 94%, transparent) 41%, var(--bg) 48%, var(--bg) 100%); }
  .hero-inner { padding-block: 41svh 5rem; }
  .hero-copy { max-width: 40rem; }
}
@media (max-aspect-ratio: 4/5) and (min-width: 720px) {
  .hero-inner { padding-block: 46svh 7rem; }
}

/* ---------------------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .js .reveal { opacity: 1; transform: none; }
  .shade::before, .hero::after { animation: none !important; }
}
@media print {
  .site-header, .mobile-nav, .mobile-cta, .shade, .allee, .embed, .privacy-dialog, .hero-media { display: none !important; }
  body { background: #fff; color: #000; }
}