/* ============================================================ typografie-2026.css · urlaubshuetten.com Stand 31.07.2026 Zweischriftsystem: Lora kursiv = Überschriften und Zitate -> "das liest du" Fira Sans = alles andere -> "das bedienst du" Fira Sans Condensed = Menüband Grund: Lora hat einen Strichkontrast von 2,56. Bei 17 px ist die dünnste Stelle im "o" nur 0,68 Pixel breit und wird vom Bildschirm grau statt schwarz gezeichnet. Fira Sans liegt bei Kontrast 1,33 und 1,27 Pixel - besser als Arial (1,42 / 1,10). Die x-Höhe steigt von 0,500 auf 0,525, also 5 Prozent, bei praktisch gleicher Breite. Diese Datei wird ALS LETZTES Stylesheet geladen, nach typografie.css und startseite-ruhe.css. RÜCKWEG: Datei aus den drei Layouts entfernen. Sonst nichts. Die alte typografie.css bleibt unangetastet und greift dann wieder. ============================================================ */ /* ------------------------------------------------------------ 1 · Die Schriftdateien Liegen in files/theme/fonts/. Nur lateinischer Zeichensatz, 229 Zeichen je Datei, rund 24 KB - alle deutschen Umlaute, ß, Gedankenstrich, Anführungszeichen und € sind geprüft drin. ------------------------------------------------------------ */ @font-face{ font-family:'Fira Sans UH'; src:url('/files/theme/fonts/FiraSans-400-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Fira Sans UH'; src:url('/files/theme/fonts/FiraSans-400-italic-latin.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Fira Sans UH'; src:url('/files/theme/fonts/FiraSans-600-latin.woff2') format('woff2'); font-weight:500 700; font-style:normal; font-display:swap; } /* Der Bereich 500-700 zeigt bewusst auf dieselbe SemiBold-Datei. Ohne das würde der Browser für font-weight:700 ein künstliches Fett rechnen - genau der Fehler, der in Schritt 1 bei Lora behoben wurde. Eine echte Bold-Datei wäre 24 KB mehr; SemiBold trägt auf Creme ausreichend. */ @font-face{ font-family:'Fira Sans Cond UH'; src:url('/files/theme/fonts/FiraSansCondensed-400-latin.woff2') format('woff2'); font-weight:400 500; font-style:normal; font-display:swap; } /* ------------------------------------------------------------ 2 · Die Grundregel Alles wird Fira Sans. Die Ausnahmen kommen in Abschnitt 3. ------------------------------------------------------------ */ :root{ --uh-serif: 'Lora', Georgia, 'Times New Roman', serif; --uh-sans: 'Fira Sans UH', 'Segoe UI', system-ui, sans-serif; --uh-schmal: 'Fira Sans Cond UH', 'Fira Sans UH', sans-serif; --uh-text: #2b2721; /* fast schwarz statt warmem Grau */ --uh-text-leise: #5c5648; } /* SPEZIFITÄTSFALLE, live gefunden und geprüft: In typografie.css steht body :is(h1,h2,h3,h4,h5,h6,p,li,a,span,strong,em,b,i,small, label,button,input,...) { font-family: var(--uh-font) !important; } Das ist (0,0,2). Eine Regel auf "p, li" wäre (0,0,1) und verlöre trotz !important. Deshalb läuft alles hier über #top - das ist die ID des body-Elements, gemessen an der Live-Seite. Damit (1,0,2). */ body#top{ font-family: var(--uh-sans) !important; } #top :is( p, li, dd, dt, td, th, figcaption, input, select, textarea, button, a, span, strong, b, small, em, i, label, legend, summary, .btn, .uh-collap__head, .uh-kachel-sub, .uh-dyn__meta, .uh-chip, .uh-pill, .breadcrumb, .pagination ){ font-family: var(--uh-sans) !important; font-style: normal; } /* em und i gehoeren bewusst dazu: Eine Serifen-Kursive mitten in einem Grotesk-Absatz liest sich wie ein Fehler. Dafuer ist die Fira-Kursiv-Datei geladen. Ganze kursive Zeilen bleiben Lora - das regelt der Block .uh-intro/.uh-nachsatz/blockquote weiter unten. */ #top footer, #top #footer, #top #footer :is(a, p, li, span){ font-family: var(--uh-sans) !important; } body{ color: var(--uh-text); } /* 31.07.2026: Diese Regel setzte die Textfarbe auf ALLEN Seiten und hat damit die hellen Absaetze der Regionenseiten ueberschrieben - dort steht .uh-rg auf dunkelgruenem Grund und faerbt seinen Text cremeweiss. Die Farbe kommt jetzt wieder ueber die Vererbung von body bzw. vom jeweiligen Abschnitt. Nur die Schriftart wird global gesetzt. p, li, dd, td{ color: var(--uh-text); } <- absichtlich entfernt */ /* Kein künstliches Fett. Das echte SemiBold ist geladen, ein gerechnetes Fett würde die Formen verschmieren - genau der Fehler, der in Schritt 1 bei Lora behoben wurde. Kursiv darf der Browser weiterhin rechnen: Fira Kursiv gibt es nur im Gewicht 400, und ein fett-kursives Wort soll seine Neigung behalten statt sie zu verlieren. */ body, body *{ font-synthesis: style; } /* ------------------------------------------------------------ 3 · Die Ausnahmen: hier bleibt Lora Kursive Serife = Überschrift oder Zitat. Sonst nirgends. ------------------------------------------------------------ */ #top :is( h1, h2, h3, h4, h5, h6, .accommodation__headline, .accommodation-detail__description-title, .uh-mag-herocard h1, .uh-mag-herocard h2, /* Die Hero-Ueberschrift ist ein

, kein h1. Ohne diese Zeile faengt sie die Fliesstext-Regel ab und die auffaelligste Schrift der Seite verliert ihre Kursive. Live gefunden 31.07.2026. */ .heading--1, .heading--2, .heading--3, .content-headline, .headline, .uh-hero-titel, blockquote p, .uh-zitat, .uh-servus p ){ font-family: var(--uh-serif) !important; font-style: italic !important; font-weight: 600 !important; } /* Ausnahme in der Ausnahme: Die Kapitelbalken SIND h2, sollen aber als Bedienelement lesen - aufrechte Grotesk. Sie stehen deshalb nach der Überschriftenregel und mit höherem Gewicht. */ #top :is(.uh-collap__head, .accommodation-detail__location-description > details > summary){ font-family: var(--uh-sans) !important; font-style: normal !important; font-weight: 600 !important; } /* ------------------------------------------------------------ 4 · Das Menüband Fira Sans Condensed löst Barlow Semi Condensed ab. GEMESSEN: Die Zeile "Unterkünfte Urlaubsthemen Regionen Urlaubswissen" ist in Fira Condensed rund 3,5 Prozent breiter als in Barlow. Deshalb ist die unterste Stufe 13 px statt 13,5 - damit endet die Zeile auf einem 348-px-Gerät bei 338 statt 349 px. ------------------------------------------------------------ */ #header .uh-leadnav a, #header nav.mod_customnav a, #header .uh-leadnav .uh-mega a{ font-family: var(--uh-schmal) !important; font-style: normal !important; font-weight: 400; letter-spacing: 0; } @media (max-width:900px){ #header .uh-leadnav a{ font-size:15.5px !important; } } @media (max-width:480px){ #header .uh-leadnav a{ font-size:14.5px !important; } } @media (max-width:400px){ #header .uh-leadnav a{ font-size:13px !important; padding:5px 3px !important; } } /* Die Megamenü-Links bleiben dunkelgrün auf weiß (Schritt 28) */ #header .uh-leadnav .uh-mega a{ color:#2e4423 !important; font-weight:500; } /* ------------------------------------------------------------ 5 · Kick-Zeilen und Beschriftungen Waren Lora aufrecht. Jetzt Fira - dadurch tragen die Versalien bei 11-14 px endlich, ohne dass die Serifen zulaufen. ------------------------------------------------------------ */ .uh-kicker, .uh-eyebrow, .kicker, .uh-kapitelgruppe__label{ font-family: var(--uh-sans) !important; font-style: normal !important; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color:#7a5c2e; } /* Kachel- und Kartentitel: aufrecht heißt ab jetzt Grotesk. GEMESSEN bei 16 px: "Bergappartements" ist in Fira 600 mit 136 px zwei Pixel schmaler als in Lora - das Umbruchproblem aus Schritt 12/13 bleibt also gelöst, wird aber nicht besser. */ /* SPEZIFITAETSFALLE: kacheln-overrides.css hat #top.home .content div.title{...!important} = (1,3,1). Deshalb laeuft die Kette hier ueber #top #main = zwei IDs. */ #top #main .uh-qp-label, #top #main .uh-dyn__name, #top #main .uh-dyn__tiletitel, #top #main .content div.title, #top #main .content div.title .small, #top #main .tile .small, #top #main .tile .title, #top #main .uh-eco-card strong{ font-family: var(--uh-sans) !important; font-style: normal !important; font-weight: 600 !important; } /* ------------------------------------------------------------ 6 · Größen und Farben im Fließtext Die Wurzelgröße liegt bei 20 px, unter 550 px bei 14 px. Deshalb überall feste Pixel - rem wäre hier eine Falle. ------------------------------------------------------------ */ p, li, dd, td{ font-size: 18px; line-height: 1.62; } @media (min-width:1200px){ p, li, dd, td{ font-size: 19px; line-height: 1.6; } } /* Leise Zwischenzeilen bleiben leise, aber lesbar: Kontrast von #5c5648 auf Creme #f4eede ist 6,4:1 */ .uh-sub, .uh-intro, .uh-dyn__meta, figcaption, small{ color: var(--uh-text-leise); } /* Ganze kursive Zeilen - die leisen Nachsätze unter einer Überschrift, der Vignetten-Hinweis, Zitate - bleiben Lora. Dort ist Kursiv eine Tonlage. Ein einzelnes betontes Wort MITTEN im Satz bleibt dagegen Fira kursiv: ein Familienwechsel innerhalb einer Zeile sähe aus wie ein Fehler. Dafür ist die Fira-Kursiv-Datei geladen. */ .uh-intro, .uh-nachsatz, .uh-hinweis, blockquote, blockquote p{ font-family: var(--uh-serif) !important; font-style: italic !important; } /* ------------------------------------------------------------ 7 · Die Größentreppe auf der Detailseite (mobil) Heute: 25 / 22 / 17 / 17 - vier Ebenen auf acht Pixeln. Neu: 30 / 24 / 20 / 18 - und jede Ebene hat zusätzlich eine eigene Fläche und eine eigene Schriftgattung. ------------------------------------------------------------ */ @media (max-width:860px){ /* Hüttenname: eigene Form, keine Balkenfläche mehr */ .accommodation__headline{ font-size: 30px !important; line-height: 1.2 !important; color:#2e4423 !important; background: none !important; padding: 0 !important; text-wrap: balance; } /* Sektionsüberschrift */ .accommodation-detail__description-title{ font-size: 24px !important; line-height: 1.25 !important; } /* Kapitelbalken: aufrecht, Grotesk, eine Stufe über dem Fließtext */ .uh-collap__head, .accommodation-detail__location-description > details > summary{ font-family: var(--uh-sans) !important; font-style: normal !important; font-weight: 600 !important; font-size: 20px !important; line-height: 1.3 !important; padding: 13px 44px 13px 14px !important; } /* Zwischenüberschriften innerhalb der Kapitel bleiben Lora */ .uh-collap__body h3, .accommodation-detail__location-description h3, .accommodation-detail__amenities-category-title{ font-family: var(--uh-serif) !important; font-style: italic !important; font-size: 18px !important; } .accommodation-detail__description-text p, .accommodation-detail__location-description p, .accommodation-detail__location-description li{ font-size: 18px !important; line-height: 1.62 !important; color: var(--uh-text) !important; } } /* ------------------------------------------------------------ 8 · Feinschliff ------------------------------------------------------------ */ /* Fira hat echte Kapitälchenzahlen nicht nötig, aber die Tabellenziffern helfen bei Entfernungslisten und Preisen */ .uh-fakten, .uh-entfernungen, table td{ font-variant-numeric: tabular-nums; } /* Knöpfe: aufrecht, halbfett, ruhig */ .btn, .btn a, a.btn, button, input[type=submit]{ font-family: var(--uh-sans) !important; font-style: normal !important; font-weight: 600; letter-spacing: .01em; } /* Formularfelder waren teils noch Systemschrift */ input, select, textarea{ font-family: var(--uh-sans) !important; font-size: 16px; /* unter 16 px zoomt iOS beim Antippen hinein */ } /* 31.07.2026: Auf den Seiten mit dunkelgruenem Grund (Regionen und Urlaubsthemen, erkennbar an .uh-rg) steht ein freier Absatz direkt im Abschnitt .uh-mag-sec. Der erbt dort die dunkle Textfarbe des Abschnitts und ist auf dem dunklen Grund nicht zu lesen. Nur diese freien Absaetze bekommen die helle Farbe - Text in weissen Karten bleibt unberuehrt. */ body:has(#main .uh-rg) section.uh-mag-sec > p, body.uh-braun section.uh-mag-sec > p{ color:#f4eede; }