/* theKIcode · Startseite thekicode.de
 * Aufbau Sektion für Sektion nach andreasbaulig.de, Inhalte und Texte von theKIcode, CI theKIcode.
 */

@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 900; font-display: swap; src: url("../fonts/montserrat-latin-900-normal.woff2") format("woff2"); }

:root {
  --nacht: #0E0E0E;
  --nacht-2: #1A1A1A;
  --lila: #713DEB;
  --lila-tief: #4A1C9E;
  --lila-hell: #B9AEDB;
  --lila-zart: #F1ECFC;
  --orange: #F98E1D;
  --orange-hell: #FFAB3B;
  --verlauf: linear-gradient(180deg, #FFAB3B 0%, #F98E1D 100%);
  --text: #1A1230;
  --text-leise: #5B5373;
  --linie: #E7E2F1;
  --hell: #F7F5FB;
  --breite: 1160px;
  --schatten: 0 22px 46px -26px rgba(13, 6, 32, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--text); font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 900; line-height: 1.22; letter-spacing: -0.012em; color: #120A26; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.mitte { text-align: center; }
.leise { color: var(--text-leise); }
section[id] { scroll-margin-top: 90px; }
.sym { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.vorschau { background: linear-gradient(90deg, var(--lila-tief) 0%, var(--lila) 100%); color: #fff; text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 7px 12px; }

/* Knöpfe */
.knopf { display: inline-block; background: var(--verlauf); color: #fff; text-decoration: none; font-weight: 800; font-size: 16px; letter-spacing: .03em; line-height: 1.3; text-align: center; padding: 17px 34px; border-radius: 2px; box-shadow: 0 12px 26px -10px rgba(249, 142, 29, .7); transition: transform .15s ease, box-shadow .15s ease; }
.knopf:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(249, 142, 29, .85); }
.knopf-rand { display: inline-block; color: #fff; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: .04em; padding: 12px 26px; border: 1.5px solid rgba(255, 255, 255, .9); border-radius: 2px; transition: background .15s ease, color .15s ease; white-space: nowrap; }
.knopf-rand:hover { background: #fff; color: var(--lila-tief); }
.knopf-grau { display: inline-block; color: var(--text-leise); text-decoration: none; font-weight: 800; font-size: 14px; letter-spacing: .03em; padding: 10px 22px; border: 2px solid #9C95AE; border-radius: 2px; }
.knopf-grau:hover { border-color: var(--lila-tief); color: var(--lila-tief); }
.unter-knopf { margin-top: 10px; font-size: 13px; font-style: italic; color: var(--text-leise); }

/* Kopf mit Menü */
.kopf { position: sticky; top: 0; z-index: 40; background: var(--nacht); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .7); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 28px; height: 84px; }
.kopf .marke { height: 28px; width: auto; }
.menue { display: flex; align-items: center; gap: 34px; }
.menue > a, .menue-punkt > span { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: .02em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.menue > a:hover, .menue-punkt:hover > span { opacity: .85; }
.menue-punkt { position: relative; padding: 28px 0; }
.menue-punkt .sym { width: 16px; height: 16px; stroke-width: 2.4; }
.untermenue { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); min-width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(13, 6, 32, .5); padding: 10px 0; opacity: 0; visibility: hidden; transition: opacity .15s ease; }
.menue-punkt:hover .untermenue, .menue-punkt:focus-within .untermenue { opacity: 1; visibility: visible; }
.untermenue a { display: block; padding: 11px 24px; color: var(--text); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--linie); }
.untermenue a:last-child { border-bottom: 0; }
.untermenue a:hover { background: var(--lila-zart); color: var(--lila-tief); }
.untermenue small { display: block; color: var(--text-leise); font-size: 12px; }
.mobil-menue { display: none; }

/* 1 Hero */
.hero { background: linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .93)), url("../assets/hero-hintergrund.webp") center / cover no-repeat; padding: 48px 0 40px; }
.augenbraue { display: block; font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #120A26; }
.hero h1 { max-width: 1080px; margin: 12px auto 0; font-size: clamp(30px, 3.1vw, 44px); }
.hero-unter { max-width: 880px; margin: 14px auto 0; font-weight: 800; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.45; color: #120A26; }
.hero-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-top: 44px; text-align: left; }
.hero-bild { position: relative; box-shadow: 0 26px 50px -22px rgba(13, 6, 32, .55); }
.hero-bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-bild figcaption { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: rgba(13, 6, 32, .72); color: #fff; font-size: 14px; padding: 6px 12px; white-space: nowrap; }
.haken { display: grid; gap: 18px; }
.haken li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; font-size: 17px; line-height: 1.5; }
.haken .sym { width: 28px; height: 28px; stroke-width: 2.4; color: #120A26; }
.hero-aufruf { margin-top: 28px; text-align: center; }
.hero-aufruf .knopf { min-width: 340px; }
.siegel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 46px; max-width: 860px; margin-left: auto; margin-right: auto; }
.siegel-unter-foto { margin-top: 22px; }
.siegel-gruppe { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.siegel-reihe { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.siegel-kachel { width: 120px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; padding: 12px 10px; text-align: center; box-shadow: 0 10px 22px -18px rgba(13, 6, 32, .5); }
.siegel-kachel .sym { width: 26px; height: 26px; color: var(--lila-tief); margin: 0 auto 6px; }
.siegel-kachel b { display: block; font-size: 12px; line-height: 1.3; color: #120A26; }
.siegel-zahl { display: flex; align-items: center; gap: 14px; justify-content: center; }
.siegel-zahl .gross { font-size: 46px; font-weight: 900; color: var(--lila-tief); line-height: 1; }
.siegel-zahl b { display: block; font-size: 15px; color: #120A26; }
.siegel-zahl span { display: block; font-size: 13px; color: var(--text-leise); }
.siegel-orden { display: flex; align-items: center; gap: 14px; justify-content: center; }
.orden { width: 74px; height: 88px; flex: none; background: linear-gradient(160deg, var(--lila) 0%, var(--lila-tief) 60%, var(--nacht) 100%); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); display: grid; place-items: center; padding-bottom: 12px; }
.orden img { width: 40px; }
.siegel-orden b { display: block; font-size: 14px; color: #120A26; line-height: 1.35; }

/* 2 Nicht deine Schuld */
.schuld { padding: 96px 0; }
.schuld .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: start; }
.schuld h2 { font-size: clamp(30px, 3vw, 42px); }
.schuld p { margin-top: 14px; }
.punkte { margin: 12px 0 4px 22px; list-style: disc; display: grid; gap: 6px; }
.schuld .fett { font-weight: 800; color: #120A26; }
.schuld .knopf { margin-top: 28px; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--schatten); }
.portrait figcaption { margin-top: 12px; font-size: 13px; font-style: italic; color: var(--text-leise); }
.portrait { margin: 0; }

/* 3 Erwarten */
.erwarten { padding: 20px 0 96px; }
.erwarten h2 { font-size: clamp(28px, 2.8vw, 38px); }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 44px; }
.drei > div { text-align: center; }
.drei-symbol { width: 74px; height: 74px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--lila-zart); color: var(--lila-tief); }
.drei-symbol .sym { width: 36px; height: 36px; }
.drei h3 { font-size: 18px; }
.drei p { margin-top: 8px; font-size: 15px; color: var(--text-leise); }

/* 4 Sechs Bausteine (dunkles Band) */
.bausteine { background: var(--nacht); color: #DCD5EE; padding: 96px 0 88px; }
.bausteine h2 { color: #fff; font-size: clamp(28px, 3vw, 42px); max-width: 980px; margin: 0 auto; }
.bausteine .einleitung { max-width: 860px; margin: 22px auto 0; color: var(--lila-hell); }
.bausteine .vorgehen { margin-top: 26px; font-weight: 800; color: #fff; }
.ring-gitter { display: grid; grid-template-columns: 1fr 380px 1fr; gap: 28px; align-items: center; margin-top: 30px; }
.ring-spalte { display: grid; gap: 48px; }
.ring-spalte h3 { color: #fff; font-size: 17px; }
.ring-spalte p { margin-top: 6px; font-size: 14px; color: var(--lila-hell); }
.ring-links { text-align: right; }
.ring svg { width: 100%; height: auto; display: block; }
.bausteine .knopf { margin-top: 40px; }

/* 5 Fallstudien */
.fallstudien { padding: 96px 0; background: var(--hell); }
.fallstudien h2 { font-size: clamp(28px, 3vw, 40px); }
.fallstudien .unter { margin: 12px auto 0; max-width: 720px; color: var(--text-leise); }
.fall { display: grid; grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: start; margin-top: 56px; }
.fall-rechts .fall-medien { order: 2; }
.fall-medien { background: var(--nacht); box-shadow: var(--schatten); }
.fall-kopf { background: var(--nacht); color: #fff; font-weight: 800; font-size: 16px; padding: 12px 18px; }
.fall-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(160deg, var(--lila) 0%, var(--lila-tief) 60%, var(--nacht) 100%); }
.fall-bild img { width: 100%; height: 100%; object-fit: cover; }
.fall-bild.logo-flaeche { display: grid; place-items: center; }
.fall-bild.logo-flaeche img { width: 72%; height: auto; object-fit: contain; }
.fall-bild.kurs-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--nacht); }
.fall-bild.kurs-raster img { aspect-ratio: 1460 / 752; height: auto; }
.fall-fuss { padding: 16px 18px 18px; color: #DCD5EE; font-size: 14px; }
.fall-fuss b { display: block; color: #fff; font-size: 15px; }
.fall-text h4 { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #120A26; margin-top: 18px; }
.fall-text h4:first-child { margin-top: 0; }
.fall-text p { margin-top: 4px; font-size: 15px; }
.fall-zahlen { display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; border-top: 1px solid var(--linie); }
.fall-zahlen div { padding: 16px 8px 0; text-align: center; }
.fall-zahlen b { display: block; font-size: 30px; font-weight: 900; color: #120A26; line-height: 1.1; }
.fall-zahlen span { font-size: 13px; color: var(--text-leise); }

/* Karten mit Farbbalken (wie Baulig) */
.k { position: relative; background: #fff; box-shadow: 0 18px 36px -22px rgba(13, 6, 32, .5); padding: 22px 18px 26px; text-align: center; }
.k::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--balken, var(--verlauf)); }
.k .k-symbol { width: 46px; height: 46px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: var(--lila-zart); color: var(--lila-tief); }
.k .k-symbol .sym { width: 24px; height: 24px; }
.k small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .03em; color: var(--lila-tief); }
.k h3 { margin-top: 4px; font-size: 15px; }
.k p { margin-top: 8px; font-size: 13px; line-height: 1.55; color: var(--text-leise); }
a.k { display: block; color: inherit; text-decoration: none; transition: transform .15s ease; }
a.k:hover { transform: translateY(-3px); }
.b1 { --balken: linear-gradient(90deg, #4A1C9E, #713DEB); }
.b2 { --balken: linear-gradient(90deg, #FFAB3B, #F98E1D); }
.b3 { --balken: linear-gradient(90deg, #713DEB, #F98E1D); }
.b4 { --balken: linear-gradient(90deg, #0E0E0E, #4A1C9E); }
.b5 { --balken: linear-gradient(90deg, #B9AEDB, #713DEB); }
.b6 { --balken: linear-gradient(90deg, #F98E1D, #713DEB); }

/* 6 KI-Team */
.kiteam { padding: 96px 0; }
.kiteam .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.versatz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.versatz .k:nth-child(3n+2) { transform: translateY(46px); }
.versatz .k:nth-child(3n+3) { transform: translateY(12px); }
.kiteam h2 { font-size: clamp(28px, 2.8vw, 38px); }
.kiteam .rechts > p { margin-top: 14px; }
.kiteam .knopf { margin-top: 24px; }
.alltag-titel { margin-top: 34px; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--lila-tief); }
.alltag { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.alltag div { border: 1px solid var(--linie); padding: 14px 16px; font-size: 14px; }
.alltag b { display: block; color: #120A26; font-size: 15px; }

/* 7 Training */
.training { padding: 40px 0 110px; }
.training-karte { position: relative; background: var(--nacht); color: #DCD5EE; padding: 56px 55% 56px 56px; min-height: 560px; }
.training-karte h2 { color: #fff; font-size: clamp(26px, 2.6vw, 36px); }
.training-karte p { margin-top: 14px; font-size: 15px; }
.training-karte h3 { color: #fff; font-size: 16px; margin-top: 22px; }
.training-karte h3 + p { margin-top: 4px; }
.training-karte .knopf { margin-top: 30px; }
.laptop { position: absolute; right: -40px; top: 50%; transform: translateY(-46%); width: 52%; }
.laptop-schirm { background: #1b1b1f; border: 10px solid #2a2a30; border-bottom-width: 14px; border-radius: 14px 14px 0 0; aspect-ratio: 16 / 10; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; align-content: start; }
.laptop-schirm img { width: 100%; aspect-ratio: 1460 / 752; object-fit: cover; border-radius: 3px; }
.laptop-fuss { height: 16px; background: linear-gradient(#c9c9cf, #8e8e96); border-radius: 0 0 16px 16px; margin: 0 -6%; }

/* 8 Team */
.team { padding: 96px 0; background: var(--hell); }
.team .wrap { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; }
.team h2 { font-size: clamp(28px, 3vw, 40px); }
.team-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; }
.team-spalten h3 { font-size: 15px; }
.team-spalten p { margin-top: 6px; font-size: 14px; }
.team-spalten > div > div + div { margin-top: 22px; }
.zitat-karte { background: var(--nacht); color: #fff; padding: 28px; margin-top: 8px; }
.zitat-karte p { font-style: italic; font-weight: 800; font-size: 16px; line-height: 1.5; }
.zitat-karte .wer { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.zitat-karte .wer img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.zitat-karte .wer b { font-size: 14px; }
.mosaik { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mosaik > *:nth-child(even) { transform: translateY(40px); }
.mosaik img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--schatten); }
.mosaik-kachel { aspect-ratio: 4 / 5; display: grid; place-content: center; text-align: center; padding: 14px; box-shadow: var(--schatten); color: #fff; }
.mosaik-kachel img { width: 64px; aspect-ratio: auto; box-shadow: none; margin: 0 auto 12px; }
.mosaik-kachel b { font-size: 15px; }
.mosaik-kachel span { display: block; margin-top: 4px; font-size: 12px; color: var(--lila-hell); }
.kachel-lila { background: linear-gradient(160deg, var(--lila) 0%, var(--lila-tief) 100%); }
.kachel-nacht { background: var(--nacht); }

/* 9 Schritte */
.schritte { padding: 96px 0; }
.schritte > .wrap > h2 { font-size: clamp(28px, 3vw, 40px); }
.schritt { display: grid; grid-template-columns: .8fr 2.2fr; gap: 44px; align-items: start; margin-top: 72px; }
.schritt h3.gross { font-size: 30px; }
.schritt .stufe { margin-top: 10px; font-weight: 800; font-size: 15px; color: #120A26; }
.schritt .stufe + p { margin-top: 4px; font-size: 15px; }
.schritt .knopf { margin-top: 22px; font-size: 14px; padding: 15px 22px; }
.schritt-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

/* 10 Überzeuge dich */
.ueberzeuge { padding: 40px 0 110px; }
.ueberzeuge .wrap { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; }
.ueberzeuge-bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(160deg, var(--lila) 0%, var(--lila-tief) 55%, var(--nacht) 100%); box-shadow: var(--schatten); }
.ueberzeuge-bild img { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 130%; max-width: none; }
.ueberzeuge-karte { background: var(--nacht); color: #DCD5EE; padding: 52px 52px 48px; margin-left: -70px; position: relative; z-index: 2; box-shadow: 0 40px 80px -40px rgba(13, 6, 32, .8); }
.ueberzeuge-karte h2 { color: #fff; font-size: clamp(28px, 2.8vw, 38px); }
.ueberzeuge-karte p { margin-top: 14px; font-size: 15px; }
.ueberzeuge-karte b { color: #fff; }
.ueberzeuge-karte .knopf { margin-top: 26px; }

/* 11 Antworten */
.antworten { padding: 20px 0 96px; }
.antworten h2 { font-size: clamp(28px, 3vw, 40px); }
.antworten-gitter { display: grid; grid-template-columns: .9fr 1.1fr; gap: 26px; margin-top: 40px; align-items: start; }
.antworten-bild { box-shadow: var(--schatten); }
.antworten-bild img { width: 100%; aspect-ratio: 1460 / 752; object-fit: cover; }
.fragen-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fragen-kacheln > div:nth-child(even) { transform: translateY(26px); }
.frage-kachel { background: var(--nacht); color: #DCD5EE; padding: 18px 18px 16px; box-shadow: var(--schatten); }
.frage-kachel q { display: block; color: #fff; font-weight: 900; font-style: italic; font-size: 15px; line-height: 1.35; quotes: "„" "“"; }
.frage-kachel .antwort { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13px; line-height: 1.5; }
.frage-kachel .antwort img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.antworten .unten { max-width: 760px; margin: 52px auto 0; font-size: 15px; color: var(--text-leise); }
.antworten .knopf { margin-top: 18px; }

/* 12/13 Über uns */
.ueber { padding: 20px 0 40px; }
.ueber > .wrap > h2 { font-size: clamp(28px, 3vw, 40px); }
.person { display: grid; grid-template-columns: 1.25fr .75fr; background: var(--nacht); color: #DCD5EE; margin-top: 40px; box-shadow: var(--schatten); }
.person.umgekehrt { grid-template-columns: .75fr 1.25fr; }
.person.umgekehrt .person-bild { order: -1; }
.person-text { padding: 46px 46px 40px; }
.person-text h3 { color: #fff; font-size: 28px; }
.person-text .rolle { margin-top: 8px; color: #fff; font-weight: 800; font-size: 17px; }
.person-text p { margin-top: 14px; font-size: 14px; }
.person-text .links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; }
.person-text .links a { color: #fff; }
.person-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }

/* 14 Darauf kannst du dich verlassen */
.verlass { padding: 64px 0 96px; }
.verlass h2 { font-size: clamp(24px, 2.4vw, 30px); }
.verlass-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; }
.verlass-gitter h3 { font-size: 17px; }
.verlass-gitter .siegel-reihe { margin-top: 16px; }
.runde { display: flex; justify-content: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.runde span { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 8px; font-size: 12px; font-weight: 900; color: #fff; background: radial-gradient(circle at 50% 35%, var(--lila), var(--lila-tief)); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 10px 22px -14px rgba(13, 6, 32, .6); }
.verlass .knopf-grau { margin-top: 30px; }

/* 15 Häufige Fragen */
.faq { background: var(--nacht); color: #DCD5EE; padding: 80px 0; }
.faq .klein-oben { font-size: 13px; color: var(--lila-hell); }
.faq h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); margin-top: 6px; }
.faq-liste { max-width: 1000px; margin: 36px auto 0; }
.faq-liste h3 { color: #fff; font-size: 15px; margin-top: 22px; }
.faq-liste p, .faq-liste ol { margin-top: 4px; font-size: 14px; }
.faq-liste ol { padding-left: 20px; }
.tabelle { max-width: 760px; margin: 40px auto 0; border-collapse: collapse; width: 100%; background: linear-gradient(90deg, rgba(113, 61, 235, .18), rgba(113, 61, 235, .06)); }
.tabelle th, .tabelle td { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); text-align: left; font-size: 15px; }
.tabelle th { color: #fff; font-size: 17px; font-weight: 800; }
.tabelle td:nth-child(n+2), .tabelle th:nth-child(n+2) { text-align: center; width: 70px; }
.tabelle .ja { color: #8FD99A; font-weight: 900; }
.tabelle .nein { color: #F08A8A; font-weight: 900; }

/* 16 Aufruf */
.aufruf { background: var(--nacht); color: #DCD5EE; padding: 80px 0 90px; border-top: 1px solid rgba(255, 255, 255, .08); }
.aufruf h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); max-width: 760px; margin: 0 auto; }
.aufruf p { max-width: 640px; margin: 16px auto 0; font-size: 15px; }
.aufruf .knopf { margin-top: 26px; }

/* 17 Fuß mit Spalten */
.fuss { background: var(--nacht); color: #DCD5EE; padding: 54px 0 30px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px; }
.fuss .marke { height: 26px; width: auto; }
.fuss-spalten { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; margin-top: 30px; }
.fuss-spalten h4 { color: #fff; font-size: 14px; margin-bottom: 10px; }
.fuss-spalten a { display: block; color: #DCD5EE; text-decoration: none; padding: 3px 0; }
.fuss-spalten a:hover { color: #fff; text-decoration: underline; }
.haftung { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; color: var(--lila-hell); font-size: 12px; line-height: 1.6; }
.haftung b { color: #fff; }
.haftung p + p { margin-top: 8px; }

/* Tablet */
@media (max-width: 1040px) {
  .menue { display: none; }
  .mobil-menue { display: block; position: relative; }
  .mobil-menue summary { list-style: none; cursor: pointer; color: #fff; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 2px; }
  .mobil-menue summary::-webkit-details-marker { display: none; }
  .mobil-menue nav { position: absolute; right: 0; top: 54px; width: min(320px, 86vw); background: #fff; border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(13, 6, 32, .55); padding: 8px 0; max-height: 75vh; overflow: auto; }
  .mobil-menue nav a { display: block; padding: 11px 20px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie); font-size: 15px; }
  .mobil-menue nav b { display: block; padding: 12px 20px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lila-tief); }
  .kopf-rechts { display: flex; align-items: center; gap: 12px; }
  .hero-gitter, .schuld .wrap, .kiteam .wrap, .team .wrap, .antworten-gitter, .ueberzeuge .wrap { grid-template-columns: 1fr; }
  .siegel { grid-template-columns: 1fr; }
  .ring-gitter { grid-template-columns: 1fr; }
  .ring { max-width: 340px; margin: 0 auto; order: -1; }
  .ring-links { text-align: left; }
  .ring-spalte { gap: 22px; }
  .fall { grid-template-columns: 1fr; }
  .fall-rechts .fall-medien { order: 0; }
  .training-karte { padding: 44px 32px 300px; }
  .laptop { right: 50%; top: auto; bottom: -40px; transform: translateX(50%); width: 82%; }
  .schritt { grid-template-columns: 1fr; gap: 22px; }
  .ueberzeuge-karte { margin: -70px 16px 0; }
  .ueberzeuge-bild { max-width: 480px; width: 100%; margin: 0 auto; }
  .person, .person.umgekehrt { grid-template-columns: 1fr; }
  .person-bild { order: -1; height: 380px; }
  .fuss-spalten { grid-template-columns: repeat(3, 1fr); }
  .portrait { max-width: 460px; }
}

/* Handy */
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .kopf .wrap { height: 68px; }
  .kopf .marke { height: 22px; }
  .kopf .knopf-rand { padding: 10px 14px; font-size: 13px; }
  .kopf .knopf-rand .lang { display: none; }
  .augenbraue { font-size: 12px; }
  .hero h1 { font-size: 27px; }
  .hero-aufruf .knopf { min-width: 0; width: 100%; }
  .haken li { font-size: 16px; }
  .schuld, .fallstudien, .kiteam, .team, .schritte { padding: 68px 0; }
  .drei, .versatz, .schritt-karten, .alltag, .fragen-kacheln, .verlass-gitter, .team-spalten { grid-template-columns: 1fr; }
  .versatz .k:nth-child(n), .fragen-kacheln > div:nth-child(n), .mosaik > *:nth-child(n) { transform: none; }
  .training-karte { padding: 36px 22px 240px; }
  .laptop { width: 96%; bottom: -30px; }
  .ueberzeuge-karte { margin: -56px 0 0; padding: 34px 24px; }
  .person-text { padding: 32px 24px; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
  .knopf { padding: 16px 20px; font-size: 15px; }
}
@media (min-width: 641px) { .kopf .knopf-rand .kurz { display: none; } }
@media (max-width: 640px) {
  .hero-bild figcaption { white-space: normal; width: max-content; max-width: 90%; text-align: center; font-size: 12px; bottom: 10px; }
}
@media (max-width: 1040px) { .ring-links { order: 3; } }