/* Startseite. Ergaenzt styles.css, ersetzt es nicht: Kopf, Fuss, Knoepfe,
   Formularfelder und die Nachrichtenblase kommen weiter von dort, damit
   Startseite und Unterseiten gleich aussehen.

   Alle Klassen hier sind neu. Die einzige Ueberschneidung waere .hero
   gewesen, deshalb heisst der Kopfbereich hier .startkopf. */

/* ---------------- Der Kopfbereich als ganzes Bild ------------------------ */

.held {
  position: relative;
  width: 100%;
  height: calc(100svh - var(--kopfhoehe, 64px));
  min-height: 420px;
  max-height: 900px;
  overflow: hidden;
  background: #0B0D12 center / cover no-repeat;
  background-image: url("/held-quer.jpg?v=1");
}
.held video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Zwei Schleier. Der gleichmaessige sichert die Lesbarkeit ueberall, der
   weiche Kern legt zusaetzlich Ruhe genau dorthin, wo die Schrift steht,
   und laeuft nach aussen aus, damit Fenster und Berge nicht absaufen. */
.held::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(ellipse 72% 46% at 50% 42%,
      rgba(8,10,16,.50) 0%, rgba(8,10,16,.24) 58%, rgba(8,10,16,0) 100%),
    linear-gradient(rgba(8,10,16,.28), rgba(8,10,16,.28));
}

.heldtext {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(92%, 1100px);
  text-align: center;
  z-index: 2;
}
.heldtext h1 {
  margin: 0;
  /* Etwas kleiner als bei vier Woertern, sonst braucht der Satz auf dem
     Telefon vier Zeilen und schiebt sich unter das Terminal. */
  font-size: clamp(32px, 6.4vw, 78px);
  color: #fff;
  line-height: 1.06;
  letter-spacing: -.03em;
  font-weight: 640;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(8,10,16,.55), 0 1px 3px rgba(8,10,16,.35);
}
/* Das betonte Wort. Kursiv allein wirkt auf dunklem Grund schwach,
   deshalb zusaetzlich eine Spur heller und offener gesetzt. */
.heldtext h1 em {
  font-style: italic;
  font-weight: 640;
  letter-spacing: -.01em;
}

/* Hochkant: eigenes Video, eigenes Standbild. */
@media (max-aspect-ratio: 1/1) {
  .held { background-image: url("/held-hoch.jpg?v=1"); }
}

/* Ohne Bewegung bleibt das Standbild stehen. */
@media (prefers-reduced-motion: reduce) {
  .held video { display: none; }
}

.szenentitel {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 640;
  margin: 0 0 4px;
}

.startkopf { padding: 56px 0 0; }

/* Die Rechnung gehoert unmittelbar unter die Szene, nicht einen ganzen
   Abschnittsabstand entfernt. Sie beantwortet, was man dort gerade
   gesehen hat. */
.dichtdrueber { padding-top: 28px; }
.dichtdrueber .regler { margin-top: 22px; }
.dichtdrueber .regler + .leise { margin-top: 26px; }

/* Der Grenzen-Abschnitt hatte oben gar keinen und unten den vollen
   Abstand. Jetzt beidseitig gleich, und etwas mehr Luft zum Preisblock
   darueber, weil dort ein Themenwechsel stattfindet. */
.grenzen { padding: 112px 0; }
@media (max-width: 700px) { .grenzen { padding: 64px 0; } }

/* Was nach dem Absenden der Abrechnungen erscheint. */
.danach { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 22px; }
.danach h3 { margin-top: 0; }
.startkopf h1 {
  font-size: clamp(38px, 7.4vw, 80px);
  line-height: 1.0;
  letter-spacing: -.035em;
  font-weight: 640;
  margin: 0 0 10px;
  text-wrap: balance;
}
.eng { max-width: 700px; }
.gross { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.45; }
.leise { color: var(--ink-quiet); }
.klein { font-size: 14.5px; line-height: 1.5; color: var(--ink-quiet); }

/* ---------------- Die Szene: Hotelprogramm, Leitung, Terminal ------------- */

