/* CherieBar — Black & Gold Luxus-Theme (Cartouche-Branding) */
:root {
  /* Tiefes Schwarz mit ganz leichtem Marmor-Schimmer */
  --bg: #060406;
  --bg-2: #110b0e;
  --bg-3: #1a1216;
  --line: #3a2a16;            /* Dunkles Gold als Border */
  --line-soft: #1f150c;

  /* Text: cremig-warm */
  --text: #f4ece6;
  --muted: #a89887;

  /* Champagner-Gold Akzente — wie auf dem Print-Design */
  --accent: #d4af37;          /* Haupt-Gold */
  --accent-light: #f3d570;    /* Hell-Gold (Highlights, Sparkle) */
  --accent-deep: #a87a1f;     /* Tief-Gold (Schatten) */
  --accent-2: #c97a8a;        /* Dusty rose (sekundär, sparsam einsetzen) */
  --accent-soft: #1e1608;     /* Hover-Untergrund (warmer Schwarzton) */

  /* Gradient für „aufgemalte" Goldflächen — Logo/Buttons/Borders */
  --gold-gradient: linear-gradient(180deg, #fff3c4 0%, #f5d77a 35%, #d4af37 60%, #b8862b 85%, #f3d570 100%);

  --danger: #e08aa6;
  --ok: #9ed7a8;
  --warn: #f5d77a;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.85);
  --shadow-soft: 0 8px 24px -10px rgba(0, 0, 0, 0.7);
  --glow-accent: 0 0 30px rgba(212, 175, 55, 0.22);
  --maxw: 1240px;

  /* Nur System-Fonts — DSGVO-konform, keine externen Loads */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-script: "Snell Roundhand", "Brush Script MT", "Apple Chancery", "Lucida Calligraphy", "Segoe Script", cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); } /* deckt alles ab, auch bei sehr langen Seiten + Print */
