/* Dropprinters · tiles.css (v6)
   Gemeinsame Bausteine der Seiten:
     ul.int-row > li.int-plate (+ --more)                       Plattenreihe der Integrationen
     ul.int-grid[data-int-flow] > li.int-tile (+ .is-main)      Anschlussfeld; Ablauf (Lichtlinie, Kacheln verbinden sich) in js/tiles.js
     ul.stat-band > li.stat-band__item > b.stat-band__num[data-count] + span.stat-band__label   Kennzahlen (Zählwerk aus core.js)
     div.aud-tiles > article.aud-tile.glass                     Zielgruppen-Kacheln
   Vorgabe ist Milchglas auf der hellen Bühne bzw. in section.stage (Rezept von .glass in base.css: backdrop-filter, Specular-Kante,
   Lichtfleck; Schrift dunkel über --ink-*, Schatten violett-weich). Innerhalb .light/.on-light ruhige weiße Karten mit feiner Linie, kein Glas.
   Standard ist der Endzustand (ohne JS, reduzierte Bewegung): alle Kacheln verbunden, alle Platten sichtbar. Vorzustände gelten nur
   unter html.js + .is-armed (setzt tiles.js, wenn DP.animate) und prefers-reduced-motion: no-preference.
   Nur Tokens aus tokens.css; Basisklassen (.glass, .btn) bleiben in base.css und werden hier nur innerhalb der Bausteine ergänzt. */

/* ---------- Glas-Rezept für Bausteine ohne .glass (Kacheln, Kennzahlen) ---------- */
/* Milchglas: weißer Verlauf (.52–.78) über dem Bühnen-Fade, dunkle Schrift; die Deckkraft hält Text ≥ 4,5:1 über jedem Pastellfleck (Kontrast am Pixel geprüft) */
.int-tile,.stat-band{position:relative;isolation:isolate;
  background:linear-gradient(155deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.52) 55%,rgba(255,255,255,.64) 100%);
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 0 0 1px rgba(10,10,12,.06),0 18px 40px -24px rgba(48,32,110,.22),inset 0 1px 0 #fff}
/* Specular-Kante oben links (wie .glass::before) */
.int-tile::before,.stat-band::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 64%,rgba(255,255,255,.16) 100%);
  -webkit-mask:linear-gradient(#000,transparent 70%);mask:linear-gradient(#000,transparent 70%)}
/* Lichtfleck: tiles.js setzt data-light, core.js führt --mx/--my dem Zeiger nach */
.int-tile::after,.stat-band::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle var(--tile-spot,170px) at var(--mx,30%) var(--my,0%),rgba(255,255,255,.65),transparent 62%);
  opacity:.8;mix-blend-mode:normal}
/* Zweitschrift (Hinweis, Kennzahl-Beschriftung, Zielgruppen-Text) folgt dem Token --ink-1; im hellen Blatt gilt --ink-dark-1 */
.int-tile,.stat-band,.aud-tile{--tile-ink-1:var(--ink-1)}

