/* Fotoflicker — Basis: Tokens, Schriften, Grundtypografie, Album-Bausteine. Gilt für Startseite und Bestellseiten. */
@font-face{font-family:"Young Serif";src:url("../fonts/young-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Lora";src:url("../fonts/lora-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Lora";src:url("../fonts/lora-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Lora";src:url("../fonts/lora-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Homemade Apple";src:url("../fonts/homemade-apple-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}

:root{
  --karton:#F1EAE0; --karton-tief:#E6DDCF; --sepia:#2A211B; --sepia-weich:#4A3F36; --garn:#B3262E; --garn-dunkel:#8E1C23;
  --silber:#8C8378; --silber-hell:#B8B0A4; --abzug:#FBF9F5; --wa:#25D366; --wa-dunkel:#128C7E;
  --display:"Young Serif",Georgia,serif; --body:"Lora",Georgia,serif; --hand:"Homemade Apple",cursive;
  --schatten-abzug:0 1px 2px rgba(42,33,27,.10),0 10px 30px -12px rgba(42,33,27,.35);
  --radius:6px; --max:1180px; --gutter:clamp(16px,4vw,48px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--karton);color:var(--sepia);font-family:var(--body);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--sepia)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:-.005em}
h1{font-size:clamp(2.3rem,5.4vw,4.4rem)}
h2{font-size:clamp(1.85rem,3.6vw,2.9rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1em}
.hand{font-family:var(--hand);font-size:1.15em;color:var(--sepia-weich);line-height:1.5}
.label{font:700 .78rem/1 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--silber)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.garn{color:var(--garn)}
:focus-visible{outline:3px solid var(--garn);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;gap:.65em;font:700 1.05rem/1 var(--body);padding:1.05em 1.5em;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s}
.knopf:hover{transform:translateY(-1px)}
.knopf:active{transform:translateY(0)}
.knopf-wa{background:var(--wa);color:#0b2d1c;box-shadow:0 8px 24px -8px rgba(37,211,102,.7)}
.knopf-wa:hover{background:#2ee07a}
.knopf-wa svg{width:1.35em;height:1.35em;flex:none}
.knopf-sepia{background:var(--sepia);color:var(--abzug)}
.knopf-sepia:hover{background:#3a2e26}
.knopf-linie{background:transparent;color:var(--sepia);box-shadow:inset 0 0 0 2px var(--sepia)}

/* Abzug = Fotokarte mit weißem Rand und Fotoecken */
.abzug{background:var(--abzug);padding:12px 12px 16px;box-shadow:var(--schatten-abzug);position:relative;border-radius:2px}
.abzug img{width:100%;height:auto;border-radius:1px}
.abzug.ecken::before,.abzug.ecken::after,.abzug.ecken .e3,.abzug.ecken .e4{content:"";position:absolute;width:26px;height:26px;background:var(--sepia);opacity:.85;clip-path:polygon(0 0,100% 0,0 100%)}
.abzug.ecken::before{left:-4px;top:-4px}
.abzug.ecken::after{right:-4px;top:-4px;transform:rotate(90deg)}
.abzug.ecken .e3{left:-4px;bottom:-4px;transform:rotate(-90deg)}
.abzug.ecken .e4{right:-4px;bottom:-4px;transform:rotate(180deg)}
.abzug .beschriftung{margin:10px 4px 0;font-family:var(--hand);font-size:1rem;color:var(--sepia-weich);line-height:1.4}

/* Naht (roter Faden) */
.naht{height:14px;width:100%;background:
  repeating-linear-gradient(-45deg,transparent 0 6px,var(--garn) 6px 8px,transparent 8px 14px),
  repeating-linear-gradient(45deg,transparent 0 6px,var(--garn) 6px 8px,transparent 8px 14px);
  opacity:.9}
.naht-linie{border:0;height:0;border-top:2px dashed var(--garn);opacity:.7;margin:0}

/* Vergleichs-Schieber */
.vergleich{position:relative;overflow:hidden;user-select:none;touch-action:pan-y;border-radius:2px;background:#000}
.vergleich img{width:100%;display:block;pointer-events:none}
.vergleich .nachher{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.vergleich .griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:0;pointer-events:none}
.vergleich .griff::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:var(--abzug);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.vergleich .griff i{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--abzug);box-shadow:0 4px 16px rgba(0,0,0,.35);display:grid;place-items:center;font-style:normal;color:var(--garn);font-size:22px;letter-spacing:-2px}
.vergleich .stich{position:absolute;top:0;bottom:0;left:-7px;width:14px;background:repeating-linear-gradient(180deg,transparent 0 10px,var(--garn) 10px 12px,transparent 12px 22px);opacity:.9}
.vergleich input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.vergleich .tag{position:absolute;bottom:10px;padding:.25em .6em;font:700 .72rem/1 var(--body);letter-spacing:.08em;text-transform:uppercase;background:rgba(42,33,27,.75);color:var(--abzug);border-radius:3px}
.vergleich .tag.l{left:10px}.vergleich .tag.r{right:10px}

/* Sterne */
.sterne{display:inline-flex;gap:2px;color:#D9A83A;font-size:1.05rem;letter-spacing:1px}

/* Fußzeile */
.fuss{border-top:1px solid var(--karton-tief);margin-top:clamp(48px,8vw,96px);padding:32px 0 40px;font-size:.92rem;color:var(--silber)}
.fuss nav{display:flex;flex-wrap:wrap;gap:12px 22px;margin-bottom:12px}
.fuss a{color:var(--sepia-weich);text-decoration:none}
.fuss a:hover{text-decoration:underline}