/* CANSOL Kundenportal (Paket 850, ergänzt in Paket 851: Projekte, Zeitleiste, Downloads) – Marken-Design wie includes/cansol_brand.php:
   schwarz + Diagonale (bg-cansol.png), Kasten mit 1px weißem Rahmen und 20px Rundung, Hausschrift Inter (Paket 856), Karten gleich hoch (Paket 857),
   Rot #E60000, Pillen-Knöpfe. Handyoptimiert (Ronny: „Immer an die Handyoptimierung denken"). */
:root{color-scheme:dark;--kp-rot:#E60000;--kp-rot-hover:#ff2a1a;--kp-gruen:#1f9d55;--kp-gelb:#c98a00}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;color:#fff;background-color:#000;
  background-size:cover;background-position:center center;background-repeat:no-repeat;background-attachment:fixed;min-height:100vh;position:relative;z-index:0}
h1,h2,h3,.kp-btn,.kp-pille,.kp-kopf-titel,.kp-zahl{font-family:"Inter",sans-serif}h1,h2,h3{letter-spacing:-.01em}
h1{font-size:30px;line-height:1.15;margin:0 0 16px;font-weight:800;letter-spacing:.01em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
h2{font-size:15px;margin:0 0 10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);font-weight:700}
p{font-size:16px;line-height:1.7;margin:0 0 18px;text-shadow:0 1px 6px rgba(0,0,0,.3)}
a{color:#fff}
.kp-box{background:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(108,108,108,.06) 100%);border:1px solid rgba(255,255,255,1);border-radius:20px;background-clip:padding-box}
.kp-zentriert{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:40px 24px}
.kp-kasten{max-width:560px;width:100%;padding:46px 42px 38px;text-align:left}
.kp-logo{width:158px;max-width:158px;height:auto;display:block;margin:0 0 26px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.kp-einleitung{margin-bottom:22px}
/* Formulare */
.kp-feld{margin:0 0 16px}
.kp-feld label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;letter-spacing:.02em}
.kp-feld input,.kp-feld textarea,.kp-feld select{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:16px;outline:0}
.kp-feld input:focus,.kp-feld textarea:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.kp-feld input.fehler{border-color:var(--kp-rot);box-shadow:0 0 0 3px rgba(230,0,0,.25)}
.kp-fehlertext{color:#ffb4ad;font-size:13px;margin-top:6px;line-height:1.4}
.kp-feld .kp-hinweis{color:rgba(255,255,255,.75);font-size:12.5px;margin-top:6px}
.kp-zwei{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kp-haken{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;margin:0 0 18px}
.kp-haken input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto}
.kp-honig{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.kp-reihe{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:8px}
.kp-btn{display:inline-block;background:var(--kp-rot);color:#fff;text-decoration:none;font-weight:700;padding:15px 40px;border-radius:999px;font-size:15px;letter-spacing:.04em;box-shadow:0 10px 26px rgba(0,0,0,.3);border:0;cursor:pointer;transition:background .15s ease;font-family:"Inter",sans-serif}
.kp-btn:hover{background:var(--kp-rot-hover)}
.kp-btn.neben{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);box-shadow:none}
.kp-btn.neben:hover{background:rgba(255,255,255,.24)}
.kp-btn.klein{padding:10px 20px;font-size:13px}
.kp-btn[disabled]{opacity:.45;cursor:not-allowed}
.kp-links{margin-top:18px;font-size:13.5px}
.kp-links a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-right:18px}
.kp-muted{color:rgba(255,255,255,.85);font-size:12.5px;line-height:1.6}
.kp-hinweisbox{margin-top:22px;padding:14px 16px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.25);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.85)}
.kp-meldung{padding:13px 16px;border-radius:12px;margin:0 0 18px;font-size:14.5px;line-height:1.5;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35)}
.kp-meldung.ok{border-color:var(--kp-gruen);background:rgba(31,157,85,.22)}
.kp-meldung.fehler{border-color:var(--kp-rot);background:rgba(230,0,0,.22)}
.kp-fuss{margin-top:28px;padding-top:20px;border-top:1px solid rgba(255,255,255,.30);font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.8)}
.kp-fuss-symbole{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.kp-fuss img{width:26px;height:26px;display:block}
.kp-fuss-text{margin-top:6px}
/* Anwendungs-Layout nach der Anmeldung */
.kp-app:before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:-1}
.kp-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 28px;background:rgba(0,0,0,.55);border-bottom:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5}
.kp-kopf-links{display:flex;align-items:center;gap:14px;min-width:0}
.kp-kopf-logo{height:34px;width:auto}
.kp-kopf-titel{font-weight:800;font-size:17px;letter-spacing:.02em}
.kp-kopf-kunde{font-size:13px;color:rgba(255,255,255,.85)}
.kp-nav{display:flex;align-items:center;gap:22px}
.kp-nav a{color:#fff;text-decoration:none;font-weight:600;font-size:14px;padding-bottom:4px;border-bottom:2px solid transparent;white-space:nowrap}
.kp-nav a.aktiv{border-bottom-color:var(--kp-rot)}
.kp-nav a.bald{opacity:.5;cursor:default}
.kp-abmelden{margin:0}
.kp-abmelden button{background:none;border:0;color:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0 0 4px;border-bottom:2px solid transparent}
.kp-abmelden button:hover{border-bottom-color:rgba(255,255,255,.6)}
.kp-menue{display:none;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.kp-inhalt{max-width:1180px;margin:0 auto;padding:28px 24px 40px}
.kp-app .kp-fuss{max-width:1180px;margin:0 auto;padding:20px 24px 30px;border-top:0}
h1.kp-seite{font-size:26px;margin:0 0 14px}
.kp-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px;align-items:start}
.kp-karte{padding:22px 24px}
.kp-karte.bald{opacity:.55}
.kp-karte .kp-cd{font-size:14px;line-height:1.55;color:rgba(255,255,255,.85);margin:0}
.kp-zahl{font-size:38px;font-weight:800;line-height:1.1}
.kp-zahl small{font-size:14px;font-weight:600;color:rgba(255,255,255,.8);margin-left:8px;font-family:"Inter",sans-serif}
.kp-haupt{display:grid;grid-template-columns:1.35fr 1fr;gap:18px}.kp-haupt>*,.kp-karten>*{min-width:0}
.kp-daten{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;font-size:14px}
.kp-daten div{padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.25)}
.kp-daten b{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px;font-weight:600}
.kp-pille{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.kp-pille.rot{background:var(--kp-rot)}.kp-pille.grau{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5)}.kp-pille.gruen{background:var(--kp-gruen)}.kp-pille.gelb{background:var(--kp-gelb)}
.kp-liste{list-style:none;margin:0;padding:0;font-size:14px}
.kp-liste li{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.15);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kp-liste li span{color:rgba(255,255,255,.7);font-size:12.5px}
.kp-app .kp-feld input,.kp-app .kp-feld textarea{background:rgba(0,0,0,.3)}
@media (max-width:900px){
  .kp-karten{grid-template-columns:1fr 1fr}.kp-haupt{grid-template-columns:1fr}
  .kp-menue{display:block}
  .kp-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:rgba(0,0,0,.92);border-bottom:1px solid rgba(255,255,255,.35)}
  body.kp-menue-offen .kp-nav{display:flex}
  .kp-nav a,.kp-abmelden button{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.12);width:100%;text-align:left}
  .kp-nav a.aktiv{border-bottom:1px solid rgba(255,255,255,.12);background:rgba(230,0,0,.25)}
  .kp-kopf{padding:12px 16px;flex-wrap:nowrap}.kp-kopf-links{flex:1 1 auto}.kp-kopf-links>div{min-width:0}.kp-menue{flex:0 0 auto;margin-left:auto;align-self:flex-start}.kp-inhalt{padding:18px 16px 30px}   /* Paket 971 F4 (Ronny): Menüknopf bleibt oben rechts – bei langem Firmennamen rutschte er unter den Text */
}
@media (max-width:560px){
  .kp-zentriert{padding:20px 12px}.kp-kasten{padding:30px 22px 26px}h1{font-size:26px}
  .kp-btn{width:100%;text-align:center}.kp-zwei{grid-template-columns:1fr}
  .kp-karten{grid-template-columns:1fr}.kp-daten{grid-template-columns:1fr}.kp-zahl{font-size:30px}h1.kp-seite{font-size:22px}
  .kp-links a{display:block;margin:0 0 8px}
}

