/* FOR-YOU-Design – Quelle: For You App (lagerliste-app, Gestaltung.kt). Nicht abwandeln, nur verwenden.
   Pfade sind relativ zu dieser Datei: Schriften und Bilder liegen im selben Ordner. */
@font-face { font-family: Besley; src: url(besley.ttf); font-weight: 500; }
@font-face { font-family: Fraunces; src: url(fraunces.ttf); font-weight: 300; }

:root {
  --fy-tuerkis: #1FA9A5;   /* Hauptfarbe: Kopfleiste, Knöpfe, Akzente */
  --fy-dunkel:  #137A77;   /* Überschriften, Text auf hellem Türkis, Zweitknopf */
  --fy-mint:    #A1D9C6;   /* weicher Akzent, Diagrammflächen */
  --fy-hell:    #E3F4F2;   /* getönte Fläche: Tabellenkopf, Hinweisfeld */
  --fy-grund:   #F4F8F8;   /* Seitenhintergrund */
  --fy-rahmen:  #DBE9E8;   /* Kartenrahmen, Trennlinien */
  --fy-text:    #0A0F0E;
  --fy-grau:    #55625F;   /* Nebentext */
  --fy-rot:     #C62828;   --fy-rot-grund: #F9D3D3;   /* Fehler, Warnung */
  --fy-gelb:    #E0A100;   /* offen, Achtung */
  --fy-radius:  16px;      /* Karten; Knöpfe und Pillen sind voll gerundet */
}

body { margin: 0; background: var(--fy-grund); color: var(--fy-text);
       font: 16px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
h1, h2, h3, .fy-titel { font-family: Besley, Georgia, serif; font-weight: 500; color: var(--fy-dunkel); }
.fy-unter { font-family: Fraunces, Georgia, serif; font-weight: 300; }

/* Kopfleiste: Türkis, FY-Symbol, Besley-Titel weiß, Fraunces-Unterzeile, darunter das Streifenband */
.fy-kopf { background: var(--fy-tuerkis); color: #fff; }
.fy-kopf-innen { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.fy-kopf img { width: 40px; height: 40px; border-radius: 10px; }
.fy-kopf .fy-titel { color: #fff; font-size: 22px; margin: 0; }
.fy-kopf .fy-unter { color: rgba(255,255,255,.85); font-size: 14px; margin: 0; }

/* Streifenband: Bild 1500 x 4 px, 1 Bildpixel = 1 CSS-Pixel, nebeneinander gekachelt, NUR die Höhe strecken */
.fy-streifen { height: 8px; background: url(streifen.png) repeat-x; background-size: 1500px 100%; }

.fy-inhalt { padding: 16px; display: grid; gap: 12px; }
.fy-karte { background: #fff; border: 1px solid var(--fy-rahmen); border-radius: var(--fy-radius); padding: 16px; }
.fy-karte.hell { background: var(--fy-hell); }

.fy-knopf { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px;
            border: 0; border-radius: 28px; background: var(--fy-tuerkis); color: #fff;
            font-size: 18px; font-weight: 600; text-decoration: none; cursor: pointer; }
.fy-knopf.zweit { height: 52px; border-radius: 26px; background: transparent; color: var(--fy-dunkel);
                  border: 1px solid var(--fy-grau); font-size: 16px; }

.fy-pille { display: inline-block; border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 600;
            background: var(--fy-hell); color: var(--fy-dunkel); white-space: nowrap; }
.fy-pille.voll { background: var(--fy-tuerkis); color: #fff; }
.fy-pille.offen { background: #FFF3CF; color: #7A5800; }
.fy-pille.rot { background: var(--fy-rot-grund); color: var(--fy-rot); }

.fy-kennzahl b { display: block; font-family: Besley, Georgia, serif; font-weight: 500; font-size: 28px; color: var(--fy-dunkel); }
.fy-kennzahl span { color: var(--fy-grau); font-size: 13px; }

table.fy { width: 100%; border-collapse: collapse; background: #fff; }
table.fy th { background: var(--fy-hell); color: var(--fy-dunkel); text-align: left; font-weight: 600;
              border-top: 2px solid var(--fy-tuerkis); padding: 8px 10px; }
table.fy td { border-bottom: 1px solid var(--fy-rahmen); padding: 8px 10px; }
table.fy td.zahl, table.fy th.zahl { text-align: right; font-variant-numeric: tabular-nums; }