/* ==========================================================================
   Baan Maai – Basis-Stylesheet (Mobile First)
   Nachbau des bisherigen Avada-Designs ohne Framework.
   Größere Viewports: siehe responsive.css
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, SIL Open Font License / Apache 2.0) ---------- */
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/red-hat-display-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Red Hat Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/red-hat-display-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design-Tokens (Werte aus dem Original-Theme übernommen) ---------- */
:root {
  /* Farben (Avada Global Colors 1–8 + Sonderfarben) */
  --c-white: #ffffff;        /* color1 */
  --c-light: #e8e8e8;        /* color2 – Seitenhintergrund */
  --c-text: #6b6b6b;         /* Fließtext. Original: #999999 (color3) – nur 2,85:1 Kontrast,
                                daher für WCAG 2.1 AA (≥ 4,5:1) abgedunkelt. Zum 1:1-Original: #999999 */
  --c-text-original: #999999;
  --c-green-light: #3fa535;  /* color4 */
  --c-green: #2b7325;        /* color5 – Primärfarbe, Header */
  --c-heading: #333333;      /* color6 – Überschriften, Links */
  --c-navy: #182c45;         /* color7 – Buttons, Footer */
  --c-black: #000000;        /* color8 */
  --c-green-bright: #4dc242; /* Verlauf Massagen-Bereich, Welle */
  --c-green-text: #22601d;   /* dunkleres Grün für Text auf Weiß (Kontrast) */
  --c-text-strong: #767676;  /* zugänglicher Grauton für Formulartexte */

  /* Schriften */
  --ff-heading: "Red Hat Display", Arial, Helvetica, sans-serif;
  --ff-body: Roboto, Arial, Helvetica, sans-serif;

  /* Schriftgrößen (fluid, Minimal- und Maximalwerte = Original mobil/desktop) */
  --fs-body: 17px;
  --lh-body: 1.7;
  --fs-lead: 17px;
  --fs-h1: clamp(40px, 31.4px + 4.76vw, 76px);
  --fs-h2: clamp(30px, 27.5px + 1.64vw, 43px);
  --fs-h2-banner: clamp(34px, 19.5px + 4.2vw, 68px);
  --fs-h2-contact: clamp(36px, 33px + 2.3vw, 60px);
  --fs-h3: clamp(24px, 25.8px + 0.2vw, 28px);
  --fs-nav: 19px;

  /* Abstände & Layout */
  --sidebar-w: 280px;
  --pad-x: 28px;             /* seitlicher Innenabstand Inhaltsbereich */
  --section-gap: 66px;
  --radius-card: 8px;
  --radius-btn: 4px;
  --shadow-card: 0 18px 45px 0 rgba(43, 115, 37, 0.18);
  --content-max: 1263px;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background: var(--c-light);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--c-heading); text-decoration: none; transition: color .2s ease, background-color .2s ease; }
a:hover { color: var(--c-green); }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 {
  font-family: var(--ff-heading);
  font-weight: 500;
  color: var(--c-heading);
  letter-spacing: 0;
  margin: 0;
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--fs-h1); line-height: 1.16; }
h2 { font-size: var(--fs-h2); line-height: 1.3; margin-bottom: 1.1em; }
h3 { font-size: var(--fs-h3); line-height: 1.16; margin: 28px 0; }
strong, b { font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }
.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;
}
:focus-visible { outline: 3px solid var(--c-green-light); outline-offset: 3px; }

/* Skip-Link */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--c-navy); color: #fff; padding: 10px 18px; border-radius: var(--radius-btn);
  font-family: var(--ff-heading);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- Header / Seitenleiste ---------- */
.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--c-green);
  color: #fff;
  isolation: isolate;
}
.site-header::before { /* Blätterstruktur, im Original per "multiply" eingefärbt */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--c-green) url("../images/header-background-300.webp") center / cover no-repeat;
  background-blend-mode: multiply;
}
.site-header a { color: #fff; }
.site-header a:hover { color: var(--c-light); }
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "logo toggle" "addr addr";
  align-items: center;
  gap: 8px 16px;
  padding: 18px var(--pad-x) 20px;
}
.brand { grid-area: logo; display: block; width: 117px; }
.brand img { width: 100%; height: auto; }
.nav-toggle {
  grid-area: toggle;
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-family: var(--ff-heading); font-weight: 500; font-size: 22px; line-height: 1;
  padding: 8px 4px;
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.main-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-white);
  box-shadow: 0 10px 25px rgba(0,0,0,.15);
}
.main-nav.is-open { display: block; }
.main-nav a {
  display: block;
  padding: 0 var(--pad-x);
  line-height: 48px;
  border-top: 1px solid var(--c-light);
  color: var(--c-green-text);
  font-family: var(--ff-heading); font-weight: 500; font-size: 18px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--c-green); color: #fff; }