/* Paket 851: Projekte, Zeitleiste, Downloads */
.kp-karten.kp-vier{grid-template-columns:repeat(4,1fr)}
a.kp-kennzahl{text-decoration:none;color:#fff;display:block}a.kp-kennzahl:hover{border-color:#fff;background:rgba(255,255,255,.14)}
/* Paket 857 (Ronny: „die Kacheln oben alle angleichen“): die vier Karten sind immer gleich hoch (gestreckt auf die höchste);
   das FTP-Formular liegt als eigener Kasten darunter, deshalb wächst keine Karte mehr. Knopf unten in der FTP-Karte.
   Auch bei zwei Reihen (Tablet) alle gleich hoch (grid-auto-rows); auf dem Handy untereinander in natürlicher Höhe. */
.kp-karten.kp-vier{align-items:stretch;grid-auto-rows:1fr}.kp-karten.kp-vier>*{display:flex;flex-direction:column}
.kp-ftpkarte .kp-ftpknopf{margin-top:auto;padding-top:12px}.kp-ftpkarte .kp-cd{margin-bottom:0}
.kp-ftp{scroll-margin-top:84px}.kp-ftp .kp-cd{margin-bottom:12px}.kp-ftp .kp-meldung{margin-bottom:12px}   /* Paket 966: FTP-Karte unter „Mein Konto“ */
/* Paket 966 (Ronny: „ganz kleine Kalenderübersicht über diesen Monat in Miniaturform, wo der heutige Tag ein bisschen hervorgeht“):
   vierte Karte der Übersicht = Monatskalender, Montag zuerst, Wochenende blasser, heute als roter Kreis. */
.kp-kalkarte .kp-kal{margin-top:2px}
.kp-kal-kopf,.kp-kal-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px 2px;justify-items:center}
.kp-kal-kopf span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:0 0 3px}
.kp-kal-tag,.kp-kal-leer{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums;line-height:1}
.kp-kal-tag.we{color:rgba(255,255,255,.5)}
.kp-kal-tag.heute{background:var(--kp-rot,#E60000);color:#fff;font-weight:800;box-shadow:0 0 0 3px rgba(230,0,0,.28)}
@media (max-width:1100px){.kp-kal-tag,.kp-kal-leer{width:30px;height:30px;font-size:13.5px}}
@media (max-width:560px){.kp-kal-tag,.kp-kal-leer{width:34px;height:34px;font-size:15px}.kp-kal-kopf span{font-size:12px}}
.kp-zahl small{display:block;margin:4px 0 0;font-size:13px}
.kp-tabwrap{overflow-x:auto;max-width:100%}.kp-projekte td:last-child{white-space:nowrap}
.kp-projekte{width:100%;border-collapse:collapse;font-size:14px}
.kp-projekte th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:0 10px 10px;border-bottom:1px solid rgba(255,255,255,.3);font-weight:600}
.kp-projekte td{padding:13px 10px;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:middle}
.kp-projekte tr.aktiv td{background:rgba(230,0,0,.12)}
.kp-projekte td .n{font-weight:700;overflow-wrap:anywhere}.kp-projekte td .s{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.kp-projekte td:first-child{width:50%}
.kp-fortschritt{height:6px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden;width:110px}
.kp-fortschritt i{display:block;height:100%;background:var(--kp-rot)}
.kp-fortschritt.gelb i{background:var(--kp-gelb)}.kp-fortschritt.gruen i{background:var(--kp-gruen)}   /* Paket 928: Balken in der Ampelfarbe */
.kp-leer{padding:18px;border:1px dashed rgba(255,255,255,.4);border-radius:12px;color:rgba(255,255,255,.8);font-size:14px;text-align:center}
.kp-zl{list-style:none;margin:0;padding:0;position:relative}
.kp-zl:before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.3)}
.kp-zl li{position:relative;padding:0 0 18px 36px;font-size:14px}
.kp-zl li:before{content:"";position:absolute;left:4px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--kp-gruen);border:2px solid #fff}
/* Paket 928 (Ronny, Fassung B): Punkte als Ampel nach Phase – Eingang/Beauftragung rot, Bearbeitung gelb, Lieferung grün;
   der aktuelle Schritt („jetzt") leuchtet in seiner Phasenfarbe, offene Schritte bleiben grau. */
