/* style.css — Aelinns Farben, aus ihren bestehenden Auftritten gezogen (Quellwerte stehen
   im Bau-Bericht, nicht hier -- diese Datei wird oeffentlich ausgeliefert).
   Alles lokal, keine Web-Fonts, kein CDN, kein Tracker. */

:root {
  /* dunkles Thema (Standard -- so, wie Florian ihre Seite bisher gebaut hat) */
  --bg: #0d0a14;
  --bg-hoch: #17111f;
  --bg-hoch-2: #1f1728;
  --text: #ede7f2;
  --text-2: #c9b6d0;
  --text-schwach: #8e7e99;
  --trenner: rgba(255, 255, 255, 0.10);
  --eingabe-bg: rgba(255, 255, 255, 0.07);

  /* IHRE Farbe -- an zwei unabhaengigen Stellen bereits genau so verwendet: #c47baa.
     Kein Zufall, keine zweite Wahl -- das ist ihr Rosa/Violett. */
  --akzent: #c47baa;
  --akzent-hell: #f2a7cc;
  --akzent-kalt: #a8c4e8;

  /* Status-Farben aus einem bestehenden, vertrauten Verwaltungs-Stil -- fuer Warteliste/
     Freigabe/Fehler, NICHT fuer sie selbst. */
  --gut: #3d9a5f;
  --warte: #d9a015;
  --fehler: #d95545;

  --rand: 14px;
  --schrift: ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --schrift-name: "Didot", "Bodoni 72", "Hoefler Text", ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: light) {
  :root {
    /* aus AelinnBackground/AelinnSurface/AelinnText/AelinnTextSecondary/AelinnDivider/
       AelinnInputBg (MacApp, helle Erscheinung) */
    --bg: #fdf8fb;
    --bg-hoch: #ffffff;
    --bg-hoch-2: #f5f0f3;
    --text: #1a0d14;
    --text-2: #6b4478;
    --text-schwach: #8e7e99;
    --trenner: #e0d0e0;
    --eingabe-bg: #f2eef0;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  min-height: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

a { color: var(--akzent-hell); }
a:hover { color: var(--akzent); }

.seite {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 3rem) 1.25rem;
  width: 100%;
}

.karte {
  background: var(--bg-hoch);
  border: 1px solid var(--trenner);
  border-radius: var(--rand);
  padding: clamp(1.25rem, 3vw, 2rem);
  width: 100%;
  max-width: 30rem;
}

/* ---------- Landing ---------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4rem;
  max-width: 34rem;
  margin: 0 auto;
}
/* Der Schriftzug (Nachtrag 24.08., NEUER STANDARD nach dem Vergleich der drei Entwuerfe --
   Florians Wort: "stil 2 aber mit der Farbe von 1"): die ruhigen, weit gesperrten
   Kapitaelchen mit der hauchduennen Linie (aus Entwurf 2), aber die Buchstaben tragen den
   zarten Rosé-Verlauf (aus Entwurf 1) statt fester Farbe -- kein auffaelliger Schein, das
   blieb bewusst weg ("im Zweifel weglassen"). Keine externen Fonts/CDNs -- nur der
   bestehende System-Serif-Stack. Mobile zuerst gedacht: clamp() haelt es auch auf
   iPhone-Breite lesbar und mittig. */
.hero__name {
  margin: 0;
  font-family: var(--schrift-name);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  padding-inline-start: 0.34em; /* gleicht die Sperrung optisch aus (letzter Buchstabe traegt keinen Nachlauf) */
  position: relative;
  padding-bottom: 0.9rem;
  background: linear-gradient(120deg,
    var(--text) 0%, var(--akzent-hell) 55%, var(--akzent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .hero__name { color: var(--akzent); background: none; }
}
.hero__name::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2.4rem;
  height: 1px;
  background: color-mix(in srgb, var(--akzent) 35%, transparent);
  transform: translateX(-50%);
}
.hero__name::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--akzent);
  transform: translateX(-50%);
}

