/* ============================================================
   AI Label Studio · UNCANNY MINDS · Designsystem 2026.1
   Bereich: STUDIO (Akzent Orange #FF9147)

   Diese Datei ist die Oberflaechenschicht fuer alle vier Seiten
   der Suite. Sie wird NACH dem seiteneigenen <style> geladen und
   setzt die Tokens der alten Navy-Oberflaeche auf das neue
   System um. Werte stammen aus
   Relaunch 2026/02_Tokens/tokens.css.

   Schriften: F37 Moon Light (300) und ExtraBold (800).
   Die beiden woff2 muessen neben dieser Datei liegen. Fehlen sie,
   greift die System-Schrift, das Layout bleibt unveraendert.
   ============================================================ */

@font-face{
  font-family:'F37 Moon';
  font-weight:300;
  font-style:normal;
  font-display:swap;
  src:url('F37Moon-Light.woff2') format('woff2');
}
@font-face{
  font-family:'F37 Moon';
  font-weight:800;
  font-style:normal;
  font-display:swap;
  src:url('F37Moon-ExtraBold.woff2') format('woff2');
}

/* ============================================================
   1 · Tokens
   Die alten Variablennamen bleiben stehen und bekommen neue
   Werte. Damit zieht die komplette bestehende Oberflaeche mit,
   ohne dass jede Regel angefasst werden muss.
   ============================================================ */
:root{
  /* Marke */
  --um-black:#000000;
  --um-white:#FFFFFF;
  --um-lightgray:#D3DAE4;
  --um-gray-050:#F4F6F9;
  --um-gray-400:#9BA6B5;
  --um-gray-600:#5C6675;
  --um-violet:#AB5BFF;
  --um-yellow:#FFEE00;
  --um-teal:#24ABC9;
  --um-orange:#FF9147;

  /* Bereich STUDIO */
  --accent:#FF9147;
  --accent-hover:#E87833;
  --on-accent:#000000;

  /* --- Umdeutung der alten Tokens --- */
  --navy:#000000;
  --yellow:#FF9147;
  --white:#FFFFFF;
  --navy-900:#000000;
  --navy-800:#000000;
  --navy-700:#1A1F26;
  --navy-600:#5C6675;
  --navy-500:#5C6675;
  --navy-400:#9BA6B5;
  --navy-300:#D3DAE4;
  --navy-200:#D3DAE4;
  --navy-100:#E8ECF2;
  --navy-050:#F4F6F9;
  --yellow-hover:#E87833;
  --yellow-soft:#FFE7D8;
  --warn:#B3261E;
  --warn-soft:#FBE9E7;
  --ok:#1F6B45;
  --ok-soft:#E6F1EB;

  --fg-1:#000000;
  --fg-2:#1A1F26;
  --fg-3:#5C6675;
  --fg-4:#9BA6B5;
  --fg-on-navy:#FFFFFF;
  --fg-on-yellow:#000000;

  --bg-1:#FFFFFF;
  --bg-2:#F4F6F9;
  --bg-3:#E8ECF2;
  --bg-invert:#000000;
  --border-1:#D3DAE4;
  --border-2:#9BA6B5;

  /* Schrift: eine Familie, zwei Gewichte */
  --font-display:'F37 Moon',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'F37 Moon',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fw-light:300;
  --fw-bold:800;

  /* Kante statt Rundung */
  --radius-xs:0;--radius-sm:0;--radius-md:0;--radius-lg:0;--radius-xl:0;--radius-pill:0;

  /* Keine Schatten. Hierarchie kommt aus Flaeche und Linie. */
  --shadow-sm:none;
  --shadow-md:none;
  --shadow-lg:none;
  --shadow-focus:0 0 0 3px #FF9147;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.2,.7,.2,1);

  /* Ein Seitenrand für alles: Kopf, Inhalt, Flächen, Fuß.
     Damit steht nichts an der Kante und nichts springt. */
  --rand:clamp(24px,5vw,48px);

  /* Typo-Grade aus tokens.css */
  --fs-display:76px;
  --fs-h1:52px;
  --fs-h2:34px;
  --fs-h3:20px;
  --fs-lead:21px;
  --fs-body:17px;
  --fs-small:14.5px;
  --fs-micro:13px;
}

/* ============================================================
   2 · Grundlagen
   ============================================================ */
html,body{font-family:var(--font-body);font-weight:var(--fw-light)}
body{color:var(--fg-2);background:var(--bg-1)}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;box-shadow:none}

