/* MK Groups Admin. Every value comes from the approved design (docs/gestaltung/muster); the CSP allows no inline
   styles, so the inline values of the mock live here as classes. */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schriften/montserrat-400.woff2?v=e66bcd2761ab) format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schriften/montserrat-500.woff2?v=2b53300fb947) format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap;
  src: url(schriften/montserrat-600.woff2?v=d857325c360f) format("woff2"); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap;
  src: url(schriften/montserrat-700.woff2?v=f9d9e65b1537) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(schriften/jetbrains-mono-400.woff2?v=14425ba9c695) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(schriften/jetbrains-mono-500.woff2?v=cb182feeed4d) format("woff2"); }

:root {
  --seite: #F7F7F3;
  --flaeche: #FFFFFF;
  --tinte: #111315;
  --ruhig: #56616A;
  --akzent: #2E4A33;
  --linie: #E3E2D9;
  --kante: #C9C8BE;
  --strich: #9C9C92;
  --zeichen: #9C9C92;
  --balken-aus: #DCDBD2;
  --knopf-hover: #EDEDE6;
  --wahl-hover: #F2F2EC;
  --heute: #F1F1EA;
  --warn-flaeche: #FBF6EA;
  --warn: #A0771C;
  --warn-text: #8A6514;
  --gefahr: #9A4F45;
  --schatten-karte: rgba(17,19,21,.07);
  --schatten-menue: rgba(17,19,21,.10);
  --kurve: cubic-bezier(.19,1,.22,1);
  --sans: Montserrat, "Helvetica Neue", Helvetica, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --rand: clamp(16px, 3.5vw, 48px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) {
    --seite: #0F1211; --flaeche: #161A18; --tinte: #F1F2EC; --ruhig: #8E9A90; --akzent: #7FA98A;
    --linie: #272C29; --kante: #3A413C; --strich: #4A524C; --zeichen: #5E675F; --balken-aus: #2F3531;
    --knopf-hover: #1E2320; --wahl-hover: #1E2320; --heute: #181D1A; --warn-flaeche: #2A2416;
    --warn: #D9A84E; --warn-text: #D9A84E; --gefahr: #C87F75;
    --schatten-karte: rgba(0,0,0,.45); --schatten-menue: rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dunkel"] {
  --seite: #0F1211; --flaeche: #161A18; --tinte: #F1F2EC; --ruhig: #8E9A90; --akzent: #7FA98A;
  --linie: #272C29; --kante: #3A413C; --strich: #4A524C; --zeichen: #5E675F; --balken-aus: #2F3531;
  --knopf-hover: #1E2320; --wahl-hover: #1E2320; --heute: #181D1A; --warn-flaeche: #2A2416;
  --warn: #D9A84E; --warn-text: #D9A84E; --gefahr: #C87F75;
  --schatten-karte: rgba(0,0,0,.45); --schatten-menue: rgba(0,0,0,.5);
  color-scheme: dark;
}

/* Base */
/* Like the mock: content-box everywhere, border-box only where the mock sets it (and on full-width parts). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--seite); }
.seite { min-height: 100vh; background: var(--seite); color: var(--tinte); font-family: var(--sans);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: var(--tinte); text-decoration: none; }
a:hover { color: var(--akzent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible + label, [tabindex]:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
code, kbd, samp, pre { font-family: var(--mono); }
.mono { font-family: var(--mono); }
.ruhig { color: var(--ruhig); }
.nur-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Icons from public/icons.svg */
.ic { width: 18px; height: 18px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: square; }
.ic-8 { width: 8px; height: 8px; }
.ic-9 { width: 9px; height: 8px; }
.ic-10 { width: 10px; height: 10px; }
.ic-11 { width: 11px; height: 10px; }
.ic-12 { width: 12px; height: 12px; }
.ic-13 { width: 13px; height: 12px; }
.ic-14 { width: 14px; height: 14px; }
.ic-16 { width: 16px; height: 16px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; }
.ic-pfeil { width: 28px; height: 16px; }
.strich-18 { stroke-width: 1.8; }
.strich-22 { stroke-width: 2.2; }
.strich-24 { stroke-width: 2.4; }
.strich-26 { stroke-width: 2.6; }
.farbe-tinte { color: var(--tinte); }
.farbe-ruhig { color: var(--ruhig); }
.farbe-akzent { color: var(--akzent); }
.farbe-warn { color: var(--warn); }
.farbe-warn-text { color: var(--warn-text); }
.farbe-gefahr { color: var(--gefahr); }
.farbe-zeichen { color: var(--zeichen); }
.farbe-seite { color: var(--seite); }
.form-ok { color: var(--akzent); }
.form-hinweis { color: var(--warn); }
.form-fehler { color: var(--gefahr); }
.form-gleich { color: var(--zeichen); }

/* Header */
.kopf { border-bottom: 1px solid var(--linie); background: var(--seite); }
.kopf-innen { box-sizing: border-box; max-width: 1360px; margin: 0 auto; padding: 12px var(--rand); min-height: 72px; display: flex;
  align-items: center; gap: 12px 32px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 16px; min-height: 44px; }
.logo { display: block; height: 24px; width: auto; }
.logo-dunkel { display: none; }
:root[data-theme="dunkel"] .logo-hell { display: none; }
:root[data-theme="dunkel"] .logo-dunkel { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .logo-hell { display: none; }
  :root:not([data-theme="hell"]) .logo-dunkel { display: block; }
}
.marke-trenner { width: 1px; height: 22px; background: var(--kante); }
.marke-titel, .augenbraue { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ruhig); }
.hauptnav { order: 1; display: flex; align-items: stretch; gap: 4px; flex-wrap: wrap; }
.hauptnav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; font-size: 13px;
  font-weight: 500; color: var(--ruhig); }
