/* Geburtstagsseite – Skizzenbuch-Kino: Papier, Bleistift, Gold (passend zu den Zeichnungen) */
:root{
  --paper:#f2ede6; --paper-2:#ebe4d9; --card:#f8f4ee;
  --ink:#1c1a18; --graphite:#4a4540; --mut:#5f5952; --line:#2b2724; --line-soft:#c9c0b3;
  --gold:#d3a32c; --gold-deep:#a47a14; --gold-soft:#f1dfae;
  --red:#9e2a26; --red-deep:#7a1d1a;
  --hand:"Avenir Next Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",sans-serif-condensed,sans-serif;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua","Iowan Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font:18px/1.7 var(--sans);-webkit-font-smoothing:antialiased;
  background:var(--paper) url("assets/papier.webp") repeat}
a{color:var(--red)}
h1,h2,h3{margin:0;font-weight:700;line-height:1.1}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* Gold-Pinselstrich (wie die „40“ in der Zeichnung) */
.brush{position:relative}
.brush::after,h2::after{content:"";display:block;height:9px;margin-top:6px;width:min(220px,60%);
  background:var(--gold);border-radius:60% 40% 55% 45% / 70% 60% 40% 30%;transform:rotate(-1.2deg);opacity:.9}

/* ---------- Kopf: das Rollen-Bild ist der Titel ---------- */
.hero{text-align:center;padding:30px 16px 56px;position:relative}
.eyebrow{font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:.9rem;color:var(--graphite);margin:0 0 10px}
.eyebrow span{color:var(--gold-deep)}
.hero-img{margin:0 auto;max-width:1240px;font-size:0;line-height:0}
.hero-img a{display:block}
.hero-img img{display:block;width:100%;height:auto;
  /* Ränder weich ins Papier auslaufen lassen */
  -webkit-mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 72%,transparent 100%);
          mask-image:radial-gradient(ellipse 78% 74% at 50% 50%,#000 72%,transparent 100%)}
.hero-text{font-family:var(--hand);font-size:clamp(3rem,10vw,6rem);text-transform:uppercase}
.when{font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.15rem,3.8vw,1.6rem);margin:6px 0 0}
.when i{font-style:normal;color:var(--gold-deep);padding:0 .2em}
.where{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--graphite);margin:2px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:26px}

/* Knöpfe: Pinsel-Gold und Tusche-Rahmen */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:1rem;text-decoration:none;cursor:pointer;border:2px solid var(--ink);border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;transition:transform .15s ease}
.btn:hover{transform:translateY(-2px) rotate(-.5deg)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.btn-ink{background:transparent;color:var(--ink)}
.btn-ink:hover{background:rgba(28,26,24,.05)}

.cd-label{font-family:var(--hand);font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.85rem;color:var(--mut);margin:36px 0 10px}
.cd{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cd div{min-width:78px;padding:10px 8px 8px;background:var(--card);border:2px solid var(--ink);
  border-radius:12px 4px 10px 5px / 5px 10px 4px 12px;box-shadow:3px 3px 0 var(--line-soft)}
.cd div:nth-child(even){transform:rotate(.8deg)}.cd div:nth-child(odd){transform:rotate(-.6deg)}
.cd b{display:block;font-family:var(--hand);font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}

/* ---------- Trenner: Bleistiftlinie mit Stern ---------- */
.divider{display:flex;align-items:center;gap:14px;margin:56px 0 0;color:var(--gold-deep)}
.divider::before,.divider::after{content:"";flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--graphite) 0 14px,transparent 14px 18px,var(--graphite) 18px 40px,transparent 40px 43px);opacity:.55}
.divider i{font-style:normal;font-size:1.2rem}

/* ---------- Abschnitte ---------- */
section{padding:56px 0 0}
.intro-sec{padding-top:8px}
.intro{font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,1.45rem);text-align:center;max-width:680px;margin:0 auto;line-height:1.75}
/* „Szene 1“ als Filmklappe */
.scene{display:inline-block;font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.2em;font-size:.8rem;color:#fff;
  background:var(--ink);padding:5px 12px 4px 34px;margin-bottom:12px;position:relative;transform:rotate(-1deg)}
