/* =============================================================
   Hauswertanalyse Affiliate — Premium Frontend CSS
   Brand: RE/MAX Rot #DC1C2E + Blau #003D7C
   Strategy: alles unter .hwa-app gescoped um Theme-Conflicts
   (Hello Biz: a{color:#c36}) zuverlässig zu überschreiben.
   ============================================================= */

/* ─── Design Tokens ────────────────────────────────────────── */
.hwa-app {
	/* Brand */
	--hwa-primary: #DC1C2E;
	--hwa-primary-600: #B41525;
	--hwa-primary-700: #8E101D;
	--hwa-secondary: #003D7C;
	--hwa-secondary-600: #002B5C;
	--hwa-secondary-700: #001F44;
	--hwa-accent: #ED6F04;
	--hwa-accent-600: #C75A03;

	/* Neutrals */
	--hwa-50:  #F8F9FB;
	--hwa-100: #F1F3F7;
	--hwa-200: #E5E8ED;
	--hwa-300: #D2D7DE;
	--hwa-400: #9AA1AC;
	--hwa-500: #6B7280;
	--hwa-600: #4A5160;
	--hwa-700: #2E3441;
	--hwa-800: #1E232E;
	--hwa-900: #0F141C;

	/* Semantics */
	--hwa-success: #15803D;
	--hwa-success-50: #ECFDF3;
	--hwa-success-200: #A7F3C8;
	--hwa-warning: #B45309;
	--hwa-warning-50: #FEF7E6;
	--hwa-warning-200: #FCD9A0;
	--hwa-error: #B91C1C;
	--hwa-error-50: #FEF2F2;
	--hwa-error-200: #FCA5A5;
	--hwa-info: var(--hwa-secondary);
	--hwa-info-50: #EEF4FB;
	--hwa-info-200: #B6CDE6;

	/* Surface */
	--hwa-bg: var(--hwa-50);
	--hwa-surface: #FFFFFF;
	--hwa-border: var(--hwa-200);
	--hwa-border-strong: var(--hwa-300);

	/* Typography */
	--hwa-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
	--hwa-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Inter, system-ui, sans-serif;

	/* Radii */
	--hwa-r-sm: 6px;
	--hwa-r-md: 10px;
	--hwa-r-lg: 14px;
	--hwa-r-xl: 20px;
	--hwa-r-pill: 9999px;

	/* Shadows */
	--hwa-shadow-xs: 0 1px 2px rgba(15, 20, 28, 0.04);
	--hwa-shadow-sm: 0 1px 2px rgba(15, 20, 28, 0.06), 0 1px 3px rgba(15, 20, 28, 0.04);
	--hwa-shadow-md: 0 4px 8px rgba(15, 20, 28, 0.06), 0 2px 4px rgba(15, 20, 28, 0.05);
	--hwa-shadow-lg: 0 12px 24px rgba(15, 20, 28, 0.08), 0 4px 8px rgba(15, 20, 28, 0.05);
	--hwa-shadow-brand: 0 8px 24px rgba(220, 28, 46, 0.18);

	/* Easing & Motion */
	--hwa-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--hwa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Layout */
	--hwa-container: 1240px;

	/* Reset for children */
	font-family: var(--hwa-font);
	color: var(--hwa-800);
	line-height: 1.55;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ─── Reset (scoped) ──────────────────────────────────────── */
.hwa-app *,
.hwa-app *::before,
.hwa-app *::after {
	box-sizing: border-box;
}
.hwa-app h1, .hwa-app h2, .hwa-app h3, .hwa-app h4 {
	font-family: var(--hwa-font-display);
	letter-spacing: -0.01em;
	color: var(--hwa-900);
	margin: 0;
}
.hwa-app p { margin: 0; }
.hwa-app strong { font-weight: 600; }

/* ─── Theme override (Hello Biz a{color:#c36}) ───────────── */
.hwa-app a,
.hwa-app a:link,
.hwa-app a:visited {
	color: var(--hwa-secondary);
	text-decoration: none;
	transition: color 0.15s var(--hwa-ease);
}
.hwa-app a:hover,
.hwa-app a:active,
.hwa-app a:focus {
	color: var(--hwa-primary);
	text-decoration: none;
}

/* Reset Theme button styles */
.hwa-app button,
.hwa-app input[type="submit"],
.hwa-app input[type="button"] {
	font-family: var(--hwa-font);
	-webkit-appearance: none;
	appearance: none;
}

/* ─── Page Frame / Container ─────────────────────────────── */
.hwa-page {
	min-height: 60vh;
	background: var(--hwa-bg);
	padding: 48px 16px 80px;
}
.hwa-page--narrow .hwa-card { max-width: 480px; }
.hwa-page__center {
	max-width: var(--hwa-container);
	margin: 0 auto;
}

/* Hero */
.hwa-hero {
	background: linear-gradient(135deg, var(--hwa-secondary) 0%, var(--hwa-secondary-700) 100%);
	color: #fff;
	padding: 56px 32px 48px;
	border-radius: var(--hwa-r-xl);
	margin-bottom: 32px;
	position: relative;
	overflow: hidden;
}
.hwa-hero::before {
	content: '';
	position: absolute;
	right: -120px;
	top: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(220, 28, 46, 0.18) 0%, transparent 70%);
	pointer-events: none;
}
.hwa-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(8px);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: var(--hwa-r-pill);
	margin-bottom: 16px;
	border: 1px solid rgba(255, 255, 255, 0.18);
}
.hwa-hero h1 {
	color: #fff;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 8px;
}
.hwa-hero p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	max-width: 600px;
}