h1,h2,h3,h4,h5,h6,.display,.h2,.h3{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  letter-spacing:-.03em;
  text-wrap:balance;
}
strong,b{font-weight:var(--fw-bold)}

/* Eyebrow: echte Auszeichnung, keine Kapitaelchen */
.eyebrow{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.eyebrow mark{background:var(--accent);color:#000;padding:.1em .35em;border-radius:0}

/* Links: Unterstreichung in Akzent, kein Farbwechsel im Text */
a{color:var(--fg-1);text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--fg-1);text-decoration-color:var(--um-black)}

/* Alles ohne Rundung und ohne Schatten */
button,input,select,textarea,img,svg,canvas,dialog,.card,.tool,.karte{border-radius:0!important;box-shadow:none}

/* ============================================================
   3 · Kopf
   Weisse Leiste, schwarze Wortmarke, darunter das Laufband mit
   den drei Bereichsfarben. Der Umschalter bleibt mittig.
   ============================================================ */
header{
  background:var(--um-white)!important;
  color:var(--fg-1)!important;
  border-bottom:0;
  height:64px!important;
  padding:0 var(--rand)!important;
  gap:20px!important;
  width:100%;
}
/* Auf den Inhaltsseiten laeuft der Kopf im Raster mit, in den Apps
   ueber die volle Breite. Kopf 64 plus Laufband 6 ergibt 70. */
body.seite header{max-width:calc(1280px + 2*var(--rand));margin-inline:auto}
/* In den Apps sitzt der Kopf über einem randlosen Werkzeug-Layout.
   Dort passt ein knapperer Rand zu Leiste und Panel. */
body:not(.seite) header{padding:0 20px!important}
main:has(#stage){height:calc(100vh - 70px)!important}
header a{text-decoration:none}
header .logo{height:30px!important;width:auto}
header .um-wortmarke{display:block;height:30px;width:auto;fill:var(--um-black)}
header .um-wortmarke path{fill:var(--um-black)}

/* Laufband unter der Leiste, volle Breite */
.um-laufband{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  height:6px;
  background:var(--um-white);
}
.um-laufband i{display:block}
.um-laufband i:nth-child(1){background:var(--um-yellow)}
.um-laufband i:nth-child(2){background:var(--um-teal)}
.um-laufband i:nth-child(3){background:var(--um-orange)}

/* Seitenumschalter */
header .appswitch{
  background:transparent!important;
  padding:0!important;
  gap:28px!important;
  border-radius:0!important;
}
header .appswitch a{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:14.5px;
  letter-spacing:-.01em;
  color:var(--fg-3)!important;
  background:transparent!important;
  padding:6px 0!important;
  border-bottom:2px solid transparent;
  border-radius:0!important;
  text-transform:none;
}
header .appswitch a:hover{color:var(--fg-1)!important;border-bottom-color:var(--um-lightgray)}
header .appswitch a.on{color:var(--fg-1)!important;background:transparent!important;border-bottom-color:var(--accent)}

/* Rechtliches im Kopf */
header .legal a{color:var(--fg-3)!important;font-size:12px;text-decoration:none}
header .legal a:hover{color:var(--fg-1)!important;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px}

/* Sprachumschalter */
.um-lang{display:flex;align-items:center;gap:0;flex:none;border:1px solid var(--um-lightgray)}
.um-lang button{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:12px;
  letter-spacing:.06em;
  padding:6px 11px;
  border:0;
  background:transparent;
  color:var(--fg-3);
  cursor:pointer;
  line-height:1;
}
.um-lang button:hover{color:var(--fg-1)}
.um-lang button[aria-pressed="true"]{background:var(--um-black);color:var(--um-white)}

/* Kopf-Knoepfe in den Apps */
header .hbtn{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:14px;
  border-radius:0!important;
  padding:11px 20px!important;
  border:0;
}
header .hbtn.primary{background:var(--accent);color:#000}
header .hbtn.primary:hover{background:var(--accent);color:#000;outline:3px solid var(--um-black);outline-offset:0}
header .hbtn.primary:active{transform:none}
header .hbtn.primary:disabled{background:var(--um-gray-050);color:var(--um-gray-400);outline:0}
header .hbtn.ghost{
  background:transparent;
  color:var(--fg-1);
  border:0;
  box-shadow:inset 0 0 0 2px var(--um-black);
}
header .hbtn.ghost:hover{background:var(--um-black);color:var(--um-white);box-shadow:inset 0 0 0 2px var(--um-black)}

/* ============================================================
   4 · Knoepfe allgemein
   Akzentflaeche traegt immer schwarze Schrift. Hover legt eine
   schwarze Kontur an, statt die Farbe zu wechseln.
   ============================================================ */
.btn,.estart,.cta,.ck-t-cta,.applyall,.addfield,#addBtn{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  border-radius:0!important;
}
.btn.primary,.estart,.cta,.ck-t-cta{
  background:var(--accent)!important;
  color:#000!important;
  border:0;
  padding:13px 22px;
}
.btn.primary:hover,.estart:hover,.cta:hover,a.cta:hover{
  background:var(--accent)!important;
  color:#000!important;
  outline:3px solid var(--um-black);
  outline-offset:0;
}
.btn.primary:active,.estart:active,.cta:active{transform:none}
.btn.secondary,.ghost,a.ghost{
  background:transparent!important;
  color:var(--fg-1)!important;
  border:0!important;
  box-shadow:inset 0 0 0 2px var(--um-black);
  padding:13px 22px;
}
.btn.secondary:hover,a.ghost:hover{background:var(--um-black)!important;color:var(--um-white)!important}
.applyall{
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--um-lightgray);
  background:var(--um-white)!important;
  color:var(--fg-2)!important;
  padding:11px!important;
}
.applyall:hover{box-shadow:inset 0 0 0 2px var(--um-black);color:var(--fg-1)!important}
#addBtn{
  border:0!important;
  box-shadow:inset 0 0 0 1px var(--um-lightgray);
  background:var(--um-white)!important;
  color:var(--fg-2)!important;
}
#addBtn:hover{box-shadow:inset 0 0 0 2px var(--um-black);background:var(--um-white)!important}
.addfield{color:var(--fg-1);text-decoration-color:var(--accent)}
.addfield:hover{color:var(--fg-1);text-decoration-color:var(--um-black)}

/* ============================================================
   5 · Flaechen, Karten, Panels
   Kein Kasten. Linie oben in Akzent, sonst Haarlinien.
   ============================================================ */
.card{
  border:0!important;
  border-top:3px solid var(--um-lightgray)!important;
  background:var(--um-white);
}
.card.open{border-top-color:var(--accent)!important}
.card>.c-head h3,.tool h2,.ck-t-txt h2{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  letter-spacing:-.025em;
}
.card>.c-body{border-top:1px solid var(--um-lightgray)}

.tool{
  border:0!important;
  border-top:3px solid var(--um-lightgray)!important;
  background:var(--um-white);
  padding:28px 0 0!important;
}
.tool.featured{border-top-color:var(--accent)!important}
.tool:hover{transform:none;border-top-color:var(--um-black)!important}
.tool .t-kind{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg-3);
}
.tool li::before{content:'';position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--accent)}
.tool li{padding-left:22px}

