/* ========================================================= Lesify — Landing-Lab Varianten-Styles + Sticky Dev-Panel. Lädt nach marketing.css (Tokens/Buttons/Basis von dort). ========================================================= */ .lab-body { padding-bottom: 156px; } /* ---- gemeinsame Bausteine ---- */ .lab-sec { padding-block: var(--section-y); position: relative; } .lab-sec--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .lab-head { max-width: 760px; margin-bottom: clamp(2.2rem, 1.4rem + 3vw, 4rem); } .lab-head.is-center { margin-inline: auto; text-align: center; } .lab-head h2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3rem); margin-top: 0.6rem; } .lab-head p { margin-top: 1rem; font-size: 1.05rem; color: var(--ink-600); line-height: 1.6; } .lab-head.is-center .eyebrow::before { display: none; } .lab-lead { max-width: 60ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem); color: var(--ink-600); line-height: 1.62; } .lab-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; } .lab-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 1.6rem; font-size: 0.85rem; color: var(--ink-500); } .lab-trust li { display: inline-flex; align-items: center; gap: 7px; } .lab-trust svg { width: 14px; height: 14px; color: var(--gruen); } .lab-trust.is-dark { color: rgba(255,255,255,0.7); } .lab-trust.is-dark svg { color: #8fe3b4; } .lab-stars { display: flex; gap: 2px; color: var(--gelb); margin-bottom: 12px; } .lab-stars svg { width: 15px; height: 15px; } .lab-bars { display: flex; align-items: flex-end; gap: 6px; height: 76px; } .lab-bars i { width: 16px; border-radius: 4px 4px 0 0; background: var(--ink-150); } .lab-bars i.g { background: var(--gruen); } .lab-bars i.y { background: var(--gelb); } .lab-bars i.r { background: var(--rot); } .lab-feats { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .lab-feats li { display: flex; gap: 9px; font-size: 0.9rem; color: var(--ink-700); } .lab-feats svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--gruen); } .lab-ptoggle { display: inline-flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--ink-50); } .lab-ptoggle button { padding: 9px 18px; border-radius: var(--radius-full); font-size: 0.86rem; font-weight: 600; color: var(--ink-600); } .lab-ptoggle button.is-active { background: var(--bg-surface); color: var(--ink-950); box-shadow: var(--shadow-sm); } .lab-ptoggle .save { font-size: 0.7rem; color: var(--gruen); background: var(--gruen-bg); padding: 2px 7px; border-radius: var(--radius-full); } /* ---- Produkt-Frame (Mock) ---- */ .lab-frame { margin: clamp(2.5rem, 1.5rem + 5vw, 5rem) auto 0; max-width: 1060px; border-radius: var(--radius-2xl); border: 1px solid var(--line); background: var(--bg-surface); box-shadow: var(--shadow-xl); overflow: hidden; } .lab-frame.is-compact { margin: 0; max-width: 520px; } .lab-frame__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--paper); } .lab-frame__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .lab-frame__bar span { margin-left: 8px; font-size: 0.74rem; color: var(--ink-400); font-family: var(--font-mono); } .lab-frame__body { display: grid; grid-template-columns: 200px 1fr; min-height: 400px; } .lab-frame.is-compact .lab-frame__body { grid-template-columns: 1fr; min-height: 0; } .lab-frame.is-compact .lab-frame__rail { display: none; } .lab-frame__rail { border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; } .lab-frame__rail .lfr-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; } .lab-frame__rail .lfr-brand i { width: 22px; height: 22px; border-radius: 6px; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; } .lab-frame__rail .lfr-brand i svg { width: 12px; height: 12px; } .lab-frame__rail a { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 500; color: var(--ink-600); } .lab-frame__rail a svg { width: 15px; height: 15px; opacity: 0.8; } .lab-frame__rail a.is-active { background: var(--ink-950); color: var(--paper); } .lab-frame__canvas { padding: clamp(18px, 3vw, 30px); background: var(--bg-canvas); display: flex; flex-direction: column; gap: 14px; } .lfc-head h4 { font-size: 1.2rem; } .lfc-head p { font-size: 0.8rem; color: var(--ink-500); margin-top: 3px; } .lfc-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; } .lab-frame.is-compact .lfc-grid { grid-template-columns: 1fr; } .lfc-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 16px; } .lfc-card h5 { font-size: 0.9rem; margin-bottom: 8px; } .lfc-card--dark { background: var(--ink-950); color: var(--paper); } .lfc-card--dark h5 { color: var(--paper); } .lfc-note { display: flex; align-items: center; gap: 12px; } .lfc-note b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; color: var(--gruen); line-height: 1; } .lfc-note small { display: block; font-size: 0.74rem; color: var(--ink-500); } .lfc-ampel { display: flex; gap: 6px; margin-top: 10px; } .lfc-ampel i { flex: 1; height: 5px; border-radius: 3px; background: var(--ink-100); } .lfc-ampel i.g { background: var(--gruen); } .lfc-ampel i.y { background: var(--gelb); } .lfc-ampel i.r { background: var(--rot); } .lfc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .pc-badge { display: inline-flex; align-items: center; gap: 5px; height: 23px; padding: 0 10px; border-radius: var(--radius-full); font-size: 0.71rem; font-weight: 600; color: #fff; } .pc-badge i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.85); } .lfc-bubble { font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px 12px 12px 4px; padding: 9px 11px; } .lfc-bubble + .lfc-bubble { margin-top: 7px; } .lfc-bubble.is-ai { border-radius: 12px 12px 4px 12px; background: rgba(255,255,255,0.13); color: #fff; } /* ---- Notenkarte ---- */ .lab-grade { border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); padding: clamp(22px, 2vw, 34px); box-shadow: var(--shadow-lg); } .lab-grade.is-mini { padding: 20px; box-shadow: var(--shadow-md); } .lab-grade.is-float { box-shadow: var(--shadow-xl); } .lab-grade__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.8rem; color: var(--ink-500); font-weight: 600; } .lab-grade__delta { display: inline-flex; align-items: center; gap: 4px; color: var(--gruen); background: var(--gruen-bg); padding: 3px 9px; border-radius: var(--radius-full); } .lab-grade__delta svg { width: 12px; height: 12px; } .lab-grade__big { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 5vw, 4.6rem); letter-spacing: -0.04em; line-height: 1; color: var(--gruen); margin: 10px 0 4px; } .lab-grade__meta { font-size: 0.8rem; color: var(--ink-500); font-weight: 600; } .lab-grade__rows { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; } .lab-grade__row { display: flex; align-items: center; gap: 11px; font-size: 0.86rem; } .lab-grade__row .d { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .lab-grade__row .d.g { background: var(--gruen); } .lab-grade__row .d.y { background: var(--gelb); } .lab-grade__row .d.r { background: var(--rot); } .lab-grade__row .l { flex: 0 0 128px; } .lab-grade__row .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--ink-100); overflow: hidden; } .lab-grade__row .bar i { display: block; height: 100%; border-radius: 3px; } .lab-grade__row .bar i.g { background: var(--gruen); } .lab-grade__row .bar i.y { background: var(--gelb); } .lab-grade__row .bar i.r { background: var(--rot); } .lab-grade__row .g:last-child { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-500); } /* ---- Marquee ---- */ .lab-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .lab-marquee__track { display: flex; gap: 54px; width: max-content; animation: lab-marq 40s linear infinite; } .lab-marquee__track.is-rev { animation-direction: reverse; } .lab-marquee:hover .lab-marquee__track { animation-play-state: paused; } .lab-marquee__track span { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--ink-400); white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; } .lab-marquee__track span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-300); } @keyframes lab-marq { to { transform: translateX(-50%); } } /* ========================================================= HERO Varianten ========================================================= */ /* hv1 Cinematic Center */ .hv1 { padding-top: clamp(8rem, 6rem + 8vw, 11rem); padding-bottom: clamp(3rem, 2rem + 5vw, 6rem); overflow: hidden; } .hv1__inner { max-width: 940px; margin-inline: auto; text-align: center; } .hv1__inner .eyebrow { justify-content: center; } .hv1__inner .eyebrow::before { display: none; } .hv1 h1 { max-width: 22ch; margin: 1.3rem auto 0; font-size: clamp(2rem, 1.05rem + 4.3vw, 4.5rem); letter-spacing: -0.035em; line-height: 1.04; } .hv1 .lab-lead { margin: 1.5rem auto 0; } .hv1 .lab-cta, .hv1 .lab-trust { justify-content: center; } .hv1__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--ink-150) 1px, transparent 1px), linear-gradient(90deg, var(--ink-150) 1px, transparent 1px); background-size: 62px 62px; -webkit-mask-image: radial-gradient(circle at 50% 26%, #000, transparent 68%); mask-image: radial-gradient(circle at 50% 26%, #000, transparent 68%); opacity: 0.5; } h1 em { font-style: normal; position: relative; white-space: nowrap; } h1 em::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0.08em; height: 0.32em; background: var(--gelb); opacity: 0.55; z-index: -1; border-radius: 2px; } /* hv2 Editorial Split */ .hv2 { padding-top: clamp(8rem, 6rem + 8vw, 11rem); padding-bottom: clamp(2rem, 5vw, 5rem); } .hv2__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: center; } .hv2 h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.9rem); margin: 1.1rem 0 0; letter-spacing: -0.035em; } .hv2 .lab-lead { margin-top: 1.3rem; } .hv2__media { min-width: 0; } /* hv3 Big-Type */ .hv3 { padding-top: clamp(8rem, 6rem + 9vw, 12rem); padding-bottom: var(--section-y); } .hv3__wrap .eyebrow { color: var(--ink-500); } .hv3 h1 { font-size: clamp(2.6rem, 1rem + 8vw, 7rem); letter-spacing: -0.045em; line-height: 0.98; margin: 1.2rem 0 0; max-width: 15ch; } .hv3__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 2.6rem; border-top: 1px solid var(--line); padding-top: 2rem; } .hv3__foot p { max-width: 42ch; color: var(--ink-600); } .hv3__links { display: flex; align-items: center; gap: 18px; } /* hv4 Dark Spotlight */ .hv4 { background: var(--ink-950); color: var(--paper); padding-top: clamp(8rem, 6rem + 8vw, 11rem); padding-bottom: clamp(3rem, 5vw, 6rem); overflow: hidden; isolation: isolate; } .hv4__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.16), transparent 55%), radial-gradient(circle at 90% 100%, rgba(255,255,255,0.08), transparent 45%); } .hv4__wrap { text-align: center; max-width: 900px; margin-inline: auto; } .hv4 .eyebrow { color: rgba(255,255,255,0.66); justify-content: center; } .hv4 .eyebrow::before { background: rgba(255,255,255,0.4); } .hv4 h1 { color: var(--paper); margin: 1.2rem auto 0; font-size: clamp(2rem, 1.1rem + 4.2vw, 4.4rem); max-width: 20ch; letter-spacing: -0.035em; } .hv4 h1 em::after { background: var(--gelb); opacity: 0.85; height: 0.14em; bottom: 0.02em; } .hv4 .lab-lead { color: rgba(255,255,255,0.72); margin: 1.4rem auto 0; } .hv4 .lab-cta { justify-content: center; } .hv4 .lab-trust { justify-content: center; } .hv4__card { max-width: 460px; margin: 2.6rem auto 0; text-align: left; } .hv4__card .lab-grade { background: var(--white); color: var(--ink-900); } /* hv5 Text + Stat-Rail */ .hv5 { padding-top: clamp(8rem, 6rem + 8vw, 11rem); padding-bottom: var(--section-y); } .hv5__grid { display: grid; grid-template-columns: 1fr 260px; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .hv5 h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); margin: 1.1rem 0 0; letter-spacing: -0.035em; } .hv5 .lab-lead { margin-top: 1.3rem; } .hv5__rail { display: flex; flex-direction: column; border-left: 1px solid var(--line-strong); } .hv5__fact { padding: 18px 0 18px 20px; } .hv5__fact + .hv5__fact { border-top: 1px solid var(--line); } .hv5__fact b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.03em; color: var(--ink-950); } .hv5__fact span { font-size: 0.82rem; color: var(--ink-500); } /* hv6 Bento Hero */ .hv6 { padding-top: clamp(7.5rem, 6rem + 7vw, 10rem); padding-bottom: clamp(2rem, 4vw, 4rem); } .hv6__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .hv6__cell { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 26px; } .hv6__cell--dark { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); } .hv6__headline { grid-column: span 2; } .hv6__headline .eyebrow { color: var(--ink-500); } .hv6__headline h1 { font-size: clamp(1.8rem, 1.2rem + 2.8vw, 3.2rem); margin-top: 12px; letter-spacing: -0.035em; } .hv6__cta { display: flex; flex-direction: column; justify-content: center; gap: 14px; } .hv6__cta p { font-size: 0.92rem; color: var(--ink-600); } .hv6__cta .lab-cta { margin-top: 0; flex-direction: column; } .hv6__cta .btn { width: 100%; } .hv6__prod { grid-column: span 2; padding: 0; overflow: hidden; } .hv6__prod .lab-frame { border: 0; border-radius: 0; box-shadow: none; max-width: none; } .hv6__grade { display: flex; flex-direction: column; justify-content: center; } .hv6__k { font-size: 0.76rem; color: rgba(255,255,255,0.6); font-weight: 600; } .hv6__grade b { font-family: var(--font-display); font-size: 3rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 6px 0 2px; color: #8fe3b4; } .hv6__sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); } .hv6__grade .lfc-ampel { margin-top: 14px; } .hv6__trust { grid-column: span 3; display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 18px 26px; } .hv6__trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-600); } .hv6__trust svg { width: 14px; height: 14px; color: var(--gruen); } /* hv7 Layered Overlap */ .hv7 { padding-top: clamp(8rem, 6rem + 8vw, 11rem); padding-bottom: clamp(4rem, 8vw, 8rem); overflow: hidden; } .hv7__wrap { position: relative; } .hv7__text { max-width: 620px; } .hv7 h1 { font-size: clamp(2rem, 1.2rem + 3.8vw, 4.2rem); margin: 1.1rem 0 0; letter-spacing: -0.035em; } .hv7 .lab-lead { margin-top: 1.3rem; } .hv7__float { margin-top: -40px; margin-left: auto; max-width: 560px; transform: rotate(-1.4deg); } @media (min-width: 900px) { .hv7__float { position: absolute; right: -20px; bottom: -90px; width: 52%; margin: 0; } } /* hv8 Quiet Minimal */ .hv8 { padding-top: clamp(9rem, 7rem + 8vw, 13rem); padding-bottom: var(--section-y); } .hv8__wrap { max-width: 620px; margin-inline: auto; text-align: center; } .hv8__wrap .eyebrow { justify-content: center; color: var(--ink-500); } .hv8__wrap .eyebrow::before { display: none; } .hv8__rule { height: 1px; background: var(--line); margin: 2.4rem 0; } .hv8 h1 { font-size: clamp(1.9rem, 1.3rem + 2.8vw, 3.4rem); letter-spacing: -0.03em; } .hv8 .lab-lead { margin: 1.3rem auto 1.8rem; } /* hv9 Diagonal Split — Höhe bleibt inhaltsgetrieben; padding-top minus padding-bottom = Header-Höhe (~5,5 rem, an jeder Viewport-Breite), damit .hv9__grid optisch mittig zwischen Header-Unterkante und Section-Ende sitzt. */ .hv9 { padding-top: clamp(7.5rem, 5.5rem + 6vw, 10.5rem); padding-bottom: clamp(2rem, 6vw, 5rem); /* overflow bewusst sichtbar: der schwarze Eck-Zwickel (.hv9::before) liegt im weggeschnittenen Radius AUSSERHALB der abgerundeten Box. Das Foto-Panel (.hv9__panel) beschneidet sich bei data-hero-bg="9" selbst (overflow:hidden + clip-path). */ overflow: visible; background: var(--bg-canvas); border-bottom-left-radius: var(--section-radius); } /* Schwarzer Hintergrund-Zwickel: füllt exakt die Fläche, die der border-bottom-left-radius aus dem Papier herausschneidet. Der Radial-Gradient sitzt im selben Mittelpunkt wie der Papier-Bogen (Ecke oben rechts dieser 48×48-Box) — innerhalb des Radius transparent (Papier bleibt sichtbar), außerhalb schwarz. */ .hv9::before { content: ""; position: absolute; left: 0; bottom: 0; width: var(--section-radius); height: var(--section-radius); background: radial-gradient(circle var(--section-radius) at 100% 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)); z-index: -1; pointer-events: none; } .hv9__panel { position: absolute; inset: 0 0 0 50%; background: var(--ink-50); border-left: 1px solid var(--line); z-index: -1; } @media (min-width: 900px) { .hv9__panel { clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%); } } .hv9__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .hv9 h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.8rem); margin: 1.1rem 0 0; letter-spacing: -0.035em; } .hv9 .lab-lead { margin-top: 1.2rem; } /* --------------------------------------------------------- Hero-Stage — Info-Karte der Foto-Slideshow (#hero-stage in marketing/index.html, über dem diagonal beschnittenen Foto). 7 Karten-Designs (.hs-c1 … .hs-c7) zum Durchschalten per Dev-Panel (.layout-dev.is-herocard, localStorage['lesify:herocard:v']). Aufbau in marketing.js (buildHeroStage / heroC1..heroC7): 1 Editorial, 2 Lower-Third, 3 Bare, 4 Accent-Flood (Fach-Farbe), 5 Glass, 6 Flat (Accent-Flood ohne Farbe), 7 Polaroid. Steuerung generisch über initHeroSlides(): [data-hs-slide], optionale [data-hs-dots] / [data-hs-prev|next]. show() setzt --hs-accent (Fach-Farbe der aktiven Folie) auf die Gruppe. Foto, Diagonal-Schnitt und Scrim (.hv9__panel) bleiben unverändert — hier nur der Karten-Inhalt. --------------------------------------------------------- */ .hv9__media { overflow-x: hidden; } #hero-stage { display: flex; width: 100%; } .hs-stage { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; } .hs-stage[hidden] { display: none; } /* geteilte Bausteine -------------------------------------------------------- */ .hs-nav { display: flex; align-items: center; gap: 14px; margin-top: 16px; } .hs-nav--between { justify-content: space-between; } .hs-dots { display: flex; align-items: center; gap: 7px; } .hs-dots button { width: 7px; height: 7px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.34); transition: background 160ms var(--ease-out), transform 160ms var(--ease-out); } .hs-dots button.is-active { background: #fff; transform: scale(1.4); } .hs-dots button:hover { background: rgba(255,255,255,0.65); } .hs-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.12); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out); } .hs-arrow svg { width: 14px; height: 14px; } .hs-arrow:hover { background: rgba(255,255,255,0.26); border-color: rgba(255,255,255,0.5); } .hs-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .hs-ico svg { width: 17px; height: 17px; } .hs-eyebrow { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .hs-card [data-hs-slide] { display: none; } .hs-card [data-hs-slide].is-active { display: block; } /* ---- Design 1 · Editorial ---------------------------------------------- */ .hs-c1 { width: min(360px, 100%); background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: 22px 24px; } .hs-c1 .hs-eyebrow { color: var(--hs-accent, var(--ink-500)); } .hs-c1 h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.14; letter-spacing: -0.025em; margin: 10px 0 8px; color: var(--ink-950); } .hs-c1 p { font-size: 0.85rem; line-height: 1.55; color: var(--ink-600); margin: 0; } .hs-c1 .hs-arrow { border-color: var(--line); background: var(--bg-surface); color: var(--ink-600); box-shadow: var(--shadow-sm); } .hs-c1 .hs-arrow:hover { border-color: var(--ink-400); color: var(--ink-950); background: var(--paper); } .hs-c1 .hs-dots button { background: var(--ink-200); } .hs-c1 .hs-dots button.is-active { background: var(--hs-accent, var(--ink-950)); } /* ---- Design 2 · Lower-Third ------------------------------------------------ */ .hs-c2 { position: relative; width: 100%; background: rgba(16,18,20,0.58); backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%); border-top: 2px solid var(--hs-accent, #fff); padding: 14px clamp(16px, 3vw, 24px); overflow: hidden; } .hs-c2 .hs-progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--hs-accent, #fff); animation: hsProgress 5.2s linear infinite; } @keyframes hsProgress { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .hs-c2 .hs-progress { animation: none; width: 100%; } } .hs-c2 .hs-row { display: flex; align-items: center; gap: 14px; } .hs-c2 [data-hs-slide] { align-items: center; gap: 12px; flex: 1; min-width: 0; } .hs-c2 [data-hs-slide].is-active { display: flex; animation: hsSlideIn 340ms var(--ease-out); } @keyframes hsSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hs-c2 [data-hs-slide].is-active { animation: none; } } .hs-c2 .hs-ico { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--hs-accent, rgba(255,255,255,0.16)); color: #fff; } .hs-c2 .hs-txt { min-width: 0; } .hs-c2 .hs-eyebrow { font-size: 0.58rem; letter-spacing: 0.14em; color: rgba(255,255,255,0.7); } .hs-c2 h3 { font-size: 0.96rem; margin: 2px 0 0; color: #fff; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hs-c2 .hs-nav { margin: 0 0 0 auto; } /* ---- Design 3 · Bare (kein Karten-Hintergrund) --------------------------- */ .hs-c3 { width: min(400px, 100%); } .hs-c3 .hs-eyebrow { color: rgba(255,255,255,0.72); } .hs-c3 h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.08; letter-spacing: -0.03em; margin: 12px 0 10px; color: #fff; text-shadow: 0 2px 20px rgba(16,18,20,0.4); } .hs-c3 p { font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.82); margin: 0; max-width: 34ch; } .hs-c3 .hs-count { font-family: var(--font-mono); font-size: 0.76rem; color: rgba(255,255,255,0.65); } .hs-c3 .hs-count b { color: #fff; } .hs-c3 .hs-arrows { display: flex; gap: 8px; } .hs-c3 .hs-arrow { width: 34px; height: 34px; border: 0; background: rgba(255,255,255,0.14); } /* ---- 2b · Lower-Third im Foto-Panel: Leiste am absoluten unteren Bildrand, so breit wie das Foto und vom diagonalen Weiß-Schnitt (Panel-clip-path) beschnitten. Liegt im .hv9__panel — z-index über dem Foto (0) und den Panel-Scrims (1), aber immer hinter dem weißen Diagonal-Ausschnitt. --- */ .hv9__panel .hs-stage--c2b { position: absolute; right: 0; bottom: 0; z-index: 2; width: auto; min-width: 52vw; } .hs-c2--bleed { border-radius: 0; border-top-width: 2px; padding: 14px clamp(18px, 3vw, 32px); background: rgba(14,16,19,0.74); } .hs-c2--bleed .hs-dots { margin: 0 12px 0 auto; } .hs-c2--bleed .hs-nav { margin-left: 0; } @media (max-width: 899px) { /* Panel wird zur normalen Bild-Box — Leiste sitzt an deren Unterkante */ .hv9__panel .hs-stage--c2b { border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); overflow: hidden; } } /* ---- 3b · Bare · Clean: unten-links verankert, engere Spalte, weicher Cross-Fade beim Folienwechsel statt hartem Umschalten --- */ .hs-c3--clean { width: min(340px, 100%); position: relative; min-height: 210px; padding-bottom: 46px; } .hs-c3--clean [data-hs-slide] { position: absolute; inset: 0 0 46px; display: block !important; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); } .hs-c3--clean [data-hs-slide].is-active { opacity: 1; transform: none; pointer-events: auto; } .hs-c3--clean .hs-nav { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; } .hs-c3--clean h3 { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.8rem); } @media (prefers-reduced-motion: reduce) { .hs-c3--clean [data-hs-slide] { transition: none; } } /* ---- Design 4 · Accent-Flood ------------------------------------------------ */ .hs-c4 { width: min(360px, 100%); border-radius: var(--radius-xl); padding: 22px 24px; color: #fff; background: var(--hs-accent, var(--ink-800)); box-shadow: var(--shadow-xl); transition: background 420ms var(--ease-out); } .hs-c4 .hs-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; margin-bottom: 12px; } .hs-c4 h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; } .hs-c4 p { font-size: 0.85rem; line-height: 1.55; color: rgba(255,255,255,0.9); margin: 0; } .hs-c4 .hs-arrow { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); } .hs-c4 .hs-dots button { background: rgba(255,255,255,0.45); } .hs-c4 .hs-dots button.is-active { background: #fff; } /* ---- Design 5 · Glass: frostige dunkle Glas-Karte ---------------------- */ .hs-c5 { width: min(340px, 100%); background: rgba(16,18,20,0.42); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-2xl); padding: 20px 22px; color: #fff; } .hs-c5 [data-hs-slide].is-active { display: flex; gap: 12px; } .hs-c5 .hs-ico { width: 34px; height: 34px; border-radius: var(--radius-md); background: rgba(255,255,255,0.16); color: #fff; } .hs-c5 .hs-c5__txt { min-width: 0; } .hs-c5 h3 { font-size: 1rem; margin: 0 0 4px; color: #fff; letter-spacing: -0.01em; } .hs-c5 p { font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.75); margin: 0; } .hs-c5 .hs-nav { margin-top: 16px; } /* ---- Design 6 · Flat: Accent-Flood-Aufbau, ohne Fach-Farbe ------------- */ .hs-c6 { width: min(360px, 100%); border-radius: var(--radius-xl); padding: 22px 24px; color: var(--paper); background: var(--ink-950); box-shadow: var(--shadow-xl); } .hs-c6 .hs-ico { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--paper); margin-bottom: 12px; } .hs-c6 h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--paper); } .hs-c6 p { font-size: 0.85rem; line-height: 1.55; color: rgba(255,255,255,0.72); margin: 0; } .hs-c6 .hs-arrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); } .hs-c6 .hs-dots button { background: rgba(255,255,255,0.4); } .hs-c6 .hs-dots button.is-active { background: #fff; } /* ---- Design 7 · Polaroid: weiße Sofortbild-Karte auf einem faux-Stapel - */ .hs-c7 { position: relative; isolation: isolate; width: min(300px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 18px 40px -12px rgba(16,18,20,0.45); padding: 12px 12px 16px; transform: rotate(-2.5deg); transition: transform 300ms var(--ease-out); } .hs-c7:hover { transform: rotate(-1deg); } .hs-c7::before, .hs-c7::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 26px -12px rgba(16,18,20,0.4); } .hs-c7::before { transform: rotate(3deg) translate(6px, 3px); } .hs-c7::after { transform: rotate(-5deg) translate(-6px, 5px); } .hs-c7 .hs-photo { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--ink-100); } .hs-c7 .hs-photo .hs-ico { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--ink-950); color: var(--paper); } .hs-c7 .hs-photo .hs-ico svg { width: 22px; height: 22px; } .hs-c7 .hs-cap { display: block; padding: 12px 6px 2px; } .hs-c7 h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 5px; color: var(--ink-950); } .hs-c7 p { font-size: 0.78rem; line-height: 1.5; color: var(--ink-600); margin: 0; } .hs-c7 .hs-nav { margin-top: 12px; justify-content: center; } .hs-c7 .hs-arrow { width: 28px; height: 28px; border-color: var(--line); background: #fff; color: var(--ink-600); box-shadow: var(--shadow-sm); } .hs-c7 .hs-arrow:hover { border-color: var(--ink-400); color: var(--ink-950); background: var(--paper); } .hs-c7 .hs-dots button { background: var(--ink-200); } .hs-c7 .hs-dots button.is-active { background: var(--ink-950); } /* --------------------------------------------------------- .hv9__panel = diagonal beschnittene Fläche; darin liegt ein separates gesiztes Element .hv9__photo mit dem Foto als background-image. Grund: .hv9__panel ist die volle Section-Fläche (inset: 0) und hat NIE Seitenverhältnis 1:1 — ein quadratisches Bild direkt als Panel-`background-size: cover` wird darum auf die Section-Breite hochskaliert (viel zu groß, nur ein Mittelstreifen sichtbar), `contain` lässt es dagegen mit wechselndem Papier-Rest „schweben“. Die eigene .hv9__photo-Box ist stattdessen an BEIDE Keil-Maße gekoppelt (height: 100% = Keilhöhe, min-width: 52vw = Keilbreite) und nahezu quadratisch — darin füllt `cover` den Keil auf jeder Größe randlos, bei moderater Skalierung. Die Panel-Fläche ist zusätzlich mit `--ink-100` gefüllt (Lade-Absicherung). Stacking bewusst OHNE negatives z-index (das kann bei großem Raster + Composited Layers zu „paint erst nach Repaint" führen): die Section isoliert einen eigenen Stacking-Context, Panel = 0, der Inhalt (.hv9__grid) = 1. --------------------------------------------------------- */ .hv9[data-hero-bg="9"] { isolation: isolate; } .hv9[data-hero-bg="9"] .hv9__grid { position: relative; z-index: 1; } .hv9[data-hero-bg="9"] .hv9__panel { display: block; position: absolute; inset: 0; z-index: 0; border-left: 0; overflow: hidden; clip-path: polygon(54% 0, 100% 0, 100% 100%, 48% 100%); background: var(--ink-100); /* eigener Compositing-Layer für den clip-path-Container mit großem Hintergrundbild (Absicherung gegen Chromium-Paint-Quirks). */ transform: translateZ(0); } .hv9__photo { position: absolute; z-index: 0; top: 0; right: 0; display: block; /* Box deckt den Keil in BEIDE Richtungen ab, ohne Magie-Zahl: - height: 100% → immer so hoch wie der Keil (= Section-Höhe H) - width: auto + aspect-ratio 1/1 → Breite = H (nahezu quadratisch) - min-width: 52vw → auf breiten Screens wächst die Breite auf die Keilbreite (Box wird 52vw × H). Das Foto sitzt als `background-size: cover` darin — weil die Box klein und nah an 1:1 ist (nicht die volle Section-Breite), bleibt die Skalierung moderat und der Ausschnitt sinnvoll; der Keil ist auf jeder Größe randlos gefüllt. (Bewusst KEIN — ein mit object-fit im clip-path-Container wurde in Chromium erst nach einem Repaint gemalt; ein CSS-Hintergrund malt zuverlässig.) */ height: 100%; width: auto; min-width: 52vw; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-repeat: no-repeat; /* 4 gestapelte Foto-Ebenen (lesi-mgs-nw-hero/69–72), synchron zur Karten-Slideshow ein-/ausgeblendet (setHeroPhoto in marketing.js). Kurze Blende (340 ms), damit das Foto mit dem sofort umschaltenden Karten-Text zusammen wirkt — auch beim schnellen Durchklicken. */ opacity: 0; transition: opacity 340ms var(--ease-out); } .hv9__photo.is-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .hv9__photo { transition: none; } } .hv9[data-hero-bg="9"] .hv9__panel::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(16,18,20,0.7) 0%, rgba(16,18,20,0.28) 22%, rgba(16,18,20,0.05) 42%, rgba(16,18,20,0) 60%); } /* Foto-Schleier (::after) — je nach Header-Setup (body[data-header]): Standard (1): dunkel am Fuß, oben klar. Vorschlag (2): hell/weiß am Kopf, unten klar — macht die transparente Nav über dem Foto lesbar (statt Schleier hinter dem Header). Liegt über Foto UND diagonalem Scrim. */ .hv9[data-hero-bg="9"] .hv9__panel::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(16,18,20,0.82) 0%, rgba(16,18,20,0.5) 20%, rgba(16,18,20,0.18) 44%, rgba(16,18,20,0) 70%); } body[data-header="2"] .hv9[data-hero-bg="9"] .hv9__panel::after { background: linear-gradient(to bottom, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 12%, rgba(255,255,255,0.34) 26%, rgba(255,255,255,0.08) 40%, rgba(255,255,255,0) 52%); } .hv9[data-hero-bg="9"] .hv9__media { min-height: clamp(420px, 32vw, 520px); display: flex; } @media (max-width: 899px) { .hv9[data-hero-bg="9"] .hv9__panel { position: relative; clip-path: none; width: 100%; height: clamp(240px, 58vw, 360px); border-radius: var(--radius-2xl); margin-top: 1.4rem; } .hv9[data-hero-bg="9"] .hv9__media { min-height: 0; } .hv9__photo { inset: 0; width: 100%; min-width: 0; height: 100%; aspect-ratio: auto; } } @media (max-width: 620px) { .hs-c1, .hs-c3, .hs-c4, .hs-c5, .hs-c6 { width: 100%; } .hs-c1, .hs-c4, .hs-c6 { padding: 18px 18px; } } /* ========================================================= Hero-Text — fest auf Variante 1.3 (Trust · Inline): kompakte Vertrauensleiste (angelehnt an test-circ__row der Testimonial- Section) direkt unter den CTAs, ersetzt die Häkchen-Zeile. Kein Umschalter mehr. Markup via ensureHeroTrust() in marketing.js. ========================================================= */ .hv9__trust { display: flex; align-items: center; gap: 10px; margin-top: 1rem; } .hv9__trust-row { display: inline-flex; align-items: center; } .hv9__trust-av { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; margin-left: -8px; border: 2px solid var(--bg-canvas); background: var(--t, var(--ink-700)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; } .hv9__trust-av:first-child { margin-left: 0; } .hv9__trust-txt { font-size: 0.8rem; color: var(--ink-500); line-height: 1.35; } .hv9__trust-txt b { color: var(--ink-950); font-weight: 700; } .hv9 .hv9__text .lab-trust { display: none; } /* ========================================================= Hero-Farbe (Prototyp) — Dev-Panel-Achse data-hero-color auf .hv9. Steuert zwei Dinge gemeinsam: 1. Auszeichnung von Nachhilfe in der H1 (h1 em::after) 2. Akzent der Foto-Leiste (.hs-c2 → --hs-accent; ohne Regel setzt marketing.js je Folie die Fach-Farbe) v1 = wie bisher, aber die Auszeichnung von „Nachhilfe" läuft jetzt mit der Karten-/Slider-Farbe mit: marketing.js (show()) legt den Akzent der aktiven Folie als --hero-accent auf die Section, das h1 em::after nimmt ihn auf (Fallback: --gelb). Karten-Akzent weiterhin je Folie. v2–v5 = farbig, fixiert · v6–v10 = nur Lesify-Palette (Tinte / Papier / Fog), kein Buntton. ========================================================= */ /* --- v1 · Auszeichnung folgt der aktiven Folienfarbe ------------- */ .hv9[data-hero-color="1"] h1 em::after { background: var(--hero-accent, var(--gelb)); opacity: 0.5; transition: background 420ms var(--ease-out); } /* --- v2 · Blau ---------------------------------------------------- */ .hv9[data-hero-color="2"] h1 em::after { background: var(--fach-blue); opacity: 0.24; } .hv9[data-hero-color="2"] .hs-c2 { --hs-accent: var(--fach-blue); } /* --- v3 · Grün -------------------------------------------------- */ .hv9[data-hero-color="3"] h1 em::after { background: var(--gruen); opacity: 0.28; } .hv9[data-hero-color="3"] .hs-c2 { --hs-accent: var(--gruen); } /* --- v4 · Violett ---------------------------------------------- */ .hv9[data-hero-color="4"] h1 em::after { background: var(--fach-violet); opacity: 0.28; } .hv9[data-hero-color="4"] .hs-c2 { --hs-accent: var(--fach-violet); } /* --- v5 · Verlauf (Blau → Violett), schmaler Unterstrich ------ */ .hv9[data-hero-color="5"] h1 em::after { background: linear-gradient(90deg, var(--fach-blue), var(--fach-violet)); opacity: 0.95; height: 0.16em; bottom: 0.02em; border-radius: 999px; } .hv9[data-hero-color="5"] .hs-c2 { --hs-accent: var(--fach-violet); } .hv9[data-hero-color="5"] .hs-c2 .hs-progress { background: linear-gradient(90deg, var(--fach-blue), var(--fach-violet)); } /* --- v6 · Tinte weich (grauer Marker hinter dem Wort) --------- */ .hv9[data-hero-color="6"] h1 em::after { background: var(--ink-950); opacity: 0.1; height: 0.62em; bottom: 0.04em; border-radius: 3px; } .hv9[data-hero-color="6"] .hs-c2 { --hs-accent: #fff; } /* --- v7 · Linie (dünner Tinten-Unterstrich) ------------------- */ .hv9[data-hero-color="7"] h1 em::after { left: 0; right: 0; height: 2px; bottom: -0.04em; background: var(--ink-900); opacity: 0.9; border-radius: 2px; } .hv9[data-hero-color="7"] .hs-c2 { --hs-accent: rgba(255, 255, 255, 0.9); } /* --- v8 · Marker invers (Wort auf Tinte gesetzt) ------------- */ .hv9[data-hero-color="8"] h1 em { background: var(--ink-950); color: var(--paper); padding: 0.02em 0.16em; margin: 0 -0.04em; border-radius: 5px; } .hv9[data-hero-color="8"] h1 em::after { display: none; } .hv9[data-hero-color="8"] .hs-c2 { --hs-accent: #fff; } /* --- v9 · Fog (blaugrauer Block, Lesify-Ton) ----------------- */ .hv9[data-hero-color="9"] h1 em::after { background: var(--ink-300); opacity: 1; } .hv9[data-hero-color="9"] .hs-c2 { --hs-accent: var(--ink-100); } /* --- v10 · Doppel-Unterstrich -------------------------------- */ .hv9[data-hero-color="10"] h1 em::after { background: none; height: 0; bottom: -0.12em; border-bottom: 3px double var(--ink-900); opacity: 1; border-radius: 0; } .hv9[data-hero-color="10"] .hs-c2 { --hs-accent: rgba(255, 255, 255, 0.75); } /* ========================================================= KI-Chat-Section (#chat) — 4 Designs (.chat-cv--1..4, Dev-Panel-Achse "Chat" / data-chat), alle um denselben realistischen App-Nachbau (.chat-app) herum — 1:1 der Look von app/chat.html. Zusätzliche Achse "Chat-Farbe" (data-chat-color): fb full black · fw full white · wc BG schwarz / Chat weiß · bc BG weiß / Chat schwarz. Aufbau + scripted Demo in marketing.js. ========================================================= */ .chat-sec { overflow: hidden; } /* dunkler Section-Hintergrund: fb + wc */ .chat-sec[data-chat-color="fb"], .chat-sec[data-chat-color="wc"] { background: var(--ink-950); color: rgba(255,255,255,0.82); } .chat-sec[data-chat-color="fb"] .eyebrow, .chat-sec[data-chat-color="wc"] .eyebrow { color: rgba(255,255,255,0.6); } .chat-sec[data-chat-color="fb"] .eyebrow::before, .chat-sec[data-chat-color="wc"] .eyebrow::before { background: rgba(255,255,255,0.4); } .chat-sec[data-chat-color="fb"] h2, .chat-sec[data-chat-color="wc"] h2 { color: var(--paper); } .chat-sec[data-chat-color="fb"] .lab-head p, .chat-sec[data-chat-color="fb"] .lab-lead, .chat-sec[data-chat-color="wc"] .lab-head p, .chat-sec[data-chat-color="wc"] .lab-lead { color: rgba(255,255,255,0.7); } /* heller Section-Hintergrund: fw + bc (Grund-Typo von marketing.css) */ .chat-sec[data-chat-color="fw"], .chat-sec[data-chat-color="bc"] { background: var(--bg-canvas); color: var(--ink-700); } /* ---- Live-Demo · redesigned, KI-Chat-Look ---- */ .chat-demo { display: flex; flex-direction: column; width: 100%; max-width: 480px; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; text-align: left; } .chat-demo__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper); } .chat-demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .chat-demo__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-400); } .chat-demo__main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; } .chat-demo__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); } .chat-demo__id { display: flex; align-items: center; gap: 10px; } .chat-demo__mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; } .chat-demo__mark svg { width: 15px; height: 15px; } .chat-demo__id b { display: block; font-size: 0.84rem; letter-spacing: -0.01em; } .chat-demo__id small { font-size: 0.7rem; color: var(--ink-400); } .chat-demo__mode { flex-shrink: 0; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-600); background: var(--ink-100); padding: 4px 10px; border-radius: var(--radius-full); } .chat-demo__log { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; min-height: 220px; max-height: 300px; overflow-y: auto; background: var(--bg-canvas); } .chat-demo__msg { max-width: 90%; font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; } .chat-demo__msg--me { align-self: flex-end; background: var(--ink-950); color: var(--paper); padding: 10px 14px; border-radius: 16px 16px 4px 16px; } .chat-demo__msg--ai { align-self: flex-start; display: flex; gap: 10px; } .chat-demo__ava { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .chat-demo__ava svg { width: 14px; height: 14px; } .chat-demo__txt { background: var(--bg-surface); border: 1px solid var(--line); color: var(--ink-800); padding: 10px 14px; border-radius: 4px 16px 16px 16px; } .chat-demo__dots { display: flex; gap: 4px; align-items: center; background: var(--bg-surface); border: 1px solid var(--line); padding: 13px 14px; border-radius: 4px 16px 16px 16px; } .chat-demo__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); animation: chatDot 1s infinite ease-in-out; } .chat-demo__dots i:nth-child(2) { animation-delay: 0.15s; } .chat-demo__dots i:nth-child(3) { animation-delay: 0.3s; } @keyframes chatDot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .chat-demo__dots i { animation: none; } } .chat-demo__foot { border-top: 1px solid var(--line); background: var(--bg-surface); } .chat-demo__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px 0; } .chat-demo__chip { font-size: 0.74rem; font-weight: 500; color: var(--ink-600); background: var(--bg-surface); border: 1px solid var(--line-strong); border-radius: var(--radius-full); padding: 6px 12px; transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), background 140ms var(--ease-out); } .chat-demo__chip:hover { border-color: var(--ink-400); color: var(--ink-950); background: var(--ink-50); } .chat-demo__input { display: flex; gap: 8px; padding: 12px 14px 8px; } .chat-demo__input input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--bg-canvas); font-size: 0.85rem; color: var(--ink-900); } .chat-demo__input input:focus { outline: none; border-color: var(--ink-400); background: var(--bg-surface); } .chat-demo__send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; transition: background 140ms var(--ease-out); } .chat-demo__send svg { width: 16px; height: 16px; margin-left: -1px; } .chat-demo__send:hover { background: var(--ink-800); } .chat-demo__note { padding: 2px 16px 12px; margin: 0; font-size: 0.68rem; color: var(--ink-400); font-family: var(--font-mono); } .chat-demo--frame { box-shadow: var(--shadow-xl); } /* Größen */ .chat-demo--lg { max-width: 640px; } .chat-demo--lg .chat-demo__log { min-height: 340px; max-height: 440px; } .chat-demo--lg .chat-demo__msg { font-size: 0.9rem; } .chat-demo--xl { max-width: 900px; border-radius: var(--radius-2xl); } .chat-demo--xl .chat-demo__head { padding: 16px 22px; } .chat-demo--xl .chat-demo__mark { width: 32px; height: 32px; } .chat-demo--xl .chat-demo__mark svg { width: 18px; height: 18px; } .chat-demo--xl .chat-demo__id b { font-size: 0.95rem; } .chat-demo--xl .chat-demo__log { min-height: 460px; max-height: 600px; padding: 26px 22px; gap: 16px; } .chat-demo--xl .chat-demo__msg { font-size: 0.95rem; max-width: 76%; } .chat-demo--xl .chat-demo__chips { padding: 16px 22px 0; } .chat-demo--xl .chat-demo__input { padding: 16px 22px 10px; } .chat-demo--xl .chat-demo__note { padding: 2px 22px 16px; } /* App-Fenster mit Fächer-Navi (v10) */ .chat-demo--app { flex-direction: column; } .chat-demo--app .chat-demo__bar + .chat-demo__nav { border-top: 0; } .chat-demo--app { display: grid; grid-template-columns: 190px 1fr; grid-template-rows: auto 1fr; } .chat-demo--app .chat-demo__bar { grid-column: 1 / -1; } .chat-demo--app .chat-demo__nav { grid-row: 2; border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-surface); } .chat-demo--app .chat-demo__nav-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; padding: 4px 8px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); } .chat-demo--app .chat-demo__nav-brand .chat-demo__mark { width: 22px; height: 22px; border-radius: 6px; } .chat-demo--app .chat-demo__nav a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-md); font-size: 0.8rem; font-weight: 500; color: var(--ink-600); } .chat-demo--app .chat-demo__nav a svg { width: 15px; height: 15px; opacity: 0.8; } .chat-demo--app .chat-demo__nav a.is-on { background: var(--ink-950); color: var(--paper); } .chat-demo--app .chat-demo__main { grid-row: 2; grid-column: 2; } /* ---- Perk-Listen (von den Varianten geteilt) ---- */ .chat-perks { display: flex; flex-direction: column; gap: 16px; margin: 26px 0; padding: 0; list-style: none; } .chat-perks li { display: flex; gap: 13px; } .chat-perk__ico { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--ink-950); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; } .chat-perk__ico svg { width: 18px; height: 18px; } .chat-perks b { display: block; font-size: 0.98rem; letter-spacing: -0.01em; margin-bottom: 3px; } .chat-perks p { font-size: 0.86rem; line-height: 1.55; color: var(--ink-600); margin: 0; } .chat-perks--row, .chat-perks--cards, .chat-perks--2x2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; } .chat-perks--2x2 { grid-template-columns: 1fr 1fr; } .chat-perks--row li, .chat-perks--cards li, .chat-perks--2x2 li { flex-direction: column; gap: 10px; } .chat-perks--cards li { background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; } .chat-perks--inline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: clamp(2rem, 1rem + 3vw, 3.4rem) 0 0; border-top: 1px solid var(--line); padding-top: clamp(1.6rem, 1rem + 2vw, 2.4rem); } .chat-perks--inline li { display: flex; flex-direction: column; gap: 8px; } .chat-perks--inline .chat-perk__ico { width: 30px; height: 30px; } .chat-perks--inline b { font-size: 0.9rem; } .chat-perks--inline span { font-size: 0.8rem; line-height: 1.5; color: var(--ink-600); } .chat-perks--check { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .chat-perks--check li { display: flex; gap: 12px; } .chat-perks--check svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--gruen); } .chat-perks--check b { display: block; font-size: 0.96rem; margin-bottom: 3px; } .chat-perks--check p { font-size: 0.85rem; line-height: 1.5; color: var(--ink-600); margin: 0; } .chat-cv h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin-top: 0.5rem; } .chat-cv .lab-lead { margin-top: 1.1rem; } .chat-cv__stage { display: flex; justify-content: center; margin-top: clamp(2rem, 1rem + 3vw, 3.4rem); } .chat-cv .chat-perks b { color: #fff; } .chat-cv .chat-perks p { color: rgba(255,255,255,0.62); } .chat-cv .chat-perk__ico { background: rgba(255,255,255,0.12); color: #fff; } /* ============ Realistischer App-Nachbau (.chat-app) ============ Spiegelt app/chat.html: Verlauf-Spalte, Kontext-Kopf mit Fach-Kachel + Nutzungs-Donut, Messenger-Thread, Composer. Bubbles kommen aus initChatDemo als .chat-demo__msg* — hier nur die dunklen Overrides. */ /* Feste Höhe (nicht nur max-height) — erst dadurch hat die Grid-Zeile „1fr" überhaupt einen festen Raum zum Verteilen, damit .chat-app__thread (flex:1, min-height:0) zuverlässig auf den Rest gestreckt wird und bei vielen Nachrichten intern scrollt statt die Karte wachsen zu lassen. */ .chat-app { width: 100%; max-width: 720px; height: 560px; text-align: left; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; background: #14161a; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 44px 100px -34px rgba(0,0,0,0.62); } .chat-app--sm { max-width: 560px; height: 480px; } .chat-app--lg { max-width: 940px; height: 620px; } .chat-app--xl { max-width: 1140px; height: 680px; } .chat-app:not(.chat-app--nosb) { grid-template-columns: 244px 1fr; } .chat-app__bar { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } .chat-app__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); } .chat-app__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.4); } /* Verlauf-Spalte */ .chat-app__side { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px 12px; border-right: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); } .chat-app__new { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--paper); color: var(--ink-950); font-family: inherit; font-weight: 650; font-size: 0.82rem; } .chat-app__new svg { width: 15px; height: 15px; } .chat-app__vh { flex-shrink: 0; margin: 18px 0 6px; padding: 0 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.38); } .chat-app__list { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; } .chat-app__row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 9px 8px; border-top: 1px solid rgba(255,255,255,0.07); } .chat-app__row:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); } .chat-app__rav { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--t) 24%, transparent); color: var(--t); } .chat-app__rav svg { width: 15px; height: 15px; } .chat-app__row.is-active { background: color-mix(in srgb, var(--t) 16%, transparent); border-radius: 10px; border-top-color: transparent; } .chat-app__row.is-active + .chat-app__row { border-top-color: transparent; } .chat-app__row.is-active .chat-app__rav { background: var(--t); color: #fff; } .chat-app__rmain { min-width: 0; } .chat-app__rt { display: block; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-app__rm { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 0.68rem; color: rgba(255,255,255,0.45); } .chat-app__rth { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-app__rtime { margin-left: auto; flex-shrink: 0; } /* Hauptspalte + Kontext-Kopf */ .chat-app__main { grid-row: 2; grid-column: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .chat-app:not(.chat-app--nosb) .chat-app__main { grid-column: 2; } .chat-app__ctx { display: flex; align-items: center; gap: 11px; flex-shrink: 0; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,0.1); } .chat-app__idtile { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--fach-rose); color: #fff; display: flex; align-items: center; justify-content: center; } .chat-app__idtile svg { width: 15px; height: 15px; } .chat-app__ctx-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .chat-app__mode { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.42); } .chat-app__thema { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-app__usage { margin-left: auto; flex-shrink: 0; } .chat-app__donut { width: 32px; height: 32px; display: block; } /* Thread (baut auf .chat-demo__log auf) — füllt exakt den Rest der festen .chat-app-Höhe (flex:1 + min-height:0 statt min/max-height je Größe) und scrollt intern; die Karte selbst wächst nie mit. */ .chat-app__thread { flex: 1; min-height: 0; max-height: none; padding: 20px 18px; background: rgba(0,0,0,0.22); } .chat-app .chat-demo__msg { font-size: 0.86rem; } .chat-app .chat-demo__msg--me { background: var(--paper); color: var(--ink-950); border-radius: 16px 16px 4px 16px; } .chat-app .chat-demo__ava { background: var(--fach-rose); color: #fff; border-radius: 9px; } .chat-app .chat-demo__txt { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.92); border-radius: 5px 16px 16px 16px; } .chat-app .chat-demo__dots { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.1); } .chat-app .chat-demo__dots i { background: rgba(255,255,255,0.5); } /* Composer */ .chat-app__cw { flex-shrink: 0; padding: 12px 18px 16px; border-top: 1px solid rgba(255,255,255,0.08); } .chat-app__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 10px; } .chat-app .chat-demo__chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.8); } .chat-app .chat-demo__chip:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.1); } .chat-app__composer { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 14px; border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-full); background: rgba(255,255,255,0.05); transition: border-color 140ms var(--ease-out); } .chat-app__composer:focus-within { border-color: rgba(255,255,255,0.4); } .chat-app__clip { flex-shrink: 0; display: flex; color: rgba(255,255,255,0.4); } .chat-app__clip svg { width: 17px; height: 17px; } .chat-app__composer input { flex: 1; min-width: 0; height: 34px; border: none; background: transparent; color: #fff; font-size: 0.85rem; outline: none; } .chat-app__composer input::placeholder { color: rgba(255,255,255,0.4); } .chat-app__send { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--paper); color: var(--ink-950); display: flex; align-items: center; justify-content: center; } .chat-app__send svg { width: 15px; height: 15px; margin-left: -1px; } .chat-app__hint { margin: 8px 0 0; font-family: var(--font-mono); font-size: 0.64rem; color: rgba(255,255,255,0.32); } /* Automatische Live-Demo (#chat): Composer nur Attrappe — abgedunkelt, nicht bedienbar; der Hinweis bekommt einen pulsierenden Punkt. */ .chat-app--auto .chat-app__composer { opacity: 0.5; pointer-events: none; } .chat-app--auto .chat-app__send { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.5); } .chat-app--auto .chat-app__hint { display: flex; align-items: center; gap: 7px; } .chat-app--auto .chat-app__hint::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #8fe3b4; box-shadow: 0 0 0 0 rgba(143,227,180,0.5); animation: chatAutoPulse 1800ms var(--ease-out) infinite; } @keyframes chatAutoPulse { 0% { box-shadow: 0 0 0 0 rgba(143,227,180,0.5); } 70% { box-shadow: 0 0 0 7px rgba(143,227,180,0); } 100% { box-shadow: 0 0 0 0 rgba(143,227,180,0); } } @media (prefers-reduced-motion: reduce) { .chat-app--auto .chat-app__hint::before { animation: none; } } .chat-app__donut-t { stroke: rgba(255,255,255,0.16); } .chat-app__donut-v { stroke: #8fe3b4; } /* ============ Helle Chat-Anzeige (fw + wc) ============ Der App-Nachbau selbst wird weiß — überschreibt nur die dunklen Flächen/Farben, Struktur bleibt. */ .chat-sec[data-chat-color="fw"] .chat-app, .chat-sec[data-chat-color="wc"] .chat-app { background: var(--bg-surface); border-color: var(--line); box-shadow: var(--shadow-xl); } .chat-sec[data-chat-color="fw"] .chat-app__bar, .chat-sec[data-chat-color="wc"] .chat-app__bar { background: var(--paper); border-bottom-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app__bar i, .chat-sec[data-chat-color="wc"] .chat-app__bar i { background: var(--ink-200); } .chat-sec[data-chat-color="fw"] .chat-app__bar span, .chat-sec[data-chat-color="wc"] .chat-app__bar span { color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__side, .chat-sec[data-chat-color="wc"] .chat-app__side { background: var(--bg-canvas); border-right-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app__new, .chat-sec[data-chat-color="wc"] .chat-app__new { background: var(--ink-950); color: var(--paper); } .chat-sec[data-chat-color="fw"] .chat-app__vh, .chat-sec[data-chat-color="wc"] .chat-app__vh { color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__row, .chat-sec[data-chat-color="wc"] .chat-app__row { border-top-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app__row:last-child, .chat-sec[data-chat-color="wc"] .chat-app__row:last-child { border-bottom-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app__rt, .chat-sec[data-chat-color="wc"] .chat-app__rt { color: var(--ink-900); } .chat-sec[data-chat-color="fw"] .chat-app__rm, .chat-sec[data-chat-color="wc"] .chat-app__rm { color: var(--ink-500); } .chat-sec[data-chat-color="fw"] .chat-app__ctx, .chat-sec[data-chat-color="wc"] .chat-app__ctx { border-bottom-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app__mode, .chat-sec[data-chat-color="wc"] .chat-app__mode { color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__thema, .chat-sec[data-chat-color="wc"] .chat-app__thema { color: var(--ink-900); } .chat-sec[data-chat-color="fw"] .chat-app__donut-t, .chat-sec[data-chat-color="wc"] .chat-app__donut-t { stroke: var(--ink-150); } .chat-sec[data-chat-color="fw"] .chat-app__thread, .chat-sec[data-chat-color="wc"] .chat-app__thread { background: var(--bg-canvas); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__msg--me, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__msg--me { background: var(--ink-950); color: var(--paper); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__txt, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__txt { background: var(--bg-surface); border-color: var(--line); color: var(--ink-800); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__dots, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__dots { background: var(--bg-surface); border-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__dots i, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__dots i { background: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__cw, .chat-sec[data-chat-color="wc"] .chat-app__cw { border-top-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__chip, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__chip { background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink-600); } .chat-sec[data-chat-color="fw"] .chat-app .chat-demo__chip:hover, .chat-sec[data-chat-color="wc"] .chat-app .chat-demo__chip:hover { border-color: var(--ink-400); color: var(--ink-950); background: var(--ink-50); } .chat-sec[data-chat-color="fw"] .chat-app__composer, .chat-sec[data-chat-color="wc"] .chat-app__composer { background: var(--bg-canvas); border-color: var(--line-strong); } .chat-sec[data-chat-color="fw"] .chat-app__composer:focus-within, .chat-sec[data-chat-color="wc"] .chat-app__composer:focus-within { border-color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__clip, .chat-sec[data-chat-color="wc"] .chat-app__clip { color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__composer input, .chat-sec[data-chat-color="wc"] .chat-app__composer input { color: var(--ink-900); } .chat-sec[data-chat-color="fw"] .chat-app__composer input::placeholder, .chat-sec[data-chat-color="wc"] .chat-app__composer input::placeholder { color: var(--ink-400); } .chat-sec[data-chat-color="fw"] .chat-app__send, .chat-sec[data-chat-color="wc"] .chat-app__send { background: var(--ink-950); color: var(--paper); } .chat-sec[data-chat-color="fw"] .chat-app__hint, .chat-sec[data-chat-color="wc"] .chat-app__hint { color: var(--ink-400); } /* ============ Varianten-Rahmen (v1–v4) ============ */ .chat-cv { text-align: center; } .chat-cv .lab-head { margin-inline: auto; } .chat-cv__stage { margin-top: clamp(2rem, 1rem + 3vw, 3.4rem); } /* helle Section (fw/bc): Zusatz-Inhalte auf dunkle Typo drehen */ .chat-sec[data-chat-color="fw"] .chat-cv .chat-perks b, .chat-sec[data-chat-color="bc"] .chat-cv .chat-perks b, .chat-sec[data-chat-color="fw"] .chat-cv__strip b, .chat-sec[data-chat-color="bc"] .chat-cv__strip b, .chat-sec[data-chat-color="fw"] .chat-cv__modes-h, .chat-sec[data-chat-color="bc"] .chat-cv__modes-h, .chat-sec[data-chat-color="fw"] .chat-cv__col-h, .chat-sec[data-chat-color="bc"] .chat-cv__col-h, .chat-sec[data-chat-color="fw"] .chat-modes b, .chat-sec[data-chat-color="bc"] .chat-modes b, .chat-sec[data-chat-color="fw"] .chat-stats b, .chat-sec[data-chat-color="bc"] .chat-stats b { color: var(--ink-950); } .chat-sec[data-chat-color="fw"] .chat-cv .chat-perks p, .chat-sec[data-chat-color="bc"] .chat-cv .chat-perks p, .chat-sec[data-chat-color="fw"] .chat-modes p, .chat-sec[data-chat-color="bc"] .chat-modes p, .chat-sec[data-chat-color="fw"] .chat-stats span, .chat-sec[data-chat-color="bc"] .chat-stats span, .chat-sec[data-chat-color="fw"] .chat-cv__cap, .chat-sec[data-chat-color="bc"] .chat-cv__cap { color: var(--ink-600); } .chat-sec[data-chat-color="fw"] .chat-cv .chat-perk__ico, .chat-sec[data-chat-color="bc"] .chat-cv .chat-perk__ico, .chat-sec[data-chat-color="fw"] .chat-mode__ico, .chat-sec[data-chat-color="bc"] .chat-mode__ico { background: var(--ink-950); color: var(--paper); } .chat-sec[data-chat-color="fw"] .chat-cv__strip, .chat-sec[data-chat-color="bc"] .chat-cv__strip, .chat-sec[data-chat-color="fw"] .chat-cv__modes, .chat-sec[data-chat-color="bc"] .chat-cv__modes, .chat-sec[data-chat-color="fw"] .chat-stats, .chat-sec[data-chat-color="bc"] .chat-stats { border-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-perks--row li, .chat-sec[data-chat-color="bc"] .chat-perks--row li, .chat-sec[data-chat-color="fw"] .chat-modes li, .chat-sec[data-chat-color="bc"] .chat-modes li, .chat-sec[data-chat-color="fw"] .chat-parentnote, .chat-sec[data-chat-color="bc"] .chat-parentnote { background: var(--bg-surface); border-color: var(--line); } .chat-sec[data-chat-color="fw"] .chat-parentnote p, .chat-sec[data-chat-color="bc"] .chat-parentnote p { color: var(--ink-600); } .chat-sec[data-chat-color="fw"] .chat-parentnote b, .chat-sec[data-chat-color="bc"] .chat-parentnote b { color: var(--ink-950); } /* Perk-Karten-Reihe + Perk-Liste im Chat-Kontext */ .chat-cv .chat-perks b { color: #fff; } .chat-cv .chat-perks p { color: rgba(255,255,255,0.62); } .chat-cv .chat-perk__ico { background: rgba(255,255,255,0.12); color: #fff; } .chat-cv .chat-perks--row { margin: clamp(2rem, 1rem + 3vw, 3.2rem) 0 0; text-align: left; } .chat-cv .chat-perks--row li { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 18px; } /* 1 · Strip — vier Perks als dünner Strip unter dem App-Mock */ .chat-cv__strip { list-style: none; margin: clamp(2rem, 1rem + 3vw, 3.4rem) 0 0; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .chat-cv__strip li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .chat-cv__strip b { font-size: 0.84rem; color: #fff; } /* Modi-Block (v2–v4) */ .chat-cv__modes { margin: clamp(1.8rem, 1rem + 2.4vw, 2.8rem) 0 0; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; border-top: 1px solid rgba(255,255,255,0.12); text-align: left; } .chat-cv__modes-h, .chat-cv__col-h { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 16px; } .chat-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px; } .chat-modes li { display: flex; gap: 12px; } .chat-mode__ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(255,255,255,0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .chat-mode__ico svg { width: 16px; height: 16px; } .chat-modes b { display: block; font-size: 0.9rem; color: #fff; margin-bottom: 2px; } .chat-modes p { font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.62); margin: 0; } /* 3 · Explainer — zweispaltiger Info-Block unter dem Mock */ .chat-cv--3 .chat-cv__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 1rem + 4vw, 4rem); text-align: left; margin-top: clamp(2rem, 1rem + 3vw, 3.4rem); } .chat-cv--3 .chat-cv__col .chat-perks { margin: 0 0 1.6rem; } .chat-cv--3 .chat-cv__col .chat-modes { grid-template-columns: 1fr; } /* 4 · Deep — Eltern-Notiz + Kennzahlen */ .chat-parentnote { display: flex; gap: 14px; align-items: flex-start; text-align: left; margin: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; padding: 18px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); } .chat-parentnote__ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .chat-parentnote__ico svg { width: 17px; height: 17px; } .chat-parentnote p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.72); } .chat-parentnote b { color: #fff; } .chat-stats { list-style: none; margin: clamp(1.8rem, 1rem + 2.4vw, 2.8rem) 0 0; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; border-top: 1px solid rgba(255,255,255,0.12); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .chat-stats li { display: flex; flex-direction: column; align-items: center; gap: 4px; } .chat-stats b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); color: #fff; } .chat-stats span { font-size: 0.78rem; color: rgba(255,255,255,0.6); } @media (max-width: 980px) { .chat-app--lg, .chat-app--xl { max-width: 100%; } .chat-cv__strip, .chat-stats { grid-template-columns: repeat(2, 1fr); } .chat-cv .chat-perks--row { grid-template-columns: repeat(2, 1fr); } .chat-cv--3 .chat-cv__grid { grid-template-columns: 1fr; } } @media (max-width: 720px) { .chat-app:not(.chat-app--nosb) { grid-template-columns: 1fr; } .chat-app__side { display: none; } .chat-app:not(.chat-app--nosb) .chat-app__main { grid-column: 1; } .chat-cv__strip, .chat-stats, .chat-modes { grid-template-columns: 1fr; } .chat-cv .chat-perks--row { grid-template-columns: 1fr; } } /* ---------- KI-Chat — 10 inhaltsreiche Redesigns (schwarzer Abschnitt) ---------- */ .chat-cv__cta { text-align: center; margin-top: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); } .chat-cv__modes--top { margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); } .chat-cv__ex, .chat-cv__guard, .chat-cv__vs { text-align: left; margin: clamp(1.8rem, 1rem + 2.4vw, 2.8rem) 0 0; padding: clamp(1.6rem, 1rem + 2vw, 2.4rem) 0 0; border-top: 1px solid rgba(255,255,255,0.12); } /* Beispiel-Fragen */ .chat-ex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .chat-ex li { display: flex; flex-direction: column; gap: 7px; padding: 15px 17px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); } .chat-ex__s { align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding: 3px 9px; border-radius: var(--radius-full); background: rgba(255,255,255,0.08); } .chat-ex__p { font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.82); } /* Leitplanken */ .chat-guard { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 22px; } .chat-guard li { padding: 16px 18px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); } .chat-guard b { display: block; font-size: 0.94rem; color: #fff; margin-bottom: 4px; } .chat-guard p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: rgba(255,255,255,0.65); } /* Vergleich */ .chat-vs { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-xl); overflow: hidden; } .chat-vs__row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; } .chat-vs__row + .chat-vs__row { border-top: 1px solid rgba(255,255,255,0.1); } .chat-vs__row > span { padding: 13px 16px; display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; line-height: 1.4; } .chat-vs__row--head > span { font-weight: 700; font-size: 0.78rem; color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.03); } .chat-vs__row--head .is-a { color: #fff; } .chat-vs__k { font-weight: 600; color: #fff; } .chat-vs__a { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.9); } .chat-vs__b { color: rgba(255,255,255,0.55); } .chat-vs__a svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: #8fe3b4; } .chat-vs__b svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 3px; color: rgba(255,255,255,0.4); } /* Eltern-Zitat */ .chat-quote { margin: clamp(1.6rem, 1rem + 2vw, 2.4rem) auto 0; max-width: 46ch; text-align: center; } .chat-quote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem); line-height: 1.4; letter-spacing: -0.01em; color: #fff; margin: 0; } .chat-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.82rem; color: rgba(255,255,255,0.55); } /* Rahmen 4–10: nur Reihenfolge/Abstände — Bausteine bringen ihr eigenes Styling mit */ .chat-cv--4 .chat-cv__stage { margin-top: 0; } @media (max-width: 860px) { .chat-ex, .chat-guard, .chat-vs__row { grid-template-columns: 1fr; } .chat-vs__row--head { display: none; } .chat-vs__k { border-top: 1px solid rgba(255,255,255,0.1); } .chat-vs__row:first-child .chat-vs__k { border-top: 0; } } /* ========================================================= Landing-Lab — 8 weitere Sections (kv/cmp/subj/price/test/ parent/faq/cta), je 10 Varianten (.sv--{key}{n}), Dev-Panel. ========================================================= */ .sv-sec { position: relative; } .sv h2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3rem); margin-top: 0.5rem; } .sv .lab-head { max-width: 760px; margin-bottom: clamp(2rem, 1.3rem + 3vw, 3.6rem); } .sv .lab-head.is-center { margin-inline: auto; } .sv .lab-head p { margin-top: 0.9rem; font-size: 1.03rem; color: var(--ink-600); line-height: 1.6; } /* ========================================================= Klausurvorbereitung (kv) — der GANZE Prozess als "Klausur- Cockpit" (.kvx): Kopf mit Fach + Countdown, Journey-Schiene (Klausur · Testklausur 1 · Lernplan · Lernphase · Lernzettel · Testklausur 2), Panel mit 6 automatisch laufenden Phasen (kvInit), optionale Übersichts-Rail. 10 Rahmen (.kvx-cv--1..10). ========================================================= */ .kvx-cv h2 { font-size: clamp(1.9rem, 1.35rem + 2.6vw, 3rem); margin-top: 0.5rem; } .kvx-cv__stage { display: flex; justify-content: center; margin-top: clamp(2rem, 1.3rem + 3vw, 3.4rem); } .kvx { width: 100%; max-width: 820px; text-align: left; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); } .kvx--sm { max-width: 640px; } .kvx--lg { max-width: 900px; } .kvx--xl { max-width: 1120px; } .kvx__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper); } .kvx__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .kvx__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-400); } .kvx__progress { height: 4px; background: var(--ink-100); } .kvx__progress i { display: block; height: 100%; width: 16%; background: var(--fach-blue); transition: width 500ms var(--ease-out); } .kvx--rail { display: grid; grid-template-columns: 1fr 264px; } .kvx--rail .kvx__bar, .kvx--rail .kvx__progress { grid-column: 1 / -1; } .kvx__inner { padding: clamp(20px, 2.6vw, 32px); } .kvx__head { margin-bottom: 22px; } .kvx__badge { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--fach-blue); background: color-mix(in srgb, var(--fach-blue) 12%, transparent); padding: 4px 10px; border-radius: var(--radius-full); } .kvx__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 0.9rem + 1vw, 1.5rem); letter-spacing: -0.02em; margin: 12px 0 5px; } .kvx__meta { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--ink-500); } .kvx__meta-ico { display: inline-flex; } .kvx__meta-ico svg { width: 13px; height: 13px; } .kvx__body { display: grid; grid-template-columns: 156px 1fr; gap: clamp(18px, 2.4vw, 34px); align-items: start; } .kvx__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .kvx__step { display: flex; align-items: center; gap: 9px; padding: 7px 4px; position: relative; } .kvx__step-n { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 0.74rem; font-weight: 700; color: var(--ink-400); background: var(--bg-surface); transition: all 200ms var(--ease-out); } .kvx__step-l { font-size: 0.8rem; color: var(--ink-500); } .kvx__step:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 30px; width: 1.5px; height: calc(100% - 22px); background: var(--line); } .kvx__step.is-done .kvx__step-n { background: var(--fach-blue); border-color: var(--fach-blue); color: #fff; } .kvx__step.is-done::after { background: var(--fach-blue); } .kvx__step.is-current .kvx__step-n { border-color: var(--fach-blue); color: var(--fach-blue); } .kvx__step.is-current .kvx__step-l { color: var(--ink-950); font-weight: 650; } .kvx__panel { position: relative; min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-canvas); padding: clamp(16px, 2vw, 24px); } .kvx__ph { position: absolute; inset: clamp(16px, 2vw, 24px); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out); } .kvx__ph.is-on { opacity: 1; visibility: visible; transform: none; position: relative; inset: auto; } .kvx__ph h4 { font-size: 1rem; margin: 0 0 6px; } .kvx__lead { font-size: 0.85rem; color: var(--ink-600); line-height: 1.55; margin: 0 0 16px; } .kvx__lead strong { color: var(--ink-900); } /* Phase 0 · Klausur angelegt */ .kvx__themen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .kvx__thema { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 500; color: var(--ink-800); background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 5px 12px; } .kvx__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kvx__dot--gruen { background: var(--gruen); } .kvx__dot--gelb { background: var(--gelb); } .kvx__dot--rot { background: var(--rot); } .kvx__cta-row { margin-top: 4px; } .kvx__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--radius-md); font-size: 0.83rem; font-weight: 600; } .kvx__btn svg { width: 16px; height: 16px; } .kvx__btn--primary { background: var(--fach-blue); color: #fff; } /* Note-Box + Ampel-Karten (Testklausur 1 / 2) */ .kvx__note { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-md); margin-bottom: 20px; } .kvx__note--gruen { background: var(--gruen-bg); } .kvx__note--gelb { background: var(--gelb-bg); } .kvx__note--rot { background: var(--rot-bg); } .kvx__note-num { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; line-height: 1; } .kvx__note--gruen .kvx__note-num { color: var(--gruen); } .kvx__note--gelb .kvx__note-num { color: var(--gelb-ink, #8a6d10); } .kvx__note--rot .kvx__note-num { color: var(--rot); } .kvx__note-meta { display: flex; flex-direction: column; gap: 3px; } .kvx__note-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500); } .kvx__note-cap svg { width: 12px; height: 12px; } .kvx__note-lbl { font-size: 0.8rem; color: var(--ink-600); } .kvx__sec-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 10px; } .kvx__cards { display: flex; flex-direction: column; gap: 8px; } .kvx__card { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-left: 3px solid var(--ink-300); border-radius: var(--radius-md); background: var(--bg-surface); padding: 11px 14px; font-size: 0.84rem; font-weight: 600; } .kvx__card--gruen { border-left-color: var(--gruen); } .kvx__card--gelb { border-left-color: var(--gelb); } .kvx__card--rot { border-left-color: var(--rot); } .kvx-chip { flex-shrink: 0; font-size: 0.76rem; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-full); } .kvx-chip--gruen { background: var(--gruen-bg); color: var(--gruen); } .kvx-chip--gelb { background: var(--gelb-bg); color: var(--gelb-ink, #8a6d10); } .kvx-chip--rot { background: var(--rot-bg); color: var(--rot); } /* Lernplan-Tage (Phase 2 + 3) */ .kvx__days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .kvx__day { display: grid; grid-template-columns: auto 26px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border-left: 3px solid var(--line-strong); background: var(--bg-surface); } .kvx__days:not(.kvx__days--check) .kvx__day { grid-template-columns: 26px 1fr; } .kvx__day--rot { border-left-color: var(--rot); } .kvx__day--gelb { border-left-color: var(--gelb); } .kvx__day--gruen { border-left-color: var(--gruen); } .kvx__day--ink { border-left-color: var(--ink-800); } .kvx__day-d { font-size: 0.74rem; font-weight: 700; color: var(--ink-400); } .kvx__day-t { font-size: 0.82rem; color: var(--ink-700); line-height: 1.35; } .kvx__day--ink .kvx__day-t { font-weight: 650; color: var(--ink-950); } .kvx__day-ck { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; } .kvx__day-ck svg { width: 11px; height: 11px; } .kvx__day.is-done .kvx__day-ck { background: var(--gruen); border-color: var(--gruen); color: #fff; } .kvx__day.is-now .kvx__day-ck { background: var(--fach-blue); border-color: var(--fach-blue); color: #fff; } .kvx__day.is-now { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fach-blue) 40%, transparent); } .kvx__prog-lbl { margin-top: 12px; font-size: 0.76rem; font-weight: 600; color: var(--ink-500); } /* Lernzettel (Phase 4) */ .kvx__zettel { display: flex; flex-direction: column; gap: 8px; } .kvx__zettel-item { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-surface); padding: 12px 14px; } .kvx__zettel-item b { display: block; font-size: 0.84rem; margin-bottom: 3px; } .kvx__zettel-item p { font-size: 0.8rem; color: var(--ink-600); line-height: 1.5; margin: 0; } /* Vergleich Testklausur 1 → 2 (Phase 5) */ .kvx__compare { display: flex; flex-direction: column; gap: 6px; } .kvx__cmp-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-surface); } .kvx__cmp-th { font-size: 0.84rem; font-weight: 600; } .kvx__cmp-arw { color: var(--ink-300); font-weight: 700; } /* Übersichts-Rail */ .kvx__rail { border-left: 1px solid var(--line); background: var(--bg-canvas); padding: clamp(18px, 2vw, 26px) 18px; } .kvx__rail-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 12px; } .kvx__rail-count { margin-bottom: 14px; } .kvx__rail-count b { display: block; font-size: 0.86rem; line-height: 1.3; } .kvx__rail-count span { font-size: 0.76rem; font-weight: 600; color: var(--fach-blue); } .kvx__rail-themen { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; } .kvx__rail-themen li { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-700); } .kvx__rail-links { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .kvx__rail-link { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--ink-600); } .kvx__rail-link svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-400); } /* ---- Varianten-Rahmen ---- */ .kvx-cv--1, .kvx-cv--2, .kvx-cv--3, .kvx-cv--5, .kvx-cv--6, .kvx-cv--7, .kvx-cv--8, .kvx-cv--10 { text-align: center; } .kvx-cv--1 .lab-head, .kvx-cv--2 .lab-head, .kvx-cv--3 .lab-head, .kvx-cv--5 .lab-head, .kvx-cv--6 .lab-head, .kvx-cv--7 .lab-head, .kvx-cv--8 .lab-head, .kvx-cv--10 .lab-head { margin-inline: auto; } /* 4 · Text-Flow — Prozess-Liste links, Cockpit rechts */ .kvx-cv--4 { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .kvx-cv--4 .kvx-cv__text h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); margin: 0.4rem 0 0; } .kvx-cv--4 .kvx-cv__text .lab-lead { margin: 1.1rem 0 1.5rem; color: var(--ink-600); } .kvx-cv--4 .kvx-cv__stage { margin-top: 0; } .kvx-cv__flow { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: none; } .kvx-cv__flow li { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; font-weight: 500; color: var(--ink-800); } .kvx-cv__flow li span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--ink-950); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; } /* 5 · Floating */ .kvx-cv--5 { position: relative; } .kvx-cv--5 .lab-head, .kvx-cv--5 .kvx-cv__stage { position: relative; z-index: 1; } .kvx-cv__glow { position: absolute; left: 50%; top: 56%; width: min(820px, 92%); aspect-ratio: 2 / 1; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(0,125,174,0.16), transparent 70%); filter: blur(50px); pointer-events: none; } /* 6 · Window */ .kvx-cv--6 .kvx-cv__persp { perspective: 1600px; margin-top: clamp(2rem, 1.3rem + 3vw, 3.4rem); } .kvx-cv--6 .kvx-cv__persp .kvx-cv__stage { margin-top: 0; transform: rotateX(4deg) rotateY(-6deg); transform-origin: center top; transition: transform 400ms var(--ease-out); } .kvx-cv--6 .kvx-cv__persp:hover .kvx-cv__stage { transform: none; } .kvx-cv__cap { margin: 20px auto 0; font-size: 0.8rem; color: var(--ink-500); } /* 7 · Bare */ .kvx-cv__note { margin: 20px auto 0; max-width: 58ch; font-size: 0.9rem; color: var(--ink-600); } /* Eckschnitt an der Grenze zum schwarzen KI-Chat-Abschnitt (#chat): der Abschnitt DARÜBER (#kv) bekommt einen runden UNTERRAND, der Abschnitt DARUNTER (#org, „Struktur") einen runden OBERRAND. In den weggeschnittenen Ecken blitzt jeweils der schwarze Zwickel durch (Radial-Gradient, Mittelpunkt = Radius-Bogen-Zentrum) — deckungsgleich mit der schwarzen Chat-Section dazwischen. overflow bleibt sichtbar, damit die Zwickel im weggeschnittenen Radius stehen. Beide Regeln stehen bewusst VOR den variantenspezifischen Dark-Regeln (`[data-org="6"]`), damit dunkle Varianten ihren schwarzen Section-Hintergrund behalten. */ /* Weiße Abschnitte mit rundem Rand gegen die schwarzen Nachbarn: #kv, #org, #price, #faq sind jeweils oben UND unten von einem schwarzen Abschnitt eingefasst (tldr/chat/cmp/parent/cta) → alle 4 Ecken rund. In den weggeschnittenen Ecken blitzt jeweils der schwarze Zwickel durch (EIN Pseudo, vier Radial-Zwickel je eine Ecke). */ .sv-sec[data-kv], .sv-sec[data-org], .sv-sec[data-price], .sv-sec[data-faq] { isolation: isolate; overflow: visible; background: var(--bg-canvas); border-radius: var(--section-radius); } .sv-sec[data-kv]::before, .sv-sec[data-org]::before, .sv-sec[data-price]::before, .sv-sec[data-faq]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle var(--section-radius) at 100% 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 100% 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left bottom / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right bottom / var(--section-radius) var(--section-radius) no-repeat; } /* Footer schließt direkt an die schwarze CTA-Section an: obere Ecken rund + Zwickel, keine Marge (nur auf der Startseite — landing-lab.css wird sonst nirgends geladen). */ body[data-page="index"] .site-footer { position: relative; isolation: isolate; overflow: visible; margin-top: 0; border-top: 0; background: var(--bg-canvas); border-top-left-radius: var(--section-radius); border-top-right-radius: var(--section-radius); } body[data-page="index"] .site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle var(--section-radius) at 100% 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right top / var(--section-radius) var(--section-radius) no-repeat; } /* Schwarze Abschnitte: Vergleich (#cmp), Eltern-Zugang (#parent), Abschluss-CTA (#cta) — vollflächig ink-950, heller Text. Pendant zur schwarzen KI-Chat-Section. */ .sv-sec[data-cmp], .sv-sec[data-parent], .sv-sec[data-cta] { background: var(--ink-950); color: rgba(255,255,255,0.82); } .sv-sec[data-cmp] .eyebrow, .sv-sec[data-parent] .eyebrow, .sv-sec[data-cta] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-cmp] .eyebrow::before, .sv-sec[data-parent] .eyebrow::before, .sv-sec[data-cta] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-cmp] h2, .sv-sec[data-parent] h2, .sv-sec[data-cta] h2 { color: var(--paper); } .sv-sec[data-cmp] .lab-head p, .sv-sec[data-parent] .lab-head p, .sv-sec[data-cta] .lab-head p, .sv-sec[data-cmp] .lab-lead, .sv-sec[data-parent] .lab-lead, .sv-sec[data-cta] .lab-lead { color: rgba(255,255,255,0.7); } /* cmp v9 auf schwarzem Abschnitt: Lesify-Karte WEISS, Klassische Nachhilfe SCHWARZ — Textfarben je Karte entsprechend. */ .sv-sec[data-cmp] .cmp-card--a { background: var(--bg-surface); color: var(--ink-800); border-color: var(--line); box-shadow: var(--shadow-xl); } .sv-sec[data-cmp] .cmp-card--a h3 { color: var(--ink-950); } .cmp-card__logo { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; display: block; } .sv-sec[data-cmp] .cmp-card--a .cmp-i--y { background: var(--gruen-bg); color: var(--gruen); } .sv-sec[data-cmp] .cmp-card--a .cmp-i--n { background: var(--ink-100); color: var(--ink-400); } .sv-sec[data-cmp] .cmp-card--a li b { color: var(--ink-950); } .sv-sec[data-cmp] .cmp-card--a li span { color: var(--ink-600); opacity: 1; } .sv-sec[data-cmp] .cmp-card--b { background: #17191d; color: rgba(255,255,255,0.82); border-color: rgba(255,255,255,0.16); } .sv-sec[data-cmp] .cmp-card--b h3 { color: var(--paper); } .sv-sec[data-cmp] .cmp-card--b .cmp-i--y { background: rgba(143,227,180,0.2); color: #8fe3b4; } .sv-sec[data-cmp] .cmp-card--b .cmp-i--n { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); } .sv-sec[data-cmp] .cmp-card--b li b { color: var(--paper); } .sv-sec[data-cmp] .cmp-card--b li span { color: rgba(255,255,255,0.7); opacity: 1; } .sv-sec[data-cmp] .cmp-callout { margin-left: auto; margin-right: auto; } /* cta v1 auf schwarzem Grund: dunkle Innen-Bande auflösen. */ .sv-sec[data-cta] .cta-band { background: transparent; border-radius: 0; padding: 0; box-shadow: none; } .sv-sec[data-cta] .cta-band::before { display: none; } /* kv 6 · Dark — dunkler Abschnitt; hier KEIN Eckschnitt (volle Fläche). */ .sv-sec[data-kv="6"] { background: var(--ink-950); border-radius: 0; } .sv-sec[data-kv="6"]::before, .sv-sec[data-kv="6"]::after { display: none; } .sv-sec[data-kv="6"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-kv="6"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-kv="6"] h2 { color: var(--paper); } .sv-sec[data-kv="6"] .lab-head p { color: rgba(255,255,255,0.7); } /* 9 · Steps oben (horizontale Schiene) */ .kvx-cv--9 .kvx__body { grid-template-columns: 1fr; } .kvx-cv--9 .kvx__steps { flex-direction: row; gap: 0; margin-bottom: 18px; } .kvx-cv--9 .kvx__step { flex: 1; flex-direction: column; gap: 6px; text-align: center; } .kvx-cv--9 .kvx__step:not(:last-child)::after { top: 11px; left: calc(50% + 14px); width: calc(100% - 28px); height: 1.5px; } .kvx-cv--9 .kvx__step-l { font-size: 0.72rem; } /* 10 · Fullbleed */ .kvx-cv--10 .kvx-cv__stage { padding: 0 clamp(16px, 4vw, 40px); } .kvx-cv--10 .kvx--xl { max-width: 1320px; } @media (max-width: 980px) { .kvx-cv--4 { grid-template-columns: 1fr; } .kvx--lg, .kvx--xl { max-width: 100%; } .kvx--rail { grid-template-columns: 1fr; } .kvx--rail .kvx__rail { border-left: 0; border-top: 1px solid var(--line); } } @media (max-width: 620px) { .kvx__body { grid-template-columns: 1fr; } .kvx__steps { flex-direction: row; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 16px; } .kvx__step:not(:last-child)::after { display: none; } .kvx__ph { position: relative; inset: auto; } .kvx__ph:not(.is-on) { display: none; } .kvx__day { grid-template-columns: auto 22px 1fr; } .kvx__cmp-row { grid-template-columns: 1fr auto auto auto; font-size: 0.8rem; } } /* ========================================================= Klausurvorbereitung (kv) — Lernplan-Nachbau (.kvl*), 8 Rahmen (.kvl-cv--split/-sticky/-flip/-center/-dark/-bento/-timeline). Demo spiegelt app/lernplan.html?id=lp1: Kopf, 7-Tage-Navi links, aktiver Lerntag mit abhakbarer Checkliste rechts (kvlInit läuft die Tage automatisch durch). Akzent = --fach-blue wie in der App. ========================================================= */ /* ---- Textspalte (links in split/sticky, rechts in flip) ---- */ .kvl-cv h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); } .kvl-cv__text .lab-lead { margin: 1.1rem 0 1.6rem; color: var(--ink-600); } .kvl-cv__points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: flex; flex-direction: column; gap: 16px; } .kvl-cv__points li { display: flex; gap: 13px; } .kvl-cv__pico { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: color-mix(in srgb, var(--fach-blue) 12%, transparent); } .kvl-cv__pico svg { width: 18px; height: 18px; color: var(--fach-blue); } .kvl-cv--dark .kvl-cv__pico svg { color: #fff; } .kvl-cv__points b { display: block; font-family: var(--font-display); font-size: 0.98rem; letter-spacing: -0.02em; margin-bottom: 3px; } .kvl-cv__points span { font-size: 0.88rem; color: var(--ink-600); line-height: 1.5; } .kvl-cv__facts { display: flex; gap: 26px; margin-bottom: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .kvl-cv__facts b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--ink-950); line-height: 1; } .kvl-cv__facts span { font-size: 0.8rem; color: var(--ink-500); } /* ---- Demo-Karte ---- */ .kvl-cv__stage { display: flex; justify-content: center; margin-top: clamp(1.5rem, 1rem + 2vw, 2.6rem); } .kvl { width: 100%; max-width: 780px; text-align: left; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); } .kvl--lg { max-width: 920px; } .kvl--xl { max-width: 1080px; } .kvl__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper); } .kvl__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .kvl__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-400); } .kvl__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: clamp(15px, 2vw, 20px) clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--line); } .kvl__badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; color: var(--fach-blue); background: color-mix(in srgb, var(--fach-blue) 12%, transparent); padding: 4px 10px; border-radius: var(--radius-full); } .kvl__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.8vw, 1.35rem); letter-spacing: -0.02em; } .kvl__meta { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.78rem; color: var(--ink-500); } .kvl__meta-ico { display: inline-flex; } .kvl__meta-ico svg { width: 13px; height: 13px; } .kvl__split { display: grid; grid-template-columns: 210px 1fr; } .kvl__nav { padding: clamp(16px, 2vw, 22px) 14px; border-right: 1px solid var(--line); background: var(--bg-canvas); } .kvl__count b { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; } .kvl__count span { font-size: 0.76rem; color: var(--ink-500); margin-left: 4px; } .kvl__cbar { height: 4px; border-radius: 2px; background: var(--ink-100); margin: 8px 0 14px; overflow: hidden; } .kvl__cbar i { display: block; height: 100%; background: var(--fach-blue); } .kvl__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .kvl__step { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); } .kvl__step-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: var(--ink-400); background: var(--bg-surface); } .kvl__step-n svg { width: 12px; height: 12px; } .kvl__step-tx { min-width: 0; display: flex; flex-direction: column; } .kvl__step-t { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); } .kvl__step-d { font-size: 0.8rem; color: var(--ink-600); line-height: 1.25; } .kvl__step[data-state="done"] .kvl__step-n { background: var(--fach-blue); border-color: var(--fach-blue); color: #fff; } .kvl__step[data-state="done"] .kvl__step-d { color: var(--ink-500); } .kvl__step[data-state="now"] .kvl__step-n { border-color: var(--fach-blue); color: var(--fach-blue); } .kvl__step[data-active] { background: color-mix(in srgb, var(--fach-blue) 10%, transparent); } .kvl__step[data-active] .kvl__step-d { color: var(--ink-950); font-weight: 600; } .kvl__step[data-active] .kvl__step-t { color: var(--fach-blue); } /* ---- Fokus-Tag (rechts) ---- */ /* Feste Höhe, wie .orgx__main / .chat-app__thread — der Tag wechselt den Inhalt, die Karte wächst nie mit (scrollt bei Bedarf statt zu wachsen; Tag 2 mit 5 Checklisten-Punkten ist der höchste Inhalt). */ .kvl__main { padding: clamp(16px, 2.4vw, 26px); height: 480px; overflow-y: auto; } .kvl__main::-webkit-scrollbar { width: 7px; } .kvl__main::-webkit-scrollbar-thumb { background: var(--ink-150); border-radius: 4px; } .kvl-cv--dark .kvl__main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); } .kvl__mhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .kvl__focus-day { font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-950); } .kvl__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); } .kvl__chip svg { width: 11px; height: 11px; } .kvl__chip--now { background: var(--ink-950); color: var(--paper); } .kvl__chip--done { background: var(--gruen-bg); color: var(--gruen); } .kvl__chip--soon { background: var(--ink-100); color: var(--ink-500); } .kvl__focus-desc { font-size: 0.88rem; color: var(--ink-600); line-height: 1.55; margin: 0 0 16px; max-width: 52ch; } .kvl__cl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .kvl__cl-count { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .kvl__cl-count span { font-family: var(--font-body); font-weight: 500; font-size: 0.78rem; color: var(--ink-500); } .kvl__cl-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--ink-100); overflow: hidden; } .kvl__cl-bar i { display: block; height: 100%; background: var(--fach-blue); } .kvl__cl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .kvl__cl-item { display: flex; align-items: center; gap: 10px; } .kvl__cl-check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: transparent; } .kvl__cl-check svg { width: 13px; height: 13px; } .kvl__cl-item.is-done .kvl__cl-check { background: var(--fach-blue); border-color: var(--fach-blue); color: #fff; } .kvl__cl-open { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-surface); min-width: 0; } .kvl__cl-ico { flex-shrink: 0; color: var(--ink-400); display: flex; } .kvl__cl-ico svg { width: 15px; height: 15px; } .kvl__cl-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kvl__cl-cta { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; } .kvl__cl-cta svg { width: 13px; height: 13px; } .kvl__cl-item.is-done .kvl__cl-label { color: var(--ink-500); } .kvl__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .kvl__pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: var(--radius-full); border: 1px solid var(--line); font-size: 0.78rem; font-weight: 600; color: var(--ink-600); } .kvl__pill svg { width: 13px; height: 13px; } .kvl__pill--btn { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); } .kvl__pill--ok { color: var(--gruen); border-color: color-mix(in srgb, var(--gruen) 34%, transparent); background: var(--gruen-bg); } .kvl__pill--soon { color: var(--ink-400); border-style: dashed; } /* Lernzettel-Vorschau am Selbsttest-Tag (Tag 7) — wie lp-lernzettel-preview auf app/lernplan.html. */ /* Lernzettel ist ein Dokument, kein Fließtext — eine einzelne „öffnen"-Zeile wie ein Datei-Link (Definitionen/Formeln leben auf ihrer eigenen Seite, werden hier nicht inline vorgeschaut). */ .kvl__lz-doc { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-canvas); padding: 11px 14px; margin-bottom: 16px; transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out); } .kvl__lz-doc:hover { border-color: var(--line-strong); background: var(--bg-surface); } .kvl__lz-doc-ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--bg-surface); border: 1px solid var(--line); color: var(--ink-500); display: flex; align-items: center; justify-content: center; } .kvl__lz-doc-ico svg { width: 16px; height: 16px; } .kvl__lz-doc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .kvl__lz-doc-tx b { font-size: 0.84rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kvl__lz-doc-tx span { font-size: 0.72rem; color: var(--ink-500); } .kvl__lz-doc-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; font-weight: 600; color: var(--ink-500); } .kvl__lz-doc-cta svg { width: 13px; height: 13px; } .kvl-cv--dark .kvl__lz-doc { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } .kvl-cv--dark .kvl__lz-doc:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); } .kvl-cv--dark .kvl__lz-doc-ico { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); } .kvl-cv--dark .kvl__lz-doc-tx b { color: #fff; } .kvl-cv--dark .kvl__lz-doc-tx span, .kvl-cv--dark .kvl__lz-doc-cta { color: rgba(255,255,255,0.5); } .kvl-cv--dark .kvl__pill--soon { color: rgba(255,255,255,0.5); } .kvl__note { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md); margin-bottom: 16px; } .kvl__note--gruen { background: var(--gruen-bg); } .kvl__note--gelb { background: var(--gelb-bg); } .kvl__note--rot { background: var(--rot-bg); } .kvl__note-num { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; line-height: 1; } .kvl__note--gruen .kvl__note-num { color: var(--gruen); } .kvl__note--gelb .kvl__note-num { color: var(--gelb-ink, #8a6d10); } .kvl__note--rot .kvl__note-num { color: var(--rot); } .kvl__note-tx { display: flex; flex-direction: column; gap: 2px; } .kvl__note-tx b { font-size: 0.8rem; } .kvl__note-tx span { font-size: 0.76rem; color: var(--ink-600); } .kvl__mini-h { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 8px; } .kvl__mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .kvl__mini li { display: flex; align-items: center; gap: 9px; font-size: 0.84rem; color: var(--ink-800); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); } .kvl__mini--plain li { border: 0; padding: 4px 0; } .kvl__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .kvl__dot--gruen { background: var(--gruen); } .kvl__dot--gelb { background: var(--gelb); } .kvl__dot--rot { background: var(--rot); } .kvl__mini-n { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; } .kvl__mini-n--gruen { color: var(--gruen); } .kvl__mini-n--gelb { color: var(--gelb-ink, #8a6d10); } .kvl__mini-n--rot { color: var(--rot); } .kvl__hint { font-size: 0.8rem; color: var(--ink-500); margin: 14px 0 0; } /* ---- Rahmen ---- */ .kvl-cv--split, .kvl-cv--flip { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .kvl-cv--split .kvl-cv__stage, .kvl-cv--flip .kvl-cv__stage { margin-top: 0; } .kvl-cv--flip { grid-template-columns: 1.18fr 0.82fr; } .kvl-cv--sticky { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .kvl-cv--sticky .kvl-cv__aside { position: sticky; top: 96px; } .kvl-cv--sticky .kvl-cv__stage { margin-top: 0; } .kvl-cv--sticky .kvl-cv__points { gap: 13px; } .kvl-cv--center .lab-head, .kvl-cv--dark .lab-head, .kvl-cv--timeline .lab-head { margin-inline: auto; } .kvl-cv__points--row { flex-direction: row; flex-wrap: wrap; margin: clamp(1.8rem, 1rem + 2vw, 2.6rem) 0 0; gap: 20px 28px; } .kvl-cv__points--row li { flex: 1 1 240px; } /* dark (kv 6) */ .kvl-cv--dark .kvl { background: #16191d; border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); } .kvl-cv--dark .kvl__bar { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); } .kvl-cv--dark .kvl__head { border-color: rgba(255,255,255,0.08); } .kvl-cv--dark .kvl__title { color: #fff; } .kvl-cv--dark .kvl__meta { color: rgba(255,255,255,0.5); } .kvl-cv--dark .kvl__nav { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.08); } .kvl-cv--dark .kvl__count b { color: #fff; } .kvl-cv--dark .kvl__cbar { background: rgba(255,255,255,0.12); } .kvl-cv--dark .kvl__step-n { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); } .kvl-cv--dark .kvl__step-d { color: rgba(255,255,255,0.7); } .kvl-cv--dark .kvl__step[data-active] { background: rgba(255,255,255,0.07); } .kvl-cv--dark .kvl__step[data-active] .kvl__step-d { color: #fff; } .kvl-cv--dark .kvl__focus-day { color: #fff; } .kvl-cv--dark .kvl__focus-desc { color: rgba(255,255,255,0.66); } .kvl-cv--dark .kvl__chip--soon { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); } .kvl-cv--dark .kvl__chip--now { background: #fff; color: var(--ink-950); } .kvl-cv--dark .kvl__cl-bar { background: rgba(255,255,255,0.12); } .kvl-cv--dark .kvl__cl-count { color: #fff; } .kvl-cv--dark .kvl__cl-check { border-color: rgba(255,255,255,0.22); } .kvl-cv--dark .kvl__cl-open { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); } .kvl-cv--dark .kvl__cl-label { color: #fff; } .kvl-cv--dark .kvl__pill { border-color: rgba(255,255,255,0.16); color: rgba(255,255,255,0.7); } .kvl-cv--dark .kvl__pill--btn { background: #fff; color: var(--ink-950); border-color: #fff; } .kvl-cv--dark .kvl__mini li { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); } .kvl-cv--dark .kvl-cv__pico { background: rgba(255,255,255,0.08); color: #fff; } .kvl-cv--dark .kvl-cv__points--row b { color: #fff; } .kvl-cv--dark .kvl-cv__points--row span { color: rgba(255,255,255,0.65); } /* bento (kv 7) */ .kvl-cv--bento .lab-head { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); } .kvl-bento { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: stretch; } .kvl-bento__demo { grid-row: 1 / span 5; } .kvl-bento__demo .kvl { max-width: 100%; } .kvl-bento__cell { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 20px; display: flex; flex-direction: column; gap: 6px; } .kvl-bento__cell .kvl-cv__pico { margin-bottom: 4px; } .kvl-bento__cell b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; } .kvl-bento__cell span { font-size: 0.86rem; color: var(--ink-600); line-height: 1.5; } .kvl-bento__cell--cta { background: var(--ink-950); color: var(--paper); justify-content: center; gap: 12px; } .kvl-bento__cell--cta .btn { align-self: flex-start; } /* timeline (kv 8) */ .kvl-tl { border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-lg); } .kvl-tl__track { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: var(--bg-canvas); border-bottom: 1px solid var(--line); } .kvl-tl__step { flex-direction: column; align-items: flex-start; gap: 6px; } .kvl-tl__step .kvl__step-tx { width: 100%; } .kvl-tl__step .kvl__step-d { line-height: 1.2; } /* Tag-Nummern als Slideshow-Steuerung unter der Demo (kv 5) */ .kvl-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(1.4rem, 1rem + 1.5vw, 2rem); } .kvl-dots__d { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-surface); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--ink-500); transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), background 140ms var(--ease-out); } .kvl-dots__d:hover { border-color: var(--ink-500); color: var(--ink-900); } .kvl-dots__d.is-active { background: var(--fach-blue); border-color: var(--fach-blue); color: #fff; } @media (max-width: 980px) { .kvl-cv--split, .kvl-cv--flip, .kvl-cv--sticky { grid-template-columns: 1fr; } .kvl-cv--flip .kvl-cv__stage { order: 2; } .kvl-cv--sticky .kvl-cv__aside { position: static; } .kvl-bento { grid-template-columns: 1fr 1fr; } .kvl-bento__demo { grid-column: 1 / -1; grid-row: auto; } .kvl-tl__track { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .kvl__split { grid-template-columns: 1fr; } .kvl__nav { border-right: 0; border-bottom: 1px solid var(--line); } .kvl__steps { flex-direction: row; flex-wrap: wrap; gap: 6px; } .kvl__step { flex: 1 1 150px; } .kvl__meta { margin-left: 0; } .kvl-cv__facts { flex-wrap: wrap; gap: 16px 26px; } .kvl-bento, .kvl-cv__points--row { grid-template-columns: 1fr; } .kvl-cv__points--row { flex-direction: column; } .kvl-tl__track { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= Organisation (org) — „Von Fach zu Thema zu Datei". Demo im Stil der Klausurvorbereitung: links 3 Schritte (Fach · Thema · Dateien), rechts eine von 3 Mini-Seiten, nachgebaut aus fach.html · thema.html · dateien.html. Slideshow (Schritte + Nummern + Nutzen-Punkte schalten um). 10 Rahmen (.org-cv--*). ========================================================= */ .org-cv h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); } .org-cv__text .lab-lead { margin: 1.1rem 0 1.6rem; color: var(--ink-600); } .org-cv__stage { display: flex; flex-direction: column; align-items: center; margin-top: clamp(1.6rem, 1rem + 2vw, 2.8rem); } .org-cv__lead { max-width: 62ch; margin: 1.1rem auto 0; text-align: center; color: var(--ink-600); font-size: 1.05rem; line-height: 1.6; } .org-cv__cta { text-align: center; margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); } /* ---- Demo-Karte ---- */ .orgx { /* --oc trägt die Akzentfarbe der GERADE aktiven Seite durch die ganze Demo (Fortschrittsbalken, Schritt-Navi, fach-getönte Elemente) — wird von orgInit().show(idx) live gesetzt: Fach (Deutsch) = rose, Thema (Mathe) = blau, Dateien (kein einzelnes Fach) = schwarz. Der Ruhewert hier greift nur, bevor orgInit zum ersten Mal läuft. */ --oc: var(--ink-950); width: 100%; max-width: 860px; text-align: left; background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-xl); } .orgx--lg { max-width: 980px; } .orgx--xl { max-width: 1120px; } .orgx__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper); } .orgx__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .orgx__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-400); } /* Fortschrittsbalken der Slideshow (füllt sich über den Wechsel-Takt, startet mit jeder Folie neu — orgInit.armBar). */ .orgx__progress { height: 3px; background: var(--ink-100); } .orgx__progress i { display: block; height: 100%; width: 0; background: var(--oc); animation: orgProg 5200ms linear infinite; } @keyframes orgProg { from { width: 0; } to { width: 100%; } } .orgx__split { display: grid; grid-template-columns: 192px 1fr; } .orgx__nav { padding: clamp(16px, 2vw, 22px) 14px; border-right: 1px solid var(--line); background: var(--bg-canvas); } .orgx__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .orgx__step { display: flex; align-items: center; gap: 11px; padding: 9px 8px; border-radius: var(--radius-md); } .orgx__step-n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; color: var(--ink-400); background: var(--bg-surface); } .orgx__step-tx { min-width: 0; display: flex; flex-direction: column; } .orgx__step-l { font-size: 0.85rem; font-weight: 600; color: var(--ink-700); } .orgx__step-s { font-size: 0.7rem; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orgx__step[data-state="done"] .orgx__step-n { background: var(--oc); border-color: var(--oc); color: #fff; } .orgx__step[data-state="now"] .orgx__step-n { border-color: var(--oc); color: var(--oc); } .orgx__step[data-active] { background: color-mix(in srgb, var(--oc) 10%, transparent); } .orgx__step[data-active] .orgx__step-l { color: var(--ink-950); } .orgx__step[data-active] .orgx__step-s { color: var(--oc); } /* Feste Höhe → alle drei Seiten füllen dieselbe Box, kein Springen. Bemessen an der höchsten Seite (Thema): Inhalt max. ~472 px + 2×22 px Innenabstand + Puffer. Dateien-Seite hat dann etwas Leerraum unten. */ .orgx__main { padding: clamp(15px, 2vw, 22px); height: 528px; overflow: hidden; } .orgx-page { display: flex; flex-direction: column; animation: orgPageIn 300ms var(--ease-out); } @keyframes orgPageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .orgx-eyebrow { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); } .orgx-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.5rem); letter-spacing: -0.02em; } .orgx-meta { font-size: 0.8rem; color: var(--ink-500); } .orgx-sec-h { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-400); margin: 18px 0 9px; } .orgx-fhead { display: flex; align-items: center; gap: 13px; } .orgx-fhead__tx { display: flex; flex-direction: column; gap: 3px; } .orgx-avatar { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--oc); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .orgx-avatar svg { width: 20px; height: 20px; } .orgx-fhead--sm .orgx-meta { max-width: 44ch; line-height: 1.4; } /* Seite 1 — Fach (Karten angelehnt an .thema-card / .klausur-card in app/assets/css/style.css: Titel + Kurzbeschreibung + Fuß mit Haarlinie und Zählwerten; Klausur-Karte mit Themen-Chips, mono Datum und Noten-Box im Fuß, geschriebene Klausur gestrichelt). */ .orgx-tgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; } .orgx-tcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 13px 14px; } .orgx-tcard b { display: block; font-size: 0.84rem; letter-spacing: -0.01em; margin-bottom: 5px; } .orgx-tcard__d { margin: 0 0 10px; font-size: 0.71rem; line-height: 1.4; color: var(--ink-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .orgx-tcard__foot { margin-top: auto; padding-top: 9px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.64rem; color: var(--ink-400); } .orgx-tcard.is-on { border-color: var(--oc); background: color-mix(in srgb, var(--oc) 7%, transparent); } .orgx-tcard.is-on .orgx-tcard__foot { border-top-color: color-mix(in srgb, var(--oc) 22%, transparent); } .orgx-klist { display: flex; flex-direction: column; gap: 9px; } .orgx-kcard { position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 14px 16px; } .orgx-kcard__t { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.28; letter-spacing: -0.01em; } .orgx-kcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .orgx-kchips { display: flex; flex-wrap: wrap; gap: 6px; } .orgx-kchip { font-size: 0.66rem; font-weight: 600; color: var(--oc); background: color-mix(in srgb, var(--oc) 12%, transparent); padding: 3px 8px; border-radius: var(--radius-full); } .orgx-kcard__date { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-500); padding-top: 3px; } .orgx-kcard__foot { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .orgx-knote { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1; padding: 7px 11px; border-radius: var(--radius-md); } .orgx-knote--gelb { color: var(--gelb-ink, #8a6d10); background: var(--gelb-bg); } .orgx-knote--gruen { color: var(--gruen); background: var(--gruen-bg); } .orgx-kmeta { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; color: var(--ink-500); } .orgx-kcard--past { border-style: dashed; background: var(--bg-canvas); box-shadow: none; padding: 11px 16px; } .orgx-kcard--past .orgx-kcard__t { color: var(--ink-600); font-size: 0.88rem; } .orgx-kcard--past .orgx-kcard__date { color: var(--ink-400); } .orgx-kflag { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gruen); } .orgx-kflag svg { width: 11px; height: 11px; stroke-width: 3; } /* Seite 2 — Thema (Färbung wie in thema.html: getönte Karten-Kopfleiste in der Fach-Farbe, Fach-Pille mit Farbpunkt, Fach-farbene Icons). */ .orgx-crumb { font-size: 0.72rem; color: var(--ink-400); margin-bottom: 7px; } .orgx-crumb i { font-style: normal; margin: 0 5px; color: var(--ink-300); } .orgx-fpill { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; color: var(--oc); background: color-mix(in srgb, var(--oc) 12%, transparent); padding: 3px 10px; border-radius: var(--radius-full); margin-bottom: 7px; } .orgx-fpill i { width: 5px; height: 5px; border-radius: 50%; background: var(--oc); flex-shrink: 0; } .orgx-desc { font-size: 0.78rem; color: var(--ink-500); line-height: 1.38; margin: 3px 0 0; } .orgx-tabs { display: flex; gap: 14px; margin: 10px 0 10px; border-bottom: 1px solid var(--line); } .orgx-tab { font-size: 0.74rem; color: var(--ink-500); padding-bottom: 7px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 5px; } .orgx-tab i { font-style: normal; font-size: 0.63rem; font-weight: 700; color: var(--ink-400); background: var(--ink-100); border-radius: var(--radius-full); padding: 1px 6px; } .orgx-tab.is-on { color: var(--ink-950); font-weight: 600; border-bottom-color: var(--oc); } .orgx-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; } .orgx-group { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 0 12px 9px; overflow: hidden; } .orgx-group-h { display: flex; align-items: center; gap: 7px; margin: 0 -12px 8px; padding: 7px 12px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--oc); background: color-mix(in srgb, var(--oc) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--oc) 16%, transparent); } .orgx-group-h svg { width: 13px; height: 13px; color: var(--oc); } .orgx-group-h i { font-style: normal; margin-left: auto; font-size: 0.63rem; font-weight: 700; color: var(--oc); background: color-mix(in srgb, var(--oc) 16%, var(--bg-surface)); border-radius: var(--radius-full); padding: 1px 6px; } .orgx-row { display: flex; gap: 9px; padding: 5px 0; } .orgx-row + .orgx-row { border-top: 1px solid var(--line); } .orgx-row__ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-400); display: inline-flex; align-items: center; justify-content: center; } .orgx-row__ic svg { width: 12px; height: 12px; } .orgx-row__tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .orgx-row__t { font-size: 0.78rem; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .orgx-row__m { font-size: 0.68rem; color: var(--ink-400); } /* Seite 3 — Dateien */ .orgx-drop { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 13px 15px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: var(--bg-canvas); } .orgx-drop__ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--ink-950); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; } .orgx-drop__ic svg { width: 17px; height: 17px; } .orgx-drop__tx { display: flex; flex-direction: column; gap: 2px; } .orgx-drop__tx b { font-size: 0.82rem; } .orgx-drop__tx span { font-size: 0.72rem; color: var(--ink-500); } .orgx-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; } .orgx-filter { font-size: 0.72rem; font-weight: 600; color: var(--ink-600); border: 1px solid var(--line); border-radius: var(--radius-full); padding: 4px 11px; } .orgx-filter.is-on { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); } .orgx-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .orgx-fcard { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 13px 14px; display: flex; flex-direction: column; gap: 5px; } .orgx-fcard b { font-size: 0.82rem; letter-spacing: -0.01em; } .orgx-fcard p { font-size: 0.73rem; color: var(--ink-500); line-height: 1.4; margin: 0; } .orgx-fcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .orgx-fcard__chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; color: var(--t); background: color-mix(in srgb, var(--t) 12%, transparent); padding: 3px 9px; border-radius: var(--radius-full); } .orgx-fcard__chip i { width: 5px; height: 5px; border-radius: 50%; background: var(--t); } .orgx-fcard__m { flex-shrink: 0; font-size: 0.68rem; color: var(--ink-400); } /* ---- Nummern-Slideshow unter der Demo ---- */ .orgx-dots { display: flex; justify-content: center; gap: 8px; margin-top: clamp(1.2rem, 1rem + 1.5vw, 1.8rem); } .orgx-dots__d { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--bg-surface); font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: var(--ink-500); transition: border-color 140ms var(--ease-out), color 140ms var(--ease-out), background 140ms var(--ease-out); } .orgx-dots__d:hover { border-color: var(--ink-500); color: var(--ink-900); } .orgx-dots__d.is-active { background: var(--oc); border-color: var(--oc); color: #fff; } /* ---- Nutzen-Punkte (schalten die Slideshow mit) ---- */ .org-cv__points { list-style: none; margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .org-cv__points li { padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid transparent; transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); } .org-cv__points li[data-active] { border-color: var(--line); background: var(--bg-surface); box-shadow: var(--shadow-sm); } .org-cv__points b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; margin-bottom: 5px; } .org-cv__points span { font-size: 0.88rem; color: var(--ink-600); line-height: 1.55; } .org-cv__points--stack { display: flex; flex-direction: column; gap: 8px; margin: 0 0 1.6rem; } .org-cv__points--stack li { padding: 12px 14px; } .org-cv__points--cards li { border-color: var(--line); background: var(--bg-surface); padding: 18px; } .org-cv__points--zebra { display: flex; flex-direction: column; gap: 6px; } .org-cv__points--zebra li { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: baseline; padding: 16px; } .org-cv__points--zebra li:nth-child(even) { background: var(--bg-canvas); } .org-cv__points--zebra b { margin: 0; } /* ---- Rahmen ---- */ .org-cv--center .lab-head, .org-cv--window .lab-head, .org-cv--dark .lab-head, .org-cv--bento .lab-head, .org-cv--zebra .lab-head, .org-cv--cards .lab-head, .org-cv--editorial .lab-head { margin-inline: auto; } .org-cv--split, .org-cv--flip { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .org-cv--split .org-cv__stage, .org-cv--flip .org-cv__stage { margin-top: 0; } .org-cv--flip { grid-template-columns: 1.18fr 0.82fr; } .org-cv--sticky { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .org-cv--sticky .org-cv__aside { position: sticky; top: 96px; } .org-cv--sticky .org-cv__stage { margin-top: 0; } /* dark (org 6) — kein Eckschnitt, volle Fläche */ .sv-sec[data-org="6"] { background: var(--ink-950); border-radius: 0; } .sv-sec[data-org="6"]::before, .sv-sec[data-org="6"]::after { display: none; } .sv-sec[data-org="6"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-org="6"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-org="6"] h2 { color: var(--paper); } .sv-sec[data-org="6"] .lab-head p { color: rgba(255,255,255,0.7); } .org-cv--dark .org-cv__points b { color: #fff; } .org-cv--dark .org-cv__points span { color: rgba(255,255,255,0.65); } .org-cv--dark .org-cv__points li[data-active] { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); box-shadow: none; } /* bento (org 7) */ .org-cv--bento .lab-head { margin-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); } .org-bento { display: grid; grid-template-columns: 1.55fr 1fr; gap: 14px; align-items: stretch; } .org-bento__demo { grid-row: 1 / span 5; display: flex; flex-direction: column; align-items: center; } .org-bento__demo .orgx { max-width: 100%; } .org-bento__demo .orgx-dots { margin-top: 14px; } .org-bento__cell { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: border-color 160ms var(--ease-out); } .org-bento__cell[data-active] { border-color: var(--fach-rose); } .org-bento__cell b { font-family: var(--font-display); font-size: 1rem; letter-spacing: -0.02em; } .org-bento__cell span { font-size: 0.86rem; color: var(--ink-600); line-height: 1.5; } .org-bento__cell--cta { background: var(--ink-950); color: var(--paper); justify-content: center; gap: 12px; } .org-bento__cell--cta .btn { align-self: flex-start; } @media (max-width: 980px) { .org-cv--split, .org-cv--flip, .org-cv--sticky { grid-template-columns: 1fr; } .org-cv--flip .org-cv__stage { order: 2; } .org-cv--sticky .org-cv__aside { position: static; } .org-bento { grid-template-columns: 1fr; } .org-bento__demo { grid-row: auto; } .org-cv__points, .org-cv__points--zebra li { grid-template-columns: 1fr; } } /* ---- Erklär-Karten-Runde (org 11–15): kompakte App-Icon-Leiste ---- */ .orgx--rail .orgx__split { grid-template-columns: 54px 1fr; } .orgx__rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; border-right: 1px solid var(--line); background: var(--bg-canvas); } .orgx__rail-brand { width: 26px; height: 26px; border-radius: 8px; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .orgx__rail-brand svg { width: 15px; height: 15px; } .orgx__rail-nav { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; } .orgx__rail-i { width: 32px; height: 32px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400); transition: background 240ms var(--ease-out), color 240ms var(--ease-out); } .orgx__rail-i svg { width: 16px; height: 16px; } .orgx__rail-i[data-org-nav] { color: var(--ink-500); } .orgx__rail-i.is-active { background: var(--ink-950); color: var(--paper); } .orgx__rail-div { width: 18px; height: 1px; background: var(--line); margin: 5px 0; } .orgx__rail-av { margin-top: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ink-900); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; } /* Erklär-Karten (Slideshow-Umschalter) — weicher Wechsel beim Aktiv- werden: Rahmen/Schatten/Icon animieren, aktive Karte hebt leicht an. */ .org-cv__switch { display: flex; flex-direction: column; gap: 10px; margin: 1.4rem 0 1.6rem; } .org-cv__scard { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); transition: border-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out), transform 260ms var(--ease-out), background 260ms var(--ease-out); } .org-cv__scard:hover { border-color: var(--line-strong); } .org-cv__scard[data-active] { box-shadow: var(--shadow-md); transform: translateY(-3px); } .org-cv__scard-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-600); display: inline-flex; align-items: center; justify-content: center; transition: background 260ms var(--ease-out), color 260ms var(--ease-out), transform 260ms var(--ease-out); } .org-cv__scard[data-active] .org-cv__scard-ic { color: #fff; transform: scale(1.06); } .org-cv__scard-ic svg { width: 17px; height: 17px; } .org-cv__scard-tx { min-width: 0; } .org-cv__scard-tx b { display: block; font-family: var(--font-display); font-size: 0.98rem; letter-spacing: -0.02em; margin-bottom: 3px; } .org-cv__scard-tx span { font-size: 0.85rem; color: var(--ink-600); line-height: 1.5; } .org-cv__scard-n { flex-shrink: 0; margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: var(--ink-300); } /* Jede Karte behält ihre eigene Fach-Farbe, unabhängig davon, welche Seite die Demo gerade zeigt: 0 Fach = Deutsch/rose, 1 Thema = Mathe/blau, 2 Dateien = kein einzelnes Fach → schwarz. */ .org-cv__scard[data-org-point="0"][data-active] { border-color: var(--fach-rose); box-shadow: 0 0 0 1px var(--fach-rose), var(--shadow-md); } .org-cv__scard[data-org-point="0"][data-active] .org-cv__scard-ic { background: var(--fach-rose); } .org-cv__scard[data-org-point="0"][data-active] .org-cv__scard-n { color: var(--fach-rose); } .org-cv__scard[data-org-point="1"][data-active] { border-color: var(--fach-blue); box-shadow: 0 0 0 1px var(--fach-blue), var(--shadow-md); } .org-cv__scard[data-org-point="1"][data-active] .org-cv__scard-ic { background: var(--fach-blue); } .org-cv__scard[data-org-point="1"][data-active] .org-cv__scard-n { color: var(--fach-blue); } .org-cv__scard[data-org-point="2"][data-active] { border-color: var(--ink-950); box-shadow: 0 0 0 1px var(--ink-950), var(--shadow-md); } .org-cv__scard[data-org-point="2"][data-active] .org-cv__scard-ic { background: var(--ink-950); } .org-cv__scard[data-org-point="2"][data-active] .org-cv__scard-n { color: var(--ink-950); } /* Rahmen 11 · Erklär-Spalte (final) — Kopf mittig, Karten-Reihe, Demo darunter zentriert (gestapelt wie KI-Chat / KV). */ .org-cv--ecol .lab-head { margin-inline: auto; } .org-cv--ecol .org-cv__switch--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: clamp(1.8rem, 1rem + 2vw, 2.8rem) auto 0; } .org-cv--ecol .org-cv__scard { flex-direction: column; gap: 10px; } .org-cv--ecol .org-cv__scard-n { position: absolute; top: 12px; right: 14px; margin: 0; } .org-cv--ecol .org-cv__scard { position: relative; } /* Rahmen 12–15 */ .org-cv--esplit, .org-cv--eflip { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .org-cv--eflip { grid-template-columns: 1.1fr 0.9fr; } .org-cv--esplit .org-cv__stage, .org-cv--eflip .org-cv__stage, .org-cv--esticky .org-cv__stage, .org-cv--ecards .org-cv__stage { margin-top: 0; } .org-cv--ecards .lab-head { margin-inline: auto; } .org-cv--ecards .org-cv__erow { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .org-cv--ecards .org-cv__switch { margin: 0 0 1.4rem; } .org-cv--esticky { display: grid; grid-template-columns: 320px 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .org-cv--esticky .org-cv__aside { position: sticky; top: 96px; } .sv-sec[data-org="15"] { background: var(--ink-950); border-radius: 0; } .sv-sec[data-org="15"]::before, .sv-sec[data-org="15"]::after { display: none; } .sv-sec[data-org="15"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-org="15"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-org="15"] h2, .org-cv--edark .org-cv__text h2 { color: var(--paper); } .org-cv--edark { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .org-cv--edark .org-cv__text .lab-lead { color: rgba(255,255,255,0.7); } .org-cv--edark .org-cv__stage { margin-top: 0; } .org-cv--edark .org-cv__scard { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); } .org-cv--edark .org-cv__scard-tx b { color: #fff; } .org-cv--edark .org-cv__scard-tx span { color: rgba(255,255,255,0.62); } .org-cv--edark .org-cv__scard-ic { background: rgba(255,255,255,0.08); color: #fff; } .org-cv--edark .org-cv__scard[data-active] { background: rgba(255,255,255,0.06); } .org-cv--edark .org-cv__scard[data-active] .org-cv__scard-ic { background: var(--fach-blue); } @media (max-width: 980px) { .org-cv--esplit, .org-cv--eflip, .org-cv--esticky, .org-cv--edark, .org-cv--ecards .org-cv__erow { grid-template-columns: 1fr; } .org-cv--eflip .org-cv__stage { order: 2; } .org-cv--esticky .org-cv__aside { position: static; } } @media (max-width: 640px) { .org-cv--ecol .org-cv__switch--row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .orgx__progress i { animation: none; width: 100%; } .orgx-page { animation: none; } .org-cv__scard, .org-cv__scard[data-active], .org-cv__scard-ic { transition: none; transform: none; } } @media (max-width: 720px) { .orgx__split { grid-template-columns: 1fr; } .orgx--rail .orgx__split { grid-template-columns: 1fr; } .orgx__nav { border-right: 0; border-bottom: 1px solid var(--line); } .orgx__rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; gap: 6px; } .orgx__rail-brand { margin-bottom: 0; } .orgx__rail-nav { flex-direction: row; width: auto; } .orgx__rail-div { width: 1px; height: 18px; margin: 0 4px; } .orgx__rail-av { margin: 0 0 0 auto; } .orgx__steps { flex-direction: row; gap: 6px; } .orgx__step { flex: 1; } .orgx__step-s { display: none; } .orgx-tgrid, .orgx-groups, .orgx-fgrid { grid-template-columns: 1fr; } .org-cv__points { grid-template-columns: 1fr; gap: 12px; } } /* ---------- Vergleich — v1 + 9 Varianten auf Karten-Basis ---------- */ .cmp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 0.6rem + 2vw, 2rem); align-items: start; } .cmp-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-2xl); padding: clamp(22px, 2.6vw, 34px); background: var(--bg-surface); } .cmp-card--a { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); box-shadow: var(--shadow-xl); } .cmp-card h3 { display: flex; align-items: center; gap: 9px; font-size: 1.22rem; margin-bottom: 18px; } .cmp-card--a h3 { color: var(--paper); } .cmp-card__spark { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; background: rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; } .cmp-card__spark svg { width: 13px; height: 13px; color: #8fe3b4; } .cmp-card__tag { display: inline-flex; align-items: center; gap: 6px; position: absolute; top: -12px; left: 26px; background: var(--gruen); color: #06331f; font-size: 0.68rem; font-weight: 700; padding: 4px 11px; border-radius: var(--radius-full); } .cmp-card__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .cmp-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; } .cmp-card li { display: flex; gap: 11px; } .cmp-card li.is-lose { opacity: 0.72; } .cmp-i { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; } .cmp-i svg { width: 12px; height: 12px; } .cmp-i--y { background: var(--gruen-bg); color: var(--gruen); } .cmp-i--n { background: var(--ink-100); color: var(--ink-400); } .cmp-card--a .cmp-i--y { background: rgba(143,227,180,0.2); color: #8fe3b4; } .cmp-card--a .cmp-i--n { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); } .cmp-card li b { display: block; font-size: 0.9rem; } .cmp-card li span { font-size: 0.83rem; opacity: 0.82; } .cmp-honest { max-width: 62ch; margin: 22px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-500); border-left: 3px solid var(--line-strong); padding-left: 16px; } /* v2 · Empfohlen — Lesify-Karte hervorgehoben */ .sv--cmp2 .cmp-cards--feat { align-items: center; } .sv--cmp2 .cmp-card--big { transform: scale(1.04); z-index: 1; } /* v3 · VS */ .sv--cmp3 .cmp-cards--vs { grid-template-columns: 1fr auto 1fr; align-items: center; } .sv--cmp3 .cmp-vs { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink-300); } /* v4 · Aligned read-across */ .sv--cmp4 .cmp-aligned { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; } .sv--cmp4 .cmp-aligned__head, .sv--cmp4 .cmp-aligned__row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; } .sv--cmp4 .cmp-aligned__head { background: var(--ink-950); color: var(--paper); font-weight: 700; font-size: 0.85rem; } .sv--cmp4 .cmp-aligned__head span, .sv--cmp4 .cmp-aligned__row span { padding: 13px 16px; display: flex; align-items: center; gap: 8px; } .sv--cmp4 .cmp-aligned__head .is-a svg { width: 13px; height: 13px; color: #8fe3b4; } .sv--cmp4 .cmp-aligned__row { border-top: 1px solid var(--line); font-size: 0.85rem; } .sv--cmp4 .cmp-aligned__row:nth-child(even) { background: var(--bg-canvas); } .sv--cmp4 .cmp-aligned__k { font-weight: 600; } .sv--cmp4 .cmp-aligned__a { background: var(--ink-50); } .sv--cmp4 .cmp-aligned__a.is-win, .sv--cmp4 .cmp-aligned__b.is-win { font-weight: 600; color: var(--ink-950); } .sv--cmp4 .cmp-aligned .cmp-i { margin: 0; } /* v5 · Dark */ .sv-sec[data-cmp="5"] { background: var(--ink-950); } .sv-sec[data-cmp="5"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-cmp="5"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-cmp="5"] h2 { color: var(--paper); } .sv-sec[data-cmp="5"] .lab-head p { color: rgba(255,255,255,0.7); } .sv--cmp5 .cmp-card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); color: var(--paper); } .sv--cmp5 .cmp-card--a { background: var(--paper); color: var(--ink-950); border-color: var(--paper); } .sv--cmp5 .cmp-card--a h3 { color: var(--ink-950); } .sv--cmp5 .cmp-card--a .cmp-card__spark { background: var(--ink-100); } .sv--cmp5 .cmp-card--a .cmp-card__spark svg { color: var(--gruen); } .sv--cmp5 .cmp-card--a .cmp-i--y { background: var(--gruen-bg); color: var(--gruen); } .sv--cmp5 .cmp-card--a .cmp-i--n { background: var(--ink-100); color: var(--ink-400); } .sv--cmp5 .cmp-honest { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.2); } /* v6 · Lead-in (gestapelt) */ .sv--cmp6 .cmp-lead-in { display: flex; flex-direction: column; gap: 18px; } .sv--cmp6 .cmp-card--wide { width: 100%; } .sv--cmp6 .cmp-card--wide ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; } .sv--cmp6 .cmp-card--muted { opacity: 0.75; background: var(--bg-canvas); } .sv--cmp6 .cmp-card--muted ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 28px; } /* v7 · Score */ .sv--cmp7 .cmp-score { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-bottom: 26px; } .sv--cmp7 .cmp-score b { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; letter-spacing: -0.04em; } .sv--cmp7 .cmp-score b.is-b { color: var(--ink-300); } .sv--cmp7 .cmp-score span { font-size: 1.6rem; color: var(--ink-300); } .sv--cmp7 .cmp-score em { font-style: normal; font-size: 0.85rem; color: var(--ink-500); margin-left: 8px; } /* v8 · Pills */ .sv--cmp8 .cmp-cards--pill .cmp-card li { flex-direction: column; gap: 5px; } .sv--cmp8 .cmp-pill { display: inline-block; align-self: flex-start; font-size: 0.82rem; padding: 4px 10px; border-radius: var(--radius-full); background: var(--ink-100); color: var(--ink-600); } .sv--cmp8 .cmp-card--a .cmp-pill { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); } .sv--cmp8 .cmp-pill.is-win { background: var(--gruen-bg); color: var(--gruen); font-weight: 600; } .sv--cmp8 .cmp-card--a .cmp-pill.is-win { background: rgba(143,227,180,0.2); color: #8fe3b4; } /* v9 · Callout */ .sv--cmp9 .cmp-callout { display: flex; gap: 14px; margin-top: 24px; padding: 20px 22px; border-radius: var(--radius-xl); background: var(--gelb-bg, #fff7e0); border: 1px solid var(--gelb); } .sv--cmp9 .cmp-callout span { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--gelb); color: #5a3d00; display: flex; align-items: center; justify-content: center; } .sv--cmp9 .cmp-callout span svg { width: 13px; height: 13px; } .sv--cmp9 .cmp-callout p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--ink-700); } /* v10 · Compact */ .sv--cmp10 .cmp-cards--compact { gap: 14px; } .sv--cmp10 .cmp-cards--compact .cmp-card { padding: 20px; border-radius: var(--radius-xl); } .sv--cmp10 .cmp-cards--compact .cmp-card ul { gap: 9px; } .sv--cmp10 .cmp-cards--compact .cmp-card li span { display: none; } /* ---------- Fächer & Klassenstufen — 5 Varianten, opake Karten + SVG ---------- */ .subj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 24px 0; } .subj-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px; border-radius: var(--radius-xl); background: var(--t, var(--ink-100)); color: var(--ink-950); border: 0; overflow: hidden; } .subj-card__ico { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; } .subj-card__ico svg { width: 22px; height: 22px; } .subj-card b { font-size: 1.02rem; letter-spacing: -0.01em; } .subj-card__sub { font-size: 0.76rem; color: rgba(16,18,20,0.55); } .subj-card--custom { background: var(--bg-surface); border: 1px dashed var(--line-strong); color: var(--ink-600); } .subj-card--custom .subj-card__ico { background: var(--ink-100); color: var(--ink-700); } .subj-card__hint { font-size: 0.76rem; color: var(--ink-400); } .subj-meta { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 22px; } .subj-meta b { display: block; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-400); margin-bottom: 3px; } .subj-meta span { font-size: 0.9rem; } .subj-custom { margin-top: 18px; font-size: 0.9rem; line-height: 1.6; color: var(--ink-600); border-left: 3px solid var(--ink-950); padding-left: 16px; } /* v2 · Big */ .sv--subj2 .subj-grid--big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .sv--subj2 .subj-card--big { padding: 28px; gap: 18px; } .sv--subj2 .subj-card--big .subj-card__ico { width: 52px; height: 52px; } .sv--subj2 .subj-card--big .subj-card__ico svg { width: 28px; height: 28px; } .sv--subj2 .subj-card--big b { font-size: 1.2rem; } /* v3 · Bento */ .sv--subj3 .subj-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 14px; } .sv--subj3 .subj-card--hero { grid-column: span 2; grid-row: span 2; justify-content: center; } .sv--subj3 .subj-card--hero .subj-card__ico { width: 60px; height: 60px; } .sv--subj3 .subj-card--hero .subj-card__ico svg { width: 34px; height: 34px; } .sv--subj3 .subj-card--hero b { font-size: 1.5rem; } .sv--subj3 .subj-bento .subj-card { padding: 16px; gap: 10px; } /* v4 · Scroll */ .sv--subj4 .subj-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 200px; gap: 14px; overflow-x: auto; padding: 4px 0 14px; } .sv--subj4 .subj-card--tall { height: 240px; justify-content: space-between; padding: 22px; } .sv--subj4 .subj-card--tall .subj-card__ico { width: 48px; height: 48px; } .sv--subj4 .subj-card--tall b { font-size: 1.2rem; } .sv--subj4 .subj-scroll .subj-card--custom { height: 240px; } /* v5 · Split */ .sv--subj5 .subj-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .sv--subj5 .subj-split__grid { margin: 0; } /* ---------- Preise — v1 + 5 Redesigns, Seats-Switcher, Bestseller-Highlight ---------- */ .sv--price4 .price-ctrl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; } .sv--price4 .price-toggle { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: var(--radius-full); background: var(--ink-100); } .sv--price4 .price-toggle button { padding: 8px 15px; border-radius: var(--radius-full); font-size: 0.83rem; font-weight: 600; color: var(--ink-600); white-space: nowrap; } .sv--price4 .price-toggle button.is-on { background: var(--bg-surface); color: var(--ink-950); box-shadow: var(--shadow-sm); } .sv--price4 .price-toggle button i { font-style: normal; font-size: 0.7rem; color: var(--gruen); } /* Familien-Paket-Auswahl: Stepper (Kinderzahl 1–4) statt Segment-Reihe. Wird bei >1 Kind grün eingefärbt und blendet die Sitz-Punkte ein. */ .sv--price4 .price-seats { display: inline-flex; align-items: center; gap: 12px; padding: 5px 8px 5px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--bg-surface); transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); } .sv--price4 .price-seats.is-family { border-color: var(--gruen); background: var(--gruen-bg); } .sv--price4 .price-seats__cap { font-size: 0.78rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; } .sv--price4 .price-seats.is-family .price-seats__cap { color: var(--gruen); } .sv--price4 .price-seats__step { display: inline-flex; align-items: center; gap: 8px; } .sv--price4 .price-seats__btn { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg-surface); color: var(--ink-800); transition: border-color 140ms, color 140ms, background 140ms, opacity 140ms; } .sv--price4 .price-seats__btn svg { width: 15px; height: 15px; } .sv--price4 .price-seats__btn:hover:not(:disabled) { border-color: var(--ink-950); color: var(--ink-950); } .sv--price4 .price-seats__btn:disabled { opacity: 0.3; cursor: not-allowed; } .sv--price4 .price-seats__val { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 66px; } .sv--price4 .price-seats__val b { font-family: var(--font-display); font-weight: 700; font-size: 0.92rem; letter-spacing: -0.01em; color: var(--ink-950); white-space: nowrap; } .sv--price4 .price-seats__dots { display: inline-flex; gap: 3px; } .sv--price4 .price-seats__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-200); } .sv--price4 .price-seats__dots i.is-on { background: var(--ink-800); } .sv--price4 .price-seats.is-family .price-seats__dots i.is-on { background: var(--gruen); } .sv--price4 .price-seatnote { min-height: 1.2em; margin: 6px 0 clamp(1.4rem, 1rem + 2vw, 2.4rem); font-size: 0.82rem; color: var(--ink-500); font-weight: 500; } .sv--price4 .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.4rem + 2vw, 1.6rem); align-items: start; } .sv--price4 .price-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); padding: clamp(22px, 2.6vw, 32px); } .sv--price4 .price-card.is-feat { border-color: var(--ink-950); border-width: 2px; box-shadow: var(--shadow-xl); background: linear-gradient(180deg, var(--ink-50), var(--bg-surface)); } .sv--price4 .price-card__tag { position: absolute; top: -13px; left: 24px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink-950); color: var(--paper); font-size: 0.68rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); } .sv--price4 .price-card__dot { width: 6px; height: 6px; border-radius: 50%; background: #8fe3b4; } .sv--price4 .price-card h3 { font-size: 1.25rem; } .sv--price4 .price-card.is-feat h3 { display: flex; align-items: center; } .sv--price4 .price-card__desc { font-size: 0.84rem; color: var(--ink-500); margin: 4px 0 16px; } .sv--price4 .price-amt { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .sv--price4 .price-amt del { color: var(--ink-300); font-size: 0.9rem; } .sv--price4 .price-amt b { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; letter-spacing: -0.03em; } .sv--price4 .price-amt span { font-size: 0.8rem; color: var(--ink-500); } .sv--price4 .price-feats { list-style: none; padding: 0; margin: 18px 0 20px; display: flex; flex-direction: column; gap: 10px; } .sv--price4 .price-feats li { display: flex; gap: 9px; font-size: 0.85rem; } .sv--price4 .price-feats svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--gruen); } /* v2 · Raised */ .sv--price2 .price-grid--raise .price-card.is-feat { transform: translateY(-18px); } .sv--price2 .price-card.is-feat::before { content: ""; position: absolute; inset: -2px -2px auto; height: 5px; border-radius: var(--radius-2xl) var(--radius-2xl) 0 0; background: linear-gradient(90deg, var(--fach-blue), var(--fach-teal)); } /* v3 · Spotlight */ .sv--price3 .price-grid--spot { grid-template-columns: 0.9fr 1.2fr 0.9fr; align-items: center; } .sv--price3 .price-card--spot { transform: scale(1.06); z-index: 1; box-shadow: var(--shadow-xl); } .sv--price3 .price-card--spot .price-amt b { font-size: 2.6rem; } /* v4 · Dark-Feat */ .sv--price4 .price-grid--darkfeat .price-card.is-feat { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); overflow: hidden; } .sv--price4 .price-grid--darkfeat .price-card.is-feat h3 { color: var(--paper); } .sv--price4 .price-grid--darkfeat .price-card.is-feat .price-card__desc { color: rgba(255,255,255,0.6); } .sv--price4 .price-grid--darkfeat .price-card.is-feat .price-amt span { color: rgba(255,255,255,0.6); } .sv--price4 .price-grid--darkfeat .price-card.is-feat .price-amt del { color: rgba(255,255,255,0.45); } /* Bestseller: 45°-Band über der oberen rechten Ecke, in Weiß (hebt sich klar von der schwarzen Karte ab). Wird vom overflow:hidden der Karte zum Eck-Banner beschnitten. */ .sv--price4 .price-grid--darkfeat .price-card__tag { top: 20px; right: -56px; left: auto; width: 190px; justify-content: center; gap: 6px; padding: 7px 0; border-radius: 0; background: var(--paper); color: var(--ink-950); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(45deg); transform-origin: center; box-shadow: 0 8px 20px -8px rgba(16, 18, 20, 0.55); z-index: 3; } .sv--price4 .price-grid--darkfeat .price-card__dot { background: var(--ink-950); } /* Premium-Button: auf der schwarzen Karte war btn-primary (schwarz) unsichtbar — hier als heller Button. */ .sv--price4 .price-grid--darkfeat .price-card.is-feat .btn { background: var(--paper); color: var(--ink-950); border-color: var(--paper); } .sv--price4 .price-grid--darkfeat .price-card.is-feat .btn:hover { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24); } /* v5 · Glow */ .sv--price5 .price-grid--glow .price-card { transition: opacity 200ms var(--ease-out); } .sv--price5 .price-grid--glow .price-card:not(.is-feat) { opacity: 0.82; } .sv--price5 .price-grid--glow .price-card.is-feat { box-shadow: 0 0 0 4px rgba(120,150,200,0.18), var(--shadow-xl); } /* v6 · Strip */ .sv--price6 .price-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; } .sv--price6 .price-strip__cell { position: relative; padding: 28px 24px; border-left: 1px solid var(--line); text-align: center; } .sv--price6 .price-strip__cell:first-child { border-left: 0; } .sv--price6 .price-strip__cell.is-feat { background: var(--ink-950); color: var(--paper); } .sv--price6 .price-strip__cell b { font-size: 1.15rem; } .sv--price6 .price-strip__desc { display: block; font-size: 0.8rem; color: var(--ink-500); margin: 4px 0 10px; } .sv--price6 .price-strip__cell.is-feat .price-strip__desc { color: rgba(255,255,255,0.6); } .sv--price6 .price-strip .price-amt { justify-content: center; margin-bottom: 14px; } .sv--price6 .price-strip__cell.is-feat .price-amt span { color: rgba(255,255,255,0.6); } .sv--price6 .price-strip__cell.is-feat .price-card__tag { left: 50%; transform: translateX(-50%); background: var(--paper); color: var(--ink-950); } /* ---------- Testimonials — Video-Wall im Hintergrund ---------- */ .test-vid { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); padding: 12px; overflow: hidden; background-color: var(--t, var(--ink-400)); background-image: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(16,18,20,0.62)); color: #fff; } .test-vid__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--ink-950); display: flex; align-items: center; justify-content: center; } .test-vid__play svg { width: 16px; height: 16px; margin-left: 2px; } .test-vid__name { position: relative; font-size: 0.74rem; font-weight: 600; } .test-vid__q { position: relative; font-size: 0.82rem; line-height: 1.4; font-weight: 500; margin-bottom: 6px; text-shadow: 0 1px 6px rgba(0,0,0,0.3); } .test-wall { position: absolute; inset: -10% -2% -10% -2%; z-index: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; opacity: 0.5; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 30%, #000 90%); mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, transparent 30%, #000 90%); } .test-wall__col { display: flex; flex-direction: column; gap: 16px; animation: testDriftY 32s linear infinite; } .test-wall__col:nth-child(even) { animation-duration: 40s; animation-direction: reverse; } @keyframes testDriftY { to { transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce) { .test-wall__col { animation: none; } } .test-hero { position: relative; overflow: hidden; padding-block: clamp(1rem, 4vw, 3rem); } .test-hero__in { position: relative; z-index: 1; text-align: center; } .test-stat { display: inline-flex; flex-direction: column; margin-top: 8px; } .test-stat b { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; } .test-stat span { font-size: 0.85rem; color: var(--ink-500); } .test-hero__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 760px; margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0; } .test-card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-md); padding: 22px 24px; text-align: left; } .test-card blockquote { font-size: 0.95rem; line-height: 1.6; margin: 0 0 16px; } .test-card figcaption { display: flex; align-items: center; gap: 11px; } .test-av { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-950); color: var(--paper); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .test-card figcaption b { display: block; font-size: 0.86rem; } .test-card figcaption em { font-style: normal; font-size: 0.78rem; color: var(--ink-500); } /* v2 · Split + Phone */ .sv--test2 .test-split { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .sv--test2 .test-split__cards { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .sv--test2 .test-phone { justify-self: center; width: 240px; border: 8px solid var(--ink-950); border-radius: 36px; overflow: hidden; box-shadow: var(--shadow-xl); } .sv--test2 .test-phone__scr .test-vid { aspect-ratio: 9 / 18; border-radius: 0; } /* v3 · Wall grid */ .sv--test3 .test-grid3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .sv--test3 .test-vid--tile { aspect-ratio: 3 / 4; } /* v4 · Marquee row */ .sv--test4 .test-mrow { overflow: hidden; margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .sv--test4 .test-mrow__track { display: flex; gap: 14px; width: max-content; animation: labMarqueeX 40s linear infinite; } .sv--test4 .test-vid--row { width: 150px; flex-shrink: 0; } @keyframes labMarqueeX { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .sv--test4 .test-mrow__track { animation: none; } } .sv--test4 .test-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } /* v5 · Dark */ .sv-sec[data-test="5"] { background: var(--ink-950); } .sv-sec[data-test="5"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-test="5"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-test="5"] h2 { color: var(--paper); } .sv--test5 .test-dark { position: relative; overflow: hidden; } .sv--test5 .test-wall { opacity: 0.35; } .sv--test5 .test-dark__in { position: relative; z-index: 1; text-align: center; } .sv--test5 .test-bignum b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 2rem + 6vw, 5.5rem); letter-spacing: -0.04em; color: var(--paper); } .sv--test5 .test-bignum span { color: rgba(255,255,255,0.7); } .sv--test5 .test-dark__q { max-width: 520px; margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) auto 0; } /* v6 · Thumbs */ .sv--test6 .test-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .sv--test6 .test-thumb { display: flex; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 18px; } .sv--test6 .test-vid--thumb { width: 96px; flex-shrink: 0; } .sv--test6 .test-thumb blockquote { font-size: 0.88rem; line-height: 1.55; margin: 0 0 10px; } .sv--test6 .test-thumb figcaption { font-size: 0.78rem; color: var(--ink-500); } /* v7 · Spotlight */ .sv--test7 .test-spot { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .sv--test7 .test-vid--big { aspect-ratio: 16 / 10; } .sv--test7 .test-spot__strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; } .sv--test7 .test-vid--sm { aspect-ratio: 1; } .sv--test7 .test-spot__q blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 0.9rem + 1.4vw, 1.7rem); line-height: 1.4; margin: 8px 0 12px; } .sv--test7 .test-spot__q cite { font-style: normal; font-size: 0.85rem; color: var(--ink-500); } /* v8 · Bento */ .sv--test8 .test-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; } .sv--test8 .test-bento__q { grid-row: span 1; } .sv--test8 .test-bento .test-vid { aspect-ratio: auto; } /* v9 · Masonry */ .sv--test9 .test-masonry { columns: 4; column-gap: 14px; } .sv--test9 .test-vid--mason { break-inside: avoid; margin-bottom: 14px; aspect-ratio: 3 / 4; } .sv--test9 .test-vid--mason:nth-child(3n) { aspect-ratio: 3 / 5; } /* v10 · Circles */ .sv--test10 .test-circ { text-align: center; } .sv--test10 .test-circ__row { display: flex; align-items: center; justify-content: center; gap: -6px; margin: 4px 0 22px; } .sv--test10 .test-circ__av { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--bg-canvas); margin-left: -12px; background: var(--t); color: #fff; display: flex; align-items: center; justify-content: center; } .sv--test10 .test-circ__av:first-child { margin-left: 0; } .sv--test10 .test-circ__av svg { width: 16px; height: 16px; margin-left: 2px; } .sv--test10 .test-circ__more { margin-left: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-500); } .sv--test10 .test-circ__q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem); line-height: 1.4; margin: 0 0 12px; } .sv--test10 .test-circ cite { font-style: normal; font-size: 0.85rem; color: var(--ink-500); } /* ---------- FAQ ---------- */ .faq-item { border-bottom: 1px solid var(--line); } .faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 2px; font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary > span:not(.faq-plus) { font-family: var(--font-mono); font-weight: 700; color: var(--ink-300); font-size: 0.85rem; margin-right: 6px; } .faq-item > div { padding: 0 2px 20px; font-size: 0.92rem; line-height: 1.6; color: var(--ink-600); max-width: 62ch; } .faq-plus { position: relative; width: 14px; height: 14px; flex-shrink: 0; } .faq-plus::before, .faq-plus::after { content: ''; position: absolute; background: var(--ink-500); transition: transform 200ms var(--ease-out); } .faq-plus::before { top: 6px; left: 0; right: 0; height: 2px; } .faq-plus::after { left: 6px; top: 0; bottom: 0; width: 2px; } .faq-item[open] .faq-plus::after { transform: scaleY(0); } .faq-2col { columns: 2; column-gap: 40px; } .faq-2col .faq-item { break-inside: avoid; } .faq-index { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .faq-item--plus > summary { font-size: 1.05rem; } .faq-item--card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); margin-bottom: 10px; } .faq-item--card > summary { padding: 16px 18px; } .faq-item--card > div { padding: 0 18px 18px; } .sv--faq6 .faq-dark { background: var(--ink-950); border-radius: var(--radius-2xl); padding: clamp(20px, 3vw, 40px); } .sv--faq6 .faq-dark .faq-item { border-color: rgba(255,255,255,0.14); } .sv--faq6 .faq-dark .faq-item > summary { color: var(--paper); } .sv--faq6 .faq-dark .faq-item > div { color: rgba(255,255,255,0.66); } .faq-num .faq-item > summary span { color: var(--ink-300); } .faq-centered { text-align: center; } .faq-centered .faq-item > summary { justify-content: center; } .faq-centered .faq-item > div { max-width: none; margin-inline: auto; } .faq-ask { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .faq-ask__cta { margin-top: 16px; font-size: 0.92rem; color: var(--ink-600); } .faq-ask__cta a { text-decoration: underline; text-underline-offset: 3px; } /* v1 · Bold — kräftige nummerierte Karten */ .faq-bold .lab-head { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); } .faq-bold__list { display: flex; flex-direction: column; gap: 12px; } .faq-bcard { border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--bg-surface); overflow: hidden; transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); } .faq-bcard[open] { border-color: var(--ink-950); box-shadow: var(--shadow-md); } .faq-bcard > summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; } .faq-bcard > summary::-webkit-details-marker { display: none; } .faq-bcard__n { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: 0.9rem; color: var(--ink-300); } .faq-bcard[open] .faq-bcard__n { color: var(--ink-950); } .faq-bcard__q { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem); letter-spacing: -0.01em; } .faq-bcard__tog { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-100); } .faq-bcard__tog::before, .faq-bcard__tog::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--ink-700); transform: translate(-50%, -50%); transition: transform 200ms var(--ease-out); } .faq-bcard__tog::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-bcard[open] .faq-bcard__tog { background: var(--ink-950); } .faq-bcard[open] .faq-bcard__tog::before, .faq-bcard[open] .faq-bcard__tog::after { background: var(--paper); } .faq-bcard[open] .faq-bcard__tog::after { transform: translate(-50%, -50%) rotate(0); } .faq-bcard__a { padding: 0 22px 22px 62px; font-size: 0.94rem; line-height: 1.65; color: var(--ink-600); } .faq-bold__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; padding: 22px; border-radius: var(--radius-xl); background: var(--bg-canvas); border: 1px solid var(--line); } .faq-bold__foot b { font-size: 1rem; } /* ---------- Abschluss-CTA ---------- */ .sv--cta1 .cta-band, .sv--cta7 .cta-mesh { position: relative; border-radius: var(--radius-2xl); background: var(--ink-950); color: var(--paper); padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem); text-align: center; overflow: hidden; isolation: isolate; } .sv--cta1 .cta-band .eyebrow, .sv--cta1 .cta-band h2 { color: var(--paper); } .sv--cta1 .cta-band h2, .sv--cta3 h2, .sv--cta5 h2, .sv--cta7 h2, .sv--cta10 h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); max-width: 20ch; margin-inline: auto; } .sv--cta1 .cta-band p { margin: 1.1rem auto 0; max-width: 46ch; color: rgba(255,255,255,0.7); } .sv--cta1 .cta-band .lab-cta, .sv .cta-mesh__in .lab-cta { justify-content: center; margin-top: 1.8rem; } .sv--cta1 .cta-band small { display: block; margin-top: 1.2rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); } .sv--cta2 .cta-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; } .sv--cta2 .cta-split h2 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); margin-top: 0.5rem; } .sv--cta2 .cta-split p { margin-top: 0.9rem; color: var(--ink-600); } .sv--cta2 .cta-split__act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .sv--cta2 .cta-split__act small { font-size: 0.78rem; color: var(--ink-400); } .sv-sec[data-cta="3"] { background: var(--ink-950); } .sv--cta3, .sv--cta5, .sv--cta10 { text-align: center; } .sv--cta3.cta-bleed, .sv--cta3 .cta-bleed { color: var(--paper); } .sv-sec[data-cta="3"] h2 { color: var(--paper); } .sv-sec[data-cta="3"] p { color: rgba(255,255,255,0.7); margin: 1.1rem auto 0; max-width: 46ch; } .sv-sec[data-cta="3"] .lab-cta { justify-content: center; margin-top: 1.8rem; } .sv-sec[data-cta="3"] small { display: block; margin-top: 1.2rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); } .sv--cta4.cta-min, .sv--cta4 .cta-min { text-align: center; } .sv--cta4 .cta-min .lab-cta { justify-content: center; margin-top: 1.6rem; } .sv--cta5 .cta-big h2 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); letter-spacing: -0.04em; } .sv--cta5 .cta-big p { margin: 1.2rem auto 0; max-width: 42ch; color: var(--ink-600); } .sv--cta5 .cta-big .lab-cta { justify-content: center; margin-top: 1.8rem; } .sv--cta6 .cta-box { border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); box-shadow: var(--shadow-lg); padding: clamp(2.4rem, 1.6rem + 4vw, 4rem); text-align: center; } .sv--cta6 .cta-box p { margin: 1rem auto 0; max-width: 46ch; color: var(--ink-600); } .sv--cta6 .cta-box .lab-cta { justify-content: center; margin-top: 1.6rem; } .sv--cta6 .cta-box small { display: block; margin-top: 1rem; font-size: 0.78rem; color: var(--ink-400); } .sv--cta7 .cta-mesh { background: var(--ink-900); } .sv--cta7 .cta-mesh__m1, .sv--cta7 .cta-mesh__m2 { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); z-index: -1; } .sv--cta7 .cta-mesh__m1 { background: #2a3a48; top: -20%; left: 10%; } .sv--cta7 .cta-mesh__m2 { background: #33454f; bottom: -30%; right: 5%; } .sv--cta7 .cta-mesh__in { color: var(--paper); } .sv--cta7 .cta-mesh__in h2 { color: var(--paper); } .sv--cta7 .cta-mesh__in p { margin: 1.1rem auto 0; max-width: 46ch; color: rgba(255,255,255,0.72); } .sv--cta8 .cta-stack { text-align: center; } .sv--cta8 .cta-stack .btn { margin-top: 10px; } .sv--cta8 .cta-stack p { margin: 1rem 0; color: var(--ink-600); } .sv--cta8 .cta-stack small { display: block; margin-top: 12px; font-size: 0.78rem; color: var(--ink-400); } .sv--cta9 .cta-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: clamp(20px, 2.4vw, 32px); flex-wrap: wrap; } .sv--cta9 .cta-strip b { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; display: block; } .sv--cta9 .cta-strip span { font-size: 0.9rem; color: var(--ink-600); } .sv--cta10 .cta-badge__b { display: inline-block; background: var(--gruen-bg); color: var(--gruen); font-size: 0.8rem; font-weight: 700; padding: 5px 12px; border-radius: var(--radius-full); margin-bottom: 14px; } .sv--cta10 .cta-badge p { margin: 1.1rem auto 0; max-width: 42ch; color: var(--ink-600); } .sv--cta10 .cta-badge .lab-cta { justify-content: center; margin-top: 1.6rem; } /* ---------- Landing-Lab responsive ---------- */ @media (max-width: 960px) { .sv--kv3 .kv-zig__row, .sv--kv3 .kv-zig__row:nth-child(even) { grid-template-columns: 1fr; text-align: left; } .sv--kv3 .kv-zig__row:nth-child(even) .kv-zig__art { order: 0; } .sv--cmp3 .cmp-cards--vs, .sv--cmp6 .cmp-lead-in, .sv--subj5 .subj-split, .sv--test2 .test-split, .sv--test7 .test-spot, .faq-index, .faq-ask, .sv--cta2 .cta-split { grid-template-columns: 1fr; } .sv--cmp3 .cmp-vs { display: none; } .cmp-cards, .sv--cmp2 .cmp-cards--feat, .sv--kv2 .kv-grid6, .price-grid, .sv--price3 .price-grid--spot, .sv--price6 .price-strip, .test-hero__cards, .sv--test3 .test-grid3, .sv--test4 .test-grid2, .sv--test6 .test-grid2, .sv--test8 .test-bento { grid-template-columns: 1fr 1fr; } .sv--cmp2 .cmp-card--big, .sv--price3 .price-card--spot { transform: none; } .sv--test9 .test-masonry { columns: 2; } .sv--subj3 .subj-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; } .sv--subj3 .subj-card--hero { grid-column: span 2; grid-row: span 1; } .kv-anim, .kv-anim--track, .kv-anim--scrub { max-width: 560px; } } @media (max-width: 620px) { .cmp-cards, .sv--kv2 .kv-grid6, .sv--kv1 .kv-strip, .price-grid, .sv--price6 .price-strip, .test-hero__cards, .sv--test3 .test-grid3, .sv--test4 .test-grid2, .sv--test6 .test-grid2, .sv--test8 .test-bento, .sv--subj3 .subj-bento, .faq-2col { grid-template-columns: 1fr; } .sv--kv1 .kv-strip { grid-auto-flow: row; } .sv--cmp4 .cmp-aligned__head, .sv--cmp4 .cmp-aligned__row { grid-template-columns: 1fr; } .sv--cmp4 .cmp-aligned__head span:first-child { display: none; } .sv--cmp6 .cmp-card--wide ul, .sv--cmp6 .cmp-card--muted ul { grid-template-columns: 1fr; } .sv--test7 .test-spot__strip { grid-template-columns: repeat(3, 1fr); } .sv--test9 .test-masonry { columns: 1; } .sv--subj3 .subj-card--hero { grid-column: span 1; } .sv--cta9 .cta-strip { flex-direction: column; align-items: flex-start; } .faq-bcard__a { padding-left: 22px; } } /* hv10 Full-Bleed Mesh */ .hv10 { background: var(--ink-900); color: var(--paper); padding-top: clamp(9rem, 7rem + 8vw, 12rem); padding-bottom: clamp(6rem, 9vw, 9rem); overflow: hidden; isolation: isolate; text-align: center; } .hv10__mesh { position: absolute; inset: -20%; z-index: -2; background: radial-gradient(circle at 20% 20%, #2a3a48, transparent 45%), radial-gradient(circle at 80% 30%, #1c2a34, transparent 45%), radial-gradient(circle at 50% 90%, #33454f, transparent 50%); filter: blur(20px); } .hv10__wash { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16,18,20,0.55), rgba(16,18,20,0.8)); } .hv10__wrap { max-width: 860px; margin-inline: auto; } .hv10 .eyebrow { color: rgba(255,255,255,0.65); justify-content: center; } .hv10 .eyebrow::before { display: none; } .hv10 h1 { color: var(--paper); margin: 1.2rem auto 0; font-size: clamp(2.1rem, 1.2rem + 4.4vw, 4.6rem); max-width: 18ch; letter-spacing: -0.035em; } .hv10 h1 em::after { opacity: 0.9; height: 0.12em; } .hv10 .lab-lead { color: rgba(255,255,255,0.78); margin: 1.4rem auto 0; } .hv10 .lab-cta, .hv10 .lab-trust { justify-content: center; } /* ========================================================= TRUST Varianten ========================================================= */ .tv1 { padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); border-block: 1px solid var(--line); } .tv2 { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); border-block: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; } .tv3 { padding-block: clamp(3rem, 2rem + 4vw, 5rem); } .tv3__label { text-align: center; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 20px; } .tv3__wall { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .tv3__wall .chip { height: 38px; padding: 0 18px; font-size: 0.9rem; } .tv4 { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); border-block: 1px solid var(--line); } .tv4__wrap { display: flex; align-items: baseline; justify-content: center; gap: 16px; flex-wrap: wrap; } .tv4__pre { font-size: 1.05rem; color: var(--ink-500); } .tv4__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -0.03em; color: var(--ink-950); transition: opacity 200ms var(--ease-out); min-width: 5ch; } /* ========================================================= PROBLEM Varianten ========================================================= */ .pv1__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pv1__card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); } .pv1__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--rot-bg); color: var(--rot); margin-bottom: 16px; } .pv1__ico svg { width: 20px; height: 20px; } .pv1__card h3 { font-size: 1.08rem; margin-bottom: 8px; } .pv1__card p { font-size: 0.93rem; color: var(--ink-600); } .pv2__list { display: flex; flex-direction: column; } .pv2__row { display: flex; gap: 24px; padding: 28px 0; align-items: flex-start; } .pv2__row + .pv2__row { border-top: 1px solid var(--line); } .pv2__n { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 600; color: var(--ink-400); flex-shrink: 0; padding-top: 6px; } .pv2__row h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin-bottom: 8px; } .pv2__row p { color: var(--ink-600); max-width: 60ch; } .pv3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pv3__col { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px; } .pv3__col--bad { background: var(--rot-bg); border-color: color-mix(in srgb, var(--rot) 25%, var(--line)); } .pv3__col--good { background: var(--gruen-bg); border-color: color-mix(in srgb, var(--gruen) 25%, var(--line)); } .pv3__tag { display: inline-block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; } .pv3__col--bad .pv3__tag { color: var(--rot); } .pv3__col--good .pv3__tag { color: var(--gruen); } .pv3__col ul { display: flex; flex-direction: column; gap: 16px; } .pv3__col li { display: flex; gap: 12px; } .pv3__col li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } .pv3__col--bad li svg { color: var(--rot); } .pv3__col--good li svg { color: var(--gruen); } .pv3__col b { display: block; font-size: 0.95rem; font-weight: 600; } .pv3__col span { font-size: 0.86rem; color: var(--ink-600); } .pv4__card { max-width: 720px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); padding: clamp(28px, 3vw, 48px); box-shadow: var(--shadow-md); } .pv4__card h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 24px; } .pv4__list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; } .pv4__list li { display: flex; gap: 14px; padding: 16px 0; } .pv4__list li + li { border-top: 1px solid var(--line); } .pv4__box { width: 24px; height: 24px; border-radius: 7px; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pv4__box svg { width: 13px; height: 13px; } .pv4__list b { display: block; font-size: 0.98rem; } .pv4__list p { font-size: 0.88rem; color: var(--ink-600); margin-top: 3px; } .pv5__list { display: flex; flex-direction: column; gap: 8px; } .pv5__item { display: flex; gap: clamp(20px, 4vw, 60px); align-items: center; padding: 24px 0; } .pv5__item:nth-child(even) { flex-direction: row-reverse; text-align: right; } .pv5__item + .pv5__item { border-top: 1px solid var(--line); } .pv5__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 6vw, 6rem); letter-spacing: -0.04em; color: var(--ink-100); line-height: 1; flex-shrink: 0; } .pv5__body h3 { font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); margin-bottom: 8px; } .pv5__body p { color: var(--ink-600); max-width: 52ch; } .pv5__item:nth-child(even) .pv5__body p { margin-left: auto; } /* ========================================================= HOW Varianten ========================================================= */ .wv1__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .wv1__step { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); } .wv1__n { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--ink-400); } .wv1__step h3 { font-size: 1.15rem; margin: 12px 0 8px; } .wv1__step p { font-size: 0.93rem; color: var(--ink-600); } .wv1__line { position: absolute; top: 40px; right: -13px; width: 26px; height: 1px; background: var(--line-strong); } .wv2__line { position: relative; max-width: 860px; margin-inline: auto; padding: 10px 0; } .wv2__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: translateX(-50%); } .wv2__node { position: relative; width: 50%; padding: 18px 40px; } .wv2__node.is-right { margin-left: 50%; } .wv2__node:not(.is-right) { text-align: right; } .wv2__dot { position: absolute; top: 26px; width: 30px; height: 30px; border-radius: 50%; background: var(--ink-950); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; } .wv2__node:not(.is-right) .wv2__dot { right: -15px; } .wv2__node.is-right .wv2__dot { left: -15px; } .wv2__card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 20px; } .wv2__ico { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-700); margin-bottom: 10px; } .wv2__ico svg { width: 17px; height: 17px; } .wv2__card h3 { font-size: 1.05rem; margin-bottom: 6px; } .wv2__card p { font-size: 0.88rem; color: var(--ink-600); } .wv3__track { display: flex; gap: 20px; overflow-x: auto; padding: 4px clamp(20px, 5vw, 48px) 20px; scroll-snap-type: x mandatory; } .wv3__panel { scroll-snap-align: start; flex: 0 0 min(78vw, 380px); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 32px; } .wv3__n { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; } .wv3__panel h3 { font-size: 1.2rem; margin: 16px 0 8px; } .wv3__panel p { font-size: 0.92rem; color: var(--ink-600); } .wv3__panel--end { background: var(--ink-950); color: var(--paper); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; flex-basis: min(60vw, 260px); } .wv3__panel--end span { width: 34px; height: 34px; color: var(--gelb); } .wv4__flow { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 14px; } .wv4__node { flex: 1 1 240px; max-width: 300px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 22px; } .wv4__ico { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-700); margin-bottom: 12px; } .wv4__ico svg { width: 18px; height: 18px; } .wv4__node b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 6px; } .wv4__node p { font-size: 0.86rem; color: var(--ink-600); } .wv4__arrow { display: flex; align-items: center; color: var(--ink-400); } .wv4__arrow svg { width: 22px; height: 22px; } .wv5 { display: grid; grid-template-columns: 260px 1fr; gap: 30px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); padding: clamp(20px, 3vw, 38px); } .wv5__tabs { display: flex; flex-direction: column; gap: 6px; } .wv5__tab { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 600; color: var(--ink-500); text-align: left; } .wv5__tab span { font-family: var(--font-mono); color: var(--ink-300); } .wv5__tab.is-active { background: var(--ink-950); color: var(--paper); } .wv5__tab.is-active span { color: rgba(255,255,255,0.5); } .wv5__panel { display: none; } .wv5__panel.is-active { display: block; animation: fade-up 320ms var(--ease-out); } .wv5__ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); margin-bottom: 16px; } .wv5__ico svg { width: 21px; height: 21px; } .wv5__panel h3 { font-size: 1.4rem; margin-bottom: 10px; } .wv5__panel p { color: var(--ink-600); max-width: 52ch; } @keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ========================================================= FEATURES Varianten ========================================================= */ .fv1__bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 18px; } .fv1__cell { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 28px; display: flex; flex-direction: column; min-height: 240px; overflow: hidden; } .fb--wide { grid-column: span 4; } .fb--half { grid-column: span 3; } .fb--third { grid-column: span 2; } .fb--tall { grid-row: span 2; } .fb--dark { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); } .fv1__ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); margin-bottom: auto; } .fb--dark .fv1__ico { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.14); color: var(--paper); } .fv1__ico svg { width: 21px; height: 21px; } .fv1__cell h3 { font-size: 1.18rem; margin: 20px 0 8px; } .fb--dark h3 { color: var(--paper); } .fv1__cell p { font-size: 0.93rem; color: var(--ink-600); line-height: 1.58; } .fb--dark p { color: rgba(255,255,255,0.66); } .fv1__vis { margin-top: 20px; } .fv2__rows { display: flex; flex-direction: column; gap: 20px; } .fv2__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: clamp(24px, 3vw, 44px); } .fv2__row.is-flip .fv2__text { order: 2; } .fv2__ico { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); margin-bottom: 14px; } .fv2__ico svg { width: 20px; height: 20px; } .fv2__text h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); margin-bottom: 8px; } .fv2__text p { color: var(--ink-600); } .fv2__media { min-height: 150px; border-radius: var(--radius-lg); background: var(--ink-50); display: flex; align-items: center; justify-content: center; padding: 20px; color: var(--ink-400); } .fv2__media svg { width: 40px; height: 40px; } .fv2__media.is-dark { background: var(--ink-950); color: var(--paper); } .fv3__grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .fv3__aside { position: sticky; top: 110px; } .fv3__aside h2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); margin: 0.6rem 0 1.4rem; } .fv3__stack { display: flex; flex-direction: column; gap: 16px; } .fv3__card { display: flex; gap: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 26px; } .fv3__ico { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); } .fv3__ico svg { width: 20px; height: 20px; } .fv3__card h3 { font-size: 1.1rem; margin-bottom: 6px; } .fv3__card p { font-size: 0.92rem; color: var(--ink-600); } .fv4__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .fv4__cell { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 26px; text-align: left; } .fv4__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); margin-bottom: 16px; } .fv4__ico svg { width: 20px; height: 20px; } .fv4__cell h3, .fv4__cell h4 { font-size: 1.05rem; margin-bottom: 8px; } .fv4__cell p { font-size: 0.9rem; color: var(--ink-600); } .fv5__hero { border-radius: var(--radius-2xl); padding: clamp(28px, 3vw, 48px); margin-bottom: 18px; } .fv5__hero h3 { font-size: clamp(1.3rem, 1.1rem + 1.4vw, 2rem); margin: 18px 0 10px; } .fv5__hero p { max-width: 62ch; } .fv5__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .fv5__tile { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 22px; } .fv5__tile h4 { font-size: 0.98rem; margin-bottom: 6px; } .fv5__tile p { font-size: 0.85rem; color: var(--ink-600); } /* ========================================================= VERGLEICH Varianten ========================================================= */ .ci { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; } .ci svg { width: 12px; height: 12px; } .ci--y { background: var(--gruen-bg); color: var(--gruen); } .ci--n { background: var(--ink-100); color: var(--ink-400); } .cv1 { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-surface); } .cv1__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; align-items: stretch; } .cv1__row + .cv1__row { border-top: 1px solid var(--line); } .cv1__row > div { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; } .cv1__row--head > div { padding-block: 20px; font-family: var(--font-display); font-weight: 700; } .cv1__row--head { font-size: 1.02rem; } .cv1__f { font-size: 0.93rem; font-weight: 600; color: var(--ink-900); } .cv1__l { background: var(--ink-950); color: var(--paper); } .cv1__row--head .cv1__l { display: flex; flex-direction: row; align-items: center; gap: 8px; } .cv1__l svg { width: 15px; height: 15px; } .cv1__l span, .cv1__n span { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; line-height: 1.4; } .cv1__n { color: var(--ink-600); } .cv1__foot { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 18px 20px; font-size: 0.84rem; color: var(--ink-500); background: var(--paper); } .cv2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .cv2__card { border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 30px; } .cv2__card--l { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); } .cv2__card--n { background: var(--bg-surface); } .cv2__card h3 { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin-bottom: 20px; } .cv2__card--l h3 { color: var(--paper); } .cv2__card h3 svg { width: 16px; height: 16px; } .cv2__card ul { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; } .cv2__card li { display: flex; gap: 11px; } .cv2__card b { display: block; font-size: 0.88rem; font-weight: 600; } .cv2__card span { font-size: 0.85rem; } .cv2__card--l b { color: var(--paper); } .cv2__card--l span { color: rgba(255,255,255,0.66); } .cv2__card--n span { color: var(--ink-600); } .cv2__card--l .ci--y { background: rgba(143,227,180,0.2); color: #8fe3b4; } .cv2__card--l .ci--n { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.5); } .cv3 { max-width: 760px; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); overflow: hidden; } .cv3__switch { display: flex; padding: 8px; gap: 6px; background: var(--ink-50); border-bottom: 1px solid var(--line); } .cv3__switch button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600; color: var(--ink-600); } .cv3__switch button svg { width: 14px; height: 14px; } .cv3__switch button.is-active { background: var(--ink-950); color: var(--paper); } .cv3__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 16px 24px; } .cv3__list li + li { border-top: 1px solid var(--line); } .cv3__list b { flex: 1 0 45%; font-size: 0.92rem; } .cv3__list span { font-size: 0.9rem; color: var(--ink-600); display: inline-flex; align-items: center; gap: 7px; } .cv4 { display: flex; flex-direction: column; gap: 8px; } .cv4__row { display: grid; grid-template-columns: 240px 1fr; gap: 20px; align-items: center; padding: 10px 0; } .cv4__f { font-size: 0.92rem; font-weight: 600; } .cv4__bar { position: relative; display: flex; align-items: center; height: 44px; border-radius: var(--radius-md); background: var(--ink-50); overflow: hidden; padding: 0 14px; } .cv4__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0; } .cv4__fill.is-l { background: color-mix(in srgb, var(--gruen) 20%, transparent); } .cv4__fill.is-n { background: color-mix(in srgb, var(--ink-400) 16%, transparent); } .cv4__l, .cv4__n { position: relative; font-size: 0.85rem; } .cv4__l { color: var(--ink-900); font-weight: 600; } .cv4__n { margin-left: auto; color: var(--ink-500); } .cv4__foot { margin-top: 20px; font-size: 0.84rem; color: var(--ink-500); max-width: 70ch; } .cv5 { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-2xl); overflow: hidden; } .cv5__side { flex: 1; padding: clamp(24px, 3vw, 44px); } .cv5__side--l { background: var(--ink-950); color: var(--paper); } .cv5__side h3 { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; margin-bottom: 18px; } .cv5__side--l h3 { color: var(--paper); } .cv5__side h3 svg { width: 15px; height: 15px; } .cv5__side ul { display: flex; flex-direction: column; gap: 12px; } .cv5__side li { font-size: 0.9rem; padding-left: 16px; position: relative; } .cv5__side li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.5; } .cv5__side--l li { color: rgba(255,255,255,0.8); } .cv5__side--n li { color: var(--ink-600); } .cv5__vs { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--ink-400); background: var(--bg-surface); padding: 0 10px; border-inline: 1px solid var(--line); } /* ========================================================= AMPEL Varianten ========================================================= */ .av1__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 1rem + 5vw, 5rem); align-items: center; } .av1__grid h2 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.7rem); margin-top: 0.6rem; } .av1__intro { margin: 1.1rem 0 1.8rem; color: var(--ink-600); font-size: 1.03rem; } .av1__legend { display: flex; flex-direction: column; gap: 12px; } .av1__legend li { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); } .av1__legend .d { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .av1__legend .d.g { background: var(--gruen); } .av1__legend .d.y { background: var(--gelb); } .av1__legend .d.r { background: var(--rot); } .av1__legend b { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 3px; } .av1__legend p { font-size: 0.89rem; color: var(--ink-600); } .av2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .av2__panel { border-radius: var(--radius-xl); padding: 30px; border: 1px solid var(--line); } .av2__panel--g { background: var(--gruen-bg); border-color: color-mix(in srgb, var(--gruen) 22%, var(--line)); } .av2__panel--y { background: var(--gelb-bg); border-color: color-mix(in srgb, var(--gelb) 30%, var(--line)); } .av2__panel--r { background: var(--rot-bg); border-color: color-mix(in srgb, var(--rot) 22%, var(--line)); } .av2__dot { display: block; width: 16px; height: 16px; border-radius: 50%; margin-bottom: 16px; } .av2__panel--g .av2__dot { background: var(--gruen); } .av2__panel--y .av2__dot { background: var(--gelb); } .av2__panel--r .av2__dot { background: var(--rot); } .av2__panel b { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 8px; } .av2__panel p { font-size: 0.9rem; color: var(--ink-700); } .av3 { position: relative; max-width: 720px; margin-inline: auto; min-height: 320px; display: flex; align-items: center; justify-content: center; } .av3__core { width: 220px; height: 220px; border-radius: 50%; background: var(--ink-950); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .av3__core span { font-size: 0.74rem; color: rgba(255,255,255,0.6); } .av3__core b { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; letter-spacing: -0.04em; line-height: 1; color: #8fe3b4; } .av3__core small { font-size: 0.76rem; color: rgba(255,255,255,0.55); } .av3__chip { position: absolute; padding: 8px 14px; border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--line); background: var(--bg-surface); box-shadow: var(--shadow-sm); } .av3__chip--g { color: var(--gruen); } .av3__chip--y { color: var(--gelb-ink); } .av3__chip--p0 { top: 8%; left: 4%; } .av3__chip--p1 { bottom: 14%; left: 0; } .av3__chip--p2 { top: 20%; right: 2%; } @media (max-width: 700px) { .av3 { flex-direction: column; gap: 14px; min-height: 0; } .av3__chip { position: static; } } .av4__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .av4__grid h2 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.7rem); margin-top: 0.6rem; } .av4__stack { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--ink-950); } .av4__lamp { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); } .av4__lamp span { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .av4__lamp--g span { background: var(--gruen); box-shadow: 0 0 14px var(--gruen); } .av4__lamp--y span { background: var(--gelb); box-shadow: 0 0 14px var(--gelb); } .av4__lamp--r span { background: var(--rot); box-shadow: 0 0 14px var(--rot); } .av4__lamp b { display: block; color: var(--paper); font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 3px; } .av4__lamp p { font-size: 0.85rem; color: rgba(255,255,255,0.6); } .av5 { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .av5__chart { display: flex; align-items: flex-end; gap: 14px; height: 260px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); } .av5__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; } .av5__col i { width: 100%; max-width: 40px; border-radius: 5px 5px 0 0; } .av5__col i.g { background: var(--gruen); } .av5__col i.y { background: var(--gelb); } .av5__col i.r { background: var(--rot); } .av5__col span { font-size: 0.72rem; color: var(--ink-500); text-align: center; } /* ========================================================= ZAHLEN Varianten ========================================================= */ .sv1__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .sv1__stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -0.03em; color: var(--ink-950); } .sv1__stat span { font-size: 0.86rem; color: var(--ink-500); } .sv2__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .sv2__lead b { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 2rem + 5vw, 5rem); letter-spacing: -0.04em; color: var(--ink-950); display: block; line-height: 1; } .sv2__lead span { color: var(--ink-500); font-size: 0.95rem; } .sv2__side { display: flex; flex-direction: column; } .sv2__side > div { padding: 16px 0; } .sv2__side > div + div { border-top: 1px solid var(--line); } .sv2__side b { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; margin-right: 10px; } .sv2__side span { color: var(--ink-500); font-size: 0.88rem; } .sv3__sentence { text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 2.4vw, 2.6rem); letter-spacing: -0.02em; line-height: 1.4; color: var(--ink-700); max-width: 20ch; margin-inline: auto; } .sv3__sentence b { color: var(--ink-950); font-weight: 800; } .sv4__band { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink-950); color: var(--paper); border-radius: var(--radius-2xl); padding: clamp(28px, 3vw, 44px); } .sv4__stat { text-align: center; padding: 8px; } .sv4__stat + .sv4__stat { border-left: 1px solid rgba(255,255,255,0.12); } .sv4__stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); letter-spacing: -0.03em; } .sv4__stat span { font-size: 0.82rem; color: rgba(255,255,255,0.6); } .sv5__list { max-width: 640px; margin-inline: auto; } .sv5__row { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); } .sv5__row span { color: var(--ink-600); font-size: 0.95rem; } .sv5__row b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; } /* ========================================================= STIMMEN Varianten ========================================================= */ .vv1__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .vv1__card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); } .vv1__card p { font-size: 1rem; line-height: 1.6; color: var(--ink-800); } .vv1__card figcaption { margin-top: auto; padding-top: 20px; display: flex; align-items: center; gap: 12px; } .vv1__av { width: 38px; height: 38px; border-radius: 50%; background: var(--ink-900); color: var(--paper); display: flex; align-items: center; justify-content: center; font-size: 0.76rem; font-weight: 600; flex-shrink: 0; } .vv1__card figcaption b { display: block; font-size: 0.88rem; } .vv1__card figcaption small { font-size: 0.8rem; color: var(--ink-500); } .vv2__feat { max-width: 820px; margin: 0 auto 24px; text-align: center; } .vv2__feat p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.4; color: var(--ink-900); } .vv2__feat .lab-stars { justify-content: center; } .vv2__feat figcaption { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; } .vv2__feat figcaption b { display: block; font-size: 0.9rem; } .vv2__feat figcaption small { font-size: 0.82rem; color: var(--ink-500); } .vv2__strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 820px; margin-inline: auto; } .vv2__mini { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 22px; } .vv2__mini p { font-size: 0.92rem; color: var(--ink-700); } .vv2__mini span { display: block; margin-top: 12px; font-size: 0.8rem; color: var(--ink-500); font-weight: 600; } .vv3__marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .vv3__track { display: flex; gap: 20px; width: max-content; animation: lab-marq 48s linear infinite; padding-inline: 20px; } .vv3__marquee:hover .vv3__track { animation-play-state: paused; } .vv3__card { flex: 0 0 380px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 26px; } .vv3__card p { font-size: 0.95rem; color: var(--ink-800); } .vv3__card span { display: block; margin-top: 14px; font-size: 0.8rem; color: var(--ink-500); font-weight: 600; } .vv4 { max-width: 900px; margin-inline: auto; text-align: center; position: relative; padding-top: 40px; } .vv4__mark { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 8rem; line-height: 1; color: var(--ink-150); } .vv4 p { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3rem); letter-spacing: -0.02em; line-height: 1.35; color: var(--ink-950); } .vv4 cite { display: block; margin-top: 24px; font-style: normal; font-size: 0.9rem; color: var(--ink-500); font-weight: 600; } .vv5__thread { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 20px; } .vv5__msg { display: flex; gap: 12px; align-items: flex-end; max-width: 80%; } .vv5__msg.is-right { margin-left: auto; flex-direction: row-reverse; } .vv5__bubble { border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; background: var(--bg-surface); padding: 16px 18px; } .vv5__msg.is-right .vv5__bubble { border-radius: 16px 16px 4px 16px; background: var(--ink-950); color: var(--paper); } .vv5__bubble p { font-size: 0.92rem; line-height: 1.5; } .vv5__bubble span { display: block; margin-top: 8px; font-size: 0.76rem; color: var(--ink-500); } .vv5__msg.is-right .vv5__bubble span { color: rgba(255,255,255,0.6); } /* ========================================================= PREISE Varianten ========================================================= */ .rv1__toggle { text-align: center; margin-bottom: 2.5rem; } .rv1__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .rv1__card { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 30px; position: relative; } .rv1__card.is-feat { background: var(--ink-950); color: var(--paper); border-color: var(--ink-950); box-shadow: var(--shadow-lg); } .rv1__tag { position: absolute; top: 20px; right: 20px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--gelb); color: var(--ink-950); padding: 4px 10px; border-radius: var(--radius-full); } .rv1__card h3 { font-size: 1.15rem; } .rv1__card.is-feat h3 { color: var(--paper); } .rv1__desc { font-size: 0.86rem; color: var(--ink-500); min-height: 2.6em; margin-top: 4px; } .rv1__card.is-feat .rv1__desc { color: rgba(255,255,255,0.6); } .rv1__amount { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 2px; } .rv1__amount b { font-family: var(--font-display); font-weight: 700; font-size: 2.8rem; letter-spacing: -0.04em; line-height: 1; } .rv1__amount span { font-size: 0.88rem; color: var(--ink-500); } .rv1__card.is-feat .rv1__amount span { color: rgba(255,255,255,0.6); } .rv1__note { font-size: 0.79rem; color: var(--ink-500); min-height: 1.3em; } .rv1__card.is-feat .rv1__note { color: rgba(255,255,255,0.55); } .rv1__card .btn { margin: 18px 0 4px; } .rv1__card.is-feat .lab-feats li { color: rgba(255,255,255,0.82); } .rv1__card.is-feat .lab-feats svg { color: #8fe3b4; } .rv2 { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-surface); } .rv2__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: center; } .rv2__row + .rv2__row { border-top: 1px solid var(--line); } .rv2__row > div { padding: 14px 18px; font-size: 0.9rem; } .rv2__row--head > div { padding-block: 20px; } .rv2__row--head b { font-family: var(--font-display); font-size: 1.05rem; display: block; } .rv2__row--head span { font-size: 0.8rem; color: var(--ink-500); } .rv2__row .is-feat { background: var(--ink-950); color: var(--paper); } .rv2__row--head .is-feat span { color: rgba(255,255,255,0.6); } .rv2__f { font-weight: 600; color: var(--ink-900); } .rv2__row--cta > div { padding-block: 18px; } .rv3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; } .rv3__seg { padding: 30px; } .rv3__seg + .rv3__seg { border-left: 1px solid var(--line); } .rv3__seg.is-feat { background: var(--ink-950); color: var(--paper); } .rv3__top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .rv3__top b { font-family: var(--font-display); font-size: 1.3rem; } .rv3__top span { font-size: 0.85rem; color: var(--ink-500); } .rv3__seg.is-feat .rv3__top span { color: rgba(255,255,255,0.6); } .rv3__seg > p { font-size: 0.86rem; color: var(--ink-600); } .rv3__seg.is-feat > p { color: rgba(255,255,255,0.66); } .rv3__seg.is-feat .lab-feats li { color: rgba(255,255,255,0.82); } .rv3__seg.is-feat .lab-feats svg { color: #8fe3b4; } .rv3__seg .btn { margin-top: 16px; } .rv4 { max-width: 720px; margin-inline: auto; border-top: 1px solid var(--line); } .rv4__row { border-bottom: 1px solid var(--line); } .rv4__row summary { display: flex; align-items: center; gap: 20px; padding: 24px 4px; cursor: pointer; list-style: none; } .rv4__row summary::-webkit-details-marker { display: none; } .rv4__name { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; flex: 1; } .rv4__price { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; } .rv4__price small { font-size: 0.8rem; font-weight: 500; color: var(--ink-500); margin-left: 4px; } .rv4__chev svg { width: 20px; height: 20px; color: var(--ink-400); transition: transform 220ms var(--ease-out); } .rv4__row[open] .rv4__chev svg { transform: rotate(180deg); } .rv4__more { padding: 0 4px 26px; } .rv4__more p { color: var(--ink-600); margin-bottom: 6px; } .rv5 { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: center; } .rv5__side { display: flex; flex-direction: column; gap: 16px; } .rv5__mini { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 22px; } .rv5__mini b { font-family: var(--font-display); font-size: 1.1rem; display: block; } .rv5__mini span { font-size: 1.4rem; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; display: block; margin: 4px 0 10px; } .rv5__mini a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--ink-900); } .rv5__mini a svg { width: 14px; height: 14px; } .rv5__feat { position: relative; border-radius: var(--radius-2xl); background: var(--ink-950); color: var(--paper); padding: clamp(30px, 3vw, 48px); box-shadow: var(--shadow-lg); } .rv5__feat h3 { color: var(--paper); font-size: 1.6rem; margin: 8px 0 4px; } .rv5__feat > p { color: rgba(255,255,255,0.66); } .rv5__feat .rv1__amount b { color: var(--paper); } .rv5__feat .lab-feats li { color: rgba(255,255,255,0.82); } .rv5__feat .lab-feats svg { color: #8fe3b4; } .rv5__feat .btn { margin-top: 20px; } /* ========================================================= FAQ Varianten ========================================================= */ .lab-faq__item { border-bottom: 1px solid var(--line); } .lab-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); cursor: pointer; list-style: none; } .lab-faq__item summary::-webkit-details-marker { display: none; } .lab-faq__plus { width: 24px; height: 24px; flex-shrink: 0; position: relative; } .lab-faq__plus::before, .lab-faq__plus::after { content: ""; position: absolute; background: var(--ink-600); transition: transform 240ms var(--ease-out), opacity 200ms; } .lab-faq__plus::before { top: 11px; left: 3px; right: 3px; height: 2px; } .lab-faq__plus::after { left: 11px; top: 3px; bottom: 3px; width: 2px; } .lab-faq__item[open] .lab-faq__plus::after { transform: rotate(90deg); opacity: 0; } .lab-faq__a { padding: 0 4px 24px; font-size: 0.96rem; color: var(--ink-600); line-height: 1.62; max-width: 62ch; } .qv2__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; } .qv3__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .qv3__card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 26px; } .qv3__card h3 { font-size: 1.05rem; margin-bottom: 10px; } .qv3__card p { font-size: 0.92rem; color: var(--ink-600); line-height: 1.6; } .qv4__item { display: flex; gap: 24px; padding: 26px 0; } .qv4__item + .qv4__item { border-top: 1px solid var(--line); } .qv4__n { font-family: var(--font-mono); font-weight: 600; color: var(--ink-400); flex-shrink: 0; } .qv4__item h3 { font-size: 1.15rem; margin-bottom: 8px; } .qv4__item p { color: var(--ink-600); max-width: 60ch; } .qv5__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; } /* ========================================================= ABSCHLUSS-CTA Varianten ========================================================= */ .xv1__band { position: relative; border-radius: var(--radius-2xl); background: var(--ink-950); color: var(--paper); padding: clamp(3rem, 2rem + 5vw, 5.5rem) clamp(1.5rem, 1rem + 4vw, 4.5rem); text-align: center; overflow: hidden; isolation: isolate; } .xv1__band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.14), transparent 45%), radial-gradient(circle at 90% 110%, rgba(255,255,255,0.1), transparent 45%); } .xv1__band h2 { color: var(--paper); font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); max-width: 20ch; margin-inline: auto; } .xv1__band p { margin: 1.2rem auto 0; max-width: 48ch; color: rgba(255,255,255,0.68); font-size: 1.05rem; } .xv1__band .lab-cta { justify-content: center; margin-top: 2rem; } .xv1__band small { display: block; margin-top: 1.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.5); } .xv2 { background: var(--ink-950); color: var(--paper); overflow: hidden; isolation: isolate; } .xv2__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.14), transparent 45%), radial-gradient(circle at 85% 100%, rgba(255,255,255,0.09), transparent 45%); } .xv2__wrap { text-align: center; max-width: 760px; margin-inline: auto; } .xv2__wrap h2 { color: var(--paper); font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); } .xv2__wrap p { margin: 1.2rem auto 0; color: rgba(255,255,255,0.68); font-size: 1.05rem; max-width: 48ch; } .xv2__wrap .lab-cta { justify-content: center; margin-top: 2rem; } .xv3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: var(--bg-surface); padding: clamp(28px, 3vw, 52px); } .xv3__text h2 { font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); } .xv3__text p { margin-top: 1rem; color: var(--ink-600); } .xv3__form { display: flex; flex-direction: column; gap: 12px; } .xv3__form .input { height: 52px; } .xv4__wrap { text-align: center; max-width: 720px; margin-inline: auto; } .xv4__wrap h2 { font-size: clamp(2rem, 1.4rem + 3.4vw, 3.8rem); letter-spacing: -0.03em; } .xv4__link { margin-top: 1.8rem; font-size: 1.05rem; } .xv4__link svg { width: 18px; height: 18px; } .xv5__ticket { display: flex; max-width: 820px; margin-inline: auto; border: 2px dashed var(--line-strong); border-radius: var(--radius-2xl); overflow: hidden; background: var(--bg-surface); } .xv5__main { flex: 1; padding: clamp(28px, 3vw, 44px); } .xv5__main h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin: 8px 0 12px; } .xv5__main p { color: var(--ink-600); margin-bottom: 20px; max-width: 40ch; } .xv5__stub { width: 180px; flex-shrink: 0; border-left: 2px dashed var(--line-strong); background: var(--ink-950); color: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; } .xv5__stub span { width: 26px; height: 26px; color: var(--paper); opacity: 0.5; } .xv5__stub b { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: -0.03em; } .xv5__stub small { font-size: 0.78rem; color: rgba(255,255,255,0.6); } /* ========================================================= DEV-SWITCH — Hero-Karte (nur index.html, wie mountSearchDev in app/assets/js/app.js). localStorage['lesify:herocard:v']. ========================================================= */ .layout-dev { position: fixed; right: 12px; bottom: 12px; z-index: 210; display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: var(--radius-sm); border: 1px dashed var(--ink-400); background: var(--bg-surface); box-shadow: var(--shadow-md); font-family: var(--font-mono); font-size: 0.58rem; color: var(--ink-500); max-height: calc(100vh - 24px); overflow: auto; } .layout-dev-title { align-self: flex-start; margin-bottom: 2px; padding: 1px 0; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.56rem; color: var(--ink-400); cursor: pointer; } .layout-dev-title::before { content: "\25BC "; font-size: 0.7em; } .layout-dev.is-min .layout-dev-title::before { content: "\25B6 "; } .layout-dev.is-min .layout-dev-row { display: none; } .layout-dev-row { display: flex; align-items: center; gap: 6px; } .layout-dev-row > span { min-width: 34px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; } .layout-dev-seg { display: flex; flex-wrap: wrap; gap: 2px; max-width: 244px; } .layout-dev-seg button { min-width: 17px; height: 17px; padding: 0 3px; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-surface); color: var(--ink-500); font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; line-height: 1; transition: background 120ms var(--ease-out), color 120ms var(--ease-out), border-color 120ms var(--ease-out); } .layout-dev-seg button:hover { border-color: var(--ink-400); color: var(--ink-950); } .layout-dev-seg button.is-on { background: var(--ink-950); border-color: var(--ink-950); color: #fff; } @media (max-width: 860px) { .layout-dev { display: none; } } /* ========================================================= DEV-PANEL ========================================================= */ #lab-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; font-family: var(--font-body); } .lab-panel__handle { position: absolute; left: 16px; bottom: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--ink-950); color: var(--paper); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--ink-800); border-bottom: 0; } .lab-panel__handle svg { width: 14px; height: 14px; } .lab-panel__handle svg:first-child { width: 16px; height: 16px; } .lab-panel__handle svg:last-child { transition: transform 240ms var(--ease-out); } #lab-panel.is-collapsed .lab-panel__handle svg:last-child { transform: rotate(180deg); } .lab-panel__body { background: rgba(16,18,20,0.94); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-top: 1px solid var(--ink-800); color: var(--paper); padding: 12px clamp(14px, 3vw, 28px) 14px; display: flex; flex-direction: column; gap: 10px; max-height: 42vh; overflow-y: auto; } #lab-panel.is-collapsed .lab-panel__body { display: none; } .lab-panel__title { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; } .lab-panel__title em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.5); } .lab-dot { width: 8px; height: 8px; border-radius: 50%; background: #8fe3b4; box-shadow: 0 0 10px #8fe3b4; } .lab-panel__controls { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .lab-ctrl { flex: 0 0 auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); padding: 8px 10px; min-width: 150px; } .lab-ctrl__label { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; } .lab-ctrl__stepper { display: flex; align-items: center; gap: 4px; } .lab-ctrl__stepper > button { width: 26px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); } .lab-ctrl__stepper > button:hover { background: rgba(255,255,255,0.14); color: #fff; } .lab-ctrl__stepper > button svg { width: 14px; height: 14px; } .lab-ctrl__mid { flex: 1; display: flex; align-items: baseline; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.06); min-width: 0; } .lab-ctrl__mid:hover { background: rgba(255,255,255,0.12); } .lab-ctrl__num { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .lab-ctrl__of { font-size: 0.72rem; color: rgba(255,255,255,0.45); } .lab-ctrl__name { font-style: normal; font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; } .lab-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; } .lab-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: var(--paper); font-size: 0.8rem; font-weight: 600; } .lab-btn:hover { background: rgba(255,255,255,0.16); } .lab-btn svg { width: 14px; height: 14px; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 1040px) { .fv1__bento { grid-template-columns: repeat(4, 1fr); } .fb--wide, .fb--half { grid-column: span 4; } .fb--third { grid-column: span 2; } .fb--tall { grid-row: auto; } .fv3__grid { grid-template-columns: 1fr; } .fv3__aside { position: static; } .fv5__tiles { grid-template-columns: repeat(2, 1fr); } .hv6__grid { grid-template-columns: repeat(2, 1fr); } .hv6__headline, .hv6__prod, .hv6__trust { grid-column: span 2; } } @media (max-width: 900px) { .hv2__grid, .hv5__grid, .hv9__grid, .av1__grid, .av4__grid, .av5, .sv2__grid, .xv3__grid, .rv5, .fv2__row { grid-template-columns: 1fr; } .hv9__panel { position: static; display: none; } .hv5__rail { border-left: 0; border-top: 1px solid var(--line-strong); flex-direction: row; flex-wrap: wrap; } .hv5__fact { flex: 1 1 40%; padding-left: 0; } .cv2__grid, .qv2__grid, .qv3__grid, .pv3__grid { grid-template-columns: 1fr; } .cv5 { flex-direction: column; } .cv5__vs { border-inline: 0; border-block: 1px solid var(--line); padding: 8px; } .wv5 { grid-template-columns: 1fr; } .wv5__tabs { flex-direction: row; overflow-x: auto; } .fv2__row.is-flip .fv2__text { order: 0; } .av3__core { width: 180px; height: 180px; } .av3__core b { font-size: 2.6rem; } .rv2, .rv3 { display: block; } .rv2__row, .rv3 { grid-template-columns: 1fr; } .rv3__seg + .rv3__seg { border-left: 0; border-top: 1px solid var(--line); } .rv2__row > div { border-top: 1px solid var(--line); } .rv2__row--head { display: none; } .xv5__ticket { flex-direction: column; } .xv5__stub { width: auto; border-left: 0; border-top: 2px dashed var(--line-strong); flex-direction: row; gap: 12px; } } @media (max-width: 760px) { .lab-body { padding-bottom: 180px; } .pv1__grid, .wv1__grid, .vv1__grid, .rv1__grid, .fv4__grid, .av2__grid, .sv1__grid, .sv4__band { grid-template-columns: 1fr; } .sv4__stat + .sv4__stat { border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); } .wv1__line { display: none; } .wv2__line::before { left: 15px; } .wv2__node { width: 100%; padding-left: 44px; padding-right: 0; text-align: left; } .wv2__node.is-right { margin-left: 0; } .wv2__node .wv2__dot { left: 0 !important; right: auto !important; } .pv5__item, .pv5__item:nth-child(even) { flex-direction: column; text-align: left; align-items: flex-start; gap: 10px; } .cv1__row, .cv1__row--head { grid-template-columns: 1fr; } .cv1__row--head { display: none; } .cv1__l, .cv1__n { border-top: 1px solid var(--line); } .cv4__row { grid-template-columns: 1fr; gap: 8px; } .hv3__foot { flex-direction: column; align-items: flex-start; } .fv5__tiles { grid-template-columns: 1fr; } .hero-cta .btn, .lab-cta .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .lab-marquee__track, .vv3__track { animation: none; } } /* ========================================================= TLDR — "Was Lesify besonders macht" (#tldr), 10 Varianten .sv--tldr1 … .sv--tldr10 · Dev-Panel-Achse "tldr". Direkt hinter dem Hero: verdichtet Chat, Lernzettel, Testklausur, Lernplan, Dateien und Datenschutz. ========================================================= */ /* ---- gemeinsame Bausteine ---- */ .tldr-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); padding: 22px; display: flex; flex-direction: column; gap: 8px; } .tldr-card__ic { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); margin-bottom: 4px; } .tldr-card__ic svg { width: 21px; height: 21px; } .tldr-card h3 { font-size: 1.08rem; letter-spacing: -0.02em; } .tldr-card p { font-size: 0.92rem; color: var(--ink-600); line-height: 1.55; } .tldr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .tldr-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.03em; color: var(--ink-950); line-height: 1; } .tldr-stat span { font-size: 0.85rem; color: var(--ink-500); } .tldr-stats.is-bar { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); } .tldr-stats.is-stack { grid-template-columns: 1fr 1fr; gap: 20px 14px; margin: 24px 0; } .tldr-stats.is-inline { display: flex; flex-wrap: wrap; gap: 12px 30px; } .tldr-stats.is-band { margin-top: 26px; padding: 22px clamp(20px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-surface); } .tldr-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .tldr-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-full); background: var(--bg-surface); font-size: 0.85rem; font-weight: 500; color: var(--ink-700); } .tldr-chips svg { width: 13px; height: 13px; color: var(--gruen); } .tldr-line__row { display: flex; gap: 16px; } .tldr-line__ic { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); } .tldr-line__ic svg { width: 20px; height: 20px; } .tldr-line__row b { display: block; font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.02em; margin-bottom: 4px; } .tldr-line__row p { font-size: 0.92rem; color: var(--ink-600); line-height: 1.55; } /* ---- 1 · Grid ---- */ .sv--tldr1 .tldr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } /* ---- 2 · Bento ---- */ .sv--tldr2 .tldr-bento { display: grid; grid-template-columns: 1.08fr 1fr 1fr; gap: 14px; } .sv--tldr2 .tldr-bento__lead { grid-column: 1; grid-row: 1 / span 3; background: var(--ink-950); color: var(--paper); border-radius: var(--radius-xl); padding: clamp(24px, 2vw, 36px); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } .sv--tldr2 .tldr-bento__lead::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% -10%, rgba(255,255,255,0.16), transparent 55%); pointer-events: none; } .sv--tldr2 .tldr-bento__lead > * { position: relative; } .sv--tldr2 .tldr-bento__lead .eyebrow { color: rgba(255,255,255,0.6); } .sv--tldr2 .tldr-bento__lead .eyebrow::before { background: rgba(255,255,255,0.4); } .sv--tldr2 .tldr-bento__lead h2 { color: var(--paper); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); } .sv--tldr2 .tldr-bento__lead p { color: rgba(255,255,255,0.72); font-size: 0.98rem; line-height: 1.6; } .sv--tldr2 .tldr-bento__lead .lab-cta { margin-top: auto; flex-direction: column; align-items: stretch; gap: 10px; } .sv--tldr2 .tldr-bento__lead .lab-cta .btn { width: 100%; } /* ---- 3 · Split ---- */ .sv--tldr3 .tldr-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; } .sv--tldr3 .tldr-split__aside { position: sticky; top: 96px; } .sv--tldr3 .tldr-split__aside .lab-head { margin-bottom: 0; } .sv--tldr3 .tldr-split__list { display: flex; flex-direction: column; } .sv--tldr3 .tldr-split__list .tldr-line__row { padding: 20px 0; border-top: 1px solid var(--line); } .sv--tldr3 .tldr-split__list .tldr-line__row:first-child { border-top: 0; padding-top: 0; } /* ---- 4 · Rail ---- */ .sv--tldr4 .tldr-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; } .sv--tldr4 .tldr-rail .tldr-card { scroll-snap-align: start; } .sv--tldr4 .tldr-rail::-webkit-scrollbar { height: 6px; } .sv--tldr4 .tldr-rail::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 3px; } /* ---- 5 · Dark ---- */ .sv-sec[data-tldr="5"] { background: var(--ink-950); } .sv-sec[data-tldr="5"] .eyebrow { color: rgba(255,255,255,0.6); } .sv-sec[data-tldr="5"] .eyebrow::before { background: rgba(255,255,255,0.4); } .sv-sec[data-tldr="5"] h2 { color: var(--paper); } .sv-sec[data-tldr="5"] .lab-head p { color: rgba(255,255,255,0.7); } .sv--tldr5 .tldr-dark__list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 44px; } .sv--tldr5 .tldr-line__row { padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.14); } .sv--tldr5 .tldr-line__ic { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: var(--paper); } .sv--tldr5 .tldr-line__row b { color: var(--paper); } .sv--tldr5 .tldr-line__row p { color: rgba(255,255,255,0.66); } .sv--tldr5 .tldr-dark__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.14); } .sv--tldr5 .tldr-stat b { color: var(--paper); } .sv--tldr5 .tldr-stat span { color: rgba(255,255,255,0.6); } /* ---- 6 · Ziffern ---- */ .sv--tldr6 .tldr-num { display: flex; flex-direction: column; margin-bottom: 30px; } .sv--tldr6 .tldr-num__row { display: flex; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); } .sv--tldr6 .tldr-num__row:first-child { border-top: 0; padding-top: 0; } .sv--tldr6 .tldr-num__n { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--ink-400); padding-top: 4px; flex-shrink: 0; } .sv--tldr6 .tldr-num__row b { display: block; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -0.02em; margin-bottom: 5px; } .sv--tldr6 .tldr-num__row p { font-size: 0.95rem; color: var(--ink-600); line-height: 1.55; max-width: 60ch; } /* ---- 7 · Liste ---- */ .sv--tldr7 .tldr-line { display: flex; flex-direction: column; } .sv--tldr7 .tldr-line .tldr-line__row { border-top: 1px solid var(--line); padding: 18px 0; text-align: left; } .sv--tldr7 .tldr-line .tldr-line__row:first-child { border-top: 0; } .sv--tldr7 .tldr-line__ic { background: var(--ink-950); color: var(--paper); } .sv--tldr7 .tldr-chips { justify-content: center; } /* ---- 8 · Pills ---- */ .sv--tldr8 .tldr-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; } .sv--tldr8 .tldr-pills li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-full); background: var(--ink-950); color: var(--paper); font-size: 0.9rem; font-weight: 600; } .sv--tldr8 .tldr-pills svg { width: 15px; height: 15px; opacity: 0.85; } .sv--tldr8 .tldr-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px; } .sv--tldr8 .tldr-mini li { display: flex; gap: 12px; } .sv--tldr8 .tldr-mini svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--gruen); } .sv--tldr8 .tldr-mini b { display: block; font-size: 0.95rem; margin-bottom: 3px; } .sv--tldr8 .tldr-mini span { font-size: 0.9rem; color: var(--ink-600); line-height: 1.5; } /* ---- 9 · Zebra ---- */ .sv--tldr9 .tldr-zebra { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-surface); } .sv--tldr9 .tldr-zebra__row { display: flex; align-items: center; gap: 22px; padding: 24px clamp(20px, 3vw, 34px); } .sv--tldr9 .tldr-zebra__row + .tldr-zebra__row { border-top: 1px solid var(--line); } .sv--tldr9 .tldr-zebra__row:nth-child(even) { flex-direction: row-reverse; background: var(--bg-canvas); text-align: right; } .sv--tldr9 .tldr-zebra__ic { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); background: var(--ink-50); color: var(--ink-800); } .sv--tldr9 .tldr-zebra__ic svg { width: 23px; height: 23px; } .sv--tldr9 .tldr-zebra__tx { flex: 1; } .sv--tldr9 .tldr-zebra__tx b { display: block; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 4px; } .sv--tldr9 .tldr-zebra__tx p { font-size: 0.92rem; color: var(--ink-600); line-height: 1.55; } /* ---- 10 · Panorama ---- */ .sv--tldr10 .tldr-pano__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin: -8px 0 34px; font-size: 0.95rem; color: var(--ink-500); } .sv--tldr10 .tldr-pano__facts span { padding: 0 22px; } .sv--tldr10 .tldr-pano__facts span b { font-family: var(--font-display); font-weight: 700; color: var(--ink-950); } .sv--tldr10 .tldr-pano__facts span + span { position: relative; } .sv--tldr10 .tldr-pano__facts span + span::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-300); transform: translateY(-50%); } .sv--tldr10 .tldr-pano { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; } .sv--tldr10 .tldr-pano .tldr-card { border: 0; border-top: 2px solid var(--ink-950); border-radius: 0; background: transparent; padding: 20px 0 0; } .sv--tldr10 .tldr-pano .tldr-card__ic { width: auto; height: auto; padding: 0; margin-bottom: 8px; background: transparent; color: var(--ink-900); } /* ---- Responsive ---- */ @media (max-width: 980px) { .sv--tldr1 .tldr-grid, .sv--tldr10 .tldr-pano { grid-template-columns: 1fr 1fr; } .sv--tldr2 .tldr-bento { grid-template-columns: 1fr 1fr; } .sv--tldr2 .tldr-bento__lead { grid-column: 1 / -1; grid-row: auto; } .sv--tldr2 .tldr-bento__lead .lab-cta { flex-direction: row; } .sv--tldr3 .tldr-split { grid-template-columns: 1fr; } .sv--tldr3 .tldr-split__aside { position: static; } .sv--tldr5 .tldr-dark__list { grid-template-columns: 1fr; gap: 0; } } @media (max-width: 620px) { .tldr-stats, .sv--tldr1 .tldr-grid, .sv--tldr2 .tldr-bento, .sv--tldr8 .tldr-mini, .sv--tldr10 .tldr-pano { grid-template-columns: 1fr; } .tldr-stats.is-bar { grid-template-columns: 1fr 1fr; } .sv--tldr9 .tldr-zebra__row, .sv--tldr9 .tldr-zebra__row:nth-child(even) { flex-direction: column; text-align: left; align-items: flex-start; gap: 12px; } } /* ========================================================= TLDR — Kompakt-Runde (11–16). Aufsätze auf 1 / 2 / 5 mit deutlich weniger Höhe: Icon neben Titel, Kurztext (point.s), dichte Raster, schmale Inline-Kennzahlen. 13 + 16 nutzen den mittleren Text (point.m, ein voller Satz) und einen schwarzen Vollbreiten-Abschnitt. ========================================================= */ /* gemeinsame kompakte Zeile (11 · 12 · 13 · 15 · 16) */ .tldr-crow { display: flex; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-surface); } .tldr-crow__ic { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-800); } .tldr-crow__ic svg { width: 17px; height: 17px; } .tldr-crow b { display: block; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: -0.02em; margin-bottom: 2px; } .tldr-crow p { font-size: 0.83rem; color: var(--ink-500); line-height: 1.42; } /* schmale Kennzahlen-Zeile */ .tldr-stats.is-slim { gap: 8px 24px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); } .tldr-stats.is-slim .tldr-stat { display: flex; align-items: baseline; gap: 7px; } .tldr-stats.is-slim .tldr-stat b { font-size: 1.2rem; } .tldr-stats.is-slim .tldr-stat span { font-size: 0.82rem; } /* ---- 11 · Grid Kompakt ---- */ .sv--tldr11 .tldr-cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } /* ---- 12 · Bento Kompakt ---- */ .sv--tldr12 .tldr-cbento { border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-surface); } .sv--tldr12 .tldr-cbento__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; padding: 22px clamp(20px, 3vw, 30px); background: var(--ink-950); color: var(--paper); } .sv--tldr12 .tldr-cbento__bar .eyebrow { color: rgba(255,255,255,0.6); } .sv--tldr12 .tldr-cbento__bar .eyebrow::before { background: rgba(255,255,255,0.4); } .sv--tldr12 .tldr-cbento__bar h2 { color: var(--paper); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-top: 5px; } .sv--tldr12 .tldr-cbento__bar .lab-cta { margin: 0; flex-shrink: 0; } .sv--tldr12 .tldr-cbento__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); } .sv--tldr12 .tldr-cbento__grid .tldr-crow { border: 0; border-radius: 0; } /* ---- 13 · Dark Kompakt · 16 · Split Dark — schwarzer Abschnitt über die volle Breite; Inhalt bleibt in der Container-Breite. ---- */ .sv-sec[data-tldr="13"], .sv-sec[data-tldr="16"] { background: var(--ink-950); } .sv--tldr13 .tldr-cdark, .sv--tldr16 .tldr-csplit--dark { color: var(--paper); } .sv--tldr13 .tldr-cdark .eyebrow, .sv--tldr16 .tldr-csplit--dark .eyebrow { color: rgba(255,255,255,0.6); } .sv--tldr13 .tldr-cdark .eyebrow::before, .sv--tldr16 .tldr-csplit--dark .eyebrow::before { background: rgba(255,255,255,0.4); } .sv--tldr13 .tldr-cdark h2, .sv--tldr16 .tldr-csplit--dark h2 { color: var(--paper); } .sv--tldr16 .tldr-csplit--dark .lab-head p { color: rgba(255,255,255,0.7); } .sv--tldr13 .tldr-cdark__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 26px; } .sv--tldr13 .tldr-cdark__head .lab-head { margin: 0; max-width: 620px; } .sv--tldr13 .tldr-cdark__head .tldr-stat b { color: var(--paper); } .sv--tldr13 .tldr-cdark__head .tldr-stat span { color: rgba(255,255,255,0.6); } .sv--tldr13 .tldr-cdark__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .sv--tldr13 .lab-cta { margin-top: 24px; } /* dunkle Kompakt-Zeilen (13 · 16) */ .sv--tldr13 .tldr-crow, .sv--tldr16 .tldr-crow { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); } .sv--tldr13 .tldr-crow__ic, .sv--tldr16 .tldr-crow__ic { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: var(--paper); } .sv--tldr13 .tldr-crow b, .sv--tldr16 .tldr-crow b { color: var(--paper); } .sv--tldr13 .tldr-crow p, .sv--tldr16 .tldr-crow p { color: rgba(255,255,255,0.62); } /* ---- 14 · Ledger ---- */ .sv--tldr14 .tldr-ledger { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); } .tldr-ledger__row { display: grid; grid-template-columns: 32px minmax(170px, 250px) 1fr; align-items: center; gap: 16px; padding: 15px clamp(16px, 3vw, 24px); } .tldr-ledger__row + .tldr-ledger__row { border-top: 1px solid var(--line); } .tldr-ledger__ic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--ink-50); color: var(--ink-800); } .tldr-ledger__ic svg { width: 17px; height: 17px; } .tldr-ledger__row b { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: -0.02em; } .tldr-ledger__d { font-size: 0.88rem; color: var(--ink-500); } .tldr-ledger__foot { border-top: 1px solid var(--line); padding: 16px clamp(16px, 3vw, 24px); background: var(--bg-canvas); } .tldr-ledger__foot .tldr-stats { gap: 10px 26px; } .tldr-ledger__foot .tldr-stat { display: flex; align-items: baseline; gap: 7px; } .tldr-ledger__foot .tldr-stat b { font-size: 1.15rem; } .tldr-ledger__foot .tldr-stat span { font-size: 0.82rem; } /* ---- 15 · Split Kompakt · 16 · Split Dark (gemeinsames Grid) ---- */ .tldr-csplit { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.8rem, 1rem + 3vw, 3.2rem); align-items: start; } .tldr-csplit__aside .lab-head { margin-bottom: 22px; } .tldr-csplit__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sv--tldr16 .tldr-csplit__foot { grid-column: 1 / -1; } .sv--tldr16 .tldr-csplit__foot .tldr-stats.is-slim { border-top-color: rgba(255,255,255,0.14); } .sv--tldr16 .tldr-csplit__foot .tldr-stat b { color: var(--paper); } .sv--tldr16 .tldr-csplit__foot .tldr-stat span { color: rgba(255,255,255,0.6); } /* ---- Responsive (11–16) ---- */ @media (max-width: 980px) { .sv--tldr11 .tldr-cgrid, .sv--tldr12 .tldr-cbento__grid, .sv--tldr13 .tldr-cdark__grid { grid-template-columns: 1fr 1fr; } .tldr-csplit { grid-template-columns: 1fr; } } @media (max-width: 620px) { .sv--tldr11 .tldr-cgrid, .sv--tldr12 .tldr-cbento__grid, .sv--tldr13 .tldr-cdark__grid, .tldr-csplit__list { grid-template-columns: 1fr; } .sv--tldr12 .tldr-cbento__bar .lab-cta, .sv--tldr12 .tldr-cbento__bar .lab-cta .btn { width: 100%; } .tldr-ledger__row { grid-template-columns: 32px 1fr; row-gap: 4px; } .tldr-ledger__ic { grid-row: span 2; align-self: start; } } /* ========================================================= Finales Layout — Zusatz-Bausteine der zusammengeführten Sections (Stimmen unter den Preisen, Fächer in der Struktur-Section, Eltern-Zugang-Nachbau). Bewusst am Dateiende, damit die Dark-Overrides in Quellreihenfolge gewinnen. ========================================================= */ /* ---- Stimmen unter den Preisen (#price, weißer Abschnitt) ---- */ .sv--price4 .price-voices { margin-top: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); text-align: center; } .sv--price4 .price-voices__h { text-align: center; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); letter-spacing: -0.02em; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); } .sv--price4 .price-voices__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 900px; margin-inline: auto; } .sv--price4 .price-voice { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--bg-surface); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; } .sv--price4 .price-voice blockquote { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-800); } .sv--price4 .price-voice figcaption { display: flex; align-items: center; gap: 12px; } .sv--price4 .price-voice__av { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--t, var(--ink-400)) 16%, var(--bg-surface)); color: var(--t, var(--ink-700)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; } .sv--price4 .price-voice figcaption b { display: block; font-size: 0.88rem; } .sv--price4 .price-voice figcaption em { font-style: normal; font-size: 0.8rem; color: var(--ink-500); } @media (max-width: 720px) { .price-voices__grid { grid-template-columns: 1fr; } } /* ---- Fächer-Übersicht in der Struktur-Section (#org, weißer Abschnitt) ---- */ .org-faecher { margin-top: clamp(2.4rem, 1.6rem + 3vw, 4rem); } .org-faecher__h { text-align: center; max-width: 62ch; margin: 0 auto clamp(1.4rem, 1rem + 1.5vw, 2.2rem); } .org-faecher__h b { display: block; font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); letter-spacing: -0.02em; margin-bottom: 6px; } .org-faecher__h span { font-size: 0.92rem; line-height: 1.6; color: var(--ink-600); } .org-faecher__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 940px; margin-inline: auto; } .org-fach { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: var(--radius-xl); border: 1px solid color-mix(in srgb, var(--t) 30%, var(--line)); background: color-mix(in srgb, var(--t) 7%, var(--bg-surface)); } .org-fach__av { width: 40px; height: 40px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--t) 22%, var(--bg-surface)); color: var(--t); display: flex; align-items: center; justify-content: center; } .org-fach__av svg { width: 21px; height: 21px; } .org-fach b { font-size: 1rem; letter-spacing: -0.01em; } .org-fach__m { font-size: 0.78rem; color: var(--ink-500); } .org-fach--add { border-style: dashed; border-color: var(--line-strong); background: var(--bg-surface); } .org-fach--add .org-fach__av { background: var(--ink-100); color: var(--ink-600); } @media (max-width: 900px) { .org-faecher__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .org-faecher__grid { grid-template-columns: 1fr; } } /* ---- Eltern-Zugang (#parent, schwarzer Abschnitt) — Nachbau app/eltern.html ---- `.ptx-kid`/`.ptx-report`/`.ptx-chip`/`.ptx-d`/`.ptx-kgrid`/`.ptx-k`/`.ptx-main` bleiben — `parentKidCard`/`parentReport` werden noch von den (inerten) Feature-Unterseiten referenziert (FEATURE_PAGES → feature-chat). Der LIVE-Abschnitt selbst nutzt sie nicht mehr, siehe `.elt-*` weiter unten. */ .ptx-main { display: flex; flex-direction: column; gap: 16px; } .ptx-kid { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-xl); background: #17191d; overflow: hidden; } .ptx-kid > summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; } .ptx-kid > summary::-webkit-details-marker { display: none; } .ptx-kid__av { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--fach-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .ptx-kid__id { flex: 1; min-width: 0; } .ptx-kid__id b { display: block; color: var(--paper); font-size: 0.98rem; } .ptx-kid__id span { font-size: 0.8rem; color: rgba(255,255,255,0.55); } .ptx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; } .ptx-chip--g { background: rgba(143,227,180,0.16); color: #8fe3b4; } .ptx-chip--g i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ptx-kid__tog { position: relative; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.1); } .ptx-kid__tog::before, .ptx-kid__tog::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background: rgba(255,255,255,0.7); transform: translate(-50%,-50%); transition: transform 200ms var(--ease-out); } .ptx-kid__tog::after { transform: translate(-50%,-50%) rotate(90deg); } .ptx-kid[open] .ptx-kid__tog::after { transform: translate(-50%,-50%) rotate(0); } .ptx-kid__body { padding: 0 20px 20px; } .ptx-kgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ptx-k { border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); padding: 14px; } .ptx-k b { display: block; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.02em; color: var(--paper); } .ptx-k span { font-size: 0.76rem; color: rgba(255,255,255,0.55); } .ptx-kid__hint { margin: 14px 0 0; font-size: 0.8rem; line-height: 1.55; color: rgba(255,255,255,0.5); } .ptx-report { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-xl); background: #17191d; padding: 18px 20px; } .ptx-report__top { display: flex; justify-content: space-between; align-items: baseline; } .ptx-report__top b { color: var(--paper); font-size: 0.92rem; } .ptx-report__top span { font-family: var(--font-mono); font-size: 0.74rem; color: rgba(255,255,255,0.4); } .ptx-report ul { list-style: none; padding: 0; margin: 12px 0; } .ptx-report li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.84rem; color: rgba(255,255,255,0.8); } .ptx-report li em { margin-left: auto; font-style: normal; font-size: 0.74rem; color: rgba(255,255,255,0.4); } .ptx-d { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ptx-d.g { background: var(--gruen); } .ptx-d.y { background: var(--gelb); } .ptx-d.r { background: var(--rot); } .ptx-report__foot { font-size: 0.8rem; color: rgba(255,255,255,0.6); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px; } .ptx-side { display: flex; flex-direction: column; gap: 12px; } .ptx-card { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); padding: 18px 20px; } .ptx-card b { display: block; color: var(--paper); font-size: 0.95rem; margin-bottom: 5px; } .ptx-card p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: rgba(255,255,255,0.6); } .ptx-side .btn { margin-top: 4px; } /* ---- Feste Seiten-Struktur (Text+Argumente links, Demo rechts) ---- Einzige Ansicht der Section, kein Dev-Panel mehr (LAB_SECTIONS: parent → fixed '1'). */ .pt-2col { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.6rem, 1rem + 3vw, 3rem); align-items: start; } .pt-2col__text .lab-head { text-align: left; } .pt-2col__cards { margin-top: 24px; } .pt-2col__demo { display: flex; justify-content: center; } /* ---- Eltern-Zugang-Demo (.elt-demo) — Nachbau app/eltern.html als App-Fenster (Browser-Chrome-Leiste + feste Höhe, scrollt statt zu wachsen — wie `.kvl`/`.orgx`/`.chat-app`): drei Kind-Karten (`.elt-kid-card`, 1:1 `kindCard()`/`kzGrid()` aus app/eltern.html), eine aufgeklappt mit dem 7-Kachel-Wochenüberblick, die anderen zu (native
). ---- */ .elt-demo { width: 100%; max-width: 600px; text-align: left; background: #14161a; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: 0 40px 90px -36px rgba(0,0,0,0.6); } .elt-demo__bar { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-bottom: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); } .elt-demo__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); } .elt-demo__bar span { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255,255,255,0.4); } .elt-demo__in { height: 480px; overflow-y: auto; padding: 20px 22px; } .elt-demo__in::-webkit-scrollbar { width: 7px; } .elt-demo__in::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius: 4px; } .elt-kid-card { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); background: rgba(255,255,255,0.02); overflow: hidden; margin-bottom: 10px; } .elt-kid-card:last-child { margin-bottom: 0; } .elt-kid-card > summary { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; list-style: none; } .elt-kid-card > summary::-webkit-details-marker { display: none; } .elt-kid-card > summary:hover { background: rgba(255,255,255,0.03); } .elt-kid-card[open] > summary { border-bottom: 1px solid rgba(255,255,255,0.1); } .elt-kid-card.is-pending > summary { opacity: 0.65; } .elt-kid-card__av { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; } .elt-kid-card__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; } .elt-kid-card__meta b { color: var(--paper); font-size: 0.92rem; } .elt-kid-card__meta span { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 1px; } .elt-kid-card__chev { flex-shrink: 0; width: 15px; height: 15px; color: rgba(255,255,255,0.35); transition: transform 160ms var(--ease-out); } .elt-kid-card[open] .elt-kid-card__chev { transform: rotate(90deg); } .elt-kid-card__body { padding: 0 16px 16px; } .elt-kid-card__hint { margin: 14px 0 0; font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.45); } .elt-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 0.66rem; font-weight: 700; padding: 4px 9px; border-radius: var(--radius-full); white-space: nowrap; } .elt-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .elt-chip--gruen { background: rgba(143,227,180,0.16); color: #8fe3b4; } .elt-chip--gelb { background: color-mix(in srgb, var(--gelb) 20%, transparent); color: var(--gelb); } .elt-chip--rot { background: color-mix(in srgb, var(--rot) 20%, transparent); color: #ff8f87; } .elt-kzgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .elt-kz { border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); background: rgba(255,255,255,0.03); padding: 10px 11px; } .elt-kz b { display: block; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.02em; color: var(--paper); } .elt-kz span { font-size: 0.65rem; color: rgba(255,255,255,0.5); } @media (max-width: 900px) { .pt-2col { grid-template-columns: 1fr; } .pt-2col__demo { order: -1; } .ptx-kgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ptx-kgrid { grid-template-columns: 1fr; } .elt-kzgrid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= Preise — Picker (fest gewählt): Abrechnungs-Umschalter + Kinderzahl (1–4-Segment) als zwei Pillen in EINER horizontalen Reihe. ========================================================= */ .sv--price4 .price-ctrl--v1 { flex-wrap: nowrap; justify-content: center; align-items: center; gap: 12px 48px; } .sv--price4 .price-ctrl--v1 + .price-seatnote { text-align: center; } .sv--price4 .price-seats--seg { border: 0; background: none; padding: 0; gap: 10px; } .sv--price4 .price-seats--seg .price-seats__cap { font-size: 0.78rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; } .sv--price4 .price-seats__segrow { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--radius-full); background: var(--ink-100); } .sv--price4 .price-seats__segrow button { min-width: 34px; height: 32px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 700; color: var(--ink-600); transition: background 120ms var(--ease-out), color 120ms var(--ease-out); } .sv--price4 .price-seats__segrow button:hover { color: var(--ink-950); } .sv--price4 .price-seats__segrow button.is-on { background: var(--bg-surface); color: var(--ink-950); box-shadow: var(--shadow-sm); } /* Kein Grün im Familien-Zustand (Text, Zahlen, Fläche der Kinderzahl). */ .sv--price4 .price-seats--seg.is-family { background: none; border-color: transparent; } .sv--price4 .price-seats--seg.is-family .price-seats__cap { color: var(--ink-500); } .sv--price4 .price-seats--seg.is-family .price-seats__segrow button.is-on { color: var(--ink-950); } /* ---- Stimmen: Avatar-Reihe + hervorgehobenes Zitat ---- */ .sv--price4 .price-voices__avrow { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .sv--price4 .price-voices__avrow .price-voice__av { width: 44px; height: 44px; margin-left: -10px; border: 2px solid var(--bg-canvas); } .sv--price4 .price-voices__avrow .price-voice__av:first-child { margin-left: 0; } .sv--price4 .price-voices__more { margin-left: 12px; font-size: 0.85rem; font-weight: 700; color: var(--ink-500); } .sv--price4 .price-voices__lead { max-width: 62ch; margin: 0 auto; text-align: center; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 1vw, 1.55rem); line-height: 1.5; letter-spacing: -0.01em; } .sv--price4 .price-voices__cite { display: block; margin-top: 12px; text-align: center; font-style: normal; font-size: 0.85rem; color: var(--ink-500); } @media (max-width: 620px) { .price-ctrl--v1 { flex-wrap: wrap; gap: 12px 24px; } } /* ========================================================= Unterseiten (preise · ueber-uns · faq) — gleiche Optik wie die Startseite: schwarze Vollflächen-Abschnitte im Wechsel mit weißen, deren Ecken gegen Schwarz rund geschnitten sind. Diese Seiten laden marketing.css + landing-lab.css und bauen mit .section + diesen Modifiern (kein Lab-Render-System). ========================================================= */ /* schwarzer Abschnitt */ .mkt-dark { background: var(--ink-950); color: rgba(255,255,255,0.82); } .mkt-dark .eyebrow { color: rgba(255,255,255,0.6); } .mkt-dark .eyebrow::before { background: rgba(255,255,255,0.4); } .mkt-dark h1, .mkt-dark h2, .mkt-dark h3, .mkt-dark h4 { color: var(--paper); } .mkt-dark .section-head p, .mkt-dark .lab-lead, .mkt-dark > .container > p { color: rgba(255,255,255,0.7); } /* weißer Abschnitt mit rundem Rand + schwarzem Eck-Zwickel gegen die Nachbar-Schwarzfläche (Technik wie .sv-sec[data-*] auf der Startseite) */ .mkt-cut { isolation: isolate; overflow: visible; background: var(--bg-canvas); } .mkt-cut--all { border-radius: var(--section-radius); } .mkt-cut--top { border-radius: var(--section-radius) var(--section-radius) 0 0; } .mkt-cut--bottom { border-radius: 0 0 var(--section-radius) var(--section-radius); } .mkt-cut::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .mkt-cut--all::before { background: radial-gradient(circle var(--section-radius) at 100% 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 100% 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left bottom / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right bottom / var(--section-radius) var(--section-radius) no-repeat; } .mkt-cut--top::before { background: radial-gradient(circle var(--section-radius) at 100% 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left top / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 100%, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right top / var(--section-radius) var(--section-radius) no-repeat; } .mkt-cut--bottom::before { background: radial-gradient(circle var(--section-radius) at 100% 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) left bottom / var(--section-radius) var(--section-radius) no-repeat, radial-gradient(circle var(--section-radius) at 0 0, transparent 0 var(--section-radius), var(--ink-950) var(--section-radius)) right bottom / var(--section-radius) var(--section-radius) no-repeat; } /* CTA-Abschnitt der Unterseiten = schwarze Vollfläche, .cta-band ohne eigene dunkle Bande (analog #cta auf der Startseite) */ .mkt-dark .cta-band { background: transparent; border-radius: 0; padding: 0; box-shadow: none; } .mkt-dark .cta-band::before { display: none; } /* Preisseite: diagonale weiße „Bestseller"-Ecke auf der dunklen Karte (wie #price auf der Startseite). */ .pricing-grid .price-card--featured { overflow: hidden; } .pricing-grid .price-card--featured .price-card__tag { top: 20px; right: -56px; left: auto; width: 190px; justify-content: center; gap: 6px; padding: 7px 0; border-radius: 0; background: var(--paper); color: var(--ink-950); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; transform: rotate(45deg); transform-origin: center; box-shadow: 0 8px 20px -8px rgba(16,18,20,0.55); z-index: 3; } /* ueber-uns: Werte-Abschnitt auf Schwarz */ .about-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: clamp(1.6rem, 1rem + 2vw, 2.6rem); } .about-values__grid > div { border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); padding: 20px 22px; } .about-values__grid h4 { font-size: 0.98rem; margin: 0 0 5px; } .about-values__grid p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: rgba(255,255,255,0.62); } @media (max-width: 620px) { .about-values__grid { grid-template-columns: 1fr; } } /* faq: Gruppen-Zwischenüberschrift in der .faq-bold-Liste */ .faq-bold__group { margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0 2px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); } .faq-bold__group:first-child { margin-top: 0; } /* Modifizierte Abschnitte behalten volles vertikales Padding (der „.section + .section { padding-top: 0 }"-Merge greift hier nicht). */ .section.mkt-dark, .section.mkt-cut { padding-block: var(--section-y); } /* Preisseite: die weißen Familien-Karten im schwarzen Abschnitt behalten dunklen Text (nicht die helle .mkt-dark-Textfarbe erben). Die hervorgehobene Karte ist ohnehin dunkel (marketing.css). */ .mkt-dark .pricing-grid .price-card:not(.price-card--featured) { color: var(--ink-700); } .mkt-dark .pricing-grid .price-card:not(.price-card--featured) h3, .mkt-dark .pricing-grid .price-card:not(.price-card--featured) .price-card__amount b { color: var(--ink-950); } .mkt-dark .pricing-grid .price-card:not(.price-card--featured) .price-card__desc, .mkt-dark .pricing-grid .price-card:not(.price-card--featured) .price-card__note, .mkt-dark .pricing-grid .price-card:not(.price-card--featured) .price-card__amount span { color: var(--ink-500); } .mkt-dark .pricing-grid .price-card:not(.price-card--featured) .price-card__list li { color: var(--ink-700); }