/* ============================================================
   Enoxo Sites — v6 · Flaechen fuer Dashboard und Demo
   Baut auf enoxo-sites-v6.css auf. Gleiche Hausregeln:
   keine radialen Verlaeufe, kein 3D, kein Glow, radius <= 3px.
   ============================================================ */

/* ══════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════ */
.db-body{background:var(--papier)}
.db-wrap{max-width:1180px;margin:0 auto;padding:28px 24px 90px}
@media (min-width:1100px){ .db-wrap{padding-left:calc(var(--rail) + 28px)} }

/* ── Anmeldung ── */
.db-login{max-width:390px;margin:72px auto}
.db-login-kopf{
  padding:16px 20px;border:1px solid var(--kante);border-bottom:none;
  background:var(--durchschlag);border-radius:var(--r) var(--r) 0 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.db-login-kopf span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-2)}
.db-login-leib{
  background:var(--blatt);border:1px solid var(--kante);border-radius:0 0 var(--r) var(--r);
  padding:22px;box-shadow:var(--druck-tief);
}

/* ── Kopfleiste ── */
.db-kopf{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:16px;border-bottom:2px solid var(--tinte);margin-bottom:0;flex-wrap:wrap;
}
.db-kopf h1{font-size:clamp(24px,3vw,32px)}
.db-kopf-meta{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3);margin-top:6px}

/* ── Kennzahlen: Formularfelder, keine Kacheln ── */
.db-zahlen{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--kante);margin-bottom:26px;
}
.db-zahl{padding:18px 20px 18px 0;border-right:1px solid var(--kante)}
.db-zahl:last-child{border-right:none}
.db-zahl-w{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:30px;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums;
}
.db-zahl-w.db-ist-akut{color:var(--kupfer)}
.db-zahl-l{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3);margin-top:7px}
@media (max-width:820px){ .db-zahlen{grid-template-columns:repeat(2,1fr)} .db-zahl{border-bottom:1px solid var(--kante)} }
@media (max-width:460px){ .db-zahlen{grid-template-columns:1fr} .db-zahl{border-right:none} }

/* ── Filterleiste ── */
.db-filter{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.db-filter .es-input,.db-filter .es-select{width:auto;padding:9px 12px;font-size:14.5px}
.db-suche{flex:1;min-width:190px}
.db-tabs{display:flex;border:1px solid var(--kante);border-radius:var(--r);overflow:hidden;background:var(--blatt)}
.db-tab{
  border:none;background:transparent;cursor:pointer;padding:9px 16px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-3);
  border-right:1px solid var(--kante);
}
.db-tab:last-child{border-right:none}
.db-tab:hover{background:var(--durchschlag);color:var(--tinte)}
.db-tab.db-ist-an{background:var(--tinte);color:var(--blatt)}

