/*!
* THK Verlag — Frontend-CSS für CMS-Block-Design-System
* v0.16.4.0 — CI-Refit Welle 3 (komplettes Block-Styling)
*
* Der BlockRenderer produziert eine reiche Klassen-Hierarchie pro Block:
*
*
*
* Diese Klassen-Konventionen waren bislang nicht in CSS umgesetzt — der
* BlockRenderer hat einen vollständigen Design-Token-Output erzeugt,
* aber das Frontend-CSS hat nur die Hülle (.ghos-block, .ghos-container,
* .ghos-h2 etc.) gestylt, nicht die Token-Klassen selbst. Folge:
* Optionen wie „Card hell mit Papier-Hintergrund, weicher Schatten,
* großer Radius" wurden im Editor angeklickt, aber im Frontend nicht
* umgesetzt.
*
* Diese Datei macht das vollständig nach.
*
* Section-Reihenfolge:
* 1. Section-Wrapper (.ghos-block, Abstände, Section-BG, Alignment)
* 2. Container (.ghos-block--container-*)
* 3. Card-Komponente (.ghos-block__card, Card-BG, Padding, Radius,
* Schatten, Rahmen, Text-Invertierung)
* 4. Prose-Headlines (.ghos-prose-heading--h1 bis -h6)
* 5. legal-page-Komponente (Zwei-Spalten-Pflichttext-Layout)
* 6. Details-Marker-Fix (kein Browser-Default-× rechts)
*/
/* ══════════════════════════════════════════════════════════════════
* 1. SECTION-WRAPPER
* ══════════════════════════════════════════════════════════════════ */
/* Default-Padding aufeinanderfolgender Blocks. Vorher: var(--space-7)
= 3rem oben + 3rem unten = 6rem zwischen Blocks. Das war zu locker.
Jetzt: kompakter, mit Möglichkeit pro Block via abstand_oben/unten
zu überschreiben. */
.ghos-block {
padding-block: var(--space-6); /* 2rem */
}
.ghos-block + .ghos-block {
padding-top: 0; /* kein doppeltes Padding zwischen
benachbarten Blocks */
}
/* Section-Hintergrund-Modifier (volle Browser-Breite) */
.ghos-block--section-bg-papier { background: var(--thk-papier); }
.ghos-block--section-bg-papier-tief { background: var(--thk-papier-tief); }
.ghos-block--section-bg-papier-warm { background: var(--thk-papier-warm); }
.ghos-block--section-bg-tinte { background: var(--thk-tinte); color: var(--thk-papier); }
.ghos-block--section-bg-tinte-dunkel{ background: var(--thk-tinte-dunkel); color: var(--thk-papier); }
.ghos-block--section-bg-bordeaux { background: var(--thk-bordeaux); color: var(--thk-papier); }
.ghos-block--section-bg-gold { background: var(--thk-gold); color: var(--thk-tinte-dunkel); }
/* Abstand-Modifier */
.ghos-block--abstand-oben-keiner { padding-top: 0 !important; }
.ghos-block--abstand-oben-klein { padding-top: var(--space-4) !important; }
.ghos-block--abstand-oben-normal { padding-top: var(--space-6) !important; }
.ghos-block--abstand-oben-gross { padding-top: var(--space-8) !important; }
.ghos-block--abstand-unten-keiner { padding-bottom: 0 !important; }
.ghos-block--abstand-unten-klein { padding-bottom: var(--space-4) !important; }
.ghos-block--abstand-unten-normal { padding-bottom: var(--space-6) !important; }
.ghos-block--abstand-unten-gross { padding-bottom: var(--space-8) !important; }
/* Alignment-Modifier — gilt für Inhalt im Block */
.ghos-block--align-links { text-align: left; }
.ghos-block--align-mitte { text-align: center; }
.ghos-block--align-rechts { text-align: right; }
/* ══════════════════════════════════════════════════════════════════
* 2. CONTAINER
* ══════════════════════════════════════════════════════════════════ */
/* Default-Container kommt aus ghos-frontend.css. Hier nur die Modifier. */
.ghos-block--container-schmal { max-width: var(--content-narrow); } /* 740 */
.ghos-block--container-normal { max-width: var(--content-max); } /* 1180 */
.ghos-block--container-breit { max-width: 1400px; }
.ghos-block--container-voll { max-width: 100%; padding-inline: 0; }
/* ══════════════════════════════════════════════════════════════════
* 3. CARD-KOMPONENTE
* ══════════════════════════════════════════════════════════════════ */
/* Basis-Card. Wird vom Renderer um .ghos-block__card .ghos-block--card
gewrappt, wenn darstellung = card_hell / card_farbig / editorial. */
.ghos-block__card {
background: var(--thk-papier);
border-radius: var(--radius);
padding: var(--space-5);
box-shadow: var(--shadow-soft);
transition: box-shadow 0.2s ease;
}
/* Card-Hintergrund-Modifier */
.ghos-block--card-bg-papier { background: var(--thk-papier); }
.ghos-block--card-bg-papier-tief { background: var(--thk-papier-tief); }
.ghos-block--card-bg-papier-warm { background: var(--thk-papier-warm); }
.ghos-block--card-bg-papier-card { background: var(--thk-papier-card); }
.ghos-block--card-bg-tinte { background: var(--thk-tinte); color: var(--thk-papier); }
.ghos-block--card-bg-tinte-dunkel{ background: var(--thk-tinte-dunkel); color: var(--thk-papier); }
.ghos-block--card-bg-bordeaux { background: var(--thk-bordeaux); color: var(--thk-papier); }
.ghos-block--card-bg-gold { background: var(--thk-gold); color: var(--thk-tinte-dunkel); }
.ghos-block--card-bg-transparent { background: transparent; box-shadow: none; }
/* Card-Padding-Modifier */
.ghos-block--padding-klein { padding: var(--space-4); }
.ghos-block--padding-normal { padding: var(--space-5); }
.ghos-block--padding-gross { padding: var(--space-6) var(--space-7); }
/* Card-Radius */
.ghos-block--radius-gross { border-radius: var(--radius-lg); }
/* Card-Schatten */
.ghos-block--schatten-ohne { box-shadow: none; }
/* Card-Rahmen */
.ghos-block--rahmen-fein { border: 1px solid var(--thk-line); }
.ghos-block--rahmen-akzent { border: 2px solid var(--thk-bordeaux); }
/* Text-Invertierung (für dunkle Card-/Section-Hintergründe) */
.ghos-block--text-invertiert,
.ghos-block--text-invertiert .ghos-prose,
.ghos-block--text-invertiert .ghos-prose-heading {
color: var(--thk-papier);
}
.ghos-block--text-invertiert .ghos-prose strong { color: var(--thk-papier); }
.ghos-block--text-invertiert .ghos-prose a {
color: var(--thk-gold-hell);
text-decoration-color: rgba(216, 184, 118, 0.5);
}
.ghos-block--text-invertiert .ghos-prose a:hover {
color: var(--thk-papier);
text-decoration-color: var(--thk-gold-hell);
}
.ghos-block--text-invertiert .ghos-kicker {
color: var(--thk-gold-hell);
}
/* ══════════════════════════════════════════════════════════════════
* 4. PROSE-HEADINGS (eigenständige heading-Blocks)
* ══════════════════════════════════════════════════════════════════ */
/* Default: Serif, Tinte, line-height eng. */
.ghos-prose-heading {
font-family: var(--thk-serif);
color: var(--thk-tinte);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0;
}
.ghos-prose-heading--h1 {
/* Mockup-Niveau: sehr groß, atemraum oben und unten */
font-size: clamp(3rem, 6.5vw, 5.5rem);
}
.ghos-prose-heading--h2 {
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
}
.ghos-prose-heading--h3 {
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
line-height: 1.2;
}
.ghos-prose-heading--h4 {
font-family: var(--thk-sans);
font-size: 1.15rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--thk-tinte-dunkel);
}
.ghos-prose-heading--h5,
.ghos-prose-heading--h6 {
font-family: var(--thk-sans);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--thk-text-mute-stark);
}
/* ══════════════════════════════════════════════════════════════════
* 5. LEGAL-PAGE — Zwei-Spalten-Pflichttext-Layout
*
* Wird vom Block-Typ pflichttext_zweispaltig gerendert. Mockup-
* konform: zwei nebeneinander gesetzte Spalten mit H3-Sektions-
* Überschriften und Body-Text in jeder Spalte. Akkordeon kann in
* jeder Spalte stehen.
*
* Mobile (<720px): Spalten stacken untereinander. Sehr lange
* Pflichttextseiten bleiben damit auf dem Handy lesbar.
* ══════════════════════════════════════════════════════════════════ */
.legal-page {
padding-block: var(--space-5) var(--space-8);
}
.legal-page__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--space-5);
}
.legal-page__col {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Eine einzelne Sektion in der Spalte: H3 (Sans-Bold) + Body-Text. */
.legal-section {
display: block;
}
.legal-section__title {
font-family: var(--thk-serif);
color: var(--thk-tinte);
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
margin: 0 0 var(--space-3) 0;
letter-spacing: -0.005em;
}
.legal-section__body {
/* ghos-prose-Defaults greifen schon. Hier nur Sektion-spezifisch. */
}
.legal-section__body p:first-child { margin-top: 0; }
.legal-section__body p:last-child { margin-bottom: 0; }
/* Adressblock-Pattern: ein mit
-Zeilen → enge Zeilen, kein
Margin-Auseinanderdriften. (Funktioniert für alle ghos-prose, hier
nochmal explizit für die Pflichttextseiten als Failsafe.) */
.legal-section__body p { margin: 0 0 var(--space-3) 0; line-height: 1.65; }
/* Akkordeon-Sektion: Titel über dem Akkordeon, dann Akkordeon selbst. */
.legal-section--akkordeon .ghos-akkordeon {
margin-top: var(--space-3);
}
/* Responsive: bei < 720px stacken die Spalten. */
@media (max-width: 720px) {
.legal-page__grid {
grid-template-columns: 1fr;
gap: var(--space-7);
padding-inline: var(--space-4);
}
}
/* ══════════════════════════════════════════════════════════════════
* 6. DETAILS-MARKER-FIX (browser-spezifisch, robust)
*
* Welle 2 hatte ::-webkit-details-marker versteckt, aber Firefox
* und Safari haben eigene Marker-Pseudo-Elemente. Hier robust für
* alle Browser:
* ══════════════════════════════════════════════════════════════════ */
/* Webkit/Chrome */
.ghos-akkordeon__frage::-webkit-details-marker { display: none !important; }
/* Firefox + Safari (über ::marker) */
.ghos-akkordeon__frage { list-style: none; }
.ghos-akkordeon__frage::marker { display: none; content: ""; }
/* Safari fallback */
.ghos-akkordeon__item summary { list-style-type: none; }
.ghos-akkordeon__item summary::-webkit-details-marker { display: none; }
/* Falls ein Browser trotzdem einen Default-Marker rendert, ist er
visuell verdeckt durch das eigene ::before-Icon-Kreis. Trotzdem
bestmöglich verhindern. */
/* ══════════════════════════════════════════════════════════════════
* 7. SEITEN-TITEL — Korrektur, sodass auch der heading-Block korrekt
* gerendert wird, wenn er als H1 ausgegeben wird
* ══════════════════════════════════════════════════════════════════ */
/* Wenn ein heading-Block die H1-Ebene hat und im Block selbst zentriert
ist, soll er mit dem Mockup-Riesenformat gerendert werden. Block-Klasse
.ghos-block--heading-h1.ghos-block--align-mitte. */
.ghos-block--heading-h1 .ghos-prose-heading--h1 {
/* v0.16.6.0 — von var(--space-3) auf var(--space-2) reduziert,
damit der Hero-Bereich kompakter wirkt. */
margin-block: var(--space-2) var(--space-2);
}
.ghos-block--heading-h1.ghos-block--align-mitte .ghos-prose-heading--h1 {
text-align: center;
margin-inline: auto;
}
/* ══════════════════════════════════════════════════════════════════
* 8. RESPONSIVE-ANPASSUNGEN
* ══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.ghos-block { padding-block: var(--space-5); }
.ghos-block__card { padding: var(--space-4); }
.ghos-prose-heading--h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
.ghos-prose-heading--h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.legal-section__title { font-size: 1.3rem; }
}
/* ══════════════════════════════════════════════════════════════════
* 9. LITERARISCHES ZITAT (v0.16.5.0)
*
* Editorial-Blockquote unter der H1 auf Pflichttextseiten oder als
* Anker in Editorial-Seiten. Kursiv, zentriert, mit Verfasser/Werk
* in Kapitälchen als dezente Quelle darunter. Bordeaux als Akzent
* für das öffnende Anführungszeichen (über CSS-Pseudo-Element wird
* NICHT genutzt — Anführungszeichen kommen direkt aus dem Renderer,
* weil sie dort typografisch korrekt nach Sprache gesetzt sind).
* ══════════════════════════════════════════════════════════════════ */
.legal-zitat-block {
/* v0.16.6.0 — noch kompakter als 0.16.5.0. Das Zitat soll direkt am
H1 hängen, nicht in einer eigenen Sektion. */
padding-block: var(--space-2) var(--space-4);
}
.legal-zitat {
margin: 0;
text-align: center;
/* Schmaler als der schmale Container — das Zitat soll Atemraum
bekommen und nicht die volle Spaltenbreite einnehmen. */
max-width: 38rem;
margin-inline: auto;
padding-inline: var(--space-4);
position: relative;
}
/* Optisches Akzent-Element: ein zarter horizontaler Strich oberhalb
des Zitats, der es vom H1-Atem trennt, ohne aufdringlich zu sein. */
.legal-zitat::before {
content: "";
display: block;
width: 2.5rem;
height: 1px;
background: var(--thk-bordeaux);
margin: 0 auto var(--space-3) auto;
opacity: 0.55;
}
.legal-zitat__text {
font-family: var(--thk-serif);
font-style: italic;
font-weight: 400;
/* Größer als Body-Text, kleiner als ein Lead. Klassischer
Editorial-Blockquote-Größenrahmen. */
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
line-height: 1.5;
color: var(--thk-tinte);
margin: 0;
/* Sanft hängende Anführungszeichen-Wirkung über letter-spacing */
letter-spacing: 0.005em;
}
.legal-zitat__quelle {
margin-top: var(--space-3);
font-family: var(--thk-sans);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--thk-text-mute-stark);
font-style: normal;
}
.legal-zitat__verfasser {
font-style: normal;
color: var(--thk-bordeaux);
}
.legal-zitat__werk {
color: var(--thk-text-mute);
font-style: italic;
/* italic-Aufhebung der Sans-Großschreibung, damit das Werk in
der Quelle visuell als „Zitatquelle" lesbar bleibt. */
text-transform: none;
letter-spacing: 0.04em;
}
.legal-zitat__sep {
color: var(--thk-line);
margin-inline: 0.15em;
}
@media (max-width: 720px) {
.legal-zitat__text { font-size: 1.1rem; line-height: 1.55; }
.legal-zitat::before { width: 2rem; margin-bottom: var(--space-3); }
}