/* =========================================================================== SIGNALAKQUISE — Webseite, gemeinsames Seitengeruest --------------------------------------------------------------------------- Farbe, Schrift, Material und jede Komponente kommen aus tokens.css (signalakquise-brand-kit, System „Zweiklang"). Hier steht ausschliesslich, wie eine SEITE aufgebaut ist, damit alle fuenf Seiten gleich lesen und eine Formkorrektur alle erreicht. Der Aufbau jeder Seite ist derselbe Dreiklang: .band dunkles Nachtglas-Band Kopf, Navigation, Held, Abschluss
helles Papier Argument, Beweis, Tabelle, Text .band.fuss dunkles Nachtglas-Band Fuss Das ist keine Dekoration, sondern die Kernaussage der Marke: aussen ruhige deutsche Seriositaet, innen ein laufendes System. Deshalb nie mischen. Radius 0. Keine Schatten. Kein Orange. Ein Signalmoment pro Ansicht. =========================================================================== */ *{ box-sizing: border-box; margin: 0; padding: 0 } html{ scroll-behavior: smooth } /* --------------------------------------------------------------------------- DAS BASISGESCHOSS (23.08.2026). tokens.css definiert JEDEN Farbtoken erst auf `.sa-paper` bzw. `.sa-instrument`/`.sa-nacht`. Auf `:root` und `body` war folglich nichts definiert — und alles, was ausserhalb dieser drei Flaechen liegt, fiel auf Browser-Vorgaben zurueck. Gemessen am 22.08.: · `.sprung` (Sprung zum Inhalt) rendert `background: var(--sa-signal)` unaufloesbar, also transparent: Kontrast 1,17:1 statt 4,5 — und in Times. Der einzige Kontrastfehler der Seite, ausgerechnet in der Tastaturbedienung. · `a.nav__marke` und ein Link im Abschluss von /kostenlos-testen: `rgb(0,0,238)`, das Standardblau des Browsers, mit Unterstrich. · `input#r-termine` und der Honigtopf: Arial 13,33px. Ein Fix, vier Symptome. Der Grundzustand der SEITE ist Nachtglas (das `body`-Schwarz war schon immer #080C13), also traegt `:root` denselben Tokensatz wie `.sa-instrument`. `.sa-paper` ueberschreibt ihn im hellen Hauptteil wie bisher. Nichts an tokens.css angefasst — die Datei ist aus dem Brand Kit gespiegelt. --------------------------------------------------------------------------- */ :root{ --sa-bg: #080C13; --sa-bg-raised: #0E141E; --sa-bg-panel: #141C28; --sa-ink: #E8EDF3; --sa-body: #A3B0BF; --sa-rule: #1E2836; --sa-rule-strong: #2C3A4C; --sa-signal: #00C97B; --sa-signal-weak: rgba(0,201,123,.08); --sa-signal-edge: rgba(0,201,123,.34); --sa-btn-bg: #00C97B; --sa-btn-ink: #03231A; --sa-dot: rgba(200,222,255,.06); --sa-cyan: #46B6D8; --sa-violett: #8E9AEA; --sa-bernstein: #E0A455; --sa-rose: #E1687B; --sa-stahl: #7E93AC; } body{ background: var(--sa-bg); color: var(--sa-body); font-family: var(--sa-font); font-size: var(--sa-fs-body); line-height: var(--sa-lh-body); -webkit-font-smoothing: antialiased; } /* Kein Standardblau mehr. `inherit` statt einer eigenen Farbe, damit ein Link die Farbe seiner Flaeche annimmt (Papier wie Nachtglas) und nicht ein zweites Gruen in die Ansicht bringt. Jede Komponente, die eine eigene Linkfarbe setzt, gewinnt ohnehin ueber die Spezifitaet. */ a{ color: inherit } .nav__marke{ text-decoration: none } /* Formularelemente erben die Schrift nicht von selbst. */ input, button, select, textarea{ font-family: inherit; font-size: inherit } img{ max-width: 100% } .bahn{ max-width: 1180px; margin: 0 auto; padding: 0 40px; width: 100% } @media (max-width: 640px){ .bahn{ padding: 0 22px } } /* --------------------------------------------------------------------------- DIE BAENDER. Nachtglas mit Material darunter: Raster, Korn, Vignette. Das Licht ist Atmosphaere, keine Form — es hoert vor jeder Textzeile auf. --------------------------------------------------------------------------- */ .band{ position: relative; overflow: hidden; isolation: isolate; background: var(--sa-bg) } .band > .lage{ position: absolute; inset: 0; z-index: -1; pointer-events: none } .band .schein{ background: radial-gradient(112% 62% at 50% -12%, rgba(122,164,226,.15), transparent 58%), radial-gradient(48% 40% at 90% 104%, rgba(0,201,123,.07), transparent 64%); } .band .korn{ opacity: .05; mix-blend-mode: soft-light; background: url("korn.png") 0 0/128px 128px repeat } /* --------------------------------------------------------------------------- NAVIGATION. Sitzt im dunklen Band, ohne eigene Flaeche. --------------------------------------------------------------------------- */ .nav{ display: flex; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--sa-rule) } .nav__marke{ display: flex; align-items: center; gap: 13px; flex: none } .nav__marke img{ height: 23px; width: auto; display: block } .nav__zusatz{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--sa-dim); border-left: 1px solid var(--sa-rule-strong); padding-left: 13px } .nav__links{ display: flex; gap: 15px; margin-left: 8px; flex-wrap: nowrap } /* `nowrap` stand bisher nur in der Regel fuer kleine Bildschirme — dort war das Problem aufgefallen und dort geloest worden. Auf dem Schreibtisch brach „Der Ablauf" aber genauso um, sobald die Leiste eng wurde: zwei Zeilen zwischen einzeiligen Nachbarn, was wie ein Fehler aussieht und die Grundlinie der ganzen Zeile verschiebt. Die Regel gehoert nach oben, nicht in eine Abfrage. */ .nav__links a{ font-size: 13px; color: var(--sa-body); text-decoration: none; white-space: nowrap; padding-bottom: 3px; border-bottom: 1px solid transparent; transition: color var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease) } .nav__links a:hover{ color: var(--sa-ink) } .nav__links a[aria-current="page"]{ color: var(--sa-ink); border-bottom-color: var(--sa-signal) } .nav__ende{ margin-left: auto; display: flex; align-items: center; gap: 16px } .nav .sa-btn-ghost{ padding: 9px 16px; font-size: 13px } /* Das Aufklappmenü „Industrien“. Ein
-Element, damit es ohne JavaScript bedienbar bleibt; das Skript ergaenzt nur Ueberfahren, Escape und Klick daneben. Radius 0 und keine Schatten wie ueberall — die Kante traegt, nicht der Schlagschatten. */ .nav__grp{ position: relative } .nav__grp summary{ font-size: 13px; color: var(--sa-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 3px; border-bottom: 1px solid transparent; list-style: none; user-select: none; white-space: nowrap; transition: color var(--sa-dur) var(--sa-ease), border-color var(--sa-dur) var(--sa-ease) } /* Das Browser-Dreieck an drei Stellen abschalten. Eine reicht nicht: Chrome hoert auf ::-webkit-details-marker, Firefox und Safari auf list-style bzw. ::marker. Bleibt eines uebrig, steht ein zweiter Pfeil neben unserem. */ .nav__grp summary{ list-style-type: none } .nav__grp summary::-webkit-details-marker{ display: none } .nav__grp summary::marker{ content: "" } .nav__grp summary:hover{ color: var(--sa-ink) } .nav__grp summary:focus-visible{ outline: 1px solid var(--sa-signal); outline-offset: 3px } .nav__grp summary.nav__grp--aktiv{ color: var(--sa-ink); border-bottom-color: var(--sa-signal) } .nav__pfeil{ width: 9px; height: 6px; flex: none; opacity: .7; transition: transform var(--sa-dur) var(--sa-ease) } .nav__grp[open] .nav__pfeil{ transform: rotate(180deg) } .nav__grp-menu{ position: absolute; top: calc(100% + 11px); left: -14px; z-index: 40; min-width: 176px; display: flex; flex-direction: column; background: #0B1119; border: 1px solid var(--sa-rule-strong); padding: 6px 0 } /* Unsichtbare Bruecke ueber die Luecke zwischen Knopf und Liste: ohne sie verlaesst die Maus das Element auf dem Weg nach unten und es faellt zu. */ .nav__grp-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 13px } .nav__grp-menu a{ font-size: 13px; padding: 8px 16px; border-bottom: 0; color: var(--sa-body); white-space: nowrap } .nav__grp-menu a:hover{ color: var(--sa-ink); background: rgba(255,255,255,.04) } .nav__grp-menu a[aria-current="page"]{ color: var(--sa-signal) } @media (max-width: 1100px){ .nav{ flex-wrap: wrap; gap: 14px 20px } .nav__zusatz{ display: none } .nav__links{ order: 3; width: 100%; margin: 0; gap: 20px; overflow-x: auto } /* Die Reiterzeile scrollt waagerecht — dann darf kein Reiter umbrechen, sonst steht „Kostenlos testen“ zweizeilig neben einzeiligen Nachbarn. */ .nav__links > a{ white-space: nowrap } .nav__ende{ margin-left: auto } /* Am kleinen Bildschirm laeuft die Reiterzeile waagerecht und scrollt; ein absolut gesetztes Menue wuerde darin abgeschnitten. Es klappt deshalb WAAGERECHT in die Zeile auf, direkt hinter seinen Knopf. */ .nav__grp{ display: inline-flex; align-items: center; gap: 20px } .nav__grp-menu{ position: static; flex-direction: row; gap: 20px; min-width: 0; background: none; border: 0; padding: 0 } .nav__grp-menu::before{ display: none } .nav__grp-menu a{ padding: 0 0 3px } .nav__grp-menu a:hover{ background: none } } /* --------------------------------------------------------------------------- HELD. Aussage schmal links, Beweis breit rechts — der asymmetrische Split ist das Arbeitspferd des Systems. --------------------------------------------------------------------------- */ .held{ padding: 92px 0 76px; display: grid; grid-template-columns: 1fr 1.02fr; gap: 62px; align-items: start } .held--schmal{ display: block; padding: 64px 0 52px } @media (max-width: 980px){ .held{ grid-template-columns: 1fr; gap: 44px; padding: 62px 0 54px } } .etikett{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--sa-dim) } .held h1{ font-size: clamp(32px, 4.3vw, 50px); line-height: 1.1; letter-spacing: -.03em; font-weight: 600; color: var(--sa-ink); margin-top: 22px; max-width: 17ch; text-wrap: balance } .held--schmal h1{ max-width: 22ch } .held .lede{ font-size: 16px; line-height: 1.66; color: var(--sa-body); max-width: 58ch; margin-top: 20px } .held--schmal .lede{ max-width: 78ch } .held .lede + .lede{ margin-top: 13px } .tat{ display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap } .mikro{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); margin-top: 14px } /* --------------------------------------------------------------------------- DAS INSTRUMENT IM HELD. Kein Ablaufdiagramm, sondern echte Zeilen mit echter Quelle und echter Frist. Doktrin: das System als Oberflaeche zeigen. --------------------------------------------------------------------------- */ .instr{ padding: 0 } .instr__kopf{ display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--sa-glass-border); font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--sa-dim) } .instr__kopf b{ color: var(--sa-body); font-weight: 500 } .instr__live{ display: inline-flex; align-items: center; gap: 7px; color: var(--sa-signal) } .instr__live::before{ content: ""; width: 6px; height: 6px; background: currentColor; animation: sa-pulse 2.4s var(--sa-ease) infinite } .instr table{ width: 100%; border-collapse: collapse } .instr td{ padding: 12px 18px; border-bottom: 1px solid var(--sa-rule); font-size: 12px; vertical-align: top; line-height: 1.5 } .instr tr:last-child td{ border-bottom: 0 } .instr .s{ color: var(--sa-ink); font-weight: 500; width: 40% } .instr .q{ color: var(--sa-dim); font-size: 11px } .instr .f{ font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .04em; color: var(--sa-body); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums } .instr__fuss{ padding: 12px 18px; border-top: 1px solid var(--sa-glass-border); font-size: 11px; color: var(--sa-dim) } .instr__fuss a{ color: var(--sa-signal); text-decoration: none; border-bottom: 1px solid var(--sa-signal-edge) } @media (max-width: 560px){ .instr .q{ display: none } .instr .s{ width: auto } } /* --------------------------------------------------------------------------- DER KUNDENSTREIFEN. Fremdlogos auf weissen Kacheln, damit gemischtfarbige Kundenmarken auf dem Nachtglas gleichmaessig lesen. Radius 0. --------------------------------------------------------------------------- */ .streifen{ border-top: 1px solid var(--sa-rule); padding: 26px 0 34px } .streifen__zeile{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 18px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap } .streifen__zeile b{ color: var(--sa-body); font-weight: 500 } .streifen__zeile a{ color: var(--sa-dim); text-decoration: none; border-bottom: 1px solid var(--sa-rule-strong) } .streifen__zeile a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } .kacheln{ display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px } .kachel{ background: #FFFFFF; height: 58px; display: flex; align-items: center; justify-content: center; padding: 11px 17px } .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block } @media (max-width: 900px){ .kacheln{ grid-template-columns: repeat(4, 1fr) } } @media (max-width: 480px){ .kacheln{ grid-template-columns: repeat(3, 1fr) } } /* --------------------------------------------------------------------------- PAPIER. Alles, was Argument und Beweis ist. 120 bis 160 px Luft zwischen grossen Bloecken — der Weissraum ist selbst das Qualitaetssignal. --------------------------------------------------------------------------- */ main{ background: var(--sa-bg) } /* --------------------------------------------------------------------------- DER VERTIKALE RHYTHMUS (23.08.2026) --------------------------------------------------------------------------- Gemessen am 22.08.: die Abschnittspolster lagen bei 84 / 88 / 92 / 100 / 104 px — fuenf Basiswerte, keiner davon abgeleitet. Daraus ergaben sich Abstaende von 88 und 92 px INNERHALB eines Bandes und 180 bis 196 px an den Bandnaehten. Das Kit verlangt 96-128 px zwischen Abschnitten, der Handwerkskanon 120-160 px an den Naehten. Getroffen wurde kein einziges Mal eines von beidem; es war ein Wechsel aus vier zufaelligen Zahlen. ZWEI STUFEN, mehr braucht es nicht: --sa-takt 112px zwischen zwei Abschnitten im selben Band --sa-naht 80px je Seite an der Bandkante, also 160px Naht Die Rechnung dahinter: `+ .abschnitt` nimmt dem Folgeabschnitt das obere Polster weg, der Abstand INNERHALB eines Bandes ist also allein das untere Polster des ersten — 112 px. An der Naht treffen das untere Polster des letzten Abschnitts und das obere des ersten im naechsten Band aufeinander, 80 + 80 = 160 px. Beide Werte liegen damit im vorgegebenen Fenster, und es gibt nur noch zwei Zahlen statt fuenf. --------------------------------------------------------------------------- */ :root{ --sa-takt: 112px; --sa-naht: 80px } .abschnitt{ padding: var(--sa-naht) 0 var(--sa-takt) } .abschnitt + .abschnitt{ padding-top: 0 } .abschnitt:last-of-type{ padding-bottom: var(--sa-naht) } /* Am Telefon ist derselbe Abstand zu viel: dort traegt eine Bildschirmhoehe weniger Inhalt, und 112 px sind fast ein Sechstel davon. Dasselbe Verhaeltnis, kleinerer Massstab. */ @media (max-width: 700px){ :root{ --sa-takt: 76px; --sa-naht: 56px } } .snum{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--sa-body); padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--sa-rule) } h2{ font-size: clamp(30px, 3.7vw, 42px); line-height: 1.11; letter-spacing: -.028em; font-weight: 600; color: var(--sa-ink); max-width: 22ch; text-wrap: balance } h2 em{ font-style: normal; color: var(--sa-signal) } h3{ font-size: 15.5px; font-weight: 600; color: var(--sa-ink); margin: 34px 0 9px } .abschnitt > p, .fliess{ font-size: 15.5px; line-height: 1.68; color: var(--sa-body); max-width: 74ch; margin-top: 16px } b, strong{ color: var(--sa-ink); font-weight: 600 } main a{ color: var(--sa-body); text-decoration: none; border-bottom: 1px solid var(--sa-rule-strong) } main a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } main a.signal{ color: var(--sa-signal); border-bottom-color: var(--sa-signal-edge) } ul.punkte{ list-style: none; margin: 18px 0; max-width: 74ch } ul.punkte li{ font-size: 15.5px; line-height: 1.66; color: var(--sa-body); padding: 0 0 11px 19px; position: relative } ul.punkte li::before{ content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; background: var(--sa-rule-strong) } /* Kopfzeile eines Abschnitts: Aussage links, Anmerkung rechts. */ .kopf2{ display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: end } .kopf2 p{ font-size: 15.5px; line-height: 1.68; color: var(--sa-body); max-width: 52ch } @media (max-width: 860px){ .kopf2{ grid-template-columns: 1fr; gap: 16px; align-items: start } } /* ---- Die vier Stufen ---- */ .stufen{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .stufe{ border-right: 1px solid var(--sa-rule); padding: 24px 24px 26px } .stufe:last-child{ border-right: 0 } .stufe .n{ font-family: var(--sa-font-mono); font-size: 28px; font-weight: 600; color: var(--sa-rule-strong); letter-spacing: -.02em; line-height: 1 } .stufe.eins .n, .stufe.zwei .n{ color: var(--sa-ink) } .stufe b{ display: block; font-size: 15.5px; margin: 14px 0 7px } .stufe p{ font-size: 13px; line-height: 1.58; color: var(--sa-body) } .stufe .tun{ display: block; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--sa-rule); font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim) } .stufe.eins .tun{ color: var(--sa-signal) } @media (max-width: 900px){ .stufen{ grid-template-columns: repeat(2, 1fr) } .stufe:nth-child(2){ border-right: 0 } .stufe:nth-child(1), .stufe:nth-child(2){ border-bottom: 1px solid var(--sa-rule) } } @media (max-width: 520px){ .stufen{ grid-template-columns: 1fr } .stufe{ border-right: 0; border-bottom: 1px solid var(--sa-rule) } } /* ---- Die vier Schritte. Das Erklärstück der Startseite. ---- Grosse Nummer, Kennung in Mono, deutsche Überschrift, zwei Sätze. Mehr nicht: wer hier einen Absatz schreibt, hat den Schritt nicht verstanden. */ .schritte{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--sa-rule-strong) } .schritt4{ border-right: 1px solid var(--sa-rule); padding: 26px 26px 30px } .schritt4:last-child{ border-right: 0 } .schritt4 .n{ font-family: var(--sa-font-mono); font-size: 34px; font-weight: 600; color: var(--sa-dim); letter-spacing: -.03em; line-height: 1 } .schritt4 .kenn{ display: block; margin: 16px 0 9px; font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .schritt4 b{ display: block; font-size: 17px; line-height: 1.28; letter-spacing: -.018em; color: var(--sa-ink); margin-bottom: 9px } .schritt4 p{ font-size: 13px; line-height: 1.6; color: var(--sa-body) } @media (max-width: 980px){ .schritte{ grid-template-columns: repeat(2, 1fr) } .schritt4:nth-child(2){ border-right: 0 } .schritt4:nth-child(1), .schritt4:nth-child(2){ border-bottom: 1px solid var(--sa-rule) } } @media (max-width: 560px){ .schritte{ grid-template-columns: 1fr } .schritt4{ border-right: 0; border-bottom: 1px solid var(--sa-rule) } } /* ---- Karten ---- */ .karten{ display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; margin-top: 34px } .karten > div{ padding: 25px 25px 24px } .karten .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 11px } .karten b{ display: block; font-size: 14px; margin-bottom: 6px } .karten p{ font-size: 13px; line-height: 1.58; color: var(--sa-body) } /* ---- Nummerierte Strecke ---- */ .strecke{ margin-top: 38px; border-top: 1px solid var(--sa-rule-strong) } .schritt{ display: grid; grid-template-columns: 54px 1fr 1.15fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--sa-rule); align-items: baseline } .schritt .n{ font-family: var(--sa-font-mono); font-size: 11px; letter-spacing: .1em; color: var(--sa-dim); font-variant-numeric: tabular-nums } .schritt b{ font-size: 15.5px } .schritt p{ font-size: 13px; line-height: 1.62; color: var(--sa-body) } @media (max-width: 760px){ .schritt{ grid-template-columns: 40px 1fr; gap: 8px 16px } .schritt p{ grid-column: 2 } } /* ---- Die eine markierte Flaeche: das Abrechnungsmodell ---- */ .modell{ margin-top: 40px; padding: 34px 36px 32px } .modell .k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .modell h3{ font-size: 21px; line-height: 1.22; letter-spacing: -.02em; font-weight: 600; color: var(--sa-ink); margin: 12px 0 0; max-width: 24ch } .modell p{ font-size: 14px; line-height: 1.65; color: var(--sa-body); max-width: 66ch; margin-top: 13px } .modell .liste{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--sa-signal-edge) } .modell .liste > div{ display: grid; grid-template-columns: 15px 1fr; gap: 11px; padding: 9px 0; font-size: 13px; color: var(--sa-body) } .modell .liste .h{ color: var(--sa-signal); font-family: var(--sa-font-mono); font-size: 11px } @media (max-width: 700px){ .modell{ padding: 26px 22px } .modell .liste{ grid-template-columns: 1fr } } /* ---- Beleg-Zeile: Zahl gross, Bezeichnung klein ---- */ .belege{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .belege > div{ padding: 28px 26px 28px 0; border-right: 1px solid var(--sa-rule) } .belege > div:last-child{ border-right: 0 } .belege b{ display: block; font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1 } .belege span{ display: block; margin-top: 11px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } @media (max-width: 760px){ .belege{ grid-template-columns: repeat(2, 1fr) } .belege > div{ padding-left: 0; border-bottom: 1px solid var(--sa-rule) } .belege > div:nth-child(2){ border-right: 0 } } /* ---- Tabelle im Papier ---- */ .tab{ width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 13px } .tab th{ text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--sa-rule-strong); font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim); white-space: nowrap } .tab td{ padding: 14px 16px 14px 0; border-bottom: 1px solid var(--sa-rule); color: var(--sa-body); line-height: 1.55; vertical-align: top } .tab td:first-child{ color: var(--sa-ink); font-weight: 500 } .tab .mono{ font-family: var(--sa-font-mono); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap } /* ---- Fragen ---- */ .fragen{ margin-top: 36px; border-top: 1px solid var(--sa-rule-strong) } .frage{ border-bottom: 1px solid var(--sa-rule); padding: 22px 0 } .frage b{ display: block; font-size: 15.5px; color: var(--sa-ink); margin-bottom: 8px } .frage p{ font-size: 14px; line-height: 1.66; color: var(--sa-body); max-width: 78ch } /* --------------------------------------------------------------------------- ABSCHLUSS UND FUSS. Wieder dunkles Band. --------------------------------------------------------------------------- */ .schluss{ padding: 88px 0 84px; text-align: left; max-width: 62ch } .schluss h2{ color: var(--sa-ink); max-width: 20ch } .schluss p{ font-size: 16px; line-height: 1.66; color: var(--sa-body); margin-top: 18px } .fuss{ border-top: 1px solid var(--sa-rule) } .fuss__innen{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding: 46px 0 34px } .fuss img{ height: 22px; width: auto; display: block } .fuss__her{ font-size: 13px; line-height: 1.62; color: var(--sa-dim); max-width: 44ch; margin-top: 18px } .fuss__her a{ color: var(--sa-body); text-decoration: none; border-bottom: 1px solid var(--sa-rule-strong) } .fuss__her a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } .fuss h4{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 14px } .fuss ul{ list-style: none } .fuss ul li{ padding: 5px 0 } .fuss ul a{ font-size: 13px; color: var(--sa-body); text-decoration: none; border-bottom: 1px solid transparent } .fuss ul a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } .fuss__zeile{ display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 0 30px; border-top: 1px solid var(--sa-rule); font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim) } .fuss__zeile b{ color: var(--sa-body); font-weight: 500 } @media (max-width: 760px){ .fuss__innen{ grid-template-columns: 1fr; gap: 30px } } /* =========================================================================== FALLSTUDIEN Stammdaten und Logo schmal links, Befund und Beweis breit rechts. Der asymmetrische Split, achtmal. Die Karte wird durch die Haarlinie definiert, nicht durch eine Fläche. =========================================================================== */ .faelle{ border-top: 1px solid var(--sa-rule-strong) } .fall{ display: grid; grid-template-columns: 210px 1fr; gap: 44px; padding: 44px 0; border-bottom: 1px solid var(--sa-rule) } .fall__links .kachel{ background: #FFFFFF; height: 62px; display: flex; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid var(--sa-rule) } .fall__links .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain; display: block } .fall__stamm{ margin-top: 20px } .fall__stamm > div{ padding: 9px 0; border-bottom: 1px solid var(--sa-rule) } .fall__stamm > div:last-child{ border-bottom: 0 } .fall__stamm span{ display: block; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim) } .fall__stamm b{ display: block; font-size: 13px; color: var(--sa-ink); font-weight: 500; margin-top: 3px; line-height: 1.42 } .fall__nr{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .fall__rechts h3{ font-size: 21px; line-height: 1.24; letter-spacing: -.022em; font-weight: 600; color: var(--sa-ink); margin: 11px 0 0; max-width: 30ch } .fall__rechts h3 b{ font-weight: 600; color: var(--sa-ink) } .fall__anm{ font-size: 14px; line-height: 1.62; color: var(--sa-body); max-width: 66ch; margin-top: 12px } .fall__zahlen{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 26px; border-top: 1px solid var(--sa-rule-strong) } .fall__zahlen > div{ padding: 16px 18px 16px 0; border-right: 1px solid var(--sa-rule) } .fall__zahlen > div:last-child{ border-right: 0 } .fall__zahlen b{ display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1.15 } .fall__zahlen span{ display: block; margin-top: 6px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } .fall__spalten{ display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 30px } .fall__spalten h4{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--sa-dim); padding-bottom: 10px; border-bottom: 1px solid var(--sa-rule) } .fall__spalten ul.punkte{ margin-top: 13px } .fall__spalten ul.punkte li{ font-size: 13px; line-height: 1.58 } .fall__quelle{ display: inline-block; margin-top: 26px; font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--sa-signal); border-bottom: 1px solid var(--sa-signal-edge) } main a.fall__quelle:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } @media (max-width: 900px){ .fall{ grid-template-columns: 1fr; gap: 26px } .fall__zahlen{ grid-template-columns: repeat(2, 1fr) } .fall__zahlen > div:nth-child(2){ border-right: 0 } .fall__spalten{ grid-template-columns: 1fr; gap: 24px } } .weitere{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 34px } .weitere .kachel{ background: #FFFFFF; height: 50px; display: flex; align-items: center; justify-content: center; padding: 9px 14px; border: 1px solid var(--sa-rule) } .weitere .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } .weitere span{ display: block; margin-top: 8px; text-align: center; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-dim) } @media (max-width: 860px){ .weitere{ grid-template-columns: repeat(3, 1fr) } } @media (max-width: 460px){ .weitere{ grid-template-columns: repeat(2, 1fr) } } /* =========================================================================== RESSOURCENLISTE =========================================================================== */ .liste{ margin-bottom: 44px } .liste > h3{ font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim); padding-bottom: 12px; margin: 0 0 2px; border-bottom: 1px solid var(--sa-rule-strong) } .r{ display: grid; grid-template-columns: 36px 1fr 132px 74px; gap: 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--sa-rule) } .r .nr{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-dim); font-variant-numeric: tabular-nums } .r .t{ font-size: 15.5px; color: var(--sa-ink); font-weight: 500; border-bottom: 0 } .r a.t{ border-bottom: 1px solid var(--sa-rule-strong) } main .r a.t:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } .r .t.offen{ color: var(--sa-dim); font-weight: 400 } .r .k{ display: block; font-size: 12px; line-height: 1.5; color: var(--sa-body); margin-top: 4px; max-width: 62ch } .r .m{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim) } .r .m.telefon{ color: var(--sa-signal) } .r .m.wissen{ color: var(--sa-bernstein) } .r .s{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-body); text-align: right } /* „Öffnen“ ist ein echter Link (siehe s3_ressourcen.py) — er muss sich also auch wie einer anfuehlen, sonst zielt man daneben und haelt die Seite fuer kaputt. Ganze Zellenhoehe als Trefferflaeche. */ a.s{ display: block; text-decoration: none; border-bottom: 0; transition: color var(--sa-dur) var(--sa-ease) } a.s:hover{ color: var(--sa-signal) } .r .s.wart{ color: var(--sa-dim) } @media (max-width: 780px){ .r{ grid-template-columns: 32px 1fr; gap: 4px 14px } .r .m, .r .s{ grid-column: 2; text-align: left; margin-top: 6px } .r .s{ display: none } } /* =========================================================================== EINSTIEGSANGEBOTE =========================================================================== */ .angebote{ border-top: 1px solid var(--sa-rule-strong) } .angebot{ padding: 40px 0; border-bottom: 1px solid var(--sa-rule) } .angebot__kopf{ display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap } .angebot__nr{ font-family: var(--sa-font-mono); font-size: 24px; font-weight: 600; color: var(--sa-rule-strong); letter-spacing: -.02em; line-height: 1 } .angebot__kopf h3{ font-size: 21px; line-height: 1.2; letter-spacing: -.022em; font-weight: 600; color: var(--sa-ink); margin: 0 } /* Die Zusage steht auf einer neutralen Kante, nicht auf einer grünen: fünf grüne Balken untereinander machen aus dem Akzent eine Struktur, und dann trägt er nichts mehr. Grün bekommt auf dieser Seite nur der eine Chip. */ .angebot__zusage{ font-size: 17px; line-height: 1.58; color: var(--sa-ink); font-weight: 500; max-width: 62ch; margin-top: 18px; padding-left: 18px; border-left: 2px solid var(--sa-rule-strong) } .angebot__was{ font-size: 14px; line-height: 1.66; color: var(--sa-body); max-width: 74ch; margin-top: 16px } .angebot__schritte{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid var(--sa-rule) } .angebot__schritte > div{ padding: 18px 20px 18px 0; border-right: 1px solid var(--sa-rule) } .angebot__schritte > div:last-child{ border-right: 0 } .angebot__schritte .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .15em; color: var(--sa-dim) } .angebot__schritte b{ display: block; font-size: 14px; margin: 9px 0 6px } .angebot__schritte p{ font-size: 12px; line-height: 1.56; color: var(--sa-body) } .angebot__kv{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sa-rule) } .angebot__kv span{ display: block; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-dim) } .angebot__kv b{ display: block; font-size: 13px; line-height: 1.5; color: var(--sa-body); font-weight: 400; margin-top: 5px } /* Der Handlungsaufruf je Angebot. Ghost, nie solid — siehe Kommentar im Inhaltsmodul: fünf grüne Schaltflächen untereinander sind eine Struktur, kein Akzent. */ .angebot__tat{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 26px } .angebot__tat span{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim) } @media (max-width: 900px){ .angebot__schritte{ grid-template-columns: repeat(2, 1fr) } .angebot__schritte > div:nth-child(2){ border-right: 0 } .angebot__kv{ grid-template-columns: repeat(2, 1fr); gap: 16px 24px } } @media (max-width: 520px){ .angebot__schritte, .angebot__kv{ grid-template-columns: 1fr } .angebot__schritte > div{ border-right: 0; border-bottom: 1px solid var(--sa-rule) } } /* Offene Pflichtangabe im Impressum. Sichtbar als Lücke, nicht als Text. */ .tab td.offen{ color: var(--sa-dim); font-family: var(--sa-font-mono); font-size: 11px } /* =========================================================================== SCHMALE FLÄCHEN --------------------------------------------------------------------------- Eine Tabelle schrumpft nicht unter ihre Mindestbreite. Unterhalb von rund 500 px schiebt sie damit die Seite nach rechts hinaus. Die Lösung ist nicht, sie zu verstecken: sie scrollt IN SICH. Der Leser behält die dichten Daten, und die Seite bleibt an der Kante stehen. NACHPRÜFEN NUR AUF EINEM ECHTEN GERÄT ODER MIT GERÄTE-EMULATION. Teuer gelernt: `chrome --headless --window-size=390,…` klemmt die Ansicht auf 500 px und schneidet das Bild trotzdem auf 390 zu. Das sieht aus wie eine kaputte Seite und ist keine. Gegenprobe: eine Seite rendern, die window.innerWidth ausgibt. =========================================================================== */ img, svg{ max-width: 100% } .nav__links{ min-width: 0 } @media (max-width: 760px){ /* Die breiten Tabellen bekommen ihren eigenen Scrollbereich. */ .tab, .instr table{ display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab tbody, .tab tr, .instr table tbody, .instr table tr{ display: table; width: 100%; } .tab{ min-width: 0 } /* Innerhalb des Scrollbereichs darf umbrochen werden, wo es geht. */ .tab th{ white-space: normal } .tab td, .tab th{ padding-right: 12px } } @media (max-width: 560px){ .instr td{ padding: 11px 14px } .instr .f{ font-size: 10px } .fall__zahlen b{ font-size: 19px } .belege b{ font-size: 23px } .angebot__zusage{ font-size: 15.5px; padding-left: 14px } .angebot__kopf h3, .fall__rechts h3{ font-size: 20px } .modell{ padding: 22px 18px } .schluss{ padding: 62px 0 58px } } /* Letzte Sicherung: nichts schiebt den Körper seitwärts. Sie greift nur, wenn oben etwas übersehen wurde — sichtbar wird das dann als abgeschnittener Inhalt, nicht als kaputte Seite. */ /* NUR `body`, NICHT `html` (geaendert 18.08.2026). `overflow-x` auf dem Wurzelelement macht jedes `position: sticky` im Dokument wirkungslos — auch das der Kopfleiste. Auf `body` allein bleibt die Sicherung erhalten und der klebende Kopf funktioniert. */ body{ overflow-x: clip; max-width: 100% } /* --------------------------------------------------------------------------- BEWEGUNG. Kurze Strecke, lange Dauer, eine Kurve. Nichts fliegt herein. Der statische Zustand steht zuerst; reduzierte Bewegung erklaert die Sache weiterhin (tokens.css schaltet sie ab). --------------------------------------------------------------------------- */ .auf{ opacity: 0; transform: translateY(14px); transition: opacity .62s var(--sa-ease), transform .62s var(--sa-ease) } .auf.da{ opacity: 1; transform: none } @media (prefers-reduced-motion: reduce){ .auf{ opacity: 1; transform: none } } /* =========================================================================== VARIANTE 2 — die Bauteile für die dichtere Fassung --------------------------------------------------------------------------- Der Befund aus Fassung 1: eine lange helle Bahn liest sich leer. Das System „Zweiklang“ ist aber genau dafür gebaut, zwischen Papier und Nachtglas zu wechseln — nur hatte die erste Fassung den Wechsel nur oben und unten. Hier wechseln die Bänder durchgehend: Papier trägt Argument und Beweis, Nachtglas zeigt das laufende System. Regeln, die auch hier gelten: Radius 0, keine Schatten, kein Orange, Glas nur auf dunkel, EIN Signalmoment je Band. =========================================================================== */ .band--papier{ background: var(--sa-bg) } /* Trug 104px und war damit der fuenfte Basiswert. Die Naht regelt jetzt `--sa-naht` fuer alle Baender gleich; diese Sonderregel ist entfallen. */ /* Die Naht zwischen zwei dunklen Bändern. Ohne sie lesen zwei dunkle Abschnitte als ein Block; mit ihr als zwei Schläge. Eine Haarlinie mit Schein, keine Trennlinie über die volle Breite. */ .band--naht::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(680px, 86%); height: 1px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent, var(--sa-signal-edge), transparent); } /* ---- Kopfzeile eines dunklen Abschnitts ---- */ /* Dieselben zwei Stufen im Nachtband. `.dabschnitt` hatte 92px, also zwei Pixel neben `.abschnitt` — ein Unterschied, den niemand sieht und den trotzdem jeder pflegen muss. */ .dabschnitt{ padding: var(--sa-naht) 0 var(--sa-takt) } .dabschnitt + .dabschnitt{ padding-top: 0 } .dabschnitt:last-of-type{ padding-bottom: var(--sa-naht) } .dabschnitt .snum{ border-bottom-color: var(--sa-rule) } .dabschnitt h2{ color: var(--sa-ink) } .dabschnitt .kopf2 p{ color: var(--sa-body) } /* ---- Die Marktverteilung. Schematisch, ohne absolute Zahlen: wir haben keine, und eine erfundene wäre schlimmer als keine. ---- */ .markt{ margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .markt__leiste{ display: grid; grid-template-columns: 6fr 5fr 3fr 2fr; height: 76px; margin-top: 22px } .markt__leiste > div{ border: 1px solid var(--sa-rule); border-left: 0; display: flex; align-items: flex-end; padding: 9px 12px } .markt__leiste > div:first-child{ border-left: 1px solid var(--sa-rule) } .markt__leiste span{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim) } .markt__leiste .heiss{ background: var(--sa-signal-weak); border-color: var(--sa-signal-edge) } .markt__leiste .heiss span{ color: var(--sa-signal) } .markt__legende{ display: grid; grid-template-columns: 6fr 5fr 3fr 2fr; gap: 0; margin-top: 14px } .markt__legende > div{ padding-right: 18px } .markt__legende b{ display: block; font-size: 14px; margin-bottom: 5px } .markt__legende p{ font-size: 12px; line-height: 1.55; color: var(--sa-body) } @media (max-width: 760px){ .markt__leiste{ grid-template-columns: 1fr; height: auto } .markt__leiste > div{ border-left: 1px solid var(--sa-rule); border-top: 0; padding: 12px; align-items: center } .markt__leiste > div:first-child{ border-top: 1px solid var(--sa-rule) } .markt__legende{ grid-template-columns: 1fr; gap: 16px } } /* =========================================================================== DIE MASCHINE — das Mittelstück Drei Spalten: woher die Signale kommen, was damit passiert, was hinten herausfällt. Fremdlogos auf weissen Kacheln (Doktrin Abschnitt 9), damit gemischtfarbige Marken auf dem Nachtglas gleichmässig lesen. =========================================================================== */ .maschine{ display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 0; margin-top: 44px; align-items: stretch } .msp{ border: 1px solid var(--sa-glass-border); border-right: 0 } .msp:last-child{ border-right: 1px solid var(--sa-glass-border) } .msp--kern{ background: var(--sa-glass-fill); border-color: var(--sa-glass-border) } .msp__kopf{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--sa-glass-border); font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--sa-dim) } .msp--kern .msp__kopf{ color: var(--sa-signal) } .mz{ display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--sa-rule) } .msp > .mz:last-child{ border-bottom: 0 } .mz__n{ font-family: var(--sa-font-mono); font-size: 10px; color: var(--sa-dim); flex: none; width: 15px; font-variant-numeric: tabular-nums } .mz__t{ font-size: 13px; color: var(--sa-ink); flex: 1; line-height: 1.4 } .mz__k{ display: flex; gap: 5px; flex: none } .mz__k i{ background: #FFFFFF; width: 34px; height: 25px; display: flex; align-items: center; justify-content: center; padding: 4px 5px } .mz__k img{ max-width: 100%; max-height: 100%; width: auto; object-fit: contain; display: block } /* Die Kernspalte: die vier Schritte, einer davon der Signalmoment. */ .mz--kern{ padding: 19px 16px } .mz--kern .mz__t{ font-weight: 500; font-size: 13px } .mz--kern .mz__d{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim); flex: none } .mz--brenn{ background: var(--sa-glass-signal-fill); border-top: 1px solid var(--sa-glass-signal-border); border-bottom: 1px solid var(--sa-glass-signal-border) } .mz--brenn .mz__t{ color: var(--sa-ink) } .mz--brenn .mz__d{ color: var(--sa-signal) } @media (max-width: 900px){ .maschine{ grid-template-columns: 1fr } .msp{ border-right: 1px solid var(--sa-glass-border); border-bottom: 0 } .msp:last-child{ border-bottom: 1px solid var(--sa-glass-border) } } /* ---- Zähler: grosse Zahl, kleine Bezeichnung, in Zellen ---- */ .zaehler{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border-top: 1px solid var(--sa-rule) } .zaehler > div{ padding: 26px 24px 26px 0; border-right: 1px solid var(--sa-rule) } .zaehler > div:last-child{ border-right: 0 } .zaehler b{ display: block; font-size: 40px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1 } .zaehler span{ display: block; margin-top: 10px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } @media (max-width: 760px){ .zaehler{ grid-template-columns: repeat(2, 1fr) } .zaehler > div{ border-bottom: 1px solid var(--sa-rule); padding-right: 18px } .zaehler > div:nth-child(2){ border-right: 0 } } /* ---- Die Fallstudien-Flagge: Logo, Zahl, ein Satz, ein Weg ---- */ .flaggen{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 34px } .flagge{ padding: 24px; display: flex; flex-direction: column; gap: 14px } .flagge .kachel{ background: #FFFFFF; height: 40px; width: fit-content; min-width: 108px; display: flex; align-items: center; justify-content: center; padding: 7px 14px } .flagge .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } .flagge .wert{ font-size: 28px; font-weight: 600; letter-spacing: -.024em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1.1 } .flagge p{ font-size: 13px; line-height: 1.58; color: var(--sa-body) } .flagge a{ margin-top: auto; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-signal); text-decoration: none; border-bottom: 1px solid var(--sa-signal-edge); width: fit-content } @media (max-width: 760px){ .flaggen{ grid-template-columns: 1fr } } /* ---- Logowand auf dunklem Grund ---- */ .wand{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 30px } .wand .kachel{ background: #FFFFFF; height: 46px; display: flex; align-items: center; justify-content: center; padding: 8px 13px } .wand .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } @media (max-width: 860px){ .wand{ grid-template-columns: repeat(3, 1fr) } } /* ---- Zwei Kacheln nebeneinander: testen und Ressourcen ---- */ .zweiweg{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px } .zweiweg > div{ padding: 30px 30px 28px; display: flex; flex-direction: column } .zweiweg .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .zweiweg h3{ font-size: 21px; line-height: 1.24; letter-spacing: -.02em; margin: 12px 0 0 } .zweiweg p{ font-size: 13px; line-height: 1.62; color: var(--sa-body); margin-top: 11px } .zweiweg .tat{ margin-top: auto; padding-top: 22px } @media (max-width: 760px){ .zweiweg{ grid-template-columns: 1fr } } /* ---- Fünf Schritte statt vier. Enger gesetzt, sonst bleibt je Spalte kein lesbares Mass mehr. Bricht früher um als die Vierer-Fassung. ---- */ .schritte--fuenf{ grid-template-columns: repeat(5, 1fr) } .schritte--fuenf .schritt4{ padding: 24px 20px 28px } .schritte--fuenf .schritt4 .n{ font-size: 28px } .schritte--fuenf .schritt4 b{ font-size: 16px } @media (max-width: 1080px){ .schritte--fuenf{ grid-template-columns: repeat(3, 1fr) } .schritte--fuenf .schritt4:nth-child(3){ border-right: 0 } .schritte--fuenf .schritt4:nth-child(-n+3){ border-bottom: 1px solid var(--sa-rule) } } @media (max-width: 700px){ .schritte--fuenf{ grid-template-columns: 1fr } .schritte--fuenf .schritt4{ border-right: 0; border-bottom: 1px solid var(--sa-rule) } } /* ---- Die Gegenüberstellung: kalter Termin gegen Termin mit Anlass ---- Zwei Karten, gleiches Gewicht. Die rechte bekommt die Signalkante — sie ist die Aussage, die linke ist der Vergleichspunkt. */ .gegen{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px } .gegen > div{ padding: 26px 26px 22px } .gegen > div:last-child{ border-color: var(--sa-signal-edge) } .gegen .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 16px } .gegen > div:last-child .n{ color: var(--sa-signal) } .gegen ul.punkte{ margin: 0 } .gegen ul.punkte li{ font-size: 14px; line-height: 1.6; padding-bottom: 12px } .gegen ul.punkte li:last-child{ padding-bottom: 0 } @media (max-width: 760px){ .gegen{ grid-template-columns: 1fr } } /* ---- Der Handlungsaufruf mitten auf der Seite. Eine gerahmte Fläche, keine neue Bildsprache: die Seite hat schon zwei dunkle Bänder, ein drittes würde den Rhythmus zerreissen. ---- */ .ruf{ display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; border: 1px solid var(--sa-rule-strong); padding: 44px 44px 40px } .ruf h2{ max-width: 18ch } .ruf p{ font-size: 15.5px; line-height: 1.66; color: var(--sa-body); margin-top: 14px; max-width: 46ch } .ruf__tat .tat{ margin-top: 0 } @media (max-width: 860px){ .ruf{ grid-template-columns: 1fr; gap: 28px; padding: 32px 26px 30px } } /* Die markierte Flaeche ohne eigene Ueberschrift: sie traegt nur die vier Bedingungen und darf dann nicht so hoch stehen wie ein ganzer Block. */ .modell--knapp{ padding: 26px 30px 22px } .modell--knapp .liste{ border-top: 0; padding-top: 0; margin-top: 10px } .modell--knapp .liste > div{ padding: 7px 0 } /* =========================================================================== FASSUNG 3 — die Seite wechselt durchgehend zwischen Papier und Nachtglas --------------------------------------------------------------------------- Vorgabe: „nicht alles nur weiss.“ Das System kann das von Haus aus, es lag nur brach. Die Zuordnung ist nicht Geschmack, sie folgt der Doktrin: Nachtglas alles, was SYSTEM zeigt — die Engine, die Angebote, der Ruf Papier alles, was ARGUMENT und BEWEIS ist — der Unterschied, die Wege Zwischen zwei dunklen Baendern steht die Naht (.band--naht), sonst lesen sie als ein Block statt als zwei Schlaege. =========================================================================== */ /* ---- Die fuenf Schritte als Glaskarten auf dunklem Grund ---- */ .schritte--glas{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 44px; border-top: 0 } .gschritt{ padding: 24px 22px 26px } .gschritt .n{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--sa-signal) } .gschritt .kenn{ display: block; margin: 18px 0 8px; font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .gschritt b{ display: block; font-size: 16px; line-height: 1.3; letter-spacing: -.018em; color: var(--sa-ink); margin-bottom: 10px } .gschritt p{ font-size: 13px; line-height: 1.6; color: var(--sa-body) } @media (max-width: 1080px){ .schritte--glas{ grid-template-columns: repeat(3, 1fr) } } @media (max-width: 700px){ .schritte--glas{ grid-template-columns: 1fr } } /* ---- Die fuenf kostenlosen Angebote als Glaskarten ---- */ .gangebote{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 40px } .gangebot{ padding: 22px 20px 24px; display: flex; flex-direction: column } .gangebot .n{ font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .16em; color: var(--sa-dim) } .gangebot b{ display: block; font-size: 15.5px; line-height: 1.32; color: var(--sa-ink); margin: 14px 0 9px } .gangebot p{ font-size: 12px; line-height: 1.58; color: var(--sa-body) } /* margin-top:auto statt eines festen Abstands: die Karten sind unterschiedlich lang, und eine Fusszeile, die auf fuenf Karten auf fuenf Hoehen sitzt, liest als Unfall. So fluchten sie am Kartenboden. */ .gangebot .gibt{ display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sa-glass-border); font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } @media (max-width: 1080px){ .gangebote{ grid-template-columns: repeat(3, 1fr) } } @media (max-width: 700px){ .gangebote{ grid-template-columns: 1fr } } /* ---- Der Handlungsaufruf im dunklen Band ---- */ .ruf--nacht{ border-color: var(--sa-glass-border); background: var(--sa-glass-fill) } .ruf--nacht h2{ color: var(--sa-ink) } .ruf--nacht p{ color: var(--sa-body) } /* ---- Der breite Held. Kein Split, kein Instrument daneben: die Startseite soll so wenig technisch sein wie möglich, und das Signalpanel war das technischste Element der ganzen Seite. Bleibt: Anspruch, zwei Wege. ---- */ .held--breit{ display: block; padding: 104px 0 84px; max-width: 900px } .held--breit h1{ font-size: clamp(34px, 5.2vw, 58px); max-width: 24ch; margin-top: 24px } /* Der feste Umbruch bleibt auf JEDER Breite stehen. Erster Versuch war `br{display:none}` am Handy — damit verschwindet aber auch das Leerzeichen, und aus „90 Tagen. Oder“ wurde „90 Tagen.Oder“. Zwei Saetze uebereinander lesen sich am schmalen Schirm ohnehin besser als ein durchlaufender Block. */ .held--breit .lede{ font-size: 18px; max-width: 60ch; margin-top: 24px } @media (max-width: 700px){ .held--breit{ padding: 66px 0 54px } } /* ---- Die vier Dinge. Grosse Nummer, ein Satz Ueberschrift, zwei Zeilen. ---- */ .vier{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--sa-rule-strong) } .vier > div{ padding: 32px 40px 34px 0; border-bottom: 1px solid var(--sa-rule) } .vier > div:nth-child(odd){ border-right: 1px solid var(--sa-rule); padding-right: 44px } .vier > div:nth-child(even){ padding-left: 44px } .vier .n{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--sa-signal) } .vier b{ display: block; font-size: 21px; line-height: 1.28; letter-spacing: -.02em; color: var(--sa-ink); margin: 14px 0 10px; max-width: 26ch } .vier p{ font-size: 14px; line-height: 1.64; color: var(--sa-body); max-width: 44ch } @media (max-width: 760px){ .vier{ grid-template-columns: 1fr } .vier > div{ padding: 26px 0 !important; border-right: 0 !important } } /* ---- Das Ergebnis: vier Zeilen mit Haken, keine Kartenwand ---- */ .ergebnis{ margin-top: 40px; border-top: 1px solid var(--sa-rule-strong); max-width: 78ch } .ergebnis > div{ display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--sa-rule); align-items: baseline } .ergebnis .h{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-signal) } .ergebnis b{ display: block; font-size: 17px; letter-spacing: -.016em; color: var(--sa-ink); margin-bottom: 6px } .ergebnis p{ font-size: 14px; line-height: 1.62; color: var(--sa-body) } /* ---- Kostenlos: drei Glaskarten am Fuss der Seite ---- */ .gratis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px } .gkarte{ padding: 28px 26px 26px; display: flex; flex-direction: column } .gkarte .n{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .gkarte b{ display: block; font-size: 18px; line-height: 1.26; letter-spacing: -.018em; color: var(--sa-ink); margin: 14px 0 10px } .gkarte p{ font-size: 13px; line-height: 1.6; color: var(--sa-body) } .gkarte .tat{ margin-top: auto; padding-top: 24px } @media (max-width: 860px){ .gratis{ grid-template-columns: 1fr } } /* ---- Der grüne Umriss-Knopf. Drei solide grüne Flächen nebeneinander waeren eine Kartenreihe in Signalgruen, und das verbietet die Doktrin: dann ist nichts mehr Signal. Der Umriss traegt die Farbe, ohne die Flaeche zu fuellen. Der eine SOLIDE gruene Knopf bleibt dem Termin vorbehalten. ---- */ .sa-btn-signal{ display: inline-flex; align-items: center; gap: var(--sa-2); padding: 13px 24px; font-family: var(--sa-font); font-size: var(--sa-fs-body); font-weight: 600; background: var(--sa-signal-weak); color: var(--sa-signal); border: 1px solid var(--sa-signal-edge); border-radius: var(--sa-radius); cursor: pointer; text-decoration: none; transition: border-color var(--sa-dur) var(--sa-ease), background var(--sa-dur) var(--sa-ease); } .sa-btn-signal:hover{ border-color: var(--sa-signal); background: rgba(0,201,123,.14) } /* ---- Das Ergebnis auf dunklem Grund. Die Zeilen bekommen eine Glasflaeche, damit sie nicht als nackte Liste auf dem Nachtglas liegen. ---- */ .dabschnitt .ergebnis{ border-top: 0; max-width: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px } .dabschnitt .ergebnis > div{ border-bottom: 0; padding: 24px 24px 26px; grid-template-columns: 22px 1fr; align-items: start } .dabschnitt .ergebnis b{ font-size: 16px; line-height: 1.32 } .dabschnitt .ergebnis p{ font-size: 13px } @media (max-width: 760px){ .dabschnitt .ergebnis{ grid-template-columns: 1fr } } /* Belege auf dunklem Grund: dieselbe Form, nur die Linien kommen aus dem dunklen Kontext (tokens.css setzt --sa-rule dort neu). */ .dabschnitt .belege{ border-top-color: var(--sa-rule-strong) } /* ---- Die vier Punkte neben dem Anspruch. Sie ersetzen das Signalpanel: gleiche Stelle, gleiche Glasflaeche — aber Nutzen statt Technik. Das gruene Quadrat ist das Rastermotiv der Bildmarke, kein Haken. ---- */ .held--zwei{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; padding: 96px 0 78px } .held--zwei h1{ max-width: 16ch } .held--zwei .lede{ max-width: 46ch } @media (max-width: 980px){ .held--zwei{ grid-template-columns: 1fr; gap: 44px; padding: 62px 0 54px } } .punkte4{ padding: 8px 30px } .punkte4 > div{ display: grid; grid-template-columns: 9px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--sa-rule); align-items: start } .punkte4 > div:last-child{ border-bottom: 0 } .punkte4 .mark{ width: 9px; height: 9px; background: var(--sa-signal); margin-top: 7px } .punkte4 b{ display: block; font-size: 17px; line-height: 1.3; letter-spacing: -.016em; color: var(--sa-ink); margin-bottom: 6px } .punkte4 p{ font-size: 13px; line-height: 1.58; color: var(--sa-body) } /* =========================================================================== DIE VIER MECHANISMEN — übernommen aus dem Deck v3, Folie 02 --------------------------------------------------------------------------- Vier Glaskarten: oben die Kennung, dann die Aussage, unten der konkrete Ausschnitt (Felder, Stufen, Signalarten, die Abfolge). Der Unterbau ist das, was die Karte glaubwürdig macht — ohne ihn wären es vier Behauptungen. =========================================================================== */ .mech{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; align-items: stretch } .mkarte{ padding: 24px 22px 24px; display: flex; flex-direction: column } .mkarte .k{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-signal) } .mkarte h3{ font-size: 17px; line-height: 1.3; letter-spacing: -.018em; color: var(--sa-ink); margin: 14px 0 10px; font-weight: 600 } .mkarte p{ font-size: 13px; line-height: 1.6; color: var(--sa-body) } .mkarte p + p{ margin-top: 9px } .mkarte .unten{ margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--sa-glass-border) } .mkarte .zeile{ display: flex; justify-content: space-between; gap: 12px; font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .04em; color: var(--sa-dim); line-height: 1.5 } .mkarte .zeile .z{ color: var(--sa-body); font-variant-numeric: tabular-nums } .mkarte .st1{ color: var(--sa-signal) } .mkarte .st2{ color: var(--sa-cyan) } .mkarte .st3{ color: var(--sa-violett) } .mkarte .st4{ color: var(--sa-stahl) } .mkarte .sum{ padding-top: 7px; margin-top: 2px; border-top: 1px solid var(--sa-rule) } .mkarte .marke{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-cyan); padding-top: 12px } /* Die Abfolge in Karte 04. Telefon ist der Kanal — die Kette im Deck nennt E-Mail und LinkedIn, das ist die US-Fassung und gilt hier nicht. */ .kette{ display: flex; flex-direction: column; gap: 0; margin-top: 4px } .kette .kn{ font-size: 12px; color: var(--sa-ink); padding: 7px 10px; border: 1px solid var(--sa-glass-border) } .kette .pf{ width: 1px; height: 10px; background: var(--sa-glass-border); margin-left: 16px } .mkarte--ziel{ color: var(--sa-ink) } .mkarte--ziel .erg{ margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sa-glass-signal-border); color: var(--sa-ink); font-weight: 600; font-size: 13px } @media (max-width: 1080px){ .mech{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 620px){ .mech{ grid-template-columns: 1fr } } /* =========================================================================== ALLE HANDLUNGSAUFRUFE IN SIGNALGRÜN --------------------------------------------------------------------------- Vorgabe Niklas, 28.07.2026. Damit weicht die Seite bewusst von der Doktrin ab, die auf Papier den schwarzen Knopf vorsieht (die Konvention der besten deutschen B2B-Seiten) und Grün auf EINEN Signalmoment je Ansicht rationiert. Der Tausch ist gewollt: ein durchgehend grüner Handlungsaufruf ist über die ganze Seite hinweg als „hier geht es weiter“ wiedererkennbar. --sa-signal ist kontextabhängig: #0A7A4C auf Papier (haelt Kontrast mit weisser Schrift), #00C97B auf Nachtglas (dort dunkle Schrift). =========================================================================== */ .sa-btn-gruen{ display: inline-flex; align-items: center; gap: var(--sa-2); padding: 13px 24px; font-family: var(--sa-font); font-size: var(--sa-fs-body); font-weight: 600; background: var(--sa-signal); color: #FFFFFF; border: 1px solid var(--sa-signal); border-radius: var(--sa-radius); cursor: pointer; text-decoration: none; transition: filter var(--sa-dur) var(--sa-ease); } .sa-btn-gruen:hover{ filter: brightness(1.1) } .sa-nacht .sa-btn-gruen{ color: #03231A } .nav .sa-btn-signal{ padding: 9px 16px; font-size: 13px } /* ---- Das Ergebnis: vier gerahmte Felder statt einer Liste mit Linien ---- */ .werte{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px } .werte > div{ padding: 26px 26px 24px; display: grid; grid-template-columns: 24px 1fr; gap: 16px; align-items: start } .werte .h{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-signal); padding-top: 2px } .werte b{ display: block; font-size: 17px; line-height: 1.3; letter-spacing: -.016em; color: var(--sa-ink); margin-bottom: 8px } .werte p{ font-size: 13px; line-height: 1.62; color: var(--sa-body) } @media (max-width: 760px){ .werte{ grid-template-columns: 1fr } } /* ---- Die vier Zahlen als EIN Rahmen, nicht als vier lose Spalten ---- */ .zahlen{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 14px; border: 1px solid var(--sa-rule-strong) } .zahlen > div{ padding: 28px 26px; border-right: 1px solid var(--sa-rule) } .zahlen > div:last-child{ border-right: 0 } /* Eine Kennzahl bricht nie um. „über 300 Mio. $“ stand sonst als „$“ allein in der zweiten Zeile. Passt sie nicht, wird sie kuerzer geschrieben, nicht umgebrochen. */ .zahlen b{ display: block; white-space: nowrap; font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1 } .zahlen span{ display: block; margin-top: 11px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } @media (max-width: 760px){ .zahlen{ grid-template-columns: repeat(2, 1fr) } .zahlen > div:nth-child(2){ border-right: 0 } .zahlen > div:nth-child(-n+2){ border-bottom: 1px solid var(--sa-rule) } } /* ---- Das Ergebnis in Mechanismus 04: ein Termin im Kalender, als kleines Kalenderblatt statt als Satz. Sichtbar in zwei Sekunden. ---- */ .kal{ margin-top: auto; padding-top: 16px; border-top: 1px solid var(--sa-glass-signal-border); display: flex; align-items: center; gap: 12px } .kal__blatt{ width: 46px; flex: none; border: 1px solid var(--sa-glass-signal-border); background: rgba(0,201,123,.10) } .kal__kopf{ background: var(--sa-signal); color: #03231A; font-family: var(--sa-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: center; padding: 3px 0 2px } .kal__tag{ font-size: 21px; font-weight: 600; color: var(--sa-ink); text-align: center; padding: 5px 0 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em } .kal__text b{ display: block; font-size: 13px; color: var(--sa-ink); line-height: 1.3 } .kal__text span{ display: block; margin-top: 4px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-signal) } /* ---- Die fünf kostenlosen Leistungen als Aufzählung in der Karte ---- */ .gkarte ul.mini{ list-style: none; margin: 12px 0 0 } .gkarte ul.mini li{ font-size: 12px; line-height: 1.5; color: var(--sa-body); padding: 6px 0 6px 18px; position: relative; border-bottom: 1px solid var(--sa-rule) } .gkarte ul.mini li:last-child{ border-bottom: 0 } .gkarte ul.mini li::before{ content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--sa-signal) } .gkarte ul.mini li b{ color: var(--sa-ink); font-weight: 600 } .gkarte ul.mini a{ color: var(--sa-ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid transparent } .gkarte ul.mini a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal-edge) } /* ---- Die Kundenwand: Logo UND Kennzahl als eine Einheit, nie als zwei getrennte Wände. Eine Logowand ohne Zahlen ist Deko, eine Zahlenwand ohne Namen unglaubwürdig. Doktrin Abschnitt 9. ---- */ .kunden{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px } .kunde{ padding: 20px 20px 18px; display: flex; flex-direction: column } .kunde .kachel{ background: #FFFFFF; height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--sa-rule) } .kunde .kachel img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } .kunde .wert{ font-size: 21px; font-weight: 600; letter-spacing: -.024em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 16px } .kunde .was{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim); margin-top: 7px; line-height: 1.5 } .kunde p{ font-size: 12px; line-height: 1.55; color: var(--sa-body); margin-top: 12px } .kunde .zeit{ margin-top: auto; padding-top: 14px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-dim) } @media (max-width: 1000px){ .kunden{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 560px){ .kunden{ grid-template-columns: 1fr } } /* ---- Die US-Zeile (20.08.2026, Fassung 17): die vier Kacheln der Kundenwand, gefaltet auf eine Logo-Reihe mit einem Satz. Zielmarkt ist Deutschland — CAPVIA führt den Beleg, die US-Vorgeschichte trägt eine Zeile. Logos auf weißen Kacheln (Doktrin Abschnitt 9), die Kennzahlen stehen auf /fallstudien. ---- */ .usleiste{ margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--sa-rule) } .usleiste__logos{ display: flex; gap: 10px; flex-wrap: wrap } .usleiste__logos i{ background: #FFFFFF; height: 36px; min-width: 88px; max-width: 120px; display: flex; align-items: center; justify-content: center; padding: 7px 14px; border: 1px solid var(--sa-rule) } .usleiste__logos i img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } .usleiste p{ margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--sa-body); max-width: 80ch } .usleiste p a{ color: var(--sa-signal); text-decoration: none; border-bottom: 1px solid var(--sa-signal-edge) } /* =========================================================================== DAS PULSIEREN DER HANDLUNGSAUFRUFE --------------------------------------------------------------------------- Ein Ring, der nach aussen läuft und dabei verschwindet — gebaut aus outline + outline-offset, NICHT aus einem Schatten. Zwei Gründe: 1. Das System kennt keine Schatten (Doktrin). Ein Ring ist eine Linie. 2. outline-offset wächst auf allen vier Seiten gleich. Ein skalierter Rahmen liefe bei einem breiten Knopf waagerecht schneller als senkrecht und sähe nach Fehler aus. Radius 0, wie alles hier: der Ring ist eckig und setzt das Raster der Bildmarke fort. Takt 2,8 s — ein ruhiger Herzschlag, kein Blinken. Bei reduzierter Bewegung schaltet tokens.css die Animation ohnehin ab. =========================================================================== */ @keyframes sa-ring{ 0% { outline-color: var(--sa-signal); outline-offset: 0 } 62% { outline-color: transparent; outline-offset: 10px } 100% { outline-color: transparent; outline-offset: 10px } } /* SIEBEN Knoepfe trugen diesen Ring, jeder endlos. Vier davon pulsierten auf der Startseite gleichzeitig, dazu zehn gruene Abschnittsetiketten — der Blinzeltest (Handwerk Abschnitt 4: ein Signalmoment je Ansicht) fiel damit durch, und in einem Standbild las sich der Ring als Doppelrahmen oder als haengengebliebener Fokus. Jetzt: nur der EINE Knopf im Helden, und er pulst dreimal statt ewig. Danach steht er ruhig da, wie jeder andere. */ .sa-btn-gruen, .sa-btn-signal{ outline: 1px solid transparent } .held .sa-btn-gruen{ animation: sa-ring 2.8s var(--sa-ease) 3; } /* Der Umriss-Knopf atmet in der eigenen Kante — auch das nur im Helden und auch das endlich. */ @keyframes sa-atem{ 0%, 100%{ border-color: var(--sa-signal-edge) } 50% { border-color: var(--sa-signal) } } .held .sa-btn-signal{ animation: sa-atem 2.8s var(--sa-ease) 3 } /* Beim Überfahren hört das Pulsieren auf: wer den Zeiger draufhat, ist gefunden — dann soll der Knopf ruhig stehen. */ .sa-btn-gruen:hover, .sa-btn-signal:hover{ animation: none; outline-color: transparent } /* =========================================================================== DIE ABFOLGE — aus Deck v3, Folie „Sobald ein Signal anschlägt“ --------------------------------------------------------------------------- Sieben Schritte untereinander, verbunden durch eine Haarlinie. Der letzte Schritt ist die Terminstrecke und steht im Signalglas: er ist der einzige, der über den Termin hinausgeht, und er ist der abrechnungsrelevante. =========================================================================== */ .abfolge{ margin-top: 44px; max-width: 860px } /* Die Logospalte fasst DREI Werkzeuge: Schritt 03 zeigt die drei Kanaele, und drei Kanaele heissen drei Zeichen. Bei 84px (zwei) wurde der Text der langen Zeilen dagegengedrueckt. */ .afz{ display: grid; grid-template-columns: 40px 1fr 130px; gap: 18px; align-items: center; padding: 18px 20px; border: 1px solid var(--sa-glass-border); background: var(--sa-glass-fill) } .afz .nr{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--sa-signal) } .afz .tx{ font-size: 13px; line-height: 1.55; color: var(--sa-body) } .afz .tx b{ color: var(--sa-ink) } .afz .wz{ display: flex; gap: 5px; justify-content: flex-end } .afz .wz i{ background: #FFFFFF; height: 26px; min-width: 36px; max-width: 40px; display: flex; align-items: center; justify-content: center; padding: 4px 6px; flex: none } .afz .wz i img{ max-height: 100%; max-width: 100%; width: auto; object-fit: contain } .afpf{ height: 16px; position: relative } .afpf::after{ content: ""; position: absolute; left: 16px; top: 3px; width: 8px; height: 8px; border-right: 2px solid var(--sa-signal); border-bottom: 2px solid var(--sa-signal); transform: rotate(45deg); opacity: .55 } .afz--ziel{ background: var(--sa-glass-signal-fill); border-color: var(--sa-glass-signal-border) } .afz--ziel .tx{ color: var(--sa-ink) } @media (max-width: 700px){ .afz{ grid-template-columns: 32px 1fr; gap: 12px } .afz .wz{ display: none } .afpf{ margin-left: 32px } } /* Die eingeklappte Abfolge (19.08.2026): sichtbar ist der Schrittitel, die Erläuterung öffnet per
— dieselbe Bauart wie das FAQ, ohne Skript bedienbar, im Quelltext vollständig. Das Plus/Minus ist Mono, weil es ein Systemzeichen ist, kein Schmuck. */ .afd summary{ cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 10px } .afd summary::-webkit-details-marker{ display: none } .afd summary::after{ content: "+"; font-family: var(--sa-font-mono); font-size: 13px; color: var(--sa-dim); flex: none; transition: color .2s } .afd[open] summary::after{ content: "\2212" } .afd summary:hover::after{ color: var(--sa-signal) } .afd p{ margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--sa-body) } /* Die Taktstrecke (19.08.2026): die Mengen-Logik der drei Schritte als eine Zeile mit vier Zellen — Alle, 50–100, 2–4, der Termin. Haarlinien statt Pfeilen (Handwerk Abschnitt 5: Nähe schlägt Pfeile), Grün nur auf der letzten Zelle, dem Ergebnis. */ .tstrecke{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--sa-glass-border); background: var(--sa-glass-fill) } .tstrecke > div{ padding: 20px 22px; border-right: 1px solid var(--sa-glass-border) } .tstrecke > div:last-child{ border-right: 0 } .tstrecke .w{ display: block; font-family: var(--sa-font-mono); font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: var(--sa-ink); font-variant-numeric: tabular-nums } .tstrecke .t{ display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--sa-dim) } .tstrecke .tst--ziel{ background: var(--sa-glass-signal-fill) } .tstrecke .tst--ziel .w{ color: var(--sa-signal) } @media (max-width: 820px){ .tstrecke{ grid-template-columns: 1fr 1fr } .tstrecke > div{ border-bottom: 1px solid var(--sa-glass-border) } .tstrecke > div:nth-child(even){ border-right: 0 } .tstrecke > div:nth-child(n+3){ border-bottom: 0 } } /* Der Handlungsaufruf unter der Abfolge. Eine Zeile, zwei Wege. */ .abschluss-ruf{ margin-top: 40px; border: 1px solid var(--sa-glass-border); background: var(--sa-glass-fill); padding: 30px 32px; display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center } .abschluss-ruf b{ display: block; font-size: 21px; line-height: 1.28; letter-spacing: -.02em; color: var(--sa-ink) } .abschluss-ruf span{ display: block; margin-top: 8px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-signal) } .abschluss-ruf .tat{ margin-top: 0 } @media (max-width: 800px){ .abschluss-ruf{ grid-template-columns: 1fr; gap: 22px } } /* --------------------------------------------------------------------------- BRANCHENSEITEN (industrie-*.html). Angelegt 04.08.2026. Drei Bausteine, die es sonst nirgends gibt: die Signalliste, der Wochentakt und — nur auf der M&A-Seite — die Herkunft. --------------------------------------------------------------------------- */ /* Die 28 Signale. Zwei Gruppen nebeneinander, in jeder 14 nummerierte Zeilen in zwei Spalten. Bewusst KLEIN und dicht: die Wirkung entsteht aus der Menge, nicht aus der Groesse der einzelnen Zeile. Wer sie liest, soll denken „die kennen meinen Markt“, nicht jede Zeile einzeln pruefen. */ .sigs{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 44px; border-top: 1px solid var(--sa-rule-strong) } .sigg{ padding: 30px 40px 32px 0 } .sigg--fest{ border-right: 1px solid var(--sa-rule); padding-right: 44px } .sigg--beweglich{ padding-left: 44px } .sigg__k{ display: flex; align-items: baseline; gap: 8px; font-family: var(--sa-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sa-signal) } .sigg__k i{ font-style: normal; letter-spacing: .1em; color: var(--sa-dim); text-transform: none; font-size: 10px } .sigg__k b{ margin-left: auto; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--sa-ink); font-variant-numeric: tabular-nums } .sigl{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-top: 18px } .sigl > div{ display: grid; grid-template-columns: 21px 1fr; gap: 9px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--sa-rule); font-size: 12px; line-height: 1.45; color: var(--sa-body) } .sigl > div span{ font-family: var(--sa-font-mono); font-size: 9px; color: var(--sa-dim); font-variant-numeric: tabular-nums } /* Der Wochentakt. Fuenf Stufen, die Phase klein darueber, die Menge gross. Nah an .zahlen, aber mit der Zeitangabe als drittem Feld. */ .takt{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--sa-rule-strong) } .takt > div{ padding: 24px 22px 26px; border-right: 1px solid var(--sa-rule) } .takt > div:last-child{ border-right: 0; background: var(--sa-glass-signal-fill) } .takt .p{ display: block; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-signal) } .takt b{ display: block; margin: 13px 0 10px; font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1 } .takt .w{ display: block; font-size: 12px; line-height: 1.5; color: var(--sa-body) } /* Die Herkunft (nur M&A). Zwei Glaskarten nebeneinander; das Mal dazwischen sitzt in der Fuge und sagt „zusammengegangen“, ohne ein Wort dafuer zu brauchen. Glas nur auf der dunklen Flaeche, wie in der Doktrin. */ .herkunft{ position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 44px } .herkunft::after{ content: "×"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #0B1119; border: 1px solid var(--sa-rule-strong); font-family: var(--sa-font-mono); font-size: 14px; color: var(--sa-signal) } .hk{ padding: 28px 30px 30px } .hk__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .hk b{ display: block; margin: 12px 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; color: var(--sa-ink) } .hk p{ font-size: 14px; line-height: 1.66; color: var(--sa-body) } .hkz{ margin-top: 26px; padding: 26px 30px 28px } .hkz__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .hkz p{ margin-top: 12px; font-size: 14px; line-height: 1.68; color: var(--sa-body); max-width: 76ch } @media (max-width: 980px){ .takt{ grid-template-columns: repeat(2, 1fr) } .takt > div{ border-bottom: 1px solid var(--sa-rule) } .takt > div:nth-child(2n){ border-right: 0 } .takt > div:last-child{ grid-column: 1 / -1; border-bottom: 0 } } @media (max-width: 860px){ .sigs{ grid-template-columns: 1fr } .sigg{ padding: 26px 0 28px } .sigg--fest{ border-right: 0; border-bottom: 1px solid var(--sa-rule); padding-right: 0 } .sigg--beweglich{ padding-left: 0 } .herkunft{ grid-template-columns: 1fr; gap: 34px } /* Das Mal wandert in die waagerechte Fuge, sonst sitzt es im Text. */ .herkunft::after{ top: 50%; left: 50% } } @media (max-width: 560px){ .sigl{ grid-template-columns: 1fr } .takt{ grid-template-columns: 1fr } .takt > div{ border-right: 0 } } /* --------------------------------------------------------------------------- STARTSEITE · der USP-Kasten und die zwei Branchenkacheln (04.08.2026). --------------------------------------------------------------------------- */ /* Der USP steht im Nachtband unter den vier Mechanismen. Glas nur auf der dunklen Flaeche, wie in der Doktrin. Er ist der EINE Absatz der Seite, der sagt, warum das Verfahren besser ist und nicht nur, wie es geht. */ .usp{ margin-top: 38px; padding: 26px 30px 28px } .usp__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .usp p{ margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--sa-body); max-width: 78ch } .usp p b{ color: var(--sa-ink); font-weight: 600 } /* Die zwei Branchen. Ganze Kacheln als Link — kein Knopf neben einem Knopf (Regel 3 der Startseite). Auf Papier traegt die Haarlinie die Karte. */ .branchen{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px } .br{ display: block; padding: 30px 32px 32px; text-decoration: none; border: 0; border: 1px solid var(--sa-rule-strong); background: transparent; transition: border-color var(--sa-dur) var(--sa-ease), background var(--sa-dur) var(--sa-ease) } .br:hover{ border-color: var(--sa-signal); background: var(--sa-glass-signal-fill) } .br__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-dim) } .br b{ display: block; margin: 12px 0 12px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; color: var(--sa-ink) } .br p{ font-size: 14px; line-height: 1.65; color: var(--sa-body); max-width: 44ch } .br__w{ display: inline-block; margin-top: 18px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-signal) } .br__w::after{ content: " →" } @media (max-width: 860px){ .branchen{ grid-template-columns: 1fr } } /* --------------------------------------------------------------------------- FALLSTUDIE (nur industrie-m-und-a.html, 04.08.2026). Die einzige Stelle der Webseite mit einem deutschen Kunden, deshalb bekommt sie einen eigenen Abschnitt statt einer Kachel. --------------------------------------------------------------------------- */ .fz{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--sa-rule-strong); background: var(--sa-glass-signal-fill) } .fz > div{ padding: 26px 24px 28px; border-right: 1px solid var(--sa-rule) } .fz > div:last-child{ border-right: 0 } .fz b{ display: block; font-size: 34px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1 } .fz span{ display: block; margin-top: 11px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } .fs2{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .fsb{ padding: 28px 40px 30px 0 } .fsb:first-child{ border-right: 1px solid var(--sa-rule); padding-right: 44px } .fsb:last-child{ padding-left: 44px } .fsb__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .fsl{ margin-top: 16px; counter-reset: fsl } .fsl > div{ padding: 13px 0; border-bottom: 1px solid var(--sa-rule); font-size: 13px; line-height: 1.6; color: var(--sa-body) } .fsl > div b{ color: var(--sa-ink); font-weight: 600 } /* Der Rechenweg ist eine Strecke, keine Aufzaehlung: Nummern davor. NICHT als Gitter mit zwei Spalten — die Zeile enthaelt ein UND Text, das sind zwei Kinder, und der Text landete in einer dritten, viel zu schmalen Spalte (ein Wort pro Zeile). Die Nummer sitzt deshalb absolut. */ .fsl--weg > div{ position: relative; padding-left: 32px } .fsl--weg > div::before{ counter-increment: fsl; content: counter(fsl, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--sa-font-mono); font-size: 9px; color: var(--sa-signal) } @media (max-width: 900px){ .fz{ grid-template-columns: repeat(2, 1fr) } .fz > div{ border-bottom: 1px solid var(--sa-rule) } .fz > div:nth-child(2n){ border-right: 0 } .fs2{ grid-template-columns: 1fr } .fsb{ padding: 24px 0 26px } .fsb:first-child{ border-right: 0; border-bottom: 1px solid var(--sa-rule); padding-right: 0 } .fsb:last-child{ padding-left: 0 } } @media (max-width: 520px){ .fz{ grid-template-columns: 1fr } .fz > div{ border-right: 0 } } /* --------------------------------------------------------------------------- DIE ÜBERGABE (04.08.2026). Sie nutzt die Zwei-Spalten-Figur der CAPVIA-Fallstudie mit (`.fs2`/`.fsb`/`.fsl`), weil es dieselbe Figur ist: links was geprueft wird, rechts was daraus folgt. Eigen ist nur, dass die linke Spalte hier ebenfalls Fliesstext traegt und nicht nur Stichworte. --------------------------------------------------------------------------- */ .fs2--ueb .fsl > div{ font-size: 13px } /* ---- Das Fundament (nur Branchenseiten). Zehn Punkte in zwei Spalten: kompakt genug, dass die MENGE wirkt, ausfuehrlich genug, dass jeder Punkt fuer sich verstaendlich bleibt. ---- */ .fund{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 46px; margin-top: 42px; border-top: 1px solid var(--sa-rule-strong) } .fund > div{ display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--sa-rule) } .fund > div > span{ font-family: var(--sa-font-mono); font-size: 10px; color: var(--sa-signal); font-variant-numeric: tabular-nums } .fund b{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--sa-ink); margin-bottom: 4px } .fund > div > div{ font-size: 13px; line-height: 1.55; color: var(--sa-body) } @media (max-width: 860px){ .fund{ grid-template-columns: 1fr; gap: 0 } } /* ---- Die drei Schritte (17.08.2026). Nutzt die Figur der vier Mechanismen, aber dreispaltig: drei Schritte gehoeren nebeneinander, nicht ins Zweier-Raster, sonst steht der dritte allein in der zweiten Reihe. ---- */ .drei{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--sa-rule-strong) } .drei > div{ padding: 32px 34px 34px 0; border-bottom: 1px solid var(--sa-rule); border-right: 1px solid var(--sa-rule) } .drei > div:last-child{ border-right: 0; padding-right: 0 } .drei > div + div{ padding-left: 34px } .drei .n{ font-family: var(--sa-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--sa-signal) } .drei b{ display: block; font-size: 21px; line-height: 1.25; letter-spacing: -.02em; color: var(--sa-ink); margin: 14px 0 10px } .drei p{ font-size: 14px; line-height: 1.62; color: var(--sa-body) } @media (max-width: 860px){ .drei{ grid-template-columns: 1fr } .drei > div{ padding: 26px 0 28px; border-right: 0 } .drei > div + div{ padding-left: 0 } } /* Die Telefonnummer im Fuss (17.08.2026). Mono, weil sie ein Messwert ist und keine Prosa, und etwas heller als der Herkunftssatz darueber. */ .fuss__tel{ margin-top: 14px; font-family: var(--sa-font-mono); font-size: 13px; letter-spacing: .04em } .fuss__tel a{ color: var(--sa-body); border-bottom: 1px solid var(--sa-rule-strong) } .fuss__tel a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal-edge) } /* --------------------------------------------------------------------------- DAS FAQ (17.08.2026). `
`, damit es ohne JavaScript aufklappt und die Antworten trotzdem im Quelltext stehen: Suchmaschinen und Vorleseprogramme lesen sie auch zugeklappt. --------------------------------------------------------------------------- */ .faq{ margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .frage{ border-bottom: 1px solid var(--sa-rule) } .frage summary{ list-style: none; cursor: pointer; padding: 19px 34px 19px 0; position: relative; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--sa-ink); transition: color var(--sa-dur) var(--sa-ease) } .frage summary::-webkit-details-marker{ display: none } .frage summary::marker{ content: "" } .frage summary:hover{ color: var(--sa-signal) } .frage summary:focus-visible{ outline: 1px solid var(--sa-signal); outline-offset: 3px } /* Das Pluszeichen: zwei Striche, von denen der senkrechte beim Oeffnen verschwindet. Kein Bild, keine Schriftart, keine zweite Datei. */ .frage summary::before, .frage summary::after{ content: ""; position: absolute; right: 4px; top: 50%; background: var(--sa-signal); transition: transform var(--sa-dur) var(--sa-ease) } .frage summary::before{ width: 13px; height: 1.5px; margin-top: -.75px } .frage summary::after{ width: 1.5px; height: 13px; margin-top: -6.5px; right: 9.75px } .frage[open] summary::after{ transform: scaleY(0) } .frage__a{ padding: 0 60px 22px 0 } .frage__a p{ font-size: 14px; line-height: 1.7; color: var(--sa-body); max-width: 78ch; margin: 0 } @media (max-width: 700px){ .frage__a{ padding-right: 0 } } /* =========================================================================== NACHTRAG 18.08.2026 — die Bauteile der ueberarbeiteten Startseite. Steht bewusst am Ende: was hier folgt, ist juenger als alles darueber und soll im Zweifel gewinnen. =========================================================================== */ /* --------------------------------------------------------------------------- 1 · DIE KLEBENDE KOPFLEISTE. Der Kopf-CTA verschwand nach 86 px und kam nie zurueck; zwischen Beweis, System, Abfolge, Uebergabe und Angebot — also ueber die GANZE Argumentation — hatte der ueberzeugte Leser keinen Knopf. Gemessen: 4.583 px ohne CTA am Schreibtisch, 7.318 px am Telefon. Die Leiste wird beim Scrollen kompakter und legt eine Nachtglasflaeche unter sich, damit Text darunter nicht durchscheint. --------------------------------------------------------------------------- */ /* Die Leiste klebt, seit sie AUSSERHALB der Baender steht (21.08.2026). `.band` traegt `overflow: hidden` und `isolation: isolate`; beides setzt `position: sticky` bei jedem Nachfahren ausser Kraft. Solange der Kopf im ersten Band sass, war er nach rund 2.000 px weg — mit ihm die Navigation und der Kopf-CTA, fuer die restlichen 11.000 px Argumentation. */ .kopfleiste{ position: sticky; top: 0; z-index: 40; background: var(--sa-bg); border-bottom: 1px solid transparent; transition: border-color var(--sa-dur) var(--sa-ease) } /* VOLLTON, nicht 88 % Deckkraft: die Leiste laeuft ueber Papierbaender, und eine durchscheinende Nachtglasflaeche wird dort zu einem schmutzigen Grau, auf dem heller Text kippt. `backdrop-filter` faellt damit auch weg — das System kennt es ohnehin nicht (Doktrin Abschnitt 6). */ .nav{ background: none; border-bottom: 0; transition: padding var(--sa-dur) var(--sa-ease) } .kopfleiste:has(.nav--fest){ border-bottom-color: var(--sa-rule) } .nav--fest{ padding: 12px 0 } @media (max-width: 1100px){ /* Am Telefon brach der Kopf in DREI Reihen, wobei der Knopf allein ueber den Textlinks stand — das las sich als Layoutfehler. Jetzt steht der Knopf in der ersten Reihe neben der Marke, die Reiter darunter. */ .nav{ padding: 14px 0 } .nav__ende{ order: 2 } .nav__links{ order: 3; padding-bottom: 2px } .nav--fest .nav__links{ display: none } } /* Ohne Skript bleibt die Leiste in ihrer Ruhegroesse — sie klebt trotzdem. */ /* Die waagerecht scrollende Reiterzeile hoert am Telefon mitten im Wort auf („Koste…"), ohne dass etwas anzeigt, dass es weitergeht. Eine Maske am rechten Rand sagt es, ohne ein Bauteil zu kosten. */ @media (max-width: 1100px){ .nav__links{ mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); scrollbar-width: none } .nav__links::-webkit-scrollbar{ display: none } } /* --------------------------------------------------------------------------- ANKERSPRUNG UNTER DIE KLEBENDE LEISTE. `--nav-h` misst das Skript. --------------------------------------------------------------------------- */ html{ scroll-padding-top: calc(var(--nav-h, 86px) + 24px) } [id]{ scroll-margin-top: calc(var(--nav-h, 86px) + 24px) } /* --------------------------------------------------------------------------- DER SPRUNG ZUM INHALT. Pflicht auf einer Seite mit Kopfleiste, Aufklappmenue und dreizehn Bildschirmlaengen: wer mit der Tastatur kommt, soll die Navigation ueberspringen koennen. --------------------------------------------------------------------------- */ .sprung{ position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--sa-signal); color: #03231A; font-size: 14px; font-weight: 600; padding: 12px 20px; text-decoration: none } .sprung:focus{ left: 0 } #inhalt:focus{ outline: none } /* --------------------------------------------------------------------------- SICHTBARER FOKUS, UEBERALL. tokens.css setzt einen Fokusring nur innerhalb von `.sa-paper` und `.sa-instrument`. Das sind auf dieser Seite die hellen Baender — die Navigation, der Held, alle Nachtglas-Abschnitte, der Abschluss und der Fuss hatten keinen. Wer mit der Tastatur bedient, sah auf dem groesseren Teil der Seite nicht, wo er steht. --------------------------------------------------------------------------- */ :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible{ outline: 2px solid var(--sa-signal); outline-offset: 2px; border-radius: 0; } /* Der pulsierende Ring der Handlungsknoepfe belegt `outline`. Beim Fokus tritt er zurueck, sonst ist der Ruhezustand vom Fokus nicht zu unterscheiden. */ .sa-btn-gruen:focus-visible, .sa-btn-signal:focus-visible{ animation: none } /* --------------------------------------------------------------------------- BEWEGUNG ZURUECKNEHMEN. tokens.css kuerzt Dauern, nimmt aber das weiche Scrollen nicht zurueck — und genau das ist bei Ankersprüngen die Bewegung, die Betroffenen Beschwerden macht. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto } .marq__band{ animation: none } } /* --------------------------------------------------------------------------- 2 · DIE ZWEITE ZEILE DER SCHLAGZEILE. Die H1 traegt seit 18.08. zwei Saetze: die LEISTUNG zuerst, das Abrechnungsmodell danach. Der zweite Satz steht eine Spur zurueck, damit das Auge EIN Ziel hat (Blinzeltest, Handwerk Abschnitt 4). --------------------------------------------------------------------------- */ .held--breit h1{ max-width: 26ch } .h1n{ color: var(--sa-body) } /* --------------------------------------------------------------------------- 3 · DIE WARTESCHLANGE. Ergaenzt `.instr` (Zeile 147 ff.) um die zwei Spalten, die es dort noch nicht gab, und um die heisse Zeile. KEIN `.instr__live` — der pulsierende Punkt wuerde behaupten, das seien echte Daten von jetzt. Es ist ein gekennzeichnetes Beispiel. --------------------------------------------------------------------------- */ .instr .s{ width: 30% } .instr .a{ color: var(--sa-body); width: 34% } /* Die Quelle ist ein LINK auf den Beleg — das ist der ganze Punkt der Tabelle. Sie muss als anklickbar zu erkennen sein, ohne laut zu werden. */ .instr .q a{ color: var(--sa-body); text-decoration: none; border-bottom: 1px solid var(--sa-rule-strong) } .instr .q a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal-edge) } .instr .f{ text-align: right } .instr tr.heiss{ background: var(--sa-signal-weak) } .instr tr.heiss .a{ color: var(--sa-signal) } .instr__kopf b{ color: var(--sa-signal) } @media (max-width: 860px){ .instr .n{ display: none } .instr .a{ width: auto } } @media (max-width: 560px){ .instr .f{ display: none } .instr .s{ width: 46% } .instr td{ padding: 11px 14px } } /* --------------------------------------------------------------------------- 4 · DIE DEUTSCHE FALLSTUDIE AUF DER STARTSEITE. Sie steht VOR den vier amerikanischen Belegen, weil sie der einzige Beleg in Euro ist und der einzige, der nicht relativiert werden muss. --------------------------------------------------------------------------- */ .dfall{ margin-top: 34px; padding: 30px 32px 28px } .dfall .k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .dfall h3{ font-size: 21px; line-height: 1.22; letter-spacing: -.02em; font-weight: 600; color: var(--sa-ink); margin: 11px 0 0 } .dfall > p{ font-size: 14px; line-height: 1.65; color: var(--sa-body); max-width: 68ch; margin-top: 12px } .dfall__z{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--sa-signal-edge) } .dfall__z > div{ padding-right: 22px } .dfall__z b{ display: block; font-size: 28px; font-weight: 600; letter-spacing: -.03em; color: var(--sa-ink); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap } .dfall__z span{ display: block; margin-top: 9px; font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); line-height: 1.5 } .dfall__l{ margin-top: 22px; font-size: 13px } .dfall__l a{ color: var(--sa-signal); text-decoration: none; border-bottom: 1px solid var(--sa-signal-edge) } @media (max-width: 700px){ .dfall{ padding: 24px 20px 22px } .dfall__z{ grid-template-columns: repeat(2, 1fr); gap: 22px 0 } } /* --------------------------------------------------------------------------- 5 · DER KNOPF IN DER MITTE. Auf `/` nach dem Beweis, auf `/fallstudien` nach der Haelfte. Beide Seiten hatten dort die laengste tote Strecke — genau an der Stelle, an der die Kaufbereitschaft entsteht. --------------------------------------------------------------------------- */ .tat--mitte{ margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--sa-rule); align-items: center } .tat__zu{ font-size: 13px; line-height: 1.55; color: var(--sa-dim); max-width: 46ch } @media (max-width: 600px){ .tat__zu{ max-width: none } } /* --------------------------------------------------------------------------- 6 · DAS GESICHT IM ABSCHLUSS. Auf der ganzen Seite stand kein Name und kein Mensch. Bei einem Joint Venture aus drei Gesellschaften mit US-Herkunft ist ein deutscher Ansprechpartner mit Gesicht der kuerzeste Weg aus dem Verdacht „US-Agentur, die es hier versucht“. --------------------------------------------------------------------------- */ .pers{ display: flex; align-items: center; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--sa-rule) } /* In Farbe und etwas groesser. Graustufen lassen ein Portraet wie ein Archivbild wirken; hier soll es wie ein Mensch wirken, das ist der ganze Zweck des Blocks. Radius 0 wie ueberall — ein rundes Bild waere die einzige Rundung der Marke. */ /* `flex: none` ist hier nicht Kosmetik: `.pers` ist ein Flex-Kasten, und ohne die Regel drueckt der Textabsatz das Bild am Telefon auf NULL Breite zusammen — gemessen bei 375 px. Ein Vertrauensbild, das verschwindet, ist schlimmer als keines. */ /* 116 statt 84 px (19.08.2026, Tiefenanalyse Punkt C1): 84 px waren ein Avatar, kein Gesicht — und das Gesicht des Anrufers ist bei einer Telefonakquise-Marke das billigste Trust-Element der Seite. */ .pers img{ width: 116px; height: 116px; flex: none; object-fit: cover; border-radius: 0 } @media (max-width: 600px){ .pers img{ width: 84px; height: 84px } } .pers__t{ font-size: 13px; line-height: 1.5; color: var(--sa-dim) } .pers__t b{ display: block; color: var(--sa-ink); font-weight: 500; font-size: 14px } .pers__t a{ color: var(--sa-signal); text-decoration: none; border-bottom: 1px solid var(--sa-signal-edge) } /* --------------------------------------------------------------------------- 7 · DIE SIGNALBIBLIOTHEK (/signale, 18.08.2026). Sieben Dutzend Zeilen in acht Gruppen. Das Risiko ist nicht die Gestaltung, sondern die Wand: ohne Sprungmarken und ohne ruhige Zeilen liest das niemand. Deshalb Haarlinie statt Rahmen, Mono nur fuer Kennung und Frist, und die vierte Spalte — der Satz am Telefon — traegt die volle Textfarbe, weil sie der eigentliche Beweis ist. --------------------------------------------------------------------------- */ /* Die Sprungmarken. Textlinks, keine Knoepfe (Regel 3). */ .smarken{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid var(--sa-rule-strong) } .smarken a{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--sa-rule); color: var(--sa-ink); text-decoration: none; font-size: 14px } .smarken a:nth-child(odd){ padding-right: 30px; border-right: 1px solid var(--sa-rule) } .smarken a:nth-child(even){ padding-left: 30px } .smarken a:hover{ color: var(--sa-signal) } .smarken span{ font-family: var(--sa-font-mono); font-size: 11px; color: var(--sa-dim); font-variant-numeric: tabular-nums } @media (max-width: 700px){ .smarken{ grid-template-columns: 1fr } .smarken a:nth-child(odd){ padding-right: 0; border-right: 0 } .smarken a:nth-child(even){ padding-left: 0 } } /* Eine Gruppe. */ .sgrp{ padding: 52px 0 0; scroll-margin-top: 92px } .sgrp__kopf{ display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--sa-rule-strong) } .sgrp__kopf h2{ font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--sa-ink); margin: 0 } .sgrp__kopf p{ font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-dim); margin: 0; text-align: right } @media (max-width: 700px){ .sgrp__kopf{ display: block } .sgrp__kopf p{ text-align: left; margin-top: 7px } } /* Die Tabelle. Waagerecht scrollbar in EIGENEM Kasten — der Koerper darf nie seitwaerts laufen. */ .sgtab{ overflow-x: auto; -webkit-overflow-scrolling: touch } .sgtab table{ width: 100%; border-collapse: collapse; min-width: 720px } .sgtab th{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); font-weight: 400; text-align: left; padding: 13px 16px 9px 0; border-bottom: 1px solid var(--sa-rule) } .sgtab td{ padding: 13px 16px 13px 0; border-bottom: 1px solid var(--sa-rule); vertical-align: top; font-size: 13px; line-height: 1.5 } .sgtab tr:last-child td{ border-bottom: 0 } .sgtab .sg__n{ font-family: var(--sa-font-mono); font-size: 10px; color: var(--sa-dim); width: 34px; padding-top: 15px; font-variant-numeric: tabular-nums } .sgtab .sg__s{ color: var(--sa-ink); font-weight: 500; width: 22% } /* Die Tabelle der verworfenen Quellen hat nur zwei Spalten und braucht links etwas mehr. Das stand bis zum 23.08.2026 als `style="width:26%"` AM td — und eine Inline-Breite schlaegt jede Regel im Telefonblock unten. Ergebnis: 74px Spalte fuer bis zu 187px Inhalt, und deutsche Komposita brechen nicht um, also lief der Text aus der Spalte. Der Kommentar bei den Telefonregeln beschreibt genau diesen Fehler bereits als behoben — repariert war damals nur die Klasse, das Attribut war uebersehen worden. */ .sgtab--verworfen .sg__s{ width: 26% } .sgtab .sg__q{ color: var(--sa-dim); font-size: 12px; width: 22% } .sgtab .sg__f{ font-family: var(--sa-font-mono); font-size: 10px; letter-spacing: .04em; color: var(--sa-body); white-space: nowrap; width: 74px } /* Die vierte Spalte ist der Beweis, nicht die Fussnote. Volle Textfarbe. */ .sgtab .sg__a{ color: var(--sa-body) } @media (max-width: 860px){ .sgtab .sg__q{ font-size: 12px } } /* --------------------------------------------------------------------------- 8 · DER AUSGANG DER ABFOLGE (18.08.2026). Die Sieben-Schritte-Strecke endete auf Schritt 07 — also wieder auf einem Schritt. Der Leser sah sieben Kaesten und danach eine graue Fussnote; was bei IHM ankommt, stand nirgends. Der Uebergabe-Abschnitt sagt es zwar, steht aber einen Bandwechsel spaeter, und die zwei werden nicht verbunden. Dies ist der einzige Signalmoment des Abschnitts nach der gruenen Zielzeile — deshalb Glas mit Signalkante, keine zweite Flaeche in Vollgruen. --------------------------------------------------------------------------- */ .ergebnis{ margin-top: 30px; padding: 24px 28px 26px; border-color: var(--sa-glass-signal-border) } .ergebnis__k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .ergebnis p{ font-size: 15.5px; line-height: 1.62; color: var(--sa-body); margin: 11px 0 0; max-width: 78ch } .ergebnis b{ color: var(--sa-ink); font-weight: 500 } @media (max-width: 700px){ .ergebnis{ padding: 20px 20px 22px } } /* --------------------------------------------------------------------------- 9 · WER ANRUFT (18.08.2026). Bild plus Antwort, im Uebergabe-Abschnitt. Die Frage „wer ruft in meinem Namen an?" war auf der ganzen Seite unbeantwortet — kein Name, kein Gesicht. Sie entsteht genau hier, direkt nachdem der Abschnitt erklaert hat, dass jemand vor der Uebergabe prueft. Das Bild steht auf PAPIER, weil sein Hintergrund hell ist; auf Nachtglas waere es ein Loch in der Flaeche. Radius 0 wie ueberall, kein Schatten. --------------------------------------------------------------------------- */ .weranruft{ display: grid; grid-template-columns: 0.85fr 1fr; gap: 0; margin-top: 40px; border-top: 1px solid var(--sa-rule-strong) } .weranruft__bild{ overflow: hidden; align-self: stretch; min-height: 260px } .weranruft__bild img{ width: 100%; height: 100%; object-fit: cover; display: block } .weranruft__text{ padding: 30px 0 4px 36px } .weranruft__text .k{ font-family: var(--sa-font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--sa-signal) } .weranruft__text h3{ font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: var(--sa-ink); margin: 11px 0 0 } .weranruft__text p{ font-size: 14px; line-height: 1.65; color: var(--sa-body); margin: 13px 0 0; max-width: 56ch } .weranruft__n{ padding-top: 15px; border-top: 1px solid var(--sa-rule); font-size: 13px !important; color: var(--sa-dim) !important } .weranruft__n b{ color: var(--sa-ink); font-weight: 500 } @media (max-width: 800px){ .weranruft{ grid-template-columns: 1fr } .weranruft__bild{ min-height: 0; aspect-ratio: 3 / 2 } .weranruft__text{ padding: 26px 0 4px } } /* Die Datenschutzwarnung an der Personengruppe. Sie steht als GRUPPENEIGENSCHAFT da und nicht als Fussnote, damit die Pruefpflicht strukturell sichtbar ist. */ .sgrp__warn{ margin-top: 16px; padding: 14px 18px; font-size: 13px; line-height: 1.6; color: var(--sa-body); border-left: 2px solid var(--sa-signal); background: var(--sa-signal-weak) } .sgrp__warn b{ color: var(--sa-ink); font-weight: 500 } /* F21 (20.08.2026): Die Schluss-Begleitzeile in Sans statt Mono-Versalien (Kanon: Mono nie fuer Saetze). Gesetzt aus _seiten-erzeugen.py SCHLUSS. */ .schluss .schluss__zu{ margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--sa-body) } /* F21-Verifikation (20.08.2026): Der Schluss folgt demselben Kopf-Baustein wie jede Sektion (Etikett + Haarlinie, H2 in der einen Groesse), und die mobile Nav-Zeile scrollt ohne sichtbaren Balken. */ .schluss .etikett{ display: block; border-bottom: 1px solid var(--sa-rule); padding-bottom: 13px; margin-bottom: 26px } .schluss h2{ font-size: clamp(26px, 2.6vw, 33px); letter-spacing: -.02em } .nav__links{ scrollbar-width: none } .nav__links::-webkit-scrollbar{ display: none } /* =========================================================================== F22 · UI-/UX-DURCHGANG, 21.08.2026 --------------------------------------------------------------------------- Grundlage: vier parallele Prüfungen (Zugänglichkeit, Responsive, System- Konsistenz, Vergleichsrecherche) plus eigene Sichtung bei 1440 und 390 px. Hier steht ausschliesslich Optik und Bedienbarkeit. Kein Wort Inhalt wurde angefasst, keine Zahl, keine Aussage. Der Block steht am ENDE, damit er tokens.css und alles darüber überschreibt und beim nächsten Kit-Abgleich als eine Einheit erkennbar bleibt. =========================================================================== */ /* --------------------------------------------------------------------------- 1 · KONTRAST DER GEDÄMPFTEN FARBE `--sa-dim` trug auf Papier 3,05:1 und auf Glas bis herunter zu 3,08:1 — beides unter den 4,5:1, die Fliesstext braucht. Betroffen war nicht Beiwerk, sondern der Beleg: die Quellenspalte der Signaltabellen, die Kennzahl-Bezeichnungen der Fallstudien, die Etiketten des Rechners. Zwei Werte heben alles auf einmal. Farbton und Neutralität bleiben. Gehoert beim naechsten Abgleich ins Kit (tokens.css Z. 81 und 124). --------------------------------------------------------------------------- */ :root, .sa-paper{ --sa-dim: #6B7073 } /* 4,67:1 auf Papier, 5,03:1 auf Weiss */ .sa-instrument, .sa-nacht{ --sa-dim: #8593A0 } /* 6,23:1 auf Band, 4,78:1 auf Signalglas */ /* --------------------------------------------------------------------------- 2 · LINKS IM FLIESSTEXT WAREN NICHT VON TEXT ZU UNTERSCHEIDEN Linkfarbe und Textfarbe waren identisch (1,00:1), die Unterstreichung lag bei 1,52:1 gegen das Papier — praktisch unsichtbar. Wer den Beleg anklicken wollte, musste ihn erraten. Die Linie traegt jetzt, die Schriftfarbe bleibt. --------------------------------------------------------------------------- */ main a, .fliess a, .abschnitt > p a{ border-bottom-color: #8E8E89 } .sa-nacht a:not(.sa-btn-gruen):not(.sa-btn-signal):not(.nav__links a){ border-bottom-color: #4C6079 } .instr .q a, .fuss__her a, .fuss__tel a, .pers__t a{ border-bottom-color: #4C6079 } main a:focus-visible, .fliess a:focus-visible{ color: var(--sa-signal) } /* --------------------------------------------------------------------------- 3 · DIE KOPFLEISTE AM TELEFON Bei 375 px waren Marke (152 px) und Knopf (196 px) zusammen breiter als die Bahn (331 px). Der Kopf brach in DREI Reihen und wurde 136 px hoch — ein Fünftel eines iPhone-SE-Bildschirms, dauerhaft, weil er klebt. Zweitens: `.nav--fest` blendete ab 120 px Scroll ALLE Reiter aus. Es gibt kein Aufklappmenü als Ersatz — die Seite hatte ab Bildschirm zwei also gar keine Navigation mehr. Jetzt schrumpft die Zeile, statt zu verschwinden. --------------------------------------------------------------------------- */ @media (max-width: 1100px){ .nav--fest .nav__links{ display: flex; padding-bottom: 0 } .nav--fest .nav__links a{ font-size: 12px; padding: 6px 0 4px } .nav--fest{ padding: 9px 0 } } @media (max-width: 460px){ .nav__marke img{ height: 19px } .nav .sa-btn-signal{ padding: 9px 13px; font-size: 12px } .nav{ gap: 10px 14px } } /* --------------------------------------------------------------------------- 4 · TREFFERFLÄCHEN (WCAG 2.2 SC 2.5.8, 24 x 24 px) Zwölf Linkarten lagen zwischen 13,8 und 23 px Höhe, darunter alle zehn Fusslinks jeder Seite, die Telefonnummer und die Beleglinks in den Tabellen. Das Schriftmass bleibt unveraendert — nur die Fläche darunter waechst, die Zeile sieht also gleich aus. --------------------------------------------------------------------------- */ .fuss ul a, .fuss__tel a, .pers__t a, .dfall__l a, .usleiste p a, .streifen__zeile a, .flagge a, .fall__quelle, .gkarte ul.mini a, .instr .q a{ display: inline-block; padding-block: 4px } .fuss ul li{ padding: 2px 0 } a.s{ padding: 5px 0; margin: -5px 0 } .nav__marke{ padding-block: 2px } .nav__links a{ padding: 3px 0 4px } @media (pointer: coarse){ .nav__links a{ padding: 11px 0 10px } .nav__links{ gap: 22px } .fuss ul li{ padding: 0 } .fuss ul a{ display: block; padding: 11px 0 } .nav .sa-btn-signal{ padding: 12px 15px } .r a.t{ display: inline-block; padding: 4px 0 } } /* --------------------------------------------------------------------------- 5 · WAAGERECHT SCROLLENDE BEREICHE ZEIGEN JETZT, DASS SIE SCROLLEN Drei Tabellenkästen und die Reiterzeile scrollen seitwärts. Keiner von ihnen hatte einen Hinweis darauf: auf 390 px endete die Signaltabelle mitten in „Unternehmensm…", die Spalten Frist und Wirkung lagen gar nicht im Bild. Das liest sich als kaputte Seite, nicht als Scrollfläche. Die Maske am rechten Rand sagt es ohne ein zusätzliches Bauteil. --------------------------------------------------------------------------- */ .instr, .sgtab, .vgl{ scrollbar-width: thin; scrollbar-color: var(--sa-rule-strong) transparent; } @media (max-width: 900px){ .instr, .sgtab{ mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent); } /* Am Ende der Strecke stört die Maske: dann ist nichts mehr zu holen. */ .instr:not(:hover), .sgtab:not(:hover){ mask-position: 0 0 } } .instr::-webkit-scrollbar, .sgtab::-webkit-scrollbar{ height: 3px } .instr::-webkit-scrollbar-thumb, .sgtab::-webkit-scrollbar-thumb{ background: var(--sa-rule-strong) } /* --------------------------------------------------------------------------- 6 · DIE KENNZAHLENREIHE LIEF AUS DEM BILD `.zahlen b` trug `white-space: nowrap` bei 34 px. Bei 375 px stehen je Spalte 113 px zur Verfügung, „50 Mio. $" braucht 180. `overflow-x: clip` am Körper fing das ab, indem es die zweite Spalte zur Hälfte abschnitt — ohne dass es nach Fehler aussah. Die Zahl schrumpft jetzt mit. --------------------------------------------------------------------------- */ @media (max-width: 760px){ .zahlen > div{ padding: 22px 18px } .zahlen b{ font-size: clamp(20px, 5.6vw, 34px) } } @media (max-width: 460px){ .zahlen{ grid-template-columns: 1fr } .zahlen > div{ border-right: 0; border-bottom: 1px solid var(--sa-rule); padding: 20px 0 } .zahlen > div:last-child{ border-bottom: 0 } .zahlen b{ font-size: 28px } } /* --------------------------------------------------------------------------- 7 · DIE SIGNALTABELLEN STAPELN AM TELEFON, STATT ZU SCROLLEN `.sgtab table{ min-width: 720px }`: bei 375 px sah der Leser 46 Prozent der Tabelle. Ausserhalb des Bildes lag ausgerechnet „Der Anlass am Telefon" — die Spalte, die den ganzen Rechtsrahmen der Seite traegt. --------------------------------------------------------------------------- */ @media (max-width: 700px){ .sgtab{ mask-image: none; -webkit-mask-image: none } .sgtab table{ min-width: 0; width: 100% } .sgtab thead{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap } .sgtab tr{ display: grid; grid-template-columns: 28px 1fr auto; gap: 3px 10px; padding: 15px 0; border-bottom: 1px solid var(--sa-rule) } .sgtab td{ border: 0; padding: 0; width: auto } /* `width: auto` muss hier MIT der Klasse stehen: `.sgtab .sg__s` traegt 22 Prozent (Z. 1727) und schlaegt `.sgtab td`. Im Raster wurden daraus 76 px, und die Signalnamen brachen auf ein Wort je Zeile um. */ .sgtab .sg__n{ grid-column: 1; grid-row: 1; padding-top: 3px; width: auto } .sgtab .sg__s{ grid-column: 2; grid-row: 1; font-size: 14px; width: auto; line-height: 1.4 } .sgtab .sg__f{ grid-column: 3; grid-row: 1; white-space: nowrap; width: auto; text-align: right } .sgtab .sg__a{ grid-column: 2 / -1; font-size: 13px; width: auto } .sgtab .sg__q{ grid-column: 2 / -1; font-size: 11px; width: auto } /* Zwei Spalten, keine Nummer, keine Frist: das 28px-Feld links bliebe leer. */ .sgtab--verworfen tr{ grid-template-columns: minmax(0, 1fr) } .sgtab--verworfen .sg__s{ grid-column: 1; width: auto } .sgtab--verworfen .sg__a{ grid-column: 1; width: auto } } /* --------------------------------------------------------------------------- 8 · MONO-ETIKETTEN AM TELEFON 37 Regeln stehen auf 9 px, drei auf 8 px — Versalien mit 0,13 bis 0,17 em Laufweite. Am Schreibtisch richtig, am Telefon an der Lesbarkeitsgrenze. Weniger Laufweite gleicht die grössere Schrift aus: die Zeile braucht nicht mehr Platz als vorher. --------------------------------------------------------------------------- */ .weitere span{ font-size: 10px; letter-spacing: .08em } .kal__kopf{ font-size: 10px; letter-spacing: .06em } .kunde .zeit{ font-size: 10px; letter-spacing: .1em } .nav__zusatz{ font-size: 9px; letter-spacing: .13em } @media (max-width: 620px){ .etikett, .mikro, .instr__kopf, .streifen__zeile, .fuss h4, .fuss__zeile, .stufe .tun, .gschritt .kenn, .gangebot .gibt, .kunde .was, .fall__stamm span, .fall__zahlen span{ font-size: 10px; letter-spacing: .1em } } /* --------------------------------------------------------------------------- 9 · KARTENREIHEN: GLEICHE HÖHE BLEIBT, DIE LEERE WANDERT NACH INNEN Erst probiert: `align-items: start`, damit unter dem kürzesten Text keine Fläche leer steht. Das war schlechter — bei Karten MIT Rahmen liest sich eine kürzere Nachbarin als Fehler, während dieselbe Leere innerhalb eines gemeinsamen Rahmens als Weissraum durchgeht. Die Höhe bleibt also gleich; was sich ändert, ist der Innenabstand: er sitzt jetzt oben und unten gleich, statt den Text an die Oberkante zu drücken. --------------------------------------------------------------------------- */ .fund3 .fi:last-child, .m3__k > *:last-child{ margin-bottom: 0 } /* --------------------------------------------------------------------------- 10 · ABSTÄNDE, DIE AM TELEFON NICHT MITSCHRUMPFTEN Sechs Abstände hatten keine Mobilstufe und summierten sich auf der Startseite zu rund 400 px reinem Leerraum. `.mfluss` allein trug 136 px — ein Fünftel eines iPhone-SE-Bildschirms für nichts. --------------------------------------------------------------------------- */ @media (max-width: 620px){ .ctab{ margin-top: 34px } .mfluss{ margin: 32px 0 48px } .sgrp{ padding-top: 36px } .mech, .maschine, .schritte--glas, .gangebote, .schritte{ margin-top: 28px } .schluss{ padding: 56px 0 50px } } /* Die Bahn wechselte erst bei 640 px von 40 auf 22 px Rand. Zwischen 641 und 760 px standen also 80 px Rand, obwohl innen schon eingeklappt wurde. Die 22 px am Telefon bleiben, was sie waren — nur die Stufe dazwischen ist neu. */ @media (max-width: 760px) and (min-width: 641px){ .bahn{ padding: 0 26px } } /* --------------------------------------------------------------------------- 13 · KEIN `min-width` AUF DIE PANEL-KINDER Probiert und wieder verworfen: `.instr > *{ min-width: 540px }` sollte Kopfzeile und Fussnote mit der Tabelle mitscrollen lassen. Es traf aber auch `.slauf`, das Hero-Schaubild — und weil dessen Rasterspur `1fr` ist, also `minmax(auto, 1fr)`, wuchs sie auf 540 px und schob am Telefon die ganze Seite aus dem Bild. Der Kopf bleibt also stehen, wenn die Tabelle scrollt. Das ist der kleinere Fehler. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- 11 · DAS iPad-LOCH BEI 768 px Die Schwellen liegen bei 760 und 780. Ein iPad hochkant fällt genau dazwischen und bekommt ein Mischlayout, das es auf keiner anderen Breite gibt: halb eingeklappt, halb Schreibtisch. Die Regeln, die dort fehlten, greifen jetzt eine Stufe früher. --------------------------------------------------------------------------- */ @media (max-width: 840px){ .belege, .zaehler, .zahlen{ grid-template-columns: repeat(2, 1fr) } .vier, .werte, .gegen, .zweiweg, .flaggen{ grid-template-columns: 1fr } .fuss__innen{ grid-template-columns: 1fr; gap: 30px } } /* --------------------------------------------------------------------------- 12 · UMRISS-KNOPF: DER RAHMEN IST DIE GANZE SCHALTFLÄCHE `.sa-btn-ghost` stand auf `--sa-rule-strong` — 1,52:1 gegen Papier. Ein Bedienelement, dessen einziges Erkennungsmerkmal der Rahmen ist, braucht 3:1. `currentColor` zieht den Ruhezustand auf das, was der Hover ohnehin schon macht. --------------------------------------------------------------------------- */ .sa-btn-ghost{ border-color: currentColor } /* --------------------------------------------------------------------------- 14 · DIE PANEL-KOPFZEILE AM TELEFON `.instr__kopf` ist ein `space-between` aus zwei Mono-Zeilen. Bei 390 px bricht die linke zweizeilig um und läuft dabei UNTER die rechte — im Hero-Schaubild stand „VOM MARKT ZUM TERMIN“ quer über „BEISPIELMARKT“. Untereinander statt nebeneinander löst es, ohne eine Angabe zu opfern. --------------------------------------------------------------------------- */ @media (max-width: 620px){ .instr__kopf{ flex-direction: column; align-items: flex-start; gap: 5px; line-height: 1.5 } } /* --------------------------------------------------------------------------- 15 · DIE NUMMERNSPALTE DES HERO-SCHAUBILDS `.slauf .ssz` ist ein Raster aus 44 px Nummernspalte und Inhalt. Am Telefon steht in der Spalte nichts mehr — die 44 px plus 12 px Lücke bleiben aber stehen und ziehen als leerer Einzug samt Reststrich durch die ganze Karte. Bei 390 px sind das 14 Prozent der Bildbreite für nichts. --------------------------------------------------------------------------- */ @media (max-width: 620px){ .slauf .ssz{ grid-template-columns: 26px 1fr; gap: 0 10px } .slauf .ssn .n{ font-size: 11px } } /* --------------------------------------------------------------------------- 16 · DAS FAQ WAR ZU LUFTIG Neun einzeilige Fragen belegten 981 px — eine ganze Bildschirmlänge für neun Zeilen Text, gemessen bei 1440 px. Die Antwort steht dahinter, also ist die zugeklappte Liste ein Verzeichnis: sie soll überblickbar sein, nicht ausladend. 109 px je Zeile werden 78. Die Trefferfläche bleibt mit 56 px weit über den 44 px, die eine Fingerkuppe braucht. --------------------------------------------------------------------------- */ /* Zwei Polsterungen lagen uebereinander: `.frage{ padding: 22px 0 }` aus der aelteren, blockweisen Fassung (Z. 346) und die des `summary`. Zusammen ergaben sie 109 px je Zeile. Die Blockfassung wird hier nur fuer das
zurueckgenommen — `.frage b` und `.frage p` bleiben unberuehrt. */ details.frage{ padding: 0 } .frage summary{ padding: 16px 40px 16px 0; font-size: 15.5px } .frage__a{ padding: 0 60px 20px 0 } /* Die Fussnavigation braucht keine Unterstreichung: zehn untereinander stehende Links, die alle eine Linie tragen, lesen sich als Streifenmuster. Der Fliesstext-Link im Herkunftssatz daneben behaelt sie — dort trennt sie den Link tatsaechlich von seiner Umgebung. */ .fuss ul a{ border-bottom-color: transparent } .fuss ul a:hover, .fuss ul a:focus-visible{ border-bottom-color: var(--sa-signal) } /* --------------------------------------------------------------------------- 17 · DER ABSCHLUSS NUTZTE NUR DIE HALBE FLÄCHE Die Schluss-Sektion war 577 px breit in einer 1100 px breiten Bahn; rechts standen 523 px leer. Die Kontaktkarte hing darunter statt daneben. Sie wandert in die zweite Spalte: gleiche Bauteile, gleiche Reihenfolge im Quelltext, aber der letzte Bildschirm steht jetzt auf zwei Beinen. --------------------------------------------------------------------------- */ @media (min-width: 981px){ /* `max-width: 62ch` (Z. 353) begrenzt die Sektion auf Textmass. Als Block war das richtig — als zweispaltiges Raster presst es beide Spalten in 577 px, und die Schlagzeile bricht dreizeilig. Die Textbreite gehoert jetzt an die Textspalte, nicht an die Sektion. */ .schluss{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 80px; align-items: start; max-width: none } .schluss > p{ max-width: 54ch } .schluss > .etikett{ grid-column: 1 / -1 } .schluss > h2, .schluss > p, .schluss > .tat, .schluss__zu{ grid-column: 1 } .schluss .pers{ grid-column: 2; grid-row: 2 / span 4; margin-top: 0; align-self: start; padding: 22px; border: 1px solid var(--sa-rule); display: block } .schluss .pers img{ margin-bottom: 14px } } /* --------------------------------------------------------------------------- 18 · DIE FREMDLOGOS AUF DEN WEISSEN KACHELN Doktrin Abschnitt 9 erlaubt sie in Ablaufdarstellungen — aber vier bunte Kacheln je Zeile waren auf dem Nachtglas die lautesten Flächen der ganzen Seite und zogen den Blick von Text und Handlungsaufruf weg. Ein fremdes Orange schlägt dabei den eigenen Akzent, ohne dass jemand es entschieden hätte. Entsättigt bleiben sie erkennbar und hören auf zu rufen; beim Überfahren kommt die Farbe zurück. --------------------------------------------------------------------------- */ .sa-nacht .wz i img, .sa-nacht .kachel img, .atakt .wz i img, .afz .wz i img{ filter: grayscale(1) contrast(.92); opacity: .82; transition: filter var(--sa-dur) var(--sa-ease), opacity var(--sa-dur) var(--sa-ease); } .sa-nacht .wz:hover i img, .sa-nacht .kachel:hover img, .atakt .wz:hover i img, .afz .wz:hover i img{ filter: none; opacity: 1 } /* --------------------------------------------------------------------------- 19 · DER TEXT NEBEN DEM BILD STAND OBEN, DIE LEERE UNTEN `.pr2` zieht Bild und Textspalte auf dieselbe Höhe. Der Text ist aber kürzer als das Bild hoch ist, also sammelte sich die Differenz vollständig am unteren Rand — 150 px Leere unter vier Zeilen. Mittig gesetzt verteilt sie sich, und die Zeile liegt auf der optischen Mitte des Bildes. --------------------------------------------------------------------------- */ @media (min-width: 821px){ .pr2 > div{ display: flex; flex-direction: column; justify-content: center } } /* --------------------------------------------------------------------------- 20 · EIN INLINE-`style` SCHLUG DIE MEDIA-QUERIES /vertriebsmitarbeiter setzte `grid-template-columns:repeat(4,1fr)` direkt am Element. Inline-Deklarationen stehen über jeder Regel aus dem Stylesheet, auch über den Umbruchstufen — die vier Karten blieben bei 390 px vierspaltig, 651 px breit in einer 346 px breiten Bahn, und `overflow-x: clip` schnitt sie still ab. Jetzt eine Klasse, die umbricht. --------------------------------------------------------------------------- */ .schritte--glas--4{ grid-template-columns: repeat(4, 1fr) } @media (max-width: 1080px){ .schritte--glas--4{ grid-template-columns: repeat(2, 1fr) } } @media (max-width: 700px){ .schritte--glas--4{ grid-template-columns: 1fr } } /* --------------------------------------------------------------------------- 21 · DIE KALENDERFLÄCHE BEI 320 px `.erg-kal .kal-e` ist ein Raster aus 86 px Zeitspalte und Inhalt, dazu 26/28 px Innenabstand. Bei 320 px (Prüfbreite nach WCAG 1.4.10 Reflow, iPhone SE erster Bauart) reicht das drei Pixel über die Bahn hinaus. --------------------------------------------------------------------------- */ @media (max-width: 400px){ .ergebnis2 .erg-kal{ padding: 20px 18px } .erg-kal .kal-e{ grid-template-columns: 72px 1fr; gap: 0 10px } } /* =========================================================================== DAS ANFORDERUNGSFELD (21.08.2026) --------------------------------------------------------------------------- Der zweite Weg neben dem Kalender: Adresse eintragen, Startanalyse bekommen. Steht auf Nachtglas UND auf Papier, deshalb durchgehend ueber Token gebaut. Radius 0, keine Schatten. Die Kante traegt das Feld, nicht die Erhebung. Das Feld und der Knopf sitzen in EINER Zeile und teilen sich eine Hoehe - nebeneinander gestellte Bauteile, die nicht dieselbe Hoehe haben, lesen sich als Fehler. =========================================================================== */ .mfeld{ margin-top: 26px; max-width: 560px } .mfeld__l{ display: block; font-family: var(--sa-font-mono); font-size: 9px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--sa-dim); margin-bottom: 9px } .mfeld__z{ display: flex; gap: 0; align-items: stretch } .mfeld__e{ flex: 1 1 auto; min-width: 0; font-family: var(--sa-font); font-size: 15.5px; line-height: 1.4; color: var(--sa-ink); background: var(--sa-bg-raised); border: 1px solid var(--sa-rule-strong); border-right: 0; border-radius: 0; padding: 13px 15px; transition: border-color var(--sa-dur) var(--sa-ease) } .mfeld__e::placeholder{ color: var(--sa-dim); opacity: .85 } .mfeld__e:hover{ border-color: var(--sa-signal-edge) } .mfeld__e:focus-visible{ outline: 2px solid var(--sa-signal); outline-offset: 2px; border-color: var(--sa-signal); position: relative; z-index: 1 } /* Auf Nachtglas ist `--sa-bg-raised` die zweite Helligkeitsstufe; das Feld hebt sich damit ab, ohne eine Flaeche zu erfinden, die es im System nicht gibt. Auf Papier ist es Weiss. */ .sa-nacht .mfeld__e{ background: var(--sa-bg-raised) } .mfeld__k{ flex: none; white-space: nowrap; border-radius: 0; cursor: pointer; font-size: 14px; padding: 13px 22px } .mfeld__h{ margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--sa-dim) } .mfeld__h a{ color: var(--sa-body); text-decoration: none; border-bottom: 1px solid #8E8E89 } .sa-nacht .mfeld__h a{ border-bottom-color: #4C6079 } .mfeld__h a:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } /* Der Kalenderweg steht NEBEN dem Feld, nicht darunter als zweiter Knopf: zwei gleich gewichtete Knoepfe nebeneinander sind keine Wahl, sondern eine Zoegerung. Ein Knopf, ein Textweg. */ .mfeld__termin{ display: inline-block; margin-left: 4px; color: var(--sa-body); text-decoration: none; border-bottom: 1px solid #8E8E89 } .sa-nacht .mfeld__termin{ border-bottom-color: #4C6079 } .mfeld__termin:hover{ color: var(--sa-signal); border-bottom-color: var(--sa-signal) } /* Die Rueckmeldung ersetzt das Feld, sie steht nicht darunter: wer abgeschickt hat, soll nicht raten, ob es geklappt hat. */ .mfeld__antwort{ margin-top: 14px; padding: 13px 16px; font-size: 14px; line-height: 1.6; color: var(--sa-ink); border-left: 2px solid var(--sa-signal); background: var(--sa-signal-weak) } /* DER FEHLER SAH AUS WIE DER ERFOLG (behoben 23.08.2026). Gemessen am 22.08.: bei einer unvollstaendigen Adresse blieb die Textfarbe `rgb(232,237,243)` — dasselbe Weiss wie beim Erfolg —, die Flaeche blieb `--sa-signal-weak`, also GRUEN, und der Rand des Eingabefelds blieb signalgruen. Einziger Unterschied war ein 2px-Streifen links, der von Gruen auf Rose wechselte. Wer schnell liest, haelt das fuer die Bestaetigung und geht — die Anfrage ist nie angekommen. Betrifft jeden Tippfehler. Jetzt traegt der Fehler das Rose-Register vollstaendig: Flaeche, Linie, Text und der Rand des Feldes. */ .mfeld__antwort--fehler{ border-left-color: var(--sa-rose); background: rgba(225,104,123,.10); color: var(--sa-rose) } .mfeld__e[aria-invalid="true"]{ border-color: var(--sa-rose) } .mfeld__e[aria-invalid="true"]:focus-visible{ outline-color: var(--sa-rose) } .mfeld--gesendet .mfeld__z, .mfeld--gesendet .mfeld__l, .mfeld--gesendet .mfeld__h{ display: none } /* KEINE SACKGASSE NACH DEM ABSENDEN (23.08.2026). `.mfeld--gesendet` blendete `.mfeld__h` aus — und darin steckte der einzige Kalenderlink des Helden. Uebrig blieb ein Satz und 24 Stunden Warten, ausgerechnet im Moment der hoechsten Bereitschaft: der Besucher hat gerade die Hand gehoben. Auf /startanalyse war es am teuersten, weil die Seite sonst keine Umwandlungsflaeche hat. Statt `.mfeld__h` stehen zu lassen (dort steht „Kostenfrei, innerhalb von 24 Stunden" — nach dem Absenden ueberfluessig), tritt dieser Block an seine Stelle: was jetzt passiert, wer sich meldet, und der Weg fuer alle, die nicht warten wollen. */ .mfeld__weiter{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--sa-rule) } .mfeld__weiter p{ font-size: 12px; line-height: 1.6; color: var(--sa-dim); margin: 0 0 14px; max-width: 62ch } .mfeld__weiter b{ color: var(--sa-body); font-weight: 500 } .mfeld__k[disabled]{ opacity: .55; cursor: default } /* Am Telefon untereinander: ein 15-px-Eingabefeld und ein Knopf mit „Startanalyse anfordern" passen bei 390 px nicht nebeneinander, ohne dass eines von beiden unter die Fingerkuppengroesse faellt. */ @media (max-width: 620px){ .mfeld__z{ flex-direction: column } .mfeld__e{ border-right: 1px solid var(--sa-rule-strong); border-bottom: 0 } /* Bei voller Breite muss die Beschriftung in die Mitte: linksbuendig sieht ein Knopf aus, als waere der Text abgeschnitten. */ .mfeld__k{ width: 100%; padding: 14px 22px; text-align: center } .mfeld__termin{ display: block; margin: 8px 0 0 } } /* Der Honigtopf. Nicht `display:none` — manche Bots erkennen das und lassen das Feld dann leer. Es steht ausserhalb des Sichtfelds, ist aus dem Fokuslauf genommen und fuer Vorleseprogramme versteckt. */ .mfeld__falle{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden } /* --------------------------------------------------------------------------- 21 · DIE KERBE — VIER ECKWINKEL STATT EINES RAHMENS --------------------------------------------------------------------------- Bei Radius 0 und ohne Schatten hat eine Karte genau ein Mittel, sich von der Flaeche abzuheben: die Haarlinie. Das traegt, wird aber flach, sobald mehrere Karten nebeneinander stehen — alles ist dann gleich viel Rahmen. Die Kerbe setzt zwei kurze Winkel an die gegenueberliegenden Ecken, oben links und unten rechts. Sie liest sich als Passermarke, nicht als Zierat: ein Messgeraet markiert seinen Ausschnitt so. Genau deshalb passt sie zur Marke und nicht zu einer abgerundeten Kachel. Sparsam einsetzen — sie wirkt nur, solange sie die Ausnahme ist. Ein Element je Ansicht, und nur dort, wo etwas gemessen oder gezeigt wird. Die Winkel stehen in --sa-ink, NICHT in Signalgruen. Zwei Gruende: gruen auf gruen verschwindet, sobald die Karte unten eine Signalflaeche traegt (genau so war es an der Hero-Karte), und die Kerbe markiert einen Ausschnitt — sie zeigt keinen Zustand an. Der eine Signalmoment der Ansicht bleibt damit beim Handlungsaufruf. --------------------------------------------------------------------------- */ .kerbe{ position: relative } .kerbe::before, .kerbe::after{ content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none; opacity: .42; color: var(--sa-ink); } .kerbe::before{ top: -1px; left: -1px; border-top: 1.5px solid; border-left: 1.5px solid } .kerbe::after{ bottom: -1px; right: -1px; border-bottom: 1.5px solid; border-right: 1.5px solid } /* Werkzeugkacheln im Hero-Systemlauf standen bei 82 % Deckkraft entsaettigt und waren auf 26 px Kachelhoehe kaum noch als Anbieter zu erkennen. Im Ansprechtakt weiter unten ist die Kachel groesser, dort traegt die Regel. Hier ein Stueck klarer — entsaettigt bleibt es, die Ein-Akzent-Regel gilt. */ .sa-nacht .slauf .wz i img, .sa-nacht .hb .wz i img, .sa-nacht .hqk i img, .sa-nacht .schalt .sz i img, .sa-nacht .schalt .az i img{ opacity: .92; filter: grayscale(1) contrast(.98) } .sa-nacht .hb .wz:hover i img, .sa-nacht .hqk:hover i img, .sa-nacht .schalt .sz:hover i img, .sa-nacht .schalt .az:hover i img{ filter: none; opacity: 1 } /* =========================================================================== 23.08.2026 — DIE REITERZEILE AM TELEFON BRICHT UM, STATT ZU SCROLLEN --------------------------------------------------------------------------- Gemessen am 22.08. bei 375px: `.nav__links` hatte 517px Inhalt in 331px Flaeche. Sichtbar waren vier Reiter, „Ressourcen" begann bei x=352 und „Kostenlos testen" bei x=442 — also 111px jenseits der Kante. Die Maske am rechten Rand sollte das ankuendigen, liest sich im Gebrauch aber nicht als Abbruchkante; die Reihe wirkt vollstaendig. Dazu kam: der aktive Reiter scrollte nicht ins Bild. Auf /ressourcen stand der Besucher auf einer Seite, deren Reiter er nicht sah — die Leiste zeigte gar keinen aktiven Zustand. Ein waagerechter Wisch in einem 43px hohen Streifen am oberen Rand konkurriert unter iOS ausserdem mit der Zurueck-Geste. Umbrechen ist die ehrlichere Loesung: zwei Zeilen kosten rund 40px und verstecken nichts. `overflow: visible` und `mask-image: none` muessen mit, sonst schneidet die Maske aus dem 1100px-Block die zweite Zeile oben ab. =========================================================================== */ @media (max-width: 760px){ .nav__links{ flex-wrap: wrap; overflow-x: visible; row-gap: 0; column-gap: 18px; mask-image: none; -webkit-mask-image: none } .nav__links > a{ white-space: nowrap } } @media (max-width: 760px) and (pointer: coarse){ /* In zwei Zeilen darf die Zeilenhoehe nicht auch noch 42px betragen. */ .nav__links a{ padding: 8px 0 7px } .nav__links{ column-gap: 18px } } /* --------------------------------------------------------------------------- DER KNOPF IN DER KOPFLEISTE BRACH AUF ZWEI ZEILEN (23.08.2026). „Erstgespräch vereinbaren" ist zweiwortig und stand zwischen der scrollenden Reiterzeile und dem rechten Rand; sobald die Leiste eng wurde, brach er um. Ein zweizeiliger Knopf neben einzeiligen Reitern liest als Layoutfehler — genau der Eindruck, den ein Mittelstandskunde als Schludrigkeit verbucht. `nowrap` reicht: die Zeile darf ohnehin umbrechen (`.nav{flex-wrap:wrap}`), der Knopf rutscht dann als Ganzes in seine eigene Reihe. --------------------------------------------------------------------------- */ .nav__ende .sa-btn-signal, .nav__ende .sa-btn-gruen{ white-space: nowrap } /* =========================================================================== 23.08.2026 — RADIUS UND BLINKEN AM HANDLUNGSKNOPF --------------------------------------------------------------------------- BEWUSSTE ABWEICHUNG VOM BRAND KIT, Vorgabe Niklas vom 23.08.2026. Das Designsystem „Zweiklang" führt „Radius 0 überall" als nicht verhandelbar (tokens.css, Abschnitt RADIUS) und listet „Pill-Radius" sowie „Animation als Selbstzweck" unter den Verboten — beides abgeleitet aus belegten Kippsignalen im deutschen Mittelstandsmarkt. Der Einwand wurde vorgetragen und die Entscheidung bestätigt. Sie steht hier, damit die Abweichung dokumentiert ist und nicht als Versehen gelesen wird; im Kit liegt der Gegeneintrag unter `design-system/ABWEICHUNGEN.md`. Was der Kompromiss dennoch einhält: · 5px, kein Pill-Radius. 999px wäre die Performance-Marketing-Signatur, die die Doktrin eigentlich meint; 5px liest als weiche Kante, nicht als Werbeknopf. · Der Radius gilt für ALLE Knöpfe, nicht nur den einen. Eine einzelne runde Ecke neben lauter scharfen wäre schlimmer als beides. · Das Blinken bleibt dem Erstgespräch vorbehalten — dem einen Signalmoment je Ansicht. Kein zweiter blinkender Knopf. · `prefers-reduced-motion` schaltet es ab, wie jede andere Bewegung auf dieser Seite auch. =========================================================================== */ :root{ --sa-radius-knopf: 5px } .sa-btn-gruen, .sa-btn-signal, .sa-btn, .sa-btn-ghost, .mfeld__k, .mfeld__e{ border-radius: var(--sa-radius-knopf) } /* Der Puls lief bisher dreimal und stand dann still (siehe die Begründung weiter oben). Jetzt läuft er durch — langsam, damit er nicht flackert: 3,2 Sekunden je Runde ist ein Atemzug, kein Blinklicht. */ @keyframes sa-blink{ 0%, 100%{ outline-color: transparent; box-shadow: 0 0 0 0 rgba(0,201,123,0) } 50% { outline-color: var(--sa-signal); box-shadow: 0 0 0 4px rgba(0,201,123,.18) } } .sa-btn-gruen, .nav__ende .sa-btn-signal{ outline: 2px solid transparent; outline-offset: 2px; animation: sa-blink 3.2s var(--sa-ease) infinite; } /* Der feste Ruf oben rechts bleibt bewusst ruhig. In Kombination mit der erklaerenden Hero-Animation zog sein Dauerpuls den Blick aus dem Inhalt. */ .nav__ende .sa-btn-signal{ animation: none } /* Beim Überfahren steht er still: wer den Zeiger draufhat, ist gefunden. */ .sa-btn-gruen:hover, .nav__ende .sa-btn-signal:hover{ animation: none; outline-color: transparent; box-shadow: none; } @media (prefers-reduced-motion: reduce){ .sa-btn-gruen, .nav__ende .sa-btn-signal{ animation: none } } /* Gegenstueck zum Beobachter in _seiten-erzeugen.py: was ausserhalb des Bildes liegt, haelt an. `*` ist hier vertretbar — die Regel greift nur auf Baendern, die gerade nicht sichtbar sind, und sie setzt keine Farbe, keinen Abstand und keine Groesse, sondern ausschliesslich den Laufzustand. */ .band.ruht *, .held.ruht *, .band.ruht *::before, .band.ruht *::after, .held.ruht *::before, .held.ruht *::after{ animation-play-state: paused } /* Die Kopfleiste klebt und ist deshalb auch dann sichtbar, wenn ihr Band laengst aus dem Bild gescrollt ist. Sie darf nicht mit anhalten — sonst steht der Knopf, der blinken soll, ausgerechnet auf dem ganzen Rest der Seite still. */ .band.ruht .nav, .band.ruht .nav *, .band.ruht .nav *::before, .band.ruht .nav *::after{ animation-play-state: running } /* Der rose Rand am fehlerhaften Feld muss GANZ hinten stehen: `.mfeld__e` bekommt seine Kante an mehreren Stellen (Grundregel, `.sa-nacht`-Variante, Telefonblock), und die spaeteste Regel gewinnt bei gleichem Gewicht. Die Fassung weiter oben wurde deshalb ueberschrieben — gemessen blieb der Rand neutral, obwohl die Meldung schon rose war. */ .mfeld .mfeld__e[aria-invalid="true"], .sa-nacht .mfeld__e[aria-invalid="true"]{ border-color: var(--sa-rose) } .mfeld .mfeld__e[aria-invalid="true"]:focus-visible{ outline-color: var(--sa-rose) }