/* ====================================================================
   LOKALE SCHRIFTEN (self-hosted statt Google Fonts CDN)
   ---------------------------------------------------------------
   Grund: Beim Laden von Google Fonts über fonts.googleapis.com /
   fonts.gstatic.com wird die IP-Adresse jedes Besuchers an Google
   übertragen — datenschutzrechtlich ein bekannter Streitpunkt in
   Deutschland. Self-hosting vermeidet das komplett, es gibt dann gar
   keine Verbindung mehr zu Google.

   SETUP (einmalig, ca. 5 Minuten):
   1. Gehe auf https://gwfh.mranftl.com/fonts
   2. Suche "Unbounded" → Styles 500, 700, 800 auswählen → Subset "latin"
      → "Download files" (zip) UND den angezeigten CSS-Code kopieren.
   3. Gleiches für "Hanken Grotesk" (Styles 400, 500, 600, 700) und
      "Space Mono" (Styles 400, 700).
   4. Alle heruntergeladenen .woff2-Dateien in den Ordner "fonts" im
      Hauptverzeichnis der Seite legen (neben index.html, NICHT in
      "assets").
   5. Die @font-face-Regeln unten durch den von gwfh.mranftl.com
      kopierten CSS-Code ersetzen. Wichtig: Diese CSS-Datei liegt in
      "assets", die Pfade müssen deshalb mit "../fonts/…" beginnen.
      Die Namen unten sind Platzhalter — die exakten Dateinamen
      bekommst du von der Webseite.

   Bis der Ordner hochgeladen ist, greift automatisch die System-
   schrift-Alternative (siehe --font-* unten) — die Seite bricht also
   nicht, sieht aber erst nach dem Upload wie gewohnt aus.
   ==================================================================== */
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/unbounded-v13-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/unbounded-v13-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Unbounded'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/unbounded-v13-latin-800.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/hanken-grotesk-v10-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/hanken-grotesk-v10-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/hanken-grotesk-v10-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/hanken-grotesk-v10-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-mono-v15-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-mono-v15-latin-700.woff2') format('woff2');
}
:root{
  --ink:        #0d0710;
  --ink-raised: #170e1a;
  --ink-raised-2:#1f1322;
  --line:       #35233a;
  --line-soft:  #241726;
  --paper:      #f4ecf2;
  --muted:      #b9aec0;
  --muted-dim:  #8a7d93;
  --amber:      #ff2d78;
  --amber-dim:  #c91f5e;
  --teal:       #29e6d6;
  --good:       #5fd38d;
  --bad:        #ff6a4d;

  --font-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
}

a{ color:inherit; }

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-inline:24px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--amber);
}

::selection{ background:var(--amber); color:#161200; }

input:focus-visible, button:focus-visible, summary:focus-visible, a:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(13,7,16,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px dashed var(--line);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  letter-spacing:0.01em;
  text-decoration:none;
  white-space:nowrap;
}
.brand-mark{
  width:22px; height:22px; flex:none;
  background:
    linear-gradient(180deg, transparent 42%, var(--amber) 42%, var(--amber) 58%, transparent 58%),
    linear-gradient(90deg, var(--line) 0 3px, transparent 3px 8px, var(--line) 8px 11px, transparent 11px 16px, var(--line) 16px 19px, transparent 19px 22px);
  border-radius:5px;
  border:1px solid var(--line);
}
.nav-links{
  display:flex; gap:28px; list-style:none; margin:0; padding:0;
  font-size:0.92rem; color:var(--muted);
  flex:none;
}
.nav-links a{ text-decoration:none; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--paper); }
.nav-links a[aria-current="page"]{
  text-decoration:underline; text-decoration-color:var(--amber);
  text-decoration-thickness:2px; text-underline-offset:7px;
}
@media (max-width:480px){
  .nav-links{ gap:16px; font-size:0.82rem; }
  .brand{ font-size:0.98rem; gap:8px; }
}
/* Passen nicht alle Menüpunkte neben Namen und Konto-Knöpfe: Menü seitlich wischbar machen
   und rechts sanft ausblenden, solange noch etwas verdeckt ist. */
