/* Grundlagen: Schriften, Gestaltungswerte, Grundtypografie. Die Werte stammen aus den Divi-Einstellungen der bestehenden Seite und sind an ihr nachgemessen (siehe README.md, „Gestaltungswerte aus dem Bestand“). ── Aufbau der Stilblätter ──────────────────────────────────────────────── grundlagen.css Schriften, Gestaltungswerte, Grundtypografie, Hilfsklassen raster.css Bahn, Abschnitt, Zeile, Spalte, Formkanten rahmen.css Kopfzeile, Bildkopf, Fußzeile bausteine.css die Inhaltsmodule (ein Baustein je Divi-Modul) blog.css Blogübersicht und Beitragsseite (nur wo gebraucht) formular.css Formularfelder (nur wo gebraucht) ── Namen ───────────────────────────────────────────────────────────────── Klassen sind deutsch und folgen `block__element--art`: .beitragskarte .beitragskarte__titel .beitragskarte--breit ── Werte aus dem Bestand ───────────────────────────────────────────────── Was Divi je Modul einstellen kann, kommt nicht als Klasse, sondern als CSS-Eigenschaft am Element – gesetzt in includes/stil.php, gelesen mit einem Vorgabewert. Muster: `--bereich-eigenschaft`. --h1-groesse … --h6-groesse Überschriftengröße eines Bausteins --h1-farbe … --h6-farbe Überschriftenfarbe --abschnitt-grund Hintergrundfarbe eines Abschnitts --abschnitt-verlauf Verlauf, auch über einem Bild --abschnitt-hoehe eigene Mindesthöhe (etwa 100vh) --abschnitt-oben/-unten eigene Innenabstände --bildlage Bildausschnitt (object-position) --zeile-breite / --zeile-max Zeilenbreite, Vorgabe 80 % / 1198 px --zeile-grund Hintergrundfarbe einer Zeile --rinne Spaltenabstand, Vorgabe 5,5 % --spalten Rasterspalten eines Elements (1–12) --spalte-grund Hintergrundfarbe einer Spalte --spalte-oben/-rechts/… Innenabstände einer Spalte --bild-breite / --bild-max Breite eines Bildmoduls --knopf-grund / --knopf-schrift Knopffarben --knopf-oben/-rechts/… Knopfabstände --zeichen-farbe Symbolfarbe einer Hinweiskachel --teiler-bild/-hoehe/-kippen Formkante zwischen zwei Abschnitten --verhaeltnis Seitenverhältnis eines Galeriebilds (aus dem Bildverzeichnis, für galerie.js) Farbwelt einer Seite – gesetzt am aus modell['gestaltung'] (gestaltung_stil() in stil.php), Vorgabe ist überall das Blau der Marke: --aktion / --aktion-schrift Knöpfe, aktiver Reiter, Schrittnummern --aktion-betont Zeigen und Drücken --titel-farbe Überschriften, Preise, Zahlen --akzent Haken, Zier- und Zitatzeichen --verweis-farbe Verweise im Text --schleier Fläche des Aufrufs Dazu eine einzige Zustandsklasse: `.auf-dunkel` an dem Element, das die dunkle Farbe trägt. Sie hellt Text, Überschriften und Linien darin auf. Wer eine neue Einstellung aus dem Bestand übernimmt: Wert im Werkzeug einsammeln, in stil.php prüfen und ausgeben, hier mit Vorgabewert lesen – und in diese Liste eintragen. */ /* Der Bestand kennt zwei Schriften mit eigenen Familiennamen: „NeueEinstellung" für den Fließtext, „NeueEinstellung Bold" für Überschriften. Es sind zwei Familien, keine zwei Schnitte derselben Familie – und genau diese Namen stehen in den Inline-Angaben vieler übernommener Texte. Wer sie nicht unter diesen Namen anmeldet, bei dem fällt der Browser dort auf die Systemschrift zurück: Auf /werbefotografie/ stand der Vorspann deshalb fett, obwohl er in der Vorlage normal gesetzt ist. */ @font-face { font-family: "NeueEinstellung"; src: url("../schriften/neue-einstellung-regular.woff2") format("woff2"), url("../schriften/neue-einstellung-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "NeueEinstellung"; src: url("../schriften/neue-einstellung-bold.woff2") format("woff2"), url("../schriften/neue-einstellung-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } /* Überschriftenfamilie: trägt ihre Stärke im Namen, deshalb ein Schnitt für jedes Gewicht. So bleibt eine Überschrift fett, auch ohne font-weight. */ @font-face { font-family: "NeueEinstellung Bold"; src: url("../schriften/neue-einstellung-bold.woff2") format("woff2"), url("../schriften/neue-einstellung-bold.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Weiche Zustandswechsel überall: Verweise und Knöpfe blenden Farbe und Fläche um, statt hart zu springen. Wer eine eigene transition setzt (etwa .knopf), behält sie – diese Grundregel ist die schwächste. */ a, button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } :root { /* Die Seite ist bewusst nur hell. Ausgesprochen statt geerbt, damit Formularelemente hell bleiben und Chrome eingebettete iframes (eigener Buchungskalender, dort ebenfalls color-scheme: light) durchsichtig rendern darf — bei ungleichem Schema malt er sie opak-weiß. */ color-scheme: light; /* Farben — aus den Divi-Einstellungen übernommen */ --dunkel: #02203b; /* Fußzeile, dunkle Abschnitte, Fließtext */ --blau: #0f4a7e; /* Schaltflächen, Verweise, Überschriften */ --blau-akzent: #143e69; --blau-hell: #296499; /* Hover */ --hell: #e8eef1; /* helle Flächen, Text auf Dunkel */ --weiss: #fafafa; --rein-weiss: #fff; --text: var(--dunkel); --text-gedaempft: #4a6480; --linie: #d7e0e7; /* Maße */ --inhalt-breite: 1198px; --inhalt-schmal: 860px; --kopf-hoehe: 78px; --radius: 5px; --radius-feld: 9px; /* Eingabefelder und Wahlkacheln */ --radius-gross: 14px; /* Abstände — Divi rechnet Abschnitte mit 4 %, Zeilen mit 2 % */ --abstand-xs: 0.5rem; --abstand-s: 1rem; --abstand-m: 1.75rem; --abstand-l: 3rem; --abstand-xl: 5rem; --abschnitt-luft: clamp(3.5rem, 6vw, 6.5rem); /* Schrift */ --schrift: "NeueEinstellung", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --schrift-titel: "NeueEinstellung Bold", "NeueEinstellung", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --grund-groesse: 16px; --grund-hoehe: 1.8; /* Karten liegen flach auf der Fläche (kein 1px-Rahmen!), beim Zeigen heben sie sich. Formularfelder behalten Ränder – sie sind Bedienfläche. */ --schatten-flach: 0 1px 2px rgba(2, 32, 59, 0.05), 0 10px 30px -14px rgba(2, 32, 59, 0.22); --schatten-karte: 0 10px 30px rgba(2, 32, 59, 0.12); --schatten-bild: 0 18px 40px rgba(2, 32, 59, 0.22); --schraege: 4.5vw; /* Höhe der schrägen Abschnittskanten */ } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; font-family: var(--schrift); font-size: var(--grund-groesse); line-height: var(--grund-hoehe); color: var(--text); background: var(--rein-weiss); overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--abstand-s); /* Die Stärke steckt in der Familie, nicht im Gewicht – so wie im Bestand. Setzt ein übernommener Text darin font-family: NeueEinstellung, wechselt er damit auf den normalen Schnitt, genau wie in der Vorlage. */ font-family: var(--schrift-titel); font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; color: var(--titel-farbe, var(--blau)); } /* Eigene Skala, seit die Seite weiterentwickelt statt nachgebaut wird (2026-08-23): Der Bestand setzte fixe 30/26/22 px – zu klein, um Abschnitte zu gliedern. Die Größen wachsen behutsam mit dem Fenster; auf dem Handy entsprechen sie ungefähr den alten Werten. */ :root { --titel-1: clamp(2rem, 1.35rem + 2.6vw, 3rem); --titel-2: clamp(1.6rem, 1.25rem + 1.4vw, 2.15rem); --titel-3: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem); --titel-4: 1.15rem; } h1 { font-size: var(--titel-1); } h2 { font-size: var(--titel-2); } h3 { font-size: var(--titel-3); } h4 { font-size: var(--titel-4); } h5 { font-size: 1rem; } h6 { font-size: 0.9rem; } /* Einzelne Bausteine bringen eigene Werte mit – Divi erlaubt das je Modul. seiten_erzeugen.py schreibt sie als --hN-groesse/--hN-farbe an den Baustein. */ .fliesstext h1, .hinweis h1 { font-size: var(--h1-groesse, var(--titel-1)); color: var(--h1-farbe, var(--titel-farbe, var(--blau))); } .fliesstext h2, .hinweis h2 { font-size: var(--h2-groesse, var(--titel-2)); color: var(--h2-farbe, var(--titel-farbe, var(--blau))); } .fliesstext h3, .hinweis h3 { font-size: var(--h3-groesse, var(--titel-3)); color: var(--h3-farbe, var(--titel-farbe, var(--blau))); } .fliesstext h4, .hinweis h4 { font-size: var(--h4-groesse, var(--titel-4)); color: var(--h4-farbe, var(--titel-farbe, var(--blau))); } .fliesstext h5, .hinweis h5 { font-size: var(--h5-groesse, 1rem); color: var(--h5-farbe, var(--titel-farbe, var(--blau))); } .fliesstext h6, .hinweis h6 { font-size: var(--h6-groesse, 0.9rem); color: var(--h6-farbe, var(--titel-farbe, var(--blau))); } p { margin: 0 0 var(--abstand-s); } p:last-child { margin-bottom: 0; } a { color: var(--verweis-farbe, var(--blau)); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (hover: hover) { a:hover { color: var(--blau-hell); } } img, svg, video { max-width: 100%; height: auto; } img { display: block; } /*