/* === CSS extrahiert aus preise.html (extrahiert 2026-04-26) === */
  @import url('/shared/fonts/inter.css');
  * { margin:0; padding:0; box-sizing:border-box; }
  :root {
    --bg: linear-gradient(145deg, #eef2f7 0%, #e4ecf4 25%, #dfe8f0 50%, #e8eef5 75%, #f0f4f8 100%);
    --nav-bg: rgba(255,255,255,0.55); --nav-border: rgba(255,255,255,0.5);
    --card-bg: rgba(255,255,255,0.45); --card-border: rgba(255,255,255,0.6);
    --card-hover-bg: rgba(255,255,255,0.65); --card-shadow: 0 2px 16px rgba(0,0,0,0.04);
    --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.08);
    --text-primary: #1c1c1e; --text-secondary: #636366; --text-tertiary: #8e8e93;
    --badge-bg: rgba(4,179,214,0.1); --badge-color: #04b3d6;
    --toggle-bg: rgba(0,0,0,0.06); --toggle-knob: #fff;
  }
  [data-theme="dark"] {
    --bg: linear-gradient(145deg, #0a0a1a 0%, #0f1528 20%, #151022 40%, #1a0f1e 60%, #12111a 80%, #0d1318 100%);
    --nav-bg: rgba(255,255,255,0.05); --nav-border: rgba(255,255,255,0.09);
    --card-bg: rgba(255,255,255,0.06); --card-border: rgba(255,255,255,0.1);
    --card-hover-bg: rgba(255,255,255,0.1); --card-shadow: 0 2px 16px rgba(0,0,0,0.2);
    --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.3);
    --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-tertiary: #636366;
    --badge-bg: rgba(4,179,214,0.15); --badge-color: #2cc5e4;
    --toggle-bg: rgba(255,255,255,0.1); --toggle-knob: #1c1c1e;
  }
  body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; min-height:100vh; background:var(--bg); background-size:400% 400%; animation:gradShift 20s ease infinite; -webkit-font-smoothing:antialiased; }
  @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

  nav { position:sticky; top:0; z-index:200; background:var(--nav-bg); backdrop-filter:blur(44px) saturate(180%); -webkit-backdrop-filter:blur(44px) saturate(180%); border-bottom:1px solid var(--nav-border); padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between; }
  .nav-left { display:flex; align-items:center; gap:10px; min-width:0; flex-shrink:1; overflow:hidden; }
  .nav-logo { height:26px; } [data-theme="dark"] .nav-logo { filter:brightness(2.2) contrast(0.85); }
  .nav-brand { font-size:15px; font-weight:700; color:var(--text-primary); }
  .nav-divider { width:1px; height:18px; background:var(--nav-border); }
  .nav-sub { font-size:13px; color:var(--text-secondary); white-space:nowrap; }
  .nav-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .nav-back { font-size:12px; color:var(--badge-color); text-decoration:none; font-weight:500; display:flex; align-items:center; gap:4px; white-space:nowrap; }
  .theme-toggle { display:flex; align-items:center; gap:5px; cursor:pointer; padding:3px; border-radius:16px; background:var(--toggle-bg); }
  .toggle-icon { font-size:12px; }
  .toggle-track { width:32px; height:18px; border-radius:9px; background:var(--toggle-bg); position:relative; }
  .toggle-knob { width:14px; height:14px; border-radius:50%; background:var(--toggle-knob); position:absolute; top:2px; left:2px; transition:transform .3s cubic-bezier(.4,0,.2,1); }
  [data-theme="dark"] .toggle-knob { transform:translateX(14px); }

  .container { max-width:900px; margin:0 auto; padding:32px 24px; }
  .page-header { margin-bottom:28px; }
  .page-header h1 { font-size:24px; font-weight:700; color:var(--text-primary); }
  .page-header p { font-size:13px; color:var(--text-tertiary); margin-top:4px; }

  .cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }

  .module-card {
    display:flex; align-items:center; gap:16px;
    padding:20px; border-radius:16px;
    background:var(--card-bg); border:1px solid var(--card-border);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    box-shadow:var(--card-shadow); text-decoration:none;
    transition:all 0.25s cubic-bezier(.4,0,.2,1); cursor:pointer;
  }
  .module-card:hover { background:var(--card-hover-bg); box-shadow:var(--card-hover-shadow); transform:translateY(-2px); }
  .module-card-icon { font-size:32px; flex-shrink:0; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(4,179,214,0.08); }
  .module-card-body { flex:1; min-width:0; }
  .module-card-name { font-size:15px; font-weight:600; color:var(--text-primary); }
  .module-card-sub { font-size:12px; color:var(--text-secondary); margin-top:2px; }
  .module-card-badge { font-size:11px; font-weight:600; padding:3px 10px; border-radius:8px; flex-shrink:0; }

  @media (max-width:600px) {
    nav { padding:0 12px; }
    .container { padding:20px 12px; }
    .cards-grid { grid-template-columns:1fr; }
    .page-header h1 { font-size:20px; }
  }


/* === Auto-generierte Klassen aus inline style="..." (preise.html, 3 unique) === */
.s-61743f { grid-column:1/-1;border:2px solid var(--badge-color); }
.s-5c66a1 { background:var(--badge-color);color:#fff; }
.s-82feed { background:rgba(48,209,88,0.1);color:#30d158; }