/* Nexus Diktat - Oberflaeche.
   Farbwerte und Rundungen sind die NOVA-Tokens der Website (identisch mit dem
   Sichtbarkeits-Check), damit die Seite als Teil von nexus-ki.de wirkt und
   nicht als fremdes Werkzeug. Hell ist der Grundzustand, Dunkel folgt der
   Wahl des Besuchers (nx_theme) bzw. dem System. */

:root{
  --nxw:1080px; --lese:660px;
  --rand:clamp(18px,5vw,72px);
  --rad:28px; --rad-klein:14px; --rad-pille:980px;
  --ease:cubic-bezier(.4,0,.6,1); --takt:.32s;

  --flaeche-a:#FBFCFF; --flaeche-b:#EEF2FC; --karte:#FFFFFF;
  --ink:#1D1D1F; --ink2:#5B5B61;
  --line:#D5DDF2; --line-fein:#E3E9F8;
  --accent:#2F63E8; --accent-text:#2F63E8; --accent2:#0B7387;
  --gut:#1D5C2E; --warn:#7A4F00; --warn-flaeche:#FFF6E2; --warn-linie:#E8C87A;
  --glas:rgba(255,255,255,.70);
  --schatten:0 20px 50px -30px rgba(47,99,232,.28);
  --papier:#FFFFFF; --papier-linie:#E3E9F8;
  --knopf-a:#2F63E8; --knopf-b:#0B7387;
}
:root[data-theme="dark"]{
  --flaeche-a:#05070F; --flaeche-b:#0A0E1D; --karte:rgba(255,255,255,.045);
  --ink:#F5F7FF; --ink2:#A8B4D0;
  --line:rgba(140,170,255,.18); --line-fein:rgba(140,170,255,.10);
  --accent:#3F7BFF; --accent-text:#93B8FF; --accent2:#3FC8E0;
  --gut:#6FE39A; --warn:#FFD489; --warn-flaeche:rgba(255,196,90,.10);
  --warn-linie:rgba(255,196,90,.34);
  --glas:rgba(255,255,255,.05);
  --schatten:0 24px 60px -34px rgba(0,0,0,.8);
  --papier:rgba(255,255,255,.035); --papier-linie:rgba(140,170,255,.14);
  --knopf-a:#2F63E8; --knopf-b:#10788F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --flaeche-a:#05070F; --flaeche-b:#0A0E1D; --karte:rgba(255,255,255,.045);
    --ink:#F5F7FF; --ink2:#A8B4D0;
    --line:rgba(140,170,255,.18); --line-fein:rgba(140,170,255,.10);
    --accent:#3F7BFF; --accent-text:#93B8FF; --accent2:#3FC8E0;
    --gut:#6FE39A; --warn:#FFD489; --warn-flaeche:rgba(255,196,90,.10);
    --warn-linie:rgba(255,196,90,.34);
    --glas:rgba(255,255,255,.05);
    --schatten:0 24px 60px -34px rgba(0,0,0,.8);
    --papier:rgba(255,255,255,.035); --papier-linie:rgba(140,170,255,.14);
    --knopf-a:#2F63E8; --knopf-b:#10788F;
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--flaeche-a); color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.huelle{max-width:var(--nxw); margin:0 auto; padding:0 var(--rand)}
a{color:var(--accent-text)}

/* --- Kopf --- */
.kopf{
  display:flex; align-items:center; gap:12px;
  padding:18px var(--rand); max-width:var(--nxw); margin:0 auto;
}
.marke{display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.01em}
.marke b{font-weight:750}
.marke span{color:var(--ink2); font-weight:500}
.kopf .luecke{flex:1}
.zurueck{
  font-size:15px; text-decoration:none; color:var(--ink2);
  border:1px solid var(--line); border-radius:var(--rad-pille);
  padding:7px 15px; white-space:nowrap;
}
.zurueck:hover{color:var(--ink); border-color:var(--accent)}

