/* Eigener Auftakt je Unterseite (11.11.2026). Tim: "jede unterseite soll ein eigenes erleben haben" und "passe es neu an
   wie bei der homeseite und mache für die unterseiten jeweils ein eigenes erlebnis".
   Gemeinsam bleiben Grundton, Faden und Finale (kante-basis.css, kante-unter.js). Darueber bekommt jede Seite einen Auftakt,
   der aus ihrer eigenen Ueberschrift gebaut ist. Alles laeuft beim Laden als CSS-Animation; der Endzustand ist der
   Ruhezustand, ohne Animation steht die Ueberschrift vollstaendig da. Nichts haengt an der Maus.
   e-suche   Webdesign und Branding:   der erste Satz wird in ein Suchfeld aus Glas getippt, der zweite steigt auf
   e-bau     Apps und Development:     die Woerter fallen als Bausteine an ihren Platz, die Luecke "Werkzeug?" wird gefuellt
   e-schleife KI und Automatisierung:  um "von selbst laufen." zieht der Faden eine Schleife, in der ein Stueck weiterlaeuft */
@keyframes e-auf { from { opacity: 0; transform: translateY(.45em); } }

/* Webdesign und Branding: gefunden werden */
/* Der getippte Satz muss in einer Zeile in die Textspalte passen, sonst schneidet das Feld ihn ab (gemessen 11.11.2026) */
.seitenkopf h1.e-suche { font-size: clamp(30px, 3.7vw, 54px); }
.e-suche .e-feld { display: inline-flex; align-items: center; gap: .28em; max-width: 100%; padding: .1em .42em .12em .3em; margin-left: -.06em; border-radius: 999px;
  background-color: var(--glas-stark); border: 1px solid var(--kante); box-shadow: var(--schatten), inset 0 1px 0 var(--kante);
  animation: e-auf .6s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
.e-lupe { position: relative; flex: none; width: .46em; height: .46em; border: .075em solid var(--faden); border-radius: 50%; margin-right: .12em; }
.e-lupe::after { content: ""; position: absolute; right: -.2em; bottom: -.16em; width: .24em; height: .075em; background: var(--faden); border-radius: 1em; transform: rotate(45deg); }
.e-tipp { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 12em; vertical-align: bottom; border-right: .05em solid transparent;
  animation: e-tippen 1.25s steps(16, end) .55s backwards, e-strich 1.9s step-end .55s backwards; }
@keyframes e-tippen { from { max-width: 0; } }
@keyframes e-strich { 0%, 20%, 40%, 60%, 80% { border-right-color: var(--faden); } 10%, 30%, 50%, 70%, 90% { border-right-color: transparent; } }
.e-dann { display: block; animation: e-auf .7s cubic-bezier(.2, .8, .2, 1) 1.9s backwards; }

/* Apps und Development: bauen */
.e-stein { display: inline-block; animation: e-fallen .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 95ms + 200ms); }
@keyframes e-fallen { from { opacity: 0; transform: translateY(-1.1em) rotate(-7deg); } }
.e-luecke { display: inline-block; padding: 0 .16em; margin: 0 -.04em; border-radius: .16em; background: var(--faden); color: #14161A; outline: .045em dashed transparent; outline-offset: -.045em;
  animation: e-fuellen .55s cubic-bezier(.2, .8, .2, 1) 1.25s backwards; }
@keyframes e-fuellen { from { background: transparent; color: transparent; outline-color: var(--text); transform: scale(.96); } }

