/* Videoberatung maxVers - Gastseite. Farben und Schriften wie maxvers.de
   (dunkel, Markenblau, Bernstein nur fuer die eine Handlung). Gebaut fuer
   Menschen, die selten Videokonferenzen machen: grosse Schrift, grosse
   Schaltflaechen mit Wort statt nur Symbol, ein Schritt auf einmal. */

@font-face { font-family: 'Source Sans 3'; font-weight: 400 700; font-display: swap;
  src: url(schriften/source-sans-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212; }
@font-face { font-family: 'Source Sans 3'; font-weight: 400 700; font-display: swap;
  src: url(schriften/source-sans-3-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Spectral'; font-weight: 300; font-display: swap; src: url(schriften/spectral-300-latin.woff2) format('woff2'); }
@font-face { font-family: 'Spectral'; font-weight: 600; font-display: swap; src: url(schriften/spectral-600-latin.woff2) format('woff2'); }

:root {
  color-scheme: dark;
  --grund: #0C121C;
  --flaeche: #131B28;
  --flaeche-hoch: #1A2433;
  --rand: #243043;
  --rand-deutlich: #5A6B85;
  --tinte: #E9EDF4;
  --tinte-leise: #A3B1C5;
  --tinte-klar: #FFFFFF;
  --blau: #6E9BD2;
  --handlung: #E0A458;
  --handlung-tief: #C68C42;
  --handlung-tinte: #14100A;
  /* Weiss auf diesem Rot: 4,9:1 */
  --rot: #C93A3F;
  --rot-tief: #A92F34;
  --gut: #6CC596;
  --schrift: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --anzeige: 'Spectral', Georgia, serif;
  --rund: 14px;
  --links: env(safe-area-inset-left, 0px);
  --rechts: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); font-size: 18px; line-height: 1.55;
  display: flex; flex-direction: column; min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
a { color: var(--blau); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--handlung); outline-offset: 3px; border-radius: 6px; }
#inhalt:focus, h1:focus, h2:focus { outline: none; }
.springmarke { position: absolute; left: 12px; top: -60px; background: var(--handlung); color: var(--handlung-tinte); padding: 8px 14px; border-radius: 8px; z-index: 30; }
.springmarke:focus { top: 12px; }

/* Kopf */
.kopf {
  display: flex; align-items: center; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) max(18px, var(--rechts)) 12px max(18px, var(--links));
  border-bottom: 1px solid var(--rand);
}
.wortmarke { display: inline-flex; align-items: center; gap: 8px; }
.wort { font-family: var(--anzeige); font-size: 22px; color: var(--tinte-klar); letter-spacing: -.015em; line-height: 1; }
.leicht { font-weight: 300; } .kraeftig { font-weight: 600; }
.kopf-titel { color: var(--tinte-leise); font-size: 16px; padding-left: 14px; border-left: 1px solid var(--rand); }
.kopf-tel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  color: var(--tinte); text-decoration: none; font-weight: 600; font-size: 16px;
  border: 1px solid var(--rand-deutlich); border-radius: 999px; padding: 8px 14px; min-height: 44px;
}

main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px max(16px, var(--rechts)) 20px max(16px, var(--links)); outline: none; }

/* Karten fuer die Schritte vor dem Gespraech */
.karte {
  width: 100%; max-width: 30rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 18px; padding: 26px 22px;
  display: grid; gap: 14px; text-align: left;
}
.karte--breit { max-width: 38rem; }
.karte h1, .karte h2 { font-family: var(--anzeige); font-weight: 600; font-size: 28px; line-height: 1.2; margin: 0; color: var(--tinte-klar); text-wrap: balance; }
.karte h2 { font-size: 24px; }
.karte p { margin: 0; }
.marke { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blau); }
.termin { font-size: 19px; color: var(--tinte); }
.leise { color: var(--tinte-leise); }
.klein { font-size: 15px; }
.hinweis-box { background: var(--flaeche-hoch); border: 1px solid var(--rand); border-radius: 12px; padding: 12px 14px; font-size: 16px; display: grid; gap: 10px; }
.datenschutz { border-top: 1px solid var(--rand); padding-top: 12px; }

/* Vorschau mit Pegel */
.vorschau { display: grid; gap: 8px; }
.vorschau-bild {
  position: relative; aspect-ratio: 4 / 3; background: #05080D; border-radius: var(--rund); overflow: hidden;
  border: 1px solid var(--rand);
  max-height: 42dvh; /* der Knopf darunter muss ohne Scrollen sichtbar bleiben */
}
.vorschau-bild video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.vorschau-bild.hinten video { transform: none; }
.vorschau-leer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinte-leise); text-align: center; padding: 16px; }
.start { justify-items: start; }
.pegel { height: 8px; background: var(--flaeche-hoch); border-radius: 99px; overflow: hidden; }
.pegel span { display: block; height: 100%; width: 0%; background: var(--gut); border-radius: 99px; transition: width 80ms linear; }