/* ---------- 1 · Plattenreihe .int-row / .int-plate ---------- */
.int-row{--plate:40px;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.int-plate{position:relative;display:grid;place-items:center;flex:none;width:var(--plate);height:var(--plate);
  border-radius:calc(var(--plate) * .28);overflow:hidden;
  background:linear-gradient(180deg,var(--light-1) 0%,var(--light-0) 100%);
  box-shadow:0 0 0 1px rgba(10,10,12,.08),0 10px 22px -12px rgba(48,32,110,.30),inset 0 1px 0 var(--light-1),inset 0 -2px 4px -2px rgba(10,10,12,.14)}
.int-plate img{display:block;width:calc(var(--plate) - 2px);height:auto;max-width:none}
/* Linien-Icon statt Zeichen (z. B. Produktwelt mit /assets/icons/*.svg, viewBox 256 ohne Rand): kleiner gesetzt */
.int-plate--icon img{width:calc(var(--plate) * .56)}
.int-plate--more{font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:calc(var(--plate) * .4);line-height:1;
  letter-spacing:.01em;color:var(--ink-0);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(12px) saturate(var(--glass-sat));backdrop-filter:blur(12px) saturate(var(--glass-sat));
  box-shadow:inset 0 0 0 1px rgba(10,10,12,.08),inset 0 1px 0 #fff,0 10px 22px -14px rgba(48,32,110,.26)}
.light .int-plate,.on-light .int-plate{background:var(--light-1);
  box-shadow:0 0 0 1px rgba(10,10,12,.08),0 8px 16px -10px rgba(16,24,48,.35),inset 0 -2px 4px -2px rgba(10,10,12,.06)}
.light .int-plate--more,.on-light .int-plate--more{color:var(--ink-dark-0);background:var(--light-2);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px rgba(10,10,12,.06)}
@media (max-width:560px){.int-row{--plate:36px;gap:7px}}

/* ---------- 2 · Anschlussfeld .int-grid / .int-tile ---------- */
/* Flex-Raster: volle Reihen haben genau --cols Kacheln, eine unvollständige letzte Reihe füllt die Breite (keine Lücke).
   Spaltenzahl nach der Breite des Feldes (Container-Abfrage), damit es auch in schmalen Spalten trägt. */
.int-grid{--gap:clamp(10px,1.1vw,14px);position:relative;container:int-grid / inline-size;
  display:flex;flex-wrap:wrap;gap:var(--gap);margin:0;padding:0;list-style:none}
.int-tile{--cols:5;--plate:44px;flex:1 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - 1px);min-width:0;z-index:1;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"plate . dot" "name name name" "note note note";
  align-content:start;padding:16px 16px 17px;border-radius:var(--r-lg);color:var(--ink-0);
  transition:translate 420ms var(--ease-glass),border-color 320ms var(--ease-glass),box-shadow 420ms var(--ease-glass)}
@container int-grid (max-width:1039px){.int-tile{--cols:4}}
@container int-grid (max-width:719px){.int-tile{--cols:3}}
@container int-grid (max-width:479px){.int-tile{--cols:2;--plate:40px;padding:14px 14px 15px}}
.int-tile__plate{grid-area:plate;position:relative;display:grid;place-items:center;width:var(--plate);height:var(--plate);
  border-radius:12px;background:linear-gradient(180deg,var(--light-1) 0%,var(--light-0) 100%);
  box-shadow:0 0 0 1px rgba(10,10,12,.07),0 12px 24px -12px rgba(48,32,110,.30),inset 0 1px 0 var(--light-1),inset 0 -2px 5px -2px rgba(10,10,12,.16);
  transition:box-shadow 420ms var(--ease-glass)}
.int-tile__plate img{display:block;width:calc(var(--plate) - 4px);height:auto;max-width:none}
/* Aufleuchten der Platte beim Verbinden (Ring + Schein, nur Deckkraft animiert) */
.int-tile__plate::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px rgba(34,211,238,.9),0 0 18px 3px rgba(34,211,238,.4),0 0 46px 10px rgba(124,58,237,.22)}
.int-tile__name{grid-area:name;margin-top:clamp(18px,1.8vw,24px);font-family:var(--font-display);font-weight:600;font-size:16.5px;
  line-height:1.2;letter-spacing:-.012em;color:inherit;overflow-wrap:anywhere}
.int-tile__note{grid-area:note;margin-top:4px;font-size:13.5px;line-height:1.35;color:var(--tile-ink-1)}
/* Statuspunkt: grauer Grund, Akzent als Ebene darüber (Deckkraft/Skalierung), Ring einmal beim Verbinden */
.int-tile__dot{grid-area:dot;position:relative;display:block;width:9px;height:9px;margin:5px 1px 0 12px;border-radius:50%;
  background:rgba(10,10,12,.16);box-shadow:0 0 0 3px rgba(10,10,12,.04)}
.int-tile__dot::before,.int-tile__dot::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.int-tile__dot::before{background:var(--accent);box-shadow:0 0 0 3px rgba(34,211,238,.18),0 0 14px 1px rgba(34,211,238,.5);
  transition:opacity 360ms var(--ease-out),scale 520ms var(--ease-out)}
