/* Heike – gemeinsames Aussehen in den Farben von RB Gebäudetechnik
   Dunkelblau #112057 (Schrift, Dach) · Orange #f58b21 (Schlüssel) · Himmelblau #00ccff (Hammer) · Grau #c3c7d4 */
:root {
  --blau: #112057;
  --blau-hell: #2a3a7a;
  --orange: #f58b21;
  --orange-dunkel: #d9730f;
  --cyan: #00ccff;
  --grau: #c3c7d4;
  --grund: #f3f5fa;
  --karte: #ffffff;
  --text: #1c2340;
  --leise: #667089;
  --rot: #c62828;
  --gruen: #1b7a3a;
  --schatten: 0 1px 2px rgba(17, 32, 87, .06), 0 4px 14px rgba(17, 32, 87, .07);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  background: var(--grund) !important; color: var(--text);
  max-width: none !important; margin: 0 !important; padding: 0 0 40px !important; line-height: 1.45;
}
/* Inhalt mittig mit Rand – die Kopfleiste geht über die volle Breite */
body > *:not(.kopf):not(script):not(style):not(#warten) {
  margin-left: max(14px, calc((100% - 1000px) / 2)) !important;
  margin-right: max(14px, calc((100% - 1000px) / 2)) !important;
}
body > p:first-of-type a[href="/"], body > p:first-of-type a[href="/projekte"]:only-child { }

h1 { color: var(--blau); font-size: 1.7rem; margin: 18px 0 10px; letter-spacing: -.01em; }
h2 { color: var(--blau); font-size: 1.2rem; margin: 6px 0 10px; }
h3 { color: var(--blau-hell); font-size: 1.05rem; }
a { color: #0b6fb8; }
a:hover { color: var(--orange-dunkel); }

.karte, details.karte, a.mail, a.projekt, a.gruppe, .artikel {
  background: var(--karte) !important; border: 1px solid #e3e7f0 !important; border-radius: 14px !important;
  box-shadow: var(--schatten); padding: 14px 16px !important; margin: 12px 0 !important;
}
a.projekt, a.mail { transition: transform .08s ease, box-shadow .08s ease; }
a.projekt:hover, a.mail:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(17, 32, 87, .12); }
a.vorschlag, .vorschlag.karte, .karte.frage, .frage.karte { border-left: 5px solid var(--orange) !important; }
.karte.vorschlag { background: #fffaf2 !important; }

button, .knopf {
  background: var(--blau); color: #fff; border: 0; border-radius: 10px; padding: 9px 15px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: background .1s ease;
}
button:hover, .knopf:hover { background: var(--blau-hell); }
button.leise, button.klein, .stand button:not(.aktiv) {
  background: #fff; color: var(--blau); border: 1px solid #cfd5e3; font-weight: 500;
}
button.leise:hover, button.klein:hover { background: #eef1f8; }
button[value="nein"], button[value="loeschen"], button.loeschen { background: #fff; color: var(--rot); border: 1px solid #e3b4b4; }
button[value="ja"], button.gross, button.ja { background: var(--gruen); }
button.gross { width: 100%; }

input, select, textarea {
  font: inherit; border: 1px solid #cfd5e3; border-radius: 10px; padding: 9px 11px; background: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--cyan); outline-offset: 0; border-color: var(--cyan); }
input[type=checkbox] { width: auto; }
input[type=file] { border: 0; padding: 4px 0; }

table { border-collapse: collapse; width: 100%; background: #fff; border-radius: 10px; overflow: hidden; }
th { background: #eef1f8 !important; color: var(--blau); font-weight: 600; text-align: left; }
th, td { border-bottom: 1px solid #edf0f6 !important; border-left: 0 !important; border-right: 0 !important; padding: 8px 9px; }
tr:nth-child(even) td { background: #fafbfe; }

.klein { color: var(--leise) !important; }
.fehler { color: var(--rot); } .gut { color: var(--gruen); }

/* ---------- Kopfleiste ---------- */
.kopf {
  position: sticky; top: 0; z-index: 50; background: var(--blau); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.kopf-innen {
  max-width: 1000px; margin: 0 auto; padding: 8px 14px; display: flex; align-items: center; gap: 12px;
}
.kopf a { color: #fff; text-decoration: none; }
.kopf .marke { display: flex; align-items: center; gap: 10px; }
.kopf .marke img { height: 38px; background: #fff; border-radius: 10px; padding: 3px 6px; }
.kopf .marke b { font-size: 20px; letter-spacing: .02em; }
.kopf .marke span { display: block; font-size: 11px; opacity: .75; letter-spacing: .04em; }
.kopf .schnell { margin-left: auto; display: flex; gap: 4px; }
.kopf .schnell a { padding: 7px 10px; border-radius: 9px; font-size: 14px; }
.kopf .schnell a:hover, .kopf .schnell a.aktiv { background: rgba(255, 255, 255, .14); }
.kopf details.menue { position: relative; }
.kopf details.menue summary { list-style: none; cursor: pointer; padding: 7px 11px; border-radius: 9px; font-size: 20px; line-height: 1; }
.kopf details.menue summary::-webkit-details-marker { display: none; }
.kopf details.menue[open] summary { background: rgba(255, 255, 255, .18); }
.kopf .menue-liste {
  position: absolute; right: 0; top: 46px; width: 290px; max-height: 78vh; overflow: auto;
  background: #fff; color: var(--text); border-radius: 14px; box-shadow: 0 12px 34px rgba(0, 0, 0, .25); padding: 8px;
}
.kopf .menue-liste h4 { margin: 8px 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.kopf .menue-liste a { display: block; color: var(--text); padding: 8px 10px; border-radius: 9px; }
.kopf .menue-liste a:hover { background: var(--grund); }
.kopf .streifen { height: 4px; background: linear-gradient(90deg, var(--cyan) 0 50%, var(--orange) 50% 100%); }
@media (max-width: 640px) {
  .kopf .schnell a.text { display: none; }
  .kopf .marke span { display: none; }
}

/* ---------- Startseite ---------- */
.hallo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px !important; }
.hallo h1 { margin: 0; }
.chip { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #e8ecf6; color: var(--blau); }
.chip.gut { background: #e3f4e8; color: var(--gruen); } .chip.warn { background: #fff1e0; color: var(--orange-dunkel); }
.hinweis { display: flex; gap: 10px; align-items: center; padding: 12px 14px !important; border-radius: 12px; margin: 10px 0 !important; font-weight: 500; }
.hinweis.zeit { background: linear-gradient(90deg, #e3f6fd, #eef6ff); border: 1px solid #bfe9f8; }
.hinweis.posten { background: #fff6e8; border: 1px solid #f8d7a9; }
.hinweis.dringend { background: #fdecec; border: 1px solid #f2c2c2; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 12px 0 !important; }
.zahl-kachel { background: #fff; border-radius: 14px; box-shadow: var(--schatten); padding: 14px; text-decoration: none; color: inherit; border: 1px solid #e3e7f0; }
.zahl-kachel b { display: block; font-size: 26px; color: var(--blau); }
.zahl-kachel span { font-size: 13px; color: var(--leise); }
.zahl-kachel.orange b { color: var(--orange-dunkel); }
.sprechen-karte { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.sprechen-knopf {
  width: 92px; height: 92px; border-radius: 50%; font-size: 15px; font-weight: 700; flex: none;
  background: radial-gradient(circle at 35% 30%, #ffad5c, var(--orange) 55%, var(--orange-dunkel)) !important;
  box-shadow: 0 6px 18px rgba(245, 139, 33, .45); color: #fff;
}
.sprechen-knopf:hover { filter: brightness(1.05); }
.sprechen-karte form { flex: 1; min-width: 220px; display: flex; gap: 8px; }
.sprechen-karte form input { flex: 1; }
.kacheln-bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin: 10px 0 !important; }
.bereich {
  background: #fff; border-radius: 14px; box-shadow: var(--schatten); border: 1px solid #e3e7f0; padding: 14px 12px;
  text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; min-height: 92px;
  transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease;
}
.bereich:hover { transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 8px 20px rgba(17, 32, 87, .12); color: var(--text); }
.bereich .sym { font-size: 26px; }
.bereich b { color: var(--blau); font-size: 15px; }
.bereich small { color: var(--leise); font-size: 12px; }
.bereich .zaehler { margin-left: auto; background: var(--orange); color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; font-weight: 700; }
.ueberschrift { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--leise); margin: 22px 0 4px !important; }
.fuss { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px !important; }
.hochladen-knoepfe label { display: inline-flex; align-items: center; gap: 6px; padding: 11px 15px; border-radius: 10px; cursor: pointer; font-weight: 600; margin: 4px 6px 0 0; }
.hochladen-knoepfe .kamera { background: var(--orange); color: #fff; }
.hochladen-knoepfe .datei { background: #fff; border: 1px solid #cfd5e3; color: var(--blau); }

/* Anmeldung */
.anmeldung { max-width: 380px; margin: 9vh auto 0 !important; text-align: center; }
.anmeldung img { width: 210px; margin-bottom: 10px; }
.anmeldung input, .anmeldung button { width: 100%; box-sizing: border-box; margin: 6px 0; padding: 13px; font-size: 17px; }

/* „Heike arbeitet …“ (Abschnitt 40) */
#heike-arbeit { max-width: 1100px; margin: 6px auto 0; padding: 0 12px; }
#heike-arbeit .arbeit { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; margin-bottom: 6px; border-radius: 8px;
  font-size: 14px; background: #eef2fa; border: 1px solid #c9d3ea; }
#heike-arbeit .arbeit.fertig { background: #e6f4ea; border-color: #b7dfc2; }
#heike-arbeit .arbeit.fehler { background: #fff3e0; border-color: #f0c48a; }
#heike-arbeit .was { flex: 1; min-width: 0; }
#heike-arbeit small { display: block; color: #555; margin-top: 3px; }
#heike-arbeit button { background: none; border: 0; font-size: 16px; cursor: pointer; color: #555; padding: 0 4px; }
#heike-arbeit .balken { background: #d5dbea; border-radius: 5px; height: 8px; overflow: hidden; margin-top: 5px; }
#heike-arbeit .balken div { background: #112057; height: 8px; transition: width .4s; }
#heike-arbeit .balken div.unbestimmt { background: linear-gradient(90deg, #d5dbea 0%, #112057 50%, #d5dbea 100%); background-size: 200% 100%;
  animation: heike-lauf 1.4s linear infinite; }
#heike-arbeit .dreh { display: inline-block; animation: heike-dreh 2s linear infinite; }
@keyframes heike-lauf { from { background-position: 200% 0; } to { background-position: 0 0; } }
@keyframes heike-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #heike-arbeit .dreh, #heike-arbeit .balken div.unbestimmt { animation: none; } }

/* Gespräch mit Heike (Abschnitt 41) */
.gespraech { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.gespraech .blase { max-width: 85%; padding: 7px 11px; border-radius: 14px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.gespraech .blase.heike { align-self: flex-start; background: #eef2fa; border: 1px solid #d5dcef; border-bottom-left-radius: 4px; }
.gespraech .blase.robert { align-self: flex-end; background: #112057; color: #fff; border-bottom-right-radius: 4px; }


/* Heikes Gesicht (10.11.2026) */
.heike-gesicht { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 2px 8px rgba(17, 32, 87, .18); flex: 0 0 auto; }
.gespraech .blase.heike { position: relative; margin-left: 34px; }
.gespraech .blase.heike::before { content: ""; position: absolute; left: -34px; bottom: 0; width: 28px; height: 28px;
  border-radius: 50%; background: url(/static/marke/heike.svg) center / cover; }