/* Leistungsseiten - gleiche Gestaltung wie die Startseite, bewusst schlank.
   Gemeinsame Datei fuer alle sieben Unterseiten. */
/* 14.09.2026 — Manrope ist die Hausschrift. Selbst gehostet, bewusst NICHT
   ueber fonts.googleapis.com: ein Link dorthin laedt die IP jedes Besuchers
   zu Google und ist bei einer Seite mit Impressum abmahnfaehig
   (LG Muenchen I, 3 O 17493/20).
   EINE Datei traegt alle Gewichte von 400 bis 700 (variable Schrift).
   Dadurch gibt es das 550 aus dem Stylesheet wirklich, statt dass es auf
   500 oder 600 faellt — die Systemschrift konnte das nicht. */
@font-face{
  font-family:"Manrope";
  src:url(../fonts/Manrope.woff2) format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
:root{
  /* 14.09.2026 — dieselbe Radius-Regel wie auf den Startseiten. */
  --r-fein:8px;   /* kleine Dinge, Fokus-Ringe */
  --r-feld:10px;   /* Felder, Knoepfe */
  --r-karte:16px;   /* Karten */
  --r-gross:22px;   /* grosse Flaechen */
  --schatten-ton:3 8 15;   /* getoente Schatten, wie auf den Startseiten */
  --ground:#080B0E; --surface:#101519; --ink:#EDF1F4; --ink-soft:#A0AEB8;
  --ink-faint:#76858F; --line:#1E272E; --line-strong:#2E3B44;
  --accent:#E9922E; --accent-ink:#FFB055; --accent-wash:rgba(233,146,46,.12);
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,28px);
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,.96rem + .2vw,1.09rem); line-height:1.65;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
/* 09.09.2026: Der Browser unterbrach die Unterstreichung an Unterlängen (das g in „Weg" hing
   in der Luft). Linie durchziehen und etwas tiefer setzen, damit sie unter die Buchstaben passt. */
a{text-decoration-skip-ink:none; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-fein)}
.shell{width:min(760px,100% - 2*var(--pad)); margin-inline:auto}

.top{position:sticky; top:0; background:color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line); z-index:5}
.top .shell{display:flex; align-items:center; gap:14px; height:86px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:58px; height:58px; display:block}
.brand .wort{display:flex; flex-direction:column; line-height:1.12}
.brand .wort b{font-weight:500; font-size:1.06rem; letter-spacing:.15em; text-transform:uppercase}
.brand .wort span{font-size:.62rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:400; padding-left:.14em}
.zurueck{margin-left:auto; font-size:.92rem; color:var(--ink-soft); text-decoration:none}
.zurueck:hover{color:var(--ink)}

main{padding-block:clamp(48px,7vw,84px)}
.label{font-size:.82rem; text-transform:uppercase; letter-spacing:.14em;
  font-weight:600; color:var(--accent); display:block; margin-bottom:10px}
h1{margin:0 0 14px; font-size:clamp(1.75rem,1.5rem + 1.2vw,2.6rem);
  line-height:1.14; letter-spacing:-.033em; font-weight:600}
.lede{font-size:clamp(1.08rem,1rem + .4vw,1.25rem); line-height:1.55;
  color:var(--ink-soft); margin:0 0 8px}
h2{margin:52px 0 14px; font-size:clamp(1.16rem,1.09rem + .34vw,1.35rem);
  letter-spacing:-.02em; font-weight:600}
p{margin:0 0 12px; color:var(--ink-soft)}
strong{color:var(--ink); font-weight:600}

/* Schritt-Liste */
ol.schritte{list-style:none; margin:22px 0 0; padding:0; counter-reset:s;
  display:flex; flex-direction:column; gap:14px}
ol.schritte li{counter-increment:s; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-karte); padding:18px 20px 18px 64px; position:relative}
ol.schritte li::before{content:counter(s); position:absolute; left:18px; top:18px;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  background:var(--accent-wash); color:var(--accent-ink); font-weight:600; font-size:.95rem;
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent)}
ol.schritte h3{margin:0 0 4px; font-size:1.02rem; font-weight:600}
ol.schritte p{margin:0; font-size:.97rem}

/* Bild / Screenshot */
.abschnitt-bild{margin:26px 0 0; border:1px solid var(--line); border-radius:var(--r-karte);
  overflow:hidden; background:var(--surface)}
