/* peitschenherz-core — Formulare und Hinweise. Erbt die CI-Variablen des Themes. */

.ph-alter{margin-block:1.6rem}
.ph-alter .hinweis{margin-top:1rem}

.ph-formular{display:flex;flex-direction:column;gap:.35rem;max-width:34rem;margin-block:1.5rem}
.ph-formular label{font-size:.95rem;margin-top:.9rem;color:var(--fg)}
.ph-formular input[type=text],
.ph-formular input[type=email],
.ph-formular input[type=password],
.ph-formular input[type=date],
.ph-formular select,
.ph-formular textarea{
  background:var(--bg-2);color:var(--fg);
  border:1px solid var(--linie);border-radius:3px;
  padding:.6rem .7rem;font:inherit;width:100%;
}
.ph-formular input:focus,.ph-formular textarea:focus{
  outline:2px solid var(--akzent-hell);outline-offset:1px;border-color:var(--akzent-hell);
}
.ph-formular .knopf{align-self:flex-start;margin-top:1.2rem}

.ph-haken{display:flex;gap:.6rem;align-items:flex-start;margin-top:1rem;
          font-size:.94rem;line-height:1.45}
.ph-haken input[type=checkbox]{width:22px;height:22px;flex:0 0 auto;margin-top:.1rem;
                               accent-color:var(--akzent)}

.ph-fehler{border:1px solid var(--warnung);border-left:4px solid var(--warnung);
           border-radius:3px;padding:.8rem 1rem;margin-bottom:1rem;
           background:color-mix(in srgb, var(--warnung) 10%, var(--bg-2))}
.ph-erfolg{border:1px solid var(--akzent);border-left:4px solid var(--akzent);
           border-radius:3px;padding:.8rem 1rem;margin-bottom:1rem;
           background:color-mix(in srgb, var(--akzent) 10%, var(--bg-2))}

/* ---------------------------------------------------------- Neigungsbogen -- */
.ph-bogen{max-width:46rem}
.ph-frage{
  border:0;border-top:1px solid var(--linie);
  margin:0;padding:1.1rem 0 .9rem;
}
.ph-frage legend{
  padding:0;margin-bottom:.6rem;font-size:1.02rem;line-height:1.45;color:var(--fg);
}
.ph-skala{
  display:inline-flex;align-items:center;gap:.4rem;
  margin:0 .9rem .35rem 0;font-size:.9rem;color:var(--muted);cursor:pointer;
}
.ph-skala input[type=radio]{width:20px;height:20px;accent-color:var(--akzent);margin:0}
.ph-skala:hover span{color:var(--fg)}
.ph-skala input:checked + span{color:var(--fg)}

/* Ergebnisprofil */
.ph-profil{margin:1.2rem 0 1.6rem}
.ph-facette{
  display:grid;grid-template-columns:minmax(9rem,14rem) 1fr auto;
  align-items:center;gap:.8rem;padding:.45rem 0;
  border-bottom:1px solid var(--linie);
}
.ph-facette:last-child{border-bottom:0}
.ph-facette-name{font-size:.95rem}
.ph-balken{
  display:block;height:9px;border-radius:5px;
  background:color-mix(in srgb, var(--linie) 70%, transparent);overflow:hidden;
}
.ph-balken-wert{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--akzent),var(--akzent-hell));
}
.ph-facette-zahl{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted)}
.ph-facette-leer{grid-column:2 / -1;font-size:.88rem;color:var(--muted);font-style:italic}
.ph-loeschen{margin:1rem 0 2rem}

@media (max-width:560px){
  .ph-facette{grid-template-columns:1fr auto;gap:.4rem .8rem}
  .ph-facette-name{grid-column:1 / -1}
}

/* ---- Bloecke des Plugins, die direkt in <main> stehen ----
   Shortcode-Ausgaben landen ohne Huelle als direkte Kinder von <main> und
   bekommen deshalb die Spaltenbindung des Themes NICHT ab. Ohne diese Regel
   klebten Hinweiskasten und Formulare am linken Fensterrand, waehrend der
   Fliesstext daneben mittig stand.

   Wie beim Warnkasten: padding-inline uebernimmt die Spaltenpolsterung, die
   Randbreite links wird abgezogen, damit der Text buendig zum Fliesstext
   beginnt und der farbige Balken auf der Spaltenkante sitzt.
   NIEMALS die padding-Kurzform benutzen — sie wuerde genau das wieder zerstoeren. */
