/* Anmeldeservice Bertram, site.css
   Werkstattbüro statt Amtsstube. Anthrazit wie Transporter und Heizkörper, Kupfer wie das Rohr im Heizungskeller,
   gelbes Durchschlagpapier wie der Arbeitsauftrag im Block. Schrift Archivo, eine kräftige Grotesk für Beschriftung und Druck.
   Schriften liegen lokal in /fonts (keine externen Abrufe, OFL). */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/archivo-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-latin-800-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --anthrazit: #2c3236;
  --anthrazit-2: #394146;
  --anthrazit-3: #4d565c;
  --auf-dunkel: #f1f0ec;
  --auf-dunkel-2: #b8bfc3;

  --beton: #e8e7e3;
  --papier: #ffffff;
  --papier-2: #f6f5f2;
  --ink: #22282c;
  --ink-2: #4f585e;
  --ink-3: #6c757b;
  --linie: #cfcdc6;
  --linie-2: #e1dfda;

  --kupfer: #a14d1a;
  --kupfer-dunkel: #86400f;
  --kupfer-glanz: #e39a66;
  --kupfer-hell: #f4e4d7;
  --durchschlag: #f6e8a4;
  --durchschlag-rand: #d6c26a;
  --gruen: #2d7444;
  --gruen-hell: #e1efe4;
  --rot: #b3261e;
  --rot-hell: #fbe9e7;

  --font-body: "Archivo", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1140px;
  --gutter: 16px;
  --radius: 3px;
  --bar-height: 64px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--beton);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  overflow-x: hidden;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; } }
@media (max-width: 899px) {
  body.has-bar { padding-bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px)); }
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 0.5em;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 1.4rem + 3.3vw, 3.625rem); line-height: 1.04; margin-bottom: 0.4em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.1; margin-bottom: 0.45em; }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 600; line-height: 1.18; margin-bottom: 0.4em; }
h4 { font-family: var(--font-body); font-size: 1rem; font-weight: 600; margin-bottom: 0.3em; }

p { margin: 0 0 1em; max-width: 66ch; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; max-width: 66ch; }
li { margin-bottom: 0.4em; }
li > ul, li > ol { margin-top: 0.4em; margin-bottom: 0.4em; }
strong { font-weight: 600; }
small, .small { font-size: 0.9375rem; }
.muted { color: var(--ink-2); }
.num, td.num, th.num { font-variant-numeric: tabular-nums; }

a { color: var(--kupfer); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
a:hover { color: var(--kupfer-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--kupfer); outline-offset: 3px; border-radius: 2px; }

hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

.lede {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 58ch;
}

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px;
  background: var(--papier); color: var(--kupfer);
  padding: 0.5rem 0.75rem; z-index: 100; border: 2px solid var(--kupfer);
}
.skip-link:focus { top: 8px; }

