/* Lokale Schriften (Kanit, Nunito Sans), kein Abruf bei Google */
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/kanit-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/kanit-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/kanit-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/kanit-700-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;
}
/* latin-ext */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/kanit-800-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kanit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/kanit-800-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;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/nunitosans-700-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;
}
:root{
  --orange:#f75c1e; --dark:#2d2d2d; --peach:#fce4d6; --grey:#d9d9d9;
  --soft:#fda37a; --bright:#fb793f; --rust:#b5400e; --cream:#f1ede1;
  --shadow:6px 6px 0 var(--dark);
  --head:'Kanit','Arial Black',Arial,sans-serif;
  --body:'Nunito Sans',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--dark);font-size:18px;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:800;line-height:1;letter-spacing:.025em;font-variant-ligatures:no-common-ligatures;font-feature-settings:"liga" 0,"clig" 0}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
section{position:relative}
.eyebrow{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin-bottom:18px}

/* Plakette im Stil der Beiträge (Orange nur mit großer weißer Schrift, Kontrast 3,4:1) */
.plaque{display:inline-block;background:var(--cream);border:4px solid var(--dark);border-radius:14px;box-shadow:var(--shadow);padding:.12em .3em .18em;text-transform:uppercase;transform:rotate(-1.6deg)}
.plaque.orange{background:var(--orange);color:#fff}

/* Buttons: dunkel mit Cremeschrift (Kontrast 11:1), Orange als Schatten */
.btn{--sh:var(--orange);display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:19px;text-decoration:none;padding:14px 26px;border:3px solid var(--dark);border-radius:12px;background:var(--dark);color:var(--cream);box-shadow:5px 5px 0 var(--sh);transition:transform .15s,box-shadow .15s}
.btn:hover,.btn:focus-visible{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--sh)}
.btn.ghost{--sh:var(--dark);background:var(--cream);color:var(--dark)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Ecken Navigation */
.corner{position:fixed;z-index:50;font-family:var(--head);font-weight:700}
.logo{top:14px;left:20px;display:block;line-height:0}
.logo img{height:68px;width:auto;transition:transform .25s}
.logo:hover img{transform:rotate(-6deg) scale(1.06)}
.menu-btn{top:20px;right:24px;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:10px;box-shadow:4px 4px 0 var(--orange);padding:6px 16px;font-size:18px;cursor:pointer;font-family:var(--head)}
.sticker{bottom:22px;left:24px;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:12px;box-shadow:4px 4px 0 var(--orange);padding:8px 16px;text-decoration:none;font-size:16px;transform:rotate(-2deg);transition:transform .2s}
.sticker:hover{transform:rotate(0) scale(1.05)}
.counter{bottom:22px;right:24px;font-size:16px;background:var(--cream);border:3px solid var(--dark);border-radius:10px;padding:4px 12px;box-shadow:4px 4px 0 var(--dark)}

/* Menü Overlay */
.overlay{position:fixed;inset:0;z-index:80;background:var(--bright);display:grid;place-items:center;clip-path:circle(0 at calc(100% - 60px) 40px);transition:clip-path .6s cubic-bezier(.7,0,.2,1);visibility:hidden}
.overlay.open{clip-path:circle(150% at calc(100% - 60px) 40px);visibility:visible}
.overlay nav{display:flex;flex-direction:column;gap:6px}
.overlay a{font-family:var(--head);font-weight:800;font-size:clamp(44px,9vw,110px);line-height:1.05;text-decoration:none;color:var(--dark);display:flex;align-items:baseline;gap:18px}
.overlay a small{font-size:18px;font-weight:700}
.overlay a:hover{color:var(--cream)}
.overlay .close{position:absolute;top:20px;right:24px;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:10px;padding:6px 16px;font-family:var(--head);font-weight:700;font-size:18px;cursor:pointer}
.overlay .note{position:absolute;bottom:24px;left:24px;right:24px;font-size:15px;color:var(--dark)}

/* Startanimation: Video, einmal pro Sitzung. Auf breiten Bildschirmen füllt eine unscharfe Kopie die Seiten. */
.intro{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 45%,#d6d4d1,#bcbab7);overflow:hidden;transition:opacity 1s ease}
.intro.done{opacity:0;pointer-events:none}
.intro video{position:absolute;display:block}
.intro-v{top:0;left:50%;height:100%;width:calc(100vh*9/16);transform:translateX(-50%);object-fit:cover;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 18%,#000 82%,transparent 100%)}
@media(max-aspect-ratio:9/16){.intro-v{left:0;width:100%;transform:none;-webkit-mask-image:none;mask-image:none}}
.intro-skip{position:absolute;z-index:2;right:24px;bottom:24px;font-family:var(--head);font-weight:700;font-size:17px;color:var(--dark);background:var(--cream);border:3px solid var(--dark);border-radius:12px;padding:8px 18px;box-shadow:4px 4px 0 var(--orange);cursor:pointer}
.intro-skip:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--orange)}
@keyframes up{to{transform:none}}

/* Hero */
.hero{min-height:100svh;padding:130px 0 90px;display:flex;align-items:center;background:var(--cream)}
.hero .wrap{position:relative;width:min(1400px,100% - 48px)}
.hero h1{font-size:clamp(46px,6.6vw,112px);letter-spacing:.015em;max-width:min(8.6em,58%);position:relative;z-index:2}
.hero .sub,.hero .trust{max-width:min(34em,56%)}
.hero h1 .plaque{font-size:.92em;margin-top:.12em}
.hero p.sub{font-size:clamp(18px,1.6vw,22px);margin:34px 0 34px;position:relative;z-index:2}
.hero .cta{display:flex;flex-wrap:wrap;gap:18px;position:relative;z-index:2}
.shot{position:absolute;border:4px solid var(--dark);border-radius:14px;box-shadow:8px 8px 0 var(--dark);overflow:hidden;background:var(--grey);will-change:transform;transform:rotate(var(--r));animation:float var(--d) ease-in-out var(--delay) infinite}
.shot img{width:100%;height:100%;object-fit:cover}
/* Schwebende Animation: sanft auf und ab, dazu leichtes Wippen */
@keyframes float{
  0%,100%{transform:translateY(0) rotate(var(--r))}
  50%{transform:translateY(-22px) rotate(calc(var(--r) + 2deg))}
}
.s1{--r:3deg;--d:6.5s;--delay:0s;--w1:clamp(220px,25vw,380px);width:var(--w1);aspect-ratio:3/4;right:3%;top:calc(28px + var(--w1) * .044 + clamp(46px,6.6vw,112px) * .18)}
.s2{--r:-4deg;--d:5.2s;--delay:-1.7s;width:clamp(170px,19vw,290px);aspect-ratio:4/3;right:calc(3% + clamp(220px,25vw,380px) * .62);top:calc(28px + clamp(220px,25vw,380px) * .044 + clamp(46px,6.6vw,112px) * .18 + clamp(220px,25vw,380px) * 4 / 3 - 90px);z-index:2}
.s3{--r:5deg;--d:7.4s;--delay:-3.1s;width:clamp(120px,13vw,200px);aspect-ratio:3/4;right:0;bottom:-60px;z-index:3}
.trust{margin-top:56px;font-family:var(--head);font-weight:600;font-size:17px;position:relative;z-index:2}
.trust b{color:var(--rust)}

/* Laufband */
.marquee{background:var(--orange);border-block:4px solid var(--dark);overflow:hidden;transform:rotate(-1deg);margin:30px -10px;position:relative;z-index:5}
.marquee div{display:flex;gap:48px;width:max-content;padding:14px 0;animation:mq 28s linear infinite;font-family:var(--head);font-weight:800;font-size:clamp(22px,3vw,38px);text-transform:uppercase;color:var(--cream)}
@keyframes mq{to{transform:translateX(-50%)}}

/* Problem */
.problem{background:var(--dark);color:var(--cream);padding:120px 0}
.problem h2{font-size:clamp(40px,6.5vw,100px);margin-bottom:36px}
.problem h2 .plaque{background:var(--orange);color:#fff}
.problem .lead{max-width:44em;font-size:20px;margin-bottom:18px}
.problem .lead strong{color:var(--soft)}
.pain{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:44px 0 40px;list-style:none}
.pain li{background:var(--cream);color:var(--dark);border:4px solid var(--cream);border-radius:14px;box-shadow:6px 6px 0 var(--orange);padding:24px;font-family:var(--head);font-weight:600;font-size:21px;line-height:1.25;transition:transform .2s}
.pain li:nth-child(odd){transform:rotate(-1deg)}
.pain li:nth-child(even){transform:rotate(1deg)}
.pain li:hover{transform:rotate(0) translateY(-4px)}
.problem .closer{font-family:var(--head);font-weight:800;font-size:clamp(28px,3.4vw,48px);color:var(--soft)}

/* Leistungen: Karten drehen beim Hovern und zeigen ein Foto */
.services{padding:130px 0 110px}
.services h2{font-size:clamp(38px,6vw,92px);margin-bottom:56px;max-width:12em}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.card{display:block;perspective:1400px;text-decoration:none;color:var(--dark);min-height:360px}
.card .inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.1,.2,1)}
.card:hover .inner,.card:focus-visible .inner,.card.flip .inner{transform:rotateY(180deg)}
.face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--dark);border-radius:18px;box-shadow:8px 8px 0 var(--dark);overflow:hidden}
.front{padding:34px 34px 38px;display:flex;flex-direction:column}
.back{transform:rotateY(180deg);position:relative;background:var(--dark)}
.back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.back::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(45,45,45,.92) 0,rgba(45,45,45,.15) 55%,transparent 100%)}
.back .cap{position:absolute;left:30px;right:30px;bottom:26px;z-index:2;color:var(--cream)}
.back .cap h3{font-size:clamp(26px,2.8vw,38px);margin-bottom:8px}
.back .cap span{font-family:var(--head);font-weight:700;font-size:19px;color:var(--soft)}
.card .n{font-family:var(--head);font-weight:800;font-size:90px;line-height:.9;margin-bottom:14px;color:var(--rust)}
.card h3{font-size:clamp(28px,3vw,40px);margin-bottom:14px}
.card p{font-size:18px;margin-bottom:22px}
.card .more{margin-top:auto;font-family:var(--head);font-weight:700;font-size:19px}
.card .more::after{content:" →"}
.c1 .front{background:var(--soft)}.c1 .n{color:var(--dark)}
.c2 .front{background:var(--peach)}
.c3 .front{background:var(--grey)}.c3 .n{color:var(--dark)}
.c4 .front{background:var(--cream)}

