/* =====================================================================
   KUSCH & WIRTZ — Stylesheet (v2, 24.09.2026). Mobil zuerst:
   die Basis gilt fuer 375 px, Media Queries (720/1000 px) nur fuer
   Spaltenwechsel. Groessen sind fluide Tokens (tokens.css).
   Signaturen, alle aus der Welt des Betriebs:
     - Typenschild   Stellen-Fakten wie das Schild an einem Geraet
     - Sicherungsleiste  der Karriereweg als Reihe von Automaten
     - Haus-Szene    Licht / Solar / Wallbox zum Antippen (Startseite)
   Bindende Textur: die rote „Leitung" unter Abschnittsueberschriften.
   ===================================================================== */

/* ---- Reset / Basis ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:var(--sans);font-size:var(--fs-body);font-weight:var(--wght-body);
  line-height:var(--lh-body);color:var(--body-text);background:var(--page-bg);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
strong,b{font-weight:var(--wght-strong)}
:focus-visible{outline:3px solid var(--focus-outline);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-fill);color:var(--on-accent-fill)}
main{display:block}
main:focus{outline:none}

/* Globales Bewegungs-Aus: stoppt JEDE Animation und Transition */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important}
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sec--tight{padding-block:var(--sec-y-tight)}
.sec--surface{background:var(--card-surface)}
.is-dark{background:var(--page-bg);color:var(--body-text)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:var(--z-skip);background:var(--body-text);color:var(--page-bg);
  padding:12px 18px;border-radius:var(--rad);font-weight:var(--wght-strong);text-decoration:none}
.skip-link:focus{top:12px}

/* ---- Typografie ---- */
h1,h2,h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:var(--lh-head);
  letter-spacing:var(--track-display);text-wrap:balance}
h1{font-size:var(--fs-display)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.05}
p,li{text-wrap:pretty}
p{max-width:var(--measure)}
.lead{font-size:var(--fs-lead);font-weight:var(--wght-lead);line-height:var(--lh-lead);color:var(--muted-text)}
.rot{color:var(--accent-fill)}          /* nur Display-Groesse: 4,3:1 reicht dort (>=3:1) */
.is-dark .rot{color:var(--accent-text)}
.kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--disp);font-weight:800;
  text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--fs-label);color:var(--accent-text)}
.kicker .ico{width:1.15em;height:1.15em;color:var(--accent-fill)}
.is-dark .kicker .ico{color:var(--signal-fill)}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:1em}
.prose a,.link{color:var(--accent-text);font-weight:var(--wght-strong);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1.5px}
.prose a:hover,.link:hover{color:var(--accent-deep-text)}
.klein{font-size:var(--fs-small);color:var(--muted-text)}

/* Abschnittskopf mit der roten „Leitung" als bindende Textur */
.shead{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.shead .kicker{margin-bottom:12px}
.shead h2{margin-bottom:14px}
.shead::after{content:"";display:block;width:72px;height:3px;margin-top:20px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-fill) 70%,var(--signal-fill) 70%)}
.shead--mitte{margin-inline:auto;text-align:center}
.shead--mitte::after{margin-inline:auto}
.shead--mitte p{margin-inline:auto}

/* ---- Platzhalter (Vorschau) ---- */
mark.ph{background:var(--ph-bg);color:var(--on-ph-bg);padding:.02em .28em;border-radius:3px;
  outline:1.5px dashed color-mix(in oklch,var(--on-ph-bg) 70%,transparent);outline-offset:0;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;cursor:help}
.ph-foto{display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,var(--ph-bg) 0 14px,color-mix(in oklch,var(--ph-bg) 70%,var(--card-surface)) 14px 28px);
  border:2px dashed color-mix(in oklch,var(--on-ph-bg) 55%,transparent);border-radius:var(--rad-lg);color:var(--on-ph-bg)}
.ph-foto--43{aspect-ratio:4/3}.ph-foto--32{aspect-ratio:3/2}.ph-foto--11{aspect-ratio:1}.ph-foto--45{aspect-ratio:4/5}
.ph-foto-ico{width:40px;height:40px}
.ph-foto b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem}
.ph-foto span{display:block;font-size:var(--fs-small);max-width:30ch}
.symbolfoto{position:relative}
.symbolfoto figcaption{position:absolute;left:10px;bottom:10px;font-size:var(--fs-label)}
.bild-fehlt{padding:20px;border:2px dashed var(--accent-fill);color:var(--accent-text);font-size:var(--fs-small)}
.vorschau{background:var(--body-text);color:var(--page-bg);font-size:var(--fs-label);line-height:1.4;padding-block:8px}
.vorschau b{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.vorschau-ph{background:var(--ph-bg);color:var(--on-ph-bg);padding:0 .3em;border-radius:3px}

/* ---- Buttons: kantig, condensed, wie das Lettering auf dem Wagen ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 24px;
  border-radius:var(--rad);border:2px solid transparent;cursor:pointer;text-decoration:none;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--track-btn);font-size:1.06rem;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.btn .ico{width:1.2em;height:1.2em;flex:none}
.btn-primary{background:var(--accent-fill);color:var(--on-accent-fill)}
.btn-primary:hover{background:color-mix(in oklch,var(--accent-fill) 86%,black)}
.btn-signal{background:var(--signal-fill);color:var(--on-signal-fill)}
.btn-signal:hover{background:color-mix(in oklch,var(--signal-fill) 88%,white)}
.btn-ghost{background:transparent;color:var(--body-text);border-color:var(--hairline-strong)}
.btn-ghost:hover{border-color:var(--body-text)}
.btn-sm{min-height:44px;padding:0 16px;font-size:.98rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row .btn{flex:1 1 auto}
.micro{margin-top:12px;font-size:var(--fs-small);color:var(--muted-text)}
.micro .ico{display:inline;width:1em;height:1em;vertical-align:-.12em;color:var(--accent-fill)}

/* ---- Kopf ---- */
.site-head{position:sticky;top:0;z-index:var(--z-head);background:color-mix(in oklch,var(--card-surface) 94%,transparent);
  backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);border-bottom:1px solid var(--hairline)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.logo{display:block;flex:none}
.logo img{height:38px;width:auto}
.head-cta{display:flex;align-items:center;gap:4px}
.head-phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:48px;min-height:48px;
  color:var(--body-text);text-decoration:none;font-family:var(--disp);font-weight:800;font-size:1.1rem;letter-spacing:.02em}
