/* Schriften selbst gehostet (SIL OFL 1.1), keine Anfrage an Dritte. */
@font-face { font-family: "Instrument Sans"; src: url("schrift/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("schrift/InstrumentSans-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schrift/ibmplexmono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schrift/ibmplexmono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schrift/ibmplexmono-latin-ext-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* Farbrollen CI Petrol, aus dela-akademie-brandkits/assets/palettes.css (Kit petrol). */
/* --- Nachtblau und Petrol ----------------------------------------- */
:root {
  --bg: #F7F8FA;
  --bg-alt: #EAEDF2;
  --surface: #FFFFFF;
  --border: #CBD2DC;
  --text: #101722;
  --text-muted: #4A5566;
  --inverse: #0F1E33;
  --on-inverse: #EAF0F8;
  --on-inverse-muted: #8FA3BF;
  --accent: #0A5C57;
  --accent-hover: #084C48;
  --on-accent: #FFFFFF;
  --accent-soft: #DDEEEC;
  --accent-text: #0A5C57;
  --underline: #1FB5A8;
  --status: #9A5B00;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1017;
    --bg-alt: #101822;
    --surface: #141F2B;
    --border: #263444;
    --text: #E8ECF3;
    --text-muted: #9AA8BA;
    --inverse: #E8ECF3;
    --on-inverse: #0A1017;
    --on-inverse-muted: #3D4C5D;
    --accent: #1FB5A8;
    --accent-hover: #4CC9BE;
    --on-accent: #0F1E33;
    --accent-soft: #0F2E30;
    --accent-text: #1FB5A8;
    --underline: #1FB5A8;
    --status: #F2B24C;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A1017;
  --bg-alt: #101822;
  --surface: #141F2B;
  --border: #263444;
  --text: #E8ECF3;
  --text-muted: #9AA8BA;
  --inverse: #E8ECF3;
  --on-inverse: #0A1017;
  --on-inverse-muted: #3D4C5D;
  --accent: #1FB5A8;
  --accent-hover: #4CC9BE;
  --on-accent: #0F1E33;
  --accent-soft: #0F2E30;
  --accent-text: #1FB5A8;
  --underline: #1FB5A8;
  --status: #F2B24C;
  color-scheme: dark;
}


/* Schrift und Form CI Petrol, aus kits.css (Kit petrol). */
:root {
  --font-display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display-weight: 700;
  --display-stretch: 100%;
  --display-transform: none;
  --display-tracking: -0.028em;
  --body-size: 1.0625rem;
  --body-leading: 1.6;
  --r: 3px; --r-sm: 3px; --r-pill: 3px;
}

/* ==========================================================================
   DELA Akademie - Basisschicht, fuer alle fuenf Entwuerfe gleich
   Farben kommen ausschliesslich aus palettes.css. Hier stehen keine Farbwerte.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:where(a, button, select, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { width: min(100% - 2.5rem, var(--maxw, 1240px)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: min(100% - 2rem, var(--maxw, 1240px)); } }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.25rem; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.sprungmarke:focus { top: 1rem; }

@media print { .sprungmarke { display: none; } }

/* --- Wortmarke ------------------------------------------------------------
   Die Wortmarke der DELA Akademie als eingebundenes SVG. Sie uebernimmt ueber
   currentColor die Textfarbe der jeweiligen Farbwelt und funktioniert damit
   in allen zehn Kits, hell wie dunkel. Der Zusatz "Akademie" steht daneben
   in der Schrift des Kits.
   Quelle: dela-brand-design/logo/wortmarke-violett-kurz.svg, Farbe ersetzt. */
.marke {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--text); flex: none;
}
.marke__logo {
  height: 22px; width: auto; aspect-ratio: 90 / 24;
  color: var(--text); fill: currentColor; display: block;
}
.marke__zusatz {
  font-family: var(--font-body);
  font-size: .9375rem; font-weight: 500; color: var(--text-muted);
  letter-spacing: .01em; white-space: nowrap;
  padding-inline-start: .6rem; border-inline-start: 1px solid var(--border);
}
.marke:hover .marke__logo { color: var(--accent-text); }
@media (max-width: 560px) { .marke__zusatz { display: none; } }

/* ==========================================================================
   Entwurf 11 - CI Guide v0.2 fuer einen Bildungstraeger mit Schwerpunkt
   Arbeitssicherheit. Raster aus zwoelf Spalten, Haarlinien statt Schatten,
   eine Unterstreichung je Flaeche, ein Navy-Band, eine Petrol-Flaeche.
   Keine Einblendeffekte: Bewegung nur als Antwort auf eine Handlung.
   Layout unabhaengig vom Brandkit. Schrift, Farbe und Radius kommen
   aus kits.css und palettes.css und sind ueber das Menue wechselbar.
   Die Rollen underline und status liest das Layout mit Rueckfall.
   ========================================================================== */
:root {
  --maxw: 1312px;
  --spalt: 24px;
  --takt: clamp(3.5rem, 7vw, 6rem);
  --linie: 1px solid var(--border);
  --strich: var(--underline, var(--accent));
  --hinweis: var(--status, var(--accent));
}

/* --- Bausteine ------------------------------------------------------------ */
.strich {
  background-image: linear-gradient(var(--strich), var(--strich));
  background-repeat: no-repeat; background-size: 100% .14em; background-position: 0 94%;
}

.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.25rem; border-radius: var(--r); border: 1px solid transparent;
  font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.knopf--voll { background: var(--accent); color: var(--on-accent); }
.knopf--voll:hover { background: var(--accent-hover); }
.knopf--linie { color: var(--text); border-color: var(--border); }
.knopf--linie:hover { border-color: var(--accent); color: var(--accent-text); }
.knopf--klein { padding: .5rem .9rem; font-size: .875rem; }

.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spalt); }
@media (max-width: 900px) { .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }

figure { margin: 0; }
.nachweis { font-size: .75rem; color: var(--text-muted); margin-top: .4rem; line-height: 1.4; }
.nachweis a { color: inherit; }

.abschnitt { padding-block: var(--takt); }
.abschnitt--alt { background: var(--bg-alt); }
.abschnitt__kopf { display: grid; gap: .7rem; margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.abschnitt__kopf h2 {
  font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: var(--display-weight);
  line-height: 1.1; text-transform: var(--display-transform);
}
.abschnitt__kopf p { font-size: 1.125rem; color: var(--text-muted); max-width: 60ch; }

/* --- Kopf ----------------------------------------------------------------- */
.kopf { border-bottom: var(--linie); background: var(--bg); position: sticky; top: 0; z-index: 40; }
.kopf__reihe { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.hauptnav { margin-inline-start: auto; }
.hauptnav ul { display: flex; gap: 1.6rem; }
.hauptnav a { font-size: .9375rem; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.hauptnav a:hover { color: var(--accent-text); }
@media (max-width: 900px) { .hauptnav { display: none; } .kopf .knopf { margin-inline-start: auto; } }

/* --- Kopfbereich: Claim links, Bild rechts -------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 6rem); }
.hero .raster { align-items: center; }
.hero__text { grid-column: 1 / span 6; display: grid; gap: 1.5rem; align-content: start; }
.hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 5rem); font-weight: var(--display-weight);
  line-height: 1.04; text-transform: var(--display-transform); max-width: 12ch;
}
.hero__sub { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-muted); max-width: 44ch; }
.hero__aktionen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; }
.hero__bild { grid-column: 7 / span 6; }
.hero__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 900px) { .hero__text, .hero__bild { grid-column: 1 / -1; } }

/* --- Wegweiser: zwei Wege in die Weiterbildung ---------------------------- */
.wegweiser { border-block: var(--linie); }
.weg {
  grid-column: span 6; display: grid; gap: .6rem; align-content: start;
  padding-block: 2rem 2.2rem; text-decoration: none; color: var(--text);
}
.weg + .weg { border-inline-start: var(--linie); padding-inline-start: var(--spalt); }
.weg h2 { font-size: 1.5rem; font-weight: var(--display-weight); line-height: 1.2; }
.weg p { color: var(--text-muted); max-width: 52ch; }
.weg__link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; margin-top: .3rem; }
.weg:hover .weg__link { text-decoration-thickness: 2px; }
.weg:hover h2 { color: var(--accent-text); }
@media (max-width: 900px) {
  .weg { grid-column: 1 / -1; }
  .weg + .weg { border-inline-start: 0; border-top: var(--linie); padding-inline-start: 0; }
}

/* --- Kurse als Register: Bild links, Angaben rechts ----------------------- */
.kurs {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spalt);
  padding-block: 2rem; border-top: var(--linie);
}
.kurs:last-child { border-bottom: var(--linie); }
.kurs__bild { grid-column: 1 / span 4; }
.kurs__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.kurs__text { grid-column: 6 / span 7; display: grid; gap: .7rem; align-content: start; }
.kurs__feld { font-size: .875rem; font-weight: 500; color: var(--accent-text); }
.kurs h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: var(--display-weight); line-height: 1.2; }
.kurs__text > p:not(.kurs__feld) { color: var(--text-muted); max-width: 64ch; }
.kurs__fakten { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: .5rem 0 0; }
.kurs__fakten div { display: grid; gap: .2rem; }
.kurs__fakten dt { font-size: .8125rem; color: var(--text-muted); }
.kurs__fakten dd { margin: 0; font-family: var(--font-mono); font-size: .9375rem; }
.status {
  display: inline-block; font-family: var(--font-mono); font-size: .8125rem;
  padding: .15rem .5rem; border: 1px solid var(--border); border-radius: var(--r); color: var(--text-muted);
}
@media (max-width: 900px) {
  .kurs { grid-template-columns: 1fr; gap: 1.1rem; }
  .kurs__bild, .kurs__text { grid-column: 1 / -1; }
}

/* --- Ablauf: echte Reihenfolge, daher nummeriert --------------------------- */
.ablauf__kopf { grid-column: 1 / span 5; align-self: start; }
.ablauf__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.ablauf { grid-column: 7 / span 6; counter-reset: schritt; border-top: var(--linie); }
.ablauf li { counter-increment: schritt; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding-block: 1.25rem; border-bottom: var(--linie); }
.ablauf li::before {
  content: counter(schritt); grid-row: span 2;
  font-family: var(--font-mono); font-size: 1.5rem; line-height: 1.2; color: var(--accent-text);
}
.ablauf h3 { font-size: 1.1875rem; font-weight: var(--display-weight); }
.ablauf p { color: var(--text-muted); margin-top: .25rem; }
@media (max-width: 900px) { .ablauf__kopf, .ablauf { grid-column: 1 / -1; } }

/* --- Foerderung ----------------------------------------------------------- */
.foerderweg { grid-column: span 6; display: grid; gap: .5rem; align-content: start; border-top: 2px solid var(--text); padding-top: 1.1rem; }
.foerderweg h3 { font-size: 1.375rem; font-weight: var(--display-weight); }
.foerderweg__norm { font-family: var(--font-mono); font-size: .875rem; color: var(--text-muted); }
.foerderweg p:last-child { color: var(--text-muted); max-width: 62ch; }
@media (max-width: 900px) { .foerderweg { grid-column: 1 / -1; } }

.hinweis {
  border-inline-start: 2px solid var(--hinweis); background: var(--bg-alt);
  padding: .9rem 1.2rem; color: var(--text-muted); font-size: .9375rem; margin-top: clamp(2rem, 4vw, 3rem); max-width: 80ch;
}

/* --- Fuer Unternehmen ----------------------------------------------------- */
.zelle { grid-column: span 4; display: grid; gap: .5rem; align-content: start; border-top: var(--linie); padding-top: 1rem; }
.zelle h3 { font-size: 1.25rem; font-weight: var(--display-weight); }
.zelle p { color: var(--text-muted); }
.zelle__frage { color: var(--text) !important; font-weight: 500; }
@media (max-width: 900px) { .zelle { grid-column: 1 / -1; } }

.band { background: var(--inverse); color: var(--on-inverse); padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r); margin-top: clamp(2.5rem, 5vw, 3.5rem); display: grid; gap: .6rem; }
.band h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); font-weight: var(--display-weight); line-height: 1.15; }
.band p { color: var(--on-inverse-muted); max-width: 70ch; }

/* --- Haeufige Fragen ------------------------------------------------------ */
.fragen__kopf { grid-column: 1 / span 4; }
.fragen { grid-column: 6 / span 7; border-top: var(--linie); }
.fragen details { border-bottom: var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-size: 1.125rem; font-weight: 600;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: .7rem; height: .7rem;
  border-right: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen summary:hover { color: var(--accent-text); }
.fragen details p { color: var(--text-muted); padding-bottom: 1.2rem; max-width: 62ch; }
@media (max-width: 900px) { .fragen__kopf, .fragen { grid-column: 1 / -1; } }

/* --- Petrol-Flaeche fuer die Kontaktaufnahme ------------------------------ */
.flaeche {
  background: var(--accent); color: var(--on-accent); border-radius: var(--r);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--spalt); align-items: end;
}
.flaeche__text { grid-column: 1 / span 8; display: grid; gap: 1rem; }
.flaeche h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: var(--display-weight); line-height: 1.1; text-transform: var(--display-transform); }
.flaeche p { max-width: 50ch; font-size: 1.0625rem; }
.flaeche .strich { --strich: var(--on-accent); }
.flaeche__aktion { grid-column: 9 / span 4; justify-self: end; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }
.knopf--umkehr { background: var(--on-accent); color: var(--accent); }
.knopf--umkehr:hover { background: var(--bg); color: var(--accent-text); }
.knopf--umkehr-linie { color: var(--on-accent); border-color: currentColor; font-family: var(--font-mono); font-weight: 400; }
.knopf--umkehr-linie:hover { background: color-mix(in srgb, var(--on-accent) 12%, transparent); }
@media (max-width: 900px) { .flaeche { grid-template-columns: 1fr; } .flaeche__text, .flaeche__aktion { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; } }

