.wand{--wand-kachel:270px;--wand-luecke:48px;--wand-rand:clamp(20px,10.4vw,150px);--wand-max:2560px;--wand-aussen:max(0px,(100% - var(--wand-max)) / 2);--wand-oben:140px;--wand-fs-titel:min(clamp(2.7rem,6.6vw,var(--fs-112)),11vw);--wand-fs-text:clamp(1.1rem,1.55vw,1.6rem);--wand-ease-out:cubic-bezier(0.23,1,0.32,1);--wand-ease-in-out:cubic-bezier(0.77,0,0.175,1);--wand-tief:color-mix(in srgb,var(--navy-deep) 92%,transparent);--wand-weiss-8:color-mix(in srgb,var(--white) 8%,transparent);--wand-weiss-18:color-mix(in srgb,var(--white) 18%,transparent);--wand-weiss-22:color-mix(in srgb,var(--white) 22%,transparent);--wand-weiss-25:color-mix(in srgb,var(--white) 25%,transparent);--wand-weiss-50:color-mix(in srgb,var(--white) 50%,transparent);--wand-weiss-70:color-mix(in srgb,var(--white) 70%,transparent);--wand-weiss-75:color-mix(in srgb,var(--white) 75%,transparent);--wand-weiss-78:color-mix(in srgb,var(--white) 78%,transparent);--wand-weiss-84:color-mix(in srgb,var(--white) 84%,transparent);--wand-orange-50:color-mix(in srgb,var(--orange) 50%,transparent);--wand-orange-55:color-mix(in srgb,var(--orange) 55%,transparent);--wand-marke-weg:16px;--wand-marke-lang:12px;--wand-strich:1px;--wand-bogen:14px;--wand-passer:38px;--wand-feld:11px;--wand-pfeil:34px;--wand-logo-h:30px;--wand-logo-b:150px;--wand-logo-luecke:56px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;overflow:hidden;overflow:clip;background:var(--navy-deep);color:var(--white);isolation:isolate}
@media (max-width:1024px){.wand{--wand-kachel:210px;--wand-luecke:38px}
}
@media (max-width:767px){.wand{--wand-kachel:150px;--wand-luecke:28px;--wand-bogen:8px;--wand-passer:28px;--wand-logo-h:24px;--wand-knopf-fs:min(var(--fs-14-4),3.5vw);--wand-knopf-x:clamp(8px,2.8vw,18px)}
}
.wand__wand{position:absolute;inset:0 var(--wand-aussen);z-index:0;perspective:1600px}
.wand__ebene{position:absolute;top:50%;left:max(64%,calc(100% - 760px));display:grid;grid-template-columns:repeat(4,var(--wand-kachel));gap:var(--wand-luecke);transform:translate(-50%,-50%) rotateX(22deg) rotateY(-12deg) rotateZ(14deg)}
.wand__band{display:grid;gap:var(--wand-luecke)}
.wand.ist-bereit .wand__band{animation:wand-laufen var(--dauer,46s) linear infinite}
.wand__spalte:nth-child(even) .wand__band{animation-direction:reverse}
@keyframes wand-laufen{to{transform:translateY(calc(var(--weg,0px) * -1))}
}
.wand.steht .wand__band,.wand.steht .wand__logoband{animation-play-state:paused}
.kachel{position:relative;display:block;aspect-ratio:4 / 3;color:var(--white);text-decoration:none;transition:opacity 700ms ease}
.kachel::before{content:"";position:absolute;inset:calc(var(--wand-marke-weg) * -1);z-index:1;pointer-events:none;color:var(--wand-weiss-50);transition:color 500ms ease;background:linear-gradient(currentColor,currentColor) 0 var(--wand-marke-weg) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) var(--wand-marke-weg) 0 / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 100% var(--wand-marke-weg) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) calc(100% - var(--wand-marke-weg)) 0 / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 0 calc(100% - var(--wand-marke-weg)) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) var(--wand-marke-weg) 100% / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 100% calc(100% - var(--wand-marke-weg)) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) calc(100% - var(--wand-marke-weg)) 100% / var(--wand-strich) var(--wand-marke-lang) no-repeat}
.kachel.trifft::before{color:var(--orange)}
.kachel__bild{position:absolute;inset:0;overflow:hidden;background:var(--petrol)}
.kachel__bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--wand-ease-out)}
.kachel__info{position:absolute;inset:auto 0 0;display:grid;gap:1px;padding:30px 16px 13px;background:linear-gradient(0deg,var(--wand-tief),transparent);opacity:0;transform:translateY(6px);transition:opacity 250ms ease,transform 250ms var(--wand-ease-out)}
.kachel__info b{display:-webkit-box;overflow:hidden;font-size:var(--fs-15);font-weight:var(--weight-semibold);line-height:1.2;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kachel__info span{font-size:var(--fs-12-8);line-height:1.3;color:var(--wand-weiss-78)}
.kachel__pfeil{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:var(--wand-pfeil);height:var(--wand-pfeil);border-radius:var(--radius-round);background:var(--orange);opacity:0;transform:scale(0.85);transition:opacity 250ms ease,transform 250ms var(--wand-ease-out)}
.kachel__pfeil svg{width:14px;height:14px}
.wand__wand[data-fokus] .kachel{opacity:0.16}
.wand__wand[data-fokus="web"] [data-tag~="web"],.wand__wand[data-fokus="print"] [data-tag~="print"],.wand__wand[data-fokus="marke"] [data-tag~="marke"],.wand__wand[data-fokus="kampagne"] [data-tag~="kampagne"],.wand__wand[data-fokus="foto"] [data-tag~="foto"],.wand__wand[data-fokus] .kachel:hover{opacity:1}
.kachel:hover .kachel__bild img{transform:scale(1.06)}
.kachel:hover .kachel__info,.kachel.zeigt .kachel__info{opacity:1;transform:none}
.kachel:hover .kachel__pfeil{opacity:1;transform:none}
.kachel.verbunden .kachel__bild{box-shadow:0 0 0 2px var(--orange),0 18px 50px -12px var(--wand-orange-50)}
@media (hover:hover) and (pointer:fine){.wand__spalte:hover .wand__band{animation-play-state:paused}
}
.wand__schleier{position:absolute;inset:0 var(--wand-aussen);z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-deep) 0%,color-mix(in srgb,var(--navy-deep) 94%,transparent) min(30%,560px),color-mix(in srgb,var(--navy-deep) 35%,transparent) min(58%,900px),transparent min(78%,1150px)),linear-gradient(0deg,var(--navy-deep) 0%,transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--navy-deep) 90%,transparent) 0%,transparent 20%)}
.wand__linien{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.wand__linien path{fill:none}
.faden{transition:opacity 300ms ease;filter:drop-shadow(0 0 6px var(--wand-orange-55))}
.faden .linie{stroke:var(--orange);stroke-width:1.5;stroke-dasharray:1}
.faden .schatten{stroke:var(--wand-weiss-8);stroke-width:6}
.faden .puls{stroke:var(--white);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:0.035 0.965;animation:wand-puls 1.9s linear infinite}
.faden .ring{fill:none;stroke:var(--orange);stroke-width:1.5}
.faden .punkt{fill:var(--orange)}
.faden .marke{transform-box:fill-box;transform-origin:center}
.quelle{transition:opacity 250ms ease}
.quelle circle{fill:var(--orange)}
.quelle .hof{fill:none;stroke:var(--wand-orange-50);animation:wand-hof 1.9s var(--wand-ease-out) infinite;transform-box:fill-box;transform-origin:center}
@keyframes wand-puls{to{stroke-dashoffset:-1}
}
@keyframes wand-hof{from{transform:scale(0.6);opacity:1}
to{transform:scale(2.4);opacity:0}
}
.wand.steht .wand__linien *{animation-play-state:paused}
.wand__bogen{position:absolute;inset:0 var(--wand-aussen);z-index:4;pointer-events:none}
.wand__beschnitt{position:absolute;inset:var(--wand-bogen);border:var(--wand-strich) dashed var(--wand-weiss-18)}
.wand__passer{position:absolute;top:50%;display:block;width:var(--wand-passer);height:var(--wand-passer);margin:calc(var(--wand-passer) / -2) 0 0 calc(var(--wand-passer) / -2);color:var(--wand-weiss-75);fill:none;stroke:currentColor;stroke-width:1}
.wand__passer-voll{fill:currentColor;stroke:none}
.wand__passer--l{left:var(--wand-bogen)}
.wand__passer--r{left:calc(100% - var(--wand-bogen))}
.wand__kontrolle{position:absolute;left:30px;top:calc(50% + 40px);display:flex;gap:8px}
.wand__felder{display:grid}
.wand__felder i{display:block;width:var(--wand-feld);height:var(--wand-feld);box-shadow:inset 0 0 0 1px var(--wand-weiss-25)}
.wand__feld--navy-deep{background:var(--navy-deep)}
.wand__feld--navy{background:var(--navy)}
.wand__feld--petrol{background:var(--petrol)}
.wand__feld--orange{background:var(--orange)}
.wand__feld--orange-50{background:var(--wand-orange-50)}
.wand__feld--mist{background:var(--mist)}
.wand__feld--mist-50{background:color-mix(in srgb,var(--mist) 50%,transparent)}
.wand__feld--white{background:var(--white)}
.wand__marke-text{font-size:var(--fs-11-2);line-height:var(--wand-feld);letter-spacing:0.04em;white-space:pre;color:var(--wand-weiss-50);writing-mode:vertical-rl}
.wand__inhalt{position:relative;z-index:3;display:grid;gap:26px;padding:var(--wand-oben) calc(var(--wand-rand) + var(--wand-aussen)) 44px;pointer-events:none}
.wand__inhalt a{pointer-events:auto}
.wand__titel{margin:0;font-size:var(--wand-fs-titel);font-weight:var(--weight-bold);line-height:1.02;letter-spacing:-0.035em}
.wand__zeile{display:block}
.wand__vorn{white-space:nowrap}
.wand__verb{display:inline-grid;vertical-align:top;padding-bottom:0.25em;margin-bottom:-0.25em;overflow:hidden;overflow:clip}
.wand__verb>span{grid-area:1 / 1}
.wand__pillenzeile{display:inline-block;position:relative}
.wand__pillenzeile::before{content:"";position:absolute;inset:calc(var(--wand-marke-weg) * -1);z-index:1;pointer-events:none;color:var(--wand-weiss-75);background:linear-gradient(currentColor,currentColor) 0 var(--wand-marke-weg) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) var(--wand-marke-weg) 0 / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 100% var(--wand-marke-weg) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) calc(100% - var(--wand-marke-weg)) 0 / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 0 calc(100% - var(--wand-marke-weg)) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) var(--wand-marke-weg) 100% / var(--wand-strich) var(--wand-marke-lang) no-repeat,linear-gradient(currentColor,currentColor) 100% calc(100% - var(--wand-marke-weg)) / var(--wand-marke-lang) var(--wand-strich) no-repeat,linear-gradient(currentColor,currentColor) calc(100% - var(--wand-marke-weg)) 100% / var(--wand-strich) var(--wand-marke-lang) no-repeat}
.pille{position:relative;display:inline-flex;align-items:center;gap:0.16em;height:1.12em;margin-left:-0.08em;padding:0 0.3em 0.04em;border-radius:var(--radius-highlight);background:var(--orange);color:var(--white);text-decoration:none;overflow:hidden;vertical-align:top;transition:width 520ms var(--wand-ease-in-out),background-color 200ms ease}
.pille__wort{display:block;white-space:nowrap}
.pille__pfeil{flex:none;width:0.36em;height:0.36em;margin-top:0.06em;opacity:0.85;transition:transform 200ms var(--wand-ease-out)}
.pille__pfeil svg{display:block;width:100%;height:100%}
.wand__text{max-width:31em;margin:0;font-size:var(--wand-fs-text);line-height:1.38;color:var(--wand-weiss-84)}
.wand__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.wand__knoepfe .button-orange{text-decoration:none}
.wand__knopf-kurz{display:none}
.wand__rand{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
@media (hover:hover) and (pointer:fine){.pille:hover{background-color:var(--orange-hover)}
.pille:hover .pille__pfeil{transform:translate(0.05em,-0.05em)}
.wand__knoepfe .button-orange:hover{background-color:var(--orange-hover);color:var(--white)}
.wand__knoepfe .wand__rand:hover{background-color:var(--petrol);box-shadow:inset 0 0 0 1.5px var(--petrol)}
}
.wand__logos{position:relative;z-index:3;display:flex;align-items:center;gap:24px;padding:22px calc(var(--wand-rand) + var(--wand-aussen)) 28px;border-top:var(--wand-strich) solid var(--wand-weiss-22);background:var(--navy-deep)}
.wand__logos-text{flex:none;margin:0;font-size:var(--fs-14);color:var(--wand-weiss-70)}
.wand__logofenster{flex:1;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,var(--navy-deep) 6%,var(--navy-deep) 94%,transparent);mask:linear-gradient(90deg,transparent,var(--navy-deep) 6%,var(--navy-deep) 94%,transparent)}
.wand__logoband,.wand__logokopie{display:flex;align-items:center;gap:var(--wand-logo-luecke)}
.wand__logoband{width:max-content}
.wand.ist-bereit .wand__logoband{animation:wand-quer 60s linear infinite}
.wand__logoband img{display:block;width:auto;height:var(--wand-logo-h);max-width:var(--wand-logo-b);object-fit:contain;opacity:0.75;filter:brightness(0) invert(1);transition:opacity 200ms ease}
.wand__logoband a{display:block}
@keyframes wand-quer{to{transform:translateX(calc(-50% - var(--wand-logo-luecke) / 2))}
}
@media (hover:hover) and (pointer:fine){.wand__logofenster:hover .wand__logoband{animation-play-state:paused}
.wand__logoband a:hover img{opacity:1}
}
html.js .wand__wand,html.js .wand__bogen>*,html.js .wand__zeile,html.js .wand__spaeter{opacity:0;animation:wand-zeigen 1ms 4s forwards}
@keyframes wand-zeigen{to{opacity:1}
}
@media (max-width:1024px){.wand__ebene{left:58%}
}
@media (min-width:1025px) and (orientation:portrait){.wand{--wand-kachel:min(270px,15.3vw);--wand-luecke:min(48px,2.8vw)}
.wand__ebene{left:50%}
.wand__schleier{background:linear-gradient(0deg,var(--navy-deep) 0%,color-mix(in srgb,var(--navy-deep) 92%,transparent) 20%,color-mix(in srgb,var(--navy-deep) 40%,transparent) 34%,transparent 50%),linear-gradient(180deg,color-mix(in srgb,var(--navy-deep) 90%,transparent) 0%,transparent 12%)}
}
@media (max-width:767px){.wand__ebene{top:36%;left:50%}
.wand__schleier{background:linear-gradient(0deg,var(--navy-deep) 0%,color-mix(in srgb,var(--navy-deep) 92%,transparent) 48%,color-mix(in srgb,var(--navy-deep) 25%,transparent) 80%),linear-gradient(180deg,color-mix(in srgb,var(--navy-deep) 85%,transparent) 0%,transparent 18%)}
.wand__inhalt{gap:18px;padding-bottom:28px}
.wand__vorsatz{display:none}
.wand__knoepfe{gap:var(--space-8)}
.wand__knopf-lang{display:none}
.wand__knopf-kurz{display:inline}
.wand__knoepfe .button-orange{flex:1 1 auto;justify-content:center;padding-inline:var(--wand-knopf-x);font-size:var(--wand-knopf-fs);white-space:nowrap}
.wand__logos-text,.wand__kontrolle{display:none}
.wand__passer{top:30%}
.kachel__info{padding:22px 10px 8px}
.kachel__info b{font-size:var(--fs-12-8)}
.kachel__info span{display:none}
}
@media (prefers-reduced-motion:reduce){.wand__band,.wand__logoband,.wand.ist-bereit .wand__band,.wand.ist-bereit .wand__logoband{animation:none}
.pille{transition:none}
.faden .puls,.quelle .hof{display:none}
}
@media (min-width:768px){body.xm-wand-hell .xm .kopf:not(.is-pille) .logo-mind{fill:var(--white);stroke:var(--white)}
body.xm-wand-hell .xm .kopf:not(.is-pille) .kopf__tel,body.xm-wand-hell .xm .kopf:not(.is-pille) .kopf__suche{color:var(--white)}
body.xm-wand-hell .xm .kopf:not(.is-pille) .kopf__burger i{background:var(--white)}
}