/** * Dorina Hoppmann – Child-Theme-Styles * * Übersetzt aus den Sass-Quellen der ursprünglichen Seite * (dorina-hoppmann.de/style/_*.sass). Die Sass-Dateien sind und bleiben die * Referenz für alle Werte – bei Zweifeln dort nachsehen, nicht im kompilierten * style.css. * * Gliederung * 1. Variablen * 2. Typografie * 3. Layout-Helfer * 4. Geschwungene Sektionstrenner * 5. Bildmasken * 6. Blatt-Trenner * 7. Sektionen * 8. Rücksicht auf reduzierte Bewegung */ /* ============================================================ 1. Variablen ============================================================ Farben kommen aus der Kadence-Palette (Customizer → Farben) und sind hier nur als Fallback hinterlegt. Zuordnung folgt der Kadence-Konvention (1–2 Akzent, 3–6 Text, 7–9 Hintergrund), damit die Voreinstellungen des Themes von sich aus richtig greifen: palette1 #1E582F $c-2 Überschriften, Links, Buttons palette2 #226335 --- Hover-Grün (entspricht lighten($c-2, 3)) palette3 #243E20 $c-1 kräftigster Text palette4 #243E20 $c-1 Fließtext palette5 #A3A367 $c-3 Akzent palette6 #6E7A66 --- gedämpfter Text (abgeleitet) palette7 #E4EADA $c-4 Sektionsflächen, Kacheln palette8 #FFFFF2 $c-5 Seitenhintergrund palette9 #FFFFFF $c-0 Weiß */ :root { /* Höhe der Wellentrenner: viewBox 1920 × 100 → 100/1920 = 5.2083 %. Bezug ist --global-vw (die Seitenbreite ohne Rollbalken, die Kadence setzt), nicht vw. Sonst rechnet der Aussenabstand mit Rollbalken, die Welle selbst aber ohne – und zwischen beiden bleibt eine Fuge. */ --dh-wave-h: calc(var(--global-vw, 100vw) / 19.2); /* Breakpoints der Originalseite (_variables.sass) – als Referenz. CSS kennt keine Variablen in Media Queries, die Werte stehen unten ausgeschrieben: 1200px, 992px, 767px, 520px. */ --dh-maxwidth: 1400px; --dh-gutter: 5%; } /* ============================================================ 2. Typografie ============================================================ Die clamp()-Werte stammen 1:1 aus _global-inline.sass. Kadence kann im Customizer keine fluiden Größen mit drei Werten abbilden, deshalb stehen sie hier. */ /* Zwei Schriftschnitte, die Kadence nicht mitlädt. Kadence holt zu jeder Schrift nur die im Customizer gewählte Stärke – Barlow 400/700 und Abhaya Libre 400. Die alte Seite setzt ihren Fliesstext aber in Barlow Medium (500) und ihre Überschriften in Abhaya Libre Bold (700). Ohne diese beiden Angaben rechnet der Browser sich die Stärken aus den vorhandenen Schnitten zurecht: der Fliesstext wirkt zu dünn, die Überschriften zu plump. Dieselben Schnitte wie bei Google Fonts, im selben woff2-Format und mit denselben Teilmengen, die Kadence für die übrigen Schnitte ablegt. Die TTF-Dateien der alten Seite wogen zusammen 700 KB und wurden vor jedem ersten Textbild geladen; als woff2 sind es 44 KB für Latein, der Rest nur, wenn wirklich ein osteuropäisches Zeichen auf der Seite steht. */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/7cHqv4kjgoGqM7E3_-gs51ostz0rdg.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; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/7cHqv4kjgoGqM7E3_-gs6Vostz0rdom9.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; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/7cHsv4kjgoGqM7E_CfPI42ouvToJdLm8.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; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/7cHsv4kjgoGqM7E_CfPI42ogvToJdLm8BvE.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; } @font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/e3t5euGtX-Co5MNzeAOqinEYx2zCrdZJyIU9BQ.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; } @font-face { font-family: "Abhaya Libre"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/e3t5euGtX-Co5MNzeAOqinEYx2zCo9ZJyIU9Ba0c.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; } body { font-size: clamp(18px, 2vw, 21px); line-height: 1.5em; } /* Absätze sind im Original halbfett – das prägt den Textsatz der ganzen Seite spürbar und wird beim Nachbauen leicht übersehen. */ p { font-weight: 500; margin: 0 0 1em 0; } p:last-child { margin: 0; } h1, h2, h3, h4, h5, h6 { line-height: 1.5em; margin: 1em 0 0.5em 0; } h1 { font-size: clamp(40px, 8vw, 80px); line-height: 1em; } h2 { font-size: clamp(40px, 5vw, 80px); line-height: 1em; margin: 0 0 5% 0; } h3 { font-size: clamp(20px, 4vw, 30px); line-height: 1.2em; } h4 { font-size: 1.6em; font-weight: 400; } h5 { font-size: 1.3em; font-weight: 400; } h6 { font-size: 1em; font-weight: 400; } /* Links ohne Unterstreichung, erst beim Überfahren mit der Maus. */ .entry-content a:where(:not(.wp-element-button):not(.button):not(.kb-button)) { text-decoration: none; } .entry-content a:where(:not(.wp-element-button):not(.button):not(.kb-button)):hover { text-decoration: underline; } ::selection { background-color: #e9e9d4; /* lighten($c-3, 45) */ } blockquote { font-size: 1.2em; line-height: 1.6em; border: none; font-weight: 400; font-style: italic; padding: 30px; } /* ============================================================ 3. Layout-Helfer ============================================================ Entsprechen den Mixins center-content / h-gutter / v-gutter. Wichtig: box-sizing bleibt content-box, damit die 1400px reine Inhaltsbreite sind und die 5 % Innenabstand zusätzlich dazukommen. */ .dh-center { max-width: var(--dh-maxwidth); box-sizing: content-box; margin-left: auto; margin-right: auto; } .dh-gutter { padding-left: var(--dh-gutter); padding-right: var(--dh-gutter); } /* Der .entry-content davor ist kein Schmuck: Kadence gibt jedem Block im Inhalt „margin-bottom: var(--global-md-spacing)“ (32 px) mit. Ohne die zweite Klasse im Selektor gewinnt diese Regel und alle Abstände zwischen den Abschnitten schrumpfen auf ein Fünftel. */ .entry-content .dh-v-gutter { margin-top: 10%; margin-bottom: 10%; } .entry-content .dh-v-gutter-top { margin-top: 10%; } .entry-content .dh-v-gutter-bottom { margin-bottom: 10%; } @media (max-width: 767px) { .entry-content .dh-v-gutter { margin-top: 15%; margin-bottom: 15%; } .entry-content .dh-v-gutter-top { margin-top: 15%; } .entry-content .dh-v-gutter-bottom { margin-bottom: 15%; } } /* ============================================================ 4. Geschwungene Sektionstrenner ============================================================ Kadence bringt neun feste Trennerformen mit, aber keinen Upload für eigene SVGs. Die drei Schwünge der Originalseite laufen deshalb als mask-image mit Hintergrundfarbe – so bleibt die Farbe an die Palette gebunden und lässt sich im Customizer ändern. Die Höhe steht in --dh-wave-h und entspricht der viewBox 1920 × 100 des Original-SVG. */ .dh-wave-inset, .dh-wave-band { position: relative; } .dh-wave-inset::after, .dh-wave-band::before, .dh-wave-band::after { content: ""; position: absolute; left: 0; right: 0; /* Feste Höhe statt aspect-ratio: so rechnen Welle und Aussenabstand mit demselben Wert und die Welle kann weder überstehen noch eine Fuge lassen. mask-size unten zieht die Grafik auf genau diese Höhe. */ height: var(--dh-wave-h); pointer-events: none; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* a) Hero: der Schwung liegt innerhalb der Sektion am unteren Rand und hat die Farbe des folgenden Bereichs (Seitenhintergrund). */ .dh-wave-inset::after { bottom: 0; z-index: 1; background-color: var(--global-palette8, #FFFFF2); -webkit-mask-image: url("../img/wave-hero.svg"); mask-image: url("../img/wave-hero.svg"); } /* b) Farbband: die Schwünge liegen ausserhalb und setzen die Sektionsfarbe nach oben und unten fort. Der Aussenabstand hält den Platz frei, den die Wellen im Original als echte Elemente eingenommen haben – und zusätzlich den normalen Abstand zwischen zwei Abschnitten, sonst rückt der folgende Text in die Welle hinein. .entry-content im Selektor, weil Kadence sonst mit „margin: 0“ für Gruppen mit Hintergrundfarbe dazwischenfunkt. */ .entry-content .dh-wave-band { margin-top: calc(var(--dh-wave-h) + 10%); margin-bottom: calc(var(--dh-wave-h) + 10%); } @media (max-width: 767px) { .entry-content .dh-wave-band { margin-top: calc(var(--dh-wave-h) + 15%); margin-bottom: calc(var(--dh-wave-h) + 15%); } } .dh-wave-band::before { bottom: 100%; background-color: var(--global-palette7, #E4EADA); -webkit-mask-image: url("../img/wave-top.svg"); mask-image: url("../img/wave-top.svg"); } .dh-wave-band::after { top: 100%; background-color: var(--global-palette7, #E4EADA); -webkit-mask-image: url("../img/wave-bottom.svg"); mask-image: url("../img/wave-bottom.svg"); } /* c) Nur unten – für den Kopfbereich der Unterseiten (früher sub-head.php). */ .dh-wave-below { position: relative; margin-bottom: var(--dh-wave-h); } .dh-wave-below::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--dh-wave-h); pointer-events: none; background-color: var(--global-palette7, #E4EADA); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: url("../img/wave-bottom.svg"); mask-image: url("../img/wave-bottom.svg"); } /* ============================================================ 5. Bildmasken ============================================================ Die organischen Bildformen der Originalseite. Als Block-Style umgesetzt und nicht über das Mask-Feld im Block-Inspektor: dort hinge die Maske an einer Mediathek-URL und ginge beim Bildwechsel verloren. mask-position bleibt wie im Original bei 0 0 (der CSS-Standardwert), mask-size bei contain. */ .is-style-dh-mask-1 img, .is-style-dh-mask-2 img, .dh-mask-1 img, .dh-mask-2 img { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-size: contain; mask-size: contain; } .is-style-dh-mask-1 img, .dh-mask-1 img { -webkit-mask-image: url("../img/mask1.png"); mask-image: url("../img/mask1.png"); } .is-style-dh-mask-2 img, .dh-mask-2 img { -webkit-mask-image: url("../img/mask2.png"); mask-image: url("../img/mask2.png"); } /* Die Masken sitzen an einem figure-Element – dessen Standardabstände weg. */ .is-style-dh-mask-1, .is-style-dh-mask-2, .dh-mask-1, .dh-mask-2 { margin: 0; } /* ============================================================ 6. Blatt-Trenner ============================================================ Icon in der Mitte, links und rechts die gestrichelte Linie (.spacer aus _layout.sass). */ .dh-spacer { text-align: center; display: flex; align-items: center; gap: 5%; } /* Der Gruppen-Block zieht eine weitere Ebene zwischen Trenner und Blatt ein. Als Flex-Element schrumpft die auf die Restbreite zusammen und quetscht das Blatt auf ein Drittel seiner Größe. „display: contents“ nimmt sie aus dem Layout heraus, das Blatt wird damit selbst zum Flex-Element. */ .dh-spacer > .wp-block-group__inner-container { display: contents; } .dh-spacer::before, .dh-spacer::after { content: ""; display: block; height: 2px; width: 100%; background-image: url("../img/line.svg"); } .dh-spacer::before { background-position: right; } .dh-spacer::after { background-position: left; } .dh-spacer img, .dh-spacer figure { display: inline-block; margin: 0; flex-shrink: 0; } /* Die Breite steht als Inline-Stil am Bild – dagegen kommt nur !important an. Ohne das bliebe das Blatt auf dem Handy so groß wie am Rechner. */ @media (max-width: 992px) { .dh-spacer img { width: 100px !important; } } @media (max-width: 767px) { .dh-spacer img { width: 60px !important; } } /* ============================================================ 7. Sektionen ============================================================ */ /* --- Hero (_section-intro.sass) --- */ .dh-hero { text-align: center; color: #fff; background-size: cover; background-position: top center; /* Im Original: height 60vh, mindestens aber 500px. Als max() geschrieben, damit der Bereich bei sehr hohen Fenstern nicht ins Uferlose wächst. */ min-height: max(60vh, 500px); display: flex; flex-direction: column; justify-content: flex-start; padding-top: 30px; } @media (max-width: 767px) { .dh-hero { min-height: 320px; } } /* Dunkler Verlauf von oben, damit die weisse Schrift auf dem Foto lesbar bleibt. Im Original ein ::after mit 50 % Höhe und 60 % Deckkraft. */ .dh-hero::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); opacity: 0.6; z-index: 0; pointer-events: none; } @media (max-width: 767px) { .dh-hero::before { height: 80%; opacity: 0.7; } } .dh-hero > * { position: relative; z-index: 1; } .dh-hero h1 { color: #fff; margin: 0; } /* Kleine Zeile über der Überschrift – auch im Kopfbereich der Unterseiten. Sie steht im Original in der schmalen Barlow, nicht in der normalen. */ .dh-page-title { font-family: "Barlow Semi Condensed", var(--global-fallback-font, sans-serif); font-size: 16px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.1em; } /* Der Vorspann stand als

unmittelbar unter der

: eine übersprungene Ebene, die Screenreader beim Durchblättern der Gliederung als Loch lesen und die Rank Math zu Recht anmerkt. Als

stimmt die Reihenfolge – nur ist

in diesem Entwurf die 80px-Schlagzeile der Abschnitte. Also bekommt die eine Zeile hier ihr altes Aussehen zurück. */ .dh-intro-text h2 { max-width: 400px; margin-left: auto; margin-right: auto; font-family: "Barlow Semi Condensed", var(--global-fallback-font, sans-serif); font-size: 30px; line-height: 1.2; } .dh-intro-text p { max-width: 900px; margin-left: auto; margin-right: auto; } /* --- Text/Bild-Zeilen (_section-text-image.sass) --- */ /* Text und Bild nebeneinander. Zwei Varianten, weil das Markup aus zwei Quellen kommt: Der Block „Angebote" setzt Text und Bild direkt in die Zeile, ein Gruppen-Block aus dem Editor schiebt dagegen einen inner-container dazwischen. Ohne die zweite Regel stünde der Text dort über dem Bild statt daneben. */ .dh-row, .dh-row > .wp-block-group__inner-container { display: flex; gap: 10%; align-items: flex-start; } .dh-row > .wp-block-group__inner-container { flex: 1; width: 100%; } .dh-row--right, .dh-row--right > .wp-block-group__inner-container { flex-direction: row-reverse; } .dh-row--left, .dh-row--left > .wp-block-group__inner-container { flex-direction: row; } .dh-row .dh-row__text { width: 55%; } .dh-row .dh-row__image { width: 45%; } /* Kadence hängt jedem Gruppen-Block im Inhalt 32 Pixel Abstand nach unten an. In einer Flex-Zeile fällt der nicht mit dem Abstand des Abschnitts zusammen, sondern kommt obendrauf – die Zeile wird zu hoch und der Rhythmus der Abschnitte verrutscht. */ .entry-content .dh-row, .entry-content .dh-row__text, .entry-content .dh-row__image { margin-top: 0; margin-bottom: 0; } @media (max-width: 992px) { .dh-row, .dh-row > .wp-block-group__inner-container { display: block; } .dh-row .dh-row__text { /* Untereinander gestellt braucht der Text unten Luft, sonst klebt das Bild direkt unter der Schaltfläche „Jetzt anmelden“. Im Original steht dort ein leerer Absatz. */ margin: auto auto 2.5em auto; width: auto; /* Der Text bleibt linksbündig – zentrierte Terminlisten wären kaum zu lesen. */ text-align: left; } .dh-row .dh-row__image { margin: auto auto 5% auto; width: auto; max-width: 400px; } } /* Abstand zwischen den einzelnen Angeboten. Auf der alten Seite entstand er durch einen leeren Absatz am Ende jedes Textes – gut zweieinhalb Zeilen. Hier als echter Aussenabstand, mit demselben Ergebnis. Deutlich mehr wäre falsch: die Angebote gehören zusammen und sind kein eigener Abschnitt. Derselbe Abstand gilt vor dem ersten Angebot, damit es sich nicht direkt an den einleitenden Text hängt. */ .entry-content .dh-angebote { margin-top: 2.5em; } .dh-angebote .dh-row + .dh-row { margin-top: 2.5em; } /* Kadence nimmt der ersten Überschrift eines Blocks den Abstand nach oben. Im Original beginnt die Angebotsüberschrift eine Zeile tiefer als das Bild daneben – das gehört zum Rhythmus der Angebotsliste. */ .dh-angebote .dh-row__text > h3:first-child { margin-top: 1em; } /* --- Schaltfläche (stand als