.scene::before{content:"";position:absolute;left:6px;top:50%;width:20px;height:10px;transform:translateY(-50%);
  background:repeating-linear-gradient(-45deg,#fff 0 3px,var(--ink) 3px 6px)}
h2{font-family:var(--hand);font-size:clamp(2.1rem,6.5vw,3rem);text-transform:uppercase;letter-spacing:.02em;margin:0 0 26px}

/* Abschnitt mit Szenenbild: Text + Bild nebeneinander */
.with-img{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.with-img.flip{grid-template-columns:1.1fr .9fr}
.with-img.flip>div{order:2}
.with-img.flip>.sketch{order:1}
.sketch{margin:0}
.sketch a{display:block}
.sketch img{display:block;width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 68%,transparent 100%);
          mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 68%,transparent 100%)}
#rsvp .sketch{max-width:760px;margin:0 auto 10px}
footer .sketch{max-width:760px;margin:24px auto 0}

/* Skizzen-Karten: Tuscherahmen, leicht schief, Bleistiftschatten */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.fact,.card{background:var(--card);border:2px solid var(--ink);padding:18px 20px;
  border-radius:14px 5px 12px 6px / 6px 12px 5px 14px;box-shadow:4px 4px 0 var(--line-soft)}
.fact:nth-child(odd),.card:nth-child(odd){transform:rotate(-.5deg)}
.fact:nth-child(even),.card:nth-child(even){transform:rotate(.45deg)}
.fact small{display:block;font-family:var(--hand);font-weight:700;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.fact strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.3;margin-top:4px}
.fact span{display:block;color:var(--mut);font-size:1rem;margin-top:2px}
.note{margin:22px 0 0;padding:12px 18px;background:var(--gold-soft);border-left:4px solid var(--gold);font-size:1rem;
  border-radius:2px 10px 3px 8px}

/* Programm: handschriftliche Liste */
.reel{list-style:none;margin:0;padding:0}
.reel li{display:grid;grid-template-columns:minmax(80px,9.5rem) 1fr;align-items:baseline;gap:18px;padding:14px 4px;
  border-bottom:2px solid transparent;border-image:repeating-linear-gradient(90deg,var(--line-soft) 0 22px,transparent 22px 26px) 1}
.reel b{font-family:var(--hand);font-size:1.35rem;color:var(--ink);font-variant-numeric:tabular-nums}
.reel span{font-size:1.1rem}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.card h3{font-family:var(--hand);font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}
.card p{margin:0;color:var(--mut);font-size:1.02rem}
.place{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;transform:none!important}
.place h3{font-size:1.5rem}.place p{margin:2px 0 0}

/* Platzhalter sichtbar */
.ph{border:1.5px dashed currentColor;border-radius:3px;padding:0 6px;opacity:.7;font-style:italic}

/* ---------- Eintrittskarte ---------- */
.ticket{position:relative;background:#fbf8f2;border:2px solid var(--ink);border-radius:16px 6px 14px 8px / 8px 14px 6px 16px;
  box-shadow:6px 6px 0 var(--line-soft);max-width:760px;margin:0 auto;overflow:hidden}
.ticket-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;background:var(--ink);color:var(--paper);
  border-bottom:3px dashed var(--paper)}