/* KI und Automatisierung: von selbst laufen */
.seitenkopf h1.e-schleife { font-size: clamp(30px, 4.4vw, 64px); }
.e-ring { position: relative; display: inline-block; white-space: nowrap; }
.e-ring svg { position: absolute; left: -.34em; right: -.34em; top: -.18em; bottom: -.22em; width: calc(100% + .68em); height: calc(100% + .4em); overflow: visible; pointer-events: none; }
.e-ring ellipse { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.e-ring .e-bahn { stroke: var(--faden); stroke-width: 6; stroke-dasharray: 1 1; animation: e-ziehen 1.1s cubic-bezier(.6, 0, .3, 1) .7s backwards; }
.e-ring .e-lauf { stroke: var(--text); stroke-width: 8; stroke-dasharray: .05 .95; animation: e-ziehen 5s linear 1.8s infinite, e-auf .4s 1.8s backwards; }
@keyframes e-ziehen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---- Kontakt (e-rede): die Ueberschrift ist die Nachricht des Besuchers, darunter antwortet das Studio, dann drei Wege ---- */
.seitenkopf h1.e-rede { max-width: none; font-size: clamp(30px, 3.6vw, 52px); }
.e-blase { display: inline-block; max-width: 17ch; padding: .32em .5em .36em; border-radius: .62em .62em .62em .14em; background-color: var(--glas-stark); border: 1px solid var(--kante);
  box-shadow: var(--schatten), inset 0 1px 0 var(--kante); transform-origin: 0 100%; animation: e-blase .6s cubic-bezier(.2, 1.2, .3, 1) .15s backwards; }
@keyframes e-blase { from { opacity: 0; transform: scale(.82) translateY(.3em); } }
.e-rede-nach { display: grid; gap: var(--a4); margin-top: var(--a3); max-width: 760px; }
.e-blase--wir { justify-self: end; max-width: 30ch; margin: 0; font-size: var(--t3); line-height: 1.35; border-radius: 1.1em 1.1em .25em 1.1em; background: var(--faden); color: #14161A; border-color: transparent;
  transform-origin: 100% 100%; animation-delay: 1s; }
.e-wege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a2); }
.e-wege li { animation: e-auf .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 110ms + 1.5s); }
.e-wege a { display: grid; gap: 2px; height: 100%; padding: var(--a3); border-radius: var(--r-gross); background-color: var(--glas); border: 1px solid var(--kante); box-shadow: var(--schatten), inset 0 1px 0 var(--kante);
  text-decoration: none; color: var(--text); transition: transform .25s ease, border-color .25s ease; }
.e-wege a:hover, .e-wege a:focus-visible { transform: translateY(-4px); border-color: var(--faden); }
.e-wege strong { font: 600 var(--t3)/1.2 DM, sans-serif; }
.e-wege a > span { color: var(--leise); font-size: var(--t2); overflow-wrap: anywhere; }

/* ---- Arbeitsweise (e-weg): der Faden unterstreicht die Schritte in der Ueberschrift, darunter die Strecke mit vier Stationen ---- */
.e-mark { background: linear-gradient(var(--faden), var(--faden)) 0 92% / 100% .11em no-repeat; animation: e-unter .6s cubic-bezier(.6, 0, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 500ms + 500ms); }
@keyframes e-unter { from { background-size: 0 .11em; } }
.e-strecke { margin-top: var(--a8); max-width: 620px; }
.e-strecke ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-strecke ol::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 23px; height: 4px; border-radius: 4px; background: var(--faden); transform-origin: 0 50%; animation: e-strecke 1.8s cubic-bezier(.5, 0, .3, 1) .5s backwards; }
@keyframes e-strecke { from { transform: scaleX(0); } }
.e-strecke a { position: relative; display: grid; justify-items: center; gap: var(--a1); text-decoration: none; color: var(--text); font: 600 var(--t2)/1.2 DM, sans-serif; }
.e-station { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--faden); color: #14161A;
  animation: e-station .5s cubic-bezier(.2, 1.3, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 500ms + 500ms); transition: transform .25s ease; }
.e-station .zeichen { margin: 0; width: 24px; height: 24px; color: inherit; vertical-align: 0; }
@keyframes e-station { from { transform: scale(.3); opacity: 0; } }
.e-strecke a:hover .e-station, .e-strecke a:focus-visible .e-station { transform: scale(1.12); }
.schritt:target { border-color: var(--faden); }

