/* ==========================================================================
   Brandschutzservice Schulz — Corporate Design
   Farben und Typografie abgeleitet aus Logo (#A01008 / #262425) und
   Angebotsflyer "Führungskräfte-Intensivtraining".
   ========================================================================== */

@import url("fonts.css");

:root{
  /* Marke */
  --rot:            #A01008;
  --rot-dunkel:     #7C0C06;
  --rot-hell:       #F0594A;   /* Signalrot auf dunklem Grund, kontraststark */
  --anthrazit:      #262425;
  --anthrazit-tief: #1A1819;

  /* Flaechen & Text */
  --weiss:      #FFFFFF;
  --grau-bg:    #F6F5F5;
  --grau-linie: #E3E0E1;
  --grau-text:  #565254;   /* rund 67 % Schwarz — Vorspann auf hellem Grund */
  --grau-hell:  #B9B4B6;
  --lead-dunkel:#CBC6C7;   /* Vorspann auf dunklem Grund                    */

  /* Typografie */
  --font-text:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-marke: "Montserrat", "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  /* Typografische Stufen — Faktor rund 1,5 zwischen den Ebenen:
     Fliesstext 17 → Vorspann 24 → H2 38 → H1 58 (Werte bei grossem Viewport). */
  --fs-body:       1.0625rem;                          /* 17 px            */
  --fs-lead:       clamp(1.3rem, .95rem + 1vw, 1.5rem); /* 20,8 – 24 px    */
  --fs-h3-klein:   1.2rem;                             /* 19,2 px          */
  --fs-h3:         1.5rem;                             /* 24 px            */
  --fs-h2:         clamp(1.8rem, 1.25rem + 2vw, 2.4rem); /* 28,8 – 38,4 px */
  --fs-h1:         clamp(2.4rem, 1.4rem + 4vw, 3.6rem);  /* 38,4 – 57,6 px */
  --fs-dachzeile:  .72rem;                             /* 11,5 px, Versal  */

  /* Naehe-Prinzip: Der Vorspann steht dicht an der Ueberschrift, der Abstand
     zum folgenden Inhalt ist mindestens doppelt so gross. */
  --abstand-dachzeile: .8rem;
  --abstand-vorspann:  .75rem;

  /* Raster */
  --breite: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
}

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

html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--weiss);
  color:var(--anthrazit);
  font-family:var(--font-text);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; display:block; }
a{ color:var(--rot); }

h1,h2,h3,h4{ font-weight:800; letter-spacing:-.022em; line-height:1.12; margin:0; text-wrap:balance; }

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

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--rot); outline-offset:2px;
}

/* --- Wiederkehrende Bausteine ------------------------------------------- */

.eyebrow{
  font-family:var(--font-marke); font-weight:700;
  font-size:var(--fs-dachzeile); letter-spacing:.2em; text-transform:uppercase;
  color:var(--rot); margin:0 0 var(--abstand-dachzeile);
}
.eyebrow--dunkel{ color:var(--rot-hell); }

