/* Der Videoraum - Umsetzung des Entwurfs "adKick Videoraum" von Claude Design.
   Alle Farben, Abstaende, Groessen kommen aus den Gestaltungsmarken (ds.css); hier steht nur,
   wie die Seite daraus zusammengesetzt ist. Kein einziger fester Farbwert.

   Radius ist ueberall 0 - das ist die Signaturform des Systems, keine Nachlaessigkeit. */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* client = Kundendichte, touch=auto hebt Bedienelemente auf Daumengroesse, sobald ein
     Zeigegeraet grob ist. Genau der Fall, um den es hier geht: Kunde am Telefon. */
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}
html { }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--surface-sunken);
  display: flex;
  justify-content: center;
}

/* ---- Die Seite ------------------------------------------------------------------------- */
.ak-seite {
  width: min(100%, 1180px);
  min-height: 100dvh;
  background: var(--surface-page);
  border-left: var(--border-width) solid var(--border-strong);
  border-right: var(--border-width) solid var(--border-strong);
  padding: var(--page-pad-y, var(--space-5)) var(--page-pad-x, var(--space-5));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.ak-seite-mitte { justify-content: center; }
.ak-seite-text { max-width: 900px; }

.ak-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: var(--rule-width, 1px) solid var(--border-subtle);
}

h1 {
  font-size: var(--text-size-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  margin: var(--space-4) 0 0;
  color: var(--text-primary);
}
h2 {
  font-size: var(--text-size-lg);
  font-weight: var(--weight-semibold);
  margin: var(--space-5) 0 var(--space-2);
}
.ak-fliess {
  font-size: var(--text-size-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--prose-max, 62ch);
  margin: var(--space-2) 0 0;
}
.ak-klein { font-size: var(--text-size-xs); color: var(--text-tertiary); }
.ak-eyebrow {
  font-size: var(--text-size-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}
.ak-fehlt {
  font-size: var(--text-size-md);
  color: var(--text-crit);
  margin: var(--space-2) 0 0;
}

/* ---- Die Wortmarke und die Kachel ------------------------------------------------------ */
/* Eins zu eins aus components/core/Wordmark.jsx des Design-Systems uebernommen, nicht
   nachempfunden. Die Werte sind dort ausdruecklich als gewaehlt gekennzeichnet und duerfen je
   Flaeche NICHT neu gesetzt werden:
       Winkel 8,25 Grad, Schnitt bei 58 Prozent, Gewicht 700, Laufweite -0.045em
   Als clip-path in Prozent, damit der Schnitt in jeder Groesse identisch bleibt.

   Ein erster Versuch mit einem Farbverlauf sah aehnlich aus und war doch falsch: Die Diagonale
   lief spiegelverkehrt. Sie steigt nach RECHTS an - links liegt der Schnitt bei 80,7 Prozent,
   rechts bei 35,3. */
:root {
  --ak-schnitt-oben:  polygon(0 -30%, 100% -30%, 100% 35.3%, 0 80.7%);
  --ak-schnitt-unten: polygon(0 80.7%, 100% 35.3%, 100% 130%, 0 130%);
}

.ak-wortmarke {
  position: relative;
  display: inline-block;
  font-size: var(--wm, 20px);
  line-height: 1;
  user-select: none;
}
.ak-wortmarke > span {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.ak-wm-unten {
  position: absolute;
  inset: 0;
  color: var(--brand-500);
  clip-path: var(--ak-schnitt-unten);
}
.ak-wm-oben {
  position: relative;
  color: var(--text-primary);
  clip-path: var(--ak-schnitt-oben);
}

/* Die Kachel: derselbe Schnitt auf einem einzelnen K. Sie steht dort, wo die Wortmarke zu
   klein wuerde - im Entwurf ist das die Oberkante des laufenden Gespraechs. */
.ak-kachel {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--kg, 32px);
  height: var(--kg, 32px);
  overflow: hidden;
  background: var(--n-950);
  user-select: none;
  flex: 0 0 auto;
}
.ak-kachel > span {
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(var(--kg, 32px) * 0.56);
  letter-spacing: -0.05em;
  line-height: 1;
}
.ak-k-unten {
  position: absolute;
  inset: 0;
  color: var(--brand-500);
  clip-path: var(--ak-schnitt-unten);
}
.ak-k-oben {
  position: relative;
  color: var(--n-0);
  clip-path: var(--ak-schnitt-oben);
}

/* ---- Form, Knoepfe --------------------------------------------------------------------- */
.ak-form { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.ak-wege { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); max-width: 420px; }
.ak-weg { display: flex; flex-direction: column; gap: var(--space-2); }

.ak-input {
  width: 100%;
  height: var(--control-height-lg);
  padding: 0 var(--control-pad-x);
  font: inherit;
  font-size: var(--text-size-body);
  color: var(--text-primary);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
  border-radius: 0;
}
.ak-input:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 1px; }

.ak-antwort { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ak-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-lg);
  padding: 0 var(--control-pad-x);
  font: inherit;
  font-size: var(--text-size-body);
  font-weight: var(--weight-medium);
  border-radius: 0;
  border: var(--border-width) solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-width: 160px;
}
.ak-knopf-primaer { background: var(--surface-brand); color: var(--n-0); }
.ak-knopf-zweit {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ak-knopf-breit { max-width: 320px; }
.ak-knopf:focus-visible { outline: 2px solid var(--border-brand); outline-offset: 2px; }

/* ---- Fusszeile: der Rechtsabschluss ----------------------------------------------------- */
/* Steht auf jeder Seite, die nach aussen zeigt. Der kurze Einwilligungstext ist nur zulaessig,
   weil der lange von hier aus erreichbar ist. */
.ak-fuss {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: var(--rule-width, 1px) solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-size-xs);
  color: var(--text-tertiary);
}
.ak-fuss nav { display: flex; gap: var(--space-4); }
.ak-fuss a, .ak-zurueck { color: var(--text-brand); text-decoration: none; }
.ak-fuss a:hover, .ak-zurueck:hover { text-decoration: underline; }
.ak-zurueck { font-size: var(--text-size-md); }