main > .ph-hinweis,
main > .ph-fehler,
main > .ph-erfolg,
main > .ph-formular,
main > .ph-alter,
main > .ph-profil,
main > .ph-loeschen,
main > .ph-bogen{
  max-width:var(--spalte);
  margin-inline:auto;
  box-sizing:content-box;
  padding-inline:var(--raum);
}
main > .ph-hinweis{
  padding-block:1rem;
  padding-inline-start:calc(var(--raum) - 3px);
}
main > .ph-fehler,
main > .ph-erfolg{
  padding-block:.8rem;
  padding-inline-start:calc(var(--raum) - 4px);
}
main > .ph-formular,
main > .ph-bogen,
main > .ph-profil,
main > .ph-loeschen{
  padding-block:0;
}

/* ---- Forum: Spaltenbindung und CI ----
   Asgaros gibt sein Markup als direktes Kind von <main> aus und bringt eine
   eigene, helle Gestaltung mit. Beides wird hier eingefangen. */
main > #af-wrapper,
main > .asgarosforum{
  max-width:calc(var(--spalte) + 14rem);
  margin-inline:auto;
  padding-inline:var(--raum);
  box-sizing:content-box;
}
#af-wrapper{color:var(--fg)}
#af-wrapper a{color:var(--akzent-hell)}
#af-wrapper a:hover{color:var(--beige)}
#af-wrapper .title-element,
#af-wrapper .main-title{
  background:var(--bg-2) !important;color:var(--fg) !important;
  border:1px solid var(--linie);border-left:3px solid var(--akzent);
  border-radius:3px;font-family:var(--serif);
}
#af-wrapper .forum,
#af-wrapper .topic,
#af-wrapper .post,
#af-wrapper .forum-element,
#af-wrapper .topic-element{
  background:color-mix(in srgb, var(--bg-2) 70%, transparent) !important;
  border:1px solid var(--linie) !important;color:var(--fg);
}
#af-wrapper .forum-description,
#af-wrapper .topic-status,
#af-wrapper .post-date,
#af-wrapper .forum-lastpost,
#af-wrapper small{color:var(--muted) !important}
#af-wrapper .button,
#af-wrapper .button-normal,
#af-wrapper input[type=submit]{
  background:var(--akzent) !important;border:1px solid var(--akzent) !important;
  color:#fff !important;border-radius:3px;padding:.5rem .9rem;
}
#af-wrapper .button:hover,
#af-wrapper .button-normal:hover,
#af-wrapper input[type=submit]:hover{
  background:var(--akzent-hell) !important;border-color:var(--akzent-hell) !important;
}
#af-wrapper input[type=text],
#af-wrapper textarea,
#af-wrapper select{
  background:var(--bg-2);color:var(--fg);
  border:1px solid var(--linie);border-radius:3px;
}
#af-wrapper table{border-color:var(--linie) !important}
.ph-forum-hinweis{margin-bottom:1.2rem}

/* ---- Anmeldeformular von WordPress ---- */
main > #ph-anmeldung,
main > .ph-anmeldung{
  max-width:var(--spalte);margin-inline:auto;
  padding-inline:var(--raum);box-sizing:content-box;
}
#ph-anmeldung p{margin:.6rem 0}
#ph-anmeldung label{display:block;font-size:.95rem;margin-bottom:.25rem}
#ph-anmeldung input[type=text],
#ph-anmeldung input[type=password]{
  width:100%;background:var(--bg-2);color:var(--fg);
  border:1px solid var(--linie);border-radius:3px;padding:.6rem .7rem;font:inherit;
}
#ph-anmeldung .login-remember label{display:flex;align-items:center;gap:.5rem}
#ph-anmeldung input[type=checkbox]{width:22px;height:22px;accent-color:var(--akzent)}
#ph-anmeldung input[type=submit]{
  background:var(--akzent);border:1px solid var(--akzent);color:#fff;
  border-radius:3px;padding:.7rem 1.3rem;font:inherit;cursor:pointer;
}
#ph-anmeldung input[type=submit]:hover{background:var(--akzent-hell);border-color:var(--akzent-hell)}

