/* Startseite (seit 05.10.2026): Stile nur für index.html — gebaut per tools/vorschau_bauen.py */
.start{background:var(--papier);padding:clamp(120px,14vw,170px) 0 clamp(48px,6vw,84px)}
.start-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,96px);align-items:center}
.start-k{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--kobalt);margin:0 0 22px}
.start-h{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.4vw,96px);line-height:.98;letter-spacing:-.05em;margin:0;max-width:11ch;text-wrap:balance}
.start-h em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;color:var(--kobalt);font-size:1.08em}
.start-s{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--graphit);max-width:34em;margin:26px 0 0}
.start-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.start-fakten{list-style:none;margin:40px 0 0;padding:26px 0 0;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:18px 44px}
.start-fakten li{display:flex;flex-direction:column;gap:2px}
.start-fakten b{font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.start-fakten span{font-size:13px;color:var(--graphit)}
.start-bild{margin:0;position:relative}
.start-bild img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:var(--schatten)}
.start-bild figcaption{margin-top:14px;font-size:13.5px;color:var(--graphit);display:flex;flex-direction:column;gap:2px}
.start-bild figcaption b{color:var(--tinte);font-family:var(--display);letter-spacing:-.01em}
@media (max-width:900px){.start-in{grid-template-columns:1fr}.start-bild{max-width:420px}}

.gruende{padding:clamp(56px,8vw,112px) 0;background:var(--papier)}
.gruende .h-lg{max-width:18ch}
.gr-l{list-style:none;margin:clamp(32px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.gr-l li{border-top:2px solid var(--tinte);padding-top:20px}
.gr-l h3{font-family:var(--display);font-size:clamp(21px,2vw,26px);letter-spacing:-.03em;line-height:1.15;margin:0 0 12px}
.gr-l p{margin:0;color:var(--graphit);font-size:16px;line-height:1.55}
.gr-nutzen{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:baseline;margin:clamp(32px,4vw,52px) 0 0;padding:20px 0 0;border-top:1px solid var(--linie);font-size:16px}
.gr-nutzen span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphit)}
.gr-nutzen b{font-family:var(--display);letter-spacing:-.02em}
@media (max-width:900px){.gr-l{grid-template-columns:1fr}}

.videoteil{padding:clamp(56px,8vw,112px) 0;background:var(--buetten);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.videoteil-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center}
.vt-text .h-lg{max-width:14ch}
.vt-text .lead{margin-top:20px;max-width:30em}
@media (max-width:980px){.videoteil-in{grid-template-columns:1fr}}

/* kürzere Abschnitte */
.refs .sec-head .lead{margin-top:10px}
.buehne .auftakt{max-width:34em}
.leist-l{grid-template-columns:repeat(2,1fr)}
.schritte{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.leist-l,.schritte{grid-template-columns:1fr}}

/* Versuch 2: Film im Einstieg bleibt; Fakten unter den Knöpfen; Gründe mit Hintergrund-Film und Foto */
.oeff-kern .start-fakten{margin-top:30px;padding-top:20px}
.gruende{position:relative;overflow:hidden}
.gruende .wrap{position:relative;z-index:1}
.gr-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,6vw,90px);align-items:center}
.gr-in .gr-l{grid-template-columns:1fr;gap:26px}
.gr-bild{margin:0}
.gr-bild img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:var(--schatten)}
.gr-bild figcaption{margin-top:12px;font-size:13.5px;color:var(--graphit);display:flex;flex-direction:column;gap:2px}
.gr-bild figcaption b{color:var(--tinte);font-family:var(--display)}
@media (max-width:900px){.gr-in{grid-template-columns:1fr}.gr-bild{max-width:380px}}
.oeff-kern .start-fakten{border-top-color:rgba(16,17,20,.16)}
.oeff-kern .start-fakten b{color:var(--tinte)}
.oeff-kern .start-fakten span{color:var(--graphit)}

/* Google-Bewertungen als Karte im Einstieg */
.g-karte{display:inline-flex;align-items:center;gap:16px;margin-top:26px;padding:14px 20px 14px 16px;border-radius:14px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(16,17,20,.1);box-shadow:0 18px 44px rgba(16,17,20,.12);color:var(--tinte);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.g-karte:hover{transform:translateY(-2px);box-shadow:0 24px 56px rgba(16,17,20,.18)}
.g-wert{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.g-wert b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.g-sterne{display:flex;gap:2px;font-size:15px;line-height:1}
.g-sterne i{font-style:normal;color:rgba(16,17,20,.18);transition:color .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.oeff.licht .g-sterne i,.g-karte.da .g-sterne i{color:#f5b301;transform:scale(1.12)}
.g-sterne i:nth-child(2){transition-delay:.12s}.g-sterne i:nth-child(3){transition-delay:.24s}.g-sterne i:nth-child(4){transition-delay:.36s}.g-sterne i:nth-child(5){transition-delay:.48s}
.oeff.licht .g-sterne i{transition-delay:calc(.6s + var(--d,0s))}
.g-text{display:flex;flex-direction:column;gap:2px;font-size:15px;line-height:1.3}
.g-text em{font-style:normal;font-weight:700}
.g-text small{font-size:12.5px;color:var(--graphit)}
.g-pfeil{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;opacity:.55;flex:none}
@media (prefers-reduced-motion:reduce){.g-sterne i{color:#f5b301;transition:none}}
.oeff-kern .start-fakten{align-items:center}
.g-li{margin-left:auto}
.g-li .g-karte{margin-top:0}
@media (max-width:900px){.g-li{margin-left:0;flex-basis:100%}}

/* Domain-Sicherheitscheck · Vergleich mit Tachos */
.schnitt{position:relative;overflow:hidden}
.schnitt .wrap{position:relative;z-index:1}
.schnitt-film{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.schnitt-film video{width:100%;height:100%;object-fit:cover;display:block}
.sn-pruef{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.sn-pruef li{position:relative;padding-left:34px;font-size:16px;line-height:1.45}
.sn-pruef li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--kobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.schnitt-w{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.sn-tacho{margin:0;padding:24px 22px 22px;border-radius:10px;background:rgba(255,255,255,.78);border:1px solid var(--linie);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.sn-tacho.sn-wir{background:var(--nacht);color:var(--papier);border-color:transparent;box-shadow:0 30px 70px rgba(16,24,80,.28)}
.sn-tacho svg{width:100%;max-width:230px;overflow:visible}
.tb-bahn,.tb-wert{fill:none;stroke-width:14;stroke-linecap:round}
.tb-bahn{stroke:rgba(16,17,20,.1)}
.sn-wir .tb-bahn{stroke:rgba(246,245,241,.14)}
.tb-wert{stroke:#e9a23b;stroke-dasharray:100 100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1)}
.sn-wir .tb-wert{stroke:var(--kobalt-hell);filter:drop-shadow(0 0 10px rgba(107,132,255,.55))}
.sn-tacho.an .tb-wert{stroke-dashoffset:calc(100 - var(--w))}
.tb-striche path{stroke:currentColor;opacity:.25;stroke-width:2}
.sn-zahl{margin-top:-52px;display:flex;flex-direction:column;align-items:center}
.sn-zahl b{font-family:var(--display);font-weight:800;font-size:clamp(46px,4.6vw,62px);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sn-wir .sn-zahl b{color:var(--kobalt-hell)}
.sn-zahl small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:6px}
.sn-tacho figcaption{margin-top:18px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45}
.sn-tacho figcaption strong{font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.sn-tacho figcaption span{opacity:.72}
.schnitt-w .sn-fuss{grid-column:1/-1}
@media (max-width:640px){.schnitt-w{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tb-wert{transition:none;stroke-dashoffset:calc(100 - var(--w))}}
/* Schloss-Film (Higgsfield) hinter den Tachos, links weich ausgeblendet */
.schnitt-film{left:38%;opacity:.7;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
@media (max-width:900px){.schnitt-film{left:0;opacity:.35;-webkit-mask-image:none;mask-image:none}}

/* Google-Bewertungen: ruhige Zeile auf Papier, mittig */
.bewertung{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding:clamp(44px,6vw,72px) 0}
.bw-in{display:flex;align-items:center;justify-content:center;gap:clamp(22px,3.5vw,44px)}
.bw-note{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(76px,9vw,124px);line-height:.85;letter-spacing:-.02em;color:var(--kobalt);font-variant-numeric:tabular-nums;opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s var(--ease)}
.bw-trenn{width:1px;align-self:stretch;background:var(--linie2);transform:scaleY(0);transition:transform .8s var(--ease) .3s}
.bw-t{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateX(-10px);transition:opacity .8s ease .45s,transform .8s var(--ease) .45s}
.bw-sterne{position:relative;display:block;width:118px;height:20px;background:no-repeat 0 0/23.6px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M10 1.5l2.5 5.3 5.8.7-4.3 4 1.1 5.7L10 14.4l-5.1 2.8L6 11.5 1.7 7.5l5.8-.7z' fill='none' stroke='%23c9c6bd' stroke-width='1.2'/%3E%3C/svg%3E");background-repeat:repeat-x}
.bw-sterne i{position:absolute;inset:0;width:0;background:repeat-x 0 0/23.6px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M10 1.5l2.5 5.3 5.8.7-4.3 4 1.1 5.7L10 14.4l-5.1 2.8L6 11.5 1.7 7.5l5.8-.7z' fill='%23e8a910'/%3E%3C/svg%3E");transition:width 1.1s cubic-bezier(.65,0,.35,1) .8s}
.bw-t p{margin:0;font-size:16px;color:var(--graphit)}
.bw-t p em{font-style:normal;font-weight:700;color:var(--tinte)}
.bw-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-weight:700;font-size:14px;color:var(--tinte);text-decoration:none;border-bottom:1px solid var(--linie2);align-self:flex-start;padding-bottom:2px}
.bw-link:hover{border-color:var(--kobalt);color:var(--kobalt)}
.bw-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.bewertung.an .bw-note{opacity:1;transform:none}
.bewertung.an .bw-trenn{transform:none}
.bewertung.an .bw-t{opacity:1;transform:none}
.bewertung.an .bw-sterne i{width:100%}
@media (max-width:560px){.bw-trenn{display:none}.bw-in{gap:18px}}
@media (prefers-reduced-motion:reduce){.bw-note,.bw-trenn,.bw-t,.bw-sterne i{transition:none}}

/* Gründe neu: durchgestrichen → Antwort (Motiv aus dem Einstieg), Foto im Stil der Seite mit Tiefe beim Scrollen */
.gr-in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:start}
.gruende .h-lg{max-width:16ch}
.gruende .h-lg em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--kobalt);letter-spacing:-.01em}
.gr-zeilen{list-style:none;margin:clamp(36px,5vw,64px) 0 0;padding:0;display:grid;gap:clamp(30px,4vw,48px)}
.gr-zeile s{position:relative;display:inline;text-decoration:none;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,36px);letter-spacing:-.035em;line-height:1.12;color:var(--tinte);
  background:linear-gradient(var(--kobalt),var(--kobalt)) no-repeat 0 58%/0 3px;transition:background-size .7s cubic-bezier(.65,0,.35,1) .35s,color .5s ease .9s}
.gr-zeile.in s{background-size:100% 3px;color:rgba(16,17,20,.32)}
.gr-zeile p{margin:14px 0 0;max-width:38em;font-size:17px;line-height:1.55;color:var(--graphit);opacity:0;transform:translateY(14px);transition:opacity .7s ease 1.1s,transform .7s var(--ease) 1.1s}
.gr-zeile.in p{opacity:1;transform:none}
.gr-zeile p em{font-family:var(--serif);font-style:italic;font-size:1.32em;color:var(--kobalt);letter-spacing:-.005em}
.gr-foto{margin:0;position:sticky;top:120px}
.gr-rahmen{overflow:hidden;border-radius:2px;aspect-ratio:4/5;box-shadow:var(--schatten)}
.gr-rahmen img{width:100%;height:112%;object-fit:cover;display:block;transform:translateY(var(--par,0px));will-change:transform}
.gr-foto figcaption{margin-top:14px;font-size:14px;color:var(--graphit);display:flex;flex-direction:column;gap:4px}
.gr-foto figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kobalt)}
@media (max-width:900px){.gr-in{grid-template-columns:1fr}.gr-foto{position:relative;top:0;max-width:420px}}
@media (prefers-reduced-motion:reduce){.gr-zeile s,.gr-zeile p{transition:none}.gr-rahmen img{transform:none}}

/* Stilmittel der Marke: Schlusswort jeder Überschrift in Instrument Serif kursiv, Kobaltblau */
.h-lg em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--kobalt);letter-spacing:-.01em;font-size:1.06em}
.bewertung .h-lg em,.schluss .h-lg em,.sn-wir em{color:var(--kobalt-hell)}

/* Domain-Sicherheitscheck: weiches Erscheinen (Unschärfe → scharf, Zeilen wischen ein) und Vorführung mit unserer Domain */
.check-erg.ck-bereit{filter:blur(10px);transform:scale(.97);opacity:.5;transition:filter 1s ease,transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s ease}
.check-erg.ck-bereit.ck-an{filter:none;transform:none;opacity:1}
.check-erg.ck-bereit .check-l li span{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.65,0,.35,1),color .5s ease;transition-delay:calc(.35s + var(--i) * .2s)}
.check-erg.ck-bereit.ck-an .check-l li span{clip-path:inset(0 0 0 0)}
.check-erg.ck-demo .check-l li.gut i{box-shadow:0 0 0 5px rgba(63,191,127,.16),0 0 14px rgba(63,191,127,.7);transition:background .3s,box-shadow .4s}
.check-erg.ck-demo .check-l li.gut span{color:#fff}
.check-erg.ck-demo #checkDom{color:#9fb0ff}
.check-erg .check-kopf,.check-erg .check-l{transition:opacity .5s ease}
.check-erg.ck-aus .check-kopf,.check-erg.ck-aus .check-l{opacity:.15}
@media (prefers-reduced-motion:reduce){.check-erg.ck-bereit{filter:none;transform:none;opacity:1}.check-erg.ck-bereit .check-l li span{clip-path:none}}

/* Hinweis aufs Partnerprogramm nach den Referenzen: dezent, eine Zeile Bild + Text */
.pth{position:relative;z-index:1;background:var(--papier);padding:clamp(28px,4vw,48px) 0}
.pth-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(22px,4vw,56px);align-items:center;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);padding-top:clamp(24px,3vw,36px);padding-bottom:clamp(24px,3vw,36px)}
.pth-zahl{display:grid;gap:10px;justify-items:start;padding-left:clamp(0px,2vw,24px);border-left:2px solid var(--kobalt)}
.pth-zahl span{font-family:var(--serif);font-style:italic;font-size:clamp(84px,11vw,150px);line-height:.85;color:var(--kobalt);letter-spacing:-.02em}
.pth-zahl small{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--graphit)}
.pth-satz{margin:10px 0 0;font:700 clamp(22px,2.6vw,32px)/1.15 var(--display);letter-spacing:-.03em;max-width:24ch}
.pth-satz em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--kobalt)}
.pth-fein{margin:12px 0 0;color:var(--graphit);max-width:52ch;line-height:1.6}
.pth-l{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:20px}
.pth-login{color:var(--tinte);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--linie2)}
.pth-login:hover{text-decoration-color:var(--kobalt)}
@media (max-width:760px){.pth-in{grid-template-columns:1fr}}
.pth-netz{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--kobalt);max-width:56ch}
/* Leistungen: weitere Leistungen dezent als Aufzählung (Nico, 08.10.2026) */
.leist-mehr{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:12px clamp(20px,4vw,60px);align-items:start}
.leist-mehr-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--graphit);padding-top:3px}
.leist-mehr ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 28px}
.leist-mehr li{display:flex;flex-direction:column;gap:3px;padding-left:16px;position:relative}
.leist-mehr li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--kobalt)}
.leist-mehr b{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--tinte)}
.leist-mehr li span{font-size:14px;line-height:1.5;color:var(--graphit)}
@media(max-width:900px){.leist-mehr{grid-template-columns:1fr}.leist-mehr ul{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.leist-mehr ul{grid-template-columns:1fr}}