/* =========================================================================
   DRB IT SOLUTION — Designsystem „Papier"
   Helle Basis · Markenblau als einziger Akzent · Instrument Sans + Martian Mono
   ------------------------------------------------------------------------
   Auf hellem Grund traegt das Markenblau selbst: #0051a8 erreicht auf dem
   Papiergrund 7.40:1 und ist damit als Text, Link und Flaeche zulaessig.
   Genau das ging auf Anthrazit NICHT (dort nur 4.41:1 auf gehobener Flaeche) —
   deshalb faellt hier der Umweg ueber eine Ersatzfarbe weg und die Seite
   spricht die echte Markenfarbe. Alle Werte unten sind nachgerechnet
   (OKLCH -> sRGB -> WCAG 2.2), je gegen Papier / Panel / Hover.
   ========================================================================= */

/* --------------------------------------------------- SCHRIFTEN (inline)
   Bewusst NICHT per @import: das erzeugte eine dreistufige Ladekette
   HTML -> drb-site.css -> schrift.css -> woff2. Gemessen startete die
   Schriftdatei dadurch erst nach ~820 ms und der Text sprang nach dem
   Tausch um — CLS bis 0,24 auf einzelnen Seiten (Google-Grenze 0,10).
   Kyrillische Subsets sind entfernt, die Seite ist durchgehend deutsch.
   ------------------------------------------------------------------- */
/* ---- instrument-sans ---- */
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans/instrument-sans-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- martian-mono ---- */
/* latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono/martian-mono-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono/martian-mono-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono/martian-mono-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/martian-mono/martian-mono-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
    /* --- Flaechen: drei Papierstufen, kuehl getoent, kein reines Weiss --- */
    --paper:   oklch(0.988 0.002 250);  /* #FAFBFC  Seitengrund */
    --paper-2: oklch(0.966 0.004 250);  /* #F2F4F6  Karten, Typenschild, Register */
    --paper-3: oklch(0.938 0.006 250);  /* #E8EBEE  Hover */

    /* --- Tinte --- */
    --ink:   oklch(0.225 0.014 258);    /* #181C22  16.52 / 15.50 / 14.26 */
    --ink-2: oklch(0.440 0.012 258);    /* #4E5359   7.50 /  7.04 /  6.47 */
    --ink-3: oklch(0.520 0.011 258);    /* #65696F   5.32 /  4.99 /  4.59 */

    /* --- Linien --- */
    --line:    oklch(0.905 0.006 250);  /* #DDE0E3  1.28 — rein dekorativ. Jede
                                           Trennung ist zusaetzlich durch Abstand
                                           kodiert, nie nur durch diese Linie. */
    --line-ui: oklch(0.620 0.010 250);  /* #82878C  3.51 / 3.30 / 3.03 — Kanten
                                           interaktiver Elemente, WCAG 1.4.11 */

    /* --- Akzent: das echte Markenblau aus logo.svg --- */
    --akz:      oklch(0.470 0.150 258); /* #1A57AD  6.71 / 6.30 / 5.80 */
    --akz-tief: oklch(0.400 0.140 258); /* #084491  9.07 / 8.51 / 7.83 — Hover */

    /* --- Signalfarbe, reserviert bevor das erste Formular sie braucht --- */
    --signal: oklch(0.500 0.150 40);    /* #A63C0C  6.21 / 5.82 / 5.36 */

    /* --- Schrift --- */
    --f-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --f-mono: "Martian Mono", ui-monospace, SFMono-Regular, monospace;
    --lh-text: 1.6;
    --ls-text: 0;

    /* --- Massstab --- */
    --t-meta:  0.6875rem;
    --t-small: 0.875rem;
    --t-body:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --t-lead:  clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --t-h3:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --t-h2:    clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
    --t-h1:    clamp(2rem, 1.35rem + 3vw, 4rem);

    /* --- Raum --- */
    --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
    --s-5: 48px; --s-6: 72px; --s-7: 104px;
    --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --wrap: 1200px;
    --pad: clamp(20px, 4vw, 56px);
    --radius: 8px;

    /* --- Bewegung: asymmetrisch, hinein schneller als heraus --- */
    --in:  120ms;
    --out: 200ms;
    --ease: cubic-bezier(.2,.7,.2,1);
}


