/* ─────────────────────────────────────────────────────────────
   Setter-Plattform · heller Stil
   Farben und Schriften stammen von settersystem.de, damit der Kunde
   beim Anmelden nicht in einer fremden Welt landet.
   Gestaltungsprinzip: ruhige Flächen, weiche Schatten statt Rahmen,
   viel Luft, eine einzige Akzentfarbe.
   ───────────────────────────────────────────────────────────── */
@import url('/fonts/fonts.css');

:root{
  --paper:#F7F5F0; --paper2:#F1EEE7; --card:#FFFFFF;
  --ink:#1A1A18; --ink2:#3A3833;
  --terra:#D97757; --terra-d:#C25C39; --terra-soft:rgba(217,119,87,.10);
  --mut:#6E6A62; --faint:#9C978D;
  --line:rgba(26,26,24,.07); --line-s:rgba(26,26,24,.13);
  --gruen:#2F7D4F; --gruen-bg:rgba(47,125,79,.09);
  --rot:#B4392C; --rot-bg:rgba(180,57,44,.09);
  --warn:#8F5B12; --warn-bg:rgba(217,151,20,.12);
  --r:18px; --r-s:12px;
  /* Schatten in zwei Stufen: fast unsichtbar im Ruhezustand, etwas
     deutlicher bei Hervorhebung. Nie hart, nie dunkel. */
  --schatten:0 1px 2px rgba(26,26,24,.03), 0 6px 18px rgba(26,26,24,.045);
  --schatten-hoch:0 2px 4px rgba(26,26,24,.04), 0 14px 38px rgba(26,26,24,.07);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--paper);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  letter-spacing:-.005em;
}
main{max-width:900px;margin:0 auto;padding:44px 24px 120px}

/* ── Seitenleiste ────────────────────────────────────────────── */
.side{
  width:246px;flex-shrink:0;background:var(--card);
  border-right:1px solid var(--line);
  padding:24px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;align-self:flex-start;
}
.side .marke{display:block;width:100%;padding:6px 10px 22px;text-decoration:none;overflow:hidden}
.side .marke img{height:25px;width:auto;max-width:100%;display:block;object-fit:contain;object-position:left center}
.side .marke small{
  display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-top:9px;font-weight:500;
}
.side .nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  color:var(--ink2);text-decoration:none;font-size:14.5px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.side .nav-item:hover{background:var(--paper2)}
.side .nav-item.active{background:var(--terra-soft);color:var(--terra-d);font-weight:600}
.side .nav-item .ic{font-size:14px;width:19px;text-align:center;opacity:.85}
.side .nav-item .lbl{flex:1}
.side .nav-item .zaehler{
  font-size:11px;font-weight:700;background:var(--terra);color:#fff;
  padding:2px 8px;border-radius:99px;letter-spacing:0;
}
.side .trenner{height:1px;background:var(--line);margin:12px 10px}
/* Der Betreiber-Punkt gehört nicht zum Kundenmenü und wird deshalb abgesetzt. */
.side .nav-item.verwaltung{color:var(--terra-d);font-weight:600}
.side .nav-item.verwaltung:hover{background:var(--terra-soft)}
.side .foot{margin-top:auto;padding-top:14px}
.side .foot .abmelden{
  width:100%;background:transparent;border:1px solid var(--line-s);color:var(--mut);
  border-radius:10px;padding:9px;font-size:13.5px;font-weight:500;box-shadow:none;
}
.side .foot .abmelden:hover{border-color:var(--line-s);color:var(--ink);background:var(--paper2)}

@media (max-width:820px){
  body{display:block !important}
  .side{
    width:auto;height:auto;position:sticky;top:0;z-index:50;flex-direction:row;
    gap:4px;overflow-x:auto;padding:10px 12px;border-right:0;
    border-bottom:1px solid var(--line);align-self:auto;
  }
  .side .marke,.side .foot,.side .trenner{display:none}
  .side .nav-item{white-space:nowrap;padding:8px 12px}
  main{padding:28px 18px 120px !important}
}

