/* ==========================================================================
   Titelbilder der Notizen (seit 02.10.2026, Gestaltung «Glanz» seit 02.11.2026).
   Jede Notiz zeigt ihre Kennzahl, etwa «89 %» oder «2,98 → 0,01», dazu einen
   Satz. Grund ist ein heller Farbschleier im Verlauf der Seite, rechts liegen
   drei Glaskugeln (Davids Markenzeichen) oder, wo es eines gibt, ein echtes
   Bild aus dem Projekt als Glaskarte. Im dunklen Modus wird der Grund tief.
   Markup: site/notizen/build.cjs (Funktionen cover und kugeln). Gebraucht auf
   den Notizen und im Notizen-Teaser der Startseite.
   Die Grössen hängen an der Kartenbreite (Container-Einheiten cqw), damit
   dieselbe Karte im Raster, gross oben und auf dem Handy gleich aufgeht.
   ========================================================================== */
/* Achtung: cqw gilt nur für die Kinder. Am Container selbst fiele es auf die
   Fensterbreite zurück, deshalb hier Prozent (bezogen auf die Kartenbreite). */
.cov{--cov-bg:#F5F6FA;--cov-ink:#0B0C10;--cov-mut:#4B4F5C;
     --a1:rgba(59,108,246,.42);--a2:rgba(139,92,246,.34);--a3:rgba(249,115,98,.30);
     position:relative;display:flex;flex-direction:column;justify-content:space-between;
     aspect-ratio:16/9;overflow:hidden;isolation:isolate;container-type:inline-size;
     padding:5.6% 6.2%;background:var(--cov-bg);color:var(--cov-ink);font-family:var(--sans,'Geist',system-ui,sans-serif);
     text-align:left;line-height:1.2}
.cov.kat-messung{--a1:rgba(22,180,130,.34);--a2:rgba(59,108,246,.34);--a3:rgba(139,92,246,.22)}
.cov.kat-briefing{--a1:rgba(249,115,98,.32);--a2:rgba(139,92,246,.32);--a3:rgba(59,108,246,.26)}
[data-theme="dark"] .cov{--cov-bg:#0C0E17;--cov-ink:#F4F5F8;--cov-mut:#B3B8C5;
     --a1:rgba(59,108,246,.40);--a2:rgba(139,92,246,.34);--a3:rgba(249,115,98,.22)}
/* Farbschleier: weiche Flecken, dazu ein feines Raster wie im Kopfteil der Startseite. */
.cov::before{content:"";position:absolute;inset:0;z-index:-3;
     background:radial-gradient(55% 75% at 88% 12%,var(--a1),transparent 70%),
                radial-gradient(50% 70% at 62% 108%,var(--a2),transparent 70%),
                radial-gradient(45% 60% at 104% 82%,var(--a3),transparent 70%),
                radial-gradient(60% 80% at -6% 110%,var(--a2),transparent 72%)}
.cov::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.5;
     background-image:linear-gradient(var(--line,rgba(11,12,16,.06)) 1px,transparent 1px),
                      linear-gradient(90deg,var(--line,rgba(11,12,16,.06)) 1px,transparent 1px);
     background-size:7% 12.4%;
     -webkit-mask-image:radial-gradient(70% 90% at 80% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 80% 40%,#000,transparent 75%)}

/* Murmeln wie auf pontavox.ch: grosse Perle als Quelle, farbige Kugeln, feine Fäden.
   Standbilder der PONTAVOX-Website, je Kugel anders gedreht (--d). */
.cov-kugeln{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cov-kugeln svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cov-kugeln path{fill:none;stroke:rgba(59,108,246,.45);stroke-width:1.2;vector-effect:non-scaling-stroke;stroke-linecap:round}
[data-theme="dark"] .cov-kugeln path{stroke:rgba(143,174,255,.45)}
.cov-kugeln i{position:absolute;left:var(--x);top:var(--y);width:var(--g);aspect-ratio:1;border-radius:50%;
     transform:translate(-50%,-50%) rotate(var(--d,0deg));background:center/contain no-repeat;
     filter:drop-shadow(0 1.6cqw 2.4cqw rgba(30,41,90,.28))}
[data-theme="dark"] .cov-kugeln i{filter:drop-shadow(0 0 2.6cqw rgba(110,149,255,.28))}
.cov-kugeln .m-blau{background-image:url(murmel-blau.webp)}
.cov-kugeln .m-violett{background-image:url(murmel-violett.webp)}
.cov-kugeln .m-koralle{background-image:url(murmel-koralle.webp)}
.cov-kugeln .m-gruen{background-image:url(murmel-gruen.webp)}
.cov-kugeln .m-perle{background-image:url(murmel-perle.webp)}

/* Echtes Bild als Glaskarte rechts, leicht gedreht und vom Rand angeschnitten. */
.cov-bild{position:absolute;z-index:-1;top:10%;left:36%;width:76%;height:auto;
     padding:.9cqw;border-radius:2.4cqw;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
     box-shadow:0 .4cqw 1cqw rgba(16,24,40,.06),0 5cqw 9cqw -3cqw rgba(30,41,90,.45);
     transform:perspective(120cqw) rotateY(-14deg) rotateX(4deg) rotate(-1.5deg);transform-origin:left center}
[data-theme="dark"] .cov-bild{background:rgba(22,25,34,.6);border-color:rgba(255,255,255,.12);
     box-shadow:0 5cqw 9cqw -3cqw rgba(0,0,0,.8)}

.cov-meta{font-size:max(9.5px,2.05cqw);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cov-mut)}
.cov-unten{display:block;margin-top:auto;padding-top:3cqw}
.cov-zahl{display:inline-block;font-weight:600;font-size:14.5cqw;line-height:1;letter-spacing:-.05em;
     font-variant-numeric:tabular-nums;white-space:nowrap;padding-bottom:.06em;
     background:var(--verlauf,linear-gradient(100deg,#3B6CF6,#8B5CF6 52%,#F97362));-webkit-background-clip:text;background-clip:text;
     -webkit-text-fill-color:transparent;color:transparent}
[data-theme="dark"] .cov-zahl{background:linear-gradient(100deg,#8FAEFF,#B79CFF 52%,#FF9A86);-webkit-background-clip:text;background-clip:text}
.cov[data-laenge="m"] .cov-zahl{font-size:11cqw}
.cov[data-laenge="l"] .cov-zahl{font-size:8.2cqw;letter-spacing:-.035em}
.cov[data-laenge="xl"] .cov-zahl{font-size:6.2cqw;letter-spacing:-.025em}
.cov-text{display:block;margin-top:2cqw;max-width:56%;font-size:max(11.5px,3cqw);line-height:1.3;font-weight:500;
     color:var(--cov-ink);text-wrap:balance}
.cov.mit-bild .cov-text{max-width:42%}
.cov-balken{display:block;margin-top:3cqw;height:max(4px,1.1cqw);max-width:56%;border-radius:99px;
     background:color-mix(in srgb,var(--cov-ink) 10%,transparent);overflow:hidden}
.cov-balken i{display:block;height:100%;width:var(--w,0%);border-radius:inherit;background:var(--verlauf,#3B6CF6)}
/* Wo Kategorie und Datum schon neben dem Bild stehen (Karten, Beitragskopf),
   bleibt das Bild ohne diese Zeile. */
.nz-karte .cov-meta,.ntz-card .cov-meta,.a-cover .cov-meta{display:none}