/* ============================================================
   urlaubshuetten.com – Typografie 2026
   ------------------------------------------------------------
   Eine Schriftfamilie für die ganze Seite: Lora (variabel, 400–700)
   Ersetzt: Ubuntu (Text/UI), Galada (alte Headlines),
            Barlow Semi Condensed (Megamenü), Inter (nur Startseite)

   Einbinden: im Seitenlayout als LETZTES Stylesheet,
   NACH kacheln-overrides.css. Die wenigen !important hier
   kontern gezielt alte !important-Regeln in kacheln-overrides.css.
   ============================================================ */


/* ------------------------------------------------------------
   1) Schriftdateien (selbst gehostet wie bisher)
   Die zwei woff2-Dateien nach /files/theme/fonts/ hochladen.
   Wichtig: Bisher war NUR Lora 400 italic geladen – deshalb
   wirkten alle Überschriften kursiv und unecht-fett.
   Diese variable Datei deckt 400–700 in einer Datei ab.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/files/theme/fonts/Lora-var-normal-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/files/theme/fonts/Lora-var-italic-latin.woff2') format('woff2');
}


/* ------------------------------------------------------------
   2) Zentrale Variablen umstellen
   Trifft Theme-SCSS (--base-font-family, --headings-font-family),
   root.css der Buchungs-Widgets (--font-family-sans-serif)
   und die Serif-Variable aus der Override-Datei.
   ------------------------------------------------------------ */
:root {
  --uh-font: 'Lora', Georgia, 'Times New Roman', serif;

  --base-font-family: var(--uh-font);
  --headings-font-family: var(--uh-font);
  --headings-font-weight: 600;          /* statt 700 – ruhiger */
  --base-font-family-serif: var(--uh-font);
  --button-font-family: var(--uh-font);
  --font-family-sans-serif: var(--uh-font);  /* mwfm-Widgets (Suche, Datepicker) */
}

/* Kein künstliches Fett/Kursiv mehr erzeugen –
   wir haben jetzt echte Schnitte. */
html { font-synthesis: none; }


/* ------------------------------------------------------------
   3) Grundtext
   ------------------------------------------------------------ */
body {
  font-family: var(--uh-font);
  font-weight: 400;
  font-size: 18px;          /* vorher 20px Ubuntu – 18px Lora liest sich ruhiger */
  line-height: 1.7;
}

/* Formularelemente erben die Schrift nicht automatisch */
button, input, optgroup, select, textarea {
  font-family: var(--uh-font);
}

/* Sicherheitsnetz gegen alle noch fest verdrahteten
   Ubuntu-/Inter-/Arial-Deklarationen in default.css und
   kacheln-overrides.css (Kick-Zeilen, Chips, Badges, CTAs,
   Karten, FAQ-Toggler, Startseiten-Absätze usw.).
   Bewusst breit – Icon-Fonts laufen über ::before/::after
   und bleiben unberührt. */
/* !important, weil kacheln-overrides.css eigene Familien-Regeln
   mit hoher Spezifität enthält (u. a. Inter auf der Startseite).
   Icon-Fonts laufen über ::before/::after und bleiben unberührt;
   [class*="icon"] ist zusätzlich ausgenommen. */
body :is(h1, h2, h3, h4, h5, h6, p, li, a, span, strong, em, b, i,
  small, label, button, input, select, textarea, option, td, th,
  dt, dd, figcaption, blockquote, summary,
  legend):not([class*="icon"], [class*="fa-"], [class*="swiper-button"]),
.mod_article :is(p, li, a, span, strong, em, small, label),
.mod_navigation a, .mod_navigation span,
.mod_breadcrumb li, .mod_breadcrumb a,
#header a, #header span, #header label, #header input, #header button,
#footer p, #footer a, #footer li, #footer span, #footer strong {
  font-family: var(--uh-font) !important;
}


/* ------------------------------------------------------------
   4) Überschriften – Lora KURSIV, echte Gewichte
   Der kursive Charakter bleibt: genau das ist der
   "wie selbst geschrieben"-Eindruck der Marke.
   Neu ist nur, dass er aus der ECHTEN Kursiv-Datei kommt
   statt aus einer schräg gerechneten Aufrecht-Schrift –
   dadurch bleiben die Buchstabenformen sauber und das
   Fett ist echtes Fett, kein verschmiertes Faux-Bold.
   Dazu klare Größenstufen statt 21/24/26/32/40px-Mix.
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.headline, .heading--2, .uh-dyn h2, .uh-section h2 {
  font-family: var(--uh-font);
  font-weight: 600;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: 0;
}

/* Stark genug, um spezifische Theme-Regeln
   (z. B. .accommodation-detail__description-title) zu schlagen */
/* !important nötig: kacheln-overrides.css enthält 19 alte
   font-weight-!important-Regeln (u. a. h1,h2,h3 { 700 !important })
   aus früheren Experimenten (DM Sans / Dancing Script).
   Mittelfristig dort aufräumen, dann kann das hier weich werden. */
#main :is(h1, h2, h3, h4, h5, h6),
#header :is(h1, h2, h3),
#footer :is(h2, h3, h4) {
  font-family: var(--uh-font) !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2, .heading--2, .uh-dyn h2, .uh-section h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4, h5, h6 { font-size: 1.05rem; }

/* Hero-H1: etwas leichter, damit die große Kursive nicht drückt */
#main .uh-section--hero h1,
body.home #main h1,
.uh-section--hero h1 {
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}