/* ─── Card ──────────────────────────────────────────────── */
.hwa-card {
	background: var(--hwa-surface);
	border-radius: var(--hwa-r-lg);
	box-shadow: var(--hwa-shadow-sm);
	border: 1px solid var(--hwa-border);
	padding: 32px;
	margin: 24px auto;
	max-width: 720px;
}
.hwa-card--narrow { max-width: 460px; }
.hwa-card--inner  { box-shadow: none; padding: 24px; margin: 0; }
.hwa-card--danger {
	border: 1px solid var(--hwa-error-200);
	background: var(--hwa-error-50);
	max-width: 720px;
	margin: 32px auto;
	padding: 24px;
	border-radius: var(--hwa-r-lg);
}
.hwa-card-header {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hwa-border);
}
.hwa-card-header__icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: var(--hwa-r-md);
	background: linear-gradient(135deg, var(--hwa-secondary) 0%, var(--hwa-primary) 100%);
	color: #fff;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	box-shadow: var(--hwa-shadow-brand);
}
.hwa-card-header h2 { font-size: 24px; font-weight: 700; }
.hwa-card-header p  { color: var(--hwa-500); font-size: 14px; }

/* ─── Typography helpers ─────────────────────────────────── */
.hwa-app .hwa-h1 { font-size: 28px; font-weight: 700; color: var(--hwa-900); }
.hwa-app .hwa-h2 { font-size: 20px; font-weight: 700; color: var(--hwa-900); margin-bottom: 8px; }
.hwa-app .hwa-h3 { font-size: 16px; font-weight: 600; color: var(--hwa-800); }
.hwa-app .hwa-muted { color: var(--hwa-500); font-size: 14px; }
.hwa-app .hwa-text-center { text-align: center; }
.hwa-app .hwa-text-right  { text-align: right; }
.hwa-app .hwa-text-tiny   { font-size: 12px; color: var(--hwa-500); }

/* ─── Form ──────────────────────────────────────────────── */
.hwa-form { display: flex; flex-direction: column; gap: 18px; }
.hwa-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .hwa-row { grid-template-columns: 1fr; } }

.hwa-field { display: flex; flex-direction: column; gap: 8px; }
.hwa-field > span:first-child {
	font-weight: 600;
	color: var(--hwa-800);
	font-size: 13px;
	letter-spacing: 0.01em;
}
.hwa-field > span small { color: var(--hwa-500); font-weight: 400; margin-left: 4px; }
.hwa-field__hint { font-size: 12px; color: var(--hwa-500); margin-top: -2px; }

.hwa-app .hwa-field input,
.hwa-app .hwa-field select,
.hwa-app .hwa-field textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--hwa-r-md);
	border: 1.5px solid var(--hwa-border);
	font-size: 15px;
	font-family: inherit;
	background: var(--hwa-surface);
	color: var(--hwa-900);
	transition: border-color 0.15s var(--hwa-ease), box-shadow 0.15s var(--hwa-ease), background 0.15s var(--hwa-ease);
	line-height: 1.4;
}
.hwa-app .hwa-field input:hover,
.hwa-app .hwa-field select:hover,
.hwa-app .hwa-field textarea:hover {
	border-color: var(--hwa-border-strong);
}
.hwa-app .hwa-field input:focus,
.hwa-app .hwa-field select:focus,
.hwa-app .hwa-field textarea:focus {
	outline: none;
	border-color: var(--hwa-secondary);
	box-shadow: 0 0 0 4px rgba(0, 61, 124, 0.12);
}
.hwa-app .hwa-field input:disabled {
	background: var(--hwa-100);
	color: var(--hwa-500);
	cursor: not-allowed;
}
.hwa-app .hwa-field input::placeholder { color: var(--hwa-400); }