.head-phone .ico{width:22px;height:22px;color:var(--accent-fill)}
.head-phone span,.head-anfrage{display:none}
.burger{display:inline-grid;place-items:center;width:48px;height:48px;border:0;background:none;cursor:pointer;color:var(--body-text)}
.burger svg{width:28px;height:28px}
.burger-zu{display:none}
.burger[aria-expanded="true"] .burger-auf{display:none}
.burger[aria-expanded="true"] .burger-zu{display:block}

/* Navigation — mobil: Schublade unter dem Kopf */
.nav{position:absolute;left:0;right:0;top:100%;max-height:calc(100dvh - 100%);overflow-y:auto;
  background:var(--card-surface);border-bottom:1px solid var(--hairline);box-shadow:0 18px 40px color-mix(in oklch,var(--body-text) 16%,transparent);
  padding:8px var(--gutter) 24px;display:none}
.nav.offen{display:block}
.nav-links>li>a{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 4px;border-bottom:1px solid var(--hairline);
  text-decoration:none;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.25rem}
.nav-links a[aria-current="page"]{color:var(--accent-text)}
.nav-sub{padding:4px 0 8px 16px;border-bottom:1px solid var(--hairline)}
.nav-sub a{display:flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none;color:var(--muted-text);font-weight:var(--wght-label)}
.nav-sub a:hover,.nav-links>li>a:hover{color:var(--accent-text)}
.nav-badge{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:var(--signal-fill);color:var(--on-signal-fill);font-family:var(--sans);font-weight:var(--wght-strong);font-size:.875rem;letter-spacing:0}
.nav-mobil-cta{display:grid;gap:10px;margin-top:20px}

/* ---- Hero Startseite ---- */
.hero{padding-block:clamp(28px,5vw,72px) clamp(40px,6vw,88px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0,color-mix(in oklch,var(--accent-fill) 9%,transparent),transparent 60%)}
.hero-grid{display:grid;gap:28px}
.hero .kicker{margin-bottom:14px}
.hero h1{margin-bottom:18px}
.hero h1 .zeile2{display:block;color:var(--accent-fill)}
.hero .lead{margin-bottom:24px;max-width:46ch}
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.trust li{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid var(--hairline-strong);
  border-radius:999px;font-size:var(--fs-small);font-weight:var(--wght-label);background:var(--card-surface)}
.trust .ico{width:16px;height:16px;color:var(--accent-fill)}
.trust a{text-decoration:none}
.hero-media{position:relative}
.hero-media img{border-radius:var(--rad-lg);width:100%;aspect-ratio:1200/742;object-fit:cover}
.jobteaser{display:flex;align-items:center;gap:14px;margin-top:-28px;margin-inline:12px;position:relative;
  padding:14px 16px;border-radius:var(--rad);text-decoration:none;box-shadow:0 14px 34px color-mix(in oklch,black 28%,transparent)}
.jobteaser .jt-zahl{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:var(--signal-fill);
  color:var(--on-signal-fill);font-family:var(--disp);font-weight:800;font-size:1.7rem}
.jobteaser b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1.12rem;line-height:1.1}
.jobteaser span{display:block;font-size:var(--fs-small);color:var(--muted-text)}
.jobteaser .ico{margin-left:auto;flex:none;width:22px;height:22px;color:var(--accent-text)}

/* ---- Seitenkopf der Unterseiten ---- */
.phero{padding-block:clamp(22px,4vw,56px) clamp(34px,5vw,64px);border-bottom:1px solid var(--hairline);position:relative;overflow:hidden}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0,color-mix(in oklch,var(--accent-fill) 8%,transparent),transparent 60%)}
.phero .kicker{margin-bottom:12px}
.phero h1{max-width:20ch}
.phero .h1-zusatz{display:block;margin-top:10px;font-family:var(--sans);font-weight:var(--wght-label);text-transform:none;
  letter-spacing:0;font-size:var(--fs-lead);line-height:1.35;color:var(--muted-text)}
.phero .lead{margin-top:16px}
.phero .btn-row{margin-top:24px}
.phero-grid{display:grid;gap:28px;align-items:start}
.crumbs{margin-bottom:16px;font-size:var(--fs-small);color:var(--muted-text)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0}
.crumbs li:not(:last-child)::after{content:"›";margin:0 .5em;color:var(--hairline-strong)}
.crumbs a{color:var(--muted-text);text-underline-offset:.2em}
.crumbs a:hover{color:var(--accent-text)}

/* ---- Karten, Raster ---- */
.grid{display:grid;gap:14px}
.card{background:var(--card-surface);border:1px solid var(--hairline);border-radius:var(--rad-lg);padding:clamp(20px,3vw,30px)}
.is-dark .card{border-color:var(--hairline)}

/* Leistungen */
.svc{position:relative;display:flex;flex-direction:column;gap:10px;text-decoration:none;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.svc:hover{border-color:var(--hairline-red);box-shadow:0 16px 36px color-mix(in oklch,var(--body-text) 10%,transparent)}
.svc .svc-ico{width:42px;height:42px;color:var(--accent-fill)}
.svc h3{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem)}
.svc p{color:var(--muted-text);font-size:var(--fs-small);max-width:44ch}
.svc .mehr{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;font-size:.95rem;color:var(--accent-text);padding-top:6px}
.svc .mehr .ico{width:18px;height:18px;transition:transform .2s var(--ease)}
.svc:hover .mehr .ico{transform:translateX(4px)}
.svc--gross{background:var(--body-text);color:var(--page-bg);border-color:transparent}
.svc--gross p{color:color-mix(in oklch,var(--page-bg) 80%,transparent)}
.svc--gross .svc-ico{color:var(--signal-fill)}
.svc--gross .mehr{color:var(--signal-fill)}

/* Werte / Vorteile */
.vorteile{display:grid;gap:12px}
.vorteil{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;align-items:start}
.vorteil .v-ico{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;
  background:var(--red-tint-bg);color:var(--accent-fill)}
.is-dark .vorteil .v-ico{background:var(--card-surface);color:var(--signal-fill)}
.vorteil .v-ico svg{width:24px;height:24px}
.vorteil h3{font-size:1.2rem;line-height:1.1;padding-top:2px}
.vorteil p{color:var(--muted-text);font-size:var(--fs-small)}

/* Haekchen-Listen */
.checks{display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.checks .li-ico{width:22px;height:22px;color:var(--accent-fill);margin-top:2px}
.is-dark .checks .li-ico{color:var(--signal-fill)}

/* Ablauf (echte Reihenfolge -> nummeriert) */
.steps{display:grid;gap:12px;counter-reset:schritt}
.step{position:relative;padding-left:56px}
.step::before{counter-increment:schritt;content:counter(schritt);position:absolute;left:0;top:0;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:var(--accent-fill);color:var(--on-accent-fill);font-family:var(--disp);font-weight:800;font-size:1.25rem}
.step h3{font-size:1.25rem;margin-bottom:6px;padding-top:8px}
.step p{color:var(--muted-text);font-size:var(--fs-small)}
.is-dark .step::before{background:var(--signal-fill);color:var(--on-signal-fill)}

/* ---- Typenschild: Stellenfakten wie das Schild an einem Geraet ---- */
.plate{position:relative;background:var(--card-surface);border:1.5px solid var(--hairline-strong);border-radius:10px;
  padding:18px 18px 12px;
  /* vier Schraubpunkte in den Ecken */
  background-image:
    radial-gradient(circle at 12px 12px,var(--hairline-strong) 0 3px,transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) 12px,var(--hairline-strong) 0 3px,transparent 3.5px),
    radial-gradient(circle at 12px calc(100% - 12px),var(--hairline-strong) 0 3px,transparent 3.5px),
    radial-gradient(circle at calc(100% - 12px) calc(100% - 12px),var(--hairline-strong) 0 3px,transparent 3.5px)}
.plate-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px 10px;margin-bottom:4px;
  border-bottom:2px solid var(--body-text)}
.plate-kopf b{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--fs-label)}
.plate-kopf .ico{width:22px;height:22px;color:var(--accent-fill)}
.typenschild{display:grid;padding:0 10px}
.typenschild>div{display:grid;grid-template-columns:minmax(88px,34%) 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--hairline)}
.typenschild>div:last-child{border-bottom:0}
.typenschild dt{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:var(--fs-label);
  color:var(--muted-text);padding-top:.15em}
.typenschild dd{font-weight:var(--wght-label);min-width:0;overflow-wrap:break-word;hyphens:manual}   /* auto trennte Ener-gie- */

/* Stellenkarten (Uebersicht, Startseite) */
.jobcards{display:grid;gap:14px}
.jobcard{display:flex;flex-direction:column;gap:12px;text-decoration:none;height:100%;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.jobcard:hover{border-color:var(--hairline-red)}
.jobcard .jc-art{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--track-label);
  font-size:var(--fs-label);color:var(--accent-text)}
.jobcard h3{font-size:clamp(1.4rem,1.25rem + .6vw,1.75rem)}
.jobcard p{font-size:var(--fs-small);color:var(--muted-text)}
.jobcard .mehr{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--disp);font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text)}
.jobcard .mehr .ico{width:18px;height:18px}
.is-dark .jobcard{background:var(--card-surface)}
/* Mobil: Stellen als waagerechte Wischleiste statt vier hoher Karten */
@media (max-width:719px){
  .jobcards--wisch{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:10px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .jobcards--wisch>*{scroll-snap-align:start}
}
.wisch-hinweis{margin-top:6px;font-size:var(--fs-small);color:var(--muted-text)}

/* ---- Sicherungsleiste: der Karriereweg ---- */
.leiste{position:relative;display:grid;gap:18px;counter-reset:stufe}
.leiste::before{content:"";position:absolute;left:31px;top:24px;bottom:24px;width:6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,var(--hairline-strong) 0 6px,transparent 6px 10px)}
.stufe{position:relative;display:grid;grid-template-columns:68px 1fr;gap:16px;align-items:start;align-content:start}
.automat{position:relative;width:68px;height:92px;border-radius:9px;background:var(--card-surface);
  border:1.5px solid var(--hairline-strong);box-shadow:0 6px 14px color-mix(in oklch,var(--body-text) 10%,transparent);
  display:grid;place-items:center}
