/* ============================================================================
   Classic Lashes JL – gemeinsame Ergaenzungen
   Nur neue, wiederverwendete Bausteine. Das bestehende Design (Creme/Rosé/
   Taupe, Cinzel + Montserrat, Glass-Panels) bleibt unveraendert.
   ========================================================================== */

/* Nur fuer Screenreader / Maschinen sichtbar */
.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;
}

/* --- Preistabellen ---------------------------------------------------------
   Semantisch echte <table>-Struktur: Leistung + Preis sind eindeutig
   zugeordnet – fuer Nutzerinnen, Screenreader, Suchmaschinen und KI-Systeme. */
.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.price-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.98rem;
}
.price-table caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  color: #1F191A;
  padding-bottom: 0.65rem;
}
.price-table th,
.price-table td {
  padding: 0.85rem 0.25rem;
  border-bottom: 1px solid rgba(217, 193, 154, 0.9);
  vertical-align: top;
}
.price-table thead th {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(59, 48, 50, 0.7);
  padding-bottom: 0.5rem;
}
.price-table tbody th {
  font-weight: 500;
  color: #1F191A;
  padding-right: 1rem;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}
.price-table .price-meta {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(59, 48, 50, 0.72);
  margin-top: 0.2rem;
}
.price-table .price-value {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: #1F191A;
  font-size: 1.05rem;
}
@media (max-width: 420px) {
  .price-table { font-size: 0.92rem; }
  .price-table th, .price-table td { padding: 0.7rem 0.15rem; }
  .price-table .price-value { font-size: 1rem; }
}

/* --- FAQ ------------------------------------------------------------------- */
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid #3B3032; outline-offset: 3px; border-radius: 0.5rem; }
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-toggle { transition: transform 0.2s ease; display: inline-block; }

/* --- WhatsApp-CTA (gleichwertiger zweiter Buchungsweg neben Online-Buchung) */
html { scroll-behavior: smooth; }
#termin-buchen { scroll-margin-top: 6rem; }
.whatsapp-cta {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}
.whatsapp-cta:hover {
  background: #1DA851;
  border-color: #1DA851;
  color: #FFFFFF;
}

/* --- Sekundaere Navigation (Permanentschmuck als Nebenleistung) ------------ */
.nav-secondary {
  color: rgba(59, 48, 50, 0.62);
  font-weight: 400;
  font-size: 0.82rem;
}
.nav-secondary:hover { color: #1F191A; }
.mobile-nav-link.nav-secondary-mobile {
  color: rgba(59, 48, 50, 0.65);
  font-weight: 400;
  font-size: 0.9rem;
  border-top: 1px solid rgba(217, 193, 154, 0.9);
  margin-top: 0.35rem;
  border-radius: 0 0 1rem 1rem;
}

/* --- Tastaturbedienbarkeit ------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3B3032;
  outline-offset: 3px;
}

/* --- Sekundaerer Teaser (Permanentschmuck) --------------------------------- */
.secondary-teaser {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(217, 193, 154, 0.9);
}

/* Kein horizontales Scrollen: nur am body, damit position:sticky und der
   fixierte Hintergrund weiter funktionieren. */
body { overflow-x: clip; }

/* --- Touch-Flaechen auf Mobile ---------------------------------------------
   Reine Textlinks in Karten und im Footer bekommen genug vertikale Flaeche. */
@media (max-width: 767px) {
  footer a.block,
  footer button,
  .card-link {
    display: block;
    padding-block: 0.6rem;
  }
  .price-table tbody th,
  .price-table tbody td { padding-block: 1rem; }
}

/* --- Lange deutsche Woerter in Ueberschriften -------------------------------
   "Wimpernverlängerung" soll auf schmalen Screens nicht mitten im Wort
   umbrechen. Deshalb Silbentrennung statt harter Bruch und etwas kleinere
   Schrift auf sehr schmalen Geraeten. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }

@media (max-width: 480px) {
  h1 { font-size: clamp(1.5rem, 6.6vw, 2.25rem) !important; line-height: 1.22 !important; }
  h1 .h1-sub { font-size: 0.8em; }
  h2 { font-size: clamp(1.3rem, 5.6vw, 1.75rem) !important; line-height: 1.28 !important; }
}

/* --- <picture>-Wrapper -------------------------------------------------------
   <picture> ist standardmaessig inline. Damit die darin liegenden Bilder ihre
   Container weiterhin exakt fuellen (Galerie, Karten, Studio-Slider), wird der
   Wrapper als Block gesetzt und erbt Breite und Hoehe des Containers. */
picture { display: block; }
.gallery-card picture,
.process-image-frame picture { width: 100%; height: 100%; }

/* Container mit fester Seitenverhaeltnis-/Hoehenvorgabe: das Bild soll den
   Rahmen exakt fuellen (object-fit: cover uebernimmt den Beschnitt). */
[class*="aspect-"] > picture,
.media-fill > picture { height: 100%; }
[class*="aspect-"] > picture > img,
.media-fill > picture > img { height: 100%; width: 100%; object-fit: cover; }

/* ===========================================================================
   V2.1 – neue Bausteine
   ========================================================================= */

/* --- USP-Badge im Hero ----------------------------------------------------- */
.usp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(217, 193, 154, 0.95);
  box-shadow: 0 8px 22px rgba(59, 48, 50, 0.08);
  color: #1F191A;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
}
.usp-badge span[aria-hidden] { font-size: 1.05em; line-height: 1; }
@media (max-width: 480px) {
  .usp-badge { font-size: 0.84rem; padding: 0.5rem 0.9rem; }
}

