/* Theme Name: Die Talstation Theme URI: https://die-talstation.com Description: Child-Theme zu „Total" für die-talstation.com. Eigene Anpassungen gehören hierher, damit sie eine Theme-Aktualisierung überstehen. Author: remino Template: Total Version: 1.71.0 */ /* ========================================================================== Schriften: Cormorant Garamond und Inter, selbst gehostet -------------------------------------------------------------------------- Auftrag: beide Familien lokal, nicht von fonts.googleapis.com. Das ist nicht bloß Geschmack — ein eingebundenes Google-Stylesheet überträgt die IP-Adresse jedes Besuchers an Google, und genau dafür hat das LG München I (3 O 17493/20) eine Domäne verurteilt. Die Dateien liegen deshalb unter `fonts/` in diesem Child-Theme; die Seite ruft nach außen nichts ab. Was heruntergeladen wurde, steht in `fonts/LIESMICH.md`, neu holen lässt es sich mit `deploy/schriften-holen.py`. Drei Dinge zu den Deklarationen unten: 1. BEIDE sind Variable Fonts. Eine Datei trägt den ganzen Bereich `font-weight: 300 700` bzw. `100 900` — deshalb stehen hier 8 Blöcke statt der sonst üblichen zwei Dutzend. Zwischenwerte wie 550 sind damit erlaubt und kosten nichts. 2. Die Adressen sind RELATIV (`fonts/…`). Sie lösen gegen den Ort der style.css auf, also gegen das Child-Theme — nicht gegen die aufgerufene Seite. Deshalb bleiben sie richtig, egal welche Seite lädt. 3. `unicode-range` sorgt dafür, dass latin-ext nur geholt wird, wenn ein Zeichen daraus wirklich vorkommt. Eine deutsche Seite lädt es nie: ä ö ü ß liegen alle im latin-Bereich. Praktisch fällt also nur an, was auch benutzt wird — nicht die 422 kB des ganzen Verzeichnisses. `font-display: swap` heißt: zuerst die Systemschrift, dann umschalten. Der Text ist damit sofort lesbar; die Alternative wäre ein unsichtbarer Titel im Hero, bis die Schrift da ist. ========================================================================== */ /* Cormorant Garamond latin, normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond latin-ext, normal */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond latin, italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond latin-ext, italic */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('fonts/cormorant-garamond-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter latin, normal */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter latin-ext, normal */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Inter latin, italic */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Inter latin-ext, italic */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('fonts/inter-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Die beiden Familien unter einem Namen, damit ein späterer Wechsel an EINER Stelle geschieht und nicht in dreißig Regeln. Benutzt werden sie noch nirgends — das Aussehen der Seite ändert sich durch diese Datei nicht. */ :root { --dts-schrift-titel: 'Cormorant Garamond', 'Iowan Old Style', Garamond, 'Times New Roman', serif; --dts-schrift-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ========================================================================== Die Schriften in Gebrauch -------------------------------------------------------------------------- Auftrag: „Überschriften und Hero-Titel in Cormorant Garamond, Fließtext und Menü in Inter." Das sind zwei Zeilen und nicht dreißig Regeln, weil Total 6.8 seine Typografie vollständig über eigene CSS-Variablen führt: body { font-family: var(--wpex-body-font-family, var(--wpex-font-sans)); } h1…h6, .entry-title, .page-header-title, .theme-heading, .wpex-heading { font-family: var(--wpex-heading-font-family); } `--wpex-heading-font-family` ist im Theme gar nicht belegt — deshalb erbten die Überschriften bisher vom Körper. Beide Variablen hier zu setzen genügt; alles Weitere erbt: * Das Kopfmenü und das Mobilmenü setzen keine eigene Familie. * Knöpfe stehen auf `--wpex-btn-font-family: inherit`. * Der Hero-Titel ist ein

und damit von der Überschriften-Regel erfasst; Slogan und Buchungsknopf erben den Fließtext. Es bleibt deshalb auch beim Theme-Update richtig, statt an Totals Selektoren zu kleben, die sich ändern dürfen. ACHTUNG: Nicht die Variablen --wpex-font-sans / --wpex-font-serif überschreiben. Die sind Totals Werkzeugkasten, auf den auch die Hilfsklassen `.wpex-font-sans` und `.wpex-font-serif` zeigen — wer sie umbiegt, ändert mehr als die Seitenschrift. ========================================================================== */ :root { --wpex-body-font-family: var(--dts-schrift-text); --wpex-heading-font-family: var(--dts-schrift-titel); } /* -------------------------------------------------------------------------- Ausgleich: Cormorant liest sich kleiner, als sie gesetzt ist -------------------------------------------------------------------------- Eine Garamond hat eine kleine x-Höhe, Inter eine ungewöhnlich große. Die beiden liegen an entgegengesetzten Enden, und das schlägt auf die Rangfolge durch. Gemessen im Browser: Cormorant Garamond x-Höhe 0,386 Versalhöhe 0,625 Inter x-Höhe 0,546 Versalhöhe 0,728 system-ui (vorher) x-Höhe 0,508 Versalhöhe 0,705 Auf der Seite hieß das: eine h2 mit 28 px hatte dieselbe x-Höhe wie ein Absatz mit 19,2 px — 10,8 gegen 10,5 px. Nominell 46 % größer, optisch gleich groß. Auf dem Telefon wirkte die Überschrift sogar kleiner als der Text darunter. Faktor 1,25 vom Nutzer gewählt. Voller Ausgleich wären 1,3 bis 1,4 gewesen; das hätte die alte Rangfolge exakt wiederhergestellt, aber der Seite deutlich mehr Gewicht gegeben. Gerechnet wird auf Totals eigene Größenskala (--wpex-text-*), nicht mit festen Werten. Damit bleiben die Stufen und ihre Umbruchpunkte erhalten, und ein Theme-Update, das die Skala ändert, wirkt hier mit. NICHT die Variablen --wpex-text-* selbst umschreiben: an denen hängen auch Totals Hilfsklassen (.wpex-text-2xl und Geschwister), Knöpfe und Formularfelder. Der Faktor gehört auf die Überschriften-Selektoren. -------------------------------------------------------------------------- */ h1, .wpex-h1 { font-size: calc(var(--wpex-text-3xl) * 1.25); } h2, .wpex-h2 { font-size: calc(var(--wpex-text-2xl) * 1.25); } h3, .wpex-h3 { font-size: calc(var(--wpex-text-xl) * 1.25); } h4, .wpex-h4 { font-size: calc(var(--wpex-text-lg) * 1.25); } h5, .wpex-h5 { font-size: calc(var(--wpex-text-md, 1em) * 1.25); } h6, .wpex-h6 { font-size: 1.25em; } /* ========================================================================== Seitengrund: warmes Weiss statt Reinweiss -------------------------------------------------------------------------- Auftrag: „Ändere die Hintergrundfarbe in ein warmes weiss: #F4F1EA." Die Bestandsaufnahme war erfreulich kurz: von body, #wrap, #main, #content-wrap, #content, #site-header und #footer trägt **einzig der body** eine Farbe. Alles andere ist durchsichtig. Eine Variable genügt also für die ganze Fläche. body { background-color: var(--wpex-bg-color); } <- Total 6.8 Zwei Flächen liegen allerdings AUF diesem Grund und waren auf Reinweiss gesetzt, damit sie mit ihm verschmelzen. Bleiben sie weiss, sind sie plötzlich sichtbare kalte Flecken: 1. Die klebende Kopfzeile beim Scrollen. 2. Das Flyout-Menü (und auf dem Telefon die Menütafel). Das Flyout erledigt `--wpex-surface-1`: Total zieht den Hintergrund des Untermenüs daraus (`var(--wpex-dropmenu-bg, var(--wpex-surface-1))`), und `#sidr-main` ebenso. `surface-1` ist in Totals Farbsystem die Grundfläche und stand im Hellmodus auf Weiss — genau der Wert, der hier warm werden soll. Die Kopfzeile braucht eine eigene Regel, und zwar aus einem Grund, den man im Theme nicht findet: sie steht im „Zusätzliches CSS" des Customizers (wp_custom_css_post 163) hart auf Weiss — #site-header-inner { background-color: #fff; } WordPress gibt dieses CSS nach den Theme-Stylesheets aus, ein gleich starker Selektor von hier verliert also. Zwei IDs schlagen eine; deshalb unten `#site-header #site-header-inner`. ACHTUNG: Die Regel weiter oben, die die Kopfzeile über dem Hero durchsichtig macht, ist stärker (drei Klassen, zwei IDs) und gewinnt weiterhin — der Hero bleibt oben also unverdeckt. Gefärbt wird nur die festgeklebte Kopfzeile beim Scrollen. Das ist geprüft, nicht angenommen. ========================================================================== */ :root { --wpex-bg-color: var(--dts-grund); --wpex-surface-1: var(--dts-grund); } #site-header #site-header-inner { background-color: var(--dts-grund); } /* -------------------------------------------------------------------------- Folge des warmen Grundes: die Linkfarbe musste nach -------------------------------------------------------------------------- #F4F1EA ist dunkler als Reinweiss (relative Leuchtdichte 0,88 statt 1,00). Jeder Kontrastwert auf der Seite sinkt dadurch um rund ein Zehntel. Bei fast allem ist das belanglos — der Fliesstext steht bei 8,91 statt 10,05 — aber ein Wert stand vorher schon auf der Kippe: Textlinks #1a73e8 auf Weiss 4,51 auf #F4F1EA 3,99 4,5 ist die Grenze der WCAG für normalen Text. Der warme Grund hat die Verweise also unter das Mindestmass gedrückt. Das ist keine Geschmacksfrage, sondern ein Mangel — und er war von der Farbänderung verursacht, nicht vorgefunden. #1a73e8 ist Totals **Standard**-Akzent (`:root` im Eltern-Stylesheet), keine gewählte Markenfarbe. #1668CF ist derselbe Blauton eine Spur tiefer: #1668CF auf #F4F1EA 4,75 auf Weiss 5,36 Der Unterschied ist mit blossem Auge kaum zu sehen, der Wert liegt mit Reserve über der Grenze. Die Variable wirkt auch auf den aktiven Menüpunkt und auf Akzentflächen — überall zum Besseren, weil dunkler. -------------------------------------------------------------------------- */ :root { --wpex-accent: #1668CF; } /* ========================================================================== „Buchen" als Knopf im Kopfmenü -------------------------------------------------------------------------- Der Menüpunkt selbst steht in der Datenbank (Menü 2, Punkt #440, oberste Ebene, Ziel bookingandmore, neues Fenster). Er trägt die CSS-Klasse `menu-button` — die ist NICHT von uns erfunden, sondern Totals eigene: .main-navigation .menu-button > a > .link-inner { color: var(--wpex-btn-color, var(--wpex-on-accent)); background-color: var(--wpex-btn-bg, var(--wpex-accent)); padding: var(--wpex-menu-btn-padding, var(--wpex-btn-padding)); border-radius: var(--wpex-btn-border-radius); … } Form, Abstände und Rundung kommen damit vom Theme; hier stehen nur die Farben. Die Klasse lässt sich im Backend unter Design → Menüs an jedem Punkt setzen (Feld „CSS-Klassen", notfalls über „Ansicht anpassen" einblenden) — ein zweiter Knopf braucht also kein CSS mehr. Wichtig: die Farbe gehört an den MENÜPUNKT, nicht an `:root`. Die Variablen `--wpex-btn-*` gelten sonst für jeden Knopf der Seite, auch für die Formularknöpfe im Kontaktformular. Das Grün ist gegen Weiss bei 7,95 gemessen und gegen den warmen Grund bei 7,05 — beides weit über der WCAG-Grenze von 4,5. Der hellere Ton unter dem Zeiger liegt bei 5,81. ========================================================================== */ .main-navigation .menu-button { --wpex-btn-bg: var(--dts-gruen); --wpex-btn-color: #ffffff; --wpex-hover-btn-bg: var(--dts-gruen-hell); --wpex-hover-btn-color: #ffffff; --wpex-active-btn-bg: var(--dts-gruen-hell); --wpex-active-btn-color: #ffffff; } /* Über dem Hero tragen die Menüpunkte einen Schlagschatten, damit weisse Schrift auf hellem Schnee lesbar bleibt (siehe weiter oben). Auf dem grünen Knopf ist er überflüssig und macht die Schrift nur unscharf — dieselbe Beobachtung wie seinerzeit im Flyout-Menü. */ .main-navigation .menu-button > a > .link-inner { text-shadow: none; } /* Dasselbe im Mobilmenü. Totals Klasse `menu-button` greift dort nicht: die Menütafel wird von sidr erzeugt, und sidr stellt JEDER übernommenen Klasse `sidr-class-` voran — aus `menu-button` wird `sidr-class-menu-button`. Die Form muss deshalb hier noch einmal stehen; die Farben kommen aus denselben Variablen. `.link-inner` statt `a`, weil das in der Tafel über die volle Breite läuft — ein randloser grüner Balken wäre daraus geworden. */ #sidr-main .sidr-class-menu-button .sidr-class-link-inner { background-color: var(--dts-gruen); color: #ffffff; padding: 9px 18px; border-radius: 4px; } #sidr-main .sidr-class-menu-button a:hover .sidr-class-link-inner, #sidr-main .sidr-class-menu-button a:focus .sidr-class-link-inner { background-color: var(--dts-gruen-hell); color: #ffffff; } /* ========================================================================== Vorstellungsblock [dts_hausblock] -------------------------------------------------------------------------- Zwei Spalten: links Augenzeile, Überschrift, zwei Absätze und ein Knopf — rechts drei Merkmale mit Icon, durch feine Senkrechte getrennt. Die Überschrift trägt eine eigene Größe und nicht die der h2-Stufe: im Entwurf ist sie die auffälligste Zeile der Seite und deutlich größer als eine gewöhnliche Zwischenüberschrift. Der Faktor 1,25 aus dem Ausgleich weiter oben steckt in dieser Zahl bereits drin. Die Icons liegen als Dateien in `icons/` und werden vom Shortcode INLINE eingesetzt, damit `currentColor` greift. ========================================================================== */ .dts-hausblock { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; padding: 18px 0 6px; } .dts-hausblock__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dts-auge); } .dts-hausblock__titel { margin: 0 0 22px; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; font-weight: 500; } .dts-hausblock__text p { margin: 0 0 16px; max-width: 46ch; } .dts-hausblock__cta { margin: 26px 0 0; } /* Gefüllt und grün wie `.dts-band__knopf` weiter unten auf derselben Seite — Wunsch des Nutzers (Abschnitt 88). Beide Knöpfe der Startseite tragen damit dieselbe Form; die Geometrie war schon vorher gleich, nur die Farbe nicht. */ .dts-hausblock__knopf { display: inline-flex; align-items: center; gap: 18px; padding: 17px 26px; background-color: var(--dts-gruen); border: 1px solid var(--dts-gruen); font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .dts-hausblock__knopf:hover, .dts-hausblock__knopf:focus { background-color: var(--dts-gruen-hell); border-color: var(--dts-gruen-hell); color: #ffffff; text-decoration: none; } .dts-hausblock__pfeil { font-size: 1.25em; line-height: 1; transition: transform 0.2s ease; } .dts-hausblock__knopf:hover .dts-hausblock__pfeil { transform: translateX(4px); } .dts-hausblock__merkmale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } .dts-hausblock__merkmal { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; text-align: center; } .dts-hausblock__merkmal + .dts-hausblock__merkmal { border-left: 1px solid var(--dts-linie); } .dts-hausblock__icon svg { display: block; width: 52px; height: 52px; margin-bottom: 10px; color: #3a3a3a; } .dts-hausblock__name { font-family: var(--dts-schrift-text); font-size: 15px; font-weight: 600; line-height: 1.3; } .dts-hausblock__bei { font-family: var(--dts-schrift-text); font-size: 14px; line-height: 1.4; color: var(--dts-grau); } /* Unterhalb von Totals Umbruchpunkt untereinander. Drei Spalten auf 375 px liessen „Mitten im Kleinwalsertal" auf drei Zeilen brechen; die Senkrechten werden dann zu Waagerechten. */ @media only screen and (max-width: 959px) { .dts-hausblock { grid-template-columns: minmax(0, 1fr); gap: 30px; } .dts-hausblock__text p { max-width: none; } } @media only screen and (max-width: 600px) { .dts-hausblock__merkmale { grid-template-columns: minmax(0, 1fr); } .dts-hausblock__merkmal + .dts-hausblock__merkmal { border-left: 0; border-top: 1px solid var(--dts-linie); padding-top: 20px; } } /* ========================================================================== Abstand zwischen den eigenen Bloecken -------------------------------------------------------------------------- Auftrag: der senkrechte Abstand zwischen Band, Panorama und Karten soll dem waagerechten Abstand zwischen den beiden Karten entsprechen — also 28 px. Vorher war er ungleich: 40 px zwischen Band und Panorama, 48 px zwischen Panorama und Karten. Die 40 px kommen von WPBakery, nicht von hier: `.vc_column-inner` traegt ab Werk `margin-bottom: 40px`. Die zusaetzlichen 8 px waren ein `margin: 8px 0` an `.dts-karten` und `.dts-kacheln` aus der Zeit, als die Bloecke einzeln entstanden — es addierte sich zu den 40 und fiel nur im direkten Vergleich auf. Deshalb beides zugleich: die 8 px an den Bausteinen weg, und die 40 px der Spalte in genau diesen vier Zeilen auf `--dts-blockabstand` gesetzt. Der Zugriff geht ueber die eigenen `el_class`-Namen der Zeilen und beruehrt WPBakerys Vorgabe auf allen anderen Seiten nicht. NICHT angefasst: der Abstand ueber dem Band (zum Hausblock) und der unter den Kacheln (zur Ausstattungs-Leiste). Beide stehen weiter auf WPBakerys 40 px — sie trennen die Bilderbloecke von etwas anderem, nicht voneinander. ========================================================================== */ .dts-band-row > .wpb_column > .vc_column-inner, .dts-panorama-row > .wpb_column > .vc_column-inner, .dts-karten-row > .wpb_column > .vc_column-inner { margin-bottom: var(--dts-blockabstand); } /* ========================================================================== Breites Band [dts_band]: Foto und Textfeld nebeneinander -------------------------------------------------------------------------- Die Zeile wird NICHT gestreckt [vc_row el_class="dts-band-row"] Das Band bleibt damit in der Inhaltsspalte — 1280 px, höchstens 90 % des Fensters — und steht bündig unter dem Text darüber. Der erste Anlauf hatte es randlos über das ganze Fenster laufen lassen; auf Wunsch des Nutzers sitzt es jetzt in der Bodybreite. Wer es doch randlos will, setzt `full_width="stretch_row_content_no_spaces"` an die Zeile — am CSS hier ändert sich dafür nichts. Der Text sitzt auf dem warmen Grund und bildet die ruhige Hälfte. Das Foto füllt seine Hälfte über `object-fit: cover`. Die Höhe gibt das Textfeld vor, nicht das Bild — sonst bestimmte das Seitenverhältnis des jeweiligen Fotos, wie hoch das Band wird, und zwei Bänder untereinander wären verschieden hoch. `min-height` setzt die Untergrenze. Der Knopf ist hier GEFÜLLT, anders als der im Vorstellungsblock darüber. Das ist kein Versehen: im Entwurf des Nutzers stehen beide Formen nebeneinander — der offene Rahmen führt weiter ins Haus, der gefüllte in einen bestimmten Raum. ========================================================================== */ .dts-band { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); align-items: stretch; min-height: 420px; background-color: var(--dts-grund); } .dts-band--rechts .dts-band__bild { order: 2; } .dts-band__bild { position: relative; overflow: hidden; } .dts-band__foto { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .dts-band__text { /* Bewusst abgesetzt, nicht zufällig: neben dem grossen hellen Foto liest sich der Seitengrund ohnehin dunkler als weiter oben (Simultankontrast). Statt dagegen anzukämpfen, bekommt die Fläche einen eigenen Ton, damit sie als gestaltetes Feld erkennbar ist. Gemessen gegen den Grund: 1,16. Alle Textfarben darauf nachgerechnet — Fliesstext 7,65, Überschrift 12,11, Augenzeile 4,56, Knopffläche 6,05. */ background-color: var(--dts-flaeche); display: flex; flex-direction: column; justify-content: center; /* Das Polster wuchs mit 4,5vw schneller als die Textspalte selbst und fraß ihr die Breite weg; bei rund 1355 px Fensterbreite rutschte der Punkt von „Zusammenkommen." auf eine eigene Zeile. Jetzt 3,4vw. */ padding: 48px clamp(24px, 3.4vw, 56px); } .dts-band__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dts-auge); } .dts-band__titel { margin: 0 0 18px; font-size: clamp(30px, 2.9vw, 44px); line-height: 1.1; font-weight: 500; /* Total setzt `word-break: break-word`. Passt eine Überschrift aus einem einzigen Wort nicht in die Spalte, bricht der Browser deshalb an der letzten möglichen Stelle — beim Wort „Zusammenkommen." war das vor dem Punkt, der dann allein auf der nächsten Zeile stand. `hyphens: auto` gibt ihm vorher eine sinnvolle Trennstelle („Zusammen-kommen."); die Seite liefert `lang="de-DE"`, die Trennregeln kennt der Browser also. */ hyphens: auto; } .dts-band__satz { margin: 0; max-width: 34ch; } .dts-band__cta { margin: 28px 0 0; } .dts-band__knopf { display: inline-flex; align-items: center; gap: 18px; padding: 17px 26px; background-color: var(--dts-gruen); border: 1px solid var(--dts-gruen); font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #ffffff; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } .dts-band__knopf:hover, .dts-band__knopf:focus { background-color: var(--dts-gruen-hell); border-color: var(--dts-gruen-hell); color: #ffffff; text-decoration: none; } .dts-band__pfeil { font-size: 1.25em; line-height: 1; transition: transform 0.2s ease; } .dts-band__knopf:hover .dts-band__pfeil { transform: translateX(4px); } /* Unter Totals Umbruchpunkt untereinander: erst das Foto, dann der Text. `order` wird dabei zurückgenommen, sonst stünde bei `seite="rechts"` der Text oben und das Foto darunter — auf dem Telefon liest sich das Bild zuerst besser. */ @media only screen and (max-width: 959px) { .dts-band { grid-template-columns: minmax(0, 1fr); min-height: 0; } .dts-band--rechts .dts-band__bild { order: 0; } .dts-band__foto { height: auto; aspect-ratio: 3 / 2; } .dts-band__text { padding: 34px clamp(20px, 6vw, 48px) 42px; } .dts-band__satz { max-width: none; } } /* ========================================================================== Panorama [dts_panorama]: Schrift IM Bild -------------------------------------------------------------------------- Die Höhe macht nicht das Bild, sondern `aspect-ratio` — deshalb muss die Bilddatei nicht beschnitten werden. `object-fit: cover` schneidet beim Anzeigen zu, und das Original bleibt für andere Verwendungen ganz. Die Abdunklung ist hier keine Geschmacksfrage. Weisse Schrift auf einem Winterbild steht sonst auf Schnee und wird unlesbar; gemessen wird das unten im Änderungsprotokoll. Drei Anläufe, jeder gemessen: 0. zu strenge Messlatte: die Überschrift wurde gegen 4,5 geprüft. Bei 49 px gilt aber 3,0 (grosse Schrift). Die Abdunklung war dadurch von Anfang an stärker als nötig — der Himmel verschwand. 1. Verläufe über die volle Breite, flächig — sicher, aber trüb 2. dieselben Verläufe schmal und senkrecht — hell, aber die Überschrift fiel auf 1,60, weil sie nach dem Höherlegen des Ausschnitts auf hellem Schnee steht 3. ZWEI ELLIPSEN, je um eine Textfläche gelegt Der dritte Weg trägt: die Abdunklung folgt der Form des Textes statt der Form des Bildes. Wo keine Buchstaben stehen — Himmel, Kirche, Hänge, Vordergrund — bleibt das Bild unberührt. Die Ellipsen sind auf die gemessenen Textkästen gesetzt, nicht geschätzt: Überschrift Kasten 27,8 x 27,5 %, Mitte bei 17,7 / 26,5 % Ellipse 26 x 28 % um 17 / 27 % Wortreihe Kasten 12,2 x 43,1 %, Mitte bei 90,1 / 50 % Ellipse 13 x 44 % um 90 / 50 % Der Radius ist rund doppelt so gross wie der halbe Kasten — so liegt der kräftige Kern über der Schrift und der Rand läuft weich aus, bevor er Bildinhalt erreicht. ========================================================================== */ .dts-panorama { position: relative; aspect-ratio: 100 / 30; overflow: hidden; background-color: #1d2733; } .dts-panorama__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Nicht mittig: der Kirchturm sitzt im oberen Drittel der Vorlage und wurde bei 60 % oben angeschnitten. 30 % zeigt ihn frei und schneidet dafür von der Strasse im Vordergrund ab. */ object-position: center 30%; } .dts-panorama::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 26% 28% at 17% 27%, rgba(12, 20, 30, 0.84) 0%, rgba(12, 20, 30, 0.64) 44%, rgba(12, 20, 30, 0.22) 72%, rgba(12, 20, 30, 0.00) 92%), radial-gradient(ellipse 13% 44% at 90% 50%, rgba(12, 20, 30, 0.84) 0%, rgba(12, 20, 30, 0.64) 44%, rgba(12, 20, 30, 0.22) 72%, rgba(12, 20, 30, 0.00) 92%); } .dts-panorama__inhalt { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3.4vw, 56px); color: #ffffff; } .dts-panorama__titel { align-self: flex-start; margin: 0; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.08; font-weight: 400; color: #ffffff; /* Der Schatten zählt bei der WCAG-Messung nicht mit, hilft aber dem Auge an den Rändern der Buchstaben. Er darf deshalb kräftiger sein als die Abdunklung — er kostet kein Bildlicht. */ text-shadow: 0 2px 14px rgba(0, 0, 0, 0.60), 0 1px 3px rgba(0, 0, 0, 0.45); } .dts-panorama__worte { margin: 0; padding: 0; list-style: none; text-align: right; font-family: var(--dts-schrift-text); font-size: clamp(13px, 1.15vw, 17px); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } /* Auf dem Telefon wird das Band hochkant, sonst bliebe für die Schrift kein Platz. Die Wortreihe rutscht unter die Überschrift und bleibt linksbündig — rechtsbündig sähe auf schmalem Schirm verloren aus. */ @media only screen and (max-width: 767px) { .dts-panorama { aspect-ratio: 4 / 5; } .dts-panorama__inhalt { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; } .dts-panorama__worte { text-align: left; line-height: 1.9; } .dts-panorama::after { background: linear-gradient(to bottom, rgba(12, 20, 30, 0.60) 0%, rgba(12, 20, 30, 0.42) 45%, rgba(12, 20, 30, 0.30) 100%); } } /* ========================================================================== Karten [dts_karten] / [dts_karte] -------------------------------------------------------------------------- Foto oben, darunter Augenzeile, Überschrift, Text und eine grüne Marke mit der Kernzahl. Die Karten stehen auf derselben abgesetzten Fläche wie das Textfeld im Band (Abschnitt 59) — sie gehören sichtbar zusammen. Die Marke ist der einzige Ort, an dem das Grün als Fläche vorkommt, ohne ein Knopf zu sein. Sie ist deshalb bewusst nicht anklickbar gestaltet: keine Rundung wie beim Knopf, kein Pfeil, kein Zeigerwechsel. Das Raster steht fest auf ZWEI Spalten. Der erste Anlauf nahm `repeat(auto-fit, minmax(320px, 1fr))` — das legte bei 1280 px Breite drei Spalten an, und die beiden Karten bekamen je 408 statt 626 px. `auto-fit` soll leere Spalten einziehen, tat es hier aber nicht. Für ein Paar ist die feste Angabe ohnehin das ehrlichere Mittel. ========================================================================== */ .dts-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Vier Zeilen: Foto, Augenzeile, Überschrift, Fuss. Die Karten teilen sie sich über `subgrid` — dadurch stehen Text und Marke der einen Karte auf derselben Höhe wie die der anderen, auch wenn die Überschrift links zwei und rechts eine Zeile braucht. Ohne das richtete sich jede Karte nur nach sich selbst aus. */ grid-template-rows: auto auto auto auto; /* Nur SPALTENabstand. Ein `gap` gälte auch für die Zeilen — und weil die Karten sich diese Zeilen teilen, landete er INNERHALB der Karten: zwischen Augenzeile und Überschrift standen dann 10 + 28 = 38 px statt der gewollten 10. Gemessen und nachgerechnet, nicht geraten. */ column-gap: var(--dts-blockabstand); row-gap: 0; margin: 0; } .dts-karte { display: grid; grid-row: span 4; grid-template-rows: subgrid; background-color: var(--dts-flaeche); } .dts-karte__foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .dts-karte__inhalt { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: clamp(22px, 2.4vw, 34px); } .dts-karte__auge { /* 14 px wie im Band [dts_band] — die beiden Bausteine sollen denselben Rhythmus haben. */ margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dts-auge); } .dts-karte__titel { margin: 0 0 18px; align-self: start; font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12; font-weight: 400; hyphens: auto; } /* Text und Marke nebeneinander, solange Platz ist. Die Marke behält ihre Breite, der Text gibt nach — sonst zerrisse die Kernzahl. */ .dts-karte__fuss { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: start; gap: 20px; } .dts-karte__satz { flex: 1 1 200px; margin: 0; font-size: 16px; line-height: 1.6; } .dts-karte__marke { flex: 0 0 auto; max-width: 210px; padding: 16px 20px; background-color: var(--dts-gruen); color: #ffffff; } .dts-karte__marke--mitte { text-align: center; } .dts-karte__marke-gross { display: block; font-family: var(--dts-schrift-titel); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; } .dts-karte__marke-klein { display: block; margin-top: 8px; font-family: var(--dts-schrift-text); /* 13 statt 15 px: Inters x-Höhe ist 0,546, die von Cormorant 0,386 (gemessen in Abschnitt 45). Bei gleicher Punktgrösse wirkt Inter also rund ein Drittel grösser — die Kleinschrift käme der Kernzahl zu nahe und die Rangfolge in der Marke ginge verloren. */ font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.88); } /* Auf schmalen Schirmen rutscht die Marke unter den Text; `flex-wrap` erledigt das von selbst, sie soll dann aber die volle Breite bekommen. */ /* Unter Totals Umbruchpunkt stehen die Karten untereinander. Dort ist das Subgrid sinnlos — es gibt nichts auszurichten — und schädlich, weil der Zeilenabstand wieder in die Karten hineinwirkte (14 + 22 = 36 px statt 14). ACHTUNG: Diese Abfrage MUSS hinter den Regeln stehen, die sie aufhebt. Eine Medienabfrage erhöht die Spezifität nicht — bei gleicher Stärke entscheidet die Reihenfolge. Im ersten Anlauf stand sie weiter oben und blieb wirkungslos. */ @media only screen and (max-width: 767px) { .dts-karten { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; /* Untereinander wird aus dem Spaltenabstand ein Zeilenabstand — und damit derselbe Abstand, den auf dem Telefon auch Band, Panorama und Karten untereinander haben. Vorher standen hier 22 px aus der Zeit vor `--dts-blockabstand`. */ row-gap: var(--dts-blockabstand); } .dts-karte, .dts-karte__inhalt { display: flex; flex-direction: column; grid-row: auto; } } @media only screen and (max-width: 520px) { .dts-karte__marke { max-width: none; width: 100%; } } /* ========================================================================== Kacheln [dts_kacheln] / [dts_kachel] -------------------------------------------------------------------------- Kopfzeile: links Augenzeile und Überschrift, rechts ein erklärender Satz. Darunter vier kleine Kacheln — Foto, ein Wort, ein Halbsatz. Die Kacheln haben KEINE eigene Fläche. Sie stehen auf dem Seitengrund, während die Karten darüber auf `--dts-flaeche` sitzen. Das ist der Unterschied zwischen „lies das" und „hier ist noch etwas": die Karten erzählen, die Kacheln zählen auf. ========================================================================== */ .dts-kacheln { margin: 0; } .dts-kacheln__kopf { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; gap: 20px 48px; margin-bottom: 28px; } .dts-kacheln__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dts-auge); } .dts-kacheln__titel { margin: 0; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; font-weight: 400; hyphens: auto; } .dts-kacheln__satz { margin: 0; max-width: 44ch; color: var(--dts-grau); } .dts-kacheln__reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .dts-kachel__foto { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 14px; } .dts-kachel__titel { margin: 0 0 4px; font-family: var(--dts-schrift-text); font-size: 17px; font-weight: 600; line-height: 1.3; } .dts-kachel__satz { margin: 0; font-family: var(--dts-schrift-text); font-size: 15px; line-height: 1.45; color: var(--dts-grau); } /* Vier nebeneinander werden unter 960 px zu zweien, unter 520 px zu einer Spalte. Die Kopfzeile stapelt sich früher, weil der erklärende Satz sonst auf zu schmale Zeilen fiele. */ @media only screen and (max-width: 959px) { .dts-kacheln__kopf { grid-template-columns: minmax(0, 1fr); align-items: start; } .dts-kacheln__reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media only screen and (max-width: 520px) { .dts-kacheln__reihe { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Hero-Slider auf der Startseite -------------------------------------------------------------------------- Das Meiste steckt NICHT hier, sondern in den Shortcode-Parametern der Seite, weil WPBakery und Total dafür eigene Mechanismen mitbringen: [vc_row full_width="stretch_row_content_no_spaces" el_class="dts-hero-row"] [vcex_image_flexslider … img_aspect_ratio="16/9" el_class="dts-hero"] Das Erste streckt die Zeile randlos über die volle Breite, das Zweite gibt allen Bildern dasselbe Seitenverhältnis (die Vorlagen sind gemischt: meist 1536x604, mindestens eines 1536x1152 — ohne einheitliches Verhältnis richtet sich der Slider nach dem höchsten Bild und wird über 1100 px hoch). Hier steht nur, was sich mit Shortcode-Parametern nicht sagen lässt. ========================================================================== */ /* Auf dem Telefon ist 16:9 für einen Hero sehr flach — bei 375 px Breite blieben 211 px Bildhöhe. 3:2 gibt dem Bild wieder Gewicht, ohne dass der Text darunter vom Schirm rutscht. Der Umbruchpunkt ist Totals eigener. */ @media only screen and (max-width: 767px) { .dts-hero .wpex-aspect-16-9 { aspect-ratio: 3 / 2; } } /* ========================================================================== Kopfzeile über dem Hero -------------------------------------------------------------------------- Eingeschaltet wird das NICHT hier, sondern über Totals eigene Einrichtung: die Seitenoptionen `wpex_overlay_header` = 1 und `wpex_overlay_header_style` = white (Post-Meta der Startseite). Total legt die Kopfzeile daraufhin absolut über den Inhalt, macht ihren Hintergrund durchsichtig und setzt das Menü auf Weiß. Beim Scrollen schaltet es von selbst zurück: die Kopfzeile wird fixiert, weiß hinterlegt, und das Menü wieder dunkel (rgb(66,66,66)). Das ist geprüft, nicht angenommen. Was Total NICHT mitbringt, ist die Abdunklung — ohne sie steht weiße Schrift auf hellem Schnee und ist unlesbar. Nur das steht hier. ACHTUNG beim Erweitern: Die Klasse am heißt `has-overlay-header`, die Klasse `overlay-header` sitzt an #site-header. Ein `body.overlay-header` trifft nichts — genau daran ist der erste Anlauf gescheitert. ========================================================================== */ /* ========================================================================== Hero-Inhalt: Titel und Buchungsknopf, Abdunklung über das ganze Bild -------------------------------------------------------------------------- Nach dem Muster der W40-Testkopie. Der Inhalt selbst steht im Seiteninhalt als [vc_column_text el_class="dts-hero__inhalt"], nicht hier. Die Abdunklung liegt bewusst NICHT gleichmäßig über dem Bild — ein flächiger Schleier erschlägt die Fotos. Stattdessen zwei Ebenen: ein weicher dunkler Fleck in der Mitte, damit der Titel lesbar bleibt, und eine Verstärkung an Ober- und Unterkante für Kopfmenü und Bildrand. ========================================================================== */ /* Eine Zahl, eine Stelle. SliderPro schreibt seine Höhen als Inline-Stil, dagegen kommt man nur mit !important an. */ :root { --dts-hero-hoehe: min(83vh, 810px); /* Ein leicht dunkles Grau fuer die Merkmalsleisten. Totals --wpex-text-2 (rgb 66,66,66) wirkte fast schwarz. #666 hat auf Weiss 5,74:1 und bleibt damit ueber den geforderten 4,5 fuer Fliesstext. */ /* Stärke der Abdunklung über dem Hero. Eine Stelle für alle neun Seiten. Auf Wunsch des Nutzers zurückgenommen — auf den Innenraumbildern (Schlafzimmer) wirkte der vorige Stand düster. Vorher: Fleck 0.72/0.50/0.14, Band 0.80/0.56/0.18. */ /* Der Fleck ist ENG statt dunkel: er trägt den Text, statt das ganze Foto zu dämpfen. Vorher 78% x 60% bei 0.72 Mitte — das wirkte auf Innenraumbildern düster. Jetzt kleiner und heller, aber dichter um die Schrift, damit der Kontrast trotzdem hält. */ --dts-fleck-breite: 52%; --dts-fleck-hoehe: 40%; --dts-fleck-mitte: 0.72; --dts-fleck-rand: 0.46; --dts-fleck-aussen: 0.12; --dts-band-oben: 0.74; --dts-band-mitte: 0.52; --dts-band-unten: 0.16; /* Oberer und unterer Saum. Der untere stammt aus der W40-Vorlage, wo er die Slider-Punkte am Bildrand lesbar halten musste. Die gibt es hier nicht (control_nav="false"), er verdunkelte das Foto also ohne Zweck und reichte sichtbar weit herauf. Vorher: oben 0.22, unten 0.32 ab 72%. */ --dts-saum-oben: 0.18; --dts-saum-unten: 0.10; --dts-grund: #F4F1EA; /* warmes Weiss, Seitengrund — siehe unten */ --dts-gruen: #2D5A3D; /* Buchen-Knopf */ --dts-gruen-hell: #3A7050; /* derselbe Knopf unter dem Zeiger */ --dts-flaeche: #E7E0D2; /* abgesetzte Textfläche im Band */ --dts-auge: #6B6256; /* Augenzeilen über den Überschriften */ --dts-grau: #666666; --dts-linie: rgba(0, 0, 0, 0.10); /* Senkrechter Abstand zwischen den eigenen Bloecken. Bewusst derselbe Wert wie der SPALTENabstand der beiden Karten (`.dts-karten`, column-gap) — dadurch ist die Lücke zwischen Winter und Sommer und die Lücke zwischen Band, Panorama und Karten dieselbe, waagerecht wie senkrecht. Wird der eine geändert, gehört der andere mit. */ --dts-blockabstand: 28px; } /* ========================================================================== Grundgroesse der Absaetze -------------------------------------------------------------------------- Diese Zeile stand bis heute im Customizer unter „Zusaetzliches CSS": p { font-size: 120% !important; } Sie stammt aus der Zeit vor dem Child-Theme und hat JEDE Absatzgroesse dieses Stylesheets ueberstimmt — `!important` schlaegt Spezifitaet, egal wie genau der Selektor ist. Gemessen: die Augenzeilen der Startseite waren auf 19,2 px statt der gesetzten 13 px, der Kartentext auf 19,2 px statt 15 px. Das galt fuer alle Bausteine seit Abschnitt 53. Hier steht dieselbe Regel ohne `!important`. Fuer einen gewoehnlichen Absatz aendert sich damit NICHTS — 120 % von 16 px sind weiterhin 19,2 px. Nur die Regeln mit eigener Klasse setzen sich jetzt durch, so wie es die Kaskade vorsieht (`.dts-zahl__wert` ist 0-1-0, `p` ist 0-0-1). Das `.ul_master { font-size: 120% !important }` daneben bleibt unberuehrt: es trifft eine eigene Klasse und steht keinem Baustein im Weg. ========================================================================== */ p { font-size: 120%; } .dts-hero-row .wpb_wrapper { position: relative; } .dts-hero { position: relative; margin-bottom: 0; } .dts-hero .sp-slides-container, .dts-hero .sp-mask, .dts-hero .sp-slides, .dts-hero .sp-slide, .dts-hero .wpex-slider-media { height: var(--dts-hero-hoehe) !important; } .dts-hero .wpex-slider-media img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center; display: block; } /* Abdunklung über die ganze Bildfläche. Seit die Miniaturleiste per control_thumbs="false" abgeschaltet ist, deckt `inset: 0` genau sie ab — vorher musste der Verlauf darüber enden, sonst wären die Miniaturbilder mitverdunkelt worden. Nur wenn im Hero auch Text liegt (`:has(.dts-hero__inhalt)`). Ein Hero ohne Titel — wie auf /ski-in-ski-out/ — braucht keine Abdunklung; sie würde das Foto nur grundlos dämpfen. */ .dts-hero-row:has(.dts-hero__inhalt) .dts-hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient( ellipse var(--dts-fleck-breite) var(--dts-fleck-hoehe) at 50% 46%, rgba(0, 0, 0, var(--dts-fleck-mitte)) 0%, rgba(0, 0, 0, var(--dts-fleck-rand)) 45%, rgba(0, 0, 0, var(--dts-fleck-aussen)) 78%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to bottom, rgba(0, 0, 0, var(--dts-saum-oben)) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, var(--dts-saum-unten)) 100% ); } /* Eigenes Band nur für den Kopfbereich. Der Verlauf oben zielt auf den mittigen Titel und reicht für Menü und Logo nicht aus. */ .has-overlay-header .dts-hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 220px; z-index: 2; pointer-events: none; background: linear-gradient( to bottom, rgba(0, 0, 0, var(--dts-band-oben)) 0%, rgba(0, 0, 0, var(--dts-band-mitte)) 40%, rgba(0, 0, 0, var(--dts-band-unten)) 75%, rgba(0, 0, 0, 0) 100% ); } /* Die Kopfzeile selbst durchsichtig machen. Total macht zwar #site-header durchsichtig, den weißen Grund setzt aber #site-header-inner eine Ebene tiefer (aus den Customizer-Einstellungen). Ohne diese Regel stünden weißes Logo und weißes Menü auf weißem Grund — genau so ist es beim Einbau einmal passiert. Die Abdunklung leistet das Band über dem Hero (::before), nicht diese Regel. Sobald `is-sticky` steht, hinterlegt Total selbst weiß und färbt das Menü dunkel; dann muss der weiße Grund bleiben. */ .wpex-sticky-header-holder:not(.is-sticky) #site-header.overlay-header #site-header-inner { background-color: transparent; } /* Ein weicher Schatten auf Menü und Logo — er zählt in der Kontrastformel nicht mit, hilft aber an den hellen Kanten. */ /* Der Schatten gilt NUR für die oberste Menüebene und NUR, solange die Kopfzeile über dem Bild liegt. Zwei Stellen, an denen er sonst schadet — beide sind dunkle Schrift auf weißem Grund, wo ein schwarzer Schatten die Buchstaben unscharf wirken lässt: 1. das Ausklappmenü (`.sub-menu`) — weißer Kasten, Schrift rgb(66,66,66) 2. die fixierte Kopfzeile beim Scrollen — Total hinterlegt sie weiß und färbt das Menü dunkel Deshalb `> ul > li > a` statt `a` und der `:not(.is-sticky)`-Rahmen. */ .wpex-sticky-header-holder:not(.is-sticky) #site-header.overlay-header #site-navigation > ul > li > a, .wpex-sticky-header-holder:not(.is-sticky) #site-header.overlay-header .mobile-menu-toggle { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55); } .wpex-sticky-header-holder:not(.is-sticky) .overlay-header #site-logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)); } /* Total gibt `main` oben 40px Innenabstand. Unter der Overlay-Kopfzeile schöbe das den Hero um genau diese 40px nach unten und ließe oben einen hellen Streifen stehen. */ .has-overlay-header #main { padding-top: 0; } /* Die Textebene, über dem Bild zentriert */ .dts-hero-row .dts-hero__inhalt { position: absolute; inset: 0 0 auto 0; height: var(--dts-hero-hoehe); z-index: 3; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; color: #fff; /* Der Slider darunter bleibt bedienbar; nur der Knopf fängt Klicks. */ pointer-events: none; } .dts-hero-row .dts-hero__inhalt > .wpb_wrapper { max-width: 900px; } .dts-hero-row .dts-hero__inhalt a { pointer-events: auto; } .dts-hero__titel { margin: 0; /* Faktor 1,25 wie bei den uebrigen Ueberschriften — siehe den Ausgleich oben. Vorher: clamp(34px, 6vw, 68px). */ font-size: clamp(42px, 7.5vw, 85px); line-height: 1.05; font-weight: 700; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 30px rgba(0, 0, 0, 0.35); } /* EINE Groesse fuer alles, was unter einer Hero-Ueberschrift steht. Vorher liefen drei Werte nebeneinander her, gemessen bei 1440 px: Das Haus 22 px (diese Grundregel) sechs Seiten mit `--paar` 16 px (eigene Regel, jetzt entfallen) Startseite (Merkzeile) 12 px Auftrag des Nutzers: „Die Schriftgroesse unter der Headline sollte in allen Herobereichen gleich gross sein." 20 px liegt zwischen den beiden Aeusseren und ist fuer sechs der acht Heros eine Vergroesserung. */ .dts-hero__sub { margin: 10px 0 0; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.55); } .dts-hero__cta { margin: 30px 0 0; } .dts-hero__knopf { display: inline-block; padding: 14px 34px; border: 2px solid #fff; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease; } .dts-hero__knopf:hover, .dts-hero__knopf:focus { background: #fff; color: #262626; } @media (max-width: 959px) { :root { --dts-hero-hoehe: 60vh; } .dts-hero .sp-slides-container, .dts-hero .sp-mask, .dts-hero .sp-slides, .dts-hero .sp-slide, .dts-hero .wpex-slider-media { min-height: 340px; } .dts-hero::after, .dts-hero-row .dts-hero__inhalt { min-height: 340px; } } /* ========================================================================== Eckdaten-Leiste zwischen Hero und Text -------------------------------------------------------------------------- Der Inhalt steht als schlichte Liste im Seiteninhalt; die Icons stehen hier. Warum hier und nicht im Inhalt: Ein SVG direkt im post_content liefe Gefahr, beim Speichern durch WordPress' Filter zu fallen, und wäre im Editor nur ein Klumpen Markup. So bleibt der Text im Backend änderbar, und die Icons liegen dort, wo die Gestaltung hingehört. Die SVGs stammen aus Totals eigenem Satz (themes/Total/assets/icons/list.json) — keine fremde Icon-Bibliothek, kein zusätzlicher Ladevorgang. Eingebunden als `mask-image`, nicht als Hintergrundbild: So nimmt das Icon über `background-color` die Textfarbe an und passt sich einem späteren Rebranding von selbst an. Für die vier Angaben, bei denen das Wort durch ein Icon ersetzt ist („185 qm", „4", „2 Bäder", „ideal für 4 - 8"), steht der Begriff zusätzlich als `screen-reader-text` im Markup — ein Vorlesegerät liest sonst nur „4". ========================================================================== */ .dts-fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 38px; } .dts-fakt { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; line-height: 1.3; color: var(--dts-grau); white-space: nowrap; } .dts-fakt::before { content: ""; flex: none; width: 22px; height: 22px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Fläche — Totals Icon "expand" */ .dts-fakt--flaeche::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M344%200H488c13.3%200%2024%2010.7%2024%2024V168c0%209.7-5.8%2018.5-14.8%2022.2s-19.3%201.7-26.2-5.2l-39-39-87%2087c-9.4%209.4-24.6%209.4-33.9%200l-32-32c-9.4-9.4-9.4-24.6%200-33.9l87-87L327%2041c-6.9-6.9-8.9-17.2-5.2-26.2S334.3%200%20344%200zM168%20512H24c-13.3%200-24-10.7-24-24V344c0-9.7%205.8-18.5%2014.8-22.2s19.3-1.7%2026.2%205.2l39%2039%2087-87c9.4-9.4%2024.6-9.4%2033.9%200l32%2032c9.4%209.4%209.4%2024.6%200%2033.9l-87%2087%2039%2039c6.9%206.9%208.9%2017.2%205.2%2026.2s-12.5%2014.8-22.2%2014.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M344%200H488c13.3%200%2024%2010.7%2024%2024V168c0%209.7-5.8%2018.5-14.8%2022.2s-19.3%201.7-26.2-5.2l-39-39-87%2087c-9.4%209.4-24.6%209.4-33.9%200l-32-32c-9.4-9.4-9.4-24.6%200-33.9l87-87L327%2041c-6.9-6.9-8.9-17.2-5.2-26.2S334.3%200%20344%200zM168%20512H24c-13.3%200-24-10.7-24-24V344c0-9.7%205.8-18.5%2014.8-22.2s19.3-1.7%2026.2%205.2l39%2039%2087-87c9.4-9.4%2024.6-9.4%2033.9%200l32%2032c9.4%209.4%209.4%2024.6%200%2033.9l-87%2087%2039%2039c6.9%206.9%208.9%2017.2%205.2%2026.2s-12.5%2014.8-22.2%2014.8z%22%2F%3E%3C%2Fsvg%3E"); } /* Schlafzimmer — Totals Icon "bed" */ .dts-fakt--schlafzimmer::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M32%2032c17.7%200%2032%2014.3%2032%2032V320H288V160c0-17.7%2014.3-32%2032-32H544c53%200%2096%2043%2096%2096V448c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V416H352%20320%2064v32c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V64C0%2046.3%2014.3%2032%2032%2032zm144%2096a80%2080%200%201%201%200%20160%2080%2080%200%201%201%200-160z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M32%2032c17.7%200%2032%2014.3%2032%2032V320H288V160c0-17.7%2014.3-32%2032-32H544c53%200%2096%2043%2096%2096V448c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V416H352%20320%2064v32c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32V64C0%2046.3%2014.3%2032%2032%2032zm144%2096a80%2080%200%201%201%200%20160%2080%2080%200%201%201%200-160z%22%2F%3E%3C%2Fsvg%3E"); } /* Badezimmer — Totals Icon "bath" */ .dts-fakt--bad::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M96%2077.3c0-7.3%205.9-13.3%2013.3-13.3c3.5%200%206.9%201.4%209.4%203.9l14.9%2014.9C130%2091.8%20128%20101.7%20128%20112c0%2019.9%207.2%2038%2019.2%2052c-5.3%209.2-4%2021.1%203.8%2029c9.4%209.4%2024.6%209.4%2033.9%200L289%2089c9.4-9.4%209.4-24.6%200-33.9c-7.9-7.9-19.8-9.1-29-3.8C246%2039.2%20227.9%2032%20208%2032c-10.3%200-20.2%202-29.2%205.5L163.9%2022.6C149.4%208.1%20129.7%200%20109.3%200C66.6%200%2032%2034.6%2032%2077.3V256c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H480c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96V77.3zM32%20352v16c0%2028.4%2012.4%2054%2032%2071.6V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V464H384v16c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V439.6c19.6-17.6%2032-43.1%2032-71.6V352H32z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M96%2077.3c0-7.3%205.9-13.3%2013.3-13.3c3.5%200%206.9%201.4%209.4%203.9l14.9%2014.9C130%2091.8%20128%20101.7%20128%20112c0%2019.9%207.2%2038%2019.2%2052c-5.3%209.2-4%2021.1%203.8%2029c9.4%209.4%2024.6%209.4%2033.9%200L289%2089c9.4-9.4%209.4-24.6%200-33.9c-7.9-7.9-19.8-9.1-29-3.8C246%2039.2%20227.9%2032%20208%2032c-10.3%200-20.2%202-29.2%205.5L163.9%2022.6C149.4%208.1%20129.7%200%20109.3%200C66.6%200%2032%2034.6%2032%2077.3V256c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032H480c17.7%200%2032-14.3%2032-32s-14.3-32-32-32H96V77.3zM32%20352v16c0%2028.4%2012.4%2054%2032%2071.6V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V464H384v16c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V439.6c19.6-17.6%2032-43.1%2032-71.6V352H32z%22%2F%3E%3C%2Fsvg%3E"); } /* Gäste — Totals Icon "user-group" */ .dts-fakt--gaeste::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M96%20128a128%20128%200%201%201%20256%200A128%20128%200%201%201%2096%20128zM0%20482.3C0%20383.8%2079.8%20304%20178.3%20304l91.4%200C368.2%20304%20448%20383.8%20448%20482.3c0%2016.4-13.3%2029.7-29.7%2029.7L29.7%20512C13.3%20512%200%20498.7%200%20482.3zM609.3%20512l-137.8%200c5.4-9.4%208.6-20.3%208.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1%204.7-.2%207.1-.2l61.4%200C567.8%20320%20640%20392.2%20640%20481.3c0%2017-13.8%2030.7-30.7%2030.7zM432%20256c-31%200-59-12.6-79.3-32.9C372.4%20196.5%20384%20163.6%20384%20128c0-26.8-6.6-52.1-18.3-74.3C384.3%2040.1%20407.2%2032%20432%2032c61.9%200%20112%2050.1%20112%20112s-50.1%20112-112%20112z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M96%20128a128%20128%200%201%201%20256%200A128%20128%200%201%201%2096%20128zM0%20482.3C0%20383.8%2079.8%20304%20178.3%20304l91.4%200C368.2%20304%20448%20383.8%20448%20482.3c0%2016.4-13.3%2029.7-29.7%2029.7L29.7%20512C13.3%20512%200%20498.7%200%20482.3zM609.3%20512l-137.8%200c5.4-9.4%208.6-20.3%208.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1%204.7-.2%207.1-.2l61.4%200C567.8%20320%20640%20392.2%20640%20481.3c0%2017-13.8%2030.7-30.7%2030.7zM432%20256c-31%200-59-12.6-79.3-32.9C372.4%20196.5%20384%20163.6%20384%20128c0-26.8-6.6-52.1-18.3-74.3C384.3%2040.1%20407.2%2032%20432%2032c61.9%200%20112%2050.1%20112%20112s-50.1%20112-112%20112z%22%2F%3E%3C%2Fsvg%3E"); } /* Parkplatz — Totals Icon "car" */ .dts-fakt--parkplatz::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M135.2%20117.4L109.1%20192H402.9l-26.1-74.6C372.3%20104.6%20360.2%2096%20346.6%2096H165.4c-13.6%200-25.7%208.6-30.2%2021.4zM39.6%20196.8L74.8%2096.3C88.3%2057.8%20124.6%2032%20165.4%2032H346.6c40.8%200%2077.1%2025.8%2090.6%2064.3l35.2%20100.5c23.2%209.6%2039.6%2032.5%2039.6%2059.2V400v48c0%2017.7-14.3%2032-32%2032H448c-17.7%200-32-14.3-32-32V400H96v48c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V400%20256c0-26.7%2016.4-49.6%2039.6-59.2zM128%20288a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200zm288%2032a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M135.2%20117.4L109.1%20192H402.9l-26.1-74.6C372.3%20104.6%20360.2%2096%20346.6%2096H165.4c-13.6%200-25.7%208.6-30.2%2021.4zM39.6%20196.8L74.8%2096.3C88.3%2057.8%20124.6%2032%20165.4%2032H346.6c40.8%200%2077.1%2025.8%2090.6%2064.3l35.2%20100.5c23.2%209.6%2039.6%2032.5%2039.6%2059.2V400v48c0%2017.7-14.3%2032-32%2032H448c-17.7%200-32-14.3-32-32V400H96v48c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V400%20256c0-26.7%2016.4-49.6%2039.6-59.2zM128%20288a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200zm288%2032a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064z%22%2F%3E%3C%2Fsvg%3E"); } /* Garten — Totals Icon "tree" */ .dts-fakt--garten::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2032%22%3E%3Cpath%20d%3D%22M26.286%2026.286q0%200.464-0.339%200.804t-0.804%200.339h-8.25q0.018%200.304%200.107%201.563t0.089%201.938q0%200.446-0.321%200.759t-0.768%200.313h-5.714q-0.446%200-0.768-0.313t-0.321-0.759q0-0.679%200.089-1.938t0.107-1.563h-8.25q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l7.179-7.196h-4.089q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l7.179-7.196h-3.518q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l6.857-6.857q0.339-0.339%200.804-0.339t0.804%200.339l6.857%206.857q0.339%200.339%200.339%200.804t-0.339%200.804-0.804%200.339h-3.518l7.179%207.196q0.339%200.339%200.339%200.804t-0.339%200.804-0.804%200.339h-4.089l7.179%207.196q0.339%200.339%200.339%200.804z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2026%2032%22%3E%3Cpath%20d%3D%22M26.286%2026.286q0%200.464-0.339%200.804t-0.804%200.339h-8.25q0.018%200.304%200.107%201.563t0.089%201.938q0%200.446-0.321%200.759t-0.768%200.313h-5.714q-0.446%200-0.768-0.313t-0.321-0.759q0-0.679%200.089-1.938t0.107-1.563h-8.25q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l7.179-7.196h-4.089q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l7.179-7.196h-3.518q-0.464%200-0.804-0.339t-0.339-0.804%200.339-0.804l6.857-6.857q0.339-0.339%200.804-0.339t0.804%200.339l6.857%206.857q0.339%200.339%200.339%200.804t-0.339%200.804-0.804%200.339h-3.518l7.179%207.196q0.339%200.339%200.339%200.804t-0.339%200.804-0.804%200.339h-4.089l7.179%207.196q0.339%200.339%200.339%200.804z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); } /* WLAN — Totals Icon "wifi" */ .dts-fakt--wifi::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M54.2%20202.9C123.2%20136.7%20216.8%2096%20320%2096s196.8%2040.7%20265.8%20106.9c12.8%2012.2%2033%2011.8%2045.2-.9s11.8-33-.9-45.2C549.7%2079.5%20440.4%2032%20320%2032S90.3%2079.5%209.8%20156.7C-2.9%20169-3.3%20189.2%208.9%20202s32.5%2013.2%2045.2%20.9zM320%20256c56.8%200%20108.6%2021.1%20148.2%2056c13.3%2011.7%2033.5%2010.4%2045.2-2.8s10.4-33.5-2.8-45.2C459.8%20219.2%20393%20192%20320%20192s-139.8%2027.2-190.5%2072c-13.3%2011.7-14.5%2031.9-2.8%2045.2s31.9%2014.5%2045.2%202.8c39.5-34.9%2091.3-56%20148.2-56zm64%20160a64%2064%200%201%200%20-128%200%2064%2064%200%201%200%20128%200z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20512%22%3E%3Cpath%20d%3D%22M54.2%20202.9C123.2%20136.7%20216.8%2096%20320%2096s196.8%2040.7%20265.8%20106.9c12.8%2012.2%2033%2011.8%2045.2-.9s11.8-33-.9-45.2C549.7%2079.5%20440.4%2032%20320%2032S90.3%2079.5%209.8%20156.7C-2.9%20169-3.3%20189.2%208.9%20202s32.5%2013.2%2045.2%20.9zM320%20256c56.8%200%20108.6%2021.1%20148.2%2056c13.3%2011.7%2033.5%2010.4%2045.2-2.8s10.4-33.5-2.8-45.2C459.8%20219.2%20393%20192%20320%20192s-139.8%2027.2-190.5%2072c-13.3%2011.7-14.5%2031.9-2.8%2045.2s31.9%2014.5%2045.2%202.8c39.5-34.9%2091.3-56%20148.2-56zm64%20160a64%2064%200%201%200%20-128%200%2064%2064%200%201%200%20128%200z%22%2F%3E%3C%2Fsvg%3E"); } /* Auf schmalen Schirmen zweispaltig statt einer sehr langen Schlange. */ @media (max-width: 767px) { .dts-fakten { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 14px 26px; } .dts-fakt { font-size: 14px; white-space: normal; } } /* ========================================================================== Ausstattungs-Leiste unter dem Text -------------------------------------------------------------------------- Aufbau nach der Vorlage des Nutzers: Icon oben, Titel darunter, die Spalten durch feine senkrechte Linien getrennt. Die Vorlage zeigt unter jedem Titel noch eine Zeile Beschreibung. Die fehlt hier, weil es dafür keinen Text gibt — erfunden wird er nicht. Kommt er nach, genügt ein

im Seiteninhalt; die Regel dafür steht schon unten. Icons wie bei der Eckdaten-Leiste: aus Totals eigenem Satz, als mask-image, Farbe über currentColor. GRÖSSE: die Leiste hängt an EINEM Faktor, `--dts-merkmal-skala`. Alle Maße unten sind daraus gerechnet; 1 ist der ursprüngliche Entwurf, 0.75 der vom Nutzer gewünschte Stand. Wird der Faktor geändert, wandern Icon, Schrift, Innenabstand und Zeilenabstand gemeinsam — sonst verschiebt sich das Verhältnis von Bild zu Text und die Leiste sieht bei jeder Größe anders ausgewogen aus. Kein `transform: scale()` und kein `zoom`: beides schrumpfte auch die Trennlinien und liesse den Platzbedarf im Fluss unverändert. ========================================================================== */ .dts-merkmale { --dts-merkmal-skala: 0.75; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); color: var(--dts-grau); } .dts-merkmal { margin: 0; padding: 0 calc(20px * var(--dts-merkmal-skala)); text-align: center; border-inline-start: 1px solid var(--dts-linie); } .dts-merkmal:first-child { border-inline-start: 0; } /* Das Icon ist als EINZIGES Mass der Leiste NICHT mehr aus dem Faktor gerechnet: es soll so gross sein wie das Icon der Eckdatenleiste darüber, 22px, und das ist eine Bindung an ein anderes Bauteil, nicht an diese Leiste (Abschnitt 102). Innenabstand, Schrift und Zeilenabstand hängen weiterhin am Faktor. Vorher: 40px × 0,75 = 30px. */ .dts-merkmal__icon { display: block; width: 22px; height: 22px; margin: 0 auto calc(14px * var(--dts-merkmal-skala)); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .dts-merkmal__titel { display: block; font-size: calc(17px * var(--dts-merkmal-skala)); line-height: 1.3; } .dts-merkmal__text { display: block; margin-top: calc(8px * var(--dts-merkmal-skala)); font-size: calc(13px * var(--dts-merkmal-skala)); line-height: 1.5; opacity: 0.8; } /* Familienfreundlich — Totals Icon "child" */ .dts-merkmal--familie .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023%2032%22%3E%3Cpath%20d%3D%22M21.214%209.786l-5.214%205.214v14.714q0%200.821-0.589%201.411t-1.411%200.589-1.411-0.589-0.589-1.411v-6.857h-1.143v6.857q0%200.821-0.589%201.411t-1.411%200.589-1.411-0.589-0.589-1.411v-14.714l-5.214-5.214q-0.5-0.5-0.5-1.214t0.5-1.214q0.518-0.5%201.223-0.5t1.205%200.5l4.071%204.071h6.571l4.071-4.071q0.5-0.5%201.214-0.5t1.214%200.5q0.5%200.518%200.5%201.223t-0.5%201.205zM15.429%206.857q0%201.661-1.17%202.83t-2.83%201.17-2.83-1.17-1.17-2.83%201.17-2.83%202.83-1.17%202.83%201.17%201.17%202.83z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023%2032%22%3E%3Cpath%20d%3D%22M21.214%209.786l-5.214%205.214v14.714q0%200.821-0.589%201.411t-1.411%200.589-1.411-0.589-0.589-1.411v-6.857h-1.143v6.857q0%200.821-0.589%201.411t-1.411%200.589-1.411-0.589-0.589-1.411v-14.714l-5.214-5.214q-0.5-0.5-0.5-1.214t0.5-1.214q0.518-0.5%201.223-0.5t1.205%200.5l4.071%204.071h6.571l4.071-4.071q0.5-0.5%201.214-0.5t1.214%200.5q0.5%200.518%200.5%201.223t-0.5%201.205zM15.429%206.857q0%201.661-1.17%202.83t-2.83%201.17-2.83-1.17-1.17-2.83%201.17-2.83%202.83-1.17%202.83%201.17%201.17%202.83z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); } /* Wohnzimmer — Totals Icon "chair" */ .dts-merkmal--wohnen .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M248%2048V256h48V58.7c23.9%2013.8%2040%2039.7%2040%2069.3V256h48V128C384%2057.3%20326.7%200%20256%200H192C121.3%200%2064%2057.3%2064%20128V256h48V128c0-29.6%2016.1-55.5%2040-69.3V256h48V48h48zM48%20288c-12.1%200-23.2%206.8-28.6%2017.7l-16%2032c-5%209.9-4.4%2021.7%201.4%2031.1S20.9%20384%2032%20384l0%2096c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V384H352v96c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V384c11.1%200%2021.4-5.7%2027.2-15.2s6.4-21.2%201.4-31.1l-16-32C423.2%20294.8%20412.1%20288%20400%20288H48z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M248%2048V256h48V58.7c23.9%2013.8%2040%2039.7%2040%2069.3V256h48V128C384%2057.3%20326.7%200%20256%200H192C121.3%200%2064%2057.3%2064%20128V256h48V128c0-29.6%2016.1-55.5%2040-69.3V256h48V48h48zM48%20288c-12.1%200-23.2%206.8-28.6%2017.7l-16%2032c-5%209.9-4.4%2021.7%201.4%2031.1S20.9%20384%2032%20384l0%2096c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V384H352v96c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V384c11.1%200%2021.4-5.7%2027.2-15.2s6.4-21.2%201.4-31.1l-16-32C423.2%20294.8%20412.1%20288%20400%20288H48z%22%2F%3E%3C%2Fsvg%3E"); } /* Küche — Totals Icon "utensils" */ .dts-merkmal--kueche .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M416%200C400%200%20288%2032%20288%20176V288c0%2035.3%2028.7%2064%2064%2064h32V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V352%20240%2032c0-17.7-14.3-32-32-32zM64%2016C64%207.8%2057.9%201%2049.7%20.1S34.2%204.6%2032.4%2012.5L2.1%20148.8C.7%20155.1%200%20161.5%200%20167.9c0%2045.9%2035.1%2083.6%2080%2087.7V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V255.6c44.9-4.1%2080-41.8%2080-87.7c0-6.4-.7-12.8-2.1-19.1L191.6%2012.5c-1.8-8-9.3-13.3-17.4-12.4S160%207.8%20160%2016V150.2c0%205.4-4.4%209.8-9.8%209.8c-5.1%200-9.3-3.9-9.8-9L127.9%2014.6C127.2%206.3%20120.3%200%20112%200s-15.2%206.3-15.9%2014.6L83.7%20151c-.5%205.1-4.7%209-9.8%209c-5.4%200-9.8-4.4-9.8-9.8V16zm48.3%20152l-.3%200-.3%200%20.3-.7%20.3%20.7z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M416%200C400%200%20288%2032%20288%20176V288c0%2035.3%2028.7%2064%2064%2064h32V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V352%20240%2032c0-17.7-14.3-32-32-32zM64%2016C64%207.8%2057.9%201%2049.7%20.1S34.2%204.6%2032.4%2012.5L2.1%20148.8C.7%20155.1%200%20161.5%200%20167.9c0%2045.9%2035.1%2083.6%2080%2087.7V480c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32V255.6c44.9-4.1%2080-41.8%2080-87.7c0-6.4-.7-12.8-2.1-19.1L191.6%2012.5c-1.8-8-9.3-13.3-17.4-12.4S160%207.8%20160%2016V150.2c0%205.4-4.4%209.8-9.8%209.8c-5.1%200-9.3-3.9-9.8-9L127.9%2014.6C127.2%206.3%20120.3%200%20112%200s-15.2%206.3-15.9%2014.6L83.7%20151c-.5%205.1-4.7%209-9.8%209c-5.4%200-9.8-4.4-9.8-9.8V16zm48.3%20152l-.3%200-.3%200%20.3-.7%20.3%20.7z%22%2F%3E%3C%2Fsvg%3E"); } /* Trockenraum — Totals Icon "person-skiing" */ .dts-merkmal--trocken .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M380.7%2048a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zM2.7%20268.9c6.1-11.8%2020.6-16.3%2032.4-10.2L232.7%20361.3l46.2-69.2-75.1-75.1c-14.6-14.6-20.4-33.9-18.4-52.1l108.8%2052%2039.3%2039.3c16.2%2016.2%2018.7%2041.5%206%2060.6L289.8%20391l128.7%2066.8c13.6%207.1%2029.8%207.2%2043.6%20.3l15.2-7.6c11.9-5.9%2026.3-1.1%2032.2%2010.7s1.1%2026.3-10.7%2032.2l-15.2%207.6c-27.5%2013.7-59.9%2013.5-87.2-.7L12.9%20301.3C1.2%20295.2-3.4%20280.7%202.7%20268.9zM118.9%2065.6L137%2074.2l8.7-17.4c4-7.9%2013.6-11.1%2021.5-7.2s11.1%2013.6%207.2%2021.5l-8.5%2016.9%2054.7%2026.2c1.5-.7%203.1-1.4%204.7-2.1l83.4-33.4c34.2-13.7%2072.8%204.2%2084.5%2039.2l17.1%2051.2%2052.1%2026.1c15.8%207.9%2022.2%2027.1%2014.3%2042.9s-27.1%2022.2-42.9%2014.3l-58.1-29c-11.4-5.7-20-15.7-24.1-27.8l-5.8-17.3-27.3%2012.1-6.8%203-6.7-3.2L151.5%20116.7l-9.2%2018.4c-4%207.9-13.6%2011.1-21.5%207.2s-11.1-13.6-7.2-21.5l9-18-17.6-8.4c-8-3.8-11.3-13.4-7.5-21.3s13.4-11.3%2021.3-7.5z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M380.7%2048a48%2048%200%201%201%2096%200%2048%2048%200%201%201%20-96%200zM2.7%20268.9c6.1-11.8%2020.6-16.3%2032.4-10.2L232.7%20361.3l46.2-69.2-75.1-75.1c-14.6-14.6-20.4-33.9-18.4-52.1l108.8%2052%2039.3%2039.3c16.2%2016.2%2018.7%2041.5%206%2060.6L289.8%20391l128.7%2066.8c13.6%207.1%2029.8%207.2%2043.6%20.3l15.2-7.6c11.9-5.9%2026.3-1.1%2032.2%2010.7s1.1%2026.3-10.7%2032.2l-15.2%207.6c-27.5%2013.7-59.9%2013.5-87.2-.7L12.9%20301.3C1.2%20295.2-3.4%20280.7%202.7%20268.9zM118.9%2065.6L137%2074.2l8.7-17.4c4-7.9%2013.6-11.1%2021.5-7.2s11.1%2013.6%207.2%2021.5l-8.5%2016.9%2054.7%2026.2c1.5-.7%203.1-1.4%204.7-2.1l83.4-33.4c34.2-13.7%2072.8%204.2%2084.5%2039.2l17.1%2051.2%2052.1%2026.1c15.8%207.9%2022.2%2027.1%2014.3%2042.9s-27.1%2022.2-42.9%2014.3l-58.1-29c-11.4-5.7-20-15.7-24.1-27.8l-5.8-17.3-27.3%2012.1-6.8%203-6.7-3.2L151.5%20116.7l-9.2%2018.4c-4%207.9-13.6%2011.1-21.5%207.2s-11.1-13.6-7.2-21.5l9-18-17.6-8.4c-8-3.8-11.3-13.4-7.5-21.3s13.4-11.3%2021.3-7.5z%22%2F%3E%3C%2Fsvg%3E"); } /* Waschküche — Totals Icon "faucet-drip" */ .dts-merkmal--waschen .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M224%200c17.7%200%2032%2014.3%2032%2032V44l96-12c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L256%2084l-31-3.9-1-.1-1%20.1L192%2084%2096%2096C78.3%2096%2064%2081.7%2064%2064s14.3-32%2032-32l96%2012V32c0-17.7%2014.3-32%2032-32zM0%20224c0-17.7%2014.3-32%2032-32h96l22.6-22.6c6-6%2014.1-9.4%2022.6-9.4H192V116.2l32-4%2032%204V160h18.7c8.5%200%2016.6%203.4%2022.6%209.4L320%20192h32c88.4%200%20160%2071.6%20160%20160c0%2017.7-14.3%2032-32%2032H416c-17.7%200-32-14.3-32-32s-14.3-32-32-32H315.9c-20.2%2029-53.9%2048-91.9%2048s-71.7-19-91.9-48H32c-17.7%200-32-14.3-32-32V224zM436.8%20423.4c1.9-4.5%206.3-7.4%2011.2-7.4s9.2%202.9%2011.2%207.4l18.2%2042.4c1.8%204.1%202.7%208.6%202.7%2013.1V480c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-1.2c0-4.5%20.9-8.9%202.7-13.1l18.2-42.4z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M224%200c17.7%200%2032%2014.3%2032%2032V44l96-12c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L256%2084l-31-3.9-1-.1-1%20.1L192%2084%2096%2096C78.3%2096%2064%2081.7%2064%2064s14.3-32%2032-32l96%2012V32c0-17.7%2014.3-32%2032-32zM0%20224c0-17.7%2014.3-32%2032-32h96l22.6-22.6c6-6%2014.1-9.4%2022.6-9.4H192V116.2l32-4%2032%204V160h18.7c8.5%200%2016.6%203.4%2022.6%209.4L320%20192h32c88.4%200%20160%2071.6%20160%20160c0%2017.7-14.3%2032-32%2032H416c-17.7%200-32-14.3-32-32s-14.3-32-32-32H315.9c-20.2%2029-53.9%2048-91.9%2048s-71.7-19-91.9-48H32c-17.7%200-32-14.3-32-32V224zM436.8%20423.4c1.9-4.5%206.3-7.4%2011.2-7.4s9.2%202.9%2011.2%207.4l18.2%2042.4c1.8%204.1%202.7%208.6%202.7%2013.1V480c0%2017.7-14.3%2032-32%2032s-32-14.3-32-32v-1.2c0-4.5%20.9-8.9%202.7-13.1l18.2-42.4z%22%2F%3E%3C%2Fsvg%3E"); } /* Garage — Totals Icon "car" */ .dts-merkmal--garage .dts-merkmal__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M135.2%20117.4L109.1%20192H402.9l-26.1-74.6C372.3%20104.6%20360.2%2096%20346.6%2096H165.4c-13.6%200-25.7%208.6-30.2%2021.4zM39.6%20196.8L74.8%2096.3C88.3%2057.8%20124.6%2032%20165.4%2032H346.6c40.8%200%2077.1%2025.8%2090.6%2064.3l35.2%20100.5c23.2%209.6%2039.6%2032.5%2039.6%2059.2V400v48c0%2017.7-14.3%2032-32%2032H448c-17.7%200-32-14.3-32-32V400H96v48c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V400%20256c0-26.7%2016.4-49.6%2039.6-59.2zM128%20288a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200zm288%2032a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M135.2%20117.4L109.1%20192H402.9l-26.1-74.6C372.3%20104.6%20360.2%2096%20346.6%2096H165.4c-13.6%200-25.7%208.6-30.2%2021.4zM39.6%20196.8L74.8%2096.3C88.3%2057.8%20124.6%2032%20165.4%2032H346.6c40.8%200%2077.1%2025.8%2090.6%2064.3l35.2%20100.5c23.2%209.6%2039.6%2032.5%2039.6%2059.2V400v48c0%2017.7-14.3%2032-32%2032H448c-17.7%200-32-14.3-32-32V400H96v48c0%2017.7-14.3%2032-32%2032H32c-17.7%200-32-14.3-32-32V400%20256c0-26.7%2016.4-49.6%2039.6-59.2zM128%20288a32%2032%200%201%200%20-64%200%2032%2032%200%201%200%2064%200zm288%2032a32%2032%200%201%200%200-64%2032%2032%200%201%200%200%2064z%22%2F%3E%3C%2Fsvg%3E"); } /* Sechs Spalten werden unter rund 1000px zu schmal fuer die laengeren Titel („Trockenraum fuer Ski- und Bergausruestung"), darum gestuft. */ @media (max-width: 999px) { .dts-merkmale { grid-template-columns: repeat(3, 1fr); row-gap: calc(34px * var(--dts-merkmal-skala)); } .dts-merkmal:nth-child(3n + 1) { border-inline-start: 0; } } @media (max-width: 599px) { .dts-merkmale { grid-template-columns: repeat(2, 1fr); } .dts-merkmal:nth-child(3n + 1) { border-inline-start: 1px solid var(--dts-linie); } .dts-merkmal:nth-child(2n + 1) { border-inline-start: 0; } .dts-merkmal__titel { font-size: calc(15px * var(--dts-merkmal-skala)); } } /* ========================================================================== Restaurant-Liste: zwei Restaurants je Zeile -------------------------------------------------------------------------- Die Tabelle im Seiteninhalt hat seit dem Umbau vier Spalten je Zeile — Bild, Text, Bild, Text. Ohne Zutun verteilt der Browser die Breiten nach Inhalt, und die beiden Hälften werden ungleich (gemessen: 260/455/180/383). `table-layout: fixed` mit fester Bildspalte macht daraus zwei gleiche Hälften. ========================================================================== */ .dts-restaurants { width: 100%; table-layout: fixed; border-collapse: collapse; } .dts-restaurants td { vertical-align: top; padding: 0 18px 26px 0; } /* Die beiden Bildspalten so breit wie die Vorschaubilder (150 px) plus Luft. */ .dts-restaurants td:nth-child(1), .dts-restaurants td:nth-child(3) { width: 168px; } .dts-restaurants img { display: block; max-width: 100%; height: auto; margin: 0; /* Die Bilder tragen aus dem Editor `alignleft` bzw. `aligncenter` und schwimmen dadurch. In der eigenen schmalen Spalte bringt das nichts, und in der gestapelten Darstellung auf dem Telefon lief der Text am Bild hoch und überlagerte es. */ float: none; } /* Bei ungerader Anzahl bleiben am Ende zwei leere Zellen stehen, damit das Raster hält — sie sollen aber keinen Abstand erzeugen. */ .dts-restaurants td:empty { padding: 0; } @media (max-width: 767px) { /* Vier Spalten gehen auf dem Telefon nicht auf: zwei Bilder à 150 px und zwei Textspalten passen nicht in 375 px. Dort wieder eines je Zeile — die Zellen werden zu Blöcken und stapeln sich als Bild, Text, Bild, Text. */ .dts-restaurants, .dts-restaurants tbody, .dts-restaurants tr, .dts-restaurants td { display: block; width: auto; } .dts-restaurants td:nth-child(1), .dts-restaurants td:nth-child(3) { width: auto; padding-bottom: 10px; } .dts-restaurants td { padding-right: 0; } .dts-restaurants td:empty { display: none; } } /* ========================================================================== Seite „Das Haus": Auftakt, Kapitel, Breitbild, Hinweis -------------------------------------------------------------------------- ALLES STEHT IN DER 1280er-SPALTE — Bilder eingeschlossen. Der erste Anlauf liess die grossen Fotos bis an den Fensterrand laufen und hielt nur den Text an der Inhaltskante. Auf einem 1440er-Bildschirm sah das aus wie der Entwurf; auf einem sehr breiten fiel es auseinander: die Fotos wurden mächtig, der Text daneben stand mit grossen Leerflächen darüber und darunter. Auftrag des Nutzers, wie schon beim Band der Startseite: „Bitte auch hier die 1280px Breite beachten." Dieselbe Rechnung wie bei Totals Behälter, hier aber selbst gesetzt, weil die Zeilen randlos sind (`stretch_row_content_no_spaces`): width: min(1280px, 90%) — 1280 px ist `--wpex-container-width`, die 90 % sind `--wpex-container-max-width`, das auf schmalen Fenstern greift. Damit steht die Kante des Blocks genau unter der Kante von Logo und Menü. Kein `100vw` irgendwo: das schlösse auf Windows die Bildlaufleiste mit ein und schöbe alles ein paar Pixel neben diese Kante. ========================================================================== */ .dts-auftakt, .dts-kapitel, .dts-breitbild, .dts-hinweis { --dts-spalt: clamp(24px, 4vw, 76px); } .dts-kapitel, .dts-breitbild, .dts-hinweis { width: min(1280px, 90%); margin-inline: auto; } /* Gemeinsame Augenzeile aller Blöcke dieser Seite. Inter, gesperrt, klein — dasselbe Muster wie auf der Startseite (`.dts-kacheln__auge`). */ .dts-auftakt__auge, .dts-kapitel__auge, .dts-breitbild__auge, .dts-hinweis__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dts-auge); } /* Die Sprungmarken landen sonst unter der eingeblendeten Kopfzeile. */ .dts-kapitel[id], .dts-breitbild[id] { scroll-margin-top: 110px; } /* ----- Verweis mit Pfeil ------------------------------------------------- Wort links, Haarlinie dazwischen, Pfeil rechts. Ohne Ziel steht dasselbe als Text da (`--offen`) — der Nutzer setzt die Ziele später. */ .dts-pfeil { margin: clamp(22px, 2.4vw, 34px) 0 0; } .dts-pfeil__link, .dts-pfeil--offen { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; } .dts-pfeil__wort { flex: 0 0 auto; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } .dts-pfeil__zeichen { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; font-size: 18px; line-height: 1; } .dts-pfeil__zeichen::before { content: ""; flex: 1 1 auto; height: 1px; margin-inline-end: 12px; background-color: var(--dts-linie); } .dts-pfeil--offen { /* Noch kein Ziel: dieselbe Form, aber ohne Zeigerwechsel. */ color: inherit; } .dts-pfeil__link:hover .dts-pfeil__zeichen, .dts-pfeil__link:focus .dts-pfeil__zeichen { color: var(--dts-gruen); } .dts-pfeil__link:hover .dts-pfeil__zeichen::before, .dts-pfeil__link:focus .dts-pfeil__zeichen::before { background-color: var(--dts-gruen); } /* ----- Auftakt ----------------------------------------------------------- */ .dts-auftakt__satz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: var(--dts-spalt); align-items: start; } .dts-auftakt__titel { margin: 0; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; font-weight: 400; hyphens: auto; } .dts-auftakt__text p { margin: 0; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; } .dts-auftakt__leise { margin-top: 16px !important; color: var(--dts-grau); } /* ----- Kennzahlen und Rundgang ------------------------------------------- */ .dts-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: clamp(30px, 3.6vw, 52px) 0 0; padding: clamp(20px, 2.4vw, 32px) 0; border-top: 1px solid var(--dts-linie); border-bottom: 1px solid var(--dts-linie); } .dts-zahl__wert { margin: 0 0 6px; font-family: var(--dts-schrift-titel); font-size: clamp(26px, 2.9vw, 40px); line-height: 1.1; font-weight: 400; } .dts-zahl__wofuer { margin: 0; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dts-grau); } .dts-rundgang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px var(--dts-spalt); padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--dts-linie); } .dts-rundgang__label { margin: 0; flex: 0 0 auto; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dts-auge); } .dts-rundgang__liste { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px var(--dts-spalt); margin: 0; padding: 0; list-style: none; } .dts-rundgang__punkt { margin: 0; } .dts-rundgang__punkt a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dts-schrift-text); font-size: 14px; text-decoration: none; color: inherit; } .dts-rundgang__punkt a:hover, .dts-rundgang__punkt a:focus { color: var(--dts-gruen); } .dts-rundgang__pfeil { font-size: 13px; color: var(--dts-auge); } /* ----- Kapitel: Bild links, Bild rechts, gestapelt ------------------------ */ .dts-kapitel--links, .dts-kapitel--rechts { display: grid; align-items: center; } .dts-kapitel--links { grid-template-columns: minmax(0, 1.08fr) var(--dts-spalt) minmax(0, 1fr); } /* `grid-row: 1` ist KEIN Beiwerk. Ohne sie setzt die automatische Verteilung das zweite Kind in eine NEUE Zeile, sobald dessen Spalte LINKS von der des ersten liegt — genau der Fall bei `--rechts` (Bild in Spur 4, Text in Spur 2): das Bild stand oben, der Text darunter. Bei `--links` fiel es nicht auf, weil die Spuren dort aufsteigend belegt werden. */ .dts-kapitel--links .dts-kapitel__bildteil { grid-column: 1; grid-row: 1; } .dts-kapitel--links .dts-kapitel__textteil { grid-column: 3; grid-row: 1; } .dts-kapitel--rechts { grid-template-columns: minmax(0, 1fr) var(--dts-spalt) minmax(0, 1.08fr); } .dts-kapitel--rechts .dts-kapitel__textteil { grid-column: 1; grid-row: 1; } .dts-kapitel--rechts .dts-kapitel__bildteil { grid-column: 3; grid-row: 1; } /* 16:9 — das Format der Quelldateien (alle 2400 x 1350). Damit wird kein Bild mehr beschnitten: vorher standen die Kapitelbilder auf 4:3 und verloren ein VIERTEL ihrer Breite, die Kacheln auf 16:10 und verloren ein Zehntel. Auftrag des Nutzers: „Für die Bilder im Querformat würde ich 16:9 anstatt 4:3 bevorzugen." Die breiten BÄNDER bleiben, wie sie sind (Panorama 100:30, Breitbild 100:36): dort ist der Zuschnitt Absicht, sie sind Gestaltungselement und nicht Bild. Ebenso die Hochformate, die auf dem Telefon greifen. */ .dts-kapitel__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .dts-kapitel__foto--klein { aspect-ratio: 16 / 9; margin-top: clamp(20px, 2.2vw, 30px); max-width: 320px; } .dts-kapitel__titel { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; font-weight: 400; hyphens: auto; } .dts-kapitel__text p { margin: 0 0 14px; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; color: var(--dts-grau); } .dts-kapitel__text p:last-child { margin-bottom: 0; } .dts-kapitel__unterschrift { margin: 12px 0 0; font-family: var(--dts-schrift-text); font-size: 13px; line-height: 1.5; color: var(--dts-grau); } /* Beim Bild rechts steht die Unterschrift unter dem Bild und soll an der Textkante beginnen, nicht am Fensterrand. */ .dts-kapitel--rechts .dts-kapitel__unterschrift { padding-inline-end: 0; } .dts-kapitel--gestapelt { display: grid; row-gap: clamp(24px, 3vw, 44px); } .dts-kapitel--gestapelt .dts-kapitel__kopf { display: grid; grid-template-columns: minmax(0, 1fr) var(--dts-spalt) minmax(0, 1fr); align-items: end; } .dts-kapitel--gestapelt .dts-kapitel__ueber { grid-column: 1; } .dts-kapitel--gestapelt .dts-kapitel__text { grid-column: 3; } /* Auch hier stehen zwei BILDER nebeneinander — derselbe Spalt wie oben. */ .dts-kapitel--gestapelt .dts-kapitel__bilder { display: grid; grid-template-columns: minmax(0, 1.3fr) var(--dts-blockabstand) minmax(0, 1fr); align-items: start; } .dts-kapitel--gestapelt .dts-kapitel__gross { grid-column: 1; } .dts-kapitel--gestapelt .dts-kapitel__neben { grid-column: 3; } .dts-kapitel--gestapelt .dts-kapitel__foto--klein { margin-top: 0; max-width: none; aspect-ratio: 16 / 9; } /* ----- Breitbild über die ganze Fensterbreite ----------------------------- */ .dts-breitbild { position: relative; isolation: isolate; } .dts-breitbild__foto { display: block; width: 100%; height: auto; aspect-ratio: 100 / 36; object-fit: cover; } /* Verlauf von unten statt Schleier über allem: über dem Himmel bliebe sonst kein Himmel übrig. Lehre aus dem Panorama der Startseite. */ .dts-breitbild::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(12, 20, 30, 0.72) 0%, rgba(12, 20, 30, 0.50) 26%, rgba(12, 20, 30, 0.16) 55%, rgba(12, 20, 30, 0) 78% ); pointer-events: none; } .dts-breitbild__satz { position: absolute; inset: auto 0 0 0; z-index: 2; /* Das Bild reicht jetzt selbst nur bis zur Inhaltskante; der Text braucht deshalb einen eigenen Einzug, sonst klebte er am Bildrand. */ padding: 0 clamp(20px, 3.4vw, 48px) clamp(24px, 3vw, 46px); color: #fff; } .dts-breitbild__auge { color: rgba(255, 255, 255, 0.82); } .dts-breitbild__titel { margin: 0 0 10px; max-width: 34ch; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.08; font-weight: 400; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } .dts-breitbild__text { margin: 0; max-width: 62ch; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } /* ----- Schlussblock „Gut zu wissen" --------------------------------------- */ .dts-hinweis { /* Breite und Zentrierung kommen aus der gemeinsamen Regel oben. */ margin-block: 0; } /* Der Aussenabstand unten war auf eine Überschrift über der ganzen Zeile gerechnet. Seit sie in der Textspalte steht (Abschnitt 92), gilt derselbe Wert wie bei den Kapitelüberschriften. */ .dts-hinweis__titel { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(26px, 2.7vw, 40px); line-height: 1.12; font-weight: 400; } /* Dieselbe Spaltenteilung wie die Kapitel darüber (`--links`): 1.08fr / Spalt / 1fr. Vorher stand hier 0.62fr, wodurch das Foto 150px schmaler war als jedes andere Foto der Seite und seine rechte Kante an keiner anderen ausgerichtet war — das war das „Verrutschte" aus Abschnitt 91. */ .dts-hinweis__reihe { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: var(--dts-spalt); /* Mittig wie `.dts-kapitel--links` und `--rechts`. Vorher `start`: der Text stand oben an der Bildkante, während er in jedem Kapitel darüber neben der Bildmitte steht (Abschnitt 93). */ align-items: center; } .dts-hinweis__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* War eine fette Vorzeile. Auf Wunsch des Nutzers jetzt Fliesstext wie der Absatz darunter (Abschnitt 95) — sie bleibt ein eigener Absatz, sieht aber nicht mehr wie eine Zwischenüberschrift aus. */ .dts-hinweis__lead { margin: 0 0 14px; font-size: clamp(15px, 1.1vw, 16px); font-weight: 400; line-height: 1.65; color: var(--dts-grau); } .dts-hinweis__text { margin: 0; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; color: var(--dts-grau); } .dts-hinweis .dts-pfeil { margin-top: clamp(24px, 3vw, 44px); } /* ----- Zeilen dieser Seite ------------------------------------------------ */ /* Derselbe Abstand wie zwischen den Bloecken der Startseite (Abschnitt 67). Vorher stand hier clamp(56px, 7vw, 104px) — auf breiten Bildschirmen also das Vierfache. Auftrag des Nutzers: „Aender die Abstaende so, dass sie denen entsprechen, wie wir sie auf der Homepage haben." */ .dts-kapitel-row > .wpb_column > .vc_column-inner { margin-bottom: var(--dts-blockabstand); } /* Abgesetztes Textfeld neben dem Foto — derselbe Ton wie im Band der Startseite (`.dts-band__text`, Abschnitt 61). Die Klasse steht im `el_class` der Zeile, damit sich pro Block entscheiden lässt, ob das Feld getönt ist; auf `/das-haus/` tragen sie die ungeraden Blöcke (Abschnitt 94). `align-self: stretch` ist der Grund, weshalb das Feld so hoch wird wie das Foto daneben statt nur so hoch wie sein Text: die Kapitelzeile steht auf `align-items: center`, und ohne das Gegenstück bliebe ein schmaler Streifen Farbe in der Mitte stehen. Mittig steht der Text trotzdem — dafür sorgt `justify-content: center` innerhalb des Feldes. */ /* Ein Block, keine zwei Teile: die mittlere Spur — sonst der Spalt zwischen Foto und Text — fällt auf null, damit das Foto an der Farbfläche anliegt wie im Band der Startseite. Das Seitenverhältnis 1.08 : 1 bleibt; das Foto wird dadurch 598px breit statt 572px, weil der Spalt von 51px auf beide Spuren verteilt wird. Die linke Kante bei 64px rührt sich nicht. */ .dts-textflaeche .dts-kapitel--links { grid-template-columns: minmax(0, 1.08fr) 0 minmax(0, 1fr); } .dts-textflaeche .dts-kapitel--rechts { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1.08fr); } .dts-textflaeche .dts-hinweis__reihe { column-gap: 0; } /* Auf der getönten Fläche ist `--dts-grau` (#666666) zu schwach: gemessen 4,37 gegen 4,5 als Grenze für normalen Text. Auf dem hellen Seitengrund reicht derselbe Ton noch. Die Fläche ist dunkler, also wird die Schrift es auch — dieselbe Lösung wie im Band der Startseite, wo der Fliesstext die Textfarbe des Dokuments erbt und damit auf 7,65 kommt. */ .dts-textflaeche .dts-kapitel__text p, .dts-textflaeche .dts-hinweis__lead, .dts-textflaeche .dts-hinweis__text { color: inherit; } .dts-textflaeche .dts-kapitel__textteil, .dts-textflaeche .dts-hinweis__textteil { align-self: stretch; display: flex; flex-direction: column; justify-content: center; background-color: var(--dts-flaeche); padding: clamp(28px, 3vw, 48px) clamp(24px, 3.4vw, 56px); } /* Das Foto wächst auf die Höhe des Feldes mit, sonst überragt die Farbfläche es oben und unten um rund 20px und die Zeile bekommt vier Kanten statt zwei. Das Band der Startseite löst das mit `height: 100%` am Foto — hier geht das NICHT: dort steht die Höhe der Zeile durch `min-height: 420px` fest, hier gibt sie erst der Text daneben. `height: 100%` gegen eine unbestimmte Höhe fällt auf `auto` zurück, und mit `aspect-ratio: auto` heisst das: die Eigenhöhe der Datei. Gemessen waren es 1500px statt 322px. Deshalb liegt das Foto absolut in seiner Zelle. Es trägt dann nichts zur Höhe bei; die gibt allein das Textfeld vor, und `object-fit: cover` füllt den Rest. Der Preis ist ein etwas engerer Ausschnitt — diese drei Fotos stehen nicht mehr auf festen 16:9. Das `min-height` ist der Boden für den Fall, dass ein Text einmal kürzer ausfällt als das Bild hoch sein soll. */ .dts-textflaeche .dts-kapitel__bildteil, .dts-textflaeche .dts-hinweis__bildteil { align-self: stretch; position: relative; min-height: clamp(220px, 24vw, 322px); } .dts-textflaeche .dts-kapitel__foto, .dts-textflaeche .dts-hinweis__foto { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } /* Abgesetzte Fläche hinter einem Kapitel. Sie liegt auf dem BLOCK, nicht auf der Zeile: sonst liefe der Farbton bis an beide Fensterränder, und genau das soll er nicht — die 1280er-Kante gilt hier wie überall. Das Foto sitzt bündig in der Fläche, den Luftraum geben Innenabstand oben und unten. */ .dts-flaeche-row .dts-kapitel { background-color: var(--dts-flaeche); padding-block: clamp(38px, 4.5vw, 68px); } /* Ein Spruch auf der Fläche braucht auch seitlich Luft: bei ihm steht keine Bildkante am Rand, die den Abstand von selbst erzeugt, sondern Schrift — und die klebte sonst an der Kante des Farbfeldes. */ .dts-flaeche-row .dts-spruch { background-color: var(--dts-flaeche); padding: clamp(38px, 4.5vw, 68px) clamp(28px, 3.4vw, 56px); } .dts-flaeche-row > .wpb_column > .vc_column-inner { margin-bottom: var(--dts-blockabstand); } /* ----- Heros, die tief sitzen --------------------------------------------- Drei Seiten setzen ihren Hero-Text unten statt mittig. Das war zweimal als Aufzaehlung im Selektor gebaut; beim dritten Mal ist daraus eine gemeinsame Klasse geworden, wie im Kommentar von damals angekuendigt: dts-hero--tief Text unten links statt mittig (alle drei) dts-hero--paar Titel links, Satz rechts (Sommer & Winter, Wohnzimmer) dts-hero--glanz Schein statt Schleier (Wohnzimmer) Die Klassen stehen im `el_class` der Zeile auf der Seite, nicht hier. */ .dts-hero--tief .dts-hero__auge { margin: 0 0 16px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; /* Voll deckend, nicht 85 %. Gemessen auf dem Telefon: die fehlenden 15 % kosteten fast genau einen halben Kontrastpunkt (2,93 statt 3,42) — bei einer 12-px-Zeile mit weiter Sperrung ist das der Unterschied zwischen knapp darunter und klar darüber. Gilt für alle drei tiefen Heros. */ color: #fff; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } /* Der Entwurf setzt den Hero-Text dieser Seite linksbündig und nach unten, nicht mittig wie auf der Startseite. */ .dts-hero-row .dts-hero__inhalt.dts-hero--tief { align-items: flex-start; justify-content: flex-end; text-align: left; padding: 0 max((100% - 1280px) / 2, 5%) clamp(34px, 4.5vw, 70px); } .dts-hero-row .dts-hero__inhalt.dts-hero--tief > .wpb_wrapper { max-width: 46ch; } .dts-hero--tief .dts-hero__titel { font-size: clamp(34px, 5.2vw, 62px); } /* Eigener Saum fuer diesen Hero. Der gemeinsame Saum ist eine Ellipse um die MITTE (50% / 46%) — gebaut fuer den mittig stehenden Text der Startseite. Hier steht der Text unten, bei 62 bis 83 % der Hoehe, also ausserhalb der Ellipse: dort lag nur der schwache Ausklang von `--dts-saum-unten`. Deshalb an dieser Stelle ein Verlauf von unten. Der Himmel oben bleibt unberuehrt — dieselbe Ueberlegung wie beim Panorama der Startseite. */ /* Reicht bis ganz nach oben aus. Das war nicht immer so: der erste Saum lief bei 84 % der Höhe aus und war damit auf Textblöcke ausgelegt, die erst bei etwa 67 % beginnen. Seit alle Hero-Sätze dieselben 20 px tragen (Abschnitt 86), sind die Blöcke höher — auf „Das Haus" beginnt die Augenzeile bei 60 %, auf der Startseite bei 53 %. Gemessen fiel die Augenzeile dort auf 3,19 und 4,02 gegen die Grenze 4,5. Der Saum, der zuerst nur für die Startseite gebaut war, gilt deshalb jetzt für alle tief gesetzten Heros; die eigene Klasse dafür ist entfallen. Die Glanz-Heros überschreiben ihn weiter unten mit einem schwächeren. */ .dts-hero-row:has(.dts-hero--tief) .dts-hero::after { background: linear-gradient( to top, rgba(10, 16, 24, 0.82) 0%, rgba(10, 16, 24, 0.74) 25%, rgba(10, 16, 24, 0.60) 45%, rgba(10, 16, 24, 0.36) 65%, rgba(10, 16, 24, 0.10) 85%, rgba(10, 16, 24, 0) 100% ); } /* ----- Schmale Fenster ---------------------------------------------------- */ @media only screen and (max-width: 1023px) { .dts-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; } .dts-rundgang__liste { justify-content: flex-start; } } @media only screen and (max-width: 859px) { .dts-auftakt__satz { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } /* Untereinander gibt es keinen Bildüberhang mehr: alles rückt in die Inhaltsspalte, sonst klebte der Text am Fensterrand. */ .dts-kapitel--links, .dts-kapitel--rechts { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3vw, 30px); } /* `grid-row` MUSS hier mit zurueckgenommen werden. Oben steht auf beiden Kindern `grid-row: 1`; bleibt das in einer einspaltigen Anordnung stehen, liegen Bild und Text in DERSELBEN Zelle und damit uebereinander — auf dem Telefon stand der Text mitten im Foto. */ .dts-kapitel--links .dts-kapitel__bildteil, .dts-kapitel--links .dts-kapitel__textteil, .dts-kapitel--rechts .dts-kapitel__bildteil, .dts-kapitel--rechts .dts-kapitel__textteil { grid-column: 1; grid-row: auto; } .dts-kapitel--rechts .dts-kapitel__bildteil { order: -1; } .dts-kapitel--gestapelt .dts-kapitel__kopf, .dts-kapitel--gestapelt .dts-kapitel__bilder { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 3vw, 28px); } .dts-kapitel--gestapelt .dts-kapitel__ueber, .dts-kapitel--gestapelt .dts-kapitel__text, .dts-kapitel--gestapelt .dts-kapitel__gross, .dts-kapitel--gestapelt .dts-kapitel__neben { grid-column: 1; grid-row: auto; } .dts-kapitel__foto--klein { max-width: none; } .dts-hinweis__reihe { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 3vw, 26px); } /* Dieselbe Spezifität wie die Regeln weiter oben, sonst bliebe der zweispaltige Block auch auf dem Telefon stehen. Genau dieser Fehler ist in Abschnitt 91 schon einmal passiert. Untereinander liegt das Foto direkt auf der Fläche — der Zeilenabstand entfällt für diese Blöcke. */ .dts-textflaeche .dts-kapitel--links, .dts-textflaeche .dts-kapitel--rechts { grid-template-columns: minmax(0, 1fr); row-gap: 0; } .dts-textflaeche .dts-hinweis__reihe { grid-template-columns: minmax(0, 1fr); row-gap: 0; } /* Untereinander gibt das Foto seine Höhe wieder selbst vor. */ .dts-textflaeche .dts-kapitel__bildteil, .dts-textflaeche .dts-hinweis__bildteil { position: static; min-height: 0; } .dts-textflaeche .dts-kapitel__foto, .dts-textflaeche .dts-hinweis__foto { position: static; height: auto; aspect-ratio: 16 / 9; } .dts-breitbild__foto { aspect-ratio: 4 / 3; } .dts-breitbild__satz { padding-bottom: clamp(20px, 4vw, 34px); } } @media only screen and (max-width: 599px) { .dts-zahlen { grid-template-columns: minmax(0, 1fr); gap: 18px; } .dts-rundgang__liste { flex-direction: column; gap: 10px; } } /* ========================================================================== Fuss der Seite -------------------------------------------------------------------------- Grüner Abschlussblock und darunter die schmale Zeile mit Jahr, Rechtsseiten und Kontakt. Beides in der 1280er-Spalte — der grüne Ton läuft also NICHT bis an die Fensterränder, sondern bleibt ein Feld auf dem Seitengrund, wie der Rest der Seite. Der leere Widget-Streifen darüber wird ausgeblendet: Total gibt ihn auch dann aus, wenn kein einziges Widget im Fuss liegt — ein dunkler Balken von 40 px ohne Inhalt. ========================================================================== */ #footer-inner:has(#footer-widgets-inner:empty) { display: none; } .dts-fuss { width: min(1280px, 90%); /* Darüber liegt schon der Aussenabstand des letzten Blocks (Totals --wpex-vc-column-inner-margin-bottom, 40px); dieser Wert kommt obendrauf. Halbiert auf Wunsch des Nutzers — Abschnitt 89. */ margin: clamp(28px, 3vw, 44px) auto 0; background-color: var(--dts-gruen); color: var(--dts-grund); } .dts-fuss__inhalt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(28px, 4vw, 72px); align-items: center; padding: clamp(36px, 4.4vw, 64px) clamp(28px, 3.6vw, 56px); } .dts-fuss__titel { margin: 0; font-family: var(--dts-schrift-titel); font-size: clamp(28px, 3vw, 44px); line-height: 1.12; font-weight: 400; color: var(--dts-grund); } /* Die Bergzeichnung ist Schmuck, kein Inhalt: zurückgenommen in der Deckkraft und ohne eigene Farbe — sie erbt `currentColor` aus dem Block. */ .dts-fuss__berge { display: block; width: min(100%, 420px); height: auto; margin-top: clamp(20px, 2.6vw, 38px); opacity: 0.34; } .dts-fuss__satz { margin: 0 0 clamp(20px, 2.4vw, 32px); font-family: var(--dts-schrift-text); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(244, 241, 234, 0.88); } .dts-fuss__knopf { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 28px); border: 1px solid rgba(244, 241, 234, 0.55); font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: var(--dts-grund); transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .dts-fuss__knopf:hover, .dts-fuss__knopf:focus { background-color: var(--dts-grund); border-color: var(--dts-grund); color: var(--dts-gruen); } .dts-fuss__knopf-pfeil { font-size: 18px; line-height: 1; letter-spacing: 0; } /* ----- Untere Zeile ------------------------------------------------------- */ #footer-bottom { background-color: var(--dts-grund) !important; color: var(--dts-grau); padding-block: clamp(16px, 1.8vw, 24px) !important; } #footer-bottom #copyright { color: var(--dts-grau); } .dts-fussleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-family: var(--dts-schrift-text); font-size: 13px; line-height: 1.5; } /* Der senkrechte Strich steht als Rahmen zwischen den Teilen, nicht als Zeichen im Text: so springt er beim Umbruch nicht an den Zeilenanfang. */ .dts-fussleiste__teil { padding: 0 16px; border-inline-start: 1px solid var(--dts-linie); color: var(--dts-grau); text-decoration: none; } .dts-fussleiste__teil:first-child { padding-inline-start: 0; border-inline-start: 0; } .dts-fussleiste a, #footer-bottom #copyright a { color: var(--dts-grau); text-decoration: none; } .dts-fussleiste a:hover, .dts-fussleiste a:focus, #footer-bottom #copyright a:hover, #footer-bottom #copyright a:focus { color: var(--dts-gruen); text-decoration: underline; } .dts-fussleiste .wpex-icon svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -1px; } @media only screen and (max-width: 859px) { .dts-fuss__inhalt { grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 4vw, 40px); } .dts-fuss__berge { margin-top: clamp(16px, 3vw, 26px); } } @media only screen and (max-width: 599px) { .dts-fussleiste__teil { padding: 0 10px; } .dts-fussleiste { font-size: 12px; } } /* ========================================================================== Seite „Sommer & Winter" -------------------------------------------------------------------------- Drei neue Formen; Auftakt, Kapitel und Breitbild kommen unverändert von „Das Haus". Breite und Zentrierung wie dort: `width: min(1280px, 90%)`. ========================================================================== */ .dts-saisonkarten, .dts-spalten, .dts-zahlband { width: min(1280px, 90%); margin-inline: auto; --dts-spalt: clamp(24px, 4vw, 76px); } /* ----- Hero dieser Seite: Titel links, Satz rechts ------------------------ */ .dts-hero-row .dts-hero__inhalt.dts-hero--paar > .wpb_wrapper { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 72px); align-items: end; width: 100%; max-width: none; } .dts-hero--paar .dts-hero__auge { grid-column: 1 / -1; } .dts-hero--paar .dts-hero__titel { grid-column: 1; font-size: clamp(32px, 4.6vw, 58px); } /* Der Satz steht neben dem Titel, nicht darunter — so im Entwurf. Er sitzt auf der Grundlinie der letzten Titelzeile, deshalb der kleine Abstand. */ .dts-hero--paar .dts-hero__sub { grid-column: 2; margin: 0 0 10px; /* Keine eigene Groesse mehr — die steht jetzt einmal oben. */ } @media only screen and (max-width: 859px) { .dts-hero-row .dts-hero__inhalt.dts-hero--paar > .wpb_wrapper { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } .dts-hero--paar .dts-hero__titel, .dts-hero--paar .dts-hero__sub { grid-column: 1; } } /* ----- Zwei Saisonkacheln, Text im Bild ---------------------------------- */ /* Der Spalt ZWISCHEN zwei Bildern ist derselbe wie ueberall auf der Domaene: `--dts-blockabstand`, 28 px — genau wie zwischen den beiden Karten der Startseite. Vorher stand hier `--dts-spalt`, das sind bei 1440 px 58 px und damit das Doppelte des senkrechten Abstands darunter. `--dts-spalt` bleibt, wo Bild und TEXT nebeneinander stehen; dort darf mehr Luft sein. */ .dts-saisonkarten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dts-blockabstand); } .dts-saisonkarte { position: relative; isolation: isolate; color: #fff; } .dts-saisonkarte__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* Kein Verlauf ueber die ganze Kachel, sondern ELLIPSEN dort, wo Schrift steht — dasselbe Mittel wie beim Panorama der Startseite (Abschnitt 61). Der Verlauf von unten war zweimal falsch: im ersten Anlauf zu schwach (die Augenzeile kam auf Kontrast 4,23 gegen die Grenze 4,5), danach zu dunkel — er deckte bis auf 88 % der Hoehe hinauf und nahm dem Bild den Himmel. Ein Verlauf ueber die ganze Breite kann beides nicht zugleich: er verdunkelt ueberall dort mit, wo gar keine Schrift steht. Drei Ellipsen statt dessen: eine ueber Augenzeile, Titel und Verweiswort (die stehen alle links), eine kleine unter dem Pfeil am rechten Rand, und eine flache, schwache entlang der Haarlinie dazwischen. Die Lagen sind gemessen, nicht geschaetzt — und zwar bei DREI Fensterbreiten, weil die Schriftgroessen an `clamp()` haengen, die Kachelhoehe aber an der Breite: auf dem Telefon beginnt die Augenzeile schon bei 53 % der Hoehe, bei 1440 px erst bei 65 %. Die Ellipse ist auf den frueheren Fall ausgelegt. */ /* Schein statt Ellipse — Wunsch des Nutzers (Abschnitt 99), dieselbe Bauart wie bei den Heros mit `--glanz`: ein Verlauf von unten, der das Bild oben frei lässt, und der Halt kommt aus dem Hof um die Buchstaben. Die drei Ellipsen davor legten eine dunkle Blase in die untere linke Ecke; auf dem Winterbild mit seinem hellen Himmel war sie als Fleck zu sehen. */ .dts-saisonkarte::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(10, 16, 24, 0.72) 0%, rgba(10, 16, 24, 0.64) 26%, rgba(10, 16, 24, 0.46) 50%, rgba(10, 16, 24, 0.22) 72%, rgba(10, 16, 24, 0) 92% ); pointer-events: none; } /* Die leichte Stufe für Fotos, die unter dem Text ohnehin dunkel sind. Sie verdunkelt im Mittel 0,261 statt 0,404 der Bildfläche — das ist der Unterschied, den man auf der Winterkarte sieht. Gesetzt wird sie im Kurzbefehl mit `ton="leicht"`, nicht hier. */ .dts-saisonkarte--leicht::after { background: linear-gradient( to top, rgba(10, 16, 24, 0.56) 0%, rgba(10, 16, 24, 0.47) 24%, rgba(10, 16, 24, 0.30) 46%, rgba(10, 16, 24, 0.12) 66%, rgba(10, 16, 24, 0) 86% ); } .dts-saisonkarte__satz { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 0 clamp(18px, 2.2vw, 30px) clamp(16px, 2vw, 26px); } .dts-saisonkarte__auge { margin: 0 0 8px; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; /* Voll deckend statt 85 %: die 15 % Durchlaessigkeit kosteten genau den Kontrast, der zur Grenze fehlte. */ color: #fff; } .dts-saisonkarte__titel { margin: 0; font-family: var(--dts-schrift-titel); font-size: clamp(28px, 3vw, 44px); line-height: 1.05; font-weight: 400; color: #fff; } /* Vier Lagen von eng nach weit, wie bei `.dts-hero--glanz`: die engen geben der Kante Halt, die weiten legen einen Hof um den ganzen Satz. Der Schein zählt nach WCAG NICHT — gemessen wird gegen den Verlauf allein; er ist Gestaltung, nicht der Grund, weshalb der Text die Grenze hält. */ .dts-saisonkarte__titel { text-shadow: 0 1px 2px rgba(8, 12, 18, 0.60), 0 0 10px rgba(8, 12, 18, 0.75), 0 0 26px rgba(8, 12, 18, 0.60), 0 0 54px rgba(8, 12, 18, 0.45); } .dts-saisonkarte__auge, .dts-saisonkarte .dts-pfeil__wort, .dts-saisonkarte .dts-pfeil__zeichen { text-shadow: 0 1px 2px rgba(8, 12, 18, 0.70), 0 0 8px rgba(8, 12, 18, 0.80), 0 0 20px rgba(8, 12, 18, 0.60); } .dts-saisonkarte .dts-pfeil { margin-top: clamp(12px, 1.4vw, 18px); } .dts-saisonkarte .dts-pfeil__zeichen::before { background-color: rgba(255, 255, 255, 0.45); } /* ----- Reihe gleichrangiger Spalten -------------------------------------- */ .dts-spalten__kopf { margin-bottom: clamp(26px, 3.2vw, 46px); } .dts-spalten__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dts-auge); } .dts-spalten__titel { margin: 0; font-size: clamp(26px, 2.9vw, 42px); line-height: 1.1; font-weight: 400; } /* Satz unter der Überschrift des Spaltenkopfs. `max-width` in Zeichen statt in Pixeln: so bleibt die Zeilenlänge lesbar, egal wie breit das Fenster wird. */ .dts-spalten__text { margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 62ch; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; color: var(--dts-grau); } .dts-spalten__reihe { display: grid; gap: clamp(26px, 3vw, 52px); align-items: start; } .dts-spalten__reihe--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dts-spalten__reihe--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dts-spalten__reihe--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Die Spalten unter einer Kopfzeile tragen oben eine Haarlinie — im Entwurf trennt sie die Kopfzeile von den Feldern und läuft durch. Eine Reihe ohne Kopfzeile (die mit den Nummern) hat sie nicht, deshalb hängt sie an der Kopfzeile. NICHT über einem Bild: dort wäre sie ein Strich im Nichts, weil das Foto die Trennung schon leistet. */ .dts-spalten__kopf ~ .dts-spalten__reihe .dts-spalte:not(.dts-spalte--bild) { padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--dts-linie); } .dts-spalte__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: clamp(16px, 1.8vw, 24px); } .dts-spalte__nummer { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; color: var(--dts-auge); } .dts-spalte__titel { margin: 0 0 10px; font-family: var(--dts-schrift-titel); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.2; font-weight: 400; } .dts-spalte__text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dts-grau); } .dts-spalte .dts-pfeil { margin-top: clamp(16px, 1.8vw, 24px); } /* ----- Grünes Band mit grosser Zahl -------------------------------------- */ .dts-zahlband { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--dts-spalt); align-items: center; padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 46px); background-color: var(--dts-gruen); color: var(--dts-grund); } .dts-zahlband__links { display: flex; align-items: baseline; gap: clamp(18px, 2.2vw, 34px); } .dts-zahlband__zahl { margin: 0; font-family: var(--dts-schrift-titel); font-size: clamp(46px, 5.2vw, 74px); line-height: 1; font-weight: 300; color: var(--dts-grund); } .dts-zahlband__auge { margin: 0 0 8px; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 241, 234, 0.72); } .dts-zahlband__titel { margin: 0; font-family: var(--dts-schrift-titel); font-size: clamp(24px, 2.6vw, 36px); line-height: 1.1; font-weight: 400; color: var(--dts-grund); } .dts-zahlband__text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(244, 241, 234, 0.88); } .dts-zahlband .dts-pfeil { margin-top: clamp(14px, 1.6vw, 20px); } .dts-zahlband .dts-pfeil__zeichen::before { background-color: rgba(244, 241, 234, 0.4); } /* ----- Gefüllter grüner Knopf statt Pfeilzeile --------------------------- */ .dts-pfeil--knopf .dts-pfeil__link, .dts-pfeil--knopf.dts-pfeil--offen { display: inline-flex; gap: clamp(28px, 4vw, 64px); padding: 15px clamp(18px, 1.8vw, 24px); background-color: var(--dts-gruen); color: var(--dts-grund); transition: background-color 0.18s ease; } .dts-pfeil--knopf .dts-pfeil__link:hover, .dts-pfeil--knopf .dts-pfeil__link:focus { background-color: var(--dts-gruen-hell); } /* Im Knopf gibt es keine Haarlinie — der Rahmen des Knopfes leistet, was sonst die Linie leistet: das Wort vom Pfeil zu trennen. */ .dts-pfeil--knopf .dts-pfeil__zeichen { flex: 0 0 auto; } .dts-pfeil--knopf .dts-pfeil__zeichen::before { content: none; } /* ----- Schmale Fenster ---------------------------------------------------- */ @media only screen and (max-width: 859px) { .dts-saisonkarten { grid-template-columns: minmax(0, 1fr); } .dts-spalten__reihe, .dts-spalten__reihe--zwei, .dts-spalten__reihe--drei, .dts-spalten__reihe--vier { grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 4vw, 32px); } .dts-zahlband { grid-template-columns: minmax(0, 1fr); row-gap: clamp(20px, 3vw, 30px); } } /* ========================================================================== Kopfmenü über die volle Inhaltsbreite -------------------------------------------------------------------------- Totals Kopfzeile „seven" setzt das Menü in einen Behälter mit `margin-right: auto` (`wpex-mr-auto`). Der drückt es nach links, und rechts blieb ein Streifen von 256 px frei: das Menü endete bei 1104 px, während Logo und Inhaltsspalte bis 1360 px reichen. Jetzt wächst der Behälter über die ganze verbleibende Breite, und die Posten verteilen sich darin. „Buchen" steht damit bündig an derselben Kante wie jeder Block der Seite darunter. Nur `> .main-navigation-ul` — die Untermenüs sind ebenfalls `ul` und dürfen davon nichts abbekommen. ========================================================================== */ #site-header-flex #site-navigation-wrap { flex: 1 1 auto; margin-inline-end: 0; /* Der Behaelter zentriert sein Kind („navbar-style-seven"). Ohne diese Zeile waere er zwar breit, das Menue darin aber weiterhin nur so breit wie seine Posten — es rueckte in die Mitte und der Streifen rechts bliebe. Gemessen: Posten begannen bei 451 statt 336 und endeten trotzdem 115 px vor der Kante. */ justify-content: stretch; } #site-header-flex #site-navigation { flex: 1 1 auto; } /* Rechtsbündig statt gleichmässig verteilt. `space-between` stammt aus der Zeit mit sechs Hauptpunkten; seit es vier sind (Abschnitt 107) riss es Lücken von über 130 px zwischen die Posten — gemessen bei 1280 px: Kanten bei 294, 545, 824 und 1118. Jetzt stehen die drei Punkte als Gruppe neben „Buchen", und „Buchen" bleibt an der 1280er-Kante wie jeder Block darunter. Die Breite von 100 % bleibt: sie ist es, die den Behälter bis an die Kante zieht. Ohne sie wäre das Menü nur so breit wie seine Posten und rutschte in die Mitte (siehe den Kommentar oben). */ #site-navigation > .main-navigation-ul { width: 100%; justify-content: flex-end; column-gap: clamp(18px, 2.4vw, 40px); } /* ========================================================================== Seite „Das Wohnzimmer" -------------------------------------------------------------------------- Neu sind zwei Kleinigkeiten — die Pfadzeile über dem ersten Kapitel und der Spruch über die Breite. Alles andere kommt aus den vorhandenen Bausteinen. ========================================================================== */ .dts-pfad, .dts-spruch { width: min(1280px, 90%); margin-inline: auto; } /* ----- Hero mit Schein statt Schleier ------------------------------------ Auftrag: „Im Hero wieder mit dem Glow arbeiten und den Hintergrund des Textes entfernen." Im Entwurf liegt der Text in einem hellen Kasten; der ist weg, die Schrift steht frei auf dem Foto. WAS EIN SCHEIN KANN UND WAS NICHT. Er folgt den Buchstaben, dunkelt also nur dort, wo wirklich Schrift steht — das Bild bleibt viel heller als unter einem Schleier. Aber: die WCAG-Rechnung kennt ihn nicht. Sie misst Schriftfarbe gegen Hintergrundfarbe, und ein `text-shadow` steht in keiner der beiden Grössen. Deshalb beides zusammen, wie dem Nutzer vorgeschlagen: der Schein trägt die Lesbarkeit, ein DEUTLICH schwächerer Schleier hält den Messwert. Der gemeinsame Saum von `--tief` geht bis 0,80 Deckkraft; hier sind es 0,62. 0,62 ist gemessen, nicht geschaetzt. Bei 0,46 — dem ersten Versuch — fiel die Ueberschrift auf Kontrast 2,48 gegen die Grenze 3,0 und der leise Absatz auf 3,11 gegen 4,5; der Schein haelt sie lesbar, aber die Rechnung sieht ihn nicht. Vier Profile durchgerechnet, 0,62 ist das schwaechste, das alle vier Texte ueber die Grenze bringt. NACHGEZOGEN auf 0,68: der Hero der Schlafzimmerseite ist rechts hell (Fenster und weisse Bettwaesche), genau dort steht der erste Absatz. Bei 0,62 fiel er auf 4,13 gegen die Grenze 4,5. Mit 0,68 liegt er bei 5,03; die beiden anderen Glanz-Heros gewinnen dadurch nur dazu. ========================================================================== */ .dts-hero-row:has(.dts-hero--glanz) .dts-hero::after { background: linear-gradient( to top, /* 0,72 seit Abschnitt 86: die Hero-Saetze stehen jetzt einheitlich auf 20 px, dadurch decken sie mehr Bildpunkte ab. Auf der Schlafzimmerseite fiel der erste Satz damit auf 4,42 gegen die Grenze 4,5; mit 0,72 sind es 5,06. Davor 0,68, davor 0,62. */ rgba(10, 16, 24, 0.72) 0%, rgba(10, 16, 24, 0.66) 30%, rgba(10, 16, 24, 0.54) 55%, rgba(10, 16, 24, 0.33) 75%, rgba(10, 16, 24, 0) 95% ); } /* Vier Lagen, von eng nach weit. Die engen geben der Kante Halt, die weiten legen einen Hof um den ganzen Satz — eine einzelne Lage müsste so stark sein, dass sie als Schmier um die Buchstaben sichtbar würde. */ .dts-hero--glanz .dts-hero__titel { text-shadow: 0 1px 2px rgba(8, 12, 18, 0.60), 0 0 10px rgba(8, 12, 18, 0.75), 0 0 26px rgba(8, 12, 18, 0.60), 0 0 54px rgba(8, 12, 18, 0.45); } .dts-hero--glanz .dts-hero__auge, .dts-hero--glanz .dts-hero__sub { text-shadow: 0 1px 2px rgba(8, 12, 18, 0.70), 0 0 8px rgba(8, 12, 18, 0.80), 0 0 20px rgba(8, 12, 18, 0.60); } .dts-hero__sub--leise { margin-top: 12px; /* 0,92 statt 0,82: leiser als der erste Absatz, aber noch messbar über der Grenze. Bei 0,82 lag der schlechteste Bildpunkt auf 4,17 gegen 4,5 — die Stufen 0,82 / 0,88 / 0,92 / 1,0 einzeln durchgerechnet. */ color: rgba(255, 255, 255, 0.92); } .dts-hero--paar .dts-hero__sub--leise { grid-column: 2; margin: 12px 0 10px; } /* ----- Pfadzeile --------------------------------------------------------- */ .dts-pfad { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; /* Ohne Linie darunter — Wunsch des Nutzers (Abschnitt 96). Der Innenabstand bleibt: er trug den Abstand zur Linie und trägt ihn jetzt zum ersten Kapitel, sonst rückte die ganze Seite nach oben. Die Zeile steht auf allen fünf Unterseiten, die Regel gilt für alle. */ padding-bottom: clamp(16px, 1.8vw, 24px); } .dts-pfad__hier, .dts-pfad__zurueck { margin: 0; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dts-auge); text-decoration: none; } .dts-pfad__zurueck { display: inline-flex; align-items: center; gap: 9px; } a.dts-pfad__zurueck:hover, a.dts-pfad__zurueck:focus { color: var(--dts-gruen); } .dts-pfad__zeichen { font-size: 13px; } /* ----- Spruch über die Breite -------------------------------------------- */ .dts-spruch__auge { margin: 0 0 16px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dts-auge); } .dts-spruch__titel { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 50px); line-height: 1.08; font-weight: 400; hyphens: auto; } .dts-spruch__text { margin: 0; max-width: 62ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--dts-grau); } /* Der leise Absatz muss auf schmalen Fenstern MIT zurückgesetzt werden. Ohne diese Regel blieb er auf `grid-column: 2`, obwohl die Medienabfrage weiter oben nur noch EINE Spalte vorsieht — das Raster legte daraufhin eine zweite Spalte still dazu, und die 1fr-Spalte daneben schrumpfte auf null. Gemessen bei 375 px: Überschrift 0 px breit und 1209 px hoch, ein Buchstabe je Zeile. Die Regel steht HIER und nicht oben in der Medienabfrage, weil die beiden Selektoren dieselbe Spezifität haben (0-2-0) und dann die Reihenfolge entscheidet: was später in der Datei steht, gewinnt — auch innerhalb einer Medienabfrage. */ @media only screen and (max-width: 859px) { .dts-hero--paar .dts-hero__sub--leise { grid-column: 1; } } /* ========================================================================== Einzelbild und zweiter Verweis -------------------------------------------------------------------------- Zwei Kleinigkeiten für die Wohnküche, beide anderswo weiterverwendbar. ========================================================================== */ .dts-einzelbild { width: min(1280px, 90%); margin: 0 auto; } .dts-einzelbild__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } .dts-einzelbild__unterschrift { margin: 12px 0 0; font-family: var(--dts-schrift-text); font-size: 13px; line-height: 1.5; color: var(--dts-grau); } /* Knopf und Rückweg nebeneinander. Umbrechen dürfen sie — auf dem Telefon stehen sie sonst über den Rand hinaus. */ .dts-kapitel__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 2.4vw, 36px); } .dts-kapitel__wege .dts-pfeil { margin: clamp(22px, 2.4vw, 34px) 0 0; } .dts-kapitel__zurueck { margin-top: clamp(22px, 2.4vw, 34px); } /* Auf schmalen Fenstern reicht der schwache Saum des Glanz-Heros nicht. Der Grund liegt nicht am Saum, sondern an der Geometrie: unter 860 px stehen Titel und Sätze untereinander statt nebeneinander, der Textblock wird dadurch hoch und die Augenzeile rutscht bis auf 32 % der Hoehe hinauf — dorthin, wo der Saum von unten schon fast nichts mehr deckt. Gemessen auf der Wohnküche (heller Hero, ausgebrannte Fenster): 860 px Augenzeile 4,83 Satz 5,00 — reicht 375 px Augenzeile 2,58 Satz 3,96 — reicht nicht (Grenze 4,5) Sechs Profile durchgerechnet; das hier ist das schwaechste, das alle vier Texte ueber die Grenze bringt (Augenzeile 5,25, Satz 7,80). Dass es kraeftig ausfaellt, faellt kaum auf: auf dem Telefon bedeckt der Text ohnehin rund 60 % des Heros. */ @media only screen and (max-width: 859px) { .dts-hero-row:has(.dts-hero--glanz) .dts-hero::after { background: linear-gradient( to top, rgba(10, 16, 24, 0.80) 0%, rgba(10, 16, 24, 0.75) 35%, rgba(10, 16, 24, 0.64) 62%, rgba(10, 16, 24, 0.38) 82%, rgba(10, 16, 24, 0) 100% ); } } /* Merkzeile unter dem Hero-Titel: Stichworte statt Satz. Voll deckend, weil sie mit 12 px und weiter Sperrung zu den empfindlichsten Texten auf einem Foto gehört — dieselbe Lehre wie bei den Augenzeilen (Abschnitt 76). */ .dts-hero__marken { margin: clamp(18px, 2vw, 28px) 0 0; font-family: var(--dts-schrift-text); /* Dieselbe Groesse wie jeder andere Text unter einer Hero-Ueberschrift. ANZUMERKEN: sie steht in Versalien und weit gesperrt und WIRKT damit groesser als ein Satz derselben Punktgroesse. Gleich gross ist sie trotzdem — so war es verlangt. */ font-size: clamp(16px, 1.4vw, 20px); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; } /* Eine einzelne Angabe der Merkzeile bricht nicht um; zwischen den Angaben darf die Zeile umbrechen. Siehe die Erklärung in der functions.php. */ .dts-hero__marke { white-space: nowrap; } /* ========================================================================== Kontaktseite -------------------------------------------------------------------------- Zwei Zeilen: Erreichbarkeiten neben dem Formular, darunter Anschrift neben der Karte. Beide benutzen dieselbe Teilung wie die Kapitel der anderen Seiten (1.08fr / Spalt / 1fr, ohne Spalt wo eine Fläche anliegt), damit die Seite sich nicht anders liest als der Rest. ========================================================================== */ .dts-kontakt, .dts-anfahrt { width: min(1280px, 90%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: stretch; } .dts-kontakt__spalte, .dts-anfahrt__spalte { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 3vw, 48px); padding-inline-end: clamp(24px, 3.4vw, 56px); } .dts-kontakt__auge, .dts-anfahrt__auge { margin: 0 0 14px; font-family: var(--dts-schrift-text); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dts-auge); } .dts-kontakt__titel, .dts-anfahrt__titel { margin: 0 0 clamp(14px, 1.6vw, 22px); font-size: clamp(28px, 2.9vw, 42px); line-height: 1.1; font-weight: 400; } .dts-kontakt__person { margin: 0 0 clamp(20px, 2.4vw, 32px); font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; } /* Beschriftung und Wert als Paar: die Beschriftung klein und gesperrt wie eine Augenzeile, der Wert in der Titelschrift — so tragen Telefon und E-Mail dasselbe Gewicht wie die Zahlen der Eckdatenleiste. */ .dts-kontakt__marke { margin: 0 0 6px; font-family: var(--dts-schrift-text); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dts-auge); } .dts-kontakt__wert { margin: 0 0 clamp(18px, 2vw, 26px); font-family: var(--dts-schrift-titel); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; } .dts-kontakt__wert a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; } .dts-kontakt__wert a:hover, .dts-kontakt__wert a:focus { border-bottom-color: var(--dts-gruen); } .dts-kontakt__text { margin: clamp(6px, 1vw, 12px) 0 0; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; color: var(--dts-grau); } /* ----- Das Formular ------------------------------------------------------- */ .dts-formular { background-color: var(--dts-flaeche); padding: clamp(28px, 3.4vw, 56px); } .dts-formular__titel { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; font-weight: 400; } .dts-formular__vorspann { margin: 0 0 clamp(20px, 2.4vw, 30px); font-size: 13px; line-height: 1.6; /* Nicht --dts-grau: auf der getönten Fläche misst #666666 nur 4,37 gegen die Grenze 4,5 (Abschnitt 94). Geerbt sind es 7,65. */ color: inherit; } .dts-formular__feld { margin-bottom: clamp(14px, 1.6vw, 20px); } /* Zwei Felder nebeneinander, unter Totals Umbruchpunkt untereinander. */ .dts-formular__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 1.6vw, 22px); } .dts-formular label { display: block; margin-bottom: 7px; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; line-height: 1.4; } .dts-formular__pflicht { color: var(--dts-gruen); } /* Die Felder selbst: heller Grund auf der getönten Fläche, keine Rundung, eine Haarlinie als Rahmen. Totals eigene Feldgestaltung wird hier bewusst überschrieben — sie bringt Rundungen und Schatten mit, die neben den geraden Kanten dieser Seite fremd wirken. */ .dts-formular input[type="text"], .dts-formular input[type="email"], .dts-formular input[type="tel"], .dts-formular input[type="number"], .dts-formular select, .dts-formular textarea { width: 100%; box-sizing: border-box; padding: 13px 14px; background-color: #f7f5f0; /* 0,45 und nicht weniger: die Füllung des Feldes hebt sich von der getönten Fläche nur mit 1,21 ab, die Begrenzung muss den Rest tragen. Bei 0,45 misst der Rahmen 3,21 gegen die Fläche und 3,86 gegen die Füllung — beide über der Grenze 3,0 für Bedienelemente. Mit den ursprünglichen 0,12 waren es 1,31 und 1,58. */ border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 0; box-shadow: none; font-family: var(--dts-schrift-text); font-size: 15px; line-height: 1.4; color: inherit; transition: border-color 0.18s ease; } .dts-formular textarea { min-height: 118px; resize: vertical; } .dts-formular input:focus, .dts-formular select:focus, .dts-formular textarea:focus { outline: 2px solid var(--dts-gruen); outline-offset: 1px; border-color: var(--dts-gruen); } .dts-formular ::placeholder { color: rgba(0, 0, 0, 0.38); } /* Drei Klassen im Selektor, und das ist nicht Vorsicht, sondern Notwendigkeit: Contact Form 7 bringt `.wpcf7 form p:last-of-type { margin: 0 }` mit — das sind zwei Klassen und zwei Elemente, und sein Stylesheet wird NACH dem Child-Theme eingebunden. Mit dem blossen Klassennamen fiel der Abstand über dem Datenschutzhinweis auf 0 (gemessen, bevor es auffiel). */ .dts-formular .wpcf7 p.dts-formular__hinweis { margin: clamp(16px, 2vw, 24px) 0 0; font-size: 13px; line-height: 1.6; /* Nicht --dts-grau: auf der getönten Fläche misst #666666 nur 4,37 gegen die Grenze 4,5 (Abschnitt 94). Geerbt sind es 7,65. */ color: inherit; } .dts-formular__hinweis a { color: inherit; } .dts-formular__absenden { margin-top: clamp(18px, 2.2vw, 28px); } /* Der Sendeknopf trägt dieselbe Form wie die grünen Knöpfe der Seite. Totals Knopfregeln greifen über `.wpcf7 input[type=submit]`; deshalb steht hier dieselbe Spezifität und mehr. */ .dts-formular .dts-formular__absenden input[type="submit"] { display: inline-flex; align-items: center; min-width: 220px; padding: 16px 26px; background-color: var(--dts-gruen); border: 1px solid var(--dts-gruen); border-radius: 0; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .dts-formular .dts-formular__absenden input[type="submit"]:hover, .dts-formular .dts-formular__absenden input[type="submit"]:focus { background-color: var(--dts-gruen-hell); border-color: var(--dts-gruen-hell); } /* Contact Form 7 legt um jedes Feld ein `span.wpcf7-form-control-wrap`. Ohne `display: block` sässe das Feld in einer Zeilenschachtel und die Breite von 100 % bezöge sich auf nichts. */ .dts-formular .wpcf7-form-control-wrap { display: block; } /* Contact Form 7 läuft durch `wpautop`: um jede Zeile legt es ein

und zwischen Beschriftung und Feld ein
. Beides ist hier überflüssig — die Beschriftung ist schon ein Block, und die Abstände macht `__feld`. `p:not([class])` statt `p`: sonst verlöre auch `__hinweis` seinen Abstand. Ein Elementselektor mit zwei Klassen davor schlägt eine einzelne Klasse. */ .dts-formular p:not([class]) { margin: 0; } .dts-formular br { display: none; } .dts-formular .wpcf7-not-valid-tip { margin-top: 5px; font-size: 12px; color: #8a2b2b; } .dts-formular .wpcf7-response-output { margin: clamp(16px, 2vw, 22px) 0 0; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, 0.2); font-size: 14px; line-height: 1.5; } /* ----- Anfahrt und Karte -------------------------------------------------- */ .dts-anfahrt__adresse { margin: 0; font-style: normal; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.75; } .dts-anfahrt__zusatz { margin: clamp(12px, 1.4vw, 18px) 0 0; font-size: clamp(15px, 1.1vw, 16px); line-height: 1.65; /* Nicht --dts-grau: seit die Spalte getönt ist (Abschnitt 115), misst #666666 darauf 4,37 gegen die Grenze 4,5. Geerbt sind es 7,65 — dieselbe Stelle wie in den Abschnitten 94 und 107. */ color: inherit; } /* Die Fläche vor dem Klick: dieselbe Höhe wie die Karte später, damit beim Laden nichts springt. */ .dts-anfahrt__karte { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; min-height: clamp(260px, 26vw, 380px); padding: clamp(24px, 3vw, 44px); background-color: var(--dts-flaeche); } .dts-anfahrt__karte--geladen { padding: 0; gap: 0; } .dts-anfahrt__karte iframe { display: block; width: 100%; height: 100%; min-height: clamp(260px, 26vw, 380px); border: 0; } .dts-anfahrt__karteninfo { margin: 0; max-width: 44ch; font-size: 14px; line-height: 1.6; /* Nicht --dts-grau: auf der getönten Fläche misst #666666 nur 4,37 gegen die Grenze 4,5 (Abschnitt 94). Geerbt sind es 7,65. */ color: inherit; } .dts-anfahrt__kartenknopf { margin: 0; } .dts-anfahrt__schalter { display: inline-flex; align-items: center; padding: 13px 22px; background-color: var(--dts-gruen); border: 1px solid var(--dts-gruen); border-radius: 0; font-family: var(--dts-schrift-text); font-size: 13px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: #ffffff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .dts-anfahrt__schalter:hover, .dts-anfahrt__schalter:focus { background-color: var(--dts-gruen-hell); border-color: var(--dts-gruen-hell); } /* ----- Kontaktseite auf schmalen Fenstern --------------------------------- */ @media only screen and (max-width: 859px) { .dts-kontakt, .dts-anfahrt { grid-template-columns: minmax(0, 1fr); } .dts-kontakt__spalte, .dts-anfahrt__spalte { padding-inline-end: 0; padding-block: clamp(22px, 4vw, 34px); } .dts-formular__paar { grid-template-columns: minmax(0, 1fr); } .dts-formular .dts-formular__absenden input[type="submit"] { width: 100%; justify-content: center; } } /* ========================================================================== Die alten Inhaltsseiten -------------------------------------------------------------------------- Neun Seiten sind nie umgebaut worden: Preise 2026 und 2027, Grundausstattung, Rund um die Buchung, Hausordnung, Hundeknigge, Restaurant-Vorschläge, Impressum, Datenschutz. Sie tragen gewöhnliches Mark-up und damit Totals Vorgaben — gemessen bei 1280 px: h2 35 px / 600 h3 30 px / 600 h4 25 px / 600 p 19,2 px / 400 li 16 px td 16 px Der Absatz stimmt schon (die 120-%-Regel weiter oben), Listen und Tabellenzellen liegen aber 20 % darunter — im selben Fliesstext. Und die Überschriften stehen auf festen Pixelwerten mit Gewicht 600, während die Startseite fliessende Grössen mit Gewicht 500 benutzt. ABGRENZUNG: `:not([class])`. Jedes Element unserer eigenen Bausteine trägt eine Klasse (`dts-kapitel__titel`, `dts-fakt`, `dts-merkmal` …), die alten Seiten haben blankes Mark-up. Das trennt beides sauber — und zwar auch auf `/datenschutz/`, wo es überhaupt keine `vc_row` gibt und eine Regel über die Zeilenklasse ins Leere liefe. ========================================================================== */ .single-page-content h2:not([class]) { font-size: clamp(30px, 2.9vw, 44px); line-height: 1.1; font-weight: 500; } .single-page-content h3:not([class]) { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; font-weight: 500; } .single-page-content h4:not([class]) { font-size: clamp(20px, 1.6vw, 25px); line-height: 1.2; font-weight: 500; } /* `1.2rem` und nicht `120 %`: die Prozentangabe rechnet vom Elternteil und würde sich in verschachtelten Listen aufschaukeln. 1,2 rem sind bei einer Wurzelgrösse von 16 px dieselben 19,2 px wie beim Absatz. Bei `td`/`th` steht KEIN `:not([class])`: die Preistabellen bringen eigene Klassen mit (`price_table`, `price_middle`), und ein Bauteil dieses Themes benutzt überhaupt keine Tabelle — nachgezählt, null Treffer für `