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 /

). 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); } } /* ============================================================ urlaubshuetten.com – Ruhe: ein Takt, ein Kachelstil ------------------------------------------------------------ Einbinden NACH typografie.css (letztes Stylesheet im Layout). Zwei Geltungsbereiche, bewusst getrennt: - Der Sektions-Takt wirkt nur auf body.home. - Der Kachelstil wirkt überall, weil dieselben Karten auch auf /unterkuenfte und /kurzfristig-frei stehen. Ein Kachelstil nur auf der Startseite wäre kein einheitlicher. Gemessen am Frontend am 27.07.2026 – die Werte in den Kommentaren sind der Ist-Zustand, nicht geschätzt. ============================================================ */ :root { /* Ein Takt für alle Sektionen. Ausprobiert und wieder verkleinert: mit 88 px wuchs die Seite um gut 12 Prozent in die Länge – mehr Luft, aber auch mehr Scrollen. 72 px ist spürbar ruhiger als die alten 52 px und lässt die Seite trotzdem nicht aufgehen. */ --uh-sec-pad: clamp(48px, 5vw, 72px); --uh-maxw: 1200px; --uh-line: #d6cbb4; --uh-surface: #f4eede; --uh-text-soft: #6c6257; /* EIN Radius für alle Karten. 14px ist der Wert, den das Theme selbst am häufigsten verwendet (Unterkunftskarten und Themenkacheln, zusammen 43 Elemente). Wir erfinden also nichts Neues, sondern ziehen die Ausreißer 16px und 10px auf den vorhandenen Wert. */ --uh-radius: 14px; /* Zwei Stufen je Marken-Farbe – siehe befunde-technik-redteam.md. Die helle Stufe nur für große Schrift und Flächen. */ --uh-green: #5c7429; /* Buttons, Links, kleine Schrift */ --uh-green-gross: #6b8532; /* Überschriften ab ca. 24 px */ --uh-accent: #7d5a1c; /* Kicker, kleine Schrift, Badge-Fläche */ --uh-accent-flaeche: #b98a3d; /* nur dekorativ oder mit dunkler Schrift */ --uh-accent-text: #2b2013; /* dunkle Schrift auf #b98a3d */ /* Dunkelgrün für Kartentitel auf Creme – Kontrast 8,9. Bewusst als eigener Name: Im Theme existiert bereits ein --uh-green-dark mit einem ganz anderen Wert (#7f862e, ein Gelbgrün). Wer den Fallback nutzt, bekommt den falschen Ton. */ --uh-karte-titel: #2e4423; } /* ------------------------------------------------------------ 1) Ein Takt: gleiche Abstände für alle Sektionen GEMESSEN, Ist-Zustand der 16 Artikel: 52/52 px (die meisten), 56/90 px (Nachhaltigkeit), dazu margin-top +60 px (Von uns ausgewählt, Nachhaltigkeit) und margin-top −140 px (Servus-Zeile, Overlap-Trick). Das ergibt Sprünge zwischen 0 und 150 px Zwischenraum. !important nötig: die Sonderabstände stehen in kacheln-overrides.css teils selbst mit !important. ------------------------------------------------------------ */ body.home #main .mod_article:not(.uh-section--hero):not(.uh-section--service) { padding-top: var(--uh-sec-pad) !important; padding-bottom: var(--uh-sec-pad) !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Hero bleibt randlos */ body.home .uh-section--hero { padding-top: 0 !important; padding-bottom: 0 !important; } /* Die Servus-Zeile bleibt, wie sie ist. ERST GEÄNDERT, DANN ZURÜCKGENOMMEN: Ich hatte ihren margin-top von −140px auf 0 gesetzt, weil er wie ein Ausreißer aussah. Am Frontend geprüft ist er aber kein Versehen, sondern gewollt – die Begrüßungskarte schiebt sich absichtlich in das Hero-Bild hinein. Ohne den Versatz klafft darüber eine leere Fläche von rund 140 px. Der Takt gilt deshalb für alle Sektionen AUSSER Hero und Servus-Zeile: die eine ist randlos, die andere überlappt. */ /* ------------------------------------------------------------ 2) Ein Sektionskopf GEMESSEN: H2 steht auf 26, 42 und 46 px – drei Größen für dieselbe Ebene. Das ist der zweitgrößte Unruhefaktor nach den Kacheln. Jetzt: eine Größe, die mitwächst. clamp() heißt: nie kleiner als 30 px, nie größer als 40 px, dazwischen an der Fensterbreite orientiert. ------------------------------------------------------------ */ body.home #main .uh-section:not(.uh-section--service) h2, body.home #main .uh-dyn h2 { font-size: clamp(30px, 2.6vw, 40px) !important; line-height: 1.25; text-align: center; margin: 0 auto 0.35em; max-width: 20ch; } /* Die Servus-Karte ist ein schmales Band, keine Sektion – ihre 26px-Überschrift passt zur Bandhöhe und bleibt. */ /* Kick-Zeile darüber: gleiche Achse, gleicher Abstand */ body.home #main [class*="kick"] { display: block; text-align: center; margin: 0 0 0.5em; } /* Intro-Zeile unter der H2: schmal und leise. Die Servus-Karte ist ausgenommen: Sie steht auf dunklem Braun (#4e4639). Die leise Textfarbe #6c6257 ergibt darauf einen Kontrast von 1,4 – praktisch unlesbar. Genau das war nach Schritt 2 kurz live. */ body.home #main .uh-section:not(.uh-section--service) h2 + p, body.home #main .uh-dyn h2 + p { max-width: 68ch; margin: 0 auto 2.2em; text-align: center; color: var(--uh-text-soft); } /* ------------------------------------------------------------ 2b) Die Servus-Karte auf dunklem Grund Alles darin hell und in einer Größe. Vorher standen im selben Absatz 15 px (Absatz) und 18,7 px (span) neben- einander – das ließ die zwei Sätze wie zwei verschiedene Gedanken aussehen, obwohl sie zusammengehören. ------------------------------------------------------------ */ body.home .uh-section--service .inside h2, body.home .uh-section--service .inside p, body.home .uh-section--service .inside p span, body.home .uh-section--service .inside li { color: #f7f3e8 !important; /* Creme auf Braun – Kontrast 8,4 */ font-size: 1rem !important; line-height: 1.65; text-align: center !important; } /* Die Überschrift behält ihre Größe */ body.home .uh-section--service .inside h2 { font-size: 26px !important; } /* KEINE max-width hier. Erst versucht, wieder entfernt: Mit `max-width: 60ch` plus `margin: auto` blieb der Absatz auf dem Desktop trotzdem links kleben – eine Theme-Regel setzt einen eigenen margin-left und schlägt das `auto`. Ergebnis: ein 745 px breiter Textblock, linksbündig in einer 916 px breiten Karte. Der Text war zwar in sich zentriert, saß aber rund 85 px zu weit links – und genau so sah es auch aus. Ohne Begrenzung nutzt der Absatz die volle Kartenbreite, und zentriert heißt dann auch mittig. Die Karte ist mit 916 px schmal genug, dass die Zeilen nicht zu lang werden. */ /* Der Knopf behält seine eigene Farbe */ body.home .uh-section--service .inside a.btn, body.home .uh-section--service .inside .btn { color: #fff !important; } /* ------------------------------------------------------------ 3) Ein Kachelstil GEMESSEN, Ist-Zustand: vier Radien nebeneinander – 14 px (Unterkunftskarten, Themenkacheln), 16 px (uh-dyn__card, uh-qp-tile), 10 px (uh-eco-card), 0 px (Bild-Container innerhalb der Karten). Dazu auf fast allem ein Schlagschatten. Jetzt: ein Radius (14 px, der Wert des Themes), kein Schatten, stattdessen eine feine Linie. Der Schatten ist das, was die Seite unruhig macht – er zieht jede Kachel optisch von der Fläche ab, und bei 60 Kacheln flimmert das. Eine Linie trennt genauso gut und liegt still. Pillen, Merk-Herzen und Badges bleiben unangetastet – die sind rund, weil sie rund sein sollen. ------------------------------------------------------------ */ /* Auf /unterkuenfte heißt dieselbe Karte .accommodation-row und trägt Radius 18 – der vierte Wert im Bunde. Kommt mit rein, sonst sieht die Trefferliste anders aus als die Startseite. */ .accommodation-card, .accommodation-row, .uh-qs-card, .uh-dyn__card, .uh-qp-tile, .uh-eco-card, #main .tile { border-radius: var(--uh-radius) !important; box-shadow: none !important; border: 1px solid var(--uh-line); overflow: hidden; /* damit Bilder der Kante folgen */ transition: border-color .2s ease; } /* Bilder in den Kacheln: oben der Kante folgen, kein Eigenleben mit eigenem Schatten */ .accommodation-card img, .accommodation-row img, .accommodation-row__image, .uh-qs-card img, .uh-dyn__card img, .uh-qp-tile img, .uh-eco-card img, #main .tile img, .uh-qp-img, #main .image_container, #main .imagecontainer { box-shadow: none !important; border-radius: 0 !important; } /* Sanfter Hover statt Sprung und Schattenwurf */ .accommodation-card:hover, .accommodation-row:hover, .uh-qs-card:hover, .uh-dyn__card:hover, .uh-qp-tile:hover, .uh-eco-card:hover, #main .tile:hover { border-color: #b9ab8e; box-shadow: none !important; transform: none !important; } /* ------------------------------------------------------------ 3b) Der Finder: vier Artikel, eine Sektion Nach dem Umsortieren stehen 673, 680, 675 und 676 hintereinander. Inhaltlich sind das vier Antworten auf EINE Frage – mit wem, wann, welche Art, welche Region. Sie sollen sich auch so lesen. Dafür braucht es keinen Umbau der Bausteine: Die Abstände dazwischen fallen weg, und die drei nachfolgenden Überschriften werden von Haupt- zu Zeilen-Überschriften. Die erste (673) bleibt groß und trägt die Frage. ------------------------------------------------------------ */ body.home #main .mod_article.uh-section.uh-section--topics { padding-bottom: 20px !important; } body.home #main .mod_article.uh-section.uh-section--seasons, body.home #main .mod_article.uh-section.uh-section--worlds { padding-top: 4px !important; padding-bottom: 20px !important; } body.home #main .mod_article.uh-section.uh-section--regions { padding-top: 4px !important; /* die letzte Zeile schließt die Sektion ab */ } /* Zeilen-Überschrift: deutlich kleiner als die Frage darüber, aber größer als der Kicker – drei Ebenen, klar getrennt. */ /* NACHTRAG 28.07.2026 – auf dem Handy stimmte die Größe, auf dem Desktop war sie zu klein: 22 px neben 40 px der Hauptüberschriften wirkt wie eine Bildunterschrift, nicht wie eine Zeilen-Überschrift. Die obere Grenze steigt auf 30 px, die untere bleibt bei 19 px – mobil ändert sich dadurch nichts. */ body.home #main .mod_article.uh-section.uh-section--seasons h2, body.home #main .mod_article.uh-section.uh-section--worlds h2, body.home #main .mod_article.uh-section.uh-section--regions h2 { font-size: clamp(19px, 2.2vw, 30px) !important; margin-bottom: 0.15em; } /* Die Kick-Zeile in den Finder-Zeilen: leise Unterzeile. VERSUCHT UND VERWORFEN: Ich wollte sie per flexbox über die Überschrift holen, weil sie im Markup darunter steht. Das geht hier nicht sauber – sie sitzt eine Ebene tiefer in einem .rte-Container zusammen mit dem Einleitungstext. Reihenfolge umdrehen würde den Einleitungstext mit hochziehen. Stattdessen bekommt sie hier die Rolle, die sie an dieser Stelle tatsächlich hat: eine ruhige Unterzeile zur Zeilen-Überschrift. Kein Versalien-Kicker – der gehört ÜBER eine Überschrift, nicht darunter. */ body.home #main .mod_article.uh-section.uh-section--seasons [class*="kick"], body.home #main .mod_article.uh-section.uh-section--worlds [class*="kick"], body.home #main .mod_article.uh-section.uh-section--regions [class*="kick"] { font-style: italic !important; font-weight: 400 !important; font-size: 0.85rem; letter-spacing: 0 !important; text-transform: none !important; color: var(--uh-text-soft); margin: 0 0 1.2em; } /* ------------------------------------------------------------ 3c) Der Hof-Block: zwei Artikel, eine Bühne 678 (Nachhaltigkeit) und 679 (Regional einkaufen) liegen nach dem Umsortieren nebeneinander und tragen beide die beige Fläche. Damit sie als EINE Bühne lesen, gilt dasselbe Muster wie beim Finder: die erste Überschrift trägt das Thema, die zweite wird zur Zeilen-Überschrift, und der Abstand dazwischen fällt weg. ------------------------------------------------------------ */ /* NACHTRAG 28.07.2026 – die 24 px waren zu wenig. Diese Sektion trägt am unteren Rand die gezeichnete Bergkette als Trenner. GEMESSEN: Sie steckt als `::after` mit `position: absolute; bottom: -2px` und **90 px Höhe** in der Sektion – ragt also 88 px nach oben hinein. Bei 24 px Innenabstand lief sie mitten durch die letzte Aufzählungszeile. Der Trenner lässt sich nicht „nach unten schieben", er klebt am unteren Rand. Was ihm hilft, ist Platz: Die Sektion bekommt unten so viel Innenabstand, dass die Bergkette unter dem Text zu liegen kommt. */ body.home #main .mod_article.uh-section.uh-section--sustainability { padding-bottom: 104px !important; } @media (max-width: 767px) { body.home #main .mod_article.uh-section.uh-section--sustainability { padding-bottom: 96px !important; } } body.home #main .mod_article.uh-section.uh-section--direct { padding-top: 4px !important; } body.home #main .mod_article.uh-section.uh-section--direct h2 { font-size: clamp(19px, 2.2vw, 30px) !important; margin-bottom: 0.15em; } body.home #main .mod_article.uh-section.uh-section--direct [class*="kick"] { font-style: italic !important; font-weight: 400 !important; font-size: 0.85rem; letter-spacing: 0 !important; text-transform: none !important; color: var(--uh-text-soft); margin: 0 0 1.2em; } /* ------------------------------------------------------------ 3d) EIN Kacheltext-System GEMESSEN am 28.07.2026 – sechs Titelgrößen nebeneinander: .uh-qp-label 20 px, 600, kursiv (Schnellwahl) .tile .small 22 px, 700, aufrecht (Themenkacheln) .uh-dyn__tiletitel 20 px, 700, aufrecht (Erlebnisse) .uh-dyn__name 18 px, 600, kursiv (Unterkünfte) .uh-eco-card strong 17 px, 700, aufrecht (Nachhaltigkeit) dazu Unterzeilen in 14 und 15 px. Das ist der Hauptgrund, warum die Seite trotz gleicher Kacheln unruhig wirkt: Jeder Block hat seine eigene Schriftgröße, und die Hälfte davon ist aufrecht, die andere kursiv. Jetzt zwei Ebenen, überall gleich: Titel 18 px (16 mobil), 600, AUFRECHT Unterzeile 14 px (13 mobil), 400, aufrecht, leise NACHTRAG 28.07.2026 – Titel jetzt aufrecht statt kursiv. Gemessen war der Zustand: Lora Kursiv in 700 (nicht 600, siehe Spezifitätsnotiz unten) bei 16 px. In dieser Größe laufen die Innenräume der Serifen zu, die Beschriftung wirkt unscharf – wie mit Schatten hinterlegt. Kursiv lebt von Feinheit, und die geht im Fettschnitt bei kleiner Größe verloren. Das Kursive bleibt da, wo es hingehört: in den Sektionsüberschriften. Damit wird es sogar zum Signal – kursiv heißt Überschrift, aufrecht heißt Beschriftung. ------------------------------------------------------------ */ #main .uh-qp-label, #main .tile .small, #main .uh-dyn__tiletitel, #main .uh-dyn__name, #main .uh-eco-card strong, #main .accommodation-card__title, #main .accommodation-row__title { font-size: 1rem !important; /* = 18 px bei 18px-Basis */ font-weight: 600 !important; font-style: normal !important; line-height: 1.3 !important; letter-spacing: 0; display: block; /* KEIN `text-wrap: balance` und KEIN `overflow-wrap: break-word`. Die beiden zusammen haben Wörter mitten durchgeschnitten: „Ferienhäuse" / „r". Balance zieht die Zielbreite der Zeilen enger, break-word erlaubt daraufhin den harten Bruch im Wort. Ein Wort bricht nie mitten durch – lieber wird die Zeile breiter. */ overflow-wrap: normal; word-break: normal; hyphens: none; } /* SPEZIFITÄT: In kacheln-overrides.css steht `#top.home .content div.title, #top.home .content div.title .small` mit `font-weight: 700 !important` – das ist (1,3,1) und schlägt die Regel oben (1,2,0). Die Beschriftungen standen deshalb in 700, obwohl hier 600 steht. Gegenregel: */ #top.home .content div.title, #top.home .content div.title .small, #top.home .content div.title .small span { font-weight: 600 !important; font-style: normal !important; } /* Die Unterzeile – neu im Kacheltext als … */ #main .uh-kachel-sub, #main .uh-eco-card__sub, #main .uh-dyn__ort { display: block; font-size: 0.78rem !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.4; letter-spacing: 0; margin-top: 0.25em; opacity: 0.88; } /* Auf den grünen Kachelbändern steht die Unterzeile auf farbigem Grund – dort trägt sie keine eigene Deckkraft, sonst wird sie matschig. */ #main .tile .small .uh-kachel-sub, #main .uh-qp-label .uh-kachel-sub { opacity: 1; color: rgba(255,255,255,.88); } /* Nur EIN Merkmal-Chip pro Karte – der Rest ist Rauschen. Die weiteren stehen weiterhin im Markup und lassen sich mit dieser einen Zeile wieder einschalten. */ #main .uh-dyn__pill:nth-of-type(n+2) { display: none; } /* Mobil in festen Pixeln, nicht in rem: Die Wurzelgröße liegt bei 20 px, ein 0,95rem-Titel wäre auf einer 160 px breiten Kachel immer noch 19 px – genau das Problem, das im Video zu sehen ist. */ @media (max-width: 767px) { #main .uh-qp-label, #main .tile .small, #main .uh-dyn__tiletitel, #main .uh-dyn__name, #main .uh-eco-card strong, #main .accommodation-card__title, #main .accommodation-row__title { font-size: 16px !important; line-height: 1.25 !important; } #main .uh-kachel-sub, #main .uh-eco-card__sub, #main .uh-dyn__ort { font-size: 13px !important; line-height: 1.35; } /* Auf dem Handy ist eine Kachel nur rund 156 px breit. Der Innenabstand wird deshalb genau einmal vergeben – auf .content, mit 8 px. Bleiben 140 px für den Text. */ #main .tile .small, #main .uh-qp-label { padding: 0 !important; } #main .tile > .content, #main .uh-qp-tile > .uh-qp-label { padding: 10px 8px 12px !important; } } /* Sehr schmale Geräte (iPhone SE und ähnlich, 320–350 px). GERECHNET mit der echten Schrift: „Ferienwohnungen" ist in Lora 600 bei 16 px genau 137 px breit. Auf einem 320-px- Gerät ist eine Kachel aber nur rund 142 px breit, bei 4 px Innenabstand bleiben 134 px Text – das Wort passt nicht. Bei 14 px ist es 120 px breit und passt. */ @media (max-width: 350px) { #main .uh-qp-label, #main .tile .small, #main .uh-dyn__tiletitel, #main .uh-dyn__name, #main .uh-eco-card strong, #main .accommodation-card__title, #main .accommodation-row__title { font-size: 14px !important; } #main .tile .small, #main .uh-qp-label, #main .tile > .content, #main .uh-qp-tile > .uh-qp-label { padding-left: 4px !important; padding-right: 4px !important; } } /* ------------------------------------------------------------ 3e) Gleich hohe Kacheln GEMESSEN: Das Kachelraster steht auf `align-items: start`. Deshalb bleibt jede Kachel so hoch, wie ihr Inhalt es verlangt – bricht ein Titel zweizeilig um und der Nachbar nicht, endet die grüne Fläche unterschiedlich hoch und daneben klafft eine helle Lücke. Genau das ist im Screenshot zu sehen; es fehlt keine Farbe, die Kachel ist nur kürzer. Jetzt: Das Raster streckt alle Kacheln einer Reihe auf dieselbe Höhe, und das Textband füllt den Rest. ------------------------------------------------------------ */ #main .tiles, #main [class*="tile"] > .ce_rsce_tiles, #main .ce_rsce_tiles, #main .uh-qp-grid { align-items: stretch !important; } #main .tile, #main .uh-qp-tile { display: flex !important; flex-direction: column; height: 100%; } /* Das Bild behält seine Höhe, das Textband nimmt den Rest */ #main .tile > .small, #main .uh-qp-tile > .uh-qp-label { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; } /* ------------------------------------------------------------ 3f) Hero – ruhiger Einstieg Drei Punkte aus dem Handy-Video: 1. Die Überschrift beginnt zu weit oben und schiebt sich über die Bergspitzen. 2. Auf allen Hero-Texten liegt `text-shadow: rgba(0,0,0,.3) 0 0 15px` – ein grauer Schleier, der die Serifen weich und schmutzig macht. 3. Das Suchfeld klebt zu hoch. Statt des Schattens ein sehr sanfter Verlauf im unteren Bilddrittel: Er hält den Text lesbar, ist selbst aber nicht zu sehen. Wenn er stören sollte, den Block `.uh-section--hero .swiper-slide::after` löschen. ------------------------------------------------------------ */ body.home .uh-section--hero .swiper-content p, body.home .uh-section--hero .swiper-content a, body.home .uh-section--hero .swiper-content span, body.home .uh-section--hero h1 { text-shadow: none !important; } body.home .uh-section--hero .swiper-slide { position: relative; } body.home .uh-section--hero .swiper-slide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; /* NACHTRAG 28.07.2026 – neues Sommerbild, deutlich heller als das alte Panorama: heller Himmel und eine sonnige Hüttenwand genau dort, wo die weiße Schrift steht. Der alte Verlauf (62 %, bis 0,34) reichte dafür nicht. Jetzt höher und einen Tick kräftiger, aber weiterhin als Verlauf im Bild – NICHT als Schatten an der Schrift, der war ausdrücklich unerwünscht. */ height: 74%; background: linear-gradient(to bottom, rgba(30,34,24,0) 0%, rgba(30,34,24,.28) 42%, rgba(30,34,24,.52) 100%); pointer-events: none; z-index: 1; } /* NICHT `position: relative` setzen! Der Textblock liegt absolut über dem Bild. Mit relative rutschte er in den Fluss und machte den Hero 477 px höher – die Überschrift landete unter dem sichtbaren Bereich. Genau das war der Fehler, den du gesehen hast. z-index allein genügt, weil das Element ohnehin positioniert ist. */ body.home .uh-section--hero .swiper-content { z-index: 2; } /* ZWEIMAL DANEBEN, deshalb hier die Begründung: Versuch 1: `justify-content: flex-end` – der ganze Block rutschte auf die Unterkante des 1.510 px hohen Hero, die Überschrift stand unter dem sichtbaren Bereich. Versuch 2: `padding-top: 6vh` – auf dem Desktop wanderte die Zeile von 52 % auf 69 % der Hero-Höhe. Auch zu tief. Auf dem Desktop stimmte die Höhe von Anfang an. Der Hinweis kam aus dem Handy-Video. Deshalb bleibt der Desktop jetzt unangetastet, und nur mobil wird nachjustiert. */ @media (max-width: 767px) { /* Der Hero auf 369 px – vier Teile, die sich gegenseitig im Weg standen: Kicker, dreizeilige Überschrift, ein fast vollbreiter eckiger Knopf und darunter ein weißer Suchkasten ohne Form. Neue Ordnung: Das Foto bleibt Atmosphäre, die Suchkarte wird Funktion. Der Knopf tritt einen Schritt zurück. */ /* 1) Überschrift: höchstens zwei Zeilen */ body.home .uh-section--hero .swiper-content p[class*="heading"], body.home #main .uh-section--hero h1 { font-size: clamp(20px, 5.4vw, 24px) !important; line-height: 1.2 !important; max-width: 17ch; margin-left: auto !important; margin-right: auto !important; } /* 2) Kicker: klein und leise – steht weiter unten bei Abschnitt 3i zusammen mit der Unterzeile, damit beide Hero-Zeilen an einer Stelle gepflegt werden. */ body.home .uh-section--hero .swiper-content { padding-top: 4vh !important; } /* 3) Der grüne Knopf wird kompakt und rund statt breit und eckig. Er ist mobil die zweite Stimme, nicht die erste. Kimi würde ihn hier ganz weglassen – die Suche direkt darunter ist dieselbe Handlung, und zwei Hauptaktionen nebeneinander führen niemanden. Ich lasse ihn stehen, weil das eine inhaltliche Entscheidung ist. Zum Ausblenden genügt `display: none` in dieser Regel. */ body.home .uh-section--hero .hero-cta > a { display: inline-block !important; width: auto !important; padding: 11px 22px !important; font-size: 15px !important; border-radius: var(--uh-radius) !important; } /* 4) Die Suche als abgerundete weiße Karte – vollständig sichtbar, mit Luft zum Bildrand. */ body.home .uh-section--hero .hero-cta .ce_form { background: #fff; border-radius: var(--uh-radius); margin: 14px 14px 0 !important; padding: 8px !important; box-shadow: 0 6px 22px rgba(30, 34, 24, .22); overflow: hidden; } body.home .uh-section--hero .hero-cta .ce_form .widget { margin-bottom: 0 !important; } } /* ------------------------------------------------------------ 3g) Text runter vom Bild – das Muster der großen Portale Das ist der Punkt, der die Übersichtlichkeit am meisten bringt, und der Grund, warum jedes große Ferienportal es so macht: Auf dem Bild steht kein Text. GEMESSEN, wie die Kachel gebaut ist: .tile .image 297 px, das Foto .content 74 px, Fläche #4f7a36 (dunkelgrün), Text weiß Der Text lag also gar nicht ÜBER dem Bild – er stand schon darunter. Was ihn wie einen Aufkleber wirken ließ, war die satte grüne Fläche: Sie liest sich als Teil des Bildes und drückt jedes Foto optisch nach unten weg. Jetzt trägt die Textfläche dasselbe Creme wie die Sektionen, die Schrift ist dunkelgrün. Aus der Kachel wird eine Karte: oben das Foto, unten die Beschriftung auf ruhigem Grund. Das Foto bleibt Atmosphäre, der Text bleibt Text – und weil beide getrennt sind, darf der Titel auch zweizeilig werden, ohne dass etwas kippt. ------------------------------------------------------------ */ #main .tile > .content, #main .uh-qp-tile > .uh-qp-label, #main .uh-qp-label { background: var(--uh-surface) !important; color: var(--uh-karte-titel) !important; padding: 14px 14px 16px !important; /* Zentriert statt linksbündig: Ein langes Wort hat so links und rechts gleich viel Luft, statt einseitig gegen die rechte Kante zu laufen. Und weil das Hüttenzeichen oben links auf dem Foto sitzt, kommen sich die beiden nicht in die Quere. */ text-align: center !important; align-items: center !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column; /* Oben statt mittig: Bei mittiger Ausrichtung beginnt ein einzeiliger Titel („Kärnten") weiter unten als ein zweizeiliger („Salzburger Land"). Im Raster nebeneinander springt die erste Textzeile dadurch auf und ab. Oben ausgerichtet starten alle Titel auf derselben Linie. */ justify-content: flex-start !important; } #main .tile > .content *, #main .uh-qp-label * { color: var(--uh-karte-titel) !important; } /* GEMESSEN am 28.07.2026 – der Grund, warum Wörter in den Kacheln abgeschnitten wurden. Die Textbreite wird von DREI Ebenen beschnitten, nicht von einer: .tile 298 px .content 297 px (14 px links + rechts) .title 269 px (16 px links + rechts – aus dem Theme) .small 237 px Macht 30 px pro Seite. Auf dem Handy ist eine Kachel rund 156 px breit – da blieben nur 96 px für den Text übrig. „Ferienwohnungen" braucht 137 px, „Ferienhäuser" 100 px. Beide passten nicht, und weil die Karte `overflow: hidden` trägt, wurden sie an der Kante abgeschnitten. Der Innenabstand gehört genau einmal vergeben – auf .content. Die Zwischenebene bekommt keinen eigenen. */ #main .tile .title, #main .tile .content .title { padding-left: 0 !important; padding-right: 0 !important; } /* Die Unterzeile bleibt die leise Stimme */ #main .uh-kachel-sub { color: var(--uh-text-soft) !important; opacity: 1 !important; } /* Das kleine Hüttenzeichen vor dem Titel wird grün statt weiß */ #main .tile > .content i, #main .uh-qp-label i { background-color: var(--uh-green-gross, #6b8532) !important; } /* Die Karte selbst trägt dieselbe Fläche, damit unter dem Text kein weißer Streifen stehen bleibt */ #main .tile, #main .uh-qp-tile { background: var(--uh-surface) !important; } /* ------------------------------------------------------------ 3h) Das Hüttenzeichen wandert in die Bildecke GEMESSEN: Das Symbol ist ein mit Mask-Image, 40 × 24 px, `display: block` – es steht also auf einer EIGENEN ZEILE über dem Titel, mitten in der Cremefläche. Bei zehn gleichartigen Karten wirkt jedes wiederholte Element zehnfach: Die Textfläche wird auf jeder Karte eine Zeile höher, und das Zeichen konkurriert mit dem Titel um den ersten Blick. Jetzt sitzt es klein oben links auf dem Foto. Die Cremefläche bleibt schlank, der Titel bekommt den ganzen Raum, und die Marke ist trotzdem auf jeder Karte da – nur eben als leises Eigentumszeichen, nicht als Überschrift. Wer es ganz weghaben will: in dieser Regel `display: none` ergänzen, dann ist es überall weg. ------------------------------------------------------------ */ #main .tile, #main .uh-qp-tile { position: relative; } /* Damit das Zeichen wirklich an der KACHEL hängt und nicht an der Textfläche: .content trägt im Theme `position: relative` und wäre sonst der Bezugspunkt – das Symbol landete dann 326 px weiter unten, also mitten in der Cremefläche. */ #main .tile > .content, #main .tile .title, #main .tile .small { position: static !important; } #main .tile .small > i, #main .tile .content i, #main .uh-qp-label > i { position: absolute !important; top: 12px; left: 12px; width: 30px !important; height: 19px !important; margin: 0 !important; background-color: #fff !important; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); z-index: 2; pointer-events: none; } /* ------------------------------------------------------------ 3h) Wappen neben dem Bundeslandnamen Kimi hat drei Stellen abgewogen: statt des Hüttenzeichens auf dem Foto, über dem Namen, oder daneben. Sein Urteil: daneben. Auf dem Foto geht ein feines Wappen im Bild unter; über dem Namen sprengt es bei 156 px Kartenbreite die Zeilenhöhe, gerade bei Tirol im Hochformat. Eine Abweichung: Kimi wollte den Namen dafür linksbündig setzen. Das wäre gegen die eben erst zentrierte Ausrichtung. Stattdessen bilden Wappen und Name zusammen eine Gruppe, und DIE Gruppe steht mittig. GRÖSSE immer über die Höhe steuern, nie über die Breite – die Wappen haben verschiedene Seitenverhältnisse (Tirol 470 × 555 hochkant, andere breiter). ------------------------------------------------------------ */ #main .uh-wappenzeile { display: flex !important; align-items: center; justify-content: center; gap: 0.45em; } /* GEMESSEN: Die Wappen-SVGs tragen nur eine `viewBox`, kein `width`/`height`. Damit haben sie für ein keine eigene Größe – `width: auto` fiel auf 0 zusammen, die Wappen waren unsichtbar. Lösung: feste Box, und das Wappen passt sich mit `object-fit: contain` hinein. Das trägt auch die verschiedenen Seitenverhältnisse (Tirol 470 × 555 hochkant, Kärnten und andere breiter). */ #main .uh-wappen { flex: 0 0 auto; height: 22px; width: 24px; object-fit: contain; object-position: center; display: block; /* Kein Rahmen, kein Radius – das Wappen ist ein Zeichen, kein Bild. Die Kartenregel setzt sonst 14 px Radius. */ border-radius: 0 !important; border: 0 !important; } @media (max-width: 767px) { #main .uh-wappen { height: 19px; width: 21px; } #main .uh-wappenzeile { gap: 0.35em; } } /* ------------------------------------------------------------ 3h2) Der Bildausschnitt auf dem Handy Solange es nur das Querformat gibt, schneidet das Handy einen senkrechten Streifen aus der Mitte heraus – rund 738 von 1920 px. Welcher Streifen das ist, bestimmt `object-position`. GEMESSEN wurde das Sommerbild spaltenweise im Textband (mittlere 35 % der Höhe): mittlere Helligkeit und Unruhe. 25 % hell 181 Unruhe 46 ← Himmel, weiße Schrift geht unter 45 % hell 171 Unruhe 45 60 % hell 135 Unruhe 58 74 % hell ~105 Unruhe ~56 ← Hüttenwand, dunkles Holz 80 % hell 92 Unruhe 54 Die Mitte ist die hellste Stelle im ganzen Bild – genau dort stand bisher die weiße Schrift. Bei 74 % liegt die dunkle Holzwand hinter dem Text, und das eigentliche Motiv ist auf dem Handy überhaupt zu sehen. Das bleibt ein Notbehelf. Richtig gelöst wird es erst mit dem Hochformat aus der Bestellliste. ------------------------------------------------------------ */ @media (max-width: 767px) { body.home .uh-section--hero .swiper-slide img, body.home .uh-section--hero img { object-position: 74% 50% !important; } } /* ------------------------------------------------------------ 3i) Die neue Hero-Unterzeile Die Überschrift lautete: „Deine Hütte, Almhütte, Chalet oder Ferienwohnung in Österreich" – auf dem Handy drei Zeilen und eher eine Stichwortliste als eine Ansprache. Jetzt: „Deine Hütte in Österreich" als Überschrift, die Unterkunftsarten wandern in eine Unterzeile darunter. Die Suchbegriffe bleiben also auf der Seite, nur nicht mehr in der Überschrift. ------------------------------------------------------------ */ /* Spezifität: kacheln-overrides.css hat `body.home .swiper-content .text p` (0,3,2) mit !important. Eine kürzere Auswahl verliert dagegen, auch mit !important – deshalb hier bewusst .text p.uh-hero-sub (0,4,2). */ body.home .uh-section--hero .swiper-content .text p.uh-hero-sub { font-style: normal !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 18px !important; line-height: 1.55 !important; max-width: 62ch; /* Sorgt dafür, dass die zwei Zeilen ähnlich lang werden, statt einer langen und einer kurzen. Browser ohne Unterstützung ignorieren die Zeile einfach. */ text-wrap: balance; margin: 0.6em auto 1.5em !important; opacity: .95; } /* Der Kicker über der Überschrift: er soll flüstern, nicht rufen. Vorher 21,6 px fett – fast ein Drittel der Überschrift und damit eine zweite Überschrift. Jetzt 15 px, Halbfett, weite Laufweite: 15 / 69 / 18 ergibt eine ruhige Treppe. */ body.home .uh-section--hero .swiper-content .text p:not([class]) { font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.17em !important; margin-bottom: 0.9em !important; opacity: .92; } @media (max-width: 767px) { body.home .uh-section--hero .swiper-content .text p.uh-hero-sub { font-size: 14px !important; max-width: 34ch; margin-bottom: 1.1em !important; } body.home .uh-section--hero .swiper-content .text p:not([class]) { font-size: 10px !important; letter-spacing: 0.14em !important; margin-bottom: 0.6em !important; } } /* ------------------------------------------------------------ 4) Zwei Flächen im Wechsel – bewusst gesetzt Damit die Sektionen sich voneinander abheben, ohne dass jede eine eigene Farbe braucht: Weiß und Beige im Wechsel. Im Backend pro Artikel unter "CSS-Klasse" das Wort article--tint eintragen – bei jeder zweiten inhaltlichen Sektion. Ohne diese Klassen passiert hier nichts, die Regel wartet also geduldig, bis Schritt 5 dran ist. ------------------------------------------------------------ */ /* !important ist hier nötig, nicht Bequemlichkeit: In kacheln-overrides.css steht `body.home .mod_article { background-color: transparent !important }`. Ohne Gegengewicht bleibt jede Fläche weiß – erst daran gemerkt, als die Klassen gesetzt waren und trotzdem nichts passierte. Nebenbei: Die Klasse `article--tint` gibt es im Theme schon (`background: var(--article-tint-background)`). Wir erfinden also keine neue Konvention, sondern reaktivieren eine. */ body.home .article--tint { background-color: var(--uh-surface) !important; } /* Alte Zufalls-Hervorhebungen neutralisieren */ body.home .article--highlight:not(.article--tint) { background-color: transparent; } /* ------------------------------------------------------------ 5) Weniger Lärm im Detail ------------------------------------------------------------ */ /* Nur EIN Button pro Sektion gehört betont – Zweit-CTAs werden zur stillen Textzeile */ body.home .uh-section .btn + .btn, body.home .uh-dyn .cta ~ .cta { background: transparent; color: var(--uh-green); /* NICHT #6b8532 – das sind nur 4,18 auf Weiß */ border: none; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ 6) Mobil: gleicher Takt, engere Bühne ------------------------------------------------------------ */ @media (max-width: 767px) { :root { --uh-sec-pad: 44px; } body.home #main .uh-section h2 + p { margin-bottom: 1.6em; } body.home #main .mod_article > h2, body.home #main .uh-section h2 { max-width: none; } } /* ============================================================ 9) Ein Takt für das Handy ------------------------------------------------------------ GEMESSEN am 28.07.2026 auf der Startseite: Die Sektionen standen mit sechs verschiedenen Innenabständen untereinander – 72, 104, 44, 20, 4 und 0 px. Auf dem großen Bildschirm fällt das kaum auf, auf dem Handy schon: Beim Scrollen wirkt jede Sektion anders groß, und das liest sich als Unruhe, obwohl die Inhalte ruhig sind. Deshalb hier EIN Takt für alles unter 768 px: 40 px oben und unten. Die drei begründeten Ausnahmen bleiben – Hero und Servus-Karte (die absichtlich überlappen) und die Finder-Gruppe, die als ein Block gelesen werden soll. Zur Spezifität: Die Grundregel unten trägt zwei :not() und kommt damit auf (1,5,1). Die Ausnahmen brauchen mehr, sonst verlieren sie – deshalb die zusätzlichen :not(). ============================================================ */ @media (max-width: 767px) { body.home #main .mod_article.uh-section:not(.uh-section--hero):not(.uh-section--service) { padding-top: 40px !important; padding-bottom: 40px !important; } /* Die Finder-Gruppe: eine Frage, vier Zeilen, ein Block. Hier sind enge Abstände Absicht, nicht Zufall. */ body.home #main .mod_article.uh-section.uh-section--topics:not(.uh-section--hero):not(.uh-section--service) { padding-bottom: 14px !important; } body.home #main .mod_article.uh-section.uh-section--seasons:not(.uh-section--hero):not(.uh-section--service), body.home #main .mod_article.uh-section.uh-section--worlds:not(.uh-section--hero):not(.uh-section--service) { padding-top: 2px !important; padding-bottom: 14px !important; } body.home #main .mod_article.uh-section.uh-section--regions:not(.uh-section--hero):not(.uh-section--service) { padding-top: 2px !important; padding-bottom: 40px !important; } /* Hof-Block: zwei Artikel, eine Bühne */ body.home #main .mod_article.uh-section.uh-section--direct:not(.uh-section--hero):not(.uh-section--service) { padding-top: 2px !important; } /* Platz für die gezeichnete Bergkette am unteren Rand */ body.home #main .mod_article.uh-section.uh-section--sustainability:not(.uh-section--hero):not(.uh-section--service) { padding-bottom: 96px !important; } } /* ============================================================ 10) Hero – Bildausschnitt und Schriftfarbe, zweiter Anlauf ------------------------------------------------------------ Der Ausschnitt rückt weiter nach rechts: 88 % statt 74 %. Damit steht die Hütte auf dem Handy im Bild, nicht am Rand. Die Schrift wird von reinem Weiß auf ein warmes Creme umgestellt. Reines Weiß auf einem Sommerfoto wirkt hart und technisch; das Creme ist dasselbe, das auch die Karten und die Servus-Fläche tragen – die Seite bleibt damit in einer Familie. Der Kontrast bleibt praktisch gleich (Creme ist nur rund 4 % dunkler als Weiß). ============================================================ */ @media (max-width: 767px) { body.home .uh-section--hero .swiper-slide img, body.home .uh-section--hero img { object-position: 88% 50% !important; } } body.home .uh-section--hero .swiper-content .text p, body.home .uh-section--hero .swiper-content .text p span, body.home .uh-section--hero .swiper-content .text p.uh-hero-sub, body.home #main .uh-section--hero h1, body.home .uh-section--hero .swiper-content p[class*="heading"] { color: #f7f3e8 !important; } /* ============================================================ 11) Handy: Menü, Hero-Text, Wisch-Hinweis ============================================================ */ /* ------------------------------------------------------------ 11a) Die Hauptnavigation auf schmalen Geräten GEMESSEN: Die Menüpunkte stehen in 21 px. Auf 369 px Breite passt „Unterkünfte · Urlaubsthemen · Regionen · Urlaubswissen" damit nicht in eine Zeile – der letzte Punkt wird abgeschnitten. ERSTER VERSUCH ging daneben: Ich hatte `#wrapper nav a` geschrieben. Die Leiste liegt aber nicht in #wrapper, sondern in `nav.mod_customnav.uh-leadnav` weiter oben im Dokument. Jetzt über die Klasse, die sie wirklich trägt. Lora hat keinen schmalen Schnitt. Was bleibt: kleinere Größe und engere Laufweite. ------------------------------------------------------------ */ @media (max-width: 900px) { .uh-leadnav a, nav.mod_customnav a, nav.mod_navigation a, .uh-navrow a { font-size: 16px !important; letter-spacing: 0 !important; } } @media (max-width: 480px) { .uh-leadnav a, nav.mod_customnav a, nav.mod_navigation a, .uh-navrow a { font-size: 15px !important; } } /* ------------------------------------------------------------ 11b) Der Hero-Text rückt nach oben ------------------------------------------------------------ */ @media (max-width: 767px) { body.home .uh-section--hero .swiper-content { bottom: 30vh !important; padding-top: 0 !important; } } /* ------------------------------------------------------------ 11c) „Hier kann man wischen" GEMESSEN: Nur EIN Bereich der Startseite ist wirklich verschiebbar – die Gästestimmen (Inhaltsbreite 4111 px bei 1781 px Fenster). Alle anderen Kachelblöcke sind Raster und brechen um; dort wäre ein Wisch-Hinweis eine Lüge. ------------------------------------------------------------ */ #main [class*="swiper-button-next"], #main [class*="swiper-button-prev"] { background-color: var(--uh-surface) !important; color: var(--uh-karte-titel) !important; border: 1px solid var(--uh-line); width: 46px !important; height: 46px !important; border-radius: 50%; box-shadow: 0 2px 10px rgba(30, 34, 24, .14); transition: background-color .2s ease; } #main [class*="swiper-button-next"]:hover, #main [class*="swiper-button-prev"]:hover { background-color: #fff !important; } #main [class*="swiper-button-next"]::after, #main [class*="swiper-button-prev"]::after { font-size: 17px !important; font-weight: 700; color: var(--uh-karte-titel) !important; } @media (max-width: 900px) { #main .mod_recommendationlist::after { content: "‹ wischen ›"; display: block; text-align: center; margin-top: 14px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--uh-text-soft); opacity: .8; } } /* ------------------------------------------------------------ 11d) Ein echtes Hochformat für das Handy EINSCHRÄNKUNG, bewusst in Kauf genommen: Das Handy lädt beide Dateien. Sauber gelöst wird das erst mit der ``-Auszeichnung im Template. ------------------------------------------------------------ */ @media (max-width: 767px) { body.home .uh-section--hero .swiper-slide { background-image: url("/files/urlaubshuetten/startseitenbilder-hero/sommer-hero-hoch.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; } body.home .uh-section--hero .swiper-slide img { visibility: hidden !important; } } /* ============================================================ 12) Hero-Lesbarkeit, zweiter Anlauf Der Verlauf über 74 % der Höhe bis 0,52 reichte auf dem Handy nicht: Der Kicker steht in 10 px auf hellem Himmel, die Unterzeile in 14 px auf heller Wiese. Zwei Hebel statt einem, beide im Bild – nicht an der Schrift (ein Textschatten ist ausdrücklich unerwünscht): 1. Der Verlauf reicht jetzt über die volle Höhe und ist am Fuß kräftiger (0,68 statt 0,52), oben bleibt er ganz durchsichtig – der Himmel bleibt Himmel. 2. Eine weiche Vignette hinter dem Textblock. Sie dunkelt nur die Mitte ab, wo die Schrift steht, und läuft nach außen aus. Das ist der Unterschied zwischen „lesbar" und „grauer Schleier über allem". ============================================================ */ body.home .uh-section--hero .swiper-slide::after { height: 100% !important; background: radial-gradient(ellipse 90% 55% at 50% 74%, rgba(30, 34, 24, .34) 0%, rgba(30, 34, 24, 0) 72%), linear-gradient(to top, rgba(30, 34, 24, .68) 0%, rgba(30, 34, 24, .38) 55%, rgba(30, 34, 24, 0) 88%) !important; } /* ============================================================ 13) Wappen an die Stelle des Hüttenzeichens Das Hüttenzeichen wiederholte sich auf jeder Kachel der Seite – zehnmal dasselbe Bildzeichen sagt beim zehnten Mal nichts mehr. Bei den Regionen steht dort jetzt das Wappen: dieselbe Position, aber jedes Mal eine andere Information. Damit ein feines Wappen auf jedem Foto lesbar bleibt – Schnee, Herbstlaub, Seeblau –, sitzt es auf einem cremefarbenen Plättchen. Ohne das würde es auf hellen Bildern verschwinden; genau davor hatte Kimi gewarnt, als er das Wappen ursprünglich NICHT aufs Foto legen wollte. ============================================================ */ /* Das Hüttenzeichen verschwindet – überall. */ #main .tile .small > i, #main .tile .content i, #main .uh-qp-label > i { display: none !important; } /* Das Wappen nimmt seinen Platz ein: obere linke Ecke des Fotos. Bezugspunkt ist die Kachel selbst, weil .content, .title und .small weiter oben auf `position: static` gezwungen werden. */ #main .tile .uh-wappen { position: absolute !important; top: 10px; left: 10px; z-index: 3; height: 30px; width: 32px; object-fit: contain; padding: 4px 5px; background: rgba(247, 243, 232, .93); border-radius: 8px; box-shadow: 0 1px 5px rgba(30, 34, 24, .25); pointer-events: none; } @media (max-width: 767px) { #main .tile .uh-wappen { height: 26px; width: 28px; top: 8px; left: 8px; } } /* ============================================================ 14) Urlaubsthemen: der rechte Bildausschnitt Die neuen Titelbilder sind 3:2 breit, die Kacheln zeigen 4:3 – es wird also seitlich beschnitten. Bei den meisten dieser Bilder liegt links dunkler Wald und rechts der helle, offene Teil: Wiese, Tal, Himmel. Der rechte Ausschnitt ist der freundlichere und auf dem Handy der einzige, der die Kachel nicht wie ein Stück Dunkelheit aussehen lässt. ============================================================ */ /* Der Ausschnitt steckt jetzt IM Bild (4:3 vom rechten Rand gerechnet), nicht mehr in der Darstellung. Deshalb hier wieder mittig – sonst würde zweimal beschnitten. */ #main .uh-qp-tile img { object-position: center !important; } /* ============================================================ 15) Der Kopfbereich klappt beim Scrollen zusammen GEMESSEN: Der Kopf ist 166 px hoch und bleibt stehen – .navbar-outer (100 px: Logo, Lupe, Merkliste, dazu die Knöpfe Hüttenfinder und Vermieter) plus das grüne Menüband (66 px). Auf einem 673 px hohen Handy-Fenster ist das ein Viertel des Bildschirms, dauerhaft. Das Theme setzt beim Scrollen bereits `body.scrolled` – diese Klasse war schon da, sie wurde nur nicht genutzt. Sobald gescrollt wird, schrumpft die obere Zeile: Das Logo wird kleiner, die beiden farbigen Knöpfe verschwinden. Sie fehlen nicht – der Hüttenfinder sitzt auf dem Handy ohnehin als roter Balken am unteren Bildrand, und „Vermieter" ist Zweitpublikum. Vor dem Scrollen bleibt alles, wie es ist: Wer oben ankommt, sieht den vollen Kopf. ============================================================ */ @media (max-width: 900px) { header .navbar-outer { transition: height .25s ease, padding .25s ease; } body.scrolled header .navbar-outer { height: 58px !important; min-height: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; overflow: hidden; } body.scrolled header .navbar-outer img, body.scrolled header .navbar-outer .logo img { max-height: 42px !important; width: auto !important; } /* Die zwei farbigen Knöpfe treten beim Scrollen zurück */ body.scrolled header .navbar-outer a[href*="huettenfinder"], body.scrolled header .navbar-outer a[href*="vermieter"], body.scrolled header .navbar-outer [class*="btn--vermieter"], body.scrolled header .navbar-outer [class*="huettenfinder"] { display: none !important; } /* Das grüne Band wird flacher */ body.scrolled header .mod_customnav.uh-leadnav { padding-top: 2px !important; padding-bottom: 2px !important; } } /* ============================================================ 16) Das Menüband kleiner Auf 348 px Breite reichten 15 px immer noch nicht – „Urlaubswissen" wurde weiterhin abgeschnitten. Die Leiste trägt außerdem 66 px Höhe, mehr als eine Navigationszeile braucht. ============================================================ */ @media (max-width: 900px) { .uh-leadnav, nav.mod_customnav { padding-top: 6px !important; padding-bottom: 6px !important; } .uh-leadnav a, nav.mod_customnav a, nav.mod_navigation a, .uh-navrow a { font-size: 15px !important; letter-spacing: 0 !important; padding-left: 8px !important; padding-right: 8px !important; } } @media (max-width: 480px) { .uh-leadnav a, nav.mod_customnav a, nav.mod_navigation a, .uh-navrow a { font-size: 13.5px !important; padding-left: 6px !important; padding-right: 6px !important; } } /* ============================================================ 17) Nachhaltigkeit: kompakter GEMESSEN: 856 px hoch – nach den Erlebnissen (1377 px) die zweitgrößte Sektion, dabei besteht sie im Kern aus acht kurzen Aufzählungszeilen. Der Platz geht für Zeilenabstand und Innenabstände drauf, nicht für Inhalt. Auf breiten Bildschirmen laufen die acht Punkte jetzt in zwei Spalten – das halbiert die Höhe, ohne dass ein einziges Wort wegfällt. Auf dem Handy bleibt es einspaltig, dort wären zwei Spalten unlesbar. ============================================================ */ body.home .uh-section--sustainability ul { margin-top: 0.6em; margin-bottom: 0.6em; } body.home .uh-section--sustainability li { line-height: 1.45 !important; margin-bottom: 0.35em !important; } @media (min-width: 768px) { body.home .uh-section--sustainability ul { columns: 2; column-gap: 40px; } body.home .uh-section--sustainability li { break-inside: avoid; } } body.home #main .mod_article.uh-section.uh-section--sustainability h2 + p { margin-bottom: 1.2em !important; } /* ------------------------------------------------------------ 17b) Die vier Nachhaltigkeitskarten GEMESSEN, was die 278 px Kartenhöhe ausmacht: Symbol 47 px (38 px Schriftgröße) Titel 52 px (20 px, zwei Zeilen) Unterzeile 109 px (15,6 px, vier Zeilen) Innenabstand 26/22 px Das Symbol ist der größte Einzelposten für den geringsten Inhalt. Es wird kleiner, die Innenabstände rücken zusammen, die Unterzeile bekommt einen engeren Zeilenabstand. Kein Wort fällt weg. ------------------------------------------------------------ */ #main .uh-eco-card { padding: 16px 16px 16px !important; gap: 5px !important; } #main .uh-eco-card__icon { font-size: 26px !important; line-height: 1.1 !important; } #main .uh-eco-card strong { line-height: 1.25 !important; } /* KORREKTUR: 0,82rem war ein Eigentor – die Wurzelgröße liegt bei 20 px, also wären das 16,4 px gewesen und damit MEHR als die 15,6 px vorher. Jetzt in festen Pixeln. */ #main .uh-eco-card__sub { font-size: 14px !important; line-height: 1.4 !important; } /* Das Symbol trägt eine eigene Zeilenhöhe aus dem Theme – 47 px für ein 26-px-Zeichen. Fest begrenzen. */ #main .uh-eco-card__icon { height: 30px !important; min-height: 0 !important; overflow: hidden; } body.home #main .mod_article.uh-section.uh-section--sustainability { padding-top: 56px !important; } /* ============================================================ 18) Das Menü bekommt seine schmale Schrift zurück Lora ist eine Serifenschrift mit breiten Buchstaben – für eine Navigationszeile mit vier langen deutschen Wörtern auf 348 px Breite ist sie die falsche Wahl. Genau deshalb stand dort ursprünglich eine schmale Schrift. GEMESSEN: „Unterkünfte Urlaubsthemen Regionen Urlaubswissen" in 20 px ist in Lora 507 px breit, in Barlow Semi Condensed 418 px – **17 Prozent kürzer**, ohne dass die Schrift kleiner wird. Barlow Semi Condensed ist im Theme bereits als @font-face deklariert und wird geladen (Schnitte 400 und 600). Es kommt also keine einzige neue Datei dazu. Das gilt NUR für die Navigationsleiste. Überschriften, Fließtext und Kacheln bleiben Lora – die Marke ändert sich nicht, nur das Werkzeug an der einen Stelle, an der es nicht passte. ============================================================ */ /* SPEZIFITÄT: In typografie.css steht eine lange Selektorliste, die unter anderem `#header a` enthält – also (1,0,1) mit !important. Eine Klassenauswahl verliert dagegen. Deshalb hier ebenfalls über die ID des Kopfbereichs. */ #header .uh-leadnav a, #header nav.mod_customnav a, #header .uh-navrow a, body #header nav a, #nav_layer a, .uh-leadnav a, nav.mod_customnav a, .uh-navrow a { font-family: "Barlow Semi Condensed", "Barlow", Lora, sans-serif !important; /* Nicht fett: Barlow Semi Condensed ist von sich aus schon kompakt; im Fettschnitt laufen die schmalen Buchstaben auf dem Handy wieder zu. 500 hält die Zeile leicht und trotzdem gut lesbar. */ font-weight: 500 !important; font-style: normal !important; letter-spacing: 0.01em !important; } /* Mit der schmalen Schrift darf die Größe wieder wachsen – lesbarer als 13,5 px Lora und trotzdem kürzer. */ @media (max-width: 900px) { #header .uh-leadnav a, #header nav.mod_customnav a, .uh-leadnav a, nav.mod_customnav a, .uh-navrow a { font-size: 17px !important; padding-left: 7px !important; padding-right: 7px !important; } } @media (max-width: 480px) { #header .uh-leadnav a, #header nav.mod_customnav a, .uh-leadnav a, nav.mod_customnav a, .uh-navrow a { font-size: 16px !important; padding-left: 5px !important; padding-right: 5px !important; } } /* Das grüne Band wird flacher: 66 px sind für eine Zeile zu viel, sobald der Kopf ohnehin knapp ist. */ @media (max-width: 900px) { .uh-leadnav, nav.mod_customnav { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 0 !important; } .uh-leadnav ul.level_1 > li > a, .uh-navrow > li > a { padding-top: 8px !important; padding-bottom: 8px !important; } } /* ============================================================ 19) Logo, Lupe und Merkliste kommen sich nicht mehr ins Gehege GEMESSEN: Lupe und Merk-Herz sind absolut positioniert – `left: 205px` und `left: 255px`. Auf dem Desktop endet das Logo bei 198 px, das passt knapp. Auf dem Handy skaliert das Logo nicht mit, die beiden festen Werte aber auch nicht: Die Lupe legt sich dann über das Wort „HÜTTEN". Auf schmalen Geräten wird das Logo begrenzt und die beiden Symbole rücken auf Abstand. ============================================================ */ @media (max-width: 900px) { .navbar-outer .logo { max-width: 148px !important; } .navbar-outer .logo img, .navbar-outer .logo svg { max-width: 100% !important; height: auto !important; max-height: 46px !important; } .navbar-outer .search.toggle-search-module { left: 162px !important; } .navbar-outer .uh-merk--top { left: 208px !important; } } @media (max-width: 480px) { .navbar-outer .logo { max-width: 132px !important; } .navbar-outer .logo img { max-height: 40px !important; } .navbar-outer .search.toggle-search-module { left: 144px !important; } .navbar-outer .uh-merk--top { left: 186px !important; } } /* ============================================================ 20) Die Hero-Karten der Themen- und Ratgeberseiten BEFUND: Die Karte trägt zwei Hintergrundebenen – einen Verlauf VON LINKS und darunter das Foto: background: linear-gradient(90deg, rgba(25,34,24,.76) 0%, rgba(25,34,24,.50) 42%, rgba(25,34,24,.08) 75%), url(../../files/urlaubshuetten/...) center/cover; Auf dem Desktop ist das richtig: Links steht die Schrift, rechts bleibt das Foto hell. Auf dem Handy ist die Karte aber nur noch so breit wie der Textbereich – der Verlauf liegt damit über dem GANZEN Bild, und man sieht fast nur Dunkelheit. Der Trick: Die erste Ebene (der Verlauf) wird über `background-size: 0 0` unsichtbar gemacht, ohne dass wir die Bild-URL kennen müssen – die steckt pro Seite in einem eigenen