/* ============================================================ Königsklassenfußball — main.css Handgeschrieben, kein Build-Step. Gegliedert in Module m00–m15. Design-Tokens 1:1 aus der Live-Seite (Plan §3). ============================================================ */ /* ============ m00 · FONTS (self-hosted, WOFF2) ============ */ @font-face { font-family: 'Anton'; src: url('../fonts/anton-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ============ m01 · DESIGN-TOKENS ============ */ :root { /* Akzent */ --kk-red: #f44336; --kk-red-hover: rgba(244, 67, 54, .9); --kk-red-soft: rgba(244, 67, 54, .14); /* Strukturflächen */ --kk-header-bg: rgba(8, 10, 15, .92); --kk-header-solid: #080a0f; --kk-dark: #101010; --kk-footer-bg: #0a0a0a; --kk-bottom-bg: #000000; /* Dark-Design: Hintergründe & Text */ --kk-white: #ffffff; --kk-bg: #0c0c0c; /* Seiten-Hintergrund (schwarz) */ --kk-surface: #18181b; /* Karten/erhöhte Flächen */ --kk-surface-2: #131316; /* alternierende Sektionen */ --kk-text: #eceff3; /* Fließtext hell */ --kk-text-2: rgba(236, 239, 243, .82); --kk-text-3: rgba(236, 239, 243, .58); --kk-menu: #eceff3; --kk-divider: rgba(255, 255, 255, .1); --kk-divider-on-dark: rgba(255, 255, 255, .12); /* Typo */ --kk-font-head: 'Anton', 'Arial Narrow', system-ui, sans-serif; --kk-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Maße */ --kk-wrap: 1200px; --kk-wrap-narrow: 820px; --kk-pad: clamp(1rem, 4vw, 2rem); --kk-section-y: clamp(3.5rem, 8vw, 7rem); --kk-radius: 12px; --kk-radius-lg: 20px; --kk-radius-pill: 999px; --kk-shadow: 0 10px 30px rgba(0, 0, 0, .08); --kk-shadow-lg: 0 24px 60px rgba(0, 0, 0, .14); --kk-topbar-h: 58px; --kk-header-h: 76px; --kk-ease: cubic-bezier(.22, .61, .36, 1); --kk-fast: .2s; --kk-med: .35s; } /* ============ m02 · RESET / BASE ============ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kk-header-h) + 12px); overflow-x: hidden; } body { font-family: var(--kk-font-body); font-size: 1rem; line-height: 1.65; color: var(--kk-text); background: var(--kk-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, picture { display: block; max-width: 100%; height: auto; } a { color: var(--kk-red); text-decoration: none; transition: color var(--kk-fast) var(--kk-ease); } a:hover { color: var(--kk-red-hover); } ul, ol { padding: 0; list-style: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } :focus-visible { outline: 2px solid var(--kk-red); outline-offset: 3px; border-radius: 4px; } /* ============ m03 · TYPOGRAFIE ============ */ h1, h2, h3, h4, h5, h6 { font-family: var(--kk-font-head); font-weight: 400; line-height: 1.08; color: var(--kk-text); letter-spacing: .01em; } h1 { font-size: clamp(2.2rem, 5.2vw, 2.8125rem); text-transform: uppercase; } /* 45px */ h2 { font-size: clamp(1.9rem, 4.4vw, 2.1875rem); text-transform: uppercase; } /* 35px */ h3 { font-size: clamp(1.55rem, 3.4vw, 1.875rem); text-transform: uppercase; } /* 30px */ h4 { font-size: clamp(1.45rem, 3vw, 1.75rem); text-transform: uppercase; } /* 28px */ h5 { font-size: 1.25rem; text-transform: uppercase; } h6 { font-size: 1.05rem; text-transform: uppercase; } p { color: var(--kk-text-2); } p + p { margin-top: 1rem; } /* Blocksatz für Fließtext (wie auf der alten Website); Silbentrennung gegen große Wortlücken (html lang=de). */ p { -webkit-hyphens: auto; hyphens: auto; } /* Zentrierte Köpfe, Hero, CTA-/Ergebnis-Blöcke und Statistik behalten ihre Ausrichtung. */ .hero-inner p, .section-stub p, .footer-bottom p, .zahlen-grid p, .foerderung-head p, .kennenlernen-head p, .kennenlernen-cta p, .anerkennungen-head p, .stories-head p, .zahlen-head p, .talente-head p, .talente-more-wrap p, .faq-head p, .reviews-head p, .reviews-cta p, .kontakt-head p, .anny-page-head p, .ms-result p, .kk-success-inner p, .lp-cta p, .lp-benefit p, .lp-step p, .lp-steps-head p, .lp-steps-cta p, .lp-cta-big-inner p { text-align: center; } strong, b { font-weight: 600; } blockquote { font-size: 1.15rem; line-height: 1.5; color: var(--kk-text); border-left: 4px solid var(--kk-red); padding-left: 1.25rem; } /* 4.8.0: Das Versalien-Label über den Überschriften ist ersatzlos entfernt. Die Überschrift steht allein, Hierarchie entsteht über Größe, Gewicht und Weißraum. Ergänzender Kontext steht als Absatz UNTER der Überschrift. */ /* Größe in der Klasse fixiert, damit der Tag (h2→h3) frei wählbar ist, ohne die Optik zu ändern. */ .section-title { font-size: clamp(1.9rem, 4.4vw, 2.1875rem); margin-bottom: 1rem; } h1.section-title { font-size: clamp(2.2rem, 5.2vw, 2.8125rem); } /* ============ m04 · LAYOUT ============ */ .wrap { width: 100%; max-width: var(--kk-wrap); margin-inline: auto; padding-inline: var(--kk-pad); } .wrap-narrow { max-width: var(--kk-wrap-narrow); } .section { padding-block: var(--kk-section-y); } .section + .section { border-top: 0; } main { display: block; } /* ============ m05 · BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; /* zentriert auch mehrzeiligen Button-Text (Umbruch auf Mobile) */ gap: .5em; font-family: var(--kk-font-body); font-weight: 700; font-size: .9375rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; padding: .9em 1.6em; border-radius: var(--kk-radius-pill); border: 2px solid transparent; transition: background var(--kk-fast) var(--kk-ease), color var(--kk-fast) var(--kk-ease), border-color var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease), box-shadow var(--kk-fast) var(--kk-ease); will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--kk-red); color: #fff; box-shadow: 0 8px 20px rgba(244, 67, 54, .28); } .btn-primary:hover { background: var(--kk-red-hover); color: #fff; box-shadow: 0 12px 28px rgba(244, 67, 54, .38); } .btn-ghost { color: var(--kk-menu); border-color: var(--kk-divider-on-dark); } .btn-ghost:hover { color: #fff; border-color: var(--kk-red); background: var(--kk-red-soft); } .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .arr { font-size: 1.1em; line-height: 1; } /* ============ m06 · A11Y / REVEAL ============ */ .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 1000; background: var(--kk-red); color: #fff; padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600; transition: top var(--kk-fast) var(--kk-ease); } .skip-link:focus { top: 1rem; color: #fff; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--kk-ease), transform .7s var(--kk-ease); } .reveal.is-visible { opacity: 1; transform: none; } /* ============ m07 · HEADER — TOPBAR ============ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--kk-header-solid); border-bottom: 1px solid var(--kk-divider-on-dark); transition: box-shadow var(--kk-fast) var(--kk-ease); } body.is-scrolled .site-header { box-shadow: 0 6px 24px rgba(0, 0, 0, .3); } /* WP Admin-Bar: Header-Position nach unten verschieben damit Topbar sichtbar bleibt */ .admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } } /* 4.4.2: WordPress stellt die Admin-Leiste unter 601 px auf position:absolute, sie scrollt also weg. Ohne diese Zeile behält der fixe Header seinen 46-Pixel-Abstand und hängt mit einer Lücke im Bild (nur für angemeldete Nutzer sichtbar). */ @media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } } /* Hero + Main brauchen padding-top damit Header (fix) nicht überlappt */ body { padding-top: calc(var(--kk-topbar-h) + 76px); } /* Header-Inhalt rechts/links begrenzt (an Content-Breite angelehnt). */ .site-header .wrap { max-width: 1280px; padding-inline: var(--kk-pad); } .topbar { border-bottom: 1px solid var(--kk-divider-on-dark); font-size: .8125rem; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--kk-topbar-h); gap: 1rem; } .topbar-contact { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; } .topbar-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--kk-menu); opacity: .85; } .topbar-link:hover { color: #fff; opacity: 1; } .topbar-link svg { color: var(--kk-red); flex: none; } .topbar-hours { cursor: default; } /* ============ m08 · HEADER — MAINBAR / NAV ============ */ .mainbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; flex: none; } .kk-logo { height: 38px; width: auto; } .brand-text { color: #fff; font-family: var(--kk-font-head); font-size: 1.4rem; text-transform: uppercase; } .mainnav-list { display: flex; align-items: center; gap: 1.6rem; } .mainnav-list a { font-family: var(--kk-font-body); font-weight: 500; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kk-menu); padding-block: .4rem; position: relative; white-space: nowrap; } .mainnav-list a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--kk-red); transition: width var(--kk-fast) var(--kk-ease); } .mainnav-list a:hover { color: #fff; } .mainnav-list a:hover::after { width: 100%; } .header-cta { display: flex; align-items: center; gap: .6rem; flex: none; } /* Dropdown „Über uns" (Desktop) */ .mainnav-list .has-drop { position: relative; } .mainnav-list .has-drop > a { display: inline-flex; align-items: center; gap: .3rem; } .nav-chevron { transition: transform var(--kk-fast) var(--kk-ease); flex: none; } .subnav { position: absolute; top: calc(100% + 8px); left: 50%; transform: translate(-50%, 8px); min-width: 200px; background: var(--kk-header-solid); border: 1px solid var(--kk-divider-on-dark); border-radius: var(--kk-radius); padding: .4rem; box-shadow: var(--kk-shadow-lg); display: flex; flex-direction: column; gap: .1rem; z-index: 10; opacity: 0; visibility: hidden; transition: opacity var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease), visibility var(--kk-fast); } .mainnav-list .has-drop:hover .subnav, .mainnav-list .has-drop:focus-within .subnav { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .mainnav-list .has-drop:hover .nav-chevron { transform: rotate(180deg); } .subnav a { padding: .55rem .8rem; border-radius: 8px; text-transform: none; letter-spacing: 0; font-size: .9rem; white-space: nowrap; } .subnav a::after { display: none; } .subnav a:hover { background: var(--kk-red-soft); color: #fff; } /* ============ m09 · HAMBURGER ============ */ .mob-menu-btn { display: none; width: 44px; height: 44px; position: relative; } .mob-menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--kk-menu); border-radius: 2px; transition: transform var(--kk-fast) var(--kk-ease), opacity var(--kk-fast) var(--kk-ease); } .mob-menu-btn span:nth-child(1) { top: 15px; } .mob-menu-btn span:nth-child(2) { top: 21px; } .mob-menu-btn span:nth-child(3) { top: 27px; } body.mob-open .mob-menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.mob-open .mob-menu-btn span:nth-child(2) { opacity: 0; } body.mob-open .mob-menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ============ m10 · MOBILE-MENÜ ============ */ .mob-menu { position: fixed; inset: 0; z-index: 99; background: var(--kk-dark); padding: calc(var(--kk-header-h) + 1.5rem) var(--kk-pad) 2rem; opacity: 0; visibility: hidden; transition: opacity var(--kk-med) var(--kk-ease), visibility var(--kk-med); overflow-y: auto; overflow-x: hidden; } body.mob-open .mob-menu { opacity: 1; visibility: visible; } .mob-menu-inner { display: flex; flex-direction: column; gap: 2rem; } .mob-nav-list { display: flex; flex-direction: column; gap: .25rem; } .mob-link { display: block; font-family: var(--kk-font-head); text-transform: uppercase; font-size: 1.75rem; color: var(--kk-menu); padding: .5rem 0; border-bottom: 1px solid var(--kk-divider-on-dark); } .mob-link:hover { color: var(--kk-red); } .mob-has-sub .mob-link-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; } .mob-has-sub .mob-link-toggle .nav-chevron { transition: transform var(--kk-fast) var(--kk-ease); } .mob-has-sub .mob-link-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); } .mob-sub { padding-left: 1rem; } .mob-sub[hidden] { display: none; } .mob-sub-link { display: block; font-family: var(--kk-font-body); text-transform: none; font-size: 1.05rem; color: rgba(236, 239, 243, .8); padding: .5rem 0; } .mob-sub-link:hover { color: var(--kk-red); } .mob-cta { width: 100%; } .mob-social { justify-content: flex-start; } /* ============ m11 · FOOTER ============ */ .site-footer { background: var(--kk-footer-bg); color: var(--kk-menu); } .footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; padding-block: clamp(2.5rem, 6vw, 4rem); } .footer-logo { height: 40px; margin-bottom: 1rem; } .footer-tagline { color: rgba(236, 239, 243, .7); max-width: 30ch; margin-bottom: 1.25rem; } .footer-col-title { font-size: 1.05rem; text-transform: uppercase; color: #fff; margin-bottom: 1rem; } .footer-contact a, .footer-contact span { display: block; color: rgba(236, 239, 243, .8); margin-bottom: .5rem; } .footer-contact a:hover { color: var(--kk-red); } .footer-legal-list a { color: rgba(236, 239, 243, .8); display: block; padding: .25rem 0; } .footer-legal-list a:hover { color: var(--kk-red); } .footer-legal .footer-cookie-btn { display: block; background: none; border: 0; padding: .25rem 0; margin: 0; color: rgba(236, 239, 243, .8); font: inherit; text-align: left; cursor: pointer; } .footer-legal .footer-cookie-btn:hover { color: var(--kk-red); } .footer-lp-link { display: inline-block; margin-top: 1.25rem; color: #eceff3; font-weight: 700; font-size: 1rem; } .footer-lp-link:hover { color: var(--kk-red); } .footer-bottom { background: var(--kk-bottom-bg); } .footer-bottom p { color: rgba(236, 239, 243, .55); font-size: .85rem; text-align: center; padding-block: 1.1rem; } .fwn-credit { color: inherit; text-decoration: none; font-weight: 600; background: linear-gradient(110deg, #9ccf92, #6ab775, #4fb373, #21874a, #6ab775, #9ccf92); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; background-position: 0 0; transition: background-position .5s ease; } .fwn-credit:hover { background-position: -110% 0; } /* ============ m12 · SOCIAL-LINKS ============ */ .social-links { display: flex; align-items: center; gap: .5rem; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--kk-menu); border: 1px solid var(--kk-divider-on-dark); transition: color var(--kk-fast) var(--kk-ease), border-color var(--kk-fast) var(--kk-ease), background var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease); } .social-link:hover { color: #fff; background: var(--kk-red); border-color: var(--kk-red); transform: translateY(-2px); } .topbar-social .social-link { width: 30px; height: 30px; border: 0; } /* ============ m13 · SECTION-STUB (V1-Platzhalter) ============ */ .section-stub { text-align: center; background: var(--kk-surface-2); border-top: 1px solid var(--kk-divider); } .section-stub:nth-of-type(even) { background: var(--kk-surface); } .section-stub-note { color: var(--kk-text-3); max-width: 46ch; margin-inline: auto; } /* ============ m14 · PAGE / ARCHIVE / SEARCH ============ */ .page-article { padding-block: var(--kk-section-y); } .page-article-head { margin-bottom: 1.5rem; } .entry-content :is(h2, h3, h4) { margin-top: 2rem; margin-bottom: .75rem; } .entry-content :is(p, ul, ol) { margin-bottom: 1rem; } .entry-content :is(ul, ol) { padding-left: 1.25rem; } .entry-content ul { list-style: disc; } .entry-content ol { list-style: decimal; } .entry-content a { text-decoration: underline; } .archive-wrap { padding-block: var(--kk-section-y); } .archive-head { margin-bottom: 2rem; } .post-card { padding-block: 1.5rem; border-bottom: 1px solid var(--kk-divider); } .post-card-title { font-size: 1.5rem; } .search-form { display: flex; gap: .5rem; max-width: 420px; margin-top: 1rem; } .search-field { flex: 1; padding: .7rem 1rem; border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); font: inherit; } /* ============ m15 · RESPONSIVE ============ */ @media (max-width: 960px) { .mainnav, .header-anny, .header-kennenlern { display: none; } .mob-menu-btn { display: block; } .header-cta { gap: 0; } /* Mobile-Header wie alte Seite: ohne Info-Leiste, transparent zu Beginn, kompakt, fix (wächst nicht). */ .topbar { display: none; } .mainbar-inner { min-height: 58px; } .kk-logo { height: 30px; } body { padding-top: 58px; } .topbar { display: none; } } @media (max-width: 768px) { .topbar-social { display: none; } .topbar-contact { gap: 1rem; font-size: .75rem; } .topbar-hours { display: none; } .footer-inner { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 480px) { .topbar-link span:not(.screen-reader-text) { font-size: .75rem; } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ============ m16 · HERO ============ */ .hero { position: relative; min-height: calc(100vh - var(--kk-header-h, 116px)); display: flex; align-items: center; overflow: hidden; background: var(--kk-dark); } @media (max-width: 960px) { /* Hero-Höhe beim Laden in --vph einfrieren → kein Sprung beim Browserleisten-Toggle in In-App-Browsern (Instagram/Chrome-iOS); 100svh = Fallback ohne JS. Steht nach der Basis-Regel und gewinnt daher mobil. */ .hero { min-height: var(--vph, 100svh); } } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: kkKenBurns 20s ease-in-out infinite alternate; } .hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,10,15,.5) 0%, rgba(8,10,15,.72) 100%); } .hero-inner { position: relative; z-index: 2; color: #fff; max-width: 920px; margin-inline: auto; text-align: center; padding-block: clamp(2.5rem, 6vh, 4rem); } .hero-title { color: #fff; font-size: clamp(2.4rem, 6.4vw, 4.25rem); line-height: 1.03; } .hero-since { display: block; color: var(--kk-red); margin-top: .5rem; font-size: clamp(1rem, 2.4vw, 1.6rem); letter-spacing: .1em; } .hero-sub { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2.1vw, 1.3rem); line-height: 1.5; max-width: 62ch; margin: 1.4rem auto 0; } .hero-cta { margin-top: 2.2rem; } /* Hero Intro-Animation (Ersatz für Preloader): Schrift fliegt beim ersten Laden rein. Läuft per CSS direkt beim Laden — funktioniert ohne JS (ganze Headline) und mit JS (Wort-für-Wort-Stagger). Reduced-Motion wird über die globale Regel auf 0 gesetzt. */ .hero-title { animation: kkHeroRise .85s cubic-bezier(.22,1,.36,1) both; } .hero-title.is-split { animation: none; } /* JS hat in Wörter gesplittet */ .hero-word { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.03; padding-bottom: .02em; } .hero-word-in { display: inline-block; transform: translateY(115%) rotate(4deg); opacity: 0; animation: kkHeroWord .8s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--d, 0ms); } .hero-title.is-split .hero-since { display: block; transform: translateY(24px); opacity: 0; animation: kkHeroRise .7s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--since-d, .5s); } .hero-sub { animation: kkHeroRise .75s cubic-bezier(.22,1,.36,1) both; animation-delay: .55s; } .hero-cta { animation: kkHeroRise .75s cubic-bezier(.22,1,.36,1) both; animation-delay: .72s; } @keyframes kkHeroWord { from { transform: translateY(115%) rotate(4deg); opacity: 0; } to { transform: translateY(0) rotate(0); opacity: 1; } } @keyframes kkHeroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .btn-lg { font-size: 1.02rem; padding: 1.05em 2.1em; } @keyframes kkKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } /* ============ m17 · PHILOSOPHIE (Entwicklung & Anspruch) ============ */ .philosophie-head { max-width: 860px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .philosophie-video { width: 100%; margin-bottom: clamp(2rem, 4.5vw, 3.25rem); } .philosophie-text { margin-bottom: clamp(2rem, 4vw, 3rem); } .philosophie-text p { margin-bottom: 1rem; } .philosophie-sub { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: 1.75rem 0 .6rem; } .philosophie-quote { font-family: var(--kk-font-body); font-style: italic; font-size: 1.12rem; line-height: 1.55; color: #fff; background: var(--kk-surface); border-left: 4px solid var(--kk-red); padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow); margin-bottom: clamp(2rem, 4vw, 3rem); } .philosophie-points-head { margin-bottom: clamp(1.5rem, 3vw, 2rem); } .philosophie-points-head h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); } .philosophie-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } .point { display: flex; gap: 1rem; } .point-icon { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--kk-red-soft); color: var(--kk-red); display: grid; place-items: center; } .point-icon svg { width: 26px; height: 26px; } .point-text h4 { font-family: var(--kk-font-body); font-weight: 600; text-transform: none; font-size: 1.05rem; line-height: 1.25; margin-bottom: .3rem; color: var(--kk-text); } .point-text p { font-size: .92rem; line-height: 1.5; color: var(--kk-text-3); } /* gestaffeltes Reveal der Punkte */ .philosophie-points .point { transition-delay: calc(var(--i, 0) * 60ms); } .point:nth-child(2){--i:1;} .point:nth-child(3){--i:2;} .point:nth-child(4){--i:3;} .point:nth-child(5){--i:4;} .point:nth-child(6){--i:5;} .point:nth-child(7){--i:6;} @media (max-width: 860px) { .philosophie-points { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .philosophie-points { grid-template-columns: 1fr; } } /* ============ m18 · STANDORT ============ */ .standort { background: var(--kk-surface-2); } .standort-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); } .standort-body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .standort-text p { margin-bottom: 1rem; } .standort-kc-logo-wrap { text-align: center; margin: clamp(2rem, 5vw, 3.25rem) 0; } .standort-kc-logo { height: clamp(64px, 11vw, 108px); width: auto; display: inline-block; transition: transform var(--kk-fast) var(--kk-ease); } .standort-kc-logo-wrap a:hover .standort-kc-logo { transform: scale(1.04); } .standort-gallery-head { margin-top: clamp(2.5rem, 5vw, 4rem); margin-bottom: 1.25rem; } /* Bento-Grid für 5 Bilder mit unterschiedlich großen Kacheln (Desktop). */ .standort-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 210px); gap: clamp(.6rem, 1.2vw, 1rem); } .standort-gallery-item { display: block; overflow: hidden; border-radius: var(--kk-radius); } .standort-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-med) var(--kk-ease); } .standort-gallery-item:hover img { transform: scale(1.05); } .standort-gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .standort-gallery-item:nth-child(2) { grid-column: span 2; grid-row: span 1; } .standort-gallery-item:nth-child(3) { grid-column: span 1; grid-row: span 1; } .standort-gallery-item:nth-child(4) { grid-column: span 1; grid-row: span 1; } .standort-gallery-item:nth-child(5) { grid-column: span 4; grid-row: span 1; } @media (max-width: 860px) { .standort-body { grid-template-columns: 1fr; } } /* Mobile: horizontaler Swipe-Slider statt Grid. */ @media (max-width: 680px) { .standort-gallery { display: flex; grid-auto-rows: auto; gap: .75rem; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; margin-inline: calc(var(--kk-pad) * -1); padding-inline: var(--kk-pad); } .standort-gallery::-webkit-scrollbar { display: none; } .standort-gallery-item { flex: 0 0 82%; scroll-snap-align: center; } .standort-gallery-item:nth-child(n) { grid-column: auto; grid-row: auto; } .standort-gallery-item img { height: 230px; } } /* ============ m19 · TRAINER ============ */ .trainer-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); } .trainer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); } .trainer-card { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); overflow: hidden; box-shadow: var(--kk-shadow); } .trainer-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; display: block; } .trainer-info { padding: clamp(1.25rem, 3vw, 1.75rem); } .trainer-info h3 { font-size: clamp(1.4rem, 3vw, 1.7rem); } .trainer-role { display: inline-block; color: var(--kk-red); font-family: var(--kk-font-body); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin: .35rem 0 .9rem; } .trainer-desc { margin-bottom: 1.1rem; } .trainer-refs { display: flex; flex-direction: column; gap: .55rem; } .trainer-refs li { position: relative; padding-left: 1.5rem; font-size: .92rem; line-height: 1.45; color: var(--kk-text-2); } .trainer-refs li::before { content: ''; position: absolute; left: 0; top: .4em; width: 8px; height: 8px; background: var(--kk-red); transform: rotate(45deg); border-radius: 1px; } @media (max-width: 760px) { .trainer-grid { grid-template-columns: 1fr; } } /* ============ m20 · VIDEO-PLAYER ============ */ .kk-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--kk-radius-lg); overflow: hidden; background: #000; box-shadow: var(--kk-shadow); } .kk-video-play { display: block; width: 100%; height: 100%; position: relative; cursor: pointer; padding: 0; } .kk-video-poster { width: 100%; height: 100%; object-fit: cover; } .kk-video-btn { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: var(--kk-red); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: transform var(--kk-fast) var(--kk-ease), background var(--kk-fast) var(--kk-ease); } .kk-video-btn svg { width: 28px; height: 28px; } .kk-video-play:hover .kk-video-btn { transform: scale(1.08); background: var(--kk-red-hover); } .kk-video-el { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; } /* Button-Variante für helle Flächen */ .btn-outline { color: var(--kk-text); border-color: rgba(255, 255, 255, .22); } .btn-outline:hover { color: var(--kk-red); border-color: var(--kk-red); background: var(--kk-red-soft); } /* ============ m21 · FÖRDERUNG (4 Bereiche) ============ */ .foerderung-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .foerderung-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 2.5vw, 1.75rem); } .tier-card { display: flex; flex-direction: column; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); overflow: hidden; box-shadow: var(--kk-shadow); transition: border-color var(--kk-fast) var(--kk-ease), box-shadow var(--kk-fast) var(--kk-ease); } .tier-card:hover { border-color: var(--kk-red); box-shadow: var(--kk-shadow-lg); } .tier-img { aspect-ratio: 4 / 3; overflow: hidden; } .tier-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .tier-body { padding: 1.3rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .tier-title { font-size: 1.4rem; line-height: 1.05; } .tier-focus { display: block; color: var(--kk-red); font-size: 1.05rem; margin-top: .2rem; } .tier-for { font-size: .9rem; color: var(--kk-text-3); margin: .65rem 0 1rem; } .tier-checks { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.1rem; } .tier-checks li { position: relative; display: flex; gap: .55rem; font-size: .9rem; line-height: 1.4; color: var(--kk-text-2); } .tier-checks li svg { flex: none; width: 18px; height: 18px; color: var(--kk-red); margin-top: .1em; } .tier-ideal { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--kk-divider); font-size: .85rem; color: var(--kk-text-3); } .tier-ideal b { color: var(--kk-text); font-weight: 600; } @media (max-width: 980px) { .foerderung-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .foerderung-grid { grid-template-columns: 1fr; } } /* ============ m22 · KENNENLERNTRAINING (5 Schritte) ============ */ .kennenlernen { background: var(--kk-header-solid); color: #fff; } .kennenlernen .section-title { color: #fff; } .kennenlernen-head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } .kennenlernen-intro { color: rgba(255, 255, 255, .8); max-width: 72ch; margin: 1rem auto 0; } .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } /* Ablauf wie alte Website: 2 Schritte → Calendly → 3 Schritte. */ .steps--top { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; } .steps--rest { grid-template-columns: repeat(3, 1fr); margin-top: clamp(2rem, 4vw, 3rem); } .step { position: relative; } .step-num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--kk-red); color: #fff; font-family: var(--kk-font-head); font-size: 1.4rem; margin-bottom: 1rem; position: relative; z-index: 1; } .step-title { color: #fff; font-size: 1.05rem; text-transform: uppercase; margin-bottom: .5rem; } .step p { color: rgba(255, 255, 255, .72); font-size: .88rem; line-height: 1.5; } .kennenlernen-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); } @media (min-width: 981px) { .step:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: 60px; right: -1.5rem; height: 2px; background: var(--kk-divider-on-dark); } } @media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .steps { grid-template-columns: 1fr; } } /* ============ m23 · ANERKENNUNGEN & PARTNERSCHAFTEN ============ */ .anerkennungen { background: var(--kk-surface-2); } .anerkennungen-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .anerkennungen-rows { display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 2.5rem); } .recognition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow); padding: clamp(1.5rem, 3vw, 2.25rem); margin: 0; } .anerkennungen-rows { align-items: stretch; } .recognition--reverse .recognition-media { order: 2; } .recognition-media { display: flex; flex-direction: column; } .recognition-media img { width: 100%; flex: 1; min-height: 200px; object-fit: cover; border-radius: var(--kk-radius); display: block; } .recognition-body { display: flex; flex-direction: column; justify-content: center; } .recognition-context { display: block; font-family: var(--kk-font-body); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--kk-red); margin-bottom: .6rem; } .recognition-quote { font-family: var(--kk-font-body); font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.45; color: var(--kk-text); margin: 0; } .recognition-by { margin-top: 1rem; font-weight: 600; font-size: 1.05rem; font-family: var(--kk-font-body); color: var(--kk-text); } .recognition-by span { display: block; color: var(--kk-red); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .recognition-body p { font-size: 1rem; } @media (max-width: 760px) { .recognition { grid-template-columns: 1fr; } .recognition--reverse .recognition-media { order: 0; } } /* ============ m24 · STORIES ============ */ .stories-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .stories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } .story-card { display: flex; flex-direction: column; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); overflow: hidden; box-shadow: var(--kk-shadow); } .story-card .kk-video { border-radius: 0; box-shadow: none; } .story-body { padding: 1.1rem 1.25rem 1.4rem; } .story-name { font-size: 1.2rem; line-height: 1.1; } .story-club { display: block; color: var(--kk-red); font-family: var(--kk-font-body); font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; } .story-quote { margin-top: .75rem; font-style: italic; color: var(--kk-text-2); font-size: .92rem; line-height: 1.5; } @media (max-width: 900px) { .stories-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .stories-grid { grid-template-columns: 1fr; } } /* ============ m25 · ZAHLEN (Zähler) ============ */ .zahlen { background: var(--kk-surface-2); } .zahlen-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .zahlen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .stat-num { display: block; font-family: var(--kk-font-head); font-size: clamp(2.8rem, 6vw, 4rem); line-height: 1; color: var(--kk-red); } .stat-label { margin-top: .85rem; color: var(--kk-text-2); font-size: .95rem; line-height: 1.5; } @media (max-width: 780px) { .zahlen-grid { grid-template-columns: 1fr 1fr; } } /* ============ m26 · TALENTE ============ */ .talente-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .talente-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .talent-card { position: relative; border-radius: var(--kk-radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--kk-surface); } .talent-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--kk-med) var(--kk-ease); } .talent-card:hover img { transform: scale(1.05); } .talent-card.is-hidden { display: none; } .talent-cap { position: absolute; inset: auto 0 0 0; padding: 1.4rem .9rem .8rem; background: linear-gradient(to top, rgba(0, 0, 0, .88), rgba(0, 0, 0, 0)); } .talent-name { display: block; font-family: var(--kk-font-head); color: #fff; font-size: 1.15rem; line-height: 1; } .talent-club { display: block; color: var(--kk-red); font-size: .76rem; font-weight: 600; margin-top: .25rem; } .talente-more-wrap { text-align: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); } @media (max-width: 900px) { .talente-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .talente-grid { grid-template-columns: 1fr 1fr; } } /* ============ m27 · FAQ (Akkordeon) ============ */ .faq-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .faq-cats { max-width: none; } .faq-cat { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); } .faq-cat-title { font-size: 1.2rem; text-transform: uppercase; color: var(--kk-red); margin-bottom: 1rem; } .faq-list { display: flex; flex-direction: column; gap: .7rem; } .faq-item { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); overflow: hidden; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-align: left; padding: 1.05rem 1.25rem; font-family: var(--kk-font-body); font-weight: 600; font-size: 1.02rem; color: var(--kk-text); cursor: pointer; } .faq-icon { flex: none; width: 22px; height: 22px; color: var(--kk-red); transition: transform var(--kk-fast) var(--kk-ease); } .faq-item.is-open .faq-icon { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--kk-ease); } .faq-a-inner { padding: 0 1.25rem 1.2rem; color: var(--kk-text-2); line-height: 1.6; } /* ============ m28 · GOOGLE REZENSIONEN ============ */ .reviews { background: var(--kk-surface-2); } .reviews-head { text-align: center; max-width: 820px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .reviews-summary { display: inline-flex; align-items: center; gap: 1rem 1.25rem; flex-wrap: wrap; justify-content: center; margin-top: 1.25rem; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); padding: 1rem 1.5rem; } .reviews-score { font-family: var(--kk-font-head); font-size: 2.4rem; line-height: 1; color: var(--kk-text); } .reviews-stars { display: inline-flex; gap: 2px; color: #fbbc04; } .reviews-stars svg { width: 20px; height: 20px; } .reviews-count { color: var(--kk-text-3); font-size: .9rem; } .reviews-powered { display: inline-flex; align-items: center; gap: .4rem; color: var(--kk-text-3); font-size: .85rem; } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); } .review-card { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: 1.5rem; } .review-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; } .review-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--kk-red); color: #fff; display: grid; place-items: center; font-family: var(--kk-font-head); font-size: 1.2rem; flex: none; } .review-meta { display: flex; flex-direction: column; } .review-name { font-weight: 600; color: var(--kk-text); } .review-time { font-size: .78rem; color: var(--kk-text-3); } .review-stars { display: inline-flex; gap: 2px; color: #fbbc04; margin-bottom: .5rem; } .review-stars svg { width: 16px; height: 16px; } .review-text { color: var(--kk-text-2); font-size: .92rem; line-height: 1.55; } .reviews-cta { text-align: center; margin-top: clamp(1.75rem, 4vw, 2.5rem); } @media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .reviews-grid { grid-template-columns: 1fr; } } /* ============ m29 · KONTAKT ============ */ .kontakt-head { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } /* Kontakt: links das komplette Kilian-Bild, rechts Formular + darunter die Infos. */ .kontakt-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); box-shadow: var(--kk-shadow); padding: clamp(1.4rem, 3vw, 2.5rem); } .kontakt-photo img { width: 100%; height: auto; border-radius: var(--kk-radius); display: block; } .kontakt-main { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; } .kontakt-methods { display: flex; flex-direction: column; gap: .75rem; } .kontakt-method { display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); color: var(--kk-text); transition: border-color var(--kk-fast) var(--kk-ease); } .kontakt-method:hover { border-color: var(--kk-red); color: var(--kk-text); } .kontakt-method-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--kk-red-soft); color: var(--kk-red); display: grid; place-items: center; flex: none; } .kontakt-method-icon svg { width: 20px; height: 20px; } .kontakt-method-label { display: block; font-size: .72rem; color: var(--kk-text-3); text-transform: uppercase; letter-spacing: .05em; } .kontakt-method-value { display: block; font-weight: 600; font-size: .92rem; } /* Anliegen-Chips als gestapelte Spalte (Schritt 1). */ .ms-chips-col { flex-direction: column; } .ms-chips-col .ms-chip { width: 100%; text-align: left; } @media (max-width: 860px) { .kontakt-card { grid-template-columns: 1fr; } } /* ============ m30 · FORMULARE (Multistep) ============ */ .ms-card { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.25rem, 3vw, 2rem); } .ms-form .ms-q { font-family: var(--kk-font-head); text-transform: uppercase; font-size: 1.2rem; margin-bottom: 1.1rem; color: var(--kk-text); } .ms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ms-fields .field.full, .ms-fields .ms-captcha, .ms-fields .ms-consent { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: .35rem; } .field > label { font-size: .85rem; font-weight: 600; color: var(--kk-text-2); } .ms-opt { font-weight: 400; color: var(--kk-text-3); } .field input, .field textarea { width: 100%; padding: .75rem .9rem; background: var(--kk-bg); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); color: var(--kk-text); font: inherit; } .field input::placeholder, .field textarea::placeholder { color: var(--kk-text-3); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--kk-red); box-shadow: 0 0 0 3px var(--kk-red-soft); } .field textarea { resize: vertical; min-height: 110px; } .ms-consent label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .88rem; color: var(--kk-text-2); cursor: pointer; } /* Checkbox NICHT von der allgemeinen „.field input { width:100% }"-Regel erfassen lassen — sonst wird sie volle Breite und schiebt den Consent-Text raus (overflow → abgeschnitten). */ .ms-consent input[type="checkbox"] { width: auto; min-width: 16px; height: 16px; margin-top: .15rem; padding: 0; background: none; border: 0; box-shadow: none; flex: none; accent-color: var(--kk-red); } .ms-consent label span { flex: 1; min-width: 0; } .ms-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .ms-progress { margin-bottom: 1.25rem; } .ms-progress-meta { font-size: .8rem; color: var(--kk-text-3); margin-bottom: .4rem; } .ms-bar { height: 4px; background: var(--kk-divider); border-radius: 2px; overflow: hidden; } .ms-bar-fill { display: block; height: 100%; width: 50%; background: var(--kk-red); transition: width var(--kk-med) var(--kk-ease); } .ms-nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; align-items: center; } .ms-next, .ms-submit { margin-left: auto; } /* Versteckte Buttons (z. B. „Absenden" außer im letzten Schritt) wirklich ausblenden: ohne dies überschreibt .btn{display:…} das hidden-Attribut → 3. Button läuft mobil über. */ .btn[hidden], button[hidden] { display: none !important; } .ms-error-line { margin-top: 1rem; color: #ff6b6b; font-size: .88rem; } .ms-result { text-align: center; padding: 1.5rem 0; } .ms-result h3 { color: var(--kk-red); margin-bottom: .5rem; } .ms-chips { display: flex; flex-wrap: wrap; gap: .5rem; } .ms-chip { padding: .6rem 1rem; border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-pill); color: var(--kk-text-2); font-size: .9rem; transition: all var(--kk-fast) var(--kk-ease); } .ms-chip:hover { border-color: var(--kk-red); color: var(--kk-text); } .ms-chip.is-active { background: var(--kk-red); border-color: var(--kk-red); color: #fff; } @media (max-width: 560px) { .ms-fields { grid-template-columns: 1fr; } } /* ============ m31 · FÖRDERANALYSE-POPUP ============ */ .kk-popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; } .kk-popup[hidden] { display: none; } .kk-popup-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .kk-popup-dialog { position: relative; z-index: 1; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--kk-shadow-lg); } .kk-popup-close { position: absolute; top: .6rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; font-size: 1.7rem; line-height: 1; color: var(--kk-text-2); } .kk-popup-close:hover { color: var(--kk-red); background: var(--kk-red-soft); } body.kk-popup-open { overflow: hidden; } .fa-head { margin-bottom: 1.25rem; padding-right: 2rem; } .fa-head h3 { font-size: clamp(1.25rem, 3vw, 1.55rem); text-transform: none; } .fa-chips-col { flex-direction: column; } .fa-chips-col .ms-chip { width: 100%; text-align: left; } .kennenlernen-alt { margin-top: 1rem; } .kk-link-btn { color: rgba(255, 255, 255, .8); text-decoration: underline; font-family: var(--kk-font-body); font-size: .95rem; } .kk-link-btn:hover { color: var(--kk-red); } /* ============ m32 · ERFOLGSSEITEN / RECHTLICHES / ANNY ============ */ .kk-success { min-height: 62vh; display: grid; place-items: center; } .kk-success-inner { text-align: center; } .kk-success-icon { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--kk-red-soft); color: var(--kk-red); margin-bottom: 1.25rem; } .kk-success-icon svg { width: 44px; height: 44px; } .kk-success-text { color: var(--kk-text-2); font-size: 1.1rem; line-height: 1.65; margin: 0 auto 1rem; max-width: 60ch; } .kk-success-cta { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; } .kk-success-steps-head { font-family: var(--kk-font-head); text-transform: uppercase; font-size: 1.15rem; color: var(--kk-text); margin: 2.2rem 0 1.1rem; } .kk-success-steps { list-style: none; padding: 0; margin: 0 auto; max-width: 540px; text-align: left; display: grid; gap: 1.1rem; } .kk-success-steps li { display: flex; gap: 1rem; align-items: flex-start; } .kk-success-step-num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--kk-red); color: #fff; font-family: var(--kk-font-head); font-size: 1.1rem; } .kk-success-step-body { color: var(--kk-text-2); font-size: .95rem; line-height: 1.5; } .kk-success-step-body strong { display: block; color: var(--kk-text); font-size: 1.02rem; font-weight: 700; margin-bottom: .15rem; } /* ===== Rechtliche Seiten (Impressum/Datenschutz) — Layout angelehnt an fwn-media.de ===== */ .legal-hero { padding: calc(var(--kk-header-h) + clamp(3rem, 9vh, 6rem)) 0 clamp(1.6rem, 4vh, 2.8rem); border-bottom: 1px solid var(--kk-divider); } .legal-h1 { font-family: var(--kk-font-head); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.03; color: var(--kk-text); } .legal-section { padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(4.5rem, 12vh, 8.5rem); } /* 2-Spalten: sticky Inhaltsverzeichnis + Lesespalte */ .legal-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; max-width: 1160px; margin-inline: auto; } .legal-toc { position: sticky; top: calc(var(--kk-header-h) + 1.5rem); background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: 1.5rem 1.4rem; } .legal-toc-title { display: block; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-text-3); margin-bottom: .9rem; } .legal-toc ol { list-style: none; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; padding: 0; margin: 0; } .legal-toc li { counter-increment: toc; } .legal-toc a { display: flex; gap: .7rem; align-items: baseline; padding: .5rem .6rem; border-radius: 9px; font-size: .875rem; line-height: 1.35; color: var(--kk-text-2); transition: background var(--kk-fast) var(--kk-ease), color var(--kk-fast) var(--kk-ease); } .legal-toc a::before { content: counter(toc); color: var(--kk-red); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; } .legal-toc a:hover { background: var(--kk-red-soft); color: var(--kk-text); } /* Lesetypografie */ .legal-body { font-size: 1.03rem; line-height: 1.75; color: var(--kk-text-2); max-width: 74ch; } .legal-body h2 { position: relative; font-family: var(--kk-font-head); text-transform: none; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.14; color: var(--kk-text); margin: 3.25rem 0 1.1rem; padding: 1.9rem 0 0 1.1rem; border-top: 1px solid var(--kk-divider); scroll-margin-top: calc(var(--kk-header-h) + 1.5rem); } .legal-body h2::before { content: ""; position: absolute; left: 0; top: 2rem; bottom: .35rem; width: 3px; border-radius: 3px; background: var(--kk-red); } .legal-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legal-body > h2:first-child::before { top: .15rem; } .legal-body h3 { font-family: var(--kk-font-body); font-weight: 700; text-transform: none; font-size: clamp(1.15rem, 1.9vw, 1.375rem); color: var(--kk-text); margin: 2rem 0 .55rem; scroll-margin-top: calc(var(--kk-header-h) + 1.5rem); } .legal-body h4 { font-family: var(--kk-font-body); font-weight: 700; font-size: 1rem; color: var(--kk-text); margin: 1.4rem 0 .5rem; } .legal-body p { margin: 0 0 .9rem; } .legal-body ul { margin: 0 0 1rem; padding-left: 1.4rem; list-style: disc; } .legal-body li { margin-bottom: .55rem; } .legal-body a { color: var(--kk-red); word-break: break-word; text-decoration: underline; } .legal-body a:hover { text-decoration: none; } .legal-body strong { color: var(--kk-text); font-weight: 600; } .legal-body > p:first-of-type { font-size: 1.06rem; color: var(--kk-text); font-weight: 500; line-height: 1.65; } @media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; gap: .5rem; } .legal-toc { position: static; margin-bottom: 2.25rem; } } @media (max-width: 600px) { .legal-body { font-size: .98rem; } .legal-body h2 { margin: 2.25rem 0 .75rem; padding-top: 1.5rem; } } .anny-page { padding-block: clamp(2rem, 5vw, 3.5rem); } .anny-page-head { text-align: center; max-width: 760px; margin: 0 auto; } .anny-page-intro { color: var(--kk-text-2); margin-top: .75rem; } .kk-anny-embed { margin-top: clamp(1.5rem, 4vw, 2.5rem); } .kk-anny-embed a-organization-page { display: block; width: 100%; min-height: 100vh; min-height: 100svh; } /* Dedizierte Fullscreen-Buchungsseite: Widget steht direkt in der Sektion (kein Wrapper, kein Padding, keine feste CSS-Höhe) – Höhe regelt die Web-Component via fullscreen + nav-height. */ .member-fs { display: block; } .member-fs a-organization-page { display: block; width: 100%; } /* ============ m33 · LANDINGPAGE ============ */ .site-header--landing .mainbar-inner { min-height: 66px; } .lp-trust { display: inline-block; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); color: #fff; padding: .4rem .9rem; border-radius: var(--kk-radius-pill); font-size: .85rem; font-weight: 600; margin-bottom: 1.1rem; } .lp-cta { background: var(--kk-header-solid); text-align: center; } .lp-cta .section-title { color: #fff; } .lp-cta p { color: rgba(255, 255, 255, .8); max-width: 60ch; margin: .5rem auto 1.75rem; } /* ============ m34 · LIGHTBOX ============ */ .kk-lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: rgba(0, 0, 0, .92); padding: 2rem; } .kk-lightbox[hidden] { display: none; } .kk-lb-img { max-width: 92vw; max-height: 86vh; border-radius: var(--kk-radius); box-shadow: var(--kk-shadow-lg); } .kk-lb-btn { position: absolute; color: #fff; background: rgba(255, 255, 255, .12); border-radius: 50%; width: 48px; height: 48px; font-size: 1.7rem; line-height: 1; display: grid; place-items: center; transition: background var(--kk-fast) var(--kk-ease); } .kk-lb-btn:hover { background: var(--kk-red); } .kk-lb-close { top: 1.25rem; right: 1.25rem; } .kk-lb-prev { left: 1.25rem; top: 50%; transform: translateY(-50%); } .kk-lb-next { right: 1.25rem; top: 50%; transform: translateY(-50%); } /* ============ m35 · FLOATING-BUTTONS + STAGGER ============ */ .kk-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 150; width: 46px; height: 46px; border-radius: 50%; background: var(--kk-surface); border: 1px solid var(--kk-divider); color: var(--kk-text); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease), background var(--kk-fast) var(--kk-ease), color var(--kk-fast) var(--kk-ease); } .kk-to-top svg { width: 22px; height: 22px; } body.is-scrolled .kk-to-top { opacity: 1; visibility: visible; transform: none; } .kk-to-top:hover { background: var(--kk-red); border-color: var(--kk-red); color: #fff; } .kk-fa-sticky { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 150; box-shadow: 0 10px 30px rgba(244, 67, 54, .42); } /* Floating-Button-Wrapper: standardmäßig transparent (display:contents) → die Buttons behalten ihre eigene fixe Position (Desktop: Pille zentriert, Back-to-Top unten rechts). */ .kk-fab-stack { display: contents; } @media (max-width: 600px) { .kk-fa-sticky { font-size: .76rem; padding: .68em 1.1em; bottom: .85rem; box-shadow: 0 8px 22px rgba(244, 67, 54, .4); } .kk-to-top { bottom: 4.25rem; width: 42px; height: 42px; } /* Mobil (Startseite/LP): Förderanalyse-Pille + Back-to-Top als EINE zentrierte Reihe unten — Back-to-Top sitzt direkt rechts neben der Pille, auf jedem Gerät gleich. */ .kk-fab-stack--row { display: flex; align-items: center; gap: .5rem; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(.85rem + env(safe-area-inset-bottom, 0px)); z-index: 150; max-width: calc(100vw - .8rem); } .kk-fab-stack--row .kk-fa-sticky, .kk-fab-stack--row .kk-to-top { position: static; inset: auto; flex: none; } .kk-fab-stack--row .kk-fa-sticky { transform: none; } .kk-fab-stack--row .kk-fa-sticky.is-hidden { transform: translateY(160%); } .kk-fab-stack--row .kk-fa-sticky:hover { transform: translateY(-3px); } } /* gestaffeltes Reveal in Karten-Grids */ .foerderung-grid .tier-card:nth-child(2), .stories-grid .story-card:nth-child(2), .talente-grid .talent-card:nth-child(2), .reviews-grid .review-card:nth-child(2), .zahlen-grid .stat:nth-child(2) { transition-delay: 70ms; } .foerderung-grid .tier-card:nth-child(3), .stories-grid .story-card:nth-child(3), .talente-grid .talent-card:nth-child(3), .reviews-grid .review-card:nth-child(3), .zahlen-grid .stat:nth-child(3) { transition-delay: 140ms; } .foerderung-grid .tier-card:nth-child(4), .talente-grid .talent-card:nth-child(4), .zahlen-grid .stat:nth-child(4) { transition-delay: 210ms; } /* ============ m36 · SEKTIONS-HINTERGRUNDBILDER ============ */ .has-section-bg { position: relative; isolation: isolate; } .has-section-bg::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--kk-bg-img); background-size: cover; background-position: center; background-repeat: no-repeat; } .has-section-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 12, .85); } /* ============ m37 · LANDINGPAGE-CONVERSION + STICKY + MEMBER ============ */ .lp-hero-note { margin-top: 1rem; color: rgba(255, 255, 255, .7); font-size: .9rem; } .lp-benefits-video { width: 100%; max-width: 900px; margin: 0 auto clamp(2.5rem, 5vw, 3.75rem); } .lp-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); } .lp-benefit { text-align: center; } .lp-benefit-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--kk-red-soft); color: var(--kk-red); margin-bottom: 1rem; } .lp-benefit-icon svg { width: 32px; height: 32px; } .lp-benefit-title { font-size: 1.25rem; margin-bottom: .5rem; } .lp-benefit p { color: var(--kk-text-3); } @media (max-width: 760px) { .lp-benefits-grid { grid-template-columns: 1fr; } } /* Landingpage: „So funktioniert's" (3 Schritte) */ .lp-steps-sec { background: var(--kk-surface-2); } .lp-steps-head { text-align: center; max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); } .lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); list-style: none; padding: 0; margin: 0; } .lp-step { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--kk-shadow); text-align: center; } .lp-step-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--kk-red); color: #fff; font-family: var(--kk-font-head); font-size: 1.5rem; margin-bottom: 1rem; } .lp-step h3 { font-size: 1.2rem; margin-bottom: .5rem; } .lp-step p { color: var(--kk-text-3); font-size: .95rem; line-height: 1.55; } .lp-step:nth-child(2) { transition-delay: 80ms; } .lp-step:nth-child(3) { transition-delay: 160ms; } .lp-steps-cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; } } /* Förderanalyse-LP: persönliche Gründer-Sektion (Kilian). Hintergrund transparent (Body = #000), damit der Sektions-Rhythmus #000 / #131316 nach dem Umsortieren (Zielbild davor, Steps danach) alterniert. */ .lp-founder { background: transparent; } .lp-founder-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: center; } .lp-founder-photo img { width: 100%; height: auto; border-radius: var(--kk-radius-lg); display: block; box-shadow: var(--kk-shadow-lg); } .lp-founder-text p { color: var(--kk-text-2); margin-bottom: 1rem; } .lp-founder-sign { font-family: var(--kk-font-head); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; color: var(--kk-text); margin: 1.4rem 0 1.6rem; } .lp-founder-sign span { display: block; font-family: var(--kk-font-body); text-transform: none; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--kk-red); margin-top: .3rem; } @media (max-width: 760px) { .lp-founder-grid { grid-template-columns: 1fr; } } /* Gründer-Referenz-Badges (FC Bayern hervorgehoben) */ .lp-founder-creds { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.3rem; } .lp-founder-cred { display: inline-flex; align-items: center; gap: .4rem; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-pill); padding: .42rem .9rem; font-size: .82rem; font-weight: 700; color: var(--kk-text-2); } .lp-founder-cred svg { width: 15px; height: 15px; color: var(--kk-red); flex: none; } .lp-founder-cred--bayern { background: var(--kk-red-soft); border-color: rgba(244, 67, 54, .35); color: var(--kk-text); } /* „Zielbild" — konkrete, reale Ergebnisse als Karten */ .lp-zielbild { background: var(--kk-surface-2); } .lp-zielbild-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); } .lp-zielbild-head p { color: var(--kk-text-2); margin-top: .8rem; } .lp-zielbild-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2.6vw, 1.6rem); } /* 4.11.11 (Wunsch Kilian): Karten wie bei der Profi-Offensive, großes Foto oben, Weg als Stationen. */ .lp-goal { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); overflow: hidden; display: flex; flex-direction: column; } .lp-goal-photo { aspect-ratio: 16 / 9; background: var(--kk-bg); } .lp-goal-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; } .lp-goal-body { flex: 1; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.4rem, 3vw, 1.9rem); } .lp-goal-title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); color: var(--kk-text); margin: 0; } .lp-goal-path { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .35rem 0 .8rem; } /* 4.12.3: etwas kompakter, damit zwei Stationen in eine Zeile passen (Kilian) */ .lp-goal-station { display: inline-flex; align-items: center; gap: .4rem; background: var(--kk-red-soft); border: 1px solid rgba(244, 67, 54, .5); border-radius: 8px; color: var(--kk-text); font-weight: 600; font-size: .875rem; line-height: 1.3; padding: .45rem .65rem; } .lp-goal-station--final { background: var(--kk-red); border-color: var(--kk-red); color: #fff; box-shadow: 0 0 24px rgba(244, 67, 54, .35); } .lp-goal-check { width: 1.05em; height: 1.05em; flex: none; } .lp-goal-arrow { color: var(--kk-red); font-weight: 700; font-size: 1.15rem; line-height: 1; } .lp-goal-quote { color: var(--kk-text-2); font-style: italic; margin: 0; } .lp-goal-who { margin-top: auto; padding-top: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--kk-red); } .lp-zielbild-cta { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); } @media (max-width: 760px) { .lp-zielbild-grid { grid-template-columns: 1fr; } } /* Kilian-Avatar im finalen CTA */ .lp-cta-avatar { margin-bottom: 1.1rem; } .lp-cta-avatar img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: top center; border: 3px solid var(--kk-red); display: inline-block; } .lp-cta-big { background: linear-gradient(135deg, #1c1c22 0%, #0b0b0d 100%); border-top: 1px solid var(--kk-divider); } .lp-cta-big-inner { text-align: center; max-width: 780px; margin-inline: auto; padding-block: clamp(1rem, 3vw, 2.5rem); } .lp-cta-big-title { font-size: clamp(1.9rem, 5vw, 3rem); color: #fff; margin: 1rem 0; } .lp-cta-big p { color: rgba(255, 255, 255, .82); font-size: 1.1rem; max-width: 60ch; margin: 0 auto; } .lp-cta-big-btn { margin-top: 2rem; font-size: 1.15rem; padding: 1.2em 2.6em; box-shadow: 0 14px 40px rgba(244, 67, 54, .45); } .lp-cta-note { display: block; margin-top: 1rem; color: rgba(255, 255, 255, .6); font-size: .9rem; } /* Landingpage: Level-Zusicherung (ersetzt die volle Förderbereiche-Sektion) */ .lp-benefits-note { text-align: center; max-width: 760px; margin: clamp(2rem, 4vw, 3rem) auto 0; font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 600; color: var(--kk-text); } /* Landingpage: kompakter Proof (Zahlen + 2 Eltern-Stimmen statt zweier Vollsektionen) */ .lp-proof-rating { text-align: center; font-weight: 600; color: var(--kk-text-2); margin: 0 0 clamp(1.6rem, 3vw, 2.2rem); } .lp-proof-rating .lp-proof-stars { color: #fbbf24; letter-spacing: .12em; margin-right: .5rem; } .lp-proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); list-style: none; padding: 0; margin: 0 0 clamp(2rem, 4vw, 3rem); text-align: center; } .lp-proof-num { display: block; font-family: var(--kk-font-head); font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1; color: var(--kk-red); } .lp-proof-lbl { display: block; margin-top: .5rem; font-size: .9rem; font-weight: 600; color: var(--kk-text-2); } .lp-proof-reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.6vw, 1.6rem); max-width: 880px; margin-inline: auto; } .lp-review { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.3rem, 3vw, 1.8rem); margin: 0; } .lp-review-stars { color: #fbbf24; letter-spacing: .12em; font-size: .95rem; } .lp-review-text { margin: .6rem 0 .9rem; color: var(--kk-text); font-style: italic; line-height: 1.55; } .lp-review-name { font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--kk-text-2); } .lp-review-name span { color: var(--kk-text-3); } @media (max-width: 760px) { .lp-proof-stats { grid-template-columns: 1fr; gap: 1.4rem; } .lp-proof-reviews { grid-template-columns: 1fr; } } /* Sticky-Förderanalyse-Button im Footer ausblenden (verdeckt sonst die Links). */ .kk-fa-sticky { transition: opacity var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease), visibility var(--kk-fast), background var(--kk-fast) var(--kk-ease); } .kk-fa-sticky.is-hidden { opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(160%); pointer-events: none; } .kk-fa-sticky:hover { transform: translateX(-50%) translateY(-3px); } /* Memberbereich-Link (Header-Topbar + Mobile-Menü). */ .topbar-right { display: flex; align-items: center; gap: 1.25rem; } .topbar-anny { display: inline-flex; align-items: center; gap: .5rem; } .topbar-anny a-login-button, .topbar-anny a-cart-modal-button { display: inline-flex; line-height: 0; } .mob-anny { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.25rem; } .mob-anny a-login-button, .mob-anny a-cart-modal-button { display: inline-flex; vertical-align: middle; } .topbar-member-wrap { position: relative; } .topbar-member { display: inline-flex; align-items: center; gap: .4rem; color: var(--kk-menu); font-size: .8125rem; opacity: .9; white-space: nowrap; } .topbar-member:hover { color: var(--kk-red); opacity: 1; } .topbar-member > svg:first-child { color: var(--kk-red); flex: none; } .topbar-member .nav-chevron { color: currentColor; opacity: .7; flex: none; transition: transform var(--kk-fast) var(--kk-ease); } .topbar-member-wrap:hover .nav-chevron, .topbar-member-wrap:focus-within .nav-chevron { transform: rotate(180deg); } .topbar-subnav { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--kk-header-solid); border: 1px solid var(--kk-divider-on-dark); border-radius: var(--kk-radius); padding: .4rem; box-shadow: var(--kk-shadow-lg); display: flex; flex-direction: column; gap: .1rem; z-index: 30; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--kk-fast) var(--kk-ease), transform var(--kk-fast) var(--kk-ease), visibility var(--kk-fast); } .topbar-member-wrap:hover .topbar-subnav, .topbar-member-wrap:focus-within .topbar-subnav { opacity: 1; visibility: visible; transform: translateY(0); } .topbar-subnav a { padding: .5rem .75rem; border-radius: 8px; color: var(--kk-menu); font-size: .82rem; white-space: nowrap; opacity: .9; } .topbar-subnav a:hover { background: var(--kk-red-soft); color: #fff; opacity: 1; } .mob-member-group { display: flex; flex-direction: column; gap: .1rem; border-top: 1px solid rgba(236, 239, 243, .12); padding-top: 1.6rem; } .mob-member-label { display: inline-flex; align-items: center; gap: .55rem; color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: .55rem; } .mob-member-label svg { color: var(--kk-red); } .mob-member-group .mob-sub-link { position: relative; padding: .4rem 0 .4rem 1.75rem; color: rgba(236, 239, 243, .85); } .mob-member-group .mob-sub-link::before { content: "\203A"; position: absolute; left: .7rem; top: .4rem; color: var(--kk-red); font-weight: 700; } /* einspaltiger Standort-Text – volle Breite (wie Philosophie-Text) */ .standort-text--single { max-width: none; } .standort-address:hover { text-decoration: underline; } /* Inline-Pfeil im Button (ersetzt den ↗-Emoji mit blauem Kasten) */ .btn-arr { display: inline-block; vertical-align: -.1em; width: 1em; height: 1em; margin-left: .15em; flex: none; } /* Calendly Inline-Widget in Kennenlernen-Sektion */ .kennenlernen-calendly { margin: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2rem); border-radius: var(--kk-radius-lg); overflow: hidden; } .kennenlernen-calendly .calendly-inline-widget { width: 100%; } /* ============ m40 · MEMBERBEREICH (page-memberbereich.php) ============ */ .member-hero { padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } .member-hero-inner { max-width: none; } .member-lead { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.6; color: var(--kk-text-2); margin-top: 1rem; } .member-section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .member-booking { padding-top: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(.6rem, 1.5vw, .9rem); } .member-booking .kk-anny-embed { min-height: 600px; } /* So funktioniert's (3 Schritte) */ .member-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2rem); padding: 0; margin: 0; list-style: none; } .member-step { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--kk-shadow); } .member-step-num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kk-red); color: #fff; font-family: var(--kk-font-head); font-size: 1.25rem; margin-bottom: 1rem; } .member-step h3 { font-size: 1.25rem; margin-bottom: .45rem; } .member-step p { color: var(--kk-text-3); font-size: .95rem; line-height: 1.55; } .member-step:nth-child(2) { transition-delay: 80ms; } .member-step:nth-child(3) { transition-delay: 160ms; } /* Vorteile */ .member-benefits { background: var(--kk-surface-2); } .member-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); } .member-benefit { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.25rem, 2.5vw, 1.75rem); box-shadow: var(--kk-shadow); } .member-benefit-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--kk-red-soft); color: var(--kk-red); margin-bottom: .9rem; } .member-benefit-icon svg { width: 26px; height: 26px; } .member-benefit h3 { font-size: 1.1rem; margin-bottom: .4rem; } .member-benefit p { color: var(--kk-text-3); font-size: .9rem; line-height: 1.5; } /* Buchungs-FAQ (CSS-only via
) */ .member-faq-list { display: flex; flex-direction: column; gap: .75rem; } .member-faq-item { background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); overflow: hidden; } .member-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; font-weight: 600; color: var(--kk-text); } .member-faq-item summary::-webkit-details-marker { display: none; } .member-faq-mark { position: relative; flex: none; width: 18px; height: 18px; } .member-faq-mark::before, .member-faq-mark::after { content: ''; position: absolute; background: var(--kk-red); border-radius: 2px; transition: transform var(--kk-fast) var(--kk-ease); } .member-faq-mark::before { top: 8px; left: 0; width: 18px; height: 2.5px; } .member-faq-mark::after { top: 0; left: 8px; width: 2.5px; height: 18px; } .member-faq-item[open] .member-faq-mark::after { transform: scaleY(0); } .member-faq-a { padding: 0 1.25rem 1.2rem; color: var(--kk-text-2); line-height: 1.6; } /* Support-CTA */ .member-support-card { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--kk-shadow); } .member-support-text p { color: var(--kk-text-3); margin-top: .5rem; } .member-support-actions { display: flex; gap: .75rem; flex-wrap: wrap; } /* „Du hast bereits gebucht?"-Box: Button rechts in derselben Zeile (Text-Flex-Basis statt Umbruch) + minimaler Abstand zum Buchungs-Widget */ .member-existing { padding-top: 0; } .member-existing .member-support-text { flex: 1 1 320px; } /* Buchungs-Sektionskopf: Überschrift links, anny-Login-Button rechts */ .member-booking-head { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); } .member-booking-head .member-section-head { margin-bottom: 0; flex: 1 1 360px; } .member-login-btn { flex: none; } /* anny-Login-Button: Maße/Radius/iframe-Hintergrund kommen jetzt aus den OFFIZIELLEN anny-Attributen (button-height / small-border-radius / primary-background, s. inc/anny.php) — kein CSS-Clip mehr nötig, hier nur noch Layout. */ .member-login-btn a-login-button, .kk-anny-login a-login-button { display: inline-block; } @media (max-width: 860px) { .member-steps { grid-template-columns: 1fr; } .member-benefit-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .member-benefit-grid { grid-template-columns: 1fr; } } /* ============ 404 ============ */ .kk-404 { position: relative; min-height: calc(100vh - var(--kk-header-h, 116px)); display: flex; align-items: center; background: var(--kk-dark); overflow: hidden; } .kk-404::before { content: ""; position: absolute; inset: 0; background: radial-gradient(58% 55% at 50% 40%, rgba(244, 67, 54, .20), transparent 72%); pointer-events: none; } .kk-404-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin-inline: auto; color: #fff; padding-block: clamp(3rem, 8vh, 5rem); } .kk-404-code { display: inline-block; font-family: var(--kk-font-head); font-size: clamp(5rem, 22vw, 11rem); line-height: .9; color: #fff; text-shadow: 0 8px 60px rgba(244, 67, 54, .35); } .kk-404-title { color: #fff; font-size: clamp(1.5rem, 4.2vw, 2.3rem); line-height: 1.12; margin: .8rem 0 1rem; } .kk-404-text { color: rgba(255, 255, 255, .82); font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; max-width: 52ch; margin: 0 auto 2.2rem; } .kk-404-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-bottom: 2.2rem; } .kk-404-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; } .kk-404-links a { color: rgba(255, 255, 255, .72); font-weight: 600; font-size: .92rem; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color var(--kk-fast) var(--kk-ease), border-color var(--kk-fast) var(--kk-ease); } .kk-404-links a:hover { color: #fff; border-bottom-color: var(--kk-red); } @media (max-width: 960px) { .kk-404 { min-height: var(--vph, 100svh); } } /* ============ m40 · LEAD-MAGNET-LANDINGPAGE (4.11.0: Aufbau 1:1 nach dirkkreuter.com/ki-anleitung, Elemente im KK-Stil; Grilling mit Daniel 24.09.2026). Einheitlich dunkel, alles zentriert, schmale Textbreite, Überschriften in Poppins fett mit roten Wörtern (.lm-hl), die kleine rote Zeile über Überschriften (.lm-kicker) ist hier ausdrücklich erlaubt (Ausnahme vom FWN-Verbot, nur diese Seite). ============ */ .kk-leadmagnet { --kk-header-h: 0px; --lm-text: 760px; --lm-wide: 1120px; background: var(--kk-bg); } /* overflow-x: hidden auf html/body macht body zum Scroll-Container, dann läuft das Autorenfoto (sticky) nicht mit. clip schneidet genauso ab, ohne Scroll-Container. Silbentrennung aus: Kilians Sätze sollen ganz bleiben (wie bei DK). */ html:has(body.kk-leadmagnet), body.kk-leadmagnet { overflow-x: clip; } .kk-leadmagnet main, .kk-leadmagnet main p { -webkit-hyphens: manual; hyphens: manual; } .kk-leadmagnet .section { padding-block: clamp(4rem, 8vw, 6.5rem); } .lm-center { text-align: center; } .lm-hl { color: var(--kk-red); } .lm-kicker { margin: 0 0 .7rem; color: var(--kk-red); font-weight: 600; font-size: clamp(.88rem, 1.3vw, 1rem); letter-spacing: .01em; } .lm-title, .lm-h2 { font-family: var(--kk-font-body); font-weight: 700; text-transform: none; letter-spacing: -.015em; color: #fff; margin: 0 0 1rem; } .lm-title { font-size: clamp(1.6rem, 4.3vw, 3.15rem); line-height: 1.14; max-width: 1180px; text-wrap: balance; margin-inline: auto; } .lm-h2 { font-size: clamp(1.55rem, 3.1vw, 2.35rem); line-height: 1.2; text-wrap: balance; } .lm-lead { color: var(--kk-text-2); font-size: 1.02rem; line-height: 1.7; margin: 0 0 1rem; } .lm-section-sub { color: var(--kk-text-2); font-size: 1.02rem; line-height: 1.65; max-width: 62ch; margin: 0 auto 1rem; text-align: center; } .lm-note { margin: .8rem 0 0; font-size: .84rem; color: var(--kk-text-3); } .lm-cta { margin-top: .6rem; } .lm-ico { width: 44px; height: 44px; color: var(--kk-red); stroke-width: 1.7; flex: none; } .lm-card-title { font-family: var(--kk-font-body); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--kk-red); font-size: 1.02rem; line-height: 1.35; margin: 0 0 .45rem; } /* Kopf: nur das Logo, zentriert (nicht fixiert, wie bei Dirk Kreuter) */ .lm-top { padding-block: clamp(1.1rem, 2.4vw, 1.6rem); } .lm-top-inner { display: flex; justify-content: center; } .lm-top .brand img, .lm-foot-logo .brand img { width: clamp(150px, 16vw, 190px); height: auto; } /* 1 Hero: zentriert, Foto stark abgedunkelt */ .lm-hero { position: relative; isolation: isolate; text-align: center; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem); } .lm-hero.has-bg::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--lm-bg) var(--lm-bg-pos, center 30%) / cover no-repeat; } /* 4.13.0: Ausschnitt aus fwn.manage */ .lm-hero.has-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 12, 12, .8) 0%, rgba(12, 12, 12, .86) 55%, var(--kk-bg) 100%); } .lm-hero-inner { display: flex; flex-direction: column; align-items: center; } .lm-hero .lm-title { margin-bottom: 1.6rem; } /* Bewertungszeile */ .lm-rating { margin-top: 1.6rem; display: grid; gap: .3rem; justify-items: center; } .lm-rating-line { margin: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; color: var(--kk-text-2); font-size: .9rem; } .lm-stars { color: #fbbf24; letter-spacing: .12em; font-size: 1rem; } .lm-g { width: 18px; height: 18px; } .lm-rating-text { margin: 0; color: var(--kk-text); font-weight: 600; font-size: .92rem; } .lm-rating--author { justify-items: start; margin-top: 0; } .lm-rating--author .lm-rating-line { justify-content: flex-start; } /* Mockup als Link */ .lm-mockup { display: block; } .lm-mockup img { display: block; width: 100%; height: auto; transition: transform var(--kk-med) var(--kk-ease); } .lm-mockup:hover img { transform: translateY(-4px) rotate(-.5deg); } /* 2 Guide mit Specs */ .lm-guide-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: var(--lm-wide); margin-inline: auto; } .lm-guide-media { justify-self: center; width: min(460px, 100%); filter: drop-shadow(0 30px 60px rgba(244, 67, 54, .16)); } .lm-specs { list-style: none; padding: 0; margin: 1.6rem 0 1.4rem; display: grid; gap: 1.35rem; } .lm-spec { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; } .lm-spec-title { font-family: var(--kk-font-body); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--kk-red); font-size: 1.05rem; margin: .2rem 0 .3rem; } .lm-spec p { margin: 0; color: var(--kk-text-2); font-size: .95rem; line-height: 1.6; } /* 3 Erfahrung: Band über die volle Breite */ .lm-band { padding-top: clamp(3rem, 6vw, 4.5rem); } .lm-band .lm-h2 { margin-bottom: clamp(1.4rem, 3vw, 2rem); } .lm-band-row { border-block: 1px solid var(--kk-divider); background: var(--kk-surface-2); } .lm-band-list { list-style: none; margin: 0 auto; padding-block: clamp(1.6rem, 3.5vw, 2.4rem); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .lm-band-list.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lm-band-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lm-band-list.cols-1 { grid-template-columns: minmax(0, 1fr); } .lm-band-list li { padding: .4rem clamp(.8rem, 2vw, 1.6rem); text-align: center; display: grid; gap: .45rem; align-content: start; } .lm-band-list li + li { border-left: 1px solid var(--kk-divider); } .lm-band-num { font-family: var(--kk-font-head); text-transform: uppercase; color: var(--kk-red); font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.08; letter-spacing: .01em; } .lm-band-text { color: var(--kk-text-2); font-size: .88rem; line-height: 1.5; } /* 4 Für welche Eltern: Fotokarten */ .lm-aud .lm-h2 { margin-bottom: .6rem; } .lm-aud-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 2.8rem); max-width: var(--lm-wide); margin-inline: auto; } .lm-aud-card { flex: 0 1 calc((100% - 4 * clamp(1rem, 2vw, 1.4rem)) / 5); min-width: 0; } .lm-aud-photo { aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--kk-surface); margin-bottom: .9rem; } .lm-aud-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .lm-aud-card p { margin: 0; color: var(--kk-text-2); font-size: .86rem; line-height: 1.55; } .lm-aud-note { max-width: 62ch; margin: clamp(2.2rem, 4vw, 3rem) auto 0; text-align: center; } .lm-aud-note p { margin: 0 0 .35rem; color: var(--kk-text-2); } .lm-aud-note p:first-child { color: #fff; font-weight: 600; font-size: 1.05rem; } /* 5 Die Erkenntnisse: Karten mit rotem Linien-Symbol */ .lm-ins-head { max-width: var(--lm-text); margin: 0 auto clamp(2.2rem, 4.5vw, 3.2rem); text-align: center; } .lm-ins-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 1.8rem); max-width: var(--lm-wide); margin-inline: auto; } .lm-ins-card { flex: 0 1 calc((100% - 3 * clamp(1.2rem, 2.4vw, 1.8rem)) / 4); min-width: 0; } .lm-ins-grid.n-3 .lm-ins-card, .lm-ins-grid.n-5 .lm-ins-card, .lm-ins-grid.n-6 .lm-ins-card, .lm-ins-grid.n-9 .lm-ins-card { flex-basis: calc((100% - 2 * clamp(1.2rem, 2.4vw, 1.8rem)) / 3); } .lm-ins-art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; border-radius: 16px; background: radial-gradient(circle at 50% 45%, rgba(244, 67, 54, .1), transparent 62%), var(--kk-surface-2); border: 1px solid var(--kk-divider); margin-bottom: 1.1rem; } .lm-ins-ico { width: clamp(64px, 7vw, 88px); height: clamp(64px, 7vw, 88px); stroke-width: 1.5; } .lm-ins-num { position: absolute; top: .7rem; left: .9rem; font-family: var(--kk-font-head); color: var(--kk-text-3); font-size: .95rem; letter-spacing: .04em; } .lm-ins-card p { margin: 0; color: var(--kk-text-2); font-size: .9rem; line-height: 1.6; } /* 6 Worauf wartest du noch? Text links, Guide aufgefächert rechts */ .lm-ctab-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1000px; margin-inline: auto; } .lm-ctab-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: var(--lm-text); text-align: center; } .lm-fan { position: relative; display: block; height: clamp(300px, 34vw, 400px); } .lm-fan-page { position: absolute; top: 50%; left: 50%; width: clamp(150px, 17vw, 215px); aspect-ratio: 910 / 1288; border-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(244, 67, 54, .18); transition: transform var(--kk-med) var(--kk-ease); } .lm-fan-page img { width: 100%; height: 100%; object-fit: cover; display: block; } .lm-fan-page.p0 { transform: translate(-95%, -46%) rotate(-14deg); filter: brightness(.55); } .lm-fan-page.p1 { transform: translate(-70%, -50%) rotate(-6deg); filter: brightness(.75); } .lm-fan-page.p2 { transform: translate(-40%, -54%) rotate(3deg); } .lm-fan:hover .lm-fan-page.p2 { transform: translate(-40%, -57%) rotate(4deg); } /* 7 Über den Autor */ .lm-author-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 4.5rem); align-items: start; max-width: 1060px; margin-inline: auto; } .lm-author-grid.is-single { grid-template-columns: minmax(0, 1fr); max-width: var(--lm-text); } .lm-author-media { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem); } .lm-author-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); } .lm-author-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .lm-author-text .lm-h2 { margin-bottom: .35rem; } .lm-author-role { margin: 0 0 1rem; color: var(--kk-red); font-weight: 600; } .lm-author-lead { margin: 0 0 1.4rem; color: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1.55; } .lm-author-body p { margin: 0 0 1rem; color: var(--kk-text-2); line-height: 1.75; } .lm-quotes { list-style: none; padding: 0; margin: .4rem 0 1.4rem; display: grid; gap: .5rem; } .lm-quotes li { padding: .65rem 1rem; border-radius: 10px; background: var(--kk-surface); border: 1px solid var(--kk-divider); color: #fff; font-weight: 500; } .lm-author-proof { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; margin: 1.8rem 0 1.2rem; } .lm-avatars { display: inline-flex; } .lm-avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--kk-bg); margin-left: -10px; } .lm-avatars img:first-child { margin-left: 0; } .lm-disclaimer { margin: 0; color: var(--kk-text-3); font-size: .78rem; line-height: 1.55; } /* 8 Formular: zentriert, Karte mit zwei Schritten, Auswahl als Kacheln */ .lm-form-wrap { max-width: 820px; margin-inline: auto; text-align: center; } .lm-form-wrap .lm-section-sub { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .lm-card { text-align: left; background: var(--kk-surface); border: 1px solid var(--kk-divider); border-top: 3px solid var(--kk-red); border-radius: var(--kk-radius-lg); padding: clamp(1.3rem, 3.5vw, 2rem); box-shadow: 0 30px 70px rgba(0, 0, 0, .45); } .lm-form .ms-q { font-family: var(--kk-font-body); text-transform: none; font-weight: 700; font-size: 1.15rem; text-align: center; margin-bottom: 1.1rem; } .lm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .lm-tiles .ms-chip { width: 100%; border-radius: 12px; padding: .95rem 1rem; text-align: center; line-height: 1.35; background: var(--kk-bg); } .lm-tiles .ms-chip:last-child:nth-child(odd) { grid-column: 1 / -1; } .lm-form select { width: 100%; padding: .75rem .9rem; background: var(--kk-bg); border: 1px solid var(--kk-divider); border-radius: var(--kk-radius); color: var(--kk-text); font: inherit; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eceff3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; padding-right: 2.4rem; } .lm-form select:focus { outline: none; border-color: var(--kk-red); box-shadow: 0 0 0 3px var(--kk-red-soft); } .lm-submit { width: 100%; justify-content: center; } .lm-card .lm-note { text-align: center; } /* Leiste am unteren Rand (nur Handy): ein breiter Button */ .lm-sticky { display: none; } /* Fuß: schlicht wie bei Dirk Kreuter */ .lm-foot { padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; border-top: 1px solid var(--kk-divider); } .lm-foot-inner { display: grid; justify-items: center; gap: 1.2rem; text-align: center; } .lm-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; } .lm-foot-links a, .lm-foot-links button { color: var(--kk-text-3); font: inherit; font-size: .85rem; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; } .lm-foot-links a:hover, .lm-foot-links button:hover { color: var(--kk-red); } .lm-foot-copy { margin: 0; color: var(--kk-text-3); font-size: .78rem; } .lm-foot-copy a { color: inherit; } /* Danke-Seite */ .lm-hero--danke { text-align: left; } .lm-danke { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 980px; margin-inline: auto; } .lm-danke.is-single { grid-template-columns: minmax(0, 1fr); max-width: 720px; text-align: center; } .lm-mockup--danke img { width: 100%; height: auto; display: block; } .lm-danke .lm-title { margin-inline: 0; font-size: clamp(1.7rem, 3.6vw, 2.6rem); } .lm-sub { color: var(--kk-text-2); line-height: 1.7; margin: 0 0 1.2rem; } .lm-form-note { margin: .8rem 0 0; font-size: .84rem; color: var(--kk-text-3); } .lm-bridge { margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--kk-divider); } .lm-bridge-title { font-family: var(--kk-font-body); text-transform: none; font-weight: 700; font-size: 1.25rem; margin: 0 0 .6rem; } .lm-bridge p { color: var(--kk-text-2); margin: 0 0 1rem; } @media (max-width: 960px) { .lm-guide-grid, .lm-ctab-grid, .lm-author-grid, .lm-danke { grid-template-columns: minmax(0, 1fr); } .lm-guide-media { width: min(340px, 82%); } .lm-aud-card { flex-basis: calc((100% - 2 * clamp(1rem, 2vw, 1.4rem)) / 3); } .lm-ins-card, .lm-ins-grid.n-3 .lm-ins-card, .lm-ins-grid.n-5 .lm-ins-card, .lm-ins-grid.n-6 .lm-ins-card, .lm-ins-grid.n-9 .lm-ins-card { flex-basis: calc((100% - clamp(1.2rem, 2.4vw, 1.8rem)) / 2); } .lm-band-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem; } .lm-band-list li + li { border-left: 0; } .lm-band-list li:nth-child(even) { border-left: 1px solid var(--kk-divider); } .lm-ctab-text { text-align: center; } .lm-fan { order: -1; height: 300px; } .lm-author-media { position: static; max-width: 420px; margin-inline: auto; width: 100%; } .lm-danke .lm-title { margin-inline: auto; } .lm-hero--danke { text-align: center; } .lm-danke .lm-mockup { max-width: 240px; margin-inline: auto; } } @media (max-width: 640px) { .lm-aud-card { flex-basis: calc((100% - clamp(1rem, 2vw, 1.4rem)) / 2); } .lm-ins-card, .lm-ins-grid.n-3 .lm-ins-card, .lm-ins-grid.n-5 .lm-ins-card, .lm-ins-grid.n-6 .lm-ins-card, .lm-ins-grid.n-9 .lm-ins-card { flex-basis: 100%; } .lm-tiles { grid-template-columns: minmax(0, 1fr); } .lm-tiles .ms-chip:last-child:nth-child(odd) { grid-column: auto; } .lm-spec { grid-template-columns: 40px 1fr; gap: .8rem; } .lm-spec .lm-ico { width: 36px; height: 36px; } .lm-cta, .lm-sticky-btn { width: 100%; justify-content: center; font-size: .8rem; padding-inline: 1rem; letter-spacing: .02em; } .lm-ins-art { aspect-ratio: 16 / 7; } .lm-fan { height: 250px; } body.has-sticky .lm-foot { padding-bottom: calc(2rem + 76px); } .lm-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(12, 12, 12, .96); border-top: 1px solid var(--kk-divider); } .lm-sticky[hidden] { display: none; } } /* ============ m50 Hero-Stil „Rot“ für Landingpages (4.14.0, Wunsch Kilian) ============ */ /* Roter, gekörnter Grund mit Taktik-Kritzeleien, ohne Bild (4.14.1: ohne Rasen, nur Rot). * Links Kilian freigestellt mit Namensschild, rechts Text, Haken-Liste und weißer Button. */ .kk-rot-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse 80% 70% at 62% 30%, #d7302b 0%, #b5161c 42%, #7a0c12 100%); padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; } .kk-rot-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .kk-rot-bg::before { content: ''; position: absolute; inset: 0; opacity: .32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } .kk-rot-doodles { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, .13); } .kk-rot-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; } .kk-rot-hero.has-photo .kk-rot-inner { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .kk-rot-text { align-self: center; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); text-align: left; } .kk-rot-hero:not(.has-photo) .kk-rot-text { max-width: 760px; margin-inline: auto; text-align: center; } .kk-rot-text .lm-title, .kk-rot-text .hero-title { color: #fff; margin: 0 0 1rem; max-width: none; text-shadow: 0 2px 18px rgba(80, 0, 0, .35); } .kk-rot-text .hero-title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); } .kk-rot-text .lm-hl { background: #fff; color: var(--kk-red); padding: 0 .18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; text-shadow: none; } .kk-rot-text .hero-sub { margin: 0 0 1.2rem; max-width: 56ch; color: rgba(255, 255, 255, .92); } .kk-rot-hero:not(.has-photo) .hero-sub { margin-inline: auto; } .kk-rot-text .lp-trust { margin-bottom: 1.1rem; background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .28); } .kk-rot-points { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; } .kk-rot-hero:not(.has-photo) .kk-rot-points { justify-content: center; } .kk-rot-points li { display: flex; align-items: center; gap: .6rem; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 500; color: #fff; } .kk-rot-points svg { width: 1.3em; height: 1.3em; flex: none; opacity: .9; } .kk-rot-hero .btn-primary { background: #fff; color: var(--kk-red); box-shadow: 0 10px 26px rgba(70, 0, 0, .35); } .kk-rot-hero .btn-primary:hover { background: #fff; color: #c62828; box-shadow: 0 14px 32px rgba(70, 0, 0, .45); } .kk-rot-hero .lm-note, .kk-rot-hero .lp-hero-note { color: rgba(255, 255, 255, .85); } .kk-rot-hero .lm-rating { justify-items: start; } .kk-rot-hero:not(.has-photo) .lm-rating { justify-items: center; } .kk-rot-hero .lm-rating-line, .kk-rot-hero .lm-rating-text { color: #fff; } .kk-rot-photo { position: relative; align-self: end; } .kk-rot-photo-img { display: block; width: 100%; max-width: 560px; height: auto; max-height: min(88vh, 760px); object-fit: contain; object-position: bottom center; margin-inline: auto; filter: drop-shadow(0 18px 30px rgba(40, 0, 0, .35)); } .kk-rot-badge { position: absolute; left: 0; bottom: clamp(1.2rem, 4vw, 2.6rem); display: grid; transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); } .kk-rot-badge-name { background: #fff; color: var(--kk-red); font-family: var(--kk-font-head); text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1; padding: .3rem .6rem .2rem; } .kk-rot-badge-role { white-space: nowrap; justify-self: start; margin-left: .7rem; background: #fff; color: #111; font-family: var(--kk-font-head); text-transform: uppercase; font-size: clamp(.7rem, 1.2vw, .85rem); letter-spacing: .02em; padding: .2rem .5rem; border-top: 2px solid #111; } @media (max-width: 860px) { .kk-rot-hero.has-photo .kk-rot-inner { grid-template-columns: minmax(0, 1fr); } .kk-rot-text { order: -1; padding-bottom: 0; text-align: center; } .kk-rot-points { justify-content: center; } .kk-rot-hero .lm-rating { justify-items: center; } .kk-rot-photo-img { max-width: 380px; max-height: 62vh; } .kk-rot-badge { left: 50%; transform: translateX(-60%) rotate(-2deg); } } @media (max-width: 860px) { .kk-rot-hero:not(.has-photo) .kk-rot-text { padding-bottom: clamp(2.5rem, 8vw, 3.5rem); } } /* 4.15.3: eigenes Hintergrundbild (Kilian): ersetzt Körnung und Pfeile, Unterkante (Rasen) bleibt sichtbar. */ /* Breites, hohes Bild in voller Breite unten verankert: Rasen bleibt ein Streifen (ca. 14 % der Breite), darüber Rot. */ .kk-rot-hero.has-bgimg .kk-rot-bg { background: #8e1016 var(--rot-bg) center bottom / 100% auto no-repeat; } .kk-rot-hero.has-bgimg .kk-rot-bg::before, .kk-rot-hero.has-bgimg .kk-rot-doodles { display: none; } .kk-rot-hero.has-bgimg .kk-rot-text { padding-bottom: calc(14.5vw + 2.5rem); } @media (max-width: 860px) { .kk-rot-hero.has-bgimg .kk-rot-bg { background: #8e1016 var(--rot-bg-m) var(--rot-bg-pos, center bottom) / cover no-repeat; } .kk-rot-hero.has-bgimg.has-photo .kk-rot-text { padding-bottom: 0; } }