.kicker{
  font-family:var(--font-marke); font-weight:600;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grau-text);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-marke); font-weight:700;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  padding:1rem 1.6rem; border:2px solid transparent; border-radius:2px;
  text-decoration:none; cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--rot{   background:var(--rot); color:#fff; border-color:var(--rot); }
.btn--rot:hover{ background:var(--rot-dunkel); border-color:var(--rot-dunkel); }
.btn--linie{ background:transparent; color:var(--anthrazit); border-color:var(--anthrazit); }
.btn--linie:hover{ background:var(--anthrazit); color:#fff; }
.btn--hell{  background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn--hell:hover{ background:#fff; color:var(--anthrazit); border-color:#fff; }

.abschnitt{ padding:clamp(64px,9vw,110px) 0; }
.abschnitt--grau{   background:var(--grau-bg); }
.abschnitt--dunkel{ background:var(--anthrazit); color:#fff; border-top:3px solid var(--rot); }
.abschnitt--dunkel h2,.abschnitt--dunkel h3{ color:#fff; }

/* Breite je Ebene: Dachzeile darf durchlaufen, Ueberschrift bricht frueher,
   der Vorspann bleibt bei rund 45 Zeichen Zeilenlaenge. */
.abschnitt__kopf{ max-width:660px; margin-bottom:clamp(40px,5.5vw,64px); }
.abschnitt__kopf h2{ max-width:15em; }
.abschnitt__kopf h2{ font-size:var(--fs-h2); }
.abschnitt__kopf p{ color:var(--grau-text); font-size:var(--fs-lead); line-height:1.5;
  margin:var(--abstand-vorspann) 0 0; max-width:42ch; }
.abschnitt--dunkel .abschnitt__kopf p{ color:var(--lead-dunkel); }

/* Abhak-Liste */
.check{ list-style:none; margin:0; padding:0; }
.check li{ position:relative; padding:.55rem 0 .55rem 1.6rem; border-top:1px solid var(--grau-linie); }
.check li::before{
  content:""; position:absolute; left:2px; top:.78em;
  width:6px; height:11px;
  border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);
  transform:rotate(42deg);
}
.abschnitt--dunkel .check li{ border-top-color:rgba(255,255,255,.16); }
.abschnitt--dunkel .check li::before{ border-color:var(--rot-hell); }

/* --- Kopfzeile ----------------------------------------------------------- */

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--rot); color:#fff; padding:.8rem 1.2rem;
  font-family:var(--font-marke); font-weight:700; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
}
.skiplink:focus{ left:0; }

.kopf{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--grau-linie);
}
.kopf__inner{ display:flex; align-items:center; gap:1.5rem; min-height:78px; }
.kopf__logo{ display:block; margin-right:auto; }
.kopf__logo svg,.kopf__logo img{ height:54px; width:auto; }

.nav{ display:flex; align-items:center; gap:1.25rem; }
.nav a{
  font-family:var(--font-marke); font-weight:600; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--anthrazit); text-decoration:none;
  padding:.35rem 0; border-bottom:2px solid transparent;
}
.nav a:hover{ color:var(--rot); border-bottom-color:var(--rot); }

.kopf__kontakt{
  display:inline-flex; flex-direction:column; line-height:1.2;
  text-decoration:none; color:var(--anthrazit);
  border-left:1px solid var(--grau-linie); padding-left:1.4rem;
}
.kopf__kontakt span{
  font-family:var(--font-marke); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--grau-text);
}
.kopf__kontakt strong{ font-size:1.02rem; font-weight:700; letter-spacing:-.01em; }
.kopf__kontakt:hover strong{ color:var(--rot); }
.kopf__kontaktIcon{ display:none; width:22px; height:22px; }

.burger{
  display:none; width:44px; height:44px; padding:0;
  background:none; border:1px solid var(--grau-linie); border-radius:2px; cursor:pointer;
}
.burger span{ display:block; width:20px; height:2px; margin:4px auto; background:var(--anthrazit); }

/* --- Hero ---------------------------------------------------------------- */

.hero{ background:var(--anthrazit); color:#fff; border-top:3px solid var(--rot); }
.hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; }
.hero__text{ padding:clamp(52px,7vw,96px) clamp(20px,4vw,64px) clamp(52px,7vw,96px) 0; }
.hero__text h1{ font-size:var(--fs-h1); color:#fff; }
.hero__text h1 em{ font-style:normal; color:var(--rot-hell); }
.hero__lead{ margin:var(--abstand-vorspann) 0 2.6rem; font-size:var(--fs-lead);
  line-height:1.5; color:var(--lead-dunkel); max-width:40ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.hero__bild{ position:relative; min-height:340px; margin:0; }
.hero__bild img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:38% 46%; }
.hero__bild figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem clamp(16px,3vw,28px) .85rem;
  background:linear-gradient(to top, rgba(26,24,25,.94) 40%, rgba(26,24,25,0));
  font-family:var(--font-marke); font-weight:700; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}