/* ---- Knopf zum erneuten Senden, direkt in der Fehlermeldung ---- */
.ph-erneut-klick{margin:.7rem 0 0}
.ph-erneut-klick .knopf{font-size:.9rem;padding:.45rem .9rem}
.ph-fehler .ph-erneut-klick .knopf{border-color:var(--warnung);color:var(--fg)}
.ph-fehler .ph-erneut-klick .knopf:hover{background:var(--warnung);border-color:var(--warnung);color:#fff}
.ph-erneut{max-width:34rem}

/* ---- Neigungsbogen: tabellarisch ---- */
.ph-gruppe-titel{margin-top:2.2rem}
.ph-tabelle-huelle{overflow-x:auto;margin:.8rem 0 1.6rem;
                   border:1px solid var(--linie);border-radius:4px}
.ph-bogen-tab,.ph-antworten{width:100%;border-collapse:collapse;font-size:.94rem}
.ph-bogen-tab th,.ph-bogen-tab td,
.ph-antworten th,.ph-antworten td{
  text-align:left;vertical-align:top;padding:.55rem .7rem;
  border-bottom:1px solid var(--linie);
}
.ph-bogen-tab thead th,.ph-antworten thead th{
  background:var(--bg-2);color:var(--muted);
  font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;
}
/* Kein sticky im Tabellenkopf: Oben klebt schon der Fortschrittsbalken, zwei
   klebende Leisten wuerden einander verdecken. Die Tabellen sind kurz, und
   Legende und Spaltentitel stehen ohnehin ueber jeder einzelnen. */
/* Spezifisch genug, um das white-space:nowrap der Kopfzellen zu schlagen —
   sonst zwingt die Legende die ganze Tabelle in die Breite. */
.ph-bogen-tab thead .ph-legende-zeile th,
.ph-antworten thead .ph-legende-zeile th{
  text-transform:none;letter-spacing:0;font-weight:400;white-space:normal;
  font-size:.86rem;padding-bottom:.45rem;
}
/* Bewusst kein Flex: als normaler Fliesstext bleiben die Trennpunkte auch dann
   erhalten, wenn die Stilangaben mal nicht ankommen. */
.ph-legende{display:block;line-height:1.7}
.ph-legende .ph-l{white-space:nowrap;margin-right:.15rem}
.ph-legende strong{color:var(--fg);font-weight:700;
                   font-variant-numeric:tabular-nums;margin-right:.15rem}
.ph-bogen-tab tbody th,.ph-antworten tbody th{font-weight:400;color:var(--fg)}
.ph-bogen-tab tbody tr:last-child th,
.ph-bogen-tab tbody tr:last-child td{border-bottom:0}
.ph-bogen-tab tbody tr:hover{background:color-mix(in srgb, var(--bg-2) 60%, transparent)}
.ph-sp-frage{width:38%}
.ph-sp-wert{width:190px}
.ph-sp-rolle{width:150px}
.ph-sp-bem{width:26%}

.ph-rolle{white-space:nowrap}
/* Nebeneinander statt untereinander: spart bei 39 Praktik-Zeilen gut einen
   Bildschirm Hoehe. */
.ph-r{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;
      font-size:.82rem;color:var(--muted);margin-right:.7rem}
.ph-r input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--akzent)}
.ph-r input:checked + span{color:var(--akzent-hell);font-weight:600}
.ph-rolle-leer{color:var(--muted);opacity:.5}
.ph-antworten .ph-rolle-wert{white-space:nowrap;color:var(--muted);font-size:.9rem}

/* ---- Fortschrittsbalken ---- */
/* Die Kopfzeile des Themes klebt selbst oben (z-index 50). Der Balken muss
   darunter einrasten, sonst schiebt er sich dahinter und ist weg. Die Hoehe
   misst bogen.js und legt sie als --ph-kopf ab; 64px sind der Notnagel,
   falls das Skript fehlt. */
.ph-fortschritt{position:sticky;top:var(--ph-kopf,64px);z-index:5;margin:0 0 1.4rem;
                padding:.6rem .8rem;background:var(--bg-2);
                border:1px solid var(--linie);border-radius:4px}
.ph-fortschritt-zeile{display:flex;justify-content:space-between;align-items:baseline;
                      gap:.8rem;font-size:.9rem;color:var(--muted);margin-bottom:.4rem}
.ph-fortschritt-text strong{color:var(--fg);font-size:1.05rem;
                            font-variant-numeric:tabular-nums}
.ph-fortschritt-prozent{font-variant-numeric:tabular-nums}
.ph-fortschritt-bahn{height:8px;border-radius:4px;overflow:hidden;
                     background:color-mix(in srgb, var(--linie) 70%, transparent)}
.ph-fortschritt-balken{height:100%;width:0;background:var(--akzent);
                       transition:width .18s ease-out}
.ph-fortschritt.ph-fertig .ph-fortschritt-balken{background:var(--akzent-hell)}
@media (prefers-reduced-motion:reduce){.ph-fortschritt-balken{transition:none}}

