/*
Theme Name:        Krause und Freunde
Theme URI:         https://example.com
Author:             Krause und Freunde
Author URI:         https://example.com
Description:        Schlankes, sicheres und sauberes Starter-Theme für Krause und Freunde. Enthält keine unnötigen Abhängigkeiten und ist bereit für individuelle Erweiterungen.
Version:             1.0.0
Requires at least:  6.4
Tested up to:        6.6
Requires PHP:        8.0
License:             GNU General Public License v2 or later
License URI:         https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:         krause-und-freunde
Tags:                blog, custom-menu, custom-logo, translation-ready

Dieses Theme basiert auf den offiziellen WordPress-Theme-Entwicklungsrichtlinien.
*/

/* ---------------------------------------------------
   Minimales Basis-Styling – bewusst zurückhaltend.
   Baue hier dein eigenes Design-System auf.
--------------------------------------------------- */

/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-regular.woff2")
    format("woff2");
}

/* inter-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-italic.woff2")
    format("woff2");
}

/* inter-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-500.woff2")
    format("woff2");
}

/* inter-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-500italic.woff2")
    format("woff2");
}

/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-700.woff2")
    format("woff2");
}

/* inter-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("assets/fonts/inter-v20-latin/inter-v20-latin-700italic.woff2")
    format("woff2");
}

/* pixelify-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/pixelify/pixelify-sans-v3-latin-regular.woff2")
    format("woff2");
}

/* pixelify-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 700;
  src: url("assets/fonts/pixelify/pixelify-sans-v3-latin-700.woff2")
    format("woff2");
}

:root {
  --kf-focus-width: 1px;
  --kf-focus-offset: 4px;
  --kf-focus-color: color-mix(in srgb, var(--kf-color-brand) 65%, var(--kf-color-dark));
  --kf-color-brand: #00ffa7;
  --kf-color-brand-hover: #00e696;
  --kf-color-dark: #222b2b;
  --kf-color-light-text: #e6eee9;
  --kf-color-muted: #a9b8b2;
  --kf-color-surface-dark: #2b3534;
  --kf-color-surface-dark-alt: #35413f;
  --kf-color-surface-light: #eef2ef;
  --kf-color-surface-light-alt: #f7f8f5;
  --kf-color-accent-secondary: #ff806f;
  --kf-color-border-dark: #45514e;
  --kf-color-light-text: var(--kf-color-surface-light-alt);
  --kf-color-text: var(--kf-color-surface-light-alt);
  --kf-color-bg: var(--kf-color-dark);
  --kf-color-accent: var(--kf-color-brand);
  --kf-max-width: 720px;
  --kf-blog-color-text: var(--kf-color-dark);
  --kf-blog-color-muted: #5d6865;
  --kf-blog-color-heading: #182120;
  --kf-blog-color-link: #12664f;
  --kf-blog-color-border: rgba(34, 43, 43, 0.2);
  --kf-blog-color-quote-bg: var(--kf-color-surface-light);
  /* Display bleibt separat, damit auf Singles nur die H1 Roca bekommt. */
  --kf-font-display: "roca", Georgia, serif;
  --kf-font-pixel: "Pixelify Sans", "Inter", system-ui, sans-serif;
  --kf-font-base:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kf-font-headline: var(--kf-font-base);
  --kf-font-subheadline: var(--kf-font-base);
  /* Fluid Type Scale: clamp() skaliert weich mit der Artikelbreite statt mit harten Breakpoints. */
  --kf-blog-step--1: clamp(0.875rem, 0.85rem + 0.12cqi, 0.95rem);
  --kf-blog-step-0: clamp(1rem, 0.958rem + 0.19cqi, 1.125rem);
  --kf-blog-step-1: clamp(1.15rem, 1.075rem + 0.33cqi, 1.375rem);
  --kf-blog-step-2: clamp(1.35rem, 1.217rem + 0.59cqi, 1.75rem);
  --kf-blog-step-3: clamp(1.65rem, 1.408rem + 1.07cqi, 2.375rem);
  --kf-blog-step-4: clamp(2.1rem, 1.717rem + 1.7cqi, 3.25rem);
  /* Zeilenhöhen: Fließtext braucht Luft, große Headlines dürfen dichter stehen. */
  --kf-blog-lh-tight: 1.15;
  --kf-blog-lh-snug: 1.28;
  --kf-blog-lh-body: 1.65;
  --kf-blog-lh-relaxed: 1.7;
  /* Lesebreite: 68ch hält normale Absätze grob im Bereich von 65-75 Zeichen. */
  --kf-blog-measure: 68ch;
  --kf-blog-measure-narrow: 58ch;
  /* 8px-Raster: rem-Werte bleiben skalierbar und ergeben konsistente Abstände. */
  --kf-space-3xs: 0.25rem;
  --kf-space-2xs: 0.5rem;
  --kf-space-xs: 0.75rem;
  --kf-space-s: 1rem;
  --kf-space-m: 1.5rem;
  --kf-space-l: 2.5rem;
  --kf-space-xl: 4rem;
  --kf-space-2xl: 6rem;
}

.kuf-typekit-loaded {
  --kf-font-headline: "roca", var(--kf-font-base);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--kf-color-text);
  background: var(--kf-color-bg);
  font-family: var(--kf-font-base);
  font-weight: 500;
  line-height: 1.6;
}

/* Gemeinsamer Fokusstandard für Links, Buttons, Formulare und tabindex-Elemente. */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: var(--kf-focus-width) solid var(--kf-focus-color);
  outline-offset: var(--kf-focus-offset);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

h1,
h2,
h3 {
  font-family: var(--kf-font-headline);
  font-style: normal;
  font-weight: 700;
  line-height: 1.05;
}

h4,
h5,
h6 {
  font-family: var(--kf-font-subheadline);
  font-style: normal;
  font-weight: 700;
  line-height: 1.15;
}

.site-container {
  max-width: var(--kf-max-width);
  margin: 0 auto;
  padding: 1.5rem;
}

a {
  color: var(--kf-color-accent);
}

img {
  max-width: 100%;
  height: auto;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
  max-width: min(90vw, 1480px);
}

.site-footer__cta,
.kuf-lukas__intro,
.kuf-home-content__intro {
  background:
    radial-gradient(
      ellipse at top left in oklch,
      rgba(34, 43, 43, 0.86) 0%,
      rgba(34, 43, 43, 0.64) 10%,
      rgba(34, 43, 43, 0.42) 24%,
      rgba(34, 43, 43, 0.2) 42%,
      rgba(34, 43, 43, 0) 68%
    ),
    radial-gradient(
      ellipse at bottom right in oklch,
      rgba(34, 43, 43, 0.62) 0%,
      rgba(34, 43, 43, 0.42) 12%,
      rgba(34, 43, 43, 0.22) 34%,
      rgba(34, 43, 43, 0) 70%
    ),
    var(--kf-color-brand);
}

.site-footer__cta {
  color: var(--kf-color-dark);
  overflow: hidden;
  padding: clamp(5rem, 9vw, 8rem) 0;
  position: relative;
}

.site-footer__cta > .container {
  position: relative;
  z-index: 1;
}

.site-footer__cta-eyebrow {
  margin: 0 0 var(--kf-space-xs);
  color: rgba(34, 43, 43, 0.72);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
}

.site-footer__cta-title {
  margin: 0;
  color: var(--kf-color-dark);
  font-family: var(--kf-font-display);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  text-wrap: balance;
}

.site-footer__cta-title .text-highlight {
  color: var(--kf-color-surface-light-alt);
  font-style: italic;
}

.site-footer__cta-text {
  color: rgba(34, 43, 43, 0.76);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  margin: var(--kf-space-s) 0 0;
  max-width: 36rem;
  text-wrap: balance;
}

.site-footer__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--kf-space-l);
  padding: 10px 20px;
  background: var(--kf-color-dark);
  border: 1px solid var(--kf-color-dark);
  border-radius: 4px;
  color: var(--kf-color-surface-light-alt);
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
}

.site-footer__cta-link:hover,
.site-footer__cta-link:focus-visible {
  background: var(--kf-color-surface-dark);
  border-color: var(--kf-color-surface-dark);
  color: var(--kf-color-surface-light-alt);
  text-decoration: none;
}

/* WPForms Basis: eigenes Theme-Styling, auch wenn WPForms-Styles deaktiviert sind. */
.wpforms-container {
  margin: 0;
}

.wpforms-container .wpforms-form {
  display: grid;
  gap: var(--kf-space-s);
  margin: 0;
}

.wpforms-container .wpforms-field-container {
  display: grid;
  gap: var(--kf-space-s);
}

.wpforms-container .wpforms-field {
  margin: 0;
  padding: 0;
  position: relative;
}

.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label {
  color: currentColor;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--kf-space-2xs);
}

.wpforms-container .wpforms-label-hide {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="url"],
.wpforms-container input[type="number"],
.wpforms-container input[type="search"],
.wpforms-container textarea,
.wpforms-container select {
  appearance: none;
  background: var(--kf-color-surface-light-alt);
  border: 0;
  border-radius: 4px;
  color: currentColor;
  font: inherit;
  line-height: 1.35;
  min-height: 3rem;
  padding: 0.8125rem 0.875rem;
  width: 100%;
}

.wpforms-container textarea {
  min-height: 6.75rem;
  resize: vertical;
}

.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: var(--kf-blog-color-muted);
  opacity: 0.82;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error,
.wpforms-container select.wpforms-error,
.wpforms-container input[aria-invalid="true"],
.wpforms-container textarea[aria-invalid="true"],
.wpforms-container select[aria-invalid="true"] {
  box-shadow: inset 0 0 0 2px var(--kf-color-accent-secondary);
}

