/* W-SPLIT1 step 2 (Stanislav 31.10.2026: „Industrie-Design, nicht KI-mäßig, clean wie SAP“ – „Ja, so“ to the
   draft HQ marketing/konzepte/zwei-bereiche/entwurf-it-industrie.html). Loaded only on IT pages (digital/, en/digital/)
   after sp.css. Same values as Chat 8's design system "STATECH Industrial" for ERP/MES: navy ground, the SAP-near
   blue only for actions, hairlines instead of shadows, 4 px corners, no glow, no gradients, no pills.
   Contrast: white on #0E1A28 17.5:1, #A9B4C2 on #0E1A28 8.4:1, white on #0070F2 4.6:1, #4DB1FF on #0E1A28 7.6:1,
   #1D2D3E on #F5F6F7 13:1, #475E75 on #F5F6F7 6.1:1. */
.bereich-it {
  --it-grund: #0E1A28;
  --it-band: #12263A;
  --it-panel: #16263A;
  --it-linie: #2A3B50;
  --it-text: #FFFFFF;
  --it-neben: #A9B4C2;
  --it-blau: #0070F2;
  --it-blau-dunkel: #0058C0;
  --it-akzent: #4DB1FF;
  --it-hell: #F5F6F7;
  --it-tinte: #1D2D3E;
  --it-tinte-neben: #475E75;
  --it-linie-hell: #D5DAE1;
  /* the request button and links of sp.css take the IT blue */
  --blau: #0070F2;
  --blau-text: #0058C0;
}

/* ---------- header and footer: navy ---------- */
.bereich-it .kopfleiste { background: var(--it-grund); border-bottom-color: var(--it-linie); }
.bereich-it .wortmarke, .bereich-it .wortmarke b { color: var(--it-text); }
.bereich-it .wortmarke small { color: var(--it-neben); }
.bereich-it .navi > a, .bereich-it .navi .gruppe > button { color: var(--it-neben); }
.bereich-it .navi > a:hover, .bereich-it .navi .gruppe > button:hover { background: var(--it-panel); color: var(--it-text); }
.bereich-it .navi > a[aria-current="page"], .bereich-it .navi .gruppe > button.aktiv { color: var(--it-text); box-shadow: inset 0 -2px 0 var(--it-akzent); }
.bereich-it .navi .knopf, .bereich-it .bereich-knopf { border-radius: 4px; box-shadow: none; }
.bereich-it .kopf-anfrage, .bereich-it .navi > a.kopf-anfrage { background: var(--it-blau); color: #fff; } /* W-FIX-AUDIT1: the menu link colour (.navi > a) outranked this; white on #0070F2 is 4.6:1 */
.bereich-it .kopf-anfrage:hover, .bereich-it .kopf-anfrage:focus-visible, .bereich-it .navi > a.kopf-anfrage:hover, .bereich-it .navi > a.kopf-anfrage:focus-visible { background: var(--it-blau-dunkel); color: #fff; box-shadow: none; transform: none; }
.bereich-it .kopfleiste .konto, .bereich-it .kopfleiste .sprachwahl a { color: var(--it-text); }
.bereich-it .kopfleiste .konto svg { stroke: var(--it-text); }
.bereich-it .menueknopf { background: var(--it-panel); border-color: var(--it-linie); color: var(--it-text); }
.bereich-it .menueknopf svg { stroke: var(--it-text); }
.bereich-it .fuss { background: var(--it-grund); border-top: 1px solid var(--it-linie); }
@media (max-width: 1200px) {
  .bereich-it .navi { background: var(--it-grund); }
  .bereich-it .navi > a:not(.knopf), .bereich-it .navi .gruppe > button { color: var(--it-text); border-bottom-color: var(--it-linie); }
  .bereich-it .navi .menue { background: transparent; }
  /* Stanislav 04.11.2026 (screenshot): the entries under „Mehr" kept the dark ink of sp.css on navy and could not be read */
  .bereich-it .navi .menue a { color: var(--it-text); }
  .bereich-it .navi .menue a strong { color: var(--it-text); }
  .bereich-it .navi .menue a span { color: var(--it-neben); }
  .bereich-it .navi .menue a:hover, .bereich-it .navi .menue a:focus-visible { background: var(--it-panel); }
  .bereich-it .navi .menue-liste .menue-symbol { background: var(--it-panel); color: var(--it-text); border: 1px solid var(--it-linie); }
  .bereich-it .navi .menue-liste a:hover .menue-symbol, .bereich-it .navi .menue-liste a:focus-visible .menue-symbol { background: var(--it-blau); border-color: var(--it-blau); }
  .bereich-it .navi .gruppe.auf > button { color: var(--it-text); background: var(--it-panel); }
  .bereich-it .navi .menue-person, .bereich-it .navi .menue-person strong { color: var(--it-text); }
  .bereich-it .navi > a.navi-tel { color: var(--it-text); border-color: var(--it-linie); }
}

/* ---------- page building blocks (prefix it-) ---------- */
.it-seite { background: var(--it-grund); color: var(--it-text); font-size: 1.0625rem; }
.it-seite h1, .it-seite h2, .it-seite h3 { font-family: var(--text); font-weight: 600; letter-spacing: -.022em; line-height: 1.1; margin: 0; color: inherit; }
.it-seite p { margin: 0; }
.it-lbl { display: block; font: 600 .75rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--it-neben); }
.it-knopf { display: inline-flex; align-items: center; justify-content: center; font: 600 .95rem/1 var(--text); padding: 14px 20px; border-radius: 4px; text-decoration: none; white-space: nowrap; }
.it-knopf.voll { background: var(--it-blau); color: #fff; }
.it-knopf.voll:hover, .it-knopf.voll:focus-visible { background: var(--it-blau-dunkel); color: #fff; }
.it-knopf.rand { border: 1px solid #5A6B80; color: var(--it-text); }
.it-knopf.rand:hover, .it-knopf.rand:focus-visible { border-color: var(--it-akzent); color: var(--it-text); }
.it-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

/* hero: text left, one real screen in a plain application window */
.it-held { border-bottom: 1px solid var(--it-linie); padding-top: clamp(36px, 6vw, 72px); }
.it-held .huelle { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; }
.it-held .it-text { padding-bottom: clamp(32px, 6vw, 72px); }
.it-held h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); margin: 16px 0 18px; }
.it-held .it-lead { font-size: 1.2rem; color: var(--it-neben); margin-bottom: 30px; max-width: 34ch; }
.it-pfad { font-size: .85rem; color: var(--it-neben); margin-bottom: 18px; }
.it-pfad a { color: var(--it-neben); }
.it-fenster { border: 1px solid var(--it-linie); border-bottom: 0; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--it-panel); }
.it-fenster .it-leiste { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-bottom: 1px solid var(--it-linie); font: 500 .75rem/1 var(--text); color: var(--it-neben); }
.it-fenster .it-leiste i { width: 8px; height: 8px; border-radius: 50%; background: #33475E; }
.it-fenster .it-leiste span { margin-left: 6px; }
.it-fenster img { display: block; width: 100%; height: auto; }

/* four columns with hairlines */
.it-reihe { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--it-linie); }
.it-reihe > a, .it-reihe > div { display: block; padding: 32px 28px 36px; border-right: 1px solid var(--it-linie); color: inherit; text-decoration: none; }
.it-reihe > :last-child { border-right: 0; }
.it-reihe > a:hover h3, .it-reihe > a:focus-visible h3 { color: var(--it-akzent); }
.it-nr { font: 600 .8rem/1 var(--mono); color: var(--it-akzent); }
.it-reihe h3 { font-size: 1.35rem; margin: 14px 0 8px; }
.it-reihe p { color: var(--it-neben); font-size: 1rem; margin-bottom: 18px; }
.it-preis { font: 500 .95rem/1.4 var(--mono); color: var(--it-text); }
.it-preis small { display: block; color: var(--it-neben); font-size: .8rem; }

.it-band { padding: clamp(60px, 8vw, 96px) 0; }
.it-band.hell { background: var(--it-hell); color: var(--it-tinte); }
.it-band.hell .it-lbl { color: var(--it-tinte-neben); }
.it-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin: 14px 0 12px; }
.it-band .it-lead { font-size: 1.15rem; color: var(--it-neben); margin-bottom: 44px; max-width: 52ch; }
.it-band.hell .it-lead { color: var(--it-tinte-neben); }

