/* HVNH PR-Hub — Gestaltung
   ========================
   Geschrieben fuer jemanden, der nicht taeglich mit Software arbeitet:
   grosse Schrift, hoher Kontrast, viel Abstand, keine Symbole ohne Wort daneben.
   Grundschrift 18px (nicht 14px wie im Cockpit) — das ist Absicht, nicht Zufall.
   Alle Masse in rem, damit die Browser-Schriftvergroesserung wirkt. */

:root {
  --papier: #f4f6f9;
  --karte: #ffffff;
  --rand: #d7dde5;
  --text: #17202a;
  --text-leise: #5b6875;
  --blau: #1d4ed8;
  --blau-hell: #eff4ff;
  --gruen: #15803d;
  --gruen-hell: #eefbf2;
  --gelb: #a16207;
  --gelb-hell: #fefbe8;
  --rot: #b91c1c;
  --rot-hell: #fef2f2;
  --grau-hell: #f1f3f6;
  --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --radius: 12px;
}

* { box-sizing: border-box; }

html { font-size: 18px; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--papier);
  color: var(--text);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

/* Wichtig fuer 360px-Geraete: ein einzelnes langes Wort (z.B. eine Mailadresse
   oder "Ressourcenuebersicht") verbreitert sonst die ganze Seite und alles
   rutscht seitlich aus dem Bild. Teuer gelernt in der EHA-Mobiloptimierung. */
h1, h2, h3, p, td, th, li, .kachel-wert { overflow-wrap: anywhere; }

h1 { font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }

a { color: var(--blau); }

