:root {
  --bg: #ffffff;
  --surface: #f6f9e0;        /* Tint aus #bccf01 */
  --surface-pink: #fdeaf3;   /* Tint aus #e50076 */
  --ink: #1f1f1f;
  --ink-soft: #555555;
  --line: #e2e2e2;
  --green: #bccf01;          /* go3-Grün: Flächen, Linien, Deko – Text darauf immer dunkel (10:1) */
  --pink: #e50076;           /* go3-Pink: Buchen-Aktionen – weiße Schrift 4,6:1 (AA) */
  --pink-text: #e50076;
  --btn-pink: #e50076;
  --btn-pink-hover: #c20064;
  --deep: #262626;
  --card: #ffffff;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .35);
  --radius-l: 22px;
  --radius-s: 10px;
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --body: "Open Sans", Arial, Helvetica, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141414; --surface: #1d1f14; --surface-pink: #2a1420; --ink: #f2f2f2; --ink-soft: #bdbdbd;
    --line: #333333; --pink-text: #ff5ca8; --card: #1c1c1c; --deep: #0d0d0d;
    --shadow: 0 18px 40px -22px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] {
  --bg: #141414; --surface: #1d1f14; --surface-pink: #2a1420; --ink: #f2f2f2; --ink-soft: #bdbdbd;
    --line: #333333; --pink-text: #ff5ca8; --card: #1c1c1c; --deep: #0d0d0d;
    --shadow: 0 18px 40px -22px rgba(0,0,0,.8);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.65 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* Hover-Idee "Fußspur": pinke Fußabdrücke laufen Schritt für Schritt unter den Link */
.main-nav a, .topbar a, .site-footer a:not(.btn), .service-actions a, .store > a, .booking-alt a, .band a:not(.btn) { position: relative; }
.main-nav a::after, .topbar a::after, .site-footer a:not(.btn)::after, .service-actions a::after, .store > a::after, .booking-alt a::after, .band a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -13px; height: 14px; background-size: 26px 14px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 22 12'%3E%3Cg fill='%23e50076'%3E%3Cellipse cx='6.4' cy='3' rx='3' ry='2'/%3E%3Cellipse cx='1.8' cy='3' rx='1.5' ry='1.3'/%3E%3Cellipse cx='17.4' cy='9' rx='3' ry='2'/%3E%3Cellipse cx='12.8' cy='9' rx='1.5' ry='1.3'/%3E%3C/g%3E%3C/svg%3E") left center repeat-x; background-size: 26px 14px;
  clip-path: inset(0 100% 0 0); transition: clip-path .55s steps(6, end);
}
.band a:not(.btn)::after, .topbar a::after, .site-footer a:not(.btn)::after { filter: brightness(1.25); }
.main-nav a::after { left: 12px; right: 12px; bottom: -2px; }
a:hover::after, a:focus-visible::after { clip-path: inset(0 0 0 0); }
a:hover { text-decoration-color: transparent; }
.main-nav a:hover { background: transparent; }
@media (prefers-reduced-motion: reduce) { a::after { transition: none; } }
a:hover { color: var(--pink-text); }
:focus-visible { outline: 3px solid var(--pink-text); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.02; margin: 0 0 .5em; letter-spacing: -.005em; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; }
h3 { font-size: 1.7rem; font-weight: 700; }
p { margin: 0 0 1em; max-width: 64ch; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--btn-pink); color: #fff; padding: 12px 18px; border-radius: var(--radius-s); z-index: 100; font-weight: 700; }
.skip:focus { top: 12px; color: #fff; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 700 1rem/1.2 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, transform .2s; }
.btn-book { background: var(--btn-pink); color: #fff; }
.btn-book:hover { background: var(--btn-pink-hover); color: #fff; transform: translateY(-1px); }
.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-ghost:hover { color: var(--ink); }
.btn svg { width: 20px; height: 20px; flex: none; }

/* Topbar + Header */
.topbar { background: var(--deep); color: #eeeeee; font-size: .9rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; justify-content: space-between; padding-block: 7px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar-stores { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; }
.topbar-store { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar-dot { width: 9px; height: 9px; border-radius: 50%; background: #8a8a8a; flex: none; }
.topbar-store.is-open .topbar-dot { background: var(--green); }
.topbar-store.is-closed .topbar-dot { background: #8a8a8a; }
.topbar-name { font-weight: 600; }
.topbar-state { color: #c4c4c4; }
.topbar-store.is-open .topbar-state { color: #eeeeee; }
.topbar-state:empty::before { content: ""; }
/* Auf schmalen Geräten nur noch Name und Punkt, sonst wird die Leiste zu hoch. */
@media (max-width: 720px) {
  .topbar-state { display: none; }
  .topbar-stores { gap: 4px 14px; font-size: .85rem; }
}

.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: flex; align-items: center; text-decoration: none; color: var(--ink); margin-right: auto; }
.logo img { height: 58px; width: auto; }
@media (max-width: 520px) { .logo img { height: 46px; } }
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.main-nav a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; font-weight: 600; border-radius: 8px; }
.nav-toggle { display: none; }
@media (max-width: 980px) {
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; padding: 10px 20px 20px; }
  .nav-toggle { display: inline-flex; background: none; color: var(--ink); border: 2px solid var(--line); min-height: 44px; padding: 8px 14px; border-radius: 999px; font: 600 1rem var(--body); }
  .site-header .btn-book { display: none; }
}

/* Hero */
.hero { position: relative; overflow: clip; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); padding: clamp(28px, 3.5vw, 48px) 0 clamp(30px, 4vw, 55px); }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(28px, 5vw, 70px); align-items: start; }
.hero h1 { font-size: clamp(2.6rem, 4.8vw, 4.3rem); font-weight: 800; margin-bottom: .3em; max-width: 9.5ch; }
.hero-text { max-width: 27rem; padding-top: clamp(0px, 2vw, 24px); }
.hero-lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 46ch; }
.hero-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-facts li { background: var(--card); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: .95rem; font-weight: 600; }
.hero-facts li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; vertical-align: middle; }
.hero-facts li:nth-child(2)::before, .hero-facts li:nth-child(4)::before { background: var(--pink); }

.soles { position: absolute; z-index: 1; left: calc(50% - min(165px, 17vw)); top: 40px; width: min(300px, 28vw); pointer-events: none; will-change: transform; }
.rings { position: absolute; z-index: 1; left: -120px; bottom: -160px; width: 620px; pointer-events: none; will-change: transform; }

/* Buchungs-Panel */
.booking-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.booking { background: var(--card); border-radius: var(--radius-l); box-shadow: var(--shadow); border: 1px solid var(--line); padding: clamp(22px, 3vw, 34px); position: relative; }
.booking::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; border-radius: var(--radius-l) var(--radius-l) 0 0; background: linear-gradient(90deg, var(--green), var(--pink)); }
.booking h2 { font-size: 2.1rem; margin-bottom: .2em; }
.booking > p { color: var(--ink-soft); margin-bottom: 18px; }
.booking fieldset { border: 0; padding: 0; margin: 0 0 16px; }
.booking legend { font-weight: 700; margin-bottom: 10px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chips .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
#variantChips { grid-template-columns: 1fr; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 46px; padding: 6px 10px; line-height: 1.25; border-radius: 999px; border: 2px solid var(--line); cursor: pointer; font-weight: 600; font-size: .92rem; background: var(--bg); transition: border-color .15s, background .15s; }
.chip span:hover { border-color: var(--green); }
.chip input:checked + span { background: var(--surface-pink); border-color: var(--pink-text); color: var(--ink); }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--pink-text); font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--pink-text); outline-offset: 2px; }
.service-note { font-size: .95rem; color: var(--ink-soft); margin: 0; max-width: none; }
.service-note b { color: var(--ink); }
.booking .btn-book { width: 100%; margin-top: 18px; font-size: 1.1rem; min-height: 56px; }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--pink); color: var(--pink-text); background: var(--surface-pink); }
.btn-outline::after { display: none; }
.booking .btn-outline { width: 100%; margin-top: 10px; font-size: .98rem; }
.booking-alt { margin: 14px 0 0; font-size: .95rem; color: var(--ink-soft); text-align: center; max-width: none; }
.form-msg { min-height: 1.4em; margin: 8px 0 0; font-weight: 600; color: var(--pink-text); }
/* Die Statuszeile ist meist leer und reservierte trotzdem rund 50 Pixel.
   Dadurch klaffte eine große Lücke zwischen den beiden Knöpfen. Solange
   nichts darin steht, nimmt sie jetzt keinen Platz ein; sobald das Skript
   eine Meldung einsetzt, ist sie wieder da. Als aria-live-Bereich bleibt
   sie durchgehend im Dokument, Screenreader geben die Meldung also aus. */
