/* Kundenportal – Gestaltung wie imm.one (css/style.css dort): weiß, Helvetica, 12er-Raster, Orange nur beim Drüberfahren.
   Schrift: Helvetica Neue des Systems (die Webschrift von imm.one wird hier nicht eingebunden, Lizenz offen). */

:root {
  --schwarz: #111111;
  --grau: #737373;      /* 4,7:1 auf Weiß */
  --linie: #dedede;
  --hell: #f2f2f2;
  --orange: #ff7d00;
  --rot: #b42318;
  --gruen: #1f7a3d;
  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --rand: 16px;
  --gross: 400 clamp(24px, 2.7vw, 40px)/1.12 var(--schrift);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0; background: #fff; color: var(--schwarz);
  font: 400 13px/1.45 var(--schrift); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
.grau { color: var(--grau); }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.unterstrichen { border-bottom: 1px solid currentColor; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--schwarz); color: #fff; padding: 8px 12px; }
.sprung:focus { top: 12px; color: #fff; }

/* ---------- Raster ---------- */
.raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; padding: 0 var(--rand); }
.s1 { grid-column: 1 / 4; } .s2 { grid-column: 4 / 7; } .s3 { grid-column: 7 / 10; } .s4 { grid-column: 10 / 13; }
.s2-3 { grid-column: 4 / 10; } .s2-4 { grid-column: 4 / 13; } .s3-4 { grid-column: 7 / 13; } .s1-4 { grid-column: 1 / 13; }

/* ---------- Kopf und Fuß ---------- */
.kopf {
  position: sticky; top: 0; z-index: 10; align-items: start; padding-top: 14px; padding-bottom: 14px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie);
}
.kopf-logo img { width: clamp(120px, 10vw, 150px); }
.kopf nav ul { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; }
.kopf nav a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }
.kopf nav button:hover { color: var(--orange); }
.fuss { align-items: start; margin-top: 80px; padding-top: 14px; padding-bottom: 80px; border-top: 1px solid var(--linie); }
.fuss ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* Vorschau in ONE: Band oben */
.vorschau-band { position: sticky; top: 0; z-index: 20; padding: 8px var(--rand); background: var(--schwarz); color: #fff; }
.vorschau-band a { border-bottom: 1px solid currentColor; }
.vorschau-band + .kopf { top: 36px; }

/* ---------- Großer Satz ---------- */
.held { padding-top: clamp(70px, 16vh, 180px); padding-bottom: clamp(40px, 8vh, 90px); }
.held h1 { font: var(--gross); letter-spacing: -.022em; overflow-wrap: anywhere; }
.held h1 span { color: var(--grau); }
.held .unterzeile { grid-column: 4 / 13; margin-top: 18px; color: var(--grau); }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-top: 8px; margin-top: 24px; }
.abschnitt > h2 { font: inherit; color: var(--grau); border-top: 1px solid var(--schwarz); padding-top: 8px; }
.abschnitt > div { border-top: 1px solid var(--schwarz); padding-top: 8px; }
.leer { color: var(--grau); }
.leise { margin-top: 18px; }

/* Jobliste: Nummer, Titel, Monat, Stand */
.jobliste li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 9em 7em; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linie); }
.jobliste li:last-child { border-bottom: 0; }
.jobliste b { font-weight: 400; }