.it-schirme { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.it-schirm { display: block; border: 1px solid var(--it-linie-hell); border-radius: 6px; overflow: hidden; background: #fff; color: var(--it-tinte); text-decoration: none; }
.it-schirm img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; border-bottom: 1px solid var(--it-linie-hell); }
.it-schirm div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 20px; }
.it-schirm h3 { font-size: 1.15rem; }
.it-schirm span { font-size: .875rem; color: var(--it-tinte-neben); }

.it-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.it-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.it-tabelle th, .it-tabelle td { text-align: left; font-weight: 400; padding: 16px 0; border-bottom: 1px solid var(--it-linie); vertical-align: top; }
.it-tabelle th { color: var(--it-neben); width: 42%; padding-right: 16px; }
.it-band.hell .it-tabelle th, .it-band.hell .it-tabelle td { border-bottom-color: var(--it-linie-hell); }
.it-band.hell .it-tabelle th { color: var(--it-tinte-neben); }

.it-zeit { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--it-linie); list-style: none; margin: 0; padding: 0; }
.it-zeit li { padding: 22px 24px 0 0; }
.it-zeit h3 { font-size: 1.2rem; margin: 12px 0 6px; }
.it-zeit p { color: var(--it-neben); font-size: 1rem; }

.it-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--it-linie); }
.it-liste li { padding: 18px 0; border-bottom: 1px solid var(--it-linie); display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px; }
.it-liste b { display: block; font-weight: 600; margin-bottom: 4px; }
.it-liste span { color: var(--it-neben); }
.it-band.hell .it-liste, .it-band.hell .it-liste li { border-color: var(--it-linie-hell); }
.it-band.hell .it-liste span { color: var(--it-tinte-neben); }

