/*
Theme Name: Divi Child - Vivien Rebsdat
Theme URI: https://vivienrebsdat.com
Description: Child-Theme fuer Divi 5. Haelt lokale Schriften, globale Farben und
projektspezifischen Custom-Code getrennt vom Parent-Theme, damit
Divi-Updates nichts ueberschreiben.
Author: Juergen Rahn
Template: Divi
Version: 1.0.0
Text Domain: divi-child-vivien
License: GPL-2.0-or-later
*/
/* ---------------------------------------------------------------------------
Farbpalette aus der Projektdokumentation (Abschnitt 3.1).
Als Custom Properties, damit Custom-CSS im Divi-Builder darauf zugreifen
kann: color: var(--vr-tinte);
Die gleichen Werte gehoeren zusaetzlich in den Divi-5-Variable-Manager -
dort sieht Vivien sie beim Bauen im Farbwaehler.
--------------------------------------------------------------------------- */
:root {
--vr-papier: #ffffff;
--vr-papier-warm: #f4f3f0;
--vr-tinte: #2e2a24;
--vr-senfgelb: #dda839;
--vr-senfgelb-dunkel: #b98526;
--vr-senfgelb-hell: #f8e8bd;
--vr-tuerkis: #3cb7ac;
--vr-tuerkis-hell: #a9e6da;
--vr-rosa-terrakotta: #c9836f;
--vr-font-headline: "Fraunces", Georgia, serif;
--vr-font-hand: "Caveat", cursive;
--vr-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ---------------------------------------------------------------------------
Standardtypografie.
Bewusst hier und nicht ueber Divis Schriftwaehler: Divi kennt nur Schriften,
die entweder mitgeliefert oder unter et_uploaded_fonts registriert sind.
Unsere drei Familien sind keins von beidem - sie kommen aus fonts.css. Traegt
man "Fraunces" in Divis Auswahl ein, behandelt Divi sie als Google-Schrift
und laedt sie von fonts.gstatic.com. Genau das soll nicht passieren.
Vivien waehlt im Builder also keine Schriften aus. Sie erbt sie.
--------------------------------------------------------------------------- */
body,
.et_pb_module,
.et_pb_text {
font-family: var(--vr-font-body);
color: var(--vr-tinte);
}
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
font-family: var(--vr-font-headline);
color: var(--vr-tinte);
}
/* Handschrift nur dort, wo sie bewusst gesetzt wird - als Klasse, die Vivien
im Builder unter "CSS-Klasse" eintragen kann. Fliesstext in Caveat waere
schwer lesbar. */
.vr-handschrift {
font-family: var(--vr-font-hand);
line-height: 1.4;
}
/* Seitentitel nachziehen.
Gemeldet am 2026-08-19: Kartentitel in Modulen zeigen Fraunces, die grosse
Seitenueberschrift faellt auf Georgia zurueck. Ursache ist nicht die
Ueberschriften-Ebene und auch keine fehlende Schriftdatei - beide Schnitte
liegen lokal und werden mit HTTP 200 ausgeliefert. Es ist die Spezifitaet:
h1, h2, ... (0,0,1) unsere Grundregel oben
.et_pb_module h1, ... (0,1,1) greift in Modulen - deshalb sind die
Kartentitel korrekt
.et_pb_title_container h1 (0,1,1) Divis Titelmodul - gleiche Staerke,
aber Divi laedt nicht immer vorher
Divi rendert den Seitentitel ausserhalb von .et_pb_module, deshalb blieb dort
nur die schwache Regel uebrig und die Fallback-Kette griff.
Bewusst ohne !important: Die Selektoren unten sind spezifisch genug, und
!important wuerde Vivien daran hindern, im Builder gezielt abzuweichen.
Wichtig fuer spaeter: Der Umweg ueber Divis Schriftwaehler ist keine
Alternative. Divi kennt Fraunces nicht als lokale Familie und wuerde sie von
fonts.gstatic.com nachladen - siehe Kommentar in functions.php. */
.et_pb_title_container h1,
.et_pb_title_container h2,
.et_pb_title_container .entry-title,
.et_pb_post_title .entry-title,
.et_pb_fullwidth_header h1,
.et_pb_fullwidth_header .et_pb_module_header,
#main-content .entry-title,
h1.entry-title {
font-family: var(--vr-font-headline);
color: var(--vr-tinte);
}
/* Zwei Ueberschriften, die als normales Text-Modul statt als echtes
Divi-Titel-/Heading-Element gebaut sind (Divis Font-Vererbung fuer
Ueberschriften greift dort nicht, sie zeigen ohne diese Regel die
Brotschrift Work Sans statt Fraunces). Gemeldet von Vivien (2026-08-29,
Font-Vergleich Sketchbook/Blog/Ueber-mich). Sauberer waere ein Umbau auf
echte Heading-Module im Builder - das hier ist der schnelle CSS-Fix.
.et_pb_text_4_tb_body ist Divis auto-generierte, durchnummerierte
Modul-Klasse auf der Theme-Builder-Vorlage "All Posts" (Einzelbeitrag,
Post-ID 137) - dort eindeutig, weil diese Vorlage pro Seitenaufruf genau
einmal gerendert wird.
.et_pb_text_1 dagegen zaehlt PRO SEITE neu hoch und ist NICHT eindeutig -
auf der Startseite ist das z.B. der Hero-Flieesstext, nicht der
"Ueber mich"-Titel. Deshalb hier zusaetzlich ueber WordPress' eigene
body-Klasse auf die Seite 38 ("Ueber mich") eingegrenzt.
ACHTUNG fuer kuenftige Faelle: in einem Loop (z.B. der Blog-Liste, Post-ID
159) vergibt Divi diese Nummern PRO WIEDERHOLTER KARTE neu - dieselbe
Karte hat beim ersten Post die Nummer 4, beim zweiten die 8, beim dritten
16 usw. Ein CSS-Selektor auf die Nummer trifft dort nur zufaellig die
erste Karte, nicht alle. Sauberer als eine eigene Klasse ueber Advanced >
Attributes: das betroffene Modul im Builder direkt auf ein echtes Heading
umstellen, siehe Beitragstitel Blog-Uebersichtsliste unten - dann greift
die allgemeine h1-h6-Regel automatisch. */
.et_pb_text_4_tb_body p,
body.page-id-38 .et_pb_text_1 p {
font-family: var(--vr-font-headline);
}
/* Beitragstitel in der Blog-Uebersichtsliste (Post-ID 159, Loop Builder):
Vivien hat das Titel-Modul in der Vorlage selbst von Text- auf ein echtes
Heading-Modul umgestellt (2026-08-30 live geprueft) - greift jetzt ueber
die allgemeine h1-h6-Regel oben, kein eigener Selektor mehr noetig. */
/* ---------------------------------------------------------------------------
Ab hier weiteres projektspezifisches CSS.
Was der Builder selbst kann, gehoert nicht hierher. Diese Datei ist fuer das,
was sich im Builder nicht abbilden laesst.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
Beitragsarchiv [vr_archiv] - siehe inc/archiv-shortcode.php.
Bewusst zurueckhaltend: Grundgeruest, Abstaende, Aufklapp-Pfeil. Farben und
Schriften kommen aus der Palette. Alles Weitere - andere Akzentfarbe, andere
Groessen - kann Vivien im Builder unter "Erweitert > Custom CSS" ueber die
Klassennamen anpassen, ohne diese Datei anzufassen:
.vr-archiv Rahmen um das Ganze
.vr-archiv__titel Ueberschrift "Fruehere Beitraege"
.vr-archiv__jahr ein Jahr (aufklappbar)
.vr-archiv__monat ein Monat
.vr-archiv__anzahl die Zahl dahinter
--------------------------------------------------------------------------- */
.vr-archiv {
font-family: var(--vr-font-body);
color: var(--vr-tinte);
}
.vr-archiv__titel {
font-family: var(--vr-font-headline);
font-size: 1.25rem;
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--vr-rosa-terrakotta);
}
.vr-archiv__jahr {
border-bottom: 1px solid var(--vr-papier-warm);
}
/* Der Kopf ist der Klickbereich. list-style weg, damit das Standard-Dreieck
verschwindet - wir zeichnen den Pfeil selbst. */
.vr-archiv__jahr-kopf {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0;
cursor: pointer;
list-style: none;
font-weight: 600;
}
.vr-archiv__jahr-kopf::-webkit-details-marker {
display: none;
}
.vr-archiv__jahr-kopf::before {
content: "";
flex: none;
width: 0.4rem;
height: 0.4rem;
border-right: 2px solid var(--vr-senfgelb-dunkel);
border-bottom: 2px solid var(--vr-senfgelb-dunkel);
transform: rotate(-45deg);
transition: transform 0.2s ease;
}
.vr-archiv__jahr[open] > .vr-archiv__jahr-kopf::before {
transform: rotate(45deg);
}
.vr-archiv__jahr-kopf:hover {
color: var(--vr-senfgelb-dunkel);
}
/* Tastaturbedienung sichtbar lassen - nicht wegoptimieren. */
.vr-archiv__jahr-kopf:focus-visible {
outline: 2px solid var(--vr-tuerkis);
outline-offset: 2px;
}
.vr-archiv__jahr-zahl {
flex: 1 1 auto;
}
.vr-archiv__anzahl {
flex: none;
font-size: 0.85em;
color: var(--vr-senfgelb-dunkel);
}
.vr-archiv__monate {
list-style: none;
margin: 0 0 0.5rem;
padding: 0 0 0 1.4rem;
}
.vr-archiv__monat {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.25rem 0;
}
.vr-archiv__monat a {
flex: 1 1 auto;
color: var(--vr-tinte);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.vr-archiv__monat a:hover,
.vr-archiv__monat a:focus-visible {
color: var(--vr-senfgelb-dunkel);
border-bottom-color: var(--vr-senfgelb);
}
/* Wer Animationen abgeschaltet hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
.vr-archiv__jahr-kopf::before {
transition: none;
}
}
/* ---------------------------------------------------------------------------
Abstand zwischen Seiteninhalt und Footer.
Gemeldet am 2026-08-22: kein Abstand zwischen Content und Footer.
#main-footer hatte weder padding-top noch margin-top. Bewusst margin statt
padding - so bleibt die Luecke in der Seitenhintergrundfarbe statt in der
(dunklen) Footer-Hintergrundfarbe eingefaerbt zu werden. Site-weit, weil der
Footer ein globales Divi-Element ist, kein Theme-Builder-Template.
--------------------------------------------------------------------------- */
#main-footer {
margin-top: 40px;
}
/* ---------------------------------------------------------------------------
"Filter zuruecksetzen"-Link auf der Blog-Uebersichtsseite (Post-Filter-Modul).
Gemeldet am 2026-08-23: Label wurde von "Zuruecksetzen" auf "Filter
zuruecksetzen" erweitert (Wunsch von Vivien), brach dadurch in der schmalen,
rechtsbuendigen Spalte auf zwei Zeilen um. Die umgebende Grid-/Flex-Spalte hat
reichlich freien Platz (~820px Zeilenbreite, Button nutzt nur ~160px) - der
Umbruch kam allein vom fehlenden white-space, nicht von echter Platznot.
Selektor ist Divis auto-generierte, durchnummerierte Klasse fuer dieses eine
Modul auf dieser einen Theme-Builder-Vorlage (_item_1_tb_body = zweites
Post-Filter-Item auf der "Blog"-Vorlage) - bricht, falls Vivien die Reihen-
folge der Filter-Elemente im Builder aendert. Dann hier nachziehen. */
.et_pb_post_filter_item_1_tb_body .et_pb_post_filter__item-control-button {
white-space: nowrap;
}
/* ---------------------------------------------------------------------------
Gutenberg-Block "Medien und Text", gespiegeltes Layout (Bild/Video rechts).
Gemeldet von Vivien (2026-08-29): Der Block behaelt seinen linken
Innenabstand unabhaengig davon, auf welcher Seite Bild/Video sitzen - bei
gespiegeltem Layout (Medium rechts) wirkt der Text dadurch unnoetig
eingerueckt.
--------------------------------------------------------------------------- */
.wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
padding-left: 0;
}
/* ---------------------------------------------------------------------------
Sketchbook-Detailseite (Project-Single-Template), mitlaufender Header-Effekt.
Von Viviens Claude geliefert (2026-08-25), 1:1 uebernommen. Braucht
position: sticky auf .sb-header plus negative Raender auf die direkt
folgenden Geschwister-Elemente - das laesst sich in Divis eigenen
Custom-CSS-Feldern nicht sauber abbilden, deshalb hier statt im Builder.
Bis das Single-Template existiert, greifen diese Klassen nirgends - totes,
aber vorbereitetes CSS.
--------------------------------------------------------------------------- */
.sb-header{
position: sticky; top: 71px; z-index: 1;
height: 56vh; min-height: 380px; max-height: 640px;
overflow: hidden;
}
.sb-header::after{
content: ''; position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(46,42,36,0.4) 0%, rgba(46,42,36,0) 30%, rgba(46,42,36,0) 55%, rgba(46,42,36,0.62) 100%);
}
.sb-back-pill{
position: absolute; top: 20px; left: max(20px, calc((100% - 900px)/2 + 8px)); z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px 8px 12px; border-radius: 999px;
background: rgba(46,42,36,0.35); backdrop-filter: blur(4px);
border: 1px solid rgba(255,255,255,0.7); color: #fff;
font-size: 0.85rem; text-decoration: none;
}
.sb-back-pill:hover{ background: #3CB7AC; border-color: #3CB7AC; }
.sb-header-text{
position: relative; z-index: 2; color: #fff; width: 100%;
margin-top: -190px !important;
padding: 0 max(28px, calc((100% - 900px)/2)) 40px;
}
.sb-header-text .kicker{ color: #A9E6DA; }
.sb-header-text h1{ color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.3); }
/* Vermutete Divi-Klasse fuer den Divider-Modul-Strich - beim Einbauen im
Builder per "Untersuchen" pruefen, ob der echte Klassenname abweicht. */
.sb-header-text .et_pb_divider_internal,
.sb-header-text hr{ background: #F8E8BD; }
/* .sb-header-text/.sb-content sitzen als Rows direkt unter der Section bzw.
verschachtelt unter einer Flex-Column. Divis eigene Reset-Regeln dafuer
(".et_flex_row .et_pb_row_nested.et_flex_row", ".et_flex_section >
.et_pb_row" u.ae.) kombinieren 2-3 Klassen und schlagen unsere
Einzelklassen-Regel rein an Spezifitaet, unabhaengig von der Reihenfolge
im Stylesheet - live per getComputedStyle()/Regel-Vergleich bestaetigt
(2026-08-27, gemeinsam mit Viviens Claude gefunden). Deshalb hier bewusst
!important auf margin-top statt eine Spezifitaets-Wettruestung zu fuehren. */
.sb-content{
position: relative; z-index: 3; background: #fff; margin-top: -40px !important;
border-radius: 28px 28px 0 0; box-shadow: 0 -18px 30px rgba(46,42,36,0.12);
}
@media (max-width: 720px){
.sb-header{ height: 46vh; min-height: 300px; }
.sb-header-text{ margin-top: -150px !important; }
.sb-content{ margin-top: -24px !important; border-radius: 20px 20px 0 0; }
}
/* Die margin-top-Werte oben (-190px / -40px / -150px) gehen von der
Titeltext-Hoehe im HTML-Prototyp aus. Weicht die tatsaechliche Hoehe im
Builder ab (andere Schriftgroesse/Zeilenumbruch), hier per Live-Vorschau
nachjustieren, bis der Uebergang zwischen Header und Content nahtlos wirkt. */
/* Box um Kennzahlen + Geschichte + Kuenstler-Feedback gemeinsam (Advanced ->
Attributes -> class "sb-info-panel" auf die Gruppe). Werte 1:1 aus dem
HTML-Prototyp (.sketchbook-info-panel). */
.sb-info-panel{
background: #F4F3F0; border: 1px solid rgba(46,42,36,0.15); border-radius: 10px;
padding: 24px 28px; margin: 32px 0 0; position: relative;
}
@media (max-width: 720px){ .sb-info-panel{ padding: 18px; } }
/* Papierweisser Kasten um die Kennzahlen-Row (Advanced -> Attributes -> class
"sb-specs-card" auf die dedizierte Kennzahlen-Row, nicht die Column mit
sb-specs-row). Werte von Viviens Claude, Bauanleitung-Sketchbook-Template. */
.sb-specs-card{
background: #F4F3F0;
border-radius: 14px;
padding: 18px 20px;
}
.sb-specs-row{
display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
}
.sb-spec{ flex: 0 0 auto; padding: 0 16px; border-right: 1px solid #E0E0E0; }
.sb-spec:first-child{ padding-left: 0; }
.sb-spec:last-child{ border-right: none; padding-right: 0; }
.sb-spec dt{
font-size: 0.66rem; text-transform: uppercase; letter-spacing: .05em; color: #8a8478; margin: 0;
white-space: nowrap;
}
.sb-spec dd{ margin: 2px 0 0; font-size: 0.88rem; white-space: nowrap; }
.sb-story-block{ margin: 18px 0 0; padding-top: 16px; border-top: 1px solid #E0E0E0; }
.sb-story-block .kicker{ font-size: 1.05rem; margin: 0 0 4px; display: block; }
.sb-story-text{ margin: 0; font-weight: 600; font-size: 0.98rem; color: #3a352c; line-height: 1.6; }
.sb-feedback-block{ margin: 16px 0 0; padding-top: 16px; border-top: 1px solid #E0E0E0; }
.sb-feedback-label{
font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; color: #a39c8c; margin: 0 0 4px;
}
.sb-feedback-text{ margin: 0; font-size: 0.85rem; font-style: italic; color: #8a8478; line-height: 1.6; }
/* ---------------------------------------------------------------------------
Skizzenbücher-Übersicht (Loop-Karten auf der Sketchbooks-Archivseite).
Von Viviens Claude geliefert (2026-08-26), 1:1 übernommen. Grid-Gap und
Line-Clamp (-webkit-line-clamp) lassen sich in Divis eigenen Custom-CSS-
Feldern nicht sauber zentral pflegen, deshalb hier statt im Builder.
--------------------------------------------------------------------------- */
.sb-list-grid{ gap: 32px 24px; }
.sb-list-cover{ border-radius: 0; overflow: hidden; }
/* Kachel-Rahmen um die ganze Karte (Column). Klasse muss zusaetzlich an der
Column liegen, die Cover+Titel+Meta+Teaser enthaelt (Advanced -> Attributes). */
.sb-list-card{
background: #fff; border: 1px solid rgba(46,42,36,0.15); border-radius: 0;
overflow: hidden; box-shadow: 0 6px 18px rgba(46,42,36,0.06);
transition: transform .3s ease, box-shadow .3s ease;
}
.sb-list-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(46,42,36,0.1); }
.sb-list-title{ padding: 14px 18px 0; }
.sb-list-meta{
display: flex; flex-wrap: wrap; font-size: 0.8rem; color: #6D6B6B; margin-top: 6px;
padding: 0 18px;
}
.sb-list-teaser{
font-family: var(--vr-font-headline);
font-size: 0.88rem; color: #2E2A24; line-height: 1.5; margin-top: 6px;
padding: 0 18px 16px;
overflow: hidden;
}
/* Divi wrapt den Text in .et_pb_text_inner > - line-clamp muss auf das
selbst, sonst zaehlt der Clamp nur den einen Block-Child (Inner-Div)
statt der echten Textzeilen. */
.sb-list-teaser p{
margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Roetlich-terrakotta Aufzaehlungspunkt vor jeder Kurzangaben-Zeile. */
.sb-spec-line{ position: relative; padding-left: 14px; font-size: 0.8rem; color: #5c574c; }
.sb-spec-line::before{
content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px;
border-radius: 50%; background: #C9836F;
}
/* Sketchbook-Detailseite: Seiten/Größe/Format-Zeile ("48 Seiten, A5, Hochformat").
Sitzt auf einer Column, die ohne explizites flex-direction Divis Default
(vertikal stapeln) erben würde - deshalb hier ausdrücklich row setzen. */
.sb-meta-line{
display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
font-size: 0.8rem; color: #6D6B6B;
}
/* ---------------------------------------------------------------------------
USK-Mannheim-Seite: Foto-Header mit ueberlappendem Titel, mitlaufender
Sticky-Effekt wie auf der Sketchbook-Detailseite (.sb-header/.sb-content
oben).
Von Viviens Claude geliefert (2026-08-31, 1:1 uebernommen), danach
mehrfach ueberarbeitet (siehe Git-Historie fuer Positionierungs-Bugs
unterwegs). Erster Sticky-Versuch scheiterte, weil Foto-Header und
Folgeinhalt in getrennten, knapp bemessenen Rows lagen (kein
Scroll-Puffer). Vivien hat die Seite daraufhin wie das
Sketchbook-Template umgebaut: der komplette Seiteninhalt liegt jetzt in
DERSELBEN Spalte wie der Foto-Header (.et_pb_column_0, ~50000px hoch) -
das gibt sticky genug Puffer.
ACHTUNG Klassen-Dopplung (31.08., an Vivien gemeldet): .usk-hero-frame
sitzt aktuell auf ZWEI Elementen - der aeusseren Spalte (.et_pb_column_0,
traegt jetzt den GESAMTEN Seiteninhalt) UND dem Bild-Modul
(.et_pb_image_0) direkt darin. Wichtig: die sticky/Hoehenbegrenzung darf
NUR das innere Bild-Modul treffen (Rolle wie .sb-header), NICHT die
aeussere Spalte - sonst wuerde der gesamte restliche Seiteninhalt auf
56vh zusammengeklippt (erster Versuch hatte genau diesen Fehler, live
korrigiert). Deshalb hier ueber Nachfahren-Selektor (.usk-hero-frame
.usk-hero-frame) gezielt nur das innere Element angesprochen. Sobald
Vivien die doppelte Klasse bereinigt (nur noch auf dem Bild-Modul), kann
das wieder auf die einfache Klasse vereinfacht werden.
--------------------------------------------------------------------------- */
/* Klasse auf Spalte UND Bild-Modul (siehe Hinweis oben) - hier gezielt nur
das innere Bild-Modul angesprochen (Nachfahre des gleichnamigen
Spalten-Elements). */
.usk-hero-frame .usk-hero-frame {
position: sticky;
top: 71px;
z-index: 1;
height: 56vh;
min-height: 380px;
max-height: 640px;
overflow: hidden;
}
.usk-hero-frame .usk-hero-frame .et_pb_image_wrap {
height: 100%;
}
.usk-hero-frame .usk-hero-frame .et_pb_image_wrap img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media (max-width: 720px) {
.usk-hero-frame .usk-hero-frame {
height: 55vh;
min-height: 400px;
}
}
.usk-hero-frame .usk-hero-frame::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 70%;
background: linear-gradient(
to top,
rgba(46, 42, 36, 0.85) 0%,
rgba(46, 42, 36, 0.4) 55%,
rgba(46, 42, 36, 0) 100%
);
pointer-events: none;
z-index: 1;
}
/* Klasse auf die Row mit Kicker/Titel - liegt jetzt als Geschwister-Row
direkt nach dem Bild-Modul in derselben Spalte, zieht sich per
negativem margin-top optisch aufs Bild (wie .sb-header-text).
Divi setzt fuer diese Row selbst eine Regel (.et_pb_row_1.et_pb_row {
margin-top: -5px !important }, vermutlich ein kleiner manueller Abstand
von Vivien im Builder) - gleiche Spezifitaet (zwei Klassen) wie ein
einfacher .usk-hero-text.et_pb_row-Versuch, gewinnt aber durch spaetere
Position im Dokument. Deshalb hier drei Klassen (echte Mehrspezifitaet
statt Gleichstand), um sicher zu gewinnen (31.08., live gefunden - vorher
hing der Text 25px UNTER statt AUF dem Bild). */
.usk-hero-text.et_pb_row.et_pb_row_nested {
position: relative;
z-index: 2;
margin-top: -240px !important;
padding: 0 24px;
color: #FFFFFF;
}
@media (max-width: 720px) {
.usk-hero-text.et_pb_row.et_pb_row_nested {
margin-top: -320px !important;
}
}
/* Kicker (p) und Titel (h1) erben das Weiss oben NICHT - Divi setzt fuer
beide direkt am Element eine eigene Farbregel (dunkle Tinte fuer h1 ueber
".et_pb_module h1", vermutlich Aehnliches fuer den Kicker), das schlaegt
Vererbung vom Elternelement immer, unabhaengig von dessen Spezifitaet
(31.08., live gefunden - Kicker+Titel waren dunkel auf dunklem Bild kaum
lesbar). Explizite Regeln wie bei .sb-header-text/.kicker oben. */
.usk-hero-text p {
color: #A9E6DA !important;
}
.usk-hero-text h1 {
color: #FFFFFF !important;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
}
/* Untertitel (h3, "Wir zeichnen vor Ort..."): Vivien wollte ihn ebenfalls
auf dem Bild (31.08.) - Bildhoehe/Ueberlappung oben deshalb vergroessert,
damit der komplette Textblock hineinpasst. Farbe zunaechst faelschlich
auf Weiss gesetzt (siehe Git-Historie) - Divis eigene helle Sandfarbe
(--vr-senfgelb-hell, war urspruenglich .et_pb_heading_1
.et_pb_heading_container h3, Spezifitaet 2 Klassen+Element) war bereits
richtig, hier nur als Palette-Variable statt Hex-Wert nachgezogen. Drei
Klassen, um sicher zu gewinnen. */
.usk-hero-text.et_pb_row .et_pb_heading_container h3 {
color: var(--vr-senfgelb-hell) !important;
}
/* Erste Row des eigentlichen Seiteninhalts ("Die Bewegung" ...) - rutscht
per negativem margin-top ueber den sticky Foto-Header (wie .sb-content).
PROVISORISCH ueber Divis Auto-Nummer, siehe .sb-content-Hinweis oben.
WICHTIG - echter Bug, live gefunden (01.09., Vivien-Meldung "seltsamer
Effekt auf iPad/iPhone"): .et_pb_row_2 ist eine Divi-Auto-Nummer, KEINE
eindeutige Klasse - sie existiert auch auf voellig anderen Seiten (hier:
die "sb-list-meta"-Zeile einer Sketchbook-Karte in der
Skizzenbuecher-Uebersicht, Post 522). Ohne Seiten-Eingrenzung rutscht der
Kartentext dort optisch hoch und bekommt Schatten/abgerundete Ecken -
auf Deutsch: dieselbe Auto-Nummer traegt auf einer fremden Seite ein
fremdes CSS. Deshalb hier auf body.page-id-886 (Urban Sketchers Mannheim)
eingegrenzt, analog body.page-id-38 weiter oben. */
body.page-id-886 .et_pb_row_2 {
position: relative;
z-index: 3;
background: #fff;
margin-top: -40px !important;
border-radius: 28px 28px 0 0;
box-shadow: 0 -18px 30px rgba(46, 42, 36, 0.12);
}
@media (max-width: 720px) {
body.page-id-886 .et_pb_row_2 {
margin-top: -24px !important;
border-radius: 20px 20px 0 0;
}
}