. Dieser Block wiederholt die
Regeln von oben fuer die neuen Namen, damit beide Ausgaben gestaltet sind.
========================================================================== */
/* --- Grundlage: Seite, Wrapper, Bereiche -------------------------------- */
/* Die Wrapper-Regeln gelten nur, wenn im Bereich KEIN randloser Abschnitt
aus inhalt/ liegt - sonst muesste dieser Abschnitt aus dem Container
ausbrechen. Siehe Block "Contao-Integration" am Ende. */
#header:not(:has(.bi-header)),
#footer:not(:has(.bi-footer)) { background: rgba(35, 37, 50, 0.4); }
#header:not(:has(.bi-header)) { border-bottom: 1px solid var(--bi-line); }
#footer:not(:has(.bi-footer)) { border-top: 1px solid var(--bi-line); margin-top: 96px; }
#header:not(:has(.bi-header)) .inside,
#footer:not(:has(.bi-footer)) .inside {
max-width: var(--bi-shell);
margin: 0 auto;
padding: 20px 32px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
}
/* --- Kopfzeile: Marke links, Navigation rechts -------------------------- */
#header {
position: sticky;
top: 0;
z-index: 20;
background: rgba(22, 24, 38, 0.86);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--bi-line);
}
#header:not(:has(.bi-header)) .inside {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
padding: 14px 32px;
}
/* Das Markenmodul steht zuerst, die Navigation wird nach rechts geschoben. */
#header .mod_navigation,
#header .mod_customnav,
#header .mod_changelanguage { margin-left: auto; }
#header .mod_navigation + .mod_changelanguage,
#header .mod_navigation + .mod_customnav { margin-left: 0; }
/* Marke (HTML-Modul im Kopfbereich) */
.brand {
display: flex;
align-items: center;
gap: 10px;
flex: none;
}
/* Sobald eine helle Logofassung vorliegt, wird sie hier eingesetzt:
Die dunkle Fassung (#002a7f) erreicht auf dem Grund #161826 nur 1,4:1
Kontrast und ist deshalb vorerst nicht eingebaut. */
.brand__logo { height: 26px; width: auto; display: block; flex: none; }
.brand__name {
font-weight: 500;
font-size: 17px;
letter-spacing: 0.01em;
color: var(--bi-text);
}
.brand__tag {
font-size: 11px;
color: var(--bi-neutral-500);
letter-spacing: 0.14em;
text-transform: uppercase;
padding-top: 3px;
}
a.brand:hover .brand__name { color: var(--bi-accent-300); }
@media (max-width: 720px) {
#header:not(:has(.bi-header)) .inside { gap: 16px; padding: 12px 20px; }
.brand__tag { display: none; }
#header .mod_navigation ul { gap: 18px; }
#header .mod_navigation a,
#header .mod_navigation strong { font-size: 14px; }
}
/* Rhythmus zwischen Inhaltselementen */
.mod_article > .content-headline { margin-top: 48px; margin-bottom: -16px; }
.mod_article > .content-headline:first-child,
.mod_article > .content-headline.first { margin-top: 0; }
/* --- Ueberschriften ------------------------------------------------------ */
.content-headline,
.content-text h1,
.content-list h1,
.content-accordion .accordion h1,
.content-downloads h1,
.content-table h1,
.content-form h1,
.mod_search h1,
.layout_short h1,
.layout_full h1,
.content-text h2,
.content-list h2,
.content-accordion .accordion h2,
.content-downloads h2,
.content-table h2,
.content-form h2,
.mod_search h2,
.layout_short h2,
.layout_full h2,
.content-text h3,
.content-list h3,
.content-accordion .accordion h3,
.content-downloads h3,
.content-table h3,
.content-form h3,
.mod_search h3,
.layout_short h3,
.layout_full h3,
.content-text h4,
.content-list h4,
.content-accordion .accordion h4,
.content-downloads h4,
.content-table h4,
.content-form h4,
.mod_search h4,
.layout_short h4,
.layout_full h4,
.content-text h5,
.content-list h5,
.content-accordion .accordion h5,
.content-downloads h5,
.content-table h5,
.content-form h5,
.mod_search h5,
.layout_short h5,
.layout_full h5,
.content-text h6,
.content-list h6,
.content-accordion .accordion h6,
.content-downloads h6,
.content-table h6,
.content-form h6,
.mod_search h6,
.layout_short h6,
.layout_full h6 {
font-family: var(--bi-font);
font-weight: 500;
color: var(--bi-text);
letter-spacing: -0.02em;
line-height: 1.12;
margin: 0 0 16px;
text-wrap: balance;
}
h1.content-headline,
.content-text h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; letter-spacing: -0.025em; max-width: 18ch; }
h2.content-headline,
.content-text h2 { font-size: clamp(28px, 3.4vw, 44px); max-width: 24ch; }
h3.content-headline,
.content-text h3 { font-size: 26px; letter-spacing: -0.015em; }
h4.content-headline,
.content-text h4 { font-size: 20px; letter-spacing: -0.01em; }
h5.content-headline,
.content-text h5 { font-size: 17px; }
h6.content-headline,
.content-text h6 {
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--bi-accent-300);
font-weight: 400;
}
/* Nocturne-Signatur: kurzer Akzentstrich vor dem Ueberschriften-Element. */
.content-headline::before {
content: "";
display: block;
width: 34px;
height: 1px;
background: var(--bi-accent);
margin-bottom: 20px;
}
/* --- Fliesstext ---------------------------------------------------------- */
.content-text p,
.content-list p,
.content-accordion .accordion p,
.content-downloads p,
.content-table p,
.content-form p,
.mod_search p,
.layout_short p,
.layout_full p {
margin: 0 0 16px;
max-width: 68ch;
color: var(--bi-neutral-300);
line-height: 1.65;
text-wrap: pretty;
}
.content-text p:last-child,
.content-list p:last-child,
.content-accordion .accordion p:last-child,
.content-downloads p:last-child,
.content-table p:last-child,
.content-form p:last-child,
.mod_search p:last-child,
.layout_short p:last-child,
.layout_full p:last-child { margin-bottom: 0; }
.content-text > p:first-of-type { font-size: 17px; color: var(--bi-neutral-200); }
.content-text strong,
.content-list strong,
.content-accordion .accordion strong,
.content-downloads strong,
.content-table strong,
.content-form strong,
.mod_search strong,
.layout_short strong,
.layout_full strong,
.content-text b,
.content-list b,
.content-accordion .accordion b,
.content-downloads b,
.content-table b,
.content-form b,
.mod_search b,
.layout_short b,
.layout_full b { font-weight: 500; color: var(--bi-text); }
.content-text small,
.content-list small,
.content-accordion .accordion small,
.content-downloads small,
.content-table small,
.content-form small,
.mod_search small,
.layout_short small,
.layout_full small { font-size: 13px; color: var(--bi-neutral-500); }
.content-text code,
.content-list code,
.content-accordion .accordion code,
.content-downloads code,
.content-table code,
.content-form code,
.mod_search code,
.layout_short code,
.layout_full code {
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 0.9em;
background: var(--bi-surface);
border-radius: var(--bi-radius-sm);
padding: 2px 6px;
}
.content-hr hr,
.content-text hr {
border: 0;
height: 1px;
margin: 48px 0;
background: linear-gradient(90deg, transparent, var(--bi-line-strong) 48px,
var(--bi-line-strong) calc(100% - 48px), transparent);
}
.content-text blockquote,
.content-quote blockquote {
margin: 0;
padding-left: 20px;
border-left: 2px solid var(--bi-accent);
font-size: 19px;
line-height: 1.55;
color: var(--bi-text);
max-width: 52ch;
}
.content-text blockquote p,
.content-quote blockquote p { color: inherit; font-size: inherit; max-width: none; }
.content-text a,
.content-list a,
.mod_search a { color: var(--bi-accent); border-bottom: 1px solid rgba(74, 127, 214, 0.4); }
.content-text a:hover,
.content-list a:hover,
.mod_search a:hover { color: var(--bi-accent-300); border-bottom-color: var(--bi-accent-300); }
/* --- Listen (.content-list, Listen im Text) ---------------------------------- */
.content-text ul,
.content-text ol,
.content-list ul,
.content-list ol {
margin: 0 0 16px;
padding: 0;
list-style: none;
max-width: 68ch;
display: flex;
flex-direction: column;
gap: 10px;
}
.content-text li,
.content-list li {
display: flex;
gap: 12px;
color: var(--bi-neutral-200);
line-height: 1.6;
}
.content-text ul > li::before,
.content-list ul > li::before {
content: "—";
color: var(--bi-accent);
flex: none;
}
.content-list ol { counter-reset: bi-li; }
.content-list ol > li { counter-increment: bi-li; }
.content-list ol > li::before {
content: counter(bi-li, decimal-leading-zero);
color: var(--bi-accent);
font-variant-numeric: tabular-nums;
letter-spacing: 0.1em;
flex: none;
min-width: 2.4em;
}
/* --- Bilder (.content-image, .content-gallery) ----------------------------------- */
.content-image figure,
.content-gallery figure { margin: 0; }
.content-image img,
.content-gallery img {
display: block;
width: 100%;
height: auto;
border-radius: var(--bi-radius);
}
/* Nocturne: Fotos werden in den Grund eingeblendet. */
.content-image .image_container,
.content-gallery .image_container { mix-blend-mode: lighten; background-color: transparent; }
.content-image figcaption,
.content-image .caption,
.content-gallery figcaption {
margin-top: 12px;
font-size: 13px;
color: var(--bi-neutral-500);
max-width: 60ch;
}
.content-image.float_left { float: left; margin: 0 32px 24px 0; max-width: 46%; }
.content-image.float_right { float: right; margin: 0 0 24px 32px; max-width: 46%; }
.content-gallery ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 20px;
}
.content-gallery ul.cols_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-gallery ul.cols_3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.content-gallery ul.cols_4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.content-gallery ul.cols_6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.content-gallery li::before { content: none; }
/* --- Hyperlink-Element und Buttons ------------------------------------- */
.content-hyperlink a,
a.hyperlink_txt,
.content-form .submit,
.content-form button,
.content-form input[type="submit"],
.mod_search button,
.mod_search input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--bi-font);
font-weight: 500;
font-size: 15px;
line-height: 1.2;
color: var(--bi-accent);
background: transparent;
border: 1px solid var(--bi-accent);
border-radius: var(--bi-radius);
padding: 12px 22px;
cursor: pointer;
width: auto;
}
.content-hyperlink a:hover,
.content-form .submit:hover,
.content-form button:hover,
.mod_search button:hover { background: rgba(74, 127, 214, 0.12); color: var(--bi-accent); }
.content-hyperlink a:active,
.content-form .submit:active,
.content-form button:active { background: rgba(74, 127, 214, 0.22); }
/* --- Tabelle (.content-table) ------------------------------------------------ */
.content-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.content-table th {
text-align: left;
font-weight: 400;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(233, 233, 237, 0.6);
padding: 12px 8px;
background: linear-gradient(90deg, transparent, rgba(233, 233, 237, 0.16) 48px,
rgba(233, 233, 237, 0.16) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.content-table td {
padding: 12px 8px;
color: var(--bi-neutral-200);
background: linear-gradient(90deg, transparent, rgba(233, 233, 237, 0.08) 48px,
rgba(233, 233, 237, 0.08) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.content-table caption {
text-align: left;
font-size: 13px;
color: var(--bi-neutral-500);
padding-bottom: 12px;
}
/* --- Akkordeon (.content-accordion) ----------------------------------------- */
.content-accordion { border-bottom: 1px solid var(--bi-line-strong); }
.content-accordion .toggler {
cursor: pointer;
padding: 20px 40px 20px 0;
position: relative;
font-size: 19px;
font-weight: 500;
color: var(--bi-text);
}
.content-accordion .toggler::after {
content: "+";
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
color: var(--bi-accent);
font-size: 22px;
line-height: 1;
}
.content-accordion .toggler.active::after { content: "–"; }
.content-accordion .toggler:hover { color: var(--bi-accent-300); }
.content-accordion .accordion { padding: 0 0 24px; }
/* --- Downloads --------------------------------------------------------- */
.content-downloads ul,
.content-download ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.content-downloads li { display: block; }
.content-downloads li::before { content: none; }
.content-downloads a,
.content-download a {
display: flex;
align-items: baseline;
gap: 12px;
padding: 14px 16px;
background: var(--bi-surface);
box-shadow: var(--bi-shadow-sm);
border-radius: var(--bi-radius);
color: var(--bi-text);
border: 0;
}
.content-downloads a:hover { box-shadow: var(--bi-shadow-md); color: var(--bi-text); }
.content-downloads .size { color: var(--bi-neutral-500); font-size: 13px; }
/* --- Formulare (.content-form, Widgets) ------------------------------------- */
.content-form,
.mod_search .formbody {
background: var(--bi-surface);
box-shadow: var(--bi-shadow-sm);
border-radius: var(--bi-radius);
padding: 28px;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 18px;
}
.widget { display: flex; flex-direction: column; gap: 6px; }
.widget label {
font-size: 13px;
color: var(--bi-neutral-400);
letter-spacing: 0.02em;
}
.widget label .mandatory { color: var(--bi-accent); }
.widget .text,
.widget .textarea,
.widget .select,
.widget input[type="text"],
.widget input[type="email"],
.widget input[type="tel"],
.widget input[type="url"],
.widget input[type="number"],
.widget input[type="password"],
.widget input[type="search"],
.widget textarea,
.widget select {
font-family: var(--bi-font);
font-size: 15px;
color: var(--bi-text);
background: var(--bi-bg);
border: 1px solid var(--bi-line-strong);
border-radius: var(--bi-radius);
padding: 10px 12px;
width: 100%;
}
.widget textarea { min-height: 120px; resize: vertical; }
.widget .text:hover,
.widget textarea:hover,
.widget select:hover { border-color: var(--bi-neutral-500); }
.widget ::placeholder { color: var(--bi-neutral-500); }
.widget-radio .radio_container,
.widget-checkbox .checkbox_container {
display: flex;
flex-direction: column;
gap: 8px;
}
.radio_container label,
.checkbox_container label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: var(--bi-neutral-200);
}
.widget input[type="radio"],
.widget input[type="checkbox"] { accent-color: var(--bi-accent); width: auto; }
.widget .error,
.content-form p.error { color: var(--bi-accent-300); font-size: 13px; }
.content-form .confirmation {
color: var(--bi-accent-300);
border-left: 2px solid var(--bi-accent);
padding-left: 16px;
}
.content-form .submit_container { margin-top: 4px; }
/* --- Navigation (.mod_navigation, .mod_customnav) ---------------------- */
.mod_navigation ul,
.mod_customnav ul,
.mod_breadcrumb ul,
.mod_changelanguage ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 26px;
align-items: center;
}
.mod_navigation li::before,
.mod_customnav li::before,
.mod_breadcrumb li::before,
.mod_changelanguage li::before { content: none; }
.mod_navigation a,
.mod_navigation strong,
.mod_customnav a,
.mod_customnav strong {
font-size: 15px;
font-weight: 400;
color: var(--bi-neutral-300);
padding: 4px 0;
border-bottom: 1px solid transparent;
}
.mod_navigation a:hover,
.mod_customnav a:hover { color: var(--bi-text); }
.mod_navigation a.trail,
.mod_navigation strong.active,
.mod_customnav strong.active {
color: var(--bi-text);
border-bottom-color: var(--bi-accent);
}
.mod_navigation ul.level_2 {
gap: 14px;
flex-direction: column;
align-items: flex-start;
padding: 12px 0 0;
}
.mod_navigation ul.level_2 a { font-size: 14px; }
/* --- Breadcrumb, Sprachwechsler, Blaetterfunktion --------------------- */
.mod_breadcrumb { font-size: 13px; color: var(--bi-neutral-500); }
.mod_breadcrumb ul { gap: 10px; }
.mod_breadcrumb li + li::before {
content: "/";
color: var(--bi-neutral-500);
margin-right: 10px;
}
.mod_breadcrumb a { color: var(--bi-neutral-400); border: 0; }
.mod_breadcrumb .active { color: var(--bi-neutral-200); }
.mod_changelanguage a { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.mod_changelanguage img { width: 16px; height: auto; display: inline-block; vertical-align: -2px; }
.pagination { margin-top: 40px; font-size: 14px; }
.pagination p { color: var(--bi-neutral-500); margin: 0 0 12px; }
.pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pagination li::before { content: none; }
.pagination a,
.pagination .current {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
border-radius: var(--bi-radius-sm);
border: 1px solid var(--bi-line-strong);
color: var(--bi-neutral-300);
}
.pagination a:hover { border-color: var(--bi-accent); color: var(--bi-accent); }
.pagination .current { border-color: var(--bi-accent); color: var(--bi-accent); }
/* --- Suche und Listen-Module ------------------------------------------ */
.mod_search .header { color: var(--bi-neutral-500); font-size: 14px; margin: 24px 0; }
.mod_search .value { color: var(--bi-text); }
.mod_search .even,
.mod_search .odd { padding: 24px 0; border-bottom: 1px solid var(--bi-line); }
.mod_search .url,
.mod_search .relevance { font-size: 13px; color: var(--bi-neutral-500); }
.highlight { background: rgba(74, 127, 214, 0.22); color: var(--bi-text); }
.layout_short,
.layout_latest,
.layout_full { padding: 28px 0; border-bottom: 1px solid var(--bi-line); }
.layout_short .info,
.layout_full .info { font-size: 13px; color: var(--bi-neutral-500); margin-bottom: 8px; }
.more a { font-size: 14px; }
/* --- Video / Player ---------------------------------------------------- */
.content-youtube .responsive,
.content-vimeo .responsive,
.content-player video {
border-radius: var(--bi-radius);
overflow: hidden;
width: 100%;
}
/* --- Zustaende und Hilfsklassen --------------------------------------- */
:focus-visible { outline: 2px solid var(--bi-accent); outline-offset: 2px; }
::selection { background: rgba(74, 127, 214, 0.3); }
.clear { display: block; clear: both; }
.content-text::after { content: ""; display: block; clear: both; }
@media (max-width: 900px) {
#main:not(:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows)) .inside,
#left .inside,
#right .inside { padding: 48px 24px; }
#header:not(:has(.bi-header)) .inside,
#footer:not(:has(.bi-footer)) .inside { padding: 16px 24px; }
.content-gallery ul.cols_3,
.content-gallery ul.cols_4,
.content-gallery ul.cols_6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-image.float_left,
.content-image.float_right { float: none; max-width: 100%; margin: 0 0 24px; }
}
@media (max-width: 640px) {
#main:not(:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows)) .inside { padding: 36px 20px; }
.content-gallery ul { grid-template-columns: 1fr; }
.content-form { padding: 20px; }
}
/* ==========================================================================
Contao-Integration
Contao 5.3 liefert kein eigenes Frontend-Stylesheet, aber es erzeugt eine
feste Wrapper-Struktur:
body
#wrapper
header#header > .inside -> Frontend-Modul (mod_html)
#container
main#main > .inside -> Artikel (mod_article) mit .content-html
footer#footer > .inside -> Frontend-Modul (mod_html)
Die Abschnitte dieses Pakets bringen ihre Breite (1180 px) und ihre
Innenabstaende selbst mit. Damit Hero, Zahlenband und Kontakt randlos ueber
die volle Fensterbreite laufen, werden die Contao-Wrapper hier neutralisiert.
Dieser Block ist der einzige Ort, der Contao-Klassen anfasst.
========================================================================== */
#contentwrapper,
#fix-wrapper,
#top-wrapper,
#wrapper:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows),
#container:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows),
#main:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows),
#header:has(.bi-header),
#footer:has(.bi-footer),
#left:has(.bi-rows),
#right:has(.bi-rows) {
width: auto;
max-width: none;
margin: 0;
padding: 0;
float: none;
background: none;
border: 0;
}
/* Contaos Innencontainer begrenzt sonst die Breite bzw. setzt Abstaende. */
#header:has(.bi-header) .inside,
#container:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows) .inside,
#footer:has(.bi-footer) .inside {
width: auto;
max-width: none;
margin: 0;
padding: 0;
display: block;
gap: 0;
}
/* Artikel und Inhaltselemente: keine Eigenabstaende, volle Breite.
.block ergaenzt Contao automatisch, .first/.last auf dem ersten und
letzten Element eines Artikels. */
.mod_article:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows),
.mod_html:has(.bi-header, .bi-footer),
.content-html:has(.bi-hero, .bi-stats, .bi-contact, .bi-rows, .bi-section, .bi-card) {
width: auto;
max-width: none;
margin: 0;
padding: 0;
overflow: visible;
display: block;
color: var(--bi-text);
}
/* Contao setzt bei leerer Ueberschrift gelegentlich ein leeres h1/h2 – ausblenden. */
.content-html > h1:empty,
.content-html > h2:empty,
.content-html > h3:empty { display: none; }
/* Der Backend-Rahmen ("Vorschaumodus") soll das Layout nicht verschieben. */
#tl_preview_toggle,
.fe_preview_bar { z-index: 30; }
/* Falls das Seitenlayout zusaetzlich einen Theme-Reset mitbringt, der
box-sizing anders setzt: unsere Abschnitte bestehen auf border-box. */
section,
article,
aside,
header,
footer,
figure { margin: 0; }
/* Contaos Sprungmarken-Ziele (id="pakete" usw.) sollen nicht unter der
klebenden Kopfzeile verschwinden. */
[id] { scroll-margin-top: 84px; }
/* ==========================================================================
Abschnitte aus Standard-Inhaltselementen
Kein HTML-Element, keine eigene Vorlage: ein normales Inhaltselement plus
eine CSS-Klasse im Feld "CSS-ID/Klasse". Welche Klasse zu welchem
Elementtyp gehoert, steht in der README.
hero Text-Element mit Bild -> Bildheader
stats Tabellen-Element, 2 Zeilen -> Zahlenband
plan Text-Element, dreimal -> Paketkarte
plan--rec zusaetzlich am Mittleren -> "Empfohlen"
========================================================================== */
/* Randlos: die Abschnitte nehmen die aeussere Rasterspur ein. */
.mod_article > .hero,
.mod_article > .stats { grid-column: full; }
/* --- Hero: Text-Element mit eingefuegtem Bild --------------------------- */
.content-text.hero {
position: relative;
overflow: hidden;
padding: 140px max(32px, calc((100% - (var(--bi-shell) - 64px)) / 2)) 84px;
display: block;
}
.content-text.hero .image_container,
.content-text.hero figure {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
mix-blend-mode: normal;
}
.content-text.hero .image_container img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
border-radius: 0;
}
.content-text.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(60% 70% at 8% 90%, rgba(74, 127, 214, 0.22), transparent 70%),
linear-gradient(100deg, #161826 12%, rgba(22, 24, 38, 0.86) 46%, rgba(22, 24, 38, 0.35) 100%);
}
/* Die redaktionellen Inhalte liegen ueber dem Bild und in der Innenbreite.
:where() hat Spezifitaet 0, damit die Regeln darunter greifen. */
.content-text.hero > h1,
.content-text.hero > h2 {
font-size: clamp(40px, 5.6vw, 76px);
line-height: 1.02;
letter-spacing: -0.025em;
max-width: calc(15ch + 64px);
margin-bottom: 28px;
}
.content-text.hero > p {
font-size: 19px;
line-height: 1.6;
color: var(--bi-neutral-300);
max-width: 52ch;
margin-bottom: 16px;
}
/* Links im letzten Absatz werden zu Schaltflaechen. */
.content-text.hero > p:last-of-type { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.content-text.hero > p:last-of-type a {
display: inline-flex;
align-items: center;
font-weight: 500;
font-size: 15px;
color: var(--bi-accent);
border: 1px solid var(--bi-accent);
border-radius: var(--bi-radius);
padding: 12px 22px;
}
.content-text.hero > p:last-of-type a:hover { background: rgba(74, 127, 214, 0.12); }
.content-text.hero > p:last-of-type a:nth-child(n+2) { border-color: transparent; }
.content-text.hero > p:last-of-type a:nth-child(n+2):hover { background: rgba(74, 127, 214, 0.1); }
/* --- Zahlenband: Tabellen-Element, zwei Zeilen -------------------------- */
.content-table.stats {
background: var(--bi-section);
position: relative;
overflow: hidden;
}
.content-table.stats::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(70% 120% at 15% 0%, var(--bi-section-glow), transparent 70%);
}
.content-table.stats {
padding: 56px max(32px, calc((100% - (var(--bi-shell) - 64px)) / 2));
}
.content-table.stats table {
position: relative;
max-width: none;
margin: 0;
padding: 0;
table-layout: fixed;
font-size: inherit;
}
.content-table.stats td,
.content-table.stats th {
background: none;
padding: 0 16px 0 0;
vertical-align: top;
text-transform: none;
letter-spacing: normal;
}
.content-table.stats tr:first-child td,
.content-table.stats tr:first-child th {
font-weight: 500;
font-size: 44px;
/* Feste Ziffernbreite, damit beim Hochzaehlen nichts springt. */
font-variant-numeric: tabular-nums;
line-height: 1;
letter-spacing: -0.03em;
color: var(--bi-text);
padding-bottom: 10px;
}
.content-table.stats tr:last-child td {
font-size: 14px;
line-height: 1.5;
color: var(--bi-section-text);
}
/* --- Paketkarten: drei Text-Elemente ------------------------------------ */
.content-text.plan {
display: flex;
flex-direction: column;
padding: 28px;
position: relative;
background: var(--bi-surface);
border-radius: var(--bi-radius);
box-shadow: var(--bi-shadow-sm);
}
.content-text.plan--rec,
.content-text.plan-rec { box-shadow: var(--bi-shadow-md); }
.content-text.plan--rec::before,
.content-text.plan-rec::before {
content: "Empfohlen";
/* In der Flex-Karte greift float nicht, die Marke wuerde sonst als eigene
Zeile ueber die ganze Breite laufen. */
position: absolute;
top: 24px;
left: 28px;
font-size: 11px;
line-height: 1.5;
padding: 3px 10px;
border-radius: 6px;
background: var(--bi-accent-800);
color: var(--bi-accent-100);
}
.content-text.plan h2,
.content-text.plan h3 { font-size: 22px; max-width: none; margin-bottom: 14px; }
.content-text.plan p { font-size: 15px; max-width: none; }
.content-text.plan > p:first-of-type { font-size: 15px; color: var(--bi-neutral-400); }
.content-text.plan ul { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bi-line-strong); }
.content-text.plan > p:last-child { margin-top: auto; }
.content-text.plan p:last-child a {
display: inline-flex;
justify-content: center;
width: 100%;
margin-top: 18px;
font-weight: 500;
color: var(--bi-accent);
border: 1px solid var(--bi-accent);
border-radius: var(--bi-radius);
padding: 10px 18px;
}
.content-text.plan p:last-child a:hover { background: rgba(74, 127, 214, 0.12); }
@media (max-width: 900px) {
.content-text.hero { padding: 100px max(20px, calc((100% - (var(--bi-shell) - 64px)) / 2)) 64px; }
/* Alles untereinander in der vollen Inhaltsspur. */
.mod_article > :is(.w-1-6, .w-1-3, .w-1-2, .w-2-3, .w-5-6, .plan, .bi-mon),
.mod_article > :is(.w-1-6, .w-1-3, .w-1-2, .w-2-3, .w-5-6, .plan, .bi-mon) + :is(.w-1-6, .w-1-3, .w-1-2, .w-2-3, .w-5-6, .plan, .bi-mon) { grid-column: content; }
.content-text.plan { margin-bottom: 20px; }
.content-table.stats { padding: 40px max(20px, calc((100% - (var(--bi-shell) - 64px)) / 2)); }
/* Die Tabelle bleibt vierspaltig, damit Zahl und Text beieinanderstehen. */
.content-table.stats tr:first-child td,
.content-table.stats tr:first-child th { font-size: 32px; }
.content-table.stats tr:last-child td { font-size: 13px; }
}
@media (max-width: 560px) {
.content-table.stats { padding: 32px 20px; }
.content-table.stats tr:first-child td,
.content-table.stats tr:first-child th { font-size: 24px; }
.content-table.stats td { padding-right: 10px; }
}
/* --- Anpassungen an die neue Struktur ---------------------------------- */
/* Rhythmus: die neuen Elemente tragen kein .block mehr. Abstaende kommen
ausschliesslich aus row-gap des Artikelrasters. */
.mod_article > * + * { margin-top: 0; }
.mod_article > .content-headline { margin-top: 48px; margin-bottom: -16px; }
.mod_article > .content-headline:first-child { margin-top: 0; }
/* Der Fliesstext liegt in .rte - der Wrapper selbst bleibt unsichtbar. */
.content-text > .rte > p:first-of-type { font-size: 17px; color: var(--bi-neutral-200); }
.content-text > .rte > p { max-width: 68ch; }
/* Hero: Bild ohne .image_container, Text in .rte ------------------------ */
.content-text.hero > figure {
position: absolute;
inset: 0;
margin: 0;
z-index: 0;
mix-blend-mode: normal;
}
.content-text.hero > figure img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
border-radius: 0;
}
.content-text.hero > h1,
.content-text.hero > h2 { max-width: 15ch; }
.content-text.hero > .rte > p {
font-size: 19px;
line-height: 1.6;
color: var(--bi-neutral-300);
max-width: 52ch;
margin-bottom: 16px;
}
.content-text.hero > .rte > p:first-of-type { font-size: 19px; color: var(--bi-neutral-300); }
/* Der letzte Absatz wird zur Schaltflaechenreihe. */
.content-text.hero > .rte > p:last-of-type {
margin-top: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px;
max-width: none;
}
.content-text.hero > .rte > p:last-of-type a {
display: inline-flex;
align-items: center;
font-weight: 500;
font-size: 15px;
color: var(--bi-accent);
border: 1px solid var(--bi-accent);
border-radius: var(--bi-radius);
padding: 12px 22px;
}
.content-text.hero > .rte > p:last-of-type a:hover { background: rgba(74, 127, 214, 0.12); }
.content-text.hero > .rte > p:last-of-type a:nth-child(n+2) { border-color: transparent; }
/* Paketkarten: der .rte-Wrapper traegt die Spalte ---------------------- */
.content-text.plan > .rte {
display: flex;
flex-direction: column;
flex: 1;
max-width: none;
}
.content-text.plan > .rte > p { max-width: none; }
.content-text.plan > .rte > p:first-of-type { font-size: 15px; color: var(--bi-neutral-400); }
.content-text.plan > .rte > ul,
.content-text.plan > .rte > ol {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--bi-line-strong);
}
.content-text.plan > .rte > p:last-child { margin-top: auto; margin-bottom: 0; }
.content-text.plan > .rte > p:last-child a {
display: inline-flex;
justify-content: center;
width: 100%;
margin-top: 18px;
font-weight: 500;
color: var(--bi-accent);
border: 1px solid var(--bi-accent);
border-radius: var(--bi-radius);
padding: 10px 18px;
border-bottom-width: 1px;
}
.content-text.plan > .rte > p:last-child a:hover { background: rgba(74, 127, 214, 0.12); }
/* Die Bildvarianten media--above/below/left/right heben die absolute
Positionierung im Hero nicht auf. */
.hero.media--above > figure,
.hero.media--below > figure,
.hero.media--left > figure,
.hero.media--right > figure { float: none; }
/* --- Hero als ganzer Artikel -------------------------------------------
Eleganter als ein einzelnes Text-Element: der Artikel selbst traegt die
Klasse "hero" (Artikel > Experten-Einstellungen > CSS-ID/Klasse), das
Hintergrundbild ist ein Bild-Element mit der Klasse "bg", und darin
stehen beliebige Elemente mit Breitenklassen.
Artikel CSS-Klasse hero
Bild-Element CSS-Klasse bg (das Hintergrundbild)
Text-Element CSS-Klasse w-1-2 v-center
HTML-Element