/* Ablauf: ein Weg, der sich beim Scrollen zeichnet */
.steps{background:var(--peach);padding:120px 0 130px;border-block:4px solid var(--dark)}
.steps h2{font-size:clamp(36px,5.4vw,84px);margin-bottom:70px;max-width:13em}
.trail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start;padding-top:36px}
.route{position:absolute;left:0;top:0;width:100%;height:220px;overflow:visible;pointer-events:none;z-index:0}
.route path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.route .base{stroke:var(--dark);stroke-opacity:.28;stroke-width:4;stroke-dasharray:2 14}
.route .draw{stroke:var(--orange);stroke-width:9}
.runner{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;background:var(--orange);border:4px solid var(--dark);border-radius:8px;box-shadow:3px 3px 0 var(--dark);z-index:2;pointer-events:none;will-change:transform}
.step{position:relative;z-index:1;background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:var(--shadow);padding:54px 28px 34px;opacity:0;transform:translateY(46px) scale(.95);transition:opacity .6s,transform .7s cubic-bezier(.2,.8,.2,1)}
.step:nth-child(4){margin-top:90px}
.step.in{opacity:1;transform:none}
.step .badge{position:absolute;top:-34px;left:50%;margin-left:-33px;width:66px;height:66px;display:grid;place-items:center;background:var(--orange);color:#fff;border:4px solid var(--dark);border-radius:14px;font-family:var(--head);font-weight:800;font-size:38px;transform:rotate(-5deg);box-shadow:3px 3px 0 var(--dark)}
.step h3{font-size:28px;margin:14px 0 12px}
.ill{display:block;width:150px;height:100px;margin:0 auto 6px;opacity:0;transition:opacity .3s .15s}
.step.in .ill{opacity:1}
.ill *{transform-box:fill-box;transform-origin:center}
.ill .st{fill:none;stroke:var(--dark);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ill .of{fill:var(--orange)}.ill .cf{fill:var(--cream)}.ill .df{fill:var(--dark)}.ill .pf{fill:var(--peach)}
/* Illustrationen laufen als Schleife: jedes Element baut sich nacheinander immer wieder neu auf */
.step.in .pop{animation:pop 3s cubic-bezier(.3,1.6,.5,1) infinite both;animation-delay:var(--dl,.2s)}
@keyframes pop{0%{transform:scale(0)}18%,100%{transform:scale(1)}}
.step.in .rise{animation:rise 3s cubic-bezier(.3,1.3,.5,1) infinite both;animation-delay:var(--dl,.2s)}
.rise{transform-origin:50% 100%}
@keyframes rise{0%{transform:scaleY(0)}23%,100%{transform:scaleY(1)}}
.step.in .dash{stroke-dasharray:140;animation:dash 3s ease-out infinite both;animation-delay:var(--dl,.4s)}
@keyframes dash{0%{stroke-dashoffset:140}30%,100%{stroke-dashoffset:0}}
.step.in .dot{animation:blink 1.2s ease-in-out infinite;animation-delay:var(--dl,0s)}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}


/* Warum */
.why{padding:130px 0}
.why .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:center}
.why h2{font-size:clamp(36px,5vw,76px);margin-bottom:34px}
.why ul{list-style:none;display:grid;gap:10px}
.why li{padding:10px 10px 10px 54px;position:relative;border-radius:12px;transition:background .25s,transform .25s}
.why li::before{content:"";position:absolute;left:8px;top:13.6px;width:28px;height:28px;background:var(--orange);border:3px solid var(--dark);border-radius:6px;box-shadow:3px 3px 0 var(--dark);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .25s,box-shadow .25s}
.why li:hover{background:var(--peach);transform:translateX(6px)}
/* Beim Hovern dreht sich das Rechteck weg und wird zum Mini Logo */
.why li::after{content:"";position:absolute;left:3px;top:3.6px;width:44px;height:48px;background:url(img/logo-sm-neu.webp) center/contain no-repeat;transform:rotate(-180deg) scale(0);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .25s;pointer-events:none}
.why li:hover::before{transform:rotate(180deg) scale(0);opacity:0;box-shadow:none}
.why li:hover::after{transform:rotate(0) scale(1);opacity:1}
.why li strong{font-family:var(--head);font-size:22px;display:block}
.photo{border:4px solid var(--dark);border-radius:16px;box-shadow:10px 10px 0 var(--dark);overflow:hidden;transform:rotate(1.5deg);background:var(--grey)}
.photo img{width:100%;height:100%;object-fit:cover}

/* Stimmen */
.voices{background:var(--orange);padding:120px 0;border-block:4px solid var(--dark)}
.voices h2{font-size:clamp(36px,5.4vw,84px);margin-bottom:56px;color:var(--cream)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.quote{perspective:1400px;display:block;margin:0}
.qin{display:grid;height:100%;min-height:300px;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.1,.2,1)}
.qface{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);overflow:hidden}
.qfront{background:var(--cream);padding:34px 28px 28px;display:flex;flex-direction:column}
.qback{display:none;transform:rotateY(180deg);position:relative;background:var(--peach);align-items:center;justify-content:center}
.qback .ini{font-family:var(--head);font-weight:800;font-size:96px;color:var(--rust)}
.qback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qback::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(45,45,45,.9) 0,transparent 45%)}
.qback .cap{position:absolute;left:26px;right:26px;bottom:22px;z-index:2;color:var(--cream);font-family:var(--head);font-weight:800;font-size:26px;line-height:1.15}
.qback .cap small{display:block;font-size:16px;font-weight:600;color:var(--soft);margin-top:4px}
/* Drehkacheln nur am Desktop mit Maus */
@media(min-width:901px) and (hover:hover){
  .qback{display:flex}
  .quote:hover .qin,.quote:focus-within .qin{transform:rotateY(180deg)}
}
.quote:nth-child(1){transform:rotate(-1.2deg)}.quote:nth-child(2){transform:rotate(1deg) translateY(14px)}.quote:nth-child(3){transform:rotate(-.6deg)}
.quote q{font-family:var(--head);font-weight:600;font-size:23px;line-height:1.3;quotes:"„" "“";margin-bottom:22px}
.quote cite{margin-top:auto;font-style:normal;font-weight:700;color:var(--rust)}
.voices .all{margin-top:60px}
.voices .btn{--sh:var(--cream)}