/* ============================================== DUNKLE VARIANTE
   Reihenfolge ist Absicht:
   1. Systemvorgabe (prefers-color-scheme) greift, solange der Besucher
      nichts selbst gewaehlt hat. Deckt iOS, Android, Windows, macOS, Linux ab.
   2. Eine ausdrueckliche Wahl per Umschalter (data-theme) schlaegt das System.
      Weil dieser Block spaeter steht, gewinnt er bei gleicher Spezifitaet.
   ================================================================= */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    /* --- Flaechen --- */
    --paper:   oklch(0.175 0.008 250);  /* #0E1114 */
    --paper-2: oklch(0.210 0.009 250);  /* #15191C */
    --paper-3: oklch(0.260 0.010 250);  /* #202429 */
    /* --- Tinte (hell auf dunkel) --- */
    --ink:     oklch(0.950 0.004 250);  /* #ECEFF1  16.39 / 15.31 / 13.42 */
    --ink-2:   oklch(0.800 0.006 250);  /* #BBBEC1  10.15 /  9.48 /  8.31 */
    --ink-3:   oklch(0.700 0.007 250);  /* #9B9FA3   7.10 /  6.63 /  5.82 */
    /* --- Linien --- */
    --line:    oklch(0.320 0.010 250);  /* #2F3338  dekorativ */
    --line-ui: oklch(0.550 0.012 250);  /* #6C7278   3.91 /  3.65 /  3.20 */
    /* --- Akzent: hier NICHT das Markenblau. #007aff erreicht auf diesem Grund
           nur 4.72:1 und auf der gehobenen Flaeche 4.41:1 und verfehlt damit
           die 4.5:1 fuer Text. Mint (aus dem DRB-Dokumentengruen #179f63
           hergeleitet) erreicht 11.37:1. Blau bleibt Logofarbe. --- */
    --akz:      oklch(0.820 0.115 160); /* #7CDBAA  11.37 / 10.62 /  9.31 */
    --akz-tief: oklch(0.885 0.095 160); /* heller fuer Hover auf dunklem Grund */
    --signal:   oklch(0.780 0.140 55);  /* #FB9D59   9.12 /  8.52 /  7.47 */
    /* Hell-auf-Dunkel wirkt fetter und enger: mehr Durchschuss, etwas Laufweite */
    --lh-text: 1.62;
    --ls-text: 0.004em;
    color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    /* --- Flaechen --- */
    --paper:   oklch(0.175 0.008 250);  /* #0E1114 */
    --paper-2: oklch(0.210 0.009 250);  /* #15191C */
    --paper-3: oklch(0.260 0.010 250);  /* #202429 */
    /* --- Tinte (hell auf dunkel) --- */
    --ink:     oklch(0.950 0.004 250);  /* #ECEFF1  16.39 / 15.31 / 13.42 */
    --ink-2:   oklch(0.800 0.006 250);  /* #BBBEC1  10.15 /  9.48 /  8.31 */
    --ink-3:   oklch(0.700 0.007 250);  /* #9B9FA3   7.10 /  6.63 /  5.82 */
    /* --- Linien --- */
    --line:    oklch(0.320 0.010 250);  /* #2F3338  dekorativ */
    --line-ui: oklch(0.550 0.012 250);  /* #6C7278   3.91 /  3.65 /  3.20 */
    /* --- Akzent: hier NICHT das Markenblau. #007aff erreicht auf diesem Grund
           nur 4.72:1 und auf der gehobenen Flaeche 4.41:1 und verfehlt damit
           die 4.5:1 fuer Text. Mint (aus dem DRB-Dokumentengruen #179f63
           hergeleitet) erreicht 11.37:1. Blau bleibt Logofarbe. --- */
    --akz:      oklch(0.820 0.115 160); /* #7CDBAA  11.37 / 10.62 /  9.31 */
    --akz-tief: oklch(0.885 0.095 160); /* heller fuer Hover auf dunklem Grund */
    --signal:   oklch(0.780 0.140 55);  /* #FB9D59   9.12 /  8.52 /  7.47 */
    /* Hell-auf-Dunkel wirkt fetter und enger: mehr Durchschuss, etwas Laufweite */
    --lh-text: 1.62;
    --ls-text: 0.004em;
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* --------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Der Kopf klebt — ohne diesen Wert landet jede angesprungene Ueberschrift
       dahinter. Wert = Kopfhoehe plus etwas Luft. */
    scroll-padding-top: 84px;
}
@media (max-width: 1060px) { html { scroll-padding-top: 116px; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: var(--t-body);
    line-height: var(--lh-text);
    letter-spacing: var(--ls-text);
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { color: inherit; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* Fokusring: auf dunklen Flaechen Mint (11.37:1). Auf der Mintflaeche selbst
   waere Mint 1.22:1 und damit unsichtbar — dort dunkler Ring plus heller
   Aussenrand, sodass der Ring auf JEDEM Untergrund sichtbar bleibt. */
:focus-visible {
    outline: 2px solid var(--akz);
    outline-offset: 3px;
    border-radius: 3px;
}
.btn:focus-visible,
.pill:focus-visible {
    outline-color: var(--paper);
    outline-offset: -4px;
    box-shadow: 0 0 0 3px var(--akz-tief);
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
    position: absolute; left: var(--s-2); top: -100px; z-index: 200;
    background: var(--akz); color: var(--paper);
    padding: 10px var(--s-2); font: 600 var(--t-meta)/1 var(--f-mono);
}
.skip:focus { top: var(--s-1); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* --------------------------------------------------------------- Atome */
.eyebrow {
    font: 500 var(--t-meta)/1.5 var(--f-mono);
    letter-spacing: 0.11em; text-transform: uppercase;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.lead { font-size: var(--t-lead); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums slashed-zero; }

.btn {
    display: inline-flex; align-items: center; gap: 0.7ch;
    min-height: 46px; padding: 0 var(--s-3);
    background: var(--akz); color: var(--paper);
    font: 600 var(--t-small)/1 var(--f-sans);
    border: 0; border-radius: var(--radius); cursor: pointer;
    text-decoration: none;
    transition: background var(--out) var(--ease), transform var(--out) var(--ease);
}
.btn:hover { background: var(--akz-tief); transform: translateY(-1px); transition-duration: var(--in); }
.btn--quiet {
    background: transparent; color: var(--ink);
    border: 1px solid var(--line-ui);
}
.btn--quiet:hover { background: var(--paper-3); border-color: var(--akz); }

.tlink { color: var(--akz); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-ui); }
.tlink:hover { box-shadow: inset 0 -2px 0 var(--akz); }

/* =============================================================== HEADER
   Brief-treu: Bildmarke links, horizontale Navigation, Kontakt rechts.
   Die Wortmarke steht als HTML-Text — in logo.svg war sie lebender Inter-Text,
   der bei Kopfhoehe 2,7 px hoch rendern wuerde.
   ======================================================================== */
.head {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
}
@supports not (backdrop-filter: blur(1px)) { .head { background: var(--paper); } }

.head__in { display: flex; align-items: center; gap: var(--s-3); min-height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; min-height: 44px; }
.brand img { width: 26px; height: 28px; }
.brand b { font: 600 0.9375rem/1 var(--f-sans); letter-spacing: -0.015em; white-space: nowrap; }
.brand i { font-style: normal; color: var(--ink-3); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 10px; text-decoration: none;
    font-size: var(--t-small); color: var(--ink-2);
    border-radius: 6px; white-space: nowrap;
    transition: color var(--out) var(--ease), background var(--out) var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--paper-3); transition-duration: var(--in); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--akz); border-radius: 0; }

.head__side { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; }
.head__tel {
    display: inline-flex; align-items: center; gap: 0.6ch;
    min-height: 44px; padding: 0 10px;
    font: 600 0.9375rem/1 var(--f-mono);
    color: var(--akz); text-decoration: none; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.head__tel:hover { background: var(--paper-3); border-radius: 6px; }

.theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    background: none; border: 1px solid var(--line-ui); border-radius: 6px;
    color: var(--ink-2); cursor: pointer;
    transition: color var(--out) var(--ease), border-color var(--out) var(--ease);
}
.theme-btn:hover { color: var(--akz); border-color: var(--akz); transition-duration: var(--in); }
.theme-btn .sonne { display: none; }
.theme-btn .mond  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .sonne { display: block; }
    :root:not([data-theme="light"]) .theme-btn .mond  { display: none; }
}
:root[data-theme="dark"] .theme-btn .sonne { display: block; }
:root[data-theme="dark"] .theme-btn .mond  { display: none; }
:root[data-theme="light"] .theme-btn .sonne { display: none; }
:root[data-theme="light"] .theme-btn .mond  { display: block; }

/* Auf sehr schmalen Geraeten (320 px) passen Nummer, Umschalter und Burger nur
   in eine Zeile, wenn die Mono-Nummer schrumpft und das Hoerer-Zeichen entfaellt.
   Die Nummer selbst bleibt vollstaendig sichtbar — sie ist die wichtigste
   Handlung auf der Seite und wird nicht gekuerzt. */
@media (max-width: 420px) {
    .head__tel { font-size: 0.8125rem; padding-inline: 2px; gap: 0; }
    .head__tel svg { display: none; }
}

.burger {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--line-ui); border-radius: 6px;
    color: var(--ink); cursor: pointer;
}

