/* ==========================================================================
   la Pedicurista – Redesign
   Design-System-Werte übernommen aus dem Claude-Design-Import
   ("Redesign la Pedicurista.dc.html"): Farben, Typografie, Radien, Abstände.
   ========================================================================== */

:root {
  /* Farben */
  --color-petrol: #48B6C6;
  --color-petrol-dark: #1F7382;
  --color-petrol-darker: #14535F;
  --color-gold: #D8B570;
  --color-gold-dark: #8A6328;
  --color-cream: #FBF9F6;
  --color-text: #2C3639;
  --color-text-muted: #5F6B6E;
  --color-text-light: #616C70;
  --color-border: #EDE6DB;
  --color-border-light: #E8E1D6;
  --color-surface-blue: #EAF4F6;
  --color-surface-blue-strong: #F4FAFB;
  --color-surface-blue-border: #D5E7EA;
  --color-surface-warm: #F2EDE4;
  --color-notice-bg: #F7F2E8;
  --color-notice-border: #E7DBC2;
  --color-notice-text: #5A5140;
  --color-success: #5B8C4B;
  --color-success-bg: #EEF5EA;
  --color-success-border: #CFE3C4;
  --color-success-text: #3F5C37;
  --color-footer-bg: #2C3639;
  --color-footer-text: #D6DDDE;
  --color-footer-text-muted: #A9B4B6;
  --color-footer-label: #D8B570;
  --color-white: #ffffff;

  /* Typografie */
  --font-serif: "Source Serif 4", Georgia, serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* Abstands-Skala */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radien */
  --radius-sm: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;

  /* Frame 1440px, Seitenpolster 56px (Desktop) => Inhaltsbreite 1328px, gemäss Design-Import */
  --content-max: 1440px;
  --content-pad: 24px;
  --text-max: 780px;
  --header-h: 72px;
}

/* The browser's [hidden] rule lives in the low-priority user-agent
   stylesheet, so ANY author rule setting display on the same element
   (e.g. .btn's display:inline-flex) silently wins and un-hides it
   regardless of specificity. This restores the platform default
   globally so no future component has to re-discover that bug. */
[hidden] { display: none !important; }

@media (min-width: 720px) {
  :root {
    --content-pad: 56px;
    --header-h: 96px;
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-3)); }

body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

button { font-family: inherit; }

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-text);
  margin: 0;
}

p { margin: 0; }

ul { margin: 0; padding: 0; }

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

a.skip-link {
  position: absolute;
  left: 8px; top: -60px;
  background: var(--color-petrol-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top .2s ease;
}
a.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 3px solid var(--color-petrol);
  outline-offset: 2px;
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad);
}

/* ---------------- Header / Navigation ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,249,246,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-light);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-3);
}

.logo-link { display: block; flex: none; }
.logo-link img { height: 34px; width: auto; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 17px;
  color: var(--color-text);
  text-decoration: none;
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
}

.nav-links a.btn-primary,
.nav-links a.btn-primary:hover {
  color: #fff;
  padding: 0 30px;
  font-size: 18px;
  border-bottom: none;
}

.nav-links a:not(.btn):hover,
.nav-links a:not(.btn)[aria-current="page"] {
  color: var(--color-petrol-dark);
}
.nav-links a:not(.btn)[aria-current="page"] {
  border-bottom-color: var(--color-petrol);
  font-weight: 600;
}
.nav-links a.btn[aria-current="page"] { outline: 2px solid #14535F; outline-offset: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border-radius: var(--radius-pill);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-petrol-dark);
  color: #fff;
  box-shadow: 0 4px 14px rgba(31,115,130,.28);
}
.btn-primary:hover { background: var(--color-petrol-darker); color: #fff; }

.btn-secondary {
  background: transparent;
  border: 1.5px solid var(--color-petrol-dark);
  color: var(--color-petrol-dark);
  height: 54px;
}
.btn-secondary:hover { background: var(--color-surface-blue-strong); color: var(--color-petrol-darker); }

.btn-disabled,
.btn[aria-disabled="true"] {
  background: #E7E2D9;
  color: #A8A29A;
  box-shadow: none;
  cursor: not-allowed;
}
.btn-disabled:hover, .btn[aria-disabled="true"]:hover { background: #E7E2D9; color: #A8A29A; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px 0 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-petrol-dark);
  background: none;
  color: var(--color-petrol-dark);
  cursor: pointer;
  font-family: var(--font-sans);
}
.nav-toggle:hover { background: var(--color-surface-blue-strong); }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; }
.nav-toggle-bars span { width: 20px; height: 2px; border-radius: 2px; background: var(--color-petrol-dark); display: block; }
.nav-toggle-label { font-size: 16px; font-weight: 600; letter-spacing: .02em; }

/* ---------------- Mobiles Menü (Overlay-Panel) ---------------- */

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44,54,57,.45);
  backdrop-filter: blur(2px);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.mobile-menu-panel {
  position: relative;
  background: var(--color-cream);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: 0 20px 50px rgba(44,54,57,.28);
  padding: 44px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
}
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu-logo { height: 32px; width: auto; display: block; }
.mobile-menu-close {
  width: 48px; height: 48px;
  margin-right: -8px;
  border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  color: var(--color-petrol-dark);
  background: none; border: none; cursor: pointer;
}
.mobile-menu-close:hover { background: var(--color-surface-blue-strong); }
.mobile-menu-links { display: flex; flex-direction: column; }
.mobile-menu-links a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px;
  padding: 0 4px;
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu-links a:last-child { border-bottom: none; }
.mobile-menu-links a:hover,
.mobile-menu-links a[aria-current="page"] { color: var(--color-petrol-dark); }
.mobile-menu-links a .dot {
  display: none;
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-petrol); flex: none;
}
.mobile-menu-links a[aria-current="page"] .dot { display: block; }

