/* ==========================================================================
   Kuhlmann & Kollegen – Website v3 nach freigegebener Layoutrichtung
   (04_LAYOUT_REFERENZEN/web/kuhlmann-kollegen-website-layout-freigegebene-richtung.png)
   Serif-Display, helle Blaugrau-Flächen, Navy-Akzente. Keine externen Webfonts.
   ========================================================================== */

:root {
  /* Farbtokens – abgeleitet aus Layoutreferenz + Originallogo */
  --kk-navy-900: #16283f;
  --kk-navy-800: #1e3a5f;   /* Primärflächen, Buttons (Kontrast >= 4.5:1) */
  --kk-navy-700: #2a4a72;
  --kk-steel-500: #5b7ca6;   /* nur dekorativ: Linien, Icons, Flaechen */
  --kk-steel-700: #456188;   /* Textton fuer Versal-Kleintext, >= 5:1 auf allen hellen Flaechen */
  --kk-azure-500: #0d9bd8;  /* Azur aus der Bildmarke */
  --kk-cyan-300: #5fc6ec;   /* heller Cyanton für Piktogramme/Akzente */
  /* Sonderfarbe: Cyanblau-Verlauf, beide Toene direkt aus der Bildmarke.
     Navy-Text darauf erreicht mindestens 4,75:1 - ueber dem Ziel von 4,5:1. */
  --kk-fresh-cyan: #5fc6ec;        /* helles Cyan der Bildmarke */
  --kk-fresh-blau: #0d9bd8;        /* Azur der Bildmarke - Verlaufsende */
  --kk-fresh-cyan-hell: #8fdcf4;   /* Hoverzustand, hell */
  --kk-fresh-blau-hell: #45b6e6;   /* Hoverzustand, tief */
  --kk-fresh-tief: #0e8fa8;
  --schatten-pill: 0 6px 16px rgba(13, 155, 216, 0.28);
  --schatten-pill-hover: 0 10px 24px rgba(13, 155, 216, 0.36);
  --kk-mist-200: #dde6ef;
  --kk-mist-100: #eef2f7;   /* helle Sektionen wie in der Referenz */
  --kk-mist-050: #f7f9fc;
  --kk-ink: #24303e;
  --kk-ink-soft: #55606d;
  --kk-line: #d4dce5;
  --kk-white: #ffffff;
  --kk-focus: #b25e00;

  /* Typografie – Serif-Display wie Referenz, System-Sans für Fließtext */
  /* Geradlinige, gut lesbare Grotesk fuer Ueberschrift und Fliesstext.
     Lokal verfuegbare Systemschnitte, keine externen Webfonts. */
  --font-display: "Inter", "Inter Tight", "Helvetica Neue", "Segoe UI", system-ui,
    -apple-system, Roboto, "Liberation Sans", Arial, sans-serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto,
    "Helvetica Neue", "Liberation Sans", Arial, sans-serif;
  --fs-100: 0.85rem;
  --fs-200: 1rem;
  --fs-300: 1.125rem;
  --fs-400: 1.35rem;
  --fs-500: 1.75rem;
  --fs-600: clamp(1.9rem, 3.2vw, 2.6rem);
  --fs-700: clamp(2.4rem, 5vw, 3.6rem);

  --max-w: 1240px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(22, 40, 63, 0.10);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-200);
  line-height: 1.65;
  color: var(--kk-ink);
  background: var(--kk-white);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--kk-navy-800); }
a:hover { color: var(--kk-navy-900); }
:focus-visible { outline: 3px solid var(--kk-focus); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--kk-navy-900);
  letter-spacing: -0.018em;
  line-height: 1.14;
}
h1 { font-weight: 650; letter-spacing: -0.024em; }

.container { width: min(100% - 2 * var(--space-2), var(--max-w)); margin-inline: auto; }
.section { padding-block: var(--space-5); }
.section--mist { background: var(--kk-mist-100); }
.section--soft { background: var(--kk-mist-050); }

.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kk-steel-700);
  margin-bottom: var(--space-1);
}
.section-title { font-size: var(--fs-600); line-height: 1.18; margin: 0 0 var(--space-2); text-wrap: balance; }
.lead { max-width: 64ch; color: var(--kk-ink-soft); margin: 0 0 var(--space-3); }

.icon { width: 1.5em; height: 1.5em; flex: none; }

.tag-freigabe {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #7a4a00;
  background: #fdf1dc;
  border: 1px dashed #d9a441;
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  vertical-align: middle;
}

/* Skip-Link */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--kk-navy-900); color: #fff; padding: 0.75rem 1.25rem; }
.skip-link:focus-visible { left: 0; color: #fff; }

/* Buttons – kompakt, Versalien, wie Referenz */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.35rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--kk-navy-800); color: #fff; }
.btn--primary:hover { background: var(--kk-navy-900); color: #fff; }
.btn--outline { background: transparent; color: var(--kk-navy-800); border-color: var(--kk-navy-800); }
.btn--outline:hover { background: var(--kk-mist-200); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.12); color: #fff; }
.btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.textlink .icon { width: 1em; height: 1em; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--kk-white); border-bottom: 1px solid var(--kk-line); }
.site-header__inner { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); }
.site-header__logo { flex: none; }
.site-header__logo img { width: clamp(190px, 22vw, 260px); height: auto; }

.site-nav { display: none; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--kk-line); border-radius: var(--radius);
  background: #fff; color: var(--kk-navy-900); cursor: pointer;
}
.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open,
.nav-toggle[aria-expanded="false"] .nav-toggle__close { display: none; }

.mobile-nav { display: none; border-top: 1px solid var(--kk-line); background: #fff; }
.mobile-nav.is-open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: var(--space-2); }
.mobile-nav a { display: block; padding: 0.7rem 0.5rem; text-decoration: none; font-weight: 600; color: var(--kk-navy-900); border-radius: 4px; }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { background: var(--kk-mist-100); }

@media (min-width: 1360px) {
  .nav-toggle, .mobile-nav { display: none !important; }
  .site-nav { display: block; margin-left: auto; }
  .site-nav ul { list-style: none; display: flex; gap: 1.9rem; margin: 0; padding: 0; }
  .site-nav a {
    text-decoration: none;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--kk-navy-900); padding-bottom: 0.35rem;
  }
  .site-nav a:hover { color: var(--kk-steel-700); }
  .site-nav a[aria-current="page"] { color: var(--kk-navy-800); border-bottom: 2px solid var(--kk-azure-500); }
  .site-header__actions { margin-left: 1.9rem; }
}

