/* Startseite "Kante" (10.11.2026). Tim zur Studie F: "entwickle das weiter", "es geht in die richtige Richtung".
   Vorgeschichte: Fassung "Faden" (catcht nicht, sieht nach KI aus), Studie D in 3D ("zu heavy"), Studie E ("langweilig").
   Was bleibt: der Faden in der Farbe des Logos und Liquid Glass. Was neu ist: die Ueberschrift klappt selbst um die Ecke,
   ein kraeftiger Faden laeuft im Wechsel rechts und links hinunter und scheint hinter dem unteren Rand von drei
   Glasblaettern weich durch, beim mittleren Blatt kippt die ganze Seite in die Nacht, die Glasblaetter schwenken um die Ecke. Nichts haengt an der Maus (Tim, 10.11.2026).
   Kein 3D, kein Shader, keine Bibliothek, alles lokal. Den Faden baut kante.js aus der Lage der Blaetter.
   Ruhezustand = sichtbarer Zustand: ohne Skript fehlen nur Faden und Perle, jeder Inhalt steht da.
   Farben ueber die Namen aus neu.css, auf dieser Seite warm statt blaeulich. Dunkles System: die Seite ist durchgehend Nacht. */

:root:has(.kante-seite) {
  --faden: #FF7120;
  --grund: #F5F4F0; --grund-2: #ECEAE4; --text: #14161A; --leise: #555962;
  --akzent: #14161A; --akzent-hover: #000000; --auf-akzent: #F5F4F0;
  --k-glas: rgba(255, 255, 255, .38); --k-rand: rgba(255, 255, 255, .75); --k-glanz: rgba(255, 255, 255, .95);
  --k-schatten: 0 28px 60px -34px rgba(20, 22, 26, .28), 0 2px 8px rgba(20, 22, 26, .04);
}
/* Nacht: Klasse k-nacht am html (kante.js) im hellen System, immer im dunklen System */
html.k-nacht:has(.kante-seite) {
  color-scheme: dark;
  --grund: #0D0E11; --grund-2: #14171D; --text: #F5F4F0; --leise: #A6AAB3;
  --akzent: #F5F4F0; --akzent-hover: #FFFFFF; --auf-akzent: #0D0E11;
  --glas: rgba(255, 255, 255, .06); --glas-stark: rgba(255, 255, 255, .10); --glas-dicht: rgba(22, 25, 32, .96); --glas-leiste: rgba(12, 14, 19, .66); --kante: rgba(255, 255, 255, .14);
  --linie: rgba(255, 255, 255, .10); --linie-stark: rgba(255, 255, 255, .28); --fuell: rgba(255, 255, 255, .06);
  --schatten: 0 1px 2px rgba(0, 0, 0, .4), 0 24px 60px -28px rgba(0, 0, 0, .8); --glanz: rgba(255, 255, 255, .07);
  --k-glas: rgba(255, 255, 255, .07); --k-rand: rgba(255, 255, 255, .16); --k-glanz: rgba(255, 255, 255, .22);
  --k-schatten: 0 28px 60px -34px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
  :root:has(.kante-seite) {
    --grund: #0D0E11; --grund-2: #14171D; --text: #F5F4F0; --leise: #A6AAB3;
    --akzent: #F5F4F0; --akzent-hover: #FFFFFF; --auf-akzent: #0D0E11;
    --k-glas: rgba(255, 255, 255, .07); --k-rand: rgba(255, 255, 255, .16); --k-glanz: rgba(255, 255, 255, .22);
    --k-schatten: 0 28px 60px -34px rgba(0, 0, 0, .8);
  }
}
/* Finale: Klasse k-ende am html (kante.js), sobald der Kontakt erreicht ist. Die Seite flutet in der Fadenfarbe, der Faden
   wird dunkel, die Leiste fast weiss, der Fuss dunkel. Steht nach der Nacht und dem dunklen System, damit es beide ueberstimmt. */