.nav nav{ min-width:0; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.nav nav::-webkit-scrollbar{ display:none; }
/* site.js setzt die Klasse nur, wenn das Menü wirklich nicht hineinpasst */
.nav nav.is-overflowing{
  -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent);
  mask-image:linear-gradient(90deg, #000 82%, transparent);
}
.nav nav.is-overflowing .nav-links{ padding-right:28px; }
@media (max-width:900px){
  .nav-links{ gap:20px; }
}
/* Login und Registrieren: immer sichtbar rechts neben dem Menü */
.nav-account{ display:flex; align-items:center; gap:8px; flex:none; }
.nav-account a{
  text-decoration:none; white-space:nowrap;
  font-size:0.88rem; font-weight:700; line-height:1.2;
  border-radius:4px; padding:7px 12px; border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease;
}
.nav-account .nav-login{ color:var(--paper); border-color:var(--amber-dim); }
.nav-account .nav-login:hover{ border-color:var(--amber); }
.nav-account .nav-signup{ background:var(--amber); color:#161200; box-shadow:0 0 14px rgba(255,45,120,0.35); }
.nav-account .nav-signup:hover{ background:#ff5793; }
.nav-narrow{ display:none; }
@media (max-width:1100px){
  .nav-wide{ display:none; }
  .nav-narrow{ display:inline; }
}
/* Handy: oben Name + Konto-Knöpfe, darunter das wischbare Menü */
@media (max-width:680px){
  .nav .wrap{ flex-wrap:wrap; height:auto; row-gap:2px; padding-top:9px; }
  .nav nav{ order:3; flex:1 0 100%; margin-left:0; }
  .nav-links{ padding:7px 0 9px; }
  .nav-account a{ font-size:0.8rem; padding:6px 10px; }
}
@media (max-width:360px){
  .nav .wrap{ column-gap:10px; padding-inline:16px; }
  .nav-account{ gap:6px; }
  .nav-account a{ font-size:0.74rem; padding:5px 8px; }
  .nav-links{ gap:12px; font-size:0.76rem; }
  .brand{ font-size:0.86rem; gap:7px; }
  .brand-mark{ width:19px; height:19px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:0 0 76px;
  border-bottom:1px dashed var(--line);
}
.hero-band{
  position:relative; z-index:1;
  background:linear-gradient(100deg, var(--amber) 0%, var(--amber) 38%, var(--teal) 100%);
  clip-path:polygon(0 0, 100% 0, 100% 78%, 0 100%);
  padding:40px 0 96px;
  margin-bottom:-40px;
}
.hero-band-tag{
  display:block;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink); font-weight:700; margin-bottom:16px;
}
.meter-row{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:6px; padding:0 6%;
  opacity:0.16;
  pointer-events:none;
  z-index:0;
}
.meter-row span{
  flex:1;
  background:linear-gradient(180deg, var(--amber), var(--teal));
  border-radius:2px 2px 0 0;
  animation:meter-bounce 2.6s ease-in-out infinite;
  transform-origin:bottom;
}
@keyframes meter-bounce{
  0%,100%{ height:14%; } 50%{ height:var(--h,60%); }
}
.hero-band h1{
  font-size:clamp(2.3rem, 5.6vw, 3.9rem);
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--ink);
  max-width:820px;
}
.hero-band h1 em{
  font-style:normal;
  color:inherit;
}
.hero p{
  margin-top:0;
  font-size:1.1rem;
  color:var(--muted);
  max-width:52ch;
}
.hero-actions{
  margin-top:32px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:800; font-size:0.94rem;
  text-transform:uppercase; letter-spacing:0.04em;
  padding:13px 22px;
  border-radius:4px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:var(--amber); color:#161200;
}
.btn-primary:hover{ background:#ff5793; }
.btn-teal{
  background:var(--teal); color:#04211c;
}
.btn-teal:hover{ background:#5eede0; }
.btn-ghost{
  background:var(--ink); color:var(--paper); border-color:var(--paper);
}
.btn-ghost:hover{ background:var(--ink-raised-2); }

/* ---------- section shell ---------- */
section{ padding:76px 0; scroll-margin-top:80px; }
/* Auf dem Handy ist die Kopfzeile zweizeilig */
@media (max-width:680px){ section{ scroll-margin-top:110px; } }
.section-head{
  display:flex; align-items:end; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
  margin-bottom:40px;
}
.section-head h1, .section-head h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-top:10px; text-transform:uppercase; letter-spacing:0.005em; }
.section-head p{ color:var(--muted); max-width:46ch; margin-top:10px; }
.section-head-side{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.section-head-stacked p{ max-width:58ch; }

/* ---------- tools ---------- */
.rack{
  border-top:1px dashed var(--line);
}
.tool-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media (max-width:760px){ .tool-row{ grid-template-columns:1fr; } }
.tool-tile{
  background:var(--ink-raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0;
  display:flex; flex-direction:row; align-items:stretch;
  text-decoration:none; color:inherit;
  transition:border-color .15s ease;
}
.tool-tile:hover{ border-color:var(--amber-dim); }
.tool-main{ flex:1; min-width:0; padding:24px 22px 22px; display:flex; flex-direction:column; gap:16px; }
.tool-top{ display:flex; align-items:center; justify-content:space-between; }
.tool-id{
  font-family:var(--font-mono); font-size:0.76rem; color:var(--muted-dim); letter-spacing:0.08em;
}
.tool-led{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--good); }
.tool-led::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 6px var(--good); }
.tool-name{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; text-transform:uppercase; letter-spacing:0.01em; }
.tool-desc{ color:var(--muted); font-size:0.92rem; }
.tool-stub{
  flex:none; width:80px;
  border-left:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:20px 0;
  position:relative;
}
.tool-stub::before, .tool-stub::after{
  content:""; position:absolute; left:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--ink); border:1px solid var(--line);
}
.tool-stub::before{ top:14px; }
.tool-stub::after{ bottom:14px; }
.tool-stub-label{
  writing-mode:vertical-rl;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--muted-dim); font-weight:700;
}
.tool-stub-barcode{ display:flex; gap:2px; height:36px; align-items:stretch; }
.tool-stub-barcode i{ width:2px; background:var(--muted-dim); }
.tool-stub-barcode i:nth-child(3n){ width:3px; }
@media (max-width:480px){
  .tool-tile{ flex-direction:column; }
  .tool-stub{
    flex-direction:row; width:auto;
    border-left:none; border-top:2px dashed var(--line);
    padding:12px 20px; justify-content:space-between;
  }
  .tool-stub::before, .tool-stub::after{ left:auto; top:-9px; }
  .tool-stub::before{ left:14px; }
  .tool-stub::after{ right:14px; }
  .tool-stub-label{ writing-mode:horizontal-tb; }
}

/* ---------- tool- und unterseiten ---------- */
.calc, .legal-section{ padding-top:32px; }
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-bottom:22px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted-dim);
}
.breadcrumb a{ text-decoration:none; color:var(--muted); }
.breadcrumb a:hover{ color:var(--paper); }
.breadcrumb [aria-current="page"]{ color:var(--teal); }