body {
  font-family: var(--font);
  /* Einfarbiger, tiefschwarzer Hintergrund */
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Überschriften in Serif für einen wärmeren, persönlicheren Ton */
h1, h2, h3, .brand-name {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.2px;
}
h1 { font-size: 36px; line-height: 1.15; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
.lead { font-size: 17px; color: var(--muted); margin-bottom: 24px; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.empty { color: var(--muted); padding: 40px 0; text-align: center; }

/* Header */
.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  background: rgba(16, 10, 13, 0.78);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .row { padding: 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: 0.5px; text-decoration: none; }
.brand-logo {
  /* Stufenlos skalierend: ~32px auf kleinen Phones, ~46px auf großen Desktops.
     clamp(min, fluid, max) — kein fester Breakpoint nötig. */
  height: clamp(32px, 5vw, 46px);
  width: auto;
  max-width: 60vw;        /* niemals breiter als 60% der Viewportbreite */
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 12px rgba(212, 175, 55, 0.25));
}
.brand-mark {
  /* Kleines Sparkle-Symbol — als CSS-shape (kein external asset) */
  width: 22px; height: 22px;
  background:
    conic-gradient(from 0deg, transparent 0 60deg, var(--accent) 60deg 120deg, transparent 120deg 240deg, var(--accent) 240deg 300deg, transparent 300deg);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(212,175,55,0.55));
  position: relative;
}
.brand-mark::before {
  content: '';
  position: absolute;
  inset: 6px;
  background: var(--gold-gradient);
  border-radius: 50%;
}
/* Wortmarke „Cherie Bar" — Script + Serif-Caps, wie im Logo-Lettering.
   Skaliert stufenlos mit clamp(). */
.brand-name {
  font-family: var(--font-script);
  font-size: clamp(24px, 4.5vw, 32px);
  font-style: italic;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
}
.brand-bar {
  font-family: var(--font-serif);
  font-size: clamp(11px, 1.8vw, 14px);
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  align-self: flex-end;
  margin-bottom: 4px;
}
.brand { gap: 6px; align-items: baseline; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav a { color: var(--muted); font-size: 14px; padding: 8px 2px; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.nav a.active, .nav a:hover { color: var(--text); border-bottom-color: var(--accent); }

/* Admin-Portal-Link nur wenn eingeloggt — dezent gold abgehoben mit grünem Live-Dot */
.nav-admin {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 6px 12px !important;
  margin-left: 6px;
  border: 1px solid rgba(212,162,89,0.4) !important;
  border-bottom: 1px solid rgba(212,162,89,0.4) !important;
  border-radius: 999px;
  color: var(--accent) !important;
  font-weight: 500;
  background: rgba(212,162,89,0.06);
}
.nav-admin:hover {
  background: rgba(212,162,89,0.12);
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.nav-admin .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7dbf9a;
  box-shadow: 0 0 8px rgba(125, 191, 154, 0.7);
}
.lang-switch { display: inline-flex; gap: 6px; margin-left: 10px; padding-left: 14px; border-left: 1px solid var(--line-soft); }
.lang-switch a { font-size: 12px; padding: 4px 9px; border-radius: 8px; color: var(--muted); border: 1px solid transparent; }
.lang-switch a.active { color: var(--text); border-color: var(--line); background: var(--bg-3); }
.lang-switch.big { justify-content: center; margin-top: 24px; padding: 0; border: 0; }
.lang-switch.big a { padding: 8px 14px; }

/* Hero — Cartouche-Logo zentriert, Black-&-Gold-Luxus */
.hero {
  padding: 64px 0 48px;
  position: relative;
  text-align: center;
}
.hero-logo {
  display: block;
  margin: 0 auto 20px;
  /* Stufenlos: ~280px auf Phones, bis 460px auf großen Screens */
  width: clamp(260px, 60vw, 460px);
  height: auto;
  filter: drop-shadow(0 6px 30px rgba(212,175,55,0.25));
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 10px;
  letter-spacing: 6px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 em {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.3em;
  letter-spacing: 0;
  text-transform: none;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lead {
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
  letter-spacing: 0.4px;
}
.hero-divider {
  display: block;
  width: 220px;
  height: 18px;
  margin: 16px auto;
  opacity: 0.75;
}
.hero-divider svg { width: 100%; height: 100%; }
.hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  padding: 4px 0;
  position: relative;
}
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px; height: 1px;
  background: var(--accent);
  margin-left: 12px;
  vertical-align: middle;
  opacity: 0.5;
}

/* Section-Head harmonisch */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 32px 0 18px; gap: 16px; }
.section-head h2 { margin: 0; font-size: 26px; }
.section-head .link { font-size: 14px; color: var(--muted); transition: color 0.2s; }
.section-head .link:hover { color: var(--accent); }

/* Card-Titel auch in Serif für Eleganz */
.card-title { font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.2px; }

/* Sections */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 40px 0 18px; position: relative; }
.section-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  margin: 0;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head h2::before {
  content: '✦';
  margin-right: 12px;
  font-size: 0.65em;
  vertical-align: middle;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}
.link { color: var(--accent); font-size: 14px; }

/* Grid + Cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease;
  display: block;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
}
.card::after {
  /* Goldener Hairline-Rahmen innen — subtile Luxus-Note */
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--radius-lg) - 4px);
  border: 1px solid rgba(212, 175, 55, 0.10);
  pointer-events: none;
  transition: border-color 0.3s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: rgba(212, 175, 55, 0.55);
  box-shadow: var(--shadow), var(--glow-accent);
  color: inherit;
}
.card:hover::after { border-color: rgba(212, 175, 55, 0.35); }
.card-title { font-family: var(--font-serif); font-weight: 600; letter-spacing: 0.3px; }
.card-badge {
  background: rgba(0, 0, 0, 0.78);
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--accent-light);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.card-photo {
  position: relative;
  background: #1a1116;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
@supports not (aspect-ratio: 3 / 4) {
  .card-photo { padding-top: 133.33%; height: 0; }
  .card-photo > img,
  .card-photo > .card-placeholder { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; }
}
.card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-photo img { transform: scale(1.04); }
.card-placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #1a1a22, #0e0e15); }
.card-placeholder.big { aspect-ratio: 3 / 4; border-radius: var(--radius); }
.card-placeholder span { font-size: 48px; color: var(--muted); font-weight: 700; }
.card-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(0,0,0,0.7); color: var(--text); border: 1px solid var(--line);
  font-size: 11px; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.02em;
}
.card-body { padding: 12px 14px 14px; }
.card-title { font-weight: 600; font-size: 16px; }
.card-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Girl page */
.girl { padding: 24px 0 80px; }
.back { color: var(--muted); display: inline-block; margin: 8px 0 16px; font-size: 14px; }
.girl-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; }
.gallery-main { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: #111; box-shadow: var(--shadow); }
@supports not (aspect-ratio: 3 / 4) {
  .gallery-main { padding-top: 133.33%; height: 0; }
  .gallery-main > img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; }
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.img-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; margin-top: 10px; }
.thumb { padding: 0; border: 2px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
@supports not (aspect-ratio: 1) {
  .thumb { width: 72px; height: 72px; }
}
.thumb.active { border-color: var(--accent); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.meta h1 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 8px; }
.badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 13px; border: 1px solid var(--line); background: var(--bg-2); }
.badge.in { color: var(--ok); border-color: rgba(107,191,122,0.4); }
.badge.soon { color: var(--warn); border-color: rgba(217,164,74,0.4); }
.badge.new { color: #1a1208; background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 11px; padding: 4px 10px; vertical-align: middle; }
.card-badge.new { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #1a1208; border-color: transparent; font-weight: 700; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 24px 0; }
.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; }
.prose { white-space: pre-wrap; line-height: 1.7; }
.btn {
  display: inline-block; cursor: pointer; padding: 11px 20px; border-radius: 10px;
  background: transparent; color: var(--accent); border: 1px solid rgba(212, 175, 55, 0.4);
  font-size: 14px; font-family: inherit; text-decoration: none;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease, color 0.2s;
}
.btn:hover { color: var(--accent-light); border-color: var(--accent); background: rgba(212, 175, 55, 0.08); }
.btn:active { transform: scale(0.98); }
.btn.primary {
  background: var(--gold-gradient);
  color: #1a1208;
  border-color: transparent;
  font-weight: 700;
  letter-spacing: 1.5px;
  box-shadow: 0 6px 22px -6px rgba(212, 175, 55, 0.55), inset 0 1px 0 rgba(255, 243, 196, 0.6);
}
.btn.primary:hover { filter: brightness(1.08); color: #1a1208; box-shadow: 0 10px 28px -6px rgba(212, 175, 55, 0.7), inset 0 1px 0 rgba(255, 243, 196, 0.8); }
.btn.whatsapp { background: #25D366; color: #06281a; border-color: transparent; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.btn.whatsapp:hover { background: #20bf5b; color: #06281a; filter: brightness(1.05); }
.btn.whatsapp svg { flex-shrink: 0; }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Anwesenheits-Kalender — kompakt, unterhalb der Mädchen-Infos */
.presence-section {
  margin: 32px auto 0;
  padding: 18px 20px;
  max-width: 560px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.presence-cal { margin: 0; }
.cal-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.cal-title { font-family: var(--font-serif); font-size: 15px; color: var(--text); }
.cal-legend { font-size: 10px; color: var(--muted); display: inline-flex; gap: 12px; align-items: center; }
.cal-legend .legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.cal-legend .legend-dot.present { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.cal-legend .legend-dot.today { border: 1.5px solid var(--accent); background: transparent; }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 3px; }
.cal-weekdays span { text-align: center; font-size: 9px; color: var(--muted); letter-spacing: 1px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-day {
  aspect-ratio: 1 / 1;
  border-radius: 5px;
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  position: relative;
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--muted);
  overflow: hidden;
}
.cal-day .cal-num { line-height: 1; font-variant-numeric: tabular-nums; }
.cal-day.status-past { opacity: 0.35; }
.cal-day.status-future { opacity: 0.8; }
.cal-day.status-present {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #1a1208;
  font-weight: 600;
  opacity: 1;
  box-shadow: 0 1px 4px -1px rgba(212, 162, 89, 0.35);
}
.cal-day.today {
  border: 1.5px solid var(--accent);
  color: var(--text);
  font-weight: 600;
}
.cal-day.status-present.today {
  outline: 1.5px solid var(--text);
  outline-offset: -3px;
}
.cal-month-tag {
  position: absolute;
  top: 1px; left: 3px;
  font-size: 7px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
}
.cal-day.status-present .cal-month-tag { color: rgba(26, 18, 8, 0.55); }

/* Lightbox */
html.lb-open, html.lb-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  animation: lb-fade 180ms ease-out;
  padding: 24px;
}
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-stage {
  position: relative;
  max-width: min(96vw, 1400px);
  max-height: 96vh;
  display: flex; flex-direction: column; align-items: center;
  margin: 0;
}
.lb-img {
  max-width: 100%;
  max-height: calc(96vh - 40px);
  object-fit: contain;
  box-shadow: 0 12px 48px rgba(0,0,0,0.6);
  border-radius: 4px;
  -webkit-user-drag: none;
  user-select: none;
}
.lb-counter {
  margin-top: 12px;
  color: #d8d8e0;
  font-size: 13px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.lightbox button {
  position: absolute;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
  line-height: 1;
}
.lightbox button:hover { background: rgba(255,255,255,0.12); }
.lightbox button:active { transform: scale(0.95); }
.lb-close {
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  font-size: 28px;
}
.lb-prev, .lb-next {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  font-size: 36px;
}
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
.lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.95); }
@media (max-width: 600px) {
  .lb-prev, .lb-next { width: 44px; height: 44px; font-size: 28px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
}
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); border-color: rgba(196,87,76,0.4); }
.btn.warn { color: var(--warn); border-color: rgba(217,164,74,0.4); }
.btn.small { padding: 6px 10px; font-size: 12px; }

/* Haus */
.page-head { padding: 24px 0 8px; }
.haus-section { margin: 32px 0; }
.haus-section h2 { font-size: 22px; margin-bottom: 16px; letter-spacing: 0.5px; }
.haus-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .haus-grid { grid-template-columns: 1fr 1fr; } }
.haus-tile { margin: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.haus-tile img { width: 100%; height: 280px; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
.haus-tile figcaption { padding: 12px 16px; color: var(--muted); font-size: 14px; }
.haus-disclaimer { margin-top: 48px; padding: 16px; background: var(--bg-2); border-left: 3px solid var(--accent, #a87de8); border-radius: 6px; color: var(--muted); font-size: 14px; }

/* Contact */
.contact-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-top: 16px; }
.contact-card h2 { margin-top: 0; font-size: 18px; }
.contact-card address { font-style: normal; line-height: 1.7; margin: 0 0 12px; }
.contact-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .contact-grid { grid-template-columns: 1fr 1.4fr; align-items: start; } }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 500;
  font-size: 16px;
  position: relative;
  list-style: none;
  padding-right: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--accent);
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-answer { padding: 0 20px 18px; color: var(--muted); line-height: 1.6; }

/* Liste: Filter & Suche (einklappbar) */
.list-filters {
  margin: 16px 0 24px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.list-filters-toggle {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}
.list-filters-toggle::-webkit-details-marker { display: none; }
.list-filters-toggle:hover { color: var(--accent); }
.filter-toggle-label { flex-shrink: 0; }
.filter-toggle-chevron {
  margin-left: auto;
  color: var(--accent);
  font-size: 12px;
  transition: transform 0.2s ease;
  display: inline-block;
}
.list-filters[open] .filter-toggle-chevron { transform: rotate(180deg); }
.filter-active-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 600;
  color: #1a1208;
  background: var(--accent);
  border-radius: 999px;
}
.list-filters-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line-soft);
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-row.search { gap: 10px; padding-top: 12px; }
.filter-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.filter-search {
  flex: 1; min-width: 200px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  font-size: 14px;
}
.filter-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill {
  padding: 6px 14px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line);
  color: var(--text); font-size: 13px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pill:hover { border-color: var(--accent-soft); }
