/* V2 (26.10.2026): Startseite wie Intragentic aufgebaut — Farben, Schrift und Kopf bleiben. */
.v2 { --karte: #0f0f13; --linie: #2b2b35; --gedaempft: #b9b9c6; }
.v2-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.v2-sektion { padding: 96px 0; border-top: 1px solid var(--linie); }
.v2-sektion:first-of-type { border-top: 0; }
.v2-label { display: inline-block; font: 600 13px/1 var(--text); letter-spacing: .16em; text-transform: uppercase; color: var(--lila); margin-bottom: 18px; }
.v2 h2.v2-titel { font: 700 clamp(30px, 3.6vw, 48px)/1.12 var(--titel); letter-spacing: -.04em; max-width: 820px; margin-bottom: 18px; }
.v2-einleitung { font-size: 19px; line-height: 1.5; color: var(--gedaempft); max-width: 720px; margin-bottom: 48px; }

/* Siegel unter dem Kopf */
.v2-siegel { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; max-width: 1340px; margin: 0 auto; padding: 14px 24px; }
.v2-siegel span { border: 1px solid var(--linie); padding: 7px 12px; font-size: 13px; color: var(--gedaempft); }
.v2-siegel b { color: var(--weiss); font-weight: 600; margin-right: 6px; }
.v2-siegel b::before { content: "✓ "; color: var(--lila); }

/* Hero */
.v2-held { padding: 110px 0 90px; }
.v2-held .v2-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.v2-held h1 { font: 700 clamp(40px, 5.2vw, 74px)/1.08 var(--titel); letter-spacing: -.05em; margin-bottom: 24px; }
.v2-held p { font-size: 20px; line-height: 1.5; color: var(--gedaempft); max-width: 560px; }
.v2-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.v2-knoepfe .knopf { padding: 16px 26px; font-size: 15px; }
.knopf.hohl { background: transparent; color: var(--weiss); border: 1px solid var(--weiss); }
.v2-held-bild img { width: 100%; border-radius: 14px; }
.v2-punkte { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; font-size: 14px; color: var(--gedaempft); padding: 0; list-style: none; }
.v2-punkte li::before { content: "✓ "; color: var(--lila); }

/* Drei Schritte */
.v2-schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-schritt, .v2-karte, .v2-tarif { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 30px 28px; }
.v2-schritt .nr { font: 700 14px var(--text); color: var(--orange); letter-spacing: .12em; }
.v2-schritt h3, .v2-karte h3 { font: 700 24px/1.2 var(--titel); letter-spacing: -.03em; margin: 12px 0 12px; }
.v2-schritt p, .v2-karte p { font-size: 16px; line-height: 1.55; color: var(--gedaempft); margin: 0; }

/* Funktionen */
.v2-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v2-demo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; margin-top: 28px; align-items: stretch; }
.v2-demo img { width: 100%; border-radius: 14px; }
.v2-demo .gunny { height: 100%; min-height: 324px; border-radius: 14px; }

/* Preise */
.v2-tarife { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 900px; }
.v2-tarif h3 { font: 700 22px/1.2 var(--titel); letter-spacing: -.03em; margin-bottom: 8px; }
.v2-preis { font: 700 44px/1.1 var(--titel); letter-spacing: -.05em; }
.v2-preis small { font: 400 16px var(--text); color: var(--gedaempft); letter-spacing: 0; }
.v2-jahr { font-size: 15px; color: var(--gedaempft); margin: 6px 0 20px; }
.v2-tarif ul { list-style: none; padding: 0; margin: 0 0 26px; font-size: 16px; line-height: 1.5; }
.v2-tarif li { padding: 7px 0; border-top: 1px solid var(--linie); }
.v2-tarif li::before { content: "✓ "; color: var(--lila); }
.v2-tarif.stark { border-color: var(--orange); }
.v2-hinweis { font-size: 15px; color: var(--gedaempft); margin-top: 22px; max-width: 760px; }

