/* ============================================================
   Zell Aufmaß — Dashboard
   Corporate Design: Blau #4e6fae (aus Firmenlogo abgeleitet),
   Grautöne, Weiß. Keine externen Fonts/CDNs.
   Team-Farben (kategorisch, CVD-validiert):
   Team 1 #4e6fae · Team 2 #c26a1f · Tachymeter #8a5fb0
   ============================================================ */

:root {
  --brand: #4e6fae;
  --brand-dunkel: #3a5488;
  --brand-hell: #eaf0f9;
  --brand-sehr-hell: #f4f7fc;
  --brand-verlauf: linear-gradient(135deg, #4e6fae 0%, #3a5488 100%);

  --text: #1c2433;
  --text-sekundaer: #55607a;
  --text-muted: #8b93a5;

  --team1: #4e6fae;
  --team2: #c26a1f;
  --team-tt: #8a5fb0;

  --gut: #2e7d4f;
  --warnung: #a86500;
  --kritisch: #b3362b;
  --warnung-bg: #fdf3e3;
  --kritisch-bg: #fbe9e7;

  --flaeche: #ffffff;
  --kachel-bg: #fcfcfb;
  --seite-bg: #f2f4f8;
  --seite-verlauf: linear-gradient(180deg, #eef1f7 0%, #f2f4f8 260px);
  --linie: #e3e7ee;

  --radius: 16px;
  --radius-klein: 10px;

  --schatten: 0 1px 2px rgba(28, 36, 51, 0.05), 0 6px 18px rgba(28, 36, 51, 0.06);
  --schatten-hover: 0 2px 6px rgba(28, 36, 51, 0.09), 0 14px 34px rgba(58, 84, 136, 0.14);

  --dauer-schnell: 0.18s;
  --dauer: 0.32s;
  --dauer-langsam: 0.6s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-raum: cubic-bezier(0.34, 1.3, 0.5, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--seite-bg);
  background-image: var(--seite-verlauf);
  background-repeat: no-repeat;
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
}

/* ---------- Intro-Overlay (begrüßt nach der Anmeldung) ---------- */

#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--seite-bg);
  background-image: var(--seite-verlauf);
  transition: opacity var(--dauer-langsam) var(--ease), visibility var(--dauer-langsam);
}

#intro-overlay.weg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#intro-overlay .intro-logo {
  width: 210px;
  max-width: 70vw;
  border-radius: 14px;
  animation: intro-logo 1.1s var(--ease-raum) both;
  box-shadow: 0 10px 40px rgba(58, 84, 136, 0.22);
}

#intro-overlay .intro-text {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-dunkel);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

#intro-overlay .intro-text .punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: intro-punkt 1s var(--ease) infinite;
}

#intro-overlay .intro-text .punkt:nth-child(2) { animation-delay: 0.15s; }
#intro-overlay .intro-text .punkt:nth-child(3) { animation-delay: 0.3s; }

@keyframes intro-logo {
  0% { opacity: 0; transform: scale(0.82) translateY(14px); filter: blur(4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

@keyframes intro-punkt {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

/* ---------- Kopf ---------- */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  padding: 12px clamp(14px, 3vw, 32px) 0;
  position: sticky;
  top: 0;
  z-index: 50;
  animation: kopf-reveal var(--dauer-langsam) var(--ease) both;
}

@supports (backdrop-filter: blur(10px)) {
  .kopf { background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); }
}

@keyframes kopf-reveal {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

.kopf-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.kopf-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kopf-logo img {
  height: 48px;
  width: auto;
  display: block;
  border-radius: 6px;
  transition: transform var(--dauer) var(--ease-raum);
}

.kopf-logo:hover img { transform: scale(1.04) rotate(-0.5deg); }

.kopf-titel {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.15;
  padding-left: 14px;
  border-left: 1px solid var(--linie);
}

.kopf-titel .unterzeile {
  display: block;
  font-size: 0.82rem;
  font-weight: 450;
  color: var(--text-sekundaer);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.kopf-datum {
  margin-left: auto;
  text-align: right;
  font-size: 0.85rem;
  color: var(--text-sekundaer);
  white-space: nowrap;
  transition: color var(--dauer-schnell) var(--ease);
}

.kopf-datum strong { color: var(--text); font-weight: 600; }

/* Wochen-Reiter mit gleitendem Indikator */

.wochen-reiter {
  position: relative;
  display: flex;
  gap: 4px;
  max-width: 1180px;
  margin: 10px auto 0;
}

.wochen-reiter a {
  position: relative;
  display: inline-block;
  padding: 9px 18px 11px;
  border-radius: 10px 10px 0 0;
  text-decoration: none;
  color: var(--text-sekundaer);
  font-weight: 550;
  font-size: 0.95rem;
  border: 1px solid transparent;
  border-bottom: none;
  transition: color var(--dauer-schnell) var(--ease), background var(--dauer-schnell) var(--ease);
}

.wochen-reiter a::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-verlauf);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dauer) var(--ease);
}

.wochen-reiter a:hover { background: var(--brand-sehr-hell); color: var(--brand-dunkel); }

.wochen-reiter a.aktiv {
  background: var(--seite-bg);
  border-color: var(--linie);
  color: var(--brand-dunkel);
  position: relative;
  top: 1px;
}

.wochen-reiter a.aktiv::after { transform: scaleX(1); }

/* ---------- Hauptraster ---------- */

.main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(14px, 3vw, 28px) clamp(14px, 3vw, 32px) 48px;
}

.kachel-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2vw, 22px);
}

@media (max-width: 860px) {
  .kachel-raster { grid-template-columns: 1fr; }
  .kopf-datum { margin-left: 0; text-align: left; width: 100%; }
}

/* ---------- Kacheln (gestaffelt eingeflogen) ---------- */

.kachel {
  display: flex;
  flex-direction: column;
  background: var(--kachel-bg);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px 14px;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(227, 231, 238, 0.7);
  transition: box-shadow var(--dauer) var(--ease), border-color var(--dauer) var(--ease),
              transform var(--dauer) var(--ease-raum);
  min-height: 240px;
  position: relative;
  overflow: hidden;
  animation: kachel-reveal var(--dauer-langsam) var(--ease) both;
}

.kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand-verlauf);
  opacity: 0;
  transition: opacity var(--dauer) var(--ease);
}

.kachel:hover,
.kachel:focus-visible {
  box-shadow: var(--schatten-hover);
  border-color: var(--brand);
  transform: translateY(-4px);
  outline: none;
}

.kachel:hover::before,
.kachel:focus-visible::before { opacity: 1; }

.kachel-raster .kachel:nth-child(1) { animation-delay: 0.05s; }
.kachel-raster .kachel:nth-child(2) { animation-delay: 0.12s; }
.kachel-raster .kachel:nth-child(3) { animation-delay: 0.19s; }
.kachel-raster .kachel:nth-child(4) { animation-delay: 0.26s; }
.kachel-raster .kachel:nth-child(5) { animation-delay: 0.33s; }
.kachel-raster .kachel:nth-child(6) { animation-delay: 0.40s; }
.kachel-raster .kachel:nth-child(7) { animation-delay: 0.47s; }
.kachel-raster .kachel:nth-child(8) { animation-delay: 0.54s; }
.kachel-raster .kachel:nth-child(9) { animation-delay: 0.61s; }
.kachel-raster .kachel:nth-child(10) { animation-delay: 0.68s; }
.kachel-raster .kachel:nth-child(11) { animation-delay: 0.75s; }
.kachel-raster .kachel:nth-child(12) { animation-delay: 0.82s; }
.kachel-raster .kachel:nth-child(13) { animation-delay: 0.89s; }
.kachel-raster .kachel:nth-child(14) { animation-delay: 0.96s; }
.kachel-raster .kachel:nth-child(15) { animation-delay: 1.03s; }

/* Link-Kacheln: div statt a (enthalten selbst Links) — Klick klappt die Liste auf */
.klapp-kachel { cursor: pointer; }
.klapp-kachel .link-voll, .klapp-kachel .cmk-voll { display: none; }
.klapp-kachel.offen .cmk-vorschau { display: none; }
.klapp-kachel.offen .cmk-voll { display: block; }
.klapp-kachel.offen { grid-column: 1 / -1; min-height: 0; }
.klapp-kachel.offen .link-vorschau { display: none; }
.klapp-kachel.offen .link-voll { display: block; }
.klapp-kachel.offen .kachel-inhalt { overflow: visible; }
.kachel-fuss .klapp-hinweis::after { content: "▾"; }
.klapp-kachel.offen .kachel-fuss .klapp-hinweis::after { content: "▴"; }
.kachel:hover .klapp-hinweis::after { transform: none; }

.link-gruppe {
  font-size: 0.74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 14px 0 4px;
}

.link-voll .link-gruppe:first-child { margin-top: 2px; }

.kachel-inhalt ul.link-liste li {
  display: grid;
  grid-template-columns: 210px 1fr auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 7px 0;
}

.link-liste a { color: var(--brand-dunkel); font-weight: 650; text-decoration: none; }
.link-liste a:hover, .link-liste a:focus-visible { text-decoration: underline; }
.link-beschreibung { font-size: 0.86rem; color: var(--text-sekundaer); }
.link-adresse { font-size: 0.76rem; color: var(--text-muted); text-align: right; }

.link-name { font-weight: 650; color: var(--text); }
.link-kopieren { display: inline-flex; align-items: center; gap: 6px; justify-self: end; min-width: 0; }
.link-kopieren code {
  font-size: 0.76rem;
  color: var(--text-sekundaer);
  background: var(--brand-sehr-hell);
  border-radius: 6px;
  padding: 2px 6px;
  user-select: all;
  cursor: text;
  overflow-wrap: anywhere;
}
button.kopieren {
  padding: 2px 7px;
  font-size: 0.85rem;
  line-height: 1.2;
  border-radius: 6px;
  min-width: 28px;
  justify-content: center;
}
button.kopieren.kopiert { background: #e7f3ec; color: var(--gut); }

@media (max-width: 640px) {
  .kachel-inhalt ul.link-liste li { grid-template-columns: 1fr; gap: 1px; }
  .link-kopieren { justify-self: start; }
  .link-adresse { text-align: left; }
}

@keyframes kachel-reveal {
  from { opacity: 0; transform: translateY(26px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.kachel-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.kachel-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--brand-hell);
  color: var(--brand-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform var(--dauer) var(--ease-raum), background var(--dauer) var(--ease);
}

.kachel-icon svg { width: 22px; height: 22px; }

.kachel:hover .kachel-icon {
  transform: rotate(-6deg) scale(1.08);
  background: var(--brand);
  color: #fff;
}

.kachel-titel {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--text);
}

.kachel-kennzahl {
  margin-left: auto;
  text-align: right;
  flex: none;
}

.kachel-kennzahl .wert {
  font-size: 1.9rem;
  font-weight: 650;
  line-height: 1.1;
  color: var(--text);
  display: inline-block;
  animation: wert-zaehlen var(--dauer-langsam) var(--ease) both;
}

.kachel-kennzahl .label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@keyframes wert-zaehlen {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.kachel-inhalt {
  flex: 1;
  min-height: 0;
  font-size: 0.92rem;
  color: var(--text-sekundaer);
  overflow: hidden;
}

.kachel-inhalt ul { margin: 0; padding: 0; list-style: none; }
.kachel-inhalt li { padding: 5px 0; border-bottom: 1px solid var(--linie); }
.kachel-inhalt li:last-child { border-bottom: none; }

.kachel-fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--linie);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.kachel-fuss .details-hinweis {
  color: var(--brand-dunkel);
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.kachel-fuss .details-hinweis::after {
  content: "→";
  transition: transform var(--dauer) var(--ease-raum);
  display: inline-block;
}

.kachel:hover .details-hinweis::after { transform: translateX(4px); }

/* ---------- Skeleton (Lade-Zustand mit Puls) ---------- */

.skeleton {
  border-radius: 7px;
  background: linear-gradient(100deg, #eceff5 40%, #f6f8fb 50%, #eceff5 60%);
  background-size: 200% 100%;
  animation: skeleton-puls 1.3s ease-in-out infinite;
  height: 0.95em;
  margin: 7px 0;
}

.skeleton.breit { width: 92%; }
.skeleton.mittel { width: 68%; }
.skeleton.kurz { width: 44%; }

@keyframes skeleton-puls {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

/* ---------- Hinweis-Banner ---------- */

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--radius-klein);
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: 0.9rem;
  animation: kachel-reveal var(--dauer) var(--ease) both;
}

.banner svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.banner.info { background: var(--brand-hell); color: var(--brand-dunkel); }
.banner.warnung { background: var(--warnung-bg); color: var(--warnung); }
.banner.kritisch { background: var(--kritisch-bg); color: var(--kritisch); }

.banner ul { margin: 0; padding-left: 18px; }
.banner b, .banner strong { font-weight: 650; }

/* ---------- Detailseiten ---------- */

.seiten-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
  animation: kachel-reveal var(--dauer) var(--ease) both;
}

.seiten-kopf h1 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0;
  background: var(--brand-verlauf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-dunkel);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.9rem;
  padding: 6px 10px;
  border-radius: 9px;
  transition: background var(--dauer-schnell) var(--ease), transform var(--dauer-schnell) var(--ease);
}

.zurueck:hover { background: var(--brand-hell); transform: translateX(-2px); }

.unterzeile {
  color: var(--text-sekundaer);
  font-size: 0.9rem;
  margin: 2px 0 18px;
}

.karte {
  background: var(--kachel-bg);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(227, 231, 238, 0.7);
  animation: kachel-reveal var(--dauer-langsam) var(--ease) both;
  animation-delay: 0.08s;
}

.karte h2 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 12px;
  color: var(--text);
}

/* ---------- Projekte-Liste ---------- */

.projekt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
  transition: background var(--dauer-schnell) var(--ease);
  border-radius: 6px;
}

.projekt:last-child { border-bottom: none; }
.projekt:hover { background: var(--brand-sehr-hell); }

.projekt-titel { font-weight: 600; color: var(--text); }

.projekt-ref {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.projekt-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.82rem;
  color: var(--text-sekundaer);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  background: var(--brand-hell);
  color: var(--brand-dunkel);
  white-space: nowrap;
  transition: transform var(--dauer-schnell) var(--ease-raum);
}

.projekt:hover .badge { transform: scale(1.03); }

.badge.neu { background: #e7f3ec; color: var(--gut); }
.badge.frist { background: var(--warnung-bg); color: var(--warnung); }
.badge.frist-kritisch { background: var(--kritisch-bg); color: var(--kritisch); }

/* ---------- Termin-Timeline ---------- */

.tag-gruppe { margin-bottom: 18px; }

.tag-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-hell);
  margin-bottom: 8px;
  position: relative;
}

.tag-kopf::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 56px;
  background: var(--brand);
  border-radius: 2px;
}

.tag-kopf .wochentag {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}

.tag-kopf .datum {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tag-kopf .heute {
  margin-left: auto;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand-verlauf);
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  animation: heute-puls 2.4s ease-in-out infinite;
}

@keyframes heute-puls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 111, 174, 0.35); }
  50% { box-shadow: 0 0 0 6px rgba(78, 111, 174, 0); }
}

.termin {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--linie);
  align-items: flex-start;
  animation: termin-einblenden var(--dauer) var(--ease) both;
}

.termin:nth-child(2) { animation-delay: 0.05s; }
.termin:nth-child(3) { animation-delay: 0.1s; }
.termin:nth-child(4) { animation-delay: 0.15s; }

@keyframes termin-einblenden {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.termin:last-child { border-bottom: none; }

.team-badge {
  flex: none;
  min-width: 50px;
  box-sizing: border-box;
  text-align: center;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(28, 36, 51, 0.18);
}

.team-badge.t1 { background: var(--team1); }
.team-badge.t2 { background: var(--team2); }
.team-badge.tt { background: var(--team-tt); }
.team-badge.person { background: #7a6aa8; }
.team-badge.pers { background: #64748b; }
.team-badge.alle { background: var(--brand-dunkel); }
.team-badge.dav { background: var(--text-sekundaer); }

.termin-inhalt { min-width: 0; }

.termin-zeit {
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.termin-text { color: var(--text-sekundaer); font-size: 0.92rem; }

.termin-ort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--brand-dunkel);
  font-weight: 550;
}

/* ---------- Wetter ---------- */

.wetter-woche {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

@media (max-width: 700px) {
  .wetter-woche { grid-template-columns: repeat(2, 1fr); }
}

.wetter-tag {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 12px 10px;
  text-align: center;
  transition: transform var(--dauer) var(--ease-raum), box-shadow var(--dauer) var(--ease),
              border-color var(--dauer) var(--ease);
  animation: kachel-reveal var(--dauer-langsam) var(--ease) both;
}

.wetter-tag:nth-child(odd) { animation-delay: 0.06s; }
.wetter-tag:nth-child(even) { animation-delay: 0.12s; }

.wetter-tag:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
  border-color: var(--brand);
}

.wetter-tag .wt-tag { font-weight: 700; font-size: 0.88rem; }

.wetter-tag .wt-datum {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.wetter-tag .wt-icon { margin: 6px 0 2px; transition: transform var(--dauer) var(--ease-raum); }
.wetter-tag:hover .wt-icon { transform: scale(1.15); }
.wetter-tag .wt-icon svg { width: 40px; height: 40px; }

.wetter-tag .wt-temp {
  font-weight: 650;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.wetter-tag .wt-temp .tmin { color: var(--text-muted); font-weight: 500; }

.temp-balken {
  position: relative;
  height: 8px;
  margin: 8px 6px;
  background: var(--brand-sehr-hell);
  border-radius: 4px;
}

.temp-balken .spanne {
  position: absolute;
  top: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--brand-verlauf);
  animation: spanne-wachsen 0.8s var(--ease) both;
  transform-origin: left center;
}

@keyframes spanne-wachsen {
  from { transform: scaleX(0.05); opacity: 0.3; }
  to { transform: scaleX(1); opacity: 1; }
}

.wetter-tag .wt-regen {
  font-size: 0.78rem;
  color: var(--text-sekundaer);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

.wt-regen svg { width: 13px; height: 13px; }

.wetter-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.wetter-detail .wd-feld {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 10px 12px;
  font-size: 0.85rem;
}

.wd-feld .wd-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.wd-feld .wd-wert {
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.wetter-kompakt {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 4px;
}

@media (max-width: 500px) {
  .wetter-kompakt { grid-template-columns: repeat(4, 1fr); }
}

.wetter-kompakt .wk-tag { text-align: center; font-size: 0.72rem; }

.wetter-kompakt .wk-tag .wk-kurz {
  font-weight: 700;
  color: var(--text-sekundaer);
  display: block;
}

.wetter-kompakt .wk-tag svg { width: 24px; height: 24px; margin: 2px 0; }

.wetter-kompakt .wk-tag .wk-t {
  display: block;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
  font-size: 0.74rem;
}

.wetter-kompakt .wk-tag .wk-t .tmin { color: var(--text-muted); font-weight: 500; }

/* ---------- Mitteilungen ---------- */

.mitteilung {
  padding: 14px 0;
  border-bottom: 1px solid var(--linie);
  animation: termin-einblenden var(--dauer) var(--ease) both;
}

.mitteilung:nth-child(2) { animation-delay: 0.06s; }
.mitteilung:nth-child(3) { animation-delay: 0.12s; }

.mitteilung:last-child { border-bottom: none; }

.mitteilung-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.mitteilung-titel { font-weight: 650; font-size: 1rem; color: var(--text); }

.mitteilung-datum {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.mitteilung-text {
  color: var(--text-sekundaer);
  font-size: 0.93rem;
  white-space: pre-line;
}

details.archiv-eintrag {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  padding: 0;
  margin-bottom: 8px;
  background: var(--flaeche);
  transition: box-shadow var(--dauer) var(--ease);
}

details.archiv-eintrag[open] { box-shadow: var(--schatten); }

details.archiv-eintrag summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  border-radius: var(--radius-klein);
  user-select: none;
}

details.archiv-eintrag summary::-webkit-details-marker { display: none; }

details.archiv-eintrag summary::after {
  content: "▸";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform var(--dauer) var(--ease);
}

details.archiv-eintrag[open] summary::after { transform: rotate(90deg); }

details.archiv-eintrag summary:hover { background: var(--brand-sehr-hell); }

.archiv-inhalt {
  padding: 4px 14px 12px;
  color: var(--text-sekundaer);
  font-size: 0.9rem;
  white-space: pre-line;
  border-top: 1px solid var(--linie);
  animation: termin-einblenden var(--dauer) var(--ease) both;
}

/* ---------- Buttons ---------- */

button, .button {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--brand-dunkel);
  background: var(--brand-hell);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dauer-schnell) var(--ease), box-shadow var(--dauer-schnell) var(--ease),
              transform var(--dauer-schnell) var(--ease-raum);
}

button:hover, .button:hover {
  background: #dde8f6;
  box-shadow: var(--schatten);
  transform: translateY(-1px);
}

button:active, .button:active { transform: translateY(1px) scale(0.98); }

button.aktiv { background: var(--brand-verlauf); color: #fff; }

button svg { width: 16px; height: 16px; }

/* ---------- Tabellen ---------- */

.tabelle { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.tabelle th {
  text-align: left;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 650;
  padding: 8px 10px;
  border-bottom: 2px solid var(--linie);
}

.tabelle td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linie);
  color: var(--text-sekundaer);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

.tabelle tbody tr { transition: background var(--dauer-schnell) var(--ease); }
.tabelle tbody tr:hover { background: var(--brand-sehr-hell); }
.tabelle tr:last-child td { border-bottom: none; }

.tabelle-wrap { overflow-x: auto; }

/* ---------- Admin-Bereich ---------- */

.admin-benutzer {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  margin-bottom: 10px;
  background: var(--flaeche);
  animation: kachel-reveal var(--dauer) var(--ease) both;
}

.admin-benutzer:hover { border-color: var(--brand); }

.admin-benutzer .benutzer-name { font-weight: 600; }
.admin-benutzer .benutzer-rollen { font-size: 0.78rem; color: var(--text-muted); }

.kachel-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
}

.schalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid var(--linie);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-sekundaer);
  cursor: pointer;
  user-select: none;
  background: var(--flaeche);
  transition: all var(--dauer-schnell) var(--ease);
}

.schalter input { display: none; }

.schalter::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.45;
  transition: all var(--dauer-schnell) var(--ease);
}

.schalter:has(input:checked) {
  border-color: var(--brand);
  color: var(--brand-dunkel);
  background: var(--brand-hell);
}

.schalter:has(input:checked)::before {
  background: var(--brand);
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(78, 111, 174, 0.18);
}

/* Bewusster Administrator-Schalter — bewusst schlicht-ernst gehalten */
.admin-schalter { font-weight: 600; color: var(--text); }
.admin-schalter:has(input:checked) { color: var(--brand-dunkel); }

@media (max-width: 700px) {
  .admin-benutzer { grid-template-columns: 1fr; }
}

/* ---------- Zustände ---------- */

.ladehinweis { color: var(--text-muted); font-size: 0.9rem; padding: 18px 0; }

.fehler-hinweis {
  background: var(--kritisch-bg);
  color: var(--kritisch);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  font-size: 0.9rem;
}

.leer-hinweis { color: var(--text-muted); font-size: 0.92rem; padding: 8px 0; }

/* ---------- Fuß ---------- */

.fuss {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 3vw, 32px) 24px;
  font-size: 0.76rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Fokus / Tastatur / Bewegungsreduktion ---------- */

a:focus-visible, button:focus-visible, summary:focus-visible, .schalter:focus-within {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---------- Mobil-Feintuning (Smartphone/Tablet) ---------- */
/* Grundregel oben im Raster: Kacheln stehen ab 860 px untereinander.
   Hier folgt die Lesbarkeits-Feinjustage für schmale Handys. Desktop bleibt unberührt. */

/* Lange ungetrennte Tokens (Straßen, E-Mails, Refs) dürfen Kacheln/Zeilen nicht
   sprengen — Umbruch überall erlauben */
.kachel-inhalt li, .termin-text, .termin-ort, .mitteilung-text, .mitteilung-titel,
.projekt-titel, .projekt-ref, .projekt-meta, .archiv-inhalt {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .kachel-raster { gap: 12px; }
}

@media (max-width: 700px) {
  .kopf { padding: 10px 14px 0; }
  .kopf-titel { font-size: 1.18rem; padding-left: 10px; }
  .kopf-logo img { height: 40px; }
  .kopf-datum { font-size: 0.78rem; }

  .wochen-reiter a { padding: 8px 14px 10px; font-size: 0.9rem; }

  .main { padding: 12px 12px 40px; }
  .seiten-kopf h1 { font-size: 1.22rem; }
  .karte { padding: 14px; }
  .karte h2 { font-size: 1rem; }

  .kachel-inhalt { font-size: 0.9rem; }
  .kachel-kopf .kachel-titel { font-size: 1rem; }
  .kachel-kennzahl .wert { font-size: 1.25rem; }
  .kachel-kennzahl .label { font-size: 0.68rem; }

  .tabelle { font-size: 0.82rem; }
  .tabelle th, .tabelle td { padding: 7px 8px; white-space: nowrap; }

  .wetter-kompakt { gap: 4px; }
  .wetter-tag { padding: 8px 6px; }

  .mitteilung-text { font-size: 0.9rem; }
  .fuss { font-size: 0.68rem; padding-bottom: 18px; }
}

@media (max-width: 380px) {
  .kopf-titel { font-size: 1.05rem; }
  .kachel-kopf { flex-wrap: wrap; }
  .kachel-kopf .kachel-kennzahl { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Urlaub & Homeoffice ---------- */

.badge.urlaub { background: #e9effb; color: #35548f; }
.badge.homeoffice { background: #e2f0e8; color: #20603c; }
.badge.teilweise { background: #f3efe4; color: #6b5414; }

.abwesenheit-matrix th { text-align: center; padding: 6px 8px; }
.abwesenheit-matrix td { text-align: center; font-weight: 650; padding: 7px 8px; }
.abwesenheit-matrix td.zelle-u {
  background: #e9effb;
  color: #35548f;
  border-radius: 6px;
}
.abwesenheit-matrix td.zelle-h {
  background: #e2f0e8;
  color: #20603c;
  border-radius: 6px;
}
.abwesenheit-matrix td.zelle-t { background: #f3efe4; color: #6b5414; border-radius: 6px; }
.abwesenheit-matrix tbody tr:hover { background: var(--brand-sehr-hell); }


/* ---------- Checkmk-Kachel ---------- */

.cmk-summe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.cmk-status {
  display: inline-block;
  min-width: 50px;
  box-sizing: border-box;
  text-align: center;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cmk-crit { background: var(--kritisch-bg); color: var(--kritisch); }
.cmk-warn { background: var(--warnung-bg); color: var(--warnung); }
.cmk-unknown { background: #eceaf6; color: #5a4e8c; }
.kachel-kennzahl .wert.cmk-wert-crit { color: var(--kritisch); }

.kachel-inhalt ul.cmk-liste li.cmk-zeile {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 2px 10px;
  align-items: baseline;
  padding: 6px 0;
}
.cmk-text { min-width: 0; color: var(--text); font-size: 0.88rem; }
.cmk-meldung {
  display: block;
  color: var(--text-sekundaer);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}
.cmk-vorschau .cmk-meldung { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmk-seit { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; }
.cmk-leise { opacity: 0.6; }

@media (max-width: 640px) {
  .kachel-inhalt ul.cmk-liste li.cmk-zeile { grid-template-columns: 54px 1fr; }
  .cmk-seit { grid-column: 2; }
}

/* ---------- Vertrieb · Wochen-Cockpit (vertrieb.html) ---------- */

.vt-kennzahlen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.vt-kennzahlen-klein { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .vt-kennzahlen, .vt-kennzahlen-klein { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .vt-kennzahlen, .vt-kennzahlen-klein { grid-template-columns: 1fr; } }
.vt-kz {
  background: var(--kachel-bg);
  border: 1px solid rgba(227, 231, 238, 0.7);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 4px solid var(--linie);
}
.vt-kz.vt-gut { border-left-color: var(--gut); }
.vt-kz.vt-warnung { border-left-color: var(--warnung); }
.vt-kz.vt-kritisch { border-left-color: var(--kritisch); }
.vt-kz-titel { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 650; }
.vt-kz-wert { font-size: 1.6rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; }
.vt-kz-unter { font-size: 0.8rem; color: var(--text-sekundaer); }
.vt-klein { font-size: 0.78rem; color: var(--text-muted); }

.vt-diagramm { width: 100%; height: auto; max-height: 280px; display: block; }
.vt-gitter { stroke: var(--linie); stroke-width: 1; }
.vt-achse { font-size: 11px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.vt-ohne { fill: var(--brand); }
.vt-nkc { fill: var(--team2); }
.vt-be { stroke: var(--text); stroke-width: 2; stroke-dasharray: none; opacity: 0.75; }
.vt-be-text { font-size: 11px; fill: var(--text-sekundaer); font-weight: 650; }
.vt-saeule:hover .vt-ohne, .vt-saeule:hover .vt-nkc { opacity: 0.85; }
.vt-legende { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.8rem; color: var(--text-sekundaer); margin: 0 0 6px; }
.vt-legende span { display: inline-flex; align-items: center; gap: 6px; }
.vt-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.vt-ohne-sw { background: var(--brand); }
.vt-nkc-sw { background: var(--team2); }
.vt-be-sw { height: 2px; width: 16px; border-radius: 0; background: var(--text); opacity: 0.75; }
.vt-tabelle { margin-top: 8px; font-size: 0.86rem; }
.vt-tabelle summary { cursor: pointer; color: var(--brand-dunkel); font-weight: 600; }