/* Eine Linie (Umbau ab 13.11.2026, Konzept 08 und Bauauftrag 11 im Drive unter Claude/Chris Sound Website/Design).
   Gilt nur auf umgebauten Seiten: sie tragen am <body> die Klasse el und laden diese Datei nach site.css, pages.css und
   motion.css. Jeder Selektor beginnt mit .el, deshalb stoesst nichts mit den alten Klassen zusammen.
   Farben kommen aus den Tokens von site.css (hell und dunkel), hier steht nur, was dort fehlt.
   Bausteine: Text, Foto, Glas auf Foto, Kopf, Zweispalter, Kartenreihe, Auftritt, Kapitel mit Faden, grosses Foto,
   Regionenwahl, Fragen, Schluss, Grundbewegung. Vorlage: Design/10 MUSTERSEITE Hochzeit Artefakt Quelle/hochzeit.html */

.el {
  --sans: var(--font); --kurve: var(--ease); --on-cu: #1B120C; --tinte: #17191F; --rand: 16px;
  /* Glasdicke wie im Cortex (cortex.html, --lg-dicke dunkel): Kupfer links, Petrol rechts. Auf Fotos ist das Glas immer dunkel */
  --glas-dicke: inset 0 0 22px 1px rgb(255 255 255 / .06), inset 0 -16px 24px -18px rgb(0 0 0 / .42), inset 0 2px 1px -1px rgb(255 255 255 / .38), inset 2px 0 2px -1px rgb(210 119 74 / .34), inset -2px 0 2px -1px rgb(127 175 180 / .40);
}
@media (min-width: 768px) { .el { --rand: 24px; } }
@media (min-width: 1100px) { .el { --rand: 32px; } }

/* Abschnitt: 96 px oben und unten, Telefon 64, zwei helle Gruende im Wechsel */
.el .ab { padding-block: 96px; }
.el .ab.zwei-grund { background: var(--bg2); }
/* --grund kennt die Farbe des Abschnitts, damit Punkte und Musiknote am Faden die Linie verdecken koennen, ohne als Scheibe sichtbar zu sein */
.el .ab { --grund: var(--bg); }
.el .ab.zwei-grund { --grund: var(--bg2); }
@media (max-width: 767px) { .el .ab { padding-block: 64px; } }