.hwa-fieldset {
	border: 1.5px solid var(--hwa-border);
	border-radius: var(--hwa-r-md);
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--hwa-50);
}
.hwa-fieldset legend {
	padding: 0 8px;
	font-weight: 700;
	color: var(--hwa-secondary);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hwa-checkbox {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	cursor: pointer;
	color: var(--hwa-700);
	line-height: 1.45;
}
.hwa-checkbox input { margin-top: 3px; flex-shrink: 0; }

/* ─── Buttons (high specifity vs. Theme) ─────────────────── */
.hwa-app .hwa-btn,
.hwa-app a.hwa-btn,
.hwa-app button.hwa-btn,
.hwa-app input.hwa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--hwa-r-md);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	font-family: inherit;
	line-height: 1.2;
	white-space: nowrap;
	transition: transform 0.1s var(--hwa-ease), box-shadow 0.15s var(--hwa-ease), background 0.15s var(--hwa-ease), color 0.15s var(--hwa-ease), border-color 0.15s var(--hwa-ease);
	-webkit-appearance: none;
	appearance: none;
	min-height: 44px;
}
.hwa-app .hwa-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.hwa-app .hwa-btn:active:not(:disabled) { transform: translateY(1px); }
.hwa-app .hwa-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(0, 61, 124, 0.18);
}

.hwa-app .hwa-btn--primary,
.hwa-app a.hwa-btn--primary,
.hwa-app button.hwa-btn--primary {
	background: var(--hwa-primary);
	color: #fff;
	box-shadow: var(--hwa-shadow-brand);
}
.hwa-app .hwa-btn--primary:hover,
.hwa-app a.hwa-btn--primary:hover,
.hwa-app button.hwa-btn--primary:hover {
	background: var(--hwa-primary-600);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(220, 28, 46, 0.28);
}

.hwa-app .hwa-btn--secondary,
.hwa-app a.hwa-btn--secondary {
	background: var(--hwa-secondary);
	color: #fff;
}
.hwa-app .hwa-btn--secondary:hover,
.hwa-app a.hwa-btn--secondary:hover {
	background: var(--hwa-secondary-600);
	color: #fff;
}

.hwa-app .hwa-btn--ghost,
.hwa-app a.hwa-btn--ghost,
.hwa-app button.hwa-btn--ghost {
	background: var(--hwa-surface);
	color: var(--hwa-700);
	border-color: var(--hwa-border-strong);
}
.hwa-app .hwa-btn--ghost:hover,
.hwa-app a.hwa-btn--ghost:hover,
.hwa-app button.hwa-btn--ghost:hover {
	background: var(--hwa-100);
	color: var(--hwa-900);
	border-color: var(--hwa-400);
}

.hwa-app .hwa-btn--danger,
.hwa-app button.hwa-btn--danger {
	background: var(--hwa-surface);
	color: var(--hwa-error);
	border-color: var(--hwa-error-200);
}
.hwa-app .hwa-btn--danger:hover {
	background: var(--hwa-error);
	color: #fff;
	border-color: var(--hwa-error);
}

.hwa-app .hwa-btn--block { width: 100%; }
.hwa-app .hwa-btn--lg { padding: 14px 28px; font-size: 15px; min-height: 50px; }
.hwa-app .hwa-btn--sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }

.hwa-btn-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 8px;
}

/* ─── Alerts ─────────────────────────────────────────────── */
.hwa-alert {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--hwa-r-md);
	margin-bottom: 16px;
	font-size: 14px;
	border-left: 4px solid;
	line-height: 1.45;
}
.hwa-alert__icon { flex-shrink: 0; }
.hwa-alert--error   { background: var(--hwa-error-50);   color: var(--hwa-error);   border-color: var(--hwa-error); }
.hwa-alert--success { background: var(--hwa-success-50); color: var(--hwa-success); border-color: var(--hwa-success); }
.hwa-alert--info    { background: var(--hwa-info-50);    color: var(--hwa-secondary); border-color: var(--hwa-info); }
.hwa-alert--warning { background: var(--hwa-warning-50); color: var(--hwa-warning); border-color: var(--hwa-warning); }

