@charset "utf-8";
/* ==========================================================================
   pbefg-gutachten.de — projekteigene Stilvorlage
   Wird nach schriften.css, stil-basis.css, stil-verlauf.css und stil-v2.css
   geladen (Kopien der SIKURA-Stilvorlagen, Inhalt unverändert, Bauanleitung
   Teil 2 Abschnitt 7.1). Seit 14.10.2026 setzt diese Datei den Zielzustand
   nach DESIGN.md um: Sie überschreibt die Variablen der Basisvorlage und die
   Regeln mit fest eingetragenen Werten. Die SIKURA-Kopien bleiben unverändert.
   Farben, Radien, Abstände und Schatten nur über die Variablen in Abschnitt 0.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0  Variablen (DESIGN.md, Zielzustand 13.10.2026)
   -------------------------------------------------------------------------- */
:root {
  /* Buntfarben */
  --core-hell: #3257BC;
  --core-dunkel: #05164D;
  --signalgelb: #FFC300;
  /* Neutralfarben */
  --text-stark: #14181F;
  --text-body: #2B3138;    /* Fließtext dunkler (Entscheidung Michael 14.10.2026; DESIGN.md: #4E555E) */
  --text-leise: #6E7681;
  --weiss: #FFFFFF;
  --flaeche-seite: #F5F7FA;
  --flaeche-vertieft: #EDF0F4;
  --linie-haar: #E3E8EE;
  --linie-feld: #D3DAE2;
  --linie-stark: #C7CED6;
  /* Radien */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  /* Schatten und Fokus */
  --schatten-karte: 0 1px 3px rgba(5,22,77,.08), 0 1px 2px rgba(5,22,77,.04);
  --schatten-karte-hoch: 0 6px 16px -4px rgba(5,22,77,.12), 0 2px 5px -2px rgba(5,22,77,.07);
  --fokus-hell: 0 0 0 2px #FFFFFF, 0 0 0 5px #3257BC;
  --fokus-dunkel: 0 0 0 2px #05164D, 0 0 0 5px #FFFFFF;
  /* Bewegung */
  --dauer-kurz: 140ms; --dauer-mittel: 220ms;
  --kurve: cubic-bezier(.2,.6,.2,1);
  /* Raster */
  --inhalt: 1240px; --rand: 40px; --spalten-abstand: 24px;
  --textspalte: 35em;   /* 65–75 Zeichen in Carlito */
  --fliess: 19px;       /* Fließtext ab 760 px (Entscheidung Michael 14.10.2026) */
  --lead: 21px;
  --h2: 36px;
  /* Helle Blautöne der Grafik „360 Grad“, aus #3257BC mit Weiß gemischt
     (15 % und 25 % Deckung) */
  --blau-hell-1: #E0E6F5;
  --blau-hell-2: #CCD5EE;

  /* Variablen der Basisvorlage auf die Zielwerte umgelegt */
  --mid: var(--core-dunkel);
  --mid-soft: var(--core-hell);
  --amb: var(--signalgelb);
  --amb-active: var(--signalgelb);
  --white: var(--weiss);
  --surf: var(--flaeche-seite);
  --surf-mid: var(--flaeche-vertieft);
  --surf-dark: var(--flaeche-vertieft);
  --ink: var(--text-stark);
  --body: var(--text-body);
  --muted: var(--text-body);
  --kontext: var(--text-body);
  --border: var(--linie-haar);
  --linie: var(--core-hell);
  --border-dark: var(--linie-stark);
  --silver: var(--weiss);
  --r-gross: var(--r-md);
  --r-karte: var(--r-sm);
  --r-klein: var(--r-xs);
  --head: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --text: "Carlito", Calibri, "Roboto", Arial, sans-serif;
  --col-content: calc(var(--inhalt) + 2 * var(--rand));
  --col-text: var(--textspalte);
  --s-section: 104px;
}
@media (max-width: 767px) {
  :root { --s-section: 64px; }
}
@media (max-width: 759px) {
  :root { --fliess: 17px; --lead: 19px; --h2: 28px; }
}
@media (max-width: 599px) {
  :root { --rand: 20px; }
}

