/* ================================================================ SUSA — Designoption 2 · Restyle-Layer Reiner Design-Layer. Kein Text, kein Markup geaendert. Wird NACH fonts.css / styles-human.css / color-balance.css geladen. Grundlage: Design-Handoff "Restyle, kein Rewrite" + Referenzdateien. ================================================================ */ /* ---------- 1 · Tokens --------------------------------------- */ :root{ --navy:#223554; --navy-deep:#1a2942; --red:#CD4A2F; --red-dark:#b03d25; --red-light:#E06A4C; /* Rot auf dunklem Grund */ --paper:#F7F5EC; /* Seitenhintergrund */ --paper-bright:#FDFCF8; /* Wechselsektion */ --sand:#EFEDE3; /* hervorgehobene Flaeche */ --ink:#223554; --muted:#5E6B66; --line:rgba(34,53,84,.18); --line-strong:rgba(34,53,84,.25); --on-navy:rgba(247,245,236,.75); --on-navy-line:rgba(247,245,236,.4); --display:'Newsreader', Georgia, 'Times New Roman', serif; --serif:'Gantari','Plus Jakarta Sans',Arial,sans-serif; /* Komponententitel */ --sans:'Gantari','Plus Jakarta Sans',Arial,sans-serif; --mono:'IBM Plex Mono','DM Mono',ui-monospace,monospace; } /* ---------- 2 · Grundlagen ----------------------------------- */ body{background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);} .container{width:min(1240px, calc(100% - 96px));} section{padding:110px 0;} /* Alles eckig */ .button,.header-cta,.menu-button,.contact-form,.contact-form input,.contact-form textarea, .contact-form select,.credentials span,.evidence-chain span,.evidence-note,.hero-panel, .problem-item,.entry-link,.profile-card,.pcard,.phase,.callout,.callout-inner,.result-box, .factsheet,.outcome,.process-step,.crosslink,.variant,.followon,.framework-proof,.chain span, .phase-tag,.trust-creds span,.page-index,.pledge,.delivers{border-radius:0;} /* Headline-Typografie: Newsreader 500 fuer H1/H2 */ h1,h2,.page-hero h1,.section h2,.callout h2,.section-intro h2,.approach-head h2, .evidence-copy h2,.profile-copy h2,.contact-copy h2{ font-family:var(--display) !important; font-weight:500 !important; letter-spacing:-.01em !important; } h1 em,h2 em,.page-hero h1 em,.section h2 em,.callout h2 em{color:var(--red);font-style:italic;font-weight:500;} h1{line-height:1.04;} h2{line-height:1.08;} /* H3 und Komponententitel: Gantari 600 */ h3{font-family:var(--sans);font-weight:600;line-height:1.22;letter-spacing:-.01em;} /* Eyebrow: 28px-Strich + Mono-Label */ .eyebrow{color:var(--red);font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;gap:14px;} .eyebrow:before{width:28px;height:2px;} .eyebrow-light,.section-navy .eyebrow{color:var(--red-light);} /* Links */ a:hover{color:inherit;} :focus-visible{outline:3px solid var(--red);outline-offset:3px;} /* ---------- 3 · Buttons -------------------------------------- */ .button{ min-height:0;padding:14px 22px;gap:10px; font:600 15px var(--sans);letter-spacing:0; border:1px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease; } .button:hover,.button:focus-visible{transform:none !important;box-shadow:none !important;} .button span{color:inherit;font-family:var(--mono);font-size:15px;} .button-red{color:#fff;background:var(--red);border-color:var(--red);} .button-red:hover{color:#fff;background:var(--navy);border-color:var(--navy);} .button-outline{color:var(--navy);background:transparent;border:1px solid var(--navy);} .button-outline:hover{color:var(--paper);background:var(--navy);} .button-outline span{color:inherit;} .quiet-link{ display:inline-flex;align-items:center;gap:10px; border-bottom:2px solid var(--red);padding-bottom:4px; font:600 16px var(--sans); } .quiet-link span{margin-left:0;color:var(--red);font-family:var(--mono);font-size:16px;} /* ---------- 4 · Topbar, Header, Footer ------------------------ */ .utility-bar{background:var(--navy);color:var(--paper);font:400 11px var(--mono);letter-spacing:.14em;} .utility-inner{padding:10px 0;} .site-header{background:rgba(247,245,236,.96);border-bottom:1px solid var(--line);} .logo{font:700 30px/1 var(--sans);letter-spacing:.02em;color:var(--navy);} .main-nav{gap:32px;} .main-nav a{font:500 15px var(--sans);} .header-cta{ padding:14px 22px;font:600 15px var(--sans); background:var(--navy);color:var(--paper); transition:background .18s ease; } .header-cta:hover{background:var(--red);color:var(--paper);} .header-cta span{color:inherit;font-family:var(--mono);font-size:15px;} .mobile-nav a{font:500 15px var(--sans);} .site-footer{padding:40px 0;background:var(--navy);color:rgba(247,245,236,.85);} .site-footer p{font:400 13px/1.6 var(--sans);} .site-footer small{color:rgba(247,245,236,.6);font-size:11px;} .site-footer nav a{font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;} .site-footer nav a:hover{color:var(--red-light);} /* ---------- 5 · Hero ----------------------------------------- */ .hero{padding:110px 0 56px;} .hero-wide h1{font-size:clamp(2.5rem,5.1vw,4.5rem);line-height:1.04;margin-top:28px;} .hero-wide .hero-row{gap:72px;margin-top:40px;} .hero-text{color:var(--muted);font:400 18px/1.65 var(--sans);} .hero-proof li{border-top:1px solid var(--navy);color:var(--navy);font:400 13px/1.5 var(--mono);letter-spacing:.02em;padding-top:14px;} .hero-panel{padding:44px 42px 52px;background:var(--navy);color:var(--paper);box-shadow:10px 10px 0 var(--red);transform:none;} .panel-label{color:rgba(247,245,236,.85);font:400 12px var(--mono);letter-spacing:.18em;} .panel-rule{background:rgba(247,245,236,.35);margin-top:20px;} .panel-routes li{border-top-color:rgba(247,245,236,.32);} .panel-routes a{ color:var(--paper); font:600 clamp(1.15rem,1.65vw,1.45rem)/1.2 var(--sans);letter-spacing:-.005em; padding:20px 0;gap:16px; } .panel-routes .rk{color:var(--red-light);font:500 15px var(--mono);} .panel-routes .rx{color:var(--red-light);font-family:var(--mono);font-size:18px;} .panel-routes a:hover,.panel-routes a:focus-visible{color:#fff;} .foot-block{border-top:2px solid var(--red);} .foot-q{color:var(--paper);font:600 1.25rem/1.25 var(--sans);letter-spacing:-.005em;} .foot-link{color:var(--paper);border-bottom:2px solid var(--red-light);font:600 15px var(--sans);} .foot-link span{color:var(--red-light);font-family:var(--mono);font-size:16px;} .hero-footer{color:var(--navy);font:400 12.5px var(--mono);letter-spacing:.04em;text-transform:none;margin-top:64px;} .red-marker{width:24px;height:2px;background:var(--red);border-radius:0;} .hero-line{background:var(--line);} /* ---------- 6 · Sektionsgrundlagen ---------------------------- */ .section-light{background:var(--paper);border-top:1px solid var(--line);} .section-paper{background:var(--paper-bright);border-top:1px solid var(--line);} .section-sand{background:var(--sand);border-top:1px solid var(--line);} .section-navy{background:var(--navy);color:var(--paper);} .section-intro h2{font-size:clamp(2.1rem,4.2vw,3.375rem);margin-top:20px;} .section-intro > p:last-child{color:var(--muted);font-size:17px;line-height:1.6;max-width:620px;} .section-navy .section-intro > p:last-child{color:var(--on-navy);} /* ---------- 7 · Drei Ausgangssituationen (A/B/C) -------------- */ .entries .entries-intro h2{font-size:clamp(2.1rem,4.1vw,3.375rem);} .entries .entry-list{margin-top:64px;border-top:1px solid var(--navy);} .entries .entry-card{ grid-template-columns:190px minmax(0,1fr) minmax(0,1fr) auto; gap:36px;align-items:center; padding:44px 24px; border-bottom:1px solid var(--line-strong); } .entries .entry-card:last-child{border-bottom:1px solid var(--navy);} .entries .entry-card::before{left:0;width:3px;} .entries .entry-meta{display:block;padding-top:0;} .entries .entry-meta span{display:block;margin-bottom:12px;color:var(--red);font:500 56px/1 var(--display);letter-spacing:0;} .entries .entry-meta p{margin:0;color:var(--navy);font:400 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;} .entries .entry-meta p::before{content:none;} .entries .entry-card h3{font-size:23px;line-height:1.3;} .entries .entry-card > p:not(.entry-meta p){color:var(--muted);font-size:14.5px;line-height:1.6;} .entries .entry-link{ align-self:center;justify-self:end;margin-top:0; padding:14px 20px;border:1px solid var(--red);color:var(--red);background:transparent; font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase; } .entries .entry-link span{font-family:var(--mono);font-size:12px;} .entries .entry-card:hover,.entries .entry-card:focus-visible{background:rgba(34,53,84,.05);box-shadow:none;} .entries .entry-card:hover .entry-link,.entries .entry-card:focus-visible .entry-link{background:var(--red);color:var(--paper);} /* Hervorgehobene Zeile (B) — Muster aus der Referenz */ .entries .entry-list > .entry-card:nth-child(2){ background:var(--sand);border-left:3px solid var(--red);padding-left:21px; } .entries .entry-list > .entry-card:nth-child(2)::before{display:none;} .entries .entry-list > .entry-card:nth-child(2) h3{color:var(--red);} .entries .entry-list > .entry-card:nth-child(2) .entry-link{background:var(--red);color:var(--paper);} .entries .entry-list > .entry-card:nth-child(2):hover .entry-link{background:var(--navy);border-color:var(--navy);} .entries .entries-intro p.entries-stance{ color:var(--navy);font:600 clamp(1.15rem,1.7vw,1.4rem)/1.3 var(--sans);letter-spacing:-.005em; } @media (max-width:1120px) and (min-width:901px){ .entries .entry-card{grid-template-columns:170px minmax(0,1fr);gap:20px 32px;align-items:start;} .entries .entry-meta{grid-row:span 3;} .entries .entry-card h3,.entries .entry-card > p:not(.entry-meta p){grid-column:2;} .entries .entry-link{grid-column:2;justify-self:start;align-self:start;} } @media (max-width:900px){ .entries .entry-card{grid-template-columns:1fr;padding:32px 16px;gap:14px;align-items:start;} .entries .entry-list > .entry-card:nth-child(2){padding-left:13px;} .entries .entry-meta span{font-size:44px;margin-bottom:8px;} .entries .entry-link{justify-self:start;} } /* ---------- 8 · SUSA-Ansatz (Navy) --------------------------- */ .approach-head h2{font-size:clamp(2.2rem,4.5vw,3.75rem);} .approach-head > p:last-child{color:var(--on-navy);font-size:17px;line-height:1.65;} .approach-block{border-top:1px solid var(--on-navy-line);padding-top:24px;} .approach-block > span{color:var(--red-light);font:400 13px var(--mono);} .approach-block h3{color:var(--paper);font-size:25px;margin-top:20px;} .approach-block p{color:var(--on-navy);font-size:15px;line-height:1.6;} /* ---------- 9 · Praxisnah (2x2) ------------------------------ */ .practice-list > div{border-top:2px solid var(--navy);padding-top:20px;} .practice-list span{color:var(--red);font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;} .practice-list p{color:var(--muted);font-size:15px;line-height:1.6;margin-top:16px;} /* ---------- 10 · Evidenz / 400+ ------------------------------ */ .evidence-note{ padding:48px 40px 44px;background:var(--paper-bright); border:1px solid var(--navy);box-shadow:10px 10px 0 var(--red); } .big-mark{margin-top:0;color:var(--navy);font:700 84px/1 var(--sans);letter-spacing:-.02em;} .big-mark span{color:var(--red);font-size:inherit;} .evidence-note > p:last-child{max-width:230px;margin-top:24px;color:var(--navy);font:400 12px/1.7 var(--mono);letter-spacing:.12em;} .evidence-copy h2{font-size:clamp(2.1rem,4.2vw,3.375rem);} .evidence-copy > p{color:var(--muted);font-size:17px;line-height:1.65;} .evidence-chain{color:var(--navy);font:400 13px var(--mono);gap:12px;} .evidence-chain span{padding:10px 16px;border:1px solid var(--navy);} .evidence-chain i{color:var(--red);font-family:var(--mono);} /* ---------- 11 · Profil -------------------------------------- */ .profile-card{box-shadow:10px 10px 0 var(--red);} .profile-card-bottom{color:var(--red-light);font:400 11px/1.4 var(--mono);letter-spacing:.12em;} .profile-copy h2{font-size:clamp(2.1rem,4.2vw,3.375rem);} .profile-copy > p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65;} .credentials span{padding:10px 16px;border:1px solid var(--navy);font:400 12px var(--mono);} /* ---------- 12 · FAQ (Navy) ---------------------------------- */ .faq-list,.faq-list details{border-color:var(--on-navy-line);} .faq-list summary{color:var(--paper);font:600 21px var(--sans);letter-spacing:-.01em;padding:22px 0;} .faq-list summary span{color:var(--red-light);font-family:var(--sans);font-size:25px;} .faq-list details p{color:var(--on-navy);font-size:15px;line-height:1.6;} /* ---------- 13 · Kontakt / Formular -------------------------- */ .contact-copy h2{font-size:clamp(2.1rem,4.2vw,3.375rem);} .contact-copy > p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.65;} .contact-person a{color:var(--red);font-weight:600;} .contact-form{background:var(--paper-bright);border:1px solid var(--navy);padding:40px 36px;} .contact-form label{color:var(--navy);font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:22px;} .contact-form input,.contact-form textarea,.contact-form select{ padding:12px 14px;margin-top:8px; background:transparent;border:1px solid var(--navy); font:400 16px var(--sans);color:var(--navy); } .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{ border:1px solid var(--red);box-shadow:inset 0 0 0 1px var(--red); } .contact-form .form-consent label{font:400 13px/1.5 var(--sans);text-transform:none;letter-spacing:0;} .contact-form .form-consent a{color:var(--red);font-weight:600;} .contact-form .form-consent input[type="checkbox"]{border:1px solid var(--navy);accent-color:var(--red);} .label-optional{color:var(--muted);text-transform:none;letter-spacing:0;} .form-status{color:var(--red);font:400 12px var(--mono);letter-spacing:.04em;} /* ---------- 14 · Unterseiten (pages.css) --------------------- */ .page-hero h1{font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.04;} .section h2,.callout h2{font-size:clamp(2.1rem,4.2vw,3.375rem);line-height:1.08;} .page-lead,.lead-desc,.section p{color:var(--muted);} .navy-section{background:var(--navy);color:var(--paper);} .navy-section h2,.navy-section h3{color:var(--paper);} .result-label{color:var(--red-light);font:400 11.5px var(--mono);letter-spacing:.14em;} .row-number{color:var(--red);font:500 40px/1 var(--display);letter-spacing:0;} .pcard-num{color:var(--red);font:500 56px/1 var(--display);letter-spacing:0;} .fw-mark strong{color:var(--red);font:700 84px/1 var(--sans);letter-spacing:-.02em;} .phase-num,.followon-label,.outcome-label{letter-spacing:.12em;} .phase-tag{font-family:var(--mono);letter-spacing:.08em;} .chain span,.fw-chain span{font-family:var(--mono);} .trust-creds span,.page-index a{font-family:var(--mono);} .problem-item:hover,.problem-item:focus-visible{box-shadow:6px 6px 0 var(--red);} .problem-item::after{font-family:var(--mono);} /* ---------- 15 · Responsive Feinschliff ---------------------- */ @media (max-width:900px){ .container{width:min(100% - 48px, 700px);} section{padding:80px 0;} .hero{padding-top:70px;} } @media (max-width:540px){ .container{width:calc(100% - 36px);} .hero-wide h1{font-size:2.35rem;} .section-intro h2,.entries .entries-intro h2,.evidence-copy h2, .profile-copy h2,.contact-copy h2,.page-hero h1,.section h2{font-size:2.05rem;} .approach-head h2{font-size:2.2rem;} .big-mark,.fw-mark strong{font-size:64px;} .hero-panel{padding:32px 26px 36px;box-shadow:6px 6px 0 var(--red);} .profile-card{box-shadow:6px 6px 0 var(--red);} .evidence-note{padding:32px 26px;box-shadow:6px 6px 0 var(--red);} .contact-form{padding:26px 22px;} } /* ---------- 16 · Korrekturen nach Render-Kontrolle ------------ */ /* Footer-Logo: .logo faerbt sonst navy auf navy */ .logo-light{color:var(--paper);} /* Profilkarte: Innenabstand aus dem Alt-CSS liess das Bild nicht fuellen, dadurch lief die Bildunterschrift ohne Verlauf ueber das Foto. */ .profile-card{padding:0;} /* Durchgehende Trennlinie oberhalb der hervorgehobenen Zeile */ .entries .entry-list > .entry-card:nth-child(2){border-top:1px solid var(--line-strong);} /* Bildunterschrift auf dem Foto lesbar halten */ .profile-card:after{background:linear-gradient(180deg,rgba(26,41,66,0) 50%,rgba(26,41,66,.85));} .profile-card-bottom{color:var(--paper);} /* Labels auf Navy: Blaugrau durch Creme ersetzen (Kontrast) */ .result-lead{color:rgba(247,245,236,.85);font-size:11.5px;letter-spacing:.12em;} .result-rule{background:rgba(247,245,236,.35);} /* ---------- 17 · Restliche Blaugrau-Werte auf die warme Palette ---------- */ .navy-section .eyebrow,.fw-chain-label{color:var(--red-light);} .navy-section p,.pcard-desc,.phase-desc,.outcome p,.followon p,.followon li, .pcard li,.phase li,.variant li,.situations li,.step-body li,.lead-offer li, .factsheet dd,.delivers li{color:inherit;} .navy-section p,.navy-section li{color:var(--on-navy);} .section:not(.navy-section) p,.lead-desc,.crosslink,.fw-domain p,.fw-mark span{color:var(--muted);} .delivers li:before{color:var(--red-light);} /* Mono-Button in den A/B/C-Zeilen darf mobil umbrechen */ @media (max-width:540px){ .entries .entry-link{white-space:normal;max-width:100%;letter-spacing:.06em;padding:12px 16px;} } /* ================================================================ 18 · Hero kompakter + Vertrauenszeile ueber die volle Breite (02.09.2026) Befund: Hero war 1067px hoch — passte auf keinem 13"-Laptop auf einen Schirm (800px Viewport: 267px zu viel). Treiber war die Navy-Box mit 462px, waehrend die linke Spalte 260px Leerraum hatte, den justify-content:space-between auseinandergezogen hat. Loesung: Box verdichten, CTA fuellt den Leerraum links, die Belege laufen als eigene Zeile ueber die volle Breite darunter und bilden die gemeinsame Unterkante beider Spalten. Kein Text und kein Markup geaendert — reine Grid-Platzierung. ================================================================ */ .hero{padding:52px 0 44px;} .hero-wide h1{font-size:clamp(2.4rem,4.4vw,4rem);margin-top:26px;} .hero-wide .hero-row{ grid-template-columns:1.08fr .92fr; column-gap:64px;row-gap:0; align-items:start; margin-top:32px; } .hero-wide .hero-col{display:contents;} .hero-wide .hero-text {grid-column:1;grid-row:1;margin:0;} .hero-wide .hero-panel {grid-column:2;grid-row:1 / span 2;margin:0;align-self:start;} .hero-wide .hero-actions{grid-column:1;grid-row:2;margin-top:30px;align-self:start;} .hero-wide .hero-proof {grid-column:1 / -1;grid-row:3;margin-top:38px;} /* Fokusbox verdichtet — gleiche Bausteine, engere Masse */ .hero-panel{padding:32px 32px 36px;} .panel-rule{margin-top:16px;} .panel-routes{margin-top:4px;} .panel-routes a{padding:15px 0;gap:14px;font-size:clamp(1.05rem,1.45vw,1.3rem);} .panel-routes .rk{font-size:14px;} .panel-routes .rx{font-size:17px;} .foot-block{margin-top:20px;padding-top:18px;} .foot-q{font-size:1.1rem;} .foot-link{margin-top:10px;padding-bottom:4px;font-size:14px;} /* Belege als durchgehende Zeile — traegt 3 oder 4 Eintraege */ .hero-wide .hero-proof{display:flex;flex-wrap:wrap;gap:28px;} .hero-wide .hero-proof li{ flex:1 1 210px;padding-top:12px; border-top:1px solid var(--navy); color:var(--navy);font:400 12.5px/1.45 var(--mono);letter-spacing:.02em; } .hero-footer{margin-top:36px;} @media (max-width:900px){ /* Mobil bleibt die Reihenfolge von 01.09.: Text - Belege - Box - Button */ .hero-wide .hero-row{grid-template-columns:1fr;row-gap:34px;} .hero-wide .hero-text,.hero-wide .hero-panel, .hero-wide .hero-actions,.hero-wide .hero-proof{grid-column:1;grid-row:auto;margin-top:0;} .hero-wide .hero-proof{display:grid;grid-template-columns:1fr;gap:0;} .hero-wide .hero-proof li{padding:11px 0;border-top:1px solid var(--line);} .hero-wide .hero-proof li:first-child{border-top:1px solid var(--navy);} } /* Alt-CSS setzte .hero-panel{min-height:440px} — das hielt die Box kuenstlich hoch und machte jede Verdichtung wirkungslos. */ .hero-panel{min-height:0;} .panel-routes a{padding:13px 0;font-size:clamp(1.02rem,1.38vw,1.22rem);} .foot-block{margin-top:18px;padding-top:16px;} .hero-wide h1{font-size:clamp(2.4rem,4.2vw,3.75rem);} .hero-wide .hero-proof{margin-top:30px;} .hero-footer{margin-top:28px;} .hero{padding-bottom:36px;} /* CTA auf die Unterkante der Fokusbox — beide Spalten schliessen buendig ab */ .hero-wide .hero-actions{align-self:end;margin-top:0;} /* ================================================================ 19 · Vertrauenszeile als Fliesszeile (Variante B, 02.09.2026) Susas Entscheidung. Das Raster aus vier Spalten hatte einen handwerklichen Makel: die Oberlinien enden unterschiedlich weit, weil die Texte unterschiedlich lang sind — das franst aus. Jetzt eine durchgehende Mono-Zeile unter einer durchgehenden Linie, Trenner in Rot. Entspricht der Design-Referenz. Mobil bleibt die gestapelte Fassung, weil die Fliesszeile auf 390px in vier ungleiche Zeilen brechen wuerde. ================================================================ */ .hero-wide .hero-proof{ display:block; border-top:1px solid var(--navy); padding-top:14px; } .hero-wide .hero-proof li{ display:inline; padding:0;border:0; color:var(--navy);font:400 13px/1.9 var(--mono);letter-spacing:.03em; } .hero-wide .hero-proof li+li:before{ content:'\00a0\00a0·\00a0\00a0'; color:var(--red); } @media (max-width:900px){ .hero-wide .hero-proof{display:grid;grid-template-columns:1fr;gap:0;border-top:0;padding-top:0;} .hero-wide .hero-proof li{display:block;padding:11px 0;border-top:1px solid var(--line);font-size:12px;line-height:1.45;} .hero-wide .hero-proof li:first-child{border-top:1px solid var(--navy);} .hero-wide .hero-proof li+li:before{content:none;} } /* ================================================================ 20 · Hierarchie in der Fokusbox (02.09.2026) Frage war, ob die drei Angebote kleiner sollen. Messung: sie sind je nach Breite 17,7-19,5px, der Fliesstext daneben ist 18px — die Angebote sind also schon jetzt nicht groesser als Fliesstext, ihre Praesenz kommt aus Halbfett und Weiss auf Navy. Kleiner machen wuerde das Conversion-Modul unter Fliesstextgroesse druecken (Regression zum Befund vom 31.08.). Der eigentliche Konkurrent war die Auffangfrage: 17,6px in derselben Schnittstaerke wie die Angebote. Die tritt jetzt zurueck, die drei Wege bleiben die lautesten Elemente der Box. ================================================================ */ .foot-q{font-size:.95rem;} .foot-link{font-size:13px;} /* Auffangweg einzeilig: Frage links, Link rechts auf gemeinsamer Grundlinie. Spiegelt das Muster der Wege darueber (Text links, Pfeil rechts) und spart die komplette zweite Zeile. flex-wrap faengt schmale Breiten ab. */ .foot-block{ display:flex;flex-wrap:wrap; align-items:baseline;justify-content:space-between; gap:10px 24px; } .foot-q{margin:0;} .foot-link{margin-top:0;} /* Letzte 8px: der Hero landete bei 846px auf 845px Viewport. */ .hero{padding-bottom:28px;} /* ================================================================ 21 · Nutzenanker im Hero (A1 aus Review 2.0, 02.09.2026) Befund: Die Startseite nannte kein wirtschaftliches Ergebnis — nur Vorgehen. Das versprochene Ergebnis war "Sie wissen, wo Sie ansetzen", also Klarheit, nicht Ertrag. Der Satz sitzt zwischen Fliesstext und CTA und fuellt damit den Leerraum der linken Spalte: was ich tue -> was Sie davon haben -> Handlung. Kostet keine zusaetzliche Hero-Hoehe. ================================================================ */ .nutz{ grid-column:1;grid-row:2; margin:26px 0 0;max-width:640px; color:var(--navy); font:600 clamp(1rem,1.35vw,1.14rem)/1.5 var(--sans); letter-spacing:-.005em; } .hero-wide .hero-panel {grid-row:1 / span 3;} .hero-wide .hero-actions{grid-row:3;} .hero-wide .hero-proof {grid-row:4;} @media (max-width:900px){ .hero-wide .nutz{grid-column:1;grid-row:auto;order:2;margin-top:22px;font-size:1.05rem;} .hero-wide .hero-text{order:1;} .hero-wide .hero-proof{order:3;grid-row:auto;} .hero-wide .hero-panel{order:4;grid-row:auto;} .hero-wide .hero-actions{order:5;grid-row:auto;} } /* ================================================================ 22 · Review 3.0 (02.09.2026) ================================================================ */ /* Roter Versatz-Schatten von 10px auf 7px — an allen drei Stellen, sonst zerfaellt die Systematik. Weicht bewusst von der 10px-Vorgabe der Referenzdatei ab; entspricht Susas eigener Einstellung vom 30.08. */ .hero-panel,.evidence-note,.profile-card{box-shadow:7px 7px 0 var(--red);} /* Scroll-Hinweis ist entfernt (er stammte aus der Zeit, als der Hero ueber den Bildschirmrand lief). Das Alt-CSS blendete mobil den LETZTEN Span der Fusszeile aus — das war der Hinweis, jetzt ist es die Markenzeile. Die muss sichtbar bleiben. */ @media (max-width:900px){ .hero-footer span:last-child{display:inline-block;} } /* ================================================================ 23 · Satzspiegel und Bund (Brand-Review, 02.09.2026) ================================================================ */ /* 1a — Der rote Versatz war das einzige Element, das die rechte Satzspiegelkante brach (alles endet bei 1355, der Schatten bei 1362). Box 7px nach links: die Silhouette schliesst jetzt buendig ab, und die Silhouette ist, was das Auge als Kante liest. Nicht nach links geworfen — 400+-Karte und Profilbild werfen nach rechts unten, die Lichtrichtung muss einheitlich bleiben. */ .hero-wide .hero-panel{margin-right:7px;} /* 2c — Bund war 64px bei 115px Aussenrand; der Innenabstand muss mindestens dem Aussenrand entsprechen, sonst kleben die Spalten und die Komposition zerfaellt in "ein Klotz, viel Rand". Bund auf 96px UND Spaltenverhaeltnis von 1.08/0.92 auf 1.11/0.89: so behaelt die Textspalte ihre 635px und der Nutzenanker bleibt in voller Groesse zweizeilig. Der Verlust liegt bei der Box, die ihn vertraegt — alle drei Wege passen weiter in je eine Zeile. */ .hero-wide .hero-row{ grid-template-columns:1.11fr .89fr; column-gap:96px; } /* Befund 3 (rote H1-Zeile verkleinern) bewusst NICHT umgesetzt — Susas Entscheidung, die Zeile bleibt in voller Groesse. */ @media (max-width:900px){ .hero-wide .hero-panel{margin-right:0;} } /* ================================================================ 24 · Preiszusage an den Entscheidungspunkt (03. Kundenrunde) Befund: „Fester Umfang, fester Preis" war das Element, das alle drei Testrollen unabhaengig als Grund zum Weiterlesen nannten — stand aber in 12,5px Mono an der unteren Bildschirmkante. Jetzt rechts neben dem CTA: dort lagen rund 400px ungenutzt, direkt an der Stelle, an der die Entscheidung faellt. Die Hero-Fusszeile entfaellt damit ganz. ================================================================ */ .hero-wide .hero-actions{ display:flex;align-items:center;gap:26px;flex-wrap:wrap; } .cta-note{ margin:0;max-width:270px; color:var(--navy); font:500 14.5px/1.45 var(--sans);letter-spacing:-.005em; } @media (max-width:900px){ .hero-wide .hero-actions{gap:16px;} .cta-note{max-width:none;font-size:14px;} } /* KORREKTUR: Abschnitt 23 setzt grid-template-columns ohne Media-Query und ueberschrieb damit die einspaltige Mobilfassung aus Abschnitt 18. Muss nach 23/24 stehen, sonst bleibt der Hero mobil zweispaltig. */ @media (max-width:900px){ .hero-wide .hero-row{grid-template-columns:1fr;column-gap:0;} } /* Zwischenband 901-1180px: Das Verhaeltnis 1.11/0.89 laesst die Box dort zu schmal werden — Wege brechen um, der Auffangweg wird zweizeilig. In diesem Band gleichmaessig teilen und den Bund verkleinern. */ @media (min-width:901px) and (max-width:1180px){ .hero-wide .hero-row{grid-template-columns:1fr 1fr;column-gap:56px;} } /* ================================================================ 25 · Preiszusage in die Fokusbox (02.09.2026) Susas Befund, und er ist richtig: direkt neben "Vorgespraech vereinbaren" liest sich "fester Preis" so, als koste das Vorgespraech etwas. Genau die falsche Botschaft am Einstieg. Jetzt unter den drei Wegen — also bei genau den Dingen, die tatsaechlich etwas kosten. Die Position liefert das Subjekt, der Satz braucht keins. .cta-note ist damit gegenstandslos. ================================================================ */ .panel-preis{ margin:14px 0 0; color:rgba(247,245,236,.85); font:400 12px/1.5 var(--mono);letter-spacing:.02em; } @media (max-width:900px){ .panel-preis{font-size:12px;line-height:1.6;} } /* ================================================================ 26 · Footer-Signatur (B1, 02.09.2026) „Prozess. Technologie. Compliance." war eine zweite, aeltere Fassung der Positionierung neben dem Hero-Eyebrow. Jetzt „…Datenschutz & Mitbestimmung." — dafuer muss die Mittelspalte breiter werden, sonst bricht die Signatur um. Mit min-width geschuetzt: das Alt-CSS stellt den Footer unter 901px auf 1fr 1fr und unter 541px auf 1fr — das darf nicht ueberschrieben werden (derselbe Fehler wie in Abschnitt 23). ================================================================ */ @media (min-width:901px){ .footer-grid{grid-template-columns:.8fr 1.7fr 1.5fr;} } /* ============================================================ 27 — A8: zwei optische Korrekturen (Brand-Designer-Befunde) ------------------------------------------------------------ a) Header-CTA war 30px vom letzten Navlink entfernt, die Navlinks untereinander 32px. Der gefüllte Block las sich dadurch als vierter Menüpunkt. 48px = 1.5x der Navi-Einheit: eigenständiges Element, ohne sich von der Gruppe zu lösen. b) Kursive H1-Zeile: gemessen setzte die Schrift der kursiven Zeile 2.33px weiter links an als die aufrechte darüber (untere Serife des kursiven B). 0.027em (~1.5px bei 56px) gleicht optisch aus; die volle Differenz überkorrigiert sichtbar. Nur H1 — bei kleinbuchstabigen Kursivzeilen (FAQ-H2 "sprechen.") tritt der Effekt nicht auf. ============================================================ */ @media (min-width:901px){ .header-cta{margin-left:18px;} /* 30px + 18px = 48px */ } .hero-wide h1 em{margin-left:.027em;} /* ============================================================ 28 — Kursivzeile auf Navy: Kontrast ------------------------------------------------------------ var(--red) #CD4A2F auf var(--navy) #223554 erreicht 2.71:1. WCAG AA verlangt für große Schrift 3:1 — durchgefallen. #E69A8E ist der Akzent, den die Navy-Abschnitte ohnehin führen (Eyebrow, Panel-Label) und erreicht 5.5:1. Gilt für beide Klassenschreibweisen: Startseite .section-navy, Unterseiten .navy-section. ============================================================ */ .section-navy h2 em, .navy-section h2 em{color:#E69A8E;} /* ============================================================ 29 — Kontrast: WCAG AA auf allen sechs Seiten ------------------------------------------------------------ Gemessen vorher: 74 Textstellen unter dem Grenzwert (Normalschrift 4.5:1, große Schrift ab 24px 3:1). Vier Ursachen, hier der Reihe nach behoben. a) --red-light war #E06A4C (3.72:1 auf Navy). Das Alt-CSS hatte dafür #E69A8E (5.50:1). Rückbau auf den alten Wert. b) --red #CD4A2F als KLEINTEXT auf hellem Grund: 3.88-4.43. Dafür --red-text #B93E26: 4.73-5.41. Die Flächen (Button, Versatz-Schatten, rote Karte) und die großen Kursivzeilen behalten #CD4A2F — bei Displaygröße gilt 3:1, das besteht. c) Absätze in Navy-Abschnitten erbten --muted (2.21:1). Die Startseite hatte die Aufhellung, die Unterseiten heißen .navy-section statt .section-navy und wurden vergessen. d) Paper-Text auf roter Fläche (4.16) → reines Weiß (4.55). ============================================================ */ :root{ --red-light:#E69A8E; /* Rot auf dunklem Grund — 5.50:1 */ --red-text:#B93E26; /* Rot als Kleintext auf hellem Grund */ } /* b) Kleintext in Rot auf hellen Flächen */ .eyebrow, .entry-link, .entry-link span, .entry-card h3, .quiet-link, .quiet-link span, .followon-label, .crosslink a, .contact-person a, .form-consent a, .container.legal p a, .practice-list span, .process-step span, .evidence-chain i, .fw-chain .chain i, .item-number{color:var(--red-text);} /* Ausnahmen: dieselben Klassen auf dunklem Grund bleiben hell */ .section-navy .eyebrow, .navy-section .eyebrow, .eyebrow-light{color:var(--red-light);} /* e) Punkt im Footer-Logo steht auf Navy */ .site-footer .logo span{color:var(--red-light);} /* c) Absätze in Navy-Abschnitten */ .navy-section .section-intro > p{color:#C2CBD2;} .navy-section .section-intro > p.eyebrow{color:var(--red-light);} /* d) Text auf roter Fläche */ .entry-card-featured .entry-link, .entry-card-featured .entry-link span{color:#fff;} /* 29b — Nachzügler: Regeln im Bestand mit höherer Spezifität. Die hervorgehobene B-Zeile ist :nth-child(2), keine eigene Klasse. */ .entries .entry-card .entry-link, .entries .entry-card .entry-link span{color:var(--red-text);} .entries .entry-list > .entry-card:nth-child(2) h3{color:var(--red-text);} .entries .entry-list > .entry-card:nth-child(2) .entry-link, .entries .entry-list > .entry-card:nth-child(2) .entry-link span, .entries .entry-card:hover .entry-link, .entries .entry-card:hover .entry-link span, .entries .entry-card:focus-visible .entry-link, .entries .entry-card:focus-visible .entry-link span{color:#fff;} .contact-form .form-consent a{color:var(--red-text);} /* ============================================================ 30 — Über-mich-Block: Foto kleiner, Spalten enger (P2) ------------------------------------------------------------ Vorher: linke Spalte 424px, Foto nur 360px — 174px Lücke zwischen Bildkante und Textanfang, die Sektion zerfiel in zwei Inseln. Jetzt Foto 300px, Spalte .55fr, Abstand 96px: Lücke 111px, Textspalte 706 → 829px. Die breitere Textspalte ist zugleich die Voraussetzung dafür, dass die H2 mit erzwungenem Umbruch dreizeilig bleibt statt vierzeilig — die beiden „Ihre" stehen dann untereinander. Die Sektionshöhe ändert sich nicht: sie kommt aus der Textspalte, nicht aus dem Bild (gemessen, alle Varianten 683px). Guard bei 901px, darunter ist das Raster ohnehin einspaltig. ============================================================ */ @media (min-width:901px){ /* minmax statt reinem Bruchteil: bei 901-1100px schrumpfte das Foto sonst auf 195px und die Bildunterschrift lag im Gesicht. Untergrenze 240px, gemessen. */ .profile-grid{grid-template-columns:minmax(240px,.55fr) 1.45fr; column-gap:96px;row-gap:0;align-items:start;} /* Ausrichtung: Bild und Textblock teilen sich Ober- UND Unterkante. Vorher align-items:center — das Foto war gegen die ganze Textspalte zentriert und richtete sich an nichts aus (Oberkante 65px unter der H2, Unterkante 30px unter dem Absatz, beides Zufallswerte). Kopf- oder fußbündig allein hält nur bei einer Breite: der Absatz wächst beim Umbrechen, gemessene Abweichung bei 901px = 151px. align-self:stretch richtet per Regel aus, bei jeder Breite. Preis: das Seitenverhältnis des Fotos ist nicht mehr fest (1:1.33 bei 1470px, 1:1.71 bei 901px). Zuschnitt geprüft — das Bild wird ohnehin von oben beschnitten, das Gesicht bleibt ganz. */ .profile-copy{display:contents;} .profile-copy h2{grid-column:2;grid-row:1;margin:0;} .profile-copy > p:not(.eyebrow){grid-column:2;grid-row:2;margin:22px 0 0;} .profile-card{grid-column:1;grid-row:1 / span 2;max-width:300px; align-self:stretch;aspect-ratio:auto;} /* Chips als Fuß des Abschnitts über beide Spalten — dieselbe Figur wie die Vertrauenszeile unter dem Hero. Passen dadurch in eine Reihe. */ .credentials{grid-column:1 / -1;grid-row:3;margin-top:46px;} /* display:contents erzeugt keine Box, deshalb liefe die Einblend- Animation auf .profile-copy ins Leere. Sie wandert auf die Kinder. */ .profile-copy.reveal{animation:none;} .profile-copy h2, .profile-copy > p:not(.eyebrow), .credentials{animation:rise .7s .15s both;} } /* ============================================================ 31 — Angebotssektion: drei Karten statt Liste ------------------------------------------------------------ Susas Befunde 03.09.: Die Sektion passte nicht auf einen Bildschirm (1122px), es war nicht zu sehen, dass es drei verschiedene Angebote sind, und die drei Buttons hatten drei Breiten (240/191/199). Entschieden: a) Drei Karten nebeneinander (Fassung G3): Sandflaeche, 3px Navy-Oberkante als Kartenkopf. Navy zieht auf dieser Seite ohnehin die Linien — keine neue Aufgabe fuer eine Farbe. Verworfen: rote Oberkante (Rot bekaeme eine zweite Aufgabe neben der Handlung), Papierkarten (zu nah am Sektionsgrund), Karten ohne Flaeche (loest den Ausgangsbefund nicht). b) A/B/C entfernt — in den Karten UND in der Hero-Fokusbox. Die Buchstaben standen nur auf index.html, auf keiner Angebotsseite. In der Liste waren sie das einzige Signal fuer Gleichrangigkeit; in Spalten traegt das Raster diese Aufgabe. (HTML-Aenderung, nicht hier.) c) Hervorhebung der mittleren Karte zurueckgebaut — E1 erledigt. Drei gleichrangige Angebote, keine Empfehlung. d) Button-Kasten raus (Fassung B7): die ganze Karte ist bereits ein , der Kasten war ein Button im Button und lenkte den Klick auf einen Punkt, an dem er nicht noetig ist. Stattdessen Kartenfuss — Haarlinie oben, Text links, Pfeil rechts aussen, volle Kartenbreite. Damit gleich breit ohne Rahmen. e) Hover und Tastaturfokus: Karte wird Navy (Fassung H1) — dasselbe Objekt wie die Fokusbox im Hero. Zustand, kein Inhalt: auf Touch geht nichts verloren, weil die ganze Karte tippbar ist; deshalb unter @media (hover:hover), damit der Zustand auf Touch nicht haengen bleibt. Gemessen im Hover: Label 7.49 · H3 11.28 · Fliesstext 7.49 · Link 5.50. Verworfen: Karte wird rot (alle vier Werte exakt 4.55, kein Spielraum, und eine 380x340-Flaeche ist ein sehr grosser Reiz fuer "hier ist der Zeiger"). Verworfen: Sand verdunkeln (Fliesstext 4.21 / Link 4.20 — reisst AA. Hover-Zustaende prueft das Kontrast-Audit nicht mit). f) Polster 110 -> 84, Listenabstand 64 -> 40. Sektion 1122 -> 845px, passt damit auf 845px Viewport (MacBook Air 13,6"). Reparatur nebenbei: Abschnitt 29 hatte .entry-card h3 pauschal auf --red-text gesetzt. Dadurch waren alle drei Ueberschriften rot und die damalige Auszeichnung der mittleren Karte wirkungslos. Achtung bei kuenftigen Aenderungen: Abschnitt 7 und 29b adressieren die mittlere Karte als :nth-child(2). Jede Regel hier braucht die gleiche Adressierung, sonst greift sie ausgerechnet dort nicht. ============================================================ */ /* --- a) Karte: Aufbau und Flaeche, alle Breiten --- */ .entries .entry-card, .entries .entry-list > .entry-card:nth-child(2){ display:flex;flex-direction:column;align-items:stretch;gap:0; background:var(--sand); border:1px solid transparent;border-top:3px solid var(--navy); transition:background .18s ease,border-color .18s ease; } .entries .entry-card::before, .entries .entry-list > .entry-card:nth-child(2)::before{display:none;} .entries .entry-card h3, .entries .entry-list > .entry-card:nth-child(2) h3{ color:var(--navy);font-size:21px;line-height:1.28;margin:0 0 12px; } .entries .entry-meta{display:block;margin-bottom:14px;padding-bottom:0;border-bottom:none;} .entries .entry-meta span{display:none;} /* Sicherung, falls ein A/B/C zurueckkehrt */ .entries .entry-meta p{margin:0;color:var(--navy);font:400 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;} .entries .entry-card > p:not(.entry-meta p){margin:0 0 24px;color:var(--muted);font-size:14px;line-height:1.55;} /* --- d) Kartenfuss statt Button --- */ .entries .entry-list > .entry-card .entry-link, .entries .entry-list > .entry-card:nth-child(2) .entry-link{ margin-top:auto;width:100%;box-sizing:border-box; display:flex;align-items:center;justify-content:space-between; background:none;border:none;border-top:1px solid var(--line-strong); padding:14px 0 0;text-align:left;text-transform:none;letter-spacing:0; font:600 15px var(--sans);color:var(--red-text);white-space:normal; } .entries .entry-list > .entry-card .entry-link span, .entries .entry-list > .entry-card:nth-child(2) .entry-link span{ font-family:var(--sans);font-size:16px;color:var(--red-text); transition:transform .18s ease; } /* --- e) Hover und Tastaturfokus: Karte wird Navy --- */ @media (hover:hover){ .entries .entry-list > .entry-card:hover, .entries .entry-list > .entry-card:nth-child(2):hover{ background:var(--navy);border-top-color:var(--red);box-shadow:none; } .entries .entry-list > .entry-card:hover h3, .entries .entry-list > .entry-card:nth-child(2):hover h3{color:var(--paper);} .entries .entry-list > .entry-card:hover .entry-meta p, .entries .entry-list > .entry-card:nth-child(2):hover .entry-meta p{color:#C2CBD2;} .entries .entry-list > .entry-card:hover > p:not(.entry-meta p), .entries .entry-list > .entry-card:nth-child(2):hover > p:not(.entry-meta p){color:#C2CBD2;} .entries .entry-list > .entry-card:hover .entry-link, .entries .entry-list > .entry-card:nth-child(2):hover .entry-link{ background:none;color:var(--red-light);border-top-color:rgba(247,245,236,.35); } .entries .entry-list > .entry-card:hover .entry-link span, .entries .entry-list > .entry-card:nth-child(2):hover .entry-link span{ color:var(--red-light);transform:translateX(4px); } } .entries .entry-list > .entry-card:focus-visible, .entries .entry-list > .entry-card:nth-child(2):focus-visible{ background:var(--navy);border-top-color:var(--red);box-shadow:none; } .entries .entry-list > .entry-card:focus-visible h3, .entries .entry-list > .entry-card:nth-child(2):focus-visible h3{color:var(--paper);} .entries .entry-list > .entry-card:focus-visible .entry-meta p, .entries .entry-list > .entry-card:nth-child(2):focus-visible .entry-meta p{color:#C2CBD2;} .entries .entry-list > .entry-card:focus-visible > p:not(.entry-meta p), .entries .entry-list > .entry-card:nth-child(2):focus-visible > p:not(.entry-meta p){color:#C2CBD2;} .entries .entry-list > .entry-card:focus-visible .entry-link, .entries .entry-list > .entry-card:nth-child(2):focus-visible .entry-link{ background:none;color:var(--red-light);border-top-color:rgba(247,245,236,.35); } .entries .entry-list > .entry-card:focus-visible .entry-link span, .entries .entry-list > .entry-card:nth-child(2):focus-visible .entry-link span{ color:var(--red-light);transform:translateX(4px); } /* --- Raster --- */ /* Drei Spalten ab 901px. Gestapelt geprueft und verworfen: bei 901px waere die Sektion 1163px statt 854px hoch. Der Preis der Spalten ist dort eine schmale Zeile (rund 30 Zeichen) — bei 901-1023px, also einem nicht maximierten Fenster auf einem kleinen Laptop, ist das vertretbar. */ @media (min-width:901px){ .entries{padding-top:84px;padding-bottom:84px;} .entries .entry-list{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; margin-top:40px;border-top:none; } .entries .entry-card, .entries .entry-list > .entry-card:nth-child(2){padding:26px 22px 24px;} .entries .entry-card:last-child{border-bottom:1px solid transparent;} } @media (min-width:1180px){ .entries .entry-list{gap:28px;} .entries .entry-card, .entries .entry-list > .entry-card:nth-child(2){padding:30px 26px 28px;} } /* Mobil: Alt-CSS stellt bereits einspaltig; hier nur Flaeche und Fuss */ @media (max-width:900px){ .entries .entry-list{display:grid;grid-template-columns:1fr;gap:18px; margin-top:36px;border-top:none;} .entries .entry-card, .entries .entry-list > .entry-card:nth-child(2){padding:24px 20px 22px;} .entries .entry-card:last-child{border-bottom:1px solid transparent;} .entries .entry-card h3, .entries .entry-list > .entry-card:nth-child(2) h3{font-size:20px;} } /* ============================================================ 32 — Angebotskarten: Ergebnis als eigene Zeile ------------------------------------------------------------ Susas Entscheidung 03.09. nach zwei externen Reviews: Die Karten sollen benennen, was am Ende auf dem Tisch liegt — und zwar als eigener Block, nicht im Fliesstext. a) Neuer Block .entry-result zwischen Fliesstext und Kartenfuss: kleines rotes Label "Ergebnis", darunter drei Liefergegenstaende untereinander in Mono-Versalien. Untereinander statt in einer Zeile, weil Mono-Versalien die breiteste Satzart sind: in einer Zeile brachen die Begriffe mitten im Wortpaar um ("NAECHSTER / SCHRITT"), und zwar in jeder Karte anders. Untereinander bricht nichts, und es ist dieselbe Figur wie die Ergebnisbox auf der jeweiligen Zielseite. b) Die Begriffe sind woertlich von den Zielseiten genommen, nicht erfunden: "schriftliche Analyse" und "Ergebnisbesprechung" (Standortbestimmung), "Anforderungsprofil" und "Entscheidungsvorlage" (Auswahlbegleitung, dort 7x), "priorisierte Ansatzpunkte" und "Ergebnisunterlage" (Systemnutzung). Jeder Begriff steht genau einmal. c) Die Fliesstexte beschreiben jetzt das Vorgehen statt des Ergebnisses (HTML-Aenderung, nicht hier). Sonst stuende das Ergebnis zweimal in derselben Karte — einmal als Nebensatz, einmal als Liste. Arbeitsteilung: Ueberschrift = Ihre Lage, Fliesstext = wie ich arbeite, Ergebnis = was Sie bekommen. Alle drei Fliesstexte sind bei 1470px vierzeilig (Susas Vorgabe). Karte 302 -> 401px, Sektion 726 -> 824px. Bleibt unter den 845px Viewport des MacBook Air. Bekannte Schwaeche: bei 901-1023px laufen die laengeren Texte in den schmalen Spalten auf 8/7/6 Zeilen, Sektion dort 934px. ACHTUNG Hover: Der Navy-Hover aus Abschnitt 31 kannte diesen Block nicht — die Begriffe waeren navy auf navy gestanden, Kontrast 1,0. Die Hover- und Focus-Regeln unten faerben ihn mit. Nach jeder Aenderung an Hover-Farben erneut messen; das Kontrast-Audit prueft Hover-Zustaende nicht mit. ============================================================ */ .entries .entry-result{margin:0 0 20px;} .entries .entry-result-tag{ display:block;margin:0 0 6px; font:400 10.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--red-text); } .entries .entry-result ul{margin:0;padding:0;list-style:none;} .entries .entry-result li{ margin:0; font:400 11px/1.75 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--navy); } @media (max-width:900px){ .entries .entry-result{margin:2px 0 18px;} } /* Hover und Tastaturfokus — gleiche Adressierung wie Abschnitt 31, weil Abschnitt 7 die mittlere Karte als :nth-child(2) fuehrt. */ @media (hover:hover){ .entries .entry-list > .entry-card:hover .entry-result li, .entries .entry-list > .entry-card:nth-child(2):hover .entry-result li{color:#C2CBD2;} .entries .entry-list > .entry-card:hover .entry-result-tag, .entries .entry-list > .entry-card:nth-child(2):hover .entry-result-tag{color:var(--red-light);} } .entries .entry-list > .entry-card:focus-visible .entry-result li, .entries .entry-list > .entry-card:nth-child(2):focus-visible .entry-result li{color:#C2CBD2;} .entries .entry-list > .entry-card:focus-visible .entry-result-tag, .entries .entry-list > .entry-card:nth-child(2):focus-visible .entry-result-tag{color:var(--red-light);} /* ============================================================ 33 — Ansatz-Kopf: Ueberschrift zweizeilig, Absatz darunter ------------------------------------------------------------ Susas Befund 03.09.: Der Ansatz-Block sieht nicht rund aus, die Ueberschrift soll zweizeilig sein. Und: Warum steht der Absatz rechts neben der Ueberschrift statt darunter? Ursache der vier Zeilen, gemessen: .approach-head war im Alt-CSS ein 2-Spalten-Raster mit 1fr/1fr — bei 1470px also 575px je Spalte. „Was im Projekt entsteht," braucht bei 60px aber 625px. Die Zeile passt um 50px nicht; zusammen mit dem erzwungenen
nach „entsteht," werden aus zwei Zeilen vier, und „entsteht," und „bestehen." stehen jeweils allein am Zeilenanfang. Der eigentliche Schaden ist nicht die Zeilenzahl, sondern die Pointe: Der Satz lebt vom Paar entsteht <-> bestehen. Antwort auf die zweite Frage: Die zwei Spalten waren geerbt, nicht entschieden. Auf dieser Seite heisst „zwei Spalten" sonst immer Aussage links / Inhalt rechts (Praxisnah, Evidenz, Ueber mich, FAQ, Kontakt). Im Ansatz-Kopf stand rechts aber kein Inhalt, sondern eine Fussnote zur Ueberschrift — gleiche Form, andere Beziehung. Dazu sind 403px ein schmales Mass fuer 17px-Fliesstext (rund 45 Zeichen je Zeile). Gebaut: Kopf einspaltig, Ueberschrift ueber die volle Breite, Absatz darunter mit 640px (rund 70 Zeichen je Zeile, dadurch zweizeilig statt vierzeilig). Leseweg laeuft gerade nach unten. Sektion 798 -> 749px bei 1470. Zweizeilig ab 768px; bei 390px dreizeilig, dort richtig so. Zwischenschritt, verworfen: Spaltenverhaeltnis 1.3/0.7 — mit 668px die kuerzeste Fassung, aber sie behaelt die Fussnoten- Spalte. Susas Entscheidung fuer den geraden Leseweg, Preis 81px. Ebenfalls verworfen: Schriftgrad senken — gemessen kontra- produktiv, weil die KURSIVE zweite Zeile der begrenzende Faktor ist, nicht die erste. Wer hier wieder schraubt, misst gegen „muss im Alltag bestehen.", nicht gegen „Was im Projekt entsteht,". ============================================================ */ @media (min-width:901px){ .approach-head{grid-template-columns:1fr;} .approach-head > p:last-child{max-width:640px;align-self:start;margin:24px 0 0;} } /* ============================================================ 34 — Ansatz-Felder: konkrete Beitraege je Betrachtungsfeld ------------------------------------------------------------ Susas Befund 03.09.: Der Ansatz-Block ist inhaltlich zu duenn. Gemessen bestaetigt — Woerter je Abschnitt der Startseite: Angebote 151 · Hero 136 · FAQ 116 · Praxisnah 102 · Kontakt 83 · Ueber mich 81 · ANSATZ 72 · Evidenz 51. Ausgerechnet der Abschnitt, der die Arbeitsweise erklaeren soll, war der zweitduennste; jede einzelne Angebotskarte trug mehr Substanz als alle drei Ansatzfelder zusammen. Die Substanz war bereits geschrieben: Der alte Live-Build hatte drei Themenseiten (recruiting-prozesse, hr-tech-optimierung, hr-tech-datenschutz-betriebsrat), die Designoption 2 nicht uebernommen hat. Ihre Beitragslisten passen eins zu eins auf die drei Felder. Die Stichpunkte hier stammen daher — Susas eigene Formulierungen, nur vereinheitlicht auf Verb-Erstform. Wichtig: Damit kommt der EU AI Act erstmals wieder auf die neue Website zurueck. Er stand auf der alten Themenseite, ist beim Umbau verloren gegangen und ist laut Vertriebsplan der Wedge. Formulierung „Pruefen, wo der EU AI Act greift — und wo nicht" verspricht bewusst eine Einschaetzung, keine Pruefung — dieselbe Zurueckhaltung wie „Leisten Sie Rechtsberatung? Nein." Verworfen (Fassung P1): je ein zweiter Fliesstext-Satz statt der Liste. Gemessen fast gleich teuer (+111 statt +99px), aber Feld 03 wird darin vierzeilig, waehrend 01 und 02 zweizeilig bleiben — ausgerechnet das Feld mit der meisten Substanz kippt die Spalte. Ausserdem verschwindet die AI-Act-Aussage am Ende eines langen Satzes, statt als eigene Zeile zu stehen. Sektion 749 -> 848px bei 1470. Die Liste spiegelt bewusst die Ergebnislisten der Angebotskarten (Abschnitt 32): Fliesstext sagt, worum es geht — die Liste sagt, was konkret passiert. ============================================================ */ .approach-list{margin:14px 0 0;padding:0;list-style:none;} .approach-list li{ margin:0 0 6px;padding-left:16px;position:relative; color:#C2CBD2;font-size:13.5px;line-height:1.5; } .approach-list li:last-child{margin-bottom:0;} .approach-list li::before{content:'—';position:absolute;left:0;color:var(--red-light);} /* ============================================================ 35 — Ansatz-Felder: Haltung fuehrt den Absatz ------------------------------------------------------------ Susas Befund 03.09.: „Zeigt die Seite wirklich einen SUSA-Ansatz? Ich wuerde sagen nicht." Geprueft und bestaetigt: Auf der Startseite standen alle Methodenaussagen ausserhalb dieses Abschnitts — „Nicht jedes Problem braucht ein neues System" (Angebote), „auch wenn die Empfehlung lautet, das bestehende System zu behalten" (Praxisnah), „Eine gute Demo ist noch keine gute Systementscheidung" und „Fuer jede wichtige Aussage halte ich fest, wie belastbar sie ist" (Evidenz). Der Abschnitt, der „Der SUSA-Ansatz" heisst, enthielt als einziger keine. Grund: Er zeigte einen Betrachtungsumfang, keinen Ansatz. Die drei Felder sagten, worauf Susa schaut. Ein Ansatz sagt, in welcher Reihenfolge und nach welcher Regel. Test: Koennte ein kompetenter Wettbewerber widersprechen? Bei „Ich betrachte die gesamte Situation" nicht — bei „Erst der Prozess, dann das System" sofort. Gebaut: Jeder Absatz beginnt jetzt mit der Haltung (halbfett, Papierfarbe), danach folgt die Erlaeuterung. Die Ueberschriften bleiben die Themennamen — sie sind die einzigen Stellen der Startseite, an denen „Recruiting-Prozesse", „Recruiting-Technologie" und „Datenschutz & Mitbestimmung" als Ueberschrift vorkommen (Suchbegriffe). Die Einleitung traegt Susas Markenzeile zurueck: „Technologie soll gut gestaltete Prozesse unterstuetzen, nicht definieren." Sie stand seit dem 02.09. auf keiner Seite mehr — die Preiszusage hatte im Hero ihren Platz bekommen. Nebenbei: 01 und 02 haben ein Subjekt bekommen („Ich verstehe", „Ich pruefe") statt der Infinitivform. Das war ein Panelbefund der Recruiterin — der Block beschrieb ihren Alltag in der dritten Person. Verworfen: Haltung als UEBERSCHRIFT statt im Absatz. Gemessen 931px statt 894, Ueberschriften zwei- bis dreizeilig, Feld 03 dreizeilig waehrend 01/02 zweizeilig bleiben, und bei 901px Spaltenbruch auf 2/4/5 Zeilen (Sektion 1040px). Ausserdem entstand eine dritte Ebene je Spalte: Haltung, Erklaerung, Stichpunkte — die mittlere wirkte dabei ueberfluessig. Sektion 842 -> 894px bei 1470, Spalten an jeder Breite gleich hoch. OFFEN, bewusst getrennt: Auch mit drei Haltungen fehlt die Aussage ueber die KOMBINATION. Die drei Felder sind Susas drei Disziplinen; dass sie in einer Person zusammenkommen, ist der eigentliche Unterschied — und steht nirgends. Hero-Eyebrow, Footer und dieser Block nennen die Trias dreimal und erklaeren sie kein einziges Mal. Der Satz dazu ist eine Positionierungsentscheidung, keine Textzeile. ============================================================ */ .approach-block p strong{color:var(--paper);font-weight:600;} /* ============================================================ 36 — Praxisnah: vier Kacheln werden drei Baender ------------------------------------------------------------ Susas Befund 04.09.: Der Block war die einzige Stelle der Startseite, an der die H2 nur Adjektive ueber Susa reiht — und drei der vier Kachel-Labels standen wortgleich darin. Haltungstest ueber die vier Kacheln: „Offen & unabhaengig" und „Persoenlich" bestehen, „Praxisnah" und „Gemeinsam" fallen durch. „Gemeinsam" doppelte zusaetzlich den Intro-Absatz. Ihre Substanz — die Stakeholder-Liste und das Risiko — ist deshalb IN den Intro-Absatz gewandert, die Kachel selbst entfernt. Layout: .practice-list war ein 2x2-Raster (styles-human.css). Drei Kacheln liessen dort unten rechts eine Zelle leer; das las sich als fehlendes Element. Gerendert verglichen wurden vier Fassungen: dritte Kachel breit mit Floskel (551px), ohne Floskel (527px), „Offen" breit (551px) und drei Baender (590px). Die Messung sprach fuer die kuerzeste, der Blick fuer die letzte: nur bei drei Baendern fallen unterschiedliche Textlaengen nicht auf, weil sie dreimal konsistent vorkommen. Preis: Zeilenlaenge steigt von rund 40 auf rund 88 Zeichen. Bei zwei Zeilen je Kachel vertretbar — bei einem langen Absatz waere es das nicht. Deshalb max-width auf dem Absatz. Guard: min-width:541px, NICHT 901px. Erster Versuch war 901px — im Screenshot bei 768px zeigte sich, dass das Alt-CSS dort noch zweispaltig ist und die dritte Kachel unten rechts eine leere Zelle liess: genau die Fassung, die bei 1470px verworfen wurde. Ab 541px greift jetzt Einspaltigkeit, darunter ist styles-human ohnehin einspaltig. Ein Guard bleibt Pflicht — ohne ihn wuerde die Regel die Einspalten-Regel des Alt-CSS ueberschreiben; dieser Fehler ist im Projekt zweimal passiert. Sektion 599 -> 590px bei 1470. Alle drei Kacheln zweizeilig. ============================================================ */ @media (min-width:541px){ .practice-list{grid-template-columns:1fr;row-gap:28px;} .practice-list p{max-width:640px;} } /* ============================================================ 37 — Angebotsseiten: Seitenname und Faktenblock im Hero ------------------------------------------------------------ Kundenpanel 04.09.: Die Standortbestimmung ist ein Drittel zu lang, und die kaufrelevanten Angaben (Dauer, Aufwand, Ergebnis, Preis) stehen zu weit unten. Brand-Review 04.09. dazu: 1) Die Seite nannte ihren Namen nur im 12px-Versal-Mono-Eyebrow — dem viertgroessten Element und der schlechtesten Leseform der Seite. Wer ueber Google direkt hier landet, hat sonst nichts zur Identifikation. Daraus wurde .offer-name: 21px Navy in der Leseschrift mit 26px-Rotstrich. Kontrast 12,0:1. 2) Die Navy-Box im Hero trug den abstraktesten Inhalt der Seite (drei Substantive, auf allen Angebotsseiten fast gleich) an der auffaelligsten Stelle. Sie traegt jetzt das Angebot selbst: Dauer, Aufwand, Ergebnis, Preis. Damit entfielen die eigene Faktensektion und die Orientierungszeile im Hero. GEMESSENE LEHRE: Woerter streichen macht diese Seiten nicht kuerzer. -17% Text brachten -6% Hoehe, weil 22% der Seitenhoehe Zwischenraum sind und .situations/.variants/.process rasterhoch sind, nicht texthoch. EINE Sektion zu entfernen brachte -14%. Bei Kuerzungen zuerst fragen: welche Sektion kann ganz weg? Standortbestimmung: 7617 -> 5392px bei 1470, 9 -> 6 Sektionen. Guard: .box-facts bricht bei max-width:540 auf eine Spalte. Kontrast in der Box: Label 5,50 · Begriff 5,50 · Wert 10,86. ============================================================ */ .hero-offer .offer-name{margin:0 0 14px;color:var(--navy);font:600 21px/1.3 var(--sans);letter-spacing:-.01em;display:flex;align-items:center;gap:14px;} .hero-offer .offer-name:before{content:'';width:26px;height:2px;background:var(--red);flex:none;} .hero-offer .result-box{min-height:0;} .box-facts{margin:22px 0 0;} .box-facts > div{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:11px 0;border-bottom:1px solid rgba(245,242,234,.22);} .box-facts > div:last-child{border-bottom:0;} .box-facts dt{margin:0;color:#e69a8e;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;align-self:start;padding-top:2px;} .box-facts dd{margin:0;color:#eef1f4;font-size:14px;line-height:1.45;} @media (max-width:540px){.box-facts > div{grid-template-columns:1fr;gap:4px;}} .mini-label{font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-text);margin:64px 0 22px;} /* ============================================================ 38 — Angebotsseiten: Inhaltsbreite 900 -> 1120px ------------------------------------------------------------ Susas Befund 04.09.: Die Varianten-Sektion passt nicht auf einen Screen. Gemessen war sie 1096px, davon nur 43% der eigentliche Vergleich; 57% waren Rahmen. Die Ursache lag nicht in der Sektion, sondern in der Seite: .section-inner stand auf max-width:900px (pages.css). Bei 1470px Fenster blieben 900px Inhalt zwischen 285px Rand — jede Zeile in den Varianten-Karten brach deshalb um. Gemessene Kipp-Punkte (Sektionshoehe bei 1470px): 900px -> 966 · 1000px -> 918 · 1120px -> 896 · 1240px -> 896. Ueber 1120px bringt Breite nichts mehr, weil die Zeilenhoehe immer von der laengeren der beiden Spalten bestimmt wird. VERWORFEN: die Sektion einzeln ueber den Container ausbrechen lassen (negative Margins). Bringt dasselbe, erzeugt bei 1101px Ueberlauf und laesst die Tabelle 115px vor der H2 beginnen — die durchgehende linke Textkante ist laut Brand-Review das, was die Seiten als ein System lesbar macht. VERWORFEN: die zwei Karten durch eine Vergleichstabelle ersetzen (war 842px). Susa: optisch nicht ansprechend — und ein dichtes Raster ist die Bildsprache von Preisseiten, nicht die dieser Marke. Die Karten bleiben. Fliesstext waechst NICHT mit: die Absaetze haben eigene Maximalbreiten (720px bzw. 620px). Zeilenlaenge unveraendert. Sektion 1096 -> 895px bei 1470. Seite 5444 -> 5243px. Gilt fuer alle drei Angebotsseiten (.section-inner). ============================================================ */ @media (min-width:1101px){ .section-inner{max-width:1120px;} } .variant li{padding-top:8px;padding-bottom:8px;} .variants{gap:28px;} /* ============================================================ 39 — Kontrast: .crosslink in getoenten Sektionen ------------------------------------------------------------ Echter WCAG-Verstoss, bestand seit Langem und wurde vom bisherigen Audit uebersehen, weil dieses den Alphawert des Hintergrunds ignorierte (background:rgba(24,52,82,.045) wurde gegen volles Navy statt gegen den hellen Grund gerechnet). Gemessen auf systemnutzung.html, 14,5px, noetig 4,5:1: Text --muted 4,41:1 · Link --red-text 4,39:1 Geprueft wurden drei Wege: A Tint der Box ganz weg 4,75 / 4,73 knapp B dunklerer Text + neues Rot 5,96 / 5,17 erfindet ein viertes Rot und bricht die Drei-Token-Regel C Box heller statt dunkler 5,19 / 5,18 gewaehlt C laesst beide Farbtokens unberuehrt und hebt die Box vom Sandgrund ab, statt sie abzudunkeln. Nur in .tinted noetig — auf ungetoentem Grund besteht die Box den Test bereits. ============================================================ */ .section.tinted .crosslink{background:rgba(255,255,255,.55);} /* ============================================================ ABSCHNITT 40 — Untersuchungsfelder: .row wird .fieldlist ------------------------------------------------------------ Ausgangslage: .row (pages.css:25) ist ein Dreispalter 80px 1fr 1.25fr — Nummer | Titel | Text. Das Markup packte h3 und p aber gemeinsam in ein
. Beide landeten damit in Spalte 2 (437px bei 1120px Inhaltsbreite), Spalte 3 (546px) blieb leer. Fast die halbe Zeilenbreite war ungenutzt, jeder Text brach auf drei Zeilen. Zwei Gruende gegen einen reinen Layout-Fix: 1. Die roten Ziffern 01-05 trugen keine Information. Die Felder sind keine Reihenfolge, sie wirken gleichzeitig. Zwei Zentimeter darunter steht die Ablaufleiste 01-04, die sehr wohl eine Reihenfolge ist. Zwei Nummerierungs- systeme im selben Blickfeld, eines davon bedeutungslos. 2. Das Brand-Review zaehlte auf der Seite 11 Komponenten- typen, davon 8 Listen in 6 Markierungssystemen. Entscheidung: Definitionsliste im Register des Hero- Faktenblocks. Begriff als Mono-Versal-Label, Frage als Fliesstext. Bewusst OHNE eigene Marke (kein Punkt, kein Strich): .situations zwei Sektionen hoeher ist ebenfalls eine haarlinien-getrennte Fuenferliste und hat ein rotes Quadrat. Eine zweite Marke haette die beiden Bloecke einander angeglichen, statt sie zu trennen. Erste Fassung trennte Begriff und Frage ueber ein Mono-Versal-Label (--serif und --sans sind in styles-human.css dieselbe Familie, es gibt also nur zwei Register). Verworfen: zu technisch, und der Block wirkte farblos. Die Trennung leistet jetzt der Farbwechsel auf Navy -- Begriff in --red-light, Frage in --on-navy. Siehe Abschnitt 42. dd ist kein

und erbt deshalb weder max-width:720px (pages.css:22) noch die gedaempfte Textfarbe. Ohne die Regeln hier stuende die rechte Spalte in #223554 ueber 814px und waere der dunkelste und laengste Fliesstext der ganzen Seite. Deshalb max-width und Farbe explizit. Abschluss unten in Navy: sonst franst der Block nach unten aus, waehrend die Ablaufleiste darunter oben und unten eine Navy-Linie hat. Breakpoint 900px gemaess pages.css. Unter 900px stapeln Begriff und Frage mit 8px Abstand -- 6px liessen beide zu einem Absatz verschmelzen. Gemessen bei 1470px, Sektion "Was untersucht wird": 1.776px -> 1.293px. Seite 5.183 -> 4.700. ============================================================ */ .fieldlist{margin:0;border-top:1px solid var(--navy);} .fieldlist>div{display:grid;grid-template-columns:270px 1fr;gap:36px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline;} .fieldlist>div:last-child{border-bottom-color:var(--navy);} .fieldlist dt{font:600 17px/1.4 var(--sans);letter-spacing:-.01em;color:var(--navy);} .fieldlist dd{max-width:600px;margin:0;color:var(--ink);font-size:16px;line-height:1.55;} @media (max-width:900px){ .fieldlist>div{grid-template-columns:1fr;gap:8px;} } /* ============================================================ ABSCHNITT 41 — Ablaufleiste: zweite Zeile je Schritt ------------------------------------------------------------ Die vier Schrittnamen (Projektauftakt, Analyse, Einordnung, Ergebnis) gelten fuer sich genommen fuer jede Beratung. Die Unterzeile macht pro Schritt eine neue Aussage; die wichtigste ist "gemeinsam" in 03 -- eine Prozesszusage, der ein Wettbewerber widersprechen kann. .process-step hat min-height:150px (pages.css:32), deshalb kostet die zweite Zeile am Desktop fast nichts: die Leiste waechst von 158px auf 191px. Unter 540px wird .process zum Block, dort kostet sie 137px. Kein !important noetig: die Regel steht spaeter als pages.css:33 (.process-step p) und ist gleich spezifisch plus eine Klasse. ============================================================ */ .process-step .ps-sub{margin-top:9px;color:var(--muted);font:400 14px/1.45 var(--sans);letter-spacing:0;} /* ============================================================ ABSCHNITT 42 — Untersuchungsfelder auf Navy ------------------------------------------------------------ Die Sektion "Was untersucht wird" auf recruiting-standortbestimmung.html ist jetzt eine navy-section. Grund: die Seite hatte nach dem Umbau keine einzige dunkle Flaeche mehr und lief gleichmaessig hell durch. Eine dunkle Insel nur um die Felderliste haette Querverweis und Ablaufleiste darunter haengen lassen -- die ganze Sektion dunkel macht sie zu einer Einheit. ACHTUNG, ZWEI SCHREIBWEISEN: Startseite nutzt .section-navy, Unterseiten .navy-section. design-v2.css nimmt in den Textfarbregeln (Zeile 313) NUR .navy-section aus. Mit .section-navy auf einer Unterseite ist die H2 navy auf navy, also unsichtbar. Immer .navy-section verwenden. Siehe auch den Hinweis in Abschnitt 21. Form bewusst NICHT wie die Arbeitsweise-Sektion der Startseite (Bloecke mit Oberstrich): deren drei Titel -- Recruiting-Prozesse, Recruiting-Technologie, Datenschutz & Mitbestimmung -- decken sich inhaltlich weitgehend mit drei der fuenf Felder, eines woertlich. Gleiche Farbe plus gleiche Form haette denselben Block zweimal gezeigt. Gleicher Anker, andere Handschrift: dort Bloecke, hier eine Liste. Kontrast gemessen (Alpha-Compositing gegen den vollen Hintergrundstapel): dt 5,50 | dd 11,28 | mini-label 5,50 | crosslink 9,00 | Ablaufschritt 11,28 | Unterzeile 11,28 | Eyebrow 5,50 | H2 11,28. Der Link im Querverweis lag mit --red-light bei 4,39:1 und damit unter AA -- deshalb dort #F2B3A6 (5,51:1) statt der Variablen. Nicht auf --red-light zurueckaendern. Die Felderliste steht damit auf anderem Grund als .situations ("Fuer wen") zwei Sektionen hoeher. Die Aehnlichkeit der beiden haarlinien-getrennten Fuenferlisten, die in Abschnitt 40 als offener Punkt notiert war, ist damit erledigt. auswahlbegleitung.html und systemnutzung.html bekommen das NICHT: beide haben mit "Was Sie erhalten" bereits eine navy-section. Ihre Felderliste bleibt hell, sonst haetten die Seiten zwei dunkle Flaechen. Gemessen: Sektion 1.293px, Seite 4.700px -- unveraendert gegenueber der hellen Fassung. Die Farbe kostet nichts. ============================================================ */ .navy-section .fieldlist{border-top-color:rgba(247,245,236,.55);} .navy-section .fieldlist>div{border-bottom-color:rgba(247,245,236,.24);} .navy-section .fieldlist>div:last-child{border-bottom-color:rgba(247,245,236,.55);} .navy-section .fieldlist dt{color:var(--red-light);} .navy-section .fieldlist dd{color:var(--on-navy);} .navy-section .mini-label{color:var(--red-light);} /* Querverweis auf Navy: kein Kasten. .crosslink ist als 4,5% NAVY auf hellem Grund gebaut. Auf Navy muesste die Flaeche aufgehellt werden, und aufgehelltes Navy ist Grau -- das waere die einzige graue Flaeche der Website. Stattdessen: Fusszeile mit Satz links und Link rechts. Die Trennlinie kommt von der Unterkante der .process-Leiste darueber (margin-top:0, border-top:0) -- eine eigene Linie ergaebe zwei Haarlinien 26px auseinander. */ .navy-section .crosslink{background:none;border-left:0;border-top:0;margin-top:0;padding:24px 0 0;color:var(--on-navy);display:flex;justify-content:space-between;align-items:baseline;gap:40px;font-size:15px;} .navy-section .crosslink > span{max-width:620px;} .navy-section .crosslink a{color:#F2B3A6;font-weight:700;font-size:13px;white-space:nowrap;text-decoration:none;border-bottom:1px solid #F2B3A6;padding-bottom:3px;} @media (max-width:900px){ .navy-section .crosslink{flex-direction:column;gap:16px;align-items:flex-start;} .navy-section .crosslink a{white-space:normal;} } .navy-section .process{border-top-color:rgba(247,245,236,.55);border-bottom-color:rgba(247,245,236,.55);} .navy-section .process-step{border-right-color:rgba(247,245,236,.26);} .navy-section .process-step span{color:var(--red-light);} .navy-section .process-step p{color:var(--paper);} .navy-section .process-step .ps-sub{color:var(--on-navy);} @media (max-width:900px){ .navy-section .process-step{border-bottom-color:rgba(247,245,236,.26);} } /* ============================================================ ABSCHNITT 43 — Eyebrow zurueck auf Rot ------------------------------------------------------------ Befund: 15 von 18 Eyebrows der Website standen in #5E6B66 statt in Rot. Rot waren nur die drei in den Heroes und die auf Navy-Flaechen. Betroffen war jeder Eyebrow in einer hellen .section -- auf allen vier Seiten. Ursache: .eyebrow ist ein

. Abschnitt 17 ("Restliche Blaugrau-Werte auf die warme Palette") setzt .section:not(.navy-section) p{color:var(--muted)} -- das ist (0,0,2,1) gegen (0,0,1,0) von .eyebrow, also gewinnt Grau. Der Strich vor dem Label erbt currentColor und wurde gleich mit grau. Das war nie eine Entscheidung: auf derselben Seite stand der Hero-Eyebrow rot und alle anderen grau. Fix mit section + p im Selektor: (0,0,3,1) schlaegt die Muted-Regel. Ein reines .section...p.eyebrow reichte nicht -- der Eyebrow der .entries-Sektion auf der Startseite blieb grau, weil deren Sektion .section gar nicht traegt. Deshalb das Element section statt der Klasse, mit beiden Navy- Schreibweisen als Ausnahme. --red-text (#B93E26), nicht --red: dieselbe Farbe wie die Hero-Eyebrows, und --red waere auf Sand knapp. Kontrast gemessen: 4,73 bis 5,50:1 auf Papier und Sand. ============================================================ */ section:not(.section-navy):not(.navy-section) p.eyebrow{color:var(--red-text);} /* ============================================================ ABSCHNITT 44 — Belegzeile als Definitionsliste ------------------------------------------------------------ Auf recruiting-standortbestimmung.html ersetzt .fieldlist die .trust-creds-Chips. Grund: Mit den zwei neuen Systembelegen waren die Eintraege nicht mehr gleichartig -- eine Dauer, zwei Projekte, zwei Zertifikate. Chips geben allen dasselbe Gewicht, und ausgerechnet die zwei interessantesten sahen aus wie die zwei langweiligsten. Die Definitionsliste gruppiert nach dem, was der Beleg beweist: "Systeme" belegt die erste Haelfte der Ueberschrift ("Was heute moeglich ist"), "Praxis" die zweite ("Was davon zu Ihnen passt"). Bewusst dieselbe Komponente wie die Untersuchungsfelder -- damit faellt auf dieser Seite ein Komponententyp weg, statt dass einer dazukommt. .trust-creds bleibt auf auswahlbegleitung.html und systemnutzung.html in Gebrauch. Keine Produktnamen: Susas Entscheidung. Der Preis ist bekannt und benannt -- Namen belegen, Kategorien beschreiben. Gemessen bei 1470px: Sektion 649 -> 804px, Seite 4.795 -> 4.950px. Das ist der Preis der klareren Struktur. ============================================================ */ .creds-list{margin-top:34px;} /* ============================================================ ABSCHNITT 45 — Seite "Ueber mich" (ueber-mich.html) ------------------------------------------------------------ Eigene Seite statt Startseiten-Anker. Begruendung steht in der Projektnotiz; hier nur die Bauteile. Hero (.um-hero / .um-grid--F2): Die H1 laeuft ueber die volle Breite, darunter eine Zeile aus Portrait links und Lead plus Button rechts (.um-row / .um-row-text). Wichtig: Lead und Button liegen zusammen in .um-row-text. Stehen sie als zwei Rasterkinder nebeneinander, faellt der Button in eine zweite Rasterzeile und es klafft eine Luecke neben dem Foto. Kein roter Versatzschatten am Portrait: Das Motiv traegt auf der Startseite .profile-card. Statt dessen eine 3px-Standlinie unter dem Bild — dieselbe Geste, eine Lautstaerke leiser. Das Bild bewusst nur 190px breit: groesser wird die Schnappschuss-Anmutung der Vorlage sichtbar. .cases: die zwei Praxisbelege, zweispaltig ab 901px. Der Erkenntnissatz je Beleg steht in und wird dadurch Navy statt grau — er ist der Satz, wegen dem der Block existiert. .offer-links: der Weg von dieser Seite zu den drei Angeboten. Ohne ihn kann jemand, den die Seite ueberzeugt hat, nur Kontakt aufnehmen, aber nicht nachsehen, was buchbar ist. Zwei Breakpoints bedient: 900 (Sektionsraster) und 540 (Komponentenraster). ============================================================ */ .um-hero{padding-bottom:0;} .um-grid{display:grid;align-items:start;grid-template-columns:minmax(0,1fr);} .um-row{display:grid;grid-template-columns:200px minmax(0,1fr); column-gap:48px;align-items:start;margin-top:40px;} .um-row .um-figure{grid-column:1;} .um-row-text{grid-column:2;} .um-row .um-lead{margin:0;max-width:640px;} .um-row .page-hero-actions{margin-top:30px;} .um-figure{margin:0;} .um-figure img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.04);} .um-figure figcaption{margin-top:14px;padding-top:11px;border-top:3px solid var(--red); font:12px/1.6 var(--mono);letter-spacing:.02em;color:var(--navy);} .um-figure figcaption span{display:block;opacity:.62;} .um-prose p{max-width:720px;font-size:17px;line-height:1.68;color:var(--muted);margin:0 0 18px;} .um-prose p:last-child{margin-bottom:0;} .um-prose strong{color:var(--navy);font-weight:600;} .cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:56px;row-gap:40px;margin-top:8px;} .case{border-top:1px solid var(--navy);padding-top:20px;} .case h3{margin:0 0 12px;font-size:21px;line-height:1.3;color:var(--navy);} .case p{margin:0;font-size:16px;line-height:1.65;color:var(--muted);} .case p .insight{color:var(--navy);} .offer-intro{margin:44px 0 0;font-size:16px;line-height:1.65;color:var(--muted);} .offer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0; border-top:1px solid var(--navy);border-bottom:1px solid var(--navy);margin-top:14px;} .offer-links a{display:block;padding:22px 26px 22px 0;color:var(--navy); text-decoration:none;border-right:1px solid var(--line);} .offer-links a:last-child{border-right:0;} .offer-links a:not(:first-child){padding-left:26px;} .offer-links b{display:block;font:600 17px/1.35 var(--sans);} .offer-links span{display:block;margin-top:6px;font:13px/1.5 var(--sans);color:var(--muted);} .offer-links a:hover b,.offer-links a:focus-visible b{color:var(--red-text);} /* Callout mit Zusatzsatz: Ueberschrift und Satz als eine Spalte links, Buttons bleiben rechts. Ohne den Wrapper drueckt der Absatz die Ueberschrift in einen unschoenen Umbruch. */ .callout-copy{max-width:760px;} .callout-copy h2{max-width:none;} .callout-note{max-width:640px;margin:22px 0 0;font-size:16px;line-height:1.65;color:var(--muted);} @media (max-width:900px){ .um-row{grid-template-columns:168px minmax(0,1fr);column-gap:32px;} .cases{grid-template-columns:1fr;row-gap:34px;} .offer-links{grid-template-columns:1fr;} .offer-links a{border-right:0;border-bottom:1px solid var(--line);padding:18px 0;} .offer-links a:not(:first-child){padding-left:0;} .offer-links a:last-child{border-bottom:0;} } @media (max-width:540px){ .um-row{grid-template-columns:1fr;row-gap:26px;} .um-row .um-figure{max-width:180px;} .um-row-text{grid-column:1;} } /* ============================================================ ABSCHNITT 46 — Verweis von der Profil-Sektion auf ueber-mich ------------------------------------------------------------ ACHTUNG: .profile-copy hat display:contents, seine Kinder sind also direkte Kinder von .profile-grid. Ein neues

faellt sonst in dieselbe Zelle wie der Absatz (Zeile 2 / Spalte 2) und legt sich darueber -- genau das ist beim ersten Bauen passiert. Deshalb eigene Rasterzeile, und .credentials rutscht von Zeile 3 auf Zeile 4. Spezifitaet: Die Regel muss .profile-copy > p.profile-more heissen. Ein blosses .profile-more verliert gegen .profile-copy > p:not(.eyebrow) aus Abschnitt 18. Kein Button: Die Farbregel reserviert Rot fuer die eine Handlung, und die ist auf der Startseite das Vorgespraech. Deshalb Textlink mit roter Unterlaengslinie. ============================================================ */ .profile-copy > p.profile-more{grid-column:2;grid-row:3;margin:26px 0 0;max-width:none;} .profile-more a{display:inline-flex;align-items:center;gap:9px; padding-bottom:5px;border-bottom:1px solid var(--red); color:var(--navy);text-decoration:none;font:600 16px/1.4 var(--sans);} .profile-more a:hover,.profile-more a:focus-visible{color:var(--red-text);} .profile-grid .credentials{grid-row:4;margin-top:40px;} @media (max-width:900px){ .profile-copy > p.profile-more{grid-column:1;grid-row:auto;} .profile-grid .credentials{grid-column:1;grid-row:auto;} } /* ============================================================ ABSCHNITT 47 — Kalendertermin als Textlink statt zweitem Knopf ------------------------------------------------------------ Vorher standen im Callout zwei gleich grosse Knoepfe: einer sprang zum Kontaktformular, einer oeffnete den Kalender. Zwei Wege, gleiches Gewicht, und beide erzeugen im Kopf dasselbe Wort -- Termin. Der Kalender ist jetzt eine Textzeile darunter. Das entspricht auch der Farbregel: Rot ist die eine Handlung. Ein zweiter Rahmenknopf daneben hebelt genau das aus. ACHTUNG .callout-inner ist ein Flexcontainer mit space-between. Ohne den .callout-side-Wrapper wird der Textlink zum dritten Flexkind und landet NEBEN dem Knopf statt darunter. ============================================================ */ .callout-side{display:flex;flex-direction:column;flex-shrink:0;} .callout-alt{margin:16px 0 0;} .callout-side .callout-alt{text-align:right;} .callout-alt a{display:inline-flex;align-items:center;gap:8px;color:var(--navy); text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:4px; font:500 15px/1.4 var(--sans);} .callout-alt a:hover,.callout-alt a:focus-visible{color:var(--red-text);} @media (max-width:900px){.callout-side .callout-alt{text-align:left;}} /* ============================================================ ABSCHNITT 48 — Fusszeile mit den drei Angebotsseiten ------------------------------------------------------------ Statt eines Sammelpunkts "Angebote", der auf eine Sektion der Startseite zeigte, stehen jetzt die drei Angebotsseiten einzeln. Zwei Gruppen: Angebote und Kontakt oben, Rechtliches gedimmt darunter. Grund: Jede Seite verlinkt damit direkt auf jede Angebotsseite. Interne Verlinkung ist bei einer neuen Domain ohne eingehende Links einer der wenigen SEO-Hebel, die man selbst in der Hand hat -- und die Fusszeile ist der Ort, an dem jemand nach dem Lesen nachsieht, was es sonst gibt. Bewusst KEIN Aufklappmenue in der Hauptnavigation: Hover, Tastaturfokus, Escape und ein verschachtelter Mobilaufklapper waeren zwei Stunden Arbeit mit Barrierefreiheitsrisiko fuer einen Fall, den die Querverweise schon abdecken. ============================================================ */ .site-footer nav{flex-direction:column;align-items:flex-end;gap:11px;} .footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:18px;} .footer-legal a{opacity:.6;} @media (max-width:900px){ .site-footer nav{align-items:flex-start;} .footer-links{justify-content:flex-start;} } /* ============================================================ ABSCHNITT 49 — Der ehrliche Nebensatz ------------------------------------------------------------ Auf der Systemoptimierung standen drei gleichrangige Ausgaenge, darunter "System ersetzen". Das ist ein Urteil gegen die Entscheidung des Auftraggebers -- als Drittel des Angebots verkaufsschaedlich, als Nebensatz glaubwuerdig. Deshalb: zwei Wege als .cases-Bloecke, der dritte Ausgang als Zeile mit roter Randlinie darunter. Dieselbe Regel wie beim Kapazitaetsabsatz auf ueber-mich -- die Zumutung traegt, solange sie nicht das Angebot ist. ============================================================ */ .pledge-note{margin:34px 0 0;max-width:760px;font-size:16px;line-height:1.65;color:var(--muted); padding-left:20px;border-left:2px solid var(--red);} /* ============================================================ ABSCHNITT 50 — Ablaufleiste mit fuenf Schritten ------------------------------------------------------------ Nur auf systemoptimierung.html: Die Ueberschrift "Von der Bestandsaufnahme zur Umsetzung" versprach eine Spanne, die die vierstufige Leiter nicht zeigte -- die Schritte endeten bei der Empfehlung. Statt die Ueberschrift zu entschaerfen, macht der fuenfte Schritt die Zweiteilung des Angebots zum ersten Mal in der Grafik sichtbar. :has() statt einer eigenen Klasse, damit die vierstufigen Leisten auf den anderen Seiten unberuehrt bleiben. ============================================================ */ .process:has(> .process-step:nth-child(5)){grid-template-columns:repeat(5,1fr);} @media (max-width:900px){.process:has(> .process-step:nth-child(5)){grid-template-columns:1fr 1fr;}} /* ============================================================ 51 — Porträt: einheitlich Farbe + Luft unter der Bildunterschrift auf der Über-mich-Seite ------------------------------------------------------------ Vorgeschichte 07.09.: Das alte Selfie war auf ueber-mich.html s/w (Abschnitt 45) und auf index.html farbig (styles-human.css: .profile-card img{filter:saturate(.8)}). Zwischenzeitlich beides auf s/w gesetzt — Grund war der private Hintergrund des Selfies. Mit dem professionellen Porträt entfaellt dieser Grund: Der marineblaue Blazer trifft das Marken-Navy, das Blaugrau der Glaswand liegt in derselben Familie. Das Bild ist von sich aus im Markenraum. In s/w wird der Blazer schwarz und diese Verbindung geht verloren; ausserdem waere der rote Kartenrahmen auf der Startseite dann der einzige Farbtraeger. Deshalb: beide Seiten farbig, ohne Filter. styles-human.css ist tabu, deshalb hier ueberschrieben — design-v2.css laedt zuletzt, gleiche Spezifitaet genuegt. Der Ausschnitt-Versuch am alten Selfie ist zurueckgenommen und mit dem neuen Foto gegenstandslos. Zweiter Befund: .um-hero hatte padding-bottom:0 (Abschnitt 45, Zeile ~1519). Dadurch stand die Bildunterschrift „Susanne Hagen / Hamburg" exakt 1 px ueber der Kante zur naechsten Sektion. Hier auf 80 px gesetzt. ============================================================ */ .profile-card img{filter:none;} .um-figure img{filter:none;} .um-hero{padding-bottom:80px;} @media (max-width:900px){ .um-hero{padding-bottom:56px;} } /* ============================================================ 52 · Rote Haupt-CTA und Kopfzeilen-CTA vereinheitlichen Gemessen 09.09.2026. Zwei Befunde aus dem Hover-Vergleich index.html gegen die Unterseiten: (a) Die rote Haupt-CTA wechselte auf der Startseite nach Navy (Klasse .button-red, hier definiert), auf den Unterseiten nach Dunkelrot mit navyfarbener Schrift (Klasse .button, aus pages.css). Kontrast dort 2,08:1 -- durchgefallen. Ursache: in styles-human.css braucht ein roter Knopf die Zusatzklasse .button-red, in pages.css ist .button von sich aus rot. Zwei Wege, ein Aussehen, unterschiedlicher Hover. Entscheidung Susa: Navy gilt ueberall. Damit auch 12,31:1 statt 5,93:1 (Dunkelrot). ACHTUNG: das Token- Regelwerk nennt rot-dunkel #b03d25 als Hover-Farbe -- fuer diesen Knopf gilt es bewusst nicht mehr. (b) .header-cta:hover hatte #CD4A2F auf Papierton = 4,16:1, bei 15px/600 unter der Schwelle von 4,5:1. Nur die Schrift auf reines Weiss gehoben: 4,55:1. Farbwechsel Navy -> Rot bleibt unveraendert. .button-outline ist ausgenommen (aktuell nirgends benutzt, die Regel existiert aber weiter). ============================================================ */ .button:not(.button-outline){ color:#fff; background:var(--red); border-color:var(--red); } .button:not(.button-outline):hover, .button:not(.button-outline):focus-visible{ color:#fff; background:var(--navy); border-color:var(--navy); } .header-cta:hover, .header-cta:focus-visible{ color:#fff; } /* ============================================================ 53 · Eigene Kontaktseite + Formular in der Formensprache ------------------------------------------------------------ Entscheidung Susa 10.09.2026: Das Formular bekommt eine eigene Seite (kontakt.html). Auf der Startseite bleibt eine ruhige Uebersicht mit zwei Wegen. Alle 32 Links auf #kontakt zeigen jetzt auf kontakt.html; die vier ?thema=-Parameter bleiben erhalten und fuellen ein verstecktes Feld statt eines Selects (Panel-Befund 07.09.: der Select verlangte eine Entscheidung, die die Seite selbst fuer unnoetig erklaert). Formular: Kaesten im Kasten waren der Fremdkoerper -- ein Rahmen aussen plus fuenf gerahmte Felder innen, waehrend die Seite sonst mit Haarlinien arbeitet. styles-human.css hatte die Felder urspruenglich linienbasiert; design-v2 hatte sie zu Kaesten ueberschrieben. Hier zurueckgenommen. .button-zeeg: rot umrandet statt rot gefuellt. Die Farbregel erlaubt genau EINE gefuellte rote Flaeche je Ansicht -- das bleibt "Anfrage senden" bzw. "Nachricht schreiben". Outline ist die dokumentierte Rolle "Navigation im Inhalt". ============================================================ */ .contact-form{background:transparent;border:0;padding:0;} .contact-form input:not([type=checkbox]):not([type=hidden]), .contact-form textarea{ background:transparent;border:0;border-bottom:1px solid var(--navy); border-radius:0;padding:10px 0;margin-top:6px; } .contact-form input:not([type=checkbox]):focus, .contact-form textarea:focus{ border-bottom:2px solid var(--red);outline:none; } .form-heading{margin:0 0 26px;font-size:clamp(1.9rem,3vw,2.5rem);} .button-zeeg{ color:var(--red-text);background:transparent;border:1px solid var(--red); } .button-zeeg span{color:var(--red);} .button-zeeg:hover,.button-zeeg:focus-visible{ color:#fff;background:var(--red);border-color:var(--red); } .button-zeeg:hover span,.button-zeeg:focus-visible span{color:#fff;} .kontakt-hero .page-lead{max-width:660px;} .kontakt-cta{margin:30px 0 0;} .contact-copy .contact-person{ margin-top:44px;padding-top:26px;border-top:1px solid var(--line);max-width:340px; } .contact-paths{display:flex;flex-direction:column;align-items:flex-start;gap:16px;} .contact-paths .button{min-width:260px;} .contact-paths-note{margin:10px 0 0;color:var(--muted);font-size:14px;} @media (max-width:900px){ .contact-paths .button{width:100%;min-width:0;} } /* --- 53b · Nachtrag: kontakt.html laedt pages.css, nicht styles-human.css. .contact-grid, das Flex-Layout des Formulars und die Honeypot-Versteckung stehen aber NUR in styles-human.css (= nur Startseite). Ohne diesen Block stehen die Felder nebeneinander, die zwei Spalten stapeln, und das Honeypot-Feld waere SICHTBAR. Genau die Divergenz aus Abschnitt 52. grid-template-columns mit @media(min-width:901px)-Guard, wie im Projekt vorgeschrieben. --- */ .contact-grid{display:block;} @media (min-width:901px){ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start;} } .contact-form{display:flex;flex-direction:column;} .contact-form label:first-of-type{margin-top:0;} .contact-form .button{align-self:flex-start;margin-top:30px;} .form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} .form-consent{display:flex;align-items:flex-start;gap:11px;margin-top:26px;} .form-consent input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;margin-top:2px;padding:0;} .form-consent label{margin-top:0;} .form-status{min-height:22px;margin:12px 0 0;color:var(--red-text);font-size:13px;} /* Zeeg-Button: Abschnitt 52 greift ueber .button:not(.button-outline) mit hoeherer Spezifitaet. Deshalb hier .button.button-zeeg. */ .button.button-zeeg{color:var(--red-text);background:transparent;border:1px solid var(--red);} .button.button-zeeg span{color:var(--red);} .button.button-zeeg:hover,.button.button-zeeg:focus-visible{color:#fff;background:var(--red);border-color:var(--red);} .button.button-zeeg:hover span,.button.button-zeeg:focus-visible span{color:#fff;} /* ============================================================ 54 · Kontaktseite neu gestaltet (10.09.2026) ------------------------------------------------------------ Die erste Fassung hatte drei Fehler: die H1 lief in Display- groesse ueber zwei Zeilen und liess "Schritt." allein stehen, zwei gleich grosse H2 konkurrierten nebeneinander, und beide Spalten waren gleich breit -- also keine Rangfolge. Jetzt: schmaler Hero mit kleinerer H1, darunter EIN Raster mit klarer Rangfolge -- Formular breit links (der Zweck der Seite), Kalender als kompakte Tafel rechts. Die Tafel benutzt den Marken-Versatzschatten wie .evidence-note, damit sie zur Seite gehoert und trotzdem unter dem Formular rangiert. grid-template-columns mit @media(min-width:901px)-Guard. ============================================================ */ .kontakt-hero{padding:74px 0 58px;background:var(--paper-bright);} .kontakt-hero h1{max-width:24ch;margin-top:22px;font-size:clamp(2.3rem,3.8vw,3.5rem);} .kontakt-lead{max-width:700px;margin:26px 0 0;color:var(--muted);font-size:17px;line-height:1.65;} .kontakt-section{padding-top:70px;} .kontakt-grid{display:block;} @media (min-width:901px){ .kontakt-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:88px;align-items:start;} } @media (max-width:900px){ .kontakt-aside{margin-top:56px;} } .kontakt-panel{ padding:26px 24px;border:1px solid var(--navy); box-shadow:7px 7px 0 var(--red);background:var(--paper-bright); } .kontakt-panel .panel-label{ margin:0;color:var(--red-text);font:600 10px var(--mono); letter-spacing:.14em;text-transform:uppercase; } .kontakt-panel-text{margin:16px 0 22px;color:var(--muted);font-size:14px;line-height:1.6;} .kontakt-panel .button{width:100%;} .kontakt-aside .contact-person{ margin-top:38px;padding-top:24px;border-top:1px solid var(--line); } .kontakt-note{ margin-top:26px;padding-left:14px;border-left:2px solid var(--red); color:var(--muted);font-size:13.5px;line-height:1.6; } /* Select in der Linien-Formensprache wie die uebrigen Felder */ .contact-form select{ background:transparent;border:0;border-bottom:1px solid var(--navy); border-radius:0;padding:10px 0;margin-top:6px; font:400 16px var(--sans);color:var(--navy); } .contact-form select:focus{border-bottom:2px solid var(--red);outline:none;} .contact-form input::placeholder{color:var(--muted);opacity:.7;} /* ============================================================ 55 · Zwei Seiten: Kontakt-Uebersicht + Anfrage-Formular ------------------------------------------------------------ Entscheidung Susa 10.09.2026: Uebersicht und Formular werden getrennt. kontakt.html zeigt nur noch zwei Wege (schreiben / buchen) plus Kontaktdaten; anfrage.html traegt das Formular. Die ?thema=-Parameter der Angebotsseiten gehen an BEIDE Ziele: der Callout-Button am Seitenende direkt ins Formular, Kopfzeile und Fusszeile auf die Uebersicht -- die reicht den Parameter per script.js an den Anfrage-Link weiter. Formular gepaart statt einspaltig: sechs Felder untereinander ergaben eine 700px hohe Reihe duenner Linien ohne Struktur. Unternehmen/Website und E-Mail/Telefon stehen jetzt paarweise, das halbiert die Hoehe und gruppiert, was zusammengehoert. grid-template-columns jeweils mit @media(min-width:901px)-Guard. ============================================================ */ /* --- Uebersicht: zwei Wege --- */ .wege-grid{display:block;} @media (min-width:901px){ .wege-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:stretch;} } .weg-card{ display:flex;flex-direction:column;align-items:flex-start; padding:38px 34px;border:1px solid var(--navy);background:var(--paper-bright); } @media (max-width:900px){ .weg-card + .weg-card{margin-top:22px;} } .weg-card .panel-label{ margin:0;color:var(--red-text);font:600 10px var(--mono); letter-spacing:.14em;text-transform:uppercase; } .weg-card h2{margin:18px 0 0;font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.15;} .weg-card p{margin:14px 0 30px;color:var(--muted);font-size:15px;line-height:1.6;} .weg-card .button{margin-top:auto;} .kontakt-foot{ display:block;margin-top:64px;padding-top:34px;border-top:1px solid var(--line); } @media (min-width:901px){ .kontakt-foot{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;} } .kontakt-foot .contact-person{margin:0;} .kontakt-note{ margin:26px 0 0;padding-left:14px;border-left:2px solid var(--red); color:var(--muted);font-size:13.5px;line-height:1.6; } @media (min-width:901px){ .kontakt-note{margin:0;} } /* --- Anfrageseite --- */ .anfrage-hero{padding:74px 0 52px;background:var(--paper-bright);} .anfrage-hero h1{max-width:22ch;margin-top:22px;font-size:clamp(2.1rem,3.4vw,3.1rem);} .anfrage-hero .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;} .anfrage-lead{max-width:640px;margin:24px 0 0;color:var(--muted);font-size:17px;line-height:1.65;} .anfrage-section{padding-top:62px;} .anfrage-wrap{max-width:820px;} .form-paired{display:block;} @media (min-width:901px){ .form-paired{display:grid;grid-template-columns:1fr 1fr;column-gap:34px;row-gap:26px;} .form-paired .field--full{grid-column:1 / -1;} } .form-paired .field{display:flex;flex-direction:column;} @media (max-width:900px){ .form-paired .field{margin-top:24px;} .form-paired .field:first-child{margin-top:0;} } .form-paired label{margin-top:0;} .form-paired .button{align-self:flex-start;margin-top:28px;} .anfrage-alt{ max-width:820px;margin:42px 0 0;padding-top:26px;border-top:1px solid var(--line); color:var(--muted);font-size:15px; } .anfrage-alt a{color:var(--red-text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--red);} .anfrage-alt a span{color:var(--red);} /* ============================================================ 56 · Kontaktseite, dritte Fassung (10.09.2026) ------------------------------------------------------------ Nach Brand-Designer und Conversion-Stratege. Beide sagten dasselbe: die zwei gleich grossen Karten aus Abschnitt 55 delegieren die Entscheidung an den Besucher, den die Seite entlasten will. Jetzt EINE Empfehlung (Kalender, Entscheidung Susa) und zwei Nebenwege. Mail und Telefon bekommen ein eigenes typografisches Register statt Kleintext -- sie sind ein Kontaktweg, keine Fussnote. Kein Erreichbarkeitsfenster (Entscheidung Susa). Die alte Ueberschrift "Dreissig Minuten" beschrieb das Vorgespraech, nicht die Aufgabe der Seite. Sie erbt jetzt die Navy-Sektion unten, wo sie erklaert, was im Termin passiert. .wege-grid/.weg-card/.kontakt-foot aus Abschnitt 55 sind damit unbenutzt -- nicht geloescht, weil die Basen nie editiert werden und ein spaeterer Rueckbau sie sonst neu braeuchte. grid-template-columns jeweils mit @media(min-width:901px). ============================================================ */ .wege-layout{display:block;} @media (min-width:901px){ .wege-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start;} } /* Empfohlener Weg: Markenkarte mit Versatzschatten */ .weg-haupt{ padding:40px 38px;border:1px solid var(--navy); background:var(--paper-bright);box-shadow:7px 7px 0 var(--red); } .weg-haupt h2{margin:16px 0 0;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.12;} .weg-haupt p{margin:18px 0 30px;color:var(--muted);font-size:15.5px;line-height:1.65;} .weg-haupt .button{min-width:262px;} /* Nebenwege: rahmenlos, nur Haarlinien */ @media (max-width:900px){ .wege-neben{margin-top:52px;} } .weg-neben{padding-top:24px;border-top:1px solid var(--line-strong);} .weg-neben + .weg-neben{margin-top:34px;} .weg-neben-text{margin:14px 0 22px;color:var(--muted);font-size:15px;line-height:1.6;} .weg-neben-meta{margin:16px 0 0;color:var(--muted);font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;} .panel-label{ margin:0;color:var(--red-text);font:600 10px var(--mono); letter-spacing:.14em;text-transform:uppercase; } /* Mail und Telefon in eigenem Register statt Kleintext */ .direkt-zeile{margin:14px 0 0;} .direkt-zeile a{ color:var(--navy);font:500 19px var(--sans);text-decoration:none; border-bottom:1px solid var(--red);padding-bottom:3px; overflow-wrap:anywhere; } .direkt-zeile a:hover,.direkt-zeile a:focus-visible{color:var(--red-text);} @media (max-width:540px){ .direkt-zeile a{font-size:17px;} } /* Navy-Sektion: was im Vorgespraech passiert */ .gespraech-inner{display:block;} @media (min-width:901px){ .gespraech-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} } .section.gespraech h2{margin:18px 0 0;font-size:clamp(2rem,3.2vw,2.9rem);color:var(--paper);} .section.gespraech h2 em{color:var(--red-light);} .gespraech .gespraech-text p{color:var(--on-navy);font-size:16.5px;line-height:1.7;} @media (max-width:900px){ .gespraech-text{margin-top:34px;} } .gespraech-zusage{ margin-top:26px;padding-left:16px;border-left:2px solid var(--red-light); color:var(--paper) !important;font-size:17px !important; } /* ============================================================ 57 · Kontaktseite als Wegetafel, vier Kacheln (Susa 10.09.) ------------------------------------------------------------ Susas Vorschlag: vier Kacheln mit Symbol und Titel. Damit sind Mail und Telefon eigene Wege statt Kleintext -- ihr urspruengl. Einwand. Die Seite ist jetzt bewusst ein Menue: Wer hier ankommt, hat sich fuer Kontakt entschieden und waehlt nur noch den Kanal. Deshalb KEINE Empfehlung mehr und keine rote Flaeche -- vier gefuellte Buttons haetten die Farbregel gebrochen (genau eine rote Flaeche je Ansicht). Die Kachel selbst ist der Link, kein Button darin (Regel vom 03.09.: kein Button in einem Link). Symbole: KEIN Icon-Set. Die Website hat sonst nirgends Piktogramme; ihre Sprache ist typografisch. Die vier Glyphen sind deshalb selbst gezeichnet, 1,5px Strich in Navy, eckige Enden, keine Rundungen -- dieselbe Strichstaerke wie die Haarlinien und Rahmen. Ein Stock-Icon-Set haette die Seite gewoehnlich gemacht. grid-template-columns mit @media-Guards. ============================================================ */ .wege-kacheln{display:block;} @media (min-width:901px){ .wege-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:22px;} } @media (min-width:1200px){ .wege-kacheln{grid-template-columns:repeat(4,1fr);gap:20px;} } .weg-kachel{ position:relative;display:flex;flex-direction:column; padding:30px 26px 26px;min-height:210px; border:1px solid var(--navy);background:var(--paper-bright); text-decoration:none;color:var(--navy); transition:background .18s,border-color .18s,box-shadow .18s; } @media (max-width:900px){ .weg-kachel + .weg-kachel{margin-top:16px;} } .weg-kachel:hover,.weg-kachel:focus-visible{ background:var(--paper);border-color:var(--red);box-shadow:5px 5px 0 var(--red); } .weg-icon{width:30px;height:30px;fill:none;stroke:var(--navy);stroke-width:1.5; stroke-linecap:square;stroke-linejoin:miter;} .weg-kachel:hover .weg-icon,.weg-kachel:focus-visible .weg-icon{stroke:var(--red-text);} .weg-kachel .panel-label{ margin:24px 0 0;color:var(--red-text);font:600 10px var(--mono); letter-spacing:.14em;text-transform:uppercase; } .weg-kachel-text{ margin:12px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55; overflow-wrap:anywhere; } .weg-kachel-pfeil{ margin-top:auto;padding-top:18px;color:var(--red); font:16px var(--mono); } .kontakt-signatur{ margin:40px 0 0;color:var(--muted); font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase; } /* ============================================================ 58 · Kontaktkacheln in Navy mit weissem Symbol (Susa 10.09.) ------------------------------------------------------------ Ersetzt die hellen Kacheln aus Abschnitt 57. Navy-Flaeche, weisses Symbol, weisser Titel. Hover wechselt auf Rot -- das ist dieselbe Bewegung wie beim Kopfzeilen-Button (navy -> rot) und damit systemkonform statt neu erfunden. Hinweis fuer spaeter: Navy gefuellt bedeutete bisher "dauerhafte Navigation" (nur der Kopfzeilen-Button). Die vier Kacheln geben der Farbe auf dieser einen Seite eine zweite Bedeutung. Bewusst so entschieden; nicht ohne Anlass auf andere Seiten uebertragen. ============================================================ */ .weg-kachel{ background:var(--navy);border:1px solid var(--navy);color:var(--paper); padding:32px 28px 28px;min-height:212px; } .weg-kachel:hover,.weg-kachel:focus-visible{ background:var(--red);border-color:var(--red);box-shadow:none; } .weg-icon{stroke:var(--paper);width:32px;height:32px;stroke-width:1.5;} .weg-kachel:hover .weg-icon,.weg-kachel:focus-visible .weg-icon{stroke:#fff;} .weg-kachel p.kachel-titel{ margin:26px 0 0;color:var(--paper); font:600 18px var(--sans);letter-spacing:-.005em; } .weg-kachel:hover p.kachel-titel,.weg-kachel:focus-visible p.kachel-titel{color:#fff;} .weg-kachel p.weg-kachel-text{ margin:10px 0 0;color:var(--on-navy);font-size:14px;line-height:1.55; } .weg-kachel:hover .weg-kachel-text,.weg-kachel:focus-visible .weg-kachel-text{color:rgba(255,255,255,.9);} .weg-kachel .weg-kachel-pfeil{ margin-top:auto;padding-top:20px;color:var(--red-light);font:16px var(--mono); } .weg-kachel:hover .weg-kachel-pfeil,.weg-kachel:focus-visible .weg-kachel-pfeil{color:#fff;} /* Dreier-Variante */ @media (min-width:901px){ .wege-kacheln.drei{grid-template-columns:repeat(3,1fr);gap:22px;} } @media (min-width:1200px){ .wege-kacheln.drei{grid-template-columns:repeat(3,1fr);gap:22px;} } /* ============================================================ 59 · Kontaktkacheln nach Brand-Designer-Empfehlung (10.09.) ------------------------------------------------------------ Korrigiert Abschnitt 58. Drei Befunde des Designers: a) Navy-Fuellung im Ruhezustand nimmt der Seite die Ruhe und gibt Navy eine zweite Bedeutung (bisher: dauerhafte Navigation). Grund deshalb wieder papier-hell, 1px Navy-Rahmen; erst der HOVER fuellt navy. Das ist dieselbe Bewegung wie beim Kopfzeilen-Button, nur richtig herum. b) Kontrastfehler in 58: der Pfeil stand in --red-light auf Navy = 2.71:1 und im roten Hover #E06A4C auf #CD4A2F = 1.00:1, also unsichtbar. Regel des Designers, hier uebernommen: Rot auf Navy ist IMMER --red-light (#E06A4C), Rot auf hellem Grund IMMER --red-text (#B93E26). Der Pfeil steht jetzt im Ruhezustand in --red-text auf Papier und im Hover in --red-light auf Navy. c) Innerer Rhythmus: Innenabstand 24px rundum, Symbol 24px mit 1px Strich (statt 32px/1,5px -- es war lauter als die Ueberschrift), 20px zum Titel, 6px zur Unterzeile, Pfeil unten RECHTS. Adresse und Nummer eine Ebene tiefer in Mono 12px, letter-spacing .08em -- gleiche Textsorte wie die Signatur im Kopf. Nicht uebernommen: seine Zeile "SPRECHZEIT MO-DO 9-17". Susa hat Erreichbarkeitsfenster am 10.09. bewusst abgelehnt. Die Direkt-Kachel ist ein

, kein Link (zwei Ziele darin). Deshalb sind ALLE Hover-Regeln auf a.weg-kachel gescopet und die Erbschaft aus 58 wird fuer .weg-kachel--direkt neutrali- siert. p.klasse-Selektoren, weil pages.css:22 .section p sonst gewinnt. ============================================================ */ /* Kopf: H1 auf 60px, Vorspann schmaler, Signatur unten rechts */ .kontakt-hero{padding:74px 0 72px;} .kontakt-hero h1{max-width:none;margin-top:22px;font-size:clamp(2.4rem,4.4vw,3.75rem);line-height:1.06;} .kontakt-lead{max-width:560px;} .kontakt-hero-inner{display:block;} @media (min-width:901px){ .kontakt-hero-inner{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end;} } .kontakt-signatur{margin:36px 0 0;text-align:left;} @media (min-width:901px){ .kontakt-signatur{margin:0;text-align:right;white-space:nowrap;} } /* Kachelfeld */ .kontakt-section{padding-top:64px;} @media (min-width:901px){ .wege-kacheln.drei{grid-template-columns:repeat(3,1fr);gap:20px;} } /* Ruhezustand: hell, Haarlinie, kein Schatten */ .weg-kachel{ background:var(--paper-bright);border:1px solid var(--navy); color:var(--navy);box-shadow:none; padding:24px;min-height:0; } .weg-icon{width:24px;height:24px;stroke:var(--navy);stroke-width:1;} .weg-kachel p.kachel-titel{ margin:20px 0 0;color:var(--navy); font:600 18px var(--sans);letter-spacing:-.005em; } .weg-kachel p.weg-kachel-text{ margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.55; } .weg-kachel .weg-kachel-pfeil{ margin-top:auto;padding-top:24px;align-self:flex-end; color:var(--red-text);font:16px var(--mono); } /* Adresse und Nummer: eine Ebene tiefer */ .weg-kachel p.kachel-daten{ margin:16px 0 0;font:12px var(--mono);letter-spacing:.08em;line-height:1.5; } .weg-kachel p.kachel-daten + p.kachel-daten{margin-top:8px;} .kachel-daten a{ color:var(--navy);text-decoration:none; border-bottom:1px solid var(--red);padding-bottom:2px; overflow-wrap:anywhere; } .kachel-daten a:hover,.kachel-daten a:focus-visible{ color:var(--red-text);border-bottom-color:var(--red-text); } /* Hover fuellt navy -- nur die beiden echten Links */ a.weg-kachel:hover,a.weg-kachel:focus-visible{ background:var(--navy);border-color:var(--navy);box-shadow:none; } a.weg-kachel:hover .weg-icon,a.weg-kachel:focus-visible .weg-icon{stroke:#fff;} a.weg-kachel:hover p.kachel-titel,a.weg-kachel:focus-visible p.kachel-titel{color:#fff;} a.weg-kachel:hover p.weg-kachel-text,a.weg-kachel:focus-visible p.weg-kachel-text{color:rgba(255,255,255,.88);} a.weg-kachel:hover .weg-kachel-pfeil,a.weg-kachel:focus-visible .weg-kachel-pfeil{color:var(--red-light);} /* Direkt-Kachel: kein Link, also kein Hover-Wechsel (Erbe aus 58) */ .weg-kachel--direkt:hover,.weg-kachel--direkt:focus-visible{ background:var(--paper-bright);border-color:var(--navy);box-shadow:none; } .weg-kachel--direkt:hover .weg-icon{stroke:var(--navy);} .weg-kachel--direkt:hover p.kachel-titel{color:var(--navy);} .weg-kachel--direkt:hover p.weg-kachel-text{color:var(--muted);} /* ============================================================ 60 · Kontaktseite komplett neu gedacht (Susa 10.09.2026) ------------------------------------------------------------ Ersetzt die Abschnitte 53b bis 59 fuer kontakt.html. Vorher fuenf verworfene Entwuerfe, alle mit derselben Struktur: drei Kaesten mit fast nichts drin. Susas Urteil zuletzt ("zu hart weiss", "wirken alle nicht sehr nett") lag nicht am Farbton -- 400x204 px fuer Titel, Halbsatz und Pfeil sind ueberwiegend leere Flaeche, und die Website hat sonst NIRGENDS Kaesten mit Piktogrammen. Ihre Sprache ist typografisch: Haarlinien, Ziffern, grosse Schrift. Jetzt: die Kontaktflaeche ist EINE Navy-Flaeche. Damit ist die Weiss-Frage konstruktiv erledigt statt abgemildert, die Seite bekommt Masse statt Luft, und Kontakt wird der sichtbare Endpunkt der Reise -- jede andere Seite ist hell, diese eine landet. Die drei Wege stehen als nummerierte Spalten mit Haarlinien dazwischen, wie die Untersuchungs- felder auf den Angebotsseiten. Symbole ersatzlos gestrichen. Die Ziffern 01-03 leisten dasselbe im vorhandenen Register. Farbregel aus Abschnitt 59 gilt weiter und ist hier tragend: auf Navy IMMER --red-light #E06A4C, nie --red #CD4A2F (das waere 2.71:1). Eigene Klassen (.kontakt-navy, .weg-spalte, .vorgespraech), damit .kontakt-hero/.weg-kachel aus 54-59 nicht hineinwirken. Beide Sektionen tragen bewusst NICHT die Klasse .section -- damit greift pages.css:22 (.section p{color:var(--muted)}) hier gar nicht erst. ============================================================ */ /* --- Navy-Kopf mit den drei Wegen --------------------------- */ .kontakt-navy{background:var(--navy);padding:88px 0 0;} /* Abschnitt 46 setzt section:not(.section-navy):not(.navy-section) p.eyebrow auf --red-text (0,3,2). Diese Sektion ist navy, traegt aber keine der beiden Klassen -- ohne gleich starke Gegenregel stuende das Eyebrow in #B93E26 auf Navy = 2.22:1. Deshalb :not() nachgebaut statt aufgestockt. */ section.kontakt-navy:not(.section-navy) p.eyebrow{color:var(--red-light);} .kontakt-navy h1{ max-width:none;margin:18px 0 0;color:var(--paper); font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.04; } .kontakt-navy h1 em{color:var(--red-light);} .kontakt-navy p.kontakt-lead{ max-width:600px;margin:26px 0 0;color:var(--on-navy); font-size:17px;line-height:1.7; } .wege-liste{margin-top:74px;padding-bottom:80px;display:block;} @media (min-width:901px){ .wege-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:0;} } .weg-spalte{ display:block;padding:30px 30px 34px 0; border-top:1px solid var(--on-navy-line);text-decoration:none; } @media (min-width:901px){ .weg-spalte + .weg-spalte{padding-left:30px;border-left:1px solid var(--on-navy-line);} } .weg-spalte p.weg-nr{margin:0;color:var(--red-light);font:400 12px var(--mono);letter-spacing:.14em;} .weg-spalte p.weg-name{ margin:18px 0 0;color:var(--paper); font:400 clamp(1.4rem,2.1vw,1.85rem)/1.15 var(--display); } .weg-spalte p.weg-satz{margin:10px 0 0;color:var(--on-navy);font-size:14.5px;line-height:1.6;} .weg-spalte p.weg-tun{margin:20px 0 0;color:var(--red-light);font:600 14px var(--sans);} a.weg-spalte:hover p.weg-name,a.weg-spalte:focus-visible p.weg-name{color:var(--red-light);} a.weg-spalte:hover p.weg-tun,a.weg-spalte:focus-visible p.weg-tun{text-decoration:underline;text-underline-offset:5px;} .weg-daten{margin:18px 0 0;} .weg-daten a{ display:block;width:fit-content;margin-bottom:10px; color:var(--paper);font:12.5px var(--mono);letter-spacing:.07em; text-decoration:none;border-bottom:1px solid var(--red-light);padding-bottom:3px; overflow-wrap:anywhere; } .weg-daten a:hover,.weg-daten a:focus-visible{color:var(--red-light);} .kontakt-sig{ margin:0;padding-bottom:34px;color:var(--on-navy); font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase; } /* --- Helle Sektion: was im Vorgespraech passiert ------------- */ .vorgespraech{padding:82px 0;background:var(--paper);} .vorgespraech-grid{display:block;} @media (min-width:901px){ .vorgespraech-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;} } .vorgespraech h2{margin:16px 0 0;color:var(--navy);font-size:clamp(1.9rem,3vw,2.6rem);} .vorgespraech h2 em{color:var(--red-text);} .vorgespraech p.vg-text{margin:0;color:var(--muted);font-size:16.5px;line-height:1.7;} @media (max-width:900px){ .vorgespraech p.vg-text{margin-top:30px;} } .vorgespraech p.vg-zusage{ margin:26px 0 0;padding-left:16px;border-left:2px solid var(--red); color:var(--navy);font-size:17px;line-height:1.65; } /* ============================================================ 61 · Kontaktseite als Verzeichnis (Susa 10.09.2026) ------------------------------------------------------------ Ersetzt Abschnitt 60. Zwei Designer, unabhaengig voneinander, derselbe Befund: Abschnitt 60 zeichnete dieselben drei Kaesten wie alle Entwuerfe davor, nur mit Haarlinien statt Fuellung -- die Linien standen SENKRECHT und umschlossen weiter eine Flaeche. Gemessen: 63 % vertikale Fuellung, 154 px des Navy-Feldes trugen ueber die volle Breite nichts. Jetzt keine Umschliessung mehr: ein roter Balken eroeffnet, Weissraum trennt, die Spaltenhoehe bestimmt der Inhalt. Susas Vorgaben in dieser Runde: Text UNTER die Ueberschrift (nicht daneben), Optionen NEBENEINANDER (nicht untereinander), Grund blau. Behobene Befunde aus Abschnitt 60: (a) Die drei "gleichrangigen" Spalten waren ungleich -- 383 / 353 / 353 px, weil Spalte 1 keine linke Haarlinie hatte. Jetzt 3 x 416 px, identisch. Zusaetzlich haelt min-height:52px auf .kr-satz die drei Handlungszeilen auf einer Hoehe (Saetze sind 2/2/1 Zeilen lang). (b) Die H1 brach ab 360 px auf zwei rote Zeilen, bei 390 px blieb 1 px Reserve -- Verstoss gegen "rote Kursive nie ueber zwei Zeilen". Ursache: fester rem-Boden in clamp(). Jetzt vw-Boden clamp(1.7rem,8.4vw,3.75rem), einzeilig bis 320 px hinunter. (c) Das Navy-Feld lief 829 px am Stueck in die navyfarbene Fusszeile (#223554 auf #223554, Stufe 1.00): die Seite hatte keinen Boden. Grund jetzt --navy-deep #1A2942, alle Kontraste steigen dadurch mit. (d) Die Signatur war 11px Mono versal wie die Fusszeilen- Links, 92 px entfernt -- sie las sich als zweite Fusszeile. Jetzt Newsreader 19px: eine Unterschrift. (e) Abschnitt 60 hatte KEINE rote Flaeche; die Regel "genau eine rote Flaeche je Ansicht" war mit null erfuellt. Jetzt der 6px-Balken. Er gehoert allen drei Wegen und keinem -- deshalb bricht er die Gleichrangigkeit nicht, was ein roter Knopf auf Weg 01 taete. KORREKTUR an Abschnitt 59 und 60: dort steht "Rot auf Navy ist immer --red-light #E06A4C". Der Wert ist FALSCH. --red-light wird in Abschnitt 46 (Zeile 646) auf #E69A8E ueberschrieben; die Definition in Zeile 14 ist tot. Effektiv gilt #E69A8E = 5.50:1 auf --navy, 6.51:1 auf --navy-deep. #E06A4C waere 3.72:1 und wuerde durchfallen. RICHTIGE REGEL: Rot auf dunklem Grund ist #E69A8E, Rot auf hellem Grund ist --red-text #B93E26. Eyebrow-Falle, zum dritten Mal: Abschnitt 46 setzt section:not(.section-navy):not(.navy-section) p.eyebrow auf --red-text (0,3,2). Eine dunkle Sektion ohne diese Klassen bekommt #B93E26 auf Dunkel = 2.63:1. Die Gegenregel muss die :not()-Kette NACHBAUEN, nicht aufstocken. Der Pfeil ↗ (U+2197) ist in KEINER der 16 Schriftdateien enthalten, U+2192 (→) ebenfalls nicht -- er wird aus einer Systemschrift geliehen. Betrifft auch den Kopfzeilen-Knopf auf jeder Seite. Hier bewusst beibehalten, weil ein Wegfall nur auf dieser Seite sie von allen anderen abkoppeln wuerde. Offene seitenweite Entscheidung. ============================================================ */ .kr{background:var(--navy-deep);padding:96px 0 0;} section.kr:not(.section-navy) p.eyebrow{color:#E69A8E;} .kr h1{ max-width:none;margin:14px 0 0;color:var(--paper); font:500 clamp(1.7rem,8.4vw,3.75rem)/1.02 var(--display);letter-spacing:-.012em; } .kr h1 em{color:#E69A8E;font-style:italic;} .kr p.kr-lead{margin:30px 0 0;max-width:640px;color:var(--on-navy);font:400 17px/1.72 var(--sans);} .kr-liste{margin-top:84px;} .kr-balken{height:6px;background:var(--red);} .kr-spalten{display:block;padding-top:34px;} @media (min-width:901px){ .kr-spalten{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;align-items:start;} } .kr-weg{ display:block;text-decoration:none;color:var(--paper); padding:16px 20px 20px;margin:-16px -20px -20px; transition:background .12s ease-out; } @media (max-width:900px){ .kr-weg{padding:26px 0 30px;margin:0;} .kr-weg + .kr-weg{border-top:1px solid var(--on-navy-line);} } .kr-weg > *{min-width:0;} .kr-weg p.kr-nr{margin:0;color:var(--on-navy);font:400 20px/1 var(--mono);letter-spacing:.06em;} .kr-weg p.kr-name{ margin:20px 0 0;color:var(--paper); font:500 clamp(1.35rem,2vw,1.75rem)/1.2 var(--display);letter-spacing:-.01em; } .kr-weg p.kr-satz{margin:12px 0 0;color:var(--on-navy);font:400 16px/1.62 var(--sans);} @media (min-width:901px){ .kr-weg p.kr-satz{min-height:52px;} } .kr-tun{ display:inline-block;margin-top:22px;color:var(--paper);font:600 15px/1.45 var(--sans); border-bottom:1px solid rgba(247,245,236,.45);padding-bottom:4px; transition:color .12s,border-color .12s; } /* display:block + width:fit-content -- inline-block liesse Mail und Nummer in einer Zeile zusammenlaufen, sobald die Spalte breit genug ist. Genau das passierte bei 416 px. */ .kr-daten{margin:22px 0 0;} .kr-daten a{ display:block;width:fit-content;max-width:100%; color:var(--paper);font:400 13px/1.5 var(--mono);letter-spacing:.02em; text-decoration:none;border-bottom:1px solid rgba(247,245,236,.45);padding:6px 0 4px; overflow-wrap:anywhere; } .kr-daten a + a{margin-top:6px;} .kr-daten a:hover,.kr-daten a:focus-visible{color:#E69A8E;border-bottom:2px solid #E69A8E;} /* Hover hellt auf statt abzudunkeln -- Aufhellen ist die freundliche Bewegung, Abdunkeln liest sich als Druck. Weg 03 ist ein
(zwei Ziele darin) und reagiert nie; dort leuchtet nur die beruehrte Datenzeile. Dieser Verhaltensunterschied IST die Auskunft, dass es zwei Ziele sind. */ a.kr-weg:hover,a.kr-weg:focus-visible{background:rgba(247,245,236,.055);} a.kr-weg:hover .kr-tun,a.kr-weg:focus-visible .kr-tun{color:#E69A8E;border-bottom:2px solid #E69A8E;} a.kr-weg:focus-visible{outline:2px solid #E69A8E;outline-offset:2px;} .kr-sig{margin:76px 0 0;padding-bottom:96px;color:var(--paper);font:400 19px/1.4 var(--display);} /* ============================================================ 62 · Kontaktspalten: Rueckbau auf Susas Praeferenz (10.09.) ------------------------------------------------------------ Susa hat die Fassung VOR der Designer-Runde direkt verglichen und gesagt: "Ich mochte das im Design mehr." Konkret ging es um drei Dinge, die Abschnitt 61 geaendert hatte: 1. Roter 6px-Balken -> duenne Haarlinie (--on-navy-line). 2. Keine Trennung -> senkrechte Haarlinien zwischen den Spalten. 3. Handlung und Ziffer in Papierton -> beide in Lachs #E69A8E. Was daran inhaltlich stimmt: Punkt 3 ist der eigentliche Grund, warum die alte Fassung waermer wirkt. Das Rot sitzt dort an DREI Stellen, an denen das Auge ohnehin landet (Ziffer, Handlung, Datenzeile), statt als Balken am oberen Rand, wo niemand hinsieht. Die Linien sind Geschmack, die Farbverteilung ist Wirkung. Was das kostet, bewusst in Kauf genommen: Die Regel "genau eine rote Flaeche je Ansicht" ist damit wieder mit NULL erfuellt -- die Seite hat kein rotes Flaechenelement mehr, nur rote Schrift. Und die senkrechten Linien umschliessen wieder eine Flaeche, was beide Designer als Kern des Kastenproblems benannt hatten. Susa hat das Bild gesehen und sich dafuer entschieden. Nicht ohne ihren Anlass zurueck- bauen. Zwei Fehler des alten Stands werden NICHT mit zurueckgeholt: (a) Gleiche Spaltenbreiten. Frueher 383/353/353 px, weil nur Spalte 2 und 3 einen linken Innenabstand hatten. Jetzt 28px Innenabstand auf ALLEN drei und -28px am Raster, damit Spalte 1 trotzdem an der H1-Kante steht. Gemessen 376/375/375 px, Textkante Spalte 1 = H1-Kante = 115 px. (b) align-items:stretch. Ohne das endet die Haarlinie zwischen Spalte 2 und 3 rund 45 px tiefer als die zwischen 1 und 2, weil Spalte 3 zwei Mono-Zeilen mehr hat. Jetzt alle drei 262 px hoch, die Linien enden gemeinsam. ============================================================ */ .kr-balken{height:1px;background:var(--on-navy-line);} .kr-spalten{gap:0;margin-inline:-28px;padding-top:0;} @media (min-width:901px){ .kr-spalten{grid-template-columns:repeat(3,1fr);align-items:stretch;} .kr-weg{padding:34px 28px 8px;margin:0;} .kr-weg + .kr-weg{border-left:1px solid var(--on-navy-line);} } @media (max-width:900px){ .kr-spalten{margin-inline:0;} .kr-weg{padding:26px 0 30px;margin:0;} .kr-weg + .kr-weg{border-top:1px solid var(--on-navy-line);border-left:0;} } /* Rot dort, wo das Auge landet: Ziffer, Handlung, Datenzeile. #E69A8E als Literal, nicht var(--red-light) -- der Token ist in der Datei doppelt definiert, siehe Abschnitt 61. */ .kr-weg p.kr-nr{color:#E69A8E;font-size:13px;letter-spacing:.14em;} .kr-tun{color:#E69A8E;border-bottom:1px solid rgba(230,154,142,.5);} a.kr-weg:hover .kr-tun,a.kr-weg:focus-visible .kr-tun{color:#E69A8E;border-bottom:2px solid #E69A8E;} .kr-daten a{color:var(--paper);border-bottom:1px solid rgba(230,154,142,.55);} /* ============================================================ 63 · Signaturzeile der Kontaktseite entfernt (Susa 10.09.) ------------------------------------------------------------ "Susanne Hagen · SUSA Consulting · Hamburg" stand als letzte Zeile ueber der Fusszeile. Susa: weg damit. Sachlich richtig -- Name, Firma und Ort stehen bereits im Utility-Band ganz oben ("Susanne Hagen · Unabhaengige HR-Tech-Beratung"), in der Fusszeile ("Unabhaengige HR-Tech-Beratung aus Hamburg") und im Impressum. Die Zeile war die dritte Nennung auf derselben Ansicht. .kr-sig traegt in Abschnitt 61 den unteren Abschluss der Sektion (padding-bottom:96px). Ohne das Element endet die Sektion direkt unter den Spalten. Der Abstand wandert deshalb auf .kr selbst. ============================================================ */ .kr{padding-bottom:112px;} /* ============================================================ 64 · Zwei Kontrastfehler aus dem Gesamt-Audit (10.09.2026) ------------------------------------------------------------ Gefunden beim automatischen Durchgang ueber alle neun Seiten: jedes Blatt-Textelement gemessen, Vorder- gegen tatsaechlich gerenderte Hintergrundfarbe. (a) REGRESSION, die ich selbst verursacht habe. Abschnitt 56 hat .panel-label{color:var(--red-text)} ungescopet gesetzt -- fuer die damalige Kontaktseite. Die Klasse gibt es aber auch im Hero-Panel der STARTSEITE, und dort ist der Grund navy. Ergebnis: die Zeile "Welche Situation ist Ihre?" stand in #B93E26 auf #223554 = 2.22:1, bei 10px/600. Auf dem meistgesehenen Element der ganzen Website. styles-human.css hatte dort korrekt #e69a8e (5.50:1); mein Abschnitt 56 hat das ueberschrieben. Lehre: Klassennamen aus den Basen NIE ungescopet umfaerben. .panel-label existiert in styles-human.css, in pages.css-Seiten und in vier design-v2-Abschnitten. (b) Der Pfeil im Zeeg-Knopf und im Anfrage-Alternativlink stand in --red #CD4A2F auf Papier = 4.16:1 bei 15px/600. Das ist kein grosser Text, also gilt 4.5:1. Die Beschrif- tung daneben war laengst --red-text (5.09:1) -- nur der Pfeil war uebersehen worden. Beide jetzt gleich. Bestaetigt die Regel aus Abschnitt 61/62: --red ist eine FLAECHENfarbe und nie Schriftfarbe. ============================================================ */ .hero-panel .panel-label{color:#E69A8E;} .button.button-zeeg span{color:var(--red-text);} .anfrage-alt a span{color:var(--red-text);} /* ============================================================ 65 · Rechtsseiten, Block 1 des Abarbeitungsplans (10.09.) ------------------------------------------------------------ Neu ist nur .legal-highlight: der abgesetzte Kasten fuer das Widerspruchsrecht in der Datenschutzerklaerung. Art. 21 Abs. 4 DSGVO verlangt einen Hinweis "in einer verstaendlichen und von anderen Informationen getrennten Form" -- ein Spiegelstrich in einer Rechteliste erfuellt das nicht. Deshalb eine eigene Flaeche mit rotem Anschnitt, nicht bloss ein Absatz. Alles Uebrige an Block 1 war Textarbeit in datenschutz.html, impressum.html und anfrage.html und brauchte kein CSS. ============================================================ */ .legal-highlight{ margin:34px 0 44px;padding:26px 28px 24px; background:var(--paper-bright);border-left:3px solid var(--red); } .legal-highlight h3{margin:0;color:var(--navy);font-size:20px;} .legal .legal-highlight p{margin:14px 0 0;color:var(--navy);font-size:15.5px;line-height:1.7;} @media (max-width:600px){ .legal-highlight{padding:22px 20px 20px;} } /* ============================================================ 66 · Kontaktseite vorerst ohne Formular-Weg (Susa 11.09.) ------------------------------------------------------------ Die Zustellung der Formularmails ist noch nicht bewiesen: die Domain hat SPF "-all" und DMARC "p=reject", der Versand ueber Microsoft Graph ist gebaut, aber die App-Registrierung in Entra ID ist noch nicht fertig. Ein Formular, das Anfragen lautlos verliert, ist schlechter als kein Formular. Weg 02 "Nachricht schreiben" ist deshalb vorerst raus; es bleiben Kalender und Direktkontakt. ZURUECKBAUEN, sobald die Testmail ankommt: kontakt.html aus kontakt.html.mit-formular wiederherstellen und diesen Abschnitt loeschen. Das Formular selbst (anfrage.html, sendmail.php) bleibt unveraendert liegen. Zwei Spalten statt drei. Bei 1240 px waeren zwei 1fr-Spalten 620 px breit -- das ist fuer die kurzen Wegsaetze unnoetig viel und laesst die Zeile auseinanderfallen. Deshalb feste Spaltenbreiten und der Rest bleibt Luft: die Wege behalten damit exakt dieselbe Breite wie in der Dreierfassung. ============================================================ */ /* NACHTRAG 11.09.: Susa wollte statt zwei wieder drei Wege -- Termin, Anrufen, Schreiben. "Anrufen oder mailen" ist dafuer in zwei eigene Spalten geteilt. Damit steht das Dreierraster aus Abschnitt 61/62 unveraendert wieder, und .kr-spalten--zwei wird nicht mehr gebraucht. Die Regel bleibt stehen, falls die Zweierfassung nochmal gebraucht wird -- ohne die Klasse im Markup hat sie keine Wirkung. */ @media (min-width:901px){ .kr-spalten--zwei{grid-template-columns:repeat(2,minmax(0,413px));} } /* ============================================================ 67 · Utility-Band auf kleinen Schirmen (Block 3, 11.09.) ------------------------------------------------------------ Gemessen bei 390 und 360 px: beide Spannen brechen auf je zwei Zeilen, das Band wird 46 px hoch. Es ist die erste Zeile, die ein Besucher sieht, und sie besteht aus gesperrten Versalien in 10 px -- zwei Zeilen davon sind eine Mauer. Zwei Personas haben das unabhaengig angemerkt. Unter 601 px faellt die rechte Spanne weg. Die linke passt dann einzeilig (gemessen ~299 px in 354 px Satzbreite). "vor Ort und digital" steht ohnehin ausfuehrlicher in der FAQ. ============================================================ */ @media (max-width:600px){ .utility-inner span:last-child{display:none;} .utility-inner{justify-content:flex-start;} } /* ============================================================ ABSCHNITT 68 · Rechtstexte: Ueberschriftengroessen (11.09.2026) ------------------------------------------------------------ PROBLEM: Auf datenschutz.html und impressum.html wurden die Abschnittsueberschriften ("1. Verantwortliche Stelle", "2. Hosting") in 54px gesetzt — derselben Groesse wie die Marketing-H2 der Angebotsseiten. Bei 15px Flisstext ist das ein Verhaeltnis von 3,6:1. Bei 390px fielen H1 und H2 sogar auf denselben Wert (32,8px), die Hierarchie war dort also gar nicht mehr lesbar. URSACHE: pages.css setzt `.legal h2{font:600 32px ...}` (0,1,1). design-v2.css Zeile 258 setzt `.section h2,.callout h2{font-size: clamp(2.1rem,4.2vw,3.375rem)}` — gleiche Spezifitaet (0,1,1), aber spaeter geladen, also gewinnt sie. Der Rechtstext liegt in
, wird davon also miterfasst. LOESUNG: `.section .legal h2` (0,2,1) schlaegt beide. Nicht die globale .section-Regel anfassen — die traegt jede Marketingseite. Zusaetzlich bekommen die Abschnitte Abstand nach oben: Bei kleineren Ueberschriften reicht der 15px-Absatzabstand nicht mehr aus, um zehn nummerierte Abschnitte voneinander zu trennen. ============================================================ */ .section .legal h2{ margin:0 0 14px; color:var(--navy); font:500 clamp(1.4rem,2.2vw,1.65rem)/1.25 var(--display); letter-spacing:-.01em; } .section .legal > h2:not(:first-of-type){margin-top:58px;} .section .legal h3{ margin:34px 0 8px; color:var(--navy); font:600 18px/1.4 var(--sans); letter-spacing:0; } .section .legal .legal-highlight h3{margin:0;font-size:19px;}