/* Über uns: Schieberegler skizziert / echt */
.about{padding:130px 0}
.about .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.ba{--pos:50%;position:relative;aspect-ratio:4/3;border:6px solid var(--soft);border-radius:18px;box-shadow:12px 12px 0 var(--peach);overflow:hidden;background:#fff;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .sketch{position:absolute;inset:0;background:#fff;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba .sketch img{filter:grayscale(1) contrast(1.1)}
.ba .line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.ba .knob{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:3px solid #fff;background:rgba(45,45,45,.55);display:grid;place-items:center;pointer-events:none;color:#fff;font-size:22px;font-weight:700;letter-spacing:-2px}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.ba input::-webkit-slider-thumb{-webkit-appearance:none;width:4px;height:600px}
.ba input::-moz-range-thumb{width:4px;height:600px;border:0}
.ba:focus-within{outline:3px solid var(--orange);outline-offset:4px}
.about .tag{display:flex;justify-content:center;text-align:center;margin-top:18px;font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--rust)}
.about h2{font-size:clamp(36px,5vw,76px);margin-bottom:26px}
.about p{margin-bottom:22px;max-width:34em}

/* FAQ */
.faq{background:var(--cream);padding:30px 0 130px}
.faq h2{font-size:clamp(34px,4.6vw,70px);margin-bottom:44px}
details{border:4px solid var(--dark);border-radius:14px;background:var(--peach);box-shadow:5px 5px 0 var(--dark);margin-bottom:20px}
summary{cursor:pointer;list-style:none;font-family:var(--head);font-weight:700;font-size:24px;padding:20px 64px 20px 26px;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-52%);font-size:38px;color:var(--rust);transition:transform .25s}
details[open] summary::after{transform:translateY(-52%) rotate(45deg)}
details p{padding:0 26px 24px;max-width:46em}
/* Fragen belegen die linken zwei Drittel, die Antwort öffnet sich im rechten Drittel */
/* Nummerierung der Fragen, nur am Desktop */
@media(min-width:901px){
  .faq-list{counter-reset:q}
  .faq-list details{counter-increment:q}
  .faq-list summary::before{content:counter(q,decimal-leading-zero);font-family:var(--head);font-weight:800;color:var(--rust);display:inline-block;width:1.5em;margin-right:12px}
}
/* Abschlusskarte: führt zum Kanalcheck, nur am Desktop */
.faq-more{display:none;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;text-decoration:none;color:var(--cream);background:var(--dark);border:4px solid var(--dark);border-radius:14px;box-shadow:5px 5px 0 var(--orange);padding:20px 26px;font-family:var(--head);font-weight:700;font-size:22px;line-height:1.25;transition:transform .2s,box-shadow .2s}
.faq-more span{color:var(--soft);white-space:nowrap}
.faq-more:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--orange)}
@media(min-width:901px){.faq-more{display:flex}}
/* Die Antwort fährt wie eine Schublade hinter der angeklickten Frage nach rechts heraus. Am Handy bleibt es ein normales Aufklappen. */
@media(min-width:901px){
  .faq-list{position:relative;width:calc(66.666% - 20px)}
  .faq-list details{position:relative;background:none;border:0;box-shadow:none}
  .faq-list summary{position:relative;z-index:2;background:var(--peach);border:4px solid var(--dark);border-radius:14px;box-shadow:5px 5px 0 var(--dark);transition:background .25s}
  .faq-list details[open] summary{background:var(--soft)}
  .faq-list details p{position:absolute;z-index:1;top:0;left:calc(100% + 20px);width:calc(50% - 10px);max-width:none;box-sizing:border-box;padding:28px 26px;background:var(--orange);color:#fff;font-size:19px;line-height:1.5;border:4px solid var(--dark);border-radius:14px;box-shadow:5px 5px 0 var(--dark);animation:faqout .55s cubic-bezier(.25,1,.35,1) both}
  /* untere Fragen wachsen nach oben, damit die Antwort nicht aus dem Abschnitt ragt */
  .faq-list details:nth-child(n+3) p{top:auto;bottom:0}
  @keyframes faqout{from{transform:translateX(calc(-100% - 40px))}to{transform:none}}
  /* kleiner Pfeil zeigt von der Antwort zur Frage */
  .faq-list details p::before{content:"";position:absolute;left:-13px;top:22px;width:20px;height:20px;background:var(--orange);border-left:4px solid var(--dark);border-bottom:4px solid var(--dark);border-radius:0 0 0 4px;transform:rotate(45deg)}
  .faq-list details:nth-child(n+3) p::before{top:auto;bottom:22px}
  /* Hinweiskarte im rechten Drittel, solange nichts offen ist */
  .faq-list::after{content:"← Klick auf ein Plus";position:absolute;top:0;left:calc(100% + 20px);width:calc(50% - 10px);box-sizing:border-box;padding:28px 26px;border:4px dashed var(--soft);border-radius:14px;color:var(--rust);font-family:var(--head);font-weight:700;font-size:20px;line-height:1.35;transition:opacity .3s}
  .faq-list:has(details[open])::after{opacity:0}
}

/* Abschluss */
.final{background:var(--dark);color:var(--cream);padding:120px 0 150px;overflow:hidden}
.final .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center}
.final h2{font-size:clamp(40px,6.4vw,100px);margin-bottom:28px}
.final h2 .plaque{background:var(--orange);color:#fff}
/* Kasten ploppt auf, sobald er ins Bild kommt */
.plaque.pop{transform:rotate(-1.6deg) scale(0)}
.plaque.pop.in{animation:plaqpop .75s cubic-bezier(.3,1.5,.5,1) .2s both}
@keyframes plaqpop{0%{transform:rotate(-9deg) scale(0)}55%{transform:rotate(1.2deg) scale(1.14)}100%{transform:rotate(-1.6deg) scale(1)}}
.final p{max-width:32em;margin-bottom:34px;font-size:20px}
.final .contact{margin-top:30px;font-size:17px;color:var(--grey)}
.final .contact a{color:var(--soft)}
.final .contact .nowrap{white-space:nowrap}
.final .photo{box-shadow:10px 10px 0 var(--orange);border-color:var(--cream);max-width:440px;margin-inline:auto}
/* Foto schwimmt sanft auf und ab (translate und rotate laufen neben dem Einblenden) */
.final .photo.swim{animation:swim 6.5s ease-in-out infinite}
@keyframes swim{
  0%,100%{translate:0 0;rotate:0deg}
  35%{translate:6px -16px;rotate:1.4deg}
  70%{translate:-6px -6px;rotate:-1deg}
}
.final .btn{background:var(--cream);color:var(--dark);--sh:var(--orange);border-color:var(--cream)}

/* Footer */
footer{background:#232323;color:var(--cream);padding:90px 0 96px;font-size:17px;border-top:6px solid var(--orange)}
.f-top{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:48px}
.f-name{font-family:var(--head);font-weight:800;font-size:clamp(34px,3.4vw,50px);line-height:1;letter-spacing:.02em;color:var(--cream);margin-bottom:18px}
.f-name span{color:var(--orange)}
.f-claim{max-width:24em;margin-bottom:26px;line-height:1.5}
.f-h{font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:16px}
.f-col ul{list-style:none;display:grid;gap:11px}
footer a{color:var(--cream);text-decoration:none;font-weight:600;background:linear-gradient(var(--orange),var(--orange)) 0 100%/0 0 no-repeat;transition:background-size .25s,color .2s}
footer a:hover{background-size:100% 3px}
footer .btn{background:var(--cream);color:var(--dark);border-color:var(--cream);--sh:var(--orange);background-image:none}
.f-social{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.f-social a,.chan a{display:inline-flex;align-items:center;gap:10px;background-image:none}
.f-social a{width:50px;height:50px;justify-content:center;background:var(--cream);color:var(--dark);border:3px solid var(--cream);border-radius:14px;box-shadow:4px 4px 0 var(--orange);transition:transform .2s,box-shadow .2s}
.f-social a:hover{transform:translate(-2px,-3px) rotate(-4deg);box-shadow:6px 7px 0 var(--orange)}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.f-col .ico{width:20px;height:20px}
.f-bottom{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:flex-start;align-items:center;margin-top:64px;padding-top:24px;border-top:3px solid rgba(241,237,225,.28);font-size:15px}
.f-bottom nav{display:flex;flex-wrap:wrap;gap:8px 24px}
/* Nach oben Button */
.totop{right:24px;bottom:76px;width:52px;height:52px;display:grid;place-items:center;background:var(--orange);color:var(--dark);border:3px solid var(--dark);border-radius:14px;box-shadow:4px 4px 0 var(--dark);text-decoration:none;font-size:26px;line-height:1;opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);transition:opacity .3s,transform .3s cubic-bezier(.3,1.5,.5,1),visibility .3s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-4px) scale(1.05)}
/* Kanäle im Menü und im Kontaktabschnitt */
.overlay .social{position:absolute;left:24px;bottom:64px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.overlay .social span{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.overlay .social a{font-size:18px;font-weight:700;display:inline-flex;gap:8px;align-items:center;background:var(--cream);color:var(--dark);border:3px solid var(--dark);border-radius:12px;padding:8px 16px;box-shadow:4px 4px 0 var(--dark);line-height:1.2}
.overlay .social a:hover{color:var(--dark);transform:translate(-2px,-2px)}
.chan{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px;font-size:17px}
.chan span{color:var(--grey)}
.final .chan a{color:var(--cream);border:3px solid var(--cream);border-radius:12px;padding:8px 16px;font-family:var(--head);font-weight:700;text-decoration:none;transition:background .2s,color .2s}
.final .chan a:hover{background:var(--cream);color:var(--dark)}
@media(max-width:900px){
  .f-top{grid-template-columns:1fr 1fr;gap:40px}
  .f-brand{grid-column:1/-1}
  .totop{bottom:22px;right:16px}
}
@media(max-width:560px){.f-top{grid-template-columns:1fr}.overlay .social{bottom:84px}}

/* Einblenden beim Scrollen */
.rv{opacity:0;transform:translateY(34px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.quote.rv.in:nth-child(1){transform:rotate(-1.2deg)}.quote.rv.in:nth-child(2){transform:rotate(1deg) translateY(14px)}.quote.rv.in:nth-child(3){transform:rotate(-.6deg)}

@media(max-width:900px){
  body{font-size:17px}
  .logo img{height:54px}
  .hero{padding:110px 0 60px;align-items:flex-start}
  .hero h1,.hero .sub,.hero .trust{max-width:none}
  .hero .shots{display:flex;gap:14px;margin:40px 0 0;position:relative;height:250px}
  .s1{width:46%;right:2%;top:0}
  .s2{width:44%;right:auto;left:0;bottom:auto;top:44px}
  .s3{width:26%;right:46%;bottom:-20px}
  .cards,.quotes,.why .grid,.about .grid,.final .grid{grid-template-columns:1fr}
  .trail{grid-template-columns:1fr;gap:64px;padding:30px 0 0 56px}
  .route,.runner{display:none}
  .trail::before,.trail::after{content:"";position:absolute;left:14px;top:50px;bottom:40px;width:8px;border-radius:4px}
  .trail::before{background:repeating-linear-gradient(to bottom,rgba(45,45,45,.28) 0 4px,transparent 4px 16px);width:4px;left:16px}
  .trail::after{background:var(--orange);transform-origin:top;transform:scaleY(var(--p,0))}
  .step:nth-child(4){margin-top:0}
  .step .badge{left:-56px;top:20px;margin-left:0;width:54px;height:54px;font-size:30px}
  .step{padding-top:34px}
  .why .grid{gap:40px}
  .about .grid,.final .grid{gap:50px}
  .sticker{font-size:14px;padding:6px 12px}
  .counter{display:none}
  .card{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .intro{display:none}
  .marquee div{animation:none}
  .shot,.final .photo.swim{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .overlay,.step,.card .inner,.qin,.why li,.why li::before,.why li::after{transition:none}
  .step{opacity:1;transform:none}.step .ill,.step .pop,.step .rise,.step .dash,.step .dot{opacity:1;animation:none}
}

/* ===== Unterseiten (Leistungen, Referenzen, Über uns, Kontakt) ===== */
.overlay a[aria-current="page"]{color:var(--cream)}
.sub-hero{padding:170px 0 80px;background:var(--cream)}
.sub-hero h1{font-size:clamp(42px,6.2vw,100px);max-width:13em}
.sub-hero h1 .plaque{font-size:.92em;margin-top:.1em}
.sub-hero .lead{font-size:clamp(19px,1.7vw,24px);max-width:34em;margin-top:28px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.chips a{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;font-size:17px;text-decoration:none;background:var(--cream);color:var(--dark);border:3px solid var(--dark);border-radius:12px;padding:8px 18px;box-shadow:4px 4px 0 var(--dark);transition:transform .15s,box-shadow .15s,background .15s}
.chips a:hover{background:var(--peach);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--dark)}
.chips .ico{width:20px;height:20px}

/* Leistungen */
.svc{padding:110px 0;border-top:4px solid var(--dark)}
.svc.alt{background:var(--peach)}
.svc .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.svc .num{font-family:var(--head);font-weight:800;font-size:90px;line-height:.9;color:var(--rust);margin-bottom:10px}
.svc h2{font-size:clamp(32px,4.2vw,64px);margin-bottom:24px;max-width:12em}
.svc h3{font-size:24px;margin:30px 0 12px}
.svc p{margin-bottom:14px;max-width:40em}
.ticks{list-style:none;display:grid;gap:10px;margin:8px 0 18px;max-width:40em}
.ticks li{position:relative;padding-left:34px}
.ticks li::before{content:"";position:absolute;left:0;top:calc(.8em - 8px);width:16px;height:16px;background:var(--orange);border:3px solid var(--dark);border-radius:4px;box-shadow:2px 2px 0 var(--dark)}
.aside{position:sticky;top:100px;display:grid;gap:30px}
.pic{border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);overflow:hidden;aspect-ratio:4/3;background:var(--grey)}
.pic img{width:100%;height:100%;object-fit:cover}
.pcard{background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--orange);padding:28px}
.price{font-family:var(--head);font-weight:800;font-size:clamp(30px,3vw,44px);line-height:1.05;letter-spacing:.02em}
.price small{display:block;font-size:15px;font-weight:700;color:var(--rust);letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.pcard p{font-size:16px;margin:12px 0 0;max-width:none}
.good{background:var(--dark);color:var(--cream);border-radius:12px;padding:14px 18px;margin-top:18px;font-size:16px;line-height:1.45}
.good b{color:var(--soft)}
.pcard .btn{margin-top:22px;width:100%;justify-content:center;text-align:center}
.opt{background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:6px 6px 0 var(--dark);padding:26px 28px;margin:26px 0;max-width:40em}
.opt h3{margin-top:0}
.opt .price{font-size:30px;margin:14px 0 6px}
.opt .btn{margin-top:14px}
.cta-band{background:var(--dark);color:var(--cream);padding:120px 0 130px}
.cta-band h2{font-size:clamp(36px,5.4vw,84px);margin-bottom:24px;max-width:13em}
.cta-band p{max-width:32em;font-size:20px;margin-bottom:34px}
.cta-band .btn{background:var(--cream);color:var(--dark);--sh:var(--orange);border-color:var(--cream)}

/* Referenzen */
.vgrid{columns:3 300px;column-gap:28px}
.vcard{break-inside:avoid;margin-bottom:28px;background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:6px 6px 0 var(--dark);padding:28px}
.vcard:nth-child(3n+2){background:var(--peach)}
.stag{display:inline-block;background:var(--orange);color:#fff;border:3px solid var(--dark);border-radius:8px;padding:1px 10px;font-family:var(--head);font-weight:700;font-size:14px;margin-bottom:14px}
.vcard q{display:block;font-family:var(--head);font-weight:600;font-size:21px;line-height:1.35;quotes:"„" "“";margin-bottom:18px}
.vcard .who{display:flex;align-items:center;gap:14px;font-weight:700;line-height:1.3}
.vcard .who img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid var(--dark);flex:none}
.vcard .who small{display:block;color:var(--rust);font-weight:700}
.vcard .who a{display:block;color:var(--dark);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.vcard .who a:hover{color:var(--orange)}
.proj{padding:100px 0;border-top:4px solid var(--dark)}
.proj.alt{background:var(--peach)}
.proj h2{font-size:clamp(32px,4.2vw,60px);margin-bottom:14px}
.proj .lead{max-width:36em;margin-bottom:8px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:34px}
.pc{background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:6px 6px 0 var(--dark);padding:26px;display:flex;flex-direction:column;gap:10px}
.pc h3{font-family:var(--head);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:.02em}
.pc .more{margin-top:auto;padding-top:8px;font-family:var(--head);font-weight:700;color:var(--rust);text-decoration:none}
.pc .more:hover{text-decoration:underline}
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:34px}
.vids figure{display:grid;gap:12px}
.vids video{width:100%;max-height:520px;object-fit:contain;border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);background:#111}
.vids figcaption{font-family:var(--head);font-weight:700}

/* Über uns */
.about-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.sub-block{padding:100px 0;border-top:4px solid var(--dark)}
.sub-block.alt{background:var(--peach)}
.sub-block h2{font-size:clamp(32px,4.2vw,60px);margin-bottom:26px;max-width:14em}
.story p{margin-bottom:18px;max-width:40em;font-size:19px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.person{background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);overflow:hidden;display:flex;flex-direction:column}
.person .ph{aspect-ratio:4/3;overflow:hidden;border-bottom:4px solid var(--dark)}
.person .ph img{width:100%;height:100%;object-fit:cover}
.person .tx{padding:26px 28px 30px}
.person h3{font-size:38px;margin-bottom:6px}
.person .role{color:var(--rust);font-family:var(--head);font-weight:700;margin-bottom:14px}
.person p{margin-bottom:12px}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.val{background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:6px 6px 0 var(--dark);padding:26px 28px}
.val h3{font-size:28px;margin-bottom:10px}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:10px}
.cc{display:flex;flex-direction:column;gap:8px;padding:28px;background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);text-decoration:none;transition:transform .2s,box-shadow .2s}
.cc:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--orange)}
.cc small{font-family:var(--head);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.cc strong{font-family:var(--head);font-weight:800;font-size:clamp(22px,2.2vw,32px);line-height:1.1;letter-spacing:.02em;word-break:break-word}
.cc span{font-size:16px}
.cc.primary{background:var(--dark);color:var(--cream);box-shadow:8px 8px 0 var(--orange)}
.cc.primary small{color:var(--soft)}
.cc.primary:hover{box-shadow:11px 11px 0 var(--soft)}
.contact-photo{max-width:440px;margin-inline:auto}

@media(max-width:900px){
  .sub-hero{padding:130px 0 60px}
  .svc,.sub-block,.proj{padding:70px 0}
  .svc .grid,.about-hero,.duo,.values,.contact-grid,.vids{grid-template-columns:1fr}
  .svc .grid{gap:40px}
  .aside{position:static}
  .svc .num{font-size:64px}
  .cta-band{padding:80px 0 90px}
}

/* Foto im Seitenkopf schwebt wie auf der Startseite */
.sub-hero .photo{box-shadow:10px 10px 0 var(--orange);max-width:440px;margin-inline:auto;width:100%}
.sub-hero .photo.swim{animation:swim 6.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sub-hero .photo.swim{animation:none}}
.sub-hero .tag{display:flex;justify-content:center;text-align:center;margin-top:18px;font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--rust)}
@media(max-width:560px){
  .sub-hero h1{font-size:clamp(30px,9vw,40px)}
  .sub-hero h1 .plaque{font-size:.86em}
}

/* Leistungen: Grafiken im Hintergrund des Seitenkopfs */
.sub-hero.has-art{position:relative;overflow:hidden}
.sub-hero.has-art .wrap{position:relative;z-index:1}
.hero-art{position:absolute;z-index:0;right:max(0px,calc(50% - 700px));top:48px;width:min(33vw,430px);aspect-ratio:801/799;pointer-events:none;user-select:none}
.hero-art .ha{position:absolute;height:auto;display:block}
@media(max-width:900px){.hero-art{width:min(70vw,360px);top:70px;right:-40px;opacity:.28}}
@media(prefers-reduced-motion:reduce){.hero-art .ha{animation:none!important}}

/* Aufzählungen: Beim Hovern dreht sich das Quadrat weg und wird zum Mini Logo (wie bei Warum SelfMade) */
.ticks li{transition:transform .25s}
.ticks li:hover{transform:translateX(4px)}
.ticks li::before{transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .25s,box-shadow .25s}
.ticks li::after{content:"";position:absolute;left:-8px;top:calc(.8em - 17px);width:32px;height:34px;background:url(img/logo-sm-neu.webp) center/contain no-repeat;transform:rotate(-180deg) scale(0);opacity:0;transition:transform .55s cubic-bezier(.3,1.6,.5,1),opacity .25s;pointer-events:none}
.ticks li:hover::before{transform:rotate(180deg) scale(0);opacity:0;box-shadow:none}
.ticks li:hover::after{transform:rotate(0) scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){.ticks li,.ticks li::before,.ticks li::after{transition:none}}

/* Preisblock ohne Kasten: dicke Linie oben, Hinweis als Text, Button wie auf der Startseite */
.pcard{background:none;border:0;border-radius:0;box-shadow:none;padding:0;overflow:visible}
.good{background:none;color:inherit;border-radius:0;padding:16px 0 0;margin-top:20px;border-top:3px dashed rgba(45,45,45,.3);font-size:16px;line-height:1.5}
.good b{color:var(--rust)}
.pcard .btn{width:auto;margin:26px 0 0;justify-content:flex-start;text-align:left}

/* Jede Grafik im Seitenkopf bewegt sich für sich, mit eigenem Tempo */
.ha-palette{transform-origin:50% 60%;animation:haBob 7s ease-in-out infinite}
.ha-feder{transform-origin:50% 85%;animation:haSway 6s ease-in-out infinite}
.ha-punkt{animation:haPulse 2.4s ease-in-out infinite}
.ha-dreieck{animation:haWiggle 5s ease-in-out infinite}
.ha-pinsel{transform-origin:82% 88%;animation:haSwing 3.8s ease-in-out infinite}
.ha-lineal{animation:haSlide 6.5s ease-in-out infinite}
.ha-bild{transform-origin:50% 50%;animation:haTilt 7.5s ease-in-out -2s infinite}
.ha-faecher{transform-origin:6% 18%;animation:haFan 5.2s ease-in-out infinite}
.ha-kreuz{animation:haSpin 9s linear infinite}
.ha-seite{transform-origin:50% 55%;animation:haTilt 6.2s ease-in-out -4s infinite reverse}
.ha-schnoerkel1{animation:haDrift 5.5s ease-in-out infinite}
.ha-schnoerkel2{animation:haDrift 6.8s ease-in-out -2s infinite reverse}
.ha-schnoerkel3{animation:haDrift 7.4s ease-in-out -3s infinite}
@keyframes haBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes haSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg) translateY(-6px)}}
@keyframes haPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.6}}
@keyframes haWiggle{0%,100%{transform:rotate(0) translate(0,0)}33%{transform:rotate(28deg) translate(4px,-6px)}66%{transform:rotate(-14deg) translate(-3px,4px)}}
@keyframes haSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes haSlide{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-12px,10px) rotate(-4deg)}}
@keyframes haTilt{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes haFan{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes haSpin{to{transform:rotate(360deg)}}
@keyframes haDrift{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(6px,-8px) scale(1.06);opacity:.65}}

/* Live Countdown zum nächsten Termin (KI Workshop), ohne Kästen */
.pricerow{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px 40px;margin:14px 0 6px}
.pricerow .price{margin:0}
.ticker{min-width:230px}
.t-label{font-family:var(--head);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:0!important}
.t-label .dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--orange);margin-right:9px;animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(247,92,30,.55)}50%{box-shadow:0 0 0 7px rgba(247,92,30,0)}}
.t-date{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.2;margin:6px 0 4px!important}
.t-count{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 4px;font-family:var(--head);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:0!important}
.t-count small{font-size:12px;font-weight:700;color:var(--rust);margin-right:12px;text-transform:uppercase;letter-spacing:.1em}
.t-empty{display:none;font-size:16px;margin:6px 0 0!important;max-width:16em}
.ticker.is-empty .t-date,.ticker.is-empty .t-count{display:none}
.ticker.is-empty .t-empty{display:block}
@media(prefers-reduced-motion:reduce){.t-label .dot{animation:none}}

