/* ============================================================
   SIREX Creatives, Entwurf V2  |  28.08.2026
   Waagerechter Aufbau: die Reiter oben schieben die Seite nach rechts.
   NICHT OEFFENTLICH. Die eingebundenen Videos liegen auf fremden
   Kanaelen und sind nur mit Bens einmaliger Erlaubnis fuer diesen
   Entwurf drin. Vor einem Livegang austauschen oder Rechte einholen.
   ============================================================ */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/PlayfairDisplay-600.woff2') format('woff2');}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/PlayfairDisplay-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/Inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/Inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/Inter-600.woff2') format('woff2');}

:root{
  --black:#141414; --black-2:#1a1918; --black-3:#211f1e;
  --rose:#E8325A; --greige:#C8B8A2; --greige-dim:rgba(200,184,162,.6);
  --line:rgba(200,184,162,.15); --white:#F5F2EE;
  --head:64px;
  --ease:cubic-bezier(.72,0,.16,1);
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{
  background:var(--black);color:var(--white);font-family:var(--sans);
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
/* Hintergrund: schraege SIREX-rote Linien plus zwei weiche Lichter, damit die
   Seite nicht mehr schwarz wirkt. Liegt hinter allem und faengt keine Klicks ab. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(114deg,
      transparent 0 52px,
      rgba(232,50,90,.30) 52px 54px,
      transparent 54px 106px,
      rgba(232,50,90,.15) 106px 108px);
  -webkit-mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.12) 44%, transparent 62%);
  mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.12) 44%, transparent 62%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(980px 680px at 88% 6%, rgba(232,50,90,.24), transparent 66%),
    radial-gradient(820px 600px at 2% 96%, rgba(200,184,162,.06), transparent 62%);
}
.stage{z-index:1;}
header.site{z-index:60;}
img{max-width:100%;display:block;}
a{color:var(--greige);}
::selection{background:var(--rose);color:var(--white);}

/* ---------------- Kopfzeile ---------------- */
header.site{
  position:fixed;top:0;left:0;right:0;height:var(--head);z-index:60;
  background:rgba(20,20,20,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{max-width:1240px;margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;gap:6px;}
.brand{display:flex;align-items:center;gap:11px;background:none;border:0;cursor:pointer;margin-right:auto;padding:0;}
.brand img{height:30px;width:30px;object-fit:cover;mix-blend-mode:lighten;}
.brand span{font-family:var(--sans);font-weight:600;font-size:13.5px;letter-spacing:.42em;color:var(--greige);text-indent:.42em;}
.tab{
  position:relative;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:14.5px;font-weight:500;color:var(--greige-dim);
  padding:10px 14px;transition:color .3s ease;
}
.tab:hover{color:var(--white);}
.tab.on{color:var(--white);}
.tab::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--rose);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.tab.on::after{transform:scaleX(1);}
.cta{
  background:var(--rose);color:var(--white);border:0;cursor:pointer;margin-left:14px;
  font-family:var(--sans);font-weight:600;font-size:14.5px;padding:10px 18px;
  transition:background .25s ease, transform .25s var(--ease);
}
.cta:hover{background:#f2436a;transform:translateY(-1px);}

/* Fortschrittslinie */
.progress{position:fixed;top:var(--head);left:0;height:2px;background:var(--rose);z-index:61;width:0;transition:width .6s var(--ease);}

/* ---------------- Buehne, waagerecht ---------------- */
.stage{position:fixed;top:var(--head);left:0;right:0;bottom:0;overflow:hidden;}
.track{display:flex;height:100%;width:100%;transition:transform .8s var(--ease);will-change:transform;}
.panel{
  flex:0 0 100%;height:100%;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  justify-content:center;
  justify-content:safe center;
  padding:44px 28px;
}
.panel::-webkit-scrollbar{width:8px;}
.panel::-webkit-scrollbar-thumb{background:rgba(200,184,162,.2);}
.inner{max-width:1180px;margin:0 auto;width:100%;}

/* Einblenden der Inhalte, gestaffelt, sobald die Seite aktiv ist */
.stagger > *{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .8s var(--ease);}
.panel.on .stagger > *{opacity:1;transform:none;}
.panel.on .stagger > *:nth-child(1){transition-delay:.10s}
.panel.on .stagger > *:nth-child(2){transition-delay:.17s}
.panel.on .stagger > *:nth-child(3){transition-delay:.24s}
.panel.on .stagger > *:nth-child(4){transition-delay:.31s}
.panel.on .stagger > *:nth-child(5){transition-delay:.38s}
.panel.on .stagger > *:nth-child(6){transition-delay:.45s}
.panel.on .stagger > *:nth-child(7){transition-delay:.52s}
.panel.on .stagger > *:nth-child(8){transition-delay:.59s}

/* ---------------- Typografie ---------------- */
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-.015em;}
h1{font-size:clamp(32px,4.6vw,58px);}
h2{font-size:clamp(26px,3.4vw,42px);margin-bottom:12px;}
h3{font-family:var(--sans);font-size:18.5px;font-weight:600;margin-bottom:6px;}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--rose);margin-bottom:16px;}
.lead{font-size:18px;color:var(--greige);max-width:60ch;}
.muted{color:var(--greige-dim);font-size:14.5px;}

.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:16px;padding:14px 28px;border:0;cursor:pointer;font-family:var(--sans);transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s var(--ease);}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--rose);color:var(--white);}
.btn-primary:hover{background:#f2436a;}
.btn-ghost{border:1px solid var(--line);color:var(--greige);background:transparent;}
.btn-ghost:hover{border-color:var(--greige);color:var(--white);}

/* ---------------- Startseite ---------------- */
.home{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.home .actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px;}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px;}
@media (max-width:980px){.home{grid-template-columns:1fr;gap:28px;}}

/* ---------------- Video, Klick zum Laden ---------------- */
.video{position:relative;width:100%;aspect-ratio:16/9;background:var(--black-2);border:1px solid var(--line);overflow:hidden;cursor:pointer;}
.video img{width:100%;height:100%;object-fit:cover;opacity:.7;transition:opacity .45s ease,transform .8s var(--ease);}
.video:hover img{opacity:1;transform:scale(1.05);}
.video .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.video .play i{width:56px;height:56px;border-radius:50%;background:var(--rose);display:flex;align-items:center;justify-content:center;transition:transform .4s var(--ease);box-shadow:0 8px 30px rgba(0,0,0,.45);}
.video:hover .play i{transform:scale(1.12);}
.video .play i::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px;}
.video.small .play i{width:38px;height:38px;}
.video.small .play i::after{border-left-width:11px;border-top-width:7px;border-bottom-width:7px;}
.video .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;font-size:13px;color:var(--white);background:linear-gradient(transparent,rgba(15,15,15,.92));pointer-events:none;}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------------- Belege ---------------- */
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px;}
.proof div{background:var(--black);padding:20px 18px;}
.proof strong{display:block;font-family:var(--serif);font-size:26px;line-height:1.1;}
.proof span{font-size:13px;color:var(--greige-dim);}
@media (max-width:760px){.proof{grid-template-columns:1fr 1fr;}}

/* ---------------- Raster ---------------- */
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:30px;}
.work-grid .video:nth-child(1){grid-column:span 3;}
.work-grid .video:nth-child(2){grid-column:span 3;}
.work-grid .video:nth-child(n+3){grid-column:span 2;}
@media (max-width:900px){.work-grid{grid-template-columns:1fr 1fr;}.work-grid .video{grid-column:span 1 !important;}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:34px;}
.step{border-top:2px solid var(--rose);padding-top:16px;}
.step b{display:block;font-size:12px;letter-spacing:.22em;color:var(--rose);margin-bottom:8px;}
.step p{color:var(--greige);font-size:15.5px;}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:20px;}}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;}
.card{background:var(--black-2);border:1px solid var(--line);padding:28px 24px;display:flex;flex-direction:column;transition:border-color .35s ease,transform .5s var(--ease);}
.card:hover{border-color:rgba(200,184,162,.34);transform:translateY(-4px);}
.card.mark{border-color:var(--rose);}
.card .tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin-bottom:10px;}
.card .price{font-family:var(--serif);font-size:34px;line-height:1;}
.card .price small{display:block;font-family:var(--sans);font-size:13px;color:var(--greige-dim);margin-top:6px;}
.card ul{list-style:none;margin:16px 0 22px;}
.card li{padding-left:18px;position:relative;font-size:15px;color:var(--greige);margin-bottom:8px;}
.card li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--rose);}
.card .btn{margin-top:auto;text-align:center;}
@media (max-width:900px){.cards{grid-template-columns:1fr;}}

details{border-bottom:1px solid var(--line);padding:15px 0;}
details summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+";color:var(--rose);font-size:21px;line-height:1;transition:transform .35s var(--ease);}
details[open] summary::after{content:"–";}
details p{margin-top:10px;color:var(--greige);font-size:15.5px;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.form-grid .full{grid-column:1/-1;}
label{display:block;font-size:13px;color:var(--greige-dim);margin-bottom:6px;font-weight:500;}
input,select,textarea{width:100%;background:var(--black-2);border:1px solid var(--line);color:var(--white);font-family:var(--sans);font-size:15.5px;padding:12px 14px;transition:border-color .25s ease;}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--rose);}
textarea{min-height:96px;resize:vertical;}
@media (max-width:760px){.form-grid{grid-template-columns:1fr;}}

/* ---------------- Fusszeile der Buehne ---------------- */
.rail{position:fixed;left:28px;bottom:22px;z-index:55;display:flex;align-items:center;gap:14px;font-size:12.5px;letter-spacing:.16em;color:var(--greige-dim);}
.rail button{background:none;border:1px solid var(--line);color:var(--greige);width:34px;height:34px;cursor:pointer;font-size:15px;line-height:1;transition:border-color .25s ease,color .25s ease,transform .25s var(--ease);}
.rail button:hover:not(:disabled){border-color:var(--rose);color:var(--white);transform:translateY(-2px);}
.rail button:disabled{opacity:.28;cursor:default;}
.legal{position:fixed;right:28px;bottom:22px;z-index:55;font-size:12.5px;color:var(--greige-dim);}
.legal a{text-decoration:none;}
.legal a:hover{color:var(--white);}
@media (max-width:860px){
  .nav{gap:2px;padding:0 16px;}
  .tab{padding:8px 9px;font-size:13px;}
  .cta{margin-left:6px;padding:9px 13px;font-size:13px;}
  .brand span{font-size:11.5px;letter-spacing:.3em;}
  .panel{padding:26px 18px;align-items:flex-start;}
  .rail{left:16px;bottom:14px;}
  .legal{right:16px;bottom:14px;}
}

@media (prefers-reduced-motion: reduce){
  .track,.stagger > *,.video img,.card,.btn{transition-duration:.01ms !important;}
}

/* ---------------- Rechtsseiten ---------------- */
body.doc{overflow:auto;}
body.doc .stage{position:static;overflow:visible;}
.docwrap{max-width:78ch;margin:0 auto;padding:calc(var(--head) + 48px) 28px 80px;}
.docwrap h1{font-size:34px;margin-bottom:8px;}
.docwrap h2{font-size:22px;margin-top:32px;}
.docwrap p{color:var(--greige);margin-top:11px;}
.todo{background:rgba(232,50,90,.13);border-left:3px solid var(--rose);padding:12px 15px;margin-top:14px;font-size:15px;color:var(--white);}

