/* ══════════════════════════════════════════════════════════════════════════
   DAS YOGAHAUS WÜLFRATH — Stylesheet
   ──────────────────────────────────────────────────────────────────────────
   Aufbau dieser Datei:
     1.  Schriften (@font-face, lokal unter assets/fonts/)
     2.  Design-Token (Farben, Abstände, Typografie als Custom Properties)
     3.  Grundlagen (Reset, Typografie, Hilfsklassen)
     4.  Buttons und Links
     5.  Kopfbereich und Navigation (inkl. mobiles Overlay)
     6.  Hero und Seitenkopf
     7.  Vertrauensleiste
     8.  Abschnitte und Raster
     9.  Karten
    10.  Bild/Text-Blöcke
    11.  Zitat- und Ruhe-Bereiche
    12.  Inhaltsblöcke (Anker-Abschnitte, Info-Boxen, Listen)
    13.  Galerie
    14.  Preise
    15.  Sprungmarken-Leiste
    16.  Beiträge „Aktuelles"
    17.  Formular
    18.  Karte und Anfahrt
    19.  Eversports-Einbettung (Zwei-Klick)
    20.  Cookie-Banner
    21.  Abschluss-Block (CTA)
    22.  Fußbereich
    23.  Rechtstexte
    24.  Animationen
    25.  Druckausgabe-Hinweis

   FARBREGEL: Türkis trägt, Pink ist Signalfarbe (Buchungs-Button, aktive
   Zustände). Höchstens ein bis zwei Pink-Elemente pro Bildschirmbereich.
   Für weißen Text auf farbiger Fläche werden die abgedunkelten Varianten
   --color-primary-dark bzw. --color-accent-dark verwendet — die reinen
   Hausfarben erreichen auf Weiß keine 4,5:1.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1. Schriften ─────────────────────────────────────────────────────────
   Selbst gehostet. Es besteht KEINE Verbindung zu Google-Servern.
   unicode-range begrenzt auf latin und latin-ext.                          */

@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';
  src:url('../fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-600.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+0259,U+1E00-1EFF,U+2000-206F,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ── 2. Design-Token ──────────────────────────────────────────────────── */

:root{
  /* Hausfarben der Kundin — verbindlich */
  --color-primary:#10a2a3;        /* Türkis, tragende Farbe                */
  --color-accent:#e8007e;         /* Pink, sparsamer Signalakzent          */
  --color-text:#646363;           /* Grau, Fließtext (5,99:1 auf Weiß)     */

  /* Abgeleitete Töne — geprüfte Kontraste, siehe README */
  --color-primary-dark:#0b7d7e;   /* weißer Text darauf: 4,94:1            */
  --color-primary-darker:#096466; /* Hover-Zustand                          */
  --color-primary-light:#e8f5f5;  /* helle Fläche                           */
  --color-primary-tint:#f4faf9;   /* sehr helle Sektionsfläche              */
  --color-accent-dark:#d4007a;    /* weißer Text darauf: 5,15:1            */
  --color-accent-darker:#b8006a;  /* Hover-Zustand                          */
  --color-heading:#3f3f3f;        /* Überschriften, 10,53:1                */
  --color-muted:#6f6f6d;          /* Nebentext, 5,03:1 auf Weiß            */
  --color-bg-soft:#f7f7f6;        /* alternierender Sektionshintergrund     */
  --color-border:#e3e3e1;
  --color-white:#fff;

  /* Zustandsfarben für das Formular */
  --color-error:#b3261e;
  --color-success:#0b7d7e;

  /* Typografie */
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Maße */
  --width-content:1200px;         /* Maximalbreite des Inhalts              */
  --width-text:68ch;              /* Zeilenlänge im Fließtext               */
  --radius:14px;
  --radius-small:8px;
  --shadow:0 2px 14px rgba(50,60,60,.07);
  --shadow-hover:0 10px 30px rgba(50,60,60,.13);
  --header-height:76px;
}


/* ── 3. Grundlagen ────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anker nicht unter den klebenden Kopfbereich rutschen lassen */
  scroll-padding-top:calc(var(--header-height) + 1rem);
}

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:1.0625rem;            /* 17 px */
  line-height:1.7;
  color:var(--color-text);
  background:var(--color-white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--font-serif);
  color:var(--color-heading);
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.05rem,5.5vw,4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.5rem)}
h4{font-size:1.15rem}

