/* Profil-Konfigurator - Oberflaeche des Werkzeugs.
   ==========================================================================
   Bewusst eine eigene Datei und kein <style>-Block in der Seite: die CSP des
   Servers erlaubt nur "style-src 'self'". Ein Inline-<style>-Element wird
   dadurch komplett verworfen -- die Bedienoberflaeche erschien dann in
   Browser-Standarddarstellung. Inline-style="..."-Attribute sind erlaubt
   (style-src-attr 'unsafe-inline'), <style>-Elemente nicht.

   Alle Klassen sind mit "pk-" abgegrenzt und liegen unter .pk-werkzeug,
   weil die Website .karte, .raster, .feld und .btn bereits anders belegt.
   ========================================================================== */

/* ==========================================================================
   Profil-Konfigurator
   Alle Klassen sind mit "pk-" abgegrenzt und liegen unter .pk-werkzeug.
   Grund: die Website benutzt .karte, .raster, .feld und .btn bereits fuer
   etwas anderes -- ohne Abgrenzung wuerden sich beide gegenseitig stoeren.
   ========================================================================== */
.pk-werkzeug{
  --pk-rot:#C8181A; --pk-anthrazit:#1A1A1A;
  --pk-grau-50:#FAFAFA; --pk-grau-100:#F2F2F2; --pk-grau-200:#E4E4E4;
  --pk-grau-300:#D0D0D0; --pk-grau-600:#6B6B6B; --pk-grau-700:#4A4A4A;
  display:grid; grid-template-columns:290px 1fr 300px; gap:18px;
  align-items:start; font-size:15px;
}
@media(max-width:1150px){ .pk-werkzeug{ grid-template-columns:1fr } }

.pk-werkzeug *{box-sizing:border-box}
.pk-karte{background:#fff;border:1px solid var(--pk-grau-200);border-radius:8px;
  padding:18px;margin-bottom:16px}
.pk-karte:last-child{margin-bottom:0}
.pk-karte h2,.pk-karte h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--pk-grau-600);margin:0 0 14px;font-weight:700;line-height:1.3}
.pk-karte h2 .pk-leicht,.pk-karte h3 .pk-leicht{text-transform:none;font-weight:400}

/* Formauswahl */
.pk-formen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pk-formen button{aspect-ratio:1;border:1px solid var(--pk-grau-300);background:#fff;
  border-radius:6px;font-size:20px;font-weight:700;cursor:pointer;
  color:var(--pk-grau-700);font-family:Georgia,"Times New Roman",serif;
  transition:all .12s;display:flex;align-items:center;justify-content:center}
.pk-formen button:hover{border-color:var(--pk-rot);color:var(--pk-rot)}
.pk-formen button.pk-aktiv{background:var(--pk-rot);border-color:var(--pk-rot);color:#fff}
.pk-formname{font-size:12px;color:var(--pk-grau-600);margin:10px 0 0;text-align:center}

/* Bauteil-Kopfzeile */
.pk-bauteil-kopf{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--pk-grau-200);min-height:30px}
.pk-bauteil-name{font-size:14px;font-weight:700;color:var(--pk-rot);flex:1}
.pk-bauteil-hinweis{font-size:12px;color:var(--pk-grau-600);line-height:1.45}
.pk-bauteil-zurueck{border:1px solid var(--pk-grau-300);background:#fff;
  border-radius:20px;padding:4px 11px;font-size:11.5px;cursor:pointer;
  font-family:inherit;color:var(--pk-grau-700);white-space:nowrap}
.pk-bauteil-zurueck:hover{border-color:var(--pk-rot);color:var(--pk-rot)}

/* Regler */
.pk-feld{margin-bottom:13px}
.pk-feld:last-child{margin-bottom:0}
.pk-feld label{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;font-weight:600;margin-bottom:4px;gap:8px}
.pk-wert{font-weight:700;font-variant-numeric:tabular-nums;color:var(--pk-rot);
  font-size:12.5px;white-space:nowrap}