/* Niedrige Fenster: Kacheln und Abstaende zurueckdrehen, damit eine Seite eine Seite bleibt */
@media (max-height:760px){
  .panel{padding:26px 28px;}
  h1{font-size:clamp(28px,3.8vw,44px);}
  h2{font-size:clamp(23px,2.8vw,34px);}
  .lead{font-size:16.5px;}
  .work-grid{gap:12px;margin-top:20px;}
  .proof{margin-top:18px;}
  .proof div{padding:14px 16px;}
  .proof strong{font-size:22px;}
  .steps{margin-top:24px;gap:24px;}
  .cards{margin-top:22px;}
  .card{padding:22px 20px;}
  .strip{margin-top:16px;}
  details{padding:11px 0;}
}


/* ============================================================
   V2.1, 28.08.2026: Startseite, Work-Karussell, How-it-works
   ============================================================ */

/* ---------- Startseite: Schrift dominiert, Video ordnet sich unter ---------- */
.home{grid-template-columns:1.18fr .82fr;gap:60px;}
.home h1{font-size:clamp(40px,6.2vw,84px);line-height:1.02;letter-spacing:-.028em;}
.home .lead{font-size:17px;max-width:46ch;margin-top:22px;}
.home .actions{margin-top:28px;}
.swap{display:flex;flex-direction:column;gap:12px;}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.thumbs .video{border-color:rgba(200,184,162,.13);}
.thumbs .video::after{
  content:"";position:absolute;inset:0;background:rgba(20,20,20,.28);
  transition:background .35s ease;pointer-events:none;
}
.thumbs .video:hover::after{background:transparent;}
@media (max-width:980px){.home{grid-template-columns:1fr;}.home h1{font-size:clamp(34px,8vw,52px);}}

/* ---------- Work: ein Video in der Mitte, seitlich durchgeschoben ---------- */
.carousel{position:relative;margin-top:26px;}
.carousel-view{overflow:hidden;}
.carousel-track{display:flex;transition:transform .75s var(--ease);will-change:transform;}
.slide{flex:0 0 100%;padding:0 6px;}
.slide .video{border-color:rgba(200,184,162,.22);}
.slide-cap{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-top:12px;}
.slide-cap b{font-family:var(--serif);font-weight:600;font-size:20px;}
.slide-cap span{font-size:13px;color:var(--greige-dim);letter-spacing:.16em;}
.car-btn{
  position:absolute;top:calc(50% - 44px);transform:translateY(-50%);z-index:5;
  width:52px;height:52px;border:1px solid var(--line);background:rgba(20,20,20,.72);
  backdrop-filter:blur(6px);color:var(--white);font-size:19px;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .3s var(--ease);
}
.car-btn:hover:not(:disabled){border-color:var(--rose);background:rgba(232,50,90,.16);}
.car-btn:disabled{opacity:.25;cursor:default;}
.car-prev{left:-16px;} .car-next{right:-16px;}
.car-prev:hover:not(:disabled){transform:translateY(-50%) translateX(-3px);}
.car-next:hover:not(:disabled){transform:translateY(-50%) translateX(3px);}
.dots{display:flex;gap:8px;margin-top:16px;}
.dots button{width:34px;height:3px;border:0;padding:0;background:rgba(200,184,162,.22);cursor:pointer;transition:background .3s ease;}
.dots button.on{background:var(--rose);}
@media (max-width:900px){.car-prev{left:2px;}.car-next{right:2px;}.car-btn{width:42px;height:42px;}}

/* ---------- How it works: drei Schritte, nach unten durchgeblättert ---------- */
.vstage{position:relative;overflow:hidden;margin-top:26px;height:clamp(300px,44vh,400px);}
.vtrack{display:flex;flex-direction:column;height:300%;transition:transform .75s var(--ease);will-change:transform;}
.vstep{flex:0 0 33.3333%;display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;}
.vstep .txt b{display:block;font-size:12px;letter-spacing:.24em;color:var(--rose);margin-bottom:12px;}
.vstep .txt h3{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.1;margin-bottom:12px;}
.vstep .txt p{color:var(--greige);font-size:16px;max-width:38ch;}
.vnav{display:flex;align-items:center;gap:16px;margin-top:22px;}
.vnav button{
  width:44px;height:44px;border:1px solid var(--line);background:none;color:var(--greige);
  font-size:17px;cursor:pointer;transition:border-color .25s ease,color .25s ease,transform .3s var(--ease);
}
.vnav button:hover:not(:disabled){border-color:var(--rose);color:var(--white);transform:translateY(2px);}
.vnav button.up:hover:not(:disabled){transform:translateY(-2px);}
.vnav button:disabled{opacity:.25;cursor:default;}
.vnav .marks{display:flex;gap:7px;}
.vnav .marks i{width:26px;height:3px;background:rgba(200,184,162,.22);transition:background .3s ease;}
.vnav .marks i.on{background:var(--rose);}
@media (max-width:900px){
  .vstep{grid-template-columns:1fr;gap:18px;}
  .vstage{height:clamp(240px,40vh,320px);}
}

/* Zeichnungen */
.art svg{width:100%;height:auto;max-height:300px;}
.art .stroke{stroke:var(--greige);fill:none;opacity:.5;}
.art .fillbox{fill:var(--black-2);stroke:rgba(200,184,162,.28);}
.art .rose{fill:var(--rose);}
.art .rosestroke{stroke:var(--rose);fill:none;}
.art .dim{fill:rgba(200,184,162,.22);}
.bar{transform-box:fill-box;transform-origin:center;transform:scaleY(.18);transition:transform .7s var(--ease);}
.vstep.on .bar{transform:scaleY(1);}
.vstep.on .bar:nth-of-type(2){transition-delay:.05s}
.vstep.on .bar:nth-of-type(3){transition-delay:.10s}
.vstep.on .bar:nth-of-type(4){transition-delay:.15s}
.vstep.on .bar:nth-of-type(5){transition-delay:.20s}
.vstep.on .bar:nth-of-type(6){transition-delay:.25s}
.vstep.on .bar:nth-of-type(7){transition-delay:.30s}
.vstep.on .bar:nth-of-type(8){transition-delay:.35s}
.vstep.on .bar:nth-of-type(9){transition-delay:.40s}
.frame{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s var(--ease);transform-box:fill-box;}
.vstep.on .frame{opacity:1;transform:none;}
.vstep.on .frame:nth-of-type(2){transition-delay:.10s}
.vstep.on .frame:nth-of-type(3){transition-delay:.20s}
.vstep.on .frame:nth-of-type(4){transition-delay:.30s}

@media (max-height:760px){
  .home h1{font-size:clamp(34px,4.8vw,58px);}
  .vstage{height:clamp(240px,38vh,320px);}
  .slide .video{max-height:52vh;}
}

/* Karussell-Video an die Fensterhoehe binden, damit eine Seite eine Seite bleibt */
.slide .video{aspect-ratio:16/9;}
@media (max-width:900px){ .slide .video{height:auto;width:100%;} }

/* Schritt-Inhalte sicher in die Buehne einpassen */
.vstep{align-content:center;}
.art svg{max-height:min(280px, 32vh);}
@media (max-height:760px){
  .vstep .txt p{font-size:15px;}
  .vstep .txt h3{font-size:clamp(21px,2.4vw,27px);}
  .art svg{max-height:min(200px, 30vh);}
}


/* ============================================================
   V2.2, 28.08.2026: Hintergrund, groessere Bedienelemente,
   Work und How it works mittig und weiter oben
   ============================================================ */

.panel.top{justify-content:flex-start;padding-top:26px;}
.centered{text-align:center;}
.centered .lead{margin-left:auto;margin-right:auto;}
.head-rose{color:var(--rose);}
.panel.top .eyebrow{margin-bottom:10px;}
.panel.top h2{margin-bottom:6px;}

