/* ============================================================================
   Startseite 34a (Übergabe 2, 29.09.2026)
   ----------------------------------------------------------------------------
   Verschmelzung: Mockup (E:\_34a\Modul_06_KI_Trainer\features\hero_mockup.html,
   Hi-Vis: Warnwesten-Gelb/Tiefschwarz auf warmem Weiß, Warnband, Demo-Karte)
   + bisheriges Design (dunkle Flächen #0f1119 aus dem Lernbereich) als
   Wechsel-Abschnitte. Schriften: css/schriften.css (selbst ausgeliefert).
   Navigation kommt aus js/nav.js (header.kopfnav / footer.fuss).
   ========================================================================== */

:root {
  --tinte:   #1a1813;
  --tinte-2: #4a463c;
  --tinte-3: #6b665a;
  --papier:  #f3ecdc;               /* Creme statt Weiß (blendet weniger, 30.09.2026) */
  --papier-2:#e8dfc9;
  --vis:     #f6cf1a;
  --vis-tief:#c99a06;
  --ok:      #2e8b57;
  --warn:    #c4561b;
  --linie:   #d6ccb4;
  --karte:   #faf6ec;               /* Karten: helles Creme statt reinem Weiß */
  --nacht:        #0f1119;
  --nacht-karte:  #161a26;
  --nacht-rand:   #2a2e3f;
  --nacht-text:   #e8eaee;
  --nacht-leise:  #9aa1ad;
  --kopf: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --rand-x: clamp(16px, 4vw, 64px);
  --lauf: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--papier); }
body {
  background: var(--papier); color: var(--tinte);
  font: 16px/1.6 var(--kopf); font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--vis-tief); outline-offset: 2px; }

.warnband { height: 10px; background: repeating-linear-gradient(-45deg, var(--tinte) 0 14px, var(--vis) 14px 28px); }
.warnband.schmal { height: 6px; }
.innen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand-x); }
.mono { font-family: var(--mono); }
.etikett {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .78rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1.5px solid currentColor; padding: .35rem .7rem;
}
.etikett .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.markiert { background: linear-gradient(0deg, var(--vis) 0 38%, transparent 38%); }

/* ── Kopfleiste (aus nav.js) ──────────────────────────────────────────────── */
.kopfnav {
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1rem var(--rand-x); border-bottom: 1px solid var(--linie);
  max-width: 1328px; margin: 0 auto;
}
.kopfnav-marke { font-weight: 900; font-size: 1.3rem; letter-spacing: -.02em; font-variation-settings: 'wdth' 115; text-decoration: none; white-space: nowrap; }
.kopfnav-marke em, .fuss-marke em { font-style: normal; background: var(--vis); color: var(--tinte); padding: 0 .3rem; }
.kopfnav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.kopfnav-links a, .kopfnav-login { text-decoration: none; font-size: .95rem; font-weight: 500; opacity: .75; }
.kopfnav-links a:hover, .kopfnav-login:hover { opacity: 1; }
.kopfnav-aktion { display: flex; align-items: center; gap: 1rem; }
.kopfnav-cta {
  background: var(--tinte); color: var(--papier); text-decoration: none; font-weight: 700; font-size: .9rem;
  padding: .55rem 1.05rem; white-space: nowrap;
}
.kopfnav-cta:hover { background: #000; }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 700 1rem/1.2 var(--kopf); cursor: pointer; text-decoration: none; color: var(--tinte);
  padding: .95rem 1.4rem; border: 2px solid var(--tinte); background: transparent; min-height: 48px;
  transition: transform .18s var(--lauf), box-shadow .18s var(--lauf), background .18s;
}
.knopf.haupt { background: var(--vis); box-shadow: 4px 4px 0 var(--tinte); }
.knopf.haupt:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinte); }
.knopf.leise:hover { background: var(--papier-2); }
.knopf.klein { padding: .55rem .9rem; min-height: 40px; font-size: .9rem; }
.knopf:disabled { opacity: .5; cursor: wait; transform: none; }
.nacht .knopf { color: var(--nacht-text); border-color: var(--nacht-text); }
.nacht .knopf.haupt { color: var(--tinte); border-color: var(--tinte); box-shadow: 4px 4px 0 #000; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
  max-width: 1328px; margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) var(--rand-x) clamp(3rem, 7vh, 5.5rem);
}
.hero h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.03; font-weight: 900; letter-spacing: -.025em;
  font-variation-settings: 'wdth' 108; margin: 1.4rem 0 1.3rem; overflow-wrap: break-word; hyphens: manual;
}
.hero .unter { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.55; max-width: 36rem; color: var(--tinte-2); }
.hero .unter strong { color: var(--tinte); }
.ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.mikro { margin-top: .9rem; font-size: .88rem; color: var(--tinte-3); }
.vertrauen { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 2.4rem; font: .82rem/1.5 var(--mono); color: var(--tinte-2); }
.vertrauen span::before { content: '▸ '; color: var(--vis-tief); }
.auftritt { animation: auftritt .5s var(--lauf) both; }
.auftritt.v1 { animation-delay: .05s; } .auftritt.v2 { animation-delay: .12s; } .auftritt.v3 { animation-delay: .2s; }
.auftritt.v4 { animation-delay: .28s; } .auftritt.v5 { animation-delay: .36s; }

