/* Leinegrafik · Kategorieseiten (kat-): nur was Webflow-Klassen nicht abbilden. Layout und Typo liegen als Webflow-Klassen im Designer. */
.kat{--koralle:#EA4524;--anthrazit:#353535;--creme:#FFFEF8;--blatt:#FFFFFF;--linie:rgba(53,53,53,.16);--leise:rgba(53,53,53,.66);--exo:"Exo 2",Helvetica,Arial,sans-serif;--gara:"EB Garamond",Georgia,serif;--ease:cubic-bezier(.333,0,.667,1);--feder:cubic-bezier(.34,1.56,.64,1);--raus:cubic-bezier(.16,1,.3,1);--schatten:0 2px 6px rgba(53,53,53,.06),0 34px 60px -26px rgba(234,69,36,.38),0 18px 40px -24px rgba(53,53,53,.22);-webkit-font-smoothing:antialiased}
.kat :focus-visible{outline:2px solid var(--koralle);outline-offset:3px}
/* Buttons: Koralle-Kreis ab Mausposition */
.kat-btn{isolation:isolate;-webkit-tap-highlight-color:transparent}
.kat-btn .kat-o{position:absolute;left:0;top:0;width:0;height:0;border-radius:50%;background:var(--koralle);transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--raus);pointer-events:none;z-index:-1}
.kat-btn.kat-on{border-radius:var(--pill,999px);color:#fff}
.kat-btn.kat-on .kat-o{transform:translate(-50%,-50%) scale(1)}
.kat-btn:active{transform:scale(.985)}
/* FAQ */
.kat-faq-item{border-top:1px solid var(--linie)}
.kat-faq-item:last-child{border-bottom:1px solid var(--linie)}
.kat-faq-frage{list-style:none;cursor:pointer;padding:22px 48px 22px 0;font-size:20px;font-weight:500;letter-spacing:-.015em;line-height:1.35;position:relative;transition:color .3s var(--ease)}
.kat-faq-frage:hover{color:var(--koralle)}
.kat-faq-frage::-webkit-details-marker{display:none}
.kat-faq-frage::after{content:"";position:absolute;right:6px;top:50%;width:16px;height:16px;transform:translateY(-50%);background:linear-gradient(var(--koralle),var(--koralle)) center/16px 1.5px no-repeat,linear-gradient(var(--koralle),var(--koralle)) center/1.5px 16px no-repeat;transition:transform .5s var(--feder)}
.kat-faq-item[open] .kat-faq-frage::after{transform:translateY(-50%) rotate(45deg)}
.kat-karte:hover .kat-karte-h{color:var(--koralle)}
.kat-karte-img{transition:transform .8s var(--raus)}
.kat-karte:hover .kat-karte-img{transform:scale(1.03)}
.kat-aufbau-blatt{transition:transform .55s var(--feder)}
.kat-aufbau-schritt:hover .kat-aufbau-blatt{transform:translateY(-6px)}
/* Interaktiv: Film mit Zeitstrahl */
.lgs-video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--blatt)}
.lgs-zeit{margin-top:22px}
.lgs-jahre{position:relative;display:grid;grid-template-columns:repeat(8,1fr)}
.lgs-jahre::before{content:"";position:absolute;left:0;right:0;top:15px;height:2px;background:var(--linie)}
.lgs-jahre i{position:absolute;left:0;top:15px;height:2px;background:var(--koralle);width:0;transition:width .25s linear}
.lgs-jahr{position:relative;background:none;border:0;padding:0 0 4px;cursor:pointer;font:500 14px/1 var(--exo);color:var(--leise);display:grid;justify-items:center;gap:10px;font-variant-numeric:tabular-nums;min-width:0}
.lgs-jahr::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--creme);border:2px solid var(--linie);margin-top:9px;transition:transform .45s var(--feder),background .3s var(--ease),border-color .3s var(--ease)}
.lgs-jahr:hover{color:var(--anthrazit)}
.lgs-jahr:hover::before{transform:scale(1.25)}
.lgs-jahr.lgs-war::before{border-color:var(--koralle)}
.lgs-jahr[aria-current="true"]{color:var(--koralle)}
.lgs-jahr[aria-current="true"]::before{background:var(--koralle);border-color:var(--koralle);transform:scale(1.35)}
.lgs-zeit-text{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:baseline;border-top:1px solid var(--linie);padding-top:16px;min-height:5.2em}
.lgs-zeit-text b{font-size:44px;font-weight:200;letter-spacing:-.045em;color:var(--koralle);line-height:1;font-variant-numeric:tabular-nums}
.lgs-zeit-text p{margin:0;font-family:var(--gara);font-size:21px;line-height:1.35;max-width:44ch}
/* Interaktiv: Vorher/Nachher */
.lgx-vergleich{position:relative;max-width:100%;aspect-ratio:16/9;overflow:hidden;--pos:50%}
.lgx-vergleich img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.lgx-vergleich .lgx-oben{clip-path:inset(0 0 0 var(--pos))}
.lgx-vergleich .lgx-strich{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--koralle);transform:translateX(-1px);pointer-events:none}
.lgx-vergleich .lgx-griff{position:absolute;top:50%;left:var(--pos);width:46px;height:46px;border-radius:50%;background:var(--koralle);transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center;color:var(--creme);font-size:16px;transition:transform .4s var(--feder)}
.lgx-vergleich:hover .lgx-griff{transform:translate(-50%,-50%) scale(1.1)}
.lgx-vergleich input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.lgx-vergleich .lgx-lbl{position:absolute;top:14px;font-family:var(--gara);font-style:italic;font-size:17px;pointer-events:none}
.lgx-vergleich .lgx-l{left:16px}
.lgx-vergleich .lgx-r{right:16px;color:var(--koralle)}
/* Interaktiv: Reel im Handy */
.lgx-handy{width:min(250px,60vw);max-width:100%;aspect-ratio:9/16;border:9px solid var(--anthrazit);border-radius:36px;overflow:hidden;background:var(--blatt);position:relative;box-shadow:var(--schatten)}
.lgx-handy video{width:100%;height:100%;object-fit:cover;display:block}
.lgx-handy::after{content:"";position:absolute;top:8px;left:50%;width:64px;height:16px;border-radius:10px;background:var(--anthrazit);transform:translateX(-50%)}
/* Interaktiv: Maschsee-Karte */
.lgs-see{display:grid;grid-template-columns:8fr 4fr;gap:clamp(28px,4vw,56px);align-items:center}
.lgs-karte{position:relative;max-width:100%}
.lgs-karte img{display:block;width:100%;height:auto}
.lgs-pin{position:absolute;width:6.2%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);border:3px solid var(--koralle);opacity:0;scale:.6;transition:opacity .3s var(--ease),scale .5s var(--feder);pointer-events:none}
.lgs-pin.lgs-an{opacity:1;scale:1}
.lgs-pin.lgs-an::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--koralle);animation:lgs-puls 1.8s var(--ease) infinite}
@keyframes lgs-puls{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
.lgs-plan{list-style:none;margin:0;padding:0}
.lgs-plan li{border-top:1px solid var(--linie)}
.lgs-plan li:last-child{border-bottom:1px solid var(--linie)}
.lgs-plan button{width:100%;display:grid;grid-template-columns:3.4ch 1fr;gap:14px;align-items:baseline;background:none;border:0;padding:13px 0;text-align:left;cursor:pointer;font:400 16px/1.3 var(--exo);color:var(--anthrazit);transition:color .3s var(--ease)}
.lgs-plan button b{font-size:26px;font-weight:200;letter-spacing:-.03em;color:var(--leise);font-variant-numeric:tabular-nums;transition:color .3s var(--ease)}
.lgs-plan button small{display:block;font-size:13px;color:var(--leise);margin-top:2px}
.lgs-plan button:hover,.lgs-plan button[aria-pressed="true"],.lgs-plan button:hover b,.lgs-plan button[aria-pressed="true"] b{color:var(--koralle)}
@media (max-width:991px){.lgs-see{grid-template-columns:1fr}}
@media (max-width:560px){.lgs-jahre{grid-template-columns:repeat(4,1fr);row-gap:14px}.lgs-jahre::before,.lgs-jahre i{display:none}.lgs-zeit-text b{font-size:34px}.lgs-zeit-text p{font-size:18px}}
/* Interaktiv: Film mit Sprachwahl (Erklärfilme) */
.lgx-film-rahmen{width:min(340px,100%);margin:0 auto}
.lgx-film-rahmen video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--anthrazit)}
.lgx-sprachen{display:flex;gap:6px;margin-top:20px;justify-content:center}
.lgx-sprache{font:500 14px var(--exo);padding:7px 14px;border-radius:999px;border:1.5px solid var(--linie);background:transparent;color:var(--anthrazit);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.lgx-sprache[aria-pressed="true"]{background:var(--anthrazit);border-color:var(--anthrazit);color:var(--creme)}
.lgx-sprache span{font-family:var(--gara);font-style:italic;font-weight:400;margin-left:4px}
/* Vergleich im Hochformat */
.lgx-vergleich.lgx-hoch{max-width:440px;margin:0 auto;aspect-ratio:800/1111}
/* Interaktiv: Fahne Bild für Bild */
.lgx-fahne{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:center}
.lgx-fahne-bild{width:clamp(150px,18vw,230px);aspect-ratio:340/379;position:relative}
.lgx-fahne-bild #lgx-fahne-img{position:absolute;inset:0;background:url(https://cdn.prod.website-files.com/68b0930086d5b3deec8e8a5e/6ad0c565adbd134d43fb4927_erklaerfilm-swissski-fahne-sprite.webp) 0 0/1000% 800% no-repeat}
.lgx-fahne-info{min-width:0}
.lgx-fahne-zahl{display:flex;align-items:baseline;gap:10px;line-height:1;font-variant-numeric:tabular-nums}
.lgx-fahne-zahl span{font-size:clamp(64px,7vw,96px);font-weight:200;letter-spacing:-.05em;color:var(--koralle);min-width:2ch}
.lgx-fahne-zahl i{font-family:var(--gara);font-size:24px}
.lgx-strahl{display:flex;gap:2px;height:42px;align-items:flex-end;margin-top:16px;cursor:ew-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.lgx-strahl i{flex:1;min-width:0;height:44%;background:var(--linie);border-radius:1px;transition:height .25s var(--feder),background .15s linear}
.lgx-strahl i:nth-child(12n+1){height:62%}
.lgx-strahl i.lgx-weg{background:rgba(234,69,36,.35)}
.lgx-strahl i.lgx-an{background:var(--koralle);height:100%}
.lgx-strahl-zeile{display:flex;justify-content:space-between;gap:12px;margin-top:10px;flex-wrap:wrap;font-size:14px;color:var(--leise)}
.lgx-strahl-zeile button{background:none;border:0;padding:0;font:500 14px var(--exo);color:var(--koralle);cursor:pointer}
/* Logo-Animation */
.lgx-logo-anim{max-width:380px;margin:0 auto}
.lgx-logo-anim video{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#c8102e}
/* Video in Karten */
.lgx-karte-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--anthrazit)}
@media (max-width:767px){.lgx-fahne{grid-template-columns:1fr}.lgx-strahl{height:34px}}
@media (prefers-reduced-motion:reduce){.kat *,.kat *::before,.kat *::after{animation:none!important;transition:none!important}}