/* ============================================================
   hoch-und-tiefbau.de — Visuelles System
   Referenz: Baustellen-Absteckung / Vermessungsplan auf Graphit,
   Signalgelb wie eine Warnbake, kondensierte Versalien wie auf
   einem Baustellenschild. Anti-Referenz: helles SaaS-Startup,
   Editorial-Serif, Cream/Beige.
   ============================================================ */

@font-face{font-family:'Barlow Condensed';src:url('/static/fonts/barlow-condensed-600-latin.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow Condensed';src:url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'Barlow Condensed';src:url('/static/fonts/barlow-condensed-800-latin.woff2') format('woff2');font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/static/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/static/fonts/inter-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('/static/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('/static/fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --hue: 245;

  --graphit-900: oklch(0.20 0.028 var(--hue));
  --graphit-800: oklch(0.26 0.028 var(--hue));
  --graphit-700: oklch(0.33 0.026 var(--hue));
  --graphit-600: oklch(0.45 0.022 var(--hue));

  --bg:        oklch(0.985 0.004 var(--hue));
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.965 0.006 var(--hue));
  --ink:       oklch(0.24 0.026 var(--hue));
  --ink-muted: oklch(0.505 0.020 var(--hue));
  --border:    oklch(0.905 0.008 var(--hue));
  --border-str:oklch(0.845 0.010 var(--hue));

  /* Signalgelb: Warnbake / Bauhelm */
  --signal:      oklch(0.83 0.175 88);
  --signal-deep: oklch(0.72 0.165 76);
  --signal-ink:  oklch(0.24 0.05  70);

  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;

  --text-xs:.75rem;
  --text-sm:clamp(.82rem,.8rem + .12vw,.875rem);
  --text-base:clamp(1rem,.97rem + .2vw,1.0625rem);
  --text-lg:clamp(1.15rem,1.05rem + .4vw,1.3rem);
  --text-xl:clamp(1.45rem,1.25rem + .9vw,2rem);
  --text-2xl:clamp(2rem,1.5rem + 2.4vw,3rem);
  --text-3xl:clamp(2.5rem,1.8rem + 4.2vw,4.4rem);

  --measure:64ch;
  --radius:10px;
  --radius-sm:6px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-fast:120ms;--dur:220ms;

  --shadow-lift: 0 1px 2px oklch(0.24 0.03 var(--hue)/.06), 0 8px 24px -8px oklch(0.24 0.03 var(--hue)/.14);
  --shadow-deep: 0 2px 4px oklch(0.20 0.03 var(--hue)/.10), 0 24px 48px -16px oklch(0.20 0.03 var(--hue)/.26);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--text-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--signal-deep);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-weight:700;line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;text-wrap:balance;
}
h1{font-size:var(--text-3xl);font-weight:800}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-lg);letter-spacing:.01em}
p{text-wrap:pretty}

.skip{position:absolute;left:-9999px;top:0;background:var(--signal);color:var(--signal-ink);
  padding:var(--space-3) var(--space-4);font-weight:600;z-index:100}
.skip:focus{left:var(--space-4);top:var(--space-2)}

.wrap{width:100%;max-width:1220px;margin-inline:auto;padding-inline:var(--space-5)}

/* ---------------- Header ---------------- */
.hdr{position:sticky;top:0;z-index:30;background:var(--graphit-900);
  border-bottom:1px solid oklch(1 0 0/.10)}
.hdr-in{max-width:1220px;margin-inline:auto;padding:0 var(--space-5);
  height:70px;display:flex;align-items:center;gap:var(--space-8)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:#fff;flex:0 0 auto}
.brand-mark{color:#fff;display:grid;place-items:center;flex:0 0 auto}
.brand-txt{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.45rem;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.brand-amp{color:var(--signal);margin-inline:.06em}
.brand-txt em{font-style:normal;font-weight:600;opacity:.55}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-1)}
.nav a{font-family:'Barlow Condensed',sans-serif;font-size:1.06rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;color:oklch(1 0 0/.80);
  padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.nav a:hover{color:#fff;background:oklch(1 0 0/.08)}
.nav .nav-cta{background:var(--signal);color:var(--signal-ink);margin-left:var(--space-3)}
.nav .nav-cta:hover{background:#fff;color:var(--graphit-900)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:var(--space-2);
  width:44px;height:44px;flex-direction:column;gap:5px;justify-content:center;align-items:center}
.burger span{display:block;width:24px;height:2.5px;background:#fff;transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast)}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobnav{background:var(--graphit-800);border-bottom:2px solid var(--signal);padding:var(--space-2) var(--space-5) var(--space-4)}
.mobnav a{display:block;padding:var(--space-3) 0;color:#fff;font-family:'Barlow Condensed',sans-serif;
  font-size:1.15rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  border-bottom:1px solid oklch(1 0 0/.10)}
.mobnav a:last-child{border-bottom:0;color:var(--signal)}

/* ---------------- Hero ---------------- */
.hero{position:relative;background:var(--graphit-900);color:#fff;overflow:hidden;
  padding:var(--space-20) 0 var(--space-24);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:60% 55%;
  filter:saturate(.72) contrast(1.04)}
.hero-bg::after{content:'';position:absolute;inset:0;
  background:
    linear-gradient(100deg, oklch(0.20 0.028 var(--hue)/.96) 0%, oklch(0.20 0.028 var(--hue)/.90) 42%,
                            oklch(0.20 0.028 var(--hue)/.62) 68%, oklch(0.20 0.028 var(--hue)/.50) 100%),
    linear-gradient(to top, oklch(0.20 0.028 var(--hue)/.85) 0%, transparent 38%)}
/* Vermessungsraster + Absteck-Achse statt Foto/Gradient */
.hero::before{content:'';position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(oklch(1 0 0/.055) 1px,transparent 1px),
    linear-gradient(90deg,oklch(1 0 0/.055) 1px,transparent 1px),
    linear-gradient(oklch(1 0 0/.10) 1px,transparent 1px),
    linear-gradient(90deg,oklch(1 0 0/.10) 1px,transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px;
  mask-image:radial-gradient(120% 90% at 22% 30%,#000 20%,transparent 78%);
  pointer-events:none}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;z-index:2;
  background:repeating-linear-gradient(135deg,var(--signal) 0 22px,var(--graphit-900) 22px 44px)}
.hero-in{position:relative;z-index:3;max-width:1220px;margin-inline:auto;padding-inline:var(--space-5)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--space-16);align-items:start}

.hero h1{font-size:var(--text-3xl);max-width:16ch}
.hero h1 .hl{color:var(--signal)}
.hero-lead{margin-top:var(--space-5);font-size:var(--text-lg);color:oklch(1 0 0/.76);max-width:52ch;line-height:1.5}
.hero-lead b{color:#fff;font-weight:600}

/* Suche */
.search{margin-top:var(--space-8);background:var(--surface);border-radius:var(--radius);
  padding:var(--space-3);box-shadow:var(--shadow-deep);display:grid;
  grid-template-columns:minmax(0,1.35fr) 1px minmax(0,1fr) auto;gap:var(--space-2);align-items:stretch}
.search-field{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3)}
.search-field svg{flex:0 0 auto;color:var(--ink-muted)}
.search-field label{position:absolute;left:-9999px}
.search-field input{border:0;outline:0;background:none;width:100%;font-size:1.02rem;color:var(--ink);padding:var(--space-2) 0}
.search-field input::placeholder{color:var(--ink-muted)}
.search-sep{background:var(--border);width:1px;margin:var(--space-2) 0}
.search-btn{background:var(--graphit-900);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-6);font-family:'Barlow Condensed',sans-serif;font-size:1.1rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  transition:background var(--dur-fast) var(--ease-out)}
.search-btn:hover{background:var(--signal);color:var(--signal-ink)}

/* Autocomplete */
.ac{position:relative}
.ac-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-deep);
  max-height:322px;overflow-y:auto;padding:var(--space-2)}
.ac-list[hidden]{display:none}
.ac-item{display:flex;align-items:baseline;gap:var(--space-3);width:100%;text-align:left;
  background:none;border:0;padding:var(--space-3);border-radius:var(--radius-sm);color:var(--ink)}
.ac-item:hover,.ac-item[aria-selected=true]{background:var(--surface-2)}
.ac-item b{font-weight:600}
.ac-item mark{background:oklch(0.88 0.15 90);color:var(--signal-ink);padding:0 1px;border-radius:2px}
.ac-item span{margin-left:auto;font-size:var(--text-xs);color:var(--ink-muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ac-empty{padding:var(--space-4);color:var(--ink-muted);font-size:var(--text-sm)}

.chips{margin-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.chips .chips-lbl{font-size:var(--text-sm);color:oklch(1 0 0/.55);margin-right:var(--space-1)}
.chip{display:inline-flex;align-items:center;gap:.4rem;
  background:oklch(1 0 0/.09);border:1px solid oklch(1 0 0/.16);color:oklch(1 0 0/.90);
  border-radius:999px;padding:.34rem .85rem .34rem .7rem;font-size:var(--text-sm);font-weight:500;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.chip svg{color:var(--signal);flex:0 0 auto}
.chip:hover{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.chip:hover svg{color:var(--signal-ink)}

/* Kennzahlen-Tafel (Baustellenschild) */
.plate{background:var(--graphit-800);border:1px solid oklch(1 0 0/.13);border-radius:var(--radius);
  overflow:hidden}
.plate-hd{background:var(--signal);color:var(--signal-ink);padding:var(--space-3) var(--space-5);
  font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.95rem;display:flex;justify-content:space-between;align-items:center}
.plate-hd .dot{width:8px;height:8px;border-radius:50%;background:var(--signal-ink);opacity:.5}
.plate-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid oklch(1 0 0/.09)}
.plate-row:last-child{border-bottom:0}
.plate-row dt{color:oklch(1 0 0/.62);font-size:var(--text-sm)}
.plate-row dd{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.7rem;
  line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.plate-note{padding:var(--space-4) var(--space-5);background:oklch(1 0 0/.04);
  font-size:var(--text-xs);color:oklch(1 0 0/.55);line-height:1.5}

/* ---------------- Sektionen ---------------- */
section{padding-block:var(--space-20);scroll-margin-top:86px}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);
  margin-bottom:var(--space-10);padding-bottom:var(--space-4);border-bottom:2px solid var(--ink)}
.sec-hd p{color:var(--ink-muted);max-width:46ch;margin-top:var(--space-2)}
.sec-hd .more{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.05rem;white-space:nowrap;padding-bottom:2px;
  border-bottom:2px solid var(--signal)}
.sec-hd .more:hover{color:var(--signal-deep)}

/* Kategorien: bewusst ungleiche Kacheln, Nummer + Gewerkeliste statt Icon+Absatz */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--space-5)}
.cat{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.cat-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphit-800)}
.cat-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.78);
  transition:transform var(--dur-slow,420ms) var(--ease-out),filter var(--dur) var(--ease-out)}