/* ===== Grundgerüst ===== */
.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  padding: .7rem 1rem;
  position: sticky; top: 0; z-index: 20;
}
.kopf-innen {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.marke { font-weight: 700; font-size: 1.05rem; margin-right: auto; }
.marke span { font-weight: 400; color: var(--text-leise); font-size: .85rem; display: block; }

.menue {
  display: flex; gap: .35rem; flex-wrap: wrap;
  max-width: 1100px; margin: 0 auto; padding: .6rem 1rem 0;
}
.menue button {
  font: inherit; font-size: .95rem;
  background: transparent; border: 1px solid transparent;
  padding: .5rem .85rem; border-radius: 999px; cursor: pointer; color: var(--text-leise);
  min-height: 44px;                 /* Fingergroesse, nicht Mausgroesse */
}
.menue button:hover { background: var(--grau-hell); }
.menue button.aktiv { background: var(--blau); color: #fff; font-weight: 600; }
.menue button .zahl {
  display: inline-block; background: var(--rot); color: #fff;
  border-radius: 999px; font-size: .75rem; padding: 0 .4rem; margin-left: .35rem; font-weight: 700;
}
.menue button.aktiv .zahl { background: rgba(255,255,255,.28); }

main { max-width: 1100px; margin: 0 auto; padding: 1rem 1rem 5rem; }

.ansicht { display: none; }
.ansicht.sichtbar { display: block; }

/* ===== Karten ===== */
.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1rem; margin-bottom: .9rem;
  box-shadow: var(--schatten);
}
.karte-kopf { display: flex; align-items: flex-start; gap: .7rem; flex-wrap: wrap; }
.karte-kopf h3 { flex: 1 1 14rem; min-width: 0; }

.zeile { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; }
.zeile > * { min-width: 0; }          /* Flex-Kinder duerfen schrumpfen */

.leise { color: var(--text-leise); font-size: .9rem; }
.mini { font-size: .82rem; }

/* ===== Kacheln ===== */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.kachel { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem; }
.kachel-wert { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kachel-text { color: var(--text-leise); font-size: .85rem; }

/* ===== Marken (Ampel, Status) ===== */
/* KEIN white-space:nowrap. Das stand hier zuerst und war der Grund, warum die
   Seite auf 360px 488px breit wurde: in einem Marker landete ein ganzer Satz
   ("Kein Kalender verbunden — Termin nicht pruefbar") und konnte nicht
   umbrechen. Die Marker sind kurz gehalten, aber verlassen darf man sich
   darauf nicht — der Text kommt teilweise aus der Kalenderpruefung. */
.marker {
  display: inline-block; padding: .18rem .6rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; border: 1px solid transparent;
  max-width: 100%; overflow-wrap: anywhere;
}
.marker.gruen { background: var(--gruen-hell); color: var(--gruen); border-color: #bbf0cd; }
.marker.gelb  { background: var(--gelb-hell);  color: var(--gelb);  border-color: #f5e6a8; }
.marker.rot   { background: var(--rot-hell);   color: var(--rot);   border-color: #f7c9c9; }
.marker.blau  { background: var(--blau-hell);  color: var(--blau);  border-color: #c9dcff; }
.marker.grau  { background: var(--grau-hell);  color: var(--text-leise); border-color: var(--rand); }

/* ===== Bedienelemente ===== */
button.knopf, .knopf {
  font: inherit; font-weight: 600; font-size: .95rem;
  background: var(--blau); color: #fff; border: 1px solid var(--blau);
  padding: .6rem 1.1rem; border-radius: 10px; cursor: pointer;
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  text-decoration: none;
}
button.knopf:hover { filter: brightness(1.08); }
button.knopf:disabled { opacity: .5; cursor: not-allowed; filter: none; }
button.knopf.zweit { background: var(--karte); color: var(--text); border-color: var(--rand); }
button.knopf.zweit:hover { background: var(--grau-hell); }
button.knopf.gefahr { background: var(--rot); border-color: var(--rot); }
button.knopf.gruen  { background: var(--gruen); border-color: var(--gruen); }
button.knopf.klein  { min-height: 38px; padding: .35rem .75rem; font-size: .85rem; }

label { display: block; font-weight: 600; font-size: .9rem; margin: .8rem 0 .25rem; }
label .zusatz { font-weight: 400; color: var(--text-leise); }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
  font: inherit; width: 100%;
  padding: .6rem .7rem; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--karte); color: var(--text); min-height: 46px;
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 3px solid #bfd4ff; outline-offset: 1px; border-color: var(--blau); }

.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0 .8rem; }

/* ===== Hinweise ===== */
.hinweis { padding: .75rem .9rem; border-radius: 10px; margin: .8rem 0; border: 1px solid; font-size: .92rem; }
.hinweis.info    { background: var(--blau-hell);  border-color: #c9dcff; color: #1e3a8a; }
.hinweis.gut     { background: var(--gruen-hell); border-color: #bbf0cd; color: #14532d; }
.hinweis.warnung { background: var(--gelb-hell);  border-color: #f5e6a8; color: #713f12; }
.hinweis.fehler  { background: var(--rot-hell);   border-color: #f7c9c9; color: #7f1d1d; }
.hinweis b { display: block; margin-bottom: .15rem; }

/* ===== Anmeldung ===== */
.anmelde-huelle { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.anmelde-karte { width: 100%; max-width: 24rem; }

/* ===== Meldung unten (Toast) ===== */
#meldung {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 60; max-width: min(34rem, calc(100vw - 2rem));
  background: #17202a; color: #fff; padding: .8rem 1.1rem; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: .95rem; display: none;
}
#meldung.gut { background: var(--gruen); }
#meldung.fehler { background: var(--rot); }
#meldung.sichtbar { display: block; }

/* ===== Ueberlagerung (Detail, Dialoge) =====
   Zwei Dinge, die am Handy sonst zur Sackgasse werden:
   1) Der Kasten muss SENKRECHT scrollen koennen (max-height + overflow auto),
   2) der Weg heraus muss im Bild sein -> Schliessen sitzt oben, nicht unten. */
.ueberlagerung {
  position: fixed; inset: 0; background: rgba(16,24,40,.5); z-index: 50;
  display: none; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto;
}
.ueberlagerung.sichtbar { display: flex; }
.dialog {
  background: var(--karte); border-radius: 14px; width: 100%; max-width: 42rem;
  flex: none;                     /* NICHT schrumpfen lassen — Flex-Kind sonst 360px */
  max-height: calc(100vh - 2rem); overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.dialog-kopf {
  position: sticky; top: 0; background: var(--karte); z-index: 2;
  border-bottom: 1px solid var(--rand); padding: .9rem 1rem;
  display: flex; align-items: center; gap: .8rem;
}
.dialog-kopf h2 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.1rem; }
.dialog-rumpf { padding: 1rem; }

/* ===== Tabellen =====
   NIE overflow:hidden um eine zu breite Tabelle — das versteckt Bedienelemente
   endgueltig, auch wischen hilft dann nicht. Stattdessen bewusst scrollbar. */
.tabellen-huelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { color: var(--text-leise); font-weight: 600; font-size: .82rem; white-space: nowrap; }

/* ===== Sprachknopf ===== */
#sprach-knopf {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--blau); color: #fff; border: none; cursor: pointer;
  box-shadow: 0 6px 20px rgba(29,78,216,.4); font-size: 1.5rem;
  display: none; align-items: center; justify-content: center;
}
#sprach-knopf.sichtbar { display: flex; }
#sprach-knopf.hoert { background: var(--rot); animation: puls 1.2s infinite; }
@keyframes puls { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ===== Petra: Verlauf ===================================================== */
/* Die Eingabe klebt unten fest. Wer eine lange Antwort liest, soll nicht erst
   wieder nach unten scrollen muessen, um die naechste Frage zu stellen. */
.agent-eingabe { position: sticky; bottom: .6rem; z-index: 5; }

.sprechblase {
  border-radius: var(--radius); padding: .7rem .9rem; margin-bottom: .6rem;
  box-shadow: var(--schatten); max-width: 52rem;
}
.sprechblase.ich { background: var(--blau-hell); border: 1px solid #c7d7fe; margin-left: auto; }
.sprechblase.petra { background: var(--karte); border: 1px solid var(--rand); }
.sprechblase .wer { font-size: .78rem; font-weight: 600; color: var(--text-leise); margin-bottom: .2rem; }
.sprechblase p { margin: .25rem 0; white-space: pre-wrap; }

/* Was TATSAECHLICH passiert ist — bewusst optisch getrennt vom gesprochenen
   Satz. Der Satz ist die Absicht, dieser Kasten ist das Ergebnis. Beides in
   einen Absatz zu mischen ist genau die Verwechslung, die vermieden werden soll. */
.getan {
  margin-top: .55rem; padding: .5rem .7rem; border-radius: 8px;
  background: var(--gruen-hell); border: 1px solid #bbf0cd;
  font-size: .88rem; color: #14532d;
}
.getan.schiefgelaufen { background: var(--rot-hell); border-color: #fecaca; color: #7f1d1d; }
.getan.nichts { background: var(--grau-hell); border-color: var(--rand); color: var(--text-leise); }
.getan b { display: block; margin-bottom: .15rem; }
.getan ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.getan li { margin: .12rem 0; }

.agent-beispiel { text-align: left; }
#agent-verlauf:empty { display: none; }

.nur-lesen-hinweis { display: none; }
body.rolle-gast .nur-schreiber { display: none !important; }
body.rolle-gast .nur-lesen-hinweis { display: block; }
body:not(.rolle-inhaber) .nur-inhaber { display: none !important; }

@media (max-width: 640px) {
  html { font-size: 17px; }
  main { padding: .8rem .8rem 6rem; }
  .karte { padding: .85rem; }
  .kacheln { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
}

/* ===== Arten-Reiter =========================================================
   Die Trennung zwischen Podcast, Redaktion, Buehne und Bewerbung ist der
   eigentliche Arbeitsablauf — deshalb steht sie oben und nicht in einem
   Auswahlfeld. Bewusst KEINE feste Spaltenzahl: bei 360px ergaeben drei
   Spalten 90px, und "Konferenzen" passt da nicht hinein. Umbruch statt
   Rasterzwang, und waagerecht scrollbar als letzter Ausweg. */
.arten-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 .8rem;
}
.art-reiter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .7rem;
  min-height: 2.6rem;          /* Fingergroesse, nicht Mausgroesse */
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
}
.art-reiter:hover { border-color: var(--blau); }
/* Der aktive Reiter wird nicht NUR durch Farbe kenntlich gemacht: wer Farben
   schlecht unterscheidet, sieht sonst nicht, welcher Filter laeuft. Deshalb
   zusaetzlich fett und mit kraeftigerem Rand. */
.art-reiter.aktiv {
  background: var(--blau-hell);
  border-color: var(--blau);
  border-width: 2px;
  color: var(--blau);
  font-weight: 700;
}
.art-reiter:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.art-zeichen { font-size: 1.05rem; line-height: 1; }
.art-zahl {
  min-width: 1.5rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--grau-hell);
  color: var(--text-leise);
  font-size: .8rem;
  text-align: center;
}
.art-reiter.aktiv .art-zahl { background: #fff; color: var(--blau); }