/* ============================================================================
   hubfox.de — nachgebaute Tool-Oberflächen
   Vollständig in HTML und CSS: bleibt bei jeder Auflösung scharf, enthält keine
   echten Daten und lässt sich ändern, ohne neue Screenshots zu machen.
   ========================================================================= */

.app{
  border:1px solid var(--linie-stark); border-radius:14px; overflow:hidden;
  background:var(--flaeche); box-shadow:var(--hebung);
  font-size:12.5px; line-height:1.45; color:var(--text);
  container-type:inline-size;
}
.app *{box-sizing:border-box}

/* Fensterleiste */
.app-leiste{display:flex; align-items:center; gap:9px; padding:9px 13px;
  border-bottom:1px solid var(--linie); background:var(--flaeche-2)}
.app-leiste i{width:9px; height:9px; border-radius:50%; background:var(--erhaben); display:block; flex:0 0 auto}
.app-leiste i:nth-child(1){background:#f9645d} .app-leiste i:nth-child(2){background:#f8bd4f}
.app-leiste i:nth-child(3){background:#4fc56e}
.app-leiste .adresse{margin-left:10px; font-family:var(--mono); font-size:10.5px; color:var(--text-3);
  background:var(--grund); border:1px solid var(--linie); border-radius:6px; padding:2.5px 9px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Gerüst: Seitenleiste plus Inhalt */
.app-koerper{display:grid; grid-template-columns:168px 1fr; min-height:0}
.app-koerper.ohne-seite{grid-template-columns:1fr}
.seite{border-right:1px solid var(--linie); padding:14px 11px; background:var(--grund-2)}
.seite-marke{display:flex; align-items:center; gap:8px; padding:0 4px 14px; font-weight:600; font-size:13px}
.seite-marke .punkt{width:19px; height:19px; border-radius:6px; flex:0 0 auto;
  background:linear-gradient(135deg, var(--akzent-hell), var(--akzent-tief))}
.seite-gruppe{font-family:var(--mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-3); padding:12px 5px 6px}
.seite a, .seite .eintrag{display:flex; align-items:center; gap:8px; padding:5.5px 7px; border-radius:6px;
  color:var(--text-2); font-size:12px}
.seite .eintrag.aktiv{background:var(--erhaben); color:var(--text); font-weight:550}
.seite .eintrag .zahl{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--text-3)}
.seite .eintrag svg{width:13px; height:13px; opacity:.85; flex:0 0 auto}

.inhalt{padding:16px 18px; min-width:0}
.kopfreihe{display:flex; align-items:flex-start; gap:12px; margin-bottom:15px}
.kopfreihe h4{font-size:15px; font-weight:600; letter-spacing:-.02em}
.kopfreihe .unter{color:var(--text-3); font-size:11.5px; margin-top:2px}
.kopfreihe .rechts{margin-left:auto; display:flex; gap:6px; flex:0 0 auto}
.mini-knopf{font-size:11px; padding:4px 9px; border-radius:6px; border:1px solid var(--linie);
  background:var(--flaeche); color:var(--text-2)}
.mini-knopf.voll{background:var(--akzent); border-color:transparent; color:#fff}

/* Kennzahlen */
.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px}
.kpi > div{border:1px solid var(--linie); border-radius:9px; padding:10px 11px; background:var(--grund-2)}
.kpi .wert{font-size:19px; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi .bez{font-size:10.5px; color:var(--text-3); margin-top:1px}
.kpi .trend{font-size:10px; margin-top:5px; color:var(--gruen); font-family:var(--mono)}
.kpi .trend.runter{color:var(--rot)}
@container (max-width: 560px){ .kpi{grid-template-columns:repeat(2,1fr)} }

/* Tabelle */
.tab{border:1px solid var(--linie); border-radius:9px; overflow:hidden; background:var(--grund-2)}
.tab-kopf, .tab-zeile{display:grid; gap:10px; padding:8px 12px; align-items:center}
.tab-kopf{font-family:var(--mono); font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--linie); background:var(--flaeche-2)}
.tab-zeile{border-bottom:1px solid var(--linie); font-size:11.5px}
.tab-zeile:last-child{border-bottom:0}
.tab-zeile:hover{background:var(--flaeche-2)}
.tab .haupt{font-weight:550; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tab .neben{color:var(--text-3); font-size:10.5px}
.zahlen-rechts{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:11px}

/* Statusmarken */
.marke{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:550;
  padding:2px 7px; border-radius:999px; border:1px solid transparent; white-space:nowrap}
.marke i{width:5.5px; height:5.5px; border-radius:50%; display:block}
.marke.gruen{color:#7ee094; background:rgba(63,185,80,.12); border-color:rgba(63,185,80,.28)}
.marke.gruen i{background:var(--gruen)}
.marke.gelb{color:#f0cd6d; background:rgba(210,153,34,.13); border-color:rgba(210,153,34,.3)}
.marke.gelb i{background:var(--gelb)}
.marke.rot{color:#ff9d97; background:rgba(248,81,73,.13); border-color:rgba(248,81,73,.3)}
.marke.rot i{background:var(--rot)}
.marke.grau{color:var(--text-3); background:var(--erhaben); border-color:var(--linie)}
.marke.grau i{background:var(--text-3)}
html[data-theme="light"] .marke.gruen{color:#136c2a} html[data-theme="light"] .marke.gelb{color:#8a5b00}
html[data-theme="light"] .marke.rot{color:#a52019}

/* Balkendiagramm */
.balken{display:flex; align-items:flex-end; gap:5px; height:92px; padding:10px 12px;
  border:1px solid var(--linie); border-radius:9px; background:var(--grund-2)}
.balken div{flex:1; border-radius:3px 3px 1px 1px; background:var(--erhaben); position:relative}
.balken div.hoch{background:linear-gradient(180deg, var(--akzent-hell), var(--akzent-tief))}
.balken div.plan{background:repeating-linear-gradient(45deg, var(--erhaben), var(--erhaben) 3px, transparent 3px, transparent 6px);
  border:1px solid var(--linie)}

/* Verlaufslinie */
.linie-karte{border:1px solid var(--linie); border-radius:9px; background:var(--grund-2); padding:11px 12px}
.linie-karte svg{width:100%; height:74px; display:block; overflow:visible}

/* Zeitstrahl */
.strahl{display:grid; gap:0; border:1px solid var(--linie); border-radius:9px;
  background:var(--grund-2); overflow:hidden}
.strahl > div{display:grid; grid-template-columns:15px 1fr auto; gap:10px; padding:9px 12px;
  border-bottom:1px solid var(--linie); font-size:11.5px; align-items:start}
.strahl > div:last-child{border-bottom:0}
.strahl .punkt{width:8px; height:8px; border-radius:50%; margin-top:4px;
  background:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent)}
.strahl .punkt.fertig{background:var(--gruen); box-shadow:0 0 0 3px rgba(63,185,80,.18)}
.strahl .zeit{font-family:var(--mono); font-size:10px; color:var(--text-3); white-space:nowrap}

/* Telefon */
.telefon{width:236px; border:1px solid var(--linie-stark); border-radius:26px; padding:8px;
  background:var(--flaeche-2); box-shadow:var(--hebung); margin:0 auto}
.telefon-schirm{border-radius:20px; overflow:hidden; background:var(--grund); border:1px solid var(--linie)}
.telefon-kopf{display:flex; align-items:center; justify-content:space-between; padding:7px 13px 5px;
  font-family:var(--mono); font-size:9.5px; color:var(--text-3)}
.telefon-inhalt{padding:11px 13px 15px}
.telefon .titel{font-size:14px; font-weight:600; letter-spacing:-.02em; margin-bottom:3px}
.telefon .unter{font-size:10.5px; color:var(--text-3); margin-bottom:11px}
.feld{border:1px solid var(--linie); border-radius:8px; padding:7px 9px; margin-bottom:7px; background:var(--flaeche)}
.feld .beschriftung{font-size:9px; font-family:var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-3)}
.feld .eingabe{font-size:12px; margin-top:2px}
.gross-knopf{display:block; text-align:center; background:var(--akzent); color:#fff; font-weight:600;
  font-size:12.5px; padding:10px; border-radius:9px; margin-top:11px}
.offline{display:flex; align-items:center; gap:6px; font-size:10px; color:var(--gelb);
  background:rgba(210,153,34,.12); border:1px solid rgba(210,153,34,.28);
  border-radius:7px; padding:5px 8px; margin-bottom:10px}
.unterschrift{border:1px dashed var(--linie-stark); border-radius:8px; height:52px; margin-top:7px;
  position:relative; overflow:hidden}
.unterschrift svg{position:absolute; inset:0; width:100%; height:100%}

/* Kiosk / QR */
.kiosk{text-align:center; padding:22px 18px}
.kiosk .qr{width:104px; height:104px; margin:0 auto 14px; border-radius:12px; padding:9px;
  background:#fff; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(7,1fr); gap:2px}
.kiosk .qr span{background:#0b0d12; border-radius:1px}
.kiosk .qr span.leer{background:transparent}
.kiosk .gross{font-size:17px; font-weight:650; letter-spacing:-.03em}
.kiosk .klein{font-size:11px; color:var(--text-3); margin-top:3px}

/* Vergleichsband (zwei Spalten mit Werten) */
.band{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.band > div{border:1px solid var(--linie); border-radius:9px; padding:11px 12px; background:var(--grund-2)}
.band .titel{font-size:10.5px; color:var(--text-3); font-family:var(--mono);
  letter-spacing:.06em; text-transform:uppercase}
.band .wert{font-size:17px; font-weight:650; margin-top:5px; letter-spacing:-.03em; font-variant-numeric:tabular-nums}

/* Kleinere Mockups in Bento-Karten */
.mini-app{margin-top:20px; border:1px solid var(--linie); border-radius:11px; overflow:hidden;
  background:var(--grund-2)}
.mini-app .zeile{display:flex; align-items:center; gap:8px; padding:7px 11px;
  border-bottom:1px solid var(--linie); font-size:11px}
.mini-app .zeile:last-child{border-bottom:0}
.mini-app .zeile .name{color:var(--text); font-weight:550}
.mini-app .zeile .rest{margin-left:auto}

/* Tastenkürzel */
kbd{font-family:var(--mono); font-size:10px; border:1px solid var(--linie-stark);
  border-bottom-width:2px; border-radius:5px; padding:1px 5px; background:var(--erhaben); color:var(--text-2)}


/* ---------- Echte Aufnahmen im Fensterrahmen ----------
   Die Bilder zeigen eigene Produkte mit Demodaten; Kundennamen kommen darin nicht vor. */
.app.foto{padding:0}
.app.foto .bild{display:block; width:100%; height:auto; border-top:1px solid var(--linie)}
html[data-theme="light"] .app.foto .bild{border-top-color:rgba(10,12,20,.10)}
/* Helle Aufnahmen auf dunklem Grund: Kanten leicht beruhigen */
.app.foto{background:#fff}
.bildnote{margin-top:10px; font-family:var(--mono); font-size:.68rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-3); text-align:center}

/* Telefon mit echter Aufnahme */
.telefon.foto .telefon-schirm{background:#fff}
.telefon.foto .bild{display:block; width:100%; height:auto}

/* Auf Telefonen bleiben die Oberflächen lesbar und werden seitlich gewischt,
   statt auf unlesbare Spaltenbreiten gequetscht zu werden. */
@media (max-width:760px){
  .app{font-size:11.5px}
  .app-koerper .seite{display:none}
  .app-koerper{grid-template-columns:1fr}
  .inhalt{padding:13px 14px}

  .f-bild, .buehne-in{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; padding-bottom:6px}
  .f-bild .app, .buehne-in .app{min-width:560px}
  .f-bild{display:block !important}
  .f-bild .telefon{margin:0 auto 18px}
  .f-bild > .app + .app{margin-top:16px}
}
@media (max-width:420px){
  .f-bild .app, .buehne-in .app{min-width:500px}
}