/* ==========================================================================
   wl-slots.css — Codex-Slot-Zustände · Weblandschaften Redesign 2026-09 (DESIGN.md §10)
   Markup:  figure.codex-slot[data-asset-id][data-ratio="3/2"][data-ratio-mobil="4/5"]
                              [data-dunkel][data-kompakt][data-praegung="ecke|gross"][data-priority]
   Ebenen:  .codex-slot-muster (Höhenlinien) · -verlauf · -schimmer · -kopf (ID-Chip + Art)
            · -text > -box (Ico, Titel, Motiv, Meta) · -praegung (Bergmarke) · -bild (per JS)
   Zustände: data-asset-status="PLANNED|AWAITING_CODEX_ASSET|AWAITING_CLIENT_ASSET|READY|FALLBACK_ONLY"
             .ist-bereit (Bild geladen, Platzhalterlagen weg) · [data-bild-fehler] (Bild fehlt, Platzhalter bleibt)
   Farben nur über Rollen-Tokens (tokens.css); die Fallbacks in var() sichern das Testblatt,
   solange tokens.css noch die alte Fassung trägt. Ohne JS ist der Platzhalter vollständig sichtbar.
   Lädt nach dem Seiten-<style> (Marker <!-- wl-design -->), deshalb kein !important nötig.
   ========================================================================== */