/* Erklär-Bereich unter den Tools ("So wird gerechnet", Export-Anleitungen) */
.howto{ padding-top:20px; }
.howto h2{ font-size:clamp(1.3rem, 2.4vw, 1.7rem); text-transform:uppercase; margin:10px 0 12px; }
.howto-intro{ color:var(--muted); max-width:62ch; margin:0 0 26px; }
.howto-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px;
}
.howto-card{
  background:var(--ink-raised); border:1px solid var(--line); border-radius:6px;
  padding:18px 20px 20px;
}
.howto-card h3{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--teal); margin:0 0 10px;
}
.howto-card p, .howto-card li{ color:var(--muted); font-size:0.88rem; line-height:1.6; }
.howto-card p{ margin:0 0 8px; }
.howto-card p:last-child{ margin-bottom:0; }
.howto-card ol, .howto-card ul{ margin:0; padding-left:18px; }
.howto-card strong{ color:var(--paper); font-weight:600; }
.howto-card .howto-formats{
  margin-top:10px; font-family:var(--font-mono); font-size:0.72rem; color:var(--muted-dim);
}
.howto-note{ margin:22px 0 0; font-size:0.82rem; color:var(--muted-dim); max-width:70ch; }

/* ---------- calculator ---------- */
.calc-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:28px;
  align-items:start;
}
@media (max-width:920px){
  .calc-grid{ grid-template-columns:minmax(0, 1fr); }
}

fieldset{
  min-width:0; /* sonst ragt das Formular auf sehr schmalen Handys über den Rand */
  border:1px solid var(--line);
  border-radius:6px;
  padding:20px 20px 22px;
  margin:0 0 16px;
  background:var(--ink-raised);
}
legend{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal);
  padding:0 8px;
}
.field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px 16px;
}
.field-grid-stack{ grid-template-columns:1fr; gap:20px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:0.86rem; color:var(--muted); }
.field .hint{ font-size:0.76rem; color:var(--muted-dim); margin-top:2px; }
.hint-link{
  display:inline-block; margin-top:2px;
  font-size:0.76rem; color:var(--teal); text-decoration:none;
  border-bottom:1px solid transparent;
}
.hint-link:hover{ border-color:var(--teal); }
.input-unit{
  position:relative;
  display:flex; align-items:center;
}
.input-unit span{
  position:absolute; right:12px;
  font-family:var(--font-mono); font-size:0.82rem; color:var(--muted-dim);
  pointer-events:none;
}
/* Textfelder statt type="number": nur so funktioniert das deutsche Dezimalkomma
   zuverlässig in allen Browsern (siehe parseDecimal im Script). */
.input-unit input{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:0.98rem;
  padding:11px 48px 11px 12px;
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}
.input-unit input:hover{ border-color:var(--muted-dim); }

.field-slider{ gap:10px; }
.field-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.field-head label{ margin:0; }
.field-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

/* Kleiner €/%-Umschalter (eine Checkbox, optisch als Segment-Schalter) */
.unit-toggle{
  position:relative; flex:none; display:inline-flex;
  border:1px solid var(--line); border-radius:4px; overflow:hidden;
  font-family:var(--font-mono); font-size:0.72rem; cursor:pointer;
}
.unit-toggle input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.unit-toggle span{
  padding:3px 9px; color:var(--muted-dim); pointer-events:none;
  transition:background .15s ease, color .15s ease;
}
.unit-toggle input:not(:checked) ~ span:first-of-type,
.unit-toggle input:checked ~ span:last-of-type{ background:var(--amber); color:#161200; }
.unit-toggle:has(input:focus-visible){ outline:2px solid var(--amber); outline-offset:2px; }
.field-value{
  font-family:var(--font-mono); font-weight:700; font-size:0.92rem; color:var(--paper);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:4px; border-radius:2px;
  background:var(--line);
  outline:none; cursor:pointer;
  margin:6px 0 2px;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--amber);
  border:2px solid var(--ink);
  box-shadow:0 0 0 1px var(--amber-dim);
  cursor:pointer;
  transition:transform .1s ease;
}
.slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.slider::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background:var(--amber);
  border:2px solid var(--ink);
  box-shadow:0 0 0 1px var(--amber-dim);
  cursor:pointer;
  transition:transform .1s ease;
}
.slider::-moz-range-thumb:hover{ transform:scale(1.15); }
.slider::-moz-range-track{ height:4px; border-radius:2px; background:var(--line); }
.slider:focus-visible{ outline:none; }
.slider:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--amber); outline-offset:3px; }
.slider:focus-visible::-moz-range-thumb{ outline:2px solid var(--amber); outline-offset:3px; }

.toggle-row{
  display:flex; align-items:center; gap:14px;
  margin-top:18px; padding-top:18px;
  border-top:1px solid var(--line-soft);
  cursor:pointer;
}
.switch{ position:relative; display:inline-block; flex:none; width:42px; height:24px; cursor:pointer; }
.switch input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.switch-track{
  position:absolute; inset:0;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:100px;
  pointer-events:none;
  transition:background .15s ease, border-color .15s ease;
}
.switch-thumb{
  position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--muted-dim);
  transition:transform .15s ease, background .15s ease;
}
.switch input:checked ~ .switch-track{ background:rgba(255,45,120,0.14); border-color:var(--amber-dim); }
.switch input:checked ~ .switch-track .switch-thumb{ transform:translateX(18px); background:var(--amber); }
.switch input:focus-visible ~ .switch-track{ outline:2px solid var(--amber); outline-offset:2px; }
.toggle-text{ display:flex; flex-direction:column; gap:2px; }
.toggle-label{ font-size:0.9rem; font-weight:600; color:var(--paper); }
.toggle-sub{ font-size:0.8rem; color:var(--muted-dim); }

details.adv{
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--ink-raised);
  margin-bottom:16px;
  overflow:hidden;
}
details.adv summary{
  list-style:none;
  cursor:pointer;
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--teal);
}
details.adv summary::-webkit-details-marker{ display:none; }
details.adv summary::after{
  content:"+"; font-family:var(--font-body); font-size:1.1rem; color:var(--muted);
  transition:transform .15s ease;
}
details.adv[open] summary::after{ transform:rotate(45deg); }
.adv-sum{
  margin-left:auto; color:var(--paper); font-weight:700; letter-spacing:0.02em;
  text-transform:none; white-space:nowrap; font-variant-numeric:tabular-nums;
}
details.adv .field-grid{ padding:0 20px 20px; }
details.adv .field-grid.two-col{ grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); }