html.k-ende:has(.kante-seite) {
  color-scheme: light;
  --faden: #14161A;
  --grund: #FF7120; --grund-2: #F26512; --text: #14161A; --leise: #2E1E12;
  --akzent: #14161A; --akzent-hover: #000000; --auf-akzent: #FFF4EC;
  --glas: rgba(255, 255, 255, .22); --glas-stark: rgba(255, 255, 255, .34); --glas-dicht: rgba(255, 247, 240, .96); --glas-leiste: rgba(255, 250, 246, .94); --kante: rgba(255, 255, 255, .55);
  --linie: rgba(20, 22, 26, .18); --linie-stark: rgba(20, 22, 26, .42); --fuell: rgba(20, 22, 26, .08);
  --schatten: 0 1px 2px rgba(60, 20, 0, .12), 0 24px 60px -28px rgba(60, 20, 0, .45); --glanz: rgba(255, 255, 255, .2);
  --k-glas: rgba(255, 255, 255, .22); --k-rand: rgba(255, 255, 255, .55); --k-glanz: rgba(255, 255, 255, .6);
  --k-schatten: 0 28px 60px -34px rgba(60, 20, 0, .5);
}
html.k-ende:has(.kante-seite) .fuss { background: #0D0E11; --text: #F5F4F0; --leise: #A6AAB3; --linie: rgba(255, 255, 255, .12); --linie-stark: rgba(255, 255, 255, .28); color: var(--leise); }
html.k-ende:has(.kante-seite) .kopf-leiste { --text: #14161A; --leise: #434C5B; }
html:has(.kante-seite) .fuss { transition: background-color .7s ease; }
html.k-vt:has(.kante-seite) .fuss { transition: none; }

/* Ruhiger Grund: die Lichtfelder des Rahmens gibt es auf dieser Seite nicht */
body:has(.kante-seite) .licht { display: none; }
/* Farbwechsel: Grund an html und body, Schriftfarbe nur am body. Geerbte Farbe darf nicht auf mehreren Ebenen
   uebergehen, sonst stapeln sich die Zeiten (gemessen 10.11.2026: Ueberschrift nach 1,2 s noch bei 1,03:1). */
html:has(.kante-seite) { transition: background-color .7s ease; }
body:has(.kante-seite) { transition: background-color .7s ease, color .7s ease; }
html:has(.kante-seite) { scroll-padding-top: 96px; }
body:has(.kante-seite) .kopf-leiste { transition: background-color .7s ease, border-color .7s ease; }

.kante-seite { position: relative; }
.kante-seite > section { position: relative; z-index: 1; }
.kante-seite h2 { max-width: none; margin: 0; }
.k-vorspann p, .k-fliess, .k-eigen-kopf p { transition: color .7s ease; }

/* Faden und Perle */
.k-faden { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.k-faden path { fill: none; stroke: var(--faden); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.k-faden circle { fill: var(--faden); }
.k-perle { position: absolute; z-index: 0; left: 0; top: 0; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none; display: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 42%, rgba(255, 255, 255, .05) 70%);
  -webkit-backdrop-filter: blur(1.5px) saturate(2) brightness(1.08); backdrop-filter: blur(1.5px) saturate(2) brightness(1.08);
  border: 1px solid var(--k-rand); box-shadow: inset 0 -6px 12px rgba(255, 113, 32, .25), 0 10px 22px -10px rgba(20, 22, 26, .45); }
.k-perle.da { display: block; }

/* Nacht als Kreis von der Perle aus (View Transitions). Mit Klasse k-vt entfaellt der weiche Farbwechsel, sonst liefen beide. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: k-kreis .75s cubic-bezier(.2, .8, .2, 1); }
@keyframes k-kreis { from { clip-path: circle(0 at var(--k-kx, 50%) var(--k-ky, 50%)); } to { clip-path: circle(150vmax at var(--k-kx, 50%) var(--k-ky, 50%)); } }
html.k-vt:has(.kante-seite), html.k-vt body:has(.kante-seite), html.k-vt body:has(.kante-seite) .kopf-leiste, html.k-vt .k-vorspann p, html.k-vt .k-fliess, html.k-vt .k-eigen-kopf p, html.k-vt .k-reihe span { transition: none; }
html.k-vt .k-blatt, html.k-vt .k-karte { transition: transform .35s ease; }

/* Auftakt: die Ueberschrift geht selbst um die Ecke */
.k-auftakt { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; padding: var(--a6) 0 14vh; }
.k-ecke { display: inline-grid; grid-template-columns: auto auto; justify-content: start; align-self: flex-start; column-gap: .1em; font-size: clamp(38px, 9vw, 150px); }
.k-ecke h1 { display: contents; font-size: inherit; }
.k-ecke h1 span { font: 600 1em/.9 Clash, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.k-waag { grid-column: 1; grid-row: 1; }
.k-senk { grid-column: 2; grid-row: 1 / span 2; align-self: start; writing-mode: vertical-rl; color: var(--faden); padding-top: .06em; transform-origin: 0 0; animation: k-klappen 1.1s cubic-bezier(.2, .8, .2, 1) .75s backwards; }
/* Auftritt beim Laden: Endzustand ist der Ruhezustand, die Animationen laufen ohne Skript */
body:has(.kante-seite) .kopf { animation: k-herab .7s cubic-bezier(.2, .8, .2, 1) 1.25s backwards; }
/* Sog: Die Seite beginnt in der Fadenfarbe, die sich als Kreis in das Wort zusammenzieht. Die Kreismitte setzt kante.js
   auf die Wortmitte (--k-ax, --k-ay); ohne Skript gilt der Naeherungswert. Ruhezustand: Radius 0, also unsichtbar. */
.k-ecke::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #FF7120;
  clip-path: circle(0 at var(--k-ax, 62%) var(--k-ay, 42%)); animation: k-sog 1s cubic-bezier(.65, 0, .25, 1) .75s backwards; }
@keyframes k-sog { from { clip-path: circle(150vmax at var(--k-ax, 62%) var(--k-ay, 42%)); } }
.k-waag { animation: k-auf .8s cubic-bezier(.2, .8, .2, 1) .15s backwards; }
.k-vorspann > * { animation: k-auf .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.k-vorspann > :nth-child(1) { animation-delay: 1.55s; }
.k-vorspann > :nth-child(2) { animation-delay: 1.7s; }
.k-vorspann > :nth-child(3) { animation-delay: 1.85s; }
@keyframes k-auf { from { opacity: 0; transform: translateY(.5em); } }
@keyframes k-herab { from { opacity: 0; transform: translateY(-24px); } }
/* Die Perle erscheint erst, wenn der Faden losschiesst (Klasse k-los am Seitenrahmen, kante.js) */
.k-perle.da { opacity: 0; transition: opacity .4s ease; }
.k-los .k-perle.da { opacity: 1; }
.k-faden { opacity: 0; transition: opacity .3s ease; }
.k-los .k-faden { opacity: 1; }
/* Start: das Wort steht aufrecht in der Zeile hinter "Ecke" (nach der Drehung zeigt die eigene x-Achse nach oben, y nach rechts) */
@keyframes k-klappen { from { transform: rotate(-90deg) translate(-.93em, .14em); color: var(--text); } 86% { color: var(--text); } }
/* Schmal: Die ganze Zeile passt nicht nebeneinander, das Wort startet in einer zweiten Zeile unter "Um die Ecke" */
@keyframes k-klappen-schmal { from { transform: rotate(-90deg) translate(-1.95em, -5.68em); color: var(--text); } 86% { color: var(--text); } }
.k-vorspann { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: var(--a3); justify-items: start; width: 0; min-width: min(100%, 34ch); max-width: 34ch; font: 400 clamp(17px, 1.5vw, 21px)/1.5 DM, sans-serif; letter-spacing: 0; }
.k-vorspann p { margin: 0; color: var(--leise); }

/* Drei Glasblaetter, im Wechsel links und rechts */
.k-saeule { display: flex; padding: 9vh 0; }
.k-saeule--1, .k-saeule--3 { justify-content: flex-start; }
.k-saeule--2 { justify-content: flex-end; }
.k-blatt { position: relative; overflow: hidden; width: min(720px, 62%); border-radius: 34px; padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 56px) 96px;
  background: var(--k-glas); -webkit-backdrop-filter: blur(9px) saturate(1.7); backdrop-filter: blur(9px) saturate(1.7); border: 1px solid var(--k-rand);
  box-shadow: inset 0 1px 0 var(--k-glanz), var(--k-schatten);
  transform: perspective(1400px) rotateY(var(--tuer, 0deg)); transform-origin: 0 50%; transition: transform .35s ease, background-color .7s ease, border-color .7s ease; }
/* Tuer: das mittlere Blatt haengt an der rechten Kante */
.k-saeule--2 .k-blatt { transform-origin: 100% 50%; }
.k-blatt > * { position: relative; }
.k-blatt h2 { font-size: clamp(30px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.025em; }
.k-satz { font: 500 clamp(20px, 1.9vw, 27px)/1.25 Clash, sans-serif; letter-spacing: -.01em; margin: 22px 0 0; max-width: 26ch; text-wrap: balance; }
.k-fliess { margin: 14px 0 0; max-width: 44ch; color: var(--leise); }
.k-blatt ul { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.k-blatt li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--linie-stark); font-weight: 600; text-decoration: none; }
.k-blatt li a::after { content: "\2192"; color: var(--faden); transition: transform .25s ease; }
.k-blatt li a:hover::after { transform: translateX(6px); }

/* Eigene Apps und Produkte: nur Namen, keine Aufnahmen. Zwei Reihen schieben sich beim Scrollen gegeneinander. */
.k-eigen { padding: 12vh 0 8vh; }
.k-eigen-kopf { padding-left: 22%; }
.k-eigen h2 { font-size: clamp(26px, 3.2vw, 46px); line-height: 1.06; max-width: 16ch; }
.k-eigen-kopf p { margin: 16px 0 var(--a3); max-width: 46ch; color: var(--leise); }
.k-reihen { margin-top: 7vh; overflow: hidden; }
.k-reihe { display: flex; gap: .45em; white-space: nowrap; margin: .2em 0 0; font: 600 clamp(44px, 8vw, 128px)/1.08 Clash, sans-serif; letter-spacing: -.035em; will-change: transform; transform: translateX(var(--x, 0px)); }
.k-reihe span:nth-child(4n+3) { color: var(--grund); -webkit-text-stroke: 3px var(--text); paint-order: stroke fill; transition: color .7s ease; }
.k-reihe i { font-style: normal; color: var(--faden); }
.k-reihe--a { justify-content: flex-start; }
.k-reihe--b { justify-content: flex-end; }
.k-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; padding: 0; }

/* Ruhige Abschnitte: Branchen, Ablauf, Fragen */
.k-block { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--a6) var(--a8); padding: 10vh 0; align-items: start; }
.k-block h2 { font-size: var(--t5); line-height: 1.08; max-width: 14ch; }
.k-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-stark); }
.k-index a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto; gap: var(--a3); align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--linie-stark); text-decoration: none; }
.k-index strong { font: 600 var(--t4)/1.2 Clash, sans-serif; letter-spacing: -.01em; }
.k-index span { color: var(--leise); font-size: var(--t2); }
.k-index i { font-style: normal; color: var(--faden); transition: transform .25s ease; }
.k-index a:hover i { transform: translateX(6px); }
.k-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a4); counter-reset: k; }
.k-schritte li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--a2); counter-increment: k; }
.k-schritte li::before { content: counter(k); grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--faden); color: #14161A; font: 600 var(--t3)/1 Clash, sans-serif; }
.k-schritte h3 { margin: 6px 0 4px; }
.k-schritte p { margin: 0; color: var(--leise); font-size: var(--t2); }
.k-danach { margin: var(--a4) 0 0; color: var(--leise); font-size: var(--t2); }
.k-fragen { display: grid; gap: 10px; }