/* Info-Box / Hint */
.hwa-hint {
	background: var(--hwa-info-50);
	border: 1px solid var(--hwa-info-200);
	border-radius: var(--hwa-r-md);
	padding: 14px 16px;
	display: flex;
	gap: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--hwa-700);
}
.hwa-hint__icon { color: var(--hwa-secondary); flex-shrink: 0; margin-top: 1px; }
.hwa-hint strong { color: var(--hwa-secondary); }

/* ─── Login link row ────────────────────────────────────── */
.hwa-links {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	margin-top: 8px;
	flex-wrap: wrap;
	gap: 12px;
}
.hwa-app .hwa-links a {
	color: var(--hwa-500);
	font-weight: 500;
}
.hwa-app .hwa-links a:hover { color: var(--hwa-secondary); }

/* ─── Dashboard Layout ──────────────────────────────────── */
.hwa-dashboard {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	max-width: none;       /* volle Breite */
	margin: 0;
	padding: 40px 50px 64px; /* 50px Desktop-Padding */
	min-height: 80vh;
}
@media (max-width: 1200px) {
	.hwa-dashboard { padding: 32px 32px 48px; }
}
@media (max-width: 960px) {
	.hwa-dashboard { grid-template-columns: 1fr; padding: 16px 20px 32px; gap: 20px; }
}

/* Sidebar */
.hwa-sidebar {
	background: var(--hwa-surface);
	border-radius: var(--hwa-r-lg);
	padding: 24px 16px 16px;
	box-shadow: var(--hwa-shadow-sm);
	border: 1px solid var(--hwa-border);
	height: fit-content;
	position: sticky;
	top: 24px;
}
@media (max-width: 960px) {
	.hwa-sidebar { position: static; }
}

.hwa-sidebar__user {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 4px 8px 20px;
	border-bottom: 1px solid var(--hwa-border);
	margin-bottom: 16px;
}
.hwa-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--hwa-secondary), var(--hwa-primary));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
	letter-spacing: 0.02em;
	box-shadow: var(--hwa-shadow-sm);
}
.hwa-sidebar__name { font-weight: 700; font-size: 14px; color: var(--hwa-900); }
.hwa-sidebar__code { font-size: 12px; color: var(--hwa-500); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.hwa-sidebar__code code {
	background: var(--hwa-100);
	padding: 2px 8px;
	border-radius: var(--hwa-r-sm);
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	color: var(--hwa-700);
	font-size: 11px;
}

.hwa-nav { display: flex; flex-direction: column; gap: 2px; }
.hwa-app .hwa-nav__item,
.hwa-app a.hwa-nav__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: var(--hwa-r-md);
	color: var(--hwa-700);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.12s var(--hwa-ease), color 0.12s var(--hwa-ease);
	position: relative;
}
.hwa-app .hwa-nav__item:hover { background: var(--hwa-100); color: var(--hwa-900); }
.hwa-app .hwa-nav__item.is-active {
	background: linear-gradient(135deg, var(--hwa-secondary) 0%, var(--hwa-secondary-700) 100%);
	color: #fff;
	font-weight: 600;
	box-shadow: var(--hwa-shadow-sm);
}
.hwa-app .hwa-nav__item.is-active:hover { color: #fff; }
.hwa-app .hwa-nav__item--logout {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--hwa-border);
	color: var(--hwa-500);
	border-radius: 0 0 var(--hwa-r-md) var(--hwa-r-md);
}
.hwa-app .hwa-nav__item--logout:hover { color: var(--hwa-error); }
.hwa-nav__icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hwa-nav__count {
	margin-left: auto;
	background: var(--hwa-100);
	color: var(--hwa-600);
	border-radius: var(--hwa-r-pill);
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
}
.hwa-app .hwa-nav__item.is-active .hwa-nav__count {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* Main content area */
.hwa-main {
	background: var(--hwa-surface);
	border-radius: var(--hwa-r-lg);
	padding: 40px;
	box-shadow: var(--hwa-shadow-sm);
	border: 1px solid var(--hwa-border);
	min-width: 0;
}
@media (max-width: 960px) { .hwa-main { padding: 28px; } }
@media (max-width: 600px) { .hwa-main { padding: 20px; } }

.hwa-page-header {
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--hwa-border);
}
.hwa-page-header h1 {
	font-size: clamp(22px, 3vw, 28px);
	font-weight: 700;
	color: var(--hwa-900);
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.hwa-page-header__icon {
	width: 36px;
	height: 36px;
	border-radius: var(--hwa-r-md);
	background: linear-gradient(135deg, var(--hwa-secondary), var(--hwa-primary));
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.hwa-page-header p {
	color: var(--hwa-500);
	font-size: 15px;
	max-width: 720px;
}

/* ─── Section ──────────────────────────────────────────── */
.hwa-section { margin: 36px 0 0; }
.hwa-section:first-child { margin-top: 0; }
.hwa-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.hwa-section__head h2 { font-size: 18px; font-weight: 700; color: var(--hwa-900); }
.hwa-section__head p { font-size: 13px; color: var(--hwa-500); margin-top: 2px; }

/* ─── Stats Grid ───────────────────────────────────────── */
.hwa-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 28px;
}
.hwa-stats--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .hwa-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hwa-stats, .hwa-stats--3 { grid-template-columns: 1fr; } }

