/* ZortyAI – eigene Optik „Weltraum“ (Board, OWL-2308, 29.10.2026): Nachthimmel, Sterne, Planet, Akzent Orange.
   Funktionsumfang nach dem Vorbild „Sort my footage“ (docs/rea/BEFUND.md), Farben und Schrift bewusst anders. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }

:root {
  --all: #05070f;        /* Hintergrund oben, tiefes Weltall */
  --all-2: #0b1026;      /* Hintergrund unten */
  --tafel: #0e1430;      /* App-Fenster */
  --tinte: #f3f5fb;      /* Überschriften */
  --text: #c3c9dc;
  --leise: #8a93ad;
  --orange: #ff7a1a;     /* Akzent */
  --orange-hell: #ffa45c;
  --orange-flaeche: rgba(255, 122, 26, .14);
  --nebel: #23307a;      /* blauer Nebel im Hintergrund, kein Akzent */
  --linie: rgba(255, 255, 255, .09);
  --glas: rgba(255, 255, 255, .045);
  --kopf: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--all); }
body {
  margin: 0; font: 400 16px/1.55 var(--sans); color: var(--text); position: relative; min-height: 100vh;
  background: radial-gradient(900px 600px at 88% 4%, rgba(255,122,26,.10) 0%, transparent 60%),
              radial-gradient(1100px 800px at 6% 30%, rgba(35,48,122,.55) 0%, transparent 65%),
              linear-gradient(180deg, var(--all), var(--all-2));
}
/* Sternenhimmel: drei Lagen kleiner Punkte, die mitscrollen */
body::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 141px 97px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 77px 163px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 188px 12px, rgba(200,215,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 59px 211px, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(2px 2px at 311px 147px, rgba(255,214,170,.95) 50%, transparent 52%),
    radial-gradient(1px 1px at 263px 283px, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 389px 61px, rgba(200,215,255,.9) 50%, transparent 52%);
  background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 420px 420px, 420px 420px, 420px 420px;
}
h1, h2, h3 { hyphens: manual; overflow-wrap: normal; word-break: normal; }
em { font-family: var(--kopf); font-style: normal; font-weight: inherit; color: var(--orange); }
a { color: var(--orange-hell); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: #fff; color: var(--all); padding: 8px 12px; border-radius: 8px; z-index: 10; }

.kopf-innen, main, .fuss { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.kopf-innen { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.marke { display: inline-flex; align-items: center; gap: 8px; font: 700 16px var(--kopf); text-decoration: none; color: var(--tinte); letter-spacing: -.01em; }
.planet-klein { width: 28px; height: 28px; }
.kopf nav a { font: 500 14px var(--sans); text-decoration: none; color: var(--tinte); padding: 8px 14px; border-radius: 999px; background: var(--glas); border: 1px solid rgba(255,255,255,.14); }
.kopf nav a:hover { border-color: var(--orange); }

.buehne { padding: 28px 0 8px; position: relative; }
.dachzeile { font: 500 11px var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--leise); margin: 0 0 14px; }
.stern { color: var(--orange); margin-right: 6px; }
.buehne h1 { font: 600 clamp(34px, 5.8vw, 68px)/1.04 var(--kopf); color: var(--tinte); margin: 0; letter-spacing: -.035em; }
.buehne h1 em { background: linear-gradient(90deg, var(--orange), #ffc27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notiz {
  position: absolute; right: 0; bottom: 0; max-width: 270px; margin: 0; padding: 12px 16px 12px 18px;
  background: rgba(14,20,48,.85); color: var(--tinte); font: 400 14px/1.45 var(--sans);
  border: 1px solid var(--linie); border-left: 3px solid var(--orange); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.notiz::before { content: 'Funkspruch'; display: block; font: 600 10px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--orange-hell); margin-bottom: 4px; }

/* Das App-Fenster */
.fenster {
  position: relative; margin: 36px 0 0; background: var(--tafel); border-radius: var(--r); overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,122,26,.05);
  background-image: radial-gradient(520px 340px at 6% 20%, rgba(35,48,122,.6) 0%, rgba(35,48,122,0) 70%),
                    radial-gradient(520px 360px at 72% 88%, rgba(255,122,26,.08) 0%, rgba(255,122,26,0) 70%);
}
.fenster-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px 10px; flex-wrap: wrap; }
.wer { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #070a1a; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 18px rgba(255,122,26,.18); display: grid; place-items: center; flex: none; }
.avatar svg { width: 30px; height: 30px; }
.wer-zeile { margin: 0; font: 600 11px var(--sans); color: var(--tinte); }
.wer-zeile span { color: var(--orange-hell); font-weight: 500; }
.fenster-titel { margin: 0; font: 600 22px/1.2 var(--kopf); color: var(--tinte); letter-spacing: -.02em; overflow-wrap: anywhere; }
.fenster-titel em { color: var(--orange-hell); }
.aktionen { display: flex; align-items: center; gap: 10px; }
.status { font: 400 12px var(--sans); color: var(--leise); background: var(--glas); border: 1px solid var(--linie); padding: 8px 14px; border-radius: 999px; }
.sortieren {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--orange); background: rgba(255,122,26,.12); color: var(--tinte);
  font: 600 14px var(--sans); padding: 7px 16px 7px 8px; border-radius: 999px; cursor: pointer; box-shadow: 0 0 22px rgba(255,122,26,.18);
}
.sortieren svg { width: 26px; height: 26px; transition: transform .6s; }
.sortieren:hover:not(:disabled) svg { transform: rotate(-30deg); }
.sortieren:disabled { opacity: .45; cursor: default; box-shadow: none; }
.sortieren.laeuft svg { animation: drehen 2.4s linear infinite; }

.frage { display: flex; gap: 18px; align-items: flex-start; padding: 6px 22px 14px; flex-wrap: wrap; }
.blase { background: rgba(255,255,255,.06); border-radius: 14px; padding: 10px 16px; border: 1px solid var(--linie); }
.blase-wer { margin: 0; font: 500 12px var(--sans); color: var(--orange-hell); }
.blase-text { margin: 0; font: 500 14px var(--sans); color: var(--tinte); }
.frage-wahl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; flex: 1; min-width: 260px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.knopf { font: 500 14px var(--sans); border-radius: 999px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.16); background: var(--glas); color: var(--tinte); cursor: pointer; }
.knopf:hover:not(:disabled) { border-color: var(--orange-hell); }
.knopf.haupt { background: var(--orange); color: #1a0b00; border-color: var(--orange); font-weight: 600; }
.knopf.haupt:hover:not(:disabled) { background: var(--orange-hell); }
.knopf.leise { padding: 7px 14px; font-size: 13px; }
.knopf:disabled { opacity: .5; cursor: default; }
.modus { border: 0; padding: 0; margin: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.modus legend { float: left; font: 500 10px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--leise); margin-right: 8px; padding: 0; }
.modus label { font: 500 13px var(--sans); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linie); background: var(--glas); color: var(--text); cursor: pointer; }
.modus input { position: absolute; opacity: 0; pointer-events: none; }
.modus label:has(input:checked) { background: var(--orange-flaeche); border-color: rgba(255,122,26,.6); color: #ffc08f; }
.modus label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.eigene { display: flex; flex-direction: column; gap: 4px; font: 500 12px var(--sans); color: var(--leise); flex: 1 1 320px; }
.eigene input { font: 400 14px var(--sans); padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #080c20; color: var(--tinte); width: 100%; }
.eigene input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.eigene[hidden] { display: none; }
.hinweis { margin: 0; flex-basis: 100%; font: 400 12px var(--sans); color: var(--leise); }
.hinweis:empty { display: none; }

.zahlen { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 22px; padding: 12px 18px; background: rgba(5,7,15,.55); border: 1px solid var(--linie); border-radius: 14px; backdrop-filter: blur(6px); }
.zahlen div { min-width: 0; }
.zahlen dt { font: 500 9.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); display: flex; align-items: center; gap: 5px; }
.zahlen dd { margin: 2px 0 0; font: 600 24px/1.2 var(--kopf); color: var(--tinte); font-variant-numeric: tabular-nums; }
.zahlen dd.akzent { color: var(--orange); }
.punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 6px var(--orange); display: inline-block; flex: none; }
.punkt.hell { background: #cfd8ff; box-shadow: 0 0 6px rgba(207,216,255,.8); }

.flaeche { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); gap: 16px; padding: 16px 22px 8px; min-height: 420px; }
.spalte h2 { font: 600 15px var(--kopf); color: var(--orange-hell); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; letter-spacing: .01em; }
.spalte:last-child h2 { color: var(--tinte); }
.karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; }
.karte { background: rgba(255,255,255,.05); border: 1px solid var(--linie); border-radius: 12px; padding: 8px 10px 10px; animation: auf .35s ease-out; min-width: 0; }
.karte-kopf { display: flex; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--tinte); }
.karte-kopf .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.karte-kopf .anzahl { color: var(--leise); font-variant-numeric: tabular-nums; }
.ordner-icon { width: 14px; height: 12px; flex: none; color: var(--orange-hell); }
.bilder { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; min-height: 26px; }
.bilder img, .haufen img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.5); background: #1a2142; }
.karte.duplikate { border-style: dashed; border-color: rgba(255,122,26,.45); }

