/** Shopify CDN: Minification failed Line 2938:0 Unexpected "{" Line 2938:1 Expected identifier but found "%" Line 2939:26 Expected identifier but found whitespace Line 2939:79 Expected identifier but found whitespace Line 2942:1 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:analyse-finden (INDEX:1) */ /* Symptom-Finder. Farben und Schriften aus dem Theme, Formen neu. */ .finder { max-width: 62rem; margin-inline: auto; } .finder__ueberschrift { margin-block-end: var(--sp-2); } .finder__untertitel { color: rgb(var(--color-foreground) / .7); margin-block-end: var(--sp-6); } /* Zwei Einstiege */ .finder-einstieg { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-6); } .finder-einstieg__knopf { flex: 1 1 14rem; padding: var(--sp-3) var(--sp-4); border: 1px solid rgb(var(--color-border)); border-radius: var(--border-radius-small); background: transparent; color: rgb(var(--color-foreground)); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .finder-einstieg__knopf.is-aktiv { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: rgb(var(--color-foreground)); } /* Symptom-Schaltflächen */ .finder-gruppe { margin-block-end: var(--sp-4); } .finder-gruppe__titel { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--color-foreground) / .55); margin-block-end: var(--sp-2); } .finder-gruppe__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .finder-chip { display: inline-flex; align-items: center; gap: var(--sp-1d5); min-height: 44px; /* Fingergroesse, auch auf 375 px */ padding: var(--sp-2) var(--sp-3d5); border: 1px solid rgb(var(--color-border)); border-radius: 999px; background: transparent; color: rgb(var(--color-foreground)); font-size: var(--text-sm); cursor: pointer; transition: background-color .18s ease, border-color .18s ease; } .finder-chip:hover { border-color: rgb(var(--color-foreground) / .5); } .finder-chip.is-aktiv, .finder-chip--gewaehlt { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: rgb(var(--color-foreground)); } .finder-chip__weg { font-size: 1.1em; line-height: 1; opacity: .8; } /* Suchfeld */ .finder-suchfeld { position: relative; margin-block: var(--sp-5) var(--sp-3); } .finder-suchfeld__label { display: block; font-size: var(--text-sm); margin-block-end: var(--sp-1d5); } .finder-suchfeld__eingabe { width: 100%; min-height: 48px; } .finder-suchfeld__hinweis { font-size: var(--text-xs); color: rgb(var(--color-foreground) / .55); margin-block-start: var(--sp-1); } .finder-vorschlaege { position: absolute; inset-inline: 0; z-index: 3; background: rgb(var(--color-background)); border: 1px solid rgb(var(--color-border)); border-radius: var(--border-radius-small); box-shadow: 0 8px 24px rgb(0 0 0 / .08); overflow: hidden; } .finder-vorschlag { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); width: 100%; min-height: 44px; padding: var(--sp-2d5) var(--sp-3); background: transparent; border: 0; border-block-end: 1px solid rgb(var(--color-border-light)); text-align: start; cursor: pointer; font-size: var(--text-sm); } .finder-vorschlag:last-child { border-block-end: 0; } .finder-vorschlag:hover { background: rgb(var(--color-foreground) / .04); } .finder-vorschlag--leer { color: rgb(var(--color-foreground) / .6); cursor: default; } .finder-vorschlag__hinweis { font-size: var(--text-xs); color: rgb(var(--color-info-text)); white-space: nowrap; } .finder-gewaehlt { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-3); } .finder-zuruecksetzen { background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--text-sm); text-decoration: underline; color: rgb(var(--color-foreground) / .7); } /* Hinweis bei Alarmzeichen — steht IMMER vor Empfehlungen. NICHT --color-sale-tag: das ist im Theme die Farbe des Angebots-Etiketts. Dasselbe Rot fuer "Angebot!" und "geh zum Arzt" ist eine unglueckliche Doppelbelegung. Stattdessen die semantischen Paare des Themes: error fuer akut, info fuer abklaerungsbeduerftig. */ .finder-warnung { margin-block: var(--sp-5) var(--sp-4); padding: var(--sp-4); border-radius: var(--border-radius-small); border-inline-start: 4px solid rgb(var(--color-info-text)); background: rgb(var(--color-info-background)); color: rgb(var(--color-info-text)); } .finder-warnung--akut { border-inline-start-width: 6px; border-inline-start-color: rgb(var(--color-error-text)); background: rgb(var(--color-error-background)); color: rgb(var(--color-error-text)); } .finder-warnung__text { font-size: var(--text-base); font-weight: 500; margin: 0; } .finder-warnung__welche { font-size: var(--text-xs); opacity: .8; margin-block-start: var(--sp-2); margin-block-end: 0; } /* Trefferkarten */ .finder-ergebnis__kopf { margin-block: var(--sp-6) var(--sp-3); font-size: var(--text-h4); } .finder-karten { display: grid; gap: var(--sp-3); } .finder-karte { padding: var(--sp-4); border: 1px solid rgb(var(--color-border)); border-radius: var(--border-radius-small); background: rgb(var(--color-background)); } .finder-karte--beste { border-color: rgb(var(--color-foreground)); border-width: 2px; } .finder-karte__oben { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); align-items: baseline; } .finder-karte__rang { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; opacity: .7; } .finder-karte__quote { font-size: var(--text-sm); } .finder-karte__quote-detail { opacity: .7; } .finder-karte__name { margin-block: var(--sp-2) var(--sp-1); font-size: var(--text-h5); } .finder-karte__meta { font-size: var(--text-sm); color: rgb(var(--color-foreground) / .75); margin: 0; } .finder-karte__preis { font-weight: 600; color: rgb(var(--color-price, var(--color-foreground))); } .finder-karte__wegen { font-size: var(--text-sm); margin-block: var(--sp-3) var(--sp-2); } .finder-karte__kette { font-size: var(--text-sm); margin-block-end: var(--sp-3); } .finder-karte__kette summary { cursor: pointer; color: rgb(var(--color-foreground) / .7); } .finder-karte__kette ul { margin-block-start: var(--sp-2); padding-inline-start: var(--sp-4); } .finder-karte__knopf { display: inline-flex; min-height: 44px; align-items: center; } .finder-karte__mehr { display: inline-block; margin-inline-start: var(--sp-3); font-size: var(--text-sm); } .finder-karte__nichtkaufbar { font-size: var(--text-sm); color: rgb(var(--color-foreground) / .6); } .finder-gleichstand { font-size: var(--text-sm); margin-block: 0 var(--sp-3); color: rgb(var(--color-foreground) / .75); } .finder-weitere { margin-block-start: var(--sp-3); } .finder-weitere summary { cursor: pointer; padding: var(--sp-3) 0; font-size: var(--text-sm); color: rgb(var(--color-foreground) / .75); } .finder-weitere summary:hover { color: rgb(var(--color-foreground)); } .finder-weitere .finder-karten { margin-block-start: var(--sp-2); } .finder-fussnote { font-size: var(--text-xs); color: rgb(var(--color-foreground) / .55); margin-block-start: var(--sp-3); } .finder-kombi { margin-block-start: var(--sp-4); padding: var(--sp-4); border: 1px dashed rgb(var(--color-border)); border-radius: var(--border-radius-small); } .finder-kombi__text { margin: 0 0 var(--sp-3); font-size: var(--text-sm); } .finder-leer { color: rgb(var(--color-foreground) / .7); } .finder-noscript { margin-block-start: var(--sp-4); } .finder-biomarker-karte { padding: var(--sp-4); border: 1px solid rgb(var(--color-border)); border-radius: var(--border-radius-small); margin-block-end: var(--sp-3); } .finder-biomarker-liste { margin-block-start: var(--sp-2); padding-inline-start: var(--sp-4); font-size: var(--text-sm); } @media screen and (min-width: 750px) { .finder-karten { grid-template-columns: 1fr; } .finder-karte--beste { padding: var(--sp-5); } } /* END_SECTION:analyse-finden */ /* START_SECTION:diagnostik-akkordeon (INDEX:23) */ /* Faellt ein Bild weg, faellt auch seine Spalte weg — kein leerer Platz. */ /* Beide Klassen zusammen im Selektor (`.od__anleitung.od__anleitung--ohne-bild`), nicht nur die Zusatzklasse allein — sonst ist die Spezifitaet gleich der Grundregel in ory-diagnostik.css, und die LADEREIHENFOLGE entscheidet: Shopify buendelt `{% stylesheet %}`-Bloecke automatisch in den ``, VOR dem manuell eingebundenen `ory-diagnostik.css` (das erst im Seitenkoerper laedt) — die spaeter geladene Grundregel gewann dadurch immer, das Bild-lose Layout blieb zweispaltig statt auf 1fr zusammenzufallen. Am 17.08.2026 gemessen: Textspalte blieb bei 360px statt der vollen ~1580px Breite, obwohl kein Bild da war. */ .od__anleitung.od__anleitung--ohne-bild, .od__befund.od__befund--ohne-bild { grid-template-columns: 1fr; } /* Rueckversand-Tabelle — Export vom 17.08.2026, Z. 297–314: dieselbe Optik wie die Vier-Angaben-Tabelle im Kaufbereich (od__fakten), aber MIT sichtbarem Tabellenkopf in Grau F4F3F9, Monoschrift, Grossbuchstaben. Drei Spalten passen auf 375 px nicht, also ein eigener Scrollbereich — die TABELLE scrollt, nicht die Seite. */ .od__laender-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 24px; } .od__laender { width: 100%; min-width: 30rem; border-collapse: collapse; font-size: 16px; background: var(--od-weiss); border: 1px solid var(--od-rand); border-radius: 24px; } .od__laender thead tr { background: var(--od-flaeche); } .od__laender thead th { text-align: left; font-family: var(--font-body-family, Inter, sans-serif); font-weight: 400; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--od-soft); padding: 14px 24px; } .od__laender tbody tr { border-top: 1px solid var(--od-linie); } .od__laender tbody th { text-align: left; font-weight: 500; color: var(--od-text); padding: 18px 24px; vertical-align: top; } .od__laender td { padding: 18px 24px; color: var(--od-text-2); vertical-align: top; } /* Familiendiagnostik — Export Z. 326–333: KEINE Liste, ein Kartenraster zu drei Spalten wie die Bereichskarten bei „Was wird gemessen". */ .od__familie-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .od__familie-karte { background: var(--od-flach); border: 1px solid var(--od-rand); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 8px; } .od__familie-t { font-size: 18px; font-weight: 500; color: var(--od-text); line-height: 1.3; } .od__familie-d { font-size: 15px; line-height: 1.55; color: var(--od-mid); } /* Erstattung — Export Z. 343–355: Zeilenliste, Nummer links in Akzentfarbe (KEINE Pille), kein Kasten, keine Karte. */ .od__erstattung-liste { display: flex; flex-direction: column; gap: 12px; } .od__erstattung-punkt { display: flex; gap: 14px; align-items: flex-start; } .od__erstattung-nr { font-family: var(--font-body-family, Inter, sans-serif); font-size: 12px; color: var(--od-akzent); padding-top: 4px; flex: 0 0 auto; } .od__erstattung-text { display: flex; flex-direction: column; gap: 4px; } .od__erstattung-t { font-size: 17px; font-weight: 500; color: var(--od-text); } .od__erstattung-d { font-size: 16px; line-height: 1.55; color: var(--od-mid); } @media (max-width: 900px) { .od__familie-karten { grid-template-columns: 1fr; } .od__laender thead th, .od__laender tbody th, .od__laender td { padding: 14px 16px; } } /* END_SECTION:diagnostik-akkordeon */ /* START_SECTION:diagnostik-kauf (INDEX:25) */ /* Merkmalsleiste — nur wirksam, wenn die Einstellung gefuellt ist. Bewusst hier und nicht in ory-diagnostik.css: sie gehoert nicht zum Entwurf und soll die Entwurfsdatei nicht verwaessern. */ /* Spaltenzahl aus `--merkmal-anzahl` (von Liquid gesetzt), nicht fest — siehe Kommentar oben an der Einbindung. Fallback 6, falls die Variable einmal fehlt. */ .od__merkmale { display: grid; grid-template-columns: repeat(var(--merkmal-anzahl, 6), 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } /* Linksbuendig statt zentriert, Kachel doppelt so gross (44 → 88) — auf Wunsch vom 17.08.2026. `align-items: flex-start` statt `center`: der Block bleibt links ausgerichtet, Bild UND Text am selben Rand. */ .od__merkmal { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; } /* Die Verlaufskachel ueber jedem Merkmal. Beim Umbau am 16.08.2026 hatte ich sie verloren — die Leiste stand dann als nackter Text da. Erscheint nur, wenn KEIN Bild hinterlegt ist — sonst zeigt `.od__merkmal--bild` ein echtes Foto in derselben Groesse und Form. */ .od__merkmal:not(.od__merkmal--bild)::before { content: ''; width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; background: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } /* Echtes 1:1-Foto statt Farbkachel — auf Wunsch vom 17.08.2026, seitdem doppelt so gross (44 → 88). Der Radius waechst mit (12 → 20), sonst wirkt eine grosse Flaeche mit kleinem Eckradius eckiger als vorher. */ .od__merkmal--bild img { width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; object-fit: cover; display: block; } /* Groesser und an denselben Schriftregler gekoppelt wie der Rest der Seite (`--od-schrift`, siehe ory-diagnostik.css) — am 17.08.2026 auf Wunsch des Auftraggebers angehoben, vorher fest 15px/13px und dadurch klein neben dem Rest der Seite. Basiswert bei 1440 bewusst hoeher als der urspruengliche Entwurfswert (17/15 statt 15/13). */ .od__merkmal-t { font-size: clamp(15px, calc(1.181vw * var(--od-schrift, 1)), calc(23px * var(--od-schrift, 1))); line-height: 1.35; font-weight: 500; color: var(--od-text, #201F31); } .od__merkmal-d { font-size: clamp(13px, calc(1.042vw * var(--od-schrift, 1)), calc(20px * var(--od-schrift, 1))); line-height: 1.45; color: var(--od-soft, #8B89A0); } @media (max-width: 900px) { .od__merkmale { grid-template-columns: 1fr 1fr; gap: 22px; } .od__merkmal-t { font-size: 15px; } .od__merkmal-d { font-size: 13px; } } /* END_SECTION:diagnostik-kauf */ /* START_SECTION:diagnostik-produkte (INDEX:28) */ /* Supplements-Kopf — zweispaltig wie beim Video, Export Z. 415–421. */ .od__supp-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 36px; } .od__supp-kopf .od__kopf { margin: 0; } .od__supp-neben { margin: 0; font-size: 16px; line-height: 1.6; color: var(--od-mid); max-width: 400px; } /* Supplements-Karten — Export Z. 423–437: repeat(4,1fr) gap 20; Karte #FBFAFC Rand #EBE9F2 radius24 padding18 gap14; Bild 1:1 radius16; Bereich als Verlaufspille wie das Produkt-Etikett. */ .od__supp-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .od__supp-karte { background: var(--od-flach); border: 1px solid var(--od-rand); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; transition: border-color .18s ease; } .od__supp-karte:hover { border-color: #DEDCE8; } .od__supp-bild { aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--od-flaeche); margin-bottom: 9px; } .od__supp-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .od__supp-bereich { display: inline-block; align-self: flex-start; font-family: var(--font-body-family, Inter, sans-serif); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--od-text-2); background: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); border-radius: 999px; padding: 4px 10px; } .od__supp-name { font-size: 19px; line-height: 1.25; font-weight: 500; color: var(--od-text); } .od__supp-meta { font-size: 14px; line-height: 1.5; color: var(--od-mid); } .od__supp-preis { font-size: 18px; font-weight: 600; color: var(--od-akzent); margin-top: 4px; } @media (max-width: 900px) { .od__supp-kopf { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .od__supp-neben { max-width: none; } .od__supp-karten { grid-template-columns: 1fr 1fr; gap: 14px; } } @media (max-width: 480px) { .od__supp-karten { grid-template-columns: 1fr; } } /* END_SECTION:diagnostik-produkte */ /* START_SECTION:gutschein-ablauf (INDEX:38) */ .od__gutschein-ablauf { position: relative; background: var(--od-text, #111); color: #fff; overflow: hidden; } .od__gutschein-hex { position: absolute; inset: 0; opacity: 0.14; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'%3E%3Cpolygon points='28,1 55,17 55,49 28,65 1,49 1,17' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpolygon points='28,33 55,49 55,81 28,97 1,81 1,49' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); background-size: 112px 192px; } .od__gutschein-h2 { margin: 14px 0 0; font-weight: 600; letter-spacing: -0.015em; font-size: clamp(26px, calc(2.222vw * var(--od-schrift, 1)), calc(34px * var(--od-schrift, 1))); } .od__gutschein-schritte { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .od__gutschein-schritt { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); } .od__gutschein-schritt-n { width: 44px; height: 44px; border: 1.5px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; } .od__gutschein-schritt-t { font-size: 18px; font-weight: 600; line-height: 1.3; } .od__gutschein-schritt-d { font-size: 14px; line-height: 1.6; color: #b9b9b9; } .od__gutschein-karten { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .od__gutschein-karte { display: flex; flex-direction: column; gap: 18px; padding: 34px; min-height: 240px; border: 1px solid var(--od-band-l, #e2e2e2); background: var(--od-band-bg-2, #fafafa); color: var(--od-text, #111); transition: border-color 140ms ease; } .od__gutschein-karte:hover { border-color: var(--od-text, #111); } .od__gutschein-icon { width: 48px; height: 48px; border: 1.5px solid var(--od-text, #111); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .od__gutschein-karte-t { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; } .od__gutschein-karte-d { font-size: 15px; line-height: 1.6; color: var(--od-mid, #4a4a4a); flex: 1; } .od__gutschein-karte-cta { font-size: 14px; font-weight: 600; } @media (max-width: 900px) { .od__gutschein-schritte, .od__gutschein-karten { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .od__gutschein-schritte, .od__gutschein-karten { grid-template-columns: 1fr; } } /* END_SECTION:gutschein-ablauf */ /* START_SECTION:gutschein-kauf (INDEX:39) */ .od__gutschein-nennwert { margin-top: 30px; width: 100%; max-width: 460px; } .od__gutschein-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--od-soft, #6b6b6b); margin-bottom: 14px; } .od__gutschein-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .od__gutschein-wert { appearance: none; cursor: pointer; padding: 16px 0; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; transition: all 140ms ease; border: 1.5px solid var(--od-band-l, #d8d8d8); background: #fff; color: var(--od-text, #111); } .od__gutschein-wert.is-an { border-color: var(--od-text, #111); background: var(--od-text, #111); color: #fff; } @media (max-width: 640px) { .od__gutschein-werte { grid-template-columns: repeat(2, 1fr); } } /* END_SECTION:gutschein-kauf */ /* START_SECTION:mega-menue (INDEX:80) */ .mm-sektion::before { background: #ECEFFE; } .mm-sektion { position: relative; z-index: 20; } /* OFFENE SCHUBLADE MUSS UEBER DIE TOPBAR. Die Schublade ist `position: fixed; z-index: 80`. Das half nichts: `.mm-sektion` hat selbst `position: relative; z-index: 20` und macht damit einen eigenen Stapelbereich auf — die 80 gelten nur INNERHALB davon. Nach aussen zaehlt die 20. Die Topbar liegt bei 999999. Ergebnis am 20.08.2026 auf dem Telefon: Die Topbar lag mitten in der offenen Schublade und verdeckte Supplements, Begleitung und 'Neu hier?'. Deshalb wird die SEKTION angehoben, nicht die Schublade. Und nur, solange sie offen ist — sonst laege die Kopfzeile dauerhaft ueber allem. */ .mm-sektion[data-offen] { z-index: 1000000; } /* DAS MENUE DES THEMES AUSBLENDEN — nur am Rechner. Der Kopfbereich zeigte dieselben sechs Namen ein zweites Mal, als blaue Pillenreihe. Gesucht hatte ich sie erst bei nav_pills und bei der Einstellung menu_active — beides falsch. Am 19.08.2026 gefunden: Es ist das eigene Menue der Header-Sektion, `magnet-element.menu__item` in einem `ul.flex.flex-wrap`. Das Theme rendert es sogar zweimal, das zweite traegt `btn-duplicate`. Es bringt drei Probleme auf einmal mit: die Dopplung, SIEBEN Links mit href="#" (Nach Anliegen, Einzeltests, Pakete & Komplettprofile, Nicht sicher?, Nach Ziel, Nach Form, Kuren) und ACHT Bilder ohne Alternativtext. Alle drei verschwinden hiermit. NUR AB 900px. Darunter oeffnet der Hamburger eine Schublade mit eigenem Aufbau (`drawer__menu`) — die bleibt unberuehrt, sonst haette das Telefon gar kein Menue mehr. */ /* DIE KOPFZEILE DES THEMES AUSBLENDEN — nur am Rechner. Der Entwurf zeigt EINE Zeile: Logo links, Menue mittig, Anmelden und Warenkorb rechts. Das Theme baut daraus drei Ebenen — Logo mittig, Menue darunter, Konto rechts. Diese Sektion uebernimmt die ganze Zeile, deshalb faellt `header.header` weg. Vorher stufenweise gesucht: nav_pills (falsch), menu_active (falsch), magnet-element.menu__item (traf nur Punkte mit Untermenue, 'Hilfe' blieb stehen), nav.header__menu (traf das Menue, nicht die Zeile). `header.header` ist die sichtbare Leiste, 99px hoch. NUR AB 900px. `menu-drawer` ist ein Geschwisterelement und bleibt unberuehrt — das Telefon behaelt Hamburger, Logo und Warenkorb. */ /* Bei JEDER Breite. Bis 20.08.2026 nur ab 900px — darunter fuehrte die Schublade des Themes das Menue, und die war kaputt: Die Topbar lag darueber und schnitt den ersten Punkt ab. Diese Sektion traegt jetzt auch den Hamburger. */ header.header { display: none !important; } /* Kopfzeile nach dem Entwurf: 20px 56px, weiss, unten 1px #EFEEF4. */ .mm-sektion::before { background: #FFFFFF; } .mm-sektion { border-block-end: 1px solid #EFEEF4; } .mm { /* position: relative + z-index: 1 SIND PFLICHT. `.section::before` ist eine absolut gesetzte, deckende Flaeche, die NACH den statischen Kindern gemalt wird. Beim Umbau der Kopfzeile am 20.08.2026 ging die Zeile verloren — Ergebnis: Logo, Beschriftungen und Konto waren weg, nur die Pfeile blieben sichtbar. Sah aus wie ein Liquid-Fehler, war aber die Stapelreihenfolge. */ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin-inline: auto; padding: 20px 56px; } .mm__marke { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; } /* 46 auf 32: Der Kopfbereich war bei 1280px 92px hoch, MOLEQLAR kommt mit rund 70 aus, und das Logo traegt davon den groessten Teil. Gemessen am 22.08.2026. */ .mm__logo { display: block; height: 32px; width: auto; } .mm__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; color: #9C9AAE; white-space: nowrap; } .mm__konto { display: flex; align-items: center; gap: 18px; flex-shrink: 0; } .mm__anmelden { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; font-size: 16px; color: #5A5870; text-decoration: none; white-space: nowrap; } .mm__anmelden:hover { color: #2B2A3D; } .mm__korb { font-size: 16px; color: #2B2A3D; text-decoration: none; white-space: nowrap; border: 1px solid #DEDCE8; border-radius: 999px; padding: 11px 20px; } .mm__korb { display: inline-flex; align-items: center; gap: 9px; } .mm__korb:hover { border-color: #5B5FC7; color: #5B5FC7; } .mm__zahl { display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 24px; padding-inline: 6px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; } .visually-hidden-mm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* DER CLAIM IST RAUS. Gemessen am 20.08.2026: Die Zeile hat innen 1328px, belegt waren 1313 — frei blieben 15. Ein siebter Reiter braucht rund 140. Der Claim kostete 183px und wiederholt, was das Logo ohnehin sagt; er war der einzige wirklich verzichtbare Posten. Das Feld bleibt im Schema. Wer ihn zurueckholt, muss damit rechnen, dass die Reiter umbrechen. */ .mm__claim { display: none; } .mm__burger { display: none; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; } .mm__burger-striche { display: grid; gap: 5px; } .mm__burger-striche i { display: block; inline-size: 24px; block-size: 2px; background: #2B2A3D; border-radius: 2px; } .mm__zu { display: none; } .mm__schub-konto { display: none; } .mm__leiste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 4px; justify-content: center; } .mm__punkt { position: static; } .mm__knopf { display: inline-flex; align-items: center; gap: 9px; /* 17px statt 20 und schmaleres Polster: Seit die Kopfzeile Logo, Reiter und Konto in EINER Zeile traegt, passten sechs Reiter zu 20px nicht mehr nebeneinander — sie brachen in eine zweite Zeile um. Der Entwurf sagt 16; 17 ist der Kompromiss zwischen Vorgabe und der Ansage, groesser zu werden. Gemessen auf 1440px am 20.08.2026. */ min-height: 56px; padding-inline: 13px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: #2B2A3D; cursor: pointer; } /* Unterstrich statt Pille — so zeigt es der Entwurf. Die Groesse bleibt bei 20px: Der Entwurf sagt 16, der Auftraggeber wollte ein Drittel groesser. Die Form folgt dem Entwurf, das Mass der Ansage. */ .mm__knopf { border-block-end: 2px solid transparent; border-radius: 0; } .mm__knopf:hover { background: transparent; border-block-end-color: #DEDCE8; } .mm__knopf[aria-expanded="true"] { background: transparent; border-block-end-color: #5B5FC7; } .mm__knopf:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 2px; } .mm__pfeil { inline-size: 7px; block-size: 7px; margin-block-start: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s; } .mm__knopf[aria-expanded="true"] .mm__pfeil { transform: rotate(-135deg); margin-block-start: 3px; } /* AUF- UND ZUKLAPPEN. `hidden` allein ist display:none — daran laesst sich nichts weich machen. Deshalb: beim Oeffnen erst `hidden` weg, im naechsten Bild die Klasse `--auf` dazu; beim Schliessen erst die Klasse weg, nach dem Uebergang `hidden` zurueck. */ .mm__panel { position: absolute; inset-inline: 0; top: 100%; background: #fff; border-block-start: 1px solid #E7E6F0; box-shadow: 0 24px 48px rgb(32 31 49 / .12); opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; } .mm__panel--auf { opacity: 1; transform: none; } .mm__panel[hidden] { display: none; } /* Wer Bewegung abgestellt hat, bekommt sie nicht. */ @media (prefers-reduced-motion: reduce) { .mm__panel { transition: none; transform: none; } } .mm__inhalt { max-width: 1280px; margin-inline: auto; padding: 32px 56px 40px; display: grid; grid-template-columns: 0.9fr 2.4fr; gap: 64px; align-items: start; } .mm__vorspann { background: #FBFAFC; border-radius: 24px; padding: 34px; } .mm__lead-titel { margin: 0 0 12px; font-size: 22px; line-height: 1.2; font-weight: 600; color: #201F31; text-wrap: pretty; } .mm__lead-text { margin: 0 0 22px; font-size: 16px; line-height: 1.55; color: #5A5870; } .mm__cta { display: inline-flex; align-items: center; min-height: 56px; padding-inline: 30px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; } a.mm__cta:hover { filter: brightness(1.08); } /* Schaltfläche ohne Ziel: sichtbar, aber nicht klickbar — dieselbe Regel wie bei den Einträgen. */ .mm__cta--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } /* Spaltenzahl kommt aus dem Liquid (--mm-spalten), Rueckfall 3. Der Abstand schrumpft mit: bei vier Spalten sind 44px zu viel, der Text wuerde in jeder Spalte umbrechen. */ .mm__spalten { display: grid; grid-template-columns: repeat(var(--mm-spalten, 3), 1fr); gap: clamp(24px, 2.4vw, 44px); } .mm__spalte { display: flex; flex-direction: column; gap: 10px; } .mm__bild { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; } .mm__bild.mm__bild--gross { aspect-ratio: 4 / 3; } .mm__bild img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .mm__bild--leer { display: grid; place-items: center; padding: 10px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .mm__bild--leer span { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.45; text-align: center; color: #7C7A92; background: rgb(255 255 255 / .82); border-radius: 10px; padding: 6px 9px; } .mm__spalte-titel { margin: 0 0 6px; font-size: 20px; line-height: 1.26; font-weight: 600; color: #201F31; } .mm__lead-marke { display: block; margin-block-end: 8px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8B89A0; } .mm__liste { list-style: none; margin: 0; padding: 0; } /* SCHRIFT EINE STUFE KLEINER, ZEILEN ENGER — 21.08.2026. 20 auf 18px, Zeilenpolster 9 auf 6px. Die Spalten hatten dadurch mehr Luft als noetig, und ein Menue liest sich als Block, nicht als Aufzaehlung. */ /* ZEILEN ENGER, 22.08.2026. Die 44px Tippflaeche stammen aus WCAG 2.5.8 und gelten fuer den Finger. Das Mega-Menue klappt nur mit der Maus auf — auf dem Telefon laeuft die Bedienung ueber das Schubfach, und dort stehen die Zeilen weiter auf 48px (siehe unten, ab 1100px). Zehn Eintraege zu je 44px ergaben eine Spalte von 440px; mit 32px sind es 320. Gemessen, nicht geschaetzt. */ .mm__link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding-block: 3px; font-size: 16px; line-height: 1.3; color: #201F31; text-decoration: none; } /* DER KURZE STRICH LINKS zeigt an: hier fuehrt etwas hin. Derselbe Verlauf wie der lange Strich in den Seitenkoepfen, nur 14px statt 120. NUR an echten Links — ein Eintrag ohne Ziel bekommt keinen, sonst verspricht das Zeichen etwas, was der Eintrag nicht einloest. */ a.mm__link::before { content: ""; flex: 0 0 auto; inline-size: 16px; block-size: 3px; border-radius: 999px; /* Der ORY-Verlauf in kraeftig: Mint nach Violett. Der helle Seitenkopf-Verlauf sah bei 3px wie ein grauer Strich aus — auf kleiner Flaeche braucht Farbe mehr Saettigung, nicht weniger. */ background: linear-gradient(110deg, #A8E8E2 0%, #889FFE 100%); transition: inline-size .16s ease, background .16s ease; } a.mm__link:hover::before { inline-size: 22px; background: #5B5FC7; } @media (prefers-reduced-motion: reduce) { a.mm__link::before { transition: none; } } a.mm__link:hover { color: #5B5FC7; text-decoration: underline; } /* Eintraege ohne Ziel ruecken um Strich und Abstand ein, damit die Textkante trotzdem stimmt. */ .mm__link--tot { color: #201F31; cursor: default; padding-inline-start: 26px; } /* Der Einzug richtet sich nach Strichbreite plus Abstand: 16 + 10. */ @media (max-width: 1100px) { .mm__inhalt { grid-template-columns: 1fr; gap: 24px; } .mm__vorspann { max-width: 620px; } } @media (max-width: 900px) { /* AUF DEM TELEFON: Kopfzeile mit Logo und Hamburger, Menue in einer eigenen Schublade. Vorher fuehrte die Schublade des Themes — die war kaputt (Topbar darueber, erster Punkt abgeschnitten). */ .mm { padding: 12px 16px; gap: 12px; } .mm__marke { flex: 1; } .mm__logo { height: 26px; } .mm__konto { gap: 10px; } .mm__anmelden { display: none; } /* steht unten in der Schublade */ .mm__korb { font-size: 15px; min-block-size: 44px; padding-block: 0; padding-inline: 14px; } .mm__burger { display: inline-flex; } .mm__nav { position: fixed; inset: 0; z-index: 80; background: #fff; overflow-y: auto; padding: 44px 20px 28px; transform: translateX(100%); transition: transform .22s ease; visibility: hidden; } .mm-sektion[data-offen] .mm__nav { transform: none; visibility: visible; } .mm__zu { display: block; position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 48px; block-size: 48px; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #2B2A3D; cursor: pointer; } .mm__schub-konto { display: flex; align-items: center; min-height: 52px; margin-block-start: 24px; font-size: 16px; color: #5A5870; text-decoration: none; border-block-start: 1px solid #DFE2F5; padding-block-start: 16px; } /* AKKORDEON, kein waagerechter Scroller. Als Scroller sass das Panel in der Breite seines Knopfes fest — es liegt im
  • , und das
  • ist ein Flex-Element. Gemessen am 19.08.2026 auf 375px. Der Entwurf zeigt hier ohnehin ein Akkordeon mit + und −. */ .mm__leiste { display: block; overflow: visible; } .mm__punkt { display: block; border-block-end: 1px solid #DFE2F5; } .mm__punkt:last-child { border-block-end: 0; } .mm__knopf { inline-size: 100%; justify-content: space-between; border-radius: 0; padding-inline: 8px; } .mm__knopf[aria-expanded="true"] { background: transparent; } /* Im Fluss statt schwebend: Ein Panel, das auf 375px über den Inhalt fällt, verdeckt genau das, wonach jemand sucht. */ .mm__panel { position: static; box-shadow: none; border-radius: 20px; margin-block: 8px; } .mm__inhalt { padding: 18px 20px 22px; } .mm__spalten { grid-template-columns: 1fr; gap: 22px; } .mm__vorspann { padding: 18px; border-radius: 20px; } .mm__link { min-height: 48px; } /* Tippfläche 48 */ .mm__bild { display: none; } /* Bilder helfen im Akkordeon nicht, sie verlängern nur */ } /* ANS ENDE GESTELLT. Die Staffelung stand vorher VOR der Grundregel fuer .mm__knopf und wurde davon ueberschrieben — gleiche Spezifitaet, die spaetere Regel gewinnt. Gemessen: Bei 1280px blieb die Leiste bei 946px, als waere nichts gesetzt. (20.08.2026) */ /* SIEBEN REITER BRAUCHEN PLATZ, DEN NICHT JEDER SCHIRM HAT. Gemessen am 20.08.2026, Zeile innen gegen benoetigte Breite: 1440px 1328 verfuegbar, 1310 gebraucht passt 1366px 1254 verfuegbar, 1268 gebraucht 14 zu wenig 1280px 1168 verfuegbar, 1268 gebraucht 100 zu wenig Ohne Staffelung bricht der Text IM Knopf um — im Bildschirmfoto stand 'Neu hier?' auf zwei Zeilen. Deshalb: `white-space: nowrap` auf den Knopf, damit eine Beschriftung nie zerreisst, und zwei Stufen darunter. Unter 1150 darf die Leiste umbrechen — zwei saubere Reihen sind besser als sieben gequetschte Reiter. */ .mm__knopf { white-space: nowrap; } @media (max-width: 1439px) { .mm__knopf { font-size: 16px; padding-inline: 9px; min-height: 52px; } .mm__anmelden, .mm__korb { font-size: 16px; } .mm__korb { padding-block: 10px; padding-inline: 16px; } .mm { padding-inline: 32px; } } @media (max-width: 1279px) { .mm__knopf { font-size: 16px; padding-inline: 7px; } .mm { padding-inline: 20px; gap: 14px; } } @media (max-width: 1149px) and (min-width: 900px) { .mm__leiste { flex-wrap: wrap; } } /* END_SECTION:mega-menue */ /* START_SECTION:ory-begleitung (INDEX:91) */ .bg-sektion::before { background: #FFFFFF; } .bg { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px 48px; } .bg__kopf { max-width: 720px; margin-block-end: 48px; } .bg__marke, .bg__nr, .bg__stufe-nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .bg__h1 { margin: 12px 0 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .bg__einleitung { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: #5A5870; text-wrap: pretty; } .bg__h2 { margin: 10px 0 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .bg__satz { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #5A5870; max-width: 720px; } /* Vier gleich breite Spalten. Keine Hervorhebung — siehe Kommentar oben. */ .bg__stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-block-start: 28px; } .bg__stufe { display: flex; flex-direction: column; gap: 10px; background: #FBFAFC; border-radius: 24px; padding: 28px; } .bg__stufe-titel { margin: 6px 0 0; font-size: 20px; line-height: 1.2; font-weight: 600; color: #201F31; } .bg__stufe-satz { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .bg__punkte { margin: 6px 0 0; padding-inline-start: 18px; } .bg__punkte li { font-size: 16px; line-height: 1.55; color: #5A5870; margin-block-end: 6px; } .bg__knopf { margin-block-start: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 22px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; } a.bg__knopf:hover { filter: brightness(1.08); } .bg__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .bg__kontakt { margin-block-start: 44px; padding: 32px 34px; background: #F4F3F9; border-radius: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .bg__kontakt-satz { margin: 0; font-size: 16px; line-height: 1.55; color: #201F31; max-width: 620px; } .bg__kontakt-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .bg__link { display: inline-flex; align-items: center; min-height: 44px; color: #5B5FC7; font-size: 16px; } .bg__zeiten { color: #8B89A0; font-size: 16px; } .bg-schluss-sektion::before { background: #FBFAFC; } .bg__schluss { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 56px; } .bg__schluss-1 { margin: 0; font-size: 17px; line-height: 1.5; color: #201F31; max-width: 760px; } .bg__schluss-2 { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #5A5870; max-width: 760px; } @media (max-width: 1100px) { .bg__stufen { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .bg { padding: 40px 20px 28px; max-width: 1320px; margin-inline: auto; } .bg__kopf { margin-block-end: 28px; } .bg__h1 { font-size: 28px; line-height: 1.1; } .bg__h2 { font-size: 23px; line-height: 1.15; } .bg__einleitung, .bg__satz { font-size: 16px; } .bg__stufen { grid-template-columns: 1fr; gap: 16px; } .bg__knopf { width: 100%; justify-content: center; } .bg__schluss { padding: 28px 20px; } } /* END_SECTION:ory-begleitung */ /* START_SECTION:ory-bestellung (INDEX:92) */ /* Flächen — der Entwurf wechselt sie je Abschnitt, das trennt die vier Schritte ohne Trennlinien. */ .bs-sektion--grund::before { background: #FBFAFC; } .bs-sektion--weiss::before { background: #FFFFFF; } .bs-sektion--toenung::before { background: #F4F3F9; } .bs-sektion--weiss { border-block: 1px solid #EFEEF4; } .bs-sektion--toenung { border-block-start: 1px solid #EAE8F1; } .bs { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .bs--kopf { padding-block-end: 0; display: flex; flex-direction: column; gap: 18px; } .bs--schluss { padding-block: 28px; } .bs__krumen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8B89A0; } .bs__krumen a { color: #5B5FC7; text-decoration: none; } .bs__krumen a:hover { color: #4448A8; text-decoration: underline; } .bs__krumen-hier { color: #3B3A50; } .bs__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .bs__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; max-width: 900px; text-wrap: pretty; } .bs__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .bs__h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: -0.012em; font-weight: 500; color: #201F31; } .bs__einleitung { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; max-width: 640px; text-wrap: pretty; } .bs__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } /* Der Farbstrich unter dem Vorspann — 120×6, derselbe Verlauf wie im Rest der Seiten. */ .bs__strich { inline-size: 120px; block-size: 6px; border-radius: 999px; margin-block-start: 10px; background: linear-gradient(110deg, #F8E4E4 0%, #EFEAF3 26%, #E4F6F1 52%, #DCEFF4 72%, #ECEAF6 100%); } /* Zweispalter: Überschrift links, Text rechts. Die Leere links ist Absicht — siehe Kommentar oben. */ .bs__zwei { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; } .bs__zwei--breit { grid-template-columns: 1.1fr 0.9fr; } .bs__links { display: flex; flex-direction: column; gap: 12px; } .bs__links--text { gap: 20px; } .bs__rechts { display: flex; flex-direction: column; gap: 20px; max-width: 680px; } .bs__spalte { display: flex; flex-direction: column; gap: 32px; } .bs__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .bs__fliess p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #3B3A50; } .bs__fliess p:last-child { margin-block-end: 0; } .bs__fliess--schmal p { max-width: 600px; } .bs__merk { margin: 0; font-size: 16px; line-height: 1.6; color: #201F31; font-weight: 500; border-inline-start: 4px solid #5B5FC7; padding-inline-start: 20px; } .bs__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .bs__karte { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; } .bs__karte--weiss { background: #FFFFFF; gap: 18px; } .bs__punkte { display: flex; flex-direction: column; gap: 12px; } .bs__punkt { display: flex; gap: 12px; margin: 0; font-size: 16px; line-height: 1.6; color: #3B3A50; } /* Der Gedankenstrich, nicht ein Haken und ein Kreuz: Die rechte Spalte sagt, was nicht geht — sie tadelt niemanden. */ .bs__strichchen { color: #8B89A0; flex-shrink: 0; } .bs__strichchen--ja { color: #C98F91; } .bs__hinweis { background: #F4F3F9; border-inline-start: 4px solid #5B5FC7; border-radius: 20px; padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; } .bs__hinweis-text { margin: 0; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 820px; text-wrap: pretty; } .bs__adresse { display: flex; flex-direction: column; gap: 4px; padding-block-start: 6px; border-block-start: 1px solid #F1F0F6; } .bs__adresse-titel { font-size: 15px; color: #8B89A0; } .bs__mail { display: inline-flex; align-items: center; min-height: 48px; font-size: 16px; color: #5B5FC7; text-decoration: none; word-break: break-word; } .bs__mail:hover { text-decoration: underline; } .bs__zeiten { font-size: 15px; color: #8B89A0; } .bs__knopf { align-self: flex-start; display: inline-flex; align-items: center; min-height: 48px; padding: 16px 28px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; } a.bs__knopf:hover { filter: brightness(1.08); } .bs__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .bs__schluss { margin: 0; font-size: 15px; line-height: 1.55; color: #9C9AAE; } @media (max-width: 1060px) { .bs__zwei, .bs__zwei--breit { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 760px) { .bs { padding: 40px 20px; max-width: 1320px; margin-inline: auto; } .bs--kopf { padding-block-end: 0; } .bs__h1 { font-size: 28px; line-height: 1.1; } .bs__h2 { font-size: 23px; line-height: 1.15; } .bs__h3 { font-size: 18px; } .bs__einleitung, .bs__vorspann, .bs__fliess p, .bs__punkt, .bs__hinweis-text, .bs__merk { font-size: 16px; line-height: 1.55; } .bs__paar { grid-template-columns: 1fr; gap: 16px; } .bs__karte { padding: 22px; } .bs__hinweis { padding: 22px 24px; } .bs__knopf { width: 100%; justify-content: center; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .bs .bs__strich, .bs .bs__strichchen { display: block; } /* END_SECTION:ory-bestellung */ /* START_SECTION:ory-epigenetik (INDEX:94) */ .ep { --ep-akzent: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } .ep-sektion::before { background: #FBFAFC; } .ep { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; background: #FBFAFC; color: #201F31; } .ep__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); } .ep__band--hell { background: #FBFAFC; } .ep__band--grau { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; } .ep__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .ep__marke--klein { font-size: 11px; } .ep__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; } .ep__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; } .ep__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); } .ep__notiz { font-size: 15px; color: #8B89A0; flex: none; max-width: 260px; line-height: 1.5; } .ep__pille { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 14px 22px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; flex: none; } a.ep__pille:hover { border-color: #5B5FC7; } .ep__pille--weiss { background: #FFFFFF; } .ep__pille--tot { color: #A9A7B8; background: #F7F6FB; } .ep__hinweis { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 100ch; } .ep__absatz { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 100ch; } .ep__bandkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .ep__bandtitel { display: flex; flex-direction: column; gap: 12px; max-width: 680px; } .ep__bandtitel--breit { max-width: 760px; } .ep__bandtext { margin: 0; font-size: 17px; line-height: 1.6; color: #5A5870; } .ep__bandtext--breit { max-width: 680px; } .ep__leiste { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 24px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 22px 26px; } .ep__leistentext { font-size: 17px; line-height: 1.55; color: #3B3A50; } /* ── Einführung ── */ .ep__band--kopf { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 36px 56px 32px; } .ep__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; } .ep__krume a { color: #8B89A0; text-decoration: none; } .ep__krume a:hover { color: #5B5FC7; text-decoration: underline; } .ep__teiler { padding-inline: 7px; } .ep__krume span:last-child { color: #5A5870; } .ep__kopfraster { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; } .ep__kopftext { display: flex; flex-direction: column; gap: 14px; } .ep__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; } .ep__grenze { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 56ch; } .ep__hilfen { display: flex; flex-direction: column; gap: 10px; } .hilfe { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; text-decoration: none; color: inherit; } a.hilfe:hover { border-color: #DEDCE8; } .hilfe__text { display: flex; flex-direction: column; gap: 3px; } .hilfe__titel { font-size: 17px; font-weight: 500; color: #201F31; } .hilfe__unter { font-size: 15px; line-height: 1.45; color: #5A5870; } .hilfe__cta { font-size: 16px; color: #5B5FC7; flex: none; } .hilfe--tot .hilfe__cta { color: #A9A7B8; } /* ── Seitenraster (Grundlage, Fragen) ── */ .ep__seitenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .ep__seitenkopf { display: flex; flex-direction: column; gap: 14px; } .ep__seitentext { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .ep__knoepfe { display: flex; flex-direction: column; gap: 10px; margin-block-start: 4px; } .ep__band--grundlage { background: #F4F3F9; border-block-end: 1px solid #EAE8F1; } .ep__grundlage { display: flex; flex-direction: column; gap: 20px; } .ep__kette { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 0; } .glied { flex: 1 1 260px; min-inline-size: 260px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .glied--breit { flex: 1 1 auto; min-inline-size: 0; border-radius: 20px; padding: 20px; } .glied__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B5716F; } .glied__titel { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; overflow-wrap: anywhere; hyphens: auto; } .glied__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .ep__pfeil { display: flex; align-items: center; padding-inline: 8px; font-size: 20px; color: #C2C0CE; flex: none; } .ep__kasten { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .ep__kastenmarke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8B89A0; } .ep__kastentext { font-size: 17px; line-height: 1.6; color: #3B3A50; } /* ── DNA-Schema ── */ .ep__band--dna { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; display: flex; flex-direction: column; gap: 26px; } .ep__schemata { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .schema { display: flex; flex-direction: column; gap: 12px; } .schema__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .schema__marke--gruen { color: #3F6A5B; } .schema__marke--rot { color: #8A5457; } .schema__bild { inline-size: 100%; display: block; } .ep__legende { display: flex; align-items: center; gap: 22px; border-block-start: 1px solid #EFEEF4; padding-block-start: 18px; flex-wrap: wrap; } .legende { display: flex; align-items: center; gap: 9px; font-size: 16px; color: #3B3A50; } .legende__punkt { inline-size: 16px; block-size: 16px; border-radius: 999px; background: #C4787B; display: block; } .legende__strich { inline-size: 22px; block-size: 3px; border-radius: 999px; background: #BFDCCE; display: block; } .ep__faktorraster { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; } .ep__akzent { background: var(--ep-akzent); border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; } .ep__akzent .ep__kastenmarke { color: #6A6880; } .ep__akzent .ep__kastentext { font-size: 17px; line-height: 1.55; } .ep__faktoren { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .faktor { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 5px; } .faktor__titel { font-size: 17px; font-weight: 600; line-height: 1.25; } .faktor__text { font-size: 15px; line-height: 1.5; color: #5A5870; } /* ── Blockade ── */ .ep__band--blockade { background: #FBFAFC; border-block-end: 1px solid #EAE8F1; display: flex; flex-direction: column; gap: 26px; } .ep__blockkette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .ep__zweiflaechen { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .flaeche { border-radius: 24px; padding: 28px 30px; display: flex; flex-direction: column; gap: 16px; } .flaeche--gruen { background: #EFF8F4; border: 1px solid #C6E2D7; } .flaeche--rot { background: #FBF2F2; border: 1px solid #EBD2D3; } .flaeche__kopf { display: flex; flex-direction: column; gap: 6px; } .flaeche__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .flaeche--gruen .flaeche__marke { color: #3F6A5B; } .flaeche--rot .flaeche__marke { color: #8A5457; } .flaeche__titel { font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.012em; } .flaeche__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .posten { background: #FFFFFF; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .posten__titel { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; } .posten__text { font-size: 15px; line-height: 1.5; color: #4C4B5E; } /* ── Ablauf ── */ .ep__band--ablauf { background: #F4F3F9; border-block-end: 1px solid #EAE8F1; display: flex; flex-direction: column; gap: 26px; } .ep__ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .schritt { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; } .schritt__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B5716F; } .schritt__titel { font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; } .schritt__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .schritt__meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #9C9AAE; margin-block-start: 2px; } .ep__dreikasten { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; } .kasten { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 14px; } .kasten--gruen { background: #EFF8F4; border-color: #C6E2D7; gap: 12px; } .kasten--rot { background: #FBF2F2; border-color: #EBD2D3; gap: 12px; } .kasten__kopf { display: flex; flex-direction: column; gap: 6px; } .kasten__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6A6880; } .kasten--gruen .kasten__marke { color: #3F6A5B; } .kasten--rot .kasten__marke { color: #8A5457; } .kasten__titel { font-size: 20px; font-weight: 600; line-height: 1.25; } .kasten__liste { display: flex; flex-direction: column; gap: 8px; } .kasten__zeile { font-size: 16px; line-height: 1.55; color: #3B3A50; } .kasten--gruen .kasten__zeile { color: #2C4A3F; } .kasten--rot .kasten__zeile { color: #5C3B3D; } /* ── Produkte ── */ .ep__karten { display: grid; gap: 24px; margin-block-start: 26px; } .ep__karten--2 { grid-template-columns: repeat(2, 1fr); } .ep__karten--4 { grid-template-columns: repeat(4, 1fr); } .ep__karten--5 { grid-template-columns: repeat(5, 1fr); } .prod { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } a.prod:hover { border-color: #DEDCE8; } /* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht. Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand. Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */ .prod__bild { position: relative; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: flex; align-items: flex-end; padding: 0; } .prod__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .prod__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; color: #7C7A92; background: rgba(255,255,255,.86); border-radius: 10px; padding: 6px 9px; } .prod__kennzeichen { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3B3A50; } .prod__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .prod__name { font-size: 20px; line-height: 1.22; font-weight: 500; letter-spacing: -0.012em; overflow-wrap: anywhere; } .prod__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .prod__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; } .prod__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; white-space: nowrap; flex: none; } .prod__fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-block-start: 1px solid #EFEEF4; padding-block-start: 12px; } .prod__preis { font-size: 22px; font-weight: 600; color: #5B5FC7; } .prod__mehr { font-size: 15px; color: #5B5FC7; } /* ── Fragen ── */ .ep__band--fragen { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; } .ep__fragenliste { display: flex; flex-direction: column; } .frage { border-block-start: 1px solid #E4E1EC; } .frage__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; } .frage__q::-webkit-details-marker { display: none; } .frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; } .frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; } .frage[open] .frage__zeichen { font-size: 0; } .frage[open] .frage__zeichen::before { content: "–"; font-size: 22px; } .frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; } .frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .ep__fragenabschluss { border-block-start: 1px solid #E4E1EC; } /* ── Mitnehmen ── */ .ep__band--mitnehmen { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; display: flex; flex-direction: column; gap: 26px; } .ep__mitnehmen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mit { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .mit__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; color: #3B3A50; background: var(--ep-akzent); border-radius: 999px; padding: 5px 11px; align-self: flex-start; } .mit__titel { font-size: 18px; font-weight: 600; line-height: 1.3; } .mit__text { font-size: 16px; line-height: 1.6; color: #5A5870; } .ep__quellen { border-block-start: 1px solid #EFEEF4; padding-block-start: 22px; display: flex; flex-direction: column; gap: 8px; } .ep__quelle { font-size: 14px; line-height: 1.55; color: #8B89A0; } /* ── Schluss ── */ .ep__band--schluss { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .ep__zeichen { display: flex; align-items: center; gap: 12px; } .ep__logo { block-size: 28px; inline-size: auto; display: block; } .ep__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: #9C9AAE; } .ep__schlusssatz { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; max-width: 560px; } /* Das Theme blendet leere Elemente aus (div:empty { display:none } in theme.css). Der Verlaufsstrich und die Legendenzeichen sind leer. */ .ep .ep__strich, .ep .ep__fragenabschluss, .ep .legende__punkt, .ep .legende__strich { display: block; } @media (max-width: 1200px) { .ep__karten--4, .ep__karten--5 { grid-template-columns: repeat(3, 1fr); } .ep__blockkette { grid-template-columns: repeat(3, 1fr); } .ep__faktorraster { grid-template-columns: 1fr; } .ep__dreikasten { grid-template-columns: 1fr; } } @media (max-width: 1100px) { .ep__kopfraster { grid-template-columns: 1fr; gap: 32px; } .ep__seitenraster { grid-template-columns: 1fr; gap: 32px; } .ep__knoepfe { flex-direction: row; } .ep__karten--4, .ep__karten--5 { grid-template-columns: repeat(2, 1fr); } .ep__schemata { grid-template-columns: 1fr; } .ep__zweiflaechen { grid-template-columns: 1fr; } .ep__ablauf { grid-template-columns: repeat(2, 1fr); } .ep__mitnehmen { grid-template-columns: 1fr; } } @media (max-width: 700px) { .ep__band { padding: 24px 20px; } .ep__band--kopf { padding: 20px 20px 24px; } .ep__band--fragen, .ep__band--mitnehmen { padding: 32px 20px; } .ep__h1 { font-size: 31px; } .ep__h2 { font-size: 24px; } .ep__lead { font-size: 17px; } .ep__karten--2, .ep__karten--4, .ep__karten--5 { grid-template-columns: 1fr; } .ep__blockkette, .ep__ablauf, .ep__faktoren { grid-template-columns: 1fr; } .flaeche__liste { grid-template-columns: 1fr; } .ep__leiste { flex-direction: column; align-items: flex-start; } .ep__knoepfe { flex-direction: column; } .ep__pfeil { display: none; } .frage__titel { font-size: 18px; } } /* END_SECTION:ory-epigenetik */ /* START_SECTION:ory-family (INDEX:95) */ .fb-sektion--verlauf::before { background: linear-gradient(120deg, #FBEDED 0%, #F1EDF6 26%, #E6F6F2 54%, #DFF0F5 74%, #EEECF8 100%); } .fb-sektion--weiss::before { background: #FFFFFF; } .fb-sektion--toenung::before { background: #F4F3F9; } .fb-sektion--grund::before { background: #FBFAFC; } .fb-sektion--weiss { border-block: 1px solid #EFEEF4; } .fb { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .fb__zwei { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .fb__spalte { display: flex; flex-direction: column; gap: 32px; } .fb__kopf { display: flex; flex-direction: column; gap: 18px; } .fb__links { display: flex; flex-direction: column; gap: 12px; align-self: start; } .fb__rechts { display: flex; flex-direction: column; gap: 20px; max-width: 680px; } .fb__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 680px; } .fb__marke, .fb__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .fb__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; max-width: 640px; text-wrap: pretty; } .fb__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .fb__h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 500; color: #201F31; } .fb__h3 a { color: inherit; text-decoration: none; } .fb__h3 a:hover { color: #5B5FC7; } .fb__fliess p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 640px; } .fb__fliess p:last-child { margin-block-end: 0; } .fb__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .fb__klein { margin: 0; font-size: 15px; line-height: 1.55; color: #8B89A0; max-width: 720px; } .fb__bildfeld { min-inline-size: 0; } /* 16:9, nicht 4:3 wie im Entwurf. Das gelieferte Bild ist ein Strandmotiv im Querformat; auf 4:3 beschnitten fielen die beiden Erwachsenen am linken Rand weg. Das Verhaeltnis richtet sich hier nach dem Bild, nicht umgekehrt. */ .fb__bild { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; } .fb__bild--leer { display: flex; align-items: end; padding: 20px; background: repeating-linear-gradient(135deg, #F2F0F8 0 12px, #EBE8F4 12px 24px); border: 1px dashed #D8D4E8; color: #8B89A0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.5; } .fb__bild--leer span { background: #FFFFFFCC; padding: 8px 10px; border-radius: 8px; } .fb__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; } .fb__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 15px 26px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; } a.fb__knopf:hover, button.fb__knopf:hover { filter: brightness(1.08); } .fb__knopf--hell { background: #FFFFFF; color: #201F31; border: 1px solid #DEDCE8; } .fb__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .fb__punkte { display: flex; flex-direction: column; gap: 12px; } .fb__punkt { display: flex; gap: 12px; margin: 0; font-size: 16px; line-height: 1.6; color: #3B3A50; } .fb__strichchen { color: #C98F91; flex-shrink: 0; } .fb__merk { margin: 0; font-size: 16px; line-height: 1.6; color: #201F31; font-weight: 500; border-inline-start: 4px solid #5B5FC7; padding-inline-start: 20px; } .fb__schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .fb__schritte li { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; font-size: 16px; line-height: 1.55; color: #3B3A50; } .fb__stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .fb__stufe { display: flex; flex-direction: column; gap: 8px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; } .fb__stufe-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .fb__stufe-text { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } /* Formular */ .fb__formular { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 32px; max-width: 720px; display: flex; flex-direction: column; gap: 14px; } .fb__formsatz { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .fb__form { display: flex; flex-direction: column; gap: 14px; margin: 0; } .fb__feld { display: flex; flex-direction: column; gap: 6px; } .fb__label { font-size: 15px; color: #5A5870; } .fb__feld input { min-height: 48px; padding: 12px 16px; font-size: 16px; color: #201F31; background: #FBFAFC; border: 1px solid #DEDCE8; border-radius: 12px; } .fb__feld input:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 1px; } .fb__haken { display: flex; align-items: start; gap: 10px; font-size: 16px; line-height: 1.5; color: #3B3A50; min-height: 44px; } .fb__haken input { inline-size: 20px; block-size: 20px; margin-block-start: 3px; flex-shrink: 0; } .fb__erfolg { margin: 0; padding: 14px 16px; border-radius: 12px; background: #E7F4EE; color: #1F5140; font-size: 16px; } .fb__fehler { margin: 0; padding: 14px 16px; border-radius: 12px; background: #FBECEC; color: #8A3A3A; font-size: 16px; } .fb__fehler ul { margin: 0; padding-inline-start: 18px; } .fb__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .fb__karte { display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 20px; } .fb__karte-bild { display: block; } .fb__karte-bild img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .fb__karte-satz { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .fb__karte-zeile { margin: 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .fb__preis { font-size: 17px; font-weight: 600; color: #201F31; } .fb__probe { font-size: 15px; color: #8B89A0; } .fb__karte-form { margin: auto 0 0; } .fb__karte .fb__knopf { inline-size: 100%; } .fb__weiter { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; text-decoration: none; } .fb__weiter:hover { text-decoration: underline; } .fb__schluss { display: flex; flex-direction: column; gap: 18px; } .fb__schluss-1 { margin: 0; font-size: 20px; line-height: 1.4; color: #201F31; max-width: 820px; text-wrap: pretty; } @media (max-width: 1060px) { .fb__zwei { grid-template-columns: 1fr; gap: 32px; } .fb__schritte, .fb__stufen, .fb__karten { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .fb { padding: 40px 20px; max-width: 1320px; margin-inline: auto; } .fb__h1 { font-size: 28px; line-height: 1.1; } .fb__h2 { font-size: 23px; line-height: 1.15; } .fb__schluss-1 { font-size: 17px; } .fb__fliess p, .fb__vorspann, .fb__punkt, .fb__merk { font-size: 16px; line-height: 1.55; } .fb__schritte, .fb__stufen, .fb__karten { grid-template-columns: 1fr; gap: 16px; } .fb__formular { padding: 22px 20px; } .fb__knopf { inline-size: 100%; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .fb .fb__feld, .fb .fb__strichchen { display: block; } /* END_SECTION:ory-family */ /* START_SECTION:ory-faq (INDEX:96) */ .faq-sektion::before { background: #FBFAFC; } .faq { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .faq__kopf { display: flex; flex-direction: column; gap: 12px; margin-block-end: 28px; max-width: 640px; } .faq__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .faq__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .faq__untertitel { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .faq__liste { max-width: 880px; border-block-start: 1px solid #E7E6F0; } .faq__punkt { border-block-end: 1px solid #E7E6F0; } .faq__frage { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-block: 14px; cursor: pointer; list-style: none; } .faq__frage::-webkit-details-marker { display: none; } .faq__frage:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 2px; } .faq__frage-text { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 500; color: #201F31; } .faq__zeichen { flex-shrink: 0; position: relative; inline-size: 16px; block-size: 16px; } .faq__zeichen::before, .faq__zeichen::after { content: ''; position: absolute; inset-block-start: 7px; inset-inline-start: 0; inline-size: 16px; block-size: 2px; background: #5B5FC7; border-radius: 2px; transition: transform .18s ease; } .faq__zeichen::after { transform: rotate(90deg); } .faq__punkt[open] .faq__zeichen::after { transform: rotate(0deg); } .faq__antwort { padding-block: 0 22px; padding-inline-end: 36px; font-size: 16px; line-height: 1.65; color: #5A5870; max-width: 720px; } .faq__antwort p { margin: 0 0 12px; } .faq__antwort p:last-child { margin-block-end: 0; } .faq__antwort a { color: #5B5FC7; } @media (prefers-reduced-motion: reduce) { .faq__zeichen::before, .faq__zeichen::after { transition: none; } } @media (max-width: 700px) { .faq { padding: 40px 20px; max-width: 1320px; margin-inline: auto; } .faq__h2 { font-size: 23px; line-height: 1.15; } .faq__untertitel { font-size: 16px; } .faq__kopf { margin-block-end: 28px; } .faq__frage { min-height: 64px; } /* Tippfläche */ .faq__frage-text { font-size: 16px; } .faq__antwort { font-size: 16px; padding-inline-end: 0; } } /* END_SECTION:ory-faq */ /* START_SECTION:ory-kollektion-diagnostik (INDEX:104) */ .kd-sektion--verlauf::before { background: linear-gradient(120deg, #FBEDED 0%, #F1EDF6 26%, #E6F6F2 54%, #DFF0F5 74%, #EEECF8 100%); } .kd-sektion--weiss::before { background: #FFFFFF; } .kd-sektion--grund::before { background: #FBFAFC; } .kd-sektion--toenung::before { background: #F4F3F9; } .kd-sektion--weiss { border-block: 1px solid #EFEEF4; } .kd { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 48px 56px; } .kd__kopf { display: flex; flex-direction: column; gap: 16px; padding-block: 60px 48px; } .kd__spalte { display: flex; flex-direction: column; gap: 28px; } .kd__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } .kd__krumen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8B89A0; } .kd__krumen a { color: #5B5FC7; text-decoration: none; } .kd__krumen a:hover { text-decoration: underline; } .kd__krumen-hier { color: #3B3A50; } .kd__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .kd__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .kd__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .kd__h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; color: #201F31; } .kd__fliess p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 720px; } .kd__fliess p:last-child { margin-block-end: 0; } .kd__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .kd__klein { margin: 0; font-size: 15px; line-height: 1.55; color: #8B89A0; max-width: 860px; } .kd__drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .kd__hilfe { display: flex; flex-direction: column; gap: 6px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; } .kd__hilfe-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .kd__hilfe-text { margin: 0; font-size: 16px; line-height: 1.5; color: #5A5870; } .kd__hilfe-link { margin-block-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; text-decoration: none; } .kd__hilfe-link:hover { text-decoration: underline; } .kd__filter { display: flex; flex-wrap: wrap; gap: 10px; } .kd__pille { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px; border-radius: 999px; border: 1px solid #DEDCE8; background: #FFFFFF; font-size: 16px; color: #3B3A50; text-decoration: none; } .kd__pille:hover { border-color: #5B5FC7; color: #5B5FC7; } .kd__pille--an { background: #5B5FC7; border-color: #5B5FC7; color: #FFFFFF; } .kd__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .kd__zahl { font-size: 16px; color: #5A5870; } .kd__zuruecksetzen { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; } .kd__leer { margin: 0; font-size: 16px; color: #5A5870; } .kd__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kd__karte { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 16px; } .kd__karte-bild { display: block; } .kd__karte-bild img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } .kd__karte-leer { display: block; aspect-ratio: 4 / 3; border-radius: 14px; background: #F4F3F9; } .kd__bereich { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .kd__karte-titel { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #201F31; } .kd__karte-titel a { color: inherit; text-decoration: none; } .kd__karte-titel a:hover { color: #5B5FC7; } .kd__fakten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: #8B89A0; } .kd__karte-fuss { margin-block-start: auto; padding-block-start: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .kd__preis { font-size: 16px; font-weight: 600; color: #201F31; } .kd__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 20px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.kd__knopf:hover, button.kd__knopf:hover { filter: brightness(1.08); } .kd__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .kd__karte-form { margin: 0; } .kd__karte-form form { margin: 0; } .kd__karte-form .kd__knopf { inline-size: 100%; border: 0; cursor: pointer; font-family: inherit; } .kd__seiten { display: flex; justify-content: center; padding-block-start: 8px; } .kd__seiten a, .kd__seiten span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; padding-inline: 8px; color: #5B5FC7; text-decoration: none; } .kd__seiten .current { color: #201F31; font-weight: 600; } .kd__vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kd__schritt { display: flex; flex-direction: column; gap: 8px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; } .kd__schritt-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .kd__schritt-text { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .kd__notiz { margin: 0; font-size: 14px; line-height: 1.5; color: #8B89A0; } .kd__streifen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: #F4F3F9; border-radius: 24px; padding: 26px 30px; } .kd__streifen-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .kd__streifen-text { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: #5A5870; max-width: 720px; } .kd__tabellenfeld { overflow-x: auto; border: 1px solid #EBE9F2; border-radius: 24px; background: #FFFFFF; } .kd__tabelle { inline-size: 100%; min-inline-size: 680px; border-collapse: collapse; } .kd__tabelle th, .kd__tabelle td { text-align: start; padding: 16px 20px; font-size: 16px; line-height: 1.5; vertical-align: top; } .kd__tabelle th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #8B89A0; font-weight: 500; border-block-end: 1px solid #E7E6F0; } .kd__tabelle td { color: #5A5870; border-block-end: 1px solid #EFEEF4; } .kd__tabelle tr:last-child td { border-block-end: 0; } .kd__td-name { color: #201F31; font-weight: 600; white-space: nowrap; } @media (max-width: 1100px) { .kd__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kd__vier, .kd__drei { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .kd { padding: 32px 20px; max-width: 1320px; margin-inline: auto; } .kd__kopf { padding-block: 40px 28px; } .kd__h1 { font-size: 28px; line-height: 1.1; } .kd__h2 { font-size: 23px; line-height: 1.15; } .kd__fliess p, .kd__vorspann { font-size: 16px; line-height: 1.55; } .kd__raster { grid-template-columns: 1fr 1fr; gap: 12px; } .kd__vier, .kd__drei { grid-template-columns: 1fr; } .kd__karte { padding: 12px; } .kd__karte-titel { font-size: 16px; } .kd__karte-fuss { flex-direction: column; align-items: stretch; } .kd__knopf { inline-size: 100%; } } /* Auf dem Telefon werden die Tabellen zu Karten — siehe Kopfkommentar in patch-tabellen. Die Spaltenueberschrift kommt aus data-spalte. */ @media (max-width: 760px) { .kd__tabellenfeld { overflow-x: visible; border: 0; background: transparent; border-radius: 0; } .kd__tabelle { min-inline-size: 0; display: block; } .kd__tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .kd__tabelle tbody, .kd__tabelle tr { display: block; } .kd__tabelle tr { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; margin-block-end: 12px; } .kd__tabelle td { display: block; padding: 0; border: 0; font-size: 16px; } .kd__tabelle td + td { margin-block-start: 10px; } .kd__tabelle td::before { content: attr(data-spalte); display: block; margin-block-end: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .kd__tabelle td:empty { display: none; } } /* END_SECTION:ory-kollektion-diagnostik */ /* START_SECTION:ory-kollektion-supplements (INDEX:105) */ .ks-sektion--verlauf::before { background: linear-gradient(120deg, #FBEDED 0%, #F1EDF6 26%, #E6F6F2 54%, #DFF0F5 74%, #EEECF8 100%); } .ks-sektion--weiss::before { background: #FFFFFF; } .ks-sektion--grund::before { background: #FBFAFC; } .ks-sektion--toenung::before { background: #F4F3F9; } .ks-sektion--weiss { border-block: 1px solid #EFEEF4; } .ks { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 48px 56px; } .ks__kopf { display: flex; flex-direction: column; gap: 16px; padding-block: 60px 48px; } .ks__spalte { display: flex; flex-direction: column; gap: 28px; } .ks__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } .ks__krumen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8B89A0; } .ks__krumen a { color: #5B5FC7; text-decoration: none; } .ks__krumen-hier { color: #3B3A50; } .ks__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .ks__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .ks__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .ks__h3 { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; color: #201F31; } .ks__fliess p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 760px; } .ks__fliess p:last-child { margin-block-end: 0; } .ks__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } /* Pflichtangabe — ruhig, aber nicht kleingedruckt. */ .ks__pflicht { margin: 0; font-size: 15px; line-height: 1.55; color: #5A5870; max-width: 860px; border-inline-start: 3px solid #DEDCE8; padding-inline-start: 16px; } .ks__drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .ks__hilfe { display: flex; flex-direction: column; gap: 6px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; } .ks__hilfe-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .ks__hilfe-text { margin: 0; font-size: 16px; line-height: 1.5; color: #5A5870; } .ks__hilfe-link { margin-block-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; text-decoration: none; } .ks__filter { display: flex; flex-wrap: wrap; gap: 10px; } .ks__pille { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px; border-radius: 999px; border: 1px solid #DEDCE8; background: #FFFFFF; font-size: 16px; color: #3B3A50; text-decoration: none; } .ks__pille:hover { border-color: #5B5FC7; color: #5B5FC7; } .ks__pille--an { background: #5B5FC7; border-color: #5B5FC7; color: #FFFFFF; } .ks__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ks__zahl { font-size: 16px; color: #5A5870; } .ks__zuruecksetzen { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; } .ks__leer { margin: 0; font-size: 16px; color: #5A5870; } .ks__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ks__karte { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 16px; } .ks__karte-bild img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; } .ks__karte-leer { display: block; aspect-ratio: 1 / 1; border-radius: 14px; background: #F4F3F9; } .ks__bereich { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .ks__karte-titel { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #201F31; } .ks__karte-titel a { color: inherit; text-decoration: none; } .ks__karte-titel a:hover { color: #5B5FC7; } .ks__karte-fuss { margin-block-start: auto; padding-block-start: 10px; display: flex; align-items: end; justify-content: space-between; gap: 10px; } .ks__preis { display: block; font-size: 16px; font-weight: 600; color: #201F31; } .ks__grundpreis { display: block; font-size: 13px; color: #8B89A0; } .ks__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 20px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.ks__knopf:hover, button.ks__knopf:hover { filter: brightness(1.08); } .ks__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .ks__karte-form { margin: 0; } .ks__karte-form form { margin: 0; } .ks__karte-form .ks__knopf { inline-size: 100%; border: 0; cursor: pointer; font-family: inherit; } .ks__knopf--eigen { align-self: flex-start; margin-block-start: 6px; } .ks__seiten { display: flex; justify-content: center; } .ks__seiten a, .ks__seiten span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; color: #5B5FC7; text-decoration: none; } .ks__seiten .current { color: #201F31; font-weight: 600; } .ks__schritt { display: flex; flex-direction: column; gap: 8px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; } .ks__schritt-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .ks__schritt-text { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .ks__notiz { margin: 0; font-size: 14px; line-height: 1.5; color: #8B89A0; } .ks__streifen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: #F4F3F9; border-radius: 24px; padding: 26px 30px; } .ks__streifen-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .ks__streifen-text { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: #5A5870; max-width: 720px; } .ks__tabellenfeld { overflow-x: auto; border: 1px solid #EBE9F2; border-radius: 24px; background: #FFFFFF; } .ks__tabelle { inline-size: 100%; min-inline-size: 760px; border-collapse: collapse; } .ks__tabelle th, .ks__tabelle td { text-align: start; padding: 16px 20px; font-size: 16px; line-height: 1.5; vertical-align: top; } .ks__tabelle th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #8B89A0; font-weight: 500; border-block-end: 1px solid #E7E6F0; } .ks__tabelle td { color: #5A5870; border-block-end: 1px solid #EFEEF4; } .ks__tabelle tr:last-child td { border-block-end: 0; } .ks__td-name { color: #201F31; font-weight: 600; } .ks__tabelle--evidenz { min-inline-size: 900px; } /* "Keine zugelassene Angabe" ruhig, nicht rot: eine Auskunft, kein Fehler. */ .ks__td-ohne { color: #8B89A0; font-style: italic; } .ks__td-quelle { white-space: nowrap; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 14px; color: #8B89A0; } .ks__td-name a { color: inherit; text-decoration: none; } .ks__td-name a:hover { color: #5B5FC7; text-decoration: underline; } .ks__zeiten { display: inline-flex; gap: 6px; } .ks__zeit { inline-size: 34px; block-size: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; background: #FBFAFC; color: #C6C4D2; border: 1px solid #EFEEF4; } .ks__zeit--an { background: #E4F6F1; color: #3B3A50; border-color: #CFE9E2; } @media (max-width: 1100px) { .ks__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks__drei { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .ks { padding: 32px 20px; max-width: 1320px; margin-inline: auto; } .ks__kopf { padding-block: 40px 28px; } .ks__h1 { font-size: 28px; line-height: 1.1; } .ks__h2 { font-size: 23px; line-height: 1.15; } .ks__fliess p, .ks__vorspann { font-size: 16px; line-height: 1.55; } .ks__raster { grid-template-columns: 1fr 1fr; gap: 12px; } .ks__drei { grid-template-columns: 1fr; } .ks__karte { padding: 12px; } .ks__karte-fuss { flex-direction: column; align-items: stretch; gap: 8px; } .ks__knopf { inline-size: 100%; } } /* Auf dem Telefon werden die Tabellen zu Karten — siehe Kopfkommentar in patch-tabellen. Die Spaltenueberschrift kommt aus data-spalte. */ @media (max-width: 760px) { .ks__tabellenfeld { overflow-x: visible; border: 0; background: transparent; border-radius: 0; } .ks__tabelle { min-inline-size: 0; display: block; } .ks__tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .ks__tabelle tbody, .ks__tabelle tr { display: block; } .ks__tabelle tr { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; margin-block-end: 12px; } .ks__tabelle td { display: block; padding: 0; border: 0; font-size: 16px; } .ks__tabelle td + td { margin-block-start: 10px; } .ks__tabelle td::before { content: attr(data-spalte); display: block; margin-block-end: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .ks__tabelle td:empty { display: none; } } /* END_SECTION:ory-kollektion-supplements */ /* START_SECTION:ory-kollektion-tee (INDEX:106) */ .kt-sektion--verlauf::before { background: linear-gradient(120deg, #FBEDED 0%, #F1EDF6 26%, #E6F6F2 54%, #DFF0F5 74%, #EEECF8 100%); } .kt-sektion--weiss::before { background: #FFFFFF; } .kt-sektion--grund::before { background: #FBFAFC; } .kt-sektion--toenung::before { background: #F4F3F9; } .kt-sektion--weiss { border-block: 1px solid #EFEEF4; } .kt { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 48px 56px; } .kt__kopf { display: flex; flex-direction: column; gap: 16px; padding-block: 60px 48px; } .kt__spalte { display: flex; flex-direction: column; gap: 28px; } .kt__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .kt__krumen { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8B89A0; } .kt__krumen a { color: #5B5FC7; text-decoration: none; } .kt__krumen-hier { color: #3B3A50; } .kt__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .kt__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .kt__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .kt__h3 { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 600; color: #201F31; } .kt__fliess p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 760px; } .kt__fliess p:last-child { margin-block-end: 0; } .kt__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .kt__pflicht { margin: 0; font-size: 15px; line-height: 1.55; color: #5A5870; max-width: 880px; border-inline-start: 3px solid #DEDCE8; padding-inline-start: 16px; } .kt__drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .kt__vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kt__hilfe { display: flex; flex-direction: column; gap: 6px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; } .kt__hilfe-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .kt__hilfe-text { margin: 0; font-size: 16px; line-height: 1.5; color: #5A5870; } .kt__hilfe-link { margin-block-start: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; text-decoration: none; } .kt__filter { display: flex; flex-wrap: wrap; gap: 10px; } .kt__pille { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px; border-radius: 999px; border: 1px solid #DEDCE8; background: #FFFFFF; font-size: 16px; color: #3B3A50; text-decoration: none; } .kt__pille--an { background: #5B5FC7; border-color: #5B5FC7; color: #FFFFFF; } .kt__zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .kt__zahl { font-size: 16px; color: #5A5870; } .kt__zuruecksetzen { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; } .kt__leer { margin: 0; font-size: 16px; color: #5A5870; } .kt__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .kt__karte { display: flex; flex-direction: column; gap: 8px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 16px; } .kt__karte--text { background: #FFFFFF; padding: 24px; gap: 10px; } .kt__karte-bild img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; } .kt__karte-leer { display: block; aspect-ratio: 4 / 3; border-radius: 14px; background: #F4F3F9; } .kt__karte-titel { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 600; color: #201F31; } .kt__karte-titel a { color: inherit; text-decoration: none; } .kt__karte-titel a:hover { color: #5B5FC7; } .kt__karte-fuss { margin-block-start: auto; padding-block-start: 10px; display: flex; align-items: end; justify-content: space-between; gap: 10px; } .kt__preis { display: block; font-size: 16px; font-weight: 600; color: #201F31; } .kt__grundpreis { display: block; font-size: 13px; color: #8B89A0; } .kt__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: 20px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap; } a.kt__knopf:hover, button.kt__knopf:hover { filter: brightness(1.08); } .kt__knopf--tot { background: #E7E6F0; color: #8B89A0; cursor: default; } .kt__karte-form { margin: 0; } .kt__karte-form form { margin: 0; } .kt__karte-form .kt__knopf { inline-size: 100%; border: 0; cursor: pointer; font-family: inherit; } .kt__seiten { display: flex; justify-content: center; } .kt__seiten a, .kt__seiten span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 44px; min-block-size: 44px; color: #5B5FC7; text-decoration: none; } .kt__regel { display: flex; flex-direction: column; gap: 8px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; } .kt__regel-titel { margin: 0; font-size: 16px; font-weight: 600; color: #201F31; } .kt__regel-text { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .kt__tabellenfeld { overflow-x: auto; border: 1px solid #EBE9F2; border-radius: 24px; background: #FFFFFF; } .kt__tabelle { inline-size: 100%; min-inline-size: 820px; border-collapse: collapse; } .kt__tabelle th, .kt__tabelle td { text-align: start; padding: 16px 20px; font-size: 16px; line-height: 1.5; vertical-align: top; } .kt__tabelle th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #8B89A0; font-weight: 500; border-block-end: 1px solid #E7E6F0; } .kt__tabelle td { color: #5A5870; border-block-end: 1px solid #EFEEF4; } .kt__tabelle tr:last-child td { border-block-end: 0; } .kt__td-name { color: #201F31; font-weight: 600; } .kt__td-name a { color: inherit; text-decoration: none; } .kt__zeitstrahl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border-inline-start: 2px solid #E7E6F0; } .kt__zeitstrahl li { position: relative; padding: 0 0 24px 28px; } .kt__zeitstrahl li::before { content: ''; position: absolute; inset-inline-start: -7px; inset-block-start: 6px; inline-size: 12px; block-size: 12px; border-radius: 999px; background: linear-gradient(110deg, #A8E8E2 0%, #889FFE 100%); } /* Der Entwurf sieht ein Hochformat 4:5 neben dem Zeitstrahl vor. Das gelieferte Bild ist 16:9 (getrocknete Kraeuter auf Papier). Auf 4:5 beschnitten blieben 45 Prozent der Breite uebrig — Lavendel links und Kornblumen rechts fielen weg. Deshalb steht es in voller Breite ueber dem Zeitstrahl statt daneben: Das Verhaeltnis richtet sich nach dem Bild, nicht umgekehrt. */ .kt__tradition { display: flex; flex-direction: column; gap: 36px; } .kt__hoch { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; } .kt__hoch--leer { display: flex; align-items: end; padding: 18px; background: repeating-linear-gradient(135deg, #F2F0F8 0 12px, #EBE8F4 12px 24px); border: 1px dashed #D8D4E8; color: #8B89A0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.5; } .kt__hoch--leer span { background: #FFFFFFCC; padding: 8px 10px; border-radius: 8px; } .kt__fragenkopf { display: flex; flex-direction: column; gap: 12px; max-width: 760px; } .kt__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; } .kt__knopf--hell { background: #FFFFFF; color: #201F31; border: 1px solid #DEDCE8; } .kt__epoche { display: block; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; margin-block-end: 6px; } @media (max-width: 1100px) { .kt__raster, .kt__vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt__drei { grid-template-columns: 1fr 1fr; } .kt__tradition { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 760px) { .kt { padding: 32px 20px; max-width: 1320px; margin-inline: auto; } .kt__kopf { padding-block: 40px 28px; } .kt__h1 { font-size: 28px; line-height: 1.1; } .kt__h2 { font-size: 23px; line-height: 1.15; } .kt__fliess p, .kt__vorspann { font-size: 16px; line-height: 1.55; } .kt__raster { grid-template-columns: 1fr 1fr; gap: 12px; } .kt__drei, .kt__vier { grid-template-columns: 1fr; } .kt__karte { padding: 12px; } .kt__karte-fuss { flex-direction: column; align-items: stretch; gap: 8px; } .kt__knopf { inline-size: 100%; } } /* Auf dem Telefon werden die Tabellen zu Karten — siehe Kopfkommentar in patch-tabellen. Die Spaltenueberschrift kommt aus data-spalte. */ @media (max-width: 760px) { .kt__tabellenfeld { overflow-x: visible; border: 0; background: transparent; border-radius: 0; } .kt__tabelle { min-inline-size: 0; display: block; } .kt__tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .kt__tabelle tbody, .kt__tabelle tr { display: block; } .kt__tabelle tr { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; margin-block-end: 12px; } .kt__tabelle td { display: block; padding: 0; border: 0; font-size: 16px; } .kt__tabelle td + td { margin-block-start: 10px; } .kt__tabelle td::before { content: attr(data-spalte); display: block; margin-block-end: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .kt__tabelle td:empty { display: none; } } /* END_SECTION:ory-kollektion-tee */ /* START_SECTION:ory-laufband (INDEX:107) */ .lb-sektion::before { background: var(--lb-flaeche, #D8C7FA); } .lb { position: relative; z-index: 1; overflow: hidden; padding-block: 11px; } .lb__satz { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; letter-spacing: .01em; color: #FFFFFF; } .lb__punkt { font-style: normal; opacity: .55; } /* RUHIG IST DIE VORGABE (20.08.2026). Ein Band, das über jeder Seite läuft, zieht den Blick weg von dem, worum es geht. Ein Satz, mittig, still — die Abwechslung kommt aus dem Wochenwechsel, nicht aus der Bewegung. */ .lb--ruhig { display: flex; justify-content: center; padding-inline: 20px; text-align: center; } .lb--ruhig .lb__satz { flex-wrap: wrap; justify-content: center; row-gap: 2px; } /* Die laufende Fassung bleibt im Theme-Editor abrufbar, ist aber aus. */ .lb--lauf { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .lb--lauf .lb__spur { display: flex; width: max-content; animation: lb-lauf var(--lb-dauer, 34s) linear infinite; } /* min-width: 100vw — siehe Kommentar oben. Beide Hälften sind immer gleich breit, deshalb sitzt die Naht bei -50% immer genau. */ .lb--lauf .lb__gruppe { display: flex; min-width: 100vw; justify-content: space-around; gap: 48px; } .lb--lauf .lb__satz { white-space: nowrap; } .lb--lauf:hover .lb__spur, .lb--lauf:focus-within .lb__spur { animation-play-state: paused; } @keyframes lb-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Wer Bewegung abgestellt hat, bekommt sie nicht — und sieht trotzdem den ganzen Satz. */ @media (prefers-reduced-motion: reduce) { .lb--lauf { -webkit-mask-image: none; mask-image: none; justify-content: center; display: flex; } .lb--lauf .lb__spur { animation: none; width: auto; } /* Von den acht Kopien bleibt eine stehen, mittig. */ .lb--lauf .lb__gruppe + .lb__gruppe { display: none; } .lb--lauf .lb__gruppe { min-width: 0; gap: 0; } .lb--lauf .lb__satz + .lb__satz { display: none; } .lb--lauf .lb__satz { white-space: normal; padding-inline: 20px; flex-wrap: wrap; justify-content: center; } } @media (max-width: 700px) { .lb__satz { font-size: 13px; gap: 10px; } .lb--lauf .lb__satz { padding-inline-end: 32px; } } /* END_SECTION:ory-laufband */ /* START_SECTION:ory-longevity (INDEX:108) */ .lg-sektion::before { background: #FFFFFF; } .lg { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px 48px; } .lg__kopf { max-width: 760px; margin-block-end: 56px; } .lg__marke, .lg__kraft-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .lg__h1 { margin: 12px 0 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .lg__einleitung { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: #5A5870; text-wrap: pretty; } .lg__preis { margin: 24px 0 0; font-size: 23px; font-weight: 600; color: #201F31; } .lg__preis-zusatz { font-size: 15px; font-weight: 400; color: #8B89A0; } .lg__knopf { display: inline-flex; align-items: center; min-height: 52px; margin-block-start: 20px; padding-inline: 28px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; } .lg__knopf:hover { filter: brightness(1.08); } .lg__knopf--klein { min-height: 44px; margin-block-start: auto; padding-inline: 22px; font-size: 16px; align-self: flex-start; } .lg__block { margin-block-end: 48px; } .lg__h2 { margin: 0 0 20px; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .lg__fliess { max-width: 760px; font-size: 16px; line-height: 1.65; color: #5A5870; } .lg__fliess p { margin: 0 0 16px; } .lg__fliess p:last-child { margin-block-end: 0; } .lg__fliess strong { color: #201F31; } /* Der Nullpunkt-Abschnitt bekommt eine eigene Flaeche — er traegt den Gedanken der Seite und soll nicht zwischen Tabellen untergehen. */ .lg__null { background: #FBFAFC; border-radius: 24px; padding: 30px 46px; } .lg__null .lg__h2 { font-size: 26px; } .lg__kraefte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .lg__kraft { display: flex; flex-direction: column; gap: 10px; background: #FBFAFC; border-radius: 24px; padding: 28px; } .lg__kraft-titel { margin: 4px 0 0; font-size: 20px; line-height: 1.2; font-weight: 600; color: #201F31; } .lg__kraft-satz { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .lg__marker { margin: 8px 0 0; padding-inline-start: 18px; } .lg__marker li { font-size: 16px; line-height: 1.55; color: #5A5870; margin-block-end: 6px; } .lg__tabelle { width: 100%; border-collapse: collapse; } .lg__tabelle th, .lg__tabelle td { text-align: left; padding: 15px 20px 15px 0; border-block-end: 1px solid #E7E6F0; font-size: 16px; line-height: 1.5; vertical-align: top; } .lg__tabelle th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8B89A0; font-weight: 500; } .lg__tabelle td:first-child { font-weight: 500; color: #201F31; white-space: nowrap; } .lg__tabelle td:nth-child(2) { color: #8B89A0; white-space: nowrap; } .lg__tabelle td:last-child { color: #5A5870; } .lg__ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: s; } .lg__ablauf li { counter-increment: s; display: flex; flex-direction: column; gap: 6px; background: #FBFAFC; border-radius: 20px; padding: 22px; } .lg__ablauf li::before { content: '0' counter(s); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; color: #5B5FC7; } .lg__ablauf-titel { font-size: 16px; font-weight: 600; color: #201F31; } .lg__ablauf-text { font-size: 15px; line-height: 1.55; color: #5A5870; } .lg__produkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .lg__produkt { display: flex; flex-direction: column; gap: 8px; border: 1px solid #E7E6F0; border-radius: 24px; padding: 28px; } .lg__produkt-titel { margin: 0; font-size: 18px; line-height: 1.25; font-weight: 600; color: #201F31; } .lg__produkt-satz { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .lg__produkt-preis { margin: 6px 0 14px; font-size: 17px; font-weight: 600; color: #201F31; } .lg-schluss-sektion::before { background: #FBFAFC; } .lg__schluss { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 56px; } .lg__schluss-1 { margin: 0; font-size: 17px; line-height: 1.5; color: #201F31; max-width: 760px; } .lg__schluss-2 { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #5A5870; max-width: 760px; } @media (max-width: 1100px) { .lg__kraefte, .lg__produkte { grid-template-columns: 1fr; } .lg__ablauf { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .lg { padding: 40px 20px 28px; max-width: 1320px; margin-inline: auto; } .lg__kopf { margin-block-end: 32px; } .lg__h1 { font-size: 28px; line-height: 1.1; } .lg__h2 { font-size: 23px; line-height: 1.15; } .lg__null { padding: 28px 22px; } .lg__null .lg__h2 { font-size: 21px; } .lg__einleitung, .lg__fliess { font-size: 16px; } .lg__block { margin-block-end: 32px; } .lg__ablauf { grid-template-columns: 1fr; } .lg__knopf { width: 100%; justify-content: center; } /* Tabelle scrollt, statt zu quetschen */ .lg__tabelle { display: block; overflow-x: auto; } .lg__schluss { padding: 28px 20px; } } /* END_SECTION:ory-longevity */ /* START_SECTION:ory-naehrstoffe (INDEX:110) */ .nr { --nr-akzent: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } .nr-sektion::before { background: #FBFAFC; } .nr { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; background: #FBFAFC; color: #201F31; } .nr__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); } .nr__band--hell { background: #FBFAFC; } .nr__band--grau { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; } .nr__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .nr__marke--klein { font-size: 11px; } .nr__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; } .nr__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; } .nr__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); } .nr__pille-knopf { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 14px 22px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FBFAFC; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; flex: none; } a.nr__pille-knopf:hover { border-color: #5B5FC7; } .nr__pille-knopf--weiss { background: #FFFFFF; } .nr__pille-knopf--tot { color: #A9A7B8; background: #F7F6FB; } .nr__hinweis { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 90ch; } .nr__leiste { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 24px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 22px 26px; } .nr__leistentext { font-size: 17px; line-height: 1.55; color: #3B3A50; } /* ── Einführung ── */ .nr__band--kopf { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 36px 56px 32px; } .nr__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; } .nr__krume a { color: #8B89A0; text-decoration: none; } .nr__krume a:hover { color: #5B5FC7; text-decoration: underline; } .nr__krumeteiler { padding-inline: 7px; } .nr__krume span:last-child { color: #5A5870; } .nr__kopfraster { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; } .nr__kopftext { display: flex; flex-direction: column; gap: 14px; } .nr__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; } .nr__grenze { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 56ch; } .nr__hilfen { display: flex; flex-direction: column; gap: 10px; } .hilfe { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; text-decoration: none; color: inherit; } a.hilfe:hover { border-color: #DEDCE8; } .hilfe__text { display: flex; flex-direction: column; gap: 3px; } .hilfe__titel { font-size: 17px; font-weight: 500; color: #201F31; } .hilfe__unter { font-size: 15px; line-height: 1.45; color: #5A5870; } .hilfe__cta { font-size: 16px; color: #5B5FC7; flex: none; } .hilfe--tot .hilfe__cta { color: #A9A7B8; } /* ── Filter ── */ .nr__band--filter { padding: 20px max(56px, calc((100% - 1280px) / 2)); background: #F4F3F9; border-block-end: 1px solid #EAE8F1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .nr__pillen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pille { border-radius: 999px; font-weight: 500; white-space: nowrap; flex: none; border: 1px solid #DEDCE8; background: #FFFFFF; color: #3B3A50; padding: 11px 20px; font-size: 15px; min-height: 44px; display: flex; align-items: center; text-decoration: none; } .pille:hover { border-color: #5B5FC7; } .pille--an { border-color: #2B2A3D; background: #2B2A3D; color: #FFFFFF; } .nr__zaehler { font-size: 15px; color: #8B89A0; } /* ── Seitenraster (Umfang, Fragen) ── */ .nr__seitenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .nr__seitenkopf { display: flex; flex-direction: column; gap: 14px; } .nr__seitentext { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .nr__knoepfe { display: flex; flex-direction: column; gap: 10px; margin-block-start: 4px; } .nr__band--umfang { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; } .nr__umfang { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .umf { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 8px; } .umf__feld { inline-size: 36px; block-size: 36px; border-radius: 10px; background: var(--nr-akzent); display: block; } .umf__titel { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .umf__text { font-size: 15px; line-height: 1.55; color: #5A5870; } /* ── Gruppen ── */ .nr__gruppenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block-end: 26px; flex-wrap: wrap; } .nr__gruppentitel { display: flex; flex-direction: column; gap: 12px; max-width: 660px; } .nr__gruppentitel--breit { max-width: 720px; } .nr__gruppentext { margin: 0; font-size: 17px; line-height: 1.6; color: #5A5870; } .nr__gruppenzaehler { font-size: 15px; color: #8B89A0; flex: none; } .nr__karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .prod { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } a.prod:hover { border-color: #DEDCE8; } /* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht. Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand. Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */ .prod__bild { position: relative; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: flex; align-items: flex-end; padding: 0; } .prod__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .prod__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; color: #7C7A92; background: rgba(255,255,255,.86); border-radius: 10px; padding: 6px 9px; } .prod__kennzeichen { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3B3A50; } .prod__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .prod__name { font-size: 20px; line-height: 1.22; font-weight: 500; letter-spacing: -0.012em; } .prod__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .prod__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; } .prod__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; white-space: nowrap; flex: none; } .prod__fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-block-start: 1px solid #EFEEF4; padding-block-start: 12px; } .prod__preis { font-size: 22px; font-weight: 600; color: #5B5FC7; } .prod__mehr { font-size: 15px; color: #5B5FC7; } /* ── Fragen ── */ .nr__band--fragen { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; } .nr__fragenliste { display: flex; flex-direction: column; } .frage { border-block-start: 1px solid #E4E1EC; } .frage__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; } .frage__q::-webkit-details-marker { display: none; } .frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; } .frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; } .frage[open] .frage__zeichen { font-size: 0; } .frage[open] .frage__zeichen::before { content: "–"; font-size: 22px; } .frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; } .frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .nr__fragenabschluss { border-block-start: 1px solid #E4E1EC; } /* ── Datenlage ── */ .nr__band--daten { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; display: flex; flex-direction: column; gap: 36px; } .nr__datenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .nr__datennotiz { font-size: 15px; color: #8B89A0; flex: none; max-width: 260px; line-height: 1.5; } .nr__datenraster { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; align-items: start; } .nr__datenspalte { display: flex; flex-direction: column; gap: 16px; } .karte-flaeche { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 24px; padding: 28px 30px; display: flex; flex-direction: column; gap: 20px; } .karte-flaeche__kopf { display: flex; flex-direction: column; gap: 5px; } .karte-flaeche__titel { font-size: 20px; font-weight: 600; color: #201F31; } .karte-flaeche__titel--klein { font-size: 18px; } .karte-flaeche__text { font-size: 15px; line-height: 1.5; color: #8B89A0; } .nr__balken { display: flex; flex-direction: column; gap: 16px; } .balken { display: flex; flex-direction: column; gap: 7px; } .balken__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .balken__label { font-size: 16px; color: #2B2A3D; } .balken__wert { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; color: #5B5FC7; flex: none; } .balken__spur { block-size: 12px; border-radius: 999px; background: #EDEBF3; overflow: hidden; } .balken__fuell { block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, #8E91DA, #5B5FC7); } .balken__notiz { font-size: 14px; line-height: 1.45; color: #8B89A0; } .nr__kurve { inline-size: 100%; display: block; overflow: visible; } .nr__kaskade { display: flex; flex-direction: column; gap: 20px; } .nr__stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stufe { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 7px; } .stufe__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #3B3A50; background: var(--nr-akzent); border-radius: 999px; padding: 5px 11px; align-self: flex-start; } .stufe__titel { font-size: 18px; font-weight: 600; line-height: 1.25; } .stufe__text { font-size: 15px; line-height: 1.55; color: #5A5870; } .nr__funktionen { display: flex; flex-wrap: wrap; gap: 10px; } .nr__funktion { border: 1px solid #EBE9F2; border-radius: 999px; padding: 10px 16px; font-size: 15px; color: #3B3A50; background: #FBFAFC; } .nr__quellen { border-block-start: 1px solid #EFEEF4; padding-block-start: 22px; display: flex; flex-direction: column; gap: 8px; } .nr__quellen--hell { border-block-start-color: #E4E1EC; padding-block-start: 20px; gap: 6px; } .nr__quelle { font-size: 14px; line-height: 1.55; color: #8B89A0; } /* ── Tryptophan und NAD ── */ .nr__band--nad { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; display: flex; flex-direction: column; gap: 32px; } .nr__begriffe { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 2px; } .nr__begriff { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 999px; padding: 8px 14px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; color: #5A5870; } .nr__ausloeser { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .nr__ausloeserliste { display: flex; flex-wrap: wrap; gap: 8px; } .nr__ausloeserpille { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 999px; padding: 9px 16px; font-size: 15px; color: #3B3A50; } .nr__kettenflaeche { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 30px 32px; display: flex; flex-direction: column; gap: 22px; } .nr__kette { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 0; } .glied { flex: 1 1 200px; min-inline-size: 200px; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 6px; } .glied--ziel { background: #EFF8F4; border-color: #C6E2D7; } .glied__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0; } .glied--ziel .glied__marke { color: #3F6A5B; } .glied__name { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; overflow-wrap: anywhere; } .glied__text { font-size: 14px; line-height: 1.45; color: #8B89A0; } .nr__pfeil { display: flex; align-items: center; padding-inline: 8px; font-size: 20px; color: #C2C0CE; flex: none; } .nr__zweige { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .zweig { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; } .zweig__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #B5716F; } .zweig__text { font-size: 17px; line-height: 1.55; color: #3B3A50; } .nr__marker { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; } .mk { flex: 1 1 260px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; } .mk__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B5716F; } .mk__name { font-size: 19px; font-weight: 600; line-height: 1.25; } .mk__text { font-size: 15px; line-height: 1.5; color: #5A5870; } /* ── Was du mitnehmen solltest ── */ .nr__band--mitnehmen { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; display: flex; flex-direction: column; gap: 26px; } .nr__mitnehmen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mit { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .mit__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; color: #3B3A50; background: var(--nr-akzent); border-radius: 999px; padding: 5px 11px; align-self: flex-start; } .mit__titel { font-size: 18px; font-weight: 600; line-height: 1.3; } .mit__text { font-size: 16px; line-height: 1.6; color: #5A5870; } /* ── Schluss ── */ .nr__band--schluss { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .nr__zeichen { display: flex; align-items: center; gap: 12px; } .nr__logo { block-size: 28px; inline-size: auto; display: block; } .nr__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: #9C9AAE; } .nr__schlusssatz { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; max-width: 560px; } @media (max-width: 1200px) { .nr__karten { grid-template-columns: repeat(3, 1fr); } .nr__datenraster { grid-template-columns: 1fr; } .nr__stufen { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1100px) { .nr__kopfraster { grid-template-columns: 1fr; gap: 32px; } .nr__seitenraster { grid-template-columns: 1fr; gap: 32px; } .nr__knoepfe { flex-direction: row; } .nr__karten { grid-template-columns: repeat(2, 1fr); } .nr__zweige { grid-template-columns: 1fr; } .nr__mitnehmen { grid-template-columns: 1fr; } } @media (max-width: 700px) { .nr__band { padding: 24px 20px; } .nr__band--kopf { padding: 20px 20px 24px; } .nr__band--filter { padding: 16px 20px; } .nr__band--umfang, .nr__band--fragen, .nr__band--daten, .nr__band--nad, .nr__band--mitnehmen { padding: 32px 20px; } .nr__h1 { font-size: 31px; } .nr__h2 { font-size: 24px; } .nr__lead { font-size: 17px; } .nr__karten, .nr__umfang, .nr__stufen { grid-template-columns: 1fr; } .nr__leiste { flex-direction: column; align-items: flex-start; } .nr__knoepfe { flex-direction: column; } .frage__titel { font-size: 18px; } .nr__pfeil { display: none; } .nr__pillen { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 4px; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .nr .nr__strich, .nr .nr__fragenabschluss, .balken__spur .balken__fuell { display: block; } /* END_SECTION:ory-naehrstoffe */ /* START_SECTION:ory-pakete (INDEX:112) */ .pk-sektion::before { background: #FBFAFC; } .pk { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; background: #FBFAFC; color: #201F31; } .pk__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); } .pk__band--hell { background: #FBFAFC; } .pk__band--grau { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; } .pk__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .pk__marke--klein { font-size: 11px; } .pk__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; } .pk__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); } /* ── Band 1 · Einführung ── */ .pk__band--einfuehrung { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 36px 56px 32px; } .pk__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; } .pk__krume a { color: #8B89A0; text-decoration: none; } .pk__krume a:hover { color: #5B5FC7; text-decoration: underline; } .pk__krumeteiler { padding-inline: 7px; } .pk__krume span:last-child { color: #5A5870; } .pk__einfuehrung { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; } .pk__text { display: flex; flex-direction: column; gap: 14px; } .pk__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; } .pk__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; } .pk__grenze { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 56ch; } .pk__hilfen { display: flex; flex-direction: column; gap: 10px; } .hilfe { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; text-decoration: none; color: inherit; } a.hilfe:hover { border-color: #DEDCE8; } .hilfe__text { display: flex; flex-direction: column; gap: 3px; } .hilfe__titel { font-size: 17px; font-weight: 500; color: #201F31; } .hilfe__unter { font-size: 15px; line-height: 1.45; color: #5A5870; } .hilfe__cta { font-size: 16px; color: #5B5FC7; flex: none; } .hilfe--tot .hilfe__cta { color: #A9A7B8; } /* ── Band 2 · Filter ── */ .pk__band--filter { padding: 20px max(56px, calc((100% - 1280px) / 2)); background: #F4F3F9; border-block-end: 1px solid #EAE8F1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pk__pillen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pille { border-radius: 999px; font-weight: 500; white-space: nowrap; flex: none; border: 1px solid #DEDCE8; background: #FFFFFF; color: #3B3A50; padding: 11px 20px; font-size: 15px; min-height: 44px; display: flex; align-items: center; text-decoration: none; } .pille:hover { border-color: #5B5FC7; } .pille--an { border-color: #2B2A3D; background: #2B2A3D; color: #FFFFFF; } .pk__zaehler { font-size: 15px; color: #8B89A0; } /* ── Gruppen ── */ .pk__gruppenkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block-end: 26px; flex-wrap: wrap; } .pk__gruppentitel { display: flex; flex-direction: column; gap: 12px; max-width: 660px; } .pk__gruppentext { margin: 0; font-size: 17px; line-height: 1.6; color: #5A5870; } .pk__gruppenzaehler { font-size: 15px; color: #8B89A0; flex: none; } .pk__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .paket { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; } a.paket:hover { border-color: #DEDCE8; } /* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht. Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand. Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */ .paket__bild { position: relative; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: flex; align-items: flex-end; padding: 0; } .paket__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .paket__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; color: #7C7A92; background: rgba(255,255,255,.86); border-radius: 10px; padding: 6px 9px; } .paket__kennzeichen { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3B3A50; } .paket__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .paket__oben { display: flex; flex-direction: column; gap: 6px; } .paket__name { font-size: 22px; line-height: 1.22; font-weight: 500; letter-spacing: -0.012em; } .paket__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .paket__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; } .paket__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; white-space: nowrap; flex: none; } .paket__fuss { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-block-start: 1px solid #EFEEF4; padding-block-start: 12px; } .paket__preisblock { display: flex; flex-direction: column; gap: 2px; } .paket__preis { font-size: 22px; font-weight: 600; color: #5B5FC7; } .paket__einzeln { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #8B89A0; } .paket__mehr { font-size: 15px; color: #5B5FC7; } .paket--tot .paket__mehr { color: #A9A7B8; } .pk__hinweis { margin: 22px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 90ch; } .pk__leiste { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 24px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 22px 26px; } .pk__leistentext { font-size: 17px; line-height: 1.55; color: #3B3A50; } .pk__pille { display: flex; align-items: center; min-height: 44px; background: #FFFFFF; border: 1px solid #DEDCE8; border-radius: 999px; padding: 14px 24px; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; flex: none; } a.pk__pille:hover { border-color: #5B5FC7; } .pk__pille--hell { background: #FBFAFC; padding: 14px 22px; } .pk__pille--tot { color: #A9A7B8; background: #F7F6FB; } /* ── Fragen ── */ .pk__band--fragen { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; } .pk__fragenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .pk__fragenkopf { display: flex; flex-direction: column; gap: 14px; } .pk__fragenknoepfe { display: flex; flex-direction: column; gap: 10px; margin-block-start: 4px; } .pk__fragenliste { display: flex; flex-direction: column; } .frage { border-block-start: 1px solid #EFEEF4; } .frage__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; } .frage__q::-webkit-details-marker { display: none; } .frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; } .frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; } .frage[open] .frage__zeichen { font-size: 0; } .frage[open] .frage__zeichen::before { content: "–"; font-size: 22px; } .frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; } .frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .pk__fragenabschluss { border-block-start: 1px solid #EFEEF4; } @media (max-width: 1100px) { .pk__einfuehrung { grid-template-columns: 1fr; gap: 32px; } .pk__karten { grid-template-columns: repeat(2, 1fr); } .pk__fragenraster { grid-template-columns: 1fr; gap: 32px; } .pk__fragenknoepfe { flex-direction: row; } } @media (max-width: 700px) { .pk__band { padding: 24px 20px; } .pk__band--einfuehrung { padding: 20px 20px 24px; } .pk__band--filter { padding: 16px 20px; } .pk__band--fragen { padding: 32px 20px; } .pk__h1 { font-size: 31px; } .pk__h2 { font-size: 24px; } .pk__lead { font-size: 17px; } .pk__karten { grid-template-columns: 1fr; } .pk__leiste { flex-direction: column; align-items: flex-start; } .pk__fragenknoepfe { flex-direction: column; } .frage__titel { font-size: 18px; } /* Die Filterpillen laufen waagerecht weiter, statt zu stapeln. */ .pk__pillen { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 4px; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .pk .pk__strich, .pk .pk__fragenabschluss { display: block; } /* END_SECTION:ory-pakete */ /* START_SECTION:ory-therapeuten (INDEX:116) */ .th { --th-akzent: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } .th-sektion::before { background: #FBFAFC; } .th { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; background: #FBFAFC; color: #201F31; } .th__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); } .th__band--hell { background: #FBFAFC; border-block-end: 1px solid #EAE8F1; } .th__band--weiss { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; display: flex; flex-direction: column; gap: 26px; } .th__band--grau { background: #F4F3F9; border-block-end: 1px solid #EAE8F1; display: flex; flex-direction: column; gap: 26px; } .th__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .th__marke--klein { font-size: 11px; } .th__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; } .th__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; } .th__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); } .th__bandkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block-end: 26px; flex-wrap: wrap; } .th__band--weiss > .th__bandkopf, .th__band--grau > .th__bandkopf { margin-block-end: 0; } .th__bandtitel { display: flex; flex-direction: column; gap: 12px; max-width: 680px; } .th__bandtitel--breit { max-width: 760px; } .th__bandtext { margin: 0; font-size: 17px; line-height: 1.6; color: #5A5870; } .th__notiz { font-size: 15px; color: #8B89A0; flex: none; max-width: 260px; line-height: 1.5; } .th__hinweis { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 100ch; } .th__zwischentitel { font-size: 20px; font-weight: 600; } .th__zwischentext { font-size: 15px; line-height: 1.55; color: #8B89A0; } .th__unterkopf { display: flex; flex-direction: column; gap: 5px; margin-block-start: 34px; margin-block-end: 16px; max-width: 760px; } .th__pille { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; padding: 14px 22px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; flex: none; } a.th__pille:hover { border-color: #5B5FC7; } .th__pille--weiss { background: #FFFFFF; } .th__pille--tot { color: #A9A7B8; background: #F7F6FB; } .th__knoepfe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .th__knoepfe--stapel { flex-direction: column; align-items: stretch; gap: 10px; margin-block-start: 4px; } .th__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 16px 26px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; } a.th__knopf:hover { border-color: #5B5FC7; } .th__knopf--voll { background: #D98B92; border-color: #D98B92; color: #FFFFFF; padding: 17px 30px; align-self: flex-start; } .th__knopf--voll:hover { background: #C4757D; border-color: #C4757D; color: #FFFFFF; } .th__knopf--tot { color: #A9A7B8; background: #F7F6FB; } /* ── Hero ── */ .th__band--hero { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 44px 56px 40px; } .th__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; } .th__krume a { color: #8B89A0; text-decoration: none; } .th__krume a:hover { color: #5B5FC7; text-decoration: underline; } .th__teiler { padding-inline: 7px; } .th__krume span:last-child { color: #5A5870; } .th__heroraster { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 56px; align-items: center; } .th__herotext { display: flex; flex-direction: column; gap: 18px; } .th__badge { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #3B3A50; background: var(--th-akzent); border-radius: 999px; padding: 7px 15px; align-self: flex-start; } .th__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; } .th__fakten { display: flex; flex-wrap: wrap; gap: 8px; } .th__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 7px 14px; background: #FBFAFC; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; } /* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht. Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand. Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */ .th__herobild { aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: grid; place-items: center; padding: 0; } .th__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .th__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; text-align: center; color: #7C7A92; padding: 14px; } /* ── Zielgruppen ── */ .th__gruppen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .gruppe { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; } .gruppe__meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B5716F; } .gruppe__titel { font-size: 19px; font-weight: 600; line-height: 1.25; } .gruppe__text { font-size: 15px; line-height: 1.55; color: #5A5870; } .th__unterstuetzung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .posten { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; } .posten__titel { font-size: 17px; font-weight: 600; line-height: 1.25; } .posten__text { font-size: 15px; line-height: 1.5; color: #4C4B5E; } /* ── Marktdaten ── */ .th__balken { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; } .balken { display: flex; flex-direction: column; gap: 7px; } .balken__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .balken__label { font-size: 16px; color: #2B2A3D; } .balken__wert { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; color: #5B5FC7; flex: none; } .balken__spur { block-size: 12px; border-radius: 999px; background: #EDEBF3; overflow: hidden; } .balken__fuell { block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, #8E91DA, #5B5FC7); } .balken__notiz { font-size: 14px; line-height: 1.45; color: #8B89A0; } .th__studienlage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lage { border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 7px; } .lage--belegt { background: #EFF8F4; border: 1px solid #C6E2D7; } .lage--uneindeutig { background: #F7F6FA; border: 1px solid #E4E1EC; } .lage--nicht-belegt { background: #FBF2F2; border: 1px solid #EBD2D3; } .lage__tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .lage--belegt .lage__tag { color: #3F6A5B; } .lage--uneindeutig .lage__tag { color: #6A6880; } .lage--nicht-belegt .lage__tag { color: #8A5457; } .lage__titel { font-size: 19px; font-weight: 600; line-height: 1.25; } .lage__text { font-size: 15px; line-height: 1.55; color: #4C4B5E; } .th__quellen { border-block-start: 1px solid #EFEEF4; padding-block-start: 22px; display: flex; flex-direction: column; gap: 8px; } .th__quelle { font-size: 14px; line-height: 1.55; color: #8B89A0; } /* ── Ablauf ── */ .th__ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .schritt { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; } .schritt__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B5716F; } .schritt__titel { font-size: 20px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; } .schritt__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .schritt__wer { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #9C9AAE; margin-block-start: 2px; } /* ── Zuständigkeit ── */ .th__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .spalte { border-radius: 24px; padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; } .spalte--ory { background: #EFF8F4; border: 1px solid #C6E2D7; } .spalte--sie { background: #F7F6FA; border: 1px solid #E4E1EC; } .spalte__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .spalte--ory .spalte__marke { color: #3F6A5B; } .spalte--sie .spalte__marke { color: #6A6880; } .spalte__zeile { font-size: 16px; line-height: 1.55; color: #3B3A50; } /* ── Angebote ── */ .th__angebote { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ang { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; } .ang__bild { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: grid; place-items: center; padding: 0; } .ang__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .ang__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; text-align: center; color: #7C7A92; padding: 14px; } .ang__inhalt { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .ang__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8B89A0; } .ang__name { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; } .ang__text { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .ang__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; } .ang__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; } .ang__knopf { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-block-start: 12px; border: 1px solid #201F31; border-radius: 999px; background: #FFFFFF; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; } .ang__knopf:hover { background: #201F31; color: #FFFFFF; } .ang__knopf--tot { border-color: #DEDCE8; color: #A9A7B8; background: #F7F6FB; } /* ── Digitales ── */ .th__digital { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .werkzeug { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; } .werkzeug__titel { font-size: 19px; font-weight: 600; line-height: 1.25; } .werkzeug__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .werkzeug__meta { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #9C9AAE; margin-block-start: 2px; } /* ── Netzwerk ── */ .th__netzraster { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 56px; align-items: start; } .th__netz { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .th__netzpunkt { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 18px; padding: 18px 20px; font-size: 17px; line-height: 1.55; color: #3B3A50; } /* ── Anmeldung ── */ .th__band--anmeldung { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; } .th__anmeldung { display: grid; grid-template-columns: 380px minmax(0,1fr); gap: 48px; align-items: start; } .th__anmeldung-text { display: flex; flex-direction: column; gap: 14px; } .th__form { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; } .th__formzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .th__feld { display: flex; flex-direction: column; gap: 6px; } .th__flabel { font-size: 15px; font-weight: 500; color: #3B3A50; } .th__form input[type="text"], .th__form input[type="email"], .th__form select, .th__form textarea { font: inherit; font-size: 16px; color: #201F31; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 12px; padding: 12px 14px; min-block-size: 46px; inline-size: 100%; } .th__form textarea { min-block-size: 88px; resize: vertical; } .th__form input:focus-visible, .th__form select:focus-visible, .th__form textarea:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 1px; border-color: #5B5FC7; } .th__gruppe { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .th__haken-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .th__haken { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.45; color: #3B3A50; cursor: pointer; } .th__haken input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; flex: none; accent-color: #5B5FC7; } .th__haken--pflicht { font-size: 15px; color: #5A5870; border-block-start: 1px solid #EFEEF4; padding-block-start: 16px; } .th__formklein { margin: 0; font-size: 14px; line-height: 1.55; color: #8B89A0; } .th__erfolg { margin: 0; padding: 14px 16px; border-radius: 14px; background: #EFF8F4; border: 1px solid #C6E2D7; color: #2F5A4A; font-size: 16px; line-height: 1.55; } .th__fehler { margin: 0; padding: 14px 16px; border-radius: 14px; background: #FBF2F2; border: 1px solid #EBD2D3; color: #8A5457; font-size: 16px; line-height: 1.55; } /* ── Fragen ── */ .th__band--fragen { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; } .th__seitenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .th__seitenkopf { display: flex; flex-direction: column; gap: 14px; } .th__fragenliste { display: flex; flex-direction: column; } .frage { border-block-start: 1px solid #E4E1EC; } .frage__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; } .frage__q::-webkit-details-marker { display: none; } .frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; } .frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; } .frage[open] .frage__zeichen { font-size: 0; } .frage[open] .frage__zeichen::before { content: "–"; font-size: 22px; } .frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; } .frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .th__fragenabschluss { border-block-start: 1px solid #E4E1EC; } /* ── Fachartikel ── */ .th__artikel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .artikel { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; } a.artikel:hover { border-color: #5B5FC7; } .artikel__titel { font-size: 19px; font-weight: 600; line-height: 1.25; } .artikel__text { font-size: 15px; line-height: 1.55; color: #5A5870; } .artikel__mehr { margin-block-start: auto; padding-block-start: 8px; font-size: 15px; color: #5B5FC7; } .artikel--tot .artikel__mehr { color: #A9A7B8; } /* ── Mitnehmen ── */ .th__band--mitnehmen { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; display: flex; flex-direction: column; gap: 26px; } .th__mitnehmen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .mit { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; } .mit__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; color: #3B3A50; background: var(--th-akzent); border-radius: 999px; padding: 5px 11px; align-self: flex-start; } .mit__titel { font-size: 18px; font-weight: 600; line-height: 1.3; } .mit__text { font-size: 16px; line-height: 1.6; color: #5A5870; } /* ── Schluss ── */ .th__band--schluss { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .th__zeichen { display: flex; align-items: center; gap: 12px; } .th__logo { block-size: 28px; inline-size: auto; display: block; } .th__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: #9C9AAE; } .th__schlusssatz { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; max-width: 560px; } /* Das Theme blendet leere Elemente aus (div:empty in theme.css). */ .th .th__strich, .th .th__fragenabschluss, .th .balken__fuell { display: block; } @media (max-width: 1200px) { .th__gruppen, .th__digital, .th__artikel, .th__studienlage { grid-template-columns: repeat(2, 1fr); } .th__unterstuetzung { grid-template-columns: repeat(3, 1fr); } .th__ablauf { grid-template-columns: repeat(2, 1fr); } .th__netzraster { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 1100px) { .th__heroraster { grid-template-columns: 1fr; gap: 32px; } .th__seitenraster { grid-template-columns: 1fr; gap: 32px; } .th__balken { grid-template-columns: 1fr; } .th__zwei { grid-template-columns: 1fr; } .th__angebote { grid-template-columns: 1fr; } .th__mitnehmen { grid-template-columns: 1fr; } .th__knoepfe--stapel { flex-direction: row; } } @media (max-width: 700px) { .th__band { padding: 28px 20px; } .th__band--hero { padding: 20px 20px 28px; } .th__band--fragen, .th__band--mitnehmen { padding: 32px 20px; } .th__band--anmeldung { padding: 32px 20px; } .th__anmeldung { grid-template-columns: minmax(0,1fr); gap: 24px; } .th__formzeile, .th__haken-gitter { grid-template-columns: minmax(0,1fr); } .th__form { padding: 20px; } .th__h1 { font-size: 31px; } .th__h2 { font-size: 24px; } .th__lead { font-size: 17px; } .th__gruppen, .th__digital, .th__artikel, .th__studienlage, .th__unterstuetzung, .th__ablauf { grid-template-columns: 1fr; } .th__knoepfe--stapel { flex-direction: column; } .frage__titel { font-size: 18px; } } /* END_SECTION:ory-therapeuten */ /* START_SECTION:ory-unvertraeglichkeiten (INDEX:117) */ .uv-sektion--verlauf::before { background: linear-gradient(120deg, #FBEDED 0%, #F1EDF6 26%, #E6F6F2 54%, #DFF0F5 74%, #EEECF8 100%); } .uv-sektion--weiss::before { background: #FFFFFF; } .uv-sektion--grund::before { background: #FBFAFC; } .uv-sektion--toenung::before { background: #F4F3F9; } .uv-sektion--weiss { border-block: 1px solid #EFEEF4; } .uv { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .uv__zwei { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .uv__spalte { display: flex; flex-direction: column; gap: 32px; } .uv__kopf { display: flex; flex-direction: column; gap: 18px; } .uv__kopfblock { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } .uv__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .uv__h1 { margin: 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; max-width: 640px; text-wrap: pretty; } .uv__h2 { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .uv__h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -0.012em; font-weight: 600; color: #201F31; } .uv__h3 a { color: inherit; text-decoration: none; } .uv__h3 a:hover { color: #5B5FC7; } .uv__fliess p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #3B3A50; max-width: 700px; } .uv__fliess p:last-child { margin-block-end: 0; } .uv__vorspann { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .uv__klein { margin: 0; font-size: 15px; line-height: 1.55; color: #8B89A0; max-width: 820px; } .uv__bild { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28px; } .uv__bild--leer { display: flex; align-items: end; padding: 20px; background: repeating-linear-gradient(135deg, #F2F0F8 0 12px, #EBE8F4 12px 24px); border: 1px dashed #D8D4E8; color: #8B89A0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; line-height: 1.5; } .uv__bild--leer span { background: #FFFFFFCC; padding: 8px 10px; border-radius: 8px; } .uv__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 6px; } .uv__knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 15px 26px; border-radius: 999px; background: #5B5FC7; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; } a.uv__knopf:hover { filter: brightness(1.08); } .uv__knopf--hell { background: #FFFFFF; color: #201F31; border: 1px solid #DEDCE8; } /* Derselbe kurze Verlaufsstrich wie im Mega-Menü — er markiert überall im Shop dasselbe: hier steht ein einzelner Punkt einer Aufzählung. */ .uv__strich { flex: 0 0 auto; inline-size: 14px; block-size: 3px; border-radius: 999px; margin-block-start: 11px; background: linear-gradient(110deg, #A8E8E2 0%, #889FFE 100%); } .uv__punkte { display: flex; flex-direction: column; gap: 10px; } .uv__punkt { display: flex; gap: 12px; margin: 0; font-size: 16px; line-height: 1.55; color: #3B3A50; } .uv__vier { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .uv__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .uv__karte { display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 26px; } .uv-sektion--weiss .uv__karte, .uv-sektion--toenung .uv__karte { background: #FBFAFC; } .uv__karte-satz { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .uv__merk { margin: 0; font-size: 16px; line-height: 1.6; color: #201F31; font-weight: 500; border-inline-start: 4px solid #5B5FC7; padding-inline-start: 20px; max-width: 900px; } .uv__weg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .uv__wegfeld { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 26px; } .uv__punktfarbe { inline-size: 12px; block-size: 12px; border-radius: 999px; } .uv__wegtext { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .uv__tabellenfeld { overflow-x: auto; border: 1px solid #EBE9F2; border-radius: 24px; background: #FBFAFC; } .uv__tabelle { inline-size: 100%; min-inline-size: 720px; border-collapse: collapse; } .uv__tabelle th, .uv__tabelle td { text-align: start; padding: 16px 20px; font-size: 16px; line-height: 1.5; vertical-align: top; } .uv__tabelle th { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #8B89A0; font-weight: 500; border-block-end: 1px solid #E7E6F0; } .uv__tabelle td { color: #5A5870; border-block-end: 1px solid #EFEEF4; } .uv__tabelle tr:last-child td { border-block-end: 0; } .uv__td-thema { color: #201F31; font-weight: 600; white-space: nowrap; } .uv__wegweiser { display: flex; flex-direction: column; gap: 0; border-block-start: 1px solid #E7E6F0; } /* DIE DRITTE SPALTE WAR "auto" — 22.08.2026 korrigiert. Jede Zeile ist ein eigenes Raster, und bei "auto" richtet sich die Spaltenbreite nach der laengsten Pille DIESER Zeile. Sechs Zeilen ergaben deshalb sechs verschiedene Startkanten; die Tabelle sah ausgefranst aus. Feste 300px, Pille linksbuendig darin. */ .uv__wegkopf, .uv__wegzeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 300px; gap: 24px; align-items: center; } .uv__wegkopf { padding-block: 10px; border-block-end: 1px solid #E7E6F0; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .uv__wegzeile { padding-block: 18px; border-block-end: 1px solid #EFEEF4; } .uv__beobachtung { margin: 0; font-size: 16px; line-height: 1.45; color: #201F31; font-weight: 500; } .uv__hinweis { margin: 0; font-size: 16px; line-height: 1.55; color: #5A5870; } .uv__test { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; background: #EFEEF8; color: #4448A8; font-size: 16px; line-height: 1.35; text-decoration: none; text-wrap: balance; } a.uv__test:hover { background: #5B5FC7; color: #fff; } .uv__test--tot { background: #F4F3F9; color: #8B89A0; } .uv__karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .uv__produkt { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 20px; } .uv__produkt-bild img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; } .uv__probe { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .uv__preis { margin: 0; font-size: 17px; font-weight: 600; color: #201F31; } .uv__produkt .uv__knopf { margin-block-start: auto; inline-size: 100%; } .uv__weiter { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: #5B5FC7; text-decoration: none; } .uv__weiter:hover { text-decoration: underline; } .uv__schluss { display: flex; flex-direction: column; gap: 18px; } .uv__schluss-1 { margin: 0; font-size: 20px; line-height: 1.4; color: #201F31; max-width: 860px; text-wrap: pretty; } @media (max-width: 1100px) { .uv__zwei { grid-template-columns: 1fr; gap: 32px; } .uv__vier, .uv__weg, .uv__karten { grid-template-columns: 1fr 1fr; } .uv__wegzeile { grid-template-columns: 1fr; gap: 10px; align-items: start; } } @media (max-width: 760px) { .uv { padding: 40px 20px; max-width: 1320px; margin-inline: auto; } .uv__h1 { font-size: 28px; line-height: 1.1; } .uv__h2 { font-size: 23px; line-height: 1.15; } .uv__h3 { font-size: 16px; } .uv__schluss-1 { font-size: 17px; } .uv__fliess p, .uv__vorspann, .uv__merk, .uv__beobachtung { font-size: 16px; line-height: 1.55; } .uv__vier, .uv__paar, .uv__weg, .uv__karten { grid-template-columns: 1fr; gap: 16px; } .uv__wegkopf { display: none; } .uv__wegzeile { grid-template-columns: 1fr; gap: 8px; } .uv__karte, .uv__wegfeld { padding: 20px; } .uv__knopf { inline-size: 100%; } } /* Auf dem Telefon werden die Tabellen zu Karten — siehe Kopfkommentar in patch-tabellen. Die Spaltenueberschrift kommt aus data-spalte. */ @media (max-width: 760px) { .uv__tabellenfeld { overflow-x: visible; border: 0; background: transparent; border-radius: 0; } .uv__tabelle { min-inline-size: 0; display: block; } .uv__tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } .uv__tabelle tbody, .uv__tabelle tr { display: block; } .uv__tabelle tr { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; margin-block-end: 12px; } .uv__tabelle td { display: block; padding: 0; border: 0; font-size: 16px; } .uv__tabelle td + td { margin-block-start: 10px; } .uv__tabelle td::before { content: attr(data-spalte); display: block; margin-block-end: 2px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8B89A0; } .uv__tabelle td:empty { display: none; } } /* ── Einstiegsband: zwei Analysen und der Weg zu allen weiteren ── Zwei Karten und eine Hinweiskachel in einer Reihe. Die Kachel ist bewusst keine dritte Produktkarte — sie soll nicht wie ein Angebot aussehen, sondern wie eine Tuer. */ .uv__einstieg { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 20px; align-items: stretch; } .uv__produkt--gross { background: #FFFFFF; } .uv__weiter { display: flex; flex-direction: column; gap: 10px; justify-content: center; background: #F4F3F9; border: 1px solid #EBE9F2; border-radius: 24px; padding: 24px; } .uv__weiter-marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8B89A0; } .uv__weiter-text { margin: 0; font-size: 16px; line-height: 1.55; color: #3B3A50; } .uv__weiter-knopf { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-block-start: 4px; padding: 12px 22px; border: 1px solid #201F31; border-radius: 999px; background: #FFFFFF; font-size: 15px; font-weight: 500; color: #201F31; text-decoration: none; } .uv__weiter-knopf:hover { background: #201F31; color: #FFFFFF; } @media (max-width: 1000px) { .uv__einstieg { grid-template-columns: 1fr 1fr; } .uv__weiter { grid-column: 1 / -1; } } @media (max-width: 700px) { .uv__einstieg { grid-template-columns: 1fr; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .uv .uv__strich { display: block; } /* END_SECTION:ory-unvertraeglichkeiten */ /* START_SECTION:ory-versand (INDEX:118) */ .vs-sektion::before { background: #FFFFFF; } .vs { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .vs__kopf { max-width: 720px; margin-block-end: 48px; } .vs__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .vs__h1 { margin: 12px 0 0; font-size: 38px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .vs__einleitung { margin: 20px 0 0; font-size: 16px; line-height: 1.6; color: #5A5870; text-wrap: pretty; } .vs__block { margin-block-end: 48px; } .vs__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .vs__h2 { margin: 10px 0 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .vs__h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.3; font-weight: 600; color: #201F31; } .vs__satz { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #5A5870; max-width: 720px; } .vs__offen { margin: 16px 0 0; font-size: 16px; color: #A9A7B8; } .vs__tabelle { width: 100%; max-width: 880px; margin-block-start: 28px; border-collapse: collapse; } .vs__tabelle th, .vs__tabelle td { text-align: left; padding: 16px 20px 16px 0; border-block-end: 1px solid #E7E6F0; font-size: 16px; line-height: 1.45; } .vs__tabelle th { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #8B89A0; font-weight: 500; } .vs__tabelle td { color: #201F31; } .vs__tabelle td:first-child { font-weight: 500; } .vs__karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-block-start: 32px; } .vs__karte { background: #FBFAFC; border-radius: 20px; padding: 24px; } .vs__karte-titel { display: block; margin-block-end: 8px; font-size: 16px; font-weight: 600; color: #201F31; } .vs__karte-text { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .vs__listen { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-block-start: 32px; } .vs__liste ul { margin: 0; padding-inline-start: 20px; } .vs__liste li { font-size: 16px; line-height: 1.6; color: #5A5870; margin-block-end: 10px; } /* Kein Warnkasten. Er informiert über eine Rechtsfolge — Violett am Rand, kein Rot, kein Ausrufezeichen. */ .vs__siegel { margin-block-start: 32px; max-width: 880px; padding: 24px 26px; background: #FBFAFC; border-inline-start: 3px solid #5B5FC7; border-radius: 0 20px 20px 0; } .vs__siegel p { margin: 0; font-size: 16px; line-height: 1.65; color: #5A5870; } .vs__fuss { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-block-start: 40px; border-block-start: 1px solid #E7E6F0; } .vs__fuss p { margin: 8px 0 0; } .vs__link { color: #5B5FC7; } .vs__zeiten { color: #8B89A0; font-size: 16px; } @media (max-width: 900px) { .vs__karten, .vs__listen, .vs__fuss { grid-template-columns: 1fr; } } @media (max-width: 700px) { .vs { padding: 40px 20px; max-width: 1320px; margin-inline: auto; } .vs__h1 { font-size: 28px; line-height: 1.1; } .vs__h2 { font-size: 23px; line-height: 1.15; } .vs__einleitung, .vs__satz { font-size: 16px; } .vs__kopf, .vs__block { margin-block-end: 32px; } /* Tabelle darf scrollen statt zu quetschen */ .vs__tabelle { display: block; overflow-x: auto; white-space: nowrap; } .vs__link { display: inline-flex; align-items: center; min-height: 44px; } } /* END_SECTION:ory-versand */ /* START_SECTION:ory-vorsorge (INDEX:119) */ /* Der Akzentverlauf steht so nur im Entwurf; --ory-verlauf gibt es bereits in snippets/css-variables.liquid mit demselben Wert. */ .vs { --vs-akzent: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } .vs-sektion::before { background: #FBFAFC; } .vs { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; background: #FBFAFC; color: #201F31; } .vs__band { padding: 56px max(56px, calc((100% - 1280px) / 2)); } /* ── gemeinsame Bausteine ── */ .vs__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .vs__h2 { margin: 0; font-size: 28px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; color: #201F31; } .vs__strich { block-size: 2px; inline-size: 120px; border-radius: 999px; background: var(--ory-verlauf); } .vs__bandkopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block-end: 28px; flex-wrap: wrap; } .vs__bandkopf--gestapelt { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 660px; margin-block-end: 26px; } .vs__bandtitel { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } .vs__bandtext { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; max-width: 380px; } .vs__bandtext--breit { max-width: 660px; } .vs__zaehler { font-size: 15px; color: #8B89A0; flex: none; } .vs__pille { display: flex; align-items: center; min-height: 44px; background: #FFFFFF; border: 1px solid #DEDCE8; border-radius: 999px; padding: 14px 22px; font-size: 16px; font-weight: 500; color: #201F31; text-decoration: none; } a.vs__pille:hover { border-color: #5B5FC7; } .vs__pille--tot { color: #A9A7B8; background: #F7F6FB; } /* ── Band 1 · Einführung ── */ .vs__band--einfuehrung { background: #FFFFFF; border-block-end: 1px solid #EFEEF4; padding: 36px 56px 32px; } .vs__krume { font-size: 13px; color: #8B89A0; margin-block-end: 26px; } .vs__krume a { color: #8B89A0; text-decoration: none; } .vs__krume a:hover { color: #5B5FC7; text-decoration: underline; } .vs__krumeteiler { padding-inline: 7px; } .vs__krume span:last-child { color: #5A5870; } .vs__einfuehrung { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 56px; align-items: start; } .vs__text { display: flex; flex-direction: column; gap: 14px; } .vs__h1 { margin: 0; font-size: 38px; line-height: 1.05; letter-spacing: -0.028em; font-weight: 600; color: #201F31; } .vs__lead { margin: 0; font-size: 19px; line-height: 1.6; color: #5A5870; max-width: 56ch; text-wrap: pretty; } .vs__selbst { margin: 0; font-size: 18px; line-height: 1.6; color: #3B3A50; max-width: 56ch; text-wrap: pretty; } .vs__grenze { margin: 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 56ch; } .vs__hilfen { display: flex; flex-direction: column; gap: 10px; } .vs__hilfen .vs__marke { font-size: 11px; } .hilfe { background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 20px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; text-decoration: none; color: inherit; } a.hilfe:hover { border-color: #DEDCE8; } .hilfe__text { display: flex; flex-direction: column; gap: 3px; } .hilfe__titel { font-size: 17px; font-weight: 500; color: #201F31; } .hilfe__unter { font-size: 15px; line-height: 1.45; color: #5A5870; } .hilfe__cta { font-size: 16px; color: #5B5FC7; flex: none; } .hilfe--tot .hilfe__cta { color: #A9A7B8; } /* ── Band 2 · Einstiege ── */ .vs__band--wege { background: #F4F3F9; border-block-end: 1px solid #EAE8F1; } .vs__wege { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .weg { background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 44px; text-decoration: none; color: inherit; } a.weg:hover { border-color: #DEDCE8; } .weg__feld { inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--vs-akzent); display: block; } .weg__titel { font-size: 19px; font-weight: 600; color: #201F31; line-height: 1.25; letter-spacing: -0.01em; } .weg__text { font-size: 15px; line-height: 1.55; color: #5A5870; } .weg__cta { font-size: 15px; color: #5B5FC7; margin-block-start: 4px; } .weg--tot .weg__cta { color: #A9A7B8; } /* ── Band 3 · Pakete ── */ .vs__band--pakete { background: #FBFAFC; padding: 36px 56px 72px; } {%- comment -%} Zwei Spalten statt drei: Die Kacheln tragen jetzt Erklaerung UND Zusatzlinks. Bei drei Spalten wurden sie 373 px breit und 816 px hoch — schmal und lang. Bei vier Kacheln geht zudem eine 3er-Reihe nie auf. {%- endcomment -%} .vs__angebote { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .ang { position: relative; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color .16s ease; } .ang:has(.ang__flaeche):hover { border-color: #DEDCE8; } /* padding:0 — der Innenabstand war fuer den Platzhaltertext gedacht. Mit einem echten Foto darin lag ringsum ein 14px breiter Streifenrand. Der Abstand sitzt jetzt am Platzhaltertext selbst. 22.08.2026 */ .ang__bild { position: relative; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); display: flex; align-items: flex-end; padding: 0; } .ang__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .ang__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.5; color: #7C7A92; background: rgba(255,255,255,.86); border-radius: 10px; padding: 6px 9px; } .ang__kennzeichen { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; background: rgba(255,255,255,.92); border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #3B3A50; } .ang__inhalt { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .ang__oben { display: flex; flex-direction: column; gap: 6px; } .ang__art { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #3B3A50; background: var(--vs-akzent); border-radius: 999px; padding: 4px 10px; align-self: flex-start; } .ang__name { font-size: 23px; line-height: 1.2; font-weight: 500; color: #201F31; letter-spacing: -0.012em; } .ang__text { font-size: 15px; line-height: 1.5; color: #5A5870; } .ang__fakten { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: auto; } .ang__fakt { border: 1px solid #EBE9F2; border-radius: 999px; padding: 6px 12px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: #5A5870; white-space: nowrap; flex: none; } .ang__flaeche { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .ang__mehr--link { position: relative; z-index: 2; } .ang__liste { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-block-start: 1px solid #EFEEF4; display: flex; flex-direction: column; gap: 8px; } .ang__listenzeile { display: flex; } .ang__listenlink { position: relative; z-index: 2; font-size: 14px; color: #3B3A50; border-block-end: 1px solid #DCDAE6; padding-block-end: 2px; transition: border-color .16s ease; } .ang__listenlink:hover { border-color: #5B5FC7; color: #5B5FC7; } .ang__listentext { font-size: 14px; color: #6A6880; } .ang__fuss { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-block-start: 1px solid #EFEEF4; padding-block-start: 12px; } .ang__preisblock { display: flex; align-items: baseline; gap: 8px; } .ang__preis { font-size: 22px; font-weight: 600; color: #5B5FC7; } .ang__einheit { font-size: 13px; color: #9C9AAE; } .ang__mehr { font-size: 15px; color: #5B5FC7; } .ang--tot .ang__mehr { color: #A9A7B8; } .vs__ueberblick { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-block-start: 28px; background: #FFFFFF; border: 1px solid #EBE9F2; border-radius: 24px; padding: 22px 26px; } .vs__ueberblicktext { font-size: 17px; line-height: 1.55; color: #3B3A50; } .vs__ueberblick .vs__pille { flex: none; padding: 14px 24px; } /* ── Band 4 · Vergleich ── */ .vs__band--vergleich { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 72px 56px; } .vs__tabellenrahmen { border-radius: 24px; overflow: hidden; border: 1px solid #EBE9F2; background: #FBFAFC; } .vs__tabelle { inline-size: 100%; border-collapse: collapse; font-size: 16px; } /* DIESE ZEILE IST DER EIGENTLICHE FIX, 22.08.2026. Das gekaufte Theme setzt in theme.css `table th, table td { font-size: var(--text-lg) }` — das sind 20px, und es schlaegt die Vererbung von der Tabelle. Die 16px des Entwurfs kamen deshalb nie an; gemessen wurden 20px. Ein Wert auf der Tabelle allein genuegt nicht, er muss auf den Zellen stehen. */ .vs__tabelle th, .vs__tabelle td { font-size: 16px; } .vs__tabelle thead tr { background: #F4F3F9; } .vs__tabelle thead th { text-align: start; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0; padding: 14px 20px; } .vs__tabelle thead th.sp-k { inline-size: 22%; } /* Drei Spalten mit eigener Farbe — das ist der Kern der Tabelle im Entwurf: die Wege sind auf einen Blick auseinanderzuhalten. */ .vs__tabelle thead th.sp-b { color: #4E6B7A; background: #E4EDF3; border-block-end: 2px solid #C9DCE6; } .vs__tabelle thead th.sp-c { color: #3F6A5B; background: #E1F1EB; border-block-end: 2px solid #C6E2D7; } .vs__tabelle thead th.sp-d { color: #8A5457; background: #F7E7E7; border-block-end: 2px solid #EBD2D3; } .vs__tabelle tbody tr { border-block-start: 1px solid #EFEEF4; } .vs__tabelle tbody th.sp-k { text-align: start; font-weight: 400; color: #8B89A0; padding: 16px 20px; vertical-align: top; } .vs__tabelle tbody td { padding: 16px 20px; vertical-align: top; line-height: 1.5; } .vs__tabelle tbody td.sp-a { color: #3B3A50; } .vs__tabelle tbody td.sp-b { color: #2F4653; background: #F1F6F9; } .vs__tabelle tbody td.sp-c { color: #2C4A3F; background: #EFF8F4; } .vs__tabelle tbody td.sp-d { color: #5C3B3D; background: #FBF2F2; } .vs__tabellenfuss { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: #8B89A0; max-width: 90ch; } /* ── Band 5 · Früherkennung ── */ .vs__band--kollektion { background: #FBFAFC; border-block-start: 1px solid #EFEEF4; } .vs__kollektion { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .kp { display: flex; flex-direction: column; gap: 8px; } .kp__bild { display: block; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden; background: #F4F3F9; } .kp__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .kp__name { font-size: 17px; line-height: 1.3; font-weight: 500; color: #201F31; text-decoration: none; } .kp__name:hover { color: #5B5FC7; } .kp__preis { font-size: 17px; font-weight: 600; color: #5B5FC7; } .kp__form { margin: 0; } .kp__knopf { inline-size: 100%; min-height: 44px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; color: #201F31; font-size: 15px; font-weight: 500; cursor: pointer; } .kp__knopf:hover { border-color: #5B5FC7; } .kp__knopf[disabled] { color: #A9A7B8; cursor: default; background: #F7F6FB; } /* ── Band 6 · Fragen ── */ .vs__band--fragen { background: #F4F3F9; border-block-start: 1px solid #EAE8F1; padding: 72px 56px; } .vs__fragenraster { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; } .vs__fragenkopf { display: flex; flex-direction: column; gap: 14px; } .vs__fragenknoepfe { display: flex; flex-direction: column; gap: 10px; margin-block-start: 4px; } .vs__fragenliste { display: flex; flex-direction: column; } .frage { border-block-start: 1px solid #E4E1EC; } .frage__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; min-height: 44px; cursor: pointer; list-style: none; } .frage__q::-webkit-details-marker { display: none; } .frage__titel { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 600; color: #201F31; } .frage__zeichen { font-size: 22px; color: #9C9AAE; line-height: 1; flex: none; } .frage[open] .frage__zeichen::before { content: "–"; } .frage[open] .frage__zeichen { font-size: 0; } .frage[open] .frage__zeichen::before { font-size: 22px; } .frage__a { padding: 0 0 26px; display: flex; flex-direction: column; gap: 12px; max-width: 70ch; } .frage__erste { margin: 0; font-size: 17px; line-height: 1.6; color: #3B3A50; } .frage__zweite { margin: 0; font-size: 16px; line-height: 1.6; color: #5A5870; } .vs__fragenabschluss { border-block-start: 1px solid #E4E1EC; } /* ── Band 7 · Schluss ── */ .vs__band--schluss { background: #FFFFFF; border-block-start: 1px solid #EFEEF4; padding: 48px 56px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .vs__zeichen { display: flex; align-items: center; gap: 12px; } .vs__logo { block-size: 28px; inline-size: auto; display: block; } .vs__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; color: #9C9AAE; } .vs__schlusssatz { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; max-width: 560px; } /* Zwischenstufe fuer die Tabelle, bevor sie zur Kartenliste wird. */ @media (max-width: 1200px) { .vs__tabelle th, .vs__tabelle td { font-size: 15px; } .vs__tabelle thead th { padding: 12px 14px; letter-spacing: .06em; } .vs__tabelle tbody th.sp-k, .vs__tabelle tbody td { padding: 12px 14px; } } @media (max-width: 1100px) { .vs__einfuehrung { grid-template-columns: 1fr; gap: 32px; } .vs__wege { grid-template-columns: repeat(2, 1fr); } .vs__angebote { grid-template-columns: repeat(2, 1fr); } .vs__kollektion { grid-template-columns: repeat(3, 1fr); } .vs__fragenraster { grid-template-columns: 1fr; gap: 32px; } .vs__fragenknoepfe { flex-direction: row; } } /* Fuenf Spalten tragen unter rund 820px nicht mehr — ab hier Karten. */ @media (max-width: 820px) { .vs__tabellenrahmen { border: 0; border-radius: 0; overflow: visible; background: transparent; } .vs__tabelle th, .vs__tabelle td { font-size: 16px; } .vs__tabelle thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; } .vs__tabelle, .vs__tabelle tbody, .vs__tabelle tr, .vs__tabelle th, .vs__tabelle td { display: block; inline-size: auto; } .vs__tabelle tbody tr { border: 1px solid #EBE9F2; border-radius: 20px; overflow: hidden; margin-block-end: 12px; background: #FFFFFF; } .vs__tabelle tbody th.sp-k { padding: 14px 16px; background: #F4F3F9; color: #201F31; font-weight: 600; font-size: 16px; } .vs__tabelle tbody td { padding: 12px 16px; } .vs__tabelle tbody td::before { content: attr(data-spalte); display: block; margin-block-end: 3px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0; } } @media (max-width: 700px) { .vs__band { padding: 28px 20px; } .vs__band--einfuehrung { padding: 20px 20px 24px; } .vs__band--pakete, .vs__band--vergleich, .vs__band--fragen { padding: 32px 20px; } .vs__h1 { font-size: 31px; } .vs__h2 { font-size: 24px; } .vs__lead { font-size: 17px; } .vs__selbst { font-size: 16px; } .vs__wege, .vs__angebote { grid-template-columns: 1fr; } .vs__kollektion { grid-template-columns: repeat(2, 1fr); gap: 14px; } .vs__ueberblick { flex-direction: column; align-items: flex-start; } .vs__fragenknoepfe { flex-direction: column; } .frage__titel { font-size: 18px; } /* Aus der Tabelle wird eine Kartenliste. Die Farbe der Spalte wandert auf die Zelle, damit die Zuordnung erhalten bleibt. */ .vs__tabellenrahmen { border: 0; border-radius: 0; overflow: visible; background: transparent; } .vs__tabelle thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; } .vs__tabelle, .vs__tabelle tbody, .vs__tabelle tr, .vs__tabelle th, .vs__tabelle td { display: block; inline-size: auto; } .vs__tabelle tbody tr { border: 1px solid #EBE9F2; border-radius: 20px; overflow: hidden; margin-block-end: 12px; background: #FFFFFF; } .vs__tabelle tbody th.sp-k { padding: 14px 16px; background: #F4F3F9; color: #201F31; font-weight: 600; font-size: 16px; } .vs__tabelle tbody td { padding: 12px 16px; } .vs__tabelle tbody td::before { content: attr(data-spalte); display: block; margin-block-end: 3px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8B89A0; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .vs .vs__strich, .vs .vs__balken, .vs .vs__fragenabschluss, .vs .weg__feld { display: block; } /* END_SECTION:ory-vorsorge */ /* START_SECTION:startseite-ablauf (INDEX:147) */ .abl-sektion::before { background: #F4F3F9; } .abl { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .abl__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-block-end: 30px; flex-wrap: wrap; } .abl__titelblock { display: flex; flex-direction: column; gap: 12px; max-width: 600px; } .abl__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .abl__h2 { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: rgb(var(--color-foreground)); } .abl__dauer { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--color-foreground) / .72); max-width: 340px; } /* 4:1, nicht 16:6. Bei 16:6 wurde das Band 498px hoch und damit hoeher als die sechs Schrittkarten darunter — das Bild wurde zur Hauptsache und der Ablauf zur Fussnote. 4:1 ergibt rund 330px: sichtbar, aber erkennbar untergeordnet. Gemessen am 13.08.2026 auf 1440px. */ .abl__band { aspect-ratio: 4 / 1; border-radius: 20px; overflow: hidden; margin-block-end: 28px; } .abl__bandfoto { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center 68%; display: block; } .abl__raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .schritt { background: rgb(var(--color-background)); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; } .schritt__bild { aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; } .schritt__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .schritt__bild--leer { display: grid; place-items: center; padding: 10px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .schritt__fehlt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; line-height: 1.45; letter-spacing: .03em; text-align: center; color: #7C7A92; } .schritt__nr { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; color: var(--ory-violett); } .schritt__titel { font-size: 16px; line-height: 1.3; font-weight: 500; color: rgb(var(--color-foreground)); } .schritt__text { font-size: 14px; line-height: 1.5; color: rgb(var(--color-foreground) / .72); } /* Sechs Spalten tragen nur auf breiten Schirmen. Darunter drei, dann zwei — nie eine: Ein Ablauf, der sechs Bildschirmhoehen braucht, wird nicht als Ablauf gelesen. */ @media (max-width: 1200px) { .abl__raster { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .abl { padding: 40px 20px; } .abl__h2 { font-size: 23px; } .abl__kopf { margin-block-end: 28px; gap: 20px; } /* 16:6 waere auf 375px ein 21px hoher Streifen — nichts darauf erkennbar. */ .abl__band { aspect-ratio: 16 / 9; border-radius: 16px; margin-block-end: 20px; } .abl__raster { grid-template-columns: repeat(2, 1fr); gap: 12px; } .schritt { padding: 12px; border-radius: 16px; } .schritt__titel { font-size: 15px; } } /* END_SECTION:startseite-ablauf */ /* START_SECTION:startseite-behandler (INDEX:148) */ .beh-sektion::before { background: rgb(var(--color-background)); } .beh { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 0 56px 96px; display: grid; grid-template-columns: 1.1fr 1fr; background: transparent; } /* Die dunkle Flaeche liegt auf dem Raster, damit das Bild rechts randlos bis an die Kante laeuft. */ .beh { border-radius: 0; } .beh > * { position: relative; } .beh__text { background: #2A2B57; border-start-start-radius: 28px; border-end-start-radius: 28px; padding: 64px; display: flex; flex-direction: column; gap: 20px; } .beh__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #A9A7D8; } .beh__h2 { margin: 0; font-size: 29px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: #fff; } .beh__absatz { margin: 0; font-size: 16px; line-height: 1.6; color: #CFCEE6; max-width: 440px; } .beh__knoepfe { display: flex; gap: 12px; margin-block-start: 8px; flex-wrap: wrap; } .beh__knopf { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 26px; border-radius: 999px; text-decoration: none; font-size: 16px; } .beh__knopf--voll { background: #fff; color: #2A2B57; font-weight: 500; } .beh__knopf--rand { border: 1px solid #6B6C9B; color: #fff; } .beh__knopf:hover { filter: brightness(.92); } .beh__ort { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .04em; color: #A9A7D8; } .beh__rueckweg { font-size: 14px; line-height: 1.5; color: #9A98C6; margin-block-start: 8px; } .beh__rueckweg a { color: #fff; text-decoration: underline; } .beh__medium { border-start-end-radius: 28px; border-end-end-radius: 28px; overflow: hidden; display: flex; align-items: flex-end; padding: 22px; background: repeating-linear-gradient(135deg, #3A3B6B 0 9px, #33345F 9px 18px); } .beh__foto { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .beh__fehlt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; letter-spacing: .03em; color: #C9C8E4; background: rgb(20 20 45 / .55); border-radius: 12px; padding: 9px 13px; } @media (max-width: 900px) { .beh { grid-template-columns: 1fr; padding: 0 20px 56px; } .beh__text { padding: 32px 24px; order: 2; border-radius: 0 0 22px 22px; } .beh__h2 { font-size: 21px; } .beh__absatz { font-size: 16px; } .beh__knopf { width: 100%; justify-content: center; } .beh__medium { order: 1; min-block-size: 200px; border-radius: 22px 22px 0 0; } } /* END_SECTION:startseite-behandler */ /* START_SECTION:startseite-evi (INDEX:149) */ .evi-sektion::before { background: #F4F3F9; } .evi { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .evi__text { display: flex; flex-direction: column; gap: 20px; } .evi__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .evi__h2 { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: rgb(var(--color-foreground)); } .evi__absatz { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--color-foreground) / .72); max-width: 480px; } .evi__zeile { display: flex; align-items: center; gap: 14px; margin-block-start: 6px; flex-wrap: wrap; } .evi__knopf { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 26px; border-radius: 999px; text-decoration: none; background: var(--ory-violett); color: #fff; font-size: 16px; font-weight: 500; } .evi__knopf:hover { filter: brightness(1.08); } /* Der Betreiberhinweis steht NEBEN dem Knopf, nicht darunter und nicht kleiner als noetig — Evi gehoert einer eigenstaendigen Gesellschaft. */ .evi__betreiber { font-size: 14px; line-height: 1.45; color: #8B89A0; max-width: 260px; } .evi__medium { display: flex; justify-content: center; } .evi__telefon { inline-size: 300px; max-inline-size: 100%; aspect-ratio: 9 / 19.5; border-radius: 44px; border: 10px solid #201F31; overflow: hidden; box-shadow: 0 30px 60px rgb(32 31 49 / .16); background: rgb(var(--color-background)); } .evi__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* Ohne gezeichneten Rahmen: Das Bild bestimmt sein Verhaeltnis selbst und wird nicht beschnitten — sonst faellt bei einer haltenden Hand der Daumen weg. */ /* Radius und Schatten bleiben: Die Vorlage vom 15.08.2026 hat einen WEISSEN, nicht durchsichtigen Hintergrund. Ohne Radius steht ein weisser Kasten auf der hellvioletten Flaeche und sieht nach Versehen aus. Mit Radius liest er sich als Karte. Bei einer freigestellten Vorlage stoert beides nicht. */ .evi__telefon--frei { inline-size: 420px; aspect-ratio: auto; border: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 44px rgb(32 31 49 / .10); background: transparent; } .evi__telefon--frei .evi__foto { block-size: auto; object-fit: contain; } .evi__telefon--leer { display: grid; place-items: center; padding: 24px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .evi__fehlt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.55; letter-spacing: .03em; text-align: center; color: #7C7A92; } @media (max-width: 900px) { .evi { grid-template-columns: 1fr; gap: 40px; padding: 40px 20px; } .evi__h2 { font-size: 23px; } .evi__absatz { font-size: 16px; } /* Das Telefon zuerst: Es zeigt, worum es geht, bevor der Text es erklaert. */ .evi__medium { order: -1; } .evi__telefon { inline-size: 240px; } .evi__knopf { width: 100%; justify-content: center; } .evi__betreiber { max-width: none; } } /* END_SECTION:startseite-evi */ /* START_SECTION:startseite-fuss (INDEX:150) */ .fuss-sektion::before { background: #FFFFFF; } .fuss-sektion { border-block-start: 1px solid #EFEEF4; } .fuss { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 44px 56px 28px; } .fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } .fuss__marke { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .fuss__logo { display: block; height: 32px; width: auto; } .fuss__claim { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; color: #9C9AAE; } /* 340 statt 300: Der Satz ist seit dem 20.08.2026 länger (drei Teile statt zwei). Bei 300px stand er neun Zeilen hoch neben vier flachen Spalten. Breiter geht nicht — die Spalte selbst ist rund 380px. */ .fuss__satz { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: #8B89A0; max-width: 340px; text-wrap: pretty; } .fuss__spalte { display: flex; flex-direction: column; gap: 10px; } .fuss__spalte-titel { font-size: 16px; font-weight: 600; color: #201F31; } .fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } /* 44px, nicht 28. Gemessen am 20.08.2026: Achtzehn Links im Fussbereich waren 275x28 — zu flach fuer einen Daumen. Hier stehen Impressum, Datenschutz und die Kuendigungsschaltflaeche; das sind genau die Links, die jemand im Zweifel trifft oder eben nicht. */ .fuss__link { display: flex; align-items: center; min-height: 44px; padding-block: 4px; font-size: 16px; line-height: 1.45; color: #5A5870; text-decoration: none; } a.fuss__link:hover { color: #5B5FC7; text-decoration: underline; } .fuss__link--tot { color: #A9A7B8; cursor: default; } .fuss__schluss { margin: 40px 0 0; padding-block-start: 24px; border-block-start: 1px solid #EFEEF4; font-size: 15px; line-height: 1.5; color: #9C9AAE; } @media (max-width: 1000px) { .fuss__raster { grid-template-columns: 1fr 1fr; gap: 32px; } .fuss__marke { grid-column: 1 / -1; } } @media (max-width: 700px) { .fuss { padding: 28px 20px 32px; } .fuss__raster { grid-template-columns: 1fr; gap: 28px; } /* Tippfläche 48 — im Fussbereich sitzen die Rechtslinks, die jemand im Zweifel mit dem Daumen trifft. */ .fuss__link { min-height: 48px; display: flex; align-items: center; font-size: 16px; } .fuss__satz { max-width: none; } } /* ── Untere Leiste ── */ .fuss__leiste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-block-start: 36px; padding-block-start: 28px; border-block-start: 1px solid #EFEEF4; } .fuss__leisten-titel { font-size: 16px; font-weight: 600; color: #201F31; } .fuss__leisten-text { display: block; margin-block-start: 4px; font-size: 15px; line-height: 1.55; color: #5A5870; max-width: 46ch; } .fuss__newsletter { display: flex; flex-direction: column; gap: 6px; } .fuss__nl-form { display: flex; gap: 10px; margin-block-start: 8px; flex-wrap: wrap; } .fuss__nl-feld { flex: 1 1 220px; min-height: 48px; padding: 12px 18px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-size: 16px; color: #201F31; } .fuss__nl-feld:focus-visible { outline: 2px solid #5B5FC7; outline-offset: 2px; } .fuss__nl-knopf { min-height: 48px; padding: 12px 26px; border: 0; border-radius: 999px; background: #201F31; color: #FFFFFF; font-size: 16px; font-weight: 500; cursor: pointer; } .fuss__nl-knopf:hover { background: #3B3A50; } .fuss__nl-hinweis { font-size: 14px; line-height: 1.5; color: #9C9AAE; max-width: 52ch; } .fuss__nl-danke { flex: 1 1 100%; font-size: 15px; color: #3F6A5B; } .fuss__nl-fehler { flex: 1 1 100%; font-size: 15px; color: #8A5457; } .fuss__zahlung { display: flex; flex-direction: column; gap: 10px; } .fuss__zahlarten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .fuss__zahlarten svg { display: block; block-size: 24px; inline-size: auto; } /* Widerruf, Kuendigung, Cookies und B2B als benannte Schaltflaechen — nicht als Zeile im Fliesstext. */ .fuss__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 24px; } .fuss__knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 11px 20px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 15px; font-weight: 500; color: #201F31; text-decoration: none; cursor: pointer; } a.fuss__knopf:hover, button.fuss__knopf:hover { border-color: #5B5FC7; color: #5B5FC7; } .fuss__knopf--tot { color: #A9A7B8; background: #F7F6FB; cursor: default; } .fuss__unten { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-block-start: 24px; padding-block-start: 20px; border-block-start: 1px solid #EFEEF4; } .fuss__anschrift { display: flex; flex-direction: column; gap: 6px; } .fuss__adresse { margin: 0; font-size: 14px; line-height: 1.6; color: #8B89A0; } .fuss__copy { margin: 0; font-size: 14px; color: #9C9AAE; } .fuss__rechts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fuss__netze { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; } .fuss__netz { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #DEDCE8; border-radius: 999px; font-size: 15px; color: #201F31; text-decoration: none; } .fuss__netz:hover { border-color: #5B5FC7; color: #5B5FC7; } .fuss__sprachwahl { min-height: 44px; padding: 10px 16px; border: 1px solid #DEDCE8; border-radius: 999px; background: #FFFFFF; font-family: inherit; font-size: 15px; color: #201F31; } @media (max-width: 900px) { .fuss__leiste { grid-template-columns: 1fr; gap: 28px; } .fuss__unten { flex-direction: column; align-items: flex-start; } } /* Das Theme kennt .visually-hidden nicht — die Beschriftungen standen sichtbar ueber den Feldern. Eigene Fassung, gemessen am 22.08.2026. */ .fuss .visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* END_SECTION:startseite-fuss */ /* START_SECTION:startseite-kategorien (INDEX:151) */ .kat-sektion::before { background: rgb(var(--color-background)); } .kat { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .kat__kopf { display: flex; flex-direction: column; gap: 16px; padding-inline-end: 24px; } .kat__untertitel { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--color-foreground) / .72); } .kat__h2 { /* 40px, nicht 36 — so steht es im Entwurf und so machen es alle anderen Abschnitte. Der Wert war als einziger abgewichen. Nachgemessen am 19.08.2026 beim Abgleich mit ORY Startseite.dc.html. */ margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: rgb(var(--color-foreground)); } .kat__knopf { align-self: flex-start; margin-block-start: 6px; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 26px; border-radius: 999px; text-decoration: none; background: var(--ory-violett); color: #fff; font-size: 16px; font-weight: 500; } .kat__knopf:hover { filter: brightness(1.08); } .kat__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; } .kachel { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; } .kachel__bild { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; } .kachel__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } /* Solange kein Foto da ist: schraffierte Flaeche mit der Anforderung darin. So sieht man auf einen Blick, was fehlt und in welchem Format. */ .kachel__bild--leer { display: grid; place-items: center; padding: 18px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .kachel__fehlt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.5; letter-spacing: .04em; text-align: center; color: #7C7A92; background: rgb(255 255 255 / .82); border-radius: 12px; padding: 8px 12px; } .kachel__text { display: flex; flex-direction: column; gap: 8px; } /* Titel UEBER dem Bild — so zeigt es der Entwurf. */ .kachel__titel { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: rgb(var(--color-foreground)); } .kachel__satz { margin: 0; font-size: 16px; line-height: 1.5; color: rgb(var(--color-foreground) / .72); } .kachel__link { font-size: 16px; font-weight: 500; color: var(--ory-violett); } .kachel:hover .kachel__link { text-decoration: underline; } @media (max-width: 1100px) { .kat__raster { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; } } @media (max-width: 700px) { .kat { padding: 40px 20px; } .kat__h2 { font-size: 23px; } .kat__kopf { padding-inline-end: 0; } .kat__knopf { width: 100%; justify-content: center; } .kat__raster { grid-template-columns: 1fr; gap: 28px; } .kachel__titel { font-size: 18px; } .kachel__satz { font-size: 16px; } } /* END_SECTION:startseite-kategorien */ /* START_SECTION:startseite-kopf (INDEX:152) */ /* ── Suchkarte (Abschnitt 2) ──────────────────────────────────────────── */ .sus { margin-block-start: var(--sp-2); background: rgb(var(--color-background)); border: 1px solid #E7E5EF; border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 18px 44px rgb(91 95 199 / .08); } .sus__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .sus__frage { font-size: 16px; font-weight: 500; color: rgb(var(--color-foreground)); } .sus__modi { display: flex; background: #F3F2F8; border-radius: 999px; padding: 4px; gap: 4px; } .sus__modus { /* 44px statt der 33px des Entwurfs — Tastflaeche geht vor Optik. */ min-height: 44px; padding-inline: 16px; font: inherit; font-size: 14px; border: 0; border-radius: 999px; background: transparent; color: #6A6880; cursor: pointer; white-space: nowrap; } .sus__modus.is-an { background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); } .sus__zeile { position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid #DEDCE8; border-radius: 999px; padding: 6px 6px 6px 22px; background: rgb(var(--color-background)); } .sus__feld { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0; /* 16px verhindert das Hineinzoomen von iOS beim Antippen. */ font-size: max(16px, 1rem); color: rgb(var(--color-foreground)); min-height: 44px; } .sus__feld:focus { outline: none; } .sus__zeile:focus-within { border-color: rgb(var(--color-foreground) / .45); } .sus__knopf { flex: 0 0 auto; min-height: 44px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; background: var(--ory-violett); color: #fff; font-size: 15px; font-weight: 500; } .sus__knopf:hover { filter: brightness(1.08); } .sus__liste { position: absolute; inset-inline: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: var(--sp-1) 0; list-style: none; text-align: start; background: rgb(var(--color-background)); border: 1px solid #DEDCE8; border-radius: 20px; box-shadow: 0 12px 32px rgb(0 0 0 / .10); max-height: 17rem; overflow-y: auto; } .sus__treffer { padding: 11px 22px; font-size: 15px; cursor: pointer; } .sus__treffer:hover, .sus__treffer.is-an { background: #F3F2F8; } .sus__chips { display: flex; flex-wrap: wrap; gap: 8px; } .sus-chip { min-height: 44px; padding-inline: 15px; font: inherit; font-size: 14px; color: #3B3A50; background: #F6F5FA; border: 1px solid #EBE9F2; border-radius: 999px; cursor: pointer; } .sus-chip:hover { background: #F0EFF9; border-color: #D6D3EA; } .sus__meldung { margin: 0; font-size: 14px; color: rgb(var(--color-foreground) / .85); } .sus__fuss { margin: 0; display: flex; gap: 8px; align-items: start; font-size: 13px; line-height: 1.45; color: #8B89A0; } .sus__pfeil { font-family: 'IBM Plex Mono', ui-monospace, monospace; } @media (max-width: 900px) { .sus { padding: 18px; border-radius: 22px; } .sus__kopf { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .sus__modi { width: 100%; } .sus__modus { flex: 1; } .sus__zeile { flex-wrap: wrap; border-radius: 22px; padding: 14px 18px; gap: var(--sp-2); } .sus__knopf { width: 100%; } .sus__liste { border-radius: 18px; } } /* DER VERLAUF GEHOERT AUF DAS ::before, NICHT AUF DIE SEKTION. `.section::before` ist die Hintergrundflaeche des Themes (theme.css 4992): absolut positioniert, inset 0, deckende Hintergrundfarbe. Ein `background` auf `.section` selbst liegt DARUNTER und ist unsichtbar — am 11.08.2026 gemessen, die Flaeche blieb weiss. Dieselbe Falle wie beim verschwundenen Inhalt, nur in die andere Richtung: dort lag das ::before ueber dem Text, hier ueber der Farbe. */ .kopf-sektion::before { background: var(--ory-verlauf); } .kopf { /* Pflicht — siehe Kommentar oben. */ position: relative; z-index: 1; /* `stretch` statt `start`: Das Video soll unten mit der Suchkarte abschliessen, nicht darueber enden. Angeordnet am 13.08.2026. */ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; /* BREITER ALS DIE UEBRIGEN ABSCHNITTE — angeordnet am 13.08.2026. 1440 -> 1800px, also je Spalte rund 180px mehr: der Textblock waechst nach links, das Video nach rechts. Der Rest der Seite bleibt bei 1440px; nur der Kopfbereich traegt die groessere Breite, weil dort zwei grosse Flaechen nebeneinander stehen. */ /* 1280 statt 1800 — gemessen am 22.08.2026 bei 1440px Fenster. Alle anderen Baender der Startseite standen laengst auf 1280, nur der Kopf lief mit 1800 randlos durch. Deshalb sah die Startseite breiter aus als jede Unterseite. Beim Breiten-Durchgang uebersehen, weil dort nach 1440 und 1328 gesucht wurde, nicht nach 1800. */ max-width: 1280px; margin-inline: auto; padding: 56px 56px 48px; } .kopf__text { display: flex; flex-direction: column; gap: var(--sp-6); } .kopf__h1 { margin: 0; font-size: 46px; line-height: 1.04; letter-spacing: -0.028em; font-weight: 600; color: rgb(var(--color-foreground)); text-wrap: pretty; } .kopf__untertitel { margin: 0; max-width: 520px; font-size: 17px; line-height: 1.55; color: rgb(var(--color-foreground) / .72); text-wrap: pretty; } .kopf__medium { display: flex; flex-direction: column; gap: var(--sp-3); } /* Der Film nimmt die Hoehe der linken Spalte; die Bildzeile bleibt darunter. */ .kopf__video--film { flex: 1; min-block-size: 0; aspect-ratio: auto; } .kopf__video { position: relative; aspect-ratio: 4 / 3; border-radius: 28px; overflow: hidden; display: grid; place-items: center; /* Der Verlauf als schmaler Rahmen — zweite der drei erlaubten Stellen. */ border: 2px solid transparent; background: linear-gradient(rgb(var(--color-background)), rgb(var(--color-background))) padding-box, var(--ory-verlauf) border-box; } .kopf__video-bild { width: 100%; height: 100%; object-fit: cover; display: block; } .kopf__video--film { display: block; } .kopf__film { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .kopf__video--leer { background: repeating-linear-gradient(135deg, rgb(var(--color-foreground) / .04) 0 8px, rgb(var(--color-foreground) / 0) 8px 16px) padding-box, var(--ory-verlauf) border-box; gap: var(--sp-4); padding: var(--sp-6); } .kopf__abspielen { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 999px; background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); box-shadow: 0 6px 20px rgb(0 0 0 / .12); } .kopf__video-bild + .kopf__abspielen { position: absolute; } .kopf__fehlt { margin: 0; text-align: center; max-width: 34rem; font-size: var(--text-xs); line-height: 1.5; color: rgb(var(--color-foreground) / .6); } .kopf__bildzeile { margin: 0; font-size: var(--text-sm); color: rgb(var(--color-foreground) / .6); } /* Ab hier eine Spalte. Der Entwurf zeigt Handy bei 390 px; der Umbruch liegt frueher, weil zwei Spalten unter rund 900 px zu schmal werden. */ @media (max-width: 900px) { .kopf { grid-template-columns: 1fr; gap: var(--sp-8); padding: 28px 20px 32px; } .kopf__h1 { font-size: 28px; line-height: 1.1; letter-spacing: -0.025em; } .kopf__untertitel { font-size: 16px; } .kopf__video { aspect-ratio: 16 / 10; } } /* END_SECTION:startseite-kopf */ /* START_SECTION:startseite-labore (INDEX:153) */ .lab-sektion::before { background: rgb(var(--color-background)); } .lab { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; } .lab__titelblock { display: flex; flex-direction: column; gap: 14px; } .lab__bild { margin-block-start: 12px; max-inline-size: 440px; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; } .lab__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .lab__absaetze { display: flex; flex-direction: column; } .lab__absatz { padding-block: 26px; border-block-start: 1px solid #EFEEF4; } .lab__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .lab__h2 { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: rgb(var(--color-foreground)); } .lab__satz { margin: 0; font-size: 16px; line-height: 1.65; color: #3B3A50; max-width: 680px; text-wrap: pretty; } @media (max-width: 900px) { .lab { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 700px) { .lab { padding: 40px 20px; } .lab__satz { font-size: 16px; } .lab__h2 { font-size: 23px; } } /* END_SECTION:startseite-labore */ /* START_SECTION:startseite-team (INDEX:154) */ .team-sektion::before { background: rgb(var(--color-background)); } .team { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } .team__kopf { display: flex; flex-direction: column; gap: 12px; max-width: 620px; margin-block-end: 30px; } .team__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .team__h2 { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: rgb(var(--color-foreground)); } .team__untertitel { margin: 0; font-size: 16px; line-height: 1.6; color: rgb(var(--color-foreground) / .72); } .team__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .person { display: flex; flex-direction: column; gap: 14px; } .person__bild { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; } .person__foto { inline-size: 100%; block-size: 100%; display: block; object-fit: cover; /* Siehe Kommentar oben: im Zweifel unten beschneiden, nicht am Kopf. */ object-position: center top; } .person__bild--leer { display: flex; align-items: flex-end; padding: 14px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .person__fehlt { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .03em; color: #7C7A92; background: rgb(255 255 255 / .82); border-radius: 10px; padding: 6px 10px; } .person__text { display: flex; flex-direction: column; gap: 4px; } .person__name { font-size: 16px; font-weight: 500; color: rgb(var(--color-foreground)); } .person__rolle { font-size: 15px; line-height: 1.5; color: rgb(var(--color-foreground) / .72); } @media (max-width: 1000px) { .team__raster { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .team { padding: 40px 20px; } .team__h2 { font-size: 23px; } .team__untertitel { font-size: 16px; } .team__kopf { margin-block-end: 28px; } .team__raster { gap: 16px; } .person__name { font-size: 16px; } .person__rolle { font-size: 14px; } } /* END_SECTION:startseite-team */ /* START_SECTION:startseite-vision (INDEX:155) */ .vis-sektion::before { background: rgb(var(--color-background)); } .vis-sektion { border-block-start: 1px solid #EFEEF4; } .vis { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: start; } .vis__marke-block { display: flex; flex-direction: column; gap: 14px; } .vis__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .vis__strich { inline-size: 120px; block-size: 6px; border-radius: 999px; background: var(--ory-verlauf); } /* Ueber beide Spalten. 21:9 ergibt auf 1440px rund 570px Hoehe — das ist viel, aber hier richtig: Das Band schliesst den Abschnitt ab, es steht nicht neben dem Satz in Konkurrenz. Auf 375px 16:9, sonst waeren es 144px und die Landschaft nicht mehr lesbar. */ .vis__band { grid-column: 1 / -1; margin-block-start: 32px; aspect-ratio: 21 / 9; border-radius: 20px; overflow: hidden; } .vis__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .vis__satz { margin: 0; font-size: 21px; line-height: 1.45; letter-spacing: -0.012em; color: rgb(var(--color-foreground)); text-wrap: pretty; } @media (max-width: 900px) { .vis { grid-template-columns: 1fr; gap: 20px; padding: 40px 20px; } .vis__satz { font-size: 17px; line-height: 1.5; } .vis__band { margin-block-start: 28px; aspect-ratio: 16 / 9; border-radius: 16px; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .vis .vis__strich { display: block; } /* END_SECTION:startseite-vision */ /* START_SECTION:startseite-wege (INDEX:156) */ .wege-sektion::before { background: #FFFFFF; } .wege { position: relative; z-index: 1; max-width: 1280px; margin-inline: auto; padding: 64px 56px; } /* Zwei Bänder, jedes links Erklärung, rechts die Angebote. Das zweite bekommt oben eine Linie statt eines eigenen Streifens — der Verlauf steht auf dieser Seite nur dreimal. */ .wege__band { position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 44px; align-items: start; } .wege__band + .wege__band { margin-block-start: 56px; padding-block-start: 56px; border-block-start: 1px solid #EFEEF4; } .wege__streifen { position: absolute; inset-block-start: -20px; inset-inline-start: 0; inline-size: 120px; block-size: 6px; border-radius: 999px; background: var(--ory-verlauf); } .wege__erklaerung { display: flex; flex-direction: column; gap: 12px; } .wege__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8B89A0; } .wege__h2 { margin: 0; font-size: 32px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 600; color: #201F31; } .wege__text { margin: 0; font-size: 17px; line-height: 1.6; color: #5A5870; text-wrap: pretty; } .wege__notiz { margin: 0; font-size: 15px; line-height: 1.55; color: #8B89A0; } .wege__bild { aspect-ratio: 3 / 2; border-radius: 20px; overflow: hidden; margin-block-start: 4px; } .wege__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .wege__bild--leer { display: grid; place-items: center; padding: 14px; background: repeating-linear-gradient(135deg, #E9E7F1 0 9px, #F4F3F9 9px 18px); } .wege__motiv { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.45; text-align: center; color: #7C7A92; } .wege__knopf { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; margin-block-start: 4px; padding: 13px 26px; border-radius: 999px; background: #5B5FC7; color: #FFFFFF; font-size: 16px; font-weight: 500; text-decoration: none; } .wege__knopf:hover { background: #4A4EB4; } .wege__knopf--tot { background: #EFEEF4; color: #A9A7B8; } .wege__karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .karte { display: flex; flex-direction: column; background: #FBFAFC; border: 1px solid #EBE9F2; border-radius: 24px; overflow: hidden; } .karte--hell { background: #FFFFFF; } .karte__bild { display: block; aspect-ratio: 4 / 3; background: #F4F3F9; } .karte__foto { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .karte__inhalt { display: flex; flex-direction: column; gap: 8px; padding: 24px; flex: 1; } .karte__marke { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; color: #8B89A0; } .karte__titel { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; color: #201F31; } .karte__preiszeile { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .karte__preis { font-size: 26px; font-weight: 600; color: #5B5FC7; } .karte__laufzeit { font-size: 15px; color: #5A5870; } .karte__zusatz { font-size: 14px; color: #8B89A0; } .karte__leitsatz { margin: 6px 0 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: #201F31; } .karte__text { margin: 0; font-size: 15px; line-height: 1.55; color: #5A5870; } .karte__knopf { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-block-start: auto; padding-block-start: 0; border: 1px solid #201F31; border-radius: 999px; background: #FFFFFF; font-size: 15px; font-weight: 500; color: #201F31; text-decoration: none; } .karte__knopf:hover { background: #201F31; color: #FFFFFF; } .karte__knopf--voll { background: #5B5FC7; border-color: #5B5FC7; color: #FFFFFF; } .karte__knopf--voll:hover { background: #4A4EB4; border-color: #4A4EB4; color: #FFFFFF; } .karte__knopf--tot { border-color: #DEDCE8; color: #A9A7B8; background: #F7F6FB; } /* Abstand zwischen Text und Knopf, ohne dass der Knopf klebt, wenn eine Karte kürzer ist als die andere. */ .karte__text + .karte__knopf, .karte__leitsatz + .karte__knopf { margin-block-start: 14px; } @media (max-width: 1100px) { .wege__band { grid-template-columns: 1fr; gap: 28px; } .wege__bild { aspect-ratio: 16 / 9; } } @media (max-width: 700px) { .wege { padding: 40px 20px; } .wege__h2 { font-size: 24px; } .wege__karten { grid-template-columns: 1fr; } .wege__band + .wege__band { margin-block-start: 36px; padding-block-start: 36px; } .karte__inhalt { padding: 20px; } .karte__preis { font-size: 23px; } } /* ══ DAS THEME BLENDET LEERE ELEMENTE AUS ══ 22.08.2026 theme.css enthaelt: a:empty, ul:empty, dl:empty, div:empty, section:empty, article:empty, p:empty, h1:empty … h6:empty { display: none } Jedes rein dekorative, leere
    ist damit unsichtbar — der Verlaufsstrich unter den Ueberschriften, die Balkenfuellung, die Abschlusslinie. Gefunden, weil ein Balken 91 % breit sein sollte und 0 Pixel gemessen wurde. Im HTML stand er die ganze Zeit. Zwei Klassen hintereinander schlagen div:empty in der Spezifitaet. */ .wege .wege__streifen { display: block; } /* END_SECTION:startseite-wege */ /* START_SECTION:supplement-akkordeon (INDEX:157) */ /* Wofür-Claims — drei Kacheln nebeneinander, Tag als Pille wie das Produkt-Etikett, siehe Entwurf Z. 226–233. */ .od__claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 4px 0; } .od__claim { background: var(--od-flach); border: 1px solid var(--od-rand); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 8px; } .od__claim-tag { display: inline-block; align-self: flex-start; font-family: var(--font-body-family, Inter, sans-serif); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--od-text-2); background: var(--od-akzent-flaeche, linear-gradient(120deg,#F8E9E9 0%,#EDEAF4 45%,#E4F3EE 100%)); border-radius: 999px; padding: 5px 11px; } .od__claim-d { font-size: 16px; line-height: 1.55; color: var(--od-text-2); } /* Strichlisten — Verzehrempfehlung, Herkunft, Pflichthinweise. Fund 19.08.2026: feste 16px wirkten neben dem Fliesstext (der die od-schrift-Skala nutzt, siehe .od__falt-inhalt p in ory-diagnostik.css) deutlich zu klein. Gleiche Formel wie dort — 16–21px, mit dem Viewport skaliert — statt eines eigenen festen Werts. */ .od__strichliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .od__strichliste li { display: flex; gap: 10px; font-size: clamp(16px, calc(1.181vw * var(--od-schrift, 1)), calc(21px * var(--od-schrift, 1))); line-height: 1.55; color: var(--od-text-2); } .od__strichliste li::before { content: '—'; color: var(--od-kauf-knopf, #D98B92); flex: 0 0 auto; } .od__strichliste--grau li::before { color: var(--od-soft-2, #9C9AAE); } /* Herkunft — Foto links, Text rechts; ohne Foto einspaltig, wie beim Anleitungs-/Befund-Muster in diagnostik-akkordeon.liquid. */ .od__herkunft { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 32px; align-items: start; } .od__herkunft--ohne-bild { grid-template-columns: 1fr; } .od__herkunft-bild { margin: 0; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; background: var(--od-flaeche); } .od__herkunft-bild img { display: block; width: 100%; height: 100%; object-fit: cover; } .od__herkunft-text { display: flex; flex-direction: column; gap: 14px; } /* Passende Analysen — zwei Karten, schlicht wie ein Fakten-Feld. */ .od__analysen-karten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .od__analysen-karte { background: var(--od-flach); border: 1px solid var(--od-rand); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; transition: border-color .18s ease; } .od__analysen-karte:hover { border-color: #DEDCE8; } .od__analysen-name { font-size: 19px; font-weight: 500; color: var(--od-text); } .od__analysen-meta { font-size: 15px; line-height: 1.5; color: var(--od-mid); } .od__analysen-preis { font-size: 18px; font-weight: 600; color: var(--od-akzent); margin-top: 4px; } /* Tabelle mit sichtbarem Rand statt der randlosen Fakten-Tabelle im Kaufbereich — Entwurf Z. 198 „background:#FBFAFC; border:1px solid". */ .od__fakten--rand { background: var(--od-flach); border: 1px solid var(--od-rand); border-radius: 24px; overflow: hidden; } .od__fakten--rand th, .od__fakten--rand td { padding: 18px 24px; } @media (max-width: 900px) { .od__claims { grid-template-columns: 1fr; } .od__analysen-karten { grid-template-columns: 1fr; } .od__herkunft { grid-template-columns: 1fr; } } /* END_SECTION:supplement-akkordeon */ /* START_SECTION:supplement-kauf (INDEX:158) */ /* Merkmalsleiste — dieselben Regeln wie in diagnostik-kauf.liquid, hier noetig kopiert statt geteilt (Projektkonvention: designspezifisches CSS bleibt in der Sektion, nicht in ory-diagnostik.css). Fund 19.08.2026: ohne diesen Block fehlte das Grid komplett (grid-template-columns: none) und die Bilder liefen auf ihre HTML-Groesse (176px statt 88px). */ .od__merkmale { display: grid; grid-template-columns: repeat(var(--merkmal-anzahl, 5), 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; } .od__merkmal { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; } .od__merkmal:not(.od__merkmal--bild)::before { content: ''; width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; background: linear-gradient(120deg, #F8E9E9 0%, #EDEAF4 45%, #E4F3EE 100%); } .od__merkmal--bild img { width: 88px; height: 88px; border-radius: 20px; flex: 0 0 auto; object-fit: cover; display: block; } .od__merkmal-t { font-size: clamp(15px, calc(1.181vw * var(--od-schrift, 1)), calc(23px * var(--od-schrift, 1))); line-height: 1.35; font-weight: 500; color: var(--od-text, #201F31); } .od__merkmal-d { font-size: clamp(13px, calc(1.042vw * var(--od-schrift, 1)), calc(20px * var(--od-schrift, 1))); line-height: 1.45; color: var(--od-soft, #8B89A0); } @media (max-width: 900px) { .od__merkmale { grid-template-columns: 1fr 1fr; gap: 22px; } .od__merkmal-t { font-size: 15px; } .od__merkmal-d { font-size: 13px; } } /* Zugelassene Angaben (Health Claims) — eigenes Verlaufsband, Export 19.08.2026 Z. 124–141. Weisse Karten auf dem Verlaufshintergrund, damit sie sich vom Band abheben — anders als .od__claim (im Akkordeon), das auf hellem Grund liegt und deshalb --od-flach nutzt. BEWUSST KEIN eigenes `.od-band { padding }`: die Basisregel in ory-diagnostik.css setzt bereits `padding-block: clamp(56px,…,112px)` auf ALLE `.od-band`-Elemente — ein zweites hier wuerde, weil dieses Stylesheet als Sektions-Block frueher laedt als die verlinkte Datei, dieselbe Lade-Reihenfolge-Falle wiederholen, die am 17.08.2026 schon einmal Layout kaputt gemacht hat. */ .od__claims-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 26px; } .od__claims-kopf-text { display: flex; flex-direction: column; gap: 10px; } .od__claims-titel { margin: 0; font-size: clamp(22px, calc(2.222vw * var(--od-schrift, 1)), calc(32px * var(--od-schrift, 1))); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; color: var(--od-text); } .od__claims-bedingung { font-size: 14px; line-height: 1.55; color: var(--od-text-2); max-width: 300px; flex: 0 0 auto; } .od__claims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .od__claim { border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 12px; } .od__claim--weiss { background: var(--od-weiss); } .od__claim-tag { font-family: var(--font-body-family, Inter, sans-serif); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--od-mid); } .od__claim-d { font-size: 19px; line-height: 1.45; color: var(--od-text); font-weight: 500; } @media (max-width: 900px) { .od__claims-kopf { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .od__claims-bedingung { max-width: none; order: 3; } .od__claims { grid-template-columns: 1fr; } .od__claim-d { font-size: 17px; } } /* LUFT ZWISCHEN DEN KAUFKNOEPFEN AUF DEM HANDY. In ory-diagnostik.css steht ab 700px `.od__kaufzeile { display: block }` und `.od__kaufzeile form { display: block }`. Damit stehen 'In den Warenkorb' und 'Naehrwerte ansehen' direkt aufeinander, ohne Abstand — gemeldet am 20.08.2026 vom Bildschirmfoto eines Telefons. Behoben wird es HIER und nicht in ory-diagnostik.css: Diese Datei traegt fremde, nicht committete Aenderungen aus dem Produktvorlagen- Strang. Eine Sektionsregel wirkt nur auf dieser Sektion und kommt niemandem in die Quere. Der Umriss-Knopf wird zugleich auf volle Breite gesetzt — zwei gleich breite Knoepfe untereinander lesen sich als Paar, ein schmaler unter einem breiten sieht nach Versehen aus. */ @media (max-width: 700px) { .od__kaufzeile form { margin-block-end: 12px; } .od__kaufzeile .od__knopf-umriss { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: 52px; } .od__kaufzeile .od__knopf-fuss { margin-block-start: 14px; } } /* END_SECTION:supplement-kauf */ /* START_SECTION:symptom-einstieg (INDEX:159) */ /* z-index: 1 IST PFLICHT, NICHT KOSMETIK. `.section::before` des Themes (theme.css 4992) ist die Hintergrundflaeche: position:absolute, inset:0, deckende Hintergrundfarbe. Als positioniertes Element wird sie NACH allen statischen Kindern gemalt — also darueber. Sichtbar bleibt nur, was selbst positioniert ist. Genau das war der Fehler vom 09.08.2026: Eingabefeld und Knopf waren zu sehen (beide positioniert), Ueberschrift, Chips und Hinweis nicht. Die DOM-Messung zeigte nichts davon — opacity 1, Farbe dunkel, und `elementFromPoint` findet Pseudoelemente grundsaetzlich nicht. Erst der Blick auf `getComputedStyle(el, '::before')` brachte es. Wer hier eine neue Sektion auf `.section` aufbaut, braucht dieselbe Zeile. */ .se { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; padding-inline: var(--sp-4); text-align: center; } .se__ueberschrift { margin-block-end: var(--sp-2); } .se__untertitel { color: rgb(var(--color-foreground) / .75); margin-block-end: var(--sp-4); } .se__label { display: block; font-size: var(--text-sm); color: rgb(var(--color-foreground) / .7); margin-block-end: var(--sp-1d5); text-align: start; } .se__zeile { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-start; } .se__eingabe { position: relative; flex: 1 1 16rem; } /* Rahmen ausdruecklich setzen: Das Theme gibt `input` keinen. Ohne ihn schwebt nur der Platzhaltertext im Weissen — am 09.08.2026 vom Auftraggeber als fehlend gemeldet. 16px verhindert das Hineinzoomen von iOS beim Antippen. */ .se__feld { width: 100%; min-height: 52px; padding-inline: var(--sp-3); font-size: max(16px, var(--text-base)); border: 1px solid rgb(var(--color-foreground) / .25); border-radius: var(--style-border-radius-inputs, 8px); background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); } .se__feld:focus-visible { outline: 2px solid rgb(var(--color-foreground) / .6); outline-offset: 1px; border-color: transparent; } .se__knopf { min-height: 52px; flex: 0 0 auto; } /* Vorschlagsliste — liegt über allem, was darunter kommt. */ .se__liste { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: var(--sp-1) 0; list-style: none; background: rgb(var(--color-background)); border: 1px solid rgb(var(--color-border)); border-radius: var(--style-border-radius-inputs, 8px); box-shadow: 0 8px 24px rgb(0 0 0 / .12); max-height: 17rem; overflow-y: auto; text-align: start; } .se__treffer { padding: 10px var(--sp-3); cursor: pointer; font-size: var(--text-sm); } .se__treffer:hover, .se__treffer.is-an { background: rgb(var(--color-foreground) / .07); } .se__gewaehlt { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-block-start: var(--sp-2); justify-content: flex-start; } .se-gewaehlt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); padding: 7px var(--sp-2); border-radius: 999px; border: 1px solid rgb(var(--color-foreground)); background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); cursor: pointer; } .se-gewaehlt__x { font-size: 1.1em; line-height: 1; opacity: .75; } .se__meldung { font-size: var(--text-sm); margin-block-start: var(--sp-2); text-align: start; color: rgb(var(--color-foreground) / .85); } .se__chips-label { font-size: var(--text-sm); color: rgb(var(--color-foreground) / .6); margin-block: var(--sp-3) var(--sp-1d5); text-align: start; } .se__chips { display: flex; flex-wrap: wrap; gap: var(--sp-1d5); justify-content: flex-start; } .se-chip { font-size: var(--text-sm); padding: 9px var(--sp-2d5); border: 1px solid rgb(var(--color-border)); border-radius: 999px; background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); cursor: pointer; } .se-chip:hover { border-color: rgb(var(--color-foreground) / .5); } .se-chip[aria-pressed="true"] { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); border-color: rgb(var(--color-foreground)); } .se__hinweis { font-size: var(--text-xs); color: rgb(var(--color-foreground) / .55); margin-block-start: var(--sp-3); text-align: start; } @media (max-width: 480px) { .se { padding-inline: var(--sp-3); } .se__knopf { flex: 1 1 100%; } } /* END_SECTION:symptom-einstieg */ /* START_SECTION:vertrauen-labore (INDEX:165) */ /* z-index: 1 ist Pflicht — `.section::before` (theme.css 4992) ist eine deckende, absolut positionierte Flaeche und wird sonst UEBER den statischen Inhalt gemalt. Siehe symptom-einstieg.liquid, 09.08.2026. */ .vl { position: relative; z-index: 1; max-width: 52rem; margin-inline: auto; padding-inline: var(--sp-4); } .vl__ueberschrift { margin-block-end: var(--sp-2); } .vl__einleitung { color: rgb(var(--color-foreground) / .75); margin-block-end: var(--sp-5); } .vl__labore { display: grid; gap: var(--sp-3); } .vl-labor { border-inline-start: 3px solid rgb(var(--color-foreground) / .18); padding-inline-start: var(--sp-3); } .vl-labor__name { font-weight: 500; margin: 0 0 var(--sp-1); } .vl-labor__nachweis { margin: 0; } .vl-labor__zusatz { font-size: var(--text-sm); color: rgb(var(--color-foreground) / .6); margin: var(--sp-1) 0 0; } .vl__fuss { font-size: var(--text-sm); color: rgb(var(--color-foreground) / .6); margin-block-start: var(--sp-4); padding-block-start: var(--sp-3); border-block-start: 1px solid rgb(var(--color-border-light)); } @media (max-width: 480px) { .vl { padding-inline: var(--sp-3); } } /* END_SECTION:vertrauen-labore */