.abschnitt-bild img{display:block; width:100%; height:auto; cursor:zoom-in}
/* Handy-Aufnahme: halbe Groesse, sonst fuellt das Hochformat die halbe Seite */
.abschnitt-bild.hochkant{max-width:430px; margin-left:auto; margin-right:auto}
/* Nahaufnahme eines Einstellungs-Kastens (978 px breit aufgenommen): zwei Drittel, sonst wird die Schrift unscharf */
.abschnitt-bild.mittel{max-width:720px; margin-left:auto; margin-right:auto}
/* Vier Handy-Ansichten nebeneinander (2x2) */
.app-galerie{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin:26px 0 0}
.app-galerie .abschnitt-bild{margin:0}
.app-galerie figcaption{padding:8px 12px; font-size:.8rem}
.hinweis-klein{margin:12px 0 0; font-size:.85rem; color:var(--ink-faint); text-align:center}
@media (max-width:560px){
  .app-galerie{grid-template-columns:1fr; max-width:320px; margin-left:auto; margin-right:auto}
}

/* ── Für wen das ist ───────────────────────────────────────────────────
   Steht im Kopf jeder Einstiegsseite, im selben Wortlaut. Drei von neun
   verglichenen Landingpages (10.09.) nennen ihre Zielgruppe schon in der
   Überschrift — das ist der billigste Gewinn: Es zieht die Richtigen an,
   ohne jemanden auszuschliessen, der dazugehört. */
.fuer-wen{margin:22px 0 0;max-width:34em;line-height:1.5}
.fuer-wen b{display:block;color:var(--ink);font-weight:600}
.fuer-wen span{display:block;color:var(--ink-faint);font-size:.92em;margin-top:3px}

/* Klick-Vergroesserung (22.08., Claudias Wunsch): das Bild wird im Text auf
   Shell-Breite verkleinert und wirkt dadurch weich — der Klick zeigt das
   Original in voller Schaerfe. leistung.js baut das Overlay. */
.bild-lupe{position:fixed; inset:0; z-index:60; background:rgba(4,6,8,.94);
  overflow:auto; padding:clamp(10px,3vw,30px);
  cursor:zoom-out; backdrop-filter:blur(6px)}
/* Einheitlich (23.08., Claudias Wunsch): JEDES Bild öffnet in voller Breite —
   vorher deckelte max-height die hohen Bilder auf Fensterhöhe, nur die breiten
   (z.B. Doku) wurden richtig groß. Jetzt: volle Breite, hohe Bilder scrollen
   im Overlay nach unten weiter. Nie über Originalgröße (sonst wieder unscharf). */
.bild-lupe img{display:block; width:min(100%, 1600px); height:auto; margin:0 auto;
  border:1px solid var(--line-strong); border-radius:var(--r-feld);
  box-shadow:0 24px 80px rgb(var(--schatten-ton)/.6)}
/* 06.09. (Stefans Befund): Der Hinweis stand FEST am unteren Fensterrand und
   schwebte bei hohen Bildern mitten im Screenshot mit. Jetzt läuft er im
   Fluss UNTER dem Bild — bei kurzen Bildern sofort sichtbar, bei langen
   erst, wenn man unten angekommen ist. */
.bild-lupe span{display:block; width:min(100%, 1600px); margin:14px auto 0; text-align:center;
  font-size:.85rem; color:var(--ink-soft); text-shadow:0 1px 6px rgba(0,0,0,.9);
  pointer-events:none}
/* Mehrere Aufnahmen in EINER Figur: sichtbare Naht dazwischen */
.abschnitt-bild img + img{border-top:1px solid var(--line)}
.abschnitt-bild figcaption{padding:10px 16px; font-size:.85rem; color:var(--ink-faint);
  border-top:1px solid var(--line)}
/* Sichtbarer Platzhalter, damit nichts Halbfertiges live geht */
.bild-folgt{margin:26px 0 0; border:1px dashed var(--accent); border-radius:var(--r-karte);
  background:var(--accent-wash); color:var(--accent-ink); padding:38px 20px;
  text-align:center; font-size:.95rem}

/* Ehrlichkeits-Kasten */
.hinweis{background:var(--accent-wash);
  border:1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius:var(--r-karte); padding:22px; margin-top:22px}
.hinweis h3{margin:0 0 8px; font-size:1.02rem}
.hinweis ul{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px}
.hinweis li{color:var(--ink-soft)}

/* Abschluss */
.cta{margin-top:56px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-gross); padding:clamp(24px,4vw,36px); text-align:center}
.cta h2{margin-top:0}
.cta p{max-width:34em; margin-inline:auto}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:18px}
.btn{display:inline-flex; align-items:center; gap:9px; font:inherit; font-size:.97rem; font-weight:550;
  padding:13px 22px; border-radius:var(--r-feld); border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .2s, border-color .2s}
/* 21.09.2026: Schrift richtet sich nach der Flaeche. Warmweiss auf Bernstein hatte 2,3:1
   (verlangt 4,5:1), dunkel auf Bernstein hat 7,6:1. Statt Bernstein-Leuchten ein Lichtsaum. */