/* --------------------------------------------------------------------------
   Hero (Startseite): Text links, Bild rechts mit weichem Verlauf – wie Referenz
   -------------------------------------------------------------------------- */
.hero { position: relative; background: linear-gradient(105deg, var(--kk-mist-050) 0%, var(--kk-mist-100) 100%); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 60%; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #f2f5f9 0%, rgba(242,245,249,0.95) 24%, rgba(242,245,249,0.5) 44%, rgba(242,245,249,0.04) 60%);
}
.hero__inner { position: relative; min-height: min(72vh, 640px); display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-5); }
.hero h1 { font-size: var(--fs-700); line-height: 1.08; margin: 0 0 0.6rem; max-width: 15ch; }
.hero__claim { font-family: var(--font-display); font-size: var(--fs-400); color: var(--kk-navy-700); margin: 0 0 var(--space-2); }
.hero__sub { max-width: 44ch; color: var(--kk-ink-soft); margin: 0 0 var(--space-3); }
@media (max-width: 720px) {
  .hero__media::after { background: linear-gradient(180deg, #f2f5f9 30%, rgba(242,245,249,0.75) 60%, rgba(242,245,249,0.25) 100%); }
}

/* Innenseiten-Banner mit K-Wasserzeichen */
.pagehead { position: relative; background: linear-gradient(120deg, var(--kk-navy-900), var(--kk-navy-800)); color: #fff; overflow: hidden; }
.pagehead::after {
  content: "K";
  position: absolute; right: -0.05em; bottom: -0.42em;
  font-family: var(--font-display);
  font-size: clamp(14rem, 30vw, 24rem);
  line-height: 1;
  color: rgba(255,255,255,0.06);
  pointer-events: none;
}
.pagehead__inner { position: relative; padding-block: var(--space-4); }
.pagehead h1 { color: #fff; font-size: var(--fs-600); margin: 0.25rem 0 0.5rem; max-width: 24ch; }
.pagehead p { max-width: 60ch; color: #ccd9e6; margin: 0; }
.pagehead .kicker { color: #9db4cc; }

/* --------------------------------------------------------------------------
   Vertrauensband – helle Fläche, Linien-Icons, Trenner (Referenz)
   -------------------------------------------------------------------------- */
.trustband { background: var(--kk-mist-100); border-block: 1px solid var(--kk-line); padding-block: var(--space-3); }
.trustband ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .trustband ul { grid-template-columns: repeat(5, 1fr); } }
.trustband li { display: flex; align-items: center; gap: 0.8rem; padding-inline: var(--space-2); }
@media (min-width: 900px) { .trustband li + li { border-left: 1px solid var(--kk-line); } }
.trustband .icon { width: 2.2em; height: 2.2em; color: var(--kk-azure-500); stroke-width: 1; }
.trustband li { position: relative; }
.trustband li::before { content: ""; position: absolute; left: 0.4rem; top: 50%; translate: 0 -50%; width: 2.9em; height: 2.9em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(95,198,236,0.28), rgba(95,198,236,0.06)); z-index: 0; }
.trustband .icon, .trustband span { position: relative; }
.trustband strong { display: block; font-family: var(--font-sans); font-weight: 300; font-size: var(--fs-500); letter-spacing: 0.02em; line-height: 1.05; color: var(--kk-navy-900); }
.trustband small { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kk-ink-soft); line-height: 1.4; }

/* --------------------------------------------------------------------------
   Karten (Zielgruppen / Leistungen)
   -------------------------------------------------------------------------- */
.split-head { display: grid; gap: var(--space-3); align-items: start; margin-bottom: var(--space-4); }
@media (min-width: 900px) { .split-head { grid-template-columns: minmax(260px, 340px) 1fr; } }

.cards-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.card__visual {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(13,155,216,0.14), transparent 55%),
    linear-gradient(150deg, var(--kk-mist-100), var(--kk-mist-200));
  color: var(--kk-navy-700);
  position: relative;
}
.card__visual .icon { width: 3.2rem; height: 3.2rem; stroke-width: 1.1; }
.card__visual::after {
  content: attr(data-mark);
  position: absolute; right: 0.4rem; bottom: -0.65rem;
  font-family: var(--font-display); font-size: 4.6rem; line-height: 1;
  color: rgba(30,58,95,0.08);
}
.card__body { padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.card__body h3 { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-200); color: var(--kk-navy-900); }
.card__body p { margin: 0; color: var(--kk-ink-soft); font-size: var(--fs-100); }
.card__body .textlink { margin-top: auto; padding-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Über uns / 50-Jahre-Grafik
   -------------------------------------------------------------------------- */
.about { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 1000px) { .about { grid-template-columns: 1.05fr 1fr 0.55fr; } }
.about__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about ul.checks { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; display: grid; gap: 0.6rem; }
.about ul.checks li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--kk-ink-soft); }
.about ul.checks .icon { color: var(--kk-azure-500); margin-top: 0.2em; width: 1.2em; height: 1.2em; }
.bignum { text-align: center; }
.bignum strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 10rem);
  line-height: 0.9;
  background: linear-gradient(180deg, var(--kk-navy-700), var(--kk-steel-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bignum span { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--kk-navy-800); margin-top: 0.7rem; }
.bignum em { display: block; font-style: normal; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kk-steel-700); margin-top: 0.35rem; }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.team-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card { background: #fff; border: 1px solid var(--kk-line); border-radius: var(--radius); overflow: hidden; }
.team-card figure { margin: 0; }
.team-card img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.team-card__placeholder {
  aspect-ratio: 3 / 4; display: grid; place-items: center; text-align: center; padding: var(--space-2);
  background: repeating-linear-gradient(45deg, var(--kk-mist-050), var(--kk-mist-050) 14px, var(--kk-mist-100) 14px, var(--kk-mist-100) 28px);
  color: var(--kk-ink-soft); font-size: var(--fs-100);
}
.team-card figcaption, .team-card__meta { padding: var(--space-2) var(--space-2) var(--space-3); text-align: center; }
.team-card h3 { margin: 0 0 0.15rem; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-200); }
.team-card p { margin: 0.3rem 0 0; color: var(--kk-ink-soft); font-size: var(--fs-100); }

/* --------------------------------------------------------------------------
   Zitat / FAQ / Service-Teaser (Dreispalter unten, Referenz)
   -------------------------------------------------------------------------- */
