/* =============================================================================
RWD Analysetool – mobile.css
Mobile-Optimierung für Smartphone-/Tablet-Nutzung (Chef-Ansicht unterwegs).
Geladen via NACH app.css — d.h. ALLE
Regeln hier gelten ausschließlich bis 768px Viewport-Breite und gewinnen die
Kaskade gegen app.css. Auf dem Desktop ist die Datei komplett inaktiv (Browser
wertet die Media-Query am aus → 0 Einfluss auf die bestehende Ansicht).
Basis (Sidebar-Hamburger, Grid-Stacking, 16px-Inputs) liefert bereits app.css;
diese Datei poliert die Touch-Bedienung und entschärft die echten Engstellen.
============================================================================= */
/* ── iOS/Viewport-Feinheiten ────────────────────────────────────────────────
100dvh statt 100vh: Safari rechnet die ein-/ausfahrende Adressleiste sonst
falsch und es entsteht ein Spring-Effekt. text-size-adjust verhindert, dass
iOS Schrift in Querformat eigenmächtig vergrößert. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
-webkit-tap-highlight-color: rgba(31, 78, 122, 0.15);
}
.app-layout { min-height: 100dvh; }
.sidebar { min-height: 100dvh; }
/* ── ÜBERBREITE VERHINDERN (der eigentliche „zu breit"-Fix) ──────────────────
Flexbox-Falle: ein Flex-Kind hat per Default min-width:auto und schrumpft
NICHT unter die Min-Content-Breite seines Inhalts. Die breiten Tabellen
(Drill-Down, 10-spaltige Objektliste, alle mit white-space:nowrap) ziehen
dadurch die Inhaltsspalte .main-wrapper über die Viewport-Breite hinaus →
die GANZE Seite wird breiter als der Bildschirm, man muss horizontal scrollen
bzw. das Handy zoomt heraus. min-width:0 erlaubt der Spalte, sich auf die
Bildschirmbreite zu begrenzen; die Tabelle scrollt dann INNERHALB ihres
.table-responsive-Containers statt die Seite zu sprengen.
Wichtig: KEIN overflow-x:hidden auf html/body — das macht sie zum Scroll-
Container und bricht den sticky Header. Stattdessen die Überbreite an der
Quelle beseitigen (min-width:0 + .row-Margins) und nur den Inhaltsbereich
horizontal „clippen" (overflow-x:clip erzeugt KEINEN Scroll-Container, lässt
vertikales Scrollen und sticky unangetastet). */
html, body { max-width: 100%; }
.app-layout { max-width: 100%; }
.main-wrapper { min-width: 0; max-width: 100vw; }
.main-content { min-width: 0; max-width: 100vw; overflow-x: clip; }
.card, .filter-card, .card-body { min-width: 0; max-width: 100%; }
/* Bootstrap-Grid: app.css setzt .row { margin: 0 -8px } → das ragt links/rechts
je 8px über den Viewport und erzeugt Seiten-Overflow. Auf Mobil neutralisieren. */
.row { margin-left: 0; margin-right: 0; max-width: 100%; }
.row > [class*="col"] { min-width: 0; }
img, canvas, table, pre, code { max-width: 100%; }
/* ── Kopfzeile & Sidebar: Safe-Area (Notch/abgerundete Ecken) berücksichtigen ── */
.top-header {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
.sidebar {
padding-left: env(safe-area-inset-left);
}
/* Hamburger: größeres, bequemes Touch-Ziel (Apple-HIG ≥ 44px). */
.hamburger-btn {
padding: 10px;
min-width: 44px;
min-height: 44px;
}
/* Sidebar-Navigation: mehr vertikaler Tap-Platz pro Eintrag. */
.sidebar-nav { padding: 10px 8px; }
.nav-link {
padding: 12px 12px;
font-size: 15px;
margin-bottom: 1px;
}
.nav-icon { font-size: 16px; }
/* ── Inhaltsbereich ─────────────────────────────────────────────────────────
Unten extra Luft, damit der schwebende „Zum Dashboard"-Button die letzte
Tabellen-/Kartenzeile nicht verdeckt. */
.main-content {
padding: 14px 12px;
padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
/* ── Seiten-Header (Titel + Excel-Export) ───────────────────────────────────
Auf dem Phone untereinander, Export-Button über volle Breite gut treffbar. */
.dashboard-header {
flex-direction: column;
align-items: stretch;
gap: 12px;
margin-bottom: 16px;
}
.dashboard-header h1 { font-size: 21px; }
.dashboard-header .btn { width: 100%; }
h1, .page-title { font-size: 20px; margin-bottom: 14px; }
h2 { font-size: 16px; }
/* ── Karten / Filter-Karten: kompaktere Innenabstände ───────────────────────*/
.card-body { padding: 14px; }
.card-header { padding: 12px 14px; font-size: 13px; }
.filter-card { padding: 14px; border-radius: 12px; margin-bottom: 16px; }
/* Kartenkopf mit Titel + Hinweis (Drill-Down): darf umbrechen statt überlaufen. */
.card-header.d-flex {
flex-wrap: wrap;
gap: 4px 10px;
}
/* ── 3-fach-Umschalter „Umsatz-Sicht" (Tatsächlich/Durchlaufend/Gesamt) ──────
Bootstrap-.btn-group reiht die drei Buttons horizontal mit langen deutschen
Labels → läuft auf schmalen Phones über. Hier: voll-breite, einzeln gerundete
Buttons untereinander, leicht zu treffen. */
.btn-group {
display: flex;
flex-direction: column;
width: 100%;
gap: 6px;
}
.btn-group > .btn {
width: 100%;
margin-left: 0 !important;
border-radius: 8px !important;
padding: 10px 14px;
font-size: 13.5px;
}
/* Die Erläuterungs-Zeile (ms-auto) rückt unter die Buttons, volle Breite. */
.card-body .d-flex.flex-wrap > .text-muted.small.ms-auto {
margin-left: 0 !important;
width: 100%;
margin-top: 2px;
}
/* ── Schnellauswahl-/Quick-Buttons & Jahres-Stepper: größere Touch-Ziele ─────*/
.quick-btn {
padding: 9px 14px;
font-size: 13px;
min-height: 40px;
}
/* Schnellauswahl-Reihe darf großzügig umbrechen. */
.filter-card .d-flex.gap-1.flex-wrap { gap: 8px !important; }
/* ── KPI-Hero-Kacheln: kompakter, Wert bleibt prominent ─────────────────────*/
.kpi-card { padding: 18px 18px 16px; border-radius: 14px; }
.kpi-card__value { font-size: 26px; }
.kpi-card__icon {
top: 14px; right: 14px;
width: 38px; height: 38px;
font-size: 18px;
}
.kpi-grid { gap: 12px; }
/* ── Top-Kunden-Karten: 1 Spalte, etwas kompakter ──────────────────────────*/
.topkunde-grid { grid-template-columns: 1fr; gap: 12px; }
.topkunde-card__umsatz { font-size: 20px; }
/* ── Charts: niedrigere Höhen, damit auf einen Phone-Screen mehr passt; ──────
Canvas nie breiter als der Viewport. Die festen Höhen stehen als Inline-
Style am umschließenden → mit !important übersteuern. */
.card-body > div[style*="height:340px"],
.card-body > div[style*="height:380px"],
.card-body > div[style*="height:300px"],
.card-body .col-md-5 > div[style*="height:340px"] {
height: 260px !important;
}
canvas { max-width: 100% !important; }
/* ── Tabellen ───────────────────────────────────────────────────────────────
Bleiben horizontal scrollbar (app.css: .table-responsive), aber:
• kompaktere Zellen → mehr Spalten sichtbar bevor gescrollt werden muss
• Kopfzeile beim vertikalen Scrollen sichtbar (sticky)
• Momentum-Scrolling auf iOS */
.table-responsive {
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
.table th, .table td {
padding: 8px 9px;
font-size: 13px;
}
.table thead th {
position: sticky;
top: 0;
z-index: 2;
}
/* Drill-Down (Dashboard): tiefe Einrückung der verschachtelten Zeilen kappen,
sonst frisst sie auf einem 360px-Phone die halbe Breite. Inline-padding-left
(48px/96px) wird hier reduziert. */
.zeile-debitor td:first-child { padding-left: 22px !important; }
.zeile-objekt td:first-child { padding-left: 38px !important; }
/* Aufklapp-Button im Drill-Down: größer & besser greifbar. */
.btn-toggle {
width: 32px; height: 32px;
margin-right: 8px;
font-size: 16px;
}
/* Logos in Tabellen leicht kleiner, damit die Zeilenhöhe handlich bleibt. */
.tabelle-logo { max-height: 20px; max-width: 38px; }
/* ── Schwebender „Zum Dashboard"-Button: Safe-Area beachten ──────────────────
(app.css blendet ab 600px bereits das Text-Label aus → nur Icon.) */
.back-to-dashboard {
bottom: calc(14px + env(safe-area-inset-bottom));
right: calc(14px + env(safe-area-inset-right));
width: 46px;
height: 46px;
padding: 0;
justify-content: center;
}
/* ── Buttons generell: bequeme Mindesthöhe fürs Antippen ────────────────────*/
.btn { min-height: 40px; }
.btn-sm { min-height: 36px; }
/* =============================================================================
Sehr kleine Phones (≤ 480px) — zusätzliche Verdichtung
============================================================================= */
@media (max-width: 480px) {
.main-content { padding: 12px 10px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.dashboard-header h1 { font-size: 19px; }
.kpi-card__value { font-size: 23px; }
.topkunde-card__umsatz { font-size: 18px; }
/* Charts noch flacher auf Mini-Screens. */
.card-body > div[style*="height:340px"],
.card-body > div[style*="height:380px"],
.card-body > div[style*="height:300px"],
.card-body .col-md-5 > div[style*="height:340px"] {
height: 220px !important;
}
/* Tabellen-Zellen maximal kompakt. */
.table th, .table td { padding: 7px 7px; font-size: 12.5px; }
}