/* Service showcase: shared geometry, deliberate hierarchy, bounded motion. */
.slant-home{--ease:cubic-bezier(.22,1,.36,1);--gutter:clamp(22px,3.2vw,56px);position:relative;isolation:isolate;container-type:inline-size;width:100%;height:100svh;min-height:0;overflow:hidden;background:#0c141a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
.slant-home *{box-sizing:border-box}.slant-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.slant-panels,.slant-panel{position:absolute;inset:0}
.slant-panel{--accent:#6ee1ed;--rgb:14,151,178;--deep:#072b38;overflow:hidden;clip-path:polygon(0 0,37% 0,29% 100%,0 100%);transition:clip-path .85s var(--ease);background:var(--deep)}
.slant-panel[data-sector=repair]{--accent:#c5a7ef;--rgb:128,78,183;--deep:#251732;clip-path:polygon(37% 0,70% 0,62% 100%,29% 100%)}
.slant-panel[data-sector=energy]{--accent:#b0db89;--rgb:92,145,56;--deep:#1b3021;clip-path:polygon(70% 0,100% 0,100% 100%,62% 100%)}
.slant-poster,.slant-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;border-radius:0;pointer-events:none}
.slant-panel .slant-poster{left:calc(var(--middle) - 23%);width:46%;object-position:center;transform:scale(1.025);transition:left .85s var(--ease),width .85s var(--ease),transform 1.2s var(--ease)}
.slant-panel.is-active .slant-poster{left:calc(var(--middle,50%) - 50%);width:100%;transform:scale(1)}
/* Center full-bleed media on the visible panel, not the entire hero.
   The existing geometry sets --middle to 40%, 50%, 60% on desktop
   and 50% for every expanded mobile panel. Keep sizing and playback intact. */
.slant-panel video{left:calc(var(--middle,50%) - 50%);object-position:center;opacity:0;transition:left .85s var(--ease),opacity .6s ease;filter:saturate(.8)}
.slant-panel.is-active.is-playing video{opacity:1}
.slant-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--rgb),.25),rgba(var(--rgb),.16) 44%,var(--deep)),linear-gradient(180deg,#02070c60,transparent 35%,#040a1040)}
.slant-shade:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--deep),#08121de0 32%,#08121d50 76%,#08121d10);opacity:0;transition:opacity .7s}
.slant-panel.is-active .slant-shade:after{opacity:1}
.slant-select{position:absolute;inset:0;width:100%;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.slant-vertical{position:absolute;left:var(--middle);top:47%;transform:translate(-50%,-50%) rotate(-90deg);white-space:nowrap;color:var(--accent);font-size:clamp(28px,3.8cqw,61px);font-weight:620;letter-spacing:-.025em;line-height:1.1;text-shadow:0 2px 20px #0004;transition:left .85s var(--ease),opacity .24s,font-size .4s}
.slant-preview-note{position:absolute;top:77%;left:var(--middle);transform:translateX(-50%);white-space:nowrap;color:#eef1f3;font-size:12px;letter-spacing:.01em;transition:left .85s var(--ease),opacity .2s}
.slant-plus{position:absolute;top:calc(77% + 35px);left:var(--middle);transform:translateX(-50%);width:42px;height:42px;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center;color:var(--accent);background:#ffffff08;transition:left .85s var(--ease),background .2s,opacity .2s}
.slant-plus svg{width:21px;height:21px}.slant-select:hover .slant-plus{background:#ffffff18}
.slant-panel.is-active .slant-select{pointer-events:none}.slant-panel.is-active .slant-vertical,.slant-panel.is-active .slant-preview-note,.slant-panel.is-active .slant-plus{opacity:0}
.slant-home:not([data-active=overview]) .slant-panel:not(.is-active) .slant-vertical{font-size:clamp(19px,2cqw,30px)}
.slant-home:not([data-active=overview]) .slant-panel:not(.is-active) .slant-preview-note,.slant-home:not([data-active=overview]) .slant-panel:not(.is-active) .slant-plus{opacity:0}
/* The expanded scene is a visual service selector, not a paragraph over a film. */
.slant-content{position:absolute;top:50%;left:5%;width:66%;max-width:820px;transform:translateY(-48%) translateX(18px);opacity:0;pointer-events:none;transition:opacity .18s,transform .5s var(--ease)}
.slant-panel[data-sector=repair] .slant-content{left:17%}.slant-panel[data-sector=energy] .slant-content{left:27%}
.slant-panel.is-active .slant-content{transform:translateY(-48%) translateX(0);opacity:1;pointer-events:auto;transition-delay:.2s}
.slant-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:11px;font-weight:650;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.slant-eyebrow i{width:7px;height:7px;background:currentColor;border-radius:50%;flex:none;box-shadow:0 0 16px rgba(var(--rgb),.45)}
.slant-content h2{margin:0 0 18px;font-size:clamp(44px,7.5cqw,106px);font-weight:760;letter-spacing:-.036em;line-height:.94;color:#fff;text-shadow:0 3px 32px #0003}
.slant-content h2 em{display:inline-block;font-style:normal;color:var(--accent)}
.slant-description{margin:0 0 25px;max-width:540px;font-size:clamp(14px,1.4cqw,18px);line-height:1.5;color:#e6edf1;text-wrap:pretty}
.slant-service-picker{max-width:680px}.slant-prompt{margin:0 0 10px;color:#dde7ed;font-size:11px;letter-spacing:.015em;font-weight:500}
.slant-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slant-service{position:relative;display:flex;flex-direction:column;min-width:0;padding:17px 17px 18px;border:1px solid #ffffff24;border-radius:22px;background:linear-gradient(145deg,#ffffff0b,#ffffff02);color:var(--accent);text-decoration:none;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.slant-service:hover,.slant-service:focus-visible{background:linear-gradient(140deg,rgba(var(--rgb),.25),rgba(var(--rgb),.08));border-color:var(--accent);transform:translateY(-5px);box-shadow:0 10px 24px #0002}
.service-art{position:relative;display:block;width:76px;height:76px;margin:0 0 13px}
.service-art:before{content:"";position:absolute;inset:12%;border-radius:50%;background:rgba(var(--rgb),.2);filter:blur(18px);opacity:.65;transition:opacity .3s}
.service-symbol{position:relative;display:block;width:100%;height:100%;overflow:visible;transition:transform .4s var(--ease)}
.service-symbol .symbol-wash{fill:currentColor;fill-opacity:.1;stroke:none}.service-symbol .symbol-detail{stroke-width:2.1}.service-symbol .symbol-signal{opacity:.5;transition:opacity .3s}
.slant-service:hover .service-symbol,.slant-service:focus-visible .service-symbol{transform:translateY(-3px) rotate(-3deg)}
.slant-service:hover .symbol-signal,.slant-service:focus-visible .symbol-signal{opacity:1}.slant-service:hover .service-art:before{opacity:1}
.service-label{min-width:0;display:block}.service-label strong{display:block;font-size:clamp(15px,1.65cqw,22px);font-weight:650;letter-spacing:-.019em;line-height:1.16;color:#fff}
.service-label>span{display:block;margin-top:6px;font-size:11px;line-height:1.35;color:#cfdae1}
.service-arrow{position:absolute;right:15px;top:16px;width:24px;height:24px;opacity:.65;transform:rotate(-45deg);transition:opacity .2s,transform .25s}.service-arrow svg{display:block;width:100%;height:100%}
.slant-service:hover .service-arrow,.slant-service:focus-visible .service-arrow{opacity:1;transform:translate(2px,-2px) rotate(-45deg)}
.slant-panel.is-active .slant-service{animation:slant-detail-in .65s var(--ease) both}.slant-panel.is-active .slant-service:nth-child(1){animation-delay:.28s}.slant-panel.is-active .slant-service:nth-child(2){animation-delay:.36s}.slant-panel.is-active .slant-service:nth-child(3){animation-delay:.44s}
@keyframes slant-detail-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.slant-journey{display:flex;flex-wrap:wrap;align-items:center;gap:9px 0;list-style:none;padding:0;margin:17px 0 25px;color:#cedbe3;font-size:11px;line-height:1.4}
.slant-journey li{display:flex;align-items:center;gap:12px}.slant-journey li:not(:last-child):after{content:"→";margin-right:12px;color:var(--accent);font-size:15px}.slant-journey li:last-child{color:var(--accent)}
.slant-action{display:flex;align-items:center;gap:22px}.slant-action>p{max-width:135px;font-size:11px;line-height:1.5;color:#d1dce4;margin:0}
.slant-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:52px;padding:7px 7px 7px 22px;border:1px solid transparent;border-radius:99px;background:var(--accent);color:#101e25;font-size:13px;line-height:1.2;font-weight:650;text-decoration:none;transition:background .2s,transform .2s}
.slant-cta>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#0b1c2812;flex:none}.slant-cta svg{width:19px;height:19px;transition:transform .2s}.slant-cta:hover{background:#fff;transform:translateY(-1px)}.slant-cta:hover svg{transform:translateX(2px)}
.slant-top{position:absolute;top:27px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.slant-top>div{display:flex;align-items:center;gap:18px}.slant-company{font-size:10px;font-weight:650;letter-spacing:.14em}.slant-audience{font-size:11px;color:#c4ced6;border-left:1px solid #ffffff40;padding-left:18px}
.slant-top>a{pointer-events:auto;display:flex;align-items:center;gap:13px;font-size:11px;font-weight:500;color:#fff;border:1px solid #ffffff45;border-radius:40px;min-height:42px;padding:9px 16px;background:#0b15202b;text-decoration:none}.slant-top>a svg{width:17px;height:17px}.slant-top>a:hover{background:#ffffff15}
.slant-utility{position:absolute;bottom:105px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;color:#bfc9d0}.slant-utility>a{display:flex;align-items:center;gap:12px;padding-block:8px;text-decoration:none;color:inherit}.slant-utility>a:hover{color:#fff}.slant-utility>a span{font-size:17px}.slant-status{text-align:right}
.slant-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;min-height:60px;padding:7px;display:flex;align-items:center;gap:8px;background:#101b25eb;border:1px solid #ffffff26;border-radius:17px;box-shadow:0 8px 32px #0002;overflow:hidden}
.slant-bottom button{min-height:44px;border:0;background:transparent;color:#c4cfd7;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s,color .2s;border-radius:11px}
.slant-overview{display:flex;align-items:center;gap:9px;padding:10px 16px;white-space:nowrap}.slant-overview svg{width:18px;height:18px}
.slant-overview[aria-pressed=true]{background:#ffffff12;color:#fff}
.slant-pagination{display:flex;flex:1;justify-content:center;gap:6px;padding-inline:12px;border-inline:1px solid #ffffff1a}
.slant-pagination button{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 18px;flex:1;max-width:235px;position:relative}
.slant-pagination button[data-slide=security]{--tab:#6ee1ed;--tab-bg:#6ee1ed18}.slant-pagination button[data-slide=repair]{--tab:#c5a7ef;--tab-bg:#c5a7ef18}.slant-pagination button[data-slide=energy]{--tab:#b0db89;--tab-bg:#b0db8918}
.slant-pagination button i{display:block;width:6px;height:6px;border-radius:50%;background:var(--tab);flex:none}
.slant-pagination button[aria-pressed=true]{background:var(--tab-bg);color:var(--tab)}.slant-bottom button:hover{background:#ffffff10;color:#fff}
.slant-pause{width:44px;flex:none;font-size:18px!important;font-family:Arial,sans-serif!important}.slant-timer{position:absolute;left:14px;right:14px;bottom:0;height:2px;background:#ffffff09;overflow:hidden;pointer-events:none}.slant-countdown{display:block;width:100%;height:100%;background:#c0cbd4;transform-origin:left;opacity:.7}
.slant-home[data-active=security] .slant-countdown{background:#6ee1ed}.slant-home[data-active=repair] .slant-countdown{background:#c5a7ef}.slant-home[data-active=energy] .slant-countdown{background:#b0db89}
.slant-home button:focus-visible,.slant-home a:focus-visible{outline:2px solid white;outline-offset:3px}.slant-select:focus-visible{outline:none}.slant-select:focus-visible .slant-vertical{text-decoration:underline;text-underline-offset:8px}
#home-details{scroll-margin-top:0}
body[data-home-design=showcase] main>.section{padding-block:clamp(60px,7vw,112px)}
@media(min-width:701px) and (max-width:1050px){
 .slant-top>div{display:block}.slant-audience{display:block;padding:0;border:0;margin-top:3px}.slant-preview-note{font-size:10px}
 .slant-service{padding:13px 12px 15px;border-radius:18px}.service-art{width:62px;height:62px}.service-arrow{width:18px;height:18px;right:10px;top:12px}.service-label>span{font-size:10px}.slant-services{gap:8px}.slant-action{gap:14px}.slant-action>p{max-width:110px;font-size:10px}
}
@media(max-height:790px) and (min-width:701px){
 .slant-content{top:49%}.slant-content h2{font-size:clamp(38px,6cqw,78px);margin-bottom:12px}.slant-eyebrow{margin-bottom:14px}.slant-description{margin-bottom:18px;font-size:15px}.slant-prompt{margin-bottom:8px}.slant-service{padding-block:10px 12px}.service-art{width:52px;height:52px;margin-bottom:7px}.slant-journey{margin:12px 0 16px}.slant-cta{min-height:46px;padding-block:6px}.slant-cta>span{width:32px;height:32px}
}
/* Fixed left navigation leaves a narrow content column on phones. Keep the icons
   and labels together as three large, tappable rows instead of shrinking them. */
@media(max-width:700px){
 .slant-home{--gutter:14px}.slant-top{top:18px;gap:7px}.slant-top>div{display:block}.slant-company{font-size:8px;letter-spacing:.08em}.slant-audience{display:block;border:0;padding:0;font-size:9px;margin-top:3px}.slant-top>a{font-size:0;min-height:38px;padding:7px 10px;gap:6px}.slant-top>a:before{content:'Kontakt';font-size:10px}.slant-top>a svg{width:14px}
 .slant-vertical{font-size:clamp(23px,10cqw,36px);top:47%;letter-spacing:-.022em}.slant-preview-note{display:none}.slant-plus{top:77%;width:36px;height:36px}
 .slant-content,.slant-panel[data-sector=repair] .slant-content,.slant-panel[data-sector=energy] .slant-content{left:var(--gutter);width:calc(100% - 28px);top:78px;bottom:105px;max-width:none;transform:translateX(12px);display:flex;flex-direction:column;justify-content:center}
 .slant-panel.is-active .slant-content{transform:none}.slant-content h2{font-size:clamp(28px,11.8cqw,54px);margin-bottom:15px;letter-spacing:-.03em;line-height:1}.slant-eyebrow{font-size:9px;margin-bottom:14px;letter-spacing:.04em;gap:7px}.slant-eyebrow i{width:5px;height:5px}.slant-description{font-size:12px;line-height:1.5;margin-bottom:18px}
 .slant-prompt{font-size:10px;margin-bottom:8px}.slant-services{grid-template-columns:1fr;gap:7px}.slant-service{flex-direction:row;align-items:center;gap:10px;min-height:66px;padding:9px 27px 9px 10px;border-radius:16px}.service-art{flex:none;width:43px;height:43px;margin:0}.service-label strong{font-size:15px;letter-spacing:-.014em}.service-label>span{font-size:10px;margin-top:3px}.service-arrow{width:16px;height:16px;top:calc(50% - 8px);right:10px}.slant-service:hover,.slant-service:focus-visible{transform:translateX(2px)}
 .slant-journey{font-size:9px;gap:6px 0;margin:13px 0 19px}.slant-journey li{gap:5px}.slant-journey li:not(:last-child):after{margin-right:5px;font-size:12px}.slant-action{flex-direction:column;align-items:flex-start;gap:9px}.slant-cta{font-size:11px;min-height:46px;padding:6px 6px 6px 14px;gap:10px;max-width:100%}.slant-cta>span{width:30px;height:30px}.slant-action>p{max-width:none;font-size:10px}
 .slant-utility{font-size:9px}.slant-status{max-width:105px}body[data-home-design=showcase] .si-rail-brand{height:68px;min-height:68px;margin-bottom:24px}
}
@media(max-height:640px) and (min-width:701px){
 .slant-content{top:50%}.slant-content h2{font-size:clamp(34px,9.5svh,64px);margin-bottom:10px}.slant-eyebrow{margin-bottom:10px}.slant-description{font-size:12px;margin-bottom:13px}.slant-prompt{font-size:10px;margin-bottom:6px}.service-art{width:48px;height:48px;margin-bottom:6px}.slant-service{padding:9px 12px 11px;border-radius:16px}.service-label strong{font-size:16px}.service-label>span{font-size:10px}.slant-journey{margin:10px 0 13px;font-size:10px}.slant-cta{min-height:44px;padding-block:5px;font-size:12px}.slant-cta>span{width:32px;height:32px}.slant-top{top:14px}
}
@media(max-width:700px) and (max-height:720px){
 .slant-content h2{font-size:clamp(28px,11.5cqw,42px);margin-bottom:10px}.slant-eyebrow{margin-bottom:10px}.slant-description{font-size:11px;margin-bottom:12px}.slant-service{min-height:56px;padding-block:6px}.service-art{width:37px;height:37px}.service-label strong{font-size:14px}.service-label>span{font-size:9px}.slant-journey{margin:10px 0 13px}.slant-action>p{display:none}
}
@media(max-width:700px) and (max-height:640px){
 .slant-prompt,.slant-journey{display:none}.slant-service-picker{margin-bottom:14px}.slant-content,.slant-panel[data-sector=repair] .slant-content,.slant-panel[data-sector=energy] .slant-content{top:70px;bottom:90px}.slant-home .slant-utility{display:none}
}
@media(max-width:363px){.slant-content,.slant-panel[data-sector=repair] .slant-content,.slant-panel[data-sector=energy] .slant-content{bottom:130px}.slant-service{gap:7px;padding-left:7px}.service-label strong{font-size:13px}}
@media(max-width:363px) and (max-height:640px){.slant-content,.slant-panel[data-sector=repair] .slant-content,.slant-panel[data-sector=energy] .slant-content{bottom:116px}}
@media(prefers-reduced-motion:reduce){.slant-home *{animation:none!important;transition:none!important}html:has(.slant-home){scroll-behavior:auto}}

/* Free-standing controls: no toolbar surface, enclosing border or progress strip. */
.slant-home .slant-bottom{left:auto;right:var(--gutter);bottom:20px;min-height:44px;display:flex;gap:4px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.slant-home .slant-bottom button{width:44px;min-height:44px!important;flex:none;padding:0;border-radius:50%;background:transparent}
.slant-home .slant-overview{justify-content:center}.slant-home .slant-overview>span{display:none}
.slant-home .slant-overview[aria-pressed=true]{color:#fff;background:transparent}
.slant-home .slant-pagination{flex:none;gap:0;padding:0;border:0}
.slant-home .slant-pagination button span{display:none}
.slant-home .slant-pagination button i{width:7px;height:7px;opacity:.55;transition:opacity .2s,box-shadow .2s}
.slant-home .slant-pagination button[aria-pressed=true]{background:transparent}
.slant-home .slant-pagination button[aria-pressed=true] i{opacity:1;box-shadow:0 0 0 5px var(--tab-bg),0 0 0 6px var(--tab)}
.slant-home .slant-bottom button:hover{background:#ffffff0d}.slant-home .slant-pagination button:hover i{opacity:1}
.slant-home .slant-utility{bottom:23px;right:auto}
.slant-home .slant-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.slant-home .slant-bottom{left:var(--gutter);right:var(--gutter);justify-content:space-between;bottom:14px;gap:0}.slant-home .slant-utility{bottom:67px}}

/* Preserve 44px touch targets on narrow phones without restoring a toolbar. */
@media(max-width:363px){
 .slant-home .slant-bottom{display:grid;grid-template-columns:44px 1fr 44px;row-gap:2px;justify-content:normal}
 .slant-home .slant-overview{grid-row:1;grid-column:1}
 .slant-home .slant-pause{grid-row:1;grid-column:3}
 .slant-home .slant-pagination{grid-row:2;grid-column:1/-1;justify-content:center}
 .slant-home .slant-utility{bottom:116px}
}

/* ===== v13 Übersicht: belegte Zahl + Frage je Bereich (Desktop & Tablet) =====
   Aufbau: Bereich → große Zahl → was sie bedeutet → Frage an den Besucher → Handlung → Quelle */
.slant-intro{position:absolute;left:var(--intro-left,4.2%);bottom:clamp(96px,12.5vh,140px);width:var(--intro-w,24.5%);display:flex;flex-direction:column;align-items:flex-start;color:#fff;text-align:left;pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.slant-panel[data-sector=repair] .slant-intro{--intro-left:35.4%;--intro-w:25.5%}
.slant-panel[data-sector=energy] .slant-intro{--intro-left:68.4%;--intro-w:27%}
.slant-home[data-active=overview] .slant-intro{opacity:1;transform:none;transition-delay:.18s}
.slant-home[data-active=overview] .slant-panel[data-sector=repair] .slant-intro{transition-delay:.26s}
.slant-home[data-active=overview] .slant-panel[data-sector=energy] .slant-intro{transition-delay:.34s}
.slant-home[data-active=overview] .slant-vertical,.slant-home[data-active=overview] .slant-preview-note,.slant-home[data-active=overview] .slant-plus{opacity:0;visibility:hidden}
/* Bereichsname: oben im Feld, groß. Linke Kante folgt der Schräge (oben liegt die Feldgrenze weiter rechts als unten). */
.slant-name{position:absolute;left:var(--name-left,4.2%);top:clamp(96px,12.5vh,150px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.8vh,20px);color:#fff;text-align:left;pointer-events:none;opacity:0;transform:translateY(-16px);transition:opacity .35s var(--ease),transform .6s var(--ease)}
.slant-panel[data-sector=repair] .slant-name{--name-left:38.8%}
.slant-panel[data-sector=energy] .slant-name{--name-left:71.4%}
.slant-home[data-active=overview] .slant-name{opacity:1;transform:none;transition-delay:.12s}
.slant-home[data-active=overview] .slant-panel[data-sector=repair] .slant-name{transition-delay:.2s}
.slant-home[data-active=overview] .slant-panel[data-sector=energy] .slant-name{transition-delay:.28s}
.slant-name b{display:grid;place-items:center;min-width:38px;height:26px;padding:0 9px;border-radius:99px;background:var(--accent);color:#0b1620;font:700 12px/1 Inter,Inter,system-ui,sans-serif;letter-spacing:.02em}
.slant-name>.sn-t{display:flex;flex-direction:column;font:700 clamp(40px,4.3cqw,84px)/.92 Inter,Inter,system-ui,sans-serif;letter-spacing:-.033em;white-space:nowrap}
/* Zeile 1 weiß, Zeile 2 in Bereichsfarbe mit Lichtschimmer */
.sn-l{display:block;overflow:hidden;padding:0 .06em .08em 0;margin-bottom:-.08em}
.sn-l>span{display:block;color:#fff;transform:translateY(105%);transition:transform .9s var(--ease)}
.sn-c>span{color:transparent;text-shadow:none;background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 38%,#fff 50%,var(--accent) 62%,var(--accent) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.slant-home[data-active=overview] .sn-l>span{transform:none}
.slant-home[data-active=overview] .sn-c>span{transition-delay:.12s}
.slant-home[data-active=overview] .slant-panel[data-sector=repair] .sn-l>span{transition-delay:.1s}
.slant-home[data-active=overview] .slant-panel[data-sector=repair] .sn-c>span{transition-delay:.22s}
.slant-home[data-active=overview] .slant-panel[data-sector=energy] .sn-l>span{transition-delay:.2s}
.slant-home[data-active=overview] .slant-panel[data-sector=energy] .sn-c>span{transition-delay:.32s}
@media(prefers-reduced-motion:no-preference){
 .slant-home[data-active=overview] .sn-c>span{animation:snShine 7s ease-in-out 1.4s infinite}
 .slant-home[data-active=overview] .slant-panel[data-sector=repair] .sn-c>span{animation-delay:3.7s}
 .slant-home[data-active=overview] .slant-panel[data-sector=energy] .sn-c>span{animation-delay:6s}
 .slant-home[data-active=overview] .slant-select:hover .sn-c>span{animation:snShine 1.1s ease-out}
 .slant-name b{transition:transform .4s var(--ease),box-shadow .4s}
 .slant-select:hover .slant-name b{transform:scale(1.08);box-shadow:0 0 0 6px rgba(var(--rgb),.35)}
}
@media(prefers-reduced-motion:reduce){.sn-l>span{transform:none;transition:none}}
@keyframes snShine{0%{background-position:100% 0}38%,100%{background-position:0 0}}
.si-stat{display:flex;align-items:baseline;gap:.08em;font-family:Inter,Inter,system-ui,sans-serif;line-height:.8;white-space:nowrap}
.si-stat strong{font-size:clamp(76px,9.2cqw,168px);font-weight:700;letter-spacing:-.041em;background:linear-gradient(180deg,#fff 0%,#fff 46%,var(--accent) 140%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.si-pre,.si-unit{font-size:clamp(20px,2.3cqw,40px);font-weight:600;letter-spacing:-.022em;color:var(--accent)}
.si-pre{align-self:flex-start;margin-right:.12em;font-size:clamp(15px,1.45cqw,24px);font-weight:600;letter-spacing:-.006em;color:rgba(255,255,255,.75);transform:translateY(.2em)}
.si-fact{display:block;max-width:31ch;min-height:2.76em;margin-top:clamp(12px,1.8vh,18px);font-size:clamp(14px,1.12cqw,17px);line-height:1.38;color:rgba(255,255,255,.84)}
.si-fact sup{margin-left:2px;font-size:.66em;color:var(--accent);font-weight:700}
.si-q{display:block;width:100%;font:740 clamp(26px,2.6cqw,46px)/1.04 Inter,Inter,system-ui,sans-serif;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.si-cta{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(16px,2.4vh,26px);height:48px;padding:0 6px 0 20px;border-radius:99px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);font-size:14.5px;font-weight:650;letter-spacing:.01em;color:#fff;transition:background .25s,color .25s,box-shadow .25s}
.si-cta i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:#0b1620;transition:transform .3s var(--ease)}
.si-cta svg{width:18px;height:18px}
.si-src{margin-top:10px;font-size:11px;letter-spacing:.02em;color:rgba(255,255,255,.5)}
/* Zahl samt Satz und Quelle erst bei Hover/Fokus: wächst nach oben, Frage und Button bleiben stehen */
.si-hook{display:grid;grid-template-rows:0fr;width:100%;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .3s ease}
.si-hook-in{display:flex;flex-direction:column;align-items:flex-start;min-height:0;overflow:hidden}
.si-hook-in::after{content:"";flex:none;width:100%;height:1px;margin:clamp(16px,2.4vh,24px) 0;background:rgba(255,255,255,.24)}
.slant-select:hover .si-hook,.slant-select:focus-visible .si-hook{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s var(--ease),opacity .45s ease .08s}
@media(prefers-reduced-motion:reduce){.si-hook{transition:opacity .2s}}
.slant-select:hover .si-cta{background:var(--accent);color:#0b1620;box-shadow:none}
.slant-select:hover .si-cta i{background:#0b1620;color:var(--accent);transform:translateX(3px)}
.slant-select:focus-visible .si-cta{outline:2px solid var(--accent);outline-offset:3px}
.slant-home[data-active=overview] .slant-shade{background:linear-gradient(180deg,rgba(var(--rgb),.18),rgba(var(--rgb),.08) 24%,rgba(4,8,12,.62) 44%,rgba(4,8,12,.74) 62%,var(--deep) 100%),linear-gradient(180deg,rgba(2,7,12,.72) 0%,rgba(2,7,12,.45) 22%,transparent 42%)}
.slant-home[data-active=overview] .slant-panel[data-sector=energy] .slant-poster{filter:saturate(.75)}
.slant-home[data-active=overview] .slant-panel[data-sector=repair] .slant-poster{filter:brightness(.72)}
@media(min-width:701px) and (max-width:1050px){.slant-name b{min-width:30px;height:21px;font-size:10px}.slant-name>.sn-t{font-size:clamp(28px,4.4cqw,44px)}.slant-panel[data-sector=repair] .slant-name{--name-left:38.4%}.slant-panel[data-sector=energy] .slant-name{--name-left:71%}.si-stat strong{font-size:clamp(52px,8.6cqw,84px)}.si-unit{font-size:clamp(16px,2.6cqw,24px)}.si-pre{font-size:13px}.si-fact{font-size:12.5px}.si-q{font-size:clamp(19px,2.9cqw,26px)}.si-cta{height:40px;padding:0 4px 0 14px;font-size:12.5px;gap:10px}.si-cta i{width:32px;height:32px}.si-src{font-size:10px}.slant-panel[data-sector=repair] .slant-intro{--intro-left:36%;--intro-w:25%}.slant-panel[data-sector=energy] .slant-intro{--intro-left:69%;--intro-w:27%}}
@media(max-height:820px) and (min-width:701px){.slant-intro{bottom:clamp(84px,11vh,110px)}.si-stat strong{font-size:clamp(64px,7.4cqw,128px)}.si-q{font-size:clamp(22px,2.2cqw,36px)}}
@media(max-height:700px) and (min-width:701px){.si-fact{display:none}.si-stat{margin-top:10px}.si-stat strong{font-size:clamp(56px,6.2cqw,96px)}}
@media(max-height:600px) and (min-width:701px){.si-stat,.si-src{display:none}.si-q{margin-top:12px}.slant-name>.sn-t{font-size:clamp(30px,3.2cqw,48px)}}

/* ===== Smartphone (≤700px, 07.10.2026 Nutzerwunsch): Desktop-Hero übereinander =====
   Drei Flächen mit schrägen Trennkanten (gleiche Neigung wie am Desktop). Übersicht: Logo, zweifarbiger Name, Kurzsatz,
   „Ansehen“. Wie am Desktop geht nach einiger Zeit ein Bereich auf (Video, Titel, Text, Kacheln, Knopf), die anderen werden
   zu schmalen Streifen. Lage der Kanten als Variablen (--b1l/--b1r/--b2l/--b2r = Anteil der nutzbaren Höhe links/rechts),
   damit clip-path, Bild und Inhalt gemeinsam weich übergehen. Der Hero läuft hinter die Glasleiste unten (--mh), alle
   Inhalte bleiben darüber. Steuerung: Ende von slanted-home.js. */
.m-home{display:none}
@media(max-width:700px){
body[data-home-design=showcase] .slant-home{height:auto!important;min-height:0!important;overflow:visible;background:#0b0c0d;container-type:normal}
body[data-home-design=showcase] .slant-home>:not(.m-home):not(h1){display:none!important}
.m-home{--mh:var(--mnav-h,0px);--U:(100% - var(--mh));--ease:cubic-bezier(.65,0,.35,1);--b1l:.37;--b1r:.30;--b2l:.70;--b2r:.63;
 display:block;position:relative;container-type:size;height:calc(100svh - 48px);min-height:calc(540px + var(--mh));max-height:calc(900px + var(--mh));background:#0b0c0d;overflow:hidden}
.m-home[data-active=security]{--b1l:.82;--b1r:.75;--b2l:.915;--b2r:.845}
.m-home[data-active=repair]{--b1l:.155;--b1r:.085;--b2l:.915;--b2r:.845}
.m-home[data-active=energy]{--b1l:.155;--b1r:.085;--b2l:.25;--b2r:.18}
.m-band{--accent:#6ee1ed;--rgb:14,151,178;position:absolute;inset:0;color:#fff;transition:clip-path 1.1s var(--ease);
 --up:0;--lo:var(--b1r);--sl:calc(var(--b1l) / 2);
 clip-path:polygon(0 0,100% 0,100% calc(var(--U) * var(--b1r)),0 calc(var(--U) * var(--b1l)))}
.m-band[data-sector=repair]{--accent:#c5a7ef;--rgb:128,78,183;--up:var(--b1l);--lo:var(--b2r);--sl:calc((var(--b1l) + var(--b2l)) / 2);
 clip-path:polygon(0 calc(var(--U) * var(--b1l) - 1px),100% calc(var(--U) * var(--b1r) - 1px),100% calc(var(--U) * var(--b2r)),0 calc(var(--U) * var(--b2l)))}
.m-band[data-sector=energy]{--accent:#b0db89;--rgb:92,145,56;--up:var(--b2l);--lo:1;--sl:calc((var(--b2l) + 1) / 2);
 clip-path:polygon(0 calc(var(--U) * var(--b2l) - 1px),100% calc(var(--U) * var(--b2r) - 1px),100% 100%,0 100%)}
/* Bild und Video füllen die Fläche des Bereichs (unterste Fläche bis hinter die Leiste) */
.m-band-bg,.m-band-video{position:absolute;left:0;width:100%;max-width:none;border-radius:0;object-fit:cover;pointer-events:none;transition:top 1.1s var(--ease),height 1.1s var(--ease)}
.m-band[data-sector=security] :is(.m-band-bg,.m-band-video){top:0;height:calc(var(--U) * var(--b1l));object-position:72% 42%}
.m-band[data-sector=repair] :is(.m-band-bg,.m-band-video){top:calc(var(--U) * var(--b1r));height:calc(var(--U) * (var(--b2l) - var(--b1r)));object-position:70% 58%}
.m-band[data-sector=energy] :is(.m-band-bg,.m-band-video){top:calc(var(--U) * var(--b2r));height:calc(100% - var(--U) * var(--b2r));object-position:84% 50%}
.m-band-video{opacity:0;transition:opacity .6s ease,top 1.1s var(--ease),height 1.1s var(--ease)}
.m-band.is-playing .m-band-video{opacity:1}
.m-band-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,10,.8) 0%,rgba(6,8,10,.5) 52%,rgba(6,8,10,.08) 100%),linear-gradient(180deg,rgba(var(--rgb),.2),rgba(var(--rgb),.12))}
.m-band-shade::after{content:"";position:absolute;inset:0;background:rgba(6,8,10,.12);opacity:0;transition:opacity .5s}
.m-band.is-strip .m-band-shade::after{opacity:1}
/* Übersicht: die ganze Fläche ist der Link */
.m-band-link{position:absolute;inset:0;color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:opacity .3s}
.m-home:not([data-active=overview]) .m-band-link{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
.m-band-link:focus-visible{outline:none}
.m-band-link:focus-visible .m-cta{outline:3px solid var(--accent);outline-offset:3px}
.m-band-in{position:absolute;left:18px;right:18px;top:clamp(12px,2.6cqh,24px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(5px,1cqh,10px)}
.m-band[data-sector=repair] .m-band-in{top:calc(var(--U) * .374 + clamp(12px,2.6cqh,24px))}
.m-band[data-sector=energy] .m-band-in{top:auto;bottom:calc(var(--mh) + clamp(14px,3cqh,26px))}
.m-logo{display:block;width:auto;height:clamp(26px,4.6cqh,40px);max-width:none;border-radius:0;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.m-name{display:flex;flex-direction:column;font:700 clamp(26px,4.9cqh,38px)/.94 Inter,system-ui,sans-serif;letter-spacing:-.033em;white-space:nowrap;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.m-name-c,.m-o-t em{color:transparent;text-shadow:none;background:linear-gradient(100deg,var(--accent) 0%,var(--accent) 38%,#fff 50%,var(--accent) 62%,var(--accent) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.m-q{display:block;max-width:100%;font:740 clamp(15px,2.6cqh,19px)/1.15 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.35)}
.m-cta,.m-o-cta{display:inline-flex;align-items:center;gap:12px;height:clamp(38px,6cqh,44px);padding:0 4px 0 16px;border-radius:99px;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);font:650 14px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;color:#fff;text-decoration:none}
.m-cta i,.m-o-cta i{display:grid;place-items:center;width:clamp(30px,4.8cqh,36px);height:clamp(30px,4.8cqh,36px);border-radius:50%;background:var(--accent);color:#0b1620}
.m-cta svg,.m-o-cta svg{width:17px;height:17px}
.m-band-link:active .m-cta{background:var(--accent);color:#0b1620;box-shadow:none}
.m-band-link:active .m-cta i{background:#0b1620;color:var(--accent)}
.m-band .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@container (max-height:640px){.m-q{display:none}}
@container (max-height:840px){html[data-lang=ru] .m-q{display:none}}  /* russische Sätze brechen zweizeilig um */
/* Streifen der nicht geöffneten Bereiche: Logo und Name, Antippen öffnet den Bereich */
.m-strip{position:absolute;inset:0;width:100%;display:flex;align-items:flex-start;padding:0 18px;border:0;border-radius:0;background:none;color:var(--accent);font:inherit;text-align:left;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;-webkit-tap-highlight-color:transparent}
.m-band.is-strip .m-strip{opacity:1;visibility:visible;transition:opacity .5s .6s}
.m-strip>*{position:relative;top:calc(var(--U) * var(--sl));transform:translateY(-50%)}
.m-strip img{width:auto;height:24px;max-width:none;border-radius:0;margin-right:10px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.m-strip span{font:700 18px/1 Inter,system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(0,0,0,.6)}
/* Name füllt den Streifen wie am Desktop (SVG aus fitStrip() in slanted-home.js); Logo und Text bleiben als Rückfall */
.m-strip .m-fit{position:absolute!important;inset:0;top:0!important;transform:none!important;width:100%;height:100%;overflow:visible;pointer-events:none;fill:currentColor;font-family:Inter,system-ui,sans-serif;font-weight:800;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35))}
.m-strip.is-fit>img,.m-strip.is-fit>span{opacity:0}
.m-strip:focus-visible{outline:none}
.m-strip:focus-visible span{text-decoration:underline;text-underline-offset:4px}
/* Geöffneter Bereich wie die Desktop-Szene: Kennung, Titel, Text, Kacheln, Knopf */
.m-open{position:absolute;left:18px;right:18px;top:calc(var(--U) * var(--up) + 16px);height:calc(var(--U) * (var(--lo) - var(--up)) - 30px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s,transform .5s var(--ease),visibility 0s .2s}
.m-band.is-open .m-open{opacity:1;visibility:visible;transform:none;transition:opacity .5s .7s,transform .8s .7s cubic-bezier(.22,1,.36,1)}
.m-o-k{display:flex;align-items:center;gap:8px;margin:0 0 clamp(10px,1.8cqh,16px);font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.m-o-k i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.m-o-t{margin:0 0 clamp(8px,1.6cqh,14px);font:700 clamp(30px,5.6cqh,42px)/1 Inter,system-ui,sans-serif;letter-spacing:-.035em;text-wrap:balance}
.m-o-t em{font-style:normal}
.m-o-d{margin:0 0 clamp(14px,2.4cqh,22px);max-width:34em;font-size:clamp(13.5px,2cqh,15px);line-height:1.45;color:rgba(255,255,255,.86)}
.m-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;width:100%;margin-bottom:clamp(14px,2.6cqh,24px)}
.m-tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:clamp(70px,11cqh,92px);padding:11px 10px 10px;border-radius:14px;background:rgba(12,14,16,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;text-decoration:none}
.m-tile-ico{display:block;width:30px;height:30px;color:var(--accent)}
.m-tile-ico svg{width:100%;height:100%}
.m-tile-t{font:650 13.5px/1.15 Inter,system-ui,sans-serif;letter-spacing:-.01em;hyphens:auto;-webkit-hyphens:auto}
.m-tile:active{background:rgba(var(--rgb),.35)}
/* vier Kacheln (Reparatur): 2 × 2, Symbol neben dem Namen, damit nichts mitten im Wort umbricht */
.m-tiles:has(>:nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
.m-tiles:has(>:nth-child(4)) .m-tile{flex-direction:row;align-items:center;justify-content:flex-start;min-height:clamp(46px,7.4cqh,56px);padding:8px 10px}
.m-tiles:has(>:nth-child(4)) .m-tile-ico{width:26px;height:26px;flex:none}
.m-tile:focus-visible,.m-o-cta:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.m-o-cta{background:var(--accent);color:#0b1620;box-shadow:none;height:46px;padding-left:20px}
.m-o-cta i{background:rgba(11,22,32,.12);color:#0b1620}
@container (max-height:700px){.m-o-d{display:none}}
@media(prefers-reduced-motion:no-preference){
 .m-name-c{animation:snShine 7s ease-in-out 1.4s infinite}
 .m-band[data-sector=repair] .m-name-c{animation-delay:3.7s}
 .m-band[data-sector=energy] .m-name-c{animation-delay:6s}
 .m-band.is-open .m-o-t em{animation:snShine 1.6s ease-out .9s 1 both}
 .m-band-bg{animation:mBandDrift 22s ease-in-out infinite alternate}
 .m-band[data-sector=repair] .m-band-bg{animation-delay:-7s}
 .m-band[data-sector=energy] .m-band-bg{animation-delay:-14s}
}
@media(prefers-reduced-motion:reduce){.m-band,.m-band-bg,.m-band-video,.m-open,.m-strip,.m-band-link{transition:none!important}}
@keyframes mBandDrift{from{transform:scale(1.02)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
body[data-home-design=showcase] .editorial-card h3{font-size:clamp(30px,8.6vw,2.8rem)!important;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;margin-right:44px}
}

/* v12: Hero in der neuen Seitenhülle (body.sx) – bisherige Grundwerte beibehalten */
body.sx .slant-home{font-size:16px;line-height:1.5}
body.sx .slant-home :is(h1,h2,h3){font-family:inherit}

/* v14: Fotos statt Strichsymbolen in den Bereichskacheln */
.service-art{border-radius:16px;overflow:hidden;background:#0d1012;box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.14)}
.service-art:before{display:none}
.service-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.service-art.is-product{background:#fff}
.service-art.is-product img{object-fit:contain;padding:8%}
.slant-service:hover .service-art img,.slant-service:focus-visible .service-art img{transform:scale(1.08)}
@media(max-width:700px){.service-art{border-radius:12px}}
.slant-services:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:700px){.slant-services:has(> :nth-child(4)){grid-template-columns:1fr}}

/* v15.7: keine Farbtönung mehr über den Videos (die Akzentfarben sind im Video), nur neutrale Abdunklung für die Lesbarkeit */
.slant-panel{background:#05070a}
.slant-shade{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.06) 30%,rgba(0,0,0,.32) 58%,rgba(5,7,9,.86) 100%)}
.slant-shade:after{background:linear-gradient(90deg,rgba(5,7,9,.9),rgba(5,7,9,.7) 32%,rgba(5,7,9,.22) 76%,rgba(5,7,9,.04))}
.slant-home[data-active=overview] .slant-shade{background:linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.16) 24%,rgba(4,6,8,.46) 48%,rgba(4,6,8,.72) 66%,rgba(4,6,8,.9) 100%)}
.slant-home[data-active=overview] .slant-panel[data-sector] .slant-poster{filter:none}
/* v15.7: In der Übersicht steht das Motiv mittig in seiner Schrägfläche. --sx = Lage des Motivs im Bild (slanted_home.py, SUBJECT_X).
   Bildbreite bei object-fit:cover = Heldenhöhe x 16/9; clamp hält das Bild randlos in der 46-%-Fläche. Große Ansicht unverändert. */
.slant-panel .slant-poster{--iw:max(46cqw,calc((100svh - var(--gn-h,52px)) * 16 / 9));transition:left .85s var(--ease),width .85s var(--ease),transform 1.2s var(--ease),object-position .85s var(--ease)}
.slant-home[data-active=overview] .slant-panel .slant-poster{object-position:clamp(calc(46cqw - var(--iw)),calc(23cqw - var(--sx,.5) * var(--iw)),0px) 50%!important}
/* v15.7: Bereichs-Bildmarke statt Nummer über dem Namen */
.slant-name b.sn-logo{display:block;min-width:0;width:auto;height:clamp(44px,5.6vh,60px);padding:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.slant-name b.sn-logo img{display:block;width:auto;height:100%;max-width:none;border-radius:0}
.slant-select:hover .slant-name b.sn-logo{box-shadow:none;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)) drop-shadow(0 0 14px rgba(var(--rgb),.55))}
@media(min-width:701px) and (max-width:1050px){.slant-name b.sn-logo{min-width:0;height:40px}}
/* v15.7: Bereichskacheln mit gezeichnetem Gerätesymbol (tools/tile_icons.py), Titel und Pfeil; ohne Foto, Unterzeile, Frage und Ablaufzeile */
.slant-service-picker{margin-bottom:30px}
.slant-services{gap:10px}
.slant-service{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;min-height:136px;padding:16px 16px 17px 18px;border-radius:20px}
.slant-service:hover,.slant-service:focus-visible{transform:translateY(-3px);box-shadow:none;border-color:rgba(var(--rgb),.7)}
.service-label{min-width:0;padding-right:4px}.service-label strong{font-size:clamp(16px,1.3cqw,19px);font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}
.service-arrow{position:absolute;top:16px;right:15px;width:18px;height:18px;opacity:.75}
.svc-ico{display:block;flex:none;width:52px;height:52px;color:#fff;filter:drop-shadow(0 0 10px rgba(var(--rgb),.22));transition:transform .35s var(--ease),filter .35s}
.svc-ico svg{display:block;width:100%;height:100%;overflow:visible}
.svc-ico .b{fill:rgba(255,255,255,.07);stroke:none}.svc-ico .d{fill:#0b0d10;stroke:none}.svc-ico .w{fill:#fff;stroke:none}
.svc-ico .a{stroke:var(--accent)}.svc-ico .af{fill:var(--accent);stroke:none}
.svc-ico .o{opacity:.45}.svc-ico .af.o{opacity:.3}.svc-ico .af.o2{opacity:.14}.svc-ico .k{stroke:#0b0d10;stroke-width:1.8}
.slant-service:hover .svc-ico,.slant-service:focus-visible .svc-ico{transform:translateY(-2px);filter:drop-shadow(0 0 12px rgba(var(--rgb),.5))}
@media(min-width:701px) and (max-width:1050px){.slant-service{min-height:112px;gap:10px;padding:13px 12px 14px 14px;border-radius:16px}.svc-ico{width:42px;height:42px}.service-label strong{font-size:15px}.service-arrow{width:15px;height:15px;top:13px;right:12px}}
@media(max-height:790px) and (min-width:701px){.slant-service{min-height:110px;gap:10px;padding-block:13px 14px}.svc-ico{width:42px;height:42px}.slant-service-picker{margin-bottom:24px}}
@media(max-height:640px) and (min-width:701px){.slant-service{min-height:90px;gap:6px;padding-block:10px 11px}.svc-ico{width:32px;height:32px}.slant-service-picker{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.svc-ico{transition:none}}
/* Wechsel zwischen den Bereichen per Maus über die Schrägflächen; die Steuerung bleibt nur für die Tastatur (erscheint bei Fokus) */
.slant-home .slant-bottom:not(:focus-within){opacity:0;pointer-events:none}
/* vier Kacheln (Reparatur): etwas breitere Reihe, auf schmalen Tablets 2 x 2 */
.slant-service-picker:has(.slant-services > :nth-child(4)){max-width:760px}
@media(min-width:701px) and (max-width:900px){.slant-services:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* v15.7 (Nutzerwunsch 06.10.2026): keine Filter und keine Abdunklung mehr über Videos und Standbildern, die Farben kommen ungefiltert durch.
   Kein Verlauf, kein Schleier. Lesbarkeit über die Bildlage (SUBJECT_X) und dunkles Glas nur in den Kacheln. */
.slant-panel video,.slant-panel .slant-poster,.slant-home[data-active=overview] .slant-panel[data-sector] .slant-poster{filter:none!important}
.slant-shade,.slant-home[data-active=overview] .slant-shade{background:none}
.slant-shade:after{background:none}
/* nur ein enger Kantenschatten an der Schrift; breite Schatten wirkten wie ein Filter über dem Video (Nutzer 06.10.2026) */
.slant-content h2,.slant-intro .si-q,.slant-vertical{text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* Bereichsname: Zeilen sind für die Einblendung maskiert, darum Schatten am Container (würde sonst als Kasten abgeschnitten) */
.slant-name .sn-t{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}  /* eng an der Schrift, kein Hof */
.slant-eyebrow{color:rgba(255,255,255,.92)}.slant-eyebrow i{background:var(--accent)}
.slant-content .slant-description,.slant-eyebrow,.slant-utility>a{text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* Kacheln als dunkles Glas, damit Titel auf hellen Videostellen lesbar bleiben */
.slant-service{background:rgba(10,12,15,.52);border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.slant-service:hover,.slant-service:focus-visible{background:rgba(10,12,15,.62)}
/* Russisch: Überschrift „Strom- und Gastarif prüfen lassen.“ ist fast doppelt so lang, darum im Hero kleiner (sonst läuft der Knopf aus dem Bild) */
@media(min-width:701px){html[data-lang=ru] .slant-panel[data-sector=energy] .slant-content h2{font-size:clamp(36px,5.4cqw,78px)}}
@media(max-height:790px) and (min-width:701px){html[data-lang=ru] .slant-panel[data-sector=energy] .slant-content h2{font-size:clamp(32px,4.6cqw,60px)}}
/* v15.8 (Nutzerwunsch 06.10.2026): Bereichsname im schmalen Balken typografisch an die Form angepasst.
   Jedes Zeichen sitzt in .slant-fit mit eigener Projektion (fitVertical() in slanted-home.js); .slant-vertical bleibt als Quelle. */
.slant-fit{position:absolute;inset:0;pointer-events:none;color:var(--accent);opacity:0;visibility:hidden;transition:opacity .12s,visibility 0s .12s;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.slant-fit>span{position:absolute;left:0;top:0;font:inherit;letter-spacing:0;white-space:pre;transform-origin:0 0;text-shadow:none}
.slant-home.vfit:not([data-active=overview]) .slant-panel:not(.is-active) .slant-fit{opacity:1;visibility:visible;transition:opacity .35s ease .4s,visibility 0s .4s}
.slant-home.vfit:not([data-active=overview]) .slant-panel:not(.is-active) .slant-fit.vf-move{transition:transform .85s var(--ease)}
.slant-home.vfit:not([data-active=overview]) .slant-panel:not(.is-active) .slant-vertical{visibility:hidden;transition:none}
.slant-select:focus-visible .slant-fit>span{text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.1em}
@media(prefers-reduced-motion:reduce){.slant-fit,.slant-fit>span{transition:none!important}}
/* Der Hinweis „Leistungen entdecken“ steht an der Textkante des geöffneten Bereichs, nicht auf dem linken Balken */
@media(min-width:701px){.slant-home .slant-utility{transition:left .85s var(--ease)}.slant-home[data-active=repair] .slant-utility{left:17%}.slant-home[data-active=energy] .slant-utility{left:27%}}