/* ==========================================================================
   Feinschliff Bedienelemente (2026-09-23)
   Eigene Datei, damit yolenn-main.min.css unangetastet bleibt.
   Eingebunden von header.php nach nav-fix.css.

   1) Buttons: Beim Hover zieht die Farbe von links herein und beim
      Verlassen nach rechts wieder hinaus - statt hart umzuspringen.
   2) Pfeile: feine Linie statt des fetten Font-Awesome-Pfeils,
      ueberall wo fa-arrow-right vorkommt (ohne Bewegung).
   4) Kacheln: Hover nur noch ueber den Schatten, ohne Vergroesserung.
   3) Buttons auf dunklem/sandfarbenem Grund mit eigenem Kontrast.
   ========================================================================== */

/* --- 1) Hover-Fuellung ------------------------------------------------- */
/*
 * Die Fuellung ist ein Hintergrund-Verlauf, dessen Breite animiert wird:
 * kein Pseudo-Element, keine eigene Ebene, kein overflow/transform.
 * (Die erste Fassung mit ::before + scaleX hat in Kacheln, die sich
 * beim Hover selbst skalierten, sichtbar gezittert.)
 *
 * Ruhezustand: Breite 0, rechts verankert -> beim Verlassen schrumpft
 * die Fuellung nach rechts hinaus. Hover: links verankert, volle Breite
 * -> sie waechst von links herein. Bei voller Breite sind links und
 * rechts identisch, deshalb springt beim Wechsel nichts.
 */
.button,
.hero2__cta {
  --fill: rgba(73, 63, 53, 0.1);   /* Standard: leichte Abdunklung */
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-origin: border-box;   /* auch unter den 1px-Rand */
  background-position: right center;
  background-size: 0% 100%;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.35s ease, border-color 0.35s ease;
}

.button:hover,
.button:focus-visible,
.hero2__cta:hover,
.hero2__cta:focus-visible {
  background-position: left center;
  background-size: 100% 100%;
}

/* Uebergang in BEIDEN Zustaenden: Foundation setzt fuer .button:hover
   "transition: 0s" - die Fuellung kam beim Hineinfahren deshalb schlagartig
   und fuhr nur beim Verlassen animiert hinaus. (CSS nimmt beim Wechsel
   den Uebergang des Zielzustands.) Der Hero-Button braucht die hoehere
   Spezifitaet, weil home-hero.css nach dieser Datei geladen wird. */
.button,
.button:hover,
.button:focus,
.button:focus-visible,
.hero2 .hero2__cta,
.hero2 .hero2__cta:hover,
.hero2 .hero2__cta:focus-visible {
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.35s ease, border-color 0.35s ease;
}

/* Die bisherigen harten Hover-Farben abschalten: Grundfarbe bleibt,
   die Fuellung uebernimmt den Wechsel */
.button.primary:hover,
.button.primary:focus,
.product-list-item-button.primary:hover,
.product-list-item-button.primary:focus {
  background-color: #f2ebdc;
  color: #2a2622;
}

/* Button im Footer („Termin vereinbaren“, Klasse inverted – nur dort
   benutzt): dieselben Farben wie der Haupt-Button im Hero, beim Hover
   hellt die Füllung auf (vorher Weiß mit grauer Füllung) */
.button.inverted,
.button.primary.inverted,
.button.inverted:hover,
.button.inverted:focus,
.button.primary.inverted:hover,
.button.primary.inverted:focus {
  --fill: rgba(254, 254, 254, 0.14);
  background-color: #76604a;
  color: #fdfaf4;
}

/* Haupt-Button im Hero: warmes, mittleres Braun statt fast Schwarz
   (Kontrast zur hellen Schrift 5.7:1) */
.hero2 .hero2__cta,
.hero2 .hero2__cta:hover,
.hero2 .hero2__cta:focus-visible {
  background-color: #76604a;
  color: var(--hero2-page);
  transform: none;
}

/* „Buchen“ in der Hauptnavigation (vorletzter Menüpunkt): derselbe
   Goldbraun-Ton wie der Haupt-Button im Hero (vorher Grau #817b71) */
.desktop-menu .desktop-menu-right .menu li.topbar-item:nth-last-child(2) a {
  --fill: rgba(254, 254, 254, 0.14);   /* wie der Hero-Button: hellt beim Hover auf */
  background-color: #76604a;
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 0% 100%;
  color: #fdfaf4;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.35s ease;
}

