/* ==========================================================================
   c3-ui.css · Oberflächen-System für alle C3-Werkzeuge (nicht für die Website)
   Stand 2026-09-30 · v1.0 · Grundlage: C3 Play (app/globals.css)
   Ablage: design/c3-ui.css (führend) · Regeln: inhalt/design/ui-system.md
   Farben und Schriften aus design/tokens.json (Block c3-brand-os:tokens).
   Katalog, Befund, Abgleich: folgt mit der Website os.c3brandos.com

   Einbinden:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;600;800&family=Funnel+Sans:wght@300;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap">
   <link rel="stylesheet" href="c3-ui.css">
   Dunkle Seite: <body class="dunkel">
   ========================================================================== */

/* ------------------------------------------------------------------ 1 Tokens */
/* Markenfarben und Schriften: der Block c3-brand-os:tokens. Keine weiteren Hex-Werte in Werkzeugen.
   Schriftrollen: --head Namen der Dinge, --copy Lesen und Handeln, --mono Maschine und Zustand. */
/* c3-brand-os:tokens 2.4.0 */
/* Erzeugt aus design/tokens.json (werkzeuge/kontext-build.py). Nicht von Hand aendern. */
:root{
  --c3-black:#000000;
  --c3-yellow:#fdc300;
  --c3-offwhite:#fffaef;
  --c3-cyan:#01cfd5;
  --c3-coral:#ff647c;
  --c3-curious:var(--c3-cyan);
  --c3-clever:var(--c3-coral);
  --c3-creative:var(--c3-yellow);
  --c3-head:"Funnel Display","Funnel Sans",system-ui,sans-serif;
  --c3-copy:"Funnel Sans",system-ui,sans-serif;
  --c3-mono:"IBM Plex Mono",ui-monospace,monospace;
  --black:var(--c3-black); --yellow:var(--c3-yellow); --offwhite:var(--c3-offwhite);
  --cyan:var(--c3-cyan); --coral:var(--c3-coral);
  --head:var(--c3-head); --copy:var(--c3-copy); --mono:var(--c3-mono);
}
/* /c3-brand-os:tokens */
:root{
  /* Rollen: jede Farbe hat in Oberflächen genau eine Aufgabe. */
  --flaeche:var(--offwhite);        /* Grundfläche jeder Seite            */
  --text:var(--black);              /* Schrift, Linien, aktive Auswahl    */
  --weiter:var(--yellow);           /* Hauptaktion, Fokus, aktueller Ort, Fortschritt, Hinweis */
  --erledigt:var(--cyan);           /* ok, erledigt, bestätigt            */
  --achtung:var(--coral);           /* Fehler, offen, löschen             */

  /* Schwarz-Stufen: Transparenzen von --text, keine eigenen Farben.
     Text nur in 100 oder 60. Die Stufen darunter nur für Linien und Flächen. */
  --ink-60:rgba(0,0,0,.6);          /* Nebentext, Metadaten, Labels       */
  --ink-25:rgba(0,0,0,.25);         /* Feldrahmen, Rahmen von Zustands-Chips, gestrichelte Leerflächen */
  --ink-12:rgba(0,0,0,.12);         /* Trennlinien in Listen              */
  --ink-08:rgba(0,0,0,.08);         /* Sekundärknopf, Kopf- und Fußlinie  */
  --ink-04:rgba(0,0,0,.04);         /* Hover auf ruhigen Flächen          */

  /* Status-Tönungen für Meldungsflächen (immer mit Randstrich, Text bleibt --text) */
  --erledigt-flaeche:rgba(1,207,213,.14);
  --weiter-flaeche:rgba(253,195,0,.16);
  --achtung-flaeche:rgba(255,100,124,.12);

  /* Abstände (4er-Raster) */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px;
  --breite:1060px;
  --rand:26px;

  /* Nur schwebende Ebenen (Karte, Pin, Menü) werfen Schatten. */
  --schatten:0 4px 14px rgba(0,0,0,.18);
}

/* Dunkle Seite: gleiche Rollen, getauschte Träger. Schwarz ist #000, kein Fast-Schwarz. */
body.dunkel,.dunkel{
  --flaeche:#000000;
  --text:#fffaef;
  --ink-60:rgba(255,250,239,.66);
  --ink-25:rgba(255,250,239,.28);
  --ink-12:rgba(255,250,239,.14);
  --ink-08:rgba(255,250,239,.10);
  --ink-04:rgba(255,250,239,.05);
}
html:has(body.dunkel){background:#000;}
.dunkel{background:var(--flaeche);color:var(--text);}

/* --------------------------------------------------------------- 2 Grundlage */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}
body{
  background:var(--flaeche);color:var(--text);
  font-family:var(--copy);font-weight:300;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button,input,select,textarea{font-family:inherit;color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--text);outline-offset:2px;}