/* "Einstellungen"-Gruppe im mobilen Admin-Menü (Behandlungen, Zusatzoptionen,
   Google Kalender, Sicherheit — selten genutzt, daher eingeklappt). */
.mobile-menu-group summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px;
  padding: 0 4px;
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  list-style: none;
}
.mobile-menu-group summary::-webkit-details-marker { display: none; }
.mobile-menu-group summary::after {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-right: 2px solid var(--color-petrol-dark);
  border-bottom: 2px solid var(--color-petrol-dark);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.mobile-menu-group[open] summary::after { transform: rotate(225deg); }
.mobile-menu-subgroup { display: flex; flex-direction: column; }
.mobile-menu-links .mobile-menu-subgroup a {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  min-height: 52px;
  padding-left: 16px;
  color: var(--color-text-muted);
}
.mobile-menu-links .mobile-menu-subgroup a[aria-current="page"] { color: var(--color-petrol-dark); }

.mobile-menu-cta { height: 60px; box-shadow: 0 4px 16px rgba(31,115,130,.3); }
.mobile-menu-info {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}
.mobile-menu-info .eyebrow { display: block; }
.mobile-menu-info p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-text-muted); }
.mobile-menu-info a { color: var(--color-petrol-dark); font-weight: 600; text-decoration: none; }
.mobile-menu-info a:hover { color: var(--color-petrol-darker); }

body.mobile-menu-open { overflow: hidden; }

/* ---------------- Hero ---------------- */

.hero-band { background: #fff; }
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: var(--content-max);
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 0;
}
.hero > * { min-width: 0; }

.hero-content {
  padding: var(--space-5) var(--content-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  justify-content: center;
}
@media (min-width: 720px) {
  .hero-content { padding: var(--space-6) var(--space-4); }
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

.hero h1 {
  font-size: 44px;
  line-height: 1.12;
  text-wrap: balance;
}

.hero-lead, .lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--color-text-muted);
  max-width: 34em;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.hero-phone {
  margin: var(--space-1) 0 0;
  font-size: 16px;
  color: var(--color-text-light);
}
.hero-phone a { font-weight: 600; color: var(--color-text); text-decoration: none; }

.hero-media {
  position: relative;
  min-height: 320px;
  background: var(--color-surface-warm);
}
.hero-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ---------------- Trust strip ---------------- */

.trust-strip {
  background: var(--color-petrol-dark);
  padding: var(--space-3);
}
.trust-strip .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-size: 17px;
}
.trust-item .dot {
  width: 10px; height: 10px; border-radius: var(--radius-pill);
  background: var(--color-gold); flex: none;
}

/* ---------------- Sections ---------------- */

.section {
  padding: var(--space-6) 0;
}
.section-alt { background: var(--color-surface-warm); }
.section-blue { background: var(--color-surface-blue); }

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--text-max);
  margin-bottom: var(--space-4);
}
.section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

h2.section-title { font-size: 32px; line-height: 1.15; }
h3.card-title { font-size: 22px; font-weight: 600; }

.link-arrow {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-petrol-dark);
  text-decoration: none;
  border-bottom: 2px solid var(--color-petrol);
  padding-bottom: 3px;
  white-space: normal;
}
@media (min-width: 640px) {
  .link-arrow { white-space: nowrap; }
}

/* ---------------- Treatment cards ---------------- */

