/* Startseite fotoflicker.de — das aufgeschlagene Album */
.kopfleiste{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px var(--gutter);color:var(--abzug)}
.kopfleiste .marke{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.kopfleiste .marke img{width:46px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.kopfleiste .marke b{font:400 1.5rem/1 var(--display)}
.kopfleiste .nummer{font-size:.95rem;color:var(--abzug);text-decoration:none;opacity:.9;display:inline-flex;align-items:center;gap:.5em}
.kopfleiste .nummer svg{width:18px;height:18px}
@media (max-width:640px){.kopfleiste .nummer span{display:none}}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;background:var(--sepia);color:var(--abzug);overflow:hidden;isolation:isolate}
.hero .video{position:absolute;inset:0;z-index:0}
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 40%}
.hero .still{display:none}
.hero .schleier{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(42,33,27,.35) 0%,rgba(42,33,27,0) 30%,rgba(42,33,27,0) 45%,rgba(42,33,27,.82) 100%),linear-gradient(90deg,rgba(42,33,27,.35) 0%,rgba(42,33,27,0) 55%)}
.hero .inhalt{position:relative;z-index:2;padding:0 var(--gutter) clamp(28px,5vh,64px);max-width:var(--max);width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:24px;align-items:end}
@media (max-width:860px){.hero .inhalt{grid-template-columns:1fr}}
.hero .label{color:var(--karton);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.hero h1{margin:.3em 0 .35em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:34ch;color:var(--karton);margin-bottom:1.3em;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hero .vertrauen{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--karton-tief);margin-top:16px}
.hero .vertrauen span::before{content:"✓ ";color:var(--wa)}
.hero .beschrift{justify-self:end;font-family:var(--hand);font-size:1.05rem;color:var(--karton);opacity:.9;max-width:260px;text-align:right;transform:rotate(-2deg)}
@media (max-width:860px){.hero .beschrift{display:none}}
.hero .fortschritt{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15);z-index:3}
.hero .fortschritt i{display:block;height:100%;width:0;background:var(--garn)}
.hero .wieder{position:absolute;right:var(--gutter);top:calc(50% - 22px);z-index:3;background:rgba(42,33,27,.6);color:var(--abzug);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.55em .9em;font:700 .8rem var(--body);cursor:pointer;opacity:0;transition:opacity .4s}
.hero .wieder.zeigen{opacity:1}
@media (prefers-reduced-motion:reduce){.hero video{display:none}.hero .still{display:block}}

/* Abschnitte */
.abschnitt{padding:clamp(56px,9vw,128px) 0 0}
.abschnitt .kopfzeile{max-width:720px;margin-bottom:clamp(24px,4vw,48px)}
.abschnitt .kopfzeile p{color:var(--sepia-weich);font-size:1.15rem}

/* So läuft es: Chat + Schritte */
.ablauf{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.ablauf{grid-template-columns:1fr}}
.handy{background:var(--sepia);border-radius:34px;padding:14px;box-shadow:0 30px 60px -30px rgba(42,33,27,.6);max-width:420px;margin:0 auto}
.chat{background:#efe7dc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ccircle cx='30' cy='30' r='1.2' fill='%23d9cfbf'/%3E%3Ccircle cx='90' cy='80' r='1.2' fill='%23d9cfbf'/%3E%3C/svg%3E");border-radius:24px;padding:14px 12px 16px;display:grid;gap:9px;font-size:.93rem;line-height:1.45}
.chat .kopf{display:flex;align-items:center;gap:10px;padding:4px 4px 10px;border-bottom:1px solid rgba(42,33,27,.08);margin-bottom:4px}
.chat .kopf img{width:36px;height:36px;border-radius:50%;background:var(--abzug);padding:3px}
.chat .kopf b{display:block;font-size:.95rem}
.chat .kopf small{color:var(--silber);font-size:.78rem}
.blase{max-width:86%;padding:9px 12px;border-radius:14px;box-shadow:0 1px 1px rgba(0,0,0,.08);position:relative;white-space:pre-line}
.blase.kunde{background:#dcf8c6;justify-self:end;border-bottom-right-radius:4px}
.blase.bot{background:#fff;justify-self:start;border-bottom-left-radius:4px}
.blase img{border-radius:8px;margin:2px 0 6px;width:100%}
.blase .zeit{display:block;text-align:right;font-size:.7rem;color:var(--silber);margin-top:4px}
.blase .cta{display:block;text-align:center;color:#1a8fd6;font-weight:700;border-top:1px solid #eee;margin:8px -12px -9px;padding:9px}
.schritte-liste{list-style:none;padding:0;margin:0;display:grid;gap:22px;counter-reset:s}
.schritte-liste li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start}
.schritte-liste li::before{counter-increment:s;content:counter(s);font:400 2.4rem/1 var(--display);color:var(--garn)}
.schritte-liste b{font:400 1.35rem/1.15 var(--display);display:block;margin-bottom:4px}
.schritte-liste p{margin:0;color:var(--sepia-weich)}

/* Vorher/Nachher-Album */
.album{overflow-x:clip;padding:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3.5vw,44px) clamp(20px,3vw,40px);position:relative}
@media (max-width:760px){.album{grid-template-columns:1fr}}
.album .abzug{transform:rotate(var(--dreh,0deg))}
.album .abzug:nth-child(2){--dreh:1.2deg}.album .abzug:nth-child(1){--dreh:-.8deg}.album .abzug:nth-child(3){--dreh:.6deg}.album .abzug:nth-child(4){--dreh:-1.1deg}
.faden{width:100%;height:auto;display:block;margin:0 0 clamp(16px,3vw,32px);overflow:visible}
.faden path{fill:none;stroke:var(--garn);stroke-width:2.2;stroke-linecap:round}

/* Produkte */
.produkte-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,36px)}
@media (max-width:900px){.produkte-raster{grid-template-columns:1fr;max-width:520px}}
.produkt .titel{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:14px 4px 4px}
.produkt .titel b{font:400 1.45rem/1.1 var(--display)}
.produkt .preis{font:400 1.45rem/1 var(--display);white-space:nowrap}
.produkt .preis small{display:block;font:400 .78rem var(--body);color:var(--silber);text-align:right;margin-top:3px}
.produkt p{margin:4px 4px 0;font-size:.98rem;color:var(--sepia-weich)}
.produkt .hand{margin:10px 4px 0;font-size:1rem}