/* Text */
.el .et { display: inline-flex; align-items: center; gap: 12px; font: 600 13px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cu-text); }
.el .et::before { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .6; }
.el .ti { font: 400 clamp(2.5rem, 5.4vw, 4rem)/.98 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.el .cu-wort { color: var(--cu-text); }
.el .strich { display: block; width: 72px; height: 2px; border-radius: 2px; background: var(--cu-deep); }
.el .einl { font: 400 18px/1.6 var(--sans); color: var(--muted); max-width: 640px; }
.el .ak { display: grid; gap: 16px; justify-items: start; max-width: 736px; margin-bottom: 48px; }
.el .nr { font: 400 28px/1 var(--serif); color: var(--cu-text); }
.el .ze { font: 400 clamp(1.75rem, 3.2vw, 2.25rem)/1.05 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.el .fl { color: var(--muted); max-width: 640px; }
.el .kt { font: 600 20px/1.3 var(--sans); }
.el .kx { font: 400 15px/1.6 var(--sans); color: var(--muted); }
/* Verweise im Fliesstext */
.el main :is(.fl, .einl, .kx, .nach, .fragen .a, .feld) a:not(.btn):not(.lnk) { color: var(--text); text-decoration: underline; text-decoration-color: var(--cu-text); text-underline-offset: 3px; }
.el .nach { margin-top: 32px; max-width: 640px; color: var(--muted); }
.el .lnk svg { flex: none; }

/* Knoepfe: Kupferknopf .btn-cu und Verweis .lnk kommen aus site.css. Der Geisterknopf steht auf dem Seitengrund als Umriss,
   Glas nur auf Fotos (Konzept 5) */
.el main .btn-ghost:not(.glas-foto) { background: transparent; color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px currentColor; isolation: auto; }
.el main .btn-ghost:not(.glas-foto)::after { display: none; }
.el .mehr { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: 600 15px/1 var(--sans); color: var(--cu-text); cursor: pointer; }
.el .kurz { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--zeilen, 4); overflow: hidden; }
.el .offen > .kurz, .el .offen .kurz { display: block; }
.el .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* Foto: 4 zu 3, Radius 28, steht still */
.el .foto { position: relative; margin: 0; border-radius: 28px; overflow: hidden; background: var(--bg2); }
.el .foto > img { width: 100%; height: 100%; object-fit: cover; }
.el .vier-drei { aspect-ratio: 4 / 3; }
/* Ganzes Foto ohne Beschnitt (Miss Freckles erlaubt keinen Zuschnitt, Feinschliff 13.11.2026): der Rahmen nimmt das
   Seitenverhaeltnis des Fotos aus width und height, keine Zitatplatte. Hochformat mit begrenzter Breite, mittig.
   Gleiche Loesung wie .ganz-bild (linie-region.css) und .ganz (linie-leistung.css), hier fuer alle Seiten */
.el .foto.ganz-bild { aspect-ratio: auto; height: auto; }
.el .foto.ganz-bild > img { display: block; height: auto; }
.el .foto.ganz-bild.hochkant { justify-self: start; align-self: start; width: min(100%, 420px); }
.el .zwei > .foto.ganz-bild.hochkant { justify-self: center; align-self: center; }

/* Glas auf Foto, Einstellung vom Cortex (Klasse .glas): Toenung, Unschaerfe 20 px mit Saettigung 160, Glanzkante oben,
   feiner Randverlauf, Glasdicke, tiefer Schatten. Das ist das Milchglas fuer Safari, Firefox und Telefon.
   In Chromium am Rechner rechnet linie.js die echte Lichtbrechung dazu (data-el-lg, unten) */
.el .glas-foto { position: relative; background: rgb(16 19 22 / .62); color: var(--i-text);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(201 205 209 / .16), var(--glas-dicke), 0 16px 40px -16px rgb(0 0 0 / .65); }
.el .glas-foto::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / .22), transparent 38%, rgb(201 205 209 / .16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.el .marke.glas-foto, .el .btn.glas-foto { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
.el .marke { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 12px; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.el .btn.glas-foto { color: var(--i-text); }
/* Echte Lichtbrechung (nur Chromium, Zeiger fein, ab 768 px, ohne reduzierte Transparenz, gesetzt von linie.js) */
.el .glas-foto[data-el-lg] { -webkit-backdrop-filter: var(--el-lg-f) saturate(170%) brightness(1.03); backdrop-filter: var(--el-lg-f) saturate(170%) brightness(1.03); }
/* Fotocredit als kleines Glas */
.el a.credit span { background: rgb(16 19 22 / .64); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(201 205 209 / .16), inset 2px 0 2px -1px rgb(210 119 74 / .34), inset -2px 0 2px -1px rgb(127 175 180 / .40), 0 8px 20px -10px rgb(0 0 0 / .6); }
.el a.credit:hover span { background: rgb(16 19 22 / .82); }
/* Liegt eine Zitatplatte auf dem Foto, wandert der Credit nach rechts oben */
.el .foto.mit-platte > a.credit { top: 8px; bottom: auto; align-items: flex-start; }
/* Zitatplatte: links unten, hoechstens 70 Prozent der Fotobreite, Serif 20 px, innen 16, Radius 16 */
.el .platte { position: absolute; z-index: 1; left: 16px; bottom: 16px; max-width: 70%; margin: 0; padding: 16px; border-radius: 16px; font: 400 20px/1.3 var(--serif); letter-spacing: -.005em; text-wrap: pretty; }
@media (max-width: 767px) { .el .platte { left: 12px; bottom: 12px; max-width: 76%; padding: 12px 14px; font-size: 17px; } }
/* Am Telefon ohne Platte, wenn sie dort ein Gesicht verdecken wuerde (der Satz steht auch im Text daneben); der Credit
   geht dann zurueck nach rechts unten (Feinschliff 13.11.2026) */
@media (max-width: 767px) {
  .el .foto.platte-tel-aus .platte { display: none; }
  .el .foto.platte-tel-aus.mit-platte > a.credit { top: auto; bottom: 8px; align-items: flex-end; }
}
@media (prefers-reduced-transparency: reduce) {
  .el .glas-foto, .el .glas-foto[data-el-lg], .el a.credit span { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--island); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .el .glas-foto, .el a.credit span { background: rgb(16 19 22 / .86); } }

/* Kopf: ein Foto, randlos, steht still. Etikett aus Glas, h1, ein Satz, ein Kupferknopf. Die Kopfzeile der Website liegt
   als Glas darueber, deshalb ist der Kopf um ihre Hoehe hoeher */
.el .kopf { position: relative; display: grid; align-items: end; min-height: calc(min(78vh, 720px) + var(--navh)); overflow: hidden; color: var(--i-text); }
/* Bildausschnitt je Foto: --pos am Rechner, --pos-tel fuer das quadratische Foto am Telefon (Gesichter frei) */
.el .kopf > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.el .kopf .schleier { position: absolute; inset: 0; background: linear-gradient(90deg, #0E1114D9 0%, #0E111499 30%, #0E111400 52%); }
.el .kopf .innen { position: relative; z-index: 1; padding-block: 64px; }
.el .kopf .spalte { display: grid; gap: 16px; justify-items: start; width: min(440px, 38vw); }
.el .kopf h1 { font: 400 clamp(2.25rem, 4vw, 3.5rem)/.96 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.el .kopf .btn-cu { margin-top: 8px; }
@media (max-width: 899px) {
  .el .kopf { display: block; min-height: 0; padding-top: calc(var(--navh) + env(safe-area-inset-top, 0px)); color: var(--text); }
  .el .kopf > img { position: static; height: auto; aspect-ratio: 1 / 1; object-position: var(--pos-tel, var(--pos, 50% 50%)); }
  .el .kopf .schleier { display: none; }
  .el .kopf .innen { position: static; padding-block: 32px 48px; }
  .el .kopf .spalte { width: auto; }
  .el .kopf .marke { position: absolute; z-index: 2; top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 32px); left: max(var(--rand), env(safe-area-inset-left, 0px)); }
  .el .kopf > a.credit { top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 100vw - 52px); bottom: auto; }
  /* Steht das Gesicht im Kopffoto ganz oben, wandert das Etikett am Telefon nach links unten, ueber den Credit
     (Feinschliff 13.11.2026: Event DJ, Event DJ Muenchen, Hochzeitstelefon, Partner) */
  .el .kopf.marke-unten .marke { top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 100vw - 92px); }
}

/* Zweispalter: halb und halb, Foto 4 zu 3, Text frei und mittig zur Fotohoehe, Seiten wechseln */
.el .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.el .zwei + .zwei { margin-top: 96px; }
.el .zwei .wort { display: grid; gap: 16px; justify-items: start; padding-right: 32px; }
.el .zwei.foto-links .wort { padding: 0 0 0 32px; }
@media (max-width: 767px) {
  .el .zwei { grid-template-columns: 1fr; gap: 24px; }
  .el .zwei + .zwei { margin-top: 64px; }
  .el .zwei .wort, .el .zwei.foto-links .wort { padding: 0; }
  .el .zwei .foto { order: -1; }
}

/* Kartenreihe: drei oder vier Karten, Zeilen laufen ueber alle Karten durch (subgrid) */
.el .reihe { display: grid; grid-template-columns: repeat(var(--spalten, 4), 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.el .karte { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 12px; align-items: start; padding: 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow 180ms var(--kurve); }
.el a.karte:hover { box-shadow: inset 0 0 0 1px var(--cu-deep); }
.el .karte > :last-child { align-self: end; }
/* Verweis als Fuss der Karte: alle Verweise einer Reihe beginnen auf derselben Linie, auch wenn einer auf zwei Zeilen
   umbricht (Feinschliff 13.11.2026, Tegernsee und Chiemsee). Die Zeile selbst ist ueber das Subgrid fuer alle gleich */
.el .karte > .lnk:last-child { align-self: start; }
/* Karte ohne Fuss in einer Reihe mit Fuss-Karten (Ratgeber "Erscheint bald"): der Text beginnt oben wie bei den anderen */
.el .karte > .kx:last-child { align-self: start; }
.el .reihe.ohne-fuss .karte { grid-row: span 3; }
.el .reihe.ohne-fuss .karte > :last-child { align-self: start; }
.el .karte .lnk { min-height: 0; }
.el .kz { display: flex; align-items: center; gap: 12px; }
.el .sym { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg2); color: var(--cu-text); }
.el .zwei-grund .sym { background: var(--bg); }
.el .sym svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 959px) { .el .reihe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .el .reihe { grid-template-columns: 1fr; } }

/* Auftritt: der eine Ort der Seite, der mehr darf. Equalizer, Laufband und Licht kommen aus motion.js */
.el .auftritt { position: relative; isolation: isolate; overflow: hidden; }
.el .auftritt [data-m~="equalizer"] { width: 100%; }
.el .lauf-rahmen { overflow: clip; margin-top: 32px; }
/* Laufband gleich unter einem Abschnittskopf ("Wo ich aufgelegt habe", Regionalseiten): 48 px nach der Leiter aus
   Etikett, Ueberschrift und Kupferstrich, auch am Telefon (Feinschliff 13.11.2026) */
.el .wrap:has(+ .lauf-rahmen) > .ak:last-child { margin-bottom: 0; }
.el .wrap:has(> .ak:last-child) + .lauf-rahmen { margin-top: 48px; }

/* Kapitel: Foto links bleibt stehen, Liste rechts, daneben der Faden mit Musiknote wie im Tagesablauf der Startseite */
.el .kapitel { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.el .kapitel > .foto { position: sticky; top: calc(var(--navh) + env(safe-area-inset-top, 0px) + 32px); }
/* Faden mit Musiknote, gebaut wie der Herz-Faden im Ablauf von trau-tanja.com (Chris 13.11.2026: "Nimm dir da als Inspiration und
   Referenz die Website von Tanja ... nicht als Herz, sondern so als Musiknote, aber das Pulsieren, so dass es am Ende, wenn es bei
   Party ankommt, dass es dann groesser wird. Wir koennen sogar noch eine kleine Feieranimation dazu machen").
   Gepunktete Linie von der ersten bis zur letzten Station, die Kupferlinie waechst mit --lauf. Die Note ist die vom Tagesablauf der
   Startseite (kein Kreis, nur Note mit Kupferschein). Sie laeuft dem Scrollen weich nach, klopft an jeder Station einmal und an der
   letzten gross, bleibt dort groesser und wirft einmal ein paar kleine Noten. Ohne Skript und bei reduzierter Bewegung: alle
   Stationen voll, Linie ganz, keine Note. Kein Dauerlauf. */
.el .faden { position: relative; padding-left: 48px; --feder: cubic-bezier(.3, 1.35, .5, 1); }
.el .faden::before { content: ""; position: absolute; left: 16.5px; top: var(--von, 8px); height: var(--weg, calc(100% - 16px)); border-left: 2px dotted color-mix(in srgb, var(--muted) 42%, transparent); }
.el .faden::after { content: ""; position: absolute; left: 16px; top: var(--von, 8px); height: var(--weg, calc(100% - 16px)); width: 3px; border-radius: 2px; background: var(--cu-deep); transform-origin: top; }
.el .faden.lebt::after { transform: scaleY(var(--lauf, 0)); }
.el .faden .note { display: none; }
.el .faden.lebt .note { display: grid; place-items: center; position: absolute; z-index: 2; left: .5px; top: -17px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s var(--kurve); will-change: transform;
  background: radial-gradient(circle, var(--grund, var(--bg)) 0 40%, transparent 41%), radial-gradient(circle, hsl(22 80% 62% / .34), transparent 70%); }
.el .faden.lebt .note.da { opacity: 1; }
.el .faden .note svg { width: 22px; height: 22px; fill: none; stroke: var(--cu-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px hsl(22 90% 60% / .55)); transition: scale .5s var(--feder); }
:root[data-theme="dark"] .el .faden .note svg, :root[data-theme="dark"] .el .faden .funke svg { stroke: var(--cu-hi); }
.el .faden .note.gross svg { scale: 1.32; }
.el .faden .note.klopft svg { animation: el-klopfen .6s var(--feder) 1; }
.el .faden .note.klopft-gross svg { animation: el-klopfen-gross .8s var(--feder) 1; }
@keyframes el-klopfen { 30% { scale: 1.28; } }
@keyframes el-klopfen-gross { 30% { scale: 1.75; } 55% { scale: 1.1; } 75% { scale: 1.5; } }
/* Feier an der letzten Station: ein paar kleine Noten fliegen einmal auf, nur transform und opacity, danach entfernt das Skript sie */
.el .faden .funke { position: absolute; z-index: 1; left: 8.5px; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; opacity: 0; animation: el-funke 1.25s var(--kurve) var(--warte, 0ms) 1 forwards; }
.el .faden .funke svg { display: block; width: 100%; height: 100%; fill: none; stroke: var(--cu-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes el-funke { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(0deg); } 14% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -60px)) scale(1) rotate(var(--dreh, 20deg)); } }
.el .kl { margin: 0; padding: 0; list-style: none; }
.el .kl li { position: relative; display: grid; gap: 4px; justify-items: start; padding: 16px 0; border-bottom: 1px solid var(--line); }
.el .kl li:first-child { padding-top: 0; }
.el .kl li::before { content: ""; position: absolute; z-index: 1; left: -37px; top: 16px; width: 13px; height: 13px; border-radius: 50%; background: var(--cu-deep); box-shadow: 0 0 0 3px var(--grund, var(--bg)); }
.el .kl li:first-child::before { top: 0; }
.el .faden.lebt .kl li::before { background: var(--grund, var(--bg)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted) 70%, transparent), 0 0 0 3px var(--grund, var(--bg)); }
.el .faden.lebt .kl li.an::before { background: var(--cu-deep); box-shadow: inset 0 0 0 1.5px var(--cu-deep), 0 0 0 3px var(--grund, var(--bg)); animation: el-punkt .6s var(--feder) 1; }
@keyframes el-punkt { 0% { scale: .2; } }
.el .wann { font: 600 13px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cu-text); transition: color .3s var(--kurve); }
.el .faden.lebt .kl li:not(.an) .wann { color: var(--muted); }
@media (max-width: 767px) { .el .kapitel { grid-template-columns: 1fr; } .el .kapitel > .foto { position: relative; top: 0; } }

/* Grosses Foto: eines je Seite, 16 zu 9, Zitat auf einer Glasplatte links unten */
.el .gross { aspect-ratio: 16 / 9; }
.el .gross .platte { left: 32px; bottom: 32px; max-width: min(480px, calc(100% - 64px)); padding: 24px; border-radius: 20px; font: 400 clamp(1.25rem, 2.4vw, 1.75rem)/1.3 var(--serif); }
@media (max-width: 767px) { .el .gross { aspect-ratio: 4 / 5; } .el .gross .platte { left: 16px; right: 16px; bottom: 16px; max-width: none; padding: 16px 18px; } }

/* Regionenwahl: eine Zeile Kapselknoepfe, darunter ein Feld. Immer genau eine Region offen (linie.js) */
.el .kapseln { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.el .kapseln:empty { display: none; }
.el .kapsel { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--line); font: 600 15px/1 var(--sans); color: var(--text); cursor: pointer; transition: background 180ms var(--kurve); }
.el .kapsel:hover { box-shadow: inset 0 0 0 1px var(--cu-deep); }
.el .kapsel[aria-selected="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.el .feld { display: grid; gap: 16px; justify-items: start; align-content: start; min-height: 232px; padding: 32px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.el .feld article { display: contents; }
.el .feld article[hidden] { display: none; }
@media (max-width: 767px) {
  .el .kapseln { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--rand)); padding-inline: var(--rand); scrollbar-width: none; }
  .el .kapseln::-webkit-scrollbar { display: none; }
  .el .feld { padding: 24px; }
}

