/* Filmstudio 3.3. Reine Darstellung, keine erfundenen Bilder, Werte oder Arbeitszustaende.
   Alle Farben und Masse kommen aus basis.css. Objektiv und Licht sind unbewegte Dekoration. */

html[data-gestaltung] .overview .overview-kopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: var(--film-kopf-hoehe);
  padding: var(--film-kopf-abstand);
  border: 1px solid var(--film-knopf-rand);
  border-radius: var(--film-kopf-radius);
  background: var(--film-kopf-flaeche);
  color: var(--film-text);
  box-shadow: var(--film-schatten);
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-5);
}
html[data-gestaltung] .overview-kopf::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: var(--film-objektiv-mass);
  aspect-ratio: 1;
  right: calc(var(--abstand-6) * -1);
  top: calc(var(--abstand-7) * -1);
  border-radius: var(--radius-rund);
  background: var(--film-objektiv);
  opacity: 0.65;
  transform: rotate(-24deg);
}
html[data-gestaltung] .overview-kopf::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background: linear-gradient(90deg, var(--film-nacht), transparent 88%);
  opacity: 0.75;
}
html[data-gestaltung] .overview .overview-kopf h1 {
  font-size: var(--film-titel);
  font-weight: 760;
  letter-spacing: var(--film-titel-eng);
  line-height: var(--zeile-eng);
  color: var(--film-text);
  margin: var(--abstand-3) 0;
}
html[data-gestaltung] .overview .overview-augenbraue {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  color: var(--film-licht);
  font-size: var(--groesse-1);
}
html[data-gestaltung] .overview-augenbraue::before {
  content: "";
  width: var(--abstand-5);
  height: var(--abstand-1);
  border-radius: var(--radius-rund);
  background: currentColor;
}
html[data-gestaltung] #inhalt .overview .overview-kopf .hinweis {
  color: var(--film-hinweis);
  max-width: var(--lesebreite);
}
html[data-gestaltung] .overview .overview-schnellstart {
  justify-content: flex-start;
  max-width: 100%;
  gap: var(--abstand-2);
}
html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf {
  color: var(--film-text);
  background: var(--film-knopf-flaeche);
  border: 1px solid var(--film-knopf-rand);
  border-radius: var(--radius-klein);
  padding: var(--abstand-3) var(--abstand-4);
  box-shadow: none;
}
html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf.haupt {
  color: var(--film-nacht);
  background: var(--film-licht);
  border-color: var(--film-licht);
  font-weight: 720;
}
html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf:hover {
  background: var(--film-knopf-hover);
  color: var(--film-text);
}
html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf.haupt:hover {
  background: var(--film-text);
  color: var(--film-nacht);
}
html[data-gestaltung] .overview-kopf :is(.knopf, summary):focus-visible {
  outline-color: var(--film-licht);
}

/* Kennzahlen als einzelne, gut lesbare Karten. Die Herkunft bleibt direkt darunter. */
html[data-gestaltung] .overview .overview-zahlenleiste {
  padding: var(--abstand-3);
  background: var(--flaeche-karte);
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten-klein);
}
html[data-gestaltung] .overview .overview-kurzzahlen { gap: var(--abstand-3); }
html[data-gestaltung] .overview .overview-kurzzahl {
  position: relative;
  border: 1px solid var(--rand-karte);
  border-radius: var(--radius);
  padding: var(--abstand-5);
  background: radial-gradient(ellipse at 100% 0, var(--akzent-glanz), transparent 72%), var(--flaeche-karte);
}
html[data-gestaltung] .overview .overview-kurzzahl strong {
  font-size: var(--film-zahl);
  font-weight: 740;
  letter-spacing: var(--film-titel-eng);
  color: var(--arbeitstext);
}
html[data-gestaltung] .overview .overview-kurzzahl-kanal strong {
  font-size: var(--groesse-6);
  letter-spacing: normal;
}
html[data-gestaltung] .overview .overview-zahlen-details {
  padding: var(--abstand-2) var(--abstand-3) 0;
}

/* Oberflaechen fangen das Licht der jeweiligen Gestaltung auf. */
html[data-gestaltung] :is(.overview-karte, .overview-zentrum, .projektkarte, .download-karte) {
  box-shadow: var(--schatten-karte), var(--glanzkante);
}
html[data-gestaltung] .overview .overview-karte {
  border-radius: var(--radius-gross);
  background: linear-gradient(145deg, var(--flaeche-karte), var(--flaeche-tief));
}
html[data-gestaltung] .overview .overview-karte > h2 {
  padding-bottom: var(--abstand-3);
  border-bottom: 1px solid var(--rand-karte);
}
html[data-gestaltung] .projekt-raster .projektkarte {
  background: var(--flaeche-karte);
  border-radius: var(--radius-gross);
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz), border-color var(--dauer-kurz);
}
html[data-gestaltung] .projektkarte .projekt-vorschau {
  background: radial-gradient(ellipse at 50% 0, var(--film-blau), transparent 85%), var(--film-nacht);
  color: var(--film-hinweis);
  border-bottom: 1px solid var(--rand-karte);
}
html[data-gestaltung] .projektkarte .projekt-inhalt { padding: var(--abstand-5); gap: var(--abstand-2); }
html[data-gestaltung] .projektkarte .projekt-inhalt h3 { font-size: var(--groesse-5); font-weight: 680; }
html[data-gestaltung] .projektkarte .projekt-metadatum {
  background: var(--flaeche-tief);
  border-radius: var(--radius-rund);
  padding: var(--abstand-2) var(--abstand-3);
}
html[data-gestaltung] .projektkarte .projekt-weiter { margin-top: var(--abstand-3); }
html[data-gestaltung] .kopf .marke img {
  box-shadow: var(--schatten-haupt), var(--glanzkante);
  border: 1px solid var(--akzent-rand);
}
html[data-gestaltung] .inhalt .tafel > .tafel-kopf {
  border-bottom-color: var(--akzent-rand);
  background: radial-gradient(ellipse at 100% 0, var(--akzent-glanz), transparent 65%);
}
html[data-gestaltung] .anmeldung .karte {
  position: relative;
  border-top: var(--abstand-1) solid var(--akzent);
  background: radial-gradient(ellipse at 100% 0, var(--akzent-glanz), transparent 60%), var(--flaeche-karte);
  box-shadow: var(--film-schatten), var(--glanzkante);
}
html[data-gestaltung] .anmeldung .marke img { box-shadow: var(--schatten-haupt); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html[data-gestaltung] .projekt-raster .projektkarte:hover {
    transform: translateY(var(--film-anheben));
    box-shadow: var(--schatten-schwebend);
  }
}
@container overview (max-width: 700px) {
  html[data-gestaltung] .overview .overview-kopf {
    padding: var(--abstand-5);
    border-radius: var(--radius-gross);
    align-items: stretch;
  }
  html[data-gestaltung] .overview-kopf::before { right: -50%; opacity: 0.38; }
  html[data-gestaltung] .overview .overview-schnellstart { width: 100%; }
  html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf { flex: 1 1 auto; }
  html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf.haupt { flex-basis: 100%; }
  html[data-gestaltung] .overview .overview-kurzzahl { padding: var(--abstand-4); }
  html[data-gestaltung] .overview .overview-kurzzahl-kanal strong { font-size: var(--groesse-4); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-gestaltung] .projekt-raster .projektkarte { transition: none; }
}
@media (forced-colors: active) {
  html[data-gestaltung] .overview-kopf::before,
  html[data-gestaltung] .overview-kopf::after { display: none; }
  html[data-gestaltung] .overview .overview-kopf,
  html[data-gestaltung] .overview .overview-kurzzahl,
  html[data-gestaltung] .projektkarte .projekt-vorschau { background: Canvas; color: CanvasText; }
  html[data-gestaltung] #inhalt .overview .overview-kopf :is(h1, .hinweis, .overview-augenbraue) { color: CanvasText; }
  html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  html[data-gestaltung] .overview-kopf .overview-schnellstart .knopf.haupt { background: Highlight; color: HighlightText; border-color: Highlight; }
}