*{box-sizing:border-box}body{margin:0;font:16px/1.65 system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#24384a;background:#f3f7fa}a{color:inherit}header,footer{background:#17364f;color:white}.wrap{max-width:1120px;margin:auto;padding:0 24px}.top{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:20px}.brand{font-size:1.55rem;font-weight:800;letter-spacing:.07em}.brand small{display:block;font-size:.72rem;font-weight:400;letter-spacing:0}.top nav{display:flex;gap:18px;flex-wrap:wrap}.top nav a{text-decoration:none;font-size:.9rem}.hero{padding:82px 0 95px;background:linear-gradient(115deg,#17364f,#245b79);color:#fff}.eyebrow{color:#b3e0f5;letter-spacing:.12em;font-size:.83rem;font-weight:700}h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.14;max-width:750px;margin:12px 0 18px}h2{font-size:2rem;color:#17364f;margin:0 0 10px}.lead{font-size:1.13rem;max-width:700px;color:#e0ebf3}.buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-block;padding:12px 20px;border-radius:9px;background:white;color:#17364f;text-decoration:none;font-weight:700}.btn.secondary{border:1px solid #c0d5e1;background:transparent;color:white}.section{padding:62px 0}.intro{margin-bottom:26px;color:#63778a}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{background:#fff;border-radius:15px;padding:30px;box-shadow:0 4px 20px #17364f12;text-decoration:none;transition:transform .15s}.card:hover{transform:translateY(-3px)}.card h3{margin:10px 0 4px;color:#17364f;font-size:1.25rem}.card p{margin:0 0 14px;color:#64798a}.card strong{color:#28739d}.symbol{font-size:2.5rem;color:#28739d;height:55px;display:block}.symbol img{height:55px;width:65px;object-fit:contain}.wide{grid-column:1/-1}.contact{background:#e6eff5;padding:55px 0}.contact .btn{background:#17364f;color:white}footer{padding:28px 0;font-size:.9rem}footer a{margin-right:18px}.note{font-size:.83rem;color:#687a88;margin-top:22px}@media(max-width:700px){.top{align-items:flex-start;flex-direction:column}.top nav{gap:10px 16px}.hero{padding:54px 0}.cards{grid-template-columns:1fr}.wide{grid-column:auto}.card{padding:23px}}
/* Modernisierte Unterseiten */
.page-title{padding:52px 0 32px;background:linear-gradient(115deg,#17364f,#245b79);color:white}.page-title h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:0;color:white}.page-title p{margin:8px 0 0;color:#dbeaf3}.page-main{padding:38px 0 75px}.article{background:white;padding:clamp(18px,4vw,38px);border-radius:14px;box-shadow:0 4px 20px #17364f12;overflow-wrap:anywhere}.article h1,.article h2,.article h3{color:#17364f;line-height:1.35}.article h1{font-size:1.65rem}.article h2{font-size:1.35rem;margin:25px 0 10px}.article h3{font-size:1.12rem;margin:20px 0 8px}.article p,.article li{font-size:1rem;line-height:1.7}.article a{color:#126b93}.article img{max-width:100%;height:auto}.article table{max-width:100%;display:block;overflow-x:auto;border-collapse:collapse}.article td,.article th{padding:8px;border:1px solid #d9e4eb}.article input,.article textarea,.article select{max-width:100%;padding:9px;border:1px solid #9db2c0;border-radius:6px}.article iframe{max-width:100%}.breadcrumbs{margin:0 0 18px;font-size:.91rem;color:#5b7282}.breadcrumbs a{color:#236d94}.subnav{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.subnav a{background:#e9f2f7;border-radius:8px;padding:8px 13px;text-decoration:none;color:#17364f;font-weight:650}.warning{background:#fff5e5;padding:12px 18px;border-left:4px solid #e8b45d}.article .legacy-nav,.article .style4{font-size:inherit}.article [style*="position:absolute"]{position:static!important}.article [width]{max-width:100%}@media(max-width:700px){.article{padding:20px}.page-title{padding:35px 0 24px}}

html{scroll-behavior:smooth;scroll-padding-top:100px}.sticky{position:sticky;top:0;z-index:10}.brand-link{text-decoration:none;color:inherit}.scroll-section{scroll-margin-top:100px}.scroll-section.alternate{background:#eaf2f7}.section-heading{display:flex;gap:25px;align-items:flex-start;max-width:850px}.section-heading .symbol{flex:0 0 68px}.section-heading p{margin-top:0;color:#5b7080}.resource{margin:25px 0;padding:18px 22px;background:white;border:1px solid #d7e3e9;border-radius:12px;max-width:750px}.resource summary{cursor:pointer;font-weight:700;color:#17364f}.resource ul{padding-left:20px}.resource li{padding:5px 0}.resource a{color:#276b91}.section-cta{display:inline-block;margin-top:20px;font-weight:700;color:#276b91}.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.contact-actions .btn.secondary.dark{color:#17364f;border:1px solid #17364f}.small-note{font-size:.88rem;color:#637687}@media(max-width:700px){.sticky{position:static}.section-heading{gap:12px}.top nav{font-size:.82rem}html{scroll-padding-top:15px}}

/* Zurück-nach-oben-Schaltfläche */
.back-to-top{position:fixed;right:28px;bottom:26px;z-index:9999;display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;border:2px solid #fff;background:rgba(133,138,144,.65);color:#fff;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .2s,visibility .2s,background .2s;box-shadow:0 3px 14px #00000014}.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover,.back-to-top:focus-visible{background:#28739d;color:#fff}html{scroll-behavior:smooth}@media(max-width:600px){.back-to-top{right:16px;bottom:16px;width:50px;height:50px}}

/* STESCH Design: dunkelblauer Button mit dezentem türkisem Akzent */
.back-to-top{width:54px;height:54px;background:#17364f;color:#fff;border:1px solid #4d9abe;box-shadow:0 5px 18px rgba(12,39,60,.23);opacity:0;transition:opacity .22s,transform .22s,visibility .22s,background .22s,box-shadow .22s}
.back-to-top.is-visible{opacity:1}
.back-to-top:hover,.back-to-top:focus-visible{background:#28739d;box-shadow:0 7px 22px rgba(12,39,60,.3);outline-offset:3px}
@media(max-width:600px){.back-to-top{width:48px;height:48px}}

/* Navigation: Zielabschnitt beginnt unmittelbar unter der Kopfzeile; kein Rest der vorherigen Rubrik sichtbar. */
/* Beim Ankern Abstand genau in Hoehe der fixierten Navigation lassen. */
html{scroll-padding-top:94px!important}
.scroll-section{scroll-margin-top:94px!important}
@media(max-width:700px){html{scroll-padding-top:0!important}.scroll-section{scroll-margin-top:0!important}}

/* Ankerabstand nicht doppelt verrechnen: JavaScript misst die reale Kopfzeile. */
html{scroll-padding-top:0!important}.scroll-section{scroll-margin-top:0!important}

/* Nur die vorläufige Mindesthöhe der noch auszubauenden Hauptbereiche.
   Die bewährte Scroll-Berechnung und der Fahrschulbereich bleiben unverändert. */
#stapler, #krane, #ladung, #downloads, #kontakt {
  min-height: calc(100vh - var(--stesch-nav-height, 0px));
  box-sizing: border-box;
}

/* Ausschließlich dezente Logo-Gravur im Startbereich. */
.hero .wrap{position:relative}.hero .hero-gravur{position:absolute;right:12px;top:-35px;width:min(27.33%,287px);height:auto;pointer-events:none;opacity:.72;filter:drop-shadow(-1px -1px 0 rgba(130,177,205,.15)) drop-shadow(1px 2px 1px rgba(0,14,27,.35))}
@media(max-width:800px){.hero .hero-gravur{position:relative;display:block;top:auto;right:auto;width:min(50%,227px);margin:0 0 12px auto;opacity:.58}}

/* Einzige Aenderung: Stapler-Unterlagen und Anfrage-Link erhalten den
   hellen Verlauf der Nachhilfe-Startkarte. */
#stapler .stapler-nachhilfe-hintergrund {
  background: linear-gradient(120deg,#eff9fc,#f6faf9);
  border-radius: 24px;
  padding: 42px 44px;
  margin-top: 28px;
}
#stapler .stapler-nachhilfe-hintergrund .resource {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
}
#stapler .stapler-nachhilfe-hintergrund .section-cta {margin-top: 24px;}
@media(max-width:700px){#stapler .stapler-nachhilfe-hintergrund{padding:26px 22px}}

/* Nur die Flaeche im Staplerbereich auf die Hoehe der Nachhilfe-Startkarte bringen. */
@media(min-width:801px){
 #stapler .stapler-nachhilfe-hintergrund {min-height: 600px; padding-top:78px; padding-bottom:78px;}
}

/* Gewuenschte Farbanpassung: Stapler-Flaeche wie Hintergrund der Schulungs-Kacheln.
   Groesse und alle anderen Seiteneinstellungen bleiben unveraendert. */
#stapler .stapler-nachhilfe-hintergrund {
  background: #f3f7fa;
  box-shadow: 0 10px 30px rgba(25,55,79,.075);
}

/* Staplerfeld wie die weissen Schulungs-Kacheln; Schatten und Groesse unveraendert. */
#stapler .stapler-nachhilfe-hintergrund {background: #ffffff;}

/* Ladungssicherung: exakt die gleiche helle Flaeche wie Stapler. */
#ladung .ladung-nachhilfe-hintergrund {
  background: #ffffff;
  border-radius: 24px;
  padding: 42px 44px;
  margin-top: 28px;
  box-shadow: 0 10px 30px rgba(25,55,79,.075);
}
@media(min-width:801px){
  #ladung .ladung-nachhilfe-hintergrund {min-height:600px;padding-top:78px;padding-bottom:78px;}
}
@media(max-width:700px){#ladung .ladung-nachhilfe-hintergrund{padding:26px 22px}}

/* Krane: gleiches Kartenformat wie Stapler/Ladungssicherung,
   mit der originalen hellblau-tuerkisen Nachhilfe-Hintergrundfarbe. */
#krane .krane-nachhilfe-hintergrund {
  background: linear-gradient(120deg,#eff9fc,#f6faf9);
  border-radius:24px;
  padding:42px 44px;
  margin-top:28px;
  box-shadow:0 10px 30px rgba(25,55,79,.075);
}
#krane .krane-nachhilfe-hintergrund .resource {
  background:transparent;
  border:0;
  border-radius:0;
  padding:0;
  margin:0;
}
#krane .krane-nachhilfe-hintergrund .section-cta {margin-top:24px;}
@media(min-width:801px){
  #krane .krane-nachhilfe-hintergrund {min-height:600px;padding-top:78px;padding-bottom:78px;}
}
@media(max-width:700px){#krane .krane-nachhilfe-hintergrund{padding:26px 22px}}

/* Neuer Training-Bereich: gleiche Flaeche wie die Fahrschul-Nachhilfe, noch ohne Inhalt. */
#training {min-height:calc(100vh - var(--stesch-nav-height, 0px));box-sizing:border-box;}
#training .training-nachhilfe-hintergrund {
 background:linear-gradient(120deg,#eff9fc,#f6faf9);
 border-radius:24px;
 padding:42px 44px;
 margin-top:28px;
 min-height:600px;
 box-shadow:0 10px 30px rgba(25,55,79,.075);
}
@media(min-width:801px){#training .training-nachhilfe-hintergrund{padding-top:78px;padding-bottom:78px;}}
@media(max-width:700px){#training .training-nachhilfe-hintergrund{padding:26px 22px;min-height:480px;}}

/* Nur die vier bereits gestalteten Bereichsfelder: bis zum unteren
   sichtbaren Abschnittsrand, unten gerade wie bei der Fahrschul-Nachhilfe.
   Farben, Schatten, Inhalte, Navigation und obere Ecken unveraendert. */
#stapler, #krane, #ladung, #training {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
#stapler > .wrap, #krane > .wrap, #ladung > .wrap, #training > .wrap {
  width: 100%;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--stesch-nav-height, 0px) - 62px);
}
#stapler .stapler-nachhilfe-hintergrund,
#krane .krane-nachhilfe-hintergrund,
#ladung .ladung-nachhilfe-hintergrund,
#training .training-nachhilfe-hintergrund {
  flex: 1 0 auto;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
@media (max-width:700px) {
  #stapler > .wrap, #krane > .wrap, #ladung > .wrap, #training > .wrap {
    min-height: calc(100vh - 62px);
  }
}

/* Nur die neu hinzugefuegte Hubstapler-Kursbeschreibung */
#stapler .stapler-kursbeschreibung{max-width:940px;color:#19374f;line-height:1.7;margin-bottom:34px}
#stapler .stapler-kursbeschreibung h3{font-size:clamp(1.45rem,2.4vw,2rem);margin:0 0 24px;color:#19374f}
#stapler .stapler-kursbeschreibung h4{font-size:1.1rem;margin:24px 0 6px;color:#177b9d}
#stapler .stapler-kursbeschreibung p{margin:0 0 12px}

/* Stapler: identische Typografie wie der Nachhilfe-Eyebrow-Text */
#stapler .stapler-eyebrow{color:#137e95;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.8rem;line-height:1.65;margin:0 0 20px}

/* Stapler-Haupttitel wie Fuehrerschein-Nachhilfe */
#stapler .stapler-haupttitel{font-size:clamp(2.3rem,4.8vw,4.1rem);letter-spacing:-.045em;line-height:1.2;color:#18364a;margin:10px 0 22px;font-weight:700}

/* Stapler-Titel exakt wie Fuehrerschein-Nachhilfe #nh-start h1 */
#stapler .stapler-haupttitel{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:500;letter-spacing:normal;color:#587d85;line-height:1.2;margin:10px 0 22px}

/* Stapler-Ausbildungsfoto: gleiche Bild/Text-Proportionen wie Fuehrerschein-Nachhilfe */
#stapler .stapler-bildreihe{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:start;margin-bottom:24px}
#stapler .stapler-bildreihe-titel{min-width:0}
#stapler .stapler-ausbildungsfoto{display:block;width:100%;max-height:450px;object-fit:cover;border-radius:24px;box-shadow:0 20px 50px #143f5a22;margin-top:34px}
@media(max-width:800px){#stapler .stapler-bildreihe{grid-template-columns:1fr;gap:24px}#stapler .stapler-ausbildungsfoto{max-height:300px;margin-top:0}}

/* Stapler-Einleitung im Stil des Nachhilfe-Einleitungstextes */
#stapler .stapler-einleitung{font-size:1.18rem;line-height:1.65;color:#233e50;font-weight:500;margin:0 0 18px;max-width:600px}

/* Stapler: Aktionsbuttons wie auf der Nachhilfe-Seite */
#stapler .stapler-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
#stapler .stapler-btn{display:inline-block;padding:12px 22px;border-radius:9px;font:inherit;font-weight:750;text-decoration:none;cursor:pointer;border:2px solid #137e95}
#stapler .stapler-btn.primary{background:#137e95;color:#fff}
#stapler .stapler-btn.secondary{background:#fff;color:#137e95;border:2px solid #137e95}

/* Gleiche vertikale Position der Stapler-Buttons wie im Nachhilfe-Hero bei Desktop-Breite. */
@media(min-width:801px){#stapler .stapler-einleitung{min-height:124px}}

/* Stapler: Terminhinweis wie Nachhilfe */
#stapler .stapler-termine{margin-top:0}

/* Stapler: zweite, erst beim Scrollen sichtbare Flaeche in exakt der
   Hintergrundfarbe des Nachhilfe-Ablaufbereichs (#nh-ablauf). */
#stapler .stapler-detailbereich {
  background: #f0eff7;
  padding: 78px 0;
}
#stapler .stapler-detailbereich > .wrap {
  display: block;
  min-height: 0;
}
#stapler .stapler-detailbereich .stapler-kursbeschreibung {
  max-width: 940px;
  margin-bottom: 28px;
}
#stapler .stapler-detailbereich .resource {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
#stapler .stapler-detailbereich .section-cta {
  margin-top: 24px;
}
@media (max-width: 700px) {
  #stapler .stapler-detailbereich { padding: 55px 0; }
}


/* Durchgehende Seitenraender ueber alle Homepage-Bereiche:
   dieselbe hellblaue Randfarbe wie neben der Nachhilfe-Flaeche. */
body { background-color: #eaf2f7; }
body > main {
  width: calc(100% - 48px);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  body > main { width: calc(100% - 24px); }
}

/* Nur die dunkle Startflaeche wieder ueber die volle Bildschirmbreite. */
body > main > section.hero {
  width: calc(100% + 48px);
  margin-left: -24px;
  margin-right: -24px;
}
@media (max-width: 700px) {
  body > main > section.hero {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
}

/* Einheitlicher dezenter Schatten fuer die mittleren Inhaltsfelder.
   Entspricht exakt dem Schatten des Staplerfelds. */
#stapler .stapler-nachhilfe-hintergrund,
#krane .krane-nachhilfe-hintergrund,
#ladung .ladung-nachhilfe-hintergrund,
#training .training-nachhilfe-hintergrund,
#fahrschule .nachhilfe-original,
#downloads .resource {
  box-shadow: 0 10px 30px rgba(25,55,79,.075);
}

/* Dezenter Schatten ausschliesslich am zweiten Stapler-Detailfeld. */
#stapler .stapler-detailbereich {
  box-shadow: 0 10px 30px rgba(25,55,79,.075);
}

/* STAPLER INFO 1: Ueberschrift im Stil von Feld 1 (Fuehrerschein) */
#stapler .stapler-detailbereich .stapler-kursbeschreibung h3.stapler-info-feld1 {color:#137e95;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.8rem;line-height:1.65;margin:0 0 20px;}

/* STAPLER INFO 1: Ueberschrift wie Feld 2 auf FUEHRERSCHEIN;
   doppelte Innen-Einrueckung entfernen, linker Rand wie STAPLER. */
#stapler .stapler-detailbereich > .wrap { padding-left: 44px; padding-right: 44px; }
@media (max-width: 700px) { #stapler .stapler-detailbereich > .wrap { padding-left: 22px; padding-right: 22px; } }
#stapler .stapler-detailbereich .stapler-kursbeschreibung h3.stapler-info-feld1 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #587d85;
  line-height: 1.2;
  margin: 10px 0 22px;
}

/* KRANE Feld 6: Foto wie STAPLER Feld 6, bestehende Inhalte unveraendert */
#krane .krane-bildreihe{display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:start}
#krane .krane-bildreihe-inhalt{min-width:0}
#krane .krane-ausbildungsfoto{display:block;width:100%;max-height:450px;object-fit:cover;border-radius:24px;box-shadow:0 20px 50px #143f5a22;margin-top:34px}
@media(max-width:800px){#krane .krane-bildreihe{grid-template-columns:1fr;gap:24px}#krane .krane-ausbildungsfoto{max-height:300px;margin-top:0}}

/* KRANE Feld 1: Optik wie STAPLER Feld 1 */
#krane .krane-eyebrow{color:#137e95;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.8rem;line-height:1.65;margin:0 0 20px}

/* KRANE Felder 2 und 3: gleiche Typografie wie STAPLER/FUEHRERSCHEIN */
#krane .krane-haupttitel{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:500;letter-spacing:normal;color:#587d85;line-height:1.2;margin:10px 0 22px}
#krane .krane-einleitung{font-size:1.18rem;line-height:1.65;color:#233e50;font-weight:500;margin:0 0 18px;max-width:600px}

/* KRANE INFO 1: Gestaltung analog STAPLER INFO 1 */
#krane .krane-info1 {background:#f0eff7;padding:78px 0;}
#krane .krane-info1 > .wrap {display:block;min-height:0;padding-left:44px;padding-right:44px;}
#krane .krane-info1-content {max-width:940px;color:#19374f;line-height:1.7;margin:0;}
#krane .krane-info1-content h3 {font-size:clamp(2rem,4.2vw,3.6rem);font-weight:500;letter-spacing:normal;color:#587d85;line-height:1.2;margin:10px 0 22px;}
#krane .krane-info1-content h4 {font-size:1.1rem;margin:24px 0 6px;color:#177b9d;}
#krane .krane-info1-content p {margin:0 0 12px;}
#krane .krane-info1-content ul {padding-left:1.5rem;margin:0 0 16px;}
#krane .krane-info1-content li {margin:0 0 9px;}
@media(max-width:700px){#krane .krane-info1{padding:55px 0;}#krane .krane-info1 > .wrap{padding-left:24px;padding-right:24px;}}

/* KRANE INFO 1: gleicher dezenter Feldschatten wie STAPLER INFO 1 */
#krane .krane-info1 { box-shadow: 0 10px 30px rgba(25,55,79,.075); }

/* KRANE INFO 1–4: eigenstaendige Felder mit abgestimmten Bild- und Textformaten */
#krane-info-1 .krane-info-foto,.krane-info-extra .krane-info-foto{float:right;width:38%;max-width:410px;aspect-ratio:1.35;object-fit:cover;border-radius:24px;box-shadow:0 20px 50px #143f5a22;margin:10px 0 22px 36px;}
.krane-info-extra{padding:78px 0;box-shadow:0 10px 30px rgba(25,55,79,.075);position:relative;}
.krane-info-tone-2,.krane-info-tone-4{background:#f0eff7;}
.krane-info-tone-3{background:#e9f6f8;}
.krane-info-extra>.wrap{padding-left:44px;padding-right:44px;}
.krane-info-extra-content{color:#19374f;line-height:1.7;display:flow-root;}
.krane-info-extra-content h3{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:500;letter-spacing:normal;color:#587d85;line-height:1.2;margin:10px 0 22px;}
.krane-info-extra-content h4{font-size:1.1rem;margin:24px 0 6px;color:#177b9d;}
.krane-info-extra-content p{margin:0 0 12px;}
#krane-info-1 .krane-info1-content{display:flow-root;max-width:none;}
@media(max-width:700px){.krane-info-extra{padding:55px 0}.krane-info-extra>.wrap{padding-left:24px;padding-right:24px}#krane-info-1 .krane-info-foto,.krane-info-extra .krane-info-foto{float:none;width:100%;max-width:none;margin:0 0 22px;aspect-ratio:1.5}}

/* KRANE INFO 2-4: exakt die gleiche aeussere Breite wie INFO 1.
   INFO 1 liegt innerhalb der 1120px-Wrap mit 24px Seitenabstand. */
#krane-info-2, #krane-info-3, #krane-info-4 {
  width: calc(100% - 48px);
  max-width: 1072px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* Wechselnde Farbflaechen nach den Vorgaben. */
#krane-info-2, #krane-info-4 {
  background: linear-gradient(120deg,#eff9fc,#f6faf9);
}
#krane-info-3 {
  background: #f0eff7;
}
/* Bilder in allen vier Infobereichen vollstaendig zeigen, nicht beschneiden. */
#krane-info-1 .krane-info-foto,
#krane-info-2 .krane-info-foto,
#krane-info-3 .krane-info-foto,
#krane-info-4 .krane-info-foto {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
  max-height: none;
}
@media (max-width:700px) {
  #krane-info-2, #krane-info-3, #krane-info-4 {
    width: calc(100% - 48px);
  }
}

/* KRANE: identische Mindesthoehe und Innenabstaende wie STAPLER.
   Keine viewport-abhaengige Zusatzhoehe fuer die Kran-Hauptkarte. */
@media (min-width: 801px) {
  #krane > .wrap > .krane-nachhilfe-hintergrund {
    min-height: 600px;
    padding-top: 78px;
    padding-bottom: 78px;
    box-sizing: border-box;
  }
}

/* KRANE: INFO 1 ist ein Kind derselben .wrap wie die Hauptkarte.
   Deshalb darf die Mindesthoehe NICHT auf .wrap liegen, sonst
   verlaengert sie auch den Infobereich. Nur die Hauptkarte fuellt
   den beim Navigationssprung verbleibenden Bildschirmraum. */
@media (min-width:801px) {
  #krane > .wrap { min-height: 0; }
  #krane > .wrap > .krane-nachhilfe-hintergrund {
    box-sizing: border-box;
    min-height: calc(100dvh - 142px);
    flex: 0 0 auto;
  }
}

/* KRANE Feld 4: vier Buttons in einer Reihe, im Stil der STAPLER Buttons */
#krane .krane-actions{display:flex;flex-wrap:nowrap;gap:7px;margin:28px 0 0;width:100%;align-items:stretch}
#krane .krane-btn{display:flex;align-items:center;justify-content:center;min-width:0;flex:1 1 0;padding:12px 5px;border:2px solid #137e95;border-radius:9px;font:inherit;font-size:clamp(10px,1vw,13px);font-weight:750;text-decoration:none;text-align:center;line-height:1.25;overflow-wrap:anywhere;cursor:pointer}
#krane .krane-btn.primary{background:#137e95;color:#fff}
#krane .krane-btn.secondary{background:#fff;color:#137e95}
@media(max-width:800px){#krane .krane-actions{gap:6px}#krane .krane-btn{font-size:clamp(10px,2.7vw,13px);padding:10px 4px}}


/* KRANE – Felder 1–6 an STAPLER/FÜHRERSCHEIN-Vorlage angeglichen.
   Nur die Hauptseite KRANE, keine INFO-Bereiche oder andere Seiten. */
#krane > .wrap > .krane-nachhilfe-hintergrund {
  padding: 78px 44px;
  box-sizing: border-box;
  min-height: 600px;
  flex: 1 0 auto;
}
#krane .krane-bildreihe {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 55px;
  align-items: start;
  margin-bottom: 24px;
}
#krane .krane-bildreihe-inhalt { min-width: 0; }
#krane .krane-eyebrow {
  color:#137e95; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; font-size:.8rem; line-height:1.65;
  margin:0 0 20px;
}
#krane .krane-haupttitel {
  font-size:clamp(2rem,4.2vw,3.6rem); font-weight:500;
  letter-spacing:normal; color:#587d85; line-height:1.2;
  margin:10px 0 22px;
}
#krane .krane-einleitung {
  font-size:1.18rem; line-height:1.65; color:#233e50;
  font-weight:500; margin:0 0 18px; max-width:600px;
  min-height:124px;
}
#krane .krane-actions {
  display:flex; flex-wrap:nowrap; align-items:stretch;
  gap:8px; margin:28px 0; width:100%;
}
#krane .krane-btn {
  display:flex; justify-content:center; align-items:center;
  min-width:0; flex:1 1 0; padding:12px 5px;
  border:2px solid #137e95; border-radius:9px;
  font:inherit; font-weight:750; font-size:clamp(10px,1vw,13px);
  text-align:center; text-decoration:none; line-height:1.25;
  overflow-wrap:anywhere;
}
#krane .krane-ausbildungsfoto {
  display:block; width:100%; max-height:300px; object-fit:cover;
  border-radius:24px; box-shadow:0 20px 50px #143f5a22;
  margin-top:0;
}
@media (max-width: 760px) {
  #krane > .wrap > .krane-nachhilfe-hintergrund {padding:26px 22px;}
  #krane .krane-bildreihe {grid-template-columns:1fr;gap:24px;}
  #krane .krane-einleitung {min-height:0;}
  #krane .krane-actions {gap:6px;}
  #krane .krane-btn {font-size:clamp(10px,2.7vw,13px);padding:10px 4px;}
}