/* Grosse, sofort sichtbare Pfeile */
.car-btn{
  width:72px;height:72px;font-size:27px;line-height:1;
  border:2px solid var(--rose);color:var(--rose);
  background:rgba(232,50,90,.12);backdrop-filter:blur(6px);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.car-btn:hover:not(:disabled){background:var(--rose);color:#fff;border-color:var(--rose);}
.car-prev{left:-30px;} .car-next{right:-30px;}
.car-prev:hover:not(:disabled){transform:translateY(-50%) scale(1.16) translateX(-4px);}
.car-next:hover:not(:disabled){transform:translateY(-50%) scale(1.16) translateX(4px);}
.car-btn:disabled{opacity:.22;}
@media (max-width:900px){.car-btn{width:52px;height:52px;font-size:21px;}.car-prev{left:0;}.car-next{right:0;}}

.dots{justify-content:center;}
.dots button{width:44px;height:4px;}
.slide-cap{justify-content:center;gap:22px;}

/* ---------- How it works: mittig, Grafik gross, Bedienung wie bei Work ---------- */
.vstage{height:auto;}
.vtrack{height:auto;}
.vstep{
  display:block;height:auto;flex:0 0 auto;
  grid-template-columns:none;gap:0;text-align:center;
}
.vstep .art{margin:0 auto;max-width:620px;}
.vstep .txt{max-width:56ch;margin:18px auto 0;}
.vstep .txt h3{font-size:clamp(26px,3.2vw,38px);}
.vstep .txt p{max-width:none;font-size:17px;}
.vstage.fixed{height:clamp(340px,50vh,470px);overflow:hidden;}
.vtrack.fixed{height:300%;}
.vstep.cell{flex:0 0 33.3333%;height:33.3333%;display:flex;flex-direction:column;justify-content:center;}
.art svg{max-height:min(300px,34vh);}

.vnav{justify-content:center;gap:20px;margin-top:24px;}
.vnav button{
  width:72px;height:72px;font-size:27px;
  border:2px solid var(--rose);color:var(--rose);background:rgba(232,50,90,.12);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.vnav button:hover:not(:disabled){background:var(--rose);color:#fff;transform:scale(1.14) translateY(3px);}
.vnav button.up:hover:not(:disabled){transform:scale(1.14) translateY(-3px);}
.vnav button:disabled{opacity:.22;}
.vnav .marks i{width:40px;height:4px;}
@media (max-width:900px){.vnav button{width:54px;height:54px;font-size:21px;}}

/* Zeichnungen kraeftiger, damit sie auf grossen Schirmen nicht verschwinden */
.art .fillbox{fill:#221f1f;stroke:rgba(200,184,162,.42);stroke-width:1.6;}
.art .stroke{stroke:var(--greige);stroke-width:2.4;opacity:.7;}
.art .rosestroke{stroke:var(--rose);stroke-width:2.8;}
.art .dim{fill:rgba(200,184,162,.34);}
.art text{letter-spacing:2px;}

/* Grafik war durch die Auto-Raender geschrumpft: Breite ausdruecklich setzen */
.vstep .art{width:100%;max-width:660px;margin-left:auto;margin-right:auto;}
.vstep .art svg{width:100%;height:auto;max-height:min(330px,38vh);}


/* Schmale Fenster: Grafik bleibt sichtbar, wird nur kleiner */
@media (max-width:900px){
  .vstep .art{display:block;max-width:100%;}
  .vstep .art svg{max-height:min(240px,30vh);}
  .vstage.fixed{height:clamp(360px,54vh,480px);}
}


/* ============================================================
   V2.3, 28.08.2026: Work-Ueberschrift wieder weiss, How-it-works
   mit Bedienleiste rechts und deutlicher Schrittnummer
   ============================================================ */

.panel{position:relative;}

/* Work: Ueberschrift wieder weiss (die rote Fassung ist zurueckgenommen) */
.head-rose{color:var(--white);}

/* Inhalt Platz fuer die Leiste am rechten Rand geben, Mitte bleibt Mitte */
.has-rail{padding:0 clamp(72px,9vw,132px);}

/* Bedienleiste rechts, senkrecht */
.vrail{
  position:absolute;right:clamp(14px,3.4vw,46px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:18px;z-index:6;
}
.vrail button{
  width:66px;height:66px;font-size:25px;line-height:1;cursor:pointer;
  border:2px solid var(--rose);color:var(--rose);background:rgba(232,50,90,.12);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transition:background .25s ease,color .25s ease,transform .3s var(--ease),opacity .25s ease;
}
.vrail button:hover:not(:disabled){background:var(--rose);color:#fff;transform:scale(1.14);}
.vrail button:disabled{opacity:.22;cursor:default;}
.vrail .marks{display:flex;flex-direction:column;gap:10px;}
.vrail .marks i{width:4px;height:38px;background:rgba(200,184,162,.22);transition:background .3s ease,height .3s var(--ease);}
.vrail .marks i.on{background:var(--rose);height:52px;}
@media (max-width:820px){
  .has-rail{padding:0 58px;}
  .vrail{right:8px;gap:12px;}
  .vrail button{width:46px;height:46px;font-size:19px;}
  .vrail .marks i{height:26px;} .vrail .marks i.on{height:36px;}
}

/* Schrittnummer deutlich sichtbar */
.stepno{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:6px;}
.stepno span{
  font-size:13px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--greige-dim);
}
.stepno b{font-family:var(--serif);font-weight:700;font-size:clamp(38px,4.6vw,54px);line-height:1;color:var(--rose);}
.vstep .txt h3{margin-top:2px;}


/* Schrittnummer: musste die alte, spezifischere Regel ueberschreiben */
.vstep .txt .stepno{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:8px;}
.vstep .txt .stepno span{
  display:inline;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--greige-dim);margin:0;
}
.vstep .txt .stepno b{
  display:inline;font-family:var(--serif);font-weight:700;
  font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:0;
  color:var(--rose);margin:0;
}
.vrail .marks i{cursor:pointer;}


/* ============================================================
   Stufe 1, 28.08.2026: Auftakt, nachziehende Seiten,
   zeilenweise Ueberschriften, Abspielzeiger
   ============================================================ */

/* --- Auftakt, zwei Sekunden, einmal je Sitzung --- */
.intro{
  position:fixed;inset:0;z-index:200;background:var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease, visibility .7s;
}
.intro video{width:min(52vw,520px);height:auto;}
.intro .skip{
  position:absolute;right:26px;bottom:22px;background:none;border:0;cursor:pointer;
  color:var(--greige-dim);font-family:var(--sans);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
}
.intro .skip:hover{color:var(--white);}
.intro.done{opacity:0;visibility:hidden;}

/* --- Seiten ziehen beim Wechsel nach --- */
.panel{transition:transform .85s var(--ease), opacity .7s ease;}
.panel.off-right{transform:translateX(11%) scale(.93);opacity:.28;}
.panel.off-left{transform:translateX(-11%) scale(.93);opacity:.28;}

/* --- Ueberschriften kommen zeilenweise hinter einer Kante hervor --- */
.panel .stagger > .rise{opacity:1;transform:none;}
.rise .ln{display:block;overflow:hidden;padding-bottom:.06em;}
.rise .ln > i{
  display:block;font-style:normal;
  transform:translateY(108%);
  transition:transform .95s var(--ease);
}
.panel.on .rise .ln > i{transform:none;}
.panel.on .rise .ln:nth-child(1) > i{transition-delay:.16s;}
.panel.on .rise .ln:nth-child(2) > i{transition-delay:.28s;}
.panel.on .rise .ln:nth-child(3) > i{transition-delay:.40s;}

/* --- Abspielzeiger statt Mauszeiger ueber Videos --- */
@media (hover:hover) and (pointer:fine){
  .cursor{
    position:fixed;top:0;left:0;width:74px;height:74px;border-radius:50%;
    background:var(--rose);z-index:120;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    transform:translate(-50%,-50%) scale(0);
    transition:transform .32s var(--ease);
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  .cursor::after{
    content:"";border-left:19px solid #fff;
    border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;
  }
  .cursor.on{transform:translate(-50%,-50%) scale(1);}
  .video{cursor:none;}
  body.playcursor .video .play{opacity:0;transition:opacity .25s ease;}
}

/* Der Filmkasten des Auftakts soll nicht als helleres Rechteck sichtbar sein:
   Die Raender werden weich ausgeblendet, statt hart abzuschneiden. */
.intro video{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.55) 64%, transparent 80%);
  mask-image:radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.55) 64%, transparent 80%);
}

/* ============================================================
   V3, 28.08.2026: Fotos, Hintergrundvideo, Handy-Fassung
   ============================================================ */

/* ---------- Hintergrundvideo hinter der Startseite ---------- */
.panel > .bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.panel > .bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(.9);
}
.panel > .bg .veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(20,20,20,.96) 0%, rgba(20,20,20,.86) 34%,
    rgba(20,20,20,.62) 66%, rgba(20,20,20,.46) 100%);
}
.panel > .inner{position:relative;z-index:2;}

/* ---------- Fotos in How it works ---------- */
.photos{display:grid;grid-template-columns:1.42fr 1fr;gap:16px;align-items:start;}
.photos figure{margin:0;}
.photos img{
  width:100%;height:min(300px,34vh);object-fit:cover;display:block;
  border:1px solid var(--line);background:var(--black-2);
}
.photos figcaption{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--greige-dim);margin-top:9px;text-align:left;
}

