/* Elisabeth Zick, Rechtsanwaeltin in Wien
Umsetzung des Referenzlayouts vom 6. September 2026, siehe design/DESIGN.md.
Aufbau: Schriften, Farben, Grundlagen, Kopf, Hero, Faktenzeile, Rechtsgebiete,
Abschluss, Dialoge, Ansichten. */
/* ---------- Schriften ----------
Ausgeliefert werden nur die WOFF2-Dateien aus tools/build-fonts.sh.
Die TTF unter assets/fonts/ sind die Quelle und werden nicht geladen.
Instrument Sans setzt die ganze Seite; DM Sans und Playfair Display liegen
nur noch als Quelle fuer einen Rueckbau im Projekt. */
@font-face {
font-family: "Instrument Sans";
src: url("assets/fonts/instrument-sans-400.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Instrument Sans";
src: url("assets/fonts/instrument-sans-500.woff2") format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Instrument Sans";
src: url("assets/fonts/instrument-sans-700.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
/* ---------- Farben und Masse ----------
Zwei Orangetoene mit Absicht: --akzent ist das helle Orange des
Referenzbildes und traegt nur Flaechen ohne Text. --akzent-tief ist so weit
abgedunkelt, dass weisse Schrift darauf 4,7 zu 1 erreicht; es traegt
Schaltflaechen und die Wortmarke. Das helle Orange schafft das nicht. */
:root {
color-scheme: light;
--papier: #f4f3f1; /* Seitenflaeche */
--weiss: #ffffff;
--karte: #f3f2ef; /* Karten auf Weiss */
--bild: #eae7e0; /* Bildflaeche im Hero, warmes Beige */
/* Anthrazit statt Schwarz: #17161a stand mit 16,2 zu 1 hart auf dem
warmen Papier, #35312c nimmt den Beigeton auf und kommt auf 11,6 zu 1.
Immer noch weit ueber den 4,5 zu 1, aber ruhiger im Bild. */
--tinte: #35312c; /* Ueberschriften und Fliesstext */
--tinte-leise: #6b6862; /* Nebentext, 4,8:1 auf Papier */
--tinte-still: #83807a; /* kleinste Beschriftungen */
--akzent: #ee6a33; /* nur Flaechen, nie Text; weisse Symbole darauf erreichen 3,1:1 */
--akzent-tief: #c74a15; /* Schaltflaechen und Wortmarke */
--akzent-tiefer: #a83c0f;
--linie: #e3e0da;
--ziffer: #cbc6bd; /* grosse Ordnungsziffer im Register, bewusst leise */
--marker: #5ecfc0; /* Mint der Unterstreichung unter "Ihr Anliegen." */
--knopf-hero: #173c68; /* Schaltflaeche im Hero, Weiss darauf 10,5:1 */
/* Die Fusszeile traegt seit dem 6. September 2026 eine eigene dunkelblaue
Flaeche. Derselbe Wert wie --knopf-hero, aber ein eigener Name: die
Fusszeile ist keine Schaltflaeche und soll sich unabhaengig aendern
lassen. Er gilt in beiden Farbwelten, in der Mintfassung ist es das Navy
der Ueberschriften. Weiss darauf erreicht 11,2 zu 1. */
--fusszeile: #123054; /* Fusszeile, ein Schritt dunkler als das Navy der Schrift */
--fusszeile-schrift: #ffffff;
--knopf-hero-tief: #0f2c4d; /* dieselbe Flaeche beim Ueberfahren, 13,6:1 */
--rahmen: #b5b1ab; /* feine Linie um den Namen im Hero */
--knopf-schrift: #fff; /* Schrift auf --akzent-tief */
--kachel-schrift: #fff; /* Symbol auf --akzent */
--knopf-schatten: 199 74 21; /* Schattenfarbe der Schaltflaeche */
--bild-schatten: 78 64 46; /* Bodenschatten in der Bildflaeche */
--sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
--schadenersatz-spalten: minmax(0, 2fr) minmax(0, 1fr);
--rand: clamp(20px, 3.4vw, 56px);
--kopf: clamp(56px, 5.4vw, 78px);
--seitenluft: clamp(10px, 1.1vw, 18px); /* Luft ueber dem Kopf, geht in die Hero-Hoehe ein */
--radius: clamp(18px, 1.7vw, 26px);
--name: clamp(50px, 7.2vw, 106px); /* Schriftgroesse des Namens, traegt auch die Masse des Rahmens */
--marke: clamp(30px, 2.9vw, 42px); /* Hoehe des Signets im Kopf */
/* Illustrierte Leistungen auf index2.html, nach der Vorlage vom
15. September 2026. Die Regeln greifen nur in dieser Variante. */
--leistungen-kontur: #63bcac; /* dekorativ, 2,03:1 auf warmem Papier, kein Text */
--leistungen-polster: clamp(72px, 7.5vw, 136px);
/* Die Gebietstitel standen bis zum 21. September 2026 auf 3,3vw bis 54px und
damit fast so gross wie der Abschnittstitel; seither zwei Stufen darunter. */
--leistungen-titel: clamp(26px, 2.5vw, 40px);
--leistungen-titel-zeile: 1.16;
--leistungen-titel-laufweite: -.03em;
--leistungen-text: clamp(16px, 1.2vw, 18px);
--leistungen-text-zeile: 1.55;
--leistungen-text-abstand: clamp(12px, 1.2vw, 20px);
--leistungen-punkte-luft: clamp(7px, .7vw, 10px);
--leistungen-kopf-luft: clamp(32px, 4vw, 64px); /* Abstand vom Abschnittstitel zum First der Zeichnung */
--leistungen-luft: clamp(24px, 2.4vw, 40px); /* Abstand der Textinseln zu den Linien der Zeichnung */
/* Breite einer Textinsel: 21 Zeilen-Em. Die laengste Zeile, "Rechtsmittel
gegen Urteil und Beschluss", misst mit ihrem Quadrat 20,2 em; der Rest ist
Luft, damit sie bei jeder Schriftgroesse auf einer Zeile bleibt. */
--leistungen-insel: calc(21 * var(--leistungen-text));
/* Fuenf Spalten: Textinsel, drei Teile der Zeichnung, Textinsel. Die
Zeichnung ist an zwei ihrer Linien geteilt, damit die Inseln daran
anschliessen koennen: bei 23,6 Prozent ihrer Breite steht die linke Kante
des Dokumentstiels (x = 731 im viewBox), bei 90,7 Prozent die rechte Wand
des Hauses (x = 1275). Die Inselspalten sind so breit wie ihr Text samt
Luft und nicht breiter, die Zeichnung bekommt den Rest, mindestens aber
34 Prozent, verteilt im selben Verhaeltnis: unter etwa 1330 Pixeln
rutschen die Inseln unter 21 em, unter 1180 brechen ihre Zeilen um, die
Zeichnung bleibt dann so gross wie bisher. Wer die Zeichnung austauscht,
misst die beiden Linien neu. */
--leistungen-spalten: minmax(0, calc(var(--leistungen-insel) + var(--leistungen-luft))) minmax(8.02%, 236fr) minmax(22.81%, 671fr) minmax(3.16%, 93fr) minmax(0, calc(var(--leistungen-insel) + var(--leistungen-luft)));
/* Hoehe, auf der jede Insel beginnt, in Prozent der Zeichnungshoehe, jeweils
an einer Linie der Zeichnung: Zivilrecht an der Oberkante des Dokuments
(y = 235 im viewBox), Strafrecht an der oberen Ecke der Hauswand und dem
Scheitel des Kopfes darunter (y = 410), Schadenersatz in der freien Ecke
unter dem Dokument neben dem Stiel (Unterkante des Dokuments y = 595, die
Insel beginnt etwas tiefer). Die Inseln sind 26 bis 37 Prozent der
Zeichnung hoch; Zivilrecht endet damit vor Schadenersatz, und
Schadenersatz endet an oder vor der Grundlinie bei 98 Prozent. Welche
Insel wohin gehoert, hat Alfred am 21. September 2026 festgelegt:
Schadenersatz zum Vertrag, Strafrecht zum Kopf der Person. */
--leistungen-zivilrecht-oben: 16%;
--leistungen-strafrecht-oben: 37%;
--leistungen-schadenersatz-oben: 62%;
--leistungen-bildbreite: 100%;
--leistungen-bild-mobil: 320px;
--leistungen-strich: 1.5px;
/* Auftritt der Bloecke beim Scrollen, siehe Abschnitt "Auftritt beim
Scrollen". Weg und Kurve sind dieselben wie in der Animation des Hero:
eine Bewegung fuer die ganze Seite, nicht zwei. */
--auftritt-weg: 12px;
--auftritt-dauer: .5s;
--auftritt-kurve: cubic-bezier(.22, 1, .36, 1);
--auftritt-versatz: 70ms; /* Abstand zwischen Elementen, die gemeinsam kommen */
}
/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { background: var(--papier); scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--papier); color: var(--tinte); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, a { -webkit-tap-highlight-color: transparent; }
/* Links tragen seit dem 6. September 2026 keine Unterstreichung mehr, auf
Wunsch von Alfred. Damit sie trotzdem als Link zu erkennen sind, stehen sie
im vollen --tinte und im Schnitt 500, waehrend der Satz ringsum im leisen
--tinte-leise und im Grundschnitt liegt. Farbe allein wuerde zu wenig
unterscheiden; die Kombination aus Farbe und Schnitt reicht. Ausgenommen ist
die Mint-Unterstreichung der Ueberschriften, die ist Schmuck und kein Link. */
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--akzent-tief); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10; padding: 12px 18px; border-radius: 0 0 10px 0; background: var(--tinte); color: #fff; font-size: 14px; }
.skip-link:focus { left: 0; }
/* Ueber 1600 px waechst nur der Rand, nicht die Zeilenlaenge. */
.page { max-width: 1600px; margin-inline: auto; padding: var(--seitenluft) var(--rand) 0; }
/* ---------- Kopf ---------- */
/* Der Einzug ist derselbe wie im Namensrahmen des Heros und im Abschnitt
Rechtsgebiete, calc(.35 * var(--name)). Damit stehen die Navigationspunkte
auf einer Senkrechten mit "Elisabeth" und den Ueberschriften darunter. */
/* position und z-index, seit "Über mich" am rechten Ende steht: die
Bildflaeche des Heros ist positioniert und reicht mit ihrem negativen
oberen Rand unter den Kopf. Ohne eigene Ebene malte sie den Punkt zu. */
.site-header { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); min-height: var(--kopf); padding-left: calc(.35 * var(--name)); }
/* Die Marke im Kopf: erst eine Wortmarke, die den Namen aus der H1 wiederholte,
dann ein Monogramm, beides hat Alfred am 6. September 2026 abbestellt. Seit
dem 7. September 2026 steht dort das Signet, also eine reine Bildmarke, die
nichts wiederholt. Es liegt auf derselben Senkrechten wie "Elisabeth" im
Hero; die Navigationspunkte ruecken dadurch um seine Breite und den Abstand
der Leiste nach rechts. Auf schmalen Fenstern steht es allein links, der
Hamburger rechts. */
.kopf-marke { flex: 0 0 auto; display: flex; align-items: center; }
/* Die Hoehe steuert der Token, die Breite folgt dem Seitenverhaeltnis der
Datei. Beim Ueberfahren passiert nichts: Alfred wollte am 7. September 2026
ausdruecklich keinen Effekt auf der Marke. Nur der Fokusring bleibt, den
braucht die Tastaturbedienung. */
.kopf-marke img { height: var(--marke); width: auto; }
/* Die Punkte standen im leisen Nebenton und im Grundschnitt und waren neben dem
grossen Namen kaum zu sehen. Sie stehen jetzt in der vollen Tinte und im
mittleren Schnitt, wie die Kontaktangaben im Hero. Der Ueberfahrton geht
deshalb auf --akzent-tief, sonst gaebe es keinen Unterschied mehr zur
Ruhelage; in der Mintfassung faengt styles-mint.css das ab, weil dort
--akzent-tief und --tinte derselbe Navyton sind. */
/* flex-wrap deckt den Fall ohne JavaScript ab: dort bleiben die Punkte auch
auf dem Telefon im Kopf stehen, und fuenf davon sind unter 390 Pixeln
Fensterbreite breiter als die Seite. Vorher schnitt overflow-x: clip den
letzten Punkt ab, jetzt bricht die Zeile um. */
.main-nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: clamp(18px, 2.3vw, 38px); font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; color: var(--tinte); }
/* Die Seite "Über mich" beginnt direkt mit dem Bildband. Die Luft oberhalb
des Kopfes liegt deshalb im Kopf selbst, damit die Navigation im gesamten
sichtbaren Band mittig steht, auch nach einem Zurueckscrollen. */
.about-header { margin-top: calc(-1 * var(--seitenluft)); min-height: calc(var(--kopf) + var(--seitenluft)); }
/* Nur diese Unterseite: Weiss bis an die Fensterkanten, ohne die
bestehenden Textkanten oder die Hoehe der Navigation zu verschieben. */
.about-header::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--weiss); }
/* "Über mich" steht am rechten Ende der Leiste, auf Wunsch Alfreds vom
6. September 2026. Dort liegt im Hero die Bildflaeche des Portraets: sie
reicht mit ihrem negativen oberen Rand unter den Kopf, ihre rechte Kante ist
die rechte Textkante der Seite. Der Punkt sitzt deshalb sichtbar auf dem
Grund des Portraets und nicht mehr auf dem Papier. Der Abstand zur Kante ist
--radius, derselbe Wert wie die Eckenrundung der Bildflaeche: so bleibt der
Punkt innerhalb der Rundung und stoesst nicht an die Ecke.
Das margin-left: auto braucht die Leiste in voller Breite, daher flex: 1 1
auto in der Regel darueber. Auf schmalen Fenstern ohne JavaScript bricht die
Zeile um, dann steht der Punkt rechts in der zweiten Zeile. */
.main-nav .nav-rechts { margin-left: auto; margin-right: var(--radius); }
.main-nav a { position: relative; padding-block: 4px; transition: color .2s ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--marker); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
/* Beim Ueberfahren aendert sich seit dem 7. September 2026 nur die Linie, nicht
die Schrift: sie faehrt im hellen Mint --marker ein, demselben Ton wie die
Unterstreichung unter den Ueberschriften. Als Schriftfarbe waere dieses Mint
mit 1,5 zu 1 unlesbar, als Linie unter dem Wort ist es Schmuck und braucht
den Kontrast nicht. Der Punkt selbst bleibt im --tinte stehen. */
.main-nav a:hover::after { transform: scaleX(1); }
/* Hamburger. Er steht nur auf schmalen Fenstern und nur mit JavaScript: ohne
Skript liesse sich das Vollbildmenue nicht oeffnen, dann bleiben die
Navigationspunkte wie bisher im Kopf stehen. Die Umschaltung steht weiter
unten im Block fuer schmale Fenster.
Die Hoehe ist die volle Kopfhoehe, nicht 44 Pixel: damit liegt seine Mitte
auf derselben Waagerechten wie das Kreuz im geoeffneten Menue, und beide
wirken als ein Element, das umschaltet. Die Breite von 44 Pixeln haelt die
Beruehrflaeche auf dem von Apple und Google empfohlenen Mindestmass. */
.nav-toggle { display: none; width: 44px; height: var(--kopf); margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--tinte); cursor: pointer; }
/* Drei Striche in derselben Staerke wie das Pluszeichen im Register. */
.nav-toggle-strich, .nav-toggle-strich::before, .nav-toggle-strich::after { display: block; width: 24px; height: 1.5px; border-radius: 1px; background: currentColor; }
.nav-toggle-strich { position: relative; margin-inline: auto; }
.nav-toggle-strich::before, .nav-toggle-strich::after { content: ""; position: absolute; left: 0; }
.nav-toggle-strich::before { top: -7px; }
.nav-toggle-strich::after { top: 7px; }
/* Kopf beim Zurueckscrollen, angelegt am 10. September 2026. Der Kopf laeuft
mit der Seite aus dem Bild und kommt zurueck, sobald jemand nach oben
scrollt; niemand soll bis an den Seitenanfang, nur um die Navigation zu
erreichen. Wann welche Klasse faellt, entscheidet main.js.
.kopf-fest heftet ihn an die Fensteroberkante. position: sticky und nicht
fixed: sticky laesst ihm seinen Platz im Seitenlauf, fixed nimmt ihn heraus,
und die ganze Seite ruckte im selben Moment um die Kopfhoehe nach oben.
Solange nur diese Klasse steht, wartet er unsichtbar ueber der Fensterkante
und faengt keine Klicks ab.
.kopf-sichtbar blendet ihn ein. Weg, Dauer und Kurve sind die der ganzen
Seite, siehe --auftritt-*: zwoelf Pixel und Einblenden, hier von oben statt
von unten. Die Regeln stehen bewusst ausserhalb von prefers-reduced-motion,
anders als der Auftritt der Bloecke: wer weniger Bewegung eingestellt hat,
soll den Kopf trotzdem bekommen, nur ohne Uebergang. Den schaltet die
Sammelregel im Abschnitt "Bewegung reduzieren" ab. */
html.js .site-header.kopf-fest { position: sticky; top: 0; opacity: 0; transform: translateY(calc(-1 * var(--auftritt-weg))); pointer-events: none; }
/* Der Uebergang kommt ein Bild spaeter dazu, main.js setzt kopf-weich. Stuende
er schon in der Regel darueber, liefe er im selben Moment los, in dem der
Kopf angeheftet wird, und zwar von sichtbar nach unsichtbar: die Leiste
blitzte an der Fensteroberkante auf und blendete erst danach aus. Genau das
Flimmern beim Verlassen des Heros, gemeldet am 10. September 2026. */
html.js .site-header.kopf-fest.kopf-weich { transition: opacity var(--auftritt-dauer) var(--auftritt-kurve), transform var(--auftritt-dauer) var(--auftritt-kurve); }
/* :focus-within holt ihn auch dann herein, wenn jemand mit der Tastatur
hineinlaeuft. Ein unsichtbarer, aber anspringbarer Punkt waere eine Falle. */
html.js .site-header.kopf-fest.kopf-sichtbar, html.js .site-header.kopf-fest:focus-within { opacity: 1; transform: none; pointer-events: auto; }
/* Angeheftet schwebt der Kopf ueber dem Text und braucht eine eigene Flaeche.
Sie liegt in einem Pseudoelement und reicht bis an die Fensterkanten,
waehrend der Kopf selbst innerhalb der Textkanten bleibt, wie das weisse
Band auf "Ueber mich". ::after und nicht ::before, weil ::before dort schon
dieses Band traegt. */
html.js .site-header.kopf-fest::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); border-bottom: 1px solid var(--linie); background: var(--weiss); }
/* ---------- Hero ----------
Die Bildflaeche zieht sich um die Kopfhoehe nach oben, damit sie wie im
Referenzbild buendig mit der Seitenoberkante beginnt und die Navigation
links daneben steht. */
/* Hero und Faktenzeile zusammen fuellen eine Fensterhoehe, Kopfhoehe und obere
Luft abgezogen: die Kontaktangaben sollen ohne Scrollen sichtbar sein. Der
Hero nimmt, was die Faktenzeile uebrig laesst. Braucht der Inhalt mehr Platz,
waechst der Block darueber hinaus, geklammert wird nichts. Der Hero selbst
hat keinen unteren Innenabstand: die Bildflaeche soll bis auf den Trennstrich
ueber der Faktenzeile reichen, den Abstand traegt die Textspalte. */
.hero-screen { display: flex; flex-direction: column; min-height: calc(100svh - var(--kopf) - var(--seitenluft)); }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(24px, 3vw, 56px); align-items: stretch; flex: 1 1 auto; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: clamp(24px, 3vw, 44px) clamp(28px, 3.4vw, 52px); }
/* Abschnittsbeschriftung: gesperrte Grossbuchstaben, kein Huelle drumherum.
Bewusst keine abgerundete Kapsel mit farbigem Punkt. */
.label { margin: 0 0 clamp(16px, 2vw, 26px); color: var(--akzent-tiefer); font-size: clamp(11px, .85vw, 13px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
/* Feine Linie um den Namen, nach dem Referenzbild vom 6. September 2026. Sie
fasst nur den Namen. Gezeichnet wird sie aus zwei Ecken, beide
Pseudoelemente, damit im HTML keine leeren Elemente stehen:
::before ist die Waagrechte oben mit dem kurzen Ansatz nach unten,
::after die Senkrechte links mit dem kurzen Fuss nach rechts.
Die Waagrechte endet vor dem Ende von "Elisabeth", der Name laeuft also aus
der Linie heraus; im Referenzbild ist es genauso.
Alle Masse haengen an --name, der Schriftgroesse des Namens, und wachsen
damit mit. */
.hero-frame { position: relative; align-self: flex-start; margin-top: auto; padding: calc(.55 * var(--name)) 0 0 calc(.35 * var(--name)); }
.hero-frame::before { content: ""; position: absolute; left: 0; top: 0; right: 16%; height: calc(.25 * var(--name)); border-top: 1px solid var(--rahmen); border-right: 1px solid var(--rahmen); }
.hero-frame::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(.25 * var(--name)); border-left: 1px solid var(--rahmen); border-bottom: 1px solid var(--rahmen); }
/* Das negative Untermass zieht die Grundlinie von "Zick" auf die Unterkante des
Rahmens; ohne es saesse der Fuss der Linie eine Unterlaenge zu tief. */
h1 { margin: 0 0 calc(-.18 * var(--name)); font-size: var(--name); font-weight: 700; line-height: 1.0; letter-spacing: -.04em; }
/* Die Berufsbezeichnung sitzt auf der oberen Linie und unterbricht sie. Der
Papierton hinter ihr ist die Unterbrechung; er muss der Flaeche entsprechen,
auf der der Hero steht. */
/* Der seitliche Innenabstand unterbricht die Linie, verschoebe aber auch den
Text. Er wird deshalb vom Startpunkt wieder abgezogen. Dazu kommt seit dem
7. September 2026 ein Zuschlag von 3,4 Prozent der Namensgroesse: das grosse
E traegt bei seiner Groesse mehr Vorbreite als das R der kleineren Zeile,
ohne den Zuschlag stuende das R sichtbar zu weit links. Das em bezieht sich in
beiden Werten auf die Schriftgroesse dieser Zeile. */
.role { position: absolute; top: 0; left: calc(.35 * var(--name) - .5em + .034 * var(--name)); transform: translateY(-50%); margin: 0; padding-inline: .5em; background: var(--papier); font-size: clamp(20px, 1.8vw, 29px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; white-space: nowrap; }
.lead { max-width: 34ch; margin: clamp(14px, 1.6vw, 24px) 0 0; color: var(--tinte-leise); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; }
/* Die drei Rechtsgebiete stehen nebeneinander, getrennt von einer feinen
Senkrechten. Sie ist der linke Rand des jeweils folgenden Feldes, kein
eigenes Element, und sitzt mittig in der Luft: Abstand und Innenabstand
tragen denselben Wert. Die Regel steht hinter .lead, weil das Feld beide
Klassen traegt und bei gleicher Spezifitaet die spaetere Regel gewinnt. */
.hero-areas { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.4vw, 20px); max-width: none; margin-left: calc(.35 * var(--name)); font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; }
.hero-areas span + span { padding-left: clamp(12px, 1.4vw, 20px); border-left: 1px solid var(--rahmen); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 15px 34px; border: 0; border-radius: 999px; background: var(--akzent-tief); color: var(--knopf-schrift); font-family: inherit; font-size: clamp(15px, 1.1vw, 17px); font-weight: 500; letter-spacing: -.005em; box-shadow: 0 10px 26px -12px rgb(var(--knopf-schatten) / 65%); transition: background .22s ease, box-shadow .22s ease, transform .22s ease; }
.button:hover { background: var(--akzent-tiefer); box-shadow: 0 14px 30px -12px rgb(var(--knopf-schatten) / 75%); }
.button:active { transform: translateY(1px); box-shadow: 0 6px 16px -10px rgb(var(--knopf-schatten) / 65%); }
/* Die Schaltflaeche im Hero ist eine Stufe groesser als die in Abschluss und
Dialogen und steht linksbuendig auf der Textachse. Sie traegt deshalb
denselben Einzug wie Name und Rechtsgebiete, calc(.35 * var(--name)): so
sitzt ihre linke Kante unter dem E von "Elisabeth" und nicht an der
Rahmenlinie. Vorher stand sie an der rechten Kante der Textspalte und hatte
dort keinen Bezug.
Sie traegt seit 6. September 2026 eine blaue Flaeche (--knopf-hero) und keine
Umrandung mehr. Beides wollte Alfred so. Das Tuerkis --marker, das vorher hier
stand, brauchte den dunklen Rand noch: es kam auf dem hellen Papier nur auf
rund 1,7 zu 1 und war als Bedienelement allein nicht zu erkennen. Das Navy
schafft 10,4 zu 1 gegen das Papier und traegt weisse Schrift mit 10,5 zu 1,
der Rand ist damit entbehrlich.
Die drei Zustandsregeln muessen hier ausgeschrieben stehen. .button:hover hat
dieselbe Spezifitaet wie .hero-copy .button und steht frueher im Stylesheet,
waere also wirkungslos. */
.hero-copy .button { align-self: flex-start; min-height: 65px; margin-top: clamp(44px, 5.6vw, 82px); margin-left: calc(.35 * var(--name)); padding: 18px 41px; border: 0; border-radius: 14px; background: var(--knopf-hero); color: var(--knopf-schrift); box-shadow: none; font-size: clamp(18px, 1.3vw, 20px); transition: background .22s ease, color .22s ease; }
.hero-copy .button:hover { background: var(--knopf-hero-tief); color: var(--knopf-schrift); box-shadow: none; }
.hero-copy .button:active { transform: translateY(1px); box-shadow: none; }
/* Die drei Regeln darueber sind seit dem 6. September 2026 ohne Wirkung: im
Hero steht keine Schaltflaeche mehr, sondern der Block hier. Sie bleiben
stehen, falls die Schaltflaeche zurueckkommt.
Zwei Spalten, weil die drei Werte nebeneinander breiter waeren als die
Textspalte: allein die Adresse misst bei 1440 Pixeln rund 225 Pixel. Sie
nimmt deshalb die zweite Zeile ueber beide Spalten. Der linke Einzug ist
derselbe wie bei den Rechtsgebieten darueber, damit unter dem Namen alles an
einer Kante steht. */
.hero-contact { align-self: stretch; display: flex; flex-wrap: wrap; gap: clamp(14px, 1.6vw, 22px) clamp(22px, 2.2vw, 34px); margin-top: auto; margin-left: calc(.35 * var(--name)); padding-top: clamp(16px, 1.8vw, 24px); border-top: 1px solid var(--linie); font-size: clamp(13px, 1vw, 15px); font-style: normal; }
.hero-contact-label { display: block; margin-bottom: clamp(5px, .6vw, 8px); color: var(--tinte-leise); font-size: clamp(10px, .8vw, 12px); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.hero-contact a { transition: color .2s ease; }
.hero-contact a:hover { color: var(--akzent-tief); }
/* Die Bildflaeche steht wie im Referenzbild als gerundete Kachel im Satzspiegel,
ringsum gerundet und mit Abstand zum Trennstrich der Faktenzeile. Ihr Grund
besteht aus zwei Schattierungen: das erste Drittel ist etwas heller als die
restlichen zwei Drittel, mit harter Kante genau bei einem Drittel. Beide
Farbhalte liegen auf demselben Prozentwert, dadurch gibt es keinen Verlauf.
Dazu kommen ein weicher Schein hinter dem Kopf, ein sehr flacher Schatten am
unteren Rand und eine feine Koernung, die dem Beige Papiercharakter gibt.
Keine Linien und kein Muster: Ringe, Nadelstreifen und das Passepartout
standen hier nacheinander und wirkten alle aufgesetzt. */
.hero-figure {
position: relative; margin: calc(-1 * var(--kopf)) 0 clamp(22px, 2.4vw, 36px) auto;
width: 100%; max-width: 760px;
min-height: 340px; border-radius: var(--radius); overflow: clip;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)' opacity='.055'/%3E%3C/svg%3E"),
radial-gradient(115% 85% at 62% 20%, rgb(255 255 255 / 46%), rgb(255 255 255 / 0) 64%),
linear-gradient(90deg, rgb(255 255 255 / 32%) 0 33.333%, rgb(255 255 255 / 0) 33.333%),
linear-gradient(180deg, rgb(var(--bild-schatten) / 0) 58%, rgb(var(--bild-schatten) / 9%) 100%),
var(--bild);
}
/* Naeher an das Gesicht herangerueckt: die Bildflaeche zeigt Kopf und Schultern,
die verschraenkten Arme laufen unten aus dem Bild. */
.hero-figure img { position: absolute; left: 50%; bottom: -44%; z-index: 1; width: auto; max-width: none; height: 130%; transform: translateX(-50%); filter: drop-shadow(-16px 18px 38px rgb(45 34 20 / 15%)); }
/* ---------- Rechtsgebiete ---------- */
/* Die weisse Flaeche laeuft ueber die volle Fensterbreite, ihr Inhalt bleibt
aber an der Textkante der uebrigen Seite. */
/* Der Inhalt beginnt nicht an der Textkante der Seite, sondern um denselben
Einzug weiter rechts, den der Name im Hero hat: calc(.35 * var(--name)) ist
der linke Innenabstand des Namensrahmens. Damit stehen Beschriftung,
Ueberschrift und die Ordnungsziffern auf einer Senkrechten mit "Elisabeth"
und der Rechtsgebietszeile darueber. Rechts bleibt die Kante, wo sie war,
also buendig mit der Bildflaeche des Heros. */
.areas { margin-inline: calc(50% - 50vw); padding: clamp(56px, 7vw, 110px) calc(50vw - 50%) clamp(56px, 7vw, 104px) calc(50vw - 50% + .35 * var(--name)); background: var(--weiss); }
/* Der Umbruch steht als
im Markup, damit "Ihr Anliegen." am Stueck steht
und die Unterstreichung nicht ueber zwei Zeilen zerfaellt. Die Zeilenhoehe
ist etwas groesser als bei den anderen Ueberschriften, das stammt noch aus
der Zeit der farbigen Flaeche und laesst der Linie jetzt ihren Platz. */
.areas h2 { margin: 0; font-size: clamp(38px, 5.2vw, 76px); font-weight: 700; line-height: 1.16; letter-spacing: -.032em; }
/* Statt einer Flaeche seit 6. September 2026 eine Unterstreichung im Mint.
text-decoration-skip-ink: none laesst die Linie unter dem g von "Anliegen"
durchlaufen, sonst risse sie dort auf. Die Linie ist Schmuck, keine
Information: die Ueberschrift steht in --tinte und traegt sich selbst. */
.areas h2 .marker, .legal-intro h1 .marker { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: .085em; text-underline-offset: .16em; text-decoration-skip-ink: none; }
/* Die Variante zeigt alle drei Gebiete gleichzeitig. Die Textgruppen sind
HTML, die gemeinsame Zeichnung ist ein rein dekoratives SVG. Seit dem
21. September 2026 steht der Abschnitt mittig: Beschriftung und Titel auf
einer Zeile ueber dem First, darunter die Zeichnung in der Mitte, und die
drei Inseln haengen wie in einer Umlaufbahn an ihren Linien, jede auf
anderer Hoehe und keine zwei buendig. Vorher standen Titel und Inseln auf
der linken Textachse der Seite, die Inseln wie in Tabellenzellen; Alfred
fand das steif. Der Innenabstand ist deshalb beidseits gleich und ohne den
Einzug der uebrigen Abschnitte, sonst saesse die Mitte 18 Pixel rechts. */
.areas--illustrated { padding-block: var(--leistungen-polster); padding-inline: calc(50vw - 50%); background: var(--papier); }
.areas--illustrated > .label, .areas--illustrated > h2 { text-align: center; }
/* Der Titel steht ohne
auf einer Zeile; auf schmalen Fenstern bricht er
vor "Ihr Anliegen." um, weil die Markierung nicht umbrechen darf, und die
Unterstreichung bleibt am Stueck. */
.areas--illustrated h2 .marker { white-space: nowrap; }
.leistungen-bildlayout {
display: grid;
grid-template-columns: var(--leistungen-spalten);
grid-template-rows: auto auto;
/* Kein Spaltenabstand: die Spaltenlinien liegen auf Linien der Zeichnung,
die Luft zu den Inseln ist deren Rand. Der Zeilenabstand wirkt nur unter
1180 Pixeln, wo die Inseln in eigenen Zeilen stehen, und ist derselbe
wie vom Titel zur Zeichnung. */
row-gap: var(--leistungen-kopf-luft);
margin-top: var(--leistungen-kopf-luft);
align-items: start;
}
/* Die Inseln sind relativ positioniert, damit top in Prozent der
Rasterflaeche greift; die Flaeche ist beide Zeilen hoch, also so hoch wie
die Zeichnung, weil alles ueber beide Zeilen laeuft. Die Breite ist die
des Textes (fit-content), nicht die der Spalte; unter 1180 Pixeln ist die
Spalte schmaler und der Text bricht um. */
.leistungen-gebiet { position: relative; min-width: 0; grid-row: 1 / 3; }
.leistungen-gebiet h3 {
margin: 0;
color: var(--tinte);
font-size: var(--leistungen-titel);
font-weight: 500;
line-height: var(--leistungen-titel-zeile);
letter-spacing: var(--leistungen-titel-laufweite);
}
.leistungen-gebiet .area-topic-points {
margin: var(--leistungen-text-abstand) 0 0;
color: var(--tinte-leise);
font-size: var(--leistungen-text);
line-height: var(--leistungen-text-zeile);
}
.leistungen-gebiet .area-topic-points { gap: var(--leistungen-punkte-luft); }
.leistungen-gebiet .area-topic-points li {
font-size: var(--leistungen-text);
line-height: var(--leistungen-text-zeile);
}
/* Zivilrecht links vom Dokument, rechte Kante an dessen linker Kante.
Schadenersatz in der freien Ecke unter dem Dokument, rechte Kante am Stiel,
dafuer laeuft es in die zweite Spalte hinein; es steht damit um die
Stielbreite weiter rechts als Zivilrecht. Strafrecht rechts vom Haus am
Kopf der Person, linke Kante an der Wand, dafuer beginnt es in der vierten
Spalte. */
.leistungen-zivilrecht { grid-column: 1; justify-self: end; margin-right: var(--leistungen-luft); top: var(--leistungen-zivilrecht-oben); }
.leistungen-schadenersatz { grid-column: 1 / 3; justify-self: end; margin-right: var(--leistungen-luft); top: var(--leistungen-schadenersatz-oben); }
.leistungen-strafrecht { grid-column: 4 / 6; justify-self: start; margin-left: var(--leistungen-luft); top: var(--leistungen-strafrecht-oben); }
.leistungen-zeichnung {
display: block;
grid-column: 2 / 5;
grid-row: 1 / 3;
align-self: center; /* wirkt nur unter 1180 Pixeln, wenn die Inseln das Raster hoeher machen als die Zeichnung */
width: var(--leistungen-bildbreite);
height: auto;
}
.leistungen-zeichnung path {
stroke-width: var(--leistungen-strich);
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.leistungen-kontur-navy { stroke: var(--tinte); }
.leistungen-kontur-mint { stroke: var(--leistungen-kontur); }
/* Die Umlaufbahn gilt erst ab 1180 Pixeln, wo jede Zeile auf einer Zeile
bleibt (gemessen: 335 Pixel Inselbreite fuer 323 Pixel Text). Darunter
brechen die Zeilen um, die Inseln werden bis zu 70 Prozent der Zeichnung
hoch, und feste Hoehen liefen ineinander. Dort stehen die Inseln wie bis
zum 21. September 2026, nur mit den seither vertauschten Seiten: Zivilrecht
an der Oberkante der Zeichnung, Schadenersatz an ihrer Unterkante,
Strafrecht rechts auf halber Hoehe, alle in ihrer eigenen Spalte. */
@media (max-width: 1179px) {
.leistungen-gebiet { top: auto; }
.leistungen-zivilrecht { grid-row: 1; }
.leistungen-schadenersatz { grid-column: 1; grid-row: 2; align-self: end; }
.leistungen-strafrecht { grid-column: 5; align-self: center; }
}
@media (max-width: 899px) {
.leistungen-bildlayout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto;
}
.leistungen-gebiet { grid-column: 1; justify-self: start; align-self: start; margin-inline: 0; }
.leistungen-zeichnung { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, var(--leistungen-bild-mobil)); }
.leistungen-zivilrecht { grid-row: 2; }
.leistungen-schadenersatz { grid-row: 3; }
.leistungen-strafrecht { grid-row: 4; }
}
/* Register statt Karten, nach dem Konzeptbild vom 6. September 2026 unter
design/concepts/2026-09-06-leistungen/01-nummeriertes-register.png. Die
Zeilen sind native details-Elemente: geschlossen zeigen sie Ziffer und
Gebiet, geoeffnet den Satz aus dem Rechtsgebiete-Dialog. Ohne JavaScript
funktioniert das Aufklappen ebenso. */
.area-register {
/* Ziffer und Rechtsgebiet teilen sich seit dem 6. September 2026 eine
Schriftgroesse. Vorher stand die Ziffer mit 81 zu 45 Pixeln fast doppelt so
gross neben dem Gebiet und zog den Blick auf sich, obwohl sie nur Schmuck
ist. Spalte und Spaltenabstand sind mitgeschrumpft, sonst risse zwischen
Ziffer und Gebiet eine Luecke auf. */
--gebiet-groesse: clamp(32px, 3vw, 45px);
--ziffer-spalte: clamp(46px, 4.4vw, 66px); /* Breite der Ordnungsziffer */
--register-luft: clamp(14px, 1.8vw, 28px); /* Abstand zwischen den Spalten */
/* Eine Dauer und eine Kurve fuer alles, was sich beim Wechsel bewegt: Hoehe,
Deckkraft und das Zeichen rechts. Die frueher benutzte Kurve
cubic-bezier(.22, 1, .36, 1) startet mit dem viereinhalbfachen Tempo einer
gleichmaessigen Bewegung; gemessen waren von 539 Pixeln Zivilrecht nach 100
Millisekunden bereits 81 Prozent weg, der Rest troepfelte nach. Das wirkte
wie ein Schnappen mit langem Nachlauf. Die Kurve hier beginnt bei Tempo
null, verteilt die Strecke gleichmaessig und landet weich. */
--register-dauer: .45s;
--register-kurve: cubic-bezier(.4, 0, .2, 1);
margin-top: clamp(32px, 4.2vw, 62px);
border-top: 1px solid var(--linie);
}
.area-row { border-bottom: 1px solid var(--linie); }
/* Der Standardpfeil des Browsers entfaellt, das Zeichen rechts uebernimmt seine
Aufgabe. list-style deckt Firefox und Safari ab, das Pseudoelement Chrome. */
.area-row summary { display: grid; grid-template-columns: var(--ziffer-spalte) minmax(0, 1fr) 16px; grid-template-areas: "ziffer titel zeichen"; align-items: center; gap: var(--register-luft); padding: clamp(22px, 2.6vw, 34px) 0; list-style: none; cursor: pointer; }
.area-row summary::-webkit-details-marker { display: none; }
.area-row summary:hover h3 { color: var(--akzent-tief); }
/* Die Ziffer ordnet die Zeilen und bleibt bewusst leise: gross, aber sehr hell
und ohne Fettschnitt. Sie traegt keine Information, die nicht schon in der
Reihenfolge steckt, und ist deshalb im Markup aria-hidden. */
.area-num { grid-area: ziffer; color: var(--ziffer); font-size: var(--gebiet-groesse); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.area-row h3 { grid-area: titel; margin: 0; font-size: var(--gebiet-groesse); font-weight: 500; line-height: 1.2; letter-spacing: -.018em; transition: color .2s ease; }
/* Pluszeichen aus zwei Strichen. Im geoeffneten Zustand faellt der senkrechte
weg, daraus wird ein Minus. */
.area-mark { grid-area: zeichen; position: relative; justify-self: end; width: 16px; height: 16px; }
.area-mark::before, .area-mark::after { content: ""; position: absolute; top: 50%; right: 0; left: 0; height: 1.5px; margin-top: -.75px; border-radius: 1px; background: var(--tinte-leise); transition: transform var(--register-dauer) var(--register-kurve); }
.area-mark::after { transform: rotate(90deg); }
.area-row[open] .area-mark::after { transform: rotate(90deg) scaleX(0); }
/* Der aufgeklappte Satz beginnt an der Textkante des Gebiets, nicht an der der
Ziffer, damit die Spalten des Registers erhalten bleiben. */
/* Der Inhalt blendet beim Aufklappen mit auf, statt allein von der wachsenden
Hoehe aufgeschnitten zu werden. Er setzt dabei etwas spaeter ein als die
Hoehe, damit der Platz zuerst da ist und der Text nicht gequetscht erscheint.
Der Startwert muss aus @starting-style kommen. Solange die Zeile zu ist,
ueberspringt content-visibility den Inhalt; es gibt dann keinen vorherigen
Wert, von dem aus ein Uebergang laufen koennte, und der Text stuende ohne
diese Regel sofort in voller Deckkraft da. Nachgemessen am 6. September 2026.
Kennt ein Browser @starting-style nicht, erscheint der Text eben ohne Blende,
wie bisher.
Beim Zuklappen bleibt es beim reinen Beschneiden. Eine Blende auch dort war
probiert und wieder verworfen: der Text war nach 300 von 450 Millisekunden
weg, und danach fiel noch eine leere Luecke zu. */
.area-row[open] .area-detail { transition: opacity calc(.78 * var(--register-dauer)) var(--register-kurve) calc(.22 * var(--register-dauer)); }
@starting-style { .area-row[open] .area-detail { opacity: 0; } }
.area-detail { --themenbild: clamp(160px, 16vw, 230px); /* Hoehe aller Motive, in beiden Aufbauten */
padding: 0 0 clamp(26px, 3vw, 38px) calc(var(--ziffer-spalte) + var(--register-luft)); color: var(--tinte-leise); }
/* Der einleitende Satz ist gewachsen: bei 45 Pixeln Gebiet daneben sahen 17
Pixel wie Kleingedrucktes aus. Die Stichpunkte stehen eine Stufe darunter,
damit die Reihenfolge Gebiet, Satz, Stichpunkt lesbar bleibt. */
.area-lead { max-width: 58ch; margin: 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }
.area-points { max-width: 58ch; margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(8px, .9vw, 11px); }
.area-points li { position: relative; padding-left: 22px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }
/* Das Quadrat sitzt auf der Mitte der ersten Zeile, deshalb .75em statt einer
festen Hoehe: so wandert es bei jeder Schriftgroesse mit. Der Abzug ist 2 und
nicht 3 Pixel, also die halbe Kantenlaenge minus einen Pixel: rechnerisch
mittig sitzt das Quadrat optisch zu hoch, weil die Zeilenmitte ueber der
Mitte der Kleinbuchstaben liegt. Die Quadrate stehen auf Alfreds Wunsch
in beiden Farbwelten in einem gut erkennbaren Tuerkis. */
.area-points li::before { content: ""; position: absolute; top: calc(.75em - 2px); left: 0; width: 6px; height: 6px; background: #398f88; }
/* Drei illustrierte Themen je Rechtsgebiet, nach dem freigegebenen Konzept.
Die Bilder ergaenzen die echten HTML-Texte. Gleiche Bildflaechen halten
Ueberschriften und Beschreibungen auf einer gemeinsamen Grundlinie. */
.area-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(18px, 2vw, 28px) 0 0; padding: 0; list-style: none; }
/* Die drei Spalten teilen sich die Zeilen des Rasters (subgrid). Ohne das
beginnen Ueberschrift, Satz und Stichpunkte je nach Textlaenge auf
verschiedenen Hoehen; mit ihm stehen sie auf gemeinsamen Linien. Drei Zeilen,
das sind Bild, Ueberschrift und Punkteliste; den Satz darunter gibt es seit
dem 6. September 2026 nicht mehr. */
.area-topic { min-width: 0; padding-inline: clamp(18px, 2vw, 30px); display: grid; grid-template-rows: subgrid; grid-row: span 3; }
/* Die erste Textkante fluchtet mit Gebietsueberschrift und Einleitung. */
.area-topic:first-child { padding-left: 0; }
.area-topic + .area-topic { border-left: 1px solid color-mix(in srgb, var(--marker) 55%, white); }
.area-topic-art { width: 100%; height: var(--themenbild); object-fit: contain; margin-bottom: 16px; }
.area-topic h4 { margin: 0 0 10px; color: var(--tinte); font-size: clamp(18px, 1.45vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
/* ZURUECKGESTELLT am 22. September 2026: Pfeil neben "Immobilien", der auf
die Leistungsseite immobilienkauf.html fuehrte. Die Seite ist vorerst nicht
Teil des Projekts (siehe memory.md), das Markup in index.html ist entfernt,
die Regel bleibt fuer eine spaetere Wiederaufnahme stehen. Er misst knapp
eine Schrifthoehe der Ueberschrift und haengt an ihrer Farbe; der Hover geht
wie bei allen Textlinks auf --akzent-tief, in styles-mint.css auf
--akzent-tiefer. */
.area-topic-link { display: inline-flex; align-items: center; justify-content: center; width: .9em; height: .9em; margin-left: .4em; vertical-align: -.06em; color: var(--tinte); transition: color .2s ease; }
.area-topic-link svg { width: 100%; height: 100%; }
.area-topic-link:hover { color: var(--akzent-tief); }
/* Haeufig nachgefragte Leistungen je Thema, seit dem 6. September 2026. Die
Punkte teilen sich die Liste der uebrigen Gebiete, stehen in der schmalen
Spalte aber eine Spur kleiner und enger. */
.area-topic .area-topic-points { margin-top: clamp(10px, 1vw, 14px); gap: clamp(7px, .7vw, 10px); }
.area-topic .area-topic-points li { padding-left: 20px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.5; }
.area-topic .area-topic-points li::before { top: calc(.75em - 2px); }
/* Gebiete mit weniger als drei Motiven: Bild links, Themen rechts.
Seit dem 6. September 2026, auf Alfreds Wunsch. Der Aufbau aus Bild ueber
Ueberschrift ueber Satz braucht drei gefuellte Spalten, um zu tragen. In
Schadenersatz und Strafrecht blieb eine Spalte ohne Motiv, und ihre
Stichpunkte schwebten in der Zeile, egal ob mittig oder oben buendig
ausgerichtet. Jetzt stehen die Motive links beieinander und alle Themen des
Gebiets rechts als Stichpunkte; das Themenwort traegt das strong und
uebernimmt die Rolle der frueheren Themenueberschrift. Beide Gebiete tragen
seit dem 6. September 2026 genau ein Motiv, die Aufteilung ist deshalb in
beiden dieselbe. */
.area-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(18px, 2vw, 30px); margin-top: clamp(18px, 2vw, 28px); }
.area-split .area-topic-art { margin-bottom: 0; }
/* Dieselbe feine Mintlinie wie zwischen den Themenspalten. align-content haelt
die Punkte oben buendig; ohne das zoege das Raster sie ueber die volle
Bildhoehe auseinander. */
.area-split .area-topic-points { align-content: start; padding-left: clamp(18px, 2vw, 30px); border-left: 1px solid color-mix(in srgb, var(--marker) 55%, white); }
/* Schadenersatz: Text zuerst, Motiv rechts; mobil folgt das Bild dem Text.
Bis zum 7. September 2026 stand nur die Punkteliste neben dem Motiv, mittig
ausgerichtet. Weil drei kurze Punkte viel niedriger sind als ein Motiv,
entstand dabei bei 1440 Pixeln eine Luecke von 86 Pixeln zwischen dem
Einleitungssatz und dem ersten Punkt: die Liste schwebte ohne Bezug in der
Zeile, und unter ihr blieb eine ebenso grosse leere Flaeche.
Seither traegt die linke Haelfte den Einleitungssatz mit. Satz und Punkte
zusammen sind rund 200 Pixel hoch, das Motiv 230; beide Haelften stehen also
fast gleich hoch nebeneinander, und die Luecke gibt es nicht mehr. Die
Aufteilung des Zivilrechts und des Strafrechts bleibt unberuehrt, dort steht
der Satz weiter ueber der ganzen Breite.
Der Satz braucht dafuer die Huelle .area-split-text: mit ihr hat das Raster
genau zwei Kinder und ordnet sie von selbst nebeneinander an. Ohne sie
muessten Satz, Liste und Motiv einzeln in Spalten und Zeilen gesetzt werden,
und diese Zuweisungen muessten im schmalen Fenster wieder zurueckgenommen
werden, sonst schiebt grid-column das Motiv in eine Spalte, die es dort
nicht gibt. Genau daran ist der frueher beschriebene Ueberlappungsfehler
entstanden.
margin-top faellt weg, weil der Satz jetzt im Raster steht und die Zeile
deshalb unmittelbar unter der Gebietszeile beginnt. Der Selektor nennt das
Elternteil mit, damit er auch die spaetere Regel fuer schmale Fenster
schlaegt; nach reiner Reihenfolge wuerde deren margin-top gewinnen. */
.area-split--bild-rechts { grid-template-columns: var(--schadenersatz-spalten); align-items: center; }
.area-detail > .area-split--bild-rechts { margin-top: 0; }
.area-split--bild-rechts .area-topic-points { padding-left: 0; border-left: 0; }
.area-topic-points { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(12px, 1.25vw, 17px); }
.area-detail > .area-topic-points { margin-top: clamp(18px, 2vw, 28px); }
/* Im Schadenersatz steht der Satz in derselben Huelle wie die Punkte, der
Selektor darueber greift dort nicht. Der Abstand ist derselbe. */
.area-split-text .area-topic-points { margin-top: clamp(18px, 2vw, 28px); }
.area-topic-points li { position: relative; padding-left: 22px; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; }
/* Dasselbe Quadrat wie in .area-points, damit alle Rechtsgebiete gleich
aussehen. Die Zeilenhoehe ist hier 1,55, deshalb .775em statt .75em. */
.area-topic-points li::before { content: ""; position: absolute; top: calc(.775em - 2px); left: 0; width: 6px; height: 6px; background: #398f88; }
.area-topic-points strong { color: var(--tinte); font-weight: 700; }
/* Auf schmalen Fenstern folgen die Themen untereinander. Der Absatz behaelt
seinen Einzug zur Toggle-Ueberschrift, die Motive bleiben vollstaendig. */
@media (max-width: 899px) {
.area-topics { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
/* Die Stichpunkte folgen direkt unter der Ueberschrift; nur die letzte Zeile
darf wachsen. Duerfte die Ueberschrift wachsen, klaffte zwischen ihr und
den Punkten die halbe Bildhoehe. */
.area-topic { display: grid; grid-row: auto; grid-template-columns: minmax(110px, .8fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; padding: 0; }
.area-topic + .area-topic { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--marker) 55%, white); padding-top: 24px; }
.area-topic .area-topic-art { grid-column: 2; grid-row: 1 / -1; align-self: center; height: auto; aspect-ratio: 3 / 2; margin: 0; }
.area-topic h4, .area-topic .area-topic-points { grid-column: 1; }
/* Die Punkte stehen oben buendig. Ohne das zieht die dehnbare letzte Zeile
sie ueber die ganze Bildhoehe auseinander, wo das Motiv hoeher ist als die
Liste. Dasselbe gilt an .area-split .area-topic-points. */
.area-topic .area-topic-points { align-content: start; }
/* Nebeneinander ist hier kein Platz: die Motive stehen ueber ihren Punkten,
die Trennlinie zwischen beiden entfaellt. */
.area-split { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.area-split .area-topic-points { padding-left: 0; border-left: 0; }
/* Wie die Motive in den Themenspalten: keine feste Hoehe mehr. Die Breite ist
gedeckelt, sonst fuellte ein einzelnes Motiv die ganze Spalte und stuende
doppelt so gross da wie die Motive im Zivilrecht daneben. */
.area-split .area-topic-art { height: auto; aspect-ratio: 3 / 2; width: min(100%, 320px); margin-inline: auto; }
}
@media (max-width: 540px) {
.area-topic { display: block; }
.area-topic .area-topic-art { width: min(100%, 320px); margin: 0 auto 14px; }
}
/* Weiches Aufklappen nur dort, wo der Browser auf eine automatische Hoehe
zubewegen kann. Fehlt das, springt der Satz auf; das ist kein Fehler. Die
Regel fuer weniger Bewegung am Dateiende schaltet den Uebergang wieder ab. */
@supports (interpolate-size: allow-keywords) {
/* Die Eigenschaft vererbt sich und steht deshalb am Register statt an :root:
nur hier soll auf eine automatische Hoehe zubewegt werden duerfen. */
.area-register { interpolate-size: allow-keywords; }
/* content-visibility muss dieselbe Dauer tragen wie die Hoehe. Bliebe sie
kuerzer, schaltete der Browser den Inhalt mitten in der Bewegung ab. */
.area-row::details-content { block-size: 0; overflow: hidden; transition: block-size var(--register-dauer) var(--register-kurve), content-visibility var(--register-dauer) allow-discrete; }
.area-row[open]::details-content { block-size: auto; }
}
/* ---------- Abschluss ---------- */
/* Der linke Einzug ist derselbe wie in .areas und im Namensrahmen des Heros,
calc(.35 * var(--name)). Damit stehen Schrittfolge, Kontaktzeile und Karte
auf einer Senkrechten mit den Ordnungsziffern der Rechtsgebiete, dem Namen
und der Navigation; rechts bleibt die Kante buendig mit der Bildflaeche.
Vorher trug .closing-inner einen eigenen Innenabstand, der den ganzen Block
links um 22 und rechts um 58 Pixel nach innen schob. */
.closing { margin-inline: calc(50% - 50vw); padding: clamp(48px, 6vw, 92px) calc(50vw - 50%) clamp(48px, 6vw, 92px) calc(50vw - 50% + .35 * var(--name)); background: var(--weiss); }
/* Nur noch die zentrierte Spalte. Innenabstand und Eckenrundung stammten von
einer frueheren getoenten Karte an dieser Stelle; ohne Flaeche waren sie
unsichtbar und lagen als zweites Polster auf dem von .closing. Der Abstand
zaehlte dadurch doppelt: 273 Pixel zwischen dem letzten Rechtsgebiet und der
Beschriftung Kontakt, 173 zwischen Karte und Fusszeile. */
.closing-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.closing h2 { max-width: 18ch; margin: 0; font-size: clamp(28px, 3.6vw, 52px); font-weight: 700; line-height: 1.08; letter-spacing: -.032em; }
.closing .lead { max-width: 40ch; }
.closing .button { margin-top: clamp(24px, 3vw, 40px); }
/* Drei Schritte der Mandantenaufnahme, als getoente Karten mit Ziffernscheibe
und Pfeilen dazwischen. Sie stehen in der zentrierten Saeule des
Abschlusses, nehmen aber ueber align-self die volle Breite; mittig gesetzte
Schrittbeschreibungen waeren nicht mehr zu lesen, deshalb steht der Text in
den Karten linksbuendig. Die Ziffer traegt keine Information, die nicht
schon in der Reihenfolge der Liste steckt, und ist im Markup aria-hidden.
Die drei Toene sind keine eigenen Farben, sondern die beiden
Marken-Variablen mit anderer Helligkeit: --marker traegt das Tuerkis,
--tinte das Blau, beide behalten ihren Farbton und ihre Saettigung und
stehen auf 87 Prozent Helligkeit. Die mittlere Karte liegt genau
dazwischen, damit die Reihe als Verlauf von Tuerkis nach Blau gelesen wird.
Wichtig ist dabei die Schreibweise mit hsl(from ...): ein einfaches
Aufhellen mit Weiss (color-mix in srgb) nimmt dem Navy die Saettigung, aus
64 Prozent werden 21, und die dritte Karte sieht grau statt blau aus. Genau
das hat Alfred am 6. September 2026 beanstandet. Wer die Regel wieder auf
color-mix umstellt, holt sich das Grau zurueck.
--stufe-luft ist zugleich der Spaltenabstand und die Rechengrundlage der
Pfeile. Wer den Abstand aendert, verschiebt die Pfeile mit; ein fester Wert
an einer der beiden Stellen bricht die Flucht. */
.steps { --stufe-tuerkis: hsl(from var(--marker) h s 87%); --stufe-blau: hsl(from var(--tinte) h s 87%); --stufe-luft: clamp(28px, 3.6vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stufe-luft); align-self: stretch; width: 100%; margin: clamp(34px, 4vw, 58px) auto 0; padding: 0; list-style: none; text-align: left; }
/* Die Hoehe kommt aus min-height, nicht aus aspect-ratio. Mit aspect-ratio
ergibt sich zwar von selbst das Verhaeltnis des Referenzbildes, aber eine
Karte mit einer Zeile mehr Text wird dann hoeher als ihre Nachbarn: eine
Kachel mit Seitenverhaeltnis laesst sich im Raster nicht auf die
Zeilenhoehe dehnen. Genau das war zwischen 900 und 1100 Pixeln zu sehen.
Mit min-height dehnt das Raster alle drei auf dieselbe Hoehe.
Die Karte steht hochkant im Verhaeltnis 3 zu 4. Grundlage war das von Alfred
am 6. September 2026 verlangte 9 zu 16, davon hat er am selben Tag ein
Viertel der Hoehe wieder abgezogen.
Die drei Zahlen haengen an der Spaltenbreite und sind nachgerechnet, nicht
geschaetzt. Seit die Schrittfolge die volle Abschnittsbreite fuellt, misst
eine Spalte 0,278 der Fensterbreite statt 0,26; die Hoehe im Verhaeltnis
3 zu 4 ist damit 37,1vw statt 34,5vw, und die Anschlaege 334px und 595px
statt 311px und 536px.
Der obere Anschlag greift ab rund 1600 Pixeln, wo .page an seiner max-width
haengt und die Karte nicht weiter waechst; der untere gilt an der Grenze
900px. Wer die Breite des Rasters, --stufe-luft, --rand oder den linken
Einzug von .closing aendert, muss die drei Zahlen neu rechnen, sonst stimmt
das Verhaeltnis nicht mehr.
position: relative traegt die Pfeile, sie haengen an der Karte links davon. */
.step { --scheibe: clamp(46px, 4.2vw, 64px); --pfeil: clamp(22px, 2vw, 32px); position: relative; display: flex; flex-direction: column; min-height: clamp(334px, 37.1vw, 595px); padding: clamp(24px, 3vw, 46px); border-radius: var(--radius); }
.step:nth-child(1) { background: var(--stufe-tuerkis); }
.step:nth-child(2) { background: color-mix(in srgb, var(--stufe-tuerkis) 50%, var(--stufe-blau)); }
.step:nth-child(3) { background: var(--stufe-blau); }
/* Die Ziffer steht als weisse Schrift auf einer dunklen Scheibe, nicht mehr
als grosse helle Zahl. Weiss auf --tinte kommt in beiden Farbfassungen weit
ueber 10 zu 1. Die Scheibe darf nicht schrumpfen, wenn die Ueberschrift
umbricht, daher flex: none. */
.step-num { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--scheibe); height: var(--scheibe); border-radius: 999px; background: var(--tinte); color: var(--weiss); font-size: clamp(15px, 1.35vw, 20px); font-weight: 700; line-height: 1; letter-spacing: -.01em; }
/* Ziffer oben, darunter mit gleich viel Luft wie der Innenabstand die
Ueberschrift und der Satz. Die freie Hoehe bleibt unten stehen.
Der Abstand ist bewusst fest und nicht margin-top: auto. Mit auto haengt der
Block am Fuss der Karte, und sobald ein Satz eine Zeile mehr umbricht als
sein Nachbar, steht seine Ueberschrift hoeher als die der anderen beiden.
Das war bei 1024 Pixeln deutlich zu sehen. Mit dem festen Abstand fluchten
die drei Ueberschriften in jeder Breite. */
.step h3 { margin: clamp(24px, 3vw, 46px) 0 clamp(9px, .9vw, 14px); color: var(--tinte); font-size: clamp(19px, 1.7vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -.018em; }
/* Der Satz steht im vollen --tinte, nicht im leisen Ton: auf der getoenten
Flaeche kommt --tinte-leise nur noch knapp auf 4,5 zu 1. */
.step p { max-width: 34ch; margin: 0; color: var(--tinte); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
/* Die zweite Karte fuehrt die Leistungen der Erstberatung als Aufzaehlung.
Das Quadrat ist dasselbe wie im Register der Rechtsgebiete, nur in --tinte
statt im Tuerkis von dort: auf der getoenten Kartenflaeche verschwaende das
helle Tuerkis, und die Karte hat ohnehin nur einen Textton.
Die Huelle ist um den Einzug breiter als der Absatz, damit die Schrift der
Punkte dieselbe Spalte fuellt wie der Satz darueber und nicht schmaler
laeuft. Der Punkt haengt links davor, in der Flucht des Absatzes. */
.step ul { max-width: calc(34ch + 20px); margin: clamp(12px, 1.2vw, 16px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(7px, .7vw, 10px); }
.step ul li { position: relative; padding-left: 20px; color: var(--tinte); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; }
.step ul li::before { content: ""; position: absolute; top: calc(.775em - 2px); left: 0; width: 6px; height: 6px; background: var(--tinte); }
.step ul + p { margin-top: clamp(12px, 1.2vw, 16px); }
/* Telefon und E-Mail stehen seit dem 10. September 2026 in der ersten Karte,
davor als eigene Zeile ueber der Standortkarte. Sie sind der Schritt selbst
und nicht sein Nachsatz, deshalb stehen sie direkt unter dem Text und ueber
der Fussnote.
Die Zeichen sind so gross wie die Versalhoehe der Zeile und stehen mit
flex: none in einer Flucht, damit die zweizeilige Adresse am Telefon den
Text nicht unter das Zeichen zieht.
margin-top: auto steht hier und an der Fussnote. Zwei automatische Abstaende
teilen die freie Hoehe der Karte in zwei gleiche Haelften: die Angaben sitzen
damit mittig zwischen der letzten Textzeile und der Linie der Fussnote, und
die Fussnote bleibt trotzdem am Fuss der Karte. Ein fester Abstand hier
drueckte sie stattdessen an den Satz darueber, das hat Alfred am
10. September 2026 beanstandet. Der Umbruch an beliebiger Stelle gilt
nur der E-Mail-Adresse, die in der schmalen Spalte sonst herausragt.
Der Hover steht wie ueberall auf --akzent-tief; in der Mintfassung faengt
styles-mint.css ihn ab und schickt ihn auf --akzent-tiefer, weil
--akzent-tief dort derselbe Navyton ist wie --tinte. */
.step-kontakt { display: grid; justify-items: start; gap: clamp(7px, .7vw, 10px); margin-top: auto; font-style: normal; }
.step-kontakt a { display: inline-flex; align-items: flex-start; gap: .6em; max-width: 100%; color: var(--tinte); font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; transition: color .2s ease; }
.step-kontakt a:hover { color: var(--akzent-tief); }
.step-kontakt svg { flex: none; width: 1.05em; height: 1.05em; margin-top: .18em; }
/* Die Pfeile zwischen den Karten sind zwei Pseudoelemente statt eigener
Zeichen: ::before ist der Schaft, ::after die Spitze aus zwei gedrehten
Rahmenlinien. Ein Textpfeil waere von der Schriftdatei abhaengig, die nur
den gebrauchten Zeichenvorrat enthaelt, und ein SVG waere zusaetzliches
Markup in einer Liste, die nur enthalten darf. Beide sitzen in der
Spaltenluft rechts der Karte und sind rein schmueckend.
Die Geometrie stammt aus der Ueberarbeitung vom 6. September 2026. Drei
Dinge sind daran wichtig:
- Die Spitze ist so gross, dass man sie als Spitze liest: 0,4 der
Schaftlaenge statt frueher fester 10px, die bei 28px Schaft verloren
wirkten. Sie waechst damit mit --pfeil mit.
- Der Strich ist duenner, 1,5px statt 2px, und traegt runde Enden ueber
border-radius. Der Pfeil steht dadurch neben den fetten Ueberschriften
nicht mehr wie ein Balken.
- translate: -121% -50% setzt die Spitze genau ans Schaftende. Die Rechnung:
translate verschiebt um einen Anteil der eigenen Breite, ab der linken
Kante. Bis zur Mitte sind es 50 Prozent, und eine um 45 Grad gedrehte Ecke
ragt um das 0,707-fache der Seitenlaenge ueber diese Mitte hinaus, macht
zusammen 120,7 Prozent. Frueher stand dort -50%; dann sass nur die Mitte
der Spitze am Schaftende, die Spitze selbst schoss darueber hinaus und
stand als eigenes Zeichen neben dem Strich. Der Wert bleibt richtig, wenn
man die Spitze groesser oder kleiner macht, er ist ein Anteil ihrer
eigenen Breite. */
.step:not(:last-child)::before,
.step:not(:last-child)::after { content: ""; position: absolute; top: 50%; color: var(--tinte); }
.step:not(:last-child)::before { left: calc(100% + var(--stufe-luft) / 2); width: var(--pfeil); height: 1.5px; border-radius: 1px; background: currentColor; translate: -50% -50%; }
.step:not(:last-child)::after { left: calc(100% + var(--stufe-luft) / 2 + var(--pfeil) / 2); width: calc(var(--pfeil) * .5); height: calc(var(--pfeil) * .5); border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; border-top-right-radius: 2px; translate: -121% -50%; rotate: 45deg; }
/* ZURUECKGESTELLT am 22. September 2026: dieselben Karten als Raster ohne
Pfeile, am 21. September 2026 kurz auf immobilienkauf.html, von Alfred aber
noch am selben Tag verworfen. Keine Seite nutzt die Regel derzeit.
Gedacht war: sie tragen die acht Abschnitte der Gliederung,
zwei nebeneinander, so hoch wie ihr Inhalt. Die Pfeile entfallen, weil die
Karten keine Folge sind; die Ziffern reichen. Die Toene laufen zeilenweise
von Tuerkis nach Blau, wie die drei Ablaufkarten, nur in vier Stufen.
Unter 900 Pixeln gilt die einspaltige Regel der Ablaufkarten. */
.steps--raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps--raster .step { min-height: 0; }
.steps--raster .step:not(:last-child)::before, .steps--raster .step:not(:last-child)::after { content: none; }
.steps--raster .step:nth-child(n) { background: var(--stufe-tuerkis); }
.steps--raster .step:nth-child(n + 3) { background: color-mix(in srgb, var(--stufe-tuerkis) 67%, var(--stufe-blau)); }
.steps--raster .step:nth-child(n + 5) { background: color-mix(in srgb, var(--stufe-tuerkis) 33%, var(--stufe-blau)); }
.steps--raster .step:nth-child(n + 7) { background: var(--stufe-blau); }
/* Auf einer Unterseite liegen die Karten in der weissen Flaeche .legal-body,
deren Absatzregel spaeter steht und die Kartenregel schlaegt: der Satz
wuerde leise, zentriert und 62 Zeichen breit. Hier gilt wieder die Karte. */
.legal-body .steps--raster .step p { max-width: 34ch; margin: 0; color: var(--tinte); line-height: 1.55; }
/* Der Hinweis auf das Honorar steht leise unter den Karten und vor der
Schaltflaeche. Der Link traegt das volle --tinte, damit er sich vom
Satz ringsum abhebt. */
.steps-note, .leistungen-note { margin: clamp(20px, 2.4vw, 32px) 0 0; color: var(--tinte-leise); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.6; }
.steps-note a, .leistungen-note a { color: var(--tinte); font-weight: 500; transition: color .2s ease; }
.steps-note a:hover, .leistungen-note a:hover { color: var(--akzent-tief); }
/* ZURUECKGESTELLT am 22. September 2026, wie der Pfeil oben: der Hinweis auf
die Leistungsseite unter dem Raster der illustrierten Leistungen in
index2.html. Das Markup ist entfernt, die Regel bleibt stehen. Gleiche
Gestaltung wie der Honorarhinweis, aber mittig wie Titel und Zeichnung des
Abschnitts, und mit dem Abstand, den auch der Titel zur Zeichnung hat. */
.leistungen-note { margin-top: var(--leistungen-kopf-luft); text-align: center; }
/* ---------- Kontaktangaben mit Karte ---------- */
/* Steht unter der Schrittfolge im selben Raster wie sie: dieselbe Breite,
derselbe Abstand nach oben. Seit dem 10. September 2026 traegt der Block nur
noch die Karte ueber die volle Breite; die dreispaltige Angabenzeile darueber
ist mit dem Umzug von Telefon und E-Mail in die erste Ablaufkarte entfallen,
und mit ihr der Abstand, den die Karte nach oben trug.
Die erste Fassung stellte die Angaben links neben eine hochkante Karte.
Alfred hat sie am 6. September 2026 verworfen: die schmale Textspalte stand
verloren neben der bunten Karte, und die Karte war zu klein, um etwas zu
zeigen. Uebereinander nutzte beides die ganze Breite.
text-align: left hebt die zentrierte Ausrichtung von .closing-inner auf, die
fuer Ueberschrift und Schaltflaeche gilt, fuer eine Adresse aber nicht. */
.kontakt-block { align-self: stretch; width: 100%; margin: clamp(40px, 4.6vw, 72px) auto 0; text-align: left; }
/* Die Karte ist ein liegendes Band, kein Kaestchen. Erst in dieser Breite ist
der Weg von der Adresse zum Schwedenplatz zu erkennen; das quadratische
Fenster der ersten Fassung zeigte drei Gassen.
Drei Dinge am Einbau sind nicht offensichtlich:
- **Als q stehen Koordinaten, nicht die Adresse.** Uebergibt man Google die
Adresse als Suchwort, blendet der Einbau oben links eine Infokarte mit
Adresse und zwei Schaltflaechen ein. Mit Koordinaten bleibt nur die Nadel.
Die Werte kommen aus Nominatim fuer Salztorgasse 7, 1010 Wien. Wer wieder
die Adresse einsetzt, holt sich die Infokarte zurueck.
Der Parameter iwloc, den man dafuer im Netz findet, wirkt nicht mehr;
iwloc=near und iwloc=B sind am 6. September 2026 gemessen worden und
aendern nichts.
- **Das Satellitenbild unten links wird weggeschnitten.** Diese Umschaltung
laesst sich ueber die Adresse nicht abschalten. Das iframe ist deshalb um
--karte-schnitt breiter als sein Rahmen und um denselben Betrag nach links
geschoben; der Rahmen schneidet mit overflow: hidden ab. 60px reichen: das
Bildchen sitzt rund 11 bis 48 Pixel vom linken Rand. Die Nachweise von
Google, also der Schriftzug und die Zeile mit Kartendaten und
Nutzungsbedingungen, liegen 339 Pixel und weiter rechts und bleiben
sichtbar. Mehr darf hier nicht abgeschnitten werden, die Nachweise sind
Bedingung der Nutzung.
- **Die Hoehe kommt aus aspect-ratio**, hier ist das unbedenklich: das Band
steht allein in seiner Zeile und muss sich mit nichts auf eine Hoehe
einigen, anders als die drei Schrittkarten weiter oben.
background traegt die Flaeche, solange die Karte laedt oder wenn sie
blockiert ist. */
.kontakt-karte { --karte-schnitt: 60px; position: relative; overflow: hidden; aspect-ratio: 16 / 5; min-height: clamp(220px, 18vw, 300px); border-radius: var(--radius); background: var(--linie); }
/* Google zeigt beim Scrollen ueber einem interaktiven iframe seinen eigenen
Hinweis. Die Karte ist hier eine Standortansicht, die Adresse darueber
oeffnet Google Maps bei Bedarf, deshalb faengt das iframe keine Maus- oder
Touch-Eingaben ab. */
.kontakt-karte iframe { position: absolute; top: 0; left: calc(-1 * var(--karte-schnitt)); width: calc(100% + var(--karte-schnitt)); height: 100%; border: 0; pointer-events: none; }
/* Unter 900 Pixeln passt der Text nicht mehr in die liegende Karte: sie waere
dann hoeher als breit und die Form ginge verloren. Die Schritte folgen ab
dort untereinander, und die Mindesthoehe faellt weg, denn ueber die volle
Breite waere sie ein halber Bildschirm Luft. Dieselbe Grenze wie bei den
Themen im Register. Die Pfeile drehen sich mit und zeigen nach unten. */
@media (max-width: 899px) {
.steps { grid-template-columns: minmax(0, 1fr); --stufe-luft: clamp(30px, 5vw, 44px); }
.step { min-height: 0; }
.step h3 { margin-top: clamp(16px, 3vw, 24px); }
.step p { max-width: none; }
.step ul { max-width: none; }
/* Untereinander ist die Karte genau so hoch wie ihr Inhalt, der
automatische Abstand hat dann keinen Weg mehr, und die Kontaktangabe
saesse auf dem Satz darueber. Ein fester Abstand ersetzt ihn. */
.step .step-kontakt { margin-top: clamp(16px, 3vw, 24px); }
.step:not(:last-child)::before { top: calc(100% + var(--stufe-luft) / 2); left: 50%; width: 1.5px; height: var(--pfeil); }
/* Dieselbe Rechnung wie waagrecht, nur um eine Achse gedreht: die 120,7
Prozent wandern von der x- auf die y-Achse, damit die Spitze am
Schaftende sitzt. */
.step:not(:last-child)::after { top: calc(100% + var(--stufe-luft) / 2 + var(--pfeil) / 2); left: 50%; translate: -50% -121%; rotate: 135deg; }
/* Ueber die schmale Breite zeigte 16 zu 5 nur noch einen Streifen. */
.kontakt-karte { aspect-ratio: 4 / 3; }
}
/* ---------- Footer ---------- */
/* Die Fusszeile steht seit dem 6. September 2026 auf einer eigenen dunkelblauen
Flaeche mit weisser Schrift. Sie laeuft wie die Abschlussflaeche und die
Rechtsflaeche ueber die volle Fensterbreite, dieselbe Rechnung aus
margin-inline und padding-inline: ein Band, das vor dem Fensterrand aufhoert,
saehe aus wie ein Fehler.
Der linke Einzug ist derselbe wie im Kopf, calc(.35 * var(--name)): der Name
stand vorher an der blossen Seitenkante und damit eine Stufe weiter links
als Navigation, Hero und Rechtsgebiete. Er steht jetzt im Einzug der Flaeche,
deshalb die Summe aus beidem. Rechts bleibt es beim Rand der Seite, dort
fluchten die Links mit den Pluszeichen des Registers.
Seit dem 7. September 2026 traegt sie mehr als die Pflichtangaben, auf Wunsch
von Alfred und nach dem Vorbild der Fusszeile von hydrapt.com: oben die Marke
mit einem Satz, daneben drei Spalten Wegweiser, unten hinter einer Haarlinie
die Jahreszeile. Damit ist sie wieder hoch, die Halbierung vom 6. September
ist damit aufgehoben. Den grossen Schriftzug am Seitenende, den die Vorlage
unten auslaufen laesst, hat Alfred ausdruecklich nicht gewollt.
Die obere Kante ist gerundet wie die Karten der Seite, --radius. Dahinter
steht die weisse Flaeche des Abschlusses, die in den Ecken durchscheint. */
.site-footer {
/* Fuenf lokale Toene, alle aus --fusszeile abgeleitet oder weiss mit
Deckkraft. Sie stehen hier und nicht in :root, weil sie nur auf dieser
einen dunklen Flaeche gelten; --fusszeile ist in beiden Farbwelten
dasselbe Navy, die Ableitung zieht also automatisch mit. */
--fuss-leise: rgb(255 255 255 / 76%); /* 8,3:1 auf dem Navy */
--fuss-still: rgb(255 255 255 / 58%); /* nur fuer Beschriftungen */
--fuss-linie: rgb(255 255 255 / 16%);
--fuss-flaeche: rgb(255 255 255 / 10%); /* Scheibe unter dem Zeichen im Hover */
--fuss-hell: hsl(from var(--fusszeile) h s 24%);
margin-inline: calc(50% - 50vw);
padding: clamp(48px, 5.6vw, 84px) calc(50vw - 50%) clamp(20px, 2vw, 28px) calc(50vw - 50% + .35 * var(--name));
border-radius: var(--radius) var(--radius) 0 0;
background: var(--fusszeile);
/* Der Verlauf ist Beiwerk: faellt die relative Farbangabe aus, bleibt das
flache Navy der Zeile darueber stehen. */
background: linear-gradient(180deg, var(--fuss-hell) 0%, var(--fusszeile) 58%);
color: var(--fusszeile-schrift);
font-size: clamp(13px, 1vw, 15px);
}
/* Der Fokusring der Seite steht im --akzent-tief, das in der Mintfassung genau
das Blau der Fusszeile ist und dort verschwaende. Auf dieser Flaeche ist er
deshalb weiss. */
.site-footer :focus-visible { outline-color: var(--fusszeile-schrift); }
/* Marke links, Wegweiser rechts. Die rechte Haelfte ist breiter, sie traegt
drei Spalten gegen einen Absatz. */
.footer-oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: clamp(36px, 4.6vw, 76px); padding-bottom: clamp(36px, 4.2vw, 62px); }
/* Ohne Signet, auf Wunsch von Alfred vom 7. September 2026. Die Marke ist
zweifarbig und traegt Navy, das auf dieser Flaeche verschwindet; eine dunkle
Fassung mit weisser unterer Flaeche lag kurz bei und ist wieder entfernt.
Der Block beginnt deshalb mit dem Namen, ohne oberen Abstand: er soll auf
derselben Hoehe stehen wie die Titel der Spalten daneben. */
.footer-marke-name { margin: 0; font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.02em; }
.footer-marke-satz { margin: 10px 0 0; max-width: 38ch; color: var(--fuss-leise); line-height: 1.6; }
/* Instagram und LinkedIn, angelegt am 7. September 2026. Zwei Zeichen statt
zwei Woertern, unter dem Satz der Marke und nicht als vierte Spalte: der
Wegweiser daneben bleibt dreispaltig.
Die Beruehrflaeche misst 44 Pixel wie das Kreuz der Dialoge, das Zeichen
darin 22. Der negative Aussenabstand zieht die erste Flaeche um ihr halbes
Polster nach links, damit das Zeichen auf der Textkante darueber steht; auf
schmalen Fenstern faellt er weg, dort steht der ganze Block mittig. */
.footer-social { display: flex; gap: 4px; margin: clamp(14px, 1.4vw, 20px) 0 0 -11px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--fuss-leise); transition: color .2s ease, background .2s ease; }
.footer-social a:hover { color: var(--fusszeile-schrift); background: var(--fuss-flaeche); }
.footer-social svg { width: 22px; height: 22px; }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 2.8vw, 40px); }
.footer-spalte { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(9px, .9vw, 12px); }
/* Die Spaltentitel tragen den Beschriftungssatz der Seite, wie .label:
Versalien, Schnitt 500, weite Laufweite. */
.footer-spalte h2 { margin: 0 0 2px; font-size: clamp(11px, .85vw, 13px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--fuss-still); }
/* Die Links stehen etwas leiser als die Marke und werden beim Ueberfahren voll
weiss. Eine Unterstreichung bekommen sie nicht, die hat Alfred am
6. September 2026 fuer die ganze Seite abbestellt. */
.footer-spalte a { padding-block: 3px; color: var(--fuss-leise); font-weight: 500; transition: color .2s ease; }
.footer-spalte a:hover { color: var(--fusszeile-schrift); }
/* Abschlusszeile hinter einer Haarlinie: Jahreszeile links, Kammerangabe
rechts. Auf schmalen Fenstern bricht die Reihe um. */
.footer-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px clamp(24px, 3vw, 48px); padding-top: clamp(18px, 1.9vw, 26px); border-top: 1px solid var(--fuss-linie); font-size: clamp(12px, .9vw, 14px); }
/* Jahreszeile und Kammer sind Pflichtangaben und kein Ziel, sie stehen deshalb
leiser als die Links darueber. */
.footer-name { margin: 0; color: var(--fuss-still); }
.footer-kammer { margin: 0; color: var(--fuss-still); }
/* Bildmarke des Oesterreichischen Rechtsanwaltskammertags vor der
Kammerangabe, von Alfred am 7. September 2026 verlangt. Nur das Zeichen,
ohne Schriftzug: das Wort steht als Text schon daneben.
Sie liegt als Maske und nicht als Bild in der Zeile, damit sie
currentColor traegt und damit denselben leisen Ton wie die Angabe selbst.
Das Rot der Marke erreicht auf dem Navy der Fusszeile nur 2,5:1 und waere
dort ein dunkler Fleck. Der Pfad im Zeichen deckt sich in beiden
Farbwelten, weil der Ton allein aus --fuss-still kommt.
Die Zeile bleibt ein Absatz mit Textgrundlinie, weil .footer-meta seine
Kinder an der Grundlinie ausrichtet: ein inline-block stoert das nicht,
ein Flexcontainer schon.
Das Zeichen steht als data-URI in der Regel und nicht als Verweis auf
assets/brand/oerak-signet.svg. Grund: eine Maske ist ein Bild und
unterliegt der Gleiche-Herkunft-Regel, und ueber file:// hat jede Datei die
Herkunft "null". Beim Doppelklick auf index.html blockiert Chrome den
Verweis deshalb, und in der Fusszeile fehlt das Zeichen ohne jede Meldung
auf der Seite. Die SVG-Datei bleibt die Quelle und ist dokumentiert, hier
steht dieselbe Kontur eingebettet, wie schon beim Rauschen weiter oben. */
.footer-kammer::before {
content: "";
display: inline-block;
width: 1.08em;
height: 1.4em;
margin-right: .62em;
vertical-align: -.34em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19.74 17.85 143.92 186.45'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m121.65,108.41c20.73-6.5,31.49-25.39,31.49-44.09,0-23.1-16.42-46.47-47.79-46.47l-73.05.02c-4.01,0-7.07.43-9.58,2.85-2.46,2.37-2.94,5.09-2.94,8.51v26.36c0,1.73.14,2.94.46,3.74.32.8.84,1.69,1.75,2.65,1.65,1.73,9.58,8.25,11.34,9.69-3.45.04-6.34.52-8.99,2.44-2.48,1.8-4.6,5.04-4.6,9.12v34.28l.02-.03c-.07,3.13.18,5.38,1.25,7.78,1.21,2.62,3.31,5.27,7.12,9.53l66.27,65.82c2.42,2.37,5.61,3.69,9.01,3.69s6.59-1.32,9-3.69l12.62-12.5L47.19,110.82h33.64l52.27,51.63c4.92,4.91,12.97,4.91,17.92,0l12.64-12.42-42.01-41.62Zm-88.89-3.08c-3.01.13-5.5.82-7.53,2.12v-23.95c.25-2.44.94-3.87,2.44-5.01,1.35-.96,3.15-1.35,6.59-1.35l67.51.02c8.09,0,14.64-4.4,14.64-12.72s-6.55-12.73-14.64-12.73H31.75c-2.76,0-4.9.53-6.52,1.6v-24.58c0-2.06.8-3.56,2.42-4.59,1.41-.77,3.15-.77,5.13-.77l72.57-.03c28.57,0,42.3,21.03,42.3,40.98s-14.23,41.01-42.3,41.01H32.76Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19.74 17.85 143.92 186.45'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m121.65,108.41c20.73-6.5,31.49-25.39,31.49-44.09,0-23.1-16.42-46.47-47.79-46.47l-73.05.02c-4.01,0-7.07.43-9.58,2.85-2.46,2.37-2.94,5.09-2.94,8.51v26.36c0,1.73.14,2.94.46,3.74.32.8.84,1.69,1.75,2.65,1.65,1.73,9.58,8.25,11.34,9.69-3.45.04-6.34.52-8.99,2.44-2.48,1.8-4.6,5.04-4.6,9.12v34.28l.02-.03c-.07,3.13.18,5.38,1.25,7.78,1.21,2.62,3.31,5.27,7.12,9.53l66.27,65.82c2.42,2.37,5.61,3.69,9.01,3.69s6.59-1.32,9-3.69l12.62-12.5L47.19,110.82h33.64l52.27,51.63c4.92,4.91,12.97,4.91,17.92,0l12.64-12.42-42.01-41.62Zm-88.89-3.08c-3.01.13-5.5.82-7.53,2.12v-23.95c.25-2.44.94-3.87,2.44-5.01,1.35-.96,3.15-1.35,6.59-1.35l67.51.02c8.09,0,14.64-4.4,14.64-12.72s-6.55-12.73-14.64-12.73H31.75c-2.76,0-4.9.53-6.52,1.6v-24.58c0-2.06.8-3.56,2.42-4.59,1.41-.77,3.15-.77,5.13-.77l72.57-.03c28.57,0,42.3,21.03,42.3,40.98s-14.23,41.01-42.3,41.01H32.76Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---------- Rechtsseiten ----------
Eigene Seite fuer das Impressum, Aufbau nach dem Muster von
verlassenschaftsverfahren.at: Ueberschrift, Rechtsgrundlage als leise Zeile,
darunter eine zweispaltige Beschreibungsliste. Die Bezeichnung steht links in
fester Spaltenbreite, die Angabe rechts, jede Zeile mit Haarlinie darunter,
die letzte ohne. Auf schmalen Fenstern stehen beide untereinander. */
/* Die Einleitung nimmt den Takt der Startseite auf: Beschriftung, grosse
Ueberschrift mit der Mint-Unterstreichung, ein leiser Satz darunter. Sie
steht auf dem Papierton wie der Hero.
Alles auf dieser Seite ist mittig gesetzt, wie der Abschluss der Startseite.
Der Einzug calc(.35 * var(--name)) des Heros faellt deshalb weg, er wuerde
die Mitte verschieben. */
.legal-intro { padding: clamp(20px, 2.6vw, 44px) 0 clamp(40px, 5vw, 78px); text-align: center; }
.legal-intro h1 { max-width: 16ch; margin-inline: auto; margin-block: 0; font-size: clamp(38px, 5.2vw, 76px); font-weight: 700; line-height: 1.16; letter-spacing: -.032em; }
.legal-intro .lead { max-width: 48ch; margin-inline: auto; }
/* Die Angaben stehen auf einer weissen Flaeche ueber die volle Fensterbreite,
genau wie die Rechtsgebiete auf der Startseite. Die Flaeche selbst ist
symmetrisch, die Tabelle darin mittig; die Zeilen bleiben zweispaltig und
linksbuendig, mittig gesetzte Bezeichnungen und Angaben waeren nicht mehr
zu lesen. */
.legal-body { margin-inline: calc(50% - 50vw); padding: clamp(48px, 6vw, 92px) calc(50vw - 50%) clamp(56px, 7vw, 104px); background: var(--weiss); text-align: center; }
.legal-body h2 { margin: clamp(40px, 5vw, 72px) 0 clamp(10px, 1.2vw, 16px); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; letter-spacing: -.02em; }
/* Die Honorarmodelle stehen als direkte Ueberschrift ueber ihrer Liste. Sie
teilen deren linke Kante und die Breite von 860 Pixeln, die folgenden
Unterabschnitte bleiben in .legal-text gebuendelt. */
.legal-body > h2 { max-width: 860px; margin-inline: auto; text-align: left; }
/* Fliesstext der Rechtsseite: seit den Abschnitten Berufsrecht und
Urheberrecht stehen Absaetze auch ohne Ueberschrift darueber, deshalb gilt
die Regel fuer jeden Absatz und nicht mehr nur fuer den nach einem h2. */
.legal-body p { max-width: 62ch; margin: 0 auto; color: var(--tinte-leise); line-height: 1.7; }
.legal-body p + p { margin-top: clamp(12px, 1.2vw, 18px); }
/* Der Fliesstext des Impressums steht linksbuendig und mit seiner linken Kante
auf der Angabenliste darueber, deshalb dieselben 860 Pixel. Mittig gesetzt
war er schwer zu lesen und haing optisch neben der Liste. Die Absaetze
bleiben bei 72 Zeichen, ueber die vollen 860 Pixel waere die Zeile zu lang.
Die Honorarseite nutzt dieselbe Huelle fuer die Abschnitte nach den
Honorarmodellen, aus demselben Grund; auch die Ueberschrift der
Honorarmodelle steht auf der linken Kante der Liste. */
.legal-text { max-width: 860px; margin: 0 auto; text-align: left; }
.legal-text p { max-width: 72ch; margin-inline: 0; }
.impressum-meta + .legal-text { margin-top: clamp(30px, 3.4vw, 48px); }
.legal-body p a { color: var(--tinte); font-weight: 500; transition: color .2s ease; }
.legal-body p a:hover { color: var(--akzent-tief); }
.impressum-meta { max-width: 860px; margin: 0 auto; font-size: clamp(14px, 1.1vw, 16px); text-align: left; }
.impressum-meta-row { display: grid; grid-template-columns: minmax(170px, 34%) minmax(0, 1fr); align-items: baseline; gap: clamp(14px, 1.6vw, 24px); padding: clamp(11px, 1.2vw, 15px) 0; border-bottom: 1px solid var(--linie); }
.impressum-meta-row:last-child { border-bottom: 0; }
/* Die Angabe zur Verantwortung ist kein Kontaktdatum mehr, sondern eine
Fussnote der Seite. Sie bekommt deshalb Luft und eine leisere Bezeichnung. */
.impressum-meta-row-abstand { padding-top: clamp(18px, 2vw, 26px); }
.impressum-meta-row-leise dt { color: var(--tinte-leise); }
.impressum-meta dt { margin: 0; font-weight: 500; line-height: 1.45; }
.impressum-meta dd { margin: 0; color: var(--tinte-leise); line-height: 1.7; overflow-wrap: anywhere; }
.impressum-meta-ref { display: block; margin-top: 3px; color: var(--tinte-still); font-size: .82em; font-weight: 400; letter-spacing: 0; }
.impressum-meta a { color: var(--tinte); font-weight: 500; transition: color .2s ease; }
.impressum-meta a:hover { color: var(--akzent-tief); }
/* Kleingedrucktes unter der Angabenliste: Barauslagen und Umsatzsteuer der
Honorarseite. Es steht linksbuendig auf der linken Kante der Liste darueber,
deshalb dieselben 860 Pixel wie .impressum-meta und .legal-text. Die Regel
nennt .legal-body mit, sonst gewinnt .legal-body p mit seiner hoeheren
Spezifitaet und der Absatz stuende wieder mittig. --tinte-still waere fuer
diese Groesse zu blass, --tinte-leise haelt 4,8 zu 1 auf Weiss. */
.legal-body .legal-kleingedruckt { max-width: 860px; margin: clamp(16px, 1.8vw, 24px) auto 0; color: var(--tinte-leise); font-size: clamp(12px, .95vw, 14px); line-height: 1.6; text-align: left; }
.legal-kleingedruckt + .legal-text { margin-top: clamp(30px, 3.4vw, 48px); }
/* Hervorgehobene Woerter im Fliesstext der Rechtsseiten, seit dem
6. September 2026 fuer Dauer und Preis des Erstgespraechs auf der
Honorarseite. Sie folgen der Regel, die auf der Startseite schon fuer die
Themenworte der Rechtsgebiete gilt: volles --tinte und Schnitt 700,
waehrend der Satz ringsum im leisen --tinte-leise und im Grundschnitt
liegt. Damit heben sie sich auch von den Links ab, die im vollen --tinte,
aber nur im Schnitt 500 stehen. */
.legal-body p strong { color: var(--tinte); font-weight: 700; }
/* Die Honorarmodelle in der Beschreibungsliste von honorar.html heben ihre
Wendungen seit dem 11. September 2026 leiser hervor: volles --tinte, aber
nur Schnitt 500, wie die Bezeichnungen links in derselben Liste. Fett und
dunkel zugleich war Alfred zu dominant. Einen Schnitt 600 gibt es nicht,
die Seite laedt nur 400, 500 und 700. */
.impressum-meta dd strong { color: var(--tinte); font-weight: 500; }
/* ---------- Ueber mich ----------
Zentriertes Originalportraet vor dem vollstaendigen Gemaelde.
Das Gemaelde behaelt sein Originalformat (1198 x 828) mit Freiraum
rundherum. Es liegt vollstaendig und unverzerrt hinter der Person.
margin-inline zieht die Flaeche bis an die Fensterkanten. */
.about-page { background: var(--weiss); }
/* --about-band-luft ist der Abstand zwischen der Kopfzeile und dem Bildband.
Er steht als margin und nicht als padding: das Gemaelde sitzt mit top: 24px
in der Flaeche, das Portraet haengt an deren Unterkante, und ein
Innenabstand wuerde beide gegeneinander verschieben. Der Wert faellt mit
der Kopfzeile mit, damit die Luft am Telefon nicht groesser wirkt als am
Schreibtisch. */
.about-page { --about-band-luft: clamp(20px, 2.8vw, 48px); }
/* --about-bild-breite ist die Breite des Gemaeldes und zugleich die des
Textblocks darunter, damit beide linken Kanten fluchten. Bis zum
21. September 2026 stand an beiden Stellen min(58vw, 940px); Alfred wollte
das Gemaelde an diesem Tag 5 % kleiner, daher 55.1vw und 893px. */
.about-page { --about-bild-breite: min(55.1vw, 893px); }
.about-banner { position: relative; isolation: isolate; height: clamp(420px, 42vw, 680px); margin-block-start: var(--about-band-luft); margin-inline: calc(50% - 50vw); overflow: clip; background: #fff; }
/* Luftige Galerie: Bildformat und Hoehe wachsen gemeinsam mit der Breite.
Die Aquarellspuren stehen ausserhalb des Gemaeldes, kein Bilderrahmen. */
.about-banner-bild { position: absolute; left: 50%; top: 24px; display: block; width: var(--about-bild-breite); height: auto; object-fit: contain; transform: translateX(-50%); }
/* Eigenes dekoratives Bild hinter den Originalen. Die weisse Mitte bleibt
leer; kein generiertes Portraet und keine Textbestandteile im Hintergrund. */
.about-banner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("assets/images/ueber-mich-farbspuren.webp") center / 100% 100% no-repeat; opacity: .7; }
/* Die Maske betrifft nur Transparenz, die Bildpunkte stammen aus dem Foto.
Eine eigene Ebene stellt die Person vor das spaeter im HTML folgende Bild.
Gleicher proportionaler Aufbau auf Desktop und Mobilgeraeten. */
.about-banner-portraet { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.about-banner-portraet img { position: absolute; left: 50%; bottom: 0; width: auto; max-width: 86%; height: 100%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); }
/* Feiner Nebel am unteren Bildrand. Getrennte Masken folgen den beiden
Bildkanten auch mobil. Die Originaldateien und ihre Proportionen bleiben
unveraendert; Gesicht und Haende liegen oberhalb des Uebergangs. */
.about-banner-bild {
-webkit-mask-image: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / .94) 79%, rgb(0 0 0 / .55) 88%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / .94) 79%, rgb(0 0 0 / .55) 88%, transparent 100%);
}
.about-banner-portraet img {
-webkit-mask-image: linear-gradient(to bottom, #000 84%, rgb(0 0 0 / .96) 88%, rgb(0 0 0 / .55) 94%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 84%, rgb(0 0 0 / .96) 88%, rgb(0 0 0 / .55) 94%, transparent 100%);
}
.about-banner::after {
content: "";
position: absolute;
z-index: 2;
inset: auto 0 0;
height: 16%;
pointer-events: none;
background:
radial-gradient(ellipse at 20% 74%, rgb(255 255 255 / .8), rgb(255 255 255 / .35) 34%, transparent 68%),
radial-gradient(ellipse at 79% 63%, rgb(255 255 255 / .7), rgb(255 255 255 / .2) 38%, transparent 70%),
linear-gradient(to bottom, transparent 38%, rgb(255 255 255 / .4) 72%, #fff 100%);
}
/* Der Textteil unter dem Bildband. Bis zum 10. September 2026 standen hier
zwei gleich breite Spalten mit je einem kurzen Absatz; fuer einen
persoenlichen Text war darin kein Platz, und zwei gleich breite Spalten
halbieren jede Laenge sofort wieder.
Jetzt traegt eine schmale Randspalte die Beschriftung und daneben steht eine
einzelne Lesespalte, in der beliebig viele Absaetze untereinander laufen.
Drei Punkte, die dabei zusammengehoeren:
- Die Breite des Blocks ist dieselbe wie die des Gemaeldes, --about-bild-breite.
Beide sind mittig gesetzt, ihre linken Kanten stehen deshalb auf derselben
Senkrechten. Wer die Bildbreite aendert, verschiebt auch den Text.
- Innen ist der Block trotzdem unsymmetrisch: die Lesespalte ist gedeckelt,
der Rest der Breite bleibt rechts als Luft stehen. Der Text sitzt damit
nicht auf der Seitenachse, obwohl der Block als Ganzes mittig steht.
- Die Lesespalte ist bewusst schmal. Ueber rund 60 Zeichen je Zeile wird ein
laengerer Fliesstext muehsam; die Deckelung ist der eigentliche Zweck der
Regel und keine Feinheit.
Der Abstand nach unten haelt die dunkle Fusszeile vom Text weg. */
.about-text { display: grid; grid-template-columns: minmax(0, clamp(76px, 10vw, 190px)) minmax(0, clamp(280px, 44vw, 500px)); column-gap: clamp(20px, 3vw, 64px); width: var(--about-bild-breite); max-width: 100%; margin: clamp(34px, 4vw, 62px) auto clamp(76px, 8.4vw, 124px); color: var(--tinte); }
/* Die Beschriftung steht auf der Hoehe der ersten Zeile der Leitzeile, deshalb
der Innenabstand oben. Die kurze Haarlinie darunter laeuft nur ueber einen
Teil der Randspalte, sie trennt nichts, sie markiert den Anfang. */
.about-text .label { margin: 0; padding-top: .5em; }
.about-text .label::after { content: ""; display: block; width: 44px; height: 1px; margin-top: clamp(10px, 1.1vw, 14px); background: var(--linie); }
.about-text-lauf > p { margin: 0; max-width: 62ch; }
.about-text-lead { font-size: clamp(26px, 2.1vw, 34px); line-height: 1.36; font-weight: 500; letter-spacing: -.025em; }
/* Der Fliesstext steht im leisen Ton, wie auf den uebrigen Unterseiten. Auf
Weiss erreicht er in der Mintfassung 6,1:1, in der warmen 5,5:1. Der
Groessenunterschied zur Leitzeile traegt die Gliederung, nicht eine
Zwischenueberschrift: die Seite soll keine Kapitel bekommen. */
.about-text-lauf > p + p { margin-top: clamp(13px, 1.4vw, 20px); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.68; color: var(--tinte-leise); }
/* Die Pause nach der Leitzeile ist groesser als die zwischen den Absaetzen. */
.about-text-lead + p { margin-top: clamp(24px, 2.8vw, 42px); }
@media (max-width: 899px) {
.about-banner { height: clamp(380px, 116vw, 560px); }
.about-banner-bild { top: 24%; width: auto; height: min(76%, calc(88vw * 828 / 1198)); max-width: 88%; }
.about-banner-portraet img { height: 96%; }
.about-banner::before { display: none; }
/* Einspaltig: die Randspalte hat auf einem Telefon keinen Platz, die
Beschriftung rueckt ueber den Text. */
.about-text { grid-template-columns: 1fr; width: min(620px, 100%); margin-top: 30px; }
.about-text .label { padding-top: 0; margin-bottom: clamp(18px, 4vw, 26px); text-align: center; }
.about-text .label::after { margin-inline: auto; }
/* Die Leitzeile steht am Telefon mittig, wie die Ueberschriften der uebrigen
Seiten. Die Absaetze darunter bleiben linksbuendig, mittig gesetzter
Fliesstext ist auf schmalen Zeilen schwer zu lesen. */
.about-text-lead { max-width: 24ch; margin-inline: auto; text-align: center; }
}
/* ---------- Leistungsseite Immobilienkauf (zurueckgestellt) ----------
ZURUECKGESTELLT am 22. September 2026: die Seite immobilienkauf.html ist
nicht Teil des Projekts, sie steht nur lokal und in .gitignore, siehe
memory.md. Keine ausgelieferte Seite nutzt die folgenden Regeln. Sie
bleiben stehen, damit die Seite spaeter ohne Neubau wieder erscheinen kann.
Erste Leistungsseite, gebaut am 22. September 2026 nach Konzept 03
"Fragen als Gliederung" aus design/concepts/2026-09-21-immobilienkauf-seite,
auf Alfreds Wunsch ruhiger gesetzt als im Konzeptbild. Zwei Teile: ein
der Kopfbereich mit Beschriftung, Titel, Leitsatz und der Hauszeichnung
aus dem Register, darunter auf Weiss ein Register aus Fragen, links die
Frage, rechts die Antwort auf derselben Grundlinie. Der Kopfbereich nutzt
den Rahmen .legal-intro der Unterseiten und dreht nur die Ausrichtung,
wie .blog-intro es fuer den Blog tut. */
/* Der Kopfbereich steht wie auf den uebrigen Unterseiten auf dem Papierton
der Seite, ohne eigene Flaeche: das Konzeptbild zeigte ein Mintband, Alfred
wollte am 22. September 2026 das Grau der anderen Unterseiten. Der Text
traegt den unteren Abstand, nicht der Bereich, weil die Zeichnung auf der
Kante zur weissen Flaeche stehen soll. Links beginnt der Inhalt wie im
Register der Startseite um .35 * --name eingerueckt, auf der Senkrechten
des Signets. */
.legal-intro.kauf-intro {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
column-gap: clamp(24px, 4vw, 72px);
align-items: end;
padding: clamp(28px, 3.4vw, 56px) 0 0 calc(.35 * var(--name));
overflow: clip;
text-align: left;
}
.kauf-intro-text { padding-bottom: clamp(40px, 5vw, 80px); }
.kauf-intro h1 { max-width: none; margin-inline: 0; }
.kauf-intro .lead { max-width: 40ch; margin-inline: 0; }
/* Die Zeichnung steht auf der Kante zur weissen Flaeche. Ihre Datei hat
einen weissen Grund und unter der Grundlinie des Hauses neun Prozent
Leerraum: multiply macht das Weiss zum Papierton, der negative Rand (sechs
Prozent der Bildbreite entsprechen den neun Prozent der Bildhoehe) zieht
die Grundlinie auf die Kante, overflow: clip am Bereich schneidet den Rest
ab. Wer die Zeichnung austauscht, misst den Leerraum neu. */
.kauf-intro-bild { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 0 -6% auto; mix-blend-mode: multiply; }
/* Das Fragenregister. Jede Frage ist ein Raster aus zwei Spalten: links die
Frage in der Groesse einer Leitzeile, rechts die Antwort im leisen Ton.
align-items: baseline setzt die erste Zeile der Antwort auf die Grundlinie
der ersten Zeile der Frage; das ist der Kern des Konzepts und der Grund,
warum Frage und Antwort direkte Kinder des Rasters sein muessen. Die
roemische Ziffer und die Haarlinie stehen in einer eigenen Zeile darueber
und laufen nur ueber die Fragespalte. Das Register steht links an der
Textkante, nicht mittig: rechts bleibt Luft, wie im Konzept. Der linke
Einzug ist derselbe wie beim Band und im Register der Startseite.
Die Absatzregeln von .legal-body stehen frueher in der Datei und verlieren
deshalb gegen diese, gleich spezifischen Regeln. */
.fragen { max-width: 1180px; margin: 0 0 0 calc(.35 * var(--name)); text-align: left; }
.frage { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: clamp(32px, 6vw, 120px); align-items: baseline; }
.frage + .frage { margin-top: clamp(44px, 5.6vw, 88px); }
/* Die Ziffer ist Schmuck und im Markup aria-hidden; --tinte-still traegt auf
Weiss 3,4:1 und ist darum nur fuer solche Beschriftungen zugelassen. */
.frage-num { grid-column: 1; grid-row: 1; margin: 0 0 clamp(16px, 1.8vw, 26px); padding-bottom: clamp(10px, 1vw, 14px); border-bottom: 1px solid var(--linie); color: var(--tinte-still); font-size: clamp(11px, .85vw, 13px); font-weight: 500; letter-spacing: .16em; }
/* Schnitt 500 statt 700 und zwei Stufen unter der Displayzeile: die Fragen
sind viele, und Alfred fand die fetten Fragen des Konzeptbilds ueberreizt. */
.frage h2 { grid-column: 1; grid-row: 2; margin: 0; color: var(--tinte); font-size: clamp(22px, 1.75vw, 28px); font-weight: 500; line-height: 1.32; letter-spacing: -.02em; }
.frage-antwort { grid-column: 2; grid-row: 2; }
.frage-antwort p { max-width: 46ch; margin: 0; color: var(--tinte-leise); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.68; }
.frage-antwort p + p { margin-top: clamp(12px, 1.3vw, 18px); }
@media (max-width: 899px) {
/* Einspaltig: Text, darunter die Zeichnung, die weiter auf der Bandkante
steht. Frage und Antwort stehen untereinander, die Grundlinienbindung
entfaellt. */
.legal-intro.kauf-intro { grid-template-columns: minmax(0, 1fr); }
.kauf-intro-text { padding-bottom: clamp(16px, 4vw, 28px); }
.kauf-intro-bild { max-width: min(100%, 440px); margin-inline: auto 0; }
.frage { grid-template-columns: minmax(0, 1fr); }
.frage-antwort { grid-column: 1; grid-row: 3; margin-top: clamp(12px, 3vw, 18px); }
.frage-antwort p { max-width: 62ch; }
}
/* Sichtbarer Text ist im Hero nicht gewuenscht. Das h1 bleibt fuer
Vorlesegeraete und Suchmaschinen zugaenglich. */
.nur-fuer-vorlesen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Dialoge ---------- */
dialog {
width: min(600px, calc(100% - 32px)); max-height: calc(100svh - 48px); margin: auto; padding: 0;
border: 0; border-radius: 20px; background: var(--papier); color: var(--tinte);
box-shadow: 0 40px 80px -40px rgb(53 49 44 / 42%), 0 2px 10px rgb(53 49 44 / 8%);
overflow: auto; overscroll-behavior: contain;
}
dialog:focus { outline: none; } /* der Dialog selbst nimmt beim Oeffnen den Fokus, sein Rahmen waere nur Rauschen */
dialog::backdrop { background: rgb(53 49 44 / 38%); backdrop-filter: blur(7px); }
dialog[open] { animation: dialog-enter .26s cubic-bezier(.22, 1, .36, 1); }
dialog[open]::backdrop { animation: backdrop-enter .26s ease-out; }
body:has(dialog[open]) { overflow: hidden; }
.dialog-content { position: relative; padding: 60px 46px 46px; }
.close-dialog { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; top: 14px; right: 14px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--tinte-leise); transition: background .2s ease, color .2s ease; }
.close-dialog:hover { background: var(--bild); color: var(--tinte); }
.dialog-label { margin: 0 0 18px; color: var(--akzent-tiefer); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 500; }
dialog h2 { margin: 0; font-size: clamp(28px, 3.2vw, 38px); font-weight: 700; letter-spacing: -.032em; line-height: 1.1; text-wrap: balance; }
.dialog-intro { margin: 22px 0 24px; max-width: 390px; color: var(--tinte-leise); font-size: 15px; line-height: 1.7; }
.dialog-content .button { margin-top: 4px; }
.practice-details { margin: 34px 0; }
.practice-details section { padding: 20px 0; border-top: 1px solid var(--linie); }
.practice-details h3 { font-size: 16px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.015em; }
.practice-details p { margin: 0; color: var(--tinte-leise); font-size: 14px; line-height: 1.7; max-width: 46ch; }
.contact-options a { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 40px 24px 0; border-top: 1px solid var(--linie); transition: color .2s ease; }
.contact-options a:last-child { border-bottom: 1px solid var(--linie); }
.contact-options a > span { color: var(--tinte-still); font-size: 12px; letter-spacing: .04em; }
.contact-options strong { font-weight: 400; font-size: clamp(17px, 4.8vw, 22px); overflow-wrap: anywhere; }
.contact-options svg { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); transition: transform .22s ease; }
.contact-options a:hover { color: var(--akzent-tief); }
.contact-options a:hover svg { transform: translate(2px, calc(-50% - 2px)); }
.office-address { margin-top: 30px; color: var(--tinte-leise); font-size: 13px; line-height: 1.9; font-style: normal; }
.office-address strong { font-weight: 500; color: var(--tinte); }
.legal-content h2 { margin-bottom: 30px; }
.legal-content h3 { margin-top: 30px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.legal-content p, .legal-content address { color: var(--tinte-leise); font-size: 14px; line-height: 1.75; max-width: 56ch; font-style: normal; }
.legal-content a { color: var(--tinte); font-weight: 500; overflow-wrap: anywhere; }
.legal-content a:hover { color: var(--akzent-tief); }
/* ---------- Vollbildmenue ----------
Das Hauptmenue der schmalen Fenster ist derselbe native Dialog wie die
uebrigen Inhalte, nur ueber die ganze Flaeche gezogen. Damit gelten Escape,
Fokusfalle und das Stillegen des Hintergrunds unveraendert, ohne eigenen
Code. Alle Masse ueberschreiben die Karte aus dem Block darueber; die Klasse
gewinnt gegen den Elementselektor, die Reihenfolge im Blatt spielt keine
Rolle. */
.menu-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; box-shadow: none; overscroll-behavior: contain; }
.menu-dialog::backdrop { background: none; backdrop-filter: none; }
/* Kein Hochschieben wie bei der Karte: eine ganze Flaeche, die sich bewegt,
wirkt unruhig. Sie blendet nur auf. */
.menu-dialog[open] { animation: menu-enter .2s ease-out; }
@keyframes menu-enter { from { opacity: 0; } to { opacity: 1; } }
/* min-height statt height: bei sehr niedrigen Fenstern, etwa einem quer
gehaltenen Telefon, darf der Inhalt ueber die Flaeche hinauswachsen und der
Dialog scrollen. */
.menu-content { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: calc(var(--seitenluft) + var(--kopf) + clamp(12px, 2.4vw, 20px)) var(--rand) clamp(28px, 6vw, 44px); }
/* Dieselbe Stelle wie der Hamburger: rechte Textkante der Seite, Mitte auf der
Waagerechten der Kopfzeile. */
.menu-close { position: absolute; top: var(--seitenluft); right: var(--rand); display: grid; place-items: center; width: 44px; height: var(--kopf); padding: 0; border: 0; background: transparent; color: var(--tinte); cursor: pointer; }
/* Die Punkte stehen im Schnitt der grossen Ueberschriften, eine Stufe unter
"Klarheit fuer Ihr Anliegen." Die Linien sind dieselben Haarlinien wie im
Register der Rechtsgebiete. Die Zeilenhoehe von rund 60 Pixeln liegt weit
ueber dem Mindestmass fuer Beruehrflaechen. */
/* margin-block: auto stellt die Punkte in die Senkrechte Mitte. Der obere
Innenabstand des Inhalts haelt dabei die Kopfhoehe frei, sonst laege der
erste Punkt unter dem Kreuz. Reicht die Fensterhoehe nicht, faellt der
automatische Abstand auf null und der Dialog scrollt. */
.menu-nav { display: flex; flex-direction: column; margin-block: auto; }
.menu-nav a { padding-block: clamp(15px, 3.4vw, 22px); border-bottom: 1px solid var(--linie); font-size: clamp(28px, 7.6vw, 40px); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }
.menu-nav a:first-child { border-top: 1px solid var(--linie); }
/* Impressum und Datenschutz stehen leise am Fuss des Menues, wie in der
Fusszeile der Seite. Sie folgen direkt auf die Punkte; an die Unterkante
drueckt sie der automatische Abstand der Punkte darueber. */
.menu-legal { display: flex; flex-wrap: wrap; gap: 4px clamp(20px, 6vw, 34px); padding-top: clamp(30px, 8vw, 52px); color: var(--tinte-leise); font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; }
.menu-legal a { padding-block: 11px; transition: color .2s ease; }
.menu-legal a:hover { color: var(--akzent-tief); }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Ohne JavaScript ----------
Das Inline-Skript im Head setzt .js sofort. Faellt JavaScript aus, bleiben
die verbliebenen Dialoge Rechtsgebiete und Kontakt ueber die Adresszeile
erreichbar: der angesprochene Dialog wird als normaler Abschnitt angezeigt.
Impressum und Datenschutz sind seit dem 6. September 2026 eigene Seiten und
brauchen den Notweg nicht mehr. */
html:not(.js) dialog:target { display: block; position: static; width: auto; max-width: 640px; max-height: none; margin: 0 auto clamp(40px, 8vw, 80px); box-shadow: none; border-top: 1px solid var(--linie); border-radius: 0; }
html:not(.js) dialog:target .close-dialog { display: none; }
html:not(.js) dialog:target .dialog-content { padding-top: 44px; }
/* ---------- Auftritt der Seite ----------
Nur die Textgruppe des Hero wird eingeblendet. Das Portraet erscheint sofort,
damit der groesste sichtbare Inhalt nicht kuenstlich verzoegert wird. */
@media (prefers-reduced-motion: no-preference) {
.hero-copy > * { animation: rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }
.hero-copy .hero-frame { animation-delay: .06s; }
.hero-copy > .lead { animation-delay: .2s; }
.hero-copy > .hero-contact { animation-delay: .26s; }
.site-header { animation: rise .55s cubic-bezier(.22, 1, .36, 1) backwards; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ---------- Auftritt beim Scrollen ----------
Angelegt am 7. September 2026. Weiter unten stehende Bloecke treten einmalig
auf, sobald sie ins Fenster kommen: derselbe Weg und dieselbe Kurve wie im
Hero, nur als Uebergang statt als Animation, damit main.js ihn mit einer
Klasse ausloesen kann.
Die Klasse .auftritt steht im Markup und wird nicht vom Skript gesetzt.
Andernfalls stuenden die Bloecke fuer einen Moment sichtbar da und
verschwaenden danach wieder.
Zwei Bedingungen umschliessen die Regel, beide sind noetig:
- html.js, weil ohne JavaScript niemand .ist-da setzt. Ohne die Bedingung
bliebe der halbe Abschnitt dauerhaft unsichtbar.
- no-preference, weil die Sammelregel im Abschnitt "Bewegung reduzieren" nur
Uebergaenge abschaltet. Die Deckkraft null bliebe stehen, der Inhalt waere
auch dort dauerhaft weg. */
@media (prefers-reduced-motion: no-preference) {
html.js .auftritt { opacity: 0; transform: translateY(var(--auftritt-weg)); }
html.js .auftritt.ist-da { opacity: 1; transform: none; transition: opacity var(--auftritt-dauer) var(--auftritt-kurve), transform var(--auftritt-dauer) var(--auftritt-kurve); }
/* Versatz nur dort, wo mehrere Elemente gemeinsam ins Bild kommen: die
Beschriftung mit ihrer Ueberschrift und die drei Ablaufkarten, die
nebeneinander stehen. Die Zeilen des Registers stehen untereinander und
erscheinen ohnehin nacheinander; ein Versatz wirkte dort wie eine
Verzoegerung. */
html.js .areas > h2.auftritt, html.js .closing-inner > h2.auftritt { transition-delay: var(--auftritt-versatz); }
html.js .closing-inner > .lead.auftritt { transition-delay: calc(2 * var(--auftritt-versatz)); }
html.js .step.auftritt:nth-child(2) { transition-delay: var(--auftritt-versatz); }
html.js .step.auftritt:nth-child(3) { transition-delay: calc(2 * var(--auftritt-versatz)); }
/* Die Unterstreichung unter "Ihr Anliegen." kommt zuletzt. Sie ist eine
text-decoration und laesst sich nicht von links einzeichnen; animierbar
ist allein ihre Farbe, sie blendet deshalb ein. */
html.js .areas h2.auftritt .marker { text-decoration-color: transparent; }
html.js .areas h2.auftritt.ist-da .marker { text-decoration-color: var(--marker); transition: text-decoration-color var(--auftritt-dauer) var(--auftritt-kurve) calc(3 * var(--auftritt-versatz)); }
}
/* ---------- Schmale Fenster ----------
Unter 900 px stehen Text und Bild untereinander. Die Bildflaeche verliert den
negativen Aussenabstand, sonst schoebe sie sich unter den Kopf. */
@media (max-width: 899px) {
/* Auch hier eine ganze Fensterhoehe. Die Reihen bleiben inhaltshoch,
uebrige Hoehe sammelt sich oben, damit die Bildflaeche unten buendig
abschliesst. Reicht der Platz nicht, waechst der Hero wie bisher. */
.hero { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 44px); align-items: end; align-content: end; }
.hero-copy { justify-content: flex-start; padding-block: clamp(28px, 6vw, 56px) 0; }
/* Auf schmalen Fenstern ist der Rahmen zu klein fuer eine Beschriftung auf
der Linie: die Berufsbezeichnung waere zweizeilig geworden und haette die
Linie verdeckt. Sie steht hier im Fluss ueber dem Namen, im Rahmen. */
.hero-frame { padding-top: clamp(14px, 2.6vw, 22px); }
.role { position: static; transform: none; margin: 0 0 clamp(6px, 1.4vw, 12px); padding-inline: 0; background: none; white-space: normal; }
/* Untereinander ist die Bildflaeche breiter als hoch. Deshalb bestimmt hier
die Breite die Groesse der Person, und sie steht mittig; sonst bliebe links
ein leeres Beigefeld stehen. */
/* Untereinander ist die Bildflaeche breiter als hoch. Deshalb bestimmt hier
die Breite die Groesse der Person, und sie steht mittig; sonst bliebe links
ein leeres Beigefeld stehen. Das Seitenverhaeltnis haelt den Kopf im Bild. */
.hero-figure { margin: 0 auto clamp(20px, 4vw, 30px); width: 100%; max-width: 520px; min-height: 0; aspect-ratio: 4 / 5; border-radius: var(--radius); }
.hero-figure img { left: 50%; bottom: -34%; transform: translateX(-52%); width: min(106%, 560px); height: auto; }
.lead { max-width: 46ch; }
/* Die Ziffernspalte behaelt hier ein festes Mass, sonst fluchten die Gebiete
nicht, weil die Eins schmaler ist als die Zwei und die Drei. */
/* Untereinander bleibt in der Textspalte keine freie Hoehe uebrig, der
automatische obere Abstand des Kontaktblocks faellt damit auf null. Ohne
eigenes Mass klebte seine Linie an den Rechtsgebieten darueber. */
.hero-contact { margin-top: clamp(26px, 4.4vw, 40px); }
.area-register { --ziffer-spalte: clamp(42px, 10.5vw, 52px); --register-luft: clamp(12px, 2.6vw, 24px); }
/* Der aufgeklappte Satz ruecht hier an die linke Kante. Auf dem Desktop haelt
der Einzug die Spalten des Registers zusammen; auf dem Telefon kostete er
bei 390 Pixeln Fensterbreite 71 Pixel, also ein Fuenftel der Textbreite,
und der einleitende Satz brach dadurch in vier Zeilen statt in drei. */
.area-detail { padding-left: 0; }
/* Der Kopf traegt hier statt der Punkte den Hamburger. Beides haengt an der
Klasse js: ohne Skript liesse sich das Menue nicht oeffnen, dann bleiben
die Punkte stehen. */
html.js .main-nav { display: none; }
html.js .nav-toggle { display: block; }
/* ---------- Mittig am Telefon ----------
Seit dem 7. September 2026 auf Wunsch von Alfred. Zentriert wird, was als
Block ueber dem Inhalt steht: Beschriftung, Ueberschrift, Einleitung und
die ganze Fusszeile. Fliesstext, Ablaufkarten und das Register bleiben
linksbuendig, mittig gesetzte Absaetze sind auf schmalen Zeilen schwer zu
lesen.
Voraussetzung dafuer ist eine symmetrische Flaeche: der linke Einzug
calc(.35 * var(--name)) richtet die Abschnitte am Namen im Hero aus und
verschiebt am Telefon jeden mittig gesetzten Block um rund 17 Pixel nach
rechts. Er faellt hier deshalb weg. Der Hero behaelt seinen Einzug, dort
haengt der Rahmen um den Namen daran. */
.areas, .closing, .site-footer { padding-left: calc(50vw - 50%); }
.areas > .label, .areas > h2 { text-align: center; }
/* Untereinander statt nebeneinander: fuer Marke und drei Spalten nebeneinander
ist hier kein Platz. Die Spalten bleiben zu dritt, sie tragen nur kurze
Zeilen. Die Beruehrflaeche der Links waechst auf 44 Pixel. */
.footer-oben { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); justify-items: center; text-align: center; }
.footer-marke-satz { margin-inline: auto; }
.footer-social { justify-content: center; margin-left: 0; }
.footer-nav { width: 100%; }
.footer-spalte { gap: 4px; align-items: center; }
.footer-spalte a { padding-block: 12px; }
.footer-meta { justify-content: center; text-align: center; }
dialog { max-height: calc(100svh - 32px); border-radius: 18px; }
.dialog-content { padding: 58px 27px 34px; }
.dialog-label { font-size: 11px; }
.practice-details { margin: 28px 0; }
}
/* ---------- Kontaktangaben im Hero untereinander ----------
Gemessen am 6. September 2026: nebeneinander brauchen Telefon, E-Mail und
Adresse 463 Pixel, die Textspalte hat sie erst ab 521 Pixel Fensterbreite.
Darunter brach die Zeile, und die Adresse stand allein in einer zweiten,
was ausgefranst aussah. Jetzt steht jede Angabe in einer eigenen Zeile,
Beschriftung links, Wert rechts.
Die Grenze liegt bei 540 statt 521 Pixeln: das ist die Stufe, die es im
Blatt schon gibt, und die 19 Pixel Zuschlag halten Abstand zum gemessenen
Wert. Wird eine der drei Angaben laenger, muss neu gemessen werden.
display: contents loest die Huelle jeder Angabe auf, damit Beschriftung und
Wert unmittelbar in die zwei Spalten des Rasters fallen. Die Huelle traegt
keine eigene Bedeutung, das ist deshalb unbedenklich. */
@media (max-width: 540px) {
.hero-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: clamp(10px, 2.4vw, 14px) clamp(14px, 3.4vw, 20px); }
.hero-contact-eintrag { display: contents; }
.hero-contact-label { margin-bottom: 0; }
/* Untereinander war die Fusszeile am Telefon 938 Pixel hoch, davon 583 allein
die Wegweiser, und man scrollte zu lange. Drei Spalten nebeneinander gehen
hier nicht: sie lassen der E-Mail-Adresse rund 150 Pixel, sie braucht 140.
Also zwei gleich breite Spalten, Kanzlei und Kontakt nebeneinander,
Rechtliches darunter ueber beide. Gleich breit ist der Punkt: ungleiche
Spalten setzen die beiden mittig gesetzten Bloecke unsymmetrisch ins Bild,
das sieht nach Versehen aus. Die Reihenfolge bleibt die des Markups, damit
der Tabulator der Lesefolge folgt.
max-width haelt die Spalten beieinander; ohne sie stehen sie bei 540 Pixeln
je 234 Pixel breit weit auseinander. Die 420 sind so gewaehlt, dass die
Adresse ab rund 460 Pixeln Fensterbreite wieder in eine Zeile passt.
text-wrap: pretty entscheidet, wo die Adresse bricht: ohne die Regel nach
"1010", und "Wien" steht allein in der zweiten Zeile, mit ihr nach dem
Komma. Browser ohne die Eigenschaft brechen wie bisher, das ist kein
Fehler.
Unter rund 340 Pixeln Fensterbreite ist die E-Mail-Adresse breiter als ihre
Spalte und ragt beidseitig je fuenf Pixel in die Luft daneben. Die Nachbarn
sind dort kurz, es beruehrt nichts, und die Seite laeuft nicht ueber.
Gemessen am 7. September 2026: die Fusszeile ist am Telefon dadurch 751
statt 938 Pixel hoch. */
.footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 6vw, 34px) clamp(20px, 5vw, 32px); max-width: 420px; margin-inline: auto; }
.footer-nav .footer-spalte:last-child { grid-column: 1 / -1; }
.footer-nav a { text-wrap: pretty; }
}
/* ---------- Schmale Telefone ----------
Gemessen am 6. September 2026: die drei Rechtsgebiete brauchen nebeneinander
378 Pixel, die Textspalte ist bis rund 436 Pixel Fensterbreite schmaler. Der
Umbruch als Flex-Zeile setzte die Trennlinie vor "Strafrecht" an den Anfang
der zweiten Zeile, wo sie ins Leere zeigte.
Zwei feste Spalten loesen das ohne Rechnerei: die dritte Angabe faellt immer
in die erste Spalte und bekommt dort keine Linie. Die kleinere Schrift haelt
den Aufbau bis hinunter zu 320 Pixeln. */
@media (max-width: 440px) {
.hero-areas { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 12px; font-size: 17px; }
.hero-areas span + span { padding-left: 12px; }
.hero-areas span:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* ---------- Kleine Telefone ---------- */
@media (max-width: 420px) {
.site-header { gap: 16px; }
.main-nav { gap: 14px; }
/* Bei 320 Pixeln Fensterbreite bleibt zwischen der E-Mail-Adresse und dem
Rand nur ein Pixel. Faellt die Schrift auf eine Ersatzschrift zurueck,
reicht das nicht mehr; die Umbruchregel faengt das ab. */
.hero-contact a { overflow-wrap: anywhere; }
.button { width: 100%; }
.impressum-meta-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.impressum-meta-row-abstand { margin-top: 10px; }
}
/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
/* Der Stern trifft ::details-content nicht, das Aufklappen lief hier trotz
der Einstellung weiter; nachgemessen am 6. September 2026. Eigene Regel und
nicht in die Liste oben: ein Browser, der dieses Pseudoelement nicht kennt,
wuerfe sonst die ganze Liste weg und behielte alle Uebergaenge. */
.area-row::details-content { transition: none !important; }
}
/* ---------- Blog ----------
Angelegt am 7. September 2026. Die Seiten unter blog/ erzeugt
tools/build-blog.py aus den Markdown-Dateien in content/blog; geschrieben
werden diese in Pages CMS. Der Text kommt damit aus fremder Hand, das
Aussehen bleibt hier.
Deshalb ist jedes Element, das der Editor erzeugen kann, unten gesetzt:
Zwischenueberschrift, Aufzaehlung, nummerierte Liste, Zitat, Link, Bild.
Was hier keine Regel hat, kann im Beitrag auch nicht auftauchen, ohne
aufzufallen. Masse und Farben sind die der uebrigen Unterseiten, die
Blogseiten bringen keine eigenen mit.
Die hoehere Spezifitaet mit vorangestelltem .legal-body ist an mehreren
Stellen noetig: .legal-body h2 traegt sehr grosse Abstaende, die im
Beitragsfliesstext und in der Beitragsliste fehl am Platz waeren. */
/* Uebersicht: je Beitrag eine Karte quer ueber die Breite, untereinander.
Aufgeteilt wie die Zeilen auf der Impressumseite: links das Rechtsgebiet mit
dem Datum, rechts Titel und Vorspann. Die Uebersicht fuehrt damit kein neues
Muster ein, sie nutzt das vorhandene.
Die Karten tragen keine eigene Flaeche, sie stehen auf dem Weiss des
Abschnitts und werden nur von einer feinen Linie gefasst. Das haelt die
Seite ruhig und stellt Titel und Text in den Vordergrund.
Anklickbar ist die ganze Karte, den Verweis traegt aber allein die
Ueberschrift: ihr ::after legt sich als unsichtbare Flaeche darueber. Damit
gibt es je Karte genau einen Verweis mit sprechendem Text, und der Fokusring
umschliesst trotzdem die ganze Karte.
Alle Karten sind gleich hoch, unabhaengig von der Laenge des Titels und der
Beschreibung. Das leistet grid-auto-rows: 1fr, es gibt jeder Zeile die Hoehe
der hoechsten. Damit eine einzige ausschweifende Beschreibung nicht alle
Karten aufblaeht, sind Titel und Text zusaetzlich auf eine feste Zeilenzahl
begrenzt, siehe --blog-karte-titelzeilen und --blog-karte-textzeilen. Der
Ueberhang wird abgeschnitten, nicht umbrochen; der vollstaendige Text steht
im Beitrag.
Die Zeilenzahl gilt fuer alle Fensterbreiten und ist bewusst grosszuegig:
dieselbe Beschreibung braucht in der schmalen Spalte mittlerer Breiten
deutlich mehr Zeilen als auf dem Schreibtisch. Wer sie kleiner setzt,
schneidet dort gewoehnliche Beschreibungen an. Eine hohe Zahl kostet keine
Hoehe: die Karten sind so hoch wie ihr laengster Inhalt, nicht so hoch wie
die erlaubte Zeilenzahl. */
.blog-liste { --blog-karte-titelzeilen: 3; --blog-karte-textzeilen: 5; display: grid; grid-auto-rows: 1fr; gap: clamp(14px, 1.5vw, 20px); width: min(900px, 100%); margin-inline: auto; text-align: left; }
.blog-karte { position: relative; display: grid; grid-template-columns: minmax(128px, 19%) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 30px); padding: clamp(20px, 2.2vw, 30px) clamp(22px, 2.6vw, 36px); border: 1px solid var(--linie); border-radius: clamp(8px, .7vw, 11px); }
/* Die Übersichtskarten bleiben beim Überfahren unverändert. Der Verweis und
sein Fokus bleiben erhalten, nur die dekorativen Zustandswechsel entfallen. */
/* .legal-body p zentriert seine Absaetze mit margin: 0 auto und begrenzt sie
auf 62 Zeichen. In der Karte bestimmt die Spalte die Breite. */
.legal-body .blog-karte p { max-width: none; margin-inline: 0; }
/* Rechte Spalte als Saeule: Titel und Text oben, "Beitrag lesen" unten. So
steht der Hinweis in allen Karten auf derselben Grundlinie, auch wenn der
Text darueber kuerzer ist. */
.blog-karte-inhalt { display: flex; flex-direction: column; }
/* Linke Spalte: Rechtsgebiet ueber Datum, beide klein und versal. Auf der
Grundlinie des Titels, nicht auf der Oberkante der Karte. */
.blog-karte-meta { display: flex; flex-direction: column; gap: 5px; padding-top: .34em; font-size: clamp(11px, .85vw, 13px); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.blog-karte-gebiet { color: var(--akzent-tiefer); }
.blog-karte-datum { color: var(--tinte-still); }
/* Rechte Spalte */
.legal-body .blog-karte-titel { margin: 0; font-size: clamp(19px, 1.7vw, 25px); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--blog-karte-titelzeilen); line-clamp: var(--blog-karte-titelzeilen); overflow: hidden; }
.blog-karte-titel a { color: var(--tinte); }
.blog-karte-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.legal-body .blog-karte .blog-karte-text { max-width: none; margin: clamp(9px, 1vw, 13px) 0 0; font-size: clamp(15px, 1.1vw, 17px); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--blog-karte-textzeilen); line-clamp: var(--blog-karte-textzeilen); overflow: hidden; }
/* margin-top: auto schiebt den Hinweis an den Fuss der Karte, das padding
haelt den Mindestabstand zum Text darueber. */
.legal-body .blog-karte .blog-karte-mehr { margin: auto 0 0; padding-top: clamp(12px, 1.3vw, 17px); color: var(--akzent-tief); font-size: clamp(14px, 1.05vw, 16px); font-weight: 500; }
.blog-leer { color: var(--tinte-leise); }
/* Der Fokusring gehoert um die ganze Karte, nicht nur um die Ueberschrift.
Ohne :has() bleibt es beim gewoehnlichen Ring um den Verweis, dann ist der
Fokus immer noch sichtbar. */
@supports selector(:has(a)) {
.blog-karte:has(.blog-karte-titel a:focus-visible) { outline: 2px solid var(--akzent-tief); outline-offset: 3px; }
.blog-karte .blog-karte-titel a:focus-visible { outline: none; }
}
/* Unter 640 Pixeln reicht die Breite fuer zwei Spalten nicht mehr: Gebiet und
Datum ruecken als eine Zeile ueber den Titel. */
@media (max-width: 640px) {
/* grid-template-rows: auto 1fr gibt die zusaetzliche Hoehe der gleich hohen
Karte allein dem Inhalt. Ohne das dehnt das Raster auch die Zeile mit
Rechtsgebiet und Datum, und zwischen ihr und dem Titel klafft eine Luecke. */
.blog-karte { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(10px, 2vw, 14px); }
.blog-karte-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 0; }
/* Dieselbe Beschreibung braucht auf einem Telefon rund die doppelte
Zeilenzahl wie auf dem Schreibtisch. Gemessen am 7. September 2026 an den
vorhandenen Beitraegen: bei 320 Pixeln bis zu 4 Zeilen Titel und 8 Zeilen
Text. Niedrigere Werte schneiden dort gewoehnliche Beschreibungen an. */
.blog-liste { --blog-karte-titelzeilen: 4; --blog-karte-textzeilen: 8; }
}
/* Kopf eines Beitrags.
Anders als auf Honorar-, Impressums- und Datenschutzseite steht er nicht
mittig, sondern linksbuendig auf denselben 860 Pixeln wie der Fliesstext,
die Fussnoten und der Hinweis darunter. Grund: Dort traegt die Seite eine
kurze Ueberschrift ueber einem Textblock, hier gehoert der Kopf zum Aufsatz
selbst. Ein mehrzeiliger, mittig gesetzter Titel ueber linksbuendigem Text
sieht aus, als waere die Ausrichtung verrutscht.
Die Uebersichtsseite behaelt ihren mittigen Kopf: dort steht "Aktuelles."
ueber Karten, nicht ueber Fliesstext. */
.blog-intro { text-align: left; }
.blog-intro-inhalt { max-width: 860px; margin-inline: auto; }
.legal-intro .blog-titel { max-width: none; margin-inline: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.2; }
.blog-intro .lead { max-width: 58ch; margin-inline: 0; }
.blog-meta { display: flex; flex-wrap: wrap; gap: 8px clamp(8px, 1vw, 12px); margin: clamp(18px, 2vw, 26px) 0 0; color: var(--tinte-still); font-size: clamp(13px, 1vw, 15px); }
/* Fliesstext eines Beitrags. Alles, was der Editor setzen kann. */
.blog-text { hyphens: auto; }
.legal-body .blog-text p { max-width: 68ch; font-size: clamp(16px, 1.15vw, 18px); }
.legal-body .blog-text h2 { margin: clamp(30px, 3.4vw, 48px) 0 clamp(8px, 1vw, 14px); font-size: clamp(19px, 1.65vw, 24px); }
.legal-body .blog-text h3 { margin: clamp(22px, 2.4vw, 32px) 0 clamp(6px, .8vw, 10px); font-size: clamp(16px, 1.25vw, 19px); font-weight: 700; letter-spacing: -.015em; }
.blog-text ul, .blog-text ol { max-width: 66ch; margin: clamp(12px, 1.4vw, 18px) 0 0; padding-left: 1.4em; color: var(--tinte-leise); font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; }
.blog-text li + li { margin-top: 6px; }
.blog-text li::marker { color: var(--tinte-still); }
.blog-text blockquote { max-width: 62ch; margin: clamp(20px, 2.2vw, 30px) 0; padding-left: clamp(16px, 1.6vw, 22px); border-left: 3px solid var(--marker); color: var(--tinte); font-size: clamp(17px, 1.25vw, 20px); line-height: 1.6; }
.blog-text blockquote p { color: inherit; font-size: inherit; }
.blog-text a { color: var(--tinte); font-weight: 500; text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: .18em; transition: color .2s ease, text-decoration-color .2s ease; }
.blog-text a:hover { color: var(--akzent-tief); text-decoration-color: currentColor; }
.blog-text img { display: block; max-width: 100%; height: auto; margin: clamp(24px, 2.8vw, 38px) 0; border-radius: var(--radius); }
.blog-text hr { width: 48px; height: 3px; margin: clamp(24px, 2.6vw, 34px) 0; border: 0; border-radius: 2px; background: var(--marker); }
/* Fussnoten. Die Ziffer im Text ist ein Sprungziel, die Rueckverweise im
Apparat fuehren an die Stelle zurueck, an der sie stand. */
.blog-text sup { line-height: 0; }
.blog-text .footnote-ref { padding-left: 1px; color: var(--akzent-tief); font-weight: 500; font-size: .78em; text-decoration: none; }
.blog-text .footnote-ref:hover { color: var(--akzent-tiefer); text-decoration: underline; }
.blog-fussnoten { max-width: 860px; margin: clamp(34px, 4vw, 56px) auto 0; padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid var(--linie); text-align: left; }
.blog-fussnoten ol { margin: 0; padding-left: 1.6em; }
.blog-fussnoten li { color: var(--tinte-leise); font-size: clamp(12px, .95vw, 14px); line-height: 1.65; scroll-margin-top: 28px; }
.blog-fussnoten li + li { margin-top: clamp(8px, .9vw, 12px); }
.blog-fussnoten li::marker { color: var(--tinte-still); }
.legal-body .blog-fussnoten p { max-width: 78ch; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.blog-fussnoten a { color: var(--tinte); font-weight: 500; overflow-wrap: anywhere; }
.blog-fussnoten a:hover { color: var(--akzent-tief); }
/* Die angesprungene Fussnote hebt sich kurz ab, sonst sucht man in einer
langen Liste die Zeile, auf der man gelandet ist. */
.blog-fussnoten li:target { background: var(--karte); box-shadow: 0 0 0 6px var(--karte); border-radius: 3px; }
.footnote-backref { text-decoration: none; }
/* Abschluss eines Beitrags */
/* .legal-body p nennt ein Element mehr und gewinnt sonst mit seinem
margin: 0 auto; der Verweis klebte damit an der letzten Fussnote. */
.legal-body .blog-zurueck { margin: clamp(30px, 3.4vw, 48px) 0 0; font-size: clamp(14px, 1.05vw, 16px); }
.blog-zurueck a { color: var(--akzent-tief); font-weight: 500; }
.blog-zurueck a:hover { color: var(--akzent-tiefer); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 640px) {
.blog-fussnoten li:target { box-shadow: 0 0 0 4px var(--karte); }
}