/* --------------------------------------------------------------------------
   1  Grundschrift, Überschriften, Kontextzeile
   -------------------------------------------------------------------------- */
/* Fließtext 19 px ab 760 px, 17 px darunter (Entscheidung Michael 14.10.2026;
   Abweichung von DESIGN.md „Body 16 px“, Änderung dort vorgeschlagen). */
body { font-size: var(--fliess); line-height: 1.6; }
p, li { font-size: var(--fliess); line-height: 1.6; }
@media (max-width: 767px) {
  body, p, li, .fuss li { font-size: var(--fliess); }
}
/* Hauptüberschrift: keine automatische Silbentrennung; getrennt wird nur an
   den weichen Trennstellen der Seite (Personen|beförderungs|gesetz,
   Genehmigungs|behörden). Überschreibt „hyphens: auto“ aus stil-v2.css. */
h1, .hero h1 {
  font-family: var(--head); font-size: 60px; font-weight: 700;
  line-height: 1.06; letter-spacing: -0.025em;
  hyphens: manual; -webkit-hyphens: manual;
}
/* Abschnittsüberschriften 36 px ab 760 px, 28 px darunter; keine automatische
   Silbentrennung (überschreibt „hyphens: auto“ aus stil-v2.css). */
h2 {
  font-family: var(--head); font-size: var(--h2); font-weight: 700;
  line-height: 1.2; letter-spacing: -0.015em;
  hyphens: manual; -webkit-hyphens: manual;
}
h3 {
  font-family: var(--head); font-size: 20px; font-weight: 700;
  line-height: 1.24; letter-spacing: 0;
}
@media (max-width: 1023px) {
  h1, .hero h1 { font-size: 48px; letter-spacing: -0.015em; }
}
@media (max-width: 767px) {
  h2 { font-size: var(--h2); }
  h3 { font-size: 20px; }
}
@media (max-width: 599px) {
  h1, .hero h1 { font-size: 38px; }
}
.lead { font-size: var(--lead); line-height: 1.6; }
@media (max-width: 767px) { .lead { font-size: var(--lead); } }
.kontext {
  font-family: var(--head); font-size: 12px; font-weight: 500;
  line-height: 1.2; letter-spacing: 0.08em;
}

/* Signallinie über jeder Abschnittsüberschrift in Signalgelb (Entscheidung
   Michael 14.10.2026, ersetzt die Ein-Gelb-Regel). Gelb nur als Fläche mit
   dunkler Schrift oder als Linie, nie als Schriftfarbe. */
.signallinie { height: 4px; background: var(--signalgelb); }

/* --------------------------------------------------------------------------
   2  Raster: Inhalt höchstens 1240 px, 12 Spalten, 24 px Abstand
   -------------------------------------------------------------------------- */
