/* ELCC — Erscheinungsbild nach dem SugarPool Executive Dashboard Design System.
   Tokens 1:1 aus design/sugarpool-design-system/tokens.css (D-034).

   Gestaltungsentscheidung D-036 („Marke ja, Status doppelt"):
   Farben, Typografie, Abstaende und Komponentenformen werden uebernommen —
   Statusinformationen aber NIEMALS allein ueber Farbe transportiert. Jeder
   Statuspunkt traegt zusaetzlich eine eigene Form/Fuellung, jede Freshness-
   Angabe einen Klartext. Damit bleiben die neun Connector-Zustaende auch in
   Graustufen und fuer farbfehlsichtige Betrachter unterscheidbar (WCAG 1.4.1).

   Keine externen Ressourcen (CSP): Inter wird lokal aus public/fonts/
   ausgeliefert. Keine style-Attribute in den Templates; rechnerische Werte
   kommen ueber CSS-Custom-Properties am Element. */

/* ---------- Schriften: Inter, lokal (latin + latin-ext) ---------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens (unveraendert aus tokens.css) ---------- */
:root{
/* Primary — SugarPool Indigo */
--sp-indigo-900:#232C52;--sp-indigo-800:#33407A;--sp-indigo-700:#47569E;--sp-indigo-500:#6B7BB8;--sp-indigo-300:#A9B3D6;--sp-indigo-150:#D5DAEA;--sp-indigo-75:#EBEEF5;
/* Ink (neutrals) */
--sp-ink-900:#171B26;--sp-ink-700:#3A4050;--sp-ink-600:#5A6172;--sp-ink-400:#8A90A0;--sp-ink-300:#B6BAC5;--sp-ink-200:#D7DAE0;--sp-ink-100:#E9EBEF;--sp-ink-50:#F5F6F8;
/* Semantic */
--sp-critical:#D2454A;--sp-critical-soft:#FBEDED;--sp-success:#2E9E6B;--sp-success-soft:#EAF6F0;--sp-warning:#E09A3C;--sp-warning-soft:#FBF3E6;--sp-info:#3D9C96;--sp-info-soft:#E9F5F4;
/* Data-viz */
--sp-viz-1:#47569E;--sp-viz-2:#8B97C6;--sp-viz-3:#C6CCE3;--sp-viz-4:#E4E7F0;--sp-viz-teal:#4CA6A0;--sp-viz-red:#D2454A;
/* Semantic aliases */
--surface-page:#F5F6F8;--surface-card:#FFFFFF;--surface-sidebar:#F9FAFB;--surface-inset:#F5F6F8;--surface-inverse:var(--sp-indigo-700);
--text-heading:var(--sp-ink-900);--text-body:var(--sp-ink-700);--text-secondary:var(--sp-ink-600);--text-muted:var(--sp-ink-400);--text-on-inverse:#FFFFFF;--text-label:var(--sp-ink-400);
--border-default:var(--sp-ink-100);--border-strong:var(--sp-ink-200);--border-focus:var(--sp-indigo-500);
--action-primary:var(--sp-indigo-700);--action-primary-hover:var(--sp-indigo-800);--action-primary-active:var(--sp-indigo-900);--action-selected-bg:#FFFFFF;--action-hover-bg:#EFF1F5;
--link:var(--sp-indigo-700);--link-hover:var(--sp-indigo-800);
}
:root{
--font-sans:'Inter',-apple-system,'Segoe UI',sans-serif;
--type-display:600 34px/1.2 var(--font-sans);
--type-kpi:600 30px/1.1 var(--font-sans);
--type-h2:600 20px/1.3 var(--font-sans);
--type-h3:600 16px/1.4 var(--font-sans);
--type-body:400 14px/1.55 var(--font-sans);
--type-body-strong:600 14px/1.55 var(--font-sans);
--type-small:400 13px/1.5 var(--font-sans);
--type-label:600 11px/1.3 var(--font-sans);
--label-tracking:0.09em;
--text-numeric:'tnum' 1;
}
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
--card-padding:24px;--card-gap:24px;--page-pad:32px;--sidebar-width:208px;
--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-full:999px;
--shadow-card:0 1px 2px rgba(23,27,38,.04);
--shadow-raised:0 4px 12px rgba(23,27,38,.08);
--shadow-fab:0 6px 16px rgba(23,27,38,.22);
--focus-ring:0 0 0 3px rgba(71,86,158,.25);
}

