/* Google Fonts werden per im geladen (index.php/login.php),
NICHT per @import hier - ein @import in style.css zwingt den Browser,
erst die komplette style.css zu laden, DANN erst die Google-Fonts-
Anfrage zu starten (statt parallel dazu) - das erzeugt einen kurzen,
sichtbaren "unstyled"-Flackerer beim Seitenaufbau (FOUC), besonders
auf der Login-Seite auffällig. */
:root {
/* Markenfarben von janineiten.ch: Koralle (Akzent) + Fast-Schwarz (Ink) */
--ink: #0B0B0B;
--ink-soft: #52514E;
--paper: #FAFAF7;
/* Farbiger Seitenhintergrund (statt neutralem Weiss) - dezenter Koralle-
Wash, damit die weissen Karten sich abheben. */
--page-bg: #FCF1EE;
--line: #E3E1DA;
--accent: #F25244;
/* Für Text auf hellem Grund: --accent hat nur 3.3:1 Kontrast (ok für
Flächen/Rahmen, zu wenig für Fliesstext) - --accent-text ist dieselbe
Farbfamilie, abgedunkelt auf 5.1:1 (WCAG AA). */
--accent-text: #C23A2E;
--accent-soft: #FBEAE7;
--amber: #2A78D6;
--danger: #C0472C;
--radius: 20px;
--radius-sm: 12px;
/* Einheitlicher Abstand zwischen allen Boxen (Karten, Grids, Sections) */
--gap: 24px;
--card-shadow: 0 10px 30px -14px rgba(11, 11, 11, 0.16), 0 2px 6px rgba(11, 11, 11, 0.05);
--font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
--font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
/* Sicherheitsnetz gegen horizontales Scrollen der ganzen Seite: einzelne
absolut positionierte Elemente (z. B. .info-tip-bubble, zentriert auf ein
Icon nahe am Kartenrand) können auf schmalen Screens über den Viewport
hinausragen und dadurch - auch wenn sie unsichtbar sind (opacity:0) - die
ganze Seite scrollbar machen. Auf beiden Ebenen (html UND body) nötig,
sonst greift es je nach Browser nicht zuverlässig. */
html { overflow-x: hidden; }
body {
margin: 0;
background: var(--page-bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.5;
overflow-x: hidden;
}
a { color: var(--accent-text); }
/* ---------- Login ---------- */
.login-body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.login-card {
width: 100%;
max-width: 360px;
padding: 40px 32px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.login-eyebrow {
margin: 0 0 4px;
font-size: 13px;
color: var(--ink-soft);
}
.login-card h1 {
font-family: var(--font-display);
font-size: 26px;
margin: 0 0 28px;
}
.login-error {
color: var(--danger);
font-size: 14px;
margin-bottom: 16px;
}
.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label {
font-size: 13px;
color: var(--ink-soft);
margin-top: 12px;
}
.login-form input {
padding: 10px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: 15px;
font-family: inherit;
background: var(--paper);
}
.login-form input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.login-form button {
margin-top: 24px;
padding: 11px;
background: var(--ink);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 500;
cursor: pointer;
}
.login-form button:hover { background: var(--accent); }
/* ---------- Dashboard ---------- */
.dash-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin: 0;
padding: 16px clamp(20px, 4vw, 56px);
background: #fff;
border-bottom: 1px solid var(--line);
}
/* flex-wrap: wrap statt fixer Breite - auf schmalen Screens (Titel + Divider +
Zeitraum-Dropdown passen dort nicht nebeneinander) rutscht das Dropdown in
die nächste Zeile, statt über den Viewport hinauszulaufen und dadurch die
GANZE Seite horizontal scrollbar zu machen. */
.dash-header-left { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.dash-header h1 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
margin: 0;
white-space: nowrap;
}
.header-divider { width: 1px; height: 28px; background: var(--line); flex: 0 0 auto; }
.header-controls { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 16px; }
/* Pillen (Zeitraum-Auswahl, Optimierung-Button) */
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line);
border-radius: 999px;
background: #fff;
color: var(--ink);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.pill-icon { flex: 0 0 auto; color: var(--ink-soft); }
.pill-select { position: relative; padding-right: 12px; }
.pill-select select {
appearance: none;
-webkit-appearance: none;
border: none;
background: transparent;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: var(--ink);
cursor: pointer;
padding-right: 4px;
}
.pill-select select:focus { outline: none; }
.pill-select:has(select:focus) { outline: 2px solid var(--accent); outline-offset: 1px; }
.pill-chevron { pointer-events: none; }
.pill-button { background: #fff; color: var(--ink); border-color: var(--line); }
.pill-button:hover { background: var(--paper); }
.pill-button .pill-icon { color: var(--accent-text); }
/* Icon-only Header-Buttons (z. B. Massnahmen) */
.icon-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: none;
border: none;
border-radius: 50%;
color: var(--ink-soft);
cursor: pointer;
}
.icon-button:hover { color: var(--accent-text); background: var(--paper); }
.icon-button-badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 16px;
text-align: center;
}
/* Konto-Chip mit Avatar, öffnet ein Dropdown-Panel (Logout, Version) */
.account-menu { position: relative; }
.account-chip {
display: flex;
align-items: center;
gap: 10px;
background: none;
border: none;
padding: 4px;
border-radius: var(--radius-sm);
font-family: inherit;
cursor: pointer;
}
.account-chip:hover { background: var(--paper); }
.account-avatar {
position: relative;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-family: var(--font-display);
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.account-info { text-align: left; }
.account-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.account-domain { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
.account-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 190px;
background: #fff;
border-radius: var(--radius-sm);
box-shadow: var(--card-shadow);
border: 1px solid var(--line);
overflow: hidden;
z-index: 20;
}
.account-dropdown[hidden] { display: none; }
.account-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 14px;
font-size: 13px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
}
.account-dropdown-item:hover { background: var(--paper); }
.account-dropdown-item svg { color: var(--ink-soft); flex: 0 0 auto; }
.account-dropdown-version {
padding: 9px 14px;
font-size: 11px;
color: var(--ink-soft);
border-top: 1px solid var(--line);
}
.section-total {
font-weight: 400;
color: var(--ink-soft);
font-size: 13px;
}
main {
max-width: 1080px;
margin: 0 auto;
padding: 32px clamp(20px, 4vw, 56px) 24px;
}
/* Stat row */
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--gap);
margin-bottom: var(--gap);
}
.stat {
padding: 20px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
}
.stat .label {
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 8px;
}
.stat .value {
font-family: var(--font-display);
font-size: 28px;
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.15; /* engerer Zeilenabstand, falls der Wert umbricht (z. B. "Google Ads Kosten" auf schmalen Screens) */
}
/* Key-Event KPI-Karten */
.kpi-section { margin-bottom: var(--gap); }
.kpi-section h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
margin: 0 0 4px;
}
.kpi-section .kpi-subtitle {
font-size: 13px;
color: var(--ink-soft);
margin: 0 0 16px;
}
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--gap);
}
.kpi-card {
position: relative;
overflow: hidden;
background: var(--kpi-gradient, var(--accent));
border-radius: var(--radius);
box-shadow: var(--card-shadow);
padding: 22px 20px 20px;
color: #fff;
}
/* Dekorative, halbtransparente Kreise im Hintergrund - wie im Referenzbild */
.kpi-card::before,
.kpi-card::after {
content: "";
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
pointer-events: none;
}
.kpi-card::before {
width: 150px;
height: 150px;
right: -55px;
bottom: -65px;
}
.kpi-card::after {
width: 84px;
height: 84px;
right: 34px;
bottom: -42px;
background: rgba(255, 255, 255, 0.1);
}
.kpi-card-top {
position: relative;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.kpi-card .kpi-label {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.92);
}
.kpi-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.kpi-card .kpi-value {
position: relative;
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #fff;
margin-top: 20px;
}
.kpi-sources {
position: relative;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.25);
display: flex;
flex-direction: column;
gap: 6px;
}
.kpi-source-row {
display: flex;
justify-content: space-between;
font-size: 12px;
color: rgba(255, 255, 255, 0.85);
}
.kpi-source-count {
font-variant-numeric: tabular-nums;
color: #fff;
font-weight: 600;
}
section.block {
background: #fff;
border-radius: var(--radius);
box-shadow: var(--card-shadow);
padding: 28px clamp(20px, 3vw, 32px);
margin-bottom: var(--gap);
}
section.block h2 {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
margin: 0 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line);
}
.section-intro {
font-size: 16px;
color: var(--ink-soft);
margin: -4px 0 16px;
}
/* Info-Icon mit Tooltip-Bubble, z. B. Standort-Hinweis bei "Mitbewerber" */
.info-tip {
position: relative;
display: inline-flex;
vertical-align: middle;
margin-left: 4px;
cursor: help;
}
.info-tip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
border: 1.5px solid var(--ink-soft);
color: var(--ink-soft);
font-size: 11px;
font-style: italic;
font-family: Georgia, 'Times New Roman', serif;
line-height: 1;
}
.info-tip-bubble {
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
width: max-content;
/* min(280px, 90vw) statt fix 280px - auf schmalen Screens (Icon nahe am
Kartenrand) bliebe eine 280px breite, zentrierte Box sonst über den
Viewport-Rand hinausragen. */
max-width: min(280px, 90vw);
background: var(--ink);
color: #fff;
font-size: 13px;
line-height: 1.4;
padding: 10px 12px;
border-radius: var(--radius-sm);
box-shadow: var(--card-shadow);
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease;
z-index: 5;
}
.info-tip-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--ink);
}
.info-tip:hover .info-tip-bubble,
.info-tip:focus .info-tip-bubble,
.info-tip:focus-visible .info-tip-bubble {
opacity: 1;
visibility: visible;
}
.inline-form { margin-bottom: 16px; }
.inline-form select {
font-family: var(--font-body);
font-size: 14px;
padding: 7px 10px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: #fff;
color: var(--ink);
/* width:100% (nicht nur max-width) - sonst ist die Breite vom Browser
an den Textinhalt gekoppelt (native