/* Abschnitt Videoschnitt: kurzes Video statt Foto, im Originalformat 16:9 */
.pic-video{aspect-ratio:16/9;background:#111}
.pic-video video{display:block;width:100%;height:100%;object-fit:cover}



/* Footer: Kanalcheck und alle Kanäle in einer Reihe, Logo neben dem Namen */
.f-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;padding-top:6px}
.f-actions .f-social{margin-top:0;flex-wrap:nowrap}
.f-name{display:flex;align-items:center;gap:14px}
.f-logo{height:clamp(54px,5vw,72px);width:auto;flex:none}
@media(max-width:560px){.f-actions .f-social{flex-wrap:wrap}}

/* Abschlussband mit freigestelltem Foto rechts, sie steht auf der unteren Kante des Abschnitts */
.cta-band.has-photo{padding-bottom:0;overflow:hidden}
.cta-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:end}
.cta-text{padding-bottom:130px}
.cta-figure{position:relative;justify-self:center;width:min(100%,360px);height:580px;margin:0}
.cta-figure img{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 0 18px rgba(241,237,225,.28)) drop-shadow(0 0 2px rgba(241,237,225,.5))}
@media(max-width:900px){
  .cta-grid{grid-template-columns:1fr;gap:20px}
  .cta-text{padding-bottom:10px}
  .cta-figure{height:460px;width:min(100%,300px)}
}
/* Nach oben Button: heller Pfeil für mehr Kontrast */
.totop{color:#fff}

/* Abschnitt Webseiten: Handy und Laptop liegen 50/50 nebeneinander, beim Hovern dehnt sich ein Bild aus (5 zu 1), wie auf der alten Seite */
.acc{display:flex;aspect-ratio:4/3;border:4px solid var(--dark);border-radius:16px;box-shadow:8px 8px 0 var(--dark);overflow:hidden;background:var(--grey)}
.acc-item{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow .48s ease-in-out}
.acc-item+.acc-item{border-left:3px solid var(--dark)}
.acc-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.acc-item:focus-visible{outline:3px solid var(--orange);outline-offset:-6px}
.acc-item.open{flex-grow:5}
@media(hover:hover){.acc-item:hover{flex-grow:5}}
@media(prefers-reduced-motion:reduce){.acc-item{transition:none}}
.f-name{font-size:clamp(28px,2.7vw,40px);white-space:nowrap}
.f-logo{height:clamp(46px,4vw,58px)}
@media(max-width:900px){.f-top{grid-template-columns:1fr 1fr}.f-name{font-size:clamp(30px,6vw,40px)}}

/* Startseite am Handy: das lange Wort im Abschlusskasten passt in die Breite */
@media(max-width:560px){.final h2{font-size:clamp(28px,8vw,40px)}}

/* Menü: erst die persönlichen Wörter, beim Hovern wechselt das Wort zum klaren Begriff */
.overlay a .wd{display:inline-grid}
.overlay a .wd>span{grid-area:1/1;transition:transform .45s cubic-bezier(.3,.9,.3,1),opacity .3s}
.overlay a .wd .w2{transform:translateY(60%);opacity:0}
.overlay a:hover .wd .w1,.overlay a:focus-visible .wd .w1{transform:translateY(-60%);opacity:0}
.overlay a:hover .wd .w2,.overlay a:focus-visible .wd .w2{transform:none;opacity:1}
/* Touchgeräte haben kein Hovern: dort steht der klare Begriff klein daneben */
@media(hover:none){
  .overlay a .wd{display:inline-flex;align-items:baseline;gap:14px;flex-wrap:wrap}
  .overlay a .wd>span{grid-area:auto}
  .overlay a .wd .w2{transform:none;opacity:.75;font-size:18px;font-weight:700;letter-spacing:.02em}
  .overlay a:hover .wd .w1,.overlay a:focus-visible .wd .w1{transform:none;opacity:1}
}
@media(prefers-reduced-motion:reduce){.overlay a .wd>span{transition:none}}

/* Menü am Handy: Wörter oben ausrichten, Kanäle unten, damit sich beides nicht überlappt */
@media(max-width:560px){
  .overlay{place-items:start center;padding-top:100px}
  .overlay nav{width:100%;padding:0 24px}
  .overlay .social{left:24px;right:24px;bottom:22px;gap:10px}
  .overlay .social span{width:100%}
  .overlay .social a{font-size:15px;padding:6px 12px}
}

/* Kundenstimmen als wilder Kartenstapel */
.av{width:64px;height:64px;border-radius:50%;border:3px solid var(--dark);object-fit:cover;flex:none;display:flex;align-items:center;justify-content:center;background:var(--orange);color:#fff;font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:.04em}
.who2{display:flex;align-items:center;gap:16px;font-weight:700;line-height:1.3}
.who2 .av{width:84px;height:84px;font-size:28px}
.who2 small{display:block;color:var(--rust);font-weight:700}
.who2 a{display:block;font-size:15px;text-decoration:underline;text-underline-offset:3px}
.who2 a:hover{color:var(--orange)}
.stk-hint{font-family:var(--head);font-weight:700;font-size:clamp(17px,2vw,21px);color:var(--rust);text-align:center;margin:0 auto 30px;max-width:640px}
.stk-hint::before{content:"👆 "}
.ctrl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.cbtn{font-family:var(--head);font-weight:700;font-size:18px;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:12px;box-shadow:4px 4px 0 var(--orange);padding:10px 22px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.cbtn:hover,.cbtn:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--orange)}
.cbtn.l{background:var(--cream);color:var(--dark);box-shadow:4px 4px 0 var(--dark)}
.cbtn.l:hover,.cbtn.l:focus-visible{box-shadow:2px 2px 0 var(--dark)}
.cnt{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.05em}
.stk{--k:1;position:relative;max-width:780px;margin:0 auto 10px;touch-action:pan-y;outline:none}
.stk[hidden],.stk-hint[hidden],.stk-ctrl[hidden]{display:none}
.stk-on .vgrid{display:none}
.sc{position:absolute;left:30px;top:0;width:calc(100% - 60px);background:var(--cream);border:4px solid var(--dark);border-radius:16px;box-shadow:6px 6px 0 var(--dark);padding:34px;transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .35s;will-change:transform;cursor:pointer}
.sc.nt{transition:none}
.sc q{display:block;font-family:var(--head);font-weight:600;font-size:clamp(19px,2.2vw,25px);line-height:1.4;quotes:"„" "“";margin:14px 0 24px}
.sc[data-pos="0"]{transform:none;z-index:9}
.sc[data-pos="1"]{transform:translate(calc(34px*var(--k)),calc(20px*var(--k))) rotate(3.4deg);z-index:8;background:var(--peach)}
.sc[data-pos="2"]{transform:translate(calc(-30px*var(--k)),calc(34px*var(--k))) rotate(-4.6deg);z-index:7;background:var(--soft)}
.sc[data-pos="3"]{transform:translate(calc(52px*var(--k)),calc(52px*var(--k))) rotate(6.2deg);z-index:6;background:var(--cream)}
.sc[data-pos="4"]{transform:translate(calc(-48px*var(--k)),calc(66px*var(--k))) rotate(-7.8deg);z-index:5;background:var(--peach)}
.sc[data-pos="5"]{transform:translate(calc(-48px*var(--k)),calc(66px*var(--k))) rotate(-7.8deg);z-index:4;opacity:0;pointer-events:none}
.sc:not([data-pos="0"])>*{visibility:hidden}
.sc[data-pos="0"]::after{content:"Klick: nächste Stimme →";position:absolute;right:18px;top:-18px;background:var(--orange);color:#fff;border:3px solid var(--dark);border-radius:10px;box-shadow:3px 3px 0 var(--dark);font-family:var(--head);font-weight:700;font-size:14px;padding:3px 12px;transform:rotate(2deg);animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,70%,100%{transform:rotate(2deg) translateX(0)}80%{transform:rotate(2deg) translateX(-5px)}90%{transform:rotate(2deg) translateX(3px)}}
.sc.leave{transform:translateX(120%) rotate(10deg)!important;opacity:0}
.sc.leaveL{transform:translateX(-120%) rotate(-10deg)!important;opacity:0}
@media(max-width:640px){.stk{--k:.55}.sc{left:14px;width:calc(100% - 28px);padding:24px}.who2 .av{width:64px;height:64px;font-size:22px}}
@media(prefers-reduced-motion:reduce){.sc{transition:none}.sc[data-pos="0"]::after{animation:none}}
.sc .clogo{position:absolute;right:30px;top:26px;height:58px;width:auto}
@media(max-width:640px){.sc .clogo{height:42px;right:20px;top:20px}}
.pc h3{overflow-wrap:anywhere}

/* Grafik im Seitenkopf der Referenzen, jedes Teil bewegt sich für sich */
.hr-bubble{transform-origin:20% 90%;animation:haTilt 7s ease-in-out infinite}
.hr-stars{animation:haDrift 5.5s ease-in-out infinite}
.hr-thumb{transform-origin:50% 90%;animation:haSwing 3.6s ease-in-out infinite}
.hr-heart{animation:haPulse 2.4s ease-in-out infinite}
.hr-hands{animation:haBob 6.4s ease-in-out infinite}
.hr-cup{transform-origin:50% 90%;animation:haWiggle 5s ease-in-out infinite}
.hr-doodle{animation:haDrift 7s ease-in-out -2s infinite reverse}

/* Handy Mockups zum Anklicken (Reel Beispiele): wie echte Smartphones */
.phones{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,36px);margin-top:48px;align-items:start}
.phone-fig{display:grid;justify-items:center;gap:20px;min-width:0}
.phone-fig figcaption{font-family:var(--head);font-weight:700;font-size:18px;line-height:1.25;text-align:center}
.phone-fig figcaption small{display:block;font-family:var(--body);font-weight:700;font-size:14px;color:var(--rust);margin-top:2px}
.phone{position:relative;display:block;width:100%;max-width:250px;padding:8px;border:0;border-radius:15% / 7.4%;background:linear-gradient(145deg,#56565a,#1a1a1c 30%,#2b2b2e 68%,#0e0e0f);box-shadow:inset 0 0 0 2px #6a6a6f,inset 0 0 0 4px #050505,0 26px 34px -16px rgba(0,0,0,.5),0 4px 0 rgba(255,255,255,.12) inset;cursor:pointer;transition:transform .3s,box-shadow .3s;font:inherit;color:inherit}
.phone::before{content:"";position:absolute;left:-3px;top:17%;width:3px;height:6%;background:#303033;border-radius:3px 0 0 3px;box-shadow:0 52px 0 #303033,0 -34px 0 -0px #303033}
.phone::after{content:"";position:absolute;right:-3px;top:27%;width:3px;height:12%;background:#303033;border-radius:0 3px 3px 0}
.phone:hover,.phone:focus-visible{transform:translateY(-8px) rotate(-1.2deg);box-shadow:inset 0 0 0 2px #6a6a6f,inset 0 0 0 4px #050505,0 38px 40px -16px rgba(0,0,0,.55),0 4px 0 rgba(255,255,255,.12) inset}
.phone-fig:nth-child(even) .phone:hover,.phone-fig:nth-child(even) .phone:focus-visible{transform:translateY(-8px) rotate(1.2deg)}
.ph-screen{position:relative;display:block;aspect-ratio:9/19.5;border-radius:12.5% / 5.8%;overflow:hidden;background:#000}
.ph-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ph-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 32%);pointer-events:none;z-index:4}
.ph-island{position:absolute;top:2.4%;left:50%;width:27%;height:3.3%;background:#000;border-radius:30px;transform:translateX(-50%);z-index:4}
.ph-island::after{content:"";position:absolute;right:12%;top:50%;width:18%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a5a,#0a0f1c 60%)}
.ph-status{position:absolute;left:0;right:0;top:2%;height:5%;display:flex;align-items:center;justify-content:space-between;padding:0 9%;z-index:3;color:#fff;font:700 clamp(9px,.9vw,12px)/1 var(--body);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none}
.ph-status b{font-weight:800}
.ph-sig{position:absolute;right:30%;width:1.2em;height:.8em;background:linear-gradient(90deg,#fff 0 18%,transparent 18% 27%,#fff 27% 45%,transparent 45% 54%,#fff 54% 72%,transparent 72% 81%,#fff 81%);clip-path:polygon(0 100%,0 75%,27% 75%,27% 50%,54% 50%,54% 25%,81% 25%,81% 0,100% 0,100% 100%);opacity:.95}
.ph-bat{position:absolute;right:9%;width:1.6em;height:.8em;border:1.5px solid rgba(255,255,255,.9);border-radius:3px;box-sizing:border-box}
.ph-bat::before{content:"";position:absolute;inset:1.5px;right:35%;background:#fff;border-radius:1px}
.ph-play{position:absolute;left:50%;top:50%;width:22%;aspect-ratio:1;margin:-11% 0 0 -11%;background:var(--orange);border:3px solid #fff;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.45);z-index:2;transition:transform .2s,opacity .25s}
.ph-play::after{content:"";position:absolute;left:50%;top:50%;margin:-.55em 0 0 -.3em;border-left:1em solid #fff;border-top:.55em solid transparent;border-bottom:.55em solid transparent;font-size:clamp(10px,1.15vw,16px)}
.phone:hover .ph-play{transform:scale(1.1)}
.ph-hint{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);z-index:2;background:rgba(255,255,255,.92);color:var(--dark);border-radius:20px;padding:4px 10px;font:700 clamp(10px,.85vw,12px)/1.2 var(--body);white-space:nowrap;transition:opacity .25s}
.ph-home{position:absolute;left:50%;bottom:1.8%;width:34%;height:.55%;min-height:4px;background:rgba(255,255,255,.85);border-radius:5px;transform:translateX(-50%);z-index:3}
.phone.playing .ph-play,.phone.playing .ph-hint{opacity:0;pointer-events:none}
@media(max-width:1000px){.phones{grid-template-columns:repeat(5,minmax(190px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 4px 30px;margin-inline:-4px}.phone-fig{scroll-snap-align:center}}
@media(prefers-reduced-motion:reduce){.phone{transition:none}}

/* Neue Header Grafiken: Megafon (Leistungen) und Mund mit Bewertungen (Referenzen) */
.hero-art-v2{width:min(36vw,500px);top:60px}
.hl-main{transform-origin:55% 95%;animation:mpWobble 4.4s ease-in-out infinite!important}
.hl-rays{transform-origin:100% 50%;animation:mpBurst 1.7s ease-in-out infinite!important}
.hr2-mouth{transform-origin:50% 90%;animation:mpTalk 3s ease-in-out infinite!important}
.hr2-b1{transform-origin:70% 100%;animation:haBob 5.2s ease-in-out infinite!important}
.hr2-b2{transform-origin:10% 100%;animation:haBob 6s ease-in-out -2.5s infinite reverse!important}
.hr2-lines{animation:mpFlick 1.6s ease-in-out infinite!important}
@keyframes mpWobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg) translateY(-4px)}}
@keyframes mpBurst{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.1);opacity:1}}
@keyframes mpTalk{0%,100%{transform:scale(1,1)}45%{transform:scale(1.025,1.06)}70%{transform:scale(.99,.97)}}
@keyframes mpFlick{0%,100%{opacity:.25}50%{opacity:1}}
@media(max-width:900px){.hero-art-v2{width:min(70vw,360px);top:70px;right:-40px;opacity:.28}}
@media(prefers-reduced-motion:reduce){.hl-main,.hl-rays,.hr2-mouth,.hr2-b1,.hr2-b2,.hr2-lines{animation:none!important}}

/* Videoschnitt: Laptop Vorschaubilder, Logo Reveal spielt im Bildschirm, die anderen führen zu YouTube */
.vlaps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,48px);margin-top:40px}
.vlap{display:grid;gap:18px;align-content:start;min-width:0}
.vl-media{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:3/2;transition:transform .3s;font:inherit;color:inherit}
.vl-media img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 18px 18px rgba(45,45,45,.25))}
.vl-media:hover,.vl-media:focus-visible{transform:translateY(-6px) rotate(-1deg)}
.vl-video{position:absolute;left:10.4%;top:3.2%;width:79.2%;height:71.6%;object-fit:contain;background:#ebe2d6;border-radius:5px;display:none}
.vl-media.playing .vl-video{display:block}
.vlap h3{font-family:var(--head);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:.02em;margin-bottom:6px}
.vlap .more{display:inline-block;margin-top:8px;font-family:var(--head);font-weight:700;color:var(--rust);text-decoration:none}
.vlap .more:hover{text-decoration:underline}
.vlap button.more{border:0;background:none;padding:0;cursor:pointer;font-size:inherit}
@media(max-width:900px){.vlaps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vl-media{transition:none}}

/* Kopf ragt aus dem dunklen Abschnitt in den hellen darüber */
.cta-band.has-photo{position:relative;z-index:2;overflow:visible;padding-top:60px}
.cta-band.has-photo .cta-text{padding-bottom:80px}
.cta-band.has-photo .cta-figure{height:640px;margin-top:-112px;z-index:3}
@media(max-width:900px){.cta-band.has-photo{padding-top:50px}.cta-band.has-photo .cta-figure{margin-top:0;height:460px}}

/* Projekte: Laptop und Handy, Logo als Visitenkarten Mockup */
.lap{position:relative;display:block;width:100%}
.lap-scr{display:block;border:5px solid #1b1b1d;border-bottom-width:9px;border-radius:12px 12px 2px 2px;background:#1b1b1d;overflow:hidden;aspect-ratio:16/10;box-shadow:inset 0 0 0 1px #4a4a4e}
.lap-scr img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.lap-base{display:block;height:11px;margin:0 -4%;background:linear-gradient(#d9d9dc,#a9a9ad);border-radius:0 0 14px 14px;position:relative;box-shadow:0 12px 14px -8px rgba(0,0,0,.4)}
.lap-base::after{content:"";position:absolute;left:50%;top:0;width:16%;height:5px;transform:translateX(-50%);background:#bdbdc1;border-radius:0 0 8px 8px}
.pv{padding:0;overflow:visible}
.pv .pv-media{padding:20px 22px 6px}
.pv h3,.pv p,.pv .more{margin-left:28px;margin-right:28px}
.pv h3{margin-top:12px}
.pv .more{display:inline-block;margin-bottom:26px}
.pv p{margin-bottom:8px}
.combo{position:relative;display:block;padding-bottom:6%}
.combo .lap{width:86%;transition:transform .35s}
.pv:hover .combo .lap{transform:translateY(-5px) rotate(-1deg)}
.combo .ph2{position:absolute;right:2%;bottom:0;width:26%;aspect-ratio:9/19;border:5px solid #1b1b1d;border-radius:20px;background:#1b1b1d;overflow:hidden;box-shadow:0 12px 18px -6px rgba(0,0,0,.5),inset 0 0 0 1px #4a4a4e;z-index:2;transition:transform .35s}
.pv:hover .combo .ph2{transform:translateY(-4px) rotate(1.5deg)}
.combo .ph2 img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.card-mock{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:radial-gradient(120% 90% at 28% 18%,#f1ebe0,#d9d0c0 70%,#cfc5b3)}
.card-mock::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.bc{position:absolute;display:flex;align-items:center;justify-content:center;width:62%;aspect-ratio:85/55;border-radius:6px;overflow:hidden;box-shadow:0 1px 1px rgba(40,30,20,.2),0 14px 22px -8px rgba(60,45,30,.5),0 32px 40px -22px rgba(60,45,30,.4);transition:transform .45s cubic-bezier(.3,.9,.3,1)}
.bc-front{left:5%;top:27%;background:#595b5a;transform:rotate(-6deg);z-index:2}
.bc-front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%)}
.bc-front img{width:100%;height:100%;object-fit:contain}
.bc-back{right:4%;top:11%;background:#f6f1e8;transform:rotate(5deg);box-shadow:0 1px 1px rgba(40,30,20,.2),0 14px 22px -8px rgba(60,45,30,.45),inset 0 0 0 1px rgba(60,45,30,.06)}
.bc-back img{width:40%;height:auto}
.pv:hover .bc-front{transform:rotate(-9deg) translate(-3%,2%)}
.pv:hover .bc-back{transform:rotate(8deg) translate(3%,-2%)}
@media(prefers-reduced-motion:reduce){.bc,.combo .lap,.combo .ph2{transition:none}}

/* Realistische Schatten: Visitenkarten ohne Hintergrund, Laptop und Handy stehen auf dem Untergrund */
.card-mock{background:none;overflow:visible;border-radius:0}
.card-mock::before{display:none}
.bc{box-shadow:0 1px 1px rgba(30,22,14,.22),0 6px 10px -2px rgba(30,22,14,.22),0 18px 26px -8px rgba(30,22,14,.3),0 34px 42px -18px rgba(30,22,14,.3)}
.bc-back{box-shadow:0 1px 1px rgba(30,22,14,.2),0 6px 10px -2px rgba(30,22,14,.2),0 16px 24px -8px rgba(30,22,14,.28),0 30px 40px -18px rgba(30,22,14,.26),inset 0 0 0 1px rgba(60,45,30,.05)}
.lap-base{box-shadow:none}
.lap::after{content:"";position:absolute;left:-3%;right:-3%;bottom:-16px;height:22px;background:radial-gradient(ellipse at 50% 30%,rgba(25,18,10,.45),rgba(25,18,10,.18) 45%,transparent 72%);filter:blur(5px);z-index:-1}
.lap::before{content:"";position:absolute;left:4%;right:4%;bottom:-3px;height:6px;background:rgba(25,18,10,.5);filter:blur(3px);z-index:-1}
.combo .ph2{box-shadow:inset 0 0 0 1px #4a4a4e;filter:drop-shadow(0 1px 1px rgba(25,18,10,.35)) drop-shadow(0 10px 10px rgba(25,18,10,.28)) drop-shadow(0 26px 22px rgba(25,18,10,.22))}
.combo{isolation:isolate}

/* Videokarten: Überschrift und Subline einzeilig */
.vlap h3{font-size:clamp(17px,1.95vw,24px);white-space:nowrap}
.vlap figcaption p{font-size:clamp(14px,1.45vw,18px);white-space:nowrap}
@media(max-width:900px){.vlap h3{font-size:24px}.vlap figcaption p{font-size:18px}}
@media(max-width:480px){.vlap h3{font-size:clamp(17px,5.2vw,24px)}.vlap figcaption p{font-size:clamp(14px,4vw,18px)}}
.pc h3 .nw{display:inline-block;white-space:nowrap;font-size:.74em;letter-spacing:.01em;margin-top:2px}

/* Mehr Abstand zwischen Plakette und Text im Seitenkopf */
.sub-hero .lead{margin-top:48px}
@media(max-width:700px){.sub-hero .lead{margin-top:36px}}

/* Social Media Projekte: freigestellte Beitragsbeispiele mit Schatten */
.pv-art{display:block;width:100%;height:230px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(25,18,10,.25)) drop-shadow(0 12px 12px rgba(25,18,10,.22)) drop-shadow(0 26px 24px rgba(25,18,10,.16));transition:transform .35s}
.pv:hover .pv-art{transform:translateY(-4px) rotate(-.8deg)}
.pgrid .pv h3{margin-top:10px}
@media(prefers-reduced-motion:reduce){.pv-art{transition:none}}

/* Laufband liegt genau auf der Naht zwischen Header und erstem Abschnitt */
.mq-seam{position:relative;height:0;z-index:5}
.mq-seam .marquee{position:absolute;left:-10px;right:-10px;top:0;margin:0;transform:translateY(-50%) rotate(-1deg)}
.mq-seam .marquee{border-bottom-color:var(--cream)}

/* Die vier Kacheln reagieren einzeln beim Darüberfahren, jede mit eigener Bewegung */
.pain li{cursor:default;transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,background .3s}
.pain li:nth-child(1):hover{transform:translateY(-12px) rotate(-3deg) scale(1.04);box-shadow:12px 14px 0 var(--orange)}
.pain li:nth-child(2):hover{transform:translateY(-8px) rotate(3deg) scale(1.04);box-shadow:-10px 12px 0 var(--orange)}
.pain li:nth-child(3):hover{transform:translateY(-14px) rotate(-1.5deg) scale(1.05);box-shadow:10px 16px 0 var(--soft)}
.pain li:nth-child(4):hover{transform:translateY(-10px) rotate(4deg) scale(1.04);box-shadow:-12px 12px 0 var(--soft)}
@media(prefers-reduced-motion:reduce){.pain li{transition:none}.pain li:hover{transform:none}}
.services h2{max-width:none;font-size:clamp(28px,4.6vw,68px)}
@media(min-width:900px){.services h2{white-space:nowrap}}

/* Schlussabschnitt: Überschrift über die ganze Breite, darunter zweispaltig 70 zu 30 */
.final .grid{grid-template-columns:7fr 3fr;align-items:start}
.final h2{font-size:clamp(28px,3.7vw,56px);margin-bottom:44px}
@media(min-width:900px){.final h2{white-space:nowrap}}
@media(max-width:900px){.final .grid{grid-template-columns:1fr}}

/* Überschrift Problem: eine Zeile, damit "vor?" nicht allein steht */
.problem h2{font-size:clamp(30px,5.2vw,76px)}
@media(min-width:900px){.problem h2{white-space:nowrap}}

/* Abschnittsüberschriften einspaltig über der ganzen Breite, darunter zweispaltig */
.svc .svc-head{margin-bottom:40px}
.svc .svc-head h2{max-width:none;margin-bottom:0}
.svc .svc-head .num{margin-bottom:6px}
.sub-block h2,.proj h2{max-width:none}

/* Über uns: freigestelltes Schwarz Weiß Foto mit Formen im Stil der anderen Seitenköpfe */
.about-cut{position:relative;width:min(100%,500px);aspect-ratio:1/1.08;margin:0 0 0 auto}
.ac-block{position:absolute;left:10%;right:0;bottom:0;height:74%;background:var(--orange);border:4px solid var(--dark);border-radius:18px;box-shadow:12px 12px 0 var(--dark);transform:rotate(2.5deg)}
.ac-block2{position:absolute;left:0;bottom:5%;width:58%;height:52%;background:var(--peach);border:4px solid var(--dark);border-radius:18px;transform:rotate(-5deg)}
.ac-person{position:absolute;bottom:0;left:50%;height:100%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 2px 2px rgba(25,18,10,.3)) drop-shadow(0 18px 18px rgba(25,18,10,.25))}
.ac-art{position:absolute;height:auto;display:block;pointer-events:none}
.ac-tri{left:2%;top:9%;width:9%;animation:haWiggle 5s ease-in-out infinite}
.ac-cross{right:6%;top:2%;width:9%;animation:haSpin 9s linear infinite}
.ac-dot{left:22%;top:2%;width:5%;animation:haPulse 2.4s ease-in-out infinite}
.ac-sq1{right:-3%;bottom:46%;width:20%;animation:haDrift 5.5s ease-in-out infinite}
.ac-sq3{left:-6%;bottom:-3%;width:42%;animation:haDrift 7.4s ease-in-out -3s infinite;z-index:2}
@media(max-width:900px){.about-cut{margin:20px auto 0;width:min(100%,420px)}}
@media(prefers-reduced-motion:reduce){.ac-art{animation:none!important}}

/* Über uns: Herzchen, Zahlen, Animation im Kontaktband */
.story-hearts{position:relative;overflow:hidden}
.story-hearts .wrap{position:relative}
.hearts{position:absolute;right:0;top:0;bottom:0;width:30%;pointer-events:none}
.hh{position:absolute;bottom:-40px;display:block;width:var(--s,34px);opacity:0;animation:heartUp var(--t,9s) ease-in infinite;animation-delay:var(--d,0s)}
.hh svg{width:100%;height:auto;display:block;fill:var(--c,var(--orange));stroke:var(--dark);stroke-width:1.6;paint-order:stroke;animation:heartBeat 1.6s ease-in-out infinite;animation-delay:var(--d,0s)}
.h1{--s:44px;--c:var(--orange);--t:10s;--d:0s;left:20%}
.h2{--s:26px;--c:var(--soft);--t:8s;--d:-2s;left:62%}
.h3{--s:34px;--c:var(--rust);--t:11s;--d:-5s;left:40%}
.h4{--s:22px;--c:var(--peach);--t:9s;--d:-3.500s;left:80%}
.h5{--s:38px;--c:var(--soft);--t:12s;--d:-7s;left:8%}
.h6{--s:30px;--c:var(--orange);--t:9.500s;--d:-1s;left:72%}
.h7{--s:24px;--c:var(--rust);--t:10.500s;--d:-6s;left:52%}
.h8{--s:28px;--c:var(--peach);--t:8.500s;--d:-4.500s;left:30%}
@keyframes heartUp{0%{transform:translate(0,0) rotate(-8deg);opacity:0}12%{opacity:1}50%{transform:translate(-22px,-260px) rotate(8deg)}88%{opacity:1}100%{transform:translate(18px,-560px) rotate(-6deg);opacity:0}}
@keyframes heartBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@media(max-width:900px){.hearts{width:40%;opacity:.5}}
@media(prefers-reduced-motion:reduce){.hh,.hh svg{animation:none}.hh{opacity:.9;bottom:auto;top:20%}}

.story-split{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}
.stats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:34px 30px;padding:0;margin:0}
.stats li{border-top:4px solid var(--dark);padding-top:14px}
.stats .pre{display:block;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--rust)}
.stats .num{display:block;font-family:var(--head);font-weight:800;font-size:clamp(46px,5.6vw,84px);line-height:1;color:var(--orange);letter-spacing:.02em;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.stats .lab{display:block;font-weight:700;line-height:1.3;max-width:15em}
@media(max-width:900px){.story-split{grid-template-columns:1fr;gap:34px}}

.cta-band.has-anim{padding:80px 0 80px}
.cta-band.has-anim .cta-grid{grid-template-columns:1.1fr .9fr;align-items:center}
.cta-band.has-anim .cta-text{padding-bottom:0}
.cta-anim{margin:0;justify-self:center;width:min(100%,560px)}
.cta-anim video{display:block;width:100%;height:auto}
@media(max-width:900px){.cta-band.has-anim .cta-grid{grid-template-columns:1fr}.cta-anim{width:min(100%,420px)}}
.story-hearts .wrap>*:not(.hearts):not(.hand-art){position:relative;z-index:1}
.story-split{align-items:start}
.cta-band.has-anim{background:var(--peach);color:var(--dark)}
.cta-band.has-anim .btn{background:var(--dark);color:var(--cream);border-color:var(--dark);--sh:var(--orange)}

/* Halbton Buch rechts im Abschnitt Was wir heute machen */
.book-split{grid-template-columns:1.3fr 1fr}
.book-art{margin:0;justify-self:center;width:min(100%,460px)}
.book-art img{display:block;width:100%;height:auto;transform-origin:50% 90%;animation:bookFloat 6s ease-in-out infinite;filter:drop-shadow(0 18px 14px rgba(25,18,10,.22))}
@keyframes bookFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2.5deg)}}
@media(prefers-reduced-motion:reduce){.book-art img{animation:none}}
@media(max-width:900px){.book-split{grid-template-columns:1fr}.book-art{width:min(100%,340px)}}
.story .btn{margin-top:30px}

/* Hand mit Herz statt Herzchen */
.hand-art{position:absolute;right:7%;top:50%;margin:0;width:clamp(150px,17vw,250px);transform:translateY(-50%);pointer-events:none;z-index:0}
.hand-art img{display:block;width:100%;height:auto;transform-origin:50% 95%;animation:handSway 5.5s ease-in-out infinite;filter:drop-shadow(0 16px 12px rgba(25,18,10,.22))}
@keyframes handSway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-10px)}}
@media(max-width:900px){.hand-art{opacity:.35;right:2%}}
@media(prefers-reduced-motion:reduce){.hand-art img{animation:none}}

/* Icons bei den vier Versprechen */
.val .vh{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.val .vh h3{margin:0}
.val .vh svg{width:46px;height:46px;flex:none;fill:none;stroke:var(--dark);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.val .vh svg .o{fill:var(--orange)}
.val:hover .vh svg{transform:rotate(-8deg) scale(1.12)}
@media(prefers-reduced-motion:reduce){.val .vh svg{transition:none}}

/* Für wen wir arbeiten: Überschrift und Text einspaltig, darunter vier Spalten */
.story-split.stats-below{grid-template-columns:1fr;gap:48px}
.story-split.stats-below p{max-width:52em}
.story-split.stats-below .stats{grid-template-columns:repeat(4,1fr);gap:30px}
@media(max-width:900px){.story-split.stats-below .stats{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.story-split.stats-below .stats{grid-template-columns:1fr}}
.hand-art{top:auto;bottom:0;transform:none;width:clamp(120px,12.5vw,185px);right:8%}
.hand-art{bottom:-46px}
.story strong{font-weight:800;color:var(--dark)}
.stats li{border-top:0;padding-top:0}
.cta-band.has-anim{border-top:4px solid var(--dark)}
.cta-band.has-anim h2{font-size:clamp(30px,4.8vw,70px);margin-bottom:30px;max-width:none}
@media(min-width:700px){.cta-band.has-anim h2{white-space:nowrap}}
.cta-band.has-anim{padding:70px 0 80px}
.book-art img{animation:pointNudge 3.2s ease-in-out infinite;transform-origin:90% 60%}
@keyframes pointNudge{0%,100%{transform:translateX(0) rotate(0)}45%{transform:translateX(-18px) rotate(-2deg) scale(1.02)}60%{transform:translateX(-6px) rotate(-.5deg)}}
.cta-band.has-anim h2{margin-bottom:14px}
.cta-band.has-anim .cta-grid{align-items:start}
.cta-band.has-anim .cta-text p{margin-bottom:26px}

/* Kontakt: Mund, Blah Band und Ohr im Seitenkopf */
.kon-hero{grid-template-columns:1fr!important;gap:30px}
.kon-art{position:relative;width:min(100%,860px);margin:6px auto 0}
.ka{position:absolute;height:auto;display:block}
.ka-mouth{transform-origin:100% 55%;animation:konTalk 2.4s ease-in-out infinite}
.ka-band{transform-origin:0% 50%;animation:konWave 3.6s ease-in-out infinite}
.ka-ear{transform-origin:15% 60%;animation:konEar 4.2s ease-in-out infinite}
@keyframes konTalk{0%,100%{transform:scale(1,1)}30%{transform:scale(1.03,1.07)}55%{transform:scale(.99,.97)}}
@keyframes konWave{0%,100%{transform:translateY(0) skewY(0)}50%{transform:translateY(-8px) skewY(-1.5deg)}}
@keyframes konEar{0%,100%{transform:rotate(0)}50%{transform:rotate(3deg) translateX(3px)}}
@media(prefers-reduced-motion:reduce){.ka{animation:none}}

/* Kontakt: kleine Icons vor den Kartenlabels */
.cc small{display:flex;align-items:center;gap:10px}
.cc small .ico{width:26px;height:26px;flex:none;fill:none;stroke:var(--orange);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.cc.primary small .ico{stroke:var(--soft)}
.cc:hover small .ico{transform:rotate(-10deg) scale(1.15)}
.kon-art{width:min(100%,560px);margin:0}
.kon-hero{grid-template-columns:1.1fr .9fr!important;gap:40px;align-items:center}
.kon-art{width:100%;max-width:520px;margin:0 0 0 auto}
@media(max-width:900px){.kon-hero{grid-template-columns:1fr!important}.kon-art{margin:0 auto;max-width:420px}}
.sub-hero h1.kon-h,.sub-hero .wrap>h1{max-width:none}
.kon-hero{margin-top:34px;align-items:start!important}
.kon-hero .lead{margin-top:0}
.sub-hero:has(.kon-hero) h1{font-size:clamp(32px,5.6vw,84px);white-space:nowrap}
@media(max-width:700px){.sub-hero:has(.kon-hero) h1{white-space:normal}}
.cc small .ico,.cc.primary small .ico{stroke:currentColor}
.sub-hero:has(.kon-hero){padding-top:146px}
@media(max-width:700px){.sub-hero:has(.kon-hero){padding-top:110px}}
.kon-art{margin-top:100px}
@media(max-width:900px){.kon-art{margin-top:10px}}
/* Alle vier Kontaktkarten einheitlich: helle Karte, dunkle Schrift, rostbraunes Label mit Icon */
.cc.primary{background:var(--cream);color:var(--dark)}
.cc.primary small,.cc.primary small .ico{color:var(--rust);stroke:currentColor}
.cc.primary strong,.cc.primary span{color:var(--dark)}

/* Menü: kein Flackern mehr */
html{scrollbar-gutter:stable}
.overlay{transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s linear .6s}
.overlay.open{transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s}
.overlay a .wd,.overlay a .wd>span{pointer-events:none}
.overlay .social a{transition:background .2s,box-shadow .2s}
.overlay .social a:hover,.overlay .social a:focus-visible{transform:none;background:var(--soft);box-shadow:4px 4px 0 var(--dark)}
@media(prefers-reduced-motion:reduce){.overlay,.overlay.open{transition:none}}

/* Finale Korrekturen: kein seitliches Überlaufen */
.mq-seam{overflow-x:clip}
.stk-on{overflow-x:clip}
.sub-block,.proj,.svc{overflow-x:clip}

/* Impressum und Datenschutz */
.legal-hero{padding:150px 0 40px}
.legal-hero h1{font-size:clamp(40px,6vw,84px)}
.sub-block.legal{padding-top:60px}
.legal .wrap>*{max-width:860px}
.legal h2{font-size:clamp(24px,2.6vw,34px);margin:46px 0 14px;max-width:none}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{font-size:18px;line-height:1.65;max-width:none;margin-bottom:14px}
.legal ul{padding-left:1.2em;margin:0 0 14px}
.legal a{color:var(--rust);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--orange)}
.legal .adr{font-style:normal;font-size:18px;line-height:1.7;margin-bottom:14px}
.legal .phone-label{display:inline-block;width:4.2em}
.legal .stand{font-weight:700;color:var(--rust);margin-bottom:26px}
.legal mark.todo{background:var(--peach);color:var(--dark);border:2px dashed var(--orange);border-radius:6px;padding:1px 8px}
@media(max-width:700px){.legal-hero{padding:120px 0 24px}.legal p,.legal li,.legal .adr{font-size:17px}}

/* Dezember Challenge: Fenster mit Anmeldeformular */
.chal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(45,45,45,.72);opacity:0;transition:opacity .3s;overflow-y:auto}
.chal[hidden]{display:none}
.chal.show{opacity:1}
.chal-box{position:relative;width:min(1040px,100%);margin:auto;background:var(--cream);color:var(--dark);border:4px solid var(--dark);border-radius:20px;box-shadow:10px 10px 0 var(--orange);padding:clamp(24px,3.4vw,44px);transform:translateY(26px) scale(.96) rotate(-.6deg);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.chal.show .chal-box{transform:none}
.chal-close{position:absolute;top:14px;right:14px;z-index:2;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:10px;padding:4px 14px;font-family:var(--head);font-weight:700;font-size:16px;cursor:pointer}
.chal-close:hover,.chal-close:focus-visible{background:var(--orange);border-color:var(--dark);color:#fff}
.chal-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,3.4vw,52px);align-items:start;padding-top:18px}
.chal-tag{font-size:clamp(20px,2vw,28px);margin-bottom:18px;display:inline-block}
.chal h2{font-size:clamp(28px,3.4vw,46px);line-height:1.05;margin-bottom:14px}
.chal-lead{font-size:18px;margin-bottom:18px}
.chal-facts{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.chal-facts li{position:relative;padding-left:30px;line-height:1.4}
.chal-facts li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;background:var(--orange);border:3px solid var(--dark);border-radius:4px}
.chal-sub{font-family:var(--head);font-weight:800;font-size:20px;color:var(--rust);margin-bottom:6px}
.chal-list{margin:0;padding-left:1.2em;display:grid;gap:4px}
.chal-form{display:grid;gap:12px;background:var(--peach);border:3px solid var(--dark);border-radius:16px;padding:clamp(18px,2.4vw,28px)}
.chal-form h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:2px}
.chal-form label{display:grid;gap:4px;font-weight:700;font-size:15px}
.chal-form input[type=text],.chal-form input[type=email],.chal-form input[type=tel],.chal-form textarea{font:inherit;font-weight:400;font-size:17px;color:var(--dark);background:#fff;border:3px solid var(--dark);border-radius:10px;padding:10px 12px;width:100%}
.chal-form textarea{resize:vertical;min-height:96px}
.chal-form input:focus-visible,.chal-form textarea:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.chal-form .chal-check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;line-height:1.4}
.chal-check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--orange)}
.chal-check a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
.chal-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.chal-form .btn{justify-self:start;width:100%;justify-content:center;margin-top:4px}
.chal-form .btn:disabled{opacity:.6;cursor:wait}
.chal-status{min-height:1.4em;font-weight:700;font-size:15px}
.chal-status.err{color:#b3200f}
.chal-status.ok{color:#1d6b2f}
.chal-done{background:var(--peach);border:3px solid var(--dark);border-radius:16px;padding:clamp(20px,2.6vw,32px);display:grid;gap:12px;justify-items:start}
.chal-done[hidden]{display:none}
.chal-done h3{font-size:clamp(26px,2.6vw,34px)}
.chal-done:focus{outline:none}
@media(max-width:860px){.chal{padding:10px;align-items:start}.chal-grid{grid-template-columns:1fr;gap:22px}.chal-box{padding:22px 18px 26px}.chal-close{top:10px;right:10px}}
@media(prefers-reduced-motion:reduce){.chal,.chal-box{transition:none}.chal-box{transform:none}}
.chal-form[hidden],.chal-done[hidden]{display:none}
.chal-steps{margin-top:2px}
.sticker.is-challenge{max-width:calc(100vw - 110px);text-align:center;line-height:1.2}

/* Mobile: größere Tippflächen für kleine Links (mindestens 40 Pixel hoch) */
@media(max-width:900px){
  .f-bottom nav a{display:inline-block;padding:11px 4px}
  .vcard .who a,.who2 a{display:inline-block;padding:10px 0}
  .pc .more,.vlap .more{display:inline-flex;align-items:center;min-height:42px}
  .sc .who2 a{padding:10px 0}
}
.chal-facts li{line-height:1.4}
.chal-facts li::before{top:calc(.7em - 8px)}

/* KI Kurs Seite: Terminbox in der Seitenspalte mit mehr Luft und größerer Schrift */
.pcard .ticker{padding-bottom:26px;margin-bottom:26px;border-bottom:3px solid var(--dark)}
.pcard .ticker .t-label{font-size:17px}
.pcard .ticker .t-date{font-size:clamp(24px,2.3vw,30px);line-height:1.2;margin:16px 0 22px!important}
.pcard .ticker .t-count{font-size:clamp(34px,4vw,56px);gap:6px 6px;line-height:1}
.pcard .ticker .t-count small{font-size:14px;margin-right:12px}
.pcard .ticker .t-empty{font-size:18px;margin-top:14px!important}
.pcard .ticker + .price{margin-top:0!important}

/* KI Kurs Seite: Kennzahlen mit gleichmäßigem Abstand zwischen den Elementen, unabhängig von ihrer Breite */
.story-split.stats-below .stats.stats-even{display:flex;flex-wrap:wrap;justify-content:space-between;gap:34px 40px}
.stats-even li{flex:0 0 auto}
.stats-even .lab{max-width:11em}

/* KI Kurs Seite: Mobilversion */
@media(max-width:900px){
  .svc .grid:has(.pcard .ticker){display:flex;flex-direction:column}
  .svc .grid:has(.pcard .ticker) .aside{order:-1;display:flex;flex-direction:column;gap:26px}
  .aside:has(.ticker) .pcard{order:1}
  .aside:has(.ticker) .pic{order:2}
}
@media(max-width:600px){
  .sub-hero .lead{font-size:18px}
  .pcard .ticker .t-label{font-size:15px}
  .pcard .ticker .t-date{font-size:21px;margin:12px 0 16px!important}
  .pcard .ticker .t-count{font-size:30px;gap:4px 4px;flex-wrap:nowrap}
  .pcard .ticker .t-count small{font-size:11px;margin-right:8px;letter-spacing:.06em}
  .pcard .ticker{padding-bottom:22px;margin-bottom:22px}
  .pcard .btn{width:100%;justify-content:center}
  .stats-even li{flex:1 1 40%}
  .story-split.stats-below .stats.stats-even{gap:28px 20px}
  .stats-even .num{font-size:clamp(34px,10.5vw,46px)}
  .cta-band .btn{width:100%;justify-content:center}
}

/* Schwebender Challenge Button: ganz leichter cremefarbener Glow, damit er sich auf dunklem Hintergrund abhebt */
.sticker{box-shadow:4px 4px 0 var(--orange),0 0 14px 3px rgba(241,237,225,.32)}

/* Menü Button: gleicher Hovereffekt wie die CTA Buttons */
.menu-btn{transition:transform .15s,box-shadow .15s}
.menu-btn:hover,.menu-btn:focus-visible{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--orange)}

/* KI Kurs Seite: Abschlussbereich ohne überflüssigen Leerraum nach unten */
.cta-band.cta-compact{padding:110px 0 80px}
.cta-compact .cta-text{padding-bottom:0}
.cta-compact .cta-text p:last-child{margin-bottom:0}
@media(max-width:900px){.cta-band.cta-compact{padding:70px 0 60px}}

/* Nach oben Button: der Pfeil schwebt beim Hover im Button leicht nach oben */
.totop{box-sizing:border-box;padding-bottom:0;transition:opacity .3s,transform .3s cubic-bezier(.3,1.5,.5,1),visibility .3s,padding-bottom .3s cubic-bezier(.3,1.5,.5,1)}
.totop:hover,.totop:focus-visible{padding-bottom:12px}

/* Menü Overlay mobil: Social Media Buttons ordentlich untereinander, gleich breit */
@media(max-width:560px){
  .overlay .social{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:9px;bottom:20px}
  .overlay .social span{width:auto;margin-bottom:2px}
  .overlay .social a{width:min(100%,250px);box-sizing:border-box;padding:5px 14px}
}
@media(max-width:560px) and (max-height:720px){
  .overlay .social{gap:6px;bottom:14px}
  .overlay .social span{font-size:13px;margin-bottom:0}
  .overlay .social a{font-size:14px;padding:2px 12px;border-width:2px;box-shadow:3px 3px 0 var(--dark)}
}

/* Menü Overlay Desktop: Social Media Buttons gleich breit */
@media(min-width:561px){
  .overlay .social a{width:164px;box-sizing:border-box;justify-content:center}
}

/* Verlinkte Bilder in der Seitenspalte füllen den Rahmen komplett aus */
.pic > a{display:block;width:100%;height:100%}

/* Bild mit Link zum KI Kurs: beim Hover leichter Zoom und eingeblendeter Hinweis */
.pic > a{position:relative;overflow:hidden}
.pic > a img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pic > a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(45,45,45,.55),rgba(45,45,45,0) 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.pic-go{position:absolute;z-index:2;left:18px;right:18px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--head);font-weight:700;font-size:18px;line-height:1.2;background:var(--cream);color:var(--dark);border:3px solid var(--dark);border-radius:12px;box-shadow:4px 4px 0 var(--orange);padding:10px 16px;opacity:0;transform:translateY(14px);transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1)}
.pic-go b{color:var(--orange);font-size:22px;line-height:1;transition:transform .25s}
.pic > a:hover img,.pic > a:focus-visible img{transform:scale(1.05)}
.pic > a:hover::after,.pic > a:focus-visible::after{opacity:1}
.pic > a:hover .pic-go,.pic > a:focus-visible .pic-go{opacity:1;transform:none}
.pic > a:hover .pic-go b{transform:translateX(4px)}
@media(hover:none){.pic > a::after{opacity:1}.pic-go{opacity:1;transform:none}}
@media(max-width:560px){.pic-go{left:12px;right:12px;bottom:12px;font-size:15px;padding:8px 12px}}
@media(prefers-reduced-motion:reduce){.pic > a img,.pic-go,.pic-go b,.pic > a::after{transition:none}}

/* Kleine Abschnittsüberschriften als Plakette im Stil der Beiträge statt als Textzeile */
.eyebrow{display:inline-block;background:var(--peach);color:var(--dark);border:3px solid var(--dark);border-radius:10px;box-shadow:3px 3px 0 var(--orange);padding:.3em .75em .32em;font-size:14px;letter-spacing:.1em;line-height:1.2;transform:rotate(-1.6deg);margin-bottom:22px}
.eyebrow a{color:inherit}

/* Challenge Fenster: kurzer Text, Details zum Aufklappen */
.chal-more{margin-top:4px;border-top:3px solid var(--dark);padding-top:12px}
.chal-more summary{cursor:pointer;font-family:var(--head);font-weight:700;font-size:18px;list-style:none;display:inline-flex;align-items:center;gap:10px}
.chal-more summary::-webkit-details-marker{display:none}
.chal-more summary::before{content:"+";display:grid;place-items:center;width:26px;height:26px;background:var(--orange);color:#fff;border:3px solid var(--dark);border-radius:6px;font-size:18px;line-height:1;transition:transform .2s}
.chal-more[open] summary::before{content:"–"}
.chal-more summary:hover,.chal-more summary:focus-visible{color:var(--rust)}
.chal-more > p{margin:6px 0 12px;line-height:1.45}
.chal-more .chal-sub{margin-top:14px}
.chal-opt{font-weight:400;font-size:13px;opacity:.75}

/* Hinweis zu Cookies: dezente Leiste unten, einmal wegklickbar */
.c-note{position:fixed;left:50%;bottom:18px;z-index:110;width:min(560px,calc(100% - 32px));transform:translate(-50%,140%);display:flex;gap:14px;align-items:center;background:var(--cream);color:var(--dark);border:3px solid var(--dark);border-radius:12px;box-shadow:5px 5px 0 var(--orange);padding:12px 14px 12px 18px;font-size:15px;line-height:1.4;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.c-note.show{transform:translate(-50%,0)}
.c-note p{flex:1}
.c-note a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
.c-note button{flex:none;font-family:var(--head);font-weight:700;font-size:16px;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:10px;padding:6px 14px;cursor:pointer;box-shadow:3px 3px 0 var(--orange);transition:transform .15s,box-shadow .15s}
.c-note button:hover,.c-note button:focus-visible{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--orange)}
@media(max-width:560px){.c-note{bottom:10px;font-size:14px;padding:10px 10px 10px 14px}}
@media(prefers-reduced-motion:reduce){.c-note{transition:none}}

/* Sprunglink für Tastatur und Screenreader */
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--dark);color:var(--cream);border:3px solid var(--dark);border-radius:10px;padding:10px 16px;font-family:var(--head);font-weight:700;text-decoration:none}
.skip:focus{top:16px}

/* Laufband hält an, wenn die Maus darauf steht */
.marquee:hover div{animation-play-state:paused}

/* Handy: im Kopfbereich nur das Querformat, Hand Grafik bei Über uns entfällt */
@media(max-width:900px){
  .hero .shots{display:block;height:auto}
  .hero .shot.s1{display:none}
  .hero .shot.s2{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:3/2}
  .hand-art{display:none}
}

/* Challenge Fenster am Handy: erst Kurzinfo, Formular nach dem Tippen */
.chal-next,.chal-back{display:none}
@media(max-width:860px){
  .chal-box{padding:44px 18px 22px}
  .chal-tag{font-size:17px;margin-bottom:10px}
  .chal h2{font-size:26px;margin-bottom:10px}
  .chal-lead{font-size:16px;line-height:1.4;margin-bottom:12px}
  .chal-facts{gap:6px;margin-bottom:12px;font-size:16px}
  .chal-next{display:flex;width:100%;justify-content:center;margin-top:14px}
  .chal .chal-formwrap{display:none}
  .chal.form-open .chal-formwrap{display:block}
  .chal.form-open .chal-info{display:none}
  .chal-back{display:block;background:none;border:0;padding:0 0 10px;font:inherit;font-weight:700;font-size:15px;color:var(--rust);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .chal-form{gap:9px;padding:14px}
  .chal-form textarea{min-height:66px}
  .chal-form .chal-check{font-size:13px}
}

/* Handy: Wer kurz innehält, sieht, was klickbar ist. Quadrate werden zum Mini Logo, Klickbares leuchtet auf */
.ticks li.idle-logo::before,.why li.idle-logo::before{transform:rotate(180deg) scale(0);opacity:0;box-shadow:none}
.ticks li.idle-logo::after,.why li.idle-logo::after{transform:rotate(0) scale(1);opacity:1}
.idle-glow{animation:idleGlow 1.5s ease-out 1}
@keyframes idleGlow{
  0%{outline:3px solid rgba(247,92,30,0);outline-offset:0}
  25%{outline:4px solid rgba(247,92,30,1);outline-offset:3px}
  100%{outline:4px solid rgba(247,92,30,0);outline-offset:12px}
}
@media(prefers-reduced-motion:reduce){.idle-glow{animation:none}}

/* Aufklapper im Challenge Fenster ohne den Kasten der Häufigen Fragen */
.chal details.chal-more{background:none;border:0;border-top:3px solid var(--dark);border-radius:0;box-shadow:none;margin:4px 0 0;padding:12px 0 0;transform:none}
.chal-more summary{padding:0;font-size:18px;line-height:1.2}
.chal-more summary::after{content:none}

/* Kennzahlen: Orange auf Creme hat zu wenig Kontrast, deshalb Rost */
.stats .num{color:var(--rust)}

/* Footer mobil: Kanalcheck Button zuerst, darunter "Folge uns" nur mit Icons in einer Reihe */
@media(max-width:560px){
  .f-actions{display:contents}
  .f-actions > .btn{order:3;justify-self:start}
  .f-top > .f-col:nth-child(4){order:4;margin-bottom:-26px}
  .f-top > .f-col:nth-child(4) ul{display:none}
  .f-actions .f-social{order:5;flex-wrap:nowrap;gap:8px;margin-top:0}
  .f-actions .f-social a{flex:0 1 44px;width:auto;height:auto;aspect-ratio:1/1;min-width:0;border-radius:11px;box-shadow:3px 3px 0 var(--orange)}
}
@media(max-width:560px){
  .f-actions > .btn,.f-top > .f-col:nth-child(4),.f-actions .f-social{grid-column:1/-1}
}

/* Footer Desktop: Social Media Icons rechtsbündig */
@media(min-width:561px){.f-actions .f-social{margin-left:auto}}

/* Über uns: Der fette Schlusssatz sitzt in beiden Karten bündig unten, auf gleicher Höhe */
.person .tx{flex:1;display:flex;flex-direction:column}
.person .tx > p:last-child{margin-top:auto;margin-bottom:0}

/* Mobil: Zähler zentriert (Über uns) */
@media(max-width:560px){
  .stats:not(.stats-even){text-align:center}
  .stats:not(.stats-even) .lab{margin-inline:auto}
}

/* Über uns: Beschriftungen unter den vier Zählern 25 % größer */
.stats:not(.stats-even) .lab{font-size:1.25em}

/* Reel Beispiele mobil: unendliches Karussell, ein Handy im Fokus (Logik in site.js) */
@media(max-width:700px){
  .phones{display:flex;grid-template-columns:none;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:30px -24px 0;padding:20px calc(50vw - min(34vw,125px)) 26px}
  .phones::-webkit-scrollbar{display:none}
  .phone-fig{flex:0 0 min(68vw,250px);scroll-snap-align:center;scroll-snap-stop:always;opacity:.5;transform:scale(.88);transition:opacity .35s,transform .35s}
  .phone-fig.is-focus{opacity:1;transform:none}
  .car-nav{display:flex;justify-content:center;gap:18px;margin-top:6px}
  .car-btn{width:56px;height:52px;display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:26px;line-height:1;background:var(--cream);color:var(--dark);border:3px solid var(--dark);border-radius:12px;box-shadow:4px 4px 0 var(--orange);cursor:pointer;transition:transform .15s,box-shadow .15s}
  .car-btn:hover,.car-btn:focus-visible{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--orange)}
  .car-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--orange)}
}
@media(prefers-reduced-motion:reduce){.phone-fig{transition:none}}

