/* ============================================================ Kanzlei Boldt — Strafverteidiger Dresden — Monochrom Redesign ============================================================ */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/fraunces-latin.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); } :root { /* Monochrom-Pallette: Von Tiefschwarz bis Warmweiß */ --color-ink: #0a0a0a; --color-navy: #141414; --color-navy-light: #262626; --color-paper: #f8f9f9; --color-paper-alt: #eeeeee; --color-white: #ffffff; /* Akzentfarben in edlen Graustufen / Silber */ --color-gold: #333333; --color-gold-light: #5a5a5a; /* Einzige Akzentfarbe: tiefes Bordeaux, nur für CTAs, Eyebrows, Icons */ --color-accent: #7a2e2e; --color-accent-dark: #612424; --color-line: #cccccc; --color-text: #1f1f1f; --color-text-muted: #555555; --font-serif: "Fraunces", "Georgia", "Iowan Old Style", "Palatino Linotype", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --max-width: 1180px; --radius: 2px; /* Etwas kantiger und seriöser */ --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.06); --shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.12); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-paper); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; } /* --- Bilder --- */ img { max-width: 100%; display: block; transition: filter 0.4s ease, transform 0.4s ease; } /* Warmes Duoton nur dort, wo es gewollt ist — nicht global auf jedes Bild */ .hero-portrait img, .portrait-gallery img, .profile-photo img { filter: grayscale(88%) sepia(6%) contrast(104%) brightness(101%); } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--color-ink); line-height: 1.25; margin: 0 0 0.6em; /* „Datenschutzerklaerung" ist als ein Wort breiter als eine 375-px-Spalte und ragte aus dem Container heraus. lang="de" steht im , deshalb trennt hyphens:auto nach deutschen Regeln; break-word faengt den Rest ab. */ overflow-wrap: break-word; hyphens: auto; /* Only break genuinely long compounds. Without a limit the browser also split short words in display type — "Strafverteidiger Dres-den" broke the city name, which is the one term that must stay whole. */ hyphenate-limit-chars: 14 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5; font-weight: 600; font-optical-sizing: auto; } h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); letter-spacing: -0.025em; line-height: 1.12; font-weight: 600; } h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.015em; line-height: 1.18; font-weight: 600; } h3 { font-size: 1.3rem; font-weight: 600; } h4 { font-weight: 700; } p { margin: 0 0 1.2em; } /* Zeilenlänge: Fließtext bleibt lesbar, egal wie breit der Container ist */ .measure { max-width: 68ch; } .measure-narrow { max-width: 60ch; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.9em; border-bottom: 2px solid var(--color-accent); padding-bottom: 3px; } /* ---------- Header ---------- */ .site-header { background: var(--color-ink); color: var(--color-white); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0 0 rgba(0,0,0,0); transition: box-shadow 0.3s ease; } .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.25); } .site-header .container { display: flex; align-items: center; justify-content: space-between; /* Measured at 1440px: the brand block ended at x=409 and the first nav item began at x=418 - nine pixels. space-between alone guarantees nothing when the row is nearly full, so a real gap is set here. */ gap: 2rem; min-height: 84px; transition: min-height 0.3s ease; } .site-header.is-scrolled .container { min-height: 64px; } .brand { display: flex; flex: 0 0 auto; flex-direction: column; text-decoration: none; color: var(--color-white); } .brand-name { font-family: var(--font-serif); font-size: 1.4rem; letter-spacing: 0.02em; font-weight: bold; } .brand-tag { white-space: nowrap; font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: #aaaaaa; margin-top: 2px; } .nav-toggle { display: none; /* Must keep its square: as a flex sibling of the brand it was being squeezed to a narrow strip at 320px and the icon disappeared. */ flex: 0 0 auto; background: none; border: 1px solid rgba(255,255,255,0.3); color: var(--color-white); border-radius: var(--radius); width: 46px; height: 46px; padding: 11px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .nav-toggle svg { width: 100%; height: 100%; display: block; } .nav-toggle:hover { border-color: rgba(255,255,255,0.6); } .nav-toggle:active { background: rgba(255,255,255,0.1); } .main-nav ul { list-style: none; display: flex; /* Tightened from 2rem to buy back the room the brand gap now takes. */ gap: 1.6rem; margin: 0; padding: 0; } .main-nav a { text-decoration: none; /* 0.95rem made "Arbeits- & Verkehrsrecht" 189px, well over twice the next longest item, and the whole row barely fitted 1440px. */ font-size: 0.9rem; /* Nav labels must never wrap - a two-line "Arbeits- & Verkehrsrecht" breaks the whole row. */ white-space: nowrap; letter-spacing: 0.02em; padding: 6px 2px; color: #cccccc; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .main-nav a:hover, .main-nav a[aria-current="page"] { border-bottom-color: var(--color-white); color: var(--color-white); } .header-cta { display: inline-block; background: var(--color-accent); color: var(--color-white); font-weight: 600; padding: 10px 20px; border-radius: var(--radius); text-decoration: none; font-size: 0.9rem; white-space: nowrap; margin-left: 1.5rem; transition: background 0.2s ease, color 0.2s ease; } .header-cta:hover { background: var(--color-accent-dark); color: var(--color-white); } .header-right { display: flex; align-items: center; flex: 0 0 auto; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-light) 100%); color: var(--color-white); padding: 96px 0 100px; border-bottom: 1px solid var(--color-line); } .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; } .hero h1 { color: var(--color-white); } .hero .lede { font-size: 1.15rem; color: #cccccc; max-width: 46ch; font-weight: 300; } .hero-actions { display: flex; gap: 1rem; margin-top: 2.5rem; flex-wrap: wrap; } .btn { display: inline-block; padding: 14px 28px; border-radius: var(--radius); text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; transition: all 0.2s ease; cursor: pointer; } .btn-primary { background: var(--color-accent); color: var(--color-white); border: 1px solid var(--color-accent); } .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: var(--shadow-soft); transform: translateY(-1px); } .btn-ghost { border: 1px solid rgba(255,255,255,0.4); color: var(--color-white); background: transparent; } .btn-ghost:hover { border-color: var(--color-white); background: rgba(255,255,255,0.05); transform: translateY(-1px); } /* Kanaele im Hero. Boldt ist die Reichweite wichtig, also stehen sie ueber der Falz — aber als Textzeile, nicht als Icon-Leiste, damit sie den Hero nicht in eine Linktree-Seite verwandeln. Verlinkt, nie eingebettet. */ .hero-kanaele { margin: 1.8rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.9rem; } .hero-kanaele a { color: var(--color-white); text-decoration: none; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius); padding: 0.45rem 0.85rem; white-space: nowrap; transition: border-color 0.2s ease, background 0.2s ease; } .hero-kanaele a:hover { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); } /* Frueher trug TikTok die Akzentfarbe. Rot liest sich wie „jetzt auf Sendung", und ob er gerade sendet, laesst sich von einer statischen Seite aus nicht feststellen — TikTok hat dafuer keine offene Schnittstelle und liefert Abrufen ohne Browser ohnehin eine Fehlerseite. Also kein Signal, das etwas behauptet, was die Seite nicht weiss. */ .hero-kanaele .live { border-color: rgba(255,255,255,0.45); } /* ---------- Portrait & Gallery ---------- */ .hero-portrait { position: relative; border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 20px 50px rgba(0,0,0,0.5); background: var(--color-navy); } /* Versetzte Rahmenkante hinter dem Portrait */ .hero-portrait::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--color-accent); border-radius: var(--radius); pointer-events: none; } .hero-portrait img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; border-radius: var(--radius); /* Gesicht natürlicher: deutlich weniger entsättigt als übrige Bilder */ filter: grayscale(30%) sepia(4%) contrast(102%) brightness(101%); } .hero-portrait:hover img { filter: grayscale(0%) contrast(100%); transform: scale(1.02); } .portrait-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; } .portrait-gallery img { border-radius: var(--radius); aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); background: var(--color-navy); } .portrait-gallery img:hover { filter: grayscale(0%) contrast(100%); transform: translateY(-4px); box-shadow: var(--shadow-hover); } .profile-photo { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); margin-bottom: 1.5rem; } .profile-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } /* ---------- Trust bar ---------- */ .trust-bar { background: var(--color-white); border-bottom: 1px solid var(--color-line); } .trust-bar .container { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-top: 36px; padding-bottom: 36px; justify-content: space-between; } .trust-item { flex: 1 1 220px; font-size: 0.92rem; color: var(--color-text-muted); } .trust-item strong { display: block; color: var(--color-ink); font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 4px; } /* ---------- Sections ---------- */ section.block { padding: 96px 0; } section.block.alt { background: var(--color-paper-alt); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); } .section-head { max-width: 62ch; margin-bottom: 3.5rem; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 2.5rem 2rem; box-shadow: var(--shadow-soft); transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: #999999; } .card h3 { margin-bottom: 0.7em; color: var(--color-ink); } .card h2 { font-size: 1.3rem; margin-bottom: 0.7em; color: var(--color-ink); } .card h2 a { text-decoration: none; } .card p:last-child { margin-bottom: 0; } .card .more { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 1rem; font-size: 0.9rem; color: var(--color-ink); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--color-ink); padding-bottom: 1px; } .card .more:hover { color: var(--color-text-muted); border-color: var(--color-text-muted); } .card .more span { display: inline-block; transition: transform 0.2s ease; } .card .more:hover span { transform: translateX(3px); } /* ---------- CTA banner ---------- */ .cta-banner { background: var(--color-ink); color: var(--color-white); padding: 80px 0; text-align: center; } .cta-banner h2 { color: var(--color-white); } .cta-banner .lede { color: #cccccc; max-width: 52ch; margin: 0 auto 2.5rem; } /* Eine Rufnummer darf nicht ueber zwei Zeilen brechen — auf dem Telefon stand die Berliner Nummer als „030" am Zeilenende und „/ 700 159 826" darunter. */ .cta-banner .lede a { white-space: nowrap; } .hero .btn-primary, .cta-banner .btn-primary { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); } .hero .btn-primary:hover, .cta-banner .btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--color-white); } /* ---------- Footer ---------- */ .site-footer { background: var(--color-ink); color: #888888; padding: 64px 0 32px; font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.1); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.1); } .footer-grid h3 { color: var(--color-white); font-size: 1rem; margin-bottom: 1.2rem; font-family: var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; } .footer-grid ul { list-style: none; margin: 0; padding: 0; } .footer-grid li { margin-bottom: 0.6rem; } .footer-grid a { text-decoration: none; color: #aaaaaa; transition: color 0.2s ease; } .footer-grid a:hover { color: var(--color-white); } /* Die Kanaele sind verlinkt, nicht eingebettet. Ein eingebetteter Feed wuerde die IP jedes Besuchers an TikTok bzw. Meta senden, bevor er etwas angeklickt hat, und damit ein Einwilligungsbanner ausloesen (§ 25 Abs. 1 TDDDG). */ .footer-social a { white-space: nowrap; } /* Das
-Element ist von Haus aus kursiv. In der Kontaktspalte stand dadurch als einzige Spalte alles schraeg. */ .site-footer address { font-style: normal; line-height: 1.9; } /* Die Mailadresse brach mitten im Wort um („rechtsanwalt-" / „boldt.com"). Lieber die ganze Adresse in die naechste Zeile schieben. */ .site-footer address a[href^="mailto:"] { white-space: nowrap; } /* Die Rufnummer ist die Handlung, die diese Seite will — sie darf sich vom uebrigen Grau abheben. */ .site-footer address a[href^="tel:"] { color: var(--color-white); font-weight: 600; white-space: nowrap; } /* Das Monogramm stand allein ueber dem Namen, waehrend die drei anderen Spaltenueberschriften oben auf einer Linie sassen. Jetzt sitzt es in der Zeile, wie im Seitenkopf. */ .footer-marke h3 { display: flex; align-items: center; gap: 0.6rem; } .footer-marke .footer-mark { flex: 0 0 auto; } /* Feine Akzentkante unter den Spaltenueberschriften — dasselbe Motiv wie die Linie unter den eyebrow-Zeilen im Seiteninhalt. */ .footer-grid h3::after { content: ""; display: block; width: 26px; height: 2px; background: var(--color-accent); margin-top: 0.7rem; } .footer-marke h3::after { display: none; } .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: 0.82rem; color: #949494; /* WCAG-AA-Kontrast auf Ink (zuvor #666 = 3.4:1, jetzt ~6:1) */ } .footer-bottom a { color: #b3b3b3; text-decoration: underline; } .footer-bottom a:hover { color: var(--color-white); } /* ---------- Demo notice ---------- */ .demo-banner { background: #eeeeee; color: var(--color-text-muted); text-align: center; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 16px; border-bottom: 1px solid #dddddd; } .demo-banner strong { font-weight: 700; color: var(--color-text); } /* ---------- Inner page hero ---------- */ .page-hero { background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-navy-light) 100%); color: var(--color-white); padding: 72px 0; border-bottom: 1px solid var(--color-line); } .page-hero h1 { color: var(--color-white); margin-bottom: 0.3em; } .page-hero .lede { color: #cccccc; max-width: 60ch; margin: 0; font-weight: 300; } .breadcrumb { font-size: 0.85rem; color: #a3a3a3; /* WCAG AA auf dem Hero-Verlauf (#888 lag bei 4,3:1) */ margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: 0.05em; } .breadcrumb a { color: #cccccc; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; color: var(--color-white); } /* ---------- Content layout ---------- */ .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: start; } .side-card { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-soft); position: sticky; top: 110px; } .side-card .stacked { margin-top: 1.5rem; } .side-card .stacked-sm { margin-top: 0.8rem; } .side-card .route-cta { margin: 1rem 0 0; } .side-card .channels { font-size: 0.9rem; margin-bottom: 0; } /* Both asides sit in one column so the grid cannot strand them in separate rows. */ .content-grid .side-column { display: flex; flex-direction: column; gap: 2rem; } .side-card h3 { font-size: 1.2rem; border-bottom: 1px solid var(--color-line); padding-bottom: 0.5rem; } .side-card address { font-style: normal; font-size: 0.95rem; line-height: 1.8; color: var(--color-text); } .list-check { list-style: none; margin: 1.5rem 0; padding: 0; } .list-check li { padding-left: 1.35em; position: relative; margin-bottom: 0.8em; } /* Vorher ein ■-Glyph mit top:-2px. Das saß ueber der Zeile und wirkte wie ein kaputter Listenpunkt; als Kasten laesst es sich auf die Mitte der ersten Zeile setzen statt auf die Grundlinie der Schrift. */ .list-check li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 6px; height: 6px; background: var(--color-accent); } /* Teaser auf der Startseite: die drei neuesten Meldungen, statisch. Bewusst kein rotierender Banner — Runyons Messung an nd.edu: rund 1 % Klickrate auf den Slider, davon 84 % auf die erste Folie. Was rotiert, wird uebersehen, und es konkurriert mit der Rufnummer, die hier die eigentliche Handlung ist. */ .aktuelles-teaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 1000px; margin: 0 auto; } .teaser { display: block; text-decoration: none; color: inherit; padding: 1.4rem 1.5rem; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); border-top: 2px solid var(--color-accent); transition: border-color 0.2s ease, transform 0.2s ease; } .teaser:hover { transform: translateY(-2px); border-color: var(--color-accent); } /* Immer gestapelt: Bei gemischten Laengen sass das Datum mal neben, mal unter der Rubrik — drei Karten nebeneinander sahen dadurch ungleich aus. */ .teaser-kopf { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; margin-bottom: 0.7rem; } .teaser-kopf time, .teaser-kopf .aktuell-datum { font-size: 0.8rem; color: var(--color-text-muted); } .teaser-titel { display: block; font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.35; } .teaser-mehr { text-align: center; margin: 2rem 0 0; } .teaser-mehr a { font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-accent); } @media (max-width: 900px) { .aktuelles-teaser { grid-template-columns: 1fr; gap: 1rem; } } /* Aktuelles — kurze, datierte Meldungen. Bewusst eine Seite statt neun eigener Seiten: 120-Wort-Meldungen als Einzelseiten waeren duenne Inhalte, und beim monatlichen Austausch muesste man neun Dateien und die Sitemap nachziehen. */ .aktuelles-liste { max-width: 760px; margin: 0 auto; } .aktuell { padding-bottom: 2.4rem; margin-bottom: 2.4rem; border-bottom: 1px solid var(--color-line); } .aktuell:last-child { border-bottom: 0; margin-bottom: 0; } .aktuell-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; margin: 0 0 0.6rem; } .aktuell-kopf .eyebrow { margin: 0; } .aktuell-kopf time, .aktuell-kopf .aktuell-datum { font-size: 0.85rem; color: var(--color-text-muted); } /* Feste 1,4rem liessen zwei Meldungstitel bei 320 px ueber vier Zeilen laufen — die globale h2-clamp() greift hier nicht, weil sie ueberschrieben wird. */ .aktuell h2 { font-size: clamp(1.15rem, 4.6vw, 1.4rem); margin-bottom: 0.6rem; } .aktuell p { margin: 0 0 0.8rem; } .aktuell-quelle { font-size: 0.86rem; color: var(--color-text-muted); margin-bottom: 0 !important; } .aktuell-quelle a { color: var(--color-text-muted); } .aktuell-quelle a:hover { color: var(--color-accent); } /* Zwei-Klick-Widgets von anwalt.de */ .widget-zwei-klick { max-width: 680px; margin: 0 auto 2.5rem; padding: 1.6rem; background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); text-align: center; } .widget-zwei-klick.ist-geladen { padding: 0; border: 0; background: none; } .widget-hinweis { margin: 0 0 1.2rem; font-size: 0.92rem; color: var(--color-text-muted); } /* .btn-ghost ist fuer dunklen Grund gebaut — weisse Schrift auf weisser Karte war unsichtbar. Auf hellem Grund braucht der Knopf eigene Farben. */ .widget-zwei-klick .btn { border-color: var(--color-ink); color: var(--color-ink); background: transparent; } .widget-zwei-klick .btn:hover { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); } .widget-alternative { margin: 1rem 0 0; font-size: 0.88rem; } .widget-alternative a { color: var(--color-text-muted); } /* Kein Deckel und kein Scrollbalken: Das iframe waechst auf die Hoehe seines Inhalts, main.js misst sie nach dem Laden nach. 700px ist nur der Startwert, bis gemessen wurde. */ .widget-rahmen { width: 100%; height: 700px; border: 0; display: block; overflow: hidden; } /* ---------- Contact form ---------- */ .form-grid { display: grid; gap: 1.4rem; } /* Hinweis unter einem Feld — erklaert, warum die Angabe verlangt wird. */ .feld-hinweis { display: block; margin-top: 0.35rem; font-size: 0.82rem; color: var(--color-text-muted); } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } label { display: block; font-size: 0.88rem; font-weight: 700; color: var(--color-ink); margin-bottom: 0.5em; text-transform: uppercase; letter-spacing: 0.04em; } input, textarea, select { width: 100%; padding: 14px 16px; border: 1px solid var(--color-line); border-radius: var(--radius); font-family: inherit; font-size: 1rem; background: var(--color-white); color: var(--color-ink); transition: border-color 0.2s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-ink); } .form-note { font-size: 0.85rem; color: var(--color-text-muted); } /* ---------- Legal pages ---------- */ .legal-content { font-size: 1.02rem; } .legal-content h2 { margin-top: 2em; border-bottom: 1px solid var(--color-line); padding-bottom: 0.3em; } .legal-content h2:first-child { margin-top: 0; } .narrow { max-width: 760px; } /* Article heroes share the body measure so the page reads as one column instead of a wide headline sitting over a narrow text block. */ .article-hero .container { max-width: 760px; } /* ---------- Responsive ---------- */ /* The desktop header row needs about 1164px once the brand has real separation from the nav (measured: brand 255 + gap 32 + nav 622 + gap 32 + button 175, plus 48 of container padding). Below that the burger takes over; the button stays visible down to 720px, where the sticky bottom bar replaces it. */ /* Zwischen 1181 und 1400 px passen sieben Navigationspunkte, aber nicht mehr samt Knopf: gemessen ragte „Termin vereinbaren" bei 1200 px 69 px und bei 1280 px 29 px ueber den rechten Rand. Statt die ganze Navigation hinter den Burger zu schieben, faellt in diesem Band der Knopf weg — er kostet allein rund 190 px, und Hero und Fusszeile tragen dieselbe Handlung ohnehin. */ @media (min-width: 1181px) and (max-width: 1400px) { .header-cta { display: none; } } @media (max-width: 1180px) { /* The container is space-between and the hidden nav takes no room, so the three remaining children spread out and the burger was stranded mid-row. margin-left:auto pushes it right; the container gap has to shrink too, otherwise 2rem plus a 0.9rem margin left a 46px hole between burger and button that read as a mistake. */ .site-header .container { gap: 0.75rem; } .nav-toggle { display: inline-block; margin-left: auto; margin-right: 0; } /* Die 24 px Abstand am Knopf trennen ihn sonst von der Navigation. Hinter dem Burger gibt es keine Navigation mehr — zusammen mit dem Container-Abstand standen dort 36 px Loch zwischen Burger und Knopf. */ .header-cta { margin-left: 0; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-ink); display: none; box-shadow: 0 12px 20px rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1); } .main-nav.is-open { display: block; } .main-nav ul { flex-direction: column; padding: 1.5rem 24px 2rem; gap: 0.5rem; } .main-nav a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } } @media (max-width: 900px) { .hero .container { grid-template-columns: 1fr; gap: 2.5rem; } /* Sobald der Hero einspaltig wird, laeuft das Portrait ueber die volle Breite. Mit 3/4 ergab das auf einem iPad hochkant eine 720x960-Box, in die das 630x750-Bild nur noch als Kopf passte. Breite begrenzen und dasselbe 4/5 wie auf dem Telefon verwenden. */ .hero-portrait { max-width: 420px; } .hero-portrait img { aspect-ratio: 4 / 5; object-position: center 25%; } .footer-grid { grid-template-columns: 1fr 1fr; } /* Grid-Kinder haben von Haus aus min-width:auto und koennen daher breiter bleiben als ihre Spalte. Bei 320 px stand das Kontaktformular deshalb 23 px ueber den Container hinaus. */ .content-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .content-grid > *, .content-grid .side-column > * { min-width: 0; } .side-card { position: static; } .portrait-gallery { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { /* On a phone the sticky bottom bar carries the contact action, so the header button can go and give the brand room. Der leere Container muss mit weg: als Flex-Kind erzeugte er weiter den 12-px-Abstand, wodurch der Burger 36 px vom Rand stand statt 24 wie das Logo gegenueber. */ .header-cta { display: none; } .header-right { display: none; } /* Der versetzte Rahmen ragte 14 px ueber die rechte Containerkante hinaus. Auf dem Telefon laesst er den ganzen Block nach rechts verrutscht wirken, obwohl das Bild exakt auf 24 px sitzt. */ .hero-portrait::before { inset: 10px 10px -10px -10px; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .form-row-2 { grid-template-columns: 1fr; gap: 1.2rem; } section.block { padding: 64px 0; } .portrait-gallery { grid-template-columns: 1fr; } } /* At 320px the brand (mark + 204px name) plus the burger overran the 272px of usable width. Everything in the lockup steps down one notch. */ @media (max-width: 400px) { .site-header .container { gap: 0.75rem; } .brand-mark { width: 36px; height: 36px; font-size: 1.1rem; } .brand-name { font-size: 1.15rem; } .brand-tag { font-size: 0.6rem; letter-spacing: 0.1em; } } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } /* ============================================================ Ausbaustufe 2 — Vertrauen, Conversion, Inhalt, Politur, Technik ============================================================ */ /* ---------- Skip-Link & Fokus-Zustände (A11y) ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--color-white); color: var(--color-ink); padding: 12px 20px; font-weight: 700; text-decoration: none; border: 2px solid var(--color-ink); } .skip-link:focus { left: 8px; top: 8px; } :focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; border-radius: 1px; } /* Auf dunklen Flächen einen hellen Fokusring, damit er sichtbar bleibt */ .site-header :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .cta-banner :focus-visible, .site-footer :focus-visible, .mobile-cta-bar :focus-visible { outline-color: var(--color-white); } /* ---------- Marken-Mark (B-Monogramm) ---------- */ .brand { flex-direction: row; align-items: center; gap: 0.7rem; } .brand-mark { flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); background: var(--color-white); color: var(--color-ink); display: grid; place-items: center; font-family: var(--font-serif); font-weight: 700; font-size: 1.4rem; line-height: 1; filter: none; /* nicht von der globalen Graustufen-Regel betreffen (falls img) */ } .brand-text { display: flex; flex-direction: column; } .footer-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); background: var(--color-white); color: var(--color-ink); font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.9rem; } /* ---------- Icons in Karten & Trust-Items ---------- */ .card-icon { display: inline-flex; width: 44px; height: 44px; margin-bottom: 1.1rem; color: var(--color-accent); } .card-icon svg { width: 100%; height: 100%; display: block; filter: none; } .trust-item { position: relative; } .trust-icon { display: inline-flex; width: 30px; height: 30px; margin-bottom: 0.7rem; color: var(--color-accent); } .trust-icon svg { width: 100%; height: 100%; display: block; filter: none; } /* ---------- Soforthilfe-Zeile im Hero ---------- */ .hero-hotline { display: inline-flex; align-items: baseline; gap: 0.6em; flex-wrap: wrap; margin-top: 1.8rem; padding: 12px 16px; border: 1px solid rgba(255,255,255,0.22); border-left: 3px solid var(--color-accent); border-radius: var(--radius); font-size: 0.92rem; color: #d6d6d6; background: rgba(255,255,255,0.04); } .hero-hotline strong { color: var(--color-white); font-weight: 700; } .hero-hotline a { color: var(--color-white); font-weight: 700; text-decoration: none; /* The rule is always 2px and only changes colour. Growing it on hover added a pixel to the line box and nudged the whole hotline panel down. */ border-bottom: 2px solid rgba(143, 47, 47, 0.55); white-space: nowrap; } .hero-hotline a:hover { border-bottom-color: var(--color-accent); } /* ---------- Vertrauens-Zeile an CTAs ---------- */ .cta-reassure { margin-top: 1.4rem; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--color-text-muted); } .cta-banner .cta-reassure, .hero .cta-reassure { color: #bcbcbc; } .cta-reassure svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.35em; filter: none; } /* ---------- FAQ (natives details/summary) ---------- */ .faq { max-width: 60rem; margin: 0 auto; } .faq details { border-bottom: 1px solid var(--color-line); } .faq details:first-of-type { border-top: 1px solid var(--color-line); } .faq summary { list-style: none; cursor: pointer; padding: 1.35rem 2.5rem 1.35rem 0; position: relative; font-family: var(--font-serif); font-size: 1.2rem; color: var(--color-ink); transition: color 0.2s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--color-text-muted); } .faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-sans); font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); transition: transform 0.2s ease; } .faq details[open] summary::after { content: "–"; } .faq details > div { padding: 0 2.5rem 1.6rem 0; color: var(--color-text); max-width: 68ch; } .faq details > div p:last-child { margin-bottom: 0; } /* ---------- Mandantenstimmen (Platzhalter-Struktur) ---------- */ .testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; } .testimonial { background: var(--color-white); border: 1px solid var(--color-line); border-radius: var(--radius); padding: 2.2rem 2rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; } .testimonial .quote-mark { font-family: var(--font-serif); font-size: 2.6rem; line-height: 0.6; color: var(--color-line); margin-bottom: 0.6rem; } .testimonial blockquote { margin: 0 0 1.4rem; font-size: 1.02rem; color: var(--color-text); } .testimonial figcaption { margin-top: auto; font-size: 0.9rem; color: var(--color-text-muted); } .testimonial figcaption strong { display: block; color: var(--color-ink); font-weight: 700; } .placeholder-tag { display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--color-text-muted); border: 1px dashed var(--color-line); border-radius: var(--radius); padding: 3px 8px; margin-bottom: 1rem; } /* ---------- Ablauf & Kosten (Prozess-Schritte) ---------- */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; counter-reset: step; } .process-step { position: relative; /* The number sits absolute at the top and occupies 52.8px of line-height plus its 2px rule. At 3.4rem (54.4px) the heading started before the rule ended, so the two collided. 4.3rem leaves a real gap. */ padding-top: 4.3rem; } .process-step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--font-serif); font-size: 2rem; color: var(--color-ink); border-bottom: 2px solid var(--color-accent); padding-bottom: 0.1rem; } .process-step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; } .process-step p { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0; } .cost-note { margin-top: 3rem; /* Without a measure this box spanned the full 1070px column, about 112 characters per line. 760px matches the .narrow utility already used for running text. */ max-width: 760px; padding: 1.6rem 1.8rem; background: var(--color-white); border: 1px solid var(--color-line); border-left: 3px solid var(--color-accent); border-radius: var(--radius); font-size: 0.95rem; color: var(--color-text); } .cost-note :last-child { margin-bottom: 0; } /* ---------- Verwandte Themen (interne Verlinkung) ---------- */ .related-topics { border-top: 1px solid var(--color-line); padding-top: 2rem; margin-top: 3rem; } .related-topics h2 { font-size: 1.3rem; margin-bottom: 1.2rem; } .related-links { display: flex; flex-wrap: wrap; gap: 0.8rem; } .related-links a { display: inline-block; padding: 8px 16px; border: 1px solid var(--color-line); border-radius: var(--radius); text-decoration: none; font-size: 0.9rem; font-weight: 600; color: var(--color-ink); transition: border-color 0.2s ease, background 0.2s ease; } .related-links a:hover { border-color: var(--color-ink); background: var(--color-paper-alt); } /* ---------- Klebrige Mobil-Kontaktleiste ---------- */ .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--color-ink); border-top: 1px solid rgba(255,255,255,0.15); box-shadow: 0 -6px 20px rgba(0,0,0,0.25); /* 24px seitlich, damit die Leiste dieselbe Randflucht haelt wie Logo, Burger und der ganze Text darueber. */ padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; } .mobile-cta-bar a { flex: 1 1 0; text-align: center; padding: 13px 8px; border-radius: var(--radius); text-decoration: none; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; } .mobile-cta-bar .mc-call { background: var(--color-accent); color: var(--color-white); } .mobile-cta-bar .mc-contact { background: transparent; color: var(--color-white); border: 1px solid rgba(255,255,255,0.5); } .mobile-cta-bar svg { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.4em; filter: none; } @media (max-width: 720px) { .mobile-cta-bar { display: flex; } body { padding-bottom: 74px; } /* Platz für die fixierte Leiste */ } /* ---------- Ratgeber ---------- */ /* Der Autor steht am Fuß des Artikels, nicht davor: oben schwebte die Zeile zwischen Hero und erster Überschrift und gehörte zu nichts. Unten schließt sie den Text ab und trägt gleich den Hinweis zur Einzelfallberatung mit. */ /* Schließt den Text ab, noch vor den verwandten Themen. Der Abstand nach oben ist bewusst groß: mit wenig Luft klebte die Zeile an der letzten FAQ-Antwort und las sich wie eine weitere. */ .article-signatur { margin: 3.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--color-line); font-size: 0.82rem; line-height: 1.7; color: var(--color-text-muted); } .article-signatur em { display: block; margin-top: 0.35rem; } .ratgeber-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } /* ============================================================ Ausbaustufe 3 — Vertrauensbeweis, Rhythmus, Zustände ============================================================ */ /* ---------- Google-Bewertung als Beleg ---------- */ .rating { display: inline-flex; align-items: center; gap: 0.6em; flex-wrap: wrap; margin: 0 0 1.6rem; font-size: 0.92rem; text-decoration: none; color: var(--color-text-muted); } .rating-stars { display: inline-flex; gap: 2px; color: #d4a017; /* Sterne bleiben golden — der einzige Ort, an dem Farbe Beleg ist */ } .rating-stars svg { width: 1.05em; height: 1.05em; display: block; } .rating-score { font-weight: 700; color: var(--color-ink); } .rating-source { border-bottom: 1px solid currentColor; } .rating:hover .rating-source { color: var(--color-ink); } /* Auf dunklem Grund (Hero, CTA-Banner) */ /* .eyebrow inherits --color-text-muted (#555), which is meant for the light page background. On the dark heroes that resolves to 2.03:1 against the gradient's light end - below the 4.5:1 that 12px text needs. #c9c9c9 is the shade already used here for muted text on dark and lands near 9:1. */ .hero .eyebrow, .page-hero .eyebrow, .cta-banner .eyebrow { color: #c9c9c9; } .hero .rating, .cta-banner .rating { color: #c9c9c9; } .hero .rating-score, .cta-banner .rating-score { color: var(--color-white); } .hero .rating:hover .rating-source, .cta-banner .rating:hover .rating-source { color: var(--color-white); } /* Bewertungskarten (nutzt die vorhandene .testimonial-Struktur) */ .testimonial .rating-stars { margin-bottom: 0.9rem; } /* ---------- Asymmetrische Sektion (bricht den Karten-Rhythmus) ---------- */ .split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4.5rem; align-items: center; } .split.reverse > :first-child { order: 2; } .split-media { position: relative; border-radius: var(--radius); } /* Der versetzte Rahmen gehoert hinter das Bild, so wie im Hero. Ohne die Stapelreihenfolge lief seine linke Kante quer ueber das Portrait. */ .split-media img { position: relative; z-index: 1; width: 100%; /* height:auto is load-bearing. The carries height="750" as a presentational hint, and aspect-ratio only applies while one axis is auto — without this the box rendered 342x750 on a phone and cover showed just 54% of the width, which cropped the portrait down to a face. */ height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius); border: 1px solid var(--color-line); box-shadow: var(--shadow-soft); } /* Versetzte Akzentkante — dasselbe Motiv wie im Hero, damit es als System liest */ .split-media::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--color-accent); border-radius: var(--radius); pointer-events: none; } .split-body h2 { margin-bottom: 0.8em; } .split-body p:last-child { margin-bottom: 0; } /* Linksbündige Sektionsköpfe für die asymmetrischen Blöcke */ .section-head.left { margin-left: 0; text-align: left; } /* ---------- Öffnungszeiten ---------- */ .hours { list-style: none; margin: 0.8rem 0 0; padding: 0; font-size: 0.95rem; } .hours li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.45em 0; border-bottom: 1px solid var(--color-line); } .hours li:last-child { border-bottom: 0; } .hours dt, .hours .day { color: var(--color-text-muted); } .hours .time { font-variant-numeric: tabular-nums; } /* ---------- Anfahrt ---------- */ .route-list { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.95rem; color: var(--color-text-muted); } .route-list li { padding-left: 1.6em; position: relative; margin-bottom: 0.6em; } .route-list li::before { content: "→"; position: absolute; left: 0; color: var(--color-accent); } /* ---------- Zustände: alles Anfassbare reagiert auch auf :active ---------- */ .btn:active { transform: translateY(1px); box-shadow: none; } .header-cta:active { background: var(--color-accent-dark); transform: translateY(1px); } .card:active { transform: translateY(-1px); } .card .more:active { color: var(--color-accent); border-color: var(--color-accent); } .related-links a:active { background: var(--color-line); } .faq summary:active { color: var(--color-accent); } .mobile-cta-bar a:active { filter: brightness(0.9); } .main-nav a:active { color: var(--color-white); } /* Karten-Icons vereinheitlichen: dieselbe Größe, gleicher Abstand, überall */ .card > .card-icon:first-child { margin-top: 0; } /* Konzentrische Radien: innere Elemente bekommen den kleineren Radius */ .card, .side-card, .cost-note, .testimonial { border-radius: calc(var(--radius) * 2); } .card .more, .related-links a, .btn, input, textarea, select { border-radius: var(--radius); } /* ---------- Mobil: Höhe sparen, Gesicht früher zeigen ---------- */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2.5rem; } .split.reverse > :first-child { order: 0; } .split-media::after { inset: 12px -12px -12px 12px; } } @media (max-width: 720px) { .hero { padding: 48px 0 56px; } .hero .container { gap: 2rem; } /* Das Portrait ist 630x750, also hochkant. Eine 4/3-Box schnitt hier rund ein Drittel der Bildhoehe weg und kappte den Kopf. 4/5 laesst die Aufnahme fast vollstaendig stehen; beschnitten wird nur noch seitlich. */ .hero-portrait img { aspect-ratio: 4 / 5; object-position: center 25%; } /* Untergrenzen der clamp() waren fuer 375 px zu gross: h1 landete bei 36,8 px und lief ueber drei Zeilen. Jetzt skalieren beide mit der Geraetebreite. 8,2vw liess die laengste Ueberschrift (strafrecht.html) bei 390 px auf vier und bei 360 px auf fuenf Zeilen laufen. Bei 7,6vw mit 1,75rem Boden bleibt jede Seite auf hoechstens drei Zeilen, gemessen ueber alle 14 Seiten. */ h1 { font-size: clamp(1.75rem, 7.6vw, 2.6rem); } /* Der Boden band erst ab 333 px: „Achten Sie auf das Verzeichnis der beschlagnahmten Sachen" lief auf einem 320-px-Display ueber vier Zeilen. Mit 1,25rem sind es drei; bei 360 px und darueber gewinnt ohnehin 6vw, dort aendert sich nichts. */ h2 { font-size: clamp(1.25rem, 6vw, 1.9rem); } /* 0,3em sind bei 56 px Ueberschrift genug Luft, bei 30 px nicht mehr: der Fliesstext klebte an der Zeile darueber. */ .page-hero h1 { margin-bottom: 0.8em; } .page-hero { padding: 48px 0; } section.block { padding: 56px 0; } .section-head { margin-bottom: 2.5rem; } /* Tap-Targets: nichts unter 44px */ .mobile-cta-bar a { min-height: 48px; display: flex; align-items: center; justify-content: center; } .faq summary { padding-top: 1.15rem; padding-bottom: 1.15rem; min-height: 44px; } .footer-grid a { display: inline-block; padding: 4px 0; } .btn { padding: 15px 26px; } /* Auf dem Telefon steht die Aktionsleiste unten fest im Bild und traegt „Anrufen" und „Kontakt". Der Knopf im Hero sagte dasselbe ein zweites Mal und schob den Notfallkasten nach unten. */ .hero .hero-actions { display: none; } /* The contact lede tells people the quickest route is to phone, so on a stacked layout the number has to come before the form. */ /* display:contents dissolves the wrapper on a phone so the two cards become grid items again and the form can sit between them. */ .content-grid .side-column { display: contents; } .content-grid .side-card--primary { order: -1; } .content-grid .side-card--detail { order: 1; } .contact-form button[type="submit"] { width: 100%; justify-self: stretch !important; } } /* ============================================================ Waage — baut sich beim Scrollen selbst zusammen ============================================================ Der Fortschritt kommt als --p (0 bis 1) aus main.js. Jedes Bauteil hat eigene Keyframes, die nur in ihrem Abschnitt der Zeitachse etwas tun — dadurch setzen Ständer, Balken, Aufhängungen und Schalen nacheinander ein. Die Animationen laufen pausiert; bewegt wird ausschließlich über einen negativen animation-delay. Das funktioniert in jedem Browser, auch dort, wo animation-timeline noch fehlt (Firefox), und braucht kein Video. Ohne JavaScript bleibt --p auf 1: die Waage steht dann fertig da. ============================================================ */ .scales { --p: 1; display: block; width: clamp(150px, 19vw, 250px); margin: 0 auto 2.2rem; color: var(--color-accent); } .scales svg { width: 100%; height: auto; display: block; overflow: visible; } .scales [class^="s-"] { transform-box: fill-box; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-play-state: paused; animation-delay: calc(var(--p) * -1s); } /* pathLength="1" normiert jede Linie auf dieselbe Länge — so zeichnet derselbe Keyframe kurze und lange Striche gleich sauber. Der Strichmuster- Wert steht hier statt in jedem Keyframe. */ .scales .s-foot, .scales .s-base, .scales .s-post, .scales .s-finial, .scales .s-beam, .scales .s-chain, .scales .s-pan { stroke-dasharray: 1; } .scales .s-foot { animation-name: waage-fuss; } .scales .s-base { animation-name: waage-sockel; } .scales .s-post { animation-name: waage-staender; } .scales .s-finial { animation-name: waage-knauf; } .scales .s-beam { animation-name: waage-balken; } .scales .s-chain { animation-name: waage-kette; } .scales .s-pan { animation-name: waage-schale; } /* Drehpunkte in Bildkoordinaten statt in der eigenen Bounding-Box. Mit fill-box drehte jede Aufhängung um die Mitte ihres eigenen Kastens, nicht um den Punkt, an dem sie am Balken hängt — bei voller Neigung spreizten die Ketten und die Schalen standen neben den Balkenenden statt darunter. */ .scales .s-tip { transform-box: view-box; transform-origin: 70px 28px; } .scales .s-hang-l { transform-box: view-box; transform-origin: 18px 28px; } .scales .s-hang-r { transform-box: view-box; transform-origin: 122px 28px; } /* --schwung kommt als Gradzahl aus main.js: eine gedämpfte Feder, die dem Scrollstand folgt und beim Anhalten nachschwingt. Die Aufhängungen drehen exakt gegen, deshalb bleiben die Schalen waagerecht. Ohne JS bleibt der Wert 0 und die Waage steht ruhig. */ .scales .s-tip { transform: rotate(calc(var(--schwung, 0) * 1deg)); } .scales .s-hang-l, .scales .s-hang-r { transform: rotate(calc(var(--schwung, 0) * -1deg)); } /* Alles wird gezeichnet, in der Reihenfolge, in der man eine Waage aufbauen würde: Fuß, Sockel, Ständer, Knauf, Balken aus der Mitte heraus, Ketten, Schalen. Vorher flogen Balken und Schalen als fertige Teile ins Bild und der Knauf sprang auf; drei Idiome in einer Grafik. */ @keyframes waage-fuss { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { opacity: 1; } 10% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes waage-sockel { 0%, 8% { stroke-dashoffset: 1; opacity: 0; } 9% { opacity: 1; } 20% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* Positiver Offset: der Ständer wächst von unten nach oben. Bei -1 säße der Strich am Pfadanfang, der Ständer stünde fertig da und würde von oben nach unten weggewischt. */ @keyframes waage-staender { 0%, 18% { stroke-dashoffset: 1; opacity: 0; } 19% { opacity: 1; } 38% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes waage-knauf { 0%, 36% { stroke-dashoffset: 1; opacity: 0; } 37% { opacity: 1; } 47% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes waage-balken { 0%, 45% { stroke-dashoffset: 1; opacity: 0; } 46% { opacity: 1; } 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes waage-kette { 0%, 60% { stroke-dashoffset: 1; opacity: 0; } 61% { opacity: 1; } 74% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } @keyframes waage-schale { 0%, 72% { stroke-dashoffset: 1; opacity: 0; } 73% { opacity: 1; } 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* Erst wenn die Waage steht, wägt sie ab */ /* Die Schalen hängen frei und bleiben dabei waagerecht — genau das unterscheidet eine Waage von einer bloß gedrehten Grafik. */ /* Bewegung ist hier Zierde, keine Information */ @media (prefers-reduced-motion: reduce) { .scales [class^="s-"] { animation: none !important; } .scales .s-tip, .scales .s-hang-l, .scales .s-hang-r { transform: none !important; } } /* Umbruch nur auf dem Telefon: sonst reißt die Aufzählung der Schwerpunkte mitten zwischen „Arbeits-" und „und Verkehrsrecht" auseinander. Auf dem Desktop ist die Zeile lang genug und der Umbruch würde stören. */ .br-mobil { display: none; } @media (max-width: 720px) { .br-mobil { display: inline; } } /* ---------- Druck ---------- */ /* Ein Ratgeber-Artikel wird ausgedruckt und mitgenommen. Ohne diese Regeln druckt der schwarze Kopf samt Burger und Button mit, der graue Seitengrund legt sich über jedes Blatt, und die FAQ-Antworten bleiben zugeklappt — auf Papier heißt das: Fragen ohne Antworten. */ @media print { :root { --color-ink: #000; --color-text: #000; --color-text-muted: #333; } html, body { background: #fff !important; color: #000; font-size: 11pt; } /* Bedienelemente haben auf Papier keine Funktion */ .nav-toggle, .main-nav, .footer-nav-col, .header-cta, .mobile-cta-bar, .skip-link, .scales, .breadcrumb, .related-topics, .cta-banner { display: none !important; } /* Farbflächen kosten nur Toner */ .site-header, .hero, .page-hero, section.block, section.block.alt, .site-footer, .card, .side-card, .cost-note, .faq { background: #fff !important; color: #000 !important; box-shadow: none !important; } .site-header { position: static !important; border-bottom: 1px solid #000; padding-bottom: 6pt; } .site-header .container { min-height: 0 !important; } .brand-name, .brand-tag, .hero h1, .page-hero h1, .hero .lede, .page-hero p { color: #000 !important; } .brand-mark { border: 1px solid #000; } /* Aufgeklappt drucken, sonst stehen dort Fragen ohne Antwort. Chrome blendet den Inhalt geschlossener
über ::details-content aus; main.js klappt zusätzlich vor dem Druck alles auf, weil sich nicht jeder Browser über CSS dazu überreden lässt. */ .faq details::details-content { content-visibility: visible !important; block-size: auto !important; } .faq details > *:not(summary) { display: block !important; } .faq summary { list-style: none; font-weight: 700; padding-right: 0; } .faq summary::after { content: "" !important; } .faq summary::marker, .faq summary::-webkit-details-marker { display: none; } main, .container, .legal-content, .narrow { max-width: 100% !important; width: auto !important; } section.block { padding: 12pt 0 !important; } a { color: #000; text-decoration: underline; } /* Telefon und Adresse sind auf Papier der eigentliche Zweck - sie drucken in Schwarz, nicht im Grau der Bildschirmfassung. */ .site-footer, .site-footer a, .site-footer address, .site-footer p { color: #000 !important; } /* Bei externen Zielen die Adresse mitdrucken, sonst ist der Verweis auf Papier wertlos */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; } a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; } p, li { orphans: 3; widows: 3; } img, figure, .card { break-inside: avoid; page-break-inside: avoid; } .reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================ Rechtsgebiete: Untermenüs, Unterseiten, drei Gerätefassungen ============================================================ Drei Fassungen mit festen Grenzen, damit jede für sich gestaltet ist statt eine gestreckte Handyansicht: Telefon bis 720 px — Menü als Liste, Unterpunkte aufklappbar, Leiste unten Tablet 721–1180 px — Menü als Übersichtstafel mit allen Unterpunkten, Telefonnummer im Kopf, zweispaltige Inhalte Desktop ab 1181 px — waagerechte Navigation mit Aufklappmenüs 1180 ist die Breite eines iPad Air quer; bis dorthin passt die Zeile mit sieben Punkten nicht (gemessen, siehe Header-Kommentar oben). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .nav-gruppe { position: relative; display: flex; align-items: center; } .nav-auf { background: none; border: 0; color: #cccccc; width: 22px; height: 22px; padding: 2px; margin-left: 1px; cursor: pointer; border-radius: var(--radius); } .nav-auf svg { width: 100%; height: 100%; display: block; transition: transform 0.2s ease; } .nav-auf:hover { color: var(--color-white); } .nav-gruppe.ist-offen > .nav-auf svg { transform: rotate(180deg); } .nav-gruppe.ist-bereich > .nav-oben { color: var(--color-white); } .main-nav .nav-unter { display: block; list-style: none; margin: 0; padding: 0; gap: 0; } .header-tel { display: none; } /* ---------- Desktop ---------- */ @media (min-width: 1181px) { .nav-unter { position: absolute; top: 100%; left: -18px; min-width: 260px; padding: 0.8rem 0; margin-top: 12px; background: var(--color-ink); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 32px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s; z-index: 110; } /* Unsichtbare Brücke über die 12 px Luft, sonst schließt das Menü, sobald die Maus vom Menüpunkt zur Liste wandert. */ .nav-unter::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .main-nav .nav-unter { padding: 0.8rem 0; margin-top: 12px; } .main-nav .nav-unter-spalten { display: grid; grid-template-columns: repeat(2, minmax(230px, 1fr)); min-width: 520px; } .nav-unter-spalten .nav-alle { grid-column: 1 / -1; } .nav-gruppe:hover > .nav-unter, .nav-gruppe:focus-within > .nav-unter, .nav-gruppe.ist-offen > .nav-unter { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .main-nav .nav-unter a { display: block; padding: 8px 18px; border-bottom: 0; font-size: 0.88rem; white-space: nowrap; } .main-nav .nav-unter a:hover, .main-nav .nav-unter a[aria-current="page"] { background: rgba(255,255,255,0.07); border-bottom: 0; } .nav-alle { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 0.5rem; padding-top: 0.5rem; } .main-nav .nav-alle a { color: #a3a3a3; } } /* ---------- Tablet und Telefon: gemeinsames Menü-Panel ---------- */ @media (max-width: 1180px) { .main-nav { max-height: calc(100vh - 64px); overflow-y: auto; } .main-nav .nav-liste { gap: 0; } .nav-gruppe { flex-wrap: wrap; } .nav-gruppe > .nav-oben { flex: 1 1 auto; } .main-nav .nav-unter a { font-size: 0.92rem; color: #b8b8b8; padding: 9px 0; border-bottom: 0; } .main-nav .nav-unter a[aria-current="page"] { color: var(--color-white); } .nav-alle { display: none; } .main-nav .nav-unter { padding: 0; gap: 0; } } /* ---------- Tablet ---------- */ @media (min-width: 721px) and (max-width: 1180px) { .header-tel { display: inline-block; color: var(--color-white); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius); margin-right: 0.6rem; } .header-tel:hover { border-color: var(--color-white); } /* Reihenfolge im Kopf: Marke | Telefon, Termin | Burger. */ .header-right { margin-left: auto; order: 2; } .nav-toggle { order: 3; margin-left: 0.6rem; } /* Das Menü ist hier eine Tafel: Strafrecht breit mit zwei Spalten, daneben Verkehrs- und Arbeitsrecht, darunter die Kanzleiseiten als eine Zeile. */ .main-nav .nav-liste { display: grid; grid-template-columns: 1.6fr 1fr; column-gap: 2.5rem; padding: 1.8rem 24px 2rem; } .nav-gruppe { align-items: baseline; align-content: flex-start; } .nav-gruppe:first-child { grid-row: span 2; } .nav-auf { display: none; } .main-nav .nav-gruppe > .nav-oben { font-family: var(--font-serif); font-size: 1.15rem; color: var(--color-white); border-bottom: 1px solid rgba(255,255,255,0.15); padding: 0 0 8px; margin-bottom: 6px; width: 100%; } .main-nav .nav-unter { width: 100%; margin-bottom: 1.4rem; } .main-nav .nav-unter-spalten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } .main-nav .nav-liste > li:not(.nav-gruppe) { grid-column: span 1; } .main-nav .nav-liste > li:not(.nav-gruppe) { display: inline-block; } .main-nav .nav-liste > li:nth-child(4) { grid-column: 1; } .main-nav .nav-liste > li:not(.nav-gruppe) a { border-bottom: 1px solid rgba(255,255,255,0.08); } /* Inhalte: zweispaltig statt Telefonstapel */ .hero .container { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; } .hero-portrait { max-width: none; } .content-grid { grid-template-columns: minmax(0, 1fr); } .content-grid .side-column { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .side-card { position: static; } } @media (min-width: 901px) and (max-width: 1180px) { .content-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3rem; } .content-grid .side-column { display: flex; } .side-card { position: sticky; } } /* ---------- Telefon ---------- */ @media (max-width: 720px) { .nav-auf { width: 44px; height: 44px; padding: 12px; } .main-nav .nav-unter { display: none; width: 100%; padding: 0 0 0.8rem 1rem; } .main-nav .nav-gruppe.ist-offen > .nav-unter { display: block; } .main-nav .nav-gruppe > .nav-oben { border-bottom: 0; } .nav-gruppe { border-bottom: 1px solid rgba(255,255,255,0.08); } } /* ---------- Unterseiten ---------- */ .szene { margin: 0 0 2.2rem; } .szene img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius) * 2); filter: grayscale(88%) sepia(6%) contrast(104%); } .side-tel { margin: 0 0 0.6rem; } .side-tel a { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; text-decoration: none; color: var(--color-ink); white-space: nowrap; } .side-knopf { width: 100%; text-align: center; margin-top: 1rem; } .side-themen ul { list-style: none; margin: 0; padding: 0; } .side-themen li + li { border-top: 1px solid var(--color-paper-alt); } .side-themen a { display: block; padding: 7px 0; text-decoration: none; font-size: 0.93rem; color: var(--color-text); } .side-themen a:hover { color: var(--color-accent); } .side-themen a[aria-current="page"] { font-weight: 700; color: var(--color-ink); } .side-themen a[aria-current="page"]::before { content: "— "; color: var(--color-accent); } .content-grid .side-column { position: sticky; top: 100px; } .content-grid .side-column .side-card { position: static; } @media (max-width: 1180px) { .content-grid .side-column { position: static; } } .thema-raster { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .thema-karte { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 1.8rem 1.6rem; } .thema-karte h3 { font-size: 1.2rem; } .thema-karte p { font-size: 0.95rem; color: var(--color-text-muted); flex: 1 1 auto; } .thema-karte .more { align-self: flex-start; } /* ---------- Einwilligungsbanner ---------- */ .einwilligung { position: fixed; left: 24px; bottom: 24px; z-index: 200; max-width: 440px; background: var(--color-white); color: var(--color-text); border: 1px solid var(--color-line); border-radius: calc(var(--radius) * 2); box-shadow: 0 18px 48px rgba(0,0,0,0.28); padding: 1.4rem 1.5rem 1.3rem; font-size: 0.9rem; line-height: 1.55; } .einwilligung h2 { font-size: 1.15rem; margin: 0 0 0.5rem; } .einwilligung p { margin: 0 0 0.9rem; } .einwilligung a { color: var(--color-ink); } .einwilligung-knoepfe { display: flex; gap: 0.6rem; flex-wrap: wrap; } /* Beide Knöpfe gleich gewichtet: Ablehnen darf nicht schwerer zu finden sein als Zustimmen (Orientierungshilfe der Datenschutzkonferenz). */ .einwilligung-knoepfe button { flex: 1 1 150px; padding: 11px 14px; font: inherit; font-weight: 700; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-white); } .einwilligung-knoepfe button:hover { background: var(--color-navy-light); } @media (max-width: 720px) { .einwilligung { left: 12px; right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: none; } } .cookie-einstellungen { background: none; border: 0; padding: 0; font: inherit; color: #b3b3b3; text-decoration: underline; cursor: pointer; } .cookie-einstellungen:hover { color: var(--color-white); } /* ---------- Schwarz-Weiß-Testfassung (?stil=sw) ---------- */ html[data-stil="sw"] { --color-accent: #0a0a0a; --color-accent-dark: #333333; } html[data-stil="sw"] .site-header .header-cta, html[data-stil="sw"] .mobile-cta-bar .mc-call, html[data-stil="sw"] .cta-banner .btn-primary, html[data-stil="sw"] .hero .btn-primary, html[data-stil="sw"] .page-hero .btn-primary { background: var(--color-white); color: var(--color-ink); border-color: var(--color-white); } html[data-stil="sw"] .hero .btn-primary:hover { background: #dddddd; color: var(--color-ink); } html[data-stil="sw"] .site-header .header-cta:hover, html[data-stil="sw"] .cta-banner .btn-primary:hover { background: #dddddd; color: var(--color-ink); } html[data-stil="sw"] img { filter: grayscale(100%) contrast(106%) !important; } /* Mit drei Rechtsgebieten samt Aufklapppfeil ist die Navigation 763 px breit statt 622; bei 1440 px ragte „Termin vereinbaren" 126 px über die Containerkante. Der Kopf darf deshalb breiter sein als der Inhalt darunter, und die Abstände werden enger. Gemessen passt die Zeile so ab 1401 px mit Knopf (Bedarf 1219 von 1272 px) und zwischen 1181 und 1400 px ohne. */ @media (min-width: 1181px) { .site-header .container { max-width: 1320px; } .main-nav .nav-liste { gap: 1.3rem; } .nav-auf { width: 18px; height: 18px; padding: 1px; } .header-cta { margin-left: 0; } } html[data-stil="sw"] .hero-hotline a { border-bottom-color: rgba(255, 255, 255, 0.45); } html[data-stil="sw"] .hero-hotline a:hover { border-bottom-color: var(--color-white); }