/* ============================================================ 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 */ } /* ------------------------------------------------------------ 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; } /* ------------------------------------------------------------ 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; } }