/* =====================================================================
   edit_head — Portfolio-Kopf
   Ergaenzt frame.css (Pillen, Schrift, Spinner). Hier steht nur, was der
   Kopfbereich selbst braucht.
   ===================================================================== */

.edit-head {
  --edh-height: 100vh;
  --edh-bg: transparent;
  --edh-ink: #111111;
  --edh-pill: rgba(255, 255, 255, 0.72);
  --edh-pill-hover: rgba(255, 255, 255, 0.92);

  /* Die Beitrags-Box uebernimmt ihre Gestaltung unveraendert aus
     frame.css. Deren Variablen sind dort auf .tdg-gallery definiert —
     hier stehen dieselben Werte, damit die Box im Kopfbereich genauso
     aussieht wie ein direkt aufgerufener Beitrag. */
  --gallery-ink: #000000;
  --gallery-accent: #ebff00;
  --gallery-card: #f4f4f4;
  --gallery-muted: #666666;
  --gallery-subtle: #666666;
  --pill-bg: rgba(217, 217, 217, 0.72);
  --pill-bg-hover: rgba(200, 200, 200, 0.92);
  --pill-border: transparent;

  position: relative;
  width: 100%;
  height: var(--edh-height);
  /* 100vh schliesst auf Mobilbrowsern die einklappende Adressleiste mit
     ein — der untere Rand laege sonst ausserhalb des Sichtbereichs. */
  height: var(--edh-height-dvh, var(--edh-height));
  overflow: hidden;
  background: var(--edh-bg);
  color: var(--edh-ink);
  touch-action: pan-y;
  font-family: var(--gallery-font, ui-rounded, "SF Pro Rounded", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.edh-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.edit-head.is-dragging .edh-canvas { cursor: grabbing; }
.edit-head.is-over .edh-canvas { cursor: pointer; }
.edh-canvas:focus-visible { outline: 2px solid var(--edh-ink); outline-offset: -2px; }

/* Telefon und Tablet: die tatsaechlich sichtbare Hoehe des Geraets.
   svh rechnet die eingeblendete Adressleiste mit ein, ohne beim Scrollen
   zu springen — anders als vh (schneidet ab) und dvh (springt). */
@media (max-width: 1024px) {
  .edit-head.edh-voll {
    height: 100svh;
    min-height: 100svh;
  }
}
@supports not (height: 100svh) {
  @media (max-width: 1024px) {
    .edit-head.edh-voll { height: 100vh; min-height: 100vh; }
  }
}

/* ---------------------------------------------------------------------
   Kategorie-Reiter
   --------------------------------------------------------------------- */
.edh-filters {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(72%, 760px);
}
.edh-filters[hidden] { display: none; }

.edh-filter-pill {
  appearance: none;
  border: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--edh-pill);
  color: var(--edh-ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.edh-filter-pill:hover { background: var(--edh-pill-hover); }
.edh-filter-pill:focus-visible { outline: 2px solid var(--edh-ink); outline-offset: 2px; }
.edh-filter-pill.is-active {
  background: var(--edh-ink);
  color: #ffffff;
}

/* Kein Beitrag in dieser Kategorie — der Kopf bleibt stehen, damit die
   Seite nicht leer wirkt. */
.edit-head.is-leer .edh-hint { opacity: 0.5; }

/* ---------------------------------------------------------------------
   Titel beim Ueberfahren — folgt dem Zeiger
   --------------------------------------------------------------------- */
.edh-caption {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -100%);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--edh-pill);
  backdrop-filter: blur(6px);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  max-width: min(70vw, 460px);
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.edh-caption.is-on { opacity: 1; }

/* ---------------------------------------------------------------------
   Ladeanzeige
   --------------------------------------------------------------------- */
/* Grosser Kreis in der Mitte, solange das 3D-Objekt laedt. Der Ring
   fuellt sich mit dem Ladefortschritt; ohne Groessenangabe des Servers
   dreht er sich stattdessen. */
.edh-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--edh-ink);
  text-align: center;
  opacity: 1;
  transition: opacity 0.4s ease;
}
.edit-head:not(.is-loading) .edh-loader {
  opacity: 0;
  pointer-events: none;
}