/* --- Fuss ----------------------------------------------------------------- */
.fuss { border-top: var(--linie); padding-block: 3rem 2rem; font-size: .9375rem; color: var(--text-muted); }
.fuss__raster { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--spalt); }
.fuss h3 { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: .8rem; }
.fuss li + li { margin-top: .4rem; }
.fuss a { color: var(--text-muted); text-decoration: none; }
.fuss a:hover { color: var(--accent-text); text-decoration: underline; }
.fuss__marke p { margin-top: 1rem; max-width: 44ch; }
.fuss__zertifikat { font-size: .875rem; }
.fuss__unten {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 2.5rem; padding-top: 1rem; border-top: var(--linie); font-size: .875rem;
}
@media (max-width: 900px) { .fuss__raster { grid-template-columns: 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; } }
@media (max-width: 720px) { .fuss { padding-bottom: 6rem; } }

/* --- Rechtstexte ---------------------------------------------------------- */
.rechtstext { max-width: 46rem; }
.rechtstext h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: var(--display-weight); line-height: 1.08; margin-bottom: 2rem; }
.rechtstext h2 { font-size: 1.375rem; font-weight: var(--display-weight); margin: 2.4rem 0 .7rem; padding-top: 1rem; border-top: var(--linie); }
.rechtstext h3 { font-size: 1.125rem; font-weight: 600; margin: 1.6rem 0 .5rem; }
.rechtstext p, .rechtstext li { color: var(--text-muted); max-width: 70ch; }
.rechtstext p + p { margin-top: .8rem; }
.rechtstext strong { color: var(--text); }
.rechtstext ul { list-style: disc; padding-inline-start: 1.25rem; display: grid; gap: .4rem; margin-top: .6rem; }
.rechtstext ul.formular { list-style: none; padding: 0; gap: 1rem; margin-block: 1rem; }
.rechtstext a { color: var(--accent-text); }

/* ==========================================================================
   Ergaenzungen fuer die Webseite gegenueber Entwurf 11.
   Logo: der Master aus dem Illustrator-Original (nie nachgesetzt), Nachtblau
   auf Papier, Weiss im Dunkeln. Kein Logo in Akzentfarbe, auch nicht beim
   Ueberfahren. Mindestbreite laut CI: 180 px mit Descriptor, 120 px ohne.
   ========================================================================== */
.marke { gap: 0; }
.marke img { display: block; width: auto; }
.marke__master img { height: 34px; }   /* rund 184 px breit */
.marke__wort { display: none; }
.marke__wort img { height: 32px; }     /* rund 120 px breit */
@media (max-width: 560px) {
  .kopf .marke__master { display: none; }
  .kopf .marke__wort { display: block; }
}
.fuss .marke__master img { height: 34px; }

/* Telefonnummer neben dem E-Mail-Knopf: Ziffern in Plex Mono */
.knopf--umkehr-linie { letter-spacing: .01em; }