p{margin:0 0 1.1em;max-width:var(--width-text)}
ul,ol{max-width:var(--width-text)}
li{margin-bottom:.4em}
strong,b{font-weight:600;color:var(--color-heading)}
small{font-size:.875em}
hr{border:0;border-top:1px solid var(--color-border);margin:2.5rem 0}

/* Hilfsklassen */
.wrap{max-width:var(--width-content);margin:0 auto;padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem)}
.wrap-schmal{max-width:820px;margin:0 auto;padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem)}
.mittig{text-align:center}
.mittig p,.mittig ul{margin-left:auto;margin-right:auto}
.nur-fuer-screenreader{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sprung-link{
  position:absolute;left:.5rem;top:-4rem;z-index:200;
  background:var(--color-white);color:var(--color-primary-dark);
  padding:.7rem 1.2rem;border-radius:var(--radius-small);font-weight:600;
  box-shadow:var(--shadow-hover);transition:top .18s;
}
.sprung-link:focus{top:.5rem}

.vorzeile{
  font-family:var(--font-sans);font-size:.8rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-primary-dark);margin:0 0 .8rem;
}


/* ── 4. Buttons und Links ─────────────────────────────────────────────── */

a{color:var(--color-primary-dark)}
a:hover{color:var(--color-primary-darker)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:.75rem 1.6rem;border-radius:999px;
  border:2px solid transparent;font-family:var(--font-sans);font-size:1rem;
  font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s,transform .2s;
}
.btn-buchen{background:var(--color-accent-dark);color:#fff}
.btn-buchen:hover{background:var(--color-accent-darker);color:#fff;transform:translateY(-2px)}
.btn-primaer{background:var(--color-primary-dark);color:#fff}
.btn-primaer:hover{background:var(--color-primary-darker);color:#fff;transform:translateY(-2px)}
.btn-rand{background:transparent;color:var(--color-primary-dark);border-color:var(--color-primary)}
.btn-rand:hover{background:var(--color-primary-light);color:var(--color-primary-darker)}
.btn-hell{background:rgba(255,255,255,.94);color:var(--color-heading)}
.btn-hell:hover{background:#fff;color:var(--color-heading);transform:translateY(-2px)}
.btn-klar{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-klar:hover{background:rgba(255,255,255,.14);color:#fff}

/* Sichtbarer Fokus überall — Pflicht für Tastaturbedienung */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--color-accent);outline-offset:3px;border-radius:4px;
}

.mehr{
  font-weight:600;font-size:.95rem;color:var(--color-primary-dark);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4em;
}
.mehr::after{content:'→';display:inline-block;transition:transform .2s}
.mehr:hover::after{transform:translateX(4px)}


/* ── 5. Kopfbereich und Navigation ────────────────────────────────────── */

.kopf{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow .25s,padding .25s;
}
/* ACHTUNG: Hier KEIN backdrop-filter, filter oder transform setzen.
   Jede dieser Eigenschaften macht den Kopf zum Bezugsrahmen für das fest
   positionierte mobile Menü (.nav-overlay). Das Menü wäre dann nur so hoch
   wie der Kopf, würde abgeschnitten und ließe sich nicht mehr bedienen. */
.kopf.ist-gescrollt{box-shadow:0 2px 16px rgba(50,60,60,.09)}

.kopf-innen{
  position:relative;z-index:2;         /* über dem geöffneten Menü */
  max-width:var(--width-content);margin:0 auto;
  padding:.7rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1.2rem;
}
.kopf.ist-gescrollt .kopf-innen{padding-top:.45rem;padding-bottom:.45rem}

.marke{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto;flex:0 0 auto;min-width:0}
.marke img{flex:0 0 52px;width:52px;height:52px;border-radius:50%;transition:width .25s,height .25s,flex-basis .25s}
.kopf.ist-gescrollt .marke img{flex-basis:44px;width:44px;height:44px}
.marke-text{display:block}
.marke-name{
  font-family:var(--font-serif);font-size:1.25rem;color:var(--color-heading);
  font-weight:600;line-height:1.1;display:block;white-space:nowrap;
}
.marke-ort{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--color-primary-dark);font-weight:600;display:block;
}

.nav{display:flex;align-items:center;gap:.2rem}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.5rem .7rem;font-size:.95rem;font-weight:500;
  color:var(--color-text);text-decoration:none;border-radius:6px;white-space:nowrap;
}
.nav a:hover{color:var(--color-primary-dark);background:var(--color-primary-tint)}
.nav a[aria-current="page"]{color:var(--color-primary-dark);font-weight:600;background:var(--color-primary-tint)}

/* Burger-Schalter — nur mobil sichtbar */
.burger{
  display:none;align-items:center;justify-content:center;
  width:48px;height:48px;flex:0 0 48px;
  background:transparent;border:1px solid var(--color-border);
  border-radius:var(--radius-small);cursor:pointer;color:var(--color-heading);
}
.burger:hover{background:var(--color-primary-tint)}
.burger svg{width:24px;height:24px;pointer-events:none}
.burger .icon-schliessen{display:none}
.burger[aria-expanded="true"] .icon-oeffnen{display:none}
.burger[aria-expanded="true"] .icon-schliessen{display:block}

/* Mobiles Overlay */
.nav-overlay{
  position:fixed;inset:0;z-index:1;   /* unter der Kopfleiste, über der Seite */
  height:100vh;height:100dvh;          /* volle Höhe, auch bei mobiler Adressleiste */
  background:var(--color-white);
  padding:calc(var(--header-height) + 1.5rem) clamp(1.2rem,6vw,2rem) 2.5rem;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:none;
}
.nav-overlay.ist-offen{display:block}
.nav-overlay ul{list-style:none;margin:0;padding:0;max-width:none}
.nav-overlay li{margin:0;border-bottom:1px solid var(--color-border)}
/* Nur die Listenlinks — der Buchungs-Button darunter behält seine eigene Gestaltung */
.nav-overlay li a{
  display:block;padding:1rem .2rem;font-size:1.15rem;font-weight:500;
  color:var(--color-heading);text-decoration:none;
}
.nav-overlay li a:hover,.nav-overlay li a[aria-current="page"]{color:var(--color-primary-dark)}
.nav-overlay .btn{margin-top:1.8rem;width:100%}
body.menue-offen{overflow:hidden}

@media(max-width:1120px){
  .nav{display:none}
  .burger{display:inline-flex}
}
@media(min-width:1121px){
  .nav-overlay{display:none!important}
}


/* ── 6. Hero und Seitenkopf ───────────────────────────────────────────── */

.hero{
  position:relative;min-height:clamp(460px,70vh,640px);
  display:flex;align-items:center;isolation:isolate;
}
.hero>picture,.hero>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(28,38,38,.82) 0%,rgba(28,38,38,.62) 48%,rgba(28,38,38,.28) 100%);
}
.hero-text{
  padding-top:clamp(2.5rem,7vw,4.5rem);padding-bottom:clamp(2.5rem,7vw,4.5rem);
  max-width:44rem;
}
.hero h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.hero p{
  color:rgba(255,255,255,.96);font-size:clamp(1.05rem,2vw,1.25rem);
  max-width:34rem;text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* Kompakter Seitenkopf für Unterseiten */
.seitenkopf{
  position:relative;isolation:isolate;color:#fff;
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,6vw,4rem);
}
.seitenkopf>picture,.seitenkopf>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.seitenkopf::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(28,38,38,.8) 0%,rgba(28,38,38,.6) 60%,rgba(28,38,38,.35) 100%)}
.seitenkopf h1{color:#fff;margin-bottom:.3em;text-shadow:0 2px 18px rgba(0,0,0,.3)}
.seitenkopf p{color:rgba(255,255,255,.95);max-width:40rem;margin-bottom:0;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.seitenkopf .vorzeile{color:rgba(255,255,255,.9)}

/* Schlichter Seitenkopf ohne Bild — für Rechtstexte und 404 */
.seitenkopf-schlicht{
  background:var(--color-primary-tint);
  border-bottom:1px solid var(--color-border);
  padding:clamp(2.5rem,6vw,4rem) 0;
}
.seitenkopf-schlicht p{margin-bottom:0}

/* Brotkrumen */
.brotkrumen{font-size:.88rem;padding:1rem 0 0}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;max-width:none}
.brotkrumen li::after{content:'›';margin-left:.4rem;color:var(--color-muted)}
.brotkrumen li:last-child::after{content:''}
.brotkrumen a{color:var(--color-text);text-decoration:none}
.brotkrumen a:hover{color:var(--color-primary-dark);text-decoration:underline}
.brotkrumen [aria-current="page"]{color:var(--color-muted)}


/* ── 7. Vertrauensleiste ──────────────────────────────────────────────── */

.vertrauen{background:var(--color-primary-tint);border-bottom:1px solid var(--color-border)}
.vertrauen ul{
  list-style:none;margin:0;padding:1.6rem 0;max-width:none;
  display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));
}
.vertrauen li{display:flex;gap:.75rem;align-items:flex-start;font-size:.95rem;line-height:1.45;margin:0}
.vertrauen svg{flex:0 0 24px;width:24px;height:24px;color:var(--color-primary);margin-top:1px}
.vertrauen b{display:block;color:var(--color-heading);font-weight:600}


