/* =========================================================================
   Praxis für Ernährungsberatung Dr. Uta Peiler – Stylesheet (Phase 3)
   Prinzip: „Refined minimalism" – Petrol führt, Beere/Lila als EINZIGER
   Akzent. Hierarchie statt gleichförmiger Kästchen: Abschnittsrhythmus über
   Weißraum + wenige getönte Full-Bleed-Flächen. Karten nur in echten Grids
   (Leistungen, News), dort einheitlich & dezent.
   ========================================================================= */

/* 1) Fonts – selbst gehostet (DSGVO, kein Google-CDN) -------------------- */
@font-face { font-family:"Yanone Kaffeesatz"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/yanone-kaffeesatz-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Yanone Kaffeesatz"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/yanone-kaffeesatz-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

/* 2) Design-Tokens ------------------------------------------------------- */
:root {
  /* Primär: Petrol (führt) */
  --brand-petrol: #1b6767;
  --petrol-700:   #124f4f;
  --petrol-900:   #0b3a3a;
  --ink-petrol:   #153f3f;

  /* Akzent: Beere/Lila (aus Logo-Magenta abgeleitet, vertieft) */
  --brand-beere:  #9a1f60;   /* AA 7.7 auf Weiß */
  --beere-700:    #7f1850;   /* Hover */

  /* Neutrale Töne */
  --ink:      #1f2a2a;
  --ink-soft: #52605f;
  --bg:       #ffffff;
  --surface:  #eef4f3;       /* zarte Petrol-Tönung (Full-Bleed) */
  --tint-beere:#f9edf3;      /* zarte Beeren-Tönung (Full-Bleed) */
  --cream:    #faf7f5;       /* warme neutrale Hero-Fläche */
  --border:   #dde7e5;

  /* Typografie */
  --font-head: "Yanone Kaffeesatz", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing-Skala */
  --space-2xs:.25rem; --space-xs:.5rem; --space-sm:.75rem; --space-md:1rem;
  --space-lg:1.5rem; --space-xl:2rem; --space-2xl:3rem;
  --space-3xl: clamp(3.5rem, 7vw, 6.5rem);   /* Section-Abstand: großzügiger */

  /* Maße */
  --maxw: 72rem; --maxw-narrow: 44rem;
  --pad: clamp(1rem, 4vw, 2rem);
  --radius: 14px; --radius-sm: 8px; --radius-lg: 26px;
  --shadow-sm: 0 1px 3px rgba(11,58,58,.07);
  --shadow: 0 10px 30px rgba(11,58,58,.09);
  --shadow-lg: 0 24px 60px rgba(11,58,58,.14);
}

/* 3) Reset / Basis ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); line-height: 1.7;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100svh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; display: block; }
.site-footer { flex-shrink: 0; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.08; color: var(--petrol-900); margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.6rem, 1.7rem + 4vw, 5rem); }   /* Hero-Skala kräftiger */
h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.7rem); }
h4 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.5rem); }
h5 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.35rem); }
h6 { font-size: 1.15rem; letter-spacing: .02em; }
p { margin: 0 0 1.1em; }
a { color: var(--petrol-700); text-decoration-color: var(--brand-beere); text-underline-offset: .15em; }
a:hover { color: var(--beere-700); }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--brand-beere); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--tint-beere); color: var(--petrol-900); }