.int-tile__dot::after{opacity:0;box-shadow:0 0 0 1.5px var(--accent)}
/* Hauptanschluss (z. B. Shopify beim Connector): Cyan-Kante, Akzent-Hauch im Milchglas */
.int-tile.is-main{border-color:rgba(34,211,238,.65);
  background:radial-gradient(120% 95% at 0% 0%,rgba(34,211,238,.12) 0%,rgba(34,211,238,0) 58%),
    linear-gradient(155deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.52) 55%,rgba(255,255,255,.64) 100%);
  box-shadow:0 0 0 1px rgba(34,211,238,.14),0 18px 36px -20px rgba(34,211,238,.35),
    inset 0 1px 0 #fff,inset 0 -1px 0 rgba(34,211,238,.18)}
.int-tile.is-main::before{background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(34,211,238,.16) 30%,rgba(255,255,255,0) 52%,rgba(255,255,255,0) 70%,rgba(34,211,238,.18) 100%)}
/* Hinweis bleibt dunkel (--ink-1): Cyan auf Milchglas hielte keinen Kontrast */
.int-tile.is-main .int-tile__note{color:var(--ink-1)}
/* Hover/Fokus: Kachel hebt sich, Platte bekommt Licht */
@media (hover:hover){
  .int-tile:hover{translate:0 -3px;border-color:rgba(10,10,12,.16)}
  .int-tile.is-main:hover{border-color:rgba(34,211,238,.7)}
  .int-tile:hover .int-tile__plate{box-shadow:0 0 0 1px rgba(10,10,12,.08),0 0 0 5px rgba(34,211,238,.10),0 0 28px 2px rgba(34,211,238,.35),
    0 14px 26px -12px rgba(48,32,110,.30),inset 0 1px 0 var(--light-1),inset 0 -2px 5px -2px rgba(10,10,12,.16)}
}
.int-tile:focus-within{translate:0 -3px;border-color:rgba(10,10,12,.16)}
.int-tile:focus-within .int-tile__plate{box-shadow:0 0 0 1px rgba(10,10,12,.08),0 0 0 5px rgba(34,211,238,.10),0 0 28px 2px rgba(34,211,238,.35),
  0 14px 26px -12px rgba(48,32,110,.30),inset 0 1px 0 var(--light-1)}