.wrap, .kopf__innen { padding-left: var(--rand); padding-right: var(--rand); }
@media (max-width: 767px) {
  .kopf__innen { padding-left: var(--rand); padding-right: var(--rand); }
}
.satz, .fuss__gitter {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalten-abstand);
}
.satz > * { grid-column: 1 / span 8; }
.fuss__gitter > :first-child { grid-column: 1 / span 6; }
.fuss__gitter > :last-child { grid-column: 7 / span 6; }
@media (max-width: 1103px) {
  .satz, .fuss__gitter { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .satz > * { grid-column: 1 / span 10; }
}
.satz p, .satz .lead, .satz ul.liste, .blick dd, .hinweis p { max-width: var(--textspalte); }

/* --------------------------------------------------------------------------
   3  Fokus: Ring als box-shadow (Sichtbarer-Fokus-Regel)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: var(--fokus-hell);
}
.flaeche--dunkel :focus-visible, .hero :focus-visible {
  outline-color: transparent;
  box-shadow: var(--fokus-dunkel);
}
.sprungmarke {
  background: var(--core-dunkel); color: var(--weiss);
  font-family: var(--head); font-size: 14px; font-weight: 500;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   4  Schaltflächen
   -------------------------------------------------------------------------- */
.knopf {
  min-height: 42px; padding: 0 18px;
  border-radius: var(--r-sm);
  font-family: var(--head); font-size: 14px; font-weight: 500; line-height: 1.25;
  transition: background-color var(--dauer-kurz) var(--kurve),
              color var(--dauer-kurz) var(--kurve),
              border-color var(--dauer-kurz) var(--kurve),
              transform var(--dauer-kurz) var(--kurve);
}
.knopf:active { transform: translateY(1px); }
.knopf--primaer { min-height: 52px; background: var(--core-hell); color: var(--weiss); }
.knopf--primaer:hover, .knopf--primaer:active { background: var(--core-dunkel); }
.knopf--sekundaer { background: var(--weiss); color: var(--core-hell); border-color: var(--core-hell); }
.knopf--sekundaer:hover { background: var(--flaeche-seite); }
/* Auf dem Verlauf: Primärschaltfläche in Signalgelb mit Schrift Core Blue dunkel
   (Entscheidung Michael 14.10.2026), beim Überfahren weiß; Sekundärschaltfläche
   als weißer Rahmen mit weißer Schrift (Weiß-auf-Blau-Regel). */
.hero .knopf--primaer, .flaeche--dunkel .knopf--primaer {
  background: var(--signalgelb); color: var(--core-dunkel);
}
.hero .knopf--primaer:hover, .flaeche--dunkel .knopf--primaer:hover,
.hero .knopf--primaer:active, .flaeche--dunkel .knopf--primaer:active { background: var(--weiss); }
.hero .knopf--sekundaer, .flaeche--dunkel .knopf--sekundaer {
  background: transparent; color: var(--weiss); border-color: var(--weiss);
  min-height: 52px;   /* gleich hoch wie die Primärschaltfläche daneben */
}
.hero .knopf--sekundaer:hover, .flaeche--dunkel .knopf--sekundaer:hover {
  background: var(--weiss); color: var(--core-dunkel);
}
.knopf--klein { min-height: 34px; padding: 0 14px; }
.kopf nav a.knopf { padding: 0 14px; }

/* --------------------------------------------------------------------------
   5  Kopfzeile: Logo, Menü zum Aufklappen (Teil 2 Abschnitt 4.1 und 5)
   -------------------------------------------------------------------------- */
.kopf { border-bottom: 1px solid var(--linie-haar); }
.kopf nav a { font-family: var(--head); font-size: 14px; font-weight: 500; }
.kopf nav a:not(.knopf) { border-radius: var(--r-xs); }
.kopf nav a:not(.knopf):hover { color: var(--core-hell); }
.kopf nav a.knopf { color: var(--weiss); }
.logo { display: block; flex: 0 0 auto; line-height: 0; border-radius: var(--r-xs); }
.logo img { height: 40px; width: auto; }
.menueknopf {
  display: none;
  margin-left: auto;
  min-height: 42px; padding: 0 18px;
  font-family: var(--head); font-size: 14px; font-weight: 500; line-height: 1.25;
  color: var(--core-hell); background: var(--weiss);
  border: 1px solid var(--core-hell); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.menueknopf:hover { background: var(--flaeche-seite); }

/* Menü zum Aufklappen bis 1103 px: darüber passt die Navigation in eine Zeile,
   darunter brach sie bisher in eine zweite Zeile um (Korrektur M3, 14.10.2026). */
@media (max-width: 1103px) {
  .kopf { position: sticky; }
  .kopf__innen {
    height: auto; min-height: 72px; flex-wrap: wrap; row-gap: 0;
    padding-top: var(--s-sm); padding-bottom: var(--s-sm);
  }
  .kopf nav { margin-left: 0; width: 100%; flex-wrap: nowrap; }
  .menueknopf { display: inline-flex; align-items: center; }
  /* Ohne Skript bleibt die Navigation offen; mit Skript startet sie eingeklappt. */
  .js .kopf nav { display: none; }
  .js .kopf--offen nav { display: flex; }
  .kopf nav {
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: var(--s-xs) 0 var(--s-md);
  }
  .kopf nav a, .kopf nav a:not(.knopf) { font-size: 16px; }
  .kopf nav a:not(.knopf) {
    display: block; width: 100%; padding: var(--s-sm) 0;
    border-top: 1px solid var(--linie-haar); border-radius: 0;
  }
  .kopf nav .knopf { margin-top: var(--s-md); min-height: 42px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 767px) {
  .logo img { height: 32px; }
}

/* --------------------------------------------------------------------------
   6  Kopfbereich ohne Partikelbild (Teil 2 Abschnitt 2.4)
      Verlauf aus stil-verlauf.css (#3257BC → #05164D, 135°), keine Bewegung.
   -------------------------------------------------------------------------- */
.hero--start { min-height: 0; padding: var(--s-section) 0; }
.hero--start .lead { max-width: var(--textspalte); }
.hero--start .knopfreihe { margin-top: var(--s-xl); }
@media (max-width: 767px) {
  .hero--start { min-height: 0; padding: var(--s-section) 0; }
}

/* --------------------------------------------------------------------------
   7  Rundumblick: Text links, Bildmotiv rechts (Teil 2 Abschnitt 6, Platz)
   -------------------------------------------------------------------------- */
.rundum {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalten-abstand);
  align-items: start;
}
.rundum__text { grid-column: 1 / span 6; }
.rundum__bild { grid-column: 7 / span 6; }
/* Das Motiv bleibt beim Lesen der fünf Erläuterungen neben dem Text stehen. */
.rundum__bild { position: sticky; top: calc(72px + var(--s-xl)); }
.blick { margin: 0; }
.blick dt {
  font-family: var(--head); font-size: 20px; font-weight: 700; line-height: 1.24;
  color: var(--text-stark); margin: var(--s-lg) 0 var(--s-xs);
}
.blick dt:first-child { margin-top: 0; }
.blick dd { margin: 0; font-size: var(--fliess); line-height: 1.6; }

.motiv360 { margin: 0; }
.motiv360__ring { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; }
/* Die Flächenfarben stehen als SVG-Attribute in der Seite (grafiken.js);
   CSS hat Vorrang vor diesen Attributen. */
.motiv360__ring path[fill="#C8DCF9"] { fill: var(--blau-hell-1); }
.motiv360__ring path[fill="#A7C7F6"] { fill: var(--blau-hell-2); }
.motiv360__ring path { stroke: var(--core-dunkel); }
.motiv360__ring circle { fill: var(--core-dunkel); stroke: var(--signalgelb); }
.motiv360__ring .m1 { font-family: var(--head); font-weight: 700; font-size: 25px; fill: var(--text-stark); }
.motiv360__ring .m2 { font-family: var(--text); font-weight: 400; font-size: 18px; fill: var(--text-body); }
.motiv360__ring .m3 { font-family: var(--head); font-weight: 700; font-size: 27px; fill: var(--weiss); }
.motiv360__ring .m4 { font-family: var(--text); font-weight: 400; font-size: 18px; fill: var(--weiss); }
.motiv360__liste { display: none; }

/* Unter 1.000 px reicht der Platz nicht für Text und Motiv nebeneinander:
   Das Motiv rückt unter den Text. */
@media (max-width: 999px) {
  .rundum { row-gap: var(--s-xxl); }
  .rundum__text, .rundum__bild { grid-column: 1 / -1; }
  .rundum__bild { position: static; }
}
/* Unter 760 px: Liste statt Ring, gleicher Text (Teil 2 Abschnitt 6, Mobilgeräte). */
@media (max-width: 759px) {
  .rundum { row-gap: var(--s-xl); }
  .motiv360__ring { display: none; }
  .motiv360__liste {
    display: grid; gap: var(--s-sm);
    list-style: none; margin: 0; padding: 0;
  }
  .motiv360__liste li {
    margin: 0; padding: var(--s-md) var(--s-lg);
    background: var(--blau-hell-1); color: var(--text-body);
    border: 1.5px solid var(--core-dunkel); border-radius: var(--r-md);
    font-size: var(--fliess); line-height: 1.6;
  }
  .motiv360__liste li:nth-child(even) { background: var(--blau-hell-2); }
  .motiv360__liste strong {
    display: block; font-family: var(--head); font-size: 20px; line-height: 1.24;
    color: var(--text-stark); margin-bottom: var(--s-xxs);
  }
  .motiv360__liste .motiv360__mitte {
    background: var(--core-dunkel); color: var(--weiss);
    border: 3px solid var(--signalgelb);
  }
  .motiv360__liste .motiv360__mitte strong { color: var(--weiss); }
}

/* --------------------------------------------------------------------------
   8  Leistungskarten (DESIGN.md, Komponente „leistungskarte“)
      Weiß, Haarlinie, 14 px Radius, Schatten „Karte“, 24 px Innenabstand.
      Die ganze Karte ist anklickbar; der Verweis liegt auf der Überschrift.
   -------------------------------------------------------------------------- */
.leistungen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--spalten-abstand);
  margin-top: var(--s-xl);
}
.leistung { grid-column: span 2; }
.leistung:nth-child(4), .leistung:nth-child(5) { grid-column: span 3; }
.leistung {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie-haar);
  border-radius: var(--r-md);
  box-shadow: var(--schatten-karte);
  padding: var(--s-lg);
  transition: box-shadow var(--dauer-mittel) var(--kurve);
}
.leistung:hover { box-shadow: var(--schatten-karte-hoch); }
.leistung h3 { margin: 0 0 var(--s-sm); }
.leistung h3 a {
  color: var(--text-stark);
  /* 2 px statt 1 px: Bei 1-px-Linie und gebrochener Lage der Karte (y = 437,8 px)
     wirkte die Unterstreichung bei 100 % Bildschirmskalierung in der oberen
     Reihe dunkler oder verschwand (Prüfung 14.10.2026). */
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px; text-decoration-color: var(--core-hell);
  transition: color var(--dauer-kurz) var(--kurve);
}
.leistung h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.leistung:hover h3 a { color: var(--core-hell); text-decoration-color: currentColor; }
.leistung h3 a:focus-visible { outline: 2px solid transparent; box-shadow: none; }
.leistung:has(a:focus-visible) { box-shadow: var(--schatten-karte-hoch), var(--fokus-hell); }
.leistung p { margin: 0 0 var(--s-md); }
.leistung p.leistung__dauer {
  margin: auto 0 0; padding-top: var(--s-sm);
  border-top: 1px solid var(--linie-haar);
  font-family: var(--head); font-size: 14px; font-weight: 500; line-height: 1.25;
  font-variant-numeric: tabular-nums; color: var(--text-stark);
}
.leistung__dauer span { font-weight: 700; margin-right: var(--s-xxs); }