/* ---------- Barrierefreie Ableitungen (D-036) ----------
   Vier Token-Werte des Originalsystems erreichen auf hellem Grund nicht die
   geforderten Kontraste (gemessen: text-muted 2.95:1, warning 2.37:1,
   border-strong 1.40:1). Sie bleiben oben unveraendert erhalten; fuer Text,
   Statusgrafik und Bedienelement-Rahmen verwendet ELCC die folgenden, im
   gleichen Farbton abgedunkelten Ableitungen. Gemessene Werte in Klammern. */
:root{
--text-muted-aa:#6B7183;        /* 4.50:1 auf --surface-page (statt 2.95:1) */
--text-label-aa:#6B7183;        /* dito */
--sp-warning-aa:#CF8421;        /* 3.01:1 auf --surface-card (statt 2.37:1) */
--border-control:#8D95A7;       /* 3.00:1 — Rahmen von Eingabefeldern/Schaltern */
}

/* ---------- Basis ---------- */
:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: var(--type-body); background: var(--surface-page); color: var(--text-body); -webkit-font-smoothing: antialiased; }
.elcc-app { padding: var(--space-6); color: var(--text-body); }
.elcc-app a { color: var(--link); }
.elcc-app a:hover { color: var(--link-hover); }
.elcc-app .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.elcc-app .skip-link { position: absolute; left: -999px; top: 0; background: var(--action-primary); color: var(--text-on-inverse); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 50; }
.elcc-app .skip-link:focus { left: var(--space-2); top: var(--space-2); }
.elcc-app :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---------- Rahmen und Navigation ---------- */
.elcc-app .banner { border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font: var(--type-small); color: var(--text-secondary); box-shadow: var(--shadow-card); }
.elcc-app .shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); min-height: 700px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.elcc-app .side { background: var(--surface-sidebar); border-right: 1px solid var(--border-default); padding: var(--space-5) var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); }
.elcc-app .brand { font: var(--type-body-strong); color: var(--text-heading); padding: 0 var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-default); }
.elcc-app .brand small { display: block; font: var(--type-small); color: var(--text-muted-aa); margin-top: var(--space-1); }
.elcc-app .nav { display: flex; flex-direction: column; gap: 2px; }
.elcc-app .nav a { text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font: 500 13px/1.4 var(--font-sans); display: block; color: var(--text-secondary); }
.elcc-app .nav a:hover { background: var(--action-hover-bg); color: var(--text-heading); }
.elcc-app .nav a[aria-current="page"] { background: var(--action-primary); color: var(--text-on-inverse); font-weight: 600; }
.elcc-app .nav-divider { font: var(--type-label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-label-aa); padding: var(--space-3) var(--space-3) var(--space-1); border-top: 1px solid var(--border-default); margin-top: var(--space-2); }
.elcc-app .nav-later a { color: var(--text-muted-aa); font-weight: 400; }
.elcc-app .side-foot { margin-top: auto; padding: var(--space-3); border-top: 1px solid var(--border-default); color: var(--text-muted-aa); font: var(--type-small); }
.elcc-app .main { min-width: 0; display: flex; flex-direction: column; }
.elcc-app .top { border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-6); background: var(--surface-card); flex-wrap: wrap; }
.elcc-app .top-title { font: var(--type-h3); color: var(--text-heading); flex: 1; min-width: 120px; }
.elcc-app .scenario { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.elcc-app .scenario-label { font: var(--type-small); color: var(--text-muted-aa); }
.elcc-app .scenario-btn { border: 1px solid var(--border-control); background: var(--surface-card); border-radius: var(--radius-sm); padding: 7px var(--space-3); font: 500 12px/1 var(--font-sans); text-decoration: none; color: var(--text-secondary); }
.elcc-app .scenario-btn:hover { background: var(--action-hover-bg); color: var(--text-heading); }
.elcc-app .scenario-btn[aria-current="true"] { background: var(--action-primary); color: var(--text-on-inverse); border-color: var(--action-primary); }
.elcc-app .content { padding: var(--page-pad); overflow-x: hidden; background: var(--surface-page); flex: 1; }

/* ---------- Seitenkopf ---------- */
.elcc-app .head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.elcc-app .head h2 { font: var(--type-display); color: var(--text-heading); margin: 0 0 var(--space-1); }
.elcc-app .head p { margin: 0; color: var(--text-secondary); font: var(--type-body); max-width: 62ch; }
.elcc-app .fresh { margin-left: auto; border: 1px solid var(--border-strong); background: var(--surface-card); padding: 7px var(--space-3); border-radius: var(--radius-sm); font: 500 12px/1 var(--font-sans); color: var(--text-heading); white-space: nowrap; }

/* ---------- Raster und Karten ---------- */
.elcc-app .grid { display: grid; gap: var(--card-gap); margin-bottom: var(--card-gap); }
.elcc-app .c2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.elcc-app .c3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.elcc-app .c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.elcc-app .g2-1 { grid-template-columns: 2fr 1fr; align-items: start; }
.elcc-app .panel { border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md); padding: var(--card-padding); min-width: 0; box-shadow: var(--shadow-card); }
.elcc-app .panel h3 { margin: 0 0 var(--space-4); font: var(--type-h2); color: var(--text-heading); display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.elcc-app .panel h3 span { font: var(--type-small); color: var(--text-secondary); white-space: nowrap; }
.elcc-app .label { font: var(--type-label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-label-aa); }
.elcc-app .number { font: var(--type-kpi); color: var(--text-heading); margin: var(--space-2) 0 var(--space-1); font-feature-settings: var(--text-numeric); }
.elcc-app .sub { font: var(--type-small); color: var(--text-secondary); }

/* ---------- Listen und Zeilen ---------- */
.elcc-app .list { display: flex; flex-direction: column; gap: var(--space-3); }
.elcc-app .row { border-top: 1px solid var(--border-default); padding-top: var(--space-3); font: var(--type-body); }
.elcc-app .row:first-child { border-top: 0; padding-top: 0; }
.elcc-app .row-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.elcc-app .row-title { font: var(--type-body-strong); color: var(--text-heading); }
.elcc-app .tag { border: 1px solid var(--border-strong); background: var(--surface-card); border-radius: var(--radius-full); padding: 3px var(--space-2); font: 500 11px/1.3 var(--font-sans); color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }

/* Herkunftszeile: Quelle · Abrufzeit · Fakt/abgeleitet */
.elcc-app .evidence { font: var(--type-small); color: var(--text-muted-aa); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.elcc-app .tag-fact { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 1px 6px; font: var(--type-label); letter-spacing: .04em; color: var(--text-secondary); background: var(--surface-inset); }
/* abgeleitet: zusaetzlich gestrichelt — Unterscheidung ohne Farbe (D-036) */
.elcc-app .tag-derived { border: 1px dashed var(--sp-ink-300); border-radius: var(--radius-sm); padding: 1px 6px; font: var(--type-label); letter-spacing: .04em; color: var(--text-secondary); background: transparent; }

/* ---------- Statuspunkte: Farbe UND Form (D-036) ----------
   Die Form bleibt der primaere Unterscheidungstraeger; die Farbe ergaenzt sie.
   In Graustufen bleiben alle neun Zustaende auseinanderzuhalten. */
.elcc-app .dot { width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.elcc-app .dot-healthy { color: var(--sp-success); background: transparent; }
.elcc-app .dot-partial { color: var(--sp-warning-aa); background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.elcc-app .dot-stale { color: var(--sp-warning-aa); border-style: dashed; background: transparent; }
.elcc-app .dot-rate_limited { color: var(--sp-warning-aa); background: radial-gradient(currentColor 28%, transparent 30%); }
.elcc-app .dot-auth_error { color: var(--sp-critical); background: currentColor; }
.elcc-app .dot-hard_error { color: var(--sp-critical); background: currentColor; }
.elcc-app .dot-permission_gap { color: var(--sp-critical); background: currentColor; border-radius: 2px; }
.elcc-app .dot-not_configured { color: var(--sp-ink-400); border-style: dotted; background: transparent; }
.elcc-app .dot-disabled { color: var(--sp-ink-300); border-radius: 2px; background: transparent; }
.elcc-app .st-line { display: flex; align-items: center; gap: var(--space-2); font: var(--type-body); }

/* ---------- Rueckmeldungen ---------- */
.elcc-app .toast-flash { background: var(--sp-success-soft); color: var(--sp-ink-900); border: 1px solid var(--sp-success); border-left-width: 4px; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font: var(--type-body); margin-bottom: var(--space-4); }
.elcc-app .scenario-btn[data-done="true"] { background: var(--sp-success); color: var(--text-on-inverse); border-color: var(--sp-success); cursor: default; }

/* ---------- Quellenleiste ---------- */
.elcc-app .sourcebar { border-top: 1px solid var(--border-default); margin-top: var(--space-6); padding-top: var(--space-4); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.elcc-app .sourcebar strong { font: var(--type-label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-label-aa); margin-right: var(--space-1); }
.elcc-app .source-pill { font: var(--type-small); border: 1px dashed var(--sp-ink-300); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); }

/* ---------- Leerzustaende ---------- */
.elcc-app .empty { border: 1px dashed var(--border-strong); background: var(--surface-inset); padding: var(--space-6); text-align: center; color: var(--text-secondary); font: var(--type-body); border-radius: var(--radius-md); }
.elcc-app .empty strong { display: block; color: var(--text-heading); font: var(--type-body-strong); margin-bottom: var(--space-1); }

/* ---------- Zeitstrahl ---------- */
.elcc-app .timeline { display: grid; grid-template-columns: 52px 1fr; gap: var(--space-2); font: var(--type-small); align-items: start; }
.elcc-app .event { border: 1px solid var(--border-default); border-left: 4px solid var(--sp-viz-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-body); }
.elcc-app .event.conflict { border-left-color: var(--sp-critical); border-left-style: dashed; }
.elcc-app .conflict-box { border: 1px dashed var(--sp-critical); background: var(--sp-critical-soft); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-3); font: var(--type-small); color: var(--sp-ink-900); }

/* ---------- Ausblick-Kennzeichnung ---------- */
.elcc-app .later-banner { border: 1px dashed var(--sp-indigo-300); background: var(--sp-indigo-75); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font: var(--type-body); color: var(--sp-ink-700); }

/* ---------- Formulare ---------- */
.elcc-app .field { margin-bottom: var(--space-4); }
.elcc-app .field label { display: block; font: var(--type-label); letter-spacing: var(--label-tracking); text-transform: uppercase; color: var(--text-label-aa); margin-bottom: var(--space-2); }
.elcc-app .field input[type=text] { width: 100%; border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font: var(--type-body); background: var(--surface-card); color: var(--text-body); }
.elcc-app .field input[type=text]:focus { border-color: var(--border-focus); outline: none; box-shadow: var(--focus-ring); }
.elcc-app .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.elcc-app .actions button, .elcc-app .actions a.btn { border: 1px solid var(--border-control); background: var(--surface-card); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font: 500 13px/1.4 var(--font-sans); text-decoration: none; color: var(--text-heading); cursor: pointer; }
.elcc-app .actions button:hover, .elcc-app .actions a.btn:hover { background: var(--action-hover-bg); }
.elcc-app .actions button[type=submit] { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-inverse); }
.elcc-app .actions button[type=submit]:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }

/* ---------- Responsiv ---------- */
@media (max-width: 900px) {
  .elcc-app { padding: var(--space-3); }
  .elcc-app .content { padding: var(--space-5); }
  .elcc-app .c4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .elcc-app .shell { grid-template-columns: 1fr; }
  .elcc-app .side { display: none; }
  .elcc-app .c2, .elcc-app .c3, .elcc-app .c4, .elcc-app .g2-1 { grid-template-columns: 1fr; }
  .elcc-app .head h2 { font: var(--type-h2); }
  .elcc-app .number { font: var(--type-h2); }
}

/* --- Projektübersicht (NEXO, D-020) ---------------------------------------
   Nur drei neue Klassen, alle aus vorhandenen Token abgeleitet. Die beiden
   Fälligkeitszustände sind ausdrücklich UNTERSCHIEDLICH markiert und nicht
   nur unterschiedlich eingefärbt: „überfällig" trägt eine volle Umrandung in
   der Alarmfarbe, „nicht abrufbar" eine gestrichelte in der Warnfarbe. Damit
   bleiben sie auch ohne Farbwahrnehmung unterscheidbar (D-036: Status über
   Farbe UND Form). */
.elcc-app .group-head { font: var(--type-h3); color: var(--text-heading); margin: var(--space-5) 0 var(--space-2); }
.elcc-app td.num, .elcc-app th.num { text-align: right; font-feature-settings: var(--text-numeric); white-space: nowrap; }
.elcc-app .tag.due-overdue { border-color: var(--sp-critical); color: var(--sp-critical); border-width: 2px; }
.elcc-app .tag.due-unknown { border-style: dashed; border-color: var(--sp-warning-aa); color: var(--sp-warning-aa); }
.elcc-app tfoot td { font: var(--type-body-strong); border-top: 2px solid var(--border-strong); }
/* Feste Spaltenbreiten, damit die Zahlenspalten aller Gesellschaftstabellen
   untereinander stehen. Ohne sie bemisst jede Tabelle ihre Spalten selbst und
   die Übersicht wirkt zerfranst.

   Die Breiten stehen hier und NICHT als style-Attribut an <col>: Die CSP
   erlaubt kein Inline-CSS (`style-src 'self'`, D-034). Ein style-Attribut
   würde stillschweigend verworfen — die Tabelle sähe dann aus wie ohne
   Breitenangabe, ohne dass irgendwo ein Fehler erschiene. */
.elcc-app .tbl-projects { table-layout: fixed; }
/* `break-word` statt `anywhere`: Es bricht ein Wort NUR, wenn es sonst
   ueberliefe. `anywhere` zerlegt auch Woerter, die noch gepasst haetten -
   "Musterhot el" statt "Musterhotel". */
.elcc-app .tbl-projects td { overflow-wrap: break-word; }
.elcc-app .tbl-projects th:nth-child(1),  .elcc-app .tbl-projects td:nth-child(1)  { width: 10%; }
.elcc-app .tbl-projects th:nth-child(2),  .elcc-app .tbl-projects td:nth-child(2)  { width: 18%; }
.elcc-app .tbl-projects th:nth-child(3),  .elcc-app .tbl-projects td:nth-child(3)  { width: 14%; }
.elcc-app .tbl-projects th:nth-child(4),  .elcc-app .tbl-projects td:nth-child(4)  { width: 10%; }
.elcc-app .tbl-projects th:nth-child(5),  .elcc-app .tbl-projects td:nth-child(5)  { width: 12%; }
.elcc-app .tbl-projects th:nth-child(6),  .elcc-app .tbl-projects td:nth-child(6)  { width: 7%; }
.elcc-app .tbl-projects th:nth-child(7),  .elcc-app .tbl-projects td:nth-child(7)  { width: 8%; }
.elcc-app .tbl-projects th:nth-child(8),  .elcc-app .tbl-projects td:nth-child(8)  { width: 11%; }
.elcc-app .tbl-projects th:nth-child(9),  .elcc-app .tbl-projects td:nth-child(9)  { width: 5%; }
.elcc-app .tbl-projects th:nth-child(10), .elcc-app .tbl-projects td:nth-child(10) { width: 5%; }
/* Die Summenzeile spannt acht Spalten - die nth-child-Breiten gelten dort nicht. */
.elcc-app .tbl-projects tfoot td[colspan] { width: auto; }

/* Offener Zugang (D-049): Das Banner muss auffallen, nicht dezent sein. Wer
   diese Umgebung aufruft, soll ohne Nachdenken wissen, dass sie ungeschuetzt
   ist — Farbe UND Randstaerke, damit es auch ohne Farbwahrnehmung wirkt. */
.elcc-app .banner-open { border: 2px solid var(--sp-critical); color: var(--sp-critical); }