.tax-box{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.tax-box .field{ max-width:180px; }
.tax-note{ color:var(--muted-dim); font-size:0.84rem; max-width:38ch; }

.reset-row{
  display:flex; justify-content:flex-end; margin-top:4px;
}
.btn-reset{
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font-family:var(--font-body); font-size:0.85rem; padding:9px 16px; border-radius:6px; cursor:pointer;
}
.btn-reset:hover{ border-color:var(--muted-dim); color:var(--paper); }

/* ---------- readout panel ---------- */
.readout{
  position:sticky;
  top:88px;
  background:var(--ink-raised-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 24px;
}
.readout-label{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-dim);
}
.readout-value{
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(2rem, 4vw, 2.7rem);
  margin-top:6px;
  font-variant-numeric:tabular-nums;
  transition:color .2s ease;
}
.readout-value[data-state="good"]{ color:var(--good); }
.readout-value[data-state="bad"]{ color:var(--bad); }
.readout-sub{ font-size:0.86rem; color:var(--muted); margin-top:4px; }

.meter{
  display:flex; height:10px; border-radius:6px; overflow:hidden;
  background:var(--ink); border:1px solid var(--line);
  margin:20px 0 22px;
}
.meter i{ display:block; height:100%; transition:width .2s ease; }
.meter .seg-cost{ background:var(--muted-dim); }
.meter .seg-tax{ background:var(--teal); }
.meter .seg-net{ background:var(--amber); }
.meter.is-negative .seg-net{ background:var(--bad); width:100% !important; }
.meter-legend{
  list-style:none; margin:-12px 0 20px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px 16px;
  font-size:0.76rem; color:var(--muted-dim);
}
.meter-legend li{ display:flex; align-items:center; gap:6px; }
.meter-legend i{ width:8px; height:8px; border-radius:2px; flex:none; }
.meter-legend .seg-cost{ background:var(--muted-dim); }
.meter-legend .seg-tax{ background:var(--teal); }
.meter-legend .seg-net{ background:var(--amber); }

.breakdown{
  list-style:none; margin:0; padding:0;
  font-size:0.9rem;
  display:flex; flex-direction:column; gap:9px;
}
.breakdown li{
  display:flex; justify-content:space-between; gap:10px;
  color:var(--muted);
  border-bottom:1px dashed var(--line-soft);
  padding-bottom:9px;
}
.breakdown li span:last-child{
  font-family:var(--font-mono); color:var(--paper); font-variant-numeric:tabular-nums;
}
.breakdown li.total{
  border-bottom:none; padding-top:2px; color:var(--paper); font-weight:600;
}
.breakdown li.total span:last-child{ color:var(--paper); }

.readout-foot{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
  font-size:0.78rem; color:var(--muted-dim); line-height:1.6;
}

@media (max-width:920px){
  .readout{ position:static; margin-top:8px; }
}

/* Software-Chips (Vorstellungsseiten der DJ-Tools) */
.tl-software-chips{
  list-style:none; margin:0 0 10px; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.tl-software-chips li{
  font-size:0.78rem; color:var(--paper);
  padding:3px 10px; border:1px solid var(--line); border-radius:100px;
}

/* ---------- Tools für DJs (Login) ---------- */
.rack-group{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal); margin:0 0 14px;
}
.tool-row + .rack-group{ margin-top:34px; }
.tool-led-login{ color:var(--amber); }
.tool-led-login::before{ background:var(--amber); box-shadow:0 0 6px var(--amber); }
.tool-tile-dj .tool-stub-label{ color:var(--amber-dim); }
.dj-badge{
  display:inline-block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber-dim); border-radius:4px; padding:3px 8px;
}
.pa-chips{ margin:16px 0 0; }
.hero-kicker{
  display:inline-block; margin-bottom:12px;
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--teal); border:1px solid rgba(41,230,214,0.4); border-radius:4px; padding:3px 9px;
}
.hero p strong{ color:var(--paper); }
/* A new feature, right under the hero text */
.hero .hero-news{
  margin:18px 0 0; padding:10px 14px; max-width:60ch;
  border-left:3px solid var(--amber); border-radius:0 6px 6px 0;
  background:rgba(255,255,255,0.04); font-size:0.95rem;
}
.hero-news-tag{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  font-weight:700; color:var(--amber); margin-right:6px;
}
.section-head p strong{ color:var(--paper); }
/* Lieder wünschen als große Kachel über den anderen Tools */
.tool-tile-feature{ margin-bottom:16px; border-color:var(--amber-dim); }
.tool-tile-feature .tool-name{ font-size:clamp(1.4rem, 3vw, 1.9rem); }
.tool-tile-feature .tool-desc{ font-size:1rem; max-width:70ch; }
.tool-more{ font-weight:700; color:var(--amber); font-size:0.92rem; }
.tool-tile-feature + .tool-row + .rack-group, .tool-row + .rack-group{ margin-top:46px; }

/* Datenschutz-Hinweis über dem Tool */
.pa-privacy{
  display:flex; gap:18px; align-items:flex-start;
  margin:0 0 6px; padding:22px 24px;
  background:rgba(41,230,214,0.07); border:1px solid rgba(41,230,214,0.45); border-left:4px solid var(--teal);
  border-radius:6px;
}
.pa-privacy-icon{ flex:none; width:40px; height:40px; color:var(--teal); }
.pa-privacy-icon svg{ width:100%; height:100%; }
.pa-privacy p{ margin:6px 0 0; color:var(--muted); font-size:0.95rem; line-height:1.6; max-width:80ch; }
.pa-privacy strong{ color:var(--paper); }
.pa-privacy .pa-privacy-title{
  margin:0; font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.05rem, 2.2vw, 1.35rem); line-height:1.25; color:var(--teal); letter-spacing:0.01em;
}
.pa-privacy .pa-privacy-small{ font-size:0.82rem; color:var(--muted-dim); }
@media (max-width:560px){
  .pa-privacy{ flex-direction:column; gap:10px; padding:18px; }
  .pa-privacy-icon{ width:32px; height:32px; }
}