/* Bildnachweis als Liste */
.nachweisliste { display: grid; gap: 1.25rem; margin-top: 1rem; }
.nachweisliste li { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: start; }
.nachweisliste img { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
@media (max-width: 560px) { .nachweisliste li { grid-template-columns: 1fr; } }

/* Wartungsseite */
.wartung { min-height: 60vh; display: flex; align-items: center; }
.wartung .hero__text { max-width: 44rem; }
.wartung .hero__sub p + p { margin-top: .8rem; }

/* Weichere Raender (Wunsch 14.10.2026). Das CI Board sieht 3 px vor; fuer
   Fotos und grosse Flaechen gilt hier ein eigener, groesserer Radius, damit
   Bilder, Navy-Band und Petrol-Flaeche zusammenpassen. Knoepfe, Felder und
   Statusmarken behalten 3 px. Eine feine Innenlinie haelt helle Fotos vom
   hellen Grund ab, ohne Schatten. */
:root { --r-weich: 14px; }
.hero__bild img, .kurs__bild img, .ablauf__bild img, .nachweisliste img {
  border-radius: var(--r-weich);
  outline: 1px solid rgb(15 30 51 / .08); outline-offset: -1px;
}
.band, .flaeche { border-radius: var(--r-weich); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero__bild img, :root:not([data-theme="light"]) .kurs__bild img,
  :root:not([data-theme="light"]) .ablauf__bild img, :root:not([data-theme="light"]) .nachweisliste img {
    outline-color: rgb(232 236 243 / .10);
  }
}
.nachweis { padding-inline: 2px; }

/* ==========================================================================
   Formsystem fuer Bilder (Wunsch 14.10.2026: moderner, weniger plakativ).
   Ein Bild ist immer ein Ausschnitt in einer ruhigen geometrischen Form:
     form-ecke   Einstieg: quadratisch, grosse Viertelkreis-Ecke unten links,
                 dahinter versetzt eine Flaeche in Tiefem Petrol, oben rechts
                 ein Ring in hellem Petrol
     form-oben, form-unten, form-bogen
                 Kurse und Ablauf: dieselbe Form wie der Einstieg, kleiner,
                 grosse Rundung unten links (seit 14.10.2026 einheitlich)
   Welcher Teil des Fotos sichtbar ist, steht je Bild in bilder.yml
   (ausschnitt) und landet als .bild-<name> { object-position } im Stylesheet.
   Farben nur aus den Rollen; keine Schatten.
   ========================================================================== */
:root { --form-gross: clamp(72px, 10vw, 168px); --form-mittel: clamp(48px, 6vw, 96px); }

.bildform { display: block; position: relative; isolation: isolate; }
.hero { overflow-x: clip; }
.form-ecke img, .form-oben img, .form-unten img, .form-bogen img {
  width: 100%; object-fit: cover; outline: 0;
}

/* Einstieg: die Formen haengen am Bild (.bildform), nicht an der Abbildung,
   damit der Bildnachweis frei darunter steht. */
.form-ecke .bildform { padding: 0 0 22px 22px; }
.form-ecke img {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-weich) var(--r-weich) var(--r-weich) var(--form-gross);
}
.form-ecke .bildform::before {
  content: ""; position: absolute; z-index: -1; left: 0; bottom: 0;
  width: 62%; height: 58%;
  background: var(--accent);
  border-radius: var(--r-weich) var(--r-weich) var(--r-weich) var(--form-gross);
}
.form-ecke .bildform::after {
  content: ""; position: absolute; z-index: 1; top: -22px; right: -14px;
  width: clamp(64px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--underline, var(--accent));
  pointer-events: none;
}
.form-ecke .nachweis { padding-left: 22px; }
@media (max-width: 900px) { .form-ecke .bildform::after { top: -14px; right: -6px; } }

/* Kurse und Ablauf: dieselbe Form wie der Einstieg, nur kleiner und ohne
   Flaeche und Ring - eine einzige grosse Rundung unten links (Wunsch
   14.10.2026: keine wechselnden Ecken, kein Bogen). */
.form-oben img, .form-unten img, .form-bogen img {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-weich) var(--r-weich) var(--r-weich) var(--form-mittel);
}

/* Die Bildnachweise stehen weiter unter dem Bild, klein und ruhig. */
.form-oben .nachweis, .form-unten .nachweis, .form-bogen .nachweis { margin-top: .5rem; }

/* Weniger Bewegung, keine Wirkung: Formen sind statisch. */

/* Hell/Dunkel-Umschalter in der Kopfzeile, ohne Skript.
   Der Haken kehrt die Einstellung des Systems um: Bei hellem System wird
   die Seite dunkel, bei dunklem hell. Nichts wird gespeichert; beim
   naechsten Seitenaufruf gilt wieder das System. Farbwerte wie 01-farben.css. */
:root:has(#darstellung-wechsel:checked) {
  --bg: #0A1017;
  --bg-alt: #101822;
  --surface: #141F2B;
  --border: #263444;
  --text: #E8ECF3;
  --text-muted: #9AA8BA;
  --inverse: #E8ECF3;
  --on-inverse: #0A1017;
  --on-inverse-muted: #3D4C5D;
  --accent: #1FB5A8;
  --accent-hover: #4CC9BE;
  --on-accent: #0F1E33;
  --accent-soft: #0F2E30;
  --accent-text: #1FB5A8;
  --underline: #1FB5A8;
  --status: #F2B24C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:has(#darstellung-wechsel:checked) {
    --bg: #F7F8FA;
    --bg-alt: #EAEDF2;
    --surface: #FFFFFF;
    --border: #CBD2DC;
    --text: #101722;
    --text-muted: #4A5566;
    --inverse: #0F1E33;
    --on-inverse: #EAF0F8;
    --on-inverse-muted: #8FA3BF;
    --accent: #0A5C57;
    --accent-hover: #084C48;
    --on-accent: #FFFFFF;
    --accent-soft: #DDEEEC;
    --accent-text: #0A5C57;
    --underline: #1FB5A8;
    --status: #9A5B00;
    color-scheme: light;
  }
}