/* --- Jeanny-Portrait im kompakten Trust-Block ------------------------------ */
.jeanny-portrait {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 999px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 26px rgba(59, 48, 50, 0.13);
  flex-shrink: 0;
}
.jeanny-portrait picture { width: 100%; height: 100%; }
.jeanny-portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .jeanny-portrait { width: 10.5rem; height: 10.5rem; }
}

/* --- Intensitaets-Punkte auf den Look-Karten ------------------------------- */
.intensity-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.65rem;
}
.intensity-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #3B3032;
  display: inline-block;
}
.intensity-dot.is-off { background: rgba(59, 48, 50, 0.22); }
.intensity-label {
  margin-left: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(59, 48, 50, 0.7);
}

/* --- Intensitaetsskala auf der Lash-Arten-Seite ---------------------------- */
.intensity-scale {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.intensity-scale li {
  position: relative;
  padding: 1rem 0.75rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(217, 193, 154, 0.9);
  text-align: center;
  font-size: 0.95rem;
  color: #1F191A;
}
.intensity-scale li strong { display: block; font-weight: 600; }
.intensity-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.45rem;
  border-radius: 999px;
  background: #3B3032;
  color: #FBF7F2;
  font-size: 0.82rem;
  font-weight: 600;
}
.intensity-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(59, 48, 50, 0.75);
}
/* Wachsende Faellung visualisiert die Intensitaet */
.intensity-scale li:nth-child(1) { background: rgba(255, 255, 255, 0.72); }
.intensity-scale li:nth-child(2) { background: rgba(217, 193, 154, 0.34); }
.intensity-scale li:nth-child(3) { background: rgba(217, 193, 154, 0.58); }
.intensity-scale li:nth-child(4) { background: rgba(217, 193, 154, 0.82); }
@media (max-width: 640px) {
  .intensity-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intensity-scale li { font-size: 0.9rem; padding: 0.85rem 0.55rem; }
}

/* --- Fakten-Liste (Preis je Look) ----------------------------------------- */
.look-facts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(217, 193, 154, 0.9);
  font-size: 0.92rem;
}
.look-facts dt { color: rgba(59, 48, 50, 0.8); font-weight: 400; }
.look-facts dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: #1F191A;
  white-space: nowrap;
}
@media (max-width: 400px) {
  .look-facts { font-size: 0.86rem; gap: 0.35rem 0.6rem; }
}

/* --- Kompakte Preistabelle (Startseite) ------------------------------------
   Gleiche Semantik wie die vollstaendige Tabelle auf preise.html, nur
   platzsparender dargestellt. */
.price-table-compact th,
.price-table-compact td { padding: 0.65rem 0.25rem; }
.price-table-compact .price-meta { font-size: 0.74rem; margin-top: 0.1rem; }
.price-table-compact tbody th { font-weight: 500; }
@media (max-width: 767px) {
  .price-table-compact th,
  .price-table-compact td { padding-block: 0.8rem; }
}