.wpforms-container fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.wpforms-container ul {
  display: grid;
  gap: var(--kf-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpforms-container li {
  align-items: flex-start;
  display: flex;
  gap: var(--kf-space-2xs);
  margin: 0;
}

.wpforms-container input[type="checkbox"],
.wpforms-container input[type="radio"] {
  accent-color: var(--kf-color-brand);
  flex: 0 0 auto;
  height: 1rem;
  margin: 0.2em 0 0;
  width: 1rem;
}

.wpforms-container .wpforms-field-label-inline,
.wpforms-container .wpforms-field-sublabel {
  color: currentColor;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-wrap: balance;
}

.wpforms-container .wpforms-required-label,
.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-error-noscript,
.wpforms-container .wpforms-field-description {
  color: currentColor;
}

.wpforms-container label.wpforms-error,
.wpforms-container em.wpforms-error,
.wpforms-container .wpforms-error-noscript {
  display: block;
  font-size: 0.8125rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
  margin-top: var(--kf-space-2xs);
}

.wpforms-container .wpforms-submit-container {
  align-items: center;
  display: flex;
  gap: var(--kf-space-xs);
  margin: 0;
  padding: 0;
}

.wpforms-container .wpforms-submit {
  appearance: none;
  align-items: center;
  background: var(--kf-color-dark);
  border: 1px solid var(--kf-color-dark);
  border-radius: 4px;
  color: var(--kf-color-surface-light-alt);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 300;
  justify-content: center;
  line-height: 1;
  padding: 10px 20px;
  text-decoration: none;
}

.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus-visible {
  background: var(--kf-color-surface-dark);
  border-color: var(--kf-color-surface-dark);
  color: var(--kf-color-surface-light-alt);
}

.wpforms-container .wpforms-submit-spinner {
  height: 1.625rem;
  width: 1.625rem;
}

.wpforms-container .wpforms-field__visual-placeholder {
  color: var(--kf-blog-color-muted);
  font: inherit;
  left: 0.875rem;
  line-height: 1.35;
  opacity: 0.82;
  pointer-events: none;
  position: absolute;
  right: 0.875rem;
  top: 0.8125rem;
}

.wpforms-container .wpforms-field__visual-placeholder-star {
  color: var(--kf-color-brand);
  font-weight: 700;
}

.wpforms-container .wpforms-field--visual-placeholder.is-placeholder-hidden .wpforms-field__visual-placeholder {
  display: none;
}

.wpforms-confirmation-container-full,
.wpforms-confirmation-container {
  border: 1px solid currentColor;
  border-radius: 4px;
  color: currentColor;
  font-size: 0.9375rem;
  line-height: 1.45;
  padding: var(--kf-space-s);
}

.wpforms-confirmation-container-full p,
.wpforms-confirmation-container p {
  margin: 0;
}

.site-footer__cta .wpforms-container {
  color: var(--kf-color-dark);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
}

.site-footer__cta .wpforms-container input[type="text"],
.site-footer__cta .wpforms-container input[type="email"],
.site-footer__cta .wpforms-container input[type="tel"],
.site-footer__cta .wpforms-container input[type="url"],
.site-footer__cta .wpforms-container input[type="number"],
.site-footer__cta .wpforms-container input[type="search"],
.site-footer__cta .wpforms-container textarea,
.site-footer__cta .wpforms-container select {
  background: var(--kf-color-surface-light-alt);
}

.site-footer__cta .wpforms-container .wpforms-submit {
  width: 100%;
}

@media (min-width: 768px) {
  .site-footer__cta .wpforms-form {
    column-gap: var(--kf-space-s);
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.4fr);
  }

  .site-footer__cta .wpforms-field-container {
    display: contents;
  }

  .site-footer__cta .wpforms-field {
    grid-column: 1 / -1;
  }

  .site-footer__cta .wpforms-field-checkbox {
    align-self: center;
    grid-column: 1;
  }

  .site-footer__cta .wpforms-submit-container {
    align-self: center;
    grid-column: 2;
  }
}

.site-footer__cta-contact {
  color: rgba(34, 43, 43, 0.76);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
}

.site-footer__cta-photo-placeholder {
  width: 7rem;
  aspect-ratio: 1;
  margin-bottom: var(--kf-space-s);
  background: rgba(247, 248, 245, 0.72);
}

.site-footer__cta-contact p {
  margin: 0;
}

.site-footer__cta-contact-label {
  margin-bottom: var(--kf-space-2xs);
  font-size: 0.8125rem;
}

.site-footer__cta-contact-name {
  color: var(--kf-color-dark);
  font-weight: 700;
}

.site-footer__cta-contact a {
  display: inline-block;
  margin-top: var(--kf-space-xs);
  color: inherit;
  text-decoration: none;
}

.site-footer__cta-contact a:hover,
.site-footer__cta-contact a:focus-visible {
  color: var(--kf-color-dark);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.site-footer__navigation {
  background: var(--kf-color-dark);
}

.site-footer__headline {
  margin: 0 0 var(--kf-space-s);
  color: var(--kf-color-surface-light-alt);
  font-family: var(--kf-font-base);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.site-footer__menu {
  display: grid;
  gap: var(--kf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu a {
  color: rgba(247, 248, 245, 0.72);
  font-weight: 400;
  text-decoration: none;
}

.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
  color: var(--kf-color-brand);
  text-decoration: none;
}

.site-footer__contact {
  display: grid;
  gap: var(--kf-space-2xs);
  margin: 0;
  color: rgba(247, 248, 245, 0.72);
  font-style: normal;
  font-weight: 400;
  line-height: 1.45;
}

.site-footer__contact strong {
  color: var(--kf-color-surface-light-alt);
  font-weight: 700;
}

.site-footer__contact a {
  color: inherit;
  text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--kf-color-brand);
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .site-footer__navigation .row {
    row-gap: var(--kf-space-l);
  }
}

@media (max-width: 575.98px) {
  .site-footer__navigation .col-12 {
    text-align: center;
  }

  .site-footer__navigation .main-logo {
    display: block;
    margin-inline: auto;
  }

  .site-footer__menu,
  .site-footer__contact {
    justify-items: center;
  }
}

@media (min-width: 768px) {
  .site-footer__contact-column {
    margin-left: auto;
  }
}

.site-footer--bottom {
  font-size: 0.75rem;
  line-height: 1.3;
  padding: var(--kf-space-m) 0;
}

.site-footer--bottom.text-white {
  color: rgba(255, 255, 255, 0.72) !important;
}

.site-footer__bottom-row {
  border-top: 1px solid rgba(247, 248, 245, 0.24);
  padding-top: var(--kf-space-s);
}

.site-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal-menu a {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.site-footer__legal-menu a:hover,
.site-footer__legal-menu a:focus-visible {
  color: var(--kf-color-brand);
  text-decoration: none;
}

/* Gemeinsame Inhaltstabellen: Gutenberg im Blog und auf normalen Seiten. */
.wp-block-table {
  --kuf-table-surface: var(--kf-color-surface-light-alt);
  --kuf-table-stripe: var(--kf-color-surface-light);
  --kuf-table-text: var(--kf-color-dark);
  --kuf-table-border: var(--kf-blog-color-border);
  margin: var(--kf-space-l) 0;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 4px;
  scrollbar-color: var(--kf-blog-color-muted) var(--kuf-table-stripe);
}

.wp-block-table table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--kuf-table-surface);
  color: var(--kuf-table-text);
  font-family: var(--kf-font-base);
  font-size: 0.9375em;
  line-height: 1.6;
}

.wp-block-table table :is(th, td) {
  padding: var(--kf-space-s) var(--kf-space-m);
  border: 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.wp-block-table table thead {
  border: 0;
}

.wp-block-table table thead th {
  background: var(--kf-color-dark);
  color: var(--kf-color-light-text);
  border-bottom: 2px solid var(--kf-color-brand);
  font-size: 0.8125em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.wp-block-table table tbody th {
  font-weight: 600;
}

.wp-block-table table tbody tr:nth-child(even) > :is(th, td) {
  background: var(--kuf-table-stripe);
}

.wp-block-table table tbody tr + tr > :is(th, td) {
  border-top: 1px solid var(--kuf-table-border);
}

.wp-block-table table tfoot :is(th, td) {
  background: var(--kuf-table-stripe);
  border-top: 2px solid var(--kuf-table-border);
  font-weight: 600;
}

.wp-block-table.is-style-stripes {
  border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--kuf-table-surface);
}

.kuf-service-section--dark .wp-block-table {
  --kuf-table-surface: var(--kf-color-surface-dark);
  --kuf-table-stripe: var(--kf-color-surface-dark-alt);
  --kuf-table-text: var(--kf-color-light-text);
  --kuf-table-border: var(--kf-color-border-dark);
}

@media (max-width: 767px) {
  .wp-block-table table.has-fixed-layout {
    table-layout: auto;
  }

  .wp-block-table table :is(th, td) {
    min-width: 10rem;
    padding: var(--kf-space-xs) var(--kf-space-s);
  }
}

/* ---------------------------------------------------
   Single-Typografie: nur für Blogartikel.
   Der globale Look bleibt unberührt; hier entsteht ein lesbarer Artikelmodus.
--------------------------------------------------- */
.single-content {
  background: var(--kf-color-surface-light-alt);
  container-type: inline-size;
  color: var(--kf-blog-color-text);
  font-family: var(--kf-font-base);
  font-size: var(--kf-blog-step-0);
  font-weight: 400;
  line-height: var(--kf-blog-lh-body);
  padding: 0 0 var(--kf-space-xl);
}

.single-content:has(.related-posts) {
  padding-bottom: 0;
}

.single-content a {
  color: var(--kf-blog-color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.single-content a:hover {
  text-decoration-thickness: 2px;
}

.single-breadcrumb,
.content-hero__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-2xs);
  margin-bottom: var(--kf-space-m);
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-snug);
}

.content-hero,
.single-content .entry-header {
  background: var(--kf-color-dark);
  color: var(--kf-color-surface-light-alt);
  overflow: hidden;
  padding: clamp(8rem, 16vw, 13rem) 0 clamp(5rem, 10vw, 8rem);
  position: relative;
}

.single-content .entry-header {
  margin-bottom: var(--kf-space-l);
}

.content-hero {
  background:
    radial-gradient(
      ellipse at top left in oklch,
      rgba(0, 255, 167, 0.86) 0%,
      rgba(0, 255, 167, 0.64) 10%,
      rgba(0, 255, 167, 0.36) 20%,
      rgba(0, 255, 167, 0.14) 34%,
      rgba(0, 255, 167, 0) 50%
    ),
    radial-gradient(
      ellipse at bottom right in oklch,
      rgba(0, 255, 167, 0.62) 0%,
      rgba(0, 255, 167, 0.42) 12%,
      rgba(0, 255, 167, 0.18) 28%,
      rgba(0, 255, 167, 0) 52%
    ),
    var(--kf-color-dark);
}

.content-hero.content-hero--has-image-visual {
  background: var(--kf-color-dark);
  padding-bottom: 0;
  padding-top: 0;
}

.content-hero.content-hero--has-image-visual::before {
  background:
    radial-gradient(
      ellipse at top left in oklch,
      rgba(0, 255, 167, 0.86) 0%,
      rgba(0, 255, 167, 0.64) 10%,
      rgba(0, 255, 167, 0.36) 20%,
      rgba(0, 255, 167, 0.14) 34%,
      rgba(0, 255, 167, 0) 50%
    ),
    radial-gradient(
      ellipse at bottom right in oklch,
      rgba(0, 255, 167, 0.62) 0%,
      rgba(0, 255, 167, 0.42) 12%,
      rgba(0, 255, 167, 0.18) 28%,
      rgba(0, 255, 167, 0) 52%
    );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.content-hero > .container {
  position: relative;
  z-index: 1;
}

.content-hero.content-hero--has-image-visual > .container {
  z-index: auto;
}

.content-hero .col-10 {
  flex: 0 0 auto;
  width: 100%;
}

.content-hero__row {
  gap: var(--kf-space-l) 0;
}

.content-hero--has-image-visual .content-hero__copy {
  align-self: center;
  padding-bottom: clamp(5rem, 10vw, 8rem);
  padding-top: clamp(8rem, 16vw, 13rem);
  position: relative;
  z-index: 3;
}

.content-hero__breadcrumb {
  color: rgba(247, 248, 245, 0.62);
  margin-bottom: var(--kf-space-l);
}

.content-hero__breadcrumb a {
  color: var(--kf-color-brand);
  opacity: 0.75;
  text-decoration: none;
}

.content-hero__breadcrumb a:hover,
.content-hero__breadcrumb a:focus-visible {
  opacity: 1;
}

.content-hero__title {
  color: inherit;
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-4);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--kf-blog-lh-tight);
  margin: 0;
  max-width: var(--kf-blog-measure);
  text-wrap: balance;
}

.content-hero__description {
  color: rgba(247, 248, 245, 0.72);
  font-size: var(--kf-blog-step-0);
  font-weight: 400;
  line-height: var(--kf-blog-lh-body);
  margin-top: var(--kf-space-s);
  max-width: var(--kf-blog-measure);
}

.content-hero__description p {
  margin: 0;
}

.content-hero__visual {
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.content-hero__image-visual {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
  position: relative;
  width: 100%;
  z-index: 1;
}

.content-hero--has-image-visual .content-hero__image-visual {
  aspect-ratio: auto;
  height: 100%;
  min-height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
  mask-image: linear-gradient(to right, transparent, #000 45%);
}

.content-hero__image-source,
.content-hero__video {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.content-hero__image-visual--video {
  filter: brightness(0.65);
}

.kuf-js:not(.kuf-reveal-fallback) .content-hero__image-visual[data-kuf-image-shader]:not(.is-image-complete) :is(.content-hero__image-source, .content-hero__video),
.content-hero__image-visual.is-image-preparing :is(.content-hero__image-source, .content-hero__video),
.content-hero__image-visual.is-image-shader :is(.content-hero__image-source, .content-hero__video) {
  opacity: 0;
}

.content-hero__image-visual.is-unavailable :is(.content-hero__image-source, .content-hero__video) {
  opacity: 1;
}

.content-hero__image-visual.is-image-complete :is(.content-hero__image-source, .content-hero__video) {
  opacity: 1;
}

.content-hero__image-visual.is-image-complete .content-hero__image-canvas {
  opacity: 0;
}

.content-hero__visual-column {
  align-items: center;
  display: flex;
  position: relative;
  z-index: 1;
}

.content-hero--has-image-visual .content-hero__visual-column {
  bottom: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}

.content-hero__visual-canvas {
  display: block;
  height: 100%;
  image-rendering: pixelated;
  inset: 0;
  position: absolute;
  width: 100%;
}

.content-hero__image-canvas {
  display: block;
  height: 100%;
  image-rendering: auto;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.content-hero__image-visual.is-image-shader .content-hero__image-canvas {
  opacity: 1;
}

.content-hero__visual.is-unavailable {
  display: none;
}

@media (max-width: 991.98px) {
  .content-hero--has-image-visual .content-hero__visual-column {
    opacity: 0.55;
  }
}

.single-content .entry-header::before,
.single-content .entry-header::after {
  content: "";
  inset: 0;
  opacity: 0.42;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.single-content .entry-header::before {
  background: radial-gradient(
    ellipse at top left in oklch,
    rgba(0, 255, 167, 0.86) 0%,
    rgba(0, 255, 167, 0.64) 10%,
    rgba(0, 255, 167, 0.36) 20%,
    rgba(0, 255, 167, 0.14) 34%,
    rgba(0, 255, 167, 0) 50%
  );
}

.single-content .entry-header::after {
  background: radial-gradient(
    ellipse at bottom right in oklch,
    rgba(0, 255, 167, 0.62) 0%,
    rgba(0, 255, 167, 0.42) 12%,
    rgba(0, 255, 167, 0.18) 28%,
    rgba(0, 255, 167, 0) 52%
  );
}

:is(.single-project, .single-post) .entry-header.content-hero--has-image-visual::before,
:is(.single-project, .single-post) .entry-header.content-hero--has-image-visual::after { z-index: 2; }
:is(.single-project, .single-post) .entry-header.content-hero--has-image-visual .content-hero__visual-column { opacity: 0.6; }
:is(.single-project, .single-post) .entry-header.content-hero--has-image-visual .container { z-index: 3; }

.single-content .entry-header .container {
  position: relative;
  z-index: 1;
}

.single-content .entry-header .col-10 {
  flex: 0 0 auto;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: none;
  width: 83.33333333%;
}

/* Nur die Artikel-H1 nutzt Roca; alle weiteren Überschriften bleiben Inter. */
.single-content h1,
.single-content .entry-title {
  color: inherit;
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-4);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--kf-blog-lh-tight);
  margin: 0;
  text-wrap: balance;
}

.single-content h2,
.single-content h3,
.single-content h4,
.single-content h5,
.single-content h6 {
  color: var(--kf-blog-color-heading);
  font-family: var(--kf-font-base);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

.single-content h2 {
  font-size: var(--kf-blog-step-3);
  line-height: var(--kf-blog-lh-tight);
  margin: var(--kf-space-xl) auto var(--kf-space-s);
}

.single-content h3 {
  font-size: var(--kf-blog-step-2);
  line-height: var(--kf-blog-lh-snug);
  margin: var(--kf-space-l) auto var(--kf-space-xs);
}

.single-content h4 {
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-snug);
  margin: var(--kf-space-m) auto var(--kf-space-2xs);
}

.single-content h1 + h2,
.single-content h1 + h3 {
  margin-top: var(--kf-space-m);
}

/* Meta-Informationen bleiben kleiner, damit sie Orientierung geben ohne den Titel zu konkurrieren. */
.single-content .entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-xs) var(--kf-space-xs);
  margin-top: var(--kf-space-s);
  color: rgba(247, 248, 245, 0.72);
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-snug);
}

.single-content .entry-header a {
  color: var(--kf-color-brand);
  opacity: 0.75;
  text-decoration: none;
}

.single-content .entry-header a:hover,
.single-content .entry-header a:focus-visible {
  opacity: 1;
}

.single-content .entry-header .single-breadcrumb {
  color: rgba(247, 248, 245, 0.62);
}

.single-content .entry-header .single-breadcrumb a,
.single-content .entry-header .entry-meta a {
  color: var(--kf-color-brand);
  opacity: 0.75;
  text-decoration: none;
}

.single-content .entry-header .single-breadcrumb a:hover,
.single-content .entry-header .single-breadcrumb a:focus-visible,
.single-content .entry-header .entry-meta a:hover,
.single-content .entry-header .entry-meta a:focus-visible {
  opacity: 1;
}

.page-content,
.post-index {
  background: var(--kf-color-surface-light-alt);
  color: var(--kf-blog-color-text);
  padding: var(--kf-space-xl) 0;
}

.page-content {
  font-size: var(--kf-blog-step-0);
  font-weight: 400;
  line-height: var(--kf-blog-lh-body);
}

.blog .post-index { padding-block: var(--kf-space-2xl) calc(2 * var(--kf-space-2xl)); }
.blog .site-footer__cta { padding-top: calc(2 * var(--kf-space-2xl)); }
.post-index__intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kf-space-m); margin-bottom: var(--kf-space-2xl); }
.post-index__intro .kuf-content-title { max-width: 22ch; margin: 0; font-size: var(--kf-blog-step-3); }
.post-index__description { max-width: 60ch; font-size: var(--kf-blog-step-0); line-height: var(--kf-blog-lh-relaxed); }
.post-index__description p { margin: 0 0 var(--kf-space-m); }
.post-index__description p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .post-index__intro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kf-space-2xl); align-items: end; }
}
@media (max-width: 767.98px) {
  .blog .post-index { padding-block: var(--kf-space-xl) calc(2 * var(--kf-space-xl)); }
  .post-index__intro { margin-bottom: var(--kf-space-xl); }
  .blog .site-footer__cta { padding-top: calc(2 * var(--kf-space-xl)); }
}