/* Lichtlinie (baut tiles.js): liegt hinter den Kacheln, das Glas bricht sie zu einem farbigen Schein, in den Fugen bleibt sie scharf */
.int-flow{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.int-flow path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.int-flow__glow{stroke-width:12;opacity:.22}
.int-flow__core{stroke-width:2.25}
.int-flow__s1{stop-color:var(--accent)}
.int-flow__s2{stop-color:var(--accent-2)}
.int-flow__s3{stop-color:var(--aurora-d)}

/* Helle Fassung: weiße Karten mit feiner Linie */
.light .int-tile,.on-light .int-tile{color:var(--ink-dark-0);background:var(--light-1);border-color:rgba(10,10,12,.08);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(16,24,48,.05),0 16px 32px -22px rgba(16,24,48,.3)}
.light .int-tile::before,.on-light .int-tile::before{display:none}
.light .int-tile::after,.on-light .int-tile::after{mix-blend-mode:normal;opacity:0;transition:opacity 320ms var(--ease-glass);
  background:radial-gradient(circle var(--tile-spot,170px) at var(--mx,30%) var(--my,0%),rgba(34,211,238,.08),transparent 62%)}
.light .int-tile__plate,.on-light .int-tile__plate{background:var(--light-0);
  box-shadow:0 0 0 1px rgba(10,10,12,.06),inset 0 1px 0 var(--light-1),inset 0 -2px 4px -2px rgba(10,10,12,.08)}
.light .int-tile__note,.on-light .int-tile__note{color:var(--ink-dark-1)}
.light .int-tile__dot,.on-light .int-tile__dot{background:rgba(10,10,12,.16);box-shadow:0 0 0 3px rgba(10,10,12,.04)}
.light .int-tile__dot::before,.on-light .int-tile__dot::before{box-shadow:0 0 0 3px rgba(34,211,238,.22),0 0 10px rgba(34,211,238,.55)}
.light .int-tile.is-main,.on-light .int-tile.is-main{border-color:rgba(34,211,238,.65);
  background:radial-gradient(120% 95% at 0% 0%,rgba(34,211,238,.10) 0%,rgba(34,211,238,0) 60%),var(--light-1);
  box-shadow:0 0 0 1px rgba(34,211,238,.18),0 18px 36px -20px rgba(34,211,238,.5),0 1px 2px rgba(16,24,48,.05)}
.light .int-tile.is-main .int-tile__note,.on-light .int-tile.is-main .int-tile__note{color:var(--ink-dark-1)}
@media (hover:hover){
  .light .int-tile:hover,.on-light .int-tile:hover{border-color:rgba(10,10,12,.16);box-shadow:0 1px 2px rgba(16,24,48,.05),0 22px 40px -22px rgba(16,24,48,.38)}
  .light .int-tile.is-main:hover,.on-light .int-tile.is-main:hover{border-color:rgba(34,211,238,.85)}
  .light .int-tile:hover::after,.on-light .int-tile:hover::after{opacity:1}
  .light .int-tile:hover .int-tile__plate,.on-light .int-tile:hover .int-tile__plate{box-shadow:0 0 0 1px rgba(10,10,12,.08),0 0 0 5px rgba(34,211,238,.10),0 10px 22px -12px rgba(16,24,48,.4)}
}
.light .int-tile:focus-within .int-tile__plate,.on-light .int-tile:focus-within .int-tile__plate{box-shadow:0 0 0 1px rgba(10,10,12,.08),0 0 0 5px rgba(34,211,238,.12)}
.light .int-flow__glow,.on-light .int-flow__glow{opacity:.22}

/* Ablauf data-int-flow: Vorzustand „noch nicht verbunden“ nur mit JS und ohne reduzierte Bewegung */
@media (prefers-reduced-motion:no-preference){
  .js .int-grid.is-armed .int-tile__plate{transition:scale 560ms var(--ease-out),box-shadow 420ms var(--ease-glass)}
  .js .int-grid.is-armed .int-tile__plate img{transition:opacity 480ms var(--ease-out)}
  .js .int-grid.is-armed .int-tile:not(.is-linked) .int-tile__plate{scale:.9}
  .js .int-grid.is-armed .int-tile:not(.is-linked) .int-tile__plate img{opacity:.3}
  .js .int-grid.is-armed .int-tile:not(.is-linked) .int-tile__dot::before{opacity:0;scale:.3}
  .js .int-grid.is-armed .int-tile.is-linked .int-tile__plate::after{animation:int-flash 1000ms var(--ease-out) both}
  .js .int-grid.is-armed .int-tile.is-linked .int-tile__dot::after{animation:int-ping 1100ms var(--ease-out) both}
}
@keyframes int-flash{0%{opacity:0}16%{opacity:1}100%{opacity:0}}
@keyframes int-ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.4)}}

/* Plattenreihe: gestaffeltes Einblenden (tiles.js setzt --i und .is-in) */
@media (prefers-reduced-motion:no-preference){
  .js .int-row.is-armed .int-plate{opacity:0;translate:0 8px;scale:.9;
    transition:opacity 420ms var(--ease-out),translate 620ms var(--ease-out),scale 620ms var(--ease-out);
    transition-delay:calc(var(--i,0) * 40ms)}
  .js .int-row.is-armed.is-in .int-plate{opacity:1;translate:none;scale:none}
}

/* ---------- 3 · Kennzahlen .stat-band ---------- */
.stat-band{--sep:rgba(10,10,12,.10);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  margin:0;padding:clamp(6px,.8vw,10px);list-style:none;border-radius:var(--r-xl);
  box-shadow:0 0 0 1px rgba(10,10,12,.06),0 30px 60px -40px rgba(48,32,110,.28),inset 0 1px 0 #fff}
.stat-band{--tile-spot:300px}
.stat-band__item{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;
  padding:clamp(22px,2.6vw,38px) clamp(20px,2.6vw,40px)}
.stat-band__item+.stat-band__item::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;
  background:linear-gradient(180deg,transparent,var(--sep) 22%,var(--sep) 78%,transparent)}
.stat-band__num{display:block;font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:clamp(54px,6vw,92px);
  line-height:1;letter-spacing:-.005em;color:var(--ink-0);white-space:nowrap;padding-right:.06em}