.automat::before{content:"";position:absolute;inset:auto 10px 10px;height:8px;border-radius:2px;background:var(--hairline)}
.hebel{position:relative;width:26px;height:44px;border-radius:6px;background:var(--hairline);overflow:hidden}
.hebel::after{content:"";position:absolute;left:3px;right:3px;height:18px;border-radius:4px;bottom:3px;
  background:var(--muted-text);transition:transform .45s var(--ease-snap),background-color .3s var(--ease)}
.stufe.an .hebel::after,html:not(.js) .hebel::after{transform:translateY(-20px);background:var(--signal-fill)}
.stufe.an .automat,html:not(.js) .automat{border-color:color-mix(in oklch,var(--signal-fill) 70%,var(--body-text))}
.automat-nr{position:absolute;top:6px;left:8px;font-family:var(--disp);font-weight:800;font-size:.875rem;color:var(--muted-text)}
.stufe h3{font-size:clamp(1.3rem,1.2rem + .5vw,1.6rem);padding-top:6px}
.stufe .dauer{display:inline-block;margin:6px 0 6px;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;font-size:var(--fs-label);color:var(--accent-text)}
.stufe p{font-size:var(--fs-small);color:var(--muted-text)}
.stufe a{color:var(--accent-text);font-weight:var(--wght-strong)}

/* ---- Stimmen ---- */
.quotes{display:grid;gap:14px}
.quote{display:flex;flex-direction:column;gap:12px}
.quote .sterne{color:var(--accent-fill);letter-spacing:2px;font-size:1.05rem;line-height:1}
.quote blockquote{font-size:1.06rem;line-height:1.5;font-weight:500}
.quote figcaption{margin-top:auto;font-size:var(--fs-small);color:var(--muted-text)}
.quote figcaption b{display:block;color:var(--body-text);font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1rem}

/* ---- Split (Text + Bild) ---- */
.split{display:grid;gap:28px;align-items:center}
.split-media img{border-radius:var(--rad-lg);width:100%}
.founders{display:flex;flex-wrap:wrap;gap:14px 24px;margin:20px 0 24px}
.founder{display:flex;align-items:center;gap:12px}
.founder .av{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--body-text);color:var(--signal-fill);
  font-family:var(--disp);font-weight:800;font-size:1.15rem}
.founder b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:1.1rem;line-height:1.1}
.founder small{display:block;color:var(--muted-text);font-size:var(--fs-small)}

/* ---- Info-Tabelle (Verguetung) ---- */
.tabelle{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tabelle caption{text-align:left;font-weight:var(--wght-strong);margin-bottom:8px}
.tabelle th,.tabelle td{padding:10px 8px;border-bottom:1px solid var(--hairline);text-align:left}
.tabelle th{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-label);color:var(--muted-text)}
.tabelle td.zahl{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--wght-strong)}
.quelle{margin-top:10px;font-size:var(--fs-small);color:var(--muted-text)}
.quelle a{color:var(--accent-text)}

/* ---- Hinweis-Kasten (Eltern, Fakten) ---- */
.kasten{border-left:4px solid var(--signal-fill);background:var(--gold-tint-bg);border-radius:0 var(--rad-lg) var(--rad-lg) 0;padding:clamp(20px,3vw,30px)}
.kasten h2,.kasten h3{margin-bottom:10px}
.antwort{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:500}

/* ---- FAQ (native details) ---- */
.faq{display:grid;gap:10px;max-width:880px}
.faq details{background:var(--card-surface);border:1px solid var(--hairline);border-radius:var(--rad)}
.faq details[open]{border-color:var(--hairline-red)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:56px;padding:14px 18px;cursor:pointer;
  list-style:none;font-weight:var(--wght-strong);font-size:1.06rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-text)}
.faq-ico{flex:none;width:22px;height:22px;color:var(--accent-fill);transition:transform .25s var(--ease)}
.faq details[open] .faq-ico{transform:rotate(45deg)}
.faq-a{padding:0 18px 18px;color:var(--muted-text)}
.faq-a p+p{margin-top:.8em}
.faq-a a{color:var(--accent-text);font-weight:var(--wght-strong)}

/* ---- CTA-Band (rot) ---- */
.cta-band{background:var(--accent-fill);color:var(--on-accent-fill);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in oklch,var(--signal-fill) 30%,transparent),transparent 70%);pointer-events:none}
.cta-band .kicker{color:var(--on-accent-fill)}
.cta-band .kicker .ico{color:var(--signal-fill)}
.cta-band h2{margin:12px 0 14px;max-width:18ch}
.cta-band p{color:var(--on-accent-fill)}
.cta-band .btn-row{margin-top:24px}
.cta-band .btn-ghost{color:var(--on-accent-fill);border-color:color-mix(in oklch,var(--on-accent-fill) 60%,transparent)}
.cta-band .btn-ghost:hover{border-color:var(--on-accent-fill);background:color-mix(in oklch,black 12%,transparent)}
.cta-band .micro{color:var(--on-accent-fill)}
.cta-meta{margin-top:18px;font-size:var(--fs-small)}