.page-content__body {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--kf-blog-measure);
}

.page-template-page-projekte .page-content__body { max-width: none; }
.page-template-page-projekte .post-index { padding-top: var(--kf-space-2xl); }
.page-template-page-projekte .post-index .page-content { padding-top: 0; }
.page-template-page-projekte .post-index > .container > .kuf-content-title {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--kf-space-m);
  text-align: center;
}
.page-template-page-projekte .page-content__body > p:has(~ .kuf-home-projects) {
  max-width: 60ch;
  text-align: center;
}
.page-template-page-projekte .page-content__body > :not(.kuf-home-projects) {
  max-width: var(--kf-blog-measure);
  margin-inline: auto;
}
.page-template-page-projekte .page-content__body > .kuf-home-projects {
  margin-block: calc(2 * var(--kf-space-2xl));
  margin-top: var(--kf-space-2xl);
}
.page-template-page-projekte .page-content__body > .kuf-home-projects ~ h2 {
  max-width: 24ch;
  margin-top: 0;
  margin-bottom: var(--kf-space-m);
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-3);
  line-height: var(--kf-blog-lh-tight);
  text-align: center;
}
.page-template-page-projekte .page-content__body > .kuf-home-projects ~ p {
  max-width: 60ch;
  margin-bottom: var(--kf-space-m);
  text-align: center;
}
.page-template-page-projekte .page-content__body > .kuf-home-projects ~ p:last-child { margin-bottom: 0; }
.page-template-page-projekte .page-content__body > .kuf-home-projects ~ p a {
  color: var(--kf-blog-color-link);
  text-underline-offset: 0.15em;
}
.page-template-page-projekte .post-index .page-content { padding-bottom: 0; }
.page-template-page-projekte .post-index { padding-bottom: calc(2 * var(--kf-space-2xl)); }
.page-template-page-projekte .site-footer__cta { padding-top: calc(2 * var(--kf-space-2xl)); }
@media (max-width: 767.98px) {
  .page-template-page-projekte .post-index { padding-block: var(--kf-space-xl) calc(2 * var(--kf-space-xl)); }
  .page-template-page-projekte .page-content__body > .kuf-home-projects { margin-block: var(--kf-space-xl) calc(2 * var(--kf-space-xl)); }
  .page-template-page-projekte .site-footer__cta { padding-top: calc(2 * var(--kf-space-xl)); }
}