/* Liste mit Balkenmarker statt Pfeil oder Punkt */
.ck-todo li::before{content:'';position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--accent)}
.ck-todo li{padding-left:22px}
.ck-todo{border:0!important;border-left:3px solid var(--accent)!important;background:var(--um-gray-050)}
.ck-todo p{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.16em}

#sidebar,#panel{background:var(--um-white)}
#sidebar{border-right:1px solid var(--um-lightgray)}
#panel{border-left:1px solid var(--um-lightgray)}
#sidebar .sb-head h2{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.16em;color:var(--fg-3)}
.thumb{border:0!important;box-shadow:inset 0 0 0 1px var(--um-lightgray)}
.thumb:hover{transform:none;box-shadow:inset 0 0 0 1px var(--um-black)}
.thumb.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.thumb .t-name{font-family:var(--font-display);font-weight:var(--fw-bold)}
.dot{border-radius:0;width:9px;height:9px}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--accent)}
.dot.none{background:var(--um-lightgray)}

/* Eingaben */
input[type=text],input[type=number],select,textarea{
  border:1px solid var(--um-lightgray)!important;
  border-radius:0!important;
  background:var(--um-white);
  font-weight:var(--fw-light);
}
input[type=text]:hover,select:hover,textarea:hover{border-color:var(--um-black)!important}
input[type=range]{accent-color:var(--accent)}
input[type=checkbox]{accent-color:var(--accent);border-radius:0}
input[type=color]{border:1px solid var(--um-lightgray)!important;border-radius:0!important}
.row label,.lbl,.stack>.lbl{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--fg-2)}

/* Segment-Umschalter: Kante statt Pille */
.seg{background:var(--um-white)!important;border:1px solid var(--um-lightgray);border-radius:0!important;padding:0!important;gap:0!important}
.seg button{
  border-radius:0!important;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:var(--fg-3);
  padding:9px 6px!important;
  border-right:1px solid var(--um-lightgray);
}
.seg button:last-child{border-right:0}
.seg button:hover{color:var(--fg-1)}
.seg button.on{background:var(--um-black)!important;color:var(--um-white)!important}