/* ---------- Formulare ---------- */
.formular-bereich { padding-bottom: 40px; }
.formular { display: grid; gap: 18px; max-width: 420px; }
.formular h2 { font: inherit; color: var(--grau); margin-top: 24px; }
.feld { display: grid; gap: 4px; }
.feld span { color: var(--grau); }
.feld input {
  font: 400 18px/1.3 var(--schrift); color: var(--schwarz); padding: 6px 0; border: 0; border-bottom: 1px solid var(--schwarz);
  border-radius: 0; background: transparent; width: 100%;
}
.feld input:focus { outline: none; border-bottom-color: var(--orange); box-shadow: 0 1px 0 var(--orange); }
.knopf { justify-self: start; padding: 10px 18px; background: var(--schwarz); color: #fff; border-radius: 999px; }
.knopf:hover { background: var(--orange); color: #fff; }
.meldung { max-width: 560px; margin-bottom: 18px; padding: 10px 12px; border-left: 2px solid var(--schwarz); background: var(--hell); }
.meldung.fehler { border-left-color: var(--rot); color: var(--rot); }
.meldung.ok { border-left-color: var(--gruen); }
.raster-rand { margin: 0 var(--rand) 24px; }
.angaben { display: grid; grid-template-columns: 6em 1fr; gap: 4px 12px; margin-bottom: 8px; }
.angaben dt { color: var(--grau); }

/* ---------- Statusbericht ---------- */
.bericht { align-items: start; row-gap: 40px; }
.inhalt-liste { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
.inhalt-liste h2 { font: inherit; color: var(--grau); margin-bottom: 8px; }
.inhalt-liste ol { list-style: none; padding: 0; margin: 0 0 24px; }
.inhalt-liste li a { display: grid; grid-template-columns: 2.2em 1fr; padding: 2px 0; }
.inhalt-liste li a span { color: var(--grau); }
.inhalt-liste .klein { display: block; margin-top: 4px; }
.themen { display: grid; gap: 72px; }
.einleitung { font: 400 clamp(18px, 1.7vw, 24px)/1.3 var(--schrift); letter-spacing: -.012em; max-width: 46em; }
.thema { scroll-margin-top: 90px; }
.thema-kopf { display: grid; grid-template-columns: 2.2em 1fr auto; gap: 8px; padding-top: 8px; border-top: 1px solid var(--schwarz); color: var(--grau); }
.thema-kopf .kategorie { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; line-height: 19px; }
.thema h3 { margin-top: 18px; font: 400 clamp(22px, 2.2vw, 32px)/1.15 var(--schrift); letter-spacing: -.018em; }
.thema .untertitel { margin-top: 4px; color: var(--grau); font-size: 16px; }
.thema-text { margin-top: 20px; max-width: 46em; font: 400 16px/1.5 var(--schrift); }
.thema-text p + p, .thema-text p + ul, .thema-text ul + p, .thema-text h4 + p, .thema-text p + h4, .thema-text ul + h4 { margin-top: .8em; }
.thema-text h4 { font: inherit; font-weight: 700; margin-top: 1.4em; }
.thema-text ul { list-style: disc; padding-left: 1.2em; }
.thema-text li + li { margin-top: .3em; }
.thema-links { margin-top: 20px; display: grid; gap: 6px; max-width: 46em; }
.thema-links a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 15px; }
.thema-links a::after { content: "↗"; }
.bilder { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bilder figure { margin: 0; min-width: 0; }
.bilder button { display: block; width: 100%; padding: 0; border: 0; background: var(--hell); cursor: zoom-in; }
.bilder img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .2s; }
.bilder button:hover img { opacity: .85; }
.bilder figcaption { margin-top: 6px; color: var(--grau); }
.ausgaben a[aria-current] { text-decoration: underline; text-underline-offset: 3px; }

/* Großansicht der Bilder */
.grossbild { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; }
.grossbild::backdrop { background: rgba(255, 255, 255, .95); }
.grossbild-kopf { display: flex; gap: 14px; align-items: baseline; padding: 14px var(--rand); }
.grossbild-kopf p { flex: 1; color: var(--grau); }
.grossbild-kopf button:hover { color: var(--orange); }
.grossbild img { margin: 0 auto; max-width: calc(100% - 2 * var(--rand)); max-height: calc(100vh - 70px); width: auto; height: auto; object-fit: contain; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .raster > * { grid-column: 1 / -1; }
  .kopf { grid-template-columns: auto 1fr; row-gap: 6px; }
  .kopf .s2, .kopf .s3 { display: none; }
  .kopf .kopf-logo { grid-column: 1; grid-row: 1; }
  .kopf nav { grid-column: 2; grid-row: 1; }
  .held .unterzeile { grid-column: 1 / -1; }
  .inhalt-liste { position: static; max-height: none; }
  .themen { gap: 56px; }
  .jobliste li { grid-template-columns: 1fr auto; gap: 2px 12px; }
  .jobliste li .mono { grid-column: 1 / -1; color: var(--grau); }
  .jobliste li b { grid-column: 1 / -1; }
  .fuss { row-gap: 8px; }
}
@media (max-width: 560px) {
  .bilder { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ---------- Drucken: nur der Bericht ---------- */
@media print {
  .kopf, .fuss, .inhalt-liste, .vorschau-band, .sprung, .nicht-drucken { display: none !important; }
  .raster > * { grid-column: 1 / -1; }
  .held { padding-top: 0; }
  .themen { gap: 32px; }
  .thema { break-inside: avoid-page; }
  .thema-links a::after { content: " " attr(href); color: var(--grau); font-size: 10px; }
  .bilder { grid-template-columns: repeat(3, 1fr); }
  a { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}