/* 4) Layout-Utilities ---------------------------------------------------- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.container--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--space-3xl); }
.section--surface { background: var(--surface); }
.section--beere { background: var(--tint-beere); }
.section__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.section__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: .92rem; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-beere); margin: 0 0 .75rem; }
.section__lead { font-size: 1.2rem; color: var(--ink-soft); margin: 0; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--petrol-900); color:#fff; padding:.6rem 1rem; z-index:100; border-radius:0 0 var(--radius-sm) 0; }
.skip-link:focus { left:0; top:0; }

/* Staggered Reveal beim Laden (nur ein orchestrierter Load-Moment) */
@keyframes rise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.reveal > * { opacity:0; animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal > *:nth-child(1){ animation-delay:.05s; }
.reveal > *:nth-child(2){ animation-delay:.15s; }
.reveal > *:nth-child(3){ animation-delay:.25s; }
.reveal > *:nth-child(4){ animation-delay:.35s; }
.reveal > *:nth-child(5){ animation-delay:.45s; }
.reveal--art { opacity:0; animation: rise .9s .35s cubic-bezier(.2,.7,.2,1) forwards; }

/* 5) Buttons ------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:700; font-size:1.05rem; line-height:1; text-decoration:none; cursor:pointer; padding:.9rem 1.6rem; border-radius:999px; border:2px solid transparent; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--brand-beere); color:#fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--beere-700); color:#fff; box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--petrol-900); border-color: var(--border); }
.btn--ghost:hover { background: #fff; color: var(--petrol-900); border-color: var(--brand-petrol); }
.btn--on-dark { background:#fff; color: var(--petrol-900); }
.btn--on-dark:hover { background: var(--tint-beere); color: var(--petrol-900); }
.btn--outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--outline-light:hover { background:#fff; color: var(--petrol-900); }
.btn--lg { font-size:1.15rem; padding:1.05rem 2rem; }

/* 6) Header / Navigation ------------------------------------------------- */
.site-header { background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(8px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.75rem; }
.site-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.site-brand__logo { height:52px; width:auto; }
@media (max-width:30rem){ .site-brand__logo { height:44px; } .site-brand__name { font-size:1.3rem; } }
.site-brand__text { display:flex; flex-direction:column; line-height:1; }
.site-brand__name { font-family:var(--font-head); font-weight:700; font-size:1.55rem; color:var(--petrol-900); }
.site-brand__sub { font-size:.82rem; color:var(--brand-beere); letter-spacing:.02em; }
.nav-toggle { display:inline-flex; align-items:center; gap:.5rem; background:var(--brand-petrol); color:#fff; border:0; padding:.55rem .9rem; border-radius:999px; font:inherit; font-weight:700; cursor:pointer; }
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after { content:""; display:block; width:18px; height:2px; background:#fff; position:relative; }
.nav-toggle__bar::before { position:absolute; top:-6px; } .nav-toggle__bar::after { position:absolute; top:6px; }
.primary-nav__list { list-style:none; margin:0; padding:0; }
.primary-nav__item > a { display:block; text-decoration:none; font-weight:600; color:var(--ink); padding:.6rem .75rem; border-radius:8px; }
.primary-nav__item > a:hover, .primary-nav__item > a[aria-current="page"] { color:var(--petrol-900); background:var(--surface); }
.primary-nav__sub { list-style:none; margin:0; padding:0; }
.primary-nav__sub a { display:block; text-decoration:none; color:var(--ink-soft); padding:.45rem .75rem; }
.primary-nav__sub a:hover, .primary-nav__sub a[aria-current="page"] { color:var(--petrol-900); }
@media (max-width: 62rem) {
  .primary-nav { display:none; position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1px solid var(--border); box-shadow:var(--shadow); padding:.5rem var(--pad) 1.25rem; max-height:80vh; overflow-y:auto; }
  .primary-nav.is-open { display:block; }
  .primary-nav__item { border-top:1px solid var(--border); }
  .primary-nav__sub a { padding-left:1.5rem; }
}
@media (min-width: 62.001rem) {
  .nav-toggle { display:none; }
  .primary-nav { display:block !important; }
  .primary-nav__list { display:flex; gap:.15rem; align-items:center; }
  .primary-nav__item { position:relative; }
  .primary-nav__item.has-children > a::after { content:" ▾"; font-size:.7em; color:var(--brand-beere); }
  .primary-nav__sub { position:absolute; top:100%; left:0; min-width:16rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:.4rem; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s, transform .15s; z-index:40; }
  .primary-nav__item:hover > .primary-nav__sub, .primary-nav__item:focus-within > .primary-nav__sub { opacity:1; visibility:visible; transform:translateY(0); }
  .primary-nav__sub a { border-radius:6px; }
  .primary-nav__sub a:hover { background:var(--surface); }
}

/* 7) Hero (Höhepunkt 1) -------------------------------------------------- */
.hero { position:relative; overflow:hidden; isolation:isolate; background:
    radial-gradient(52rem 32rem at 88% -8%, rgba(27,103,103,.16), transparent 60%),
    radial-gradient(46rem 30rem at 6% 10%, rgba(154,31,96,.12), transparent 60%),
    radial-gradient(40rem 30rem at 80% 108%, rgba(154,31,96,.08), transparent 60%),
    var(--cream); }
/* weiche organische Form als Atmosphäre (rein CSS) */
.hero::before { content:""; position:absolute; z-index:-1; width:44rem; height:44rem; right:-12rem; top:-14rem;
  background: radial-gradient(closest-side, rgba(27,103,103,.10), transparent);
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%; filter: blur(4px); }
.hero__inner { display:grid; gap:var(--space-2xl); align-items:center; padding-block: clamp(3rem,7vw,6rem); }
.hero__eyebrow { font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-beere); margin:0 0 1.1rem; }
.hero__title { margin:0 0 1.1rem; font-size: clamp(2.8rem, 1.6rem + 5vw, 5.5rem); line-height:1.02; }
.hero__title .accent { color:var(--brand-petrol); }
.hero__lead { font-size:1.3rem; color:var(--ink-soft); max-width:34rem; margin:0 0 2rem; }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__phone { font-weight:700; color:var(--petrol-900); text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.hero__phone:hover { color:var(--beere-700); }
.hero__art { position:relative; display:flex; justify-content:center; }
.hero__art img { width:100%; max-width:30rem; filter: drop-shadow(0 16px 34px rgba(11,58,58,.14)); }
@media (max-width:52rem) { .hero__art { display:none; } }
@media (min-width:52rem) { .hero__inner { grid-template-columns: 1.08fr .92fr; } }

/* 8) Trust-Punkte in „Über mich" – ohne Kästchen, ruhige Reihe ----------- */
.usps { display:grid; gap:var(--space-lg) var(--space-xl); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); list-style:none; margin:0; padding:0; }
.usp { display:flex; gap:.85rem; align-items:flex-start; }
.usp__icon { flex:0 0 auto; width:2.75rem; height:2.75rem; border-radius:50%; display:grid; place-items:center; background:#fff; border:1px solid var(--border); color:var(--brand-petrol); box-shadow:var(--shadow-sm); }
.usp__icon svg { width:1.5rem; height:1.5rem; }
.usp__title { font-family:var(--font-body); font-weight:700; font-size:1.02rem; color:var(--petrol-900); margin:0 0 .1rem; line-height:1.25; }
.usp__text { font-size:.94rem; color:var(--ink-soft); margin:0; }

/* 9) Leistungen (Karten – einheitlich & dezent) -------------------------- */
.cards { display:grid; gap:var(--space-lg); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); list-style:none; margin:0; padding:0; }
.card { position:relative; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cdddd9; }
.card__title { margin:0 0 .5rem; font-size:1.45rem; color:var(--petrol-900); }
.card__text { margin:0 0 1rem; color:var(--ink-soft); font-size:1rem; flex:1; }
.card__link { margin-top:auto; font-weight:700; text-decoration:none; color:var(--brand-beere); display:inline-flex; align-items:center; gap:.35rem; }
.card__link::after { content:"→"; transition:transform .18s ease; }
.card:hover .card__link::after { transform:translateX(3px); }

/* 10) Über-mich ---------------------------------------------------------- */
.about { display:grid; gap:var(--space-2xl); align-items:center; }
@media (min-width:52rem){ .about { grid-template-columns:.85fr 1.15fr; } }
.about__figure { margin:0; }
/* weicher Formzuschnitt: großzügig gerundetes Portrait mit ruhigem Schatten */
.about__figure img, .about__ph { border-radius:var(--radius-lg); }
.about__figure img { width:100%; box-shadow:var(--shadow); }
.about__ph { aspect-ratio:4/5; background: radial-gradient(circle at 50% 35%, #fff, var(--surface)); display:grid; place-items:center; box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.about__ph img { width:58%; opacity:.9; border-radius:0; box-shadow:none; }
.about__figcaption { font-size:.9rem; color:var(--ink-soft); margin-top:.75rem; }
.about__quals { list-style:none; margin:1rem 0 1.75rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.about__quals li { font-size:.88rem; font-weight:600; color:var(--petrol-900); background:var(--surface); padding:.35rem .8rem; border-radius:999px; }
.about__usps { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top:1px solid var(--border); }

/* 11) Referenzen (Höhepunkt 2 – editoriales Zitat) ----------------------- */
.pullquote { position:relative; margin:0 auto; max-width:52rem; text-align:center; padding-top:var(--space-lg); }
.pullquote__eyebrow { margin-bottom:1.5rem; }
.pullquote__text { position:relative; z-index:1; font-family:var(--font-head); font-weight:700; color:var(--petrol-900); font-size:clamp(2rem,1.4rem+2.4vw,3.1rem); line-height:1.2; letter-spacing:.005em; margin:0 auto 1.35rem; max-width:40ch; }
/* Anführungszeichen als dezentes Hintergrund-Flourish hinter dem Zitat, nicht
   als eigenes, lose wirkendes Element davor */
.pullquote__text::before {
  content:"\201E"; position:absolute; z-index:-1; top:-1.6rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-head); font-weight:700; color:var(--brand-beere); opacity:.16;
  font-size:clamp(5rem,11vw,8rem); line-height:1;
}
.pullquote__text em { font-style:normal; color:var(--brand-beere); }
.pullquote__cite { display:block; font-size:.95rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.quote-support { display:grid; gap:var(--space-lg) var(--space-2xl); grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); margin-top:var(--space-xl); max-width:52rem; margin-inline:auto; }
.quote-support blockquote { margin:0; padding:0; text-align:center; }
.quote-support p { font-size:1.05rem; color:var(--ink); font-style:italic; margin:0 0 .5rem; }
.quote-support cite { font-style:normal; font-weight:700; color:var(--petrol-900); font-size:.9rem; }

/* Google-Bewertungen (statisch gepflegt) – ohne Kästchen, luftig & editorial */
.reviews { margin-top:var(--space-3xl); text-align:center; }
.reviews__summary { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--petrol-900); margin:0 0 var(--space-2xl); }
.reviews__summary .stars { color:#e6a817; letter-spacing:.05em; }
.reviews__grid { list-style:none; margin:0 auto var(--space-2xl); padding:0; max-width:58rem; display:grid; gap:var(--space-2xl) var(--space-3xl); grid-template-columns:repeat(auto-fit,minmax(22rem,1fr)); text-align:left; }
.review { position:relative; }
.review__stars { display:flex; gap:.15rem; color:#e6a817; margin-bottom:.9rem; }
.review__stars svg { width:1.05rem; height:1.05rem; }
.review__text { color:var(--ink); font-style:italic; font-size:1.08rem; line-height:1.7; margin:0 0 .9rem; }
.review__author { font-weight:700; font-style:normal; color:var(--petrol-900); font-size:.92rem; margin:0; }

/* Partner-Logo-Leiste (ruhig, grayscale -> bei Hover farbig) */
.partners { margin-top:var(--space-2xl); padding-top:var(--space-2xl); border-top:1px solid var(--border); text-align:center; }
.partners__label { display:block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:1.25rem; }
.partner-logo-row { list-style:none; display:flex; flex-wrap:wrap; gap:1.75rem 3rem; align-items:center; justify-content:center; margin:0; padding:0; }
.partner-logo-row a { display:inline-flex; align-items:center; justify-content:center; height:4.25rem; text-decoration:none; font-weight:700; font-size:1.15rem; color:var(--petrol-700); opacity:1; transition:transform .2s ease, color .2s ease; }
.partner-logo-row a:hover { transform:translateY(-2px); color:var(--beere-700); }
.partner-logo-row img.partner-logo { max-height:4rem; max-width:12rem; width:auto; object-fit:contain; }

/* Partner-Karten (Referenzen-Seite) */
.partner-cards { list-style:none; margin:var(--space-xl) 0 0; padding:0; display:grid; gap:var(--space-lg); grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); }
.partner-card { display:flex; gap:1.5rem; align-items:center; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); }
.partner-card__logo { flex:0 0 8rem; height:5rem; display:grid; place-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem; }
.partner-card__logo img { max-height:4rem; max-width:7rem; width:auto; object-fit:contain; }
.partner-card__mark { font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:var(--petrol-700); text-align:center; }
.partner-card__name { font-size:1.3rem; margin:0 0 .35rem; }
.partner-card__meta { font-size:.95rem; color:var(--ink-soft); margin:0; line-height:1.7; }
@media (max-width:30rem){ .partner-card { flex-direction:column; align-items:flex-start; } }

/* 12) News-Preview (einheitliche, dezente Karten) ------------------------ */
.news-layout { display:grid; gap:var(--space-lg); margin-bottom:var(--space-xl); }
@media (min-width:54rem){ .news-layout { grid-template-columns:1.4fr 1fr; align-items:start; } }
.news-featured { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.9rem; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; }
.news-featured:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.news-featured__date { font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-beere); font-weight:700; margin:0 0 .5rem; }
.news-featured__title { font-size:1.8rem; margin:0 0 .7rem; }
.news-featured__title a { text-decoration:none; color:var(--petrol-900); }
.news-featured__title a:hover { color:var(--beere-700); }
.news-featured__excerpt { color:var(--ink-soft); margin:0 0 1.1rem; }
.news-cards--side { margin:0; grid-template-columns:1fr; }
.news-cards { display:grid; gap:var(--space-lg); grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); list-style:none; margin:0 0 var(--space-xl); padding:0; }
.news-card { display:flex; flex-direction:column; gap:.4rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s; }
.news-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.news-card__date { font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:0; }
.news-card__title { font-size:1.25rem; margin:0; }
.news-card__title a { text-decoration:none; color:var(--petrol-900); }
.news-card__title a:hover { color:var(--beere-700); }

/* 13) CTA-Section (hell & luftig, Petrol-Tönung) ------------------------- */
.cta { position:relative; overflow:hidden; background:
    radial-gradient(40rem 22rem at 100% 0%, rgba(27,103,103,.10), transparent 60%),
    radial-gradient(34rem 20rem at 0% 100%, rgba(154,31,96,.05), transparent 60%),
    var(--surface);
    border:1px solid var(--border); color:var(--ink);
    border-radius:var(--radius-lg); padding:clamp(2.5rem,6vw,4.5rem); text-align:center; }
.cta h2 { color:var(--petrol-900); }
.cta p { color:var(--ink-soft); max-width:38rem; margin-inline:auto; }
.cta__actions { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:1.75rem; }

/* 14) Prose / Innenseiten ------------------------------------------------ */
.page, .post { padding-block: var(--space-3xl); }
.page__header, .post__header { margin-bottom: var(--space-xl); }
.page__lead { font-size:1.2rem; color:var(--ink-soft); }
.post__meta { font-size:.95rem; color:var(--ink-soft); margin-bottom:.3rem; }
.prose { max-width:42rem; }
.prose > * + * { margin-top:1.1em; }
.prose img { border-radius:var(--radius); margin-block:1.5rem; box-shadow:var(--shadow-sm); }
.prose h2 { margin-top:1.8em; } .prose h3 { margin-top:1.5em; }
.prose h4, .prose h5, .prose h6 { margin-top:1.6em; margin-bottom:.3em; }
.prose ul, .prose ol { padding-left:1.3rem; } .prose li + li { margin-top:.4rem; }
.prose blockquote { margin:1.5rem 0; padding:.5rem 1.2rem; border-left:4px solid var(--brand-beere); background:var(--tint-beere); color:var(--ink); border-radius:0 var(--radius) var(--radius) 0; }
.prose a { font-weight:600; }
.post-list { list-style:none; margin:2rem 0; padding:0; }
.post-list__item { padding:1.1rem 0; border-bottom:1px solid var(--border); }
.post-list__meta { color:var(--ink-soft); font-size:.9rem; margin:0 0 .2rem; }
.post-list__title { font-size:1.5rem; margin:0; }
.post-list__title a { text-decoration:none; } .post-list__title a:hover { text-decoration:underline; }
.back-link { display:inline-block; margin-top:2rem; font-weight:700; }
.post__footer { margin-top:2.5rem; border-top:1px solid var(--border); }
.contact-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); margin-top:2rem; }
.contact-card { background:var(--surface); border-radius:var(--radius); padding:1.5rem; }
.contact-card h2 { font-size:1.4rem; margin-bottom:.6rem; }
.contact-card address { font-style:normal; line-height:1.7; }
/* Anklickbare Standort-Kästchen (führen zur jeweiligen Praxis-Seite) */
.contact-card--link { display:block; color:inherit; text-decoration:none; border:1px solid transparent; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.contact-card--link:hover, .contact-card--link:focus-visible { box-shadow:var(--shadow); border-color:var(--border); transform:translateY(-2px); }
.contact-card--link:hover .contact-card__more, .contact-card--link:focus-visible .contact-card__more { color:var(--beere-700); }
.contact-card__more { display:inline-block; margin-top:1rem; font-weight:700; font-size:.92rem; color:var(--brand-beere); }

/* Google-Maps Klick-zum-Laden */
.mapblock { position:relative; margin:1.5rem 0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); aspect-ratio:16/10; }
.mapblock__placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem; padding:1.5rem;
  background: radial-gradient(30rem 16rem at 20% 0%, rgba(27,103,103,.10), transparent 60%), radial-gradient(28rem 16rem at 100% 100%, rgba(154,31,96,.10), transparent 60%), var(--surface); }