.desktop-menu .desktop-menu-right .menu li.topbar-item:nth-last-child(2) a:hover,
.desktop-menu .desktop-menu-right .menu li.topbar-item:nth-last-child(2) a:focus {
  background-color: #76604a;
  background-position: left center;
  background-size: 100% 100%;
  color: #fdfaf4;
}

/* Stern in der Tour-Leiste unter dem Hero: gleiches Braungold wie im Menue */
.hero2 .hero2__tour-star {
  color: #94754a;
}

/* "Alle zeigen" in den Bereichsbloecken der Startseite: eigene, harte
   Hover-Farbe aus yolenn-main.min.css neutralisieren */
.homeblock-grid .homeblock-content-cell .homeblock-content-button:hover,
.homeblock-grid .homeblock-content-cell .homeblock-content-button:focus,
.homeblock-grid .homeblock-content-cell .homeblock-content-button:active {
  background-color: #f2ebdc;
  color: #2a2622;
}

.hero2__cta {
  --fill: rgba(254, 254, 254, 0.14);
}

/* --- 2) Feiner Pfeil ---------------------------------------------------- */

.fa.fa-arrow-right::before {
  content: "";
  display: inline-block;
  width: 1.15em;
  height: 0.7em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 14'%3E%3Cpath d='M1 7h20M15 1.5L21 7l-6 5.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 14'%3E%3Cpath d='M1 7h20M15 1.5L21 7l-6 5.5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Pfeil in der Schrift des Buttons setzen (nicht in den Metriken der
   Icon-Schrift), dann sitzt "middle" auf halber x-Hoehe - optisch mittig. */
.fa.fa-arrow-right {
  margin-left: 0.2em;
  font-family: inherit;
  line-height: 1;                  /* Buttonhoehe unveraendert lassen */
}

.fa.fa-arrow-right::before {
  vertical-align: middle;
  margin-top: -0.1em;
}

/* --- 3) Buttons auf farbigem Grund ------------------------------------- */

/* Anfahrt-Kasten ist sandfarben wie der Standard-Button: dort dunkel */
.tour-directions-block .button.primary.tour-route-button {
  background-color: #493f35;
  color: #fefefe;
  --fill: rgba(254, 254, 254, 0.14);
}

.tour-directions-block .button.primary.tour-route-button:hover,
.tour-directions-block .button.primary.tour-route-button:focus {
  background-color: #493f35;
  color: #fefefe;
}

/* Erinnerungsformular: gleiche dunkle Fuellung wie oben */
.tour-reminder-form button.button.primary,
.tour-reminder-form button.button.primary:hover,
.tour-reminder-form button.button.primary:focus {
  background-color: #493f35;
  color: #fefefe;
}

.tour-reminder-form button.button.primary {
  --fill: rgba(254, 254, 254, 0.14);
}

/* --- 4) Kacheln: ruhiger Hover --------------------------------------- */
/* Vorher scale(1.02): alles in der Kachel wurde in Pixelbruchteilen neu
   gezeichnet und flimmerte, zusammen mit der Button-Fuellung sichtbar. */
.product-list .product-item,
.product-type-list .product-item,
.product-list .product-item:hover,
.product-type-list .product-item:hover {
  transform: none;
}

.product-list .product-item,
.product-type-list .product-item {
  transition: box-shadow 0.3s ease;
}

.product-list .product-item:hover,
.product-type-list .product-item:hover {
  box-shadow: 0 6px 26px rgba(42, 38, 34, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .hero2__cta,
  .product-item {
    transition: none;
  }
}

/* --- 5) Footer: Raum zum Atmen ----------------------------------------- */
/*
 * Mehr Luft ueber "Vereinbare ein Gespraech". Auf hohen Bildschirmen
 * fuellt der Footer mindestens die Fensterhoehe: der Inhalt steht
 * vertikal mittig, Logo und Rechtslinks (AGB, Datenschutz, Impressum)
 * sitzen unten. Ist der Inhalt hoeher als das Fenster, waechst der
 * Footer einfach mit.
 */
footer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5rem, 3rem + 6vw, 9rem) 0 1rem;
}

footer > .grid-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Inhalt mittig im verbleibenden Raum */
footer > .grid-container > .grid-x:first-child {
  margin-top: auto;
  margin-bottom: auto;
}

/* Logo und Rechtslinks unten, mit Abstand zum Inhalt */
footer > .grid-container > .grid-x:last-child {
  padding-top: clamp(4rem, 2rem + 5vw, 7rem);
}

footer ul.footer-links {
  padding-top: 1.5rem;
}

