/* ============================================================
   FISCALIANCE – Pruefungssekuranz · fiscaliance.ch
   Gemeinsames Stylesheet: Startseite, Rechtsseiten, Formular-Antwort.
   Palette : cream #F6F2EB · teal #35767A · anthracite #0F1417
   Schrift : Newsreader (Serif) · Geist (Sans) · Geist Mono
             — lokal gehostet, keine Requests an Dritte.
   ============================================================ */

  /* ---------- lokale Schriften (DSGVO: kein Google-Fonts-Abruf) ---------- */
  /* Kyrillisch fuer die russische Fassung. Dank unicode-range laedt der
     Browser diese Dateien nur, wenn kyrillischer Text vorkommt. */
  @font-face{
    font-family: "Geist";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/geist-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family: "Geist";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/geist-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face{
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("fonts/geist-mono-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("fonts/geist-mono-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  /* Newsreader hat KEINE kyrillischen Zeichen. Literata springt deshalb
     nur fuer Kyrillisch ein — bewusst ohne Latin-Subset, damit lateinische
     Zeichen weiterhin von Newsreader gesetzt werden. */
  @font-face{
    font-family: "Literata";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/literata-italic-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family: "Literata";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/literata-italic-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  @font-face{
    font-family: "Literata";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/literata-cyrillic-ext.woff2") format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  @font-face{
    font-family: "Literata";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/literata-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }

  @font-face{
    font-family: "Geist";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/geist-latin-ext.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;
  }
  @font-face{
    font-family: "Geist";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/geist-latin.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;
  }
  @font-face{
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("fonts/geist-mono-latin-ext.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;
  }
  @font-face{
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("fonts/geist-mono-latin.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;
  }
  @font-face{
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/newsreader-italic-latin-ext.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;
  }
  @font-face{
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/newsreader-italic-latin.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;
  }
  @font-face{
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/newsreader-latin-ext.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;
  }
  @font-face{
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/newsreader-latin.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;
  }

  /* ============================================================
     Variant D — Soft Editorial
     Palette  : cream #F6F2EB · teal #35767A · anthracite #0F1417
     Type     : Newsreader (serif display) · Geist (sans) · Geist Mono
     ============================================================ */

  :root{
    /* Schriftfamilien zentral — ein Wechsel ist eine Zeile. */
    --font-heading: "Newsreader", "Literata", Georgia, serif;
    --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --font-mono:    "Geist Mono", ui-monospace, monospace;

    --cream:    #F6F2EB;
    --cream-2:  #FFFCF5;
    --teal:     #35767A;
    --teal-dk:  #2a5f63;
    --teal-lt:  #7DBBBE;
    --ink:      #0F1417;
    --pad:      clamp(24px, 5vw, 72px);
    --maxw:     1440px;
  /* --- 22.08.2026: Kontrast auf den dunklen Kacheln ------------
     Gemessen wurde nicht mit axe — ueber einem Bildgrund rechnet axe
     den Kontrast gar nicht erst aus und meldet nur "incomplete", was
     sich im Bericht wie bestanden liest. Stattdessen: Schrift
     durchsichtig schalten, die Flaeche fotografieren und den hellsten
     Pixel IM ZEILENKASTEN als Grund nehmen (Werkzeug grundfelder.js +
     rechne_felder.py). Ergebnis vorher: 21 von 68 Textfeldern unter
     dem Sollwert, der schlechteste bei 2,49:1.
     Der Schleier ist jetzt dichter (.5 -> .72) und tiefer im Ton;
     halbdurchsichtige Kleinschrift wurde deckend gemacht. */
    --sembox-veil: .72;
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; scroll-padding-top: 100px; }

  body{
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    letter-spacing: -0.005em;
  }

  a{ color: inherit; }

  .serif{ font-family: var(--font-heading); }
  .mono { font-family: var(--font-mono); }

  .container{
    max-width: var(--maxw);
    margin: 0 auto;
    padding-inline: var(--pad);
  }

  /* ---------- shared interactions ---------- */
  .cta{
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    text-decoration: none; border-radius: 999px; font-weight: 500;
    transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
  }
  .cta-primary{ background: var(--teal); color: var(--cream); border: 1px solid var(--teal); }
  .cta-primary:hover{ background: var(--teal-dk); border-color: var(--teal-dk); box-shadow: 0 10px 24px rgba(53,118,122,.25); }
  .cta-ghost{
    color: var(--ink); background: rgba(255,255,255,.4);
    border: 1px solid rgba(15,20,23,.25); backdrop-filter: blur(8px);
  }
  .cta-ghost:hover{ background: var(--ink); color: var(--cream); border-color: var(--ink); }

  .arrow{ font-size: 18px; line-height: 1; }

  /* ============================================================
     HEADER
     ============================================================ */
  .site-header{
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    padding: 10px var(--pad) 0;
    margin-top: 10px;                                  /* beim Laden 10px Abstand … */
    transition: padding .45s ease, margin-top .6s ease;
  }
  .site-header.scrolled{ margin-top: 0; }              /* … beim Scrollen langsam auf 0 */
  .site-header .container{
    max-width: var(--maxw); margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 9px 16px 9px 28px;
    background: rgba(255,253,248,.74);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    backdrop-filter: saturate(170%) blur(18px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    box-shadow: 0 18px 40px -22px rgba(15,20,23,.45), inset 0 1px 0 rgba(255,255,255,.7);
    transition: padding .45s ease, background .45s ease, box-shadow .45s ease;
  }
  .site-header.stuck{ padding-top: 8px; }
  .site-header.stuck .container{
    background: rgba(255,253,248,.88);
    box-shadow: 0 14px 34px -20px rgba(15,20,23,.5), inset 0 1px 0 rgba(255,255,255,.7);
  }

  .brand{ display: inline-flex; align-items: center; text-decoration: none; }
  .brand__logo{ height: 40px; width: auto; display: block; }

  .nav{ display: flex; gap: 2px; align-items: center; }
  .nav a{
    color: var(--ink); text-decoration: none; white-space: nowrap;
    padding: 9px 16px; font-size: 14px; font-weight: 450; border-radius: 999px;
    opacity: .85; transition: background .15s ease, opacity .15s ease, color .15s ease;
  }
  .nav a:hover{ opacity: 1; background: rgba(53,118,122,.1); color: var(--teal-dk); }
  .nav a.active{ opacity: 1; background: rgba(53,118,122,.12); color: var(--teal-dk); font-weight: 500; }

  .header-cta{ padding: 12px 22px; font-size: 13.5px; gap: 8px; }

  /* ============================================================
     HERO
     ============================================================ */
  .hero{
    position: relative; min-height: 820px; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .hero__poster{
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #d8d0c0 0%, #b8c8c4 60%, #9aaeab 100%);
  }
  .hero__video{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 1;
    filter: sepia(.15) saturate(1.15) brightness(1) contrast(1.02);
    transform: scale(1.04);
  }
  .hero__wash{
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(120% 80% at 50% 60%,
      rgba(209,206,200,.55) 0%, rgba(209,206,200,.85) 70%, rgba(209,206,200,1) 100%);
  }
  .hero__duotone{
    position: absolute; inset: 0; z-index: 2; mix-blend-mode: multiply;
    background: linear-gradient(180deg, rgba(53,118,122,.08), transparent 40%, rgba(53,118,122,.06));
  }

  .hero__content{
    position: relative; z-index: 4; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 120px var(--pad) 80px;
  }

  .badge{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 7px 16px; border-radius: 999px;
    background: rgba(255,255,255,.6); backdrop-filter: blur(8px);
    border: 1px solid rgba(15,20,23,.1);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 500; color: rgba(15,20,23,.7); margin-bottom: 36px;
  }
  .badge .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

  .hero h1{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(46px, 7.6vw, 104px); line-height: .96; letter-spacing: -0.03em;
    margin: 0; max-width: 1100px; text-wrap: balance;
  }
  .hero h1 em{ font-style: italic; color: var(--teal); }

  .hero__lede{
    font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55;
    /* 22.08.2026: .72 ergab an der dunkelsten Stelle des Hero-Fotos
       nur 3,51:1. Auch .92 reichte nicht: die englische Fassung ist
       laenger und laeuft weiter in den dunklen Teil des Bildes hinein
       (4,39:1). Voll deckend sind es 5,2:1. */
    color: var(--ink); max-width: 680px; margin: 36px 0 0; font-weight: 400;
    text-wrap: pretty;
  }

  .hero__actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
  .hero__actions .cta-primary{ padding: 16px 30px; font-size: 15px; }
  .hero__actions .cta-ghost{ padding: 15px 28px; font-size: 15px; }

  .hero__strip{
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
    display: flex; align-items: center; gap: 24px;
    padding-bottom: 32px;
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(15,20,23,.5); font-weight: 500;
  }
  .hero__strip > :first-child{ flex: 1 1 0; text-align: left; }
  .hero__strip > :last-child { flex: 1 1 0; text-align: right; }
  .hero__strip .integrations{ flex: 0 0 auto; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
  .hero__strip .integrations .accent{ color: var(--teal); }

  /* ============================================================
     POST-HERO  ·  Mission · 3 Pillars · CTA banner
     ============================================================ */
  .intro{ padding-top: 140px; }

  .eyebrow{
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--teal); font-weight: 600; margin: 0 0 24px;
    display: flex; align-items: center; gap: 12px;
  }
  .eyebrow .rule{ width: 28px; height: 1px; background: var(--teal); }

  .mission{ display: grid; grid-template-columns: 380px 1fr; gap: 96px; align-items: start; }
  .mission h2{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(34px, 4.6vw, 56px); line-height: 1.0; letter-spacing: -0.025em;
    margin: 0; text-wrap: balance;
  }
  .mission h2 em{ font-style: italic; color: var(--teal); }
  .mission__lead{
    font-family: var(--font-heading); font-style: italic; font-weight: 350;
    font-size: clamp(21px, 2.4vw, 26px); line-height: 1.4; color: var(--ink);
    margin: 0; max-width: 780px; text-wrap: pretty;
  }
  .mission__body{
    font-size: 17px; line-height: 1.65; color: rgba(15,20,23,.68);
    max-width: 720px; margin: 28px 0 0; text-wrap: pretty;
  }

  /* ---- pillars ---- */
  .pillars{ margin-top: 110px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pillar{
    background: var(--cream-2); border: 1px solid rgba(15,20,23,.08);
    border-radius: 18px; padding: 28px;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .pillar:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15,20,23,.18); }

  .pillar__img{
    aspect-ratio: 4 / 3; border-radius: 12px; margin-bottom: 28px;
    position: relative; overflow: hidden; border: 1px solid rgba(15,20,23,.06);
  }
  .pillar:nth-child(1) .pillar__img{ background: repeating-linear-gradient(135deg, #e8e3d6 0 12px, #ddd5c1 12px 24px); }
  .pillar:nth-child(2) .pillar__img{ background: repeating-linear-gradient(135deg, #dee4dd 0 12px, #cfd8cb 12px 24px); }
  .pillar:nth-child(3) .pillar__img{ background: repeating-linear-gradient(135deg, #e0d8c8 0 12px, #d3c8b2 12px 24px); }
  .pillar__img .pillar__photo{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .pillar__img .tag{
    position: absolute; top: 12px; left: 12px; padding: 5px 10px;
    /* 22.08.2026: halbdurchsichtiges Schild + --teal ergaben 3,74:1
       bei 13px. Deckendes Schild und der tiefere Ton: 5,7:1. */
    background: #FFFCF5; border-radius: 5px;
    font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--teal-dk);
  }

  .pillar h3{
    font-family: var(--font-heading); font-weight: 400;
    font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 14px;
  }
  .pillar p{ font-size: 15.5px; line-height: 1.6; color: rgba(15,20,23,.7); margin: 0; text-wrap: pretty; }
  .pillar .more{
    margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 500; color: var(--teal); text-decoration: none;
  }

  /* ---- closing CTA banner ---- */
  .cta-band{
    margin-top: 110px; margin-bottom: 110px; padding: 72px 64px;
    /* wie Schulungsboxen "Petrol" aus index_K3_4a_varianten.html */
    background: #0d3a3e; color: var(--cream); border-radius: 24px;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: space-between; gap: 56px;
  }
  .cta-band::before{
    content:""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(80% 100% at 100% 50%, rgba(53,118,122,.35), transparent 60%);
  }
  .cta-band__text{ position: relative; max-width: 640px; }
  .cta-band__title{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.025em;
    margin: 0; color: var(--cream); text-wrap: balance;
  }
  .cta-band__title em{ font-style: italic; color: var(--teal-lt); }
  .cta-band__sub{
    font-size: 16.5px; line-height: 1.6; color: rgba(246,242,235,.72);
    margin: 18px 0 0; max-width: 560px; text-wrap: pretty;
  }
  .cta-band__actions{
    position: relative; flex-shrink: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
  }
  .cta-band__actions .cta{ justify-content: center; padding: 16px 30px; font-size: 15px; }
  /* Creme-Button — heller Kontrast auf dem dunklen Petrol */
  .cta-band__actions .cta-primary{
    background: var(--cream); border-color: var(--cream); color: var(--teal-dk);
  }
  .cta-band__actions .cta-primary:hover{
    background: #fff; border-color: #fff; box-shadow: 0 12px 30px -14px rgba(0,0,0,.5);
  }

  /* ============================================================
     SEMINARE  —  Gestapelte Sticky-Karten (aus index_D_sem_12)
     ============================================================ */
  .sem{ padding-top:24px; padding-bottom:132px; scroll-margin-top:110px; }
  .sem-head{ max-width:780px; margin:0 0 60px; }
  .sem-head h2{ font-family: var(--font-heading); font-weight:400; font-size:clamp(34px,4.6vw,56px); line-height:1.0; letter-spacing:-.025em; margin:14px 0 0; text-wrap:balance; }
  .sem-head h2 em{ font-style:italic; color:var(--teal); }
  .sem-intro{ font-size:17px; line-height:1.65; color:rgba(15,20,23,.68); max-width:660px; margin:22px 0 0; text-wrap:pretty; }
  .sem-formats{ margin-top:56px; display:flex; align-items:center; flex-wrap:wrap; gap:18px 28px; padding-top:28px; border-top:1px solid rgba(15,20,23,.12); }
  .sem-formats__label{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:600; }
  .sem-formats__chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .sem-formats__chips span{ font-size:13px; padding:8px 16px; border-radius:999px; background:var(--cream-2); border:1px solid rgba(15,20,23,.1); color:rgba(15,20,23,.72); }
  .semk{ display:flex; flex-direction:column; gap:28px; padding-bottom:80px; }
  .semk__card{ position:sticky; background:var(--cream-2); border:1px solid rgba(15,20,23,.1); border-radius:22px; box-shadow:0 30px 60px -36px rgba(15,20,23,.4); overflow:hidden; }
  .semk__inner{ display:grid; grid-template-columns:300px 1fr; gap:48px; padding:48px 52px; align-items:start; }
  .semk__card:nth-child(even){ background:var(--ink); color:var(--cream); border-color:var(--ink); }
  .semk__left{ position:relative; }
  .semk__no{ font-size:clamp(72px,8vw,112px); line-height:.82; color:var(--teal); display:block; }
  .semk__card:nth-child(even) .semk__no{ color:#8FC5C7; }  /* 22.08.2026: --teal-lt ergab 2,59:1, verlangt sind 3,0 fuer grosse Schrift. Jetzt 3,26:1. */
  .semk__count{ display:block; margin-top:16px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(15,20,23,.59); }  /* 22.08.2026: .45 ergab gemessen 2.98:1 auf #fffcf5 — verlangt sind 4.5:1. .59 ergibt 4.65:1. */
  .semk__card:nth-child(even) .semk__count{ color:rgba(246,242,235,.9); }  /* 22.08.2026: .5 ergab 2,49:1. */
  .semk__right h3{ font-weight:400; font-size:clamp(28px,3.2vw,40px); line-height:1.12; letter-spacing:-.02em; margin:0; max-width:640px; }
  .semk__sub{ font-size:15px; color:var(--teal-dk); font-weight:500; margin:12px 0 0; }
  .semk__card:nth-child(even) .semk__sub{ color:#CEE5E6; }  /* 22.08.2026: --teal-lt ergab 2,60:1 bei 15px, verlangt sind 4,5. Jetzt 4,76:1. */
  .semk__desc{ font-size:17px; line-height:1.65; color:rgba(15,20,23,.7); margin:20px 0 0; max-width:660px; text-wrap:pretty; }
  .semk__card:nth-child(even) .semk__desc{ color:var(--cream); }  /* 22.08.2026: .76 ergab 3,66:1. */
  .semk__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
  .semk__chips span{ white-space:nowrap; font-size:12px; padding:5px 12px; border:1px solid rgba(15,20,23,.18); border-radius:999px; color:rgba(15,20,23,.66); }
  .semk__card:nth-child(even) .semk__chips span{ border-color:rgba(246,242,235,.34); color:var(--cream); }  /* 22.08.2026: .8 ergab 3,92:1. */
  .semk__sw{ color:var(--teal-dk) !important; border-color:rgba(53,118,122,.4) !important; background:rgba(53,118,122,.07); }
  .semk__card:nth-child(even) .semk__sw{ color:var(--cream) !important; border-color:rgba(246,242,235,.5) !important; background:rgba(246,242,235,.07); }  /* 22.08.2026: eigener heller Grund, deshalb deckend — 4,83:1. */

  /* === Dunkle Seminarboxen: identisches Material wie der Footer ===
     Teal-Grundton (var(--teal)) mit darüberliegendem Markenmuster — exakt wie
     der Kontakt-/Footer-Block. Der Teal-Schleier (= 1 − Bildtransparenz) regelt,
     wie stark das Muster durchscheint. */
  .semk__card:nth-child(even){
    background:
      /* 22.08.2026: Grundton von rgb(53,118,122) auf rgb(42,95,99)
         (= --teal-dk) vertieft. Gemessen wurde am hellsten Musterpixel
         HINTER dem Text: cremefarbene Schrift kam dort auf 4,26:1 —
         verlangt sind 4,5:1. axe schlug nicht an, weil es ueber einem
         Bildgrund gar nicht erst rechnet. Mit dem tieferen Ton sind es
         5,2:1, bei gleicher Schleierstaerke — das Muster bleibt also
         genau so sichtbar wie vorher. */
      linear-gradient(rgba(42,95,99, var(--sembox-veil, .63)), rgba(42,95,99, var(--sembox-veil, .63))),
      url("assets/petrol-pattern.jpg");
    background-size:cover; background-position:center;
    color:var(--cream); border-color:rgba(20,58,60,.55);
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1024px){ .nav{ display: none; } }

  /* 22.08.2026: Mit dem fuenften Menuepunkt (Referenzen) passte die Leiste
     zwischen 1025 und 1100 Pixeln nicht mehr in eine Zeile — der Kopf wuchs
     dort von 102 auf 144 Pixel. Gemessen, nicht geschaetzt: bei 1280, 1150
     und 1100 war kein Unterschied zum Zustand mit vier Punkten, erst bei
     1040 einer.

     Unterhalb von 1025 verschwindet die Navigation ohnehin (Regel darueber).
     Es geht also nur um dieses schmale Band. Statt die Navigation frueher
     auszublenden — was Nutzern auf 1024er-Geraeten den Zugang naehme —
     ruecken die Punkte dort enger zusammen. */
  @media (min-width: 1025px) and (max-width: 1160px){
    .nav a{ padding-left: 10px; padding-right: 10px; }
    .site-header .container{ gap: 10px; }
  }

  @media (max-width: 980px){
    .mission{ grid-template-columns: 1fr; gap: 40px; }
    .intro{ padding-top: 96px; }
    .pillars{ margin-top: 72px; }
    .cta-band{ margin-top: 72px; }
  }

  @media (max-width: 760px){
    .semk__inner{ grid-template-columns: 1fr; gap: 18px; padding: 34px 28px; }
    .semk__no{ font-size: 64px; }
    .semk{ padding-bottom: 0; }
    .semk__card{ position: relative; top: auto !important; transform: none !important; height: auto !important; }
  }

  @media (max-width: 880px){
    .hero__strip{ justify-content: center; }
    .hero__strip > :first-child,
    .hero__strip > :last-child{ display: none; }
  }

  @media (max-width: 860px){
    .pillars{ grid-template-columns: 1fr; }
    .cta-band{ flex-direction: column; align-items: flex-start; gap: 32px; padding: 56px 44px; }
    .cta-band__actions{ flex-direction: row; flex-wrap: wrap; align-items: center; }
  }

  @media (max-width: 560px){
    .brand__logo{ height: 32px; }
    .hero{ min-height: 640px; }
    .hero__content{ padding-top: 120px; padding-bottom: 72px; }
    .hero__actions{ flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
    .hero__actions .cta{ justify-content: center; }
    .cta-band{ padding: 44px 28px; }
    .cta-band__actions{ flex-direction: column; align-items: stretch; width: 100%; }
    .header-cta{ display: none; }
  }

  /* ============================================================
     KONTAKT — Option 3 · Inverted Petrol (Kontakt + Footer als ein Block)
     ============================================================ */
  .petrolblock{
    position: relative;
    /* 22.08.2026: Grundton wie bei den dunklen Kacheln vertieft
       (--teal -> #2a5f63). Gemessen lag der Grund hinter dem Text
       bei rgb(63,120,124); dort kam selbst fast deckende Schrift
       nur auf 4,1:1. Jetzt rund rgb(56,105,109). */
    background-color: #2a5f63;
    color: var(--cream); margin-top: 8px;
    --bg-opacity: 0.37;
  }
  .petrolblock::before{
    content: "";
    position: absolute; inset: 0;
    background-image: url("assets/petrol-pattern.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--bg-opacity);
    pointer-events: none;
    z-index: 0;
  }
  .petrolblock > *{ position: relative; z-index: 1; }
  .kontakt3{ padding-top: 8px; padding-bottom: 120px; scroll-margin-top: 110px; }
  .kontakt3__wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
  .kontakt3__intro{ display: flex; flex-direction: column; }

  .kontakt3 h2{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(36px, 4.8vw, 58px); line-height: 1.0; letter-spacing: -0.025em;
    margin: 0; color: var(--ink); text-wrap: balance;
  }
  .kontakt3 h2 em{ font-style: italic; color: var(--teal); }
  .kontakt3__lead{
    font-family: var(--font-heading); font-style: italic; font-weight: 350;
    font-size: clamp(19px, 2vw, 23px); line-height: 1.42; color: var(--ink);
    margin: 28px 0 0; max-width: 460px; text-wrap: pretty;
  }
  .kontakt3__note{ font-size: 15.5px; line-height: 1.6; color: rgba(15,20,23,.62); margin: 18px 0 44px; max-width: 460px; text-wrap: pretty; }

  /* compact ledger-style contact details, pinned to the bottom of the column */
  .kontakt3__details{ margin-top: auto; }
  .kdetail3{
    display: grid; grid-template-columns: 128px 1fr; gap: 20px; align-items: baseline;
    padding: 17px 0; border-top: 1px solid rgba(15,20,23,.14);
  }
  .kdetail3:last-child{ border-bottom: 1px solid rgba(15,20,23,.14); }
  .kdetail3__label{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin: 0; }
  .kdetail3__val{ font-size: 16.5px; color: var(--ink); font-weight: 450; text-decoration: none; margin: 0; }
  a.kdetail3__val:hover{ color: var(--teal); }
  .kdetail3__sub{ font-size: 13px; color: rgba(15,20,23,.60); margin: 4px 0 0; }  /* 22.08.2026: .50 ergab gemessen 3.40:1 auf #f6f2eb. .60 ergibt 4.68:1. */

  /* form panel — Basis; konkreter Stil per Tweak (body[data-form]) */
  .kpanel3{ position: relative; border-radius: 22px; padding: 40px; transition: background .25s, border-color .25s, box-shadow .25s; }

  /* Variante 1 · Solides Weiß — klare, deckende Karte */
  body[data-form="weiss"] .kpanel3{
    background:#fff; border:1px solid rgba(15,20,23,.10);
    box-shadow: 0 30px 60px -40px rgba(15,20,23,.40);
  }
  body[data-form="weiss"] .field3 input,
  body[data-form="weiss"] .field3 select,
  body[data-form="weiss"] .field3 textarea{ background-color:#FAF7F0; border-color: rgba(15,20,23,.14); }
  body[data-form="weiss"] .field3 input:focus,
  body[data-form="weiss"] .field3 select:focus,
  body[data-form="weiss"] .field3 textarea:focus{ background-color:#fff; }

  /* Variante 2 · Minimal — randlos, Felder als Unterstrich-Linien */
  body[data-form="minimal"] .kpanel3{ background:transparent; border:none; box-shadow:none; padding:0; }
  body[data-form="minimal"] .field3 input,
  body[data-form="minimal"] .field3 select{
    background-color:transparent; border:none; border-bottom:1px solid rgba(15,20,23,.28);
    border-radius:0; padding:11px 2px;
  }
  body[data-form="minimal"] .field3 select{ background-position: right 2px center; }
  body[data-form="minimal"] .field3 textarea{
    background-color:transparent; border:1px solid rgba(15,20,23,.22); border-radius:12px;
  }
  body[data-form="minimal"] .field3 input:focus,
  body[data-form="minimal"] .field3 select:focus{
    box-shadow:none; border-color:transparent; border-bottom-color: var(--teal);
  }
  body[data-form="minimal"] .field3 textarea:focus{ box-shadow:none; border-color: var(--teal); }

  /* Variante 3 · Teal-Tint — gemeinsame Basis + 3 Unterstile (data-tealvar) */
  body[data-form="tint"] .kpanel3{ overflow:hidden; }
  body[data-form="tint"] .field3 input,
  body[data-form="tint"] .field3 select,
  body[data-form="tint"] .field3 textarea{ background-color:#fff; border-color: rgba(53,118,122,.24); }

  /* Teal A · Kante oben — Füllung wie helle Schulungsboxen (Creme), Teal-Rahmen + Akzentkante */
  body[data-form="tint"][data-tealvar="kante"] .kpanel3{
    background: var(--cream-2); border:1px solid rgba(53,118,122,.22);
    box-shadow: 0 30px 60px -36px rgba(15,20,23,.40);
  }
  body[data-form="tint"][data-tealvar="kante"] .kpanel3::before{
    content:""; position:absolute; left:0; top:0; width:100%; height:4px;
    background: linear-gradient(90deg, var(--teal), var(--teal-lt));
  }

  /* Teal B · Rahmen — luftig, kräftiger Teal-Rahmen + vertikale Akzentleiste links */
  body[data-form="tint"][data-tealvar="rahmen"] .kpanel3{
    background: rgba(53,118,122,.03); border:1.5px solid rgba(53,118,122,.42);
    box-shadow: none;
  }
  body[data-form="tint"][data-tealvar="rahmen"] .kpanel3::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
    background: var(--teal);
  }

  /* Teal C · Verlauf — diagonaler Teal-Verlauf als Panel-Wash */
  body[data-form="tint"][data-tealvar="verlauf"] .kpanel3{
    background: linear-gradient(140deg, rgba(53,118,122,.15) 0%, rgba(125,187,190,.06) 45%, rgba(255,255,255,0) 100%), #fff;
    border:1px solid rgba(53,118,122,.18);
    box-shadow: 0 24px 50px -40px rgba(53,118,122,.42);
  }
  .kform3{ display: grid; gap: 20px; }
  .kform3__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .field3{ display: flex; flex-direction: column; gap: 8px; }
  .field3 label{ font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: rgba(15,20,23,.6); }
  .field3 label .req{ color: var(--teal); }
  .field3 input, .field3 select, .field3 textarea{
    font-family: inherit; font-size: 15.5px; color: var(--ink);
    background: #fff; border: 1px solid rgba(15,20,23,.18);
    border-radius: 10px; padding: 13px 15px; width: 100%;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .field3 textarea{ resize: vertical; min-height: 120px; line-height: 1.55; }
  .field3 select{ appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F1417' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 42px;
  }
  .field3 select option{ color: var(--ink); }
  .field3 input:focus, .field3 select:focus, .field3 textarea:focus{
    outline: none; border-color: var(--teal); background-color: #fff;
    box-shadow: 0 0 0 4px rgba(53,118,122,.14);
  }
  .field3 input::placeholder, .field3 textarea::placeholder{ color: rgba(15,20,23,.4); }
  .kconsent3{ display: flex; align-items: flex-start; gap: 12px; }
  .kconsent3 input{ flex: 0 0 auto; width: 19px; height: 19px; margin-top: 2px; accent-color: var(--teal); cursor: pointer; }
  .kconsent3 label{ font-size: 13px; line-height: 1.5; color: rgba(15,20,23,.62); }
  .kconsent3 a{ color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
  /* primary button — teal */
  .kform3 .btn-light{
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 32px; font-size: 15.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; border-radius: 999px; border: 1px solid var(--teal);
    background: var(--teal); color: var(--cream); transition: background .2s, color .2s, box-shadow .2s;
  }
  .kform3 .btn-light:hover{ background: var(--teal-dk); border-color: var(--teal-dk); box-shadow: 0 12px 30px -16px rgba(53,118,122,.45); }
  .kform3.sent .sent-msg{ display: block; }
  .kform3.sent > :not(.sent-msg){ display: none; }
  .kform3 .sent-msg{ display: none; text-align: center; padding: 26px 0; }
  .kform3 .sent-msg h3{ font-family: var(--font-heading); font-size: 30px; font-weight: 400; margin: 0 0 10px; color: var(--ink); }
  .kform3 .sent-msg p{ font-size: 15.5px; color: rgba(15,20,23,.7); margin: 0; }

  /* footer area on petrol */
  .foot3{ }
  .foot3__top{ display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 56px; padding-top: 64px; padding-bottom: 56px; }
  .foot3__logo{ height: 120px; width: auto; display: block; margin: 0 0 26px -6px; }
  .foot3 .foot-brand p{ font-size: 14.5px; line-height: 1.6; color: rgba(246,242,235,.92); margin: 0; max-width: 360px; text-wrap: pretty; }
  .foot3 .foot-col h3,
  .foot3 .foot-col h4{ font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #CEE5E6; font-weight: 600; margin: 6px 0 18px; }  /* 22.08.2026: --teal-lt ergab 2,34:1 bei 11px. */
  .foot3 .foot-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .foot3 .foot-col a{ color: var(--cream); text-decoration: none; font-size: 14.5px; transition: color .15s; }
  .foot3 .foot-contact{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .foot3 .foot-contact li{ display: flex; align-items: flex-start; gap: 11px; }
  .foot3 .foot-contact svg{ flex: 0 0 auto; width: 17px; height: 17px; stroke: var(--teal-lt); margin-top: 2px; }
  .foot3 .foot-contact .fc-val{ color: var(--cream); text-decoration: none; font-size: 14.5px; line-height: 1.4; transition: color .15s; }
  .foot3 .foot-contact a.fc-val{ white-space: nowrap; }
  .foot3 .foot-contact a.fc-val:hover{ color: #fff; }
  .foot3 .foot-col a:hover{ color: #fff; }
  .foot3__bottom{
    border-top: 1px solid rgba(246,242,235,.18);
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    padding-top: 24px; padding-bottom: 30px; font-size: 13px; color: rgba(246,242,235,.62);
  }
  .foot3__bottom .legal{ display: flex; gap: 22px; flex-wrap: wrap; }
  .foot3__bottom .legal a{ color: rgba(246,242,235,.92); text-decoration: none; }
  .foot3__bottom .legal a:hover{ color: #fff; }

  @media (max-width: 980px){
    .kontakt3__wrap{ grid-template-columns: 1fr; gap: 44px; }
    .foot3__top{ grid-template-columns: 1fr 1fr; gap: 40px; }
    .foot3 .foot-brand{ grid-column: 1 / -1; }
  }
  @media (max-width: 560px){
    .kpanel3{ padding: 28px 22px; }
    .kform3__row{ grid-template-columns: 1fr; }
    .foot3__top{ grid-template-columns: 1fr; gap: 34px; }
    .foot3__bottom{ flex-direction: column; align-items: flex-start; }
  }

  /* ============================================================
     RECHTSSEITEN  ·  Impressum · Datenschutz · AGB
     Fliesstext-Layout im Seitendesign — gleiche Palette, gleiche Schrift.
     ============================================================ */
  .legal{ padding-top: 168px; padding-bottom: 120px; }
  .legal__head{ max-width: 780px; margin: 0 0 56px; }
  .legal__head h1{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(38px, 5.2vw, 62px); line-height: 1.0; letter-spacing: -0.028em;
    margin: 14px 0 0; text-wrap: balance;
  }
  .legal__head h1 em{ font-style: italic; color: var(--teal); }
  .legal__stand{ font-size: 14px; color: rgba(15,20,23,.55); margin: 22px 0 0; }

  .legal__body{ max-width: 780px; }
  .legal__body h2{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(26px, 3vw, 34px); line-height: 1.14; letter-spacing: -0.02em;
    margin: 56px 0 0; text-wrap: balance;
  }
  .legal__body h2:first-child{ margin-top: 0; }
  .legal__body h3{
    font-family: var(--font-heading); font-weight: 400;
    font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; margin: 34px 0 0;
  }
  .legal__body p{ font-size: 16.5px; line-height: 1.7; color: rgba(15,20,23,.74); margin: 16px 0 0; text-wrap: pretty; }
  .legal__body ul, .legal__body ol{ margin: 16px 0 0; padding-left: 22px; display: grid; gap: 9px; }
  .legal__body li{ font-size: 16.5px; line-height: 1.65; color: rgba(15,20,23,.74); text-wrap: pretty; }
  /* :not(.cta) — sonst uebersteuert diese Regel (Klasse + Element) die
     Textfarbe von .cta-primary (nur Klasse) und der Knopf wird unlesbar. */
  .legal__body a:not(.cta){ color: var(--teal-dk); text-underline-offset: 2px; }
  .legal__body strong{ font-weight: 600; color: var(--ink); }
  .legal__body hr{ border: none; border-top: 1px solid rgba(15,20,23,.12); margin: 48px 0 0; }

  /* Adress-/Kontaktkasten in den Rechtsseiten */
  .legal__card{
    background: var(--cream-2); border: 1px solid rgba(15,20,23,.1);
    border-radius: 16px; padding: 26px 30px; margin: 24px 0 0;
  }
  .legal__card p{ margin: 6px 0 0; }
  .legal__card p:first-child{ margin-top: 0; }

  /* Hinweis auf noch zu klaerende Stellen — im Druck und Screen sichtbar */
  .legal__pruefen{
    display: inline-block; background: rgba(53,118,122,.1);
    border: 1px dashed rgba(53,118,122,.5); border-radius: 6px;
    padding: 2px 8px; font-size: 14px; color: var(--teal-dk); font-weight: 500;
  }

  /* Zurueck-Link am Fuss der Rechtsseiten.
     .cta traegt selbst keine Innenabstaende — die kommen im Entwurf immer aus
     dem jeweiligen Kontext (Hero, Header, CTA-Band). Hier fehlte der Kontext. */
  .legal__back{ margin-top: 64px; }
  .legal__back .cta{ padding: 15px 30px; font-size: 15px; }

  @media (max-width: 560px){
    .legal{ padding-top: 128px; padding-bottom: 84px; }
    .legal__card{ padding: 20px 22px; }
  }

  /* ============================================================
     FORMULAR-ANTWORT  ·  Dank- und Fehlerseite (kontakt.php)
     ============================================================ */
  .antwort{ min-height: 78vh; display: grid; place-items: center; padding: 160px var(--pad) 100px; }
  .antwort__box{ max-width: 620px; text-align: center; }
  .antwort__icon{
    width: 66px; height: 66px; margin: 0 auto 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(53,118,122,.12); border: 1px solid rgba(53,118,122,.3);
  }
  .antwort__icon svg{ width: 30px; height: 30px; stroke: var(--teal); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .antwort--fehler .antwort__icon{ background: rgba(160,80,40,.1); border-color: rgba(160,80,40,.32); }
  .antwort--fehler .antwort__icon svg{ stroke: #9c5228; }
  .antwort__box h1{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(34px, 4.6vw, 52px); line-height: 1.04; letter-spacing: -0.025em;
    margin: 0; text-wrap: balance;
  }
  .antwort__box h1 em{ font-style: italic; color: var(--teal); }
  .antwort__box p{ font-size: 17px; line-height: 1.65; color: rgba(15,20,23,.7); margin: 22px 0 0; text-wrap: pretty; }
  .antwort__box .cta{ margin-top: 36px; padding: 15px 30px; font-size: 15px; }

  /* Fehlerhinweise am Formular selbst */
  .kform3__fehler{
    background: rgba(160,80,40,.09); border: 1px solid rgba(160,80,40,.32);
    border-radius: 12px; padding: 16px 18px;
  }
  .kform3__fehler p{ margin: 0; font-size: 14.5px; line-height: 1.55; color: #7d3f1d; }
  .kform3__fehler ul{ margin: 8px 0 0; padding-left: 20px; }
  .kform3__fehler li{ font-size: 14.5px; line-height: 1.55; color: #7d3f1d; }

  /* Honeypot — fuer Menschen unsichtbar, fuer Bots ein ausfuellbares Feld.
     Bewusst nicht display:none, damit simple Bots es trotzdem befuellen. */
  .kform3__hp{
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
  }

  /* ============================================================
     KORREKTUREN AM ENTWURF  —  nur Responsivitaet, keine Optik-Aenderung
     Beide Entwurfsvarianten liefen auf schmalen Viewports horizontal
     ueber. Die folgenden Regeln greifen ausschliesslich dort, wo der
     Platz sonst nicht reicht; Desktop bleibt unveraendert.
     ============================================================ */

  /* 1) Leistungs-Karten: lange Komposita ("Zusatzangebote", "Software-
        loesungen") erzwangen eine Spalten-Mindestbreite, die zwischen
        860px und ~950px nicht mehr in drei Spalten passte. */
  .pillars > .pillar{ min-width: 0; }
  /* ---------------------------------------------------------------------
     24.08.2026 — hyphenate-limit-chars an JEDER Stelle mit hyphens:auto.
     Anlass: Luca Gobbo zeigte die bulgarische Seminarseite, in deren H1
     „стратегии“ als „стра-тегии“ umbrach. In einer 54px-Auszeichnungs-
     schrift liest sich das als Fehler.
     hyphens:auto war fuer deutsche Komposita da — „Betriebspruefungs-
     simulation“ ist breiter als eine schmale Spalte. Das bleibt noetig.
     14 6 6 heisst: erst ab vierzehn Zeichen trennen, und dann mindestens
     sechs Zeichen vor und nach dem Strich. „стратегии“ (neun Zeichen)
     bleibt damit ganz, „Betriebspruefungssimulation“ (sechsundzwanzig)
     bricht weiterhin um.
     Browser ohne Unterstuetzung ignorieren die Zeile und verhalten sich
     wie bisher — kein Rueckschritt, nur keine Verbesserung.
     --------------------------------------------------------------------- */
  .pillar h3{ overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6; }

  /* 2) Kontaktzeilen: die feste Label-Spalte (128px) liess der E-Mail-
        Adresse unter ~360px zu wenig Raum. Unterhalb 560px stehen Label
        und Wert daher untereinander. */
  @media (max-width: 560px){
    .kdetail3{ grid-template-columns: 1fr; gap: 6px; }
    .kdetail3__val{ overflow-wrap: anywhere; }
  }

  /* 3) Ueberlange Woerter in Fliesstext und Ueberschriften duerfen im
        Notfall umbrechen, statt die Seite breiter zu machen. */
  .semk__right h3, .sem-head h2, .mission h2, .cta-band__title,
  .kontakt3 h2, .legal__body h2, .legal__body h3{
    overflow-wrap: break-word;
  }

  /* ============================================================
     SPRACHSPEZIFISCHE SCHRIFTEN
     ============================================================ */

  /* Chinesisch: bewusst KEIN CJK-Webfont — die kaemen auf mehrere Megabyte.
     Lateinische Zeichen (Marke, Zahlen) setzt weiterhin Geist bzw. Newsreader,
     die chinesischen Zeichen uebernimmt eine hochwertige Systemschrift. */
  html[lang="zh-Hans"]{
    --font-body: "Geist", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --font-heading: "Newsreader", "Songti SC", "Noto Serif CJK SC",
                    "Source Han Serif SC", SimSun, serif;
    --font-mono: "Geist Mono", "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
  }
  /* CJK-Schriften tragen von Haus aus mehr Hoehe — etwas mehr Zeilenabstand
     und kein negativer Buchstabenabstand, sonst kleben die Zeichen. */
  html[lang="zh-Hans"] body{ letter-spacing: 0; }
  html[lang="zh-Hans"] .hero h1,
  html[lang="zh-Hans"] .mission h2,
  html[lang="zh-Hans"] .sem-head h2,
  html[lang="zh-Hans"] .cta-band__title,
  html[lang="zh-Hans"] .kontakt3 h2,
  html[lang="zh-Hans"] .semk__right h3{ letter-spacing: 0; line-height: 1.25; }

  /* Russisch: kyrillische Wortbilder sind laenger — etwas engere Laufweite
     in den grossen Ueberschriften, damit die Zeilen nicht auseinanderfallen. */
  html[lang="ru"] .hero h1{ letter-spacing: -0.02em; }

  /* ============================================================
     SPRACHUMSCHALTER  —  reines HTML/CSS, kein JavaScript.
     Keine automatische Weiterleitung: die Sprache waehlt der Nutzer.
     ============================================================ */
  .langswitch{
    display: flex; align-items: center; gap: 2px;
    font-family: var(--font-body);
  }
  .langswitch a, .langswitch__on{
    display: inline-block; padding: 6px 9px; border-radius: 999px;
    font-size: 12.5px; font-weight: 500; letter-spacing: .04em;
    text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
  }
  /* Kopfzeile: dezent, damit die Navigation die Hauptrolle behaelt */
  .langswitch--header a{ color: var(--ink); opacity: .59; }  /* 22.08.2026: .55 ergab gemessen 3.98:1 auf dem Kopfstreifen (#fdfaf5). .59 ergibt 4.63:1. Betrifft JEDE Unterseite — auf der Startseite fiel es nicht auf, weil der Kopf dort erst beim Blaettern hell wird. */
  .langswitch--header a:hover{ opacity: 1; background: rgba(53,118,122,.1); color: var(--teal-dk); }
  .langswitch--header .langswitch__on{
    color: var(--teal-dk); background: rgba(53,118,122,.12); font-weight: 600;
  }
  /* Footer: auf Petrol, deshalb helle Schrift */
  .langswitch--footer{
    border-top: 1px solid rgba(246,242,235,.18);
    padding-top: 22px; padding-bottom: 30px; flex-wrap: wrap; gap: 4px;
  }
  .langswitch--footer a{ color: var(--cream); }  /* 22.08.2026: .7 ergab 3,09:1. */
  .langswitch--footer a:hover{ color: #fff; background: rgba(246,242,235,.12); }
  /* 22.08.2026: Die Kachel des aktiven Kuerzels hellte den Grund so weit
     auf, dass weisse Schrift darauf nur 4,28:1 erreichte. Schwaecher
     eingefaerbt sind es 4,82:1 — sie bleibt sichtbar als Markierung. */
  .langswitch--footer .langswitch__on{
    color: #fff; background: rgba(246,242,235,.10); font-weight: 600;
  }

  /* Hinweis, dass die Rechtstexte nur auf Deutsch massgeblich sind */
  .foot-legalnote{
    /* 22.08.2026: .55 ergab gemessen 2,82:1 bei 12,5px. Der Hinweis
       steht nur auf den sechs uebersetzten Fassungen, deshalb fiel er
       bei der Messung der deutschen Startseite nicht auf. */
    font-size: 12.5px; line-height: 1.45; color: rgba(246,242,235,.92);
    margin-top: 6px; max-width: 220px;
  }
  /* Derselbe Hinweis an der Datenschutz-Checkbox */
  .kconsent3 label .consent-hint{ color: rgba(15,20,23,.45); }

  /* Unter 1100px wird der Kopf zu eng, um Logo, Navigation und Umschalter
     nebeneinander zu setzen. Statt den Umschalter auszublenden, rutscht er
     in eine zweite Zeile innerhalb der Kopfleiste — so bleibt die Sprachwahl
     auch auf dem Telefon oben erreichbar. */
  /* Schwelle am 19.08.2026 von 1100px auf 1259px angehoben. Grund: Mit der
   siebten Sprache (Bulgarisch) ist der Umschalter 264px breit. Zwischen
   1101px und rund 1235px reichte die Kopfleiste dann nicht mehr — der Knopf
   "Jetzt anfragen" wurde bis zu 72px ueber den Rand gedrueckt. Unterhalb der
   Schwelle bekommt der Umschalter eine eigene Zeile, und alles passt.
   Wer eine ACHTE Sprache ergaenzt: oberhalb 1260px bleiben nur 17px Luft.
   Dann ist diese Schwelle erneut zu pruefen. */
@media (max-width: 1259px){
    .site-header .container{ flex-wrap: wrap; row-gap: 2px; padding-bottom: 7px; }
    .langswitch--header{
      order: 3; width: 100%; justify-content: center; gap: 0;
      margin-top: 3px; padding-top: 6px;
      border-top: 1px solid rgba(15,20,23,.09);
    }
    .langswitch--header a,
    .langswitch--header .langswitch__on{ padding: 5px 9px; font-size: 12px; }
  }
  /* Ganz schmale Geräte: noch etwas enger, damit sechs Sprachen in eine
     Zeile passen und nichts umbricht. */
  @media (max-width: 400px){
    .langswitch--header a,
    .langswitch--header .langswitch__on{ padding: 5px 6px; font-size: 11.5px; letter-spacing: 0; }
  }

  /* ============================================================
     SEMINARSEITEN  ·  eine eigene Seite je Seminar
     Nutzt die Grundlagen der Rechtsseiten (.legal) und ergaenzt
     nur, was diese Seiten zusaetzlich brauchen.
     ============================================================ */
  .sempage{ padding-top: 168px; padding-bottom: 0; }
  .sempage__head{ max-width: 820px; margin: 0 0 8px; }
  .sempage__nr{
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--teal); font-weight: 600;
  }
  .sempage__head h1{
    font-family: var(--font-heading); font-weight: 400;
    font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -0.028em;
    margin: 16px 0 0; text-wrap: balance;
    /* Deutsche Komposita wie "Betriebspruefungssimulation" sind laenger als
       ein schmales Display — sie duerfen umbrechen, statt die Seite zu weiten. */
    overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6;
  }
  .sempage__sub{
    font-family: var(--font-heading); font-style: italic; font-weight: 350;
    font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--teal-dk);
    margin: 18px 0 0; text-wrap: pretty;
  }

  /* Kerndaten als kompakte Tafel.
     max-width wie beim Seitenkopf, damit Tafel, Ueberschrift und Fliesstext
     dieselbe Spaltenbreite teilen. */
  .semfacts{
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px; margin: 44px 0 0; max-width: 820px;
    /* 07.09.2026: war rgba(15,20,23,.1) — dann scheint der Grund in
       einer nicht voll besetzten Zeile als grauer Block durch. */
    background: var(--cream-2); border: 1px solid rgba(15,20,23,.1);
    border-radius: 16px; overflow: hidden;
  }
  /* Der Fliesstext folgt der Tafel — etwas Luft dazwischen. */
  .sempage .legal__body{ margin-top: 52px; }
  /* Der Schatten ersetzt die durchscheinende Fuge: 1px rundum, in
     der Fuge ueberlagern sich die Schatten zweier Nachbarn zur
     Haarlinie. Aussen schneidet ihn das overflow:hidden der Tafel. */
  .semfacts__cell{
    background: var(--cream-2); padding: 20px 22px;
    box-shadow: 0 0 0 1px rgba(15,20,23,.1);
  }
  .semfacts__label{
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--teal); font-weight: 600; margin: 0 0 8px;
  }
  .semfacts__val{ font-size: 16px; line-height: 1.45; color: var(--ink); margin: 0; }

  /* Arbeitsunterlage zum Herunterladen (07.09.2026). Sitzt in der
     Tafel wie eine Angabe, nicht wie ein Aufruf: derselbe Schriftgrad
     wie die Nachbarzellen, nur in Petrol und unterstrichen. */
  .semdl{
    display: inline-flex; align-items: flex-start; gap: 8px;
    color: var(--teal); text-decoration: none;
    border-bottom: 1px solid rgba(53,118,122,.35);
    transition: color .2s, border-color .2s;
  }
  .semdl:hover{ color: var(--teal-dk); border-bottom-color: var(--teal-dk); }
  .semdl:focus-visible{
    outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px;
  }
  .semdl__icon{ width: 15px; height: 15px; flex: none; margin-top: 4px; }

  /* Format und Groesse. Kleiner und ruhiger als der Verweis darueber —
     eine Eigenschaft der Datei, keine zweite Aufforderung. */
  .semfacts__meta{
    font-size: 13px; line-height: 1.4; margin: 7px 0 0;
    color: rgba(15,20,23,.55);
  }

  /* Nummerierte Gliederung */
  .semlist{ list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: sl; }
  .semlist li{
    counter-increment: sl; position: relative; padding-left: 52px;
    font-size: 16.5px; line-height: 1.65; color: rgba(15,20,23,.74); text-wrap: pretty;
  }
  .semlist li::before{
    content: counter(sl, decimal-leading-zero);
    position: absolute; left: 0; top: 1px;
    font-family: var(--font-mono); font-size: 13px; font-weight: 500;
    color: var(--teal); border: 1px solid rgba(53,118,122,.3); border-radius: 999px;
    width: 34px; height: 34px; display: grid; place-items: center;
  }
  .semlist li strong{ color: var(--ink); font-weight: 600; }

  /* Aufzaehlung mit Haken (Lernziele, Zielgruppe) */
  .semcheck{ list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
  .semcheck li{
    position: relative; padding-left: 30px;
    font-size: 16.5px; line-height: 1.6; color: rgba(15,20,23,.74); text-wrap: pretty;
  }
  .semcheck li::before{
    content: ""; position: absolute; left: 2px; top: 9px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
  }

  /* Zitat des Referenten */
  .semquote{
    margin: 48px 0 0; padding: 34px 38px;
    background: var(--cream-2); border-left: 3px solid var(--teal); border-radius: 0 16px 16px 0;
  }
  .semquote p{
    font-family: var(--font-heading); font-style: italic; font-weight: 350;
    font-size: clamp(19px, 2.1vw, 25px); line-height: 1.42; color: var(--ink);
    margin: 0; text-wrap: pretty;
  }
  .semquote cite{
    display: block; margin-top: 16px; font-style: normal;
    /* 22.08.2026: .55 ergab gemessen 4.08:1. .59 ergibt 4.65:1. */
    font-size: 13.5px; letter-spacing: .04em; color: rgba(15,20,23,.59);
  }

  /* Navigation zu den uebrigen Seminaren */
  .semnav{ margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(15,20,23,.12); }
  .semnav h2{
    font-family: var(--font-heading); font-weight: 400; font-size: 26px;
    margin: 0 0 20px; letter-spacing: -0.015em;
  }
  .semnav ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .semnav a{
    display: flex; gap: 14px; align-items: baseline;
    text-decoration: none; color: var(--ink); font-size: 16px; line-height: 1.45;
    padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(15,20,23,.1);
    background: var(--cream-2); transition: border-color .2s, transform .2s;
  }
  .semnav a:hover{ border-color: rgba(53,118,122,.45); transform: translateX(3px); }
  .semnav a[aria-current="page"]{
    border-color: rgba(53,118,122,.45); background: rgba(53,118,122,.06); font-weight: 500;
  }
  /* 22.08.2026: --teal ergab auf dem hellen Streifen (#eaebe4) nur 4.35:1.
     --teal-dk ergibt 5.82:1. Nur HIER geaendert, nicht die Variable selbst —
     sonst verschoebe sich die Farbe an dreissig anderen Stellen mit. */
  .semnav .semnav__nr{ font-family: var(--font-mono); font-size: 13px; color: var(--teal-dk); flex: 0 0 auto; }

  @media (max-width: 560px){
    .sempage{ padding-top: 128px; }
    .semquote{ padding: 24px 22px; }
    .semlist li{ padding-left: 44px; }
    .semlist li::before{ width: 30px; height: 30px; font-size: 12px; }
  }

  /* Partnerzeile am Fuss der Seminarseiten — bewusst zurueckhaltend */
  .sempartner{
    margin: 44px 0 0; padding: 18px 22px;
    background: rgba(53,118,122,.06); border-left: 2px solid rgba(53,118,122,.35);
    border-radius: 0 12px 12px 0;
    font-size: 15px !important; line-height: 1.6; color: rgba(15,20,23,.7) !important;
  }

  /* Verweis von der Seminarkarte auf die ausfuehrliche Seminarseite */
  .semk__more{
    display: inline-flex; align-items: center; gap: 8px; margin-top: 22px;
    font-size: 14px; font-weight: 500; color: var(--teal-dk); text-decoration: none;
    transition: gap .2s ease;
  }
  .semk__more:hover{ gap: 12px; }
  .semk__card:nth-child(even) .semk__more{ color: #fff; }

/* ===========================================================================
   BETRIEBSPRUEFUNG — Leistungsseite /betriebspruefung/ und Uebersetzungen
   Angelegt 19.08.2026.

   Zweispaltig, nicht dreispaltig: Sieben Kacheln in drei Spalten liessen eine
   Kachel allein in der letzten Zeile stehen. Die Gliederung 2 + 4 + 1 geht in
   zwei Spalten restlos auf, und die breiteren Kacheln vertragen die 40 bis 70
   Woerter Fliesstext deutlich besser als drei schmale Spalten.
   =========================================================================== */
.bppage{ padding-top: 168px; padding-bottom: 120px; }

.bppage__head{ max-width: 820px; }
.bppage__head h1{
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.03; letter-spacing: -0.028em;
  margin: 0; text-wrap: balance;
  /* "Betriebspruefung" ist auf einem 320px-Display breiter als die Spalte. */
  overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6;
}
.bppage__leit{
  font-family: var(--font-heading); font-style: italic; font-weight: 350;
  font-size: clamp(20px, 2.3vw, 28px); line-height: 1.34;
  color: var(--teal-dk); margin: 24px 0 0; text-wrap: pretty;
}
.bppage__intro{
  font-size: 17px; line-height: 1.65; color: rgba(15,20,23,.72);
  margin: 26px 0 0; text-wrap: pretty;
}
.bppage__intro strong{ color: var(--ink); font-weight: 600; }

.bpgroup{
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); font-weight: 600;
  margin: 84px 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(15,20,23,.1);
}

.bpgrid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.bpk{
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.08);
  border-radius: 18px; padding: 30px 32px;
}
/* Die Schlusskachel nimmt beide Spalten — sie ist die Antwort auf alles darueber. */
.bpk--wide{ grid-column: 1 / -1; }

.bpk__nr{
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--teal); margin: 0 0 14px;
}
.bpk__h{
  font-family: var(--font-heading); font-weight: 400;
  font-size: 27px; line-height: 1.12; letter-spacing: -0.015em;
  margin: 0 0 12px; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6;
}
.bpk__leit{
  font-weight: 600; font-size: 16px; line-height: 1.45;
  color: var(--ink); margin: 0 0 12px; text-wrap: pretty;
}
.bpk__p{
  font-size: 15.5px; line-height: 1.62; color: rgba(15,20,23,.7);
  margin: 0; text-wrap: pretty;
}

.bpabgr{
  margin-top: 84px; padding: 34px 38px;
  background: var(--cream-2); border-left: 3px solid var(--teal);
  border-radius: 0 16px 16px 0;
}
.bpabgr h2{
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18;
  letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance;
}
.bpabgr p{
  font-size: 16px; line-height: 1.65; color: rgba(15,20,23,.72);
  margin: 0; text-wrap: pretty;
}

.bppage__cta{ margin: 56px 0 0; }
/* .cta bringt SELBST kein Innenmass mit — das steht bei jeder Verwendungsstelle
   einzeln (siehe .legal__back .cta). Ohne diese Zeile wird der Knopf zu einem
   zusammengequetschten Rechteck. Im Bild sofort sichtbar, im Quelltext nicht. */
.bppage__cta .cta{ padding: 15px 30px; font-size: 15px; }

@media (max-width: 900px){
  .bppage{ padding-top: 132px; padding-bottom: 84px; }
  .bpgrid{ grid-template-columns: 1fr; gap: 18px; }
  .bpgroup{ margin-top: 60px; }
  .bpabgr{ margin-top: 60px; padding: 26px 24px; }
}
@media (max-width: 520px){
  .bpk{ padding: 24px 22px; }
  .bpk__h{ font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Anklickbare Leistungskarte (19.08.2026)

   .pillar hebt sich beim Ueberfahren an — die Karte SIEHT also anklickbar aus.
   Bei Karte 01, die auf /betriebspruefung/ fuehrt, war aber nur der kleine
   Verweis "Mehr erfahren" ein Ziel. Luca Gobbo hat genau deshalb zuerst
   vergeblich auf die Ueberschrift geklickt.

   Loesung ist ein durchsichtiges Feld ueber der ganzen Karte, das zum
   vorhandenen Verweis gehoert. Damit bleibt es EIN Ziel — kein doppelter
   Verweis, der Tastatur und Vorlesesoftware zweimal dasselbe anbietet.

   Karte 02 und 03 bleiben unveraendert: Sie fuehren auf das Kontaktformular,
   und eine Karte, die beim Klick irgendwohin springt, waere dort laestig.
   --------------------------------------------------------------------------- */
.pillar--link{ position: relative; }
.pillar--link .more::after{
  content: ""; position: absolute; inset: 0;
  border-radius: 18px;      /* deckt sich mit dem Kachelrand */
}
.pillar--link:hover .more{ text-decoration: underline; text-underline-offset: 3px; }
/* Sichtbarer Fokusrahmen um die GANZE Kachel, nicht nur um den Textverweis. */
.pillar--link:focus-within{ outline: 2px solid var(--teal); outline-offset: 3px; }
.pillar--link .more:focus-visible{ outline: none; }

/* ---------------------------------------------------------------------------
   NICHT wiederholen: Seminarkacheln vertragen KEINEN flaechigen Verweis.

   Am 19.08.2026 habe ich hier dasselbe durchsichtige Feld eingebaut wie bei
   .pillar--link. Ergebnis der Messung ueber den gesamten Scrollbereich:
   27 von 45 Klicks auf einen SICHTBAREN Kacheltitel fuehrten auf ein FREMDES
   Seminar.

   Grund: .semk__card sind gestapelte Sticky-Karten. Der Kasten einer spaeteren
   Karte liegt ueber den sichtbaren Titeln der frueheren, ohne sie zu verdecken.
   Ein durchsichtiges Feld darin faengt Klicks ab, die optisch woanders hingehen.
   Ohne das Feld passiert an diesen Stellen schlicht nichts — laestig, aber
   harmlos. Mit dem Feld oeffnet sich das falsche Seminar. Das ist schlimmer.

   Wer das beheben will, muss den Stapel selbst aendern, nicht den Verweis.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   24.08.2026 — der TITEL ist jetzt selbst ein Verweis.
   Frage von Luca Gobbo: "kann man die seminarkacheln auch anklicken?"

   Das ist NICHT die Wiederholung des Fehlers von oben. Der Unterschied liegt
   in der Flaeche: Ein durchsichtiges Feld ueber der ganzen Kachel bedeckt
   auch das, was optisch zur Nachbarkarte gehoert. Ein Verweis auf dem
   Titelelement kann das nicht. Der Browser stellt einen Klick immer dem
   OBERSTEN Element an dieser Stelle zu, also genau dem, was der Nutzer
   sieht. Ist ein Titel von der naechsten Karte verdeckt, ist er nicht
   anklickbar, und der Klick geht an die verdeckende Karte. Genau so soll
   es sein.

   Gemessen am 24.08.2026 ueber den gesamten Scrollbereich, alle sieben
   Sprachen, zwei Raster:
     927 867 Punkte ueber der ganzen Stapelflaeche, davon 152 725 auf einem
     Verweis — 0 Punkte, an denen der ausgeloeste Verweis zu einer anderen
     Kachel gehoert als die, die dort zuoberst liegt.
     4 382 sichtbare Titelzeilen einzeln angetastet (getClientRects, also
     zeilenweise) — 2 230 anklickbar, 2 152 von der naechsten Kachel
     verdeckt und damit tot, 0 Fehlklicks.
   Die verdeckte Haelfte ist kein Mangel: Dort sieht der Nutzer den Titel
   gar nicht.

   Die Zeile "Zum Seminar" bleibt sichtbar, traegt aber tabindex="-1" und
   aria-hidden: ein Ziel, ein Verweis fuer Tastatur und Vorlesesoftware.
   --------------------------------------------------------------------------- */
.semk__titel{
  color: inherit; text-decoration: none;
  transition: text-decoration-color .2s ease;
}
.semk__titel:hover{
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.semk__titel:focus-visible{
  outline: 2px solid var(--teal-lt); outline-offset: 4px; border-radius: 4px;
}
.semk__card:nth-child(odd) .semk__titel:focus-visible{ outline-color: var(--teal-dk); }

/* ===========================================================================
   RECHTSGRUNDLAGEN — /betriebspruefung/rechtsgrundlagen/ und 28 Laenderseiten
   Angelegt 19.08.2026.

   Der Zustand wird als WORT ausgegeben, nicht als Symbol. Eine Suchmaschine
   liest "uebertroffen"; eine Raute liest sie nicht. Auf der internen Matrix
   ist es umgekehrt richtig — dort zaehlt der Blick, hier der Index.
   =========================================================================== */
.rgpage{ padding-top: 168px; padding-bottom: 120px; max-width: 900px; }

.rgpage__kicker{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 10px;
}
.rgpage__kicker a{ color: inherit; }
.rgpage__head h1{
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(32px, 5vw, 56px); line-height: 1.03; letter-spacing: -.028em;
  margin: 0; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 14 6 6;
}
.rgpage__begriff{
  font-family: var(--font-heading); font-style: italic; font-weight: 350;
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.35;
  color: var(--teal-dk); margin: 16px 0 0; text-wrap: pretty;
}
.rgpage__lead{
  font-size: 17px; line-height: 1.65; color: rgba(15,20,23,.72);
  margin: 22px 0 0; text-wrap: pretty;
}

/* ---- Hinweis: oben, nicht im Fuss, und ohne Bestaetigungsdialog ---- */
.rghinweis{
  margin: 40px 0 0; padding: 22px 26px;
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.1);
  border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0;
}
.rghinweis__h{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); font-weight: 600; margin: 0 0 10px;
}
.rghinweis p{
  font-size: 14px; line-height: 1.6; color: rgba(15,20,23,.72); margin: 0;
}
.rghinweis p + p{ margin-top: 10px; }
.rghinweis strong{ color: var(--ink); font-weight: 600; }

/* ---- Achsenbloecke ---- */
.rgblocks{ margin-top: 52px; display: flex; flex-direction: column; gap: 4px; }
.rgblock{
  padding: 26px 0; border-top: 1px solid rgba(15,20,23,.1);
}
.rgblock__h{
  font-family: var(--font-heading); font-weight: 400;
  font-size: 25px; line-height: 1.15; letter-spacing: -.015em;
  margin: 0 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px;
}
.rgstatus{
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.rg--over{ background: rgba(53,118,122,.14); color: var(--teal-dk); }
.rg--met { background: rgba(38,64,123,.12);  color: #26407B; }
.rg--na, .rg--undoc{
  background: transparent; color: rgba(15,20,23,.66);
  box-shadow: inset 0 0 0 1px rgba(15,20,23,.24);
}
.rgblock__req{
  font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 0;
  text-wrap: pretty;
}
.rgblock__src{ margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.rgblock__src span{
  /* 22.08.2026: .45 ergab gemessen 2.94:1 bei 10px auf #f6f2eb. .60 ergibt
     4.68:1. Dieselbe Ursache wie bei .rgleiste__t und .rgliste__z — die
     kleinen einleitenden Beschriftungen im Register waren durchweg zu
     blass. Betrifft alle 116 Laenderseiten. */
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(15,20,23,.60);
}
.rgblock__src code{
  font-family: var(--font-mono); font-size: 13px; color: var(--teal-dk);
  background: rgba(53,118,122,.09); border-radius: 5px; padding: 5px 10px;
  line-height: 1.5;
}
.rgblock__us{
  margin: 16px 0 0; font-size: 15px; line-height: 1.6;
  color: rgba(15,20,23,.68); text-wrap: pretty;
}
.rgblock__us span{
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  /* 22.08.2026: die letzte der vier zu blassen Kleinbeschriftungen im
     Register. .45 ergab 2.94:1, .60 ergibt 4.68:1. */
  color: rgba(15,20,23,.60); margin-bottom: 6px;
}

/* ---- Weitere Informationen: fuenf Achsen hinter einer Klappe.
        <details> wird von Suchmaschinen ausgelesen — kein Verlust im Index. ---- */
.rgmehr{ border-top: 1px solid rgba(15,20,23,.1); }
.rgmehr > summary{
  cursor: pointer; padding: 22px 0; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--teal-dk);
  display: flex; align-items: center; gap: 10px;
}
.rgmehr > summary::-webkit-details-marker{ display: none; }
.rgmehr > summary::before{
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.rgmehr[open] > summary::before{ transform: rotate(-135deg); }
.rgmehr > summary:hover{ color: var(--ink); }
.rgmehr .rgblock:first-of-type{ border-top: 0; padding-top: 0; }

/* ---- Uebersichtsseite ---- */
.rgh2{
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.02em;
  margin: 64px 0 20px;
}
.rgachsen{ margin: 0; padding-left: 0; list-style: none; counter-reset: ax; }
.rgachsen li{
  padding: 12px 0; border-bottom: 1px solid rgba(15,20,23,.08);
  font-size: 16px; color: var(--ink); display: flex; gap: 14px; align-items: baseline;
}
.rgachsen li span{
  font-family: var(--font-mono); font-size: 11px; color: var(--teal);
  width: 26px; flex: none;
}
.rgliste{ margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 24px; }
.rgliste__i a{
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 15px 0; border-bottom: 1px solid rgba(15,20,23,.08);
  text-decoration: none; color: inherit; transition: background .15s ease;
}
.rgliste__i a:hover{ background: rgba(53,118,122,.06); }
.rgliste__land{
  font-family: var(--font-heading); font-size: 21px; font-weight: 400;
  line-height: 1.2; letter-spacing: -.015em;
}
.rgliste__begriff{
  grid-column: 1 / -1; font-size: 14px; color: var(--teal-dk);
  line-height: 1.45; text-wrap: pretty;
}
.rgliste__z{
  /* 22.08.2026: .5 ergab gemessen 3.40:1 auf #f6f2eb bei 11px — verlangt
     sind 4.5:1. .60 ergibt 4.68:1. Betrifft alle 116 Laenderseiten. */
  font-family: var(--font-mono); font-size: 11px; color: rgba(15,20,23,.60);
  white-space: nowrap; align-self: center;
}
.rgoffen{ font-size: 15.5px; line-height: 1.6; color: rgba(15,20,23,.68); margin: 0; }
.rgoffen span{ color: var(--ink); }

/* ---- Blaettern zwischen den Laendern ---- */
.rgnav{
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(15,20,23,.1);
  display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center;
  font-size: 14.5px;
}
.rgnav a{ color: var(--teal-dk); text-decoration: none; }
.rgnav a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.rgnav__c{ margin-inline: auto; font-weight: 500; }

.rgpage__cta{ margin: 48px 0 0; }
/* .cta bringt selbst kein Innenmass mit — siehe .legal__back .cta */
.rgpage__cta .cta{ padding: 15px 30px; font-size: 15px; }

@media (max-width: 900px){
  .rgpage{ padding-top: 132px; padding-bottom: 84px; }
  .rgliste{ grid-template-columns: 1fr; }
  .rgblock__h{ font-size: 22px; }
  .rgnav__c{ margin-inline: 0; }
}

/* ---- Verweis auf die Rechtsgrundlagen, vierte Gruppe auf /betriebspruefung/ ---- */
.bprg{
  /* 21.08.2026: Der Abstand nach oben war GEMESSEN 0 Pixel — der Block
     stiess unmittelbar an den Einleitungstext. Darunter standen 133.
     Jetzt oben rund 70 auf dem Schreibtisch und 44 auf dem Telefon;
     bewusst weniger als die 133 darunter, damit der Block optisch noch
     zur Einleitung gehoert und nicht frei zwischen zwei Bloecken haengt.
     Gilt fuer alle vier Sprachen, die den Block haben (de, en, it, bg) —
     in allen sitzt er VOR dem Kachelraster, nicht darin. */
  margin-top: clamp(44px, 5.5vw, 80px);
  display: block; text-decoration: none; color: inherit;
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.08);
  border-radius: 18px; padding: 30px 32px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.bprg:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -22px rgba(15,20,23,.2); }
.bprg:focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }
.bprg__nr{
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; color: var(--teal); margin: 0 0 14px;
}
.bprg__h{
  font-family: var(--font-heading); font-weight: 400; font-size: 27px;
  line-height: 1.12; letter-spacing: -.015em; margin: 0 0 12px;
}
.bprg__leit{ font-weight: 600; font-size: 16px; line-height: 1.45; margin: 0 0 12px; }
.bprg__p{
  font-size: 15.5px; line-height: 1.62; color: rgba(15,20,23,.7);
  margin: 0; text-wrap: pretty;
}
.bprg__p em{ font-style: italic; color: var(--teal-dk); }
.bprg__more{
  margin-top: 20px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--teal);
}
.bprg:hover .bprg__more{ text-decoration: underline; text-underline-offset: 3px; }

/* --- Rechenaufgabe im Kontaktformular (21.08.2026) ------------------------
   Das Feld ist schmal, damit es nicht wie ein weiteres Textfeld aussieht und
   niemand einen Satz hineinschreibt. Sichtbar MUSS es bleiben: es ist kein
   Honigtopf, sondern eine Frage an den Menschen.                            */
.field3--rechen input{
  max-width: 150px;
}

/* --- Verweis auf die Rechtsgrundlagen, Fassung fuer /gutachten/ (21.08.2026)
   Auf der Betriebspruefungsseite ist die Erfuellung gesetzlicher Anforderungen
   eine LEISTUNG und traegt deshalb eine volle Kachel (.bprg). Auf der
   Gutachtenseite ist dieselbe Seite nur das erste GLIED DER KETTE — ein
   Verweis, kein Angebot. Zwei gleich aussehende Kacheln mit demselben Ziel
   lesen sich als Versehen; deshalb hier eine schmale Zeile.
   NICHT zu .bprg vereinheitlichen — der Unterschied ist der Zweck.          */
.guref{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 0 0 42px;
  padding: 0 0 18px 20px;
  border-left: 3px solid var(--teal);
  border-bottom: 1px solid rgba(15,20,23,.10);
}
.guref__t{
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.guref__p{
  margin: 0;
  flex: 1 1 320px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(15,20,23,.72);
}
.guref__more{
  white-space: nowrap;
  font-weight: 600;
  font-size: 15px;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(53,118,122,.35);
}
.guref__more:hover{ border-bottom-color: var(--teal); }

/* === Befundleiste und Statusmarken (21.08.2026) ==========================
   Vorher unterschieden sich "erfüllt" und "übertroffen" nur durch einen
   leicht anderen Blasston — auf dem Bildschirm praktisch nicht zu trennen.
   Jetzt trennen sie sich durch die FORM: übertroffen ist GEFÜLLT, erfüllt
   ist NUR UMRANDET. Das bleibt unterscheidbar bei jeder Bildschirmgrösse,
   bei Farbenblindheit und im Schwarzweissdruck.
   Farbe allein hätte diese Aufgabe nie erfüllen können.                    */

.rgstatus{
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px 4px;
  border-radius: 3px;              /* kantig, nicht Pille — es ist ein Vermerk */
  white-space: nowrap;
  vertical-align: 3px;
}
.rg--over{                          /* GEFÜLLT */
  background: var(--teal-dk); color: #FFFCF5;
  box-shadow: none;
}
.rg--met{                           /* NUR UMRANDET */
  background: transparent; color: #26407B;
  box-shadow: inset 0 0 0 1.5px rgba(38,64,123,.55);
}
/* 22.08.2026: .45 ergab gemessen 2,94:1 bei 11px — verlangt sind 4,5.
   .66 ergibt 5,72:1 und bleibt deutlich blasser als die anderen beiden
   Vermerke, die Rangfolge der Plaketten aendert sich also nicht. */
.rg--na, .rg--undoc{
  background: transparent; color: rgba(15,20,23,.66);
  box-shadow: inset 0 0 0 1px rgba(15,20,23,.24);
}

/* Farbiger Streifen am Block — damit man das Muster beim Blättern sieht,
   ohne eine Zeile zu lesen. */
.rgblock{ padding-left: 18px; border-left: 3px solid rgba(15,20,23,.10); }
.rgblock--over{ border-left-color: var(--teal-dk); }
.rgblock--met { border-left-color: rgba(38,64,123,.55); }

/* --- die Leiste: acht Achsen auf einen Blick ---------------------------- */
.rgleiste{
  margin: 26px 0 34px;
  border-top: 1px solid rgba(15,20,23,.12);
  border-bottom: 1px solid rgba(15,20,23,.12);
  padding: 16px 0 18px;
}
.rgleiste__t{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  /* 22.08.2026: .45 ergab gemessen 2.94:1 bei 10px. .60 ergibt 4.68:1. */
  text-transform: uppercase; color: rgba(15,20,23,.60);
  margin: 0 0 12px;
}
.rgleiste__g{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 9px 22px;
  margin: 0;
}
.rgleiste__i{
  display: flex; align-items: baseline; gap: 9px;
  font-size: 14px; line-height: 1.35; color: rgba(15,20,23,.78);
}
.rgmark{
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 2px;
  position: relative; top: 1px;
}
.rgmark--over{ background: var(--teal-dk); }
.rgmark--met { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(38,64,123,.55); }
.rgmark--na  { background: transparent; box-shadow: inset 0 0 0 1px rgba(15,20,23,.18); }

.rgleiste__s{
  margin: 14px 0 0; font-size: 13.5px; color: rgba(15,20,23,.6);
  display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
}
.rgleiste__s b{ color: var(--ink); font-weight: 600; }
.rgleiste__s .k{ display: inline-flex; align-items: center; gap: 7px; }

/* === Fragenseiten (22.08.2026) ============================================
   Diese Seiten sind fuer die SUCHE gebaut. Deshalb bewusst nuechtern: viel
   Weissraum, ein enges Satzmass, keine Kacheloptik. Wer hier landet, sucht
   eine Antwort und keine Werbung — der Weg zur Leistung steht ganz unten.  */

.fragepage{
  padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 104px);
  background: var(--cream);
}
.fragepage .container{ max-width: 860px; }

.fragepage__kicker{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(15,20,23,.45); margin: 0 0 18px;
}
.fragepage__kicker a{ color: var(--teal-dk); text-decoration: none; }
.fragepage__kicker a:hover{ text-decoration: underline; }

.fragepage h1{
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 46px); line-height: 1.16;
  letter-spacing: -.015em; text-wrap: balance; margin: 0 0 26px;
  color: var(--ink);
}

/* Die Antwort steht im ersten Absatz und wird als solche hervorgehoben. */
.fragepage__antwort{
  border-left: 4px solid var(--teal);
  background: var(--cream-2);
  padding: 22px clamp(18px, 3vw, 28px);
  margin: 0 0 40px;
}
.fragepage__antwort p{
  margin: 0; font-size: clamp(17px, 2.1vw, 19px); line-height: 1.6;
  color: var(--ink);
}

.fragepage h2{
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(21px, 2.7vw, 26px); line-height: 1.25;
  margin: 40px 0 12px; text-wrap: balance; color: var(--ink);
}
.fragepage p{
  font-size: 16.5px; line-height: 1.65; color: rgba(15,20,23,.82);
  margin: 0 0 16px; text-wrap: pretty;
}

/* Breite Tabellen scrollen in sich selbst, nie die Seite. */
.fragepage__tab{ overflow-x: auto; margin: 0 0 8px; }
.fragepage__tab table{
  border-collapse: collapse; width: 100%; min-width: 640px;
  font-size: 15px; line-height: 1.55;
}
.fragepage__tab th, .fragepage__tab td{
  text-align: left; vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid rgba(15,20,23,.12);
}
.fragepage__tab thead th{
  /* 22.08.2026: .5 ergab gemessen 3.40:1. Bei 10.5px hilft auch der
     Fettdruck nicht — die Ausnahme fuer grossen Text beginnt erst bei
     14pt fett, also 18.66px. .60 ergibt 4.68:1. */
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(15,20,23,.60);
  border-bottom: 2px solid var(--ink); padding-bottom: 8px;
}
.fragepage__tab tbody th{
  font-weight: 600; color: var(--ink); white-space: nowrap; padding-right: 22px;
}
.fragepage__tab code{
  font-family: var(--font-mono); font-size: 12.5px; color: var(--teal-dk);
  background: rgba(53,118,122,.09); border-radius: 4px; padding: 3px 7px;
  white-space: nowrap;
}

.fragepage__wir{
  margin: 46px 0 0; padding: 4px 0 0;
  border-top: 2px solid var(--ink);
}
.fragepage__mehr a{
  font-weight: 600; color: var(--teal-dk); text-decoration: none;
  border-bottom: 1px solid rgba(53,118,122,.35);
}
.fragepage__mehr a:hover{ border-bottom-color: var(--teal-dk); }

.fragepage__hinweis{
  margin: 40px 0 0; font-size: 13.5px; line-height: 1.6;
  color: rgba(15,20,23,.55); border-top: 1px solid rgba(15,20,23,.12);
  padding-top: 18px;
}
.fragepage__cta{ margin: 34px 0 0; }
.fragepage__cta .cta{ padding: 15px 30px; font-size: 15px; }

/* --- Uebersichtsseite ---------------------------------------------------- */
.fragepage__leit{
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(19px, 2.4vw, 23px); color: var(--teal-dk);
  margin: -14px 0 22px;
}
.fragepage__intro{ max-width: 62ch; }

.frliste{ display: grid; gap: 16px; margin: 36px 0 0; }
.frkarte{
  display: block; text-decoration: none; color: inherit;
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.10);
  border-left: 4px solid var(--teal);
  padding: 24px clamp(18px, 3vw, 28px) 26px;
  transition: border-color .15s ease, transform .15s ease;
}
.frkarte:hover{ border-color: var(--teal); transform: translateY(-1px); }
.frkarte__h{
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(19px, 2.4vw, 23px); line-height: 1.3;
  margin: 0 0 10px; color: var(--ink); text-wrap: balance;
}
.frkarte__p{
  margin: 0 0 14px; font-size: 16px; line-height: 1.6;
  color: rgba(15,20,23,.72);
}
.frkarte__more{
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--teal-dk);
}

/* === FAQ-Anriss auf der Startseite (22.08.2026) ==========================
   Bewusst schmal und ruhig: Er soll die Fragenseiten anbieten, nicht mit
   den Leistungskacheln darueber konkurrieren. Ein Satz je Frage — die
   volle Antwort steht nur auf der Einzelseite.                            */
/* padding-block, NICHT die Kurzschreibweise padding: — sonst wird auch die
   seitliche Polsterung von .container auf 0 gesetzt und das Band klebt am
   linken Rand, waehrend alle anderen Abschnitte eingerueckt sind.
   Am 22.08.2026 gemessen: links=0 statt 64px. */
.faqband{ padding-block: clamp(48px, 7vw, 84px) clamp(8px, 2vw, 16px); }
.faqband__kopf{ max-width: 60ch; margin: 0 0 28px; }
.faqband__kicker{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  color: var(--teal-dk); margin: 0 0 12px;
}
.faqband__h{
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.2;
  letter-spacing: -.012em; margin: 0; color: var(--ink); text-wrap: balance;
}
.faqband__liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: rgba(15,20,23,.12); border-top: 1px solid rgba(15,20,23,.12);
  border-bottom: 1px solid rgba(15,20,23,.12); }
.faqband__liste li{ background: var(--cream); }
.faqband__liste a{
  display: block; text-decoration: none; color: inherit;
  padding: 20px 4px 22px;
  transition: background .15s ease;
}
.faqband__liste a:hover{ background: var(--cream-2); }
.faqband__liste strong{
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(17px, 2.1vw, 20px); line-height: 1.35;
  color: var(--ink); margin: 0 0 7px; text-wrap: balance;
}
.faqband__liste span{
  display: block; font-size: 15.5px; line-height: 1.55;
  color: rgba(15,20,23,.68);
}
.faqband__mehr{ margin: 20px 0 0; }
.faqband__mehr a{
  font-weight: 600; font-size: 15px; color: var(--teal-dk);
  text-decoration: none; border-bottom: 1px solid rgba(53,118,122,.35);
}
.faqband__mehr a:hover{ border-bottom-color: var(--teal-dk); }

/* === Gruppen auf der Uebersichtsseite /fragen/ (21.08.2026) ==============
   Bei zwei Fragen brauchte die Uebersicht keine Gliederung. Bei dreizehn
   schon: Wer einen Bescheid auf dem Tisch hat, soll nicht dreizehn Karten
   lesen muessen, um die vier zu finden, die seine Lage betreffen.

   Die Frage auf der Karte ist deshalb jetzt eine <h3> und nicht mehr eine
   <h2> — die <h2> traegt die Gruppe. .frkarte__h greift ueber die Klasse,
   nicht ueber das Element, deshalb ist am Kartenstil nichts zu aendern.  */
.frgruppe{ margin: clamp(40px, 5vw, 64px) 0 0; }
.frgruppe:first-of-type{ margin-top: clamp(28px, 3.5vw, 44px); }
.frgruppe__h{
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(21px, 2.8vw, 27px); line-height: 1.25;
  letter-spacing: -.01em; margin: 0; color: var(--ink);
  padding: 0 0 10px; border-bottom: 1px solid rgba(15,20,23,.14);
  text-wrap: balance;
}
.frgruppe__p{
  margin: 12px 0 0; max-width: 60ch;
  font-size: 15px; line-height: 1.6; color: rgba(15,20,23,.66);
}
.frgruppe .frliste{ margin-top: 22px; }

/* Ab zwei Spalten wird die Liste zweispaltig. Nicht darueber hinaus: Bei
   drei Spalten wird die Frage in der Karte zu schmal und bricht in vier
   Zeilen um. */
@media (min-width: 860px){
  .frliste{ grid-template-columns: 1fr 1fr; }
}

/* === Referenzblock — Inhalt INNERHALB der Seminarkacheln (22.08.2026) ====
   Der Block benutzt .semk/.semk__card, also dasselbe Geruest und denselben
   klebenden Stapel wie die Seminare. Hier stehen nur die Teile, die es im
   Seminarabschnitt nicht gibt: die Verweisliste und das Zitat.

   JEDE REGEL BRAUCHT EINE ZWEITE FUER DIE DUNKLE KARTE. Die Faerbung kommt
   aus .semk__card:nth-child(even) — dort ist der Grund petrol und heller
   Text noetig. Wer das vergisst, bekommt dunkle Schrift auf dunklem Grund;
   sichtbar wird es erst auf der zweiten Karte.                            */
.refliste{ list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.refliste a{
  /* 22.08.2026, auf Vorschlag von Luca Gobbo: Die Namen tragen auf den
     hellen Kacheln das Petrol der grossen Ziffer daneben — das bindet die
     Kachel optisch zusammen.

     Kontrast gemessen: #35767A auf #FFFCF5 = 5.09:1. Damit ueber der
     Schwelle von 4.5:1, die fuer NORMALEN Text gilt — nicht nur ueber
     den 3:1 fuer grossen Text. Das ist wichtig, weil die Schrift per
     clamp bis auf 19px schrumpft und dann nicht mehr als "gross" zaehlt.
     --teal-dk waere mit 7.03:1 noch sicherer, aber dunkler als die
     Ziffer und damit weniger geschlossen. */
  color: var(--teal); text-decoration: none;
  /* 22.08.2026: von clamp(15,1.7vw,17) heraufgesetzt. Die Namen SIND
     der Inhalt dieser Kachel — der Titel darueber ist nur die
     Ueberschrift. Das Groessenverhaeltnis war umgekehrt.

     Und in der Serifenschrift (--font-heading), auf Wunsch von Luca
     Gobbo: dieselbe Schrift wie die Kachelueberschriften. Die Namen
     sind hier keine Beschriftung, sondern der Inhalt — sie duerfen
     aussehen wie eine Ueberschrift. */
  font-family: var(--font-heading);
  font-size: clamp(19px, 2.2vw, 26px); font-weight: 400; line-height: 1.3;
  letter-spacing: -.005em;
  border-bottom: 1px solid rgba(53,118,122,.45);
  transition: border-color .15s ease, color .15s ease;
}
.refliste a:hover{ color: var(--teal-dk); border-color: var(--teal-dk); }
.semk__card:nth-child(even) .refliste a{
  color: var(--cream); border-bottom-color: rgba(246,242,235,.42);
}
.semk__card:nth-child(even) .refliste a:hover{
  color: #fff; border-bottom-color: rgba(246,242,235,.8);
}

.refzitat{
  margin: 26px 0 0; padding: 0 0 0 clamp(16px, 2vw, 22px);
  border-left: 3px solid var(--teal);
}
.semk__card:nth-child(even) .refzitat{ border-left-color: var(--teal-lt); }
/* 22.08.2026: Seit dem Umbau auf ein einheitliches Kachelmuster IST
   .refzitat das blockquote selbst — vorher stand es in einer <figure>.
   Der alte Selektor '.refzitat blockquote p' traf deshalb nichts mehr,
   und das Zitat fiel auf die Grundschrift zurueck. */
.refzitat{ margin: 0; }
.refzitat p{
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(17px, 2.1vw, 21px); line-height: 1.5;
  margin: 0; color: var(--ink); text-wrap: pretty;
}
.semk__card:nth-child(even) .refzitat p{ color: var(--cream); }
/* Die Lesehilfe steht ohne Anfuehrungsstriche und kleiner, damit klar
   bleibt, welcher der beiden Absaetze das woertliche Zitat ist. */
.refzitat__hilfe{
  font-family: var(--font-body); font-style: normal;
  margin: 12px 0 0; font-size: 14.5px; line-height: 1.55;
  color: rgba(15,20,23,.62); text-wrap: pretty;
}
.semk__card:nth-child(even) .refzitat__hilfe{ color: var(--cream); }
.refzitat__wer{ margin: 18px 0 0; display: grid; gap: 3px; }
.refzitat__wer a{
  justify-self: start; font-weight: 600; font-size: 15.5px;
  color: var(--teal-dk); text-decoration: none;
  border-bottom: 1px solid rgba(53,118,122,.4);
}
.refzitat__wer a:hover{ border-color: var(--teal); }
/* 22.08.2026: --teal-lt kam auf dem Musterhintergrund nur auf 2,9:1.
   Der hellere Ton haelt 4,7:1 und bleibt derselbe Petrolton. */
.semk__card:nth-child(even) .refzitat__wer a{
  color: #CEE5E6; border-bottom-color: rgba(246,242,235,.5);
}
.refzitat__wer span{ font-size: 14px; color: rgba(15,20,23,.62); }
.semk__card:nth-child(even) .refzitat__wer span{ color: var(--cream); }

/* Die genannte Grundlage einer Nennung — steht bisher nur auf Kachel 03
   (Handelskammer): Die Kammer nennt uns auf ihrer Seite nicht, sie steht
   dort auf ausdrueckliche Zustimmung ihres Praesidenten. Kleiner gesetzt
   als der Fliesstext, weil es eine Fussnote ist und keine Aussage.
   Dunkle Variante fuer den Fall, dass die Kachel spaeter an gerader
   Position steht — die Faerbung haengt an :nth-child(even).            */
.refgrund{
  margin: 18px 0 0; font-size: 14px; line-height: 1.55;
  color: rgba(15,20,23,.60); font-style: italic; text-wrap: pretty;
}
.semk__card:nth-child(even) .refgrund{ color: var(--cream); }


/* === Groessenverhaeltnis im Referenzblock (22.08.2026) ==================
   Nur hier, NICHT im Seminarabschnitt: Dort ist der Seminartitel der
   Inhalt, hier sind es die Namen. Deshalb wandert das Gewicht von der
   Ueberschrift zum Verweis.

   Die Regeln sind auf #referenzen eingegrenzt. Ohne diese Eingrenzung
   wuerden auch die sechs Seminarkacheln kleiner — sie benutzen dieselben
   Klassen.                                                              */
#referenzen .semk__right h3{ font-size: clamp(24px, 2.6vw, 32px); }
#referenzen .semk__sub{ font-size: clamp(16px, 1.9vw, 19px); }
#referenzen .refzitat p{ font-size: clamp(18px, 2.2vw, 23px); }


/* === Quellenzeile unter dem Zitat (22.08.2026) ==========================
   Kachel 02 traegt das Zitat an derselben Stelle, an der die beiden
   anderen Kacheln ihren Fliesstext haben — damit alle drei dasselbe
   Muster haben: Titel, Unterzeile, ein Block Prosa, dann die Namen.
   Die Quellenzeile steht klein darunter, damit nachpruefbar bleibt,
   WO das Zitat steht.                                                   */
.refquelle{ margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; }
/* 22.08.2026: Auf dunklem Grund voll deckend — halbdurchsichtige
   13,5px kamen gemessen auf 3,6:1 statt der verlangten 4,5:1. */
.semk__card:nth-child(even) .refquelle{ color: var(--cream); }
.refquelle a{
  color: rgba(15,20,23,.58); text-decoration: none;
  border-bottom: 1px solid rgba(15,20,23,.22);
}
.refquelle a:hover{ color: var(--teal-dk); border-color: var(--teal); }
/* 22.08.2026: .7 ergab gemessen 3,39:1 bei 13,5px. Deckend: 5,6:1. */
.semk__card:nth-child(even) .refquelle a{
  color: var(--cream); border-bottom-color: rgba(246,242,235,.4);
}
.semk__card:nth-child(even) .refquelle a:hover{
  color: #fff; border-bottom-color: rgba(246,242,235,.75);
}

/* Das Zitat sitzt jetzt im Prosa-Slot; der Abstand nach oben kommt von
   dort, nicht mehr von einem eigenen Rand. */
#referenzen .refzitat{ margin-top: 22px; }

/* === Verweis einer Kachel auf ihre eigene Seite (22.08.2026) ============
   Zurueckhaltend gesetzt: Die Kachel ist die Zusammenfassung, der Verweis
   das Angebot weiterzulesen — nicht umgekehrt. Deshalb kleiner als der
   Fliesstext und ohne Rahmen.

   Nicht mit .bprg__more verwechseln: Das ist der grosse Verweisblock auf
   die Rechtsgrundlagen. Dieser hier sitzt INNERHALB einer Kachel.        */
.bpk__more{
  display: inline-flex; align-items: center; gap: 8px;
  margin: 18px 0 0; font-size: 14px; font-weight: 500;
  /* 22.08.2026: --teal-dk kam auf dem Kachelgrund auf 4,33:1 — knapp
     unter den verlangten 4,5. Der tiefere Ton haelt 6,9:1. */
  color: #1F4A4D; text-decoration: none;
  border-bottom: 1px solid rgba(53,118,122,.35);
  transition: gap .2s ease, border-color .15s ease;
}
.bpk__more:hover{ gap: 12px; border-color: var(--teal); }
.bpk__more span{ font-size: 15px; line-height: 1; }

/* === Auszeichnungen (22.08.2026, zweite Fassung) ========================
   Erste Fassung hatte eine eigene Preisliste (.refpreise) und die beiden
   Urkunden als eingebettete Bilder. Auf Wunsch von Luca Gobbo jetzt wie
   bei den Referenten: Der Preisname steht in .refliste — dieselbe
   Serifenschrift, dieselbe Farblogik — und IST der Verweis auf die
   Urkunde. Das halbiert die Kachelhoehe und wiederholt nichts.

   Die Erlaeuterung steht als zweite Zeile im selben <li>. Deshalb bekommt
   .refliste li ein eigenes Raster; bei den Kacheln 01 und 03 enthaelt das
   <li> nur den Verweis, dort aendert die Regel nichts.               */
.refliste li{ display: grid; gap: 4px; }
.refliste li > a{ justify-self: start; }
.refpreis__p{
  font-size: 15px; line-height: 1.55;
  color: rgba(15,20,23,.66); text-wrap: pretty;
}
.semk__card:nth-child(even) .refpreis__p{ color: var(--cream); }


/* === Reiter der gestapelten Kacheln (22.08.2026) =======================
   Der Stapel liegt fest bei top:118px, jede Kachel 16 Pixel tiefer als
   die vorige. Von einer verdeckten Kachel bleiben daher genau 16 Pixel
   sichtbar — gemessen bei scrollY 5200: Kacheln 1 bis 4 je 16px, Kachel
   5 318px, Kachel 6 416px. In diesen 16 Pixeln lag bisher NICHTS
   Anklickbares. Der Stapel sah aus wie ein Karteiregister und liess sich
   nicht bedienen.

   Warum nicht die ganze Kachel verlinken: Das war schon einmal versucht
   und ist gescheitert — 27 von 45 Klicks landeten beim falschen Seminar,
   weil der Kasten einer Kachel weit unter den sichtbaren Streifen der
   naechsten reicht. Der Reiter deckt deshalb NUR die obersten 16 Pixel.

   Warum eine Sprungmarke auf sich selbst und kein Skript: Ein Klick soll
   die Kachel nach vorn holen, also genau so weit scrollen, dass sie an
   ihrer Klebeposition steht. Das leistet scroll-margin-top. Kein
   JavaScript, funktioniert auch mit Tastatur und ist ein echter Verweis
   mit zugaenglicher Beschriftung.                                       */
.semk__reiter{
  position: absolute; left: 0; right: 0; top: 0; height: 16px;
  z-index: 6;                 /* ueber .semk__inner, unter nichts */
  display: block; text-decoration: none;
}
.semk__reiter:focus-visible{
  outline: 2px solid var(--teal-lt);
  outline-offset: -2px; border-radius: 22px 22px 0 0;
}
/* Die Kachel bekommt beim Ueberfahren des Reiters einen leisen Hinweis,
   dass der Streifen etwas tut. */
.semk__reiter:hover{ background: rgba(246,242,235,.22); }
.semk__card:nth-child(odd) .semk__reiter:hover{ background: rgba(15,20,23,.10); }

/* Sprungweite: Die Kachel soll dort stehen bleiben, wo sie klebt —
   118px + 16px je vorangehender Kachel. Vom Zielwert geht die
   scroll-padding-top des Dokuments (100px) ab, es bleiben 18px + 16px.
   Gilt fuer beide Stapel, Seminare wie Referenzen: gleiche Klassen. */
.semk .semk__card:nth-child(1){ scroll-margin-top:  18px; }
.semk .semk__card:nth-child(2){ scroll-margin-top:  34px; }
.semk .semk__card:nth-child(3){ scroll-margin-top:  50px; }
.semk .semk__card:nth-child(4){ scroll-margin-top:  66px; }
.semk .semk__card:nth-child(5){ scroll-margin-top:  82px; }
.semk .semk__card:nth-child(6){ scroll-margin-top:  98px; }

/* Unter 760px gibt es keinen Stapel — die Kacheln stehen untereinander.
   Ein unsichtbarer Streifen ueber der Kachel waere dort nur eine Falle. */
@media (max-width: 760px){
  .semk__reiter{ display: none; }
}


/* === Kacheln flaechig anklickbar (23.08.2026) ==========================
   Luca Gobbo: "doch, aber nur ueber den link. nicht wenn man da drauf
   klickt." Genau das war der Zustand: Die Kachel sah anklickbar aus,
   Ziel war aber nur die kleine Zeile am Fuss.

   Dasselbe Muster wie bei .pillar--link seit dem 19.08.2026: ein
   durchsichtiges Feld, das zum VORHANDENEN Verweis gehoert. Damit
   bleibt es ein einziges Ziel — kein zweiter Verweis, der Tastatur und
   Vorlesesoftware dieselbe Stelle zweimal anbietet.

   Warum das hier geht und bei den Seminarkacheln nicht: .bpk liegt in
   einem gewoehnlichen Raster (.bpgrid), nicht in einem klebenden
   Stapel. Bei .semk__card ueberdeckt der Kasten einer spaeteren Karte
   die sichtbaren Titel der frueheren — dort gingen 27 von 45 Klicks
   auf ein fremdes Seminar. Die Begruendung steht weiter oben und gilt
   unveraendert.                                                        */
.bpk--link{ position: relative; }
.bpk--link .bpk__more::after{
  content: ""; position: absolute; inset: 0;
  border-radius: 18px;          /* deckt sich mit dem Kachelrand */
}
.bpk--link:hover{ border-color: rgba(15,20,23,.18); }
.bpk--link:hover .bpk__more{ text-decoration: underline; text-underline-offset: 3px; }
/* Fokusrahmen um die GANZE Kachel, nicht nur um die Textzeile. */
.bpk--link:focus-within{ outline: 2px solid var(--teal); outline-offset: 3px; }
.bpk--link .bpk__more:focus-visible{ outline: none; }


/* === Rechtsraum ueber der Tabelle (23.08.2026) =========================
   Luca Gobbo: auf den fremdsprachigen Kachelseiten standen deutsche
   Paragraphen unter der Ueberschrift "Was gilt" — ohne dass dastand,
   WO sie gelten.

   Die Zeile steht bewusst UEBER der Tabelle und nicht darunter: Sie
   soll gelesen werden, bevor die Fundstellen gelesen werden. Sie ist
   ruhiger gesetzt als der Fliesstext, aber nicht kleiner als 15px —
   ein Hinweis, den man ueberliest, erfuellt seinen Zweck nicht.        */
.fragepage__raum{
  margin: 0 0 18px; font-size: 15px; line-height: 1.6;
  color: rgba(15,20,23,.78); text-wrap: pretty;
  padding-left: 14px; border-left: 3px solid var(--teal-lt);
}
.fragepage__raum a{
  color: #1F4A4D; text-decoration: none;
  border-bottom: 1px solid rgba(31,74,77,.4);
}
.fragepage__raum a:hover{ border-bottom-color: #1F4A4D; }


/* === Sprachhinweis (23.08.2026) ========================================
   Ein schmaler Streifen ganz oben, der auf die passende Sprachfassung
   verweist. Er SCHIEBT die Seite nach unten und verdeckt nichts —
   aufdringliche Einblendungen beim Betreten wertet Google seit 2017 ab.

   Er sitzt vor dem Kopfstreifen im Dokument, also oberhalb von allem.
   Weil der Kopf position:fixed ist, braucht er kein z-index-Gerangel:
   er nimmt seinen Platz im Fluss ein, der feste Kopf liegt darueber.
   Deshalb bekommt der Streifen dieselbe Farbwelt wie der Fussbereich,
   damit er nicht wie ein Fremdkoerper wirkt.                          */
/* Der Streifen liegt fest oben und UEBER dem Kopfbereich (z-index 40
   gegen dessen 30). Beim ersten Versuch stand er im Fluss — dann lag er
   hinter dem fixierten Kopf und war halb verdeckt. Kopf und Inhalt
   werden stattdessen um seine gemessene Hoehe nach unten geschoben. */
.sprachhinweis{
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: #2a5f63; color: var(--cream);
  padding: 10px 20px; font-size: 14.5px; line-height: 1.4;
  text-wrap: pretty;
}
html.hat-sprachhinweis .site-header{ top: var(--hinweis-hoehe, 0px); }
html.hat-sprachhinweis body{ padding-top: var(--hinweis-hoehe, 0px); }
.sprachhinweis a{
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(246,242,235,.5);
}
.sprachhinweis a:hover{ border-bottom-color: var(--cream); }
.sprachhinweis__zu{
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--cream); font-size: 16px; line-height: 1;
  padding: 6px 8px; border-radius: 4px;
}
.sprachhinweis__zu:hover{ background: rgba(246,242,235,.14); }
.sprachhinweis__zu:focus-visible{ outline: 2px solid var(--cream); outline-offset: 1px; }
@media (max-width: 520px){
  .sprachhinweis{ font-size: 13.5px; padding: 9px 14px; gap: 8px; }
}


/* === Rechtsraum in der Tabelle (23.08.2026) ============================
   Die Angabe steht als <caption>, also IM Tabellenelement. Grund: Ein
   Screenshot der Tabelle nimmt sie mit; ein Absatz darueber unter
   Umstaenden nicht. Genau das war Luca Gobbos Einwand.

   caption-side ist standardmaessig "top" — die Angabe steht also ueber
   den Spaltentiteln, dort, wo man sie zuerst liest.                    */
.fragepage__wo{
  caption-side: top; text-align: left;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: rgba(15,20,23,.72);
  padding: 0 0 12px;
}


/* === "Konkret" auf den Fragenseiten (23.08.2026) =======================
   Anlass: /fragen/schaetzung-reduzieren/ steht bei Google auf Platz 4,
   die drei Treffer davor sind Gesetzestexte. Gegen einen Gesetzestext
   gewinnt man nicht mit mehr Gesetzestext, sondern mit der Reihenfolge,
   in der man vorgeht — das kann ein Gesetzestext nie liefern.

   Deshalb steht der Block DIREKT unter der Antwort, vor allem anderen:
   Wer aus der Suche kommt, sieht ihn ohne zu scrollen.               */
.fragepage__konkret{
  margin: 34px 0 0; padding: 26px 30px;
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.08);
  border-radius: 18px;
}
.fragepage__konkret h2{ margin: 0 0 16px; }
.fragepage__konkret ol{
  margin: 0; padding-left: 24px;
  display: grid; gap: 14px;
}
.fragepage__konkret li{
  font-size: 16.5px; line-height: 1.62;
  color: rgba(15,20,23,.82); text-wrap: pretty;
}

/* ===========================================================================
   MESSLATTE — „Gemessen am schaerfsten Massstab Europas“
   Angelegt 24.08.2026 auf einen Vorschlag von Luca Gobbo.

   BEWUSST ANDERS ALS .fragepage__konkret: Der Konkret-Block ist ein
   heller Kasten mitten im Text — er ist eine Handlungsanweisung und
   soll hervorstechen. Die Messlatte steht am ENDE, direkt vor dem
   Hinweis, und ist eine Einordnung. Sie bekommt deshalb keinen Kasten,
   sondern eine Linie und einen leisen Grund: praesent, aber nicht
   lauter als die Antwort oben. Ein zweiter greller Kasten auf
   derselben Seite haette beide entwertet.
   =========================================================================== */
.fragepage__messlatte{
  margin: 44px 0 0; padding: 26px 30px;
  background: rgba(53,118,122,.05);
  border-left: 3px solid var(--teal);
  border-radius: 0 16px 16px 0;
}
.fragepage__messlatte h2{
  margin: 0 0 14px;
  /* Kleiner als die uebrigen h2 der Seite: Die Messlatte ordnet ein,
     sie eroeffnet keinen neuen Hauptabschnitt. */
  font-size: clamp(21px, 2.3vw, 26px);
}
.fragepage__messlatte p{
  margin: 0 0 14px; font-size: 16.5px; line-height: 1.62;
  color: rgba(15,20,23,.82); text-wrap: pretty;
}
.fragepage__messlatte p:last-child{ margin-bottom: 0; }
/* Das Zitat der fremden Norm bleibt kursiv, bricht aber nicht aus dem
   Kasten aus, wenn eine Fundstelle lang ist. */
.fragepage__messlatte em{ overflow-wrap: break-word; }

@media (max-width: 560px){
  .fragepage__messlatte{ padding: 20px 18px; }
}
.fragepage__konkret li strong{ color: var(--ink); }
.fragepage__konkret li::marker{ color: var(--teal); font-weight: 600; }
@media (max-width: 520px){
  .fragepage__konkret{ padding: 22px 20px; }
}


/* ===========================================================================
   KAPITAELCHEN — Hervorhebung im Register, 24.08.2026

   Im Register wird durch GROSSSCHREIBUNG hervorgehoben. In einer
   Tabellenzeile geht das durch; in einem kursiven Zitat mitten im
   Fliesstext liest es sich als Geschrei. Kapitaelchen behalten jeden
   Buchstaben und nehmen nur die Hoehe zurueck.

   all-small-caps und nicht small-caps: Bei small-caps blieben bereits
   grosse Buchstaben gross — und hier ist das ganze Wort gross.
   Browser ohne Unterstuetzung zeigen es wie bisher.
   =========================================================================== */
.kapitael{
  font-variant-caps: all-small-caps;
  letter-spacing: .045em;
  font-weight: 600;
}


/* ===========================================================================
   LAENDERWAHL an Tabellen mit deutschen Rechtsnormen — 24.08.2026

   Beschlossen am 23.08.2026 als Variante 3 von dreien. Der Leser waehlt
   sein Land und sieht, was dort belegt ist — mit Fundstelle.

   BEWUSST UNTER der Tabelle und nicht darueber: Die Tabelle beantwortet
   die Frage der Seite, die Laenderwahl beantwortet die Rueckfrage. Wer
   sie zuerst sieht, liest die Tabelle nicht mehr.

   Der Kasten ist geschlossen, solange nichts gewaehlt ist — dann steht
   dort nur eine Zeile. Erst die Wahl klappt den Inhalt auf.
   =========================================================================== */
.laenderwahl{ margin: 18px 0 0; }
.laenderwahl__zeile{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-size: 15px; color: rgba(15,20,23,.72);
}
.laenderwahl__zeile label{ font-weight: 500; }
.laenderwahl select{
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(15,20,23,.22); background: #fff;
  max-width: 100%;
}
.laenderwahl select:focus-visible{
  outline: 2px solid var(--teal-lt); outline-offset: 2px;
}

.laenderwahl__ergebnis{
  margin: 16px 0 0; padding: 22px 26px;
  background: var(--cream-2); border: 1px solid rgba(15,20,23,.08);
  border-radius: 16px;
}
.laenderwahl__h{
  font-family: var(--font-heading); font-weight: 400;
  font-size: clamp(19px, 2.1vw, 23px); line-height: 1.2;
  margin: 0 0 16px;
}
.laenderwahl__liste{ margin: 0; display: grid; gap: 16px; }
.laenderwahl__liste dt{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px;
  margin: 0 0 5px;
}
.laenderwahl__achse{ font-weight: 600; font-size: 15.5px; }
/* KEINE eigene Plakette hier. Das Zustandswort traegt .rgstatus und
   rg--over / rg--met / rg--na — dieselben Klassen wie im Register.
   Die erste Fassung dieser Datei hatte eine eigene, graue Plakette;
   weil sie im Stylesheet HINTER rg--over steht, gewann sie die
   Kaskade und loeschte die Unterscheidung GEFUELLT/UMRANDET, die
   auch ohne Farbe traegt. Gemessen am 24.08.2026: Register weiss auf
   Petrol, Laenderwahl grau auf grau. Eine Plakette, eine Stelle. */
.laenderwahl__liste dd{ margin: 0; }
.laenderwahl__liste dd p{
  margin: 0; font-size: 15.5px; line-height: 1.6;
  color: rgba(15,20,23,.8); text-wrap: pretty;
}
.laenderwahl__quelle{
  margin-top: 5px !important; font-family: var(--font-mono);
  font-size: 12.5px !important; color: rgba(15,20,23,.55) !important;
  overflow-wrap: break-word;
}
.laenderwahl__fuss{
  margin: 18px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(15,20,23,.1);
  font-size: 13.5px; line-height: 1.6; color: rgba(15,20,23,.6);
}
.laenderwahl__fuss a{
  color: var(--teal-dk); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid rgba(53,118,122,.35);
}
.laenderwahl__fuss a:hover{ border-bottom-color: var(--teal-dk); }

@media (max-width: 560px){
  .laenderwahl__ergebnis{ padding: 18px 16px; }
}