.hwa-stat {
	background: var(--hwa-surface);
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-r-lg);
	padding: 20px;
	position: relative;
	overflow: hidden;
	transition: transform 0.18s var(--hwa-ease), box-shadow 0.18s var(--hwa-ease);
}
.hwa-stat:hover {
	transform: translateY(-2px);
	box-shadow: var(--hwa-shadow-md);
}
.hwa-stat__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 12px;
}
.hwa-stat__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hwa-500);
	font-weight: 600;
}
.hwa-stat__icon {
	width: 32px;
	height: 32px;
	border-radius: var(--hwa-r-sm);
	background: var(--hwa-info-50);
	color: var(--hwa-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hwa-stat__value {
	font-size: 30px;
	font-weight: 700;
	color: var(--hwa-900);
	line-height: 1.1;
	font-family: var(--hwa-font-display);
	letter-spacing: -0.02em;
}
.hwa-stat__sub {
	font-size: 12px;
	color: var(--hwa-500);
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.hwa-stat--accent { border-color: var(--hwa-primary); background: linear-gradient(180deg, rgba(220, 28, 46, 0.04), transparent 60%); }
.hwa-stat--accent .hwa-stat__icon { background: rgba(220, 28, 46, 0.10); color: var(--hwa-primary); }
.hwa-stat--accent .hwa-stat__value { color: var(--hwa-primary); }
.hwa-stat--success .hwa-stat__icon { background: var(--hwa-success-50); color: var(--hwa-success); }

.hwa-trend { font-weight: 600; }
.hwa-trend--up { color: var(--hwa-success); }
.hwa-trend--down { color: var(--hwa-error); }

/* ─── Share / Copy bar ────────────────────────────────── */
.hwa-share {
	background: linear-gradient(135deg, var(--hwa-secondary) 0%, var(--hwa-secondary-700) 100%);
	color: #fff;
	padding: 24px 28px;
	border-radius: var(--hwa-r-lg);
	margin-bottom: 28px;
	position: relative;
	overflow: hidden;
}
.hwa-share::before {
	content: '';
	position: absolute;
	right: -80px;
	top: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(220, 28, 46, 0.18);
	pointer-events: none;
}
.hwa-share__head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-bottom: 12px;
}
.hwa-share__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.hwa-app .hwa-share__row input {
	flex: 1 1 280px;
	padding: 12px 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--hwa-r-md);
	font-size: 14px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	background: rgba(255, 255, 255, 0.95);
	color: var(--hwa-900);
	min-height: 44px;
}
.hwa-app .hwa-share__row input:focus {
	outline: none;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

/* ─── Funnel ──────────────────────────────────────────── */
.hwa-funnel {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
@media (max-width: 720px) { .hwa-funnel { grid-template-columns: repeat(2, 1fr); } }
.hwa-funnel__item {
	background: var(--hwa-50);
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-r-md);
	padding: 16px;
	text-align: center;
	transition: transform 0.15s var(--hwa-ease);
}
.hwa-funnel__item:hover { transform: translateY(-1px); }
.hwa-funnel__item__label { font-size: 11px; text-transform: uppercase; color: var(--hwa-500); letter-spacing: 0.05em; font-weight: 600; }
.hwa-funnel__item__value { display: block; font-size: 24px; color: var(--hwa-900); margin-top: 4px; font-weight: 700; font-family: var(--hwa-font-display); }
.hwa-funnel__item--success { border-color: var(--hwa-success-200); background: var(--hwa-success-50); }
.hwa-funnel__item--success .hwa-funnel__item__value { color: var(--hwa-success); }
.hwa-funnel__item--inprogress { border-color: #BFDBFE; background: #EFF6FF; }
.hwa-funnel__item--inprogress .hwa-funnel__item__value { color: #1D4ED8; }
.hwa-funnel__item--kein-verkaeufer { border-color: #FDE68A; background: #FEF3C7; }
.hwa-funnel__item--kein-verkaeufer .hwa-funnel__item__value { color: #92400E; }
.hwa-funnel__item--muted { opacity: 0.65; }

/* ─── Table ──────────────────────────────────────────── */
.hwa-table-wrap { overflow-x: auto; border-radius: var(--hwa-r-md); border: 1px solid var(--hwa-border); }
.hwa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hwa-table th {
	text-align: left;
	font-weight: 600;
	padding: 12px 14px;
	background: var(--hwa-50);
	border-bottom: 1px solid var(--hwa-border);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--hwa-500);
	letter-spacing: 0.06em;
}
.hwa-table td {
	padding: 14px;
	border-bottom: 1px solid var(--hwa-border);
	color: var(--hwa-700);
	vertical-align: middle;
}
.hwa-table tr:last-child td { border-bottom: 0; }
.hwa-table tr:hover td { background: var(--hwa-50); }
.hwa-table strong { color: var(--hwa-900); font-weight: 600; }

.hwa-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--hwa-r-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--hwa-200);
	color: var(--hwa-700);
}
.hwa-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.hwa-badge.is-new         { background: var(--hwa-info-50); color: var(--hwa-secondary); }
.hwa-badge.is-contacted   { background: var(--hwa-warning-50); color: var(--hwa-warning); }
.hwa-badge.is-appointment { background: #ECE6FF; color: #5B21B6; }
.hwa-badge.is-sold        { background: var(--hwa-success-50); color: var(--hwa-success); }
.hwa-badge.is-rejected    { background: #FEE2E2; color: #B91C1C; }
.hwa-badge.is-muted       { background: #E2E8F0; color: #475569; }
.hwa-badge.is-kein-verkaeufer { background: #FEF3C7; color: #92400E; }
.hwa-badge.is-referral    { background: #FFEDD5; color: #C2410C; }

/* ─── Pagination ─────────────────────────────────────── */
.hwa-pagination { display: flex; gap: 4px; margin-top: 18px; justify-content: center; }
.hwa-app .hwa-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1.5px solid var(--hwa-border);
	border-radius: var(--hwa-r-md);
	color: var(--hwa-700);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	background: var(--hwa-surface);
	transition: all 0.12s var(--hwa-ease);
}
.hwa-app .hwa-pagination a:hover { background: var(--hwa-100); color: var(--hwa-900); border-color: var(--hwa-border-strong); }
.hwa-app .hwa-pagination a.is-active { background: var(--hwa-secondary); color: #fff; border-color: var(--hwa-secondary); }

/* ─── Grid helpers ──────────────────────────────────── */
.hwa-grid { display: grid; gap: 18px; }
.hwa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hwa-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .hwa-grid--2, .hwa-grid--3 { grid-template-columns: 1fr; } }

/* ─── QR Card ─────────────────────────────────────── */
.hwa-qr-card {
	background: var(--hwa-surface);
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-r-lg);
	padding: 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hwa-qr-canvas {
	display: inline-block;
	padding: 20px;
	background: #fff;
	border-radius: var(--hwa-r-md);
	box-shadow: var(--hwa-shadow-md);
	border: 1px solid var(--hwa-border);
	min-height: 240px;
	min-width: 240px;
	margin-bottom: 18px;
}
.hwa-qr-card .hwa-btn-row { justify-content: center; }

/* ─── Banner cards ──────────────────────────────────── */
.hwa-banner-card {
	background: var(--hwa-surface);
	border: 1px solid var(--hwa-border);
	border-radius: var(--hwa-r-lg);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform 0.18s var(--hwa-ease), box-shadow 0.18s var(--hwa-ease);
}
.hwa-banner-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--hwa-shadow-md);
	border-color: var(--hwa-border-strong);
}
.hwa-banner-card canvas {
	max-width: 100%;
	height: auto;
	border-radius: var(--hwa-r-md);
	background: var(--hwa-100);
}
.hwa-banner-card__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 12px;
	color: var(--hwa-500);
	padding: 0 4px;
}
.hwa-banner-card__meta strong { color: var(--hwa-800); font-size: 14px; }

/* ─── Empty state ───────────────────────────────────── */
.hwa-empty {
	background: var(--hwa-50);
	border: 2px dashed var(--hwa-border);
	padding: 56px 32px;
	border-radius: var(--hwa-r-lg);
	text-align: center;
	color: var(--hwa-500);
}
.hwa-empty__icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--hwa-surface);
	color: var(--hwa-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
	box-shadow: var(--hwa-shadow-sm);
}
.hwa-empty h3 { font-size: 17px; font-weight: 700; color: var(--hwa-800); margin-bottom: 6px; }
.hwa-empty p { color: var(--hwa-500); font-size: 14px; margin-bottom: 18px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* ─── Lists ─────────────────────────────────────────── */
.hwa-list { padding: 0; margin: 0; list-style: none; }
.hwa-list li {
	padding: 10px 0;
	border-bottom: 1px solid var(--hwa-border);
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--hwa-700);
	line-height: 1.5;
}
.hwa-list li:last-child { border-bottom: 0; }
.hwa-list__bullet {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--hwa-info-50);
	color: var(--hwa-secondary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
}

/* ─── Steps ─────────────────────────────────────────── */
.hwa-steps {
	counter-reset: step;
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hwa-steps li {
	counter-increment: step;
	display: flex;
	gap: 14px;
	padding: 14px 16px;
	background: var(--hwa-50);
	border-radius: var(--hwa-r-md);
	font-size: 14px;
	color: var(--hwa-700);
	align-items: flex-start;
	border: 1px solid var(--hwa-border);
}
.hwa-steps li::before {
	content: counter(step);
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, var(--hwa-secondary), var(--hwa-primary));
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 13px;
	flex-shrink: 0;
}

/* ─── Tooltips / hints ──────────────────────────────── */
.hwa-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--hwa-500);
	cursor: help;
}
.hwa-tooltip__bubble {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--hwa-900);
	color: #fff;
	font-size: 12px;
	padding: 6px 10px;
	border-radius: var(--hwa-r-sm);
	width: max-content;
	max-width: 240px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s var(--hwa-ease);
	white-space: normal;
	line-height: 1.4;
	z-index: 10;
}
.hwa-tooltip:hover .hwa-tooltip__bubble,
.hwa-tooltip:focus .hwa-tooltip__bubble { opacity: 1; }

