/* ==========================================================================
   Lausitzer Lavendel — Etikettenbogen
   Gemeinsames Stylesheet für index.html (Kunde) und admin.html (intern)

   FARBEN: falls die Hausfarben exakt anders sind, nur diese Zeilen anpassen.
   ========================================================================== */
:root{
  /* Farben aus dem Logo gemessen (andruck_dtf_logo_laula.png):
     Schriftzug "Lavendel" #6F18A7 · Blüten #8D64C1 · Blattgrün #82AA1D
     Die abgeleiteten Töne halten alle den Kontrast für Text ein. */
  --lavendel:      #6F18A7;   /* Hausfarbe, Knöpfe und Links   8,9:1 */
  --lavendel-tief: #501178;   /* Hover, Überschriften         12,4:1 */
  --lavendel-hell: #F5EFF9;   /* Flächen, Zeilenwechsel              */
  --lavendel-rand: #E2D1ED;   /* Linien                              */
  --bluete:        #8D64C1;   /* Blütenton, Markierungen             */
  --gruen:         #587414;   /* erledigt — Blattgrün abgedunkelt    */
  --honig:         #B0761B;   /* Hinweis / Überschuss                */
  --mohn:          #B4436C;   /* Fehler                              */
  --granit:        #1C1620;   /* Text                                */
  --granit-hell:   #6A6172;   /* Nebentext                           */
  --nebel:         #9C93A8;   /* Beschriftungen                      */
  --papier:        #FAF7FC;   /* Seitenhintergrund                   */
  --weiss:         #FFFFFF;
  --r: 6px;
  --schatten: 0 1px 2px rgba(28,22,32,.05), 0 4px 16px rgba(80,17,120,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--papier); color:var(--granit);
  font-family:Inter,system-ui,-apple-system,sans-serif; font-size:15px; line-height:1.55;
  padding:0 0 4rem;
}
.mono{font-family:'Ubuntu Mono',ui-monospace,monospace}
.wrap{max-width:1360px;margin:0 auto}
.eng{max-width:760px}

/* ---- Kopf ------------------------------------------------------------- */
header{background:var(--weiss);border-bottom:1px solid var(--lavendel-rand);
       padding:1.5rem 1.5rem 1.3rem;margin-bottom:2rem}
header .wrap{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.logo{flex:none;height:52px;width:auto;display:block}
@media(max-width:520px){.logo{height:42px}}
h1{font-size:1.3rem;font-weight:600;letter-spacing:-.015em;color:var(--lavendel-tief)}
h1 span{font-weight:400;color:var(--granit-hell)}
.sub{font-family:'Ubuntu Mono',monospace;font-size:.76rem;color:var(--nebel);margin-top:.2rem}
.sub em{font-style:normal;color:var(--lavendel)}
.hspace{flex:1}
.hlink{font-size:.78rem;color:var(--nebel);text-decoration:none}
.hlink:hover{color:var(--lavendel)}

/* ---- Flächen ---------------------------------------------------------- */
main{padding:0 1.5rem}
.karte{background:var(--weiss);border:1px solid var(--lavendel-rand);border-radius:var(--r);
       box-shadow:var(--schatten);padding:1.3rem 1.4rem 1.5rem;margin-bottom:1.5rem}
h2{font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--nebel);
   margin-bottom:.9rem;display:flex;align-items:center;gap:.7rem}
h2::after{content:'';flex:1;height:1px;background:var(--lavendel-rand)}
.lead{color:var(--granit-hell);font-size:.88rem;margin:-.3rem 0 1.1rem;max-width:62ch}

/* ---- Formularzeilen --------------------------------------------------- */
.cols{display:grid;grid-template-columns:20px minmax(120px,1.5fr) 76px 128px 94px 30px;gap:.5rem}
.row{align-items:start;padding:.55rem .5rem;border-radius:4px}
.row:nth-child(odd){background:var(--lavendel-hell)}
.row-head{font-family:'Ubuntu Mono',monospace;font-size:.64rem;letter-spacing:.09em;
          text-transform:uppercase;color:var(--nebel);padding:0 .5rem .4rem}