/* Schalter */
.switch .tr{border-radius:0;background:var(--um-lightgray)}
.switch .tr::after{border-radius:0;background:var(--um-white)}
.switch input:checked+.tr{background:var(--accent)}

/* Positionsraster */
.grid9 button{border:1px solid var(--um-lightgray);border-radius:0!important}
.grid9 button::after{border-radius:0;background:var(--um-lightgray)}
.grid9 button:hover{border-color:var(--um-black)}
.grid9 button.on{border-color:var(--um-black);background:var(--um-black)}
.grid9 button.on::after{background:var(--accent)}

/* Icon-Auswahl */
.iconpick button{border:1px solid var(--um-lightgray)!important;border-radius:0!important}
.iconpick button:hover{border-color:var(--um-black)!important;transform:none}
.iconpick button.on{border-color:var(--um-black)!important;box-shadow:inset 0 0 0 1px var(--um-black)}
.iconpick .ip-txt{font-family:var(--font-display);font-weight:var(--fw-bold)}
.iconpick .ip-sub{font-weight:var(--fw-light)}

/* Statusmarken */
.badge,.ck-badge{border-radius:0!important;font-family:var(--font-display);font-weight:var(--fw-bold)}
.badge.ok,.ck-badge.green{background:var(--ok-soft);color:var(--ok)}
.badge.warn,.ck-badge.amber{background:var(--yellow-soft);color:#8A4416}
.badge.none{background:var(--um-gray-050);color:var(--fg-3)}
.ck-badge.red{background:var(--warn-soft);color:var(--warn)}

/* Tabellen und Rohdaten */
.kv td{border-bottom:1px solid var(--um-lightgray)}
details.raw summary{font-family:var(--font-display);font-weight:var(--fw-bold)}
details.raw pre{background:var(--um-black);border-radius:0}
.hint,.footnote,.ck-hint{font-weight:var(--fw-light)}
.hint a,.footnote a{text-decoration-color:var(--accent)}

/* Vorschau-Buehne */
#preview{box-shadow:none;border:1px solid var(--um-lightgray)}
#dropOverlay{
  border:2px dashed var(--um-black)!important;
  border-radius:0!important;
  background:rgba(255,145,71,.9)!important;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  color:#000!important;
}
#stageInfo b{font-family:var(--font-display);font-weight:var(--fw-bold)}
#emptyState h1{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-.03em}
#emptyState img{display:none}

/* Meldung */
#toast{
  border-radius:0!important;
  background:var(--um-black);
  color:var(--um-white);
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
}
#toast.warn{background:var(--warn)}

/* Dialoge */
dialog{border-radius:0!important;border:0!important;box-shadow:none!important}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-.025em}

