/* Look nach dem Muster der GPI-Webseite (projektreporter.de), Wunsch Sibylle Ruesch 22.10.2026:
   weißer Grund, graue Flächen, Rot nur als Linie/Umrandung statt als Hintergrund.
   Wird nach style.css geladen; „bisheriger Look“ schaltet diese Datei ab (localStorage look=bisher). */
:root { --rot: #ea1e3c; --rot-d: #c8102e; --grau: #5e5e5e; --grau-l: #d7d7d7; --flaeche: #efeef1; --linie: #e2e0e5; }
body { background: #fff; color: #333; }
h1, h2, .brand, .tile .v, dialog h2 { font-family: Cambria, Georgia, "Times New Roman", serif; }
a { color: #333; text-decoration-color: var(--rot); text-underline-offset: 2px; }
a:hover { color: var(--rot); }

/* Kopf: grauer Balken oben, roter Titel, Reiter auf grauer Leiste */
header { background: #fff; color: var(--grau); border-top: 8px solid var(--grau-l); padding: 12px 20px 0; row-gap: 10px; }
.brand { color: var(--rot); font-size: 28px; letter-spacing: .3px; }
.company select, .who select { border-color: var(--grau-l); background: #fff; }
.who select:disabled { background: var(--flaeche); color: #333; }
.session button { color: var(--grau); border-color: var(--grau-l); }
.session button:hover { background: var(--flaeche); }
.session button.chat-top { background: #fff; color: var(--rot); border: 1px solid var(--rot); }
.session button.chat-top:hover { background: #fdf0f2; }
header nav#tabs { background: var(--flaeche); border-top: 6px solid var(--grau-l); padding: 0 6px; gap: 0; }
nav button { color: var(--grau); border: 0; border-radius: 0; border-top: 4px solid transparent; margin-top: -6px; padding: 8px 12px 7px;
  font-family: Cambria, Georgia, serif; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 700; }
nav button:hover { color: var(--rot); border-color: transparent; }
nav button.active { background: #fff; color: #333; border-top-color: var(--rot); }

/* Überschriften wie „UNSICHT GROSSBAU PROJEKTE“: rote Linie oben, graue Schrift, dünne graue Linie unten */
main { padding-top: 18px; }
h1 { color: #333; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 19px;
  border-top: 6px solid var(--rot); border-bottom: 1px solid var(--linie); padding: 8px 6px 6px; margin: 0 0 16px; }
h1 .for-company { font-weight: 400; text-transform: none; letter-spacing: 0; font-family: system-ui, sans-serif; font-size: 15px; color: #8a8a8a; }
h2 { color: #333; font-weight: 700; font-size: 18px; letter-spacing: .5px; border-bottom: 1px solid var(--linie); padding-bottom: 4px; }
h2 .hint { font-family: system-ui, sans-serif; letter-spacing: 0; }

/* Graue Flächen: Kacheln, Filterleiste, Kalender, Kästen – mit grauem Balken oben */
.tile { background: var(--flaeche); border: 0; border-top: 6px solid var(--grau-l); border-radius: 0; }
.tile .v { color: #333; }
.tile .l { color: var(--grau); }
.tile.alert .v { color: var(--rot); }
.tile.click:hover { border-color: var(--rot); box-shadow: none; }
.card { border: 1px solid var(--linie); border-top: 6px solid var(--grau-l); border-radius: 0; }
.login h1 { border-top: 0; text-transform: none; letter-spacing: .3px; font-size: 28px; font-weight: 700; color: var(--rot); padding: 0; }
.filters { background: var(--flaeche); padding: 8px 10px; }
.warn { background: var(--flaeche); border: 0; border-left: 4px solid var(--rot); border-radius: 0; }
/* „zu prüfen“ gelb wie im bisherigen Look (Wunsch Sibylle 22.10.2026) */
.review-box { background: #fffbeb; border: 1px solid #f5d77a; border-left: 4px solid #f5c542; border-radius: 0; }
.review-box ul.plain li { border-bottom-color: #f3e3b0; }
.cal { background: var(--flaeche); border: 0; border-top: 6px solid var(--grau-l); border-radius: 0; }
.cal tbody th { background: #fff; color: var(--grau); border-left: 3px solid var(--rot); border-radius: 0; }
.cal tbody th:hover { background: #fdf0f2; }
.cal tbody tr { border-bottom-color: var(--flaeche); }
.cal td.today, .cal tr.now td.today { background: #fff; color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); }
.cal tr.now td { background: #fff; }
.cal tr.now th { background: var(--grau); color: #fff; }

/* Tabellen: graue Kopfzeile mit roter Linie darunter */
table.list { border: 1px solid var(--linie); }
table.list th { background: var(--flaeche); color: var(--grau); border-bottom: 2px solid var(--rot); }
table.list td { border-bottom-color: var(--linie); }
th.sortable:hover { background: #e4e2e7; }
table.clickable tbody tr:hover, tr.click:hover, tr.picked { background: #f7f6f8; }

/* Knöpfe: Hauptknopf rot umrandet statt rot gefüllt */
button { border-color: var(--grau-l); border-radius: 2px; color: #333; }
button:hover:not(:disabled) { border-color: var(--grau); }
button.primary { background: #fff; color: var(--rot); border: 2px solid var(--rot); font-weight: 700; padding: 5px 12px; }
button.primary:hover:not(:disabled) { background: var(--rot); color: #fff; border-color: var(--rot); }
input, textarea, select { border-color: var(--grau-l); border-radius: 2px; }
input:focus, textarea:focus, select:focus { outline: 2px solid #f6b3be; border-color: var(--rot); }

/* Pillen: rote Umrandung statt Farbfläche. Gefüllt nur, was dringend ist. */
.badge { background: #fff; border: 1px solid var(--rot); color: #333; padding: 0 7px; }
.b-aktiv, .b-erzeugt, .b-erledigt, .b-ok, .b-in_arbeit, .b-laeuft { background: #fff; }
.b-gekuendigt, .b-offen, .b-entwurf { background: #fdf0f2; color: var(--rot-d); }
.b-pruefen { background: #fef3c7; border-color: #e0b100; color: #333; }
.b-wichtig { color: var(--rot-d); font-weight: 700; }
.b-gesperrt, .b-fehler { background: var(--rot); color: #fff; }
.b-pausiert, .b-beendet, .b-ausgelassen { border-color: #b3b3b3; color: #8a8a8a; background: #fff; }

/* Chat */
.bubble.admin { background: var(--flaeche); border-left: 3px solid var(--rot); }
.bubble.agent { border-color: var(--linie); }
dialog { border: 1px solid var(--linie); border-top: 6px solid var(--rot); border-radius: 0; }