/* =============================================================================
   coolTS — Design System
   Quelle: _pool/design/CoolTS - Brand.pdf (v1.0 Official Brand Manual)
   Domain-Theming ueber Body-Klasse .domain-teacher / .domain-student.
   ============================================================================= */

/* --- Schrift: Manrope, DSGVO-konform selbst gehostet (NICHT via Google CDN) ---
   woff2-Dateien unter /assets/fonts/ ablegen. Solange nicht vorhanden, greift
   der System-Fallback. */
@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: local("Manrope"), url("/assets/fonts/manrope-variable.woff2") format("woff2");
}

/* -----------------------------------------------------------------------------
   Tokens
   ----------------------------------------------------------------------------- */
:root {
	/* Markenfarben (Brand Manual, Kap. 02) */
	--ct-blue:        #155EE8;   /* CoolTeacher Primary */
	--ct-light-blue:  #068AD4;   /* Teacher Secondary */
	--cs-green:       #02C15E;   /* CoolStudent Primary */
	--teal:           #0EA5A4;   /* Bridge */
	--navy:           #112937;   /* Dark bg / Headings */
	--snow:           #F8FAFC;   /* Base bg */

	/* Neutrale Skala */
	--white:          #FFFFFF;
	--gray-100:       #F1F5F9;
	--gray-200:       #E2E8F0;
	--gray-300:       #CBD5E1;
	--gray-500:       #64748B;
	--gray-700:       #334155;

	/* Semantisch */
	--color-bg:            var(--snow);
	--color-surface:       var(--white);
	--color-border:        var(--gray-200);
	--color-text:          var(--navy);
	--color-text-muted:    var(--gray-500);
	--color-success:       var(--cs-green);
	--color-danger:        #EF4444;

	/* Domain-Primaerfarbe (Default teacher; per Body-Klasse ueberschrieben) */
	--color-primary:        var(--ct-blue);
	--color-primary-hover:  #0F4FC4;
	--color-primary-soft:   rgba(21, 94, 232, 0.10);
	--color-on-primary:     #FFFFFF;

	/* Typo */
	--font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Radien / Schatten / Abstaende (aus UI-Presets) */
	--radius-sm: 8px;
	--radius:    12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(17, 41, 55, 0.06);
	--shadow-md: 0 8px 24px rgba(17, 41, 55, 0.08);
	--shadow-lg: 0 24px 60px rgba(17, 41, 55, 0.12);
	--space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
	--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
}

/* Domain-Overrides */
.domain-teacher {
	--color-primary:        var(--ct-blue);
	--color-primary-hover:  #0F4FC4;
	--color-primary-soft:   rgba(21, 94, 232, 0.10);
}
.domain-student {
	--color-primary:        var(--cs-green);
	--color-primary-hover:  #02A551;
	--color-primary-soft:   rgba(2, 193, 94, 0.10);
}

/* -----------------------------------------------------------------------------
   Reset / Basis
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Typo-Hierarchie (Brand Manual, Kap. 03) */
h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-text); line-height: 1.15; }
h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 24px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 700; }
p  { margin: 0 0 var(--space-4); }
.text-muted { color: var(--color-text-muted); }
.caption {
	font-size: 12px; font-weight: 500; letter-spacing: 0.015em;
	text-transform: uppercase; color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   Komponenten
   ----------------------------------------------------------------------------- */

/* Pill / Badge */
.pill {
	display: inline-flex; align-items: center; gap: var(--space-2);
	padding: 6px 14px; border-radius: var(--radius-pill);
	background: var(--color-primary-soft); color: var(--color-primary);
	font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.pill__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
	padding: 15px 22px; border-radius: var(--radius);
	font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--outline {
	background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);
}
.btn--outline:hover { background: var(--gray-100); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Formularfelder */
.field { margin-bottom: var(--space-5); }
.field__label { display: block; font-weight: 700; font-size: 15px; margin-bottom: var(--space-2); }
.input {
	width: 100%; padding: 14px 16px;
	font-family: inherit; font-size: 16px; color: var(--color-text);
	background: var(--color-surface);
	border: 1px solid var(--color-border); border-radius: var(--radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--gray-300); }
.input:focus {
	outline: none; border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field__hint { margin-top: var(--space-2); font-size: 13px; }
.field--error .input { border-color: var(--color-danger); }
.field--error .field__hint { color: var(--color-danger); }

/* Karten */
.card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
	padding: var(--space-6);
}

/* Trenner "oder" */
.divider {
	display: flex; align-items: center; gap: var(--space-4);
	color: var(--color-text-muted); font-size: 14px; margin: var(--space-5) 0;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* -----------------------------------------------------------------------------
   Auth-Layout (Split-Screen, Screens S.3–S.10)
   ----------------------------------------------------------------------------- */
.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.auth__brand {
	position: relative; overflow: hidden;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: var(--space-7);
	background: var(--color-primary); color: #fff;
}
.auth__brandTop { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: .85; }
.auth__brandcenter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); }
.auth__watermark { width: min(320px, 60%); opacity: .18; }
.auth__brand h2 { color: #fff; }
.auth__brand p  { color: rgba(255,255,255,.85); max-width: 34ch; margin-inline: auto; }
.auth__brandFoot { display: flex; justify-content: space-between; font-size: 13px; opacity: .8; }

.auth__form { display: flex; align-items: center; justify-content: center; padding: var(--space-7); background: var(--color-surface); }
.auth__formInner { width: 100%; max-width: 420px; }
.auth__logo { height: 32px; width: auto; margin-bottom: var(--space-6); }
.auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.auth__aside { text-align: right; margin-top: calc(var(--space-4) * -1); }
.auth__foot { text-align: center; margin-top: var(--space-6); color: var(--color-text-muted); }

/* Mobile: farbiger Kopfblock oben, Formular darunter */
@media (max-width: 860px) {
	.auth { grid-template-columns: 1fr; }
	.auth__brand { padding: var(--space-5); flex-direction: row; align-items: center; gap: var(--space-4); }
	.auth__brandTop, .auth__brandFoot { display: none; }
	.auth__watermark { width: 88px; opacity: .22; margin: 0; }
	.auth__brandcenter { flex-direction: row; text-align: left; align-items: center; }
	.auth__brand h2 { font-size: 24px; margin: 0; }
	.auth__brand p { font-size: 14px; }
	.auth__form { padding: var(--space-5); }
	.auth__row { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Coming-Soon-Landing (Screens S.1–S.2)
   ----------------------------------------------------------------------------- */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__header, .site__footer {
	display: flex; align-items: center; justify-content: space-between;
	padding: var(--space-5) var(--space-7);
}
.site__footer { color: var(--color-text-muted); font-size: 14px; margin-top: auto; }
.brandmark { height: 56px; width: auto; }

.landing { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.landing__card {
	width: min(1120px, 100%); background: var(--color-surface);
	border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden;
	display: grid; grid-template-columns: 1fr 1fr;
}
.landing__content { padding: clamp(24px, 5vw, 64px); }
.landing__content h1 { margin-top: var(--space-4); }
.landing__content > p { color: var(--color-text-muted); max-width: 46ch; }
.landing__panel {
	background: var(--color-primary-soft);
	padding: clamp(24px, 4vw, 48px); display: flex; align-items: center; justify-content: center;
}

/* Notify-Form */
.notify { display: flex; gap: var(--space-3); max-width: 460px; margin-top: var(--space-3); }
.notify .input { flex: 1; }
.notify .btn { white-space: nowrap; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Mock-Fortschrittskarte im Panel */
.mock { width: 100%; max-width: 400px; }
.mock__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.mock__file { width: 44px; height: 44px; border-radius: var(--radius); background: var(--color-primary-soft);
	display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 20px; }
.mock__progressLabel { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--color-primary); margin-bottom: 6px; }
.mock__bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); overflow: hidden; margin-bottom: var(--space-4); }
.mock__bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.mock__item {
	display: flex; align-items: center; gap: var(--space-3);
	padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
	margin-bottom: var(--space-3); font-size: 14px; font-weight: 600;
}
.mock__item--muted { color: var(--color-text-muted); }
.mock__check { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--color-primary); flex: none; }
.mock__item--muted .mock__check { border-color: var(--gray-300); }

@media (max-width: 860px) {
	.site__header, .site__footer { padding: var(--space-4); }
	.landing__card { grid-template-columns: 1fr; }
	.landing__panel { order: -1; }
	h1 { font-size: 40px; }
}