/* =====================================================================
   POMCANYS Content-Tool — Grundlagen
   ---------------------------------------------------------------------
   Variablen (Farben, Schrift, Masse) und die wenigen Regeln, die für
   die ganze App gelten. Alle anderen Stylesheets bauen darauf auf.

   Ladereihenfolge (app.php):
     basis.css → app.css → verwaltung.css → zusammenarbeit.css
     → wireframe.css → splash.css
   ===================================================================== */

:root{
  /* Farben */
  --weiss:#ffffff;
  --schwarz:#000000;

  /* Pink-Rampe (Basis --pink = POMCANYS Magenta) */
  --pink-50:#fdeaf3;
  --pink-100:#f9cce3;
  --pink-200:#f5aed2;
  --pink-300:#f07fb6;
  --pink-400:#ea4b97;
  --pink-500:#e20072;
  --pink-600:#c40063;
  --pink-700:#a20052;
  --pink-800:#7a003d;
  --pink-900:#4d0027;
  --pink:var(--pink-500);
  --pink-dark:var(--pink-800);

  /* Blau-Rampe — eigene Achse für die Kommentarschicht.
     Pink ist mit «ausgewählt / in Bearbeitung» belegt, Blau steht
     für «hier liegt eine offene Rückmeldung». Erledigtes wird grau,
     verliert das Blau also bewusst. Weil Pink und Blau in
     Graustufen fast gleich hell sind, trägt zusätzlich immer die
     Form (Sprechblase) die Bedeutung mit. */
  --blau-50:#eef4fd;
  --blau-100:#d6e4fa;
  --blau-200:#b0cbf4;
  --blau-300:#7ba7ea;
  --blau-400:#3f7ddd;
  --blau-500:#1a5fd0;
  --blau-600:#1450b0;
  --blau-700:#103f8a;
  --blau-800:#0b2c60;
  --blau:var(--blau-500);
  --kommentar:var(--blau-500);
  --kommentar-hell:var(--blau-50);
  --kommentar-mittel:var(--blau-100);
  --kommentar-linie:var(--blau-200);
  --kommentar-dunkel:var(--blau-700);
  --radius:4px;
  --papier:#ffffff;
  --grund:#f5f5f3;
  --tinte:#1a1a1a;
  --gedaempft:#6b6b6b;
  --linie:#e8e8e8;
  --linie-stark:#d4d4d1;
  --auswahl:#e20072;
  --auswahl-hell:#fdeaf3;
  --auswahl-mittel:#f9cce3;
  --auswahl-hover:#f5bfd9;
  --auswahl-editor-hover:#fbd8e8;
  --auswahl-fokus-bg:rgba(226,0,114,.04);
  --auswahl-schatten:rgba(226,0,114,.16);
  --gruen:#1a7f4b;
  --amber:#a86a00;
  --amber-bg:#fdf6e7;
  --amber-border:#f0e2bf;
  --rot:#b4232a;
  --rot-bg:#fdeeef;
  --rot-hell:#eec4c6;
  --warn-bg:#fbe3e4;
  --placeholder:#b0b0b0;
  --flaeche-leicht:#faf9f7;
  --flaeche-subtil:#fdfcfb;
  --info-bg:#fdf5f9;
  --info-border:#f6dbe9;
  --info-text:#3d3d3d;
  --hinweis-text:#7a4e00;
  --text-invers-leise:#e8eaec;
  --overlay-hell:rgba(255,255,255,.94);
  --overlay-dunkel:rgba(20,22,26,.5);
  --format-hover:rgba(255,255,255,.16);
  --format-trenner:rgba(255,255,255,.2);

  /* Wireframe-Farben */
  --wf-ink:var(--tinte);
  --wf-text:#5a6068;
  --wf-leise:#8b9099;
  --wf-linie:#e5e7e9;
  --wf-grau:#f5f5f6;
  --wf-band:#1a1a1a;
  --wf-surface:var(--papier);
  --wf-flaeche:#e5e7eb;          /* graue Fläche in Berufe und Gründe-Slider */
  --wf-akzent:#5046e5;           /* aktiver Eintrag, z.B. der Beruf unter der Maus */
  --wf-button-bg:#1a1a1a;
  --wf-platz-a:#e7ebef;
  --wf-platz-b:#b2bfcd;
  --wf-gradient-start:#eef0f2;
  --wf-gradient-mid:#cdd6de;
  --wf-gradient-end:#e2e6ea;
  --wf-section-border:rgba(0,0,0,.045);
  --bild-hinweis-text:#6f7b88;
  --logo-bg:#eceef0;
  --logo-text:#9aa0a7;
  --bild-schleier:rgba(255,255,255,.76);
  --skizze-voll:#a8adb4;

  /* Typografie */
  --font-family-base:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-size-micro:9.5px;
  --font-size-tiny:10.5px;
  --font-size-label:11px;
  --font-size-note:11.5px;
  --font-size-caption:12px;
  --font-size-control:12.5px;
  --font-size-small:13px;
  --font-size-body:16px;
  --font-size-wireframe:16px;
  --font-size-lead:16px;
  --font-size-wireframe-h3:18px;
  --font-size-rich-h3:18px;
  --font-size-dialog-title:16.5px;
  --font-size-accordion-icon:18px;
  --font-size-rich-h2:20px;
  --font-size-project-title:21px;
  --font-size-title:22px;
  --font-size-wireframe-cta-title:25px;
  --font-size-wireframe-h1-mobile:31px;
  --font-size-wireframe-h1:44px;
  --line-height-base:1.5;
  --line-height-tight:1.4;
  --line-height-control:1.3;
  --line-height-card:1.55;
  --line-height-comfy:1.6;
  --line-height-wireframe:1.62;
  --line-height-quote:1.45;
  --line-height-heading:1.24;
  --line-height-hero:1.09;
  --line-height-solid:1;
  --font-weight-regular:400;
  --font-weight-regular-bold:500;
  --font-weight-medium:600;
  --font-weight-semibold:650;
  --font-weight-bold:700;
  --font-style-quote:italic;
  --letter-spacing-soft:-.005em;
  --letter-spacing-subtle:-.01em;
  --letter-spacing-heading:-.015em;
  --letter-spacing-title:-.02em;
  --letter-spacing-hero:-.03em;
  --letter-spacing-loose:.02em;
  --letter-spacing-badge:.05em;
  --letter-spacing-wide:.06em;
  --letter-spacing-label:.07em;

  /* Layout */
  --app-header-height:50px;
  --signatur-hoehe:30px;
  --sidebar-width:300px;
  --sidebar-schmal:60px;
  --inspector-width:288px;
  --akkordeon-icon-breite:20px;
  --akkordeon-icon-spur:34px;
  --content-max-width:1040px;
  --wf-inset:7.8%;

  /* Schatten */
  --schatten-blatt:rgba(20,22,26,.06);
  --schatten-werkzeug:rgba(20,22,26,.13);
  --schatten-layer:rgba(20,22,26,.22);
  --schatten-karte:rgba(20,22,26,.03);
  --schatten-dialog:rgba(0,0,0,.28);
  --schatten-panel:rgba(0,0,0,.14);
  --schatten-sidebar:rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--font-family-base);font-size:var(--font-size-body);line-height:var(--line-height-base);
  color:var(--tinte);background:var(--grund);-webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
/* Was per hidden-Attribut ausgeblendet ist, bleibt aus — auch wenn eine
   Regel dem Element sonst display:flex oder grid gibt. */
[hidden]{display:none!important}

.app{display:flex;flex-direction:column;height:calc(100vh - var(--signatur-hoehe))}