@media (max-width: 900px) {
  .leistungen { gap: var(--s-md); }
  .leistung, .leistung:nth-child(4) { grid-column: span 1; }
  .leistung:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .leistungen { grid-template-columns: minmax(0, 1fr); }
  .leistung:nth-child(5) { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   9  Hinweiskasten: Seitenfläche, 14 px Radius, ohne Seitenstreifen
   -------------------------------------------------------------------------- */
.hinweis {
  background: var(--flaeche-seite);
  border-radius: var(--r-md);
  padding: var(--s-lg);
  margin: 0;
}
.hinweis p { margin: 0; }
.hinweis p + p { margin-top: var(--s-md); }
.hinweis strong { font-family: var(--head); font-weight: 700; color: var(--text-stark); }

/* --------------------------------------------------------------------------
   10 Fußzeile: Logo StrategieWerkzeug (Teil 2 Abschnitt 5)
   -------------------------------------------------------------------------- */
.fuss { background: var(--flaeche-seite); border-top: 1px solid var(--linie-haar); }
.fuss__rueckweg { border-top-color: var(--linie-stark); }
.fuss__logo { margin: 0 0 var(--s-md); line-height: 0; }
.fuss__logo img { height: 32px; width: auto; }
.fuss p, .fuss li { font-size: var(--fliess); }
.fuss a { border-radius: var(--r-xs); }
.fuss__recht li { font-size: 16px; }   /* Restpunkt DESIGN.md: 14 px zu klein (19.10.2026) */
.fuss__stand { font-size: 14px; color: var(--text-body); }

/* --------------------------------------------------------------------------
   11 Bewegung: bei reduzierter Bewegung keine Übergänge
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .knopf, .menueknopf, .leistung, .leistung h3 a { transition: none; }
  .knopf:active { transform: none; }
}

/* ==========================================================================
   Arbeitspaket 3b (19.10.2026): Texte nach Textkonzept Fassung 5,
   Leistungskarten mit Einzelheiten, Nutzen, Schritte, Häufige Fragen,
   Kontaktformular, Unterseiten Impressum und Datenschutzerklärung.
   Werte nur über die Variablen aus Abschnitt 0 (DESIGN.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   12 Leistungskarten mit Rechtsgrundlage, Dauer und Einzelheiten
   -------------------------------------------------------------------------- */
.leistungen { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Zwei Spalten statt drei (19.10.2026): Die Einzelheiten bleiben in der Karte
   lesbar (rund 60 Zeichen je Zeile); die fünfte Karte nimmt die ganze Breite ein. */
.leistung, .leistung:nth-child(4) { grid-column: auto; }
.leistung:nth-child(5) { grid-column: 1 / -1; }
@media (max-width: 759px) {
  .leistungen { grid-template-columns: minmax(0, 1fr); }
  .leistung:nth-child(5) { grid-column: auto; }
}
.leistung h3 { color: var(--text-stark); }
.leistung__fakten {
  margin: auto 0 0; padding-top: var(--s-sm);
  border-top: 1px solid var(--linie-haar);
  display: grid; gap: var(--s-xs);
}
.leistung__fakten div { display: grid; gap: 2px; }
.leistung__fakten dt, .leistung__fakten dd {
  margin: 0; font-family: var(--head); font-size: 14px; line-height: 1.35;
  font-variant-numeric: tabular-nums; color: var(--text-stark);
}
.leistung__fakten dt { font-weight: 700; }
.leistung__fakten dd { font-weight: 500; }
.leistung__mehr { margin-top: var(--s-md); }
.leistung__mehr summary {
  display: inline-flex; align-items: center; gap: var(--s-xs);
  min-height: 42px; padding: 0 18px;
  font-family: var(--head); font-size: 14px; font-weight: 500;
  color: var(--core-hell); background: var(--weiss);
  border: 1px solid var(--core-hell); border-radius: var(--r-sm);
  cursor: pointer; list-style: none;
  transition: background-color var(--dauer-kurz) var(--kurve);
}
.leistung__mehr summary::-webkit-details-marker { display: none; }
.leistung__mehr summary::after {
  content: ""; width: 8px; height: 8px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dauer-kurz) var(--kurve);
}
.leistung__mehr[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.leistung__mehr summary:hover { background: var(--flaeche-seite); }
.leistung__angaben { margin: var(--s-lg) 0 0; max-width: 52em; }
.leistung__angaben dt {
  font-family: var(--head); font-size: 16px; font-weight: 700; color: var(--text-stark);
  margin: var(--s-md) 0 var(--s-xxs);
}
.leistung__angaben dt:first-child { margin-top: 0; }
.leistung__angaben dd { margin: 0; font-size: var(--fliess); line-height: 1.6; }
.leistung a { color: var(--core-hell); }

/* --------------------------------------------------------------------------
   13 Nutzen: sechs Punkte im Raster
   -------------------------------------------------------------------------- */
.punkte {
  list-style: none; margin: var(--s-xl) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-xl) var(--spalten-abstand);
}
.punkte li { margin: 0; padding-top: var(--s-md); border-top: 2px solid var(--core-hell); }
.punkte h3 { margin: 0 0 var(--s-xs); }
.punkte p { margin: 0; }
@media (max-width: 999px) { .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .punkte { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   14 Vorgehen: nummerierte Schritte
   -------------------------------------------------------------------------- */
.ablauf { list-style: none; margin: var(--s-lg) 0 var(--s-xl); padding: 0; counter-reset: schritt; border: 0; border-radius: 0; background: none; }
.ablauf li {
  counter-increment: schritt; position: relative;
  margin: 0; padding: 0 0 var(--s-lg) 64px; max-width: calc(var(--textspalte) + 64px);
}
.ablauf li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--head); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--weiss); background: var(--core-hell);
}
.ablauf li:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 48px; bottom: 8px;
  width: 2px; background: var(--linie-stark);
}
.ablauf h3 { margin: 8px 0 var(--s-xs); }
.ablauf p { margin: 0; }
.flaeche--ruhig p.hinweis { background: var(--weiss); padding: var(--s-lg); }