/* Fragen: eine Spalte, Zeilen mit Haarlinie, Winkel rechts */
.el .fragen { max-width: 760px; border-top: 1px solid var(--line); }
.el .fragen details { border-bottom: 1px solid var(--line); }
.el .fragen summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; list-style: none; font: 600 18px/1.3 var(--sans); cursor: pointer; }
.el .fragen summary::-webkit-details-marker { display: none; }
.el .fragen summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--cu-text); border-bottom: 2px solid var(--cu-text); transform: rotate(45deg); transition: transform 180ms var(--kurve); }
.el .fragen details[open] summary::after { transform: rotate(-135deg); }
.el .fragen .a { max-width: 640px; padding: 0 0 24px; color: var(--muted); }

/* Schluss: dunkel, mittig, Kupferlinie ueber die ganze Breite (an beiden Enden weich ausgeblendet), der Knopf steht still */
.el .schluss { position: relative; isolation: isolate; overflow: hidden; padding-block: 96px; background: var(--island); color: var(--i-text); text-align: center; }
.el .schluss .innen { display: grid; justify-items: center; }
.el .schluss .et, .el .schluss .cu-wort { color: var(--cu-hi); }
.el .schluss .ti { margin-top: 16px; }
.el .schluss p.text { max-width: 640px; margin-top: 24px; color: var(--i-muted); }
.el .schluss p a { color: var(--i-text); text-decoration: underline; text-decoration-color: var(--cu); text-underline-offset: 3px; }
.el .schluss .linie { display: block; width: 100%; height: 56px; margin-top: 48px; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent); }
.el .schluss .btn-cu { margin-top: 32px; }
.el .schluss .lnk { margin-top: 16px; color: var(--i-text); }
.el .schluss .lnk svg { stroke: var(--cu-hi) !important; }
.el .schluss p.neben { max-width: 640px; margin-top: 24px; font-size: 15px; color: var(--i-muted); }
@media (max-width: 767px) { .el .schluss { padding-block: 64px; } }

/* Grundbewegung: einblenden und 16 px steigen, einmal, 300 ms. Ohne Skript und bei reduzierter Bewegung steht alles da */
.el.el-js .ein { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--kurve), transform 300ms var(--kurve); transition-delay: calc(var(--stufe, 0) * 60ms); }
.el.el-js .ein.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .el.el-js .ein { opacity: 1; transform: none; transition: none; }
  .el .karte, .el .kapsel, .el .fragen summary::after, .el .kl li::before { transition: none; }
}