/* ─── Animations ────────────────────────────────────── */
@keyframes hwa-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hwa-app .hwa-card,
.hwa-app .hwa-stat,
.hwa-app .hwa-banner-card,
.hwa-app .hwa-empty { animation: hwa-fade-in 0.4s var(--hwa-ease) backwards; }

/* ════════════════════════════════════════════════════════════
   MOBILE-OPTIMIERUNGEN
   ════════════════════════════════════════════════════════════ */

/* iOS prevent zoom on focus (Inputs >= 16px font) */
@media (max-width: 768px) {
	.hwa-app .hwa-field input,
	.hwa-app .hwa-field select,
	.hwa-app .hwa-field textarea,
	.hwa-app .hwa-share__row input {
		font-size: 16px !important;
	}
}

/* Page padding kleiner auf Mobile */
@media (max-width: 600px) {
	.hwa-page { padding: 16px 10px 32px; }
	.hwa-card { padding: 22px 18px; margin: 12px auto; border-radius: 10px; }
	.hwa-card-header { padding-bottom: 14px; margin-bottom: 18px; }
	.hwa-card-header h2 { font-size: 20px; }
	.hwa-hero { padding: 32px 20px 28px; border-radius: 14px; }
	.hwa-hero h1 { font-size: 24px; }
	.hwa-hero p { font-size: 14px; }
}

