/* =====================================================================
   LOGO-DARSTELLUNG (Form + Zuschnitt/Zoom) -- geteilt zwischen Gastansicht
   (index.html, .logo-slot im Hero) und Admin (Restaurantprofil, Logo-
   Anpassen-Vorschau), damit beide GARANTIERT dieselbe Optik zeigen statt
   nur "aehnlicher" CSS-Regeln an zwei Stellen. Wird von renderLogoSlot()
   (siehe src/shared/logoRender.js) bedient: die Funktion setzt lediglich
   Klassen (has-image, shape-round/-square/-rectangle) und drei CSS-
   Variablen (--logo-scale/--logo-pos-x/--logo-pos-y) auf dem jeweiligen
   .logo-slot-Element -- die komplette visuelle Logik steckt hier.

   Groessenbezug ueber --hero-logo-height (tokens.css): der Admin kann
   dieselbe Formel bei einer groesseren Vorschau wiederverwenden, indem er
   --hero-logo-height lokal auf einem umschliessenden Element ueberschreibt
   (siehe admin.css: .logo-adjust-preview-wrap) -- Form/Radius/Breite
   skalieren dann automatisch proportional mit, ohne dass diese Datei
   irgendetwas Admin- oder Gast-Spezifisches wissen muss. */
.logo-slot {
  position: relative;
  flex-shrink: 0;
  height: var(--hero-logo-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback-Zustand (kein Logo): eigener gestalteter Container bleibt
   erhalten -- Kachel mit erstem Buchstaben, wie bisher. */
.logo-slot:not(.has-image) {
  width: var(--hero-logo-height);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.96);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  font-size: 18px;
}

/* Echtes Logo: drei waehlbare Formen (siehe Restaurantprofil im Admin --
   restaurant.logoShape, per shape-round/-square/-rectangle-Klasse auf
   demselben Element wie .has-image). Jede Form legt nur ihre eigenen
   paar Formvariablen fest (Breite, Eckenradius) -- die eigentliche Box-,
   Masken- und Blend-Mechanik darunter ist fuer alle drei identisch und
   liest diese Variablen nur aus. .logo-slot selbst bleibt in der Hoehe
   unveraendert (--hero-logo-height); die Breite wird je Form bewusst
   explizit als Vielfaches der Hoehe berechnet (calc()) statt ueber die
   CSS-Eigenschaft aspect-ratio auf dem Flex-Item -- Letzteres fuehrte in
   Kombination mit einem object-fit-Kind dazu, dass die Flex-Basis am
   intrinsischen Bildinhalt statt an der eigentlich gewuenschten Box-
   Groesse orientiert wurde (sichtbar als weit ueber den Viewport
   hinausragendes Logo bei einem breiten Rechteck-Bild). Ein expliziter
   width-Wert ist dagegen immer eindeutig.

   Alle drei Formen nutzen object-fit:cover als feste Maske -- die Form
   bestimmt IMMER die sichtbaren Grenzen, das Bild fuellt sie vollstaendig
   aus (kein Letterboxing/keine leeren Flaechen mehr, auch nicht bei
   "rectangle" mit einem schmalen/quadratischen Quellbild). Welcher
   Bildausschnitt dabei sichtbar ist, steuern --logo-scale/--logo-pos-x/
   --logo-pos-y (siehe .logo-image-mask img unten). */
.logo-slot.has-image.shape-round { --hero-logo-width: var(--hero-logo-height); --hero-logo-radius: 50%; --hero-logo-vignette-shape: circle; }
.logo-slot.has-image.shape-square { --hero-logo-width: var(--hero-logo-height); --hero-logo-radius: var(--hero-logo-radius-soft); --hero-logo-vignette-shape: circle; }
.logo-slot.has-image.shape-rectangle { --hero-logo-width: calc(var(--hero-logo-height) * var(--hero-logo-rectangle-ratio)); --hero-logo-radius: var(--hero-logo-radius-soft); --hero-logo-vignette-shape: ellipse; }

/* WEICHE INTEGRATION INS HERO-FOTO (::before), formunabhaengig: ein
   hochgeladenes Logo einfach aufs Foto zu legen, wirkt schnell wie eine
   draufgeklebte Bilddatei. Die Loesung dafuer ist bewusst allgemein (kein
   Bezug auf eine konkrete Logoform/-farbe): ein sehr weicher, radialer
   Verlauf direkt hinter dem Logo (::before, faedt komplett auf 0 aus --
   keine sichtbare Kante/Box) sorgt fuer etwas lokalen Kontrast zwischen
   Logo und Foto. Greift nur, wenn tatsaechlich ein Logo vorhanden ist --
   der Buchstaben-Fallback hat bereits seine eigene, deckende Flaeche und
   braucht das nicht. Sitzt auf .logo-slot.has-image selbst (NICHT auf der
   Maske darunter), damit sie ungeclippt ueber die Box hinaus ausfaedeln
   kann, waehrend die Maske eine Ebene tiefer nur das Bild beschneidet.

   mix-blend-mode:multiply statt einer normal aufgelegten Farbflaeche:
   dadurch verschmilzt die Abdunklung mit dem jeweils darunterliegenden
   Bildinhalt (staerker sichtbar ueber hellen Bildstellen, wo sie fuers
   Logo am meisten Kontrast bringt; kaum sichtbar ueber ohnehin dunklen
   Stellen) statt wie eine gleichmaessig eingefaerbte Flaeche ueber dem
   Foto zu liegen. Vignette-Form und -Eckenradius folgen denselben
   --hero-logo-vignette-shape/--hero-logo-radius-Variablen wie das Bild
   selbst, damit der weiche Schein exakt zur jeweiligen Logoform passt. */
.logo-slot.has-image::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hero-logo-vignette-spread));
  border-radius: var(--hero-logo-radius);
  background: radial-gradient(var(--hero-logo-vignette-shape), var(--hero-logo-vignette-color) 0%, transparent 70%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.logo-slot.has-image {
  width: var(--hero-logo-width);
}

/* Maske: eigener innerer Container statt direkt auf .logo-slot, weil
   overflow:hidden (fuer den Bildzuschnitt zwingend) sonst auch die nach
   aussen ausfaedelnde Vignette (::before, negativer inset) mit abschneiden
   wuerde. box-shadow statt filter:drop-shadow auf dem Bild: bei
   object-fit:cover ist die Bildflaeche immer deckend bis zum Rand (kein
   transparenter Silhouetten-Rand mehr wie frueher bei contain), ein
   drop-shadow wuerde ausserdem von diesem overflow:hidden abgeschnitten.
   box-shadow auf der Maske selbst ist unabhaengig von ihrem eigenen
   overflow (betrifft nur den Boxinhalt, nicht die Box-Dekoration) und
   folgt exakt der border-radius-Form. */
.logo-slot.has-image .logo-image-mask {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--hero-logo-radius);
  box-shadow: var(--hero-logo-shadow);
}

