/**
 * Kleine Auszeit – Website & Buchungssystem
 * Copyright (c) 2026 Jan Christopher Harm (Jan Chr. Harm Engineering). Alle Rechte vorbehalten.
 * Nutzung durch die Lizenznehmerin "Kleine Auszeit – Julia Anna Prylowski"
 * gemäß der Nutzungslizenz in der LICENSE-Datei im Workspace-Wurzelverzeichnis.
 *
 * Zentrales Stylesheet für alle Seiten der Website. Gliederung:
 * 1. Design-Tokens (Farben, Radien, Schatten)
 * 2. Basis-/Reset-Regeln
 * 3. Layout-Bausteine (Container, Grid, Sections)
 * 4. Header & Navigation
 * 5. Komponenten (Buttons, Karten, Galerie, Formulare, Footer)
 * 6. Seitenspezifische Blöcke (Hero, FAQ-Akkordeon, Cookie-Banner)
 * 7. Seitenübergang (Wisch-Effekt)
 * 8. Responsive Anpassungen
 */

/* ---------- 1. Design-Tokens ---------- */
:root {
  /* Cremeweiß statt des vorherigen warmen Beige -- deutlich naeher an Weiss,
     behaelt aber einen ganz leichten warmen Unterton statt sterilem #fff
     (das bleibt --color-surface, fuer Karten/Formulare als Kontrast). */
  --color-bg: #fdfcf9;
  --color-bg-alt: #f6f3ec;
  --color-surface: #ffffff;
  --color-text: #2b2a27;
  --color-muted: #6b665d;
  --color-primary: #1d3557;
  --color-primary-dark: #12233b;
  --color-primary-soft: #e7edf3;
  /* Akzentfarbe = der dunkle Blauton aus dem Logo (website/img/logo.png),
     direkt aus der Bilddatei ausgelesen (dominanter Farbwert, RGB 20/56/115)
     -- ersetzt den vorherigen bronzefarbenen Akzent. accent-dark/-soft sind
     davon abgeleitete Abstufungen fuer Hover- bzw. Fuellzustaende. */
  --color-accent: #143873;
  --color-accent-dark: #0f2a56;
  --color-accent-soft: #e6ebf4;
  --color-border: #e4ddd0;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 24px;
  --shadow-soft: 0 12px 30px -18px rgba(29, 53, 87, 0.35);
  --shadow-card: 0 4px 18px -8px rgba(43, 42, 39, 0.18);
  /* Einheitlich Aptos auf der ganzen Website (Ueberschriften wie Fliesstext).
     Aptos ist eine Microsoft-Systemschrift (Windows 11 / Microsoft 365) und
     steht nicht als freier Webfont zur Verfuegung -- bei Besucher:innen ohne
     Aptos greifen die Fallbacks: Calibri/Carlito als metrisch aehnlichste
     Alternative, danach die weiteren Systemschriften. */
  --font-heading: Aptos, Calibri, Carlito, Candara, "Segoe UI", Optima, Arial, sans-serif;
  --font-body: Aptos, Calibri, Carlito, Candara, "Segoe UI", Optima, Arial, sans-serif;
  --max-width: 1180px;
}

/* ---------- 2. Basis / Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
button { font-family: inherit; }

/* ---------- 3. Layout ---------- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: 72px 0; }
.section-alt { background: var(--color-bg-alt); }
.section-header { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.section-header p { color: var(--color-muted); font-size: 1.05rem; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  font-weight: 700;
  margin-bottom: 10px;
}
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- 4. Header & Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 52px; width: auto; }
.brand-text { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: 1.15rem; line-height: 1.2; }
.brand-text span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.72rem; color: var(--color-muted); letter-spacing: 0.04em; }

.main-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.main-nav a {
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
}
.main-nav a:hover,
.main-nav a.is-active { background: var(--color-primary-soft); color: var(--color-primary); }
.nav-cta {
  background: var(--color-accent);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px;
  margin-left: 8px;
}
.nav-cta:hover { background: var(--color-accent-dark); }
/* Eigenstaendig formatiert (nicht nur ueber ".main-nav a"), da dieses Element
   je nach Anmeldestatus entweder ein <a> (Anmelden) oder ein <button>
   (Abmelden) ist -- siehe booking-frontend/src/shared/AccountBar.jsx und
   website/js/main.js. Browser-Standardstile fuer <button> (Hintergrund,
   Schrift) werden damit vollstaendig ueberschrieben. */
