/* ============================================================ detailseite-ruhe.css · urlaubshuetten.com Stand 31.07.2026 · Durchgang 1 Gebaut gegen die LIVE gemessene Struktur der Breitberg Alm (/unterkunft/tirol/zillertal/breitberg-alm), nicht gegen vermutete Klassennamen. Alle Selektoren sind im Browser geprüft. Reihenfolge: NACH typografie-2026.css laden, also als letztes. RÜCKWEG: Datei aus den drei Layouts nehmen. Sonst nichts. Gemessene Ausgangslage: body #top.no-slider.scrolled.uh-leinen Wurzelgröße 20 px (Desktop), 14 px unter 550 px H1 .accommodation__headline, 1.8rem, Hintergrund var(--color-brand) = #6B8532 Akkordeon A div.accommodation-detail__amenities.uh-collap h2.uh-collap__head + span.uh-collap__chev zu = Klasse .uh-collap--closed am DIV Akkordeon B .accommodation-detail__location-description > details > summary, darin ▼ Knopf mobil button.uh-book-fab, fixed, top:122px, z:950 Leiste unten .mobile-sticky (im DOM vorhanden, per CSS aus) ============================================================ */ /* ------------------------------------------------------------ 1 · Der schwebende Knopf verlässt den Lesebereich GEMESSEN: top:122px ist auf dem Handy genau die erste Textzeile unter dem festen Kopf. In allen 61 Bildern des Videos verdeckt der Knopf dort Text. Die Seite hat bereits eine Leiste am unteren Rand - .mobile-sticky mit "Anfragen | Hüttenfinder". Sie wird von zwei Regeln abgeschaltet: kacheln-overrides.css @media(max-width:999px) .mobile-sticky{display:none!important} Theme #top:has(#childFrame:not(.huettenslider)) .mobile-sticky{display:none!important} Die zweite hat zwei IDs, deshalb steht unten #top#top - eine wiederholte ID ist gültiges CSS und hebt das Gewicht auf 2 IDs. ------------------------------------------------------------ */ @media (max-width: 999px){ button.uh-book-fab{ display: none !important; } #top#top .mobile-sticky{ display: flex !important; transform: none !important; /* nicht auf die .show-Klasse warten */ position: fixed; left: 0; right: 0; bottom: 0; z-index: 102; background: #2e4423; box-shadow: none; padding-bottom: env(safe-area-inset-bottom, 0px); /* Der rote Nach-oben-Knopf wird vom Theme per JavaScript unten rechts eingehaengt und liegt sonst auf "Anfragen". Er hat keine eigene CSS-Regel, die man verschieben koennte - deshalb wird ihm hier einfach Platz freigehalten. */ padding-right: 66px !important; } #top#top .mobile-sticky > *{ border-top: 1px solid rgba(247,243,232,.22); padding: 13px .25em; min-height: 48px; /* sicheres Tippziel */ font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; } #top#top .mobile-sticky{ flex-direction: row-reverse !important; } /* .kontakt traegt den Text "Anfragen", .Buchen den Text "Huettenfinder" - die Klassennamen sind im Theme vertauscht. Die rote Betonung gehoert auf die Anfrage, nicht auf den Finder. */ #top#top .mobile-sticky .kontakt{ background:#c8102e !important; border-color:#c8102e !important; color:#f7f3e8 !important; } #top#top .mobile-sticky .Buchen{ background: transparent !important; border-color: transparent !important; color: #f7f3e8 !important; font-weight: 500 !important; } /* Truendo sitzt unten links und würde auf der Leiste liegen */ #truendo_fab{ bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important; } } /* Falls du den zweiten Knopf (Hüttenfinder) in der Leiste nicht willst, reicht diese Zeile - sie steht bewusst aus: #top#top .mobile-sticky .Buchen{ display:none !important; } */ /* ------------------------------------------------------------ 2 · Der Hüttenname bekommt eine eigene Form GEMESSEN: .accommodation__headline trägt background:var(--color-brand) aus files_layout_css_override.scss.css - dieselbe Fläche wie die acht Klappleisten. Der Name sieht deshalb aus wie ein neunter Balken. ------------------------------------------------------------ */ /* SPEZIFITÄTSFALLE, live gefunden: In kacheln-overrides.css steht h1.accommodation__headline{color:#fff!important} - das ist (0,1,1). Eine Regel auf .accommodation__headline (0,1,0) verliert dagegen, auch mit !important. Die Kette läuft deshalb über #main. */ #main h1.accommodation__headline{ background: none !important; color: #2e4423 !important; padding: 0 !important; text-wrap: balance; } @media (max-width: 860px){ #main h1.accommodation__headline{ font-size: 30px !important; line-height: 1.2 !important; margin-bottom: 14px !important; } } /* ------------------------------------------------------------ 3 · EIN Akkordeon für beide Techniken Zwei Bauarten stehen nebeneinander: zwei Contao-Module mit span.uh-collap__chev und sechs native details mit einem ▼ als Textzeichen in einem float:right-Span. Der Trick: Das vorhandene ▼-Span wird nicht ersetzt, sondern umgebaut - Schriftgröße 0 versteckt das Zeichen, ein Winkel aus zwei Rändern tritt an seine Stelle. Kein JavaScript, kein zweites Icon, kein Eingriff ins Markup. ------------------------------------------------------------ */ /* gemeinsame Fläche und Icon-Reserve */ .accommodation-detail__amenities > .uh-collap__head, .accommodation-detail__map > .uh-collap__head, .accommodation-detail__location-description > details > summary{ position: relative; display: block; padding: 13px 46px 13px 14px !important; margin: 0; cursor: pointer; list-style: none; border-radius: 0; } .accommodation-detail__location-description > details > summary::-webkit-details-marker{ display: none; } /* das Zeichen wird zum Winkel. WICHTIG: jede Eigenschaft mit !important. In kacheln-overrides.css steht eine dritte Regel fuer .uh-collap__chev, die das Element mit width:auto!important; height:auto!important; border:0!important; transform:none!important auf 0 x 0 Pixel setzt. Ohne !important haben die Contao-Akkordeons gar kein Icon. Live gemessen 31.07.2026. */ .accommodation-detail__location-description > details > summary > span, .uh-collap > .uh-collap__head > .uh-collap__chev{ float: none !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 10px !important; height: 10px !important; margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; flex: none !important; border: 0 !important; border-right: 2px solid currentColor !important; border-bottom: 2px solid currentColor !important; transform: translateY(-70%) rotate(45deg) !important; transform-box: border-box !important; transition: transform .22s ease !important; pointer-events: none !important; } /* geoeffnet: Winkel nach oben */ .accommodation-detail__location-description > details[open] > summary > span, .uh-collap:not(.uh-collap--closed) > .uh-collap__head > .uh-collap__chev{ transform: translateY(-25%) rotate(-135deg) !important; } @media (prefers-reduced-motion: reduce){ .accommodation-detail__location-description > details > summary > span, .uh-collap > .uh-collap__head > .uh-collap__chev{ transition: none; } } /* Titel: aufrecht, größer - siehe typografie-2026.css für die Familie */ @media (max-width: 860px){ .accommodation-detail__amenities > .uh-collap__head, .accommodation-detail__map > .uh-collap__head, .accommodation-detail__location-description > details > summary{ font-size: 20px !important; line-height: 1.3 !important; font-style: normal !important; font-weight: 600 !important; } } /* ------------------------------------------------------------ 4 · Aus acht gleichen Balken werden drei Gruppen Das ist der stärkste Hebel und er kostet eine Regel je Gruppe. Die Beschriftungen entstehen als ::before, es wird nichts ins Markup geschrieben. Reihenfolge live geprüft: .accommodation-detail__amenities Ausstattungsmerkmale ┐ Die Hütte .accommodation-detail__map Lage ┘ details 1 Freizeit & Umgebung ┐ Die Umgebung details 2 Erlebnisse & Saison ┘ details 3 Sanft anreisen ┐ details 4 Versorgung in der Nähe │ Das Praktische details 5 Gut zu wissen │ details 6 Buchung & Preis ┘ ------------------------------------------------------------ */ .uh-gruppenlabel, .accommodation-detail__amenities::before, .accommodation-detail__location-description > details:nth-of-type(1)::before, .accommodation-detail__location-description > details:nth-of-type(3)::before{ display: block; font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: #2e4423; margin: 0 0 12px; pointer-events: none; } .accommodation-detail__amenities::before{ content: "Die Unterkunft"; } .accommodation-detail__location-description > details:nth-of-type(1)::before{ content: "Die Umgebung"; } .accommodation-detail__location-description > details:nth-of-type(3)::before{ content: "Das Praktische"; } /* der Takt: eng innerhalb einer Gruppe, weit dazwischen */ .accommodation-detail__amenities, .accommodation-detail__map, .accommodation-detail__location-description > details{ margin-bottom: 5px !important; } .accommodation-detail__map{ margin-bottom: 34px !important; } /* Ende Gruppe 1 */ .accommodation-detail__location-description > details:nth-of-type(2){ margin-bottom: 34px !important; } .accommodation-detail__location-description > details:nth-of-type(1), .accommodation-detail__location-description > details:nth-of-type(3){ margin-top: 0 !important; } .accommodation-detail__amenities{ margin-top: 26px !important; } /* ------------------------------------------------------------ 5 · Sanftes Scrollen und keine Sprünge GEMESSEN: html trägt scroll-behavior:auto. Jeder Ankersprung ist ein harter Schnitt, und der feste Kopf (167 px ungescrollt, rund 100 px gescrollt) verdeckt danach genau die Überschrift, zu der gesprungen wurde. ------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior: smooth; } } .accommodation-detail__amenities, .accommodation-detail__map, .accommodation-detail__location-description > details, .accommodation-detail__description-title, .accommodation-detail__distances-title, .accommodation-detail__booking-box{ scroll-margin-top: 120px; } @media (max-width: 860px){ .accommodation-detail__amenities, .accommodation-detail__map, .accommodation-detail__location-description > details, .accommodation-detail__description-title, .accommodation-detail__distances-title, .accommodation-detail__booking-box{ scroll-margin-top: 104px; } } /* Weiches Aufklappen, wo der Browser es kann. Läuft in Chrome und Edge, also auf den meisten Android-Geräten. Auf iOS-Safari und Firefox passiert nichts - das ist das heutige Verhalten, also kein Rückschritt. */ @media (prefers-reduced-motion: no-preference){ :root{ interpolate-size: allow-keywords; } .accommodation-detail__location-description > details::details-content{ block-size: 0; overflow: hidden; transition: block-size .28s ease, content-visibility .28s allow-discrete; } .accommodation-detail__location-description > details[open]::details-content{ block-size: auto; } } /* ------------------------------------------------------------ 6 · Lesbarkeit im Text GEMESSEN: Fließtext steht auf dem Desktop bei 22,5 px mit Zeilenhöhe 1,7 - das ist gut. Auf dem Handy fällt er auf 17 px, weil die Wurzelgröße unter 550 px auf 14 px springt. ------------------------------------------------------------ */ @media (max-width: 860px){ .accommodation-detail__description p, .accommodation-detail__description li, .accommodation-detail__location-description p, .accommodation-detail__location-description li{ font-size: 18px !important; line-height: 1.62 !important; color: #2b2721 !important; } .accommodation-detail__description-title, .accommodation-detail__distances-title{ font-size: 24px !important; line-height: 1.25 !important; } } /* Die drei Anreise-Karten haben auf dem Desktop nur rund 24 Zeichen pro Zeile. Lesbar sind 45 bis 75. Zwei Spalten statt drei bringen rund 40 Zeichen. */ @media (min-width: 861px){ .accommodation-detail__location-description .uh-anreise, .accommodation-detail__location-description [class*="karten"], .accommodation-detail__location-description .grid-3{ grid-template-columns: 1fr 1fr !important; } } /* ------------------------------------------------------------ 6b · Der Steckbrief-Kasten oben in der Objektbeschreibung Er ist im Inhalt mit Inline-Stilen gebaut (Hintergrund #F7F4F0, gruene Linie links). Darin steht fast alles fett: vier Haekchen- Zeilen in Gelbgruen 700, der Huettenname 700, die Ortszeile 700 - dazu drei verschiedene Graustufen. Auf 369 px bricht jede Zeile um und der Kasten wird zu einer Wand aus Fett. Gegen Inline-Stile hilft nur !important. ------------------------------------------------------------ */ /* Haekchen-Zeile: Markengruen statt Gelbgruen, ruhigeres Gewicht */ .accommodation-detail__description-content > div:first-of-type > div:first-of-type span, .accommodation-detail__description-content > div:first-of-type > div:first-of-type strong{ font-weight: 500 !important; color: #4f6b2a !important; line-height: 1.5 !important; } /* Die Ortszeile ist Beiwerk, kein Titel */ .accommodation-detail__description-content > div:first-of-type > div:last-of-type, .accommodation-detail__description-content > div:first-of-type > div:last-of-type strong{ font-weight: 400 !important; color: #6b6455 !important; line-height: 1.5 !important; } /* Die kursive Kurzinfo dunkler - #666 auf #F7F4F0 ist grenzwertig */ .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:nth-of-type(2){ color: #5c5648 !important; } @media (max-width: 860px){ .accommodation-detail__description-content > div:first-of-type{ padding: 14px !important; } .accommodation-detail__description-content > div:first-of-type > div:first-of-type span, .accommodation-detail__description-content > div:first-of-type > div:first-of-type strong{ font-size: 17px !important; } .accommodation-detail__description-content > div:first-of-type > p:first-of-type{ font-size: 20px !important; line-height: 1.25 !important; } .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:nth-of-type(2){ font-size: 16px !important; line-height: 1.45 !important; } .accommodation-detail__description-content > div:first-of-type > div:last-of-type, .accommodation-detail__description-content > div:first-of-type > div:last-of-type strong{ font-size: 14.5px !important; } } /* ------------------------------------------------------------ 7 · Zentrierter Fließtext wird linksbündig Zentrierter Text hat keine feste linke Kante. Bei zwei Zeilen ist das ein Gestaltungsmittel, bei zehn Zeilen muss das Auge in jeder Zeile den Anfang neu suchen. ------------------------------------------------------------ */ @media (max-width: 860px){ .mod_article.article--highlight p, .mod_article.mountains-top p, #main .ce_text p{ text-align: left !important; } /* Überschriften dürfen mittig bleiben */ #main .ce_text h2, #main .ce_text h3{ text-align: inherit !important; } } /* ============================================================ 9 · Ruhe, zweiter Durchgang - 31.07.2026 GERECHNET fuer 369 px Bildschirm: abzueglich Innenabstaende bleiben 329 px Textbreite. In Fira Sans ergibt das 18 px -> 40 Zeichen je Zeile 17 px -> 42 16 px -> 45 <- Untergrenze des ruhigen Lesens Deshalb faellt der Fliesstext mobil von 18 auf 16 px. Das ist KEIN Rueckschritt: Fira hat eine um 5 Prozent groessere x-Hoehe als Lora, 16 px Fira wirken so gross wie 17 px Lora - nur mit doppelt so dicken duennsten Strichen. ============================================================ */ /* "Das macht die Huette besonders" ist ein

mit Inline-Fett - also eine Ueberschrift, die nicht wie eine aussieht. Sie bekommt die Schrift aller Ueberschriften. */ #main .uh-hl-title{ font-family: 'Lora', Georgia, serif !important; font-style: italic !important; font-weight: 600 !important; } @media (max-width: 860px){ /* Die Treppe, enger gestellt - die Abstufung bleibt, nur der Massstab passt jetzt zum Bildschirm. */ #main h1.accommodation__headline{ font-size: 26px !important; line-height: 1.2 !important; } .accommodation-detail__description-title, .accommodation-detail__distances-title{ font-size: 22px !important; line-height: 1.25 !important; } .accommodation-detail__amenities::before, .accommodation-detail__location-description > details:nth-of-type(1)::before, .accommodation-detail__location-description > details:nth-of-type(3)::before{ font-size: 20px !important; margin: 0 0 9px !important; } #main .uh-hl-title{ font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 8px !important; } .accommodation-detail__amenities > .uh-collap__head, .accommodation-detail__map > .uh-collap__head, .accommodation-detail__location-description > details > summary{ font-size: 18px !important; padding: 12px 44px 12px 13px !important; } .accommodation-detail__description p, .accommodation-detail__description li, .accommodation-detail__location-description p, .accommodation-detail__location-description li{ font-size: 16px !important; line-height: 1.6 !important; } /* Der Steckbrief-Kasten: weniger Innenabstand, kleinere Stufen. Zwoelf Zeilen stehen hier, bevor der eigentliche Text beginnt - jede eingesparte Zeile ist Ruhe. */ .accommodation-detail__description-content > div:first-of-type{ padding: 12px 13px !important; } .accommodation-detail__description-content > div:first-of-type > div:first-of-type span, .accommodation-detail__description-content > div:first-of-type > div:first-of-type strong{ font-size: 15px !important; line-height: 1.45 !important; } .accommodation-detail__description-content > div:first-of-type > p:first-of-type{ font-size: 17px !important; line-height: 1.25 !important; } .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:nth-of-type(2){ font-size: 14.5px !important; line-height: 1.4 !important; } .accommodation-detail__description-content > div:first-of-type > div:last-of-type, .accommodation-detail__description-content > div:first-of-type > div:last-of-type strong{ font-size: 13px !important; line-height: 1.45 !important; } } /* Das Truendo-Zeichen sitzt unten LINKS auf der Leiste und laesst sich von aussen nicht verschieben - es traegt bottom:16px mit hoechster Prioritaet. Also bekommt auch die linke Seite eine Reserve, so wie rechts fuer den Nach-oben-Knopf. */ @media (max-width: 999px){ #top#top .mobile-sticky{ padding-left: 52px !important; } #top#top .mobile-sticky > *{ font-size: 15px !important; } } /* ============================================================ 10 · Der Steckbrief sagt jede Sache genau einmal - 31.07.2026 GEZAEHLT auf der Muehlenhuette, wie oft dieselbe Angabe im ersten Bildschirmdrittel steht: Privatteich mit Ruderboot 4x (Haekchen, Ortszeile, Fliesstext, "besonders") Wasserrad 3x (Haekchen, Fliesstext, "besonders") Hund willkommen 2x bis 5 Personen 2x 760 m 2x Ort / Region 3x (Ortszeile, Kurzinfo, Fliesstext) Huettenname 2x (H1 und Kastentitel) Der Gast liest also dieselben fuenf Tatsachen vier Mal, bevor die Beschreibung ueberhaupt anfaengt. Das ist die eigentliche Unruhe - nicht die Schriftgroesse. Zwei Zeilen verschwinden deshalb. Beide sind reine Wiederholung, es geht keine einzige Information verloren: 1. Der Kastentitel "Muehlenhuette am Privatteich" - die H1 direkt darueber sagt dasselbe, nur vollstaendiger. 2. Die Ortszeile "Oesterreich - Niederoesterreich - Mostviertel - Pielachtal - Schwarzenbach" - das steht in den Brotkrumen, in der Adresse, in der Kurzinfo und im Fliesstext. Auf dem Handy sind das vier Zeilen fuer null neue Angaben. Uebrig bleibt: vier Haekchen und eine Kurzinfo. Sechs Zeilen statt zwoelf. ============================================================ */ /* WICHTIG: nur im ERSTEN Beschreibungsblock. Der zweite enthaelt den Kasten "Das macht die Huette besonders", dessen Ueberschrift ebenfalls ein

an erster Stelle ist - die darf nicht verschwinden. Deshalb :first-of-type am Block und zusaetzlich :not(.uh-hl-title). */ .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:first-of-type:not(.uh-hl-title), .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > div:last-of-type{ display: none !important; } /* Die Kurzinfo traegt jetzt allein die Fakten und darf dafuer etwas kraeftiger stehen - sie ist kein Nachsatz mehr. */ .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:nth-of-type(2){ font-style: normal !important; color: #4a453a !important; margin-top: 8px !important; } @media (max-width: 860px){ .accommodation-detail__description:first-of-type .accommodation-detail__description-content > div:first-of-type > p:nth-of-type(2){ font-size: 15px !important; line-height: 1.5 !important; } } /* ============================================================ 11 · Kurzsteckbrief unter der Galerie (dynamisch pro Objekt) Das Skript im Layout-Kopf baut nur