.cat:hover .cat-img img{transform:scale(1.045);filter:saturate(.95)}
.cat-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,oklch(0.20 0.028 var(--hue)/.55),transparent 55%)}
.cat-body{padding:var(--space-5) var(--space-6) var(--space-6);display:flex;flex-direction:column;flex:1}
.cat:hover{border-color:var(--graphit-900);transform:translateY(-3px)}
.cat::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--signal);
  z-index:2;opacity:0;transition:opacity var(--dur) var(--ease-out)}
.cat:hover::before{opacity:1}
.cat-n{position:absolute;left:var(--space-4);bottom:var(--space-4);z-index:1;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--signal-ink);
  background:var(--signal);border-radius:3px;padding:.22rem .6rem;white-space:nowrap}
.cat h3{font-size:1.5rem;line-height:1.04}
.cat-body > p{color:var(--ink-muted);font-size:var(--text-sm);margin-top:var(--space-2);line-height:1.55}
.cat-list{margin-top:auto;padding-top:var(--space-5);display:flex;flex-wrap:wrap;gap:var(--space-2)}
.cat-list span{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--text-xs);
  color:var(--ink-muted);white-space:nowrap;background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.24rem .62rem}
.cat-list svg{color:var(--graphit-600);flex:0 0 auto}
.cat:hover .cat-list span{border-color:var(--border-str)}


/* Top-Gewerke: Tabelle im Stil einer Massenliste */
.toplist{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.toplist-r{display:grid;grid-template-columns:2.2rem 2rem minmax(0,1fr) auto;gap:var(--space-3);
  align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border);
  transition:background var(--dur-fast) var(--ease-out)}
.toplist-r:last-child{border-bottom:0}
.toplist-r:hover{background:var(--surface-2)}
.toplist-r .num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.15rem;
  color:var(--border-str);font-variant-numeric:tabular-nums;text-align:right}
.toplist-r:hover .num{color:var(--signal-deep)}
.toplist-r .tico{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--graphit-700);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.toplist-r .tico svg{width:17px;height:17px}
.toplist-r:hover .tico{background:var(--graphit-900);color:var(--signal)}
.toplist-r .nm{font-weight:600;min-width:0}
.toplist-r .nm small{display:block;font-weight:400;color:var(--ink-muted);font-size:var(--text-xs);margin-top:2px}
.toplist-r .go{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.03em;color:var(--ink-muted);white-space:nowrap}
.toplist-r:hover .go{color:var(--ink)}
.toplist-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}

/* Ablauf: 3 Schritte als abgesteckte Achse, keine Karten */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);
  counter-reset:s;position:relative}
.steps::before{content:'';position:absolute;top:26px;left:6%;right:6%;height:2px;
  background:repeating-linear-gradient(90deg,var(--border-str) 0 8px,transparent 8px 16px)}
.step{position:relative}
.step-n{counter-increment:s;width:54px;height:54px;border-radius:50%;background:var(--graphit-900);
  color:var(--signal);display:grid;place-items:center;font-family:'Barlow Condensed',sans-serif;
  font-weight:800;font-size:1.6rem;position:relative;z-index:1;border:4px solid var(--bg)}
.step-n::before{content:counter(s)}
.step h3{margin-top:var(--space-5);font-size:1.35rem}
.step p{margin-top:var(--space-2);color:var(--ink-muted);font-size:var(--text-sm);line-height:1.6}

/* Preis-Tafeln */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);align-items:start}
.tier{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}
.tier--hl{background:var(--graphit-900);border-color:var(--graphit-900);color:#fff;
  box-shadow:var(--shadow-lift)}
.tier-nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:1.05rem;display:flex;align-items:center;gap:var(--space-3)}
.tier--hl .tier-nm{color:var(--signal)}
.tier-badge{background:var(--signal);color:var(--signal-ink);font-size:.65rem;letter-spacing:.08em;
  padding:.16rem .5rem;border-radius:3px}
.tier-price{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.6rem;line-height:1;
  font-variant-numeric:tabular-nums}
.tier-price sup{font-size:1.1rem;font-weight:600;vertical-align:top}
.tier-price small{display:block;font-family:'Inter',sans-serif;font-size:var(--text-xs);
  font-weight:400;color:var(--ink-muted);margin-top:var(--space-2);text-transform:none;letter-spacing:0}
