/* self-hosted fonts */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/Inter-983e9094.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/Inter-39529051.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/assets/fonts/Inter-56724408.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/Bricolage-25c61ceb.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/Bricolage-a4fe79f7.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/Bricolage-a9723242.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* surfaces (warm ink, never pure black) */
--bg: #15120F;
--surface: #1E1A16;
--surface-2: #29231D;
--border: #342D25;
--border-light: #3F362C;
/* text */
--text: #F6F1E9;
--text-dim: #B0A698;
--text-faint: #7A7164;
/* brand (Match Loop — Coral) */
--primary: #FF6E57;
--primary-hover: #FF8068;
--primary-soft: rgba(255, 110, 87, 0.12);
--primary-border: rgba(255, 110, 87, 0.42);
/* semantic */
--danger: #F26A6E;
--success: #23C99A;
--accent: #8E74FF;
--warning: #E8B45A;
--on-primary: #1B1714;
--primary-text: #FF8068;
/* shape */
--radius: 16px;
--radius-sm: 12px;
--shadow: 0 10px 40px rgba(0,0,0,0.5);
/* type */
--font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Inter', system-ui, -apple-system, sans-serif;
--font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--primary-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.muted { color: var(--text-faint); }
/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 28px; border-bottom: 1px solid var(--border);
background: var(--bg); position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800;
font-size: 1.15rem; letter-spacing: -0.02em; }
.brand .hex { /* legacy fallback if SVG not rendered */
width: 14px; height: 16px;
background: var(--primary);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.brand .brand-logo {
width: 24px; height: 24px;
color: var(--primary);
display: block;
flex: 0 0 auto;
}
@media (max-width: 380px) {
.brand .brand-logo { width: 22px; height: 22px; }
}
.brand .label .accent { color: var(--primary); }
/* When the topbar gets tight, collapse the wordmark to just the hex icon so
the nav stays on one line instead of wrapping. */
@media (max-width: 1300px) {
.topbar .brand .label { display: none; }
}
.topbar nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.topbar nav a { color: var(--text-dim); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 0.92rem; }
.topbar nav a:hover { color: var(--text); background: var(--surface-2); }
.topbar nav a.active { color: var(--primary); background: var(--primary-soft); }
.topbar nav a.btn { background: var(--primary); color: #000; font-weight: 600; }
.topbar nav a.btn:hover { background: var(--primary-hover); color: #000; }
/* ── Layout ──────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
main { flex: 1; padding: 48px 0 80px; }
footer { border-top: 1px solid var(--border); padding: 24px 28px;
color: var(--text-faint); font-size: 0.85rem; text-align: center; }
footer .mono { color: var(--primary); }
/* ── Cards / forms ───────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
box-shadow: var(--shadow);
}
.card.narrow { max-width: 460px; margin: 0 auto; }
.card h1 { margin-bottom: 6px; }
.card .subtitle { color: var(--text-dim); margin-bottom: 28px; font-size: 0.95rem; }
label {
display: block; color: var(--text-dim);
font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 8px; font-family: var(--font-mono);
}
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], textarea, select {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: 0.96rem;
font-family: var(--font-body);
transition: border-color .15s, background .15s;
}
textarea { resize: vertical; min-height: 100px; }
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--primary); background: #1c1c1c;
}
.form-row { margin-bottom: 18px; }
.form-row .help { color: var(--text-faint); font-size: 0.8rem; margin-top: 6px; }
button, .btn {
display: inline-block;
background: var(--primary);
color: #000; border: none;
padding: 12px 22px;
border-radius: var(--radius-sm);
font-weight: 700; font-size: 0.95rem;
cursor: pointer; font-family: var(--font-body);
transition: background .15s, color .15s, border-color .15s, transform .1s;
}
/* The explicit `color` rule wins over the global `a:hover { color: orange }`
that would otherwise paint button text in primary colour and make it
invisible against the yellow background. */
button:hover, .btn:hover, a.btn:hover {
background: #ffffff;
color: #000000;
}
button:active, .btn:active { transform: scale(0.98); }
button.full { width: 100%; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-light); }
.btn.ghost:hover, a.btn.ghost:hover {
background: var(--surface-2);
border-color: var(--primary);
color: #ffffff;
}
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover, a.btn.danger:hover {
background: #ff8a64;
color: #ffffff;
}
.btn.small { padding: 6px 12px; font-size: .82rem; }
/* ── Role grid ───────────────────────────────────────────────────── */
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .role-grid { grid-template-columns: repeat(4, 1fr); } }
.role-tile {
position: relative;
background: var(--surface-2);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 14px 12px;
text-align: center; cursor: pointer;
transition: all .15s; user-select: none;
}
.role-tile:hover { border-color: var(--primary); }
.role-tile input { position: absolute; opacity: 0; pointer-events: none; }
.role-tile .name { font-weight: 600; font-size: 0.92rem; color: var(--text); }
.role-tile .desc { font-size: 0.75rem; color: var(--text-faint); margin-top: 2px; }
.role-tile.checked { background: var(--primary-soft); border-color: var(--primary); }
.role-tile.checked .name { color: var(--primary); }
/* ── Alerts ──────────────────────────────────────────────────────── */
.alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 18px; }
.alert.error { background: rgba(216,115,80,0.12); border: 1px solid rgba(216,115,80,0.35); color: #ffb19a; }
.alert.success { background: rgba(74,211,172,0.10); border: 1px solid rgba(74,211,172,0.30); color: #7fe2c2; }
.alert.info { background: var(--primary-soft); border: 1px solid var(--primary-border); color: var(--primary); }
/* ── Hero / landing ──────────────────────────────────────────────── */
.hero { padding: 80px 0 60px; text-align: center; }
.hero .eyebrow {
font-family: var(--font-mono); color: var(--primary);
font-size: 0.78rem; letter-spacing: 0.18em;
text-transform: uppercase; margin-bottom: 18px;
}
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; max-width: 18ch; margin: 0 auto 18px; }
.hero h1 .accent { color: var(--primary); }
.hero p.lead { color: var(--text-dim); font-size: 1.1rem; max-width: 56ch; margin: 0 auto 36px; }
.hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.feature-grid {
display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 70px;
}
@media (min-width: 720px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
}
.feature .badge {
display: inline-block;
background: var(--primary-soft); color: var(--primary);
font-size: 0.72rem; padding: 4px 10px;
border-radius: 999px; font-family: var(--font-mono);
letter-spacing: 0.12em; margin-bottom: 14px;
}
.feature h3 { color: var(--text); margin-bottom: 8px; }
.feature p { color: var(--text-dim); font-size: 0.92rem; }
/* ── KPIs / tables ───────────────────────────────────────────────── */
.section-head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.section-head .eyebrow {
font-family: var(--font-mono); color: var(--primary);
font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px;
}
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 32px; }
@media (min-width: 720px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
}
.kpi .label {
font-family: var(--font-mono); font-size: 0.7rem;
color: var(--text-faint); letter-spacing: 0.14em;
text-transform: uppercase; margin-bottom: 8px;
}
.kpi .value { font-size: 2rem; font-weight: 700; color: var(--text); }
.kpi .delta { font-size: 0.78rem; color: var(--success); margin-top: 2px; }
table.users {
width: 100%; border-collapse: collapse;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
}
table.users th, table.users td {
padding: 12px 14px; text-align: left;
border-bottom: 1px solid var(--border); font-size: 0.92rem;
}
table.users thead { background: var(--surface-2); }
table.users th {
color: var(--text-dim); font-family: var(--font-mono);
font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}
table.users tbody tr:last-child td { border-bottom: none; }
table.users tbody tr:hover { background: var(--surface-2); }
.pill {
display: inline-block; padding: 3px 10px;
border-radius: 999px; font-size: 0.74rem;
font-family: var(--font-mono); letter-spacing: 0.06em;
}
.pill.admin { background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-border); }
.pill.active { background: rgba(74,211,172,0.12); color: var(--success); border: 1px solid rgba(74,211,172,0.3); }
.pill.inactive { background: rgba(216,115,80,0.12); color: #ff9a7a; border: 1px solid rgba(216,115,80,0.3); }
.pill.role { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border-light); margin-right: 4px; }
.pill.match {
background: rgba(216,115,80,0.18); color: #ff7758;
border: 1px solid rgba(216,115,80,0.50);
font-weight: 700;
}
/* Pulse-animation: highlight a nav-tab when a 100km match arrives */
@keyframes b12-match-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,119,88,0.45); }
50% { box-shadow: 0 0 0 6px rgba(255,119,88,0); }
}
.match-pulse {
position: relative;
border-radius: var(--radius-sm);
animation: b12-match-pulse 2.2s ease-in-out infinite;
}
.divider { height: 1px; background: var(--border); margin: 32px 0; }
/* ── Welcome card ────────────────────────────────────────────────── */
.welcome {
background: linear-gradient(135deg, rgba(255,90,65,0.08) 0%, rgba(0,0,0,0) 60%);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px;
margin-bottom: 32px;
}
.welcome h2 { font-size: 1.8rem; margin-bottom: 6px; }
.welcome .meta { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.85rem; }
/* ── Profile ─────────────────────────────────────────────────────── */
.profile-cover {
height: 220px; border-radius: var(--radius);
background: var(--surface-2) center/cover no-repeat;
margin-bottom: 14px; /* small breathing room before the header */
position: relative;
border: 1px solid var(--border);
}
.profile-cover.empty {
background: linear-gradient(135deg, var(--primary-soft), var(--surface-2));
}
.profile-header {
position: relative; z-index: 1;
display: flex; gap: 22px; align-items: flex-start; /* text top-aligned, sits BELOW cover */
padding: 0 4px 24px; flex-wrap: wrap;
}
.profile-avatar {
width: 128px; height: 128px;
border-radius: 50%;
background: var(--surface-2);
border: 4px solid var(--bg);
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 2.4rem; color: var(--primary);
font-family: var(--font-body);
background-size: cover; background-position: center;
flex-shrink: 0;
position: relative; /* layered ![]()
+ initials */
overflow: hidden;
}
/* Lift up only when inside the profile-header (overlap-with-cover effect).
Keeps the same .profile-avatar markup usable anywhere else (chat-row,
map-list etc.) without dragging it 78px upward. */
.profile-header .profile-avatar { margin-top: -78px; }
.profile-avatar .avatar-initials {
position: relative; /* sits behind the img naturally */
z-index: 0;
pointer-events: none;
line-height: 1;
}
.profile-avatar .avatar-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
z-index: 1; /* covers the initials when it loads */
display: block;
}
.profile-info { flex: 1; min-width: 0; }
.profile-info h1 { font-size: 2rem; line-height: 1.1; }
.profile-info .meta { color: var(--text-dim); font-family: var(--font-mono); font-size: .85rem; margin-top: 6px; }
.online-dot {
display: inline-block; width: 9px; height: 9px;
border-radius: 50%; background: var(--success);
box-shadow: 0 0 0 3px rgba(74,211,172,0.18); margin-right: 6px;
}
.online-dot.off { background: #555; box-shadow: none; }
/* Availability badge — prominent status pill in the profile header. */
.profile-status { margin-top: 10px; display: flex; }
.availability-badge {
display: inline-flex; align-items: center; gap: 9px;
padding: 7px 16px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: .76rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.availability-badge .availability-dot {
width: 9px; height: 9px; border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.availability-badge.available {
background: rgba(74,211,172,0.12);
color: var(--success);
border: 1px solid rgba(74,211,172,0.45);
}
.availability-badge.available .availability-dot {
animation: b12-avail-pulse 2.4s ease-out infinite;
}
.availability-badge.offline {
background: rgba(140,140,140,0.08);
color: var(--text-dim);
border: 1px solid var(--border-light);
}
.availability-badge.offline .availability-dot {
background: var(--text-faint);
}
@keyframes b12-avail-pulse {
0% { box-shadow: 0 0 0 0 rgba(74,211,172,0.55); }
70% { box-shadow: 0 0 0 10px rgba(74,211,172,0); }
100% { box-shadow: 0 0 0 0 rgba(74,211,172,0); }
}
/* Services card — grouped by category for better scannability. */
.services-head {
display: flex; align-items: center; gap: 10px;
}
.services-head h3 { margin: 0; }
.services-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 22px; padding: 0 8px;
background: var(--primary-soft);
color: var(--primary);
border: 1px solid var(--primary-border);
border-radius: 999px;
font-family: var(--font-mono);
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
}
.service-group + .service-group {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.service-group-title {
font-family: var(--font-mono);
font-size: .68rem;
color: var(--primary);
letter-spacing: .16em;
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 700;
}
.service-tags {
display: flex; flex-wrap: wrap; gap: 6px;
}
.service-tag {
display: inline-block;
padding: 6px 13px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
font-size: .84rem;
font-family: var(--font-body);
font-weight: 500;
transition: border-color .12s, color .12s, background .12s;
}
.service-tag.clickable { cursor: pointer; }
.service-tag.clickable:hover,
.service-tag.clickable:focus {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
outline: none;
}
.service-tag.clickable:focus-visible {
box-shadow: 0 0 0 2px var(--primary-soft);
}
/* Sub-tags (Sprachen unter Songwriting) */
.service-sub-tags {
display: flex; align-items: center; flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0 2px;
font-size: .78rem;
}
.service-sub-label {
color: var(--text-faint);
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .1em;
font-size: .68rem;
margin-right: 2px;
}
.service-sub-tag {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
background: rgba(255,90,65,0.06);
border: 1px solid rgba(255,90,65,0.25);
color: var(--primary);
font-size: .76rem;
font-family: var(--font-body);
}
/* ── Angebots-Anfrage-Popup (öffnet bei Klick auf einen Service-Chip) ── */
.offer-panel {
background: var(--surface);
border: 1px solid var(--primary-border);
border-radius: var(--radius);
padding: 24px 28px;
margin: 8px 0 22px;
box-shadow: var(--shadow);
animation: b12-ping-slide .22s ease-out;
}
.offer-panel[hidden] { display: none; }
.offer-panel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 6px;
}
.offer-panel-head h3 {
font-size: 1.15rem;
display: flex; align-items: center; gap: 10px;
margin: 0;
}
.offer-panel-head h3::before {
content: "🎯"; font-size: 1.1rem; line-height: 1;
}
.offer-panel-close {
background: transparent; border: none; color: var(--text-faint);
font-size: 1rem; padding: 6px 10px; cursor: pointer;
border-radius: 6px; line-height: 1;
}
.offer-panel-close:hover { background: var(--surface-2); color: var(--text); }
.offer-panel-hint {
color: var(--text-faint); font-size: .9rem;
margin: 0 0 18px; line-height: 1.5;
}
.offer-form-row { margin-bottom: 16px; }
.offer-form-label {
display: block;
color: var(--text-dim);
font-size: .76rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: .1em;
margin-bottom: 8px;
}
.offer-skill-list {
display: flex; flex-direction: column;
gap: 14px;
background: var(--surface-2);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 14px 16px;
}
.offer-skill-cat-title {
font-family: var(--font-mono);
font-size: .68rem;
color: var(--primary);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 8px;
font-weight: 700;
}
.offer-skill-chips {
display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.offer-skill-chip {
position: relative;
display: inline-flex; align-items: center;
padding: 6px 13px;
border-radius: 999px;
background: var(--bg);
border: 1px solid var(--border-light);
cursor: pointer;
user-select: none;
font-size: .85rem;
color: var(--text-dim);
transition: all .12s;
}
.offer-skill-chip:hover { color: var(--text); border-color: var(--primary); }
.offer-skill-chip input { position: absolute; opacity: 0; pointer-events: none; }
.offer-skill-chip.checked {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
}
.offer-skill-chip.checked::before {
content: "✓"; margin-right: 6px; font-weight: 800;
}
.offer-lang-select {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 10px 12px;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: .94rem;
}
.offer-form textarea {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-light);
color: var(--text);
padding: 12px 14px;
border-radius: var(--radius-sm);
font-size: .96rem;
font-family: var(--font-body);
min-height: 100px;
resize: vertical;
}
.offer-form-actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
margin-top: 18px;
}
/* Inline-Toast — wird per JS bei AJAX-Erfolg eingeblendet (z.B. Angebot
gesendet). Liegt fixed oben am Viewport. */
.b12-toast {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%) translateY(-24px);
background: var(--surface);
color: var(--text);
padding: 12px 22px;
border-radius: 999px;
border: 1px solid var(--border-light);
box-shadow: 0 12px 36px rgba(0,0,0,0.45);
font-size: .92rem;
font-weight: 500;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity .2s, transform .2s;
max-width: 90vw;
text-align: center;
}
.b12-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.b12-toast.ok { border-color: rgba(74,211,172,0.50); color: var(--success); }
.b12-toast.err { border-color: rgba(216,115,80,0.50); color: var(--danger); }
/* ── Sprachen-Picker im Editor (Songwriting) ── */
.lang-chips {
display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.lang-chip {
position: relative;
display: inline-flex; align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border-light);
cursor: pointer;
user-select: none;
font-size: .85rem;
color: var(--text-dim);
transition: all .12s;
}
.lang-chip:hover { color: var(--text); border-color: var(--primary); }
.lang-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lang-chip.checked {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
}
.lang-chip.checked::before {
content: "✓"; margin-right: 6px; font-weight: 800;
}
/* ── Custom-Portfolio-Links-Editor (+ Button + Zeilen) ── */
.portfolio-links-list {
display: flex; flex-direction: column;
gap: 8px;
}
.portfolio-link-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) minmax(180px, 2fr) auto;
gap: 8px;
align-items: center;
}
.portfolio-link-row input { margin: 0; }
.portfolio-link-remove {
background: transparent;
border: 1px solid var(--border-light);
color: var(--text-faint);
font-size: .9rem;
padding: 8px 12px;
border-radius: var(--radius-sm);
cursor: pointer;
line-height: 1;
}
.portfolio-link-remove:hover {
background: var(--surface-2);
color: var(--danger);
border-color: var(--danger);
}
/* ── Public-Profile: 'Weitere Profile'-Liste ── */
.portfolio-extras-list {
display: flex; flex-direction: column; gap: 6px;
}
.portfolio-extra-row {
display: grid;
grid-template-columns: minmax(80px, 0.4fr) 1fr auto;
gap: 12px;
align-items: center;
padding: 12px 14px;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
text-decoration: none;
transition: border-color .12s, background .12s;
}
.portfolio-extra-row:hover {
border-color: var(--primary);
background: var(--surface);
color: var(--text);
}
.portfolio-extra-title {
font-weight: 600;
font-size: .92rem;
}
.portfolio-extra-url {
color: var(--text-faint);
font-size: .82rem;
font-family: var(--font-mono);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.portfolio-extra-arrow {
color: var(--primary);
font-size: 1rem;
}
/* ── Galerie ────────────────────────────────────────── */
/* Editor: Tile-Grid mit Add-Button als letztes Tile */
.gallery-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
}
.gallery-edit-tile,
.gallery-edit-add {
position: relative;
aspect-ratio: 1 / 1;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--surface-2) center/cover no-repeat;
overflow: hidden;
}
.gallery-edit-add {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 6px;
color: var(--text-faint);
cursor: pointer;
transition: all .12s;
}
.gallery-edit-add:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-soft);
}
.gallery-edit-add-icon {
font-size: 2rem; line-height: 1; font-weight: 300;
}
.gallery-edit-add-label {
font-size: .72rem;
font-family: var(--font-mono);
letter-spacing: .08em;
text-transform: uppercase;
}
.gallery-edit-remove {
position: absolute;
top: 6px; right: 6px;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(0,0,0,0.65);
color: #fff;
border: none;
cursor: pointer;
font-size: .8rem;
line-height: 1;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity .12s, background .12s;
}
.gallery-edit-tile:hover .gallery-edit-remove {
opacity: 1;
}
.gallery-edit-remove:hover {
background: var(--danger);
}
/* Public: schlanker Grid mit Hover-Zoom-Hint */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.gallery-tile {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-sm);
border: 1px solid var(--border-light);
background: var(--surface-2) center/cover no-repeat;
overflow: hidden;
display: block;
transition: transform .15s, border-color .15s;
}
.gallery-tile:hover {
transform: scale(1.02);
border-color: var(--primary);
}
.gallery-tile-zoom {
position: absolute;
bottom: 8px; right: 8px;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: .85rem;
opacity: 0;
transition: opacity .15s;
}
.gallery-tile:hover .gallery-tile-zoom {
opacity: 1;
}
.profile-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 18px;
margin-bottom: 18px;
align-items: stretch; /* equal-height cards across columns */
}
@media (min-width: 880px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
.profile-grid > .card {
height: 100%; /* fill the row height set by stretch */
margin: 0;
}
/* Portfolio sub-sections (Spotify / YouTube) inside one Card */
.portfolio-section + .portfolio-section {
margin-top: 18px; padding-top: 18px;
border-top: 1px solid var(--border);
}
.portfolio-section h4 {
font-size: .9rem; margin-bottom: 8px;
font-family: var(--font-mono); letter-spacing: .04em;
color: var(--text-dim); text-transform: uppercase;
}
.embed-frame {
width: 100%; border: 0; border-radius: var(--radius-sm);
background: var(--surface-2); margin-top: 8px;
}
/* Click-to-upload on profile avatar / cover (own profile only) */
.profile-avatar.editable, .profile-cover.editable {
position: relative; cursor: pointer; transition: filter .15s;
}
.profile-avatar.editable:hover, .profile-cover.editable:hover { filter: brightness(0.7); }
.profile-avatar.editable .cam-overlay,
.profile-cover.editable .cam-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 4px;
background: rgba(0,0,0,0.0); color: rgba(255,255,255,0.0);
border-radius: inherit; transition: background .15s, color .15s;
font-size: 1.4rem; pointer-events: none;
z-index: 2; /* above .avatar-img (z-index: 1) so hover-cam shows over photos */
}
.profile-avatar.editable:hover .cam-overlay,
.profile-cover.editable:hover .cam-overlay {
background: rgba(0,0,0,0.45); color: #fff;
}
.profile-avatar.editable .cam-overlay .lbl,
.profile-cover.editable .cam-overlay .lbl {
font-size: .65rem; font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.upload-feedback {
padding: 0 4px;
font-family: var(--font-mono);
font-size: .82rem;
text-align: right; /* aligns with the action button on the right */
/* Empty box has no vertical footprint — only takes space when JS fills it. */
}
.upload-feedback:empty { display: none; }
.upload-feedback:not(:empty) { margin: 12px 0 18px; }
.upload-feedback.ok { color: var(--success); }
.upload-feedback.err { color: var(--danger); }
/* Service multi-select grid (Profile editor) */
.service-cat { margin-bottom: 18px; }
.service-cat:last-child { margin-bottom: 0; }
.service-cat-title {
font-family: var(--font-mono);
font-size: .72rem;
color: var(--primary);
letter-spacing: .14em;
text-transform: uppercase;
margin-bottom: 8px;
}
.service-chips {
display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.service-chip {
display: inline-flex; align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--border-light);
cursor: pointer;
user-select: none;
font-size: .85rem;
color: var(--text-dim);
transition: all .12s;
}
.service-chip:hover { color: var(--text); border-color: var(--primary); }
.service-chip input { position: absolute; opacity: 0; pointer-events: none; }
.service-chip.checked {
background: var(--primary-soft);
border-color: var(--primary);
color: var(--primary);
}
.service-chip.checked::before {
content: "✓"; margin-right: 6px; font-weight: 800;
}
/* Upload widgets (Profile editor) */
.upload-row {
display: flex; gap: 16px; align-items: flex-start;
}
.upload-preview {
width: 80px; height: 80px;
border-radius: 50%;
background: var(--surface-2) center/cover no-repeat;
border: 1px solid var(--border-light);
flex-shrink: 0;
}
.upload-preview.cover {
width: 160px; height: 60px; border-radius: var(--radius-sm);
}
/* ── Onboarding-Banner (auf Dashboard, wenn Wizard noch offen) ─────── */
.onboarding-banner {
background: linear-gradient(135deg, var(--primary-soft) 0%, transparent 80%);
border: 1px solid var(--primary-border);
border-radius: var(--radius);
padding: 18px 22px;
margin-bottom: 24px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.onboarding-banner .text { flex: 1; min-width: 200px; }
.onboarding-banner h3 { color: var(--primary); margin: 0 0 4px; font-size: 1.05rem; }
.onboarding-banner p { margin: 0; color: var(--text-dim); font-size: .9rem; }
.onboarding-banner .actions { display: flex; gap: 8px; }
/* ── Anpingen panel ───────────────────────────────────────────────── */
/* The CTA in the profile-header just toggles this panel — the panel itself
lives outside the .profile-header flex container, so opening it never
shifts or reflows the avatar / info column. */
.profile-action { display: flex; flex-direction: column; gap: 8px; }
.btn#ping-toggle.active { background: #ffffff; color: #000; }
.btn#ping-toggle.active:hover { background: var(--primary-hover); }
.ping-panel {
background: var(--surface);
border: 1px solid var(--primary-border);
border-radius: var(--radius);
padding: 22px 26px;
margin: 4px 0 22px;
box-shadow: var(--shadow);
animation: b12-ping-slide .22s ease-out;
}
.ping-panel[hidden] { display: none; }
@keyframes b12-ping-slide {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.ping-panel-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 4px;
}
.ping-panel-head h3 {
font-size: 1.1rem;
display: flex; align-items: center; gap: 10px;
margin: 0;
}
.ping-panel-head h3::before {
content: ""; width: 8px; height: 8px; border-radius: 50%;
background: var(--primary);
box-shadow: 0 0 0 4px var(--primary-soft);
flex-shrink: 0;
}
.ping-panel-close {
background: transparent; border: none; color: var(--text-faint);
font-size: 1rem; padding: 6px 10px; cursor: pointer;
border-radius: 6px; line-height: 1;
}
.ping-panel-close:hover { background: var(--surface-2); color: var(--text); }
.ping-panel-hint {
color: var(--text-faint); font-size: .85rem;
margin: 0 0 14px; line-height: 1.5;
}
.ping-form textarea {
min-height: 110px; margin-bottom: 12px; resize: vertical;
}
.ping-form-actions {
display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}
/* ── PWA / mobile polish ─────────────────────────────────────────── */
/* Respect iPhone notch + bottom safe area when launched as PWA */
@supports (padding: env(safe-area-inset-top)) {
.topbar { padding-top: calc(18px + env(safe-area-inset-top)); }
footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* On phones, the topbar wraps too much — collapse to a minimal nav and
show a thumb-friendly bottom tab bar instead. */
@media (max-width: 720px) {
.topbar { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
.topbar nav { display: none; } /* desktop nav hidden */
.topbar .brand { font-size: 1rem; }
main { padding: 22px 0 96px; } /* leave room for the tab bar */
.container { padding: 0 16px; }
h1 { font-size: 1.6rem; }
/* Bottom tab bar — only renders on mobile */
.b12-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; justify-content: space-around;
padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
background: rgba(8,8,8,0.96);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid var(--border);
}
.b12-tabbar a {
position: relative;
flex: 1; text-align: center;
color: var(--text-faint);
font-size: .65rem;
font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
padding: 6px 4px 4px;
border-radius: 10px;
text-decoration: none;
display: flex; flex-direction: column; align-items: center; gap: 2px;
transition: color .15s, background .15s;
}
.b12-tabbar a:hover { color: var(--text-dim); }
.b12-tabbar a .ic {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 8px;
transition: background .15s;
}
.b12-tabbar a .ic svg {
width: 22px; height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.b12-tabbar a .lbl { display: block; line-height: 1; }
/* Active state: brand yellow, with a soft pill behind the icon. */
.b12-tabbar a.active { color: var(--primary); }
.b12-tabbar a.active .ic { background: var(--primary-soft); }
.b12-tabbar a.active .ic svg { stroke: var(--primary); }
}
@media (min-width: 721px) {
.b12-tabbar { display: none; }
}
/* ─────────────────────────────────────────────────────────────────── */
/* Mobile responsive polish — applies to <= 720px (phones/tablets). */
/* Goal: every page must be fully usable with a thumb on a phone. */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
/* ── Typography ── */
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
/* ── Cards: tighter padding on phones ── */
.card { padding: 20px 18px; }
.card.narrow { padding: 24px 18px; }
.welcome { padding: 22px 18px; }
/* ── Section-head: stack the title + action button ── */
.section-head {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.section-head + .section-head { margin-top: 18px; }
.section-head > div:last-child {
align-self: stretch;
display: flex; flex-wrap: wrap; gap: 6px;
}
.section-head .btn { flex: 1; text-align: center; }
/* ── Profile cover & header: smaller, stack content ── */
.profile-cover { height: 140px; margin-bottom: 12px; }
.profile-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 0 4px 8px;
}
.profile-header .profile-avatar {
width: 96px !important; height: 96px !important; font-size: 32px !important;
margin-top: -56px; /* lift over the cover on phones (header only) */
}
.profile-info h1 { font-size: 1.55rem; }
.profile-info .meta { margin-top: 4px; }
.profile-header > div:last-child,
.profile-header > .profile-action { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.profile-header > div:last-child > a,
.profile-header > div:last-child > .btn,
.profile-header > .profile-action > a,
.profile-header > .profile-action > .btn {
width: 100%; margin: 0 !important; text-align: center;
}
/* ── Ping panel: tighter padding, full-width buttons ── */
.ping-panel { padding: 18px 16px; margin: 8px 0 18px; }
.ping-panel-head h3 { font-size: 1rem; }
.ping-form textarea { min-height: 96px; }
.ping-form-actions { gap: 8px; }
.ping-form-actions .btn { flex: 1; min-width: 0; text-align: center; }
.upload-feedback { text-align: left; }
/* Bio paragraph margin tighter on mobile */
.profile-grid { margin-top: 12px; }
.profile-header + p,
.upload-feedback + p { margin-top: 4px; }
/* ── Hero (landing) ── */
.hero { padding: 40px 0 30px; }
.hero h1 { font-size: 2.1rem; }
.hero p.lead { font-size: 1rem; }
.hero .cta-row .btn { flex: 1; min-width: 140px; }
/* ── KPI cards: tighter ── */
.kpi { padding: 14px 16px; }
.kpi .value { font-size: 1.55rem; }
/* ── Chat window: stack header buttons ── */
.chat-header { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.chat-header .info { flex: 1 1 60%; min-width: 0; }
.chat-header .btn,
.chat-header > a { flex: 0 0 auto; }
.chat-stream { padding: 16px 12px; }
.msg { max-width: 85%; }
/* ── Tabs (Quest-Tabs etc.) ── */
.quest-tabs { overflow-x: auto; flex-wrap: nowrap; }
.quest-tabs a { white-space: nowrap; padding: 8px 12px; font-size: .82rem; }
/* ── Forms: vertical layout for the lat/lng / employees pairs ── */
.form-row > div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* ── Tables: horizontal scroll on tiny screens (admin user list) ── */
table.users { display: block; overflow-x: auto; }
table.users th, table.users td { white-space: nowrap; }
/* ── Filter chips: scroll horizontally instead of wrapping ── */
.filter-chips {
overflow-x: auto; flex-wrap: nowrap;
margin: 0 -16px 18px;
padding: 0 16px 16px;
-webkit-overflow-scrolling: touch;
}
.filter-chips .chip { white-space: nowrap; flex-shrink: 0; }
/* ── Map-stage: list below map (already 1-col, but tighter) ── */
.map-wrap { height: 480px; }
.map-list { max-height: 380px; }
/* ── Dashboard mini-map: smaller on phones ── */
.dash-map { height: 240px; }
/* ── Topbar: keep the brand visible, hide email stamp ── */
.topbar nav .muted.mono { display: none; }
/* ── Upload widgets: stack the preview + button vertically ── */
.upload-row { flex-direction: column; align-items: stretch; }
.upload-preview { width: 100%; height: 100px; border-radius: var(--radius-sm); }
.upload-preview:first-child { width: 96px; height: 96px; border-radius: 50%; }
/* ── Detail-Grid (Auftrag detail, profile-grid): force 1-col on phones ── */
.profile-grid, .detail-grid, .map-stage, .chat-shell { grid-template-columns: 1fr !important; }
/* ── KV-tables (Auftrag detail) ── */
.kv-tight { grid-template-columns: 1fr; gap: 4px 0; }
.kv-tight .k { padding-top: 12px; }
.kv-tight .v { margin-bottom: 8px; }
.kv { grid-template-columns: 1fr; gap: 4px 0; }
.kv .k { padding-top: 12px; }
}
/* ── Extra-small phones (< 380px) — Apple SE etc. ── */
@media (max-width: 380px) {
.container { padding: 0 12px; }
.card { padding: 18px 14px; }
.topbar { padding: 10px 12px; }
.topbar .brand { font-size: .92rem; }
.b12-tabbar a .ic { font-size: 1.1rem; }
.b12-tabbar a { font-size: .58rem; }
h1 { font-size: 1.5rem; }
}
/* ═══════════════════════════════════════════════════════════════════ */
/* RESPONSIVE POLISH — universal mobile/tablet hardening */
/* Ziel: iPhone SE (320px) bis iPad Pro (1366px), Android-Phones */
/* und -Tablets der letzten 8 Jahre fehlerfrei bedienbar. */
/* ═══════════════════════════════════════════════════════════════════ */
/* ── Defensive globals — prevent surprises across breakpoints ── */
html {
-webkit-text-size-adjust: 100%; /* iOS landscape auto-zoom off */
text-size-adjust: 100%;
scroll-behavior: smooth;
-webkit-tap-highlight-color: rgba(255,90,65,0.20);
}
body {
overflow-x: hidden; /* hard cap horizontal overflow */
text-rendering: optimizeLegibility;
}
img, video, canvas, svg, picture {
max-width: 100%;
height: auto;
display: block;
}
img { object-fit: cover; }
table { max-width: 100%; }
/* iOS verhindert Input-Auto-Zoom nur ab font-size >= 16px */
input, textarea, select {
font-size: 16px;
font-family: inherit;
max-width: 100%;
}
button { font-family: inherit; }
/* Touch-Targets — Apple HIG 44px / Material 48px Minimum */
.btn, button, .topbar nav a, .b12-drawer-link {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn.small { min-height: 36px; }
input[type=checkbox], input[type=radio] {
min-width: 22px; min-height: 22px;
}
/* Sicheres Wrap-Verhalten für lange E-Mails / URLs */
.mono, code, .topbar nav a, .profile-info .meta, .users td, .users th {
word-break: break-word;
overflow-wrap: anywhere;
}
/* ── Tablet-Mid-Breakpoint 721-1023px (iPad portrait, Android tablets) */
/* Phone-Layout endet bei 720, Desktop greift erst ab 1024 — der Tablet-
Bereich braucht eigenes Polishing: zweispaltige Grids wo möglich. */
@media (min-width: 721px) and (max-width: 1023px) {
.container { padding: 0 22px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
.kpi-grid { grid-template-columns: repeat(2, 1fr); }
.profile-grid { grid-template-columns: 1fr 1fr; }
.role-grid { grid-template-columns: repeat(3, 1fr); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
table.users { font-size: 0.92rem; }
.topbar { padding: 14px 22px; }
.topbar nav a { padding: 8px 10px; font-size: 0.88rem; }
}
/* ── Landscape-Phone (kleines Gerät quer): vertikale Höhe knapp ── */
@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px) {
.hero { padding: 28px 0 20px; }
.topbar { padding: 8px 16px; position: static; }
main { padding-top: 0; }
}
/* ── Safe-Area-Insets für iPhone-Notch / Home-Indicator ── */
@supports (padding: max(0px)) {
.container { padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right)); }
.topbar { padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right)); }
}
/* ── Reduced Motion: Respekt für a11y-Setting ── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── Print: minimal usable print-stylesheet ── */
@media print {
.topbar, .b12-tabbar, .b12-drawer, .b12-backdrop,
.ping-panel, .upload-row, .btn { display: none !important; }
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
}
/* Logout-Button im Topbar/Drawer als Link-Optik */
.navlink-btn {
background: none; border: 0; padding: 8px 14px;
color: var(--text-dim); font: inherit; font-size: 0.92rem;
border-radius: var(--radius-sm); cursor: pointer; line-height: 1;
}
.navlink-btn:hover { color: var(--text); background: var(--surface-2); }
/* ═══════════════════════════════════════════════════════════════════ */
/* Landing 2.0 — Vielfalt + Story + Trust */
/* ═══════════════════════════════════════════════════════════════════ */
.hero-eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid var(--primary-border);
border-radius: 999px;
padding: 6px 14px;
margin-bottom: 22px;
}
.hero-stats {
display: flex; gap: 32px; justify-content: center; margin-top: 38px;
flex-wrap: wrap;
}
.hero-stats > div {
display: flex; flex-direction: column; align-items: center;
}
.hero-stats strong {
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 800; color: var(--primary);
line-height: 1; letter-spacing: -0.02em;
}
.hero-stats span {
font-family: var(--font-mono); font-size: 0.72rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-faint); margin-top: 6px;
}
.land-section {
padding: 70px 0 50px;
border-top: 1px solid var(--border);
}
.land-section-head {
text-align: center; max-width: 760px; margin: 0 auto 36px;
}
.land-section-head .eyebrow {
display: inline-block;
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--primary); margin-bottom: 12px;
}
.land-section-head h2 {
font-size: clamp(1.8rem, 4vw, 2.6rem);
margin-bottom: 14px;
}
.land-section-head p.muted { color: var(--text-dim); font-size: 1.05rem; line-height: 1.55; }
/* Drei Account-Klassen */
.class-grid {
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 760px) { .class-grid { grid-template-columns: repeat(3, 1fr); } }
.class-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px 24px;
display: flex; flex-direction: column; gap: 10px;
transition: border-color 0.2s, transform 0.2s;
}
.class-card:hover { border-color: var(--primary-border); transform: translateY(-2px); }
.class-icon { font-size: 2.4rem; line-height: 1; margin-bottom: 6px; }
.class-card h3 { font-size: 1.4rem; }
.class-card p { color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; }
.class-card ul { list-style: none; padding: 0; margin: 8px 0 0; }
.class-card li {
font-size: 0.85rem; color: var(--text-dim);
padding-left: 18px; position: relative; margin-bottom: 6px; line-height: 1.5;
}
.class-card li:before { content: '→'; position: absolute; left: 0; color: var(--primary); font-weight: 700; }
/* Rollen-Wolke (Vielfalt) */
.role-cloud {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; max-width: 1080px; margin: 0 auto;
}
.chip-big {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border-light);
color: var(--text); font-size: 0.95rem; font-weight: 500;
transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.chip-big:hover {
border-color: var(--primary-border);
background: var(--primary-soft);
transform: translateY(-1px);
}
/* Branchen-Pills */
.topic-grid {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; max-width: 1080px; margin: 0 auto;
}
.topic-pill {
display: inline-block;
padding: 8px 14px; border-radius: 8px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text-dim); font-size: 0.88rem;
font-family: var(--font-mono); letter-spacing: 0.02em;
}
/* Spuren / Workflow */
.track-grid {
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 760px) { .track-grid { grid-template-columns: repeat(3, 1fr); } }
.track {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 22px;
}
.track-num {
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--primary); margin-bottom: 10px;
}
.track h3 { font-size: 1.2rem; margin-bottom: 6px; }
.track p { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 12px; line-height: 1.5; }
.track code {
display: block;
font-family: var(--font-mono); font-size: 0.78rem;
background: var(--bg); padding: 10px 12px; border-radius: var(--radius-sm);
color: var(--text-dim); border: 1px solid var(--border-light);
white-space: pre-wrap; word-break: break-word; line-height: 1.6;
}
/* Trust-Cards */
.trust-grid {
display: grid; grid-template-columns: 1fr; gap: 12px;
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 640px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }
.trust-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 18px;
}
.trust-card strong { color: var(--primary); display: block; margin-bottom: 6px; font-size: 0.95rem; }
.trust-card p { color: var(--text-dim); font-size: 0.85rem; margin: 0; line-height: 1.5; }
/* Diversity-Cards */
.diversity-grid {
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .diversity-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .diversity-grid { grid-template-columns: repeat(3, 1fr); } }
.diversity-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius); padding: 22px;
}
.diversity-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.diversity-card p { color: var(--text-dim); font-size: 0.88rem; line-height: 1.5; margin: 0; }
/* Status-Checklist */
.checklist {
display: grid; grid-template-columns: 1fr; gap: 8px;
max-width: 760px; margin: 0 auto;
font-family: var(--font-mono); font-size: 0.86rem;
}
@media (min-width: 720px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist > div {
padding: 8px 12px;
background: var(--surface);
border-left: 2px solid var(--border-light);
color: var(--text-dim);
}
.checklist > div:first-letter { font-weight: 800; color: var(--primary); }
/* Sonstiges */
.muted.small { font-size: 0.85rem; }
.muted.center { text-align: center; max-width: 640px; margin: 18px auto 0; }
/* Sprach-Switcher (Flaggen rechts in der Topbar) */
.lang-switcher {
display: flex; gap: 4px; margin-left: 10px; align-items: center;
}
.lang-flag {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 6px;
font-size: 18px; line-height: 1;
text-decoration: none;
background: transparent; border: 1px solid transparent;
opacity: 0.55; transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
.lang-flag:hover { opacity: 1; }
.lang-flag.active {
opacity: 1;
background: var(--primary-soft);
border-color: var(--primary-border);
}
@media (max-width: 720px) {
.lang-switcher { margin-left: 4px; gap: 2px; }
.lang-flag { width: 26px; height: 26px; font-size: 16px; }
}
/* ═══════════════════════════════════════════════════════════════════ */
/* Landing 3.0 — Social-Media-Style */
/* ═══════════════════════════════════════════════════════════════════ */
/* Hero */
.v2-hero {
position: relative; overflow: hidden;
padding: 90px 0 70px; text-align: center;
}
.v2-hero-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(circle at 20% 30%, rgba(255,90,65,0.13), transparent 55%),
radial-gradient(circle at 80% 70%, rgba(255,90,65,0.07), transparent 55%);
z-index: -1;
}
.v2-hero-tag {
display: inline-block;
background: var(--primary-soft); border: 1px solid var(--primary-border);
color: var(--primary);
padding: 6px 14px; border-radius: 999px;
font-family: var(--font-mono); font-size: 0.72rem;
letter-spacing: 0.12em; margin-bottom: 24px;
text-transform: uppercase; font-weight: 600;
}
/* (v2-pulse animation entfernt — Tag ist statisch monochrom) */
.v2-hero-h1 {
font-size: clamp(2.4rem, 7vw, 4.2rem);
font-weight: 900; line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 18px;
}
.v2-grad {
color: var(--primary);
font-style: italic;
}
.v2-hero-lead {
color: var(--text-dim); font-size: 1.15rem; line-height: 1.55;
max-width: 620px; margin: 0 auto 30px;
}
.v2-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.v2-btn-primary {
background: var(--primary); color: #000;
padding: 14px 26px; border-radius: 999px;
font-weight: 700; font-size: 1.05rem;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
display: inline-block;
}
.v2-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(255,90,65,0.4);
color: #000;
}
.v2-btn-ghost {
background: var(--surface); color: var(--text);
padding: 14px 26px; border-radius: 999px;
border: 1px solid var(--border-light);
font-weight: 600; font-size: 1.05rem;
text-decoration: none;
display: inline-block;
}
.v2-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.v2-btn-big { padding: 18px 32px; font-size: 1.15rem; }
.v2-hero-pulse {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 32px;
font-size: 0.86rem; color: var(--text-dim);
}
.v2-pulse-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 0 rgba(74,211,172, 0.7);
animation: v2-online 1.6s ease-in-out infinite;
}
@keyframes v2-online {
0% { box-shadow: 0 0 0 0 rgba(74,211,172, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(74,211,172, 0); }
100% { box-shadow: 0 0 0 0 rgba(74,211,172, 0); }
}
/* Section base */
.v2-section { padding: 60px 0; }
.v2-section-head { text-align: center; margin-bottom: 36px; }
.v2-section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; }
.v2-eyebrow {
display: inline-block;
color: var(--primary);
padding: 0; border: 0; background: transparent;
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.18em; text-transform: uppercase;
margin-bottom: 12px; font-weight: 600;
}
/* Profile-Feed-Karten */
.v2-feed {
display: grid; gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 540px) { .v2-feed { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .v2-feed { grid-template-columns: repeat(4, 1fr); } }
.v2-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
position: relative;
}
.v2-card:hover {
transform: translateY(-3px);
border-color: var(--primary-border);
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.v2-card-cover {
height: 90px; position: relative;
}
.v2-card-body {
padding: 0 14px 14px;
position: relative;
}
.v2-avatar {
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 1.05rem; color: #000;
margin-top: -28px; border: 3px solid var(--surface);
margin-bottom: 8px;
}
.v2-name {
font-weight: 800; font-size: 1.05rem;
display: flex; align-items: center; gap: 6px;
}
.v2-badge {
background: var(--success); color: #000;
font-size: 0.62rem; padding: 2px 6px; border-radius: 999px;
font-weight: 700;
}
.v2-role {
color: var(--text-dim); font-size: 0.86rem; margin-top: 2px;
}
.v2-tags {
font-family: var(--font-mono); font-size: 0.74rem;
color: var(--primary); margin-top: 10px;
word-break: break-word;
}
.v2-meta {
font-size: 0.78rem; color: var(--text-faint);
margin-top: 8px; display: flex; align-items: center; gap: 6px;
}
.v2-online {
width: 7px; height: 7px; border-radius: 50%; background: var(--success);
}
.v2-feed-note {
text-align: center; color: var(--text-faint);
font-size: 0.85rem; margin-top: 22px;
}
/* Steps */
.v2-steps {
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .v2-steps { grid-template-columns: repeat(4, 1fr); } }
.v2-step {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 22px;
position: relative;
}
.v2-step-num {
font-family: var(--font-mono); font-size: 0.78rem;
color: var(--primary); font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
margin-bottom: 12px;
display: inline-block;
padding: 4px 10px;
border: 1px solid var(--primary-border);
border-radius: 999px;
}
.v2-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.v2-step p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; margin: 0; }
/* Hashtag-Wolke */
.v2-hashtags {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center; max-width: 1080px; margin: 0 auto;
}
.v2-hashtags span {
display: inline-block;
padding: 7px 13px; border-radius: 999px;
background: transparent; border: 1px solid var(--border-light);
color: var(--text-dim); font-family: var(--font-mono);
font-size: 0.78rem; letter-spacing: 0.02em;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* Monochrom: alle Hashtags im gleichen Ton */
.v2-hashtags span:hover {
color: var(--primary);
border-color: var(--primary-border);
background: var(--primary-soft);
}
/* Vibes */
.v2-vibes {
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 720px) { .v2-vibes { grid-template-columns: repeat(3, 1fr); } }
.v2-vibe {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 18px; padding: 28px 22px;
text-align: center;
transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.v2-vibe:hover {
transform: translateY(-3px);
border-color: var(--primary-border);
background: var(--surface-2);
}
.v2-vibe-emoji { font-size: 2.2rem; margin-bottom: 12px; line-height: 1; opacity: 0.85; filter: grayscale(0.2); }
.v2-vibe-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
.v2-vibe-text { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
/* Trust-Bar */
.v2-trust-bar {
display: grid; grid-template-columns: 1fr; gap: 12px;
background: var(--surface); border-radius: 14px;
padding: 22px; margin: 60px auto;
border: 1px solid var(--border);
max-width: 1080px;
}
@media (min-width: 720px) { .v2-trust-bar { grid-template-columns: repeat(4, 1fr); } }
.v2-trust-bar > div {
text-align: center; color: var(--text-dim);
font-size: 0.92rem;
}
.v2-trust-bar strong { color: var(--text); font-weight: 600; }
/* Final CTA */
.v2-final {
text-align: center; padding: 70px 0 60px;
background:
radial-gradient(circle at 50% 0%, rgba(255,90,65,0.08), transparent 60%),
var(--surface);
border-radius: 20px;
border: 1px solid var(--primary-border);
margin: 60px auto 30px;
max-width: 1080px;
}
.v2-final h2 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; margin-bottom: 12px; }
.v2-final p { color: var(--text-dim); font-size: 1.1rem; margin-bottom: 28px; }
/* ═══════════════════════════════════════════════════════════════════ */
/* Style-Sweep v1.6 — globale Brand-Konsistenz */
/* Yellow als einziger Primär-Akzent. Subtle borders. Klare Hierarchie. */
/* ═══════════════════════════════════════════════════════════════════ */
/* Eyebrow konsistent ueber alle Seiten */
.eyebrow {
display: inline-block;
color: var(--primary);
background: transparent; padding: 0; border: 0;
font-family: var(--font-mono);
font-size: 0.7rem; letter-spacing: 0.18em;
text-transform: uppercase; font-weight: 600;
margin-bottom: 12px;
}
/* Section-Head: konsistente Spacing */
.section-head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.section-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 8px; }
.section-head h2 { font-size: 1.3rem; margin-bottom: 6px; }
.section-head .muted { font-size: 0.92rem; }
/* Buttons: konsistent ueber die ganze Plattform */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 18px; border-radius: 999px;
background: var(--primary); color: #000;
border: 1px solid var(--primary);
font-weight: 600; font-size: 0.95rem;
cursor: pointer; text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(255,90,65,0.28);
color: #000;
}
.btn.ghost {
background: transparent; color: var(--text);
border: 1px solid var(--border-light);
}
.btn.ghost:hover {
background: var(--surface-2); color: var(--text);
box-shadow: none;
}
.btn.small { padding: 6px 12px; font-size: 0.84rem; min-height: 32px; }
.btn.full { width: 100%; padding: 12px; }
/* Card konsistent */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 22px;
transition: border-color 0.15s, transform 0.15s;
}
.card:not(.narrow):hover { border-color: var(--border-light); }
.card.narrow { padding: 28px; }
/* Pills: alle einheitlich */
.pill {
display: inline-block;
padding: 4px 10px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border-light);
color: var(--text-dim);
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.04em;
}
.pill.role-pill { color: var(--text); }
.pill.admin {
background: var(--primary-soft); color: var(--primary);
border-color: var(--primary-border);
}
.pill.active {
background: rgba(74,211,172,0.10); color: var(--success);
border-color: rgba(74,211,172,0.4);
}
.pill.inactive {
background: var(--surface-2); color: var(--text-faint);
}
/* Role-Tiles: edler */
.role-tile {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px; padding: 14px;
cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.role-tile:hover { border-color: var(--primary-border); }
.role-tile.checked, .role-tile:has(input:checked) {
border-color: var(--primary);
background: var(--primary-soft);
}
.role-tile input { display: none; }
.role-tile .name { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; }
.role-tile .desc { color: var(--text-dim); font-size: 0.8rem; line-height: 1.4; }
/* Form-Inputs konsistent */
input[type="text"], input[type="email"], input[type="url"],
input[type="password"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
background: var(--bg); color: var(--text);
border: 1px solid var(--border-light);
border-radius: 10px; padding: 11px 14px;
width: 100%; font-family: inherit; font-size: 16px;
transition: border-color 0.15s, background 0.15s;
}
input:focus, select:focus, textarea:focus {
outline: 0;
border-color: var(--primary);
background: var(--surface);
}
/* Date-Input: ganzes Feld klickbar (cursor signalisiert es), Kalender-Icon
im Hell-Modus deutlich sichtbarer (native gray ist auf hellem Bg
schwer zu erkennen). Im Dark-Modus bleibt der Standard. */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
cursor: pointer;
padding: 4px;
opacity: .7;
transition: opacity 0.15s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
opacity: .85;
}
.form-row { margin-bottom: 16px; }
.form-row label {
display: block;
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-dim); margin-bottom: 6px;
}
.form-row .help {
font-size: 0.78rem; color: var(--text-faint); margin-top: 4px;
}
/* KPI-Grid: subtle, monochrom */
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 22px; }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 920px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 18px 20px;
}
.kpi .label {
font-family: var(--font-mono); font-size: 0.68rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--text-faint); margin-bottom: 6px;
}
.kpi .value {
font-size: 1.8rem; font-weight: 800; line-height: 1.1;
color: var(--text); letter-spacing: -0.02em;
}
.kpi .delta { color: var(--success); font-size: 0.78rem; margin-top: 4px; }
/* Filter-Chips: monochrom */
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.chip {
padding: 6px 12px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--border-light);
color: var(--text-dim); font-family: var(--font-mono);
font-size: 0.78rem; text-decoration: none;
transition: color 0.15s, border-color 0.15s;
}
.chip:hover, .chip.active {
color: var(--primary); border-color: var(--primary-border);
background: var(--primary-soft);
}
/* Alert / info Boxes — flach + Yellow-Akzent */
.alert {
border-radius: 10px; padding: 12px 16px; margin-bottom: 14px;
font-size: 0.9rem; line-height: 1.5;
background: var(--surface); border: 1px solid var(--border-light);
}
.alert.error {
border-left: 3px solid var(--danger); color: var(--danger);
}
.alert.success {
border-left: 3px solid var(--success); color: var(--success);
}
.alert.info {
border-left: 3px solid var(--primary); color: var(--text);
}
/* Divider */
.divider {
height: 1px; background: var(--border); margin: 14px 0;
}
/* KV-Liste */
.kv, .kv-tight {
display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr;
gap: 8px 16px;
}
.kv .k, .kv-tight .k {
font-family: var(--font-mono); font-size: 0.72rem;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-faint);
}
.kv .v, .kv-tight .v { color: var(--text); }
/* ═══════════════════════════════════════════════════════════════════ */
/* User-Pages Polish — Dashboard, Profile, Onboarding, Quests, Admin */
/* ═══════════════════════════════════════════════════════════════════ */
/* Sectionheads: alle Hauptseiten bekommen Eyebrow vor h1, sofern noch nicht da */
.section-head h1 {
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
}
.section-head h1 + .muted, .section-head .muted {
color: var(--text-dim); font-size: 0.95rem;
}
/* Profile-Header: aufgeräumt, weniger bunt */
.profile-cover {
position: relative; height: 180px; border-radius: 16px;
background-size: cover; background-position: center;
background-color: var(--surface);
border: 1px solid var(--border);
}
.profile-header {
display: flex; gap: 18px; align-items: flex-end;
padding: 0 8px 8px; margin-top: -52px; position: relative;
}
.profile-header .profile-avatar {
width: 104px; height: 104px; border-radius: 50%;
border: 3px solid var(--bg);
background-color: var(--primary); color: #000;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 2rem;
background-size: cover; background-position: center;
flex-shrink: 0;
}
.profile-info h1 { font-size: 1.7rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.profile-info .meta {
color: var(--text-faint); font-family: var(--font-mono);
font-size: 0.78rem; letter-spacing: 0.06em;
}
.profile-status .pill { font-size: 0.68rem; }
/* Profile-Grid: breitere Karten, einheitlicher Hover */
.profile-grid {
display: grid; grid-template-columns: 1fr; gap: 16px;
margin-top: 18px;
}
@media (min-width: 880px) { .profile-grid { grid-template-columns: 1fr 1fr; } }
/* Bio-Block clean */
.profile-info + p, .upload-feedback + p {
color: var(--text-dim); font-size: 0.95rem; line-height: 1.6;
margin: 14px 0;
}
/* Galerie-Bilder */
.gallery-thumbs, .profile-gallery img {
border-radius: 10px; transition: transform 0.15s, box-shadow 0.15s;
}
.gallery-thumbs:hover, .profile-gallery img:hover {
transform: scale(1.02);
box-shadow: 0 8px 22px rgba(0,0,0,0.4);
}
/* Onboarding wizard: zentralisierter Fortschritt */
.onboarding-banner {
background: var(--primary-soft); border: 1px solid var(--primary-border);
border-radius: 14px; padding: 16px 20px; margin: 12px 0 24px;
display: flex; gap: 14px; align-items: center; justify-content: space-between;
flex-wrap: wrap;
}
.onboarding-banner .text {
font-size: 0.95rem; color: var(--text);
}
.onboarding-banner .text strong { color: var(--primary); }
/* Chat-Shell: aufgeräumt */
.chat-shell {
display: grid; grid-template-columns: 280px 1fr; gap: 14px;
height: calc(100vh - 180px); min-height: 560px;
}
.chat-list-pane, .chat-conversation {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.chat-header {
padding: 14px 18px; border-bottom: 1px solid var(--border);
display: flex; gap: 10px; align-items: center;
}
.chat-stream {
flex: 1; overflow-y: auto; padding: 18px;
display: flex; flex-direction: column; gap: 10px;
}
.msg {
background: var(--surface-2); padding: 10px 14px;
border-radius: 14px; max-width: 75%; line-height: 1.45;
font-size: 0.93rem;
}
.msg.mine {
background: var(--primary); color: #000;
align-self: flex-end;
}
/* Quests / Briefings cards einheitlich */
.quest-card, .briefing-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 18px; margin-bottom: 12px;
transition: border-color 0.15s;
}
.quest-card:hover, .briefing-card:hover { border-color: var(--primary-border); }
/* Admin-Tables */
.users {
width: 100%; border-collapse: separate; border-spacing: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden;
}
.users th, .users td {
padding: 12px 16px; text-align: left;
border-bottom: 1px solid var(--border);
}
.users th {
font-family: var(--font-mono); font-size: 0.7rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-faint);
background: var(--surface-2);
}
.users tbody tr:last-child td { border-bottom: 0; }
.users tbody tr:hover { background: rgba(255,255,255,0.02); }
/* Helper-states */
.muted { color: var(--text-faint); }
.subtitle { color: var(--text-dim); margin-bottom: 18px; font-size: 0.95rem; }
/* ═══════════════════════════════════════════════════════════════════ */
/* Landing 4.0 — Industries + Live Briefings + Image-Cards */
/* ═══════════════════════════════════════════════════════════════════ */
/* v2-avatar with optional background-image */
.v2-avatar { background-size: cover !important; background-position: center !important; }
/* Industries cluster */
.v2-industries {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 540px) { .v2-industries { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px) { .v2-industries { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .v2-industries { grid-template-columns: repeat(6, 1fr); } }
.v2-ind {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 18px 12px;
text-align: center; transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.v2-ind:hover {
transform: translateY(-3px);
border-color: var(--primary-border);
background: var(--surface-2);
}
.v2-ind-icon { font-size: 1.8rem; margin-bottom: 6px; line-height: 1; }
.v2-ind-name {
font-family: var(--font-mono); font-size: 0.74rem;
letter-spacing: 0.06em; color: var(--text-dim);
}
/* Briefings list */
.v2-briefs {
display: grid; grid-template-columns: 1fr; gap: 12px;
max-width: 1080px; margin: 0 auto;
}
@media (min-width: 720px) { .v2-briefs { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .v2-briefs { grid-template-columns: repeat(3, 1fr); } }
.v2-brief-card {
display: block;
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 18px;
text-decoration: none; color: var(--text);
transition: transform 0.15s, border-color 0.15s;
}
.v2-brief-card:hover {
transform: translateY(-3px);
border-color: var(--primary-border);
color: var(--text);
}
.v2-brief-tag {
display: inline-block;
font-family: var(--font-mono); font-size: 0.68rem;
color: var(--danger); letter-spacing: 0.16em; font-weight: 700;
margin-bottom: 8px;
}
.v2-brief-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; line-height: 1.3; }
.v2-brief-co { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 10px; }
.v2-brief-meta {
display: flex; flex-wrap: wrap; gap: 6px;
font-family: var(--font-mono); font-size: 0.72rem;
}
.v2-brief-meta > span {
padding: 3px 8px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--border-light);
color: var(--text-dim);
}
.v2-briefs-empty {
text-align: center; padding: 40px 20px;
background: var(--surface); border: 1px dashed var(--border-light);
border-radius: 14px; max-width: 720px; margin: 0 auto;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* Login-Button + Footer 2.0 */
/* ═══════════════════════════════════════════════════════════════════ */
/* Topbar Login/Signup buttons (für unauthenticated users) */
.navlink-btn-primary {
display: inline-flex; align-items: center;
background: var(--primary); color: #000;
padding: 8px 18px; border-radius: 999px;
font-weight: 700; font-size: 0.9rem;
text-decoration: none; margin-left: 8px;
transition: transform 0.15s, box-shadow 0.15s;
}
.navlink-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(255,90,65,0.4);
color: #000;
}
.navlink-btn-ghost {
display: inline-flex; align-items: center;
color: var(--text); padding: 8px 14px;
border: 1px solid var(--border-light);
border-radius: 999px;
font-weight: 500; font-size: 0.9rem;
text-decoration: none; margin-left: 6px;
}
.navlink-btn-ghost:hover {
background: var(--surface-2); color: var(--text);
}
@media (max-width: 720px) {
.navlink-btn-ghost { display: none; }
.navlink-btn-primary { padding: 6px 14px; font-size: 0.8rem; }
}
/* Footer 2.0 */
.v2-footer {
border-top: 1px solid var(--border);
background: var(--bg);
padding: 50px 0 24px;
margin-top: 60px;
}
.v2-footer-grid {
display: grid; grid-template-columns: 1fr; gap: 32px;
max-width: 1180px; margin: 0 auto; padding: 0 28px;
}
@media (min-width: 720px) { .v2-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.v2-foot-brand .brand { color: var(--text); }
.v2-foot-tag { font-size: 0.92rem; color: var(--text); opacity: 0.85; }
.v2-foot-col h4 {
font-family: var(--font-mono); font-size: 0.72rem;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--primary); margin-bottom: 18px; font-weight: 600;
}
.v2-foot-col a, .v2-foot-col p, .v2-foot-col div {
color: var(--text); font-size: 0.95rem;
line-height: 1.7; font-weight: 400;
text-decoration: none; transition: color 0.15s;
}
.v2-foot-col a { display: block; padding: 4px 0; }
.v2-foot-col a:hover { color: var(--primary); }
.v2-foot-col .muted { color: var(--text); opacity: 0.75; }
.v2-foot-col strong { color: var(--text); font-weight: 600; }
.v2-foot-socials {
display: flex; gap: 10px; flex-wrap: wrap;
margin-top: 4px;
}
.v2-foot-socials a {
width: 38px; height: 38px;
border-radius: 50%; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border-light);
color: var(--text-dim);
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.v2-foot-socials a:hover {
color: var(--primary);
border-color: var(--primary-border);
background: var(--primary-soft);
}
.v2-footer-bottom {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
max-width: 1180px; margin: 36px auto 0;
padding: 22px 28px 0; border-top: 1px solid var(--border);
}
.v2-footer-bottom a, .v2-footer-bottom .mono {
color: var(--text); opacity: 0.85;
font-size: 0.85rem;
text-decoration: none;
}
.v2-footer-bottom a:hover { color: var(--primary); opacity: 1; }
/* Topbar-CTAs: nutzen die globale .btn-Klasse fuer Konsistenz mit allen
anderen Buttons der Seite (Hero, Sub-Pages, Forms). Eigene Klasse
erlaubt nur kleines Margin + Mobile-Verhalten. */
.btn.topbar-cta {
margin-left: 6px;
font-size: 0.85rem;
padding: 8px 16px;
min-height: 36px;
}
@media (max-width: 720px) {
.btn.topbar-cta.ghost { display: none; }
.btn.topbar-cta { padding: 6px 14px; font-size: 0.78rem; }
}
/* ═══════════════════════════════════════════════════════════════════ */
/* Mobile-Nav v2 — Hamburger + Drawer für ALLE Nutzer (auch unauth) */
/* ═══════════════════════════════════════════════════════════════════ */
/* Hamburger nur Mobile sichtbar */
.b12-drawer-toggle {
display: none;
background: none; border: 0; cursor: pointer;
width: 40px; height: 40px; padding: 6px;
color: var(--text);
align-items: center; justify-content: center;
}
.b12-drawer-toggle svg {
width: 22px; height: 22px;
stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.b12-drawer-toggle:hover { color: var(--primary); }
@media (max-width: 760px) {
.b12-drawer-toggle { display: inline-flex; }
/* Topbar nav komplett aus auf Mobile (für ALLE Nutzer) */
.topbar nav { display: none; }
/* Sub-Page-Topbar-CTAs (Sign up Ghost) ausblenden — Login bleibt sichtbar */
.btn.topbar-cta.ghost { display: none; }
/* Lang-Switcher kleiner */
.lang-switcher { gap: 2px; margin-left: 4px; }
.lang-flag { width: 26px; height: 26px; font-size: 16px; }
}
/* Drawer slide-in von rechts */
.b12-drawer {
position: fixed; top: 0; right: -100%;
width: 86%; max-width: 360px; height: 100%;
background: var(--surface);
border-left: 1px solid var(--border);
z-index: 100;
transition: right 0.25s ease;
display: flex; flex-direction: column;
padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
overflow-y: auto;
}
.b12-drawer.open { right: 0; }
.b12-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(2px);
z-index: 99;
opacity: 0; pointer-events: none;
transition: opacity 0.25s;
}
.b12-backdrop.open { opacity: 1; pointer-events: auto; }
.b12-drawer-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 22px; padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.b12-drawer-close {
background: none; border: 0; cursor: pointer;
color: var(--text-dim); font-size: 1.2rem;
width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
}
.b12-drawer-close:hover { color: var(--primary); }
.b12-drawer-nav {
display: flex; flex-direction: column; gap: 2px;
flex: 1;
}
.b12-drawer-link {
display: block;
padding: 14px 12px; border-radius: 10px;
color: var(--text); text-decoration: none;
font-size: 1.05rem; font-weight: 500;
transition: background 0.15s, color 0.15s;
}
.b12-drawer-link:hover { background: var(--surface-2); color: var(--primary); }
.b12-drawer-bottom {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--border);
}
/* Body scroll lock when drawer open is handled by JS body.style.overflow */
/* ═══════════════════════════════════════════════════════════════════ */
/* Schrift-Refresh: alles weißer (User-Wunsch). */
/* Bestehende Klassen bleiben unverändert; wir biegen die CSS-Variablen */
/* und die häufigen 'muted'/'faint' Patches um. */
/* ═══════════════════════════════════════════════════════════════════ */
:root {
--text-dim: rgba(255, 255, 255, 0.85); /* statt #a8a8a8 */
--text-faint: rgba(255, 255, 255, 0.62); /* statt #666666 */
}
.muted, .v2-foot-tag, .v2-footer-bottom .mono { color: var(--text-dim) !important; }
/* ══════════════════════════════════════════════════════════════════ */
/* LIGHT THEME — variable overrides. Everything that uses var(--…) */
/* flips automatically. Forced via , or auto */
/* via the OS setting when the user hasn't explicitly picked. */
/* ══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
--bg: #FBF8F3;
--surface: #FFFFFF;
--surface-2: #F2ECE2;
--border: #E6DECF;
--border-light: #D9D0C0;
--text: #1B1714;
--text-dim: #6F665B;
--text-faint: #A39A8D;
--primary: #FF5A41;
--primary-hover: #E84A33;
--primary-soft: rgba(255, 90, 65, 0.10);
--primary-border: rgba(255, 90, 65, 0.38);
--danger: #E5484D;
--success: #18B98A;
--accent: #7A5CFF;
--warning: #E0A234;
--on-primary: #1B1714;
--primary-text: #D6422C;
--shadow: 0 8px 30px rgba(60, 40, 20, 0.10);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
--bg: #FBF8F3;
--surface: #FFFFFF;
--surface-2: #F2ECE2;
--border: #E6DECF;
--border-light: #D9D0C0;
--text: #1B1714;
--text-dim: #6F665B;
--text-faint: #A39A8D;
--primary: #FF5A41;
--primary-hover: #E84A33;
--primary-soft: rgba(255, 90, 65, 0.10);
--primary-border: rgba(255, 90, 65, 0.38);
--danger: #E5484D;
--success: #18B98A;
--accent: #7A5CFF;
--warning: #E0A234;
--on-primary: #1B1714;
--primary-text: #D6422C;
--shadow: 0 8px 30px rgba(60, 40, 20, 0.10);
}
}
/* Theme picker in settings (System / Hell / Dunkel) */
.theme-choice{display:inline-flex;gap:8px;flex-wrap:wrap}
.theme-choice button{background:var(--surface-2);border:1px solid var(--border);color:var(--text-dim);
border-radius:10px;padding:10px 16px;cursor:pointer;font-size:.92rem;font-weight:600;
display:inline-flex;align-items:center;gap:6px;transition:border-color .12s, color .12s, background .12s}
.theme-choice button:hover{border-color:var(--primary);color:var(--text)}
.theme-choice button.active{background:var(--primary-soft);border-color:var(--primary-border);color:var(--primary)}
/* Digital-signature panel on the contract accept action */
.sign-form{width:100%}
.sign-box{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;
padding:14px;display:flex;flex-direction:column;gap:10px;max-width:340px}
.sign-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--text-faint)}
.sign-box input[type=text]{width:100%;box-sizing:border-box}
.sign-check{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:var(--text-dim);cursor:pointer}
.sign-check input{margin-top:3px;flex:0 0 auto}
.profile-info .meta, .ts, .v2-meta, .v2-feed-note, .qc-meta,
.v2-card .v2-meta, .help, .form-row .help {
color: var(--text-dim) !important;
}
.v2-foot-col a, .v2-foot-col p, .v2-foot-col div, .v2-foot-col strong { color: var(--text) !important; }
.v2-foot-col .muted { color: var(--text-dim) !important; }
.section-head .muted, .section-head p { color: var(--text-dim) !important; }
.land-section-head p.muted { color: var(--text-dim) !important; }
.v2-section-head p.muted { color: var(--text-dim) !important; }
.v2-vibe-text { color: var(--text-dim) !important; }
.v2-step p, .v2-step h3 { color: var(--text) !important; }
.v2-step p { color: var(--text-dim) !important; }
.kv .k, .kv-tight .k { color: var(--text-faint) !important; }
.kv .v, .kv-tight .v { color: var(--text) !important; }
/* ═══════════════════════════════════════════════════════════════════ */
/* Cover/Avatar 2.0 — größer, mit Placeholder-Name + Delete-Button */
/* ═══════════════════════════════════════════════════════════════════ */
.profile-cover {
position: relative; height: 360px; border-radius: 18px;
background-size: cover; background-position: center;
background-color: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1024px) { .profile-cover { height: 280px; } }
@media (max-width: 720px) { .profile-cover { height: 180px; } }
.cover-placeholder {
text-align: center;
padding: 20px;
pointer-events: none;
}
.cover-name {
font-family: var(--font-body);
font-size: clamp(1.6rem, 4vw, 2.6rem);
font-weight: 800; color: var(--text);
letter-spacing: -0.02em; line-height: 1.1;
margin-bottom: 10px;
text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.cover-hint {
font-family: var(--font-mono); font-size: 0.74rem;
letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.65);
}
.img-hint-size {
display: block;
margin-top: 4px;
font-family: var(--font-mono); font-size: 0.62rem;
letter-spacing: 0.08em; text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
.img-delete-form {
position: absolute; top: 8px; right: 8px;
z-index: 5;
}
.img-delete-form.cover-del { top: 12px; right: 12px; }
.img-delete-btn {
background: rgba(0,0,0,0.65);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
width: 30px; height: 30px;
border-radius: 50%;
cursor: pointer; font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s, border-color 0.15s;
padding: 0;
}
.img-delete-btn:hover {
background: var(--danger); color: #fff; border-color: var(--danger);
}
.profile-avatar.editable {
position: relative;
}
.profile-avatar .cam-overlay {
position: absolute; inset: 0;
display: none; align-items: center; justify-content: center; flex-direction: column;
background: rgba(0,0,0,0.5);
border-radius: inherit;
font-size: 1.5rem; color: #fff;
cursor: pointer;
}
.profile-avatar.editable:hover .cam-overlay { display: flex; }
.profile-avatar .cam-overlay .lbl {
display: block; margin-top: 6px;
font-size: 0.7rem; font-family: var(--font-mono);
letter-spacing: 0.1em; text-transform: uppercase;
}
.profile-cover .cam-overlay {
display: none; align-items: center; justify-content: center;
position: absolute; inset: 0;
background: rgba(0,0,0,0.4);
font-size: 1.6rem; color: #fff; cursor: pointer;
}
.profile-cover:hover .cam-overlay { display: flex; }
.profile-cover .cam-overlay .lbl {
display: block; margin-left: 10px;
font-size: 0.78rem; font-family: var(--font-mono);
letter-spacing: 0.12em; text-transform: uppercase;
}
/* Avatar-Initials kleiner + sauber zentriert (Fix für Abschneide-Issue) */
.profile-avatar {
display: flex !important; align-items: center !important; justify-content: center !important;
overflow: hidden !important;
line-height: 1 !important;
}
.avatar-initials {
font-size: 0.7em !important;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
display: inline-block;
text-align: center;
}
.profile-avatar .avatar-img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
border-radius: inherit;
}
/* ═══════════════════════════════════════════════════════════════════ */
/* Size-Refresh v2.8 — orientiert an b12.media: */
/* - Größere Typografie */
/* - Mehr Whitespace zwischen Sektionen */
/* - Breiterer Container für moderne Bildschirme */
/* - Größere CTAs */
/* ═══════════════════════════════════════════════════════════════════ */
html, body {
font-size: 17px; /* base 16 → 17, etwas größer */
line-height: 1.65;
}
.container {
max-width: 1320px !important;
padding: 0 32px !important;
}
@media (max-width: 720px) {
.container { padding: 0 20px !important; }
html, body { font-size: 16px; }
}
/* Headlines deutlich größer */
h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem) !important; line-height: 1.15; }
h3 { font-size: 1.25rem !important; }
h4 { font-size: 1.05rem !important; }
/* Hero noch größer */
.v2-hero { padding: 110px 0 90px !important; }
.v2-hero-h1 { font-size: clamp(2.8rem, 7vw, 5rem) !important; line-height: 1.04 !important; }
.v2-hero-lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem) !important; line-height: 1.6 !important; max-width: 680px; }
/* Section-Padding großzügiger (b12-Stil) */
.v2-section { padding: 90px 0 !important; }
.v2-section-head { margin-bottom: 50px !important; }
.v2-section-head h2 { font-size: clamp(2rem, 4vw, 2.8rem) !important; }
.v2-section-head p.muted { font-size: 1.08rem; max-width: 620px; margin: 0 auto; }
/* Buttons größer/präsenter */
.v2-btn-primary, .v2-btn-ghost {
padding: 16px 32px !important;
font-size: 1.08rem !important;
font-weight: 700;
}
.v2-btn-big { padding: 20px 40px !important; font-size: 1.2rem !important; }
.btn:not(.small):not(.topbar-cta) {
padding: 13px 24px !important;
font-size: 1.02rem !important;
}
/* Cards-Padding etwas größer */
.v2-card-body { padding: 0 18px 18px !important; }
.v2-card-cover { height: 110px !important; }
.v2-name { font-size: 1.12rem !important; }
.v2-role { font-size: 0.92rem !important; }
.v2-tags { font-size: 0.8rem !important; margin-top: 12px; }
.v2-meta { font-size: 0.84rem !important; margin-top: 10px; }
/* Avatar größer in Card */
.v2-card .v2-avatar {
width: 64px !important; height: 64px !important;
font-size: 1.15rem !important;
margin-top: -32px !important;
}
/* Vibes größer */
.v2-vibe { padding: 36px 28px !important; }
.v2-vibe-emoji { font-size: 2.6rem !important; margin-bottom: 14px !important; }
.v2-vibe-title { font-size: 1.45rem !important; margin-bottom: 8px; }
.v2-vibe-text { font-size: 1rem !important; line-height: 1.6 !important; }
/* Steps */
.v2-step { padding: 28px 24px !important; }
.v2-step h3 { font-size: 1.15rem !important; margin-bottom: 8px; }
.v2-step p { font-size: 0.98rem !important; }
/* Industries cluster */
.v2-ind { padding: 24px 14px !important; }
.v2-ind-icon { font-size: 2.2rem !important; margin-bottom: 10px !important; }
.v2-ind-name { font-size: 0.82rem !important; letter-spacing: 0.08em; }
/* Trust-Bar prominenter */
.v2-trust-bar {
padding: 28px !important;
margin: 80px auto !important;
font-size: 1rem;
}
.v2-trust-bar > div { font-size: 1rem !important; }
/* Hero-Stats größer */
.hero-stats { gap: 48px !important; margin-top: 50px !important; }
.hero-stats strong { font-size: clamp(2.4rem, 5vw, 3.4rem) !important; }
.hero-stats span { font-size: 0.78rem !important; margin-top: 8px; }
/* Topbar etwas mehr Luft */
.topbar { padding: 22px 32px !important; }
.brand { font-size: 1.3rem !important; }
.brand .brand-logo { width: 28px !important; height: 28px !important; }
/* Final-CTA noch prominenter */
.v2-final {
padding: 100px 0 90px !important;
margin: 80px auto 50px !important;
}
.v2-final h2 { font-size: clamp(2.6rem, 6vw, 3.6rem) !important; margin-bottom: 18px; }
.v2-final p { font-size: 1.18rem !important; margin-bottom: 36px; }
/* Footer großzügiger */
.v2-footer { padding: 80px 0 36px !important; margin-top: 100px !important; }
.v2-footer-grid { gap: 50px !important; padding: 0 32px !important; }
.v2-foot-col h4 { font-size: 0.78rem !important; margin-bottom: 22px !important; }
.v2-foot-col a, .v2-foot-col p, .v2-foot-col div { font-size: 1rem !important; line-height: 1.85 !important; }
.v2-foot-tag { font-size: 1rem !important; }
.v2-foot-socials a { width: 44px !important; height: 44px !important; }
.v2-foot-socials a svg { width: 24px !important; height: 24px !important; }
/* Auth-Forms etwas größer */
.card.narrow { max-width: 520px !important; padding: 36px 32px !important; }
.card.narrow h1 { font-size: 2.1rem !important; }
/* Form-Inputs etwas größer */
input[type=text], input[type=email], input[type=url],
input[type=password], input[type=number], input[type=date],
input[type=search], select, textarea {
padding: 14px 16px !important;
font-size: 16px !important;
}
.form-row label { font-size: 0.74rem !important; margin-bottom: 8px !important; }
.form-row { margin-bottom: 22px !important; }
/* Tablet/Mobile-Anpassungen — alles bleibt proportional */
@media (max-width: 720px) {
.v2-section { padding: 60px 0 !important; }
.v2-hero { padding: 70px 0 50px !important; }
.v2-final { padding: 60px 0 !important; }
.v2-footer { padding: 50px 0 24px !important; margin-top: 60px !important; }
.topbar { padding: 14px 18px !important; }
.hero-stats { gap: 24px !important; margin-top: 32px !important; }
}
/* ─── Admin-Panel: Tabellen-Layout robuster (keine vertikalen Umbrueche) ── */
.pill { white-space: nowrap; }
table.users th, .users th { white-space: nowrap; }
table.users { table-layout: auto; }
/* Status / Registriert / Aktion sollen nicht umbrechen, sondern Spalte erweitern */
table.users th:nth-child(3),
table.users td:nth-child(3),
table.users th:nth-child(4),
table.users td:nth-child(4),
table.users th:nth-child(5),
table.users td:nth-child(5) { white-space: nowrap; }
/* Rollen-Spalte darf flexibel umbrechen (Pills) und nimmt Restbreite */
table.users td:nth-child(2) { width: 100%; }
/* NUTZER-Spalte (1): feste Mindestbreite, damit Name + E-Mail nicht
zeichenweise zerquetscht werden. Name bricht nur an Leerzeichen,
lange E-Mails brechen erst wenn nötig (nicht Buchstabe für Buchstabe). */
table.users th:nth-child(1),
table.users td:nth-child(1) {
min-width: 230px; width: 230px;
white-space: normal; word-break: normal; overflow-wrap: anywhere;
}
/* Buttons in Tabellen: niemals Wort-Umbruch */
table.users .btn,
table.users button { white-space: nowrap; }
/* Pending-Tabelle (4 Spalten): Aktion-Spalte (4) nowrap */
.users.pending th:nth-child(4),
.users.pending td:nth-child(4) { white-space: nowrap; }
/* ── Inline-Confirm Widget ────────────────────────────────────────
Replaces native window.confirm() for destructive actions. A small
panel expands beneath the trigger button with optional textarea +
submit/cancel. Wired up by the global script in layout.py. */
.inline-confirm { display: inline-block; vertical-align: top; }
.inline-confirm.is-open .ic-trigger { display: none; }
/* Wenn das Ablehnen-Bestaetigungspanel im Team-Panel offen ist, soll der
parallele "Annehmen"-Button verschwinden, damit nicht zwei konkurrierende
Aktionen sichtbar sind. Abbrechen-Klick schliesst das Panel und bringt
beide Buttons zurueck. Nutzt natives :has() (alle aktuellen Browser ab 2023). */
.team-applicant .actions:has(form.inline-confirm.is-open) form:not(.inline-confirm) { display: none; }
.ic-panel {
background: var(--surface-2);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 12px;
margin-top: 4px;
display: flex; flex-direction: column; gap: 10px;
min-width: 280px;
box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.ic-panel[hidden] { display: none; }
.ic-panel .ic-prompt {
color: var(--text-dim); font-size: .92rem;
}
.ic-panel textarea {
width: 100%; min-height: 80px; max-height: 240px;
background: var(--bg); color: var(--text);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
padding: 10px 12px; font-family: inherit; font-size: .92rem;
resize: vertical; outline: none;
}
.ic-panel textarea:focus { border-color: var(--primary); }
.ic-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ic-panel-actions .btn,
.ic-panel-actions button {
min-height: 36px; padding: 8px 16px; font-size: .9rem;
}
.ic-checkbox {
display: flex; gap: 8px; align-items: flex-start;
font-size: .9rem; color: var(--text); cursor: pointer;
padding: 4px 0;
}
.ic-checkbox input { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }
/* ── Chat row with side action (⋯ menu) ──────────────────────── */
.chat-row-wrap {
position: relative;
display: flex; align-items: stretch;
}
.chat-row-wrap .chat-row-link { flex: 1; min-width: 0; }
.chat-row-menu-wrap {
position: relative;
display: flex; align-items: center;
padding-right: 6px;
}
.chat-row-menu {
background: transparent; border: 0;
color: var(--text-faint);
width: 32px; height: 32px;
border-radius: 50%;
font-size: 1.25rem; line-height: 1;
cursor: pointer; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.chat-row-menu:hover { background: var(--surface-2); color: var(--text); }
/* Floats above everything (viewport-fixed) so it escapes the narrow sidebar.
Concrete top/left coordinates are set by the toggle JS on open. */
.chat-menu {
position: fixed;
min-width: 200px;
background: var(--surface-2);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
box-shadow: 0 12px 32px rgba(0,0,0,.6);
z-index: 1000;
padding: 4px 0;
}
.chat-menu[hidden] { display: none; }
.chat-menu form { margin: 0; }
.chat-menu-item {
display: block; width: 100%; text-align: left;
background: transparent; border: 0; color: var(--text);
padding: 10px 14px; font-size: .92rem;
cursor: pointer; line-height: 1.3;
font-weight: 500;
border-radius: 0;
min-height: auto;
}
.chat-menu-item:hover { background: rgba(255,255,255,.06); color: var(--text); }
.chat-menu-item-danger { color: #c0454a; }
.chat-menu-item-danger:hover { background: rgba(168,50,50,.12); color: #d35454; }
/* Make sure the sidebar doesn't clip the dropdown */
.chat-side, .chat-side > .body { overflow: visible; }
/* ── Block-Rotton (eigene Tonalität, strenger als --danger) ─ */
.btn.btn-block {
background: #a83232;
color: #fff; border: 1px solid #c0454a;
}
.btn.btn-block:hover { background: #c0454a; color: #fff; }
.btn.btn-block:active { background: #8e2a2a; }
/* ── Modal-Dialog (HTML