/* Einstiege in den Worten des Besuchers, Zusage unter dem Knopf, Aufruf nach dem Ablauf */
.k-zusage { margin: 0; font-size: var(--t2); color: var(--leise); max-width: 34ch; transition: color .7s ease; }
/* Vier Glasblaetter in zwei Spalten; jedes schwenkt beim Scrollen um seine aeussere Kante herein (--tuer aus kante.js) */
/* Branchen-Einstieg: die Seite fragt zuerst (kante-wahl.js) */
.k-wahl { padding: 2vh 0 8vh; }
.k-wahl h2 { font-size: var(--t5); line-height: 1.08; margin-bottom: var(--a4); }
.k-wahl-schalter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--a2); }
.k-wahl-schalter a { display: grid; gap: var(--a1); align-content: start; height: 100%; padding: var(--a3); border-radius: 22px; border: 1px solid rgba(20, 22, 26, .16); text-decoration: none; color: var(--text);
  font: 600 var(--t2)/1.2 DM, sans-serif; hyphens: auto; transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease; }
.k-wahl-schalter .zeichen--gross { margin: 0; }
.k-wahl-schalter a:hover, .k-wahl-schalter a:focus-visible { transform: translateY(-4px); border-color: var(--faden); }
.k-wahl-schalter a.ist-gewaehlt { background: #14161A; border-color: #14161A; color: #F5F4F0; }
.k-wahl-blatt { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--a6); align-items: center; margin-top: var(--a3); padding: var(--a3); border-radius: 28px; background: #14161A; color: #F5F4F0; }
.k-wahl-blatt[hidden] { display: none; }
.k-wahl-blatt:not([hidden]) { animation: k-wahl-auf .55s cubic-bezier(.2, .8, .2, 1); }
@keyframes k-wahl-auf { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.k-wahl-blatt figure { margin: 0; }
.k-wahl-blatt img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 11; object-fit: cover; border-radius: 18px; }
.k-wahl-blatt:not([hidden]) img { animation: k-wahl-bild .9s cubic-bezier(.6, 0, .2, 1); }
@keyframes k-wahl-bild { from { clip-path: inset(0 100% 0 0 round 18px); } to { clip-path: inset(0 0 0 0 round 18px); } }
.k-wahl-blatt > div { padding: var(--a2) var(--a3) var(--a2) 0; }
.k-wahl-zeile { margin: 0 0 var(--a1); font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--faden); }
.k-wahl-blatt h3 { margin: 0 0 var(--a2); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.12; color: #F5F4F0; }
.k-wahl-blatt p { margin: 0 0 var(--a2); color: #C9CCD3; }
.k-wahl-blatt .k-wahl-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a3); margin-top: var(--a3); }
.k-wahl-wege .knopf { background: var(--faden); color: #14161A; }
.k-wahl-wege .pfeil-link { color: #F5F4F0; }
.k-index a.ist-gewaehlt { background: var(--faden); color: #14161A; border-radius: 16px; }
@media (max-width: 1080px) { .k-wahl-schalter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .k-wahl-blatt { grid-template-columns: 1fr; gap: var(--a3); } .k-wahl-blatt > div { padding: 0 var(--a1) var(--a2); } }
@media (max-width: 560px) { .k-wahl-schalter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-wahl-schalter a { padding: var(--a2); } }
@media (prefers-reduced-motion: reduce) { .k-wahl-blatt:not([hidden]), .k-wahl-blatt:not([hidden]) img { animation: none; } }
.k-einstieg { padding: 4vh 0 10vh; }
.k-einstieg h2 { font-size: var(--t5); line-height: 1.08; margin-bottom: var(--a6); }
.k-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a3); }
.k-karte { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a2) var(--a3); align-content: space-between; min-height: 240px; height: 100%;
  padding: clamp(24px, 3vw, 40px); border-radius: 30px; text-decoration: none;
  background: var(--k-glas); -webkit-backdrop-filter: blur(9px) saturate(1.7); backdrop-filter: blur(9px) saturate(1.7); border: 1px solid var(--k-rand);
  box-shadow: inset 0 1px 0 var(--k-glanz), var(--k-schatten);
  transform: perspective(1400px) rotateY(var(--tuer, 0deg)); transform-origin: 0 50%; transition: transform .35s ease, background-color .7s ease, border-color .7s ease; }