/* ---------- legal (Impressum, Datenschutz) ---------- */
.legal{
  max-width:680px;
  background:var(--ink-raised);
  border:1px solid var(--line);
  border-radius:6px;
  padding:40px 40px 44px;
}
/* skaliert mit der Bildschirmbreite: "DATENSCHUTZERKLÄRUNG" ist ein einziges langes Wort */
.legal h1{
  font-size:clamp(1.05rem, 5vw, 1.9rem); margin:0 0 24px; text-transform:uppercase;
  hyphens:auto; overflow-wrap:break-word;
}
.legal h3{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--teal); margin:26px 0 8px;
}
.legal p{ margin:0 0 4px; color:var(--muted); font-size:0.92rem; line-height:1.65; }
.legal a{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:2px; }
.legal a:hover{ text-decoration-color:var(--teal); }
@media (max-width:480px){
  .legal{ padding:30px 20px 34px; }
}

/* ---------- footer ---------- */
footer{
  border-top:1px dashed var(--line);
  padding:34px 0 44px;
}
footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
footer .brand{ font-size:0.95rem; }
.footer-links{
  display:flex; flex-wrap:wrap; gap:8px 20px; list-style:none; margin:0; padding:0;
  font-size:0.84rem; color:var(--muted-dim);
}
.footer-links a{ color:inherit; text-decoration:none; }
.footer-links a:hover{ color:var(--paper); }

/* ====================================================================
   Bilder aus den Tools und Seitenaufbau
   ==================================================================== */

/* ---------- Rahmen: Browserfenster, Handy, Papier ---------- */
.frame, .phone, .paper{ margin:0; }
.frame img, .phone img, .paper img{ display:block; width:100%; height:auto; }
.frame{
  background:#0b0b10; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.03);
}
.frame-bar{
  display:flex; align-items:center; gap:7px; height:32px; padding:0 14px;
  background:#1b121e; border-bottom:1px solid var(--line);
}
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:#3b2a40; flex:none; }
.frame-url{
  margin-left:10px; flex:0 1 300px; min-width:0;
  font-family:var(--font-mono); font-size:0.7rem; color:var(--muted-dim);
  background:#100a13; border:1px solid var(--line-soft); border-radius:6px; padding:2px 10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.phone{
  width:100%; max-width:300px; padding:8px; background:#1d1520;
  border:1px solid #2e2133; border-radius:36px;
  box-shadow:0 40px 70px -35px rgba(0,0,0,0.95);
}
.phone img{ border-radius:28px; }
.paper{
  border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 40px 80px -40px rgba(0,0,0,0.9);
}
/* Browser hinten, Handy bzw. Papier vorne rechts */
.media-duo{ position:relative; padding:0 0 56px; }
.media-duo > .frame{ width:92%; }
.media-duo > .phone, .media-duo > .paper{ position:absolute; right:0; bottom:0; }
.media-duo > .phone{ width:30%; max-width:200px; padding:6px; border-radius:26px; }
.media-duo > .phone img{ border-radius:20px; }
.media-duo > .paper{ width:36%; }

/* ---------- Startseite ---------- */
.hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr); gap:48px; align-items:start;
}
.hero-copy{ padding-top:36px; }
.hero-copy p + p{ margin-top:12px; }
.hero-visual{ margin-top:-64px; }
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; gap:36px; }
  .hero-visual{ margin-top:0; }
}
.section-head-login{ display:flex; flex-direction:column; gap:14px; max-width:520px; }
.section-head-login p{ margin:0; }
.more-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* Kacheln mit Bild */
.tool-shot{
  display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top;
  border-radius:6px; border:1px solid var(--line); background:#0b0b10; margin-top:auto;
}
.tool-feature-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr); gap:28px; align-items:center; }
.tool-feature-text{ display:flex; flex-direction:column; gap:16px; }
.tool-feature-grid .tool-shot{ margin-top:0; }
.tool-points{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.tool-points li{ position:relative; padding-left:20px; color:var(--muted); font-size:0.92rem; }
.tool-points li::before{ content:""; position:absolute; left:0; top:0.62em; width:10px; height:2px; background:var(--teal); }
@media (max-width:760px){ .tool-feature-grid{ grid-template-columns:1fr; } }

/* ---------- Tool-Seiten ---------- */
.tool-hero{ position:relative; overflow:hidden; padding:28px 0 72px; border-bottom:1px dashed var(--line); }
.tool-hero::before{
  content:""; position:absolute; top:-10%; right:-12%; width:70%; height:120%; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,45,120,0.16), transparent 72%),
    radial-gradient(closest-side at 70% 70%, rgba(41,230,214,0.10), transparent 72%);
}
.tool-hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:56px; align-items:center; }
.tool-hero h1{ font-size:clamp(2rem, 4.4vw, 3.2rem); text-transform:uppercase; margin:10px 0 0; }
.lead{ font-size:1.12rem; color:var(--muted); max-width:46ch; margin:16px 0 0; }
.tool-hero .hero-actions{ margin-top:28px; gap:12px; }
@media (max-width:920px){ .tool-hero-grid{ grid-template-columns:1fr; gap:40px; } }

.callout{ padding:40px 0 0; }
.callout .pa-privacy{ margin:0; }