/* core.js setzt Zeichen ohne Ziffer als eigene Flex-Kinder: das Leerzeichen in „0 €“ bliebe sonst ohne Breite */
.stat-band__num .count__c{white-space:pre}
/* tiles.js setzt die Fensterbreite auf die Zielziffer; die rollenden Ziffern bleiben darin mittig */
.stat-band__num .count__strip>span{text-align:center}
.stat-band__num .count__c:last-child:not(:first-child){color:var(--ink-1)}
.stat-band__label{display:flex;flex-direction:column;gap:12px;font-size:15.5px;line-height:1.4;color:var(--tile-ink-1)}
/* kurzer Strich im Verlauf der Bühnenlinie zwischen Zahl und Beschriftung */
.stat-band__label::before{content:"";width:28px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2) 60%,var(--aurora-d));opacity:.85}
.light .stat-band,.on-light .stat-band{--sep:rgba(10,10,12,.10);background:var(--light-1);border-color:rgba(10,10,12,.08);
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 2px rgba(16,24,48,.05),0 30px 60px -40px rgba(16,24,48,.32)}
.light .stat-band::before,.on-light .stat-band::before{display:none}
.light .stat-band::after,.on-light .stat-band::after{display:none}
.light .stat-band__num,.on-light .stat-band__num{color:var(--ink-dark-0)}
.light .stat-band__num .count__c:last-child:not(:first-child),.on-light .stat-band__num .count__c:last-child:not(:first-child){color:var(--ink-dark-1)}
.light .stat-band__label,.on-light .stat-band__label{color:var(--ink-dark-1)}
@media (max-width:640px){
  .stat-band{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);padding:4px 6px}
  .stat-band__item{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:20px 18px}
  .stat-band__item+.stat-band__item::before{left:18px;right:18px;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--sep) 18%,var(--sep) 82%,transparent)}
  .stat-band__num{font-size:clamp(46px,14vw,60px)}
  .stat-band__label{align-items:flex-end;text-align:right;gap:10px}
}

/* ---------- 4 · Zielgruppen-Kacheln .aud-tiles / .aud-tile ---------- */
.aud-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px);align-items:stretch}
@media (max-width:820px){.aud-tiles{grid-template-columns:minmax(0,1fr)}}
/* Milchglas mit Pastelltönung (Rezept von .glass plus Lichtkante); die zweite Kachel ist violett-rosa statt hellblau getönt */
.aud-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  padding:clamp(26px,3.3vw,46px);border-radius:var(--r-xl);color:var(--ink-0);
  background:radial-gradient(90% 70% at 100% 0%,rgba(147,197,253,.28) 0%,rgba(147,197,253,0) 62%),
    linear-gradient(160deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 55%,rgba(255,255,255,.66) 100%);
  border:1px solid rgba(10,10,12,.06);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:0 34px 70px -40px rgba(48,32,110,.26),inset 0 1px 0 #fff}
.aud-tile:nth-child(2n){background:radial-gradient(90% 70% at 0% 0%,rgba(196,181,253,.3) 0%,rgba(196,181,253,0) 62%),
    radial-gradient(70% 60% at 100% 100%,rgba(245,198,232,.3) 0%,rgba(245,198,232,0) 60%),
    linear-gradient(200deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.5) 55%,rgba(255,255,255,.66) 100%)}
/* Glanzkante von .glass hier schwächer: der Kicker steht genau darin */
.aud-tile.glass::before{opacity:.45}
/* Kicker als kleines Milchglas-Badge: dunkle Schrift auf hellem Grund (≥ 4,5:1), auch über der Pastelltönung oben links */
.aud-tile__kicker{display:inline-flex;align-items:center;min-height:28px;margin:0 0 18px;padding:0 12px;border-radius:var(--r-pill);
  font-family:var(--font-accent);font-weight:800;font-style:italic;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-1);background:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(10,10,12,.08),inset 0 1px 0 #fff}
.aud-tile__title{margin:0 0 14px;font-family:var(--font-display);font-weight:600;font-size:clamp(26px,2.5vw,36px);line-height:1.08;
  letter-spacing:-.03em;text-wrap:balance;max-width:22ch;color:inherit}