.btn-primary{background:var(--accent); color:#1A1206; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgb(var(--schatten-ton)/.6)}
.btn-primary:hover{transform:translateY(-2px); background:#F09D3C}
.btn:active{transform:scale(.98)}
.btn .pfeil{width:28px; height:28px; margin:-6px -12px -6px 2px; border-radius:var(--r-fein); display:grid; place-items:center; background:rgba(26,18,6,.14); transition:transform .35s var(--ease)}
.btn-sm .pfeil{width:24px; height:24px; margin:-5px -9px -5px 0}
.btn:hover .pfeil{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn:active,.btn:hover .pfeil{transform:none}}
.btn-quiet{background:var(--ground); color:var(--ink); border-color:var(--line)}
.btn-quiet:hover{transform:translateY(-2px); border-color:var(--line-strong)}
/* 08.09.2026: Hinweis auf den zweiten Weg unter den Knöpfen */
.cta-weg{margin:18px auto 0; max-width:38em; font-size:.88rem; color:var(--ink-faint)}
.cta-weg a{color:var(--ink-soft)}

footer{border-top:1px solid var(--line); padding-block:28px}
footer p{color:var(--ink-faint); font-size:.85rem; margin:0}
/* flex-wrap ist Pflicht (10.09.2026): Ohne es laufen fuenf Links bei 375px
   19px ueber den Rand — ein Flex-Kind schrumpft nie unter seinen Inhalt,
   es reisst lieber den Rahmen auf (dieselbe Lehre wie beim Logo im Fuss
   am 30.08.). Gemessen auf paket.html, wo „Widerruf" als fuenfter Link
   dazukam. */
footer nav{display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:8px; font-size:.9rem}
footer nav a{color:var(--ink-soft); text-decoration:none}
footer nav a:hover{color:var(--ink)}

/* ---------- Soziale Netze im Footer (25.08.) ---------- */
.social{display:flex; gap:12px; margin-top:18px}
.social a{display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
  border:1px solid var(--line,#2b2b2b); border-radius:var(--r-feld); color:var(--ink-soft,#b9b9b9);
  transition:border-color .15s, color .15s}
.social a:hover,.social a:focus-visible{border-color:var(--accent,#E9922E); color:var(--accent,#E9922E)}
.social svg{width:18px; height:18px; fill:currentColor}

/* Master-Kugel (31.08.2026): bringt schwarzen Grund mit. screen
   loescht ihn auf dunklem Untergrund heraus, ohne den dunklen
   Ringkoerper wegzuschneiden wie ein Freisteller. */
.brand img, footer .brand img{mix-blend-mode:screen}

/* ---- Sprunglink (15.09.2026) --------------------------------------------
   Das erste fokussierbare Element jeder Seite. Ohne ihn muss sich jemand,
   der mit der Tastatur bedient, auf JEDER Seite erst durch die komplette
   Kopfzeile tabben (12 Stationen), bevor der Inhalt anfaengt.
   Sichtbar wird er ausschliesslich bei Tastatur-Fokus — mit der Maus
   bekommt ihn niemand zu sehen. */
.zum-inhalt{position:fixed; top:0; left:0; z-index:300;
  padding:12px 20px; background:var(--accent); color:var(--ground);
  font-weight:600; font-size:.95rem; text-decoration:none; line-height:1.2;
  border-radius:0 0 var(--r-feld,10px) 0;
  transform:translateY(-130%);
  transition:transform .18s var(--ease,ease)}
.zum-inhalt:focus{transform:translateY(0)}
/* <main> beginnt direkt unter der Kopfzeile — der Sprung soll deshalb NICHT
   scrollen, nur den Fokus hinter die Navigation setzen. Ein fester Rand
   (87 px) ging daneben: Die Kopfzeile der Startseiten ist in Ruhe 202 px
   hoch und schrumpft beim Scrollen (gemessen 15.09., Rest 97 px). 100vh
   macht das Ziel so gross, dass der Browser bei 0 stehen bleibt. */
#inhalt{scroll-margin-top:100vh}
#inhalt:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  .zum-inhalt{transition:none}
}

/* ---- Ratgeber und Branchenseiten (16.09.2026) ---------------------------
   Die Ratgeber-Seiten entstehen aus den Briefen des Hefts (ratgeber_bauen.py),
   die Branchenseiten aus branchen_bauen.py. Beide benutzen diese Vorlage;
   ein zweites Stylesheet waere der Zwilling. */
.blatt{background:#fdfcfa; color:#1b1f23; border-radius:var(--r-feld);
  padding:clamp(18px,3vw,28px); box-shadow:var(--shadow); font-size:.95rem;
  line-height:1.62; margin:22px 0 0}
.blatt .betreff{font-weight:700; border-bottom:1px solid #e2e6ea;
  padding-bottom:10px; margin-bottom:14px; font-size:.92rem}
.blatt p{margin:0 0 .85em; color:inherit}
.blatt p:last-child{margin-bottom:0}
.blatt .block{white-space:pre; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.85rem; background:#f1f4f7; border-radius:var(--r-fein); padding:11px 13px; overflow-x:auto}
.blatt-wann{color:var(--ink-faint); font-size:.88rem; font-style:italic; margin:10px 0 0}

.warum{list-style:none; padding:0; margin:14px 0 0}
.warum li{border-left:2px solid var(--accent); padding:2px 0 2px 14px; margin:0 0 14px;
  color:var(--ink-soft); line-height:1.6}
.warum li b, .warum li strong{color:var(--ink)}

.faq{margin-top:14px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:15px 34px 15px 0; position:relative;
  font-size:1.05rem; line-height:1.4; color:var(--ink); font-weight:550}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:6px; top:50%;
  transform:translateY(-50%); color:var(--accent); font-size:1.3em; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent-ink)}
.faq .antwort{margin:0 0 18px; color:var(--ink-soft); line-height:1.65}
.faq .antwort a{color:var(--accent-ink)}

/* Weiter-/Zurueck-Zeile und Uebersichtsliste */
.rg-nav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:.92rem}
.rg-nav a{color:var(--ink-soft); text-decoration:none; padding:10px 0; min-height:32px}
.rg-nav a:hover{color:var(--accent-ink)}
.rg-liste{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.rg-liste li{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-karte);
  padding:16px 18px; transition:transform .3s var(--ease), border-color .2s}
.rg-liste li:hover{transform:translateY(-3px); border-color:var(--line-strong)}
.rg-liste a{color:var(--ink); text-decoration:none; font-weight:550; display:flex; align-items:center; min-height:32px}
.rg-liste small{display:block; color:var(--ink-faint); margin-top:4px; font-size:.88rem}
.rg-liste .nr{color:var(--accent-ink); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase}

/* Tabelle auf Branchenseiten: links das Problem, rechts was das System tut */
.vergleich{width:100%; border-collapse:collapse; margin:18px 0 0; font-size:.95rem}
.vergleich th, .vergleich td{text-align:left; vertical-align:top; padding:12px 14px;
  border-bottom:1px solid var(--line)}
.vergleich th{color:var(--ink-faint); font-weight:600; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.1em}
.vergleich td{color:var(--ink-soft)}
.vergleich td:first-child{color:var(--ink)}
@media (max-width:600px){
  .vergleich thead{display:none}
  .vergleich tr{display:block; padding:10px 0; border-bottom:1px solid var(--line)}
  .vergleich td{display:block; border:0; padding:4px 0}
  .vergleich td:first-child{font-weight:600}
}
@media (prefers-reduced-motion:reduce){
  .rg-liste li{transition:none}
}

/* ---- Ratgeber-Uebersicht als Splitscreen (17.09.2026) ------------------
   Links die Branchen, rechts die Goodies in zugeklappten Kategorien: Google
   liest alles, der Mensch nur die Ueberschriften. Die Seite bricht dafuer aus
   der 760-px-Lesebreite aus. */
main:has(.rg-split) .shell{width:min(1140px, 100% - 2*var(--pad))}
.rg-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,56px); align-items:start; margin-top:8px}
.rg-split h2{margin-top:0}
.rg-split h3{font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-faint); margin:26px 0 10px}
.rg-rechts{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-gross); padding:clamp(18px,3vw,28px)}
.rg-rechts > p{font-size:.92rem}
.rg-kat{border-top:1px solid var(--line)}
.rg-kat summary{cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:2px; padding:13px 30px 13px 0; position:relative; min-height:32px}
.rg-kat summary::-webkit-details-marker{display:none}
.rg-kat summary span{color:var(--ink); font-weight:550}
.rg-kat summary small{color:var(--ink-faint); font-size:.82rem}
.rg-kat summary::after{content:"+"; position:absolute; right:4px; top:12px; color:var(--accent); font-size:1.3em; line-height:1}
.rg-kat[open] summary::after{content:"\2212"}
.rg-kat summary:hover span{color:var(--accent-ink)}
.rg-kompakt{list-style:none; padding:0 0 12px; margin:0}
.rg-kompakt li{padding:6px 0}
.rg-kompakt a{color:var(--ink-soft); text-decoration:none; font-size:.93rem; line-height:1.4; display:block; padding:4px 0; min-height:32px}
.rg-kompakt a:hover{color:var(--accent-ink)}
.rg-kompakt small{display:block; color:var(--ink-faint); font-size:.82rem}
.rg-mehr{font-size:.85rem; color:var(--ink-faint); margin:14px 0 0}
@media (max-width:900px){ .rg-split{grid-template-columns:1fr} }