.ak-text p { font-size: var(--text-size-body); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: var(--prose-max, 62ch); }

/* ---- Das Gespraech --------------------------------------------------------------------- */
/* Die Flaeche gehoert dem Videobild. Kein Hinweis, kein Kasten, keine Spalte. */
body.ak-voll { display: block; }
.ak-gespraech {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--jitsi-ground, var(--n-950));
}
.ak-oberkante {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--jitsi-ink, var(--n-25));
  flex: 0 0 auto;
}
.ak-recht { margin-left: auto; display: flex; gap: var(--space-4); }
.ak-recht a {
  color: var(--jitsi-ink, var(--n-25));
  opacity: 0.68;
  text-decoration: none;
  font-size: var(--text-size-xs);
  min-height: var(--control-height-sm);
  display: inline-flex;
  align-items: center;
}
.ak-band {
  font-size: var(--text-size-xs);
  padding: 2px var(--space-2);
  background: var(--band-warn);
  color: var(--band-fg);
}
.ak-video { flex: 1 1 auto; min-height: 0; }
.ak-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Die Spalte (Akquise TP16): rechts neben dem Bild, Breite meldet die App (spalte.js).
   Ohne Spalte fuellt das Bild die Buehne wie bisher. Unter 720 px kommt sie von unten, hoechstens
   70 % der Hoehe (Entwurf Videoraum v2; gleicher Wert wie SCHMAL_PX in der App). */
.ak-buehne { position: relative; flex: 1 1 auto; min-height: 0; }
.ak-buehne .ak-video { position: absolute; inset: 0; }
.ak-spalte {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: var(--spalte-breite, 400px);
  /* Pflicht: ein absolut gesetztes iframe streckt top/bottom NICHT (ersetztes Element), es bliebe 150 px hoch -
     so geschehen im Testcall 15.10.2026 ("die Leiste ist winzig"), in Chromium nachgemessen: 150 statt 663 px. */
  height: 100%;
  border: 0; display: block;
  background: var(--n-25, #fff);
}
.ak-spalte[hidden] { display: none; }
.ak-mit-spalte .ak-buehne .ak-video { right: var(--spalte-breite, 400px); }
@media (max-width: 719px) {
  .ak-spalte { top: auto; left: 0; width: 100%; height: 70%; }
  .ak-mit-spalte .ak-buehne .ak-video { right: 0; }
}

/* Auf schmalen Geraeten sitzt die Seite ohne Rahmen, sonst geht Flaeche verloren. */
@media (max-width: 640px) {
  .ak-seite { border-left: 0; border-right: 0; }
  .ak-knopf { flex: 1 1 auto; min-width: 0; }
}