/* Dashboard auf Mobile: Sidebar oben als horizontale Tabs */
@media (max-width: 960px) {
	.hwa-dashboard {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 12px 10px 32px;
	}
	.hwa-sidebar {
		position: static;
		padding: 14px;
		margin: 0;
		border-radius: 12px;
	}
	.hwa-sidebar__user {
		padding: 4px 4px 14px;
		margin-bottom: 12px;
	}
	.hwa-avatar {
		width: 40px;
		height: 40px;
		font-size: 13px;
	}
	/* Nav als horizontale Scroll-Pills */
	.hwa-nav {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.hwa-nav::-webkit-scrollbar { display: none; }
	.hwa-app .hwa-nav__item,
	.hwa-app a.hwa-nav__item {
		flex-direction: column;
		gap: 4px;
		padding: 9px 14px;
		font-size: 12px;
		white-space: nowrap;
		flex-shrink: 0;
		text-align: center;
		border-radius: 999px;
	}
	.hwa-app .hwa-nav__item--logout {
		margin-top: 0;
		padding-top: 9px;
		border-top: 0;
		border-left: 1px solid var(--hwa-border);
		padding-left: 14px;
		margin-left: 4px;
	}
	.hwa-nav__count {
		position: absolute;
		top: 0;
		right: 0;
		transform: translate(30%, -30%);
		padding: 1px 6px;
		font-size: 10px;
		min-width: 18px;
	}
	.hwa-app .hwa-nav__item { position: relative; }

	.hwa-main {
		padding: 20px 16px;
		border-radius: 12px;
	}
}

/* Stats noch kompakter auf engen Bildschirmen */
@media (max-width: 600px) {
	.hwa-stats { gap: 10px; margin-bottom: 20px; }
	.hwa-stat { padding: 14px 16px; }
	.hwa-stat__value { font-size: 22px; }
	.hwa-stat__label { font-size: 11px; }
	.hwa-stat__icon { width: 28px; height: 28px; }
}

/* Page-Header kleiner */
@media (max-width: 600px) {
	.hwa-page-header { margin-bottom: 18px; padding-bottom: 14px; }
	.hwa-page-header h1 { font-size: 20px; gap: 8px; }
	.hwa-page-header__icon { width: 30px; height: 30px; }
	.hwa-page-header p { font-size: 13px; }
}

/* Section-Heads */
@media (max-width: 600px) {
	.hwa-section { margin-top: 24px; }
	.hwa-section__head h2 { font-size: 16px; }
}

/* Funnel kompakter */
@media (max-width: 600px) {
	.hwa-funnel { gap: 6px; }
	.hwa-funnel__item { padding: 10px 8px; }
	.hwa-funnel__item__value { font-size: 18px; }
	.hwa-funnel__item__label { font-size: 9px; }
}

/* Tables: sanft scrollbar + sticky-first-col-feeling */
@media (max-width: 600px) {
	.hwa-table-wrap {
		margin-left: -16px;
		margin-right: -16px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
	}
	.hwa-table th, .hwa-table td {
		padding: 10px 10px;
		font-size: 13px;
	}
	.hwa-table th { font-size: 10px; }
}

/* Share-Bar: Buttons unter Input */
@media (max-width: 600px) {
	.hwa-share { padding: 18px 18px; }
	.hwa-share__row { flex-direction: column; align-items: stretch; }
	.hwa-app .hwa-share__row input { flex: 1 1 auto; min-width: 0; }
	.hwa-app .hwa-share__row .hwa-btn { width: 100%; }
}

/* Banner-Karten: voll auf Mobile */
@media (max-width: 600px) {
	.hwa-banner-card { padding: 12px; }
	.hwa-banner-card canvas { max-height: 380px; object-fit: contain; }
}

/* QR-Card */
@media (max-width: 600px) {
	.hwa-qr-card { padding: 20px 16px; }
	.hwa-qr-canvas { padding: 14px; }
	.hwa-qr-card .hwa-btn-row { flex-direction: column; width: 100%; }
	.hwa-qr-card .hwa-btn-row .hwa-btn { width: 100%; }
}

/* Hint-Boxen kompakter */
@media (max-width: 600px) {
	.hwa-hint { padding: 12px 14px; font-size: 13px; }
	.hwa-alert { padding: 12px 14px; font-size: 13px; }
}

/* Buttons full-width-friendly */
@media (max-width: 600px) {
	.hwa-app .hwa-btn { padding: 12px 18px; min-height: 46px; }
	.hwa-btn-row { width: 100%; }
	.hwa-btn-row .hwa-btn { flex: 1 1 auto; }
}

/* Pagination kleiner */
@media (max-width: 600px) {
	.hwa-app .hwa-pagination a {
		min-width: 32px;
		height: 32px;
		font-size: 13px;
	}
}

/* Steps */
@media (max-width: 600px) {
	.hwa-steps li { padding: 12px 14px; gap: 10px; font-size: 13px; }
	.hwa-steps li::before { width: 24px; height: 24px; font-size: 12px; }
}

/* Empty-State */
@media (max-width: 600px) {
	.hwa-empty { padding: 40px 20px; }
	.hwa-empty__icon { width: 56px; height: 56px; margin-bottom: 14px; }
	.hwa-empty h3 { font-size: 16px; }
	.hwa-empty p { font-size: 13px; }
}

/* Manager-Filter-Bar mobile-friendly */
@media (max-width: 600px) {
	form.hwa-card.hwa-card--inner {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
	}
	form.hwa-card.hwa-card--inner > * { width: 100%; }
	form.hwa-card.hwa-card--inner input[type="search"] { min-width: 0 !important; }
}

/* Lead-Detail Cards stack besser */
@media (max-width: 600px) {
	dl[style*="grid-template-columns"] {
		grid-template-columns: 100px 1fr !important;
		font-size: 13px !important;
		gap: 6px 12px !important;
	}
}