.k-karten li:nth-child(even) .k-karte { transform-origin: 100% 50%; }
.k-karte strong { grid-column: 1 / -1; font: 600 clamp(24px, 2.8vw, 42px)/1.08 Clash, sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.k-karte span { color: var(--leise); font-size: var(--t2); max-width: 34ch; align-self: end; transition: color .7s ease; }
.k-karte i { font-style: normal; align-self: end; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--faden); color: #14161A; transition: transform .25s ease; }
.k-karte:hover i { transform: translateX(6px); }
.k-weiter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a2) var(--a3); margin: var(--a6) 0 0; }
.k-weiter > span { color: var(--leise); font-size: var(--t2); max-width: 44ch; }

/* Inhaltlicher Ausbau: Gruende, Wort des Gruenders, Plattformen */
.k-neben { margin: var(--a3) 0 0; max-width: 34ch; color: var(--leise); font-size: var(--t2); }
.k-gruende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a6) var(--a8); }
.k-gruende li { border-top: 2px solid var(--faden); padding-top: var(--a2); }
.k-gruende h3 { margin: 0 0 var(--a1); }
.k-gruende p { margin: 0; color: var(--leise); font-size: var(--t2); }
.k-wort { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--a6) var(--a8); align-items: end; padding: 12vh 0; }
.k-wort figure { margin: 0; }
.k-wort blockquote { margin: 0; }
.k-wort blockquote p { margin: 0; font: 600 clamp(32px, 5.2vw, 84px)/1.02 Clash, sans-serif; letter-spacing: -.03em; text-wrap: balance; }
.k-wort figcaption { display: flex; gap: var(--a2); align-items: baseline; margin-top: var(--a4); padding-left: var(--a3); border-left: 9px solid var(--faden); }
.k-wort figcaption strong { font-size: var(--t3); }
.k-wort figcaption span { color: var(--leise); font-size: var(--t2); }
.k-wort-text p { color: var(--leise); font-size: var(--t2); margin: 0 0 var(--a3); }
.k-mit { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--a4) var(--a8); padding: 4vh 0 8vh; align-items: start; }
.k-mit h2 { font: 400 var(--t2)/1.5 DM, sans-serif; letter-spacing: 0; color: var(--leise); max-width: 26ch; }
.k-mit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a2) var(--a6); }
.k-mit a { display: grid; text-decoration: none; }
.k-mit strong { font: 600 var(--t4)/1.2 Clash, sans-serif; letter-spacing: -.01em; }
.k-mit span { color: var(--leise); font-size: var(--t1); }