.form-msg:empty { min-height: 0; margin: 0; }

@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } .hero h1 { max-width: none; } .soles { left: auto; right: -60px; width: 300px; opacity: .45; } }

/* News im Hero */
/* Die News stehen als eigene Reihe unter beiden Spalten des Kopfbereichs
   und laufen über die volle Breite. Die Meldungen liegen nebeneinander. */
.news { grid-column: 1 / -1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px, 2.2vw, 28px); box-shadow: var(--shadow); }
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; }
.news h2 { font-size: 1.45rem; margin: 0 0 16px; display: flex; align-items: center; gap: 9px; }
.news h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); flex: none; }
.news ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.news li { min-width: 0; }
.news li + li { border-top: 0; }
.news li a { display: block; padding: 0; text-decoration: none; color: var(--ink); height: 100%; }
@media (max-width: 980px) { .news ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .news ul { grid-template-columns: 1fr; gap: 0; }
  .news li + li { border-top: 1px solid var(--line); }
  .news li a { padding: 11px 0; }
}
.news li a::after { display: none; }
.news time { display: block; font-size: .8rem; color: var(--ink-soft); letter-spacing: .02em; }
.news strong { display: block; font-size: 1rem; line-height: 1.35; margin: 2px 0 3px; }
.news li a:hover strong { color: var(--pink-text); }
.news span { display: block; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
.news-all { display: inline-block; font-weight: 700; font-size: .95rem; padding: 4px 0; margin-top: 16px; }

/* Sektionen */
/* Abstand zwischen den Abschnitten: bewusst knapp gehalten. */
section { padding: clamp(32px, 4.5vw, 60px) 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 40px; margin-bottom: 26px; }
.section-head p { color: var(--ink-soft); margin: 0; }

/* Kernkompetenzen */
.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.service { grid-column: span 2; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; display: flex; flex-direction: column; }
.service.is-wide { grid-column: span 3; background: var(--surface); }
.service { overflow: hidden; }
.service-img { margin: -28px -28px 22px; aspect-ratio: 16 / 9; background: var(--surface); position: relative; }
.service.is-wide .service-img { aspect-ratio: 2 / 1; }
.service-img { overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; }
.service-img img { transition: transform .4s ease; }
.service:hover .service-img img { transform: scale(1.04); }
.service-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--green); }
.service:nth-child(even) .service-img::after { background: var(--pink); }
.service p { color: var(--ink-soft); }
.service .tags { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.service .tags li { font-size: .85rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-pink); color: var(--ink); }
.service.is-wide .tags li { background: var(--card); }
.service-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.service-actions a { font-weight: 700; }
.link-book { background: none; border: 0; padding: 10px 0; font: 700 1rem var(--body); color: var(--pink-text); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
@media (max-width: 980px) { .service, .service.is-wide { grid-column: span 3; } }
@media (max-width: 640px) { .services { grid-template-columns: 1fr; } .service, .service.is-wide { grid-column: auto; } }

/* Ablauf */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; counter-reset: s; }
.steps li { position: relative; padding-top: 70px; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 800 1.7rem/1 var(--display); background: var(--green); color: #1f1f1f; }
.steps li:first-child::before { background: var(--btn-pink); color: #fff; }
.steps li:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 64px; right: -16px; border-top: 3px dotted var(--line); }
.steps h3 { font-size: 1.5rem; }
.steps p { color: var(--ink-soft); font-size: .98rem; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; } .steps li::after { display: none; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Parallax-Band Krankenkasse */
.band { position: relative; overflow: hidden; background: var(--deep); color: #f2f2f2; }
.band a { color: #fff; }
.band .track { position: absolute; inset: -30% -10%; pointer-events: none; will-change: transform; opacity: .5; }
.band .wrap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.band h2 { color: #fff; }
.band p { color: #e0e0e0; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 16px 18px; border-radius: 14px; }
.checklist li::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1f1f' stroke-width='3'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/16px no-repeat; }
.band small { display: block; margin-top: 18px; color: #cfcfcf; }
@media (max-width: 860px) { .band .wrap { grid-template-columns: 1fr; } }

/* Instagram */
.insta { position: relative; overflow: hidden; background: var(--surface); }
.insta-deco { position: absolute; z-index: 0; right: -170px; bottom: -190px; width: 480px; opacity: .55; pointer-events: none; will-change: transform; }
.insta .wrap { position: relative; z-index: 1; }
.insta-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.insta-item { min-width: 0; display: flex; }
.insta-link { display: block; width: 100%; height: 100%; border-radius: var(--radius-l); overflow: hidden; background: var(--bg); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s, border-color .2s; }
.insta-link:hover { transform: translateY(-4px); border-color: var(--pink); }
.insta-link::after { display: none; }
.insta-media { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.insta-media img { width: 100%; height: 100%; object-fit: cover; }
.insta-badge { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.9); }
.insta-badge svg { width: 16px; height: 16px; }
.insta-ph { display: block; aspect-ratio: 1; background: repeating-linear-gradient(135deg, var(--surface) 0 14px, var(--bg) 14px 28px); will-change: transform; }
.insta-item:nth-child(even) .insta-ph { background: repeating-linear-gradient(135deg, var(--surface-pink) 0 14px, var(--bg) 14px 28px); }
.insta-cap {
  display: block; padding: 12px 14px 14px; font-size: .9rem; line-height: 1.45; color: var(--ink-soft);
  /* Feste Höhe für genau drei Zeilen: alle Kacheln bleiben gleich hoch, auch bei
     kurzem Text. Längerer Text läuft nach unten weich aus. Die Maske ist
     zuverlässiger als -webkit-line-clamp, das in dieser Verschachtelung
     je nach Browser übergangen wird. */
  height: calc(3 * 1.45em + 26px); box-sizing: border-box; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent calc(100% - 2px));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent calc(100% - 2px));
}
.insta-hint { margin: 18px 0 0; font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 980px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } .insta-item:nth-child(n+4) { display: none; } }
@media (max-width: 560px) { .insta-grid { grid-template-columns: repeat(2, 1fr); } .insta-item:nth-child(n+3) { display: none; } }

/* Filialen */
.stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.store { border-top: 6px solid var(--green); background: var(--surface); border-radius: 0 0 var(--radius-l) var(--radius-l); padding: 26px; }
.store:nth-child(2) { border-top-color: var(--pink); }
.store address { font-style: normal; margin-bottom: 14px; }
.store dl { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .95rem; }
.store dt { font-weight: 700; }
.store dd { margin: 0; }
.status { display: inline-block; font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); }
.status.is-open { color: var(--ink); border-color: var(--green); }
@media (max-width: 900px) { .stores { grid-template-columns: 1fr; } }

/* Stimmen + Shop */
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; }
.quotes { display: grid; gap: 20px; }
blockquote { margin: 0; padding: 26px 28px; border-radius: var(--radius-l); background: var(--surface-pink); }
blockquote p { font-size: 1.15rem; }
blockquote footer { font-weight: 700; color: var(--pink-text); }
.shop-teaser { border-radius: var(--radius-l); padding: 30px; background: var(--green); color: #1f1f1f; display: flex; flex-direction: column; }
.shop-teaser a.btn { margin-top: auto; align-self: flex-start; background: #1f1f1f; color: #fff; }
.shop-teaser a.btn:hover { background: var(--btn-pink); color: #fff; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 44px 20px 0; font-weight: 700; font-size: 1.1rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font: 700 2rem/1 var(--display); color: var(--pink-text); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); }

/* Footer */
.site-footer { background: var(--deep); color: #e0e0e0; padding: 64px 0 110px; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.site-footer h2 { font-size: 1.6rem; color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.legal { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 22px; }
.copyright { margin: 0; font-size: .9rem; color: #cfcfcf; }
.legal a:not(.btn) { padding: 6px 0; }
.btn-withdraw { background: transparent; color: #fff; border: 2px solid #fff; min-height: 44px; padding: 10px 26px; flex: none; white-space: nowrap; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.social svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; } }

/* Mobile Buchungsleiste */
.mobile-book { display: none; }
@media (max-width: 980px) {
  .mobile-book { display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
  .mobile-book .btn-book { flex: 1; }
  .mobile-book .btn-ghost { width: 48px; padding: 0; }
}
/* =========================================================================
   Theme-Ergänzungen (WordPress)
   ====================================================================== */

/* Sektionsvarianten, die im Entwurf noch als Inline-Stil standen */
.section-tint { background: var(--surface); }
.section-flush { padding-top: 0; }

/* Logo */
.logo img, .logo .custom-logo { height: 58px; width: auto; }
@media (max-width: 520px) { .logo img, .logo .custom-logo { height: 46px; } }
.logo-text { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.logo-text strong { font: 800 1.9rem/1 var(--display); color: var(--ink); }
.logo-text span { font-size: .85rem; color: var(--ink-soft); }
.logo-text::after { display: none; }

/* Menü aus WordPress */
.main-nav ul ul { display: none; }
.main-nav li { position: relative; }
.main-nav li:hover > ul, .main-nav li:focus-within > ul {
  display: block; position: absolute; top: 100%; left: 0; min-width: 220px; z-index: 20;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 6px; box-shadow: var(--shadow);
}
.main-nav .current-menu-item > a { color: var(--pink-text); }
@media (max-width: 980px) {
  .main-nav li:hover > ul, .main-nav li:focus-within > ul { position: static; border: 0; box-shadow: none; padding: 0 0 0 14px; }
}

/* Warenkorb im Header */
.cart-link { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); color: var(--ink); text-decoration: none; flex: none; }
.cart-link:hover { border-color: var(--pink); color: var(--pink-text); }
.cart-link::after { display: none; }
.cart-link svg { width: 22px; height: 22px; }
.cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--btn-pink); color: #fff; font: 700 .72rem/20px var(--body); text-align: center; }

/* Bildplatzhalter, solange im Customizer kein Bild gewählt ist */
.img-placeholder { display: block; width: 100%; height: 100%; min-height: 160px;
  background: repeating-linear-gradient(135deg, var(--surface) 0 16px, var(--card) 16px 32px); }
.service:nth-child(even) .img-placeholder { background: repeating-linear-gradient(135deg, var(--surface-pink) 0 16px, var(--card) 16px 32px); }

/* Brotkrumen */
.breadcrumbs { margin: 0 0 24px; font-size: .9rem; color: var(--ink-soft); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-soft); }
.breadcrumbs [aria-current] { font-weight: 600; color: var(--ink); }

/* Inhaltsseiten */
.page-wrap { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-family: var(--display); font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 800; line-height: 1.04; margin: 0 0 10px; }
.post-meta { color: var(--ink-soft); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.page-hero { margin: 0 0 32px; }
.page-hero img { border-radius: var(--radius-l); width: 100%; height: auto; }
/* Inhaltsbreite. Dieses Theme stellt auf Seiten und Beiträgen keine
   Seitenleiste dar, deshalb nutzt der Inhalt die volle Breite des
   Inhaltsbereichs (1180 px). Vorher war er auf 72 Zeichen begrenzt, was auf
   breiten Bildschirmen aussah, als bliebe rechts eine Spalte frei.
   Wer die kürzeren Zeilen lieber mag: hier wieder 72ch eintragen. */
.entry { max-width: none; }
/* Absätze sind global auf 64 Zeichen begrenzt, das ist auf der Startseite
   gewollt. Im Fließtext von Seiten und Beiträgen hebt diese Regel die
   Begrenzung auf, sonst bliebe der Text trotz voller Breite schmal. */
.entry p, .entry li, .entry blockquote, .entry dd { max-width: none; }
.entry h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.6em; }
.entry h3 { font-size: 1.4rem; margin-top: 1.4em; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li { margin-bottom: .4em; }
.entry img { height: auto; border-radius: var(--radius-s); }
.entry blockquote { margin: 1.6em 0; padding: 20px 24px; border-left: 5px solid var(--green); background: var(--surface); border-radius: 0 var(--radius-s) var(--radius-s) 0; }
.entry table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.entry th, .entry td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }

/* Beitragsliste */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; padding-bottom: 22px; }
.post-card-img { display: block; aspect-ratio: 16/9; overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-img::after { display: none; }
.post-card time { display: block; padding: 16px 22px 0; font-size: .85rem; color: var(--ink-soft); }
.post-card h2 { font-size: 1.4rem; margin: 4px 0 8px; padding: 0 22px; }
.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a:hover { color: var(--pink-text); }
.post-card p { padding: 0 22px; color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

/* Blättern */
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers { display: inline-grid; place-items: center; min-width: 46px; min-height: 46px; padding: 0 12px; border-radius: var(--radius-s); border: 2px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.page-numbers:hover { border-color: var(--pink); color: var(--pink-text); }
.page-numbers.current { background: var(--btn-pink); border-color: var(--btn-pink); color: #fff; }
.page-numbers::after { display: none; }

.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Suche */
.search-form { margin: 0 0 32px; max-width: 520px; }
.search-form label { display: block; font-weight: 700; margin-bottom: 8px; }
.search-row { display: flex; gap: 10px; }
.search-form input[type="search"] { flex: 1; min-height: 48px; padding: 8px 14px; border: 2px solid var(--line); border-radius: var(--radius-s); font: 1rem var(--body); background: var(--bg); color: var(--ink); }
.search-results { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.search-results li { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.search-results a { font: 700 1.2rem var(--display); }

/* 404 */
.error-links { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
.error-links a { font-weight: 700; }

/* Footer-Menüs */
.site-footer nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* Widgets */
.widget { margin-bottom: 32px; }
.widget-title { font-size: 1.3rem; }
.widget ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }

/* Kommentare */
.comment-list { list-style: none; padding: 0; }
.comment-list .children { list-style: none; padding-left: 24px; }
.comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }

/* Bildunterschriften und Ausrichtungen aus dem Editor */
.wp-caption, figure.wp-block-image { max-width: 100%; }
.wp-caption-text, figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: 6px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide { width: min(1180px, 100vw - 40px); margin-inline: auto; }

/* Darstellung von Smash Balloon, falls diese Quelle gewählt ist.
   Das Plugin bringt eigene Styles mit; hier nur Abstände und runde Ecken. */
.insta-plugin { position: relative; z-index: 1; }
.insta-plugin #sb_instagram { padding: 0 !important; }
.insta-plugin #sb_instagram .sbi_photo_wrap, .insta-plugin #sb_instagram .sbi_photo { border-radius: var(--radius-l); overflow: hidden; }

/* =========================================================================
   Referenzen-Seite (template-referenzen.php)
   Drei Bereiche mit je eigener Darstellung: Karten für Kooperationen,
   Zitate für Kundenstimmen, Ausschnitte für Presse.
   ====================================================================== */

.page-lead { font-size: 1.15rem; color: var(--ink-soft); margin: 0; max-width: 62ch; }

.ref-jump { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.ref-jump li { margin: 0; }
.ref-jump a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 46px;
  padding: 9px 20px; border-radius: 999px; border: 2px solid var(--line);
  font-weight: 700; font-size: .95rem; text-decoration: none; color: var(--ink); background: var(--card);
}
.ref-jump a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.ref-jump li:nth-child(2) a::before { background: var(--pink); }
.ref-jump a:hover { border-color: var(--pink); color: var(--pink-text); }

.ref-entry { margin-top: 30px; }

.ref-block { padding: clamp(34px, 5vw, 56px) 0 0; scroll-margin-top: 90px; }
.ref-head { margin-bottom: 26px; }
.ref-head h2 {
  font-family: var(--display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800;
  line-height: 1.08; margin: 0 0 8px;
}
.ref-head p { color: var(--ink-soft); margin: 0; max-width: 62ch; }

.ref-list { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2vw, 26px); margin: 0; padding: 0; }
.ref-list > li { margin: 0; }
@media (max-width: 960px) { .ref-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ref-list { grid-template-columns: 1fr; } }

.ref-more { margin: 22px 0 0; }
.ref-more a { font-weight: 700; }

/* --- Karten: Kooperationen und Projekte -------------------------------- */

.ref-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ref-card:hover { border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-3px); }
.ref-card:focus-within { border-color: var(--pink); }
.ref-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface); }
.ref-card-media::after { display: none; }
.ref-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.ref-card:hover .ref-card-media img { transform: scale(1.04); }
.ref-card-leer { display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg, var(--surface) 0 16px, var(--card) 16px 32px); }
.ref-card-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 22px 22px; }
.ref-card-body time { font-size: .85rem; color: var(--ink-soft); }
.ref-card-body h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 700; line-height: 1.22; margin: 0; }
.ref-card-body h3 a { color: var(--ink); text-decoration: none; }
.ref-card-body h3 a::after { display: none; }
.ref-card:hover .ref-card-body h3 a { color: var(--pink-text); }
.ref-card-body p {
  margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); max-width: none;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- Zitate: Kundenstimmen --------------------------------------------- */

.ref-quote {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border-radius: var(--radius-l); padding: 54px 26px 24px;
}
.ref-quote::before {
  content: "\201C"; position: absolute; top: 4px; left: 22px;
  font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--pink);
}
.ref-quote blockquote { margin: 0; padding: 0; border: 0; background: none; flex: 1; }
.ref-quote blockquote p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); max-width: none; }
.ref-quote footer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ref-quote-name { font-weight: 700; }
.ref-quote footer time { font-size: .88rem; color: var(--ink-soft); }

/* --- Ausschnitte: Presse ------------------------------------------------ */

.ref-clip {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-l);
  overflow: hidden; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ref-clip:hover { border-color: var(--pink); box-shadow: var(--shadow); transform: translateY(-3px); }
.ref-clip:focus-within { border-color: var(--pink); }
.ref-clip > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ref-clip > a::after { display: none; }
/* Zeitungsausschnitte vertragen keinen Beschnitt, deshalb wird das Bild
   eingepasst statt gefüllt. Der helle Hintergrund lässt den Rand ruhig wirken. */
.ref-clip-media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--surface); padding: 14px;
}
.ref-clip-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ref-clip-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 22px 22px; }
.ref-clip-body time { font-size: .85rem; color: var(--ink-soft); }
.ref-clip-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--ink); }
.ref-clip:hover .ref-clip-title { color: var(--pink-text); }

/* --- Abschluss ---------------------------------------------------------- */

.ref-cta {
  margin-top: clamp(40px, 6vw, 68px);
  background: var(--deep); color: #f2f2f2; border-radius: var(--radius-l);
  padding: clamp(28px, 4vw, 44px);
}
.ref-cta h2 { font-family: var(--display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 10px; color: #fff; }
.ref-cta p { color: #d8d8d8; margin: 0 0 18px; max-width: 62ch; }
.ref-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ref-cta .btn-ghost { border-color: #fff; color: #fff; background: transparent; }
.ref-cta .btn-ghost:hover { background: #fff; color: var(--ink); }