.pill.active { background: var(--accent); border-color: var(--accent); color: #1a1208; font-weight: 600; }
.filter-reset { white-space: nowrap; }
.filter-no-results { text-align: center; padding: 24px; color: var(--muted); }

.hours-block { margin-top: 8px; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.hours-table th, .hours-table td { padding: 4px 8px 4px 0; text-align: left; vertical-align: top; }
.hours-table th { font-weight: 500; color: var(--muted); width: 110px; }
.hours-table .muted { color: var(--muted); }
.open-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.open-badge.open { background: rgba(107,191,122,0.12); color: #9ed7a8; border: 1px solid rgba(107,191,122,0.4); }
.open-badge.closed { background: rgba(224,138,166,0.12); color: #e08aa6; border: 1px solid rgba(224,138,166,0.4); }
.open-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.map-frame { width: 100%; height: 360px; border-radius: calc(var(--radius) - 4px); overflow: hidden; margin: 12px 0; background: #1a1a1f; }
.map-frame .leaflet-container { background: #1a1a1f; }
/* Leaflet attribution lesbar im Dark-Theme */
.map-frame .leaflet-control-attribution { background: rgba(0,0,0,0.6); color: #ddd; font-size: 11px; }
.map-frame .leaflet-control-attribution a { color: #9ec5ff; }

.route-links { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.route-links a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: inherit; transition: background 0.15s; }
.route-links a:hover { background: var(--bg-2); }

/* Zimmer-mieten Formular */
.inquiry-form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.inquiry-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.inquiry-form .required { color: var(--accent); }
.inquiry-form input, .inquiry-form textarea {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 12px; font-family: inherit; font-size: 15px;
}
.inquiry-form input:focus, .inquiry-form textarea:focus { outline: none; border-color: var(--accent); }
.inquiry-form textarea { resize: vertical; min-height: 100px; }
.inquiry-form .grid-2 { display: grid; gap: 14px; }
@media (min-width: 600px) { .inquiry-form .grid-2 { grid-template-columns: 1fr 1fr; } }
.inquiry-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inquiry-form .fineprint { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.inquiry-form .actions { margin-top: 8px; }

.info-box { padding: 20px; border-radius: var(--radius); margin: 24px 0; }
.info-box.success { background: rgba(125, 191, 154, 0.08); border-left: 3px solid #7dbf9a; }
.info-box.error { background: rgba(224, 138, 166, 0.08); border-left: 3px solid #e08aa6; color: #e08aa6; }
.info-box h2 { margin-top: 0; }

/* Legal pages (Impressum, Datenschutz, AGB) */
.legal-page h1 { margin-top: 24px; }
.legal-page h2 { margin-top: 32px; font-size: 20px; color: var(--text); }
.legal-page h3 { margin-top: 20px; font-size: 16px; color: var(--text); }
.legal-page p.prose { margin: 0 0 14px; line-height: 1.7; }
.legal-page p.prose.lead { font-size: 16px; color: var(--text); }
.legal-page p.prose.meta { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 32px; }
.legal-page ul.prose, .legal-page ol.prose { line-height: 1.7; padding-left: 22px; margin: 0 0 14px; }
.legal-page ul.prose li, .legal-page ol.prose li { margin-bottom: 4px; }
.legal-page code { background: var(--bg-2); padding: 1px 6px; border-radius: 4px; font-size: 0.92em; color: var(--accent); }
.legal-page a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(212,162,89,0.4); text-underline-offset: 3px; }
.legal-page a:hover { text-decoration-color: var(--accent); }
.legal-notice {
  background: linear-gradient(135deg, rgba(212,162,89,0.08), rgba(168,125,232,0.08));
  border: 1px solid rgba(212,162,89,0.3);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 24px 0 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
}
.legal-notice strong { color: var(--accent); }
.legal-notice code { background: rgba(255,255,255,0.06); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 24px 0; color: var(--muted); font-size: 14px; }
.footer-nav { display: flex; gap: 16px; }

/* Age gate */
.age-gate {
  display: grid;
  place-items: center;
  min-height: 100vh;       /* Fallback */
  min-height: 100dvh;
  padding: 24px;
}
.age-card {
  max-width: 560px;
  background: var(--bg-2);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 18px;
  padding: 40px 32px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(212, 175, 55, 0.12);
  text-align: center;
  position: relative;
}
.age-card::before {
  /* Goldener Hairline-Rahmen innen — Cartouche-Feel */
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.18);
  pointer-events: none;
}
.age-logo {
  display: block;
  max-width: 320px;
  width: 100%;
  margin: 0 auto 20px;
  filter: drop-shadow(0 4px 20px rgba(212, 175, 55, 0.3));
}
.age-card h1 {
  margin: 12px 0 6px;
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.age-form { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.age-form { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.fineprint { color: var(--muted); font-size: 12px; margin-top: 18px; }
.lead { color: var(--muted); font-size: 17px; }

/* Image protection: deter casual saving */
img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: auto; }
.card-photo, .gallery-main { -webkit-user-select: none; user-select: none; }

/* ==========================================================
   Mobile-Navigation (Hamburger) + Responsiveness
   ========================================================== */

/* Hamburger-Button — auf Desktop versteckt */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  margin: 0 auto;
  background: var(--accent);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Animiertes X wenn geöffnet */
.nav.open ~ .nav-toggle span,        /* fallback selector order */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .girl-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 16px; }
}

/* --- Mobile: ≤ 760px → Hamburger-Menü --- */
@media (max-width: 760px) {
  .nav-toggle { display: flex; }

  .nav {
    /* Slide-down Panel unter dem Header */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
    background: rgba(10, 7, 9, 0.98);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
    /* versteckt bis .open */
    display: none;
  }
  .nav.open { display: flex; }

  .nav a {
    padding: 14px 24px;
    font-size: 16px;
    border-bottom: 1px solid var(--line-soft);
    border-left: 3px solid transparent;
  }
  .nav a:last-of-type { border-bottom: 0; }
  .nav a.active, .nav a:hover { border-bottom-color: var(--line-soft); border-left-color: var(--accent); }

  .nav-admin {
    margin: 8px 24px !important;
    justify-content: center;
  }

  .lang-switch {
    margin: 8px 24px 4px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    justify-content: center;
  }
  .lang-switch a { padding: 8px 16px; font-size: 14px; }

  /* Header-Row braucht relative für das absolute nav-Panel */
  .site-header .row, .admin-header .row { position: relative; }
  /* Admin-Header teilt die Hamburger-Mechanik mit dem Public-Header */
  .admin-header .nav { background: rgba(10, 7, 9, 0.98); }
}

/* --- Kleine Phones: ≤ 480px → Feinschliff --- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero h1 { font-size: clamp(18px, 5vw, 24px); letter-spacing: 3px; }
  .hero .lead { font-size: 15px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .section-head h2 { font-size: 20px; }
  .cta-row { flex-direction: column; }
  /* text-align für inline-block-Buttons, justify-content für die flex-Buttons
     (z.B. .btn.whatsapp mit Icon+Text) — sonst bleibt der Inhalt linksbündig. */
  .cta-row .btn { width: 100%; text-align: center; justify-content: center; }
  /* Touch-Targets: Buttons + Links großzügiger */
  .btn { padding: 12px 20px; }
  .filter-search { min-width: 0; }
  /* Karten-Galerie auf Detailseite: Thumbs kleiner */
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}

/* ===== Angebote / Packages — Detailseite ===== */
.package-detail { max-width: 820px; margin: 0 auto; padding: 8px 0 32px; }
.package-detail .back-link { display: inline-block; margin-bottom: 12px; font-size: 14px; }
.package-detail h1 { margin: 0 0 8px; }
.package-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 22px 0; }
.package-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); }
@supports not (aspect-ratio: 4 / 3) { .package-gallery img { height: 200px; } }
/* Einzelnes Angebots-Bild/PDF (z. B. Flyer): voll & unbeschnitten, gross zentriert. */
.package-gallery.single { display: block; max-width: 680px; margin: 22px auto; }
.package-gallery.single img { aspect-ratio: auto; height: auto; object-fit: contain; }
@supports not (aspect-ratio: 4 / 3) { .package-gallery.single img { height: auto; } }
.package-gallery.single .pdf-embed { aspect-ratio: 3 / 2; }
.package-meta { list-style: none; padding: 14px 18px; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px 28px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; }
.package-meta li { font-size: 15px; }
.package-text { white-space: pre-line; line-height: 1.7; margin: 20px 0; }
.package-detail .cta-row { margin-top: 26px; }
/* Datei-Angebot: PDF-Kachel (CSP verbietet Einbetten -> Klick oeffnet PDF im neuen Tab). */
.package-gallery .pdf-embed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); text-decoration: none; transition: border-color .15s, transform .15s; }
.package-gallery .pdf-embed:hover { border-color: var(--accent); transform: translateY(-2px); }
.pdf-ico { font-weight: 800; letter-spacing: 1px; font-size: 20px; color: #fff; background: #c0392b; padding: 8px 14px; border-radius: 8px; }
.pdf-embed .pdf-label { font-size: 14px; color: var(--muted); }
@supports not (aspect-ratio: 4 / 3) { .package-gallery .pdf-embed { height: 200px; } }
.card-placeholder.pdf span { font-size: 20px; letter-spacing: 1px; color: #fff; background: #c0392b; padding: 6px 12px; border-radius: 8px; font-weight: 800; }

/* ---------- Schließungs-/Urlaubshinweis ---------- */
.closure-banner {
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: 15px;
  position: relative;
  z-index: 15;
}
.closure-banner .container {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.closure-banner.is-active {
  /* Laufende Schließung: kräftig, niemand soll umsonst herfahren. */
  background: linear-gradient(180deg, rgba(196,87,76,0.20), rgba(196,87,76,0.10));
  border-bottom-color: rgba(224,138,166,0.45);
  color: #ffdfe4;
}
.closure-banner.is-upcoming {
  /* Vorankündigung: dezent, es ist ja noch offen. */
  background: rgba(212,175,55,0.08);
  border-bottom-color: rgba(212,175,55,0.35);
  color: var(--text);
}
.closure-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.closure-text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.closure-dates { font-variant-numeric: tabular-nums; opacity: 0.9; }
.closure-note {
  opacity: 0.85; font-style: italic;
  padding-left: 10px; border-left: 1px solid currentColor;
}
@media (max-width: 600px) {
  .closure-banner { font-size: 14px; padding: 10px 0; }
  .closure-note { padding-left: 0; border-left: 0; width: 100%; }
}
/* Urlaub bewusst freundlicher als eine Störung: die Seite soll nicht so
   wirken, als sei etwas kaputt — es ist nur gerade jemand weg. */
.closure-banner.is-active.is-holiday {
  background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
  border-bottom-color: rgba(212,175,55,0.45);
  color: var(--text);
}

/* ---------- Schicht-Status ("Jetzt im Haus") ---------- */
.badge.now {
  color: var(--ok);
  border-color: rgba(107,191,122,0.55);
  background: rgba(107,191,122,0.10);
  display: inline-flex; align-items: center; gap: 8px;
}
.badge.off { color: var(--muted); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(107,191,122,0.7);
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  70%  { box-shadow: 0 0 0 7px rgba(107,191,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(107,191,122,0); }
}
/* Kein Blinken für Nutzer, die reduzierte Bewegung eingestellt haben. */
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
/* Karten-Badge für "jetzt da" */
.card-badge.now {
  background: rgba(107,191,122,0.9); color: #0c1a10;
  border-color: transparent; font-weight: 700;
}

/* ==========================================================
   Newsletter-Anmeldung
   ========================================================== */
.nl-box {
  border-top: 1px solid var(--line-soft);
  margin-top: 56px; padding: 40px 0;
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent);
}
.nl-inner { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.nl-copy { flex: 1 1 300px; }
.nl-copy h2 { margin: 0 0 6px; }
.nl-copy p { margin: 0; font-size: 15px; }
.nl-form { display: flex; gap: 10px; flex: 1 1 320px; flex-wrap: wrap; }
.nl-form input[type=email] {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 15px;
}
.nl-form input[type=email]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.nl-note { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.nl-note a { text-decoration: underline; }
.nl-result { padding: 60px 0; }
.nl-result h1 { margin-bottom: 10px; }

/* Honeypot: für Menschen unsichtbar, für Bots ein ausfüllbares Feld.
   Bewusst NICHT display:none — manche Bots überspringen versteckte Felder. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ==========================================================
   Herstellerhinweis in der Fußzeile
   ==========================================================
   Bewusst zurückhaltend: eine Zeile, kleiner als der Rest, ohne Logo. Der
   Besucher ist wegen des Hauses hier, nicht wegen der Software. Ein auffälliger
   Hinweis würde den Eindruck der Seite beschädigen — und damit genau dem
   schaden, wofür er wirbt.
   ========================================================== */
.vendor-credit {
  padding: 10px 0 18px;
  font-size: 12px;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--muted, #8a8189);
  opacity: 0.75;
}
.vendor-credit a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.vendor-credit a:hover,
.vendor-credit a:focus-visible { color: var(--accent, #d4a259); }

/* ==========================================================
   Öffentliche Navigation: kein Überlauf knapp über der Hamburger-Grenze
   ==========================================================
   Der Hamburger erscheint ab 760 px abwärts. Knapp darüber — bei 768 px, also
   genau auf einem iPad im Hochformat — passte die Zeile nicht mehr: seit die
   Seite fünf Sprachen führt, ist der Umschalter breiter geworden.

   Gemessen bei 768 px vor der Regel: nav.nav reicht bis 792 px, Überlauf 24 px.
   Die Seite ließ sich seitlich wegschieben.

   Umbrechen statt abschneiden — ein zweizeiliger Kopf ist bedienbar, eine
   seitlich verrutschte Seite nicht.
   ========================================================== */
@media (min-width: 761px) and (max-width: 900px) {
  .site-header .nav { flex-wrap: wrap; row-gap: 4px; justify-content: flex-end; }
  .site-header .lang-switch { margin-left: auto; }
}

/* ==========================================================
   Karte lädt erst auf Klick
   ==========================================================
   Die Kacheln kommen von openstreetmap.org. Beim bloßen Öffnen der
   Kontaktseite ging damit die IP-Adresse jedes Besuchers an einen Dritten —
   ungefragt und unbemerkt. Das widerspricht dem Versprechen „keine Tracker,
   kein CDN", auf dem der Verzicht auf einen Cookie-Banner beruht.
   ========================================================== */
.map-idle { display: grid; place-items: center; background: var(--bg-2); border: 1px dashed var(--line); }
.map-consent { text-align: center; padding: 24px 18px; max-width: 420px; }
.map-consent p { color: var(--muted); font-size: 14px; margin: 0 0 14px; line-height: 1.5; }
.map-consent p { color: var(--muted); font-size: 14px; margin: 0 0 14px; line-height: 1.5; }

/* --- Leistungen auf dem öffentlichen Profil ---------------------------- */
.leistungen-public { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem 2rem; }
.leistungen-public .leistung-gruppe h3 { margin: 0 0 .4rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.leistungen-public ul { margin: 0; padding-left: 1.1rem; }
.leistungen-public li { margin: .15rem 0; }

/* --- Öffnungszeiten während einer Schließung -------------------------- */
/* Durchgestrichen statt entfernt: der Gast soll sehen, dass zu ist UND wie
   die regulären Zeiten aussehen. */
.zeit-gestrichen { text-decoration: line-through; opacity: .55; }
.zu-hinweis { margin-left: .4rem; font-style: normal; font-size: .85em; opacity: .8; }
tr.zu-wegen-schliessung th { opacity: .7; }

/* --- Lange Wörter brechen um --------------------------------------- */
/* Gemessen am 11.08.2026: die Überschrift „Datenschutzerklärung" ist ein
   einziges Wort von 387 px. Auf einem 390-px-Telefon schob sie das GANZE
   Dokument um 13 px zur Seite (403 statt 390) — und der Wert blieb bei 360 und
   320 px konstant, weil das Wort nicht umbricht. Deutsche Komposita sind hier
   die Regel, nicht die Ausnahme („Altersverifikation", „Kontrolluntersuchung").
   Ein Wort, das nicht passt, bricht — statt die Seite seitlich wegzuschieben. */
h1, h2, h3, h4, p, li, dd, dt, td, th, .prose, .hint { overflow-wrap: break-word; }

/* Fußzeile bricht um.
   Gemessen am 11.08.2026: .footer-nav stand auf flex/nowrap und war 278 px
   breit. Bei 375 px (iPhone SE/mini) lief JEDE öffentliche Seite um 1 px über,
   bei 360 px (verbreitete Android-Breite) um 16 px, bei 320 px um 56 px. Die
   Messreihe des Projekts beginnt bei 390 px — knapp darüber. Deshalb ist es nie
   aufgefallen, obwohl es alle Seiten betrifft. */
.footer-nav { flex-wrap: wrap; }

/* Videos auf dem Profil.
   max-width: 100% statt fester Breite — sonst sprengt ein Hochkant-Video vom
   Handy das Layout auf schmalen Geräten. Die Messreihe des Projekts beginnt
   bei 320 px, und ein 1080er Video ohne Deckel läge weit darüber. */
.girl-videos { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.girl-videos video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  background: #000;
}