/* ==========================================================================
   Frisuren Krug – Stylesheet
   --------------------------------------------------------------------------
   Mobile first. Sprünge:  768px Tablet · 1024px Navigation sichtbar ·
   1200px Desktop (Entwurf, 1440 px breit). Inhaltsbreite 1180px.

   Aufbau
     1  Werte (Farben, Schrift, Maße)
     2  Schrift
     3  Grundlagen
     4  Bausteine: Raster, Typo, Knöpfe, Striche
     5  Kopf und Menü
     6  Fuß und Betriebe
     7  Titelband
     8  Startseite
     9  Standorte
    10  Galerie und Lightbox
    11  Produkte
    12  Über uns, Seminar
    13  Kontakt und Formulare
    14  Rechtliches, 404, Inhaltssperre, Einwilligungs-Banner
    15  Bewegung, Druck
   ========================================================================== */


/* 1 · Werte -------------------------------------------------------------- */

:root {
  --rot:          #ff020d;
  --rot-dunkel:   #d90009;
  --schwarz:      #1c1c1b;
  --ueberschrift: #2e2e2e;
  --text:         #626262;
  --text-2:       #868686;
  --text-3:       #9a9a9a;
  --linie:        #ececec;
  --rahmen:       #e4e4e4;
  --feld-rahmen:  #d8d8d8;
  --band:         #f2f2f2;
  --flaeche:      #f7f7f7;
  --weiss:        #ffffff;
  --aussen:       #e2e2e2;  /* Fläche neben der Seite auf Bildschirmen über 1920px */
  --fuss-grund:   #1c1c1b;
  --fuss-text:    #9a9a97;
  --fuss-link:    #e4e4e2;

  --schrift: Lato, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --breite: 1180px;
  --seite-max: 1920px;      /* Boxed-Layout: Breite des Hero-Fotos */
  --rand: 20px;
  --abstand: 56px;          /* senkrechter Abschnittsabstand */
  --kopf-hoehe: 68px;
}

@media (min-width: 768px) {
  :root { --rand: 40px; --abstand: 72px; }
}
@media (min-width: 1024px) {
  :root { --kopf-hoehe: 92px; }
}
@media (min-width: 1200px) {
  :root { --rand: 60px; --abstand: 88px; }
}


/* 2 · Schrift (lokal, SIL OFL 1.1 – siehe assets/fonts/OFL.txt) ------------ */

@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lato-latin-400.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: Lato; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/lato-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: Lato; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lato-latin-700.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: Lato; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/lato-latin-ext-700.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: Lato; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/lato-latin-900.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: Lato; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/lato-latin-ext-900.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }


/* 3 · Grundlagen --------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--aussen);
}

/* Boxed: Die Seite wächst nicht über die Breite des Hero-Fotos hinaus. */
body {
  max-width: var(--seite-max);
  margin: 0 auto;
  background: var(--weiss);
  color: var(--text);
  font: 400 16px/1.7 var(--schrift);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menue-offen { overflow: hidden; }

@media (min-width: 1921px) {
  body { box-shadow: 0 0 40px rgba(0, 0, 0, .08); }
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ueberschrift); letter-spacing: .01em; line-height: 1.25; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }

a { color: inherit; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s, opacity .15s; }
a:hover { color: var(--rot); }

:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
main:focus { outline: none; }

.icon { flex-shrink: 0; }
.rot { color: var(--rot); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 18px; background: var(--schwarz); color: var(--weiss); font-weight: 700;
}
.skiplink:focus { top: 12px; color: var(--weiss); }


/* 4 · Bausteine ---------------------------------------------------------- */

.raster {
  width: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin: 0 auto;
  padding: 0 var(--rand);
}

.abschnitt { padding: var(--abstand) 0; }
.abschnitt--grau { background: var(--band); }
.abschnitt--ohne-unten { padding-bottom: 0; }
.abschnitt--ohne-oben { padding-top: 0; }
.abschnitt--einleitung { padding-bottom: 0; }
.abschnitt--anschluss { padding-top: calc(var(--abstand) * .7); }
.abschnitt--anschluss-unten { padding-top: 0; }
.abschnitt--schmal { padding: calc(var(--abstand) * .8) 0; }

/* 12er-Raster mit rotem Strich in Spalte 1 (Willkommen, Einleitungen) */
.raster--zwoelf { display: grid; gap: 18px; }
.strich--spalte { width: 56px; }
@media (min-width: 1024px) {
  .raster--zwoelf { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px; align-items: start; }
  .raster--zwoelf > .strich--spalte { grid-column: span 1; width: auto; margin-top: 18px; }
  .raster--zwoelf > :not(.strich) { grid-column: span 11; }
}

.rubrik {
  font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5; color: var(--text-3);
}
.rubrik--rot { color: var(--rot); letter-spacing: .2em; }
.rubrik--icon { display: flex; align-items: center; gap: 10px; }

.strich { display: block; width: 40px; height: 2px; margin-top: 14px; background: var(--rot); }
.strich--lang { width: 56px; height: 3px; margin-top: 6px; }
.strich--hero { width: 84px; height: 3px; margin: 0; }
.strich--spalte { height: 3px; margin: 0; background: var(--rot); display: block; }

.trenner { display: block; height: 1px; background: var(--linie); }