/* Daten & KI */
.v2-ki-hinweis { margin-top: 24px; padding: 22px 26px; border-left: 3px solid var(--lila); background: var(--karte); font-size: 16px; line-height: 1.6; color: var(--gedaempft); max-width: 900px; }
.v2-ki-hinweis a { color: var(--weiss); }

/* Über mich */
.v2-ueber { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.v2-foto { background: radial-gradient(circle at 70% 25%, rgba(83, 69, 144, .95) 0%, rgba(83, 69, 144, 0) 70%), var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.v2-foto img { width: 100%; }
.v2-ueber h3 { font: 700 30px/1.15 var(--titel); letter-spacing: -.03em; margin: 0 0 4px; }
.v2-rolle { color: var(--lila); font-size: 15px; letter-spacing: .06em; margin-bottom: 22px; }
.v2-ueber p { font-size: 18px; line-height: 1.55; }

/* FAQ */
.v2-faq { max-width: 860px; }
.v2-faq details { border-bottom: 1px solid var(--linie); padding: 20px 0; }
.v2-faq summary { cursor: pointer; font: 600 20px/1.35 var(--titel); letter-spacing: -.02em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.v2-faq summary::-webkit-details-marker { display: none; }
.v2-faq summary::after { content: "+"; color: var(--lila); font-size: 26px; line-height: 1; }
.v2-faq details[open] summary::after { content: "–"; }
.v2-faq details p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--gedaempft); }

/* Schluss-Aufruf */
.v2-schluss { text-align: center; padding: 110px 0; background: radial-gradient(circle at 50% 120%, rgba(83, 69, 144, .9) 0%, rgba(83, 69, 144, 0) 60%); }
.v2-schluss h2 { font: 700 clamp(32px, 4vw, 54px)/1.1 var(--titel); letter-spacing: -.05em; margin-bottom: 18px; }
.v2-schluss p { color: var(--gedaempft); font-size: 19px; max-width: 560px; margin: 0 auto 28px; }
.v2-schluss .v2-knoepfe { justify-content: center; }

@media (max-width: 860px) {
  .v2-sektion { padding: 64px 0; }
  .v2-held { padding: 60px 0 56px; }
  .v2-held .v2-wrap, .v2-ueber, .v2-demo { grid-template-columns: minmax(0, 1fr); }
  .v2-schritte, .v2-raster, .v2-tarife { grid-template-columns: minmax(0, 1fr); }
  .v2-siegel { justify-content: flex-start; }
  .v2-foto { max-width: 360px; }
}

/* TryHackMe-Zertifikate */
.v2-zert-titel { font: 700 26px/1.2 var(--titel); letter-spacing: -.03em; margin: 80px 0 8px; }
.v2-zert-text { color: var(--gedaempft); font-size: 16px; max-width: 640px; margin-bottom: 26px; }
.v2-zert { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-zert figure { margin: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; }
.v2-zert figure > a { display: block; cursor: zoom-in; }
.v2-zert img { width: 100%; height: auto; transition: transform .2s; }
.v2-zert figure > a:hover img { transform: scale(1.02); }
.v2-zert figcaption { display: grid; gap: 4px; padding: 16px 18px 18px; font-size: 14px; }
.v2-zert figcaption strong { font-size: 17px; }
.v2-zert figcaption span { color: var(--gedaempft); }
.v2-zert figcaption a { color: var(--lila); text-decoration: none; }
.v2-zert figcaption a:hover { text-decoration: underline; }
#v2-lupe { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
#v2-lupe::backdrop { background: rgba(0, 0, 0, .86); }
#v2-lupe img { width: 100%; max-height: 90vh; object-fit: contain; border-radius: 10px; background: #fff; }
.v2-lupe-zu { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--weiss); color: var(--schwarz); font-size: 18px; cursor: pointer; }
@media (max-width: 860px) { .v2-zert { grid-template-columns: minmax(0, 1fr); } }