/* ---- Netzwerk (e-mitfuer, e-netz): "Mit uns" wird gefuellt, "fuer uns" gestrichen; ueber den Gewerken das Netz um den Kern ---- */
.seitenkopf h1.e-mitfuer { max-width: none; }
.e-mit { display: inline-block; padding: 0 .2em; margin-left: -.2em; border-radius: .18em; background: linear-gradient(var(--faden), var(--faden)) 0 0 / 100% 100% no-repeat; color: #14161A;
  animation: e-fuellen-breit .7s cubic-bezier(.6, 0, .3, 1) .3s backwards; }
@keyframes e-fuellen-breit { from { background-size: 0 100%; color: var(--text); } }
.e-fuer { display: inline-block; white-space: nowrap; background: linear-gradient(var(--text), var(--text)) 0 56% / 100% .08em no-repeat; animation: e-streichen .5s cubic-bezier(.6, 0, .3, 1) 1.2s backwards; }
@keyframes e-streichen { from { background-size: 0 .08em; } }
.e-netz { margin: 0 0 var(--a6); }
.e-netz svg { display: block; width: 100%; height: auto; overflow: visible; }
.e-netz line { stroke: var(--faden); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.e-knoten circle { fill: var(--text); }
.e-knoten text { fill: var(--text); font: 500 19px/1 DM, sans-serif; }
.e-kern circle { fill: var(--faden); }
.e-kern text { fill: #14161A; font: 600 19px/1 DM, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .e-netz line { transition: stroke-dashoffset .9s cubic-bezier(.5, 0, .3, 1); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
  .e-knoten { transition: opacity .5s ease; transition-delay: calc(var(--i, 0) * 70ms + 800ms); }
  .e-netz.u-ein:not(.u-da) line { stroke-dashoffset: 1; }
  .e-netz.u-ein:not(.u-da) .e-knoten { opacity: 0; }
}

/* ---- Team (e-besetzung, e-laufband): die drei Woerter treten einzeln auf, darunter laufen die Gewerke als Band ---- */
.seitenkopf h1.e-besetzung { max-width: none; display: flex; flex-wrap: wrap; gap: .18em .5em; font-size: clamp(30px, 4.6vw, 64px); }
.e-rolle { display: inline-flex; align-items: center; gap: .28em; animation: e-rolle .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 380ms + 200ms); }
.e-rolle .zeichen--gross { margin: 0; width: .8em; height: .8em; padding: .17em; border-radius: .2em; }
@keyframes e-rolle { from { opacity: 0; transform: translateX(-.6em); filter: blur(6px); } }
.e-laufband { overflow: hidden; margin-bottom: var(--a8); padding: var(--a3) 0; border-block: 1px solid var(--linie); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.e-laufband-reihe { display: flex; gap: var(--a6); width: max-content; animation: e-laufen 46s linear infinite; }
.e-laufband-reihe span { flex: none; font: 600 var(--t4)/1 Clash, sans-serif; letter-spacing: -.01em; white-space: nowrap; color: var(--text); }
.e-laufband-reihe span::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: var(--a6); border-radius: 50%; background: var(--faden); vertical-align: .1em; }
@keyframes e-laufen { to { transform: translateX(calc(-50% - var(--a6) / 2)); } }

/* ---- Studio (e-name): aus "Hannover" fallen die Vokale, es bleibt "hnvr". Ruhezustand ist "hnvr". ---- */
.e-name { margin: 0; font: 600 clamp(54px, 13vw, 190px)/.95 Clash, sans-serif; letter-spacing: -.04em; color: var(--text); white-space: nowrap; }
.e-name i { display: inline-block; font-style: normal; color: var(--faden); max-width: 0; opacity: 0; overflow: hidden; vertical-align: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .e-name i { transition: max-width .7s cubic-bezier(.6, 0, .3, 1), opacity .45s ease, transform .6s cubic-bezier(.5, 0, .8, .4); transition-delay: calc(var(--v, 0) * 260ms + 900ms); }
  .e-name i:nth-of-type(2) { --v: 1; } .e-name i:nth-of-type(3) { --v: 2; }
  .e-name.e-wartet i { max-width: 1.7em; opacity: 1; transition: none; }
  .e-name:not(.e-wartet) i { transform: translateY(.5em) rotate(12deg); }
}

/* ---- FAQ (e-finden): Fragen beim Tippen filtern ---- */
.e-finden { margin-top: var(--a6); max-width: 620px; display: grid; gap: var(--a1); animation: e-auf .6s cubic-bezier(.2, .8, .2, 1) .3s backwards; }
.e-finden[hidden] { display: none; }
.e-finden label { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.e-finden-feld { display: flex; align-items: center; gap: var(--a2); min-height: 64px; padding: 0 var(--a3); border-radius: 999px; background-color: var(--glas-stark); border: 1px solid var(--kante); box-shadow: var(--schatten), inset 0 1px 0 var(--kante); font-size: 28px; transition: border-color .2s; }
.e-finden-feld:focus-within { border-color: var(--faden); }
.e-finden input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: 400 var(--t3) DM, sans-serif; }
.e-finden input::placeholder { color: var(--leise); opacity: 1; }
.e-finden-stand { margin: 0; padding-left: var(--a3); font-size: var(--t2); color: var(--leise); }
.frage[hidden] { display: none; }
.frage mark { background: var(--faden); color: #14161A; border-radius: .2em; padding: 0 .12em; }
.fragen-leer { margin: 0; padding: var(--a3); color: var(--leise); }

/* ---- Leistungen (e-faecher): die fuenf Felder liegen als Stapel und faechern sich zu einer Reihe auf ---- */
.e-faecher { margin-top: var(--a6); }
.e-faecher ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--a2); max-width: 980px; }
.e-faecher li { animation: e-faecher .9s cubic-bezier(.2, .9, .25, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 350ms); }
@keyframes e-faecher { from { opacity: 0; transform: translateX(calc(var(--m, 0) * -105%)) rotate(calc(var(--m, 0) * 5deg)) scale(.9); } }
.e-faecher a { display: grid; gap: var(--a1); height: 100%; padding: var(--a3); border-radius: var(--r-gross); background-color: var(--glas); border: 1px solid var(--kante); box-shadow: var(--schatten), inset 0 1px 0 var(--kante);
  text-decoration: none; color: var(--text); font: 600 var(--t2)/1.25 DM, sans-serif; transition: transform .25s ease, border-color .25s ease; }
.e-faecher a:hover, .e-faecher a:focus-visible { transform: translateY(-5px); border-color: var(--faden); }
.e-faecher .zeichen--gross { margin: 0; }
.e-faecher a span { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }

/* ---- Systeme (e-schalter): Schalter je Bereich filtern die Systeme ---- */
.e-schalter { display: flex; flex-wrap: wrap; gap: var(--a1); margin-top: var(--a6); }
.e-schalter[hidden] { display: none; }
.e-schalter button { display: inline-flex; align-items: center; gap: .5em; min-height: 46px; padding: 0 var(--a3); border-radius: 999px; border: 1px solid var(--linie-stark); background: none; color: var(--text); font: 600 var(--t2)/1 DM, sans-serif; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s; animation: e-auf .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 500ms); }
.e-schalter button small { font: 400 var(--t1)/1 DM, sans-serif; color: var(--leise); }
.e-schalter button:hover { border-color: var(--faden); transform: translateY(-2px); }
.e-schalter button[aria-pressed="true"] { background: var(--faden); border-color: var(--faden); color: #14161A; }
.e-schalter button[aria-pressed="true"] small { color: #14161A; }
.e-schalter button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
[data-sy-bereich][hidden] { display: none; }
.sy-gefiltert [data-sy-bereich] .sy-karte { animation: e-auf .5s cubic-bezier(.2, .8, .2, 1) backwards; }

/* ---- Branchenseiten (e-buehne): das Symbolbild oeffnet sich wie ein Vorhang, die Branche steht als Marke darauf ---- */
.e-buehne { margin: 0 auto var(--a8); }
.e-buehne-bild { position: relative; overflow: hidden; border-radius: var(--r-gross); aspect-ratio: 21 / 9; background: var(--grund-2); animation: e-vorhang 1.1s cubic-bezier(.6, 0, .2, 1) .2s backwards; }
@keyframes e-vorhang { from { clip-path: inset(0 50% 0 50% round 22px); } to { clip-path: inset(0 0 0 0 round 22px); } }
.e-buehne-bild img { display: block; width: 100%; height: 100%; object-fit: cover; animation: e-naeher 2.2s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
@keyframes e-naeher { from { transform: scale(1.14); } }
.e-buehne-marke { position: absolute; left: var(--a3); bottom: var(--a3); margin: 0; display: flex; align-items: center; gap: var(--a2); padding: 10px var(--a3) 10px 10px; border-radius: 999px; background: #F5F4F0; color: #14161A;
  font: 600 var(--t3)/1 Clash, sans-serif; animation: e-auf .6s cubic-bezier(.2, .8, .2, 1) 1.1s backwards; }
.e-buehne-marke .zeichen--gross { margin: 0; width: 40px; height: 40px; padding: 9px; border-radius: 50%; }
.e-buehne figcaption { margin-top: var(--a1); font-size: var(--t1); color: var(--leise); }
.e-buehne figcaption a { color: inherit; }

/* ---- Apps und Projekte (e-wechsel): unter der Ueberschrift wechseln die Namen der eigenen Produkte ---- */
.e-wechsel { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: var(--a3) 0 0; font: 600 clamp(22px, 2.6vw, 36px)/1.2 Clash, sans-serif; letter-spacing: -.015em; color: var(--leise); }
.e-wechsel-fenster { display: inline-block; height: 1.5em; overflow: hidden; padding: 0 .5em; border-radius: 999px; background: var(--faden); color: #14161A; }
.e-wechsel-rolle { display: flex; flex-direction: column; animation: e-wechsel calc(var(--n, 3) * 2.2s) cubic-bezier(.7, 0, .2, 1) infinite; }
.e-wechsel-rolle b { height: 1.5em; line-height: 1.5em; font-weight: 600; white-space: nowrap; }
@keyframes e-wechsel { 0%, 26% { transform: translateY(0); } 33%, 59% { transform: translateY(-1.5em); } 66%, 92% { transform: translateY(-3em); } 100% { transform: translateY(-4.5em); } }

/* ---- Hannover (e-ort): die Nadel faellt auf "Hannover" und wirft Ringe ---- */
.seitenkopf h1.e-ort { max-width: 20ch; }
.e-ort-wort { position: relative; display: inline-block; white-space: nowrap; background: linear-gradient(var(--faden), var(--faden)) 0 94% / 100% .1em no-repeat; animation: e-unter .6s cubic-bezier(.6, 0, .3, 1) 1.1s backwards; }
.e-nadel { position: relative; width: .62em; height: .62em; margin-right: .16em; vertical-align: .07em; display: inline-grid; place-items: center; border-radius: 50%; background: var(--faden); color: #14161A; animation: e-fall .7s cubic-bezier(.3, 1.5, .5, 1) .5s backwards; }
.e-nadel .zeichen { margin: 0; width: .38em; height: .38em; color: inherit; vertical-align: 0; }
.e-nadel::before, .e-nadel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--faden); opacity: 0; animation: e-ring 2.6s ease-out 1.2s infinite; }
.e-nadel::after { animation-delay: 2.5s; }
@keyframes e-fall { from { opacity: 0; transform: translateY(-1.4em); } }
@keyframes e-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }

/* ---- Web & SEO (e-scan): die Lupe faehrt ueber den ersten Satz ---- */
.seitenkopf h1.e-scan { font-size: clamp(30px, 3.5vw, 50px); }
.e-scan-satz { position: relative; display: inline-block; white-space: nowrap; padding-right: .8em; background: linear-gradient(var(--faden), var(--faden)) 0 94% / 100% .09em no-repeat; animation: e-unter 1.3s cubic-bezier(.5, 0, .3, 1) .4s backwards; }
.e-scan-satz .e-lupe { position: absolute; left: calc(100% - .6em); top: .28em; margin: 0; animation: e-scan 1.3s cubic-bezier(.5, 0, .3, 1) .4s backwards; }
@keyframes e-scan { from { left: 0; } }
.e-scan .e-dann { animation-delay: 1.7s; }

/* ---- Marketing (e-folge): erst eins, dann zwei ---- */
.seitenkopf h1.e-folge { max-width: none; display: grid; gap: .16em; }
.e-folge-satz { display: flex; align-items: center; gap: .32em; animation: e-auf .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 800ms + 200ms); }
.e-folge-zahl { flex: none; display: grid; place-items: center; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--faden); color: #14161A; font: 600 .5em/1 DM, sans-serif; letter-spacing: 0;
  animation: e-station .5s cubic-bezier(.2, 1.3, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 800ms + 350ms); }
