/* ISKA — Stylesheet, von null geschrieben. ───────────────────────────────────────────────────────────────────────── Die Vorgängerfassung (site.css.peinert-erbe, 654 Zeilen) stammte aus dem Muster eines Schwesterprojekts: gleiche Schrift, gleiche Bausteine, gleicher Bandrhythmus. Sie war nicht zu retten, weil das Problem in der Struktur lag und nicht in den Farben. Drei Entscheidungen, die diese Fassung trägt: 1 TYPOGRAFIE Instrument Sans durchgehend, Überschriften enger gesetzt und schwerer. Bis zum 22.08.2026 lief hier eine Antiqua (Newsreader) — der Auftraggeber hat sie verworfen, sie ließ die Seite wie einen Kanzleibogen aussehen. Die Mischung war fachlich begründbar (JAFFÉ, Flöther & Wissing und Grub Brugger setzen alle Serifen), aber sie war nicht gewollt. Unverwechselbar bleibt ISKA über Palette, Raster und Bauteile. 2 RASTER Ein hängendes Raster mit Randspalte statt zentrierter Bänder. Abschnittsnummer und Etikett stehen links im Rand, der Text hängt eingerückt daneben. Das ist eine redaktionelle Struktur, keine Kachelwand. 3 KEINE KARTEN Getrennt wird über Linien und Weißraum. Kachelraster mit Rahmen war das prägende Element der alten Fassung. BEWEGUNG: nur transform und opacity. Kein animierter box-shadow, kein backdrop-filter auf fixierten Leisten, kein mix-blend-mode, kein dauerhaftes will-change. */ /* ── Schriften ─────────────────────────────────────────────────────────── */ @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2") format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2") format("woff2")} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400;font-display:swap; src:url("../fonts/instrument-sans-v4-latin_latin-ext-regular.woff2") format("woff2")} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:500;font-display:swap; src:url("../fonts/instrument-sans-v4-latin_latin-ext-500.woff2") format("woff2")} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:600;font-display:swap; src:url("../fonts/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2")} /* ── Werte ─────────────────────────────────────────────────────────────── */ :root{ /* Flächen. Wärmer als die alte Fassung — Papier statt Bildschirmgrau. */ --papier:#FBF9F4; /* Elfenbein statt Bildschirmweiss */ --papier-2:#F1EDE4; --tinte:#141920; /* 16,6:1 auf --papier */ --tinte-2:#4E5661; /* 7,3:1 — Fließtext zweiter Ordnung */ --tinte-3:#616974; /* 5,3:1 auf --papier, 4,9:1 auf --papier-2. Erster Ansatz war #6C7480 — auf dem hellen Papier gerade noch 4,53:1, auf der stillen Fläche aber nur 4,15:1. Ein Ton muss auf BEIDEN Gründen tragen, sonst fällt er genau dort durch, wo man ihn nicht prüft. */ --linie:#DDD9D2; --linie-stark:#7E8794;/* 3,4:1 — Ränder von Bedienelementen, WCAG 1.4.11 */ --nacht:#0D3266; /* aus der Bildmarke */ --nacht-tief:#08203F; --nacht-text:#9EBEE6; /* 6,0:1 auf --nacht */ --signal:#004AAD; /* Markenblau, aus der Logodatei des Kunden abgenommen (haeufigster Farbwert im Bildzeichen). 7,73:1 auf Papier. Vorher stand hier das dunklere Nachtblau - die Seite und das Logo sprachen zwei Blaus. */ /* Ueberschriftenschrift. Bis zum 22.08.2026 stand hier Newsreader, eine Antiqua - die Seite las sich wie ein Kanzleibogen. Der Auftraggeber hat das ausdruecklich verworfen ("das ganze roemische Design gefaellt mir nicht"). Ueberschriften laufen jetzt in derselben Grotesk wie der Fliesstext, nur enger gesetzt und schwerer - das ist die Bauform, die das Schwesterprojekt fuehrt und die der Auftraggeber besser findet. Unverwechselbar bleibt ISKA ueber Palette, Raster und Bauteile, nicht ueber die Schriftmischung. */ --titel:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --grotesk:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* Mono fuer die technische Beschriftung. IBM Plex Mono und bewusst NICHT JetBrains Mono - das ist die Handschrift des Schwesterprojekts. */ --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* Ein hängendes Raster: schmale Randspalte, breite Textspalte. */ --rand:12.5rem; --spalte:min(1140px,100% - 3rem); --luft:clamp(64px,7vw,116px); --schnell:140ms; --kurve:cubic-bezier(.2,.9,.3,1); } /* ── Grundlagen ────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--papier);color:var(--tinte); font:400 17px/1.62 var(--grotesk);overflow-wrap:break-word; -webkit-font-smoothing:antialiased} img,svg{display:block;max-width:100%;height:auto} p{margin:0} a{color:var(--signal);text-underline-offset:.2em} :focus-visible{outline:2.5px solid var(--signal);outline-offset:3px} /* clamp(): Um + und - MUSS Leerzeichen stehen. Ohne sie ist die gesamte Rechnung ungueltig, die Deklaration faellt lautlos weg und die Ueber- schrift landet auf der Browser-Vorgabe (2em). Genau das war hier vier Stunden lang der Fall - die Seite sah nur deshalb halbwegs aus, weil die Vorgabewerte zufaellig plausibel sind. Aufgefallen ist es erst beim Nachmessen von getComputedStyle. */ h1,h2,h3{margin:0;font-family:var(--titel);font-weight:500; letter-spacing:-.022em;line-height:1.1;text-wrap:balance} h1{font-size:clamp(2.2rem, 1.3rem + 3.2vw, 3.9rem);line-height:1.02; letter-spacing:-.034em;font-weight:600} h2{font-size:clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem);letter-spacing:-.026em} h3{font-size:clamp(1.1rem, 1rem + .45vw, 1.28rem);font-weight:600;letter-spacing:-.018em} .rahmen{width:var(--spalte);margin-inline:auto} .skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--nacht); color:#fff;padding:.8rem 1.2rem;font-weight:600} .skip:focus{left:0} .versteckt{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* ── Briefkopf ───────────────────────────────────────────────────────────── Anschrift links, Marke mittig, Ruf rechts — der Aufbau eines Briefbogens. Darunter eine echte Doppellinie (kräftig/fein, 3 px Abstand) und die Navigation in gesperrten Versalien. Das ist der Hauptträger der „alteingesessenen Kanzlei": kein Element davon ist Dekoration, alle drei Blöcke stehen auch auf dem Papierbogen. */ /* ══ Kopf ═════════════════════════════════════════════════════════════════ Zweistufig. Vorher stand hier ein Briefkopf mit MITTIGER Marke — die Anordnung eines Geschäftsbogens, nicht die einer Website. */ /* Stufe 1: Dienstzeile. Dunkel, schmal, scrollt weg. Sie trägt die Angaben, die man nachschlägt und nicht liest — Anschrift, Register, Rufnummer. */ .dienst{background:var(--nacht-tief);color:#B7CBE4} .dienst-innen{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.6rem; padding:.5rem 0;font-size:.76rem;letter-spacing:.02em} .dienst-tel{margin-left:auto;color:#fff;text-decoration:none;font-weight:600; letter-spacing:.01em} .dienst-tel:hover{color:var(--nacht-text)} @media (max-width:640px){.dienst-reg{display:none}} /* Stufe 2: Arbeitszeile. Bleibt beim Scrollen oben. Eigener Hintergrund ist hier Pflicht und nicht Geschmack: Eine klebende Leiste ohne Fläche lässt den Text darunter durchscheinen. Das Korn fehlt ihr dadurch — bei 1 px Abstand zur Papierfläche sieht das niemand, bei transparentem Grund dagegen jeder. */ .kopf-fest{position:sticky;top:0;z-index:50;background:var(--papier); border-bottom:1px solid var(--linie)} .kopf-zeile{display:flex;align-items:center;gap:1.2rem 2rem; padding:.85rem 0} .marke{display:block;flex:none;line-height:0} .marke img{width:200px;height:auto} /* Die Navigation steht LINKS neben der Marke, nicht mittig unter ihr. Der Knopf wird per margin-left:auto nach rechts geschoben. */ .nav{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.7rem} .nav a{text-decoration:none;color:var(--tinte-2);font-size:.9rem; font-weight:500;letter-spacing:-.006em;padding:.35rem 0; border-bottom:1.5px solid transparent; transition:color var(--schnell) var(--kurve)} .nav a:hover{color:var(--tinte)} .nav a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--signal)} /* ── Menüschalter ───────────────────────────────────────────────────────── Auf breiten Schirmen gibt es ihn nicht. Beide Zusatzteile stehen hier auf `display:none` und werden erst im Schmal-Block eingeschaltet — so kann keine Fassung sie versehentlich auf dem Tisch-Bildschirm zeigen. Kein reines Sinnbild, sondern Strich UND Wort: Diese Seite ist typografisch gebaut, und drei Striche allein sind auf einer Kanzleiseite ein Fremdkörper. Das Wort kostet 34 px und spart die Rätselei. */ .nav-schalter,.nav-kontakt{display:none} /* min-height 44 px, nicht nur Innenabstand: Gemessen kam der Schalter sonst auf 31 px und war damit flacher als die Menüzeilen, die er öffnet — das kleinste Ziel im Kopf wäre ausgerechnet das gewesen, das man zuerst treffen muss. */ .nav-schalter{align-items:center;gap:.55rem;min-height:44px; padding:.5rem .8rem;margin-left:auto; font:600 .82rem/1 var(--grotesk);letter-spacing:.02em; color:var(--tinte);background:transparent; border:1px solid var(--linie-stark);border-radius:2px; cursor:pointer;-webkit-tap-highlight-color:transparent} .nav-schalter:hover{border-color:var(--tinte-2)} /* Das Zeichen ist EIN Kasten mit zwei Schatten-Strichen darüber und darunter. Beim Öffnen wandern die beiden auf die Mitte und drehen sich zum Kreuz. Nur `transform` und `opacity` — beides läuft im Compositor und erzeugt kein Neuberechnen des Layouts in der klebenden Leiste. */ .nav-schalter-kreuz{position:relative;display:block;width:15px;height:9px} .nav-schalter-kreuz::before,.nav-schalter-kreuz::after{ content:"";position:absolute;left:0;width:15px;height:1.5px; background:currentColor; transition:transform var(--schnell) var(--kurve)} .nav-schalter-kreuz::before{top:0} .nav-schalter-kreuz::after{bottom:0} .nav-schalter[aria-expanded="true"] .nav-schalter-kreuz::before{ transform:translateY(3.75px) rotate(45deg)} .nav-schalter[aria-expanded="true"] .nav-schalter-kreuz::after{ transform:translateY(-3.75px) rotate(-45deg)} @media (prefers-reduced-motion:reduce){ .nav-schalter-kreuz::before,.nav-schalter-kreuz::after{transition:none} } /* ── Aufmacher ─────────────────────────────────────────────────────────── */ .auf{position:relative;background:var(--nacht-tief);color:#fff;overflow:hidden; isolation:isolate} .auf-bild{position:absolute;inset:0;z-index:-3} .auf-bild img{width:100%;height:100%;object-fit:cover;object-position:center 58%} /* Die Stecherei liegt ÜBER dem Foto, aber unter dem Verlauf: So bekommt das Bild den Ton eines gestochenen Briefkopfs, ohne dass der Text darunter leidet. multiply statt eigener Deckkraft-Schicht wäre teurer — ein mix-blend-mode auf einer Vollbildfläche war im Schwesterprojekt eine der Ruckelursachen. */ .auf-stich{position:absolute;inset:0;z-index:-2;opacity:.5} .auf-stich img{width:100%;height:100%;object-fit:cover;object-position:right center} .auf::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(92deg,rgba(6,26,52,.95) 0%,rgba(6,26,52,.86) 38%, rgba(6,26,52,.55) 72%,rgba(6,26,52,.42) 100%)} .auf-innen{padding:clamp(84px,11vw,168px) 0 clamp(64px,8vw,116px)} .auf h1{color:#fff;max-width:17ch} .auf-vor{margin-top:1.6rem;max-width:54ch;font-size:1.1rem;line-height:1.6; color:#CFDDEF} .auf-akt{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap;margin-top:2.3rem} /* Schaltflächen: Text mit Linie, keine Kästen. */ .tat{font:600 1rem/1 var(--grotesk);text-decoration:none;color:#fff; padding-bottom:.5rem;border-bottom:2px solid rgba(255,255,255,.45); transition:border-color var(--schnell) var(--kurve)} .tat:hover{border-bottom-color:#fff} .tat-hell{color:var(--tinte);border-bottom-color:var(--linie-stark)} .tat-hell:hover{border-bottom-color:var(--tinte)} /* ── Hängendes Raster ──────────────────────────────────────────────────── */ .teil{padding:var(--luft) 0} .teil + .teil{border-top:1px solid var(--linie)} .teil-dunkel{background:var(--nacht);color:#fff;border-top:0} .teil-dunkel h2,.teil-dunkel h3{color:#fff} .teil-dunkel .weich{color:#C3D5EA} .teil-still{background:var(--papier-2)} /* ══ Abschnittsraster ═════════════════════════════════════════════════════ BIS ZUM 22.08.2026 hing hier eine 200 px breite Randspalte, in der nur die Abschnittsmarke und die Überschrift standen. Gemessen über zwanzig Abschnitte: Inhaltsspalte 7.754 px hoch, Randspalte davon 1.391 px belegt — 82 % leer, 1,27 Millionen Bildpunkte tote Fläche. Schlimmer als die Leere war, was die schmale Spalte mit den Überschriften machte. Deutsche Komposita passen nicht in 200 px: „Insolvenzberatung" braucht allein 226 px. Auf dem Schirm stand deshalb „Was War-/tezeit kostet", „Der Regis-/terauszug", „Die Geschäfts-/führung". Repariert wurde das seinerzeit mit `hyphens:auto` — ein zu schmaler Kasten, geflickt mit Silbentrennung, statt den Kasten zu verbreitern. Beide Schwesterprojekte machen es andersherum: keine Randspalte, die Marke direkt über der Überschrift auf derselben linken Kante, und die Silbentrennung auf dem Desktop ausdrücklich AUS. Deren Überschriften bleiben einzeilig. Der Gegenbeweis lag im eigenen Projekt: Unter 900 px fiel das Raster schon immer auf eine Spalte zusammen — und dort las sich die Seite besser als auf dem großen Schirm. */ .haenge{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem} .haenge-rand{position:static;max-width:none} /* ── Randmarke ──────────────────────────────────────────────────────────── Die Marke ueber jeder Abschnittsueberschrift. Vorher: ein waagerechter Strich, darunter gesperrte Grossbuchstaben - der Auftraggeber hat dieses "--- 01" zweimal als stoerend benannt. Zwei Aenderungen. Erstens tragen die Marken jetzt WOERTER statt Ziffern: Eine "03" im Rand beantwortet keine Frage, weil niemand mitzaehlt, und sie sagt auch nicht, wo man ist. Zweitens ist aus dem Strich darueber ein kurzer Strich DANEBEN geworden - er markiert den Zeilenanfang, statt eine zweite waagerechte Linie in eine Seite zu legen, die ohnehin voller Haarlinien ist. Die Sperrung ist von .19em auf .12em zurueck: Bei einem Wort wie "Geschaeftsfuehrung" zerfaellt .19em in Einzelbuchstaben. */ .nr{display:inline-flex;align-items:center;gap:.55rem; font:600 .74rem/1.4 var(--grotesk);letter-spacing:.12em; text-transform:uppercase;color:var(--tinte-3);border-top:0;padding-top:0} .nr::before{content:"";width:1.6rem;height:1.5px;flex:none; background:currentColor;opacity:.55} .teil-dunkel .nr{color:var(--nacht-text)} /* Die Randspalte ist schmal, die Ueberschriften darin sind deutsche Komposita ("Ausserg erichtliche Sanierung", "Insolvenzberatung"). Das globale overflow-wrap:break-word aus dem body haut sie ohne Trennstrich mitten durch - "Insolvenzber / atung". Hier deshalb zurueck auf normales Umbruchverhalten plus echte Silbentrennung; liefert Chromium das Woerterbuch dazu. */ /* Volle Überschriftengröße, keine Silbentrennung: Beides war nur nötig, solange die Überschrift in einer 200-px-Spalte stand. */ .haenge-rand h2{margin-top:.5rem;overflow-wrap:normal; hyphens:manual;-webkit-hyphens:manual} .haenge-rand .nr + h2{margin-top:.55rem} .weich{color:var(--tinte-2)} .fliess{display:grid;gap:1.05rem;max-width:66ch} .fliess p{font-size:1.03rem} .gross{font-size:1.16rem;line-height:1.55} /* ── Liste mit Trennlinien statt Karten ────────────────────────────────── */ .reihe{display:grid;gap:0} .reihe > *{padding:1.5rem 0;border-top:1px solid var(--linie)} .reihe > *:first-child{border-top:0;padding-top:0} .teil-dunkel .reihe > *{border-top-color:rgba(255,255,255,.16)} .posten{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 1.4rem} .posten-nr{font:500 .78rem/1.6 var(--grotesk);color:var(--tinte-3); font-variant-numeric:tabular-nums} .teil-dunkel .posten-nr{color:var(--nacht-text)} .posten h3{margin-bottom:.4rem} .posten p{color:var(--tinte-2);font-size:.98rem;max-width:62ch} .teil-dunkel .posten p{color:#C3D5EA} .posten a{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.94rem} /* ── Zwei Spalten ──────────────────────────────────────────────────────── */ .paar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:2.6rem} /* ── Registerzeile ─────────────────────────────────────────────────────── */ .register{border-top:1px solid var(--linie);padding:1.15rem 0; display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-size:.86rem;color:var(--tinte-3)} .register b{font-weight:500;color:var(--tinte-2)} /* ── Fuß ───────────────────────────────────────────────────────────────── */ .fuss{background:var(--nacht-tief);color:#fff;padding:clamp(52px,6vw,84px) 0 2.4rem} .fuss-gitter{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2.4rem} .fuss h2{font:600 .72rem/1 var(--grotesk);letter-spacing:.19em; text-transform:uppercase;color:var(--nacht-text);margin-bottom:1.1rem} .fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .fuss a{color:#E4ECF6;text-decoration:none;font-size:.94rem} .fuss a:hover{text-decoration:underline} .fuss-marke img{width:228px;height:auto} .fuss-marke p{margin-top:.8rem;font-size:.92rem;color:#A8BDD8;max-width:34ch} .fuss-zeile{margin-top:2.8rem;padding-top:1.3rem; border-top:1px solid rgba(255,255,255,.15);font-size:.82rem;color:#93A9C6; display:flex;flex-wrap:wrap;gap:.4rem 1.6rem} .fuss-zeile a{font-size:.82rem;color:#93A9C6} /* ── Auftritt ──────────────────────────────────────────────────────────── */ @keyframes heben{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}} .js .auf h1{animation:heben .7s var(--kurve) .08s backwards} .js .auf-vor{animation:heben .7s var(--kurve) .18s backwards} .js .auf-akt{animation:heben .7s var(--kurve) .28s backwards} @media (prefers-reduced-motion:reduce){ .js .auf h1,.js .auf-vor,.js .auf-akt{animation:none} } @media (prefers-contrast:more){ :root{--tinte-2:#2C333C;--tinte-3:#454C56;--linie:#B8B2A8} } /* ── Schmal ────────────────────────────────────────────────────────────── */ @media (max-width:900px){ /* minmax(0,1fr) und NICHT 1fr: Eine Rasterspur mit `1fr` hat min-width:auto, also die Mindestbreite ihres Inhalts - ein langes Wort wie "Insolvenzbekanntmachungen" auf einem Knopf sprengt die Spur dann ueber den Bildschirmrand hinaus. Gemessen bei 320 px: Dokument 351 px statt 320. Die klassische Grid-Falle, und sie faellt nur auf dem schmalsten Geraet auf. */ .fuss-gitter{grid-template-columns:1fr 1fr} /* Der Kopf bricht auf zwei Zeilen: Marke und Knopf oben, Navigation darunter. `order` statt umgestelltem Markup — sonst braeuchte es ein zweites Logo, das jemand pflegen muss. */ .kopf-zeile{flex-wrap:wrap;gap:.7rem 1.2rem;padding:.75rem 0} .marke img{width:178px} .kopf-tat,.nav a.kopf-tat{order:1;margin-left:auto} .nav{order:2;width:100%;gap:.2rem 1.4rem; border-top:1px solid var(--linie);padding-top:.5rem} .nav a{font-size:.86rem} /* ── Eingeklappte Navigation ──────────────────────────────────────────── NUR unter `.js`. Ohne Skript bliebe die Navigation sonst zugeklappt und der Schalter, der sie öffnet, tut nichts — die Seite wäre unbedienbar. So bleibt der Zustand ohne JavaScript exakt der bisherige. */ .js .nav-schalter{display:inline-flex;order:1} .js .kopf-tat{display:none} /* wandert ins Menü, siehe _grund.html */ .js .nav-kontakt{display:block} .js .nav{display:none} .js .nav[data-offen]{display:flex;flex-direction:column;align-items:stretch; gap:0;padding-top:.25rem;padding-bottom:.5rem} /* Im Klappmenü sind die Verweise Zeilen, keine Reiter: volle Breite, Trennlinie dazwischen und mindestens 44 px hoch — das ist das Maß, unter dem ein Ziel mit dem Daumen nicht mehr sicher zu treffen ist. */ .js .nav[data-offen] a{display:flex;align-items:center;min-height:44px; padding:.2rem 0;font-size:.95rem;border-bottom:1px solid var(--linie)} .js .nav[data-offen] a:last-child{border-bottom:0} .js .nav[data-offen] a[aria-current="page"]{ color:var(--tinte);border-bottom-color:var(--linie); box-shadow:inset 2px 0 0 var(--signal);padding-left:.7rem} } @media (max-width:560px){ :root{--spalte:min(1140px,100% - 2rem)} .fuss-gitter{grid-template-columns:1fr} .posten{grid-template-columns:1fr;gap:.3rem} /* Auf dem Telefon bleibt in der Dienstzeile nur die Rufnummer. Die Anschrift steht ohnehin im Fuss, die Registernummer auch. */ .dienst-innen span{display:none} .dienst-innen{justify-content:flex-end} } @media print{ .auf-bild,.nav,.dienst,.kopf-tat{display:none} .kopf-fest{position:static} body{background:#fff;color:#000} } /* Prüfliste. Bis zum 23.08.2026 stand vor jedem Punkt eine Ziffer: 01, 02, 03, 04. Der Auftraggeber hat das zweimal beanstandet, und der Grund ist nicht Geschmack: Eine Ziffernfolge behauptet eine REIHENFOLGE. „Der Kaufvertrag nennt den Eigentümer", „Die Bankverbindung steht im Vertrag", „Jede Zahlung trägt eine Belegnummer", „Kein Bargeld" — das sind vier voneinander unabhängige Tatsachen. Es gibt kein Erstes und kein Viertes. Wer sie nummeriert, verspricht dem Leser eine Ordnung, die er dann vergeblich sucht. Stattdessen eine kurze Linie im Rand: dasselbe Zeichen, das auf dieser Seite schon die Abschnittsmarke trägt. Sie sagt „hier fängt ein Punkt an" und sonst nichts. Die Schrittliste auf /ablauf behält ihre Ziffern. Dort sind es wirklich sechs Schritte in fester Folge. */ .pruefen{list-style:none;margin:.4rem 0 0;padding:0; display:grid;gap:.95rem;max-width:62ch} .pruefen li{position:relative;padding-left:2.4rem; font-size:1.01rem;color:var(--tinte-2)} .pruefen li::before{content:"";position:absolute;left:0;top:.62em; width:1.5rem;height:1px;background:var(--linie-stark)} .pruefen b{color:var(--tinte);font-weight:600} /* Auf dunklem Grund und auf Fotogrund ist die Haarlinie in Tinte unsichtbar. */ .teil-dunkel .pruefen li::before,.foto-grund .pruefen li::before{ background:rgba(255,255,255,.45)} /* ── Protokoll: Registerangaben als Wertetafel ───────────────────────────── Zwei Spalten, Haarlinie je Zeile. Bewusst keine Karte drumherum: Diese Angaben sind Tatsachen aus einem Register, keine Werbeaussage, die man hervorheben müsste. */ /* column-gap ist Pflicht: Ohne ihn enden alle Feldnamen an derselben Bildpunktspalte, an der die Werte anfangen. Bei kurzen Namen faellt das nicht auf, bei "Unternehmensgegenstand" klebt die Beschriftung am Wert. */ .protokoll{margin:0;display:grid;grid-template-columns:11rem minmax(0,1fr); gap:0 1.6rem;font-size:.96rem;max-width:46rem} .protokoll dt{padding:.72rem 0;border-top:1px solid var(--linie); color:var(--tinte-3);font-size:.82rem;letter-spacing:.04em} .protokoll dd{padding:.72rem 0;border-top:1px solid var(--linie);margin:0; color:var(--tinte)} .protokoll dt:first-of-type,.protokoll dd:first-of-type{border-top:0} /* ── Schritte ────────────────────────────────────────────────────────────── Die Zahl hängt im linken Rand, der Text läuft daneben. Dieselbe Logik wie das Seitenraster — eine Struktur, nicht zwei. */ .schritte{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:0} .schritte li{counter-increment:st;display:grid; grid-template-columns:3.4rem minmax(0,1fr);gap:0 1.4rem; padding:1.45rem 0;border-top:1px solid var(--linie)} .schritte li:first-child{border-top:0;padding-top:0} /* Das ::before ist im Grid ein eigenes Element und belegt Spalte 1. Ohne die ausdrueckliche Zuweisung unten rutscht der zweite Kindknoten (

) in die naechste Zeile und damit zurueck in Spalte 1 - der Absatz war dann 3,4rem breit und lief mit einem Wort je Zeile. Sichtbar erst im Vollbildschuss: die Seite war 10.103 px hoch. */ .schritte li::before{content:counter(st,decimal-leading-zero); grid-column:1;grid-row:1; font:500 .78rem/1.7 var(--grotesk);color:var(--tinte-3); font-variant-numeric:tabular-nums} .schritte li > *{grid-column:2} .schritte b{display:block;font:500 1.14rem/1.3 var(--titel); letter-spacing:-.01em;margin-bottom:.3rem} .schritte p{color:var(--tinte-2);font-size:.98rem;max-width:60ch} /* ── Notiz: Einschub mit Randlinie, kein Kasten ────────────────────────── */ .notiz{border-left:2px solid var(--linie-stark);padding-left:1.1rem; font-size:.94rem;color:var(--tinte-2);max-width:56ch} .notiz b{color:var(--tinte);font-weight:600} /* ── Formular ────────────────────────────────────────────────────────────── Felder mit weißem Grund und einer einzigen Linie unten. Rechenblattlogik: Man schreibt auf eine Linie, nicht in eine Schachtel. Die untere Linie trägt 3,4:1 und ist damit die nach WCAG 1.4.11 erforderliche Begrenzung. */ /* ══ Eingabefelder ════════════════════════════════════════════════════════ NEU GEBAUT am 22.08.2026. Die alte Fassung war ein weisses Feld mit einer Unterstreichung und sonst nichts. Auf dem beigen Grund sah das nicht zurueckhaltend aus, sondern unfertig - als haette jemand vergessen, das Formular fertig zu gestalten. Genau das war der Befund des Auftraggebers ("das Kontaktding fuer normal und Verwertung, beides billig"). Drei Dinge machen den Unterschied, keines davon ist Zierrat: 1 Ein RUNDUM-Rand. Ein Feld ist ein Behaelter; eine Linie darunter ist eine Schreiblinie. Der Behaelter sagt, wo die Eingabe hingehoert. 2 Ein INNENSCHATTEN. Eine Vertiefung liest sich als Schlitz, in den etwas hineingeht. Ohne ihn liegt das Feld auf dem Papier statt darin. 3 Ein FOKUSHOF. Der farbige Ring um das aktive Feld ist das, was gebaute Oberflaechen von Formularen aus dem Baukasten unterscheidet. Radius 2 px und nicht 8: Eine abgerundete Pille sieht aus wie jede zweite Vorlage. Zwei Pixel lesen sich als geschnittenes Papier. */ .formular{display:grid;gap:1.25rem;max-width:36rem} .feld{display:grid;gap:.42rem} /* Kleinbuchstaben statt gesperrter Grossbuchstaben. Die gesperrte Variante traegt die Abschnittsmarken (.nr); traegt sie AUCH die Feldbeschriftung, wirkt beides gleich wichtig und das Formular wie eine Tabelle. */ .feld > label{font:500 .88rem/1.35 var(--grotesk);color:var(--tinte); letter-spacing:0;text-transform:none} .feld > label span[aria-hidden]{color:var(--signal);font-weight:600} .feld input,.feld select,.feld textarea{ font:400 1rem/1.5 var(--grotesk);color:var(--tinte);background:#fff; border:1px solid var(--linie);border-radius:2px; padding:.78rem .85rem;width:100%; box-shadow:inset 0 1px 2px rgba(20,25,32,.045); transition:border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve)} .feld textarea{min-height:8.5rem;resize:vertical;line-height:1.55} /* Eigener Pfeil. Der System-Pfeil sieht auf jeder Plattform anders aus und ist der zweite Grund, warum Formulare nach Baukasten aussehen. */ .feld select{appearance:none;padding-right:2.4rem;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--tinte-2) 50%), linear-gradient(135deg,var(--tinte-2) 50%,transparent 50%); background-position:right 1.15rem center,right .8rem center; background-size:6px 6px,6px 6px;background-repeat:no-repeat} .feld input:hover,.feld select:hover,.feld textarea:hover{ border-color:var(--linie-stark)} /* outline:0 ist hier vertretbar, weil der Fokus DEUTLICHER wird statt zu verschwinden: farbiger Rand plus 3 px Hof. Ohne diesen Ersatz waere es ein Verstoss gegen WCAG 2.4.7. */ .feld input:focus,.feld select:focus,.feld textarea:focus{ border-color:var(--signal);outline:0; box-shadow:inset 0 1px 2px rgba(20,25,32,.03), 0 0 0 3px rgba(0,74,173,.16)} .feld input[readonly]{background:var(--papier-2);color:var(--tinte-2); box-shadow:none} .hilfe{font-size:.86rem;color:var(--tinte-2);max-width:46ch} .honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .knopf{font:600 .96rem/1 var(--grotesk);letter-spacing:.02em; background:var(--nacht);color:#fff;border:0;border-radius:0; padding:1.05rem 1.9rem;cursor:pointer;justify-self:start; transition:background var(--schnell) var(--kurve),transform var(--schnell) var(--kurve)} .knopf:hover{background:var(--nacht-tief)} .knopf:active{transform:translateY(1px)} .knopf[disabled]{opacity:.6;cursor:progress} .meldung{margin:0;padding:.9rem 0 .9rem 1.1rem;font-size:.96rem; border-left:3px solid var(--linie-stark)} .meldung-gut{border-left-color:#1C6B45;color:#12492F} .meldung-schlecht{border-left-color:#9B2F26;color:#7E241D} /* ── Fragen ────────────────────────────────────────────────────────────── */ .frage{border-top:1px solid var(--linie)} .frage summary{cursor:pointer;list-style:none;padding:1.05rem 2rem 1.05rem 0; font:500 1.04rem/1.4 var(--titel);position:relative} .frage summary::-webkit-details-marker{display:none} .frage summary::after{content:"";position:absolute;right:.35rem;top:1.5rem; width:9px;height:9px;border-right:1.5px solid var(--tinte-3); border-bottom:1.5px solid var(--tinte-3);transform:rotate(45deg); transition:transform var(--schnell) var(--kurve)} .frage[open] summary::after{transform:rotate(-135deg)} .frage p{padding:0 0 1.2rem;color:var(--tinte-2);font-size:.98rem;max-width:62ch} /* ── Bild mit Bildunterschrift ─────────────────────────────────────────── */ .ort{margin:0} .ort img{width:100%} .ort figcaption{margin-top:.7rem;font-size:.86rem;color:var(--tinte-3); max-width:44ch;border-top:1px solid var(--linie);padding-top:.7rem} /* ── Rechtstexte ───────────────────────────────────────────────────────── */ .recht{max-width:68ch} .recht h2{font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem);margin-top:2.4rem} .recht h2:first-of-type{margin-top:1.6rem} .recht p{margin-top:.75rem;color:var(--tinte-2);font-size:1rem} .recht ul{margin:.75rem 0 0;padding-left:1.2rem;color:var(--tinte-2); font-size:1rem;display:grid;gap:.4rem} /* ── Kontaktangaben ────────────────────────────────────────────────────── */ .direkt{display:grid;gap:.35rem} .direkt .gross-tel{font:400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--titel); letter-spacing:-.02em} .direkt .gross-tel a{color:var(--tinte);text-decoration:none} .direkt .gross-tel a:hover{color:var(--signal)} .anschrift{margin-top:1.8rem;display:grid;gap:.15rem;font-size:.97rem; color:var(--tinte-2)} .anschrift b{color:var(--tinte);font-weight:600} @media (max-width:560px){ .protokoll{grid-template-columns:1fr;gap:0} .protokoll dt{padding-bottom:0;border-top:1px solid var(--linie)} .protokoll dd{padding-top:.15rem;border-top:0} .protokoll dd:first-of-type{border-top:0} .schritte li{grid-template-columns:1fr;gap:.3rem} } /* Abstände zwischen den Blöcken der Kontaktspalte. */ .anschrift + .notiz{margin-top:2rem} .haenge-rand + .paar h2{margin-bottom:1.3rem} .formular .hilfe + .knopf{margin-top:.4rem} /* ── Zierlinie ───────────────────────────────────────────────────────────── Feine Doppellinie mit Raute zwischen den Abschnitten (_aufmacher.py → zierlinie.svg). Steht bewusst nur zwischen gleichfarbigen Abschnitten: an einer Farbkante trennt schon die Fläche, dort wäre sie Dekoration. */ .schluss{display:flex;justify-content:center;padding:clamp(40px,4.5vw,64px) 0} .schluss img{width:240px;height:12px;opacity:.5} /* ── Papierkorn ──────────────────────────────────────────────────────────── Ein feines, gerechnetes Rauschen als Grund von . Gibt dem Elfenbein die Anmutung von Papier statt Bildschirmweiß. Bewusst KEINE fixierte Vollbildschicht darüber: Genau so eine Schicht war im Schwesterprojekt die Ursache für sichtbares Ruckeln — sie erzwingt bei jedem Scrollen eine eigene Compositing-Ebene über der ganzen Seite. Als Hintergrund von body kachelt der Browser die 120 px einmal und ist fertig, und die dunklen Abschnitte decken ihn ohnehin ab. Als data:-SVG eingebettet, damit `img-src 'self'` in der CSP reicht und kein zusätzlicher Abruf entsteht. */ body{background-color:var(--papier); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.14'/%3E%3C/svg%3E"); background-repeat:repeat} @media print{body{background-image:none}} /* ── Szenenband ──────────────────────────────────────────────────────────── Ein Bild über die volle Textspalte, mit einer Zeile darunter. Ersetzt die Kachelwand der alten Fassung: ein großes Bild trägt mehr als sechs kleine. */ .band-bild{margin:0} .band-bild img{width:100%} .band-bild figcaption{margin-top:.8rem;padding-top:.7rem; border-top:1px solid var(--linie);font-size:.86rem;color:var(--tinte-3); max-width:62ch} .teil-dunkel .band-bild figcaption{border-top-color:rgba(255,255,255,.18); color:var(--nacht-text)} /* Bildband und Liste im selben hängenden Abschnitt: Das Bild sitzt in der ersten Rasterzeile der Inhaltsspalte, die Liste in der zweiten. */ .reihe-nach{margin-top:2.4rem;grid-column:2} @media (max-width:900px){.reihe-nach{grid-column:1}} .fliess .band-bild{margin:.6rem 0 .4rem} /* Pruefliste auf dunklem Grund. Sie stand urspruenglich nur auf hellem Papier; nach dem Umzug auf /kontakt (dunkler Abschnitt) trug die Tinte noch 1,40:1 und war praktisch unsichtbar. Gefunden hat das die Kontrastmessung, nicht das Auge - auf dem Schirm sah es nur "etwas dunkel" aus. */ .teil-dunkel .pruefen li{color:#C3D5EA} .teil-dunkel .pruefen b{color:#fff} .teil-dunkel .pruefen li::before{color:var(--nacht-text)} /* ══════════════════════════════════════════════════════════════════════════ SCHALTFLÄCHEN Die erste Fassung hatte auf der ganzen Seite genau EINE sichtbare Schaltfläche (der Absenden-Knopf). Peinert hat 26, Techet 20 — gemessen, nicht geschätzt. Reine Textlinks lesen sich vornehm und werden übersehen. Drei Stufen, damit die Hierarchie sichtbar bleibt: .knopf-voll gefüllt, dunkel — genau EINE Hauptaktion je Abschnitt .knopf-linie Umriss — gleichwertige Nebenwege .tat Text mit Linie — beiläufige Verweise ══════════════════════════════════════════════════════════════════════════ */ /* Elementname davor, damit die Regel (0,1,1) erreicht. Sonst schlagen `.posten a`, `.nav a` und `.fliess a` den Knopf: display faellt auf inline-block zurueck, die Reihe ist kein Flexkasten mehr und der Pfeil klebt am Text. Genau so war es bei den drei kleinen Knoepfen im Abschnitt „Fuer wen wir arbeiten". */ a.knopf-voll,a.knopf-linie,button.knopf-voll,button.knopf-linie{ display:inline-flex;align-items:center;gap:.6rem; font:600 .93rem/1 var(--grotesk);letter-spacing:.02em; padding:.95rem 1.5rem;border-radius:0;text-decoration:none;cursor:pointer; transition:background var(--schnell) var(--kurve), color var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve)} .knopf-voll{background:var(--nacht);color:#fff;border:1.5px solid var(--nacht)} .knopf-voll:hover{background:var(--nacht-tief);border-color:var(--nacht-tief)} .knopf-linie{background:transparent;color:var(--tinte); border:1.5px solid var(--linie-stark)} .knopf-linie:hover{border-color:var(--tinte);background:rgba(13,50,102,.05)} .knopf-voll::after,.knopf-linie::after{content:"→";font-size:1em;line-height:1; transition:transform var(--schnell) var(--kurve)} .knopf-voll:hover::after,.knopf-linie:hover::after{transform:translateX(3px)} .knopf-klein{padding:.62rem 1.05rem;font-size:.84rem} /* Auf dunklem Grund kehren sich die beiden um. `:is()` statt einer Aufzaehlung je Kontext: Beim Einbau der Aufmacher-Tafel (.tafel) hiess es hier nur `.teil-dunkel, .auf` — der Umriss-Knopf stand danach mit dunkler Schrift auf dunkelblauem Grund, rund 1,5:1. Jeder neue dunkle Abschnitt muss in diese Liste, sonst wiederholt sich das. */ :is(.teil-dunkel,.auf,.tafel,.leiste) .knopf-voll{background:#fff; color:var(--nacht-tief);border-color:#fff} :is(.teil-dunkel,.auf,.tafel,.leiste) .knopf-voll:hover{background:#E4ECF6; border-color:#E4ECF6} :is(.teil-dunkel,.auf,.tafel,.leiste) .knopf-linie{color:#fff; border-color:rgba(255,255,255,.55)} :is(.teil-dunkel,.auf,.tafel,.leiste) .knopf-linie:hover{border-color:#fff; background:rgba(255,255,255,.08)} .knopf-reihe{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center; margin-top:1.9rem} /* Schaltfläche im Briefkopf — Peinert und Techet haben beide eine. `.nav a` (0,1,1) schlaegt `.knopf-voll` (0,1,0): Ohne die zusaetzliche Verschachtelung unten erbt der Knopf die Navigationsfarbe und stand mit 1,70:1 auf dem dunklen Grund. Die Messung hat es gefunden, nicht das Auge. */ .kopf-tat{margin-left:auto;flex:none} .nav a.kopf-tat{margin-left:auto;color:#fff;border-bottom:0; letter-spacing:.02em;text-transform:none;padding:.62rem 1.05rem} .nav a.kopf-tat:hover{color:#fff} @media (max-width:900px){.kopf-tat{display:none}} /* ══════════════════════════════════════════════════════════════════════════ VERTRAUENSLEISTE Schmales dunkles Band unter dem Aufmacher mit drei knappen Aussagen. Jede muss nachprüfbar oder eine Zusage sein — keine Behauptung über die Vergangenheit, die eine Gesellschaft dieses Alters nicht belegen kann. ══════════════════════════════════════════════════════════════════════════ */ .leiste{background:var(--nacht-tief);color:#fff} .leiste-innen{display:flex;flex-wrap:wrap;justify-content:center; gap:.4rem 0;padding:.95rem 0} .leiste span{display:flex;align-items:center;gap:.6rem;padding:0 1.8rem; font-size:.83rem;letter-spacing:.04em;color:#D3E0F0} .leiste span + span{border-left:1px solid rgba(255,255,255,.22)} .leiste svg{width:15px;height:15px;flex:none;stroke:#9EBEE6;fill:none; stroke-width:1.6} /* ── Vertrauensleiste auf dem Telefon ───────────────────────────────────── Der senkrechte Trennstrich oben ist für EINE Zeile gedacht. Sobald die drei Aussagen untereinander stehen, trennt er nichts mehr, sondern hängt als Strich links neben dem Text in der Luft — bei zweizeiligen Aussagen über die volle Höhe. Gemessen bei 390 px: 151 px hoch, zwei solche Striche, dazu 1,8 rem Einzug ins Nichts. Untereinander trennt eine waagerechte Linie, und der Text beginnt an der Kante statt eingerückt. `align-items:start` setzt das Sinnbild auf die ERSTE Zeile: mittig zentriert schwebte es bei zwei Zeilen zwischen beiden. */ @media (max-width:700px){ .leiste-innen{gap:0;padding:.5rem 0} .leiste span{width:100%;padding:.6rem 0;align-items:start} .leiste span + span{border-left:0;border-top:1px solid rgba(255,255,255,.16)} .leiste svg{margin-top:.15em} } /* ══════════════════════════════════════════════════════════════════════════ ZAHLEN — „Der Betrieb in Zahlen" nach dem Muster von Peinert. Bei ISKA stehen dort ZUSAGEN und keine Bilanz: Eine im März 2026 eingetragene Gesellschaft kann keine 400 Kunden vorweisen, und eine erfundene Quote wäre nach § 5 UWG irreführend. Eine Zusage darf man dagegen geben — sie gilt ab heute. ══════════════════════════════════════════════════════════════════════════ */ .zahlen{display:grid;gap:0;margin:0;padding:0;list-style:none} .zahlen li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 1.1rem; padding:1.15rem 0;border-top:1px solid var(--linie)} .zahlen li:first-child{border-top:0;padding-top:0} .zahlen svg{width:19px;height:19px;margin-top:.3rem;stroke:var(--signal); fill:none;stroke-width:1.5} .zahlen b{display:block;font:600 1.06rem/1.35 var(--grotesk); color:var(--tinte);margin-bottom:.2rem;font-variant-numeric:tabular-nums} .zahlen p{color:var(--tinte-2);font-size:.95rem;max-width:52ch} /* ══════════════════════════════════════════════════════════════════════════ FÄLLE — drei typische Auftragslagen als Karten mit Umriss. Bewusst FALLTYPEN und keine Referenzfälle: kein Kundenname, keine Summe, kein Datum. ══════════════════════════════════════════════════════════════════════════ */ .faelle{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); gap:1.5rem} .fall{border:1px solid var(--linie);padding:1.5rem 1.4rem 1.3rem; display:flex;flex-direction:column;gap:.55rem;background:rgba(255,255,255,.5)} .fall .nr{border:0;padding:0} .fall h3{font-size:1.1rem} .fall p{color:var(--tinte-2);font-size:.94rem;flex:1} .fall a{font-weight:600;font-size:.9rem;margin-top:.3rem} /* ── Sprungliste ─────────────────────────────────────────────────────────── Übersicht über die Abschnitte einer langen Seite. Reine Ankerverweise — kein JavaScript, funktioniert auch mit abgeschaltetem Skript und im Druck. */ /* Spaltenabstand ist hier nicht Kosmetik: Ohne ihn steht der Pfeil des linken Eintrags direkt neben der Nummer des rechten und die Zeile liest sich als „↓02". */ .sprung{list-style:none;margin:0;padding:0;display:grid;gap:0 3rem; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))} .sprung a{display:flex;align-items:baseline;gap:.9rem;padding:.95rem 0; border-top:1px solid var(--linie);text-decoration:none;color:var(--tinte); font-size:1rem;transition:color var(--schnell) var(--kurve)} .sprung a:hover{color:var(--signal)} .sprung a span{font:500 .74rem/1 var(--grotesk);letter-spacing:.14em; color:var(--tinte-3);font-variant-numeric:tabular-nums;flex:none} .sprung a::after{content:"↓";margin-left:auto;color:var(--tinte-3); transition:transform var(--schnell) var(--kurve)} .sprung a:hover::after{transform:translateY(2px)} /* Ankersprung darf die Überschrift nicht an die Fensterkante kleben. */ [id]{scroll-margin-top:2rem} /* ══════════════════════════════════════════════════════════════════════════ RISS — Aufmacher als Konstruktionszeichnung ────────────────────────────────────────────────────────────────────────── Gebaut nach drei Referenzen, die der Auftraggeber genannt hat: bklit.com das freigelegte Konstruktionsraster mit Achsen, Knoten und schraffierten Feldern. Der tragende Gedanke. motion.dev die dunkle Tafel, die auf einer flachen Fläche liegt, mit Mono-Mikrobeschriftung in den Ecken und harten Kanten. kokonutui die sehr große, ruhig gesetzte Überschrift. Warum das hier inhaltlich passt und nicht nur hübsch ist: Eine Halle ist ein Raster, ein Verzeichnis ist ein Raster, und das Kernversprechen dieser Seite lautet „jede Position eine eigene Zeile". Das Bild sagt das, bevor der erste Satz gelesen ist — und es ist das Gegenteil des Foto-Aufmachers im Schwesterprojekt. ══════════════════════════════════════════════════════════════════════════ */ .riss{position:relative;background:var(--papier);overflow:hidden; border-bottom:1px solid var(--linie)} .riss-bild{position:absolute;inset:0;z-index:0} .riss-bild img{width:100%;height:100%;object-fit:cover} .riss-innen{position:relative;z-index:1; padding:clamp(28px,3.4vw,52px) 0 clamp(36px,4.4vw,68px)} /* Mikrobeschriftung. Mono ist hier nicht Dekoration: Eine technische Zeichnung wird beschriftet, nicht getextet. */ .riss-zeile{display:flex;justify-content:space-between;gap:1rem; font:400 .7rem/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--tinte-3)} .riss-zeile span{white-space:nowrap} .riss-zeile-unten{margin-top:clamp(24px,3vw,44px)} /* Der Cursor blinkt. Einzige Dauerbewegung auf der Seite, und sie kostet nichts: nur opacity, kein Layout, kein Paint außerhalb eines Zeichens. */ .riss-cursor{display:inline-block;width:.55em;color:var(--signal)} @keyframes blinken{0%,48%{opacity:1}52%,100%{opacity:0}} .js .riss-cursor{animation:blinken 1.15s steps(1,end) infinite} /* Die Tafel. Liegt im Raster wie ein aufgelegtes Blatt — deshalb der Schlagschatten und die harte Kante ohne Radius. */ .tafel{margin-top:clamp(22px,2.6vw,40px);background:var(--nacht-tief); color:#fff;padding:clamp(30px,3.4vw,56px) clamp(26px,3vw,52px) clamp(34px,3.8vw,60px);max-width:41rem; box-shadow:0 1px 0 rgba(13,50,102,.28), 0 18px 44px -28px rgba(8,32,63,.5)} .tafel-marke{display:block;width:186px;height:auto;margin-bottom:clamp(22px,2.4vw,34px)} .tafel h1{color:#fff;max-width:15ch} .tafel h1 .zeile{display:block} .tafel-vor{margin-top:1.5rem;max-width:46ch;font-size:1.06rem;line-height:1.6; color:#CFDDEF} .tafel .knopf-reihe{margin-top:2rem} /* Rechts neben der Tafel bleibt das Raster leer. Das ist Absicht und von motion.dev abgeschaut: Die Fläche trägt, wenn man ihr Platz lässt. */ @media (min-width:1100px){ .riss-innen{min-height:clamp(520px,58vh,660px);display:flex; flex-direction:column;justify-content:center} .riss-zeile-unten{margin-top:auto;padding-top:clamp(28px,3.4vw,52px)} } @media (max-width:560px){ .riss-zeile{font-size:.62rem;letter-spacing:.11em} .riss-zeile span:nth-child(2){display:none} .tafel-marke{width:150px} } /* Ausgangszustand für die Einblendung. Ohne die .js-Bedingung stünde die Seite ohne JavaScript unsichtbar da — der häufigste Fehler bei Scroll-Animationen. */ .js .riss-bild,.js .tafel,.js .riss-zeile,.js .tafel h1 .zeile, .js .tafel-vor,.js .tafel .knopf-reihe{opacity:0} @media (prefers-reduced-motion:reduce){ .js .riss-bild,.js .tafel,.js .riss-zeile,.js .tafel h1 .zeile, .js .tafel-vor,.js .tafel .knopf-reihe{opacity:1} .js .riss-cursor{animation:none} } /* ══════════════════════════════════════════════════════════════════════════ AUFSTELLUNG — die Arbeitsoberfläche als Aufmacher-Element ────────────────────────────────────────────────────────────────────────── Der Zug stammt von linear.app: Unter die Überschrift kommt kein Foto, sondern die Oberfläche selbst, in einem Rahmen mit Haarlinie und weichem Schein. Das ist der Unterschied zwischen „wir arbeiten sorgfältig" und „so sieht es aus". Inhaltlich ist es zugleich die Antwort auf das Schwesterprojekt: Peinert zeigt im Aufmacher die WARE. ISKA hat keinen öffentlichen Bestand und soll auch keinen haben — also zeigen wir das ARBEITSERGEBNIS. Das ist ehrlicher und für einen Insolvenzverwalter das stärkere Argument. Die Zeilen sind als MUSTER gekennzeichnet (Kopfzeile rechts). Sie behaupten keinen Bestand. ══════════════════════════════════════════════════════════════════════════ */ .flaeche{background:#0B1F3A;border:1px solid rgba(158,190,230,.22); border-radius:10px;overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 26px 70px -34px rgba(4,16,34,.85)} /* Titelleiste. Die drei Punkte sind keine Fensterknöpfe, sondern der Hinweis, dass hier eine Anwendung gezeigt wird — dieselbe Konvention wie bei den Produktaufnahmen der Referenzseiten. */ .flaeche-kopf{display:flex;align-items:center;gap:.7rem; padding:.72rem .95rem;border-bottom:1px solid rgba(158,190,230,.16); background:rgba(255,255,255,.03)} .flaeche-punkte{display:flex;gap:.32rem;flex:none} .flaeche-punkte i{width:8px;height:8px;border-radius:50%; background:rgba(158,190,230,.3)} .flaeche-titel{font:400 .74rem/1 var(--mono);letter-spacing:.06em; color:#9EBEE6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .flaeche-muster{margin-left:auto;flex:none;font:500 .62rem/1 var(--mono); letter-spacing:.18em;color:#0B1F3A;background:#9EBEE6; padding:.3rem .5rem;border-radius:3px} /* Die Tabelle. Mono für alles Zählbare, damit die Spalten stehen. */ .flaeche-tab{width:100%;border-collapse:collapse;font-size:.82rem} .flaeche-tab th{font:500 .62rem/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#7C9BC4;text-align:left; padding:.7rem .95rem;border-bottom:1px solid rgba(158,190,230,.14); font-weight:500} .flaeche-tab td{padding:.72rem .95rem;color:#DCE7F5; border-bottom:1px solid rgba(158,190,230,.09);vertical-align:middle} .flaeche-tab tr:last-child td{border-bottom:0} .flaeche-tab .sp-nr{font-family:var(--mono);color:#7C9BC4;width:3.4rem} .flaeche-tab .sp-zahl{font-family:var(--mono);text-align:right; font-variant-numeric:tabular-nums;white-space:nowrap} .flaeche-tab .sp-pap{font-family:var(--mono);color:#9EBEE6;text-align:center; width:4.2rem} /* Zustands-Plakette. Punkt plus Wort — der Punkt allein wäre eine reine Farbcodierung und damit für Farbenblinde wertlos (WCAG 1.4.1). */ .zust{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap; font-size:.78rem} .zust::before{content:"";width:6px;height:6px;border-radius:50%;flex:none} .zust-gut::before{background:#5FD3A0} .zust-mittel::before{background:#E8C46A} .zust-offen::before{background:#8FA6C4} .zust-gut{color:#9FE5C4} .zust-mittel{color:#F0DCA6} .zust-offen{color:#B6C6DC} /* #A6BCD6 statt #8FA6C4: Die Fusszeile liegt auf .02-Weiss ueber #0B1F3A, also auf gemessenen (50,73,102). Der alte Ton kam dort auf 3,69:1 - unter der Norm. Gefunden hat das erst die Pixelmessung am gerenderten Bild; die Rechnung aus den CSS-Werten hatte ihn durchgelassen, weil sie gegen die Tafelfarbe rechnete statt gegen die zusammengesetzte Flaeche. */ .flaeche-fuss{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem; justify-content:space-between;padding:.78rem .95rem; border-top:1px solid rgba(158,190,230,.16);background:rgba(255,255,255,.02); font:400 .72rem/1.5 var(--mono);color:#A6BCD6} .flaeche-fuss b{color:#DCE7F5;font-weight:500} @media (max-width:700px){ .flaeche-tab .sp-pap,.flaeche-tab th:nth-child(3){display:none} .flaeche-tab td,.flaeche-tab th{padding:.6rem .7rem} .flaeche-tab{font-size:.76rem} } /* Pill über der Überschrift — von resend.com. Trägt eine echte Aussage, nicht „Neu!". */ .pille{display:inline-flex;align-items:center;gap:.5rem; font:500 .72rem/1 var(--grotesk);letter-spacing:.04em; padding:.45rem .8rem .45rem .55rem;border-radius:100px; border:1px solid rgba(158,190,230,.3);color:#CFDDEF; background:rgba(255,255,255,.04);margin-bottom:1.5rem} .pille::before{content:"";width:6px;height:6px;border-radius:50%; background:#5FD3A0;flex:none} /* Lichtstreif auf der dunklen Tafel — von resend.com. Ein einzelner, sehr flacher Verlauf; kein animierter Vollbildverlauf, der war im Schwesterprojekt eine der Ruckelursachen. */ .tafel{position:relative;isolation:isolate} .tafel::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(120% 80% at 12% 0%, rgba(120,170,235,.16) 0%, rgba(120,170,235,0) 58%)} /* Aufmacher in zwei Spalten: Tafel links, Aufstellung rechts. Unter 1100 px stapeln sie — die Tabelle braucht Breite, sonst wird sie zur Wurst. */ @media (min-width:1100px){ .riss-zwei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:0 clamp(28px,3vw,52px);align-items:start} .riss-zwei .riss-voll{grid-column:1 / -1} .riss-zwei .tafel{margin-top:clamp(22px,2.6vw,40px);max-width:none} .riss-zwei .flaeche{margin-top:clamp(22px,2.6vw,40px);align-self:center} } @media (max-width:1099px){ .flaeche{margin-top:1.4rem} } /* Startzustand für die Einblendung — NUR im Aufmacher. Ungescopet war `.js .flaeche{opacity:0}` ein Bug: Auf /vorgang steht dieselbe Fläche außerhalb von .riss, das Skript animiert sie dort nicht, und die Statuskette samt Tabelle blieb unsichtbar. Ein Startzustand hinter `.js` muss immer genau so weit reichen wie die Animation, die ihn wieder aufhebt. */ .js .riss .flaeche,.js .riss .pille,.js .riss .flaeche tbody .fz{opacity:0} @media (prefers-reduced-motion:reduce){ .js .riss .flaeche,.js .riss .pille,.js .riss .flaeche tbody .fz{opacity:1} } /* ══════════════════════════════════════════════════════════════════════════ KOSTENUHR Eingaben links, Ergebnis rechts auf dunklem Grund. Die Zahl ist das Argument, also bekommt sie die Größe. ══════════════════════════════════════════════════════════════════════════ */ .uhr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr)); gap:1.6rem;margin:1.6rem 0 1.3rem;align-items:start} .uhr-eingabe{display:grid;gap:1.15rem} /* Dieselbe Bauform wie jedes andere Feld - Rand rundum, Radius, Innen- schatten, Fokushof. Vorher war auch das hier ein weisser Kasten mit einer Unterstreichung und stand direkt neben der dunklen Ergebniskarte: Der Unterschied zwischen gebaut und unfertig war auf einem Bild zu sehen. Der Fokus sitzt auf dem UMSCHLAG, nicht auf dem - sonst laege der Ring innerhalb des Rahmens und die Einheit bliebe aussen vor. */ .feld-einheit{display:flex;align-items:stretch;background:#fff; border:1px solid var(--linie);border-radius:2px; box-shadow:inset 0 1px 2px rgba(20,25,32,.045); transition:border-color var(--schnell) var(--kurve), box-shadow var(--schnell) var(--kurve)} .feld-einheit:hover{border-color:var(--linie-stark)} .feld-einheit:focus-within{border-color:var(--signal); box-shadow:inset 0 1px 2px rgba(20,25,32,.03), 0 0 0 3px rgba(0,74,173,.16)} .feld-einheit input{border:0;background:transparent;flex:1;min-width:0; font:500 1.32rem/1 var(--mono);color:var(--tinte); padding:.78rem .2rem .78rem .85rem; font-variant-numeric:tabular-nums} .feld-einheit input:focus{outline:0} .feld-einheit span{display:flex;align-items:center;padding:0 .95rem 0 .4rem; font:400 .88rem/1 var(--mono);color:var(--tinte-3)} /* Zahlenfeld-Pfeile weg: Sie sind winzig, treffen schlecht und stehen dem Mono-Satz im Weg. Getippt und gewischt wird ohnehin. */ .feld-einheit input::-webkit-outer-spin-button, .feld-einheit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .feld-einheit input[type=number]{-moz-appearance:textfield;appearance:textfield} .uhr-ergebnis{background:var(--nacht-tief);color:#fff;padding:1.5rem 1.4rem 1.35rem; border-radius:8px} .uhr-ergebnis .nr{color:var(--nacht-text)} .uhr-summe{font:400 clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem)/1 var(--titel); letter-spacing:-.02em;margin-top:.85rem;font-variant-numeric:tabular-nums} .uhr-balken{position:relative;height:5px;border-radius:3px;margin:1.15rem 0 .95rem; background:rgba(255,255,255,.16);overflow:hidden} .uhr-balken span{position:absolute;inset:0 auto 0 0;background:#5FD3A0; border-radius:3px;width:33%;transition:width var(--schnell) var(--kurve)} .uhr-zeile{font-size:.94rem;color:#C3D5EA;margin-top:.35rem} .uhr-zeile b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums} .uhr-delta b{color:#9FE5C4} /* ── Hakenliste ──────────────────────────────────────────────────────────── */ .liste-haken{list-style:none;margin:0;padding:0;display:grid;gap:0} .liste-haken li{position:relative;padding:.92rem 0 .92rem 1.9rem; border-top:1px solid var(--linie);font-size:.97rem;color:var(--tinte-2)} .liste-haken li:first-child{border-top:0} .liste-haken li::before{content:"";position:absolute;left:.1rem;top:1.28rem; width:9px;height:5px;border-left:1.6px solid var(--signal); border-bottom:1.6px solid var(--signal);transform:rotate(-45deg)} .liste-haken b{color:var(--tinte);font-weight:600} /* ── Karte ───────────────────────────────────────────────────────────────── */ /* Die Landkarte hat jetzt einen EIGENEN Namen. Vorher hiess sie `.karte` wie die Karteikarte, trug damit deren weissen Kasten mit Rand und Radius und sass als 760-px-Bild mittig darin - links und rechts je 70 px reinweisser Rand, der weder zum Bild noch zum Abschnitt passte. */ .gebietsbild{margin:0;background:transparent;border:0;box-shadow:none; padding:0} .gebietsbild img{width:100%;max-width:760px;margin-inline:auto; background:transparent} .gebietsbild figcaption{margin-top:.9rem} /* ══════════════════════════════════════════════════════════════════════════ VORGANGSABFRAGE ══════════════════════════════════════════════════════════════════════════ */ .abfrage{max-width:none;margin-top:1.9rem} .abfrage-felder{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem; align-items:end} /* background-COLOR, nicht background: Die Kurzform wuerde das background-image der Karten-Regel darueber mit zuruecksetzen. */ .abfrage .feld input{background-color:#fff;font-family:var(--mono);font-size:.98rem} .abfrage-karte{max-width:44rem;margin-top:1.9rem} .abfrage-karte .abfrage{margin-top:0} /* Der Knopf sitzt in der Feldzeile und muss unten buendig mit den Feldern stehen - nicht mit deren Beschriftung. */ .abfrage-felder .knopf-voll{align-self:end;width:auto} @media (max-width:700px){.abfrage-felder{grid-template-columns:1fr}} /* Statuskette. Sechs Schritte, der erreichte hervorgehoben. Die Marke „läuft" steht als Wort da, nicht nur als Farbe — Farbe allein ist nach WCAG 1.4.1 keine Information. */ .kette{list-style:none;margin:0;padding:1.05rem .95rem .3rem;display:grid; gap:0;border-bottom:1px solid rgba(158,190,230,.16)} .kette li{display:grid;grid-template-columns:16px 2.2rem minmax(0,1fr) auto; align-items:center;gap:.7rem;padding:.42rem 0;font-size:.85rem} .kette-punkt{width:9px;height:9px;border-radius:50%;justify-self:center; border:1.5px solid rgba(158,190,230,.45)} .kette-nr{font:400 .68rem/1 var(--mono);color:#7C9BC4; font-variant-numeric:tabular-nums} .kette-label{color:#8FA6C4} .kette-fertig .kette-punkt{background:#5FD3A0;border-color:#5FD3A0} .kette-fertig .kette-label{color:#C9DAEE} .kette-jetzt .kette-punkt{background:#9EBEE6;border-color:#9EBEE6; box-shadow:0 0 0 4px rgba(158,190,230,.2)} .kette-jetzt .kette-label{color:#fff;font-weight:600} .kette-marke{font:500 .6rem/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:#0B1F3A;background:#9EBEE6; padding:.28rem .45rem;border-radius:3px} /* ── Verlauf ─────────────────────────────────────────────────────────────── */ .verlauf{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:0} .verlauf li{display:grid;grid-template-columns:6.4rem minmax(0,1fr);gap:0 1rem; padding:.75rem 0;border-top:1px solid var(--linie);font-size:.94rem; color:var(--tinte-2)} .verlauf li:first-child{border-top:0} .verlauf time{font-family:var(--mono);font-size:.8rem;color:var(--tinte-3); font-variant-numeric:tabular-nums} /* ── Belegtabelle ────────────────────────────────────────────────────────── */ .protokoll-tab{width:100%;border-collapse:collapse;margin-top:.9rem; font-size:.92rem} .protokoll-tab th{font:500 .62rem/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--tinte-3);text-align:left; padding:.55rem 0;border-bottom:1px solid var(--linie);font-weight:500} .protokoll-tab td{padding:.68rem 0;border-bottom:1px solid var(--linie); color:var(--tinte-2)} .protokoll-tab tr:last-child td{border-bottom:0} .protokoll-tab .sp-zahl{text-align:right;font-family:var(--mono); font-variant-numeric:tabular-nums;color:var(--tinte)} .mono{font-family:var(--mono);font-size:.88rem} /* Die Ergebnistabelle in der Fläche hat nur zwei Spalten. */ .flaeche-tab tbody td:first-child{color:#B6C6DC} /* ══════════════════════════════════════════════════════════════════════════ ANSPRECHPARTNER Eine Person statt eines Postfachs — die Idee stammt aus dem Schwesterprojekt, die Form nicht: dort eine Kachel mit Foto, hier eine Zeile im hängenden Raster. Die Leerstelle ist ABSICHTLICH sichtbar beschriftet. Ein Stockfoto wäre im Insolvenzumfeld das Gegenteil von Vertrauen: In dieser Branche werden Angebote im Namen fremder Häuser mit gestohlenen Gesichtern verschickt. ══════════════════════════════════════════════════════════════════════════ */ .person{display:grid;grid-template-columns:82px minmax(0,1fr);gap:1.1rem; align-items:start;padding-bottom:1.5rem;border-bottom:1px solid var(--linie)} .person-bild{aspect-ratio:4/5;border:1px dashed var(--linie-stark); display:grid;place-items:center;background: repeating-linear-gradient(135deg,transparent 0 6px,rgba(126,135,148,.07) 6px 12px)} .person-bild span{font:400 .58rem/1.3 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--tinte-3);text-align:center} .person-name{font:400 1.28rem/1.2 var(--titel);letter-spacing:-.012em; margin:.55rem 0 .35rem} .person-text p.weich{font-size:.94rem} .person-ruf{margin-top:.6rem} .person-ruf a{font:600 1.02rem/1 var(--grotesk);color:var(--tinte); text-decoration:none} .person-ruf a:hover{color:var(--signal)} /* ── Rückrufwunsch, zusammenklappbar ─────────────────────────────────────── */ .rueckruf{margin-top:1.4rem;border-bottom:1px solid var(--linie)} .rueckruf summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0; font:500 1rem/1.4 var(--grotesk);color:var(--signal);position:relative} .rueckruf summary::-webkit-details-marker{display:none} .rueckruf summary::after{content:"";position:absolute;right:.4rem;top:1.35rem; width:9px;height:9px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg); transition:transform var(--schnell) var(--kurve)} .rueckruf[open] summary::after{transform:rotate(-135deg)} .rueckruf .formular{padding-bottom:1.5rem;max-width:none} /* Auswahlgruppe. fieldset hat Browser-Vorgaben, die das Raster stören. */ .feld-gruppe{border:0;margin:0;padding:0;min-width:0} .feld-gruppe legend{padding:0;font:500 .8rem/1.4 var(--grotesk); letter-spacing:.05em;color:var(--tinte-2);text-transform:uppercase; margin-bottom:.5rem} .wahl{display:grid;gap:.1rem} .wahl label{display:flex;align-items:center;gap:.65rem;padding:.5rem .1rem; cursor:pointer;font-size:.97rem;color:var(--tinte-2)} .wahl label:hover{color:var(--tinte)} .wahl input{width:17px;height:17px;flex:none;accent-color:var(--signal); margin:0;cursor:pointer} .wahl input:focus-visible{outline:2.5px solid var(--signal);outline-offset:2px} /* Das Folgefeld bleibt im Dokument und wird nur gesperrt — ein per display:none eingeblendetes Feld wird nicht angesagt. */ .feld-folge{transition:opacity var(--schnell) var(--kurve)} .feld-folge:has(input:disabled){opacity:.45} .feld input:disabled{cursor:not-allowed;background:var(--papier-2)} /* Feldfehler aus der Schnittstelle sichtbar machen. */ .feld input[aria-invalid="true"],.feld select[aria-invalid="true"], .feld textarea[aria-invalid="true"]{border-bottom-color:#9B2F26; border-bottom-width:2px} .mt-gross{margin-top:2.4rem} /* ══ Katalogseite ═════════════════════════════════════════════════════════ HIER STAND EIN TOTER BLOCK, und er war nicht harmlos. Der frueher nachgebaute Katalogdeckel (`.katalog-auf`, `.heft`, `.heft-siegel`, `.heft-innen`, `.heft-marke`, `.heft-titel`, `.heft-fuss`) ist bei einem Umbau aus den Vorlagen geflogen, seine Regeln blieben aber stehen - darunter zwei, die denselben Namen tragen wie Teile des echten Hefts weiter unten: .heft-buehne gab der Buehne des Blaetterhefts 14,4 px / 22,4 px Polsterung. Dadurch war der Inhaltsbereich 36,8 px schmaler als die Buehne, jede Seite entsprechend 18,4 px zu schmal - und genau diese Luecke stand zwischen Blattrand und Pfeil. .heft-stand war ein Grossbuchstaben-Etikett des Deckels und ueberschrieb den Seitenzaehler. Toter Code faellt nicht auf, solange er nur Speicher kostet. Er faellt auf, sobald er einen Namen belegt, den ein lebendes Bauteil braucht. */ /* ── Warengruppen ───────────────────────────────────────────────────────── Dieselbe Bauform wie `.schritte`: Zahl im Rand, Text daneben, Haarlinie statt Kasten. Die Zahl steht hier als echtes Element im Markup und nicht als ::before - dadurch entfaellt die Gridfalle, die `.schritte` sich einfangen musste. */ .gruppen{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0} /* 3,4 rem reichten fuer „01". Sie reichen NICHT fuer „SEITE 3-25", und die Angabe lief quer ueber die Ueberschrift. Gesperrte Grossbuchstaben brauchen Platz: „SEITE" misst bei .8rem und .17em Sperrung rund 60 px, die Zahlenzeile darunter bis 66 px. 6,4 rem deckt beides mit Rand. */ .gruppen li{display:grid;grid-template-columns:6.4rem minmax(0,1fr); gap:0 1.4rem;padding:1.7rem 0;border-top:1px solid var(--linie)} .gruppen li:first-child{border-top:0;padding-top:0} .gruppen .nr{padding-top:.32rem;align-self:start;line-height:1.5} @media (max-width:640px){ /* Auf dem Telefon steht die Angabe ueber der Ueberschrift statt daneben - 6,4 rem Rand fressen dort ein Fuenftel der Zeilenbreite. */ .gruppen li{grid-template-columns:minmax(0,1fr);gap:.35rem} .gruppen .nr{padding-top:0} } .gruppen h3{font:500 clamp(1.12rem, .95rem + .5vw, 1.34rem)/1.28 var(--titel); color:var(--tinte);margin:0 0 .5rem} .gruppen p{font-size:1.01rem;color:var(--tinte-2);max-width:62ch;margin:0} /* Der Preis-Absatz ist der Nutzwert der Seite und muss sich vom beschreibenden Satz darueber absetzen. Ein senkrechter Strich statt einer Hinterlegung: Auf dem stillen Papier waere eine zweite Flaeche eine Karte, und Karten hat diese Seite bewusst keine. */ .gruppen-zaehlt{margin-top:.85rem !important;padding-left:1.05rem; border-left:2px solid var(--linie-stark); font-size:.97rem !important;color:var(--tinte-2)} .gruppen-zaehlt b{color:var(--tinte);font-weight:600} /* Vorspann ueber einer Liste, die selbst kein .fliess ist. */ .einzug{max-width:62ch;margin:0} /* Ein `.fliess` ist ein Grid. Steht es als Spalte in einem `.paar` neben einer hohen Nachbarspalte (etwa einem Formular), streckt es sich auf deren Hoehe und verteilt seine Absaetze ueber die ganze Strecke - zwischen zwei Saetzen klaffte auf /katalog eine Luecke von rund 200 px, und der Randstrich der Schlussnotiz lief ins Leere. `align-content:start` legt die Zeilen wieder oben aufeinander; der Abstand bleibt der aus `gap`. */ .paar > .fliess{align-content:start} /* ══ Karten und Flächen ═══════════════════════════════════════════════════ Nachgezogen am 22.08.2026. Bis dahin bestand die Seite unterhalb des Aufmachers fast nur aus Haarlinien auf Papier. Der Aufmacher selbst hatte eine dunkle Tafel, eine geschichtete Aufstellung und Schatten - und genau dieser Unterschied war der Befund: Die Startseite verspricht eine gebaute Oberfläche, die Unterseiten liefern Fließtext mit Trennstrichen. Die Karte ist deshalb KEIN Dekorationselement, sondern die Fortsetzung der Sprache, die der Aufmacher schon spricht: weiße Fläche über beigem Papier, ein Haarrand, ein sehr weicher tiefer Schatten. Zwei Schatten übereinander, weil ein einzelner entweder hart (nah) oder wolkig (weit) aussieht — der nahe zeichnet die Kante, der weite hebt das Blatt vom Papier. */ .karte{background:#fff;border:1px solid var(--linie);border-radius:3px; box-shadow:0 1px 2px rgba(20,25,32,.045), 0 16px 34px -20px rgba(13,50,102,.34)} .karte-innen{padding:clamp(1.35rem,2.1vw,1.95rem)} .karte-kopf{padding:clamp(1.15rem,1.8vw,1.5rem) clamp(1.35rem,2.1vw,1.95rem); border-bottom:1px solid var(--linie);display:grid;gap:.35rem} .karte-kopf h2,.karte-kopf h3{font-size:1.3rem;margin:0} .karte-kopf p{font-size:.94rem;color:var(--tinte-2);max-width:46ch} /* Auf dem weißen Karteninneren stünde ein weißes Feld sonst weiß auf weiß. background-COLOR und nicht background: Die Kurzform setzt auch background-image zurück — und genau dort steckt der eigene Pfeil des