/* Rechtstexte erhalten dieselben vertikalen Abstände wie der Seiten-Hero. */
.page-content.single-content {
  padding-block: clamp(8rem, 16vw, 13rem) clamp(5rem, 10vw, 8rem);
}

/* AGB-Ausnahme: kompakter Fließtext mit breiterer Lesespalte. */
.page-content--agb {
  --kf-blog-measure: 100ch;
  font-size: 1rem;
}

.page-content--agb .entry-content h2 {
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-snug);
  margin-top: var(--kf-space-l);
}

.page-content.single-content .kuf-content-title {
  margin-bottom: var(--kf-space-l);
}

.page-content.single-content .entry-content > :first-child {
  margin-top: 0;
}

.page-content__body > :first-child {
  margin-top: 0;
}

.page-content__body > :last-child {
  margin-bottom: 0;
}

.post-index__grid {
  display: grid;
  gap: var(--kf-space-2xl) var(--kf-space-l);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.post-card {
  min-width: 0;
}

.post-card__link {
  color: var(--kf-blog-color-text);
  display: grid;
  gap: var(--kf-space-m);
  height: 100%;
  text-decoration: none;
}

.single-content .post-card__link {
  color: var(--kf-blog-color-text);
  text-decoration: none;
}

.post-card__link:hover,
.post-card__link:focus-visible,
.single-content .post-card__link:hover,
.single-content .post-card__link:focus-visible {
  text-decoration: none;
}

.post-card__image {
  aspect-ratio: 16 / 10;
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  display: block;
  overflow: hidden;
}

.post-card__image img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.post-card__image-placeholder {
  display: block;
  height: 100%;
}

.post-card__content {
  display: grid;
  gap: var(--kf-space-xs);
  grid-template-rows: auto auto 1fr;
  height: 100%;
}

.post-card__meta {
  color: var(--kf-blog-color-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-2xs);
  font-size: var(--kf-blog-step--1);
  font-weight: 400;
  line-height: var(--kf-blog-lh-snug);
  margin-top: calc(var(--kf-space-m) - var(--kf-space-xs));
  opacity: 0.5;
}

.post-card__author {
  color: inherit;
  font-weight: inherit;
}

.post-card__separator {
  color: var(--kf-color-brand);
  opacity: 1;
}

.post-card__title {
  color: var(--kf-blog-color-heading);
  font-size: var(--kf-blog-step-1);
  font-weight: 700;
  line-height: var(--kf-blog-lh-snug);
  margin: 0;
  text-wrap: balance;
}

.single-content .post-card__title {
  color: var(--kf-blog-color-heading);
  font-family: var(--kf-font-base);
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-snug);
  margin: 0;
}

.post-card__title-text,
.post-card__title-line,
.main-menu-panel__links a {
  background-image: linear-gradient(
    90deg,
    var(--kf-color-brand),
    var(--kf-color-brand)
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size var(--kuf-title-sweep-duration, 0.62s) cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .main-menu-panel__links a { transition: none; }
}

.post-card__title-text {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  padding: 0 0.06em;
}

.post-card__title-text.is-split {
  background-image: none;
  padding: 0;
  transition: none;
}

.post-card__title-line {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
  padding: 0 0.06em;
  transition-delay: 0ms;
}

.post-card__link:hover .post-card__title-text:not(.is-split),
.post-card__link:focus-visible .post-card__title-text:not(.is-split),
.post-card__title-line.is-active,
.main-menu-panel__links a:is(:hover, :focus-visible) {
  background-size: 100% 100%;
}

.post-card__excerpt {
  color: var(--kf-blog-color-muted);
  font-size: var(--kf-blog-step--1);
  font-weight: 400;
  line-height: var(--kf-blog-lh-body);
}

.post-index .navigation.pagination {
  margin: var(--kf-space-xl) auto 0;
}

.post-index .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-xs);
}

.post-index .page-numbers {
  color: var(--kf-blog-color-link);
  font-weight: 700;
  text-decoration: none;
}

.post-index .page-numbers.current {
  color: var(--kf-blog-color-heading);
}

.post-index__empty {
  margin: 0 auto;
  max-width: var(--kf-blog-measure);
}

.single-content .entry-thumbnail {
  margin: 0 0 var(--kf-space-xl);
  width: 100%;
}

.single-content .entry-thumbnail img {
  background: var(--kf-blog-color-quote-bg);
  border-radius: 4px;
  display: block;
  height: auto;
  min-height: 220px;
  object-fit: cover;
  width: 100%;
}

/* Die Textspalte ist in ch begrenzt, unabhängig von der Bootstrap-Spaltenbreite. */
.single-content .entry-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--kf-blog-measure)) minmax(0, 1fr);
  max-width: none;
}

.single-content .entry-content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, hr, .rank-math-block),
.single-content .entry-content > .wp-block-group > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6),
.single-content .entry-content :where(.wp-block-heading) {
  grid-column: 2;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--kf-blog-measure);
  width: 100%;
}

.single-content .entry-content :is(h2, h3, h4, h5, h6).wp-block-heading {
  grid-column: 2;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--kf-blog-measure);
  width: 100%;
}

.single-content .entry-content h2,
.single-content .entry-content h3,
.single-content .entry-content h4,
.single-content .entry-content h5,
.single-content .entry-content h6 {
  display: block;
  grid-column: 2;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--kf-blog-measure);
  width: 100%;
}

.single-content .entry-content p {
  margin: 0 auto var(--kf-space-m);
}

.single-content .entry-content :is(h2, h3, h4, h5, h6) + :is(p, ul, ol) {
  margin-top: var(--kf-space-xs);
}

.single-content .entry-content p:last-child {
  margin-bottom: 0;
}

.single-content .entry-content strong {
  color: var(--kf-blog-color-heading);
  font-weight: 700;
}

.single-content .entry-content ul,
.single-content .entry-content ol {
  margin: 0 auto var(--kf-space-m);
  padding-left: 1.35em;
}

.single-content .entry-content li {
  margin-bottom: var(--kf-space-2xs);
}

.single-content .entry-content li:last-child {
  margin-bottom: 0;
}

.single-content .entry-content li > ul,
.single-content .entry-content li > ol {
  margin-top: var(--kf-space-2xs);
  margin-bottom: var(--kf-space-2xs);
}

.single-content .entry-content ul {
  list-style-type: disc;
}

.single-content .entry-content ul ul {
  list-style-type: circle;
}

/* Zitate sind schmaler als Fließtext, damit sie als fokussierte Einschübe wirken. */
.single-content .entry-content blockquote {
  background: var(--kf-blog-color-quote-bg);
  border-left: 3px solid var(--kf-blog-color-link);
  color: var(--kf-blog-color-heading);
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-relaxed);
  margin: var(--kf-space-l) auto;
  max-width: var(--kf-blog-measure-narrow);
  padding: var(--kf-space-m);
}

.single-content .entry-content blockquote p {
  margin-bottom: var(--kf-space-2xs);
}

.single-content .entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.single-content .entry-content blockquote cite {
  color: var(--kf-blog-color-muted);
  display: block;
  font-size: var(--kf-blog-step--1);
  font-style: normal;
  line-height: var(--kf-blog-lh-snug);
  margin-top: var(--kf-space-xs);
}

.single-content .entry-content code {
  background: var(--kf-blog-color-quote-bg);
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
}

.single-content .entry-content figure,
.single-content .entry-content .wp-block-image,
.single-content .entry-content .kuf-media-block,
.single-content .entry-content p:has(> img:only-child) {
  grid-column: 1 / -1;
  margin: var(--kf-space-xl) 0;
  max-width: none;
  width: 100%;
}

.single-content .entry-content figure img,
.single-content .entry-content .wp-block-image img,
.single-content .entry-content p:has(> img:only-child) img {
  background: var(--kf-blog-color-quote-bg);
  border-radius: 4px;
  display: block;
  height: auto;
  min-height: 220px;
  object-fit: cover;
  width: 100%;
}

.single-content .entry-content .kuf-editor-screenshot img {
  min-height: 0;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  color: var(--kf-blog-color-muted);
  margin-top: var(--kf-space-2xs);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin-inline: auto;
  max-width: 80ch;
  text-align: center;
  text-wrap: balance;
}

.kuf-logo-comparison {
  container-type: inline-size;
  position: relative;
}

.kuf-logo-comparison::before,
.kuf-logo-comparison::after {
  color: var(--kf-blog-color-muted);
  font-size: clamp(0.625rem, 1.2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  left: 0;
  line-height: 1;
  position: absolute;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.kuf-logo-comparison::before {
  content: "ALT";
  top: 4.5cqw;
}

.kuf-logo-comparison::after {
  content: "NEU";
  top: 27cqw;
}

.single-content .entry-content .kuf-logo-comparison img {
  min-height: 0;
}

.single-content .entry-content .wp-block-video video {
  border-radius: 4px;
  display: block;
  height: auto;
  width: 100%;
}

.single-content .entry-content .kuf-missing-image {
  align-items: center;
  aspect-ratio: 16 / 7;
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  color: var(--kf-blog-color-heading);
  display: flex;
  justify-content: center;
  min-height: 220px;
  padding: var(--kf-space-l);
  text-align: center;
  width: 100%;
}

.single-content .entry-content .kuf-missing-image__text {
  max-width: var(--kf-blog-measure-narrow);
}

.single-content .entry-content .kuf-missing-image__label {
  color: var(--kf-blog-color-muted);
  display: block;
  font-size: var(--kf-blog-step--1);
  font-weight: 700;
  line-height: var(--kf-blog-lh-snug);
  margin-bottom: var(--kf-space-s);
  text-transform: uppercase;
}

.single-content .entry-content .kuf-missing-image__title {
  display: block;
  margin-bottom: var(--kf-space-xs);
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-snug);
}

.single-content .entry-content .kuf-missing-image__hint {
  display: block;
  color: var(--kf-blog-color-muted);
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-relaxed);
}

@media (max-width: 767px) {
  .single-content .entry-content [data-kuf-local-image-slot] .kuf-missing-image {
    aspect-ratio: auto;
    padding: var(--kf-space-m);
  }
}

.single-content .entry-content .kuf-missing-image__alt {
  color: var(--kf-blog-color-link);
}

.single-content .entry-content hr {
  border: 0;
  border-top: 1px solid var(--kf-blog-color-border);
  margin: var(--kf-space-xl) auto;
}

.single-content .rank-math-block {
  border-top: 1px solid var(--kf-blog-color-border);
  margin: var(--kf-space-xl) auto;
}

.single-content .rank-math-list-item {
  border-bottom: 1px solid var(--kf-blog-color-border);
}

.single-content .rank-math-question {
  font-size: var(--kf-blog-step-1);
  line-height: var(--kf-blog-lh-snug);
  margin: 0;
}

.single-content .rank-math-question-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--kf-blog-color-heading);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-weight: 700;
  justify-content: space-between;
  gap: var(--kf-space-m);
  padding: var(--kf-space-m) 0;
  text-align: left;
  text-wrap: balance;
  width: 100%;
}

.single-content .rank-math-question-button::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--kf-font-base);
  font-size: var(--kf-blog-step-1);
  line-height: 1;
}

.single-content .rank-math-question-button[aria-expanded="true"]::after {
  content: "-";
}

.single-content .rank-math-answer {
  color: var(--kf-blog-color-text);
  padding: 0 0 var(--kf-space-m);
}

.single-content .rank-math-answer p:last-child {
  margin-bottom: 0;
}

/* Trust- und Autorenbereiche nutzen dieselbe Skala, bleiben aber bewusst undekoriert. */
.related-posts {
  border-top: 1px solid var(--kf-blog-color-border);
  margin-top: var(--kf-space-xl);
  padding-top: var(--kf-space-l);
}

.author-box {
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  display: grid;
  gap: var(--kf-space-s);
  grid-template-columns: minmax(7rem, 8.5rem) minmax(0, 1fr);
  margin: var(--kf-space-l) auto 0;
  max-width: var(--kf-blog-measure);
  padding: var(--kf-space-s);
}

.author-box__profile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.author-box__content {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.author-box__image img {
  aspect-ratio: 1;
  border-radius: 4px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.author-box__header {
  margin: 0;
}

.author-box__byline {
  color: var(--kf-blog-color-heading);
  font-size: var(--kf-blog-step-0);
  font-weight: 400;
  line-height: var(--kf-blog-lh-snug);
  margin: 0;
}

.author-box__byline span {
  font-weight: 700;
}

.author-box__content p {
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-body);
  margin: 0;
  max-width: var(--kf-blog-measure-narrow);
}

.author-box__content a {
  color: var(--kf-blog-color-link);
  font-size: var(--kf-blog-step--1);
  font-weight: 700;
  text-decoration: none;
}

.author-box__content a:hover,
.author-box__content a:focus-visible {
  color: var(--kf-color-dark);
  text-decoration: none;
}

.blog-cta {
  background:
    radial-gradient(
      ellipse at top left in oklch,
      rgba(34, 43, 43, 0.64) 0%,
      rgba(34, 43, 43, 0.48) 10%,
      rgba(34, 43, 43, 0.28) 24%,
      rgba(34, 43, 43, 0.12) 42%,
      rgba(34, 43, 43, 0) 68%
    ),
    radial-gradient(
      ellipse at bottom right in oklch,
      rgba(34, 43, 43, 0.46) 0%,
      rgba(34, 43, 43, 0.3) 12%,
      rgba(34, 43, 43, 0.14) 34%,
      rgba(34, 43, 43, 0) 70%
    ),
    var(--kf-color-brand);
  border-radius: 4px;
  color: var(--kf-color-dark);
  margin: var(--kf-space-l) auto 0;
  max-width: var(--kf-blog-measure);
  overflow: hidden;
  padding: var(--kf-space-xl) var(--kf-space-l);
  position: relative;
  text-align: center;
}

.blog-cta__headline {
  color: inherit;
  font-family: var(--kf-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}

.single-content .blog-cta__headline {
  color: inherit;
  font-family: var(--kf-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.02;
  margin: 0;
}

.blog-cta__headline-highlight {
  color: var(--kf-color-surface-light-alt);
  font-style: italic;
}

.blog-cta__text {
  margin: var(--kf-space-xs) auto 0;
  max-width: var(--kf-blog-measure-narrow);
  text-wrap: balance;
}

.blog-cta__text p {
  margin: 0;
}

.blog-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-s);
  justify-content: center;
  margin-top: var(--kf-space-m);
}

.kuf-button,
.blog-cta__button,
.login .button-primary {
  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-weight: 300;
  line-height: 1;
  padding: 10px 20px;
  text-decoration: none;
}

.single-content .blog-cta__button,
.single-content .blog-cta__button:hover,
.single-content .blog-cta__button:focus-visible {
  text-decoration: none;
}

.kuf-button--primary,
.blog-cta__button--primary {
  background: var(--kf-color-dark);
  border: 1px solid var(--kf-color-dark);
  color: var(--kf-color-surface-light-alt);
}

.single-content .blog-cta__button--primary {
  color: var(--kf-color-surface-light-alt);
}

.kuf-button--secondary,
.blog-cta__button--secondary {
  border: 1px solid currentColor;
  color: inherit;
}

.kuf-button:hover,
.kuf-button:focus-visible,
.blog-cta__button:hover,
.blog-cta__button:focus-visible {
  text-decoration: none;
}

.kuf-button--primary:hover,
.kuf-button--primary:focus-visible,
.blog-cta__button--primary:hover,
.blog-cta__button--primary:focus-visible {
  background: var(--kf-color-surface-dark);
  border-color: var(--kf-color-surface-dark);
  color: var(--kf-color-surface-light-alt);
}


/* Gemeinsame CTA-Basis oben; Grün ist eine explizite Farbvariante. */
.kuf-button,
.login .button-primary {
  border: 1px solid transparent;
  font-family: var(--kf-font-base);
  justify-content: center;
  max-width: 100%;
  text-align: center;
}

.kuf-button--primary {
  border-color: var(--kf-color-dark);
}

.kuf-button--secondary {
  background: transparent;
  border-color: currentColor;
}

/* Ghost-Buttons invertieren beim Hover und Tastaturfokus ihre Farben. */
.section--hero-startseite,
.kuf-home-content__section--dark {
  --kuf-ghost-fill: var(--kf-color-surface-light-alt);
  --kuf-ghost-text: var(--kf-color-dark);
}

.kuf-button--secondary:hover,
.kuf-button--secondary:focus-visible,
.blog-cta__button--secondary:hover,
.blog-cta__button--secondary:focus-visible {
  background: var(--kuf-ghost-fill, var(--kf-color-dark));
  border-color: var(--kuf-ghost-fill, var(--kf-color-dark));
  color: var(--kuf-ghost-text, var(--kf-color-surface-light-alt));
}

.kuf-button--brand,
.login .button-primary {
  background: var(--kf-color-brand);
  border-color: var(--kf-color-brand);
  color: var(--kf-color-dark);
}

.kuf-button--brand:hover,
.kuf-button--brand:focus-visible,
.login .button-primary:hover,
.login .button-primary:focus-visible {
  background: var(--kf-color-brand-hover);
  border-color: var(--kf-color-brand-hover);
  color: var(--kf-color-dark);
}

.related-posts {
  background: var(--kf-color-surface-light);
  border-top: 0;
  box-shadow: 0 0 0 100vmax var(--kf-color-surface-light);
  clip-path: inset(0 -100vmax);
  margin-left: 0;
  margin-right: 0;
  padding: calc(var(--kf-space-2xl) + var(--kf-space-l)) 0;
  width: auto;
}

.related-posts__headline,
.related-posts__grid {
  margin-left: auto;
  margin-right: auto;
  max-width: min(90vw, 1480px);
}

.single-content .related-posts__headline {
  color: var(--kf-blog-color-heading);
  font-size: var(--kf-blog-step-2);
  line-height: var(--kf-blog-lh-tight);
  margin: 0 auto var(--kf-space-xl) auto;
}

.related-posts__grid {
  display: grid;
  gap: var(--kf-space-2xl) var(--kf-space-l);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.related-posts .post-card__image {
  background: var(--kf-color-surface-light-alt);
}

.author-profile {
  background: var(--kf-color-surface-light-alt);
  color: var(--kf-color-dark);
  padding: 4rem 0;
}

.author-profile a {
  color: var(--kf-color-dark);
}

.author-profile__header {
  border-bottom: 1px solid rgba(34, 43, 43, 0.2);
  display: flex;
  gap: 1.5rem;
  padding-bottom: 2rem;
}

.author-profile__header h1,
.author-profile__eyebrow {
  margin: 0;
}

.author-profile__header p {
  margin: 0.75rem 0 0;
  max-width: var(--kf-max-width);
}

.author-profile__image img {
  border-radius: 4px;
  display: block;
  height: 128px;
  max-width: none;
  object-fit: cover;
  width: 128px;
}

.author-profile__posts {
  margin-top: 3rem;
}

.author-profile__post {
  border-top: 1px solid rgba(34, 43, 43, 0.2);
  padding: 1.5rem 0;
}

@media (max-width: 991.98px) {
  .post-index__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .page-content.single-content {
    padding-block: 7rem var(--kf-space-xl);
  }

  .content-hero {
    padding: 7rem 0 var(--kf-space-xl);
  }

  .content-hero--has-image-visual .content-hero__copy {
    padding-bottom: var(--kf-space-xl);
    padding-top: 7rem;
  }

  .content-hero .col-10,
  .page-content .col-10,
  .single-content .entry-header .col-10 {
    max-width: 100%;
    width: 100%;
  }

  .page-content,
  .post-index {
    padding: var(--kf-space-l) 0;
  }

  .post-index__grid {
    gap: var(--kf-space-xl);
    grid-template-columns: 1fr;
  }

  .single-content {
    padding: 0 0 var(--kf-space-l);
  }

  .single-content .entry-header {
    padding: 7rem 0 var(--kf-space-xl);
  }

  .author-box {
    grid-template-columns: 1fr;
  }

  .author-box__profile {
    max-width: 9rem;
  }

  .author-box__content {
    align-self: start;
  }

  .related-posts__grid {
    grid-template-columns: 1fr;
  }

  .author-profile {
    padding: 3rem 0;
  }

  .author-profile__header {
    display: block;
  }

  .author-profile__image {
    margin-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-content,
  .single-content * {
    scroll-behavior: auto !important;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--kf-color-dark);
  color: var(--kf-color-light-text);
  padding: 0.5rem 1rem;
  z-index: 100000;
}

.skip-link:focus {
  left: 0;
}

/* Projektabschluss: freie Kundenstimme und Leistungen als CTA-Tags. */
.single-project .entry-content > .wp-block-heading:has(+ .wp-block-quote),
.single-project .entry-content .project-services h2 {
  font-size: var(--kf-blog-step-0);
  line-height: var(--kf-blog-lh-snug);
  margin-bottom: var(--kf-space-m);
}

.single-project .entry-content > .wp-block-quote {
  position: relative;
  isolation: isolate;
  background: none;
  border: 0;
  padding: 0;
  max-width: none;
  margin-top: var(--kf-space-xl);
  margin-bottom: var(--kf-space-xl);
}

.single-project .entry-content .project-quote-mark {
  position: absolute;
  top: -0.1em;
  left: -0.12em;
  z-index: -1;
  color: var(--kf-color-brand);
  font-family: var(--kf-font-display);
  font-size: clamp(10rem, 18vw, 18rem);
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.single-project .entry-content > .wp-block-quote p {
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-2);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kf-blog-color-heading);
}

.single-project .entry-content > .wp-block-quote cite {
  margin-top: var(--kf-space-m);
  color: var(--kf-blog-color-link);
}

.single-project .entry-content .project-services {
  grid-column: 2;
  width: 100%;
  min-width: 0;
  margin-bottom: var(--kf-space-l);
}

.single-project .entry-content .project-services__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-project .entry-content .project-services__tags li { margin: 0; }

.single-project .entry-content .project-services .kuf-button {
  color: var(--kf-color-dark);
  font-size: var(--kf-blog-step--1);
  text-decoration: none;
}

.single-project .entry-content .project-services .kuf-button:hover,
.single-project .entry-content .project-services .kuf-button:focus-visible {
  color: var(--kf-color-surface-light-alt);
  text-decoration: none;
}

/* Projektinfos wie eine offene Spaltenübersicht direkt unter dem Header-Claim. */
.single-project .entry-header .project-facts-overview {
  margin-top: var(--kf-space-xl);
}

.single-project .entry-header .project-facts {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--kf-space-l);
  margin: 0;
  padding: 0;
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-body);
}