.nav-account {
  display: inline-block;
  border: 1.5px solid var(--color-primary);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 6.5px 16px !important;
  border-radius: 999px;
  margin-left: 8px;
  text-decoration: none;
  cursor: pointer;
}
.nav-account:hover { background: var(--color-primary); color: #fff !important; text-decoration: none; }

/* Kleinerer Button direkt ins Mitgliederportal, neben dem "Abmelden"-Button
   -- nur sichtbar, wenn man angemeldet ist (siehe website/js/main.js und
   booking-frontend/src/shared/AccountBar.jsx). Bewusst ein gefuellter,
   umrandeter Button statt eines reinen Text-Links, damit er neben
   "Abmelden" nicht uebersehen wird -- nur kleiner/zurueckhaltender in der
   Akzentfarbe statt der kraeftigeren Primaerfarbe von "Abmelden".
   [hidden] hier explizit noetig, sonst gewinnt "display: inline-block"
   unten gegen die UA-Regel fuers hidden-Attribut (siehe .cookie-banner
   weiter unten fuers gleiche Muster). */
.nav-portal {
  display: inline-block;
  border: 1.5px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 5px 14px;
  border-radius: 999px;
  margin-left: 8px;
  text-decoration: none;
}
.nav-portal:hover { background: var(--color-accent); color: #fff; text-decoration: none; }
.nav-portal[hidden] { display: none; }

.nav-toggle {
  display: none;
  border: none;
  background: none;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--color-primary); margin: 5px 0; }

/* ---------- 5. Komponenten ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-dark); text-decoration: none; }
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.btn-light { background: #fff; color: var(--color-primary); }
.btn-light:hover { background: var(--color-primary-soft); text-decoration: none; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  border: 1px solid var(--color-border);
  padding: 28px;
  box-shadow: var(--shadow-card);
}

.service-card { display: flex; flex-direction: column; gap: 10px; }
.service-card .service-price { margin-top: auto; font-weight: 700; color: var(--color-accent-dark); font-size: 1.05rem; }
.service-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; color: var(--color-muted); }
.service-card ul li { padding: 3px 0; }

.icon-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.icon-list li { display: flex; gap: 12px; align-items: flex-start; }
.icon-dot {
  flex: none; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); margin-top: 8px;
}

/* Echtes Masonry statt festem Raster mit object-fit:cover -- Bilder werden
   dadurch vollstaendig und im Original-Seitenverhaeltnis gezeigt statt auf
   eine feste Zellenhoehe zugeschnitten. */
.gallery-grid { columns: 4 220px; column-gap: 14px; }
.gallery-grid img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-m);
  margin-bottom: 14px; break-inside: avoid;
}

.testimonial { font-family: var(--font-heading); font-size: 1.3rem; font-style: italic; color: var(--color-primary); text-align: center; max-width: 780px; margin: 0 auto; }

table.price-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); }
table.price-table th, table.price-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--color-border); }
table.price-table th { background: var(--color-primary-soft); color: var(--color-primary); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
table.price-table tr:last-child td { border-bottom: none; }

/* Formulare */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 13px; border-radius: var(--radius-s);
  border: 1px solid var(--color-border); font: inherit; background: #fff;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 2px solid var(--color-accent); outline-offset: 1px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-message { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--radius-s); font-size: 0.92rem; }
.form-message.is-ok { background: #e8f3ec; color: #2e6b46; }
.form-message.is-error { background: #fdecea; color: #b3261e; }
/* Honeypot gegen einfache Spam-Bots: fuer Menschen unsichtbar (nicht per
   display:none/hidden, das wuerden manche Screenreader trotzdem ansagen;
   diese Kombination blendet es rein visuell aus). */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Google Maps: Platzhalter bis zum Klick (siehe js/index.js) */
.map-embed {
  position: relative; border-radius: var(--radius-m); overflow: hidden;
  box-shadow: var(--shadow-card); background: var(--color-bg-alt);
  aspect-ratio: 16 / 9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-embed-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px;
}

/* Footer */
.site-footer { background: var(--color-primary-dark); color: #eef1f5; padding: 56px 0 24px; }
.site-footer a { color: #eef1f5; }
.site-footer .grid-3 { gap: 40px; margin-bottom: 40px; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; opacity: 0.9; }
.site-footer .socials { display: flex; gap: 12px; margin-top: 14px; }
.site-footer .socials img { width: 22px; height: 22px; filter: invert(1); opacity: 0.85; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
  opacity: 0.75;
}
.footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- 6. Seitenspezifisch ---------- */
/* Startseiten-Hero: volle Breite, Bild bleibt beim Scrollen stehen
   (background-attachment:fixed), der Rest der Seite wandert darueber weg --
   der Text sitzt dafuer in einem eigenen, undurchsichtigen weissen Kasten
   (.hero-box), sonst waere er auf hellen Bildstellen kaum lesbar. Auf
   Touch-Geraeten wird der Fixed-Effekt bewusst abgeschaltet (siehe
   @media (hover:none) direkt unter .hero-bg) -- iOS/Android setzen
   background-attachment:fixed oft fehlerhaft um. */
.hero {
  position: relative;
  min-height: min(88vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* iOS/Android setzen background-attachment:fixed oft fehlerhaft um (das Bild
   wirkt dann verzerrt/falsch skaliert statt nur "stehen zu bleiben") -- auf
   JEDEM Touch-Geraet abschalten, nicht nur unterhalb einer Breite. Ein
   iPad liegt im Querformat (Landscape) oft ueber der 900px-Grenze aus dem
   Responsive-Abschnitt unten, war darueber also bisher nicht abgedeckt. */
@media (hover: none), (pointer: coarse) {
  .hero-bg { background-attachment: scroll; }
}
.hero .container { position: relative; z-index: 1; width: 100%; }
.hero-box {
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-soft);
  padding: 40px 44px;
  max-width: 560px;
}
.hero h1 { margin-bottom: 18px; }
.hero p.lead { font-size: 1.15rem; color: var(--color-muted); max-width: 480px; }
.hero-actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hero-image { border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-soft); max-width: 380px; }
.hero-badge {
  position: absolute; bottom: -18px; left: 24px; background: #fff;
  border-radius: var(--radius-m); padding: 14px 18px; box-shadow: var(--shadow-card);
  display: flex; gap: 10px; align-items: center; font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
}

.page-hero {
  background: var(--color-bg);
  padding: 56px 0 40px;
  text-align: center;
}
.page-hero p { color: var(--color-muted); max-width: 620px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--color-border); padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--color-primary); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--color-accent); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin-top: 12px; color: var(--color-muted); }

.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: -60px;
  position: relative;
  z-index: 2;
}
.info-strip .card { text-align: center; }
.info-strip .card h3 { margin-bottom: 6px; }
.info-strip .card p { margin: 0; color: var(--color-muted); font-size: 0.92rem; }

.booking-embed-frame {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  padding: 8px;
}

.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 999;
  background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-m);
  padding: 18px 22px; box-shadow: var(--shadow-soft);
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap; max-width: 720px; margin: 0 auto;
}
.cookie-banner p { margin: 0; font-size: 0.88rem; flex: 1 1 260px; }
.cookie-banner .btn { padding: 9px 18px; font-size: 0.85rem; }
.cookie-banner[hidden] { display: none; }