/* Fortschritt im Check */
.ck-progress span{border-radius:0;background:var(--um-lightgray)}
.ck-progress span.done{background:var(--accent)}
.checkbox-card{border:0!important;border-top:3px solid var(--accent)!important;background:var(--um-white)}
.ck-answers button{
  border:1px solid var(--um-lightgray)!important;
  border-radius:0!important;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
}
.ck-answers button:hover{border-color:var(--um-black)!important;background:var(--um-gray-050)!important;transform:none}
.ck-answers button::after{color:var(--um-lightgray)}
.ck-answers button:hover::after{color:var(--um-black)}
.ck-a-sub{font-weight:var(--fw-light)}
.ck-q,.ck-r-title{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:-.03em}
.ck-step{font-family:var(--font-display);font-weight:var(--fw-bold);letter-spacing:.16em;color:var(--fg-4)}
.ck-restart,.ck-back{font-family:var(--font-display);font-weight:var(--fw-bold);color:var(--fg-3)}
.ck-restart:hover,.ck-back:hover{color:var(--fg-1)}
.ck-teaser{border:0!important;border-top:3px solid var(--accent)!important;background:var(--um-white)}
.ck-teaser:hover{transform:none;border-top-color:var(--um-black)!important}
.ck-t-icon{border-radius:0!important;border:0!important;background:var(--accent)!important;color:#000!important;font-family:var(--font-display);font-weight:var(--fw-bold)}

/* Export-Fortschritt der Video-App */
#exportOverlay .ep-card{border-radius:0;box-shadow:none}
#epTrack{border-radius:0;background:var(--um-lightgray)}
#epBar{border-radius:0;background:var(--accent)}
#transport button.play{border-radius:0;background:var(--um-black)}
#transport button.play:hover{background:var(--accent);color:#000}
.t-dur{border-radius:0;background:var(--um-black);font-family:var(--font-display);font-weight:var(--fw-bold)}

/* ============================================================
   5b · Flächen
   Der Brandguide definiert Farbe, Schrift, Logo und Bildwelt,
   aber keine Flächen. Ohne sie wird jede Seite flach, weil nur
   Weiß übrig bleibt.

   Regel: ein Grund pro Abschnitt, und aufeinanderfolgende
   Abschnitte bekommen nicht denselben.
   ============================================================ */
.flaeche{padding-block:clamp(44px,5.5vw,80px)}
.flaeche--grau{background:var(--um-gray-050)}
.flaeche--akzent{background:var(--accent);color:#000}
.flaeche--schwarz{background:var(--um-black);color:var(--um-white)}

/* Auf Akzentflächen steht Schrift immer schwarz. Harte Regel. */
.flaeche--akzent .eyebrow{color:rgba(0,0,0,.62)}
.flaeche--akzent h1,.flaeche--akzent h2,.flaeche--akzent h3{color:#000}
.flaeche--akzent p{color:#000}
.flaeche--akzent a{color:#000}

/* Rillen als Textur, nur auf Schwarz, nie über einer Markenfarbe */
.rillen{position:relative;overflow:hidden}
.rillen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.09) 0px,rgba(255,255,255,0) 2px,
    rgba(255,255,255,0) 17px,rgba(255,255,255,.04) 34px)}
.rillen > *{position:relative;z-index:1}

/* Karten, die auf einer Fläche liegen, bekommen einen eigenen Grund */
.flaeche--grau .tool,.flaeche--grau .checkbox-card{
  background:var(--um-white);
  padding:26px 26px 30px!important;
}
/* Auf der grauen Fläche trägt eine graue Linie nicht mehr. */
.flaeche--grau .tool{border-top-color:var(--um-black)!important}
.flaeche--grau .tool.featured{border-top-color:var(--accent)!important}
.flaeche--akzent .tool{background:var(--um-white);padding:26px 26px 30px!important}

/* Knopf auf der Akzentfläche: schwarz, damit er sich abhebt */
.flaeche--akzent .cta,.flaeche--akzent .ck-t-cta{
  background:var(--um-black)!important;
  color:var(--um-white)!important;
}
.flaeche--akzent .cta:hover,.flaeche--akzent .ck-t-cta:hover{
  background:var(--um-black)!important;color:var(--um-white)!important;
  outline:3px solid var(--um-white);
}
/* Auf der Akzentfläche steht der Inhalt direkt auf dem Grund.
   Ein weißer Kasten darin würde die Fläche zum Rahmen degradieren. */
.flaeche--akzent .ck-teaser{
  background:transparent!important;
  border-top-color:var(--um-black)!important;
  padding:24px 0 0!important;
}
.flaeche--akzent .ck-teaser:hover{border-top-color:var(--um-white)!important}
.flaeche--akzent .ck-t-icon{
  background:var(--um-black)!important;
  color:var(--accent)!important;
  align-self:center;
}
.flaeche--akzent .tool li::before,.flaeche--akzent .ck-todo li::before{background:var(--um-black)}

/* ============================================================
   6 · Schmale Fenster
   ============================================================ */
@media (max-width:900px){
  header{height:auto!important;min-height:0;padding:12px var(--rand)!important;flex-wrap:wrap;gap:12px!important}
  main:has(#stage){height:auto!important}
  header .logo,header .um-wortmarke{height:26px!important}
  header .spacer{display:none}
  header .appswitch{gap:20px!important;width:100%;justify-content:flex-start;order:4}
  header .appswitch a{flex:none;padding:4px 0!important;font-size:13.5px}
  .um-lang{order:2;margin-left:auto}
  header .legal{order:3;flex-direction:row!important;gap:12px!important}
  header .hbtn{order:5;font-size:13px;padding:10px 16px!important}

  /* Flächen bekommen weniger Höhe, der Seitenrand bleibt */
  .flaeche{padding-block:clamp(32px,7vw,48px)}
  .flaeche--grau .tool,.flaeche--grau .checkbox-card,.flaeche--akzent .tool{
    padding:22px 20px 26px!important;
  }
}

/* Sehr schmal: Randabstand halten, Typo zurücknehmen */
@media (max-width:480px){
  :root{--rand:20px}
  header .appswitch{gap:14px!important}
  header .appswitch a{font-size:12.5px}
}