.single-project .entry-header .project-facts__item {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 30ch;
}
.single-project .entry-header .project-facts__item:last-child {
  flex-shrink: 0;
  max-width: none;
}

.single-project .entry-header .project-facts dt {
  color: rgba(247, 248, 245, 0.65);
  font-size: var(--kf-blog-step--1);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--kf-space-s);
}

.single-project .entry-header .project-facts dd {
  color: var(--kf-color-light-text);
  margin: 0;
  overflow-wrap: anywhere;
}

.single-project .entry-header .project-facts dd + dt { margin-top: var(--kf-space-m); }
.single-project .entry-header .project-facts__services a {
  color: inherit;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.single-project .entry-header .project-facts__services a:hover,
.single-project .entry-header .project-facts__services a:focus-visible { color: var(--kf-color-brand); }

.single-project .entry-header .project-facts__services {
  list-style: none;
  padding: 0;
  margin: 0;
}
.single-project .entry-header .project-facts__services li { margin: 0 0 var(--kf-space-xs); }
.single-project .entry-header .project-facts__services li:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .single-project .entry-header .project-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-project .entry-header .project-facts__item,
  .single-project .entry-header .project-facts__item:last-child { max-width: none; }
}

@media (max-width: 479.98px) {
  .single-project .entry-header .project-facts { grid-template-columns: minmax(0, 1fr); }
}

/* Lukas-Seite: vorhandene Split-Layouts, Tokens und zentrale CTA-Buttons. */
.kuf-about {
  background: var(--kf-color-surface-light-alt);
  color: var(--kf-blog-color-text);
  font-size: var(--kf-blog-step-0);
  font-weight: 400;
  line-height: var(--kf-blog-lh-body);
}
.kuf-about__section { padding: var(--kf-space-xl) 0; }
.kuf-about__section--muted { background: var(--kf-color-surface-light); }
.kuf-about h2:not(.post-card__title) {
  color: var(--kf-blog-color-heading);
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-3);
  line-height: var(--kf-blog-lh-tight);
  margin: 0;
  overflow-wrap: anywhere;
}
.kuf-about p { margin: 0 0 var(--kf-space-m); max-width: var(--kf-blog-measure); }
.kuf-about p:last-child { margin-bottom: 0; }
.kuf-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kf-space-s);
  margin-top: var(--kf-space-l);
}
.kuf-about a:not(.kuf-button) { color: var(--kf-blog-color-link); }
@media (max-width: 767.98px) {
  .kuf-about__section { padding: var(--kf-space-l) 0; }
}

/* Header-Claims sind freie Texte; fachliche H1 steht im hellen Inhaltsbereich. */
.content-hero__title,
.single-project .entry-header .entry-title { min-height: 1.15em; }

/* Blogartikel starten direkt mit Text im Abstand des Hero-Innenpaddings. */
.single-post .single-content {
  --kuf-post-header-space: clamp(5rem, 10vw, 8rem);
}
.single-post .single-content .entry-header {
  margin-bottom: 0;
  padding-bottom: var(--kuf-post-header-space);
}
.single-post .single-content article > .entry-header + .container {
  padding-top: var(--kuf-post-header-space);
}
.single-post .entry-content > :first-child { margin-top: 0; }
@media (max-width: 767.98px) {
  .single-post .single-content { --kuf-post-header-space: var(--kf-space-xl); }
}

/* Projektübergang: Medien überlappen, Text folgt dem Innenabstand des Headers. */
.single-project .single-content {
  --kuf-project-header-space: clamp(5rem, 10vw, 8rem);
  --kuf-project-overlap: min(100px, calc(var(--kuf-project-header-space) - var(--kf-space-m)));
  --kuf-project-section-space: var(--kf-space-2xl);
}
.single-project .single-content .entry-header {
  margin-bottom: 0;
  padding-bottom: var(--kuf-project-header-space);
}
.single-project .single-content article.has-post-thumbnail > .entry-header {
  padding-bottom: calc(var(--kuf-project-overlap) + var(--kuf-project-section-space));
}
.single-project .single-content article > .entry-header + .container {
  padding-top: var(--kuf-project-header-space);
  position: relative;
  z-index: 2;
}
.single-project .single-content article.has-post-thumbnail > .entry-header + .container {
  margin-top: calc(-1 * var(--kuf-project-overlap));
  padding-top: 0;
}
.single-project .single-content article {
  padding-bottom: var(--kuf-project-section-space);
}
.single-project .single-content .related-posts {
  margin-top: 0;
  padding-block: var(--kuf-project-section-space);
}
@media (max-width: 767.98px) {
  .single-project .single-content {
    --kuf-project-header-space: var(--kf-space-xl);
    --kuf-project-overlap: 40px;
    --kuf-project-section-space: var(--kf-space-xl);
  }
}
.kuf-content-title,
.single-project .entry-content h1.kuf-content-title {
  color: var(--kf-blog-color-heading);
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-4);
  font-weight: 700;
  line-height: var(--kf-blog-lh-tight);
  margin: 0 0 var(--kf-space-l);
  overflow-wrap: anywhere;
}
.kuf-about__title { padding-top: var(--kf-space-xl); }
.kuf-about__title + .kuf-about__section { padding-top: 0; }

/* Gutenberg-Gruppen der Lukas-Seite behalten das gewünschte Split-Layout. */
.kuf-about__section :is(.row, .wp-block-group__inner-container):has(> .kuf-about__copy) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kf-space-l);
  margin: 0;
}
.kuf-about__section :is(.row, .wp-block-group__inner-container):has(> .kuf-about__copy) > .wp-block-group {
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
}
@media (min-width: 768px) {
  .kuf-about__section :is(.row, .wp-block-group__inner-container):has(> .kuf-about__copy) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--kf-space-xl);
  }
}

.kuf-about__section .row:has(.kuf-about__copy) { margin: 0; }
.kuf-about__section .row:has(.kuf-about__copy) > .wp-block-group__inner-container {
  width: 100%;
  padding: 0;
}

.kuf-about h2.kuf-service-projects-title { margin-bottom: var(--kf-space-l); }

/* Leistungsseite: abwechslungsreiche Bereiche auf vorhandener Komponentenbasis. */
.kuf-service-section--dark {
  background: var(--kf-color-dark);
  color: var(--kf-color-surface-light-alt);
  position: relative;
  isolation: isolate;
  --kuf-ghost-fill: var(--kf-color-surface-light-alt);
  --kuf-ghost-text: var(--kf-color-dark);
}
.kuf-service-section--dark .container { position: relative; z-index: 2; }
.kuf-about .kuf-service-section--dark h2 { color: var(--kf-color-surface-light-alt); }
.kuf-about .kuf-service-section--dark a:not(.kuf-button) { color: var(--kf-color-brand); }
.kuf-about h2.kuf-service-cards-title { margin-bottom: var(--kf-space-l); }
.kuf-service-cards > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kf-space-m);
}
.kuf-service-card {
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  padding: var(--kf-space-l);
  min-width: 0;
  margin: 0;
}
.kuf-service-card .post-card__title { margin-bottom: var(--kf-space-m); }
.kuf-service-followup { padding-top: 0; }
.kuf-about .kuf-service-followup h2 { margin-bottom: var(--kf-space-m); }
@media (max-width: 767.98px) {
  .kuf-service-cards > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr); }
  .kuf-service-card { padding: var(--kf-space-m); }
}

.kuf-service-image { margin: var(--kf-space-l) 0 0; }
.kuf-service-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Leistungsseiten bekommen großzügigere Abstände als das kompakte Grundlayout. */
.kuf-service-page .kuf-about__title { padding-top: var(--kf-space-2xl); }
.kuf-service-page .kuf-content-title { margin-bottom: var(--kf-space-xl); }
.kuf-service-page .kuf-about__section { padding: var(--kf-space-2xl) 0; }
.kuf-service-page .kuf-about__title + .kuf-about__section { padding-top: 0; }
/* Der Abschluss entspricht dem Abstand zweier benachbarter Inhaltsabschnitte. */
.kuf-service-page > .kuf-about__section:last-child { padding-bottom: calc(2 * var(--kf-space-2xl)); }
body:has(.kuf-service-page) .site-footer > .site-footer__cta { padding-top: calc(2 * var(--kf-space-2xl)); }
.kuf-service-page p { margin-bottom: var(--kf-space-m); line-height: var(--kf-blog-lh-relaxed); }
.kuf-service-page p:last-child { margin-bottom: 0; }
.kuf-service-page .kuf-about__actions { margin-top: var(--kf-space-xl); }
.kuf-service-page h2.kuf-service-cards-title,
.kuf-service-page h2.kuf-service-projects-title { margin-bottom: var(--kf-space-xl); }
.kuf-service-page .kuf-service-cards > .wp-block-group__inner-container { gap: var(--kf-space-l); }
.kuf-service-page .kuf-service-card { padding: var(--kf-space-xl); }
.kuf-service-page .kuf-service-card .post-card__title,
.kuf-service-page .kuf-service-followup h2 { margin-bottom: var(--kf-space-l); }
.kuf-service-page .kuf-service-image { margin-top: var(--kf-space-xl); }
.kuf-service-page .kuf-about__copy .wp-block-group__inner-container > .kuf-service-image:first-child { margin-top: 0; }

