/* ==========================================================================
   Rahmen wie die Branchen-Landingpages (2026-10-30)
   Header, Footer, Buttons und Hero-Überschrift der Seiten mit site.css
   (Startseite, Ratgeber, Rechtsseiten) übernehmen die Werte aus
   tankstellen/style.css. Wird nach site.css geladen.
   ========================================================================== */
:root{--nav-h:94px;--line:#D9DFD5;--max:1600px}

/* Header: volle Breite, Marke links, Navigation Mitte, ein dunkler CTA rechts */
.site-header{border-bottom:1px solid var(--line)}
.site-header .header-inner{max-width:none;padding:0 4%;gap:25px;height:calc(var(--nav-h) - 1px)}
.header-left{display:contents}
.brand{gap:10px;color:var(--ink);white-space:nowrap}
.brand-mark{width:35px;height:auto;fill:none;stroke:currentColor;stroke-width:1.7;color:var(--ink)}
.brand-name{font-family:var(--serif);font-size:27px;font-weight:700;letter-spacing:-1px;line-height:1}
.brand-sub{font:600 9px/1.5 var(--sans);letter-spacing:1px;text-transform:uppercase;border-left:1px solid var(--line);padding-left:14px;margin-left:6px;white-space:normal;color:var(--ink)}
.nav{gap:24px;font-size:13px;font-weight:400}
.nav a:not(.btn){color:var(--ink)}
.nav a:not(.btn):hover{text-decoration:underline}
.nav .nav-sheet-cta{color:#fff;justify-content:center}

/* Buttons: Pfeil rechts, großzügige Innenabstände */
.btn{gap:24px;justify-content:space-between;min-height:0;padding:16px 23px;font-size:14px;font-weight:600;line-height:1.55;border-radius:5px}
.btn>span{font-size:20px;line-height:1.55;font-family:Arial,sans-serif} /* Pfeil-Zeichen aus derselben Ersatzschrift wie auf den Branchenseiten */
.site-header .btn{flex-shrink:0}
.btn-lg{min-height:0;padding:16px 23px;font-size:14px}
.btn-small{padding:11px 17px;font-size:12px}
.btn-dark,.site-header .btn-dark{background:var(--dark);color:#fff;border:0}
.btn-dark:hover,.btn-dark:active{background:var(--primary-active);color:#fff}
.text-link{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.text-link:hover{text-decoration:underline}
.hero-actions{align-items:center;gap:22px}

/* Hero: Spaltenverhältnis und Überschrift */
@media (min-width:1025px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px}}
.hero h1{font-size:clamp(46px,5vw,78px);letter-spacing:-3.5px;line-height:1.04}

@media (max-width:1100px){
  .hero h1{font-size:57px}
}
@media (max-width:800px){
  :root{--nav-h:78px}
  .brand-name{font-size:23px}
  .brand-sub{display:none}
  .site-header .btn-small{font-size:10px;padding:10px;gap:8px}
  .hero h1{font-size:clamp(47px,8vw,66px);letter-spacing:-2.5px}
}

/* Grundriss der Startseite als isometrische Ansicht im Stil der Branchen-Illustrationen.
   Die Zeichnung erzeugt scratchpad-Skript iso_plan.py; Nummern sitzen direkt auf den Objekten.
   Akzentfarbe je nach gewählter Branche, wie auf den Branchenseiten. */
:root{--plan-accent:#1f6b86}
:root[data-branch="markt"]{--plan-accent:#c8453a}
:root[data-branch="baeckerei"]{--plan-accent:#c47f2c}
.hero .drawing{background:#e9eee2;background-image:none}
.iso-tag rect{fill:#fff;stroke:#d9e2d3}
.iso-tag text{font:600 9.5px "IBM Plex Sans",sans-serif;letter-spacing:.1em;fill:#607169}
.p-route{stroke-width:2.2}
.balloon,.pos{background:#102c26;color:#fff;border:3px solid #fff;box-shadow:0 4px 10px rgba(16,44,38,.25)}
.pos{border-width:2px;box-shadow:none}
.balloon::after{border-color:var(--plan-accent)}
.balloon:hover,.balloon.is-active,.parts-list button.is-active .pos{background:var(--plan-accent);color:#fff}
.bp-b1{left:41.6%;top:33.9%}
.bp-b2{left:83.6%;top:45.3%}
.bp-b3{left:56.1%;top:44.1%}
.bp-s1{left:66.9%;top:31.9%}
.bp-s2{left:60.2%;top:69.7%}
.bp-s3{left:36.0%;top:25.2%}
.bp-s4{left:21.4%;top:42.9%}
.bp-t1{left:62.6%;top:57.6%}
.bp-t2{left:35.7%;top:29.1%}
.bp-t3{left:22.5%;top:39.6%}