.aud-tile__text{margin:0 0 26px;font-size:16.5px;line-height:1.6;color:var(--tile-ink-1);max-width:52ch}
.aud-tile__benefits{display:grid;gap:12px;margin:0 0 30px;padding:0;list-style:none}
.aud-tile__benefits li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.5;color:var(--ink-0);min-width:0}
/* Häkchen: Kreis + Phosphor „check“ (bold, MIT) als Maske */
.aud-tile__benefits li::before,.aud-tile__benefits li::after{content:"";position:absolute;left:0;top:calc(.75em - 11px);width:22px;height:22px}
.aud-tile__benefits li::before{border-radius:50%;background:var(--accent);box-shadow:none}
.aud-tile__benefits li::after{background:var(--ink-dark-0);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/12px 12px no-repeat}
.aud-tile__sub{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 14px;font-family:var(--font-accent);font-weight:800;
  font-style:italic;font-size:14px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--tile-ink-1)}
.aud-tile__sub::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(10,10,12,.14),rgba(10,10,12,0))}
.aud-tile .int-row{margin-bottom:34px}
/* Schaltfläche unten bündig; Aussehen hier gesetzt (base.css kennt kein .btn--light): schwarze Pille mit weißer Schrift (--solid/--on-solid) */
.aud-tile__cta{margin-top:auto;align-self:stretch}
.aud-tile .aud-tile__cta{--btn-bg:var(--solid);--btn-fg:var(--on-solid);--btn-shine:rgba(255,255,255,.22);
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  box-shadow:0 14px 32px -14px rgba(10,10,12,.45),inset 0 1px 0 rgba(255,255,255,.12)}

.light .aud-tile,.on-light .aud-tile{color:var(--ink-dark-0);background:var(--light-1);border-color:rgba(10,10,12,.08);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(16,24,48,.05),0 34px 70px -42px rgba(16,24,48,.34),inset 0 1px 0 var(--light-1)}
.light .aud-tile.glass::before,.on-light .aud-tile.glass::before{opacity:.5}
.light .aud-tile__kicker,.on-light .aud-tile__kicker{color:var(--ink-dark-1);background:var(--light-0);box-shadow:inset 0 0 0 1px rgba(10,10,12,.08)}
.light .aud-tile__text,.on-light .aud-tile__text{color:var(--ink-dark-1)}
.light .aud-tile__benefits li,.on-light .aud-tile__benefits li{color:var(--ink-dark-0)}
.light .aud-tile__benefits li::before,.on-light .aud-tile__benefits li::before{background:var(--accent);box-shadow:none}
.light .aud-tile__benefits li::after,.on-light .aud-tile__benefits li::after{background:var(--ink-dark-0)}
.light .aud-tile__sub,.on-light .aud-tile__sub{color:var(--ink-dark-1)}
.light .aud-tile__sub::after,.on-light .aud-tile__sub::after{background:linear-gradient(90deg,rgba(10,10,12,.14),rgba(10,10,12,0))}
.light .aud-tile .aud-tile__cta,.on-light .aud-tile .aud-tile__cta{--btn-bg:var(--ink-dark-0);--btn-fg:var(--on-solid);
  background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);
  box-shadow:0 14px 30px -16px rgba(10,10,12,.55),inset 0 1px 0 rgba(255,255,255,.12)}
@media (max-width:560px){
  .aud-tile__text{font-size:16px}
  .aud-tile__benefits li{font-size:15px}
}

/* ---------- Fallbacks ---------- */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .int-tile,.int-tile.is-main,.stat-band,.aud-tile,.aud-tile:nth-child(2n),.int-plate--more{background:rgba(255,255,255,.94)}
  .light :is(.int-tile,.stat-band,.aud-tile),.on-light :is(.int-tile,.stat-band,.aud-tile){background:var(--light-1)}
}
@media (prefers-reduced-transparency:reduce){
  .int-tile,.int-tile.is-main,.stat-band,.aud-tile,.aud-tile:nth-child(2n){background:var(--light-1)}
  .int-tile::after,.stat-band::after{display:none}
  .light :is(.int-tile,.stat-band,.aud-tile),.on-light :is(.int-tile,.stat-band,.aud-tile){background:var(--light-1)}
}
@media (forced-colors:active){
  .int-tile__dot::before{background:CanvasText;box-shadow:none}
  .aud-tile__benefits li::after{background:CanvasText}
  .int-flow{display:none}
}