@media (max-width: 1060px) {
    .head__in { flex-wrap: wrap; gap: var(--s-2); min-height: 60px; }
    .theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 auto;
    background: none; border: 1px solid var(--line-ui); border-radius: 6px;
    color: var(--ink-2); cursor: pointer;
    transition: color var(--out) var(--ease), border-color var(--out) var(--ease);
}
.theme-btn:hover { color: var(--akz); border-color: var(--akz); transition-duration: var(--in); }
.theme-btn .sonne { display: none; }
.theme-btn .mond  { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn .sonne { display: block; }
    :root:not([data-theme="light"]) .theme-btn .mond  { display: none; }
}
:root[data-theme="dark"] .theme-btn .sonne { display: block; }
:root[data-theme="dark"] .theme-btn .mond  { display: none; }
:root[data-theme="light"] .theme-btn .sonne { display: none; }
:root[data-theme="light"] .theme-btn .mond  { display: block; }

.burger { display: inline-flex; }
    .nav {
        order: 3; width: 100%; margin: 0;
        display: grid; grid-template-rows: 0fr;
        /* align-items MUSS hier zurueckgesetzt werden: die Desktop-Regel setzt
           center, und ein zentriertes Grid-Item wird von der 0fr-Zeile nicht
           gestaucht — es behaelt seine Inhaltshoehe und ragt nach oben heraus. */
        align-items: stretch;
        transition: grid-template-rows var(--out) var(--ease);
    }
    .nav > ul { overflow: hidden; display: grid; min-height: 0; }
    .head[data-open] .nav { grid-template-rows: 1fr; }
    .nav a { min-height: 48px; padding-inline: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
    .head__side { margin-left: auto; }
    .head__side .btn { display: none; }
}
.nav > ul { display: flex; gap: 2px; }
@media (max-width: 1060px) { .nav > ul { display: grid; } }