.szene {
  position: relative; margin: 26px 0 0;
  border: 1px solid var(--rule); border-radius: 20px;
  background: linear-gradient(178deg, #FFFFFF 0%, #F4F2EC 100%);
  padding: 20px 22px 22px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(20,22,28,.05), 0 22px 48px rgba(20,22,28,.07);
}
.phase { position: relative; height: 24px; margin: 0 0 14px; }
.ph {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 680; letter-spacing: .03em; text-transform: uppercase;
}
.ph::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ph1 { color: var(--error); opacity: 0; }
.ph2 { color: #3E7A34; }

.geraete { display: flex; align-items: center; justify-content: space-between; gap: 14px; perspective: 1100px; }

.pms {
  flex: 1 1 260px; min-width: 0; max-width: 400px; background: #fff;
  border: 1px solid #DAD5C8; border-radius: 11px; overflow: hidden;
  transform: rotateY(9deg) rotateX(2deg); transform-origin: right center;
  box-shadow: 0 12px 26px rgba(20,22,28,.10);
}
.pmskopf {
  display: flex; align-items: center; gap: 5px; background: #EFEDE6;
  border-bottom: 1px solid #DAD5C8; padding: 7px 10px; font-size: 11.5px; color: var(--ink-quiet);
}
.pmskopf i { width: 7px; height: 7px; border-radius: 50%; background: #CFC9B9; flex: 0 0 auto; }
.pmskopf span { margin-left: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmszeile {
  display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px;
  font-size: 13.5px; color: var(--ink-quiet); font-variant-numeric: tabular-nums;
}
.psumme {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 12px 11px; border-top: 1px solid #E7E3D8; font-variant-numeric: tabular-nums;
}
.psumme b { font-size: 13.5px; font-weight: 660; }
.pbetrag { font-size: 21px; font-weight: 700; letter-spacing: -.02em; border-radius: 6px; padding: 1px 5px; margin: -1px -5px; }

.strecke { flex: 1 1 60px; min-width: 36px; height: 3px; position: relative; margin: 0 6px; }
.draht { position: absolute; inset: 0; border-radius: 999px; background: linear-gradient(90deg, #E3B34E, #C79127); }
.draht::after {
  content: ""; position: absolute; inset: -1px; border-radius: 999px;
  background: repeating-linear-gradient(90deg, #D8D3C4 0 5px, transparent 5px 10px); opacity: 0;
}

.terminal { flex: 0 0 auto; transform: rotateY(-11deg) rotateX(3deg); transform-origin: left center; }
.tkoerper {
  width: 168px; border-radius: 16px 16px 13px 13px; padding: 12px 12px 14px;
  background: linear-gradient(160deg, #3A4152 0%, #20252F 55%, #171B23 100%);
  box-shadow: 0 16px 32px rgba(20,22,28,.24), inset 0 1px 0 rgba(255,255,255,.18);
}
.tkontakt { display: block; margin: 0 auto 8px; width: 15px; height: 11px; opacity: .5; }
.tschirm {
  position: relative; background: #0D1017; border-radius: 7px; padding: 9px 10px 11px;
  min-height: 64px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.tlabel { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #7C8698; margin: 0 0 3px; }
.tzahl {
  position: absolute; left: 10px; right: 10px; bottom: 9px; font-size: 25px; font-weight: 700;
  letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1;
}
.getippt { opacity: 0; }
.getippt span { opacity: 0; }
.tcursor { display: inline-block; width: 2px; height: 20px; background: #7FB6E8; vertical-align: -3px; margin-left: 2px; opacity: 0; }
.tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 0 0; opacity: .34; }
.tasten b {
  display: block; text-align: center; font-size: 11.5px; font-weight: 600; color: #B9C2D2;
  background: #2C323E; border-radius: 5px; padding: 5px 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
}
.tschlitz { height: 4px; border-radius: 999px; background: #0D1017; margin: 11px 8px 0; }
.tfuss {
  text-align: center; font-size: 11px; font-weight: 660; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-quiet); margin: 9px 0 0;
}

.reisender {
  position: absolute; z-index: 5; opacity: 0; pointer-events: none;
  font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: #3B2B05;
  background: #E3B34E; border-radius: 8px; padding: 4px 9px; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(227,179,78,.55);
}

.fahnen { position: relative; height: 34px; margin: 16px 0 0; }
.fahne {
  position: absolute; top: 0; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 640; border-radius: 8px; padding: 5px 10px; opacity: 0; white-space: nowrap;
}
.fa { left: 0; }
.fb { left: 0; top: 0; }
@media (min-width: 620px) { .fb { left: auto; right: 0; } }
.f-rot { color: var(--error); background: rgba(166,43,31,.09); border: 1px solid rgba(166,43,31,.28); }
.f-gruen { color: #3E7A34; background: rgba(62,122,52,.10); border: 1px solid rgba(62,122,52,.30); opacity: 1; }

.szenenfuss { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 0; }
.bildunter { font-size: 14px; color: var(--ink-quiet); margin: 0; }
.nochmal {
  font: inherit; font-size: 13px; font-weight: 640; color: var(--ink-quiet);
  background: transparent; border: 1.5px solid var(--rule); border-radius: 999px; padding: 6px 13px; cursor: pointer;
}
.nochmal:hover { border-color: var(--panel); color: var(--panel); }
.nochmal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Choreografie. Der Endzustand ist der Standard; .spielt setzt die Anfaenge. */
@keyframes szEin { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes szAus { to { opacity: 0; } }
@keyframes szTaste {
  0%   { background: #2C323E; color: #B9C2D2; transform: none; }
  35%  { background: #E3B34E; color: #2A1E02; transform: translateY(2px); }
  100% { background: #2C323E; color: #B9C2D2; transform: none; }
}
@keyframes szDimmen { from { opacity: 1; } to { opacity: .34; } }
@keyframes szBlinken { 0%,45% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes szDrahtAn { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes szDrahtWeg { from { opacity: 1; } to { opacity: 0; } }
@keyframes szReise {
  0%   { transform: none; opacity: 0; }
  12%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translate(var(--dx, 220px), var(--dy, 0px)) scale(.86); opacity: 0; }
}
@keyframes szRing {
  0%   { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(62,122,52,.6); }
  100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 16px rgba(62,122,52,0); }
}
@keyframes szMarkieren { from { background: transparent; } to { background: rgba(227,179,78,.32); } }

.spielt .ph1 { animation: szEin .4s .2s both, szAus .4s 5.3s both; }
.spielt .ph2 { animation: szEin .45s 5.5s both; }
.spielt .getippt { animation: szEin .01s 1s both, szAus .35s 5.3s both; }
.spielt .getippt .z1 { animation: szEin .16s 1.00s both; }
.spielt .getippt .z2 { animation: szEin .16s 1.40s both; }
.spielt .getippt .z3 { animation: szEin .16s 1.80s both; }
.spielt .getippt .zk { animation: szEin .16s 2.05s both; }
.spielt .getippt .z4 { animation: szEin .16s 2.20s both; }
.spielt .getippt .z5 { animation: szEin .16s 2.60s both; }
.spielt .tcursor { animation: szBlinken .7s .9s 3 both, szAus .01s 3s both; }
.spielt .geliefert { animation: szEin .3s 7.05s both; }
.spielt .tasten { animation: szDimmen .6s 5.4s both; }
.spielt .tasten [data-t="1"] { animation: szTaste .34s 1.00s both; }
.spielt .tasten [data-t="5"] { animation: szTaste .34s 1.40s both, szTaste .34s 2.60s both; }
.spielt .tasten [data-t="9"] { animation: szTaste .34s 1.80s both, szTaste .34s 2.20s both; }
.spielt .tschirm { animation: szRing .8s 7.10s both; }
.spielt .draht { animation: szDrahtAn .9s 5.60s both; }
.spielt .draht::after { animation: szDrahtWeg .5s 5.60s both; }
.spielt .reisender { animation: szReise 1.15s 5.95s both; }
.spielt .pbetrag { animation: szMarkieren .45s 5.80s both; }
.spielt .fa.f-rot { animation: szEin .35s 3.10s both, szAus .35s 5.20s both; }
.spielt .fb.f-rot { animation: szEin .35s 3.90s both, szAus .35s 5.20s both; }
.spielt .fa.f-gruen { animation: szEin .35s 7.55s both; }
.spielt .fb.f-gruen { animation: szEin .35s 8.15s both; }

/* ---------------- Schieberegler fuer die Hausgroesse ---------------------- */

.regler { margin: 44px 0 0; }
.rkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 0 0 10px; }
.rtitel { font-size: 13px; font-weight: 660; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-quiet); margin: 0; }
.rwert { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; letter-spacing: -.025em; line-height: 1; font-variant-numeric: tabular-nums; margin: 0; }
.rwert small { font-size: .5em; font-weight: 600; color: var(--ink-quiet); letter-spacing: 0; margin-left: 5px; }
input[type=range].zimmer {
  -webkit-appearance: none; appearance: none; width: 100%; background: transparent;
  margin: 0; padding: 14px 0; cursor: pointer; display: block;
}
input[type=range].zimmer:focus { outline: none; }
input[type=range].zimmer:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0,102,179,.35); }
input[type=range].zimmer::-webkit-slider-runnable-track { height: 7px; border-radius: 999px; background: var(--rule); }
input[type=range].zimmer::-moz-range-track { height: 7px; border-radius: 999px; background: var(--rule); }
input[type=range].zimmer::-moz-range-progress { height: 7px; border-radius: 999px; background: var(--panel); }
input[type=range].zimmer::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel); border: 3px solid #fff; margin-top: -10px; box-shadow: 0 2px 8px rgba(20,22,28,.28);
}
input[type=range].zimmer::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: var(--panel);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(20,22,28,.28);
}
.rskala { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-quiet); font-variant-numeric: tabular-nums; margin: -4px 0 0; }

/* ---------------- Die drei Posten ---------------------------------------- */

.rechnung { margin: 30px 0 0; }
.posten { margin: 0 0 20px; }
.postenkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.postenname { font-weight: 600; }
.postenwert { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 19px; white-space: nowrap; }
.balken { height: 12px; border-radius: 999px; background: var(--rule); overflow: hidden; margin: 6px 0 2px; }
.balkenfuell { height: 100%; border-radius: 999px; width: 0; transition: width .55s cubic-bezier(.22,.61,.36,1); }
.b1 .balkenfuell { background: var(--panel); }
.b2 .balkenfuell { background: #8A5A06; }
.b3 .balkenfuell { background: var(--accent); }
.summe {
  margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.summe .postenwert { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.02em; }

/* ---------------- Preisfeld im dunklen Block ----------------------------- */

.satzgross {
  font-size: clamp(28px, 4.2vw, 46px); line-height: 1.13; letter-spacing: -.025em;
  font-weight: 640; margin: 0 0 22px; text-wrap: balance;
}
.gold { color: var(--panelgold); }

/* Die Erklaerung unter dem grossen Satz. Leiser, aber lesbar: sie traegt
   die einzige Preisaussage, die ein Wirt selbst nachrechnen kann. */
.satzklein {
  font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62;
  margin: -6px 0 0; max-width: 62ch; color: rgba(255,255,255,.82);
}
.satzklein strong { color: #fff; font-weight: 620; }
.satzklein a { color: var(--panelgold); }

.preisfeld {
  margin: 24px 0 0; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px; padding: 18px 18px 12px;
}
.pfkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.pftitel { font-size: clamp(18px, 2.1vw, 23px); font-weight: 660; letter-spacing: -.015em; margin: 0; }
.pfnote { font-size: 12.5px; color: #8A93A6; margin: 0; white-space: nowrap; }
.pfkoerper { display: flex; gap: 22px; align-items: center; }
.pfgrafik { flex: 1 1 auto; min-width: 0; }
.pfgrafik svg { width: 100%; height: auto; display: block; touch-action: none; cursor: ew-resize; }
.pfgrafik svg:focus-visible { outline: 2px solid var(--panelgold); outline-offset: 4px; border-radius: 8px; }
.mlab { font-size: 11px; fill: #8A93A6; }
.mlab.an { fill: var(--panelgold); font-weight: 680; }
.flab { font-size: 11px; fill: #8FCF83; font-weight: 650; }
.blab { font-size: 10px; fill: #6E7789; letter-spacing: .08em; }
.ablesung { flex: 0 0 170px; border-left: 1px solid rgba(255,255,255,.14); padding-left: 20px; }
.amonat { font-size: 12px; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: #A9B2C4; margin: 0 0 3px; }
.asatz {
  font-size: clamp(36px, 4.8vw, 48px); font-weight: 700; letter-spacing: -.035em; line-height: 1;
  margin: 0 0 12px; font-variant-numeric: tabular-nums; color: #7FB6E8;
}
.aauf { font-size: 13px; color: #8A93A6; margin: 0; line-height: 1.35; }
.aauf b { display: block; font-size: 20px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; margin-top: 2px; }
.aauf.null b { color: #8FCF83; }

/* Der Hauptknopf im dunklen Block wird gold, sonst verschwindet er. */
section.panel .btn-primary { background: var(--panelgold); color: #2A1E02; }
section.panel .btn-primary:hover { background: #EFC468; color: #2A1E02; }

/* ---------------- Die drei Monate: eine Bedingung, kein Fliesstext ------- */

.dreimonate {
  margin: 30px 0 0; border-left: 4px solid var(--panelgold);
  background: var(--page); border-radius: 0 12px 12px 0;
  padding: 20px 22px 6px;
}
section.band .dreimonate { background: #fff; }
.dreimonate h3 { margin: 0 0 12px; font-size: 20px; }
.dreimonate p { margin: 0 0 14px; }
.monatsreihe { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; list-style: none; padding: 0; }
.monatsreihe li {
  flex: 1 1 180px; border: 1px solid var(--rule); border-radius: 10px;
  padding: 12px 14px; background: var(--band);
}
.monatsreihe b { display: block; font-size: 15px; margin: 0 0 2px; }
.monatsreihe span { font-size: 14.5px; line-height: 1.45; color: var(--ink-quiet); }
.monatsreihe .stark b { color: var(--golddunkel); }
.monatsreihe .schwach b { color: #3E7A34; }

/* ---------------- Aufzaehlungen mit Trennlinie --------------------------- */

.grund { border-top: 1px solid var(--rule); padding: 22px 0 0; margin: 0 0 22px; }
/* Der letzte Punkt bringt sonst 22 Pixel mit, und der Abschnitt sieht
   unten weiter aus als oben, obwohl das Padding gleich ist. */
.grund:last-child { margin-bottom: 0; }
.grund h3 { margin: 0 0 4px; font-size: 20px; }
.grund p { margin: 0; color: var(--ink-quiet); }

/* ---------------- Schmale Geraete ---------------------------------------- */

@media (max-width: 760px) {
  .geraete { flex-direction: column; align-items: stretch; gap: 0; perspective: none; }
  .pms { transform: none; max-width: 100%; width: 100%; flex: 0 0 auto; order: 1; }
  .strecke { order: 2; flex: 0 0 auto; width: 3px; min-width: 0; height: 44px; margin: 0 auto; }
  .draht { background: linear-gradient(180deg, #E3B34E, #C79127); }
  .draht::after { background: repeating-linear-gradient(180deg, #D8D3C4 0 5px, transparent 5px 10px); }
  .terminal { transform: none; order: 3; align-self: center; }
  .fahnen { height: 78px; }
  .fb { top: 40px; }

  .pfkoerper { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .ablesung {
    flex: 0 0 auto; border-left: 0; border-bottom: 1px solid rgba(255,255,255,.14);
    padding: 0 0 14px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  }
  .amonat { margin: 0; align-self: center; }
  .asatz { margin: 0; }
  .aauf { margin-left: auto; text-align: right; }
  .aauf b { display: inline; font-size: 15px; margin-left: 6px; }
  .mlab { font-size: 18px; } .flab { font-size: 17px; } .blab { font-size: 15px; }
  #satzlinie { stroke-width: 4.5; }
  #schieberlinie { stroke-width: 2.5; }
  #punkt { r: 7; } #punktaussen { r: 13; }
}

@media (prefers-reduced-motion: reduce) {
  .szene *, .szene { animation: none !important; transition: none !important; }
  .balkenfuell { transition: none !important; }
  .getippt, .tcursor, .reisender, .ph1, .f-rot { opacity: 0 !important; }
  .ph2, .f-gruen, .geliefert { opacity: 1 !important; }
}