/* FrameArt Cockpit: gemeinsames Design für alle Module.
   Jedes Modul bindet diese Datei ein: <link rel="stylesheet" href="/gemeinsam/fa.css"> */

@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/gemeinsam/schrift/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/gemeinsam/schrift/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("/gemeinsam/schrift/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("/gemeinsam/schrift/poppins-700.woff2") format("woff2"); }

:root {
  --rot: #9E2131;
  --rot-hell: #C43346;
  --rot-flaeche: #F6E6E8;
  --dunkel: #202020;
  --dunkel-2: #2B2B2B;
  --grund: #EEEEEE;
  --flaeche: #FFFFFF;
  --flaeche-2: #F6F6F6;
  --linie: #DDDDDD;
  --text: #1C1C1C;
  --text-2: #6A6A6A;
  --gut: #2F7A4F;
  --gut-flaeche: #E3F1E8;
  --warn: #9A6200;
  --warn-flaeche: #FBF0DC;
  --schrift: "Poppins", "Segoe UI", system-ui, Arial, sans-serif;
  --radius: 8px;
  --rot-text: #9E2131;      /* Rot für Schrift und Linien, im Dunkeln heller */
  --linie-stark: #BBBBBB;
  --rot-dunkler: #871B29;
  --schatten: rgba(0,0,0,.15);
  color-scheme: light;
}

/* Dunkelmodus: nur am Bildschirm, gedruckt wird immer hell. Umschalten über /gemeinsam/thema.js */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --rot-hell: #E0566A;
    --rot-flaeche: #3B1C22;
    --rot-text: #E0566A;
    --dunkel: #0E0E0E;
    --dunkel-2: #262626;
    --grund: #141414;
    --flaeche: #1E1E1E;
    --flaeche-2: #262626;
    --linie: #333333;
    --linie-stark: #555555;
    --text: #ECECEB;
    --text-2: #A3A2A1;
    --gut: #5CC293;
    --gut-flaeche: #1B3328;
    --warn: #E3A54A;
    --warn-flaeche: #382A14;
    --schatten: rgba(0,0,0,.5);
  }
  :root[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.6); }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--schrift); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--grund); }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--rot-text); }

.etikett { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.leise { color: var(--text-2); }
.zahlen { font-variant-numeric: tabular-nums; }

/* Seitenaufbau in Modulen */
.seite { padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 20px; max-width: 1200px; }
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.seitenkopf p { margin-top: 4px; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte-innen { padding: 18px 20px; }

/* Schaltflächen */
.knopf {
  font: inherit; font-weight: 500; font-size: .9rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--linie);
  background: var(--flaeche); color: var(--text);
}
.knopf:hover { border-color: var(--linie-stark); }
.knopf.haupt { background: var(--rot); border-color: var(--rot); color: #fff; }
.knopf.haupt:hover { background: var(--rot-dunkler); }
.knopf.gefahr { color: var(--rot-text); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--rot-text); outline-offset: 2px; }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.feld label { font-size: .8rem; font-weight: 500; color: var(--text-2); }
input, select, textarea {
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 6px; padding: 8px 10px; width: 100%;
}
textarea { min-height: 90px; resize: vertical; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }
.raster .breit { grid-column: 1 / -1; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
td { padding: 10px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tr.klickbar { cursor: pointer; }
tr.klickbar:hover td { background: var(--flaeche-2); }

/* Kennzeichen */
.marke { display: inline-block; font-size: .72rem; font-weight: 500; padding: 2px 9px; border-radius: 99px; background: var(--flaeche-2); color: var(--text-2); border: 1px solid var(--linie); }
.marke.gut { background: var(--gut-flaeche); color: var(--gut); border-color: transparent; }
.marke.warn { background: var(--warn-flaeche); color: var(--warn); border-color: transparent; }
.marke.rot { background: var(--rot-flaeche); color: var(--rot-text); border-color: transparent; }

/* Meldungen */
.meldung { padding: 10px 14px; border-radius: 6px; font-size: .9rem; }
.meldung.fehler { background: var(--rot-flaeche); color: var(--rot-text); }
.meldung.ok { background: var(--gut-flaeche); color: var(--gut); }
.hinweis-leer { padding: 36px 20px; text-align: center; color: var(--text-2); }

/* Dialog */
dialog { border: 0; border-radius: 10px; padding: 0; width: min(640px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0,0,0,.25); background: var(--flaeche); color: var(--text); }
dialog::backdrop { background: rgba(20,20,20,.45); }
.dialog-kopf { padding: 18px 22px 0; }
.dialog-inhalt { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog-fuss { padding: 0 22px 18px; display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.suche { max-width: 320px; }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

[hidden] { display: none !important; }

/* Personen: runder Kreis mit Profilbild oder Initialen in der Farbe der Person (/gemeinsam/personen.js) */
.fa-kreis { width: 32px; height: 32px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-weight: 600; font-size: .8rem; flex: none; overflow: hidden; }
.fa-pbild { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }