:root {
  --bik-tuerkis: #3abddc;
  --bik-tuerkis-dunkel: #2a9bb8;
  --bik-tuerkis-hell: #eaf9fc;
  --bik-dunkelgrau: #4a4a4a;
  --bik-grau: #757575;
  --bik-hellgrau: #e2e2e2;
  --bik-orange: #f9b200;
  --bik-rot: #c00000;
  --bik-gruen: #1a8a4a;
  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(0,0,0,.06);
  --schatten-hover: 0 2px 4px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.09);
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif;
  background: #f4f5f6;
  color: var(--bik-dunkelgrau);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--bik-dunkelgrau); font-weight: 700; line-height: 1.3; }
h2 { font-size: 21px; margin: 4px 0 14px; }
a { color: var(--bik-tuerkis-dunkel); text-decoration: none; }
a:hover { text-decoration: underline; }

.bik-header {
  background: #fff;
  border-bottom: 1px solid var(--bik-hellgrau);
  padding: 14px clamp(14px, 4vw, 28px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.bik-logo { font-family: Tahoma, sans-serif; font-weight: 800; font-size: 22px; color: var(--bik-dunkelgrau); letter-spacing: .2px; }
.bik-logo span { color: var(--bik-tuerkis); }

.bik-header-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bik-demo-form { display: inline-flex; }
.bik-demo-feld { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bik-grau); white-space: nowrap; }
.bik-demo-feld input[type="date"], .bik-demo-feld select { font-size: 11px; border: 1px solid var(--bik-hellgrau); border-radius: 4px; padding: 3px 4px; color: var(--bik-dunkelgrau); }
.bik-sync-btn { background: #fff8e6; color: var(--bik-orange); border: 1px solid var(--bik-orange); font-weight: 600; font-size: 11px; padding: 5px 9px; }
@media (max-width: 900px) { .bik-header-controls { display: none; } }

.bik-nav { display: flex; gap: 2px; padding: 10px clamp(14px, 4vw, 28px) 0; background: #fafbfb; border-bottom: 1px solid var(--bik-hellgrau); overflow-x: auto; }
.bik-nav a { padding: 9px 16px; font-size: 14px; font-weight: 600; color: var(--bik-grau); border-bottom: 3px solid transparent; white-space: nowrap; border-radius: 6px 6px 0 0; transition: background .15s, color .15s; }
.bik-nav a:hover { background: #f0f2f2; text-decoration: none; }
.bik-nav a.aktiv { color: var(--bik-tuerkis-dunkel); border-bottom-color: var(--bik-tuerkis); background: #fff; }

.bik-content { padding: clamp(14px, 4vw, 28px); max-width: 1100px; margin: 0 auto; width: 100%; }

.karte {
  background: #fff;
  border: 1px solid var(--bik-hellgrau);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--schatten);
  max-width: 100%;
}
.kachel { background: linear-gradient(135deg, var(--bik-tuerkis) 0%, var(--bik-tuerkis-dunkel) 100%); color: #fff; border-radius: 10px; padding: 20px; margin-bottom: 18px; display: flex; gap: 32px; flex-wrap: wrap; box-shadow: var(--schatten); }
.kachel .wert { font-size: 23px; font-weight: 700; }
.kachel .label { font-size: 11px; opacity: .85; letter-spacing: .2px; text-transform: uppercase; }

.badge { display: inline-block; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.badge-grau { background: #f0f1f1; color: #767676; }
.badge-tuerkis { background: var(--bik-tuerkis-hell); color: var(--bik-tuerkis-dunkel); }
.badge-rot { background: #fde8e8; color: var(--bik-rot); }
.badge-gruen { background: #eafaf0; color: var(--bik-gruen); }
.badge-orange { background: #fff8e6; color: var(--bik-orange); }

.btn {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 6px;
  font-size: 13px; font-weight: 600; border: 1px solid var(--bik-hellgrau); background: #fff;
  color: var(--bik-dunkelgrau); cursor: pointer; text-decoration: none; transition: all .15s;
}
.btn:hover { border-color: #bbb; background: #fafafa; text-decoration: none; }
.btn-primary { background: var(--bik-tuerkis); color: #fff; border-color: var(--bik-tuerkis); }
.btn-primary:hover { background: var(--bik-tuerkis-dunkel); border-color: var(--bik-tuerkis-dunkel); }
.btn-gefahr { border-color: var(--bik-rot); color: var(--bik-rot); }
.btn-gefahr:hover { background: #fde8e8; }

.formfeld { margin-bottom: 14px; }
.formfeld label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: var(--bik-grau); }
.formfeld input, .formfeld select, .formfeld textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--bik-hellgrau); border-radius: 6px;
  font-size: 14px; font-family: inherit; background: #fff; transition: border-color .15s, box-shadow .15s;
}
.formfeld input:focus, .formfeld select:focus, .formfeld textarea:focus {
  outline: none; border-color: var(--bik-tuerkis); box-shadow: 0 0 0 3px rgba(58,189,220,.15);
}

.tabelle-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 14px; }
th { background: var(--bik-tuerkis); color: #fff; text-align: left; padding: 8px 10px; font-weight: 600; }
th:first-child { border-radius: 6px 0 0 0; }
th:last-child { border-radius: 0 6px 0 0; }
td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
tr:last-child td { border-bottom: none; }

.ampel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; flex-shrink: 0; }
.ampel-rot { background: var(--bik-rot); }
.ampel-gelb { background: var(--bik-orange); }
.ampel-gruen { background: var(--bik-gruen); }

.fehler { background: #fde8e8; color: var(--bik-rot); padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; border: 1px solid #f4c6c6; }
.hinweis { background: var(--bik-tuerkis-hell); color: var(--bik-tuerkis-dunkel); padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Kompakte Referenztabelle (_bauteiltyp_referenz.php) - eigene, dichtere
   Abstufung statt der generischen table-Regeln, die fuer breite Datentabellen
   ausgelegt sind und hier unnoetig viel Zeilenhoehe erzeugen. */
.tabelle-referenz {
  font-size: 12.5px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px #eee;
  /* fixed statt auto: haelt die Tabelle IMMER innerhalb von width:100% (auch
     im schmalen .karte-Formular), statt bei langen, kaum umbrechbaren
     Begriffen (z.B. "Schraubverbindungen/Verschraubungen,") ueber den
     Container hinauszuwachsen. */
  table-layout: fixed; min-width: 0;
}
.tabelle-referenz th { padding: 7px 10px; font-size: 12px; }
.tabelle-referenz td {
  padding: 6px 10px; line-height: 1.45; border-bottom: 1px solid #f2f2f2;
  /* hyphens:auto bricht bei Bedarf silbengerecht (Duden-Trennung) statt wie
     word-break:break-word stur an der Zeichengrenze - wichtig bei langen
     deutschen Komposita wie "Verdichterdichtungen" in der schmalen Spalte. */
  hyphens: auto; overflow-wrap: break-word;
}
.tabelle-referenz td:first-child { font-weight: 600; color: var(--bik-dunkelgrau); }
.tabelle-referenz tbody tr:nth-child(odd) { background: #fafbfb; }
.tabelle-referenz tbody tr:last-child td { border-bottom: none; }

@media (max-width: 640px) {
  .karte { padding: 16px; border-radius: 8px; }
  h2 { font-size: 18px; }
}