/* =====================================================================
   SIEBEN BERGE - gemeinsames Design fuer alle Seiten des Systems
   ===================================================================== */

:root{
  /* Hausfarben, aus der Website ausgelesen */
  --oliv:        #485249;   /* Kopfbalken, wie auf sieben-berge.de */
  --oliv-hell:   #556052;   /* Hover in der Kopfzeile */
  --gold:        #e1c375;   /* Logo-Gold, Akzent */
  --gold-dunkel: #a9822f;   /* Gold auf hellem Grund, lesbar */
  --creme:       #fdf2e6;   /* Schrift auf dunklem Grund */

  --papier:      #f6f3ee;   /* Seitenhintergrund */
  --karte:       #ffffff;
  --tinte:       #1c1f1b;
  --grau:        #6a6f68;
  --linie:       #e0ddd4;

  --schwarz:     #22261f;   /* Knöpfe */
  --schwarz-2:   #2f342c;

  --gruen:       #3f6b45;   /* Erfolgsmeldungen */
  --rot:         #a33227;   /* Minusbestände, Fehler */
  --warnung:     #fbf1d8;
  --warnung-txt: #6b5312;

  --radius:      12px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  font-family:var(--schrift);
  color:var(--tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Kopfzeile und Menue ---------- */
.sb-kopf{
  background:var(--oliv);
  color:var(--creme);
  border-bottom:3px solid var(--gold);
}
.sb-kopf-innen{
  max-width:1060px; margin:auto; padding:12px 18px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.sb-marke{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--creme) }
.sb-marke img{ height:36px; width:auto; display:block }
.sb-marke .sb-wort{ font-weight:800; font-size:16px; letter-spacing:.04em }
.sb-marke .sb-zusatz{ display:block; font-weight:400; font-size:11px; color:var(--gold); letter-spacing:.08em; text-transform:uppercase }

.sb-menu{ display:flex; gap:2px; flex-wrap:wrap; margin-left:auto; align-items:center }

/* Eine Gruppe im Menue */
.sb-grp{ position:relative }
.sb-grp summary{
  list-style:none; cursor:pointer; user-select:none;
  color:#d8d3c4; font-size:14px; padding:8px 13px; border-radius:9px;
  white-space:nowrap; display:block;
}
.sb-grp summary::-webkit-details-marker{ display:none }
.sb-grp summary::after{ content:" ▾"; opacity:.55; font-size:11px }
.sb-grp summary:hover{ background:var(--oliv-hell); color:var(--creme) }
.sb-grp.an summary{ background:var(--gold); color:#3b2f0f; font-weight:700 }
.sb-grp.an summary:hover{ background:#ecd28c }
.sb-grp[open] summary{ background:var(--oliv-hell); color:var(--creme) }
.sb-grp.an[open] summary{ background:var(--gold); color:#3b2f0f }

/* Das aufgeklappte Untermenue */
.sb-sub{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  background:var(--karte); border:1px solid var(--linie);
  border-radius:11px; padding:6px; min-width:232px;
  box-shadow:0 6px 22px rgba(0,0,0,.16);
}
.sb-sub a{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:8px;
  color:var(--tinte); text-decoration:none; font-size:14px; white-space:nowrap;
}
.sb-sub a:hover{ background:var(--papier) }
.sb-sub a.hier{ background:var(--papier); font-weight:700 }
.sb-sub .schloss{
  margin-left:auto; font-size:10px; letter-spacing:.05em;
  color:var(--gold-dunkel); font-weight:700; text-transform:uppercase;
}

/* Auf schmalen Bildschirmen klappt das Untermenue in die Breite */
@media (max-width:640px){
  .sb-kopf-innen{ gap:10px }
  .sb-menu{ width:100%; margin-left:0 }
  .sb-grp{ position:static; flex:1 1 auto }
  .sb-grp summary{ text-align:center; padding:9px 8px; font-size:13.5px }
  .sb-sub{ position:static; margin-top:6px; min-width:0; box-shadow:none }
}

/* ---------- Grundgeruest ---------- */
.wrap{ max-width:1060px; margin:auto; padding:20px 18px 40px }
.brand{ font-size:22px; font-weight:800; letter-spacing:-.01em }
.muted{ color:var(--grau); font-size:14px }

.card{
  background:var(--karte);
  border:1px solid var(--linie);
  border-radius:var(--radius);
  padding:18px;
  margin:14px 0;
}
h1{ font-size:24px; margin:0 0 6px }
h2{ font-size:17px; margin:0 0 4px }
h3{ font-size:15px; margin:0 0 8px }

.hint{
  background:var(--warnung); color:var(--warnung-txt);
  padding:11px 13px; border-radius:10px; font-size:14px; margin:10px 0;
}
.ok{ color:var(--gruen); font-weight:700 }
.err{ color:var(--rot); font-weight:700 }
.neg{ color:var(--rot); font-weight:700 }

/* ---------- Bedienelemente ---------- */
.btn{
  border:0; border-radius:10px; padding:12px 16px;
  background:var(--schwarz); color:var(--creme);
  font-size:15px; font-weight:700; font-family:inherit;
  text-decoration:none; display:inline-block; cursor:pointer;
}
.btn:hover{ background:var(--schwarz-2) }
.btn.grau{ background:#e6e3dd; color:var(--tinte); font-weight:400 }
.btn.grau:hover{ background:#dbd7cf }
.btn.klein{ padding:8px 12px; font-size:13px }

input, select, textarea{
  padding:10px; border:1px solid #ccc7bf; border-radius:9px;
  font-size:16px; font-family:inherit; width:100%; background:#fff; color:var(--tinte);
}
input:focus, select:focus{ outline:2px solid var(--gold-dunkel); outline-offset:1px; border-color:transparent }
input.klein{ width:110px; text-align:right }
label{ display:block; font-size:13px; color:var(--grau); margin-bottom:4px }

.reihe{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:12px }

/* ---------- Tabellen ---------- */
table{ width:100%; border-collapse:collapse; font-size:14px }
th,td{ padding:8px 6px; border-bottom:1px solid #efedE8; text-align:left }
thead th{ font-size:12px; color:var(--grau); border-bottom:2px solid #b9b3a8; font-weight:700 }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums }
tfoot td{ font-weight:800; border-top:2px solid #b9b3a8; border-bottom:0 }

/* ---------- Startseite ---------- */
.kacheln{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px }
.kachel{
  display:block; text-decoration:none; color:inherit;
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--radius); padding:18px;
  transition:border-color .12s, transform .12s;
}
.kachel:hover{ border-color:var(--gold-dunkel); transform:translateY(-1px) }
.kachel .kt{ font-weight:800; font-size:16px; margin-bottom:4px }
.kachel .kb{ color:var(--grau); font-size:13.5px; line-height:1.45 }
.kachel .schloss{ float:right; font-size:11px; color:var(--gold-dunkel); font-weight:700; letter-spacing:.04em }
.gruppe{ font-size:13px; font-weight:700; color:var(--grau);
         text-transform:uppercase; letter-spacing:.09em; margin:26px 0 10px }

/* ---------- Drucken ---------- */
@media print{
  body{ background:#fff }
  .sb-kopf, .noprint{ display:none !important }
  .wrap{ max-width:none; padding:0 }
  .card{ border:0; border-radius:0; padding:0; margin:0 0 20px; break-inside:avoid }
  thead{ display:table-header-group }
  tr{ break-inside:avoid }
  @page{ margin:14mm }
}