.edh-ring {
  position: relative;
  width: 116px;
  height: 116px;
}
.edh-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.edh-ring circle {
  fill: none;
  stroke-width: 5;
}
.edh-ring-track { stroke: rgba(0, 0, 0, 0.16); }
.edh-ring-fill {
  stroke: var(--edh-ink);
  stroke-linecap: round;
  /* Umfang bei r=54: 2*PI*54 = 339.29 */
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset 0.3s ease;
}
/* Ohne Fortschrittsangabe: der Ring kreist als Teilbogen. */
.edit-head.edh-unbestimmt .edh-ring svg {
  animation: edh-spin 1.1s linear infinite;
  transform-origin: 50% 50%;
}
.edit-head.edh-unbestimmt .edh-ring-fill {
  stroke-dashoffset: 254;
  transition: none;
}
.edit-head.edh-unbestimmt .edh-ring-wert { visibility: hidden; }

.edh-ring-wert {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

@keyframes edh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .edit-head.edh-unbestimmt .edh-ring svg { animation-duration: 3s; }
}

/* ---------------------------------------------------------------------
   Beitrags-Box geoeffnet: Bedienelemente des Kopfes treten zurueck
   --------------------------------------------------------------------- */
.edit-head.reader-open .edh-filters,
.edit-head.reader-open .edh-motion-toggle,
.edit-head.reader-open .edh-hint,
.edit-head.reader-open .edh-caption {
  opacity: 0;
  pointer-events: none;
}
.edit-head.reader-open .edh-canvas { cursor: default; }

/* ---------------------------------------------------------------------
   Bewegung anhalten
   --------------------------------------------------------------------- */
.edh-motion-toggle {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--edh-pill);
  color: var(--edh-ink);
  cursor: pointer;
  transition: background 0.18s ease;
}
.edh-motion-toggle:hover { background: var(--edh-pill-hover); }
.edh-motion-toggle:focus-visible { outline: 2px solid var(--edh-ink); outline-offset: 2px; }
.edh-motion-toggle svg { width: 14px; height: 14px; }
.edh-motion-toggle .icon-play { display: none; }
.edh-motion-toggle .icon-pause { display: block; }
.edh-motion-toggle.is-paused .icon-play { display: block; }
.edh-motion-toggle.is-paused .icon-pause { display: none; }

/* ---------------------------------------------------------------------
   Bedienhinweis
   --------------------------------------------------------------------- */
.edh-hint {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--edh-pill);
  font-size: 12px;
  opacity: 0.9;
  pointer-events: none;
}
.edh-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .edh-hint-maus { display: none; }
  .edh-hint-touch { display: inline; }
}

/* ---------------------------------------------------------------------
   Beitragsliste fuer Tastatur und Screenreader
   Sichtbar nur, wenn ein Eintrag den Fokus hat — die Kacheln selbst sind
   im Canvas und damit nicht anspringbar.
   --------------------------------------------------------------------- */
.edh-a11y-list {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  clip-path: inset(50%);
}
.edh-a11y-list:focus-within {
  width: auto;
  height: auto;
  max-height: 100%;
  padding: 10px;
  overflow: auto;
  clip-path: none;
  background: var(--edh-pill-hover);
}
.edh-a11y-list a {
  display: block;
  padding: 5px 9px;
  font-size: 13px;
  color: var(--edh-ink);
  text-decoration: none;
}
.edh-a11y-list a:focus-visible {
  outline: 2px solid var(--edh-ink);
  outline-offset: 1px;
}

/* Kleine Bildschirme: der Hinweis unten links kollidiert sonst mit der
   Ladeanzeige in der Mitte. */
@media (max-width: 520px) {
  .edh-hint { font-size: 11px; padding: 6px 10px; }
  .edh-loader { bottom: 58px; }
  /* Auf dem Telefon nehmen die Reiter sonst die halbe Flaeche weg:
     eine Zeile, die seitlich geschoben wird. */
  .edh-filters {
    left: 0;
    right: 0;
    top: 12px;
    max-width: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 12px;
    scrollbar-width: none;
  }
  .edh-filters::-webkit-scrollbar { display: none; }
  .edh-filter-pill { flex: 0 0 auto; font-size: 12px; padding: 6px 12px; }
}