/* Netzwerk: die Gewerke als grosse laufende Zeile, getrennt durch Punkte in Fadenfarbe */
.k-netz { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--a6) var(--a8); padding: 4vh 0 12vh; align-items: start; }
.k-netz h2 { font-size: var(--t5); line-height: 1.08; max-width: 14ch; }
.k-netz-kopf p { margin: var(--a3) 0 0; color: var(--leise); font-size: var(--t2); max-width: 38ch; }
.k-netz-kopf .pfeil-link { margin-top: var(--a3); }
.k-gewerke { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1em .5em; font: 600 clamp(24px, 3vw, 44px)/1.2 Clash, sans-serif; letter-spacing: -.02em; }
.k-gewerke li { display: flex; align-items: center; gap: .5em; }
.k-gewerke li + li::before { content: ""; width: .26em; height: .26em; border-radius: 50%; background: var(--faden); flex: none; }

/* Kontakt: hier endet der Faden */
.k-kontakt { padding: 12vh 0 16vh; }
.k-kontakt h2 { font-size: clamp(34px, 6vw, 96px); line-height: 1; letter-spacing: -.03em; max-width: 12ch; margin-left: 14%; }
.k-kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--a8); margin-top: var(--a8); align-items: start; }
.k-kontakt-text p { color: var(--leise); max-width: 40ch; }
.k-kontakt dl { margin: var(--a4) 0 0; display: grid; gap: var(--a2); }
.k-kontakt dt { font-size: var(--t1); font-weight: 600; letter-spacing: .04em; color: var(--leise); }
.k-kontakt dd { margin: 2px 0 0; }