/* Warum */
.warum{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:860px){.warum{grid-template-columns:1fr}}
.warum .prosa{font-size:1.2rem;max-width:56ch}
.warum .prosa p:first-child::first-letter{font-family:var(--display);font-size:3.2em;float:left;line-height:.85;margin:.06em .12em 0 0;color:var(--garn)}
.notizen{display:grid;gap:14px;overflow-x:clip;padding:4px}
.notiz{background:var(--abzug);padding:16px 18px;border-radius:2px;box-shadow:var(--schatten-abzug);position:relative;transform:rotate(var(--dreh,0deg))}
.notiz:nth-child(1){--dreh:-.7deg}.notiz:nth-child(2){--dreh:.5deg}.notiz:nth-child(3){--dreh:-.4deg}.notiz:nth-child(4){--dreh:.8deg}
.notiz::before{content:"";position:absolute;top:-8px;left:50%;width:70px;height:18px;transform:translateX(-50%) rotate(-2deg);background:rgba(232,220,190,.85);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.notiz b{font:400 1.2rem/1.2 var(--display);display:block;margin-bottom:2px}
.notiz span{font-size:.95rem;color:var(--sepia-weich)}

/* Stimmen */
.stimmen-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.stimmen-raster{grid-template-columns:1fr}}
.stimme{background:var(--abzug);padding:20px 20px 16px;border-radius:2px;box-shadow:var(--schatten-abzug)}
.stimme p{font-size:1.02rem;margin:10px 0 12px}
.stimme .wer{font-family:var(--hand);color:var(--sepia-weich);font-size:1rem}
.fussnote{font-size:.85rem;color:var(--silber);margin-top:14px}

/* FAQ */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--karton-tief);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--karton-tief)}
.faq summary{cursor:pointer;font:400 1.2rem/1.3 var(--display);list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--garn);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--sepia-weich)}

/* Schluss */
.schluss{margin-top:clamp(56px,9vw,128px);background:var(--sepia);color:var(--abzug);padding:clamp(56px,8vw,112px) 0;position:relative;overflow:hidden}
.schluss .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:860px){.schluss .wrap{grid-template-columns:1fr}}
.schluss .label{color:var(--silber-hell)}
.schluss p{color:var(--karton-tief);max-width:44ch}
.schluss .abzug{max-width:360px;transform:rotate(2deg);justify-self:center}
.schluss .abzug .beschriftung{color:var(--sepia-weich)}
.schluss .nummer{font:400 1.3rem var(--display);color:var(--abzug);text-decoration:none;display:inline-block;margin-top:14px}
.fuss{color:var(--silber-hell);border-top-color:rgba(255,255,255,.1);margin-top:0}
.schluss + .fuss{background:var(--sepia)}
.schluss + .fuss a{color:var(--karton-tief)}

/* Reveals: JS setzt .js, IntersectionObserver schaltet .da; ohne JS alles sichtbar */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}