.header-address {
  grid-area: addr;
  font-style: normal;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}
.header-address .addr-name { display: none; }

/* ---------- Hauptbereich ---------- */
.site-main { background: var(--c-white); overflow: hidden; }
.container { max-width: var(--content-max); margin: 0 auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: #fff;
  padding: 40px var(--pad-x) 66px;
  isolation: isolate;
  background: #3b2a20;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0; }
.hero-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 34px;
}
.hero-info .info { display: flex; gap: 4px; align-items: flex-start; }
.hero-info .info .icon { display: none; width: 22px; height: 22px; margin-top: 4px; }
.hero-info .label { display: block; }
.hero-info a { color: #fff; }
.hero-info a:hover { color: var(--c-light); }
.hero-sep {
  width: 100%; max-width: 453px; height: 5px; border: 0; margin: 0 0 48px;
  background: rgba(232, 232, 232, 0.32);
}
.hero h1 { color: #fff; max-width: 700px; margin-bottom: 36px; }
.hero-lead { font-size: var(--fs-lead); line-height: 1.7; max-width: 460px; margin-bottom: 44px; }
.hero-thai { font-family: var(--ff-body); font-size: 28px; line-height: 1.7; margin: 0; font-weight: 400; }

/* ---------- Intro ---------- */
.intro { text-align: center; padding: 46px var(--pad-x) 40px; }
.intro h2 { max-width: 640px; margin: 0 auto 0.75em; }
.intro p { max-width: 632px; margin: 0 auto; font-size: var(--fs-lead); }

/* ---------- Split-Bereiche (Bild + Text) ---------- */
.split { display: grid; grid-template-columns: 1fr; background: var(--c-light); }
.split-media { position: relative; min-height: 210px; }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-text {
  background: linear-gradient(180deg, #ffffff 0%, rgba(44, 116, 37, 0.07) 100%);
  padding: 56px var(--pad-x) 56px;
}
.split-text h2 { margin-bottom: 0.55em; }
.split-text p { font-size: var(--fs-lead); }

/* Button */
.btn {
  display: inline-block;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--ff-heading); font-weight: 500;
  font-size: 15px; line-height: 17px;
  padding: 11px 24px;
  border: 0; border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--c-green); color: #fff; }
.split-text .btn { margin-top: 12px; }

/* ---------- Massagen ---------- */
.massages {
  background: linear-gradient(180deg, #ffffff 0%, var(--c-green-bright) 100%);
  padding: 40px var(--pad-x) 55px;
}
.massages-head { display: grid; grid-template-columns: 1fr; gap: 0 36px; }
.massages-head h2 { margin-bottom: 0.9em; }
.massages-head p { font-size: 13px; line-height: 1.7; }
.massages-sep { height: 4px; border: 0; margin: 28px 0 22px; background: rgba(232, 236, 232, .9); }
.cards { display: grid; grid-template-columns: 1fr; gap: 16px 36px; }
.card {
  background: var(--c-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card-media { aspect-ratio: 3 / 2; overflow: hidden; background: #ddd; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 33px 13.5% 40px; }
.card h3 { margin-top: 28px; }
.card p { font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.card p:last-child { margin-bottom: 0; }
.prices { font-weight: 700; }
.prices span { display: block; }
.price-note { font-weight: 400; }

/* ---------- Banner mit Welle ---------- */
.banner {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 0 var(--pad-x) 48px;
  background: #2b2019;
}
.banner-bg { position: absolute; inset: 0; z-index: -2; }
.banner-bg img { width: 100%; height: 100%; object-fit: cover; }
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(24, 44, 68, .25) 0%, rgba(24, 44, 68, .35) 100%);
}
.banner { padding-top: 15.82%; }
.wave { position: absolute; top: -1px; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 1024 / 161; }
.banner h2 {
  color: #fff; font-size: var(--fs-h2-banner); line-height: 1.25;
  max-width: 640px; margin: 4px auto 0;
}
.banner .brand-line { display: none; }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: 1fr; background: var(--c-white); }
.contact-text { padding: 36px var(--pad-x) 40px; }
.contact-text h2 { font-size: var(--fs-h2-contact); line-height: 1.16; margin-bottom: 0.35em; }
.contact-text > p { font-size: var(--fs-lead); margin-bottom: 26px; }
.checklist li { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.checklist .circle {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-green); color: #fff;
}
.checklist .circle .icon { width: 22px; height: 22px; }
.checklist a { font-family: var(--ff-body); font-size: 24px; line-height: 1.4; color: var(--c-heading); overflow-wrap: anywhere; }
.checklist a:hover { color: var(--c-green); }
.contact-media { position: relative; aspect-ratio: 1500 / 1130; }
.contact-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kontaktformular ---------- */
.form-section { background: var(--c-white); padding: 40px var(--pad-x) 56px; border-top: 1px solid var(--c-light); }
.form-section h2 { margin-bottom: 0.4em; }
.form-intro { font-size: var(--fs-lead); max-width: 640px; }
.contact-form { display: grid; grid-template-columns: 1fr; gap: 18px 24px; margin-top: 28px; }
.field label { display: block; font-family: var(--ff-heading); font-weight: 500; color: var(--c-heading); font-size: 16px; margin-bottom: 6px; }
.field .req { color: #b3261e; }
.field input, .field textarea {
  width: 100%;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--c-heading);
  background: #fff;
  border: 1px solid #c9c9c9; border-radius: var(--radius-btn);
  padding: 11px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 170px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(43, 115, 37, .2); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; }
.field .error { display: block; min-height: 0; color: #b3261e; font-size: 14px; line-height: 1.4; margin-top: 4px; }
.field-full { grid-column: 1 / -1; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { font-size: 14px; line-height: 1.6; color: var(--c-text-strong); margin: 0; }
.form-privacy a { text-decoration: underline; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions .btn { font-size: 16px; padding: 15px 34px; }
.form-actions .btn[disabled] { opacity: .6; cursor: wait; }
.form-status { margin: 0; padding: 14px 18px; border-radius: var(--radius-btn); font-size: 16px; line-height: 1.5; }
.form-status[hidden] { display: none; }
.form-status.is-success { background: #e7f4e5; color: #1d4f19; border: 1px solid #b7dcb2; }
.form-status.is-error { background: #fbeaea; color: #8a1f17; border: 1px solid #efc2bf; }
.form-required-note { font-size: 14px; color: var(--c-text-strong); margin: 0; }

/* ---------- Google-Maps-Platzhalter (Zwei-Klick-Lösung) ---------- */
.map-section { background: #fafafa; }
.map-consent {
  display: grid; place-items: center; text-align: center;
  min-height: 450px;
  padding: 40px var(--pad-x);
  background:
    linear-gradient(rgba(250,250,250,.88), rgba(250,250,250,.88)),
    repeating-linear-gradient(45deg, #eef2ee 0 14px, #f6f8f6 14px 28px);
  color: #555;
}
.map-consent-inner { max-width: 560px; }
.map-consent .icon { width: 46px; height: 46px; color: var(--c-green); margin: 0 auto 12px; }
.map-consent h2 { font-size: 26px; margin-bottom: 12px; }
.map-consent p { font-size: 15px; line-height: 1.6; margin-bottom: 14px; color: #555; }
.map-consent a { text-decoration: underline; color: var(--c-heading); }
.map-consent .btn { font-size: 16px; padding: 14px 28px; }
.map-remember { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; margin-top: 12px; color: #555; cursor: pointer; }
.map-remember input { width: 18px; height: 18px; accent-color: var(--c-green); }
.map-frame iframe { display: block; width: 100%; height: 450px; border: 0; }
.map-frame[hidden], .map-consent[hidden] { display: none; }
.map-revoke { text-align: center; padding: 10px var(--pad-x) 14px; font-size: 14px; }
.map-revoke button { background: none; border: 0; padding: 0; font: inherit; color: var(--c-heading); text-decoration: underline; cursor: pointer; }
.map-revoke button:hover { color: var(--c-green); }
.map-address { font-size: 14px; margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-navy); color: #fff; padding: 34px var(--pad-x) 40px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 900px; margin: 0 auto; }
.powered { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 10px; font-weight: 600; line-height: 1.2; }
.powered img { width: 66px; height: auto; }
.powered:hover { color: var(--c-light); }
.footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.footer-nav a { color: #fff; font-size: 14px; font-weight: 600; line-height: 21px; padding: 6px 0; display: inline-block; }
.footer-nav a:hover { color: var(--c-light); }

/* Nach-oben-Button */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--c-black); color: #fff; border-radius: 6px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, background-color .2s ease, visibility .25s;
}
.to-top.is-visible { opacity: .85; visibility: visible; }
.to-top:hover { background: var(--c-green); color: #fff; opacity: 1; }
.to-top .icon { width: 22px; height: 22px; }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.legal { padding: 50px var(--pad-x) 70px; color: var(--c-text); }
.legal h1 { font-size: clamp(44px, 30px + 4vw, 76px); line-height: 1.16; margin-bottom: 40px; }
.legal h2 { font-size: clamp(28px, 24px + 1.2vw, 43px); line-height: 1.2; margin: 34px 0 22px; overflow-wrap: anywhere; }
.legal h3 { font-size: 22px; margin: 26px 0 12px; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; }
.legal ul { list-style: disc; padding-left: 22px; margin: 0 0 20px; }
.legal a { color: var(--c-heading); text-decoration: underline; overflow-wrap: anywhere; }
.legal a:hover { color: var(--c-green); }
.legal .todo { background: #fff4c2; color: #6b5200; padding: 0 4px; border-radius: 3px; font-weight: 600; }
.legal .box { background: #f6f8f6; border-left: 4px solid var(--c-green); padding: 14px 18px; margin: 0 0 20px; }
.legal .btn { text-decoration: none; }
.notice { font-size: 15px; }

/* ---------- Ohne JavaScript: Navigation immer sichtbar ---------- */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .main-nav { display: block; position: static; grid-column: 1 / -1; background: none; box-shadow: none; }
html:not(.js) .main-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; }
html:not(.js) .main-nav a { color: #fff; border: 0; padding: 0; line-height: 40px; }

/* Kontakt-Fallbackseite */
.form-section--page { border-top: 0; }
.form-section--page h1 { font-size: var(--fs-h2-contact); line-height: 1.16; margin-bottom: 0.4em; }

/* ---------- Einwilligungsdialog (consent.js) ---------- */
html.consent-open { overflow: hidden; }
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 12px;
  pointer-events: none;
}
.consent-banner.is-modal {
  top: 0; align-items: center;
  background: rgba(24, 44, 69, .72);
  pointer-events: auto;
}
.consent-banner[hidden] { display: none; }
.consent-panel {
  pointer-events: auto;
  width: 100%; max-width: 620px; max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--c-white);
  border-top: 6px solid var(--c-green);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
  padding: 26px 24px 18px;
  color: var(--c-text);
  font-size: 15px; line-height: 1.6;
}
.consent-panel:focus { outline: none; }
.consent-panel:focus-visible { outline: 3px solid var(--c-green-light); outline-offset: 2px; }
.consent-title { font-size: 26px; line-height: 1.2; margin: 0 0 14px; }
.consent-panel p { margin: 0 0 12px; }
.consent-details { border-top: 1px solid var(--c-light); border-bottom: 1px solid var(--c-light); margin: 6px 0 16px; padding: 10px 0; }
.consent-details[hidden] { display: none; }
.consent-option { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.consent-option input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--c-green); }
.consent-option label { color: var(--c-heading); cursor: pointer; }
.consent-option label span { display: block; color: var(--c-text); font-size: 14px; }
.consent-option input:disabled + label { cursor: default; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.consent-actions .consent-btn { flex: 1 1 200px; font-size: 16px; padding: 14px 18px; text-align: center; }
.consent-actions [hidden] { display: none; }
.consent-link-btn {
  background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--c-heading); text-decoration: underline;
}
.consent-link-btn:hover { color: var(--c-green); }
.consent-links { margin: 12px 0 0 !important; font-size: 14px; text-align: center; }
.consent-links a { color: var(--c-heading); text-decoration: underline; }
@media (min-width: 640px) {
  .consent-panel { padding: 32px 34px 22px; }
}
@media (min-width: 1100px) {
  .consent-banner:not(.is-modal) { left: var(--sidebar-w); }
}

/* Footer: Datenschutz-Einstellungen (nur mit JavaScript sinnvoll) */
.footer-nav button { background: none; border: 0; padding: 6px 0; cursor: pointer; color: #fff; font: inherit; font-size: 14px; font-weight: 600; line-height: 21px; }
.footer-nav button:hover { color: var(--c-light); }
html:not(.js) [data-consent-open] { display: none; }