/* STE IT Service GmbH – Zusatz-Styles: Maskottchen, Foto-Bänder, Schulungsseiten. Nach site.css einbinden. */
/* ---------- Maskottchen ---------- */
.mk{display:block;height:auto;max-width:100%;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
.mk-hero{width:min(520px,85vw);position:relative;z-index:2;margin:0 auto -48px}
section.hero:has(.mk-hero){padding-bottom:104px}
figure.hero-pic.tall{overflow:visible}
section.hero{position:relative}
.mk-hero-abs{position:absolute;right:clamp(8px,calc((100vw - 1240px) / 2 + 24px),600px);bottom:-84px;width:min(260px,24vw);z-index:5;pointer-events:none}
.mk-helfer{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;align-items:flex-end;gap:4px;text-decoration:none;color:var(--text)}
.mk-helfer:hover{color:var(--text)}
.mk-helfer img{width:135px}
.mk-helfer span{background:var(--card-solid);border:1px solid var(--line2);border-radius:14px 14px 4px 14px;padding:8px 12px;font-size:14px;box-shadow:0 4px 14px rgba(0,0,0,.3);margin-bottom:20px}
/* ---------- Hinweisbox: Schrift füllt den Balken ---------- */
.mk-tipp{position:relative;display:flex;align-items:center;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--or);border-radius:var(--r);padding:36px 44px 36px 270px;min-height:176px}
.mk-tipp img{position:absolute;left:30px;bottom:-24px;width:208px;z-index:2}
.mk-tipp strong{display:block;color:var(--white);font-family:var(--head);font-size:clamp(22px,2.7vw,34px);line-height:1.2;letter-spacing:-.01em}
.mk-tipp p{color:var(--soft);margin-top:10px;font-size:clamp(17px,1.7vw,21px);line-height:1.5}
/* ---------- Abstände: gleichmäßiger Rhythmus ---------- */
.mk-sec{padding:112px 0 0}
.mk-sec + .sec,.mk-sec + .sec-t{padding-top:96px}
.mk-inline{padding-top:112px}
.sec .band{margin:0 0 60px}
.sec .band:last-child{margin-bottom:0}
.sec .grid + .band,.sec .grid + figure,.sec .tbl + .mk-inline{margin-top:44px}
.sec .head{margin-bottom:44px}
/* ---------- Foto-Bänder ---------- */
.band{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.band img,.band svg{width:100%;height:auto;display:block}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:72px 36px 28px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-family:var(--head);font-weight:700;font-size:clamp(26px,4vw,48px);line-height:1.1}
.band-crop img{max-height:420px;object-fit:cover}
.band-mid img{height:clamp(300px,42vw,540px);object-fit:cover}
.band-tall img{height:clamp(380px,52vw,680px);object-fit:cover;object-position:center 60%}
.band.room img{max-height:560px;object-fit:cover;object-position:center 62%}
.band-r figcaption{left:auto;right:0;top:50%;bottom:auto;width:48%;padding:0 36px;background:none;transform:translateY(-50%);font-size:clamp(26px,4.8vw,58px);line-height:1.12;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.band .n{color:var(--or)}
/* ---------- Schritte: Orange-Verlauf mit gut lesbarer Schrift ---------- */
.g5{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.steps-or .card,.steps-or .card h3,.steps-or .card p,.steps-or .card .k,.steps-or .card a{color:#1f2124!important}
.steps-or .card .k{opacity:.8}
.steps-or .card p{font-size:16.5px;font-weight:500}
.steps-or .card h3{font-size:clamp(17px,1.5vw,20px);overflow-wrap:anywhere;hyphens:auto}
.steps-or .card{border-top:4px solid #1f2124!important;border-color:rgba(31,33,36,.18);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.steps-or .card:nth-child(1){background:#FDEBD6!important}
.steps-or .card:nth-child(2){background:#FBD9B0!important}
.steps-or .card:nth-child(3){background:#F8C487!important}
.steps-or .card:nth-child(4){background:#F5AE5C!important}
.steps-or .card:nth-child(5){background:#F29535!important}
/* ---------- Modi-Kacheln mit Maskottchen ---------- */
.mk-gap{margin-top:112px}
.card.mk-mode{position:relative;padding-top:132px;overflow:visible}
.card.mk-mode img{position:absolute;left:18px;top:-84px;width:195px;z-index:2}
/* ---------- Kontakt-Banner mit Maskottchen ---------- */
.cta.cta-mk{position:relative;margin-top:116px;padding-right:clamp(28px,26vw,400px)}
.cta.cta-mk h2{font-size:clamp(30px,3.8vw,46px)}
.cta.cta-mk p{font-size:clamp(18px,1.8vw,21px);margin-top:10px}
.cta.cta-mk>img{position:absolute;right:clamp(12px,3vw,40px);bottom:42%;width:min(338px,34vw);z-index:2}
/* ---------- Tabelle KI-Modelle ---------- */
.tbl-ki thead th{font-size:clamp(16px,1.5vw,19px)!important;font-weight:700!important;color:var(--or)!important;letter-spacing:.04em;text-transform:none!important}
.tbl-ki tbody th{font-weight:600}
/* ---------- Illustration als SVG, folgt dem Farbschema ---------- */
.ill-fig{margin:0;--ink:#2f3236;--paper:#fefefe}
html.theme-dark .ill-fig{--ink:#E6EAEE;--paper:#1B222B}
.ill-fig svg{width:100%;height:auto;display:block}
.ill-fig figcaption{text-align:center;color:var(--dim);margin-top:10px;font-size:15px}
/* ---------- Sonstiges ---------- */
.noteline{border-left:5px solid var(--or);background:var(--card);border-radius:10px;padding:16px 20px;color:var(--soft);font-size:17px;margin-top:24px}
.tags.big li{font-size:16px}
.checks.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:12px 32px}
@media(min-width:1100px){.ftr-in{grid-template-columns:1.3fr repeat(5,minmax(0,1fr));gap:28px}}
/* ---------- Mobil ---------- */
@media(max-width:900px){.mk-hero-abs{width:130px;bottom:-50px;right:8px}}
@media(max-width:760px){
.mk-tipp{flex-direction:column;align-items:flex-start;padding:28px 24px 28px;min-height:0}
.mk-tipp img{position:static;margin:-96px 0 8px;width:170px}
.cta.cta-mk{padding-right:clamp(28px,5vw,56px)}
.cta.cta-mk>img{position:static;width:240px;margin:-100px auto 0}
.band-r figcaption{width:52%;padding:0 16px}
.mk-helfer span{display:none}.mk-helfer img{width:110px}}
@media print{.mk-helfer,.mk-hero-abs{display:none}}
/* Support-Helfer verdeckt am Seitenende nicht die Icons im Footer */
.ftr{padding-bottom:104px}
@media(max-width:600px){.ftr{padding-bottom:84px}}
/* ===== Ergänzungen (Runde 3) ===== */
/* Navigation: aktuelle Seite mit orangem Punkt */
.nav .sub a[aria-current="page"]{position:relative;color:var(--white);font-weight:600;padding-left:30px}
.nav .sub a[aria-current="page"]::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--or);box-shadow:0 0 0 3px rgba(242,138,30,.28)}
.nav>ul>li>a.top[aria-current="page"]::before{content:"";width:8px;height:8px;margin-right:2px;border-radius:50%;background:var(--or);box-shadow:0 0 0 3px rgba(242,138,30,.28)}
/* Maskottchen steht über dem Bild rechts oben (Servervirtualisierung, UniFi und weitere) */
.hero-in>div:last-child,.hero-in>figure:last-child{position:relative}
.mk-peek{position:absolute;right:0;top:-134px;width:176px;z-index:6;pointer-events:none}
section.hero:has(.mk-peek){padding-top:150px}
@media(max-width:900px){.mk-peek{width:120px;top:-82px}section.hero:has(.mk-peek){padding-top:112px}}
/* Fernwartung: Maskottchen mit Lampe halb über dem Download-Block */
.card.mk-card-top{position:relative;overflow:visible;margin-top:112px}
.mk-card-mascot{position:absolute;right:22px;top:-124px;width:230px;z-index:3;pointer-events:none}
/* Startseite: verliebtes Maskottchen mit aufsteigenden Herzen */
.mk-lovepanel{position:relative;margin-top:168px}
.mk-love{position:absolute;right:clamp(12px,6vw,96px);top:-176px;width:256px;z-index:3;pointer-events:none}
.mk-love img{position:relative;z-index:2;animation:loveBob 3.6s ease-in-out infinite}
.mk-love .hrt{position:absolute;left:50%;top:44px;width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));opacity:0;z-index:3;animation:heartUp 4.2s ease-in infinite;animation-delay:var(--dl)}
.mk-bubble{position:absolute;right:236px;top:30px;z-index:4;background:var(--card-solid);border:1px solid var(--line2);border-radius:14px 14px 4px 14px;padding:8px 14px;font-size:15px;font-weight:600;color:var(--white);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@keyframes heartUp{0%{transform:translate(-50%,0) scale(.5) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),-120px) scale(1.15) rotate(var(--rot));opacity:0}}
@keyframes loveBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.mk-love .hrt{animation:none;opacity:.9;transform:translate(calc(-50% + var(--dx)),-70px)}.mk-love img{animation:none}}
html.a11y-motion .mk-love .hrt{animation:none;opacity:.9;transform:translate(calc(-50% + var(--dx)),-70px)}
html.a11y-motion .mk-love img{animation:none}
@media(max-width:760px){.mk-bubble{display:none}.mk-love{width:160px;top:-100px}}
/* Webdesign-Konzepte als SVG */
.concept-vis .cv-svg{width:100%;height:100%;display:block}
/* Firewall-Seite: Foto unter dem Text, linke Spalte bleibt sichtbar */
.split-top{align-items:flex-start}
.split-top .pic img{aspect-ratio:4/3;object-fit:cover}
@media(min-width:900px){.split-top>div:first-child{position:sticky;top:110px}}
/* Microsoft 365: Vergleichstabelle ohne Scroller */
.split-wide>*{flex:1 1 100%}
.tbl-fit table{min-width:0;width:100%}
.tbl-fit th,.tbl-fit td{padding:14px 20px}
.split-wide>.panel{margin-top:8px}
@media(min-width:900px){.split-wide>.panel .checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 32px}}
/* Region: Städte und Gemeinden als übersichtliches Raster */
#orte .grid.g3{display:block}
#orte .ortsuche{display:flex;align-items:center;gap:12px;font-weight:600;max-width:460px;margin-bottom:22px}
#orte .ortsuche input{flex:1;min-width:0}
#orte-grid{grid-template-columns:1fr!important;gap:20px}
ul.orte{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
ul.orte li{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02);font-size:15.5px}
ul.orte li a{font-weight:600}
ul.orte li:has(a){border-color:var(--or-line);background:var(--or-bg)}
/* Stellenanzeigen: Maskottchen in voller Blockhöhe, Kopf knapp über dem Rand */
.panel.mk-panel{position:relative;overflow:visible;min-height:300px;margin-top:84px;padding-right:clamp(24px,38vw,470px)}
.mk-fullblock{position:absolute;right:clamp(8px,3vw,48px);bottom:-8px;height:calc(100% + 78px);width:auto;max-width:44%;z-index:2;pointer-events:none}
@media(max-width:760px){.mk-fullblock{position:static;height:auto;width:220px;margin:-80px auto 0}.panel.mk-panel{padding-right:clamp(20px,4vw,40px)}}
/* TK-Gateway-SVG mit bewegter Schlange */
.ti-fig svg{width:100%;height:auto;display:block}
.ti-svg .sn-head{transform-box:view-box;transform-origin:338px 170px;animation:snHead 3.4s ease-in-out infinite}
.ti-svg .sn-body{transform-box:view-box;transform-origin:325px 330px;animation:snBody 4.4s ease-in-out infinite}
.ti-svg .sn-tongue{transform-box:view-box;transform-origin:298px 184px;animation:snTongue 2.6s ease-in-out infinite}
@keyframes snHead{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}}
@keyframes snBody{0%,100%{transform:translateX(0) skewX(0)}50%{transform:translateX(3px) skewX(-2deg)}}
@keyframes snTongue{0%,70%,100%{transform:scaleX(1)}80%{transform:scaleX(1.8)}90%{transform:scaleX(1.1)}}
@media(prefers-reduced-motion:reduce){.ti-svg .sn-head,.ti-svg .sn-body,.ti-svg .sn-tongue{animation:none}}
html.a11y-motion .ti-svg .sn-head,html.a11y-motion .ti-svg .sn-body,html.a11y-motion .ti-svg .sn-tongue{animation:none}
/* ===== Startseite: schwebender Willkommen-Bereich ===== */
.mk-welcome{position:relative;padding:48px 0 28px}
.mkw{position:relative;display:flex;align-items:center;gap:clamp(16px,4vw,64px);min-height:360px}
.mkw-fig{position:relative;flex:0 0 clamp(230px,29vw,360px)}
.mkw-fig::before{content:"";position:absolute;inset:6% -6% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(242,138,30,.38),rgba(242,138,30,0) 72%)}
.mkw-mascot{position:relative;width:100%;transform-origin:50% 92%;animation:mkwSway 5.2s ease-in-out infinite}
.mkw-text{position:relative;z-index:2;min-width:0}
.mkw-title{margin:0;font-size:clamp(40px,6.4vw,88px);line-height:1.02;font-weight:700;letter-spacing:-.02em;color:var(--white)}
.mkw-title .l1,.mkw-title .l2{display:block}
.mkw-title .l2{font-size:.66em;margin-top:.12em}
.mkw-title .w{display:inline-block;white-space:nowrap}
.mkw-title .ch{display:inline-block}
.mkw-org .ch{color:var(--or);text-shadow:0 0 24px rgba(242,138,30,.55)}
.mkw-sub{margin-top:20px;font-size:clamp(18px,2vw,25px);color:var(--soft);max-width:44ch;text-wrap:balance}
.mkw-ic{position:absolute;width:46px;height:46px;color:var(--or);opacity:.55;pointer-events:none}
.mkw-sp{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--or-pale);box-shadow:0 0 12px 3px rgba(255,194,127,.7);animation:mkwTwinkle 3s ease-in-out infinite;animation-delay:var(--d);pointer-events:none}
@keyframes mkwWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-.14em)}}
@keyframes mkwSway{0%,100%{transform:rotate(-2.2deg) translateY(0)}50%{transform:rotate(2.2deg) translateY(-10px)}}
@keyframes mkwFloat{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(10px,-18px) rotate(9deg)}}
@keyframes mkwGlow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes mkwTwinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.2)}}
@keyframes mkwFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mkw-mascot,.mkw-title .ch,.mkw-fig::before,.mkw-ic,.mkw-sp,.mkw-sub{animation:none}}
html.a11y-motion .mkw-mascot,html.a11y-motion .mkw-title .ch,html.a11y-motion .mkw-fig::before,html.a11y-motion .mkw-ic,html.a11y-motion .mkw-sp,html.a11y-motion .mkw-sub{animation:none}
@media(max-width:820px){.mkw{flex-direction:column;text-align:center;min-height:0}.mkw-fig{flex-basis:auto;width:min(300px,70vw)}.mkw-sub{margin-left:auto;margin-right:auto}.mkw-ic:nth-of-type(n+3){display:none}}
/* Korrektur: Maskottchen im Bildrahmen darf die Foto-Styles der Seite nicht erben */
.hero-in .pic img.mk-peek,.hero-in .hero-pic img.mk-peek,.hero-in figure img.mk-peek{position:absolute;right:-4px;top:-134px;left:auto;bottom:auto;width:176px;max-width:176px;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none;margin:0;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35))}
@media(max-width:900px){.hero-in .pic img.mk-peek,.hero-in .hero-pic img.mk-peek,.hero-in figure img.mk-peek{width:120px;max-width:120px;top:-82px}}
/* Awareness-Seite: Kontakt-Banner mit Foto-Hintergrund */
.cta.cta-hands,html.theme-dark .cta.cta-hands{background:linear-gradient(90deg,rgba(11,14,18,.95) 0%,rgba(11,14,18,.78) 55%,rgba(11,14,18,.4) 100%),url(../img/awareness-training-leuchtende-figuren-haende-1600.webp) center/cover;border-color:var(--or-line)}
.cta.cta-hands h2,.cta.cta-hands p{color:#fff}
.cta.cta-hands .btn-g{color:#fff;border-color:rgba(255,255,255,.6)}
.cta.cta-hands .btn-g:hover{background:rgba(255,255,255,.12)}