/* ── Typografie ─────────────────────────────────────────────── */
h1{
  font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,4vw,42px);letter-spacing:-.02em;line-height:1.08;
}
h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:23px;letter-spacing:-.015em}
h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--mut);font-size:15.5px;margin-top:8px;max-width:62ch}

/* ── Karten und Formulare ───────────────────────────────────── */
fieldset,.karte{
  border:0;border-radius:var(--r);background:var(--card);
  box-shadow:var(--schatten);padding:26px 28px;margin-bottom:20px;
}
legend{
  padding:0;font-family:"Instrument Serif",Georgia,serif;font-size:21px;
  color:var(--ink);letter-spacing:-.015em;float:left;width:100%;margin-bottom:14px;
}
/* Ein gefloatetes legend nimmt sich aus dem Fluss: ohne clear rutscht das
   erste Element darunter nach oben und überlappt die Überschrift. */
legend+*{clear:both}
label{display:block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ink2);letter-spacing:0}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],textarea,select{
  width:100%;margin-top:8px;padding:12px 14px;border-radius:var(--r-s);
  border:1px solid var(--line-s);background:var(--card);color:var(--ink);
  font:inherit;font-size:15px;transition:border-color .15s ease,box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--terra);box-shadow:0 0 0 4px var(--terra-soft);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical;min-height:84px;line-height:1.5}
.hint{font-size:13px;color:var(--mut);margin-top:8px;line-height:1.5}
.hint a{color:var(--terra-d)}
.zeile{display:flex;gap:16px;flex-wrap:wrap}
.zeile>div{flex:1;min-width:210px}

/* ── Knöpfe ─────────────────────────────────────────────────── */
button,.knopf{
  padding:11px 22px;border:0;border-radius:var(--r-s);background:var(--terra);color:#fff;
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;letter-spacing:-.005em;
  box-shadow:0 1px 2px rgba(194,92,57,.18);
  transition:background .15s ease,transform .1s ease,box-shadow .15s ease;
}
button:hover,.knopf:hover{background:var(--terra-d);box-shadow:0 2px 8px rgba(194,92,57,.24)}
button:active,.knopf:active{transform:translateY(1px)}
button:disabled{opacity:.4;cursor:default;box-shadow:none}
button.leise{
  background:var(--card);color:var(--ink2);border:1px solid var(--line-s);
  font-weight:500;padding:8px 14px;font-size:13.5px;box-shadow:none;
}
button.leise:hover{background:var(--paper2);color:var(--ink);border-color:var(--line-s)}

/* ── Zustände ───────────────────────────────────────────────── */
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 11px;border-radius:99px;letter-spacing:0}
.pill.an{background:var(--gruen-bg);color:var(--gruen)}
.pill.aus{background:var(--rot-bg);color:var(--rot)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.ok{color:var(--gruen)} .err{color:var(--rot)}

/* ── Speicherleiste ─────────────────────────────────────────── */
.bar{
  position:fixed;left:0;right:0;bottom:0;background:rgba(247,245,240,.82);
  border-top:1px solid var(--line);padding:14px 18px;display:flex;gap:14px;
  align-items:center;justify-content:center;
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  z-index:40;
}
#msg,#pw_msg{font-size:14px}

/* ── Tabellen ───────────────────────────────────────────────── */
table{
  width:100%;border-collapse:separate;border-spacing:0;font-size:14.5px;
  background:var(--card);border-radius:var(--r);overflow:hidden;box-shadow:var(--schatten);
}
th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--faint);padding:15px 16px;border-bottom:1px solid var(--line);font-weight:600;
}
td{padding:16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper2)}

/* ── Fußbereich ─────────────────────────────────────────────── */
.fussbereich{
  margin-top:56px;padding:26px 0 8px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
}
.fussbereich .marke{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--faint)}
.fussbereich .marke img{height:19px;width:auto;opacity:.72}
.fussbereich nav{display:flex;gap:22px;flex-wrap:wrap}
.fussbereich a{color:var(--mut);text-decoration:none;font-size:13px}
.fussbereich a:hover{color:var(--terra-d)}

a{color:var(--terra-d)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--terra-d)}