.tier--hl .tier-price small{color:oklch(1 0 0/.60)}
.tier ul{list-style:none;padding:0;display:grid;gap:var(--space-2);font-size:var(--text-sm)}
.tier li{display:flex;gap:var(--space-3);align-items:flex-start;line-height:1.5}
.tier li::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-top:3px;border-radius:3px;
  background:var(--signal);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tier li.no{color:var(--ink-muted)}
.tier li.no::before{background:var(--border-str);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tier .btn{margin-top:auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  background:var(--graphit-900);color:#fff;border:0;border-radius:var(--radius-sm);
  padding:var(--space-4) var(--space-6);font-family:'Barlow Condensed',sans-serif;font-size:1.08rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.btn:hover{background:var(--signal);color:var(--signal-ink)}
.btn--signal{background:var(--signal);color:var(--signal-ink)}
.btn--signal:hover{background:#fff;color:var(--graphit-900)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border-str)}
.btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Orte */
.sec--alt{background:var(--surface-2);border-block:1px solid var(--border)}
.orte{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-2) var(--space-3)}
.orte a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);font-weight:500;font-size:var(--text-sm);
  transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.orte a:hover{border-color:var(--graphit-900)}
.orte a svg{color:var(--border-str);flex:0 0 auto;transition:color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.orte a:hover svg{color:var(--signal-deep);transform:translateX(2px)}

/* CTA-Band */
.band{background:var(--graphit-900);color:#fff;position:relative;overflow:hidden}
.band::after{content:'';position:absolute;top:0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(135deg,var(--signal) 0 22px,var(--graphit-900) 22px 44px)}
.band-in{max-width:1220px;margin-inline:auto;padding:var(--space-20) var(--space-5) var(--space-16);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-10);align-items:center}
.band h2{color:#fff;max-width:24ch}
.band p{color:oklch(1 0 0/.72);margin-top:var(--space-4);max-width:50ch}
.band-act{display:flex;gap:var(--space-3);flex-wrap:wrap}
.band .btn--ghost{color:#fff;border-color:oklch(1 0 0/.35)}
.band .btn--ghost:hover{background:#fff;color:var(--graphit-900);border-color:#fff}

/* Vertrauens-Leiste */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.fact{background:var(--surface);padding:var(--space-5) var(--space-5)}
.fact b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.1rem;
  line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:var(--space-2);font-size:var(--text-sm);color:var(--ink-muted)}

/* ---------------- Footer ---------------- */
.ftr{background:var(--graphit-900);color:oklch(1 0 0/.70);padding-top:var(--space-16)}
.ftr-in{max-width:1220px;margin-inline:auto;padding:0 var(--space-5) var(--space-12);
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--space-10)}
.ftr-brand .brand-txt{color:#fff;font-size:1.35rem}
.ftr-brand p{margin-top:var(--space-4);font-size:var(--text-sm);line-height:1.6;max-width:38ch}
.ftr-col h3{color:#fff;font-size:.95rem;letter-spacing:.07em;margin-bottom:var(--space-4)}
.ftr-col a{display:block;padding:var(--space-1) 0;font-size:var(--text-sm);
  transition:color var(--dur-fast) var(--ease-out)}
.ftr-col a:hover{color:var(--signal)}
.ftr-btm{border-top:1px solid oklch(1 0 0/.11)}
.ftr-btm{max-width:1220px;margin-inline:auto;padding:var(--space-5);display:flex;
  justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs);flex-wrap:wrap}

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-10)}
  .plate{max-width:520px}
  .toplist-cols{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr 1fr;gap:var(--space-8)}
  .facts{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .tiers{grid-template-columns:1fr;max-width:520px}
  .steps{grid-template-columns:1fr;gap:var(--space-8)}
  .steps::before{display:none}
  .band-in{grid-template-columns:1fr;padding-block:var(--space-16) var(--space-12)}
}
@media (max-width:720px){
  .toplist-r{grid-template-columns:1.7rem 1.9rem minmax(0,1fr) auto;padding:var(--space-4) var(--space-3);gap:var(--space-2)}
  .toplist-r .go{font-size:0;letter-spacing:0}
  .toplist-r .go::after{content:'→';font-size:1.15rem;letter-spacing:0}
  .sec-hd .more{font-size:.98rem}
  section{padding-block:var(--space-12)}
  .hero{padding:var(--space-12) 0 var(--space-16)}
  .search{grid-template-columns:1fr;padding:var(--space-3)}
  .search-sep{width:auto;height:1px;margin:0 var(--space-3)}
  .search-btn{padding:var(--space-4)}
  .sec-hd{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .cats{grid-template-columns:1fr}
  .ftr-in{grid-template-columns:1fr}
  .orte{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .facts{grid-template-columns:1fr}
  .brand-txt{font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ============================================================
   Unterseiten
   ============================================================ */
.page-hd{background:var(--surface);border-bottom:1px solid var(--border);
  padding:var(--space-8) 0 var(--space-10);position:relative}
.page-hd--img{background:var(--graphit-900);color:#fff;border-bottom:0;
  padding:var(--space-12) 0 var(--space-12);overflow:hidden;isolation:isolate}
.page-hd-bg{position:absolute;inset:0;z-index:0}
.page-hd-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.page-hd-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,oklch(0.20 0.028 var(--hue)/.95),oklch(0.20 0.028 var(--hue)/.72))}
.page-hd--img .wrap{position:relative;z-index:1}
.page-hd--img .crumb a,.page-hd--img .crumb span{color:oklch(1 0 0/.72)}
.page-hd--img .crumb a:hover{color:var(--signal)}
.page-hd--img .lead{color:oklch(1 0 0/.8)}
.page-hd h1{margin-top:var(--space-3);font-size:var(--text-2xl)}
.page-hd .lead{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--ink-muted);max-width:62ch;line-height:1.5}
.page-hd-row{display:flex;gap:var(--space-5);align-items:flex-start}
.page-hd-ico{flex:0 0 auto;display:grid;place-items:center;width:60px;height:60px;
  border-radius:var(--radius);background:var(--graphit-900);color:var(--signal);margin-top:var(--space-2)}
.page-hd-facts{margin-top:var(--space-4);font-size:var(--text-sm);color:oklch(1 0 0/.78)}
.page-hd-facts b{color:var(--signal)}

.crumb{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  font-size:var(--text-sm);color:var(--ink-muted)}
.crumb a{color:var(--ink-muted)}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.crumb [aria-current]{color:var(--ink);font-weight:500}

.sec-split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--space-12);
  align-items:start;padding-block:var(--space-12)}
.side{display:flex;flex-direction:column;gap:var(--space-5);position:sticky;top:90px}

.jump{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-10);
  padding-bottom:var(--space-5);border-bottom:1px solid var(--border)}
.jump a{font-size:var(--text-sm);background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:.3rem .8rem;color:var(--ink-muted)}
.jump a:hover{border-color:var(--graphit-900);color:var(--ink)}

.gsec{margin-bottom:var(--space-12);scroll-margin-top:90px}
.gsec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  padding-bottom:var(--space-3);border-bottom:2px solid var(--ink);margin-bottom:var(--space-4)}
.gsec-hd h2{font-size:var(--text-xl)}
.gsec-n{font-size:var(--text-sm);color:var(--ink-muted);white-space:nowrap}
.gsec-desc{color:var(--ink-muted);font-size:var(--text-sm);margin-bottom:var(--space-5)}
.glist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-2)}
.glist a{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.glist a:hover{border-color:var(--graphit-900);transform:translateX(2px)}
.glist-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--graphit-700);flex:0 0 auto}
.glist a:hover .glist-ico{background:var(--graphit-900);color:var(--signal)}
.glist-nm{font-weight:500;font-size:var(--text-sm);min-width:0}
.glist-n{margin-left:auto;font-size:var(--text-xs);color:var(--ink-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.glist-n--leer{opacity:.55}
.glist--gross a{padding:var(--space-4) var(--space-5)}
.glist--gross .glist-nm{font-size:var(--text-base)}

.othercats{margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--border)}
.othercats-list{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5)}
.othercats-list a{background:var(--surface);border:1px solid var(--border);border-radius:999px;
  padding:.4rem .9rem;font-size:var(--text-sm)}