.bottomrow { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .bottomrow { grid-template-columns: 1.05fr 1.2fr 0.9fr; } }
.panel { background: #fff; border: 1px solid var(--kk-line); border-radius: var(--radius); padding: var(--space-3); }
.panel > h2, .panel > h3 { margin: 0 0 var(--space-2); font-size: var(--fs-400); }
.quote { font-family: var(--font-display); font-size: var(--fs-300); color: var(--kk-navy-900); margin: 0 0 var(--space-2); }
.quote::before { content: "\201E"; font-size: 2.6rem; line-height: 0; vertical-align: -0.35em; color: var(--kk-steel-500); margin-right: 0.15rem; }
.quote-src { font-size: var(--fs-100); color: var(--kk-ink-soft); }

.faq-item { border-bottom: 1px solid var(--kk-line); }
.faq-item__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  text-align: left; font: inherit; font-weight: 600; color: var(--kk-navy-900);
  background: none; border: 0; padding: 0.85rem 0.15rem; cursor: pointer;
}
.faq-item__trigger .icon { width: 1.1em; height: 1.1em; color: var(--kk-navy-700); transition: transform 0.2s ease; }
.faq-item__trigger[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq-item__panel { padding: 0 0.15rem 1rem; color: var(--kk-ink-soft); }
.faq-item__panel[hidden] { display: none; }

.mini-service { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mini-service li { display: flex; gap: 0.7rem; align-items: flex-start; }
.mini-service .icon { color: var(--kk-navy-700); margin-top: 0.1em; }
.mini-service strong { display: block; color: var(--kk-navy-900); }
.mini-service small { color: var(--kk-ink-soft); }

/* --------------------------------------------------------------------------
   Inhaltsbausteine der Unterseiten
   -------------------------------------------------------------------------- */
.content-cols { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 960px) { .content-cols { grid-template-columns: 1.4fr 1fr; } }
.aside-box { background: var(--kk-mist-050); border: 1px solid var(--kk-line); border-radius: var(--radius); padding: var(--space-3); }
.aside-box h2, .aside-box h3 { margin: 0 0 var(--space-2); font-size: var(--fs-400); }

.icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.icon-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--kk-ink-soft); }
.icon-list .icon { color: var(--kk-azure-500); width: 1.2em; height: 1.2em; margin-top: 0.2em; }

.leistung-block { display: grid; gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--kk-line); align-items: start; }
.leistung-block:first-of-type { border-top: 0; }
@media (min-width: 900px) { .leistung-block { grid-template-columns: 84px 1fr 1fr; } }
.leistung-block .card__visual { aspect-ratio: 1; border-radius: var(--radius); width: 84px; }
.leistung-block .card__visual .icon { width: 2.2rem; height: 2.2rem; }
.leistung-block .card__visual::after { content: none; }
.leistung-block h2 { margin: 0 0 0.5rem; font-size: var(--fs-400); }
.leistung-block p { margin: 0; color: var(--kk-ink-soft); }

/* CTA-Band */
.cta-band { background: linear-gradient(120deg, var(--kk-navy-900), var(--kk-navy-800)); color: #fff; padding-block: var(--space-4); }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); justify-content: space-between; }
.cta-band h2 { color: #fff; margin: 0; font-size: var(--fs-500); max-width: 26ch; }
.cta-band p { color: #ccd9e6; margin: 0.3rem 0 0; }

/* Mandantenservice */
.service-grid { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .service-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.service-panel { background: #fff; border: 1px solid var(--kk-line); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.service-panel h2, .service-panel h3 { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: var(--fs-400); }
.service-panel .icon { color: var(--kk-navy-700); }
.dropzone {
  border: 2px dashed var(--kk-steel-500); border-radius: var(--radius); background: var(--kk-mist-050);
  padding: var(--space-4) var(--space-2); text-align: center; color: var(--kk-navy-900);
  display: grid; justify-items: center; gap: 0.5rem;
}
.dropzone .icon { width: 2.2rem; height: 2.2rem; color: var(--kk-navy-700); }
.dropzone.is-hover { background: var(--kk-mist-200); }
.dropzone small { color: var(--kk-ink-soft); }
.download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.download-list a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem;
  border: 1px solid var(--kk-line); border-radius: var(--radius);
  text-decoration: none; color: var(--kk-ink-soft); background: var(--kk-mist-050);
}
.download-list a[aria-disabled="true"] { cursor: not-allowed; }
.download-list .icon { color: var(--kk-navy-700); }

/* Kontakt */
.contact-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 0.9rem; }
.contact-list li { display: flex; gap: 0.7rem; align-items: flex-start; }
.contact-list .icon { color: var(--kk-navy-700); margin-top: 0.15em; }
.media-placeholder {
  aspect-ratio: 16 / 9; border-radius: var(--radius); display: grid; place-items: center; text-align: center;
  padding: var(--space-2);
  background: repeating-linear-gradient(45deg, var(--kk-mist-050), var(--kk-mist-050) 14px, var(--kk-mist-100) 14px, var(--kk-mist-100) 28px);
  color: var(--kk-ink-soft); font-size: var(--fs-100);
}

/* --------------------------------------------------------------------------
   Footer – dunkles Kontaktband wie Referenz
   -------------------------------------------------------------------------- */
.site-footer { background: var(--kk-navy-900); color: #c3d2e0; margin-top: var(--space-5); }
.site-footer a { color: #fff; }
.site-footer__contact { display: grid; gap: var(--space-3); padding-block: var(--space-4); align-items: center; }
@media (min-width: 1000px) { .site-footer__contact { grid-template-columns: auto 1fr auto; } }
.footer-logo { background: var(--kk-white); border-radius: var(--radius); padding: var(--space-2); display: inline-block; } /* weiße Schutzfläche */
.footer-logo img { width: 230px; height: auto; }
.site-footer__contact h2 { color: #fff; font-size: var(--fs-500); margin: 0 0 0.25rem; }
.site-footer__contact .sub { margin: 0; color: #9db4cc; }
.footer-contactlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; font-size: var(--fs-100); }
.footer-contactlist li { display: flex; gap: 0.6rem; align-items: flex-start; }
.footer-contactlist .icon { color: var(--kk-azure-500); width: 1.2em; height: 1.2em; margin-top: 0.2em; }
.site-footer__nav { border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-3); display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .site-footer__nav { grid-template-columns: repeat(4, 1fr); } }
.site-footer__nav h2 { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9db4cc; margin: 0 0 0.6rem; }
.site-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--fs-100); }
.site-footer__nav a { text-decoration: none; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.15); padding-block: var(--space-2); font-size: 0.78rem; color: #8aa2ba; }

/* Fotokarten (Zielgruppen) */
.card__visual--photo { aspect-ratio: 4 / 3; padding: 0; display: block; }
.card__visual--photo img, .card__visual--photo picture { width: 100%; height: 100%; }
.card__visual--photo img { object-fit: cover; }
.card__visual--photo::after { content: none; }

/* Piktogramm-Kacheln (Leistungen) */
.picto-tile {
  width: 96px; height: 96px;
  background: #fff;
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(95,198,236,0.18);
  display: grid; place-items: center; padding: 10px;
}
.picto-tile img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 900px) { .leistung-block { grid-template-columns: 96px 1fr 1fr; } }

/* Motivbilder auf Zielgruppenseiten */
.motiv img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Mandantenbereich */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login-demo { display: grid; gap: 0.45rem; }
.login-demo label { font-size: var(--fs-100); font-weight: 700; color: var(--kk-navy-900); }
.login-demo input {
  font: inherit; padding: 0.65rem 0.8rem;
  border: 1px solid var(--kk-line); border-radius: var(--radius); background: #fff;
}
.login-demo input:disabled { background: var(--kk-mist-100); color: var(--kk-ink-soft); cursor: not-allowed; }
.login-demo .btn { margin-top: 0.6rem; justify-content: center; }
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); counter-reset: none; }
@media (min-width: 700px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.picto-step {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--kk-azure-500);
  background: radial-gradient(circle at 30% 30%, rgba(95,198,236,0.30), rgba(95,198,236,0.08));
}
.picto-step .icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.1; }
.dropzone { cursor: pointer; }
.dropzone:focus-visible { outline: 3px solid var(--kk-focus); outline-offset: 2px; }
.upload-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.upload-list li {
  display: flex; align-items: center; gap: 0.6rem;
  border: 1px solid var(--kk-line); border-radius: var(--radius);
  background: var(--kk-mist-050); padding: 0.55rem 0.8rem; font-size: var(--fs-100);
}
.upload-list .icon { color: var(--kk-navy-700); }
.upload-list .size { margin-left: auto; color: var(--kk-ink-soft); }
.upload-note {
  display: flex; gap: 0.6rem; align-items: flex-start;
  margin: 0.9rem 0 0; padding: 0.7rem 0.9rem;
  background: #fdf1dc; border: 1px dashed #d9a441; border-radius: var(--radius);
  font-size: var(--fs-100); color: #7a4a00;
}
.upload-note .icon { color: #b25e00; margin-top: 0.1em; }
.icon-list--cols { gap: 1rem; }
@media (min-width: 800px) { .icon-list--cols { grid-template-columns: repeat(2, 1fr); } }

/* Dropzone ist jetzt ein <label>: Fokus des zugehoerigen Dateifelds sichtbar machen */
.dropzone { display: grid; cursor: pointer; }
.dropzone:has(+ input:focus-visible),
.dropzone:focus-within {
  outline: 3px solid var(--kk-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Korrekturen v6 – Layoutueberhang, Header-Breite, Mobilkopf
   ========================================================================== */

/* Vertrauensband: 1fr erlaubt Ueberlauf durch min-content; erst ab 1200 px
   fuenf Spalten, davor drei. minmax(0,1fr) verhindert das Sprengen des Rasters. */
.trustband ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 900px) {
  .trustband ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trustband li + li { border-left: 0; }
  .trustband li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--kk-line); }
}

@media (min-width: 1200px) {
  .trustband ul { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .trustband li:not(:first-child) { border-left: 1px solid var(--kk-line); }
}

/* Kopfzeile: Navigation und Buttons muessen in die Contentbreite passen */
@media (min-width: 1360px) {
  .site-nav ul { gap: clamp(0.9rem, 1.3vw, 1.6rem); }
  .site-nav a { font-size: 0.74rem; letter-spacing: 0.12em; }
  .site-header__actions { margin-left: clamp(1rem, 1.4vw, 1.9rem); }
}

.site-header__logo img { width: clamp(190px, 18vw, 250px); }

/* Mobil: Kopf-Buttons liegen im Menue, im Kopf bleibt nur der Menuebutton */
@media (max-width: 719px) {
  .site-header__actions .btn { display: none; }
}

/* Vertrauensband mobil: Textspalte muss im Flexraster schrumpfen duerfen */
.trustband li > span { min-width: 0; }
.trustband small { overflow-wrap: break-word; }

/* Raster- und Flexkinder duerfen unter ihre Mindestinhaltsbreite schrumpfen.
   Ohne min-width:0 sprengen lange Woerter/Boxen auf schmalen Schirmen das Layout. */
.panel,
.steps-grid > li,
.content-cols > *,
.split-head > * {
  min-width: 0;
}

.panel { overflow-wrap: break-word; }

/* ==========================================================================
   v6 – Hero-Slider, FAQ Plus/Minus, Muenz-Hilfeblock, Datenschutzhinweis
   ========================================================================== */

/* ---------- Hero-Slider: dezenter Crossfade ohne Layoutsprung ---------- */

.hero__slide { margin: 0; position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease; }
.hero__slide.is-active { opacity: 1; }
.hero__slide picture, .hero__slide img { width: 100%; height: 100%; }
.hero__slide img { object-fit: cover; }

.hero__controls {
  position: absolute;
  right: max(var(--space-2), calc((100vw - var(--max-w)) / 2));
  bottom: var(--space-2);
  z-index: 4;
  display: flex;
  gap: 0.4rem;
}

.hero__pause, .hero__dot {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  color: var(--kk-navy-900);
  cursor: pointer;
}

.hero__pause:hover, .hero__dot:hover { background: #fff; }
.hero__pause .icon { width: 18px; height: 18px; }
.hero__pause .hero__icon-play { display: none; }
.hero__pause[aria-pressed="true"] .icon:not(.hero__icon-play) { display: none; }
.hero__pause[aria-pressed="true"] .hero__icon-play { display: block; }

.hero__dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--kk-navy-800); background: transparent;
}
.hero__dot[aria-pressed="true"]::after { background: var(--kk-navy-800); }

/* ---------- FAQ: Plus wird beim Oeffnen zu Minus ---------- */

.faq-icon--minus { display: none; }
.faq-item__trigger[aria-expanded="true"] .faq-icon--plus { display: none; }
.faq-item__trigger[aria-expanded="true"] .faq-icon--minus { display: inline-block; }

/* ---------- Hilfeblock mit Muenze ---------- */

.faq-help {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.4rem;
  align-items: center;
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--kk-white);
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.faq-help h3 { margin: 0 0 0.35rem; font-size: var(--fs-400); }
.faq-help p { margin: 0 0 0.6rem; color: var(--kk-ink-soft); }
.faq-help__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin: 0; }

.coin-stage { perspective: 700px; width: 72px; height: 72px; display: block; }
.coin { position: relative; display: block; width: 72px; height: 72px; transform-style: preserve-3d; animation: kk-coin-spin 7s linear infinite; }
.coin-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display); font-size: 1.9rem; color: var(--kk-navy-900);
  background: radial-gradient(circle at 32% 30%, #fff 0%, var(--kk-mist-100) 45%, var(--kk-mist-200) 100%);
  border: 3px solid var(--kk-mist-200);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  backface-visibility: hidden;
}
.coin-face--back { transform: rotateY(180deg); }

@keyframes kk-coin-spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .coin { animation: none; }
}

@media (max-width: 520px) {
  .faq-help { grid-template-columns: 1fr; justify-items: start; }
}

/* ---------- Datenschutzhinweis ---------- */

.cookie-note {
  position: fixed;
  left: var(--space-2); bottom: var(--space-2);
  z-index: 1100;
  max-width: min(440px, calc(100vw - 2 * var(--space-2)));
  background: var(--kk-white);
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}

.cookie-note h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--kk-steel-700);
  margin: 0 0 0.5rem;
}

.cookie-note p { font-size: 0.9rem; margin: 0 0 1rem; color: var(--kk-ink-soft); }

/* Piktogrammkachel als Icon-Variante, solange fuer neue Themen kein Motiv vorliegt */
.picto-tile--icon { display: inline-flex; align-items: center; justify-content: center; }
.picto-tile--icon .icon { width: 46%; height: 46%; color: var(--kk-navy-800); stroke-width: 1.2; }

/* ==========================================================================
   v7 – schmaler Hero mit langsamem Zoom, linke Servicespalte,
        kleine schwarze Freigabe-Hinweise, modernisierte Details
   ========================================================================== */

/* ---------- Hero: flacher, ruhiger Zoom auf dem aktiven Bild ---------- */

.hero__inner { min-height: min(48vh, 430px); padding-block: var(--space-4); }
.hero h1 { max-width: 17ch; }

.hero__slide img { transform: scale(1); transition: none; }

/* Ken Burns: sehr langsam, maximal 6 % - kein Scroll-Jacking, keine Parallaxe */
.hero__slide.is-active img { animation: kk-hero-zoom 22s ease-out forwards; }

@keyframes kk-hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active img { animation: none; }
}

.hero__controls { bottom: var(--space-1); }

/* ---------- Freigabe-Hinweise: klein, schwarz, zurueckhaltend ---------- */

.tag-freigabe {
  display: inline;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  color: #000;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

/* Auf dunklen Flaechen die Textfarbe der Umgebung uebernehmen,
   sonst waere Schwarz auf Navy nicht lesbar. */
.site-footer .tag-freigabe,
.pagehead .tag-freigabe,
.hero .tag-freigabe {
  color: inherit;
}



/* ---------- Linke Servicespalte: Suche, Datenschutz, FAQ-Muenze ---------- */

.utility-rail {
  position: fixed;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--kk-line);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 6px 24px rgba(22, 40, 63, 0.10);
}

.utility-rail__btn {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 4px;
  color: var(--kk-navy-800);
  cursor: pointer;
  transition: background 180ms ease;
}

.utility-rail__btn:hover { background: var(--kk-mist-100); }
.utility-rail__btn .icon { width: 22px; height: 22px; }

.utility-rail__btn[aria-expanded="true"] { background: var(--kk-mist-100); }

/* Silberne 3D-Muenze als FAQ-Symbol */
.coin-btn { perspective: 480px; }

.coin-btn .coin {
  width: 30px; height: 30px;
  transform-style: preserve-3d;
  animation: kk-coin-spin 9s linear infinite;
}

.coin-btn .coin-face {
  font-size: 0.85rem;
  border-width: 2px;
  background:
    radial-gradient(circle at 30% 26%, #ffffff 0%, #eef2f7 38%, #c9d4de 72%, #9fb0bf 100%);
  border-color: #b9c6d2;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
  color: var(--kk-navy-900);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .coin-btn .coin { animation: none; }
}

/* Ausklappbare Flaechen der Servicespalte */
.utility-panel {
  position: fixed;
  left: calc(56px + 0.5rem);
  top: 50%;
  translate: 0 -50%;
  z-index: 1050;
  width: min(360px, calc(100vw - 5.5rem));
  max-height: min(70vh, 560px);
  overflow: auto;
  background: var(--kk-white);
  border: 1px solid var(--kk-line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(22, 40, 63, 0.16);
  padding: var(--space-3);
}

.utility-panel h2 {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--kk-steel-700); margin: 0 0 0.75rem;
}

.utility-panel p { font-size: 0.9rem; color: var(--kk-ink-soft); }
.utility-panel__close { position: absolute; top: 0.5rem; right: 0.5rem; width: 36px; height: 36px; border: 0; background: none; color: var(--kk-ink-soft); cursor: pointer; border-radius: 4px; }
.utility-panel__close:hover { background: var(--kk-mist-100); }

.site-search__field { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--kk-line); border-radius: 4px; font: inherit; }
.site-search__results { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.site-search__results a { display: block; padding: 0.5rem 0.6rem; border-radius: 4px; text-decoration: none; color: var(--kk-navy-900); font-size: 0.92rem; }
.site-search__results a:hover { background: var(--kk-mist-100); }
.site-search__results small { display: block; color: var(--kk-ink-soft); font-size: 0.78rem; }
.site-search__empty { font-size: 0.9rem; color: var(--kk-ink-soft); margin: 0.75rem 0 0; }

.faq-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.faq-quick a { text-decoration: none; color: var(--kk-navy-900); font-size: 0.92rem; }
.faq-quick a:hover { color: var(--kk-navy-800); text-decoration: underline; }

@media (max-width: 720px) {
  .utility-rail { top: auto; bottom: 0; translate: none; flex-direction: row; border-left: 1px solid var(--kk-line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .utility-panel { left: 0.75rem; right: 0.75rem; width: auto; top: auto; bottom: 4.5rem; translate: none; }
}

/* ---------- Piktogramme im Stil der Bildmotive ---------- */

.picto-step--art {
  width: 64px; height: 64px;
  background: none;
  border-radius: 0;
  filter: drop-shadow(0 6px 14px rgba(22, 40, 63, 0.18));
}

.picto-step--art svg { width: 100%; height: 100%; }

.picto-tile--art {
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(22, 40, 63, 0.16));
}

.picto-tile--art svg { width: 68%; height: 68%; }

/* ---------- Modernisierung: ruhigere Karten, klarere Tiefe ---------- */

.card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(22, 40, 63, 0.13);
}

.card__visual--photo img { transition: transform 500ms ease; }
.card:hover .card__visual--photo img { transform: scale(1.03); }

.panel { border-radius: 10px; }

.btn { border-radius: 6px; letter-spacing: 0.04em; }

.section-title { letter-spacing: -0.02em; }

/* Feine Trennlinie statt harter Kante zwischen hellen Sektionen */
.section--mist + .section,
.section + .section--mist { border-top: 1px solid rgba(212, 220, 229, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .card, .card__visual--photo img { transition: none; }
  .card:hover { transform: none; }
  .card:hover .card__visual--photo img { transform: none; }
}

/* ---------- Icons als saubere Konturen ----------
   Die Sprite-Symbole sind als Strichzeichnungen angelegt, es fehlte aber die
   Regel dafuer - dadurch wurden sie als schwarze Flaechen gerendert.
   Formen mit eigenem fill/stroke (Piktogramme, Play/Pause) bleiben unberuehrt. */
.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trustband .icon { stroke-width: 1.4; }
.picto-step .icon { stroke-width: 1.3; }

/* ---------- Servicespalte: ungelesener Datenschutzhinweis ---------- */

.utility-rail__btn { position: relative; }

.utility-rail__btn[data-unread="true"]::after {
  content: "";
  position: absolute;
  top: 7px; right: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kk-azure-500);
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- Leistungskopf etwas breiter ---------- */

@media (min-width: 900px) {
  .split-head { grid-template-columns: minmax(300px, 400px) 1fr; }
}

/* ---------- Feinschliff ---------- */

/* Kartenmotive tragen den Titel im Bild - kein Hoverzoom, sonst wird er angeschnitten */
.card__visual--photo img,
.card:hover .card__visual--photo img { transform: none; transition: none; }

/* Vertrauensband: mit der Grotesk wirkt 300 zu duenn */
.trustband strong { font-weight: 500; font-size: 1.55rem; letter-spacing: -0.015em; }

/* Freigabe-Hinweis ohne Trennpunkt - die kleine schwarze Schrift genuegt */
.tag-freigabe::before { content: none; }

/* Demo-Notiz: Text als eigener Block, sonst bricht <b> die Flexzeile */
.upload-note > span { display: block; }

/* Schritt-Piktogramme: Flaeche entfernen, Motiv traegt sich selbst */
.picto-step--art { background: none; width: 68px; height: 68px; }

/* Eingebettete Piktogramme */
.pikto { width: 100%; height: 100%; display: block; }
.picto-step--art .pikto { filter: drop-shadow(0 5px 12px rgba(22, 40, 63, 0.20)); }
.picto-tile--art .pikto { filter: drop-shadow(0 8px 18px rgba(22, 40, 63, 0.18)); }

/* Ablaufschritte: in der schmalen Spalte lesbarer als Zeilen statt Saeulen */
.steps-grid { grid-template-columns: 1fr; gap: var(--space-2); }

@media (min-width: 700px) {
  .steps-grid { grid-template-columns: 1fr; }
}

.steps-grid > li {
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 1.1rem;
  row-gap: 0.25rem;
  padding: 1.1rem 1.25rem;
}

.steps-grid > li .picto-step--art { grid-row: 1 / span 2; width: 58px; height: 58px; }
.steps-grid > li strong { align-self: center; }

/* Piktogrammkachel der Leistungen: gleiche Flaeche wie die Bildmotive */
.picto-tile--art { background: var(--kk-mist-050); border: 1px solid var(--kk-line); border-radius: 10px; }

/* ==========================================================================
   v8 – groesserer Index-Hero mit dunklem Auslauf,
        Einzelbild-Banner auf den Unterseiten
   ========================================================================== */

/* ---------- Index-Hero: massiver, mit Abdunklung nach unten ---------- */

.hero__inner {
  min-height: min(74vh, 660px);
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); max-width: 16ch; }
.hero__claim { font-size: clamp(1.25rem, 2vw, 1.65rem); }
.hero__sub { font-size: var(--fs-300); max-width: 46ch; }

/* Zweiter Verlauf: unten ins Navy auslaufend, damit der Hero satt abschliesst
   und der Uebergang zum Vertrauensband ruhig wirkt. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(22, 40, 63, 0) 0%,
    rgba(22, 40, 63, 0.30) 45%,
    rgba(22, 40, 63, 0.72) 100%
  );
}

/* Der helle Textverlauf bleibt darueber, damit die Headline lesbar bleibt */
.hero__media::after { z-index: 3; }

.hero__controls { bottom: var(--space-2); }

.hero__pause, .hero__dot {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
  .hero__inner { min-height: 0; }
  .hero__media::before { height: 55%; }
}

/* ---------- Unterseiten: ein Bild, flacher als der Index-Hero ---------- */

.pagehead--photo { position: relative; }

.pagehead--photo .pagehead__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.pagehead--photo .pagehead__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

/* Abdunklung: links kraeftig fuer den Text, unten auslaufend */
.pagehead--photo .pagehead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(22, 40, 63, 0.92) 0%, rgba(22, 40, 63, 0.78) 38%, rgba(22, 40, 63, 0.42) 68%, rgba(22, 40, 63, 0.28) 100%),
    linear-gradient(180deg, rgba(22, 40, 63, 0.35) 0%, rgba(22, 40, 63, 0) 45%, rgba(22, 40, 63, 0.65) 100%);
}

.pagehead--photo .pagehead__inner {
  position: relative;
  z-index: 2;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-3);
}

/* Das grosse K-Wasserzeichen entfaellt, wo ein Foto liegt */
.pagehead--photo::after { content: none; }

@media (min-width: 900px) {
  .pagehead--photo .pagehead__inner { min-height: 300px; }
}

@media (max-width: 600px) {
  .pagehead--photo .pagehead__inner { min-height: 210px; }
  .pagehead--photo .pagehead__media::after {
    background: linear-gradient(180deg, rgba(22, 40, 63, 0.72) 0%, rgba(22, 40, 63, 0.82) 100%);
  }
}

/* Textebene ueber die beiden Hero-Verlaeufe legen */
.hero__inner { position: relative; z-index: 4; }

/* Reihenfolge der Hero-Ebenen: Bild < heller Textverlauf < dunkler Auslauf < Text */
.hero__media::after { z-index: 2; }

.hero__media::before {
  z-index: 3;
  height: 52%;
  background: linear-gradient(
    180deg,
    rgba(19, 34, 54, 0) 0%,
    rgba(19, 34, 54, 0.22) 38%,
    rgba(19, 34, 54, 0.62) 74%,
    rgba(19, 34, 54, 0.88) 100%
  );
}

/* Bedienelemente des Sliders auf dem dunklen Auslauf */
.hero__controls { z-index: 5; }

/* Bildausschnitt der Banner je Motivformat: Gesichter sollen im Bild bleiben */
.pagehead--photo .pagehead__media img { object-position: center 45%; }
.pagehead--portrait .pagehead__media img { object-position: center 20%; }
.pagehead--motiv .pagehead__media img { object-position: center 32%; }

/* ==========================================================================
   v9 – Fachbeitrag, Anfahrtsskizze, Portalerklaerung, Abspann
   ========================================================================== */

/* ---------- Fachbeitrag Digitalisierung ---------- */

.digi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 900px) {
  .digi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .digi-grid > .digi-article:first-child { grid-column: 1 / -1; }
}

.digi-article h3 {
  font-size: var(--fs-400);
  margin: 0 0 0.6rem;
}

.digi-article p { color: var(--kk-ink-soft); }
.digi-article p:last-child { margin-bottom: 0; }
.digi-article strong { color: var(--kk-navy-900); }

.digi-source {
  font-size: var(--fs-100);
  color: var(--kk-ink-soft);
  border-top: 1px solid var(--kk-line);
  padding-top: 0.7rem;
  margin-top: 1rem;
}

.digi-steps {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  color: var(--kk-ink-soft);
  display: grid;
  gap: 0.5rem;
}

.digi-steps strong { color: var(--kk-navy-900); }

.digi-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-100);
  color: var(--kk-ink-soft);
}

/* ---------- Anfahrtsskizze ---------- */

.anfahrt { margin: 0; }

.anfahrt__img {
  width: 100%;
  height: auto;
  border: 1px solid var(--kk-line);
  border-radius: 10px;
  background: var(--kk-mist-050);
}

.anfahrt__caption {
  margin-top: 0.7rem;
  font-size: var(--fs-100);
  color: var(--kk-ink-soft);
}

/* ---------- Erklaerung Mandantenbereich ---------- */

.portal-explain {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 760px) { .portal-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .portal-explain { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.portal-explain h3 { font-size: var(--fs-300); margin: 0 0 0.6rem; }
.portal-explain p { color: var(--kk-ink-soft); }
.portal-explain p:last-child { margin-bottom: 0; }
.portal-explain strong { color: var(--kk-navy-900); }

.portal-explain__hint {
  font-size: var(--fs-100);
  border-top: 1px solid var(--kk-line);
  padding-top: 0.6rem;
  margin-top: 0.9rem;
}

.portal-security {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--kk-mist-050);
  border: 1px solid var(--kk-line);
  border-left: 4px solid var(--kk-azure-500);
  border-radius: 10px;
}

.portal-security h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-400);
  margin: 0 0 0.75rem;
}

.portal-security h3 .icon { color: var(--kk-azure-500); width: 1.6em; height: 1.6em; }
.portal-security p { color: var(--kk-ink-soft); max-width: 75ch; }
.portal-security strong { color: var(--kk-navy-900); }
.portal-security__note { font-size: var(--fs-100); margin-bottom: 0; }

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: 78ch; }
.rechtstext h2 { font-size: var(--fs-400); margin: var(--space-3) 0 0.6rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext h3 { font-size: var(--fs-300); margin: var(--space-2) 0 0.4rem; }
.rechtstext p, .rechtstext li { color: var(--kk-ink-soft); }
.rechtstext ul { padding-left: 1.15rem; display: grid; gap: 0.3rem; margin: 0 0 1rem; }

.rechtstext__hinweis {
  background: var(--kk-mist-050);
  border: 1px solid var(--kk-line);
  border-left: 4px solid var(--kk-azure-500);
  border-radius: 8px;
  padding: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-100);
}

.rechtstext__hinweis strong { color: var(--kk-navy-900); }

/* Offene Stellen im Rechtstext deutlich sichtbar, aber kontraststark */
.rechtsluecke {
  background: #fdf3d3;
  color: #4a3a08;
  padding: 0.05em 0.3em;
  border-radius: 3px;
  box-decoration-break: clone;
}

/* ---------- Abspann ---------- */

.site-credits {
  background: #0f1e30;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-2);
}

.site-credits__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-credits__logo {
  width: 150px;
  height: auto;
  background: #fff;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}

.site-credits__text {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: var(--fs-100);
  color: rgba(255, 255, 255, 0.72);
}

.site-credits__heart {
  display: inline-flex;
  color: #e2544e;
}

.site-credits__heart svg { width: 16px; height: 16px; }

.site-credits__link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-credits__link:hover { color: var(--kk-cyan-300); }

@media (max-width: 600px) {
  .site-credits__inner { justify-content: center; text-align: center; }
}

/* Lange Komposita duerfen die Spalte nicht sprengen (z. B. "Mandantenbereich") */
.split-head > * { min-width: 0; }
.section-title, .pagehead h1, .hero h1, .digi-article h3, .portal-explain h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ==========================================================================
   v10 – Aktionsflaechen als Pill mit Verlauf und Schattierung
   Angelehnt an die Rundungen und die Cyan-Familie der Bildmarke.
   ========================================================================== */

.btn {
  border-radius: 999px;
  padding: 0.8rem 1.6rem;
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease,
              border-color 220ms ease, color 220ms ease;
}

/* Primaeraktion: Cyanblau-Verlauf, Navy-Text (Kontrast mindestens 4,75:1) */
.btn--primary {
  background: linear-gradient(135deg, var(--kk-fresh-cyan) 0%, var(--kk-fresh-blau) 100%);
  color: var(--kk-navy-900);
  border-color: transparent;
  box-shadow: var(--schatten-pill);
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--kk-fresh-cyan-hell) 0%, var(--kk-fresh-blau-hell) 100%);
  color: var(--kk-navy-900);
  box-shadow: var(--schatten-pill-hover);
  transform: translateY(-1px);
}

.btn--primary:active { transform: translateY(0); box-shadow: var(--schatten-pill); }

/* Sekundaeraktion: weisse Pill mit Cyan-Kontur */
.btn--outline {
  background: #fff;
  color: var(--kk-navy-900);
  border-color: var(--kk-fresh-cyan);
  box-shadow: 0 3px 10px rgba(22, 40, 63, 0.08);
}

.btn--outline:hover {
  background: linear-gradient(135deg, #eafaff 0%, #dff2fc 100%);
  border-color: var(--kk-fresh-blau);
  box-shadow: 0 8px 20px rgba(22, 40, 63, 0.12);
  transform: translateY(-1px);
}

/* Auf dunklem Grund bleibt die helle Kontur, die Pillform gilt weiter */
.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
}

.btn--ghost-light:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}

/* Noch nicht freigegebene Ziele: erkennbar inaktiv, ohne Verlauf */
.btn[aria-disabled="true"] {
  background: var(--kk-mist-200);
  color: var(--kk-ink-soft);
  border-color: var(--kk-mist-200);
  box-shadow: none;
  opacity: 1;
}

.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* Kopfzeile: etwas kompakter, damit die Pillform nicht zu breit wirkt */
.site-header__actions .btn { padding: 0.65rem 1.25rem; }

/* Bedienelemente der Servicespalte und des Sliders in dieselbe Rundung bringen */
.utility-rail { border-radius: 0 999px 999px 0; padding: 0.45rem 0.4rem; }
.utility-rail__btn { border-radius: 999px; }

.hero__pause, .hero__dot {
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(22, 40, 63, 0.18);
}

.hero__dot[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--kk-fresh-cyan) 0%, var(--kk-fresh-blau) 100%);
  border-color: transparent;
}

.hero__dot[aria-pressed="true"]::after { background: var(--kk-navy-900); border-color: var(--kk-navy-900); }

/* Formularfelder folgen der weicheren Formensprache */
.site-search__field { border-radius: 999px; padding-inline: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover { transition: none; transform: none; }
}

/* ---------- Stopper (vier Formen, gleiche Farbfamilie wie die Pills) ----------
   Einsatzregel: hoechstens ein Stopper pro Bildschirmseite, nie zwei Formen
   nebeneinander, keine Stopper im Hero. */

/* A - Facette: greift die angeschnittene Schraege des K aus der Bildmarke auf */
.stopper-facette {
  display: inline-block;
  padding: 0.8rem 1.6rem 0.8rem 1.15rem;
  background: linear-gradient(135deg, var(--kk-fresh-cyan) 0%, var(--kk-fresh-blau) 100%);
  color: var(--kk-navy-900);
  font-weight: 700;
  font-size: 0.88rem;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  filter: drop-shadow(0 6px 14px rgba(13, 155, 216, 0.28));
}

.stopper-facette small {
  display: block;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* B - Kreis: fuer kurze Zahlenaussagen */
.stopper-kreis {
  width: 128px; height: 128px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kk-fresh-cyan) 0%, var(--kk-fresh-blau) 100%);
  color: var(--kk-navy-900);
  display: grid; place-content: center; text-align: center;
  rotate: -7deg;
  box-shadow: 0 10px 26px rgba(13, 155, 216, 0.30);
}

.stopper-kreis strong { display: block; font-size: 1.5rem; line-height: 1; letter-spacing: -0.02em; }
.stopper-kreis span { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.25rem; }

/* C - Pill: dezenter Hinweis im Fliesstext */
.stopper-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #fff;
  color: var(--kk-navy-900);
  border: 1.5px solid var(--kk-fresh-cyan);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 4px 12px rgba(13, 155, 216, 0.16);
}

.stopper-pill::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--kk-fresh-cyan), var(--kk-fresh-blau));
}

/* D - Eckband: auf Bildern und Karten */
.stopper-eckband-huelle { position: relative; overflow: hidden; isolation: isolate; }

.stopper-eckband {
  position: absolute; top: 18px; right: -52px; rotate: 38deg; z-index: 3;
  max-width: none; pointer-events: none;
  background: linear-gradient(135deg, var(--kk-fresh-cyan) 0%, var(--kk-fresh-blau) 100%);
  color: var(--kk-navy-900);
  padding: 0.35rem 3.2rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   v11 – Logoschraege als Bildkante, Schattierung, Logo-Wackler
   ========================================================================== */

/* Die Bildmarke schneidet mit rund 26 Grad zur Waagerechten an. Auf breiten
   Fotos waere das viel zu steil (auf 1400 px Breite ein Versatz von 680 px),
   deshalb ist die Schraege als fester Hoehenversatz umgesetzt: gleiche
   Richtung und Anmutung wie im Logo, aber ruhig genug fuer grosse Flaechen. */
:root {
  --schraege: 46px;        /* Versatz fuer breite Flaechen */
  --schraege-klein: 26px;  /* Versatz fuer Karten und schmale Bilder */
}

/* Schatten liegt auf der Huelle, weil clip-path den box-shadow abschneidet */
.foto-schraege {
  display: block;
  filter: drop-shadow(0 14px 30px rgba(22, 40, 63, 0.20));
}

.foto-schraege img,
.foto-schraege picture { display: block; width: 100%; }

/* unten angeschnitten: links tiefer, nach rechts ansteigend - wie das K */
.foto-schraege--unten img {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
}

/* oben angeschnitten */
.foto-schraege--oben img {
  clip-path: polygon(0 var(--schraege), 100% 0, 100% 100%, 0 100%);
}

/* oben und unten */
.foto-schraege--beide img {
  clip-path: polygon(
    0 var(--schraege), 100% 0,
    100% calc(100% - var(--schraege)), 0 100%
  );
}

.foto-schraege--klein { --schraege: var(--schraege-klein); }

@media (max-width: 600px) {
  :root { --schraege: 26px; --schraege-klein: 16px; }
}

/* Bannerbilder: unten angeschnitten, der Text bleibt darueber unberuehrt */
.pagehead--photo .pagehead__media,
.pagehead--photo .pagehead__media::after {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schraege)), 0 100%);
}

.pagehead--photo { background: transparent; }

/* Logo im Kopf: bei Zeigerkontakt ein sehr kleiner Wackler */
.site-header__logo { display: inline-block; transform-origin: 22% 60%; }

.site-header__logo:hover img,
.site-header__logo:focus-visible img {
  animation: kk-logo-wackeln 620ms ease-in-out;
}

@keyframes kk-logo-wackeln {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-1.6deg); }
  45%  { transform: rotate(1.2deg); }
  70%  { transform: rotate(-0.6deg); }
  88%  { transform: rotate(0.3deg); }
  100% { transform: rotate(0deg); }
}

.site-header__logo img { transform-origin: 18% 65%; }

@media (prefers-reduced-motion: reduce) {
  .site-header__logo:hover img,
  .site-header__logo:focus-visible img { animation: none; }
}