.showcase h2, .more-cta h2{ font-size:clamp(1.5rem, 3vw, 2.2rem); text-transform:uppercase; margin:10px 0 0; }
.feature-rows{ display:flex; flex-direction:column; gap:80px; margin-top:52px; }
.feature-row{ display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr); gap:56px; align-items:center; }
.feature-row.is-phone{ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); }
.feature-row:nth-child(even) .feature-media{ order:2; }
.feature-row:nth-child(even){ grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr); }
.feature-row.is-phone:nth-child(even){ grid-template-columns:minmax(0, 1.2fr) minmax(0, 0.8fr); }
.feature-media{ position:relative; display:flex; justify-content:center; }
.feature-media::before{
  content:""; position:absolute; inset:8% 4%; z-index:0; pointer-events:none; filter:blur(40px);
  background:linear-gradient(120deg, rgba(255,45,120,0.22), rgba(41,230,214,0.16));
}
.feature-media > *{ position:relative; z-index:1; }
.feature-row.is-phone .phone{ max-width:280px; }
.feature-num{ font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber); }
.feature-text h3{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); text-transform:uppercase; margin:10px 0 14px; }
.feature-text p{ color:var(--muted); margin:0; max-width:50ch; }
.ticks{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px; }
.ticks li{ position:relative; padding-left:22px; color:var(--muted); font-size:0.95rem; }
.ticks li::before{ content:""; position:absolute; left:0; top:0.66em; width:12px; height:2px; background:var(--teal); }
@media (max-width:860px){
  .feature-rows{ gap:60px; margin-top:40px; }
  .feature-row, .feature-row.is-phone, .feature-row:nth-child(even), .feature-row.is-phone:nth-child(even){ grid-template-columns:1fr; gap:28px; }
  .feature-row:nth-child(even) .feature-media{ order:0; }
  .feature-row.is-phone .phone{ max-width:250px; }
}

/* ---------- "Alle Tools, ein Login" unten auf jeder Tool-Seite ---------- */
.more{ border-top:1px dashed var(--line); }
.more-cta{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(100deg, rgba(255,45,120,0.14), rgba(41,230,214,0.10));
  border:1px solid var(--line); border-radius:8px; padding:28px 30px;
}
.more-cta p{ color:var(--muted); margin:10px 0 0; max-width:56ch; }
.more-label{
  margin:44px 0 14px; font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted-dim);
}
.more-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.more-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--ink-raised); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.more-card:hover{ border-color:var(--amber-dim); transform:translateY(-2px); }
.more-card img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-bottom:1px solid var(--line); }
.more-body{ display:flex; flex-direction:column; gap:5px; padding:14px 16px 18px; }
.more-tag{ font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber); }
.more-tag-free{ color:var(--teal); }
.more-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; text-transform:uppercase; }
.more-text{ color:var(--muted); font-size:0.9rem; line-height:1.5; }
@media (max-width:760px){
  .more-grid{ grid-template-columns:1fr; }
  .more-cta{ padding:22px 20px; }
}
@media (prefers-reduced-motion: reduce){ .more-card, .more-card:hover{ transition:none; transform:none; } }

/* ---------- Preis und häufige Fragen ---------- */
.price-note{ margin:12px 0 0; font-size:0.86rem; color:var(--muted); }
.price-note a{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--amber-dim); text-underline-offset:3px; }
.price-note a:hover{ text-decoration-color:var(--amber); }
.more-side{ display:flex; flex-direction:column; align-items:flex-start; }
.more-side .price-note{ max-width:44ch; }
.pricing{ border-top:1px dashed var(--line); }
.price-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 0.75fr); gap:20px; margin-top:34px; align-items:stretch; }
.price-card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--ink-raised); border:1px solid var(--line); border-radius:8px; padding:28px 30px;
}
.price-card-main{
  border-color:var(--amber-dim);
  background:linear-gradient(140deg, rgba(255,45,120,0.14), rgba(41,230,214,0.06)), var(--ink-raised);
}
.price-tag{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--amber); border:1px solid var(--amber-dim); border-radius:4px; padding:3px 9px;
}
.price-tag-free{ color:var(--teal); border-color:rgba(41,230,214,0.4); }
.price-amount{ margin:18px 0 0; font-size:1.05rem; color:var(--muted); }
.price-amount strong{ font-family:var(--font-display); font-size:clamp(2.2rem, 5vw, 3rem); color:var(--paper); letter-spacing:-0.01em; }
.price-sub{ margin:4px 0 0; color:var(--muted); font-size:0.92rem; }
.price-card .ticks{ margin-bottom:24px; }
.price-card .btn{ margin-top:auto; }
.price-small{ margin:12px 0 0; color:var(--muted); font-size:0.84rem; max-width:48ch; }
@media (max-width:760px){
  .price-grid{ grid-template-columns:1fr; }
  .price-card{ padding:24px 20px; }
}
.faq{ margin-top:56px; scroll-margin-top:80px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:first-of-type{ border-top:1px solid var(--line); margin-top:16px; }
.faq-item summary{
  cursor:pointer; list-style:none; position:relative;
  padding:16px 36px 16px 0; font-weight:700; font-size:1.02rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:1.3rem; color:var(--amber);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item summary:hover{ color:var(--paper); }
.faq-item p{ margin:0 0 18px; color:var(--muted); max-width:70ch; }
@media (max-width:680px){ .faq{ scroll-margin-top:110px; } }

/* Gastgeber-Link: Handy und Fenster der Desktop-App nebeneinander */
.media-pair{ display:flex; align-items:flex-end; justify-content:center; gap:24px; width:100%; }
.media-pair > .phone{ width:54%; max-width:270px; }
.appwin{
  width:42%; max-width:205px; border-radius:10px; overflow:hidden; background:#0b0b10;
  border:1px solid #2e2133; box-shadow:0 40px 70px -35px rgba(0,0,0,0.95);
}
.appwin img{ display:block; width:100%; height:auto; }
@media (max-width:860px){
  .media-pair{ gap:14px; }
  .media-pair > .phone{ max-width:220px; }
  .appwin{ max-width:170px; }
}

/* ---------- Live-Demo auf der Startseite ----------
   Besucher wünschen sich per Handy auf demo.deckbase.de einen Song; hier erscheint er wie in
   der DJ-Ansicht. Antwortet die Demo nicht, läuft eine Vorschau (assets/livedemo.js). */
.live{ border-top:1px dashed var(--line); }
.live-grid{ display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:48px; align-items:center; }
@media (max-width:920px){ .live-grid{ grid-template-columns:1fr; gap:32px; } }
.live-copy h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); margin-top:10px; text-transform:uppercase; letter-spacing:0.005em; }
.live-copy > p{ color:var(--muted); margin:14px 0 0; max-width:48ch; }
.live-scan{ display:flex; align-items:center; gap:22px; margin-top:26px; }
.live-qr{ width:148px; height:148px; flex:none; border-radius:10px; background:var(--paper); padding:6px; }
.live-steps{ margin:0; padding-left:1.2em; font-weight:600; line-height:1.9; }
.live-phone{ display:none; margin-top:22px; }
.live-small{ color:var(--muted-dim); font-size:0.86rem; margin:18px 0 0; max-width:52ch; }
/* Am Handy gibt es nichts zu scannen – dort ein Knopf statt QR-Code */
.live-mob{ display:none; }
@media (hover:none) and (pointer:coarse), (max-width:680px){
  .live-scan, .live-desk{ display:none; }
  .live-phone{ display:inline-flex; }
  .live-mob{ display:inline; }
}
/* Macht die Demo Pause, führt der QR-Code ins Leere */
.live.is-preview .live-scan, .live.is-preview .live-phone{ display:none; }
.live-side{ min-width:0; }
.live-head, .live-note{ max-width:440px; margin-left:auto; margin-right:auto; }
.live-head{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.live-head strong{ color:var(--paper); }
.live-dot{ width:9px; height:9px; border-radius:50%; background:var(--muted-dim); flex:none; }
.live.is-live .live-dot{ background:var(--amber); animation:live-pulse 1.6s infinite; }
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,45,120,0.55); }
  70%{ box-shadow:0 0 0 10px rgba(255,45,120,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,45,120,0); }
}
.live-count{ margin-left:auto; text-transform:none; letter-spacing:0; text-align:right; }
.live-note{ color:var(--muted); font-size:0.9rem; margin-top:0; margin-bottom:12px; }