.othercats-list a:hover{border-color:var(--graphit-900)}
.othercats-list small{color:var(--ink-muted);margin-left:.35rem}

.orte--eng a{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}

/* Firmenkarten */
.fcards{display:grid;gap:var(--space-4)}
.fcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);transition:border-color var(--dur-fast) var(--ease-out)}
.fcard:hover{border-color:var(--border-str)}
.fcard--vip{border-color:var(--signal);border-width:2px;padding:calc(var(--space-5) - 1px)}
.fcard--pro{border-left:none;box-shadow:var(--shadow-lift)}
.fcard-hd{display:flex;align-items:flex-start;gap:var(--space-4)}
.fcard-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--graphit-900);color:var(--signal);flex:0 0 auto}
/* VIP zeigt das eigene Logo statt des Gewerke-Icons — der sichtbarste
   Unterschied zwischen den Stufen und deshalb ein Verkaufsargument. */
/* Höhe fest, Breite frei: Wortmarken sind quer, Bildmarken hoch — ein
   starres Quadrat würde Querlogos auf Briefmarkengröße schrumpfen. */
.fcard-logo{display:grid;place-items:center;height:64px;width:auto;min-width:58px;
  max-width:132px;flex:0 0 auto;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:6px}
.fcard-logo img{max-width:100%;max-height:52px;width:auto;height:auto;object-fit:contain}
.fcard-tt{flex:1;min-width:0}
.fcard-tt h3{font-size:1.25rem;text-transform:none;letter-spacing:0;font-family:'Inter',sans-serif;font-weight:650}
.fcard-tt h3 a:hover{color:var(--signal-deep)}
.fcard-meta{font-size:var(--text-sm);color:var(--ink-muted);margin-top:2px}
.fcard-rating{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-3);font-size:var(--text-sm)}
.fcard-rating span{color:var(--ink-muted)}
.fcard-desc{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--ink-muted);line-height:1.55}
.fcard-tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}
.fcard-tags li{font-size:var(--text-xs);background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:.18rem .6rem;color:var(--ink-muted)}
.fcard-ft{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;
  margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--border)}
.fbtn{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--text-sm);font-weight:500;
  border:1px solid var(--border-str);border-radius:var(--radius-sm);padding:.4rem .8rem}
