/* ==========================================================================
   Typografie-Vorschau (Test 2026-09-23)

   Wird von header.php nur geladen, wenn in dieser Sitzung ?typo=a|b|c
   aufgerufen wurde. Ohne das bleibt die Seite unveraendert.

   A  Butler Regular/Medium (statt Bold) + Montserrat Regular
   B  Cormorant Garamond Semibold        + Montserrat Regular

   Runde 2 (2026-09-23 abends): Fliesstext in beiden Montserrat (Jost
   und Variante C verworfen), Ueberschriften eine Spur kraeftiger,
   H1 der Angebots-/Tour-Seiten groesser und mit mehr Luft darueber.

   Alle drei teilen dasselbe Satzsystem: fliessende Groessen, engerer
   Zeilenabstand in Ueberschriften, mehr Luft ueber und unter Ueberschriften,
   Textzeilen um 70 Zeichen, warmes Dunkelbraun statt fast Schwarz.
   Schriften: SIL Open Font License, selbst gehostet unter fonts/preview/.
   ========================================================================== */

/* --- Schriften (werden erst geladen, wenn eine Regel sie nutzt) --------- */

@font-face {
  font-family: "Butler";
  src: url("../fonts/Butler.woff2") format("woff2"), url("../fonts/Butler.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/preview/cormorant-garamond-wght.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/preview/cormorant-garamond-wght-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* --- Varianten: nur Schriften, Schnitte und Groessen ------------------- */
/* Groessen fliessend zwischen ~390px und ~1280px Viewport. */

html[data-typo] {
  /* beiden Varianten gemeinsam: Fliesstext Montserrat Regular */
  --f-text: "Montserrat", "Helvetica", "Arial", sans-serif;
  --w-text: 400;
  --w-strong: 600;
  --s-body: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --s-lead: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --lh-body: 1.75;
}

html[data-typo="a"] {
  --hero-fit: 8.85;     /* Breite von "gelebter Übergänge" in em, plus Luft */
  --f-display: "Butler", Georgia, serif;
  --f-quote: "Montserrat", "Helvetica", "Arial", sans-serif;
  --w-display-l: 400;   /* H1, H2, Hero: Regular statt Light */
  --w-display-s: 500;   /* H3 bis H6 */
  --w-quote: 400;
  --lh-display: 1.1;
  --track-display: -0.012em;
  --s-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem);
  --s-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --s-h2: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  --s-h3: clamp(1.5rem, 1.25rem + 1vw, 2.05rem);
  --s-h4: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --s-h5: 1.25rem;
  --s-h6: 1.1rem;
  --s-quote: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --lh-quote: 1.7;
}

html[data-typo="b"] {
  --hero-fit: 8.05;
  --f-display: "Cormorant Garamond", "Garamond", Georgia, serif;
  --f-quote: "Cormorant Garamond", "Garamond", Georgia, serif;
  --w-display-l: 600;   /* Semibold: eine Spur solider als Medium */
  --w-display-s: 600;
  --w-quote: 500;
  --lh-display: 1.1;    /* 1.06 war zu eng: Ue-Punkte stiessen an Unterlaengen */
  --track-display: -0.005em;
  /* Cormorant hat eine kleine x-Hoehe und braucht mehr Groesse */
  --s-hero: clamp(2.8rem, 1.8rem + 4vw, 4.4rem);
  --s-h1: clamp(2.8rem, 1.8rem + 4vw, 4.5rem);
  --s-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.15rem);
  --s-h3: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
  --s-h4: clamp(1.45rem, 1.25rem + 0.8vw, 1.8rem);
  --s-h5: 1.4rem;
  --s-h6: 1.2rem;
  --s-quote: clamp(1.45rem, 1.25rem + 0.8vw, 1.9rem);
  --lh-quote: 1.4;
}

/* --- Gemeinsames Satzsystem -------------------------------------------- */

html[data-typo] {
  --ink: #2f2a25;        /* Fliesstext: warmes Dunkelbraun statt #0a0a0a */
  --ink-head: #3a3129;   /* Ueberschriften: etwas dunkler als bisher #493f35 */
  --ink-soft: #6b6159;
  --measure: 42em;       /* ca. 78 Zeichen pro Zeile (Runde 5: vorher 38em) */
}

/* Allgemeine Regeln mit :where() - so niedrig gewichtet wie die
   Originale, damit Bausteine mit eigener Klasse (Hero-Rubrik, Meta-Zeile,
   Kontaktkasten ...) ihre Einstellungen behalten. */

/* Fliesstext */
:where(html[data-typo]) body {
  font-family: var(--f-text);
  font-weight: var(--w-text);
  color: var(--ink);
}

:where(html[data-typo]) :is(p, li, a) {
  font-weight: var(--w-text);
}

:where(html[data-typo]) :is(strong, b) {
  font-weight: var(--w-strong);
}

:where(html[data-typo]) main p {
  font-size: var(--s-body);
  line-height: var(--lh-body);
  max-width: min(100%, var(--measure));
  text-wrap: pretty;       /* keine einzelnen Woerter in der letzten Zeile */
}

:where(html[data-typo]) main li {
  font-size: var(--s-body);
  line-height: 1.6;
}

html[data-typo] .lead {
  font-size: var(--s-lead);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Ueberschriften: eine Stimme, eng gesetzt, ausgeglichene Zeilen */
:where(html[data-typo]) :is(h1, h2, h3, h4, h5, h6),
html[data-typo] h1.product-headline,
html[data-typo] .product-type-hero-section .product-type-hero .product-type-hero-content .product-type-hero-headline,
html[data-typo] .about-hero-section .about-hero .about-hero-content .about-hero-headline {
  font-family: var(--f-display);
  font-weight: var(--w-display-s);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  color: var(--ink-head);
  text-wrap: balance;
}

:where(html[data-typo]) :is(h1, h2),
html[data-typo] h1.product-headline,
html[data-typo] .product-type-hero-section .product-type-hero .product-type-hero-content .product-type-hero-headline,
html[data-typo] .about-hero-section .about-hero .about-hero-content .about-hero-headline {
  font-weight: var(--w-display-l);
}

/* Weiss auf Bild bleibt weiss */
html[data-typo] .product-type-hero-section .product-type-hero .product-type-hero-content .product-type-hero-headline,
html[data-typo] .about-hero-section .about-hero .about-hero-content .about-hero-headline {
  color: #ffffff;
}

:where(html[data-typo]) h1,
html[data-typo] h1.product-headline { font-size: var(--s-h1); }
:where(html[data-typo]) h2,
html[data-typo] .product-h2 { font-size: var(--s-h2); }
:where(html[data-typo]) h3 { font-size: var(--s-h3); }
:where(html[data-typo]) h4 { font-size: var(--s-h4); }
:where(html[data-typo]) h5 { font-size: var(--s-h5); line-height: 1.2; }
:where(html[data-typo]) h6 { font-size: var(--s-h6); line-height: 1.25; }

/* Luft: unter der Ueberschrift relativ zu ihrer Groesse,
   darueber deutlich mehr, sobald vorher schon Inhalt steht */
:where(html[data-typo]) main :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 0.5em;
}

:where(html[data-typo]) main :is(p, ul, ol, blockquote, figure, img, table, address) + :is(h2, h3, h4, h5, h6) {
  margin-top: 1.5em;
}

/* ... aber nicht direkt nach einer kleinen Rubrikzeile */
html[data-typo] main :is(.tour-contact-label, .product-label, .product-type-hero-label, .hero2__eyebrow) + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
}

html[data-typo] main h1 + .lead,
html[data-typo] main h1.product-headline + p {
  margin-top: 0.25em;
}

/* Kopf der Angebots- und Tour-Seiten: die H1 bekommt Raum zum Atmen */
html[data-typo] .main-content-section.product-page {
  padding-top: clamp(2.5rem, 1rem + 5vw, 6rem);
}

html[data-typo] .main-content-section.product-page .product-label {
  margin-bottom: 1.1rem;
}

html[data-typo] h1.product-headline {
  margin-bottom: 0.45em;
  max-width: 16em;
}

/* Preis/Dauer: klar erkennbar, aber keine zweite Ueberschrift.
   Runde 2b: mehr Luft zur Einleitung und zum Button, etwas kraeftiger. */