.card-grid,
.notice-grid,
.quote-block,
.location-grid,
.footer-grid,
.booking-body {
  min-width: 0;
}
.card-grid > *,
.notice-grid > *,
.quote-block > *,
.location-grid > *,
.footer-grid > *,
.booking-body > * {
  min-width: 0;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.treatment-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(44,54,57,.05);
  position: relative;
}
.treatment-card.is-featured {
  border: 1.5px solid var(--color-petrol);
  box-shadow: 0 8px 24px rgba(31,115,130,.1);
}

.treatment-card .card-media {
  width: 100%; height: 200px;
  object-fit: cover;
  background: var(--color-surface-warm);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.treatment-card .card-media.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 13px; color: #9A8F7C; text-align: center;
  background: repeating-linear-gradient(135deg, #F2EDE4 0 10px, #EBE4D8 10px 20px);
}

.badge--overlap {
  position: absolute;
  top: -13px; left: 32px;
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: #3A2E17;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.badge {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: #3A2E17;
  font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}

.card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.card-body .card-desc { color: var(--color-text-muted); font-size: 17px; line-height: 1.6; }

.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
  color: var(--color-text-muted);
}
.card-list li { display: flex; gap: 10px; }
.card-list li::before {
  content: "";
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--color-petrol);
  margin-top: 9px; flex: none;
}

.card-footer {
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.price {
  display: flex; align-items: baseline; gap: 8px;
}
.price .amount { font-size: 24px; font-weight: 700; color: var(--color-petrol-dark); }
.price .duration { font-size: 15px; color: var(--color-text-light); }
.price .todo { font-size: 15px; color: var(--color-gold-dark); font-weight: 600; }

.note-todo {
  display: block;
  margin-top: var(--space-3);
  font-size: 14px;
  font-style: italic;
  color: var(--color-text-light);
  font-weight: 400;
}

/* ---------------- Notice / info boxes ---------------- */

.notice {
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.notice .dot {
  width: 12px; height: 12px; border-radius: var(--radius-pill);
  background: var(--color-gold); margin-top: 6px; flex: none;
}
.notice .notice-title { font-family: var(--font-sans); font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.notice p { color: var(--color-notice-text); font-size: 17px; line-height: 1.6; margin: 0; }

.notice-success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}
.notice-success .notice-title,
.notice-success p { color: var(--color-success-text); }
.notice-success .dot {
  width: 22px; height: 22px;
  margin-top: 0;
  background: var(--color-success);
  position: relative;
}
.notice-success .dot::after {
  content: "";
  position: absolute;
  left: 7px; top: 3px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.notice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

/* ---------------- Quote / trust block ---------------- */

.quote-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.quote-media { border-radius: var(--radius-card); overflow: hidden; box-shadow: 0 12px 34px rgba(44,54,57,.12); }
.quote-media img { width: 100%; height: 100%; object-fit: cover; }
.quote-block blockquote {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 28px;
  line-height: 1.3;
  color: var(--color-text);
}
.quote-block .quote-body { display: flex; flex-direction: column; gap: var(--space-2); }

/* ---------------- Location ---------------- */

.location-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
.location-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 18px;
  line-height: 1.55;
  color: var(--color-text-muted);
  list-style: none;
}
.location-list li { display: flex; gap: 12px; }
.location-list li .dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  margin-top: 9px; flex: none; background: var(--color-petrol);
}
.location-list li.warn .dot { background: var(--color-gold); }
.map-frame {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  position: relative;
  height: 320px;
  background: var(--color-surface-warm);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------- Booking CTA band ---------------- */

.cta-band {
  background: var(--color-surface-blue);
  padding: var(--space-5) 0;
}
.cta-band .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}
.cta-band h3 { font-size: 28px; color: var(--color-petrol-darker); }
.cta-band p { font-size: 18px; color: #40595E; }

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--color-footer-bg);
  padding: var(--space-6) 0 var(--space-3);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.footer-brand img { height: 38px; width: auto; margin-bottom: var(--space-2); }
.footer-brand p { color: var(--color-footer-text-muted); font-size: 16px; line-height: 1.6; }
.footer-col .footer-label {
  font-family: var(--font-sans);
  margin: 0 0 var(--space-2);
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-footer-label);
}
.footer-col p, .footer-col a {
  color: var(--color-footer-text);
  font-size: 16px;
  line-height: 1.7;
  text-decoration: none;
}
.footer-col a { display: block; margin-bottom: 6px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid #46514F;
  font-size: 14px;
  color: #A5AEB0;
}

/* ---------------- Booking mockup page ---------------- */