/* ---------- Menueknopf und Menue fuers Handy ---------- */
.burger{display:none;width:44px;height:38px;margin-left:10px;background:none;border:0;cursor:pointer;padding:9px 8px;}
.burger span{display:block;height:2px;background:var(--greige);margin:4px 0;transition:transform .3s var(--ease),opacity .25s ease;}
.burger.x span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.burger.x span:nth-child(2){opacity:0;}
.burger.x span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
.menu{
  position:fixed;inset:0;z-index:90;background:#101010;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.menu.open{opacity:1;visibility:visible;}
.menu button{
  background:none;border:0;cursor:pointer;color:var(--white);
  font-family:var(--serif);font-weight:700;font-size:30px;padding:12px 20px;
}
.menu button:last-child{color:var(--rose);}

/* ---------- Handy ---------- */
@media (max-width:820px){
  .nav{height:58px;padding:0 16px;flex-wrap:nowrap;}
  .brand span{font-size:12px;letter-spacing:.34em;}
  .nav .tab{display:none;}
  .burger{display:block;}
  .cta{margin-left:auto;padding:9px 14px;font-size:13.5px;white-space:nowrap;}
  :root{--head:58px;}

  /* Seiten duerfen senkrecht laufen, statt in eine Bildschirmhoehe gepresst zu werden */
  .panel, .panel.top{justify-content:flex-start;padding:22px 18px 104px;}
  .home{gap:26px;}
  .home h1{font-size:clamp(34px,9vw,46px);}
  .home .lead{font-size:16px;}
  .home .actions .btn{width:100%;text-align:center;}

  /* Bedienleiste unten links, Rechtszeile wandert in die Start-Seite */
  .legal{display:none;}
  .rail{left:16px;bottom:16px;gap:10px;}
  .rail button{width:40px;height:40px;}
  .mobile-legal{display:block;margin-top:22px;}

  /* Work: Pfeile unter das Video statt darauf */
  .car-nav{display:flex;justify-content:center;gap:16px;margin-top:16px;}
  .car-btn{position:static;transform:none;width:56px;height:56px;font-size:22px;}
  .car-prev:hover:not(:disabled),.car-next:hover:not(:disabled){transform:none;}
  .slide-cap{flex-direction:column;gap:4px;align-items:center;}
  .slide-cap b{font-size:17px;}
  .proof{grid-template-columns:1fr 1fr;}

  /* How it works: Leiste in den Fluss, Fotos flacher */
  .vrail{position:static;transform:none;flex-direction:row;align-self:center;margin-top:20px;gap:14px;}
  .vrail .marks{flex-direction:row;}
  .vrail .marks i{width:30px;height:4px;}
  .vrail .marks i.on{width:44px;height:4px;}
  .vrail button{width:52px;height:52px;font-size:21px;}
  .has-rail{padding:0;}
  .vstage.fixed{height:clamp(300px,44vh,380px);}
  .photos img{height:min(190px,24vh);}
  .photos figcaption{font-size:10px;letter-spacing:.18em;}
  .vstep .txt .stepno b{font-size:38px;}

  .cards{gap:14px;}
  .card{padding:22px 20px;}
  details summary{font-size:15.5px;}
}
.mobile-legal{display:none;}
.mobile-legal a{text-decoration:none;}

/* Text der Schritte wurde unten abgeschnitten: Buehne hoeher, Fotos flacher */
.vstage.fixed{height:clamp(370px,58vh,560px);}
.photos img{height:min(280px,30vh);}
@media (max-height:760px){ .photos img{height:min(210px,26vh);} }

/* ---- Nachtrag, muss am Ende stehen, sonst gewinnen aeltere Regeln ---- */
@media (max-width:820px){
  /* Die alte Regel .vstep .art{display:block} hatte das Fotoraster plattgemacht */
  .vstep .art.photos{display:grid;grid-template-columns:1.28fr 1fr;gap:10px;max-width:100%;}
  .photos img{height:min(200px,25vh);}
  .photos figcaption{font-size:9.5px;letter-spacing:.16em;margin-top:7px;}

  /* Work: Pfeile gehoeren unter das Video, nicht darueber */
  .carousel{display:flex;flex-direction:column;}
  .carousel-view{order:1;}
  .slide-cap{order:2;}
  .dots{order:3;}
  .car-nav{order:4;}
}

/* Kopfzeile ueber dem Menue, damit der Schliessen-Knopf erreichbar bleibt */
header.site{z-index:95;}
.menu{padding-top:var(--head);}

/* ============================================================
   V4, 29.08.2026: Auftakt mit drei Streifen, How it works neu
   ============================================================ */

/* ---------- Auftakt ---------- */
.intro{background:var(--black);overflow:hidden;}
.intro .strips{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;background:var(--black);}
.intro .strip{position:relative;overflow:hidden;background:#0d0d0d;transform:translateY(103%);}
.intro .strip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.intro.in .strip{transform:none;transition:transform .78s var(--ease);}
.intro.in .strip:nth-child(1){transition-delay:0s;}
.intro.in .strip:nth-child(2){transition-delay:.09s;}
.intro.in .strip:nth-child(3){transition-delay:.18s;}
.intro .introveil{position:absolute;inset:0;background:rgba(15,15,15,.2);opacity:0;transition:opacity .6s ease;}
.intro.in .introveil{opacity:1;transition-delay:.6s;background:rgba(15,15,15,.62);}
.intro .intrologo{
  position:relative;z-index:3;width:min(44vw,440px);height:auto;
  opacity:0;transform:scale(.96);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 44%, rgba(0,0,0,.5) 64%, transparent 80%);
  mask-image:radial-gradient(circle at 50% 50%, #000 44%, rgba(0,0,0,.5) 64%, transparent 80%);
}
.intro.in .intrologo{opacity:1;transform:none;transition:opacity .7s ease .62s, transform .9s var(--ease) .62s;}
.intro .skip{z-index:4;}
/* Abgang: die Streifen fahren auseinander */
.intro.out .strip{transition:transform .72s var(--ease);}
.intro.out .strip:nth-child(1){transform:translateY(-104%);}
.intro.out .strip:nth-child(2){transform:translateY(104%);}
.intro.out .strip:nth-child(3){transform:translateY(-104%);}
.intro.out .intrologo{opacity:0;transition:opacity .35s ease;}
.intro.out .introveil{opacity:0;transition:opacity .5s ease;}
.intro.out{background:transparent;}
@media (max-width:820px){
  .intro .strips{gap:4px;}
  .intro .intrologo{width:74vw;}
}

/* ---------- How it works: Nummer oben, Versatz, Film in Step 03 ---------- */
.vstep .stepno{margin:0 0 16px;}
.vstep .stepno em{
  font-style:normal;font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:.22em;color:var(--greige-dim);
}
.vstep .txt{margin-top:20px;}
.photos .tall{margin-top:38px;}
.photos figcaption{text-align:left;}
.photos.film{grid-template-columns:1.95fr 1fr;}
.photos .stepvid{
  width:100%;height:min(340px,38vh);object-fit:cover;display:block;
  border:1px solid rgba(200,184,162,.3);background:var(--black-2);
}
.photos.film .tall img{height:min(268px,30vh);}
@media (max-width:820px){
  .photos .tall{margin-top:18px;}
  .photos .stepvid{height:min(200px,26vh);}
  .photos.film .tall img{height:min(150px,20vh);}
  .vstep .stepno{margin-bottom:12px;}
  .vstep .stepno em{font-size:11px;}
}

/* Nummer nach oben gerueckt und Versatz brauchen mehr Hoehe, sonst wird der Text abgeschnitten */
.vstage.fixed{height:clamp(420px,64vh,600px);}
.photos img{height:min(262px,28vh);}
.photos .stepvid{height:min(320px,35vh);}
.photos.film .tall img{height:min(250px,27vh);}
@media (max-height:800px){
  .photos .tall{margin-top:26px;}
  .vstep .stepno{margin-bottom:10px;}
  .vstep .txt{margin-top:14px;}
}
@media (max-height:620px){
  .photos img{height:min(170px,24vh);}
  .photos .stepvid{height:min(200px,28vh);}
  .photos .tall{margin-top:16px;}
}

/* Handy: nur die Logo-Animation, keine drei Streifen */
.intro.nostrips .strips,
.intro.nostrips .introveil{display:none;}
.intro.nostrips .intrologo{width:76vw;}

/* Handy: die Schrittleiste darf nicht auf den Seitenpfeilen liegen */
@media (max-width:820px){ .vrail{margin-bottom:52px;} }

/* Handy: Schrittbereich kompakter, damit die Leiste nicht auf den Seitenpfeilen landet */
@media (max-width:820px){
  .vstage.fixed{height:clamp(296px,44vh,392px);}
  .photos img{height:min(152px,19vh);}
  .photos .stepvid{height:min(160px,20vh);}
  .photos.film .tall img{height:min(122px,16vh);}
  .photos .tall{margin-top:14px;}
  .vrail{margin-top:14px;margin-bottom:0;}
}

/* Handy: Buehne wieder etwas hoeher, der Beschreibungstext wurde abgeschnitten */
@media (max-width:820px){ .vstage.fixed{height:clamp(340px,50vh,430px);} }

/* Handy-Auftakt: ein Clip bildfuellend statt drei Streifen */
.intro.solo .strips{grid-template-columns:1fr;gap:0;}
.intro.solo .strip:nth-child(2),
.intro.solo .strip:nth-child(3){display:none;}
.intro.solo .intrologo{width:74vw;}
.intro.solo.in .introveil{background:rgba(15,15,15,.55);}

/* Handy: der Hinweis unter den Vorschauen lag auf den Seitenpfeilen, am Telefon ist er ohnehin ueberfluessig */
@media (max-width:820px){ .swap + .muted{display:none;} }

/* ============================================================
   V5.1, 07.09.2026: Farben kräftiger. Die Clips waren nicht zu
   dunkel, die Schleier darüber waren zu stark.
   ============================================================ */

/* Auftakt: statt eines flächigen Schleiers ein radialer.
   Dunkel in der Mitte, damit das Logo steht, hell an den Rändern,
   damit die Farben der Clips durchkommen. */
.intro .strip video{filter:saturate(1.18) contrast(1.04);}
.intro.in .introveil{
  background:radial-gradient(circle at 50% 50%,
    rgba(12,12,12,.74) 0%,
    rgba(12,12,12,.52) 30%,
    rgba(12,12,12,.22) 58%,
    rgba(12,12,12,.06) 100%);
}
.intro.solo.in .introveil{
  background:radial-gradient(circle at 50% 46%,
    rgba(12,12,12,.72) 0%,
    rgba(12,12,12,.48) 32%,
    rgba(12,12,12,.2) 62%,
    rgba(12,12,12,.05) 100%);
}

/* Hintergrund der Startseite: Video kräftiger, Schleier nur noch
   dort dunkel, wo tatsächlich Text steht. */
.panel > .bg video{opacity:.66;filter:saturate(1.2) contrast(1.04);}
.panel > .bg .veil{
  background:linear-gradient(100deg,
    rgba(20,20,20,.93) 0%,
    rgba(20,20,20,.78) 32%,
    rgba(20,20,20,.42) 64%,
    rgba(20,20,20,.2) 100%);
}
@media (max-width:820px){
  /* Am Handy steht der Text über der ganzen Breite, deshalb dort
     gleichmäßiger abdunkeln, sonst wird die Überschrift unlesbar. */
  .panel > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.9) 0%,
      rgba(20,20,20,.8) 46%,
      rgba(20,20,20,.62) 100%);
  }
  .panel > .bg video{opacity:.58;}
}

/* Auftakt laeuft jetzt bis 3,25 Sek.: Logo etwas frueher stehen lassen,
   damit es nicht erst kurz vor dem Abgang voll da ist. */
.intro.in .intrologo{transition:opacity .7s ease .55s, transform .9s var(--ease) .55s;}

/* Der Kasten der Logo-Animation wurde sichtbar, seit die Streifen heller sind.
   Maske enger ziehen, damit nur die Wespe steht und der Rand verschwindet. */
.intro .intrologo{
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 26%, rgba(0,0,0,.5) 44%, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000 26%, rgba(0,0,0,.5) 44%, transparent 62%);
}

/* ============================================================
   V5.5, 07.09.2026: Logo größer, Übergabe an die Kopfzeile
   ============================================================ */

/* Logo im Auftakt deutlich größer */
.intro .intrologo{width:min(58vw,620px);}
.intro.solo .intrologo{width:88vw;}
@media (max-width:820px){ .intro .intrologo{width:88vw;} }

/* Der Flug nach oben links darf nicht am Rand abgeschnitten werden */
.intro{overflow:visible;}
.intro .strips{overflow:hidden;}

/* Zeichen und Schriftzug in der Kopfzeile größer */
.brand img{height:42px;width:42px;}
.brand span{font-size:16px;letter-spacing:.38em;text-indent:.38em;}
@media (max-width:820px){
  .brand img{height:34px;width:34px;}
  .brand span{font-size:13.5px;letter-spacing:.3em;text-indent:.3em;}
}

/* ============================================================
   V5.6, 07.09.2026: Lichtkegel, rote zweite Zeile, Wörter
   fliegen einzeln ein, Vorschaubilder etwas größer
   ============================================================ */

/* --- Lichtkegel hinter dem Textblock der Startseite ---
   Dunkelt nur unter der Schrift ab und läuft zum Rand hin aus.
   Das Video bleibt überall sonst so hell wie bisher. */
.home > .stagger:first-child{position:relative;}
.home > .stagger:first-child::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-16%;right:-26%;top:-18%;bottom:-20%;
  background:radial-gradient(58% 58% at 36% 50%,
    rgba(8,8,8,.88) 0%,
    rgba(8,8,8,.66) 40%,
    rgba(8,8,8,.3) 70%,
    rgba(8,8,8,0) 100%);
}

/* --- Zweite Zeile in Rot, wie auf Nicos Instagram-Kacheln --- */
.rise .ln.accent > i{color:var(--rose);}

/* --- Wörter fliegen einzeln hinter der Kante hervor --- */
.rise.words .ln{padding-bottom:.1em;margin-bottom:-.04em;}
.rise.words .ln > i{
  display:inline-block;font-style:normal;
  transform:translateY(112%);
  transition:transform .82s var(--ease);
}
.panel.on .rise.words .ln > i{transform:none;}
.panel.on .rise.words .ln:nth-child(1) > i:nth-of-type(1){transition-delay:.12s;}
.panel.on .rise.words .ln:nth-child(1) > i:nth-of-type(2){transition-delay:.20s;}
.panel.on .rise.words .ln:nth-child(1) > i:nth-of-type(3){transition-delay:.28s;}
.panel.on .rise.words .ln:nth-child(2) > i:nth-of-type(1){transition-delay:.38s;}
.panel.on .rise.words .ln:nth-child(2) > i:nth-of-type(2){transition-delay:.46s;}
.panel.on .rise.words .ln:nth-child(2) > i:nth-of-type(3){transition-delay:.54s;}

/* --- Auf breiten Schirmen mehr Fläche, dadurch größere Vorschaubilder --- */
@media (min-width:1360px){
  .panel[data-name="Home"] .inner{max-width:1300px;}
  .thumbs{gap:12px;}
}

/* ============================================================
   V5.7, 07.09.2026: rote Akzentzeile auf allen Seiten,
   Lichtkasten für Videos
   ============================================================ */

/* Die rote Zeile gilt jetzt auch auf den Folgeseiten */
.head-rose .ln.accent > i{color:var(--rose);}

/* ---------- Lichtkasten ---------- */
.lightbox{
  position:fixed;inset:0;z-index:150;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,8,.93);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .38s ease, visibility .38s;
}
.lightbox.open{opacity:1;visibility:visible;}
.lb-box{
  width:min(88vw,1380px);aspect-ratio:16/9;max-height:82vh;
  background:#000;border:1px solid rgba(200,184,162,.22);
  transform-origin:top left;
  box-shadow:0 50px 140px rgba(0,0,0,.75);
}
.lb-box iframe{width:100%;height:100%;border:0;display:block;}
.lb-close{
  position:absolute;top:24px;right:28px;width:54px;height:54px;z-index:2;
  border:1px solid var(--line);background:rgba(22,22,22,.7);
  color:var(--white);font-family:var(--sans);font-size:27px;line-height:1;cursor:pointer;
  transition:border-color .25s ease,background .25s ease,transform .3s var(--ease);
}
.lb-close:hover{border-color:var(--rose);background:rgba(232,50,90,.2);transform:scale(1.08);}
body.lb-open .cursor{display:none;}
@media (max-width:820px){
  .lb-box{width:94vw;max-height:70vh;}
  .lb-close{top:14px;right:16px;width:44px;height:44px;font-size:23px;}
}

/* ============================================================
   V5.8, 09.09.2026: Start-Seite mit Vertrauensbereich und
   drei Kontaktwegen, Logo ohne schwarzen Rand
   ============================================================ */

.start-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;max-width:1120px;}
.start-left .lead{margin-top:14px;font-size:17px;}

/* Kundenstimmen */
.quotes{margin-top:34px;display:flex;flex-direction:column;gap:14px;}
.quotes blockquote{
  margin:0;padding:16px 18px;background:var(--black-2);
  border:1px solid var(--line);border-left:2px solid var(--rose);
}
.quotes p{margin:0;font-size:15.5px;line-height:1.55;color:var(--greige);}
.quotes cite{
  display:block;margin-top:9px;font-style:normal;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--greige-dim);
}

/* Die drei Wege neben dem Formular */
.or{
  text-align:center;margin:22px 0 16px;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--greige-dim);position:relative;
}
.or::before,.or::after{
  content:"";position:absolute;top:50%;width:calc(50% - 26px);height:1px;background:var(--line);
}
.or::before{left:0;} .or::after{right:0;}

.routes{display:flex;flex-direction:column;gap:10px;}
.route{
  display:block;text-decoration:none;padding:14px 18px;
  background:var(--black-2);border:1px solid var(--line);
  transition:border-color .25s ease,background .25s ease,transform .3s var(--ease);
}
.route:hover{border-color:var(--rose);background:rgba(232,50,90,.08);transform:translateY(-2px);}
.route b{display:block;color:var(--white);font-size:15.5px;font-weight:600;}
.route span{display:block;margin-top:3px;color:var(--greige-dim);font-size:13.5px;}
.route.buy{border-color:rgba(232,50,90,.4);}
.route.buy b{color:var(--rose);}

.start-right .form-grid{margin-top:0;}
.start-right .btn{width:100%;text-align:center;}

@media (max-width:900px){
  .start-grid{grid-template-columns:1fr;gap:32px;}
  .quotes{margin-top:24px;}
}

/* V5.9: Kontaktzeile im Kopfbereich der Startseite */
.hero-contact{margin-top:8px;font-size:14px;}
.hero-contact a{color:var(--greige);text-decoration:none;border-bottom:1px solid rgba(200,184,162,.35);}
.hero-contact a:hover{color:var(--rose);border-bottom-color:var(--rose);}

/* V6.0: Kontaktsymbole statt ausgeschriebener Links */
.social{display:flex;align-items:center;gap:12px;margin-top:14px;}
.social .muted{font-size:14px;margin-right:2px;}
.ic{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--greige);text-decoration:none;
  transition:border-color .25s ease,color .25s ease,background .25s ease,transform .3s var(--ease);
}
.ic:hover{border-color:var(--rose);color:var(--rose);background:rgba(232,50,90,.1);transform:translateY(-2px);}
.ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;
        stroke-linecap:round;stroke-linejoin:round;}
.ic svg .dot,.ic svg .fill{fill:currentColor;stroke:none;}
@media (max-width:820px){
  .social{flex-wrap:wrap;gap:10px;}
  .social .muted{width:100%;margin-bottom:2px;}
}

/* ============================================================
   V6.1, 10.09.2026: Startseite höher gesetzt, Ränder schmaler,
   Kopfzeile etwas größer, Symbole deutlicher
   ============================================================ */

/* Kopfzeile minimal größer, damit sie den kleineren Abstand darunter trägt */
:root{--head:72px;}
header.site{height:72px;}
.nav{height:100%;}
.brand img{height:48px;width:48px;}
.brand span{font-size:16.5px;}

/* Der Block startet jetzt dicht unter der Kopfzeile statt in der Mitte
   zu schweben. Das war der große Leerraum, den Ben gesehen hat. */
.panel[data-name="Home"]{
  justify-content:flex-start;
  padding-top:clamp(24px,6.5vh,84px);
}

/* Schmalere Ränder und eine größere Überschrift, damit der zurückgewonnene
   Platz auch gefüllt wird */
@media (min-width:1200px){
  .panel[data-name="Home"] .inner{max-width:min(92vw,1480px);}
  .home h1{font-size:clamp(52px,5.6vw,96px);}
  .home{gap:64px;}
}

/* Symbole größer und heller. Rot bleibt dem Überfahren vorbehalten,
   damit es nicht mit dem roten Knopf und der roten Zeile konkurriert. */
.ic{width:52px;height:52px;border-color:rgba(200,184,162,.34);color:var(--white);}
.ic svg{width:26px;height:26px;stroke-width:1.6;}
.ic:hover{border-color:var(--rose);color:var(--rose);background:rgba(232,50,90,.12);}
.social{gap:14px;margin-top:18px;}

/* ============================================================
   V6.2, 10.09.2026: Zahlenband schließt die Startseite ab,
   Symbole gefüllt statt Umriss
   ============================================================ */

/* Der Rahmen füllt die Panelhöhe, damit das Band unten sitzen kann */
.panel[data-name="Home"] .inner{display:flex;flex-direction:column;flex:1;}
.home-wrap .home{width:100%;}
.home-proof{
  margin-top:auto;margin-bottom:clamp(10px,3vh,34px);
  grid-template-columns:repeat(4,1fr);
}
.home-proof div{
  padding:22px 22px;
  transition:background .28s ease, box-shadow .28s ease;
}
.home-proof div strong,.home-proof div span{transition:color .28s ease;}
.home-proof div:hover{background:rgba(232,50,90,.11);}
.home-proof div:hover strong{color:var(--rose);}
.home-proof div:hover span{color:var(--greige);}

/* Symbole: gefüllte Fläche statt dünnem Umriss, deshalb sichtbar */
.ic{
  background:var(--greige);border:0;color:#141414;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.ic svg{stroke-width:1.9;}
.ic:hover{background:var(--rose);color:#fff;border:0;transform:translateY(-3px);}
.social{margin-top:24px;}
.social .muted{font-size:14.5px;}

/* Etwas mehr Luft zwischen den Bausteinen */
.home .lead{margin-top:24px;}
.home .actions{margin-top:30px;}

@media (max-width:900px){
  .home-proof{grid-template-columns:1fr 1fr;margin-top:30px;}
  .home-proof div{padding:16px 16px;}
}

/* ============================================================
   V6.3, 10.09.2026: Kopfzeile bündig zum Inhalt und größer,
   Überschrift bekommt den ersten Blick
   ============================================================ */

/* Die Leiste oben fluchtet jetzt mit dem Seiteninhalt.
   Inhaltsbreite plus die beiden Innenabstände ergibt die Leistenbreite,
   dadurch sitzt das Zeichen genau über der Überschrift. */
@media (min-width:1200px){
  .nav{max-width:calc(min(92vw,1480px) + 56px);padding:0 28px;}
}

/* SIREX oben deutlich größer */
:root{--head:84px;}
header.site{height:84px;}
.brand img{height:56px;width:56px;}
.brand span{font-size:21px;letter-spacing:.34em;text-indent:.34em;}
.brand{gap:14px;}

/* Die Überschrift soll der erste Blickfang sein.
   Drei Stellschrauben, keine davon laut: größer, weniger Rot daneben,
   und ein etwas kräftigerer Lichtkegel darunter. */
@media (min-width:1200px){
  .home h1{font-size:clamp(56px,6.4vw,108px);line-height:1.0;}
}
.home .eyebrow{color:var(--greige-dim);}
.home .lead{color:rgba(200,184,162,.78);}
.home > .stagger:first-child::before{
  background:radial-gradient(56% 58% at 34% 46%,
    rgba(8,8,8,.94) 0%,
    rgba(8,8,8,.74) 38%,
    rgba(8,8,8,.34) 68%,
    rgba(8,8,8,0) 100%);
}

/* Feinschliff V6.3: Leiste exakt auf die Kante des Inhalts, und die
   Überschrift wieder auf die Größe, bei der sie zweizeilig bleibt.
   Ab etwa 95 Pixeln bricht „Your song deserves" in der linken Spalte um,
   und dann steht „deserves" allein in einer Zeile. */
@media (min-width:1200px){
  .nav{max-width:calc(min(92vw,1480px) + 56px);padding:0 24px;}
  .home h1{font-size:clamp(56px,5.75vw,94px);}
}

/* Beispielzitate: sichtbar als Muster markiert, damit sie nicht
   versehentlich online gehen. Die Markierung fällt weg, sobald
   echte Kundenstimmen da sind. */
.quotes blockquote{position:relative;}
.quotes .tag{
  position:absolute;top:-1px;right:-1px;
  background:rgba(232,50,90,.9);color:#fff;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:3px 7px;
}
.quotes blockquote p{font-size:16px;line-height:1.6;color:var(--white);}
.quotes cite{color:var(--greige-dim);}

/* ============================================================
   V6.5, 10.09.2026: Kundenstimmen laufen durch, eine nach der
   anderen, unter dem Formular
   ============================================================ */

.panel[data-name="Start"] .inner{display:flex;flex-direction:column;flex:1;}
.start-wrap .start-grid{width:100%;}

.quoteband{
  margin-top:auto;padding-top:26px;
  border-top:1px solid var(--line);
}
.qstage{position:relative;height:clamp(96px,13vh,124px);overflow:hidden;}
.q{
  position:absolute;left:0;right:0;top:0;margin:0;padding:0 0 0 18px;
  border-left:2px solid var(--rose);
  opacity:0;transform:translateX(54px);pointer-events:none;
  transition:opacity .5s ease, transform .62s var(--ease);
}
.q.on{opacity:1;transform:none;pointer-events:auto;}
.q.out{opacity:0;transform:translateX(-54px);}
.q p{
  margin:0;font-family:var(--serif);font-weight:600;
  font-size:clamp(17px,1.5vw,23px);line-height:1.42;color:var(--white);
}
.q cite{
  display:block;margin-top:10px;font-style:normal;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--greige-dim);
}
.q .tag{
  position:absolute;top:0;right:0;
  background:rgba(232,50,90,.9);color:#fff;
  font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  padding:3px 7px;
}
.qdots{display:flex;gap:8px;margin-top:16px;}
.qdots button{
  width:30px;height:3px;border:0;padding:0;cursor:pointer;
  background:rgba(200,184,162,.24);transition:background .3s ease;
}
.qdots button.on{background:var(--rose);}

@media (max-width:900px){
  .quoteband{margin-top:30px;}
  .qstage{height:auto;min-height:118px;}
  .q p{font-size:17px;}
}

/* Das Zitatband saß auf der festen Fußzeile. Platz schaffen. */
.panel[data-name="Start"]{padding-bottom:clamp(76px,11vh,118px);}
.quoteband{margin-bottom:clamp(4px,2vh,18px);}
@media (max-width:900px){
  .panel[data-name="Start"]{padding-bottom:120px;}
}

/* V6.6: Die vier Wege stehen links neben dem Formular statt darunter.
   Damit sind beide Spalten etwa gleich hoch und das Zitatband hat Platz. */
.routes-label{
  margin:26px 0 12px;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--greige-dim);
}
.start-left .routes{gap:9px;}
.start-left .route{padding:12px 16px;}
.start-left .route b{font-size:15px;}
.start-left .route span{font-size:13px;}
.start-right .mobile-legal{display:block;margin-top:18px;}