.e-folge-zahl { width: 2em; height: 2em; }

/* ---- Software & KI (e-wegfall): der erste Satz wird gestrichen, der zweite geschrieben ---- */
.seitenkopf h1.e-wegfall { max-width: 20ch; }
.e-weg-satz { background: linear-gradient(var(--faden), var(--faden)) 0 56% / 100% .09em no-repeat; color: var(--leise); animation: e-wegfall 1s cubic-bezier(.6, 0, .3, 1) .6s backwards; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes e-wegfall { from { background-size: 0 .09em; color: var(--text); } }
.e-wort { display: inline-block; animation: e-wort .01s linear backwards; animation-delay: calc(var(--i, 0) * 140ms + 1.7s); }
@keyframes e-wort { from { opacity: 0; } }
.e-worte .e-wort { animation: e-auf .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 500ms); }
.e-marke-strich { display: inline-block; width: .08em; height: .82em; margin-left: .08em; vertical-align: -.06em; background: var(--faden); animation: e-blink 1s steps(2, start) infinite; }
@keyframes e-blink { to { visibility: hidden; } }

/* ---- Kundenkonsole (e-einort): drei Dinge, ein Ort ---- */
.seitenkopf h1.e-einort { max-width: 19ch; }
.e-ding { background: linear-gradient(var(--faden), var(--faden)) 0 94% / 100% .09em no-repeat; animation: e-unter .45s cubic-bezier(.6, 0, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 350ms + 300ms); }
.e-einort-ziel { margin-left: 0; animation-delay: 1.5s; white-space: nowrap; }

/* ---- Einzelleistung (e-stempel): das Zeichen der Leistung wird gestempelt ---- */
.seitenkopf h1.e-stempel { max-width: 16ch; }
.e-stempel-marke { position: relative; display: inline-grid; margin-right: .26em; vertical-align: -.12em; place-items: center; width: 1.05em; height: 1.05em; border-radius: .24em; background: var(--faden); color: #14161A; animation: e-stempel .55s cubic-bezier(.3, 1.6, .4, 1) .25s backwards; }
.e-stempel-marke .zeichen { margin: 0; width: .56em; height: .56em; color: inherit; vertical-align: 0; }
.e-stempel-marke::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--faden); opacity: 0; animation: e-ring 1s ease-out .7s 1; }
@keyframes e-stempel { from { opacity: 0; transform: scale(2.2) rotate(-14deg); } }
.e-stempel .e-mark { animation-delay: .8s; }

/* ---- Branchen-Uebersicht (e-bildkarte): jede Branche mit ihrem Symbolbild ---- */
.e-bildkarte { overflow: hidden; }
.e-bildkarte-bild { display: block; margin: calc(-1 * var(--a3)) calc(-1 * var(--a3)) var(--a3); aspect-ratio: 21 / 9; overflow: hidden; background: var(--grund-2); }
.e-bildkarte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.e-bildkarte:hover .e-bildkarte-bild img, .e-bildkarte:focus-visible .e-bildkarte-bild img { transform: scale(1.06); }