.mitte { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.haufen { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1; display: grid; place-items: center; }
.haufen img { position: absolute; width: 40px; height: 40px; border-radius: 8px; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 4px 12px rgba(0,0,0,.55); }
.planet-gross { width: 72%; height: 72%; overflow: visible; transition: opacity .4s; }
.planet-gross .umlauf { transform-origin: 50px 50px; animation: drehen 14s linear infinite; }
.planet-gross .schweben { animation: schweben 6s ease-in-out infinite; }
.haufen.voll .planet-gross { opacity: .18; }
.chaos { font: 500 12px var(--sans); letter-spacing: .04em; color: var(--leise); margin: 6px 0 0; }
.mitte .karten { grid-template-columns: minmax(0, 220px); justify-content: center; margin-top: 12px; width: 100%; }

.fuss-leiste { display: flex; align-items: center; gap: 10px; padding: 8px 22px 18px; min-height: 52px; flex-wrap: wrap; }
.chip { background: var(--orange-flaeche); color: #ffc08f; border: 1px solid rgba(255,122,26,.45); font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }

.drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 56px 0 24px; }
.drei .nr { font: 600 11px var(--sans); letter-spacing: .22em; color: var(--orange); margin: 0 0 8px; }
.drei h2 { font: 600 28px/1.12 var(--kopf); color: var(--tinte); margin: 0 0 12px; letter-spacing: -.02em; }
.drei p { margin: 0; font-size: 15px; }
.drei strong { color: var(--tinte); }
.fuss { padding: 28px 24px 40px; font-size: 13px; color: var(--leise); }

@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes auf { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .planet-gross .umlauf, .planet-gross .schweben, .sortieren.laeuft svg { animation: none; } }

@media (max-width: 1000px) {
  .flaeche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mitte { grid-column: 1 / -1; order: -1; }
  .haufen { max-width: 260px; }
  .notiz { position: static; margin: 22px 0 0 auto; }
  .drei { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .kopf-innen, main, .fuss { padding: 0 14px; }
  .fenster-kopf, .frage { padding-left: 14px; padding-right: 14px; }
  .aktionen { width: 100%; justify-content: space-between; }
  .zahlen { grid-template-columns: repeat(2, 1fr); margin: 0 14px; gap: 8px; }
  .zahlen div:first-child { grid-column: 1 / -1; }
  .flaeche { grid-template-columns: 1fr; padding: 14px; }
  .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss-leiste { padding: 8px 14px 16px; }
  .notiz { max-width: 100%; }
}

/* Hilfe */
.hilfe { max-width: 820px; padding-bottom: 40px; }
.hilfe h1 { font: 600 clamp(32px, 5vw, 50px)/1.08 var(--kopf); color: var(--tinte); margin: 24px 0 12px; letter-spacing: -.03em; }
.hilfe h2 { font: 600 24px/1.2 var(--kopf); color: var(--tinte); margin: 36px 0 8px; letter-spacing: -.015em; }
.hilfe h3 { font: 600 16px var(--sans); color: var(--tinte); margin: 20px 0 4px; }
.hilfe strong { color: var(--tinte); }
.hilfe section { background: var(--glas); border: 1px solid var(--linie); border-radius: 16px; padding: 4px 22px 18px; margin: 16px 0; }
.hilfe li { margin: 4px 0; }
.hilfe li::marker { color: var(--orange); }
.hilfe .verlauf h3 { font-family: var(--kopf); font-weight: 600; font-size: 19px; }

/* Werbeseite, Anmeldung, Zugänge (ab 1.8.0) */
.kopf nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.kopf nav a.laden { background: linear-gradient(180deg, var(--orange-hell), var(--orange)); color: #1a0c02; border-color: transparent; font-weight: 600; }
.werbung-text { max-width: 640px; font: 400 17px/1.55 var(--sans); color: var(--text); margin: 22px 0 18px; }
.buehne .knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; }
a.knopf { text-decoration: none; display: inline-block; }
.schaufenster { margin: 26px 0 8px; }
.schaufenster img { width: 100%; height: auto; display: block; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 34px 0 40px; }
.zwei article { background: var(--glas); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 24px; }
.zwei h2 { font: 600 24px/1.2 var(--kopf); color: var(--tinte); margin: 6px 0 12px; letter-spacing: -.02em; }
.zwei h2 em { color: var(--orange-hell); font-style: normal; }
.zwei ul { padding-left: 18px; color: var(--text); line-height: 1.6; }
.anmeldung { display: flex; justify-content: center; padding-top: 40px; padding-bottom: 60px; }
.formular { width: 100%; max-width: 440px; padding: 26px; display: grid; gap: 14px; }
.formular h1 { font: 600 28px var(--kopf); color: var(--tinte); margin: 0; }
.formular p { margin: 0; color: var(--text); }
.formular label { display: grid; gap: 6px; font: 500 13px var(--sans); color: var(--leise); }
.formular input { font: 400 16px var(--sans); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.3); color: var(--tinte); min-width: 0; }
.formular input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.formular form { display: grid; gap: 14px; }
.fehler { color: #ff9b8a !important; min-height: 1em; }
.oder { font-size: 13px; color: var(--leise) !important; }
.oder a { color: var(--orange-hell); }
.zugaenge { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.zugaenge li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,.25); overflow-wrap: anywhere; }
@media (max-width: 760px) { .zwei { grid-template-columns: 1fr; } }