/* ================================================================= HERO */
.hero { padding-block: var(--s-7) var(--s-6); }
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(var(--s-4), 5vw, var(--s-7));
    align-items: center;
}
.hero h1 { max-width: 15ch; margin-block: var(--s-2) var(--s-3); }
.hero h1 .z2 { display: block; }
.hero__sub { max-width: 44ch; margin-bottom: var(--s-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hero__note { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s-3); }

.hero__art { width: 100%; height: auto; }
@media (max-width: 900px) {
    .hero { padding-block: var(--s-5) var(--s-4); }
    .hero__grid { grid-template-columns: 1fr; }
    /* Die Grafik ist aria-hidden und traegt keine Information. Auf dem Handy
       kostete sie 259 px oberhalb der Falz und schob Preis und Anrufknopf
       aus dem ersten Bildschirm. Deshalb dort ersatzlos weg. */
    .hero__art { display: none; }
}

/* ============================================================= SEKTIONEN */
.sec { padding-block: var(--section); border-top: 1px solid var(--line); }
/* Erste Sektion einer Unterseite: keine Trennlinie direkt unter dem Kopf,
   und oben etwas weniger Luft, damit die H1 nicht ins Nichts rutscht. */
.sec--erste { border-top: 0; padding-top: var(--s-6); }
.sec__head { max-width: 62ch; margin-bottom: var(--s-5); }
.sec__head h1, .sec__head h2 { margin-block: var(--s-2) var(--s-2); }
.sec__head h1 { font-size: var(--t-h2); }
/* Auf Unterseiten traegt die H1 den Seitentitel und darf groesser sein */
.sec--erste .sec__head h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); }

/* ========================================================== SERVICE-KARTEN
   Karten-Layout wie gebrieft, aber gegen das Kachel-Raster abgesichert:
   ungleiche Spalten, versetzte Oberkante, und je Karte eine ANDERE
   Innenanatomie (Preisleiter / Produktliste / Vorher-Nachher-Zeile).
   Dadurch sind die drei nicht vertauschbar.
   ======================================================================== */
/* Zwei Karten sind der Regelfall (drei strukturgleiche Karten sind ausgeschlossen).
   Nur wenn tatsaechlich ein drittes Element im Raster steht, wird eine dritte
   Spalte geoeffnet — sonst blieb sie leer und die Karten klebten links. */
.karten { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s-3); align-items: stretch; }
.karten:has(> :nth-child(3)) { grid-template-columns: 1.25fr 1fr 1fr; }
.karte {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-3);
    /* Flex-Spalte statt Grid: nur so schiebt margin-top:auto den Preisfuss
       tatsaechlich an die Unterkante, wenn die Karte auf Nachbarhoehe gedehnt wird. */
    display: flex; flex-direction: column; gap: var(--s-2);
    transition: border-color var(--out) var(--ease), background var(--out) var(--ease);
}
.karte:hover { border-color: var(--line-ui); background: var(--paper-3); transition-duration: var(--in); }
.karte__ico { color: var(--akz); }
.karte h3 { margin-top: 4px; }
.karte p { font-size: var(--t-small); color: var(--ink-2); }
.karte__foot { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* Anatomie A — Preisleiter */
.leiter { display: grid; gap: 4px; }
/* Der Wert darf NIE umbrechen: sonst rutscht die Einheit („/ Mon.") in eine
   eigene Zeile und die Punktlinie verschwindet, weil das flex:1-Element auf
   null zusammenfaellt. Passt die Zeile nicht, bricht stattdessen die ganze
   Zeile um und der Wert steht rechtsbuendig darunter — geschlossen. */
.leiter div { display: flex; align-items: baseline; gap: 0.5ch; font-size: var(--t-small); flex-wrap: wrap; }
.leiter .n { flex: 1 1 2ch; min-width: 2ch; border-bottom: 1px dotted var(--line-ui); transform: translateY(-0.3em); }
.leiter .v {
    font: 600 var(--t-small)/1.4 var(--f-mono); font-variant-numeric: tabular-nums;
    color: var(--ink); white-space: nowrap; margin-left: auto;
}

/* Anatomie B — Produktliste */
.plist { display: grid; gap: 6px; font-size: var(--t-small); color: var(--ink-2); }
.plist li { display: grid; grid-template-columns: 1.6ch 1fr; gap: 0.6ch; }
.plist li::before { content: "\2192"; color: var(--akz); font-family: var(--f-mono); font-size: var(--t-meta); }

/* Anatomie C — Vorher/Nachher-Zeile */
.vn { display: grid; gap: 6px; font-size: var(--t-small); }
.vn div { display: flex; gap: 0.7ch; align-items: baseline; }
.vn .k { font: 500 var(--t-meta)/1.6 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); min-width: 7ch; }
.vn .w { color: var(--ink-2); }
.vn .w--gut { color: var(--akz); }