/* --- 6) Preisliste auf Angebotsseiten ---------------------------------- */
/*
 * Aus dem Repeater "Preise & Varianten", als Tabelle: So teilen sich
 * alle Zellen einer Zeile die Grundlinie, und die Linien laufen genau
 * so breit wie der Inhalt. Betraege in der Ueberschriften-Schrift mit
 * gleich hohen, gleich breiten Ziffern.
 */
table.price-list {
  width: auto;
  min-width: min(100%, 24rem);   /* einheitliche Breite, auch bei nur einer Zeile */
  margin: 1.75rem 0 2rem;
  border-collapse: collapse;
  border: 0;
  background: transparent;
}

/* Zebra-Streifen und Rahmen von Foundation neutralisieren */
table.price-list tbody,
table.price-list tbody tr,
table.price-list tbody tr:nth-child(even) {
  background: transparent;
}

table.price-list tbody {
  border: 0;
}

table.price-list tr.price-row {
  border-top: 1px solid rgba(145, 139, 134, 0.3);
}

table.price-list th,
table.price-list td {
  padding: 0.75rem 2.5rem 0.75rem 0;
  vertical-align: baseline;
  text-align: left;
  font-weight: inherit;
  background: transparent;
}

table.price-list td:last-child {
  padding-right: 0;
}

table.price-list .price-label {
  font-weight: 600;
  color: #2a2622;
}

table.price-list .price-duration {
  font-weight: 600;
  color: #493f35;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}

table.price-list .price-amount {
  text-align: right;
  font-family: var(--f-display, "Butler", Georgia, serif);
  font-weight: var(--w-display-s, 500);
  font-size: 1.3em;
  line-height: 1.2;
  color: #2a2622;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

table.price-list .price-amount.is-on-request {
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  font-style: italic;
  color: #6b6159;
}

/* Hinweis direkt unter seiner Zeile, ohne Trennlinie dazwischen.
   Der innere Block traegt nichts zur Tabellenbreite bei und bricht
   innerhalb der vorhandenen Breite um. */
table.price-list tr.price-note-row td .price-note {
  display: block;
  width: 0;
  min-width: 100%;
}

table.price-list tr.price-note-row td {
  padding-top: 0;
  font-size: 0.88em;
  color: #6b6159;
}

table.price-list tr.price-row.has-note th,
table.price-list tr.price-row.has-note td {
  padding-bottom: 0.3rem;
}

@media (max-width: 639.98px) {
  table.price-list th,
  table.price-list td {
    padding-right: 1.25rem;
  }
  table.price-list .price-amount {
    font-size: 1.2em;
  }

  /* Mit Bezeichnungen (z. B. "Angebote vor Ort"): die Leistung steht auf
     eigener Zeile ueber voller Breite, Dauer und Preis darunter. */
  table.price-list.has-labels,
  table.price-list.has-labels tbody {
    display: block;
    width: 100%;
  }
  table.price-list.has-labels tr.price-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 1rem;
    padding: 0.8rem 0;
  }
  table.price-list.has-labels tr.price-row.has-note {
    padding-bottom: 0.3rem;
  }
  table.price-list.has-labels tr.price-row > th,
  table.price-list.has-labels tr.price-row > td {
    padding: 0;
  }
  table.price-list.has-labels .price-label {
    grid-column: 1 / -1;
    margin-bottom: 0.2rem;
  }
  table.price-list.has-labels tr.price-note-row,
  table.price-list.has-labels tr.price-note-row td {
    display: block;
    padding: 0;
  }
  table.price-list.has-labels tr.price-note-row td {
    padding-bottom: 0.8rem;
  }
}

/* --- 7) Zitate: Raum und Mitte ------------------------------------------ */
/* Vorher ueber die volle Contentbreite und mit 8px Abstand eingequetscht.
   Jetzt: viel Luft, der Block steht mittig, der Text bleibt linksbuendig. */
.testimonial-block {
  padding-top: clamp(3.5rem, 2rem + 5vw, 7.5rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 7.5rem);
}

.testimonial-block .testimonial-slide .testimonial-content {
  max-width: 46rem;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-block .testimonial-slide .testimonial-content .testimonial-text {
  max-width: none;
}

/* --- 8) Bild-Header der Bereichsseiten (Yolenn on Tour, Massagen ...) -- */
/* Etwas hoeher als bisher (~550px bei 900px Fensterhoehe); der Zugewinn
   verteilt sich ueber und unter dem Text. */
.product-type-hero-section .product-type-hero .product-type-hero-content {
  min-height: clamp(560px, 68vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}