.booking-frame {
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(44,54,57,.07);
  margin-top: var(--space-4);
}
.booking-frame-header {
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-blue);
  border-bottom: 1px solid var(--color-surface-blue-border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.booking-frame-header .title { font-size: 16px; font-weight: 600; color: var(--color-petrol-darker); }
.booking-frame-header .meta { font-size: 14px; color: #40595E; }

.booking-body {
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.booking-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.booking-options .group-title, .booking-calendar .group-title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: .03em; margin: 0; }

.option-label[hidden] { display: none; }
.option-label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #E4DDD1;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.option-label:hover { border-color: var(--color-petrol); }
.option-label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option-label .radio {
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  border: 2px solid #C3BAAA; flex: none; box-sizing: border-box;
}
.option-label input:checked ~ .radio {
  border: 7px solid var(--color-petrol-dark);
  background: #fff;
}
.option-label:has(input:checked) {
  border: 2px solid var(--color-petrol-dark);
  background: var(--color-surface-blue-strong);
}
.option-label .option-text { display: flex; flex-direction: column; gap: 2px; }
.option-label .option-text .name { font-size: 17px; font-weight: 600; color: var(--color-text); }
.option-label .option-text .meta { font-size: 15px; color: var(--color-text-light); }

.option-checkbox .radio { border-radius: 6px; position: relative; }
.option-checkbox .radio::after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.option-checkbox input:checked ~ .radio {
  border: 2px solid var(--color-petrol-dark);
  background: var(--color-petrol-dark);
}
.option-checkbox input:checked ~ .radio::after { display: block; }

.upsell-box {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.upsell-box .eyebrow { color: var(--color-gold-dark); }
.upsell-box .upsell-option {
  background: #fff;
  border-color: var(--color-notice-border);
}
.upsell-box .upsell-option:hover { border-color: var(--color-gold); }
.upsell-box .upsell-option:has(input:checked) {
  border-color: var(--color-gold-dark);
  background: #FCF8EE;
}
.upsell-box .upsell-option input:checked ~ .radio {
  border-color: var(--color-gold-dark);
  background: var(--color-gold-dark);
}

.calendar-nav {
  display: flex; align-items: center; justify-content: space-between;
}
.calendar-nav-btns { display: flex; align-items: center; gap: 8px; }
.calendar-nav-btns button {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  border: 1px solid #E4DDD1; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--color-text-muted); cursor: pointer;
}
.calendar-nav-btns button:hover { border-color: var(--color-petrol); }
.calendar-month-label {
  min-width: 120px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

/* ---------------- Buchungs-Bestätigungs-Popup ---------------- */

body.booking-confirm-open { overflow: hidden; }
.booking-confirm-modal[hidden] { display: none; }
.booking-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.booking-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44,54,57,.45);
  backdrop-filter: blur(2px);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.booking-confirm-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  background: var(--color-cream);
  border-radius: var(--radius-card);
  box-shadow: 0 20px 50px rgba(44,54,57,.28);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.booking-confirm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.booking-confirm-top h2 { margin: 0; font-size: 22px; }
.booking-confirm-top .mobile-menu-close { margin: -8px -8px 0 0; flex: none; }
.booking-confirm-hint {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-notice-bg);
  border: 1px solid var(--color-notice-border);
  font-size: 14px;
  color: var(--color-text);
}
.booking-confirm-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.booking-confirm-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.booking-confirm-list > div:last-child { border-bottom: none; padding-bottom: 0; }
.booking-confirm-list dt { margin: 0; font-size: 13px; color: var(--color-text-light); }
.booking-confirm-list dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text); text-align: right; }
.booking-confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.booking-confirm-actions .btn { flex: 1 1 160px; }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-top: var(--space-2);
}
.calendar-grid .dow {
  text-align: center; font-size: 13px; font-weight: 600; color: var(--color-text-light); padding: 4px 0;
}
.calendar-grid .day {
  height: 44px; margin: 0; padding: 0; width: 100%;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  background: var(--color-cream);
  color: #726B60;
  border: 1px solid #F0EAE0;
  appearance: none;
}
.calendar-grid .day.is-free {
  background: var(--color-surface-blue-strong);
  color: var(--color-petrol-darker);
  border: 1px solid var(--color-surface-blue-border);
  font-weight: 600;
  cursor: pointer;
}
.calendar-grid .day.is-free:hover { outline: 2px solid var(--color-petrol); outline-offset: -2px; }
.calendar-grid .day.is-selected {
  background: var(--color-petrol-dark);
  color: #fff;
  border-color: var(--color-petrol-dark);
  font-weight: 600;
}
.calendar-grid .day.is-empty { background: transparent; border-color: transparent; }

