/* Licht ins Dunkel – Nacht-Töne, Korn, Bühne des Scroll-Intros und Bewegungsklassen.
   Das Intro ist nur sichtbar, wenn das Skript im <head> von index.html die Klasse .licht-an setzt.
   intro.js setzt zusätzlich .licht-laeuft; erst dann werden Kopfzeile und Überschrift der App für die Übergabe versteckt.
   Ohne funktionierendes intro.js bleibt die App also immer bedienbar. */

:root{
  --nacht-900:#060D0D;
  --nacht-800:#091514;
  --nacht-700:#0C2223;
  --licht-messing:#C39A48;
  --licht-gold:#E6D0A3;
  --licht-kern:#FFF6E3;
  --licht-text:#F3EBDD;
  --licht-text-dim:#8F8675;
  --licht-ease:cubic-bezier(.16,1,.3,1);
  /* „Licht“ in der Überschrift der Startseite: Messing, kursiv. Dieselbe Füllung nutzt das Intro am Ende. */
  --licht-wort-grad:linear-gradient(100deg,#7A5C22 0%,#9A762D 38%,#B38A3A 52%,#9A762D 66%,#7A5C22 100%);
}

/* ---------- Gemeinsam mit der App ---------- */
.licht-wort{font-style:italic;padding:0 .1em 0 .02em;margin:0 -.1em 0 -.02em;background-image:var(--licht-wort-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-licht-ziel]:focus,[data-licht-fokus]:focus{outline:none}
@media print{.licht-wort{background:none;color:#9A762D;-webkit-text-fill-color:currentColor}.licht{display:none!important}}

/* ---------- Grundzustand ---------- */
.licht{display:none}
html.licht-an .licht,.licht.licht-geht{display:block}
html.licht-an{background:var(--nacht-900)}
html.licht-an.licht-hell{background:#F1F6F4}
html.licht-an body{margin:0}

/* Übergabe an die App (nur im bewegten Intro): Kopfzeile blendet scrollgebunden ein,
   Überschrift und Vorzeile erscheinen erst, wenn die Intro-Zeile genau auf ihnen liegt. */
html.licht-laeuft:not(.licht-still) [data-licht-kopf]{opacity:var(--licht-kopf,0)}
html.licht-laeuft:not(.licht-still):not(.licht-uebergeben) [data-licht-ziel]{opacity:0}
html.licht-laeuft:not(.licht-still):not(.licht-uebergeben) [data-licht-folgt]{opacity:0}
[data-licht-folgt]{transition:opacity .8s var(--licht-ease)}
/* Standbild: Kopfzeile erst zeigen, wenn sie oben angekommen ist */
html.licht-laeuft.licht-still:not(.licht-frei) [data-licht-kopf]{opacity:0;visibility:hidden}
html.licht-laeuft.licht-still [data-licht-kopf]{transition:opacity .25s ease}

/* ---------- Bühne ---------- */
.licht-strecke{height:250vh;height:250svh}
@media (max-width:640px){.licht-strecke{height:220vh;height:220svh}}

.licht-buehne{position:fixed;left:0;right:0;top:0;height:100vh;height:100lvh;z-index:60;overflow:hidden;pointer-events:none;
  color:var(--licht-text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;contain:layout paint}
.licht-buehne.ist-weg{visibility:hidden}
.licht-geht .licht-buehne{transition:opacity .45s ease}
.licht-mass{position:absolute;left:0;top:0;width:0;height:100vh;height:100svh;visibility:hidden}

.licht-canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.licht-gl .licht-canvas{opacity:1}
.licht-hintergrund{position:absolute;inset:0;background:var(--nacht-900);will-change:opacity}

/* ---------- CSS-Licht (Rückfall ohne WebGL, erstes Bild vor dem Skript, Standbild) ---------- */
.licht-css{position:absolute;inset:0;transition:opacity .6s ease;
  --lx:58%;--ly:80svh;--ix:50%;--iy:68%;--g:9svh;--gi:.35;--fan:0;--e:0;--mr:12svh;--fr:0px;--fl:0}
@media (orientation:portrait){.licht-css{--lx:50%}}
.licht-gl .licht-css{opacity:0}
.lc-grund{position:absolute;inset:0;background:radial-gradient(120% 90% at var(--lx) var(--ly),var(--nacht-700) 0%,var(--nacht-800) 45%,var(--nacht-900) 80%)}
.lc-bild{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:var(--ix) var(--iy);will-change:transform;max-width:none}
.lc-bild:not([src]){display:none}
.lc-dunkel{filter:brightness(.05) saturate(.6)}
.lc-hell{opacity:var(--e);filter:sepia(.18) brightness(1.04);
  -webkit-mask-image:radial-gradient(circle at var(--ix) var(--iy),#000 0,rgba(0,0,0,.8) calc(var(--mr)*.35),rgba(0,0,0,0) var(--mr));
  mask-image:radial-gradient(circle at var(--ix) var(--iy),#000 0,rgba(0,0,0,.8) calc(var(--mr)*.35),rgba(0,0,0,0) var(--mr))}
.lc-strahlen{position:absolute;inset:0;opacity:var(--fan);mix-blend-mode:screen;
  background:
    repeating-conic-gradient(from 0deg at var(--lx) var(--ly),rgba(255,236,200,0) 0deg,rgba(255,236,200,.13) 1.2deg,rgba(255,236,200,0) 2.6deg,rgba(255,236,200,0) 6.5deg),
    repeating-conic-gradient(from 2deg at var(--lx) var(--ly),rgba(230,208,163,0) 0deg,rgba(230,208,163,.08) 2deg,rgba(230,208,163,0) 4deg,rgba(230,208,163,0) 11deg);
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.55) calc(var(--g)*.7),rgba(0,0,0,0) calc(var(--g)*1.8));
  mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 0,rgba(0,0,0,.55) calc(var(--g)*.7),rgba(0,0,0,0) calc(var(--g)*1.8))}
.lc-schein{position:absolute;inset:0;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--lx) var(--ly),rgba(255,246,227,calc(.85*var(--gi))) 0,rgba(230,208,163,calc(.45*var(--gi))) calc(var(--g)*.22),rgba(195,154,72,calc(.18*var(--gi))) calc(var(--g)*.6),rgba(195,154,72,0) var(--g))}
.lc-punkt{position:absolute;left:var(--lx);top:var(--ly);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--licht-kern);opacity:calc(1 - var(--fl));
  box-shadow:0 0 10px 3px rgba(255,236,200,.8),0 0 40px 12px rgba(230,208,163,.32),0 0 110px 36px rgba(195,154,72,.13);animation:licht-atmen 4.6s ease-in-out infinite}
.lc-flut{position:absolute;inset:0;background:linear-gradient(160deg,#F1F6F4 0%,#FFFFFF 58%,#FBF8F1 100%);
  -webkit-mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 calc(var(--fr) - 30svh),rgba(0,0,0,0) var(--fr));
  mask-image:radial-gradient(circle at var(--lx) var(--ly),#000 calc(var(--fr) - 30svh),rgba(0,0,0,0) var(--fr))}
.lc-vignette{position:absolute;inset:0;opacity:calc(1 - var(--fl));background:radial-gradient(130% 100% at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%)}
.lc-korn{position:absolute;inset:-60px;opacity:calc(.07*(1 - var(--fl)));mix-blend-mode:overlay;animation:licht-korn .8s steps(5) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes licht-atmen{0%,100%{transform:scale(.82);opacity:.78}50%{transform:scale(1.14);opacity:1}}
@keyframes licht-korn{0%{transform:translate(0,0)}20%{transform:translate(-22px,14px)}40%{transform:translate(18px,-26px)}60%{transform:translate(-12px,-8px)}80%{transform:translate(26px,20px)}100%{transform:translate(0,0)}}

/* ---------- Kopf im Intro ---------- */
.licht-kopf{position:absolute;left:0;right:0;top:0;max-width:1200px;margin:0 auto;padding:0 var(--gutter-inline);height:68px;box-sizing:border-box;display:flex;align-items:center;gap:12px;will-change:opacity}
.licht-marke{display:flex;align-items:center;gap:12px}
.licht-marke img{width:34px;height:34px;display:block;flex:none}
.licht-marke span{font-family:var(--font-serif-display);font-size:21px;line-height:1;font-weight:600;letter-spacing:-.012em;color:rgba(243,235,221,.78);white-space:nowrap}
@media (max-width:520px){.licht-marke span{display:none}}
.licht-skip{margin-left:auto;pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(230,208,163,.3);background:rgba(6,13,13,.42);color:var(--licht-gold);font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.licht-skip:hover{border-color:rgba(230,208,163,.65);color:var(--licht-kern);background:rgba(6,13,13,.6)}
.licht-skip:focus-visible{outline:2px solid var(--licht-gold);outline-offset:3px}
.licht-skip svg{width:16px;height:16px;flex:none}

/* ---------- Text ---------- */
/* Gleiche Spalte wie die Überschrift der Startseite (max. 1200 px, gleicher Seitenrand), damit Zeile 2 nahtlos übergeben werden kann. */
.licht-text{position:absolute;left:0;right:0;top:27vh;top:27svh;max-width:1200px;margin:0 auto;padding:0 var(--gutter-inline);box-sizing:border-box}
@media (max-width:640px){.licht-text{top:24vh;top:24svh}}
.licht-zeilen{display:grid;align-items:start}
.licht-z1,.licht-z2{grid-area:1/1;margin:0;font-family:var(--font-serif-display);font-size:var(--text-display-1);line-height:1.02;letter-spacing:-.026em;max-width:15ch;text-wrap:balance;will-change:transform}
.licht-z1{font-weight:400;color:var(--licht-text-dim)}
.licht-z1 span{opacity:.16}
.licht-z2{font-weight:560;color:var(--licht-text);opacity:0}
.licht-z2 > *{opacity:0}
.licht-z2 .licht-wort{
  background-image:
    linear-gradient(100deg,rgba(255,246,227,0) 42%,rgba(255,250,240,var(--glanz,0)) 50%,rgba(255,246,227,0) 58%),
    linear-gradient(100deg,rgba(195,154,72,var(--warm,1)) 0%,rgba(230,208,163,var(--warm,1)) 42%,rgba(255,246,227,var(--warm,1)) 58%,rgba(230,208,163,var(--warm,1)) 100%),
    var(--licht-wort-grad);
  background-size:300% 100%,100% 100%,100% 100%;
  background-position:var(--schimmer,100%) 0,0 0,0 0;background-repeat:no-repeat}
.licht-laeuft .licht-z2{opacity:1}
.licht-uebergeben .licht-z2{visibility:hidden}

/* ---------- Hinweis „Scrollen“ ---------- */
.licht-hinweis{position:absolute;left:50%;top:calc(100vh - 92px);top:calc(100svh - 92px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(230,208,163,.72);will-change:opacity}
.licht-hinweis i{position:relative;display:block;width:1px;height:40px;overflow:hidden;background:linear-gradient(rgba(230,208,163,0),rgba(230,208,163,.4))}
.licht-hinweis i::after{content:"";position:absolute;left:-1px;top:-10px;width:3px;height:10px;border-radius:2px;background:var(--licht-kern);box-shadow:0 0 8px 2px rgba(255,236,200,.55);animation:licht-tropfen 2.6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes licht-tropfen{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{opacity:1}100%{transform:translateY(52px);opacity:0}}

/* ---------- Standbild (Bewegung reduzieren, Datensparmodus) ---------- */
html.licht-still .licht-strecke{display:none}
html.licht-still .licht-buehne{position:relative;height:auto;min-height:440px;height:72vh;height:72svh;max-height:720px;z-index:auto;pointer-events:auto}
html.licht-still .licht-canvas,html.licht-still .licht-z2,html.licht-still .licht-hinweis{display:none}
html.licht-still .licht-z1{color:var(--licht-text)}
html.licht-still .licht-z1 span{opacity:1}
html.licht-still .licht-css{--gi:1;--fan:.8;--e:1}
html.licht-still .lc-punkt,html.licht-still .lc-korn{animation:none}

/* ---------- Startseite (Phase 3) ---------- */
/* Beraterkarte: Messing-Lichtring um die Initialen, dreht sich langsam */
.licht-ring{position:relative;box-shadow:0 8px 22px -8px rgba(195,154,72,.5)}
.licht-ring::before,.licht-ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;pointer-events:none}
.licht-ring::after{border:1px solid rgba(195,154,72,.26)}
.licht-ring::before{background:conic-gradient(rgba(195,154,72,0) 0deg,rgba(195,154,72,0) 190deg,rgba(195,154,72,.6) 290deg,#FFF3D6 345deg,rgba(195,154,72,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:licht-dreh 12s linear infinite}
@keyframes licht-dreh{to{transform:rotate(360deg)}}

/* „Sie haben bereits begonnen“: ein Lichtpunkt läuft langsam um den Rand */
@property --licht-winkel{syntax:"<angle>";inherits:false;initial-value:0deg}
.licht-rand{position:relative}
.licht-rand::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--licht-winkel),rgba(195,154,72,0) 0deg,rgba(195,154,72,0) 180deg,rgba(195,154,72,.7) 300deg,#F2D18E 342deg,rgba(195,154,72,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:licht-umlauf 6s linear infinite}
.licht-rand::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 16px 36px -20px rgba(195,154,72,.6)}
@keyframes licht-umlauf{to{--licht-winkel:360deg}}

/* Versicherungskarten: Objekt auf einer kleinen Lichtbühne. Desktop: Lichtkegel folgt dem Mauszeiger (licht/app.js),
   Handy: die Karten leuchten beim Hereinscrollen nacheinander auf. */
.licht-karte{position:relative;isolation:isolate}
.licht-karte::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--lx,50%) var(--ly,20%),rgba(236,214,170,.42),rgba(236,214,170,.12) 42%,rgba(236,214,170,0) 70%);
  opacity:var(--licht,0);transition:opacity .45s ease}
.licht-karte::after{content:"";position:absolute;inset:-1px;z-index:3;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(220px circle at var(--lx,50%) var(--ly,0%),rgba(195,154,72,.85),rgba(195,154,72,0) 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:var(--licht,0);transition:opacity .45s ease}
.licht-objekt{position:relative;display:flex;align-items:flex-end;justify-content:center;align-self:stretch;height:150px;margin:-26px -24px 2px;padding-bottom:12px;box-sizing:border-box;
  border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;border-bottom:1px solid var(--grey-100);
  background:radial-gradient(85% 70% at 50% 95%,rgba(247,238,220,.9) 0%,rgba(247,238,220,0) 72%),linear-gradient(180deg,rgba(255,255,255,0),rgba(251,248,241,.8))}
.licht-objekt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--lx,50%) var(--ly,30%),rgba(250,228,182,.75),rgba(250,228,182,.2) 45%,rgba(250,228,182,0) 72%);
  opacity:var(--licht,0);transition:opacity .45s ease}
.licht-karte[data-licht-an] .licht-objekt::before{animation:licht-aufleuchten 1.9s var(--licht-ease) var(--licht-verzug,0ms) both}
.licht-objekt::after{content:"";position:absolute;left:50%;bottom:13px;width:92px;height:12px;margin-left:-46px;border-radius:50%;background:radial-gradient(closest-side,rgba(70,52,28,.26),rgba(70,52,28,0))}
.licht-objekt picture{position:relative;z-index:1;display:block;line-height:0}
.licht-objekt img{display:block;width:128px;height:128px;transition:transform var(--dur-slow,420ms) var(--licht-ease)}
.licht-karte:hover .licht-objekt img{transform:translateY(-4px) scale(1.03)}
.licht-karte[data-licht-an]::before{animation:licht-aufleuchten 1.9s var(--licht-ease) var(--licht-verzug,0ms) both}
.licht-karte[data-licht-an]::after{animation:licht-aufleuchten-rand 1.9s var(--licht-ease) var(--licht-verzug,0ms) both}
@keyframes licht-aufleuchten{0%{opacity:0}35%{opacity:1}100%{opacity:.45}}
@keyframes licht-aufleuchten-rand{0%{opacity:0}35%{opacity:.9}100%{opacity:0}}

/* Produkt-Intro: das Objekt groß, schwebt langsam, ein Schimmer läuft darüber */
.licht-held{position:relative;display:block;width:200px;height:200px;margin:-6px 0 -2px -12px}
.licht-held::before{content:"";position:absolute;inset:-10% -22% -14% -22%;background:radial-gradient(closest-side at 50% 64%,rgba(246,228,190,.85),rgba(246,228,190,.28) 55%,rgba(246,228,190,0));animation:licht-atem-held 6s ease-in-out infinite}
.licht-held::after{content:"";position:absolute;left:50%;bottom:2px;width:60%;height:18px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(50,38,20,.36),rgba(50,38,20,0));animation:licht-schatten 6s ease-in-out infinite}
.licht-schwebe{position:absolute;inset:0;z-index:1;animation:licht-schweben 6s ease-in-out infinite}
.licht-schwebe picture,.licht-schwebe img{display:block;width:100%;height:100%}
.licht-glanz{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,251,240,.75) 50%,rgba(255,255,255,0) 58%);background-size:300% 100%;background-repeat:no-repeat;background-position:120% 0;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:licht-glanz 7s ease-in-out 1.2s infinite}
@keyframes licht-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes licht-schatten{0%,100%{transform:translateX(-50%) scale(1);opacity:1}50%{transform:translateX(-50%) scale(.86);opacity:.65}}
@keyframes licht-glanz{0%,55%{background-position:120% 0}85%,100%{background-position:-20% 0}}
@keyframes licht-atem-held{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
@media (max-width:640px){.licht-held{width:168px;height:168px}}

/* ---------- Fragebogen (Phase 4) ---------- */
@property --licht-fortschritt{syntax:"<number>";inherits:true;initial-value:0}
@property --licht-zahl{syntax:"<integer>";inherits:false;initial-value:0}

/* Je weiter, desto heller: warmer Schein hinter der Karte, wächst mit den ausgefüllten Pflichtangaben */
.licht-raum{position:relative;isolation:isolate;transition:--licht-fortschritt 1.4s var(--licht-ease)}
.licht-raum::before{content:"";position:absolute;left:-140px;right:-140px;top:-64px;bottom:-64px;z-index:-1;pointer-events:none;
  background:radial-gradient(calc(36% + 22% * var(--licht-fortschritt)) calc(34% + 24% * var(--licht-fortschritt)) at 50% 40%,
    rgba(244,220,170,calc(.16 + .5 * var(--licht-fortschritt))) 0%,rgba(244,220,170,calc(.08 + .32 * var(--licht-fortschritt))) 55%,rgba(244,220,170,0) 100%)}
@media (max-width:979px){.licht-raum::before{left:-14px;right:-14px}}

/* Fortschrittslinie unter der Kopfzeile: Lichtstrahl in Messing mit leuchtender Spitze */
.licht-strahl{position:relative;background:linear-gradient(90deg,#9A762D 0%,#C39A48 60%,#E6D0A3 100%);box-shadow:0 0 8px rgba(195,154,72,.45)}
.licht-strahl::after{content:"";position:absolute;right:-3px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#FFF6E3;
  box-shadow:0 0 8px 3px rgba(255,236,200,.85),0 0 22px 8px rgba(230,208,163,.5)}

/* Prozentzahl zählt hoch statt zu springen; die echte Zahl bleibt für Screenreader im Text */
.licht-zahl{counter-reset:licht-zahl var(--licht-zahl);transition:--licht-zahl .9s var(--licht-ease)}
.licht-zahl::after{content:counter(licht-zahl)}
.licht-nur-lesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Seitenleiste: Verbindungslinien füllen sich mit Licht, Häkchen zeichnen sich selbst */
.licht-linie{position:relative}
.licht-linie::after{content:"";position:absolute;left:-.5px;right:-.5px;top:0;bottom:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(#E6D0A3,#C39A48);box-shadow:0 0 6px rgba(195,154,72,.55);transition:transform .8s var(--licht-ease)}
.licht-linie[data-voll="true"]::after{transform:scaleY(1)}
.licht-haken{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.licht-haken path{stroke-dasharray:21;stroke-dashoffset:21;animation:licht-zeichnen .55s var(--licht-ease) .15s forwards}
@keyframes licht-zeichnen{to{stroke-dashoffset:0}}

/* Schrittwechsel: „Weiter“ schiebt den neuen Schritt von rechts herein, „Zurück“ von links, kurz unscharf */
.tecis-reveal[data-anim^="licht-"]{transition:opacity .38s ease,transform .46s var(--licht-ease),filter .46s var(--licht-ease)}
.tecis-reveal[data-anim="licht-vor-aus"][data-state="hidden"]{opacity:0;transform:translateX(-22px);filter:blur(4px);transition:opacity .16s ease,transform .17s ease-in,filter .17s ease-in}
.tecis-reveal[data-anim="licht-zurueck-aus"][data-state="hidden"]{opacity:0;transform:translateX(22px);filter:blur(4px);transition:opacity .16s ease,transform .17s ease-in,filter .17s ease-in}
.tecis-reveal[data-anim="licht-vor-ein"][data-state="hidden"]{opacity:0;transform:translateX(30px);filter:blur(6px);transition:none}
.tecis-reveal[data-anim="licht-zurueck-ein"][data-state="hidden"]{opacity:0;transform:translateX(-30px);filter:blur(6px);transition:none}
.tecis-reveal[data-anim^="licht-"][data-state="shown"]{filter:none}

/* Uploads: Lichtschimmer, solange die Datei optimiert wird; danach zeichnet sich das Häkchen */
.licht-datei{position:relative;overflow:hidden}
.licht-datei[data-laedt="true"]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(230,208,163,0) 30%,rgba(230,208,163,.38) 50%,rgba(230,208,163,0) 70%);background-size:260% 100%;animation:licht-laden 1.6s linear infinite}
@keyframes licht-laden{from{background-position:130% 0}to{background-position:-30% 0}}
.licht-datei-haken{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.licht-datei-haken circle{stroke-dasharray:57;stroke-dashoffset:57;transform:rotate(-90deg);transform-origin:12px 12px;animation:licht-zeichnen .5s var(--licht-ease) forwards}
.licht-datei-haken path{stroke-dasharray:14;stroke-dashoffset:14;animation:licht-zeichnen .35s var(--licht-ease) .4s forwards}

/* Übersicht: die Abschnitte erscheinen nacheinander */
.licht-abschnitt{animation:licht-auftauchen .55s var(--licht-ease) both;animation-delay:calc((var(--licht-i,1) - 1) * 90ms)}
@keyframes licht-auftauchen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Übergabe nach dem Absenden (Phase 5, licht/uebergabe.js) ---------- */
.ue{position:fixed;inset:0;z-index:90;display:grid;place-items:center;opacity:0;transition:opacity .35s ease;font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.ue.ist-an{opacity:1}
.ue-schleier{position:absolute;inset:0;background:rgba(241,246,244,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .9s ease}
.ue.ist-hell .ue-schleier{background:#FBF8F1}
.ue-buehne{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:30px;padding:24px;text-align:center}
.ue-mitte{position:relative;width:212px;height:164px}
.ue-blatt{position:absolute;z-index:2;transform-origin:0 0;background:#fff;border:1px solid var(--border-subtle);border-radius:24px;box-shadow:var(--shadow-md);pointer-events:none;
  background-image:repeating-linear-gradient(180deg,transparent 0 46px,rgba(221,228,226,.7) 46px 47px)}

/* Mappe mit dem Objekt der Versicherung, darum die Messinglinie (Länge = Upload-Fortschritt) und ein umlaufender Lichtpunkt */
.ue-mappe{position:absolute;inset:0;opacity:0;transform:scale(.9);transition:opacity .45s ease,transform .6s var(--licht-ease)}
.ue.mappe-da .ue-mappe{opacity:1;transform:none}
.ue-linie{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ue-linie rect{fill:none;stroke-linecap:round}
.ue-spur{stroke:rgba(195,154,72,.22);stroke-width:2}
.ue-fort{stroke:#C39A48;stroke-width:2.6;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .5s var(--licht-ease),stroke-width .4s ease;filter:drop-shadow(0 0 4px rgba(230,208,163,.85))}
.ue-komet{stroke:#FFF3D6;stroke-width:3.2;stroke-dasharray:6 94;animation:ue-komet 1.8s linear infinite;filter:drop-shadow(0 0 6px rgba(255,236,200,.95))}
@keyframes ue-komet{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.ue-koerper{position:absolute;inset:16px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:linear-gradient(180deg,#F7F1E5 0%,#EADFC8 100%);box-shadow:0 18px 40px -18px rgba(60,45,20,.45),inset 0 1px 0 rgba(255,255,255,.75)}
.ue-reiter{position:absolute;top:-10px;left:16px;width:64px;height:14px;border-radius:8px 8px 0 0;background:#EFE6D3}
.ue-objekt{width:84px;height:84px;display:block;margin-top:6px}

/* Erfolg: Ring schließt sich → Mappe gleitet in die Initialen → daraus wird das Logo → es wird hell */
.ue.ist-erfolg .ue-komet{opacity:0;transition:opacity .3s ease}
.ue.ist-erfolg .ue-fort{stroke-width:3.4}
.ue-berater{position:absolute;left:62px;top:38px;width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:#17393A;color:#E6D0A3;font-family:var(--font-serif-display);font-size:30px;font-weight:600;letter-spacing:.02em;
  opacity:0;transform:scale(.6);transition:opacity .45s ease,transform .6s var(--licht-ease),border-radius .55s var(--licht-ease),box-shadow .6s ease}
.ue-initialen{transition:opacity .3s ease}
.ue-haken{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ue-haken path{fill:none;stroke:#C39A48;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.ue.ist-berater .ue-mappe{opacity:0;transform:translateY(-6px) scale(.35);transition:opacity .5s ease,transform .6s var(--licht-ease)}
.ue.ist-berater .ue-berater{opacity:1;transform:none;box-shadow:0 0 0 2px rgba(195,154,72,.45),0 14px 32px -12px rgba(23,57,58,.55)}
.ue.ohne-berater .ue-initialen{display:none}
.ue.ist-logo .ue-berater{border-radius:23px;box-shadow:0 0 0 0 rgba(195,154,72,0),0 16px 40px -14px rgba(23,57,58,.5)}
.ue.ist-logo .ue-initialen{opacity:0}
.ue.ist-logo .ue-haken path{animation:licht-zeichnen .6s var(--licht-ease) .15s forwards;filter:drop-shadow(0 0 6px rgba(246,221,168,.95))}
.ue-schein{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,251,240,1),rgba(255,246,227,.8) 45%,rgba(255,246,227,0));opacity:0;transform:scale(0);
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1),opacity .6s ease}
.ue.ist-logo .ue-schein{opacity:.9;transform:scale(1.5)}
.ue.ist-hell .ue-schein{opacity:1;transform:scale(24)}
.ue-worte{display:grid;min-height:56px;align-items:center}
.ue-text,.ue-danke{grid-area:1/1;margin:0}
.ue-text{max-width:34ch;font-size:16px;line-height:1.5;color:var(--grey-700);transition:opacity .4s ease}
.ue-danke{font-family:var(--font-serif-display);font-size:clamp(36px,6vw,52px);line-height:1.05;letter-spacing:-.02em;font-weight:600;color:var(--text-strong);
  opacity:0;transform:translateY(10px);transition:opacity .7s ease .15s,transform .9s var(--licht-ease) .15s}
.ue.ist-hell .ue-text{opacity:0}
.ue.ist-hell .ue-danke{opacity:1;transform:none}
.ue-funken{position:absolute;inset:0;pointer-events:none}
.ue-funken i{position:absolute;bottom:42%;width:5px;height:5px;border-radius:50%;background:#FFF3D6;box-shadow:0 0 8px 2px rgba(230,208,163,.8);opacity:0}
.ue-funken i:nth-child(1){left:38%}.ue-funken i:nth-child(2){left:46%;width:4px;height:4px}.ue-funken i:nth-child(3){left:53%}.ue-funken i:nth-child(4){left:61%;width:3px;height:3px}
.ue-funken i:nth-child(5){left:42%;width:3px;height:3px}.ue-funken i:nth-child(6){left:57%;width:4px;height:4px}.ue-funken i:nth-child(7){left:49%;width:3px;height:3px}.ue-funken i:nth-child(8){left:65%}
.ue.ist-hell .ue-funken i{animation:ue-steigen 2.6s ease-out forwards}
.ue.ist-hell .ue-funken i:nth-child(2n){animation-delay:.25s}.ue.ist-hell .ue-funken i:nth-child(3n){animation-delay:.5s}
@keyframes ue-steigen{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-150px)}}
.ue.ist-weg{opacity:0;transition:opacity .6s ease}

/* Fehler: der Ring hält an, die Ebene blendet ruhig aus */
.ue.ist-fehler .ue-komet{animation-play-state:paused}
.ue.ist-fehler .ue-mappe{opacity:0;transform:scale(1.05);transition:opacity .35s ease,transform .4s ease}
.ue.ist-fehler{opacity:0;transition:opacity .45s ease .1s}

/* ---------- Danke-Seite im Morgenlicht ---------- */
.licht-danke::before{content:"";position:absolute;left:-10%;top:-30%;width:80%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(246,226,186,.55),rgba(246,226,186,0))}
.licht-zeichen{display:block;width:64px;height:64px;filter:drop-shadow(0 10px 22px rgba(23,57,58,.25))}
.licht-zeichen svg{display:block;width:100%;height:100%;overflow:visible}
.licht-zeichen rect{fill:#17393A}
.licht-zeichen path{fill:none;stroke:#C39A48;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:44;stroke-dashoffset:44;
  animation:licht-zeichnen .7s var(--licht-ease) .45s forwards;filter:drop-shadow(0 0 5px rgba(246,221,168,.9))}
.licht-funken{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.licht-funken i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;background:#F6DDA8;box-shadow:0 0 8px 2px rgba(230,208,163,.6);opacity:0;animation:licht-aufsteigen 11s linear infinite}
.licht-funken i:nth-child(1){left:8%;animation-delay:0s}.licht-funken i:nth-child(2){left:22%;animation-delay:3.5s;width:3px;height:3px}
.licht-funken i:nth-child(3){left:41%;animation-delay:6s}.licht-funken i:nth-child(4){left:58%;animation-delay:1.8s;width:3px;height:3px}
.licht-funken i:nth-child(5){left:72%;animation-delay:8s}.licht-funken i:nth-child(6){left:86%;animation-delay:4.6s;width:3px;height:3px}.licht-funken i:nth-child(7){left:33%;animation-delay:9.5s;width:3px;height:3px}
@keyframes licht-aufsteigen{0%{opacity:0;transform:translateY(0)}12%{opacity:.8}70%{opacity:.5}100%{opacity:0;transform:translateY(-420px)}}

/* ---------- Feinschliff (Phase 7) ---------- */
/* Fragebogen: das Objekt der Versicherung statt der Icon-Kachel */
.licht-mini{position:relative;display:block;width:60px;height:60px;flex:none}
.licht-mini::before{content:"";position:absolute;left:-8%;right:-8%;top:18%;bottom:-6%;border-radius:50%;background:radial-gradient(closest-side,rgba(246,228,190,.75),rgba(246,228,190,0))}
.licht-mini picture,.licht-mini img{position:relative;display:block;width:100%;height:100%}
.licht-mini-klein{width:46px;height:46px}

/* Startseite: warmer Lichteinfall von oben links, wie der Nachklang des Intros */
.licht-morgen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 80% at 6% 0%,rgba(246,226,186,.5),rgba(246,226,186,0) 70%),linear-gradient(118deg,rgba(255,244,222,.6) 0%,rgba(255,244,222,0) 36%)}

/* Versicherungskarten in zentrierten Reihen: 5 · 3 + 2 · am Handy 2 Spalten, kompakt */
.licht-karte{flex:0 0 calc((100% - 64px) / 5);box-sizing:border-box}
@media (max-width:1179px){.licht-karte{flex-basis:calc((100% - 32px) / 3)}}
@media (max-width:719px){
  [data-licht-karten]{gap:12px!important}
  .licht-karte{flex-basis:calc((100% - 12px) / 2);min-height:0!important;padding:14px!important;gap:8px!important}
  .licht-karte .licht-objekt{height:112px;margin:-14px -14px 2px;padding-bottom:8px}
  .licht-karte .licht-objekt img{width:96px;height:96px}
  .licht-karte .licht-objekt::after{bottom:9px;width:70px;margin-left:-35px}
  .licht-karte-titel{font-size:17px!important}
  .licht-karte-text{font-size:12.5px!important;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  /* „Fragebogen starten“ als runder Pfeil-Knopf; der Text bleibt für Screenreader im Knopf */
  .licht-karte-los{font-size:0!important;gap:0!important;align-self:flex-end;justify-content:center;width:34px;height:34px;border-radius:50%;
    background:var(--tecis-yellow-100);color:var(--tecis-yellow-700)!important}
}
@media (max-width:339px){.licht-karte{flex-basis:100%}}

/* Ladezustand, solange der Berater-Link geprüft wird (erst nach kurzer Zeit sichtbar, damit nichts aufblitzt) */
.licht-lade{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;opacity:0;animation:licht-einblenden .4s ease .35s forwards}
.licht-lade span{flex:0 0 calc((100% - 64px) / 5);height:300px;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background-color:var(--surface-card);
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(246,226,186,.45) 50%,rgba(255,255,255,0) 70%);background-size:250% 100%;animation:licht-laden 1.6s linear infinite}
@media (max-width:1179px){.licht-lade span{flex-basis:calc((100% - 32px) / 3)}}
@media (max-width:719px){.licht-lade{gap:12px}.licht-lade span{flex-basis:calc((100% - 12px) / 2);height:230px}}
@keyframes licht-einblenden{to{opacity:1}}

/* Danke-Seite: So geht es weiter */
.licht-weiter{margin-top:32px;max-width:760px;padding:22px 24px 24px;border-radius:var(--radius-xl);background:rgba(255,255,255,.75);border:1px solid var(--border-subtle);
  box-shadow:0 18px 40px -26px rgba(23,57,58,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.licht-weiter-kopf{display:flex;align-items:center;gap:16px}
.licht-weiter-vorzeile{font-size:13.5px;font-weight:600;color:var(--tecis-yellow-700)}
.licht-weiter-titel{font-family:var(--font-serif-display);font-size:21px;line-height:1.25;font-weight:600;color:var(--text-strong);margin-top:2px}
.licht-weiter-schritte{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.licht-weiter-schritte li{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:var(--radius-md);background:var(--surface-card);border:1px solid var(--grey-100)}
.licht-weiter-schritte li > span{width:26px;height:26px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;
  background:var(--tecis-yellow-100);color:var(--tecis-yellow-700)}
.licht-weiter-schritte li:first-child > span{background:var(--tecis-navy-700);color:var(--tecis-yellow-300);box-shadow:0 0 0 4px rgba(195,154,72,.16),0 0 14px rgba(230,208,163,.6)}
.licht-weiter-schritte strong{display:block;font-size:15px;font-weight:600;color:var(--text-strong)}
.licht-weiter-schritte p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--grey-600)}
@media (max-width:719px){.licht-weiter-schritte{grid-template-columns:1fr}}

/* ---------- Erlebnis (Phase 8) ---------- */
/* Bildschirmwechsel: die Seite blendet weich über, das Objekt der Versicherung wandert an seinen neuen Platz */
::view-transition-group(*){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root){animation:licht-vt-aus .3s ease both}
::view-transition-new(root){animation:licht-vt-ein .5s cubic-bezier(.2,.8,.2,1) .06s both}
::view-transition-group(kopf){animation-duration:.3s}
@keyframes licht-vt-aus{to{opacity:0;transform:translateY(-6px)}}
@keyframes licht-vt-ein{from{opacity:0;transform:translateY(12px)}}

/* „Weiter“ leuchtet sanft auf, sobald alle Pflichtangaben des Schritts ausgefüllt sind */
.tecis-btn.licht-weiter-knopf{position:relative;overflow:hidden}
.tecis-btn.licht-weiter-knopf[data-bereit="true"]{box-shadow:0 0 0 3px rgba(195,154,72,.38),0 10px 26px -8px rgba(195,154,72,.6);animation:licht-bereit 1.4s var(--licht-ease) 1}
.tecis-btn.licht-weiter-knopf[data-bereit="true"]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,246,227,0) 35%,rgba(255,246,227,.5) 50%,rgba(255,246,227,0) 65%);background-size:260% 100%;background-position:130% 0;
  animation:licht-knopf-glanz 1.4s ease-in-out .15s 1 both}
@keyframes licht-bereit{0%{box-shadow:0 0 0 0 rgba(195,154,72,0),0 4px 12px -6px rgba(195,154,72,0)}45%{box-shadow:0 0 0 6px rgba(230,208,163,.55),0 12px 30px -6px rgba(195,154,72,.75)}}
@keyframes licht-knopf-glanz{from{background-position:130% 0}to{background-position:-30% 0}}

/* „Angaben absenden“ als Höhepunkt: Messing mit sanftem Glanz (Tanne-Schrift, Kontrast über 5:1) */
.tecis-btn.licht-absenden{position:relative;overflow:hidden;color:#17393A;border-color:rgba(122,92,34,.35);
  background:linear-gradient(135deg,#E4C98F 0%,#CDA75C 55%,#BF9849 100%);box-shadow:0 12px 28px -12px rgba(154,118,45,.7),inset 0 1px 0 rgba(255,250,236,.65)}
.tecis-btn.licht-absenden:hover:not([disabled]){background:linear-gradient(135deg,#EAD29E 0%,#D3AE64 55%,#C59E4E 100%);box-shadow:0 16px 34px -12px rgba(154,118,45,.8),inset 0 1px 0 rgba(255,250,236,.75)}
.tecis-btn.licht-absenden:active:not([disabled]){background:linear-gradient(135deg,#DCBF82,#C39A48)}
.tecis-btn.licht-absenden::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,250,240,0) 38%,rgba(255,250,240,.7) 50%,rgba(255,250,240,0) 62%);background-size:260% 100%;background-position:130% 0;
  animation:licht-absenden-glanz 4.5s ease-in-out 1s infinite}
.tecis-btn.licht-absenden[disabled]::after{animation:none}
@keyframes licht-absenden-glanz{0%,62%{background-position:130% 0}90%,100%{background-position:-30% 0}}

/* 100 %: einmal läuft Licht über Strahl und Zähler */
[data-licht-voll="true"] .licht-strahl{animation:licht-voll-strahl 1.8s ease-out 1}
[data-licht-voll="true"] .licht-zahl{animation:licht-voll-zahl 1.8s ease-out 1}
@keyframes licht-voll-strahl{0%{box-shadow:0 0 8px rgba(195,154,72,.45)}30%{box-shadow:0 0 20px 5px rgba(246,221,168,.95)}100%{box-shadow:0 0 8px rgba(195,154,72,.45)}}
@keyframes licht-voll-zahl{30%{color:#9A762D;text-shadow:0 0 18px rgba(230,208,163,.95)}}

/* Auswahlkacheln: kurzer Lichtimpuls beim Antippen (licht/app.js setzt data-licht-impuls) */
[data-licht-impuls]{position:relative}
[data-licht-impuls]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;animation:licht-impuls .7s ease-out forwards}
@keyframes licht-impuls{0%{box-shadow:0 0 0 0 rgba(195,154,72,.55),inset 0 0 22px rgba(255,236,200,.7)}100%{box-shadow:0 0 0 12px rgba(195,154,72,0),inset 0 0 22px rgba(255,236,200,0)}}

/* Felder eines Schritts: kurz nacheinander und nur senkrecht, damit es sich nicht mit dem Hereinschieben beißt */
.tecis-reveal[data-anim="licht-feld"]{transition:opacity .4s ease,transform .55s var(--licht-ease)}
.tecis-reveal[data-anim="licht-feld"][data-state="hidden"]{opacity:0;transform:translateY(10px)}

@media (prefers-reduced-motion:reduce){
  .tecis-btn.licht-weiter-knopf[data-bereit="true"],.tecis-btn.licht-weiter-knopf[data-bereit="true"]::after,.tecis-btn.licht-absenden::after,
  [data-licht-voll="true"] .licht-strahl,[data-licht-voll="true"] .licht-zahl,[data-licht-impuls]::after{animation:none}
  .tecis-reveal[data-anim="licht-feld"][data-state="hidden"]{opacity:1;transform:none}
  .licht-lade,.licht-lade span{animation:none;opacity:1}
  .ue-komet,.ue-funken,.licht-funken{display:none}
  .ue *,.ue{transition-duration:.2s!important}
  .ue-haken path,.licht-zeichen path{animation:none!important;stroke-dashoffset:0}
  .ue.ist-hell .ue-schein{transform:scale(1.5)}
  .lc-punkt,.lc-korn,.licht-hinweis i::after{animation:none}
  .licht-raum,.licht-zahl,.licht-linie::after{transition:none}
  .licht-haken path,.licht-datei-haken circle,.licht-datei-haken path{animation:none;stroke-dashoffset:0}
  .licht-datei[data-laedt="true"]::after,.licht-abschnitt{animation:none}
  .tecis-reveal[data-anim^="licht-"],.tecis-reveal[data-anim^="licht-"][data-state="hidden"]{transform:none;filter:none;transition:opacity .2s ease}
  [data-licht-folgt],.licht-geht .licht-buehne{transition-duration:.01s}
  .licht-ring::before,.licht-rand::before,.licht-held::before,.licht-held::after,.licht-schwebe,.licht-glanz{animation:none}
  .licht-karte[data-licht-an]::before,.licht-karte[data-licht-an]::after,.licht-karte[data-licht-an] .licht-objekt::before{animation:none}
  .licht-karte[data-licht-an]::before,.licht-karte[data-licht-an] .licht-objekt::before{opacity:.45}
  .licht-karte:hover .licht-objekt img{transform:none}
}

/* ---------- Feedback nach dem Livegang (18.10.2026) ---------- */
/* Handy, Übersicht: „Zurück“ wird ein runder Pfeil-Knopf (Text bleibt für Screenreader im Knopf),
   damit „Angaben absenden“ ganz lesbar ist */
@media (max-width:560px){
  [data-licht-fuss][data-uebersicht="true"] .tecis-btn--secondary{flex:none;width:52px;padding:0;gap:0;font-size:0}
  [data-licht-fuss] .tecis-btn.licht-absenden{flex:1 1 auto;min-width:0;padding:0 18px;font-size:16px;white-space:normal;line-height:1.15;text-align:center}
}
@media (max-width:560px){[data-licht-fuss][data-uebersicht="true"] > div:empty{display:none}}