.mono{font-family:var(--mono);}
.mark{background:linear-gradient(transparent 58%, var(--weiter) 58%);padding:0 .04em;}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand);}

/* ------------------------------------------------------------- 3 Typo-Rollen */
.seitentitel{font-family:var(--head);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(30px,4.4vw,52px);line-height:1;}
.abschnitt{font-family:var(--head);font-weight:800;letter-spacing:-.015em;font-size:24px;line-height:1.15;}
.lead{font-family:var(--head);font-weight:300;font-size:19px;line-height:1.45;
  color:var(--ink-60);max-width:62ch;margin-top:var(--a4);}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-60);margin-bottom:var(--a3);}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-60);}
.klein{font-size:14px;}

/* -------------------------------------------------------------------- 4 Kopf */
.kopf{border-bottom:1px solid var(--ink-08);background:var(--flaeche);}
.kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  max-width:var(--breite);margin:0 auto;padding:15px var(--rand);}
.marke{display:flex;align-items:center;gap:14px;text-decoration:none;}
.firmenlogo{height:26px;width:auto;display:block;}         /* logo_long_black.svg bzw. _white.svg auf dunkel */
.werkzeugname{font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:-.02em;
  padding-left:14px;border-left:1px solid var(--ink-25);line-height:1.1;}
.kopfrechts{display:flex;align-items:center;gap:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-60);}

/* Seitentabs: ein Werkzeug, mehrere Bereiche */
.seitentabs{border-bottom:1px solid var(--ink-12);background:var(--flaeche);}
.seitentabs .wrap{display:flex;gap:6px;padding-top:10px;overflow-x:auto;}
.seitentabs a{display:inline-block;padding:12px 18px 14px;font-family:var(--head);font-weight:800;
  font-size:20px;letter-spacing:-.02em;text-decoration:none;color:var(--ink-60);
  border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.seitentabs a:hover{color:var(--text);}
.seitentabs a.aktiv,.seitentabs a[aria-current="page"]{color:var(--text);border-bottom-color:var(--weiter);}
.seitentabs a small{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-60);margin-left:10px;vertical-align:middle;}
@media(max-width:560px){.seitentabs a small{display:none;}}

/* ----------------------------------------------------------------- 5 Knöpfe */
/* Klickbar hat Fläche. Gefüllt + Funnel Sans = Knopf. Keine Outline-Knöpfe. */
.knopf{display:inline-block;border:0;text-decoration:none;
  font-family:var(--copy);font-weight:700;font-size:15px;line-height:1;
  padding:13px 22px;border-radius:0;text-align:center;
  background:var(--weiter);color:#000;                       /* Primär: die eine Hauptaktion der Ansicht */
  transition:filter .12s,background .12s;}
.knopf:not(:disabled):hover{filter:brightness(.93);}
.knopf:disabled{opacity:.4;cursor:not-allowed;}
.knopf.sekundaer{background:var(--ink-08);color:var(--text);}  /* alle Nebenaktionen */
.knopf.sekundaer:not(:disabled):hover{background:var(--ink-12);filter:none;}
.knopf.gefahr{background:var(--achtung);color:#000;}          /* löschen, endgültig schließen */
.knopf.klein{padding:8px 14px;font-size:13px;}
.knopf.breit{width:100%;}
.knoepfe{display:flex;gap:7px;flex-wrap:wrap;align-items:center;}

/* Umschalter: Auswahl aus 2–4 Ansichten. Aktiv = Schwarz. */
.sichtwahl{display:inline-flex;border:1px solid var(--ink-25);}
.sichtwahl button{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 15px;background:transparent;color:var(--ink-60);border:0;border-left:1px solid var(--ink-25);}
.sichtwahl button:first-child{border-left:0;}
.sichtwahl button:hover{background:var(--ink-04);}
.sichtwahl button.aktiv,.sichtwahl button[aria-pressed="true"]{background:var(--text);color:var(--flaeche);}

/* -------------------------------------------------------------- 6 Formulare */
.feld{display:block;margin-top:18px;}
.feld > span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:7px;}
.feld input:not([type=checkbox]):not([type=radio]),.feld select,.feld textarea,
input.eingabe,select.eingabe,textarea.eingabe{
  width:100%;min-height:46px;padding:0 14px;border:1px solid var(--ink-25);border-radius:0;
  background:transparent;font-family:var(--copy);font-size:16px;font-weight:300;color:var(--text);
  outline:none;line-height:normal;}