.codex-slot{
  position:relative;isolation:isolate;overflow:hidden;display:block;margin:0;
  aspect-ratio:var(--ratio,3/2);min-height:7.5rem;width:100%;
  border-radius:var(--slot-radius,var(--wl-radius-hero,30px));
  background:var(--wl-blau-50,#EAF1FE);color:var(--wl-tinte,#0E1B2E);
  box-shadow:var(--wl-schatten-md,0 14px 32px -18px rgba(16,42,67,.28)),inset 0 1px 0 rgba(255,255,255,.9);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.codex-slot[data-kompakt]{--slot-radius:0;box-shadow:none}
.codex-slot[data-dunkel]{background:var(--wl-horizont,#102A43);color:#fff;box-shadow:var(--wl-schatten-lg,0 28px 60px -24px rgba(16,42,67,.38))}

/* Seitenverhältnis ohne JS über das Attribut (JS setzt zusätzlich --ratio für freie Werte) */
.codex-slot[data-ratio="1/1"]{--ratio:1/1}
.codex-slot[data-ratio="4/3"]{--ratio:4/3}
.codex-slot[data-ratio="3/2"]{--ratio:3/2}
.codex-slot[data-ratio="16/10"]{--ratio:16/10}
.codex-slot[data-ratio="16/9"]{--ratio:16/9}
.codex-slot[data-ratio="21/9"]{--ratio:21/9}
.codex-slot[data-ratio="4/5"]{--ratio:4/5}
.codex-slot[data-ratio="9/16"]{--ratio:9/16}
@media (max-width:639px){
  .codex-slot{aspect-ratio:var(--ratio-mobil,var(--ratio,3/2))}
  .codex-slot[data-ratio-mobil="1/1"]{--ratio-mobil:1/1}
  .codex-slot[data-ratio-mobil="4/3"]{--ratio-mobil:4/3}
  .codex-slot[data-ratio-mobil="3/2"]{--ratio-mobil:3/2}
  .codex-slot[data-ratio-mobil="16/9"]{--ratio-mobil:16/9}
  .codex-slot[data-ratio-mobil="4/5"]{--ratio-mobil:4/5}
  .codex-slot[data-ratio-mobil="9/16"]{--ratio-mobil:9/16}
}

.codex-slot > *{position:absolute;box-sizing:border-box}
.codex-slot-muster,.codex-slot-verlauf,.codex-slot-schimmer{inset:0;pointer-events:none}

/* Höhenlinien (Brand-Blau 14 %) — auf Dunkel Weiß 9 % */
.codex-slot-muster{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400' fill='none' stroke='%232563eb' stroke-opacity='0.14' stroke-width='1'%3E%3Cpath d='M-20 300c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 330c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 360c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 120c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3Cpath d='M-20 150c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3Cpath d='M-20 180c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3C/svg%3E");
  background-size:400px 400px;
  -webkit-mask-image:radial-gradient(120% 90% at 70% 40%,#000 40%,transparent 100%);
          mask-image:radial-gradient(120% 90% at 70% 40%,#000 40%,transparent 100%);
}
.codex-slot[data-dunkel] .codex-slot-muster{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400' fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1'%3E%3Cpath d='M-20 300c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 330c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 360c60-40 90-90 160-90s110 60 170 40 70-70 110-70'/%3E%3Cpath d='M-20 120c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3Cpath d='M-20 150c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3Cpath d='M-20 180c50-30 80-70 140-70s100 50 160 30 60-60 120-60'/%3E%3C/svg%3E");
}

/* Verlauf Blau 50 → Grund mit Blau-Lichtfleck; auf Dunkel Navy-Verlauf mit Grün-Hauch */
.codex-slot-verlauf{
  background:
    radial-gradient(70% 60% at 28% 18%,rgba(37,99,235,.16),transparent 62%),
    radial-gradient(50% 45% at 85% 90%,rgba(25,195,125,.10),transparent 60%),
    linear-gradient(160deg,var(--wl-blau-50,#EAF1FE) 0%,var(--wl-grund,#F5F8FC) 58%,var(--wl-flaeche-2,#EEF3F9) 100%);
}
.codex-slot[data-dunkel] .codex-slot-verlauf{
  background:
    radial-gradient(70% 60% at 28% 18%,rgba(37,99,235,.30),transparent 62%),
    radial-gradient(45% 40% at 88% 92%,rgba(46,213,143,.16),transparent 60%),
    var(--wl-verlauf-navy,linear-gradient(150deg,#16345A 0%,#102A43 45%,#0B1B2B 100%));
}

/* Schimmer: leiser diagonaler Lichtwisch, damit die Fläche nicht tot wirkt */
.codex-slot-schimmer{
  opacity:.5;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  background-size:260% 100%;background-position:120% 0;
  animation:codex-schimmer 6.4s ease-in-out infinite;
}
.codex-slot[data-dunkel] .codex-slot-schimmer{opacity:.18}
@keyframes codex-schimmer{0%,55%{background-position:120% 0}100%{background-position:-60% 0}}

/* Kopf: ID-Chip (Blau) + Art-Chip */
.codex-slot-kopf{
  left:.875rem;top:.875rem;display:flex;flex-wrap:wrap;align-items:center;gap:.375rem;
  font-size:.66rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1;
}
.codex-slot-id,.codex-slot-art{
  display:inline-flex;align-items:center;gap:.3rem;border-radius:9999px;padding:.4rem .6rem;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;
}
.codex-slot-id{background:rgba(255,255,255,.82);color:var(--wl-blau-hover,#1D4ED8);box-shadow:var(--wl-schatten-sm,0 1px 2px rgba(16,42,67,.05),0 2px 8px -2px rgba(16,42,67,.06))}
.codex-slot-id svg{width:.75rem;height:.75rem;flex:none}
.codex-slot-art{background:rgba(255,255,255,.66);color:var(--wl-sekundaer,#4B5B70)}
.codex-slot[data-asset-status="AWAITING_CLIENT_ASSET"] .codex-slot-art{background:var(--wl-warnung-flaeche,#FDF3E3);color:var(--wl-warnung-text,#B45309)}
.codex-slot[data-asset-status="PLANNED"] .codex-slot-art{color:var(--wl-hilfstext,#5F6E82)}
.codex-slot[data-dunkel] .codex-slot-id{background:rgba(255,255,255,.10);color:var(--wl-licht,#2ED58F);box-shadow:none}
.codex-slot[data-dunkel] .codex-slot-art{background:rgba(255,255,255,.10);color:rgba(255,255,255,.72)}

/* Textbox: Glas, Radius UI. Beginnt unter der Chip-Zeile (top), damit ID-Chip und Art nie verdeckt werden;
   bei schmalen Slots (Container-Abfrage) fallen Meta- und Motivzeile weg, statt die Fläche zu überwuchern. */
.codex-slot{container-type:inline-size}
.codex-slot-text{left:0;right:0;top:3.25rem;bottom:0;padding:1rem;display:flex;align-items:flex-end}
@media (min-width:640px){.codex-slot-text{padding:1.25rem}}
.codex-slot[data-kompakt] .codex-slot-text{display:none}
@container (max-width:420px){.codex-slot-meta{display:none}.codex-slot-box{padding:.75rem}}
@container (max-width:300px){.codex-slot-motiv{display:none}.codex-slot-ico{display:none}}
.codex-slot-box{
  display:flex;align-items:flex-start;gap:.75rem;max-width:34rem;max-height:100%;overflow:hidden;
  border-radius:var(--wl-radius-ui,14px);border:1px solid var(--wl-glas-rand,rgba(255,255,255,.6));
  background:var(--wl-glas,rgba(255,255,255,.72));padding:.875rem;
  box-shadow:var(--wl-schatten-sm,0 1px 2px rgba(16,42,67,.05),0 2px 8px -2px rgba(16,42,67,.06)),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
@media (min-width:640px){.codex-slot-box{padding:1rem 1.125rem}}
.codex-slot[data-dunkel] .codex-slot-box{border-color:rgba(255,255,255,.14);background:rgba(11,27,43,.62);box-shadow:none}
.codex-slot-ico{
  margin-top:.125rem;display:inline-flex;width:2rem;height:2rem;flex:none;align-items:center;justify-content:center;
  border-radius:.5rem;background:var(--wl-blau-100,#D6E4FD);color:var(--wl-blau,#2563EB);
}
.codex-slot-ico svg{width:1rem;height:1rem}
.codex-slot[data-dunkel] .codex-slot-ico{background:rgba(37,99,235,.28);color:var(--wl-licht,#2ED58F)}
.codex-slot-titel{margin:0;font-family:"Sora",system-ui,sans-serif;font-size:.9rem;font-weight:600;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.codex-slot-motiv{margin:.3rem 0 0;font-size:.78rem;line-height:1.4;color:var(--wl-sekundaer,#4B5B70);text-wrap:pretty}
.codex-slot-meta{margin:.45rem 0 0;font-size:.66rem;font-weight:500;letter-spacing:.03em;color:var(--wl-hilfstext,#5F6E82);word-break:break-word}
.codex-slot[data-dunkel] .codex-slot-motiv{color:var(--wl-text-dunkel,#C9D6E4)}
.codex-slot[data-dunkel] .codex-slot-meta{color:var(--wl-gedaempft,#9BAEC1)}

/* Prägung mit der Bergmarke — nur eigene Landschafts-/Markenmotive, nie Kundenbilder */
.codex-slot-praegung{pointer-events:none;display:none}
.codex-slot[data-praegung="ecke"] .codex-slot-praegung{
  right:1rem;top:1rem;display:flex;width:2.75rem;height:2.75rem;align-items:center;justify-content:center;
  border-radius:.75rem;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.35);
  box-shadow:var(--wl-schatten-sm,0 1px 2px rgba(16,42,67,.05),0 2px 8px -2px rgba(16,42,67,.06));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.codex-slot[data-dunkel][data-praegung="ecke"] .codex-slot-praegung{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.12)}
.codex-slot[data-praegung="ecke"] .codex-slot-praegung img{width:1.75rem;height:1.75rem;border-radius:.4rem;filter:drop-shadow(0 1px 2px rgba(16,42,67,.35))}
.codex-slot[data-praegung="gross"] .codex-slot-praegung{inset:0;display:flex;align-items:center;justify-content:center}
.codex-slot[data-praegung="gross"] .codex-slot-praegung img{height:72%;width:auto;opacity:.10;border-radius:14%}
.codex-slot[data-dunkel][data-praegung="gross"] .codex-slot-praegung img{opacity:.14}

/* Bereit: Bild oben, Platzhalterlagen weg; <picture> und <img> gleich behandelt */
.codex-slot-bild{inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .6s ease}
.codex-slot-bild,.codex-slot-bild img{display:block;object-fit:cover;object-position:var(--pos,center)}
.codex-slot-bild img{width:100%;height:100%}
.codex-slot.ist-bereit .codex-slot-bild{opacity:1}
.codex-slot.ist-bereit > :not(.codex-slot-bild):not(.codex-slot-praegung){display:none}
.codex-slot.ist-bereit .codex-slot-praegung{z-index:2}
/* Kein Layoutsprung: Verhältnis bleibt, Bildkarte hält ihre Fläche */
.codex-slot.ist-bereit{background:var(--wl-flaeche-2,#EEF3F9)}

/* Reduzierte Bewegung und Fußschalter: Schimmer aus, Bild ohne Überblendung */
@media (prefers-reduced-motion:reduce){
  .codex-slot-schimmer{animation:none;opacity:.25}
  .codex-slot-bild{transition:none}
}
html.wl-motion-aus .codex-slot-schimmer{animation-play-state:paused}
html.wl-motion-aus .codex-slot-bild{transition:none}

/* Druck: Platzhalter reduziert */
@media print{
  .codex-slot{box-shadow:none;border:1px solid var(--wl-linie,#DDE5EE)}
  .codex-slot-schimmer,.codex-slot-verlauf{display:none}
}