.pk-zeile{display:flex;gap:8px;align-items:center}
.pk-zeile input[type=range]{flex:1;accent-color:var(--pk-rot);min-width:0}
.pk-zeile input[type=number]{width:70px;border:1px solid var(--pk-grau-300);
  border-radius:4px;padding:4px 6px;font-size:13px;font-variant-numeric:tabular-nums;
  font-family:inherit;text-align:right}
.pk-zeile input[type=number]:focus{outline:none;border-color:var(--pk-rot)}
.pk-werkzeug select{width:100%;border:1px solid var(--pk-grau-300);border-radius:5px;
  padding:8px 10px;font-size:14px;font-family:inherit;background:#fff}
.pk-werkzeug select:focus{outline:none;border-color:var(--pk-rot)}

.pk-knopfreihe{display:flex;gap:6px;flex-wrap:wrap}
.pk-knopfreihe button{flex:1;min-width:56px;border:1px solid var(--pk-grau-300);
  background:#fff;border-radius:5px;padding:7px 4px;font-size:12.5px;cursor:pointer;
  font-family:inherit;color:var(--pk-grau-700)}
.pk-knopfreihe button:hover{border-color:var(--pk-rot);color:var(--pk-rot)}
.pk-knopfreihe button.pk-aktiv{background:var(--pk-rot);border-color:var(--pk-rot);color:#fff}

/* Zeichnung */
.pk-buehne{background:#fff;border:1px solid var(--pk-grau-200);border-radius:8px;
  padding:10px;position:sticky;top:96px}
@media(max-width:1150px){ .pk-buehne{position:static} }
.pk-zeichnung{width:100%;height:auto;display:block;background:#fff;border-radius:4px}
.pk-bereich{cursor:pointer;transition:fill-opacity .12s}
.pk-bereich:hover{fill-opacity:.34}
.pk-bereich.pk-aktiv{fill-opacity:.46}
.pk-legende{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;
  color:var(--pk-grau-600);padding:10px 6px 2px;
  border-top:1px solid var(--pk-grau-200);margin-top:8px}

/* Ergebnis */
.pk-ergebnis{display:flex;flex-direction:column;gap:2px;padding:11px 0;
  border-bottom:1px solid var(--pk-grau-200)}
.pk-ergebnis:last-of-type{border-bottom:0}
.pk-bez{font-size:12px;color:var(--pk-grau-600)}
.pk-zahl{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.pk-zahl small{font-size:13px;font-weight:600;color:var(--pk-grau-600);margin-left:3px}
.pk-ergebnis.pk-haupt .pk-zahl{color:var(--pk-rot);font-size:27px}

.pk-hinweis{font-size:11.5px;color:var(--pk-grau-600);line-height:1.5;
  background:var(--pk-grau-50);border-left:3px solid var(--pk-grau-300);
  padding:10px 12px;border-radius:0 4px 4px 0;margin:14px 0 0}
.pk-hinweis strong{color:var(--pk-grau-700)}

.pk-btn{width:100%;border:0;border-radius:5px;padding:10px;font-size:13.5px;
  font-weight:600;cursor:pointer;font-family:inherit;background:var(--pk-anthrazit);
  color:#fff;margin-top:8px;display:block;text-align:center;text-decoration:none}
.pk-btn:hover{background:#000;color:#fff}
.pk-btn.pk-hell{background:var(--pk-grau-100);color:var(--pk-grau-700);
  border:1px solid var(--pk-grau-300)}
.pk-btn.pk-hell:hover{background:var(--pk-grau-200);color:var(--pk-grau-700)}

.pk-warnung{background:#FCE8E8;border-left:3px solid var(--pk-rot);color:#9B1C1C;
  padding:10px 12px;border-radius:0 4px 4px 0;font-size:12.5px;margin-top:12px}
.pk-fliess{font-size:12.5px;color:var(--pk-grau-700);margin:0}