/* ── Demo-Karte ───────────────────────────────────────────────────────────── */
.demo { position: relative; animation: auftritt .6s .3s var(--lauf) both; }
.demo::before {
  content: ''; position: absolute; inset: 14px -14px -14px 14px; z-index: 0;
  background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--papier-2) 10px 20px);
  border: 1px solid var(--linie);
}
.karte { position: relative; z-index: 1; background: var(--karte); border: 2px solid var(--tinte); box-shadow: 8px 8px 0 var(--vis); }
.karte-kopf {
  display: flex; align-items: center; gap: .7rem; border-bottom: 2px solid var(--tinte); padding: .75rem 1.1rem;
  font: 600 .76rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.karte-kopf .rec { width: 9px; height: 9px; border-radius: 50%; background: var(--warn); animation: blinken 1.6s infinite; }
.karte-kopf .marke { margin-left: auto; background: var(--tinte); color: var(--vis); padding: .15rem .5rem; }
.karte-inhalt { padding: 1.2rem 1.2rem 1.35rem; display: grid; gap: 1rem; }
.nachricht { max-width: 92%; }
.nachricht.du { justify-self: end; }
.wer { font: 600 .7rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-3); margin-bottom: .3rem; }
.blase { font-size: .95rem; line-height: 1.5; padding: .8rem .95rem; border: 1.5px solid var(--tinte); background: var(--papier); overflow-wrap: break-word; }
.du .blase { background: var(--vis); border-style: dashed; }
.abgleich { border: 1.5px solid var(--tinte); background: var(--karte); }
.abgleich-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem .95rem; border-bottom: 1px dashed var(--linie); font: 600 .74rem/1.4 var(--mono); }
.chip { padding: .12rem .5rem; border: 1px solid currentColor; }
.chip.drin { color: var(--ok); }
.chip.fehlt { color: var(--warn); }
.abgleich-text { padding: .75rem .95rem; font-size: .92rem; line-height: 1.5; }
.abgleich-text b { background: linear-gradient(0deg, var(--vis) 0 32%, transparent 32%); }
.tippt { display: flex; gap: .35rem; align-items: center; }
.tippt i { width: 6px; height: 6px; background: var(--tinte); border-radius: 50%; animation: blinken 1.2s infinite; }
.tippt i:nth-child(2) { animation-delay: .2s; } .tippt i:nth-child(3) { animation-delay: .4s; }
.tippt span { font: .74rem var(--mono); color: var(--tinte-3); margin-left: .4rem; }
.demo-eingabe {
  width: 100%; min-height: 120px; resize: vertical; font: .95rem/1.5 var(--kopf); color: var(--tinte);
  background: var(--karte)be6; border: 1.5px dashed var(--tinte); padding: .8rem .95rem;
}
.demo-eingabe:focus { outline: 3px solid var(--vis); outline-offset: 0; }
.demo-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.demo-hinweis { font-size: .8rem; color: var(--tinte-3); line-height: 1.45; }
.demo-fehler { color: var(--warn); font-size: .9rem; }
.demo-rot { border: 2px solid #b3261e; background: #fdecea; padding: .7rem .9rem; font-size: .9rem; line-height: 1.45; }
.demo-rot strong { display: block; color: #b3261e; }
.punkte-zeile { font: 600 .82rem/1.4 var(--mono); padding: .6rem .95rem 0; }
.kernliste { list-style: none; padding: 0; display: grid; gap: .25rem; font-size: .9rem; }
.kernliste li { padding-left: 1.3rem; position: relative; }
.kernliste li::before { content: '▸'; position: absolute; left: 0; color: var(--vis-tief); }
.selbst { border-top: 1px dashed var(--linie); padding-top: .8rem; }
.selbst p { font-size: .85rem; color: var(--tinte-2); margin-bottom: .5rem; }
.selbst .reihe { display: flex; flex-wrap: wrap; gap: .5rem; }
.selbst button { font: 600 .82rem var(--kopf); padding: .45rem .8rem; border: 1.5px solid var(--tinte); background: var(--karte); cursor: pointer; min-height: 36px; }
.selbst button.aktiv { background: var(--vis); }

/* ── Abschnitte ───────────────────────────────────────────────────────────── */
.abschnitt { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.abschnitt h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; font-weight: 900; letter-spacing: -.02em;
  font-variation-settings: 'wdth' 106; margin: 1rem 0 1rem; max-width: 22ch;
}
.abschnitt .einleitung { font-size: 1.08rem; color: var(--tinte-2); max-width: 44rem; }
.nacht { background: var(--nacht); color: var(--nacht-text); }
.nacht .einleitung { color: var(--nacht-leise); }
.nacht .etikett { color: var(--vis); }
.papier-2 { background: var(--papier-2); }

/* Vergleich (dunkel – das bisherige Design) */
.vergleich { width: 100%; border-collapse: collapse; margin-top: 2.2rem; font-size: 1rem; }
.vergleich th, .vergleich td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--nacht-rand); vertical-align: middle; }
.vergleich thead th { font: 600 .76rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nacht-leise); }
.vergleich thead th.wir { color: var(--tinte); background: var(--vis); }
.vergleich td.wir { background: rgba(246, 207, 26, .08); }
.vergleich td:not(:first-child), .vergleich th:not(:first-child) { text-align: center; width: 22%; }
.ja { color: #4ade80; font-weight: 800; font-size: 1.2rem; }
.nein { color: #6b6f82; font-weight: 800; font-size: 1.2rem; }
.fussnote { font-size: .8rem; color: var(--nacht-leise); margin-top: .9rem; }

/* Werkzeuge */
.werkzeuge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem; }
.werkzeug { background: var(--karte); border: 2px solid var(--tinte); padding: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.werkzeug .nr { font: 600 .78rem var(--mono); letter-spacing: .08em; color: var(--tinte-3); }
.werkzeug h3 { font-size: 1.3rem; line-height: 1.2; font-weight: 800; font-variation-settings: 'wdth' 104; }
.werkzeug p { color: var(--tinte-2); font-size: .97rem; }
.werkzeug .paket { margin-top: auto; font: 600 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; align-self: flex-start; background: var(--tinte); color: var(--vis); padding: .2rem .5rem; }
.werkzeug.hervor { box-shadow: 6px 6px 0 var(--vis); }

/* Schriftlich */
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 1.4rem; }
.zahl { border-top: 3px solid var(--tinte); padding-top: .6rem; }
.zahl strong { display: block; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; line-height: 1; font-variation-settings: 'wdth' 112; }
.zahl span { font-size: .88rem; color: var(--tinte-2); }
.sg-liste { list-style: none; padding: 0; border: 2px solid var(--tinte); background: var(--karte); }
.sg-liste li { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .6rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--linie); font-size: .95rem; }
.sg-liste li:last-child { border-bottom: 0; }
.sg-liste .sg { font: 600 .8rem var(--mono); }
.sg-liste .frei { font: 600 .68rem var(--mono); text-transform: uppercase; letter-spacing: .06em; background: var(--vis); padding: .1rem .4rem; }
.info-klein { font-size: .88rem; color: var(--tinte-3); margin-top: 1rem; }