.idx{font-family:'Ubuntu Mono',monospace;font-size:.78rem;color:var(--nebel);padding-top:.45rem;text-align:right}

input,select{width:100%;font:inherit;font-size:.88rem;background:var(--weiss);
  border:1px solid var(--lavendel-rand);border-radius:4px;padding:.36rem .5rem;color:var(--granit)}
input.mono{font-family:'Ubuntu Mono',monospace}
/* Platzhalter blasst beim Hineinklicken ab, bleibt aber als Formathinweis lesbar */
input::placeholder{color:var(--nebel);opacity:1;transition:opacity .15s}
input:focus::placeholder{opacity:.3}
input:focus{outline:none;border-color:var(--lavendel);box-shadow:0 0 0 3px rgba(111,24,167,.16)}
input[aria-invalid="true"]{border-color:var(--mohn);background:#FDF1F5}
input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,67,108,.16)}
.err{font-family:'Ubuntu Mono',monospace;font-size:.65rem;color:var(--mohn);margin-top:.2rem;display:block}
.del{background:none;border:0;color:var(--nebel);cursor:pointer;font-size:1.05rem;line-height:1;
     padding:.34rem;border-radius:4px}
.del:hover{color:var(--mohn);background:#FBEDF2}
.del:disabled{opacity:.25;cursor:not-allowed}
.del:disabled:hover{background:none;color:var(--nebel)}

/* ---- Knöpfe ----------------------------------------------------------- */
.actions{display:flex;gap:.6rem;align-items:center;margin-top:1.2rem;flex-wrap:wrap}
button.btn,a.btn{font:inherit;text-decoration:none;display:inline-block;font-size:.85rem;font-weight:500;cursor:pointer;border-radius:4px;
  padding:.52rem 1rem;border:1px solid var(--lavendel);background:var(--weiss);color:var(--lavendel);
  transition:background .12s,color .12s,border-color .12s}
button.btn:hover,a.btn:hover{background:var(--lavendel-hell)}
button.btn.primary,a.btn.primary{background:var(--lavendel);color:var(--weiss)}
button.btn.primary:hover,a.btn.primary:hover{background:var(--lavendel-tief);border-color:var(--lavendel-tief)}
button.btn.klein{font-size:.75rem;padding:.32rem .7rem}
button.btn:disabled{opacity:.4;cursor:not-allowed;background:var(--weiss);color:var(--lavendel)}
button.btn.primary:disabled{background:var(--lavendel);color:var(--weiss)}
button.btn:focus-visible,.del:focus-visible,summary:focus-visible,a:focus-visible{
  outline:2px solid var(--lavendel);outline-offset:2px}
.add{border-style:dashed}

.status{font-family:'Ubuntu Mono',monospace;font-size:.74rem;padding-top:.15rem;color:var(--granit-hell)}
.status.ok{color:var(--gruen)} .status.bad{color:var(--mohn)}

/* ---- Zugang ----------------------------------------------------------- */
.zugang{max-width:230px}
.zugang label{font-family:'Ubuntu Mono',monospace;font-size:.65rem;letter-spacing:.08em;
              text-transform:uppercase;color:var(--nebel);display:block;margin-bottom:.2rem}

/* ---- Quittung --------------------------------------------------------- */
.quittung{text-align:center;padding:2.5rem 1.5rem}
.quittung .gross{font-size:1.25rem;color:var(--lavendel-tief);font-weight:500;margin:.8rem auto .5rem}
.quittung p{color:var(--granit-hell);max-width:46ch;margin:0 auto .4rem}

/* ==========================================================================
   Nur admin.html
   ========================================================================== */
.split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.5rem;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

.liste{list-style:none}
.liste li{border-bottom:1px solid var(--lavendel-rand)}
.liste li:last-child{border-bottom:0}
.liste button{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:.7rem .5rem;
              border-radius:4px;font:inherit;color:var(--granit)}
.liste button:hover{background:var(--lavendel-hell)}
.liste button[aria-current="true"]{background:var(--lavendel-hell);box-shadow:inset 3px 0 0 var(--lavendel)}
.liste .nr{font-family:'Ubuntu Mono',monospace;font-size:.85rem;color:var(--lavendel-tief)}
.liste .meta{font-size:.72rem;color:var(--nebel);margin-top:.1rem}

.pill{display:inline-block;font-family:'Ubuntu Mono',monospace;font-size:.6rem;letter-spacing:.06em;
      text-transform:uppercase;padding:.1rem .4rem;border-radius:3px;vertical-align:1px}
.pill.offen{background:#FBF1DF;color:var(--honig)}
.pill.gedruckt{background:var(--lavendel-hell);color:var(--lavendel-tief)}
.pill.erledigt{background:#EDF3DF;color:var(--gruen)}

.tally{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:1.1rem}
.tally div{background:var(--lavendel-hell);border-radius:4px;padding:.6rem .7rem}
.tally dt{font-family:'Ubuntu Mono',monospace;font-size:.6rem;letter-spacing:.08em;
          text-transform:uppercase;color:var(--nebel)}
.tally dd{font-family:'Ubuntu Mono',monospace;font-size:1.2rem;margin-top:.1rem;color:var(--lavendel-tief)}
.tally div.warn{background:#FBF1DF}
.tally div.warn dd{color:var(--honig)}

table.blocks{width:100%;border-collapse:collapse;font-size:.82rem;margin-bottom:1.1rem}
table.blocks th{text-align:left;font-family:'Ubuntu Mono',monospace;font-size:.6rem;letter-spacing:.08em;
                text-transform:uppercase;color:var(--nebel);font-weight:400;padding:0 .5rem .35rem 0}
table.blocks td{border-top:1px solid var(--lavendel-rand);padding:.45rem .5rem .45rem 0;vertical-align:top}
table.blocks td.n{font-family:'Ubuntu Mono',monospace;text-align:right}
table.blocks .sw{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem}
table.blocks .s{color:var(--honig);font-family:'Ubuntu Mono',monospace;font-size:.75rem}
table.blocks tr.viel td{background:#FBF1DF}

.sheet{margin-bottom:1rem}
.sheet figcaption{font-family:'Ubuntu Mono',monospace;font-size:.65rem;color:var(--nebel);
                  letter-spacing:.07em;text-transform:uppercase;margin-bottom:.4rem}
svg.sheet-svg{width:100%;height:auto;background:var(--weiss);border:1px solid var(--lavendel-rand);
              border-radius:4px;display:block}
.empty{font-family:'Ubuntu Mono',monospace;font-size:.74rem;color:var(--nebel);
       border:1px dashed var(--lavendel-rand);border-radius:4px;padding:2.5rem 1rem;
       text-align:center;background:var(--lavendel-hell)}

details{margin-top:1.4rem;border-top:1px solid var(--lavendel-rand);padding-top:.9rem}
summary{cursor:pointer;font-family:'Ubuntu Mono',monospace;font-size:.68rem;letter-spacing:.09em;
        text-transform:uppercase;color:var(--granit-hell)}
summary:hover{color:var(--lavendel)}
.cfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin-top:.9rem}
.cfg label{font-family:'Ubuntu Mono',monospace;font-size:.65rem;color:var(--granit-hell);display:block}
.cfg input{margin-top:.15rem}
.note{font-size:.78rem;color:var(--granit-hell);margin-top:.9rem;max-width:62ch}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================================
   Nur anmelden.html
   ========================================================================== */
body.mitte{display:grid;place-items:center;min-height:100vh;padding:1.5rem}
.anmeldekarte{background:var(--weiss);border:1px solid var(--lavendel-rand);border-radius:var(--r);
  box-shadow:var(--schatten);padding:2.2rem 2rem;width:100%;max-width:370px;text-align:center}
.logo.gross{height:118px;width:auto;margin:0 auto .9rem}
.anmeldekarte h1{font-size:1.15rem;margin-bottom:.3rem}
.anmeldekarte .lead{font-size:.85rem;margin:0 0 1.5rem}
.anmeldekarte form{text-align:left}
.anmeldekarte label{font-family:'Ubuntu Mono',monospace;font-size:.65rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nebel);display:block;margin:.9rem 0 .2rem}
.anmeldekarte input{font-size:.95rem;padding:.5rem .6rem}
.fehler{background:#FDF2F6;color:var(--mohn);border-radius:4px;padding:.45rem .6rem;
  font-size:.78rem;margin-top:.9rem}
.btn.breit{width:100%;justify-content:center;margin-top:1.3rem;padding:.6rem}
.fuss{font-size:.72rem;color:var(--nebel);margin-top:1.4rem}

/* Abmelden im Kopf */
.raus{font-size:.78rem;color:var(--nebel);text-decoration:none;padding:.2rem .3rem;border-radius:4px}
.raus:hover{color:var(--mohn);text-decoration:underline}
.wer{font-family:'Ubuntu Mono',monospace;font-size:.72rem;color:var(--nebel);margin-right:.2rem}

/* Hinweis, wenn die Benachrichtigung nicht rausging */
.mailwarn{background:#FBF1DF;color:var(--honig);border-radius:4px;padding:.5rem .7rem;
  font-size:.8rem;margin:0 0 1rem}
.mailwarn b{font-family:'Ubuntu Mono',monospace;font-weight:400}

/* Löschen — steht abseits der Statusknöpfe */
button.btn.weg{border-color:var(--lavendel-rand);color:var(--nebel)}
button.btn.weg:hover{border-color:var(--mohn);color:var(--mohn);background:#FBEDF2}

/* Lieferankündigung ist raus */
.mailok{background:#EDF3DF;color:var(--gruen);border-radius:4px;padding:.5rem .7rem;
  font-size:.8rem;margin:0 0 1rem}
.mailok b{font-family:'Ubuntu Mono',monospace;font-weight:400}

/* Startquadrant — Miniansicht des Bogens */
.startzeile{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  background:var(--lavendel-hell);border-radius:4px;padding:.7rem .9rem;margin:0 0 1.1rem}
.startlabel{font-family:'Ubuntu Mono',monospace;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--nebel);display:block}
.starthinweis{font-size:.78rem;color:var(--granit-hell);margin:.15rem 0 0;max-width:44ch}
.blatt{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  width:104px;height:74px;background:var(--lavendel-rand);border:1px solid var(--lavendel-rand);
  border-radius:3px;overflow:hidden}
.blatt button{border:0;cursor:pointer;background:var(--weiss);color:var(--nebel);
  font-family:'Ubuntu Mono',monospace;font-size:.7rem;padding:0;transition:background .12s,color .12s}
.blatt button:hover{background:#F0E4F8;color:var(--lavendel)}
.blatt button.voll{background:var(--bluete);color:var(--weiss)}
.blatt button.start{outline:2px solid var(--lavendel);outline-offset:-2px;font-weight:700;color:var(--lavendel)}
.blatt button.start.voll{color:var(--weiss)}
.blatt button:focus-visible{outline:2px solid var(--lavendel);outline-offset:-2px}
@media(max-width:620px){.startzeile{flex-direction:column;align-items:flex-start}}

/* Abgeleitetes Raster über den Stellwerten */
.rasterinfo{font-size:.8rem;color:var(--granit-hell);background:var(--lavendel-hell);
  border-radius:4px;padding:.5rem .7rem;margin:.9rem 0 0}
.rasterinfo b{color:var(--lavendel-tief)}
.rasterinfo .knapp{color:var(--honig);display:block;margin-top:.2rem}