/* Schwebender "Weiter zur Buchung"-Button (siehe js/main.js
   initBookingResume) -- erscheint auf jeder Seite, solange irgendwo eine
   Terminreservierung laeuft. */
.booking-resume {
  position: fixed; right: 16px; bottom: 16px; z-index: 998;
  display: flex; align-items: center; gap: 10px;
  background: var(--color-accent); color: #fff;
  border-radius: 999px; padding: 12px 20px 12px 16px;
  box-shadow: var(--shadow-soft); max-width: min(360px, calc(100vw - 32px));
  font-size: 0.85rem; font-weight: 600; line-height: 1.3;
  text-decoration: none; transition: background-color .15s, bottom .15s ease;
}
.booking-resume:hover { background: var(--color-accent-dark); text-decoration: none; }
.booking-resume-icon { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }

.legal h2 { margin-top: 1.8em; }
.legal { max-width: 780px; margin: 0 auto; }
.legal address { font-style: normal; }

/* ---------- 7. Seitenuebergang (Wisch-Effekt) ---------- */
/* Einfarbige Flaeche, die beim Seitenwechsel einmal von rechts nach links
   durchs Bild wischt: einmal beim Verlassen der alten Seite (deckt zu,
   waehrend im Hintergrund zur neuen Seite navigiert wird) und einmal beim
   Erscheinen der neuen Seite (wischt wieder weg und gibt sie frei). Steuerung
   in js/page-transition.js. Ohne JavaScript bleibt die Flaeche unsichtbar
   (siehe <noscript> in den *.html-Dateien) -- die Seite funktioniert dann
   ganz normal, nur ohne den Effekt.
   Standardzustand OHNE Modifikator-Klasse ist bewusst "deckt zu"
   (translateX(0)): so verdeckt die Flaeche sofort beim ersten Malen der
   Seite jeden Rohbau-Blitzer, noch bevor page-transition.js ueberhaupt
   laeuft. */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-accent);
  transform: translateX(0);
  pointer-events: none;
}
.page-wipe.pw-anim { transition: transform 0.42s cubic-bezier(.65, 0, .35, 1); }
.page-wipe.pw-hidden-right { transform: translateX(100%); }
.page-wipe.pw-hidden-left { transform: translateX(-100%); }

@media (prefers-reduced-motion: reduce) {
  .page-wipe { display: none; }
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 900px) {
  .hero-box { padding: 28px 26px; max-width: 100%; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .info-strip { grid-template-columns: 1fr; margin-top: 24px; }
  .gallery-grid { columns: 2 180px; }
}
@media (max-width: 760px) {
  .main-nav { position: fixed; inset: 64px 16px auto 16px; background: #fff; border-radius: var(--radius-m);
    box-shadow: var(--shadow-soft); flex-direction: column; align-items: stretch; padding: 10px; display: none; }
  .main-nav.is-open { display: flex; }
  .main-nav a { padding: 12px 14px; }
  .nav-toggle { display: block; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .hero { min-height: 60vh; }
}