/* ── 8. Abschnitte und Raster ─────────────────────────────────────────── */

section{padding:clamp(3.5rem,8vw,6rem) 0}
section.schmal{padding:clamp(2.5rem,5vw,3.5rem) 0}
.flaeche-hell{background:var(--color-bg-soft)}
.flaeche-tuerkis{background:var(--color-primary-tint)}

.kopfzeile{max-width:44rem;margin:0 auto clamp(2.2rem,5vw,3.2rem);text-align:center}
.kopfzeile p{margin-left:auto;margin-right:auto}
.kopfzeile :last-child{margin-bottom:0}

.raster{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
.raster-2{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}


/* ── 9. Karten ────────────────────────────────────────────────────────── */

.karte{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .25s,box-shadow .25s;
}
.karte:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.karte-bild{aspect-ratio:4/3;overflow:hidden;background:var(--color-primary-light)}
.karte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.karte:hover .karte-bild img{transform:scale(1.04)}
.karte-text{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.4rem}
.karte p{font-size:.97rem;margin-bottom:1.1rem;flex:1}

/* Karte ohne Bild — für Hinweise und Tipps */
.info-karte{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow);
}
.info-karte h3{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.info-karte h3 svg{flex:0 0 26px;width:26px;height:26px;color:var(--color-primary)}
.info-karte p:last-child{margin-bottom:0}


/* ── 10. Bild/Text-Blöcke ─────────────────────────────────────────────── */

.duo{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:860px){
  .duo{grid-template-columns:1fr 1fr}
  .duo.gedreht .duo-bild{order:2}
}
.duo-bild img{border-radius:var(--radius);box-shadow:var(--shadow)}
.duo :last-child{margin-bottom:0}


/* ── 11. Zitat- und Ruhe-Bereiche ─────────────────────────────────────── */

.zitat{position:relative;isolation:isolate;color:#fff;text-align:center;padding:clamp(4rem,9vw,7rem) 0}
.zitat>picture,.zitat>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.zitat::after{content:'';position:absolute;inset:0;background:rgba(30,55,55,.62);z-index:-1}
.zitat blockquote{
  margin:0 auto;max-width:38rem;font-family:var(--font-serif);
  font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.4;
}
.zitat cite{
  display:block;margin-top:1.4rem;font-family:var(--font-sans);font-style:normal;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85);
}


/* ── 12. Inhaltsblöcke ────────────────────────────────────────────────── */

/* Anker-Abschnitt auf den Sammelseiten */
.anker-block{padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--color-border)}
.anker-block:first-of-type{border-top:0}
.anker-block .duo-bild img{border-radius:var(--radius)}