/* KRANE Feld 4: vier Kranarten plus drei Kontaktbuttons nebeneinander. */
#krane .krane-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;}
#krane .krane-actions .krane-btn{flex:1 1 0;min-width:0;overflow-wrap:normal;word-break:normal;hyphens:auto;padding:12px 5px;font-size:clamp(10px,0.9vw,13px);line-height:1.25;}
@media(max-width:900px){#krane .krane-actions .krane-btn{flex:1 1 22%;}}
@media(max-width:480px){#krane .krane-actions .krane-btn{flex:1 1 42%;}}

/* KRANE: Feld 4 unterhalb von Feld 3/6 ueber gesamte Innenbreite bis Bildrand. */
#krane .krane-bildreihe > .krane-actions {grid-column:1 / -1;width:100%;margin:0;display:flex;flex-wrap:nowrap;gap:8px;}
#krane .krane-bildreihe > .krane-actions .krane-btn {flex:1 1 0;min-width:0;}
@media(max-width:900px){#krane .krane-bildreihe > .krane-actions{flex-wrap:wrap;}#krane .krane-bildreihe > .krane-actions .krane-btn{flex:1 1 22%;}}
@media(max-width:480px){#krane .krane-bildreihe > .krane-actions .krane-btn{flex:1 1 42%;}}

/* STESCH: Fachseminar Ladungssicherung – nur Seite LADUNGSSICHERUNG */
#ladung .st-ladung-main{padding-top:clamp(20px,3vw,44px);padding-bottom:clamp(28px,4vw,56px)}
#ladung .st-ladung-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,2vw,30px);align-items:start}
#ladung .st-ladung-eyebrow{color:#155b9c;font-weight:750;text-transform:uppercase;letter-spacing:.055em;font-size:clamp(12px,1.05vw,16px);margin:0 0 16px}
#ladung .st-ladung-copy h2{color:#163d71;font-size:clamp(29px,3vw,46px);line-height:1.13;margin:0 0 24px;font-weight:750}
#ladung .st-ladung-box{background:#e8f2fc;border-radius:18px;padding:18px 22px;margin:0 0 16px;color:#173e73;box-shadow:0 5px 16px rgba(25,65,110,.06)}
#ladung .st-ladung-box h3{font-size:clamp(20px,1.7vw,25px);margin:0 0 8px;color:#153d77}
#ladung .st-ladung-box ul{margin:0;padding-left:24px;line-height:1.5}
#ladung .st-ladung-box li{margin:2px 0}
#ladung .st-ladung-box p{margin:0;line-height:1.6}
#ladung .st-ladung-photo img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 9px 24px rgba(25,65,110,.14)}
@media(max-width:850px){#ladung .st-ladung-grid{grid-template-columns:1fr}#ladung .st-ladung-photo{max-width:600px;margin:auto}}

/* Ladungssicherung: Zielsetzung und Zielgruppe volle Breite unter dem Foto */
@media(min-width:761px){#ladung .st-ladung-grid>.st-ladung-box{grid-column:1/-1;margin-bottom:0}#ladung .st-ladung-grid>.st-ladung-box:last-child{margin-bottom:0}}

/* LADUNGSSICHERUNG: Abstand zwischen Bereichskopf und Inhalt wie bei Stapler/Krane */
#ladung .section-heading{margin-bottom:0}
#ladung .st-ladung-main{padding-top:0}

/* Ladungssicherung: Kopfbereich ohne erzwungene Bildschirmhoehe */
#ladung > .wrap:first-child{min-height:0!important;flex:0 0 auto!important;}
#ladung > .wrap.st-ladung-main{min-height:0!important;flex:0 0 auto!important;}

/* Nur Ladungssicherung: Bildunterkante auf Hoehe des linken Beschreibungsfeldes. */
@media (min-width: 769px){#ladung .st-ladung-grid{align-items:stretch}#ladung .st-ladung-photo{min-height:100%;display:flex}#ladung .st-ladung-photo img{height:100%;width:100%;object-fit:fill}}

/* Nur Ladungssicherung: Fotohoehe ausschliesslich durch linke Textspalte bestimmen */
@media(min-width:761px){#ladung .st-ladung-photo{position:relative;min-height:0;height:auto;align-self:stretch}#ladung .st-ladung-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}}

/* Ladungssicherung: Beschreibungsfeld und Foto unten buendig */
#ladung .st-ladung-copy > .st-ladung-box{margin-bottom:0}

/* LADUNGSSICHERUNG: gleicher kleiner Abstand unter Beschreibung und Foto vor Zielsetzung. */
#ladung .st-ladung-grid + .st-ladung-box{margin-top:16px;}

/* TRAINING – Unfallpraevention: eigenstaendige Gestaltung analog Ladungssicherung */
#training>.wrap:first-child{min-height:0!important;flex:0 0 auto!important}
#training>.wrap.st-training-main{min-height:0!important;flex:0 0 auto!important;padding-top:0;padding-bottom:clamp(28px,4vw,56px)}
#training .section-heading{margin-bottom:0}
#training .st-training-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(16px,2vw,30px);align-items:start}
#training .st-training-eyebrow{color:#155b9c;font-weight:750;text-transform:uppercase;letter-spacing:.055em;font-size:clamp(12px,1.05vw,16px);margin:0 0 16px}
#training .st-training-copy h2{color:#163d71;font-size:clamp(29px,3vw,46px);line-height:1.13;margin:0 0 20px;font-weight:750}
#training .st-training-intro{font-size:1.06rem;line-height:1.6;color:#233e50;margin:0 0 20px}
#training .st-training-box{background:#e8f2fc;border-radius:18px;padding:18px 22px;margin:0;color:#173e73;box-shadow:0 5px 16px rgba(25,65,110,.06)}
#training .st-training-box h3{font-size:clamp(20px,1.7vw,25px);margin:0 0 8px;color:#153d77}
#training .st-training-box ul{margin:0;padding-left:24px;line-height:1.5}
#training .st-training-box li{margin:2px 0}
#training .st-training-box p{margin:0;line-height:1.6}
#training .st-training-photo img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 9px 24px rgba(25,65,110,.14)}
#training .st-training-lower{display:grid;gap:16px;margin-top:16px}
@media(max-width:850px){#training .st-training-grid{grid-template-columns:1fr}#training .st-training-photo{max-width:600px;margin:auto}}

/* TRAINING: volle Breite für Beschreibung und Buttons unter Zielgruppe */
#training .st-training-main>.st-training-box{margin-top:16px;width:100%;box-sizing:border-box}
#training .st-training-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
@media(max-width:600px){#training .st-training-actions{flex-direction:column;align-items:stretch}}

/* TRAINING: Buttons im identischen STESCH-Staplerdesign */
#training .st-training-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0}
#training .st-training-actions .stapler-btn{display:inline-block;box-sizing:border-box;padding:12px 22px;border-radius:9px;font:inherit;font-weight:750;text-decoration:none;cursor:pointer;border:2px solid #137e95;text-align:center}
#training .st-training-actions .stapler-btn.primary{background:#137e95;color:#fff}
#training .st-training-actions .stapler-btn.secondary{background:#fff;color:#137e95}