/* Kundenstimmen mobil: animierte Pfeile links und rechts der Karten, Wisch Hinweis statt Klick Hinweis */
.sw-arrow{display:none}
@media(max-width:640px){
  .stk-ctrl{display:none}
  .sc[data-pos="0"]::after{content:"Swipe - nächste Stimme →"}
  .sw-arrow{display:grid;place-items:center;position:absolute;top:min(calc(var(--ah,170px)/2 - 19px),210px);z-index:12;width:38px;height:38px;padding:0 0 4px;font-family:var(--head);font-weight:800;font-size:30px;line-height:1;color:#fff;background:var(--orange);border:3px solid var(--dark);border-radius:50%;box-shadow:3px 3px 0 var(--dark);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .sw-arrow.l{left:-12px;animation:swL 1.5s ease-in-out infinite}
  .sw-arrow.r{right:-12px;animation:swR 1.5s ease-in-out infinite}
  .sw-arrow:active{box-shadow:1px 1px 0 var(--dark)}
  .stk.swiped .sw-arrow{animation-duration:2.6s}
}
@keyframes swL{0%,100%{transform:translateX(0)}50%{transform:translateX(-7px)}}
@keyframes swR{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
@media(prefers-reduced-motion:reduce){.sw-arrow{animation:none!important}}

/* Kundenstimmen: mehr Abstand zwischen Überschrift und Kartenstapel */
.stk{margin-top:36px}
@media(max-width:640px){.stk{margin-top:48px}}

/* Kundenstimmen: weniger Abstand unter dem Kartenstapel */
.sub-block.stk-on{padding-bottom:64px}
.stk{margin-bottom:0}
@media(max-width:900px){.sub-block.stk-on{padding-bottom:40px}}

/* Kundenstimmen: weniger Abstand zwischen Trennlinie und Überschrift */
.sub-block.stk-on{padding-top:70px}
@media(max-width:900px){.sub-block.stk-on{padding-top:44px}}

/* Menü Overlay mobil: "Folge uns" folgt direkt auf die Menüeinträge (halber Abstand), statt am unteren Rand zu kleben */
@media(max-width:560px){
  .overlay{align-content:start;row-gap:64px;overflow-y:auto}
  .overlay .social{position:static;justify-self:start;width:100%;box-sizing:border-box;padding:0 24px 24px}
}
@media(max-width:560px) and (max-height:720px){
  .overlay{row-gap:36px}
}

/* Countdown mobil: rund 10 % kleiner, damit die Sekunden nicht in die nächste Zeile springen */
@media(max-width:600px){
  .ticker .t-count{font-size:30.6px;gap:0 3px}
  .ticker .t-count small{font-size:10.8px;margin-right:10px}
  .pcard .ticker .t-count{font-size:27px;gap:4px 3px;flex-wrap:nowrap}
  .pcard .ticker .t-count small{font-size:10px;margin-right:7px;letter-spacing:.05em}
}
@media(max-width:380px){
  .ticker .t-count{font-size:26px}
  .ticker .t-count small{font-size:9.5px;margin-right:7px}
  .pcard .ticker .t-count{font-size:25px}
  .pcard .ticker .t-count small{font-size:9.5px;margin-right:6px}
}