/* ============================================================
   V6.7, 10.09.2026: Start-Seite entrümpelt.
   Drei Bausteine statt acht Rechtecken: Erzählung links,
   Formular rechts, Antwortweg als Feld darin.
   ============================================================ */

/* Das Zitat sieht bewusst nicht mehr aus wie ein Bedienelement:
   kein Kasten, kein Rahmen, nur Sprache. */
.start-left .quoteband{
  margin:38px 0 0;padding:0;border:0;border-top:0;
}
.start-left .qstage{height:auto;min-height:clamp(150px,20vh,200px);}
.start-left .q{
  padding:0 0 0 46px;border-left:0;
  transform:none;transition:opacity .65s ease;
}
.start-left .q.on{transform:none;}
.start-left .q.out{transform:none;opacity:0;}
.start-left .q::before{
  content:"„";position:absolute;left:-2px;top:-26px;
  font-family:var(--serif);font-weight:700;font-size:96px;line-height:1;
  color:var(--rose);opacity:.85;
}
.start-left .q p{font-size:clamp(19px,1.7vw,26px);line-height:1.4;}
.start-left .q .tag{position:static;display:inline-block;margin-top:12px;}
.start-left .q cite{margin-top:8px;}
.start-left .qdots{margin-top:14px;margin-left:46px;}

/* Antwortweg: eine Zeile mit vier Schaltern statt vier Kästen */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.seg button{
  background:var(--black-2);border:1px solid var(--line);color:var(--greige);
  font-family:var(--sans);font-size:14px;padding:11px 6px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.seg button:hover{border-color:rgba(200,184,162,.4);color:var(--white);}
.seg button.on{border-color:var(--rose);background:rgba(232,50,90,.14);color:var(--white);}

.after-send{margin-top:14px;font-size:13.5px;}
.after-send a{color:var(--greige);}
.after-send a:hover{color:var(--rose);}

/* Die doppelte Rechtszeile im Formularbereich ist weg,
   unten rechts steht sie weiterhin. */
.start-right .mobile-legal{display:none;}

@media (max-width:900px){
  .seg{grid-template-columns:1fr 1fr;}
  .start-left .quoteband{margin-top:28px;}
  .start-left .q::before{font-size:72px;top:-20px;}
  .start-left .q{padding-left:34px;}
  .start-left .qdots{margin-left:34px;}
}

/* Zwei Nachbesserungen: Die Muster-Marke stand über dem Zitat statt
   darunter, und der Block klebte oben, seit das Band unten weg ist. */
.start-left .q{display:flex;flex-direction:column;align-items:flex-start;}
.start-left .q p{order:1;}
.start-left .q cite{order:2;}
.start-left .q .tag{order:3;margin-top:14px;}
.panel[data-name="Start"] .inner{flex:0 1 auto;}
.panel[data-name="Start"]{justify-content:center;justify-content:safe center;}

/* ============================================================
   V6.8, 10.09.2026: Work zeigt die Nachbarvideos an, Zitate
   wandern dorthin, Kontaktseite wird einspaltig
   ============================================================ */

/* --- Karussell mit angeschnittenen Nachbarn --- */
.slide{flex:0 0 60%;padding:0 10px;opacity:.26;pointer-events:none;
       transition:opacity .55s var(--ease);}
.slide.on{opacity:1;pointer-events:auto;}
.slide .video{width:100%;height:auto;aspect-ratio:16/9;max-width:none;margin:0;}
.car-prev{left:calc(20% - 84px);}
.car-next{right:calc(20% - 84px);}
.car-prev:hover:not(:disabled){transform:translateY(-50%) scale(1.12) translateX(-3px);}
.car-next:hover:not(:disabled){transform:translateY(-50%) scale(1.12) translateX(3px);}

/* --- Zitat unter dem Video, mittig, ohne Kasten --- */
.work-quotes{margin:26px 0 0;padding:0;border:0;}
.work-quotes .qstage{height:auto;min-height:clamp(112px,15vh,150px);}
.work-quotes .q{
  padding:0;border-left:0;transform:none;transition:opacity .65s ease;
  align-items:center;text-align:center;
}
.work-quotes .q.on{transform:none;}
.work-quotes .q.out{transform:none;opacity:0;}
.work-quotes .q p{
  font-size:clamp(17px,1.5vw,23px);line-height:1.42;margin:0 auto;max-width:44ch;
}
.work-quotes .q cite,.work-quotes .q .tag{margin-left:auto;margin-right:auto;}
.work-quotes .qdots{justify-content:center;margin-top:12px;}
.work-quotes .q::before{content:none;}

/* --- Kontaktseite: eine Spalte, mittig, nur das Nötige --- */
.start-single{max-width:620px;margin:0 auto;text-align:center;}
.start-single .eyebrow{margin-bottom:12px;}
.start-single .lead{margin:14px auto 30px;max-width:42ch;}
.start-single .form-grid{text-align:left;}
.start-single label{text-align:left;}
.start-single .after-send{text-align:center;}

@media (max-width:900px){
  .slide{flex:0 0 84%;}
  .car-prev{left:2px;} .car-next{right:2px;}
  .work-quotes{margin-top:20px;}
  .start-single{max-width:none;}
}

/* Nachbesserung: Die Muster-Marke hing rechts oben statt unter dem Zitat,
   und die Work-Seite darf breiter werden, damit das mittlere Video wirkt. */
.work-quotes .q .tag{position:static;display:inline-block;margin-top:12px;}
@media (min-width:1200px){
  .panel[data-name="Work"] .inner{max-width:min(92vw,1380px);}
}

/* Reihenfolge im Zitat gilt jetzt überall: Text, Name, dann die Muster-Marke */
.q{display:flex;flex-direction:column;}
.q p{order:1;}
.q cite{order:2;}
.q .tag{order:3;}

/* Der Absendeknopf war nach dem Umbau wieder schmal und links */
.start-single .btn{width:100%;text-align:center;}

/* ============================================================
   V6.9, 10.09.2026: Handy überarbeitet
   ============================================================ */
@media (max-width:820px){

  /* Kopfzeile: SIREX wurde vom roten Knopf überdeckt */
  :root{--head:64px;}
  header.site{height:64px;}
  .nav{gap:8px;padding:0 14px;}
  .brand{gap:9px;}
  .brand img{height:36px;width:36px;}
  .brand span{font-size:12px;letter-spacing:.22em;text-indent:.22em;}
  .cta{padding:9px 13px;font-size:13px;margin-left:auto;}
  .burger{margin-left:4px;width:40px;}

  /* Schriftgrößen waren durch die Rechner-Fassung mitgewachsen */
  .home h1{font-size:clamp(31px,8.4vw,42px);line-height:1.06;}
  .home .lead{font-size:15.5px;line-height:1.55;margin-top:16px;}
  .home .actions{margin-top:22px;gap:10px;}
  .btn{font-size:15px;padding:13px 20px;}
  .home .eyebrow{font-size:11px;margin-bottom:12px;}
  .social{margin-top:18px;gap:10px;}
  .ic{width:46px;height:46px;}
  .ic svg{width:23px;height:23px;}
  .home{gap:24px;}
  .panel[data-name="Home"]{padding-top:18px;}
  .home-proof{margin-top:26px;}
  .home-proof div{padding:14px 14px;}
  .home-proof strong{font-size:21px;}

  /* Hintergrund war eine störende Bildquelle statt Atmosphäre.
     Leichte Unschärfe macht daraus Textur, nicht Konkurrenz. */
  .panel > .bg video{opacity:.32;filter:saturate(1.05) blur(7px);}
  .panel > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.92) 0%,
      rgba(20,20,20,.84) 45%,
      rgba(20,20,20,.7) 100%);
  }

  /* Work: kein Anschnitt (dafür ist zu wenig Platz), Pfeile direkt
     unter das Video, Punkte weg, weil der Zähler dasselbe sagt */
  .carousel{display:flex;flex-direction:column;}
  .carousel-view{order:1;}
  .car-nav{order:2;display:flex;justify-content:center;gap:14px;margin-top:14px;}
  .slide-cap{order:3;margin-top:14px;}
  .dots{display:none;}
  .car-btn{position:static;transform:none;width:48px;height:48px;font-size:20px;}
  .slide{flex:0 0 100%;padding:0;opacity:1;pointer-events:auto;}
  .slide-cap b{font-size:15.5px;line-height:1.35;}
  .work-quotes .q p{font-size:16.5px;}
}

/* Nachbesserung Handy: Hintergrund heller, aber unscharf. Damit ist er
   sichtbar (wie gewünscht) und trotzdem keine Konkurrenz zum Text.
   Dazu ein Verlauf unten, damit Inhalt nicht in die feste Leiste läuft. */
@media (max-width:820px){
  .panel > .bg video{opacity:.46;filter:saturate(1.1) blur(8px);}
  .panel > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.88) 0%,
      rgba(20,20,20,.76) 45%,
      rgba(20,20,20,.6) 100%);
  }
  .stage::after{
    content:"";position:fixed;left:0;right:0;bottom:0;height:96px;z-index:54;
    background:linear-gradient(rgba(16,16,16,0), rgba(16,16,16,.94));
    pointer-events:none;
  }
}

/* ============================================================
   V7.0, 10.09.2026: Work aufgeräumt, Antwortweg als Symbole
   ============================================================ */

/* Titel erscheint erst beim Darüberfahren, statt dauerhaft unter dem Video */
.slide .video .hovercap{
  opacity:0;transition:opacity .3s ease;
  font-size:15px;padding:34px 16px 14px;
}
.slide .video:hover .hovercap{opacity:1;}
.slide-cap{justify-content:center;margin-top:12px;}
.slide-cap span{font-size:12.5px;}

/* Das Zitat ist jetzt klar vom Video abgesetzt und läuft sichtbar durch */
.work-quotes{
  margin-top:30px;padding-top:26px;
  border-top:1px solid rgba(200,184,162,.14);
}
.work-quotes .qstage{min-height:clamp(92px,12vh,122px);}
.work-quotes .q{
  transform:translateY(14px);
  transition:opacity .55s ease, transform .6s var(--ease);
}
.work-quotes .q.on{transform:none;}
.work-quotes .q.out{transform:translateY(-14px);opacity:0;}
.work-quotes .q p{color:var(--greige);}
.work-quotes .q .tag{margin-top:14px;opacity:.75;}

/* Antwortweg: Symbole statt Wörter */
.seg{grid-template-columns:repeat(4,1fr);gap:8px;}
.seg button{
  display:flex;align-items:center;justify-content:center;
  height:54px;padding:0;
}
.seg button svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.seg button svg .fill{fill:currentColor;stroke:none;}
.seg button.on{background:var(--rose);border-color:var(--rose);color:#fff;}

/* Die Kontaktseite wirkte am Laptop zu klein */
@media (min-width:1200px){
  .start-single{max-width:760px;}
  .start-single h2{font-size:clamp(34px,3.4vw,48px);}
  .start-single .lead{font-size:18px;}
  .start-single input{font-size:16.5px;padding:14px 16px;}
  .start-single .btn{font-size:17px;padding:16px 28px;}
}

/* ============================================================
   V7.1, 10.09.2026: Work-Seite passt wieder auf eine Bildschirmhoehe,
   das Zitatband ist als eigene Flaeche abgesetzt
   ============================================================ */

/* Das Karussell haengt an der Fensterhoehe, damit unter dem Video
   Platz fuer das Zitatband bleibt und nichts in die Fussleiste laeuft. */
@media (min-width:901px){
  .panel[data-name="Work"]{padding-bottom:clamp(56px,7vh,80px);}
  .panel[data-name="Work"] .carousel{
    width:100%;
    max-width:max(720px, calc((100vh - 540px) * 2.963 + 33px));
    margin-left:auto;margin-right:auto;
  }
}

.work-quotes{
  margin-top:22px;
  padding:16px 22px 14px;
  border:1px solid rgba(200,184,162,.11);
  border-top:1px solid rgba(232,50,90,.36);
  background:
    linear-gradient(180deg, rgba(232,50,90,.055), rgba(232,50,90,0) 62%),
    rgba(255,255,255,.022);
}
.work-quotes .qstage{min-height:clamp(78px,10vh,104px);}
.work-quotes .q p{color:var(--white);}
.work-quotes .q .tag{margin-top:10px;opacity:.7;}
.work-quotes .qdots{margin-top:10px;}

@media (max-width:900px){
  .work-quotes{margin-top:18px;padding:14px 16px 12px;}
}

/* Zwei Zitate lagen waehrend der Blende uebereinander. Erst raus, dann rein. */
.work-quotes .q.out{transition:opacity .26s ease, transform .26s ease;}
.work-quotes .q.on{transition:opacity .5s ease .27s, transform .56s var(--ease) .27s;}

/* Flache Laptop-Fenster: Ueberschrift kleiner, damit das Video groesser wird */
@media (min-width:901px) and (max-height:860px){
  .panel[data-name="Work"] h2{font-size:clamp(28px,3vw,38px);}
  .panel[data-name="Work"] .carousel{
    margin-top:16px;
    max-width:max(720px, calc((100vh - 470px) * 2.963 + 33px));
  }
  .work-quotes{margin-top:16px;padding:13px 20px 11px;}
  .work-quotes .qstage{min-height:72px;}
  .work-quotes .q p{font-size:17px;}
}

/* Handy: der Block sass oben, unten blieb eine leere Flaeche */
@media (max-width:820px){
  .panel[data-name="Work"] .inner{margin-top:auto;margin-bottom:auto;}
}

/* Handy: Absendeknopf und Hinweiszeile lagen hinter der Fussleiste */
@media (max-width:820px){
  .start-single h2{font-size:clamp(29px,7.6vw,37px);}
  .start-single .eyebrow{margin-bottom:8px;}
  .start-single .lead{margin:10px auto 18px;font-size:15px;}
  .start-single .form-grid{gap:12px;}
  .start-single input{padding:11px 13px;}
  .start-single .seg button{height:48px;}
  .start-single .btn{padding:13px 20px;}
  .start-single .after-send{margin-top:12px;}
}

/* Handy, zweiter Anlauf: Kopfzeile der Kontaktseite kleiner,
   damit Knopf und Hinweiszeile ueber der Fussleiste stehen */
@media (max-width:820px){
  .start-single .eyebrow{display:none;}
  .start-single h2{font-size:clamp(27px,7vw,33px);}
  .start-single .lead{margin:8px auto 14px;}
  .start-single .form-grid{gap:10px;}
  .start-single .seg button{height:46px;}
}

/* ============================================================
   V7.2, 11.09.2026: nur Handy. Startseite auf einen Bildschirm,
   Work-Video mittig, Kontaktseite ohne Scrollen, schmale Leiste
   ============================================================ */
.lead-m{display:none;}
.ic[hidden]{display:none !important;}
.menu-foot{display:none;}

@media (max-width:820px){

  /* --- Startseite: eine Zeile statt Absatz, ein Knopf, zwei Symbole --- */
  .home .lead:not(.lead-m){display:none;}
  .home .lead-m{display:block;font-size:16px;margin-top:14px;}
  .home .actions .btn-primary{display:none;}
  .social .muted, .home-note, .home-media{display:none !important;}
  .social .ic-yt{display:none;}
  .social{gap:26px;margin-top:22px;}
  .ic, .ic:hover{
    width:auto;height:auto;background:none;border:0;box-shadow:none;
    color:var(--white);transform:none;
  }
  .ic svg{width:34px;height:34px;stroke-width:1.8;}
  .ic:active{color:var(--rose);}

  /* --- Menue: Symbole und Rechtliches, weil die Rechtszeile am Handy fehlt --- */
  .menu > button[data-go="5"]{color:var(--rose);}
  .menu-foot{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:26px;}
  .menu-social{display:flex;gap:30px;}
  .menu-social a{color:var(--white);}
  .menu-social svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .menu-social svg .fill{fill:currentColor;stroke:none;}
  .menu-legal{margin:0;text-align:center;font-size:13px;line-height:1.9;color:var(--greige-dim);}
  .menu-legal a{color:var(--greige-dim);text-decoration:none;}

  /* --- Untere Leiste: schmal, ohne Kaesten --- */
  .rail{bottom:8px;left:10px;gap:4px;}
  .rail button, .rail button:hover:not(:disabled){
    border:0;width:36px;height:36px;font-size:19px;background:none;transform:none;
  }
  .rail span{margin-left:6px;}
  .stage::after{height:58px;}
  .panel, .panel.top{padding-bottom:64px;}
  .panel[data-name="Start"]{padding-bottom:56px;}

  /* --- Kontaktseite: alles auf einen Blick --- */
  .panel[data-name="Start"]{padding-top:12px;}
  .start-single h2 .ln{display:inline-block;}
  .start-single h2 .ln.accent{margin-left:.26em;}
  .start-single .lead{margin:6px auto 0;}
  .start-single .form-grid{margin-top:14px;gap:8px;}
  .start-single label{margin-bottom:4px;}
  .start-single input{padding:10px 13px;}
  .start-single .after-send{display:none;}

  /* --- How it works: kein einzelnes Wort in der letzten Zeile --- */
  .vstep .txt p{text-wrap:balance;}
}

/* Startseite Handy, Feinschliff: Zeile gleichmaessig umbrechen,
   Luft zwischen Symbol und Zahlen, Zahlen kompakter */
@media (max-width:820px){
  .home .lead-m{text-wrap:balance;}
  .home-proof{margin-top:24px;}
  .home-proof span{line-height:1.35;}
  .home-proof div{padding:12px 14px;}
}

/* ============================================================
   V7.3, 11.09.2026: Symbole ohne Kasten (Laptop und Handy),
   Bewertung mit fuenf Sternen, Startseite Handy mittig
   ============================================================ */

/* --- Symbole: frei stehend, hell, gross. YouTube wandert in die Fusszeile --- */
.social .ic-yt{display:none;}
.ic, .ic:hover{
  width:auto;height:auto;background:none;border:0;box-shadow:none;
}
.ic{color:var(--white);transition:color .25s ease, transform .3s var(--ease);}
.ic:hover{color:var(--rose);transform:translateY(-2px);}
.ic svg{width:34px;height:34px;stroke-width:1.8;}
.social{gap:26px;}

/* --- Bewertung ueber den durchlaufenden Stimmen --- */
.rating{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px;}
.rating .stars{display:flex;gap:3px;color:var(--rose);}
.rating svg{width:17px;height:17px;fill:currentColor;}
.rating b{font-size:14.5px;font-weight:600;letter-spacing:.06em;color:var(--white);}

.lbl-m{display:none;}

@media (max-width:820px){
  /* Startseite: mittig und etwas tiefer, Zeile in einer Zeile */
  .panel[data-name="Home"] .inner{flex:0 1 auto;margin-top:auto;margin-bottom:auto;}
  .home{text-align:center;}
  .home .actions{justify-content:center;}
  .home .lead-m{white-space:nowrap;text-wrap:nowrap;font-size:min(16px,4.1vw);}
  .social{justify-content:center;gap:40px;margin-top:24px;}
  .ic svg{width:42px;height:42px;}
  .home-proof{text-align:left;}
  .lbl-d{display:none;}
  .lbl-m{display:inline;}
}

/* Die Sternzeile machte das Zitatband hoeher, es lief in die Leiste unten.
   Band straffer, Video bleibt gleich gross. */
.rating{margin-bottom:6px;}
.work-quotes{padding-top:12px;padding-bottom:10px;}
.work-quotes .qstage{min-height:clamp(66px,8vh,80px);}
.work-quotes .qdots{margin-top:8px;}
@media (max-width:820px){
  .work-quotes{margin-top:12px;padding:11px 14px 9px;}
  .work-quotes .qstage{min-height:74px;}
  .car-nav{margin-top:10px;}
  .slide-cap{margin-top:8px;}
}

/* Hintergrund am Handy wie am Laptop: dunkel, Linien nur als Ahnung oben rechts.
   Ursache: Lichtfleck und Linienabstand sind in festen Pixeln fuer den Laptop
   gebaut. Auf 390 Pixel Breite deckt der rote Lichtfleck den ganzen Schirm ab
   (daher das Grau) und die Linien stehen im Verhaeltnis viel dichter. */
@media (max-width:820px){
  body::before{
    background:repeating-linear-gradient(114deg,
        transparent 0 52px,
        rgba(232,50,90,.15) 52px 53px,
        transparent 53px 106px,
        rgba(232,50,90,.07) 106px 107px);
    -webkit-mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 0%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.08) 30%, transparent 42%);
    mask-image:linear-gradient(to bottom left, rgba(0,0,0,1) 0%, rgba(0,0,0,.45) 16%, rgba(0,0,0,.08) 30%, transparent 42%);
  }
  body::after{
    background:
      radial-gradient(90vw 34vh at 96% 0%, rgba(232,50,90,.17), transparent 72%),
      radial-gradient(80vw 30vh at 0% 100%, rgba(200,184,162,.04), transparent 70%);
  }
}

/* Handy Work: Zitatband stand 5 Pixel in der Leiste unten */
@media (max-width:820px){
  .panel[data-name="Work"]{padding-top:14px;}
  .work-quotes{margin-top:10px;}
  .work-quotes .qstage{min-height:70px;}
}

/* ============================================================
   V7.4, 11.09.2026: Aufrufe auf den Videos, vor dem Anklicken sichtbar
   ============================================================ */
.video .views{
  position:absolute;left:12px;top:12px;z-index:3;
  display:flex;align-items:center;gap:7px;
  padding:6px 10px 6px 9px;
  background:rgba(14,14,14,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  border-left:2px solid var(--rose);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;line-height:1;
  pointer-events:none;white-space:nowrap;
}
.video .views svg{width:10px;height:10px;fill:var(--rose);}
.video.small .views{left:6px;top:6px;padding:4px 6px 4px 5px;gap:5px;font-size:10.5px;}
.video.small .views svg{width:8px;height:8px;}
@media (max-width:820px){
  .video .views{left:8px;top:8px;font-size:12px;padding:5px 8px 5px 7px;}
}

/* ============================================================
   V7.5, 11.09.2026: Aufrufe deutlich praesenter. Rote Flaeche statt
   dunkler Marke, Zahl gross und fett, "views" kleiner daneben
   ============================================================ */
.video .views{
  left:16px;top:16px;gap:9px;
  padding:9px 14px 9px 12px;
  background:var(--rose);border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-size:18px;font-weight:700;letter-spacing:.01em;
}
.video .views svg{width:12px;height:12px;fill:#fff;}
.video .views b{font-weight:800;}
.video .views span{
  font-size:.68em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:.92;
}
.video.small .views{left:6px;top:6px;padding:4px 7px 4px 6px;gap:5px;font-size:12px;box-shadow:0 4px 12px rgba(0,0,0,.45);}
.video.small .views svg{width:8px;height:8px;}
@media (max-width:820px){
  .video .views{left:10px;top:10px;padding:7px 11px 7px 10px;gap:7px;font-size:16px;}
  .video .views svg{width:10px;height:10px;}
}

/* V7.6, 11.09.2026: Auf der Startseite etwas dezenter als auf Work.
   Work bleibt wie V7.5. */
.panel[data-name="Home"] .video .views{
  left:12px;top:12px;gap:7px;
  padding:6px 10px 6px 9px;
  background:rgba(232,50,90,.86);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  font-size:14px;
}
.panel[data-name="Home"] .video .views svg{width:9px;height:9px;}
.panel[data-name="Home"] .video.small .views{
  left:5px;top:5px;gap:4px;padding:3px 6px 3px 5px;font-size:10.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.panel[data-name="Home"] .video.small .views svg{width:7px;height:7px;}

/* ============================================================
   V7.7, 11.09.2026: Startseite Handy aufgewertet.
   (1) Hintergrundvideo oben scharf als Titelbild, nach unten in Schwarz,
       Text steht auf dem dunklen Teil. (2) Zahlen als laufendes Band.
   Laptop unveraendert.
   ============================================================ */
.ticker{display:none;}

@media (max-width:820px){
  /* (1) Titelbild */
  .panel[data-name="Home"] > .bg video{
    opacity:1;filter:none;object-fit:cover;object-position:50% 18%;
  }
  .panel[data-name="Home"] > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.30) 0%,
      rgba(20,20,20,.04) 20%,
      rgba(20,20,20,.10) 36%,
      rgba(20,20,20,.70) 54%,
      var(--black) 74%);
  }
  .panel[data-name="Home"] .inner{margin-top:auto;margin-bottom:0;}
  .home h1{text-shadow:0 2px 26px rgba(0,0,0,.65);}
  .home .eyebrow{text-shadow:0 1px 12px rgba(0,0,0,.7);}

  /* (2) Laufband statt Zahlenraster */
  .home-proof{display:none !important;}
  .ticker{
    display:block;overflow:hidden;
    margin:24px -18px 0;padding:13px 0;
    border-top:1px solid rgba(200,184,162,.14);
    border-bottom:1px solid rgba(200,184,162,.14);
    background:rgba(16,16,16,.55);
  }
  .ticker-track{display:flex;align-items:center;width:max-content;animation:sirexTick 28s linear infinite;}
  .ticker .tk{white-space:nowrap;font-size:13.5px;color:var(--greige);padding:0 16px;line-height:1;}
  .ticker .tk b{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--white);margin-right:5px;}
  .ticker i{flex:none;width:5px;height:5px;background:var(--rose);transform:rotate(45deg);}
}
@keyframes sirexTick{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){ .ticker-track{animation:none;} }

/* V7.8, 11.09.2026: Schrift auf der Startseite am Handy etwas hoeher.
   Das Laufband bleibt unten, der Abstand darueber waechst, dadurch
   rueckt der Textblock nach oben. Der dunkle Verlauf beginnt passend frueher. */
@media (max-width:820px){
  .ticker{margin-top:clamp(48px,13vh,110px);}
  .panel[data-name="Home"] > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.30) 0%,
      rgba(20,20,20,.04) 16%,
      rgba(20,20,20,.12) 28%,
      rgba(20,20,20,.72) 46%,
      var(--black) 66%);
  }
}

/* ============================================================
   V7.9, 11.09.2026: Kontaktformular fragt je nach Antwortweg
   Nummer oder Mailadresse ab
   ============================================================ */
.reply-extra{
  max-height:0;opacity:0;overflow:hidden;margin-top:0;text-align:left;
  transition:max-height .38s var(--ease), opacity .3s ease, margin-top .38s var(--ease);
}
.reply-extra.open{max-height:110px;opacity:1;margin-top:12px;}
.reply-extra label{display:block;}
.reply-extra input{width:100%;}

/* Handy: Kuenstlername und Instagram nebeneinander. Das spart eine Zeile,
   damit das neue Feld Platz hat und alles auf einen Bildschirm passt. */
@media (max-width:820px){
  .start-single .form-grid{grid-template-columns:1fr 1fr;}
  .start-single .form-grid > .full{grid-column:1 / -1;}
  .reply-extra.open{margin-top:8px;}
}

/* Laptop: mit dem neuen Feld lief die Kontaktseite rund 50 Pixel ueber
   den Bildschirm, die Hinweiszeile lag unter der Leiste. Abstaende enger. */
@media (min-width:821px){
  .start-single .lead{margin:10px auto 18px;}
  .start-single .form-grid{gap:12px;}
  .start-single label{margin-bottom:5px;}
  .start-single .after-send{margin-top:10px;}
}
@media (min-width:1200px){
  .start-single input{padding:12px 16px;}
}

/* V7.10, 11.09.2026: Schrift am Handy wieder etwas tiefer,
   zwischen V7.7 (Mitte) und V7.8 (oberes Drittel) */
@media (max-width:820px){
  .ticker{margin-top:clamp(36px,8vh,70px);}
  .panel[data-name="Home"] > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.30) 0%,
      rgba(20,20,20,.04) 18%,
      rgba(20,20,20,.11) 32%,
      rgba(20,20,20,.71) 50%,
      var(--black) 70%);
  }
}

/* ============================================================
   V7.11, 11.09.2026: Zahlenstreifen am Laptop im Look vom Handy.
   Stehend statt laufend, fuenf Eintraege in einer Zeile, Rauten als
   Trenner, jeder Eintrag leuchtet beim Darueberfahren rot auf.
   ============================================================ */
@media (min-width:821px){
  .home-proof{display:none !important;}
  .ticker{
    display:block;overflow:visible;
    margin-top:auto;margin-bottom:clamp(10px,3vh,34px);
    border-top:1px solid rgba(200,184,162,.14);
    border-bottom:1px solid rgba(200,184,162,.14);
    background:rgba(16,16,16,.55);
  }
  .ticker-track{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    animation:none;transform:none;
  }
  /* nur die erste Gruppe, ohne Raute am Ende */
  .ticker-track > :nth-child(n+10){display:none;}
  .ticker .tk{
    white-space:nowrap;line-height:1;cursor:default;
    font-size:14.5px;color:var(--greige-dim);
    padding:18px clamp(12px,1.6vw,26px);
    transition:background .28s ease, color .28s ease;
  }
  .ticker .tk b{
    font-family:var(--serif);font-weight:700;font-size:clamp(19px,1.6vw,24px);
    color:var(--white);margin-right:7px;transition:color .28s ease;
  }
  .ticker .tk:hover{background:rgba(232,50,90,.11);color:var(--greige);}
  .ticker .tk:hover b{color:var(--rose);}
  .ticker i{flex:none;width:5px;height:5px;background:var(--rose);transform:rotate(45deg);}
}

/* V7.12, 11.09.2026: Schrift am Handy wieder ein Stueck hoeher,
   zwischen V7.8 und V7.10 */
@media (max-width:820px){
  .ticker{margin-top:clamp(40px,10.7vh,90px);}
  .panel[data-name="Home"] > .bg .veil{
    background:linear-gradient(180deg,
      rgba(20,20,20,.30) 0%,
      rgba(20,20,20,.04) 17%,
      rgba(20,20,20,.115) 30%,
      rgba(20,20,20,.715) 48%,
      var(--black) 68%);
  }
}

/* ============================================================
   V7.14, 11.09.2026: Bewertungen unter den Videos im Look des
   Zahlenstreifens der Startseite. Durchgehendes Band mit feinen
   Linien, dunklem Grund und roten Rauten, laeuft langsam durch.
   ============================================================ */
.work-quotes{
  margin-top:22px;padding:0;border:0;background:none;
}
.qticker{
  overflow:hidden;
  border-top:1px solid rgba(200,184,162,.14);
  border-bottom:1px solid rgba(200,184,162,.14);
  background:rgba(16,16,16,.55);
  padding:15px 0;
}
.qticker-track{display:flex;width:max-content;animation:sirexTick 70s linear infinite;}
.qgroup{display:flex;align-items:center;flex:none;}
.qt{display:flex;align-items:center;gap:10px;white-space:nowrap;padding:0 24px;line-height:1;}
.qt b{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--white);}
.qt .stars{display:flex;gap:2px;color:var(--rose);}
.qt .stars svg{width:13px;height:13px;fill:currentColor;}
.qt q{font-family:var(--serif);font-weight:600;font-size:17.5px;color:var(--white);margin-left:4px;quotes:"\201C" "\201D";}
.qticker i{flex:none;width:5px;height:5px;background:var(--rose);transform:rotate(45deg);}
@media (max-width:820px){
  .work-quotes{margin:16px -18px 0;}
  .qticker{padding:13px 0;}
  .qticker-track{animation-duration:56s;}
  .qt{padding:0 18px;gap:8px;}
  .qt b{font-size:17px;}
  .qt .stars svg{width:11px;height:11px;}
  .qt q{font-size:15.5px;}
}
@media (prefers-reduced-motion: reduce){
  .qticker{overflow-x:auto;}
  .qticker-track{animation:none;}
}

/* Das Bewertungsband ist rund 85 Pixel flacher als das alte Zitatband.
   Den Platz bekommt das Video zurueck, statt unten eine Luecke zu lassen. */
@media (min-width:901px){
  .panel[data-name="Work"] .carousel{
    max-width:max(720px, calc((100vh - 455px) * 2.963 + 33px));
  }
}
@media (min-width:901px) and (max-height:860px){
  .panel[data-name="Work"] .carousel{
    max-width:max(720px, calc((100vh - 400px) * 2.963 + 33px));
  }
}
/* Kleine Laptop-Fenster: Band lief 20 Pixel in die Leiste unten */
@media (min-width:901px) and (max-height:860px){
  .panel[data-name="Work"] .carousel{
    max-width:max(720px, calc((100vh - 430px) * 2.963 + 33px));
  }
}