.slot-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--space-2);
}
.slot {
  display: inline-flex; align-items: center;
  height: 48px; padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-surface-blue-border);
  background: #fff;
  font-size: 16px; font-weight: 600; color: var(--color-petrol-dark);
  cursor: pointer;
}
.slot:hover { border-color: var(--color-petrol); }
.slot.is-selected {
  background: var(--color-petrol-dark);
  color: #fff;
  border-color: var(--color-petrol-dark);
  box-shadow: 0 4px 14px rgba(31,115,130,.28);
}
.slot.is-taken {
  border: 1px dashed #E4DDD1;
  background: var(--color-cream);
  color: #B0AA9E;
  text-decoration: line-through;
  cursor: not-allowed;
}

.booking-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-blue-strong);
  border: 1px solid var(--color-surface-blue-border);
  margin-top: var(--space-3);
}
.booking-summary span { font-size: 17px; color: var(--color-petrol-darker); }

.booking-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.booking-form .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.booking-form label { font-size: 15px; font-weight: 600; color: var(--color-text); }
.booking-form input, .booking-form select, .booking-form textarea {
  font-family: var(--font-sans);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #E4DDD1;
  background: #fff;
  color: var(--color-text);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.booking-form input:disabled, .booking-form textarea:disabled { background: #F5F2EC; color: #A8A29A; }

/* Split country-code/national-number phone input, see
   resources/views/partials/phone-field.blade.php. Also used inside the
   admin panel (admin.css inputs), which is why it isn't scoped to
   .booking-form. */
.phone-field-row { display: flex; gap: 8px; }
.phone-field-row select { flex: 0 0 auto; width: auto; min-width: 132px; }
.phone-field-row input[data-phone-country-custom] { flex: 0 0 64px; padding-left: 8px; padding-right: 8px; text-align: center; }
.phone-field-row input[data-phone-national] { flex: 1 1 auto; min-width: 0; }
@media (max-width: 420px) {
  .phone-field-row select { min-width: 108px; }
}

.preview-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-gold-dark);
  font-weight: 600;
  margin-top: 10px;
}

.booking-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.booking-step { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.booking-step .num {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--color-surface-blue); color: var(--color-petrol-darker);
  font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.booking-step .step-title { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.booking-step p { font-size: 16px; color: var(--color-text-muted); margin: 0; }

/* ---------------- Legal page ---------------- */

.legal-content { max-width: 860px; }
.legal-content h2 { font-size: 26px; margin-top: var(--space-5); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-family: var(--font-sans); font-size: 19px; font-weight: 700; margin-top: var(--space-3); }
.legal-content p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: 16px; line-height: 1.7; }
.legal-content ul { margin-top: var(--space-2); padding-left: 20px; color: var(--color-text-muted); font-size: 16px; line-height: 1.7; }

/* ---------------- Timeline (Über mich) ---------------- */

.timeline { display: flex; flex-direction: column; gap: var(--space-2); }
.timeline-item { display: flex; gap: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-2); }
.timeline-item:first-child { border-top: none; padding-top: 0; }
.timeline-year { flex: none; width: 130px; font-weight: 700; color: var(--color-petrol-dark); font-size: 17px; }
.timeline-text { color: var(--color-text-muted); font-size: 17px; line-height: 1.6; }

/* ---------------- Mobile nav ---------------- */

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .main-nav .nav-links { display: none; }
}

/* ---------------- Responsive breakpoints ---------------- */

@media (min-width: 640px) {
  .notice-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip .container { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 720px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .booking-body { grid-template-columns: 300px 1fr; }
  .booking-steps { grid-template-columns: repeat(3, 1fr); }
  .logo-link img { height: 42px; }
  /* Exakte Werte aus dem Design-Import: 96px vertikal, 56px links, 64px rechts (Abstand zum Bild) */
  .hero-content { padding: var(--space-7) 64px var(--space-7) var(--content-pad); }
  .hero-media { min-height: 520px; }
}

@media (min-width: 860px) {
  h2.section-title { font-size: 42px; }
  .hero h1 { font-size: 58px; }
  .quote-block { grid-template-columns: 380px 1fr; }
  .location-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .cta-band .container { flex-direction: row; align-items: center; justify-content: space-between; }
  .card-grid--compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 260px; order: -1; }
  .section { padding: var(--space-5) 0; }
}

/* Sticky mobile booking button on booking page */
.mobile-book-bar {
  display: none;
}
@media (max-width: 720px) {
  body.has-mobile-book-bar { padding-bottom: 84px; }
  .mobile-book-bar {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: rgba(251,249,246,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border-light);
    z-index: 90;
  }
  .mobile-book-bar .btn { width: 100%; }
}