.fbtn:hover{border-color:var(--graphit-900);background:var(--surface-2)}
.fbtn--tel{background:var(--graphit-900);color:#fff;border-color:var(--graphit-900)}
.fbtn--tel:hover{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.fbtn--go{margin-left:auto;border:0;color:var(--ink-muted)}
.fbtn--go:hover{background:none;color:var(--ink)}
.fcard-hint{font-size:var(--text-xs);color:var(--ink-muted);font-style:italic}

.tbadge{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.07em;padding:.16rem .5rem;border-radius:3px;flex:0 0 auto;
  background:var(--surface-2);color:var(--ink-muted)}
.tbadge--pro{background:var(--graphit-900);color:var(--signal)}
.tbadge--vip{background:var(--signal);color:var(--signal-ink)}
.vbadge{font-size:var(--text-xs);color:oklch(0.5 0.13 150);font-weight:600}

.stars{display:inline-flex;gap:1px;vertical-align:-2px}
.stars svg.on{fill:var(--signal-deep)}
.stars svg.off{fill:var(--border-str)}

.leerbox{background:var(--surface-2);border:1px dashed var(--border-str);border-radius:var(--radius);
  padding:var(--space-6)}
.leerbox p{color:var(--ink-muted);max-width:60ch}
.leerbox-act{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
.hinweis{background:oklch(0.97 0.03 88);border:1px solid oklch(0.88 0.09 88);
  border-radius:var(--radius);padding:var(--space-4) var(--space-5);font-size:var(--text-sm);
  margin-bottom:var(--space-6)}
.hinweis a{font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Sidebar */
.sidebox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5)}
.sidebox h3{font-size:1.05rem;letter-spacing:.03em;margin-bottom:var(--space-4)}
.sidebox--dark{background:var(--graphit-900);color:#fff;border-color:var(--graphit-900)}
.sidebox--dark h3{color:var(--signal)}
.sidebox--dark p{color:oklch(1 0 0/.75);font-size:var(--text-sm);margin-bottom:var(--space-4)}
.sidebox--kontakt .btn{width:100%;margin-top:var(--space-4)}
.sidelist{list-style:none;padding:0;display:grid;gap:1px}
.sidelist a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;
  font-size:var(--text-sm);color:var(--ink-muted)}
.sidelist a:hover{color:var(--ink)}
.sidelist svg{color:var(--graphit-600);flex:0 0 auto}
.sidebox-more{display:inline-block;margin-top:var(--space-4);font-size:var(--text-sm);
  font-weight:600;border-bottom:2px solid var(--signal);padding-bottom:1px}
.sidefacts,.kontakt{display:grid;gap:var(--space-3)}
.sidefacts > div,.kontakt > div{display:flex;justify-content:space-between;gap:var(--space-4);
  font-size:var(--text-sm);padding-bottom:var(--space-3);border-bottom:1px solid var(--border)}
.sidefacts > div:last-child,.kontakt > div:last-child{border-bottom:0;padding-bottom:0}
.sidefacts dt,.kontakt dt{color:var(--ink-muted)}
.sidefacts dd,.kontakt dd{font-weight:500;text-align:right}
.kontakt a:hover{color:var(--signal-deep);text-decoration:underline}

/* Anfrageformular */
.anfrage{background:var(--graphit-900);color:#fff;border-radius:var(--radius);padding:var(--space-5)}
.anfrage h3{color:var(--signal);font-size:1.1rem;margin-bottom:var(--space-2)}
.anfrage-lead{font-size:var(--text-sm);color:oklch(1 0 0/.72);margin-bottom:var(--space-4)}
.anfrage-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.anfrage label,.anfrage-msg{display:block;font-size:var(--text-xs);color:oklch(1 0 0/.72);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.anfrage-msg{margin-top:var(--space-3)}
.anfrage input,.anfrage textarea{width:100%;margin-top:.3rem;background:oklch(1 0 0/.07);
  border:1px solid oklch(1 0 0/.18);border-radius:var(--radius-sm);padding:.55rem .7rem;
  color:#fff;font:inherit;font-size:var(--text-sm);text-transform:none;letter-spacing:0}
.anfrage input:focus,.anfrage textarea:focus{outline:2px solid var(--signal);outline-offset:1px;
  background:oklch(1 0 0/.12)}
.anfrage .btn{width:100%;margin-top:var(--space-4)}
.anfrage-note{font-size:var(--text-xs);color:oklch(1 0 0/.5);margin-top:var(--space-3);
  text-transform:none;letter-spacing:0;line-height:1.5}

/* Anfrage-Quiz (Gewerkeseiten) — dunkle Karte wie .anfrage, aber
   schrittweise. Radios sind als klickbare Flächen gestaltet, weil die
   Auswahl auf dem Smartphone der Hauptbedienweg ist. */
.quiz{background:var(--graphit-900);color:#fff;border-radius:var(--radius);
  padding:var(--space-5)}
.quiz-hd h3{color:var(--signal);font-size:1.1rem;margin-bottom:var(--space-2)}
.quiz-lead{font-size:var(--text-sm);color:oklch(1 0 0/.72);line-height:1.5}
.quiz-fort{margin:var(--space-4) 0 var(--space-5)}
.quiz-fort-bar{height:4px;background:oklch(1 0 0/.15);border-radius:2px;overflow:hidden}
.quiz-fort-bar span{display:block;height:100%;background:var(--signal);
  transition:width .25s ease}
.quiz-fort-txt{font-size:var(--text-xs);color:oklch(1 0 0/.5);margin-top:.4rem}
.quiz-fort-txt b{color:oklch(1 0 0/.8)}
.quiz-step{border:0;padding:0;margin:0}
.quiz-step legend{font-size:1rem;font-weight:600;color:#fff;line-height:1.35;
  margin-bottom:var(--space-4);padding:0}
.quiz-opt{font-size:var(--text-xs);color:oklch(1 0 0/.45);font-weight:400;
  text-transform:none;letter-spacing:0}
.quiz-wahl{display:grid;gap:.5rem}
.quiz-radio{display:flex;align-items:center;gap:.65rem;cursor:pointer;
  background:oklch(1 0 0/.06);border:1px solid oklch(1 0 0/.16);
  border-radius:var(--radius-sm);padding:.7rem .85rem;font-size:var(--text-sm);
  line-height:1.35;transition:background .15s,border-color .15s}
.quiz-radio:hover{background:oklch(1 0 0/.11);border-color:oklch(1 0 0/.3)}
.quiz-radio input{appearance:none;flex:0 0 auto;width:18px;height:18px;
  border:2px solid oklch(1 0 0/.4);border-radius:50%;margin:0;cursor:pointer}
.quiz-radio input:checked{border-color:var(--signal);
  box-shadow:inset 0 0 0 4px var(--signal)}
.quiz-radio:has(input:checked){background:oklch(1 0 0/.14);border-color:var(--signal)}
.quiz-radio input:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.quiz-zahl{display:flex;align-items:center;gap:.6rem}
.quiz-zahl input{flex:1;min-width:0}
.quiz-einheit{font-size:var(--text-sm);color:oklch(1 0 0/.6);white-space:nowrap}
.quiz-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.quiz label:not(.quiz-radio){display:block;font-size:var(--text-xs);
  color:oklch(1 0 0/.72);text-transform:uppercase;letter-spacing:.05em;
  font-weight:600}
.quiz-msg{margin-top:var(--space-3)}
.quiz input:not([type=radio]),.quiz textarea,.quiz select{width:100%;margin-top:.3rem;
  background:oklch(1 0 0/.07);border:1px solid oklch(1 0 0/.18);
  border-radius:var(--radius-sm);padding:.55rem .7rem;color:#fff;font:inherit;
  font-size:var(--text-sm);text-transform:none;letter-spacing:0}
.quiz select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,oklch(1 0 0/.5) 50%),linear-gradient(135deg,oklch(1 0 0/.5) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem}
.quiz select option{background:var(--graphit-900);color:#fff}
.quiz input:not([type=radio]):focus,.quiz textarea:focus,.quiz select:focus{outline:2px solid var(--signal);
  outline-offset:1px;background:oklch(1 0 0/.12)}
.quiz-nav{display:flex;gap:.6rem;align-items:center;margin-top:var(--space-5)}
.quiz-nav .btn{flex:1;margin:0}
/* Weiter: heller Rahmen auf dunkler Karte. btn--ghost waere hier
   unsichtbar, weil es dunklen Text (--ink) fuer helle Flaechen setzt. */
.quiz-next{flex:1;background:oklch(1 0 0/.08);border:1.5px solid oklch(1 0 0/.35);
  color:#fff;border-radius:var(--radius-sm);padding:.7rem 1rem;font:inherit;
  font-weight:600;font-size:var(--text-sm);cursor:pointer;
  transition:background .15s,border-color .15s}
.quiz-next:hover{background:oklch(1 0 0/.16);border-color:var(--signal);
  color:var(--signal)}
.quiz-back{background:none;border:1px solid oklch(1 0 0/.25);color:oklch(1 0 0/.7);
  border-radius:var(--radius-sm);padding:.6rem .9rem;font:inherit;
  font-size:var(--text-sm);cursor:pointer}
.quiz-back:hover{border-color:oklch(1 0 0/.45);color:#fff}
.quiz-note{font-size:var(--text-xs);color:oklch(1 0 0/.5);margin-top:var(--space-3);
  text-transform:none;letter-spacing:0;line-height:1.5}
.quiz-note a{color:oklch(1 0 0/.7);text-decoration:underline}
@media (max-width:520px){
  .quiz-grid2{grid-template-columns:1fr}
}

/* Firmenprofil */
.firm-hd{display:flex;gap:var(--space-5);align-items:flex-start;margin-top:var(--space-4)}
.firm-logo{height:84px;width:auto;max-width:200px;object-fit:contain;background:#fff;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);flex:0 0 auto}
.firm-ico{display:grid;place-items:center;width:70px;height:70px;border-radius:var(--radius);
  background:var(--graphit-900);color:var(--signal);flex:0 0 auto}
.firm-hd-tt h1{font-size:var(--text-2xl)}
.firm-sub{margin-top:var(--space-2);color:var(--ink-muted);font-size:var(--text-base)}
.firm-sub a:hover{color:var(--signal-deep);text-decoration:underline}
.firm-badges{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-3)}
.firm-rating{display:flex;align-items:center;gap:.4rem;font-size:var(--text-sm);color:var(--ink-muted)}
.firm-hero{width:100%;border-radius:var(--radius);margin-bottom:var(--space-6)}
.prosebox{margin-bottom:var(--space-8)}
.prosebox h2{font-size:var(--text-xl);padding-bottom:var(--space-3);
  border-bottom:2px solid var(--ink);margin-bottom:var(--space-4)}
.prosebox p{margin-bottom:var(--space-3);color:var(--ink)}
.leistungen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-2)}
.leistungen li{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--text-sm)}
.leistungen li::before{content:'';width:15px;height:15px;flex:0 0 auto;margin-top:3px;background:var(--signal);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)}
.galerie img{border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover}

.reviews{list-style:none;padding:0;display:grid;gap:var(--space-4)}
.reviews > li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4) var(--space-5)}
.review-hd{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-sm)}
.review-hd time{margin-left:auto;color:var(--ink-muted);font-size:var(--text-xs)}
.review-tt{font-weight:600;margin-top:var(--space-2)}
.review-reply{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--surface-2);
  border-radius:var(--radius-sm);font-size:var(--text-sm)}
.review-reply b{display:block;margin-bottom:.2rem;font-size:var(--text-xs);
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-muted)}
.revform{margin-top:var(--space-6);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-5)}
.revform h3{margin-bottom:var(--space-4)}
.revform label{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);font-weight:600;margin-bottom:var(--space-3)}
.revform input,.revform select,.revform textarea{width:100%;margin-top:.3rem;border:1px solid var(--border-str);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:var(--text-sm);
  text-transform:none;letter-spacing:0;background:var(--surface)}
.revform-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}

.muted{color:var(--ink-muted);font-size:var(--text-sm)}
.muted a{text-decoration:underline;text-underline-offset:2px}

/* Tariftabelle */
.ttab-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.ttab{width:100%;border-collapse:collapse;min-width:720px;font-size:var(--text-sm)}
.ttab th,.ttab td{padding:var(--space-3) var(--space-4);text-align:center;border-bottom:1px solid var(--border)}
.ttab thead th{vertical-align:bottom;padding-block:var(--space-5);background:var(--surface-2);position:relative}
.ttab thead th.is-hl{background:var(--graphit-900);color:#fff}
.ttab thead th.is-aktiv{background:oklch(0.96 0.04 88)}
.ttab-lbl{text-align:left!important;min-width:230px}
.ttab-nm{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.04em}
.ttab thead th.is-hl .ttab-nm{color:var(--signal)}
.ttab-preis{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:1.8rem;
  line-height:1.1;margin-top:.2rem;font-variant-numeric:tabular-nums}
.ttab-per{display:block;font-size:var(--text-xs);color:var(--ink-muted);font-weight:400;margin-top:.15rem}
.ttab thead th.is-hl .ttab-per{color:oklch(1 0 0/.6)}
.ttab-tag{display:inline-block;margin-top:var(--space-2);background:var(--signal);color:var(--signal-ink);
  font-size:.65rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:.16rem .5rem;border-radius:3px}
.ttab tbody th{text-align:left;font-weight:500;font-family:'Inter',sans-serif;text-transform:none;
  letter-spacing:0;font-size:var(--text-sm);color:var(--ink)}
.ttab tbody td.is-hl{background:oklch(0.975 0.008 var(--hue))}
.ttab .ja{color:oklch(0.55 0.15 150);font-weight:700;font-size:1.05rem}
.ttab .nein{color:var(--border-str);font-weight:700}
.ttab .wert{font-weight:500}
.ttab-cta td{padding-block:var(--space-5)}
.ttab-cta .btn{width:100%;font-size:.95rem;padding:var(--space-3) var(--space-4)}

/* Preis-Auswahlkarten */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.pcard{position:relative;display:flex;flex-direction:column;gap:var(--space-3);cursor:pointer;
  background:var(--surface);border:2px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.pcard:hover{border-color:var(--border-str);transform:translateY(-2px)}
.pcard.is-sel{border-color:var(--signal);background:oklch(0.99 0.02 88)}
.pcard.is-hl{border-color:var(--graphit-900)}
.pcard.is-hl.is-sel{border-color:var(--signal)}
.pcard input{position:absolute;opacity:0;pointer-events:none}
.pcard-hd{display:flex;align-items:center;gap:var(--space-3)}
.pcard-hd b{font-family:'Barlow Condensed',sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em}
.pcard-hd em{font-style:normal;background:var(--signal);color:var(--signal-ink);font-size:.65rem;
  letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:.16rem .5rem;border-radius:3px}
.pcard-preis{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.2rem;line-height:1;
  font-variant-numeric:tabular-nums}
.pcard-preis small{display:block;font-family:'Inter',sans-serif;font-size:var(--text-xs);
  font-weight:400;color:var(--ink-muted);margin-top:.25rem}
.pcard-claim{font-size:var(--text-sm);color:var(--ink-muted);line-height:1.5}
.pcard-facts{display:grid;gap:.3rem;font-size:var(--text-xs);color:var(--ink-muted);
  padding-top:var(--space-3);border-top:1px solid var(--border)}
.pcard-facts .ja{color:oklch(0.5 0.15 150);font-weight:600}
.pcard-facts .nein{opacity:.7}
.pcard-btn{margin-top:auto;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;background:var(--surface-2);border-radius:var(--radius-sm);
  padding:var(--space-3)}
.pcard.is-sel .pcard-btn{background:var(--signal);color:var(--signal-ink)}
.vergleich{margin-top:var(--space-6)}
.vergleich summary{cursor:pointer;font-weight:600;font-size:var(--text-sm);padding:var(--space-3) 0}
.vergleich summary:hover{color:var(--signal-deep)}
.vergleich .ttab-wrap{margin-top:var(--space-4)}

.stepline{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-6)}
.stepline li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--ink-muted)}
.stepline span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-str);font-weight:700;font-size:var(--text-xs)}
.stepline .is-now{color:var(--ink);font-weight:600}
.stepline .is-now span{background:var(--graphit-900);color:var(--signal);border-color:var(--graphit-900)}
.stepline .is-done span{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}

/* Große Formulare */
.bigform{max-width:900px}
.bigform fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-6);
  margin-bottom:var(--space-5);background:var(--surface)}
.bigform fieldset[disabled]{opacity:.45}
.bigform legend{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:1.05rem;padding-inline:var(--space-2)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.fgrid--eng{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.fspan{grid-column:1/-1}
.bigform label{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);font-weight:600;margin-bottom:var(--space-4)}
.bigform fieldset > label:last-child{margin-bottom:0}
.bigform input,.bigform select,.bigform textarea{width:100%;margin-top:.35rem;
  border:1px solid var(--border-str);border-radius:var(--radius-sm);padding:.6rem .75rem;
  font:inherit;font-size:var(--text-base);text-transform:none;letter-spacing:0;
  color:var(--ink);background:var(--surface)}
.bigform input:focus,.bigform select:focus,.bigform textarea:focus{outline:2px solid var(--signal-deep);outline-offset:1px}
.bigform small{display:block;margin-top:.35rem;font-size:var(--text-xs);color:var(--ink-muted);
  text-transform:none;letter-spacing:0;font-weight:400}
.req{color:var(--signal-deep)}
.bigform-ft{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-top:var(--space-6)}
.bigform-note{font-size:var(--text-xs);color:var(--ink-muted);flex:1;min-width:260px;line-height:1.55}
.bigform button[disabled]{opacity:.45;cursor:not-allowed}

.radiocards{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.radiocard{display:flex!important;align-items:flex-start;gap:var(--space-3);cursor:pointer;
  border:1px solid var(--border-str);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important;margin-bottom:0!important}
.radiocard:has(input:checked){border-color:var(--signal);background:oklch(0.99 0.02 88)}
.radiocard input{width:auto!important;margin-top:.3rem!important}
.radiocard b{display:block;font-size:var(--text-base)}
.radiocard small{margin-top:.1rem}

.suchbox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5)}
.suchbox label{display:block;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-muted);font-weight:600;margin-bottom:var(--space-2)}
.suchbox-row{display:flex;gap:var(--space-2)}
.suchbox input{flex:1;border:1px solid var(--border-str);border-radius:var(--radius-sm);
  padding:.65rem .8rem;font:inherit}
.trefferliste{list-style:none;padding:0;display:grid;gap:var(--space-2);margin-top:var(--space-6)}
.trefferliste li{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4)}
.tl-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--graphit-700);flex:0 0 auto}
.tl-tt{flex:1;min-width:0}
.tl-tt small{display:block;color:var(--ink-muted);font-size:var(--text-xs);margin-top:1px}
.tl-status{font-size:var(--text-xs);color:var(--ink-muted);font-style:italic}

/* Kundenkonto */
.knav{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-6);
  border-bottom:2px solid var(--border);padding-bottom:0}
.knav a{font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;font-size:1.02rem;padding:var(--space-3) var(--space-4);
  color:var(--ink-muted);border-bottom:2px solid transparent;margin-bottom:-2px}
.knav a:hover{color:var(--ink)}
.knav a.is-on{color:var(--ink);border-bottom-color:var(--signal)}
.knav-out{margin-left:auto}
.kcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.kcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-5)}
.kcard b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:2.1rem;line-height:1}
.kcard span{display:block;font-size:var(--text-sm);color:var(--ink-muted);margin-top:var(--space-2)}
.kcard a{display:inline-block;margin-top:var(--space-3);font-size:var(--text-sm);font-weight:600;
  border-bottom:2px solid var(--signal);padding-bottom:1px}
.upsell{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center;justify-content:space-between;
  background:var(--graphit-900);color:#fff;border-radius:var(--radius);padding:var(--space-6);margin-top:var(--space-8)}
.upsell h2{color:var(--signal);font-size:var(--text-lg)}
.upsell p{color:oklch(1 0 0/.75);font-size:var(--text-sm);margin-top:var(--space-2);max-width:60ch}
.dtab{width:100%;border-collapse:collapse;font-size:var(--text-sm);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.dtab th,.dtab td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.dtab thead th{background:var(--surface-2);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-muted);font-weight:600;font-family:'Inter',sans-serif}
.dtab tr:last-child td{border-bottom:0}
.dtab-msg{color:var(--ink-muted);max-width:420px}
.ziellist{list-style:none;padding:0;display:grid;gap:var(--space-2)}
.ziellist li{display:flex;align-items:center;gap:var(--space-3);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4)}
.zl-ico{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--graphit-700);flex:0 0 auto;font-size:14px}
.zl-nm{flex:1;font-weight:500;font-size:var(--text-sm)}
.zl-nm small{display:block;color:var(--ink-muted);font-weight:400;font-size:var(--text-xs)}
.zl-del{background:none;border:0;color:var(--ink-muted);font-size:1.3rem;line-height:1;padding:0 .3rem}
.zl-del:hover{color:oklch(0.55 0.2 25)}
.addrow{display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}
.addrow select,.addrow input{flex:1;min-width:200px;border:1px solid var(--border-str);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:var(--text-sm)}
.krev{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);margin-bottom:var(--space-4)}
.krev.is-hidden{opacity:.6;border-style:dashed}
.krev-hd{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;font-size:var(--text-sm)}
.krev-hd time{margin-left:auto;color:var(--ink-muted);font-size:var(--text-xs)}
.krev-tt{font-weight:600;margin-top:var(--space-2)}
.krev-tag{background:var(--surface-2);font-size:var(--text-xs);padding:.1rem .5rem;border-radius:3px;color:var(--ink-muted)}
.krev-form{margin-top:var(--space-4);display:grid;gap:var(--space-2)}
.krev-form textarea,.krev-melden textarea{width:100%;border:1px solid var(--border-str);
  border-radius:var(--radius-sm);padding:.55rem .7rem;font:inherit;font-size:var(--text-sm)}
.krev-form button{justify-self:start}
.krev-melden{margin-top:var(--space-3);font-size:var(--text-sm)}
.krev-melden summary{cursor:pointer;color:var(--ink-muted)}
.krev-melden form{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.krev-melden button{justify-self:start}
.tarifwahl{margin-top:var(--space-10);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--space-6);max-width:720px}
.tarifwahl h2{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.tarifwahl .radiocards{margin-top:var(--space-5)}
.pill{font-size:var(--text-xs);padding:.15rem .55rem;border-radius:3px;background:var(--surface-2);
  color:var(--ink-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.pill--bezahlt{background:oklch(0.92 0.09 150);color:oklch(0.32 0.1 150)}
.pill--offen{background:oklch(0.94 0.08 88);color:var(--signal-ink)}

.faq{display:grid;gap:var(--space-2);max-width:820px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.faq summary{cursor:pointer;padding:var(--space-4) var(--space-5);font-weight:600;font-size:var(--text-base)}
.faq summary:hover{color:var(--signal-deep)}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq p{padding:var(--space-4) var(--space-5);color:var(--ink-muted);font-size:var(--text-sm)}

.flashes{position:fixed;top:84px;right:var(--space-5);z-index:50;display:grid;gap:var(--space-2);max-width:360px}
.flash{background:var(--graphit-900);color:#fff;border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);font-size:var(--text-sm);box-shadow:var(--shadow-deep)}
.flash--error{background:oklch(0.45 0.18 25)}
.flash--ok{background:oklch(0.42 0.13 150)}

@media (max-width:1080px){
  .sec-split{grid-template-columns:1fr;gap:var(--space-10)}
  .side{position:static}
  .pcards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .fcard-logo{height:52px;min-width:48px;max-width:108px;padding:4px}
  .fcard-logo img{max-height:42px}
  .page-hd-row{flex-direction:column;gap:var(--space-3)}
  .page-hd-ico{width:48px;height:48px}
  .fgrid,.anfrage-grid,.revform-grid{grid-template-columns:1fr}
  .glist{grid-template-columns:1fr}
  .knav{gap:0}
  .knav a{font-size:.95rem;padding:var(--space-3)}
  .knav-out{margin-left:0}
  .firm-hd{gap:var(--space-4)}
  .flashes{left:var(--space-4);right:var(--space-4);max-width:none}
}

/* ============================================================
   Siegel-Prüfseite + Siegel im Konto
   ============================================================ */
.pruef{display:flex;gap:var(--space-4);align-items:flex-start;border-radius:var(--radius);
  padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8)}
.pruef h2{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.pruef p{font-size:var(--text-sm);line-height:1.6}
.pruef-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  flex:0 0 auto;color:#fff}
.pruef--ok{background:oklch(0.96 0.05 150);border:1px solid oklch(0.85 0.11 150)}
.pruef--ok .pruef-ico{background:oklch(0.5 0.15 150)}
.pruef--nok{background:oklch(0.96 0.04 25);border:1px solid oklch(0.86 0.1 25)}
.pruef--nok .pruef-ico{background:oklch(0.52 0.19 25)}
.pruef-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.pruef-h3{font-size:1.05rem;letter-spacing:.03em;padding-bottom:var(--space-3);
  border-bottom:2px solid var(--ink);margin-bottom:var(--space-4)}
.pruef-vorschau{display:flex;gap:var(--space-4);align-items:flex-start;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);margin-bottom:var(--space-4)}

/* Siegel-Werkstatt im Konto */
.sgl{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--space-8);
  align-items:start}
.sgl-buehne{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-6);display:grid;place-items:center;min-height:210px;position:sticky;top:90px}
.sgl-buehne--karo{background-image:
  linear-gradient(45deg,oklch(0.93 0.005 var(--hue)) 25%,transparent 25%,transparent 75%,oklch(0.93 0.005 var(--hue)) 75%),
  linear-gradient(45deg,oklch(0.93 0.005 var(--hue)) 25%,transparent 25%,transparent 75%,oklch(0.93 0.005 var(--hue)) 75%);
  background-size:18px 18px;background-position:0 0,9px 9px}
.sgl-buehne img{max-width:100%;height:auto}
.sgl-wahl{display:grid;gap:var(--space-5)}
.sgl-gruppe > b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;font-size:1rem;margin-bottom:var(--space-3)}
.sgl-optionen{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sgl-opt{cursor:pointer}
.sgl-opt input{position:absolute;opacity:0;pointer-events:none}
.sgl-opt span{display:block;border:1px solid var(--border-str);border-radius:var(--radius-sm);
  padding:.42rem .85rem;font-size:var(--text-sm);background:var(--surface)}
.sgl-opt:hover span{border-color:var(--graphit-900)}
.sgl-opt input:checked + span{background:var(--graphit-900);color:#fff;border-color:var(--graphit-900);font-weight:600}
.sgl-code{margin-top:var(--space-8)}
.sgl-code-hd{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  flex-wrap:wrap;margin-bottom:var(--space-3)}
.sgl-code textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.65;border:1px solid var(--border-str);border-radius:var(--radius-sm);
  padding:var(--space-4);background:var(--graphit-900);color:oklch(0.93 0.01 var(--hue));
  resize:vertical;min-height:190px;tab-size:2}
.sgl-copy{display:inline-flex;align-items:center;gap:.4rem}
.sgl-copy.is-ok{background:oklch(0.5 0.15 150)!important;border-color:oklch(0.5 0.15 150)!important;color:#fff!important}
.sgl-hinweise{display:grid;gap:var(--space-3);margin-top:var(--space-6)}
.sgl-hinweise > div{display:flex;gap:var(--space-3);font-size:var(--text-sm);color:var(--ink-muted);
  line-height:1.55}
.sgl-hinweise b{color:var(--ink)}
.sgl-nr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 auto;
  background:var(--graphit-900);color:var(--signal);font-size:11px;font-weight:700;margin-top:1px}
.sgl-dl{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}

@media (max-width:1080px){
  .pruef-grid,.sgl{grid-template-columns:1fr}
  .sgl-buehne{position:static}
}

/* ============================================================
   Umkreissuche + Bundesland-Gruppen (Gewerkeseiten)
   ============================================================ */
.wrap--ukreis{padding-top:var(--space-8)}
.ukreis{background:var(--graphit-900);border-radius:var(--radius);padding:var(--space-5) var(--space-6)}
.ukreis-felder{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap}
.ukreis-ort{flex:1;min-width:260px}
.ukreis-km{width:130px}
.ukreis label{display:block}
.ukreis label > span{display:block;font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;color:oklch(1 0 0/.72);margin-bottom:.35rem}
.ukreis input,.ukreis select{width:100%;background:oklch(1 0 0/.08);
  border:1px solid oklch(1 0 0/.2);border-radius:var(--radius-sm);
  padding:.6rem .75rem;color:#fff;font:inherit;font-size:var(--text-base)}
.ukreis input::placeholder{color:oklch(1 0 0/.45)}
.ukreis input:focus,.ukreis select:focus{outline:2px solid var(--signal);outline-offset:1px;
  background:oklch(1 0 0/.13)}
.ukreis select option{background:var(--graphit-900);color:#fff}
.ukreis .btn{flex:0 0 auto}
.ukreis-hinweis{margin-top:var(--space-4);font-size:var(--text-sm);color:oklch(1 0 0/.8)}
.ukreis-hinweis b{color:var(--signal)}

.ukreis-ergebnis{margin-top:var(--space-8)}
.ukreis-ergebnis-hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;padding-bottom:var(--space-3);
  border-bottom:2px solid var(--ink);margin-bottom:var(--space-5)}
.ukreis-ergebnis-hd h2{font-size:var(--text-xl)}
.ukreis-ergebnis-hd a{font-size:var(--text-sm);color:var(--ink-muted)}
.ukreis-ergebnis-hd a:hover{color:var(--ink);text-decoration:underline}
.ukreis-liste{list-style:none;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--space-2)}
/* Name oben, Entfernung darunter: nebeneinander brechen lange Ortsnamen
   ("Bad Homburg vor der Höhe") die Kachel und die km-Angabe rutscht raus. */
.ukreis-liste a{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);
  transition:border-color var(--dur-fast) var(--ease-out)}
.ukreis-liste a:hover{border-color:var(--graphit-900)}
.ukreis-liste b{display:block;font-weight:600;font-size:var(--text-sm);line-height:1.3;
  overflow-wrap:break-word}
.ukreis-liste small{display:flex;gap:.45rem;align-items:baseline;margin-top:.2rem;
  font-size:var(--text-xs);color:var(--ink-muted)}
.uk-km{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.uk-bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uk-bl::before{content:'· '}

.bl-liste{display:grid;gap:var(--space-2)}
.bl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.bl summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);padding:var(--space-4) var(--space-5);list-style:none}
.bl summary::-webkit-details-marker{display:none}
.bl summary::after{content:'';width:9px;height:9px;flex:0 0 auto;margin-left:auto;
  border-right:2px solid var(--graphit-600);border-bottom:2px solid var(--graphit-600);
  transform:rotate(45deg);transition:transform var(--dur-fast) var(--ease-out)}