.schalter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.geraete summary { cursor: pointer; color: var(--blau); font-size: 16px; padding: 10px 0; min-height: 44px; }
.geraete label { display: grid; gap: 4px; font-size: 15px; color: var(--tinte-leise); margin-top: 10px; }
.geraete select {
  font: inherit; font-size: 16px; color: var(--tinte); background: var(--flaeche-hoch);
  border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; min-height: 48px;
}

/* Knoepfe */
.knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf {
  font: inherit; font-weight: 600; font-size: 17px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--rand-deutlich);
  background: var(--flaeche-hoch); color: var(--tinte); text-decoration: none; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.knopf:hover { border-color: var(--tinte-leise); }
.knopf--tat { background: var(--handlung); color: var(--handlung-tinte); border-color: transparent; }
.knopf--tat:hover { background: var(--handlung-tief); }
.knopf--gross { width: 100%; min-height: 60px; font-size: 19px; }
.knopf--ruhig { background: transparent; }
.knopf[disabled] { cursor: default; background: var(--flaeche-hoch); color: var(--tinte); border-color: var(--rand-deutlich); }
.knopf--schalter[aria-pressed="false"], .knopf--leiste[aria-pressed="false"]:not(#raum-teilen) { background: #3A1518; border-color: #7A2D33; color: #FFD9DA; }
.knopf--auflegen-ja { background: var(--rot); border-color: transparent; color: #fff; }

/* Symbole als Maske - folgen der Schriftfarbe */
.symbol { width: 22px; height: 22px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--bild) center / contain no-repeat; mask: var(--bild) center / contain no-repeat; }
[data-symbol="mikro"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
[aria-pressed="false"] > [data-symbol="mikro"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M3 3l18 18'/%3E%3C/svg%3E"); }
[data-symbol="kamera"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3z'/%3E%3C/svg%3E"); }
[aria-pressed="false"] > [data-symbol="kamera"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3Cpath d='M16 10l6-3v10l-6-3zM2 2l20 20'/%3E%3C/svg%3E"); }
[data-symbol="wechseln"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h12l-3-3M20 17H8l3 3'/%3E%3C/svg%3E"); }
[data-symbol="teilen"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 14V8M9 11l3-3 3 3'/%3E%3C/svg%3E"); }
[data-symbol="auflegen"] { --bild: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 9c-3.9 0-7.4 1.3-9.6 3.4-.5.5-.5 1.2 0 1.7l2 2c.4.4 1.1.5 1.6.1l2.4-1.8c.4-.3.6-.7.6-1.2v-2.1c1-.3 2-.4 3-.4s2 .1 3 .4v2.1c0 .5.2.9.6 1.2l2.4 1.8c.5.4 1.2.3 1.6-.1l2-2c.5-.5.5-1.2 0-1.7C19.4 10.3 15.9 9 12 9z'/%3E%3C/svg%3E"); }

/* Wartezimmer */
.warten-punkt { width: 56px; height: 56px; border-radius: 50%; border: 4px solid var(--flaeche-hoch); border-top-color: var(--blau); }
@media (prefers-reduced-motion: no-preference) { .warten-punkt { animation: drehen 1.1s linear infinite; } }
@keyframes drehen { to { transform: rotate(360deg); } }

/* Im Gespraech: genau eine Bildschirmhoehe, nichts scrollt */
body.im-raum { height: 100dvh; min-height: 0; overflow: hidden; }
body.im-raum main { padding: 0; justify-content: stretch; align-items: stretch; min-height: 0; }
body.im-raum .fuss { display: none; }
.raum { position: relative; flex: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #05080D; min-height: 0; }
.buehne-rahmen { position: relative; min-height: 0; }
.buehne {
  position: absolute; inset: 0; display: grid; gap: 6px;
  padding: 6px max(6px, var(--rechts)) 6px max(6px, var(--links));
  grid-template-columns: repeat(var(--spalten, 1), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr);
}
.buehne.mit-schirm { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); grid-auto-rows: 0; }
/* Nur direkte Kinder: Die Kamera des Gegenuebers in .gegenueber bleibt sichtbar */
.buehne.mit-schirm > .kachel:not(.kachel--bildschirm) { display: none; }
.kachel { position: relative; background: #0A0F17; border-radius: 12px; overflow: hidden; min-height: 0; display: grid; place-items: center; }
.kachel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.kachel-name {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  background: rgba(5, 8, 13, .78); color: var(--tinte-klar); font-size: 15px; font-weight: 600;
  padding: 4px 10px; border-radius: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kachel-ohne { display: grid; place-items: center; gap: 10px; color: var(--tinte-leise); text-align: center; padding: 20px; }
.kachel-ohne .kreis { width: 96px; height: 96px; border-radius: 50%; background: var(--flaeche-hoch); display: grid; place-items: center; font-family: var(--anzeige); font-size: 40px; color: var(--tinte-klar); }
.kachel.spricht { box-shadow: inset 0 0 0 3px var(--gut); }
.leer-buehne { color: var(--tinte-leise); text-align: center; padding: 24px; align-self: center; justify-self: center; font-size: 19px; }
/* Bei geteiltem Bildschirm: Kamera des Gegenuebers klein darueber */
.gegenueber {
  position: absolute; left: max(12px, var(--links)); top: 12px; width: min(28vw, 180px); aspect-ratio: 4 / 3;
  border-radius: 10px; overflow: hidden; z-index: 4; border: 2px solid var(--rand);
}
.gegenueber .kachel { position: absolute; inset: 0; border-radius: 0; }
.selbst {
  position: absolute; right: max(12px, var(--rechts)); bottom: 12px; width: min(28vw, 190px); aspect-ratio: 3 / 4;
  border-radius: 12px; overflow: hidden; background: #0A0F17; border: 2px solid var(--rand); z-index: 5;
}
.selbst .kachel { position: absolute; inset: 0; border-radius: 0; }
.selbst video { transform: scaleX(-1); object-fit: cover; }
.selbst.hinten video { transform: none; }
.selbst .kachel-ohne { height: 100%; font-size: 14px; padding: 8px; }
.selbst .kachel-ohne .kreis { width: 48px; height: 48px; font-size: 22px; }
@media (min-width: 900px) { .selbst { aspect-ratio: 4 / 3; width: 220px; } }
.raum-meldung {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6;
  background: rgba(19, 27, 40, .96); border: 1px solid var(--rand); border-radius: 18px;
  padding: 8px 16px; font-size: 16px; width: max-content; max-width: calc(100% - 24px); text-align: center;
}
.raum-meldung a { color: var(--handlung); }
.ton-an { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; }
.leiste {
  display: flex; justify-content: center; gap: 8px; flex-wrap: nowrap;
  padding: 10px max(10px, var(--rechts)) max(12px, env(safe-area-inset-bottom)) max(10px, var(--links));
  background: var(--flaeche); border-top: 1px solid var(--rand);
}
.knopf--leiste { flex: 1 1 0; min-width: 0; max-width: 112px; flex-direction: column; gap: 4px; min-height: 64px; padding: 8px 6px; border-radius: 14px; font-size: 15px; }
.knopf--leiste .symbol { width: 24px; height: 24px; }
.knopf--leiste .beschriftung { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.knopf--auflegen { background: var(--rot); border-color: transparent; color: #fff; }
.knopf--auflegen:hover { background: var(--rot-tief); }

.dialog { position: absolute; inset: 0; z-index: 20; background: rgba(5, 8, 13, .72); display: grid; place-items: center; padding: 16px; }

/* Querformat auf dem Handy: Kopf weg, Leiste rechts senkrecht */
@media (orientation: landscape) and (max-height: 500px) {
  body.im-raum .kopf { display: none; }
  .raum { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); }
  .leiste { flex-direction: column; border-top: 0; border-left: 1px solid var(--rand); padding: 6px max(8px, var(--rechts)) 6px 8px; justify-content: center; }
  .knopf--leiste { flex: 0 1 auto; min-height: 52px; min-width: 76px; max-width: none; padding: 4px 8px; }
  .selbst { aspect-ratio: 4 / 3; width: min(22vw, 170px); }
}

/* Fuss */
.fuss {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px;
  padding: 8px max(18px, var(--rechts)) max(10px, env(safe-area-inset-bottom)) max(18px, var(--links));
  border-top: 1px solid var(--rand);
  color: var(--tinte-leise); font-size: 15px; align-items: center;
}
.fuss a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
.fuss-links { display: flex; gap: 16px; }

@media (max-width: 520px) {
  .kopf-titel { display: none; }
  .karte { padding: 20px 16px; }
  .karte h1 { font-size: 25px; }
  .vorschau-bild { aspect-ratio: auto; height: min(32dvh, 240px); }
  .knopf--leiste { font-size: 14px; }
  .schalter .knopf { padding-inline: 12px; gap: 8px; }
}
@media (max-width: 380px) {
  .schalter { gap: 8px; }
  .schalter .knopf { font-size: 15px; padding-inline: 10px; gap: 6px; }
}