/* Reflexion: Layout der Seiten und Whiteboard-Zeichnungen, ergänzt assets/site.css. */ .v3{--v3-line:#e1e1e1;--v3-off:#fafafa} /* ---------- Typo ---------- */ .v3 .h1{line-height:.84;letter-spacing:-.035em} .v3 .h2{font-size:clamp(2.4rem,5.2vw,4.5rem);line-height:.86;letter-spacing:-.035em;margin:0} .v3 .hl{color:var(--tawny);font-style:normal!important;opacity:1} .v3 .h2 .hl{display:block} .v3 p,.v3 .lead,.v3 .sub{color:#000} .v3 .lead{font-family:var(--font-body);font-size:1.125rem;line-height:1.5;letter-spacing:-.01em;text-transform:none} .v3 .eyebrow{display:none} .v3 .footer .eyebrow{display:block} /* ---------- Abschnittskopf: Aussage links, kurzer Text rechts ---------- */ .v3-head{display:grid;gap:22px;margin-bottom:56px} @media(min-width:900px){.v3-head{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:end;gap:64px}} .v3-head .lead{margin:0;max-width:26rem} @media(min-width:900px){.v3-head .lead{justify-self:end}} .v3-head.container{max-width:var(--container);margin-left:auto;margin-right:auto;padding:0 5%} .v3 .section .v3-head.container{padding:0} /* ---------- Nichts rund, nichts schwebt ---------- */ .v3 .of-tile,.v3 .of-panel,.v3 .yt-facade,.v3 .imgcard{border-radius:0!important;box-shadow:none!important} .v3 .of-tile:hover,.v3 .imgcard:hover{transform:none!important;box-shadow:none!important} .v3 .of-accent::after,.v3 .of-panel::before,.v3 .of-panel::after{display:none!important} /* ---------- Kunden ---------- */ .v3-kunden{background:var(--v3-off);padding:56px 0 0} .v3-kunden-k{max-width:var(--container);margin:0 auto 22px;padding:0 5%;box-sizing:content-box;font-family:var(--font-body);font-size:.95rem;letter-spacing:-.01em;color:#6b6b6b} @media(min-width:1500px){.v3-kunden-k{padding:0}} .v3-lauf{overflow:hidden;border-top:1px solid var(--v3-line);background:#fff} .v3-track{display:flex;width:max-content;animation:v3-lauf 80s linear infinite} .v3-lauf:hover .v3-track{animation-play-state:paused} .v3-track ul{display:flex;list-style:none;margin:0;padding:0} .v3-track li{flex:none;width:260px;height:150px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--v3-line);border-bottom:1px solid var(--v3-line)} .v3-logo{display:block;height:var(--h,40px);width:calc(var(--h,40px) * var(--ar));max-width:200px;background:#000;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat} .v3-name{font-family:var(--font-body);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;color:#000} @keyframes v3-lauf{to{transform:translateX(-50%)}} @media(max-width:767px){.v3-track li{width:180px;height:110px}.v3-logo{max-width:130px;height:calc(var(--h,40px)*.8)}} @media(prefers-reduced-motion:reduce){.v3-track{animation:none}.v3-lauf{overflow-x:auto}} /* ---------- Zahlen: lila, ohne Linie ---------- */ .v3 .of-bignum{border-top:0;padding-top:0} .v3 .of-bignum .n{color:var(--tawny);line-height:.84;letter-spacing:-.035em} .v3 .of-bignum .k{color:#000} .v3 .t-tiny.muted{color:#5a5a5a} /* ---------- Problem: schwarzes Farbfeld + Foto ---------- */ .v3-problem{display:grid;background:#000;color:#fff} @media(min-width:900px){.v3-problem{grid-template-columns:1.1fr 1fr;min-height:640px}} .v3-problem-text{padding:84px 5%;display:flex;flex-direction:column;justify-content:center;gap:32px} @media(min-width:900px){.v3-problem-text{padding:112px 64px 112px max(5%,calc((100vw - 80rem)/2))}} .v3-problem .h2{color:#fff;font-size:clamp(2.2rem,3.8vw,3.6rem)} .v3-problem .hl{color:#fff;opacity:.5} .v3-problem p{color:#fff;font-size:1.125rem;line-height:1.55;max-width:36rem} .v3-problem-img{display:flex;align-items:center;justify-content:center;padding:40px 5% 64px} @media(min-width:900px){.v3-problem-img{padding:64px 5% 64px 0}} .v3-problem-img svg{width:100%;max-width:560px;height:auto} /* ---------- Lösung: Foto-Kacheln Kante an Kante ---------- */ .v3-loesung{padding-left:0!important;padding-right:0!important;padding-bottom:0!important} .v3-loesung .v3-head{padding:0 5%} .v3-cards{display:grid;grid-template-columns:1fr;border-top:1px solid var(--v3-line)} @media(min-width:600px){.v3-cards{grid-template-columns:repeat(2,1fr)}} @media(min-width:1100px){.v3-cards{grid-template-columns:repeat(4,1fr)}} .v3-card{display:flex;flex-direction:column;background:#fff;color:#000;text-decoration:none;border-right:1px solid var(--v3-line);border-bottom:1px solid var(--v3-line)} .v3-card-img{display:block;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--v3-line);padding:18px 14px 6px} .v3-card-img svg{width:100%;height:100%;display:block} .v3-card-body{display:flex;flex-direction:column;gap:10px;padding:24px 28px 30px;flex:1} .v3-card-body strong{font-family:var(--font-body);font-weight:700;font-size:1.125rem;letter-spacing:-.02em;line-height:1.3} .v3-card-body span{font-size:1rem;line-height:1.5;color:#000} .v3-card-body .v3-arrow{margin-top:auto;padding-top:12px;font-size:1.4rem;line-height:1;transition:transform .2s var(--ease)} .v3-card:hover .v3-arrow{transform:translateX(6px);color:var(--tawny)} /* ---------- Whiteboard ---------- */ /* Handschrift für Geräte ohne Marker Felt (Windows, Android): Caveat Brush, SIL Open Font License 1.1, selbst gehostet, kein Abruf bei Google. Mac und iPhone nutzen weiter Marker Felt und laden die Datei nicht. */ @font-face{font-family:"RX Hand";src:url(/assets/fonts/caveat-brush-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} .v3{--wb-soft:#a3a3a3;--wb-font:"Marker Felt","Chalkboard SE","RX Hand","Segoe Print","Comic Sans MS",cursive;--wb-ink:#151515;--wb-acc:#6f2470} .wb{overflow:visible} .wb-s{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .wb-f{stroke:none}.wb-f.wb-ink{fill:var(--wb-ink)}.wb-f.wb-acc{fill:var(--wb-acc)} .wb-soft{stroke:var(--wb-soft)} .wb-ink{stroke:var(--wb-ink)}.wb-acc{stroke:var(--wb-acc)} .wb-t{font-family:var(--wb-font);stroke:none} .wb-t.wb-ink{fill:var(--wb-ink)}.wb-t.wb-acc{fill:var(--wb-acc)} .wb-chalk{--wb-ink:#f4f4f4;--wb-acc:#c99ac9;--wb-soft:rgba(255,255,255,.45)} .v3-card-img svg,.v3-problem-img svg{overflow:hidden} .v3-tile-img{aspect-ratio:400/260} .v3-tiles{border-left:1px solid var(--v3-line)} @media(min-width:900px){.v3-tiles{grid-template-columns:repeat(3,1fr)}} .v3-swoosh{display:block;width:min(88%,520px);height:auto;margin:-4px 0 18px} .v3-stat-wb{display:block;width:100%;max-width:230px;height:auto;margin:0 0 14px} .v3-step-wb{display:block;width:100%;max-width:320px;height:auto;margin:0 0 14px} .v3-plane{display:block;width:100%;max-width:560px;height:auto;margin:6px 0 22px;--wb-ink:#fff;--wb-acc:#fff;--wb-soft:rgba(255,255,255,.6)} /* ---------- Stele: dreht sich beim Scrollen ---------- */ .v3-stele{background:#fff;padding-top:96px} .v3-stele .v3-head{margin-bottom:0} .v3-vid{color:#000;font-weight:700;text-decoration:none;border-bottom:2px solid var(--tawny)} .v3-vid:hover{color:var(--tawny)} .v3-stele-scroll{position:relative;height:420vh} .v3-stele-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:64px;box-sizing:border-box;overflow:hidden} .v3-stage{position:relative;width:min(92vw,calc((100vh - 110px) * 1.5));aspect-ratio:3/2} .v3-3d{position:absolute;left:50%;top:6%;height:88%;aspect-ratio:531/1389;transform:translateX(-50%);perspective:1600px} .v3-box{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;--d:9%} .v3-face{position:absolute;top:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden} .v3-front{left:0;right:0;transform:translateZ(calc(var(--dpx,10px)))} .v3-back{left:0;right:0;background:linear-gradient(90deg,#0d0d0d,#232323 45%,#111);border-radius:3px;transform:rotateY(180deg) translateZ(var(--dpx,10px));top:1%;bottom:.5%} .v3-left,.v3-right{width:calc(var(--dpx,10px) * 2);left:50%;margin-left:calc(var(--dpx,10px) * -1);background:linear-gradient(90deg,#1b1b1b,#2e2e2e,#161616);top:1%;bottom:.5%} .v3-left{transform:rotateY(-90deg) translateZ(var(--hw,100px))} .v3-right{transform:rotateY(90deg) translateZ(var(--hw,100px))} .v3-frame{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none} .v3-scr{position:absolute;left:2.45%;top:1.66%;width:94.2%;height:64.15%;background:#000;overflow:hidden} .v3-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease} .v3-scr img.on{opacity:1} .v3-notes{position:absolute;inset:0;width:100%;height:100%} .v3-caps{display:none;list-style:none;margin:0;padding:0 5%} @media(max-width:899px){ .v3-stage{width:100vw;aspect-ratio:auto;height:62vh} .v3-3d{top:0;height:100%} .v3-notes{display:none} .v3-caps{display:grid;gap:8px;margin-top:20px;min-height:7.5em;width:100%;box-sizing:border-box} .v3-cap{font-family:var(--wb-font);font-size:1.15rem;line-height:1.25;color:var(--wb-ink);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;display:none} .v3-cap.on{display:block;opacity:1;transform:none} } /* ---------- Standorte: eckige Flächen, ohne Hover-Hüpfer ---------- */ .v3 .of-tiles{gap:0} .v3 .of-tile{min-height:18rem} .v3 .of-tile p,.v3 .of-tile .more{color:#fff} .v3 .of-tile .more{text-transform:none;letter-spacing:-.01em;font-size:1rem} /* ---------- Prozess: lila Nummern, schwarzer Text ---------- */ .v3 .of-step{border-top:1px solid var(--v3-line)} .v3 .of-step .no{color:var(--tawny);font-size:clamp(3rem,4.4vw,4.4rem);line-height:.84;letter-spacing:-.035em} .v3 .of-step p{color:#000;font-size:1rem} .v3 .process-cta{justify-content:flex-start} /* ---------- Kontakt: lila Farbfeld ---------- */ .v3-kontakt{background:var(--tawny);color:#fff} .v3-kontakt .h2{color:#fff;font-size:clamp(3rem,7vw,6.5rem)} .v3-kontakt .lead,.v3-kontakt p,.v3-kontakt a,.v3-kontakt .muted,.v3-kontakt strong{color:#fff!important} .v3-kontakt .contact-list svg,.v3-kontakt .contact-list i{color:#fff;stroke:#fff} .v3-kontakt .form{background:#fff!important;color:#000;padding:36px;border-radius:0} .v3-kontakt .form label,.v3-kontakt .form a{color:#000!important} .v3-kontakt .form input,.v3-kontakt .form textarea{border-radius:0} .v3 .v3-loesung .v3-head.container{padding:0 5%} /* ---------- Marker, der mitzeichnet ---------- */ .wb-pen{pointer-events:none;filter:drop-shadow(2px 5px 4px rgba(0,0,0,.22))} .wb-pen-tip{fill:#1d1d1d}.wb-pen-body{fill:#2b2b2b}.wb-pen-cap{fill:var(--tawny)}.wb-pen-hi{fill:rgba(255,255,255,.28)} .wb-chalk .wb-pen-tip,.wb-light .wb-pen-tip{fill:#e6e6e6} .wb-chalk .wb-pen-body,.wb-light .wb-pen-body{fill:#f4f4f4} .wb-chalk .wb-pen-hi,.wb-light .wb-pen-hi{fill:rgba(0,0,0,.1)} .wb-light .wb-pen-cap{fill:#1d1d1d} .wb-light{--wb-ink:#fff;--wb-acc:#fff;--wb-soft:rgba(255,255,255,.6)} /* ---------- Stele: fünf Drehungen ---------- */ .v3-stele-scroll{height:640vh} /* ---------- Unterseiten ---------- */ .v3-hero-wb{display:block;width:100%;max-width:520px;height:auto;margin:0 auto 14px} .v3 .of-media--stele{flex-direction:column} .v3 .wunsch{border-radius:0} .v3 .wunsch-ico{width:150px;height:auto;border-radius:0;background:none;color:inherit;display:block} .v3 .wunsch-ico svg{width:150px!important;height:auto!important;display:block} .v3-plaetze-box{border-radius:0!important} @media(min-width:900px){.v3-plaetze-box{grid-template-columns:minmax(0,1fr) 320px!important;align-items:center}.v3-plaetze-box>.v3-plaetze-wb{grid-column:2;grid-row:1 / span 3}} .v3-plaetze-wb{width:100%;max-width:320px;height:auto;display:block;justify-self:center} .v3 .leadmagnet{background:var(--tawny)!important;border-radius:0!important} .v3 .leadmagnet>div[aria-hidden],.v3 .leadmagnet>svg{display:none!important} .v3-liste-wb{display:block;width:100%;max-width:300px;height:auto;margin:22px 0 0} .v3-frage-wb{display:block;width:100%;max-width:260px;height:auto} @media(min-width:900px){.v3-frage-wb{justify-self:end}} .v3-lief-wb{display:block;width:100%;max-width:860px;height:auto;margin:6px auto 0} .v3 .qualify .q{border-radius:0} .v3 .qualify .q .ico{width:110px;height:auto;background:none;border-radius:0} .v3 .qualify .q .ico svg{width:110px!important;height:auto!important} .v3 input,.v3 textarea,.v3 select{border-radius:0!important} .v3 .of-copy .eyebrow,.v3 .eyebrow{display:none!important} .v3 .footer .eyebrow{display:block!important} .v3-hero-wb{max-width:600px;overflow:hidden} /* ---------- Header: Markerstrich genau unter dem Wort ---------- */ .v3-mark{position:relative;display:inline-block;white-space:nowrap} .v3-mark-wb{position:absolute;left:-3%;bottom:-.16em;width:106%;height:.26em;overflow:visible;pointer-events:none} /* ---------- Momente: drei Comic-Bilder ---------- */ .v3-strip{display:grid;grid-template-columns:1fr;border-top:1px solid var(--v3-line);border-left:1px solid var(--v3-line)} @media(min-width:900px){.v3-strip{grid-template-columns:repeat(3,1fr)}} .v3-strip svg{display:block;width:100%;height:auto;aspect-ratio:4/3;box-sizing:border-box;padding:14px 10px 4px;background:#fff;border-right:1px solid var(--v3-line);border-bottom:1px solid var(--v3-line);overflow:hidden} /* ---------- Stele: Videos, Schule im Hintergrund ---------- */ .v3-box{transform-origin:50% 100%} .v3-scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;background:#000} .v3-scr video.on{opacity:1} .v3-bgschool{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible} .v3-3d{z-index:1} .v3-notes{z-index:2} /* ---------- Stele: längere Strecke für das Finale, Video randlos ---------- */ .v3-stele-scroll{height:1050vh} .v3-scr{left:2.1%!important;top:1.35%!important;width:94.9%!important;height:64.75%!important} .v3-left,.v3-right{background:linear-gradient(90deg,#141414,#242424,#121212)!important} @media(max-width:899px){ .v3-3d{top:6%!important;height:88%!important} .v3-bgschool{overflow:hidden} } /* ---------- Über uns und Azubi-Content ---------- */ .v3-weg-sec{padding-top:56px!important;padding-bottom:24px!important} .v3-weg-wb{display:block;width:100%;max-width:980px;height:auto;margin:0 auto} .v3 .of-panel{position:relative} .v3-panel-wb{display:block;width:100%;max-width:340px;height:auto;margin:28px auto 0} @media(min-width:1000px){.v3 .of-panel .of-panel-body{max-width:56%}.v3-panel-wb{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:34%;max-width:380px;margin:0}} .v3 .cprod-row{position:relative} @media(min-width:900px){.v3 .cprod-row{grid-template-columns:120px 1fr 240px}} .v3-cprod-wb{display:block;width:100%;max-width:240px;height:auto} .v3 .of-panel.rx-spotlight::before,.v3 .of-panel::before{content:none!important;opacity:0!important;background:none!important} /* Hervorhebungen überall gleich: lila Schrift, kein Kasten */ .v3 .hl{background:none!important;padding:0!important;box-shadow:none!important;-webkit-box-decoration-break:initial!important;color:var(--tawny)!important} .v3 .of-panel .hl,.v3 .v3-problem .hl{color:#fff!important;opacity:.55} .v3-stele-scroll{height:700vh} /* ---------- Heldenreise: Kapitel-Zeile, Stele-Strecke ---------- */ .v3-kap{display:block;width:100%;max-width:440px;height:auto;margin:0 0 14px;overflow:visible} .v3-problem-text .v3-kap{margin-bottom:4px} .v3-stele-scroll{height:820vh} .wb-paper{fill:#fff;stroke:none} /* ---------- Zeitstrahl-Zeichnungen, kurze Stele ---------- */ .v3-tl-wb{display:block;width:100%;max-width:1000px;height:auto;margin:8px auto 0;overflow:visible} .v3-tl-wrap{padding:0 5% 48px} .v3-stele-scroll{height:520vh} .v3-tl-box,.v3-tl-wrap{overflow:hidden} @media(max-width:699px){.v3-tl-wb{width:155%;max-width:none;margin-left:-27.5%}} /* ---------- Einrastende Bühnen: erst stehen, dann erzählen ---------- */ @media (min-width:900px) and (min-height:620px){ .v3-pin{position:relative;height:calc(100vh + var(--len,140vh))} .v3-pin-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden} .v3-pin[data-pin=problem] .v3-pin-in{background:#000} .v3-pin[data-pin=problem] .v3-problem{min-height:100vh} .v3-pin .section{padding-top:48px!important;padding-bottom:40px!important} .v3-pin .v3-tl-wb{max-height:60vh;width:auto;max-width:100%;margin:0 auto} .v3-pin[data-pin=buendeln] .v3-pin-in{background:var(--v3-off)} .v3-pin[data-pin=karten] .v3-pin-in{background:var(--v3-off);padding-top:64px} .v3-pin .v3-problem-img svg{max-height:78vh;width:auto} } @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=buendeln] .v3-head{margin-bottom:8px} .v3-pin[data-pin=buendeln] .v3-tl-wrap{padding-bottom:0} .v3-pin[data-pin=buendeln] .v3-tl-wb{max-height:54vh} } @media(max-width:699px){.v3-tl-wb{width:100%!important;margin-left:0!important}} /* ---------- Echter QR-Code auf dem Stelen-Bildschirm ---------- */ .v3-qr{position:absolute;right:7%;bottom:5%;width:32%;opacity:0;transform:scale(.85);transform-origin:100% 100%;transition:opacity .45s ease,transform .45s ease;z-index:2} .v3-qr.on{opacity:1;transform:none} .v3-qr img{display:block;width:100%;height:auto;border:3px solid #fff;border-radius:4px;box-shadow:0 2px 10px rgba(0,0,0,.35)} .v3-qr span{display:block;margin:0 0 4px;font:800 clamp(8px,.8vw,12px)/1.1 var(--font-display);text-transform:uppercase;color:#fff;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.7)} /* ---------- Jede Sektion rastet ein ---------- */ @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=zahlen] .v3-pin-in,.v3-pin[data-pin=ablauf] .v3-pin-in{background:#fff} .v3-pin[data-pin=standorte] .v3-pin-in{background:var(--v3-off)} .v3-pin[data-pin=ablauf] .v3-pin-in{background:var(--v3-off)} .v3-pin[data-pin=kontakt] .v3-pin-in{background:var(--tawny)} .v3-pin[data-pin=standorte] .v3-tile-img{aspect-ratio:400/230} .v3-pin[data-pin=standorte] .v3-card-body{padding-top:16px;padding-bottom:18px} } @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=laerm] .v3-tl-wb{max-height:56vh} } .v3-scr .v3-qr img{position:static;inset:auto;width:100%;height:auto;opacity:1;object-fit:contain;transition:none} /* QR als eigene Ebene halten, sonst überdeckt Chrome das Video in der 3D-Stele schwarz */ .v3-qr{will-change:transform,opacity} /* ---------- Gleiche Kanten in allen Abschnitten ---------- */ /* Köpfe in Abschnitten ohne Seitenrand: gleiche Fluchtlinie wie .section > .container */ .v3 .v3-loesung .v3-head.container,.v3 .v3-stele .v3-head.container{max-width:calc(var(--container) + 10%)} /* QR blendet nur ein, ohne Zoom */ .v3-qr,.v3-qr.on{transform:none} /* Bühnen passen auch auf niedrige Laptop-Bildschirme */ @media (min-width:900px) and (min-height:620px){ .v3-pin .v3-problem-img svg{max-height:min(78vh,calc(100vh - 120px))} .v3-pin[data-pin=laerm] .v3-tl-wb{max-height:min(56vh,calc(100vh - 370px))} .v3-pin[data-pin=buendeln] .v3-tl-wb{max-height:min(54vh,calc(100vh - 330px))} } @media (min-width:900px) and (min-height:620px) and (max-height:860px){ .v3-pin .section{padding-top:32px!important;padding-bottom:24px!important} .v3-pin .v3-head{margin-bottom:32px} .v3-pin[data-pin=kontakt] .section{padding-top:24px!important} } /* Bühnen beginnen unter der festen Navigation, nichts verschwindet darunter */ @media (min-width:900px) and (min-height:620px){ .v3-pin-in{box-sizing:border-box;padding-top:72px} .v3-pin[data-pin=karten] .v3-pin-in{padding-top:72px} .v3-pin[data-pin=laerm] .v3-tl-wb{max-height:min(56vh,calc(100vh - 430px))} .v3-pin[data-pin=buendeln] .v3-tl-wb{max-height:min(54vh,calc(100vh - 380px))} .v3-pin .v3-problem-img svg{max-height:min(78vh,calc(100vh - 150px))} } @media (min-width:900px) and (min-height:620px){ .v3-pin .h2,.v3-pin .v3-problem h2{font-size:min(4.5rem,8.2vh)} .v3-pin[data-pin=kontakt] .section{padding-bottom:16px!important} } @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=problem] .v3-problem{min-height:calc(100vh - 72px)} } @media (min-width:900px) and (min-height:620px){ .v3-pin .v3-problem .h2{font-size:min(3.6rem,3.8vw,6.6vh)} .v3-pin .v3-problem-text{padding-top:40px;padding-bottom:40px} .v3-pin .v3-problem-img{padding-top:32px;padding-bottom:32px} } @media (min-width:900px) and (min-height:620px) and (max-height:860px){ .v3-pin .v3-step-wb{max-height:calc(100vh - 620px);min-height:110px;width:auto;max-width:100%} .v3-pin .process-cta{margin-top:20px} } @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=laerm] .v3-tl-wb{max-height:min(54vh,calc(100vh - 450px))} } @media (min-width:900px) and (min-height:620px) and (max-height:720px){ .v3-pin[data-pin=kontakt] .section{padding-top:8px!important;padding-bottom:8px!important} } /* Kontakt mit Formular rastet auf sehr niedrigen Bildschirmen nicht ein, damit nichts abgeschnitten wird */ @media (min-width:900px) and (min-height:620px) and (max-height:720px){ .v3-pin[data-pin=kontakt]{height:auto} .v3-pin[data-pin=kontakt] .v3-pin-in{position:relative;height:auto;padding-top:0;overflow:visible} } /* ===================================================================== Bühnen, Feinschliff 03.10.2026 spät Safari-feste Größen (Zeichnungen nie mit width:auto), keine Lücke oben, Inhalt mittig mit Luft für die Navigation, ruhige Effekte. ===================================================================== */ .v3 .rx-cursorlight{display:none!important} .v3-tl-wb{max-width:none} .v3-kaponly{margin-bottom:8px!important} .v3-karten-head{margin-top:0} @media (min-width:900px) and (min-height:620px){ .v3-pin-in,.v3-pin[data-pin=karten] .v3-pin-in{padding-top:0!important;padding-bottom:0!important;justify-content:center} .v3-pin .section{padding-top:40px!important;padding-bottom:40px!important} .v3-pin .v3-head{margin-bottom:36px} .v3-pin .v3-tl-wrap{padding-bottom:0} /* Breite aus dem Seitenverhältnis, Höhe folgt automatisch */ .v3-pin .v3-tl-wb{max-height:none;height:auto;margin:0 auto} .v3-pin[data-pin=laerm] .v3-tl-wb{width:min(100%,calc((100vh - 470px) * 2.909))} .v3-pin[data-pin=buendeln] .v3-tl-wb{width:min(100%,calc((100vh - 260px) * 2.723))} .v3-pin .v3-problem-img svg{flex:0 0 auto;max-height:none;height:auto;width:min(100%,560px,calc((100vh - 170px) * 1.077))} .v3-pin .v3-step-wb{max-height:none;min-height:0;height:auto;width:min(100%,calc((100vh - 560px) * 1.882))} .v3-pin[data-pin=karten] .v3-karten-head{margin-bottom:32px} .v3-pin[data-pin=karten] .v3-card-img{aspect-ratio:auto;height:min(18.75vw,calc(100vh - 500px))} .v3-pin[data-pin=karten] .v3-card-img svg{width:100%;height:100%} } @media (min-width:900px) and (min-height:620px) and (max-height:860px){ .v3-pin .section{padding-top:28px!important;padding-bottom:28px!important} .v3-pin .v3-head{margin-bottom:24px} } @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=buendeln] .v3-tl-wb{width:min(100%,calc((100vh - 260px) * 2.128))} } /* Schulflur: getönte Flächen statt leerem Weiß */ .wb-fill{stroke:none} .wb-ceil{fill:#fbfafb}.wb-wall{fill:#f3eff4}.wb-back{fill:#ebe6ec}.wb-floor{fill:#e4dee5}.wb-white{fill:#fff} /* Zahlen symmetrisch: Inhalt jeder Spalte mittig, Fußnote mittig */ .v3 .of-stats2 .of-bignum{text-align:center} .v3 .of-stats2 .v3-stat-wb{margin-left:auto;margin-right:auto} .v3 .of-stats2 + .t-tiny{margin-left:auto!important;margin-right:auto!important;text-align:center} /* ===================================================================== Display, Fassung 4: nur die Stele, die wichtigsten Punkte gleiten seitlich herein ===================================================================== */ .v3-stele{padding-top:72px} .v3-stele-scroll{height:320vh} .v3-stele-sticky{padding-top:56px} .v3-notes,.v3-bgschool,.v3-caps{display:none!important} .v3-pts{position:absolute;inset:0;pointer-events:none;z-index:2} .v3-pt{position:absolute;width:31%;opacity:0;will-change:transform,opacity} .v3-pt--l{right:66.4%;text-align:right} .v3-pt--r{left:66.4%;text-align:left} .v3-pt--n0,.v3-pt--n1{top:19%} .v3-pt--n2,.v3-pt--n3{top:53%} .v3-pt-t{position:relative;display:inline-block;margin:0;padding-bottom:14px;font:900 clamp(1.15rem,1.7vw,1.7rem)/1.02 var(--font-display);text-transform:uppercase;letter-spacing:-.01em;color:#000} .v3-pt-t span{position:relative;z-index:1} .v3-pt-u{position:absolute;left:-2%;bottom:0;width:104%;height:12px;overflow:visible} .v3-pt-u path{fill:none;stroke:var(--tawny);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke} .v3-pt-s{margin:12px 0 0;max-width:22rem;font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.42;color:#000} .v3-pt--l .v3-pt-s{margin-left:auto} .v3-pt-s small{display:block;margin-top:3px;font-size:.8em;color:#555} .v3-pt-ar{position:absolute;top:.15em;width:54px;height:30px;overflow:visible} .v3-pt--l .v3-pt-ar{left:calc(100% + 12px)} .v3-pt--r .v3-pt-ar{right:calc(100% + 12px);transform:scaleX(-1)} .v3-pt-ar path{fill:none;stroke:var(--tawny);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1} @media (max-width:899px){ .v3-stele{padding-top:56px} .v3-stele-scroll{height:300vh} .v3-stele-sticky{justify-content:flex-start;padding-top:80px} .v3-stage{height:48vh} .v3-pts{inset:auto 0 auto 0;top:calc(100% + 22px);display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding:0 5%;box-sizing:border-box} .v3-pt{position:relative;width:auto;top:auto!important;left:auto!important;right:auto!important;text-align:left!important} .v3-pt--l .v3-pt-s{margin-left:0} .v3-pt-ar{display:none} .v3-pt-t{font-size:1.02rem;padding-bottom:10px} .v3-pt-s{margin-top:8px;font-size:.86rem} } /* Frei laufende Abschnitte: gleicher Rhythmus oben und unten */ .v3 .section--flush-top{padding-top:84px!important} @media (min-width:900px){ .v3-pt-s{font-size:clamp(1rem,1.15vw,1.2rem)} } /* ===================================================================== Safari: Raster dürfen nie breiter werden als ihr Platz. "1fr" heißt in Safari "mindestens so breit wie der Inhalt", Zeichnungen ohne feste Größe blähen die Spalte dann auf (Standort-Kacheln liefen rechts aus dem Bild). minmax(0,1fr) begrenzt das. ===================================================================== */ .v3-cards{grid-template-columns:minmax(0,1fr)} @media(min-width:600px){.v3-cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(min-width:1100px){.v3-cards{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:900px){.v3-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:900px){.v3-strip{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(min-width:900px){.v3-problem{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}} @media(min-width:768px){.v3 .of-stats2,.v3 .of-steps,.v3 .steps{grid-template-columns:repeat(3,minmax(0,1fr))}.v3 .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .v3-card,.v3 .of-bignum,.v3 .of-step,.v3-cards>*,.v3 .contact-grid>*{min-width:0} .v3-card-img svg{max-width:100%} /* Display: Punkte als Whiteboard-Notizen (Desktop zeichnet der Marker, Handy schreibt die Handschrift ein) */ .v3-pt-t,.v3-pt-s{font-family:var(--wb-font)!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important;color:var(--wb-ink)!important} .v3-pt-t{font-size:1.25rem!important;line-height:1.15!important} .v3-pt-s{font-size:.95rem!important;line-height:1.3!important} @media (min-width:900px){ .v3-stele .v3-notes{display:block!important;position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible} .v3-stele .v3-pts{display:none!important} } @media (max-width:899px){ .v3-stele .v3-notes{display:none!important} } /* Karten-Bühne: auch in schmaleren Fenstern alle vier in einer Reihe, damit nichts aus der Bühne ragt */ @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=karten] .v3-cards{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (min-width:900px) and (max-width:1199px) and (min-height:620px){ .v3-pin[data-pin=karten] .v3-card-body{padding:16px 16px 20px;gap:6px} .v3-pin[data-pin=karten] .v3-card-body strong{font-size:1rem} .v3-pin[data-pin=karten] .v3-card-body span{font-size:.9rem;line-height:1.4} } /* Langer Text rechts beginnt auf Höhe der Überschrift, nicht darüber */ .v3-head--top{align-items:start!important} .v3-head--top .lead{padding-top:.35em} /* ===================================================================== Kapitel 3 Wegweiser (Terminal gegen den Lärm) und die vier Schritte als Essenz ===================================================================== */ .v3-wegweiser .v3-tl-box{overflow:hidden} @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=wegweiser] .v3-pin-in{background:var(--v3-off)} .v3-pin[data-pin=wegweiser] .v3-tl-wb{max-height:none;height:auto;margin:0 auto;width:min(100%,calc((100vh - 420px) * 2.909))} .v3-pin[data-pin=laerm] .v3-tl-wb{width:min(100%,calc((100vh - 420px) * 2.909))} .v3-pin[data-pin=karten] .v3-card-img{height:min(16vw,calc(100vh - 590px))} } .v3-steps4 .v3-card-img{display:flex;align-items:center;justify-content:center} .v3-steps4 .v3-card-img svg{width:100%;height:100%} .v3-no{display:block;font-style:normal;font-family:var(--font-display);font-weight:900;font-size:1.6rem;line-height:1;color:var(--tawny);letter-spacing:-.02em;margin-bottom:2px} .v3-schritte-cta{padding-top:28px;padding-bottom:8px} @media (max-width:899px){ .v3-schritte-cta{padding:24px 5% 0} } /* Klarer Satz direkt unter der Überschrift (statt Text rechts daneben) */ .v3-lead-under{margin:18px 0 0;max-width:36rem} /* So einfach ist es: drei Schritte im Karten-Look */ @media(min-width:900px){.v3-cards.v3-steps3{grid-template-columns:repeat(3,minmax(0,1fr))}} .v3-steps3 .v3-card-img{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9} .v3-steps3 .v3-card-img svg{width:100%;height:100%} .v3 .v3-schritte{padding-bottom:84px!important} .v3-head .v3-lead-under{justify-self:start;margin-left:0;margin-right:auto} /* Kundenleiste näher an den Hero, kleinere Lücken davor und danach */ .v3-kunden{padding-top:28px} .v3-kunden-k{margin-bottom:16px} .v3 [data-screen-label=Statistik]{padding-top:56px!important} /* Köpfe: der Text rechts beginnt auf Höhe der Überschrift, nie darüber, und ist gut lesbar */ @media(min-width:900px){ .v3-head{align-items:start} .v3-head .lead{padding-top:.45em} } .v3-head .lead{font-size:clamp(1.05rem,1.2vw,1.2rem);line-height:1.5} /* sehr lange Texte stehen unter der Überschrift */ .v3-head.v3-head--stack{grid-template-columns:minmax(0,1fr)!important} .v3-head--stack .lead{justify-self:start!important;max-width:46rem;padding-top:0!important;margin-top:18px!important} /* Stele in Ruhe: flach, nur die Vorderseite (flüssigere Videos), beim Drehen wieder räumlich */ .v3-box.v3-rest{transform-style:flat} .v3-box.v3-rest .v3-back,.v3-box.v3-rest .v3-left,.v3-box.v3-rest .v3-right{visibility:hidden} /* So einfach ist es: eingerastet, ruhiger */ @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=schritte] .v3-pin-in{background:var(--v3-off)} .v3-pin[data-pin=schritte] .v3-schritte{padding-bottom:28px!important} .v3-pin[data-pin=schritte] .v3-card-img{aspect-ratio:auto;height:min(15vw,calc(100vh - 560px))} } /* Handy-Punkte an der Stele: Nutzen-Zeile */ .v3-pt-b{margin:8px 0 0;font-family:var(--wb-font);font-size:.95rem;line-height:1.3;color:var(--wb-acc)} /* Einblendungen straffer: kleiner Weg, keine Unschärfe, damit nichts hinter dem Scrollen herschwimmt */ @media(prefers-reduced-motion:no-preference){ html.js body.v3 .reveal{transform:translateY(16px);filter:none;transition:opacity .7s var(--ease-lux),transform .8s var(--ease-lux);transition-delay:var(--rd,0ms)} html.js body.v3 .reveal.in{opacity:1;transform:none} html.js body.v3 .reveal h2.h2{transform:translateY(10px);transition:clip-path .9s var(--ease-lux) calc(var(--rd,0ms) + 40ms),transform .9s var(--ease-lux) calc(var(--rd,0ms) + 40ms)} html.js body.v3 .reveal.in h2.h2{transform:none} } /* sehr schmale Handys: lange Wörter in Überschriften passen in die Zeile statt mitten im Wort zu brechen */ @media(max-width:400px){ .v3 .h2:not(.v3-kontakt .h2):not(.v3-problem .h2), .v3 .of-panel .of-panel-body h2{font-size:min(2.4rem,10vw)} } /* Platzgeber-Vorteile: Spalten dürfen schrumpfen, auf schmalen Handys Zeichnung über dem Text */ .v3 .qualify{grid-template-columns:minmax(0,1fr)} @media(min-width:768px){.v3 .qualify{grid-template-columns:repeat(2,minmax(0,1fr))}} .v3 .qualify .q > p{min-width:0;overflow-wrap:break-word} @media(max-width:479px){.v3 .qualify .q{flex-direction:column;gap:10px}} /* Trennstelle im Hero nur auf schmalen Bildschirmen, am Desktop bleibt das Wort ganz */ @media(min-width:600px){.v3 .h1-sub{-webkit-hyphens:none;hyphens:none}} /* enger Satz mit Umlauten: Ü-Punkte reichen 0,93 em hoch, darum hier .96 statt .84/.86 */ .v3 .h1.v3-uml,.v3 .h2.v3-uml{line-height:.96} /* Handy, Stele: alles muss in den sichtbaren Bereich passen, auch mit eingeblendeter Safari-Leiste (svh). Die Punkte stehen kompakter, die Stele nimmt sich nur die Höhe, die nach den Punkten übrig bleibt (--stageH setzt whiteboard.js nach dem Messen). Vorher wurden die unteren zwei Punkte abgeschnitten. */ @media (max-width:899px){ .v3-stele-sticky{height:100vh;height:100svh} .v3-stage{height:var(--stageH,44vh)} .v3-pts{gap:12px 16px} .v3-stele .v3-pt-t{font-size:1.08rem!important;line-height:1.12!important;padding-bottom:8px} .v3-stele .v3-pt-s{font-size:.84rem!important;line-height:1.28!important;margin-top:6px} .v3-stele .v3-pt-b{font-size:.84rem;line-height:1.28;margin-top:6px} } /* Nutzen-Zeilen der Stelen-Punkte auf dem Handy in Lila wie am Desktop (.v3 p setzte sie sonst schwarz) */ .v3 .v3-pt-b{color:var(--wb-acc)} /* Handy, Stele: die Punkte schreiben sich in ruhigem, festem Tempo ein (Klasse .on setzt whiteboard.js) */ @media (max-width:899px){ .v3-stele .v3-pt{transition:opacity .7s ease,transform .7s ease;transform:translate3d(0,10px,0)} .v3-stele .v3-pt .v3-pt-t span{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s ease .15s} .v3-stele .v3-pt .v3-pt-u path{transition:stroke-dashoffset .8s ease 1.1s} .v3-stele .v3-pt .v3-pt-s{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s ease 1.4s} .v3-stele .v3-pt .v3-pt-b{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s ease 2.3s} .v3-stele .v3-pt.on{opacity:1;transform:none} .v3-stele .v3-pt.on .v3-pt-t span,.v3-stele .v3-pt.on .v3-pt-s,.v3-stele .v3-pt.on .v3-pt-b{clip-path:inset(0 0 0 0)} .v3-stele .v3-pt.on .v3-pt-u path{stroke-dashoffset:0} } /* Kennzahlen: Ziffern gleicher Breite, damit die Zahl beim Hochzählen nicht hin und her rutscht */ .v3 .of-bignum .n{font-variant-numeric:tabular-nums} /* Handy: die großen Szenen über die volle Breite, damit man mehr erkennt (nur Touch-Geräte: ohne Scrollbalken ist 100vw genau die Bildbreite, in schmalen Desktop-Fenstern würde es seitlich überlaufen) */ @media (max-width:899px) and (pointer:coarse){ .v3-problem-img{padding-left:0;padding-right:0} .v3-problem-img svg{max-width:none} .v3-tl-box,.v3-tl-wrap,.v3-wegweiser .v3-tl-box{overflow:visible} /* .v3-wegweiser .v3-tl-box schnitt die Lösung links und rechts ab */ .v3-tl-wb{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important} } /* Vorteile: drei Karten nebeneinander (vorher vier) */ @media(min-width:768px){.v3-cards.v3-cards--3,.v3-pin[data-pin=karten] .v3-cards.v3-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=karten] .v3-cards--3 .v3-card-img{height:min(19vw,calc(100vh - 560px))} } /* Problem und Lösung am Desktop größer: Überschrift und Text über die volle Breite (spart Zeilen), die Zeichnung bekommt den gewonnenen Platz (vorher 100vh - 420px) */ @media (min-width:900px) and (min-height:620px){ .v3-pin[data-pin=laerm] .v3-lead-under,.v3-pin[data-pin=wegweiser] .v3-lead-under{max-width:54rem} .v3-pin[data-pin=laerm] .v3-tl-wb,.v3-pin[data-pin=wegweiser] .v3-tl-wb{max-height:none;height:auto;width:min(100%,calc((100vh - 345px) * 2.909))} } /* Über uns, Hero: hervorgehobenes Wort hell statt dunkellila, auf dem dunklen Foto sonst kaum lesbar */ .v3 .of-hero-photo .hl{color:#ecd5ec!important} /* So einfach ist es: kurze Beruhigung unter dem Knopf (04.10.2026) */ .v3-schritte-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px} .v3-schritte-note{margin:0;font-size:.92rem;color:var(--neutral-dark)} @media (max-width:899px){ .v3-schritte-cta{flex-direction:column;align-items:flex-start} } /* Handy: Vorteile und Schritte mit Rand wie die Standort-Kacheln und das Kontaktformular, statt randlos über die ganze Breite. Die Kartenränder lagen sonst am Bildschirmrand, die Texte nicht in einer Flucht mit den Überschriften (wirkte verschoben, Alex 04.10.2026) */ @media (max-width:899px){ .v3-cards.v3-cards--3,.v3-cards.v3-steps3{margin-left:5%;margin-right:5%;border-left:1px solid var(--v3-line)} } /* iPhone (Safari): Die Bildfläche der Karten (Vorteile, Standort-Kacheln, Schritte) rechnete sich aus aspect-ratio breiter als die Karte und ragte rechts heraus, die ganze Seite zoomte dadurch leicht heraus (Screenshots Alex 04.10.2026; Chrome und Safari am Mac zeigen es nicht). Am Handy darum ohne aspect-ratio: Die Breite ist fest die der Karte, die Höhe kommt aus der viewBox der Zeichnung. overflow:hidden an der Karte fängt jeden Rest ab. */ @media (max-width:899px){ .v3-card{overflow:hidden} .v3-card-img{aspect-ratio:auto!important;width:100%;max-width:100%;min-width:0;min-height:0;flex:none} .v3-card-img svg{width:100%!important;height:auto!important;max-width:100%} } /* Terminal-Seiten: Standortliste und Preisliste anfragen, im Whiteboard-Stil statt des lila Kastens (Alex 04.10.2026: passte nicht mehr in die Sprache, zu viel Text). Links Überschrift und gezeichnetes Bestellformular, rechts das Formular; die Pakete (1, 2 bis 4, ab 5) sind Knöpfe, die man als Knöpfe erkennt. */ .v3-af-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start} @media(min-width:900px){.v3-af-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}} .v3 .v3-af-text .h2{font-size:clamp(2rem,4vw,3.4rem)!important;margin:6px 0 14px} /* !important: gegen die Handy-Regel .v3 .h2:not(…) */ .v3-af-text .lead{max-width:30rem;margin:0} .v3-af-wb{display:block;width:100%;max-width:520px;height:auto;margin:18px 0 0} .v3-af-form{background:#fff;border:1px solid var(--v3-line);padding:28px 26px;display:flex;flex-direction:column;gap:16px} .v3-af-stufen{border:0;margin:0;padding:0;min-width:0} .v3-af-stufen legend{font-family:var(--font-body);font-weight:700;font-size:1.05rem;margin:0 0 12px;padding:0} .v3-af-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .v3-af-chip{position:relative;display:block;cursor:pointer;margin:0} .v3-af-chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .v3-af-chip span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:78px;padding:10px 4px;border:2px solid var(--tawny);border-radius:14px;background:#fff;color:var(--tawny);text-align:center;font-size:.86rem;line-height:1.2;box-shadow:0 4px 0 rgba(100,30,100,.28);transition:background .15s,color .15s,transform .15s,box-shadow .15s} .v3-af-chip b{font-family:var(--font-display);font-weight:900;font-size:clamp(1.1rem,4.6vw,1.45rem);line-height:1;letter-spacing:-.02em;white-space:nowrap} .v3-af-chip:hover span{transform:translateY(-1px);box-shadow:0 5px 0 rgba(100,30,100,.28)} .v3-af-chip input:checked+span{background:var(--tawny);color:#fff;transform:translateY(3px);box-shadow:0 1px 0 rgba(100,30,100,.4)} .v3-af-chip input:focus-visible+span{outline:3px solid rgba(100,30,100,.35);outline-offset:2px} .v3-af-hint{margin:12px 0 0;font-size:.86rem;color:var(--neutral-dark)} .v3-af-form .field{display:flex;flex-direction:column;gap:6px;margin:0} .v3-af-form .field label{font-weight:600;font-size:.86rem;color:#000} .v3-af-form .field input{width:100%;padding:12px 14px;border:1px solid var(--border);font-size:1rem;font-family:var(--font-body);background:#fff;color:#000} .v3-af-form .field input:focus{outline:none;border-color:var(--tawny);box-shadow:0 0 0 3px rgba(100,30,100,.15)} .v3-af-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} @media(min-width:600px){.v3-af-row{grid-template-columns:repeat(2,minmax(0,1fr))}} .v3-af-form .check{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:.82rem;line-height:1.4;color:var(--neutral-dark);cursor:pointer} .v3-af-form .check span{flex:1} .v3-af-form .check a{color:var(--tawny);text-decoration:underline} .v3-af-form .btn{width:100%} .v3-af-note{margin:-4px 0 0;font-size:.8rem;color:var(--neutral-dark);text-align:center} @media (max-width:400px){ .v3-af-chip span{font-size:.8rem;padding:10px 3px} .v3-af-form{padding:24px 18px} } /* Startvideo als schlankes