.bl[open] summary::after{transform:rotate(-135deg)}
.bl summary:hover{background:var(--surface-2)}
.bl-nm{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;font-size:1.08rem}
.bl-n{font-size:var(--text-xs);color:var(--ink-muted);white-space:nowrap}
.bl-orte{display:flex;flex-wrap:wrap;gap:var(--space-2);padding:0 var(--space-5) var(--space-5)}
.bl-orte a{display:inline-flex;align-items:baseline;gap:.4rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:.32rem .8rem;font-size:var(--text-sm)}
.bl-orte a:hover{border-color:var(--graphit-900);background:var(--surface)}
.bl-orte small{color:var(--ink-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums}

@media (max-width:720px){
  .ukreis{padding:var(--space-4)}
  .ukreis-felder{flex-direction:column;align-items:stretch}
  .ukreis-km{width:100%}
  .ukreis .btn{width:100%}
  .ukreis-liste{grid-template-columns:1fr}
}

/* ============================================================
   Fachteil der Gewerkeseiten
   ============================================================ */
.page-hd-zahl{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--ink-muted);
  font-variant-numeric:tabular-nums}
/* Fachteil: eigene Sektion, damit der Lesetext die volle Breite nutzt und
   nicht neben der Sidebar auf ~590 px eingeschnürt wird. Zweispaltig
   gesetzt, wo es der Inhalt trägt (Leistungen, Kriterien). */
.gtext-sec{padding-bottom:var(--space-16)}
.gtext-block{padding-top:var(--space-10);border-top:3px solid var(--ink);
  max-width:1000px}
.gtext{margin-bottom:var(--space-10);scroll-margin-top:90px}
.gtext:last-child{margin-bottom:0}
.gtext h2{font-size:var(--text-xl);padding-bottom:var(--space-3);
  border-bottom:2px solid var(--ink);margin-bottom:var(--space-5)}
.gtext p{margin-bottom:var(--space-4);max-width:78ch;line-height:1.65}
.gtext-fuss{font-size:var(--text-sm);color:var(--ink-muted);border-left:3px solid var(--signal);
  padding-left:var(--space-4);margin-top:var(--space-5)}

/* Leistungen + Auswahlkriterien: Begriff fett, Erklärung darunter.
   Bewusst keine Karten-Dreierreihe — das ist die Optik, die jede
   AI-Landingpage benutzt, und sie zerlegt Fließtext in Häppchen. */
.leist-liste,.krit-liste{list-style:none;padding:0;display:grid;gap:var(--space-4)}
@media (min-width:900px){
  .leist-liste{grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-8)}
}
.leist-liste li,.krit-liste li{display:grid;gap:.25rem;padding-left:var(--space-6);
  position:relative}
.leist-liste li::before{content:'';position:absolute;left:0;top:.42em;width:12px;height:12px;
  background:var(--signal);clip-path:polygon(0 0,100% 50%,0 100%)}
.krit-liste{counter-reset:krit}
.krit-liste li{counter-increment:krit;padding-left:var(--space-8)}
.krit-liste li::before{content:counter(krit);position:absolute;left:0;top:0;
  display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--graphit-900);color:var(--signal);font-size:var(--text-xs);
  font-weight:700;font-variant-numeric:tabular-nums}
.leist-liste b,.krit-liste b{font-weight:650;font-size:var(--text-base)}
.leist-liste span,.krit-liste span{color:var(--ink-muted);font-size:var(--text-sm);
  line-height:1.6}

/* Kostentabelle */
.ktab-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface)}
.ktab{width:100%;border-collapse:collapse;min-width:560px;font-size:var(--text-sm)}
.ktab thead th{background:var(--graphit-900);color:#fff;text-align:left;
  padding:var(--space-3) var(--space-4);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.85rem}
.ktab tbody th{text-align:left;font-weight:600;font-family:'Inter',sans-serif;
  text-transform:none;letter-spacing:0;font-size:var(--text-sm)}
.ktab th,.ktab td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);
  vertical-align:top}
.ktab tbody tr:last-child th,.ktab tbody tr:last-child td{border-bottom:0}
.ktab tbody tr:hover{background:var(--surface-2)}
.ktab-preis{white-space:nowrap;font-weight:650;font-variant-numeric:tabular-nums}
.ktab-hint{color:var(--ink-muted);font-size:var(--text-xs);line-height:1.5}

@media (max-width:720px){
  .gtext-block{padding-top:var(--space-8)}
  .leist-liste li,.krit-liste li{padding-left:var(--space-5)}
  .krit-liste li{padding-left:var(--space-7)}
}