/* ── Anfrageliste ── */
.db-liste{border-top:1px solid var(--kante)}
.db-anf{border-bottom:1px solid var(--kante);background:var(--blatt)}
.db-anf.db-ist-neu{border-left:3px solid var(--kupfer)}
.db-anf.db-ist-neu .db-anf-kopf{padding-left:15px}
.db-anf-kopf{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;
  padding:15px 18px;cursor:pointer;width:100%;text-align:left;
  background:transparent;border:none;font:inherit;color:inherit;
}
.db-anf-kopf:hover{background:var(--durchschlag)}
.db-anf-t{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.db-anf-s{font-size:13px;color:var(--tinte-3);margin-top:3px}
.db-anf-d{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tinte-4);white-space:nowrap;text-align:right}
.db-anf-marke{
  display:inline-block;margin-left:9px;padding:1px 7px;border:1px solid var(--kupfer);
  border-radius:var(--r);font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--kupfer);vertical-align:1px;
}
.db-anf-leib{display:none;padding:0 18px 18px;border-top:1px dotted var(--kante)}
.db-anf.db-ist-offen .db-anf-leib{display:block}
.db-anf-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:14px 0;border-top:1px solid var(--kante)}
.db-anf-zeile{padding:9px 0;border-bottom:1px solid var(--kante);padding-right:16px}
.db-anf-zeile dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-3)}
.db-anf-zeile dd{margin:4px 0 0;font-size:15px}
@media (max-width:620px){ .db-anf-raster{grid-template-columns:1fr} }
.db-anf-text{
  white-space:pre-wrap;background:var(--papier);border-left:3px solid var(--blau);
  padding:13px 15px;margin:12px 0;font-size:15px;line-height:1.6;
}
.db-anf-cfg{
  white-space:pre-wrap;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  line-height:1.7;color:var(--tinte-2);background:var(--durchschlag);
  padding:13px 15px;margin:12px 0;border-radius:var(--r);max-height:260px;overflow:auto;
}
.db-anf-akt{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.db-btn-loesch{background:#F7E4E1;color:var(--rot);border-color:#E0BDB8}
.db-btn-loesch:hover{background:#F0D4CF;border-color:var(--rot)}
.db-leer{padding:52px 24px;text-align:center;color:var(--tinte-3);background:var(--blatt);border-bottom:1px solid var(--kante)}
.db-leer strong{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:19px;color:var(--tinte);margin-bottom:6px}

/* ══════════════════════════════════════════════════════
   DEMO / BAUKASTEN
   ══════════════════════════════════════════════════════ */
.bk-gitter{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:34px;align-items:start}
@media (max-width:1020px){ .bk-gitter{grid-template-columns:1fr} }

.bk-steuer{display:flex;flex-direction:column;gap:26px}
.bk-block{border-top:1px solid var(--kante);padding-top:16px}
.bk-block-t{
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-3);margin-bottom:14px;
  display:flex;justify-content:space-between;gap:12px;
}
.bk-block-t b{color:var(--kupfer);font-weight:500}

.bk-chips{display:flex;flex-wrap:wrap;gap:8px}
.bk-chip{
  border:1px solid var(--kante);background:var(--blatt);border-radius:var(--r);
  padding:7px 13px;font-family:'Exo 2',sans-serif;font-size:13.5px;font-weight:600;
  color:var(--tinte-2);cursor:pointer;transition:all .13s ease;
}
.bk-chip:hover{border-color:var(--tinte-3);color:var(--tinte)}
.bk-chip.bk-ist-an{background:var(--tinte);border-color:var(--tinte);color:var(--blatt)}

/* ── Vorschau: ein Blatt auf dem Tisch ── */
.bk-buehne{position:sticky;top:84px}
.bk-rahmen{
  background:var(--blatt);border:1px solid var(--kante);border-radius:var(--r);
  box-shadow:var(--druck-tief);overflow:hidden;
}
.bk-leiste{
  display:flex;align-items:center;gap:9px;padding:10px 14px;
  background:var(--durchschlag);border-bottom:1px solid var(--kante);
}
.bk-punkt{width:9px;height:9px;border-radius:50%;background:var(--kante)} /* kreis-ok */
.bk-adresse{
  flex:1;margin-left:6px;background:var(--blatt);border:1px solid var(--kante);
  border-radius:var(--r);padding:4px 10px;font-family:'JetBrains Mono',monospace;
  font-size:10.5px;color:var(--tinte-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-seite{height:min(72vh,620px);overflow-y:auto;background:#fff}

/* Innenleben der Vorschau — eigene Skala, damit es wie eine Seite wirkt */
.bk-p-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid #E6E2DA}
.bk-p-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:15px;letter-spacing:-.02em}
.bk-p-nav{display:flex;gap:14px;font-size:10.5px;color:#6E7D82;font-weight:600}
.bk-p-hero{padding:34px 20px 30px;border-bottom:1px solid #E6E2DA}
.bk-p-claim{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.028em;margin-bottom:10px;text-wrap:balance}
.bk-p-sub{font-size:13.5px;color:#3B4F55;max-width:46ch}
.bk-p-akt{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.bk-p-btn{padding:9px 16px;border-radius:3px;font-size:12.5px;font-weight:700}
.bk-p-btn--1{color:#fff}
.bk-p-btn--2{background:#fff;border:1.5px solid #C6BCA6;color:#16292F}
.bk-p-not{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:6px 12px;
  border:1.5px solid;border-radius:3px;font-family:'JetBrains Mono',monospace;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
}
.bk-p-sec{padding:26px 20px;border-bottom:1px solid #E6E2DA}
.bk-p-h{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:16px;margin-bottom:14px;letter-spacing:-.02em}
.bk-p-leist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:520px){ .bk-p-leist{grid-template-columns:repeat(2,1fr)} }
.bk-p-l{border:1px solid #E6E2DA;border-radius:3px;padding:11px 12px;font-size:12px;font-weight:600;background:#FCFBF8}
.bk-p-l span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;margin-bottom:5px;letter-spacing:.1em}
.bk-p-ref{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (max-width:520px){ .bk-p-ref{grid-template-columns:1fr} }
.bk-p-r{border:1px solid #E6E2DA;border-radius:3px;overflow:hidden;background:#FCFBF8}
.bk-p-r-bild{height:62px;border-bottom:1px solid #E6E2DA}
.bk-p-r-t{padding:9px 10px;font-size:11.5px;font-weight:600;line-height:1.35}
.bk-p-faq{border-top:1px solid #E6E2DA;padding:12px 0;font-size:12.5px}
.bk-p-faq b{display:block;margin-bottom:4px;font-size:13px}
.bk-p-faq span{color:#6E7D82}
.bk-p-fuss{padding:16px 20px;font-size:10.5px;color:#6E7D82;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;background:#FCFBF8}

/* ── Zusammenfassung unter der Vorschau ── */
.bk-summe{margin-top:18px;background:var(--blatt);border:1px solid var(--kante);border-radius:var(--r);box-shadow:var(--druck)}
.bk-summe-kopf{padding:12px 16px;background:var(--durchschlag);border-bottom:1px solid var(--kante);display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.bk-summe-kopf span{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte-2)}
.bk-summe-leib{padding:14px 16px}
.bk-summe-akt{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.bk-kopie{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.7;
  white-space:pre-wrap;background:var(--durchschlag);border-radius:var(--r);
  padding:13px 15px;margin-top:14px;max-height:220px;overflow:auto;color:var(--tinte-2);
}

/* ══════════════════════════════════════════════════════════════
   HANDY — Demo und Dashboard
   ══════════════════════════════════════════════════════════════ */
@media (max-width:860px){

  /* ── DEMO ──────────────────────────────────────────────────
     Die Vorschau klebte per sticky unter der Kopfzeile. Auf einer
     Spalte heisst das: sie verdeckt beim Scrollen die Bedienung,
     die man gerade benutzt. Also loesen und nach oben holen —
     man will sehen, was die eigene Eingabe bewirkt. */
  .bk-buehne{position:static;top:auto;order:-1;margin-bottom:26px}
  .bk-gitter{gap:24px}
  .bk-seite{height:56vh;min-height:320px}
  .bk-leiste{padding:8px 11px}
  .bk-adresse{font-size:10px}

  .bk-block{padding-top:14px}
  .bk-block-t{font-size:11px;letter-spacing:.14em}
  .bk-chip{padding:10px 14px;font-size:14px;min-height:42px}
  .bk-chips{gap:7px}

  .bk-summe-akt{flex-direction:column}
  .bk-summe-akt .es-btn{width:100%}
  .bk-kopie{font-size:12px}

  /* Vorschau-Innenleben: bei 390 px sind drei Spalten je 100 px breit */
  .bk-p-leist{grid-template-columns:repeat(2,1fr)}
  .bk-p-ref{grid-template-columns:repeat(2,1fr)}
  .bk-p-claim{font-size:22px}
  .bk-p-hero{padding:26px 16px 24px}
  .bk-p-sec{padding:20px 16px}

  /* ── DASHBOARD ─────────────────────────────────────────── */
  .db-wrap{padding:20px 18px 70px}
  .db-kopf{padding-bottom:14px}
  .db-kopf h1{font-size:26px}

  .db-zahl{padding:14px 14px 14px 0}
  .db-zahl-w{font-size:25px}

  /* Filterleiste: Tabs zuerst voll breit, dann Suche, dann Auswahl */
  .db-filter{flex-direction:column;align-items:stretch;gap:9px}
  .db-tabs{width:100%}
  .db-tab{flex:1;padding:11px 8px;min-height:44px}
  .db-filter .es-input,.db-filter .es-select{width:100%;font-size:16px;min-height:44px}

  /* Anfragezeile: Datum unter den Titel statt daneben */
  .db-anf-kopf{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .db-anf-d{text-align:left}
  .db-anf.db-ist-neu .db-anf-kopf{padding-left:13px}
  .db-anf-leib{padding:0 16px 16px}
  .db-anf-akt{flex-direction:column}
  .db-anf-akt .es-btn{width:100%}
  .db-anf-cfg{font-size:11px;max-height:200px}

  .db-login{margin:36px auto;max-width:none}
  .db-login-leib{padding:18px}
}

@supports (padding:max(0px)){
  @media (max-width:860px){
    .db-wrap{
      padding-left:max(18px, env(safe-area-inset-left));
      padding-right:max(18px, env(safe-area-inset-right));
      padding-bottom:max(70px, calc(env(safe-area-inset-bottom) + 50px));
    }
  }
}