.kp-zl li.rot:before{background:var(--kp-rot)}.kp-zl li.gelb:before{background:var(--kp-gelb)}.kp-zl li.gruen:before{background:var(--kp-gruen)}
.kp-zl li.offen:before{background:rgba(255,255,255,.25)}.kp-zl li.offen{color:rgba(255,255,255,.75)}
.kp-zl li.jetzt:before{box-shadow:0 0 0 4px rgba(230,0,0,.35)}
.kp-zl li.jetzt.gelb:before{box-shadow:0 0 0 4px rgba(201,138,0,.4)}.kp-zl li.jetzt.gruen:before{box-shadow:0 0 0 4px rgba(31,157,85,.4)}
.kp-zl .d{display:block;font-size:12px;color:rgba(255,255,255,.7)}
.kp-dl{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.kp-dl a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3);color:#fff;text-decoration:none;font-size:14px}
.kp-dl a:hover{border-color:#fff;background:rgba(255,255,255,.12)}
/* Paket 875: Zusatzoption noch nicht freigeschaltet – grau, nicht klickbar */
.kp-dl a.aus,.kp-dl a.aus:hover{opacity:.45;cursor:not-allowed;border-style:dashed;background:rgba(0,0,0,.2);pointer-events:auto}
.kp-fg-form select option:disabled{color:#888}
.kp-dl a b{font-weight:700}.kp-dl a span{font-size:12px;color:rgba(255,255,255,.7);text-align:right}
.kp-hinweis-klein{margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.75)}
.kp-zurueck{display:inline-block;color:#fff;text-decoration:none;font-size:14px;margin-bottom:10px;opacity:.85}.kp-zurueck:hover{opacity:1;text-decoration:underline}
.kp-projekt-kopf{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.kp-haupt-umgekehrt{grid-template-columns:1fr 1.35fr}
.kp-daten-eins{grid-template-columns:1fr}
.kp-archiv{margin-top:18px}.kp-archiv summary{cursor:pointer;font-weight:700;font-size:15px;padding:12px 16px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.3)}
@media (max-width:1100px){.kp-karten.kp-vier{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.kp-haupt-umgekehrt{grid-template-columns:1fr}.kp-nurpc{display:none}.kp-projekte td:first-child{width:auto}}
@media (max-width:560px){.kp-karten.kp-vier{grid-template-columns:1fr;grid-auto-rows:auto}.kp-dl a{flex-direction:column;align-items:flex-start}.kp-dl a span{text-align:left}.kp-projekte tr.kopf{display:none}.kp-projekte tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}.kp-projekte tr.aktiv{background:rgba(230,0,0,.12);padding:12px 8px;margin:0 -8px}.kp-projekte tr.aktiv td{background:none}.kp-projekte td{display:block;padding:0;border:0}.kp-projekte td.kp-nurpc{display:none}.kp-projekte td:first-child{flex:1 1 100%;width:auto}.kp-projekte td:nth-child(2){flex:0 0 auto}.kp-projekte td:last-child{margin-left:auto}.kp-projekte td .n{overflow-wrap:normal}.kp-projekte .kp-btn.klein{width:auto;padding:8px 16px}}
/* Paket 864 – Neues Projekt beauftragen (Stufe 2a): Schritte, Formular aus dem Fragebogen, Upload-Feld, Dateiliste */
.kp-auf-schritte{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.kp-auf-schritte span{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.03em;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3);color:rgba(255,255,255,.7)}
.kp-auf-schritte span.jetzt{background:var(--kp-rot);border-color:var(--kp-rot);color:#fff}
.kp-auf-schritte span.fertig{background:rgba(31,157,85,.35);border-color:var(--kp-gruen);color:#fff}
.kp-auf-intro{margin:0 0 16px}
.kp-pflicht{color:#ff6b61;font-weight:800}
.kp-auf-form .kp-karte{margin-bottom:18px}
.kp-auf-felder{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.kp-auf-felder>*{min-width:0}.kp-auf-felder .kp-feld.breit{grid-column:1/-1}
.kp-auf-kontakt{font-size:13.5px;line-height:1.6;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.25);margin:0 0 16px}
.kp-auf-kontakt a{margin-left:6px;text-decoration:underline;text-underline-offset:3px}
.kp-feld select:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.kp-feld select.fehler,.kp-feld textarea.fehler{border-color:var(--kp-rot);box-shadow:0 0 0 3px rgba(230,0,0,.25)}
.kp-feld select option{color:#000;background:#fff}
.kp-auf-hakentitel{font-size:13px;font-weight:600;margin:0 0 8px;letter-spacing:.02em}
.kp-auf-haken .kp-haken{margin:0 0 10px}
.kp-auf-daten{grid-template-columns:1fr 1fr}
.kp-auf-abschnitt{grid-column:1/-1;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:700;margin-top:4px;padding:0!important;background:none!important;border:0!important}
.kp-auf-daten div b{word-break:normal}
.kp-auf-daten>div{overflow-wrap:anywhere}
/* Upload */
.kp-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;padding:22px 18px;border:2px dashed rgba(255,255,255,.6);border-radius:16px;background:rgba(0,0,0,.28);cursor:pointer;text-align:center;transition:background .15s,border-color .15s;margin:0 0 14px}
.kp-drop:hover,.kp-drop.ueber{background:rgba(230,0,0,.16);border-color:var(--kp-rot)}
.kp-drop input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.kp-drop .gross{font-weight:800;font-size:17px}
.kp-drop .klein{font-size:12.5px;color:rgba(255,255,255,.8);line-height:1.5}
.kp-dateiliste{list-style:none;margin:0;padding:0}
.kp-datei{padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.25);margin:0 0 8px;font-size:14px}
.kp-datei .zeile{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.kp-datei .name{flex:1 1 220px;overflow-wrap:anywhere;font-weight:600}
.kp-datei .groesse{color:rgba(255,255,255,.75);font-size:12.5px;white-space:nowrap}
.kp-datei .weg{background:none;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;font-family:inherit}
.kp-datei .weg:hover{border-color:var(--kp-rot);background:rgba(230,0,0,.2)}
.kp-datei .status{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:6px}
.kp-datei.fertig .status{color:#b7f5c4}
.kp-datei.fehler{border-color:var(--kp-rot)}.kp-datei.fehler .status{color:#ffb4ad}
.kp-balken{height:6px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;margin-top:8px}
.kp-balken i{display:block;height:100%;width:0;background:var(--kp-rot);transition:width .2s}
.kp-datei.fertig .kp-balken{display:none}
.kp-lese{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:4px;line-height:1.5}
.kp-lese.gruen{color:#b7f5c4}
.kp-summe{font-size:13px;font-weight:600;margin:4px 0 10px;min-height:18px}
.kp-upload-fehler{margin:0 0 14px;border-color:var(--kp-rot);background:rgba(230,0,0,.18);color:#fff}
.kp-auf-abschicken .kp-ohne{margin:6px 0 12px}
.kp-verwerfen{margin-left:auto}
@media (max-width:900px){.kp-auf-haupt{grid-template-columns:1fr}.kp-auf-daten{grid-template-columns:1fr}}
@media (max-width:700px){.kp-auf-felder{grid-template-columns:1fr}}
@media (max-width:560px){.kp-auf-schritte span{font-size:11.5px;padding:5px 10px}.kp-drop{min-height:120px}.kp-verwerfen{margin-left:0}.kp-auf-abschicken .kp-reihe .kp-btn{width:100%}}
/* Paket 865 – Abgleich Datei ↔ Filme */
.kp-abgleich{padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;margin:0 0 14px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.3)}
.kp-abgleich.ok{border-color:var(--kp-gruen);background:rgba(31,157,85,.22)}
.kp-abgleich.fehlt{border-color:var(--kp-gelb);background:rgba(201,138,0,.22)}
.kp-abgleich b{margin-right:4px}
/* Paket 866 – Benutzer und Rollen */
.kp-ben-haupt{grid-template-columns:1.5fr 1fr;align-items:stretch}
/* Paket 968 (Ronny: „Alle bitte ordentlich und sauber nebeneinander … die Kachel mit den Rollen, die kann viel kleiner“): links Liste + Rollen
   untereinander, rechts „Benutzer anlegen“; beide Spalten gleich hoch (die Liste füllt den Rest, die Rollen-Karte bleibt klein), darunter die Logo-Karte mit Abstand */
.kp-ben-links{display:flex;flex-direction:column;gap:18px;min-width:0}.kp-ben-links>*,.kp-ben-rechts>*{min-width:0}
.kp-ben-links>.kp-karte:first-child{flex:1 1 auto}.kp-ben-links .kp-rechte-karte{flex:0 0 auto;margin-top:0}
.kp-ben-rechts{display:flex;min-width:0}.kp-ben-rechts>.kp-karte{flex:1 1 auto}
.kp-ben-haupt+.kp-karte,.kp-ben-haupt+.kp-box{margin-top:18px}
.kp-rechte-karte{margin-top:18px}
.kp-ben-inline{display:inline-block;margin:0 6px 6px 0}
.kp-ben-inline select{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:13px}
.kp-ben-inline select option{color:#000;background:#fff}
.kp-ben-inline select[disabled]{opacity:.55;cursor:not-allowed}
.kp-benutzer td .n{display:block}.kp-benutzer td .s{display:block}   /* 971: lange Adressen brechen hinter dem @ (wbr in benutzer.php) – sonst läuft die Tabelle rechts aus dem Kasten */
.kp-benutzer .kp-pille{margin-top:6px}
tr.kp-ben-gesperrt td{opacity:.6}
.kp-ben-knoepfe{white-space:nowrap}.kp-ben-knoepfe .kp-ben-inline{display:block;margin:0 0 6px}.kp-ben-knoepfe .kp-ben-inline:last-child{margin-bottom:0}
.kp-rechte{width:100%;border-collapse:collapse;font-size:13px}
.kp-rechte th,.kp-rechte td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.15);text-align:left;vertical-align:top}.kp-rechte th:not(:first-child),.kp-rechte td.mitte{width:84px;white-space:normal}
.kp-rechte tr.kopf th{font-size:10.5px;line-height:1.25;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:600;vertical-align:bottom}
.kp-rechte-karte .kp-hinweis-klein{margin-top:8px}
.kp-rechte th .kp-kurz{display:none}
@media (max-width:560px){.kp-rechte{font-size:12px}.kp-rechte th,.kp-rechte td{padding:5px 4px}.kp-rechte th:not(:first-child),.kp-rechte td.mitte{width:62px}.kp-rechte th .kp-lang{display:none}.kp-rechte th .kp-kurz{display:inline}.kp-rechte tr.kopf th{font-size:9.5px;letter-spacing:0}}
.kp-rechte td.mitte,.kp-rechte th:not(:first-child){text-align:center}
.kp-rechte .ja{color:#7be0a0;font-weight:800}.kp-rechte .nein{color:rgba(255,255,255,.4)}
@media (max-width:900px){.kp-ben-haupt{grid-template-columns:1fr}.kp-ben-links{display:contents}.kp-ben-links .kp-rechte-karte{order:3}.kp-ben-rechts{order:2}}
@media (max-width:560px){.kp-ben-knoepfe{white-space:normal}.kp-benutzer tr{display:flex;flex-wrap:wrap;gap:8px 10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}.kp-benutzer td{display:block;padding:0;border:0;flex:1 1 100%}.kp-benutzer td.kp-nurpc{display:none}.kp-benutzer tr.kopf{display:none}.kp-ben-inline .kp-btn.klein{width:auto;padding:8px 14px}}
/* Paket 867 – Links für Dritte */
.kp-fg{margin-top:18px}
.kp-fg-link{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.kp-fg-link input{flex:1 1 260px;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:13px}
.kp-fg-neu{margin-top:4px}.kp-fg-neu .kp-fg-link{margin:8px 0}
.kp-fg-tab td .s{display:block}
tr.kp-fg-aus td{opacity:.6}
.kp-fg-form{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2)}
.kp-fg-form select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font:inherit;font-size:15px}
.kp-fg-form select option{color:#000;background:#fff}
@media (max-width:560px){.kp-fg-tab tr{display:flex;flex-wrap:wrap;gap:8px 10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}.kp-fg-tab td{display:block;padding:0;border:0;flex:1 1 100%}.kp-fg-tab td.kp-nurpc{display:none}.kp-fg-tab tr.kopf{display:none}.kp-fg-link .kp-btn.klein{width:auto;padding:8px 14px}}
/* Paket 878: wählbare Projektzeilen auf der Übersicht – Klick auf Name oder Zeile zeigt rechts die Zeitleiste */
.kp-projekte.kp-waehlbar tr[data-href]{cursor:pointer}
.kp-projekte.kp-waehlbar tr[data-href]:hover td{background:rgba(255,255,255,.07)}
.kp-projekte.kp-waehlbar tr.aktiv:hover td{background:rgba(230,0,0,.18)}
.kp-projekte td .n a.kp-zl-wahl{color:#fff;text-decoration:none}
.kp-projekte td .n a.kp-zl-wahl:hover{text-decoration:underline}
@media (max-width:560px){.kp-projekte.kp-waehlbar tr[data-href]:hover td{background:none}}
.kp-karte h2{overflow-wrap:anywhere}   /* Paket 878: lange Projektnamen in der Kartenüberschrift (z. B. „… – Zeitleiste“) brechen am Handy um statt querzuscrollen */
/* Paket 879 (Ronny: „Können wir den Übergang zu den einzelnen Seiten so ein bisschen smooth machen, dass die Seiten so
   aufblinken und aufgehen?“ – Fassung 2: „Die Zeitverzögerung kann ruhig ein bisschen langsamer sein.“ – Fassung 3: „nicht von
   rechts einblinkt, sondern dass es einfach wechselt … bleibt, wie es ist und dann gerade und in der Mitte sich an- und
   ausgeht“): Seitenwechsel ohne Bewegung. Browser mit Seitenübergängen (Chrome, Edge, Safari): die alte Seite bleibt, wo sie
   ist, und blendet aus (0,3 s); der Grund bleibt kurz schwarz; dann blendet die neue Seite an derselben Stelle ein (0,55 s).
   Nichts schiebt, nichts wächst. Andere Browser: nur das Einblenden der neuen Seite beim Laden. Wer im System „Bewegung
   reduzieren“ eingestellt hat, bekommt keine Animation. */
@view-transition{navigation:auto}
::view-transition{background:#000}
::view-transition-old(root){animation:kpSeiteWeg .3s ease-in both}
::view-transition-new(root){animation:kpSeiteAuf .55s .25s ease-out both}
@keyframes kpSeiteWeg{to{opacity:0}}
@keyframes kpSeiteAuf{from{opacity:0}to{opacity:1}}
@supports not (view-transition-name:root){.kp-app,.kp-zentriert{animation:kpSeiteAuf .55s ease-out both}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root),.kp-app,.kp-zentriert{animation:none !important}}
/* Paket 897 – Auswahlfelder im cansol®-Look (Ronny: „Können wir bei den Auswahlfenstern vielleicht auch nochmal grafisch überlegen …
   was ein bisschen hübscher aussieht als dieses Blau?" / „Kannst du bitte noch die Auswahlfelder an unser Layout anpassen?")
   Stufe 1 (alle Browser): dunkle Liste statt weiß (color-scheme: dark), eigener Pfeil, Einträge weiß auf dunkel.
   Stufe 2 (Chrome/Edge ab 135, nur Rechner mit Maus): die Liste selbst im cansol®-Look – dunkler Kasten, runde Ecken, Schatten,
   rote Markierung, Häkchen am gewählten Eintrag. Am Handy bleibt die Auswahl des Geräts (dunkel). */
.kp-feld select,.kp-ben-inline select,.kp-fg-form select{color-scheme:dark;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 stroke=%27%23fff%27 stroke-width=%271.8%27 fill=%27none%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.kp-ben-inline select{background-position:right 10px center;padding-right:30px}
.kp-feld select option,.kp-ben-inline select option,.kp-fg-form select option{color:#fff;background:#141416}
.kp-feld select option:checked,.kp-ben-inline select option:checked,.kp-fg-form select option:checked{background:#E62E1E;color:#fff}
.kp-fg-form select option:disabled{color:#8a8a90}
@supports (appearance:base-select){
  @media (hover:hover) and (pointer:fine){
    .kp-feld select,.kp-ben-inline select,.kp-fg-form select{appearance:base-select}
    .kp-feld select::picker(select),.kp-ben-inline select::picker(select),.kp-fg-form select::picker(select){appearance:base-select;background:#141416;color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:6px;margin-top:6px;box-shadow:0 18px 50px rgba(0,0,0,.6);max-height:min(340px,60vh);overflow:auto;font:inherit;font-size:15px}
    .kp-feld select::picker-icon,.kp-ben-inline select::picker-icon,.kp-fg-form select::picker-icon{display:none}
    .kp-feld select:open,.kp-ben-inline select:open,.kp-fg-form select:open{border-color:#fff}
    .kp-feld select option,.kp-ben-inline select option,.kp-fg-form select option{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;background:transparent;color:#fff;cursor:pointer;line-height:1.3}
    .kp-feld select option:hover,.kp-feld select option:focus-visible,.kp-ben-inline select option:hover,.kp-ben-inline select option:focus-visible,.kp-fg-form select option:hover,.kp-fg-form select option:focus-visible{background:rgba(230,46,30,.28);outline:0}
    .kp-feld select option:checked,.kp-ben-inline select option:checked,.kp-fg-form select option:checked{background:#E62E1E;color:#fff;font-weight:600}
    .kp-feld select option::checkmark,.kp-ben-inline select option::checkmark,.kp-fg-form select option::checkmark{content:"✓";order:1;margin-left:auto;font-weight:800}
    .kp-feld select option[value=""]:checked,.kp-fg-form select option[value=""]:checked{background:rgba(255,255,255,.08);color:#9a9aa0;font-weight:500}
    .kp-feld select option[value=""]:checked::checkmark,.kp-fg-form select option[value=""]:checked::checkmark{content:""}
    .kp-feld select option:disabled,.kp-ben-inline select option:disabled,.kp-fg-form select option:disabled{color:#8a8a90;cursor:default}
    .kp-feld select option:disabled:hover,.kp-ben-inline select option:disabled:hover,.kp-fg-form select option:disabled:hover{background:transparent}
    .kp-ben-inline select::picker(select){font-size:13px;padding:4px}
  }
}

/* Paket 900 – Häkchen im cansol®-Look (Ronny, Bild Beauftragen 02.10.: „Da sind noch blaue Häkchen drin. Bitte an unser Layout anpassen.")
   Kästchen dunkel statt weiß, Haken cansol-rot statt blau – überall im Kundenportal (Checkliste, AGB, „Daten anders", Abgabe-Auswahl, Datenschutz). */
input[type=checkbox],input[type=radio]{accent-color:#E62E1E;color-scheme:dark;cursor:pointer}
.kp-haken input{border-radius:5px}

/* Paket 918 – Knopf „＋ Neues Projekt" rechts neben der Begrüßung (Ronny: „wir sollten hier noch einen Knopf einbauen, neues Projekt") */
.kp-titelzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.kp-titelzeile h1.kp-seite{margin:0}
.kp-neu-knopf{white-space:nowrap}
@media (max-width:700px){.kp-titelzeile{flex-direction:column;align-items:stretch}.kp-neu-knopf{width:100%;text-align:center;box-sizing:border-box}}

/* Paket 919 – Karte „Bestellung" in der Projektakte (Angaben aus der Beauftragung) */
.kp-bestellung{margin-top:18px}
.kp-best-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kp-best-kopf h2{margin:0 0 6px}
.kp-best-meta{font-size:12.5px;color:rgba(255,255,255,.75)}
.kp-best-abschnitt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:16px 0 8px;font-weight:700}
.kp-bestellung .kp-daten div{overflow-wrap:anywhere}
.kp-best-fuss{margin-top:16px;align-items:center}
.kp-best-fuss .kp-muted{font-size:12.5px}
@media (max-width:700px){.kp-best-fuss{flex-direction:column;align-items:stretch}.kp-best-fuss .kp-btn{width:100%;text-align:center;box-sizing:border-box}}

/* Paket 969 – Ihr Kalender (groß, Termine aus dem Synology-Kalender der Kundennummer) */
.kp-karten.kp-drei-kal{grid-template-columns:repeat(3,1fr);align-items:stretch;grid-auto-rows:1fr}.kp-karten.kp-drei-kal>*{display:flex;flex-direction:column}
.kp-rechts-spalte{display:flex;flex-direction:column;gap:18px;min-width:0}.kp-rechts-spalte>*{min-width:0}
.kp-kalg-karte h2{margin-bottom:8px}
.kp-kalg-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
.kp-kalg-monat{font-family:"Inter",sans-serif;font-weight:800;font-size:17px}
.kp-kalg-nav{display:flex;gap:6px}
.kp-kalg-nav a,.kp-kalg-nav span{font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.06);line-height:1}
.kp-kalg-nav a:hover{border-color:#fff;background:rgba(255,255,255,.16)}
.kp-kalg-nav .kp-kalg-heute.aktiv{border-color:var(--kp-rot,#E60000);background:var(--kp-rot,#E60000)}
.kp-kalg-wt,.kp-kalg-tage{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.kp-kalg-tage{grid-auto-rows:1fr}
.kp-kalg-wt span{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center;padding:0 0 4px}
.kp-kalg-tag,.kp-kalg-leer{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;min-height:48px;padding:5px 4px 4px;border-radius:9px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.92);font:inherit;text-align:center}
.kp-kalg-leer{background:transparent;border-color:transparent}
.kp-kalg-tag.we{background:rgba(255,255,255,.025)}.kp-kalg-tag.we .kp-kalg-nr{color:rgba(255,255,255,.5)}
.kp-kalg-nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.kp-kalg-tag.heute .kp-kalg-nr{background:var(--kp-rot,#E60000);color:#fff;font-weight:800;box-shadow:0 0 0 3px rgba(230,0,0,.28)}
button.kp-kalg-tag{cursor:pointer}button.kp-kalg-tag:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.kp-kalg-tag.gewaehlt{border-color:#fff;background:rgba(255,255,255,.14)}
.kp-kalg-punkte{display:flex;gap:3px;align-items:center}.kp-kalg-punkte i{display:block;width:7px;height:7px;border-radius:50%}.kp-kalg-punkte b{font-size:10px;font-weight:700;line-height:1;color:rgba(255,255,255,.75)}
.kp-kalg-chips{display:none}
.kp-kalg-liste{margin-top:12px;border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.kp-kalg-tagliste{display:none}.kp-kalg-tagliste.aktiv{display:block}
.kp-kalg-tagtitel{font-family:"Inter",sans-serif;font-weight:700;font-size:13.5px;margin:0 0 6px}
.kp-kalg-termin{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:13.5px;line-height:1.35}
.kp-kalg-termin:last-child{border-bottom:0}
.kp-kalg-farbe{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:5px}
.kp-kalg-zeit{flex:0 0 92px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8);white-space:nowrap}
.kp-kalg-text{flex:1 1 auto;min-width:0}.kp-kalg-text strong{display:block;font-weight:700}.kp-kalg-ort{display:block;font-size:12.5px;color:rgba(255,255,255,.7)}
.kp-kalg-keine{font-size:13.5px;color:rgba(255,255,255,.8);padding:4px 0}
.kp-kalg-fuss{margin-top:10px}
@media (max-width:1100px){.kp-kalg-tag,.kp-kalg-leer{min-height:50px}}
@media (max-width:900px){.kp-haupt-kal>.kp-rechts-spalte{display:contents}.kp-haupt-kal .kp-kalg-karte{order:-1}}
@media (max-width:560px){.kp-karten.kp-drei-kal{grid-template-columns:1fr}.kp-kalg-tag,.kp-kalg-leer{min-height:46px;padding:4px 3px 3px;align-items:center}.kp-kalg-nr{width:26px;height:26px;font-size:14px}.kp-kalg-zeit{flex-basis:78px}.kp-kalg-kopf{flex-wrap:wrap}}

/* Paket 970 – Kalender aus: grau hinterlegt, Termine blinzeln durch, Hinweis für Rahmenvertragskunden als Schleier */
.kp-kalg-karte{position:relative}
.kp-kalg-karte.aus .kp-kalg{filter:grayscale(1);opacity:.5;pointer-events:none;user-select:none}
.kp-kalg-karte.aus .kp-kalg-nav span{opacity:.6}
.kp-kalg-schleier{position:absolute;left:0;right:0;top:54px;bottom:0;display:flex;align-items:center;justify-content:center;padding:18px 24px;border-radius:0 0 16px 16px;background:linear-gradient(180deg,rgba(43,43,46,0) 0%,rgba(43,43,46,.3) 20%,rgba(43,43,46,.3) 80%,rgba(43,43,46,0) 100%)}
.kp-kalg-schleier-text{max-width:420px;text-align:center;font-size:14px;line-height:1.5;color:#fff;background:rgba(27,27,29,.92);border:1px solid rgba(255,255,255,.28);border-radius:14px;padding:16px 20px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.kp-kalg-schleier-text strong{display:block;font-family:"Inter",sans-serif;font-size:15px;margin:0 0 6px}
@media (max-width:560px){.kp-kalg-schleier{padding:12px}.kp-kalg-schleier-text{font-size:13.5px;padding:14px 16px}}

/* Paket 971 – Demo-Zugang: Leiste unter der Kopfzeile */
.kp-demo-leiste{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:10px 28px;background:rgba(230,0,0,.16);border-bottom:1px solid rgba(230,0,0,.55);font-size:13.5px;line-height:1.45;color:#fff}
.kp-demo-leiste strong{font-family:"Inter",sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;margin-right:6px}
.kp-demo-leiste .kp-btn{flex:0 0 auto}
@media (max-width:700px){.kp-demo-leiste{padding:10px 16px}.kp-demo-leiste .kp-btn{width:100%}}