— Browser-Defaults des fieldset (Rahmen, Innenabstand, min-width) müssen zurückgesetzt werden. */ .frage{ margin:40px 0 0; padding:34px 0 0; border:0; min-width:0; border-top:1px solid var(--line-soft); } .frage:first-of-type{ border-top:0; padding-top:0; } .frage > .f-label{ display:block; float:left; width:100%; padding:0; font-family:var(--font-primary); font-weight:500; font-size:17px; color:var(--text-strong); line-height:1.5; margin:0 0 6px; } /* float löst das legend-Layoutverhalten auf; danach den Fluss wiederherstellen */ .frage > .f-label + *{ clear:both; } .frage > .f-hilfe{ font-size:15px; color:var(--text-3); line-height:1.7; margin:0 0 18px; max-width:620px; } .frage > .f-label + .f-optionen, .frage > .f-label + .euro{ margin-top:18px; } /* ---------- Optionen: größere Klickflächen als im Standardsystem. Begründung: primäre Interaktion, Zielgruppe 50+. ---------- */ .f-optionen{ display:grid; grid-template-columns:1fr 1fr; gap:11px; } .f-optionen.eng{ grid-template-columns:1fr; } .f-optionen .chipbox label{ font-size:16.5px; padding:17px 19px; line-height:1.4; min-height:62px; } .f-optionen .chipbox label::before{ width:17px; height:17px; } /* ---------- Betragsfeld ---------- */ .euro{ position:relative; max-width:340px; } .euro input{ width:100%; background:var(--bg); border:1px solid var(--line); border-radius:3px; color:var(--text-strong); font-family:var(--font-primary); font-weight:500; font-size:26px; letter-spacing:-.01em; padding:16px 88px 16px 18px; transition:border-color .3s var(--ease); } .euro input:focus{ outline:none; border-color:var(--gold-line); } .euro input::placeholder{ color:var(--text-3); font-weight:400; } .euro input::-webkit-outer-spin-button, .euro input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .euro .einheit{ position:absolute; right:16px; top:50%; transform:translateY(-50%); font-family:var(--font-secondary); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); pointer-events:none; } /* ---------- Navigation ---------- */ .check-nav{ display:flex; gap:14px; align-items:center; justify-content:space-between; margin-top:48px; padding-top:28px; border-top:1px solid var(--line-soft); } .check-nav .btn{ border:1px solid var(--line); } .check-nav .js-zurueck[hidden]{ display:none; } .check-nav .js-weiter{ min-width:200px; justify-content:center; } .feldfehler{ margin:22px 0 0; font-size:14.5px; color:var(--bad); border-left:2px solid var(--bad); padding-left:14px; line-height:1.6; } .feldfehler[hidden]{ display:none; } .check-fuss{ max-width:760px; margin:36px auto 0; text-align:center; font-family:var(--font-secondary); font-size:11.5px; color:var(--text-3); line-height:1.8; letter-spacing:.02em; } /* ============================================================ GATE ============================================================ */ .gate-head{ max-width:760px; margin:0 auto 48px; text-align:center; } .gate-head .kicker{ justify-content:center; margin-bottom:18px; } .gate-head .kicker::before{ display:none; } .gate-head h2{ font-family:var(--font-primary); font-weight:300; font-size:clamp(28px,3.6vw,44px); line-height:1.18; letter-spacing:-.01em; color:var(--text-strong); margin:0; } .gate-head h2 b{ font-weight:600; } .gate-head p.sub{ font-size:16px; color:var(--text-2); line-height:1.8; margin:18px auto 0; max-width:600px; } .gate-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:start; max-width:1100px; margin:0 auto; } /* ---------- Unscharfe Vorschau ---------- */ .teaser{ border:1px solid var(--line); border-radius:8px; padding:12px 26px 22px; background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%); } .teaser-zeile{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid var(--line-soft); } .teaser-zeile:last-of-type{ border-bottom:0; } .tz-label{ font-family:var(--font-secondary); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); } .tz-wert{ font-family:var(--font-primary); font-weight:500; font-size:22px; color:var(--text-strong); white-space:nowrap; } .teaser-zeile.scharf .tz-wert{ color:var(--gold); font-size:17px; } .teaser-zeile.blur .tz-wert{ filter:blur(7px); opacity:.55; user-select:none; } .teaser-hinweis{ margin:20px 0 0; font-family:var(--font-secondary); font-size:11px; color:var(--text-3); line-height:1.7; letter-spacing:.02em; } /* ---------- Meldung unter dem Formular ---------- subpages.css färbt bei .is-error nur den Kreis, und das in einem festen Rosé, das auf hellem Grund kaum trägt. Überschrift und Zeichen müssen den Fehler mittragen — sonst wirkt der Kasten trotz rotem Ring wie eine Bestätigung. --bad ist hell/dunkel getrennt gesetzt. */ .form-msg.is-error .ic{ color:var(--bad); } .form-msg.is-error h3{ color:var(--bad); } /* ---------- Danke ---------- */ .danke-wrap{ max-width:900px; text-align:center; } .danke-wrap .kicker{ justify-content:center; margin-bottom:18px; } .danke-wrap .kicker::before{ display:none; } .danke-wrap h2{ font-family:var(--font-primary); font-weight:300; font-size:clamp(28px,3.6vw,44px); line-height:1.18; color:var(--text-strong); margin:0; } .danke-wrap h2 b{ font-weight:600; } .danke-wrap p.sub{ font-size:16px; color:var(--text-2); line-height:1.8; margin:18px auto 0; max-width:620px; } .danke-grid{ margin-top:56px; text-align:left; } /* Belegzahl am Kanal-Link der Karte — gleiche Rollenverteilung wie bei .p-links .p-meta oben: eine Stufe leiser als die Beschriftung, damit sie belegt statt mitzuwerben, und im Hover gemeinsam mit ihr eine Stufe heller. Keine neue Farbe, nur --text-3/--text-2 aus theme.css. .card .go ist inline-flex; flex-wrap lässt die Zeile auf schmalen Schirmen von selbst zwischen Beschriftung und Zahl umbrechen, statt sie erzwungen zu trennen oder aus der Karte laufen zu lassen. */ .danke-grid .go{ flex-wrap:wrap; row-gap:4px; } .danke-grid .go-meta{ color:var(--text-3); } .danke-grid .card:hover .go-meta{ color:var(--text-2); } /* ---------- Footer-Disclaimer ---------- */ .disclaimer{ margin:56px 0 0; padding:22px 0 0; border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--text-3); line-height:1.8; max-width:900px; } /* ============================================================ WER DAHINTER STEHT (Landingpage) ------------------------------------------------------------ .person, .portrait, .p-body und .p-role kommen aus subpages.css — dieselbe Bildsprache wie der Abschnitt #christopher auf der Startseite. Hier nur die kompakte Variante: Der Block sitzt mitten im Lesefluss vor der FAQ und darf die Seite nicht spürbar strecken. Keine eigenen Farben — alles über die Tokens aus theme.css. ============================================================ */ .person--kurz{ grid-template-columns:200px 1fr; gap:44px; } .person--kurz .p-body h2{ font-size:clamp(24px,2.6vw,31px); } .person--kurz .p-role{ margin:0 0 20px; line-height:1.75; } /* max-width wie bei .ergebnisliste p. Ohne Begrenzung laufen die Zeilen auf großen Schirmen über 110 Zeichen — für die Zielgruppe dieser Seite (71 % des Publikums 45+) deutlich zu lang. */ .person--kurz .p-body p{ font-size:15.5px; line-height:1.8; margin:0 0 16px; max-width:680px; } .person--kurz .p-body p:last-of-type{ margin-bottom:0; } /* Das Monogramm ist hier kleiner als auf der Startseite — 96 px würden in der schmaleren Kachel an den Rändern anstoßen. */ .person--kurz .portrait .monogram{ font-size:64px; } /* Linkzeile. Auf der Startseite steht sie im Inline-CSS und kann von dort nicht importiert werden — deshalb hier nachgebildet. */ .p-links{ display:flex; gap:26px; flex-wrap:wrap; margin:24px 0 0; } .p-links a{ font-family:var(--font-secondary); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); display:inline-flex; align-items:center; gap:9px; transition:color .3s var(--ease); } /* Belegzahl am Link — leiser als die Beschriftung, damit sie belegt statt wirbt. Bricht auf schmalen Schirmen zusammen mit dem Link um. */ .p-links .p-meta{ color:var(--text-3); } .p-links a:hover .p-meta{ color:var(--text-2); } .p-links a .arr{ color:var(--gold); transition:transform .35s var(--ease); } .p-links a:hover{ color:var(--text-strong); } .p-links a:hover .arr{ transform:translateX(4px); } /* ============================================================ ABSENDER (Block über dem E-Mail-Formular) ============================================================ */ /* Oben ausgerichtet, nicht mittig: Das Foto gehört zum Namen, nicht zum Fließtext — mittig zentriert rutscht es neben die zweite Textzeile. */ .absender{ display:flex; align-items:flex-start; gap:15px; margin:0 0 26px; padding:0 0 24px; border-bottom:1px solid var(--line-soft); } /* Das Foto ist ein Hochformat-Porträt vom ganzen Oberkörper. Für den runden Ausschnitt wird es vergrößert und auf den Kopf ausgerichtet, statt Tisch und Hintergrund mitzuzeigen. Werte in Prozent der Kachel — sie bleiben damit auch bei geänderter Größe richtig. ⚠️ max-width:none ist Pflicht: subpages.css setzt global img{max-width:100%}, sonst wird die Vergrößerung still auf 100 % gedeckelt und das Gesicht verschwindet in der Totale. */ .absender-foto{ position:relative; display:block; flex:none; width:62px; height:62px; border-radius:50%; overflow:hidden; border:1px solid var(--gold-line); background:var(--bg-2); } .absender-foto img{ position:absolute; left:50%; top:0; width:140%; max-width:none; height:auto; transform:translateX(-51%); } .absender-txt{ min-width:0; } .absender-name{ display:block; font-family:var(--font-primary); font-weight:500; font-size:15px; color:var(--text-strong); line-height:1.3; } .absender-rolle{ display:block; margin-top:4px; font-family:var(--font-secondary); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); line-height:1.4; } .absender p{ margin:10px 0 0; font-size:13px; line-height:1.65; color:var(--text-2); } /* ============================================================ Ampeln (Ergebnisdarstellung, auch in der E-Mail-Vorlage genutzt) ============================================================ */ .ampel{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-secondary); font-size:11px; letter-spacing:.14em; text-transform:uppercase; } .ampel::before{ content:""; width:7px; height:7px; border-radius:50%; flex:none; } .ampel.gut::before{ background:var(--ok); } .ampel.gut{ color:var(--ok); } .ampel.mittel::before{ background:var(--warn); } .ampel.mittel{ color:var(--warn); } .ampel.kritisch::before{ background:var(--bad); } .ampel.kritisch{ color:var(--bad); } /* ============================================================ Responsive ============================================================ */ @media (max-width:900px){ .gate-grid{ grid-template-columns:1fr; gap:32px; } .danke-grid{ grid-template-columns:1fr; } } /* subpages.css stellt .person hier auf eine Spalte um. Weil check.css danach geladen wird, würde die dortige Media Query von .person--kurz überschrieben — der Umbruch muss deshalb hier wiederholt werden. */ @media (max-width:880px){ .person--kurz{ grid-template-columns:1fr; gap:30px; } .person--kurz .portrait{ max-width:230px; } } @media (max-width:700px){ .check-shell{ padding-top:120px; } /* Etwas enger gesetzt, damit Restzeit und Schrittzahl auf dem Telefon in einer Zeile bleiben — die Sperrung von .22em war dafür zu breit. */ .fortschritt-txt{ font-size:11px; letter-spacing:.12em; } .fortschritt-nr{ font-size:10px; letter-spacing:.1em; } .f-optionen{ grid-template-columns:1fr; } .ergebnisliste li{ grid-template-columns:1fr; gap:10px; } .ergebnisliste li::before{ padding-top:0; } .check-nav{ flex-direction:column-reverse; align-items:stretch; } .check-nav .btn{ justify-content:center; } .euro{ max-width:none; } .euro input{ font-size:23px; } .form-card{ padding:32px 24px 26px; } .frm .row{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .schritt{ animation:none; } .fortschritt-bar span{ transition:none; } }