.titel { font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--ueberschrift); }
.titel--versal { text-transform: uppercase; letter-spacing: .08em; }
.titel-gross { font-size: 26px; font-weight: 900; letter-spacing: .04em; color: var(--schwarz); }
.titel-leicht { font-size: 25px; font-weight: 400; line-height: 1.3; color: var(--schwarz); max-width: 820px; text-wrap: pretty; }
.titel-schwer { font-size: 26px; font-weight: 900; letter-spacing: .06em; color: var(--schwarz); }

@media (min-width: 1200px) {
  .titel { font-size: 26px; }
  .titel-gross { font-size: 32px; }
  .titel-leicht { font-size: 32px; }
  .titel-schwer { font-size: 32px; }
}

.text { font-size: 16px; line-height: 1.8; color: var(--text); text-wrap: pretty; }
.text-lead { font-size: 16px; font-weight: 400; line-height: 1.8; color: var(--text); max-width: 820px; text-wrap: pretty; }
.text-klein { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.text-leise { color: var(--text-2); }
@media (min-width: 1200px) { .text-lead { font-size: 17px; line-height: 1.85; } }

.einleitung { display: flex; flex-direction: column; gap: 16px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 12px 22px; border: 1px solid transparent; border-radius: 0;
  font: 700 12px/1.2 var(--schrift); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; text-align: center;
}
.knopf--rot { background: var(--rot); color: var(--weiss); }
.knopf--rot:hover { background: var(--rot-dunkel); color: var(--weiss); }
.knopf--rahmen { border-color: var(--feld-rahmen); color: var(--text); }
.knopf--rahmen:hover { border-color: var(--rot); color: var(--rot); }
.knopf--schwarz { background: var(--schwarz); color: var(--weiss); padding: 15px 28px; }
.knopf--schwarz:hover { background: #000; color: var(--weiss); }
.knopf--gross { padding: 15px 34px; letter-spacing: .14em; }
.knopf--links { align-self: flex-start; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

.link-pfeil {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rot);
}
.link-pfeil:hover { color: var(--schwarz); }
.link-unterstrichen { color: var(--schwarz); border-bottom: 1px solid var(--rot); }
.link-zurueck {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--schwarz);
}

.angabe { display: flex; flex-direction: column; gap: 10px; }


/* 5 · Kopf und Menü ------------------------------------------------------ */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--weiss); border-bottom: 1px solid #e8e8e8;
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--kopf-hoehe);
  max-width: calc(1440px - 2 * 0px); margin: 0 auto; padding: 0 var(--rand);
}
.kopf__logo { display: block; flex-shrink: 0; }
.kopf__logo img { width: 150px; }

.kopf__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-right: -12px; padding: 0;
  border: 0; background: none; color: var(--schwarz); cursor: pointer;
}
.kopf__burger-zu, .menue-offen .kopf__burger-auf { display: none; }
.menue-offen .kopf__burger-zu { display: block; }