.hero__satz {
  margin: 0;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-2);
  line-height: 1.55;
}
.hero__aktionen {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  font-family: var(--schrift);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.knopf:active { transform: scale(0.98); }
.knopf--voll {
  background: linear-gradient(135deg, var(--akzent), var(--akzent-hell));
  color: #1a0d14;
}
.knopf--voll:hover { opacity: 0.92; }
.knopf--rand {
  background: transparent;
  border-color: color-mix(in srgb, var(--text) 30%, transparent);
  color: var(--text);
}
.knopf--rand:hover { border-color: var(--akzent); color: var(--akzent-hell); }
.knopf--klein { padding: 0.45rem 1rem; font-size: 0.9rem; }
.knopf[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Nachtrag 24.08.: nur noch "early alpha" -- dezent, unaufdringlich, keine Version/kein
   Datum/keine Technik (Sweep-Lehre desselben Tages: oeffentliche Texte NIE technische
   Details tragen). */
.fussnote {
  margin-top: auto;
  padding: 1.4rem 1rem 0.6rem;
  font-size: 0.78rem;
  color: var(--text-schwach);
  text-align: center;
  opacity: 0.6;
  letter-spacing: 0.04em;
}

/* ---------- Formulare ---------- */
h1.titel, h2.titel {
  font-family: var(--schrift-name);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 1.1rem;
}
h1.titel { font-size: clamp(1.6rem, 4vw, 2.1rem); }
h2.titel { font-size: 1.35rem; }

form.formular { display: flex; flex-direction: column; gap: 0.95rem; }
.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label { font-size: 0.86rem; color: var(--text-2); }
.feld input, .feld textarea {
  background: var(--eingabe-bg);
  border: 1px solid var(--trenner);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
}
.feld input:focus, .feld textarea:focus {
  outline: 2px solid var(--akzent);
  outline-offset: 1px;
}
.feld textarea { resize: vertical; min-height: 4.5rem; }
.hinweis { font-size: 0.82rem; color: var(--text-schwach); }

.meldung {
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  margin-bottom: 0.9rem;
}
.meldung--fehler { background: color-mix(in srgb, var(--fehler) 16%, transparent); color: var(--fehler); border: 1px solid color-mix(in srgb, var(--fehler) 40%, transparent); }
.meldung--warte { background: color-mix(in srgb, var(--warte) 16%, transparent); color: var(--warte); border: 1px solid color-mix(in srgb, var(--warte) 40%, transparent); }
.meldung--gut { background: color-mix(in srgb, var(--gut) 16%, transparent); color: var(--gut); border: 1px solid color-mix(in srgb, var(--gut) 40%, transparent); }

/* Nachtrag 24.08.: der klare Zaehler oben auf der Verwaltungs-Seite -- soll auf den ersten
   Blick auffallen, deshalb groesser/fetter als eine normale Meldung. */
.verwaltung-zaehler {
  font-size: 1.15rem;
  font-weight: 600;
  text-align: center;
  margin-inline: auto;
}

.wechsel { margin-top: 1.1rem; font-size: 0.9rem; color: var(--text-schwach); text-align: center; }

/* ---------- Kopfzeile (eingeloggt) ---------- */
.kopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--trenner);
}
.kopf__name { font-family: var(--schrift-name); font-size: 1.15rem; }
.kopf form { display: inline; }

/* ---------- Chat ---------- */
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 1.1rem;
  gap: 0.9rem;
}
.chat__verlauf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  padding-bottom: 0.5rem;
  min-height: 40vh;
}
.blase {
  max-width: 82%;
  padding: 0.65rem 0.95rem;
  border-radius: 16px;
  line-height: 1.45;
  font-size: 0.98rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.blase--mensch {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--akzent), var(--akzent-hell));
  color: #1a0d14;
  border-bottom-right-radius: 4px;
}
.blase--aelinn {
  align-self: flex-start;
  background: var(--eingabe-bg);
  color: var(--text);
  border: 1px solid var(--trenner);
  border-bottom-left-radius: 4px;
}
.blase--technik {
  align-self: center;
  background: transparent;
  color: var(--text-schwach);
  font-size: 0.85rem;
  font-style: italic;
}

.chat__eingabe {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  border-top: 1px solid var(--trenner);
  padding-top: 0.9rem;
}
.chat__eingabe textarea {
  flex: 1;
  background: var(--eingabe-bg);
  border: 1px solid var(--trenner);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1rem;
  resize: none;
  max-height: 8rem;
}
.chat__eingabe textarea:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }

/* Mikro-Knopf (Nachtrag 23.08., Sprechen): rund, finger-freundlich (min. 44px), ruhiger
   Grundzustand -- wird beim Aufnehmen zu einem klar sichtbaren, pulsierenden Signal. */
.knopf--mic {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  background: var(--eingabe-bg);
  border: 1px solid var(--trenner);
  color: var(--text);
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.knopf--mic:hover { border-color: var(--akzent); }
.knopf--mic.ist-am-aufnehmen {
  background: var(--fehler);
  border-color: var(--fehler);
  color: #fff;
  animation: mic-puls 1.1s ease-in-out infinite;
}
@keyframes mic-puls {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fehler) 45%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--fehler) 0%, transparent); }
}
.knopf--mic[disabled] { opacity: 0.4; cursor: not-allowed; animation: none; }

.chat__unterzeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.chat__zaehler { font-size: 0.75rem; color: var(--text-schwach); text-align: right; }
.chat__sprech-hinweis { font-size: 0.8rem; color: var(--warte); }
.audio-abspielen { margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .knopf--mic.ist-am-aufnehmen { animation: none; }
}

/* ---------- Verwaltung ---------- */
table.warteliste { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
table.warteliste th, table.warteliste td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--trenner);
  font-size: 0.92rem;
  vertical-align: top;
}
table.warteliste th { color: var(--text-schwach); font-weight: 500; }
.abzeichen { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.78rem; color: #fff; }
.abzeichen--warte { background: var(--warte); }
.abzeichen--gut { background: var(--gut); }
.abzeichen--gesperrt { background: var(--fehler); }

@media (max-width: 30rem) {
  .kopf { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}