/* Erste Darstellung der Kunden-Adresse (UX 9, #534): eine ruhige Markenzeile, bis die Schale gezeichnet ist, und ein Satz fuer Browser
   ohne JavaScript. Eigene kleine Datei, weil die Content-Security-Policy der Kunden-Adresse keinen Inline-Stil erlaubt. React ersetzt die
   Markenzeile beim ersten Zeichnen. Nur die Kunden-Startseite (backend/kundenhost.js) bindet diese Datei ein. */
body { margin: 0; background: #ffffff; color: #111111; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.kp-start { display: flex; align-items: center; gap: 0.6rem; max-width: 45rem; margin: 0 auto; padding: 1.1rem 1.25rem; font-size: 1.15rem; font-weight: 700; }
.kp-start img { border-radius: 6px; }
.kp-start-ohne-js { max-width: 45rem; margin: 1rem auto; padding: 0 1.25rem; font-size: 1rem; line-height: 1.5; }
@media (prefers-color-scheme: dark) { body { background: #101317; color: #eceff3; } }

/* Platzhalter, bis die App geladen ist (UX 7 Befund 453): ein Zeichen und «Wird geladen ...», hell oder dunkel nach System.
   Wird von backend/startplatzhalter.js unter die Markenzeile (UX 9) in die Startseite der Kunden-Adresse gesetzt; die App ersetzt den Inhalt von <div id="root"> von selbst. */
/* nur solange der Platzhalter da ist (:has), damit nach dem Start der App nichts von hier mehr gilt */
html:has(.kpl) { background: #ffffff; color: #111111; color-scheme: light dark; }
html:has(.kpl) body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.kpl { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; min-height: 60vh; text-align: center; }
.kpl-zeichen { width: 56px; height: 56px; border: 2px solid #111111; border-radius: 50%; position: relative; }
.kpl-zeichen::after { content: ""; position: absolute; left: 19px; top: 13px; width: 10px; height: 20px; border-right: 3px solid #111111; border-bottom: 3px solid #111111; transform: rotate(45deg); }
.kpl-name { margin: 0; font-size: 1.25rem; font-weight: 700; }
.kpl-satz { margin: 0; font-size: 0.95rem; color: #6b6b6b; }
@media (prefers-color-scheme: dark) {
  html:has(.kpl) { background: #101317; color: #eceff3; }
  .kpl-zeichen { border-color: #eceff3; }
  .kpl-zeichen::after { border-color: #eceff3; }
  .kpl-satz { color: #9aa3ad; }
}