/* ADA Relaunch 2026 — ein Stylesheet für alle Seiten.
Haltung: decode.agency. Farbe: unbunt plus Strom als einziger Akzent. */
/* Schriften — mitgeliefert, kein externer Request */
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Switzer"; src:url("fonts/switzer-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
/* Tokens */
:root{
--weiss: #FFFFFF;
--papier: #DEDEDE;
--linie: #858585;
/* Weiche Trennlinie für gestapelte Zeilen. decode setzt in seiner FAQ
#262626 auf 30 % Deckkraft — auf Weiß ergibt das genau diesen Wert.
Acht Linien untereinander wirken in --linie sonst wie ein Gitter. */
--linie-leicht: #BEBEBE;
--grau: #5C6675;
--ink: #262626;
--strom: #2A4BFB;
--rahmen: 1240px;
--spalte: 300px;
/* Linke Spalte zweispaltiger Inhaltszeilen. 300 px reichen für deutsche
Wörter nicht: "Wozu die Zahlen gelten" braucht 416 px, "Umsetzungsstark"
292 px. 380 px ist die Spaltenbreite des Kartenrasters — die rechte
Spalte beginnt damit auf 545 und steht bündig zur zweiten Kartenspalte
(die 542 aus der Übergabe-Tabelle). */
--label: 380px;
--rinne: 50px;
--luft: 40px;
--uebergang: 200ms cubic-bezier(.36, 1, .42, 1);
color-scheme: light;
}
*{ margin:0; padding:0; box-sizing:border-box; }
strong, b{ font-weight:600; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
background:var(--weiss);
color:var(--ink);
font-family:Switzer, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:400;
font-size:20px;
line-height:1.4;
letter-spacing:normal;
-webkit-font-smoothing:antialiased;
hyphens:manual;
overflow-wrap:break-word;
}
/* Raster */
.rahmen{ width:min(var(--rahmen), 100% - 2*var(--luft)); margin-inline:auto; }
.fliess{ max-width:620px; }
.fliess.gross{ font-size:20px; }
/* Typo-Leiter */
.t-riesig{ font-weight:500; font-size:min(150px, 12vw); line-height:1.13; letter-spacing:normal; }
/* Sektionsüberschrift nach decode-Art: groß, links, allein auf der Zeile */
/* Versalien-Überschrift wie auf decodes Kontaktseite */
.t-versal{ font-weight:500; font-size:min(72px, 5.8vw); line-height:1.11; letter-spacing:normal; text-transform:uppercase; }
.anlauf{ margin-top:64px; margin-left:var(--spalte); max-width:940px; font-weight:500; font-size:36px; line-height:1.22; }
.anlauf p + p{ margin-top:20px; }
/* Übergang zum Schreibblock. Vorher zwei Striche links und rechts des
Textes — die eröffneten einen Abschnitt, und das tut bei uns die Zeile
selbst. */
/* Die Kontaktseite ist keine Info-Seite, sondern die Aufforderung selbst
(Laurin am 02.09.). Deshalb kein Hero im Format der anderen Seiten: die
Überschrift ist kleiner als überall sonst und der Block deutlich flacher,
damit die drei Gesichter und ihre Knöpfe früh im Bild stehen. */
.rahmen.anruf{ padding-top:80px; padding-bottom:64px; }
.t-anruf{ font-weight:500; font-size:min(64px, 5.2vw); line-height:1.1; letter-spacing:normal; }
.anruf-satz{ margin-top:32px; max-width:820px; font-weight:500; font-size:28px; line-height:1.32;
text-wrap:balance; }
.mittentrenner{ text-align:center; margin-block:64px; font-size:19px; }
/* Der Schreibblock an der Stelle, an der decode sein Formular hat */
/* Linksbündig wie der Rest der Seite. Zentriert stand der Block quer zum
Alignment aller anderen Blöcke — Laurin am 02.09.: „passt noch nicht ins
Design". Der Mittentrenner darüber ist bei der Gelegenheit entfallen. */
.schreibblock{ padding-bottom:140px; }
.schreibblock .ansage{ max-width:820px; font-weight:500; font-size:36px; line-height:1.22; }
.schreibblock .grossknopf{ margin-top:56px; }
.schreibblock .hinweis{ margin-top:32px; font-size:15px; color:var(--grau); }
.schreibblock .hinweis + .hinweis{ margin-top:8px; }
.knopf.gross{ padding:20px 40px; font-size:19px; }
.t-gross{ font-weight:500; font-size:min(72px, 5.8vw); line-height:1.11; letter-spacing:normal; }
.formel{ font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
.formel sup{ font-size:0.62em; vertical-align:super; line-height:0; }
/* Start- und Unterseiten-Hero stehen seit dem 02.09. auf demselben Maß: 150 px,
Laurins Mittelding zwischen den bisherigen 180 (Start) und 120 (Unterseiten).
Damit springt die Größe beim Seitenwechsel nicht mehr. */
.t-mega{ font-weight:500; font-size:min(150px, 12vw); line-height:1.13; letter-spacing:normal; }
.t-xl{ font-weight:500; font-size:min(72px, 5.8vw); line-height:1.11; letter-spacing:normal; }
.t-l{ font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
.t-m{ font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
.t-s{ font-weight:500; font-size:24px; line-height:1.3; letter-spacing:normal; }
.t-klein{ font-size:18px; line-height:1.4; letter-spacing:normal; }
.grau{ color:var(--grau); }
.leise{ color:var(--grau); }
.etikett{ font-size:18px; line-height:1.4; letter-spacing:normal; color:var(--grau); font-weight:400; }
/* Überschrift der linken Spalte in zweispaltigen Blöcken — decode setzt hier 36px/500 schwarz */
.spaltentitel{ font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
/* Verweise — unterstrichener Text, Strom im Hover */
a{ color:inherit; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
transition:text-decoration-thickness var(--uebergang), color var(--uebergang); }
a:focus-visible{ outline:2px solid var(--strom); outline-offset:3px; border-radius:0; }
/* Knopf — decodes einzige gerundete Form, nur für den Terminruf */
.knopf{
display:inline-flex; align-items:center; gap:10px;
padding:14px 26px; border:1px solid var(--ink); border-radius:100px;
font-size:16px; font-weight:500; text-decoration:none;
transition:background-color var(--uebergang), color var(--uebergang), border-color var(--uebergang);
}
.knopf:focus-visible{ outline:2px solid var(--strom); outline-offset:3px; }
/* Der Pfeil-Verweis — decodes Handlungspunkt */
.pfeil{ display:inline-block; }
.pfeil .spitze{ display:inline-block; transition:transform var(--uebergang); }
/* ── Laufband ────────────────────────────────────────────────────────────
Die einzige durchgehend blaue Fläche der Seite. Reines CSS, kein
JavaScript: zwei identische Hälften, die Spur wandert um genau die halbe
Breite, dadurch läuft es nahtlos.
Weiß auf Strom ergibt 6,0:1 — WCAG AA.
Barrierefreiheit: Dauerbewegung ist nach WCAG 2.2.2 heikel. Der Halteknopf
ist am 02.09. auf Laurins Ansage wieder entfallen; es bleiben der Halt bei
Tastaturfokus und prefers-reduced-motion, unter dem die Spur gar nicht erst
läuft. Das ist bewusst weniger, als 2.2.2 verlangt. Die sichtbare Spur ist
aria-hidden, weil der Text doppelt darin steht; für Vorleseprogramme
steht er einmal daneben. */
.laufband{ position:relative; background:var(--strom); color:var(--weiss); overflow:hidden; }
.laufband-ziel{ display:block; color:inherit; text-decoration:none; padding-block:24px; }
.laufband .spur{ display:flex; width:max-content; animation:laufen 44s linear infinite; }
/* Der Abstand zwischen zwei Durchläufen steckt hier, nicht in einem
Trennzeichen im Text (Laurin am 02.09.). */
.laufband .spur span{ padding-right:180px; white-space:nowrap;
font-weight:500; font-size:36px; line-height:1.3; }
/* Von links nach rechts, wie Laurin es wollte: die Spur startet um eine
halbe Breite versetzt und wandert zurück auf null. Für die andere
Richtung die beiden Werte tauschen. */
@keyframes laufen{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
/* Nur der Tastaturfokus hält an — bei Zeigerkontakt läuft das Band weiter
(Laurin am 02.09.: es soll durchlaufen und nicht stehenbleiben). */
.laufband-ziel:focus-visible .spur{ animation-play-state:paused; }
@media (hover: hover){
/* Der Satz bleibt weiss. Ohne diese Zeile greift weiter unten
a:hover{ color:var(--strom) } auch hier — und faerbt die Schrift in
genau das Blau, auf dem sie steht. Das Band war dann leer (Laurin,
05.09.). Die Unterstreichung allein zeigt schon, dass es ein Verweis
ist. */
.laufband-ziel:hover{ color:var(--weiss); }
.laufband:hover .spur span{ text-decoration:underline; text-underline-offset:6px;
text-decoration-thickness:2px; }
}
.laufband-ziel:focus-visible{ outline:3px solid var(--ink); outline-offset:-3px; }
/* Nur für Vorleseprogramme */
.nurlesen{ position:absolute; width:1px; height:1px; overflow:hidden;
clip-path:inset(50%); white-space:nowrap; }
/* ── Nachtseite ──────────────────────────────────────────────────────────
Eine ganze Seite auf der dunklen Fläche. Nachgemessen an decodes
/life-inside-decode/ und /about-us/ am 30.08.: dort ist nicht der Hero
dunkel, sondern die Seite von der Kopfzeile bis zum Fuß — #262626
durchgehend, weiße Schrift, gleiche Schriftgrade und gleiches Raster wie
auf den hellen Seiten. Zum Atmen liegt eine Bahn in #DEDEDE darin
(decode: 1422 von 4741 px auf /about-us/).
Umgesetzt über Marken, nicht über neue Regeln: die Seite tauscht Grund
und Schrift und schreibt --grau und --linie um. Alles Weitere erbt.
Umgekehrte Bedeutungen für --weiss oder --ink gibt es bewusst nicht —
sonst würden die Oberflächenkärtchen mitkippen. */
body.nacht{ background:var(--ink); color:var(--weiss);
--grau:#B4B4B4; /* auf #262626 6,2:1 — dasselbe wie .dunkel */
--linie:#5A5A5A; --linie-leicht:#3E3E3E; }
body.nacht .marke{ color:var(--weiss); }
body.nacht .knopf{ border-color:var(--weiss); }
body.nacht .sprung{ background:var(--weiss); color:var(--ink); }
body.nacht a:focus-visible, body.nacht .knopf:focus-visible,
body.nacht summary:focus-visible{ outline-color:#9FB0FF; }
/* Die helle Bahn. Auf der Nachtseite dreht sich der dunkle Zwischenblock
um — er ist hier das Gegenlicht. Der Schlussblock schließt sich an, damit
beide eine Bahn ergeben statt zweier Streifen. */
body.nacht .dunkel, body.nacht .schlussbahn{ background:var(--papier); color:var(--ink);
--grau:#5C6675; --linie:#858585; }
body.nacht .dunkel a, body.nacht .schlussbahn a{ color:var(--ink); }
body.nacht .dunkel .grau, body.nacht .dunkel .etikett{ color:var(--grau); }
body.nacht .dunkel + .schlussbahn .schluss{ padding-top:40px; }
/* Sprunglink */
.sprung{ position:absolute; left:-9999px; background:var(--weiss); padding:12px 16px; z-index:10; }
.sprung:focus-visible{ left:24px; top:24px; }
#inhalt:focus{ outline:none; }
/* Kopf */
.kopf{ position:relative; z-index:5; }
.kopf .zeile{ display:flex; align-items:center; justify-content:space-between; padding-block:48px; }
.marke{ display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); }
.marke .zeichen{ display:block; height:26px; width:auto; }
.navi{ display:flex; align-items:center; gap:36px; }
.navi a{ font-size:18px; text-decoration:none; }
.navi a[aria-current="page"]{ color:var(--grau); text-decoration:underline; text-underline-offset:6px; }
.navi .reden{ text-decoration:none; }
.schalter, .menueknopf{ display:none; }
/* Abschnitte — eine Überschrift ganz links, darunter eingerückt der Inhalt */
.block{ padding-top:120px; padding-bottom:160px; }
.block-schmal{ padding-top:80px; padding-bottom:100px; }
/* Auf den Einsatzfeld-Seiten stießen "Wie es heute läuft" und "Was beim
Menschen bleibt" an den Textblock — 300 px ohne Rinne reichen für diese
Titel nicht. Gleiche Ursache und gleiche Lösung wie bei .leistung,
.stelle und .text-block. */
.kopfzeile{ display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--rinne); padding-top:40px; }
.einleitung{ margin-top:56px; max-width:740px; font-weight:500; font-size:36px; line-height:1.22; }
/* Steht .einleitung als Hülle um mehrere Absätze (Leistungsseite), erbten
die Kindabsätze bisher die 36 px des Vorspanns — sechs Absätze, zusammen
1605 px hoch. .fliess ist Fließtext und gehört auf 20 px/400. Die Formel
darüber bleibt groß, sie ist der Vorspann. */
.einleitung .fliess{ font-weight:400; font-size:20px; line-height:1.4; }
/* Der große Auftritt */
.rahmen.gross{ padding-top:100px; padding-bottom:140px; }
/* text-wrap:balance gleicht die Zeilenlängen aus. Ohne das brach der
Hero-Satz auf 897 / 917 / 98 px um — in der dritten Zeile standen zwei
Wörter allein. Betrifft nur kurze Blöcke, der Browser deckelt es selbst. */
.gross .satz, .gross .fuerwen, .anlauf, .einleitung, .schreibblock .ansage{ text-wrap:balance; }
/* Verhindert einzelne Wörter in der letzten Zeile, wo der Browser es kann.
Ältere Browser ignorieren den Wert, der Satz bleibt dort wie bisher. */
.fliess, .aussage .weiter, .karte p, .fall .fazit, .stelle p, .antwort p{ text-wrap:pretty; }
.gross .satz{ margin-top:72px; margin-left:var(--spalte); max-width:940px; font-weight:500; font-size:36px; line-height:1.22; }
.gross .fuerwen{ margin-top:32px; margin-left:var(--spalte); max-width:940px; font-weight:500; font-size:36px; line-height:1.22; }
.gross .zweitetuer{ margin-top:60px; margin-left:var(--spalte); max-width:940px; color:var(--grau); font-size:17px; }
.gross .handlung{ margin-top:72px; margin-left:var(--spalte); display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.gross .handlung .ruf{ font-weight:500; font-size:min(72px, 5.8vw); line-height:1.11; letter-spacing:normal; }
.gesichter{ display:flex; align-items:center; gap:16px; }
/* Porträt-Plakette. Die Regel hing vorher an .gesichter und .person; im
Schlussblock (.schluss .dazu) traf sie keine von beiden, weshalb die Bilder
dort auf ihre Naturgröße 480 x 480 sprangen und auf allen siebzehn Seiten
das „Let's talk" erschlugen. Jetzt steht die Größe an der Klasse selbst. */
.kopfbild{ width:72px; height:72px; object-fit:cover; display:block; filter:grayscale(1); background:var(--papier); }
.gesichter .wer{ font-size:18px; font-weight:500; line-height:1.4; max-width:240px; }
/* Belegband — zwei Projekte in Zahlen */
.band{ display:grid; gap:16px; margin-top:32px; max-width:760px; }
.band > div{ display:grid; grid-template-columns:minmax(180px, max-content) 1fr; gap:24px;
padding-top:16px; border-top:2px solid var(--linie); }
.band > div:first-child{ border-top:0; }
.band dt{ font-weight:500; }
.band dd{ color:var(--grau); }
.angebot-referenz{ margin-top:80px; max-width:720px; font-size:19px; }
/* Was uns unterscheidet — drei Argumente nebeneinander */
.karten{ display:grid; grid-template-columns:repeat(3, 1fr); gap:50px; margin-top:64px; }
.karte{ }
.karte h3{ margin-bottom:20px; }
/* Leistungen — links steht das Wort, sonst nichts */
.leistungsliste{ margin-top:80px; }
/* Die erste Zeile eröffnet die Liste mit dem Wort, nicht mit einem Strich.
Sonst klebt die Linie unmittelbar unter dem Absatz davor und wirkt, als
gehöre sie noch zu ihm. Die verbleibenden Linien trennen die drei Zeilen
voneinander — das ist ihre Aufgabe. */
.leistung:first-of-type{ border-top:0; }
.leistung{ display:grid; grid-template-columns:var(--label) 1fr auto; column-gap:var(--rinne); padding-top:56px; padding-bottom:56px; border-top:2px solid var(--linie); align-items:start; }
/* Die Zeitangabe steht oben rechts auf einer Linie mit dem Wort und ist blau
(Laurin am 02.09.). Sie liegt im Quelltext hinter dem Text und wird über
Zeile und Spalte nach vorn geholt — Vorleseprogramme hören sie also zuletzt,
und das ist richtig: sie ergänzt die Leistung, sie führt sie nicht ein.
Strom auf Weiß ergibt 6,0:1. */
.leistung .zeit{ grid-column:3; grid-row:1; max-width:220px; text-align:right;
color:var(--strom); font-size:17px; line-height:1.35; }
.leistung .fliess.gross{ margin-top:0; }
.leistung .wort{ font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
.leistung .handlung-name{ margin-top:8px; font-size:20px; }
.leistung .name{ margin-bottom:16px; }
/* Die Preiszeile. Der Betrag trägt, die Bedingungen laufen im Satz mit —
kein graues Kleingedrucktes, das ist Laurins Regel. */
/* Preistafel (Laurin am 02.09.). Drei Stufen nebeneinander, die Zahl trägt
die Zeile. Unbunt — das Blau dieser Seite gehört dem Prinzip-Schaubild;
zwei blaue Ereignisse auf einer Seite wären eins zu viel. */
.preistafel{ display:grid; grid-template-columns:repeat(3, 1fr); gap:0 40px;
margin-top:40px; max-width:820px; }
.pt-stufe{ padding-top:20px; border-top:2px solid var(--ink); }
.pt-zahl{ font-weight:500; font-size:46px; line-height:1.1; letter-spacing:normal; }
.pt-was{ margin-top:10px; font-size:18px; line-height:1.4; }
.leistung .bausteine{ margin-top:40px; display:grid; gap:28px; max-width:660px; }
.leistung .baustein dt{ font-size:24px; font-weight:500; }
.leistung .baustein dt a{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.leistung .baustein dd{ margin-top:6px; }
/* Referenzen auf dunkler Fläche */
.dunkel{ background:var(--ink); color:var(--weiss); }
/* .text-block hat unten keine Polsterung, damit mehrere hintereinander
eng stehen. Folgt danach die dunkle Fläche, klebte sie mit 0 px an. */
.text-block + .dunkel{ margin-top:140px; }
.dunkel .grau{ color:#B4B4B4; }
.dunkel a{ color:var(--weiss); }
.dunkel a:focus-visible{ outline-color:#9FB0FF; }
.dunkel .etikett{ color:#B4B4B4; }
.faelle{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:90px 50px; margin-top:80px; }
.fall{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; }
.fall .titel{ display:block; margin-bottom:24px; }
.fall .fazit{ max-width:520px; }
.fall .meta{ display:grid; grid-template-columns:1fr 1fr; gap:24px 40px; padding-top:40px; align-self:start; }
.fall .meta div{ font-size:15px; line-height:1.45; }
.fall .meta dt{ font-weight:500; margin-bottom:4px; }
.fall .meta dd{ color:#B4B4B4; }
/* Einsatzfelder — Bild mit Oberflächenausschnitt */
.felder{ display:grid; grid-template-columns:1fr 1fr; gap:90px 50px; margin-top:72px; }
.feld{ display:block; }
/* Fünf Felder in zwei Spalten: das letzte nimmt die ganze Reihe und dreht sich um */
.feld:last-child{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
/* Bezugsrahmen für den Oberflächenausschnitt — auch außerhalb von .feld (Einsatzfeld-Seiten) */
.bild{ position:relative; }
.feld .bild{ display:block; text-decoration:none; }
/* Das Einsatzfeld-Bild. Quadratisch wie die Kachel, damit object-fit
nichts wegschneidet. Ohne Graustufen-Filter — die Bilder sind bereits
in der Datei entsättigt und auf einen gemeinsamen Tonwertumfang gebracht. */
/* height:auto ist nötig — das height-Attribut am ![]()
wirkt als
Darstellungshinweis und würde die aspect-ratio sonst überstimmen. */
.feldbild{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; background:var(--papier); }
.feld a.bild:focus-visible{ outline:2px solid var(--strom); outline-offset:4px; }
.platzhalter{ aspect-ratio:1/1; background:var(--papier); border:0;
display:flex; align-items:center; justify-content:center; font-size:15px; color:#5A5A5A; }
.feld .worte{ margin-top:28px; }
.feld h3{ margin-top:8px; }
.feld:last-child .worte{ margin-top:0; }
.feld .heute{ margin-top:20px; }
.feld .mit-ada{ margin-top:12px; }
/* ── Balken am Bild ─────────────────────────────────────────────────────
decodes l-shape. Nachgemessen an /about-us/ am 30.08.: ein Rechteck,
immer 100 px hoch, 290 px breit (400 mit .fb-gross), bündig zu einer
senkrechten Bildkante und genau zur Hälfte über die waagerechte Kante
hinausragend — halb auf dem Bild, halb daneben. Gerendert misst decode
110/319/440, weil es Breiten mit seinem --scale: 1.1 multipliziert; das
sind dieselben Entwurfswerte.
decode setzt die Form in vier Tönen: sein Blau, ein helles Grau,
Schwarz und ein Gold. Bei uns nur unbunt — das Blau bleibt der
dargestellten Oberfläche vorbehalten, sonst stünden zwei Akzente auf
demselben Bild.
Gegengeprüft am 30.08.: decode setzt die Form NIE auf ein Bild, das
schon ein Oberflächenkärtchen trägt — jeder Formblock dort enthält genau
ein Bild und sonst nichts. Deshalb steht der Balken bei uns nur auf dem
einen freien Foto (Startseite, "Wir bleiben dran") und nicht auf den
Einsatzfeld-Bildern; dort wären es zwei Ereignisse auf einer Fläche.
Eigener Präfix fb-, weil .balken schon der Strich im Menüknopf ist. */
.formbild{ position:relative; margin-bottom:50px; }
.fb-balken{ position:absolute; display:block; width:290px; max-width:70%;
height:100px; pointer-events:none; }
.formbild.fb-gross .fb-balken{ width:400px; }
.formbild.fb-unten-rechts .fb-balken{ right:0; bottom:-50px; }
.formbild.fb-unten-links .fb-balken{ left:0; bottom:-50px; }
.formbild.fb-oben-rechts .fb-balken{ right:0; top:-50px; }
.formbild.fb-ink .fb-balken{ background:var(--ink); }
.formbild.fb-hell .fb-balken{ background:var(--papier); }
/* Auf der dunklen Fläche wäre der schwarze Balken unsichtbar. */
.dunkel .formbild.fb-ink .fb-balken, body.nacht .formbild.fb-ink .fb-balken{ background:var(--papier); }
/* Oberflächenausschnitt — dargestellte Software, in HTML gebaut */
/* ── Die dargestellten Oberflächen ───────────────────────────────────────
Das sind Abbildungen von Software, keine Seitenbestandteile. Deshalb
gelten hier die Regeln der Seite bewusst NICHT: Eckenradius und Schatten
sind erlaubt, ebenso das Blau. Software sieht so aus; zeichnete man sie
scharfkantig und schattenlos, sähe sie aus wie eine Tabelle.
Dieselbe Begründung, mit der Laurin am 27.08. das Blau hier freigegeben
hat. `pruefen.mjs` nimmt [data-oberflaeche] entsprechend aus.
Bauform, abgesehen von decode: Kopfzeile mit einem echten Titel und einer
blauen Plakette, darunter genau EIN Grafikelement, darunter eine Fußzeile
mit genau EINEM echten Wert. Alles andere sind graue Balken. decode
arbeitet genauso — zwei echte Zeichenfolgen je Kärtchen, der Rest ist
Form. Das hält die Abbildung abstrakt und die deutsche Textmenge klein. */
[data-oberflaeche]{
/* Mittig im Bild, nicht in der unteren Ecke — decode setzt seine Kärtchen
bei Fintech und Healthcare genauso. Breite rund 64 % der Kachel, das ist
dort nachgemessen (Healthcare 60 %, Fintech 79 %). */
position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
width:min(340px, calc(100% - 72px));
/* Quadratisch, nicht querformatig — decodes Healthcare-Kärtchen ist
ebenfalls nahezu quadratisch. Der freie Raum verteilt sich über
space-between gleichmäßig zwischen Kopf, Grafik und Fuß. */
aspect-ratio:1/1;
display:flex; flex-direction:column; justify-content:space-between;
background:var(--weiss);
border-radius:14px;
box-shadow:0 20px 46px rgba(16,23,32,.20), 0 2px 6px rgba(16,23,32,.08);
padding:18px 18px 20px; font-size:14px; line-height:1.4;
font-variant-numeric:tabular-nums; color:var(--ink);
}
/* Kopfzeile */
[data-oberflaeche] .of-kopf{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
[data-oberflaeche] .of-titel{ font-weight:500; font-size:15px; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; }
/* #EAEDFF ist 10 % Strom auf Weiß, vorgemischt statt mit Alpha — so rechnet
auch das Prüfskript den Kontrast richtig aus. Strom darauf: 5,2:1, AA. */
[data-oberflaeche] .of-plakette{ flex:none; background:#EAEDFF; color:var(--strom);
font-weight:500; font-size:12px; line-height:1; padding:6px 10px; border-radius:100px; white-space:nowrap; }
/* Graue Balken statt Text — decodes Kunstgriff */
[data-oberflaeche] .of-balken{ display:block; height:11px; border-radius:100px; background:#E3E5E8; }
[data-oberflaeche] .of-balken.kraeftig{ background:#CDD1D6; }
/* Zeilenliste */
[data-oberflaeche] .of-liste{ display:grid; gap:14px; }
[data-oberflaeche] .of-z{ display:flex; align-items:center; gap:8px; }
[data-oberflaeche] .of-punkt{ flex:none; width:10px; height:10px; border-radius:100px; background:#CDD1D6; }
[data-oberflaeche] .of-punkt.strom{ background:var(--strom); }
[data-oberflaeche] .of-haken{ flex:none; width:18px; height:18px; border-radius:100px;
background:#E5E9FF; position:relative; }
/* Der Winkel wird um seinen Mittelpunkt gedreht; nach der Drehung ist seine
Hüllfläche rund 7,8 px breit. Damit er mittig im Kreis sitzt, muss sein
Mittelpunkt auf (9|9) liegen — daher left 7, top 5,5 bei 4x7. */
[data-oberflaeche] .of-haken::after{ content:""; position:absolute; left:7px; top:5.5px;
width:4px; height:7px; border-right:2px solid var(--strom); border-bottom:2px solid var(--strom);
transform:translate(-50%, -50%) rotate(45deg); }
/* Fortschritt — das Grafikelement des Angebots */
[data-oberflaeche] .of-lauf{ height:6px; border-radius:100px; background:#EDEFF1; overflow:hidden; }
[data-oberflaeche] .of-lauf span{ display:block; height:100%; background:var(--strom); border-radius:100px; }
/* Säulen — das Grafikelement der offenen Posten */
[data-oberflaeche] .of-saeulen{ height:108px; display:flex; align-items:flex-end; gap:6px; }
[data-oberflaeche] .of-saeulen i{ flex:1; background:#E3E5E8; border-radius:3px; }
[data-oberflaeche] .of-saeulen i.strom{ background:var(--strom); }
/* Sprechblasen — das Grafikelement des Service. Frage rein, Antwort raus.
decode macht es auf seinem Telecom-Kärtchen genauso. */
[data-oberflaeche] .of-nachricht{ display:grid; gap:12px; }
[data-oberflaeche] .of-blase{ display:flex; gap:10px; align-items:flex-end; }
[data-oberflaeche] .of-blase .of-kreis{ flex:none; width:24px; height:24px; border-radius:100px; background:#E3E5E8; }
[data-oberflaeche] .of-blase .of-worte{ flex:0 1 auto; display:grid; gap:7px;
background:#F1F3F5; border-radius:14px 14px 14px 4px; padding:12px 14px; }
/* Die Antwort: rechtsbündig, in Strom, weiße Balken darin */
[data-oberflaeche] .of-blase.antwort{ justify-content:flex-end; }
[data-oberflaeche] .of-blase.antwort .of-worte{ background:var(--strom); border-radius:14px 14px 4px 14px; }
[data-oberflaeche] .of-blase.antwort .of-balken{ background:rgba(255,255,255,.55); }
/* Beleg — das Grafikelement der Auftragsabwicklung */
[data-oberflaeche] .of-beleg{ display:flex; gap:14px; align-items:center; }
[data-oberflaeche] .of-blatt{ flex:none; width:44px; height:56px; border-radius:4px; background:#F1F3F4;
border:1px solid #E0E3E6; padding:6px 5px; display:grid; gap:4px; align-content:start; }
[data-oberflaeche] .of-blatt i{ display:block; height:4px; border-radius:100px; background:#D5D9DD; }
[data-oberflaeche] .of-felder{ flex:1; display:grid; gap:12px; }
/* Fußzeile mit dem einen echten Wert */
[data-oberflaeche] .of-fusszeile{ padding-top:12px; border-top:1px solid #E7E9EB;
display:flex; align-items:center; justify-content:space-between; gap:12px; }
[data-oberflaeche] .of-wert{ font-weight:500; font-size:15px; white-space:nowrap; }
/* Laurin am 02.09.: das Bild etwas kleiner, damit der Text oben und unten auf
derselben Linie schließt. Die Spalte ist deshalb schmaler, und das Bild
nimmt die Höhe des Textes an, statt ein Quadrat zu erzwingen — so schließen
beide bündig ab, egal wie lang der Text später wird. Der Balken hängt
weiterhin 50 px darunter heraus, das ist seine Aufgabe. */
.haltung{ display:grid; grid-template-columns:0.6fr 1fr; gap:80px; margin-top:72px; align-items:stretch; }
.haltung .platzhalter{ aspect-ratio:1/1; }
.haltung .formbild{ position:relative; margin-bottom:0; }
/* Das Bild liegt absolut im Rahmen, damit nicht es die Zeilenhöhe bestimmt,
sondern der Text daneben. Sonst gewönne das Seitenverhältnis 1:1. */
.haltung .formbild picture{ position:absolute; inset:0; display:block; }
.haltung .formbild img{ width:100%; height:100%; object-fit:cover; display:block; }
.haltung .formbild .platzhalter{ position:absolute; inset:0; height:auto; aspect-ratio:auto; }
.haltung .worte p + p{ margin-top:20px; }
.platzhalter.dunkel-flaeche{ background:#333333; border:1px solid #4A4A4A; color:#B4B4B4; }
/* Aussage auf dunkler Fläche */
.aussage{ padding-top:120px; padding-bottom:140px; }
/* 900 px zwangen „Was wir bauen, bleibt Ihres." trotz des gesetzten Umbruchs in
eine dritte Zeile. 1100 px tragen die längste Aussage bei 72 px in einer. */
.aussage p{ max-width:1100px; }
.aussage .weiter{ margin-top:48px; max-width:660px; font-size:22px; line-height:1.5; }
/* Kontaktstrecke */
.schluss{ padding-top:120px; padding-bottom:160px; }
.schluss .ruf{ display:inline-block; font-weight:500; font-size:min(72px, 5.8vw); line-height:1.11; letter-spacing:normal; }
.schluss .dazu{ display:flex; align-items:center; gap:20px; margin-top:56px; flex-wrap:wrap; }
/* 340 px lassen den Satz genau dreizeilig umbrechen statt vierzeilig;
align-items:center an .dazu stellt ihn auf eine Achse mit den Porträts. */
.schluss .dazu .wer{ font-size:19px; line-height:1.5; max-width:340px; align-self:center; }
.personen{ display:grid; gap:0; margin-top:60px; }
.rahmen.personen{ margin-top:0; }
.person{ display:grid; grid-template-columns:120px 1fr auto; gap:40px; align-items:start;
padding-block:48px; border-top:2px solid var(--linie); }
/* Die Liste beginnt mit dem ersten Namen und endet mit dem letzten. Die
Linien dazwischen trennen die Einträge — davor und danach steht keine. */
.person:first-of-type{ border-top:0; }
/* Das Bild schließt unten bündig mit dem Text ab (Laurin am 05.09.). Es steht
deshalb nicht mehr auf fester Höhe, sondern dehnt sich über die ganze Zeile —
auf „Über uns" sind das 135 px, auf der Kontaktseite 175, weil dort noch der
Mailweg unter dem Text steht.
Warum absolut positioniert: Ein gedehntes Rasterkind trägt seine eigene
Inhaltshöhe in die Zeilenberechnung ein. Mit height:100% am Bild wäre das die
Eigenhöhe der Datei — 480 px — und die Zeile würde viermal so hoch. Aus dem
Fluss genommen zählt nur noch die Textspalte, und das Bild bekommt genau
deren Höhe. Der quadratische Ausschnitt wird dabei seitlich beschnitten
(object-fit:cover), der Kopf sitzt weiter mittig. */
.person > picture{ align-self:stretch; display:block; position:relative; }
.person .kopfbild{ position:absolute; inset:0; width:100%; height:100%; }
.person .rolle{ font-weight:500; font-size:24px; letter-spacing:normal; margin-bottom:12px; }
.person .schreiben{ margin-top:12px; }
.person .wofuer{ margin-top:8px; }
.person .termin{ white-space:nowrap; align-self:center; }
/* Der Partner steht in derselben Zeile wie die Gründer, aber ohne die dritte
Spalte: Kai ist kein Ansprechpartner von ADA, also gibt es dort keinen
Terminweg, und die leere Spalte würde den Text nach links quetschen. */
.person.partner{ grid-template-columns:120px 1fr; }
/* Kais Spalte ist ohne die dritte Spalte 126 px breiter als die der Gründer.
Ohne Bremse liefe sein Text auf eine Zeile, während die drei darüber auf
zwei stehen — gleicher Text, anderes Bild. Das Maß hält seine Zeile auf
derselben Länge (Laurin am 05.09.: „so lang und im selben Stil"). */
.person.partner > div{ max-width:940px; }
/* Fragen und Antworten — aufklappbar wie bei decode, über /
und damit ohne JavaScript. decode misst: Frage 36 px/500, Zeilenpolsterung
33 px, Trennlinie 2 px #262626 auf 30 % Deckkraft, Antwort 20 px.
840 px ist decodes Entwurfsbreite für Blöcke innerhalb eines Abschnitts.
Anders als decode stellen wir den Block links bündig statt eingerückt —
eingerückt wird bei uns nur der Hero-Block. */
.fragen{ margin-top:0; max-width:840px; }
.fragen .frage:first-child{ border-top:0; }
.frage{ border-top:2px solid var(--linie-leicht); }
.frage summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
padding-block:33px; cursor:pointer; list-style:none;
transition:color var(--uebergang); }
.frage summary::-webkit-details-marker{ display:none; }
.frage summary:focus-visible{ outline:2px solid var(--strom); outline-offset:4px; }
/* Winkel rechts, gezeichnet aus zwei Kanten — kein zusätzlicher Request */
.frage summary .winkel{ flex:none; width:14px; height:14px; margin-top:14px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg); transition:transform var(--uebergang); }
.frage[open] summary .winkel{ transform:rotate(-135deg); margin-top:20px; }
.frage .antwort{ padding-bottom:33px; max-width:620px; }
.frage .antwort p + p{ margin-top:16px; }
/* Stellen */
/* Stellen klappen auf, wie die Fragen in der FAQ — dasselbe -Muster,
also ebenfalls ohne JavaScript. Der Titel steht zu, die Beschreibung
erscheint erst auf Wunsch: Laurins Ansage, die Seite sei zu textlastig. */
.stelle{ border-top:2px solid var(--linie-leicht); }
.stelle:first-of-type{ border-top:0; }
.stelle summary{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px;
padding-block:40px; cursor:pointer; list-style:none; transition:color var(--uebergang); }
.stelle summary::-webkit-details-marker{ display:none; }
.stelle summary:focus-visible{ outline:2px solid var(--strom); outline-offset:4px; }
.stelle summary .etikett{ margin-top:8px; }
.stelle .winkel{ flex:none; width:14px; height:14px; margin-top:18px;
border-right:2px solid currentColor; border-bottom:2px solid currentColor;
transform:rotate(45deg); transition:transform var(--uebergang); }
.stelle[open] .winkel{ transform:rotate(-135deg); margin-top:24px; }
.stelle .inhalt{ max-width:840px; padding-bottom:56px; }
.stelle h4{ margin-top:32px; margin-bottom:12px; font-weight:500; font-size:19px; }
.stelle ul{ list-style:none; max-width:620px; }
.stelle li{ padding-left:24px; position:relative; margin-top:8px; }
.stelle li::before{ content:"·"; position:absolute; left:8px; color:var(--grau); }
/* Der erste Montag trägt die Ausschreibung — er steht deshalb größer als der
Rest (Laurin am 02.09.: die Stellen sollen keine Steckbriefe sein). */
.stelle .montag{ font-weight:500; font-size:24px; line-height:1.35; max-width:740px; }
.stelle .montag + .fliess{ margin-top:20px; }
/* Der Bewerbungsweg braucht keinen eigenen Zwischentitel mehr — er ist ein
Satz (Laurin am 03.09.: „Einfach Lebenslauf und dann sprechen wir"). */
.stelle .bewerbung{ margin-top:32px; font-weight:500; }
/* Das Praktische steht am Ende und darf leise sein: Sprachniveau, Umfang und
der Verweis auf die Datenschutzerklärung. */
.stelle .praktisch, .rahmen .praktisch{ margin-top:20px; max-width:620px; font-size:15px;
line-height:1.5; color:var(--grau); }
/* Fallstudien-Seite */
/* Drei Spalten statt fünf: bei 216 px riss „Ablaufsteuerung + Sprachmodell"
mitten im Wort auseinander. 386 px tragen den längsten Wert. */
.akte{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px 40px; padding-block:40px; }
.akte dd{ overflow-wrap:normal; }
.akte div{ font-size:15px; line-height:1.45; }
.akte dt{ font-weight:500; margin-bottom:4px; }
.akte dd{ color:var(--grau); }
.text-block{ padding-top:72px; padding-bottom:0; display:grid; grid-template-columns:var(--label) 1fr; column-gap:var(--rinne); }
.text-block .inhalt{ max-width:620px; }
.text-block .inhalt p + p{ margin-top:20px; }
.zitat{ padding-top:100px; padding-bottom:120px; }
.zitat blockquote{ max-width:900px; font-weight:500; font-size:36px; line-height:1.22; letter-spacing:normal; }
.zitat figcaption{ margin-top:40px; font-size:19px; line-height:1.5; }
.zitat figcaption .rolle{ color:var(--grau); }
.dunkel .zitat{ border-top:2px solid rgba(255,255,255,.3); }
.dunkel .zitat figcaption .rolle{ color:#B4B4B4; }
/* Rechtstexte */
.recht{ padding-block:80px; }
.recht .inhalt{ max-width:720px; }
.recht .inhalt > h2:first-child{ margin-top:0; }
.recht h2{ font-weight:500; font-size:28px; letter-spacing:normal; margin-top:60px; margin-bottom:16px; }
.recht h3{ font-weight:500; font-size:19px; margin-top:32px; margin-bottom:8px; }
.recht p{ margin-top:12px; }
.recht ul{ margin-top:12px; padding-left:24px; }
.recht li{ margin-top:6px; }
.recht address{ font-style:normal; margin-top:12px; }
/* Fuß */
.fuss{ border-top:2px solid var(--linie); padding-top:80px; padding-bottom:40px; }
.fuss .oben{ display:grid; grid-template-columns:var(--spalte) 1fr; }
.fuss .spalten{ display:flex; gap:80px; flex-wrap:wrap; }
.fuss .spalten nav{ display:flex; flex-direction:column; gap:10px; }
.fuss .spalten h2{ font-size:18px; color:var(--grau); font-weight:400; margin-bottom:10px; }
.fuss .spalten a{ text-decoration:none; font-size:20px; }
.fuss .unten{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
margin-top:80px; padding-top:24px; border-top:2px solid var(--linie); font-size:18px; color:var(--grau); }
.fuss .unten .rechts{ display:flex; gap:32px; }
/* Mittlere Breiten */
@media (max-width: 1319px){
:root{ --spalte: clamp(160px, 22vw, 300px); }
}
@media (max-width: 1100px){
.faelle{ grid-template-columns:1fr; grid-template-rows:none; gap:80px; }
.fall{ grid-row:auto; grid-template-rows:none; }
.haltung{ grid-template-columns:1fr; gap:40px; }
/* Gestapelt gibt es keine Textspalte mehr, an deren Höhe sich das Bild
hängen könnte — hier steht es wieder normal im Fluss und quadratisch. */
.haltung .formbild{ margin-bottom:32px; }
.haltung .formbild picture{ position:static; }
.haltung .formbild img{ height:auto; }
.haltung .formbild .platzhalter{ position:static; aspect-ratio:1/1; }
.formbild{ margin-bottom:32px; }
.fb-balken, .formbild.fb-gross .fb-balken{ width:200px; height:64px; }
.formbild.fb-unten-rechts .fb-balken,
.formbild.fb-unten-links .fb-balken{ bottom:-32px; }
.formbild.fb-oben-rechts .fb-balken{ top:-32px; }
.preistafel{ grid-template-columns:1fr; gap:0; }
.pt-stufe + .pt-stufe{ margin-top:20px; }
/* Drei Spalten sind auf dem Handy zu schmal: „Auftragserfassung" darf nicht
brechen (overflow-wrap:normal) und lief deshalb aus dem Fenster. */
.akte{ grid-template-columns:1fr 1fr; gap:24px; }
.karten{ grid-template-columns:1fr; gap:0; }
.karte{ padding-top:24px; padding-bottom:32px; }
}
/* Mobil */
@media (max-width: 1039px){
:root{ --spalte: 0px; --luft: 24px; }
body{ hyphens:auto; }
body{ font-size:18px; }
.kopfzeile, .leistung, .stelle, .text-block, .fuss .oben{ display:block; }
/* Mobil-Größen der Überschriften. Gewicht und Laufweite kommen unverändert
aus dem Hauptteil: 500 und normal.
Hier stand bis zum 28.08. ein hineingerutschter Brocken des ALTEN
Stylesheets von vor dem decode-Umbau — Gewicht 600, negative Laufweiten,
und ein abgerissener Selektor `.t-riesig,` der in `.t-versal` überlief.
Folge: die h1 jeder Unterseite stand auf dem Handy in Versalien. Das
verletzte drei harte Regeln auf einmal. Der Brocken dublierte außerdem
.anlauf, .mittentrenner, .schreibblock und .knopf.gross, die weiter
unten in diesem Block richtig stehen. */
.t-mega, .t-riesig{ font-size:clamp(38px, 11vw, 52px); line-height:1.1; }
.t-gross, .t-versal{ font-size:30px; line-height:1.12; }
.t-anruf{ font-size:32px; line-height:1.12; }
.anruf-satz{ font-size:20px; line-height:1.4; }
.rahmen.anruf{ padding-top:48px; padding-bottom:40px; }
.t-xl{ font-size:30px; }
.t-l, .t-m, .formel, .leistung .wort, .zitat blockquote, .pt-zahl{ font-size:26px; line-height:1.26; }
.t-s, .person .rolle{ font-size:22px; }
.block{ padding-top:56px; padding-bottom:96px; }
.rahmen.gross{ padding-top:32px; padding-bottom:80px; }
.gross .satz, .gross .fuerwen, .einleitung, .anlauf, .schreibblock .ansage{ margin-left:0; font-size:24px; line-height:1.3; }
.gross .satz{ margin-top:40px; }
.gross .fuerwen, .gross .zweitetuer{ margin-left:0; }
.gross .zweitetuer{ margin-top:40px; font-size:16px; }
.gross .handlung{ margin-left:0; margin-top:40px; gap:24px; }
.band > div{ grid-template-columns:1fr; gap:4px; }
.gross .handlung .ruf{ font-size:26px; }
.aussage{ padding-top:64px; padding-bottom:80px; }
.einleitung{ margin-top:32px; }
.schluss{ padding-top:72px; padding-bottom:96px; }
.schluss .dazu{ margin-left:0; gap:16px; }
.leistung{ grid-template-columns:1fr; padding-top:32px; padding-bottom:32px; }
/* Gestapelt steht die Zeitangabe unter dem Wort, nicht rechts daneben. */
.leistung .zeit{ grid-column:1; grid-row:auto; order:-1; max-width:none; text-align:left;
margin-bottom:8px; }
/* display:block nimmt der Zeile die Rinne — der Titel klebte am Text. */
.leistung > div:first-child{ margin-bottom:20px; }
/* Weniger Trennungen im Fließtext: erst ab acht Zeichen, und nie mit
weniger als drei Zeichen auf einer Seite. Vorher war jede dritte
Zeile abgehackt. */
body{ hyphenate-limit-chars:8 4 4; }
.zitat figcaption{ font-size:17px; }
.aussage p, .aussage .weiter, .zitat blockquote, .zitat figcaption{ margin-left:0; }
.aussage .weiter{ margin-top:40px; font-size:19px; }
.zitat blockquote{ font-size:24px; }
.laufband .spur span{ font-size:26px; padding-right:120px; }
.kopf .zeile{ padding-block:20px; }
.marke .zeichen{ height:22px; }
.schalter{ display:block; position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; margin:0; }
.menueknopf{ display:inline-flex; align-items:center; gap:10px; cursor:pointer;
font-size:15px; letter-spacing:0.06em; text-transform:uppercase; padding:8px 0; }
/* Zwei getrennte Striche statt Rahmenkanten — nur so wird beim Öffnen ein
Kreuz daraus. Vorher drehte sich der ganze Balken um 90 Grad und ergab
zwei senkrechte Striche, kein Schließen-Zeichen. */
.menueknopf .balken{ position:relative; width:22px; height:14px; }
.menueknopf .balken::before, .menueknopf .balken::after{
content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--ink);
transition:transform var(--uebergang), top var(--uebergang); }
.menueknopf .balken::before{ top:3px; }
.menueknopf .balken::after{ top:10px; }
.schalter:focus-visible + .menueknopf{ outline:2px solid var(--strom); outline-offset:4px; }
.navi{ display:none; position:absolute; left:0; right:0; top:100%;
flex-direction:column; align-items:flex-start; gap:0;
background:var(--weiss); border-top:1px solid var(--linie);
box-shadow:0 18px 32px rgba(16,23,32,.14);
padding:8px 24px 24px; }
/* Auf der Nachtseite ist das Menüfeld sonst weiß mit weißer Schrift. */
body.nacht .navi{ background:var(--ink); }
.schalter:checked ~ .navi{ display:flex; }
.schalter:checked + .menueknopf .balken::before{ top:6.5px; transform:rotate(45deg); }
.schalter:checked + .menueknopf .balken::after{ top:6.5px; transform:rotate(-45deg); }
.navi a{ font-size:22px; font-weight:500; padding-block:14px; width:100%;
border-bottom:1px solid var(--linie); text-decoration:none; }
.navi a:last-child{ border-bottom:0; }
.navi .reden{ text-decoration:underline; }
.etikett{ margin-bottom:16px; display:block; font-size:17px; }
.leistung .baustein{ grid-template-columns:1fr; gap:4px; }
.person{ grid-template-columns:1fr; gap:16px; }
.anlauf{ margin-top:32px; }
.mittentrenner{ text-align:left; font-size:17px; }
.schreibblock{ text-align:left; padding-bottom:80px; }
.knopf.gross{ padding:16px 28px; font-size:17px; }
.person .termin{ white-space:normal; }
.felder{ grid-template-columns:1fr; gap:80px; }
.feld:last-child{ display:block; grid-column:auto; }
.feld:last-child .worte{ margin-top:28px; }
.frage summary{ padding-block:24px; gap:24px; }
/* Überschriften trennen nie automatisch. Sonst wird "ChatGPT" zu "Chat-GPT"
und "Menschen" zu "Men-schen". Der Fließtext behält hyphens:auto —
dort sind lange deutsche Wörter ohne Trennung das größere Übel. */
h1, h2, h3, h4,
.t-mega, .t-riesig, .t-gross, .t-xl, .t-versal, .t-l, .t-m, .t-s,
.leistung .wort, .spaltentitel, .formel{ hyphens:manual; }
/* 32 px Rand ließen vom Foto nichts übrig — das Kärtchen füllte 310 von
342 px. 96 px lassen den Bildrand wieder sehen. */
[data-oberflaeche]{ width:calc(100% - 96px); padding:14px; font-size:13px; }
[data-oberflaeche] .of-titel{ font-size:14px; }
[data-oberflaeche] .of-wert{ font-size:14px; }
.fuss .unten{ margin-top:40px; }
}
@media (prefers-reduced-motion: reduce){
*{ transition-duration:0s !important; animation-duration:0s !important; }
/* Das Laufband steht dann still und beginnt am Rahmen, nicht an der
Fensterkante — sonst klebte der Satz am äußersten Rand. */
.laufband .spur{ animation:none; padding-left:max(40px, calc((100% - 1240px) / 2)); }
.laufband .spur span + span{ display:none; }
}
/* Hover-Zustände nur bei echtem Zeigegerät. Auf dem Handy bleibt sonst der
zuletzt angetippte Verweis blau hängen — im Menü stand „Projekte"
markiert, während „Über uns" die geöffnete Seite war. */
@media (hover: hover){
a:hover{ text-decoration-thickness:2px; color:var(--strom); }
.knopf:hover{ background:var(--ink); color:var(--weiss); border-color:var(--ink); }
.pfeil:hover .spitze{ transform:translateX(4px); }
.marke:hover .zeichen{ color:var(--strom); }
.navi a:hover{ color:var(--strom); }
.navi .reden:hover{ text-decoration:underline; }
.dunkel a:hover{ color:#9FB0FF; }
.frage summary:hover{ color:var(--strom); }
.stelle summary:hover{ color:var(--strom); }
.fuss .spalten a:hover{ color:var(--strom); text-decoration:underline; }
}