/* modvio · Modul-Baukasten für die Produktseite (19.10.2026). Lädt nach g-produkte.css.
   Bildmarke als Bereichszeichen: die hervorgehobenen Viertel stehen im Attribut data-q (1 oben links bis 4 unten rechts), vergeben je Bereich in g-module.json. */
.md-g{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:18px;height:18px;flex:none}.md-g i{border-radius:30%;background:#CDD3DC}
.md-g[data-q*="1"] i:nth-child(1),.md-g[data-q*="2"] i:nth-child(2),.md-g[data-q*="3"] i:nth-child(3),.md-g[data-q*="4"] i:nth-child(4){background:var(--blue)}
.md-gw{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:#F2F4F7}.md-gw .md-g{width:20px;height:20px}

/* Laufband in der Bühne */
.mq{position:absolute;left:0;right:0;bottom:34px;display:grid;gap:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-r{display:flex;width:max-content;animation:mqRun 48s linear infinite}.mq-r:nth-child(2){animation-duration:60s;animation-direction:reverse}.mq-r:nth-child(3){animation-duration:54s}
.mq-s{display:flex;gap:12px;padding-right:12px}
.mq-c{display:flex;align-items:center;gap:11px;height:56px;padding:0 20px 0 16px;border-radius:15px;background:#fff;color:#14161B;font-size:15px;font-weight:600;letter-spacing:-.015em;white-space:nowrap;box-shadow:0 20px 40px -24px rgba(8,22,70,.65)}
.mq-c small{font-size:12px;font-weight:500;letter-spacing:0;color:#8A909A}
.mq-c.dk{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}.mq-c.dk small{color:rgba(255,255,255,.78)}.mq-c.dk .md-g i{background:rgba(255,255,255,.32)}
.mq-c.dk .md-g[data-q*="1"] i:nth-child(1),.mq-c.dk .md-g[data-q*="2"] i:nth-child(2),.mq-c.dk .md-g[data-q*="3"] i:nth-child(3),.mq-c.dk .md-g[data-q*="4"] i:nth-child(4){background:#fff}
.pd-panel:hover .mq-r{animation-play-state:paused}
@keyframes mqRun{to{transform:translateX(-50%)}}

/* Filter */
.md-tabs{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;margin-bottom:24px;padding:5px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E8EBEF;overflow-x:auto;scrollbar-width:none}
.md-tabs::-webkit-scrollbar{display:none}
.md-tab{position:relative;z-index:1;display:flex;align-items:center;gap:8px;flex:none;height:42px;padding:0 16px;border:0;border-radius:10px;background:none;font:inherit;font-size:14.5px;font-weight:500;color:#5A616D;white-space:nowrap;cursor:pointer;transition:color .25s}
.md-tab:hover{color:#14161B}.md-tab[aria-pressed="true"]{color:#fff}.md-tabs:not(.js) .md-tab[aria-pressed="true"]{background:#14161B}
.md-tab em{padding:1px 7px;border-radius:99px;background:#F2F4F7;font-style:normal;font-size:12px;font-weight:600;color:#5A616D;transition:background .25s,color .25s}.md-tab[aria-pressed="true"] em{background:rgba(255,255,255,.2);color:#fff}
.md-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.md-pill{position:absolute;left:0;top:5px;height:42px;border-radius:10px;background:#14161B;transition:transform .42s cubic-bezier(.3,1.25,.5,1),width .42s cubic-bezier(.3,1.25,.5,1);pointer-events:none}

/* Modul-Kacheln */
.md-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.md{position:relative;display:flex;flex-direction:column;min-height:244px;padding:18px 18px 16px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 18px 36px -30px rgba(11,14,20,.3);color:#14161B;scroll-margin-top:110px;transition:transform .35s cubic-bezier(.2,1.5,.4,1),box-shadow .25s,opacity .3s}
.md[hidden]{display:none}
.md:hover{transform:translateY(-4px);box-shadow:0 0 0 1px #D6E0FA,0 0 0 6px rgba(47,107,255,.07),0 26px 44px -26px rgba(30,79,216,.45)}
.md-t{display:flex;align-items:center;gap:12px}
.md-t small{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A909A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-b{display:inline-flex;vertical-align:3px;margin-left:8px;padding:3px 8px;letter-spacing:0;border-radius:99px;background:var(--blue-tint);color:var(--blue-deep);font-size:11px;font-weight:600}
.md-x{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-left:auto;border-radius:50%;box-shadow:inset 0 0 0 1px #E4E7EC;color:#14161B;transition:background .2s,color .2s,box-shadow .2s,transform .35s cubic-bezier(.3,1.4,.5,1)}.md-x svg{width:14px;height:14px}
.md:hover .md-x{background:#14161B;color:#fff;box-shadow:none}.md:hover .md-x.pl{transform:rotate(90deg)}
.md h3{margin-top:22px;font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.md-a{all:unset;cursor:pointer}.md-a::after{content:"";position:absolute;inset:0;border-radius:inherit}.md-a:focus-visible::after{outline:2px solid var(--blue);outline-offset:3px}
.md p{margin:8px 0 18px;font-size:14px;line-height:1.5;color:#5A616D;text-wrap:pretty}
.md-k{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:9px 10px 9px 12px;border-radius:12px;background:#F5F7F9;font-size:12.5px;font-variant-numeric:tabular-nums}
.md-k b{min-width:0;font-weight:500;color:#3D4350;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.md-k .wg-pl{flex:none}
.md-bereiche.hl .md:not(.on):not(.cn){opacity:.35}
.md.cn{box-shadow:0 0 0 1.5px var(--blue),0 22px 40px -28px rgba(30,79,216,.55)}
.md.cn::before{content:"verbunden";position:absolute;top:-11px;right:16px;z-index:2;padding:3px 9px;border-radius:99px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em}
.md.in-f{animation:mdIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0) * 35ms)}
@keyframes mdIn{from{opacity:0;transform:translateY(16px) scale(.98)}}

/* Pakete */
.pa-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pa{display:flex;flex-direction:column;padding:28px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px #E8EBEF,0 18px 36px -30px rgba(11,14,20,.3)}
.pa small{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep)}
.pa h3{margin-top:12px;font-size:25px;line-height:1.15;font-weight:600;letter-spacing:-.035em}
.pa p{margin-top:10px;font-size:15px;line-height:1.55;color:#5A616D;text-wrap:pretty}
.pa-m{display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 26px}.pa-m>span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 10px;border-radius:10px;background:#F5F7F9;font-size:13px;font-weight:500;white-space:nowrap}
.pa-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:auto;padding-top:20px;border-top:1px solid #EEF0F3}
.pa-f .btn{height:44px;padding:0 18px;font-size:14px;border:0;cursor:pointer;font-family:inherit}

/* Baukasten */
.bk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px;align-items:start;scroll-margin-top:90px}
.bk-l{padding:30px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #E8EBEF}
.bk-ps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid #EEF0F3}
.bk-ps>span{margin-right:4px;font-size:13.5px;font-weight:500;color:#5A616D}
.bk-p{height:36px;padding:0 14px;border:0;border-radius:99px;background:#F2F4F7;color:#14161B;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s}.bk-p:hover{background:#14161B;color:#fff}.bk-p.x{background:none;color:#8A909A}.bk-p.x:hover{color:#14161B;background:#F2F4F7}
.bk-gr+.bk-gr{margin-top:22px}
.bk-gr h3{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A909A}
.bk-ch{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.bk-c{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 15px 0 12px;border:0;border-radius:12px;background:#F7F8FA;box-shadow:inset 0 0 0 1px #E8EBEF;font:inherit;font-size:14px;font-weight:500;color:#14161B;cursor:pointer;transition:background .2s,box-shadow .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.bk-c:hover{background:#EEF3FF}.bk-c:active{transform:scale(.95)}.bk-c:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bk-c i{display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:6px;background:#fff;box-shadow:inset 0 0 0 1.5px #C9CED6;transition:background .2s,box-shadow .2s}.bk-c i svg{width:11px;height:11px;color:#fff;opacity:0;transition:opacity .2s}
.bk-c[aria-pressed="true"]{background:var(--blue-tint);box-shadow:inset 0 0 0 1.5px var(--blue)}.bk-c[aria-pressed="true"] i{background:var(--blue);box-shadow:none}.bk-c[aria-pressed="true"] i svg{opacity:1}
.bk-r{position:sticky;top:96px;display:flex;flex-direction:column;min-height:540px;padding:28px;border-radius:24px;overflow:hidden;color:#fff;background:radial-gradient(120% 80% at 80% 0%,#5B8CFF 0%,rgba(91,140,255,0) 60%),linear-gradient(165deg,#3A75FF 0%,#2F6BFF 40%,#1E4FD8 100%);box-shadow:0 40px 80px -44px rgba(30,79,216,.8)}
.bk-r::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.2px) 0 0/16px 16px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.bk-r h3{position:relative;font-size:26px;line-height:1.15;font-weight:500;letter-spacing:-.035em}
.bk-r>p{position:relative;margin-top:8px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.bk-s{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px;align-content:start;flex:1}
.bk-m{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:7px 12px;border-radius:12px;background:#fff;color:#14161B;font-size:13.5px;font-weight:600;box-shadow:0 14px 26px -18px rgba(8,22,70,.6)}
/* Namen umbrechen statt abschneiden (20.10.2026): die Ellipse kuerzte bei 1440 px 24 von 42 Namen. Zwei Zeilen passen
   in die 48 px Mindesthoehe, die Reihen bleiben gleich hoch. */
.bk-m span{min-width:0;line-height:1.25;text-wrap:balance}
.bk-m.nw{animation:bkIn .5s cubic-bezier(.3,1.45,.5,1) both}
@keyframes bkIn{from{opacity:0;transform:scale(.8) translateY(10px)}}
.bk-e{height:48px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.38)}
.bk-st{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.bk-st div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.bk-st b{display:block;font-size:30px;line-height:1;font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.bk-st span{display:block;margin-top:6px;font-size:13px;color:rgba(255,255,255,.88)}
.bk-go{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;margin-top:12px;border-radius:var(--r-btn);background:#fff;color:#14161B;font-size:15px;font-weight:600;transition:background .2s}.bk-go:hover{background:#EEF3FF;color:#14161B}.bk-go svg{width:16px;height:16px}

/* Detail-Schublade */
.md-ov{position:fixed;inset:0;z-index:80;background:rgba(11,14,20,.32);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
.md-ov.on{opacity:1;pointer-events:auto}
.md-dr{position:fixed;top:12px;right:12px;bottom:12px;z-index:81;display:flex;flex-direction:column;width:min(470px,calc(100% - 24px));padding:28px 30px;border-radius:24px;background:#fff;box-shadow:0 40px 80px -30px rgba(11,14,20,.5);overflow-y:auto;overscroll-behavior:contain;transform:translateX(calc(100% + 24px));visibility:hidden;transition:transform .5s cubic-bezier(.2,.9,.2,1),visibility 0s .5s}
.md-dr.on{transform:none;visibility:visible;transition:transform .5s cubic-bezier(.2,.9,.2,1)}
.md-dr-x{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#F2F4F7;color:#14161B;cursor:pointer}.md-dr-x:hover{background:#14161B;color:#fff}.md-dr-x svg{width:16px;height:16px}
.md-dr-c{display:flex;flex-direction:column;flex:1}.md-dr-c.go{animation:mdIn .45s cubic-bezier(.2,.8,.2,1) both}
.md-dr h2{margin-top:22px;font-size:32px;line-height:1.1;font-weight:500;letter-spacing:-.04em;text-wrap:balance}
.md-dr .lead{margin-top:12px;font-size:16px}
.md-dr h4{margin:28px 0 12px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8A909A}
.md-dr .ul{margin:0}
.md-cn{display:flex;flex-wrap:wrap;gap:8px}.md-cn button{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 13px 0 11px;border:0;border-radius:10px;background:#F5F7F9;box-shadow:inset 0 0 0 1px #E8EBEF;font:inherit;font-size:13.5px;font-weight:500;color:#14161B;cursor:pointer}.md-cn button:hover{background:#EEF3FF}
.md-case{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:#F5F7F9;color:#14161B;font-size:14.5px;font-weight:600}.md-case:hover{background:#EEF3FF;color:#14161B}.md-case svg{width:16px;height:16px}
.md-dr-f{display:grid;gap:10px;margin-top:auto;padding-top:28px}.md-dr-f .btn{width:100%;border:0;font-family:inherit;cursor:pointer}
html.md-lock{overflow:hidden}

@container pg (max-width:1100px){.md-tabs{flex-wrap:wrap;width:auto}.md-pill{display:none}.md-tabs .md-tab[aria-pressed="true"]{background:#14161B}.md-tab{padding:0 13px;font-size:14px}.md-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.bk{grid-template-columns:minmax(0,1fr)}.bk-r{position:relative;top:auto;min-height:0}}
@container pg (max-width:900px){.md-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-g{grid-template-columns:minmax(0,1fr)}}
@container pg (max-width:640px){
.md-tabs{flex-wrap:nowrap;width:calc(100% + 40px);max-width:none;margin:0 -20px 18px;padding:5px 20px;border-radius:0;background:none;box-shadow:none}
.md-pill{top:5px}
.md-tab{height:40px;padding:0 14px;font-size:14px;background:#fff;box-shadow:inset 0 0 0 1px #E8EBEF}.md-tab[aria-pressed="true"]{box-shadow:none}
.md-grid{grid-template-columns:minmax(0,1fr);gap:10px}
.md{min-height:0;padding:16px}.md h3{margin-top:16px;font-size:19px}.md p{margin-bottom:14px}
.mq{bottom:22px;gap:8px}.mq-c{height:44px;padding:0 14px 0 12px;font-size:13.5px;border-radius:12px}.mq-c small{display:none}.mq-s{gap:8px;padding-right:8px}
.pa{padding:22px}.pa h3{font-size:22px}
.bk-l{padding:20px}.bk-r{padding:22px}.bk-c{height:40px;font-size:13.5px}
.md-dr{top:auto;left:8px;right:8px;bottom:8px;width:auto;max-height:88vh;max-height:88dvh;padding:24px 20px;transform:translateY(calc(100% + 16px))}
.md-dr h2{font-size:27px}
}
@media (prefers-reduced-motion:reduce){.mq-r{animation:none}.md.in-f,.bk-m.nw,.md-dr-c.go{animation:none}.md-dr{transition:none}}
/* Handy (19.10.2026): Modulkarten kompakt, die Beispielzeile entfaellt. 19 Karten standen sonst ueber fuenf
   Bildschirme untereinander; der Filter darueber und die Schublade tragen die Details. */
@container pg (max-width:640px){
.md{padding:14px 16px}.md h3{margin-top:10px;font-size:17px}.md p{margin:4px 0 0;font-size:14px}.md-k{display:none}
.md-gw{width:34px;height:34px;border-radius:10px}.md-gw .md-g{width:17px;height:17px}.md-x{width:30px;height:30px}
}
/* Touchziele: die ganze Karte nimmt den Tipp ueber .md-a::after an; der Name selbst war 19 bis 20 px hoch.
   Polsterung macht ihn 46 px hoch, der Gegenrand haelt die Zeile: ein <button> rendert auch mit display:inline
   wie inline-block, ohne Gegenrand wuchsen die Karten ohne Produktseite um 26 px (gemessen 164 statt 138 px). */
@media (pointer:coarse){
.md-a{padding-block:13px;margin-block:-13px}
}

/* Produktbereich (20.10.2026): Bausteine nach Arbeitsbereich, Filter nach Alltagsaufgabe, Arbeitstag mit Sprung in die
   Schublade, Abschluss „Ihr Ablauf fehlt?“ und der Ablauf in sechs Schritten. Drei Spalten statt vier: die Bereiche haben
   drei bis neun Bausteine, so bleiben fast alle Reihen voll. */
.md-auf-l{margin:0 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#5A616D}
.md-tabs.auf{flex-wrap:wrap;width:auto}
.md-tabs.auf .md-pill{display:none}
.md-tabs.auf .md-tab[aria-pressed="true"]{background:#14161B}
.md-bereiche{display:grid;gap:64px;margin-top:40px}
/* Sprung von der Startseite: die klebende .nav steht im Fluss und schrumpft nach dem Sprung von 104 auf 72 px
   (Handy 72 auf 64), der Bereich rutscht um die Differenz hoch. 128 px lassen die Bereichszeile 24 px unter der
   Leiste stehen (gemessen 20.10.2026; mit 96 px lag sie 8 px darunter). */
.md-gr{scroll-margin-top:128px}
.md-gr[hidden]{display:none}
.md-gh{display:flex;align-items:flex-start;gap:16px;max-width:780px;margin-bottom:22px}
.md-gh .md-gw{width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #E8EBEF}
.md-gh small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-deep)}
.md-gh h3{margin-top:6px;font-size:28px;line-height:1.15;font-weight:500;letter-spacing:-.035em;color:#14161B;text-wrap:balance}
.md-gh p{margin-top:8px;font-size:15.5px;line-height:1.55;color:#5A616D;text-wrap:pretty}
.md-gr .md-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-own{display:flex;align-items:center;gap:18px;padding:22px 26px;border-radius:22px;background:#14161B;color:#fff;transition:background .2s}
.md-own:hover{background:#22252D;color:#fff}
.md-own .md-gw{background:rgba(255,255,255,.1)}
.md-own .md-g i{background:rgba(255,255,255,.3)}
.md-own .md-g[data-q*="1"] i:nth-child(1),.md-own .md-g[data-q*="4"] i:nth-child(4){background:#A9C3FF}
.md-own-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.md-own-t small{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#A9C3FF}
.md-own-t b{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.025em}
.md-own-t>span{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.78)}
.md-own-f{display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 18px;border-radius:var(--r-btn);background:#fff;color:#14161B;font-size:14.5px;font-weight:600}
.md-own-f svg{width:15px;height:15px}
.pd-sl.tag li{display:flex;flex-direction:column}
.pd-sl.tag li:nth-child(4n)::after{display:none}
.pd-sl.tag .tag-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:16px}
.tag-c{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 10px 6px 11px;border:0;border-radius:9px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);color:#fff;font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;transition:background .2s}
.tag-c svg{flex:none;width:12px;height:12px}
.tag-c:hover{background:rgba(255,255,255,.28)}
.tag-c:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pd-sl.tag li:last-child .tag-c{background:#EEF3FF;box-shadow:inset 0 0 0 1px #CFDCFF;color:var(--blue-deep)}
.pd-sl.tag li:last-child .tag-c:hover{background:#DFE8FF}
.pd-sl.tag li:last-child .tag-c:focus-visible{outline-color:var(--blue)}
.pa-f .pd-lk{flex-basis:100%}
.abl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.abl li{display:flex;flex-direction:column;padding:20px 18px 18px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px #E8EBEF}
.abl li:nth-child(3){box-shadow:0 0 0 1.5px var(--blue),0 22px 40px -30px rgba(30,79,216,.55)}
.abl-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--blue-tint);color:var(--blue-deep);font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.abl h3{margin-top:16px;font-size:17px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:#14161B;text-wrap:balance}
.abl p{margin-top:8px;font-size:14px;line-height:1.5;color:#5A616D;text-wrap:pretty}
.abl small{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:600;color:var(--blue-deep)}
.abl-f{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
@container pg (max-width:1100px){.abl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container pg (max-width:900px){.md-gr .md-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.abl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pg (max-width:640px){
.md-gr{scroll-margin-top:96px}
/* Baukasten-Auswahl einspaltig: zwei Spalten liessen bei 320 px rund 65 px je Name. Leer hoechstens vier Plaetze. */
.bk-s{grid-template-columns:minmax(0,1fr)}
.bk-e:nth-child(n+5){display:none}
.md-bereiche{gap:44px;margin-top:28px}
.md-gh{gap:12px;margin-bottom:16px}
.md-gh .md-gw{width:40px;height:40px;border-radius:12px}
.md-gh h3{font-size:22px}
.md-gh p{font-size:14.5px}
.md-gr .md-grid{grid-template-columns:minmax(0,1fr)}
.md-tabs.auf{flex-wrap:nowrap;width:calc(100% + 40px)}
.md-own{flex-wrap:wrap;padding:20px}
.md-own-f{width:100%;justify-content:center}
.abl{grid-template-columns:minmax(0,1fr)}
}
.md-mehr{display:none}
/* Handy: Karte als Zeile (Zeichen links, Name und Satz daneben, Einsatz darunter) und je Bereich zuerst drei Karten. */
@container pg (max-width:640px){
.md-gr .md{display:grid;grid-template-columns:34px minmax(0,1fr) 30px;column-gap:12px;align-items:start;padding:14px 14px 14px 16px}
.md-gr .md-t{display:contents}
.md-gr .md-gw{grid-column:1;grid-row:1/span 3}
.md-gr .md h3{grid-column:2;grid-row:1;margin-top:5px}
.md-gr .md-x{grid-column:3;grid-row:1}
.md-gr .md p{grid-column:2;grid-row:2;margin:3px 0 0}
.md-gr .md-t small{grid-column:2;grid-row:3;margin-top:8px;font-size:11px}
.md-gr.zu .md-grid>.md:nth-child(n+4){display:none}
.md-gr.zu .md-mehr{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin-top:10px;border:0;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px #E8EBEF;font:inherit;font-size:14px;font-weight:600;color:#14161B;cursor:pointer}
.md-gr.zu .md-mehr:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
}
/* Touch: Arbeitstag-Knöpfe und der Aufgabenfilter (jetzt die Hauptbedienung der Seite) mindestens 44 px. */
@media (pointer:coarse){.tag-c{min-height:44px}.md-tab{height:44px}.md-tabs .md-pill{height:44px}}