/* Clipstory 11/2026: Logo, neue Abschnitte, Bestellformular, Teilen-Seite, Rechtliches.
   Baut auf styles.css (Felix' Kino-Regiefassung) auf und nutzt dessen Farben und Schriften. */
:root{--cs-hell:#efe2d2;--cs-hell-2:#f6ece1;--cs-tinte:#2d1e1f;--cs-wein:#6c202e;--cs-nacht:#1b1114}

/* Kopfzeile mit Logo; auf hellen Abschnitten das dunkle Logo */
.brand-logo{display:block;line-height:0}
.brand-logo img{height:clamp(30px,3.1vw,40px);width:auto}
.brand-logo .logo-dunkel,.header.on-light .brand-logo .logo-hell{display:none}
.header.on-light .brand-logo .logo-dunkel{display:block}
.cs-header-fest{position:sticky;background:#1b1114f2!important}

.after-film .cs-beispiel{font:12px/1.6 var(--body);letter-spacing:.02em;color:#c9a9a6;margin:34px 0 0;font-style:normal}

/* Gemeinsame Bausteine */
.cs-wrap{max-width:1180px;margin:0 auto}
.cs-eyebrow{font:600 11px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#d39aa3;margin:0 0 18px}
.cs-lead{font:normal clamp(17px,1.5vw,21px)/1.65 var(--body);margin:0;max-width:640px}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-fehler{background:#f6dcdc;color:#7a1c26;border-left:4px solid #a84353;padding:12px 14px;font:500 14px/1.5 var(--body);margin:16px 0}
.cs-formnote{font:12px/1.7 var(--body);color:#6f5a56;margin:18px 0 0}
.cs-formnote a{text-decoration:underline}
.cs-link{display:inline-flex;gap:14px;align-items:center;font:600 14px/1 var(--body);color:var(--cs-wein);border-bottom:1px solid currentColor;padding-bottom:7px}
.cs-link:hover{color:#a84353}

/* Keine Diashow. Ein Film ohne Schnitt. – hell, damit der rote Fototest danach für sich steht */
.cs-oneshot{background:linear-gradient(180deg,#f6ece1 0%,#efe2d2 100%);color:var(--cs-tinte);padding:clamp(80px,10vw,150px) clamp(24px,6.5vw,110px)}
.cs-oneshot .cs-eyebrow{color:#a84353}
.cs-oneshot h2{font:normal clamp(40px,6vw,86px)/1.06 var(--serif);letter-spacing:-.05em;margin:0 0 clamp(36px,5vw,64px);text-wrap:balance}
.cs-oneshot-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.cs-oneshot .cs-lead{color:#4e3b39}
.cs-fakten{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.cs-fakten li{display:flex;align-items:baseline;gap:18px;border-top:1px solid rgba(108,32,46,.22);padding-top:16px}
.cs-fakten b{font:normal clamp(34px,3.6vw,50px)/1 var(--serif);color:var(--cs-wein);min-width:3.2ch;letter-spacing:-.04em}
.cs-fakten span{font:14px/1.4 var(--body);color:#5b4744}
.cs-ton{margin-top:clamp(40px,5vw,64px);display:inline-flex;align-items:center;gap:16px;background:transparent;border:1px solid rgba(45,30,31,.45);color:var(--cs-tinte);padding:16px 24px;font:600 14px/1 var(--body);transition:background .25s,border-color .25s}
.cs-ton:hover{background:#2d1e1f0d;border-color:var(--cs-tinte)}
.cs-ton small{font-weight:400;color:#7d6662}
.cs-ton-play{width:0;height:0;border-left:11px solid #a84353;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cs-oneshot :focus-visible,.cs-dazu :focus-visible,.cs-fragen :focus-visible{outline-color:var(--cs-tinte)}

/* Fototest: E-Mail-Feld im Stil von Felix' Upload */
.cs-demo-mail{display:block;margin-top:20px}
.cs-demo-mail span{display:block;font:12px/1.5 var(--body);color:#d9c3ba;margin-bottom:8px}
.cs-demo-mail input{width:100%;background:#1a1014;border:1px solid #6b3a42;color:#f6efe6;padding:16px 16px;font:16px/1.3 var(--body);outline:none}
.cs-demo-mail input:focus{border-color:#d39aa3}
.cs-demo-mail input::placeholder{color:#8f7671}

/* „Bewegte Erinnerungen“ ist länger als „Euer Film“: zweizeilig und etwas kleiner, damit nichts in den Text läuft */
.edition[data-edition="erinnerungen"] .edition-title{font-size:clamp(34px,4.3vw,60px)!important;line-height:1.02}

/* Bestellformular in der Karte */
.story-inquiry .cs-fehler{margin-top:6px}
.story-inquiry .send:disabled{opacity:.6;cursor:wait}

/* Dazu: eigener Song, Geschenkbox */
.cs-dazu{background:var(--cs-hell-2);color:var(--cs-tinte);padding:clamp(70px,8vw,120px) clamp(24px,6.5vw,110px)}
.cs-dazu h2{font:normal clamp(32px,4.2vw,58px)/1.12 var(--serif);letter-spacing:-.045em;margin:0 0 clamp(30px,4vw,50px);max-width:900px}
.cs-dazu .cs-eyebrow,.cs-fragen .cs-eyebrow{color:#a84353}
.cs-dazu-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(18px,2.4vw,32px)}
.cs-karte{background:#fffaf4;border:1px solid #e6d3c4;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.cs-karte h3{font:normal clamp(24px,2.2vw,32px)/1.2 var(--serif);letter-spacing:-.03em;margin:0 0 12px}
.cs-karte p{font:15px/1.7 var(--body);color:#5b4744;margin:0 0 22px}
.cs-karte .cs-eyebrow{margin-bottom:12px}
.cs-karte .cs-link{margin-top:auto}
.cs-karte-box{flex-direction:row;gap:clamp(18px,2.4vw,30px);align-items:center}
.cs-karte-box img{width:44%;height:auto;flex:none;display:block}
.cs-karte-box p{margin:0}

/* Vertrauen */
.cs-vertrauen{background:#1b1114;color:var(--ivory);padding:clamp(80px,9vw,140px) clamp(24px,6.5vw,110px)}
.cs-vertrauen h2{font:normal clamp(38px,5.4vw,76px)/1.08 var(--serif);letter-spacing:-.05em;margin:0 0 clamp(36px,5vw,60px)}
.cs-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)}
.cs-drei>div{border-top:1px solid rgba(232,157,167,.3);padding-top:22px}
.cs-drei h3{font:normal 22px/1.25 var(--serif);margin:0 0 12px;color:#f1c9cf}
.cs-drei p{font:15px/1.75 var(--body);color:#d8c4bb;margin:0}
.cs-wer{font:normal clamp(17px,1.6vw,21px)/1.6 var(--serif);font-style:italic;color:#e4d0c6;margin:clamp(44px,5vw,70px) 0 0;max-width:760px}
.cs-wer a{border-bottom:1px solid currentColor}

/* Fragen */
.cs-fragen{background:var(--cs-hell);color:var(--cs-tinte);padding:clamp(70px,8vw,120px) clamp(24px,6.5vw,110px)}
.cs-fragen .cs-wrap{max-width:900px}
.cs-fragen h2{font:normal clamp(36px,4.6vw,64px)/1.1 var(--serif);letter-spacing:-.05em;margin:0 0 28px}
.cs-fragen details{border-top:1px solid rgba(84,35,42,.25)}
.cs-fragen details:last-of-type{border-bottom:1px solid rgba(84,35,42,.25)}
.cs-fragen summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font:normal clamp(18px,1.7vw,22px)/1.35 var(--serif);color:#3b2326}
.cs-fragen summary::-webkit-details-marker{display:none}
.cs-fragen summary::after{content:'+';font:300 26px/1 var(--body);color:#a84353;transition:transform .25s}
.cs-fragen details[open] summary::after{transform:rotate(45deg)}
.cs-fragen details p{font:16px/1.75 var(--body);color:#5b4744;margin:0 0 24px;max-width:720px}

.cs-footer-logo{width:min(320px,70vw);height:auto;display:block}

/* ── Teilen-Seite /clip/<token> ── */
.cs-seite{background:#1b1114}
.cs-seite .header{position:sticky;top:0}
.cs-clip-buehne{background:linear-gradient(180deg,#1b1114 0%,#2b1116 60%,#42141c 100%);color:var(--ivory);padding:clamp(40px,6vw,90px) clamp(18px,6vw,110px) clamp(60px,8vw,110px)}
.cs-clip-buehne h1{font:normal clamp(38px,6vw,84px)/1.06 var(--serif);letter-spacing:-.05em;margin:0 0 clamp(26px,4vw,44px)}
.cs-clip{margin:0;width:fit-content;max-width:min(960px,100%);background:#000;box-shadow:0 30px 80px #0008;border:1px solid #5a2a31}
.cs-clip video{display:block;width:auto;max-width:100%;height:auto;max-height:60svh;background:#000}   /* Rahmen passt sich dem Bildformat an, keine schwarzen Ränder */
.cs-clip-wartet{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;aspect-ratio:16/10;padding:30px;font:15px/1.6 var(--body);color:#e8d6cc;background:#1a1014}
.cs-clip-wartet strong{font:normal 24px/1.3 var(--serif);color:var(--ivory)}
.cs-clip-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.cs-knopf{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:17px 24px;font:600 15px/1 var(--body);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.cs-knopf-hell{background:#f6efe6;color:#2d1e1f}
.cs-knopf-hell:hover{background:#fff}
.cs-knopf-rand{background:transparent;color:var(--ivory);border-color:rgba(241,201,207,.55)}
.cs-knopf-rand:hover{border-color:#f1c9cf;background:#ffffff10}
.cs-teilen-info{font:14px/1.5 var(--body);color:#f1c9cf;margin:12px 0 0;min-height:1em;word-break:break-all}
.cs-klein{font:13px/1.6 var(--body);color:#c9a9a6;margin:18px 0 0}

.cs-bestellen{background:var(--cs-hell);color:var(--cs-tinte);padding:clamp(60px,8vw,110px) clamp(18px,6vw,110px)}
.cs-bestellen .cs-eyebrow{color:#a84353}
.cs-bestellen h2{font:normal clamp(36px,5vw,68px)/1.08 var(--serif);letter-spacing:-.05em;margin:0 0 18px}
.cs-form{margin-top:clamp(28px,4vw,44px);max-width:860px}
.cs-fassungen{border:0;margin:0 0 8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-fassung{position:relative;display:flex;flex-direction:column;gap:10px;background:#fffaf4;border:1px solid #e1cbbb;padding:22px 22px 22px 54px;cursor:pointer;font:14px/1.6 var(--body);color:#5b4744;transition:border-color .2s,box-shadow .2s}
.cs-fassung input{position:absolute;left:20px;top:25px;width:20px;height:20px;accent-color:#6c202e;margin:0}
.cs-fassung-kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cs-fassung-kopf b{font:normal 22px/1.2 var(--serif);color:var(--cs-tinte)}
.cs-fassung-kopf em{font:normal 20px/1 var(--serif);color:#6c202e;white-space:nowrap}
.cs-fassung:has(input:checked){border-color:#6c202e;box-shadow:0 0 0 1px #6c202e,0 14px 30px #6c202e1c}
.cs-felder{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-feld{display:block;margin-top:14px}
.cs-feld span{display:block;font:600 13px/1.4 var(--body);margin-bottom:7px;color:#4b3335}
.cs-feld input,.cs-feld textarea{width:100%;background:#fffaf4;border:1px solid #d9c1b1;padding:14px 15px;font:16px/1.45 var(--body);color:var(--cs-tinte);outline:none}
.cs-feld input:focus,.cs-feld textarea:focus{border-color:#6c202e}
.cs-form .cs-knopf{margin-top:22px;width:100%;background:#6c202e;color:#fff6ee;font-size:16px;padding:20px 24px}
.cs-form .cs-knopf:hover{background:#86293a}
.cs-form .cs-knopf:disabled{opacity:.6;cursor:wait}
.cs-dazu-kurz{padding-top:0}
.cs-dazu-kurz .cs-dazu-grid{grid-template-columns:1fr 1fr}
.cs-seite .cs-dazu-kurz{background:var(--cs-hell)}

/* Impressum, Datenschutz */
.cs-text{background:var(--cs-hell);color:var(--cs-tinte);padding:clamp(40px,7vw,100px) clamp(18px,6vw,110px)}
.cs-text .cs-wrap{max-width:820px}
.cs-text h1{font:normal clamp(36px,5vw,62px)/1.1 var(--serif);letter-spacing:-.045em;margin:0 0 30px}
.cs-text h2{font:normal 24px/1.3 var(--serif);margin:40px 0 12px}
.cs-text p,.cs-text li{font:16px/1.75 var(--body);color:#4b3836}
.cs-text a{text-decoration:underline}

@media(max-width:900px){
 .cs-oneshot-grid,.cs-dazu-grid,.cs-dazu-kurz .cs-dazu-grid,.cs-drei{grid-template-columns:1fr}
 .cs-karte-box{flex-direction:column;align-items:flex-start}
 .cs-karte-box img{width:100%}
}
@media(max-width:620px){
 .cs-fassungen,.cs-felder{grid-template-columns:1fr}
 .cs-clip-knoepfe .cs-knopf{flex:1 1 100%}
 .brand-logo img{height:28px}
}

/* Bewegte Beispiele statt Platzhalterbildern (Felix 11.11.2026): stumme Schleifen, laden erst beim Hinscrollen (script.js),
   „Mit Ton ansehen“ öffnet den Beispielfilm mit Ton; Clip-Seite: Beispielfilm mit Ton unter dem eigenen Clip */
.editorial-photo.editorial-film{aspect-ratio:4/3;margin:0;background:#120d0e}
.editorial-film video,.edition-loop video,.edition-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
figure.edition-image.edition-loop,figure.edition-image.edition-film{margin:0;overflow:hidden;background:#120d0e;filter:none;max-height:none}
figure.edition-image.edition-loop{aspect-ratio:4/5}
figure.edition-image.edition-film{aspect-ratio:4/3}
.edition-loop::before,.edition-film::before{z-index:1}
.cs-mit-ton{position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:9px;background:rgba(27,17,20,.8);color:#f6efe6;border:1px solid rgba(255,235,216,.35);padding:9px 14px;font:600 12px/1 var(--body);letter-spacing:.04em}
.cs-mit-ton::before{content:"";border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cs-mit-ton small{font-weight:400;opacity:.7;font-size:11px}
.cs-mit-ton:hover{background:#5a1822}
.cs-mit-ton:focus-visible{outline:2px solid #f6efe6;outline-offset:3px}
@media(max-width:800px){figure.edition-image.edition-loop{max-width:440px}}
.cs-beispiel-film{margin-top:clamp(50px,7vw,90px);padding-top:clamp(30px,4vw,50px);border-top:1px solid rgba(255,235,216,.18)}
.cs-beispiel-film .cs-clip video{max-height:52svh}

/* Symbole als SVG statt Schriftzeichen (Felix 11.11.2026): gleiche Linienstärke in jeder Größe, Farbe vom Text */
.cs-i{display:inline-block;width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;overflow:visible}
.cs-i path{vector-effect:non-scaling-stroke}
.demo-upload-symbol .cs-i{width:.8em;height:.8em}
.cs-fragen summary::after{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8h13' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}

/* Bestellformular in den aufgeklappten Fassungen und auf der Clip-Seite (Felix 11.11.2026): Felder als Felder erkennbar,
   „Weiter zu den Fotos“ als richtiger Knopf */
.story-inquiry .field input,.story-inquiry .field textarea{background:#fffdf9!important;border:1px solid rgba(108,32,46,.32)!important;border-radius:2px;padding:14px 16px!important;box-shadow:inset 0 1px 2px rgba(45,30,31,.06)}
.story-inquiry .field input:hover,.story-inquiry .field textarea:hover{border-color:rgba(108,32,46,.55)!important}
.story-inquiry .field input:focus,.story-inquiry .field textarea:focus{border:1px solid #6c202e!important;box-shadow:0 0 0 3px rgba(108,32,46,.15)}
.story-inquiry .field>span{font-weight:600;color:#3a2628}
.story-inquiry .send{background:#5a1822!important;color:#fff7ef!important;border:0!important;padding:20px 26px!important;box-shadow:0 14px 30px -14px rgba(90,24,34,.6)!important}
.story-inquiry .send:hover{background:#6c202e!important;color:#fff!important;padding-left:26px;padding-right:26px}
.story-inquiry .send>span:last-child{color:#fff7ef;font-size:24px}
.cs-feld input,.cs-feld textarea{background:#fffdf9;border-color:rgba(108,32,46,.32);border-radius:2px;box-shadow:inset 0 1px 2px rgba(45,30,31,.06)}
.cs-feld input:focus,.cs-feld textarea:focus{box-shadow:0 0 0 3px rgba(108,32,46,.15)}

/* Film mit Ton direkt auf der Seite statt im Fenster (Felix 11.11.2026) */
.cs-mit-ton[hidden],.cs-ton[hidden]{display:none}
.cs-ton-film{margin:clamp(22px,3vw,34px) 0 0;max-width:min(860px,100%);background:#120d0e;box-shadow:0 30px 70px rgba(42,18,24,.22)}
.cs-ton-film video{display:block;width:100%;height:auto;aspect-ratio:4/3}

/* Erster Bildschirm: sichtbare Überschrift, worum es geht (Felix 11.11.2026, Besucher aus Anzeigen); blendet beim Scrollen aus */
.cs-held{position:absolute;left:50%;top:clamp(110px,19%,200px);transform:translateX(-50%);width:min(880px,88vw);text-align:center;color:#f6efe6;text-shadow:0 3px 30px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.5)}
.cs-held h1{font:normal clamp(34px,5vw,70px)/1.08 var(--serif);letter-spacing:-.045em;margin:0 0 18px;text-wrap:balance}
.cs-held p{font:clamp(14px,1.25vw,17px)/1.6 var(--body);color:#eedfd3;margin:0 auto 24px;max-width:560px}
.cs-held a{pointer-events:auto;display:inline-flex;gap:10px;align-items:center;font:600 13px/1 var(--body);letter-spacing:.06em;color:#fff7ef;border-bottom:1px solid rgba(255,235,216,.6);padding-bottom:8px}
.cs-held a:hover{border-color:#fff7ef}
.cs-held a:focus-visible{outline:2px solid #fff;outline-offset:6px}
@media(max-width:800px){.cs-held{top:calc(13% + 44px)}.cs-held h1{margin-bottom:12px}.cs-held p{font-size:14px;margin-bottom:18px}}