/* PFG-Speech, gemeinsames Design fuer die Leseseite und die Buehne.
   Die Werte kommen von pf-group.org (01.10.2026): das Gold der Kopfzeile, das
   Zeichen "PFG" in Times New Roman im duennen Ring, schwarze Schrift auf Weiss.
   Die Hausschriften Miller und DIN sind gekauft und liegen nur bei der PFG.
   Hier stehen sie vorn im Stapel, dahinter das, was jeder Mac mitbringt. */

:root {
  --gold: #AD976E;
  --gold-dunkel: #9D8964;
  --hintergrund: #FFFFFF;
  --flaeche: #EEEEED;
  --text: #000000;
  /* Text, der schon eine Weile steht. Bleibt gut lesbar, 8:1 auf Weiss */
  --aelter: #4E4E4E;
  --gedaempft: #6C757D;
  --warnung: #DC3545;

  --serif: Miller, "Times New Roman", Times, Georgia, serif;
  --sans: DIN, "DIN Alternate", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --redegroesse: 44px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  letter-spacing: .52px;
}

button, input, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

/* --- Kopf ------------------------------------------------------------------ */

#kopf {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px max(24px, env(safe-area-inset-right)) 12px max(24px, env(safe-area-inset-left));
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--gold);
  color: #fff;
}

/* Das Zeichen der PFG: drei Buchstaben, darum ein duenner heller Ring */
.zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  font-family: "Times New Roman", Times, serif;
  font-size: 21px;
  letter-spacing: 0;
}

#kopf h1 {
  flex: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
}

#kopf a {
  flex: none;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  background: none;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  line-height: 42px;
  cursor: pointer;
}
#kopf a:hover { background: rgba(255, 255, 255, .16); }

/* --- Leseseite ------------------------------------------------------------- */

.lesen main {
  max-width: 29em;
  margin: 0 auto;
  padding: 40px 32px 34vh;
  font-family: var(--serif);
  font-size: var(--redegroesse);
  line-height: 1.34;
  letter-spacing: 0;
  hyphens: auto;
  -webkit-hyphens: auto;
}

#warten { color: var(--gedaempft); }
#warten p { margin: 0 0 .6em; }

#text p { margin: 0 0 .7em; }

/* Ein Block erscheint schwarz und wird nach einer Weile grau: das Auge findet
   die Stelle, an der es weitergeht, ohne zu suchen */
#text span { animation: einblenden .5s ease-out, aelter 3s 16s forwards; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes aelter { to { color: var(--aelter); } }

/* Zwischen zwei Reden */
#text hr {
  width: 3em;
  margin: 1.2em 0;
  border: 0;
  border-top: 2px solid var(--gold);
}

#stand {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 18px;
  border-radius: 20px;
  background: var(--flaeche);
  color: var(--gedaempft);
  font-size: 16px;
}

#zumEnde {
  position: fixed;
  right: 24px;
  bottom: 20px;
  height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 24px;
  background: var(--gold);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 700px) {
  :root { --redegroesse: 26px; }
  .lesen main { padding: 24px 20px 30vh; }
  #kopf h1 { font-size: 20px; }
}

/* --- Buehne ---------------------------------------------------------------- */

.buehne main {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.karte {
  margin: 0 0 16px;
  padding: 18px;
  border-radius: 10px;
  background: var(--flaeche);
}
.karte h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .5px;
}
.karte p { margin: 8px 0 0; }

.knopfzeile { display: flex; gap: 12px; }
.knopfzeile button {
  flex: 1;
  height: 64px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: #fff;
  font-size: 22px;
  cursor: pointer;
}
.knopfzeile button.primaer { background: var(--gold); color: #fff; }
.knopfzeile button:disabled { opacity: .4; cursor: default; }

#zustand { font-size: 20px; }
#zustand.laeuft { color: #28A745; }
#hinweis { color: var(--warnung); }

#pegelrahmen {
  position: relative;
  height: 22px;
  border-radius: 11px;
  background: #fff;
  overflow: hidden;
}
#pegel { height: 100%; width: 0; background: var(--gold); transition: width .1s linear; }
/* Wo die Pause beginnt: liegt der Balken beim Sprechen deutlich rechts davon, ist der Ton gut */
#schwelle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }

.gedaempft { color: var(--gedaempft); font-size: 16px; }

.karte label { display: block; margin-top: 14px; }
.karte select {
  width: 100%;
  height: 44px;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid #CED4DA;
  border-radius: 8px;
  background: #fff;
  font: inherit;
}

.rede { max-height: 40vh; overflow-y: auto; font-family: var(--serif); font-size: 19px; line-height: 1.4; letter-spacing: 0; }
.rede p { margin: 0 0 .6em; }
.rede .englisch { color: var(--gedaempft); }

textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px;
  border: 1px solid #CED4DA;
  border-radius: 8px;
  background: #fff;
}
.karte > button {
  height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border: 1px solid var(--gold);
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
}