/* ============================================================
   Aptenio — aptenio.at (Warteliste)
   CI wie Kursdecks: courses/grundlagen/decks/grundkurs-slides.html
   Layout B "heller Split-Hero" · Status: entwurf
   ============================================================ */

/* ---- Fonts: lokal (woff2, OFL) — KEIN Google-Fonts-CDN (DSGVO) ----
   Lexend nur als Bold (700) vorhanden -> Headings durchgehend 700. */
@font-face { font-family:'Lexend';        src:url('fonts/Lexend-Bold.woff2') format('woff2');        font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/SourceSans3-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/SourceSans3-Bold.woff2') format('woff2');    font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Source Sans 3'; src:url('fonts/SourceSans3-Italic.woff2') format('woff2');  font-weight:400; font-style:italic; font-display:swap; }

:root {
    --paper:      #f4efe8;
    --paper-2:    #ece5da;
    --espresso:   #2f2b27;
    --espresso-2: #3a342e;
    --amber:      #c0763d;
    --amber-deep: #a65f2e;
    --text:       #2a2622;
    --muted:      #8b8178;
    --border:     #dcd2c6;
    --white:      #ffffff;
    --warmdark:   #3a2c1a;
    --warmdark-2: #46341f;
    --warmdark-3: #2e2315;
    --font-display: 'Lexend', 'Segoe UI', sans-serif;
    --font-body:    'Source Sans 3', 'Segoe UI', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); font-size:18px; line-height:1.6; color:var(--text); background:var(--paper); display:flex; flex-direction:column; min-height:100vh; }
main { flex:1 0 auto; }
.site-foot { flex-shrink:0; }
h1, h2, h3 { font-family:var(--font-display); font-weight:700; color:var(--espresso); line-height:1.15; }
a { color:var(--amber-deep); }
[hidden] { display:none !important; }

.wrap { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ---- Header: dezenter Sprachumschalter oben rechts; auf Unterseiten Brand-Link ---- */
.site-head { background:var(--paper); }
.site-head .wrap { display:flex; align-items:center; padding-top:20px; padding-bottom:8px; }
.brand { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:1px; color:var(--espresso); text-decoration:none; }
.brand span { color:var(--amber); }
.lang-switch { margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:1px; }
.lang-switch a { color:var(--muted); text-decoration:none; padding:4px 9px; border-radius:6px; }
.lang-switch a:hover { color:var(--espresso); }
.lang-switch .aktiv { color:var(--espresso); background:var(--paper-2); }

/* ---- Hero: Split-Layout auf Papier ---- */
.hero { background:var(--paper); padding:48px 0 72px; }
.hero .wrap { display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; }
.hero-kicker { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:3px; text-transform:uppercase; color:var(--amber-deep); margin-bottom:22px; }
.hero-kicker::before { content:''; width:30px; height:6px; background:var(--amber); border-radius:3px; flex:0 0 auto; }
.hero h1 { font-size:clamp(34px, 4.5vw, 54px); letter-spacing:-1px; margin-bottom:18px; }
.hero .sub { font-size:20px; max-width:34em; margin-bottom:36px; }

/* Kursprogramm-Stepper (5 Kurse, nummeriert) */
.stepper { list-style:none; display:grid; gap:14px; }
.stepper li { display:flex; gap:16px; align-items:baseline; }
.stepper .n { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--amber-deep); flex:0 0 34px; font-variant-numeric:tabular-nums; }
.stepper .kurs { font-family:var(--font-display); font-weight:700; color:var(--espresso); }
.stepper .untertitel { display:block; color:var(--muted); margin-top:2px; }

