/* ========================================================================== limey – Stylesheet 1 Schriften 2 Tokens 3 Basis 4 Typografie 5 Buttons 6 Header 7 Hero + Collage 8 Laufband 9 Leistungen + Icons 10 Vorteile 11 Ablauf 12 Kontakt + Formular 13 Footer 14 Rechtstexte 15 Bewegung ========================================================================== */ /* ---------- 1 Schriften (lokal) ---------- */ @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/bricolage-latin.woff2) format("woff2");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} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-latin.woff2) format("woff2");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} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-latin.woff2) format("woff2");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} /* ---------- 2 Tokens ---------- */ :root{ --paper:#F7F7EE; --paper-2:#ECECDD; --card:#FFFFFA; --ink:#2C2F32; --ink-2:rgba(44,47,50,.76); --line:rgba(44,47,50,.12); --line-strong:rgba(44,47,50,.24); --lime:#E9F056; --lila:#C9B8FF; --lila-soft:#EFEAFF; /* zweiter Akzent Lavendel (seit 23.10.2026 statt Peach) */ --on-dark-2:rgba(255,255,255,.76); --hair-dark:rgba(255,255,255,.16); --f-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif; --f-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --wrap:1280px; --gutter:clamp(16px,4vw,40px); --ease:cubic-bezier(.2,.7,.2,1); --header-h:76px; } /* ---------- 3 Basis ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0} ul,ol{padding:0} img,svg{display:block;max-width:100%} a{color:inherit} b,strong{font-weight:700} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px} ::selection{background:var(--lime);color:var(--ink)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600} .skip:focus{top:12px} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(72px,8.5vw,124px)} .i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .nb{white-space:nowrap} /* ---------- 4 Typografie ---------- */ .h1{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,1rem + 5.4vw,6rem);line-height:.98;letter-spacing:-.035em;hyphens:manual} .h2{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,1rem + 3.2vw,4rem);line-height:1;letter-spacing:-.03em;text-wrap:balance} .h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.35rem,1rem + .7vw,1.75rem);line-height:1.12;letter-spacing:-.02em;hyphens:manual;overflow-wrap:anywhere} .lead{font-size:clamp(1.1rem,1rem + .55vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:34em} .intro{font-size:clamp(1.05rem,1rem + .3vw,1.18rem);line-height:1.55;color:var(--ink-2);max-width:34em} .hl{background:linear-gradient(transparent 60%,var(--lime) 60%,var(--lime) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:.04em} .hl-lila{background:linear-gradient(transparent 60%,var(--lila) 60%,var(--lila) 92%,transparent 92%)} .hl-dark{color:var(--lime)} .eyebrow{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-size:.8rem;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;padding:.6em .95em;border:1.5px solid var(--ink);border-radius:999px;background:var(--card)} .eyebrow .dot{width:.65em;height:.65em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 1.5px var(--ink)} .eyebrow--dark{background:transparent;border-color:rgba(255,255,255,.35);color:var(--on-dark-2)} .eyebrow--dark .dot{box-shadow:none} .num{font-family:var(--f-mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--ink-2)} .section-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,72px)} .section-head .h2{margin-top:22px} @media (max-width:1140px){.section-head{align-items:start}.section-head .intro{padding-top:.5em}} @media (max-width:900px){.section-head{grid-template-columns:minmax(0,1fr)}.section-head .intro{padding-top:0}} /* ---------- 5 Buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;font:600 1rem/1 var(--f-body);padding:1em 1.45em;border-radius:999px;border:2px solid var(--ink);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease)} .btn .i{width:1.15em;height:1.15em;stroke-width:2.2} .btn-lime{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--ink)} .btn-ghost{background:transparent;color:var(--ink)} .btn-dark{background:var(--ink);color:var(--paper)} .btn-sm{padding:.8em 1.15em;font-size:.94rem;min-height:44px} .btn-xl{font-size:clamp(1.05rem,1.5vw,1.2rem);padding:1.1em 1.6em} .btn[disabled]{opacity:.7;cursor:progress} @media (hover:hover){ .btn-lime:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .btn-ghost:hover{background:var(--ink);color:var(--paper)} .btn-dark:hover{background:#44484d} } .btn-lime:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} /* ---------- 6 Header ---------- */ .site-header{position:sticky;top:0;z-index:50;background:rgba(247,247,238,.88);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1.5px solid transparent;transition:border-color .2s} .site-header.scrolled{border-color:var(--line-strong)} .bar{display:flex;align-items:center;gap:24px;height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--f-display);font-size:1.45rem;font-weight:600;letter-spacing:-.03em;line-height:1;white-space:nowrap;flex:none;padding-block:10px;margin-block:-10px} .bar .brand{margin-right:auto} .brand .mark{width:34px;height:34px;flex:none} .brand .wm{height:24px;width:auto} .nav ul{display:flex;gap:2px;list-style:none} .nav ul a{display:block;padding:.6em .9em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.98rem;line-height:1.2;transition:background-color .2s} @media (hover:hover){.nav ul a:hover{background:var(--paper-2)}} .nav .nav-cta{display:none} .header-tools{display:flex;align-items:center;gap:12px} .lang{display:flex;padding:2px;border:1.5px solid var(--ink);border-radius:999px;background:var(--card)} .lang a{display:inline-grid;place-items:center;min-width:40px;min-height:36px;padding:0 .4em;font-family:var(--f-mono);font-size:.8rem;font-weight:500;line-height:1;letter-spacing:.04em;text-decoration:none;border-radius:999px;transition:background-color .2s,color .2s} .lang a[aria-current="true"]{background:var(--ink);color:var(--paper)} @media (hover:hover){.lang a:not([aria-current="true"]):hover{background:var(--paper-2)}} .menu-btn{display:none;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--ink);background:var(--card);place-items:center;cursor:pointer} .menu-bars,.menu-bars::before,.menu-bars::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),background-color .2s} .menu-bars{position:relative} .menu-bars::before,.menu-bars::after{content:"";position:absolute;left:0} .menu-bars::before{top:-6px}.menu-bars::after{top:6px} body.nav-open .menu-bars{background:transparent} body.nav-open .menu-bars::before{transform:translateY(6px) rotate(45deg)} body.nav-open .menu-bars::after{transform:translateY(-6px) rotate(-45deg)} @media (max-width:1080px){ .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;max-height:calc(100vh - var(--header-h));overflow:auto;background:var(--paper);border-bottom:2px solid var(--ink);padding:8px var(--gutter) 28px} body.nav-open .nav{display:block} .nav ul{flex-direction:column;gap:0} .nav ul a{font-family:var(--f-display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;padding:.6em 0;border-radius:0;border-bottom:1px solid var(--line-strong)} .nav .nav-cta{display:inline-flex;margin-top:22px} .header-cta{display:none} .header-cta--solo{display:inline-flex} .js .menu-btn{display:grid} .lang a{min-width:44px;min-height:44px} html:not(.js) .bar{flex-wrap:wrap;height:auto;padding-block:12px} html:not(.js) .nav{display:block;position:static;flex-basis:100%;order:9;max-height:none;border-bottom:0;padding:0} html:not(.js) .nav ul{flex-direction:row;overflow:auto;gap:2px} html:not(.js) .nav ul a{font:500 .95rem/1.2 var(--f-body);letter-spacing:0;padding:.5em .8em;border:0;white-space:nowrap} html:not(.js) .nav .nav-cta{display:none} } @media (max-width:420px){.brand .wm{height:21px}.brand .mark{width:30px;height:30px}.bar{gap:10px}.header-tools{gap:8px}.lang a{min-width:44px;padding:0 .2em}} /* ---------- 7 Hero ---------- */ .hero{padding-block:clamp(32px,5.5vw,80px)} .hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,5vw,80px);align-items:center} .hero .h1{margin-block:24px 26px} .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .hero-meta{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none;margin-top:30px;font-size:.95rem;color:var(--ink-2)} .hero-meta li{display:inline-flex;align-items:flex-start;gap:.45em} .hero-meta li .i{margin-top:.22em} .hero-meta .i{width:1.15em;height:1.15em} @media (max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr)}} /* ---------- 8 Laufband ---------- */ .band-wrap{position:relative;overflow:hidden;padding-block:clamp(22px,3vw,40px)} .band{width:106%;margin-left:-3%;background:var(--lime);border-block:2px solid var(--ink);transform:rotate(-2deg)} .band-track{display:flex;width:max-content} .band-item{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,34px);padding-block:clamp(14px,1.6vw,22px);padding-left:clamp(18px,2.4vw,34px);font:700 clamp(1.5rem,3.3vw,2.8rem)/1 var(--f-display);letter-spacing:-.02em;white-space:nowrap} .band-item svg{width:.55em;height:.55em} body.motion-paused body.motion-paused body.motion-paused .band-track,body.motion-paused .ring-spin,body.motion-paused .cta-deco,body.motion-paused .ico *{animation-play-state:paused !important} /* ---------- 9 Leistungen (Kacheln mit animierten Icons) ---------- */ .bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)} .card{grid-column:span 4;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border:2px solid var(--ink);border-radius:26px;background:var(--card);transition:transform .2s var(--ease),box-shadow .2s var(--ease)} @media (hover:hover){.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}} .card--web{grid-column:span 8} .card--auto{grid-column:span 4;background:var(--lime)} .card--host,.card--secure{grid-column:span 6} .card--social{background:var(--lila-soft)} .card-top{display:flex;align-items:center;justify-content:space-between;gap:16px} .card-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:2px solid var(--ink);background:var(--card);flex:none} .card-icon .ico{width:38px;height:38px} .card--auto .card-icon{background:var(--card)} .card--auto .num{color:var(--ink)} .card .h3{margin-top:clamp(22px,3vw,40px)} .card p{margin-top:12px;color:var(--ink-2);max-width:46ch} .card--auto p{color:var(--ink)} .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:22px 0 0;margin-top:auto} .tags li{font:500 .8rem/1 var(--f-mono);padding:.6em .85em;border-radius:999px;border:1.5px solid var(--line-strong);white-space:nowrap} .card--auto .tags li{border-color:var(--ink)} .midcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;margin-top:clamp(28px,4vw,48px);padding:clamp(22px,3vw,32px) clamp(24px,3.4vw,40px);border:2px solid var(--ink);border-radius:26px;background:var(--card)} .midcta p{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);font-weight:600;max-width:34em} @media (max-width:1024px){.card,.card--web,.card--auto,.card--host,.card--secure{grid-column:span 6}} @media (max-width:680px){.card,.card--web,.card--auto,.card--host,.card--secure{grid-column:1/-1}} /* Icons (24er-Raster), gemeinsame Stile */ .ico{width:64px;height:64px;overflow:visible;color:var(--ink)} .ico *{transform-box:fill-box;transform-origin:center} .ico .vb{transform-box:view-box} .ico .st{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .ico .lime{fill:var(--lime)} .ico .lila{fill:var(--lila)} .ico .surf{fill:var(--card)} .ico .inkf{fill:var(--ink)} .ico .soft{fill:rgba(44,47,50,.2)} .ico .dotf{fill:rgba(44,47,50,.45)} .ico .onlime{fill:var(--ink)} .ico .onlime-st{stroke:var(--ink)} .ico .onlime-t{fill:var(--ink);font-family:var(--f-display);font-weight:800;font-size:7px} .ico .dot{fill:var(--lime)} .ico .ring-a{fill:none;stroke:currentColor;stroke-width:1;opacity:0} .ico .loop{stroke-dasharray:1.5 2.5;opacity:.4} .card--social .ico .surf{fill:var(--card)} /* Ruhezustände = Endzustände */ .ico .a-detour{opacity:0} .ico .a-radar{transform-origin:12px 12px} .ico .a-goal{transform-origin:18px 6px} .ico .a-bubble{transform-origin:14px 9.5px} .ico .a-seal{transform-origin:17.5px 17px} .ico .a-lang{transform-origin:8px 19px} .ico .a-runner{offset-path:path("M6 18 18 6");offset-distance:100%;opacity:0} .ico .a-flow{offset-path:path("M7 6H17a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z");offset-distance:100%;opacity:1} .ico .a-en,.ico .a-hu{opacity:0} .ico .s-bar1,.ico .s-bar2{transform-origin:left center} .ico .s-gear1{transform-origin:9.5px 13.5px} .ico .s-gear2{transform-origin:17px 7.5px} .ico .s-shackle{transform-origin:12px 9px} .ico .s-sw{transform-origin:12px 16.5px} .ico .s-sw1{transform:rotate(-18deg)}.ico .s-sw3{transform:rotate(18deg)} /* ---------- 10 Vorteile (dunkle Bühne) ---------- */ .board{position:relative;overflow:hidden;margin-inline:clamp(8px,1.4vw,20px);border:2px solid var(--ink);border-radius:clamp(26px,3.2vw,44px);background:var(--card);box-shadow:8px 8px 0 var(--ink)} .board::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(44,47,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(44,47,50,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 70% 30%,#000 20%,transparent 75%)} .board::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 12%,rgba(233,240,86,.35),transparent 40%),radial-gradient(circle at 8% 90%,rgba(253,188,180,.35),transparent 36%);pointer-events:none} .board-inner{position:relative;z-index:1} .benefits{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--line-strong)} .benefit{padding:clamp(28px,3.2vw,44px) clamp(20px,2.6vw,36px);border-bottom:1.5px solid var(--line-strong);transition:background-color .3s} .benefit:not(:nth-child(3n)){border-right:1.5px solid var(--line-strong)} @media (hover:hover){.benefit:hover{background:rgba(233,240,86,.18)}} .benefit .h3{margin-top:clamp(22px,2.4vw,32px)} .benefit p{margin-top:10px;color:var(--ink-2);font-size:1rem} @media (max-width:1024px) and (min-width:641px){ .benefits{grid-template-columns:repeat(2,minmax(0,1fr))} .benefit:not(:nth-child(3n)){border-right:0} .benefit:nth-child(odd){border-right:1.5px solid var(--line-strong)} } @media (max-width:640px){ .benefits{grid-template-columns:minmax(0,1fr)} .benefit{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding:24px 4px} .benefit:not(:nth-child(3n)){border-right:0} .benefit .ico{width:48px;height:48px} .benefit .h3{margin-top:0;padding-top:4px} } /* ---------- 11 Ablauf ---------- */ .steps{--gap:clamp(16px,2vw,28px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px var(--gap);list-style:none} .step{position:relative} .step:not(:last-child)::after{content:"";position:absolute;z-index:0;left:34px;top:33px;width:calc(100% + var(--gap));border-top:2px dashed var(--ink)} .step-n{position:relative;z-index:1;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:800 1.6rem/1 var(--f-display);transition:transform .25s var(--ease)} .step:last-child .step-n{background:var(--lila)} @media (hover:hover){.step:hover .step-n{transform:translate(-2px,-2px) rotate(-6deg)}} .step .h3{margin-top:26px} .step p{margin-top:10px;color:var(--ink-2);padding-right:8px} @media (max-width:900px){ .steps{grid-template-columns:minmax(0,1fr);gap:30px} .step{display:grid;grid-template-columns:68px minmax(0,1fr);column-gap:20px} .step-n{grid-row:1 / span 2} .step .h3{margin-top:calc((68px - 1.5rem * 1.12) / 2)} .step p{grid-column:2} .step:not(:last-child)::after{left:33px;top:34px;width:0;height:calc(100% + 30px);border-top:0;border-left:2px dashed var(--ink)} } /* ---------- 12 Kontakt + Formular ---------- */ .contact{padding-bottom:clamp(40px,6vw,80px)} .cta{position:relative;padding:clamp(28px,5vw,72px);background:var(--lime);border:2px solid var(--ink);border-radius:clamp(28px,3.4vw,48px);box-shadow:10px 10px 0 var(--ink)} .cta-deco-wrap{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none} .cta-deco{position:absolute;right:-70px;top:-90px;width:clamp(220px,30vw,420px);opacity:.14} .sticker{position:absolute;right:clamp(16px,4vw,48px);top:-22px;z-index:2;display:inline-block;padding:.7em 1.1em;font:600 .9rem/1.2 var(--f-body);background:var(--lila);color:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:4px 4px 0 var(--ink);transform:rotate(3deg)} .cta-head{position:relative;z-index:1;max-width:40em} .cta .h2{margin-top:22px} .cta-text{margin-top:22px;font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:34em} .form,.sent{position:relative;z-index:1;margin-top:clamp(28px,4vw,44px);padding:clamp(22px,3vw,36px);background:var(--card);border:2px solid var(--ink);border-radius:26px} .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0} .f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px} .f-wide{grid-column:1/-1} .f-field{display:flex;flex-direction:column;gap:6px} .f-field label,.f-topics legend{font-weight:700;font-size:.98rem} .f-field small,.f-topics small{font-weight:400;color:var(--ink-2)} .f-field b{color:var(--ink)} .form input:not([type=checkbox]),.form textarea{width:100%;font:inherit;color:var(--ink);padding:.75em .95em;border:2px solid var(--ink);border-radius:12px;background:var(--paper);transition:background-color .2s,box-shadow .2s} .form textarea{min-height:150px;resize:vertical} .form input:not([type=checkbox]):focus-visible,.form textarea:focus-visible{outline:3px solid var(--ink);outline-offset:2px;background:var(--card)} .form .invalid{background:#FDE1DE;border-color:#B3261E} .f-topics{border:0;padding:0;margin-top:20px} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .chip{position:relative} .chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0} .chip span{display:inline-flex;align-items:center;min-height:44px;padding:.55em 1em;border:2px solid var(--ink);border-radius:999px;background:var(--card);font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color .15s,box-shadow .15s,transform .15s} @media (hover:hover){.chip span:hover{background:var(--paper-2)}} .chip input:checked+span{background:var(--lila);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)} .chip input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px} .form .f-field:has(textarea){margin-top:20px} .f-privacy{margin-top:18px;font-size:.92rem;color:var(--ink-2)} .f-privacy a{text-underline-offset:3px} .f-req{display:inline-block;margin-left:.6em;white-space:nowrap} .f-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:20px} .f-fallback{font-size:.95rem;color:var(--ink-2)} .f-fallback a{text-underline-offset:3px;overflow-wrap:anywhere} .f-status{margin-top:14px;font-weight:600;min-height:1.6em} .f-status:not(:empty){display:inline-block;padding:.5em .9em;border-radius:12px;background:var(--lila);border:2px solid var(--ink)} .sent{display:none;font-weight:600;font-size:1.1rem} .sent:target,.sent.show{display:block} .sent--error{background:#FDE1DE} @media (max-width:640px){.f-grid{grid-template-columns:minmax(0,1fr)}.f-actions .btn{width:100%}} @media (max-width:900px){.cta{box-shadow:6px 6px 0 var(--ink)}} @media (max-width:480px){.sticker{position:static;display:inline-block;margin-bottom:18px;transform:none}} /* ---------- 13 Footer ---------- */ .site-footer{padding-top:clamp(72px,9vw,120px);overflow:hidden} .footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.95fr) repeat(3,minmax(0,.6fr));gap:32px 24px;padding-bottom:44px;border-bottom:1.5px solid var(--line-strong)} .footer-brand p{margin-top:16px;max-width:32ch;color:var(--ink-2)} .f-title{font:500 .8rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)} .f-list{list-style:none;padding:0;margin-top:12px;display:grid;gap:2px} .f-list a{display:inline-block;min-width:44px;padding:.6em 0;text-decoration:none;overflow-wrap:anywhere} @media (hover:hover){.f-list a:hover{text-decoration:underline;text-underline-offset:3px}} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px;font-size:.9rem;color:var(--ink-2)} .footer-word{margin-bottom:-.14em;text-align:center;white-space:nowrap;font:800 clamp(3.4rem,14.6vw,15rem)/.8 var(--f-display);letter-spacing:-.05em;user-select:none} .footer-word b{margin-left:.16em;font-weight:800;color:var(--lime);text-shadow:.03em .03em 0 var(--ink)} @media (max-width:960px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}} @media (max-width:480px){.footer-grid{grid-template-columns:minmax(0,1fr)}} /* ---------- 14 Rechtstexte ---------- */ .legal{max-width:760px} .legal .h1{font-size:clamp(2rem,1rem + 3vw,3.8rem);margin-top:22px;overflow-wrap:anywhere} .legal .lead{margin-top:24px} .legal h2{margin-top:44px;font:700 1.4rem/1.2 var(--f-display);letter-spacing:-.015em} .legal p,.legal ul{margin-top:12px;color:var(--ink-2)} .legal ul{padding-left:1.2em} .legal li+li{margin-top:6px} .legal a{text-underline-offset:3px} .legal .todo{background:#FFE08A;color:var(--ink);padding:.05em .3em;border-radius:4px} .legal .meta{margin-top:48px;font:500 .85rem/1.4 var(--f-mono);color:var(--ink-2)} .legal-back{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:600;text-decoration:none} .legal-back .i{width:1.1em;height:1.1em;transform:rotate(180deg)} /* ---------- 15 Bewegung ---------- */ @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes riseR{from{opacity:0;transform:translateY(16px) rotate(var(--r,0deg))}to{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}} @keyframes lift{from{transform:translateY(.35em)}to{transform:none}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes spinR{to{transform:rotate(-360deg)}} @keyframes marquee{to{transform:translateX(-50%)}} @keyframes pop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes draw{to{stroke-dashoffset:0}} @keyframes fadeout{from{opacity:1}to{opacity:0}} @keyframes blink{0%,100%{opacity:1}50%{opacity:.25}} @keyframes riseS{0%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes travelIco{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}} @keyframes travelLoop{0%{offset-distance:0%;opacity:0}6%{opacity:1}100%{offset-distance:100%;opacity:1}} @keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}} @keyframes stamp{0%{transform:scale(1.9);opacity:0}70%{transform:scale(.94);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes cycDE{0%,30%{opacity:1}34%,96%{opacity:0}100%{opacity:1}} @keyframes cycEN{0%,30%{opacity:0}34%,62%{opacity:1}66%,100%{opacity:0}} @keyframes cycHU{0%,62%{opacity:0}66%,96%{opacity:1}100%{opacity:0}} @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes slideIn{from{transform:translateX(-4px);opacity:0}to{transform:none;opacity:1}} @keyframes gearIn{from{transform:rotate(-90deg)}to{transform:rotate(0)}} @keyframes gearIn2{from{transform:rotate(90deg)}to{transform:rotate(0)}} @keyframes shackle{0%{transform:translateY(-3.2px)}70%{transform:translateY(.4px)}100%{transform:none}} @keyframes fan1{from{transform:rotate(0)}to{transform:rotate(-18deg)}} @keyframes fan3{from{transform:rotate(0)}to{transform:rotate(18deg)}} @keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(1)}} @keyframes twinkle{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.35);opacity:1}} @keyframes vbar{from{transform:scaleX(0)}to{transform:scaleX(1)}} .js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:calc(var(--i,0) * 70ms)} .js [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:no-preference){ .js .hero .h1{animation:lift .6s var(--ease) both} .js .band-track{animation:marquee 42s linear infinite} .js .cta-deco{animation:spin 60s linear infinite} /* Leistungs-Icons beim Sichtbarwerden (.play), Replay per Hover/Tipp */ .card.play .s-bar1{animation:growX .5s var(--ease) .1s both} .card.play .s-bar2{animation:growX .5s var(--ease) .25s both} .card.play .s-img{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) .45s both} .card.play .s-btn{animation:slideIn .45s var(--ease) .6s both} .card.play .s-gear1{animation:gearIn 1.2s var(--ease) both} .card.play .s-gear2{animation:gearIn2 1.2s var(--ease) both} @media (hover:hover){.card--auto:hover .s-gear1{animation:spin 8s linear infinite}.card--auto:hover .s-gear2{animation:spinR 5.3s linear infinite}} .card.play .s-srv{animation:riseS .4s var(--ease) both} .card.play .s-srv2{animation-delay:.12s}.card.play .s-srv3{animation-delay:.24s} .card.play .s-led{animation:blink 1.2s ease-in-out .5s 3} .card.play .s-led2{animation-delay:.7s}.card.play .s-led3{animation-delay:.9s} .card.play .s-shackle{animation:shackle .7s cubic-bezier(.3,1.3,.5,1) .2s both} .card.play .a-radar{animation:ring 2s ease-out 1s 2} .card.play .s-spark{stroke-dasharray:12;stroke-dashoffset:12;animation:draw .6s ease-out .2s both} .card.play .s-peak{animation:pop .45s cubic-bezier(.2,.9,.3,1.3) .75s both} .card.play .s-sw1{animation:fan1 .7s var(--ease) .1s both} .card.play .s-sw3{animation:fan3 .7s var(--ease) .1s both} .card.play .a-spark{animation:twinkle 1.6s ease-in-out .8s 2} .card.play .s-heart{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) .2s both,beat 1.2s ease-in-out .9s 2} /* Vorteile-Icons beim Sichtbarwerden (.in), Replay per Hover/Tipp; Schleifen enden von selbst */ .benefit.in .a-bubble{animation:pop .6s cubic-bezier(.2,.9,.3,1.3) .35s both} .benefit.in .a-dot1,.benefit.in .a-dot2,.benefit.in .a-dot3{animation:blink 1.4s ease-in-out 1s 3} .benefit.in .a-dot2{animation-delay:1.2s}.benefit.in .a-dot3{animation-delay:1.4s} .benefit.in .a-detour{opacity:1;stroke-dasharray:2 2.6;animation:fadeout .5s ease .6s both} .benefit.in .a-direct{stroke-dasharray:17;stroke-dashoffset:17;animation:draw .5s ease-out .7s both} .benefit.in .a-runner{animation:travelIco 1.6s ease-in-out 1.2s 2} .benefit.in .a-goal{animation:ring 1.6s ease-out 2.4s 2} .benefit.in .a-shield{animation:riseS .55s var(--ease) .1s both} .benefit.in .a-check{stroke-dasharray:12;stroke-dashoffset:12;animation:draw .45s ease-out .7s both} .benefit.in .a-radar{animation:ring 2.2s ease-out 1.3s 2} .benefit.in .a-n1,.benefit.in .a-n2,.benefit.in .a-n3,.benefit.in .a-n4{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) .1s both} .benefit.in .a-n2{animation-delay:.25s}.benefit.in .a-n3{animation-delay:.4s}.benefit.in .a-n4{animation-delay:.55s} .benefit.in .a-flow{animation:travelLoop 3s linear 1s 1 forwards} .benefit.in .a-doc{animation:riseS .5s ease-out .05s both} .benefit.in .a-line{animation:riseS .4s ease-out .35s both} .benefit.in .a-line2{animation-delay:.45s}.benefit.in .a-line3{animation-delay:.55s} .benefit.in .a-seal{animation:stamp .5s cubic-bezier(.3,1,.4,1) .9s both} .benefit.in .a-lang{animation:pop .55s cubic-bezier(.2,.9,.3,1.3) .1s both} .benefit.in .a-de{animation:cycDE 4.5s linear .6s 1 both}.benefit.in .a-en{animation:cycEN 4.5s linear .6s 1 both}.benefit.in .a-hu{animation:cycHU 4.5s linear .6s 1 both} /* Ablauf-Kreise ploppen nacheinander */ .js .step.in .step-n{animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both} } @media print{.js [data-reveal]{opacity:1 !important;transform:none !important}.band-wrap{display:none}} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none !important;transition:none !important} .js [data-reveal]{opacity:1;transform:none} html{scroll-behavior:auto} } /* ========================================================================== 18 Überarbeitung 23.09.2026 – Logo, Leistungen, CTA, Lime-Vorteile, Ablauf, Footer, Bewegung ========================================================================== */ .brand .wm-img{display:block;height:30px;width:auto} @media (max-width:420px){.brand .wm-img{height:25px}} /* Hero: Zeilen steigen nacheinander auf, Marker zieht sich durch */ .h1{font-size:clamp(2.55rem,1rem + 4.1vw,4.7rem);text-wrap:balance} .h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .h1 .line>span{display:inline-block} .hl{background-repeat:no-repeat;background-size:100% 100%} @keyframes lineUp{from{transform:translateY(105%)}to{transform:none}} @keyframes markDraw{from{background-size:0% 100%}to{background-size:100% 100%}} .on-lime .hl{background-image:linear-gradient(transparent 60%,var(--card) 60%,var(--card) 92%,transparent 92%)} /* Leistungen: große Icons, keine Nummern, Stichpunkte einzeilig */ .card{position:relative;overflow:hidden} .card-body{display:flex;flex-direction:column;height:100%} .card-icon{display:grid;place-items:center;width:112px;height:112px;border-radius:30px;border:2px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink);transition:transform .35s var(--ease),box-shadow .35s var(--ease)} .card-icon .ico{width:74px;height:74px} .card--auto .card-icon{background:var(--card);border-color:var(--ink)} .card .h3{margin-top:28px} .card--web{display:grid;grid-template-columns:minmax(0,1fr);gap:28px} .card--web:has(.card-photo){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)} .card-photo{width:100%;height:100%;min-height:260px;max-height:420px;object-fit:cover;border-radius:20px;border:2px solid var(--ink)} .tags{flex-wrap:wrap;gap:6px 8px} .tags li{font:600 .85rem/1 var(--f-body);letter-spacing:0;padding:.55em .8em;background:var(--card)} .card--auto .tags li{background:transparent;border-color:var(--ink);color:var(--ink)} .card--social .tags li{background:transparent} @media (hover:hover){ .card:hover .card-icon{transform:rotate(-6deg) scale(1.06);box-shadow:8px 8px 0 var(--ink)} } @media (max-width:680px){.card-icon{width:92px;height:92px;border-radius:24px}.card-icon .ico{width:60px;height:60px}.card--web:has(.card-photo){grid-template-columns:minmax(0,1fr)}} /* „Unsicher, was du brauchst?" – kompakt, hervorgehoben */ .midcta{position:relative;display:block;max-width:760px;margin:clamp(56px,7vw,96px) auto 0;padding:clamp(32px,4vw,52px) clamp(24px,4vw,56px);text-align:center;border:2px solid var(--ink);border-radius:32px;background:var(--card);box-shadow:12px 12px 0 var(--lime),12px 12px 0 2px var(--ink)} .mid-title{font:800 clamp(1.9rem,1rem + 2.2vw,2.9rem)/1.02 var(--f-display);letter-spacing:-.03em} .midcta p{margin:16px auto 0;max-width:34em;font-size:clamp(1.05rem,1rem + .3vw,1.2rem);font-weight:500;color:var(--ink-2)} .midcta .btn{margin-top:28px} .mid-sticker{position:absolute;left:-14px;top:-18px;padding:.55em 1em;font:600 .85rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;background:var(--lime);border:2px solid var(--ink);border-radius:999px;transform:rotate(-8deg)} @media (max-width:600px){.midcta{box-shadow:7px 7px 0 var(--lime),7px 7px 0 2px var(--ink)}.mid-sticker{left:12px}} /* Vorteile: Lime-Fläche, offene Anordnung ohne Kästen */ .lime-zone{position:relative;background:var(--lime);clip-path:polygon(0 clamp(20px,3vw,48px),100% 0,100% calc(100% - clamp(20px,3vw,48px)),0 100%);padding-block:clamp(110px,12vw,170px)} .lime-zone .intro{color:var(--ink)} .lime-zone .eyebrow{background:var(--card)} .ben-layout{display:grid;grid-template-columns:minmax(0,1fr)} .ben-layout.has-photo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:start} .ben-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:28px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);position:sticky;top:110px;align-self:start} .lime-zone .benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(28px,4vw,64px);border:0} .ben-layout.has-photo .benefits{grid-template-columns:repeat(2,minmax(0,1fr))} .lime-zone .benefit{padding:0;border:0 !important;background:none !important} .lime-zone .benefit .h3{margin-top:20px;font-size:clamp(1.4rem,1rem + .8vw,1.8rem)} .lime-zone .benefit p{color:var(--ink);font-size:1.02rem} .lime-zone .ico{width:76px;height:76px;color:var(--ink);transition:transform .35s var(--ease)} .lime-zone .ico .lime{fill:var(--card)} .lime-zone .ico .surf{fill:var(--lime)} .lime-zone .ico .dot{fill:var(--ink)} @media (hover:hover){.lime-zone .benefit:hover .ico{transform:translateY(-4px) rotate(-4deg)}} @media (max-width:1024px){.lime-zone .benefits,.ben-layout.has-photo .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.ben-layout.has-photo{grid-template-columns:minmax(0,1fr)}.ben-photo{position:static;aspect-ratio:16/10}} @media (max-width:640px){ .lime-zone .benefits,.ben-layout.has-photo .benefits{grid-template-columns:minmax(0,1fr);gap:40px} .lime-zone .benefit{display:block;padding:0} .lime-zone .benefit .ico{width:64px;height:64px} .lime-zone .benefit .h3{margin-top:16px;padding-top:0} } /* Ablauf: Schritte zentriert, Linie von Kreismitte zu Kreismitte */ .step{display:flex;flex-direction:column;align-items:center;text-align:center} .step:not(:last-child)::after{left:calc(50% + 42px);width:calc(100% + var(--gap) - 84px)} .step p{padding-right:0;max-width:30ch} .step .h3{margin-top:24px} @media (max-width:900px){ .steps{grid-template-columns:minmax(0,1fr);gap:0} .step{display:flex;padding-bottom:48px} .step-n{grid-row:auto} .step .h3{margin-top:20px} .step p{grid-column:auto} .step:not(:last-child)::after,.step:nth-child(3n):not(:last-child)::after{left:50%;top:80px;bottom:8px;height:auto;width:0;border-top:0;border-left:2px dashed var(--ink)} .step:not(:last-child) p{padding-bottom:0;background:var(--paper);position:relative;z-index:1} .step:not(:last-child) .h3{background:var(--paper);position:relative;z-index:1;padding-inline:8px} } /* Kontakt: Marker auf Lime */ .cta .h2 .hl{background-image:linear-gradient(transparent 60%,var(--card) 60%,var(--card) 92%,transparent 92%)} /* Footer: Wortmarke einfarbig und vollständig sichtbar */ .footer-word{margin:0 auto;padding-block:8px clamp(24px,3vw,40px);text-align:center;font:inherit;white-space:normal;user-select:none} .footer-word img{display:block;width:min(100%,1100px);height:auto;margin:0 auto} .footer-word b{display:none} /* Bewegung */ @media (prefers-reduced-motion:no-preference){ .js .hero .h1{animation:none} .js .hero .h1 .line>span{animation:lineUp .8s var(--ease) both} .js .hero .h1 .line:nth-child(2)>span{animation-delay:.1s} .js .hero .h1 .line:nth-child(3)>span{animation-delay:.2s} .js .hero .hl{animation:markDraw .8s var(--ease) .7s both} .js .section-head .hl,.js .cta .hl{background-size:0% 100%;transition:background-size .9s var(--ease) .35s} .js .section-head.in .hl,.js .cta.in .hl{background-size:100% 100%} .js .mid-sticker{animation:wiggle 3.2s ease-in-out 1.5s 2} .js .step.in::after{animation:dashIn .9s var(--ease) .3s both} .js .card[data-reveal]{transform:translateY(24px) scale(.98)} .js .card[data-reveal].in{transform:none} .js .eyebrow .dot{animation:dotPulse 2.4s ease-in-out 3} } @keyframes wiggle{0%,100%{transform:rotate(-8deg)}25%{transform:rotate(-2deg) scale(1.05)}50%{transform:rotate(-11deg)}75%{transform:rotate(-6deg)}} @keyframes dashIn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes dotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}} @media (max-width:900px){@keyframes dashIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}} @media (hover:hover){.btn-dark:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--lime),5px 5px 0 2px var(--ink)}} /* Bilder */ .card-photo{transition:transform .6s var(--ease)} .card--web{overflow:hidden} @media (hover:hover){.card--web:hover .card-photo{transform:scale(1.03)}} /* ========================================================================== 19 Runde 23.09.2026 nachmittags ========================================================================== */ /* Hero-Headline: drei kurze Wörter, möglichst eine bis zwei Zeilen */ .hero .h1{font-size:clamp(2.8rem,1rem + 5.2vw,5.6rem)} .hero .h1 .line{display:inline-block;margin-right:.22em;vertical-align:top} /* Leistungen: dezentes Hintergrundbild */ .svc{position:relative;isolation:isolate} .svc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)} /* Karten: Icon frei oben rechts, Text rückt nach oben */ .card{display:flex;flex-direction:column} .card-body{display:block;flex:1} .card-body::after{content:"";display:block;clear:both} .card-icon{float:right;display:block;width:auto;height:auto;margin:-6px -6px 10px 18px;border:0;border-radius:0;background:none !important;box-shadow:none !important} .card-icon .ico{width:108px;height:108px} .card .h3{margin-top:4px} .card p{margin-top:12px} .card--host{background:#F5F5F3} @media (hover:hover){.card:hover .card-icon{transform:rotate(-6deg) scale(1.06);box-shadow:none}} @media (max-width:680px){.card-icon .ico{width:84px;height:84px}} /* Stichpunkte: dezent, Lime */ .tags{gap:6px;padding-top:20px} .tags li{font:600 .8rem/1 var(--f-body);padding:.5em .8em;border:0;border-radius:999px;background:rgba(233,240,86,.55);color:var(--ink)} .card--auto .tags li{background:rgba(255,255,250,.7);border:0} .card--social .tags li{background:rgba(233,240,86,.6)} /* „Unsicher, was du brauchst?" – offene Zeile statt Kachel */ .midcta{display:none} .ask{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(20px,3vw,44px);margin-top:clamp(64px,8vw,110px);padding-block:clamp(28px,3.4vw,40px);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)} .ask-q{display:grid;place-items:center;width:clamp(72px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--lime);border:2px solid var(--ink);font:800 clamp(2.4rem,1rem + 3vw,3.6rem)/1 var(--f-display);transform:rotate(-8deg)} .ask-title{font:800 clamp(1.7rem,1rem + 2vw,2.7rem)/1.02 var(--f-display);letter-spacing:-.03em} .ask-copy p{margin-top:10px;max-width:40em;color:var(--ink-2);font-size:clamp(1rem,1rem + .2vw,1.12rem)} .ask-link{display:inline-flex;align-items:center;gap:14px;font:700 clamp(1.05rem,1rem + .4vw,1.3rem)/1 var(--f-display);text-decoration:none;white-space:nowrap} .ask-link span:first-child{background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/100% .35em;padding-bottom:2px;transition:background-size .3s var(--ease)} .ask-arrow{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .3s var(--ease),background-color .3s} .ask-arrow .i{width:22px;height:22px;stroke-width:2.2} @media (hover:hover){.ask-link:hover span:first-child{background-size:100% 100%}.ask-link:hover .ask-arrow{transform:translateX(6px) rotate(-10deg);background:var(--lime);color:var(--ink)}} @media (prefers-reduced-motion:no-preference){.js .ask.in .ask-q{animation:askPop .8s cubic-bezier(.2,.9,.3,1.3) .2s both}} @keyframes askPop{0%{transform:rotate(-40deg) scale(.4);opacity:0}100%{transform:rotate(-8deg) scale(1);opacity:1}} @media (max-width:760px){.ask{grid-template-columns:auto minmax(0,1fr)}.ask-link{grid-column:1/-1;justify-self:start}} /* Vorteile: breites Bild statt Spalte, drei luftige Spalten */ .ben-banner{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 60%;border-radius:28px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--ink);margin-bottom:clamp(48px,6vw,88px)} .lime-zone .benefits{grid-template-columns:repeat(3,minmax(0,1fr))} .lime-zone .benefit{padding-top:24px !important;border-top:2px solid var(--ink) !important} @media (max-width:1024px){.lime-zone .benefits{grid-template-columns:repeat(2,minmax(0,1fr))}.ben-banner{aspect-ratio:16/9}} @media (max-width:640px){.lime-zone .benefits{grid-template-columns:minmax(0,1fr)}.ben-banner{aspect-ratio:4/3;box-shadow:6px 6px 0 var(--ink)}} /* Ablauf: Kopf zentriert untereinander, Bild 2:1 */ .head-center{display:flex;flex-direction:column;align-items:center;text-align:center} .head-center .h2{margin-top:22px} .head-center .intro{margin-top:18px;padding-top:0 !important;max-width:36em} .proc-photo{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;margin-top:clamp(56px,7vw,96px);border-radius:28px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--lime),10px 10px 0 2px var(--ink)} @media (max-width:640px){.proc-photo{box-shadow:6px 6px 0 var(--lime),6px 6px 0 2px var(--ink)}} /* Formular: kompakte Checkboxen */ .checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 18px;margin-top:10px} .check{display:flex;align-items:center;gap:10px;min-height:36px;font-size:.95rem;font-weight:600;cursor:pointer} .check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:2px solid var(--ink);border-radius:5px;background:var(--card);display:grid;place-items:center;cursor:pointer;transition:background-color .15s} .check input::after{content:"";width:10px;height:6px;border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .15s} .check input:checked{background:var(--lime)} .check input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)} .check input:focus-visible{outline:3px solid var(--ink);outline-offset:2px} @media (max-width:900px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.checks{grid-template-columns:minmax(0,1fr)}} /* Footer ohne Riesenschriftzug */ .site-footer{padding-bottom:12px} /* Korrekturen */ .hero .h1{font-size:clamp(2.6rem,1rem + 3.6vw,4.4rem)} .card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .card-head .h3{margin-top:6px;flex:1;min-width:0} .card-icon{float:none;flex:none;margin:-8px -8px 0 0} .card-icon .ico{width:96px;height:96px} .card p{margin-top:14px} @media (max-width:680px){.card-icon .ico{width:72px;height:72px}} .head-center{gap:0} .head-center .h2{margin-top:18px} /* ========================================================================== 20 Runde 3 (23.09.2026 abends): 1300 px, CTA-Stil, Claims, Rail, Kacheln, Hintergrund ========================================================================== */ .wrap{max-width:calc(1300px + 2 * var(--gutter))} .hero{overflow-x:clip} /* CTA überall im Stil „Kurz schreiben" */ .go{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0;margin:0;border:0;background:none;color:var(--ink);font:700 clamp(1.05rem,1rem + .35vw,1.22rem)/1 var(--f-display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none} .go-t{padding:3px 2px;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/100% .38em;transition:background-size .35s var(--ease)} .go-c{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--paper);transition:transform .35s var(--ease),background-color .3s,color .3s,box-shadow .3s} .go-c .i{width:22px;height:22px;stroke-width:2.2} .go--ghost .go-t{background-size:0% .38em} .go--ghost .go-c{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)} .go--sm{gap:10px;min-height:44px;font-size:1rem} .go--sm .go-c{width:42px;height:42px} .go--sm .go-c .i{width:18px;height:18px} .go:focus-visible{outline:3px solid var(--ink);outline-offset:5px;border-radius:999px} .go[disabled]{opacity:.6;cursor:progress} @media (hover:hover){ .go:hover .go-t{background-size:100% 100%} .go:hover .go-c{transform:translateX(6px) rotate(-10deg);background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)} .go--ghost:hover .go-c{transform:translateY(4px)} } .actions{align-items:center;gap:18px 34px} .ask .ask-go{grid-column:auto} @media (max-width:760px){.ask .ask-go{grid-column:1/-1;justify-self:start}} /* Kicker: Mini-Limette + Name + Claim-Sticker statt Pille */ .eyebrow{display:none} .kick{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px} .kick-name{display:inline-flex;align-items:center;gap:.65em;font:500 .8rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .kick-slice{width:24px;height:24px;flex:none} .claim{display:inline-block;padding:.5em .85em .55em;font:700 1rem/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap;background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-3deg);transition:transform .3s var(--ease)} .lime-zone .claim,.on-lime .claim{background:var(--card)} .section:nth-of-type(even) .claim{transform:rotate(2.5deg)} @media (hover:hover){.claim:hover{transform:rotate(0deg) scale(1.06)}} .section-head .h2,.hero .h1{margin-top:22px} /* Schwebende Sektions-Leiste links */ .rail{display:none} @media (min-width:1440px){ .rail{position:fixed;left:22px;top:50%;z-index:40;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateY(-50%);pointer-events:none} .rail-slice{width:36px;height:36px;transform:rotate(var(--rot,0deg))} .rail-num{font:700 .8rem/1 var(--f-mono);letter-spacing:.06em} .rail-sep{width:2px;height:42px;border-radius:2px;background:var(--ink);opacity:.3;transform-origin:top;transition:transform .5s var(--ease)} .rail-label{writing-mode:vertical-rl;transform:rotate(180deg);font:600 .8rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;transition:opacity .25s var(--ease),transform .35s var(--ease)} .rail.swap .rail-label{opacity:0;transform:rotate(180deg) translateY(-14px)} .rail.swap .rail-sep{transform:scaleY(.3)} } /* Leistungen: lebendiger Hintergrund */ .svc{position:relative;isolation:isolate;overflow:clip;background-color:var(--paper);background-image:radial-gradient(rgba(44,47,50,.14) 1.2px,transparent 1.5px);background-size:24px 24px} .svc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(560px circle at var(--mx,78%) var(--my,18%),rgba(233,240,86,.6),transparent 62%)} .svc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(var(--paper),transparent 12%,transparent 88%,var(--paper))} .svc-bg{display:none} .svc-deco{position:absolute;inset:0;z-index:-1;pointer-events:none} .deco-slice{position:absolute;width:clamp(360px,44vw,660px);height:auto;aspect-ratio:1} .deco-slice .o-fill{fill:var(--lime);opacity:.4} .deco-slice .o-line{fill:none;stroke:var(--ink);stroke-width:.35;stroke-linecap:round;opacity:.28} .deco-slice .o-thin{stroke-dasharray:1 1.6} .d1{right:-12%;top:-6%} .d2{left:-16%;bottom:-8%;width:clamp(280px,32vw,480px)} /* Leistungskacheln */ .card--web{grid-column:span 8;background:var(--lime)} .card--auto{grid-column:span 4;background:var(--card)} .card--host{grid-column:span 4;background:#F5F5F3} .card--secure{grid-column:span 4;background:var(--card)} .card--seo{grid-column:span 4;background:#F7FAD8} .card--brand{grid-column:span 6;background:var(--card)} .card--social{grid-column:span 6} .card{padding:clamp(26px,2.6vw,38px);transition:transform .35s var(--ease)} .card .h3{font-size:clamp(1.6rem,1rem + 1.05vw,2.1rem);line-height:1.06;letter-spacing:-.025em} .card--web .h3{font-size:clamp(2rem,1rem + 2vw,3rem)} .card--web p{font-size:clamp(1.05rem,1rem + .25vw,1.18rem);color:var(--ink);max-width:42em} .card--web .card-icon .ico{width:120px;height:120px} .card--web .tags li{background:var(--card)} .card--web .ico .lime{fill:var(--card)} .card--auto .tags li{background:rgba(233,240,86,.55)} .card--seo .tags li{background:var(--lime)} @media (hover:hover){.card:hover{transform:scale(1.02);box-shadow:none}} @media (max-width:1024px){.card--web{grid-column:span 12}.card--auto,.card--host,.card--secure,.card--seo,.card--brand,.card--social{grid-column:span 6}} @media (max-width:680px){.card--web,.card--auto,.card--host,.card--secure,.card--seo,.card--brand,.card--social{grid-column:1/-1}.card--web .card-icon .ico{width:84px;height:84px}} /* Ablauf ohne Bild */ .proc-photo{display:none} /* Kontakt: Kopf mittig */ .cta-head{margin-inline:auto;text-align:center;max-width:44em} .cta-head .kick{justify-content:center} .cta-text{margin-inline:auto} /* Formularfelder: Fokus nur grüner Rand, keine Doppelkante */ .form input:not([type=checkbox]):focus,.form textarea:focus, .form input:not([type=checkbox]):focus-visible,.form textarea:focus-visible{outline:none;border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime);background:var(--card)} /* Bewegung */ @media (prefers-reduced-motion:no-preference){ .js .kick-slice{animation:spin 14s linear infinite} .js [data-reveal] .claim{opacity:0} .js [data-reveal].in .claim{animation:claimPop .8s cubic-bezier(.2,.9,.3,1.35) .35s both} .js .hero .claim{animation:claimPop .8s cubic-bezier(.2,.9,.3,1.35) .6s both} .js .deco-slice.d1{animation:spin 110s linear infinite} .js .deco-slice.d2{animation:spinR 140s linear infinite} .js .card[data-reveal]{transition:opacity .65s var(--ease),transform .65s var(--ease)} } @keyframes claimPop{0%{opacity:0;transform:rotate(-16deg) scale(.3)}100%{opacity:1;transform:rotate(-3deg) scale(1)}} body.motion-paused .kick-slice,body.motion-paused .deco-slice{animation-play-state:paused !important} /* CTA im Header: Sichtbarkeit wie zuvor */ .nav .go.nav-cta{display:none} @media (max-width:1080px){ .go.header-cta{display:none} .go.header-cta--solo{display:inline-flex} .nav .go.nav-cta{display:inline-flex;margin-top:22px} } /* Kachel-Raster: 8/4 · 6/6 · 4/4/4 – Titel ohne Quetschen */ .card--host,.card--secure{grid-column:span 6} .card--seo,.card--brand,.card--social{grid-column:span 4} .card-head .h3{hyphens:manual} @media (max-width:1024px){.card--host,.card--secure,.card--seo,.card--brand,.card--social{grid-column:span 6}.card--social{grid-column:span 12}} @media (max-width:680px){.card--host,.card--secure,.card--seo,.card--brand,.card--social{grid-column:1/-1}} .deco-slice .o-line{opacity:.18} @media (min-width:1440px){.rail{left:14px}} /* Hero-Headline: zwei Aussagen, je eine Zeile */ .hero .h1 .line{display:block;margin-right:0} .hero .h1{font-size:clamp(2.5rem,1rem + 3.4vw,4.5rem)} /* Kacheltitel: nie mitten im Wort umbrechen, nur an weichen Trennstellen */ .card .h3{overflow-wrap:normal;word-break:normal} @media (max-width:680px){ .card--web .h3{font-size:clamp(1.7rem,1rem + 3vw,2.1rem)} .card--web .card-icon .ico,.card-icon .ico{width:64px;height:64px} } @media (min-width:681px) and (max-width:1024px){.card .h3{font-size:clamp(1.45rem,1rem + .9vw,1.7rem)}.card-icon .ico{width:76px;height:76px}.card--web .card-icon .ico{width:96px;height:96px}} /* ========================================================================== 21 Runde 4 (23.09.2026 spät): 1200 px, ohne Kicker-Label, dünnere Icons, Footer, 4 Vorteile ========================================================================== */ .wrap{max-width:calc(1200px + 2 * var(--gutter))} .kick-name{display:none} .kick{gap:0} .svc-deco{display:none} /* dünnere Linien */ .ico .st{stroke-width:1.2} .ico .loop{stroke-width:1} .card-icon .ico .st{stroke-width:1.1} .i{stroke-width:1.5} .go-c .i{stroke-width:2} /* Header: CTA links vom Sprachumschalter */ .header-tools{gap:18px} /* Vorteile: vier, 2×2, großzügig */ .lime-zone .benefits,.ben-layout.has-photo .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,64px) clamp(40px,6vw,96px)} .lime-zone .benefit{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:start} .lime-zone .benefit .ico{grid-row:1/span 2;width:72px;height:72px} .lime-zone .benefit .benefit-text{min-width:0} .lime-zone .benefit .h3{margin-top:0} .ben-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:clamp(56px,7vw,88px);text-align:center} .ben-cta p{font:700 clamp(1.3rem,1rem + 1vw,1.8rem)/1.1 var(--f-display);letter-spacing:-.02em} .on-lime .go-t,.lime-zone .go-t{background-image:linear-gradient(var(--card),var(--card))} @media (hover:hover){.lime-zone .go:hover .go-c{background:var(--card)}} @media (max-width:760px){.lime-zone .benefits,.ben-layout.has-photo .benefits{grid-template-columns:minmax(0,1fr)}.lime-zone .benefit .ico{width:56px;height:56px}} /* Footer: drei Spalten, Logo mittig, Rechtliches unten */ .footer-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:32px 48px} .footer-text{max-width:34ch;color:var(--ink-2);font-size:1rem} .footer-logo{justify-self:center} .footer-logo .wm-img{height:clamp(44px,5vw,64px)} .footer-logo .brand{padding:0;margin:0} .footer-contact{justify-self:end;text-align:right} .f-mail{display:inline-block;margin-top:10px;font:700 clamp(1.05rem,1rem + .4vw,1.3rem)/1.2 var(--f-display);text-decoration:none;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 100%/100% .35em;padding:2px 1px} .f-nav{list-style:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 18px;margin-top:12px} .f-nav a{display:inline-block;padding:.5em 0;text-decoration:none;color:var(--ink-2)} @media (hover:hover){.f-nav a:hover,.f-legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}} .footer-bottom{align-items:center} .f-legal{display:flex;gap:18px} .f-legal a{display:inline-block;padding:.6em 0;text-decoration:none;color:var(--ink-2)} @media (max-width:860px){ .footer-grid{grid-template-columns:minmax(0,1fr);text-align:center} .footer-text{margin-inline:auto;order:2} .footer-logo{order:1} .footer-contact{justify-self:center;text-align:center;order:3} .f-nav{justify-content:center} .footer-bottom{flex-direction:column;align-items:center;text-align:center} } .card:not(.card--web) .h3{font-size:clamp(1.55rem,1rem + .95vw,1.95rem)} @media (min-width:1025px){.card:not(.card--web) .card-icon .ico{width:80px;height:80px}} .f-mail{padding:.7em 1px .55em;background-position:0 78%} .f-legal a{padding:.8em 0} .card:not(.card--web) .h3{font-size:clamp(1.5rem,1rem + .85vw,1.85rem)} .card-head{gap:10px} .f-mail{min-height:44px} .form .go-t{background-image:linear-gradient(var(--lime),var(--lime))} .card--web .h3{font-size:clamp(1.8rem,1rem + 1.7vw,2.55rem)} .benefit .h3{text-wrap:balance} /* ========================================================================== 22 Runde 5 (24.09.2026): neue Limetten (A ganze, B halbe Scheibe), Logo größer ========================================================================== */ /* Logo = Schriftzug mit Lime-Punkt, ohne Bildmarke */ .brand .wm{display:block;height:clamp(32px,1.6vw + 18px,42px);width:auto;color:var(--ink)} @media (max-width:420px){.brand .wm{height:30px}} .footer-logo .wm{height:clamp(60px,6vw + 20px,92px)} /* Seitenleiste: ganze Scheibe dreht beim Scrollen */ .rail .rail-slice{width:44px;height:44px;display:block} /* „Unsicher, was du brauchst?": halbe Limette als Gimmick */ .ask-lime{display:block;width:clamp(96px,10vw,140px);transform:rotate(-10deg);transform-origin:50% 70%} .ask-slice{display:block;width:100%;height:auto} @media (prefers-reduced-motion:no-preference){ .js .ask.in .ask-lime{animation:limeDrop .7s cubic-bezier(.2,.9,.3,1.25) .1s both,limeRock 7s ease-in-out 1.4s infinite} .ask-slice{transition:transform .45s cubic-bezier(.2,.9,.3,1.4)} } /* Hover: die Scheibe (Bild) kippt, die Hülle schaukelt weiter bzw. hält an */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ .ask:hover .ask-slice{transform:rotate(18deg) scale(1.08)} .js .ask.in:hover .ask-lime{animation-play-state:paused} } @keyframes limeDrop{0%{opacity:0;transform:translateY(-40px) rotate(-60deg) scale(.6)}100%{opacity:1;transform:rotate(-10deg)}} @keyframes limeRock{0%,70%,100%{transform:rotate(-10deg)}76%{transform:rotate(4deg)}82%{transform:rotate(-16deg)}88%{transform:rotate(-6deg)}94%{transform:rotate(-11deg)}} body.motion-paused .ask-lime{animation:none !important} /* Pause = Ruhelage, nicht auf Bild 0 einfrieren */ /* Runde 5 – Nachschliff nach Review */ html:not(.js) .rail{display:none} body.motion-paused .ico *{animation:none !important} /* Icons ruhen im Endzustand statt unsichtbar zu frieren */ /* Logo größer (Header) */ .site-header .brand .wm{height:clamp(36px,1.4vw + 22px,44px)} @media (max-width:420px){.site-header .brand .wm{height:34px}} @media (max-width:360px){.site-header .brand .wm{height:30px}} /* Kacheln 681–1024 px: Branding + Social teilen sich die letzte Reihe (kein Loch) */ @media (min-width:681px) and (max-width:1024px){.card--social{grid-column:span 6}} @media (max-width:420px){.ask-lime{width:76px}} /* ========================================================================== 23 Runde 6 (24.09.2026 abends): Hero-Gimmicks, Unsicher-Gimmick, Vorteile 2/3 + 1/3, Chat, Danke-Presse, Footer-Ring ========================================================================== */ /* Leistungen */ .card--social .tags li{background:#fff} .section-head .intro strong{color:var(--ink);font-weight:700} /* „Unsicher, was du brauchst?": ohne Linien, Limette wird gequetscht und spritzt, Sprechblase */ .ask{border-top:0;border-bottom:0;padding-block:clamp(18px,2.4vw,28px);margin-top:clamp(56px,7vw,96px)} .ask-lime{position:relative;width:clamp(96px,11vw,156px);transform-origin:50% 85%} .juice{position:absolute;left:46%;top:30%;width:11px;height:11px;border-radius:50% 0 50% 50%;background:#A5CE3F;border:1.5px solid var(--ink);opacity:0;pointer-events:none} .ask-bubble{position:absolute;left:4%;bottom:calc(100% + 6px);white-space:nowrap;font:700 clamp(.78rem,.7rem + .3vw,.95rem)/1 var(--f-display);padding:.62em .85em;background:var(--lila);border:2px solid var(--ink);border-radius:14px 14px 14px 4px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-6deg);transform-origin:0 100%} @media (prefers-reduced-motion:no-preference){ .js .ask.in .ask-lime{animation:limeDrop .7s cubic-bezier(.2,.9,.3,1.25) .1s both,limeSqueeze 5.2s ease-in-out 1.2s infinite} .js .ask.in .juice{animation:juice 5.2s ease-out 1.2s infinite} .js .ask.in .j2{animation-name:juice2}.js .ask.in .j3{animation-name:juice3} .js .ask .ask-bubble{opacity:0} .js .ask.in .ask-bubble{animation:bubblePop .5s cubic-bezier(.2,.9,.3,1.5) .9s forwards} } @keyframes limeSqueeze{0%,58%,100%{transform:rotate(-10deg) scale(1)}62%{transform:rotate(-10deg) scale(1.14,.78)}68%{transform:rotate(-4deg) scale(.92,1.12)}74%{transform:rotate(-13deg) scale(1.04,.96)}80%{transform:rotate(-10deg) scale(1)}} @keyframes juice{0%,60%{opacity:0;transform:translate(0,0) rotate(-45deg) scale(.4)}64%{opacity:1}78%{opacity:1;transform:translate(-34px,-48px) rotate(-60deg) scale(1)}88%,100%{opacity:0;transform:translate(-44px,-20px) rotate(-80deg) scale(.8)}} @keyframes juice2{0%,60%{opacity:0;transform:translate(0,0) rotate(-45deg) scale(.4)}64%{opacity:1}78%{opacity:1;transform:translate(4px,-64px) rotate(-45deg) scale(1.1)}88%,100%{opacity:0;transform:translate(6px,-34px) rotate(-45deg) scale(.8)}} @keyframes juice3{0%,60%{opacity:0;transform:translate(0,0) rotate(-45deg) scale(.4)}64%{opacity:1}78%{opacity:1;transform:translate(40px,-44px) rotate(-20deg) scale(.9)}88%,100%{opacity:0;transform:translate(52px,-14px) rotate(0deg) scale(.7)}} @keyframes bubblePop{0%{opacity:0;transform:rotate(-20deg) scale(.3)}100%{opacity:1;transform:rotate(-6deg) scale(1)}} body.motion-paused .ask-lime *{animation:none !important} body.motion-paused .ask-bubble{opacity:1 !important} @media (max-width:420px){.ask-lime{width:80px}.ask-bubble{font-size:.72rem;left:0}} /* Kontakt: Senden-Knopf mittig */ .f-actions{justify-content:center} /* Footer: drehender Ring links, schlanker Text; Rechtliches mittig */ .footer-side{display:flex;align-items:center;gap:clamp(16px,2vw,24px)} .site-footer .f-ring{position:relative;flex:none;width:clamp(96px,8vw,120px);left:auto;top:auto} .site-footer .f-ring svg{display:block;width:100%;height:auto} .footer-side .footer-text{margin:0;max-width:26ch} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 28px;text-align:center} @media (max-width:860px){.footer-side{flex-direction:column;text-align:center;order:2}.footer-side .footer-text{margin-inline:auto}} /* ========================================================================== 24 Runde 7 (24.09.2026 spät) ========================================================================== */ /* Leistungen: „Unsicher" mittig */ .ask-copy{text-align:center} .ask-copy p{margin-inline:auto} /* Vorteile: ohne Linien, Intro mit fettem Einstieg, Bild 4:5 */ .lime-zone .benefit{border-top:0 !important;padding-top:0 !important} .lime-zone .intro strong{font-weight:700} .lime-zone .ico-recht .surf{fill:#fff} /* Ablauf → Kontakt: weniger Abstand */ .contact{padding-top:clamp(36px,3vw,48px)} /* Kontakt hat data-asym */ /* Formular: Pflicht-Anliegen markieren, Danke dezent */ .f-topics.invalid legend{color:#B3261E} .f-topics.invalid .checks{outline:2px solid #B3261E;outline-offset:6px;border-radius:10px} .f-status.ok{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-weight:600;color:var(--ink)} .f-status.ok::before{content:"";width:34px;height:26px;flex:none;background:url(limette-halb.svg) center/contain no-repeat} .sent{padding:14px 18px;font-size:1rem;text-align:left} /* ========================================================================== 25 Runde 8 (23.10.2026): Sticker-Haufen im Hero, Nebenleistungen kompakt, Vorteile ohne Bild und Chat, Kontakt ohne Limette, Laufband reagiert aufs Scrollen, Pfeil-Knöpfe magnetisch, Lime-Punkt hüpft ========================================================================== */ /* Hero: Sticker-Haufen (Physik in main.js); ohne JS / bei „Bewegung reduzieren" ein ruhiger Stapel */ .pile{position:relative;width:100%;max-width:560px;height:clamp(390px,34vw,500px);justify-self:end;align-self:end} .pile-box{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:10px 6px;padding:14px 14px 18px;filter:drop-shadow(4px 4px 0 var(--ink))} .pb{display:inline-flex;align-items:center;gap:.35em;padding:.36em .8em .4em;font:700 clamp(1.15rem,.95rem + .6vw,1.55rem)/1.1 var(--f-display);letter-spacing:-.015em;white-space:nowrap;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:999px;transform:rotate(var(--r,0deg));user-select:none;-webkit-user-select:none;-webkit-user-drag:none;touch-action:none;cursor:grab} .pb--xl{font-size:clamp(2rem,1rem + 2.4vw,3.2rem);font-weight:800;letter-spacing:-.03em;padding:.28em .66em .32em} .pb--l{font-size:clamp(1.35rem,1rem + 1vw,1.95rem)} .pb--s{font:600 clamp(.9rem,.8rem + .3vw,1.12rem)/1.1 var(--f-mono);letter-spacing:.01em;padding:.6em 1em} .pb--lime{background:var(--lime)} .pb--lila{background:var(--lila)} .pb--ink{background:var(--ink);color:var(--paper)} .pb-code{font:700 .78em/1 var(--f-mono);letter-spacing:0;color:var(--lime)} .pb--o{justify-content:center;padding:0;border-radius:50%} .pb--slice{width:clamp(80px,7.4vw,112px);height:auto;aspect-ratio:1;border:0;background:none} .pb--star{width:clamp(52px,4.6vw,68px);height:clamp(52px,4.6vw,68px);background:var(--lila)} .pb--star svg{width:52%;height:52%} .pb--brand{padding:.5em .95em .62em} .pb--brand .wm{height:clamp(26px,1.4vw + 14px,36px);width:auto;pointer-events:none} .pile-hint{position:absolute;right:68px;top:16px;max-width:19ch;font:500 .82rem/1.35 var(--f-mono);color:var(--ink-2);text-align:right;transition:opacity .5s var(--ease)} .pile-shake{position:absolute;right:12px;top:12px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--ink);background:var(--card);cursor:pointer;transition:transform .35s var(--ease),background-color .25s} .pile-shake .i{width:20px;height:20px;stroke-width:2} @media (hover:hover){.pile-shake:hover{background:var(--lime);transform:rotate(-35deg)}} .pile-shake:active{transform:rotate(-35deg) scale(.92)} .pile:not(.is-live) .pile-hint,.pile:not(.is-live) .pile-shake{display:none} .pile.is-live .pile-box{display:block;padding:0} .pile.is-live .pb{position:absolute;left:0;top:0;margin:0;will-change:transform} .pile.is-grab,.pile.is-grab .pb{cursor:grabbing} .pile.played .pile-hint{opacity:0} @media (prefers-reduced-motion:no-preference){.js .pile:not(.is-live):not(.is-static) .pb{visibility:hidden}} @media (max-width:900px){.pile{justify-self:center;max-width:560px;height:clamp(330px,60vw,400px);margin-top:4px;overflow:hidden}} /* Box höher (ganze Höhe des Textblocks) und mit leichtem Raster, damit man sieht, wo die Sticker landen */ .pile{align-self:stretch;height:auto;min-height:clamp(400px,36vw,520px)} .pile::before{content:"";position:absolute;inset:0;border:1.5px dashed var(--line-strong);border-radius:24px;pointer-events:none;background-color:rgba(255,255,250,.75);background-image:linear-gradient(rgba(44,47,50,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(44,47,50,.065) 1px,transparent 1px);background-size:28px 28px;background-position:13px 13px} @media (max-width:900px){.pile{align-self:auto;height:clamp(380px,96vw,460px);min-height:0;border-radius:24px}} /* Leistungen: Nebenleistungen (SEO & SEA, Branding, Social Media) als kurze Kacheln */ .bento-label{display:block;grid-column:1/-1;margin:clamp(18px,2.4vw,30px) 0 -4px;font:600 .8rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .card.card--compact{flex-direction:row;align-items:center;gap:18px;padding:18px 24px 18px 18px;border-radius:22px} .card.card--compact .card-icon{margin:0;flex:none} .card.card--compact .card-icon .ico{width:58px;height:58px} .card.card--compact .card-body{flex:1;min-width:0} .card.card--compact .h3{margin:0;font-size:clamp(1.2rem,1rem + .4vw,1.4rem)} .card.card--compact p{margin-top:4px;font-size:1rem;line-height:1.45;color:var(--ink-2)} @media (hover:hover){.card.card--compact:hover .card-icon{transform:rotate(-8deg) scale(1.08)}} @media (max-width:1024px){.card--secure,.card--seo,.card--brand,.card--social{grid-column:span 12}} /* Laufband: wird per JS bewegt (Scrollen schiebt es an) */ .band-track.is-driven{animation:none !important;will-change:transform} /* Runde Pfeil-Knöpfe: folgen leicht der Maus (translate, unabhängig vom Hover-transform) */ .go-c{transition:transform .35s var(--ease),translate .3s var(--ease),background-color .3s,color .3s,box-shadow .3s} /* Logo: Lime-Punkt hüpft einmal nach dem Laden und bei Hover */ .wm-dot{transform-box:fill-box;transform-origin:50% 100%} @media (prefers-reduced-motion:no-preference){.js .site-header .wm-dot{animation:dotHop .9s cubic-bezier(.3,.7,.4,1) 1.3s}} @media (prefers-reduced-motion:no-preference) and (hover:hover){.brand:hover .wm-dot{animation:dotHop2 .8s cubic-bezier(.3,.7,.4,1)}} @keyframes dotHop{0%,100%{transform:none}18%{transform:scale(1.3,.7)}45%{transform:translateY(-130%) scale(.85,1.15)}68%{transform:scale(1.25,.75)}84%{transform:translateY(-20%) scale(.95,1.05)}} @keyframes dotHop2{0%,100%{transform:none}18%{transform:scale(1.3,.7)}45%{transform:translateY(-130%) scale(.85,1.15)}68%{transform:scale(1.25,.75)}84%{transform:translateY(-20%) scale(.95,1.05)}} body.motion-paused .wm-dot{animation:none !important} /* ========================================================================== 26 Runde 9 (23.10.2026 nachm.): Box sichtbar, Claims magnetisch, Vorteile-Weg, Ablauf-Fortschritt, Formular-Hinweis ========================================================================== */ /* Claim-Sticker: folgen leicht der Maus, wenn sie in die Nähe kommt (translate, unabhängig vom Pop-transform) */ .claim{transition:transform .3s var(--ease),translate .4s cubic-bezier(.2,.8,.3,1.2)} /* Vorteile: Weg deiner Anfrage – Agentur mit Zwischenstationen vs. direkt mit limey */ .route{display:flex;flex-direction:column;align-items:center;gap:26px;margin-top:clamp(64px,8vw,104px)} .route-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px} .route-label{font:600 .8rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase} .route-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border:2px solid var(--ink);border-radius:999px;background:var(--card);box-shadow:3px 3px 0 var(--ink)} .route-switch::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--ink);transition:transform .45s cubic-bezier(.3,1.25,.5,1)} .route.is-limey .route-switch::before{transform:translateX(100%)} .route-switch button{position:relative;z-index:1;min-height:44px;padding:0 1.15em;border:0;border-radius:999px;background:none;color:var(--ink);font:700 1rem/1 var(--f-display);white-space:nowrap;cursor:pointer;transition:color .3s} .route-switch button[aria-pressed="true"]{color:var(--paper)} .route-switch button:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .route-track{position:relative;display:flex;align-items:center;width:fit-content;max-width:100%;margin:0 auto;padding:0;list-style:none} .route-track::before{content:"";position:absolute;left:24px;right:24px;top:50%;border-top:2px dashed var(--ink);transform:translateY(-1px)} .route.is-limey .route-track::before{border-top-style:solid} .rn{position:relative;z-index:1;max-width:260px;max-height:80px;margin:0 9px;transition:max-width .45s var(--ease),max-height .45s var(--ease),margin .45s var(--ease)} .rp{display:inline-flex;align-items:center;white-space:nowrap;padding:.55em 1.05em;font:700 1rem/1.1 var(--f-display);background:var(--card);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);transition:transform .45s cubic-bezier(.3,1.2,.5,1),opacity .35s} .rn--you .rp{background:var(--ink);color:var(--paper)} .rn--goal .rp{background:var(--lila)} .rn--me .rp{padding:.45em 1.05em .55em} .rn--me .wm{height:24px;width:auto} .rn--mid .rp{transition-delay:calc(.25s + var(--k,0) * 60ms)} .route.is-limey .rn--mid,.route.is-agentur .rn--me{max-width:0;max-height:0;margin:0;transition-delay:calc(.22s + var(--k,0) * 60ms)} .route.is-limey .rn--mid .rp{opacity:0;transform:translateY(56px) rotate(var(--rr,14deg));transition-delay:calc(var(--k,0) * 60ms)} .route.is-agentur .rn--me .rp{opacity:0;transform:scale(.2) rotate(-20deg);transition-delay:0s} .route.is-limey .rn--me{transition-delay:.5s} .route.is-limey .rn--me .rp{transition-delay:.75s} .route.no-anim *,.route.no-anim *::before{transition:none !important} .route-dot{position:absolute;z-index:0;top:50%;left:24px;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--card);border:2px solid var(--ink)} .route-count{font-size:1rem;font-weight:600} .route-count b{display:inline-block;min-width:1.1ch;margin-right:.15em;font:800 1.7rem/1 var(--f-display);vertical-align:-.14em} @keyframes routeRunX{from{left:24px}to{left:calc(100% - 24px)}} @keyframes routeRunY{from{top:20px}to{top:calc(100% - 20px)}} @media (prefers-reduced-motion:no-preference){.js .route-dot{animation:routeRunX 4.8s linear infinite}.js .route.is-limey .route-dot{animation-duration:1.8s}} body.motion-paused .route-dot{animation-play-state:paused !important} @media (max-width:1024px){ .route-track{flex-direction:column} .rn{margin:6px 0} .route-track::before{left:50%;right:auto;top:20px;bottom:20px;border-top:0;border-left:2px dashed var(--ink);transform:translateX(-1px)} .route.is-limey .route-track::before{border-left-style:solid} .route-dot{left:50%;top:20px} .route.is-limey .rn--mid .rp{transform:translateX(70px) rotate(var(--rr,14deg))} } @media (max-width:1024px) and (prefers-reduced-motion:no-preference){.js .route-dot{animation-name:routeRunY}} /* Ablauf: Linie füllt sich beim Scrollen, der Lime-Punkt läuft vorneweg, erreichte Schritte leuchten auf */ .step:not(:last-child)::before{content:"";position:absolute;z-index:0;left:calc(50% + 42px);top:32.5px;width:calc(100% + var(--gap) - 84px);border-top:3px solid var(--ink);transform:scaleX(var(--f,0));transform-origin:left center;pointer-events:none} .steps:not(.is-live) .step::before{display:none} .step-run{position:absolute;z-index:2;left:calc(50% + 42px + var(--f,0) * (100% + var(--gap) - 84px));top:34px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--lime);border:2px solid var(--ink);opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s var(--ease);pointer-events:none} .step.run .step-run{opacity:1;transform:none} .step-n::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--ink);opacity:0;pointer-events:none} .steps.is-live .step-n{background:var(--card);transition:background-color .35s var(--ease),transform .25s var(--ease)} .steps.is-live .step.on .step-n{background:var(--lime)} .steps.is-live .step.on:last-child .step-n{background:var(--lila)} @media (prefers-reduced-motion:no-preference){ .js .steps.is-live .step.in .step-n{animation:none} .js .steps.is-live .step.in.on .step-n{animation:stepOn .5s cubic-bezier(.2,.9,.3,1.4)} .js .steps.is-live .step.in.on .step-n::before{animation:stepPing .8s ease-out .05s} .js .steps.is-live .step.in::after{animation:none} } @keyframes stepOn{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-8deg)}100%{transform:none}} @keyframes stepPing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}} @media (max-width:900px){ .step:not(:last-child)::before{left:50%;top:80px;bottom:8px;width:0;border-top:0;border-left:3px solid var(--ink);margin-left:-.5px;transform:scaleY(var(--f,0));transform-origin:center top} .step-run{z-index:0;left:50%;top:calc(80px + var(--f,0) * (100% - 88px))} } /* Kontakt: Kopf ohne Claim-Pille */ .cta-head .h2:first-child{margin-top:0} /* Formular-Hinweis: mittig in der Kachel, grün bei Erfolg, rot bei Fehler */ .f-status{text-align:center} .f-status:not(:empty){display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;margin:18px auto 0;padding:.7em 1.15em;border-radius:14px;border:2px solid var(--ink)} .f-status.ok{justify-content:center;background:#E3F2CC;border-color:#5E8F22;color:#26330F} .f-status.bad{background:#FDE1DE;border-color:#B3261E;color:#8C1D18} .sent{text-align:center} /* ========================================================================== 27 Runde 10 (23.10.2026 abends): Lavendel statt Peach, Weg-Panel, Ablauf langsamer, Frische-Check ========================================================================== */ /* Vorteile: „Der Weg deiner Anfrage" ganz leicht abgehoben; Schalter zeigt, wann er umspringt */ .route{padding:clamp(28px,4vw,48px) clamp(16px,3vw,40px);border-radius:32px;background:rgba(255,255,250,.32)} .route-switch button[data-mode="limey"]::after{content:"";position:absolute;left:22%;right:22%;bottom:7px;height:3px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left center;opacity:0} @media (prefers-reduced-motion:no-preference){.route.is-waiting .route-switch button[data-mode="limey"]::after{opacity:.75;animation:routeWait 5s linear forwards}} @keyframes routeWait{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Kontakt kommt jetzt nach dem Frische-Check (schräge Kante) – etwas mehr Luft */ .contact{padding-top:clamp(56px,6vw,88px)} /* Frische-Check (Lavendel-Fläche): fünf Fragen, Ergebnis als Limetten-Reihe */ .check-zone{position:relative;background:var(--lila-soft);clip-path:polygon(0 0,100% clamp(20px,3vw,48px),100% 100%,0 calc(100% - clamp(20px,3vw,48px)));padding-block:clamp(110px,12vw,170px)} .check-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(36px,5vw,80px);align-items:center} .check-copy .intro{margin-top:20px;color:var(--ink)} .check-note{margin-top:12px;font-size:1rem;color:var(--ink-2)} .check-none{margin-top:28px;font-size:1rem;font-weight:600} .check-none a{text-underline-offset:3px;text-decoration-thickness:2px} .check-card{position:relative;display:flex;flex-direction:column;min-height:400px;padding:clamp(24px,3.4vw,44px);background:var(--card);border:2px solid var(--ink);border-radius:28px;box-shadow:10px 10px 0 var(--ink)} .check-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px} .check-limes{display:flex;gap:8px} .cl{width:clamp(30px,3vw,40px);height:auto;filter:grayscale(1);opacity:.32;transition:filter .35s,opacity .35s,transform .5s cubic-bezier(.3,1.4,.5,1)} .cl.cur{opacity:.7;transform:scale(1.14)} .cl.yes{filter:none;opacity:1;transform:rotate(90deg)} .cl.no{opacity:.55} .check-step{font:600 .85rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)} .check-qs{margin:clamp(24px,3vw,34px) 0 0;padding-left:1.2em} .check-q{font-size:1.1rem;font-weight:600;line-height:1.4} .check-q+.check-q{margin-top:8px} .check-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:auto;padding-top:30px} .check-ans{min-width:124px;min-height:56px;padding:0 1.6em;border:2px solid var(--ink);border-radius:999px;color:var(--ink);font:700 1.2rem/1 var(--f-display);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)} .check-yes{background:var(--lime)} .check-no{background:var(--lila)} @media (hover:hover){.check-ans:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}} .check-ans:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)} .check-ans:focus-visible,.check-again:focus-visible,.check-back:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .check-back{display:inline-flex;align-items:center;gap:.4em;align-self:flex-start;min-height:44px;margin-top:10px;padding:0;border:0;background:none;color:var(--ink-2);font-weight:600;cursor:pointer} .check-back .i{width:1.1em;height:1.1em;transform:rotate(180deg)} .check-card:not(.is-live) .check-top,.check-card:not(.is-live) .check-btns,.check-card:not(.is-live) .check-back,.check-card:not(.is-live) .check-result{display:none} .check-card.is-live .check-qs{padding:0;list-style:none} .check-card.is-live .check-q{display:none;font:700 clamp(1.4rem,1rem + 1.1vw,2rem)/1.15 var(--f-display);letter-spacing:-.02em;text-wrap:balance} .check-card.is-live .check-q.cur{display:block} .check-card.is-live .check-back.off{visibility:hidden} .check-card.is-done .check-qs,.check-card.is-done .check-btns,.check-card.is-done .check-back{display:none} .check-card.is-done .cl{transform:scale(1.18)} .check-card.is-done .cl.yes{transform:scale(1.18) rotate(180deg)} .check-result{margin-top:clamp(18px,2.6vw,28px)} .check-result:focus{outline:none} .check-score{font:800 clamp(3rem,2rem + 3vw,4.6rem)/1 var(--f-display);letter-spacing:-.04em} .check-score span{margin-left:.06em;font-size:.45em;color:var(--ink-2)} .check-title{margin-top:12px} .check-text{margin-top:10px;color:var(--ink-2)} .check-weak-h{margin-top:20px;font-weight:700} .check-weak{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:0;list-style:none} .check-weak li{padding:.36em .8em;font-size:.8125rem;font-weight:600;background:var(--lila-soft);border:1.5px solid var(--ink);border-radius:999px} .check-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px} .check-again{min-height:44px;padding:0;border:0;background:none;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer} @media (prefers-reduced-motion:no-preference){ .check-q.in-r{animation:qInR .45s var(--ease)} .check-q.in-l{animation:qInL .45s var(--ease)} .check-card.is-done .check-result{animation:rise .5s var(--ease)} } @keyframes qInR{from{opacity:0;transform:translateX(40px) rotate(1.5deg)}to{opacity:1;transform:none}} @keyframes qInL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @media (max-width:900px){.check-grid{grid-template-columns:minmax(0,1fr)}.check-card{min-height:0;box-shadow:6px 6px 0 var(--ink)}} @media (max-width:420px){.check-ans{flex:1;min-width:0}} /* Runde 11: Livegang-Sparkles, Abstand Claim → Überschrift überall 22 px */ .check-copy .h2,.head-center .h2{margin-top:22px} .step-sparks{position:absolute;left:50%;top:34px;width:0;height:0;z-index:3;pointer-events:none} .step-sparks i{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;opacity:0;background:var(--lime); clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); --a:calc(var(--k) * 36deg);transform:rotate(var(--a)) translateY(0) scale(.2)} .step-sparks i:nth-child(1){--k:0}.step-sparks i:nth-child(2){--k:1;background:var(--lila)}.step-sparks i:nth-child(3){--k:2;background:var(--ink);width:10px;height:10px} .step-sparks i:nth-child(4){--k:3}.step-sparks i:nth-child(5){--k:4;background:var(--lila)}.step-sparks i:nth-child(6){--k:5} .step-sparks i:nth-child(7){--k:6;background:var(--ink);width:10px;height:10px}.step-sparks i:nth-child(8){--k:7;background:var(--lila)} .step-sparks i:nth-child(9){--k:8}.step-sparks i:nth-child(10){--k:9;background:var(--lila)} @media (prefers-reduced-motion:no-preference){ .step.spark .step-sparks i{animation:sparkOut 1.1s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--k) * 25ms)} .step.spark .step-sparks i:nth-child(odd){animation-name:sparkOut2;animation-duration:1.3s} } @keyframes sparkOut{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.2)}15%{opacity:1}70%{opacity:1;transform:rotate(var(--a)) translateY(-66px) scale(1) rotate(90deg)}100%{opacity:0;transform:rotate(var(--a)) translateY(-78px) scale(.4) rotate(140deg)}} @keyframes sparkOut2{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.2)}15%{opacity:1}60%{opacity:1;transform:rotate(var(--a)) translateY(-46px) scale(1.15) rotate(-80deg)}100%{opacity:0;transform:rotate(var(--a)) translateY(-56px) scale(.3) rotate(-160deg)}} /* ========================================================================== 28 Runde 12 (23.10.2026 nachts): aus der Gimmick-Version übernommen + FAQ-Unterseite ========================================================================== */ /* Hero: markiertes Wort wechselt (Breite = längstes Wort, setzt main.js) */ .swap{display:inline-block;vertical-align:top;text-align:left} .swap-w{display:inline-block} .swap.out .swap-w{animation:swapOut .3s var(--ease) forwards} .swap.in .swap-w{animation:swapIn .55s cubic-bezier(.2,.9,.3,1.25)} @keyframes swapOut{to{opacity:0;transform:translateY(-.45em) rotate(-4deg)}} @keyframes swapIn{from{opacity:0;transform:translateY(.6em) rotate(5deg)}to{opacity:1;transform:none}} /* Sektionstitel: Wort für Wort */ @media (prefers-reduced-motion:no-preference){ .js .tw{display:inline-block;opacity:0;transform:translateY(.55em) rotate(3deg);transition:opacity .5s var(--ease),transform .6s cubic-bezier(.2,.9,.3,1.2);transition-delay:calc(.1s + var(--w,0) * 55ms)} .js .in .tw{opacity:1;transform:none} } /* Leistungskacheln: leicht angehoben, kippen zur Maus (ohne Lichtschein) */ @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){ .card{will-change:transform} .card.tilt{transform:perspective(900px) translateY(-4px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02) !important;transition:transform .12s linear !important} } /* Klick: Limettentropfen (Tropfen = Quadrat mit einer spitzen Ecke) */ .juice-drop{position:fixed;left:0;top:0;z-index:9998;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--lime);border:1.5px solid var(--ink);border-radius:0 50% 50% 50%;pointer-events:none} .juice-drop.g{background:#A5CE3F} .juice-drop.l{background:#D5E53B} .juice-drop.s{width:8px;height:8px;margin:-4px 0 0 -4px} /* Ablauf: Knopf zur FAQ-Unterseite */ .proc-faq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:clamp(48px,6vw,80px);text-align:center} .proc-faq p{font:700 clamp(1.15rem,1rem + .5vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.015em} @media (hover:hover){.proc-faq .go--ghost:hover .go-c{transform:translateX(6px) rotate(-10deg)}} /* FAQ-Unterseite: runde Karten, immer nur eine Antwort offen */ .qa-head{margin-bottom:clamp(40px,5vw,64px)} .qa-head .h1{margin-top:22px;font-size:clamp(2.3rem,1rem + 3.4vw,4.2rem);text-wrap:balance} .qa-head .intro{margin-top:18px;max-width:36em} .qa-list{display:flex;flex-direction:column;gap:14px;max-width:880px;margin:0 auto} .qa-item{background:var(--card);border:2px solid var(--ink);border-radius:30px;box-shadow:4px 4px 0 var(--ink);transition:background-color .3s,box-shadow .3s var(--ease),transform .3s var(--ease)} .qa-item.open{background:var(--lila-soft);box-shadow:6px 6px 0 var(--ink)} @media (hover:hover){.qa-item:not(.open):hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}} .qa-q{margin:0;font:inherit} .qa-q button{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:72px;padding:14px 16px 14px 28px;border:0;border-radius:30px;background:none;color:var(--ink);text-align:left;font:700 clamp(1.08rem,1rem + .4vw,1.3rem)/1.3 var(--f-display);letter-spacing:-.01em;cursor:pointer} .qa-q button:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .qa-ic{position:relative;flex:none;width:44px;height:44px;background:var(--lime);border:2px solid var(--ink);border-radius:50%;transition:transform .45s cubic-bezier(.3,1.35,.5,1),background-color .25s} .qa-ic::before,.qa-ic::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2.5px;margin:-1.25px 0 0 -8px;background:var(--ink);border-radius:2px} .qa-ic::after{transform:rotate(90deg)} .qa-item.open .qa-ic{background:var(--card);transform:rotate(135deg)} .qa-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s linear .45s} .qa-a>div{overflow:hidden} .qa-a p{max-width:64ch;padding:0 28px 26px} .qa-item.open .qa-a,html:not(.js) .qa-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s} .qa-cta{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:880px;margin:clamp(48px,6vw,80px) auto 0;padding:clamp(28px,4vw,48px);text-align:center;background:var(--lime);border:2px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink)} .qa-cta-t{font:800 clamp(1.6rem,1rem + 1.6vw,2.3rem)/1.05 var(--f-display);letter-spacing:-.03em} .qa-cta p{max-width:34em} .qa-cta .go{margin-top:8px} .qa-cta .go-t{background-image:linear-gradient(var(--card),var(--card))} @media (max-width:640px){.qa-q button{padding-left:20px}.qa-a p{padding:0 20px 22px}.qa-cta{box-shadow:6px 6px 0 var(--ink)}} .f-nav a{min-width:44px;text-align:center} /* kurzer Link „FAQ“: Tap-Ziel 44 px */ .qa-head .h1{padding-inline:.12em} /* Platz für die gekippten Wörter beim Erscheinen */ /* ========================================================================== 29 Runde 13 (24.10.2026): Handy-Feinschliff, Menü mit FAQ + Sprachen, Tropfen fallen nach unten ========================================================================== */ /* Menü: Sprachumschalter wandert mobil ins Menü, Einträge rechtsbündig */ .lang--menu{display:none} @media (max-width:1080px){ .js .header-tools .lang{display:none} .js .nav{text-align:right} .js .nav ul a{text-align:right} .js .lang--menu{display:inline-flex;margin-top:20px} .js .nav .go.nav-cta{margin-left:auto} } .nav ul a[aria-current="page"]{background:var(--paper-2)} /* Hero (Handy): beide Knöpfe nebeneinander, kleinere Pfeile */ @media (max-width:480px){ .hero .actions{gap:12px 14px} .hero .actions .go{gap:8px;min-height:44px;font-size:.95rem} .hero .actions .go-c{width:38px;height:38px} .hero .actions .go-c .i{width:17px;height:17px} } /* „Unsicher, was du brauchst?" (Handy): Limette mit Sprechblase oben, darunter Text, dann Knopf */ @media (max-width:760px){ .ask{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;padding-top:58px;text-align:center} .ask .ask-go{grid-column:auto;justify-self:center} .ask-lime{width:118px} } /* Vorteile (Handy): Icon über dem Text, Text auf voller Breite */ @media (max-width:760px){ .lime-zone .benefit{display:block} .lime-zone .benefit .ico{margin-bottom:14px} } /* Weg deiner Anfrage (untereinander): mehr Luft zwischen den Pillen, damit man den Punkt laufen sieht */ @media (max-width:1024px){.rn{margin:18px 0}} /* Ablauf (Handy): der Lime-Punkt läuft über Linie und Text, nicht dahinter */ @media (max-width:900px){.step-run{z-index:3;box-shadow:0 0 0 3px var(--paper)}} /* Kontakt (Handy): ganze Sektion Lime, das weiße Formular bekommt die volle Breite */ @media (max-width:640px){ .contact{padding-bottom:0} .contact>.wrap{padding-inline:0} .cta{padding:56px var(--gutter) 48px;border:0;border-radius:0;box-shadow:none} .form{padding:22px 18px;border-radius:22px} } /* Klick: ein Limettentropfen fällt (Spitze oben), zwei kleine hinterher */ .juice-drop{border-radius:0 50% 50% 50%} /* Kacheltitel bei Zwischenbreiten (360 px, 1025–1180 px): lange Wörter passen in die Kachel */ @media (max-width:380px){.card--web .h3{font-size:1.55rem}} @media (min-width:1025px) and (max-width:1180px){.card:not(.card--web):not(.card--compact) .h3{font-size:1.42rem}} /* Runde 14 (24.10.2026) */ /* Ablauf (Handy): Punkt vor der Linie, aber hinter dem Text (Text kommt im DOM danach und liegt ebenfalls auf Ebene 1) */ @media (max-width:900px){.step-run{z-index:1}} /* Handy: kein Papierstreifen zwischen Frische-Check und Kontakt – unten gerade Kante, Kontakt schließt direkt an */ @media (max-width:640px){ .check-zone{clip-path:polygon(0 0,100% clamp(20px,3vw,48px),100% 100%,0 100%)} .contact{padding-top:0} } /* Mobiles Menü: kein „Projekt anfragen" – dafür gibt es den Eintrag „Kontakt" */ @media (max-width:1080px){.nav .go.nav-cta{display:none}} /* Runde 15 (24.10.2026) */ /* Logo: der hüpfende Lime-Punkt darf über den Rand der Wortmarke hinaus (sonst abgeschnitten) */ .brand .wm{overflow:visible} /* Sticker-Box: Limette antippen = Saft explodiert, alles in Limettentönen */ .pile-splats{position:absolute;inset:0;overflow:hidden;border-radius:24px;pointer-events:none} .pile-splats i{position:absolute;opacity:.7;animation:splat .45s cubic-bezier(.2,.9,.3,1.3) both} @keyframes splat{from{transform:scale(.1);opacity:0}to{transform:none;opacity:.7}} .pile::before{transition:background-color .6s var(--ease)} .pile.juiced::before{background-color:#F7FAD8} .pile .pb{transition:background-color .45s var(--ease),color .45s var(--ease)} .pb.is-juiced{color:var(--ink)} .pb.is-juiced .pb-code{color:var(--ink)} .juice-dot{position:fixed;left:0;top:0;z-index:9998;border:1.5px solid var(--ink);border-radius:50%;pointer-events:none} /* Runde 16 (24.10.2026): Footer = Logo links mit Satz darunter, Kontakt rechts */ .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end} .footer-logo{justify-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:14px} .footer-logo .footer-text{margin:0;max-width:none;font:600 clamp(1rem,.95rem + .3vw,1.15rem)/1.35 var(--f-display);color:var(--ink)} @media (max-width:860px){ .footer-grid{grid-template-columns:minmax(0,1fr)} .footer-logo{justify-self:center;align-items:center} }