.darstellung {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none; cursor: pointer;
  color: var(--text-muted); border: var(--linie); border-radius: var(--r);
}
.darstellung:hover { color: var(--accent-text); border-color: var(--accent); }
.darstellung__schalter { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.darstellung:has(.darstellung__schalter:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.darstellung svg { grid-area: 1 / 1; pointer-events: none; }

/* Logo: Nachtblau im Hellen, Weiss im Dunkeln. */
:root .logo-dunkel { display: none; }
:root:has(#darstellung-wechsel:checked) .logo-hell { display: none; }
:root:has(#darstellung-wechsel:checked) .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root .logo-hell { display: none; }
  :root .logo-dunkel { display: block; }
  :root:has(#darstellung-wechsel:checked) .logo-hell { display: block; }
  :root:has(#darstellung-wechsel:checked) .logo-dunkel { display: none; }
}

/* Gezeigt wird, wohin der Klick fuehrt: im Hellen der Mond, im Dunkeln die Sonne. */
.darstellung__sonne { display: none; }
:root:has(#darstellung-wechsel:checked) .darstellung__mond { display: none; }
:root:has(#darstellung-wechsel:checked) .darstellung__sonne { display: block; }
@media (prefers-color-scheme: dark) {
  .darstellung__mond { display: none; }
  .darstellung__sonne { display: block; }
  :root:has(#darstellung-wechsel:checked) .darstellung__mond { display: block; }
  :root:has(#darstellung-wechsel:checked) .darstellung__sonne { display: none; }
}

/* Bildrahmen im Dunkeln wie in 05-ergaenzungen.css */
:root:has(#darstellung-wechsel:checked) :is(.hero__bild, .kurs__bild, .ablauf__bild, .nachweisliste) img { outline-color: rgb(232 236 243 / .10); }
@media (prefers-color-scheme: dark) {
  :root:has(#darstellung-wechsel:checked) :is(.hero__bild, .kurs__bild, .ablauf__bild, .nachweisliste) img { outline-color: rgb(15 30 51 / .08); }
}

/* Mobil ist die Navigation ausgeblendet: Der Umschalter rueckt nach rechts. */
@media (max-width: 900px) {
  .kopf .darstellung { margin-inline-start: auto; }
  .kopf .darstellung ~ .knopf { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .kopf__reihe { gap: .6rem; }
  .darstellung { width: 36px; height: 36px; }
}
@media print { .darstellung { display: none; } }

/* Sprachwahl in der Kopfzeile (seit 15.10.2026), ohne Skript: <details>.
   Dazu die Schrift fuer Ukrainisch: Instrument Sans hat keine kyrillischen
   Zeichen, gemischte Schriften im Wort saehen unruhig aus. */
.sprachwahl { position: relative; flex: none; }
.sprachwahl summary {
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
  height: 40px; padding: 0 .6rem; cursor: pointer; color: var(--text-muted);
  border: var(--linie); border-radius: var(--r); font-size: .8125rem; font-weight: 600;
}
.sprachwahl summary::-webkit-details-marker { display: none; }
.sprachwahl summary:hover, .sprachwahl[open] summary { color: var(--accent-text); border-color: var(--accent); }
.sprachwahl summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sprachwahl ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 11rem; margin: 0; padding: .35rem; list-style: none;
  background: var(--surface); border: var(--linie); border-radius: var(--r);
  box-shadow: 0 8px 24px rgb(15 30 51 / .12);
}
.sprachwahl a {
  display: block; padding: .5rem .7rem; border-radius: var(--r);
  color: var(--text); text-decoration: none; font-size: .9375rem;
}
.sprachwahl a:hover { background: var(--accent-soft); color: var(--accent-text); }
.sprachwahl a[aria-current] { font-weight: 600; color: var(--accent-text); }
.fuss__hinweis { font-size: .8125rem; color: var(--text-muted); margin: .2rem 0 .4rem; }

/* Kyrillisch, Arabisch, Griechisch, Vietnamesisch: Instrument Sans hat
   diese Zeichen nicht (vollstaendig). Die Wartungsseite setzt lang je Abschnitt. */
:root:is(:lang(uk), :lang(ru), :lang(bg), :lang(ar), :lang(fa), :lang(el), :lang(vi)) {
  --font-display: "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
  --font-body: "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
}

@media (max-width: 900px) {
  .kopf .sprachwahl { margin-inline-start: auto; }
  .kopf .sprachwahl ~ .darstellung { margin-inline-start: 0; }
}
@media (max-width: 640px) {
  .sprachwahl summary { height: 36px; padding: 0 .45rem; }
  .sprachwahl__kurz { display: none; }
}
/* Schmale Bildschirme: Logo nie quetschen. Der Knopf "Beratung anfragen"
   steht gleich darunter im ersten Bildschirm noch einmal, in der Kopfzeile
   faellt er weg, sobald die Sprachwahl Platz braucht. */
.kopf .marke { flex: none; }
@media (max-width: 480px) { .kopf .sprachwahl ~ .knopf { display: none; } }
@media print { .sprachwahl { display: none; } }
.wartung-sprache:is(:lang(uk), :lang(ru), :lang(bg), :lang(ar), :lang(fa), :lang(el), :lang(vi)) {
  --font-display: "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
  --font-body: "Helvetica Neue", Arial, "Segoe UI", Roboto, sans-serif;
  font-family: var(--font-body);
}
.wartung-sprache:is(:lang(uk), :lang(ru), :lang(bg), :lang(ar), :lang(fa), :lang(el), :lang(vi)) h1 {
  font-family: var(--font-display);
}

/* Wartungsseite (seit 15.10.2026): alle Sprachen auf einer Seite, weil Caddy
   im Wartungsmodus jede Adresse auf sie umleitet. Gezeigt wird die Sprache,
   deren Anker in der Adresse steht (#sprache-en), sonst Deutsch. */
.wartung-sprache { display: none; scroll-margin-top: 80px; }
.wartung-sprache:target { display: flex; }
.wartung-sprachen:not(:has(.wartung-sprache:target)) .wartung-sprache:first-child { display: flex; }
.kopf__abstand { margin-inline-start: auto; }
.wartung-impressum { padding-top: 0; }
/* Mobil schiebt 08-sprachen.css die Sprachwahl mit margin auto nach rechts;
   hier uebernimmt das der Abstandhalter. */
.kopf .kopf__abstand ~ * { margin-inline-start: 0; }
/* Impressum eingeklappt, oeffnet auf Klick (seit 20.10.2026) */
.wartung-impressum summary {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--accent-text); text-decoration: underline;
  text-underline-offset: 3px;
}
.wartung-impressum summary::-webkit-details-marker { display: none; }
.wartung-impressum summary::after { content: "▾"; text-decoration: none; font-size: .9em; }
.wartung-impressum details[open] summary::after { content: "▴"; }
.wartung-impressum details[open] summary { margin-bottom: 1rem; }

/* Einstieg ohne Foto (seit 15.10.2026): die Fachgebiete als Kacheln im
   selben Rahmen wie das Einstiegsbild (form-ecke: Viertelkreis unten links,
   Petrol-Flaeche dahinter, Ring oben rechts). Farben nur aus den Rollen,
   dadurch stimmig in hell und dunkel. Icons: Lucide aus dem CI-Paket. */
.hero-kacheln {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: clamp(6px, 0.8vw, 12px); aspect-ratio: 1 / 1;
  padding: clamp(10px, 1.4vw, 18px);
  background: var(--bg-alt);
  border-radius: var(--r-weich) var(--r-weich) var(--r-weich) var(--form-gross);
}
.hero-kachel {
  display: flex; flex-direction: column; justify-content: space-between; gap: .5rem;
  padding: clamp(10px, 1.2vw, 16px); min-width: 0;
  background: var(--surface); color: var(--text);
  border: var(--linie); border-radius: var(--r-weich);
  font-size: clamp(.78rem, 1.05vw, .95rem); font-weight: 600; line-height: 1.25;
  hyphens: auto; overflow-wrap: anywhere;
}
.hero-kachel svg { width: clamp(22px, 2.4vw, 32px); height: auto; color: var(--accent-text); flex: none; }
/* Akzente: Hochvolt in Petrol, "online" und "AZAV" in Nachtblau/Inverse */
.hero-kachel:nth-child(1), .hero-kachel:nth-child(7) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.hero-kachel:nth-child(1) svg, .hero-kachel:nth-child(7) svg { color: var(--on-accent); }
.hero-kachel:nth-child(5) { background: var(--accent-soft); border-color: transparent; }
/* Kachel 9: reine Form - Viertelkreis in Petrol, schliesst unten rechts ab */
.hero-kachel--form {
  background: var(--bg-alt); border: 0; padding: 0; position: relative; overflow: hidden;
}
.hero-kachel--form::before {
  content: ""; position: absolute; inset: 0;
  background: var(--accent); opacity: .9;
  border-radius: 100% 0 0 0;
}
/* Die Kachel unten links folgt der grossen Rundung des Rahmens */
.hero-kachel:nth-child(7) {
  border-bottom-left-radius: calc(var(--form-gross) * .6);
  padding-left: calc(var(--form-gross) * .22 + 10px);
}
@media (max-width: 640px) { .hero-kachel { font-size: .8rem; padding: 10px; } }

/* Einstieg ohne Foto, zwei ruhige Varianten (seit 15.10.2026):
   hero--text   nur Claim, Text und Knoepfe, ohne Zierformen
   hero-formen  rechts eine Komposition aus CI-Formen, ohne Icons
   Farben nur aus den Rollen, dadurch stimmig in hell und dunkel. */
.hero--text .raster { position: relative; }
.hero--text .hero__text { grid-column: 1 / span 9; }
.hero--text h1 { max-width: 14ch; }


.hero-formen { position: relative; aspect-ratio: 1 / 1; margin: 0; }
.hero-formen span { position: absolute; display: block; }
.hero-formen .f-flaeche {
  inset: 8% 0 0 12%; background: var(--bg-alt);
  border-radius: var(--r-weich) var(--r-weich) var(--r-weich) var(--form-gross);
}
.hero-formen .f-viertel {
  left: 0; bottom: 0; width: 58%; aspect-ratio: 1; background: var(--accent);
  border-radius: 0 100% 0 0;
}
.hero-formen .f-ring {
  top: 0; right: 4%; width: 42%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--underline, var(--accent));
}
.hero-formen .f-punkt {
  right: 18%; bottom: 16%; width: 16%; aspect-ratio: 1; border-radius: 50%;
  background: var(--inverse);
}
@media (max-width: 900px) { .hero-formen { max-width: 420px; justify-self: center; width: 100%; } }

/* --- Merkmale im Einstieg, Kurs-Verweis, Kontaktformular (30.10.2026) ------
   Ohne Skript: Rueckmeldung nach dem Senden ueber :target (#anfrage-danke,
   #anfrage-fehler). Haarlinien, Radius aus dem CI, logische Eigenschaften
   fuer die rechts-nach-links-Sprachen. */
.hero__merkmale {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .75rem;
}
.hero__merkmale li {
  font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted);
  padding: .3rem .65rem; border: var(--linie); border-radius: var(--r);
}

.kurs__aktion {
  display: inline-block; justify-self: start; inline-size: fit-content; margin-block-start: 1.25rem;
  font-weight: 600; color: var(--accent-text); text-decoration: none;
  border-block-end: 1px solid currentColor;
}
.kurs__aktion::after { content: " \2192"; }
[dir="rtl"] .kurs__aktion::after { content: " \2190"; }
.kurs__aktion:hover { color: var(--accent-hover); }

.anfrage {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem var(--spalt);
  margin-block-start: var(--spalt); padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--surface); border: var(--linie); border-radius: var(--r-weich);
}
.anfrage__titel { grid-column: 1 / -1; font-size: 1.375rem; }
.anfrage__feld { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.anfrage__feld--breit, .anfrage__hinweis, .anfrage .knopf { grid-column: 1 / -1; }
.anfrage label, .anfrage legend { font-size: .875rem; font-weight: 600; padding: 0; }
.anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"],
.anfrage select, .anfrage textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  background: var(--bg); border: var(--linie); border-radius: var(--r);
  padding: .75rem .85rem; min-height: 3rem;
}
.anfrage textarea { resize: vertical; min-height: 8rem; }
.anfrage input:focus-visible, .anfrage select:focus-visible, .anfrage textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.anfrage__wahl { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; align-items: center; }
.anfrage__wahl legend { inline-size: 100%; margin-block-end: .4rem; }
.anfrage__wahl label { display: inline-flex; gap: .5rem; align-items: center; font-weight: 400; font-size: 1rem; }
.anfrage__wahl input { accent-color: var(--accent); inline-size: 1.15rem; block-size: 1.15rem; }
.anfrage__hinweis { margin: 0; font-size: .875rem; color: var(--text-muted); max-width: 70ch; }
.anfrage__hinweis a { color: var(--accent-text); }
.anfrage .knopf { justify-self: start; cursor: pointer; font: inherit; font-weight: 600; }
.anfrage .knopf[disabled] { opacity: .5; cursor: not-allowed; }
/* Falle fuer Bots: fuer Menschen unsichtbar, auch fuer Screenreader */
.anfrage__falle { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (max-width: 700px) { .anfrage { grid-template-columns: 1fr; } }

.anfrage-meldung {
  display: none; margin-block-start: var(--spalt); padding: 1.25rem 1.5rem;
  border: 1px solid var(--accent); border-inline-start-width: 4px; border-radius: var(--r);
  background: var(--accent-soft); color: var(--text);
}
.anfrage-meldung h3 { font-size: 1.125rem; margin-block-end: .35rem; }
.anfrage-meldung--fehler { border-color: var(--hinweis); background: var(--surface); }
.anfrage-meldung:target { display: block; scroll-margin-block-start: 6rem; }

/* Bildausschnitte aus bilder.yml */
.bild-ki-schulungsraum { object-position: 50% 60%; }
.bild-ki-hero-werkbank-r4 { object-position: 50% 50%; }
.bild-ki-hochvolt-r5 { object-position: 50% 50%; }
.bild-ki-asbest-r5 { object-position: 50% 50%; }
.bild-ki-kontaminiert-r5 { object-position: 50% 50%; }
.bild-ki-immobilien-r5 { object-position: 50% 50%; }