/* ------------------------------------------------------------
   5) Kick-/Eyebrow-Zeilen
   Bleiben wie gewohnt: aufrecht, Versalien, gesperrt.
   Sie sind die ruhige Gegenstimme zur kursiven Überschrift –
   wenn beide kursiv wären, verschwimmt der Sektionskopf.
   Neu ist nur die Familie: Lora statt Ubuntu.
   ------------------------------------------------------------ */
.uh-kick, .uh-dyn .kick, [class*="kick"] {
  font-family: var(--uh-font) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}


/* ------------------------------------------------------------
   6) Navigation & Megamenü
   Barlow Semi Condensed raus, ein ruhiges Gewicht.
   ------------------------------------------------------------ */
.mod_navigation a, .mod_navigation strong,
.uh-megax__all, .mod_navigation .toggler,
#header .mod_navigation a {
  font-family: var(--uh-font) !important;
  font-weight: 500;
  letter-spacing: 0.005em;
}
/* Hauptnavigation nicht zu dünn (Theme setzt teils 300) */
#header .mod_navigation a { font-weight: 500 !important; }
#header .mod_navigation strong, #header .mod_navigation .active > a { font-weight: 600 !important; }


/* ------------------------------------------------------------
   7) Buttons, Chips, Badges, Pills
   Gleiche Familie, Gewicht macht den Unterschied.
   ------------------------------------------------------------ */
.btn, .btn--primary, button, .uh-dyn .cta, .uh-dyn .btn,
.accommodation-row__cta {
  font-family: var(--uh-font);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.uh-dyn .chip, .uh-dyn .badge, .uh-dyn .pill, .uh-chip {
  font-family: var(--uh-font);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  text-transform: none;
}


/* ------------------------------------------------------------
   8) Unterkunftsliste & Karten
   ------------------------------------------------------------ */
.accommodation-row__title { font-weight: 600; font-style: italic; }

.accommodation-row__location {
  font-family: var(--uh-font);
  font-style: normal;         /* aufrecht, damit sie sich vom Titel absetzt */
  font-weight: 400;
  font-size: 0.9rem;
  text-transform: none;
}

.accommodation-row__meta {
  font-family: var(--uh-font);
  font-size: 0.95rem;
}

/* Preise: aufrecht, halbfett – gut scanbar */
.accommodation-row strong, .price, [class*="price"] strong {
  font-family: var(--uh-font);
  font-weight: 600;
  font-style: normal;
}


/* ------------------------------------------------------------
   9) Detailseite
   ------------------------------------------------------------ */
.accommodation-details h2, h2.accomodation-headline,
.accommodation .headline {
  font-weight: 600;
  font-style: italic;
}

/* Bildunterschriften: aufrecht und klein – sie stehen neben
   kursiven Überschriften und sollen nicht mitschwingen */
figcaption { font-style: normal; font-size: 0.9rem; color: #6c6257; }


/* ------------------------------------------------------------
   10) Kleinkram, der sonst aus der Reihe tanzt
   ------------------------------------------------------------ */
/* Textcontainer, die ihre Schrift direkt am <div> tragen
   (RTE-Inhalte, FAQ-Toggler) */
body :is(.rte, .toggler, .ce_accordion .toggler, .handorgel__header) {
  font-family: var(--uh-font) !important;
}

/* Letzte Inter-Reste auf der Startseite (Slider-/Hero-Texte).
   Der letzte Selektor spiegelt die alte Regel 1:1 – gleiche
   Spezifität, aber später geladen = wir gewinnen. */
body.home .mod_article :is(p, li, a, span, label),
body.home .swiper-content .text p:not([class*="heading"]) {
  font-family: var(--uh-font) !important;
}

/* Hero-Kicker ("Persönlich besucht · echte Gastgeber"):
   aufrecht und gesperrt wie alle Kick-Zeilen */
body.home .swiper-content .text p:not([class*="heading"]) {
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Große Hero-Zeile im Slider ("Deine Hütte, Almhütte, ...")
   kursiv wie alle Überschriften. */
body.home .swiper-content .text p[class*="heading"] {
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
}


/* Kachel- und Kartentitel, die keine echten Überschriften sind
   (Theme baut sie als <span>/<p>). Sie waren vorher ebenfalls
   kursiv – damit die Startseite einen Ton hat, bekommen sie
   dasselbe echte Kursiv wie die Überschriften.
   Kicker, Chips und Buttons bleiben bewusst aufrecht. */
.uh-qp-label,
.uh-dyn__name,
.accommodation-card__title,
[class*="card__title"],
[class*="tile__title"] {
  font-style: italic !important;
  font-weight: 600 !important;
}


/* Die letzten zwei Ubuntu-Nutzer: Text in SVG-Grafiken
   (z. B. die Zahl im Merkliste-Herz). Damit lädt Ubuntu
   überhaupt nicht mehr – eine Schriftdatei weniger. */
svg text, svg tspan {
  font-family: var(--uh-font) !important;
}

/* Merk-Herz / Hinweis-Punkt auf Kacheln (war Georgia italic) */
.tile-hint { font-family: var(--uh-font); }

/* Datepicker / Personenwahl (war Arial bzw. System-Stack) */
.ui-datepicker, .ui-widget { font-family: var(--uh-font); }

/* FAQ-Toggler */
.uh-section--faq .ce_accordion .toggler {
  font-family: var(--uh-font);
  font-weight: 500;
}


/* ------------------------------------------------------------
   11) Mobil
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  body { font-size: 17px; line-height: 1.65; }
  .uh-section--hero h1, body.home h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}