/* ---- 404 (e-vier): die Null ist eine Schleife des Fadens ---- */
.e-vier { display: flex; align-items: center; margin: var(--a6) 0 0; font: 600 clamp(110px, 24vw, 300px)/.85 Clash, sans-serif; letter-spacing: -.04em; color: var(--text); }
.e-vier svg { height: .86em; width: auto; overflow: visible; margin: 0 .02em; }
.e-vier ellipse { fill: none; stroke-linecap: round; }
.e-vier-bahn { stroke: var(--faden); stroke-width: 15; stroke-dasharray: 1; animation: e-ziehen 1.4s cubic-bezier(.6, 0, .3, 1) .3s backwards; }
.e-vier-perle { stroke: var(--text); stroke-width: 19; stroke-dasharray: .001 .999; animation: e-ziehen 4.5s linear 1.7s infinite, e-auf .3s 1.7s backwards; }

@media (max-width: 760px) {
  .seitenkopf h1.e-suche { font-size: clamp(24px, 7.6vw, 40px); }
  .seitenkopf h1.e-schleife { font-size: clamp(26px, 7.4vw, 40px); }
  .e-ring .e-bahn { stroke-width: 4; } .e-ring .e-lauf { stroke-width: 6; }
  .seitenkopf h1.e-rede { font-size: clamp(26px, 7.4vw, 38px); }
  .seitenkopf h1.e-scan { font-size: clamp(22px, 6.4vw, 34px); }
  .e-faecher ul { grid-template-columns: 1fr 1fr; }
  .e-buehne-bild { aspect-ratio: 4 / 3; }
  .e-buehne-marke { font-size: var(--t2); left: var(--a2); bottom: var(--a2); }
  .e-faecher a { padding: var(--a2); }
  .seitenkopf h1.e-besetzung { flex-direction: column; font-size: clamp(30px, 9.4vw, 44px); }
  .e-laufband-reihe span { font-size: var(--t3); }
  .e-finden-feld { min-height: 56px; font-size: 24px; }
  .e-wege { grid-template-columns: 1fr; }
  .e-wege a { grid-template-columns: auto 1fr; column-gap: var(--a2); align-items: center; }
  .e-wege .zeichen--gross { grid-row: span 2; margin: 0; }
  .e-strecke a { font-size: var(--t1); }
  .e-station { width: 42px; height: 42px; } .e-strecke ol::before { top: 19px; }
  .e-knoten text { display: none; } .e-knoten circle { r: 16px; }
  .e-kern circle { r: 110px; } .e-kern text { font-size: 44px; } .e-kern text:first-of-type { transform: translateY(-14px); } .e-kern text:last-of-type { transform: translateY(22px); }
}
@media (prefers-reduced-motion: reduce) {
  .e-suche .e-feld, .e-tipp, .e-dann, .e-stein, .e-luecke, .e-ring .e-bahn, .e-ring .e-lauf,
  .e-blase, .e-wege li, .e-mark, .e-strecke ol::before, .e-station, .e-mit, .e-fuer, .e-rolle, .e-laufband-reihe, .e-finden, .e-scan-satz, .e-scan-satz .e-lupe, .e-folge-satz, .e-folge-zahl, .e-weg-satz, .e-wort, .e-worte .e-wort, .e-marke-strich, .e-ding, .e-stempel-marke, .e-stempel-marke::after, .e-vier-bahn, .e-vier-perle, .e-wechsel-rolle, .e-ort-wort, .e-nadel, .e-nadel::before, .e-nadel::after, .e-faecher li, .e-buehne-bild, .e-buehne-bild img, .e-buehne-marke, .e-schalter button, .sy-gefiltert [data-sy-bereich] .sy-karte { animation: none; }
  .e-laufband { overflow-x: auto; }
}

.e-quelle { margin: var(--a3) 0 0; font-size: var(--t1); color: var(--leise); }
.e-quelle a { color: inherit; }