:is(.page-id-1002, .page-id-1100) .kuf-about__title .kuf-content-title {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--kf-space-m);
  text-align: center;
}
.kuf-content-title em,
.kuf-home-content__section:not(.kuf-home-content__section--dark):not(.kuf-home-content__intro) :is(.kuf-home-content__heading, .kuf-home-content__display) em {
  background: linear-gradient(to top right, var(--kf-color-dark), var(--kf-blog-color-link) 55%, color-mix(in srgb, var(--kf-blog-color-link) 80%, var(--kf-color-brand)));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
:is(.page-id-1002, .page-id-1100) .kuf-about__title + .kuf-about__section p {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.page-id-1002 .kuf-about__title + .kuf-about__section {
  padding-bottom: var(--kf-space-2xl);
}
.page-id-1002 .kuf-about__section + .kuf-about__section {
  padding-top: 0;
}
@media (max-width: 767.98px) {
  .page-id-1002 .kuf-about__title + .kuf-about__section { padding-bottom: var(--kf-space-xl); }
}

.page-id-1400 .kuf-about__title .kuf-content-title { margin-bottom: var(--kf-space-m); }
.page-id-1400 .kuf-contact__intro .kuf-content-title { margin-bottom: var(--kf-space-m); }
.page-id-1400 .kuf-about .kuf-contact__person {
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  padding: var(--kf-space-xs);
  background: var(--kf-color-surface-light);
}
.kuf-contact__portrait { overflow: hidden; border-radius: 4px; }
.kuf-contact__person .author-box__image { margin: 0; }
.kuf-contact__person-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--kf-space-s); padding: var(--kf-space-m) var(--kf-space-xs) var(--kf-space-xs); }
.kuf-contact__person-name { display: block; font-family: var(--kf-font-base); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.kuf-contact__status { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 0.75rem; line-height: 1.3; }
.kuf-contact__status::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--kf-blog-color-muted); }
.kuf-contact__status.is-online::before { background: var(--kf-color-brand); }
.kuf-contact__person .kuf-button { flex-shrink: 0; justify-content: center; font-size: 0.875rem; }
@media (max-width: 359.98px) {
  .kuf-contact__person-footer { flex-wrap: wrap; }
}
.page-id-1400 .kuf-about .site-footer__cta .site-footer__cta-text {
  font-size: var(--kf-blog-step-0);
  line-height: 1.6;
  margin-top: var(--kf-space-m);
}

/* Kontakt: Standort als offener Text-/Bild-Split auf gemeinsamer Layoutbasis. */
.page-id-1400 #standort h2 { margin-bottom: var(--kf-space-m); }
.page-id-1400 #standort p { margin-bottom: var(--kf-space-m); }
.page-id-1400 #standort p:last-child { margin-bottom: 0; }
.page-id-1400 #standort .kuf-service-card { background: transparent; padding: 0; }
.page-id-1400 #standort .kuf-service-image { margin: 0; }
@media (min-width: 1200px) {
  .kuf-service-page .kuf-about__section :is(.row, .wp-block-group__inner-container):has(> .kuf-about__copy) {
    column-gap: var(--kf-space-2xl);
  }
}
@media (max-width: 767.98px) {
  .kuf-service-page .kuf-about__title { padding-top: var(--kf-space-xl); }
  .kuf-service-page .kuf-about__section { padding: var(--kf-space-xl) 0; }
  .kuf-service-page > .kuf-about__section:last-child { padding-bottom: calc(2 * var(--kf-space-xl)); }
  body:has(.kuf-service-page) .site-footer > .site-footer__cta { padding-top: calc(2 * var(--kf-space-xl)); }
  .kuf-service-page .kuf-about__title + .kuf-about__section { padding-top: 0; }
  .kuf-service-page .kuf-service-card { padding: calc(var(--kf-space-s) * 2); }
  .kuf-service-page .kuf-about__actions { margin-top: var(--kf-space-l); }
  .kuf-service-page .kuf-service-image { margin-top: var(--kf-space-l); }
}

/* Gemeinsame große Projektkarten für alle Projektlisten. */
.kuf-home-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kf-space-xl) var(--kf-space-l); }
@media (max-width: 767.98px) {
  .kuf-home-projects { grid-template-columns: minmax(0, 1fr); }
}
.kuf-home-project__link:hover .post-card__title-text:not(.is-split),
.kuf-home-project__link:focus-visible .post-card__title-text:not(.is-split) { background-size: 100% 100%; }
.kuf-home-content__projects .kuf-home-project__link:is(:hover, :focus-visible) .post-card__title-text:not(.is-split),
.kuf-home-content__projects .kuf-home-project__link .post-card__title-line.is-active { color: var(--kf-color-dark); }
.kuf-home-project { min-width: 0; }
.kuf-home-project .kuf-home-project__link { display: block; color: inherit; text-decoration: none; }
.kuf-home-project .kuf-home-project__link:hover,
.kuf-home-project .kuf-home-project__link:focus-visible { color: inherit; text-decoration: none; }
.kuf-about .kuf-home-project .kuf-home-project__link { color: var(--kf-color-dark); }
.kuf-home-project__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: var(--kf-color-surface-light); }
.kuf-home-project__media video,
.kuf-home-project__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kuf-home-project__copy { margin-top: var(--kf-space-m); color: inherit; }
.kuf-home-project__copy h3 {
  color: inherit;
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-2);
  font-weight: 400;
  line-height: var(--kf-blog-lh-snug);
  text-wrap: balance;
  margin: 0 0 var(--kf-space-xs);
}
.kuf-home-project__copy .kuf-home-project__meta { font-size: var(--kf-blog-step--1); line-height: var(--kf-blog-lh-body); opacity: 0.7; margin: 0; }
.single-project .related-posts__grid.kuf-home-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767.98px) {
  .single-project .related-posts__grid.kuf-home-projects { grid-template-columns: minmax(0, 1fr); }
}