.feld textarea,textarea.eingabe{padding:11px 14px;min-height:96px;resize:vertical;line-height:1.5;}
.feld select,select.eingabe{-webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;}
.dunkel .feld select,.dunkel select.eingabe{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fffaef' stroke-width='1.6'/%3E%3C/svg%3E");}
.feld input:focus,.feld select:focus,.feld textarea:focus,.eingabe:focus{
  border-color:var(--text);box-shadow:inset 0 -3px 0 var(--weiter);}
.feld input::placeholder,.feld textarea::placeholder{color:var(--ink-60);}
.feld.fehlt input,.feld.fehlt select,.feld.fehlt textarea{border-color:var(--achtung);box-shadow:inset 3px 0 0 var(--achtung);}
.hinweistext{font-size:14px;color:var(--ink-60);margin-top:7px;}

/* Schalter: an/aus als Kästchen mit Satz, nie als Knopf mit „an"/„aus" */
.schalter{display:flex;align-items:flex-start;gap:11px;margin-top:18px;
  font-size:14px;line-height:1.45;color:var(--ink-60);cursor:pointer;}
.schalter input{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--text);}
.schalter b{color:var(--text);font-weight:500;}

/* ------------------------------------------------- 7 Zustände: Chips + Punkte */
/* Zustand hat Rahmen. Chips sind nie klickbar, nie gefüllt. */
.chip{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 9px;background:transparent;
  border:1px solid var(--ink-25);color:var(--ink-60);white-space:nowrap;}
.chip.stark{border-color:var(--text);color:var(--text);}   /* braucht Aufmerksamkeit, z. B. offene Kommentare */
.chip.aus{border-style:dashed;}                              /* abgelaufen, abgeschaltet, geschlossen */
/* Farbige Aussage nur über den Punkt davor – nie über Schrift- oder Rahmenfarbe */
.chip.ok::before,.chip.hinweis::before,.chip.fehler::before{content:'';display:inline-block;
  width:7px;height:7px;border-radius:50%;margin-right:7px;vertical-align:1px;}
.chip.ok::before{background:var(--erledigt);}
.chip.hinweis::before{background:var(--weiter);}
.chip.fehler::before{background:var(--achtung);}

/* Ampel: Prüfergebnis. ✓ Türkis · ! Gelb · × Koralle. Zeichen immer mit, Farbe allein reicht nie. */
.ampel{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;flex:none;
  font-family:var(--copy);font-weight:700;font-size:13px;line-height:1;color:#000;background:var(--erledigt);}
.ampel.hinweis{background:var(--weiter);}
.ampel.fehler{background:var(--achtung);}

/* -------------------------------------------------------------- 8 Meldungen */
/* Randstrich trägt die Farbe, Text bleibt schwarz. Ein Satz mit Punkt. */
.meldung{border-left:3px solid var(--erledigt);background:var(--erledigt-flaeche);
  padding:11px 15px;font-size:15px;margin-top:18px;}
.meldung.hinweis{border-left-color:var(--weiter);background:var(--weiter-flaeche);}
.meldung.fehler{border-left-color:var(--achtung);background:var(--achtung-flaeche);}
.meldung b{font-weight:500;}
.meldung.mit-aktion{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
/* C3 Play bisher: .erfolg → .meldung (ok) · .fehler → .meldung.fehler */

/* Prüfblock (Kontext): Ampel + Zeile + Tabelle der auffälligen Dateien */
.pruefung{border:1px solid var(--ink-25);padding:12px 14px;margin:0 0 22px;}
.pruefung.hinweis{border-color:var(--weiter);}
.pruefung.fehler{border-color:var(--achtung);}
.pruefung .pk{display:flex;align-items:center;gap:10px;font-size:14px;}
.pruefung .pk b{font-family:var(--head);font-weight:800;}
.problem{border:1px solid var(--achtung);padding:8px 10px;font-size:13px;display:grid;gap:6px;}
.problem.hinweis{border-color:var(--weiter);}
.problem.gelassen{border-color:var(--ink-25);border-style:dashed;color:var(--ink-60);}
.problem .titel{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}

/* Fortschritt: immer Gelb. Unbestimmt = laufende Streifen. */
.ladebalken{height:6px;background:var(--ink-08);overflow:hidden;margin-top:14px;}
.ladebalken > div{height:100%;background:var(--weiter);transition:width .25s ease;}
.ladebalken.unbestimmt > div{width:100%;background:repeating-linear-gradient(-45deg,
  var(--weiter) 0,var(--weiter) 10px,rgba(253,195,0,.35) 10px,rgba(253,195,0,.35) 22px);
  background-size:31px 100%;animation:ladelauf .7s linear infinite;}
@keyframes ladelauf{to{background-position:31px 0;}}
.lebt::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--weiter);margin-right:9px;vertical-align:middle;animation:puls 1s ease-in-out infinite;}
@keyframes puls{50%{opacity:.25;}}