/* --- Buehne --- */
.buehne{padding:22px 0 8px; text-align:center; position:relative}
.buehne::before{
  content:""; position:absolute; inset:-40% 10% 40%; z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%,
    rgba(47,99,232,.14), transparent 70%);
  pointer-events:none;
}
h1{
  font-size:clamp(30px,7.4vw,54px); line-height:1.08; letter-spacing:-.03em;
  margin:.1em 0 .32em; font-weight:700;
}
h1 .grad{
  background:linear-gradient(96deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.unter{
  color:var(--ink2); font-size:clamp(16px,3.6vw,19px);
  max-width:var(--lese); margin:0 auto 6px;
}
.marken-zeile{
  display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center;
  margin:16px 0 4px; font-size:14px; color:var(--ink2);
}
.marken-zeile i{font-style:normal; color:var(--gut); font-weight:700}

/* --- Aufnahme --- */
.aufnahme{margin:26px auto 0; max-width:var(--lese); text-align:center}
.mikro{
  width:132px; height:132px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(150deg,var(--knopf-a),var(--knopf-b));
  color:#fff; display:inline-grid; place-items:center;
  box-shadow:0 18px 44px -18px rgba(47,99,232,.75);
  transition:transform var(--takt) var(--ease), box-shadow var(--takt) var(--ease);
  position:relative; -webkit-tap-highlight-color:transparent;
}
.mikro:hover{transform:translateY(-2px)}
.mikro:active{transform:scale(.97)}
.mikro:focus-visible{outline:3px solid var(--accent-text); outline-offset:4px}
.mikro svg{width:46px; height:46px; display:block}
.mikro .ring{
  position:absolute; inset:-10px; border-radius:50%;
  border:2px solid var(--accent); opacity:0;
}
body.hoert .mikro{
  background:linear-gradient(150deg,#D93B30,#B02419);
  box-shadow:0 18px 44px -18px rgba(217,59,48,.8);
}
body.hoert .mikro .ring{animation:puls 1.7s var(--ease) infinite}
@keyframes puls{
  0%{opacity:.9; transform:scale(1)}
  100%{opacity:0; transform:scale(1.35)}
}
.mikro-text{margin:14px 0 0; font-weight:600; font-size:17px}
.mikro-hilfe{margin:4px 0 0; color:var(--ink2); font-size:14.5px; min-height:1.5em}
.uhr{font-variant-numeric:tabular-nums; color:var(--ink2)}

.nebenwege{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:20px 0 0;
}
.knopf-leise{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  border-radius:var(--rad-pille); padding:10px 18px; font-size:15px;
  cursor:pointer; font-family:inherit;
  transition:border-color var(--takt), color var(--takt);
}
.knopf-leise:hover{border-color:var(--accent); color:var(--accent-text)}

/* --- Diktat-Feld --- */
.diktat-feld{margin:22px auto 0; max-width:var(--lese); text-align:left}
.diktat-feld label{
  display:block; font-size:13.5px; font-weight:650; color:var(--ink2);
  text-transform:none; margin:0 0 7px; letter-spacing:.01em;
}
textarea{
  width:100%; min-height:132px; resize:vertical; padding:15px 16px;
  border-radius:var(--rad-klein); border:1px solid var(--line);
  background:var(--karte); color:var(--ink);
  font:inherit; font-size:16.5px; line-height:1.55;
}
textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
body.hoert textarea{border-color:var(--accent)}
.vorlaeufig{color:var(--ink2)}

.los{
  display:block; width:100%; margin:14px 0 0; padding:16px 22px;
  border:0; border-radius:var(--rad-pille); cursor:pointer;
  background:linear-gradient(96deg,var(--knopf-a),var(--knopf-b)); color:#fff;
  font:650 17.5px/1.2 inherit; font-family:inherit;
  box-shadow:0 14px 34px -16px rgba(47,99,232,.8);
  transition:transform var(--takt) var(--ease), filter var(--takt);
}
.los:hover{transform:translateY(-1px); filter:brightness(1.06)}
.los:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* --- Ergebnis --- */
.ergebnis{margin:34px auto 0; max-width:var(--lese)}
.ergebnis[hidden]{display:none}
.reiter{
  display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.reiter::-webkit-scrollbar{display:none}
.reiter button{
  flex:0 0 auto; border:1px solid var(--line); background:var(--karte);
  color:var(--ink2); border-radius:var(--rad-pille);
  padding:9px 16px; font:600 14.5px/1 inherit; font-family:inherit;
  cursor:pointer; white-space:nowrap;
  transition:all var(--takt) var(--ease);
}
.reiter button:hover{border-color:var(--accent); color:var(--ink)}
.reiter button[aria-selected="true"]{
  background:var(--knopf-a); border-color:var(--knopf-a); color:#fff;
}
.reiter button:focus-visible{outline:3px solid var(--accent-text); outline-offset:2px}

.warnung{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--warn-flaeche); border:1px solid var(--warn-linie);
  color:var(--warn); border-radius:var(--rad-klein);
  padding:13px 15px; margin:0 0 12px; font-size:15px; line-height:1.5;
}
.warnung[hidden]{display:none}
.warnung b{color:var(--warn)}
.warnung svg{flex:0 0 auto; width:19px; height:19px; margin-top:2px}

.blatt{
  background:var(--papier); border:1px solid var(--papier-linie);
  border-radius:var(--rad); box-shadow:var(--schatten);
  padding:clamp(20px,4.6vw,34px);
  white-space:pre-wrap; word-wrap:break-word;
  font-size:16.5px; line-height:1.72; min-height:210px;
  font-variant-numeric:tabular-nums;
}
.blatt mark{
  background:var(--warn-flaeche); color:var(--warn);
  border-bottom:2px solid var(--warn-linie); border-radius:3px;
  padding:0 3px; font-weight:600;
}
.blatt .cursor{
  display:inline-block; width:2px; height:1.05em; vertical-align:-.16em;
  background:var(--accent); animation:blinken .9s steps(2,start) infinite;
}
@keyframes blinken{to{visibility:hidden}}

.werkzeuge{display:flex; gap:9px; flex-wrap:wrap; margin:14px 0 0}
.werkzeuge button{
  border:1px solid var(--line); background:var(--karte); color:var(--ink);
  border-radius:var(--rad-pille); padding:10px 17px;
  font:600 14.5px/1 inherit; font-family:inherit; cursor:pointer;
  transition:all var(--takt) var(--ease);
}
.werkzeuge button:hover{border-color:var(--accent); color:var(--accent-text)}

/* --- Abschluss --- */
.abschluss{
  margin:44px auto 0; max-width:var(--lese);
  background:linear-gradient(140deg,rgba(47,99,232,.10),rgba(11,115,135,.08));
  border:1px solid var(--line); border-radius:var(--rad);
  padding:clamp(22px,5vw,34px); text-align:center;
}
.abschluss h2{font-size:clamp(21px,4.6vw,27px); line-height:1.2; margin:0 0 10px; letter-spacing:-.02em}
.abschluss p{color:var(--ink2); margin:0 auto 18px; max-width:46ch}
.abschluss .los{display:inline-block; width:auto; text-decoration:none; padding:15px 30px}

.hinweis{
  max-width:var(--lese); margin:26px auto 0; color:var(--ink2);
  font-size:14px; line-height:1.62;
}
.fuss{
  margin:44px 0 0; padding:22px var(--rand) 40px; border-top:1px solid var(--line-fein);
  color:var(--ink2); font-size:14px; text-align:center;
}
.fuss a{margin:0 9px; white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
}
@media print{
  .kopf,.buehne,.aufnahme,.diktat-feld,.reiter,.werkzeuge,.abschluss,.hinweis,.fuss{display:none !important}
  .blatt{box-shadow:none; border:0; padding:0; color:#000; background:#fff}
  body{background:#fff}
}

/* --- Wartezeit fuellen -----------------------------------------------------
   Gemessen am 28.08.2026: Das erste Wort der KI kommt nach 4,6 s. Vier Sekunden
   leere Flaeche sind im Feed der Moment zum Wegwischen - genau der Fehler, der
   schon beim ersten Nexus-Film-Video steckte ("toter Start"). Deshalb steht ab
   der ersten Zehntelsekunde das eigene Diktat auf dem Blatt und verwandelt sich
   dann. Der Nutzer sieht, WORAN gearbeitet wird, nicht DASS gearbeitet wird. */
.wartet{
  display:flex; align-items:center; gap:10px; margin:0 0 16px;
  font-weight:600; color:var(--accent-text);
}
.punkte{display:inline-flex; gap:4px}
.punkte i{
  width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:huepf 1.05s var(--ease) infinite;
}
.punkte i:nth-child(2){animation-delay:.16s}
.punkte i:nth-child(3){animation-delay:.32s}
@keyframes huepf{0%,60%,100%{opacity:.25; transform:translateY(0)}
                 30%{opacity:1; transform:translateY(-4px)}}
.roh{
  color:var(--ink2); font-size:15.5px; line-height:1.6;
  border-left:3px solid var(--line); padding-left:14px;
  opacity:.85; animation:aufatmen 2.4s var(--ease) infinite;
}
@keyframes aufatmen{0%,100%{opacity:.85} 50%{opacity:.55}}

/* Auf dem Handy passen die vier Reiter nicht nebeneinander (gemessen bei 390 px:
   sie brauchen ~446 px). Waagerechtes Scrollen wuerde den vierten verstecken -
   ausgerechnet den, der zeigt, dass aus EINEM Diktat VIER Schreiben werden.
   Deshalb zwei Reihen statt einer Rolle. */
@media (max-width:560px){
  .reiter{display:grid; grid-template-columns:1fr 1fr; gap:8px; overflow:visible}
  .reiter button{width:100%; padding:11px 8px; font-size:14px}
}

/* Bei 320 px (iPhone SE 1. Generation, noch immer im Umlauf) passte die Kopfzeile
   nicht: "Nexus Diktat · kostenlos" plus der Knopf ergaben 329 px auf 320 px
   Flaeche - gemessen 28.08.2026. Der Zusatz "· kostenlos" faellt dort weg; er
   steht ohnehin gleich darunter in der Merkmalszeile. */
@media (max-width:379px){
  .marke span{display:none}
  .marke{font-size:16px}
  .zurueck{padding:6px 12px; font-size:14px}
}