/* look-a.css: the premium "A" look Joe picked on 2026-10-13 (reference: drafts/premium-a/).
   A layer ON TOP of 07-live-stage.css and el-photobooth.css: the same colours (their --tokens),
   the same fonts (Alegreya + Manrope), the same words and the same markup. It only refines type,
   spacing, hairlines, hover states and the reveal motion. Step 85 copies it to /el/look-a.css and
   links it on every page (build/add-look.py); YANNA_NO_PHOTOS=1 leaves it off, so that site stays
   byte for byte the site from before photos. Written with start/end sides, so ar and he read right
   to left. Motion is off for visitors who ask for reduced motion. */
:root{--hair:rgba(246,242,236,.13);--hair-gold:rgba(242,184,76,.45);--night:#0a0810;--night2:#120e1c;}
body{font-size:17px;text-rendering:optimizeLegibility;}
main{display:block;overflow-x:clip;}
::selection{background:rgba(242,184,76,.35);color:var(--ink);}

/* type: lighter, larger, tighter serif headings; the gold italic accent stays */
h1,h2{font-weight:500;}
h1{letter-spacing:-.02em;}
h2{letter-spacing:-.012em;line-height:1.1;}
h3{font-weight:500;line-height:1.25;}
.hero h1{font-weight:500;line-height:1.04;}
.phero h1{font-size:clamp(2rem,1.9vw + 1.6rem,3.5rem);line-height:1.05;font-weight:500;letter-spacing:-.02em;}
/* phones: a long word (de "Veranstaltungskoordination") is wider than the screen; break only such words */
@media (max-width:600px){h1,h2,h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5;}}
.tagline{font-weight:400;letter-spacing:.01em;}

/* the gold eyebrow with a hairline before it */
.eyebrow{font-weight:600;font-size:.72rem;letter-spacing:.24em;display:flex;align-items:center;gap:14px;}
.eyebrow::before{content:"";width:32px;height:1px;background:var(--gold);opacity:.75;flex:none;}
.cta .eyebrow,.cta-glow .eyebrow{justify-content:center;}
.cta .eyebrow::after,.cta-glow .eyebrow::after{content:"";width:32px;height:1px;background:var(--gold);opacity:.75;flex:none;}

/* breadcrumb */
.crumb{font-size:.78rem;letter-spacing:.06em;}
.crumb a{color:var(--dim);border-bottom:1px solid transparent;transition:color .3s,border-color .3s;}
.crumb a:hover{color:var(--gold);border-color:var(--hair-gold);}

/* sections: more air, hairlines between bands */
.section{padding:clamp(80px,10vw,150px) 0;}
.alt{background:var(--night2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.section-head{max-width:36em;margin-bottom:clamp(44px,5vw,64px);}
.section-head h2{font-size:clamp(1.85rem,3.3vw,3rem);line-height:1.08;margin:.2rem 0 .6rem;}
.section-head p{font-size:1.05rem;line-height:1.7;}
.wrap{max-width:1240px;}

/* long text: a calm measure, generous leading, quiet gold links */
.prose{max-width:38em;}
.prose h2{font-size:clamp(1.6rem,2.4vw,2.35rem);margin:2.8rem 0 .7rem;}
.prose p{font-size:1.05rem;line-height:1.8;}
.prose p+p{margin-top:.2em;}
.prose a{text-decoration-thickness:1px;text-underline-offset:5px;transition:color .3s;}
.prose a:hover{color:#ffd27a;}
.prose ul li{line-height:1.7;}
.rule{background:var(--hair);margin:3rem 0;}
.pull{border-radius:0;background:none;border-inline-start:1px solid var(--gold);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,1vw + 1.05rem,1.8rem);line-height:1.35;padding-block:.4rem;padding-inline:1.6rem 0;}
.pull::after{display:none;}
.figure{border-radius:3px;border-color:var(--hair);}

/* service cards: image-led, a hairline frame, a slow zoom on hover */
.cards{gap:clamp(14px,1.6vw,24px);}
.card{border-radius:3px;border-color:var(--hair);background:var(--night2);transition:border-color .5s,transform .5s var(--ease);}
.card:hover{transform:none;border-color:var(--hair-gold);}
.card-pic{overflow:hidden;}
.card-pic img{transition:transform 1.4s var(--ease),filter .6s;filter:saturate(.92) brightness(.92);}
.card:hover .card-pic img,.card:focus-visible .card-pic img{transform:scale(1.05);filter:none;}
.card-body{padding:22px 24px 28px;}
.card h3{font-size:1.3rem;}
.card p{line-height:1.6;}

/* events and steps: typographic, numbers in gold italic serif */
.vignette .chip,.step .chip{border-radius:3px;border-color:var(--hair);background:transparent;}
.step .num{font-style:italic;font-weight:400;font-size:2.2rem;line-height:1;margin-bottom:.6rem;}
.step h3{font-size:1.25rem;}
.step p{line-height:1.65;}
.steps{border-top:1px solid var(--hair);padding-top:34px;}

/* booths and price cards: hairlines, a quieter lift */
.booth,.plan{border-radius:3px;border-color:var(--hair);}
.booth::after{border-radius:3px;}
.booth:hover,.plan:hover{transform:translateY(-3px);}
.plan .amount{font-weight:500;letter-spacing:-.01em;}

/* tables and questions: hairlines instead of boxes */
.tscroll{border-radius:3px;border-color:var(--hair);background:transparent;}
table.t thead th{background:transparent;letter-spacing:.16em;font-size:.72rem;font-weight:600;}
table.t tbody tr:nth-child(even){background:rgba(246,242,236,.015);}
.faq details{border:0;border-top:1px solid var(--hair);border-radius:0;background:transparent;margin:0;}
.faq details:last-child{border-bottom:1px solid var(--hair);}
.faq summary{font-family:var(--serif);font-weight:500;font-size:1.18rem;line-height:1.35;padding:1.15rem 0;}
.faq details p{padding:0 0 1.3rem;font-size:1rem;line-height:1.75;}
.faq details[open],.faq details:hover{border-color:var(--hair);}
.faq summary:hover{color:var(--gold);}

/* calls to action and contact lines */
.cta{padding:clamp(110px,14vw,190px) 0;}
.cta h2{font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.08;max-width:16em;margin-inline:auto;}
.cta p{font-size:1.08rem;line-height:1.65;max-width:34em;margin-inline:auto;}
.btn{letter-spacing:.01em;}
.btn-gold:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.footer{padding-inline:clamp(20px,5vw,72px);border-color:var(--hair);}

/* motion: a longer, softer reveal, one after another */
.reveal{transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.cards .card.reveal:nth-child(n){transition-delay:0s;}
.cards .card.reveal:nth-child(2),.steps .step.reveal:nth-child(2){transition-delay:.12s;}
.cards .card.reveal:nth-child(3),.steps .step.reveal:nth-child(3){transition-delay:.24s;}
.steps .step.reveal:nth-child(4){transition-delay:.36s;}

@media(max-width:900px){
  .section{padding:clamp(64px,12vw,96px) 0;}
  .steps{padding-top:24px;}
}
@media(prefers-reduced-motion:reduce){
  .reveal,.card,.card-pic img{transition:none!important;transform:none!important;}
  .card:hover .card-pic img{transform:none;}
}