/* Hausdesign: Lagune und Sand. Werte aus dem Vault, Design-Tokens vom 07.08.2026.
   Picturefish Sans ist von Open Sans abgeleitet — die Metrik stimmt, solange die
   eigenen Schnitte noch nicht ausgeliefert werden. */

:root {
  --sand: #F0EEE9;
  --card: #FFFFFF;
  --ink: #2E2F2F;
  --ink2: #5A5B5B;
  --ink3: #8A8B8B;
  --lagune: #2F6D9E;
  --lagune-dark: #285F8A;
  --lagune-soft: #EFF4F8;
  --terra: #B33456;
  --line: #D5D5D8;
  --line-soft: #E4E1DB;
  --radius: 22px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Picturefish Sans', 'Open Sans', system-ui, -apple-system, sans-serif;
  background: var(--sand);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

a { color: var(--lagune); }
a:hover { color: var(--lagune-dark); }

button { font-family: inherit; cursor: pointer; border: 0; }
button:disabled { cursor: default; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 60px; }
.phone .wrap { max-width: 520px; }

header.top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.brand { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.meta { font-size: 13.5px; color: var(--ink2); }

.card { background: var(--card); border-radius: var(--radius); padding: 28px 30px; }
.card + .card { margin-top: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

h1 { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 8px; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 10px; }
p { margin: 0 0 14px; }
p.lead { color: var(--ink2); max-width: 58ch; }

.lbl {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink2);
}

.field { display: block; margin-bottom: 16px; }
.field > .lbl { display: block; margin-bottom: 7px; }
input, textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 15px; font-size: 16px; font-family: inherit; color: var(--ink);
  background: var(--card); min-height: 50px;
}
textarea { resize: vertical; line-height: 1.55; }
input:focus, textarea:focus {
  outline: 2px solid var(--lagune); outline-offset: -1px; border-color: var(--lagune);
}
input.code { font-size: 21px; font-weight: 700; letter-spacing: .14em; text-align: center; }

.btn {
  background: var(--lagune); color: #fff; border-radius: 12px;
  padding: 14px 22px; font-size: 15.5px; font-weight: 600; min-height: 48px;
}
.btn:hover { background: var(--lagune-dark); }
.btn:disabled { background: #C9C6C0; }
.btn.sec { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
.btn.sec:hover { border-color: var(--lagune); color: var(--lagune); background: var(--card); }
.btn.wide { width: 100%; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 20px; }

.code-display {
  font-size: 40px; font-weight: 700; letter-spacing: .14em;
  color: var(--lagune); text-align: center; margin: 6px 0 4px;
}

/* Stufenkarten */
.levels { display: flex; flex-direction: column; gap: 9px; }
.level {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 2px solid var(--line); border-radius: 16px;
  padding: 14px 16px; min-height: 64px; transition: border-color .12s, background .12s;
}
.level:hover { border-color: #9FBBD0; }
.level[aria-pressed="true"] { border-color: var(--lagune); background: var(--lagune-soft); }
.level .n {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  background: var(--sand); color: var(--ink2);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.level[aria-pressed="true"] .n { background: var(--lagune); color: #fff; }
.level .txt { flex: 1 1 auto; }
.level .name { font-size: 15.5px; font-weight: 600; }
.level .short { font-size: 13.5px; color: var(--ink2); }
/* Die Progression: wie viel Entscheidung bei der Führung liegt, wie viel beim
   Team. Bewusst keine Farbskala — keine Stufe ist besser als eine andere. */
/* Zweite Zeile auf der Karte: dieselbe Stufe aus Sicht des Teams. */
.level .short .wer {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink2); opacity: .75; margin-bottom: 1px;
}
.level .short.team { display: block; margin-top: 7px; color: var(--ink2); }

/* Wessen Verantwortung verhandelt wird (CF-DELPOKER-0012). */
.rollenband {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 11px 14px; border-radius: 12px;
  background: #EAF1F7; border: 1px solid #C7DAEA;
}
.rollenband .lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink2);
}
.rollenband .wer { font-size: 15px; font-weight: 700; color: #2F6D9E; }
.rollenband .erklaerung { font-size: 13px; color: var(--ink2); }

.share { display: flex; width: 46px; height: 6px; border-radius: 3px; overflow: hidden; background: #EDEBE6; flex: 0 0 auto; }
.share i { display: block; }
.share .lead { background: var(--ink); }
.share .team { background: #C9C6C0; }

/* Skala */
.scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; min-height: 190px; }
.col { display: flex; flex-direction: column; align-items: center; gap: 8px; justify-content: flex-end; }
.stack { display: flex; flex-direction: column-reverse; gap: 6px; align-items: center; min-height: 110px; }
.bar { width: 100%; border-radius: 4px; background: #DDDAD4; height: 3px; }
.bar.has { background: var(--ink); }
.col .num { font-size: 14px; font-weight: 700; color: #A8A9A9; }
.col .num.has { color: var(--ink); }
.col .cname { font-size: 11px; color: var(--ink3); text-align: center; }
.vote-name { font-size: 11.5px; font-weight: 600; color: var(--ink2); min-height: 15px; }

.people { display: flex; flex-wrap: wrap; gap: 9px; }
.person {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line-soft); border-radius: 13px; padding: 11px 14px;
  font-size: 14.5px; font-weight: 600; background: var(--card);
}
.person .dot { width: 22px; height: 22px; border-radius: 50%; background: #DDDAD4; flex: 0 0 auto; }
.person.ready .dot { background: var(--lagune); }
.person .state { font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.person.ready .state { color: var(--lagune); }

.stats { display: flex; flex-direction: column; gap: 9px; }
.stat { display: flex; justify-content: space-between; align-items: baseline; }
.stat .k { font-size: 14px; color: var(--ink2); }
.stat .v { font-size: 15px; font-weight: 600; }
.hint { font-size: 12.5px; line-height: 1.55; color: var(--ink3); margin: 14px 0 0; padding-top: 13px; border-top: 1px solid #EDEBE6; }

/* Board */
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; padding: 0 0 10px; border-bottom: 1px solid var(--line); }
.board td { padding: 13px 0; border-bottom: 1px solid #EDEBE6; vertical-align: top; }
.board .cell { text-align: center; width: 46px; }
.board .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--line-soft); display: inline-block; }
.board .pip.on { width: 16px; height: 16px; background: var(--lagune); box-shadow: 0 0 0 3px #D6E3EE; }

/* Die Spanne, in der das Team lag — dieselbe Sprache wie auf dem Blatt:
   Terra für das Band, blass dahinter die erste Runde. Die Segmente liegen je
   Zelle, weil ein durchgehendes Element quer über Tabellenzellen nicht geht. */
.board .cell {
  position: relative;
  /* Mittig, sonst liegt das Band unter dem Punkt: Die Zellenhöhe kommt vom
     mehrzeiligen Bereichsnamen, und der steht oben. */
  vertical-align: middle;
}
.board .band {
  position: absolute; left: 0; right: 0; top: 50%; height: 12px;
  transform: translateY(-50%); z-index: 0;
}
.board .band.jetzt { background: #F3DCE3; }
.board .band.frueher { background: #F9EDF1; height: 12px; }
.board .band.start { left: 22%; border-radius: 6px 0 0 6px; }
.board .band.ende { right: 22%; border-radius: 0 6px 6px 0; }
.board .band.solo { left: 22%; right: 22%; border-radius: 6px; }
.board .pip { position: relative; z-index: 1; }
.board .pip.vote {
  width: 15px; height: 15px; background: #7FA8C9; color: #fff; font-size: 9.5px;
  font-weight: 700; line-height: 15px; text-align: center;
}
.board tr.offen .pip.vote { background: #D08FA4; }
.board .pip.on .anzahl {
  position: absolute; top: -6px; right: -8px; width: 15px; height: 15px; border-radius: 50%;
  background: #7FA8C9; border: 1.5px solid #fff; font-size: 9px; font-weight: 700; color: #fff;
  line-height: 12px; text-align: center;
}
.board .title { font-size: 15px; font-weight: 600; }
.board .agree { font-size: 13px; color: var(--ink3); }
.board .open { color: var(--terra); font-weight: 600; font-size: 13px; }

.rounds { display: flex; flex-direction: column; gap: 11px; }
.round-row { display: flex; gap: 5px; }
.round-row span {
  flex: 1 1 0; text-align: center; font-size: 14px; font-weight: 600;
  background: var(--sand); border-radius: 7px; padding: 6px 0;
}
.round-row span.final { background: var(--lagune); color: #fff; }

.topics { display: flex; flex-direction: column; gap: 8px; }
.topic {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  border: 1px solid var(--line-soft); border-radius: 14px; padding: 14px 16px;
  background: var(--card); font-size: 15px;
}
.topic:hover { border-color: var(--lagune); }
.topic[aria-current="true"] { border-color: var(--lagune); background: var(--lagune-soft); }
.topic .pos {
  width: 23px; height: 23px; flex: 0 0 auto; border-radius: 7px; background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--ink2);
}
.topic .st { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--ink3); }

.notice { background: var(--card); border-radius: 16px; padding: 16px 18px; font-size: 14.5px; }
.notice.bad { color: var(--terra); }
.waiting { font-size: 14.5px; color: var(--ink2); text-align: center; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Nur Deckkraft, kein transform: Ein animiertes transform macht den Container
   zum Bezugsrahmen für position:fixed — der Spielknopf rutschte dadurch unter
   den Bildschirmrand. */
.fade { animation: fade .3s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.flip { animation: flip .45s cubic-bezier(.3,.8,.3,1) both; }
@keyframes flip { from { transform: rotateY(78deg); opacity: 0; } to { transform: none; opacity: 1; } }
.center { text-align: center; }
.hidden { display: none !important; }
.grow { flex: 1 1 auto; }

.qr {
  width: 190px; height: 190px; display: block; margin: 0 auto;
  border-radius: 12px; background: #fff;
}
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:hover { color: #fff; }
a.btn.sec:hover { color: var(--lagune); }

/* Anwesenheit ist kein Kennzeichen — deshalb ein neutraler Haken, keine Farbe.
   Farbe und Form gehören zur Stimme und bleiben bis zum Aufdecken geheim. */
.person.here { color: var(--ink3); }
.person.here .tick { flex: 0 0 auto; }
.person.here { color: var(--ink); }
.person.here .tick { color: #A8A9A9; }

/* ---------------------------------------------------------------- Telefon --
   Die Teilnehmeransicht ist die primäre (Entwicklerauftrag §24). Alles hier
   dient dem Ziel, dass eine Runde auf dem Telefon in einem Griff läuft. */

/* Der Code als aufklappbare Zeile, wenn die Runde bereits läuft. */
.codestrip {
  background: var(--card); border-radius: var(--radius);
  padding: 0; margin-bottom: 16px; overflow: hidden;
}
.codestrip summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 22px; cursor: pointer; list-style: none; min-height: 52px;
}
.codestrip summary::-webkit-details-marker { display: none; }
.codestrip summary strong { font-size: 19px; letter-spacing: .1em; color: var(--lagune); }
.codestrip summary .meta { margin-left: auto; color: var(--lagune); font-weight: 600; }
.codestrip[open] summary .meta::after { content: ' schließen'; }
.codestrip[open] summary .meta { font-size: 0; }
.codestrip[open] summary .meta::after { font-size: 13.5px; }
.codestrip > .center { padding-bottom: 20px; }

/* Der Spielknopf bleibt am unteren Rand erreichbar. */
.playbar { position: sticky; bottom: 0; padding: 12px 0 4px; background:
  linear-gradient(to top, var(--sand) 62%, transparent); }
.playbar .btn { min-height: 54px; font-size: 17px; }

/* Auf dem Telefon reicht sticky nicht: Der Knopf wäre erst zu sehen, wenn man
   ohnehin ans Seitenende gescrollt hat. Er steht deshalb fest über allem —
   und die Seite bekommt unten Platz, damit er nichts verdeckt. */
@media (max-width: 560px) {
  .playbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--sand) 68%, rgba(240, 238, 233, 0));
  }
  body:has(.playbar) .wrap { padding-bottom: 104px; }
}

@media (max-width: 560px) {
  .wrap { padding: 16px 14px 40px; }
  h1 { font-size: 23px; }
  h2 { font-size: 18px; }
  .card { padding: 20px 18px; border-radius: 18px; }

  /* Die Stufennamen ragten über ihre 35px breite Spalte und liefen ineinander.
     Auf dem Telefon trägt die Ziffer allein — die Namen stehen auf den Karten. */
  .col .cname { display: none; }
  .scale { gap: 5px; min-height: 168px; }
  .stack { gap: 4px; min-height: 96px; }

  /* Die Matrix wird zur Liste: sieben Spalten plus Titel sind auf 390px
     nicht lesbar, die markierte Stufe stand in einer 14px-Zelle. */
  .board thead, .board .cell { display: none; }
  .board, .board tbody, .board tr, .board td { display: block; width: 100%; }
  .board tr { padding: 14px 0; border-bottom: 1px solid #EDEBE6; }
  .board td { border: 0; padding: 0; }
  .board .title { font-size: 15.5px; }
  .board td:last-child { margin-top: 6px; font-size: 14.5px; }

  .actions .btn, .actions a.btn { flex: 1 1 44%; }
}

@media (max-width: 380px) {
  .level { gap: 10px; padding: 12px 13px; }
  .level .short { font-size: 12.5px; }
  /* Der Balken beantwortet die Perspektivfrage ohne Worte (CF-DELPOKER-0014)
     und bleibt deshalb auch auf schmalen Geräten stehen — nur schmaler. */
  .share { width: 30px; }
}

/* ------------------------------------------------- Zusage und Vorbereitung */

h3 { font-size: 15.5px; font-weight: 700; margin: 22px 0 6px; }

/* Die Zusage zur Wahl — zwei Karten, nicht ein Schalter. Es geht um ein
   Versprechen an die Gruppe, nicht um eine Einstellung. */
.pledges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 620px) { .pledges { grid-template-columns: minmax(0, 1fr); } }
.pledge {
  text-align: left; background: var(--card); border: 2px solid var(--line);
  border-radius: 16px; padding: 15px 17px; display: flex; flex-direction: column; gap: 6px;
}
.pledge:hover:not(:disabled) { border-color: #9FBBD0; }
.pledge[aria-pressed="true"] { border-color: var(--lagune); background: var(--lagune-soft); }
.pledge:disabled { opacity: .6; }
.pledge .t { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pledge .d { font-size: 13.5px; color: var(--ink2); line-height: 1.5; }
.pledge .tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--lagune); border: 1px solid var(--lagune); border-radius: 999px; padding: 2px 8px;
}

/* Das Siegel: die Zusage im Klartext, überall gleich formuliert. */
.seal {
  display: flex; align-items: center; gap: 10px; background: var(--sand);
  border-radius: 14px; padding: 13px 16px; font-size: 14.5px; margin: 14px 0;
  line-height: 1.45;
}
.seal svg { flex: 0 0 auto; color: var(--lagune); }

/* Vorbereitung, aufklappbar — sie soll die Startseite nicht dominieren. */
.prep { margin-top: 20px; border-top: 1px solid #EDEBE6; padding-top: 16px; }
.prep summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  list-style: none; min-height: 30px;
}
.prep summary::-webkit-details-marker { display: none; }
.prep summary .meta { margin-left: auto; font-size: 13px; color: var(--ink3); }
.prep summary::after { content: '+'; font-size: 19px; color: var(--lagune); line-height: 1; }
.prep[open] summary::after { content: '−'; }

/* Vorschau: jede Zeile bekommt ein Urteil. */
.preview { border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; margin-top: 16px; }
.preview .row {
  display: flex; gap: 12px; padding: 10px 15px; font-size: 14.5px;
  align-items: flex-start; border-bottom: 1px solid #EDEBE6;
}
.preview .row:last-child { border-bottom: 0; }
.preview .n {
  width: 20px; flex: 0 0 auto; font-size: 12.5px; font-weight: 700;
  color: var(--ink3); text-align: right; padding-top: 2px;
}
.preview .row.skip { color: var(--ink3); }
.preview .row.bad { background: #FDF6F8; }
.preview .why { font-size: 12.5px; color: var(--terra); }
.preview .row.skip .why { color: var(--ink3); }
.tally {
  display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink2);
  padding: 11px 15px; background: var(--sand); border-radius: 0 0 14px 14px;
}
.tally b { color: var(--ink); }


/* ------------------------------------------------ Abschluss der Runde
   CF-DELPOKER-0015. Der Knopf trägt Terra, weil der Schritt nicht
   nebenbei passieren soll — aber als Umriss, nicht als Fläche: Er ist
   das Ende einer Sitzung, keine Warnung vor einem Fehler. */

.siegel {
  width: 58px; height: 58px; border-radius: 50%;
  background: #E7EFF6; color: #2F6D9E;
  display: grid; place-items: center;
  margin: 0 auto; font-size: 26px; font-weight: 700;
}

.btn.gefahr {
  background: transparent; color: var(--terra);
  border: 1px solid currentColor;
}
.btn.gefahr:hover { background: rgba(179, 52, 86, .06); }
.btn.gefahr[disabled] { opacity: .4; cursor: not-allowed; }

.ende-dialog {
  margin-top: 22px;
  border-color: rgba(179, 52, 86, .3);
  background: rgba(179, 52, 86, .04);
}
.ende-dialog ul.folgen {
  margin: 12px 0 0; padding-left: 20px;
  color: var(--ink2); font-size: 14.5px; line-height: 1.7;
}
.ende-dialog ul.folgen b { color: var(--ink); font-weight: 600; }
.ende-dialog .btn.gefahr { background: var(--terra); color: #fff; border-color: var(--terra); }
.ende-dialog .btn.gefahr:hover { background: #9C2C4A; }

/* --------------------------------------------- Fußzeile vor dem PDF-Druck */
/* Derselbe Bau wie der Dialog zum Beenden, nur in Lagune statt Terra:
   eine Karte im Fluss, die aufklappt, wenn "Als PDF" gedrückt wird. */
.fuss-dialog {
  margin-top: 16px;
  border-color: rgba(47, 109, 158, .3);
  background: rgba(47, 109, 158, .04);
}
.fuss-dialog textarea { min-height: 66px; }
.fuss-dialog .field { margin-bottom: 0; }
.fuss-dialog .field > .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }

.zaehler {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink3); font-variant-numeric: tabular-nums;
}
.zaehler.eng { color: var(--terra); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font: inherit; font-size: 13.5px; min-height: 38px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent;
  color: var(--ink2); cursor: pointer;
}
.chip:hover { border-color: var(--lagune); color: var(--lagune); }
.chip .plus { color: var(--ink3); font-weight: 700; margin-right: 5px; }
.chip:hover .plus { color: var(--lagune); }

.schalter { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; cursor: pointer; }
.schalter input {
  width: 18px; height: 18px; min-height: 0; margin: 2px 0 0;
  flex: 0 0 auto; accent-color: var(--lagune); border-radius: 4px; padding: 0;
}
.schalter span { font-size: 14px; line-height: 1.55; color: var(--ink2); }
.schalter b { color: var(--ink); font-weight: 600; }

/* Das Blatt im Kleinen — nur so viel, dass der Platz im Fuß ablesbar wird. */
.fussvorschau { margin-top: 18px; padding: 13px 13px 11px; border: 1px solid var(--line); border-radius: 14px; }
.fussvorschau .blatt {
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: 12px 14px 10px; margin-top: 9px;
}
.fussvorschau .striche { display: block; }
.fussvorschau .striche span {
  display: block; height: 5px; border-radius: 3px; background: #EDEBE6; margin-bottom: 6px;
}
.fussvorschau .striche .mittel { width: 74%; }
.fussvorschau .striche .kurz { width: 52%; }
.fussvorschau .blattfuss {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 6px;
}
.fussvorschau .eigen { font-size: 9.5px; line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.fussvorschau .eigen.leer { color: #C9C6C0; font-style: italic; }
.fussvorschau .quelle { font-size: 9px; color: var(--ink3); white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 560px) {
  .fussvorschau .blattfuss { flex-direction: column; align-items: flex-start; gap: 5px; }
  .fussvorschau .quelle { white-space: normal; }
}

.divider { height: 1px; background: var(--line); }