/* ---- Bewertung: Schieberegler ---- */
.ph-wertung{min-width:170px}
.ph-schieber{width:100%;max-width:190px;display:block;margin:.15rem 0 .25rem;
             accent-color:var(--akzent);cursor:pointer}
/* Ruhestellung sichtbar abheben: solange nichts gesagt wurde, blasser. */
.ph-schieber[data-leer]{accent-color:var(--linie);opacity:.75}
.ph-schieber:focus-visible{outline:2px solid var(--akzent-hell);outline-offset:3px}
.ph-wertung-text{display:block;font-size:.8rem;color:var(--akzent-hell);
                 line-height:1.25;min-height:2.1em}
.ph-schieber[data-leer] + .ph-wertung-text{color:var(--muted)}

.ph-bemerkung{width:100%;background:var(--bg-2);color:var(--fg);
              border:1px solid var(--linie);border-radius:3px;
              padding:.4rem .5rem;font:inherit;font-size:.9rem}
.ph-bemerkung:focus{outline:2px solid var(--akzent-hell);outline-offset:1px}

.ph-antworten .ph-wert{white-space:nowrap;color:var(--beige)}
.ph-antworten .ph-bem{color:var(--muted)}
.ph-bogen-knoepfe{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0 .4rem}

/* ---- Schmale Fenster: gestapelt statt seitlich scrollend ----
   Vier Spalten passen auf einem Telefon nicht nebeneinander. Waagerechtes
   Scrollen in einem Formular ist zumutbar zum Lesen, aber nicht zum
   Ausfuellen — deshalb wird jede Zeile hier zu einem eigenen Block. */
@media (max-width:760px){
  .ph-bogen-tab,.ph-antworten{font-size:.9rem}
  .ph-tabelle-huelle{overflow-x:visible}

  .ph-bogen-tab,.ph-bogen-tab thead,.ph-bogen-tab tbody,.ph-bogen-tab tr,
  .ph-bogen-tab td,.ph-bogen-tab th,
  .ph-antworten,.ph-antworten thead,.ph-antworten tbody,.ph-antworten tr,
  .ph-antworten td,.ph-antworten th{display:block;width:auto}

  /* Spaltentitel entfallen — die Blockbeschriftungen treten an ihre Stelle. */
  .ph-bogen-tab thead tr:last-child,
  .ph-antworten thead tr:last-child{display:none}

  .ph-bogen-tab tbody tr,.ph-antworten tbody tr{
    padding:.7rem;border-bottom:1px solid var(--linie);
  }
  .ph-bogen-tab tbody tr:last-child,.ph-antworten tbody tr:last-child{border-bottom:0}
  .ph-bogen-tab tbody th,.ph-antworten tbody th{
    padding:0 0 .5rem;border-bottom:0;font-size:1rem;line-height:1.4;
  }
  .ph-bogen-tab tbody td,.ph-antworten tbody td{padding:0 0 .5rem;border-bottom:0}
  .ph-bogen-tab tbody tr td:last-child,
  .ph-antworten tbody tr td:last-child{padding-bottom:0}

  .ph-rolle::before,.ph-rolle-wert::before{
    content:'Seite';display:block;font-size:.72rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--muted);margin-bottom:.2rem;
  }
  .ph-wertung{min-width:0}
  .ph-schieber{max-width:none}
  .ph-legende-zeile th{padding:.6rem .7rem}
}

/* ---- Zwischenspeichern ---- */
.ph-gesichert{font-size:.85rem;color:var(--muted);align-self:center}
.ph-gesichert.ph-schlecht{color:var(--warnung)}
.ph-entwurf-hinweis{margin-top:.6rem}
.ph-entwurf-weg{display:inline-block;margin-top:.6rem;font-size:.85rem;padding:.35rem .8rem}

/* ---- Themenbloecke ueber den Gruppen ---- */
.ph-block-titel{margin:3rem 0 .3rem;padding-top:1.2rem;
                border-top:2px solid var(--akzent);font-size:1.5rem}
.ph-block-titel:first-of-type{margin-top:1.6rem}
.ph-block-text{margin-bottom:.4rem}
.ph-block-titel + .ph-block-text + .ph-gruppe-titel{margin-top:1.4rem}
/* Beim Springen zu einer Ueberschrift darf sie nicht unter Kopfzeile und
   Fortschrittsleiste rutschen. */
.ph-block-titel,.ph-gruppe-titel{scroll-margin-top:calc(var(--ph-kopf,64px) + 5.5rem)}