sitzen, und deren margin/margin:auto (z. B. zur Zentrierung) wird heimlich auf 0 zurückgesetzt – unabhängig von der Reihenfolge im File. */ :where(body.pknd) h1, :where(body.pknd) h2, :where(body.pknd) h3 { margin: 0; } :where(body.pknd) p { margin: 0; } html { scroll-behavior: smooth; } .pknd-container { max-width: 1340px; margin: 0 auto; padding-left: 40px; padding-right: 40px; } @media (max-width: 782px) { .pknd-container { padding-left: 20px; padding-right: 20px; } } /* Typo-Bausteine */ .pknd-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pknd-accent); margin-bottom: 18px; } .pknd-badge--small { font-size: 10px; letter-spacing: 0.24em; margin-bottom: 14px; } .pknd-h2 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.025em; text-wrap: balance; } .pknd-h3 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; } .pknd-section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; } .pknd-section-head__text { max-width: 300px; font-size: 15px; line-height: 1.6; color: var(--pknd-muted); font-weight: 300; } .pknd-section-head__text.is-right { text-align: right; } @media (max-width: 782px) { .pknd-section-head { margin-bottom: 36px; } .pknd-section-head__text.is-right { text-align: left; } } /* Buttons */ .pknd-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--pknd-radius); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .2s ease, color .2s ease, opacity .2s ease; } .pknd-btn--primary { background: var(--pknd-accent); color: var(--pknd-accent-fg); } .pknd-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); } .pknd-btn--pill { border-radius: 999px; padding: 16px 32px; letter-spacing: 0.06em; } .pknd-btn--ghost { background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #f6f3ec; border: 1px solid rgba(255, 255, 255, 0.3); } .pknd-btn--ghost:hover { background: rgba(255, 255, 255, 0.18); } .pknd-btn--solid { background: var(--pknd-fg); color: var(--pknd-bg); } .pknd-btn--solid:hover { opacity: 0.86; } .pknd-btn--outline { background: transparent; color: var(--pknd-accent); border: 1px solid var(--pknd-accent); padding: 11px 22px; border-radius: 6px; font-size: 12.5px; letter-spacing: 0.04em; text-transform: none; } .pknd-btn--outline:hover { background: var(--pknd-accent); color: var(--pknd-accent-fg); } /* Scroll-Reveal */ body.pknd .reveal { opacity: 0; } body.pknd .reveal.in { opacity: 1; animation: pkndFadeUp .75s cubic-bezier(.16, 1, .3, 1) both; } @keyframes pkndFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { body.pknd .reveal { opacity: 1; } body.pknd .reveal.in { animation: none; } } /* ========================================================================= PRELOADER ========================================================================= */ .pknd-preloader { position: fixed; inset: 0; display: grid; place-items: center; background: linear-gradient(145deg, rgba(46, 46, 45, 1), #282727); transition: opacity 800ms ease, transform 1350ms var(--pknd-ease-snap), filter 1350ms var(--pknd-ease-smooth); will-change: opacity, transform, filter; z-index: 9999; isolation: isolate; } .pknd-preloader__shell { position: relative; display: grid; place-items: center; width: 100%; height: 100%; } .pknd-preloader__stage { position: relative; width: min(62vmin, 520px); aspect-ratio: 491.12 / 488.434; display: grid; place-items: center; transition: transform 1150ms var(--pknd-ease-snap), opacity 650ms ease, filter 1150ms var(--pknd-ease-smooth); } .pknd-preloader__stage svg { width: 100%; height: 100%; overflow: visible; } .pknd-preloader__logo { max-width: 280px; margin-top: 70px; filter: brightness(0) invert(1); } .pknd-ldr-base { stroke: #b58a51; opacity: 0.1; } .pknd-ldr-progress { stroke: #b58a51; opacity: 0.85; filter: url(#pkndSoftGlow); transition: opacity 220ms ease; } .pknd-ldr-snake { stroke: #f3d39d; opacity: 0.92; filter: url(#pkndSnakeGlow); transition: opacity 220ms ease; } .pknd-ldr-head-core { fill: #f3d39d; filter: url(#pkndHeadGlow); opacity: 0; transition: opacity 220ms ease; } .pknd-ldr-head-aura { fill: rgba(243, 211, 157, 0.35); filter: url(#pkndHeadAura); opacity: 0; transition: opacity 220ms ease; } body.pknd.is-revealed .pknd-preloader { opacity: 0; transform: scale(1.08); filter: blur(14px); pointer-events: none; } body.pknd.is-revealed .pknd-preloader__stage { transform: translateY(-22px) scale(0.88); opacity: 0; filter: blur(10px); } @media (max-width: 900px) { .pknd-preloader__stage { width: min(72vmin, 460px); } .pknd-preloader__logo { max-width: 220px; } } /* ========================================================================= HEADER ========================================================================= */ .pknd-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 50; color: rgba(255, 255, 255, 0.96); background: rgba(18, 16, 12, 0.97); border-bottom: 1px solid rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: box-shadow .4s ease, border-color .4s ease; } body.pknd.admin-bar .pknd-header { top: 32px; } @media (max-width: 782px) { body.pknd.admin-bar .pknd-header { top: 46px; } } .pknd-header.is-scrolled { border-bottom-color: rgba(255, 255, 255, 0.10); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28); } .pknd-header__inner { width: 100%; padding: 0 var(--pknd-pad-x); height: var(--pknd-header-h); display: flex; align-items: center; gap: 32px; } .pknd-header__brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; flex-shrink: 0; } .pknd-header__logo-icon { width: 42px; height: 42px; object-fit: contain; } .pknd-header__wordmark { height: 38px; width: auto; object-fit: contain; filter: brightness(0) invert(1); } .pknd-header__nav { display: flex; align-items: center; flex: 1; justify-content: center; } .pknd-nav-list { display: flex; gap: 36px; align-items: center; list-style: none; margin: 0; padding: 0; } .pknd-nav-item { position: relative; } .pknd-nav-item > a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; letter-spacing: 0.02em; color: inherit; text-decoration: none; opacity: 0.85; font-weight: 500; white-space: nowrap; transition: opacity .2s ease, color .2s ease; } .pknd-nav-item > a:hover, .pknd-nav-item.is-current > a { opacity: 1; color: var(--pknd-accent); } /* Untermenü-Toggle (Chevron) */ .pknd-nav-toggle { display: none; align-items: center; justify-content: center; background: transparent; border: none; color: inherit; opacity: 0.7; cursor: pointer; padding: 0; } .pknd-nav-item.has-children > .pknd-nav-toggle { display: inline-flex; } .pknd-nav-item.has-children:hover > .pknd-nav-toggle, .pknd-nav-item.has-children.is-open > .pknd-nav-toggle { opacity: 1; } .pknd-nav-toggle svg { transition: transform .25s ease; } .pknd-nav-item.is-open > .pknd-nav-toggle svg { transform: rotate(180deg); } .pknd-submenu { list-style: none; margin: 0; padding: 0; } .pknd-header__nav-mobile-extra { display: none; } .pknd-header__actions { display: flex; align-items: center; gap: 28px; flex-shrink: 0; } .pknd-header__phone { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: inherit; text-decoration: none; letter-spacing: 0.01em; white-space: nowrap; opacity: 0.82; transition: opacity .2s ease, color .2s ease; } .pknd-header__phone:hover { opacity: 1; color: var(--pknd-accent); } .pknd-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; cursor: pointer; flex-shrink: 0; margin-left: auto; } .pknd-header__burger span { display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .pknd-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pknd-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .pknd-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Desktop: Untermenüs als Dropdown */ @media (min-width: 1024px) { .pknd-nav-toggle { width: 18px; height: 18px; } /* Unsichtbare Brücke über die Lücke zwischen Menüpunkt und Dropdown – ohne sie verliert der Cursor beim Runterfahren den :hover-Zustand, bevor er das Submenü erreicht. */ .pknd-nav-item.has-children::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } .pknd-submenu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 220px; background: rgba(18, 16, 12, 0.98); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 10; } .pknd-nav-item.has-children:hover > .pknd-submenu, .pknd-nav-item.has-children.is-open > .pknd-submenu, .pknd-nav-item.has-children:focus-within > .pknd-submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .pknd-submenu .pknd-nav-item { width: 100%; } .pknd-submenu .pknd-nav-item > a { display: block; padding: 10px 14px; border-radius: 6px; white-space: nowrap; opacity: 0.85; font-size: 13px; } .pknd-submenu .pknd-nav-item > a:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); color: var(--pknd-accent); } .pknd-submenu .pknd-submenu { top: -8px; left: 100%; transform: translateX(-6px) translateY(0); } .pknd-submenu .pknd-nav-item.has-children:hover > .pknd-submenu, .pknd-submenu .pknd-nav-item.has-children.is-open > .pknd-submenu { transform: translateX(0) translateY(0); } } @media (max-width: 1200px) { .pknd-header__actions .pknd-header__phone { display: none; } .pknd-nav-list { gap: 24px; } } @media (max-width: 1023px) { .pknd-header__actions { display: none; } .pknd-header__burger { display: flex; } .pknd-header__nav { position: fixed; top: var(--pknd-header-h); left: 0; right: 0; background: rgba(18, 16, 12, 0.98); padding: 18px var(--pknd-pad-x) 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .3s ease, opacity .3s ease, visibility .3s; max-height: calc(100vh - var(--pknd-header-h)); overflow: auto; } body.pknd.admin-bar .pknd-header__nav { top: calc(var(--pknd-header-h) + 46px); } .pknd-header__nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .pknd-nav-list { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; } .pknd-nav-item { width: 100%; } .pknd-nav-item > a { padding: 10px 0; font-size: 16px; width: 100%; } .pknd-nav-item.has-children { display: flex; flex-wrap: wrap; align-items: center; } .pknd-nav-item.has-children > a { flex: 1; } .pknd-nav-toggle { width: 36px; height: 36px; } .pknd-submenu { width: 100%; max-height: 0; overflow: hidden; padding-left: 18px; transition: max-height .35s ease; } .pknd-nav-item.is-open > .pknd-submenu { max-height: 600px; } .pknd-submenu .pknd-nav-item > a { padding: 8px 0; font-size: 15px; opacity: 0.75; } .pknd-header__nav-mobile-extra { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.12); width: 100%; } } /* Erste Sektion ohne Hero/Seiten-Header nicht unter dem fixen Header verstecken. Alle pknd-*-Sektionen sind

-Elemente (full-bleed); Hero und Seiten-Header brauchen den Abstand nicht, da sie selbst bis an den Header heranreichen. */ .pknd-main > section:first-child:not(.pknd-hero):not(.pknd-page-header):not(.pknd-hero-einfach) { margin-top: var(--pknd-header-h); } .pknd-main > *:first-child:not(section) { margin-top: var(--pknd-header-h); } /* Bei eingeloggten Nutzer:innen schiebt die WP-Admin-Bar den fixierten Header selbst um 32px (mobil 46px) nach unten (siehe body.admin-bar .pknd-header weiter oben) – ohne diesen Ausgleich würde der Header die erste Sektion entsprechend überlappen. */ body.pknd.admin-bar .pknd-main > section:first-child:not(.pknd-hero):not(.pknd-page-header):not(.pknd-hero-einfach) { margin-top: calc(var(--pknd-header-h) + 32px); } body.pknd.admin-bar .pknd-main > *:first-child:not(section) { margin-top: calc(var(--pknd-header-h) + 32px); } @media (max-width: 782px) { body.pknd.admin-bar .pknd-main > section:first-child:not(.pknd-hero):not(.pknd-page-header):not(.pknd-hero-einfach) { margin-top: calc(var(--pknd-header-h) + 46px); } body.pknd.admin-bar .pknd-main > *:first-child:not(section) { margin-top: calc(var(--pknd-header-h) + 46px); } } /* ========================================================================= HERO ========================================================================= */ .pknd-hero { position: relative; height: min(880px, 92vh); min-height: 600px; display: flex; align-items: center; overflow: hidden; background: var(--pknd-dark); } .pknd-hero__slides { position: absolute; inset: 0; } .pknd-hero__slide { position: absolute; inset: 0; opacity: 0; z-index: 1; transition: opacity 1.2s ease; overflow: hidden; } .pknd-hero__slide.is-active { opacity: 1; z-index: 2; } .pknd-hero__slide img, .pknd-hero__slide video { width: 100%; height: 100%; object-fit: cover; } .pknd-hero__slide img { animation: pkndKenburns 30s ease-out infinite alternate; } @keyframes pkndKenburns { from { transform: scale(1); } to { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { .pknd-hero__slide img { animation: none; } } .pknd-hero__overlay { position: absolute; inset: 0; background: var(--pknd-hero-overlay); z-index: 3; } .pknd-hero__content { position: relative; z-index: 4; width: 100%; padding: 0 var(--pknd-pad-x); } .pknd-hero__content-inner { max-width: 850px; animation: pkndHeroRise 1s ease both; } @keyframes pkndHeroRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .pknd-hero__content .pknd-badge { font-size: 12px; letter-spacing: 0.34em; margin-bottom: 26px; } .pknd-hero__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: clamp(40px, 5vw, 58px); line-height: 1.04; letter-spacing: -0.025em; color: #f6f3ec; text-wrap: balance; } .pknd-hero__text { margin-top: 26px; font-size: 19px; line-height: 1.6; color: rgba(246, 243, 236, 0.85); max-width: 540px; font-weight: 300; } .pknd-hero__buttons { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; } .pknd-hero__buttons .pknd-btn--primary { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); } .pknd-hero__controls { position: absolute; left: 0; right: 0; bottom: clamp(28px, 4vw, 48px); z-index: 5; padding: 0 var(--pknd-pad-x); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .pknd-hero__dots { display: flex; gap: 10px; align-items: center; } .pknd-hero__dot { width: 14px; height: 4px; border-radius: 2px; border: none; cursor: pointer; padding: 0; background: rgba(255, 255, 255, 0.4); transition: width .3s ease, background .3s ease; } .pknd-hero__dot.is-active { width: 36px; background: var(--pknd-accent); } .pknd-hero__arrows { display: flex; gap: 8px; } .pknd-hero__arrow { width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; cursor: pointer; font-size: 18px; border-radius: 50%; transition: background .2s ease; } .pknd-hero__arrow:hover { background: rgba(255, 255, 255, 0.18); } @media (max-width: 600px) { .pknd-hero { min-height: 540px; } .pknd-hero__text { font-size: 17px; } } /* ========================================================================= SEITEN-HEADER (Unterseiten-Banner) ========================================================================= */ .pknd-page-header { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: center; background: var(--pknd-dark); } .pknd-page-header.is-small { min-height: 280px; } .pknd-page-header__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pknd-page-header__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.55) 0%, rgba(8,8,10,0.78) 100%); } .pknd-page-header__body { position: relative; z-index: 2; width: 100%; max-width: 1340px; margin: 0 auto; padding: var(--pknd-header-h) var(--pknd-pad-x) 0; } .pknd-page-header__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -0.025em; color: #f6f3ec; text-wrap: balance; } .pknd-page-header__text { margin-top: 18px; max-width: 620px; font-size: 17px; line-height: 1.6; color: rgba(246, 243, 236, 0.85); font-weight: 300; } /* ========================================================================= USP- / TRUST-BAR ========================================================================= */ .pknd-usps { background: #13120f; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .pknd-usps__inner { max-width: 1340px; margin: 0 auto; display: flex; align-items: stretch; } .pknd-usps__item { flex: 1; padding: 32px clamp(20px, 3vw, 44px); display: flex; align-items: center; gap: 18px; border-right: 1px solid rgba(255, 255, 255, 0.07); } .pknd-usps__item:last-child { border-right: none; } .pknd-usps__icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(200, 155, 92, 0.45); display: flex; align-items: center; justify-content: center; color: var(--pknd-accent); } .pknd-usps__title { font-size: 12px; font-weight: 700; color: #f0ece3; letter-spacing: 0.07em; text-transform: uppercase; } .pknd-usps__text { font-size: 13px; color: rgba(240, 236, 227, 0.48); font-weight: 300; margin-top: 4px; } @media (max-width: 1023px) { .pknd-usps__inner { flex-wrap: wrap; } .pknd-usps__item { flex: 1 1 50%; min-width: 50%; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .pknd-usps__item:nth-child(2n) { border-right: none; } } @media (max-width: 600px) { .pknd-usps__item { flex: 1 1 100%; min-width: 100%; border-right: none; } } /* ========================================================================= ANSPRECHPARTNER ========================================================================= */ .pknd-person { background: var(--pknd-surface); display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .pknd-person__media { position: relative; min-height: 600px; overflow: hidden; } .pknd-person__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .pknd-person__body { padding: clamp(48px, 6vw, 104px); display: flex; flex-direction: column; justify-content: center; } .pknd-person.is-flipped .pknd-person__media { order: 2; } .pknd-person.is-flipped .pknd-person__body { order: 1; } .pknd-person__quote { margin: 32px 0 0; padding: 26px 30px; background: var(--pknd-surface-2); border-radius: var(--pknd-radius); font-size: 17px; line-height: 1.65; font-style: italic; font-weight: 400; } .pknd-person__text { margin-top: 26px; } .pknd-person__text p { font-size: 16px; line-height: 1.7; color: var(--pknd-muted); font-weight: 300; margin: 0 0 1em; } .pknd-person__text p:last-child { margin-bottom: 0; } .pknd-person__cta { margin-top: 36px; } @media (max-width: 1023px) { .pknd-person { grid-template-columns: 1fr; } .pknd-person__media { min-height: 420px; } .pknd-person.is-flipped .pknd-person__media { order: 0; } .pknd-person.is-flipped .pknd-person__body { order: 1; } } /* ========================================================================= LEISTUNGEN (TABS) ========================================================================= */ .pknd-services { background: var(--pknd-bg); padding: clamp(80px, 9vw, 130px) 0; } .pknd-services__tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; } .pknd-services__tab { padding: 13px 24px; border-radius: var(--pknd-radius); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; transition: all .25s ease; white-space: nowrap; border: 1px solid var(--pknd-line); background: transparent; color: var(--pknd-fg); } .pknd-services__tab.is-active { border-color: var(--pknd-accent); background: var(--pknd-accent); color: var(--pknd-accent-fg); } .pknd-services__panel { display: none; grid-template-columns: 1.05fr 0.95fr; border: 1px solid var(--pknd-line); border-radius: var(--pknd-radius); overflow: hidden; background: var(--pknd-surface); } .pknd-services__panel.is-active { display: grid; animation: pkndFadeUp .5s ease both; } .pknd-services__panel-body { padding: clamp(40px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: center; } .pknd-services__desc { margin-bottom: 30px; } .pknd-services__desc p { font-size: 16px; line-height: 1.7; color: var(--pknd-muted); font-weight: 300; margin: 0 0 1em; } .pknd-services__desc p:last-child { margin-bottom: 0; } .pknd-services__bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-bottom: 36px; } .pknd-services__bullet { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 400; } .pknd-services__bullet span { width: 6px; height: 6px; background: var(--pknd-accent); border-radius: 50%; flex-shrink: 0; } .pknd-services__panel-media { position: relative; min-height: 460px; overflow: hidden; } .pknd-services__panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 1023px) { .pknd-services__panel { grid-template-columns: 1fr; } .pknd-services__panel-media { min-height: 300px; order: -1; } .pknd-services__bullets { grid-template-columns: 1fr; } } /* ========================================================================= PRAXIS-GALERIE ========================================================================= */ .pknd-gallery { background: var(--pknd-surface-2); padding: clamp(80px, 9vw, 130px) 0; } .pknd-gallery__row { display: flex; gap: 8px; height: 460px; } .pknd-gallery__item { position: relative; overflow: hidden; border-radius: var(--pknd-radius); cursor: pointer; flex: 1 1 0%; transition: flex .6s cubic-bezier(.4, 0, .2, 1); } .pknd-gallery__row:hover .pknd-gallery__item { flex: 0.85 1 0%; } .pknd-gallery__row .pknd-gallery__item:hover { flex: 2.6 1 0%; } .pknd-gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pknd-gallery__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.06) 55%); } .pknd-gallery__caption { position: absolute; left: 22px; bottom: 24px; right: 18px; } .pknd-gallery__line { width: 28px; height: 2px; background: var(--pknd-accent); margin-bottom: 14px; } .pknd-gallery__title { font-family: 'Schibsted Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: #fff; letter-spacing: 0.01em; white-space: nowrap; } .pknd-gallery__sub { font-size: 13px; color: rgba(255, 255, 255, 0.72); margin-top: 4px; font-weight: 300; white-space: nowrap; } @media (max-width: 1023px) { .pknd-gallery__row { flex-direction: column; height: auto; } .pknd-gallery__item { min-height: 180px; } .pknd-gallery__row:hover .pknd-gallery__item, .pknd-gallery__row .pknd-gallery__item:hover { flex: 1 1 0%; } } /* ========================================================================= ZAHLEN / STATISTIKEN ========================================================================= */ .pknd-stats { background: var(--pknd-bg); padding: clamp(54px, 6vw, 88px) 0; border-bottom: 1px solid var(--pknd-line); } .pknd-stats__row { display: flex; align-items: stretch; } .pknd-stats__cell { flex: 1; padding: 44px 40px; border-left: 1px solid var(--pknd-line); } .pknd-stats__cell:first-child { border-left: none; } .pknd-stats__value { font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(34px, 3.8vw, 52px); font-weight: 600; letter-spacing: -0.03em; color: var(--pknd-accent); line-height: 1; } .pknd-stats__label { margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; } .pknd-stats__context { margin-top: 5px; font-size: 13px; color: var(--pknd-muted); font-weight: 300; } @media (max-width: 1023px) { .pknd-stats__row { flex-wrap: wrap; } .pknd-stats__cell { flex: 1 1 50%; min-width: 50%; padding: 28px 24px; } .pknd-stats__cell:nth-child(odd) { border-left: none; } } @media (max-width: 600px) { .pknd-stats__cell { flex: 1 1 100%; min-width: 100%; border-left: none; padding: 20px 0; } } /* ========================================================================= TEAM ========================================================================= */ .pknd-team { background: var(--pknd-surface); padding: clamp(80px, 9vw, 130px) 0; } .pknd-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; } .pknd-team__card { background: var(--pknd-bg); border: 1px solid var(--pknd-line); border-radius: var(--pknd-radius); overflow: hidden; display: grid; grid-template-columns: 0.85fr 1.15fr; transition: transform .3s ease, box-shadow .3s ease; } .pknd-team__card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12); } .pknd-team__media { position: relative; min-height: 280px; overflow: hidden; } .pknd-team__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .pknd-team__body { padding: 32px; display: flex; flex-direction: column; justify-content: center; } .pknd-team__name { font-family: 'Schibsted Grotesk', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; } .pknd-team__role { font-size: 13px; color: var(--pknd-accent); margin-top: 8px; font-weight: 500; letter-spacing: 0.02em; } .pknd-team__bio { font-size: 14px; color: var(--pknd-muted); margin-top: 14px; font-weight: 300; line-height: 1.6; } .pknd-team-banner { position: relative; border-radius: var(--pknd-radius); overflow: hidden; height: 440px; } .pknd-team-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 28%; } .pknd-team-banner__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.15) 60%, transparent 100%); } .pknd-team-banner__body { position: absolute; left: clamp(28px, 4vw, 56px); top: 50%; transform: translateY(-50%); max-width: 380px; } .pknd-team-banner__title { font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; color: #fff; line-height: 1.12; letter-spacing: -0.02em; } .pknd-team-banner__text { margin-top: 14px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); font-weight: 300; } @media (max-width: 1023px) { .pknd-team__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .pknd-team__card { grid-template-columns: 1fr; } .pknd-team__media { min-height: 300px; } } /* ========================================================================= IMPRESSIONEN (MARQUEE) ========================================================================= */ .pknd-marquee { background: var(--pknd-bg); padding: clamp(70px, 8vw, 110px) 0; overflow: hidden; } .pknd-marquee .pknd-container { margin-bottom: 44px; } .pknd-marquee__mask { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .pknd-marquee__track { display: flex; gap: 18px; width: max-content; animation: pkndMarquee 50s linear infinite; } .pknd-marquee__mask:hover .pknd-marquee__track { animation-play-state: paused; } @keyframes pkndMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .pknd-marquee__track { animation: none; } } .pknd-marquee__item { flex: 0 0 auto; width: clamp(280px, 30vw, 420px); height: clamp(220px, 22vw, 300px); border-radius: var(--pknd-radius); overflow: hidden; border: 1px solid var(--pknd-line); } .pknd-marquee__item img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================= BEWERTUNGEN ========================================================================= */ .pknd-reviews { background: var(--pknd-bg); padding: 30px 0 80px; overflow: hidden; } .pknd-reviews__score { text-align: right; } .pknd-reviews__score-value { font-family: 'Schibsted Grotesk', sans-serif; font-size: 56px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .pknd-reviews__stars { color: var(--pknd-accent); font-size: 18px; letter-spacing: 3px; margin-top: 4px; } .pknd-reviews__score-sub { font-size: 12px; color: var(--pknd-muted); margin-top: 6px; letter-spacing: 0.04em; } .pknd-reviews__viewport { overflow: hidden; } .pknd-reviews__track { display: flex; gap: 24px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); } .pknd-reviews__card { flex: 0 0 calc((100% - 48px) / 3); background: var(--pknd-surface); border: 1px solid var(--pknd-line); border-radius: var(--pknd-radius); padding: 34px; display: flex; flex-direction: column; } .pknd-reviews__card.is-alt { background: var(--pknd-surface-2); } .pknd-reviews__quote { font-family: Georgia, serif; font-size: 52px; line-height: 0.75; color: var(--pknd-accent); opacity: 0.28; margin-bottom: 16px; user-select: none; } .pknd-reviews__text { font-size: 15.5px; line-height: 1.7; font-weight: 300; flex: 1; } .pknd-reviews__meta { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--pknd-line); } .pknd-reviews__avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; background: var(--pknd-accent); color: var(--pknd-accent-fg); font-family: 'JetBrains Mono', monospace; } .pknd-reviews__name { font-size: 14px; font-weight: 600; } .pknd-reviews__when { font-size: 12px; color: var(--pknd-muted); margin-top: 2px; } .pknd-reviews__controls { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; } .pknd-reviews__dots { display: flex; gap: 8px; } .pknd-reviews__dot { width: 10px; height: 10px; border-radius: 5px; border: none; cursor: pointer; padding: 0; background: var(--pknd-line); transition: all .3s ease; } .pknd-reviews__dot.is-active { width: 30px; background: var(--pknd-accent); } .pknd-reviews__arrows { display: flex; gap: 8px; } .pknd-reviews__arrow { width: 48px; height: 48px; border: 1px solid var(--pknd-line); background: transparent; color: var(--pknd-fg); cursor: pointer; font-size: 18px; border-radius: calc(var(--pknd-radius) - 6px); transition: background .2s ease; } .pknd-reviews__arrow:hover { background: var(--pknd-surface-2); } @media (max-width: 1023px) { .pknd-reviews__card { flex: 0 0 calc((100% - 24px) / 2); } .pknd-reviews__score { text-align: left; } } @media (max-width: 700px) { .pknd-reviews__card { flex: 0 0 100%; } } /* ========================================================================= STANDORT & KONTAKT ========================================================================= */ .pknd-location { background: var(--pknd-surface-2); padding: clamp(80px, 9vw, 130px) 0; } .pknd-location__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: stretch; } .pknd-location__media { position: relative; min-height: 480px; border-radius: var(--pknd-radius); overflow: hidden; } .pknd-location__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pknd-location__maps { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; background: rgba(11, 11, 13, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; padding: 13px 22px; border-radius: var(--pknd-radius); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.18); transition: background .2s ease; } .pknd-location__maps:hover { background: rgba(255, 255, 255, 0.18); } .pknd-location__body { display: flex; flex-direction: column; justify-content: center; } .pknd-location__rows { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; } .pknd-location__row { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; border-bottom: 1px solid var(--pknd-line); } .pknd-location__label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pknd-muted); width: 96px; flex-shrink: 0; padding-top: 3px; } .pknd-location__value { font-size: 16px; line-height: 1.5; font-weight: 400; } .pknd-location__cta { margin-top: 32px; } @media (max-width: 1023px) { .pknd-location__grid { grid-template-columns: 1fr; } .pknd-location__media { min-height: 320px; } } /* ========================================================================= FAQ ========================================================================= */ .pknd-faq { background: var(--pknd-bg); padding: clamp(80px, 9vw, 130px) 0; } .pknd-faq__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } .pknd-faq__intro { position: sticky; top: calc(var(--pknd-header-h) + 34px); } .pknd-faq__text { margin-top: 22px; font-size: 15px; line-height: 1.7; color: var(--pknd-muted); font-weight: 300; } .pknd-faq__item { border-bottom: 1px solid var(--pknd-line); } .pknd-faq__question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; background: transparent; border: none; cursor: pointer; text-align: left; color: var(--pknd-fg); font-family: inherit; } .pknd-faq__question > span:first-child { font-family: 'Schibsted Grotesk', sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; } .pknd-faq__chevron { color: var(--pknd-accent); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s ease; } .pknd-faq__item.is-open .pknd-faq__chevron { transform: rotate(180deg); } .pknd-faq__answer { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .35s ease; } .pknd-faq__item.is-open .pknd-faq__answer { opacity: 1; } .pknd-faq__answer-inner { padding-bottom: 26px; max-width: 600px; } .pknd-faq__answer-inner p { font-size: 16px; line-height: 1.7; color: var(--pknd-muted); font-weight: 300; margin: 0 0 1em; } .pknd-faq__answer-inner p:last-child { margin-bottom: 0; } @media (max-width: 1023px) { .pknd-faq__grid { grid-template-columns: 1fr; gap: 32px; } .pknd-faq__intro { position: static; } } /* ========================================================================= CALL-TO-ACTION ========================================================================= */ .pknd-cta { position: relative; overflow: hidden; padding: clamp(80px, 9vw, 130px) 0; } .pknd-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pknd-cta__shade { position: absolute; inset: 0; background: linear-gradient(rgba(8, 8, 10, 0.82), rgba(8, 8, 10, 0.88)); } .pknd-cta__body { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 40px; text-align: center; } .pknd-cta__title { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.05; letter-spacing: -0.03em; color: #f6f3ec; text-wrap: balance; } .pknd-cta__text { margin: 24px auto 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: rgba(246, 243, 236, 0.82); font-weight: 300; } .pknd-cta__buttons { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; } .pknd-cta__buttons .pknd-btn { padding: 17px 36px; } .pknd-cta__buttons .pknd-btn--primary { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3); } /* ========================================================================= FOOTER ========================================================================= */ .pknd-footer { background: #0a0a0c; color: #f3efe7; padding: 80px 0 40px; } .pknd-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .pknd-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; text-decoration: none; } .pknd-footer__brand img { width: 42px; height: 42px; object-fit: contain; } .pknd-footer__brand .pknd-footer__wordmark { width: auto; height: 34px; filter: brightness(0) invert(1); } .pknd-footer__about p { font-size: 14px; line-height: 1.7; color: #9d978c; font-weight: 300; max-width: 280px; } .pknd-footer__col-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pknd-accent); margin-bottom: 22px; } .pknd-footer__links { display: flex; flex-direction: column; gap: 13px; } .pknd-footer__links a { font-size: 14px; color: #cfc9bf; text-decoration: none; font-weight: 300; transition: color .2s ease; } .pknd-footer__links a:hover { color: #fff; } .pknd-footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding-top: 28px; } .pknd-footer__copyright { font-size: 13px; color: #6f6a62; } .pknd-footer__legal { display: flex; gap: 28px; } .pknd-footer__legal a { font-size: 13px; color: #9d978c; text-decoration: none; transition: color .2s ease; } .pknd-footer__legal a:hover { color: #fff; } @media (max-width: 1023px) { .pknd-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .pknd-footer__grid { grid-template-columns: 1fr; gap: 36px; } } /* ========================================================================= NATIVE GUTENBERG-BLÖCKE (Unterseiten) Für einfache Inhalte (Text, Bild, Galerie, Spalten …) zwischen den pknd/*-Sektionsblöcken: normale Kern-Blöcke bekommen automatisch Seitenbreite, Außenabstand und vertikalen Rhythmus im Look des neuen Designs, ohne dass Redakteur:innen Klassen setzen müssen. Alle pknd-*-Sektionen (Hero, USPs, Leistungen, Team, Ablauf, Termine …) sind

-Elemente und verwalten ihre volle Breite selbst (eigener full-bleed Hintergrund + interner .pknd-container) – native Kern-Blöcke sind nie

, daher grenzt :not(section) beides sauber und dauerhaft ab, ohne bei jedem neuen pknd-Block gepflegt werden zu müssen. */ .pknd-main { background: var(--pknd-bg); } .pknd-main > *:not(section) { max-width: 1340px; margin-left: auto; margin-right: auto; padding-left: var(--pknd-pad-x); padding-right: var(--pknd-pad-x); box-sizing: border-box; } .pknd-main > *:not(:first-child):not(section) { margin-top: 40px; } /* :where() hält diese Basis-Regeln bei Spezifität (0,0,x) – reine Element-Selektoren wie ".pknd-hero-einfach__title" (0,1,0) gewinnen so immer dagegen, egal an welcher Stelle im Stylesheet sie stehen. Ohne :where() zieht ".pknd-main h1" (0,1,1) durch das zusätzliche Element sonst an eigenen Komponentenklassen vorbei. */ :where(.pknd-main) h1, :where(.pknd-main) h2, :where(.pknd-main) h3, :where(.pknd-main) h4, :where(.pknd-main) h5, :where(.pknd-main) h6 { font-family: 'Schibsted Grotesk', sans-serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--pknd-fg); margin: 0 0 0.5em; } :where(.pknd-main) h1 { font-size: clamp(32px, 4vw, 48px); } :where(.pknd-main) h2 { font-size: clamp(28px, 3.4vw, 40px); } :where(.pknd-main) h3 { font-size: clamp(22px, 2.4vw, 28px); } :where(.pknd-main) p { font-size: 16px; line-height: 1.7; color: var(--pknd-muted); font-weight: 300; margin: 0 0 1em; } :where(.pknd-main) p:last-child { margin-bottom: 0; } :where(.pknd-main) a { color: var(--pknd-accent); } :where(.pknd-main) ul, :where(.pknd-main) ol { color: var(--pknd-muted); font-size: 16px; line-height: 1.7; font-weight: 300; padding-left: 1.2em; } :where(.pknd-main) li { margin-bottom: 0.4em; } :where(.pknd-main) blockquote { margin: 0; padding: 26px 30px; background: var(--pknd-surface-2); border-radius: var(--pknd-radius); font-size: 17px; line-height: 1.65; font-style: italic; border: none; } :where(.pknd-main) figure { margin: 0; } :where(.pknd-main) img { border-radius: var(--pknd-radius); } .pknd-main .wp-block-image img, .pknd-main .wp-block-gallery img, .pknd-main .wp-block-cover img { border-radius: var(--pknd-radius); } .pknd-main .wp-block-cover { border-radius: var(--pknd-radius); overflow: hidden; } .pknd-main .wp-block-cover .wp-block-cover__inner-container h1, .pknd-main .wp-block-cover .wp-block-cover__inner-container h2, .pknd-main .wp-block-cover .wp-block-cover__inner-container h3, .pknd-main .wp-block-cover .wp-block-cover__inner-container p { color: #fff; } .pknd-main .wp-block-columns { gap: clamp(24px, 4vw, 48px); } .pknd-main .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--pknd-radius); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background: var(--pknd-accent); color: var(--pknd-accent-fg); transition: transform .25s ease, box-shadow .25s ease; } .pknd-main .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); } .pknd-main .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--pknd-accent); border: 1px solid var(--pknd-accent); } .pknd-main .wp-block-separator { border: none; border-top: 1px solid var(--pknd-line); margin: 0; } /* ========================================================================= UNTERSEITEN – lokale Design-Tokens (exakt nach designvorlage/Ulmenhof Unterseiten.html) Diese Sektionen nutzen bewusst eigene, leicht abweichende Werte statt der Startseiten-Tokens weiter oben (u. a. Helvetica Neue statt Schibsted Grotesk für Überschriften, #c49a5c/#b3854a statt #c89b5c). Per lokaler Neu-Definition der --pknd-*-Variablen auf den Sektions-Wurzeln erben alle var()-Verweise (Badges, Flächen, Linien, Text) automatisch die exakten Werte, ohne dass Startseite, Header/Footer oder FAQ/CTA betroffen sind. ========================================================================= */ .pknd-hero-einfach, .pknd-seiten-intro, .pknd-konzept, .pknd-ablauf, .pknd-gruende, .pknd-bild-zahlen, .pknd-fb-intro, .pknd-fb-termine, .pknd-beitrag-featured, .pknd-presse-grid, .pknd-downloads { --pknd-accent: #c49a5c; --pknd-accent-text: #b3854a; --pknd-accent-fg: #ffffff; --pknd-dark: #14120f; --pknd-fg: #17140f; --pknd-muted: #6b625a; --pknd-surface: #fdfbf8; --pknd-surface-2: #f2ece3; --pknd-line: rgba(23, 20, 15, 0.1); --pknd-heading-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Badges/Eyebrows auf hellem Grund: dunkleres Gold, Fließtext-Schrift statt Mono. */ .pknd-seiten-intro .pknd-badge, .pknd-konzept .pknd-badge, .pknd-ablauf .pknd-badge, .pknd-gruende .pknd-badge, .pknd-bild-zahlen .pknd-badge, .pknd-fb-intro .pknd-badge, .pknd-fb-termine .pknd-badge, .pknd-downloads .pknd-badge, .pknd-konzept__card .pknd-badge { font-family: 'Hanken Grotesk', sans-serif; letter-spacing: 0.24em; color: var(--pknd-accent-text); } /* Badges auf dunklem Grund (Hero, Anmelde-Box) behalten das hellere Gold. */ .pknd-hero-einfach .pknd-eyebrow-dots, .pknd-fb-intro__box .pknd-badge { font-family: 'Hanken Grotesk', sans-serif; letter-spacing: 0.24em; color: var(--pknd-accent); } .pknd-eyebrow-dots { display: flex; align-items: center; gap: 10px; font-family: 'Hanken Grotesk', sans-serif; font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pknd-accent-text, var(--pknd-accent)); margin-bottom: 26px; } .pknd-eyebrow-dots__sep { opacity: 0.5; } /* Überschriften in diesen Sektionen: Helvetica Neue statt Schibsted Grotesk. */ .pknd-seiten-intro .pknd-h2, .pknd-konzept .pknd-h2, .pknd-ablauf .pknd-h2, .pknd-gruende .pknd-h2, .pknd-bild-zahlen .pknd-h3, .pknd-fb-intro .pknd-h3, .pknd-fb-termine .pknd-h3 { font-family: var(--pknd-heading-font); letter-spacing: -0.022em; } .pknd-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; } .pknd-filter-btn { border: 1px solid var(--pknd-line); background: transparent; color: var(--pknd-fg); font-family: 'Hanken Grotesk', sans-serif; font-size: 13.5px; font-weight: 600; padding: 11px 22px; border-radius: 999px; cursor: pointer; transition: all .2s ease; } .pknd-filter-btn.is-active { background: var(--pknd-accent); border-color: var(--pknd-accent); color: var(--pknd-accent-fg); } [data-filter-items] [data-filter-tag].is-hidden { display: none !important; } /* ========================================================================= HERO (EINFACH) ========================================================================= */ .pknd-hero-einfach { position: relative; /* Höhe kommt als Inline-Style vom Block (Feld "Höhe (px)"); diese beiden Regeln sind nur ein Sicherheitsnetz gegen zu extreme Werte. */ max-height: 80vh; min-height: 320px; overflow: hidden; display: flex; align-items: center; background: var(--pknd-dark); } .pknd-hero-einfach__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: pkndKenburns 24s ease-in-out infinite alternate; } .pknd-hero-einfach__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(12,10,8,.92) 0%, rgba(12,10,8,.7) 46%, rgba(12,10,8,.3) 100%); } .pknd-hero-einfach__body { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--pknd-pad-x); box-sizing: content-box; } .pknd-hero-einfach__inner { max-width: 780px; } .pknd-hero-einfach__title { font-family: var(--pknd-heading-font); font-weight: 700; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -0.025em; color: #fbf8f3; text-wrap: balance; margin: 0 0 24px; } .pknd-hero-einfach__text { font-size: 18px; line-height: 1.62; color: rgba(248, 244, 238, 0.82); max-width: 580px; font-weight: 400; margin: 0; } .pknd-hero-einfach__buttons { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; } /* ========================================================================= SEITEN-INTRO ========================================================================= */ .pknd-seiten-intro { background: var(--pknd-surface-2); padding: 90px 0 66px; border-bottom: 1px solid var(--pknd-line); } .pknd-seiten-intro__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: end; } .pknd-seiten-intro__text { font-size: 17px; line-height: 1.65; color: var(--pknd-muted); font-weight: 400; } @media (max-width: 900px) { .pknd-seiten-intro__grid { grid-template-columns: 1fr; gap: 24px; } } /* ========================================================================= KONZEPT MIT BEHANDLER-KARTE ========================================================================= */ .pknd-konzept { background: var(--pknd-surface); padding: clamp(80px, 9vw, 120px) 0; } .pknd-konzept__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 70px; align-items: start; } .pknd-konzept__text p { font-size: 17.5px; line-height: 1.72; color: var(--pknd-muted); font-weight: 400; margin: 0 0 20px; } .pknd-konzept__text p:last-child { margin-bottom: 0; } .pknd-konzept__card { background: var(--pknd-surface-2); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; padding: 34px; position: sticky; top: calc(var(--pknd-header-h) + 34px); } .pknd-konzept__card-media { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 24px; } .pknd-konzept__card-media img { width: 100%; height: 100%; object-fit: cover; } .pknd-konzept__card .pknd-badge { font-size: 11px; margin-bottom: 12px; } .pknd-konzept__card-name { font-family: var(--pknd-heading-font); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; } .pknd-konzept__card-text { font-size: 14.5px; line-height: 1.65; color: var(--pknd-muted); font-weight: 400; margin: 0; } .pknd-konzept__card-link { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #17140f; border-bottom: 1px solid rgba(23,20,15,.25); padding-bottom: 5px; margin-top: 22px; } .pknd-konzept__card-link:hover { color: var(--pknd-accent-text); border-color: var(--pknd-accent-text); } @media (max-width: 1023px) { .pknd-konzept__grid { grid-template-columns: 1fr; } .pknd-konzept__card { position: static; } } /* ========================================================================= ABLAUF (SCHRITTE) ========================================================================= */ .pknd-ablauf { background: var(--pknd-surface-2); padding: clamp(80px, 9vw, 120px) 0; } .pknd-ablauf__grid { display: grid; grid-template-columns: repeat(var(--pknd-ablauf-cols, 5), 1fr); gap: 20px; } .pknd-ablauf__step { background: var(--pknd-surface); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 12px; padding: 28px 24px 30px; transition: box-shadow .3s ease; } .pknd-ablauf__step:hover { box-shadow: 0 18px 40px rgba(23,20,15,0.1); } .pknd-ablauf__step.is-highlighted { background: var(--pknd-dark); border-color: var(--pknd-dark); } .pknd-ablauf__step.is-highlighted .pknd-ablauf__title { color: #fbf8f3; } .pknd-ablauf__step.is-highlighted .pknd-ablauf__text { color: #a9a096; } .pknd-ablauf__number { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; color: var(--pknd-accent); margin-bottom: 20px; } .pknd-ablauf__title { font-family: var(--pknd-heading-font); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; hyphens: auto; overflow-wrap: break-word; } .pknd-ablauf__text { font-size: 14.5px; line-height: 1.62; color: var(--pknd-muted); margin: 0; font-weight: 400; hyphens: auto; overflow-wrap: break-word; } @media (max-width: 1023px) { .pknd-ablauf__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pknd-ablauf__grid { grid-template-columns: 1fr; } } /* ========================================================================= GRÜNDE-GRID ========================================================================= */ .pknd-gruende { background: var(--pknd-surface); padding: clamp(80px, 9vw, 120px) 0; } .pknd-gruende__head { max-width: 640px; margin-bottom: 50px; } .pknd-gruende__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(23, 20, 15, 0.1); border: 1px solid rgba(23, 20, 15, 0.1); border-radius: 14px; overflow: hidden; } .pknd-gruende__item { background: var(--pknd-surface); padding: 34px 30px 38px; transition: background .35s ease; } .pknd-gruende__item:hover { background: var(--pknd-surface-2); } .pknd-gruende__number { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--pknd-accent); margin-bottom: 18px; } .pknd-gruende__title { font-family: var(--pknd-heading-font); font-size: 17px; font-weight: 700; margin-bottom: 9px; hyphens: auto; overflow-wrap: break-word; } .pknd-gruende__text { font-size: 14.5px; line-height: 1.6; color: var(--pknd-muted); font-weight: 400; margin: 0; hyphens: auto; overflow-wrap: break-word; } @media (max-width: 1023px) { .pknd-gruende__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .pknd-gruende__grid { grid-template-columns: 1fr; } } /* ========================================================================= BILD MIT ZAHLEN ========================================================================= */ .pknd-bild-zahlen { background: var(--pknd-surface-2); padding: clamp(80px, 9vw, 120px) 0; } .pknd-bild-zahlen__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .pknd-bild-zahlen.is-flipped .pknd-bild-zahlen__media { order: 2; } .pknd-bild-zahlen__media { border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; } .pknd-bild-zahlen__media img { width: 100%; height: 100%; object-fit: cover; } .pknd-bild-zahlen__text { font-size: 17px; line-height: 1.72; color: var(--pknd-muted); font-weight: 400; margin: 0 0 34px; } .pknd-bild-zahlen__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; } .pknd-bild-zahlen__value { font-family: var(--pknd-heading-font); font-size: 36px; font-weight: 700; color: var(--pknd-fg); line-height: 1; } .pknd-bild-zahlen__label { font-size: 13.5px; color: var(--pknd-muted); margin-top: 6px; } @media (max-width: 1023px) { .pknd-bild-zahlen__grid { grid-template-columns: 1fr; } .pknd-bild-zahlen.is-flipped .pknd-bild-zahlen__media { order: 0; } } /* ========================================================================= FORTBILDUNG – INTRO ========================================================================= */ .pknd-fb-intro { background: var(--pknd-surface); padding: clamp(70px, 8vw, 110px) 0 0; } .pknd-fb-intro__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: start; padding-bottom: 70px; } .pknd-fb-intro__text p { font-size: 17px; line-height: 1.72; color: var(--pknd-muted); font-weight: 400; margin: 0 0 20px; } .pknd-fb-intro__text p:last-child { margin-bottom: 0; } .pknd-fb-intro__box { background: var(--pknd-dark); border-radius: 14px; padding: 36px 34px; } .pknd-fb-intro__box-title { font-family: var(--pknd-heading-font); font-size: 23px; font-weight: 700; color: #fbf8f3; letter-spacing: -0.01em; margin-bottom: 14px; } .pknd-fb-intro__box-text { font-size: 15px; line-height: 1.65; color: #a9a096; margin: 0; } .pknd-fb-intro__box-button { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--pknd-accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 16px 22px; border-radius: 999px; margin-top: 26px; transition: background .3s ease, transform .3s ease; } .pknd-fb-intro__box-button:hover { background: #d5ac70; transform: translateY(-2px); } .pknd-fb-intro__box-fineprint { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: #a9a096; line-height: 1.7; } @media (max-width: 1023px) { .pknd-fb-intro__grid { grid-template-columns: 1fr; } } /* ========================================================================= FORTBILDUNG – TERMINE ========================================================================= */ .pknd-fb-termine { background: var(--pknd-surface); padding: 60px 0 clamp(80px, 9vw, 120px); } .pknd-fb-termine__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; } .pknd-fb-termine__head .pknd-h3 { font-size: 34px; } .pknd-fb-termine__list { display: flex; flex-direction: column; gap: 16px; } .pknd-fb-event { display: grid; grid-template-columns: 130px 1fr 240px; gap: 30px; background: #fff; border: 1px solid rgba(23, 20, 15, 0.09); border-radius: 14px; padding: 32px 34px; transition: border-color .3s ease; } .pknd-fb-event:hover { border-color: rgba(196,154,92,.55); } .pknd-fb-event.is-past { background: var(--pknd-surface-2); border-color: rgba(23,20,15,.07); } .pknd-fb-event__date { border-right: 1px solid rgba(23, 20, 15, 0.1); padding-right: 12px; } .pknd-fb-event__day { font-family: var(--pknd-heading-font); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; } .pknd-fb-event__month { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pknd-accent-text); margin-top: 8px; } .pknd-fb-event__weekday { font-size: 13.5px; color: #8b8279; margin-top: 4px; } .pknd-fb-event.is-past .pknd-fb-event__day { color: var(--pknd-muted); } .pknd-fb-event.is-past .pknd-fb-event__month { color: #8b8279; } .pknd-fb-event__pill { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pknd-accent-text); background: #f4eee5; border-radius: 999px; padding: 6px 12px; margin-bottom: 16px; } .pknd-fb-event.is-past .pknd-fb-event__pill { color: #8b8279; background: rgba(23,20,15,.05); } .pknd-fb-event__title { font-family: var(--pknd-heading-font); font-size: 23px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; } .pknd-fb-event__subtitle { font-size: 16px; color: var(--pknd-muted); margin: 0 0 18px; } .pknd-fb-event__speakers { font-size: 14.5px; line-height: 1.7; color: var(--pknd-muted); } .pknd-fb-event__speakers strong { font-weight: 600; } .pknd-fb-event__side { border-left: 1px solid rgba(23, 20, 15, 0.1); padding-left: 30px; display: flex; flex-direction: column; gap: 12px; } .pknd-fb-event__meta { font-size: 14px; color: var(--pknd-muted); line-height: 1.6; } .pknd-fb-event__free { color: var(--pknd-accent-text); font-weight: 600; } .pknd-fb-event__online-badge { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #3f7d5a; } .pknd-fb-event__online-badge span { width: 7px; height: 7px; border-radius: 50%; background: #3f7d5a; } .pknd-fb-event__button { display: block; text-align: center; width: 100%; box-sizing: border-box; font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; font-weight: 600; padding: 12px 18px; border-radius: 8px; border: 1px solid rgba(23,20,15,.2); color: #17140f; background: transparent; transition: border-color .25s ease, color .25s ease; } .pknd-fb-event__button:hover { border-color: var(--pknd-accent); color: var(--pknd-accent-text); } .pknd-fb-event__button--solid { background: #17140f; color: #fbf8f3; border-color: #17140f; } .pknd-fb-event__button--solid:hover { background: var(--pknd-accent); border-color: var(--pknd-accent); color: #fff; } .pknd-fb-event__flyer { margin-top: auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #17140f; border-bottom: 1px solid rgba(23,20,15,.25); padding-bottom: 5px; align-self: flex-start; } .pknd-fb-event__flyer:hover { color: var(--pknd-accent-text); border-color: var(--pknd-accent-text); } @media (max-width: 1023px) { .pknd-fb-event { grid-template-columns: 1fr; } .pknd-fb-event__date { border-right: none; padding-right: 0; display: flex; align-items: baseline; gap: 10px; } .pknd-fb-event__side { border-left: none; padding-left: 0; border-top: 1px solid rgba(23,20,15,.1); padding-top: 20px; } } /* ========================================================================= BEITRAG HERVORGEHOBEN ========================================================================= */ .pknd-beitrag-featured { background: var(--pknd-surface); padding: clamp(60px, 8vw, 90px) 0 0; } .pknd-beitrag-featured__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; background: var(--pknd-dark); border-radius: 16px; overflow: hidden; } .pknd-beitrag-featured__media { min-height: 420px; } .pknd-beitrag-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pknd-beitrag-featured__body { padding: clamp(36px, 4vw, 56px) clamp(30px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; } .pknd-beitrag-featured__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font-size: 13.5px; color: #a9a096; } .pknd-beitrag-featured__pill { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pknd-dark); background: var(--pknd-accent); border-radius: 999px; padding: 7px 14px; font-weight: 700; } .pknd-beitrag-featured__title { font-family: var(--pknd-heading-font); font-weight: 700; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.12; letter-spacing: -0.022em; color: #fbf8f3; margin: 0 0 20px; } .pknd-beitrag-featured__text { font-size: 17px; line-height: 1.7; color: #a9a096; margin: 0; } .pknd-beitrag-featured__button { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fbf8f3; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 15px 26px; align-self: flex-start; margin-top: 34px; transition: background .3s ease, border-color .3s ease; } .pknd-beitrag-featured__button:hover { background: var(--pknd-accent); border-color: var(--pknd-accent); } @media (max-width: 900px) { .pknd-beitrag-featured__inner { grid-template-columns: 1fr; } .pknd-beitrag-featured__media { min-height: 240px; } } /* ========================================================================= PRESSE-/BLOG-GRID ========================================================================= */ .pknd-presse-grid { background: var(--pknd-surface); padding: clamp(60px, 7vw, 90px) 0 clamp(80px, 9vw, 120px); } .pknd-presse-grid__head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; } .pknd-presse-grid__hint { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #a09689; } .pknd-presse-grid__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .pknd-presse-card { background: #fff; border: 1px solid rgba(23, 20, 15, 0.09); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .4s ease, transform .4s ease; } .pknd-presse-card:hover { box-shadow: 0 22px 48px rgba(23,20,15,0.1); transform: translateY(-4px); } .pknd-presse-card__media { aspect-ratio: 16 / 10; background: var(--pknd-surface-2); } .pknd-presse-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pknd-presse-card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; } .pknd-presse-card__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; color: #8b8279; } .pknd-presse-card__label { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pknd-accent-text); font-weight: 700; } .pknd-presse-card__title { font-family: var(--pknd-heading-font); font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 12px; } .pknd-presse-card__excerpt { font-size: 15px; line-height: 1.65; color: var(--pknd-muted); font-weight: 400; margin: 0 0 22px; } .pknd-presse-card__link { margin-top: auto; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #17140f; border-bottom: 1px solid rgba(23,20,15,.25); padding-bottom: 5px; align-self: flex-start; } .pknd-presse-card__link:hover { color: var(--pknd-accent-text); border-color: var(--pknd-accent-text); } @media (max-width: 1023px) { .pknd-presse-grid__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .pknd-presse-grid__grid { grid-template-columns: 1fr; } } /* ========================================================================= DOWNLOADS ========================================================================= */ .pknd-downloads { background: var(--pknd-surface-2); padding: clamp(80px, 9vw, 120px) 0; } .pknd-downloads__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; } .pknd-downloads__text { font-size: 16.5px; line-height: 1.72; color: var(--pknd-muted); font-weight: 400; margin: 0; } .pknd-downloads__items { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .pknd-downloads__item { display: block; background: var(--pknd-surface); border: 1px solid rgba(23,20,15,.09); border-radius: 12px; padding: 26px 24px; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease; } .pknd-downloads__item:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(23,20,15,0.09); } .pknd-downloads__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pknd-accent-text); margin-bottom: 12px; } .pknd-downloads__title { font-family: var(--pknd-heading-font); font-size: 18px; font-weight: 700; color: var(--pknd-fg); margin-bottom: 6px; } .pknd-downloads__desc { font-size: 14.5px; color: var(--pknd-muted); } .pknd-downloads__contact { background: var(--pknd-dark); border-radius: 12px; padding: 26px 24px; } .pknd-downloads__contact-title { font-family: var(--pknd-heading-font); font-size: 18px; font-weight: 700; color: #fbf8f3; margin-bottom: 8px; } .pknd-downloads__contact-text { font-size: 14.5px; color: #a9a096; line-height: 1.7; } @media (max-width: 1023px) { .pknd-downloads__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .pknd-downloads__items { grid-template-columns: 1fr; } }