/* MY NiVEAU – Stil „Noir“: Schwarz, Weiß, Markenrot.
   Lesbarkeit: Grundschrift 18 px (folgt der Schriftgrößen-Einstellung des Browsers),
   Kontraste mindestens 4,5:1, Klickflächen mindestens 48 px hoch. */

/* Schrift lokal gehostet (SIL OFL, Lizenz in assets/fonts/) */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/jost.woff2) format("woff2"); }

:root {
  --schwarz: #0e0d0d;
  --text: #1c1a1a;
  --grau: #575352;          /* 7,4:1 auf Weiß */
  --linie: #3a3636;
  --linie-hell: #ddd6d1;
  --hell: #f4f1ee;
  --weiss: #ffffff;
  --rot: #c61317;           /* 5,9:1 auf Weiß – für Text auf hellem Grund */
  --rot-dunkel: #a30f12;    /* Hover für rote Knöpfe */
  --rot-hell: #ff6a5c;      /* Akzent auf schwarzem Grund (6,4:1) */
  --auf-dunkel: #e6e1de;    /* Fließtext auf Schwarz */
  --auf-dunkel-leise: #c4bebc;
  --fokus: #c61317;          /* Fokusrahmen: >= 3:1 auf Weiß, Beige und Schwarz */
  --schrift: "Jost", "URW Gothic", "Century Gothic", "Futura", "Avenir Next", system-ui, sans-serif;
  --max: 1200px;
  --rand: clamp(16px, 4vw, 48px);
  --radius: 6px;
  --foto-verlauf: radial-gradient(120% 90% at 50% 25%, #fbfaf9 0%, #ece7e3 55%, #d8d0ca 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 112.5%; scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--weiss); color: var(--text); font-family: var(--schrift); font-size: 1rem; line-height: 1.7; font-weight: 400; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 500; }
/* Lange deutsche Wörter dürfen bei großer Schrift umbrechen (mit Silbentrennung) statt die Seite zu verbreitern */
h1, h2, h3, p, li, dt, dd, figcaption, summary { overflow-wrap: anywhere; }
h1, h2, h3 { hyphens: auto; }
h1 { font-size: clamp(2.3rem, 6.5vw, 5rem); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 400; }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--rot); color: #fff; padding: 12px 18px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.dunkel :focus-visible, .fuss :focus-visible, .kopf :focus-visible, .hero :focus-visible, .seitenkopf :focus-visible, .lightbox :focus-visible { outline-color: #fff; }
.icon { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon .fill { fill: currentColor; stroke: none; }
.rot { color: var(--rot); }
.ueberzeile { text-transform: uppercase; letter-spacing: .16em; font-size: .875rem; font-weight: 600; color: var(--rot); margin-bottom: .8em; }
.lead { font-size: 1.15rem; max-width: 60ch; color: var(--grau); }
.klein { font-size: .95rem; color: var(--grau); }

/* Knöpfe – groß und eindeutig */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 3rem; max-width: 100%; text-align: center; overflow-wrap: anywhere; padding: .7em 1.5em; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.2; border: 2px solid transparent; transition: background .2s, color .2s, border-color .2s; }
.knopf-rot { background: var(--rot); color: #fff; }
.knopf-rot:hover { background: var(--rot-dunkel); }
.knopf-hell { background: rgba(0,0,0,.35); color: #fff; border-color: rgba(255,255,255,.75); }
.knopf-hell:hover { background: #fff; color: var(--schwarz); }
.knopf-linie { border-color: currentColor; }
.knopf-linie:hover { background: var(--text); color: #fff; border-color: var(--text); }
.dunkel .knopf-linie:hover, .fuss .knopf-linie:hover { background: #fff; color: var(--schwarz); border-color: #fff; }
.pfeil-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 500; text-decoration: none; border-bottom: 2px solid currentColor; padding: 4px 0; }
.pfeil-link:hover { color: var(--rot); }
.pfeil-link .icon { transition: transform .2s; }
.pfeil-link:hover .icon { transform: translateX(4px); }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--schwarz); color: #fff; }
.kopf-transparent { position: fixed; inset: 0 0 auto; background: linear-gradient(rgba(0,0,0,.75), transparent); transition: background .3s; }
.kopf-transparent.kopf-fest { background: var(--schwarz); }
.kopf-innen { max-width: var(--max); margin: auto; padding: 12px var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marke img { width: 48px; height: 48px; border-radius: 50%; }
.wortmarke { font-size: 1.3rem; letter-spacing: .12em; font-weight: 400; white-space: nowrap; }
.wortmarke .i { text-transform: lowercase; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav ul { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.nav a:not(.knopf) { display: inline-block; text-decoration: none; font-size: 1rem; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:not(.knopf):hover, .nav a[aria-current] { border-color: var(--rot-hell); }
.menue-knopf { position: relative; display: none; align-items: center; gap: 8px; background: none; border: 2px solid rgba(255,255,255,.6); border-radius: 999px; color: inherit; padding: 8px 16px; min-height: 48px; font: inherit; font-size: 1rem; cursor: pointer; }
.menue-knopf .icon { width: 24px; height: 24px; }

/* Hero */
.hero { position: relative; min-height: clamp(560px, 92svh, 900px); display: grid; align-items: end; color: #fff; background: var(--schwarz); overflow: hidden; }
.hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; opacity: .7; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,13,13,.88) 0%, rgba(14,13,13,.35) 60%, transparent), linear-gradient(0deg, rgba(14,13,13,.85), transparent 50%); }
.hero-text { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--rand) clamp(48px, 10vh, 110px); }
/* Großes Wort „PERSÖNLICHKEIT.“: Schriftgröße auch an die Bildschirmbreite koppeln, damit es bei großer Browserschrift nicht überläuft */
.hero h1 { text-transform: uppercase; letter-spacing: .04em; line-height: 1.02; font-size: clamp(min(2.3rem, 9vw), 6.5vw, 5rem); }
.hero .rot { color: var(--rot-hell); }
.hero .ueberzeile { color: #fff; display: block; line-height: 1.5; text-transform: uppercase; }
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.status { display: inline-flex; align-items: center; gap: .55em; font-size: 1rem; margin: 18px 0 0; }
.status::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #9a9493; flex: none; }
.status.ist-offen::before { background: #3ecf6e; box-shadow: 0 0 0 4px rgba(62,207,110,.25); }

/* Abschnitte */
.abschnitt { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 9vw, 112px) var(--rand); }
.dunkel, .hell { max-width: none; }
.dunkel, .hell, .seitenkopf { padding-left: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand))); padding-right: max(var(--rand), calc((100% - var(--max)) / 2 + var(--rand))); }
.dunkel { background: var(--schwarz); color: var(--auf-dunkel); }
.dunkel h2, .dunkel h3 { color: #fff; }
.dunkel .ueberzeile, .seitenkopf .ueberzeile, .fuss-titel { color: var(--rot-hell); }
.hell { background: var(--hell); }
.kopfzeile { margin-bottom: clamp(28px, 4vw, 48px); }
.kopfzeile-zeile { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.kopfzeile h2 { margin: 0; }
.seitenkopf { background: var(--schwarz); color: #fff; padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(40px, 6vw, 72px); }
.seitenkopf .lead { color: var(--auf-dunkel); }
.seitenkopf a { color: #fff; }

.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.intro-text p { max-width: 62ch; }
.intro-bild { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; }

.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0; margin: 0; list-style: none; background: var(--linie); border: 1px solid var(--linie); }
.leistungen li { background: var(--schwarz); padding: clamp(24px, 3vw, 40px); }
.leistungen .nr { display: block; color: var(--rot-hell); font-size: 1rem; letter-spacing: .14em; margin-bottom: 14px; }
.leistungen p { color: var(--auf-dunkel); margin: 0; }
.leistungen-hell { background: var(--linie-hell); border-color: var(--linie-hell); }
.leistungen-hell li { background: #fff; }
.leistungen-hell .nr { color: var(--rot); }
.leistungen-hell p { color: var(--grau); }

/* Galerien */
.galerie { list-style: none; margin: 0; padding: 0; }
.galerie a { display: block; overflow: hidden; border-radius: var(--radius); background: #ddd; }
.galerie img { width: 100%; transition: transform .5s ease; }
.galerie a:hover img { transform: scale(1.04); }
.galerie-streifen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.galerie-streifen img { aspect-ratio: 3/4; object-fit: cover; }
.galerie-mauer { columns: 4 240px; column-gap: 12px; }
.galerie-mauer li { break-inside: avoid; margin-bottom: 12px; }

/* Bewertungen */
.bew-kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
.bew-kopf h2 { margin: 0; }
.bew-schnitt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.bew-schnitt p { margin: 4px 0 0; color: var(--auf-dunkel); }
.bew-zahl { font-size: clamp(3rem, 6vw, 4.2rem); line-height: 1; color: #fff; font-weight: 400; }
.sterne { display: inline-flex; gap: 3px; }
.sterne svg { width: 1.3em; height: 1.3em; }
.sterne .voll { fill: #f5b301; }
.sterne .leer { fill: #6b6766; }
.bew-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.bewertung { margin: 0; background: #fff; color: var(--text); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.bewertung blockquote { margin: 0; flex: 1; }
.bewertung blockquote p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.bewertung figcaption { color: var(--grau); font-size: .95rem; border-top: 1px solid var(--linie-hell); padding-top: 12px; }
.bewertung figcaption strong { color: var(--text); font-weight: 600; }
.bew-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.mehr { margin-top: 20px; }
.mehr > summary { display: inline-flex; align-items: center; min-height: 3rem; cursor: pointer; list-style: none; border: 2px solid currentColor; border-radius: 999px; padding: .6em 1.5em; font-weight: 500; margin-bottom: 20px; }
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: "+"; margin-left: .6em; font-size: 1.3em; line-height: 1; }
.mehr[open] > summary::after { content: "–"; }
.mehr > summary:hover { background: #fff; color: var(--schwarz); }

/* Team */
.team-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
/* Freigestellte Team-Fotos (werkzeuge/team_foto.py) liegen alle auf demselben Verlauf */
.team-mini > li > img, .person > img { background: var(--foto-verlauf); }
.team-mini img, .team-mini .ohne-foto { aspect-ratio: 3/4; object-fit: cover; object-position: top; border-radius: var(--radius); margin-bottom: 12px; width: 100%; }
.team-mini strong { display: block; font-size: 1.25rem; font-weight: 500; }
.team-mini span { color: var(--grau); }
.ohne-foto { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1a1818 0 10px, #222 10px 20px); border-radius: var(--radius); }
.ohne-foto img { width: 40%; aspect-ratio: 1; margin: 0; border-radius: 50%; }
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 80px); align-items: center; padding: clamp(28px, 5vw, 64px) 0; border-bottom: 1px solid var(--linie-hell); }
.person:last-child { border: 0; }
.person > img, .person > .ohne-foto { border-radius: var(--radius); aspect-ratio: 3/4; object-fit: cover; object-position: top; width: 100%; }
.person-gespiegelt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.person-gespiegelt > img, .person-gespiegelt > .ohne-foto { order: 2; }
.person h2 { font-size: clamp(2rem, 4vw, 3rem); }
.person h3 { font-size: .875rem; text-transform: uppercase; letter-spacing: .16em; color: var(--grau); margin-top: 1.6em; }
.person-text > p { max-width: 62ch; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { border: 1px solid #c9c1bc; border-radius: 999px; padding: .3em .9em; font-size: 1rem; }

.band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 64px; padding-bottom: 64px; }
.band > * { margin: 0; max-width: 62ch; }
.band p { color: var(--auf-dunkel); }

/* Partner */
.partner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 64px); align-items: center; padding: 40px 0; border-bottom: 1px solid var(--linie-hell); }
.partner:last-child { border: 0; }
.partner img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; }
.partner p { max-width: 62ch; }

/* Infos */
.info-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.karte { background: var(--hell); padding: 28px; border-radius: var(--radius); border-top: 4px solid var(--rot); }
.liste { padding-left: 1.1em; margin: 0; }
.liste li { margin-bottom: .6em; }
.liste li::marker { color: var(--rot); }
.regeln { margin: 0 0 1em; }
.regeln div { display: flex; justify-content: space-between; gap: 12px; padding: .6em 0; border-bottom: 1px solid var(--linie-hell); }
.regeln dt { color: var(--grau); }
.regeln dd { margin: 0; font-weight: 600; text-align: right; }
.komfort { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; list-style: none; padding: 0; margin: 48px 0 0; color: var(--grau); }
.komfort li::before { content: "✦"; color: var(--rot); margin-right: .5em; }

/* 404: Wege weiter */
.weiter-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.weiter-raster a { display: flex; align-items: center; gap: .7em; min-height: 3.5rem; padding: .8em 1.2em; background: var(--hell); border-radius: var(--radius); border-left: 4px solid var(--rot); text-decoration: none; font-weight: 500; }
.weiter-raster a:hover { background: var(--linie-hell); }

/* Textseiten */
.text { max-width: 820px; }
.text h2 { font-size: 1.35rem; font-weight: 500; margin-top: 1.8em; }
.text a { text-decoration: underline; text-underline-offset: 3px; }

/* Fuß */
.fuss { background: var(--schwarz); color: var(--auf-dunkel); }
.fuss-raster { max-width: var(--max); margin: auto; padding: 72px var(--rand) 48px; display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; }
.fuss-titel { font-size: .875rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 600; }
.adresse { font-size: 1.1rem; color: #fff; }
.kontaktliste { list-style: none; padding: 0; margin: 0; }
.kontaktliste a { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .6em; text-decoration: none; padding: 8px 0; min-height: 44px; overflow-wrap: anywhere; }
.kontaktliste a:hover { color: var(--rot-hell); text-decoration: underline; }
.zeiten { border-collapse: collapse; width: 100%; max-width: 340px; font-size: 1.05rem; }
.zeiten th, .zeiten td { text-align: left; font-weight: 400; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr.heute { color: #fff; }
.zeiten tr.heute th, .zeiten tr.heute td { font-weight: 600; }
.zeiten tr.heute th::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--rot-hell); border-radius: 50%; margin: 0 8px 2px 0; }
.fuss .status { margin: 0 0 10px; }
.fuss-raster > section { min-width: 0; container-type: inline-size; }
/* Sehr große Schrift auf schmalem Bildschirm: Öffnungszeiten untereinander statt nebeneinander.
   Die Bedingung in em bezieht sich auf die Schriftgröße, greift also nur bei großer Schrift. */
@container (max-width: 15em) {
  .zeiten tr { display: block; padding: 6px 0; border-bottom: 1px solid var(--linie); }
  .zeiten th, .zeiten td { display: block; text-align: left; border: 0; padding: 0; }
}
.fuss-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.fuss-cta p { margin: 0 0 4px; }
.social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 8px 0 0; }
.social a { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #5a5555; border-radius: 50%; }
.social a:hover { background: var(--rot); border-color: var(--rot); }
.fuss-unten { max-width: var(--max); margin: auto; padding: 20px var(--rand) 28px; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: .95rem; color: var(--auf-dunkel-leise); }
.fuss-unten a { display: inline-block; padding: 8px 4px; }
.mobil-buchen { display: none; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(10,9,9,.95); }
.lightbox img { max-width: 92vw; max-height: 86vh; width: auto; margin: 7vh auto 0; object-fit: contain; }
.lightbox button { position: fixed; background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.5); border-radius: 50%; width: 56px; height: 56px; font-size: 2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox button:hover { background: var(--rot); }
.lb-zu { top: 16px; right: 16px; }
.lb-zurueck { left: 16px; top: 50%; }
.lb-weiter { right: 16px; top: 50%; }

/* Tablet und kleiner: Menü als Knopf */
@media (max-width: 68.75em) {  /* 1100 px bei Standardschrift */
  .menue-knopf { display: inline-flex; z-index: 2; }
  .nav { position: fixed; inset: 0; background: var(--schwarz); flex-direction: column; justify-content: center; gap: 32px; opacity: 0; visibility: hidden; transition: opacity .25s; overflow-y: auto; padding: 80px 16px 32px; }
  .nav.offen { opacity: 1; visibility: visible; }
  .nav ul { flex-direction: column; align-items: center; gap: 8px; }
  .nav a:not(.knopf) { font-size: 1.4rem; padding: 8px 12px; }
  body.menue-offen { overflow: hidden; }
  .leistungen, .info-raster { grid-template-columns: 1fr 1fr; }
  .bew-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-cta { grid-column: 1 / -1; }
}
@media (max-width: 42.5em) {   /* 680 px bei Standardschrift */
  html { font-size: 106.25%; }
  .intro, .person, .person-gespiegelt, .partner { grid-template-columns: 1fr; }
  .person-gespiegelt > img, .person-gespiegelt > .ohne-foto { order: 0; }
  .leistungen, .info-raster, .fuss-raster, .bew-raster { grid-template-columns: 1fr; }
  .galerie-streifen { grid-template-columns: 1fr 1fr; }
  .galerie-mauer { columns: 2; column-gap: 8px; }
  .galerie-mauer li { margin-bottom: 8px; }
  .hero-knoepfe .knopf, .bew-links .knopf { flex: 1 1 100%; }
  .mobil-buchen { display: flex; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .fuss { padding-bottom: 80px; }
  .wortmarke { font-size: min(1.05rem, 5.5vw); }  /* Logo-Schriftzug: an Bildschirmbreite gekoppelt */
  .marke img { width: 40px; height: 40px; }
  .menue-knopf { padding: 8px 12px; }
  .bewertung { padding: 22px; }
}
/* Windows-Kontrastmodus: Knöpfe und Karten behalten sichtbare Ränder */
@media (forced-colors: active) {
  .knopf, .mehr > summary, .menue-knopf, .bewertung, .karte, .lightbox button { border: 2px solid ButtonText; }
  .sterne .voll { fill: CanvasText; }
  .status::before { forced-color-adjust: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }