/* =====================================================================
   Zeit.reisen - Prototyp
   Design-Tokens nach KERN-Systematik, Farbwerte aus dem CI der
   Stadt Hildesheim (Marke "Hi Zukunft").

   Hinweis zur Barrierefreiheit: Das Primaer-Tuerkis #0998c1 erreicht auf
   Weiss nur 3,35:1 und ist damit als Textfarbe nicht WCAG-AA-konform.
   Nach KERN-Logik wird deshalb der Farbton (OKLCH-Hue 226) beibehalten
   und ueber die Helligkeit eine konforme Stufe abgeleitet: -brand bleibt
   die Markenflaeche, -action ist die dunklere Variante fuer Text/Links.
   ===================================================================== */

:root {
  /* --- Markenfarben Stadt Hildesheim ------------------------------- */
  --hi-brand:        #0998c1;   /* L .633  C .120  H 226  - Flaechen */
  --hi-brand-dark:   #056e8e;   /* abgeleitet, WCAG-AA auf Weiss     */
  --hi-brand-tint:   #e6f5fa;
  --hi-green:        #8bbf9e;
  --hi-green-dark:   #2b7a4f;
  --hi-orange:       #ce6715;
  --hi-slate:        #4f4f60;

  /* --- KERN-analoge Layout-Token ----------------------------------- */
  --kern-color-layout-background-default: #ffffff;
  --kern-color-layout-layer-surface:      #f6f5f5;
  --kern-color-layout-border:             #d1cbc7;
  --kern-color-layout-text-default:       #1c1c22;
  --kern-color-layout-text-muted:         #5b5b66;
  --kern-color-layout-text-inverse:       #ffffff;

  /* --- Action-Token ------------------------------------------------ */
  --kern-color-action-default:      var(--hi-brand-dark);
  --kern-color-action-on-default:   #ffffff;
  --kern-color-action-focus:        var(--hi-orange);

  /* --- Feedback ---------------------------------------------------- */
  --kern-color-feedback-success:  var(--hi-green-dark);
  --kern-color-feedback-warning:  var(--hi-orange);
  --kern-color-feedback-danger:   #a4262c;

  /* --- Groessen / Abstaende ---------------------------------------- */
  --kern-space-1: .25rem;  --kern-space-2: .5rem;   --kern-space-3: .75rem;
  --kern-space-4: 1rem;    --kern-space-6: 1.5rem;  --kern-space-8: 2rem;
  --kern-radius:  2px;     /* kantig - Verwaltungscharakter */

  /* --- Typografie --------------------------------------------------
     Hausschrift der Stadt ist Skolar (Serif) + Proxima Nova Condensed.
     Beide kommerziell lizenziert; die Anwendung ist Open Source zu
     liefern. Deshalb hier freie Entsprechungen als Platzhalter.       */
  --kern-font-body:    'Archivo', 'Archivo Narrow', system-ui, sans-serif;
  --kern-font-heading: 'Bitter', Georgia, 'Times New Roman', serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--kern-font-body);
  color: var(--kern-color-layout-text-default);
  background: var(--kern-color-layout-background-default);
  font-size: 15px;
  line-height: 1.5;
  /* Kopf, Inhalt, Statuszeile teilen sich exakt die Fensterhoehe -
     sonst rutschen Zeitstrahl und Statuszeile aus dem Sichtbereich. */
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}

h1, h2, h3 { font-family: var(--kern-font-heading); font-weight: 600; margin: 0 0 var(--kern-space-3); }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

a { color: var(--kern-color-action-default); }

/* Sichtbarer Fokus - BITV 2.0 / WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--kern-color-action-focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--kern-space-4); top: -3rem;
  background: var(--kern-color-action-default); color: #fff;
  padding: var(--kern-space-2) var(--kern-space-4); z-index: 100;
  transition: top .15s;
}
.skip-link:focus { top: var(--kern-space-4); }

/* --- Kopfzeile ----------------------------------------------------- */
.hi-header {
  display: flex; align-items: center; gap: var(--kern-space-4);
  padding: var(--kern-space-3) var(--kern-space-6);
  background: var(--kern-color-layout-background-default);
  border-bottom: 3px solid var(--hi-brand);
}
.hi-logo {
  font-family: var(--kern-font-heading);
  font-size: 1.15rem; font-weight: 700; letter-spacing: .01em;
  color: var(--hi-brand-dark); white-space: nowrap;
}
.hi-logo span { color: var(--hi-green-dark); }
.hi-header__titel { font-size: .95rem; color: var(--kern-color-layout-text-muted); }
.hi-header__spacer { margin-left: auto; }

.hi-nav { display: flex; gap: var(--kern-space-1); }
.hi-nav a {
  padding: var(--kern-space-2) var(--kern-space-3);
  text-decoration: none; color: var(--kern-color-layout-text-default);
  border-bottom: 3px solid transparent; font-size: .9rem;
}
.hi-nav a[aria-current="page"] {
  border-bottom-color: var(--hi-brand); font-weight: 600;
}

/* --- Layout -------------------------------------------------------- */
.hi-layout { display: grid; grid-template-columns: 340px 1fr; min-height: 0; }
.hi-layout--admin { grid-template-columns: 1fr 380px; }

.hi-panel {
  background: var(--kern-color-layout-layer-surface);
  border-right: 1px solid var(--kern-color-layout-border);
  overflow-y: auto; padding: var(--kern-space-4);
}
.hi-panel--right { border-right: 0; border-left: 1px solid var(--kern-color-layout-border); }
.hi-viewer { position: relative; background: #dfe6ea; min-height: 0; overflow: hidden; }
#cesiumContainer { width: 100%; height: 100%; }
/* Historisches Bild liegt deckungsgleich ueber dem Modell - die Kamera steht auf der
   Aufnahmepose, Bildwinkel = Sichtfeld. Klicks gehen durch auf den Globus. */
.hist-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; z-index: 1;
  transition: opacity .15s linear;
}
.hi-viewer > .ueberlagerung, .hi-viewer > .detail, .hi-viewer > .zeitstrahl { z-index: 2; }
.datei-ok {
  display: flex; align-items: center; gap: var(--kern-space-2); flex-wrap: wrap;
  font-size: .85rem; padding: var(--kern-space-2) var(--kern-space-3);
  background: var(--hi-brand-tint); border: 1px solid #a9d9e8;
}

/* --- Formulare ----------------------------------------------------- */
.feld { margin-bottom: var(--kern-space-4); }
.feld label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: var(--kern-space-1); }
.feld input, .feld select, .feld textarea {
  width: 100%; padding: var(--kern-space-2) var(--kern-space-3);
  border: 1px solid #8a8a94; border-radius: var(--kern-radius);
  font: inherit; font-size: .9rem; background: #fff;
}
.feld input[type="range"] { padding: 0; border: 0; }
.feld__hinweis { font-size: .78rem; color: var(--kern-color-layout-text-muted); margin-top: var(--kern-space-1); }
.feld-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kern-space-3); }

.btn {
  display: inline-flex; align-items: center; gap: var(--kern-space-2);
  padding: var(--kern-space-2) var(--kern-space-4);
  border: 1px solid transparent; border-radius: var(--kern-radius);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.btn--primaer { background: var(--kern-color-action-default); color: #fff; }
.btn--primaer:hover { background: #045a75; }
.btn--sekundaer { background: #fff; color: var(--kern-color-action-default); border-color: currentColor; }
.btn--klein { padding: var(--kern-space-1) var(--kern-space-3); font-size: .82rem; }

/* --- Trefferliste -------------------------------------------------- */
.suchfeld { position: relative; margin-bottom: var(--kern-space-4); }
.treffer-kopf {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; color: var(--kern-color-layout-text-muted);
  margin-bottom: var(--kern-space-2);
}
.karte-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kern-space-2); }
.karte {
  display: grid; grid-template-columns: 64px 1fr; gap: var(--kern-space-3);
  padding: var(--kern-space-3); background: #fff;
  border: 1px solid var(--kern-color-layout-border);
  border-left: 3px solid var(--hi-brand);
  border-radius: var(--kern-radius); cursor: pointer; text-align: left;
  font: inherit; width: 100%;
}
.karte:hover { background: var(--hi-brand-tint); }
.karte[aria-selected="true"] { border-left-color: var(--hi-orange); background: var(--hi-brand-tint); }
.karte__bild {
  width: 64px; height: 64px; border-radius: var(--kern-radius);
  background: linear-gradient(135deg, #b9c6cc, #8fa3ab);
  display: grid; place-items: center; color: #fff; font-size: .7rem;
  font-family: var(--kern-font-heading);
}
.karte__titel { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
.karte__meta { font-size: .78rem; color: var(--kern-color-layout-text-muted); }

.chip {
  display: inline-block; padding: 1px var(--kern-space-2);
  border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--hi-brand-tint); color: var(--hi-brand-dark);
  border: 1px solid #a9d9e8;
}
.chip--entwurf { background: #fdf1e3; color: #8a4508; border-color: #e8c39a; }
.chip--geschlossen { background: #f7e7e8; color: #8a1f24; border-color: #e0b2b5; }

/* --- Detailkarte im Viewer ----------------------------------------- */
.detail {
  position: absolute; right: var(--kern-space-4); top: var(--kern-space-4);
  width: 330px; background: #fff; border: 1px solid var(--kern-color-layout-border);
  border-top: 3px solid var(--hi-brand);
  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: var(--kern-space-4);
}
.detail__bild {
  aspect-ratio: 4/3; margin-bottom: var(--kern-space-3);
  background: linear-gradient(135deg, #6f8189, #98a9b1);
  display: grid; place-items: center; color: #fff;
  font-family: var(--kern-font-heading); font-size: .85rem; text-align: center;
  padding: var(--kern-space-3);
}
.detail dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--kern-space-3); font-size: .82rem; }
.detail dt { color: var(--kern-color-layout-text-muted); }
.detail dd { margin: 0; }

/* --- Zeitstrahl ---------------------------------------------------- */
.zeitstrahl {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: var(--kern-space-4); width: min(620px, calc(100% - 2rem));
  background: rgba(255,255,255,.96); border: 1px solid var(--kern-color-layout-border);
  padding: var(--kern-space-3) var(--kern-space-4);
}
.zeitstrahl__kopf { display: flex; justify-content: space-between; font-size: .8rem; margin-bottom: var(--kern-space-1); }
.zeitstrahl input { width: 100%; }

/* --- Überlagerungsregler ------------------------------------------- */
.ueberlagerung {
  position: absolute; left: var(--kern-space-4); top: var(--kern-space-4);
  background: rgba(255,255,255,.96); border: 1px solid var(--kern-color-layout-border);
  padding: var(--kern-space-3); width: 240px;
}
.ueberlagerung label { font-size: .8rem; font-weight: 600; display: block; margin-bottom: var(--kern-space-1); }

/* --- Statuszeile --------------------------------------------------- */
.statuszeile {
  display: flex; gap: var(--kern-space-4); align-items: center;
  padding: var(--kern-space-2) var(--kern-space-6);
  background: var(--kern-color-layout-layer-surface);
  border-top: 1px solid var(--kern-color-layout-border);
  font-size: .8rem; color: var(--kern-color-layout-text-muted);
}
.statuszeile code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: #fff; padding: 1px 5px; border: 1px solid var(--kern-color-layout-border);
}

/* --- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  body { height: auto; overflow: auto; }
  .hi-layout, .hi-layout--admin { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .hi-panel { border-right: 0; border-bottom: 1px solid var(--kern-color-layout-border); }
  .hi-viewer { height: 60vh; }
  .detail { position: static; width: auto; margin: var(--kern-space-4); }
  .hi-header { flex-wrap: wrap; gap: var(--kern-space-2); }
}

/* =====================================================================
   Ergaenzungen: Bildanzeige, Wizard, Bestandsliste, Kommentare
   ===================================================================== */

/* --- Aufnahmen ----------------------------------------------------- */
.karte__bild { overflow: hidden; padding: 0; }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail__bild { padding: 0; overflow: hidden; position: relative; }
.detail__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Einzelbildansicht mit Ueberlagerung ---------------------------- */
.buehne {
  position: relative; display: grid; place-items: center;
  background: #2b2b31; overflow: hidden; min-height: 0;
}
.buehne__stapel { position: relative; width: min(100%, 1000px); aspect-ratio: 4/3; }
.buehne__stapel img, .buehne__stapel .heute {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.buehne .heute {
  background:
    repeating-linear-gradient(115deg, #93a3ad 0 34px, #8496a1 34px 68px),
    #7e8f9a;
}
.buehne .heute::after {
  content: 'Aktuelles Luftbild (Beistellung Stadt)';
  position: absolute; left: 12px; bottom: 10px;
  font-size: .72rem; color: #fff; background: rgba(0,0,0,.45);
  padding: 2px 8px;
}
.buehne__leiste {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem;
  background: rgba(255,255,255,.96); border: 1px solid var(--kern-color-layout-border);
  padding: var(--kern-space-3) var(--kern-space-4); width: min(560px, calc(100% - 2rem));
}
.lupe {
  position: absolute; right: 1rem; top: 1rem; display: flex; gap: 4px;
}
.lupe button {
  width: 34px; height: 34px; border: 1px solid var(--kern-color-layout-border);
  background: rgba(255,255,255,.95); font: inherit; font-weight: 700; cursor: pointer;
  border-radius: var(--kern-radius);
}

/* --- Wizard -------------------------------------------------------- */
.schritte { display: flex; gap: 0; margin-bottom: var(--kern-space-4); list-style: none; padding: 0; }
.schritte li {
  flex: 1; padding: var(--kern-space-2) var(--kern-space-2);
  border-bottom: 4px solid var(--kern-color-layout-border);
  font-size: .78rem; color: var(--kern-color-layout-text-muted);
}
.schritte li[aria-current="step"] {
  border-bottom-color: var(--hi-brand); color: var(--kern-color-layout-text-default); font-weight: 700;
}
.schritte li.erledigt { border-bottom-color: var(--hi-green-dark); color: var(--hi-green-dark); }

.ablage {
  border: 2px dashed #9aa3ab; border-radius: var(--kern-radius);
  padding: var(--kern-space-8) var(--kern-space-4); text-align: center;
  background: #fff; margin-bottom: var(--kern-space-4);
}
.ablage strong { display: block; margin-bottom: var(--kern-space-2); }

/* --- Bestandstabelle ------------------------------------------------ */
.tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; }
.tabelle th, .tabelle td {
  text-align: left; padding: var(--kern-space-2) var(--kern-space-3);
  border-bottom: 1px solid var(--kern-color-layout-border); vertical-align: middle;
}
.tabelle th { background: var(--kern-color-layout-layer-surface); font-size: .78rem; }
.tabelle tbody tr:hover { background: var(--hi-brand-tint); }
.tabelle img { width: 54px; height: 40px; object-fit: cover; display: block; border: 1px solid var(--kern-color-layout-border); }
.tabelle .aktionen { display: flex; gap: 4px; flex-wrap: wrap; }

.inhalt { padding: var(--kern-space-6); overflow-y: auto; }
.inhalt--breit { max-width: 1100px; }

/* --- Kommentare ----------------------------------------------------- */
.kommentar {
  background: #fff; border: 1px solid var(--kern-color-layout-border);
  border-left: 3px solid var(--hi-orange);
  padding: var(--kern-space-3); margin-bottom: var(--kern-space-3);
}
.kommentar__kopf { display: flex; justify-content: space-between; font-size: .78rem; color: var(--kern-color-layout-text-muted); margin-bottom: var(--kern-space-2); }
.kommentar--frei { border-left-color: var(--hi-green-dark); }
.kommentar p { margin: 0 0 var(--kern-space-2); font-size: .88rem; }

/* --- Hinweisbox ----------------------------------------------------- */
.hinweis {
  background: var(--hi-brand-tint); border-left: 4px solid var(--hi-brand);
  padding: var(--kern-space-3) var(--kern-space-4); font-size: .85rem;
  margin-bottom: var(--kern-space-4);
}
.hinweis--warn { background: #fdf1e3; border-left-color: var(--hi-orange); }