/* Kopf: dunkel wie die Seitenwand eines Transporters */
.site-header {
  background: var(--anthrazit);
  color: var(--auf-dunkel);
  border-bottom: 1px solid var(--anthrazit-2);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px;
}
.wordmark {
  display: inline-grid; grid-template-columns: 30px auto; column-gap: 0.7rem; align-items: center;
  text-decoration: none; color: var(--auf-dunkel); line-height: 1.05;
}
.wordmark::before {
  grid-row: 1 / span 2;
  content: ""; width: 30px; height: 30px; border-radius: 3px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M8 15.5l4.6 4.6L22 10.4' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--kupfer);
}
.wordmark .brand { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; white-space: nowrap; }
.wordmark .sub { display: block; font-size: 0.8125rem; color: var(--auf-dunkel-2); margin-top: 2px; white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1099px) { .wordmark .sub { display: none; } .wordmark::before { grid-row: auto; } }
.wordmark:hover { color: #fff; }
@media (max-width: 479px) {
  .wordmark .sub { display: none; }
  .wordmark .brand { font-size: 1.0625rem; }
  .wordmark { column-gap: 0.55rem; }
  /* Telefon-Knopf im Kopf nur als Symbol, die Leiste unten trägt "Anrufen" ausgeschrieben */
  .site-header .header-phone { font-size: 0; gap: 0; padding-inline: 0.7rem; min-width: 44px; justify-content: center; }
  .site-header .header-phone svg { width: 18px; height: 18px; }
}

.site-nav { display: none; }
@media (min-width: 900px) {
  .site-nav { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; }
  .site-nav a { text-decoration: none; color: var(--auf-dunkel-2); font-weight: 500; font-size: 0.9375rem; }
  .site-nav a:hover { color: #fff; }
  .site-nav .btn, .site-nav .btn:hover { color: var(--auf-dunkel); background: transparent; border-color: var(--anthrazit-3); }
  .site-nav .btn:hover { border-color: var(--auf-dunkel-2); }
}
/* Anrufen ist der erste Kontaktweg und bleibt auf allen Breiten sichtbar. */
.header-phone,
.header-phone.btn-secondary { display: inline-flex; flex: none; background: var(--kupfer); color: #fff; border-color: var(--kupfer); }
.header-phone:hover,
.header-phone.btn-secondary:hover { background: var(--kupfer-dunkel); border-color: var(--kupfer-dunkel); color: #fff; }

/* Schaltflächen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.6rem 1.3rem;
  border-radius: var(--radius); border: 2px solid transparent;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.2; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--papier), 0 0 0 6px var(--kupfer); }
.btn-primary { background: var(--kupfer); color: #fff; border-color: var(--kupfer); }
.btn-primary:hover { background: var(--kupfer-dunkel); border-color: var(--kupfer-dunkel); color: #fff; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-whatsapp { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.btn-whatsapp:hover { background: var(--gruen); color: #fff; }
.btn-sm { min-height: 40px; padding: 0.4rem 0.9rem; font-size: 0.9375rem; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 1rem; }
.cta-row .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .cta-row .btn { flex: 0 1 auto; } }
.cta-note { font-size: 0.9375rem; color: var(--ink-2); margin: 0; }

/* Abschnitte */
.section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.section-paper { background: var(--papier); }
.section-head { margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.section-head p { max-width: 60ch; }
.section-head .lede { margin-bottom: 0; }

/* Hero auf Anthrazit */
.hero {
  background: var(--anthrazit);
  color: var(--auf-dunkel);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero h1 span { display: block; }
.hero .lede { color: var(--auf-dunkel-2); }
.hero a:not(.btn) { color: var(--auf-dunkel); }
.hero a:not(.btn):hover { color: #fff; }
.hero-grid { display: grid; gap: 2.75rem; align-items: start; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; }
}
.hero-copy .lede { margin-bottom: 0.5rem; }
.price-line {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.25rem 0.9rem;
  margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--anthrazit-3); max-width: 58ch;
}
.price-line .price {
  font-family: var(--font-head); font-weight: 700; font-size: 2.75rem; line-height: 0.9;
  font-variant-numeric: tabular-nums; color: var(--kupfer-glanz);
}
.price-line .unit { font-weight: 600; color: #fff; font-size: 1.125rem; }
.price-line .cond { grid-column: 1 / -1; color: var(--auf-dunkel-2); font-size: 0.9375rem; margin-top: 0.35rem; }
.hero .btn-secondary { color: var(--auf-dunkel); border-color: var(--auf-dunkel-2); }
.hero .btn-secondary:hover { background: var(--auf-dunkel); color: var(--anthrazit); border-color: var(--auf-dunkel); }
.hero .btn-whatsapp { color: #8fd3a4; border-color: #6fbf88; }
.hero .btn-whatsapp:hover { background: #6fbf88; color: var(--anthrazit); }
.hero .cta-note { color: var(--auf-dunkel-2); }

/* Laufzettel: gelber Durchschlag aus dem Auftragsblock */
.laufzettel {
  position: relative;
  background: var(--durchschlag);
  color: var(--ink);
  font-size: 0.9375rem;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 14px 30px -12px rgba(0,0,0,.55);
  padding-top: 14px;
}
.laufzettel::before {
  /* Perforation am oberen Rand, wie beim Abreißen aus dem Block */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background:
    radial-gradient(circle at 6px 7px, var(--anthrazit) 2.6px, transparent 3px) 0 0 / 14px 14px repeat-x,
    linear-gradient(var(--durchschlag), var(--durchschlag));
  border-bottom: 1px dashed var(--durchschlag-rand);
}
@media (min-width: 940px) { .laufzettel { transform: rotate(-1.2deg); } }
.laufzettel-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 1.1rem 0.6rem; border-bottom: 2px solid var(--ink);
}
.laufzettel-head .title { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; }
.laufzettel-head .ref { color: var(--ink-2); white-space: nowrap; font-size: 0.875rem; }
.laufzettel-meta {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 1rem;
  padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--durchschlag-rand); margin: 0;
}
.laufzettel-meta dt { color: var(--ink-2); }
.laufzettel-meta dd { margin: 0; font-weight: 500; }
.laufzettel-steps { list-style: none; margin: 0; padding: 0.2rem 0; max-width: none; }
.laufzettel-steps li {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: start; gap: 0.6rem;
  padding: 0.5rem 1.1rem; margin: 0; border-bottom: 1px solid rgba(120, 100, 20, .18);
}
.laufzettel-steps li:last-child { border-bottom: 0; }
.laufzettel-steps .mark {
  width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; border: 1.5px solid var(--ink-2); color: #fff; flex: none; background: rgba(255,255,255,.35);
}
.laufzettel-steps .mark svg { width: 14px; height: 14px; }
.laufzettel-steps .is-done .mark { background: var(--gruen); border-color: var(--gruen); }
.laufzettel-steps .is-partner .mark { border-color: var(--kupfer); border-style: dashed; border-width: 2px; }
.laufzettel-steps .what { line-height: 1.35; }
.laufzettel-steps .what small { display: block; color: var(--ink-2); margin-top: 2px; font-size: 0.8125rem; }
.laufzettel-steps .who { font-size: 0.8125rem; color: var(--ink-2); white-space: nowrap; padding-top: 2px; }
.laufzettel-steps .is-partner .who { color: var(--kupfer-dunkel); font-weight: 600; }
.laufzettel-foot {
  padding: 0.6rem 1.1rem 0.75rem; border-top: 1px solid var(--durchschlag-rand);
  color: var(--ink-2); font-size: 0.8125rem;
}
.laufzettel-foot span { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 1rem; }
.laufzettel-foot i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; border: 1.5px solid var(--ink-2); }
.laufzettel-foot i.done { background: var(--gruen); border-color: var(--gruen); }
.laufzettel-foot i.partner { border-color: var(--kupfer); border-style: dashed; }

/* Heute und mit uns */
.vn { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--linie); }
.vn th, .vn td { padding: 1rem 1.15rem; vertical-align: top; text-align: left; border-top: 1px solid var(--linie-2); }
.vn thead th { border-top: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; }
.vn thead th:first-child { background: var(--papier-2); color: var(--ink-2); }
.vn thead th:last-child { background: var(--anthrazit); color: #fff; }
.vn td.heute { width: 50%; color: var(--ink-2); background: var(--papier-2); }
.vn td.mit { position: relative; padding-left: 2.75rem; font-weight: 500; }
.vn td.mit::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.2rem; width: 18px; height: 18px; border-radius: 2px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    var(--kupfer);
}
@media (max-width: 759px) {
  .vn thead { display: none; }
  .vn, .vn tbody, .vn tr, .vn td { display: block; }
  .vn tr { border-top: 3px solid var(--kupfer); }
  .vn tr:first-child { border-top: 0; }
  .vn td { border-top: 0; }
  .vn td.heute { width: auto; padding-bottom: 0.75rem; }
  .vn td::before { }
  .vn td.heute::before { content: attr(data-label); display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: 0.2rem; }
}

/* Wer was macht: Aufgabenliste mit Zuständigkeit */
.aufgaben-sum {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0 0 1rem; padding: 0; list-style: none; max-width: none;
  font-size: 0.9375rem; color: var(--ink-2);
}
.aufgaben-sum li { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.aufgaben-sum b { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.anteil {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; margin: 0 0 1.5rem; max-width: 46rem;
}
.anteil span { height: 14px; border-radius: 1px; }
.anteil .wir, .who-chip.wir::before, .aufgaben-sum .wir::before { background: var(--kupfer); }
.anteil .sie, .who-chip.sie::before, .aufgaben-sum .sie::before { background: var(--anthrazit-3); }
.anteil .elektro, .who-chip.elektro::before, .aufgaben-sum .elektro::before { background: transparent; box-shadow: inset 0 0 0 2px var(--kupfer); }
.anteil .eigen, .who-chip.eigen::before, .aufgaben-sum .eigen::before { background: var(--durchschlag-rand); }
.aufgaben-sum li::before, .who-chip::before { content: ""; width: 12px; height: 12px; border-radius: 1px; flex: none; }

.aufgaben {
  list-style: none; margin: 0; padding: 0; max-width: none;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius);
  counter-reset: aufgabe;
}
.aufgaben li {
  counter-increment: aufgabe;
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem 0.75rem;
  padding: 0.7rem 1rem; margin: 0; border-top: 1px solid var(--linie-2);
}
.aufgaben .task { font-weight: 500; }
.aufgaben li:first-child { border-top: 0; }
.aufgaben li::before {
  content: counter(aufgabe);
  font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; line-height: 1.2;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.aufgaben .task { grid-column: 2; }
.aufgaben .task small { display: block; color: var(--ink-2); font-size: 0.875rem; font-weight: 400; margin-top: 0.1rem; }
.aufgaben .who-chip { grid-column: 2; justify-self: start; }
.who-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.875rem; font-weight: 600; white-space: nowrap; color: var(--ink-2);
}
.who-chip.wir { color: var(--kupfer-dunkel); }
.aufgaben li.nicht-wir { background: var(--papier-2); }
@media (min-width: 760px) {
  .aufgaben li { grid-template-columns: 2.25rem minmax(0, 1fr) 11rem; align-items: baseline; padding: 0.75rem 1.25rem; }
  .aufgaben .who-chip { grid-column: 3; grid-row: 1; justify-self: start; }
}
.aufgaben-foot { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-2); max-width: 70ch; }

/* Ablauf: Überschrift links, Strang rechts */
@media (min-width: 1024px) {
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
  .split > .section-head { position: sticky; top: 2rem; }
}

/* Ablauf als Strang: Kupferleitung mit Muffen */
.steps {
  list-style: none; padding: 0; margin: 0; max-width: none; counter-reset: step;
  display: grid; gap: 0; position: relative;
}
.steps li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1.1rem;
  padding: 0 0 2.25rem; margin: 0;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: relative; z-index: 1;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--papier); border: 5px solid var(--kupfer);
  font-family: var(--font-head); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.steps li::after {
  /* das Rohrstück zur nächsten Muffe */
  content: ""; position: absolute; left: calc(1.75rem - 4px); top: 3.25rem; bottom: -0.25rem; width: 8px;
  background: linear-gradient(90deg, #7a3a12, #d88a52 45%, #f0b48a 55%, #8c4416);
}
.steps li:last-child::after { display: none; }
.steps h3 { margin: 0.55rem 0 0.35rem; }
.steps p:last-child { margin-bottom: 0; }
.steps .tag {
  display: inline-block; font-size: 0.875rem; font-weight: 600;
  color: var(--ink); background: var(--durchschlag);
  padding: 0.1rem 0.55rem; border-radius: 2px; margin-top: 0.5rem;
}
@media (min-width: 760px) {
  .steps li { grid-template-columns: 4.25rem 1fr; gap: 1.75rem; }
  .steps li::before { width: 4.25rem; height: 4.25rem; font-size: 2.1rem; }
  .steps li::after { left: calc(2.125rem - 4px); top: 4rem; }
  .steps h3 { margin-top: 0.85rem; }
}

/* Preisblatt */
.preisblatt {
  width: 100%; border-collapse: collapse; background: var(--papier);
  border: 1px solid var(--linie); font-variant-numeric: tabular-nums;
}
.preisblatt caption { text-align: left; font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; padding: 0 0 0.75rem; }
.preisblatt th, .preisblatt td { padding: 1rem 1.1rem; border-top: 1px solid var(--linie-2); vertical-align: top; text-align: left; }
.preisblatt thead th, .preisblatt thead th.price { border-top: 0; background: var(--anthrazit); color: var(--auf-dunkel); font-family: var(--font-body); font-weight: 600; font-size: 0.9375rem; }
.preisblatt .price {
  text-align: right; white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: 1.625rem; line-height: 1.05;
}
.preisblatt .price small {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.8125rem; color: var(--ink-2); margin-top: 0.25rem; white-space: normal;
}
.preisblatt .pos { font-weight: 600; }
.preisblatt .pos small { display: block; color: var(--ink-2); font-size: 0.9375rem; font-weight: 400; margin-top: 0.2rem; }
.preisblatt tr.main td { background: var(--kupfer-hell); }
.preisblatt tr.main .price { color: var(--kupfer-dunkel); font-size: 2.125rem; }
@media (max-width: 639px) {
  .preisblatt thead { display: none; }
  .preisblatt, .preisblatt tbody, .preisblatt tr, .preisblatt td { display: block; }
  .preisblatt caption { display: block; }
  .preisblatt tr { border-top: 1px solid var(--linie); }
  .preisblatt tr:first-child { border-top: 0; }
  .preisblatt td { border-top: 0; padding: 0.85rem 1rem 0; }
  .preisblatt td.price { text-align: left; white-space: normal; padding: 0.4rem 1rem 0.95rem; }
  .preisblatt td.price small { display: inline; margin-left: 0.4rem; }
}
.conditions { display: grid; gap: 0.6rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; max-width: none; }
@media (min-width: 760px) { .conditions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.conditions li { padding-left: 1.4rem; position: relative; margin: 0; font-size: 0.9375rem; }
.conditions li::before {
  content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; border-radius: 1px; background: var(--kupfer);
}

/* Netzbetreiber-Tabelle (Formular-Spickzettel) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vnb-table { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--linie); font-size: 0.9375rem; }
.vnb-table th, .vnb-table td { padding: 0.85rem 0.95rem; border-top: 1px solid var(--linie-2); vertical-align: top; text-align: left; }
.vnb-table thead th { background: var(--anthrazit); color: var(--auf-dunkel); border-top: 0; font-weight: 600; }
.vnb-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.vnb-table td ul { margin: 0; padding-left: 1.1em; }
.vnb-table td li { margin-bottom: 0.2rem; }
.vnb-table .formname { font-weight: 600; }
@media (max-width: 899px) {
  .vnb-table thead { display: none; }
  .vnb-table, .vnb-table tbody, .vnb-table tr, .vnb-table th, .vnb-table td { display: block; }
  .vnb-table tr { border-top: 3px solid var(--kupfer); padding: 0.5rem 0; }
  .vnb-table tr:first-child { border-top: 0; }
  .vnb-table th[scope="row"] { white-space: normal; font-family: var(--font-head); font-size: 1.375rem; border-top: 0; padding-bottom: 0.25rem; }
  .vnb-table td { border-top: 0; padding-top: 0.35rem; padding-bottom: 0.35rem; }
  .vnb-table td::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; margin-bottom: 0.15rem; }
}
.table-note { font-size: 0.9375rem; color: var(--ink-2); margin-top: 1rem; }

/* Gründer */
.founder { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; } }
.founder h3 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); }
.founder-facts { list-style: none; padding: 0; margin: 0; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); }
.founder-facts li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem;
  padding: 0.75rem 1.1rem; border-top: 1px solid var(--linie-2); margin: 0; font-size: 0.9375rem;
}
.founder-facts li:first-child { border-top: 0; }
.founder-facts li span:first-child { color: var(--ink-2); }
.photo-placeholder img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }

/* Fristen */
.facts { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 1rem; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.facts li {
  margin: 0; background: var(--anthrazit); color: var(--auf-dunkel);
  border-radius: var(--radius); padding: 1.25rem 1.35rem 1.4rem;
}
.facts .date {
  font-family: var(--font-head); font-weight: 700; font-size: 2.25rem; line-height: 1;
  color: var(--kupfer-glanz); font-variant-numeric: tabular-nums; display: block; margin-bottom: 0.6rem;
}
.facts p { margin: 0; font-size: 0.9375rem; }
.facts p + p { margin-top: 0.5rem; color: var(--auf-dunkel-2); }

/* FAQ */
.faq { max-width: 74ch; }
.faq details { border-top: 1px solid var(--linie); }
.faq details:last-child { border-bottom: 1px solid var(--linie); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.05rem 2.75rem 1.05rem 0;
  font-weight: 600; position: relative; font-size: 1.0625rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1;
  color: var(--kupfer); border: 2px solid var(--kupfer); border-radius: 2px;
}
.faq details[open] summary::after { content: "\2212"; background: var(--kupfer); color: #fff; }
.faq summary:hover { color: var(--kupfer-dunkel); }
.faq .answer { padding: 0 0 1.25rem; color: var(--ink); }
.faq .answer p:last-child { margin-bottom: 0; }

/* Hinweis Hausbesitzer */
.owner-hint {
  background: var(--durchschlag); border-radius: var(--radius);
  padding: 1.35rem 1.5rem; display: grid; gap: 1rem;
}
@media (min-width: 760px) { .owner-hint { grid-template-columns: 1fr auto; align-items: center; } }
.owner-hint p { margin: 0; max-width: 60ch; }
.owner-hint .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Kontakt auf Anthrazit, Formular als weißes Blatt */
#kontakt { background: var(--anthrazit); color: var(--auf-dunkel); }
#kontakt h2 { color: #fff; }
#kontakt .lede, #kontakt .muted { color: var(--auf-dunkel-2); }
#kontakt .form .muted { color: var(--ink-2); }
#kontakt .contact-direct a { color: #fff; }
#kontakt .contact-direct li { border-color: var(--anthrazit-3); }
#kontakt .contact-direct li span:first-child { color: var(--auf-dunkel-2); }
.contact-grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; } }
.contact-direct { list-style: none; padding: 0; margin: 1rem 0 0; }
.contact-direct li {
  display: grid; grid-template-columns: 7rem 1fr; gap: 0.75rem;
  padding: 0.65rem 0; border-top: 1px solid var(--linie-2); margin: 0;
}
.contact-direct li:last-child { border-bottom: 1px solid var(--linie-2); }
.contact-direct li span:first-child { color: var(--ink-2); font-size: 0.9375rem; padding-top: 2px; }
.contact-direct a { font-weight: 600; overflow-wrap: anywhere; }
.contact-grid > *, .hero-grid > *, .founder > *, .groups > *, .scope > *, .footer-grid > * { min-width: 0; }