/* --------------------------------------------------------------------------
   15 Häufige Fragen: aufklappbar
   -------------------------------------------------------------------------- */
.fragen { margin-top: var(--s-lg); border-top: 1px solid var(--linie-stark); }
.frage { border-bottom: 1px solid var(--linie-stark); }
.frage summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--s-md) 40px var(--s-md) 0;
  font-family: var(--head); font-size: 18px; font-weight: 700; line-height: 1.3;
  color: var(--text-stark); border-radius: var(--r-xs);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--core-hell); border-bottom: 2px solid var(--core-hell);
  transform: rotate(45deg); transition: transform var(--dauer-kurz) var(--kurve);
}
.frage[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.frage summary:hover { color: var(--core-hell); }
.frage p { margin: 0 0 var(--s-lg); }

/* --------------------------------------------------------------------------
   16 Kontakt: eigene Seite kontakt.html (19.10.2026, wie bei SIKURA).
   Formular links, Kasten „Direkt erreichen“ rechts; Verweisabschnitt am
   Ende der Startseite.
   -------------------------------------------------------------------------- */
.kontakt {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--spalten-abstand); row-gap: var(--s-xl);
  margin-top: var(--s-xl); align-items: start;
}
.formular { grid-column: 1 / span 7; display: grid; gap: var(--s-lg); }
.kontaktweg {
  grid-column: 9 / span 4;
  padding: var(--s-lg) var(--s-lg) var(--s-md);
  background: var(--flaeche-seite);
  border-top: 3px solid #FFC300;          /* Signalgelb nur als Linie (DESIGN.md) */
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.kontaktweg .kontext { margin: 0 0 var(--s-md); }
.kontaktweg p { margin: 0 0 var(--s-md); font-size: 17px; line-height: 1.5; color: var(--text-stark); overflow-wrap: anywhere; }
.kontaktweg__art {
  font-family: var(--head); font-size: 14px; font-weight: 500; color: var(--text-body);
}
.kontaktweg a { color: var(--core-hell); }
.flaeche--kontaktverweis .knopfreihe { margin-top: var(--s-lg); }
.formular__paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg) var(--spalten-abstand); }
.feld { display: grid; gap: var(--s-xs); }
.feld label {
  font-family: var(--head); font-size: 14px; font-weight: 500; line-height: 1.25;
  color: var(--text-stark);
}
.feld .pflicht, .feld .freiwillig { font-weight: 400; color: var(--text-body); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 42px; padding: 0 14px;
  font-family: var(--text); font-size: 17px; color: var(--text-stark);
  background: var(--weiss); border: 1px solid var(--linie-feld); border-radius: var(--r-sm);
  transition: border-color var(--dauer-kurz) var(--kurve);
}
.feld textarea { padding: 10px 14px; line-height: 1.5; resize: vertical; }
.feld select { appearance: auto; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--linie-stark); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { border-color: var(--core-hell); }
/* Falle für automatische Eintragungen: aus dem Fluss genommen, nicht fokussierbar. */
.feld--falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formular__hinweis { margin: 0; font-size: 16px; }
.formular .knopf { justify-self: start; border: 0; cursor: pointer; }
.formmeldung {
  display: none; max-width: var(--textspalte);
  margin: var(--s-lg) 0 0; padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-md); background: var(--flaeche-seite);
  border-left: 4px solid var(--core-hell);
}
.formmeldung--fehler { border-left-color: #C0362C; }   /* Statusfarbe aus DESIGN.md, nur Status */
.formmeldung:target { display: block; }
@media (max-width: 999px) {
  .formular, .kontaktweg { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  .formular__paar { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   17 Unterseiten: Impressum und Datenschutzerklärung
   -------------------------------------------------------------------------- */
.hero--unterseite { padding: var(--s-xxxl) 0; }
.hero--unterseite h1 { font-size: 48px; line-height: 1.16; letter-spacing: -0.015em; }
@media (max-width: 599px) { .hero--unterseite h1 { font-size: 38px; } }
.rechtstext h2 { font-size: 24px; line-height: 1.25; margin: var(--s-xl) 0 var(--s-sm); }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 var(--s-md); }

@media (prefers-reduced-motion: reduce) {
  .leistung__mehr summary, .leistung__mehr summary::after, .frage summary::after,
  .feld input, .feld select, .feld textarea { transition: none; }
}

/* Seit 20.10.2026 (Auftrag Michael Mühlin): Belegleiste im Kopfbereich und Abschnitt Zusagen. Randlinien hellblau, weil Signalgelb je Ansicht nur einmal hervorhebt. */
.belegleiste {
  list-style: none; margin: var(--s-xxl) 0 0; padding: var(--s-lg) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-lg);
  border-top: 1px solid rgba(255,255,255,.28);
}
.belegleiste li {
  margin: 0; padding-left: var(--s-md); border-left: 2px solid var(--verlauf-linie);
  color: var(--verlauf-text-zweit); font-size: 17px; line-height: 1.45;
}
.belegleiste strong { display: block; color: var(--weiss); font-family: var(--head); font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
@media (max-width: 999px) { .belegleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .belegleiste { grid-template-columns: minmax(0, 1fr); gap: var(--s-md); margin-top: var(--s-xl); } }
.unterschiede__einleitung { max-width: var(--textspalte); margin: 0 0 var(--s-xl); }
.unterschiede { margin: 0; border-top: 1px solid var(--linie-feld); }
.unterschied {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--spalten-abstand);
  padding: var(--s-xl) 0; border-bottom: 1px solid var(--linie-feld);
}
.unterschied dt { margin: 0; font-family: var(--head); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--text-stark); }
.unterschied dd { margin: 0; max-width: var(--textspalte); }
.unterschied dd p { margin: 0; }
.unterschied__nachweis { margin-top: var(--s-sm) !important; font-size: 16px; color: var(--text-body); padding-left: var(--s-sm); border-left: 2px solid var(--core-hell); }
@media (max-width: 759px) { .unterschied { grid-template-columns: minmax(0, 1fr); gap: var(--s-sm); padding: var(--s-lg) 0; } .unterschied dt { font-size: 20px; } }

/* Porträt im Abschnitt Gutachter: rechts neben dem Text ab 1.104 px; darunter über dem Text. */
#gutachter .satz > .portraet { grid-column: 9 / span 4; grid-row: 3 / span 6; margin: 0; }
#gutachter .portraet img { display: block; width: 100%; height: auto; border-radius: var(--r-karte); }
@media (max-width: 1103px) {
  #gutachter .satz > .portraet { grid-column: 1 / -1; grid-row: auto; max-width: 360px; margin: 0 0 var(--s-lg, 24px); }
}