@media (max-width: 900px) {
    .karten { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- Betreuungstabelle */
.tab-wrap { overflow-x: auto; border: 1px solid var(--line-ui); border-radius: var(--radius); background: var(--paper-2); }
table.tab { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 34rem; }
table.tab th, table.tab td { padding: 12px var(--s-2); text-align: left; border-top: 1px solid var(--line); }
table.tab thead th {
    font: 500 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-3); border-top: 0; vertical-align: bottom;
}
table.tab tbody th { font-weight: 400; color: var(--ink-2); }
table.tab td { color: var(--ink); }
table.tab .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tab .col { background: var(--paper-3); }
table.tab thead .col { color: var(--akz); }
table.tab .aus { color: var(--ink-3); }

/* --------------------------------------------------------------- FAQ
   Native <details>. Kein JS, tastatur- und touchtauglich, und der
   geschlossene Zustand ist selbst schon das sichtbare Muster.
   ------------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); max-width: 62rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 1fr auto; gap: var(--s-2);
    align-items: baseline; padding-block: var(--s-2);
    font-size: var(--t-body); font-weight: 500; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; font: 400 1.15rem/1 var(--f-mono); color: var(--akz);
    transition: transform var(--out) var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--akz); }
.faq .a { padding-bottom: var(--s-3); max-width: 68ch; font-size: var(--t-small); color: var(--ink-2); }

/* ========================================================= PRODUKT-REGISTER
   Bewusst KEINE zweite Kartenreihe: die Services stehen als Karten (so gebrieft),
   die fertigen Programme stehen als Register-Zeilen in EINER Platte. Zwei
   gleiche Dreier-Raster hintereinander sind das, was eine Seite billig macht.
   ======================================================================== */
.register { border: 1px solid var(--line-ui); border-radius: var(--radius); background: var(--paper-2); overflow: hidden; }
.produkt {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 15rem;
    gap: var(--s-3);
    padding: var(--s-3);
    border-top: 1px solid var(--line);
    align-items: start;
}
.produkt:first-child { border-top: 0; }
.produkt:hover { background: var(--paper-3); }
.produkt__name { font: 600 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--akz); }
.produkt__frage { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 6px; }
.produkt p { font-size: var(--t-small); color: var(--ink-2); }
.produkt .leiter { align-self: center; }
@media (max-width: 900px) {
    .produkt { grid-template-columns: 1fr; gap: var(--s-2); }
    .produkt .leiter { align-self: start; }
}

/* ============================================================== PROZESS
   Nummerierter Pfad. Ungleiche Abschnittslaengen (Schritt 3 traegt am meisten),
   und die Achse laeuft am Ende aus statt zu schliessen: Wartung hoert nicht auf.
   ======================================================================== */
.pfad { position: relative; display: grid; gap: 0; }
.pfad::before {
    content: ""; position: absolute; left: 15px; top: 10px; bottom: 0; width: 1px;
    background: linear-gradient(var(--line-ui) 0%, var(--line-ui) 82%, transparent 100%);
}
.schritt { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); padding-bottom: var(--s-5); }
.schritt:nth-child(3) { padding-bottom: var(--s-6); }   /* ungleiche Laengen */
.schritt:last-child { padding-bottom: var(--s-3); }
.schritt__n {
    position: relative; z-index: 1;
    width: 31px; height: 31px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper); border: 1px solid var(--line-ui);
    font: 600 var(--t-meta)/1 var(--f-mono); color: var(--akz);
    font-variant-numeric: tabular-nums;
}
.schritt.is-in .schritt__n { border-color: var(--akz); background: var(--paper-2); }
.schritt h3 { margin-bottom: 6px; }
.schritt__klar { font-size: var(--t-small); color: var(--ink-2); margin-bottom: var(--s-2); }
.rollen { display: grid; gap: 4px; padding-top: var(--s-1); border-top: 1px solid var(--line); }
.rollen div { display: grid; grid-template-columns: 4.5ch 1fr; gap: 0.8ch; font-size: var(--t-small); }
.rollen dt { font: 600 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.rollen dd { color: var(--ink-2); }

/* Rastung: nur die Ziffernscheibe rastet, der Text bleibt jederzeit lesbar. */
.js .schritt__n { transform: translateY(4px); opacity: 0.55; }
.js .schritt.is-in .schritt__n { transform: none; opacity: 1; transition: transform 160ms steps(2, end), opacity 160ms linear; }
@media (prefers-reduced-motion: reduce) {
    .js .schritt__n { transform: none; opacity: 1; }
}

/* =========================================================== TYPENSCHILD
   Vertrauensblock. Keine Kundenlogos, keine Testimonials — es gibt keine.
   Stattdessen nachpruefbare Angaben, jede mit einer Pruefanweisung.
   ======================================================================== */
.schild {
    background: var(--paper-2);
    border: 1px solid var(--line-ui);
    border-radius: var(--radius);
    padding: var(--s-4);
    max-width: 60rem;
}
.schild dl { display: grid; grid-template-columns: 13rem 1fr; gap: 0; }
.schild > dl > div { display: contents; }
.schild dt {
    font: 500 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--ink-3); padding: var(--s-2) var(--s-3) var(--s-2) 0;
    border-top: 1px solid var(--line);
}
.schild dd { padding: var(--s-2) 0; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--t-small); }
.schild dd small { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--t-meta); font-family: var(--f-mono); line-height: 1.7; }
.schild > dl > div:first-child dt, .schild > dl > div:first-child dd { border-top: 0; }
@media (max-width: 700px) {
    .schild { padding: var(--s-3); }
    .schild dl { grid-template-columns: 1fr; }
    .schild dt { padding-bottom: 0; }
    .schild dd { border-top: 0; padding-top: 4px; }
}