html[data-typo] .lead-price {
  margin: 1.6rem 0 1.9rem;
  padding: 0;
  font-size: calc(var(--s-body) * 1.06);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

/* Telefonnummer im Footer: gleich hohe Ziffern (Cormorant setzt sonst
   Mediaevalziffern, die bei Nummern schwerer lesbar sind) */
html[data-typo] footer .footer-contact h5 {
  font-variant-numeric: lining-nums;
}

/* Kasten "keine Termine buchbar" auf Tour-Seiten: klar unter der H1 */
html[data-typo] .tour-status-headline {
  font-size: var(--s-h3);
}

/* Kleine Rubrik ueber Titeln: gesperrt, ruhig */
html[data-typo] :is(.product-label, .product-type-hero-label) {
  font-family: var(--f-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Abschnittsueberschrift "Weitere Angebote" mit mehr Abstand */
html[data-typo] .product-list-type-headline {
  padding-top: 1.5em;
  padding-bottom: 0.5em;
}

/* --- Startseiten-Hero (home-hero.css) ---------------------------------- */

html[data-typo] .hero2__headline {
  font-family: var(--f-display);
  font-weight: var(--w-display-l);
  /* nie breiter als die Spalte: "gelebter Uebergaenge" passt in eine Zeile */
  font-size: min(var(--s-hero), calc(100cqi / var(--hero-fit)));
  line-height: 1.14;
  letter-spacing: var(--track-display);
}

html[data-typo] :is(.hero2__tour-title, .hero2__card-title) {
  font-family: var(--f-display);
  font-weight: var(--w-display-s);
}

html[data-typo] .hero2__card-title { font-size: 1.35rem; }
html[data-typo] .hero2__tour-title { font-size: 1.4rem; }

html[data-typo] :is(.hero2__eyebrow, .hero2__subline, .hero2__cta, .hero2__link, .hero2__tour, .hero2__card-text) {
  font-family: var(--f-text);
}

html[data-typo] :is(.hero2__subline, .hero2__card-text) {
  font-weight: var(--w-text);
}

html[data-typo] .hero2__subline {
  font-size: var(--s-lead);
  line-height: 1.6;
}

/* --- Zitate: in der Display-Schrift, wo es eine Kursive gibt ------------ */

html[data-typo] .testimonial-block .testimonial-slide .testimonial-content .testimonial-text {
  font-family: var(--f-quote);
  font-weight: var(--w-quote);
  font-style: italic;
  font-size: var(--s-quote);
  line-height: var(--lh-quote);
  color: var(--ink-head);
  max-width: 34em;
  text-wrap: pretty;
}

html[data-typo] .testimonial-block .testimonial-slide .testimonial-content:before {
  font-family: var(--f-display);
}

/* --- Stellen, die bisher "Montserrat" oder "Butler" fest nennen --------- */

html[data-typo] :is(
  .product-list-item-headline,
  .product-type-hero-subline,
  .about-hero-subline,
  .about-page h6,
  .tour-meta-item,
  .tour-map-consent,
  .tour-item-meta,
  .tour-item-nodates-label,
  .tour-reminder-field > span,
  .tour-contact-label,
  .tour-contact-channels a
) {
  font-family: var(--f-text);
}

/* Hero-Unterzeilen und Kartenteile: Die Originale sind sehr spezifisch
   formuliert, daher hier mit gleicher Selektor-Kette. */
html[data-typo] .product-type-hero-section .product-type-hero .product-type-hero-content .product-type-hero-subline,
html[data-typo] .about-hero-section .about-hero .about-hero-content .about-hero-subline {
  font-family: var(--f-text);
  font-weight: var(--w-text);
}

html[data-typo] .product-type-hero-section .product-type-hero .product-type-hero-content .product-type-hero-label {
  font-family: var(--f-text);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}

html[data-typo] :is(.product-list, .product-type-list) .product-item.tour-item .tour-item-meta {
  font-family: var(--f-text);
}

html[data-typo] .tour-contact-name {
  font-family: var(--f-display);
  font-weight: var(--w-display-s);
  font-size: 1.5rem;
}

/* Kartentitel bleiben in der Textschrift (Bedienelement), etwas ruhiger */
html[data-typo] :is(.product-list, .product-type-list) .product-item .product-list-item-headline {
  font-family: var(--f-text);
  font-weight: 600;
  letter-spacing: 0;
}

/* --- Umschalter (nur sichtbar, solange die Vorschau aktiv ist) ---------- */

.typo-switch {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(42, 38, 34, 0.92);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  font-family: "Helvetica", "Arial", sans-serif;
  font-size: 12px;
  line-height: 1;
}

.typo-switch span {
  padding: 0 8px 0 10px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.typo-switch a {
  display: block;
  padding: 7px 11px;
  border-radius: 999px;
  color: #fefefe !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  font-size: 12px !important;
  text-decoration: none;
}

.typo-switch a:hover,
.typo-switch a:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.typo-switch a.is-active {
  background: #f2ebdc;
  color: #2a2622 !important;
}

@media print {
  .typo-switch { display: none; }
}

/* --- Navigation: Bedienelement, nicht Fliesstext ------------------------ */
/* Die allgemeine Regel oben setzt Links auf das Fliesstext-Gewicht 400 -
   im Menue wirkte das zu duenn (vorher 500). 550 ist eine Spur kraeftiger;
   Montserrat ist eine variable Schrift, Zwischenstufen sind moeglich.
   Hervorgehobener Punkt (Yolenn on Tour), aktuelle Seite und "Buchen"
   behalten ihre eigenen, staerkeren Gewichte. */
html[data-typo] .desktop-menu .desktop-menu-right .menu li > a,
html[data-typo] .submenu-wrapper ul.submenu li.submenu-item a,
html[data-typo] .mobile-menu .mobile-menu-linklist .menu li > a {
  font-weight: 550;
}

html[data-typo] .desktop-menu .desktop-menu-right .menu li.menu-item-highlight > a.top-menu-item,
html[data-typo] .mobile-menu .mobile-menu-linklist .menu li.menu-item-highlight > a {
  font-weight: 700;
}