/* Textbasierter Hero ohne Bildspalte (Startseite) */
.hero--zentriert .hero__grid{ grid-template-columns:1fr; }
.hero--zentriert .hero__text{ padding:clamp(64px,9vw,110px) 0; max-width:640px; }

/* Vollbild-Bildband: liegt AUSSERHALB von .wrap, daher ueber die gesamte
   Viewport-Breite (kein max-width:1180px wie bei .bildband). */
.vollbild{ position:relative; margin:0; }
.vollbild img{ width:100%; height:clamp(240px,32vw,420px); object-fit:cover; display:block; }
.vollbild figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem clamp(16px,3vw,28px) .9rem;
  background:linear-gradient(to top, rgba(26,24,25,.94) 40%, rgba(26,24,25,0));
  font-family:var(--font-marke); font-weight:700; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}

.trust{ background:var(--anthrazit-tief); border-top:1px solid rgba(255,255,255,.09); }
.trust ul{ display:grid; grid-template-columns:repeat(4,1fr); list-style:none; margin:0; padding:0; }
.trust li{
  padding:1.5rem clamp(14px,2vw,26px);
  border-left:1px solid rgba(255,255,255,.09);
  font-size:.9rem; color:#D8D4D5;
}
.trust li:first-child{ border-left:0; }
.trust b{ display:block; color:#fff; font-weight:700; font-size:.95rem; margin-bottom:.15rem; }

/* --- Weiche: zwei Zielgruppen ------------------------------------------- */

/* auto-fit: zwei oder drei Karten je nach Anzahl und Viewport-Breite */
.weiche{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.5rem; }
.weiche__karte{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--grau-linie); border-top:3px solid var(--rot);
  padding:clamp(28px,3vw,40px);
}
.weiche__karte h3{ font-size:clamp(1.45rem,2.2vw,1.75rem); margin:.35rem 0 .85rem; }
.weiche__karte p{ color:var(--grau-text); margin:0 0 1.6rem; }
.weiche__meta{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem;
  margin:0 0 1.8rem; padding:1.1rem 0 0; border-top:1px solid var(--grau-linie);
}
.weiche__meta div{ line-height:1.3; }
.weiche__meta b{ display:block; font-size:1.15rem; font-weight:800; letter-spacing:-.02em; }
.weiche__meta span{ font-size:.8rem; color:var(--grau-text); }
.weiche__karte .btn{ align-self:flex-start; margin-top:auto; }

/* --- Angebotsblock ------------------------------------------------------- */

.angebot{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:start; }
.angebot h3{ font-size:var(--fs-h3-klein); margin-bottom:.9rem; }
.angebot__spalte + .angebot__spalte{ margin-top:0; }