.kuf-service-page :is(#webentwicklung, #woocommerce) { scroll-margin-top: calc(var(--kf-space-xl) + var(--kf-space-l)); }

/* Gemeinsame Leistungskarten. */
.kuf-home-content__services-grid {
  display: grid;
  gap: var(--kf-space-m);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kuf-home-content__service {
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  min-width: 0;
  padding: var(--kf-space-l);
}

.kuf-home-content__service--contact {
  background: var(--kf-color-brand);
}

.kuf-home-content__service--contact .post-card__title,
.kuf-home-content__service--contact .post-card__excerpt,
.kuf-home-content__service--contact .kuf-home-content__service-link {
  color: var(--kf-color-dark);
}

.kuf-home-content__service--contact .post-card__title-text:not(.is-split),
.kuf-home-content__service--contact .post-card__title-line {
  background-image: linear-gradient(
    90deg,
    var(--kf-color-surface-light-alt),
    var(--kf-color-surface-light-alt)
  );
}

.kuf-home-content__service-link {
  color: var(--kf-blog-color-text);
  display: grid;
  gap: var(--kf-space-m);
  grid-template-rows: auto 1fr auto;
  height: 100%;
  text-decoration: none;
}

.kuf-home-content__service-link .post-card__excerpt {
  margin: 0;
}

.kuf-home-content__service-items {
  color: var(--kf-blog-color-muted);
  font-size: var(--kf-blog-step--1);
  line-height: var(--kf-blog-lh-snug);
  margin: 0;
  padding: 0;
  list-style: none;
}

.kuf-home-content__service-items li + li {
  margin-top: var(--kf-space-2xs);
}

.kuf-home-content__service-footer {
  align-items: flex-end;
  display: flex;
  gap: var(--kf-space-m);
  justify-content: space-between;
}

.kuf-home-content__service-footer .kuf-button {
  flex-shrink: 0;
  margin-left: auto;
}

.kuf-home-content__service-footer .kuf-home-content__service-items {
  min-width: 0;
}


:is(.kuf-home-content__service-items, .kuf-service-card ul, .kuf-service-layout .wp-block-list) li { position: relative; padding-left: 1.1em; }
:is(.kuf-home-content__service-items, .kuf-service-card ul, .kuf-service-layout .wp-block-list) li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.65em; height: 2px; background: var(--kf-color-brand); }
:is(.kuf-service-card ul, .kuf-service-layout .wp-block-list) li::before {
  top: 0.5lh;
  transform: translateY(-50%);
}
:is(.kuf-service-card ul, .kuf-service-layout .wp-block-list) {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: var(--kf-space-l);
}
:is(.kuf-service-card, .kuf-service-layout .kuf-about__section) li + li { margin-top: var(--kf-space-2xs); }
:is(.kuf-service-card, .kuf-service-layout .kuf-about__section) p:has(+ ul) {
  font-weight: 700;
  margin-bottom: var(--kf-space-xs);
}
.kuf-about .kuf-home-content__service .kuf-home-content__service-link { color: var(--kf-color-dark); }
.kuf-about .kuf-home-content__service .post-card__excerpt { margin: 0; }

.kuf-service-intro { text-align: center; }
.kuf-service-layout .kuf-service-intro .kuf-content-title { max-width: 22ch; margin: 0 auto var(--kf-space-m); }
.kuf-service-intro__copy { max-width: 60ch; margin-inline: auto; }
.kuf-service-intro__copy p { max-width: none; }
.kuf-service-intro__copy .kuf-about__actions { justify-content: center; margin-top: var(--kf-space-m); }

.kuf-service-layout.kuf-service-page .kuf-lukas__content :is(h1, h2, h3) { margin-bottom: var(--kf-space-m); }
.kuf-service-layout .kuf-lukas__content .kuf-about__actions { margin-top: var(--kf-space-m); }
.kuf-service-layout .kuf-service-image { margin: 0; }
.kuf-service-layout .kuf-lukas__image { height: 100%; }

/* Lukas: zentrierte Einleitung und abwechselnde Bild-/Textabschnitte. */
/* Freunde: ruhiges Netzwerk neben dem gemeinsamen Text-/Bild-Split. */
.kuf-friends .kuf-friends__network-split .kuf-lukas__content h2 { color: var(--kf-color-surface-light-alt); margin-bottom: var(--kf-space-m); }
.kuf-network { width: 100%; max-width: 560px; margin-inline: auto; }
.kuf-network svg { display: block; width: 100%; height: auto; overflow: hidden; }
.kuf-network__lines { fill: none; stroke: var(--kf-color-brand); stroke-width: 1; opacity: 0.35; }
.kuf-network__node rect { fill: var(--kf-color-dark); stroke: var(--kf-color-brand); stroke-width: 1; }
.kuf-network__node--topic text { font-size: 16px; font-weight: 600; }
.kuf-network__continuation { stroke: var(--kf-color-brand); stroke-width: 1; fill: none; opacity: 0.55; }
.kuf-network__continuation rect { fill: var(--kf-color-dark); }
.kuf-network text { fill: var(--kf-color-surface-light-alt); font-family: var(--kf-font-base); font-size: 17px; text-anchor: middle; dominant-baseline: alphabetic; }
.kuf-network__center rect { fill: var(--kf-color-brand); }
.kuf-network__center text { fill: var(--kf-color-dark); font-family: var(--kf-font-display); font-size: 25px; font-weight: 700; }
.kuf-network__node text { transition: opacity 180ms ease; }
.kuf-network__node.is-changing text { opacity: 0; }
.kuf-network__node rect { transition: x 240ms ease, y 240ms ease, width 240ms ease, height 240ms ease; }
.kuf-network.is-network-ready:not(.has-entered) .kuf-network__graph { opacity: 0; }
.kuf-network.has-entered:not(.is-intro-complete) :is(.kuf-network__node, .kuf-network__center) {
  transform-box: fill-box;
  transform-origin: center;
  animation: kuf-network-appear 450ms ease both;
  animation-delay: var(--network-reveal-delay, 0s);
}
.kuf-network.has-entered:not(.is-intro-complete) .kuf-network__lines {
  stroke-dasharray: 1;
  animation: kuf-network-connect 950ms ease 100ms both;
}
.kuf-network.has-entered:not(.is-intro-complete) .kuf-network__continuation {
  animation: kuf-network-extend 550ms ease 700ms both;
}
.kuf-network.has-entered:not(.is-intro-complete):not(.is-active) .kuf-network__graph > * { animation-play-state: paused; }
@keyframes kuf-network-appear {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes kuf-network-extend { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes kuf-network-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .kuf-network__node :is(text, rect) { transition: none; }
}

.kuf-friends .kuf-friends__constellation { text-align: center; }
.kuf-friends .kuf-friends__constellation :is(.row, .wp-block-group__inner-container):has(> .kuf-about__copy) {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kf-space-m);
}
.kuf-friends .kuf-friends__constellation h2 {
  max-width: 22ch;
  margin: 0 auto;
}
.kuf-friends .kuf-friends__constellation :is(.row, .wp-block-group__inner-container) > .kuf-about__copy {
  max-width: 60ch;
  margin-inline: auto;
}

.kuf-marketing,
.kuf-marketing .kuf-about__section { background: #fff; }
.kuf-marketing .kuf-about__title .kuf-content-title {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--kf-space-m);
  text-align: center;
}
.kuf-marketing .kuf-about__title + .kuf-about__section p,
.kuf-marketing .kuf-marketing__outro p {
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}
.kuf-marketing .kuf-service-section--dark {
  color: var(--kf-blog-color-text);
  --kuf-ghost-fill: var(--kf-color-dark);
  --kuf-ghost-text: var(--kf-color-surface-light-alt);
}
.kuf-marketing .kuf-service-section--dark > .wp-block-group__inner-container > .gradient-wrapper,
.kuf-marketing .kuf-service-section--dark > .gradient-wrapper { display: none; }
.kuf-marketing .kuf-service-section--dark h2 { color: var(--kf-blog-color-heading); }
.kuf-marketing .kuf-service-section--dark a:not(.kuf-button) { color: var(--kf-blog-color-link); }
:is(.kuf-marketing, .kuf-friends) .kuf-lukas__content :is(h2, h3),
.kuf-marketing .kuf-marketing__outro h2 {
  color: var(--kf-blog-color-heading);
  font-family: var(--kf-font-display);
  font-size: var(--kf-blog-step-3);
  line-height: var(--kf-blog-lh-tight);
}

.kuf-marketing .kuf-marketing__outro h2 {
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: var(--kf-space-m);
  text-align: center;
}

.kuf-lukas,
.kuf-lukas > .kuf-about__section { background: #fff; }
.kuf-lukas > .kuf-about__section,
.page-template-page-lukas .site-footer__cta { padding-block: var(--kf-space-2xl); }
.kuf-lukas__intro + .kuf-about__section,
.page-template-page-lukas .site-footer__cta { padding-top: calc(2 * var(--kf-space-2xl)); }
.kuf-lukas > .kuf-about__section:last-child { padding-bottom: calc(2 * var(--kf-space-2xl)); }
.kuf-lukas__intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--kf-space-2xl);
  text-align: center;
}
.kuf-lukas__title-highlight { color: #fff; font-style: italic; }
.kuf-lukas__intro .kuf-about__title,
.kuf-lukas__intro .kuf-about__section { padding-block: 0; }
.kuf-lukas__intro .kuf-content-title {
  max-width: 24ch;
  margin-inline: auto;
}
.kuf-lukas__intro p { margin-inline: auto; }
.kuf-lukas__split,
.page-id-1400 #standort .row > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--kf-space-l);
}
.kuf-lukas__media,
.page-id-1400 #standort .kuf-about__copy {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--kf-color-surface-light);
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
}
.kuf-lukas__image,
.page-id-1400 #standort .kuf-service-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kuf-lukas__image-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.kuf-js:not(.kuf-reveal-fallback) .kuf-lukas__media.is-image-preparing .kuf-lukas__image { opacity: 0; }
.kuf-lukas__media.is-image-shader .kuf-lukas__image-canvas { opacity: 1; }
.kuf-lukas__media.is-image-complete .kuf-lukas__image-canvas { opacity: 0; }
.kuf-lukas__content { min-width: 0; }
.kuf-lukas__media.kuf-lukas__media--project { aspect-ratio: 16 / 9; }
.kuf-lukas__media.kuf-service-blog {
  aspect-ratio: auto;
  padding: var(--kf-space-l);
  overflow: visible;
}
.kuf-service-blog__label { font-weight: 700; }
.kuf-lukas__media.kuf-service-project { aspect-ratio: auto; background: transparent; overflow: visible; }
.kuf-about .kuf-service-project .kuf-home-project a.kuf-home-project__link { color: inherit; }
.kuf-about .kuf-service-project .kuf-home-project__copy h3 { margin-bottom: var(--kf-space-xs); }
.kuf-about .kuf-service-blog { color: var(--kf-blog-color-text); }
.kuf-about .kuf-service-blog .post-card__title { color: var(--kf-blog-color-heading); }
.kuf-about .kuf-service-blog a.post-card__link { color: var(--kf-blog-color-text); }
@media (max-width: 767.98px) {
  .kuf-lukas__media.kuf-service-blog { padding: var(--kf-space-m); }
  .kuf-service-blog-split .kuf-service-blog,
  .kuf-service-blog-split .kuf-service-project { order: 2; }
}
:is(.kuf-lukas, .kuf-marketing, .kuf-friends) .kuf-lukas__content :is(h2, h3) { margin-bottom: var(--kf-space-l); }
.kuf-lukas .kuf-about__actions { margin-top: var(--kf-space-l); }
@media (min-width: 768px) {
  .kuf-lukas__split,
  .page-id-1400 #standort .row > .wp-block-group__inner-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kf-space-2xl);
  }
  .kuf-lukas__split--reverse .kuf-lukas__media {
    grid-column: 2;
    grid-row: 1;
  }
  .kuf-lukas__split--reverse .kuf-lukas__content {
    grid-column: 1;
    grid-row: 1;
  }
}

@media (max-width: 767.98px) {
  .kuf-lukas > .kuf-about__section,
  .page-template-page-lukas .site-footer__cta,
  .kuf-lukas__intro { padding-block: var(--kf-space-xl); }
  .kuf-lukas__intro + .kuf-about__section,
  .page-template-page-lukas .site-footer__cta { padding-top: calc(2 * var(--kf-space-xl)); }
  .kuf-lukas > .kuf-about__section:last-child { padding-bottom: calc(2 * var(--kf-space-xl)); }
}

@media (max-width: 767.98px) {
  .kuf-home-content__services-grid { grid-template-columns: minmax(0, 1fr); }
  .kuf-home-content__service { padding: var(--kf-space-m); }
  .kuf-home-content__service-footer { flex-direction: column; align-items: stretch; }
  .kuf-home-content__service-footer .kuf-button { align-self: flex-end; }
}

/* Gemeinsame Hero-Verläufe für Website und WordPress-Login. */
.gradient-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0.5;
	overflow: hidden;
}

.gradient-top-left:after,
.gradient-top-right:after,
.gradient-bottom-left:before,
.gradient-bottom-right:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	will-change: opacity;
}

.gradient-top-left:after {
	background: radial-gradient(ellipse at top left in oklch,
			rgba(0, 255, 167, 1) 0%,
			rgba(0, 255, 167, 0.9) 5%,
			rgba(0, 255, 167, 0.7) 11%,
			rgba(0, 255, 167, 0.45) 18%,
			rgba(0, 255, 167, 0.25) 25%,
			rgba(0, 255, 167, 0.12) 33%,
			rgba(0, 255, 167, 0.04) 40%,
			rgba(0, 255, 167, 0) 48%);
}

.gradient-top-right:after {
	background: radial-gradient(ellipse at top right in oklch,
			rgba(0, 255, 167, 1) 0%,
			rgba(0, 255, 167, 0.9) 5%,
			rgba(0, 255, 167, 0.7) 11%,
			rgba(0, 255, 167, 0.45) 18%,
			rgba(0, 255, 167, 0.25) 25%,
			rgba(0, 255, 167, 0.12) 33%,
			rgba(0, 255, 167, 0.04) 40%,
			rgba(0, 255, 167, 0) 48%);
}

.gradient-bottom-left:before {
	background: radial-gradient(ellipse at bottom left in oklch,
			rgba(0, 255, 167, 1) 0%,
			rgba(0, 255, 167, 0.9) 5%,
			rgba(0, 255, 167, 0.7) 11%,
			rgba(0, 255, 167, 0.45) 18%,
			rgba(0, 255, 167, 0.25) 25%,
			rgba(0, 255, 167, 0.12) 33%,
			rgba(0, 255, 167, 0.04) 40%,
			rgba(0, 255, 167, 0) 48%);
}

.gradient-bottom-right:before {
	background: radial-gradient(ellipse at bottom right in oklch,
			rgba(0, 255, 167, 1) 0%,
			rgba(0, 255, 167, 0.9) 5%,
			rgba(0, 255, 167, 0.7) 11%,
			rgba(0, 255, 167, 0.45) 18%,
			rgba(0, 255, 167, 0.25) 25%,
			rgba(0, 255, 167, 0.12) 33%,
			rgba(0, 255, 167, 0.04) 40%,
			rgba(0, 255, 167, 0) 48%);
}