@media (max-width: 900px) {
  .k-block, .k-kontakt-raster, .k-wort, .k-mit, .k-netz { grid-template-columns: 1fr; gap: var(--a4); }
  .k-kontakt h2 { margin-left: 14px; }
  .k-eigen-kopf { padding-left: 14px; }
}
@media (max-width: 760px) {
  .k-faden path { stroke-width: 6; }
  .k-perle { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .k-vorspann { padding-top: .5em; }
  .k-vorspann .knopf { padding: 0 20px; white-space: nowrap; font-size: 15px; }
  .k-auftakt { min-height: 78vh; }
  .k-ecke { font-size: 12.4vw; }
  .k-senk { animation-name: k-klappen-schmal; }
  .k-vorspann { min-width: 100%; max-width: none; }
  .k-saeule { padding: 6vh 0; }
  .k-blatt { width: 100%; border-radius: 26px; padding-bottom: 76px; }
  .k-gruende { grid-template-columns: 1fr; gap: var(--a4); }
  .k-karten { grid-template-columns: 1fr; }
  .k-karte { min-height: 190px; border-radius: 24px; }
  .k-karten li:nth-child(even) .k-karte { transform-origin: 0 50%; }
  .k-index a { grid-template-columns: minmax(0, 1fr) auto; }
  .k-index span { grid-column: 1; grid-row: 2; }
  .k-index i { grid-row: 1 / span 2; align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .k-senk, .k-waag, .k-vorspann > *, body:has(.kante-seite) .kopf, .k-ecke::before { animation: none; }
  .k-perle.da { opacity: 1; transition: none; }
  .k-faden { opacity: 1; transition: none; }
  html:has(.kante-seite), body:has(.kante-seite), .k-blatt, .k-karte, .k-vorspann p, .k-fliess, .k-eigen-kopf p { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .k-blatt { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glas-dicht); }
  .k-perle.da { display: none; }
}

/* 11.11.2026, Tim: "alles sieht so aus als würde es sich auf die mitte konzentrieren". Die Startseite nutzt jetzt die ganze
   Fensterbreite: breitere Inhaltsspalte, und neben jedem Blatt steht auf der freien Seite ein gezeichnetes Schaubild. */
.kante-seite .weite { width: min(1600px, 100% - 2 * clamp(24px, 6vw, 112px)); }
.k-saeule { gap: clamp(24px, 5vw, 96px); align-items: center; }
.k-blatt { flex: none; width: min(780px, 56%); }
.k-schau { flex: 1; min-width: 0; --fuell: rgba(20, 22, 26, .06); --linie-stark: rgba(20, 22, 26, .3); --linie: rgba(20, 22, 26, .14); }
.k-saeule--2 .k-schau { order: -1; }
html.k-nacht .k-schau { --text: #F5F4F0; --leise: #C9CCD3; --fuell: rgba(245, 244, 240, .08); --linie-stark: rgba(245, 244, 240, .3); --linie: rgba(245, 244, 240, .16); }
@media (prefers-color-scheme: dark) { .k-schau { --fuell: rgba(245, 244, 240, .08); --linie-stark: rgba(245, 244, 240, .3); --linie: rgba(245, 244, 240, .16); } }
@media (max-width: 900px) { .k-saeule { flex-direction: column; align-items: stretch; } .k-blatt { width: 100%; } .k-saeule--2 .k-schau { order: 0; } .k-schau { max-width: 420px; margin-inline: auto; } }

/* 12.11.2026: Die unteren Abschnitte wechseln die Seite, damit die Startseite nicht in einer Achse laeuft: Ablauf und Fragen
   tragen ihre Ueberschrift rechts, Branchen und Gruende links. Am Handy stehen alle untereinander wie bisher. */
@media (min-width: 901px) {
  #ablauf.k-block, #fragen.k-block { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  #ablauf.k-block > :first-child, #fragen.k-block > :first-child { order: 2; }
  #ablauf.k-block h2, #fragen.k-block h2 { margin-left: auto; text-align: right; }
  .k-block h2 { position: sticky; top: 120px; }
  #gruende .k-gruende { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}