/* ==========================================================================
     DER ARBEITSRECHTLER — Prototyp v8 „Mehrseiter"
     Landing mit Video + Türen · eigene Unterseiten (Hash-Routing) · kein Formular
     ========================================================================== */
  :root {
    --bg: #FFFFFF;
    --grey: #F5F5F5;
    --ink: #000000;
    --muted: #4A4A4A;
    --faint: #8A8A8A;
    --line: #E4E4E4;
    --inv: #FFFFFF;
    --mhb: #8E1B15;
    --mhb-hell: #C7392E;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0C0C0D; --grey: #151517; --ink: #F4F4F4; --muted: #B4B4B6;
      --faint: #7A7A7E; --line: #26262A; --inv: #0C0C0D;
      --mhb: #C7392E; --mhb-hell: #C7392E;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0C0C0D; --grey: #151517; --ink: #F4F4F4; --muted: #B4B4B6;
    --faint: #7A7A7E; --line: #26262A; --inv: #0C0C0D;
    --mhb: #C7392E; --mhb-hell: #C7392E;
    color-scheme: dark;
  }
  :root[data-theme="light"] {
    --bg: #FFFFFF; --grey: #F5F5F5; --ink: #000000; --muted: #4A4A4A;
    --faint: #8A8A8A; --line: #E4E4E4; --inv: #FFFFFF;
    --mhb: #8E1B15; --mhb-hell: #C7392E;
    color-scheme: light;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font-family: 'Segoe UI Variable Display', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
  }
  ::selection { background: #000; color: #fff; }
  h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; text-wrap: balance; }
  p { margin: 0; }
  a { color: inherit; }
  img, canvas.ph { max-width: 100%; display: block; }
  button { font-family: inherit; }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

  /* ---------- Header ---------- */
  header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  header .head-in { display: flex; align-items: center; gap: 28px; height: 78px; }
  .logo-link { position: relative; display: inline-block; line-height: 0; }
  .logo-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
    background: var(--mhb-hell);
  }
  header.solid .logo-link::after { background: var(--mhb); }
  .logo-img { height: 24px; width: auto; transition: filter 0.3s ease; cursor: pointer; }
  header.solid { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
  header.solid .logo-img { filter: invert(1); }
  :root[data-theme="dark"] header.solid .logo-img { filter: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.solid .logo-img { filter: none; } }
  nav { margin-left: auto; display: flex; gap: 24px; }
  nav a {
    font-size: 13.5px; font-weight: 600; text-decoration: none; letter-spacing: 0.01em;
    color: #fff; transition: opacity 0.15s;
  }
  header.solid nav a { color: var(--muted); }
  header.solid nav a.on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--mhb); text-underline-offset: 6px; text-decoration-thickness: 2px; }
  nav a.on { text-decoration: underline; text-decoration-color: var(--mhb-hell); text-underline-offset: 6px; text-decoration-thickness: 2px; }
  nav a:hover { opacity: 0.7; }
  .head-tel { font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; color: #fff; font-variant-numeric: tabular-nums; }
  header.solid .head-tel { color: var(--ink); }
  .head-tel:hover { opacity: 0.6; }
  @media (max-width: 940px) { nav { display: none; } .head-tel { margin-left: auto; } }

  /* ---------- Buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; cursor: pointer;
    font-size: 14px; font-weight: 700; letter-spacing: 0.01em; padding: 16px 30px; border: 1px solid transparent;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
  }
  .btn-black { background: var(--ink); color: var(--inv); }
  .btn-black:hover { opacity: 0.85; }
  .btn-white { background: #fff; color: #000; }
  .btn-white:hover { background: #E8E8E8; }
  .btn-invert { background: var(--inv); color: var(--ink); }
  .btn-invert:hover { opacity: 0.85; }
  .btn-ghost-w { border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; }
  .btn-ghost-w:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn .a { transition: transform 0.16s ease; }
  .btn:hover .a { transform: translateX(4px); }

  /* ---------- HERO (nur Startseite) ---------- */
  .hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
  .hero-media { position: absolute; inset: 0; }
  .hero-media .km {
    position: absolute; inset: -6%;
    background-size: cover; background-position: center 20%;
    filter: grayscale(1) contrast(1.06) brightness(0.9);
    opacity: 0; transition: opacity 1.6s ease;
    will-change: transform;
  }
  .hero-media .km.active { opacity: 1; }
  .hero-media .km.a1 { animation: kb1 26s ease-in-out infinite alternate; }
  .hero-media .km.a2 { animation: kb2 26s ease-in-out infinite alternate; }
  @keyframes kb1 { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-1.6%, -2%); } }
  @keyframes kb2 { from { transform: scale(1.12) translate(1.4%, -1%); } to { transform: scale(1) translate(0, 0); } }
  .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(0.9); }
  .hero-shade {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.62) 100%);
  }
  .hero-grain {
    position: absolute; inset: 0; opacity: 0.07; pointer-events: none; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
  }
  .hero-content { position: absolute; inset: 0; display: flex; align-items: flex-end; padding-bottom: clamp(56px, 11vh, 130px); }
  .claims { position: relative; min-height: 3.2em; width: 100%; }
  .claim {
    position: absolute; left: 0; right: 0; bottom: 0;
    color: #fff; font-size: clamp(34px, 5.6vw, 76px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.04;
    max-width: 17ch; opacity: 0; transform: translateY(18px);
    transition: opacity 0.9s ease, transform 0.9s ease;
    pointer-events: none; text-wrap: balance;
  }
  .claim.active { opacity: 1; transform: none; }
  .hero-sub { color: rgba(255,255,255,0.82); font-size: clamp(15px, 1.6vw, 18px); margin-top: 24px; max-width: 52ch; }
  .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .hero-tag {
    position: absolute; top: 96px; left: 0; right: 0;
    color: rgba(255,255,255,0.72); font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: baseline;
  }
  .ki-note {
    position: absolute; z-index: 2;
    bottom: 30px; right: calc(clamp(20px, 4vw, 48px) + 46px);
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255,255,255,0.42); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 1px; white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
  }
  /* Die Regel fuer .scroll-cue steht weiter unten am Ende des Stylesheets,
     weil sie sonst von der spaeteren .scroll-cue-Definition ueberschrieben wird. */
  .ki-note:hover { color: rgba(255,255,255,0.9); border-bottom-color: rgba(255,255,255,0.7); }
  .scroll-cue {
    position: absolute; bottom: 26px; right: clamp(20px, 4vw, 48px);
    color: rgba(255,255,255,0.65); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
    writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px;
  }
  .scroll-cue::after { content: ''; width: 1px; height: 44px; background: rgba(255,255,255,0.5); animation: cue 2s ease-in-out infinite; }
  @keyframes cue { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); } }
  .claim-dots { position: absolute; bottom: 30px; left: clamp(20px, 4vw, 48px); display: flex; gap: 8px; }
  .claim-dots button { width: 26px; height: 3px; border: none; background: rgba(255,255,255,0.35); cursor: pointer; padding: 0; transition: background 0.2s; }
  .claim-dots button.active { background: #fff; }

  /* ---------- Seitengerüst ---------- */
  section { padding: clamp(72px, 11vh, 130px) 0; }
  .page-head { padding-block: clamp(140px, 20vh, 190px) clamp(40px, 6vh, 64px); }
  .page-head .sec-label { margin-bottom: 20px; }
  .page-head h1 { font-size: clamp(36px, 5vw, 68px); max-width: 20ch; }
  .page-head .sec-sub { margin-top: 20px; }
  .sec-label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 26px; }
  .sec-h { font-size: clamp(30px, 4.2vw, 56px); max-width: 20ch; }
  .sec-sub { color: var(--muted); font-size: clamp(16px, 1.8vw, 18.5px); max-width: 58ch; margin-top: 18px; }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--d, 0s); }
  .reveal.sicht { opacity: 1; transform: none; }

  /* ---------- Türen ---------- */
  .doors { display: grid; grid-template-columns: 1fr 1fr; }
  @media (max-width: 780px) { .doors { grid-template-columns: 1fr; } }
  .door {
    padding: clamp(44px, 7vh, 88px) clamp(24px, 4vw, 64px);
    text-decoration: none; position: relative; display: block; cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .door.an { background: var(--bg); color: var(--ink); box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .door.an:hover { background: var(--ink); color: var(--inv); }
  .door.ag { background: var(--ink); color: var(--inv); }
  .door.ag:hover { background: var(--bg); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
  .door .d-l { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; display: block; }
  .door .d-t { font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; letter-spacing: -0.02em; display: block; margin-top: 14px; }
  .door .d-d { font-size: 14.5px; opacity: 0.7; display: block; margin-top: 8px; }
  .door .d-a { position: absolute; right: clamp(24px, 4vw, 64px); bottom: clamp(40px, 6vh, 80px); font-size: 26px; transition: transform 0.2s ease; }
  .door:hover .d-a { transform: translateX(8px); }

  /* ---------- Stärken / Zeilen ---------- */
  .pts { margin-top: clamp(28px, 4.5vh, 44px); border-top: 1px solid var(--line); }
  .pt { padding: 20px 2px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(180px, 280px) 1fr; gap: 10px 28px; align-items: baseline; }
  @media (max-width: 680px) { .pt { grid-template-columns: 1fr; } }
  .pt b { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; }
  .pt span { color: var(--muted); font-size: 15px; max-width: 62ch; }
  .rows { border-top: 1px solid var(--line); margin-top: clamp(26px, 4vh, 44px); }
  .row {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 22px; align-items: baseline;
    padding: 20px 4px; border-bottom: 1px solid var(--line); text-decoration: none;
    transition: padding-left 0.2s ease;
  }
  .row:hover { padding-left: 16px; }
  .row > span { min-width: 0; }
  .row .no { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 700; }
  .row .t { display: block; font-size: clamp(19px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .row .d { display: block; font-size: 14.5px; color: var(--muted); margin-top: 6px; max-width: 56ch; }
  .row .arr { font-size: 22px; color: var(--faint); transition: transform 0.2s, color 0.2s; }
  .row:hover .arr { transform: translateX(6px); color: var(--ink); }
  @media (max-width: 640px) { .row { grid-template-columns: 32px 1fr auto; gap: 14px; } }
  .sec-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4.5vh, 44px); }
  .lex-line { margin-top: 26px; font-size: 14px; color: var(--muted); }
  .lex-line a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; color: inherit; }

  /* Arbeitgeber-Seite (invertiert) */
  .ag-band { background: var(--ink); color: var(--inv); min-height: 100vh; }
  .ag-band .sec-label { color: color-mix(in srgb, var(--inv) 55%, transparent); }
  .ag-band .sec-sub, .ag-band .pt span, .ag-band .row .d, .ag-band .lex-line { color: color-mix(in srgb, var(--inv) 72%, transparent); }
  .ag-band .pts, .ag-band .pt, .ag-band .rows, .ag-band .row { border-color: color-mix(in srgb, var(--inv) 20%, transparent); }
  .ag-band .row .no, .ag-band .row .arr { color: color-mix(in srgb, var(--inv) 55%, transparent); }
  .ag-band .row:hover .arr { color: var(--inv); }
  .ag-band .btn-ghost { border-color: color-mix(in srgb, var(--inv) 35%, transparent); color: var(--inv); }

  /* ---------- Tools ---------- */
  .tools-band { background: var(--grey); }
  .tools { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(18px, 3vw, 32px); align-items: start; margin-top: clamp(30px, 5vh, 54px); }
  @media (max-width: 900px) { .tools { grid-template-columns: 1fr; } }
  .tool { background: var(--bg); border: 1px solid var(--line); padding: clamp(26px, 3.2vw, 42px); }
  .tool h3 { font-size: 20px; letter-spacing: -0.01em; }
  .tool .hint { font-size: 13px; color: var(--faint); margin: 6px 0 30px; }
  .f-lab { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
  .f-lab output { font-size: 17px; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .tool-field { margin-bottom: 26px; }
  input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(to right, var(--ink) var(--fill, 50%), var(--line) var(--fill, 50%)); outline: none; cursor: pointer; }
  input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); cursor: grab; }
  input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--ink); cursor: grab; }
  .fx { display: flex; gap: 8px; }
  .fx button { flex: 1; border: 1px solid var(--line); background: none; color: var(--muted); font-size: 13px; font-weight: 700; padding: 10px 4px; cursor: pointer; transition: all 0.15s ease; }
  .fx button.active { border-color: var(--ink); color: var(--ink); }
  .fx-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; }
  .result { border-top: 1px solid var(--line); padding-top: 24px; }
  .result .r-l { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
  .result .r-v { font-size: clamp(38px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.03em; margin-top: 8px; font-variant-numeric: tabular-nums; }
  .result .r-r { font-size: 13.5px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
  .fine { font-size: 11.5px; color: var(--faint); margin-top: 18px; line-height: 1.55; }
  input[type="date"] { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 14px; font-family: inherit; font-size: 15px; }
  input[type="date"]:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
  .frist-out { margin-top: 24px; font-size: 14.5px; color: var(--muted); min-height: 76px; }
  .frist-out .big { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); display: block; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
  .frist-out .big.late { text-decoration: underline; text-decoration-thickness: 3px; }
  .frist-hinweis { display: block; margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--ink); font-size: 13px; color: var(--muted); line-height: 1.5; }
  .frist-bar { height: 2px; background: var(--line); margin-top: 14px; position: relative; overflow: hidden; }
  .frist-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 0.7s ease; }

  /* ---------- Über mich ---------- */
  .about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
  @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
  /* Das Portraet ist bereits als Schwarzweiss-Fassung angelegt (Lichter gesenkt,
     Vignette, Korn) - deshalb hier kein zusaetzlicher Kontrast mehr. */
  /* height: auto ist noetig - sonst gewinnt das height-Attribut des img
     gegen aspect-ratio und das Bild wird zu einem hohen Streifen beschnitten. */
  .about-photo .ph { width: 100%; height: auto; aspect-ratio: 4/4.8; object-fit: cover; object-position: top; filter: grayscale(1); }
  .about-copy h2 { font-size: clamp(30px, 4vw, 52px); margin-bottom: 22px; }
  .about-copy p { color: var(--muted); max-width: 54ch; font-size: 16.5px; }
  .about-copy p + p { margin-top: 14px; }
  .about-facts { display: flex; flex-wrap: wrap; gap: 0 36px; margin-top: 30px; border-top: 1px solid var(--line); }
  .af { padding: 18px 0 0; }
  .af b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
  .af span { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

  /* ---------- Statement ---------- */
  .statement { background: #000; color: #fff; }
  .statement .in { padding: clamp(80px, 13vh, 150px) 0; }
  .statement blockquote { margin: 0; font-size: clamp(30px, 4.6vw, 64px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; max-width: 22ch; text-wrap: balance; }
  .statement .who { margin-top: 28px; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }

  /* ---------- FAQ ---------- */
  .faq { border-top: 1px solid var(--line); margin-top: clamp(30px, 5vh, 54px); max-width: 860px; }
  .qa { border-bottom: 1px solid var(--line); }
  .qa button {
    width: 100%; background: none; border: none; text-align: left; cursor: pointer; color: var(--ink);
    font-size: clamp(17px, 2vw, 21px); font-weight: 700; letter-spacing: -0.01em;
    padding: 24px 46px 24px 2px; position: relative;
  }
  .qa button::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 300; transition: transform 0.25s ease; }
  .qa.open button::after { transform: translateY(-50%) rotate(45deg); }
  .qa .a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .qa .a p { padding: 0 2px 24px; font-size: 15px; color: var(--muted); max-width: 68ch; }

  /* ---------- Kontakt ---------- */
  .big-link { display: block; text-decoration: none; font-weight: 700; letter-spacing: -0.03em; font-size: clamp(30px, 5vw, 64px); line-height: 1.15; font-variant-numeric: tabular-nums; }
  .big-link:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
  .big-link.small { font-size: clamp(17px, 2.6vw, 30px); margin-top: 12px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
  .addr { margin-top: 30px; font-size: 14.5px; color: var(--muted); line-height: 1.75; }
  .addr b { color: var(--ink); }
  .contact-note { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); max-width: 62ch; }

  /* Kontakt-Streifen (Landing) */
  .contact-strip { border-top: 1px solid var(--line); }
  .contact-strip .in { padding: clamp(48px, 8vh, 84px) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 48px; }
  .contact-strip .cs-label { font-size: 12px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); width: 100%; }
  .contact-strip a.cs-tel { text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: clamp(24px, 3.4vw, 44px); font-variant-numeric: tabular-nums; }
  .contact-strip a.cs-mail { text-decoration: none; font-weight: 700; letter-spacing: -0.01em; font-size: clamp(17px, 2vw, 26px); overflow-wrap: anywhere; }
  .contact-strip a:hover { text-decoration: underline; text-underline-offset: 6px; }

  /* ---------- Footer ---------- */
  footer { background: #000; color: rgba(255,255,255,0.65); }
  .foot { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding: 38px 0; font-size: 12.5px; }
  .foot .logo-img { height: 20px; width: auto; filter: none !important; }
  .foot .logo-link::after { background: var(--mhb-hell); bottom: -6px; }
  .foot a { text-decoration: none; color: rgba(255,255,255,0.8); margin-right: 16px; }
  .foot a:hover { color: #fff; }
  .foot .tag { border: 1px dashed rgba(255,255,255,0.3); padding: 5px 10px; letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }

  /* ---------- Overlay ---------- */
  .ov { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.65); display: none; align-items: center; justify-content: center; padding: 22px; }
  .ov.open { display: flex; }
  .ov-box { width: 100%; max-width: 640px; max-height: 80vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--line); padding: clamp(24px, 4vw, 44px); }
  .ov-box h2 { font-size: 24px; margin-bottom: 16px; }
  .ov-box h3 { font-size: 15px; margin: 18px 0 4px; }
  .ov-box p { font-size: 13.5px; color: var(--muted); }
  .ov-close { float: right; background: none; border: 1px solid var(--line); color: var(--ink); width: 36px; height: 36px; cursor: pointer; font-size: 15px; }
  .ov-note { border: 1px dashed var(--line); padding: 10px 14px; font-size: 12px; color: var(--faint); margin-bottom: 14px; }
  .ov-box .ov-k { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
  .ov-box ul { margin: 14px 0 0; padding: 0; list-style: none; }
  .ov-box ul li { padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); position: relative; }
  .ov-box ul li::before { content: '—'; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
  .ov-box ul li b { color: var(--ink); }
  .ov-box .ov-fine { font-size: 11.5px; color: var(--faint); margin-top: 16px; line-height: 1.5; }
  .ov-box .ov-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .ov-box .ov-ctas .btn { padding: 13px 22px; font-size: 13px; }

  /* ---------- Expertise (Landing) ---------- */
  .exp { border-top: 1px solid var(--line); }
  .exp .in { padding: clamp(64px, 10vh, 120px) 0; display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(36px, 6vw, 90px); align-items: center; }
  @media (max-width: 860px) { .exp .in { grid-template-columns: 1fr; } }
  .exp h2 { font-size: clamp(28px, 3.8vw, 52px); max-width: 18ch; }
  .exp .exp-p { color: var(--muted); font-size: clamp(16px, 1.8vw, 18px); max-width: 56ch; margin-top: 20px; }
  .exp .pts { margin-top: clamp(24px, 4vh, 36px); }
  .exp .more { display: inline-block; margin-top: 26px; font-size: 14px; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
  .exp .more:hover { opacity: 0.7; }
  .exp .exp-photo .ph { width: 100%; height: auto; aspect-ratio: 4/4.6; object-fit: cover; object-position: top; filter: grayscale(1); }

  /* ---------- Mobil: engere Vertikalabstaende ----------
     Die vh-basierten Abstaende sind auf dem Desktop richtig, wirken auf dem
     Handy aber auseinandergerissen (Kopfblock -> Inhalt lag bei 85 px). */
  @media (max-width: 700px) {
    section { padding: clamp(52px, 7.5vh, 78px) 0; }
    .page-head { padding-block: 118px 26px; }
    .page-head .sec-label { margin-bottom: 12px; }
    .page-head .sec-sub { margin-top: 14px; }
    .sec-label { margin-bottom: 16px; }
    .sec-sub { margin-top: 14px; }
    .pts { margin-top: 22px; }
    .rows { margin-top: 20px; }
    .sec-ctas { margin-top: 26px; }
    .lex-line { margin-top: 20px; }
    .about-copy h2 { margin-bottom: 14px; }
    .about-facts { margin-top: 22px; }
    .exp .more { margin-top: 20px; }
    .hero-sub { margin-top: 18px; }
    .hero-ctas { margin-top: 24px; }
  }

  /* Auf schmalen Schirmen weicht der dekorative Scroll-Hinweis, damit der
     KI-Pflichthinweis am unteren Bildrand frei steht. */
  @media (max-width: 620px) {
    .scroll-cue { display: none; }
    .ki-note { right: clamp(20px, 4vw, 48px); }
  }

  /* ---------- Statische Fassung: Ergaenzungen ---------- */
  .exp .in { grid-template-columns: 1fr; }
  /* Hintergrund unter dem Video: bis der erste Frame steht, bleibt es schwarz
     statt weiss aufzublitzen. Ein Standbild (poster) gibt es bewusst nicht. */
  .hero-media { background: #0C0C0D; }
  .exp h2 { max-width: 24ch; }
  .exp .exp-p { max-width: 82ch; margin-top: 18px; }
  .exp-p { font-size: 16.5px; line-height: 1.75; text-align: justify; hyphens: auto; -webkit-hyphens: auto; color: var(--muted); }
  .cta-note { margin-top: 12px; font-size: 13px; color: var(--faint); }
  .ag-band .cta-note { color: color-mix(in srgb, var(--inv) 55%, transparent); }
  .notice { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); padding: 16px 20px; font-weight: 700; text-decoration: none; margin-bottom: 26px; }
  .notice .a { transition: transform 0.2s; }
  .notice:hover .a { transform: translateX(6px); }
  .grau-band { background: var(--grey); padding: clamp(52px, 8vh, 90px) 0; margin-top: clamp(40px, 6vh, 64px); }
  .lauftext p { color: var(--muted); max-width: 74ch; margin-top: 14px; font-size: 16.5px; }
  .lauftext p:first-child { margin-top: 0; }
  .lauftext a { font-weight: 700; color: inherit; }
  /* ---------- Landingpage-Kopf ---------- */
  .lp-hero { position: relative; background: #0C0C0D; color: #fff; overflow: hidden; }
  /* Video rechts, ueber eine Maske nach links ins Schwarz aufgeloest -
     keine harte Bildkante, der Text sitzt auf ruhigem Grund. */
  .lp-media { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; overflow: hidden; }
  .lp-video {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block;
    filter: grayscale(1) contrast(1.06) brightness(0.66);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 88%, rgba(0,0,0,0.55) 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 88%, rgba(0,0,0,0.55) 100%);
  }
  .lp-hero .ki-note { bottom: 14px; right: clamp(20px, 4vw, 48px); }
  /* Handy: Video ueber die volle Breite, hochkant beschnitten, per Verlauf nach
     unten ins Schwarz gefuehrt (dort stehen die Buttons) und erst eingeblendet,
     wenn es wirklich laeuft - bis dahin bleibt der Kopf schwarz wie bisher.
     Der KI-Hinweis bleibt sichtbar, sobald ein Video laufen kann.
     Helligkeit: Auf dem Handy liegen drei Daempfer uebereinander (filter,
     Maske, ::after-Overlay), auf dem Desktop nur zwei ohne Overlay - in der
     Bildmitte blieben so nur ~22 % Helligkeit gegenueber ~66 %, das Video war
     praktisch unsichtbar. Statt flaechig abzudunkeln sichert jetzt ein
     Textschatten die Lesbarkeit punktuell, das Bild darf dazwischen atmen. */
  @media (max-width: 860px) {
    .lp-media { left: 0; width: 100%; }
    .lp-video {
      object-position: 45% 22%; opacity: 0; transition: opacity 1.4s ease;
      filter: grayscale(1) contrast(1.06) brightness(0.72);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, #000 30%, rgba(0,0,0,0.5) 100%);
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.92) 0%, #000 30%, rgba(0,0,0,0.5) 100%);
    }
    .lp-video.an { opacity: 1; }
    /* Standbild: ohne Uebergang sichtbar, damit es als groesstes Element
       sofort zaehlt. Setzt spaeter das Video ein, ist die Flaeche schon hell
       und es entsteht kein Sprung. */
    .lp-video.standbild { opacity: 1; transition: none; }
    .lp-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,13,0.26) 0%, rgba(12,12,13,0.4) 45%, rgba(12,12,13,0.82) 100%); }
    .lp-hero h1, .lp-hero .lp-sub, .lp-hero .lp-list li, .lp-hero .sec-label {
      text-shadow: 0 1px 14px rgba(0,0,0,0.8), 0 0 4px rgba(0,0,0,0.5);
    }
    .lp-hero .ki-note { bottom: 10px; right: 14px; font-size: 11px; }
  }
  /* padding-block statt padding-Kurzform: die Kurzform mit 0 an den Seiten hatte
     den seitlichen Rand des .wrap aufgehoben - der Text klebte am Bildschirmrand. */
  .lp-in { position: relative; padding-block: clamp(104px, 15vh, 168px) clamp(48px, 8vh, 82px); }
  /* Die Maske gibt das Video erst ab etwa 66 % der Breite voll frei - bis dahin
     ist Platz fuer Text, ohne dass er ins Bild laeuft. */
  .lp-text { max-width: min(640px, 52vw); }
  @media (max-width: 860px) { .lp-text { max-width: 100%; } }
  .lp-hero .sec-label { color: rgba(255,255,255,0.55); }
  .lp-hero h1 { font-size: clamp(31px, 4.2vw, 52px); margin-bottom: 22px; }
  .lp-sub { color: rgba(255,255,255,0.84); font-size: clamp(16px, 1.8vw, 18.5px); max-width: none; }
  .lp-list { list-style: none; margin: 24px 0 0; padding: 0; }
  .lp-list li { position: relative; padding-left: 26px; margin-top: 10px; font-size: 15.5px; color: rgba(255,255,255,0.92); }
  .lp-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 2px; background: var(--mhb-hell); }
  .lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .vertrauen { background: var(--ink); color: var(--inv); }
  .vertrauen .in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 32px; padding-block: 26px; }
  @media (max-width: 760px) { .vertrauen .in { grid-template-columns: 1fr; gap: 14px; } }
  .vertrauen span { font-size: 13px; color: color-mix(in srgb, var(--inv) 62%, transparent); line-height: 1.5; }
  .vertrauen b { display: block; font-size: 15.5px; color: var(--inv); letter-spacing: -0.01em; margin-bottom: 2px; }

  /* ---------- Formular Kuendigungspruefung ---------- */
  .pruef-form { margin-top: clamp(26px, 4vh, 40px); max-width: 760px; }
  .ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-bottom: 18px; }
  @media (max-width: 640px) { .ff-grid { grid-template-columns: 1fr; } }
  .ff { display: block; margin-bottom: 18px; }
  .ff-grid .ff { margin-bottom: 0; }
  .ff-l { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
  .ff-l em { font-style: normal; color: var(--mhb); }
  .ff-opt { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; }
  .ff input[type=text], .ff input[type=tel], .ff input[type=email], .ff input[type=date], .ff input[type=number], .ff select, .ff textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-bottom: 2px solid var(--ink);
    padding: 12px 14px; border-radius: 0; -webkit-appearance: none; appearance: none;
  }
  .ff select { background-image: none; }
  .ff textarea { resize: vertical; min-height: 96px; }
  .ff input:focus, .ff select:focus, .ff textarea:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
  .ff input[type=file] { width: 100%; font: inherit; font-size: 14px; padding: 12px 0 0; }
  .ff-h { display: block; margin-top: 6px; font-size: 12.5px; color: var(--faint); }
  /* .ff setzt display:block und wuerde das hidden-Attribut sonst ueberstimmen -
     die vom Anliegen abhaengigen Felder blieben dann trotzdem sichtbar. */
  .pruef-form [hidden] { display: none !important; }
  .ff-check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 6px 0 22px; font-size: 14px; color: var(--muted); line-height: 1.6; }
  .ff-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); }
  .ff-check a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .ff-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
  .ff-sub button { cursor: pointer; border: none; }
  .ff-alt { font-size: 14px; color: var(--muted); }
  .ff-alt a { color: inherit; font-weight: 700; }
  .ff-fine { margin-top: 18px; font-size: 12.5px; color: var(--faint); max-width: 70ch; line-height: 1.65; }
  .ff-fine em { font-style: normal; color: var(--mhb); }
  .ff-fehler { border: 1px solid var(--mhb); border-left-width: 4px; padding: 14px 18px; margin-bottom: 22px; font-size: 14.5px; }
  .bund-line { display: inline-block; border: 1px solid var(--ink); padding: 9px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 26px; }
  .r-cta { margin-top: 14px; font-size: 14px; font-weight: 600; }
  .r-cta a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }
  /* Bundeslandwahl im Klagefrist-Check, gleiche Anmutung wie das Datumsfeld */
  .tool select {
    width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    padding: 14px; font-family: inherit; font-size: 15px; border-radius: 0;
    -webkit-appearance: none; appearance: none; cursor: pointer;
  }
  .tool select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
  .tool select + .fx-note { margin-top: 8px; }

  /* ---------- Rechtstextseiten ---------- */
  /* Die Zeilenlaenge wird an den Textelementen begrenzt, nicht am .wrap:
     sonst zentriert sich der ganze Block und steht neben dem Seitenkopf. */
  .rechtstext { padding-bottom: clamp(72px, 11vh, 130px); }
  .rechtstext p, .rechtstext ul { max-width: 78ch; }
  .rechtstext h2 { font-size: clamp(20px, 2.6vw, 25px); margin: clamp(32px, 5vh, 46px) 0 6px; }
  .rechtstext h2:first-child { margin-top: 0; }
  .rechtstext h3 { font-size: 16.5px; margin: 22px 0 2px; }
  .rechtstext p { color: var(--muted); font-size: 16px; line-height: 1.75; margin-top: 10px; }
  .rechtstext ul { color: var(--muted); font-size: 16px; line-height: 1.75; margin: 10px 0 0; padding-left: 20px; }
  .rechtstext li { margin-top: 5px; }
  .rechtstext a { color: inherit; font-weight: 700; }
  .rechtstext .stand { margin-top: clamp(34px, 5vh, 50px); border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; color: var(--faint); }
  /* Entwurfsmarkierung: faellt sofort ins Auge und muss vor der Freigabe raus. */
  .luecke { display: inline-block; background: #FDF3D3; color: #6B4E00; border: 1px solid #E0C476; border-left-width: 4px; padding: 8px 12px; font-size: 14.5px; line-height: 1.6; font-weight: 600; }
  .foot-recht a { margin-left: 0; margin-right: 18px; }

  /* ---------- Landingpage: Zusage, Ortsbezug, mitlaufender Aufruf ---------- */
  /* Die 24-Stunden-Zusage stand frueher als vierter Listenpunkt unter drei
     anderen und ging dort unter. Jetzt traegt sie eine eigene Flaeche. */
  .lp-zusage {
    margin-top: 24px; padding: 11px 0 11px 17px;
    border-left: 3px solid var(--mhb-hell);
    font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  }
  .lp-zusage b { display: block; color: #fff; font-size: 16.5px; letter-spacing: -0.01em; margin-bottom: 2px; }
  .lp-ort { margin-top: 24px; font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.62); max-width: 52ch; }
  .lp-ctas .btn-white { background: #fff; color: #0C0C0D; }
  /* Untereinander gleich breit: gestapelte Schaltflaechen unterschiedlicher
     Laenge lesen sich als Rangfolge. Hier sollen beide Wege gleich viel
     wiegen, die Reihenfolge allein setzt den leichten Vorzug fuers Telefon. */
  @media (max-width: 620px) {
    .lp-ctas { flex-direction: column; align-items: stretch; }
    .lp-ctas .btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; }
  }

  /* Mitlaufende Leiste, nur auf schmalen Bildschirmen: dort kommt der
     ueberwiegende Teil des Verkehrs her, und regional wird eher angerufen als
     geschrieben. Der Platz wird dauerhaft reserviert statt beim Einblenden -
     eine spaete Reservierung waere eine Layoutverschiebung (CLS). */
  .lp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
    transform: translateY(102%); transition: transform 0.3s ease;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
  }
  .lp-sticky.sicht { transform: translateY(0); }
  /* Solange die Einwilligungsfrage offen ist, weicht die Leiste: zwei Balken
     uebereinander am unteren Rand sind auf 375 px nicht bedienbar. */
  body.cons-offen .lp-sticky { transform: translateY(102%); }
  @media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }
  .lps-tel, .lps-form {
    text-decoration: none; display: flex; flex-direction: column; justify-content: center;
    padding: 10px 14px; min-height: 60px; box-sizing: border-box;
  }
  .lps-tel { flex: 1 1 62%; background: var(--mhb); color: #fff; }
  .lps-tel b { font-size: 15.5px; letter-spacing: -0.01em; }
  .lps-tel span { font-size: 13px; color: rgba(255,255,255,0.84); }
  .lps-form {
    flex: 1 1 38%; background: var(--ink); color: var(--inv);
    font-weight: 700; font-size: 13.5px; line-height: 1.22; text-align: center; align-items: center;
  }
  @media (max-width: 860px) {
    .lp-sticky { display: flex; }
    body:has(.lp-sticky) { padding-bottom: 60px; }
  }

  /* ---------- Ortsseiten ----------
     Der Gerichtskasten ist die praktisch wichtigste Auskunft dieser Seiten:
     welches Gericht, welche Anschrift, und ob im Ort selbst verhandelt wird.
     Deshalb steht er abgesetzt und nicht im Fliesstext. */
  .ort-gericht { background: var(--grey); border-left: 3px solid var(--ink); padding: clamp(20px, 3vw, 28px); margin: clamp(28px, 4.5vh, 42px) 0; }
  .ort-gericht .sec-label { margin-bottom: 10px; }
  .ort-gericht p { max-width: 76ch; }
  .ort-g-name { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-top: 0; }
  .ort-g-adr { font-size: 15px; color: var(--ink); margin-top: 4px; }
  .ort-gt { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
  .ort-gt b { color: var(--mhb); }

  /* Verteiler auf der Kreisseite */
  .ortsliste {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
    gap: 1px; background: var(--line); border: 1px solid var(--line);
    margin-top: clamp(20px, 3vh, 30px);
  }
  .ortsliste a {
    background: var(--bg); text-decoration: none; padding: 17px 20px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
    transition: background 0.18s;
  }
  .ortsliste a:hover { background: var(--grey); }
  .ortsliste b { font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
  .ortsliste span { grid-column: 1; font-size: 12.5px; color: var(--faint); line-height: 1.45; }
  .ortsliste .arr { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; color: var(--ink); transition: transform 0.18s; }
  .ortsliste a:hover .arr { transform: translateX(4px); }

  /* ---------- Uebergabe vom Rechner an die Pruefung ----------
     Der Rechner ist seit August 2026 kein Anzeigenziel mehr, bekommt aber
     weiter Verkehr ueber die Suche. Wer seine Zahl hat, springt sonst ab -
     diese Flaeche traegt die eine Aussage, die der Rechner selbst nicht
     treffen kann. */
  .uebergabe { border-top: 3px solid var(--ink); margin-top: clamp(44px, 7vh, 72px); padding: clamp(28px, 4.5vh, 42px) 0 clamp(56px, 9vh, 96px); }
  .uebergabe h2 { font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; margin: 4px 0 6px; max-width: 28ch; }
  .uebergabe p { color: var(--muted); font-size: 16.5px; line-height: 1.75; max-width: 76ch; margin-top: 13px; }
  .uebergabe .sec-ctas { margin-top: 26px; }

  /* Fristhinweis mit Handlungsaufruf im Klagefrist-Check. Grauer Grund, weil
     die Kachel .tool selbst schon var(--bg) traegt. */
  .frist-cta { display: block; margin-top: 18px; background: var(--grey); border-left: 3px solid var(--ink); padding: 16px 18px; }
  .frist-cta.eilt { border-left-color: var(--mhb); }
  .frist-cta b { display: block; font-size: 15.5px; letter-spacing: -0.01em; margin-bottom: 4px; }
  .frist-cta > span { display: block; font-size: 14px; line-height: 1.6; color: var(--muted); }
  .frist-cta-btn { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
  .frist-cta-btn .btn { font-size: 14px; padding: 11px 18px; }

  /* ---------- Bewertungen ----------
     Steht oberhalb des Formulars: wer bis hierher gelesen hat, entscheidet
     gerade, ob er seine Kuendigung einem Fremden schickt. */
  .bew-band { padding-top: clamp(52px, 8vh, 90px); }
  /* Bewertungen wechseln seitenweise: es stehen immer mehrere Karten
     nebeneinander, nach einigen Sekunden blendet die Gruppe aus und die
     naechste ein. Kein Fliessband - auf dem Handy laesst sich ein laufendes
     Band nicht anhalten, und Text, der wegwandert, waehrend man liest, ist
     aergerlich. Die Seiten baut site.js zur Laufzeit; ohne Javascript bleibt
     schlicht die vollstaendige Liste stehen, alles lesbar. */
  /* Kopfzeile: Gesamtnote mit Google-Zeichen. Macht die Quelle sofort
     erkennbar - das ist der Grund, warum jemand den Bewertungen glaubt. */
  .bew-kopf { margin-top: clamp(20px, 3vh, 28px); }
  .bew-kopf-in { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; padding: 12px 20px 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); transition: border-color 0.25s, box-shadow 0.25s; }
  .bew-kopf-in:hover { border-color: var(--ink); box-shadow: 0 6px 22px rgba(0,0,0,0.07); }
  .bew-g { width: 24px; height: 24px; flex: 0 0 24px; }
  .bew-note { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
  .bew-note-sterne { position: relative; display: inline-block; letter-spacing: 2px; font-size: 16px; line-height: 1; white-space: nowrap; }
  .bew-note-leer { color: var(--line); }
  .bew-note-voll { position: absolute; left: 0; top: 0; overflow: hidden; color: #f0a500; }
  .bew-quelle { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; color: var(--faint); }
  .bew-stand { font-size: 11px; opacity: 0.75; }
  @media (max-width: 520px) {
    .bew-kopf-in { gap: 11px; padding: 11px 16px 11px 13px; }
    .bew-note { font-size: 22px; }
  }

  .bew-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin-top: clamp(24px, 4vh, 36px); }
  .bew { margin: 0; background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 22px 24px; display: flex; flex-direction: column; }
  .bew-kopfzeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .bew-init { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
  .bew-wer { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
  .bew-datum { font-size: 12px; font-weight: 400; color: var(--faint); }
  .bew-sterne { color: #f0a500; letter-spacing: 3px; font-size: 15px; margin-bottom: 13px; }
  .bew blockquote { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink); flex: 1 1 auto; }

  /* Ab hier nur, wenn site.js die Buehne aufgebaut hat.

     Die Seiten liegen NEBENEINANDER auf einer Spur, der Wechsel schiebt die
     Spur zur Seite. Vorher wurde ein- und ausgeblendet - das sah man kaum,
     weil die abgehende Seite hart auf unsichtbar sprang, und auf dem Handy
     wirkte es wie Umblaettern. Gleiten ist das, was der Finger erwartet.
     Kein gap auf der Spur: die Rechnung -i * 100% muss exakt aufgehen, die
     Abstaende sitzen im Raster der einzelnen Seite. */
  .bew-buehne { margin-top: clamp(24px, 4vh, 36px); overflow: hidden; touch-action: pan-y; }
  .bew-spur { display: flex; will-change: transform; transition: transform 0.62s cubic-bezier(0.25, 0.8, 0.3, 1); }
  .bew-spur.zieht { transition: none; }
  .bew-seite { flex: 0 0 100%; display: grid; gap: 20px; }
  .bew-buehne .bew { height: 340px; overflow-y: auto; }
  /* Die abgehende Seite muss WAEHREND des Gleitens sichtbar bleiben - deshalb
     hier kein visibility:hidden. Vorlesegeraete blendet site.js per aria-hidden
     aus, sobald die Bewegung durch ist. */
  @media (prefers-reduced-motion: reduce) {
    .bew-spur { transition: none; }
  }
  .bew-punkte { display: flex; gap: 9px; justify-content: center; margin-top: 22px; }
  .bew-punkt { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--faint); background: none; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s; }
  .bew-punkt[aria-current="true"] { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }
  .bew-punkt:hover { border-color: var(--ink); }
  .bew-punkt:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    .bew-buehne .bew { transition: none; }
  }
  .bew-fein { margin-top: 18px; font-size: 12.5px; line-height: 1.65; color: var(--faint); max-width: 84ch; }
  .bew-fein a { color: inherit; font-weight: 700; }

  /* ---------- Eingeklappte Unterlagen ----------
     Die beiden Dateifelder waren immer freiwillig, liessen das Formular aber
     doppelt so aufwendig aussehen. Eingeklappt bleiben sie erreichbar, ohne
     jeden Besucher zu fragen, ob er gerade einen Scan zur Hand hat.
     Die Felder bleiben im Formular und werden auch zugeklappt mitgesendet. */
  .ff-upl { margin-bottom: 22px; border: 1px solid var(--line); background: var(--bg); }
  .ff-upl > summary {
    cursor: pointer; padding: 14px 16px; font-size: 14.5px; font-weight: 700;
    list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .ff-upl > summary::-webkit-details-marker { display: none; }
  .ff-upl > summary::before { content: '+'; font-weight: 400; font-size: 18px; line-height: 1; width: 14px; flex: 0 0 auto; }
  .ff-upl[open] > summary::before { content: '\2013'; }
  .ff-upl > summary .ff-opt { color: var(--faint); font-weight: 400; }
  .ff-upl > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .ff-upl .ff-grid { padding: 0 16px 18px; margin-bottom: 0; }

  /* ---------- Schrittweises Formular ----------
     Mit JavaScript ist immer nur ein fieldset zu sehen (Klasse fs-aktiv), die
     Leiste oben zeigt den Stand. Ohne JavaScript stehen alle Schritte
     untereinander - dann greifen nur die Grundregeln fuer fieldset/legend. */
  .fs { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
  .pruef-form.schritte .fs:not(.fs-aktiv) { display: none; }
  .fs-frage { display: block; padding: 0; font-size: clamp(20px, 2.4vw, 25px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; }
  .fs-hin { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; max-width: 60ch; }
  .fs-lauf { display: none; list-style: none; margin: 0 0 22px; padding: 0; gap: 6px; }
  .pruef-form.schritte .fs-lauf { display: flex; }
  .fs-lauf li { flex: 1 1 0; height: 4px; background: var(--line); }
  .fs-lauf li.fertig { background: var(--ink); }
  .fs-lauf li.aktiv { background: var(--mhb); }
  .fs-stand { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
  .fs-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 640px) { .fs-kacheln { grid-template-columns: 1fr; gap: 10px; } }
  .kachel { position: relative; display: block; cursor: pointer; margin: 0; }
  .kachel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .kachel span { display: block; border: 1px solid var(--line); border-left: 3px solid var(--line); background: var(--bg); padding: 15px 18px; transition: border-color 0.18s, box-shadow 0.18s; }
  .kachel b { display: block; font-size: 16.5px; color: var(--ink); letter-spacing: -0.01em; }
  .kachel small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; }
  .kachel:hover span { border-color: var(--ink); }
  /* Die gewaehlte Kachel ist gefuellt, alle anderen bleiben blass: die Wahl
     muss auf einen Blick erkennbar sein, nicht erst am Rahmen. */
  .kachel input:checked + span { background: var(--ink); border-color: var(--ink); border-left-color: var(--mhb); }
  .kachel input:checked + span b { color: var(--inv); }
  .kachel input:checked + span small { color: rgba(255,255,255,0.72); }
  .kachel input:checked + span b::after { content: ' \2713'; color: var(--mhb-hell); }
  .kachel input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* Kleine Wahlknoepfe fuer die Betriebsgroesse */
  .wahl-zeile { margin-bottom: 18px; }
  .pillen { display: flex; flex-wrap: wrap; gap: 8px; }
  .pille { position: relative; cursor: pointer; margin: 0; }
  .pille input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .pille span { display: block; border: 1px solid var(--line); background: var(--bg); color: var(--ink); padding: 10px 16px; font-size: 14.5px; font-weight: 700; transition: background 0.18s, border-color 0.18s; }
  .pille:hover span { border-color: var(--ink); }
  .pille input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--inv); }
  .pille input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
  .fs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
  .fs-nav .btn { cursor: pointer; border: none; }
  .fs-text { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
  .fs-text:hover { color: var(--ink); }
  .fs-text:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  @media (max-width: 640px) {
    .fs-nav .btn { width: 100%; box-sizing: border-box; display: flex; justify-content: center; }
    .fs-nav { gap: 14px 22px; }
  }
  /* Faustformel-Kasten: Schwester der Fristanzeige, gleiche Anmutung. */
  .abf-hin { margin-top: 18px; background: var(--bg); border-left: 3px solid var(--ink); padding: 14px 18px; font-size: 15px; line-height: 1.55; color: var(--muted); }
  .abf-hin b { display: block; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 2px; }
  .abf-hin .frist-fein { display: block; margin-top: 8px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
  /* Dankeseite: Fristende und Faustformel aus dem Formular. */
  .danke-kurz { margin-top: 18px; background: var(--grey); border-left: 3px solid var(--mhb); padding: 14px 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink); max-width: 70ch; }
  .danke-kurz small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--faint); }

  /* ---------- Ladezustand beim Absenden ----------
     Ohne sichtbare Rueckmeldung tippen Leute ein zweites Mal, besonders wenn
     eine Datei hochlaedt und nichts passiert. */
  .btn.laedt { opacity: 0.72; cursor: default; display: inline-flex; align-items: center; gap: 10px; }
  .laedt-kreisel {
    width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; display: inline-block; animation: kreisel 0.7s linear infinite;
  }
  @keyframes kreisel { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .laedt-kreisel { animation: none; } }

  /* ---------- Fristanzeige im Formular ----------
     Steht im grauen Band, deshalb heller Grund statt var(--grey): sonst
     verschwindet der Kasten im Hintergrund. */
  .frist-hin {
    margin-top: 10px; background: var(--bg);
    border: 1px solid var(--line); border-left: 3px solid var(--ink);
    padding: 12px 15px; font-size: 14px; line-height: 1.55; color: var(--ink);
  }
  .frist-hin.eilt { border-left-color: var(--mhb); }
  .frist-hin b { display: block; margin-bottom: 3px; }
  .frist-fein { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: var(--faint); }

  /* ---------- Einwilligungsbanner ----------
     Unten angeschlagen, nie ueber dem Seitenkopf: die Kernaussage der Seite
     muss auch waehrend der Entscheidung lesbar bleiben. position: fixed haelt
     es aus dem Textfluss heraus, dadurch entsteht keine Layoutverschiebung.
     Beide Schaltflaechen sind gleich breit, gleich hoch und gleich kontrastreich.
     Bewusst KEIN "nur technisch notwendige" als dritter Weg: es gibt hier nur
     eine Frage, und die hat genau zwei ehrliche Antworten. */
  .cons {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ink); color: var(--inv);
    border-top: 2px solid var(--mhb-hell);
    transform: translateY(102%); transition: transform 0.36s ease;
  }
  .cons.sicht { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { .cons { transition: none; } }
  .cons-in {
    max-width: 1280px; margin: 0 auto; padding: 18px clamp(20px, 4vw, 48px);
    display: flex; align-items: center; gap: 18px 32px; flex-wrap: wrap;
  }
  .cons-txt { flex: 1 1 380px; min-width: 0; }
  .cons-txt b { display: block; font-size: 15.5px; letter-spacing: -0.01em; margin-bottom: 4px; }
  .cons-txt span { display: block; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--inv) 68%, transparent); max-width: 76ch; }
  .cons-txt a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  .cons-btn { display: flex; gap: 12px; flex: 0 0 auto; }
  .cons-btn button {
    flex: 1 1 0; min-width: 148px; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700;
    padding: 13px 22px; border: 2px solid var(--inv); border-radius: 0;
    background: transparent; color: var(--inv); transition: background 0.2s, color 0.2s;
  }
  .cons-btn button:hover { background: var(--inv); color: var(--ink); }
  .cons-btn button:focus-visible { outline: 2px solid var(--mhb-hell); outline-offset: 3px; }
  /* Auf dem Handy deckte die Leiste rund 40 Prozent des Bildschirms ab und
     blieb auf jedem Scrollstand stehen - im ersten Bild war kein Knopf der
     Seite zu sehen. Deshalb dort: Kurzfassung des Textes (die lange Fassung
     steht einen Fingertipp entfernt in der Datenschutzerklaerung), knappere
     Abstaende, Knoepfe nebeneinander. Zwei Antworten, gleich gross. */
  @media (max-width: 620px) {
    .cons-in { padding: 12px 16px 14px; gap: 10px; }
    .cons-txt b { font-size: 14.5px; margin-bottom: 2px; }
    .cons-txt span { font-size: 12.5px; line-height: 1.5; }
    .cons-btn { width: 100%; gap: 10px; }
    .cons-btn button { min-width: 0; padding: 11px 10px; font-size: 14px; }
  }