/* ------------------------------------------------------------ Referenzen */
.refs { border-top: 1px solid var(--line); }
.refs li { border-bottom: 1px solid var(--line); }
.refs a {
    display: grid; grid-template-columns: 3.5ch 1fr auto; gap: var(--s-2);
    align-items: baseline; padding-block: var(--s-2); text-decoration: none;
    transition: background var(--out) var(--ease), padding-inline-start var(--out) var(--ease);
}
.refs a:hover { background: var(--paper-2); transition-duration: var(--in); }
.refs .n { font: 500 var(--t-meta)/1.8 var(--f-mono); color: var(--akz); }
.refs .was { font-size: var(--t-small); color: var(--ink-2); }
.refs .dom { font: 400 var(--t-meta)/1.8 var(--f-mono); color: var(--akz); white-space: nowrap; }
@media (max-width: 620px) {
    .refs a { grid-template-columns: 3ch 1fr; }
    .refs .dom { grid-column: 2; }
}

/* ------------------------------------ Preisspiegel (Führungslinien-Verzeichnis)
   Bewusst KEIN Kartenraster: gestapelte Verzeichnis-Blöcke unterschiedlicher Tiefe.
   Der Preis steht am Ende einer Punktlinie, wie in einem Leistungsverzeichnis.
   ------------------------------------------------------------------------- */
.spiegel { border-top: 1.5px solid var(--line-ui); max-width: 52rem; }
.stufe { border-bottom: 1px solid var(--line); padding-block: var(--s-3); }
.stufe--wahl { background: var(--paper-2); padding-inline: var(--s-3); margin-inline: calc(var(--s-3) * -1); }

.stufe__kopf { display: flex; align-items: baseline; gap: 0.5ch; flex-wrap: wrap; }
.stufe__name { font: 600 var(--t-meta)/1.4 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; }
.stufe__tag { font: 400 var(--t-meta)/1.4 var(--f-mono); color: var(--akz); }
.stufe__dots { flex: 1; min-width: 3ch; border-bottom: 1px dotted var(--line-ui); transform: translateY(-0.3em); }
.stufe__preis {
    font: 400 clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem)/1 var(--f-mono);
    font-variant-numeric: tabular-nums; letter-spacing: -0.03em; white-space: nowrap;
}
.stufe__preis small { font-size: var(--t-meta); color: var(--ink-2); letter-spacing: 0; }
.stufe__alt { font: 400 var(--t-meta)/1.6 var(--f-mono); color: var(--ink-3); margin-top: 2px; }
.stufe__fuer { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s-1); max-width: 56ch; }
.stufe__was { list-style: none; margin-top: var(--s-2); display: grid; gap: 2px; }
.stufe__was li { display: flex; align-items: baseline; gap: 0.5ch; font-size: var(--t-small); color: var(--ink-2); }
.stufe__was li::before { content: "\2192"; font-family: var(--f-mono); font-size: var(--t-meta); color: var(--akz); }
@media (max-width: 560px) {
    .stufe--wahl { margin-inline: 0; padding-inline: var(--s-2); }
    .stufe__preis { font-size: 1.5rem; }
}

/* ---------------------------------------------------------- Beweiszeile
   Direkt unter dem Hero. Die einzigen Angaben der Startseite, die ein Fremder
   in fünf Sekunden selbst nachprüfen kann — deshalb sind die Domains echte
   Links und kein toter Text.
   ------------------------------------------------------------------------ */
.beweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
    padding-block: var(--s-3);
    border-block: 1px solid var(--line);
    font-size: var(--t-small);
}
.beweis__fakt { display: inline-flex; align-items: center; gap: 0.6ch; color: var(--ink-2); }
.beweis__fakt svg { color: var(--akz); flex: 0 0 auto; }
.beweis__live { display: flex; flex-wrap: wrap; gap: 0.5ch 1.2ch; align-items: center; }
/* Bewusst KEIN margin-left:auto: sobald die Zeile umbricht, bliebe der Block
   sonst rechtsbuendig in der neuen Zeile haengen und sieht wie ein Fehler aus.
   So liest sich die Zeile durchgehend: drei Fakten, dann die pruefbaren Adressen. */
