/*
 Theme Name:   MoneyTwin Divi Child
 Theme URI:    https://moneytwin.de
 Description:  Divi Child Theme mit dem MoneyTwin-Designsystem (dunkles Theme, Space Grotesk/IBM Plex, Amber-Akzent) aus dem Prototyp
 Author:       studio300
 Template:     Divi
 Version:      0.1.0
*/

/* ==========================================================
   1. Fonts
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

/* ==========================================================
   2. Farb-/Design-System (identisch zum Prototyp)
   ========================================================== */
:root {
	--mt-ink:       #12132B;
	--mt-surface:   #1A1C3E;
	--mt-surface-2: #242759;
	--mt-line:      #33356B;
	--mt-mist:      #EEECFA;
	--mt-muted:     #8A8DBD;
	--mt-amber:     #F5B942;
	--mt-coral:     #FF6B6B;
	--mt-mint:      #5EEAD4;
	--mt-sky:       #66A9FF;
	--mt-violet:    #B08CFF;

	--mt-font-head: 'Space Grotesk', sans-serif;
	--mt-font-body: 'IBM Plex Sans', sans-serif;
	--mt-font-mono: 'IBM Plex Mono', monospace;
}

/* ==========================================================
   3. Grundlayout
   ========================================================== */
body {
	background:
		radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1px) 0 0/28px 28px,
		var(--mt-ink);
	color: var(--mt-mist);
	font-family: var(--mt-font-body);
}

#main-content,
.et_pb_section {
	background-color: transparent;
}

/* ==========================================================
   4. Typografie
   ========================================================== */
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3 {
	font-family: var(--mt-font-head);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--mt-mist);
}

h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }

p, li, .et_pb_text_inner {
	color: var(--mt-muted);
	line-height: 1.6;
}

a { color: var(--mt-amber); }
a:hover { color: var(--mt-mist); }

/* "Eyebrow"-Label, z.B. für kleine Kicker-Texte über Headlines (eigene CSS-Klasse,
   in Divi im Text-Modul als "Eyebrow" mit dieser Klasse versehen) */
.mt-eyebrow {
	font-family: var(--mt-font-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mt-amber);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.mt-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mt-amber);
	box-shadow: 0 0 8px var(--mt-amber);
}

/* ==========================================================
   5. Buttons (Divi-Buttons global im Amber-Pill-Stil)
   ========================================================== */
.et_pb_button,
.et_pb_module .et_pb_button {
	background: var(--mt-amber) !important;
	color: #1B1300 !important;
	border: none !important;
	padding: 13px 22px !important;
	border-radius: 999px !important;
	font-family: var(--mt-font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	letter-spacing: 0 !important;
	transition: transform .15s ease, box-shadow .15s ease !important;
}
.et_pb_button:hover {
	background: var(--mt-amber) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 24px rgba(245,185,66,0.25);
}

/* Ghost-Button-Variante: im Divi-Button-Modul die CSS-Klasse "mt-ghost" ergänzen */
.et_pb_button.mt-ghost {
	background: transparent !important;
	border: 1px solid var(--mt-line) !important;
	color: var(--mt-mist) !important;
	box-shadow: none !important;
}
.et_pb_button.mt-ghost:hover {
	border-color: var(--mt-muted) !important;
	transform: none;
}

/* ==========================================================
   6. Karten / Module (Blurbs, Text-Boxen etc. im Surface-Look)
   Klasse "mt-card" im jeweiligen Divi-Modul unter "Erweitert → CSS-Klasse" ergänzen
   ========================================================== */
.mt-card {
	background: var(--mt-surface);
	border: 1px solid var(--mt-line);
	border-radius: 16px;
	padding: 22px;
}
.mt-card:hover {
	border-color: var(--mt-amber);
	background: var(--mt-surface-2);
}

/* Sektionen mit leicht abgesetztem Hintergrund (Klasse "mt-surface" auf Section/Row) */
.mt-surface {
	background: var(--mt-surface) !important;
	border-radius: 24px;
}

/* ==========================================================
   7. Formulare (Kontaktformular-Modul, Login etc.)
   ========================================================== */
.et_pb_contact input,
.et_pb_contact textarea,
input[type="text"], input[type="email"], input[type="password"], textarea, select {
	background: var(--mt-surface) !important;
	border: 1px solid var(--mt-line) !important;
	color: var(--mt-mist) !important;
	border-radius: 12px !important;
	font-family: var(--mt-font-body) !important;
}
input:focus, textarea:focus, select:focus {
	outline: 2px solid var(--mt-amber) !important;
	outline-offset: 2px;
	border-color: var(--mt-amber) !important;
}

/* ==========================================================
   8. Fortschritts-/Progress-Elemente (für den Fragebogen-Funnel)
   ========================================================== */
.mt-progress-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mt-line);
	display: inline-block;
	margin: 0 4px;
	transition: background .2s ease, transform .2s ease;
}
.mt-progress-dot.done { background: var(--mt-amber); }
.mt-progress-dot.current { background: var(--mt-mist); transform: scale(1.3); }

/* Dimension-Balken auf der Ergebnisseite */
.mt-dim-track {
	height: 6px;
	border-radius: 999px;
	background: var(--mt-surface-2);
	overflow: hidden;
}
.mt-dim-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--mt-amber);
	transition: width .8s cubic-bezier(.2,.8,.2,1);
}

/* ==========================================================
   9. Footer / Kleingedrucktes (Impressum-Links etc.)
   ========================================================== */
#main-footer, .et-l--footer {
	background: var(--mt-ink) !important;
	border-top: 1px solid var(--mt-line);
}
.mt-disclaimer {
	font-family: var(--mt-font-mono);
	font-size: 11px;
	color: var(--mt-muted);
	line-height: 1.5;
}