/* ----------------------------------------------------------------- 9 Listen */
.listenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.liste{margin-top:var(--a4);border-top:1px solid var(--ink-12);}
.eintrag{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--ink-12);}
.eintrag h3{font-family:var(--head);font-weight:800;font-size:18px;line-height:1.25;}
.eintrag .link{font-family:var(--mono);font-size:13px;margin-top:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.eintrag .zahlen{font-family:var(--mono);font-size:11.5px;color:var(--ink-60);margin-top:8px;letter-spacing:.04em;}
.werkzeuge{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:640px){.eintrag{grid-template-columns:1fr;}.werkzeuge{justify-content:flex-start;}}

.tabelle{width:100%;border-collapse:collapse;font-size:14px;}
.tabelle th{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-60);text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--text);}
.tabelle td{padding:10px 12px 10px 0;border-bottom:1px solid var(--ink-12);vertical-align:top;}
.tabelle td.zahl{font-family:var(--mono);font-size:13px;text-align:right;white-space:nowrap;}

.leer{border:1px dashed var(--ink-25);padding:40px 24px;text-align:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-60);margin-top:20px;}

/* -------------------------------------------------------- 10 Ablage (Dropzone) */
/* Gelbe Streifen: Ablegen ist die Hauptaktion der Seite. */
.dropzone{position:relative;overflow:hidden;border:1px dashed var(--ink-25);min-height:190px;padding:0 22px;
  display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;
  background-color:var(--flaeche);
  background-image:repeating-linear-gradient(-45deg,rgba(253,195,0,.16) 0,rgba(253,195,0,.16) 10px,transparent 10px,transparent 22px);}
.dropzone:hover{border-color:var(--text);}
.dropzone.bereit,.dropzone.aktiv,.dropzone.fertig{border-style:solid;border-color:var(--text);}
.dropzone .gross{font-family:var(--head);font-weight:800;font-size:21px;}
.dropzone .klein{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-60);margin-top:9px;}
.dropzonelabel{position:absolute;top:9px;right:11px;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);}
.dropzone input[type=file]{display:none;}

/* ------------------------------------------------------- 11 Personen / Absender */
/* Rund heißt Mensch oder Status. Fotos immer im Kreis, aus inhalt/team.json (myc3.com). */
.person{display:flex;align-items:center;gap:13px;}
.person img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;display:block;}
.person .name{font-family:var(--head);font-weight:800;font-size:15px;line-height:1.2;}
.person .rolle{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;color:var(--ink-60);}

/* ------------------------------------------------ 12 Schwebende Ebenen, Pins */
.karte{background:var(--flaeche);border:1px solid var(--text);padding:12px 13px;box-shadow:var(--schatten);}
/* Pin-Farbe = Status: offen Koralle, erledigt Türkis, gerade gesetzt Gelb */
.fb-pin{width:26px;height:26px;border-radius:50% 50% 50% 2px;border:2px solid #000;background:var(--achtung);
  color:#000;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.25);}
.fb-pin.erledigt{background:var(--erledigt);}
.fb-pin.entwurf{background:var(--weiter);}

/* Bühne: nur hier ist Weiß erlaubt, weil hier fremde Inhalte laufen (Kundenentwurf, simuliertes Umfeld) */
.buehne{background:#fff;}

/* -------------------------------------------------------------------- 13 Fuß */
.fuss{padding:34px 0 46px;margin-top:50px;border-top:1px solid var(--ink-08);}
.fusszeile{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--ink-60);letter-spacing:.05em;}