/* ========================================================================== PKV Beitragsanalyse — gemeinsames Stylesheet für Variante A und B Kein Framework, kein Build. Alle Farben als Variablen auf :root. Schrift: Oxygen (Überschriften) / Heebo (Fließtext), Google Fonts + Fallback. ========================================================================== */ /* -------------------------------------------------------------------------- 1 — Design-Tokens -------------------------------------------------------------------------- */ :root { /* Markenfarben, exakt aus Logo/pkv-beitragsanalyse_logo_original.png ausgelesen */ --gruen-hell: #60EB04; --gruen: #41CE05; --gruen-dunkel: #169504; --gruen-gedaempft: #2DA806; --petrol: #045A69; --flaeche-hell: #E3E9F2; --flaeche-sehr-hell:#F5F7FA; --weiss: #FFFFFF; /* Abgeleitete Töne. Nur hier ableiten, nirgends im Stylesheet hart schreiben. --gruen-text ist eine dunklere Stufe derselben Hue, damit kleiner grüner Text auf Weiß den Kontrastwert 4.5:1 erreicht (5.5:1). Das Marken-Grün selbst ist Flächenfarbe, nie Textfarbe. */ --gruen-text: #0F7A03; --gruen-hover: #4ACB04; --petrol-tief: #033445; --petrol-leise: #3D6D80; --linie: #C9D4E0; --linie-zart: #E1E7EF; --warn: #8A4A00; --warn-flaeche: #FDF3E5; /* Typografie */ --schrift-headline: "Oxygen", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --schrift-text: "Heebo", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --t-h1: clamp(2.125rem, 1.15rem + 4.4vw, 3.75rem); /* 34px → 60px */ --t-h2: clamp(1.75rem, 1.15rem + 2.6vw, 2.625rem); /* 28px → 42px */ --t-h3: clamp(1.3125rem, 1.1rem + 0.9vw, 1.625rem); /* 21px → 26px */ --t-text: 1.1875rem; /* 19px — Fließtext, Vorgabe Stilvorlage */ --t-gross:clamp(1.1875rem, 1.05rem + 0.7vw, 1.375rem); --t-klein:1.0625rem; /* 17px — harte Untergrenze für Fließtext */ --t-mini: 1rem; /* 16px — nur Bildunterschriften, Legenden, Feld-Hilfetexte und Mikro-Label */ /* Raster */ --breite: 71.25rem; /* 1140px */ --breite-schmal: 46rem; --rand: clamp(1.25rem, 4vw, 2.5rem); --luft-abschnitt: clamp(3.5rem, 8vw, 7rem); --radius: 8px; /* CTA-Geometrie aus der Stilvorlage */ --radius-gross:14px; --radius-feld: 10px; --schatten-weich: 0 1px 2px rgba(4, 67, 89, .06), 0 8px 28px rgba(4, 67, 89, .08); --schatten-karte: 0 1px 2px rgba(4, 67, 89, .05), 0 18px 44px rgba(4, 67, 89, .10); --logo-h: 2.75rem; } /* -------------------------------------------------------------------------- 2 — Reset / Grundlagen -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--weiss); color: var(--petrol); font-family: var(--schrift-text); font-size: var(--t-text); line-height: 1.62; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } img { height: auto; border: 0; } h1, h2, h3, h4 { font-family: var(--schrift-headline); font-weight: 700; color: var(--petrol); margin: 0; letter-spacing: -0.015em; text-wrap: balance; /* Deutsche Komposita wie "Alterungsrückstellungen" sprengen sonst schmale Spalten. lang="de" steht am , die Silbentrennung greift dadurch. */ overflow-wrap: break-word; hyphens: auto; } h1 { font-size: var(--t-h1); line-height: 1.05; letter-spacing: -0.025em; } h2 { font-size: var(--t-h2); line-height: 1.12; } h3 { font-size: var(--t-h3); line-height: 1.22; } h4 { font-size: var(--t-gross); line-height: 1.3; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; } a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--gruen-text); } /* Sichtbarer Fokusring — überall, nicht wegoptimiert */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--gruen-text); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--gruen-hell); color: var(--petrol); } .nur-fuer-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .sprungmarke { position: absolute; left: var(--rand); top: -100px; z-index: 100; background: var(--petrol); color: var(--weiss); padding: .75rem 1.25rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; transition: top .15s ease; } .sprungmarke:focus { top: .75rem; color: var(--weiss); } /* -------------------------------------------------------------------------- 3 — Layout-Bausteine -------------------------------------------------------------------------- */ .behaelter { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .behaelter--schmal { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); } .abschnitt { padding-block: var(--luft-abschnitt); } .abschnitt--eng { padding-block: calc(var(--luft-abschnitt) * .62); } .abschnitt--hell { background: var(--flaeche-sehr-hell); } .abschnitt--flaeche { background: var(--flaeche-hell); } .abschnitt--dunkel { background: var(--petrol); color: var(--weiss); } .abschnitt--dunkel h2, .abschnitt--dunkel h3, .abschnitt--dunkel h4 { color: var(--weiss); } .abschnitt--dunkel a { color: var(--weiss); } .abschnitt__kopf { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); } .abschnitt__kopf--mitte { margin-inline: auto; text-align: center; } /* Kleines Label über der Überschrift — typografisch, kein Icon-Set */ .marker { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--schrift-headline); font-size: var(--t-mini); /* 15px */ font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--gruen-text); margin-bottom: 1rem; } .marker::before { content: ""; width: 1.75rem; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gruen-hell), var(--gruen-dunkel)); flex: none; } .abschnitt--dunkel .marker { color: var(--gruen-hell); } .abschnitt__kopf--mitte .marker { justify-content: center; } .vorspann { font-size: var(--t-gross); line-height: 1.55; margin-top: 1.25rem; max-width: 40rem; } .abschnitt__kopf--mitte .vorspann { margin-inline: auto; } .abschnitt--dunkel .vorspann { color: #DCE7EC; } .leise { color: var(--petrol-leise); } .abschnitt--dunkel .leise { color: #A9C2CC; } .klein { font-size: var(--t-klein); line-height: 1.55; } /* -------------------------------------------------------------------------- 4 — Kopfzeile und Logo -------------------------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie-zart); } .kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; } /* Das Logo-PNG hat breite weiße Ränder. Hier exakt beschnitten, damit die Wortmarke optisch bündig sitzt. Verhältnisse aus der Bilddatei gemessen. */ .marke { display: inline-block; text-decoration: none; flex: none; } .marke__rahmen { display: block; overflow: hidden; height: var(--logo-h); width: calc(var(--logo-h) * 2.613); } .marke__bild { display: block; height: calc(var(--logo-h) * 2.132); width: auto; max-width: none; margin: calc(var(--logo-h) * -0.501) calc(var(--logo-h) * -0.113) calc(var(--logo-h) * -0.631) calc(var(--logo-h) * -0.117); } .kopf__aktion { display: flex; align-items: center; gap: 1.25rem; } /* Auf kleinen Bildschirmen übernimmt das fixierte Band unten den CTA — der Kopf bleibt dadurch ruhig und das Logo bekommt Platz. */ .kopf__aktion .knopf { display: none; } @media (min-width: 46rem) { .kopf__aktion .knopf { display: inline-flex; } } .kopf__hinweis { display: none; font-size: var(--t-klein); font-weight: 500; color: var(--petrol-leise); } @media (min-width: 56.25rem) { .kopf__hinweis { display: block; } } /* -------------------------------------------------------------------------- 5 — Schaltflächen -------------------------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--schrift-text); font-size: 1rem; /* 16px, Vorgabe Stilvorlage */ font-weight: 700; line-height: 1.25; padding: 10px 22px; /* Vorgabe Stilvorlage */ min-height: 3rem; /* großes Touch-Ziel */ border-radius: var(--radius); /* 8px, Vorgabe Stilvorlage */ border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; } .knopf--haupt { background: var(--gruen-hell); color: var(--petrol); /* dunkler CTA-Text auf Grün, nicht weiß */ box-shadow: 0 2px 0 var(--gruen-dunkel); } .knopf--haupt:hover { background: var(--gruen-hover); color: var(--petrol); } .knopf--haupt:active { background: var(--gruen); transform: translateY(2px); box-shadow: 0 0 0 var(--gruen-dunkel); } .knopf--gross { font-size: 1.125rem; padding: 1rem 2rem; min-height: 3.5rem; } .knopf--rand { background: transparent; color: var(--petrol); border-color: var(--petrol); } .knopf--rand:hover { background: var(--petrol); color: var(--weiss); } .abschnitt--dunkel .knopf--rand { color: var(--weiss); border-color: rgba(255,255,255,.5); } .abschnitt--dunkel .knopf--rand:hover { background: var(--weiss); color: var(--petrol); } .knopf--voll { width: 100%; } .knopf__pfeil { flex: none; } /* -------------------------------------------------------------------------- 6 — Hero -------------------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(90rem 40rem at 8% -12%, #EFFBE6 0%, rgba(239,251,230,0) 62%), linear-gradient(180deg, var(--flaeche-sehr-hell) 0%, var(--weiss) 78%); padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--linie-zart); } /* Selbst gezeichneter Lupenbogen — greift die Logo-Form auf, dezent */ .hero__bogen { position: absolute; pointer-events: none; right: -14rem; top: -10rem; width: 44rem; opacity: .5; color: var(--gruen-hell); } @media (max-width: 61.99rem) { .hero__bogen { display: none; } } .hero__raster { display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); position: relative; } @media (min-width: 61.25rem) { .hero__raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: start; } .hero__raster--erklaerung { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } } .hero__text { max-width: 36rem; } .hero h1 { margin-bottom: 1.25rem; } .hero__vorspann { font-size: var(--t-gross); line-height: 1.55; } /* Zahlensprung — gestaltete Fläche statt Bild */ .sprung { display: inline-flex; align-items: stretch; gap: 0; margin: 1.75rem 0 0; border: 2px solid var(--petrol); border-radius: var(--radius-gross); background: var(--weiss); overflow: hidden; box-shadow: var(--schatten-weich); max-width: 100%; } .sprung__seite { padding: .9rem 1.15rem; min-width: 7.5rem; } .sprung__seite--neu { background: var(--petrol); color: var(--weiss); } .sprung__label { display: block; font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--petrol-leise); margin-bottom: .15rem; } .sprung__seite--neu .sprung__label { color: var(--gruen-hell); } .sprung__wert { display: block; font-family: var(--schrift-headline); font-weight: 700; font-size: clamp(1.5rem, 1.05rem + 2vw, 2.125rem); line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .sprung__seite--alt .sprung__wert { color: var(--petrol-leise); } .sprung__mitte { display: flex; align-items: center; padding-inline: .5rem; background: var(--flaeche-sehr-hell); border-inline: 2px solid var(--petrol); color: var(--gruen-dunkel); } .sprung__fuss { margin: .75rem 0 0; font-size: var(--t-klein); color: var(--petrol-leise); } /* -------------------------------------------------------------------------- 7 — Formularfelder (durchgestaltet, keine Standard-Inputs) -------------------------------------------------------------------------- */ .feldsatz { border: 0; margin: 0; padding: 0; min-width: 0; } .feldsatz__titel { font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-gross); padding: 0; margin: 0 0 1.25rem; } .felder { display: grid; gap: 1.15rem; } /* Bricht anhand der tatsächlich verfügbaren Breite um, nicht anhand des Viewports — der Rechner steht in Variante A in einer schmalen Spalte. */ .felder--zwei { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); } /* Flex-Spalte, damit in einer zweispaltigen Reihe die Eingabefelder auf einer Linie sitzen, auch wenn ein Label eine Zeile mehr braucht. */ .feld { display: flex; flex-direction: column; min-width: 0; } .feld__label { display: block; font-weight: 700; font-size: var(--t-klein); color: var(--petrol); margin-bottom: .45rem; } .feld__hilfe { display: block; font-weight: 400; color: var(--petrol-leise); font-size: var(--t-mini); margin-top: .1rem; } .feld__huelle { position: relative; display: block; margin-top: auto; } .feld__eingabe { -webkit-appearance: none; appearance: none; display: block; width: 100%; font-family: var(--schrift-text); font-size: var(--t-text); font-weight: 500; line-height: 1.3; color: var(--petrol); background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--radius-feld); padding: .95rem 1rem; min-height: 3.5rem; /* großes Touch-Ziel, Zielgruppe 50+ */ transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .feld__eingabe::placeholder { color: #90A4B2; font-weight: 400; } .feld__eingabe:hover { border-color: var(--petrol-leise); } .feld__eingabe:focus { outline: none; border-color: var(--gruen-dunkel); box-shadow: 0 0 0 4px rgba(82, 218, 4, .22); } .feld__eingabe:focus-visible { outline: none; } /* Zustand: ausgefüllt. background-color, NICHT background — die Kurzform würde das eingebettete SVG des Auswahlpfeils mitlöschen. */ .feld--gefuellt .feld__eingabe { border-color: var(--gruen-gedaempft); background-color: #FAFFF6; } /* Zustand: Fehler */ .feld--fehler .feld__eingabe { border-color: #B3261E; background-color: #FFF7F6; } .feld--fehler .feld__eingabe:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .18); } .feld__fehler { display: none; margin-top: .45rem; font-size: var(--t-klein); font-weight: 700; color: #8C1D18; } .feld--fehler .feld__fehler { display: block; } /* Zahlenfeld mit Einheit */ .feld__eingabe--betrag { padding-right: 3.25rem; font-variant-numeric: tabular-nums; } .feld__einheit { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--petrol-leise); pointer-events: none; font-size: var(--t-text); } .feld--gefuellt .feld__einheit { color: var(--gruen-text); } /* Auswahlfeld mit eigenem Pfeil (inline SVG, kein externer Request) */ .feld__eingabe--auswahl { padding-right: 3.25rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2.5l8 7.5 8-7.5' fill='none' stroke='%23044359' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.05rem center; background-size: 1.05rem auto; cursor: pointer; } .feld__eingabe--auswahl:invalid, .feld__eingabe--auswahl option[value=""] { color: #90A4B2; } /* -------------------------------------------------------------------------- 8 — Rechner -------------------------------------------------------------------------- */ .rechner { display: grid; gap: 0; border-radius: var(--radius-gross); background: var(--weiss); box-shadow: var(--schatten-karte); border: 1px solid var(--linie-zart); overflow: hidden; } @media (min-width: 61.25rem) { .rechner--breit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } } .rechner__eingaben { padding: clamp(1.5rem, 3.5vw, 2.25rem); } .rechner__ausgabe { padding: clamp(1.5rem, 3.5vw, 2.25rem); background: var(--flaeche-sehr-hell); border-top: 1px solid var(--linie-zart); } @media (min-width: 61.25rem) { .rechner--breit .rechner__ausgabe { border-top: 0; border-left: 1px solid var(--linie-zart); } } .rechner__hinweis-oben { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-klein); color: var(--petrol-leise); margin-bottom: 1.4rem; } .rechner__ausgabe-titel { font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; margin: 0 0 1.1rem; } /* Leerzustand */ .leerzustand { color: var(--petrol-leise); } .leerzustand__figur { display: block; margin-bottom: 1rem; color: var(--linie); } /* Verteilungsreihen */ .verteilung { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; } .verteilung__zeile { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: .9rem; align-items: start; background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-feld); padding: .8rem .9rem; } .verteilung__anteil { font-family: var(--schrift-headline); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -.02em; color: var(--gruen-text); font-variant-numeric: tabular-nums; text-align: right; } .verteilung__text { font-size: var(--t-klein); line-height: 1.45; } .verteilung__text b { font-weight: 700; } /* Auf schmalen Schirmen steht der Prozentwert über dem Satz statt daneben — sonst hängt eine große Zahl neben fünf Zeilen Text in der Luft. */ @media (max-width: 30rem) { .verteilung__zeile { grid-template-columns: minmax(0, 1fr); gap: .3rem; } .verteilung__anteil { text-align: left; font-size: 1.625rem; } } .verteilung__balken { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--flaeche-hell); overflow: hidden; } .verteilung__balken span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gruen-hell), var(--gruen-dunkel)); transition: width .35s ease; } /* Einordnungs-Kacheln */ .einordnung { display: grid; gap: .75rem; margin-bottom: 1.5rem; } .einordnung__punkt { display: grid; grid-template-columns: 1.6rem minmax(0,1fr); gap: .8rem; padding: .9rem 1rem; background: var(--weiss); border: 1px solid var(--linie-zart); border-left: 4px solid var(--gruen-gedaempft); border-radius: var(--radius-feld); font-size: var(--t-klein); line-height: 1.5; } .einordnung__punkt--warnung { border-left-color: var(--warn); background: var(--warn-flaeche); } .einordnung__punkt--stopp { border-left-color: #B3261E; background: #FFF7F6; } .einordnung__titel { display: block; font-weight: 700; margin-bottom: .15rem; font-family: var(--schrift-headline); } .einordnung__zeichen { color: var(--gruen-dunkel); margin-top: .15rem; } .einordnung__punkt--warnung .einordnung__zeichen { color: var(--warn); } .einordnung__punkt--stopp .einordnung__zeichen { color: #B3261E; } .fussnote { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--linie); font-size: var(--t-mini); line-height: 1.5; color: var(--petrol-leise); } /* -------------------------------------------------------------------------- 9 — Hero-Kurzformular (Variante B) -------------------------------------------------------------------------- */ .kurzform { background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-gross); box-shadow: var(--schatten-karte); padding: clamp(1.4rem, 3.5vw, 2rem); } .kurzform__titel { font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; margin: 0 0 .5rem; } .kurzform__text { font-size: var(--t-klein); color: var(--petrol-leise); margin-bottom: 1.25rem; } .kurzform__knopf { margin-top: 1.1rem; } .kurzform__fuss { margin-top: 1rem; font-size: var(--t-mini); color: var(--petrol-leise); } /* -------------------------------------------------------------------------- 10 — Entlastungs-Liste (ohne Kündigung, ohne Gesundheitsprüfung …) -------------------------------------------------------------------------- */ .entlastung { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } @media (min-width: 48rem) { .entlastung--vier { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 75rem) { .entlastung--vier { grid-template-columns: repeat(4, 1fr); } } .entlastung__punkt { display: grid; grid-template-columns: 1.75rem minmax(0,1fr); gap: .85rem; align-items: start; padding: 1.1rem 1.15rem; background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-feld); } .abschnitt--hell .entlastung__punkt, .abschnitt--flaeche .entlastung__punkt { border-color: transparent; } .abschnitt--dunkel .entlastung__punkt { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.14); } .entlastung__zeichen { color: var(--gruen-dunkel); margin-top: .1rem; } .abschnitt--dunkel .entlastung__zeichen { color: var(--gruen-hell); } .entlastung__titel { display: block; font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-gross); line-height: 1.25; margin-bottom: .3rem; overflow-wrap: break-word; hyphens: auto; } .entlastung__text { font-size: var(--t-klein); line-height: 1.5; color: var(--petrol-leise); } .abschnitt--dunkel .entlastung__text { color: #B9CED6; } /* -------------------------------------------------------------------------- 11 — §204-Mechanik -------------------------------------------------------------------------- */ .mechanik { display: grid; gap: clamp(2rem, 4vw, 3rem); } @media (min-width: 61.25rem) { .mechanik { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } .mechanik__schritte { display: grid; gap: 1.5rem; counter-reset: schritt; } .schritt { display: grid; grid-template-columns: 2.75rem minmax(0,1fr); gap: 1.1rem; position: relative; } .schritt::before { counter-increment: schritt; content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--petrol); color: var(--weiss); font-family: var(--schrift-headline); font-weight: 700; font-size: 1.125rem; flex: none; } /* Auf der dunklen Fläche wäre ein petrolfarbener Kreis unsichtbar. */ .abschnitt--dunkel .schritt::before { background: var(--gruen-hell); color: var(--petrol); } .schritt__titel { margin-bottom: .5rem; } .schritt__text { font-size: var(--t-klein); line-height: 1.6; } .diagramm { background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-gross); padding: clamp(1.25rem, 3vw, 1.9rem); box-shadow: var(--schatten-weich); } /* Das Diagramm bleibt IMMER eine helle Fläche. Die Kurven sind in Petrol und Grün gezeichnet und bräuchten auf der dunklen Fläche sonst eigene Farben — auf der dunklen Fläche wirkt es dadurch wie ein eingelegtes Blatt. */ .abschnitt--dunkel .diagramm { background: var(--weiss); border-color: transparent; color: var(--petrol); box-shadow: 0 20px 50px rgba(0,0,0,.28); } .abschnitt--dunkel .diagramm .diagramm__titel { color: var(--petrol); } .diagramm__titel { font-size: var(--t-gross); margin-bottom: .35rem; } .diagramm__unter { font-size: var(--t-mini); color: var(--petrol-leise); margin-bottom: 1.25rem; } .abschnitt--dunkel .diagramm__unter { color: var(--petrol-leise); } .diagramm__legende { color: var(--petrol); } .diagramm__bild { display: block; width: 100%; height: auto; } .diagramm__legende { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; margin-top: 1.1rem; font-size: var(--t-mini); line-height: 1.4; } .diagramm__eintrag { display: flex; align-items: center; gap: .5rem; } .diagramm__punkt { width: 1.1rem; height: 4px; border-radius: 2px; flex: none; } /* Zitat-/Gesetzeskasten */ .gesetz { margin: 2rem 0 0; padding: 1.35rem 1.5rem; background: var(--flaeche-hell); border-left: 5px solid var(--gruen-dunkel); border-radius: 0 var(--radius-feld) var(--radius-feld) 0; } .abschnitt--dunkel .gesetz { background: rgba(255,255,255,.07); border-left-color: var(--gruen-hell); } .gesetz__quelle { display: block; margin-top: .65rem; font-size: var(--t-mini); font-weight: 700; color: var(--petrol-leise); } .abschnitt--dunkel .gesetz__quelle { color: #A9C2CC; } /* -------------------------------------------------------------------------- 12 — Karten: Fallbeispiele, Kundenstimmen -------------------------------------------------------------------------- */ .karten { display: grid; gap: 1.25rem; } @media (min-width: 46rem) { .karten--drei { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 66rem) { .karten--drei { grid-template-columns: repeat(3, 1fr); } } .karte { display: flex; flex-direction: column; background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-gross); padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--schatten-weich); } .karte__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--linie-zart); } .karte__marke { font-family: var(--schrift-headline); font-weight: 700; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-text); } .karte__meta { font-size: var(--t-mini); color: var(--petrol-leise); } .karte__zahl { font-family: var(--schrift-headline); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.25rem); line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-bottom: .4rem; } .karte__text { font-size: var(--t-klein); line-height: 1.55; } .karte__liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .karte__liste li { display: grid; grid-template-columns: 5.75rem minmax(0,1fr); gap: .75rem; font-size: var(--t-klein); padding-block: .35rem; border-top: 1px solid var(--linie-zart); } .karte__liste dt, .karte__liste .schluessel { color: var(--petrol-leise); } .karte__fuss { margin-top: auto; padding-top: 1.1rem; } /* Platzhalter — sichtbar markiert, damit nichts versehentlich live geht */ .platzhalter { position: relative; border: 2px dashed var(--linie); border-radius: var(--radius-feld); background: repeating-linear-gradient(135deg, rgba(4,67,89,.028) 0 10px, transparent 10px 20px); color: var(--petrol-leise); } .platzhalter__marke { display: inline-block; font-family: var(--schrift-headline); font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warn); background: var(--warn-flaeche); border: 1px solid rgba(138,74,0,.28); border-radius: 999px; padding: .2rem .7rem; margin-bottom: .75rem; } .platzhalter--text { padding: 1.1rem 1.25rem; } /* Auf dunkler Fläche braucht der Platzhalter eigene Textfarben, sonst steht Petrol-Grau auf Petrol. */ .abschnitt--dunkel .platzhalter { color: #C4D7DE; border-color: rgba(255,255,255,.34); background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); } .abschnitt--dunkel .platzhalter > p > b, .abschnitt--dunkel .platzhalter > p:first-of-type b { color: var(--weiss); } .platzhalter--bild { display: flex; align-items: center; justify-content: center; min-height: 8.5rem; text-align: center; padding: 1rem; font-size: var(--t-mini); } .platzhalter--zeile { display: inline; border: 0; background: none; padding: 0; } .platzhalter--zeile b { background: var(--warn-flaeche); color: var(--warn); border-bottom: 2px dashed rgba(138,74,0,.45); padding: 0 .2rem; font-weight: 700; } .stimme { display: flex; flex-direction: column; gap: 1.1rem; } .stimme__text { font-size: var(--t-gross); line-height: 1.5; } .stimme__person { display: flex; align-items: center; gap: .9rem; margin-top: auto; } .stimme__bild { width: 3.25rem; height: 3.25rem; border-radius: 50%; flex: none; border: 2px dashed var(--linie); background: repeating-linear-gradient(135deg, rgba(4,67,89,.05) 0 6px, transparent 6px 12px); display: flex; align-items: center; justify-content: center; font-size: .625rem; font-weight: 700; color: var(--petrol-leise); letter-spacing: .04em; text-align: center; line-height: 1.1; } .stimme__name { font-weight: 700; font-family: var(--schrift-headline); } .stimme__meta { font-size: var(--t-mini); color: var(--petrol-leise); } /* -------------------------------------------------------------------------- 13 — Ablauf / Erwartungssteuerung -------------------------------------------------------------------------- */ .ablauf { display: grid; gap: 1.25rem; counter-reset: ablauf; } @media (min-width: 52rem) { .ablauf { grid-template-columns: repeat(3, 1fr); } } .ablauf__karte { position: relative; padding: 1.5rem 1.5rem 1.4rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-gross); } .ablauf__nummer { display: block; font-family: var(--schrift-headline); font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--gruen-hell); letter-spacing: -.04em; margin-bottom: .6rem; } .ablauf__titel { font-size: var(--t-gross); margin-bottom: .5rem; } .ablauf__text { font-size: var(--t-klein); line-height: 1.55; color: #C4D7DE; } /* -------------------------------------------------------------------------- 14 — Vorqualifizierung -------------------------------------------------------------------------- */ .qualifikation { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } @media (min-width: 56rem) { .qualifikation { grid-template-columns: repeat(2, 1fr); } } .kriterien { background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--radius-gross); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--schatten-weich); } .kriterien__titel { margin-bottom: 1.1rem; } .kriterien__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; } .kriterien__liste li { display: grid; grid-template-columns: 1.5rem minmax(0,1fr); gap: .8rem; font-size: var(--t-klein); line-height: 1.5; padding-bottom: .85rem; border-bottom: 1px solid var(--linie-zart); } .kriterien__liste li:last-child { border-bottom: 0; padding-bottom: 0; } .kriterien__zeichen { margin-top: .12rem; } .kriterien--ja .kriterien__zeichen { color: var(--gruen-dunkel); } .kriterien--nein .kriterien__zeichen { color: var(--petrol-leise); } .kriterien--nein { background: var(--flaeche-sehr-hell); box-shadow: none; } /* -------------------------------------------------------------------------- 15 — Abschluss-Aufforderung -------------------------------------------------------------------------- */ .abschluss { display: grid; gap: 2rem; align-items: start; } @media (min-width: 58rem) { .abschluss { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } } .abschluss__kasten { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-gross); padding: clamp(1.4rem, 3vw, 2rem); } .abschluss__aktionen { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem; } /* -------------------------------------------------------------------------- 16 — Fuß -------------------------------------------------------------------------- */ .fuss { background: var(--petrol-tief); color: #C4D7DE; padding-block: clamp(2.5rem, 5vw, 3.5rem); font-size: var(--t-klein); } .fuss__innen { display: grid; gap: 2rem; } @media (min-width: 52rem) { .fuss__innen { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } } .fuss__text { max-width: 34rem; line-height: 1.6; } .fuss__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; } /* Touch-Ziel auf 44px bringen — die Rechtslinks sind sonst zu klein zum Treffen. */ .fuss__liste a { color: var(--weiss); font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; padding-inline: .35rem; } .fuss__liste a:hover { color: var(--gruen-hell); } .fuss__unten { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: var(--t-mini); color: #93AEB8; } .fuss .marke__rahmen { --logo-h: 2.5rem; } /* -------------------------------------------------------------------------- 17 — Ankerband (fixierter CTA auf kleinen Bildschirmen) -------------------------------------------------------------------------- */ .band { position: sticky; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--linie); padding: .7rem var(--rand); box-shadow: 0 -6px 24px rgba(4,67,89,.10); } .band__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--breite); margin-inline: auto; } .band__text { font-size: var(--t-mini); font-weight: 700; line-height: 1.3; } @media (min-width: 46rem) { .band { display: none; } } /* ========================================================================== 18 — Rechtsseiten (Impressum, Datenschutzerklärung) Bewusst schlicht: eine Spalte, gleiche Typografie wie die Landingpage, Fließtext 19px, harte Untergrenze 17px. Zielgruppe 50+. ========================================================================== */ .rechtsseite { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 8vw, 6rem); } /* Gleiche Zeilenlänge wie der Fließtext — lange Zeilen sind für die Zielgruppe 50+ der schnellste Weg, die Zeile zu verlieren. */ .rechtskopf { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; } .rechtskopf h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.875rem); line-height: 1.08; } .rechtskopf__stand { margin-top: 1rem; font-size: var(--t-klein); color: var(--petrol-leise); } /* Inhaltsverzeichnis — bei einer langen Datenschutzerklärung Pflicht, sonst findet niemand über 50 den Widerspruchs-Abschnitt. */ .rechtsnav { max-width: 46rem; background: var(--flaeche-sehr-hell); border: 1px solid var(--linie-zart); border-radius: var(--radius-gross); padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: clamp(2rem, 4vw, 3rem); } .rechtsnav h2 { font-size: var(--t-gross); margin-bottom: .9rem; } .rechtsnav ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2.5rem; font-size: var(--t-klein); } @media (max-width: 44rem) { .rechtsnav ol { columns: 1; } } .rechtsnav li { margin-bottom: .45rem; break-inside: avoid; } .rechtsnav a { color: var(--petrol); } .rechtstext { max-width: 46rem; } .rechtstext h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem); margin-top: clamp(2.5rem, 5vw, 3.25rem); margin-bottom: .9rem; scroll-margin-top: 6rem; } .rechtstext h2:first-child { margin-top: 0; } .rechtstext h3 { font-size: var(--t-gross); margin-top: 1.9rem; margin-bottom: .6rem; } .rechtstext p, .rechtstext li { font-size: var(--t-text); line-height: 1.65; } .rechtstext ul, .rechtstext ol { margin: 0 0 1.1em; padding-left: 1.4rem; } .rechtstext li { margin-bottom: .5rem; } .rechtstext a { color: var(--gruen-text); font-weight: 500; } /* Datenblock (Anschrift, Kontakt) — kein Zitatkasten, sondern klar lesbarer Block */ .datenblock { background: var(--flaeche-sehr-hell); border-left: 4px solid var(--gruen-gedaempft); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.25rem 1.4rem; margin: 0 0 1.5rem; font-size: var(--t-text); line-height: 1.55; } .datenblock p { margin-bottom: .75rem; } .datenblock p:last-child { margin-bottom: 0; } /* Rechtsgrundlage — der Artikel wird an jeder Verarbeitung ausdrücklich benannt */ .rechtsgrundlage { display: block; margin: .6rem 0 1.1rem; padding: .7rem .95rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); font-size: var(--t-klein); line-height: 1.5; } .rechtsgrundlage b { color: var(--petrol); } /* Status-Tabelle der eingesetzten Dienste */ .diensttabelle-huelle { overflow-x: auto; margin: 1.25rem 0 1.75rem; } .diensttabelle { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--t-klein); } .diensttabelle th, .diensttabelle td { text-align: left; vertical-align: top; padding: .8rem .9rem; border-bottom: 1px solid var(--linie-zart); } .diensttabelle th { font-family: var(--schrift-headline); font-weight: 700; background: var(--flaeche-sehr-hell); border-bottom: 2px solid var(--linie); } .status { font-weight: 700; white-space: nowrap; } .status--aktiv { color: var(--gruen-text); } .status--inaktiv { color: var(--warn); } /* Fehlende Angabe — sichtbar markiert, damit nichts unbemerkt live geht */ .fehlt { display: inline; background: var(--warn-flaeche); border-bottom: 2px solid var(--warn); color: var(--warn); font-weight: 700; padding: .1em .3em; border-radius: 3px; } /* ========================================================================== 19 — Cookie-Banner (Einwilligungsverwaltung) Gleichrangige Schaltflächen auf der ersten Ebene. Kein Vorab-Setzen, kein Scroll-als-Einwilligung, kein Wegklicken-als-Einwilligung. ========================================================================== */ .consent-schleier { position: fixed; inset: 0; z-index: 900; background: rgba(3, 52, 69, .55); opacity: 0; transition: opacity .18s ease; } .consent-schleier[hidden] { display: none; } .consent-schleier.ist-offen { opacity: 1; } .consent { position: fixed; z-index: 901; left: 50%; bottom: 0; transform: translateX(-50%); width: min(58rem, 100%); max-height: 92vh; overflow-y: auto; background: var(--weiss); color: var(--petrol); border-top: 5px solid var(--gruen-hell); border-radius: var(--radius-gross) var(--radius-gross) 0 0; box-shadow: 0 -10px 60px rgba(3, 52, 69, .35); padding: clamp(1.35rem, 3.5vw, 2rem); font-size: var(--t-klein); line-height: 1.6; } .consent[hidden] { display: none; } @media (min-width: 46rem) { .consent { bottom: clamp(1rem, 3vw, 2rem); border-radius: var(--radius-gross); border-top-width: 6px; } } .consent__titel { font-family: var(--schrift-headline); font-weight: 700; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); line-height: 1.2; margin: 0 0 .75rem; color: var(--petrol); } .consent__text { margin: 0 0 1.15rem; font-size: var(--t-klein); } .consent__text a { color: var(--gruen-text); font-weight: 700; } /* Erste Ebene: die beiden Hauptschaltflächen sind optisch gleichwertig. Gleiche Fläche, gleiche Schriftgröße, gleiches Gewicht, gleicher Rahmen. Der Unterschied ist ausschließlich die Farbfläche — beide tragen ihn gleich deutlich. Kein Grau-Versteck-Muster. */ .consent__wahl { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .9rem; } @media (min-width: 34rem) { .consent__wahl { grid-template-columns: 1fr 1fr; } } .consent__knopf { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 3.25rem; padding: .85rem 1.1rem; font-family: var(--schrift-text); font-size: var(--t-klein); font-weight: 700; line-height: 1.25; border-radius: var(--radius); border: 2px solid var(--petrol); background: var(--weiss); color: var(--petrol); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .consent__knopf:hover { background: var(--flaeche-hell); } .consent__knopf--alle { background: var(--gruen-hell); border-color: var(--gruen-dunkel); color: var(--petrol); } .consent__knopf--alle:hover { background: var(--gruen-hover); } /* Dritte Option: sichtbar, aber nicht als Hauptweg inszeniert. */ .consent__mehr { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .35rem .1rem; background: none; border: 0; font-family: var(--schrift-text); font-size: var(--t-klein); font-weight: 700; color: var(--petrol); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .consent__mehr:hover { color: var(--gruen-text); } .consent__mehr-pfeil { transition: transform .18s ease; flex: none; } .consent[data-einstellungen="offen"] .consent__mehr-pfeil { transform: rotate(180deg); } .consent__einstellungen { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); } .consent__einstellungen[hidden] { display: none; } .consent__kategorie { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .9rem; padding: .95rem 0; border-bottom: 1px solid var(--linie-zart); } .consent__kategorie:last-of-type { border-bottom: 0; } .consent__kategorie-titel { grid-column: 2; font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-klein); margin: 0; } .consent__kategorie-text { grid-column: 2; margin: 0; font-size: var(--t-mini); color: var(--petrol-leise); line-height: 1.55; } /* Eigener Schalter statt Standard-Checkbox — sichtbarer Zustand, großes Ziel */ .consent__schalter { grid-row: 1 / span 2; align-self: start; } .consent__schalter input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .consent__schalter span { display: block; width: 3.4rem; height: 1.9rem; border-radius: 999px; background: #C9D4E0; border: 2px solid var(--linie); position: relative; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .consent__schalter span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgba(4, 67, 89, .35); transition: transform .15s ease; } .consent__schalter input:checked + span { background: var(--gruen-gedaempft); border-color: var(--gruen-dunkel); } .consent__schalter input:checked + span::after { transform: translateX(1.5rem); } .consent__schalter input:focus-visible + span { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; } .consent__schalter input:disabled + span { background: var(--gruen-gedaempft); border-color: var(--gruen-dunkel); opacity: .55; cursor: not-allowed; } .consent__einstellungen-aktion { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; } .consent__einstellungen-aktion .consent__knopf { flex: 1 1 14rem; } .consent__fuss { margin: 1rem 0 0; font-size: var(--t-mini); color: var(--petrol-leise); } .consent__fuss a { color: var(--petrol-leise); } /* Dauerhafter Widerrufs-Auslöser im Fuß */ .consent-widerruf { background: none; border: 0; padding: 0; font-family: var(--schrift-text); font-size: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; } /* ========================================================================== 20 — Anfrageformular ========================================================================== */ .formularkarte { background: var(--weiss); border-radius: var(--radius-gross); padding: clamp(1.4rem, 3.5vw, 2.25rem); box-shadow: var(--schatten-karte); color: var(--petrol); } .formularkarte h3 { font-size: var(--t-h3); margin-bottom: .5rem; } .formular__schritt { margin-bottom: 2rem; } .formular__schritt:last-of-type { margin-bottom: 0; } .formular__schritt-marke { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-mini); letter-spacing: .09em; text-transform: uppercase; color: var(--gruen-text); margin-bottom: .35rem; } .formular__schritt-nummer { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--gruen-hell); color: var(--petrol); font-size: var(--t-mini); letter-spacing: 0; } .formular__schritt-text { font-size: var(--t-mini); color: var(--petrol-leise); margin: 0 0 1.15rem; } /* Hinweis unter der Rufnummer: mobil erkannt / Festnetz erkannt */ .feld__status { display: none; margin-top: .45rem; padding: .55rem .75rem; border-radius: var(--radius); font-size: var(--t-mini); font-weight: 500; line-height: 1.45; } .feld__status[data-art="mobil"] { display: block; background: #F1FBEA; border: 1px solid var(--gruen-gedaempft); color: #14600A; } .feld__status[data-art="festnetz"] { display: block; background: var(--warn-flaeche); border: 1px solid var(--warn); color: var(--warn); } /* Honeypot — für Menschen und Screenreader unsichtbar, für Bots ein Feld. Nicht display:none, sonst füllen viele Bots es nicht aus. */ .honigtopf { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Einwilligungen — mindestens 17px, hoher Kontrast, große Klickfläche. Bewusst NICHT 11px Grauschrift wie beim Wettbewerber. */ .einwilligung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 .95rem; padding: 1.15rem; border: 2px solid var(--linie); border-radius: var(--radius-feld); margin-bottom: 1rem; background: var(--weiss); } .einwilligung--fehler { border-color: #B3261E; background: #FFF7F6; } .einwilligung__box { -webkit-appearance: none; appearance: none; width: 1.75rem; height: 1.75rem; margin: .15rem 0 0; flex: none; border: 2px solid var(--petrol-leise); border-radius: 5px; background: var(--weiss); cursor: pointer; display: grid; place-content: center; transition: background-color .12s ease, border-color .12s ease; } .einwilligung__box::after { content: ""; width: .95rem; height: .55rem; border-left: 3px solid var(--weiss); border-bottom: 3px solid var(--weiss); transform: rotate(-45deg) scale(0); transition: transform .12s ease; margin-top: -.2rem; } .einwilligung__box:checked { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); } .einwilligung__box:checked::after { transform: rotate(-45deg) scale(1); } .einwilligung__box:focus-visible { outline: 3px solid var(--gruen-dunkel); outline-offset: 3px; } .einwilligung__text { font-size: var(--t-klein); /* 17px — Untergrenze eingehalten */ line-height: 1.58; color: var(--petrol); cursor: pointer; } .einwilligung__text b { font-weight: 700; } .einwilligung__text a { color: var(--gruen-text); font-weight: 700; } .einwilligung__art { display: block; font-family: var(--schrift-headline); font-weight: 700; font-size: var(--t-mini); letter-spacing: .07em; text-transform: uppercase; color: var(--petrol-leise); margin-bottom: .3rem; } .einwilligung__fehler { display: none; grid-column: 2; margin-top: .55rem; font-size: var(--t-klein); font-weight: 700; color: #8C1D18; } .einwilligung--fehler .einwilligung__fehler { display: block; } .widerrufshinweis { font-size: var(--t-mini); line-height: 1.55; color: var(--petrol-leise); margin: 0 0 1.5rem; } .widerrufshinweis a { color: var(--gruen-text); font-weight: 700; } /* Absende-Rückmeldung. Kein Fake-Erfolg: solange kein Endpunkt hinterlegt ist, sagt der Kasten offen, dass nichts gesendet wurde. */ .formular__meldung { margin-top: 1.5rem; padding: 1.1rem 1.25rem; border-radius: var(--radius-feld); font-size: var(--t-klein); line-height: 1.6; } .formular__meldung[hidden] { display: none; } .formular__meldung[data-art="fehler"] { background: #FFF7F6; border: 2px solid #B3261E; color: #8C1D18; } .formular__meldung[data-art="offen"] { background: var(--warn-flaeche); border: 2px solid var(--warn); color: var(--warn); } .formular__meldung b { display: block; margin-bottom: .35rem; font-size: var(--t-klein); } .formular__meldung pre { margin: .8rem 0 0; padding: .8rem; background: rgba(255,255,255,.7); border-radius: var(--radius); font-size: var(--t-mini); line-height: 1.45; overflow-x: auto; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: var(--petrol); } /* Schrittkopf im Formular: Legend als Blockelement, damit Marke und Name untereinander stehen und die Legende die volle Breite bekommt. */ .formular__schritt > .feldsatz__titel { display: block; width: 100%; } .formular__schritt-name { display: block; } /* Im Abschlussabschnitt bekommt das Formular die breitere Spalte — es trägt zweispaltige Feldreihen, der Begleittext links nicht. */ @media (min-width: 58rem) { .abschluss--formular { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } } /* Die Überschrift des Einwilligungsfensters bekommt beim Öffnen programmatisch den Fokus, damit Screenreader den Dialog ansagen. Ein sichtbarer Fokusring wäre hier irreführend — die Überschrift ist nicht bedienbar und über die Tastatur auch nicht erreichbar. Alle echten Bedienelemente im Dialog behalten ihren Ring. */ .consent__titel:focus, .consent__titel:focus-visible { outline: none; }