/* =========================================================================
   03-components.css — wiederverwendbare UI-Komponenten
   ========================================================================= */

/* ----- Buttons ----- */

.btn,
a.btn {
  --btn-bg:    var(--c-accent);
  --btn-fg:    var(--c-white);
  --btn-bg-h:  var(--c-accent-dark);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);

  font-family: var(--font-sans);
  font-size: var(--t-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;

  padding: 14px 28px;
  border: 1px solid var(--btn-bg);
  border-radius: 10px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  background: var(--btn-bg-h);
  border-color: var(--btn-bg-h);
  color: var(--btn-fg);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(34, 39, 37, 0.20);
}

.btn--outline {
  --btn-bg:    transparent;
  --btn-fg:    var(--c-dark);
  --btn-bg-h:  transparent;
  border-color: var(--c-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  --btn-fg: var(--c-accent);
  border-color: var(--c-accent);
}

.btn--ghost {
  --btn-bg:   transparent;
  --btn-fg:   var(--c-accent);
  --btn-bg-h: transparent;
  border-color: transparent;
  padding-inline: 0;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  --btn-fg: var(--c-accent-dark);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Button-Variante für Akzent-Hintergrund (Versprechen-Block).
   Ruhe-Zustand dunkel (#222725) für klaren Kontrast auf dem Kupfer-Band —
   muss ohne Hover deutlich sichtbar sein (Kundenfeedback 2026-06). */
.btn--on-accent {
  --btn-bg:    var(--c-dark);
  --btn-fg:    var(--c-white);
  --btn-bg-h:  var(--c-dark-soft);
  border-color: var(--c-dark);
}

/* Hover: Schrift bleibt #fff (Kundenwunsch 07/2026), Grund hellt leicht auf. */
.btn--on-accent:hover,
.btn--on-accent:focus-visible {
  --btn-fg: #fff;
  background: var(--c-dark-soft);
  border-color: var(--c-dark-soft);
}

/* Button auf dunklem/mutedem Grund (global — auch außerhalb der Startseite). */
.btn--on-dark {
  --btn-bg:   var(--c-accent);
  --btn-fg:   var(--c-white);
  --btn-bg-h: var(--c-accent-dark);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  --btn-fg: var(--c-accent-dark);
  background: var(--c-white);
  border-color: var(--c-white);
}

/* ----- Eyebrow-Caps (gibt's auch als .eyebrow Util in base) ----- */
/* siehe 02-base.css */

/* ----- Quick-Info-Sidebar (Behandlungs-Detailseite) ----- */

.mat-quickinfo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);

  padding: var(--space-4);
  background: var(--c-cream);
  border-radius: var(--radius-sm);
}

.mat-quickinfo__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-2);
  align-items: start;

  padding-block: var(--space-2);
  border-bottom: 1px solid var(--c-line);
}

.mat-quickinfo__item:last-child {
  border-bottom: 0;
}

.mat-quickinfo__icon {
  width: 28px;
  height: 28px;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mat-quickinfo__icon svg,
.mat-quickinfo__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.mat-quickinfo__label {
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 2px;
}

.mat-quickinfo__value {
  font-size: var(--t-meta);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  line-height: 1.4;
}

/* Sticky-Verhalten der Sidebar im Detail-Layout */
@media (min-width: 992px) {
  .mat-quickinfo--sticky {
    position: sticky;
    top: calc(var(--space-12) + var(--space-2));
  }
}

/* ----- Behandlungs-Card (für Spektrum-Grid und Startseiten-Teaser) ----- */

.mat-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}

.mat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mat-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-cream);
}

.mat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.mat-card:hover .mat-card__media img {
  transform: scale(1.04);
}

.mat-card__body {
  padding: var(--space-3);
}

.mat-card__title {
  font-size: var(--t-h3);
  font-weight: var(--fw-medium);
  color: var(--c-dark);
  margin: var(--space-1) 0 0;
}

/* ----- M-Wasserzeichen (Signatur oben rechts) ----- */

.mat-watermark {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 64px;
  height: auto;
  color: var(--c-accent);
  pointer-events: none;
  z-index: var(--z-base);
}

@media (min-width: 768px) {
  .mat-watermark {
    width: 96px;
  }
}

/* ----- Gravity-Forms-Polish (für Kontaktformular) ----- */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea,
.gform_wrapper select {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  padding: 12px 16px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xs);
  color: var(--c-dark);
  transition: border-color var(--dur-base) var(--ease);
}

.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  border-color: var(--c-accent);
  outline: none;
}

