/* ==========================================================
   ESW Westfalen — Ausstattung & Auftritt
   Farben aus dem Logo: Rot F10104, Grau 3D3E40
   ========================================================== */
:root{
  --rot:#F10104;
  --rot-dunkel:#C1040D;
  --rot-blass:#FDECEC;
  --anthrazit:#17191B;
  --kohle:#22262A;
  --grau:#3D3E40;
  --stahl:#6B7075;
  --nebel:#EEEFF0;
  --papier:#FFFFFF;
  --linie:#DCDEE0;
  --linie-hell:#E9EBEC;
  --gruen:#2C7A4B;
  --gelb:#B07C09;
  --blau:#28598A;
  --r:5px;
  --seite-breit:268px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nebel);color:var(--anthrazit);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--rot-dunkel)}
:focus-visible{outline:2px solid var(--rot);outline-offset:2px}

/* ==========================================================
   Anmeldung
   ========================================================== */
.tor{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 20px;
     background:var(--anthrazit);
     background-image:radial-gradient(ellipse at 50% -10%, #24282C 0%, #17191B 62%);}
.tor-box{width:100%;max-width:390px;background:var(--papier);border-radius:10px;
         padding:32px 28px 28px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.tor-logo{display:block;width:150px;height:auto;margin:0 auto 20px}
.tor-box h1{margin:0 0 5px;font-size:20px;letter-spacing:-.02em;text-align:center}
.tor-box p.unter{margin:0 0 24px;color:var(--stahl);font-size:13.5px;text-align:center}
.tor-box label{display:block;font-size:13px;color:var(--stahl);margin-bottom:6px}
.tor-box input[type=password],.tor-box input[type=text]{
  width:100%;padding:12px;border:1px solid var(--linie);border-radius:var(--r);background:#FBFCFC;font-size:16px}
.tor-box input:focus{outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(241,1,4,.14)}
.tor-box .knopf{width:100%;margin-top:18px;padding:13px;font-size:15px}
.merken{display:flex;gap:9px;align-items:center;margin-top:16px;font-size:13.5px;color:var(--stahl)}
.merken input{width:auto;accent-color:var(--rot)}
.fehler{margin-top:16px;background:var(--rot-blass);border-left:3px solid var(--rot);
        padding:10px 13px;font-size:13.5px;border-radius:0 var(--r) var(--r) 0}
.hinweis-box{margin-top:16px;background:#F3F5F5;border-left:3px solid var(--stahl);
             padding:10px 13px;font-size:13px;color:var(--stahl);border-radius:0 var(--r) var(--r) 0}
.hinweis-box code{background:#E4E7E8;padding:1px 5px;border-radius:3px;font-size:12.5px}

/* Wer bist du */
.wer-wahl{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.wer-wahl button{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--papier);border:1.5px solid var(--linie);border-radius:8px;
  padding:14px 16px;font-size:16px;font-weight:600;transition:border-color .15s,background .15s}
.wer-wahl button:hover{border-color:var(--rot);background:#FFF9F9}
.kreis{width:38px;height:38px;border-radius:50%;background:var(--anthrazit);color:#fff;
       display:grid;place-items:center;font-size:15px;font-weight:700;flex:none}
.wer-wahl button:hover .kreis{background:var(--rot)}

/* ==========================================================
   Gerüst
   ========================================================== */
.rahmen{display:block}
.seite{background:var(--anthrazit);color:#fff}
.marke{display:flex;align-items:center;gap:13px;padding:14px 16px 12px}
.marke img{width:92px;height:auto;flex:none}
.marke .worte{min-width:0}
.marke h1{margin:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.marke p{margin:1px 0 0;font-size:12px;color:#9AA0A5}

.fortschritt{padding:0 16px 13px}
.balken{height:6px;background:#2E3338;border-radius:100px;overflow:hidden;display:flex}
.balken i{display:block;height:100%;transition:width .4s ease}
.b-ent{background:var(--gruen)}
.b-best{background:#4A9E70}
.b-kla{background:var(--gelb)}
.zaehler{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
         margin-top:8px;font-size:12.5px;color:#9AA0A5}
.zaehler b{color:#fff;font-weight:600}
.ueberfaellig{color:#FF7A80!important}
.sync{font-size:11.5px;color:#71787E;white-space:nowrap}
.sync.aktiv{color:var(--rot)}

/* Ansichten */
.reiter{display:flex;border-top:1px solid #262B2F}
.reiter button{
  flex:1;background:none;border:0;border-bottom:2.5px solid transparent;
  padding:12px 4px;font-size:13.5px;color:#9AA0A5;white-space:nowrap;display:flex;
  align-items:center;justify-content:center;gap:5px}
.reiter button:hover{color:#fff}
.reiter button[aria-selected="true"]{color:#fff;border-bottom-color:var(--rot);font-weight:600}
.reiter .anz{font-variant-numeric:tabular-nums;font-size:11.5px;background:#2E3338;
             border-radius:100px;padding:1px 7px;min-width:22px}
.reiter button[aria-selected="true"] .anz{background:var(--rot);color:#fff}

.seiten-liste,.seiten-fuss{display:none}

/* Suchzeile */
.leiste{background:var(--papier);border-bottom:1px solid var(--linie);
        position:sticky;top:0;z-index:20}
.suchzeile{display:flex;gap:10px;padding:11px 14px;align-items:center}
.suchzeile input{flex:1;padding:9px 13px;border:1px solid var(--linie);border-radius:100px;
                 background:#F6F8F8;font-size:15px}
.suchzeile input:focus{outline:none;border-color:var(--rot);background:var(--papier)}
.klapp-alle{background:none;border:0;color:var(--stahl);font-size:13px;white-space:nowrap;padding:0 4px}
.klapp-alle:hover{color:var(--rot)}

/* ==========================================================
   Bereiche
   ========================================================== */
.bereich{background:var(--papier);margin-top:11px;border-top:1px solid var(--linie);
         border-bottom:1px solid var(--linie)}
.bereich-kopf{width:100%;background:none;border:0;text-align:left;padding:14px 16px;
              display:flex;align-items:center;gap:11px}
.bereich-kopf:hover{background:#FAFBFB}
.pfeil{color:var(--stahl);font-size:10px;transition:transform .2s;flex:none;width:9px}
.bereich.offen .pfeil{transform:rotate(90deg)}
.bereich-titel{flex:1;font-weight:650;font-size:16px;letter-spacing:-.01em;min-width:0}
.bereich-stand{font-size:12.5px;color:var(--stahl);font-variant-numeric:tabular-nums;flex:none}
.mini-balken{width:46px;height:4px;background:var(--linie-hell);border-radius:100px;
             overflow:hidden;flex:none}
.mini-balken i{display:block;height:100%;background:var(--gruen)}
.bereich-inhalt{display:none;border-top:1px solid var(--linie-hell)}
.bereich.offen .bereich-inhalt{display:block}

/* ==========================================================
   Punkte
   ========================================================== */
.punkt{border-bottom:1px solid var(--linie-hell);display:flex}
.punkt:last-of-type{border-bottom:0}
.spine{width:4px;flex:none;background:#CBD0D3}
.s-klaerung .spine{background:var(--gelb)}
.s-entschieden .spine{background:var(--gruen)}
.s-bestellt .spine{background:var(--blau)}

.punkt-koerper{flex:1;min-width:0;display:flex;align-items:flex-start}
.haken{
  flex:none;margin:12px 0 0 11px;width:23px;height:23px;border-radius:50%;
  border:1.5px solid #C2C8CB;background:var(--papier);padding:0;
  display:grid;place-items:center;color:transparent;font-size:12px;line-height:1;
  transition:background .15s,border-color .15s}
.haken:hover{border-color:var(--gruen);color:#B8C0C4}
.s-entschieden .haken,.s-bestellt .haken{background:var(--gruen);border-color:var(--gruen);color:#fff}
.s-entschieden .haken:hover,.s-bestellt .haken:hover{color:#fff;opacity:.8}

.punkt-kopf{flex:1;min-width:0;background:none;border:0;text-align:left;
            padding:11px 16px 12px 11px;display:block}
.punkt-kopf:hover{background:#FAFBFB}
.punkt-titel{font-size:15px;line-height:1.35;font-weight:500}
.s-entschieden .punkt-titel,.s-bestellt .punkt-titel{color:var(--stahl)}
.punkt-meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px 9px;align-items:center;
            font-size:12.5px;color:var(--stahl)}
.pill{display:inline-block;padding:2px 9px;border-radius:100px;font-size:11.5px;font-weight:600}
.s-offen .pill{background:#EAECED;color:#5B6165}
.s-klaerung .pill{background:#FBF0D9;color:#775205}
.s-entschieden .pill{background:#E1EFE7;color:#1D5433}
.s-bestellt .pill{background:#E1EAF3;color:#1A4267}
.frist{font-variant-numeric:tabular-nums}
.frist.faellig{color:var(--rot-dunkel);font-weight:600}
.frist.bald{color:var(--gelb);font-weight:600}
.notiz-vorschau{color:var(--anthrazit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                flex:1 1 100%;font-size:13px}
.bereich-marke{font-size:11.5px;color:var(--stahl);background:#F1F3F3;padding:1px 8px;border-radius:100px}

/* ==========================================================
   Detailansicht
   ========================================================== */
.detail{padding:6px 16px 18px 15px;background:#FAFBFB;border-top:1px solid var(--linie-hell)}
.feld{margin-top:13px}
.feld label{display:block;font-size:12.5px;color:var(--stahl);margin-bottom:5px}
.feld input,.feld textarea,.feld select{
  width:100%;padding:10px 11px;background:var(--papier);border:1px solid var(--linie);
  border-radius:var(--r);font-size:15px}
.feld textarea{min-height:84px;resize:vertical;line-height:1.5}
.feld input:focus,.feld textarea:focus,.feld select:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(241,1,4,.12)}
.zwei{display:flex;gap:11px}
.zwei .feld{flex:1;min-width:0}
.status-wahl{display:flex;flex-wrap:wrap;gap:6px}
.status-wahl button{border:1px solid var(--linie);background:var(--papier);color:var(--stahl);
                    border-radius:var(--r);padding:8px 13px;font-size:13.5px}
.status-wahl button:hover{border-color:var(--stahl);color:var(--anthrazit)}
.status-wahl button[aria-pressed="true"]{background:var(--anthrazit);border-color:var(--anthrazit);color:#fff}

.kommentare{margin-top:18px;border-top:1px solid var(--linie);padding-top:12px}
.kommentar{padding:9px 0;border-bottom:1px dotted var(--linie);font-size:14px}
.kommentar:last-of-type{border-bottom:0}
.kommentar .wer{font-size:12px;color:var(--stahl);margin-bottom:2px}
.k-zeile{display:flex;gap:7px;margin-top:10px}
.k-zeile input{flex:1;padding:10px 11px;border:1px solid var(--linie);border-radius:var(--r);font-size:15px}
.leer-text{font-size:13px;color:var(--stahl)}

.aktionen{display:flex;gap:9px;margin-top:18px;align-items:center;flex-wrap:wrap}
.knopf{background:var(--rot);color:#fff;border:0;border-radius:var(--r);padding:11px 20px;
       font-weight:600;font-size:14.5px}
.knopf:hover{background:var(--rot-dunkel)}
.knopf:disabled{opacity:.6;cursor:default}
.knopf.still{background:var(--papier);color:var(--stahl);border:1px solid var(--linie);font-weight:500}
.knopf.still:hover{color:var(--anthrazit);border-color:var(--stahl);background:var(--papier)}
.loeschen{margin-left:auto;background:none;border:0;color:var(--stahl);font-size:13px;text-decoration:underline}
.loeschen:hover{color:var(--rot)}

.neu-zeile{padding:11px 16px 13px 15px;border-top:1px solid var(--linie-hell);
           display:flex;gap:18px;flex-wrap:wrap}
.neu-zeile button{background:none;border:0;color:var(--rot-dunkel);font-weight:600;font-size:14px;padding:2px 0}
.neu-zeile button:hover{text-decoration:underline}
.neu-zeile button.grau{color:var(--stahl);font-weight:500}

.leerzustand{padding:48px 22px;text-align:center;color:var(--stahl)}
.leerzustand strong{display:block;color:var(--anthrazit);margin-bottom:6px;font-size:16px}

.fuss{padding:24px 18px;display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.fuss a,.fuss button{background:none;border:0;color:var(--stahl);font-size:14px;
                     text-decoration:underline;padding:2px 0}
.fuss a:hover,.fuss button:hover{color:var(--rot)}
.fuss p{font-size:12.5px;color:var(--stahl);line-height:1.55;max-width:62ch;margin:6px 0 0}

.melder{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(90px);
        background:var(--anthrazit);color:#fff;padding:11px 20px;border-radius:100px;
        font-size:13.5px;box-shadow:0 8px 26px rgba(0,0,0,.3);opacity:0;
        transition:transform .25s,opacity .25s;z-index:60;pointer-events:none;
        max-width:90vw;text-align:center}
.melder.zeigen{transform:translateX(-50%) translateY(0);opacity:1}
.melder.warnung{background:var(--rot)}
.laden{padding:64px 18px;text-align:center;color:var(--stahl)}

/* ==========================================================
   Handy: Kopf klebt oben, Bereichsliste ausgeblendet
   ========================================================== */
@media (max-width:899px){
  .seite{position:sticky;top:0;z-index:30}
  .inhalt{padding-bottom:90px}
  .leiste{top:0}
}
@media (max-width:430px){
  .zwei{flex-direction:column;gap:0}
  .reiter button{font-size:12.5px;padding:11px 2px;gap:4px}
  .reiter .anz{padding:1px 5px;min-width:19px}
  .marke img{width:80px}
  .marke h1{font-size:14.5px}
}

/* ==========================================================
   PC: feste Seitenspalte links, Inhalt rechts
   ========================================================== */
@media (min-width:900px){
  .rahmen{display:grid;grid-template-columns:var(--seite-breit) minmax(0,1fr);
          min-height:100dvh;align-items:start}
  .seite{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;
         overflow:hidden;border-right:1px solid #000}
  .marke{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 22px 18px}
  .marke img{width:132px}
  .marke h1{font-size:17px}
  .fortschritt{padding:0 22px 18px}
  .zaehler{flex-direction:column;align-items:flex-start;gap:3px}

  .reiter{flex-direction:column;border-top:1px solid #262B2F;
          border-bottom:1px solid #262B2F;padding:8px 0}
  .reiter button{justify-content:flex-start;border-bottom:0;border-left:2.5px solid transparent;
                 padding:9px 22px;font-size:14px;gap:0}
  .reiter button .anz{margin-left:auto}
  .reiter button[aria-selected="true"]{border-left-color:var(--rot);background:#1E2225}

  .seiten-liste{display:block;padding:14px 0 8px;flex:1 1 auto;min-height:0;
                overflow-y:auto;overscroll-behavior:contain}
  .seiten-liste h2{margin:0 0 6px;padding:0 22px;font-size:11.5px;color:#71787E;
                   font-weight:600;letter-spacing:.04em}
  .seiten-liste button{display:flex;width:100%;gap:10px;align-items:baseline;background:none;
                       border:0;text-align:left;padding:6px 22px;color:#B4BABE;font-size:13.5px}
  .seiten-liste button:hover{color:#fff;background:#1E2225}
  .seiten-liste .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .seiten-liste .zahl{font-size:12px;color:#71787E;font-variant-numeric:tabular-nums;flex:none}
  .seiten-liste button.fertig .name{color:#71787E}

  .seiten-fuss{display:flex;flex-direction:column;gap:9px;align-items:flex-start;
               flex:0 0 auto;padding:16px 22px 20px;border-top:1px solid #262B2F;
               background:var(--anthrazit)}
  .marke,.fortschritt,.reiter{flex:0 0 auto}
  .seiten-fuss a,.seiten-fuss button{background:none;border:0;color:#8A9095;font-size:13px;
                                     text-decoration:none;padding:0}
  .seiten-fuss a:hover,.seiten-fuss button:hover{color:var(--rot)}
  .seiten-fuss .ich{display:flex;align-items:center;gap:9px;color:#fff;font-size:13.5px;margin-bottom:3px}
  .seiten-fuss .kreis{width:28px;height:28px;font-size:12px;background:var(--rot)}

  .inhalt{min-width:0;padding-bottom:40px}
  .leiste{top:0}
  .suchzeile{padding:13px 26px;max-width:none}
  .bereich{margin-top:14px;border-radius:8px;border:1px solid var(--linie);
           margin-left:22px;margin-right:22px;overflow:hidden}
  .bereich-kopf{padding:15px 20px}
  .punkt-kopf{padding:12px 20px 13px 11px}
  .detail{padding:8px 20px 20px 15px}
  .neu-zeile{padding:12px 20px 14px 15px}
  .fuss{display:none}
  .tafel-kopf{display:flex;align-items:baseline;gap:12px;padding:20px 22px 0}
  .tafel-kopf h2{margin:0;font-size:20px;letter-spacing:-.02em}
  .tafel-kopf span{font-size:13.5px;color:var(--stahl)}
}
@media (min-width:900px){ .tafel-kopf{display:flex} }
.tafel-kopf{display:none}

@media (min-width:1280px){
  .bereich,.tafel-kopf,.suchzeile{max-width:940px}
  .bereich{margin-left:26px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}