/* ============================================================
   10 · Design-Stile
   Jede Bühne bringt ihre eigenen Farben mit und hängt nicht am Thema.
   ============================================================ */
.st{min-height:300px}
.st-karte{position:relative;display:grid;gap:6px;width:min(250px,100%);padding:24px;justify-items:start}
.st-karte b{font-size:22px;letter-spacing:-.02em}
.st-karte p{margin:0 0 12px;font-size:14px}
.st-chip{font:600 11px var(--mono);letter-spacing:.06em}
.st-karte button{border:0;font:600 14px var(--sans);padding:10px 18px;cursor:pointer}

/* Glas */
.st-glas{background:radial-gradient(circle at 20% 25%,#ff5fa2 0,transparent 35%),radial-gradient(circle at 80% 30%,#5f8bff 0,transparent 38%),radial-gradient(circle at 50% 85%,#22e1c4 0,transparent 40%),#1c1033}
.st-glas .st-karte{border-radius:22px;color:#fff;background:rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 20px 40px -20px rgba(0,0,0,.5)}
.st-glas .st-chip{color:rgba(255,255,255,.8)}
.st-glas p{color:rgba(255,255,255,.75)}
.st-glas button{border-radius:999px;background:rgba(255,255,255,.9);color:#1c1033}

/* Liquid Glass */
.st-liquid{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff9a3c'/%3E%3Cstop offset='.5' stop-color='%23ff3d77'/%3E%3Cstop offset='1' stop-color='%234d2bff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='300' fill='url(%23a)'/%3E%3Ccircle cx='90' cy='80' r='60' fill='%23ffe066'/%3E%3Crect x='230' y='150' width='140' height='120' rx='30' fill='%2300d4ff'/%3E%3C/svg%3E") center/cover}
.st-liquid .st-karte{border-radius:28px;color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,.06) 42%,rgba(255,255,255,.16));
  backdrop-filter:blur(8px) saturate(2) brightness(1.08);-webkit-backdrop-filter:blur(8px) saturate(2) brightness(1.08);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 30px rgba(255,255,255,.15),0 24px 50px -16px rgba(40,0,80,.55)}
.st-liquid .st-karte::after{content:"";position:absolute;left:12%;right:30%;top:6px;height:30%;border-radius:50%;background:linear-gradient(rgba(255,255,255,.45),transparent);filter:blur(4px);pointer-events:none}
.st-liquid p{color:rgba(255,255,255,.85)}
.st-liquid button{border-radius:999px;color:#fff;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Neumorphism */
.st-neu{background:#e3e8ef}
.st-neu .st-karte{border-radius:26px;color:#3a4558;background:#e3e8ef;box-shadow:12px 12px 26px #c3cad4,-12px -12px 26px #ffffff}
.st-neu .st-chip{color:#8a95a8}
.st-neu p{color:#6b778c}
.st-neu button{border-radius:14px;color:#3a4558;background:#e3e8ef;box-shadow:6px 6px 12px #c3cad4,-6px -6px 12px #fff;transition:box-shadow .2s}
.st-neu button:active{box-shadow:inset 5px 5px 10px #c3cad4,inset -5px -5px 10px #fff}

/* Claymorphism */
.st-clay{background:linear-gradient(140deg,#ffd6e8,#d4e4ff)}
.st-clay .st-karte{border-radius:40px;color:#4a2c5e;background:#fff3fa;
  box-shadow:inset -10px -12px 20px rgba(220,160,200,.55),inset 10px 10px 18px rgba(255,255,255,.95),18px 24px 40px -10px rgba(170,110,170,.45)}
.st-clay .st-chip{color:#c06ca8}
.st-clay p{color:#8a6a9c}
.st-clay button{border-radius:999px;color:#fff;background:#c084fc;box-shadow:inset -4px -5px 8px rgba(120,40,180,.45),inset 4px 4px 8px rgba(255,255,255,.55),6px 10px 18px -6px rgba(140,60,200,.6)}

/* Neo-Brutalismus */
.st-brutal{background:#fde047}
.st-brutal .st-karte{border:3px solid #000;border-radius:6px;color:#000;background:#fff;box-shadow:8px 8px 0 #000;font-weight:500}
.st-brutal b{font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.03em}
.st-brutal .st-chip{padding:2px 8px;border:2px solid #000;background:#a3e635;color:#000}
.st-brutal button{border:3px solid #000;border-radius:0;background:#f472b6;color:#000;font-weight:800;box-shadow:4px 4px 0 #000;transition:transform .1s,box-shadow .1s}
.st-brutal button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #000}
.st-brutal button:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}

/* Skeuomorphismus */
.st-skeuo{background:radial-gradient(circle at 50% 30%,#6b4a32,#3b2618);background-color:#3b2618}
.st-skeuo .st-karte{border-radius:14px;color:#3b2a1a;background:linear-gradient(180deg,#f7ecd8,#e6d3b0);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px #8a6a45,0 8px 20px rgba(0,0,0,.55);outline:2px dashed rgba(120,85,50,.55);outline-offset:-10px}
.st-skeuo b{text-shadow:0 1px 0 rgba(255,255,255,.8)}
.st-skeuo .st-chip{color:#8a6a45}
.st-skeuo p{color:#6d5236}
.st-skeuo button{border-radius:10px;color:#fff;background:linear-gradient(180deg,#7fb2ff,#2f6fe0 55%,#1d4fb0);text-shadow:0 -1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 0 1px #173f8c,0 3px 6px rgba(0,0,0,.4)}

/* Y2K */
.st-y2k{background:linear-gradient(180deg,#7dd3fc 0%,#c4b5fd 50%,#fbcfe8 100%)}
.st-y2k .st-karte{border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.75),rgba(255,255,255,.35));box-shadow:inset 0 0 0 2px #fff,0 20px 40px -20px rgba(80,40,160,.5)}
.st-y2k b{font-size:30px;font-weight:900;font-style:italic;letter-spacing:-.04em;background:linear-gradient(180deg,#fff 0%,#9ca3af 45%,#374151 50%,#e5e7eb 75%,#6b7280);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:.6px #4b5563}
.st-y2k .st-chip{color:#7c3aed}
.st-y2k p{color:#5b4b8a}
.st-y2k button{border-radius:999px;color:#fff;background:radial-gradient(120% 120% at 30% 20%,#fff 0,#a5b4fc 20%,#6366f1 60%,#4338ca);
  box-shadow:inset 0 2px 4px rgba(255,255,255,.8),0 8px 18px -6px #4338ca;text-shadow:0 1px 2px rgba(0,0,0,.35)}

/* Pixel */
.st-pixel{background:#1a1c2c;image-rendering:pixelated}
.st-pixel .st-karte{color:#f4f4f4;background:#333c57;font-family:var(--mono);
  box-shadow:0 -4px 0 #f4f4f4,0 4px 0 #f4f4f4,-4px 0 0 #f4f4f4,4px 0 0 #f4f4f4,0 -8px 0 #1a1c2c,0 8px 0 #1a1c2c,-8px 0 0 #1a1c2c,8px 0 0 #1a1c2c,8px 8px 0 #000}
.st-pixel b{font:700 20px var(--mono);letter-spacing:.04em;color:#ffcd75;text-shadow:3px 3px 0 #b13e53}
.st-pixel .st-chip{color:#73eff7}
.st-pixel p{color:#a7f070;animation:caret 1.2s steps(1) infinite}
.st-pixel button{border-radius:0;background:#b13e53;color:#fff;font:700 13px var(--mono);box-shadow:inset -4px -4px 0 #5d275d,inset 4px 4px 0 #ef7d57}
.st-pixel button:active{box-shadow:inset 4px 4px 0 #5d275d}

/* Swiss */
.st-swiss{background:#f5f5f0;background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);background-size:24px 24px}
.st-swiss .st-karte{color:#111;background:#fff;border-radius:0;border-top:8px solid #e30613}
.st-swiss b{font-size:30px;font-weight:800;letter-spacing:-.05em;line-height:.95}
.st-swiss .st-chip{font:800 34px/1 var(--sans);color:#e30613;letter-spacing:-.04em}
.st-swiss p{color:#444;font-weight:500}
.st-swiss button{border-radius:0;padding:10px 0;background:none;color:#e30613;font-weight:800;border-bottom:2px solid #e30613}

/* Cyberpunk */
.st-cyber{background:#05010f;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px)}
.st-cyber .st-karte{color:#e0fbff;background:linear-gradient(135deg,rgba(0,255,240,.12),rgba(255,0,170,.1));clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
  box-shadow:inset 0 0 0 1px #00f6ff;filter:drop-shadow(0 0 10px rgba(0,246,255,.45))}
.st-cyber b{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#00f6ff;text-shadow:0 0 8px #00f6ff,2px 0 #ff00aa}
.st-cyber .st-chip{color:#ff00aa}
.st-cyber p{color:#9ef6ff}
.st-cyber button{color:#05010f;background:#fcee09;font:700 13px var(--mono);text-transform:uppercase;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}

/* Editorial */
.st-editorial{background:#f4efe4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.st-editorial .st-karte{color:#211a12;border-top:1px solid #211a12;border-bottom:1px solid #211a12;padding:20px 4px;width:min(260px,100%)}
.st-editorial b{font:400 34px/1 var(--serif);font-style:italic}
.st-editorial .st-chip{font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#8a7a62}
.st-editorial p{font:400 16px/1.45 Georgia,serif;color:#3a3024}
.st-editorial p::first-letter{float:left;margin:4px 6px 0 0;font:400 46px/.8 var(--serif);color:#b4532a}
.st-editorial button{padding:0;background:none;color:#b4532a;font:italic 400 16px var(--serif);text-decoration:underline;text-underline-offset:4px}

/* Soft */
.st-soft{background:radial-gradient(60% 70% at 20% 20%,#c7d2fe,transparent 70%),radial-gradient(60% 70% at 80% 80%,#fbcfe8,transparent 70%),radial-gradient(50% 50% at 80% 10%,#bbf7d0,transparent 70%),#f8fafc}
.st-soft .st-karte{border-radius:24px;color:#1e293b;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06),0 30px 60px -20px rgba(99,102,241,.35)}
.st-soft .st-chip{padding:4px 10px;border-radius:999px;background:#eef2ff;color:#6366f1}
.st-soft p{color:#64748b}
.st-soft button{border-radius:12px;color:#fff;background:linear-gradient(90deg,#6366f1,#ec4899);box-shadow:0 10px 20px -8px rgba(236,72,153,.6)}

/* Bauhaus */
.st-bauhaus{position:relative;background:#f2ead8;overflow:hidden}
.st-bauhaus::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:#1d4ed8;left:-30px;top:-30px}
.st-bauhaus::after{content:"";position:absolute;right:-10px;bottom:-10px;width:0;height:0;border-left:120px solid transparent;border-bottom:150px solid #dc2626}
.st-bauhaus .st-karte{z-index:1;color:#111;background:#facc15;border-radius:0;box-shadow:12px 12px 0 #111}
.st-bauhaus b{font-size:28px;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
.st-bauhaus .st-chip{color:#111}
.st-bauhaus button{border-radius:999px;background:#111;color:#facc15}