/* KI-Parcours: Ergänzungen zum geteilten LAN-Landing-Stylesheet (style.css aus dem KI-Radar). Stufenfarbe des Parcours ist Blau #0A6DB0 (Radar Cyan, Begleitung Navy). Primärbuttons und Links in Blau, weil Cyan mit weisser Schrift nur 2.9:1 Kontrast hat. */ :root { --parcours: #0A6DB0; --parcours-dark: #085a92; --parcours-soft: #e8f1f9; --cyan-on-navy: #5ccbf2; --primary: #0A6DB0; --primary-dark: #085a92; --primary-soft: rgba(10, 109, 176, 0.08); } a { color: var(--parcours); } a:hover { color: var(--parcours-dark); } .hero .eyebrow, .cta .eyebrow { color: var(--cyan-on-navy); } .btn-primary { background: var(--parcours); } .btn-primary:hover { background: var(--parcours-dark); } .btn-nav-cta { background: var(--parcours); } .btn-nav-cta:hover { background: var(--parcours-dark); } :focus-visible { outline: 3px solid #5ccbf2; outline-offset: 2px; } .hero .hero-meta { color: rgba(255, 255, 255, 0.82); } /* ---- Hero-Video ---- */ .hero-player { position: relative; width: 100%; max-width: 520px; aspect-ratio: 16/9; margin-left: auto; border-radius: 16px; overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .14); } .hero-player picture, .hero-player .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; } .hero-player .hero-poster { object-fit: cover; } .hero-player .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; background: #fff; } .hero-player.playing { cursor: default; } .hero-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border: 0; border-radius: 50%; background: rgba(0, 55, 102, .92); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 28px rgba(0, 40, 80, .34); } .hero-play::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--cyan-on-navy); animation: ppRing 2.2s ease-out infinite; } .hero-play-tri { width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px; border-color: transparent transparent transparent #fff; margin-left: 5px; } .hero-player:hover .hero-play { transform: translate(-50%, -50%) scale(1.06); } .hero-video-cap { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .78); } .hero-video-cap b { color: #fff; font-weight: 600; } @keyframes ppRing { 0% { transform: scale(.85); opacity: .9 } 100% { transform: scale(1.7); opacity: 0 } } /* ---- Sektionen allgemein ---- */ .pp-section { padding: clamp(56px, 8vw, 104px) 0; } .pp-section--soft { background: var(--bg-soft); } .pp-section--parcours { background: linear-gradient(180deg, #fff 0%, var(--parcours-soft) 100%); } .pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .pp-split--rev .pp-split-media { order: 2; } .pp-split h2 { color: var(--secondary); } .pp-split p { font-size: clamp(15.5px, 1.1vw, 17.5px); line-height: 1.65; } .pp-lead-strong { color: var(--text); font-weight: 600; } .pp-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .08); background: #fff; } .pp-figure img { display: block; width: 100%; height: auto; } .pp-figure figcaption { font-size: 13.5px; color: var(--text-muted); padding: 10px 16px 12px; background: #fff; } .pp-visual { max-width: 1100px; margin: 0 auto clamp(28px, 4vw, 44px); } .pp-visual img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 20px 70px rgba(0, 40, 80, .10); background: #fff; } /* ---- Trust-Leiste mit vier Punkten ---- */ .trust-grid.trust-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .trust-grid.trust-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .trust-grid.trust-grid--4 { grid-template-columns: 1fr; } } .trust-icon { color: var(--parcours); } /* ---- Schritte (5er-Ablauf) ---- */ .isteps.isteps--5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1100px) { .isteps.isteps--5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .isteps.isteps--5 { grid-template-columns: 1fr; } } .istep-badge { color: var(--parcours); } /* ---- Aufgaben-Beispiele ---- */ .ex-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .ex-groups { grid-template-columns: 1fr; } } .ex-group { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 22px 18px; } .ex-group h3 { font-size: 17px; color: var(--secondary); margin-bottom: 4px; } .ex-group .ex-meta { font-size: 13.5px; color: var(--text-muted); margin-bottom: 14px; } .ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ex-list li { font-size: 14px; line-height: 1.3; padding: 7px 12px; border-radius: 100px; background: var(--parcours-soft); color: #0b4f80; border: 1px solid #cfe2f2; } .ex-foot { text-align: center; margin-top: 22px; font-size: 15px; } /* ---- Duo-Visuals (Level + Team) ---- */ .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; } @media (max-width: 860px) { .duo { grid-template-columns: 1fr; } } .pp-points { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; } .pp-points li { position: relative; padding-left: 30px; color: var(--text); line-height: 1.55; } .pp-points li::before { content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px; border-radius: 50%; background: var(--parcours) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; } /* ---- Kompetenzen ---- */ .comp-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } @media (max-width: 560px) { .comp-grid { grid-template-columns: 1fr; } } .comp-grid li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; color: var(--secondary); font-size: 15.5px; } .comp-grid li span { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--parcours); font-weight: 600; } .aiact { margin-top: 26px; border-left: 4px solid var(--parcours); background: #fff; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 18px 22px; box-shadow: var(--shadow-sm); } .aiact h3 { font-size: 16px; color: var(--secondary); margin-bottom: 6px; } .aiact p { margin: 0 0 .5em; font-size: 15px; line-height: 1.6; } .aiact p:last-child { margin-bottom: 0; } .aiact small { color: var(--text-muted); } /* ---- KI-Reise ---- */ .stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; } @media (max-width: 860px) { .stufen { grid-template-columns: 1fr; } } .stufe { border-radius: var(--radius-md); padding: 22px; color: #fff; position: relative; } .stufe--radar { background: #0184b8; } .stufe--parcours { background: var(--parcours); box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--parcours); } .stufe--begleitung { background: var(--secondary); } .stufe .stufe-num { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .9; font-weight: 700; } .stufe h3 { color: #fff; font-size: 20px; margin: 6px 0 8px; } .stufe p { color: rgba(255, 255, 255, .92); font-size: 15px; margin: 0 0 10px; line-height: 1.55; } .stufe .stufe-quote { font-style: italic; } .stufe a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .stufe .stufe-here { position: absolute; top: -12px; right: 16px; background: #fff; color: var(--parcours); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 100px; box-shadow: var(--shadow-sm); } /* ---- Fakten-Tabelle (zitierfähig) ---- */ .facts { max-width: 860px; margin: 0 auto; border-collapse: collapse; width: 100%; background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .facts th, .facts td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 15px; vertical-align: top; } .facts th { width: 34%; color: var(--secondary); font-weight: 600; background: #fafcfe; } .facts td { color: var(--text); } .facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; } .facts caption { caption-side: bottom; font-size: 13px; color: var(--text-muted); padding-top: 10px; } /* ---- Team-Check ---- */ .tc-card { max-width: 760px; margin: 0 auto; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .tc-progress { height: 6px; background: var(--bg-muted); } .tc-progress-bar { height: 100%; width: 0; background: var(--parcours); transition: width .3s ease; } .tc-body { padding: clamp(22px, 4vw, 40px); } .tc-count { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 8px; font-weight: 600; } .tc-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .tc-question { font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 2vw, 24px); color: var(--secondary); margin-bottom: 18px; padding: 0; line-height: 1.3; } .tc-options { display: grid; gap: 10px; } .tc-option { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; padding: 13px 16px; cursor: pointer; font-size: 15.5px; color: var(--text); transition: border-color .15s, background .15s; } .tc-option:hover { border-color: #9cc3e3; background: #f7fbfe; } .tc-option input { width: 18px; height: 18px; accent-color: var(--parcours); flex: none; } .tc-option:has(input:checked) { border-color: var(--parcours); background: var(--parcours-soft); } .tc-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .tc-result .eyebrow { color: var(--parcours); } .tc-res-list { margin: 10px 0 0; display: grid; gap: 14px; } .tc-res-list div { border-bottom: 1px solid var(--border); padding-bottom: 12px; } .tc-res-list dt { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; } .tc-res-list dd { margin: 0; color: var(--text); font-size: 16px; line-height: 1.55; } .tc-note { margin-top: 14px; background: var(--parcours-soft); border-radius: 10px; padding: 12px 14px; color: #0b4f80; font-size: 15px; } .tc-noscript { padding: 24px; } /* ---- Preis ---- */ .preis-card .preis-amount small { font-size: .55em; font-weight: 600; margin-right: 4px; } .preis-sub { font-size: 14px; color: var(--text-muted); margin-top: 10px; } /* ---- Formular-Ergänzungen ---- */ .cta-form select, .cta-form input, .cta-form textarea { font: inherit; } .form-success h3 { color: var(--secondary); } /* ---- Aktualisiert-Hinweis ---- */ .pp-updated { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 18px; } @media (max-width: 880px) { .pp-split { grid-template-columns: 1fr; } .pp-split--rev .pp-split-media { order: 0; } .hero-player { margin: 8px auto 0; } .hero-video-cap { justify-content: center; } } @media (max-width: 560px) { .nav-bar { gap: 9px; padding: 10px 12px 10px 16px; } .logo-img { height: 24px; } .nav-links { gap: 6px; } .lang-switch { margin-left: 0; gap: 0; } .lang-switch .lang-active, .lang-switch .lang-sep { display: none; } .lang-switch a { border: 1px solid rgba(255, 255, 255, .4); padding: 7px 10px; font-size: 13px; } .btn-nav-cta { padding: 8px 13px !important; font-size: 13px; margin-left: 4px; } } @media (prefers-reduced-motion: reduce) { .hero-play::before { animation: none; } .tc-progress-bar { transition: none; } } .istep-body h3.h4 { font-size: 17px; color: var(--secondary); margin: 4px 0 6px; } /* Hero rechts: Player volle Spaltenbreite, Unterschrift darunter (style.css setzt .hero-visual auf flex-row) */ .hero-visual { flex-direction: column; align-items: stretch; } .hero-visual .hero-player { flex: none; } /* Kontrast: Radar-Stufe dunkler als Marken-Cyan, damit weisse Schrift AA erreicht */ .stufe--radar { background: #006a94; } .stufe .stufe-num, .stufe p { color: #fff; opacity: 1; } /* Touch-Ziele Sprachumschalter im Footer mind. 24x24 */ .ftr-lang a { display: inline-block; min-width: 28px; min-height: 28px; padding: 4px 6px; text-align: center; line-height: 20px; } /* Loop über dem Standbild: gleiche Fläche, Bild bleibt für SEO/Screenreader im DOM */ [data-loop-mp4] { position: relative; } [data-loop-mp4] video.pp-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); opacity: 0; transition: opacity .3s; pointer-events: none; } [data-loop-mp4].is-looping video.pp-loop { opacity: 1; } /* Vorschau: Remotion-Produktkomposition statt leerer Fläche, freigestellt auf hellem Verlauf */ .hero-player { background: linear-gradient(160deg, #f4f8fc 0%, #dfeaf5 100%); } .hero-player .hero-poster { object-fit: contain; padding: 4% 6% 0; } .hero-video-cap { justify-content: flex-start; } /* Hero: rechte Spalte breiter, Video-Vorschau gross (Rückmeldung Kai 2026-09-18) */ @media (min-width: 881px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); } .hero-player { max-width: 640px; } } .hero-player .hero-poster { padding: 3% 4% 0; } .hero-play { width: 84px; height: 84px; } /* Hero-Video als echtes