/* Nachbau des App-Fensters: Farben, Größen und Abstände wie in der Songrequest-Desktop-App
   (Repo songrequest, desktop/ui/app.css). Eigene Namen (as-…), damit nichts mit der Seite kollidiert. */
.app-sim{
  --as-bg:#0b0b10; --as-surface:#15151d; --as-surface-2:#1f1f2a; --as-border:#2a2a38;
  --as-text:#f4f4f8; --as-muted:#9a9aae; --as-accent:#ff3d81; --as-accent-2:#8b5cf6; --as-ok:#34d399;
  --as-gradient:linear-gradient(135deg, var(--as-accent), var(--as-accent-2));
  --as-gradient-strong:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), var(--as-gradient);
  position:relative; max-width:440px; margin:0 auto; overflow:hidden;
  background:var(--as-bg); color:var(--as-text);
  border:1px solid var(--as-border); border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,0.55);
  font:15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  letter-spacing:normal; text-transform:none; text-align:left;
}
.app-sim *{ letter-spacing:normal; }
.as-top{ border-bottom:1px solid var(--as-border); }
.as-bar{ display:flex; align-items:center; justify-content:space-between; padding:8px 8px 6px 14px; }
.as-brand{ min-width:0; font-weight:800; font-size:1.05rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-brand span{ background:var(--as-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
.as-tools{ display:flex; flex:none; align-items:center; gap:4px; }
.as-icon{
  display:inline-grid; place-items:center; flex:none; width:32px; height:30px; font-size:0.95rem;
  background:var(--as-surface); border:1px solid var(--as-border); border-radius:9px; opacity:0.45;
}
.as-icon.on{ opacity:1; border-color:var(--as-accent-2); }
.as-win{ display:inline-grid; place-items:center; width:30px; height:30px; font-size:0.95rem; color:var(--as-muted); }
.as-tabs{ display:flex; justify-content:center; padding:2px 4px 8px; }
.as-tab{ flex:1 1 auto; text-align:center; white-space:nowrap; font-size:0.76rem; font-weight:600; color:var(--as-muted); border-radius:99px; padding:6px 5px; }
.as-tab.active{ background:var(--as-text); color:var(--as-bg); }
.as-count:not(:empty){ margin-left:2px; opacity:0.75; }
.as-status{
  display:flex; align-items:center; gap:8px; margin:0 10px 6px; padding:6px 10px;
  font-size:0.78rem; color:var(--as-muted); background:var(--as-surface); border:1px solid var(--as-border); border-radius:10px;
}
.as-lamp{ flex:none; width:9px; height:9px; border-radius:50%; background:#34d399; box-shadow:0 0 6px rgba(52,211,153,0.7); }
.as-main{ padding:10px; }
.as-event-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.as-select{
  position:relative; flex:1 1 150px; min-width:0; padding:8px 30px 8px 10px; font-size:0.9rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--as-bg); border:1px solid var(--as-border); border-radius:10px;
}
.as-select::after{
  content:""; position:absolute; right:12px; top:50%; width:7px; height:7px;
  border-right:2px solid var(--as-muted); border-bottom:2px solid var(--as-muted); transform:translateY(-70%) rotate(45deg);
}
.as-switch{
  display:flex; align-items:center; gap:8px; margin-right:auto; padding:5px 10px 5px 6px; white-space:nowrap;
  font-size:0.82rem; font-weight:700; background:var(--as-surface); border:1px solid rgba(52,211,153,0.5); border-radius:99px;
}
.as-track{ position:relative; width:34px; height:20px; border-radius:99px; background:var(--as-ok); }
.as-knob{ position:absolute; top:3px; left:17px; width:14px; height:14px; border-radius:50%; background:#fff; }
.as-mood{
  display:flex; align-items:center; gap:8px; margin:6px 0; padding:6px 10px; font-size:0.82rem;
  background:var(--as-surface); border:1px solid rgba(255,61,129,0.35); border-radius:10px;
}
.as-mood[hidden]{ display:none; }
.as-mood-label{ flex:none; font-weight:700; color:#ff7aa8; }
.as-mood-ticker{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; }
.as-mood-items{ display:inline-flex; gap:32px; font-weight:600; }
.as-mood-copy{ display:inline-flex; gap:18px; }
.as-mood-items .up{ color:var(--as-ok); font-weight:700; }
.as-mood-items.run{ animation:as-mood-run var(--ticker-time, 12s) linear infinite; }
@keyframes as-mood-run{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - 16px)); } }
.as-view{
  display:flex; gap:4px; margin:10px 0; padding:3px;
  background:var(--as-surface); border:1px solid var(--as-border); border-radius:99px;
}
.as-view span{ flex:1; text-align:center; font-size:0.82rem; font-weight:700; color:var(--as-muted); border-radius:99px; padding:5px 8px; }
.as-view span.on{ color:var(--as-text); background:var(--as-surface-2); }
.as-list{ display:grid; grid-template-columns:minmax(0, 1fr); gap:8px; }
.as-wish{ background:var(--as-surface); border:1px solid var(--as-border); border-radius:14px; padding:10px 12px; }
.as-wish.fresh{ border-color:var(--as-accent); animation:as-glow 2s ease-out; }
.as-wish.is-next{ border-color:var(--as-accent); box-shadow:0 0 0 1px var(--as-accent) inset; }
@keyframes as-glow{ from{ box-shadow:0 0 0 4px rgba(255,61,129,0.35); } to{ box-shadow:none; } }
.as-wish-head{ display:flex; align-items:center; gap:10px; }
.as-votes{ flex:none; display:grid; place-items:center; min-width:34px; height:34px; border-radius:10px; background:var(--as-surface-2); font-weight:800; }
.as-wish-main{ flex:1; min-width:0; }
.as-wish-title{ font-weight:700; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-wish-sub{ color:var(--as-muted); font-size:0.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-facts{ color:var(--as-muted); font-size:0.78rem; margin-top:4px; }
.as-flag{
  display:inline-block; margin-top:6px; padding:1px 8px; font-size:0.75rem; font-weight:700; color:#ffd1e1;
  background:rgba(255,61,129,0.14); border:1px solid rgba(255,61,129,0.55); border-radius:99px;
}
.as-actions{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.app-sim .as-btn{
  padding:7px 10px; font:inherit; font-size:0.82rem; font-weight:700; line-height:1.45; white-space:nowrap;
  color:#fff; background:var(--as-gradient-strong); border:0; border-radius:99px; cursor:pointer; text-transform:none;
}
.app-sim .as-btn.ok{ flex:1 1 auto; background:#0f6b4c; }
.app-sim .as-btn.bad{ flex:1 1 auto; background:#8a1f1f; }
.app-sim .as-btn.next{ flex:0 0 auto; color:var(--as-text); background:transparent; border:1px solid var(--as-border); }
.app-sim .as-btn.next[aria-pressed="true"]{ color:#fff; background:var(--as-gradient-strong); border-color:transparent; }
.app-sim .as-btn.ghost{ flex:0 0 auto; padding:7px 9px; color:var(--as-text); background:transparent; border:1px solid var(--as-border); }
.app-sim .as-btn:hover{ filter:brightness(1.12); }
.app-sim .as-btn:focus-visible{ outline:2px solid var(--as-accent); outline-offset:2px; }
.as-more{ margin:2px 0 0; text-align:center; font-size:0.8rem; color:var(--as-muted); }
.as-empty{ margin:0; padding:30px 10px; text-align:center; color:var(--as-muted); }
.as-foot{ padding:2px 10px 14px; text-align:center; font-size:0.75rem; color:var(--as-muted); }
.as-toast{
  position:absolute; left:50%; bottom:12px; z-index:2; width:max-content; max-width:calc(100% - 24px);
  padding:9px 12px; font-size:0.88rem; line-height:1.4; text-align:left;
  background:var(--as-surface-2); border:1px solid var(--as-border); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.45);
  opacity:0; transform:translate(-50%, 20px); transition:opacity 0.2s, transform 0.2s; pointer-events:none;
}
.as-toast.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.app-sim .as-toast-action{
  margin-left:8px; padding:2px 4px; font:inherit; font-weight:700; color:var(--as-accent);
  background:none; border:0; text-decoration:underline; cursor:pointer;
}
.as-toast-hint{ display:block; margin-top:2px; font-size:0.75rem; color:var(--as-muted); }
@media (prefers-reduced-motion: reduce){
  .as-mood-items.run{ animation:none; }
  .as-wish.fresh{ animation:none; }
}
/* Schmale Handys: etwas kleinere Knöpfe; passt es trotzdem nicht, rutschen sie in eine zweite Zeile */
@media (max-width:420px){
  .as-main{ padding:8px; }
  .as-wish{ padding:10px; }
  .as-actions{ gap:4px; }
  .app-sim .as-btn{ padding:6px 7px; font-size:0.72rem; }
  .app-sim .as-btn.ghost{ padding:6px 6px; }
  .as-win.mini{ display:none; }
}