.ticket-head strong{font-family:var(--hand);font-size:clamp(1.6rem,5.5vw,2.2rem);text-transform:uppercase;letter-spacing:.08em;color:var(--gold)}
.ticket-head span{font-family:var(--hand);font-weight:700;letter-spacing:.1em;text-align:right;line-height:1.35}
form.rsvp{padding:24px;display:grid;gap:18px}
form.rsvp label{display:grid;gap:8px;font-weight:600;font-size:1rem}
.ticket input,.ticket textarea,.ticket select{font:inherit;font-size:1.02rem;font-weight:400;padding:12px 14px;color:var(--ink);width:100%;
  background:#fff;border:2px solid var(--graphite);border-radius:10px 4px 8px 5px / 5px 8px 4px 10px}
.ticket input:focus,.ticket textarea:focus,.ticket select:focus{outline:3px solid var(--gold);outline-offset:1px}
.ticket ::placeholder{color:#9a9188}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts label{cursor:pointer}
.opts input{position:absolute;opacity:0;width:1px;height:1px}
.opts span{display:block;text-align:center;padding:14px 10px;font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  border:2px solid var(--graphite);border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;background:#fff}
.opts input:checked+span{background:var(--gold);border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.opts input:focus-visible+span{outline:3px solid var(--gold-deep);outline-offset:2px}
.more{display:grid;gap:18px}
.comp{display:grid;gap:14px}
.comp:not(:has(label:not([hidden]))){display:none}
.comp label{padding-left:16px;border-left:3px solid var(--gold)}
.comp label[hidden]{display:none}
.cake{display:grid;gap:14px}
form.rsvp label.tick{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px 14px;background:#fff;
  border:2px dashed var(--graphite);border-radius:10px 4px 8px 5px / 5px 8px 4px 10px}
form.rsvp label.tick input{width:22px;height:22px;flex:none;padding:0;accent-color:var(--gold-deep)}
form.rsvp label.tick:has(input:checked){border-style:solid;border-color:var(--ink);background:var(--gold-soft)}
.cake label[hidden]{display:none}
#cakeWhich{padding-left:16px;border-left:3px solid var(--gold)}
.submit{font-family:var(--hand);font-weight:700;font-size:1.25rem;letter-spacing:.1em;text-transform:uppercase;padding:14px;cursor:pointer;
  background:var(--red);color:#fff;border:2px solid var(--ink);border-radius:255px 15px 225px 15px / 15px 225px 15px 255px;box-shadow:4px 4px 0 var(--ink)}
.submit:hover{background:var(--red-deep)}
.privacy{font-size:.88rem;color:var(--mut);margin:0}
.ok,.er{padding:18px 20px;margin:22px 24px;font-size:1.05rem;border:2px solid currentColor;border-radius:10px 4px 8px 5px}
.ok{background:#e8f1e1;color:#24481c}.er{background:#f7e1dc;color:#7a1d1a}
.hp{position:absolute;left:-9999px}
.sub{color:var(--mut);margin:-12px 0 24px}

/* ---------- Abspann ---------- */
footer{text-align:center;padding:0 24px 72px;color:var(--mut)}
footer .divider{max-width:1240px;margin:64px auto 0}
.credits{display:grid;gap:16px;margin:32px auto 28px;max-width:420px}
.credits div small{display:block;font-family:var(--hand);font-weight:700;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mut)}
.credits div b{font-family:var(--serif);font-weight:400;font-size:1.35rem;color:var(--ink)}
footer .sig{display:table;margin-left:auto;margin-right:auto;font-family:var(--hand);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,6vw,2.6rem);color:var(--ink);margin-bottom:12px}
footer .sig::after{content:"";display:block;height:10px;margin:4px auto 0;width:80%;background:var(--gold);border-radius:60% 40% 55% 45% / 70% 60% 40% 30%;transform:rotate(-1deg)}

/* Großansicht */
.zoom{padding:0;border:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible}
.zoom::backdrop{background:rgba(28,26,24,.88)}
.zoom img{display:block;max-width:96vw;max-height:90vh;width:auto;height:auto;border:2px solid var(--ink);background:var(--paper)}
.zoom-x{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--gold);color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer}

@media (max-width:760px){
  .with-img,.with-img.flip{grid-template-columns:1fr;gap:20px}
  .with-img.flip>div{order:1}.with-img.flip>.sketch{order:2}
  .sketch{max-width:520px;margin:0 auto}
}
@media (max-width:520px){
  body{font-size:17px}
  .hero{padding:22px 0 48px}
  .hero-img img{-webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 75%,transparent 100%);mask-image:radial-gradient(ellipse 85% 80% at 50% 50%,#000 75%,transparent 100%)}
  .hero>*:not(.hero-img){padding-left:16px;padding-right:16px}
  .wrap{padding:0 18px}
  .cd div{min-width:64px}
  form.rsvp{padding:18px}
  .ticket-head{padding:14px 18px}
  .ok,.er{margin:18px}
  .reel li{grid-template-columns:1fr;gap:0;padding:12px 4px}
  .zoom-x{top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* Ansprechpartner im Abspann */
.contact{max-width:640px;margin:8px auto 0;padding:22px 20px;background:var(--card);border:2px solid var(--ink);
  border-radius:14px 5px 12px 6px / 6px 12px 5px 14px;box-shadow:4px 4px 0 var(--line-soft);color:var(--ink)}
.contact-title{font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.15rem;margin:0}
.contact-who{margin:6px 0 16px;color:var(--mut)}
.contact-who b{color:var(--ink);font-weight:600}
.contact-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.contact-links .btn{font-size:.9rem;padding:10px 16px;text-transform:none;letter-spacing:.02em}
@media (max-width:520px){.contact-links .btn{width:100%;justify-content:center}}

/* Hervorhebung *Text* – Gold-Textmarker im Pinselstil */
mark.hl{color:var(--ink);font-weight:600;padding:.05em .3em .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/100% 3px,var(--gold-soft);border-radius:3px 8px 4px 9px}

/* Impressum & Datenschutz */
.legal{max-width:640px;margin:36px auto 0;display:grid;gap:10px;text-align:left}
.legal details{border-top:1.5px dashed var(--line-soft);padding-top:8px;scroll-margin-top:24px}
.legal summary{cursor:pointer;font-family:var(--hand);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;color:var(--graphite);list-style:none;display:flex;justify-content:space-between;align-items:center}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:"+";font-size:1.1rem;color:var(--gold-deep)}
.legal details[open] summary::after{content:"–"}
.legal-body{font-size:.88rem;line-height:1.6;color:var(--mut);padding:6px 0 4px}
.legal-body p{margin:0 0 10px}
.legal-body b{color:var(--ink);font-weight:600}
.legal-body a{color:var(--red);overflow-wrap:anywhere}

/* Eigene Textabschnitte (im Admin angelegt) */
.free-text{font-size:1.08rem;line-height:1.75;background:var(--card);border:2px solid var(--ink);padding:18px 22px;
  border-radius:14px 5px 12px 6px / 6px 12px 5px 14px;box-shadow:4px 4px 0 var(--line-soft)}