/* Bildinhalt: object-fit:cover mit FEST zentrierter object-position fuellt
   die Maske bei scale 1 immer lueckenlos (unabhaengig vom Seiten-
   verhaeltnis des Quellbilds) -- das ist die Grundlage dafuer, dass "100%
   Zoom" garantiert nie eine leere Flaeche zeigt. --logo-pos-x/-y (0-100,
   50=Mitte) verschieben NICHT diese object-position direkt, sondern
   fliessen stattdessen in die translate()-Werte des scale+translate-
   Transforms ein: bei scale 1 gibt es dadurch bewusst gar keinen
   Verschiebe-Effekt (es gibt bei exaktem Deckungs-Zuschnitt nichts, wohin
   man verschieben koennte); erst ab scale > 1 entsteht ueberhaupt
   verschiebbarer, bisher verdeckter Bildinhalt, und erst dann bewirkt
   --logo-pos-x/-y sichtbar etwas -- unabhaengig davon, ob das
   Ausgangsbild selbst breit, hoch oder quadratisch ist. Reine
   object-position haette hier NICHT funktioniert: sie wird VOR dem
   scale()-Transform aufgeloest und haette bei einem exakt zur Maske
   passenden Seitenverhaeltnis (z.B. quadratisches Logo in .shape-round/
   -square) unabhaengig vom Zoom keinerlei sichtbaren Effekt gehabt.
   Herleitung der Formel: nach object-fit:cover (zentriert) fuellt das
   Bild die Maske exakt; scale(S) vergroessert das bereits Deckende um S
   und macht dabei je (S-1)/2 * Maskengroesse an jeder Seite verdeckt
   verfuegbar. translate() wird VOR scale() (in lokalen, unskalierten
   Prozent-Einheiten der Box) ausgewertet, der sichtbare Effekt auf dem
   Bildschirm ist dadurch S-fach verstaerkt -- die Formel
   (50% - Position) * (scale - 1) / scale gleicht genau das aus, sodass
   Position=0/100 exakt den kompletten verdeckten Rand an die
   gegenueberliegende Kante der Maske heranholt, ohne je eine leere
   Flaeche freizulegen. */
.logo-slot.has-image .logo-image-mask img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform:
    scale(var(--logo-scale, 1))
    translate(
      calc((50% - var(--logo-pos-x, 50%)) * (var(--logo-scale, 1) - 1) / var(--logo-scale, 1)),
      calc((50% - var(--logo-pos-y, 50%)) * (var(--logo-scale, 1) - 1) / var(--logo-scale, 1))
    );
  transform-origin: center;
}

/* Bildlose Logo-Darstellung: erster Buchstabe des Restaurantnamens */
.logo-slot .logo-initial {
  font-weight: 700;
  color: var(--c-accent);
}