/* Abschluss-Zeile unter einer Sektion (derselbe Weg nach jeder Sektion) */
.weiter{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:clamp(24px,4vw,40px)}
.weiter .micro{margin:0}

/* ---- Formular ---- */
.form{background:var(--card-surface);border:1px solid var(--hairline);border-radius:var(--rad-lg);padding:clamp(20px,3.5vw,34px)}
.form h2{font-size:clamp(1.6rem,1.4rem + 1vw,2.2rem);margin-bottom:8px}
.form-intro{color:var(--muted-text);margin-bottom:20px}
.field{margin-bottom:16px;min-width:0}
.field label,.field legend{display:block;font-weight:var(--wght-strong);margin-bottom:6px}
.field .opt{font-weight:var(--wght-body);color:var(--muted-text)}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field select,.field textarea{
  width:100%;min-height:52px;padding:12px 14px;background:var(--card-surface);border:1.5px solid var(--field-border);border-radius:var(--rad);
  font-size:max(16px,1rem)}   /* 16 px: iOS zoomt sonst beim Antippen hinein */
.field textarea{min-height:120px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus-outline);outline-offset:1px;border-color:var(--body-text)}
.field [aria-invalid="true"]{border-color:var(--err-text);border-width:2px}
.field-hint{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--muted-text)}
.field-error{display:block;margin-top:6px;font-size:var(--fs-small);font-weight:var(--wght-strong);color:var(--err-text)}
fieldset.field{border:0}
.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1.5px solid var(--field-border);
  border-radius:999px;cursor:pointer;font-weight:var(--wght-label);margin:0}
.wahl input{width:24px;height:24px;accent-color:var(--accent-fill)}   /* WCAG 2.5.8: Ziel >= 24 px */
.wahl label:has(input:checked){border-color:var(--accent-fill);background:var(--red-tint-bg)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin-top:14px;font-size:var(--fs-small);color:var(--muted-text)}
.form-note a{color:var(--accent-text)}
.form .btn{width:100%}
.form .btn[aria-busy="true"]{opacity:.7;cursor:progress}
.notice{border-radius:var(--rad);padding:16px 18px;margin-bottom:20px}
.notice-ok{background:var(--ok-bg);color:var(--ok-text);border:1px solid color-mix(in oklch,var(--ok-text) 40%,transparent)}
.notice-ok h2{font-size:1.4rem;margin-bottom:6px}
.notice-err{background:var(--red-tint-bg);color:var(--err-text);border:1.5px solid var(--err-text)}
.notice-err h2{font-size:1.3rem;margin-bottom:8px}
.notice-err ul{list-style:disc;padding-left:1.2em}
.notice-err a{color:var(--err-text);font-weight:var(--wght-strong)}
.kanaele{display:grid;gap:10px;margin-bottom:20px}
.kanal{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 14px;border:1px solid var(--hairline);border-radius:var(--rad);
  background:var(--card-surface);text-decoration:none}
.kanal:hover{border-color:var(--hairline-red)}
.kanal .ico{flex:none;width:26px;height:26px;color:var(--accent-fill)}
.kanal b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;line-height:1.1}
.kanal span{display:block;font-size:var(--fs-small);color:var(--muted-text)}

/* ---- Kontakt / Karte ---- */
.kontakt-grid{display:grid;gap:28px;align-items:start}
.cinfo{display:grid;gap:16px}
.cinfo-item{display:grid;grid-template-columns:26px 1fr;gap:12px}
.cinfo-item .ico{width:24px;height:24px;color:var(--accent-fill);margin-top:3px}
.cinfo-item b{display:block;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.cinfo-item a{color:var(--accent-text);font-weight:var(--wght-strong)}
.karte{border-radius:var(--rad-lg);overflow:hidden;border:1px solid var(--hairline);aspect-ratio:4/3;margin-top:8px}
.karte iframe{width:100%;height:100%;border:0;display:block}
.karte-laden{width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:8px;padding:20px;text-align:center;
  border:0;cursor:pointer;background:var(--body-text);color:var(--page-bg)}
.karte-laden b{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem}
.karte-laden .ico{width:22px;height:22px;color:var(--signal-fill)}
.karte-laden small{font-size:var(--fs-small);max-width:32ch;color:color-mix(in oklch,var(--page-bg) 82%,transparent)}

/* ---- Rechtstexte ---- */
.legal{max-width:780px}
.legal h2{font-size:clamp(1.35rem,1.2rem + .7vw,1.8rem);margin:36px 0 12px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.15rem;margin:22px 0 8px}
.legal p,.legal ul{margin-bottom:12px;max-width:none}
.legal ul{list-style:disc;padding-left:1.3em}
/* :not(.btn) — sonst faerbt die Regel auch rote Buttons rot ein (Gate-Befund 24.09.2026:
   rote Schrift auf rotem Grund auf Impressum/Datenschutz). */
.legal a:not(.btn){color:var(--accent-text);text-decoration:underline}
.legal .warn{border:2px dashed var(--accent-fill);padding:14px 16px;border-radius:var(--rad);margin-bottom:24px}

/* ---- Fuss ---- */
.site-foot{padding-block:clamp(44px,6vw,72px) 24px}
.foot-grid{display:grid;gap:28px}
.foot-logo img{height:52px;width:auto;margin-bottom:14px}
.foot-brand p{font-size:var(--fs-small);color:var(--muted-text);max-width:38ch}
.foot-brand p+p{margin-top:12px}
.foot-nap a{color:var(--body-text)}
.foot-col h3{font-size:1rem;letter-spacing:.08em;margin-bottom:10px}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;color:var(--muted-text);font-size:var(--fs-small)}
.foot-col a:hover,.foot-nap a:hover{color:var(--accent-text)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:32px;padding-top:20px;
  border-top:1px solid var(--hairline);font-size:var(--fs-small);color:var(--muted-text)}