.form {
  background: var(--papier); color: var(--ink);
  border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-top: 6px solid var(--kupfer);
}
.form h3 { color: var(--ink); }
.form a { color: var(--kupfer); }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
  .form-grid .full { grid-column: 1 / -1; }
}
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 600; font-size: 0.9375rem; }
.field label .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink); background: var(--papier-2);
  border: 1.5px solid var(--linie); border-radius: var(--radius);
  padding: 0.65rem 0.8rem; min-height: 48px; width: 100%;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--kupfer); outline-offset: 1px; border-color: var(--kupfer); background: var(--papier);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--rot); }
.field .hint { font-size: 0.8125rem; color: var(--ink-3); }
.check { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: 0.9375rem; }
.check span { font-weight: 400; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--kupfer); flex: none; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.form-actions .muted { color: var(--ink-2); }
.form-status { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--papier-2); font-size: 0.9375rem; }
.form-status[hidden] { display: none; }
.form-status.ok { background: var(--gruen-hell); border-color: var(--gruen); }
.form-status.err { background: var(--rot-hell); border-color: var(--rot); }
.form-status p { margin: 0; }
.form-status p + p { margin-top: 0.4rem; }

/* Fuß */
.site-footer {
  background: #23292c; color: var(--auf-dunkel-2);
  padding: 2.75rem 0 2rem; font-size: 0.9375rem;
}
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; } }
.site-footer h4 { color: var(--auf-dunkel); font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.35rem; }
.site-footer a { color: var(--auf-dunkel-2); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--anthrazit-2);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem;
}