.mapblock__title { font-family:var(--font-head); font-weight:700; font-size:1.4rem; color:var(--petrol-900); margin:0; }
.mapblock__addr { font-weight:600; color:var(--ink); margin:0 0 .25rem; }
.mapblock__hint { font-size:.85rem; color:var(--ink-soft); max-width:26rem; margin:.25rem 0 0; }
.mapblock__link { font-weight:600; font-size:.95rem; }
.mapblock--loaded { background:none; }
.mapblock iframe { width:100%; height:100%; border:0; display:block; }

/* 15) Footer ------------------------------------------------------------- */
.site-footer { background:var(--petrol-900); color:#dceae7; }
.site-footer a { color:#fff; }
.site-footer__inner { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); padding-block:3.5rem; }
.site-footer__heading { font-size:1.4rem; color:#fff; margin-bottom:.8rem; }
.site-footer__contact { font-style:normal; line-height:1.7; margin-bottom:1rem; }
.site-footer__links { list-style:none; margin:0; padding:0; line-height:2; }
.site-footer__heading--sm { font-size:1.05rem; margin-top:1.5rem; }
.site-footer__links a { display:inline-flex; align-items:flex-start; gap:.45rem; }
.dl-icon { flex:0 0 auto; margin-top:.3rem; }
.site-footer__bottom { border-top:1px solid rgba(255,255,255,.15); font-size:.9rem; padding-block:1rem; }
.site-footer__bottom p { margin:0; }

/* Social-Media-Icons */
.social { list-style:none; display:flex; gap:.6rem; margin:.25rem 0 0; padding:0; }
.social a { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:50%; background:rgba(255,255,255,.10); color:#fff; transition:background-color .15s ease, transform .15s ease; }
.social a:hover { background:var(--brand-beere); transform:translateY(-2px); }
.social svg { width:1.15rem; height:1.15rem; }
.cta__social { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem; color:var(--ink-soft); font-weight:600; }
.cta__social .social a { background:#fff; color:var(--petrol-700); border:1px solid var(--border); }
.cta__social .social a:hover { background:var(--brand-beere); color:#fff; border-color:var(--brand-beere); }

/* 16) Cookie-Banner ------------------------------------------------------ */
.cookie-banner { position:fixed; inset:auto 1rem 1rem 1rem; max-width:34rem; margin-inline:auto; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:1.25rem 1.5rem; z-index:80; }
.cookie-banner[hidden] { display:none; }
.cookie-banner h2 { font-size:1.3rem; margin:0 0 .4rem; }
.cookie-banner p { font-size:.95rem; color:var(--ink-soft); margin:0 0 1rem; }
.cookie-banner__actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.cookie-banner .btn { padding:.6rem 1.1rem; font-size:.95rem; }

/* 17) Utilities ---------------------------------------------------------- */
.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; }
.text-center { text-align:center; }
@media (prefers-reduced-motion: reduce) {
  *, .reveal > *, .reveal--art { animation:none !important; transition:none !important; scroll-behavior:auto !important; opacity:1 !important; transform:none !important; }
}