.foot-bottom a{color:var(--body-text)}

/* ---- Mobile Aktionsleiste ---- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:grid;grid-template-columns:1fr 1.35fr;gap:8px;
  padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom));background:color-mix(in oklch,var(--card-surface) 96%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--hairline);
  transition:transform .25s var(--ease),visibility 0s}
/* weg = Formularfeld hat Fokus, ruht = Seitenkopf-Knoepfe sind sichtbar.
   visibility nach der Bewegung: eine nur verschobene Leiste bliebe per
   Tastatur erreichbar, der Fokus laege dann unsichtbar unter dem Rand. */
.dock.weg,.dock.ruht{transform:translateY(110%);visibility:hidden;
  transition:transform .25s var(--ease),visibility 0s linear .25s}
.dock-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--rad);text-decoration:none;
  background:var(--accent-fill);color:var(--on-accent-fill);font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:1.02rem}
.dock-btn .ico{width:20px;height:20px}
.dock-btn--ghost{background:transparent;color:var(--body-text);border:1.5px solid var(--hairline-strong)}
body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}

/* ---- Haus-Szene (Startseite) — uebernommen aus v1, Farben der Szene stehen im SVG ---- */
.play-grid{display:grid;gap:24px;align-items:center}
.slogan{line-height:1.05}
/* Eigene Zeile fuer „ein Licht auf/an": das hochgestellte „AN" braucht Luft
   nach oben. Vorher schob text-wrap:balance „auf" in Zeile 2, und „AN" lag
   ueber „GEHT" (Web-Review 24.09., gemessen bei 375 und 1280 px). */
.slogan .slogan-zeile{display:block;padding-top:1.12em}
.slogan .swap{position:relative;display:inline-block}
.slogan .swap-off{position:relative;transition:color .3s}
.slogan .swap-off::after{content:"";position:absolute;left:-3px;right:-3px;top:52%;height:.12em;background:var(--accent-fill);
  border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease) .15s}
.slogan .swap-on{position:absolute;left:50%;top:-.74em;color:var(--accent-fill);white-space:nowrap;opacity:0;
  transform:translate(-50%,10px) rotate(-7deg) scale(.5);transition:opacity .4s ease .35s,transform .45s var(--ease) .35s}