/* Feste Leiste auf Telefonen */
.cta-bar { display: none; }
@media (max-width: 899px) {
  .cta-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--anthrazit); border-top: 1px solid var(--anthrazit-2);
    padding: 0.5rem var(--gutter) calc(0.5rem + env(safe-area-inset-bottom, 0px));
    min-height: var(--bar-height);
  }
  .cta-bar .btn { min-height: 46px; }
  .cta-bar .btn-whatsapp { color: #8fd3a4; border-color: #6fbf88; }
}

/* Unterseiten */
.page-header {
  background: var(--anthrazit); color: var(--auf-dunkel);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}
.page-header h1 { color: #fff; max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); }
.page-header .lede { color: var(--auf-dunkel-2); }
.page-header a { color: var(--auf-dunkel); }
.crumbs { font-size: 0.9375rem; color: var(--auf-dunkel-2); margin-bottom: 1.25rem; }
.crumbs a { color: var(--auf-dunkel-2); }
.stand {
  display: inline-block; font-size: 0.875rem; color: var(--ink);
  background: var(--durchschlag); border-radius: 2px; padding: 0.15rem 0.55rem; margin-top: 0.5rem;
}
/* Unterseiten: eine mittige Lesespalte, Kopf und Text auf derselben Kante */
.container.prose, .page-header .container { max-width: calc(50rem + 2 * var(--gutter)); }
.prose > * { max-width: 50rem; }
.callout h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose table {
  width: 100%; border-collapse: collapse; background: var(--papier);
  border: 1px solid var(--linie); font-size: 0.9375rem; margin: 1rem 0 1.5rem;
}
.prose th, .prose td { padding: 0.75rem 0.85rem; border-top: 1px solid var(--linie-2); text-align: left; vertical-align: top; }
.prose thead th { background: var(--anthrazit); color: var(--auf-dunkel); border-top: 0; font-weight: 600; }
.prose th[scope="row"] { font-weight: 600; }
.prose table a { font-weight: 600; }
@media (max-width: 639px) {
  .prose table, .prose thead, .prose tbody, .prose tr, .prose th, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { border-top: 3px solid var(--kupfer); padding: 0.5rem 0.85rem; }
  .prose tr:first-child { border-top: 0; }
  .prose th[scope="row"] { border-top: 0; padding: 0.4rem 0 0.2rem; font-family: var(--font-head); font-size: 1.25rem; white-space: normal; }
  .prose td { border-top: 0; padding: 0.3rem 0; }
  .prose td::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--ink-2); font-weight: 600; margin-bottom: 0.1rem; }
  .prose td:not([data-label])::before { display: none; }
  .modul-table td:first-child, .modul-table th:first-child { white-space: normal; }
}
.callout {
  background: var(--papier); border: 1px solid var(--linie); border-left: 5px solid var(--kupfer);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.callout.warn { border-left-color: var(--rot); }
.callout.note { border-left-color: var(--anthrazit-3); background: var(--papier-2); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.cta-block {
  background: var(--anthrazit); color: var(--auf-dunkel); border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); margin-top: 3rem;
}
.cta-block h2 { margin-top: 0; color: #fff; }
.cta-block p { max-width: 62ch; }
.cta-block a:not(.btn) { color: var(--auf-dunkel); }
.cta-block .cta-row { margin-bottom: 0.5rem; }
.cta-block .btn-secondary { color: var(--auf-dunkel); border-color: var(--auf-dunkel-2); }
.cta-block .btn-secondary:hover { background: var(--auf-dunkel); color: var(--anthrazit); }
.cta-block .btn-whatsapp { color: #8fd3a4; border-color: #6fbf88; }
.cta-block .btn-whatsapp:hover { background: #6fbf88; color: var(--anthrazit); }
.cta-block .cta-note { color: var(--auf-dunkel-2); }
.pitfalls { list-style: none; padding: 0; }
.pitfalls li { padding: 0.8rem 0 0.8rem 1.4rem; border-top: 1px solid var(--linie-2); position: relative; margin: 0; }
.pitfalls li:last-child { border-bottom: 1px solid var(--linie-2); }
.pitfalls li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 10px; height: 10px; border-radius: 1px; background: var(--rot); }
.pitfalls strong { display: block; }
.two-col { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scope-box {
  background: var(--papier); border: 1px solid var(--linie); border-top: 4px solid var(--kupfer);
  border-radius: var(--radius); padding: 1.15rem 1.35rem;
}
.scope-box h3 { margin-top: 0; }
.scope-box ul { margin-bottom: 0; }
.seq { list-style: none; padding: 0; margin: 1rem 0 1.5rem; counter-reset: seq; max-width: none; }
.seq li {
  counter-increment: seq; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.75rem;
  padding: 0.9rem 0; border-top: 1px solid var(--linie); margin: 0;
}
.seq li:last-child { border-bottom: 1px solid var(--linie); }
.seq li::before {
  content: counter(seq); font-family: var(--font-head); font-weight: 700; font-size: 1.875rem; line-height: 1;
  color: var(--kupfer); font-variant-numeric: tabular-nums;
}
.seq strong { display: block; margin-bottom: 0.2rem; }
.seq p { margin: 0; }
.seq p + p { margin-top: 0.35rem; }
.seq .who { font-size: 0.8125rem; color: var(--ink-2); display: inline-block; margin-bottom: 0.25rem; font-weight: 600; }

.legal-note { background: var(--rot-hell); border: 1px solid var(--rot); border-radius: var(--radius); padding: 0.75rem 1rem; font-size: 0.9375rem; margin-bottom: 1.5rem; }
.legal-note p { margin: 0; }
address { font-style: normal; }

.kurz { list-style: none; padding: 0; margin: 0; }
.kurz li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; margin: 0; }
.kurz li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 10px; height: 10px; border-radius: 1px; background: var(--kupfer); }
.vnb-links { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.6rem; max-width: none; }
@media (min-width: 640px) { .vnb-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vnb-links li { margin: 0; }
.vnb-links a {
  display: block; height: 100%; padding: 0.9rem 1rem; background: var(--papier);
  border: 1px solid var(--linie); border-left: 4px solid var(--kupfer); border-radius: var(--radius);
  text-decoration: none; font-weight: 600; color: var(--ink);
}
.vnb-links a:hover { border-color: var(--kupfer); color: var(--kupfer-dunkel); }
.vnb-links a small { display: block; color: var(--ink-2); font-weight: 400; margin-top: 3px; }
.modul-table td:first-child, .modul-table th:first-child { white-space: nowrap; }
.legal dl { margin: 0 0 1.5rem; }
.legal dt { font-weight: 600; margin-top: 1rem; }
.legal dd { margin: 0.2rem 0 0; }
.legal h2 { margin-top: 2.25rem; }
.legal h3 { margin-top: 1.5rem; }

@media print {
  .cta-bar, .skip-link, .site-nav .btn, .header-phone { display: none !important; }
  body { background: #fff; color: #000; }
  .site-header, .hero, .page-header, #kontakt, .site-footer, .facts li, .cta-block { background: #fff !important; color: #000 !important; }
  .hero h1, .page-header h1, #kontakt h2 { color: #000 !important; }
  a { color: #000; }
}