/* ========================================================================== efficas.de — Gestaltungssystem, Refit-Fassung -------------------------------------------------------------------------- Quelle im Repo: wordpress/mu-plugins/efficas-assets/design-refit.css NOCH NICHT AUF DER BOX. Ersetzt design.css erst nach Jonas' Freigabe. Warum es diese Datei gibt ------------------------- Gemessen am 10.09.2026 (docs/efficas-website-BESTAND-gestaltung-2026-09-10.md): 416,7 KB Inhaltslayout stehen inline in 18 Seiten, zentral liegt davon nichts. Vier Vokabulare - efficas-, eh3-, efl-, ep- - benennen dieselben Dinge verschieden und bemessen sie verschieden. Der Abschnittsabstand steht bei den Leistungsseiten auf 52px fest, bei Startseite und Profil auf clamp(72-118px): Faktor zwei zwischen Seitentypen derselben Website. Was hier anders ist ------------------- EIN Vokabular (.ef-*), EINE Skala mit sieben Rollen, EIN Radius, EIN Schattensatz, DREI Abstandsstufen. Darauf drei Seitentyp-Kompositionen, die den Entwuerfen A, B und C entsprechen: .ef-seite--auftakt Startseite (Entwurf A "Hafen") .ef-seite--leistung 7 Angebotsseiten (Entwurf B "Register") .ef-seite--erklaerung 10 Wissens-/Hausseiten (Entwurf C "Lagebild") Aufbau, in dieser Reihenfolge: 1 Token Farbe, Schrift, Mass 2 Grundlagen Typografie, Fokus, Bewegung 3 Rahmen Bahn, Band, Abschnitt 4 Textbausteine Marke, Kopfzeile, Vorspann, Link 5 Bausteine Knopf, Karte, Liste, Tabelle, Zahlen, Verweise … 6 Seitentypen was A, B und C je eigen haben 7 Grafiken Schaubildrahmen mit Umschaltpunkt 768px 8 Uebergang Altnamen als Aliase, mit Verfallsdatum ========================================================================== */ /* == 1 TOKEN ============================================================= */ :root { /* -- Farbe — unveraendert aus design.css uebernommen ------------------- */ --ef-navy: #153b5b; --ef-navy-tief: #0d2940; --ef-navy-weich: #12385c; --ef-navy-tinte: #081a2b; --ef-tiefsee: #061420; --ef-blau: #2b6690; --ef-blau-hell: #4f83ae; --ef-rot: #7e2f3d; --ef-rot-hell: #a4485a; --ef-rot-signal: #d86c7e; /* Aufhellung fuer dunkle Gruende. Gemessen: 4,52:1 auf --ef-navy-tief, dem dunkelsten Grund, auf dem die Marke steht. Der Vorgaenger #c25668 kam dort nur auf 3,43:1 und war fuer 13px-Text zu dunkel. Gleicher Farbton (350°), nur heller - nicht Richtung Orange gezogen. */ --ef-rot-signal-flaeche: #c25668; /* fuer Flaechen und grosse Schrift, wo 3:1 reicht */ --ef-rot-flaeche: #f4eaec; --ef-text: #12202c; --ef-text-leise: #4e6272; --ef-text-schwach: #57646f; /* Gemessen 5,17:1 auf Weiss und 4,52:1 auf --ef-grund-2, dem dunkelsten hellen Grund, auf dem Meta-Text vorkommt. Zwei Vorgaenger lagen darunter: #7d8b98 bei 3,01:1, #5f6d7a bei 3,89:1. NICHT aufhellen. */ --ef-flaeche: #ffffff; --ef-grund: #f4f6f7; --ef-grund-2: #eef3f7; --ef-band: #e9eff5; /* Abschnittsband — muss gegen Weiss als Kante lesbar sein */ --ef-linie: #d8dde3; --ef-linie-fein: #e6eaf0; --ef-erfolg: #2e5a4c; --ef-auf-dunkel: #dfeaf3; --ef-auf-dunkel-leise: #9db5c8; --ef-linie-dunkel: rgba(255, 255, 255, .16); /* -- Schrift — SIEBEN Rollen. Mehr gibt es nicht. ---------------------- Gemessen im Bestand: 32 verschiedene Groessen auf der Strategieseite, ueberwiegend gebrochene Werte aus em-Ketten (10,88 / 11,52 / 12,16 …). Hier steht je Rolle ein Wert, und die Rollen haben Namen. */ /* Bemessen fuer 1470px Fensterbreite - die Breite eines MacBook bei 100% Browserzoom. Das war der Pruefstein, und die erste Fassung ist daran gescheitert: dort stand H1 auf 56px und H2 auf 44px. Auf einem 835px hohen Schirm nahm allein eine fuenfzeilige Ueberschrift 350px ein - fast die halbe Seite. Jonas musste den Browser auf 75% ziehen, damit die Seite lesbar wurde. Wer zoomen muss, damit ein Text funktioniert, liest einen Text, der nicht funktioniert. Der Fehler war das Verhaeltnis, nicht die Absolutgroesse: H1 lag beim 3,3-fachen des Fliesstextes. Fuer eine Beratungsseite, die am Notebook gelesen wird, sind 2,5 das Mass. Fliesstext bleibt deshalb bei 17px - der ist richtig -, die Anzeigegroessen kommen herunter. vorher (1470) jetzt (1470) H1 56 42 H2 44 32 H3 24 21 Vorspann 21 19 Fliesstext 17 17 ACHTUNG: In CSS-Rechenausdruecken muessen + und - von Leerzeichen umgeben sein. "1.4rem+3vw" ist ungueltig und laesst die GANZE Deklaration ausfallen - ohne Fehlermeldung, mit Rueckfall auf den geerbten Wert. Das hat beim Bau der Entwuerfe zwei Anlaeufe gekostet. */ --ef-s-mikro: 0.8125rem; /* 13px Marke, Meta, Bildunterschrift */ --ef-s-klein: 0.9375rem; /* 15px Beitext, Listen, Knopf */ --ef-s-basis: 1.0625rem; /* 17px Fliesstext */ --ef-s-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17-19 Vorspann */ --ef-s-h3: clamp(1.125rem, 0.99rem + 0.35vw, 1.375rem); /* 18-22 */ --ef-s-h2: clamp(1.5rem, 0.945rem + 1.15vw, 2.25rem); /* 24-36 */ --ef-s-h1: clamp(1.875rem, 1.155rem + 1.6vw, 3rem); /* 30-48 */ --ef-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ef-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif; --ef-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* -- Mass — EIN Radius, EIN Schattensatz, DREI Abstaende --------------- Im Bestand: 12 Eckradien auf einer Seite (3/6/8/10/12/14/16/18/20/999px plus zwei asymmetrische) und fuenf Bahnbreiten. */ --ef-r: 10px; --ef-r-klein: 6px; --ef-schatten: 0 1px 2px rgba(8, 20, 32, .05), 0 10px 30px rgba(8, 20, 32, .08); --ef-schatten-hoch: 0 2px 4px rgba(8, 20, 32, .06), 0 24px 60px rgba(8, 20, 32, .16); /* Drei Stufen mit Aufgabe, nicht mit Groesse benannt: eng = innerhalb einer Gruppe, mit = zwischen Bloecken, weit = zwischen Abschnitten */ /* Bemessen fuer einen Notebook-Bildschirm (1440 x 900), nicht fuer einen grossen Monitor. Vorher lief die weite Stufe bis 104px - auf 900px Hoehe ging damit ein Achtel des Bildschirms fuer einen Abschnittswechsel drauf. */ /* Ebenfalls auf 1470px nachgerechnet. Die weite Stufe stand bei 68px, oben und unten also 136px je Abschnittswechsel - ein Sechstel eines 835px hohen Schirms fuer eine Fuge. Jetzt 52px. */ --ef-luft-eng: clamp(.875rem, .75rem + .5vw, 1.25rem); /* 14 → 19 → 20 */ --ef-luft-mit: clamp(1.5rem, 1.25rem + .9vw, 2.25rem); /* 24 → 33 → 36 */ --ef-luft-weit: clamp(2.25rem, 1.875rem + 1.5vw, 3.5rem); /* 36 → 52 → 56 */ --ef-bahn: 1140px; /* waechst ab 1600px, siehe unten */ --ef-bahn-eng: 860px; --ef-rand: clamp(1.75rem, 5vw, 3rem); /* 28px auf dem Telefon, 48px ab Tablet. Der Livestand hatte 12px, der erste Refit-Stand 20px - beides stand am Rand gedraengt. */ --ef-lesebahn: 68ch; /* Der Abstand zwischen einer Abschnittsueberschrift und dem Text darunter. Er steht hier als eigenes Mass, weil dieselbe Beziehung im Bestand in DREI Formen vorkommt: Text in der Kopfzeile, Text als Geschwister der Kopfzeile, Ueberschrift ganz ohne Kopfzeile. Vorher ergab jede Form einen anderen Abstand - 44px, 20px, 20px. Ein Leser sieht aber immer dieselbe Beziehung, also muss auch immer dasselbe Mass herauskommen. Die .6rem sind die Fuge der Kopfzeile, die im ersten Fall dazukommt. */ --ef-kopf-luft: calc(var(--ef-luft-mit) + .6rem); --ef-kopf-hoehe: 72px; --ef-kopf-hoehe-s: 60px; --ef-uebergang: 170ms cubic-bezier(.4, 0, .2, 1); /* Umschaltpunkt der Schaubilder. Gemessen: ein 700er viewBox liefert hier 10,7px Beschriftung, darunter faellt sie unter die Lesbarkeit. */ --ef-schaubild-grenze: 768px; } /* Auf einem Buerobildschirm ist eine 1140px-Bahn in 2560px Fenster ein Streifen in der Mitte: 44% der Flaeche traegt Inhalt, links und rechts stehen je 710px leer. Die Bahn waechst deshalb mit - aber nur die Bahn. Der Fliesstext bleibt bei seiner Lesebahn (68ch), die zusaetzliche Breite geht an Raster, Auftakt und Schaubilder. Genau so herum: mehr Platz macht Tafeln besser und Absaetze schlechter. */ @media (min-width: 1600px) { :root { --ef-bahn: 1280px; } } @media (min-width: 2000px) { :root { --ef-bahn: 1400px; } } /* == 2 GRUNDLAGEN ======================================================== */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ef-kopf-hoehe) + 16px); /* KEIN scroll-behavior: smooth. Es stand hier bis zum 11.09.2026 und war die Ursache fuer ein zaehes, falsch anfuehlendes Scrollen beim Griff auf den Nach-oben-Knopf (a.generate-back-to-top, unten rechts auf jeder Seite). Der Grund ist ein Zusammenstoss zweier Mechanismen: GeneratePress bringt fuer diesen Knopf eine EIGENE Scroll-Animation in JavaScript mit. Laeuft zusaetzlich die des Browsers, arbeiten beide gegeneinander und die Strecke - auf der Startseite 7.744 Pixel - zieht sich endlos. Ankerspruenge im Text springen jetzt sofort statt zu gleiten. Das ist der Preis; er ist klein gegen einen Knopf, der sich kaputt anfuehlt. Wer smooth zurueckhaben will, muss es auf kurze Strecken begrenzen - und das kann CSS nicht, es gehoert dann in ein Skript. */ } /* Bewegung ist eine Zugabe, nie eine Bedingung fuer Lesbarkeit. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } .ef-seite { font-family: var(--ef-body); font-size: var(--ef-s-basis); line-height: 1.66; color: var(--ef-text); background: var(--ef-flaeche); -webkit-font-smoothing: antialiased; } /* Der Abfang fuer alles, was ueber den Rand laeuft - volle Baender, Randmarken, das Relief im Kopf. Er sitzt am body und NICHT an .ef-seite. Dort stand er bis zum 10.09.2026, und das war genau falsch herum: .ef-seite ist im Theme nur 1376 von 1470 Pixeln breit, also hat das clip die vollen Baender wieder auf Kastenbreite zurueckgeschnitten. Sichtbar war ein dunkler Block mit weissem Rand links und rechts - gemeint war eine durchlaufende Flaeche. Am body greift es an der Fensterkante, wo es hingehoert. clip statt hidden, weil hidden einen Scroll-Container erzeugt und position:sticky im Seitenkopf bricht. */ body:has(.ef-seite) { overflow-x: clip; } /* Der schwebende Zurueck-nach-oben-Knopf des Themes. Gemessen: background rgba(217, 17, 24, .5) - das ist #D91118 aus der alten Farbwelt, halbdurchsichtig - mit color #2b2b2b darauf. Dunkelgrauer Pfeil auf durchscheinendem Signalrot, 40px gross, und die Deckkraft wandert beim Scrollen. Er ist die einzige Stelle auf den Entwuerfen, an der die Altfarbe noch auftaucht. Er bleibt - auf einer Seite von 14.700px ist ein schwebender Ausgang naeher als das Ende. Aber er traegt die Farben des Hauses und ein Tap-Ziel von 44px. Der Streifen .ef-nachoben am Seitenende bleibt daneben bestehen: der eine ist der Notausgang, der andere der Abschluss. */ body:has(.ef-seite) .generate-back-to-top { width: 44px; height: 44px; border: 1px solid var(--ef-linie-dunkel); border-radius: var(--ef-r-klein); background: var(--ef-navy-tief); color: #fff; box-shadow: var(--ef-schatten); transition: background var(--ef-uebergang), transform var(--ef-uebergang); } body:has(.ef-seite) .generate-back-to-top:hover, body:has(.ef-seite) .generate-back-to-top:focus-visible { background: var(--ef-navy); color: #fff; transform: translateY(-2px); } body:has(.ef-seite) .generate-back-to-top:focus-visible { outline: 2px solid var(--ef-rot-signal); outline-offset: 2px; } /* Der graue Streifen zwischen Navigation und Seitenkopf. Das Theme polstert .site-content mit 128px oben, und .site traegt #f4f6f7 als Grund. Auf den Livesetien stimmt das: dort beginnt der Inhalt mit weissem Text auf weiss und braucht Luft unter der klebenden Navigation. Jede Refit-Seite beginnt dagegen mit einem vollbreiten Band - Seitenkopf oder Auftakt. Die Polsterung stand deshalb als 128px hoher grauer Kasten zwischen Navigation und dunklem Kopf. Unten bleibt die Polsterung stehen: dort endet die Seite mit "Nach oben" auf weissem Grund, und ohne Abstand klebt die Zeile am Fuss. */ .site-content:has(.ef-seite) { padding-top: 0; } /* Und die seitliche dazu. Sie kam auf --ef-rand OBEN DRAUF: auf einem 390px-Telefon 32px vom Theme plus 28px aus der Bahn, zusammen 120px von 390 - knapp ein Drittel des Schirms als Rand. Der Rand der Seite ist --ef-rand, und den setzt die Bahn. */ .site-content:has(.ef-seite) { padding-inline: 0; } /* Unten dasselbe wie oben: 128px grauer Streifen zwischen dem Ende der Seite und dem Fuss. Die Seite schliesst mit ihrem eigenen Abschluss. */ .site-content:has(.ef-seite) { padding-bottom: 0; } .ef-seite *, .ef-seite *::before, .ef-seite *::after { box-sizing: border-box; } /* height:auto ist hier kein Beiwerk. WordPress schreibt width- und height-Attribute ins Bild ("height=1200"). Eine gesetzte Hoehe schlaegt aspect-ratio - ohne diese Zeile wird das Portraet 290 breit und 1200 hoch, und der Seitenkopf zwei Bildschirme lang. Steht in :where(), damit Bausteine mit fester Groesse (.ef-schluss__person img) gewinnen. */ .ef-seite :where(img, svg) { display: block; max-width: 100%; height: auto; } /* Ueberschriften: Display-Schrift, ausgeglichener Umbruch, KEINE Trennung. Im Bestand stand hyphens:auto auf der H1 - live las man dort "Prioritaet-en", "Umsetzbar-keit", "zusammenfin-den". ALLE Grundregeln stehen in :where(). Das setzt ihre Spezifitaet auf null, damit jede Bausteinklasse sie ueberschreiben kann, ohne !important. Ohne :where() gewinnt ".ef-seite p { margin: 0 }" (0,1,1) gegen ".ef-lead { margin-top: … }" (0,1,0) - der Vorspann klebte dann an der Ueberschrift. Genau so entstehen !important-Ketten. */ .ef-seite :where(h1, h2, h3, h4) { font-family: var(--ef-display); margin: 0; text-wrap: balance; color: var(--ef-navy); /* Grundzustand: keine Trennung, aber ein zu langes Wort bricht um, statt aus dem Bild zu laufen. Ohne overflow-wrap stand auf dem Telefon "Transformationsprojek" halb ausserhalb des Schirms. */ hyphens: none; overflow-wrap: break-word; } /* Deutsche Komposita brauchen den Trennstrich - aber nur die langen. "Prioritaeten" (11) und "Umsetzbarkeit" (13) bleiben ganz, ein Wort ab 15 Zeichen darf trennen. Genau das war der Livestand-Fehler: dort stand hyphens:auto ohne Grenze und trennte "Prioritaet-en". Nur wo die Grenze auch durchgesetzt werden kann. Kein @supports-Treffer heisst: gar nicht trennen, lieber umbrechen. */ @supports (hyphenate-limit-chars: 15 6 5) { .ef-seite :where(h1, h2, h3, h4) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 15 6 5; } } .ef-seite :where(h1) { font-size: var(--ef-s-h1); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; } .ef-seite :where(h2) { font-size: var(--ef-s-h2); line-height: 1.12; letter-spacing: -.026em; font-weight: 800; } .ef-seite :where(h3) { font-size: var(--ef-s-h3); line-height: 1.28; letter-spacing: -.014em; font-weight: 700; } .ef-seite :where(h4) { font-size: var(--ef-s-basis); line-height: 1.4; font-weight: 700; } /* Jeder Absatz haelt die Lesebahn ein, auch ohne .ef-text. Gemessen auf der Startseite: 1044px Zeilenlaenge, bei 17px also rund hundert Zeichen. Ab etwa fuenfundsiebzig verliert das Auge beim Ruecksprung die Zeile - der Text wird nicht falsch, aber anstrengend. In einer Karte oder einer Rasterzelle bindet die Regel ohnehin nicht, dort ist die Spalte enger. :where(), damit jede Bausteinregel sie ohne Muehe uebersteuern kann. */ .ef-seite :where(p, ul, ol, dl) { max-width: var(--ef-lesebahn); } .ef-seite :where(p) { margin: 0; } .ef-seite :where(p + p) { margin-top: 1rem; } .ef-seite :where(ul, ol) { margin: 0; padding-left: 1.25rem; } /* Abstand ZWISCHEN den Punkten. Ohne ihn sieht der Zeilenumbruch INNERHALB eines Punktes genauso aus wie der Sprung zum naechsten - bei zweizeiligen Eintraegen weiss das Auge nicht mehr, wo einer aufhoert. Genau das war an der Interim-Seite nicht zu lesen. Raster- und Flexlisten bekommen ihren Abstand aus der Fuge; fuer die setzt Abschnitt 7c den Aussenrand wieder auf null. */ .ef-seite :where(li + li) { margin-top: .45rem; } /* Der Textfluss: was auf eine Ueberschrift oder eine Marke folgt, bekommt Abstand - unabhaengig davon, ob es eine Klasse traegt. Vorher gab es dafuer ZWEI Mechanismen: ein Raster mit gap an .ef-kopfzeile und margin-top an einzelnen Bausteinen. Klassenlose Absaetze fielen durch beide durch und klebten an der Ueberschrift - auf der Startseite gleich dreimal (Person, Ebenenmodell, Fractional CIO). (0,1,2) schlaegt die Grundregel :where(p) mit (0,1,0) und jede Bausteinklasse mit (0,1,0). */ .ef-seite :is(h3, h4) + :is(p, ul, ol, dl, figure, table, div, details, section) { margin-top: var(--ef-luft-eng); } /* h1 und h2 fuehren einen Abschnitt an - sie bekommen dasselbe Mass wie in der Kopfzeile, damit der Rhythmus nicht von der Form des Markups abhaengt. h3 und h4 sind Bausteinueberschriften und bleiben enger. */ .ef-seite :is(h1, h2) + :is(p, ul, ol, dl, figure, table, div, details, section) { margin-top: var(--ef-kopf-luft); } /* Die Marke gehoert zu ihrer Ueberschrift - sie steht dicht davor. */ .ef-seite .ef-marke + :is(h1, h2, h3, h4) { margin-top: .6rem; } .ef-seite .ef-kopfzeile + * { margin-top: var(--ef-kopf-luft); } /* Was nach einer Knopfzeile kommt, braucht Abstand zu ihr - sie ist ein Handlungsblock, kein Absatz. Im Auftakt der Startseite stand "Lieber direkt sprechen? Kontakt" mit 0px direkt unter dem Knopf und die Meta-Zeilen wieder mit 0px darunter: drei Bloecke aufeinander. */ .ef-seite .ef-knopfzeile + * { margin-top: var(--ef-luft-mit); } .ef-seite .ef-kennung + * { margin-top: var(--ef-luft-eng); } /* Zwei weitere Luecken aus derselben Familie, gemessen im Profilkopf: der Vorspann und der Absatz darunter standen mit 0px aufeinander, und die Tafel klebte an der Bildunterschrift des Portraets. Beides sind Bloecke, die im Flusswerk keine Regel hatten. */ .ef-seite .ef-lead + * { margin-top: var(--ef-luft-eng); } .ef-seite .ef-portraet + * { margin-top: var(--ef-luft-mit); } .ef-seite .ef-kopftafel + * { margin-top: var(--ef-luft-eng); } /* Und der Fall, den das Flusswerk bisher gar nicht kannte: was nach einem BAUSTEIN kommt. Es gab Regeln fuer "Ueberschrift plus Absatz", fuer die Kopfzeile und fuer die Knopfzeile - aber ein Absatz hinter einem Passungsraster, einer Tabelle oder einem Schaubild stand mit 0px daran. Gemessen auf der Strategieseite: der Absatz "Eine Frage kehrt so oft wieder…" klebte an der Unterkante der beiden Passungsfelder. Absichtlich nur fuer DIREKTE Kinder einer Bahn oder eines Abschnitts. Innerhalb einer Karte macht die Fuge den Abstand; griffe die Regel auch dort, kaeme sie oben drauf. */ .ef-seite :is(.ef-bahn, .ef-abschnitt) > :is(.ef-passung, .ef-karten, .ef-belege, .ef-zahlen, .ef-folge, .ef-verweise, .ef-stationen, .ef-liste, .ef-faecher, .ef-tabelle-huelle, .ef-schaubild, .ef-tafel, .ef-kurzgesagt, .ef-explorer, .ef-steckbrief, .ef-formular, .ef-mailvorschau, .ef-datenblatt) + * { margin-top: var(--ef-luft-mit); } /* Innerhalb eines Rasters regelt gap den Abstand - dort keine Raender. */ .ef-seite :is(.ef-karten, .ef-belege, .ef-folge, .ef-zahlen, .ef-passung, .ef-verweise) > * > :is(h1,h2,h3,h4) + * { margin-top: .75rem; } /* Fokus gilt ueberall, nicht nur im Seitenkopf. Im Bestand war eine :focus-visible-Regel nur fuer .ef-kopf definiert; im Seiteninhalt griff die Voreinstellung des Browsers, auch auf dunklen Schaltflaechen. */ .ef-seite :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--ef-rot); outline-offset: 3px; border-radius: 3px; } .ef-band--dunkel :where(a, button, summary, [tabindex]):focus-visible, .ef-abschluss :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--ef-rot-signal); } /* Scrollgetriebenes Auftauchen. Der Ruhezustand ist SICHTBAR - ein abgebrochener oder nicht unterstuetzter Lauf hinterlaesst nie unlesbaren Text. Deshalb beginnt die Kurve bei .4, nicht bei 0. */ @media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .ef-auftauchen { animation: ef-auftauchen linear both; animation-timeline: view(); animation-range: entry 2% cover 24%; } @keyframes ef-auftauchen { from { opacity: .4; transform: translateY(16px); } to { opacity: 1; transform: none; } } } } /* == 3 RAHMEN ============================================================ */ .ef-bahn { max-width: var(--ef-bahn); margin-inline: auto; padding-inline: var(--ef-rand); } /* Eine Bahn in einer Bahn polstert ein zweites Mal. Auf der Startseite stand der Auftaktinhalt dadurch in 1044 statt 1140 Pixeln - 96px schmaler als jeder Abschnitt darunter, sichtbar als Versatz an der linken Kante. Statt es im Markup zu suchen, hebt diese Regel jede innere Bahn auf: es gibt genau EINE Bahnbreite je Seite. */ :is(.ef-bahn, .ef-seitenkopf__innen, .ef-auftakt__innen) :is(.ef-bahn) { max-width: none; padding-inline: 0; } .ef-bahn--eng { max-width: var(--ef-bahn-eng); } /* Der Abschnittsrhythmus. EIN Wert fuer alle Seitentypen - im Bestand standen sich 52px (Leistungsseiten) und clamp(72-118px) (Startseite, Profil) gegenueber, Faktor zwei innerhalb derselben Website. */ .ef-abschnitt { padding-block: var(--ef-luft-weit); } .ef-abschnitt--knapp { padding-block: var(--ef-luft-mit); } /* -- Volle Breite -------------------------------------------------------- Der zweite Befund, den nur die Box zeigen konnte. Das Theme haelt den Inhalt in einem Kasten: .site { max-width: 1440px } .site-content { padding: 32px } Gemessen auf einem 1470px-Schirm: main.ef-seite ist 1376px breit und beginnt bei x=47. Jedes dunkle Band hoerte also 47px vor dem Rand auf und stand als Kasten im Weiss - auf einem breiten Monitor waechst der Rand auf ueber hundert Pixel. Gemeint war eine durchlaufende Flaeche. Die beiden Zeilen heben genau das auf: der negative Aussenrand zieht das Band auf Fensterbreite, das gleich grosse Innenpolster stellt den Inhalt an dieselbe Stelle zurueck. Beide Werte sind exakt invers, die Bahn darin bewegt sich deshalb nicht. 50vw zaehlt die Bildlaufleiste mit, das Band ragt also ein paar Pixel ueber den Rand hinaus. Das faengt overflow-x:clip an .ef-seite ab - clip und nicht hidden, weil hidden position:sticky bricht. Warum nicht der box-shadow-Trick von .ef-voll-links-rechts: der malt nur Farbe. Seitenkopf und Auftakt tragen ein Bild (Relief, Hafen), und das haette an der Kastenkante aufgehoert. */ .ef-seite :is(.ef-seitenkopf, .ef-auftakt, .ef-abschluss, .ef-band) { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .ef-band { position: relative; } .ef-band--grund { background: var(--ef-grund); } .ef-band--ton { background: var(--ef-band); } .ef-band--dunkel { background: var(--ef-navy-tief); color: var(--ef-auf-dunkel); } .ef-band--tinte { background: var(--ef-navy-tinte); color: var(--ef-auf-dunkel); } .ef-band--dunkel :is(h1, h2, h3, h4), .ef-band--tinte :is(h1, h2, h3, h4) { color: #fff; } /* Feines Raster auf dunklem Grund — die Grammatik der efficas-Bildsprache. */ .ef-band--raster { background-image: linear-gradient(var(--ef-linie-dunkel) 1px, transparent 1px), linear-gradient(90deg, var(--ef-linie-dunkel) 1px, transparent 1px); background-size: 56px 56px; background-position: center; } /* Vollbreiter Grund aus einer Rasterspalte heraus. Braucht overflow-x:clip am Seitenrumpf, das steht in Abschnitt 2. */ .ef-voll-links-rechts { box-shadow: -100vmax 0 0 currentColor, 100vmax 0 0 currentColor; } .ef-ankerversatz { scroll-margin-top: calc(var(--ef-kopf-hoehe) + 16px); } /* == 4 TEXTBAUSTEINE ===================================================== */ /* Die Marke ueber einer Ueberschrift. Traegt Weinrot - das ist der Ort, an dem der Akzent auf hellem Grund vorkommt. */ .ef-marke { font-family: var(--ef-body); font-size: var(--ef-s-mikro); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ef-rot); display: inline-flex; align-items: center; gap: .7rem; margin: 0; } .ef-marke::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; flex: none; } .ef-marke--schlicht::before { display: none; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-marke { color: var(--ef-rot-signal); } /* EINE Regel fuer alle Ueberschriftenbreiten, statt drei Sonderfaelle mit 16ch, 19ch und 28ch, die sich gegenseitig geschlagen haben. 24ch klingt schmal, ist es aber nicht: In Plus Jakarta misst ein "ch" bei dieser Groesse rund 0,7em, eine Zeile fasst also etwa 33 Zeichen. Eine 96 Zeichen lange Ueberschrift steht damit in drei Zeilen - vorher waren es bei 16ch sieben. Der Vorspann bleibt schmaler: er wird gelesen, nicht ueberflogen. */ /* Die Kopfzeile ist ein Stapel, kein Block. Im Bestand steht sie oft als zwei Kaesten - Marke und Ueberschrift im ersten, der Text im zweiten. Als display:block hatten die beiden keinen Abstand voneinander: der Absatz klebte an der Unterkante der H2. Die Flussregeln greifen dort nicht, weil Ueberschrift und Absatz nicht Geschwister sind. Als Raster macht die Fuge den Abstand - einmal, fuer alle Faelle. */ /* Rhythmus statt gleicher Abstaende. Gemessen war im Bestand: Marke -> Ueberschrift 20px Ueberschrift -> Text 20px Alles gleich weit, also gruppiert sich nichts - das Auge kann nicht sehen, dass die Marke ZUR Ueberschrift gehoert und der Absatz eine neue Stimme ist. Naehe bedeutet Zusammengehoeren; das ist das aelteste Mittel der Typografie und hier lag es brach. Jetzt: die Marke sitzt dicht an ihrer Ueberschrift, und was nach der Ueberschrift kommt, bekommt die mittlere Stufe. */ .ef-kopfzeile { max-width: none; display: grid; gap: .6rem; } /* .ef-seite davor, damit die Regel ueber der allgemeinen Flussregel ".ef-seite :is(h1,h2,h3,h4) + :is(p, ul, …)" (0,1,2) liegt. Ohne das entschied die Form des Markups ueber den Abstand: 30px, wo Ueberschrift und Text Geschwister sind, 44px, wo die Ueberschrift in einem Kasten steckt. Dieselbe Figur mit zwei Rhythmen - genau das, was auf allen Seiten gleich sein soll. */ .ef-seite .ef-kopfzeile > :is(h1, h2, h3, h4) + *, .ef-seite .ef-kopfzeile > div:has(> :is(h1, h2, h3, h4)) + * { margin-top: var(--ef-luft-mit); } /* Steht die Marke DIREKT in der Kopfzeile, macht die Fuge den Abstand schon - der Aussenrand aus dem Flusswerk kaeme oben drauf. Gemessen auf der Startseite: 19px statt der gewollten 10. */ .ef-kopfzeile > .ef-marke + :is(h1, h2, h3, h4) { margin-top: 0; } /* Ein Abschnittskopf, der aus dem Seitenkopf herausgewandert ist, bringt die Klassen von dort mit: eine .ef-tafel__titel als Beschriftung und ein nacktes als Zeile darunter. Auf hellem Grund stehen die beiden dann als zwei gleich leise Zeilen ueber dem Raster und sagen nichts. Hier bekommen sie die Rollen, die sie im Abschnittskopf haben: Marke und Aussage. Das ist Gestaltung, keine Inhaltsaenderung - im Markup bleibt jedes Wort, wo es steht. */ .ef-kopfzeile > .ef-tafel__titel { font-family: var(--ef-body); font-size: var(--ef-s-mikro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ef-rot); } .ef-kopfzeile > span:not([class]) { font-family: var(--ef-display); font-size: var(--ef-s-h3); font-weight: 700; line-height: 1.3; color: var(--ef-navy); max-width: 32ch; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-kopfzeile > span:not([class]) { color: #fff; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-kopfzeile > .ef-tafel__titel { color: var(--ef-rot-signal); } .ef-seite :where(h1, h2) { max-width: 24ch; } .ef-seite :where(h3) { max-width: 32ch; } .ef-seite .ef-lead { max-width: 58ch; } /* Die Frage, auf die ein Abschnitt antwortet. Sie stand im Bestand als letzter Satz eines Absatzes und ging dort unter - obwohl zwei Bloecke weiter ein "Nein." darauf antwortet. Sie traegt deshalb die Anzeigeschrift und die Farbe der Ueberschriften: laut genug, um als Frage gelesen zu werden, leise genug, um keine zweite H2 zu sein. */ .ef-frage { font-family: var(--ef-display); font-size: var(--ef-s-lead); font-weight: 700; line-height: 1.4; color: var(--ef-navy); max-width: 46ch; text-wrap: balance; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-frage { color: #fff; } .ef-lead { font-size: var(--ef-s-lead); line-height: 1.55; color: var(--ef-text-leise); max-width: 52ch; margin-top: var(--ef-luft-eng); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-lead { color: var(--ef-auf-dunkel-leise); } .ef-text { color: var(--ef-text-leise); max-width: var(--ef-lesebahn); } .ef-text--eng { max-width: 54ch; } /* Dunkle Zusammenhaenge an EINER Stelle. Vorher trugen .ef-text und .ef-kennung im dunklen Seitenkopf weiter die Textfarbe fuer hellen Grund - #4e6272 auf beinahe Schwarz, praktisch unlesbar. Jede Flaeche, die dunkel wird, muss ihre Textfarben mitbringen; sonst faellt genau der Fliesstext durch, der nicht in einem eigenen Baustein steckt. */ /* Ein Selektor fuer alles, was Text traegt - statt einer Liste von Bausteinen, die zwangslaeufig unvollstaendig bleibt. Beim ersten Anlauf standen genau die Bausteine ohne Eintrag in Navy auf Navy: ein Zitat bei 1,6:1, ein Verweis bei 1,6:1, eine Zeile ohne Klasse bei 1,22:1. (0,1,1) schlaegt jede Bausteinklasse mit (0,1,0). */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(p, li, span, dd, dt, figcaption, small, blockquote, div) { color: var(--ef-auf-dunkel-leise); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(strong, b, .ef-beleg__wert, .ef-verweis__titel, .ef-schluss__name, .ef-zitat) { color: #fff; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-kennung, .ef-beleg__marke, .ef-fall__meta) { color: #8fa8bc; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-marke, .ef-fall__marke, .ef-stufe__nr, .ef-station__zeit) { color: var(--ef-rot-signal); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-link { color: #fff; border-bottom-color: var(--ef-rot-signal); } /* Helle Inseln auf dunklem Grund holen die helle Textwelt zurueck. Eine weisse Tafel oder Tabelle in einem dunklen Band braucht wieder dunklen Text - sonst kehrt sich die Regel oben gegen sie. */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-tabelle-huelle, .ef-fall, .ef-datenblatt__rumpf) :is(p, li, span, dd, dt, div, blockquote) { color: var(--ef-text-leise); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-tabelle-huelle, .ef-fall, .ef-datenblatt__rumpf) :is(h1, h2, h3, h4, strong, b) { color: var(--ef-navy); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-tabelle-huelle, .ef-fall, .ef-datenblatt__rumpf) .ef-link { color: var(--ef-navy); border-bottom-color: var(--ef-rot); } /* Der Tabellenkopf bleibt dunkel mit weisser Schrift. */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-abschluss) .ef-tabelle thead :is(th, a) { color: #fff; } /* Eine Kennung als Liste ist eine Kette von Angaben, kein Stapel von Punkten. Im Auftakt standen "Hamburg & Norddeutschland", "Interim · Projektleitung · Beratung" und "Vor-Ort-faehig & seniorig" als drei Zeilen untereinander in Versalien - das las sich wie ein Restposten unter dem Knopf statt wie eine Zeile Eckdaten. */ ul.ef-kennung, ol.ef-kennung { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; padding-left: 0; /* Kein Fliesstext, also keine Lesebahn. Die Grundregel fuer Absaetze und Listen kappt bei 68ch - im Profilkopf zwang das die drei Eckdaten auf VIER Zeilen, obwohl die Spalte 804px breit ist. */ max-width: none; } ul.ef-kennung > li::marker { content: none; } /* -- Hinweis: eine Randbemerkung mit Akzentstrich ------------------------- Nicht zu verwechseln mit .ef-zitat. Ein Zitat ist ein SATZ, den jemand gesagt hat - Anzeigeschrift, Navy, gross genug zum Stehenbleiben. Ein Hinweis ist eine Einschraenkung oder eine Fussnote im Fluss: bis zu einem halben Absatz, Fliesstext, leiser Ton. Beim Umbau des Lagebilds sind SECHS Hinweise faelschlich als Zitate gelandet - die Klassenkarte fuehrte efl-note auf ef-zitat. Einer davon war 634 Zeichen lang und stand als fuenfzehn Zeilen Anzeigeschrift in Navy da. Anzeigeschrift traegt einen Satz, keinen Absatz. */ .ef-hinweis { margin-top: var(--ef-luft-mit); padding-left: 1.15rem; border-left: 3px solid var(--ef-rot); font-family: var(--ef-body); font-size: var(--ef-s-klein); font-weight: 400; line-height: 1.65; color: var(--ef-text-leise); max-width: var(--ef-lesebahn); } .ef-hinweis > :is(strong, b):first-child { color: var(--ef-navy); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-hinweis { border-left-color: var(--ef-rot-signal); color: var(--ef-auf-dunkel-leise); } /* Kennung: eine kurze Kennzeile - "8 Erhebungsfelder · 3 Sichten", "Mo–Fr, 11–19 Uhr". Bis zum 10.09.2026 trugen auch ganze Saetze diese Klasse ("Typische Umfelder sind Maschinenbau, Fertigungsindustrie, …", 188 Zeichen) und standen in 13px Versalien. Solche Saetze heissen jetzt .ef-notiz und werden als Text gesetzt. */ .ef-notiz { font-size: var(--ef-s-klein); line-height: 1.55; color: var(--ef-text-leise); margin: 0; max-width: var(--ef-lesebahn); } .ef-seite .ef-notiz + * { margin-top: var(--ef-luft-eng); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-notiz { color: var(--ef-auf-dunkel-leise); } .ef-kennung { font-family: var(--ef-body); font-size: var(--ef-s-mikro); letter-spacing: .09em; text-transform: uppercase; color: var(--ef-text-schwach); margin: 0; } /* 13px ist der Boden. setzt sonst auf 0.8em herunter - im Auftakt der Startseite stand der Hinweis "Scrollen" dadurch auf 10px. Was zu klein zum Lesen ist, ist entweder ueberfluessig oder falsch gesetzt. */ .ef-seite :where(small) { font-size: var(--ef-s-mikro); } /* Hervorhebung im Fliesstext. Vorher: Gewicht 700 in derselben Farbe wie der Absatz. Ueber einen halben Satz gelegt ergibt das einen Klotz - "optisch ein wenig schwierig", wie Jonas es nannte. Emphase gehoert ueber die Farbe: dunklere Tinte bei 600 statt gleicher Ton bei 700. Das hebt genauso deutlich und traegt auch ueber mehrere Zeilen. */ .ef-seite :where(strong, b) { font-weight: 600; color: var(--ef-text); } /* Bauteile mit eigener dunkler Flaeche stehen NICHT in der kanonischen Bandliste - die Regel oben hat ihnen deshalb dunkle Tinte auf Navy gegeben. Gemessen auf dem Lagebild: "Standard" bei 1,43:1. */ :is(.ef-explorer__ergebnis-kopf, .ef-explorer__befund, .ef-datenblatt__kopf, .ef-tabelle thead) :is(strong, b) { color: inherit; } .ef-seite :where(a) { color: inherit; text-decoration-color: var(--ef-rot); text-underline-offset: 2px; } .ef-link { color: var(--ef-navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--ef-rot); padding-bottom: 1px; transition: color var(--ef-uebergang); } .ef-link:hover { color: var(--ef-rot); } /* Eigenstaendige Handlung statt Verweis im Fliesstext: braucht ein Tap-Ziel. Links MITTEN im Text sind davon ausgenommen - WCAG 2.5.8 nimmt sie aus. */ .ef-link--eigen { display: inline-flex; align-items: center; min-height: 44px; } /* == 5 BAUSTEINE ========================================================= */ /* -- Knopf --------------------------------------------------------------- min-height 46px: im Bestand lagen 17 von 40 Tap-Zielen unter 44px. */ .ef-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .75rem 1.25rem; font-family: var(--ef-body); font-size: var(--ef-s-klein); font-weight: 600; line-height: 1.2; text-decoration: none; border: 1px solid transparent; border-radius: var(--ef-r-klein); cursor: pointer; transition: background var(--ef-uebergang), color var(--ef-uebergang), border-color var(--ef-uebergang), transform var(--ef-uebergang); } .ef-knopf:hover { transform: translateY(-1px); } .ef-knopf--voll { background: var(--ef-rot); color: #fff; } .ef-knopf--voll:hover { background: #6b2734; } .ef-knopf--linie { border-color: var(--ef-linie); color: var(--ef-navy); background: var(--ef-flaeche); } .ef-knopf--linie:hover { border-color: var(--ef-navy); background: var(--ef-grund-2); } /* Auf dunklem Grund dreht der Linienknopf selbst um. Vorher musste beim Umstellen entschieden werden, ob ein Knopf --linie oder --hell bekommt - und auf der Startseite landeten helle Knoepfe auf hellem Band: 1:1. */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-knopf--linie { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-knopf--linie:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.62); } .ef-knopf--hell { border-color: rgba(255,255,255,.34); color: #fff; } .ef-knopf--hell:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.62); } /* Ein .ef-knopf ohne Spielart war unsichtbar: die Grundregel setzt bewusst nur Form und Groesse, Farbe kommt aus --voll oder --linie. Auf dem Profil stand deshalb "Zum Schnell-Check" als blanker Text ohne Flaeche und ohne Rand. Statt die Stelle im Inhalt zu flicken, faellt der Knopf hier auf die Linienform zurueck - kein Knopf soll je aussehen wie kein Knopf. */ .ef-knopf:not([class*="ef-knopf--"]) { border-color: var(--ef-linie); color: var(--ef-navy); background: var(--ef-flaeche); } .ef-knopf:not([class*="ef-knopf--"]):hover { border-color: var(--ef-navy); background: var(--ef-grund-2); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-knopf:not([class*="ef-knopf--"]) { border-color: rgba(255,255,255,.34); color: #fff; background: transparent; } .ef-knopfzeile { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--ef-luft-mit); } /* -- Karte --------------------------------------------------------------- Rahmen, Flaeche, Radius und Schatten sagen jeweils "eigenstaendiges Objekt". Im Bestand trugen 23 bis 45 Elemente je Seite alle vier Merkmale - dadurch sagte keines mehr etwas. Karten sind hier fuer die Faelle reserviert, in denen wirklich gleichrangige Objekte nebeneinander stehen. Fuer Aufzaehlungen gibt es .ef-liste. */ /* Die Spaltenzahl richtet sich nach der Anzahl der Karten, nicht nach einer Klasse, die jemand setzen muss. Vier Karten in einem Dreierraster lassen die vierte allein in der zweiten Reihe stehen - genau das stand vorher auf der Strategieseite. Die --2/--3/--4 bleiben als Handsteuerung. */ .ef-karten > .ef-belege { grid-column: 1 / -1; } /* vier Zellen in einer halben Karte: 129px je Zelle (Projektleitung) */ .ef-karten { display: grid; gap: 1rem; margin-top: var(--ef-luft-mit); } @media (min-width: 700px) { .ef-karten { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ef-karten { grid-template-columns: repeat(3, 1fr); } /* genau zwei, genau vier: paarweise. Sonst bleibt eine Karte allein. */ .ef-karten:has(> :nth-child(2):last-child), .ef-karten:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } /* Ein Kennzahlenblock zaehlt beim Abzaehlen nicht mit - er spannt ohnehin die ganze Breite. Auf der Projektleitung galt das Raster deshalb als Viererraster, schaltete auf zwei Spalten, und die dritte Karte stand allein neben 514px Nichts (11.09.2026). */ .ef-karten:has(> .ef-belege):has(> :nth-child(4):last-child) { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1080px) { .ef-karten:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, 1fr); } } /* Eine Karte, die als einzige in der letzten Reihe steht, legt sich ueber die volle Breite und schliesst den Block - statt allein neben einer Luecke zu haengen. Zweimal gesehen: fuenf Fragen im Zweispalter, sieben im Dreispalter. Es gibt dafuer keine allgemeine Regel in CSS - ein Raster kennt seine Kinderzahl nicht. Deshalb die Faelle, die wirklich vorkommen, einzeln: im Zweispalter jede ungerade Anzahl, im Dreispalter die Anzahlen, bei denen eins uebrig bleibt (7, 10, 13). Der Fliesstext darin bleibt auf seiner Lesebahn - die Karte wird breiter, nicht die Zeile. */ @media (min-width: 700px) and (max-width: 899.98px) { .ef-karten:has(> :nth-child(odd):last-child) > :last-child { grid-column: 1 / -1; } } @media (min-width: 700px) { .ef-karten--2:has(> :nth-child(odd):last-child) > :last-child { grid-column: 1 / -1; } } @media (min-width: 900px) { .ef-karten:has(> :nth-child(7):last-child) > :last-child, .ef-karten:has(> :nth-child(10):last-child) > :last-child, .ef-karten:has(> :nth-child(13):last-child) > :last-child { grid-column: 1 / -1; } /* Der Vierspalter ab 1080px hat seine eigene Rechnung - dort bleibt bei acht Karten nichts uebrig. */ .ef-karten--2:has(> :nth-child(7):last-child) > :last-child { grid-column: 1 / -1; } } @media (min-width: 700px) { .ef-karten.ef-karten--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .ef-karten.ef-karten--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .ef-karten.ef-karten--4 { grid-template-columns: repeat(4, 1fr); } } .ef-karte { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: var(--ef-luft-eng); background: var(--ef-flaeche); /* --ef-linie-fein steht auf Weiss bei rund 1,1:1 - eine Kante, die man nur sieht, wenn man weiss, dass sie da ist. Karten sind eigene Objekte, also bekommen sie die traegere Linie. */ border: 1px solid var(--ef-linie); border-radius: var(--ef-r); overflow: hidden; transition: box-shadow var(--ef-uebergang), transform var(--ef-uebergang), border-color var(--ef-uebergang); } .ef-karte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--ef-rot); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.4, 0, .2, 1); } .ef-karte:hover { box-shadow: var(--ef-schatten); transform: translateY(-3px); border-color: var(--ef-linie); } .ef-karte:hover::before { transform: scaleX(1); } .ef-karte--ruhig::before { display: none; } .ef-karte--ruhig:hover { transform: none; box-shadow: none; } /* Ein Vorspann in einer Karte ist kein Vorspann mehr, sondern Kartentext. Sonst steht 19px-Schrift in einem 500px breiten Kasten neben einer 21px-Ueberschrift und die Karte hat keine Rangfolge mehr. */ .ef-karte .ef-lead { font-size: var(--ef-s-klein); line-height: 1.6; color: var(--ef-text-leise); max-width: none; } /* Eine Karte, die aus der Reihe heraussteht - der empfohlene Zuschnitt, der aktuelle Meilenstein. Genau EINE je Reihe, sonst hebt sich nichts mehr ab. Der Unterschied liegt in Rand und Flaeche, nicht in der Schriftgroesse: die Reihe soll noch als Reihe lesbar bleiben. */ .ef-karte--hervor { border-color: var(--ef-rot); background: var(--ef-rot-flaeche); } .ef-karte--hervor::before { background: var(--ef-rot); } /* Ein Betrag. Steht in der Anzeigeschrift und mit Tabellenziffern, damit Zahlen untereinander auf einer Achse liegen. */ .ef-betrag { display: block; font-family: var(--ef-display); font-size: var(--ef-s-h3); font-weight: 700; line-height: 1.2; color: var(--ef-navy); font-variant-numeric: tabular-nums; } .ef-betrag > small { display: block; font-family: var(--ef-body); font-size: var(--ef-s-mikro); font-weight: 400; color: var(--ef-text-leise); margin-top: .2rem; } /* -- Datenblatt --------------------------------------------------------- Ein ausgefuelltes Musterexemplar: dunkle Kopfleiste, Wertepaare im Rumpf, eine Einordnung im Fuss. Anders als .ef-tafel ist es kein Einschub im Text, sondern ein Dokument im Dokument - deshalb die Kopfleiste. */ .ef-datenblatt { border: 1px solid var(--ef-linie); border-radius: var(--ef-r); background: var(--ef-flaeche); box-shadow: var(--ef-schatten); overflow: hidden; } .ef-datenblatt__kopf { background: var(--ef-navy); color: #fff; padding: .95rem 1.15rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .ef-datenblatt__kopf b { font-family: var(--ef-display); font-size: var(--ef-s-klein); font-weight: 700; } .ef-datenblatt__kopf span { font-size: var(--ef-s-mikro); color: var(--ef-auf-dunkel-leise); letter-spacing: .07em; text-transform: uppercase; } /* Der Rumpf ist eine helle Insel: steht das Datenblatt im dunklen Seitenkopf, erbt sein Inhalt sonst die Aufhellungsfarben und laeuft auf weissem Grund bei 2,9:1. Deshalb ist .ef-datenblatt__rumpf oben in der Inselliste eingetragen - zusammen mit Tabelle und Fallbeispiel. */ .ef-datenblatt__rumpf { padding: .4rem 1.15rem 1.15rem; } /* Der Steckbrief im Datenblatt braucht die HELLE Fassung. Im Seitenkopf wird er sonst zum dunklen Fugenraster umgebaut: .ef-seitenkopf .ef-steckbrief { gap:1px; background: weiss/16% } .ef-seitenkopf .ef-steckbrief > * { background: rgba(6,18,30,.55) } Das ist auf dunklem Grund richtig. Im Datenblatt liegt es aber auf Weiss - dort werden aus den durchscheinenden Zellen graue Balken und aus den hellen Fugen unsichtbare Linien. Genau der graue Block, den Jonas gesehen hat. Hier also zurueck zur Grundfigur: weisse Zeilen, feine Trennlinien. Ein .ef-seite davor, damit die Spezifitaet ueber der Kopfregel liegt und nicht die Reihenfolge in der Datei entscheidet. */ .ef-seite .ef-datenblatt__rumpf .ef-steckbrief { gap: 0; background: none; border: 0; border-top: 1px solid var(--ef-linie); margin-top: 0; } .ef-seite .ef-datenblatt__rumpf .ef-steckbrief > * { background: none; padding: .8rem 0; border-bottom: 1px solid var(--ef-linie-fein); } .ef-seite .ef-datenblatt__rumpf .ef-steckbrief > :last-child { border-bottom: 0; } /* Auf dem Handy stapelten sieben Paare zu 534px im Seitenkopf - der Kopf des Lagebilds war 1.911px hoch, zwei Bildschirme, bevor Inhalt kam. Bezeichner links, Wert rechts: eine Zeile je Paar. */ @media (max-width: 699px) { .ef-seite .ef-datenblatt__rumpf .ef-steckbrief > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); column-gap: .75rem; align-items: baseline; padding: .55rem 0; } .ef-seite .ef-datenblatt__rumpf .ef-steckbrief > div > :is(dt, dd) { margin: 0; } } /* Der Rumpf ist eine helle Insel im dunklen Seitenkopf. Die Insel-Regeln in Abschnitt 4 reichen hier nicht: .ef-seitenkopf .ef-steckbrief dt liegt bei derselben Spezifitaet (0,2,1) und steht spaeter in der Datei - bei Gleichstand gewinnt die letzte. Statt den Block ans Dateiende zu schieben und damit die Reihenfolge zur stillen Bedingung zu machen, traegt er ein .ef-seite davor: (0,3,1) gewinnt, egal wo er steht. Gemessen waren es 2,94:1 fuer die Bezeichner und 1,24:1 fuer die Werte - beides auf Weiss. */ .ef-seite :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-datenblatt__rumpf, .ef-datenblatt__fuss) :is(p, li, span, dd, div) { color: var(--ef-text-leise); } .ef-seite :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-datenblatt__rumpf, .ef-datenblatt__fuss) :is(dt, strong, b, h3, h4) { color: var(--ef-navy); } .ef-seite :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-datenblatt__fuss { color: var(--ef-text-leise); } .ef-datenblatt__fuss { padding: .9rem 1.15rem; background: var(--ef-rot-flaeche); border-top: 1px solid rgba(126, 47, 61, .16); font-size: var(--ef-s-klein); line-height: 1.55; color: var(--ef-text-leise); } /* Beitragsbild einer Karte. Sitzt VOR dem Polster, damit es bis an die Kanten laeuft - deshalb die negativen Raender. Achtung beim Befuellen: Die sechzehn Schaubilder aus grafiken/ sind hier das falsche Format. Sie sind 700 Einheiten breit und beschriftet; auf Kartenbreite faellt ihre Beschriftung auf rund 5px. Die CI kennt dafuer eine eigene Form - Beitragsbild dunkel und unbeschriftet. */ .ef-karte__bild { margin: calc(var(--ef-luft-eng) * -1) calc(var(--ef-luft-eng) * -1) 0; background: var(--ef-grund-2); } .ef-karte__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .ef-karte__marke { font-size: var(--ef-s-mikro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ef-text-schwach); } .ef-karte__text { font-size: var(--ef-s-klein); color: var(--ef-text-leise); } .ef-karte__mehr { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; } /* Der Weiterverweis sinkt auf den Kartenboden, damit die Links einer Reihe auf einer Hoehe stehen. Die Karte ist eine Flexspalte, also erledigt margin-top:auto das - aber nur an dem Element, das WIRKLICH Flexkind ist. Im Bestand steckt der Link in einem
, und die Regel oben sass am darin: sie schob den Link innerhalb seines Kaestchens nach unten und das Kaestchen blieb, wo der Text aufhoerte. Deshalb hier das Kaestchen selbst - und nur, wenn wirklich ein Verweis drin steckt. Eine Karte, die mit ihrem Text endet, soll den Text nicht an den Boden schieben und eine Luecke in der Mitte lassen. */ .ef-karte > :last-child:has(.ef-karte__mehr) { margin-top: auto; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-karte { background: var(--ef-navy-tief); border-color: var(--ef-linie-dunkel); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-karte__text { color: var(--ef-auf-dunkel-leise); } /* -- Tafel: ein hervorgehobener Block, kein Raster ---------------------- */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-abschluss) .ef-tafel { background: rgba(255, 255, 255, .05); border-color: var(--ef-linie-dunkel); border-left-color: var(--ef-rot-signal); } /* Eine Tafel ist eine HERVORHEBUNG - sie muss sich von der Seite abheben. Bis zum 10.09.2026 war sie weiss auf weiss mit einer Haarlinie und einem roten Strich links, ohne Rundung. Auf der Portfolio-Seite trug genau so eine Tafel das Ergebnis des Formats - also das, wofuer der Kunde zahlt - und Jonas' Urteil war: "geht total unter". Zu Recht: ein Randstrich ist die Form einer Fussnote, nicht die eines Ergebnisses. Jetzt getoente Flaeche, Hausradius, dasselbe Polster wie eine Karte. Der rote Strich bleibt - er sagt weiterhin, wo der Block anfaengt. */ .ef-tafel { margin-top: var(--ef-luft-mit); padding: var(--ef-luft-eng) var(--ef-luft-mit); border: 1px solid var(--ef-linie); border-left: 3px solid var(--ef-rot); border-radius: var(--ef-r); background: var(--ef-grund); } /* Ein Tafeltitel ist eine Ueberschrift, auch wenn er im Bestand als

steht. Ohne Rang las sich "Verantwortung im Mandat" wie der erste Listenpunkt: gleiche Groesse, gleiche Staerke, gleiche Farbe. */ .ef-tafel__titel { margin-top: .75rem; font-family: var(--ef-display); font-size: var(--ef-s-basis); font-weight: 700; line-height: 1.35; color: var(--ef-navy); } .ef-tafel > .ef-tafel__titel:first-child { margin-top: 0; } /* Eine Tafel IN einer Karte ist keine zweite Tafel, sondern eine Zeile. Im Kopf der Projektleitungsseite sass eine 115px hohe Tafel mit 36px Polsterung in einer Karte - fuer einen einzigen Verweis auf ein PDF. Kasten im Kasten im Band. Hier wird sie flach: der Akzentstrich bleibt, das Gehaeuse verschwindet. */ .ef-karte > .ef-tafel, .ef-passung__feld > .ef-tafel { margin-top: var(--ef-luft-eng); padding: .2rem 0 .2rem 1rem; border: 0; border-left: 3px solid var(--ef-rot); border-radius: 0; background: none; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-karte > .ef-tafel { background: none; border-left-color: var(--ef-rot-signal); } /* Eine Tafel, in der ein Download steckt, ist ein Knopf und kein Einschub. Im Bestand liegen dort ZWEI Verweise auf dieselbe PDF - einer mit dem Text, einer mit dem Pfeilzeichen und dem download-Attribut. Untereinander gestapelt hinter einem Akzentstrich sah das aus wie ein Zitat, unter dem jemand ein Symbol vergessen hat. Nebeneinander in einem Rahmen ist es das, was es ist: eine Handlung. Sie steht nicht auf voller Kartenbreite - ein Knopf ist so breit wie seine Beschriftung, sonst wird aus der Handlung eine Flaeche. */ .ef-karte > .ef-tafel:has(a[download]), .ef-tafel:has(> a[download]) { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; min-height: 46px; margin-top: var(--ef-luft-eng); padding: .6rem 1rem; border: 1px solid var(--ef-linie); border-left-width: 1px; border-radius: var(--ef-r-klein); background: var(--ef-flaeche); transition: border-color var(--ef-uebergang), background var(--ef-uebergang); } .ef-tafel:has(> a[download]) .ef-link { border-bottom: 0; font-weight: 600; } .ef-tafel:has(> a[download]) a[download] { display: inline-flex; align-items: center; color: var(--ef-rot); } .ef-tafel:has(> a[download]):hover { border-color: var(--ef-navy); background: var(--ef-grund-2); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-tafel:has(> a[download]) { border-color: var(--ef-linie-dunkel); background: rgba(255, 255, 255, .06); } /* Auf dunklem Grund dreht die Tafel mit, statt als weisser Kasten stehenzubleiben. Im Seitenkopf der Projektleitung sass eine Tafel mit vierzig Zeichen Inhalt als leuchtender Block im dunklen Auftakt - sie las sich wie etwas, das da vergessen wurde. Tabelle und Fallbeispiel bleiben helle Inseln: die tragen Daten, und Zahlenkolonnen wollen weissen Grund. Eine Tafel ist ein Einschub im Text und gehoert in die Farbwelt ihres Bandes. */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-tafel { background: rgba(255, 255, 255, .055); border-color: var(--ef-linie-dunkel); border-left-color: var(--ef-rot-signal); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-tafel :is(h1, h2, h3, h4, strong, b, .ef-tafel__titel) { color: #fff; } /* -- Liste: der Ersatz fuer Karten bei Aufzaehlungen -------------------- */ .ef-liste { margin-top: var(--ef-luft-mit); border-top: 1px solid var(--ef-linie); } .ef-liste__eintrag { display: grid; gap: .4rem 2.5rem; padding: var(--ef-luft-eng) 0; border-bottom: 1px solid var(--ef-linie-fein); } @media (min-width: 800px) { .ef-liste__eintrag { grid-template-columns: minmax(0, 21rem) 1fr; align-items: baseline; } } .ef-liste__eintrag > :is(h2, h3, h4) { font-size: var(--ef-s-basis); font-weight: 700; line-height: 1.4; letter-spacing: -.005em; color: var(--ef-text); } .ef-liste__eintrag > :is(p, div:not(:first-child)) { font-size: var(--ef-s-klein); color: var(--ef-text-leise); } /* -- Aufzaehlung mit Signalstrich --------------------------------------- */ .ef-punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; } .ef-punkte > * { position: relative; padding-left: 1.1rem; font-size: var(--ef-s-klein); line-height: 1.5; color: var(--ef-text-leise); } .ef-punkte > *::before { content: ""; position: absolute; left: 0; top: .66em; width: 7px; height: 1px; background: var(--ef-rot); opacity: .7; } /* -- Tabelle ------------------------------------------------------------- Der Kopf traegt EINE Behandlung fuer alle Wertspalten. Im Bestand standen dort vier Zellen in vier Behandlungen, und zwei Spaltentitel waren als Links in #7e2f3d auf #153b5b gesetzt - Kontrast 1,31:1, praktisch unlesbar (Befund G-05). */ .ef-tabelle-huelle { margin-top: var(--ef-luft-mit); border: 1px solid var(--ef-linie); background: var(--ef-flaeche); } .ef-tabelle { width: 100%; border-collapse: collapse; font-size: var(--ef-s-klein); font-variant-numeric: tabular-nums; } .ef-tabelle thead th { background: var(--ef-navy); color: #fff; text-align: left; vertical-align: bottom; padding: 1.15rem 1.25rem; font-family: var(--ef-display); font-weight: 700; font-size: var(--ef-s-klein); line-height: 1.3; letter-spacing: -.008em; border-left: 1px solid var(--ef-linie-dunkel); } .ef-tabelle thead th a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .ef-tabelle thead th a::after { content: " \2192"; color: var(--ef-rot-signal); } .ef-tabelle thead th:first-child { background: var(--ef-navy-tinte); border-left: 0; font-family: var(--ef-mono); font-weight: 600; font-size: var(--ef-s-mikro); letter-spacing: .08em; text-transform: uppercase; color: var(--ef-auf-dunkel-leise); } .ef-tabelle thead th.ef-hier { background: var(--ef-navy-tief); } .ef-hier__marke { display: block; font-family: var(--ef-mono); font-size: var(--ef-s-mikro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ef-rot-signal); margin-bottom: .45rem; } .ef-tabelle tbody th { text-align: left; vertical-align: top; padding: 1rem 1.25rem; font-family: var(--ef-mono); font-weight: 600; font-size: var(--ef-s-mikro); letter-spacing: .06em; text-transform: uppercase; color: var(--ef-text-schwach); background: var(--ef-flaeche); border-bottom: 1px solid var(--ef-linie-fein); white-space: nowrap; } .ef-tabelle tbody td { padding: 1rem 1.25rem; vertical-align: top; border-bottom: 1px solid var(--ef-linie-fein); color: var(--ef-text-leise); } .ef-tabelle tbody tr:last-child :is(th, td) { border-bottom: 0; } .ef-tabelle td.ef-dies { background: var(--ef-band); color: var(--ef-text); font-weight: 500; box-shadow: inset 1px 0 0 var(--ef-linie), inset -1px 0 0 var(--ef-linie); } /* Unter 900px stapelt die Tabelle zu beschrifteten Bloecken, statt in einen seitlichen Bildlauf gezwungen zu werden. Dafuer traegt jede Zelle ein data-spalte-Attribut. */ @media (max-width: 899px) { .ef-tabelle-huelle { border: 0; } .ef-tabelle, .ef-tabelle tbody, .ef-tabelle tbody tr, .ef-tabelle tbody th, .ef-tabelle tbody td { display: block; width: auto; } .ef-tabelle thead { display: none; } .ef-tabelle tbody tr { border: 1px solid var(--ef-linie); margin-bottom: .85rem; } .ef-tabelle tbody th { background: var(--ef-navy); color: #fff; border-bottom: 0; white-space: normal; padding: .7rem 1rem; } .ef-tabelle tbody td { display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: .15rem .85rem; padding: .7rem 1rem; } .ef-tabelle tbody td::before { content: attr(data-spalte); font-family: var(--ef-mono); font-size: var(--ef-s-mikro); letter-spacing: .06em; text-transform: uppercase; color: var(--ef-text-schwach); } .ef-tabelle td.ef-dies::before { color: var(--ef-rot); } .ef-tabelle tbody tr td:last-child { border-bottom: 0; } } /* -- Kennzahlen ---------------------------------------------------------- */ .ef-zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ef-linie); } @media (min-width: 820px) { .ef-zahlen { grid-template-columns: repeat(4, 1fr); } } .ef-zahl { background: var(--ef-flaeche); padding: 1.6rem 1.35rem; } .ef-zahl > b { display: block; font-family: var(--ef-display); font-weight: 800; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.035em; color: var(--ef-navy); font-variant-numeric: tabular-nums; margin-bottom: .5rem; } .ef-zahl > span { font-size: var(--ef-s-klein); line-height: 1.5; color: var(--ef-text-leise); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-zahlen { background: var(--ef-linie-dunkel); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-zahl { background: var(--ef-navy-tinte); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-zahl > b { color: #fff; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-zahl > span { color: var(--ef-auf-dunkel-leise); } /* -- Folge: eine echte Reihenfolge, deshalb Ziffern ---------------------- */ .ef-folge { display: grid; gap: 1px; margin-top: var(--ef-luft-mit); background: var(--ef-linie); border: 1px solid var(--ef-linie); } @media (min-width: 820px) { .ef-folge--3 { grid-template-columns: repeat(3, 1fr); } } .ef-stufe { background: var(--ef-flaeche); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; gap: .6rem; } .ef-stufe__nr { font-family: var(--ef-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.03em; color: var(--ef-rot); font-variant-numeric: tabular-nums; } .ef-stufe > :is(h3, h4) { font-size: var(--ef-s-basis); } .ef-stufe > :is(p, div:not([class])) { font-size: var(--ef-s-klein); color: var(--ef-text-leise); } /* -- Verweise auf andere Seiten ----------------------------------------- */ .ef-verweise { display: grid; gap: 1rem; margin-top: var(--ef-luft-mit); } @media (min-width: 800px) { .ef-verweise { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } /* auto-fit legt bei 1044px vier Spalten an. Bei fuenf Kacheln bliebe die fuenfte allein in der zweiten Reihe - dieselbe Unwucht, die Jonas schon bei den blauen Kaesten gestoert hat. Fuenf stehen 3 + 2. */ .ef-verweise:has(> :nth-child(5):last-child) { grid-template-columns: repeat(3, 1fr); } } .ef-verweis { display: flex; flex-direction: column; gap: .6rem; padding: var(--ef-luft-eng); background: var(--ef-flaeche); border: 1px solid var(--ef-linie); border-radius: var(--ef-r); text-decoration: none; transition: border-color var(--ef-uebergang), box-shadow var(--ef-uebergang); } /* Im Bestand gibt es die Kachel in zwei Fassungen: als , das alles umschliesst, und als

, in dem nur der Titel ein Link ist. In der zweiten Fassung ist die Kachel NICHT klickbar - man trifft nur die Titelzeile. Genau das war Jonas' Befund: "man erkennt nicht so schnell, dass es klickbare Kacheln sind". Sie waren es nicht. Die Flaeche darunter macht die ganze Kachel zum Ziel, ohne dass am Inhalt etwas geaendert wird. Sie liegt unter dem Text, damit Sie liegt UEBER dem Text - ein erster Anlauf legte sie darunter, und dann fing der Absatz die Klicks ab. Der Preis ist, dass sich der Text der Kachel nicht mehr markieren laesst; bei einem Teaser von zwei Zeilen ist das der bessere Tausch. */ .ef-verweis { position: relative; } .ef-verweis:not(a) .ef-verweis__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .ef-verweis:hover, .ef-verweis:has(a:hover), .ef-verweis:has(a:focus-visible) { border-color: var(--ef-navy); box-shadow: var(--ef-schatten); } .ef-verweis:has(a:focus-visible) { outline: 2px solid var(--ef-rot); outline-offset: 2px; } .ef-verweis__titel { font-family: var(--ef-display); font-weight: 700; font-size: var(--ef-s-basis); line-height: 1.35; color: var(--ef-navy); /* Der Pfeil steht HINTER dem Titel, nicht am aeusseren Rand der Kachel. Mit space-between stand er allein in der rechten Ecke und sah aus, als gehoere er zu nichts. */ display: flex; align-items: baseline; gap: .45rem; } /* Der Pfeil steht immer da - er ist das Zeichen, dass es weitergeht - und ruecht beim Ueberfahren eine Spur nach rechts. */ .ef-verweis__titel::after { content: "\2192"; flex: none; color: var(--ef-rot); font-weight: 400; transition: transform var(--ef-uebergang); } .ef-verweis:hover .ef-verweis__titel::after, .ef-verweis:has(a:hover) .ef-verweis__titel::after { transform: translateX(3px); } /* Der Titel traegt seine Linie erst beim Ueberfahren: sonst sieht es aus, als waere NUR die Titelzeile das Ziel. */ .ef-verweis .ef-verweis__titel .ef-link { border-bottom-color: transparent; } .ef-verweis:hover .ef-verweis__titel .ef-link, .ef-verweis:has(a:hover) .ef-verweis__titel .ef-link { border-bottom-color: var(--ef-rot); } /* Der Teasertext einer Kachel, egal wie er im Markup heisst. Bis zum 11.09.2026 hing sein Aussehen daran, ob jemand .ef-text gesetzt hatte: 16 Kacheln standen damit in Grau, 29 ohne sie in Navy - derselben Farbe wie die Ueberschrift darueber. Auf der Strategieseite standen beide Sorten untereinander, und genau das hat Jonas gesehen. Die Regel haengt jetzt am Ort (Kind einer Kachel), nicht an einer Klasse, die man vergessen kann. Groesse und Abstand bleiben, wie sie waren - 17px und 22px -, damit sich nur das aendert, was falsch war. */ .ef-verweis > p, .ef-verweis__text { color: var(--ef-text-leise); } /* -- Passung: wofuer etwas gemacht ist und wofuer nicht ----------------- */ .ef-passung { display: grid; gap: 1rem; margin-top: var(--ef-luft-mit); } @media (min-width: 760px) { .ef-passung { grid-template-columns: repeat(2, 1fr); } } .ef-passung__feld { padding: var(--ef-luft-eng); border: 1px solid var(--ef-linie-fein); border-radius: var(--ef-r); background: var(--ef-flaeche); } /* Der Titel des Feldes traegt im Bestand oft .ef-tafel__titel statt einer Ueberschrift. Die alte Regel griff nur auf h2/h3/h4 - deshalb fehlten auf der Interim-Seite Rang UND Vorzeichen, und "Verantwortung im Mandat" stand in derselben Groesse wie die Punkte darunter. */ .ef-passung__feld > :is(h2, h3, h4, .ef-tafel__titel) { margin-top: 0; font-family: var(--ef-display); font-size: var(--ef-s-basis); font-weight: 700; color: var(--ef-navy); display: flex; align-items: baseline; gap: .6rem; } .ef-passung__feld > :is(h2, h3, h4, .ef-tafel__titel)::before { font-family: var(--ef-mono); font-size: var(--ef-s-klein); font-weight: 600; flex: none; } /* Der Unterschied lag bisher in einer 3px-Linie: dunkelgruen gegen dunkelgrau. Nebeneinander sind das zwei dunkle Striche. Eine sehr leichte Tonung der Flaeche sagt es auf einen Blick, ohne laut zu werden - die Linie bleibt und traegt das Vorzeichen mit. */ .ef-passung__feld--gut { border-left: 3px solid var(--ef-erfolg); background: rgba(46, 90, 76, .04); } .ef-passung__feld--gut > :is(h2, h3, h4, .ef-tafel__titel)::before { content: "+"; color: var(--ef-erfolg); } .ef-passung__feld--nicht{ border-left: 3px solid var(--ef-text-schwach); background: var(--ef-grund); } .ef-passung__feld--nicht > :is(h2, h3, h4, .ef-tafel__titel)::before { content: "\2212"; color: var(--ef-text-schwach); } /* Eine Liste im Passungsfeld traegt im Bestand keine Klasse und bekam deshalb die Standardpunkte des Browsers - runde Aufzaehlungspunkte, die es sonst nirgends auf der Seite gibt. Sie bekommt hier dieselbe Figur wie .ef-punkte, nur im Vorzeichen des Feldes eingefaerbt. */ :is(.ef-passung__feld, .ef-tafel, .ef-karte) ul:not([class]) { list-style: none; padding-left: 0; display: grid; gap: .55rem; } :is(.ef-passung__feld, .ef-tafel, .ef-karte) ul:not([class]) > li { position: relative; padding-left: 1.15rem; font-size: var(--ef-s-klein); line-height: 1.55; color: var(--ef-text-leise); } :is(.ef-passung__feld, .ef-tafel, .ef-karte) ul:not([class]) > li::before { content: ""; position: absolute; left: 0; top: .68em; width: 8px; height: 1px; background: var(--ef-text-schwach); } .ef-passung__feld--gut ul:not([class]) > li::before { background: var(--ef-erfolg); } /* Die Karte war in dieser Liste nicht dabei - fuenf klassenlose
    in Karten trugen deshalb die runden Standardpunkte des Browsers, die einzigen auf der ganzen Website. Nebeneinander mit einer Karte, die ihre Punkte als Chips zeigt, sah das aus wie zwei Gestaltungswelten. */ .ef-passung__feld .ef-punkte, :is(.ef-passung__feld, .ef-tafel, .ef-karte) ul:not([class]) { margin-top: .9rem; } /* -- Beleg: Kennzahl mit Bedeutung -------------------------------------- */ /* Belege sind KENNZAHLEN - die Zahl ist der Gegenstand, alles andere erklaert sie. Bis zum 10.09.2026 stand sie auf var(--ef-s-h3), also 22px: der Groesse einer Kartenueberschrift. In einer Zelle, die auf einem breiten Schirm 800px misst, verschwindet das. Jonas' Urteil galt allen acht Bloecken auf sieben Seiten: "total lost - die kleinen Zahlen, der kleine Text, die grossen Kaestchen." Die Zahl steht jetzt auf 28 bis 44px und traegt die Zelle. Und vier Zellen stehen nebeneinander, ohne dass jemand eine Klasse setzen muss - im Bestand hatte KEINER der acht Bloecke die noetige --4, also standen ueberall vier Zellen im Zweierquadrat mit halbleeren Kaesten. */ .ef-belege { display: grid; gap: 1px; margin-top: var(--ef-luft-mit); background: var(--ef-linie); border: 1px solid var(--ef-linie); } @media (min-width: 700px) { .ef-belege { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .ef-belege--4, .ef-belege:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } .ef-belege:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } } .ef-belege > * { background: var(--ef-flaeche); } /* Kontaktformular: Eingabe und Mailvorschau nebeneinander. Jonas zur Kontaktseite: "zu viel Blauflaeche - geht nicht auf eine Seite, merkwuerdige Anordnung, man muss scrollen." Am 10.09.2026 nachgemessen: die Tafel stand in der rechten Spalte eines Zweispalts, 600px breit, und stapelte darin Formular (953px) und Mailvorschau (723px) - zusammen 1769px. Links daneben standen 267px Einleitung und 1500px Nichts. Die Vorschau zeigt die Mail, die beim Absenden entsteht. Sie gehoert neben das Formular, nicht 950px darunter - sonst sieht sie niemand beim Ausfuellen. Also: der Zweispalt wird zum Stapel, und die Tafel nimmt die ganze Bahn und teilt sie zwischen Eingabe und Vorschau. Die Regel haengt am INHALT (ein Formular mit Vorschau daneben), nicht an der Seite - eine zweite Seite mit demselben Baustein bekaeme dasselbe. */ @media (min-width: 1000px) { .ef-seite .ef-zweispalt:has(.ef-formular + .ef-mailvorschau) { grid-template-columns: minmax(0, 1fr); row-gap: var(--ef-luft-mit); } .ef-seite .ef-zweispalt:has(.ef-formular + .ef-mailvorschau) > .ef-tafel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ef-luft-mit); align-items: start; } /* Die Vorschau bleibt stehen, waehrend man das Formular hinunterfuellt. */ .ef-zweispalt:has(.ef-formular + .ef-mailvorschau) :is(.ef-formular, .ef-mailvorschau) { margin-top: 0; } .ef-zweispalt:has(.ef-formular + .ef-mailvorschau) .ef-mailvorschau { position: sticky; top: calc(var(--ef-kopfhoehe, 72px) + 1rem); } } .ef-beleg { background: var(--ef-flaeche); padding: var(--ef-luft-eng) 1.3rem var(--ef-luft-mit); } .ef-beleg__wert { display: block; font-family: var(--ef-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; color: var(--ef-navy); font-variant-numeric: tabular-nums; } /* Traegt der Block Woerter statt Zahlen - auf der Projektleitung stehen dort "Delivery & Governance" und "Kein PMO-Theater" -, bleibt es bei der Ueberschriftgroesse. Vierzig Pixel Anzeigeschrift brechen einen solchen Begriff auf drei Zeilen. */ .ef-belege--wort .ef-beleg__wert { font-size: var(--ef-s-h3); line-height: 1.25; letter-spacing: -.014em; } .ef-beleg__marke { display: block; font-family: var(--ef-body); font-size: var(--ef-s-mikro); letter-spacing: .07em; text-transform: uppercase; color: var(--ef-text-schwach); margin: .55rem 0 .45rem; } .ef-beleg__text { font-size: var(--ef-s-klein); color: var(--ef-text-leise); line-height: 1.5; } /* Nicht jeder Beleg hat beides. Auf Startseite und Profil steht der ganze Satz im Etikett und es gibt gar keinen Text darunter - "Jahre Verantwortung in IT-, Projekt-, Beratungs- und Fuehrungsrollen", 46 Zeichen, gesetzt in 11px Versalien mit .07em Sperrung. So liest das niemand; genau das meinte Jonas mit "der kleine Text" (10.09.2026). Fehlt der Text, ist das Etikett kein Etikett mehr, sondern die Erklaerung - und wird auch so gesetzt. Keine Inhaltsaenderung, nur die Form folgt dem, was tatsaechlich dasteht. */ .ef-beleg:not(:has(.ef-beleg__text)) .ef-beleg__marke { font-size: var(--ef-s-klein); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ef-text-leise); line-height: 1.5; margin: .5rem 0 0; } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-beleg__wert { color: #fff; } /* -- Praxisfall --------------------------------------------------------- Auf fuenf Seiten. Traegt Umfeldzeile, Titel und beschriftete Felder (Umfang, Aufgabe, Ergebnis). Kein Kartenraster - ein Fall ist ein zusammenhaengender Beleg, kein Element unter gleichen. */ .ef-faelle { display: grid; gap: var(--ef-luft-mit); margin-top: var(--ef-luft-mit); } .ef-fall { border: 1px solid var(--ef-linie); border-left: 3px solid var(--ef-navy); border-radius: var(--ef-r); background: var(--ef-flaeche); padding: clamp(1.35rem, 3vw, 2rem); } /* -- Ergebnis einer Fallkarte ------------------------------------------- Es sitzt am FUSS der Karte, nicht dort, wo der Text zufaellig aufhoert. Damit stehen die Ergebnisse einer Reihe auf einer Hoehe - und das Loch, das eine kuerzere Karte sonst unten laesst, wandert nach oben, wo es als Luft liest statt als fehlender Inhalt. Genau das war Jonas' Eindruck: "teamleitung hat kein ergebnis". .ef-karte davor, weil Abschnitt 7c die Aussenraender der Kartenkinder auf null setzt - margin-top:auto braucht mehr Gewicht als das. */ .ef-karte > .ef-fall__ergebnis { margin-top: auto; padding-top: var(--ef-luft-eng); border-top: 1px solid var(--ef-linie-fein); font-size: var(--ef-s-klein); line-height: 1.6; color: var(--ef-text-leise); } .ef-fall__ergebnis > strong:first-child { color: var(--ef-navy); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-karte > .ef-fall__ergebnis { border-top-color: var(--ef-linie-dunkel); } .ef-fall__meta { /* "Internationaler Maschinenbau · ca. 5.000 Anwender · Team rund 30" - sechzig Zeichen in 13px Versalien mit Sperrung liest niemand. Die Zeile ist Auskunft, kein Etikett. (Audit 10.09.2026) */ font-family: var(--ef-body); font-size: var(--ef-s-klein); color: var(--ef-text-schwach); padding-bottom: .9rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--ef-linie-fein); } .ef-fall__raster { display: grid; gap: var(--ef-luft-eng) 3rem; } @media (min-width: 860px) { .ef-fall__raster { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; } } .ef-fall__feld + .ef-fall__feld { margin-top: var(--ef-luft-eng); } .ef-fall__marke { display: block; font-family: var(--ef-body); font-size: var(--ef-s-mikro); letter-spacing: .07em; text-transform: uppercase; color: var(--ef-rot); margin-bottom: .4rem; } /* -- Zitat --------------------------------------------------------------- */ .ef-zitat { border-left: 2px solid var(--ef-rot); padding-left: clamp(1rem, 2.5vw, 1.75rem); font-family: var(--ef-display); font-weight: 600; letter-spacing: -.018em; font-size: var(--ef-s-h3); line-height: 1.35; color: var(--ef-navy); max-width: 34ch; margin-top: var(--ef-luft-mit); } /* -- Kleinigkeiten ------------------------------------------------------- */ .ef-nowrap { white-space: nowrap; } .ef-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ef-rot); flex: none; margin-right: .5rem; } /* Dunkelfassungen der Bausteine mit heller Flaeche. Ohne sie steht ein weisser Belegkasten im dunklen Band und bekommt von der Kontextregel weissen Text: 1:1. */ :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-belege, .ef-folge, .ef-faelle) { background: var(--ef-linie-dunkel); border-color: var(--ef-linie-dunkel); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) :is(.ef-beleg, .ef-stufe) { background: var(--ef-navy-tief); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-liste { border-top-color: var(--ef-linie-dunkel); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-liste__eintrag { border-bottom-color: var(--ef-linie-dunkel); } :is(.ef-band--dunkel, .ef-band--tinte, .ef-seitenkopf, .ef-auftakt, .ef-abschluss) .ef-liste__eintrag > :is(h2, h3, h4) { color: #fff; } /* -- Steckbrief: Name-Wert-Paare ---------------------------------------- */ .ef-steckbrief { display: grid; margin-top: var(--ef-luft-mit); border-top: 1px solid var(--ef-linie); } .ef-steckbrief > * { display: grid; gap: .2rem 2rem; padding: .9rem 0; border-bottom: 1px solid var(--ef-linie-fein); } @media (min-width: 620px) { .ef-steckbrief > * { grid-template-columns: 11rem 1fr; align-items: baseline; } } .ef-steckbrief dt { font-size: var(--ef-s-mikro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ef-navy); } .ef-steckbrief dd { margin: 0; font-size: var(--ef-s-klein); color: var(--ef-text-leise); } /* -- Abschluss: der letzte Block jeder Seite ---------------------------- */ .ef-abschluss { background: var(--ef-navy-tief); color: #fff; } .ef-abschluss :is(h1, h2, h3) { color: #fff; } .ef-abschluss .ef-lead { color: var(--ef-auf-dunkel-leise); } .ef-abschluss .ef-marke { color: var(--ef-rot-signal); } /* -- Erreichbarkeitspunkt ------------------------------------------------ Ein Zustand, kein Schmuck: der Punkt sagt "jemand ist da". Deshalb traegt er auch Text - ein Punkt allein waere eine Farbaussage, und die liest niemand mit Rotsehschwaeche. */ .ef-erreichbar { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--ef-body); font-size: var(--ef-s-mikro); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--ef-auf-dunkel-leise); } .ef-erreichbar::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; flex: none; background: #6fbf9a; box-shadow: 0 0 0 3px rgba(111, 191, 154, .22); } /* -- Zweispalt: Begleittext links, Werkzeug rechts ----------------------- Anders als das alte efficas-intro-grid steht hier KEINE Ueberschrift in der schmalen Spalte - beide Spalten tragen eigenstaendige Bloecke, und die schmale faellt nie unter 300px. */ .ef-zweispalt { display: grid; gap: var(--ef-luft-mit); align-items: start; margin-top: var(--ef-luft-mit); } @media (min-width: 900px) { .ef-zweispalt { grid-template-columns: minmax(18.75rem, .8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 3vw, 2.75rem); } } /* == 5b FORMULAR, BUCHUNG, MAILVORSCHAU ================================= Diese Bausteine kommen nur auf der Kontaktseite vor. Sie standen dort als 26 KB Inline-CSS mit eigenen Farben, eigenen Radien (22px, 18px, 16px, 12px, 999px) und eigenen Schatten - eine kleine Parallelwelt. Hier tragen sie dieselben Marken wie alles andere: ein Radius, ein Schattensatz, die drei Abstandsstufen. Ein Eingabefeld ist ein Tap-Ziel wie ein Knopf: min-height 46px, wie .ef-knopf. Und der Fokusring ist sichtbar und nicht wegoptimiert - er ist fuer Tastaturbedienung die einzige Ortsangabe. */ .ef-formular { display: grid; gap: var(--ef-luft-eng); margin-top: var(--ef-luft-mit); } .ef-formular__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; } @media (max-width: 620px) { .ef-formular__paar { grid-template-columns: 1fr; } } .ef-feld { display: grid; gap: .5rem; min-width: 0; } .ef-feld > label, .ef-feldgruppe > legend { font-family: var(--ef-body); font-size: var(--ef-s-klein); font-weight: 600; line-height: 1.4; color: var(--ef-text); padding: 0; } .ef-feld > :is(input, select, textarea) { width: 100%; min-width: 0; min-height: 46px; appearance: none; -webkit-appearance: none; border: 1px solid var(--ef-linie); border-radius: var(--ef-r-klein); background: var(--ef-flaeche); color: var(--ef-text); font-family: var(--ef-body); font-size: var(--ef-s-basis); line-height: 1.45; padding: .7rem .85rem; transition: border-color var(--ef-uebergang), box-shadow var(--ef-uebergang); } /* Der Pfeil des Auswahlfeldes wird mitgeliefert, weil appearance:none ihn entfernt - sonst sieht ein