/* =========================================================
   Gino D'oro – Archiv-/Präsentationsseite
   HELL & italienisch-schlagerfreundlich: Creme/Papier + Gold,
   weiße Karten, warme Sonne statt dunkler Bühne.
   Mobile-first. Keine externen Abhängigkeiten (offline-tauglich).
   ========================================================= */
:root{
  --gold:#c69b5a; --gold-d:#a17d43;
  --paper:#f6f3ee; --paper2:#fdfaf3; --card:#fffdf8; --line:#e6dfd2;
  --ink:#2a2622; --muted:#6f655a;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:var(--gold-d);text-decoration:none;}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:1.15;letter-spacing:.01em;}

.wrap{max-width:1080px;margin:0 auto;padding:0 1.3rem;}
.wrap-narrow{max-width:720px;}
.uc{font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-d);margin-bottom:.6rem;}
.section{padding:4.5rem 0;}
.section-alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section h2{font-size:clamp(1.7rem,4vw,2.5rem);margin-bottom:1rem;color:var(--ink);}
.section-lead{color:var(--muted);max-width:640px;margin-bottom:2.2rem;font-size:1.05rem;}
.hint{color:var(--muted);font-size:.9rem;margin-top:1.2rem;font-style:italic;}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;font-weight:600;font-size:.92rem;letter-spacing:.03em;cursor:pointer;transition:transform .15s,background .15s,color .15s;border:1.5px solid transparent;}
.btn-gold{background:var(--gold);color:#221c12;box-shadow:0 4px 14px rgba(198,155,90,.35);}
.btn-gold:hover{background:#d8ad6a;transform:translateY(-2px);}
.btn-out{border-color:var(--gold);color:var(--gold-d);background:#fff;}
.btn-out:hover{background:rgba(198,155,90,.12);transform:translateY(-2px);}

/* ---- Marken-/Kopfbalken (AUFTRAG-024 Teil 5): schwarze Leiste als Akzent auf der hellen Seite ---- */
.brandbar{background:#14130f;color:var(--gold);text-align:center;padding:.55rem 1rem;font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.brandbar-sub{color:#e9dcc4;font-weight:500;}

/* ---- 1. HERO (hell & freundlich, responsive: Foto + Creme-Panel) ---- */
.hero{position:relative;display:flex;flex-direction:column;background:var(--paper);overflow:hidden;}
/* Mobil (Standard): Foto oben, Text darunter auf Creme */
.hero-bg{position:relative;background:#e9ddc9 url('assets/img/hero-riviera.jpg') center 14%/cover no-repeat;filter:none;height:340px;z-index:0;}
.hero-overlay{display:none;}
.hero-inner{position:relative;z-index:2;padding:2.4rem 1.4rem 3rem;max-width:640px;margin:0 auto;text-align:center;}
.hero-scroll{display:none;}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.28em;color:var(--gold-d);margin-bottom:1.1rem;text-shadow:none;}
.hero h1{font-size:clamp(2.8rem,9vw,5rem);color:var(--ink);text-shadow:none;}
.hero-lead{color:var(--muted);font-size:clamp(1.05rem,2.4vw,1.25rem);margin:1.2rem auto 1.9rem;max-width:600px;text-shadow:none;}
/* Badges, Ghost-Button, Tricolore auf hellem Grund lesbar machen */
.hero .badge{background:#fff;border:1px solid var(--line);color:var(--gold-d);text-shadow:none;backdrop-filter:none;}
.hero .btn-ghost{border-color:var(--gold);color:var(--gold-d);background:#fff;}
.hero .btn-ghost:hover{background:rgba(198,155,90,.12);}
.hero .tric{box-shadow:none;background:linear-gradient(90deg,#3d9268 0 33%,#fff 33% 66%,#cf5d55 66% 100%);}
/* Desktop/Tablet: Foto rechts, Text links daneben */
@media(min-width:821px){
  .hero{flex-direction:row-reverse;align-items:stretch;min-height:600px;}
  .hero-bg{flex:1 1 46%;height:auto;background-position:center top;}
  .hero-bg::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,var(--paper),rgba(246,243,238,0));pointer-events:none;}
  .hero-inner{flex:1 1 54%;display:flex;flex-direction:column;justify-content:center;text-align:left;margin:0;padding:3rem 3.6rem;max-width:none;}
  .hero .tric{margin-left:0;margin-right:auto;}
  .hero-badges{justify-content:flex-start;}
  .hero-ctas{justify-content:flex-start;}
}

/* ---- 2. VIDEO-ARCHIV ---- */
.video-grid{display:grid;gap:1.6rem;grid-template-columns:1fr;}
@media(min-width:640px){.video-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.video-grid{grid-template-columns:1fr 1fr 1fr;}}
.video-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 6px 22px rgba(90,75,50,.08);}
.vc-thumb{position:relative;aspect-ratio:16/9;background:#e8e1d3 center/cover no-repeat;cursor:pointer;overflow:hidden;}
.vc-thumb img,.vc-thumb iframe,.vc-thumb video{width:100%;height:100%;object-fit:cover;border:0;display:block;}
.vc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(35,28,16,.22);transition:background .2s;}
.vc-thumb:hover .vc-play{background:rgba(35,28,16,.08);}
.vc-play span{width:60px;height:60px;border-radius:50%;background:var(--gold);color:#221c12;display:flex;align-items:center;justify-content:center;font-size:1.4rem;padding-left:4px;box-shadow:0 6px 20px rgba(0,0,0,.3);}
.vc-body{padding:1rem 1.1rem 1.2rem;}
.vc-title{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-bottom:.2rem;}
.vc-meta{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gold-d);margin-bottom:.5rem;}
.vc-desc{font-size:.92rem;color:var(--muted);}
/* AUFTRAG-032b: featured = normale Grid-Kachel an Position 1, nur dezent ausgezeichnet (kräftigerer Gold-Rahmen + leichter Gold-Schein + Badge) – NICHT übergroß */
.video-featured{border:2px solid var(--gold);box-shadow:0 6px 22px rgba(198,155,90,.30);}
.vc-flag{position:absolute;top:.7rem;left:.7rem;z-index:3;background:var(--gold);color:#221c12;font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.28rem .7rem;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.3);}

/* ---- 3. GALERIE ---- */
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(2,1fr);}
@media(min-width:640px){.gallery{grid-template-columns:repeat(3,1fr);}}
.gal-item{position:relative;border:1px solid var(--line);padding:0;background:var(--card);border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;box-shadow:0 4px 14px rgba(90,75,50,.08);}
.gal-year{position:absolute;top:.5rem;left:.5rem;background:#5a1a1e;color:#fffdf8;font-weight:700;font-size:.78rem;letter-spacing:.04em;padding:.16rem .55rem;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.28);z-index:2;pointer-events:none;}
.gal-item img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .3s;}
.gal-item:hover img{transform:scale(1.06);}

/* ---- 4. PROGRAMM & FAKTEN ---- */
.facts{display:grid;gap:1.4rem;grid-template-columns:1fr;}
@media(min-width:700px){.facts{grid-template-columns:1fr 1fr;}}
.fact{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.5rem;box-shadow:0 4px 16px rgba(90,75,50,.07);}
.fact h3{font-size:1.2rem;color:var(--gold-d);margin-bottom:.7rem;}
.fact ul{list-style:none;}
.fact li{padding:.35rem 0 .35rem 1.2rem;position:relative;color:var(--ink);font-size:.97rem;}
.fact li::before{content:'▪';position:absolute;left:0;color:var(--gold);}

/* ---- Hörproben: abspielbare Cover-Kacheln ---- */
.audio-label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--gold-d);margin:2.2rem 0 .9rem;}
.songs{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-width:860px;}
.song{border:0;padding:0;background:none;cursor:pointer;text-align:left;font-family:inherit;}
.song-cover{position:relative;display:block;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 6px 18px rgba(90,75,50,.14);background:linear-gradient(140deg,#e9c98c,var(--gold) 55%,#8a6a38);}
.song-cover::before{content:'♪';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:3.2rem;color:rgba(255,252,244,.9);text-shadow:0 2px 10px rgba(0,0,0,.25);}
.song-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.song-play{position:absolute;right:.55rem;bottom:.55rem;width:40px;height:40px;border-radius:50%;background:#fffdf8;color:var(--gold-d);display:flex;align-items:center;justify-content:center;font-size:.95rem;padding-left:2px;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .15s;}
.song:hover .song-play{transform:scale(1.1);}
.song.playing .song-play{background:var(--gold);color:#221c12;}
.song-year{position:absolute;top:.55rem;left:.55rem;background:#5a1a1e;color:#fffdf8;font-weight:700;font-size:.8rem;letter-spacing:.04em;padding:.18rem .6rem;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,.28);z-index:2;}
.song-title{display:block;font-weight:600;color:var(--ink);font-size:.95rem;margin-top:.55rem;line-height:1.3;}
.song-sub{display:block;font-size:.78rem;color:var(--muted);}

/* ---- 5. WEIN & MUSIK Teaser (hell, warmes Rosé) ---- */
.section-wein{background:linear-gradient(150deg,#f9ece6,#f6f3ee);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.wein-grid{display:grid;gap:2.2rem;align-items:center;grid-template-columns:1fr;}
@media(min-width:820px){.wein-grid{grid-template-columns:1fr 1.25fr;}}
.wein-img img{border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 34px rgba(120,70,50,.18);}
.wein-text h2{margin-bottom:1rem;}
.wein-text p{color:var(--ink);margin-bottom:1rem;max-width:560px;}
.wein-text .uc{color:#a3454f;}
.wein-text .btn{margin-top:.4rem;}

/* ---- 6. VITA ---- */
#vita p{color:var(--ink);margin-bottom:1.1rem;font-size:1.05rem;}
#vita p:first-of-type::first-letter{font-family:var(--serif);font-size:2.6rem;color:var(--gold-d);float:left;line-height:.8;padding:.1rem .5rem 0 0;}

/* ---- 7. KONTAKT ---- */
.section-contact{background:linear-gradient(160deg,#f3ead9,#f6f3ee);text-align:center;border-top:1px solid var(--line);}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2rem 1.5rem;max-width:560px;margin:0 auto;box-shadow:0 10px 30px rgba(90,75,50,.12);}
.contact-name{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin-bottom:1.3rem;}
.contact-name span{color:var(--gold-d);}
.contact-links{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;}
.signature{font-family:var(--serif);font-style:italic;color:var(--gold-d);font-size:1.2rem;margin-top:1.8rem;}
.section-contact .section-lead{margin-left:auto;margin-right:auto;}

/* ---- Footer ---- */
.foot{background:var(--paper2);padding:1.6rem 0;border-top:1px solid var(--line);}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem;}

/* ---- Hero-Extras: Tricolore, Badges, zweiter CTA ---- */
.tric{width:56px;height:4px;border-radius:2px;margin:0 auto 1.1rem;background:linear-gradient(90deg,#3d9268 0 33%,#f6f3ee 33% 66%,#cf5d55 66% 100%);box-shadow:0 1px 6px rgba(0,0,0,.35);}
.hero-badges{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0 1.9rem;}
.badge{background:rgba(255,253,248,.14);border:1px solid rgba(255,253,248,.4);color:#fff;padding:.42rem 1rem;border-radius:999px;font-size:.82rem;letter-spacing:.05em;text-shadow:0 1px 6px rgba(0,0,0,.4);backdrop-filter:blur(3px);}
.hero-ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;}
.btn-ghost{border-color:rgba(255,255,255,.85);color:#fff;background:rgba(255,255,255,.1);}
.btn-ghost:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);}

/* ---- Vertrauens-Zahlen + TV-Chips ---- */
.stats{background:linear-gradient(180deg,#fdfaf3,#f6f3ee);border-bottom:1px solid var(--line);padding:2.4rem 0 2.1rem;}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;}
@media(min-width:820px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat{text-align:center;}
.stat-n{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--gold-d);display:block;line-height:1.1;}
.stat-l{color:var(--muted);font-size:.85rem;display:block;margin-top:.25rem;line-height:1.35;}
.tv-line{text-align:center;margin-top:1.7rem;color:var(--muted);font-size:.85rem;}
.tv-line span{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.28rem .85rem;margin:.22rem .22rem;color:var(--ink);font-size:.8rem;letter-spacing:.04em;box-shadow:0 2px 8px rgba(90,75,50,.07);}

/* ---- Feinschliff: Überschriften-Linie, Karten-Hover ---- */
.section h2::after{content:'';display:block;width:46px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gold),#e8cd93);margin-top:.7rem;}
.section-contact h2::after{margin-left:auto;margin-right:auto;}
.video-card,.fact,.gal-item,.contact-card{transition:transform .22s ease,box-shadow .22s ease;}
.video-card:hover,.fact:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(90,75,50,.16);}
.gal-item:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(90,75,50,.18);}

/* ---- Sanftes Einblenden beim Scrollen ---- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.hero-scroll{animation:none;}}

/* ---- Lightbox (Overlay bleibt dunkel – Standard) ---- */
.lightbox{position:fixed;inset:0;background:rgba(20,17,12,.92);z-index:100;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.6);}
.lb-close{position:absolute;top:1rem;right:1.3rem;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1;}