/* ========================================================================== zoehrer.legal — Stylesheet Schriften: Source Serif 4 (Display) / Inter (Text), self-hosted ========================================================================== */ @font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/source-serif-4.woff2) format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter.woff2) format('woff2')} /* --- Tokens ------------------------------------------------------------- */ :root{ --ink:#17252b; --ink-deep:#0e1a1f; --paper:#f4f0e8; --paper-light:#faf8f3; --white:#fffefa; --copper:#b56f4c; /* Zierlinien auf hellem Grund */ --copper-solid:#a66544; /* Flaeche unter weisser Schrift, 4.56:1 */ --copper-solid-hover:#93583a; --copper-on-dark:#bb7b5a; /* Kupferschrift auf dunklem Grund, 4.56:1 */ --copper-text:#9a5e40; /* Kupferschrift auf hellem Grund, 4.56:1 */ --brand-blue:#314b78; --brand-blue-light:#3d5c90; --line:#17252b2e; --muted:#57666a; --muted-soft:#5f6e73; --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; } /* --- Reset --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} /* `color-scheme:light` ist keine Formsache. Ohne diese Angabe haelt Chrome auf Android die Seite fuer eine, die noch nichts von Farbschemata weiss, und faerbt sie unter „Automatisches dunkles Design" eigenmaechtig um — Papierton, Kupfer und Petrol kommen dabei verzerrt heraus. Die Angabe sagt: diese Seite ist bewusst hell und vollstaendig durchgestaltet. Sie richtet ausserdem Rollbalken und die Bedienelemente von Formularen auf helle Umgebung aus. */ html{color-scheme:light;scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper-light); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; font-feature-settings:"cv05" 1,"ss01" 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} a,button{-webkit-tap-highlight-color:transparent} h1,h2,h3,p{margin-top:0} ul,ol,menu{list-style:none;margin:0;padding:0} button,input,textarea{font:inherit;color:inherit} /* Sichtbarer, konsistenter Fokusring für Tastaturbedienung */ :focus-visible{outline:2px solid var(--brand-blue);outline-offset:3px;border-radius:1px} .hero :focus-visible,.approach :focus-visible,footer :focus-visible{outline-color:#d4c5ad} .shell{width:min(1180px,100% - 48px);margin-inline:auto} /* Pfeil-Icons als Inline-SVG statt Unicode-Zeichen: unabhängig von der Schrift, auf allen Systemen identisch. */ .icon{display:inline-block;width:1em;height:1em;flex:0 0 auto;vertical-align:-.08em} /* Skip-Link */ .skip-link{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--ink);color:var(--white); padding:14px 20px;font-size:13px;font-weight:600; } .skip-link:focus{left:12px;top:12px} /* --- Rueckmeldung beim Antippen ------------------------------------------- Auf einem Touchgeraet gibt es kein :hover. Die Zeile weiter oben schaltet zusaetzlich das graue Kaestchen ab, das Android und iOS von sich aus ueber ein angetipptes Element legen. Ohne die folgenden Regeln bleibt ein Tipp voellig unbeantwortet — der Finger verdeckt die Stelle, und bis die naechste Seite kommt, weiss niemand, ob der Tipp angekommen ist. Deshalb hier zu jedem Hover-Zustand der passende :active-Zustand. Bewusst ohne Uebergang: eine Rueckmeldung, die erst einblendet, kommt zu spaet. Alle Werte sind vorhandene Token, keine neuen Farben. */ .button:active,.form-submit-row button:active{transform:none} .button-primary:active,.form-submit-row button:active{background:var(--copper-solid-hover)} .header-contact:active{background:var(--brand-blue);border-color:var(--brand-blue);color:var(--white)} .header-contact:active .icon{color:var(--white)} .nav-toggle:active{background:#314b781f;border-color:var(--brand-blue)} .site-header nav a:active{color:var(--brand-blue)} .js .site-header nav a:active{background:#314b7817} .lang-switch a:active,.artikel .zurueck:active{color:var(--copper-text)} .service-mehr:active,.aktuell-mehr:active{border-color:var(--copper-text)} .mehr-dazu a:active{border-color:var(--copper)} .legal-grid aside a:active{color:var(--brand-blue)} .text-link:active,.footer-links a:active,.address-block a:active, .form-submit-row a:active,.legal-grid article a:active{opacity:.6} .service-row:active{background:#17252b0f} .contact-main:active{transform:translateX(6px)} .gb-phasen button:active,.treuhand button:active{background:#17252b0f} /* --- Header -------------------------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:20; background:#faf8f3f5; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid #17252b21; } .header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:82px} .brand{display:inline-flex;align-items:center;justify-self:start} /* --- Wortmarke ----------------------------------------------------------- Echter Text statt Bilddatei: scharf in jeder Auflösung, im Fußbereich ohne Filter umkehrbar, kein zusätzlicher Request, für Vorlesesoftware lesbar. Bezugsgröße S = font-size von .brand-name, alles andere ein Vielfaches. Das Ö steht in Kupfer. Es ist der einzige Buchstabe des Namens mit einem eigenen Zeichen darüber und trägt die Farbe der Marke deshalb, ohne dass etwas hinzugezeichnet werden müsste. Beide Kupfertöne sind die geprüften Token: 4,56:1 auf hellem Grund, 5,14:1 auf dem Ton des Fußbereichs. Der Farbwechsel ist reine Auszeichnung, die Bedeutung hängt nicht an ihm — wer Farben nicht unterscheidet, liest ZÖHRER unverändert. */ .brand-mark{display:inline-flex;align-items:center;gap:14px} .brand-name{ font-family:var(--serif);font-weight:400;font-size:25px; letter-spacing:.14em;line-height:1;color:var(--ink);white-space:nowrap; } /* Der Name steht ganz in Tinte, das Kupfer traegt allein der Zusatz LEGAL. Damit hat jede der beiden Farben genau eine Bedeutung, und die Regel laesst sich in einem Satz sagen. Vom 04. bis 05.09.2026 stand das Ö in Kupfer. Drei unabhaengige Beurteilungen haben davon abgeraten, zwei davon mit Messwerten: der Kupferton traegt gegen den Papierton nur 4,56:1 gegen die 14,4:1 der Tinte, das Ö verliert damit rund 15 Prozent seiner optischen Masse — und im Fussbereich gegen Creme rund drei Viertel. In einem gesperrten Versalienwort haelt gerade die gleichmaessige Tonwertdichte den Namen zusammen. Dazu zwei Zustaende, in denen die Begruendung ganz wegfiel: unter 375 px entfaellt LEGAL, das Kupfer stand dann allein mitten im Namen, und im Druck ist der Kopfbereich ohnehin ausgeblendet. **Das Signet fuer Tab und Profilbild bleibt das kupferne Ö.** Es steht dort allein, ohne Wort, das es aufreissen koennte, und ohne Zusatz, der die Farbe schon traegt. Wortmarke und Signet duerfen sich unterscheiden. */ .brand-rule{width:1px;height:24px;background:#17252b52;flex:0 0 auto} .brand-suffix{ font-family:var(--sans);font-weight:600;font-size:10px; letter-spacing:.3em;line-height:1;padding-top:2px; color:var(--copper-text);white-space:nowrap; } /* Fußbereich: Umkehrung über eigene Farbwerte, ohne CSS-Filter */ .footer-grid .brand-name{color:var(--white)} .footer-grid .brand-rule{background:#fffefa66} .footer-grid .brand-suffix{color:var(--copper-on-dark)} /* Auf den Kopfbereich eingegrenzt. Ohne `.site-header` trafen diese Regeln jedes