.playsec.lit .slogan .swap-off{color:var(--muted-text)}
.playsec.lit .slogan .swap-off::after{transform:scaleX(1)}
.playsec.lit .slogan .swap-on{opacity:1;transform:translate(-50%,0) rotate(-7deg) scale(1)}
.hausscene{position:relative;border-radius:var(--rad-lg);overflow:hidden;box-shadow:0 22px 46px color-mix(in oklch,var(--body-text) 18%,transparent)}
.haus-svg{width:100%;height:auto}
.glass,.wb-led{transition:fill .4s var(--ease)}
.glow,.solar-sheen,.energy,.sunrays{transition:opacity .5s var(--ease)}
.hausscene.is-lit .glass{fill:#ffd34d}
.hausscene.is-lit .glow-living{opacity:.95}
.hausscene.is-lit .wb-led{fill:#27a06a}
.sunrays{opacity:.5}
.hausscene.solar-on .sunrays{opacity:1}
.hausscene.solar-on .solar-sheen{opacity:.7}
.battery-fill{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform 1.1s var(--ease)}
.hausscene.solar-on .battery-fill{transform:scaleY(1)}
.hausscene.solar-on .energy{opacity:.95;animation:fluss 1.1s linear infinite}
@keyframes fluss{to{stroke-dashoffset:-28}}
.car{transition:transform 1.7s cubic-bezier(.5,.02,.6,.98)}
.hausscene.car-out .car{transform:translateX(250px)}
.hausscene.car-out .wb-led{fill:#e11a12}
.cable{transition:opacity .25s .12s}
.hausscene.car-out .cable{opacity:0;transition:opacity .2s}
.speedlines{transition:opacity .25s}
.hausscene.car-out .speedlines{opacity:.85}
.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.ctrl{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:72px;padding:10px 6px;border-radius:var(--rad);
  background:var(--body-text);color:var(--page-bg);border:2px solid transparent;cursor:pointer;transition:border-color .2s}
.ctrl .ctrl-ic{width:28px;height:28px;transition:color .25s}
.ctrl span{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9375rem}
.ctrl[aria-pressed="true"]{border-color:var(--signal-fill)}
.ctrl[aria-pressed="true"] .ctrl-ic{color:var(--signal-fill)}
#cSolar[aria-pressed="true"]{border-color:#3fbf85}
#cSolar[aria-pressed="true"] .ctrl-ic{color:#3fbf85}
#cCar[aria-pressed="true"]{border-color:var(--accent-fill)}
#cCar[aria-pressed="true"] .ctrl-ic{color:#ff6a5c}
.play-hint{margin-top:14px;font-size:var(--fs-small);color:var(--muted-text)}

/* ---- ab 720 px: zwei Spalten ---- */
@media (min-width:720px){
  .btn-row .btn{flex:0 0 auto}
  .grid--2,.quotes,.jobcards,.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .step{padding-left:0;padding-top:54px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form .btn{width:auto}
  .kanaele{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobteaser{position:absolute;left:-16px;bottom:22px;margin:0;max-width:340px}
}

/* ---- ab 1000 px: Desktop ---- */
@media (min-width:1000px){
  .head-inner{min-height:80px}
  .logo img{height:46px}
  .burger{display:none}
  .head-phone span,.head-anfrage{display:inline-flex}
  .head-phone{padding:0 12px}
  .head-cta{gap:10px}
  .nav{position:static;display:block;max-height:none;overflow:visible;background:none;border:0;box-shadow:none;padding:0;margin-left:auto}
  .nav-links{display:flex;align-items:center;gap:2px}
  .nav-links>li{position:relative}
  .nav-links>li>a{min-height:44px;padding:0 12px;border:0;border-radius:6px;font-size:1.05rem}
  .nav-links>li>a:hover{background:var(--red-tint-bg)}
  .nav-sub{position:absolute;left:0;top:100%;min-width:260px;padding:8px;border:1px solid var(--hairline);border-radius:var(--rad);
    background:var(--card-surface);box-shadow:0 18px 40px color-mix(in oklch,var(--body-text) 14%,transparent);
    opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s}
  .nav-links>li:hover>.nav-sub,.nav-links>li:focus-within>.nav-sub{opacity:1;visibility:visible;transform:none}
  .nav-sub a{padding:0 12px;border-radius:6px}
  .nav-sub a:hover{background:var(--red-tint-bg)}
  .nav-mobil-cta{display:none}
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center}
  .phero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4,.jobcards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vorteile{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
  .split--rev .split-media{order:2}
  .play-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .svc-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .svc-bento>*{grid-column:span 2}
  .svc-bento>.svc--gross{grid-column:span 3;grid-row:span 1}
  .svc-bento>.svc--breit{grid-column:span 3}
  .kontakt-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px}
  /* Sicherungsleiste liegt waagerecht auf der Hutschiene */
  .leiste{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
  .leiste::before{left:24px;right:24px;top:40px;bottom:auto;width:auto;height:10px;border-radius:2px;
    background:linear-gradient(180deg,var(--hairline-strong),var(--hairline))}
  .stufe{grid-template-columns:1fr;gap:14px}
  .automat{width:72px;height:96px}
  .dock{display:none}
  body{padding-bottom:0}
}


/* =====================================================================
   NACHTRAEGE DER BAU-PAKETE (eingemischt vom Orchestrator, 24.09.2026)
   Quelle je Block: _bau/css-<paket>.css — dort NICHT weiterpflegen.
   ===================================================================== */

/* ---- Paket „Kern" (Startseite, Über uns, Kontakt) — Nachtrag zu style.css, 24.09.2026 ----
   Nur Tokens aus tokens.css, mobil zuerst. Einmischen hinter die bestehenden Regeln. */

/* Jobteaser im Hero: style.css gibt ihm Schatten und Lage, aber keine Flaeche.
   Ohne Hintergrund laege der Text mobil (margin-top:-28px) und ab 720 px
   (position:absolute) direkt auf dem Foto des Firmenwagens. */
.jobteaser{background:var(--card-surface);border:1px solid var(--hairline);color:var(--body-text)}
.jobteaser:hover{border-color:var(--hairline-red)}

/* Vertrauens-Pille mit Link („Bewertungen auf Google"): der Link fuellt die
   ganze Pille, sonst ist das Tap-Ziel nur die Textzeile (Bauanleitung: >= 44 px). */
.trust li:has(>a){padding:0}
.trust li>a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:999px}
.trust li>a:hover{color:var(--accent-text)}

/* ---- Rechtstexte: Sprungleiste der Datenschutzerklaerung (Paket recht, 24.09.2026) ----
   Mobil ist die Erklaerung deutlich laenger als zehn Bildschirme; die Liste
   springt zu den Abschnitten (Anker = h2-IDs, scroll-padding-top gilt schon).
   Jeder Eintrag ist ein Tap-Ziel >= 44 px (Bauanleitung 6). Nur Tokens.
   Ohne diese Regeln bleibt die Liste bedienbar (unterstrichene Links aus .legal a). */
.legal .inhalt{margin-bottom:32px;padding:14px 18px 8px;border:1px solid var(--hairline);border-radius:var(--rad-lg);background:var(--card-surface)}
.legal .inhalt-titel{margin-bottom:4px;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:var(--track-label);font-size:var(--fs-label);color:var(--muted-text)}
.legal .inhalt ol{display:grid;list-style:none;padding:0;margin:0}
.legal .inhalt li{min-width:0;border-top:1px solid var(--hairline)}
.legal .inhalt li:first-child{border-top:0}
.legal .inhalt a{display:flex;align-items:center;min-height:44px;padding:4px 0;text-decoration:none;font-weight:var(--wght-label)}
.legal .inhalt a:hover{text-decoration:underline;text-underline-offset:.18em}
/* ab 720 px zwei Spalten: die Trennlinie haengt an der Zeile, nicht an der
   Spaltenzahl — deshalb hier fuer den Zweispalter neu entschieden. */
@media (min-width:720px){
  .legal .inhalt ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .legal .inhalt li:nth-child(2){border-top:0}
}

/* ---- Paket leistungen-a (photovoltaik / wallbox / elektroinstallation), 24.09.2026 ----
   Nur Tokens aus tokens.css, mobil zuerst. Vom Orchestrator in style.css einmischen. */

/* Sprungleiste „Direkt zur Frage": die Leistungsseiten sind mobil > 10 Bildschirme
   lang, die Navigation steckt dort hinter dem Menueknopf. Tap-Ziel >= 44 px.
   Ohne diese Regeln bleibt eine schlichte, bedienbare Linkliste stehen. */
.sprung{margin-top:clamp(24px,4vw,40px)}
.sprung-titel{margin-bottom:10px;font-family:var(--disp);font-weight:800;text-transform:uppercase;
  letter-spacing:var(--track-label);font-size:var(--fs-label);color:var(--muted-text)}
.sprung ul{display:flex;flex-wrap:wrap;gap:8px}
.sprung li{min-width:0}
.sprung a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1.5px solid var(--hairline-strong);
  border-radius:var(--rad);background:var(--card-surface);text-decoration:none;font-weight:var(--wght-label);
  font-size:var(--fs-small);line-height:1.3;transition:border-color .2s var(--ease),color .2s var(--ease)}
.sprung a:hover{border-color:var(--accent-fill);color:var(--accent-text)}

/* Symbolfoto im Seitenkopf der Unterseiten: gleiche Ecken wie die uebrigen Bilder */
.phero .symbolfoto img{border-radius:var(--rad-lg);width:100%}

/* Tabelle neben Fliesstext (Stromkreise, RAL-RG 678): nie breiter als die Spalte */
.split .tabelle{max-width:100%}

/* ---- Tap-Ziele (Mobil-Messung 24.09.2026): Telefon, Mail und WhatsApp auf der
   Kontaktseite waren Textlinks unter 24 px Hoehe. Kontaktwege sind DIE
   Klickpunkte der Seite — sie bekommen volle 44 px. ---- */
.cinfo-item a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom a,.foot-nap a{display:inline-flex;align-items:center;min-height:32px}

/* =====================================================================
   Karriere-Paket (Stellenseiten, karriere.php, praktikum.php,
   bewerbung.php) — Ergaenzungen zu style.css, 24.09.2026.
   Mobil zuerst, nur Tokens aus tokens.css, keine festen Farben.
   ===================================================================== */

/* Stapel-Abstand fuer frei zusammengesetzte Bloecke (Text + Liste +
   Kanaele usw.), damit nicht jede Kombination eine eigene Regel braucht. */
.fluss>*+*{margin-top:clamp(14px,2.2vw,22px)}

/* Karten mit eigener Ueberschrift + Haekchenliste (Aufgaben / Profil /
   Angebot, Praktikum). Eine h2 in einer Drittel-Karte waere mit --fs-h2
   (bis 3,35rem) zu gross; Kartenmass statt Abschnittsmass. */
.stelle-karten .card>h2{font-size:clamp(1.45rem,1.3rem + .6vw,1.85rem);margin-bottom:16px}
.stelle-karten .card>h3{margin-bottom:14px}

/* Wischleiste: der Hinweis ist nur sinnvoll, solange gewischt wird
   (.jobcards--wisch greift unter 720 px). */
@media (min-width:720px){.wisch-hinweis{display:none}}

/* Ablauf in einer schmalen Spalte (Bewerben-Block neben dem Formular):
   senkrecht mit Nummer links statt drei gequetschter Spalten. */
@media (min-width:720px){
  .steps--senkrecht{grid-template-columns:1fr;gap:12px}
  .steps--senkrecht .step{padding-left:56px;padding-top:0}
}

/* Link unter einer Stufe der Sicherungsleiste: eigenes Tap-Ziel (44 px) */
.stufe-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;text-decoration:none;
  font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.stufe-link .ico{width:18px;height:18px}

/* Tabelle Ausbildungsverguetung: Zahlenspalten auch im Kopf rechtsbuendig */
.tabelle th.zahl{text-align:right}

/* Karriere-Teaser: kleine Stellenkarten ohne Satz (Stellenseite unten) */
.jobcards--klein .jobcard h3{font-size:clamp(1.25rem,1.15rem + .4vw,1.45rem)}
@media (min-width:1000px){.jobcards--klein{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Stimmen aus dem Team: Foto-Platzhalter oben in der Zitatkarte */
.quote .ph-foto{margin-bottom:4px}

/* ---- Nachtraege Web-Review (25.09.2026) ---- */
/* Stellen-Hinweis im ersten Bildschirm der Startseite: Bewerber sind Ziel Nr. 1,
   vorher kamen die Jobs mobil erst nach 1,4 Bildschirmen. */
.stellen-pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:18px;padding:6px 14px 6px 6px;
  border-radius:999px;background:var(--body-text);color:var(--page-bg);text-decoration:none;
  font-size:var(--fs-small);font-weight:var(--wght-label);line-height:1.3;max-width:100%}
.stellen-pill .sp-zahl{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--signal-fill);color:var(--on-signal-fill);font-family:var(--disp);font-weight:800;font-size:1.05rem}
.stellen-pill .ico{flex:none;width:18px;height:18px;color:var(--signal-fill)}
.stellen-pill:hover{background:color-mix(in oklch,var(--body-text) 88%,var(--accent-fill))}
/* Desktop-Untermenue per Escape schliessen (WCAG 1.4.13): app.js setzt .zu */
@media (min-width:1000px){
  .nav-links>li.zu>.nav-sub{opacity:0;visibility:hidden}
}