/* Phone/Tablet: Vollbild-Overlay unter dem Kopf */
.menue {
  display: none;
  position: fixed; left: 0; right: 0; top: var(--kopf-hoehe); bottom: 0;
  flex-direction: column; gap: 28px;
  padding: 24px var(--rand) 40px; overflow-y: auto;
  background: var(--weiss);
}
.menue-offen .menue { display: flex; }
.menue__liste { display: flex; flex-direction: column; }
.menue__link {
  display: flex; align-items: center; min-height: 56px; border-bottom: 1px solid var(--linie);
  font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.menue__link[aria-current] { position: relative; color: var(--schwarz); }
/* roter Strich links neben der Fluchtlinie, der Text bleibt bündig */
.menue__link[aria-current]::before {
  content: ""; position: absolute; top: 0; bottom: -1px; left: -14px; width: 3px; background: var(--rot);
}
.menue__salon { align-self: flex-start; }

/* Untermenü (Standorte): mobil eingerückt unter dem Hauptpunkt */
.menue__pfeil { display: none; }
/* nur sichtbar, wenn der Hauptpunkt aktiv ist (Übersicht oder ein Salon) */
.menue__unter { display: none; flex-direction: column; padding: 4px 0 8px 14px; border-bottom: 1px solid var(--linie); }
.menue__unterlink {
  display: flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 400; letter-spacing: .06em; color: var(--text-2);
}
.menue__unterlink[aria-current="page"] { color: var(--schwarz); font-weight: 700; }
.menue__punkt--offen .menue__unter { display: flex; }

/* Weitere Betriebe am Ende des mobilen Menüs; Höhen gleichen die Seitenverhältnisse aus */
.menue__betriebe { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; padding-top: 28px; border-top: 1px solid var(--linie); }
.menue__betriebe .rubrik { color: #a0a0a0; }
/* eine Reihe; auf sehr schmalen Screens schrumpfen die Logos im Verhältnis mit */
.menue__logos { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 420px; }
.menue__logos li { flex: 0 1 auto; min-width: 0; }
.menue__logos a { display: flex; align-items: center; min-height: 44px; }
.menue__logo { width: auto; height: auto; max-width: 100%; }
.menue__logo--42 { max-height: 46px; }
.menue__logo--26 { max-height: 20px; }
.menue__logo--34 { max-height: 34px; }
.no-js .menue__betriebe { display: none; }

/* Ohne JavaScript: Menü als Liste unter dem Logo */
.no-js .kopf__burger { display: none; }
.no-js .kopf__innen { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
.no-js .menue { display: flex; position: static; padding: 0; width: 100%; overflow: visible; }

@media (min-width: 1024px) {
  .kopf__logo img { width: 170px; }
  .kopf__burger { display: none; }
  .menue,
  .no-js .menue {
    display: flex; position: static; flex-direction: row; align-items: center; gap: 24px;
    width: auto; padding: 0; overflow: visible; background: none;
  }
  .no-js .kopf__innen { flex-wrap: nowrap; height: var(--kopf-hoehe); padding-top: 0; padding-bottom: 0; }
  .menue__liste { flex-direction: row; gap: 24px; }
  .menue__link {
    min-height: 0; padding: 34px 0 32px; border-bottom: 2px solid transparent;
    font-size: 12px; color: var(--text-2);
  }
  .menue__link[aria-current] { color: var(--schwarz); border-bottom-color: var(--rot); }
  .menue__link[aria-current]::before { display: none; }
  .menue__link:hover { color: var(--schwarz); }
  .menue__salon { margin-left: 6px; align-self: center; }
  .menue__betriebe { display: none; }

  /* Untermenü als Aufklapper bei Hover/Fokus */
  .menue__punkt--unter { position: relative; }
  .menue__pfeil { display: inline-block; margin-left: 6px; transition: transform .2s; }
  .menue__punkt--unter:hover .menue__pfeil,
  .menue__punkt--unter:focus-within .menue__pfeil { transform: rotate(180deg); }
  .menue__unter {
    /* -2px: der rote Rand liegt genau auf der Unterstreichung des Hauptpunkts */
    display: flex; position: absolute; top: calc(100% - 2px); left: -22px; z-index: 60; min-width: 210px;
    padding: 10px 0; border: 1px solid #e8e8e8; border-top: 2px solid var(--rot);
    background: var(--weiss); box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
    visibility: hidden; opacity: 0; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
  }
  .menue__punkt--unter:hover .menue__unter,
  .menue__punkt--unter:focus-within .menue__unter {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .18s, transform .18s, visibility 0s;
  }
  .menue__unterlink {
    min-height: 0; padding: 11px 22px;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  }
  .menue__unterlink:hover { color: var(--schwarz); background: var(--flaeche); }
  .menue__unterlink[aria-current="page"] { box-shadow: inset 2px 0 0 var(--rot); }
}
@media (min-width: 1200px) {
  .kopf__logo img { width: 186px; }
  .menue, .menue__liste { gap: 34px; }
  .menue__salon { margin-left: 10px; }
}


/* 6 · Fuß und Betriebe --------------------------------------------------- */

.betriebe { padding: 40px 0; background: #fafafa; border-top: 1px solid #ededed; }
.betriebe__innen { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.betriebe .rubrik { color: #a0a0a0; }
.betriebe__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 48px; }
.betriebe__logos a { display: flex; align-items: center; min-height: 44px; opacity: .68; }
.betriebe__logos a:hover { opacity: 1; }
/* Klasse = Höhe laut Entwurf (inc/config.php), angezeigt rund 30 % größer */
.betriebe__logo { width: auto; max-width: 100%; }
.betriebe__logo--42 { height: 54px; }
.betriebe__logo--26 { height: 34px; }
.betriebe__logo--34 { height: 44px; }
@media (min-width: 768px) {
  .betriebe { padding: 44px 0; }
  .betriebe__innen { flex-direction: row; justify-content: space-between; gap: 40px; }
  .betriebe__logos { gap: 62px; }
}

/* Startseite: Betriebe groß – Überschrift mittig, darunter die Logos in einer Reihe.
   Die Logos haben sehr verschiedene Seitenverhältnisse (2:1, 6:1, 3:1); die Höhen
   sind so gewählt, dass sie optisch gleich groß wirken (rund 230–270 px breit). */
.seite-startseite .betriebe { padding: 56px 0 64px; }
.seite-startseite .betriebe__innen { flex-direction: column; justify-content: center; gap: 36px; }
.seite-startseite .betriebe .rubrik {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 20px; font-weight: 900; letter-spacing: .14em; color: var(--schwarz); text-align: center;
}
.seite-startseite .betriebe .rubrik::after { content: ""; width: 40px; height: 2px; background: var(--rot); }
.seite-startseite .betriebe__logos { flex-direction: column; gap: 40px; }
.seite-startseite .betriebe__logos a { opacity: .8; }
.seite-startseite .betriebe__logos a:hover { opacity: 1; }
.seite-startseite .betriebe__logo--42 { height: 96px; }
.seite-startseite .betriebe__logo--26 { height: 40px; }
.seite-startseite .betriebe__logo--34 { height: 70px; }
@media (min-width: 768px) {
  .seite-startseite .betriebe { padding: 72px 0 80px; }
  .seite-startseite .betriebe__innen { flex-direction: column; gap: 44px; }
  .seite-startseite .betriebe__logos { flex-direction: row; flex-wrap: nowrap; gap: 48px; }
  .seite-startseite .betriebe__logo--42 { height: 80px; }
  .seite-startseite .betriebe__logo--26 { height: 34px; }
  .seite-startseite .betriebe__logo--34 { height: 58px; }
}
@media (min-width: 1024px) {
  .seite-startseite .betriebe .rubrik { font-size: 24px; }
  .seite-startseite .betriebe__logos { gap: 72px; }
  .seite-startseite .betriebe__logo--42 { height: 110px; }
  .seite-startseite .betriebe__logo--26 { height: 46px; }
  .seite-startseite .betriebe__logo--34 { height: 80px; }
}
@media (min-width: 1200px) {
  .seite-startseite .betriebe { padding: 88px 0 96px; }
  .seite-startseite .betriebe__logos { gap: 100px; }
}

.fuss { padding: 36px 0; background: var(--fuss-grund); color: var(--fuss-text); }
.fuss__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.fuss__text { font-size: 13px; line-height: 1.8; flex: 1 1 100%; }
.fuss__links { display: flex; flex-wrap: wrap; font-size: 13px; line-height: 1.8; flex: 1 1 auto; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 32px; }
.fuss__links a + a::before { content: "|"; margin: 0 .55em; color: var(--fuss-text); }
.fuss a { color: var(--fuss-link); }
.fuss a:hover { color: var(--weiss); }
.fuss__socials { display: flex; gap: 8px; flex-shrink: 0; }
.fuss__social {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border: 1px solid #4a4a47;
}
.fuss__social:hover { border-color: var(--fuss-link); }
@media (min-width: 1200px) {
  .fuss { padding: 42px 0; }
  .fuss__innen { flex-wrap: nowrap; column-gap: .55em; }
  .fuss__text { flex: 0 1 auto; }
  .fuss__links { flex: 1 1 auto; }
  .fuss__links::before { content: "|"; margin-right: .55em; align-self: center; }
  .fuss__socials { margin-left: 30px; }
}


/* 7 · Titelband ---------------------------------------------------------- */

.titelband {
  position: relative; overflow: hidden;
  background-color: var(--band); border-bottom: 1px solid #e6e6e6;
}
.titelband picture { position: static; }
.titelband__grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Die Frau ist reine Dekoration und hängt am Abschnitt, nicht am Raster. */
.titelband__frau { display: none; position: absolute; right: 0; bottom: 0; height: 296px; width: auto; max-width: none; }
.titelband__innen {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: 170px; padding-top: 40px; padding-bottom: 40px;
}
.titelband .rubrik { color: var(--weiss); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.titelband__titel { font-size: 28px; font-weight: 700; letter-spacing: .03em; color: var(--schwarz); text-wrap: balance; }
@media (min-width: 768px) {
  .titelband__innen { min-height: 210px; }
  .titelband__titel { font-size: 34px; }
}
/* Ab 1100 px steht die Frau (296 px hoch) im Band – das Band ist höher, damit
   ihr Kopf nicht oben abgeschnitten wird (296 px + 28 px Luft). */
@media (min-width: 1100px) {
  .titelband__frau { display: block; }
  .titelband__innen { min-height: 324px; }
  .titelband__titel { max-width: calc(100% - 240px); }
}
@media (min-width: 1200px) {
  .titelband__innen { padding-top: 56px; padding-bottom: 56px; }
  .titelband__titel { font-size: 40px; }
}


/* 8 · Startseite --------------------------------------------------------- */

/* Hero: Foto in natürlicher Größe rechts oben verankert, wie bisher. */
.hero { position: relative; overflow: hidden; background-color: #eeeeee; }
.hero__bild { position: relative; height: 74vw; overflow: hidden; }
.hero__bild img { position: absolute; top: 0; right: 0; width: 180vw; max-width: none; height: auto; }
.hero__innen { position: relative; padding-top: 28px; padding-bottom: 44px; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.hero__logo img { width: 260px; }
.hero__lead { font-size: 17px; font-weight: 700; line-height: 1.6; color: var(--schwarz); text-wrap: pretty; max-width: 560px; }
.hero__weiter { display: none; }
/* Heller Schein, damit Text und Link auf dem grauen Foto lesbar bleiben */
.hero__lead, .hero__weiter { text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .85); }
.hero__weiter .icon { filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }

@media (min-width: 768px) {
  .hero { height: 560px; }
  .hero__bild { position: absolute; inset: 0; height: auto; }
  .hero__bild img { width: 1300px; }
  .hero__innen { height: 100%; padding-top: 150px; padding-bottom: 0; }
  .hero__text { max-width: 330px; gap: 26px; }
  .hero__logo img { width: 340px; }
  .hero__weiter {
    position: absolute; left: var(--rand); bottom: 36px;
    display: flex; align-items: center; gap: 12px; min-height: 44px;
    font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--schwarz);
  }
  .hero__weiter:hover { color: var(--rot); }
}
@media (min-width: 1200px) {
  .hero { height: 800px; }
  .hero__bild img { width: 1920px; }
  .hero__innen { padding-top: 232px; }
  .hero__text { max-width: 560px; gap: 30px; }
  .hero__logo img { width: 470px; }
  .hero__lead { font-size: 19px; }
  .hero__weiter { bottom: 44px; }
}

.abschnitt--willkommen { padding-bottom: 0; }
.willkommen { display: flex; flex-direction: column; gap: 16px; }
.willkommen__titel { font-size: 28px; font-weight: 400; line-height: 1.2; color: var(--schwarz); text-wrap: pretty; }
.willkommen__titel strong { font-weight: 900; }
.willkommen__unter { font-size: 18px; font-weight: 400; line-height: 1.6; color: #737373; max-width: 720px; text-wrap: pretty; }
@media (min-width: 1200px) {
  .abschnitt--willkommen { padding-top: 96px; }
  .willkommen__titel { font-size: 38px; }
  .willkommen__unter { font-size: 20px; }
}

.abschnitt--aktionen { padding-bottom: calc(var(--abstand) + 16px); }
.aktion { display: grid; gap: 32px; align-items: center; }
.aktion + .aktion { margin-top: var(--abstand); }
.aktion__text { display: flex; flex-direction: column; gap: 20px; }
.aktion__titel { font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--schwarz); }
.aktion__dauer { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px; background: var(--band); }
.aktion__dauer .rubrik { color: #8a8a8a; letter-spacing: .16em; }
.aktion__dauer-wert { font-size: 19px; font-weight: 700; color: var(--schwarz); }
.aktion__beschreibung { font-size: 16px; font-weight: 400; line-height: 1.7; text-wrap: pretty; }
.aktion__beschreibung strong { color: var(--schwarz); }
.aktion__bild { display: block; box-shadow: 0 20px 50px rgba(0, 0, 0, .16); }
.aktion__bild img { width: 100%; }
@media (min-width: 1200px) {
  .aktion { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 44px; }
  .aktion__text { grid-column: span 5; gap: 22px; }
  .aktion__bild { grid-column: span 7; }
}

.kopfzeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 30px; }
.kopfzeile__neben { font-size: 14px; color: var(--text-2); }
.mehr { margin-top: 30px; }


/* 9 · Standorte ---------------------------------------------------------- */

.karten { display: grid; gap: 24px; margin-top: 32px; align-items: start; }
.abschnitt--anschluss .karten { margin-top: 0; }
/* Gleich hohe Karten, Knöpfe unten auf einer Linie */
.karten--gleich { align-items: stretch; }
.karten--gleich .karte__text { flex: 1; }
.karten--gleich .karte__knoepfe { margin-top: auto; padding-top: 8px; }
@media (min-width: 768px) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; } }
@media (min-width: 1200px) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 38px; } }

.karte {
  display: flex; flex-direction: column;
  background: var(--weiss); border: 1px solid var(--rahmen); border-top: 3px solid var(--rot);
}
.karte__bild img { width: 100%; height: 230px; object-fit: cover; }
.karte__text { display: flex; flex-direction: column; gap: 16px; padding: 30px 28px; }
.karte--gross .karte__text { padding: 28px 28px 32px; }
.karte__titel { font-size: 19px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--schwarz); }
.karte--gross .karte__titel { font-size: 21px; }
.karte__titel a:hover { color: var(--rot); }
.karte__adresse { font-size: 15px; line-height: 1.7; }
.karte__zeiten { font-size: 14px; line-height: 1.8; color: #767676; }
.karte__kurz { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--text-2); text-wrap: pretty; }
.karte__zeile { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.7; }
.karte__zeile .icon { margin-top: 5px; }
.karte__zeile--zeiten { font-size: 14px; line-height: 1.8; color: #767676; }
.karte__tel { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; min-height: 44px; margin-top: -6px; margin-bottom: -6px; font-size: 15px; font-weight: 700; color: var(--schwarz); }
.karte--gross .karte__tel { font-size: 17px; }
.karte__knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
@media (min-width: 1200px) {
  .karte__text { padding: 34px 32px; }
  .karte--gross .karte__text { padding: 30px 32px 34px; }
  .karte__bild img { height: 250px; }
}
.zeiten__tag { display: inline-block; min-width: 3.4em; }

.salon { display: grid; gap: 48px; align-items: start; }
.salon__daten { display: flex; flex-direction: column; gap: 30px; }
.salon__bild { display: flex; flex-direction: column; gap: 24px; }
.angabe__adresse { font-size: 20px; font-weight: 400; line-height: 1.6; color: var(--ueberschrift); }
.angabe__zeiten { font-size: 17px; line-height: 1.9; }
.angabe__tel { display: inline-flex; align-items: center; min-height: 44px; font-size: 24px; font-weight: 700; color: var(--schwarz); align-self: flex-start; }
.angabe .rubrik--icon .icon:not(.rot) { color: var(--rot); }
@media (min-width: 1024px) {
  .salon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
  .salon__daten { gap: 34px; }
  .angabe__adresse { font-size: 21px; }
}

/* Anfahrt: Platz für die Google-Maps-Karte, vorher Inhaltssperre (Abschnitt 14) */
.anfahrt {
  position: relative; display: flex; margin-top: 30px; min-height: 360px;
  background: var(--flaeche); border: 1px solid var(--rahmen);
}
.anfahrt:focus { outline: none; }
.anfahrt .sperre { margin: auto; }
.anfahrt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.anfahrt__link { margin-top: 18px; min-height: 44px; }
@media (min-width: 768px) { .anfahrt { min-height: 420px; } }
@media (min-width: 1200px) { .anfahrt { min-height: 460px; } }

.neukauf img { display: inline-block; height: 20px; width: auto; margin: 0 .2em; vertical-align: -3px; }


/* 10 · Galerie und Lightbox ---------------------------------------------- */

.galerie-hinweis { margin-top: 14px; font-size: 14px; color: var(--text-3); }
.galerie { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 600px) { .galerie--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) {
  .galerie { gap: 24px; }
  .galerie--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .galerie--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.galerie__kachel--breit { grid-column: 1 / -1; }
.galerie a { display: block; position: relative; overflow: hidden; background: var(--linie); cursor: zoom-in; }
.galerie img { width: 100%; transition: transform .4s ease, opacity .2s; }
.galerie--zuschnitt .galerie__kachel:not(.galerie__kachel--breit) img { aspect-ratio: 4 / 3; object-fit: cover; }
.galerie a:hover img { transform: scale(1.03); }

.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(18, 18, 18, .95); color: var(--weiss);
}
.lightbox::backdrop { background: rgba(18, 18, 18, .95); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__figur { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 64px 16px; }
.lightbox__bild { max-width: min(92vw, 1600px); max-height: calc(100vh - 160px); width: auto; height: auto; object-fit: contain; }
.lightbox__text { max-width: 760px; font-size: 14px; text-align: center; color: #cfcfcf; }
.lightbox__zaehler { position: absolute; left: 20px; top: 20px; font-size: 13px; letter-spacing: .1em; color: #cfcfcf; }
.lightbox__knopf {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0; border: 0; background: rgba(0, 0, 0, .35); color: var(--weiss); cursor: pointer;
}
.lightbox__knopf:hover { background: var(--rot); }
.lightbox__zu { top: 8px; right: 8px; }
.lightbox__zurueck { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox__weiter { right: 8px; top: 50%; transform: translateY(-50%); }
.lightbox--einzeln .lightbox__zurueck, .lightbox--einzeln .lightbox__weiter, .lightbox--einzeln .lightbox__zaehler { display: none; }


/* 11 · Produkte ---------------------------------------------------------- */

.abschnitt--linie { padding-bottom: 0; }
.abschnitt--linie:last-child { padding-bottom: var(--abstand); }
.linie { display: flex; flex-direction: column; gap: 24px; }
.linie__bild { width: 100%; }
.linie__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.linie__name { font-size: 26px; font-weight: 900; letter-spacing: .08em; color: var(--schwarz); }
.linie__zusatz { font-size: 16px; font-weight: 400; color: var(--text-2); }
.produkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.produkt { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; background: var(--weiss); border: 1px solid #e8e8e8; }
.produkt__name { font-size: 15px; font-weight: 900; letter-spacing: .08em; color: var(--schwarz); }
.produkt__art { font-size: 14px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 359px) { .produkte { grid-template-columns: 1fr; } }
@media (min-width: 768px) { .produkte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1200px) {
  .linie { gap: 28px; }
  .linie__name { font-size: 30px; }
  .produkte--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .produkt { padding: 24px 22px; }
  .produkt__name { font-size: 16px; }
}


/* 12 · Über uns, Seminar ------------------------------------------------- */

.familie { display: grid; gap: 40px; align-items: start; }
.familie__text { display: flex; flex-direction: column; gap: 18px; }
.familie__motto { margin-top: 10px; font-size: 20px; font-weight: 400; line-height: 1.5; color: var(--schwarz); text-wrap: pretty; }
.familie__motto strong { font-weight: 900; }
.familie__bild { width: 100%; max-width: 460px; }
@media (min-width: 768px) { .familie { grid-template-columns: 1fr minmax(0, 40%); gap: 48px; } }
@media (min-width: 1200px) {
  .familie { grid-template-columns: 1fr 460px; gap: 60px; }
  .familie__motto { font-size: 22px; }
}

.meilensteine { margin-top: 30px; border-top: 2px solid var(--schwarz); }
.meilenstein {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--linie);
}
.meilenstein__jahr { font-size: 19px; font-weight: 900; letter-spacing: .04em; color: var(--rot); }
.meilenstein__text { font-size: 16px; line-height: 1.7; text-wrap: pretty; }
.meilenstein__text a { color: var(--schwarz); border-bottom: 1px solid var(--rot); }
@media (min-width: 768px) {
  .meilenstein { grid-template-columns: 110px 1fr; gap: 28px; padding: 20px 0; }
  .meilenstein__jahr { font-size: 22px; }
}

.saeulen { display: grid; gap: 48px; }
.saeule { display: flex; flex-direction: column; gap: 14px; }
.saeule .strich { margin: 0 0 6px; }
.saeule__titel { font-size: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--schwarz); }
.saeule .text { font-weight: 400; line-height: 1.85; }
@media (min-width: 1024px) {
  .saeulen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .saeule__titel { font-size: 20px; }
}

.aktuelles { display: grid; gap: 40px; margin-top: 30px; align-items: start; }
.beitrag { display: flex; flex-direction: column; gap: 16px; }
.beitrag img { width: 100%; }
.beitrag__titel { font-size: 17px; font-weight: 700; color: var(--schwarz); }
.beitrag:hover .beitrag__titel { color: var(--rot); }
@media (min-width: 1024px) { .aktuelles { grid-template-columns: 1fr 380px; } }

.bild-voll { width: 100%; }

.bericht { display: grid; gap: 40px; align-items: start; }
.bericht__text { display: flex; flex-direction: column; gap: 22px; }
.bericht__lead { font-size: 22px; font-weight: 400; line-height: 1.5; color: var(--schwarz); text-wrap: pretty; }
.bericht__lead strong, .bericht__zwischen strong { font-weight: 900; }
.bericht__lead em { font-style: normal; color: var(--rot); }
.bericht__zwischen { font-size: 19px; font-weight: 400; line-height: 1.6; color: var(--schwarz); }
@media (min-width: 1024px) { .bericht { grid-template-columns: 1fr 360px; gap: 60px; } }
@media (min-width: 1200px) {
  .bericht__lead { font-size: 26px; }
  .bericht__zwischen { font-size: 20px; }
}

.eckdaten { padding: 26px 28px 8px; background: var(--flaeche); border-top: 3px solid var(--rot); }
.eckdaten__zeile { display: flex; flex-direction: column; gap: 7px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.eckdaten .rubrik { color: #a0a0a0; }
.eckdaten dd { font-size: 16px; line-height: 1.6; color: var(--ueberschrift); }
.eckdaten .link-zurueck { margin: 10px 0 12px; }


/* 13 · Kontakt und Formulare --------------------------------------------- */

.kontakt { display: grid; gap: 48px; align-items: start; }
.kontakt__karte {
  display: flex; flex-direction: column; gap: 26px; padding: 30px 24px;
  border: 1px solid var(--rahmen); border-top: 3px solid var(--rot);
}
.kontakt__name { font-size: 19px; font-weight: 700; color: var(--schwarz); }
.kontakt__mobil { display: flex; flex-direction: column; gap: 2px; }
.kontakt__mobil + .kontakt__mobil { margin-top: 12px; }
.kontakt__tel { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 19px; font-weight: 700; color: var(--schwarz); align-self: flex-start; }
.kontakt__formular { display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 1024px) {
  .kontakt { grid-template-columns: 380px 1fr; gap: 48px; }
  .kontakt__karte { padding: 36px 34px; }
}
@media (min-width: 1200px) { .kontakt { grid-template-columns: 420px 1fr; gap: 60px; } }

.jobs__text { margin-top: 22px; }

.formular { margin-top: 0; }
#jobs .formular { margin-top: 30px; }
.formular__raster { display: grid; gap: 20px; padding: 24px 20px; }
.formular--grau .formular__raster { background: var(--flaeche); }
.formular--weiss .formular__raster { background: var(--weiss); }
@media (min-width: 768px) {
  .formular__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 32px; }
  .formular--weiss .formular__raster { padding: 34px; }
}

/* Honigtopf – für Menschen unsichtbar, für Bots ein normales Feld */
.formular__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.feld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.feld--breit { grid-column: 1 / -1; }
.feld__label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: #767676; }
.feld__stern { color: var(--rot); }

.feld input, .feld textarea, .feld select {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--feld-rahmen); border-radius: 0; background: var(--weiss);
  font: 400 16px/1.5 var(--schrift); color: var(--schwarz);
  appearance: none; -webkit-appearance: none;
}
.feld textarea { min-height: 130px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--schwarz); box-shadow: 0 0 0 1px var(--schwarz); }
.feld [aria-invalid="true"] { border-color: var(--rot); box-shadow: 0 0 0 1px var(--rot); }

.feld__auswahl { position: relative; display: block; }
.feld__auswahl select { padding-right: 44px; cursor: pointer; }
.feld__auswahl select:invalid, .feld__auswahl select option[value=""] { color: #a8a8a8; }
.feld__auswahl .icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: #a8a8a8; pointer-events: none; }

.feld__fehler { font-size: 13px; line-height: 1.5; color: var(--rot); }
.feld__fehler:empty { display: none; }

.haken { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; cursor: pointer; }
.haken input {
  width: 22px; height: 22px; min-height: 0; flex-shrink: 0; margin: 0; padding: 0;
  border: 1px solid #c8c8c8; background: var(--weiss); appearance: none; -webkit-appearance: none; cursor: pointer;
}
.haken input:checked { background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--rot); }
.haken input:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.haken a { color: var(--schwarz); border-bottom: 1px solid var(--rot); }

.formular__captcha:empty { display: none; }
.formular__captcha { min-height: 65px; }
.formular__fuss { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.formular__pflicht { font-size: 13px; color: var(--text-3); }
.formular__hinweis { margin-top: 12px; padding: 14px 16px; background: #fff4f4; border-left: 3px solid var(--rot); font-size: 14px; line-height: 1.6; }
.formular__hinweis a { font-weight: 700; color: var(--schwarz); }

.formular__meldung:empty { display: none; }
.formular__meldung { margin-top: 18px; padding: 18px 20px; border-left: 3px solid var(--rot); background: var(--weiss); font-size: 15px; line-height: 1.6; color: var(--schwarz); }
.formular__meldung--ok { border-left-color: #2f8a3e; background: #f1f8f2; }
.formular.wird-gesendet button[type="submit"] { opacity: .6; cursor: progress; }

/* Während des Sendens: Felder blass, Spinner darüber */
.formular__raster { position: relative; }
.formular.wird-gesendet .formular__raster { cursor: progress; }
.formular.wird-gesendet .formular__raster > * { opacity: .3; pointer-events: none; transition: opacity .2s; }
.formular.wird-gesendet .formular__raster::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border: 3px solid rgba(0, 0, 0, .12); border-top-color: var(--rot); border-radius: 50%;
  animation: formular-spinner .8s linear infinite;
}
@keyframes formular-spinner { to { transform: rotate(360deg); } }

/* Nach Erfolg nur noch die Meldung zeigen */
.formular--gesendet .formular__raster { display: none; }
.formular--gesendet .formular__meldung { margin-top: 0; }


/* 14 · Rechtliches, 404 -------------------------------------------------- */

.rechtliches { display: flex; flex-direction: column; gap: var(--abstand); }
.rechtliches__spalten { display: grid; gap: 36px; }
.rechtliches .angabe { gap: 12px; }
.rechtliches h2.rubrik { margin-top: 6px; }
@media (min-width: 768px) { .rechtliches__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rechtliches__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }

.fliesstext { max-width: 820px; }
.fliesstext > * + * { margin-top: 16px; }
.fliesstext h2 { margin-top: 44px; font-size: 21px; letter-spacing: .04em; color: var(--schwarz); }
.fliesstext h3 { margin-top: 32px; font-size: 17px; letter-spacing: .02em; color: var(--schwarz); }
.fliesstext > :first-child { margin-top: 0; }
.fliesstext p { line-height: 1.8; text-wrap: pretty; }
.fliesstext a { color: var(--schwarz); border-bottom: 1px solid var(--rot); overflow-wrap: anywhere; }

.liste-links { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.liste-links a { min-height: 44px; }

/* Inhaltssperre – fremder Dienst erst nach Einwilligung (inc/bausteine/inhaltssperre.php) */
.sperre {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 520px; padding: 32px 22px; text-align: center;
}
.sperre[hidden] { display: none; }
.sperre__icon {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  background: var(--weiss); border: 1px solid var(--rahmen); border-radius: 50%; color: var(--rot);
}
.sperre__titel { font-size: 17px; font-weight: 700; color: var(--schwarz); }
.sperre__text { font-size: 14px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.sperre__text a, .sperre__zusatz a { color: var(--schwarz); border-bottom: 1px solid var(--rot); }
.sperre__knopf { margin-top: 6px; }
.sperre__merken, .sperre__zusatz { font-size: 12px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.no-js .sperre__knopf, .no-js .sperre__merken, .no-js .js-only { display: none; }

/* im Formular: links ausgerichtet, mit Rahmen wie die Felder */
.sperre--kompakt {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 6px 16px;
  max-width: none; padding: 20px; background: var(--weiss); border: 1px solid var(--feld-rahmen); text-align: left;
}
.sperre--kompakt[hidden] { display: none; }
.sperre--kompakt .sperre__icon { grid-row: span 2; width: 44px; height: 44px; }
.sperre--kompakt .sperre__titel { font-size: 15px; align-self: center; }
.sperre--kompakt > :not(.sperre__icon) { grid-column: 2; }
.sperre--kompakt .sperre__knopf { justify-self: start; margin-top: 8px; }
.feld:focus { outline: none; }

/* Einwilligungs-Banner (inc/bausteine/einwilligung.php) – modal: oben mittig über
   abgedunkelter Seite. Die Fläche selbst ist der Backdrop und scrollt bei wenig Höhe. */
.einwilligung {
  position: fixed; inset: 0; z-index: 95;
  overflow-y: auto; overscroll-behavior: contain; padding: 12px;
  background: rgba(0, 0, 0, .6);
}
.einwilligung[hidden] { display: none; }
html.einwilligung-offen { overflow: hidden; }
.einwilligung__innen {
  display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin: 0 auto; padding: 22px 20px;
  background: var(--weiss); border-top: 3px solid var(--rot); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.einwilligung__titel { font-size: 18px; font-weight: 900; letter-spacing: .04em; color: var(--schwarz); }
.einwilligung__titel:focus { outline: none; }
.einwilligung__text { font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.einwilligung__dienste { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--flaeche); }
.einwilligung__dienste strong { color: var(--schwarz); }
.einwilligung__anbieter { color: var(--text-2); }
.einwilligung__dienste a, .einwilligung__links a { color: var(--schwarz); border-bottom: 1px solid var(--rot); }
.einwilligung__knoepfe { display: grid; gap: 10px; }
.einwilligung__knoepfe .knopf { padding: 13px 18px; }
.einwilligung__links { display: flex; gap: 18px; font-size: 13px; }
@media (min-width: 768px) {
  .einwilligung { padding: 8vh 20px 20px; }
  .einwilligung__innen { padding: 28px 32px; }
  .einwilligung__knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* 15 · Bewegung, Druck --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .galerie a:hover img { transform: none; }
}

@media print {
  .kopf, .betriebe, .fuss__socials,.fuss__links, .lightbox, .skiplink, .hero__weiter,
  .titelband__frau, .titelband__grund, .formular, .einwilligung, .anfahrt { display: none !important; }
  html { background: none; }
  body { max-width: none; box-shadow: none; color: #000; font-size: 11pt; }
  .abschnitt { padding: 16pt 0; }
  .abschnitt--grau, .titelband { background: none; }
  .hero { height: auto; }
  .hero__bild { display: none; }
  .hero__innen { padding-top: 0; }
  .fuss { background: none; color: #000; padding: 12pt 0; }
  .fuss a { color: #000; }
  a[href^="http"]:not(.knopf)::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .galerie, .karten { gap: 8pt; }
  img { break-inside: avoid; }
}