/* ---- Formular-Karte ---- */
.form-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:32px 30px; box-shadow:0 18px 50px rgba(47,43,39,0.10); }
.form-card h2 { font-size:24px; margin-bottom:8px; }
.form-intro { color:var(--muted); font-size:16px; margin-bottom:20px; }
.form-fehler { border:1px solid var(--amber); background:#f9ecdf; color:var(--espresso); border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:15px; }
.feld { margin-bottom:16px; }
.feld label { display:block; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:0.5px; color:var(--espresso); margin-bottom:6px; }
.feld .optional { color:var(--muted); font-weight:400; }
.feld input[type=text], .feld input[type=email] { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font:inherit; background:var(--paper); color:var(--text); }
.feld input:focus { outline:2px solid var(--amber); outline-offset:1px; border-color:var(--amber); }
.dsgvo { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--muted); margin:18px 0; }
.dsgvo input { margin-top:4px; accent-color:var(--amber-deep); }
.btn { display:block; width:100%; background:var(--amber); color:#fff; border:0; border-radius:10px; padding:14px 18px; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:0.5px; cursor:pointer; }
.btn:hover { background:var(--amber-deep); }

/* Honeypot: visuell und fuer Screenreader raus, fuer Bots ein normales Feld */
.hp { position:absolute !important; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* ---- USP-Sektion (weiss, 3 Spalten) ---- */
.usp { background:var(--white); border-top:1px solid var(--border); padding:64px 0; }
.usp .wrap { display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.usp h3 { font-size:20px; margin-bottom:10px; display:flex; gap:10px; align-items:baseline; }
.usp h3::before { content:'◆'; color:var(--amber); font-size:14px; flex:0 0 auto; }
.usp p { color:var(--muted); }

/* ---- "Mehr erfahren": klickbare Teaser-Karten (Ratgeber + Leistung) ---- */
.mehr { background:var(--paper-2); border-top:1px solid var(--border); padding:64px 0; }
.mehr > .wrap > h2 { font-size:26px; margin-bottom:6px; }
.mehr .mehr-intro { color:var(--muted); margin-bottom:28px; }
.mehr-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:center; }
.mehr-card { display:block; background:var(--white); border:1px solid var(--border); border-radius:12px; padding:24px; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.mehr-card:hover { border-color:var(--amber); transform:translateY(-2px); }
.mehr-card h3 { font-size:20px; margin-bottom:8px; color:var(--espresso); }
.mehr-card p { color:var(--muted); margin-bottom:12px; }
.mehr-card .pfeil { color:var(--amber-deep); font-family:var(--font-display); font-weight:700; }
@media (max-width: 720px) { .mehr-grid { grid-template-columns:1fr; } }

/* ---- Footer (warm-dark) ---- */
.site-foot { background:var(--warmdark); color:var(--paper); padding:28px 0; font-size:15px; }
.site-foot .wrap { display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; }
.foot-nav { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.site-foot a { color:var(--paper); text-decoration:none; }
.site-foot a:hover { color:var(--amber); }
.foot-hinweis { color:var(--muted); }

/* ---- Unterseiten (danke, impressum, datenschutz) ---- */
.seite { background:var(--paper); padding:56px 0 80px; min-height:60vh; }
.seite .wrap { max-width:760px; }
.seite h1 { font-size:38px; margin-bottom:20px; }
.seite h2 { font-size:24px; margin:32px 0 10px; }
.seite p, .seite li { margin-bottom:10px; }
.seite ul { padding-left:22px; }
.btn-link { display:inline-block; background:var(--amber); color:#fff; text-decoration:none; border-radius:10px; padding:12px 22px; font-family:var(--font-display); font-weight:700; margin-top:18px; }
.btn-link:hover { background:var(--amber-deep); }
.platzhalter { background:#f9ecdf; border:1px dashed var(--amber-deep); border-radius:8px; padding:2px 8px; font-weight:700; }

/* ---- Responsive: Formular-Karte rutscht unter den Claim ---- */
@media (max-width: 900px) {
    .hero .wrap { grid-template-columns:1fr; gap:40px; }
    .usp .wrap { grid-template-columns:1fr; gap:28px; }
}

/* ---- Stepper-Links + Kursseiten ---- */
.stepper a { color:inherit; text-decoration:none; display:block; }
.stepper a:hover .kurs { color:var(--amber-deep); text-decoration:underline; }
.kurs-kicker { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--amber-deep); margin-bottom:14px; }
.kurs-kicker::before { content:''; width:30px; height:6px; background:var(--amber); border-radius:3px; flex:0 0 auto; }

/* ===== Homepage Option C: Navi, Hero-slim, Saeulen, Warteliste-Block ===== */
.topnav { position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--border); }
.topnav .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:12px; padding-bottom:12px; }
.topnav .brand { font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--amber-deep); letter-spacing:1px; text-decoration:none; }
.topnav .brand:hover { color:var(--amber); }
.brand-kurz { display:none; }
.topnav-links { display:flex; align-items:center; gap:18px; }
.topnav-links a { color:var(--text); text-decoration:none; font-weight:600; font-size:15px; }
.topnav-links a:hover { color:var(--amber-deep); }
.topnav-links .nav-cta { background:var(--amber); color:#fff; border-radius:8px; padding:7px 14px; }
.topnav-links .nav-cta:hover { background:var(--amber-deep); }
.nav-lang { display:flex; gap:6px; font-size:13px; }
.nav-lang a { color:var(--muted); font-weight:600; }
.nav-lang a.aktiv { color:var(--espresso); }

.hero-slim .wrap { display:block; max-width:820px; text-align:center; padding-top:28px; padding-bottom:56px; }
.hero-slim h1 { font-size:44px; }
.hero-slim .sub { color:var(--muted); margin-top:14px; font-size:19px; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.btn-link.sekundaer { background:transparent; color:var(--amber-deep); border:1px solid var(--amber); }
.btn-link.sekundaer:hover { background:var(--paper-2); }

.saeulen { background:var(--white); border-top:1px solid var(--border); padding:64px 0; scroll-margin-top:64px; }
.saeulen > .wrap > h2 { font-size:28px; margin-bottom:24px; text-align:center; }
.saeulen-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.saeule-card { background:var(--paper); border:1px solid var(--border); border-radius:12px; padding:28px; }
.saeule-card h3 { font-size:22px; margin-bottom:10px; }
.saeule-card p { color:var(--muted); margin-bottom:14px; }
.saeule-card .pfeil { color:var(--amber-deep); font-family:var(--font-display); font-weight:700; text-decoration:none; }
.saeule-card .pfeil:hover { color:var(--amber); }

.kurse { padding:56px 0; scroll-margin-top:64px; }
.kurse > .wrap > h2 { font-size:28px; margin-bottom:20px; }
.kurse-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center; }
.grafik { margin:0; }
.grafik img { width:100%; height:auto; display:block; }
.grafik figcaption { margin-top:8px; text-align:center; color:var(--muted); font-size:15px; }
.mehr { scroll-margin-top:64px; }

.warteliste-sektion { background:var(--paper-2); border-top:1px solid var(--border); padding:64px 0; scroll-margin-top:64px; }
.warteliste-sektion .wrap { max-width:560px; margin:0 auto; text-align:center; }
.warteliste-sektion .warteliste-text { margin-bottom:24px; }
.warteliste-sektion .form-card { max-width:520px; margin:0 auto; text-align:left; }
.warteliste-sektion h2 { font-size:28px; margin-bottom:10px; }
.warteliste-sektion .warteliste-text p { color:var(--muted); }

@media (max-width:780px) {
  .topnav .wrap { flex-wrap:wrap; gap:10px; }
  .topnav-links { gap:12px; flex-wrap:wrap; font-size:14px; }
  .brand-voll { display:none; }
  .brand-kurz { display:inline; }
  .hero-slim h1 { font-size:30px; }
  .saeulen-grid { grid-template-columns:1fr; }
  .kurse-grid { grid-template-columns:1fr; gap:28px; }
  .mehr-grid { grid-template-columns:1fr; }
}

/* ---- Danke-/Bestaetigungsseiten ---- */
.danke-icon { display:block; margin:0 0 18px; }
.seite-danke .danke-next { margin-top:6px; }
.seite-danke .danke-next a { font-family:var(--font-display); font-weight:700; }

.opt-unterlagen { display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--muted); margin:14px 0; }
.opt-unterlagen input { margin-top:4px; accent-color:var(--amber-deep); }

/* --- KI-Selbstcheck (ki-check.html) --- */
.check-hero { position:relative; overflow:hidden; color:var(--paper); padding:48px 0 40px;
  background: radial-gradient(900px 520px at 86% -20%, rgba(192,118,61,.2), transparent 60%),
              linear-gradient(160deg, var(--warmdark-2) 0%, var(--warmdark) 60%, var(--warmdark-3) 100%); }
.check-hero .wrap { position:relative; z-index:1; }
.check-hero .check-kicker { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:3px; text-transform:uppercase; color:var(--amber); margin-bottom:14px; }
.check-hero .check-kicker::before { content:''; width:30px; height:6px; background:var(--amber); border-radius:3px; flex:0 0 auto; }
.check-hero h1 { color:var(--paper); font-size:clamp(28px,4vw,42px); letter-spacing:-1px; margin-bottom:12px; }
.check-hero .sub { color:#d8cec1; font-size:18px; max-width:34em; }
.check-art { position:absolute; right:-20px; top:-16px; width:300px; height:220px; opacity:.85; pointer-events:none; }
.kic-legend { background:var(--paper-2); border-bottom:1px solid var(--border); padding:12px 0; font-size:14px; color:var(--muted); }
.kic-legend .wrap { display:flex; flex-wrap:wrap; gap:6px 16px; }
.kic-legend b { color:var(--espresso); font-weight:700; }
.kic-card { background:var(--white); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; margin:18px 0; }
.kic-card-head { display:flex; align-items:center; gap:10px; background:var(--warmdark); padding:11px 18px; }
.kic-card-head::before { content:''; width:9px; height:9px; background:var(--amber); transform:rotate(45deg); border-radius:2px; flex:0 0 auto; }
.kic-card-head h2 { color:var(--paper); font-size:16px; margin:0; }
.kic-card .kic-items { padding:4px 18px 12px; }
.kic-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--paper-2); }
.kic-item:last-child { border-bottom:0; }
.kic-label { font-size:15px; line-height:1.35; }
.kic-seg { display:inline-flex; flex:0 0 auto; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--white); }
.kic-seg input { position:absolute; width:1px; height:1px; opacity:0; clip:rect(0 0 0 0); }
.kic-seg label { min-width:34px; text-align:center; padding:7px 10px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:14px; border-left:1px solid var(--border); color:var(--muted); user-select:none; }
.kic-seg label:first-of-type { border-left:0; }
.kic-seg input:checked + label { background:var(--amber); color:var(--white); }
.kic-seg input:checked + label.kic-skip { background:var(--paper-2); color:var(--espresso); }
.kic-seg input:focus-visible + label { outline:2px solid var(--amber); outline-offset:-2px; }
@media (max-width:600px) { .kic-item { flex-direction:column; align-items:flex-start; gap:8px; } }