/* Sprachen (dunkel) */
.sprachen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.sprache { border: 1.5px solid var(--nacht-rand); background: var(--nacht-karte); padding: .55rem .95rem; font-size: 1rem; font-family: inherit; color: inherit; cursor: pointer; }
.sprache:hover { border-color: var(--vis); }
.sprache.aktiv { border-color: var(--vis); color: var(--vis); }
.sprache:focus-visible { outline: 2px solid var(--vis); outline-offset: 2px; }
.sprache bdi { font-family: system-ui, 'Segoe UI', sans-serif; }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.4rem; align-items: stretch; }
.preis { background: var(--karte); border: 2px solid var(--tinte); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.preis.empfohlen { box-shadow: 8px 8px 0 var(--vis); }
.preis h3 { font: 600 .82rem var(--mono); letter-spacing: .08em; text-transform: uppercase; display: flex; justify-content: space-between; gap: .5rem; }
.preis h3 .empf { background: var(--tinte); color: var(--vis); padding: .1rem .45rem; }
.preis .betrag { font-size: 2.8rem; font-weight: 900; line-height: 1; font-variation-settings: 'wdth' 110; }
.preis .betrag small { font-size: .9rem; font-weight: 500; color: var(--tinte-3); margin-left: .3rem; }
.preis ul { list-style: none; padding: 0; display: grid; gap: .5rem; font-size: .95rem; }
.preis li { padding-left: 1.4rem; position: relative; }
.preis li::before { content: '✓'; position: absolute; left: 0; font-weight: 800; color: var(--ok); }
.preis .knopf { margin-top: auto; }
.preis-info { font-size: .85rem; color: var(--tinte-3); margin-top: 1.2rem; }

/* FAQ */
.faq { margin-top: 2rem; border-top: 2px solid var(--tinte); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
  font-weight: 700; font-size: 1.08rem; font-variation-settings: 'wdth' 102;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .4rem; top: .9rem; font: 600 1.4rem var(--mono); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 1.2rem; color: var(--tinte-2); max-width: 46rem; }

/* Schluss + Fuß (dunkel) */
.schluss { text-align: left; }
.schluss h2 { max-width: 26ch; }
.fuss {
  background: var(--nacht); color: var(--nacht-text); display: grid; gap: 1.2rem;
  padding: 2.4rem max(var(--rand-x), calc((100% - 1200px) / 2 + var(--rand-x))) 3rem;
}
.fuss-marke { font-weight: 900; font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem; }
.fuss-marke > span:not(.fuss-name) { font: 500 .8rem var(--mono); color: var(--nacht-leise); }
.fuss-links { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.fuss-links a { color: var(--nacht-text); text-decoration: none; opacity: .8; font-size: .95rem; }
.fuss-links a:hover { opacity: 1; text-decoration: underline; }
.fuss-klein { font-size: .8rem; color: var(--nacht-leise); }

@keyframes auftritt { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blinken { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (max-width: 960px) {
  .hero, .zweispaltig { grid-template-columns: 1fr; }
  .demo { max-width: 36rem; }
  .werkzeuge, .preise { grid-template-columns: 1fr; }
  .kopfnav-links { display: none; }
  .kopfnav-aktion { margin-left: auto; }
}
@media (max-width: 560px) {
  .kopfnav { gap: .8rem; }
  /* „Anmelden“ bleibt auch am Handy sichtbar (02.10.2026) – dafür kompaktere Maße */
  .kopfnav-aktion { gap: .6rem; }
  .kopfnav-login { font-size: .85rem; opacity: 1; font-weight: 600; white-space: nowrap; }
  .kopfnav-cta { font-size: .82rem; padding: .5rem .7rem; }
  .kopfnav-marke { font-size: 1.1rem; }
  .kopfnav { flex-wrap: wrap; row-gap: .5rem; } /* Notfall: sehr schmale Handys brechen um statt zu überlaufen */
  .kopfnav-aktion { margin-left: auto; }
  .demo::before { inset: 10px -8px -10px 8px; }
  .karte { box-shadow: 5px 5px 0 var(--vis); }
  .karte-inhalt { padding: 1rem; }
  .nachricht { max-width: 100%; }
  .zahlen { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
  .vergleich { font-size: .9rem; }
  .vergleich th, .vergleich td { padding: .75rem .45rem; }
  .vergleich thead th { font-size: .66rem; letter-spacing: .02em; }
  .ctas .knopf { width: 100%; }
  .sg-liste li { grid-template-columns: 2.6rem 1fr; }
  .sg-liste .frei { grid-column: 2; justify-self: start; }
}
@media (max-width: 420px) {
  .kopfnav { gap: .5rem; }
  .kopfnav-marke { font-size: 1rem; }
  .kopfnav-aktion { gap: .5rem; }
  .kopfnav-login { font-size: .8rem; }
  .kopfnav-cta { font-size: .78rem; padding: .45rem .55rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }