/* ══════════════════════════════════════════════════════════════════
   AICONIC STUDIO · v4 „Nordlicht“ (Entwurf 2026-09-16)
   Dunkle, farbige Slabs mit runden Ecken auf Papier, Glaskarten,
   eine schwebende Leiste. Inspiriert von samapartner.ch, nicht kopiert.
   ══════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/inter-var-latin.woff2") format("woff2"); }
:root {
  --navy: #0a1428; --nacht: #060c1a;
  --tief: #0f1f5c; --royal: #2f5bff; --himmel: #3a8dff; --cyan: #3ad7f2;
  --papier: #f3f5fa; --weiss: #fff; --tinte: #0a1428; --tinte-weich: #4a5568;
  --r-panel: 2rem; --r-karte: 1.4rem; --gutter: clamp(1.25rem, 4vw, 3.5rem); --rand: 0.75rem;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; background: var(--papier); color: var(--tinte); font-family: var(--font); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; } .skip:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .5rem 1rem; }

/* ── Rahmen, Zunge und Glas-Pille ──────────────────────────────── */
.rahmen { position: fixed; inset: var(--rand); z-index: 40; pointer-events: none; border-radius: var(--r-panel); box-shadow: 0 0 0 100vmax var(--papier); }
/* Die Zunge: ein weisser Reiter, der aus dem Rahmen hängt, mit weichen Kehlen. Darin die dunkle Pille (Ramins Wahl, 16.09.). */
.zunge {
  position: fixed; top: 0; left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 50;
  padding: calc(var(--rand) + 0.4rem) 0.9rem 0.6rem;
  background: var(--papier);
  border-radius: 0 0 2rem 2rem;
  --fillet: 1.6rem;
}
/* Die Kehlen greifen 1px in den Reiter hinein: an einer fraktionalen Kante blieb sonst eine Naht, durch die der Grund schien */
.zunge::before, .zunge::after { content: ""; position: absolute; top: var(--rand); width: calc(var(--fillet) + 1px); height: var(--fillet); pointer-events: none; }
.zunge::before { right: calc(100% - 1px); background: radial-gradient(circle at 0 100%, transparent calc(var(--fillet) - 0.5px), var(--papier) var(--fillet)); }
.zunge::after { left: calc(100% - 1px); background: radial-gradient(circle at 100% 100%, transparent calc(var(--fillet) - 0.5px), var(--papier) var(--fillet)); }
.pille {
  position: relative;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: nowrap; white-space: nowrap;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  border-radius: 999px; color: #fff;
  background: var(--navy); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 30px rgba(6, 12, 26, 0.25);
  max-width: calc(100vw - 4rem);
}
.pille__logo img { height: 1.15rem; width: auto; }
.pille__nav { display: flex; align-items: center; gap: 1.4rem; font-size: 0.92rem; font-weight: 500; }
.pille__nav a { text-decoration: none; opacity: 0.85; transition: opacity 160ms; } .pille__nav a:hover { opacity: 1; }
.pille__cta { opacity: 1 !important; background: #fff; color: var(--navy); padding: 0.6rem 1.1rem; border-radius: 999px; font-weight: 600; }
.pille__menu { display: none; background: #fff; color: var(--navy); border: 0; border-radius: 999px; padding: 0.6rem 1rem; font: inherit; font-weight: 600; cursor: pointer; }
.menu { position: fixed; top: 5.6rem; left: 50%; translate: -50% 0; width: min(24rem, calc(100vw - 2rem)); z-index: 49; background: #fff; color: var(--navy); border: 1px solid rgba(10, 20, 40, 0.08); border-radius: 1.4rem; padding: 1rem; display: grid; gap: 0.25rem; box-shadow: 0 20px 60px rgba(6, 12, 26, 0.25); }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 0.25rem; }
.menu a { padding: 0.9rem 1rem; border-radius: 0.9rem; text-decoration: none; font-weight: 600; } .menu a:hover { background: rgba(10, 20, 40, 0.05); }

/* Unter 1200 px passen die vier Wege nicht mehr in die Pille: dann Logo, Knopf und Menü */
@media (max-width: 1199px) {
  .pille__nav { display: none; }
  .pille__menu { display: inline-block; }
  .pille { gap: 0.8rem; }
}

/* ── Slabs ─────────────────────────────────────────────────────── */
/* overflow: clip statt hidden, damit die Slabs keinen Scroll-Container bilden (sticky im Kartenstapel) */
.panel { position: relative; margin: var(--rand); border-radius: var(--r-panel); overflow: clip; padding: clamp(4rem, 8vw, 7rem) var(--gutter); isolation: isolate; }
/* Der gepinnte Akt trägt keinen Rand, den hält seine Hülle, sonst rechnet ScrollTrigger den Rand in die Breite */
.pin-huelle { padding: var(--rand); } .pin-huelle > .panel { margin: 0; }
.panel--nacht { background: linear-gradient(160deg, #0a1428 0%, #0f1f5c 50%, #0a1428 100%); color: #fff; }
.panel--papier { background: #fff; }
.kopf { max-width: 44rem; }
.kopf--hell { color: #fff; }
.vorspann { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--royal); margin-bottom: 1rem; }
.kopf--hell .vorspann { color: var(--cyan); }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.kopf__sub { margin-top: 1.2rem; font-size: 1.1rem; line-height: 1.55; color: var(--tinte-weich); max-width: 38rem; text-wrap: pretty; }
.kopf--hell .kopf__sub { color: rgba(255, 255, 255, 0.76); }

/* ── Nordlicht ─────────────────────────────────────────────────── */
.aurora { position: absolute; inset: -3rem; z-index: -1; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; opacity: 0.85; }
.blob--cyan { width: 62vmax; height: 46vmax; right: -18vmax; bottom: -22vmax; background: radial-gradient(closest-side, var(--cyan), rgba(58, 215, 242, 0)); animation: treiben-a 26s ease-in-out infinite alternate; }
.blob--himmel { width: 54vmax; height: 44vmax; left: -16vmax; top: -18vmax; background: radial-gradient(closest-side, var(--himmel), rgba(58, 141, 255, 0)); animation: treiben-b 32s ease-in-out infinite alternate; }
.blob--royal { width: 50vmax; height: 40vmax; left: 30%; top: -20vmax; background: radial-gradient(closest-side, var(--royal), rgba(47, 91, 255, 0)); animation: treiben-c 22s ease-in-out infinite alternate; }
.aurora--leise .blob { opacity: 0.55; }
.korn { position: absolute; inset: 0; opacity: 0.35; mix-blend-mode: screen; background-size: 220px 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes treiben-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vmax, -6vmax) scale(1.12); } }
@keyframes treiben-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(10vmax, 8vmax) scale(1.08); } }
@keyframes treiben-c { from { transform: translate(0, 0) scale(1); } to { transform: translate(-6vmax, 10vmax) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .blob, .puls { animation: none; }
  .zunge, .pille, .knopf, .kachel__link span, .faq__eintrag summary::after { transition: none; }
}

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { min-height: calc(100vh - 2 * var(--rand)); min-height: calc(100svh - 2 * var(--rand)); display: flex; align-items: center; padding-top: 7rem; padding-bottom: 4rem; }
.hero__inhalt { width: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__titel { font-size: clamp(2.7rem, 1.6rem + 4.4vw, 6rem); font-weight: 800; line-height: 1.0; letter-spacing: -0.045em; text-wrap: balance; max-width: 13ch; }
.hero__sub { margin-top: 1.5rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.55; color: rgba(255, 255, 255, 0.78); max-width: 34rem; text-wrap: pretty; }
.hero__titel .wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__titel .wort__i { display: inline-block; will-change: transform; }
.hero__ctas { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.knopf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1rem; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms; }
.knopf:hover { transform: translateY(-1px); }
.knopf--weiss { background: #fff; color: var(--navy); box-shadow: 0 10px 30px rgba(6, 12, 26, 0.25); }
.knopf--weiss:hover { background: #eef3ff; }
.knopf--glas { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf--glas:hover { background: rgba(255, 255, 255, 0.16); }

/* ── Glaskarte: der digitale Mitarbeiter bei der Arbeit ──────────── */
.glas { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-radius: var(--r-karte); box-shadow: 0 30px 80px rgba(6, 12, 26, 0.45); }
.hero__karte { padding: 1.4rem 1.5rem 1.5rem; max-width: 26rem; justify-self: end; transform: rotate(-1.5deg); }
.karte__kopf { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.karte__status { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.puls { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(58, 215, 242, 0.6); animation: puls 2.2s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(58, 215, 242, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(58, 215, 242, 0); } }
.feed { margin-top: 1.1rem; display: grid; gap: 0.25rem; }
.feed__zeile { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.55rem 0.6rem; border-radius: 0.8rem; }
.feed__zeile.is-aktiv { background: rgba(255, 255, 255, 0.08); }
.feed__zeile b { display: block; font-size: 0.95rem; font-weight: 600; }
.feed__zeile span:last-child { display: block; font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); }
.feed__punkt { width: 1.2rem; height: 1.2rem; margin-top: 0.1rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); display: grid; place-items: center; }
.is-fertig .feed__punkt { background: var(--cyan); border-color: var(--cyan); }
.is-fertig .feed__punkt::after { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #06202a; border-bottom: 2px solid #06202a; transform: translateY(-1px) rotate(-45deg); }
.is-aktiv .feed__punkt { border-color: var(--cyan); } .is-aktiv .feed__punkt::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cyan); }
.karte__fuss { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }

/* ── Leistungen ────────────────────────────────────────────────── */
/* Kartenstapel: jede Karte klebt oben, die nächste schiebt sich darüber (wie beim Vorbild) */
.karten { margin-top: 3rem; }
.kachel { position: sticky; top: 6.5rem; margin-bottom: 1rem; min-height: min(58vh, 32rem); padding: 2.2rem 2.4rem 2.4rem; border-radius: var(--r-karte); color: #fff; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "label bild" "titel bild" "text bild" "chips bild" "link bild"; column-gap: 2.5rem; align-content: start; overflow: hidden; isolation: isolate; box-shadow: 0 -10px 40px rgba(10, 20, 40, 0.18); will-change: transform; }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 100%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%); }
.kachel::before { content: attr(data-nr); position: absolute; right: 1.6rem; top: 0.4rem; z-index: -1; font-size: clamp(6rem, 14vw, 12rem); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: rgba(255, 255, 255, 0.1); pointer-events: none; }
.kachel__label { grid-area: label; }
.kachel h3 { grid-area: titel; }
.kachel > p:not(.kachel__label) { grid-area: text; }
.kachel .chips { grid-area: chips; align-self: start; justify-self: start; margin-top: 1.4rem; }
.kachel .chips li { font-size: 0.86rem; padding: 0.5rem 0.9rem; }
.kachel__bild { grid-area: bild; align-self: center; justify-self: center; width: 100%; max-width: 20rem; pointer-events: none; }
.kachel__link { grid-area: link; }
/* Vier Karten, eine Familie: von tief nach hell, Navy bis Cyan */
.kachel--tief { background: linear-gradient(135deg, #0b1740, #16307f 55%, #2547c8); }
.kachel--royal { background: linear-gradient(135deg, #1a34b8, #2f5bff 55%, #3f7dff); }
.kachel--himmel { background: linear-gradient(135deg, #1b5fd0, #2f8bff 55%, #5cb0ff); }
.kachel--cyan { background: linear-gradient(135deg, #0b6f8f, #12a6c8 55%, #3ad7f2); }
.kachel__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; opacity: 0.75; }
.kachel h3 { margin-top: 1rem; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.kachel > p { margin-top: 0.9rem; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 30rem; text-wrap: pretty; }

/* Die vier Bilder: kleine Oberflächen aus Glas, keine Fotos, keine erfundenen Zahlen */
.mini { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 1rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 60px rgba(6, 12, 26, 0.35); color: #fff; font-size: 0.74rem; }
.mini__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-weight: 600; }
.mini__tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); }
.mini__zeile { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; }
.mini__balken { height: 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.mini__balken i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), var(--cyan)); }
.mini__fuss { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem 0.7rem; border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); }
.mini__ok { width: 1rem; height: 1rem; border-radius: 50%; background: var(--cyan); position: relative; flex: none; }
.mini__ok::after { content: ""; position: absolute; left: 0.28rem; top: 0.22rem; width: 0.4rem; height: 0.22rem; border-left: 2px solid #06202a; border-bottom: 2px solid #06202a; transform: rotate(-45deg); }
.mini__punkt { width: 1rem; height: 1rem; border-radius: 50%; border: 1.5px solid var(--cyan); position: relative; flex: none; }
.mini__punkt::after { content: ""; position: absolute; inset: 0.25rem; border-radius: 50%; background: var(--cyan); }
.mini__eintrag { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; } .mini__eintrag b { display: block; font-size: 0.78rem; } .mini__eintrag span { display: block; color: rgba(255, 255, 255, 0.65); }
/* Telefon */
.phone { width: 9.2rem; height: 17rem; margin: 0 auto; border-radius: 2rem; border: 6px solid rgba(255, 255, 255, 0.28); background: #0a1428; box-shadow: 0 24px 60px rgba(6, 12, 26, 0.45); position: relative; overflow: hidden; }
.phone::before { content: ""; position: absolute; left: 50%; top: 0.45rem; width: 3rem; height: 0.5rem; margin-left: -1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.28); }
.phone__screen { position: absolute; inset: 0; padding: 1.6rem 0.8rem 0.8rem; background: linear-gradient(170deg, #0f1f5c, #2f5bff 70%, #3ad7f2); display: flex; flex-direction: column; gap: 0.5rem; }
.phone__kopf { height: 0.6rem; width: 55%; border-radius: 999px; background: rgba(255, 255, 255, 0.9); }
.phone__karte { border-radius: 0.7rem; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.25); padding: 0.55rem; display: grid; gap: 0.35rem; }
.phone__karte i { display: block; height: 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.55); } .phone__karte i:last-child { width: 60%; }
.phone__karte--gross { flex: 1; }
.phone__nav { margin-top: auto; display: flex; justify-content: space-around; padding-top: 0.4rem; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.phone__nav i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.55); } .phone__nav i:first-child { background: #fff; }
/* Schichten */
.schichten { display: grid; gap: 0.55rem; padding: 0.4rem 0; }
.schicht { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.24); font-weight: 600; font-size: 0.82rem; box-shadow: 0 14px 34px rgba(6, 12, 26, 0.3); }
.schicht span { font-weight: 500; font-size: 0.72rem; color: rgba(255, 255, 255, 0.75); }
.schicht:nth-child(1) { margin-inline: 0 2.2rem; } .schicht:nth-child(2) { margin-inline: 1.1rem 1.1rem; } .schicht:nth-child(3) { margin-inline: 2.2rem 0; background: rgba(255, 255, 255, 0.2); }
.chips { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li { font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.2); }
.chips--hell li { background: rgba(255, 255, 255, 0.08); }
.kachel__link { margin-top: auto; padding-top: 1.6rem; font-weight: 600; text-decoration: none; align-self: end; }
.kachel__link span { display: inline-block; transition: transform 200ms var(--ease); } .kachel:hover .kachel__link span { transform: translateX(4px); }

/* ── Ablauf ────────────────────────────────────────────────────── */
/* Die Linie läuft knapp über den Oberkanten der Karten, die Zahlen sitzen auf der Kante und decken sie */
.stationen-wrap { position: relative; margin-top: 3.4rem; padding-top: 1.3rem; }
.stationen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
/* Drei Stücke, jedes von Kreisrand zu Kreisrand, damit die Linie nie hinter einer Zahl liegt, auch nicht während die Station einblendet */
.stationen__linie { position: absolute; top: calc(1.3rem - 2px); height: 2px; background: linear-gradient(90deg, var(--royal), var(--cyan)); opacity: 0.9; transform-origin: left center; z-index: 0;
  --spalte: calc((100% - 3rem) / 4); --kreis: 1.55rem;
  left: calc(var(--spalte) / 2 + var(--i) * (var(--spalte) + 1rem) + var(--kreis));
  width: calc(var(--spalte) + 1rem - 2 * var(--kreis)); }
.station { position: relative; z-index: 1; padding: 2.1rem 1.4rem 1.6rem; box-shadow: none; background: rgba(255, 255, 255, 0.06); text-align: center; }
.station__nr { position: absolute; top: -1.2rem; left: 50%; margin-left: -1.2rem; z-index: 2; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--royal), var(--cyan)); box-shadow: 0 0 0 5px #0d1b4f, 0 8px 24px rgba(58, 215, 242, 0.35); }
.station h3 { margin-top: 0.4rem; font-size: 1.2rem; font-weight: 700; }
.station p { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
.beweis { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.beweis__label { font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.beweis .chips { margin-top: 0; }
.textlink { margin-left: auto; font-weight: 600; text-decoration: none; color: var(--cyan); }

/* ── Kennst du das ─────────────────────────────────────────────── */
.panel--tint { background: #eaf0ff; }
.faelle { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fall { position: relative; padding: 1.7rem 1.5rem 1.6rem; border-radius: var(--r-karte); background: #fff; border: 1px solid rgba(10, 20, 40, 0.08); box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06); display: flex; flex-direction: column; overflow: hidden; }
.fall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.fall--tief::before { background: linear-gradient(90deg, #0b1740, #2547c8); } .fall--royal::before { background: linear-gradient(90deg, #1a34b8, #3f7dff); } .fall--himmel::before { background: linear-gradient(90deg, #1b5fd0, #5cb0ff); } .fall--cyan::before { background: linear-gradient(90deg, #0b6f8f, #3ad7f2); }
.fall__nr { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; color: var(--tinte-weich); }
.fall h3 { margin-top: 0.6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }
.fall > p:not(.fall__nr):not(.fall__beleg) { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.55; color: var(--tinte-weich); text-wrap: pretty; }
.fall__beleg { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(10, 20, 40, 0.1); font-size: 0.92rem; font-weight: 600; line-height: 1.45; }
.fall__beleg span { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--royal); }

/* ── Rechner ───────────────────────────────────────────────────── */
.roi { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; padding: 2rem; box-shadow: none; }
.roi__feld + .roi__feld { margin-top: 1.6rem; }
.roi__zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 600; }
.roi__zeile output { font-size: 1.4rem; font-weight: 800; color: var(--cyan); }
.roi input[type="range"] { width: 100%; margin-top: 0.7rem; accent-color: var(--cyan); }
.roi__details { margin-top: 1.6rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }
.roi__details summary { cursor: pointer; font-weight: 600; color: #fff; }
.roi__details p { margin-top: 0.6rem; line-height: 1.5; }
.roi__zahlen { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.roi__betrag { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.roi__einheit { font-size: 0.45em; font-weight: 600; color: var(--cyan); margin-right: 0.2em; }
.roi__cap { margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.roi__zurueck { margin-top: 1.6rem; font-size: 1.15rem; line-height: 1.45; } .roi__zurueck strong { color: var(--cyan); }
.roi__note { margin-top: 0.8rem; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }
.roi__cta { margin-top: 1.6rem; }

/* ── Der Weg ───────────────────────────────────────────────────── */
.schritte-wrap { position: relative; margin-top: 3rem; padding-top: 1.8rem; }
.schritte__linie { position: absolute; left: 12.5%; right: 12.5%; top: 0.45rem; height: 2px; background: linear-gradient(90deg, var(--tief), var(--cyan)); transform-origin: left center; }
.schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.schritt::before { content: ""; position: absolute; left: 50%; top: -1.8rem; width: 0.9rem; height: 0.9rem; margin-left: -0.45rem; border-radius: 50%; background: #fff; border: 2px solid var(--royal); }
.schritt { position: relative; padding: 1.7rem 1.5rem 1.6rem; border-radius: var(--r-karte); background: var(--papier); border: 1px solid rgba(10, 20, 40, 0.06); display: flex; flex-direction: column; }
.schritt__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal); }
.schritt h3 { margin-top: 0.6rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.schritt__preis { margin-top: 0.4rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; } .schritt__mt { font-size: 0.55em; font-weight: 600; color: var(--tinte-weich); }
.schritt__text { margin-top: 0.8rem; font-size: 0.93rem; line-height: 1.55; color: var(--tinte-weich); text-wrap: pretty; } .schritt__text a { color: var(--royal); }
.schritt .textlink { margin: auto 0 0; padding-top: 1.2rem; }
.textlink--navy { color: var(--royal); }

/* ── Wer dahinter steht ────────────────────────────────────────── */
.ueber { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ueber__bild { margin: 0; border-radius: var(--r-karte); overflow: hidden; box-shadow: 0 30px 60px rgba(10, 20, 40, 0.18); max-width: 26rem; }
.ueber__bild img { width: 100%; height: auto; }
.ueber__text p:not(.vorspann) { margin-top: 1.1rem; font-size: 1.05rem; line-height: 1.6; color: var(--tinte-weich); text-wrap: pretty; max-width: 40rem; }
.ueber__text h2 + p { margin-top: 1.4rem; }
.ueber__wichtig { color: var(--tinte) !important; font-weight: 600; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.faq__liste { margin-top: 2.5rem; max-width: 52rem; border-top: 1px solid rgba(10, 20, 40, 0.12); }
.faq__eintrag { border-bottom: 1px solid rgba(10, 20, 40, 0.1); }
.faq__eintrag summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; font-size: 1.05rem; font-weight: 600; }
.faq__eintrag summary::-webkit-details-marker { display: none; }
.faq__eintrag summary::after { content: ""; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(10, 20, 40, 0.2); background: linear-gradient(currentColor, currentColor) center / 0.7rem 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 0.7rem no-repeat; transition: transform 200ms var(--ease); }
.faq__eintrag[open] summary::after { transform: rotate(45deg); }
.faq__eintrag p { padding: 0 0 1.3rem; max-width: 46rem; color: var(--tinte-weich); line-height: 1.6; text-wrap: pretty; }
.faq__mehr { margin-top: 1.6rem; color: var(--tinte-weich); } .faq__mehr a { color: var(--royal); font-weight: 600; }

/* ── Kontakt ───────────────────────────────────────────────────── */
.kontakt__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.kontakt__text { color: #fff; }
.kontakt__text .vorspann { color: var(--cyan); }
.kontakt__text .kopf__sub { color: rgba(255, 255, 255, 0.76); }
.kontakt__label { margin-top: 2rem; font-weight: 700; }
.kontakt__liste { margin-top: 0.6rem; display: grid; gap: 0.5rem; color: rgba(255, 255, 255, 0.82); }
.kontakt__liste li { padding-left: 1.2rem; position: relative; } .kontakt__liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cyan); }
.kontakt__hinweis { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 32rem; }
.kontakt__text .knopf { margin-top: 1.8rem; }
.kontakt__klein { margin-top: 0.8rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); }
.formular { padding: 1.8rem; color: #fff; box-shadow: none; }
.formular__pflicht { font-size: 0.82rem; color: rgba(255, 255, 255, 0.62); }
.formular__zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feld { margin-top: 1rem; display: grid; gap: 0.4rem; }
.feld label { font-size: 0.9rem; font-weight: 600; }
.feld input, .feld select, .feld textarea { width: 100%; padding: 0.85rem 1rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #fff; font: inherit; }
.feld input::placeholder, .feld textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.feld select { color-scheme: dark; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.feld--falle { position: absolute; left: -9999px; }
.formular__senden { margin-top: 1.4rem; width: 100%; justify-content: center; border: 0; cursor: pointer; }
.formular__note { margin-top: 0.8rem; font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); text-align: center; }
.formular__erfolg { padding: 2rem; color: #fff; font-weight: 600; }
.formular__erfolg[hidden] { display: none; }

/* ── Einblenden ────────────────────────────────────────────────── */
[data-in] { opacity: 1; transform: none; }
.js [data-in] { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
[data-in].is-da { opacity: 1; transform: none; }
.karten [data-in]:nth-child(2), .stationen [data-in]:nth-child(2) { transition-delay: 80ms; }
.karten [data-in]:nth-child(3), .stationen [data-in]:nth-child(3) { transition-delay: 160ms; }
.karten [data-in]:nth-child(4), .stationen [data-in]:nth-child(4) { transition-delay: 240ms; }
/* .js davor: sonst verliert die Regel gegen .js [data-in] und reduzierte Bewegung blendet trotzdem ein (gefunden 17.09.) */
@media (prefers-reduced-motion: reduce) { .js [data-in] { opacity: 1; transform: none; transition: none; } }

/* ── Fuss ──────────────────────────────────────────────────────── */
.fuss { padding: 3rem var(--gutter) 2.5rem; font-size: 0.9rem; color: var(--tinte-weich); }
.fuss__raster { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.fuss__marke img { height: 1.2rem; width: auto; } .fuss__marke p { margin-top: 1rem; max-width: 24rem; line-height: 1.5; } .fuss__klein { font-size: 0.8rem; }
.fuss__spalte { display: grid; gap: 0.45rem; align-content: start; } .fuss__spalte p { font-weight: 700; color: var(--tinte); margin-bottom: 0.3rem; } .fuss a { text-decoration: none; } .fuss a:hover { color: var(--royal); }
.fuss__copy { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(10, 20, 40, 0.1); font-size: 0.8rem; }

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --rand: 0.5rem; --r-panel: 1.4rem; }
  .zunge { padding: calc(var(--rand) + 0.3rem) 0.6rem 0.5rem; border-radius: 0 0 1.7rem 1.7rem; --fillet: 1.1rem; }
  .pille { gap: 0.8rem; padding-left: 1rem; }
  .hero { padding-top: 6rem; padding-bottom: 3rem; }
  .hero__inhalt { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero__titel { max-width: none; }
  .hero__karte { justify-self: stretch; max-width: none; transform: none; }
  .karten { grid-template-columns: 1fr; }
  .stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stationen::before { display: none; }
  .beweis { flex-direction: column; align-items: flex-start; }
  .textlink { margin-left: 0; }
  .faelle, .schritte { grid-template-columns: 1fr; }
  .kachel { top: 5.2rem; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "label" "titel" "text" "chips" "bild" "link"; padding: 1.6rem 1.4rem 1.8rem; }
  .kachel__bild { margin: 1.4rem auto 0.4rem; max-width: 16rem; }
  .phone { height: 13rem; width: 7.2rem; }
  .kachel .chips { margin-top: 1.2rem; }
  .kachel::before { font-size: 5rem; right: 1rem; top: 0.6rem; }
  .schritte-wrap { padding-top: 0; } .schritte__linie, .schritt::before { display: none; }
  .stationen__linie { display: none; }
  .stationen-wrap { padding-top: 1.2rem; }
  .roi { grid-template-columns: 1fr; padding: 1.4rem; gap: 1.8rem; }
  .ueber { grid-template-columns: 1fr; } .ueber__bild { max-width: 18rem; }
  .kontakt__raster { grid-template-columns: 1fr; }
  .formular { padding: 1.3rem; } .formular__zwei { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   UNTERSEITEN (seit 17.09.2026)
   Dieselben Slabs, Karten und Knöpfe wie die Startseite. Neu sind nur die
   Bausteine, die es dort nicht gibt: Seitenkopf mit Zusagen-Karte, Karten-
   Raster, Notizen, Anstoss, Pakete, Dashboard, Integrationen, Bestand,
   Detail-Fenster, Artikel und Rechtstexte.
   ══════════════════════════════════════════════════════════════════ */
.knopf--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 30px rgba(6, 12, 26, 0.18); }
.knopf--navy:hover { background: var(--tief); }
.knopf--rand { background: transparent; color: var(--navy); border: 1px solid rgba(10, 20, 40, 0.2); }
.knopf--rand:hover { background: rgba(10, 20, 40, 0.05); }
button.knopf { font-family: inherit; cursor: pointer; } button.knopf--weiss, button.knopf--navy { border: 0; }
.knopf:focus-visible, .tafel:focus-visible, .schicht:focus-visible, .agent__mehr:focus-visible, .produkt__tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.panel--papier .knopf:focus-visible, .panel--tint .knopf:focus-visible, .panel--papier .tafel:focus-visible, .panel--tint .agent__mehr:focus-visible, .panel--papier .produkt__tab:focus-visible { outline-color: var(--royal); }
.pille__nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.fuss a[aria-current="page"] { color: var(--tinte); font-weight: 600; }
.panel--kompakt { padding-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }

/* ── Seitenkopf ────────────────────────────────────────────────── */
.seitenkopf { padding-top: clamp(7.5rem, 11vw, 9.5rem); padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.seitenkopf--schmal .seitenkopf__raster { grid-template-columns: minmax(0, 1fr); max-width: 54rem; }
.seitenkopf .vorspann { color: var(--cyan); }
.seitenkopf .vorspann a { color: inherit; text-decoration: none; } .seitenkopf .vorspann a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.seitenkopf h1 { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.seitenkopf--schmal h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 4rem); }
.seitenkopf__sub { margin-top: 1.4rem; font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 42rem; text-wrap: pretty; }
.seitenkopf__sub strong { color: #fff; font-weight: 600; }
.seitenkopf__sub a { color: #fff; text-underline-offset: 0.2em; }
.seitenkopf__satz { margin-top: 1.4rem; font-weight: 600; color: #fff; }
.seitenkopf .hero__ctas { margin-top: 2rem; }
.seitenkopf__karte { padding: 1.4rem 1.5rem 1.5rem; }
.zusagen { margin-top: 1rem; display: grid; gap: 0.85rem; }
.zusagen li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 0.95rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.zusagen li strong { color: #fff; }
.haken { width: 1.2rem; height: 1.2rem; margin-top: 0.12rem; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; }
.haken::after { content: ""; width: 0.55rem; height: 0.3rem; border-left: 2px solid #06202a; border-bottom: 2px solid #06202a; transform: translateY(-1px) rotate(-45deg); }
.seitenkopf__karte .karte__fuss a { color: var(--cyan); font-weight: 600; text-decoration: none; white-space: nowrap; }
.seitenkopf__karte .schichten { margin-top: 1rem; }
a.schicht { color: #fff; text-decoration: none; transition: background-color 200ms, transform 200ms var(--ease); }
a.schicht:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(2px); }

/* ── Abschnittskopf, Raster, Karten ────────────────────────────── */
.kopf--breit { max-width: 56rem; }
.panel--nacht .kopf .vorspann { color: var(--cyan); }
.panel--nacht h2, .panel--nacht .kopf { color: #fff; }
.panel--nacht .kopf__sub { color: rgba(255, 255, 255, 0.76); }
.kopf__sub a { color: var(--royal); font-weight: 600; }
.panel--nacht .kopf__sub a { color: var(--cyan); }
.unterkopf { margin-top: clamp(3.5rem, 7vw, 5.5rem); max-width: 44rem; }
.unterkopf h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.raster { margin-top: 3rem; display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 1rem; }
.tafel { position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem 1.6rem; border-radius: var(--r-karte); background: var(--papier); border: 1px solid rgba(10, 20, 40, 0.06); color: var(--tinte); }
.panel--tint .tafel { background: #fff; border-color: rgba(10, 20, 40, 0.08); box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06); }
.panel--nacht .tafel { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.tafel__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal); }
.panel--nacht .tafel__label { color: var(--cyan); }
.tafel h3 { margin-top: 0.6rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.tafel__label + h3 { margin-top: 0.6rem; } .tafel > h3:first-child { margin-top: 0; }
.tafel__preis { margin-top: 0.5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.tafel__preis small { font-size: 0.55em; font-weight: 600; color: var(--tinte-weich); }
.panel--nacht .tafel__preis small { color: rgba(255, 255, 255, 0.6); }
.tafel__text { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.55; color: var(--tinte-weich); text-wrap: pretty; }
.panel--nacht .tafel__text { color: rgba(255, 255, 255, 0.74); }
.tafel a:not(.tafel__link) { color: var(--royal); } .panel--nacht .tafel a:not(.tafel__link) { color: var(--cyan); }
.tafel__liste { margin-top: 1rem; display: grid; gap: 0.45rem; }
.tafel__liste li { position: relative; padding-left: 1.1rem; font-size: 0.92rem; line-height: 1.45; color: var(--tinte-weich); }
.tafel__liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--royal); }
.panel--nacht .tafel__liste li { color: rgba(255, 255, 255, 0.8); } .panel--nacht .tafel__liste li::before { background: var(--cyan); }
.tafel__link { margin-top: auto; padding-top: 1.2rem; font-weight: 600; text-decoration: none; color: var(--royal); }
.panel--nacht .tafel__link { color: var(--cyan); }
.tafel__link span { display: inline-block; transition: transform 200ms var(--ease); }
a.tafel { text-decoration: none; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
a.tafel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(10, 20, 40, 0.12); }
a.tafel:hover .tafel__link span { transform: translateX(4px); }
.fall a { color: var(--royal); }
.panel--nacht .schritt { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: #fff; }
.panel--nacht .schritt::before { background: #0d1b4f; border-color: var(--cyan); }
.panel--nacht .schritt__text { color: rgba(255, 255, 255, 0.72); }
.panel--nacht .schritt__label { color: var(--cyan); }
.panel--nacht .schritt__mt { color: rgba(255, 255, 255, 0.6); }
.schritt__preis:first-child { margin-top: 0; }
.schritt .textlink + .textlink { padding-top: 0.4rem; }

/* ── Notizen, Randnotiz, Hinweise, Anstoss ─────────────────────── */
.notizen { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(var(--spalten, 2), minmax(0, 1fr)); gap: 1.4rem 2.5rem; }
.notizen p { padding-top: 1.1rem; border-top: 1px solid rgba(10, 20, 40, 0.12); font-size: 1rem; line-height: 1.62; color: var(--tinte-weich); text-wrap: pretty; }
.notizen p > strong:first-child { display: block; margin-bottom: 0.4rem; font-size: 1.08rem; line-height: 1.35; color: var(--tinte); letter-spacing: -0.01em; }
.notizen a { color: var(--royal); font-weight: 600; }
.panel--nacht .notizen p { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.74); }
.panel--nacht .notizen p > strong:first-child { color: #fff; }
.panel--nacht .notizen a { color: var(--cyan); }
.randnotiz { margin-top: 2rem; max-width: 52rem; padding: 1.1rem 1.4rem; border-left: 3px solid var(--royal); border-radius: 0 0.9rem 0.9rem 0; background: rgba(47, 91, 255, 0.06); font-size: 1rem; line-height: 1.62; color: var(--tinte-weich); text-wrap: pretty; }
.randnotiz strong { color: var(--tinte); }
.randnotiz a { color: var(--royal); font-weight: 600; }
.panel--nacht .randnotiz { border-left-color: var(--cyan); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.76); }
.panel--nacht .randnotiz strong { color: #fff; } .panel--nacht .randnotiz a { color: var(--cyan); }
.hinweise { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr)); gap: 1rem; }
.hinweis { padding: 1.2rem 1.3rem; border-radius: 1rem; border: 1px solid rgba(10, 20, 40, 0.1); font-size: 0.93rem; line-height: 1.55; color: var(--tinte-weich); }
.hinweis strong { color: var(--tinte); }
.hinweis a { color: var(--royal); font-weight: 600; text-decoration: none; white-space: nowrap; }
.panel--nacht .hinweis { border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.74); }
.panel--nacht .hinweis strong { color: #fff; } .panel--nacht .hinweis a { color: var(--cyan); }
.klein { margin-top: 1rem; font-size: 0.86rem; line-height: 1.5; color: var(--tinte-weich); max-width: 52rem; }
.klein + .klein { margin-top: 0.4rem; }
.panel--nacht .klein { color: rgba(255, 255, 255, 0.6); }
.anstoss { margin-top: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2.5rem; padding: 1.6rem 1.8rem; border-radius: var(--r-karte); background: #eaf0ff; }
.panel--tint .anstoss { background: #fff; box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06); }
.panel--nacht .anstoss { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); }
.anstoss p { max-width: 46rem; font-size: 1rem; line-height: 1.6; color: var(--tinte-weich); text-wrap: pretty; }
.anstoss p strong { color: var(--tinte); }
.panel--nacht .anstoss p { color: rgba(255, 255, 255, 0.76); } .panel--nacht .anstoss p strong { color: #fff; }
.anstoss .knopf { flex: none; }

/* ── Beispiele im Kartenstapel (Manufaktur) ────────────────────── */
.kachel__ergebnis { grid-area: chips; align-self: start; margin-top: 1.4rem; display: flex; gap: 0.5rem; font-size: 1rem; font-weight: 600; line-height: 1.45; color: #fff; max-width: 30rem; }
.kachel__ergebnis span { color: var(--cyan); }
.kachel--beispiel { min-height: min(40vh, 22rem); }
.fluss { display: grid; grid-template-columns: minmax(0, 1fr) 3.2rem minmax(0, 1fr); align-items: stretch; gap: 0.3rem; padding: 0.9rem; }
.fluss__spalte { display: grid; gap: 0.5rem; }
.fluss__spalte span { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.65rem; border-radius: 0.6rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); font-weight: 600; }
.fluss__spalte--rechts span { background: rgba(255, 255, 255, 0.2); }
.fluss__punkt { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--cyan); flex: none; }
.fluss svg { width: 100%; height: 100%; overflow: visible; }
.fluss path { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; vector-effect: non-scaling-stroke; }

/* ── Pakete zum Auswählen (Daten-Fundament) ────────────────────── */
.pakete { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.paket { position: relative; display: flex; flex-direction: column; padding: 1.8rem 1.6rem 1.5rem; border-radius: var(--r-karte); background: var(--papier); border: 1.5px solid rgba(10, 20, 40, 0.08); cursor: pointer; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.paket:hover { border-color: rgba(47, 91, 255, 0.45); }
.paket.is-gewaehlt { border-color: var(--royal); background: #eef3ff; box-shadow: 0 14px 36px rgba(47, 91, 255, 0.14); }
.paket__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paket:has(.paket__check:focus-visible) { outline: 2px solid var(--royal); outline-offset: 3px; }
.paket__marke { position: absolute; right: 1.4rem; top: 1.4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid rgba(10, 20, 40, 0.25); display: grid; place-items: center; background: #fff; }
.paket.is-gewaehlt .paket__marke { background: var(--royal); border-color: var(--royal); }
.paket.is-gewaehlt .paket__marke::after { content: ""; width: 0.6rem; height: 0.32rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.paket h3 { margin-top: 0.6rem; padding-right: 2.2rem; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.025em; }
.paket__text { margin-top: 0.8rem; font-size: 0.97rem; line-height: 1.58; color: var(--tinte-weich); text-wrap: pretty; }
.preisleiter { margin-top: 1rem; display: grid; }
.preisleiter li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid rgba(10, 20, 40, 0.08); font-size: 0.95rem; }
.preisleiter li span:last-child { font-weight: 700; color: var(--tinte); }
.paket__wahl { margin-top: auto; padding-top: 1.3rem; font-weight: 600; color: var(--royal); }
.paket__wahl-an { display: none; }
.paket.is-gewaehlt .paket__wahl-aus { display: none; } .paket.is-gewaehlt .paket__wahl-an { display: inline; }

/* ── Dashboard (Manufaktur) ────────────────────────────────────── */
.produkt { margin-top: 3rem; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 2rem; align-items: center; }
.produkt__tabs { display: grid; gap: 0.6rem; }
.produkt__tab { display: grid; gap: 0.3rem; text-align: left; padding: 1rem 1.2rem; border-radius: 1rem; border: 1px solid rgba(10, 20, 40, 0.1); background: #fff; color: var(--tinte); font: inherit; cursor: pointer; transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.produkt__tab:hover { border-color: rgba(47, 91, 255, 0.4); }
.produkt__tab.is-aktiv { border-color: var(--royal); background: #eef3ff; box-shadow: 0 10px 26px rgba(47, 91, 255, 0.12); }
.produkt__tab-titel { font-weight: 700; font-size: 1.02rem; }
.produkt__tab-text { font-size: 0.88rem; line-height: 1.4; color: var(--tinte-weich); }
.browser { border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid rgba(10, 20, 40, 0.1); box-shadow: 0 30px 70px rgba(10, 20, 40, 0.18); }
.browser__leiste { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; background: var(--papier); border-bottom: 1px solid rgba(10, 20, 40, 0.08); }
.browser__punkte { display: inline-flex; gap: 0.35rem; } .browser__punkte i { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: rgba(10, 20, 40, 0.16); }
.browser__url { font-size: 0.78rem; color: var(--tinte-weich); }
.browser__bild { position: relative; aspect-ratio: 1440 / 900; background: var(--papier); }
.browser__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity 450ms var(--ease); }
.browser__img.is-aktiv { opacity: 1; }
.produkt__hotspot { position: absolute; padding: 0; border: 0; border-radius: 0.35rem; background: transparent; cursor: pointer; }
.produkt__hotspot:hover, .produkt__hotspot:focus-visible { background: rgba(47, 91, 255, 0.16); box-shadow: 0 0 0 2px var(--royal); outline: none; }

/* ── Integrationen (Manufaktur) ────────────────────────────────── */
.integration { position: relative; width: 640px; max-width: 100%; aspect-ratio: 1100 / 620; margin: 3rem auto 0; }
.integration__linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.integration__kachel { position: absolute; z-index: 2; width: 12.5%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 22%; background: #fff; box-shadow: 0 16px 34px rgba(6, 12, 26, 0.45); }
.integration__kachel img { width: 56%; height: 56%; object-fit: contain; }
.integration__kachel img.integration__bexio { width: 64%; height: 64%; border-radius: 18%; }
.integration__mitte { position: absolute; left: 50%; top: 90%; z-index: 3; width: 12.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 8px rgba(58, 215, 242, 0.14), 0 0 50px rgba(58, 215, 242, 0.45); animation: mitte-puls 3.2s ease-in-out infinite; }
.integration__mitte svg { width: 62%; height: auto; }
@keyframes mitte-puls { 0%, 100% { box-shadow: 0 0 0 8px rgba(58, 215, 242, 0.14), 0 0 40px rgba(58, 215, 242, 0.35); } 50% { box-shadow: 0 0 0 14px rgba(58, 215, 242, 0.06), 0 0 70px rgba(58, 215, 242, 0.55); } }

/* ── Bestand (Suite) ───────────────────────────────────────────── */
.org { margin-top: 3rem; }
.org__kopf { max-width: 24rem; margin: 0 auto; padding: 1.3rem 1.5rem; border-radius: var(--r-karte); text-align: center; color: #fff; background: linear-gradient(135deg, #0b1740, #16307f 60%, #2547c8); box-shadow: 0 20px 50px rgba(10, 20, 40, 0.2); }
.org__rolle { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.org__name { margin-top: 0.4rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.org__versprechen { margin-top: 0.3rem; font-size: 0.92rem; color: rgba(255, 255, 255, 0.78); }
.org__stamm { width: 2px; height: 2.2rem; margin: 0 auto; background: linear-gradient(var(--royal), var(--cyan)); }
.org__abteilungen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: 1.6rem; }
.org__abteilungen::before { content: ""; position: absolute; top: 0; left: 12.5%; right: 12.5%; height: 2px; background: linear-gradient(90deg, var(--tief), var(--cyan)); }
.org__abteilung { position: relative; padding: 1.4rem 1.3rem; border-radius: var(--r-karte); background: var(--papier); border: 1px solid rgba(10, 20, 40, 0.06); }
.org__abteilung::before { content: ""; position: absolute; left: 50%; top: -1.6rem; width: 2px; height: 1.6rem; background: rgba(47, 91, 255, 0.5); }
.org__abteilung-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.org__zahl { margin-top: 0.2rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--royal); }
.org__liste { margin-top: 0.9rem; display: grid; gap: 0.4rem; }
.org__liste li { position: relative; padding-left: 1rem; font-size: 0.93rem; } .org__liste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--cyan); }
.abteilung + .abteilung { margin-top: clamp(3rem, 6vw, 4.5rem); }
.abteilung__kopf { max-width: 44rem; }
.abteilung__kopf h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
.abteilung__kopf p { margin-top: 0.6rem; font-size: 1.02rem; line-height: 1.55; color: var(--tinte-weich); }
.agenten { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: 1rem; }
.agent { display: flex; flex-direction: column; padding: 1.5rem 1.4rem 1.3rem; border-radius: var(--r-karte); background: #fff; border: 1px solid rgba(10, 20, 40, 0.08); box-shadow: 0 10px 30px rgba(10, 20, 40, 0.06); }
.agent__kopf { display: flex; align-items: center; gap: 0.75rem; }
.agent__icon { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--royal), var(--cyan)); }
.agent__icon svg { width: 1.2rem; height: 1.2rem; }
.agent h4 { font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.agent__was { margin-top: 0.9rem; font-size: 0.95rem; line-height: 1.5; color: var(--tinte); }
.agent__nutzen { margin-top: 0.7rem; display: flex; gap: 0.45rem; font-size: 0.93rem; line-height: 1.45; font-weight: 600; color: var(--tief); }
.agent__nutzen span { color: var(--royal); }
.agent__beleg { margin-top: 0.7rem; font-size: 0.86rem; line-height: 1.5; color: var(--tinte-weich); }
.agent__quelle { color: rgba(74, 85, 104, 0.8); }
.agent__fundament { margin-top: 0.7rem; font-size: 0.86rem; } .agent__fundament a { color: var(--royal); font-weight: 600; text-decoration: none; }
.agent__annex { margin-top: 0.7rem; align-self: flex-start; font-size: 0.76rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; background: #eef3ff; color: var(--tief); }
.agent__mehr { margin-top: auto; padding-top: 1.1rem; align-self: flex-start; background: none; border: 0; padding-left: 0; padding-right: 0; font: inherit; font-weight: 600; color: var(--royal); cursor: pointer; }
.agent__mehr span { display: inline-block; transition: transform 200ms var(--ease); } .agent__mehr:hover span { transform: translateX(4px); }

/* ── Detail-Fenster (Suite) ────────────────────────────────────── */
.detail { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: clamp(1rem, 4vw, 3rem) 1rem; background: rgba(6, 12, 26, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.detail[hidden] { display: none; }
.detail__fenster { position: relative; margin: auto; width: min(44rem, 100%); padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--r-panel); background: #fff; color: var(--tinte); box-shadow: 0 40px 100px rgba(6, 12, 26, 0.45); }
.detail__zu { position: absolute; right: 1rem; top: 1rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid rgba(10, 20, 40, 0.15); background: #fff; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--tinte); cursor: pointer; }
.detail__zu:hover { background: var(--papier); }
.detail__zu:focus-visible, .detail .knopf:focus-visible { outline: 2px solid var(--royal); outline-offset: 2px; }
.detail .vorspann { padding-right: 7rem; }
.detail h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); }
.detail__pitch { margin-top: 0.9rem; font-size: 1.08rem; line-height: 1.55; color: var(--tinte-weich); }
.detail__teil { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(10, 20, 40, 0.08); }
.detail__teil[hidden] { display: none; }
.detail__teil h3 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--royal); }
.detail__teil p { margin-top: 0.6rem; line-height: 1.62; color: var(--tinte-weich); }
.detail__beleg { padding: 0.8rem 1rem; border-radius: 0.8rem; background: var(--papier); font-size: 0.93rem; }
.detail__beleg[hidden] { display: none; }
.detail__teil--selbst { border-top: 0; padding: 1.2rem 1.3rem; border-radius: 1rem; background: #eef3ff; }
.detail__schritte { margin-top: 0.9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.6rem; counter-reset: schritt; }
.detail__schritte li { counter-increment: schritt; padding: 0.8rem 0.9rem; border-radius: 0.8rem; background: var(--papier); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.detail__schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-bottom: 0.45rem; border-radius: 50%; font-size: 0.78rem; color: #fff; background: linear-gradient(135deg, var(--royal), var(--cyan)); }
.detail__grenzen { margin-top: 0.7rem; display: grid; gap: 0.45rem; }
.detail__grenzen li { position: relative; padding-left: 1.1rem; line-height: 1.5; color: var(--tinte-weich); } .detail__grenzen li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.45rem; height: 2px; background: var(--tinte-weich); }
.detail__cta { margin-top: 2rem; }
.detail__klein { margin-top: 0.8rem; font-size: 0.85rem; color: var(--tinte-weich); }

/* ── Artikel (Ratgeber) und Rechtstexte ────────────────────────── */
.artikel { max-width: 44rem; }
.artikel h2 { margin-top: 2.6rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; line-height: 1.15; }
.artikel h2:first-child { margin-top: 0; }
.artikel h3 { margin-top: 1.8rem; font-size: 1.2rem; font-weight: 800; letter-spacing: -0.015em; }
.artikel p, .artikel li { font-size: 1.06rem; line-height: 1.7; color: #2d3748; text-wrap: pretty; }
.artikel p { margin-top: 1rem; }
.artikel ul { margin-top: 1rem; display: grid; gap: 0.6rem; }
.artikel li { position: relative; padding-left: 1.3rem; }
.artikel li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--royal); }
.artikel strong { color: var(--tinte); }
.artikel a { color: var(--royal); font-weight: 600; }
.artikel__quellen { margin-top: 2rem; font-size: 0.88rem; line-height: 1.55; color: var(--tinte-weich); max-width: 44rem; }
.artikel__stand { margin-top: 0.8rem; font-size: 0.85rem; color: var(--tinte-weich); }
.artikel__faq { margin-top: 3rem; max-width: 44rem; }
.artikel__faq h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; }
.artikel__faq .faq__liste { margin-top: 1.2rem; }
.recht { padding-top: clamp(7.5rem, 11vw, 9.5rem); }
.recht__text { max-width: 46rem; }
.recht__text h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.recht__text h2 { margin-top: 2.4rem; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.2; }
.recht__text h3 { margin-top: 1.6rem; font-size: 1.1rem; font-weight: 700; }
.recht__text p, .recht__text li { font-size: 1rem; line-height: 1.7; color: #2d3748; }
.recht__text p { margin-top: 0.9rem; }
.recht__text ul { margin-top: 0.8rem; display: grid; gap: 0.4rem; }
.recht__text li { position: relative; padding-left: 1.2rem; } .recht__text li::before { content: ""; position: absolute; left: 0.1rem; top: 0.7em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--royal); }
.recht__text a { color: var(--royal); }
.fuss--klein { padding-top: 1.5rem; }
.fuss--klein .fuss__copy { margin-top: 0; }
.fuss__copy a { text-decoration: underline; text-underline-offset: 0.2em; }
.fuss__basis { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(10, 20, 40, 0.1); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; }
.fuss__basis .fuss__copy { margin-top: 0; padding-top: 0; border-top: 0; }
.fuss--klein .fuss__basis { margin-top: 0; }

/* ── Einwilligung für Werbe-Pixel (schlafend, siehe v4.js) ──────── */
.einwilligung { position: fixed; left: 50%; bottom: 1.2rem; z-index: 130; translate: -50% 0; width: min(46rem, calc(100vw - 2rem)); display: flex; align-items: center; gap: 1rem 1.4rem; padding: 1.1rem 1.3rem; border-radius: 1.2rem; background: var(--navy); color: #fff; box-shadow: 0 24px 60px rgba(6, 12, 26, 0.4); }
.einwilligung p { font-size: 0.88rem; line-height: 1.55; color: rgba(255, 255, 255, 0.8); } .einwilligung strong { color: #fff; } .einwilligung a { color: var(--cyan); }
.einwilligung__knoepfe { display: flex; flex-direction: column; gap: 0.5rem; flex: none; }
.einwilligung .knopf { padding: 0.6rem 1.1rem; font-size: 0.86rem; white-space: nowrap; justify-content: center; }
.einwilligung__link { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; color: var(--tinte-weich); text-decoration: underline; cursor: pointer; }

/* ── Einblenden auf Unterseiten ────────────────────────────────── */
.raster [data-in]:nth-child(2), .hinweise [data-in]:nth-child(2), .agenten [data-in]:nth-child(2), .org__abteilungen [data-in]:nth-child(2) { transition-delay: 80ms; }
.raster [data-in]:nth-child(3), .hinweise [data-in]:nth-child(3), .agenten [data-in]:nth-child(3), .org__abteilungen [data-in]:nth-child(3) { transition-delay: 160ms; }
.raster [data-in]:nth-child(4), .agenten [data-in]:nth-child(4), .org__abteilungen [data-in]:nth-child(4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .integration__mitte { animation: none; } .browser__img, a.tafel, a.schicht, .paket, .produkt__tab { transition: none; } }

/* ── Unterseiten: Breiten ──────────────────────────────────────── */
@media (max-width: 1100px) {
  .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org__abteilungen { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .org__abteilungen::before, .org__abteilung::before { display: none; }
  .org__stamm { height: 1.4rem; }
  .produkt { grid-template-columns: 1fr; }
  .produkt__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .seitenkopf { padding-top: 6.5rem; }
  .seitenkopf__raster { grid-template-columns: 1fr; gap: 2.2rem; }
  .raster, .notizen, .hinweise, .pakete { grid-template-columns: 1fr; }
  .anstoss { flex-direction: column; align-items: flex-start; padding: 1.4rem; }
  .org__abteilungen { grid-template-columns: 1fr; }
  .produkt__tabs { grid-template-columns: 1fr; }
  .produkt__hotspot { display: none; }
  .fluss { grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr); }
  .kachel--beispiel { min-height: 0; }
  .einwilligung { flex-direction: column; align-items: stretch; }
  .einwilligung__knoepfe { flex-direction: row; } .einwilligung__knoepfe .knopf { flex: 1; }
  .recht { padding-top: 6.5rem; }
  .fuss__basis { flex-direction: column; align-items: flex-start; }
}
/* Die Tamber-Pille hat zwei kurze Wege, sie passen auch am Handy */
@media (max-width: 1199px) { .pille--klein .pille__nav { display: flex; gap: 1rem; } .pille--klein { gap: 1rem; padding-right: 1rem; } }
@media (max-width: 420px) { .pille--klein .pille__logo img { height: 0.95rem; } .pille--klein .pille__nav { font-size: 0.85rem; } }

.seitenkopf__karte .karte__fuss { line-height: 1.5; }
.panel--nacht .schritte__linie { background: linear-gradient(90deg, var(--royal), var(--cyan)); }
.panel--nacht .kopf__sub strong { color: #fff; }
@media (prefers-reduced-motion: reduce) { .integration__punkte { display: none; } }
.skip + .karten, .notizen:first-child { margin-top: 0; }
.kachel--himmel .mini__tag, .kachel--cyan .mini__tag { color: #fff; }
.zusagen--hell { margin-top: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; }
.zusagen--hell li { color: var(--tinte-weich); }
.zusagen--hell .haken { background: var(--royal); } .zusagen--hell .haken::after { border-color: #fff; }
.paket__wahl { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; align-self: flex-start; }
@media (max-width: 860px) { .zusagen--hell { grid-template-columns: 1fr; } }
.zusagen--oben { margin-top: 0; }
.org__agent a { color: inherit; text-decoration: none; } .org__agent a:hover { color: var(--royal); text-decoration: underline; text-underline-offset: 0.2em; }
.org__agent--intern { color: var(--tinte-weich); }
.abteilung__kopf + .agenten { margin-top: 1.6rem; }
#abteilungen .anstoss { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* Nur für Screenreader: eine Überschrift, die gliedert, ohne gesehen zu werden.
   .skip taugt dafür nicht, lange Texte ragten vom linken Rand ins Bild (17.09.). */
.nurlesbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.nurlesbar + .karten { margin-top: 0; }
/* .js [data-in] (0,2,0) setzt eigene Übergänge und schluckte die Hover-Übergänge dieser Karten (Forge N2) */
.js .paket[data-in] { transition: opacity 600ms var(--ease), transform 700ms var(--ease), border-color 200ms, background-color 200ms, box-shadow 200ms; }
.js a.tafel[data-in] { transition: opacity 600ms var(--ease), transform 700ms var(--ease), box-shadow 220ms var(--ease); }
.js a.tafel[data-in].is-da { transition: opacity 600ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js .paket[data-in], .js a.tafel[data-in], .js a.tafel[data-in].is-da { transition: none; }
  .tafel__link span, .agent__mehr span { transition: none; }
}