.gform_wrapper .gform_button {
  /* Erbt .btn-Look, falls Klasse zusätzlich gesetzt wird */
  font-family: var(--font-sans);
  font-size: var(--t-meta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--c-accent);
  color: var(--c-white);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus-visible {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
}

/* =========================================================================
   Feature-Card (Reusable Card mit Bild + vertikalem Label).
   Verwendet von: Startseite, Spektrum, Related-Bereich auf Leistung.
   ========================================================================= */

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

@media (min-width: 640px) {
  .mat-feat__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  .mat-feat__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.mat-feat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  background: var(--c-cream);
}

/* Keine Hover-Effekte — Cards sind komplett statisch (kein Zoom, kein
   Text-Wackeln). Bewusste Entscheidung des Kunden. */

.mat-feat-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.mat-feat-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Brustbild näher heranzoomen (Kundenfeedback 2026-06). Der Container muss
   dabei clippen — sonst ragt das skalierte Bild seitlich heraus und erzeugt
   horizontalen Seiten-Overflow (mobil sichtbar: Elemente mit 100vw füllten
   dadurch nicht mehr die volle Breite). */
.mat-feat-card__media { overflow: hidden; }

.mat-feat-card__media img[src*="card-brust"] {
  object-position: center 32%;
  transform: scale(1.18);
}

.mat-feat-card__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--c-accent-light), var(--c-accent));
}

/* Vertikales Label am linken Bildrand (rotiert).
   Figma-Spec: Poppins Bold 48px, weiß, letter-spacing 0, line-height 0.9 */
.mat-feat-card__label {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-3);
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--c-white);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-orientation: mixed;
  z-index: 2;
  /* Mehrwortige Labels (z. B. „MOMMY MAKEOVER") brechen jetzt in zwei
     vertikale Spalten um, statt zu verkleinern — gleiche Größe wie die
     übrigen Cards (Kundenfeedback 2026-06). */
  white-space: normal;
  max-height: calc(100% - 2 * var(--space-4));
}

/* „sm" bleibt jetzt auf voller Größe (umbrechen statt schrumpfen), damit
   z. B. „MOMMY MAKEOVER" genauso groß wirkt wie BRUST/GESICHT/KÖRPER. */
.mat-feat-card__label--sm {
  font-size: clamp(28px, 3.5vw, 48px);
}

.mat-feat-card__label--xs {
  font-size: clamp(14px, 1.6vw, 22px);
}

.mat-feat-card__label--xxs {
  font-size: clamp(12px, 1.3vw, 17px);
  letter-spacing: 0.01em;
}

/* =========================================================================
   Wide-Container (für Sektionen, die fast bis zum Rand reichen sollen)
   ========================================================================= */
.mat-container--wide {
  max-width: 1600px;
  padding-inline: 0;
}

@media (max-width: 767px) {
  .mat-container--wide {
    padding-inline: var(--container-pad-mobile);
  }
}

/* =========================================================================
   Ordinations-Cards (Reusable — Startseite, Kontakt)
   ========================================================================= */

.mat-ords__head {
  margin-bottom: var(--space-6);
  text-align: center;
}

.mat-ords__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  align-items: stretch;
  text-align: left;
  position: relative;
}

@media (min-width: 768px) {
  .mat-ords__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }
}

.mat-ords__divider {
  display: none;
}

@media (min-width: 768px) {
  .mat-ords__divider {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(120px, 12vw, 180px);
    height: auto;
    z-index: 5;
    pointer-events: none;
    /* SVG-Pattern ist dunkel — auf reines Weiß zwingen. */
    filter: brightness(0) invert(1);
    opacity: 0.92;
  }
}

.mat-ord-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--c-white);
  aspect-ratio: 16 / 10;
  /* Fallback-Fläche: Titel und Adresse sind weiß. Solange das lazy geladene
     Foto noch fehlt, wären sie sonst unsichtbar (Kundenfeedback 2026-08-04,
     mobil erschien der Ordinations-Block leer). */
  background-color: var(--c-muted);
}

.mat-ord-card__media { position: absolute; inset: 0; }

.mat-ord-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Abdunkler unten, damit Titel + Adresse (weiß) lesbar bleiben */
.mat-ord-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34, 39, 37, 0) 45%, rgba(34, 39, 37, 0.78) 100%);
  pointer-events: none;
}

.mat-ord-card__placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(34,39,37,0) 50%, rgba(34,39,37,0.75) 100%),
    linear-gradient(135deg, #6c5e57, #2f2826);
}