.it-cta { background: var(--it-blau); color: #fff; padding: clamp(48px, 7vw, 72px) 0; }
.it-cta .huelle { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.it-cta h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 22ch; }
.it-cta p { color: #DBE9FF; margin-top: 10px; font-size: .95rem; }
.it-cta p a { color: #fff; }
.it-cta .it-knopf { background: #fff; color: #0040A8; }
.it-cta .it-knopf:hover, .it-cta .it-knopf:focus-visible { background: #E6F0FF; color: #0040A8; }
.it-hinweis { font-size: .875rem; color: var(--it-neben); margin-top: 24px; }

/* the contact band from bauen.py on navy pages */
.it-seite .it-kontakt-band { background: var(--it-band); }

.bereich-it a:focus-visible, .bereich-it button:focus-visible { outline: 2px solid var(--it-akzent); outline-offset: 2px; }

@media (max-width: 900px) {
  .it-held .huelle, .it-zwei, .it-schirme { grid-template-columns: 1fr; gap: 28px; }
  .it-held .it-text { padding-bottom: 0; }
  .it-reihe, .it-zeit { grid-template-columns: 1fr; }
  .it-reihe > a, .it-reihe > div { border-right: 0; border-bottom: 1px solid var(--it-linie); padding: 24px 0; }
  .it-cta .huelle { flex-direction: column; align-items: flex-start; }
}
/* mobile quick bar: the main action of the IT area in its blue */
.bereich-it .schnellleiste .knopf.signal { background: var(--it-blau); color: #fff; border-radius: 4px; }
/* the way back keeps its readable anthracite on orange (the navy menu colour must not reach it) */
.bereich-it .navi > a.bereich-knopf.zu-druck, .bereich-it .kopfleiste .bereich-knopf.zu-druck { color: #202527; }
/* plan §7.3 (Kontrast a.zu-druck): the navy hover of the IT menu must not reach the orange way back, it fell to 1.01:1 */
.bereich-it .navi > a.bereich-knopf.zu-druck:hover, .bereich-it .navi > a.bereich-knopf.zu-druck:focus-visible { background: #ffa033; color: #202527; }
.bereich-it .kopfleiste .sprachwahl { background: transparent; border-color: var(--it-linie); color: var(--it-text); }
.it-seite .it-band:not(.hell) .it-hinweis a { color: var(--it-akzent); }
.it-seite .it-cta p a { color: #fff; }
.it-seite .it-pfad a { color: var(--it-neben); }
.bereich-it .schnellleiste { background: var(--it-grund); border-top-color: var(--it-linie); }
.bereich-it .schnellleiste .knopf.rahmen { background: var(--it-panel); border-color: var(--it-linie); color: var(--it-text); }
/* the contact card keeps its light card colours inside the navy page */
.it-seite .it-kontakt, .it-seite .it-kontakt h2 { color: #202527; }
.it-seite .it-kontakt .ap-text p { color: #595E66; }

/* ---------- W-IT2 (Stanislav 31.10.2026: „ein bisschen zu dunkel und strukturierter bitte“) ----------
   Light ground like SAP Horizon "Morning": white and light grey pages, navy only for header, footer and the one
   band .it-band.navy; #0070F2 stays the action colour. The page tokens are redefined on .it-seite, so every
   block above follows. Contrast: #1D2D3E on #FFFFFF 14.0:1, #475E75 on #FFFFFF 6.6:1 and on #F5F6F7 6.1:1,
   #0058C0 on #FFFFFF 6.0:1 (links, numbers), white on #0070F2 4.6:1 (buttons). */
.it-seite {
  --it-grund: #FFFFFF; --it-band: #F5F6F7; --it-panel: #FFFFFF; --it-linie: #D5DAE1;
  --it-text: #1D2D3E; --it-neben: #475E75; --it-akzent: #0058C0; --it-blau-zart: #EAF2FE;
}
.it-held { background: var(--it-band); }
.it-fenster { background: #fff; }
.it-fenster .it-leiste { background: var(--it-band); }
.it-fenster .it-leiste i { background: #B8C2CE; }
.it-knopf.rand { border-color: #8396AB; }
.it-knopf.rand:hover, .it-knopf.rand:focus-visible { border-color: var(--it-blau); color: var(--it-blau-dunkel); }
.it-band.navy {
  --it-grund: #0E1A28; --it-linie: #2A3B50; --it-text: #FFFFFF; --it-neben: #A9B4C2; --it-akzent: #4DB1FF;
  background: var(--it-grund); color: var(--it-text);
}
.it-seite a:focus-visible { outline-color: var(--it-blau); }

/* jump links under the hero */
.it-sprung { border-bottom: 1px solid var(--it-linie); background: #fff; }
.it-sprung .huelle { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.it-sprung a { flex: none; padding: 16px 0 14px; font-size: .95rem; font-weight: 500; color: var(--it-neben); text-decoration: none; border-bottom: 2px solid transparent; }
.it-sprung a:hover, .it-sprung a:focus-visible { color: var(--it-text); border-bottom-color: var(--it-blau); }
.it-seite section[id] { scroll-margin-top: 90px; }

/* the four services as a grid: symbol, sentence, price, link */
.it-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.it-karte { display: flex; flex-direction: column; padding: 28px 24px; border: 1px solid var(--it-linie); border-radius: 4px; background: #fff; color: inherit; text-decoration: none; }
.it-karte:hover, .it-karte:focus-visible { border-color: var(--it-blau); }
.it-symbol { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 4px; background: var(--it-blau-zart); color: var(--it-akzent); margin-bottom: 20px; }
.it-symbol svg { width: 22px; height: 22px; }
.it-karte h3 { font-size: 1.25rem; margin-bottom: 8px; }
.it-karte p { color: var(--it-neben); font-size: 1rem; margin-bottom: 20px; }
.it-karte .it-preis { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--it-linie); }
.it-mehr { display: inline-block; margin-top: 16px; font-weight: 600; font-size: .95rem; color: var(--it-akzent); }

/* service page: problem in three short points */
.it-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.it-drei li { padding: 24px; border: 1px solid var(--it-linie); border-radius: 4px; background: #fff; }
.it-drei b { display: block; font-size: 1.1rem; font-weight: 600; margin: 10px 0 6px; }
.it-drei span { color: var(--it-neben); font-size: 1rem; }

/* functions: two columns with a check mark */
.it-funktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--it-linie); }
.it-funktionen li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--it-linie); }
.it-funktionen svg { width: 20px; height: 20px; color: var(--it-akzent); margin-top: 3px; }
.it-funktionen b { display: block; font-weight: 600; }
.it-funktionen span { color: var(--it-neben); font-size: .95rem; }

/* price block: the "from" price left, what is included as a table right */
.it-preisblock { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.it-preisgross { font: 600 clamp(2rem, 3.6vw, 2.8rem)/1.1 var(--text); letter-spacing: -.02em; margin: 14px 0 6px; }
.it-preisgross small { display: block; font-size: 1rem; font-weight: 500; color: var(--it-neben); margin-top: 8px; letter-spacing: 0; }

@media (max-width: 900px) {
  .it-raster, .it-drei, .it-funktionen, .it-preisblock { grid-template-columns: 1fr; gap: 16px; }
  .it-funktionen { gap: 0; }
  .it-sprung .huelle { gap: 20px; }
}
.it-mehr-block { padding-top: 48px; }
.it-mehr-block details summary { cursor: pointer; font-weight: 600; color: var(--it-akzent); }

/* W-IT-ANFRAGE (Stanislav 02.11.2026): the two request buttons stand out, films in the flow, form on the page */
.it-knopf.voll.it-schein { outline: 3px solid rgba(0, 112, 242, .28); outline-offset: 3px; }
.it-knopf.it-hellblau { background: rgba(0, 112, 242, .1); border: 1px solid var(--it-blau); color: var(--it-blau-dunkel); }
.it-knopf.it-hellblau:hover, .it-knopf.it-hellblau:focus-visible { background: rgba(0, 112, 242, .18); color: var(--it-blau-dunkel); }
.it-filme { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.it-film { margin: 0; border: 1px solid var(--it-linie-hell); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.it-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0E1A28; }
.it-film figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; color: var(--it-tinte); flex-wrap: wrap; }
.it-film figcaption span { display: block; color: var(--it-tinte-neben); font-size: .9rem; margin-top: 2px; }
.it-film-einzel { max-width: 860px; margin: 0 0 36px; }
@media (max-width: 860px) { .it-filme { grid-template-columns: 1fr; } }

/* Power Platform & Excel (digital/power-platform.html, 03.11.2026): one colour accent per tool,
   taken from the product colours; own icons, no Microsoft logos (trademark). */
.pp-bi { --pp: #F2C811; --pp-text: #6B5600; }
.pp-apps { --pp: #742774; --pp-text: #742774; }
.pp-auto { --pp: #0066FF; --pp-text: #0052CC; }
.pp-excel { --pp: #217346; --pp-text: #1A5C38; }
.pp-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.pp-karte { background: #fff; border: 1px solid var(--it-linie-hell); border-top: 4px solid var(--pp); border-radius: 10px; padding: 22px; color: var(--it-tinte); }
.pp-karte h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.pp-karte p { color: var(--it-tinte-neben); font-size: .95rem; line-height: 1.55; margin: 0 0 12px; }
.pp-karte p b { color: var(--it-tinte); }
.pp-karte ul { margin: 0; padding-left: 18px; color: var(--it-tinte-neben); font-size: .9rem; line-height: 1.6; }
.pp-zeichen { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--pp); }
.pp-zeichen svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-bi .pp-zeichen svg { stroke: #1D2D3E; }
.pp-bi .pp-zeichen svg rect { fill: #1D2D3E; stroke: none; }
.pp-demos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.pp-demo { margin: 0; background: #fff; border: 1px solid var(--it-linie-hell); border-radius: 12px; padding: 18px; color: var(--it-tinte); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pp-demo figcaption { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.pp-chip { font: 700 .72rem/1 var(--mono, monospace); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 5px; background: var(--pp); color: #fff; }
.pp-bi .pp-chip { color: #1D2D3E; }
.pp-hinweis { margin: 0; font-size: .82rem; color: var(--it-tinte-neben); }
.pp-fuss { margin: 20px 0 0; font-size: .78rem; color: var(--it-neben); max-width: 80ch; }
.pp-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-filter button, .pp-knopf { font: 600 .85rem/1 inherit; padding: 9px 12px; min-height: 36px; border-radius: 6px; border: 1px solid var(--it-linie-hell); background: #fff; color: var(--it-tinte); cursor: pointer; }
.pp-filter button[aria-pressed="true"] { background: var(--pp); border-color: var(--pp); color: #1D2D3E; }
.pp-knopf { align-self: flex-start; background: var(--pp); border-color: var(--pp); color: #fff; }
.pp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-kpis div { background: #FFF9DB; border-radius: 8px; padding: 10px; }
.pp-kpis span { display: block; font-size: .75rem; color: var(--it-tinte-neben); }
.pp-kpis b { font-size: 1.25rem; }
.pp-balken { display: flex; flex-direction: column; gap: 6px; }
.pp-balken-zeile { display: grid; grid-template-columns: 110px 1fr 52px; gap: 8px; align-items: center; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; color: var(--it-tinte); text-align: left; }
.pp-balken-zeile.blass { opacity: .35; }
.pp-name { font-size: .82rem; }
.pp-spur { height: 16px; background: #F1F2F4; border-radius: 4px; overflow: hidden; }
.pp-spur i { display: block; height: 100%; background: var(--pp); border-radius: 4px; transition: width .3s; }
.pp-wert { font: 600 .82rem/1 var(--mono, monospace); text-align: right; }
.pp-handy { align-self: center; width: min(280px, 100%); border: 8px solid #1D2D3E; border-radius: 26px; overflow: hidden; background: #FAF7FB; }
.pp-handy-kopf { background: var(--pp); color: #fff; font-weight: 700; padding: 12px 14px; }
.pp-form { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
.pp-form label { font-size: .78rem; color: var(--it-tinte-neben); margin-top: 6px; }
.pp-form select, .pp-form input, .pp-tabelle input, .pp-tabelle select { font: inherit; font-size: 16px; padding: 8px; border: 1px solid var(--it-linie-hell); border-radius: 6px; background: #fff; width: 100%; box-sizing: border-box; }
.pp-form button { margin-top: 10px; font: 700 .95rem/1 inherit; min-height: 44px; border: 0; border-radius: 8px; background: var(--pp); color: #fff; cursor: pointer; }
.pp-liste { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 6px; max-height: 150px; overflow: auto; }
.pp-liste li { background: #fff; border-left: 3px solid var(--pp); border-radius: 6px; padding: 8px 10px; font-size: .82rem; }
.pp-liste span { display: block; color: var(--it-tinte-neben); }
.pp-flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-flow li { position: relative; border: 1px solid var(--it-linie-hell); border-left: 4px solid var(--it-linie-hell); border-radius: 8px; padding: 10px 12px 10px 38px; font-size: .88rem; transition: border-color .2s, background .2s; }
.pp-flow li::before { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--it-linie-hell); box-sizing: border-box; }
.pp-flow li + li::after { content: ""; position: absolute; left: 19px; top: -11px; width: 2px; height: 10px; background: var(--it-linie-hell); }
.pp-flow li span { display: block; color: var(--it-tinte-neben); font-size: .8rem; }
.pp-flow li.fertig { border-left-color: var(--pp); background: #F0F6FF; }
.pp-flow li.fertig::before { background: var(--pp); border-color: var(--pp); }
.pp-flow li.uebersprungen { opacity: .45; }
.pp-formel { display: flex; align-items: center; gap: 8px; border: 1px solid var(--it-linie-hell); border-radius: 6px; padding: 8px 10px; font-size: .82rem; min-width: 0; }
.pp-formel span { font: italic 700 .85rem/1 serif; color: var(--pp-text); }
.pp-formel code { font: .8rem/1.3 var(--mono, monospace); overflow-wrap: anywhere; }
.pp-tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pp-tabelle th { background: #F1F2F4; color: var(--it-tinte-neben); font-weight: 600; font-size: .75rem; padding: 4px 6px; border: 1px solid var(--it-linie-hell); }
.pp-tabelle td { border: 1px solid var(--it-linie-hell); padding: 4px 6px; }
.pp-tabelle thead th:first-child, .pp-tabelle tbody th { width: 28px; }
.pp-zelle { font: 600 .88rem/1.2 var(--mono, monospace); cursor: pointer; }
.pp-zelle.aktiv, .pp-zelle:focus { outline: 2px solid var(--pp); outline-offset: -2px; }
.pp-trend-kopf { font-size: .78rem; color: var(--it-tinte-neben); margin-top: 4px; }
.pp-trend { display: flex; align-items: flex-end; gap: 14px; height: 130px; border-bottom: 1px solid var(--it-linie-hell); padding: 0 4px; }
.pp-trend-saeule { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: .75rem; color: var(--it-tinte-neben); }
.pp-trend-saeule i { display: block; width: 100%; max-width: 70px; background: #F7E28A; border-radius: 4px 4px 0 0; transition: height .3s; }
.pp-trend-saeule.aktiv i { background: var(--pp); }
.pp-trend-wert { font: 600 .75rem/1 var(--mono, monospace); color: var(--it-tinte); }
@media (max-width: 1000px) { .pp-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pp-karten, .pp-demos { grid-template-columns: 1fr; } .pp-balken-zeile { grid-template-columns: 96px 1fr 48px; } }

/* Realistic look (03.11.2026): report canvas, canvas app, flow designer, workbook. Own shapes, no product logos. */
.pp-demo { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
.pbi, .paf, .xl { border: 1px solid #E1DFDD; border-radius: 6px; overflow: hidden; background: #fff; }
.pbi-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 12px; background: #252423; color: #fff; font-size: .8rem; }
.pbi-datei { font-weight: 600; }
.pbi-menue { color: #C8C6C4; font-size: .74rem; }
.pbi-rumpf { display: flex; background: #EAEAEA; }
.pbi-leinwand { flex: 1; min-width: 0; padding: 10px; display: grid; gap: 8px; }
.pbi-filter { width: 26px; background: #fff; border-left: 1px solid #E1DFDD; display: flex; justify-content: center; padding-top: 10px; }
.pbi-filter span { writing-mode: vertical-rl; font-size: .72rem; color: #605E5C; }
.pbi-slicer { display: flex; align-items: center; gap: 4px; background: #fff; padding: 6px 8px; }
.pbi-slicer span { font-size: .74rem; color: #605E5C; margin-right: 6px; }
.pbi-slicer button { font: 600 .78rem/1 inherit; padding: 6px 10px; border: 1px solid #C8C6C4; background: #fff; color: #252423; cursor: pointer; border-radius: 2px; }
.pbi-slicer button[aria-pressed="true"] { background: #252423; border-color: #252423; color: #fff; }
.pbi-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pbi-karte { background: #fff; padding: 10px 8px; text-align: center; }
.pbi-karte b { display: block; font: 600 1.45rem/1.1 inherit; color: #252423; }
.pbi-karte span { font-size: .72rem; color: #605E5C; }
.pbi-visual { background: #fff; padding: 8px 10px 10px; }
.pbi-titel { font-size: .78rem; color: #252423; margin-bottom: 6px; }
.pbi-seiten { display: flex; gap: 2px; background: #F3F2F1; border-top: 1px solid #E1DFDD; padding: 0 8px; font-size: .74rem; }
.pbi-seiten span { padding: 6px 10px; color: #605E5C; }
.pbi-seiten span.aktiv { background: #fff; color: #252423; font-weight: 600; border-bottom: 2px solid #F2C811; }
.pp-bi .pp-spur { background: transparent; border-radius: 0; }
.pp-bi .pp-spur i { background: #118DFF; border-radius: 0; }
.pp-bi .pp-trend { height: 110px; }
.pp-bi .pp-trend-saeule i { background: #9DD1FF; border-radius: 0; }
.pp-bi .pp-trend-saeule.aktiv i { background: #118DFF; }
.pp-bi .pp-name, .pp-bi .pp-wert { font: .76rem/1 inherit; }
.pa-screen[hidden] { display: none; }
.pa-kopf { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; background: #742774; color: #fff; font-weight: 600; min-height: 48px; }
.pa-kopf > span:first-child { grid-column: 1 / 3; padding-left: 14px; }
#app-form-screen .pa-kopf > span:nth-child(2) { grid-column: auto; padding: 0; text-align: center; }
.pa-icon { background: none; border: 0; color: #fff; font: 400 1.6rem/1 inherit; cursor: pointer; min-height: 44px; }
.pa-suche { margin: 10px 12px; padding: 8px 10px; border: 1px solid #C8C6C4; border-radius: 2px; color: #A19F9D; font-size: .82rem; background: #fff; }
.pa-galerie { list-style: none; margin: 0; padding: 0; background: #fff; }
.pa-galerie li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #EDEBE9; font-size: .84rem; }
.pa-galerie li span { display: block; color: #605E5C; font-size: .78rem; }
.pa-galerie li i { font-style: normal; color: #742774; font-size: 1.3rem; }
.pa-galerie li.neu { background: #F8EEF8; }
.pp-apps .pp-form select, .pp-apps .pp-form input { border-radius: 2px; border-color: #8A8886; }
.pp-apps .pp-form button { border-radius: 2px; }
.pa-foto { margin-top: 8px; border: 1px dashed #8A8886; border-radius: 2px; padding: 12px; text-align: center; color: #605E5C; font-size: .8rem; }
.paf { background: #FAF9F8; padding-bottom: 10px; }
.paf-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #E1DFDD; font-size: .82rem; font-weight: 600; }
.paf-kopf .pp-knopf { min-height: 32px; padding: 6px 12px; border-radius: 2px; }
.paf-banner { margin: 10px 12px 0; padding: 8px 10px; background: #DFF6DD; border-left: 3px solid #107C10; font-size: .8rem; color: #0B5A0B; }
.paf-banner[hidden] { display: none; }
.paf .pp-flow { padding: 12px 12px 0; gap: 18px; align-items: center; }
.paf .pp-flow > li { width: 100%; max-width: 360px; }
.pp-flow li.paf-karte, .paf-zweige .paf-karte { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid #E1DFDD; border-left: 1px solid #E1DFDD; border-radius: 4px; padding: 8px 10px; box-sizing: border-box; font-size: .82rem; position: relative; }
.pp-flow li.paf-karte::before, .paf-zweige .paf-karte::before { content: none; }
.paf-karte > i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: var(--k); color: #fff; font: 700 .8rem/1 inherit; font-style: normal; }
.paf-karte span { display: block; color: #605E5C; font-size: .74rem; }
.paf-karte em { font-style: normal; }
.paf-karte.fertig { border-color: #107C10; }
.pp-flow .paf-karte.fertig::before { content: "✓"; position: absolute; left: auto; right: 8px; top: 8px; border: 0; width: 18px; height: 18px; border-radius: 50%; background: #107C10; color: #fff; font-size: .7rem; display: grid; place-items: center; }
.paf-karte.uebersprungen { opacity: .45; }
.pp-flow li + li::after { left: 50%; top: -17px; height: 16px; }
.paf-zweige { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: none; border: 0; padding: 0; }
.paf-zweige > div { border: 1px solid #E1DFDD; border-radius: 4px; background: #fff; padding: 0 0 8px; }
.paf-zweige > div > span { display: block; padding: 4px 8px; font-size: .72rem; font-weight: 600; border-radius: 4px 4px 0 0; }
.paf-ja > span { background: #DFF6DD; color: #0B5A0B; }
.paf-nein > span { background: #FDE7E9; color: #A4262C; }
.paf-zweige .paf-karte { margin: 8px 8px 0; }
.paf-leer { margin: 8px; font-size: .76rem; color: #605E5C; }
.xl-band { display: flex; gap: 2px; background: #107C41; padding: 0 8px; font-size: .76rem; }
.xl-band span { padding: 6px 10px; color: #E6F2EA; }
.xl-band span.aktiv { background: #fff; color: #107C41; font-weight: 600; border-radius: 3px 3px 0 0; margin-top: 4px; }
.xl .pp-formel { border: 0; border-bottom: 1px solid #E1DFDD; border-radius: 0; }
.xl-name { font: .78rem/1 inherit; border-right: 1px solid #E1DFDD; padding-right: 8px; min-width: 28px; }
.xl .pp-tabelle th { background: #F3F2F1; }
.pp-excel .pp-zelle.aktiv, .pp-excel .pp-zelle:focus { outline: 2px solid #107C41; }
.xl-blaetter { display: flex; gap: 2px; background: #F3F2F1; border-top: 1px solid #E1DFDD; padding: 0 8px; font-size: .74rem; }
.xl-blaetter span { padding: 6px 10px; color: #605E5C; }
.xl-blaetter span.aktiv { background: #fff; color: #107C41; font-weight: 600; border-bottom: 2px solid #107C41; }
.pp-beispiele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.pp-beispiele article { background: #fff; border: 1px solid var(--it-linie-hell); border-radius: 10px; padding: 20px; color: var(--it-tinte); }
.pp-beispiele h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.pp-beispiele p { margin: 0; color: var(--it-tinte-neben); font-size: .92rem; line-height: 1.55; }
.pp-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-tags b { font: 700 .68rem/1 var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; padding: 4px 6px; border-radius: 4px; color: #fff; }
.pp-tags .t-bi { background: #F2C811; color: #1D2D3E; }
.pp-tags .t-apps { background: #742774; }
.pp-tags .t-auto { background: #0066FF; }
.pp-tags .t-excel { background: #217346; }
@media (max-width: 1000px) { .pp-beispiele { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pp-beispiele, .paf-zweige { grid-template-columns: 1fr; } .pbi-menue { display: none; } }
.paf .pp-flow > li { max-width: 100%; }
.pp-flow li.paf-karte, .paf-zweige .paf-karte { padding-right: 34px; }
.pp-flow li.paf-zweige::before { content: none; }
.paf-zweige { grid-template-columns: 1.4fr 1fr; }
.pp-bi .pp-trend { padding-top: 18px; }
.pp-flow li.paf-zweige { border: 0; background: none; padding: 0; }
/* list without number column (first call and Power pages): the bold lead word runs into the sentence */
.it-liste.schlicht li { display: block; }
.it-liste.schlicht b { display: inline; margin: 0; }

/* Stanislav 04.11.2026: on navy the Support button takes the light IT blue so it stands apart from the blue request button
   (#0E1A28 on #4DB1FF 7.6 : 1); the quick bar keeps one line on 390 px */
.bereich-it .berater-knopf.in-leiste { background: var(--it-akzent); border-color: var(--it-akzent); color: var(--it-grund); box-shadow: none; }
.bereich-it .berater-knopf.in-leiste small { background: rgba(14, 26, 40, .14); color: var(--it-grund); }
.bereich-it .berater-knopf.in-leiste:hover, .bereich-it .berater-knopf.in-leiste:focus-visible { background: #7CC6FF; border-color: #7CC6FF; }

/* Stanislav 04.11.2026: „bei IT Kostenlos anfragen dann bitte Orange für Kontrast“ – the request action in the
   header, the phone quick bar and the filled primary buttons take the logo orange with dark ink (8.9 : 1); blue
   stays for links, menus and secondary actions */
.bereich-it .kopf-anfrage, .bereich-it .navi > a.kopf-anfrage,
.bereich-it .schnellleiste .knopf.signal, .bereich-it .it-knopf.voll { background: var(--signal); color: var(--tinte); border-color: var(--signal); }
.bereich-it .kopf-anfrage:hover, .bereich-it .kopf-anfrage:focus-visible, .bereich-it .navi > a.kopf-anfrage:hover, .bereich-it .navi > a.kopf-anfrage:focus-visible,
.bereich-it .schnellleiste .knopf.signal:hover, .bereich-it .it-knopf.voll:hover, .bereich-it .it-knopf.voll:focus-visible { background: #ffa033; color: var(--tinte); border-color: #ffa033; }
.bereich-it .kopf-anfrage svg, .bereich-it .it-knopf.voll svg { stroke: currentColor; }
/* …and so the request is the only filled orange in the header, the way back to 3D printing is an orange outline (#FF9100 on #0E1A28 7.4 : 1) */
.bereich-it .bereich-knopf.zu-druck, .bereich-it .navi > a.bereich-knopf.zu-druck, .bereich-it .kopfleiste a.bereich-knopf.zu-druck { background: transparent; color: var(--signal); border: 1.5px solid var(--signal); box-shadow: none; }
.bereich-it .bereich-knopf.zu-druck:hover, .bereich-it .bereich-knopf.zu-druck:focus-visible, .bereich-it .navi > a.bereich-knopf.zu-druck:hover, .bereich-it .kopfleiste a.bereich-knopf.zu-druck:hover { background: rgba(255, 145, 0, .12); color: var(--signal); }

/* Förder-Finder (foerderung.json, Stanislav 04.11.2026): status chips by colour and word, never by colour alone */
.ff-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 20px; }
.ff-filter button { font: 600 .92rem/1 var(--text); padding: 10px 14px; min-height: 44px; border: 1px solid var(--it-linie-hell); border-radius: 4px; background: #fff; color: var(--it-tinte); cursor: pointer; }
.ff-filter button[aria-pressed="true"] { background: var(--it-tinte); border-color: var(--it-tinte); color: #fff; }
.ff-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ff-karte { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--it-linie-hell); border-radius: 4px; background: #fff; color: var(--it-tinte); text-decoration: none; }
.ff-karte:hover, .ff-karte:focus-visible { border-color: var(--it-blau); }
.ff-karte[hidden] { display: none; }
.ff-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: .8rem; color: var(--it-tinte-neben); }
.ff-karte strong { font-size: 1.08rem; line-height: 1.25; }
.ff-hoehe { font-weight: 700; color: var(--it-tinte); }
.ff-text { font-size: .95rem; color: var(--it-tinte-neben); line-height: 1.5; }
.ff-fuss { margin-top: auto; padding-top: 6px; font-size: .8rem; color: var(--it-tinte-neben); border-top: 1px solid var(--it-linie-hell); }
.ff-status { flex: none; font: 700 .72rem/1 var(--text); padding: 5px 8px; border-radius: 3px; letter-spacing: .02em; }
.ff-offen, .ff-kostenlos { background: #e3f4ea; color: #145c32; }
.ff-los { background: #fff3d6; color: #7a4b00; }
.ff-pausiert, .ff-geschlossen { background: #eceff3; color: #3d4b5c; }
.ff-leer { margin-top: 12px; }
.ff-beendet { margin-top: 18px; }

/* Power demos, richer (Stanislav 04.11.2026: „anschaulicher und komplexer“) */
.pbi-seite[hidden], .xl-blatt[hidden] { display: none; }
.pbi-seite { display: grid; gap: 8px; }
.pbi-karte em { font-style: normal; font-weight: 600; }
.pbi-karte em.gut { color: #107C10; }
.pbi-karte em.schlecht { color: #A4262C; }
.pbi-seiten button { font: inherit; padding: 6px 10px; color: #605E5C; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; min-height: 32px; }
.pbi-seiten button[aria-selected="true"] { background: #fff; color: #252423; font-weight: 600; border-bottom-color: #F2C811; }
button.pp-trend-saeule { background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.pbi-pareto { display: flex; flex-direction: column; gap: 6px; }
.pbi-pareto-zeile { display: grid; grid-template-columns: 120px 1fr 44px 44px; gap: 8px; align-items: center; font-size: .76rem; }
.pbi-pareto-zeile .pp-spur { height: 14px; background: transparent; }
.pbi-pareto-zeile .pp-spur i { background: #118DFF; border-radius: 0; }
.pbi-kum { font: 600 .74rem/1 var(--mono, monospace); color: #E66C37; text-align: right; }
.pbi-satz { margin: 0; font-size: .82rem; line-height: 1.5; color: #252423; }
.pbi-matrix { width: 100%; border-collapse: collapse; font-size: .76rem; }
.pbi-matrix th { text-align: left; font-weight: 600; color: #605E5C; border-bottom: 1px solid #C8C6C4; padding: 4px 6px; }
.pbi-matrix td { padding: 6px; border-bottom: 1px solid #EDEBE9; }
.pbi-matrix tr.blass { opacity: .35; }
.pbi-ampel { display: inline-block; min-width: 56px; padding: 3px 6px; border-radius: 2px; font-weight: 600; text-align: right; }
.pbi-ampel.gruen { background: #DFF6DD; color: #0B5A0B; }
.pbi-ampel.gelb { background: #FFF4CE; color: #7A4B00; }
.pbi-ampel.rot { background: #FDE7E9; color: #A4262C; }
.pp-handy { position: relative; }
.pa-tabs { display: flex; gap: 4px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #EDEBE9; }
.pa-tabs button { flex: 1; font: 600 .8rem/1 inherit; padding: 8px; min-height: 36px; border: 1px solid #C8C6C4; background: #fff; color: #323130; cursor: pointer; border-radius: 2px; }
.pa-tabs button[aria-pressed="true"] { background: #742774; border-color: #742774; color: #fff; }
.pa-galerie li { padding: 0; }
.pa-galerie li button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; min-height: 48px; }
.pa-galerie li button > div { flex: 1; min-width: 0; }
.pa-status { font-style: normal; font: 600 .68rem/1 inherit; padding: 4px 6px; border-radius: 2px; white-space: nowrap; }
.s-offen { background: #FDE7E9; color: #A4262C; }
.s-in-Arbeit { background: #FFF4CE; color: #7A4B00; }
.s-erledigt { background: #DFF6DD; color: #0B5A0B; }
.pa-detail { display: grid; grid-template-columns: 90px 1fr; gap: 8px 10px; margin: 0; padding: 14px; background: #fff; font-size: .84rem; }
.pa-detail dt { color: #605E5C; }
.pa-detail dd { margin: 0; font-weight: 600; }
.pa-aktionen { padding: 0 14px 14px; background: #fff; }
.pa-aktionen button, .pa-scan { width: 100%; font: 700 .9rem/1 inherit; min-height: 44px; border: 0; border-radius: 2px; background: #742774; color: #fff; cursor: pointer; }
.pa-aktionen button[hidden] { display: none; }
.pa-scan { background: #fff; color: #742774; border: 1px solid #742774; margin-bottom: 4px; }
button.pa-foto { width: 100%; background: #fff; font: inherit; cursor: pointer; }
button.pa-foto[aria-pressed="true"] { border-style: solid; border-color: #107C10; color: #107C10; }
.pa-toast { position: absolute; left: 12px; right: 12px; bottom: 12px; background: #323130; color: #fff; border-radius: 4px; padding: 10px 12px; font-size: .82rem; text-align: center; }
.pa-toast[hidden] { display: none; }
.paf-karte.wartet { border-color: #F2C811; outline: 2px solid #FFF4CE; }
.paf-ja .paf-karte + .paf-karte, .paf-ja .paf-frage + .paf-karte { margin-top: 8px; }
.paf-frage { margin: 8px 8px 0; padding: 8px; border: 1px solid #F2C811; background: #FFFBEA; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .78rem; }
.paf-frage[hidden] { display: none; }
.paf-frage span { flex-basis: 100%; }
.paf-frage button { font: 600 .8rem/1 inherit; padding: 8px 12px; min-height: 36px; border-radius: 2px; border: 1px solid #0F6CBD; background: #0F6CBD; color: #fff; cursor: pointer; }
.paf-frage button + button { background: #fff; color: #A4262C; border-color: #A4262C; }
.paf-banner.aus { background: #FDE7E9; border-left-color: #A4262C; color: #A4262C; }
.paf-verlauf { margin: 12px 12px 0; background: #fff; border: 1px solid #E1DFDD; border-radius: 4px; padding: 8px 10px; font-size: .76rem; }
.paf-verlauf table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.paf-verlauf th { text-align: left; color: #605E5C; font-weight: 600; padding: 3px 4px; border-bottom: 1px solid #E1DFDD; }
.paf-verlauf td { padding: 4px; border-bottom: 1px solid #F3F2F1; }
.paf-ok { color: #107C10; font-weight: 600; }
.paf-ok.aus { color: #A4262C; }
.xl-diagramm { padding: 8px 10px 10px; border-top: 1px solid #E1DFDD; }
.xl-dtitel { font-size: .76rem; color: #605E5C; margin-bottom: 6px; }
.xl-saeulen { display: flex; align-items: flex-end; gap: 10px; height: 110px; border-bottom: 1px solid #C8C6C4; }
.xl-saeule { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-size: .7rem; color: #605E5C; }
.xl-saeule i { display: block; width: 100%; max-width: 44px; background: #9FD5B4; }
.xl-saeule.aktiv i { background: #217346; }
.xl-saeule b { font: 600 .72rem/1 var(--mono, monospace); color: #252423; }
.xl-notiz { margin: 8px 10px; font-size: .78rem; color: #605E5C; }
.xl-szenario td { text-align: right; }
.xl-gruen { background: #C6EFCE; color: #006100; }
.xl-gelb { background: #FFEB9C; color: #7A4B00; }
.xl-rot { background: #FFC7CE; color: #9C0006; }
.xl-blaetter button { font: inherit; padding: 6px 10px; color: #605E5C; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; min-height: 32px; }
.xl-blaetter button[aria-selected="true"] { background: #fff; color: #107C41; font-weight: 600; border-bottom-color: #107C41; }
@media (max-width: 520px) { .pbi-pareto-zeile { grid-template-columns: 92px 1fr 36px 38px; } .pbi-matrix th:nth-child(4), .pbi-matrix td:nth-child(4) { display: none; } }