.hinweis-box{
  background:var(--color-primary-tint);border-left:4px solid var(--color-primary);
  border-radius:0 var(--radius-small) var(--radius-small) 0;
  padding:1.3rem 1.5rem;margin:2rem 0;max-width:var(--width-text);
}
.hinweis-box :last-child{margin-bottom:0}
.hinweis-box h3{font-size:1.15rem;margin-bottom:.5rem}

/* Aufzählung mit Häkchen */
.liste-haken{list-style:none;padding:0}
.liste-haken li{position:relative;padding-left:1.9rem;margin-bottom:.6em}
.liste-haken li::before{
  content:'';position:absolute;left:0;top:.45em;width:1.15rem;height:1.15rem;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b7d7e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
}

/* Zwei-/Dreispaltige Textblöcke */
.text-spalten{display:grid;gap:1.6rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.text-spalten p{max-width:none}

/* Definitionsliste für Fakten */
.fakten{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));margin:0}
.fakten dt{font-family:var(--font-serif);font-size:1.9rem;color:var(--color-primary-dark);line-height:1.1;margin-bottom:.3rem}
.fakten dd{margin:0;font-size:.93rem;line-height:1.55}


/* ── 13. Galerie ──────────────────────────────────────────────────────── */

.galerie{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.galerie figure{margin:0}
.galerie img{width:100%;height:clamp(200px,26vw,300px);object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
.galerie figcaption{font-size:.85rem;color:var(--color-muted);padding-top:.5rem}

/* Schmal dargestellte Einzelbilder. NICHT per style="max-width:…px" lösen —
   ein Inline-Wert überschreibt die Regel img{max-width:100%} und lässt das
   Bild auf schmalen Geräten aus dem Layout laufen. */
.bild-schmal{width:100%;max-width:400px}
.bild-schmaler{width:100%;max-width:340px}

.bild-mit-nachweis{margin:0}
.bild-mit-nachweis img{border-radius:var(--radius);box-shadow:var(--shadow)}
.bild-mit-nachweis figcaption{font-size:.85rem;color:var(--color-muted);padding-top:.6rem}


/* ── 14. Preise ───────────────────────────────────────────────────────── */

.preise{
  max-width:640px;margin:0 auto;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.preise dl{margin:0;display:grid;grid-template-columns:1fr auto}
.preise dt,.preise dd{margin:0;padding:.95rem 1.5rem;border-bottom:1px solid var(--color-border)}
.preise dt{font-weight:500;color:var(--color-heading)}
.preise dd{text-align:right;font-weight:600;color:var(--color-primary-dark);white-space:nowrap}
.preise dl>:nth-last-child(-n+2){border-bottom:0}
.preise dt small{color:var(--color-text);font-weight:400}
.preis-fuss{font-size:.9rem;text-align:center;margin:1.2rem auto 0;color:var(--color-text)}


/* ── 15. Sprungmarken-Leiste ──────────────────────────────────────────── */

.sprungmarken{
  background:#fff;border-bottom:1px solid var(--color-border);
  position:sticky;top:var(--header-height);z-index:40;
}
.sprungmarken .wrap{display:flex;align-items:center;gap:.6rem;padding-top:.7rem;padding-bottom:.7rem;overflow-x:auto;scrollbar-width:thin}
.sprungmarken b{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap;flex:0 0 auto;font-weight:600}
.sprungmarken a{
  flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;
  padding:.4rem .9rem;font-size:.92rem;font-weight:500;
  color:var(--color-text);text-decoration:none;border:1px solid var(--color-border);
  border-radius:999px;white-space:nowrap;
}
.sprungmarken a:hover{color:var(--color-primary-dark);border-color:var(--color-primary);background:var(--color-primary-tint)}


/* ── 16. Beiträge „Aktuelles" ─────────────────────────────────────────
   WICHTIG: Alle Beiträge haben exakt dieselbe Struktur und dieselben
   Klassennamen. Sie sollen später ohne Umbau in eine JSON-Datei mit
   Redaktionsformular ausgelagert werden können. Bitte keine Sonderlayouts
   und keine handverzierten Einzelfälle anlegen.                          */

.beitraege{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}

.beitrag{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.beitrag-bild{aspect-ratio:16/9;overflow:hidden;background:var(--color-primary-light)}
.beitrag-bild img{width:100%;height:100%;object-fit:cover}
.beitrag-text{padding:1.5rem 1.6rem 1.7rem;display:flex;flex-direction:column;flex:1}
.beitrag-datum{
  font-size:.82rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-primary-dark);margin:0 0 .5rem;
}
.beitrag-titel{margin:0 0 .7rem;font-size:clamp(1.3rem,2.4vw,1.65rem)}
.beitrag-anriss{margin-bottom:1rem}
.beitrag-inhalt{margin-top:.4rem}
.beitrag-inhalt p:last-child{margin-bottom:0}

/* Aufklappen — funktioniert auch ohne JavaScript */
.beitrag details{margin-top:auto}
.beitrag summary{
  display:inline-flex;align-items:center;gap:.45em;cursor:pointer;
  font-weight:600;font-size:.95rem;color:var(--color-primary-dark);
  list-style:none;padding:.4rem 0;min-height:44px;
}
.beitrag summary::-webkit-details-marker{display:none}
.beitrag summary::after{content:'▾';transition:transform .2s;display:inline-block}
.beitrag details[open] summary::after{transform:rotate(180deg)}
.beitrag details[open] summary .text-zu{display:inline}
.beitrag details[open] summary .text-auf{display:none}
.beitrag summary .text-zu{display:none}

/* Hervorgehobener Beitrag ganz oben */
.beitrag-gross{grid-column:1/-1}
@media(min-width:860px){
  .beitrag-gross{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
  .beitrag-gross .beitrag-bild{aspect-ratio:auto;height:100%}
  .beitrag-gross .beitrag-text{padding:2rem 2.2rem}
}

/* Archivbereich — optisch zurückgenommen */
.archiv .beitrag{background:var(--color-bg-soft);box-shadow:none}
.archiv .beitrag-bild img{filter:saturate(.55) opacity(.85)}
.archiv .beitrag-datum{color:var(--color-muted)}


/* ── 17. Formular ─────────────────────────────────────────────────────── */

.formular{max-width:640px}
.feld{margin-bottom:1.3rem}
.feld label{display:block;font-weight:600;color:var(--color-heading);margin-bottom:.4rem;font-size:.97rem}
.feld .pflicht{color:var(--color-accent-dark)}
.feld input,.feld textarea,.feld select{
  width:100%;min-height:48px;padding:.7rem .9rem;
  font-family:var(--font-sans);font-size:1rem;color:var(--color-text);
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-small);
}
.feld textarea{min-height:150px;resize:vertical;line-height:1.6}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--color-primary);outline-offset:1px}
.feld .hilfe{font-size:.86rem;color:var(--color-muted);margin:.35rem 0 0}
.feld-fehler input,.feld-fehler textarea,.feld-fehler select{border-color:var(--color-error)}
.fehlermeldung{color:var(--color-error);font-size:.88rem;margin:.35rem 0 0;font-weight:500}

.feld-checkbox{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1.6rem;min-height:44px}
.feld-checkbox input{width:24px;height:24px;min-height:24px;flex:0 0 24px;margin-top:.35rem;accent-color:var(--color-primary-dark)}
.feld-checkbox label{font-weight:400;font-size:.95rem;line-height:1.55;margin:0;color:var(--color-text);padding:.5rem 0;cursor:pointer}

/* Honeypot — für Menschen unsichtbar, für Bots verlockend */
.honigtopf{
  position:absolute!important;left:-9999px;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

.meldung{padding:1.2rem 1.5rem;border-radius:var(--radius-small);margin-bottom:2rem;max-width:640px}
.meldung-erfolg{background:var(--color-primary-light);border-left:4px solid var(--color-success)}
.meldung-fehler{background:#fdeceb;border-left:4px solid var(--color-error)}
.meldung :last-child{margin-bottom:0}
.meldung h2{font-size:1.4rem;margin-bottom:.4rem}


/* ── 18. Karte und Anfahrt ────────────────────────────────────────────── */

.karte-statisch{margin:0}
.karte-statisch img{width:100%;border-radius:var(--radius);border:1px solid var(--color-border)}
.karte-statisch figcaption{font-size:.85rem;color:var(--color-muted);padding-top:.6rem}
.karte-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.2rem}

.kontaktdaten{list-style:none;padding:0;margin:0 0 1.8rem}
.kontaktdaten li{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}
.kontaktdaten svg{flex:0 0 22px;width:22px;height:22px;color:var(--color-primary);margin-top:.25rem}
.kontaktdaten b{display:block;color:var(--color-heading)}


/* ── 19. Eversports-Einbettung (Zwei-Klick-Lösung) ────────────────────
   Das iFrame wird NICHT automatisch geladen. Erst nach aktiver Einwilligung
   fügt assets/js/main.js es ein. Siehe dort die Konstante EVERSPORTS_URL.  */

.einbettung{
  border:1px solid var(--color-border);border-radius:var(--radius);
  background:var(--color-primary-tint);overflow:hidden;
}
.einbettung-platzhalter{padding:clamp(1.8rem,5vw,3rem) clamp(1.2rem,4vw,2.5rem);text-align:center}
.einbettung-platzhalter svg{width:52px;height:52px;color:var(--color-primary);margin:0 auto 1rem}
.einbettung-platzhalter h2,.einbettung-platzhalter h3{margin-bottom:.6rem}
.einbettung-platzhalter p{max-width:46rem;margin-left:auto;margin-right:auto;font-size:.98rem}
.einbettung-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.4rem}
.einbettung-merken{
  display:flex;gap:.6rem;align-items:center;justify-content:center;
  margin-top:1.2rem;font-size:.9rem;
}
.einbettung-merken input{width:24px;height:24px;flex:0 0 24px;accent-color:var(--color-primary-dark)}
/* 44 px hohe Tippfläche um die Beschriftung */
.einbettung-merken label{display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.einbettung-rahmen{width:100%;border:0;display:block;min-height:900px;background:#fff}


/* ── 20. Cookie-Banner ────────────────────────────────────────────────
   Schlank, ohne externen Dienst, tastaturbedienbar. „Alle akzeptieren"
   und „Ablehnen" sind bewusst GLEICHWERTIG gestaltet — ungleiche
   Gestaltung ist abmahnfähig.                                            */

.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#fff;border-top:2px solid var(--color-primary);
  box-shadow:0 -4px 24px rgba(40,50,50,.16);
  padding:1.3rem clamp(1rem,4vw,2rem);display:none;
}
.cookie-banner.ist-sichtbar{display:block}
.cookie-innen{max-width:var(--width-content);margin:0 auto}
.cookie-innen h2{font-size:1.3rem;margin-bottom:.4rem}
.cookie-innen p{font-size:.95rem;margin-bottom:1rem;max-width:70ch}
.cookie-knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
/* Gleiche Größe, gleiches Gewicht für Zustimmung und Ablehnung */
.cookie-knoepfe .btn-zustimmen,.cookie-knoepfe .btn-ablehnen{
  min-width:190px;background:var(--color-primary-dark);color:#fff;border-color:var(--color-primary-dark);
}
.cookie-knoepfe .btn-zustimmen:hover,.cookie-knoepfe .btn-ablehnen:hover{background:var(--color-primary-darker);border-color:var(--color-primary-darker);color:#fff}
.cookie-knoepfe .btn-einstellungen{background:transparent;color:var(--color-text);border-color:var(--color-border)}
.cookie-knoepfe .btn-einstellungen:hover{border-color:var(--color-primary);color:var(--color-primary-dark)}

.cookie-details{margin-top:1.2rem;border-top:1px solid var(--color-border);padding-top:1.2rem;display:none}
.cookie-details.ist-offen{display:block}
.cookie-kategorie{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.1rem}
.cookie-kategorie input{width:24px;height:24px;flex:0 0 24px;margin-top:.2rem;accent-color:var(--color-primary-dark)}
.cookie-kategorie label{font-weight:600;color:var(--color-heading);display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.cookie-kategorie p{font-size:.9rem;margin:.2rem 0 0}


/* ── 21. Abschluss-Block ──────────────────────────────────────────────── */

.abschluss{background:var(--color-primary-dark);color:#fff;text-align:center}
.abschluss h2{color:#fff}
.abschluss p{color:rgba(255,255,255,.93);margin-left:auto;margin-right:auto}
.abschluss-knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:1.8rem}


/* ── 22. Fußbereich ───────────────────────────────────────────────────── */

.fuss{background:var(--color-heading);color:#cfcfcd;font-size:.95rem;padding:clamp(2.5rem,6vw,4rem) 0 0}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.fuss h2{
  color:#fff;font-family:var(--font-sans);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:1rem;font-weight:600;
}
.fuss a{color:#cfcfcd;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss ul{list-style:none;margin:0;padding:0;max-width:none}
.fuss li{margin-bottom:0}
/* Mindestens 44 px hohe Tippfläche für die Links im Fußbereich */
.fuss li a,.fuss li button.textlink{display:inline-flex;align-items:center;min-height:44px}
.fuss p{max-width:none}
.fuss-klein{font-size:.88rem;color:#b8b8b5}   /* 5,30:1 auf dem Fußhintergrund */
.fuss-unten{
  margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.14);padding:1.2rem 0;
  font-size:.85rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  align-items:center;
}
.fuss-unten a{display:inline-flex;align-items:center;min-height:44px}
.fuss button.textlink{
  background:none;border:0;padding:0;font:inherit;color:#cfcfcd;
  text-decoration:none;cursor:pointer;text-align:left;
}
.fuss button.textlink:hover{color:#fff;text-decoration:underline}


/* ── 23. Rechtstexte ──────────────────────────────────────────────────── */

.rechtstext{max-width:820px}
.rechtstext h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}
.rechtstext h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-size:1.2rem;margin-top:1.8rem}
.rechtstext p,.rechtstext ul,.rechtstext ol{max-width:none}
.rechtstext address{font-style:normal;line-height:1.8}
.inhaltsverzeichnis{
  background:var(--color-primary-tint);border-radius:var(--radius);
  padding:1.4rem 1.6rem;margin-bottom:2.5rem;
}
.inhaltsverzeichnis h2{font-size:1.05rem;margin:0 0 .8rem;border:0;padding:0;font-family:var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.inhaltsverzeichnis ol{margin:0;padding-left:1.2rem;max-width:none}
.inhaltsverzeichnis li{margin-bottom:.35em}


/* ── 24. Animationen ──────────────────────────────────────────────────
   Nur dezentes Einblenden beim Scrollen. Wer reduzierte Bewegung
   eingestellt hat, sieht die Inhalte sofort und ohne Bewegung.           */

.einblenden{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.einblenden.ist-sichtbar{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .einblenden{opacity:1;transform:none}
}

/* Kein JavaScript? Dann sind alle Inhalte trotzdem sichtbar. */
.kein-js .einblenden{opacity:1;transform:none}


/* ── 25. Sehr schmale Geräte (ab 360 px) ──────────────────────────────── */

/* Unter 360 px (z. B. iPhone SE der ersten Generation) reichen Logo,
   Schriftzug, Buchungs-Button und Burger nicht nebeneinander. Der
   Schriftzug wird deshalb nur OPTISCH ausgeblendet — für Screenreader
   bleibt er erhalten, damit der Logo-Link seinen Namen behält. */
@media(max-width:359px){
  .marke-text{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

@media(max-width:600px){
  /* Kopfleiste mobil: Logo und Schriftzug möglichst groß, „Wülfrath“ sichtbar.
     Logo und Schrift wachsen mit der Bildschirmbreite (clamp), damit auch
     360-px-Geräte Logo, Schriftzug, Buchungs-Button und Menü in einer Zeile
     unterbringen. Ab ca. 390 px gelten die vollen Werte (56 px / 1,1 rem). */
  .kopf-innen{gap:.45rem;padding-left:.75rem;padding-right:.75rem}
  .marke{min-width:0;gap:.5rem}
  .marke img,.kopf.ist-gescrollt .marke img{
    flex-basis:clamp(50px,14.4vw,56px);width:clamp(50px,14.4vw,56px);height:clamp(50px,14.4vw,56px);
  }
  .marke-name{font-size:clamp(1rem,4.4vw,1.1rem)}
  .marke-ort{display:block;font-size:.62rem;letter-spacing:.14em}
  .kopf .btn{padding:.55rem .75rem;font-size:.84rem}
  .burger{width:44px;height:44px;flex-basis:44px}
  .preise dt,.preise dd{padding:.8rem 1rem}
  .preise dd{white-space:normal}
  .preise dt small{display:block}
  .cookie-knoepfe .btn-zustimmen,.cookie-knoepfe .btn-ablehnen{min-width:0;flex:1 1 100%}
  .cookie-knoepfe .btn-einstellungen{flex:1 1 100%}
  .abschluss-knoepfe .btn,.hero-knoepfe .btn{flex:1 1 100%}
}