.beweis__live > span { font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.beweis__live a { font: 600 var(--t-meta)/1 var(--f-mono); color: var(--akz); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.beweis__live a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ------------------------------------------------------------- Kontaktwege
   Vier Wege nebeneinander, jeder mit der Angabe, wann er der richtige ist.
   Der WhatsApp-Link ist ausschließlich ein Link auf wa.me — er lädt nichts
   nach und setzt kein Cookie, das Versprechen „nichts aus Amerika" hält.
   ------------------------------------------------------------------------ */
.kanaele { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line-ui); border-radius: var(--radius); overflow: hidden; }
.kanal {
    background: var(--paper-2); padding: var(--s-3);
    display: grid; align-content: start; gap: 6px; text-decoration: none; min-height: 44px;
}
.kanal:hover { background: var(--paper-3); }
.kanal__k { font: 500 var(--t-meta)/1.6 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.kanal__v { font: 600 1.0625rem/1.3 var(--f-mono); color: var(--akz); overflow-wrap: anywhere; }
.kanal__wann { font-size: var(--t-small); color: var(--ink-2); }
/* Der Platzhalter fuer die eigene Terminbuchung laeuft ueber die volle Breite
   der unteren Reihe. Als einzelne Kachel in einer zweiten Reihe blieb sonst
   eine leere Flaeche daneben stehen, die wie ein Fehler aussieht. */
.kanal--bald {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 6px var(--s-2);
    background: var(--paper-2);
}
.kanal--bald .kanal__v { color: var(--ink-3); font-family: var(--f-sans); font-weight: 500; }
.kanal--bald .kanal__wann { flex: 1 1 24ch; color: var(--ink-3); }
@media (max-width: 560px) { .kanal--bald { display: grid; } }

/* ----------------------------------------------------- Großer Arbeitsbeweis
   Ein Bild statt vier Textzeilen. Ein Zitat muss man glauben, ein
   Bildschirmfoto sieht man.
   ------------------------------------------------------------------------ */
.beleg { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.beleg__bild { border: 1px solid var(--line-ui); border-radius: var(--radius); overflow: hidden; display: block; background: var(--paper-2); }
.beleg__bild img { width: 100%; height: auto; display: block; }
.beleg__bild:hover { border-color: var(--akz); }
@media (max-width: 860px) { .beleg { grid-template-columns: 1fr; } }

/* --------------------------------------------------- Betreuung als Zeilen
   Ersetzt die Vergleichstabelle auf der Startseite: die war auf dem Handy
   544 px breit in einem 348 px Container, die Spalte „Pro" unsichtbar.
   ------------------------------------------------------------------------ */
.stufen { border-top: 1px solid var(--line); max-width: 52rem; }
.stufen div {
    display: grid; grid-template-columns: 7rem 1fr auto; gap: var(--s-2);
    align-items: baseline; padding-block: var(--s-2); border-bottom: 1px solid var(--line);
}
.stufen dt { font: 600 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.stufen dd { font-size: var(--t-small); color: var(--ink-2); margin: 0; }
.stufen .preis { font: 600 1rem/1.4 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
@media (max-width: 640px) {
    .stufen div { grid-template-columns: 1fr auto; }
    .stufen dd { grid-column: 1 / -1; }
}

/* ========================================================== WERKVERZEICHNIS
   Referenzseite. Jedes Projekt eine Zeile: Bildschirmfoto, Einordnung, was
   gebaut wurde, und die echte Adresse als Beleg. Keine Karten-Kacheln —
   die Domain ist der Beweis, nicht das Layout.
   ======================================================================== */
.werke { border-top: 1px solid var(--line); }
.werk {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--line);
    align-items: start;
}
.werk__bild {
    display: block; border: 1px solid var(--line-ui); border-radius: var(--radius);
    overflow: hidden; background: var(--paper-2);
}
.werk__bild img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.werk__bild:hover { border-color: var(--akz); }
.werk__kopf { display: flex; align-items: baseline; gap: 0.8ch; flex-wrap: wrap; margin-bottom: var(--s-1); }
.werk h2, .werk h3 { font-size: var(--t-h3); }
.werk__branche { font: 500 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.werk p { font-size: var(--t-small); color: var(--ink-2); max-width: 60ch; }
.werk__merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.werk__merkmale span {
    font: 500 var(--t-meta)/1 var(--f-mono); letter-spacing: 0.05em;
    border: 1px solid var(--line-ui); border-radius: 4px; padding: 6px 9px; color: var(--ink-2);
}
.werk__adresse {
    display: inline-flex; align-items: center; gap: 0.5ch; margin-top: var(--s-3);
    font: 600 var(--t-small)/1 var(--f-mono); color: var(--akz);
    text-decoration: none; min-height: 44px;
}
.werk__adresse:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
    .werk { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ============================================================= RECHTSTEXT
   Lange Fliesstexte: Impressum, Datenschutz, AGB, Lizenzen. Bewusst schmal
   gesetzt und ohne jedes Gestaltungselement — hier zaehlt Lesbarkeit und
   Auffindbarkeit einer Textstelle, nicht Wirkung.
   ======================================================================== */
.rechtstext { max-width: 68ch; }
.rechtstext > * + * { margin-top: var(--s-2); }
.rechtstext h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem); margin-bottom: var(--s-4); }
.rechtstext h2 {
    font-size: var(--t-h3); margin-top: var(--s-5); padding-top: var(--s-2);
    border-top: 1px solid var(--line);
}
.rechtstext h3 { font-size: 1rem; margin-top: var(--s-4); color: var(--ink); }
.rechtstext p, .rechtstext li { color: var(--ink-2); }
.rechtstext ul, .rechtstext ol { padding-left: 1.4em; margin-top: var(--s-1); }
.rechtstext ul li { list-style: disc; margin-top: 6px; }
.rechtstext ol li { list-style: decimal; margin-top: 6px; }
.rechtstext a { color: var(--akz); text-decoration: none; box-shadow: inset 0 -1px 0 currentColor; }
.rechtstext a:hover { box-shadow: inset 0 -2px 0 currentColor; }
.rechtstext strong { color: var(--ink); font-weight: 600; }
.rechtstext table { width: 100%; border-collapse: collapse; font-size: var(--t-small); margin-top: var(--s-2); }
.rechtstext th, .rechtstext td { text-align: left; padding: 10px var(--s-2) 10px 0; border-top: 1px solid var(--line); vertical-align: top; }
.rechtstext th { color: var(--ink); font-weight: 600; }
/* Hervorgehobener Datenblock im Fliesstext (Anschriften, Hinweise, Aufsichtsbehoerde) */
.rechtstext .rt-block {
    padding-left: var(--s-2); border-left: 2px solid var(--line-ui);
    color: var(--ink); margin-block: var(--s-3);
}
/* Stand-Zeile am Ende jedes Rechtstextes */
.rechtstext .rt-stand {
    margin-top: var(--s-5); padding-top: var(--s-2); border-top: 1px solid var(--line);
    font: 400 var(--t-meta)/1.6 var(--f-mono); color: var(--ink-3);
}

/* ------------------------------------------------------------------- 404 */
.vier04 { text-align: center; padding-block: var(--s-7); }
.vier04 h1 { font-size: clamp(2.4rem, 2rem + 3vw, 4.5rem); }
.vier04 .code { font: 600 var(--t-meta)/1 var(--f-mono); letter-spacing: 0.12em; color: var(--akz); }
.vier04 p { max-width: 52ch; margin-inline: auto; color: var(--ink-2); }
.vier04 .wohin { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: center; margin-top: var(--s-4); }

/* ------------------------------------------------------------ Zwei Spalten
   Für nebeneinanderstehende Zeilenlisten (Orte / Themen). Bewusst keine
   Schlagwortwolke: jede Zeile trägt einen Satz Kontext, sonst ist sie
   für einen Menschen wertlos und nur ein Suchmaschinen-Reflex.
   ------------------------------------------------------------------------ */
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
.zwei > div > h3 { margin-bottom: var(--s-2); }
@media (max-width: 800px) { .zwei { grid-template-columns: 1fr; gap: var(--s-4); } }

/* --------------------------------------------------------------- Footer */
.foot { border-top: 1px solid var(--line-ui); padding-block: var(--s-5) var(--s-6); font-size: var(--t-small); }
.foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; column-gap: var(--s-6); row-gap: var(--s-4); }
.foot .k { display: block; font: 500 var(--t-meta)/1.7 var(--f-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.foot p { color: var(--ink-2); line-height: 1.75; }
.foot strong { color: var(--ink); font-weight: 600; }
.foot a { color: var(--ink-2); text-decoration: none; box-shadow: inset 0 -1px 0 var(--line-ui); }
.foot a:hover { color: var(--akz); box-shadow: inset 0 -1px 0 var(--akz); }
@media (max-width: 800px) { .foot__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Utils */
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.max-62 { max-width: 62ch; }

/* ================================================================ DRUCK
   Handwerksbetriebe drucken Kontaktseiten aus und haengen sie ans Brett.
   Ohne diesen Block kommt ein schwarzes Blatt aus dem Drucker.
   ======================================================================== */
@media print {
    /* Die Seite ist bereits hell — im Druck geht es nur noch um Tinte sparen,
       harte Kanten und ausgeschriebene Kontaktdaten. */
    :root { --paper: #fff; --paper-2: #fff; --paper-3: #fff;
            --ink: #000; --ink-2: #222; --ink-3: #444;
            --line: #ccc; --line-ui: #666; --akz: #00417f; --akz-tief: #00417f; }
    body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
    .head, .burger, .hero__art, .btn, .skip { display: none !important; }
    .sec, .foot { border-color: #ccc; page-break-inside: avoid; }
    .karte, .schild, .register, .tab-wrap { border: 1px solid #999; background: #fff; }
    .faq details { border-color: #ccc; }
    .faq details > .a { display: block !important; }
    a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
    a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
    .foot::before {
        content: "DRB IT Solution · Deniz Robin Bektas · Bahnhofstraße 22f · 61250 Usingen · Telefon +49 1522 2823361 · kontakt@drb-it.de";
        display: block; margin-bottom: 8pt; font-weight: 700;
    }
}