/* Die wählbaren Stile der Gehirn-App.
   stil-wahl.js setzt data-stil auf <html>; "standard" hat hier keine eigenen Regeln.
   Wichtig: Stile ändern nur das Aussehen, nie Grössen oder Positionen
   (Kachel 62 x 62 px, Raster 4 x 74 px, Dock 90 px hoch, gleiche Abstände). */

/* Streifen hinter der Statusleiste (Uhrzeit, Akku): deren Schrift ist auf dem iPhone
   immer weiss. Helle Stile setzen --statusleiste auf eine dunkle Stilfarbe. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--statusleiste, transparent);
  z-index: 20;
  pointer-events: none;
}

/* Hintergrund-Szene (szenen.js): feste Ebene hinter Raster und Dock, auf die Handy-Spalte begrenzt */
.szene { display: none; }

[data-stil]:not([data-stil="standard"]) .szene {
  display: block;
  position: fixed;
  top: 0;
  bottom: calc(0px - var(--luecke, 0px));
  left: 50%;
  width: 100%;
  max-width: 430px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.szene svg { display: block; width: 100%; height: 100%; }

/* Inhalt liegt über der Szene */
[data-stil] .handy { z-index: 1; }

/* Der Wal treibt ganz langsam hin und her (nur transform) */
.szene .wal { animation: wal-treiben 26s ease-in-out infinite; }

/* Das eine bewegliche Motiv der übrigen Szenen (szenen-<id>.js) treibt genauso */
.szene .treibt { animation: wal-treiben 26s ease-in-out infinite; }

@keyframes wal-treiben {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-16px, -7px); }
}

@media (prefers-reduced-motion: reduce) {
  .szene .wal, .szene .treibt { animation: none; }
}

/* Knöpfe (button) übernehmen Schrift-Einstellungen des Stils nicht von selbst */
[data-stil] .icon { text-transform: inherit; letter-spacing: inherit; }

/* Symbole liegen über Verzierungen der Kachel (Pseudo-Elemente) */
[data-stil] .kachel svg { position: relative; }


/* ===================== 01 Pixel art ===================== */
[data-stil="pixel"] {
  --text: #fff;
  --text-datum: #ffec27;
  --akzent: #ff004d;
  --akzent-text: #fff;
  --radius: 0;
  --dock-hintergrund: #29366f;
}

[data-stil="pixel"] body {
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  text-transform: uppercase;
  background-color: #1d1238;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 8px 8px;
}

[data-stil="pixel"] .datum { font-weight: 700; letter-spacing: 1px; text-shadow: 2px 2px 0 #000; }

[data-stil="pixel"] .name { font-weight: 700; letter-spacing: -0.5px; text-shadow: 2px 2px 0 #000; }

/* getreppter Pixel-Rand: vier harte Schatten lassen die Ecken frei */
[data-stil="pixel"] .kachel {
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.35),
    inset 4px 4px 0 rgba(255, 255, 255, 0.35),
    0 -4px 0 0 #0b0716,
    0 4px 0 0 #0b0716,
    -4px 0 0 0 #0b0716,
    4px 0 0 0 #0b0716;
}

[data-stil="pixel"] .kachel svg {
  stroke-width: 2.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
}

[data-stil="pixel"] .punkt {
  border-radius: 0;
  background: #ffec27;
  border: 2px solid #000;
}

[data-stil="pixel"] .dock {
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset -4px -4px 0 rgba(0, 0, 0, 0.35),
    inset 4px 4px 0 rgba(255, 255, 255, 0.2),
    0 -4px 0 0 #0b0716,
    0 4px 0 0 #0b0716,
    -4px 0 0 0 #0b0716,
    4px 0 0 0 #0b0716;
}


/* ===================== 02 Paper cutout ===================== */
[data-stil="papier"] {
  --text: #fff6e6;
  --text-datum: #ffe3b8;
  --akzent: #e07a3f;
  --akzent-text: #fff;
  --radius: 9px;
  --dock-hintergrund: #f2e3c6;
}

[data-stil="papier"] body {
  background-color: #efe5d1;
  background-image:
    radial-gradient(rgba(120, 90, 50, 0.09) 1px, transparent 1.6px),
    radial-gradient(rgba(120, 90, 50, 0.06) 1px, transparent 1.6px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 5px;
}

[data-stil="papier"] .datum { font-weight: 700; }

[data-stil="papier"] .name { font-weight: 600; text-shadow: 0 1px 2px rgba(30, 10, 50, 0.8); }

/* matte Tonpapier-Farbe: ein heller Schleier dämpft die App-Farbe */
[data-stil="papier"] .kachel {
  background:
    linear-gradient(rgba(245, 232, 210, 0.22), rgba(245, 232, 210, 0.22)),
    var(--farbe, #888);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.22),
    3px 3px 0 rgba(70, 45, 20, 0.28),
    6px 6px 0 rgba(70, 45, 20, 0.12);
  rotate: -1.5deg;
}

[data-stil="papier"] .icon:nth-child(4n+2) .kachel { rotate: 2deg; }
[data-stil="papier"] .icon:nth-child(4n+3) .kachel { rotate: -2.5deg; }
[data-stil="papier"] .icon:nth-child(4n) .kachel { rotate: 1deg; }
[data-stil="papier"] .icon:nth-child(5n) .kachel { rotate: 3deg; }

[data-stil="papier"] .punkt {
  background: #ef8a3c;
  border: 2px solid #efe5d1;
  box-shadow: 2px 2px 0 rgba(70, 45, 20, 0.3);
}

/* Dock als Papierstreifen */
[data-stil="papier"] .dock {
  border-radius: 3px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: repeating-linear-gradient(90deg, rgba(90, 60, 30, 0.05) 0 2px, transparent 2px 9px);
  box-shadow: 4px 4px 0 rgba(70, 45, 20, 0.25), 8px 8px 0 rgba(70, 45, 20, 0.1);
  rotate: -0.6deg;
}


/* ===================== 03 Ink wash ===================== */
[data-stil="tusche"] {
  --text: #1c1c1c;
  --text-datum: #3a3a3a;
  --akzent: #b8262c;
  --akzent-text: #fff;
  --radius: 58% 42% 55% 45% / 46% 56% 44% 54%;
  --symbol: #161616;
  --kachel-schatten: none;
  --statusleiste: #1d1d1d;
  --dock-hintergrund: transparent;
}

[data-stil="tusche"] body {
  font-family: "Songti SC", "Hiragino Mincho ProN", Georgia, "Times New Roman", serif;
  background-color: #f1ebdd;
  background-image:
    radial-gradient(55% 35% at 85% 88%, rgba(0, 0, 0, 0.09), transparent 70%),
    radial-gradient(45% 25% at 8% 40%, rgba(0, 0, 0, 0.06), transparent 70%),
    repeating-linear-gradient(103deg, rgba(120, 100, 70, 0.04) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(17deg, rgba(120, 100, 70, 0.03) 0 1px, transparent 1px 21px);
}

[data-stil="tusche"] .datum { letter-spacing: 3px; font-weight: 600; }

[data-stil="tusche"] .name { font-weight: 600; font-size: 11px; letter-spacing: -0.3px; }

/* verlaufener Tuschefleck: unregelmässig, heller Kern, ausgelaufener Rand, ein dunkler Nachlauf */
[data-stil="tusche"] .kachel {
  --tusche: 0.26;
  background:
    radial-gradient(38% 30% at 72% 74%, rgba(15, 15, 15, calc(var(--tusche) + 0.12)), rgba(15, 15, 15, 0) 100%),
    radial-gradient(62% 54% at 42% 44%,
      rgba(25, 25, 25, calc(var(--tusche) * 0.35)) 0%,
      rgba(25, 25, 25, var(--tusche)) 70%,
      rgba(10, 10, 10, calc(var(--tusche) + 0.22)) 88%,
      rgba(10, 10, 10, 0) 100%);
}

[data-stil="tusche"] .kachel svg { stroke-width: 2.2; }

[data-stil="tusche"] .icon:nth-child(3n+2) .kachel { --tusche: 0.18; border-radius: 38% 62% 30% 70% / 62% 35% 65% 38%; }
[data-stil="tusche"] .icon:nth-child(3n) .kachel { --tusche: 0.32; border-radius: 66% 34% 58% 42% / 36% 64% 36% 64%; }
[data-stil="tusche"] .icon:nth-child(4n) .kachel { border-radius: 30% 70% 52% 48% / 58% 30% 70% 42%; }
[data-stil="tusche"] .icon:nth-child(5n+1) .kachel { rotate: 14deg; }
[data-stil="tusche"] .icon:nth-child(5n+3) .kachel { rotate: -11deg; }

/* Stempel-Rot */
[data-stil="tusche"] .punkt {
  border-radius: 3px;
  background: #b8262c;
  border: 2px solid #f1ebdd;
  rotate: 8deg;
}

/* Dock als breiter Pinselstrich */
[data-stil="tusche"] .dock {
  border-radius: 50% 45% 55% 40% / 60% 50% 50% 40%;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(90deg, transparent 0%, rgba(20, 20, 20, 0.13) 6%, rgba(20, 20, 20, 0.18) 45%, rgba(20, 20, 20, 0.1) 90%, transparent 100%);
}


/* ===================== 04 Voxel ===================== */
[data-stil="voxel"] {
  --text: #fff;
  --text-datum: #9fb3ff;
  --akzent: #3fbf6f;
  --akzent-text: #fff;
  --radius: 4px;
  --dock-hintergrund: #2b3048;
}

/* isometrisches Raster aus drei Linienscharen */
[data-stil="voxel"] body {
  background-color: #12141d;
  background-image:
    repeating-linear-gradient(30deg, rgba(140, 160, 255, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(150deg, rgba(140, 160, 255, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(140, 160, 255, 0.05) 0 1px, transparent 1px 38px);
}

[data-stil="voxel"] .datum { font-weight: 700; letter-spacing: 1px; }

[data-stil="voxel"] .name { font-weight: 700; text-shadow: 1px 1px 0 #000; }

/* 3D-Block: helle Oberkante, dunkle Seiten nach unten-rechts (gestapelte harte Schatten) */
[data-stil="voxel"] .kachel {
  background:
    linear-gradient(rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.32)) top / 100% 9px no-repeat,
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 13px),
    var(--farbe, #888);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    1px 1px 0 #000a, 2px 2px 0 #000a, 3px 3px 0 #000a, 4px 4px 0 #000a, 5px 5px 0 #000a, 6px 6px 0 #000a,
    8px 9px 6px rgba(0, 0, 0, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    1px 1px 0 color-mix(in srgb, var(--farbe) 62%, #000),
    2px 2px 0 color-mix(in srgb, var(--farbe) 58%, #000),
    3px 3px 0 color-mix(in srgb, var(--farbe) 54%, #000),
    4px 4px 0 color-mix(in srgb, var(--farbe) 50%, #000),
    5px 5px 0 color-mix(in srgb, var(--farbe) 46%, #000),
    6px 6px 0 color-mix(in srgb, var(--farbe) 42%, #000),
    8px 9px 6px rgba(0, 0, 0, 0.45);
}

[data-stil="voxel"] .kachel svg { stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

[data-stil="voxel"] .punkt {
  border-radius: 2px;
  background: #ffb020;
  border: 2px solid #12141d;
  box-shadow: 2px 2px 0 #7a4c00;
}

[data-stil="voxel"] .dock {
  border-radius: 6px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) top / 100% 8px no-repeat,
    #2b3048;
  box-shadow:
    1px 1px 0 #1c2033, 2px 2px 0 #1a1e30, 3px 3px 0 #181b2c, 4px 4px 0 #161928,
    5px 5px 0 #141724, 6px 6px 0 #121520, 10px 12px 10px rgba(0, 0, 0, 0.5);
}


/* ===================== 05 Blueprint ===================== */
[data-stil="blaupause"] {
  --text: #eaf2ff;
  --text-datum: #cfe2ff;
  --akzent: #e8f1ff;
  --akzent-text: #12396c;
  --radius: 6px;
  --symbol: #fff;
  --kachel-schatten: none;
  --dock-hintergrund: transparent;
}

/* Millimeterpapier: feine Linien alle 8 px, kräftige alle 40 px */
[data-stil="blaupause"] body {
  font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
  background-color: #1b4f8f;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
}

[data-stil="blaupause"] .datum { text-transform: uppercase; letter-spacing: 2px; }

[data-stil="blaupause"] .name { letter-spacing: -0.4px; }

[data-stil="blaupause"] .kachel {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid #e8f1ff;
}

[data-stil="blaupause"] .kachel svg { stroke-width: 1.6; }

/* Ecken-Markierungen ausserhalb der Kachel */
[data-stil="blaupause"] .kachel::after {
  content: "";
  position: absolute;
  inset: -6px;
  pointer-events: none;
  --l: #9cc8ff;
  background:
    linear-gradient(var(--l), var(--l)) left top / 7px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left top / 1px 7px no-repeat,
    linear-gradient(var(--l), var(--l)) right top / 7px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) right top / 1px 7px no-repeat,
    linear-gradient(var(--l), var(--l)) left bottom / 7px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) left bottom / 1px 7px no-repeat,
    linear-gradient(var(--l), var(--l)) right bottom / 7px 1px no-repeat,
    linear-gradient(var(--l), var(--l)) right bottom / 1px 7px no-repeat;
}

/* Masslinie über der ersten Kachel */
[data-stil="blaupause"] .raster .icon:first-child .kachel::before {
  content: "62";
  position: absolute;
  top: -17px;
  left: 0;
  right: 0;
  height: 9px;
  border-left: 1px solid #9cc8ff;
  border-right: 1px solid #9cc8ff;
  background: linear-gradient(90deg, #9cc8ff 0 36%, transparent 36% 64%, #9cc8ff 64%) center / 100% 1px no-repeat;
  color: #cfe2ff;
  font-size: 8px;
  line-height: 9px;
  text-align: center;
}

[data-stil="blaupause"] .punkt {
  background: #1b4f8f;
  border: 2px solid #ffd166;
}

[data-stil="blaupause"] .dock {
  background: rgba(14, 35, 80, 0.88);
  /* Rand als innerer Schatten: ein echter border würde die Icons verschieben */
  box-shadow: inset 0 0 0 1.5px rgba(232, 241, 255, 0.85);
  border-radius: 14px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-stil="blaupause"] .dock::after {
  content: "DOCK  M 1:1";
  position: absolute;
  top: -15px;
  right: 18px;
  font-size: 9px;
  letter-spacing: 1px;
  color: #cfe2ff;
}


/* ===================== 06 Cross-stitch ===================== */
[data-stil="kreuzstich"] {
  --text: #fffaf0;
  --text-datum: #fffaf0;
  --akzent: #c0392b;
  --akzent-text: #fff;
  --radius: 10px;
  --symbol: #fff8e7;
  --kachel-schatten: 0 2px 3px rgba(70, 50, 20, 0.25);
  --statusleiste: #4a3b2a;
  --dock-hintergrund: #cdb994;
}

/* Stickleinen: Fadengitter mit Löchern */
[data-stil="kreuzstich"] body {
  background-color: #efe6d0;
  background-image:
    radial-gradient(circle, rgba(110, 90, 55, 0.22) 0.9px, transparent 1.3px),
    repeating-linear-gradient(0deg, rgba(150, 125, 80, 0.12) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(90deg, rgba(150, 125, 80, 0.12) 0 1.5px, transparent 1.5px 5px);
  background-size: 5px 5px, auto, auto;
}

[data-stil="kreuzstich"] .datum { font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 2px #3d2a40, 0 0 4px #3d2a40; }

[data-stil="kreuzstich"] .name { font-weight: 700; text-shadow: 0 1px 2px #3d2a40, 0 0 4px #3d2a40; }

/* Kreuzchen über der App-Farbe, Löcher in Leinenfarbe, gestrichelte Naht */
[data-stil="kreuzstich"] .kachel {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M1 1L5 5M5 1L1 5' stroke='%23fff' stroke-opacity='.38' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M1.4 4.6L4.6 1.4' stroke='%23000' stroke-opacity='.18' stroke-width='.7'/%3E%3Ccircle cx='0' cy='0' r='.9' fill='%23efe6d0'/%3E%3Ccircle cx='6' cy='0' r='.9' fill='%23efe6d0'/%3E%3Ccircle cx='0' cy='6' r='.9' fill='%23efe6d0'/%3E%3Ccircle cx='6' cy='6' r='.9' fill='%23efe6d0'/%3E%3C/svg%3E") 0 0 / 6px 6px,
    var(--farbe, #888);
  outline: 2px dashed rgba(255, 248, 231, 0.9);
  outline-offset: -5px;
}

/* Symbole wie dicker Faden: kurze Stiche */
[data-stil="kreuzstich"] .kachel svg {
  stroke-width: 2.8;
  stroke-dasharray: 3 1.3;
}

[data-stil="kreuzstich"] .punkt {
  background: #e67e22;
  border: 2px solid #efe6d0;
}

[data-stil="kreuzstich"] .dock {
  border-radius: 22px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image:
    radial-gradient(circle, rgba(90, 70, 40, 0.25) 0.9px, transparent 1.3px);
  background-size: 5px 5px;
  outline: 2px dashed #7a5c3a;
  outline-offset: -8px;
  box-shadow: 0 2px 4px rgba(70, 50, 20, 0.3);
}


/* ===================== 07 Risograph ===================== */
/* Nur drei Druckfarben: Neonpink, Blau, Gelb. --farbe wird hier nicht verwendet. */
[data-stil="riso"] {
  --rosa: #ff48b0;
  --blau: #5aa9ff;
  --gelb: #ffe800;
  --tinte: #1d2b6b;
  --text: #1d2b6b;
  --text-datum: #fff;
  --akzent: #ff48b0;
  --akzent-text: #1d2b6b;
  --radius: 14px;
  --symbol: #1d2b6b;
  --kachel-schatten: none;
  --statusleiste: #1d2b6b;
  --dock-hintergrund: #f4f0e6;
}

/* Papier mit feiner Körnung */
[data-stil="riso"] body {
  font-family: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  background-color: #f4f0e6;
  background-image:
    radial-gradient(rgba(0, 0, 0, 0.07) 0.5px, transparent 0.9px),
    radial-gradient(rgba(0, 0, 0, 0.05) 0.5px, transparent 0.9px),
    radial-gradient(rgba(0, 0, 0, 0.04) 0.6px, transparent 1px);
  background-size: 3px 3px, 5px 5px, 7px 7px;
  background-position: 0 0, 1px 2px, 3px 1px;
}

/* Datum mit verrutschter zweiter Farbe */
[data-stil="riso"] .datum {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 #ff48b0, -1px -1px 0 rgba(29, 43, 107, 0.6);
}

[data-stil="riso"] .name { font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #1d2b6b, 0 0 3px rgba(29, 43, 107, 0.8); }

[data-stil="riso"] .kachel {
  --druck1: var(--rosa);
  --druck2: var(--gelb);
  background: var(--druck1);
}

[data-stil="riso"] .kachel { --druck2: var(--blau); }
[data-stil="riso"] .icon:nth-child(even) .kachel { --druck1: var(--blau); --druck2: var(--rosa); }

/* zweite Farbschicht als Rasterpunkte, um 3 px verschoben (verrutschter Druck) */
[data-stil="riso"] .kachel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(var(--druck2) 42%, transparent 48%) 0 0 / 5px 5px;
  transform: translate(3px, 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

[data-stil="riso"] .kachel svg { stroke-width: 2.4; }

[data-stil="riso"] .punkt {
  background: var(--gelb);
  border: 2px solid var(--tinte);
}

[data-stil="riso"] .dock {
  border-radius: 24px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-image: radial-gradient(rgba(90, 169, 255, 0.55) 38%, transparent 45%);
  background-size: 6px 6px;
  box-shadow: inset 0 0 0 2px var(--rosa), 3px 3px 0 rgba(255, 232, 0, 0.9);
}


/* ===================== 08 Claymation ===================== */
[data-stil="knete"] {
  --text: #4a2510;
  --text-datum: #6b3b1f;
  --akzent: #e8743b;
  --akzent-text: #fff;
  --radius: 26px 21px 28px 19px / 21px 27px 19px 26px;
  --symbol: #fff8f0;
  --statusleiste: #6b3b1f;
  --dock-hintergrund: #4fa3e0;
}

[data-stil="knete"] body {
  font-family: "Arial Rounded MT Bold", "Chalkboard SE", -apple-system, "Segoe UI", sans-serif;
  background-color: #e8b585;
  background-image:
    radial-gradient(40% 25% at 20% 30%, rgba(255, 230, 200, 0.35), transparent 70%),
    radial-gradient(35% 20% at 80% 70%, rgba(150, 80, 30, 0.12), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, #f0c597, #dc9e6b);
}

[data-stil="knete"] .datum { font-weight: 700; }

[data-stil="knete"] .name { font-weight: 700; }

/* weiche Knet-Form: Glanzlicht oben links, Schatten innen unten rechts */
[data-stil="knete"] .kachel {
  background:
    radial-gradient(45% 35% at 32% 26%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    var(--farbe, #888);
  box-shadow:
    inset -5px -7px 10px rgba(0, 0, 0, 0.3),
    inset 4px 4px 7px rgba(255, 255, 255, 0.35),
    3px 6px 8px rgba(90, 40, 10, 0.35);
}

[data-stil="knete"] .icon:nth-child(3n+2) .kachel { border-radius: 22px 28px 20px 27px / 27px 20px 28px 22px; }
[data-stil="knete"] .icon:nth-child(3n) .kachel { border-radius: 28px 24px 22px 26px / 24px 22px 28px 25px; }

[data-stil="knete"] .kachel svg { stroke-width: 3.2; }

[data-stil="knete"] .punkt {
  border: 0;
  background: radial-gradient(circle at 35% 30%, #ffd08a, #f08a1c 60%, #c4600a);
  box-shadow: 1px 2px 3px rgba(80, 30, 0, 0.4);
}

/* Dock als Knetwurst */
[data-stil="knete"] .dock {
  border-radius: 45px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    radial-gradient(70% 30% at 40% 22%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
    #4fa3e0;
  box-shadow:
    inset -6px -10px 16px rgba(0, 0, 40, 0.3),
    inset 6px 6px 12px rgba(255, 255, 255, 0.3),
    4px 8px 12px rgba(90, 40, 10, 0.35);
}


/* ===================== 09 Synthwave ===================== */
[data-stil="synthwave"] {
  --text: #fff;
  --text-datum: #2de2e6;
  --akzent: #ff2bd6;
  --akzent-text: #fff;
  --radius: 12px;
  --neon: #ff2bd6;
  --kachel-schatten: none;
  --dock-hintergrund: rgba(20, 0, 40, 0.55);
}

[data-stil="synthwave"] body { background: #0b0418; }

[data-stil="synthwave"] .datum {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(45, 226, 230, 0.9);
}

[data-stil="synthwave"] .name {
  font-weight: 600;
  text-shadow: 0 0 6px rgba(255, 43, 214, 0.95), 0 1px 2px #000;
}

[data-stil="synthwave"] .icon:nth-child(even) .kachel { --neon: #2de2e6; }

[data-stil="synthwave"] .kachel {
  background: linear-gradient(160deg, #2a0a4a, #120222);
  border: 2px solid var(--neon);
  box-shadow: 0 0 10px var(--neon), inset 0 0 10px var(--neon);
}

[data-stil="synthwave"] .kachel svg { stroke: var(--neon); stroke-width: 2.2; }

[data-stil="synthwave"] .punkt {
  background: #ffd319;
  border: 2px solid #120222;
  box-shadow: 0 0 8px #ffd319;
}

[data-stil="synthwave"] .dock {
  box-shadow: inset 0 0 0 2px #2de2e6, 0 0 14px rgba(45, 226, 230, 0.8), inset 0 0 14px rgba(45, 226, 230, 0.35);
}


/* ===================== 10 Stained glass ===================== */
[data-stil="glas"] {
  --text: #fff;
  --text-datum: #f3d9a4;
  --akzent: #b8862b;
  --akzent-text: #fff;
  --radius: 10px;
  --blei: #1a1613;
  --dock-hintergrund: #1a1613;
}

/* dunkles Mosaik: Blei-Linien und ein paar gedämpfte Farbfelder */
[data-stil="glas"] body {
  background-color: #0c0a0d;
  background-image:
    radial-gradient(120% 70% at 50% 30%, transparent 40%, rgba(0, 0, 0, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23050406' stroke-width='5' stroke-linejoin='round'%3E%3Cpath d='M0 0H70L55 60L0 45Z' fill='%232c1838'/%3E%3Cpath d='M70 0H160V35L100 70L55 60Z' fill='%23131826'/%3E%3Cpath d='M0 45L55 60L40 120L0 110Z' fill='%23112624'/%3E%3Cpath d='M55 60L100 70L120 125L40 120Z' fill='%23161216'/%3E%3Cpath d='M100 70L160 35V130L120 125Z' fill='%23331220'/%3E%3Cpath d='M0 110L40 120L50 160H0Z' fill='%23151a2c'/%3E%3Cpath d='M40 120L120 125L110 160H50Z' fill='%23302311'/%3E%3Cpath d='M120 125L160 130V160H110Z' fill='%23121614'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 160px 160px;
}

[data-stil="glas"] .datum {
  font-family: Georgia, "Times New Roman", serif;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}

[data-stil="glas"] .name { font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 4px #000; }

/* Glas in Edelsteinfarbe mit Licht von oben links, Blei-Rand und eine Blei-Sprosse */
[data-stil="glas"] .kachel {
  background:
    linear-gradient(135deg, transparent calc(50% - 2px), var(--blei) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.4) 100%),
    var(--farbe, #888);
  border: 4px solid var(--blei);
  box-shadow: 0 0 0 1px #4a3f33, 0 0 14px rgba(255, 220, 160, 0.12);
}

[data-stil="glas"] .kachel svg { stroke-width: 2.4; }

[data-stil="glas"] .punkt {
  background: radial-gradient(circle at 35% 30%, #ffe3a0, #e0a020 55%, #8a5a00);
  border: 2px solid var(--blei);
}

/* Dock als gefasste Glasleiste */
[data-stil="glas"] .dock {
  border-radius: 20px;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%),
    linear-gradient(90deg,
      #4a1420 0 24.4%, var(--blei) 24.4% 25.6%,
      #13305a 25.6% 49.4%, var(--blei) 49.4% 50.6%,
      #5a3c0c 50.6% 74.4%, var(--blei) 74.4% 75.6%,
      #133f2a 75.6% 100%);
  box-shadow: inset 0 0 0 5px var(--blei), 0 0 0 1px #4a3f33, 0 6px 16px rgba(0, 0, 0, 0.6);
}