.hauptnav a[aria-current="page"] { font-weight: 600; color: var(--tinte); box-shadow: inset 0 -2px 0 var(--tinte); }
.hauptnav a:hover { color: var(--akzent); }
.kopf-raum { order: 2; flex: 1 1 0px; }
.kopf-werkzeuge { order: 3; display: flex; align-items: center; gap: 4px; }
.symbolknopf { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ruhig); }
.konto { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-left: 10px; padding: 0 10px 0 16px;
  border-left: 1px solid var(--linie); }
.konto-zeichen { width: 32px; height: 32px; display: grid; place-items: center; background: var(--tinte);
  color: var(--seite); font-size: 13px; font-weight: 600; }
/* Below 1024 px the header has two rows: logo with theme and account on the right, then the tabs in one row
   (P6-K2-4). Below 760 px the tabs show their icons; the names stay for screen readers. */
@media (max-width: 1023px) {
  .kopf-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "marke werkzeuge"
    "nav nav"; gap: 0 12px; }
  .marke { grid-area: marke; justify-self: start; }
  .kopf-werkzeuge { grid-area: werkzeuge; }
  .hauptnav { grid-area: nav; flex-wrap: nowrap; margin: 4px 0 0 -14px; }
  .kopf-raum { display: none; }
}
@media (max-width: 760px) { .navtext { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; } }
.konto-name { padding: 8px 12px 10px; font-size: 12px; color: var(--ruhig); overflow-wrap: anywhere;
  border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.segmente-feld { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Hover and motion */
.knopf, .symbolknopf, .konto, .wahl { transition: background-color .3s var(--kurve); }
.knopf:hover, .symbolknopf:hover, .konto:hover { background: var(--knopf-hover); }
.wahl:hover { background: var(--wahl-hover); }
.knopf-primaer { transition: background-color .3s var(--kurve), color .3s var(--kurve); }
.knopf-primaer:hover { background: var(--akzent); color: var(--seite); }
.karte { transition: box-shadow .6s var(--kurve), transform .6s var(--kurve); }
.karte:hover { box-shadow: 0 24px 70px var(--schatten-karte); transform: translateY(-2px); }
.dreht { transition: transform .4s var(--kurve); }
[aria-expanded="true"] > .dreht { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .karte:hover { transform: none; }
}

/* Buttons: primary, secondary, quiet, danger */
.knopf { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 13px;
  font-weight: 600; color: var(--tinte); }
.knopf-primaer { background: var(--tinte); color: var(--seite); }
.knopf-primaer:hover { color: var(--seite); }
.knopf-sekundaer { border: 1px solid var(--tinte); }
.knopf-ruhig { border: 1px solid var(--kante); font-weight: 500; }
.knopf-gefahr { color: var(--gefahr); }
.knopf-gefahr:hover { color: var(--gefahr); }
.knopf-gross { min-height: 48px; padding: 0 20px; }
.knopf-start { padding: 0 18px; }
.knopf-voll { box-sizing: border-box; width: 100%; min-height: 52px; justify-content: center; gap: 12px; padding: 0; font-size: 14px; }
.knopf[disabled], .knopf[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.knopf-rahmen { width: 44px; height: 44px; display: grid; place-items: center; flex: none;
  border: 1px solid var(--linie); }
form.inline { display: contents; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; }
.chip-live { background: var(--seite); border: 1px solid var(--linie); }
.chip-live-flaeche { background: var(--flaeche); border: 1px solid var(--linie); }
.chip-vorschau { background: var(--akzent); color: var(--seite); }
.chip-laeuft { padding: 5px 10px; background: var(--akzent); color: var(--seite); }
.chip-aus { padding: 5px 10px; border: 1px solid var(--kante); color: var(--ruhig); }
.chip-warn { background: var(--warn-flaeche); border: 1px solid var(--warn); color: var(--warn-text); }
.chip-fehler { border: 1px solid var(--gefahr); color: var(--gefahr); }
.marke-live { padding: 1px 6px; background: var(--akzent); color: var(--seite); font-family: var(--sans);
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Own select menu: button plus list */
.auswahl { position: relative; }
.auswahl-knopf { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border: 1px solid var(--kante); background: var(--flaeche); font-size: 13px; font-weight: 500; }
.auswahl-knopf.mono { font-family: var(--mono); font-weight: 400; }
.auswahl-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 248px;
  background: var(--flaeche); border: 1px solid var(--tinte); box-shadow: 0 24px 70px var(--schatten-menue);
  padding: 6px; display: flex; flex-direction: column; }
.auswahl-liste.links { left: 0; right: auto; min-width: 230px; }
.wahl { min-height: 44px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--tinte); width: 100%; }
.wahl:hover { color: var(--tinte); }
.wahl-haken { display: flex; }
.wahl:not([aria-checked="true"]) .wahl-haken .ic { visibility: hidden; }
.wahl-zahl { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.wahl-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wahl-datum { font-family: var(--mono); font-size: 11px; color: var(--ruhig); }
.wahl-live { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent); }
.auswahl-liste:not(.offen) { display: none; }

/* Segmented switch: radios with labels */
.segmente { display: flex; border: 1px solid var(--kante); }
.segmente input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmente label { min-height: 40px; display: grid; place-items: center; padding: 0 14px; font-size: 13px;
  font-weight: 500; cursor: pointer; background: transparent; color: var(--tinte); }
.segmente label + input + label { border-left: 1px solid var(--kante); }
.segmente input:checked + label { background: var(--tinte); color: var(--seite); }

/* Page */
.inhalt { box-sizing: border-box; max-width: 1360px; margin: 0 auto; padding: 56px var(--rand) 88px; display: flex; flex-direction: column;
  gap: 56px; }
.inhalt-detail { padding-top: 28px; }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.titelblock { display: flex; flex-direction: column; gap: 14px; }
.betrieb { display: flex; align-items: center; gap: 12px; }
.betrieb-linie { width: 24px; height: 1px; background: var(--strich); }
.betrieb-zeit { font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: none; }
.titel { display: flex; align-items: flex-start; gap: 12px; font-size: clamp(40px, 5vw, 64px); line-height: 1;
  font-weight: 600; letter-spacing: -0.025em; }
.titel-detail { display: block; font-size: clamp(40px, 5vw, 60px); }
.titel-zahl { margin-top: 6px; font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: 0;
  color: var(--ruhig); }
.abschnitt { display: flex; flex-direction: column; gap: 18px; }
.abschnitt-kopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.abschnitt-linie { flex: 1 1 auto; height: 1px; background: var(--linie); }
.abschnitt-linie-kurz { flex: 1 1 40px; }
.abschnitt-wert { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.abschnitt-wert-stark { font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* Tiles with shared borders */
.kacheln { padding: 1px 0 0 1px; display: grid; }
.kacheln > * { margin: -1px 0 0 -1px; border: 1px solid var(--linie); background: var(--flaeche); }

/* Status bar */
.zustand { flex: 0 1 640px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.zustand > li { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.zustand-oben { display: flex; align-items: center; gap: 10px; }
.zustand-wert { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.zustand-name { font-size: 12px; color: var(--ruhig); overflow-wrap: anywhere; }
.messstand { font-family: var(--mono); font-size: 11px; color: var(--ruhig); }
/* What Kuma does not tell is «unbekannt», with a note; ten minutes without an extract is «veraltet» (P6-T2) */
.zustand-wert-text { font-size: 14px; color: var(--warn-text); }
.zustand-hinweis { font-size: 11px; color: var(--warn-text); overflow-wrap: anywhere; }
.zustand-fehler { color: var(--gefahr); }
.veraltet { font-weight: 500; color: var(--warn-text); }

/* Server tiles */
.server-raster { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.server { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 22px; }
.server-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.server-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.symbolbox { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--linie);
  flex: none; }
.server-text { display: flex; flex-direction: column; min-width: 0; }
.server-titel { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.server-rolle { font-size: 12px; color: var(--ruhig); overflow-wrap: anywhere; }
.server-zustand { margin-top: 6px; }
.pegelliste { display: flex; flex-direction: column; gap: 12px; }
.pegelliste-eng { gap: 10px; }
.pegel-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.pegel-zeile-frei { grid-template-columns: 18px minmax(0, 1fr) auto; }
.pegel-wert { text-align: right; font-family: var(--mono); font-size: 12px; }
.pegel-wert.unbekannt { color: var(--ruhig); }
.kachel-meldung { min-width: 0; font-size: 12px; font-weight: 500; color: var(--warn-text); overflow-wrap: anywhere; }
.kachel-fehler { color: var(--gefahr); }
.pegel { position: relative; height: 10px;
  background: repeating-linear-gradient(90deg, var(--linie) 0 6px, transparent 6px 9px); }
.pegel > span { position: absolute; left: 0; top: 0; bottom: 0;
  background: repeating-linear-gradient(90deg, var(--tinte) 0 6px, transparent 6px 9px); }
.pegel > span.wenig { min-width: 3px; background: var(--tinte); }
.pegel-klein { height: 8px; background: repeating-linear-gradient(90deg, var(--linie) 0 5px, transparent 5px 8px); }
.pegel-klein > span { background: repeating-linear-gradient(90deg, var(--tinte) 0 5px, transparent 5px 8px); }
/* Backup runs: one status row, below it one row per failed run (P6-K1-8) */
.sicherungsstand { display: flex; flex-direction: column; gap: 8px; padding-top: 14px;
  border-top: 1px solid var(--linie); min-width: 0; }
.sicherung-zeile { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13px; font-weight: 600; }
.sicherung-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sicherung-zeit { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ruhig); }
.sicherung-leer { font-weight: 500; color: var(--ruhig); }
.sicherung-fehler { display: flex; flex-direction: column; gap: 4px; }
.sicherung-fehler li { display: flex; align-items: center; gap: 12px; padding-left: 1px; min-width: 0;
  font-size: 12px; font-weight: 500; color: var(--warn-text); }
.sicherung-fehler li > span { min-width: 0; overflow-wrap: anywhere; }
.nicht-angebunden { border: 1px dashed var(--strich); padding: 22px 24px; display: flex; align-items: center;
  gap: 14px; color: var(--ruhig); font-size: 13px; }

/* Website cards */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 24px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); display: flex; flex-direction: column;
  min-width: 0; }
.karte-bild { position: relative; border-bottom: 1px solid var(--linie); overflow: hidden; }
.karte-bild img, .bild-leer { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top; }
.bild-leer { display: grid; place-items: center; background: var(--seite); color: var(--zeichen); }
.karte-chip-links { position: absolute; left: 12px; top: 12px; }
.karte-chip-rechts { position: absolute; right: 12px; top: 12px; }
.karte-koerper { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
.karte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.karte-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.karte-titel { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.karte-domain { font-size: 13px; color: var(--ruhig); overflow-wrap: anywhere; }
.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); }
.drei > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.drei > div:nth-child(1) { padding: 14px 12px 0 0; }
.drei > div:nth-child(2) { padding: 14px 12px 0; border-left: 1px solid var(--linie); }
.drei > div:nth-child(3) { padding: 14px 0 0 12px; border-left: 1px solid var(--linie); }
.drei dt { display: flex; }
.drei dd { font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drei > div.warn { background: var(--warn-flaeche); }
.drei > div.warn dd { font-weight: 500; color: var(--warn-text); }
.signal { width: 22px; height: 14px; display: block; }
.signal rect { fill: var(--tinte); }
.signal rect.aus { fill: var(--balken-aus); }
.signal.warn rect:not(.aus) { fill: var(--warn); }
.signal.leer rect { fill: var(--balken-aus); }
.neu-kachel { min-height: 320px; border: 1px dashed var(--strich); background: transparent; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--ruhig);
  text-align: center; }
.neu-symbol { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--strich);
  color: var(--tinte); }
.neu-titel { font-size: 13px; font-weight: 600; color: var(--tinte); }
.neu-text { font-size: 12px; max-width: 30ch; }

/* Compact rows of the dashboard and the running previews (P6-K1-9): one grid for the list, so the columns line up
   from row to row; the link of a row covers all of it. */
.zeilen { display: grid; column-gap: 20px; border: 1px solid var(--linie); background: var(--flaeche); }
.zeilen-web, .zeilen-vorschau { grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1.4fr) auto auto; }
.zeilen-auftrag { grid-template-columns: 16px auto minmax(0, 1fr) auto auto; }
.zeile { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center;
  min-height: 56px; padding: 0 22px; border-top: 1px solid var(--linie); transition: background-color .3s var(--kurve); }
.zeile:first-child { border-top: 0; }
.zeile:hover { background: var(--wahl-hover); }
.zeile-zustand { display: flex; }
.zeile-titel { font-size: 14px; font-weight: 600; }
.zeile-titel::after { content: ""; position: absolute; inset: 0; }
.zeile-titel, .zeile-unter, .zeile-wert > span, .zeile-text { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.zeile-unter { font-size: 13px; color: var(--ruhig); }
.zeile-unter .mono { font-size: 12px; }
.zeile-werte { display: flex; align-items: center; gap: 20px; min-width: 0; }
.zeile-wert { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--mono); font-size: 12px; }
.zeile-version > span { min-width: 7ch; }
.zeile-wert.warn { font-weight: 500; color: var(--warn-text); }
.zeile-text { font-size: 13px; }
.zeile-ende { display: flex; justify-content: flex-end; min-width: 0; font-family: var(--mono); font-size: 12px;
  color: var(--ruhig); white-space: nowrap; }
@media (max-width: 640px) {
  .zeilen { display: flex; flex-direction: column; }
  .zeile { grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "zustand titel ende"
    ". unter unter" ". werte werte"; column-gap: 12px; row-gap: 4px; padding: 12px 16px; }
  .zeile-zustand { grid-area: zustand; }
  .zeile-titel { grid-area: titel; }
  .zeile-unter { grid-area: unter; }
  .zeile-werte { grid-area: werte; }
  .zeile-werte:empty { display: none; }
  .zeile-ende { grid-area: ende; }
}

/* Published timeline */
.zeitachse-kasten { overflow-x: auto; border: 1px solid var(--linie); background: var(--flaeche); }
.zeitachse { box-sizing: border-box; min-width: 880px; padding: 8px 24px 0; }
.zeitachse-zeile { display: grid; grid-template-columns: 150px repeat(10, minmax(0, 1fr)); height: 46px;
  border-bottom: 1px solid var(--linie); position: relative; }
.zeitachse-zeile:last-child { border-bottom: 0; }
.heute-spalte { grid-column: 11; grid-row: 1; background: var(--heute); margin-bottom: -1px; }
.zeitachse-name { grid-column: 1; grid-row: 1; align-self: center; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 12px; }
.ereignis { grid-row: 1; align-self: center; display: flex; align-items: center; gap: 10px; min-width: 0;
  z-index: 1; }
.ereignis-punkt { width: 10px; height: 10px; flex: none; background: var(--tinte); }
.ereignis-punkt.zurueck { background: transparent; border: 1.5px solid var(--tinte); }
.ereignis-text { font-family: var(--mono); font-size: 11px; color: var(--ruhig); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.tag { grid-row: 1; align-self: center; font-family: var(--mono); font-size: 11px; color: var(--ruhig); z-index: 1; }
.tag-heute { padding-left: 8px; font-weight: 500; color: var(--tinte); }
.zeitachse-leer { padding: 22px 0; font-size: 13px; color: var(--ruhig); }

/* Website detail */
.detailkopf { display: flex; flex-direction: column; gap: 24px; }
.pfad { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; min-width: 0; }
.pfad-zurueck { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 8px;
  color: var(--ruhig); font-weight: 500; }
.pfad-trenner { color: var(--zeichen); }
.pfad-hier { font-weight: 600; overflow-wrap: anywhere; }
.kopfbereich { display: flex; flex-wrap: wrap; gap: 40px 48px; align-items: stretch; }
.kopfbild { flex: 1 1 560px; min-width: 0; border: 1px solid var(--linie); background: var(--flaeche); }
.kopfbild-leiste { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--linie); color: var(--ruhig); min-width: 0; }
.kopfbild-leiste span { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.kopfbild img, .kopfbild .bild-leer { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  object-position: top; }
.kopfdaten { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;
  gap: 28px; }
.kopfdaten-oben { display: flex; flex-direction: column; gap: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adressen { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.adresse { display: flex; align-items: center; gap: 14px; min-height: 52px; border-bottom: 1px solid var(--linie);
  min-width: 0; }
.adresse-name { flex: 1 1 auto; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.adresse-weiter .adresse-name { font-weight: 400; color: var(--ruhig); }
.adresse-code { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.kennzahlen { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.kennzahlen > div { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kennzahlen dt { display: flex; }
.kennzahlen dd { font-family: var(--mono); font-size: 18px; font-weight: 500; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.aktionen { display: flex; flex-wrap: wrap; gap: 10px; }

/* «Neue Version» flow */
.ablauf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); row-gap: 28px; }
.schritt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.schritt-oben { display: flex; align-items: center; }
.schritt-symbol { box-sizing: border-box; flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--tinte);
  color: var(--seite); }
.schritt-aktuell .schritt-symbol { border: 2px solid var(--akzent); background: var(--flaeche); color: var(--akzent); }
.schritt-offen .schritt-symbol { border: 1px solid var(--kante); background: var(--flaeche); color: var(--ruhig); }
.schritt-fehler .schritt-symbol { border: 2px solid var(--gefahr); background: var(--flaeche); color: var(--gefahr); }
.verbinder { flex: 1 1 auto; height: 2px; background: var(--tinte); }
.verbinder-laeuft { background: repeating-linear-gradient(90deg, var(--akzent) 0 5px, transparent 5px 9px); }
.verbinder-offen { background: repeating-linear-gradient(90deg, var(--kante) 0 5px, transparent 5px 9px); }
.schritt-name { font-size: 13px; font-weight: 600; }
.schritt-wert { font-family: var(--mono); font-size: 12px; color: var(--ruhig); overflow-wrap: anywhere; }
.schritt-aktuell .schritt-name, .schritt-aktuell .schritt-wert { color: var(--akzent); }
.schritt-offen .schritt-name { color: var(--ruhig); }
.schritt-fehler .schritt-name, .schritt-fehler .schritt-wert { color: var(--gefahr); }

/* Preview field and approval card */
.paar { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.feld { flex: 1 1 560px; min-width: 0; border: 1px solid var(--linie); background: var(--flaeche); display: flex;
  flex-direction: column; }
.feld-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid var(--linie); }
.feld-titel { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.feld-koerper { padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.feld-koerper-eng { gap: 16px; }
.vorschau-adresse { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 16px; border: 1px solid var(--linie); background: var(--seite); min-width: 0; }
.vorschau-adresse > span { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vorschau-adresse .mono { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 24px; }
.fakt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fakt-wert { font-family: var(--mono); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.fakt-link { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* 14-day bar: one segment per day, 3px gaps like the mock's repeating gradient */
.tage14 { display: flex; gap: 3px; padding-right: 3px; height: 6px; }
.tage14 > span { flex: 1 1 0; background: var(--linie); }
.tage14 > span.an { background: var(--akzent); }
.aktionsreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aktionsreihe .abstand { flex: 1 1 0px; }
.teilen-feld { border: 1px solid var(--tinte); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.teilen-zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.teilen-bis { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.link-zeile { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 14px; background: var(--seite);
  border: 1px solid var(--linie); min-width: 0; }
.link-zeile input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--mono);
  font-size: 12px; padding: 0; text-overflow: ellipsis; }
.linkliste { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.linkliste li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--linie);
  flex-wrap: wrap; font-size: 13px; }
.linkliste .mono { font-size: 12px; color: var(--ruhig); }
.start-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.feld-fuss { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px;
  color: var(--ruhig); overflow-wrap: anywhere; }
.freigabe { flex: 1 1 380px; min-width: 0; border: 1px solid var(--tinte); background: var(--flaeche); display: flex;
  flex-direction: column; }
.wird-zu { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.wird-zu .alt { color: var(--ruhig); }
.wird-zu .neu { font-weight: 500; }
.bindungen { padding: 4px 22px 0; display: flex; flex-direction: column; }
.bindung { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px;
  min-height: 48px; border-bottom: 1px solid var(--linie); }
.bindung-name { font-size: 13px; font-weight: 500; }
.bindung-wert { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; text-align: right; }
.bindung-achtung { margin: 0 -22px; padding: 0 22px; background: var(--warn-flaeche); color: var(--warn-text); }
.bindung-achtung .bindung-name { font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 14px 22px 0; font-size: 11px; color: var(--ruhig); }
.legende span { display: flex; align-items: center; gap: 6px; }
.freigabe-fuss { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.sperre { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--warn-text);
  background: var(--warn-flaeche); padding: 12px 14px; }
.sperre .ic { margin-top: 3px; }

/* Version band */
.versionen-kasten { border: 1px solid var(--linie); background: var(--flaeche); padding: 22px 24px 20px;
  display: flex; flex-direction: column; gap: 18px; }
.versionen-scroll { overflow-x: auto; }
.versionen { position: relative; min-width: 520px; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.versionen-linie { position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--kante); }
.version { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px 0 6px; min-width: 0; }
.version-marke { box-sizing: border-box; width: 14px; height: 14px; border: 1.5px solid var(--tinte); background: var(--flaeche); }
.version-live .version-marke { border: 0; background: var(--tinte); }
.version[aria-pressed="true"] .version-marke { box-shadow: 0 0 0 3px var(--flaeche), 0 0 0 5px var(--akzent); }
.version-name { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.version-datum { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px;
  color: var(--ruhig); }
.versionen-fuss { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; min-height: 52px;
  border-top: 1px solid var(--linie); padding-top: 18px; }
.versionen-fuss > div { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.versionen-hinweis { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.laeuft-live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ruhig); }

/* Runtime as a flow: visitor, proxy, services, egress */
.laufzeit { border: 1px solid var(--linie); background: var(--flaeche); padding: 28px 24px; display: flex;
  align-items: center; flex-wrap: wrap; gap: 16px; }
.knoten { flex: none; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; }
.knoten-box { box-sizing: border-box; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--kante); }
.knoten-ausgang .knoten-box { border-color: var(--warn); background: var(--warn-flaeche); }
.knoten-name { font-size: 12px; font-weight: 600; }
.knoten-wert { font-family: var(--mono); font-size: 11px; color: var(--ruhig); }
.knoten-ausgang .knoten-wert { color: var(--warn-text); }
.flusspfeil { color: var(--zeichen); }
.flusspfeil-warn { color: var(--warn); }
.dienst { flex: 1 1 250px; min-width: 0; border: 1px solid var(--tinte); padding: 16px 18px; display: flex;
  flex-direction: column; gap: 14px; }
.dienst-kopf { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dienst-name { font-family: var(--mono); font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.dienst-port { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.dienst-kopf .abstand { flex: 1 1 auto; }
.dienst-zeile { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dienst-wert { font-family: var(--mono); font-size: 11px; }

/* Checks as tiles */
.pruefkacheln { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.pruefkacheln > li { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pruefkacheln > li.warn { background: var(--warn-flaeche); }
.pruef-oben { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pruef-name { font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pruef-detail { font-family: var(--mono); font-size: 11px; color: var(--ruhig); overflow-wrap: anywhere; }

/* Job page */
.auftragskopf { display: flex; flex-direction: column; gap: 16px; }
.schritte { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.schritte li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: 48px; border-bottom: 1px solid var(--linie); padding: 8px 0; }
.schritte .schritt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.schritte .schritt-meldung { font-size: 12px; color: var(--ruhig); overflow-wrap: anywhere; }
.schritte .schritt-zeit { font-family: var(--mono); font-size: 12px; color: var(--ruhig); }
.zaehler { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.zaehler li { display: flex; align-items: center; gap: 8px; }
.zaehler .mono { font-weight: 500; }
.befunde { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.befund { border-bottom: 1px solid var(--linie); }
.befund > summary { list-style: none; min-height: 48px; display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto 14px; align-items: center; gap: 12px; cursor: pointer; }
.befund > summary::-webkit-details-marker { display: none; }
.befund > summary .mono { font-size: 11px; color: var(--ruhig); }
.befund[open] > summary .dreht { transform: rotate(180deg); }
.befund-inhalt { padding: 0 0 16px 28px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.befund-inhalt li { display: flex; gap: 10px; align-items: baseline; overflow-wrap: anywhere; }
.befund-inhalt code { font-size: 12px; color: var(--ruhig); }
.fotoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.foto { border: 1px solid var(--linie); background: var(--flaeche); display: flex; flex-direction: column;
  min-width: 0; }
.foto a { display: block; }
.foto img { display: block; width: 100%; height: auto; }
.foto figcaption { padding: 8px 12px; font-size: 12px; color: var(--ruhig); border-top: 1px solid var(--linie); }
.vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.lauf-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.lauf-wahl a[aria-current="page"] { border-color: var(--tinte); }
.tabelle-kasten { overflow-x: auto; border: 1px solid var(--linie); background: var(--flaeche); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ruhig); padding: 14px 16px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 12px 16px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle td.mono { font-size: 12px; }
.tabelle .wert-umbruch { overflow-wrap: anywhere; min-width: 12ch; }
.zeile-risiko td { background: var(--warn-flaeche); color: var(--warn-text); }
.risiko { display: inline-flex; vertical-align: middle; margin-right: 8px; }
.protokoll { max-height: 420px; overflow: auto; margin: 0; padding: 16px; background: var(--seite);
  border: 1px solid var(--linie); font-size: 12px; white-space: pre; }
.meldung { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border: 1px solid var(--linie);
  background: var(--flaeche); font-size: 13px; }
.meldung-warn { background: var(--warn-flaeche); border-color: var(--warn); color: var(--warn-text); }
.meldung-fehler { border-color: var(--gefahr); color: var(--gefahr); }
.meldung .ic { margin-top: 2px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Sign-in, errors, notices */
.inhalt-mitte { min-height: calc(100vh - 73px); align-items: center; justify-content: center; }
/* 640 px plus the 1 px of the shared borders, as in the mock. */
.zustand-block { flex: 0 1 641px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.zustand-block .zustand { flex: none; }
.karte-ungueltig { border-color: var(--warn); }
.fehlerliste { display: flex; flex-direction: column; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.fehlerliste .mono { font-size: 12px; color: var(--ruhig); }
.zustand-zelle { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.knopf-rahmen { transition: background-color .3s var(--kurve); }
.knopf-rahmen:hover { background: var(--knopf-hover); }
.vorschau-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.eingabe input { box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--kante); background: var(--flaeche);
  font-family: var(--mono); font-size: 13px; width: min(100%, 44ch); }
.eingabe { display: flex; min-width: 0; flex: 1 1 260px; }
.start-zeile .eingabe input { width: 100%; }
.hinweiskarte { box-sizing: border-box; width: 100%; max-width: 440px; border: 1px solid var(--linie); background: var(--flaeche);
  padding: 32px; display: flex; flex-direction: column; gap: 22px; }
.hinweiskarte h1 { font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.hinweiskarte p { font-size: 13px; color: var(--ruhig); }
.hinweis-symbol { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--kante); }
.schaufenster-band { border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.schaufenster-band-innen { box-sizing: border-box; max-width: 1360px; margin: 0 auto; padding: 10px var(--rand); display: flex;
  align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: 12px; color: var(--ruhig); }
.schaufenster-band strong { color: var(--tinte); font-weight: 600; }

/* Data-driven sizes as classes, because the CSP allows no style attributes */
.spalte-2 { grid-column-start: 2; } .spalte-3 { grid-column-start: 3; } .spalte-4 { grid-column-start: 4; }
.spalte-5 { grid-column-start: 5; } .spalte-6 { grid-column-start: 6; } .spalte-7 { grid-column-start: 7; }
.spalte-8 { grid-column-start: 8; } .spalte-9 { grid-column-start: 9; } .spalte-10 { grid-column-start: 10; }
.spalte-11 { grid-column-start: 11; }
.spanne-1 { grid-column-end: span 1; } .spanne-2 { grid-column-end: span 2; } .spanne-3 { grid-column-end: span 3; }
.spanne-4 { grid-column-end: span 4; }
.w-0 { width: 0%; } .w-1 { width: 1%; } .w-2 { width: 2%; } .w-3 { width: 3%; } .w-4 { width: 4%; } .w-5 { width: 5%; }
.w-6 { width: 6%; } .w-7 { width: 7%; } .w-8 { width: 8%; } .w-9 { width: 9%; } .w-10 { width: 10%; } .w-11 { width: 11%; }
.w-12 { width: 12%; } .w-13 { width: 13%; } .w-14 { width: 14%; } .w-15 { width: 15%; } .w-16 { width: 16%; } .w-17 { width: 17%; }
.w-18 { width: 18%; } .w-19 { width: 19%; } .w-20 { width: 20%; } .w-21 { width: 21%; } .w-22 { width: 22%; } .w-23 { width: 23%; }
.w-24 { width: 24%; } .w-25 { width: 25%; } .w-26 { width: 26%; } .w-27 { width: 27%; } .w-28 { width: 28%; } .w-29 { width: 29%; }
.w-30 { width: 30%; } .w-31 { width: 31%; } .w-32 { width: 32%; } .w-33 { width: 33%; } .w-34 { width: 34%; } .w-35 { width: 35%; }
.w-36 { width: 36%; } .w-37 { width: 37%; } .w-38 { width: 38%; } .w-39 { width: 39%; } .w-40 { width: 40%; } .w-41 { width: 41%; }
.w-42 { width: 42%; } .w-43 { width: 43%; } .w-44 { width: 44%; } .w-45 { width: 45%; } .w-46 { width: 46%; } .w-47 { width: 47%; }
.w-48 { width: 48%; } .w-49 { width: 49%; } .w-50 { width: 50%; } .w-51 { width: 51%; } .w-52 { width: 52%; } .w-53 { width: 53%; }
.w-54 { width: 54%; } .w-55 { width: 55%; } .w-56 { width: 56%; } .w-57 { width: 57%; } .w-58 { width: 58%; } .w-59 { width: 59%; }
.w-60 { width: 60%; } .w-61 { width: 61%; } .w-62 { width: 62%; } .w-63 { width: 63%; } .w-64 { width: 64%; } .w-65 { width: 65%; }
.w-66 { width: 66%; } .w-67 { width: 67%; } .w-68 { width: 68%; } .w-69 { width: 69%; } .w-70 { width: 70%; } .w-71 { width: 71%; }
.w-72 { width: 72%; } .w-73 { width: 73%; } .w-74 { width: 74%; } .w-75 { width: 75%; } .w-76 { width: 76%; } .w-77 { width: 77%; }
.w-78 { width: 78%; } .w-79 { width: 79%; } .w-80 { width: 80%; } .w-81 { width: 81%; } .w-82 { width: 82%; } .w-83 { width: 83%; }
.w-84 { width: 84%; } .w-85 { width: 85%; } .w-86 { width: 86%; } .w-87 { width: 87%; } .w-88 { width: 88%; } .w-89 { width: 89%; }
.w-90 { width: 90%; } .w-91 { width: 91%; } .w-92 { width: 92%; } .w-93 { width: 93%; } .w-94 { width: 94%; } .w-95 { width: 95%; }
.w-96 { width: 96%; } .w-97 { width: 97%; } .w-98 { width: 98%; } .w-99 { width: 99%; } .w-100 { width: 100%; }
.js [data-aufklapper]:not(.offen) { display: none; }