/* Education Cloud. Gebaut von tools/seite-bauen.py aus den abgenommenen Artboards,
   Werte nach entwurf/DESIGN.md. Nicht von Hand aendern, Skript neu laufen lassen. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-sans-3.woff2) format('woff2')}
body{margin:0;background:var(--blau)}
:root{
--blau:#0D375C;--akzent:#F27316;--text-farbe:#10283F;--weiss:#ffffff;--nebel:#EEF3F8;
--schrift:'Source Sans 3',sans-serif;
--text:19px;--nav:17px;--h1-min:40px;--h1-vw:5.4vw;--h1-max:80px;--h2-min:30px;--h2-vw:3.6vw;--h2-max:52px;--h3:24px;--leitsatz:36px;--mail-gross-vw:5vw;--mail-gross:72px;--leitsatz-gross-vw:6.4vw;--leitsatz-gross:88px;--mail-vw:3vw;--mail-max:40px;
--lw-h1:-.03em;--lw-h2:-.022em;
--rand:56px;--band:104px;--spalt:24px;--h2-abstand:26px;
--radius:2px;
}
.pg{font-family:var(--schrift);font-weight:400;color:var(--text-farbe);font-size:var(--text);line-height:1.6;background:var(--blau)}
.pg p{margin:0 0 1em;max-width:64ch}
a{color:inherit}
.pg h2{font-weight:600;font-size:clamp(var(--h2-min),var(--h2-vw),var(--h2-max));line-height:1.04;letter-spacing:var(--lw-h2);margin:0 0 var(--h2-abstand)}
.pg h3{font-weight:600;font-size:var(--h3);line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;color:var(--blau)}
.hd{background:var(--blau);display:flex;justify-content:space-between;align-items:center;padding:16px var(--rand);gap:24px}
.hd img{height:52px;width:auto;display:block}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:28px}
.nav a{color:var(--weiss);text-decoration:none;font-size:var(--nav);font-weight:400}
.nav a{background:linear-gradient(var(--akzent),var(--akzent)) 0 100% / 0 2px no-repeat;padding-bottom:3px;transition:background-size .22s ease-out}
.nav a:hover,.nav a:focus-visible{background-size:100% 2px}
.menu-k{display:none}
.menu{font:400 var(--nav) var(--schrift);color:var(--weiss);background:transparent;border:2px solid var(--weiss);padding:6px 18px;min-height:44px;border-radius:var(--radius)}
.hd{position:sticky;top:0;z-index:30}
.menu-k summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;box-sizing:border-box}
.menu-k summary::-webkit-details-marker{display:none}
.menu-k[open] summary{background:var(--weiss);color:var(--blau)}
.menu-liste{list-style:none;margin:0;padding:8px 0 16px;position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--blau);border-top:2px solid var(--akzent)}
.menu-liste a{display:flex;align-items:center;min-height:52px;padding:0 var(--rand);color:var(--weiss);text-decoration:none;font-size:20px;font-weight:400;border-bottom:1px solid rgba(255,255,255,.18)}
.menu-liste a:hover,.menu-liste a:focus-visible{text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:6px}
.nav a{white-space:nowrap}
@media (max-width:1080px){.nav{display:none}.menu-k{display:block}}
@media (max-width:1080px){#intro > *,#ueber > *{grid-column:1 / -1 !important}#intro > div,#ueber > div{padding-top:0 !important}}
@media (min-width:761px) and (max-width:1080px){.buehne-drei{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.buehne-bild{grid-column:1 / -1;grid-row:1;max-width:420px}}
.pg h1,.pg h2,.pg h3{hyphens:auto;overflow-wrap:break-word}
@media (min-width:761px) and (max-width:1080px){.baustein{grid-column:1 / -1 !important;display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:40px;align-items:center}.baustein .pn{grid-row:1 / span 2;height:180px;margin:0}.baustein h3{align-self:end}.baustein p{align-self:start}.bausteine{row-gap:40px}}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt)}
.s{padding:var(--band) var(--rand);position:relative}
.b{background:var(--blau);color:var(--weiss)}
.w{background:var(--weiss);color:var(--text-farbe)}
.w h2{color:var(--blau)}
.b h3{color:var(--weiss)}
.hero{--cbw:min(50vw,780px);background:var(--weiss);position:relative;overflow:hidden;min-height:max(420px,calc(var(--cbw) / 1.564 + 40px));padding:56px var(--rand) 48px;box-sizing:border-box;display:flex;align-items:center}
.htxt{position:relative;z-index:2;max-width:min(660px,48vw)}
.htxt p{font-size:20px}
.hero h1{font-weight:600;font-size:clamp(var(--h1-min),var(--h1-vw),var(--h1-max));line-height:1.0;letter-spacing:var(--lw-h1);color:var(--blau);margin:0 0 24px}
.cb{position:absolute;top:24px;right:calc(var(--cbw) * -.16);width:var(--cbw);aspect-ratio:221.12 / 141.36}
.cb .mw{position:absolute;inset:0;overflow:hidden;-webkit-mask:url(logo-wolke-silhouette.svg) center / contain no-repeat;mask:url(logo-wolke-silhouette.svg) center / contain no-repeat}
.cb .m{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 60%}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
.cb .m{transform:scale(1.12);animation:tiefe linear both;animation-timeline:scroll(root block);animation-range:0px 90vh}
@keyframes tiefe{from{transform:scale(1.12) translateY(-4%)}to{transform:scale(1.12) translateY(5%)}}
}}
.cb .k{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
/* Kopf „Figur plus“: grosse Überschrift, Lehrerin im orangen Wolken-Halo, drei Wolkenlagen unten */
.h6{--wh:clamp(130px,17vw,280px);position:relative;overflow:hidden;background:var(--weiss);box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:calc(var(--wh) * 1.3)}
/* Wolken des Kopfs: drei Lagen aus dem Wolkenband der Praesentation, als nahtlose Kachel (Band und Spiegelbild), nur Boegen */
.h6-band{position:absolute;left:0;right:0;bottom:-1px;height:var(--wh);overflow-x:clip;z-index:3;pointer-events:none}
.h6-band > div{position:absolute;left:-420px;right:-420px;bottom:0;height:var(--wh);background:url(wolkenband-kachel-blau.svg) -300px 100% / auto var(--wh) repeat-x}
/* die hinteren Lagen reichen mit Vollton nach unten, damit beim Anheben nichts frei wird */
.h6-hinten{height:calc(var(--wh) * 2) !important;bottom:calc(var(--wh) * -1) !important;opacity:.35;background:url(wolkenband-kachel-blau.svg) -900px 0 / auto var(--wh) repeat-x,linear-gradient(var(--blau),var(--blau)) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat !important;transform:translateY(-12%)}
.h6-mitte{height:calc(var(--wh) * 2) !important;bottom:calc(var(--wh) * -1) !important;background:url(wolkenband-kachel-dunkel.svg) -1500px 0 / auto var(--wh) repeat-x,linear-gradient(#153056,#153056) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat !important;transform:translateY(-6%)}
.h6-raster{padding:clamp(40px,4vw,64px) var(--rand) 0;align-items:center;margin-top:auto;margin-bottom:auto}
@media (orientation:landscape) and (min-width:761px){.h6{min-height:calc(100svh - 84px)}}
.h6-links{grid-column:1 / span 8;display:flex;flex-direction:column;gap:32px;position:relative;z-index:4}
.h6-text{margin:0;font-size:clamp(44px,6.4vw,100px);font-weight:600;line-height:.96;letter-spacing:-.04em;color:var(--blau)}
.h6 .h6-sub{margin:0;font-size:20px;line-height:1.6;max-width:78ch}
.h6-rechts{grid-column:9 / span 4;position:relative;height:clamp(380px,36vw,540px)}
.h6-halo-wrap{position:absolute;left:-30px;right:-40px;top:40px}
.h6-halo{width:100%;height:auto;display:block}
.h6-halo .kontur{fill:var(--akzent)}
.h6-halo .strich{fill:none;stroke:#ffffff;stroke-width:44;stroke-dasharray:300 300;stroke-dashoffset:0}
.h6-sinken{position:absolute;left:50%;top:20px;width:clamp(120px,10.4vw,150px);transform:translateX(-50%);z-index:2}
.h6-sinken img{width:100%;height:auto;display:block}
@media (prefers-reduced-motion:no-preference){
.h6-text{animation:h6-auf .8s cubic-bezier(.16,1,.3,1) both}
.h6-sub{animation:h6-auf .8s cubic-bezier(.16,1,.3,1) .12s both}
.h6-halo .kontur{mask:url(#h6-maske);animation:h6-zu 0s linear 2s forwards}
.h6-halo .strich{stroke-dashoffset:300;animation:h6-zeichnen 1.6s cubic-bezier(.65,0,.35,1) .35s forwards}
.h6-figur{animation:h6-figur .9s cubic-bezier(.16,1,.3,1) 1.25s both}
@supports (animation-timeline:scroll()){
.h6-hinten{animation:h6-hinten linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
.h6-mitte{animation:h6-mitte linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
.h6-vorn{animation:h6-vorn linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
.h6-sinken{animation:h6-sinken linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
.h6-halo-wrap{animation:h6-halo-hoch linear both;animation-timeline:scroll(root block);animation-range:0px 800px}
}
}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
.buehne-bild img{animation:buehne linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
@keyframes buehne{from{transform:scale(.8);opacity:.4}to{transform:none;opacity:1}}
.rakete{animation:start linear both;animation-timeline:view();animation-range:cover}
@keyframes start{from{transform:translate(-30px,60px)}to{transform:translate(40px,-80px)}}
.schloss{animation:schweben linear both;animation-timeline:view();animation-range:cover}
@keyframes schweben{from{transform:translateY(40px)}to{transform:translateY(-40px)}}
}}
/* Auftritt: ein System fuer die ganze Seite. Eine Kurve (ease-out-quint), kurze Wege, nur Transform, Deckkraft und Maske.
   An den Scroll gekoppelt und fertig, bevor das Element ein Drittel des Bildschirms durchlaufen hat */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
#intro h2,#leistungen h2,#integration h2,#partner h2,#einsatzfelder h2,#ueber h2,.kontakt-karte h2,.leitband > p:first-child{animation:auf-titel cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 45%}
.aussage-spalten p,.buehne-drei p,.figuren-text p,.leit-absatz,.leit-zweit,.leitband > div,.baustein,.kontakt-karte p,.kf,#partner .g p{animation:auf-text cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 5% entry 55%}
.figuren img,.partner-feld{animation:auf-bild cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 50%}
.partner-feld:nth-child(2),.partner-feld:nth-child(5){animation-range:entry 8% entry 58%}
.partner-feld:nth-child(3),.partner-feld:nth-child(6){animation-range:entry 16% entry 66%}
.kontakt-karte{animation:auf-karte cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 40%}
}}
@keyframes auf-titel{from{clip-path:inset(0 0 100% 0);transform:translateY(.4em)}to{clip-path:inset(-.2em -.2em -.3em -.2em);transform:none}}
@keyframes auf-text{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes auf-bild{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes auf-karte{from{opacity:0;transform:translateY(48px) scale(.97)}to{opacity:1;transform:none}}
@keyframes h6-auf{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes h6-zeichnen{to{stroke-dashoffset:0}}
@keyframes h6-zu{to{mask:none}}
@keyframes h6-figur{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes h6-hinten{from{transform:translate(0,-12%)}to{transform:translate(-260px,-36%)}}
@keyframes h6-mitte{from{transform:translate(0,-6%)}to{transform:translate(200px,-21%)}}
@keyframes h6-vorn{from{transform:none}to{transform:translateX(-170px)}}
@keyframes h6-sinken{from{transform:translateX(-50%)}to{transform:translate(-50%,150px)}}
@keyframes h6-halo-hoch{from{transform:none}to{transform:translateY(-110px) scale(1.06)}}
.pn{box-sizing:border-box}
.pn img{display:block;width:100%;height:auto}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
.tick-row{animation:lauf 144s linear infinite}
}
.nebel{background:var(--nebel);border-radius:32px;padding:clamp(40px,6vw,88px) clamp(24px,5vw,72px)}
.bausteine{margin-top:72px;row-gap:48px}
.baustein .pn{max-width:260px;height:230px;display:flex;align-items:flex-end;margin-bottom:28px}
.baustein .pn img{width:auto;max-width:100%;max-height:100%}
.baustein p{font-size:18px}
.baustein .mehr{margin:16px 0 0}
.mehr a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--blau);text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:6px}
.w .tick-row img{filter:brightness(0);opacity:.6}
/* Aussage: grosse Ueberschrift ueber volle Breite, Absaetze nebeneinander */
.aussage-kopf{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px;margin:0 0 48px}
.pg .aussage{font-size:clamp(34px,5.2vw,80px);line-height:1;letter-spacing:-.035em;max-width:17ch;margin:0}
.rakete{width:clamp(160px,20vw,300px);height:auto;display:block}
.aussage-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.pg .aussage-spalten p{margin:0}
/* Buehne: zentrierte Ueberschrift, grosses Bild, Text in einer Spalte */
.pg .buehne-titel{font-size:clamp(28px,4.4vw,64px);line-height:1.02;letter-spacing:-.03em;max-width:18ch;margin:0 0 24px}
.buehne-drei{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);column-gap:clamp(24px,3.5vw,56px);align-items:center;margin-top:16px}
.pg .buehne-drei p{margin:0}
.buehne-bild{max-width:560px;margin:0 auto;width:100%}
.buehne-bild img{width:100%;height:auto;display:block}
/* Figuren auf Wolken: Text, darunter die vier Schueler auf der Wolkenkante */
#einsatzfelder{padding-bottom:0}
.figuren-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(24px,4vw,64px);align-items:end}
.figuren-text{max-width:64ch;padding-bottom:clamp(48px,6vw,96px);align-self:center}
.figuren{position:relative;z-index:4;margin-bottom:-18px}
.figuren img{width:100%;height:auto;display:block}
.edge.figuren-kante{margin-top:0}
/* Leitabsatz */
.pg .leit-titel{font-size:clamp(22px,2vw,28px);color:rgba(255,255,255,.72);margin:0 0 24px}
.leit-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(32px,5vw,96px);align-items:end}
.pg .leit-absatz{font-size:clamp(24px,2.7vw,40px);line-height:1.34;letter-spacing:-.015em;max-width:38ch;margin:0}
.schloss{width:min(260px,100%);height:auto;display:block;margin:0 0 32px}
.pg .leit-zweit{max-width:64ch;margin:0;color:rgba(255,255,255,.82)}
#ueber{padding-bottom:56px}
/* Kontaktkarte */
#kontakt{padding-top:24px}
.kontakt-karte{--feld-rand:#7A92AA;background:var(--weiss);color:var(--text-farbe);border-radius:32px;padding:clamp(32px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px)}
.kontakt-text{grid-column:1;grid-row:1}
.kontakt-karte h2{color:var(--blau);font-size:clamp(30px,3.2vw,46px);line-height:1.08;hyphens:manual;text-wrap:balance}
.kontakt-karte p{max-width:52ch}
.kontakt-karte .mail{color:var(--blau);display:inline-flex;align-items:center;min-height:48px;margin-top:8px;white-space:nowrap;font-size:clamp(24px,2.7vw,36px);text-decoration-thickness:4px;text-underline-offset:10px}
.kontakt-figur{grid-column:1;grid-row:2;align-self:end;justify-self:start;width:160px;height:auto;display:block;margin:40px 0 0 8px}
.kf{grid-column:2;grid-row:1 / span 2;align-self:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 1fr auto auto;gap:20px 16px;background:var(--nebel);border-radius:24px;padding:clamp(24px,3vw,40px);position:relative}
.kf label{display:grid;gap:8px;font-size:15px;font-weight:600;line-height:1.3;color:var(--blau)}
.kf .breit{grid-column:1 / -1;grid-template-rows:auto 1fr}
.kf input,.kf textarea{box-sizing:border-box;width:100%;font:inherit;font-size:17px;font-weight:400;line-height:1.4;color:var(--text-farbe);background:var(--weiss);border:1px solid var(--feld-rand);border-radius:12px;padding:12px 14px;min-height:50px;transition:border-color .15s ease-out}
.kf input:hover,.kf textarea:hover{border-color:var(--blau)}
.kf textarea{min-height:168px;height:100%;resize:vertical}
.kf input:focus-visible,.kf textarea:focus-visible{outline:3px solid var(--blau);outline-offset:2px;border-color:var(--blau)}
.kf .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kf-meldung{display:none;grid-column:1 / -1;margin:0;padding:14px 16px;border-radius:12px;background:var(--weiss);border-left:4px solid var(--akzent);font-weight:600;color:var(--blau);scroll-margin-top:120px}
.kf-meldung:target{display:block}
.kf button{justify-self:start;font:inherit;font-size:17px;font-weight:600;background:var(--blau);color:var(--weiss);border:0;border-radius:999px;padding:14px 30px;min-height:50px;white-space:nowrap}
.kf button:disabled{cursor:not-allowed}
.kf .hinweis{grid-column:1 / -1;margin:-4px 0 0;font-size:15px}
.partner-raster{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.partner-feld{background:var(--nebel);border-radius:24px;min-height:150px;display:flex;align-items:center;justify-content:center;padding:32px;box-sizing:border-box}
.partner-feld img{height:38px;width:auto;max-width:100%;display:block;filter:brightness(0);opacity:.62}
.partner-mehr{background:var(--blau);color:var(--weiss);align-items:flex-end;justify-content:flex-start}
.pg .partner-mehr p{margin:0;font-size:18px;line-height:1.5}
.bs{max-width:280px;margin-left:auto}
.bs svg{display:block;width:100%;height:auto}
.bs .spur{fill:var(--blau);opacity:.12}
.bs .kontur{fill:var(--akzent)}
.bs .seg{fill:none;stroke:#ffffff;stroke-width:40}
/* Ohne Scroll-Zeitleiste steht die Kontur geschlossen. Mit ihr fuellt sie sich beim Scrollen in einem Zug von links unten ueber die Kuppe nach rechts unten, dann drehen die Pfeile ein.
   Der Maskenpfad s1 laeuft dafuer als ein Strich von unten links ueber die Kerbe bis unten rechts, ohne Stoss in der Kerbe */
.bs .s1{stroke-dasharray:300 300;stroke-dashoffset:0}
.bs .s2,.bs .s3{display:none}
.bs .pf{fill:var(--akzent);transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
.bs{view-timeline:--bs block}
.bs .kontur{mask:url(#bs-maske)}
.bs .s1{animation:bs-s1 linear both;animation-timeline:--bs;animation-range:entry 70% cover 52%}
.bs .pf{animation:bs-pf linear both;animation-timeline:--bs;animation-range:cover 52% cover 64%}
@keyframes bs-s1{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@keyframes bs-pf{from{opacity:0;transform:rotate(-150deg) scale(.6)}to{opacity:1;transform:none}}
}}
.vf{display:inline-block;font-size:15px;font-weight:400;line-height:1.3;border:2px dashed currentColor;padding:4px 10px}
.wb{display:block;width:100%;height:auto;aspect-ratio:1000 / 216.8;position:relative;z-index:1;margin-bottom:-1px}
/* Wolkenband unter dem Kopf: eine zweite, blasse Lage dahinter, beide laufen beim Scrollen gegeneinander */
.wbk{position:relative;overflow-x:clip;view-timeline:--band block}
.wbk .wb{width:108%;max-width:none;margin-left:-4%}
.wbk::before{content:"";position:absolute;top:0;bottom:0;left:-6%;right:-6%;background:url(wolkenband-kopf.svg) 0 0 / 100% 100% no-repeat;opacity:.4;transform:translate(-40px,-22px)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
.wbk .wb{animation:band-vorn linear both;animation-timeline:--band;animation-range:cover}
.wbk::before{animation:band-hinten linear both;animation-timeline:--band;animation-range:cover}
@keyframes band-vorn{from{transform:translateX(-40px)}to{transform:translateX(40px)}}
@keyframes band-hinten{from{transform:translate(70px,-4px)}to{transform:translate(-110px,-40px)}}
}}
.edge{height:clamp(64px,8.4vw,112px);position:relative;z-index:1;margin-bottom:-1px;view-timeline:--kante block}
.edge::before,.edge::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background-repeat:repeat-x;background-size:auto calc(100% + 2px);background-position:var(--x) 0}
.edge::before{opacity:.4;background-position:calc(var(--x) - 420px) 0}
.on-w{background-color:var(--weiss)}
.on-b{background-color:var(--blau)}
.e-n::before,.e-n::after{background-image:url(wolkenkante-blau.svg)}
.e-w::before,.e-w::after{background-image:url(wolkenkante-weiss.svg)}
.p1{--x:0px}
.p2{--x:-1170px}
.p3{--x:-2340px}
.p4{--x:-3510px}
.p5{--x:-4680px}
.p6{--x:-5850px}
.p7{--x:-7020px}
.p8{--x:-8190px}
/* Zwei Wolkenschichten je Kante laufen beim Scrollen gegeneinander und ueberlappen sich */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
.edge::after{animation:wolke-vorn linear both;animation-timeline:--kante;animation-range:cover}
.edge::before{animation:wolke-hinten linear both;animation-timeline:--kante;animation-range:cover}
@keyframes wolke-vorn{from{background-position:calc(var(--x) + 180px) 0}to{background-position:calc(var(--x) - 180px) 0}}
@keyframes wolke-hinten{from{background-position:calc(var(--x) - 760px) 0;transform:translateY(34px)}to{background-position:calc(var(--x) - 120px) 0;transform:none}}
}}
.tick{overflow:hidden;margin:36px calc(var(--rand) * -1) 20px;-webkit-mask-image:linear-gradient(to right,transparent,#000 120px,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(to right,transparent,#000 120px,#000 calc(100% - 120px),transparent)}
.tick-row{display:flex;width:max-content;align-items:center}
.tick-row span{display:flex;align-items:center;height:96px;margin-right:72px}
.tick-row img{height:34px;width:auto;display:block;filter:brightness(0) invert(1)}
.mail{font-size:clamp(26px,var(--mail-vw),var(--mail-max));font-weight:500;color:var(--weiss);text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:4px;text-underline-offset:9px}
.w .mail{color:var(--blau)}
.mail-gross{white-space:nowrap;font-size:clamp(26px,var(--mail-gross-vw),var(--mail-gross));text-decoration-thickness:6px;text-underline-offset:14px;line-height:1.1}
.ft{background:var(--blau);color:var(--weiss);padding:48px var(--rand) 64px}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 26px}
/* Runde 2: Zustaende. Bei reduzierter Bewegung wechseln sie ohne Uebergang */
a:focus-visible,.menu:focus-visible{outline:3px solid var(--akzent);outline-offset:4px}
a:focus-visible:is(.w *,.kontakt-karte *,.rt *,.kopf *){outline-color:var(--blau)}
.mail{transition:text-decoration-thickness .18s ease-out,text-underline-offset .12s ease-out}
.mail:active{text-underline-offset:3px}
.menu:active{background-color:rgba(255,255,255,.16)}
.ft a{text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .18s}
.ft a:hover{text-decoration-color:var(--akzent);text-decoration-thickness:2px}
@media (prefers-reduced-motion:reduce){.mail,.ft a,.nav a{transition:none}}
.mail:hover{text-decoration-thickness:7px}
.mail-gross:hover{text-decoration-thickness:10px}
.mail-gross:active{text-underline-offset:6px}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
#kontakt img{animation:auftritt linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
@keyframes auftritt{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
}}
.kopf{background:var(--weiss);padding:72px var(--rand) 32px;position:relative}
.kopf h1{font-weight:500;font-size:clamp(var(--h1-min),var(--h1-vw),var(--h1-max));line-height:1.08;letter-spacing:var(--lw-h1);color:var(--blau);margin:0 0 24px}
.kopf .zeichnung{grid-column:8 / span 4;grid-row:1 / span 3;align-self:end;display:block;width:100%;max-width:360px;height:auto;justify-self:center}
.kopf .text{grid-column:1 / span 6}
.rt{max-width:760px}
.rt h1{font-weight:500;font-size:clamp(var(--h1-min),var(--h1-vw),var(--h1-max));line-height:1.08;letter-spacing:var(--lw-h1);color:var(--blau);margin:0 0 40px}
.rt h2{margin-top:56px}
.rt h3{margin-top:40px}
.pg h2.karte-titel{font-size:var(--h3);line-height:1.2;letter-spacing:-.01em;margin:0 0 10px}
.rt ul{margin:0 0 1em;padding-left:1.2em}
.rt li{margin:0 0 .5em}
.rt strong,.kopf strong{font-weight:500}
.bc{margin:0 0 20px}
.liste{list-style:none;margin:0;padding:0;max-width:760px}
.liste li{margin:0 0 56px}
.liste h3 a{color:var(--blau);text-decoration:none}
.liste h3 a:hover,.liste h3 a:focus-visible{text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:6px}
.platzhalter{font-weight:400}
.kopf .zeichnung.weit{grid-column:7 / span 6;max-width:520px}
.kopf .unterzeile{font-size:var(--h3);line-height:1.3;font-weight:600;color:var(--blau);margin:0 0 16px}
.produkt .ab{padding-top:0}
.produkt .ab:first-child{padding-top:24px}
.prod{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--spalt);row-gap:48px;align-items:start}
.prod .tx{grid-column:1 / span 7}
.prod .tx.breit{grid-column:1 / span 8}
.prod .bd{grid-column:9 / span 4;display:grid;row-gap:var(--spalt)}
.prod.links .tx{grid-column:6 / span 7}
.prod.links .bd{grid-column:1 / span 4;grid-row:1}
.prod .galerie,.prod .karten{grid-column:1 / -1}
.prod ul{margin:0 0 1em;padding-left:1.2em;max-width:64ch}
.prod li{margin:0 0 .4em}
.prod li ul{margin:.4em 0 0}
.prod ul.zwei{columns:2;column-gap:var(--spalt)}
.prod ul.zwei li{break-inside:avoid}
.prod strong{font-weight:600}
.prod a{text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:4px}
.foto,.bildschirm,.grafik{display:block;width:100%;height:auto}
.foto{border-radius:24px}
.bildschirm{border-radius:12px;box-shadow:0 0 0 1px rgba(13,55,92,.12)}
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--spalt)}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:56px var(--spalt)}
.karte img{margin-bottom:24px}
.karte .foto{aspect-ratio:1000 / 772;object-fit:contain;background:var(--weiss)}
.karte .bildschirm{aspect-ratio:16 / 10;object-fit:cover;object-position:top}
.prod h2,.prod h3,.kopf h1,.kopf .unterzeile{hyphens:manual;text-wrap:balance}
.handlung a{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:2px;background:var(--blau);color:var(--weiss);font-weight:600;text-decoration:none}
.handlung a:hover,.handlung a:focus-visible{background:#153056;text-decoration:underline;text-decoration-color:var(--akzent);text-decoration-thickness:2px;text-underline-offset:6px}
.h6-sinken.breit{width:clamp(220px,21vw,330px)}
.h6-sinken .h6-logo{margin-top:clamp(40px,5vw,80px)}
.pg .zitat.ruhig .zitat-text p{font-size:clamp(19px,1.5vw,22px);max-width:60ch}
.zitat.ruhig .zitat-bild{max-width:300px}
.h6-text{hyphens:manual}
.leitband .leitsatz{grid-column:1 / span 8;font-size:clamp(34px,4.2vw,62px);font-weight:600;line-height:1.04;letter-spacing:var(--lw-h1);margin:0 0 32px;max-width:20ch;text-wrap:balance}
.leitband .leit-text{grid-column:1 / span 7;font-size:20px}
.leitband .leit-text p:last-child{margin:0}
.leitband .leit-bild{grid-column:9 / span 4;grid-row:1 / span 2;align-self:center;justify-self:center;display:block;width:100%;max-width:300px;height:auto}
.leitband .leit-foto{border-radius:24px;max-width:380px}
.zitat{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(32px,5vw,96px);align-items:center}
.pg .zitat-gross{font-size:clamp(22px,2.3vw,34px);line-height:1.32;letter-spacing:-.015em;font-weight:500;color:var(--blau);max-width:34ch;margin:0 0 28px}
.pg .fotoband h2,.pg .nebel h2,.pg .felder h2,.pg .buehne-titel,.pg .webuntis h2,.pg .zitat h2,.pg .leit-titel-gross{hyphens:manual;text-wrap:balance}
.webuntis{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);align-items:start}
.pg .webuntis-intro{font-size:clamp(20px,1.7vw,24px);line-height:1.45;color:var(--blau)}
.webuntis-karte{background:var(--blau);color:var(--weiss);border-radius:32px;padding:clamp(28px,3.4vw,48px);position:sticky;top:120px}
.pg .webuntis-karte h3{color:var(--weiss);font-size:clamp(22px,2vw,28px);margin:0 0 8px}
.pg .fussnote{font-size:15px;color:rgba(255,255,255,.72);margin:24px 0 0}
.zitat-bild{width:100%;max-width:340px;height:auto;justify-self:center}
.zitat.voll{grid-template-columns:minmax(0,1fr)}
.pg .zitat.voll .zitat-gross{max-width:34ch;margin:0}
.pg .nebel-schluss{margin:clamp(40px,5vw,72px) 0 0;max-width:52ch;font-size:clamp(20px,1.8vw,26px);line-height:1.45;color:var(--blau)}
.bausteine .pn{justify-content:flex-start}
.nebel-liste{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);align-items:center}
.nebel-foto{border-radius:24px}
.edge + .s > .nebel{position:relative;z-index:2}
.leitband .leit-produkt{background:var(--weiss);padding:clamp(16px,2vw,28px);box-sizing:border-box;object-fit:contain}
ul.haken,ul.zwei-spalten{list-style:none;margin:24px 0 0;padding:0}
ul.haken li,ul.zwei-spalten li{position:relative;padding-left:30px;margin:0 0 .7em}
ul.haken li::before,ul.zwei-spalten li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:3px;border-radius:2px;background:var(--akzent)}
ul.haken ul,ul.zwei-spalten ul{list-style:none;margin:.6em 0 0;padding:0}
ul.haken ul li::before,ul.zwei-spalten ul li::before{width:8px;opacity:.6}
ul.zwei-spalten{columns:2;column-gap:clamp(32px,4vw,64px)}
ul.zwei-spalten > li{break-inside:avoid}
.fotoband{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);align-items:center}
.fotoband.links .fotoband-bild{order:2}
.fotoband .foto{border-radius:32px}
.fotoband.oben .fotoband-bild{align-self:start;margin-top:8px}
.h6 .handlung{margin:32px 0 0}
.h6 .handlung a:focus-visible{outline-color:var(--blau)}
.partner-mehr a:focus-visible{outline-color:var(--akzent)}
.partner-mehr a{white-space:nowrap}
#kontakt{scroll-margin-top:96px}
@media (prefers-reduced-motion:no-preference){.h6 .handlung{animation:h6-auf .8s cubic-bezier(.16,1,.3,1) .24s both}}
.handlung a{border-radius:999px;padding:0 28px}
.fotoband-text p:last-child{margin:0}
.app-einleitung{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,48px);margin:0 0 56px}
.pg .app-einleitung p{margin:0}
.app-raster{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(16px,2vw,28px);align-items:start}
.app-klein{display:grid;gap:clamp(16px,2vw,28px)}
.app-bild{display:block;width:100%;height:auto;border-radius:16px;border:1px solid rgba(13,55,92,.12);box-shadow:0 30px 60px -30px rgba(13,55,92,.45)}
.felder .partner-raster{margin-top:40px}
.partner-raster.spalten-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.text-feld{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;min-height:0;font-size:18px;line-height:1.55}
.pg .feld-titel{font-size:var(--h3);font-weight:600;color:var(--blau);letter-spacing:-.01em}
.partner-mehr p{margin:0}
.mosaik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mosaik .foto{border-radius:20px;aspect-ratio:1;object-fit:cover}
.mosaik .foto:nth-child(4){object-position:center 30%}
.dunkel-liste .leit-raster{align-items:start;grid-template-columns:minmax(0,9fr) minmax(0,3fr)}
.pg .leit-titel-gross{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.025em;margin:0 0 16px;color:var(--weiss)}
.dunkel-liste ul.zwei-spalten{color:rgba(255,255,255,.9)}
.dunkel-liste .leit-rechts{align-self:end}
.kontakt-karte.ohne-formular{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-items:end}
.kontakt-karte.ohne-formular .kontakt-figur{grid-column:2;grid-row:1;margin:0}
.kontakt-karte.ohne-formular h2{max-width:24ch}
.knoepfe{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:20px 0 0}
.knopf-rand{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:2px solid var(--blau);color:var(--blau);font-weight:600;text-decoration:none}
.knopf-rand:hover,.knopf-rand:focus-visible{background:var(--blau);color:var(--weiss)}
.produkt-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.produkt-karte{background:var(--nebel);border-radius:32px;padding:clamp(24px,3vw,44px)}
.produkt-foto{background:var(--weiss);border-radius:24px;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0 0 28px}
.produkt-foto img{width:100%;height:100%;object-fit:cover}
.pg .modelle-text{margin:0 0 48px;max-width:62ch}
.pg .iserv-text{font-size:20px;line-height:1.55;margin:0;max-width:56ch}
.produkt-foto img[src*="dc557"]{object-fit:contain;padding:16px;box-sizing:border-box}
.kontakt-karte.ohne-formular .mail + p{margin-top:28px}
.pg .app-titel{max-width:26ch}
.produkt-karte h3{font-size:clamp(22px,2vw,28px)}
ul.spez{list-style:none;margin:20px 0 0;padding:0;font-size:17px}
ul.spez li{padding:10px 0;border-top:1px solid rgba(13,55,92,.12)}
.iserv .leit-raster{align-items:center}
.iserv-bild{border-radius:24px;width:100%;height:auto;display:block}
.iserv{padding-bottom:var(--band)}
.handlung.hell a{background:var(--weiss);color:var(--blau)}
.handlung.hell a:hover,.handlung.hell a:focus-visible{background:var(--nebel);color:var(--blau)}
.iserv .handlung{margin:40px 0 0}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.zitat-text > *,.webuntis-text > *,.webuntis-karte,.leit-text,.fotoband-text > *,.app-einleitung p,.text-feld,.produkt-karte,.nebel-liste-text > *,.dunkel-liste li{animation:auf-text cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 5% entry 55%}.zitat-bild,.fotoband .foto,.app-bild,.mosaik .foto,.nebel-foto{animation:auf-bild cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 50%}.zitat h2,.fotoband h2,.buehne-titel,.felder h2,.nebel h2,.leit-titel-gross{animation:auf-titel cubic-bezier(.23,1,.32,1) both;animation-timeline:view();animation-range:entry 0% entry 45%}}}
.hd > a{display:flex;align-items:center;min-height:44px}
.kopf h1,.rt h1{hyphens:manual}
.rt p a{display:inline-block;margin:4px 0}
.prod h2 a{display:inline-flex;align-items:center;min-height:44px}
@media (max-width:760px){
:root{--rand:20px;--band:72px}
.hd{padding:12px 20px}
.hd img{height:40px}
.nav{display:none}
.menu-k{display:block}
.g{grid-template-columns:minmax(0,1fr);row-gap:24px}
.g > *{grid-column:1 / -1 !important;grid-row:auto !important;margin-left:0 !important;margin-right:0 !important}
.hero{min-height:0;padding:20px 0 24px;display:block}
.h6-raster{padding-top:24px}
.h6-rechts{height:400px;max-width:360px;margin:8px auto 0;width:100%}
.h6-halo-wrap{left:0;right:0}
.rt h1{font-size:min(34px,9vw)}
.pg .buehne-titel{font-size:min(28px,8.6vw)}
.aussage-spalten{grid-template-columns:minmax(0,1fr);row-gap:16px}
.buehne-drei{grid-template-columns:minmax(0,1fr);row-gap:24px}
.buehne-bild{max-width:300px}
.aussage-kopf{grid-template-columns:minmax(0,1fr);row-gap:20px}
.rakete{width:140px}
.figuren-raster,.leit-raster{grid-template-columns:minmax(0,1fr)}
.figuren-text{padding-bottom:24px}
.schloss{width:160px;margin-top:40px}
.kontakt-karte{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;padding:28px 20px;border-radius:24px}
.kontakt-figur{display:none}
.kf{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr);margin-top:32px;padding:20px}
.kf textarea{height:auto}
.partner-raster{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
.partner-feld{min-height:110px;padding:20px;border-radius:20px}
.partner-feld img{height:28px}
.partner-mehr,.partner-feld:nth-child(5){grid-column:1 / -1}
.cb{position:relative;top:auto;right:auto;width:420px;margin-left:120px}
.htxt{max-width:none;padding:18px 20px 0}
.hero h1{font-size:30px;line-height:1.12;letter-spacing:-.01em;margin:0 0 16px}
.s{padding:72px 20px}
.tick{margin-left:-20px;margin-right:-20px}
.ft{padding:40px 20px}
.bs{max-width:300px;margin-top:16px}
#kontakt img{max-width:200px}
.leit-bild{order:2;max-width:110px !important;justify-self:start !important}
.g > *{grid-column:1 / -1 !important;grid-row:auto !important}
.kopf{padding:32px 20px 16px}
.kopf .zeichnung{max-width:220px;justify-self:start}
.s{padding:56px 20px}
.prod{grid-template-columns:minmax(0,1fr);row-gap:32px}
.prod > *{grid-column:1 / -1 !important;grid-row:auto !important}
.prod ul.zwei{columns:1}
.galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
.leitband .leitsatz{font-size:min(34px,9vw)}
.leitband .leit-foto{max-width:200px !important}
.zitat,.nebel-liste,.fotoband,.app-raster,.produkt-paar,.webuntis{grid-template-columns:minmax(0,1fr);row-gap:32px}
.webuntis-karte{position:static}
.dunkel-liste .leit-raster{grid-template-columns:minmax(0,1fr)}
.fotoband.links .fotoband-bild{order:0}
.app-einleitung{grid-template-columns:minmax(0,1fr);row-gap:16px;margin-bottom:32px}
.zitat-bild{max-width:200px;justify-self:start}
ul.zwei-spalten{columns:1}
.app-klein{display:none}
.fotoband.oben .fotoband-bild{margin-top:0}
.partner-raster.spalten-2,.partner-raster.spalten-3{grid-template-columns:minmax(0,1fr)}
.kontakt-karte.ohne-formular{grid-template-columns:minmax(0,1fr)}
.kontakt-karte.ohne-formular .kontakt-figur{display:none}
.kontakt-karte.ohne-formular .mail{font-size:min(24px,6.2vw)}
.kontakt-karte.ohne-formular h2{font-size:min(26px,7vw)}
:root{--rand:20px;--band:56px;--text:17px;--h2-min:26px;--h3:22px;--leitsatz:40px;--lw-h1:-.01em;--lw-h2:-.005em;--h2-abstand:18px}
.pg p{margin:0 0 .9em}
.pg h2{line-height:1.15}
.pg h3{line-height:1.2}
.b{font-weight:400}
.s{padding:var(--band) var(--rand)}
.edge{height:47px}
.mail-gross{font-size:min(26px,6.8vw)}
.ft{font-weight:400;padding:40px 20px 48px}
.tick{margin-left:-20px;margin-right:-20px}
.tick-row span{margin-right:44px}
.tick-row span{height:72px}
.bs{max-width:220px;margin-left:0}
.tick-row img{height:26px}
#kontakt img{display:none !important}
.band-kopf{overflow-x:clip;position:relative;z-index:1;margin-bottom:-1px}
.band-kopf::before{left:-45%;right:-45%}
.band-kopf .wb{width:190%;max-width:none;margin-left:-45%}
.leitband{margin-top:0 !important;padding-bottom:40px !important;row-gap:0;font-size:18px}
.leitband > p:first-child{margin-bottom:18px !important}
.leit-bild{max-width:110px !important;margin-top:28px !important}
.nebel{border-radius:24px;padding:40px 20px}
#leistungen{padding-left:12px;padding-right:12px}
.baustein .pn{height:160px;margin-bottom:20px}
.bausteine{margin-top:48px;row-gap:40px}
.baustein p{font-size:17px}
.bs{margin-top:40px}
#kontakt{padding-bottom:var(--band) !important}
.mail-gross{display:inline-flex;align-items:center;min-height:48px}
.rt p a{display:inline-flex;align-items:center;min-height:44px}
}
.partner-band{display:flex;gap:16px;overflow:hidden;margin-top:40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.partner-lauf{display:flex;gap:16px;flex:none;list-style:none;margin:0;padding:0;animation:partner-lauf 70s linear infinite}
.partner-band:hover .partner-lauf{animation-play-state:paused}
.partner-lauf .partner-feld{flex:0 0 220px;min-height:120px;animation:none}
.partner-band + .partner-raster{margin-top:16px;grid-template-columns:minmax(0,1fr)}
.partner-band + .partner-raster .partner-mehr{min-height:0}
.partner-name{font-size:18px;font-weight:600;color:var(--blau);opacity:.62;text-align:center}
.partner-feld img.partner-hoch{height:var(--h)}
@media (max-width:760px){.partner-feld img.partner-hoch{height:calc(var(--h) * .74)}}
@keyframes partner-lauf{to{transform:translateX(calc(-100% - 16px))}}
@media (prefers-reduced-motion:reduce){.partner-band{flex-wrap:wrap;-webkit-mask-image:none;mask-image:none}.partner-lauf{animation:none;flex-wrap:wrap;flex:1 1 100%}.partner-lauf[aria-hidden]{display:none}}
@media (max-width:760px){.partner-lauf .partner-feld{flex-basis:160px;min-height:96px}}
.partner-alle{--n:9;--spalte:calc((100% - (var(--n) - 1) * 16px) / var(--n));display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.partner-alle .partner-feld{flex:0 0 var(--spalte);min-width:0;min-height:136px}
.partner-alle .partner-mehr{flex:1 0 min(100%, calc(3 * var(--spalte) + 32px));min-height:0}
@media (max-width:1919px){.partner-alle{--n:7}}
@media (max-width:1399px){.partner-alle{--n:5}}
@media (max-width:1099px){.partner-alle{--n:4}}
@media (max-width:760px){.partner-alle{--n:2;gap:16px}.partner-alle .partner-feld{min-height:96px}}
.pg .partner-wahl{margin:56px 0 0;font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blau)}
.partner-wahl + .partner-band,.partner-wahl + .partner-raster{margin-top:16px}
/* Image zoom, pairs with image-zoom.js. Fixed colours: the view is always dark. */
.image-zoom-target{cursor:zoom-in}
.image-zoom-target:focus-visible{outline:3px solid currentColor;outline-offset:4px}
html.image-zoom-open{overflow:hidden}
.image-zoom{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;display:none;align-items:center;justify-content:center;overscroll-behavior:contain}
.image-zoom[open]{display:flex}
.image-zoom::backdrop{background:rgba(6,9,14,.96)}
.image-zoom img{display:block;max-width:calc(100vw - 32px);max-height:calc(100dvh - 112px);width:auto;height:auto;object-fit:contain;border-radius:4px;cursor:default}
.image-zoom-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:48px;height:48px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.16);cursor:pointer}
.image-zoom-close::before,.image-zoom-close::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:2px;border-radius:1px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.image-zoom-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.image-zoom-close:hover{background:rgba(255,255,255,.28)}
.image-zoom-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
.image-zoom[open] img{animation:image-zoom-in .26s cubic-bezier(.23,1,.32,1)}
.image-zoom[open]::backdrop{animation:image-zoom-fade .2s ease-out}
}
@keyframes image-zoom-in{from{opacity:0;transform:scale(.96)}}
@keyframes image-zoom-fade{from{opacity:0}}