.preisbox{ background:#fff; border:1px solid var(--grau-linie); border-top:3px solid var(--rot); padding:clamp(24px,2.6vw,34px); }
.abschnitt--dunkel .preisbox{ background:#fff; color:var(--anthrazit); }
.preisbox h3{ font-size:var(--fs-h3); margin-bottom:0; color:var(--anthrazit); }
.preisbox > p{ color:var(--grau-text); font-size:.95rem; margin:var(--abstand-vorspann) 0 1.6rem; }
.staffel{ display:grid; gap:1rem; }
.staffel > div{ border-top:1px solid var(--grau-linie); padding-top:1rem; }
.staffel .kicker{ display:block; margin-bottom:.25rem; }
.staffel b{ display:block; font-size:1.75rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums; }
.staffel small{ display:block; color:var(--grau-text); font-size:.85rem; }
.preisbox__fuss{ margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--grau-linie); font-size:.88rem; color:var(--grau-text); }
.preisbox .btn{ width:100%; margin-top:1.4rem; }

.mitbringen{
  margin-top:1.8rem; padding:1.2rem 1.4rem;
  background:var(--weiss); border-left:3px solid var(--rot); font-size:.94rem; color:var(--grau-text);
}
.abschnitt--grau .mitbringen{ background:#fff; }
.abschnitt--dunkel .mitbringen{ background:rgba(255,255,255,.06); color:#D8D4D5; }
.mitbringen strong{ color:var(--anthrazit); }
.abschnitt--dunkel .mitbringen strong{ color:#fff; }

/* --- Nummerierte Schritte (Ablauf, Trainingsbausteine) ------------------- */

.schritte{ display:grid; grid-template-columns:repeat(var(--spalten,4),1fr); border-top:1px solid var(--grau-linie); }
.schritte > div{ padding:2.2rem clamp(16px,2vw,30px); border-left:1px solid var(--grau-linie); }
.schritte > div:first-child{ border-left:0; padding-left:0; }
.schritte__nr{ font-family:var(--font-marke); font-weight:800; font-size:1.7rem; color:var(--rot); line-height:1; }
.schritte__nr::after{ content:""; display:block; width:30px; height:3px; background:var(--rot); margin:.8rem 0 1.1rem; }
.schritte h3{ font-size:var(--fs-h3-klein); margin-bottom:.5rem; }
.schritte p{ margin:0; font-size:.94rem; color:var(--grau-text); }
.schritte .kicker{ display:block; margin-top:.6rem; }

.abschnitt--dunkel .schritte,
.abschnitt--dunkel .schritte > div{ border-color:rgba(255,255,255,.14); }
.abschnitt--dunkel .schritte__nr{ color:var(--rot-hell); }
.abschnitt--dunkel .schritte__nr::after{ background:var(--rot-hell); }
.abschnitt--dunkel .schritte p{ color:var(--grau-hell); }
.abschnitt--dunkel .schritte .kicker{ color:var(--grau-hell); }

/* --- Bildband ------------------------------------------------------------ */

.bildband{ position:relative; margin:clamp(36px,5vw,56px) 0 0; }
.bildband img{ width:100%; height:clamp(220px,32vw,400px); object-fit:cover; object-position:center 7%; }
.bildband figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:2.4rem clamp(16px,3vw,28px) .9rem;
  background:linear-gradient(to top, rgba(26,24,25,.94) 40%, rgba(26,24,25,0));
  font-family:var(--font-marke); font-weight:700; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}

/* --- Ausbilder ----------------------------------------------------------- */

.ausbilder{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,64px); align-items:center; }
.ausbilder__bild{ position:relative; }
.ausbilder__bild img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 22%; }
.ausbilder__bild::after{
  content:""; position:absolute; left:-14px; bottom:-14px; width:96px; height:96px;
  border-left:3px solid var(--rot); border-bottom:3px solid var(--rot);
}
/* Hier folgt Fliesstext statt eines Vorspanns — deshalb der normale,
   nicht der enge Abstand. */
.ausbilder h2{ font-size:var(--fs-h2); margin-bottom:1.1rem; }
.ausbilder p{ color:var(--grau-text); }
.fakten{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:2rem; border-top:1px solid var(--grau-linie); }
.fakten div{ padding:1.3rem 1.1rem 0 0; }
.fakten b{ display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.fakten span{ font-size:.86rem; color:var(--grau-text); }

/* --- FAQ ----------------------------------------------------------------- */

.faq{ max-width:820px; border-top:1px solid var(--grau-linie); }
.faq details{ border-bottom:1px solid var(--grau-linie); }
.faq summary{ cursor:pointer; list-style:none; padding:1.35rem 3rem 1.35rem 0; position:relative; font-weight:700; font-size:1.12rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.4rem; top:1.75rem;
  width:11px; height:11px; border-right:2px solid var(--rot); border-bottom:2px solid var(--rot);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.95rem; }
.faq summary:hover{ color:var(--rot); }
.faq p{ margin:0 0 1.4rem; color:var(--grau-text); max-width:70ch; }

/* --- Kontakt ------------------------------------------------------------- */

.kontakt{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); }
.kontakt__daten dl{ margin:0; border-top:1px solid rgba(255,255,255,.16); }
.kontakt__daten div{ padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.16); }
.kontakt__daten dt{
  font-family:var(--font-marke); font-weight:600; font-size:.66rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grau-hell); margin-bottom:.35rem;
}
.kontakt__daten dd{ margin:0; font-size:1.08rem; font-weight:600; }
.kontakt__daten dd a{ color:#fff; text-decoration:none; border-bottom:1px solid var(--rot-hell); }
.kontakt__daten dd a:hover{ color:var(--rot-hell); }
.kontakt__daten dd small{ display:block; font-weight:400; font-size:.9rem; color:var(--grau-hell); margin-top:.2rem; }

.formular{ background:#fff; color:var(--anthrazit); padding:clamp(26px,3vw,40px); border-top:3px solid var(--rot); }
.formular h3{ font-size:var(--fs-h3); margin-bottom:0; color:var(--anthrazit); }
.formular > p{ color:var(--grau-text); font-size:.95rem; margin:var(--abstand-vorspann) 0 1.6rem; }
.feld{ margin-bottom:1.1rem; }
.feld label{
  display:block; font-family:var(--font-marke); font-weight:600; font-size:.68rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grau-text); margin-bottom:.4rem;
}
.feld input,.feld textarea,.feld select{
  width:100%; font:inherit; font-size:1rem; color:var(--anthrazit);
  padding:.8rem .9rem; background:#fff; border:1px solid var(--grau-linie); border-radius:2px;
}
.feld input:focus,.feld textarea:focus,.feld select:focus{ border-color:var(--rot); }
.feld textarea{ min-height:130px; resize:vertical; }
.feld--zwei{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.formular__fuss{ font-size:.82rem; color:var(--grau-text); margin:1rem 0 0; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Fusszeile ----------------------------------------------------------- */

.fuss{ background:var(--anthrazit-tief); color:var(--grau-hell); padding:3.2rem 0 2rem; font-size:.92rem; }
.fuss__grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem; padding-bottom:2.4rem; border-bottom:1px solid rgba(255,255,255,.12); }
.fuss__logo svg,.fuss__logo img{ height:62px; width:auto; margin-bottom:1.3rem; }
.fuss h4{
  font-family:var(--font-marke); font-weight:700; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 1rem;
}
.fuss ul{ list-style:none; margin:0; padding:0; }
.fuss li{ margin-bottom:.55rem; }
.fuss a{ color:var(--grau-hell); text-decoration:none; }
.fuss a:hover{ color:#fff; }
.fuss__unten{ display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:space-between; padding-top:1.6rem; font-size:.85rem; }

/* --- Ratgeber ------------------------------------------------------------ */

/* Hervorgehobenes Ergebnis, etwa im Bedarfsrechner */
.staffel--gross b{ font-size:2.6rem; }

/* Warnung steht innerhalb der weissen Ergebnisbox und braucht daher einen
   eigenen Grund — sonst hebt sie sich nicht ab. */
.rechner__hinweis{ margin-top:1.4rem; background:#FBF2F1; }

/* Fliesstext innerhalb eines Abschnitts — anders als .rechtstext bleiben
   Ueberschriften hier in der Groesse der uebrigen Seitenabschnitte. */
.fliesstext{ max-width:68ch; }
.fliesstext p{ margin:0 0 1.15rem; color:var(--grau-text); }
.fliesstext p:last-child{ margin-bottom:0; }
.fliesstext strong{ color:var(--anthrazit); }
.abschnitt--dunkel .fliesstext p{ color:var(--lead-dunkel); }
.abschnitt--dunkel .fliesstext strong{ color:#fff; }

/* Beitragsliste der Ratgeber-Uebersicht: bleibt auch bei einem einzelnen
   Beitrag ausgewogen, im Gegensatz zum Kartenraster. */
.beitraege{ border-top:1px solid var(--grau-linie); }
.beitraege article{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2.5rem;
  align-items:center; padding:1.9rem 0; border-bottom:1px solid var(--grau-linie);
}
.beitraege h3{ font-size:var(--fs-h3); margin:.4rem 0 .55rem; }
.beitraege h3 a{ color:var(--anthrazit); text-decoration:none; }
.beitraege h3 a:hover{ color:var(--rot); }
.beitraege p{ margin:0; color:var(--grau-text); max-width:62ch; }
.beitraege .btn{ white-space:nowrap; }

@media (max-width:700px){
  .beitraege article{ grid-template-columns:1fr; }
  .beitraege .btn{ justify-self:start; }
}

/* --- Rechtstexte (Impressum / Datenschutz) ------------------------------- */

.rechtstext{ max-width:78ch; }
.rechtstext h1{ font-size:var(--fs-h2); margin-bottom:1.6rem; }
.rechtstext h2{ font-size:1.4rem; margin:2.6rem 0 .8rem; }
.rechtstext h3{ font-size:1.12rem; margin:1.8rem 0 .5rem; }
.rechtstext p,.rechtstext li{ color:var(--grau-text); }
.rechtstext p{ margin:0 0 1rem; }
.rechtstext ul{ padding-left:1.2rem; margin:0 0 1rem; }
.hinweis{
  padding:1.3rem 1.5rem; background:#fff;
  border:1px solid var(--grau-linie); border-left:3px solid var(--rot);
  font-size:.95rem; color:var(--grau-text);
}
.hinweis strong{ color:var(--anthrazit); }
.platzhalter{
  background:#FFF4E6; border:1px dashed #D9922B; color:#7A4E0B;
  padding:.15rem .45rem; border-radius:2px; font-size:.92em; font-weight:600;
}

/* --- Responsiv ----------------------------------------------------------- */

@media (max-width:1000px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__text{ padding-inline:0; }
  .hero__bild{ min-height:280px; margin-inline:calc(var(--gutter) * -1); }
  .trust ul{ grid-template-columns:repeat(2,1fr); }
  .trust li:nth-child(3){ border-left:0; }
  .trust li:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.09); }
  .angebot{ grid-template-columns:1fr; }
  .schritte{ grid-template-columns:repeat(2,1fr); }
  .schritte > div:nth-child(3){ border-left:0; }
  .schritte > div:nth-child(n+3){ border-top:1px solid var(--grau-linie); }
  .abschnitt--dunkel .schritte > div:nth-child(n+3){ border-top-color:rgba(255,255,255,.14); }
  .ausbilder{ grid-template-columns:1fr; }
  .ausbilder__bild img{ aspect-ratio:4/3; }
  .kontakt{ grid-template-columns:1fr; }
  .fuss__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--grau-linie);
    padding:.5rem var(--gutter) 1.2rem;
  }
  .nav.offen{ display:flex; }
  .nav a{ padding:.85rem 0; border-bottom:1px solid var(--grau-linie); }
  .burger{ display:block; order:3; }
  .kopf__inner{ position:relative; gap:.7rem; min-height:70px; }
  .kopf__logo img{ height:44px; }
  .kopf__kontakt{
    border-left:0; padding:0; width:44px; height:44px; border-radius:2px;
    background:var(--rot); color:#fff; align-items:center; justify-content:center;
  }
  .kopf__kontakt span,.kopf__kontakt strong{ display:none; }
  .kopf__kontaktIcon{ display:block; }
}

@media (max-width:560px){
  :root{ --fs-body:1rem; }
  .trust ul{ grid-template-columns:1fr; }
  .trust li{ border-left:0; border-top:1px solid rgba(255,255,255,.09); }
  .trust li:first-child{ border-top:0; }
  .schritte{ grid-template-columns:1fr; }
  .schritte > div{ border-left:0; border-top:1px solid var(--grau-linie); padding-inline:0; }
  .schritte > div:first-child{ border-top:0; }
  .abschnitt--dunkel .schritte > div{ border-top-color:rgba(255,255,255,.14); }
  .feld--zwei{ grid-template-columns:1fr; }
  .fakten{ grid-template-columns:1fr; }
  .fakten div{ padding:1rem 0; border-bottom:1px solid var(--grau-linie); }
  .fuss__grid{ grid-template-columns:1fr; }
  .hero__cta .btn{ width:100%; }
}

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

@media print{
  .kopf,.burger,.formular,.hero__bild{ display:none; }
  body{ font-size:11pt; }
}