.mat-ord-card__body {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.mat-ord-card__title {
  font-size: var(--t-body);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
}

.mat-ord-card__addr {
  font-size: var(--t-meta);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

/* Globale Header-Overrides für ord-card-titel (gegen body.l-body h3) */
.l-body .mat-ord-card .mat-ord-card__title,
.l-body .mat-ord-card h3 {
  color: var(--c-white);
}

/* =========================================================================
   TREAT-CARDS (Spektrum-Seiten + "Weitere Behandlungen" auf Detailseiten)
   Hierher verschoben aus 07-template-spektrum.css (2026-07-15), damit die
   Cards auch ohne Spektrum-CSS zur Verfügung stehen.
   ========================================================================= */

.mat-treat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  padding: var(--space-6);
  min-height: 330px;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.mat-treat-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-accent-light);
}

/* Ganze Karte klickbar (Stretched-Link über den Titel-Link). */
.mat-treat-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.mat-treat-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-6);
}

.mat-treat-card__tag {
  background: #d8cdc0;
  border: 0;
  color: var(--c-muted); /* #91837E */
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 7px 17px;
  border-radius: 999px;
}

.mat-treat-card__title {
  /* Figma: Poppins Bold 48 / Zeilenhöhe 57 (≈1.19) / 0% / #91837E.
     Responsiv heruntergerechnet, damit es in der Karte nicht überläuft. */
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.19;
  margin: 0 0 var(--space-4);
  /* Lange Komposita umbrechen, nichts über den Rand. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.mat-treat-card__title a { color: var(--c-muted); text-decoration: none; }
.mat-treat-card__title a:hover { color: var(--c-accent); }

.mat-treat-card__desc {
  font-size: var(--t-meta);
  color: var(--c-muted);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Kuratierte Karten (Flyer-Gruppen) — Figma-Layout:
   Label-Pill oben, Freiraum, Titel (Versal, muted) + Kurztext unten. */
.mat-treat-card--curated {
  min-height: 300px;
  padding: var(--space-4);
}

/* Label-Pill oben links. */
.mat-treat-card__label {
  align-self: flex-start;
  background: var(--c-muted);
  color: var(--c-white);
  font-size: var(--t-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-xs);
}

/* Titelblock mit festem Abstand unter dem Label — so starten alle Titel im
   Grid auf gleicher Höhe (unabhängig von der Textlänge darunter). */
.mat-treat-card__body {
  margin-top: var(--space-8);
}

.mat-treat-card--curated .mat-treat-card__title {
  font-size: clamp(20px, 1.7vw, 26px);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-muted);
  margin: 0 0 var(--space-2);
  /* Zwei Zeilen reservieren, damit ein- und zweizeilige Titel gleich hoch sind
     und der Kurztext darunter ebenfalls auf gleicher Höhe beginnt. */
  min-height: 2.4em;
  /* Nie mitten im Wort trennen — lieber das ganze Wort in die nächste Zeile. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.mat-treat-card--curated .mat-treat-card__title a { color: var(--c-muted); }
.mat-treat-card--curated .mat-treat-card__title a:hover { color: var(--c-accent); }

/* Bild-Card (Figma): Foto füllt die Karte, Label oben links.
   Standard = eine Zelle; --feature-tall spannt über zwei Reihen (z. B. Brust). */
.mat-treat-card--feature {
  position: relative;
  padding: var(--space-4);
  border: 0;
  overflow: hidden;
  min-height: 260px;
}

.mat-treat-card--feature-tall {
  grid-row: span 2;
  min-height: 0;
}

.mat-treat-card--feature .mat-treat-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.mat-treat-card--feature .mat-treat-card__label {
  position: relative;
  z-index: 2;
}

.mat-treat-card__cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Bei nur einer Grid-Spalte (schmal/mobil) keine Reihen-Spannung erzwingen. */
@media (max-width: 700px) {
  .mat-treat-card--feature {
    grid-row: auto;
    min-height: 260px;
  }
}

/* Sicherheitsnetz für die Ordinations-Karten: greift aspect-ratio nicht
   (sehr alte iOS-Safari-Versionen), hätte die Karte keine Höhe und der
   Block bliebe leer. min-height hält sie in jedem Fall sichtbar. */
.mat-ord-card { min-height: 200px; }

@media (min-width: 768px) {
  .mat-ord-card { min-height: 260px; }
}


/* Buchungs-Buttons in den migrierten WPBakery-Seiten (Terminvereinbarung
   Wien/Schladming). Diese Seiten laden das Kontakt-CSS nicht, und Impreza
   färbt Links im Content ein — der weiße Button-Text wurde dadurch
   unsichtbar (Kundenfeedback 2026-08-04). */
.cus_appoint_cls a.btn,
.cus_appoint_cls a.btn:link,
.cus_appoint_cls a.btn:visited,
.cus_appoint_cls a.btn:hover,
.cus_appoint_cls a.btn:focus-visible,
.cus_appoint_cls a.btn:active {
  color: #fff !important;
}