/* ezSongs – gemeinsames Stylesheet
   Typo-Skala: 12 / 14 / 17 / 21 / 28 / 40 / 56 / 80
   Radien:     12 (klein) / 20 (Karte) / 980 (Pill)
   Abstände:   8-pt-Raster                                              */

:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --bg-elev:#ffffff;
  --text:#1d1d1f;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --line:rgba(0,0,0,0.10);
  --accent:#0071e3;
  --accent-hover:#0077ed;
  --gold:#a3801f;
  --nav-bg:rgba(255,255,255,0.72);
  --shadow:0 20px 60px -30px rgba(0,0,0,0.35);
  --r-s:12px; --r-m:20px; --r-pill:980px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --bg-alt:#161617; --bg-elev:#1d1d1f;
    --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#86868b;
    --line:rgba(255,255,255,0.14);
    --accent:#2997ff; --accent-hover:#3aa2ff;
    --gold:#e3c163;
    --nav-bg:rgba(0,0,0,0.72);
    --shadow:0 20px 60px -30px rgba(0,0,0,0.9);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --bg-alt:#161617; --bg-elev:#1d1d1f;
  --text:#f5f5f7; --text-2:#a1a1a6; --text-3:#86868b;
  --line:rgba(255,255,255,0.14);
  --accent:#2997ff; --accent-hover:#3aa2ff;
  --gold:#e3c163;
  --nav-bg:rgba(0,0,0,0.72);
  --shadow:0 20px 60px -30px rgba(0,0,0,0.9);
  color-scheme:dark;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
[id]{scroll-margin-top:52px;} /* Ankerziele unter der sticky Nav */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.47; letter-spacing:-0.022em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto; display:block;}
strong{font-weight:600;}
code{font-family:"SF Mono",Menlo,monospace; font-size:0.92em; background:var(--bg-alt); padding:2px 6px; border-radius:6px;}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-0.02em; line-height:1.1;}
p{margin:0 0 1em;}
.wrap{max-width:980px; margin:0 auto; padding:0 24px;}
.wrap-wide{max-width:1200px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:680px; margin:0 auto; padding:0 24px;}
.center{text-align:center;}
.t-2{color:var(--text-2);}

/* ---------- Typografie ---------- */
.display{font-size:clamp(40px,7vw,80px); line-height:1.02; letter-spacing:-0.03em; font-weight:700;}
.title-1{font-size:clamp(32px,5vw,56px); line-height:1.06; letter-spacing:-0.025em; font-weight:700;}
.title-2{font-size:clamp(28px,4vw,40px); line-height:1.1;}
.title-3{font-size:28px; line-height:1.14;}
.headline{font-size:21px; line-height:1.2;}
.body-l{font-size:clamp(19px,2.2vw,24px); line-height:1.35; letter-spacing:-0.015em;}
.caption{font-size:14px; color:var(--text-2); letter-spacing:-0.01em;}
.eyebrow{
  display:block; font-size:14px; font-weight:600; letter-spacing:0.01em;
  color:var(--gold); margin-bottom:12px; text-transform:none;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 22px; border-radius:var(--r-pill); font-size:17px; font-weight:400;
  background:var(--accent); color:#fff; border:none; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.btn:hover{background:var(--accent-hover); text-decoration:none;}
.btn-s{padding:6px 14px; font-size:14px;}
.link-arrow{font-size:17px; color:var(--accent);}
.link-arrow::after{content:" \203A"; font-weight:400;}
.link-arrow:hover{text-decoration:underline;}

/* ---------- Navigation ---------- */
.nav{position:sticky; top:0; z-index:100;}
.nav-bar{
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:980px; margin:0 auto; padding:0 24px; height:52px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-brand{display:flex; align-items:center; gap:9px; font-weight:600; font-size:17px; color:var(--text); letter-spacing:-0.02em;}
.nav-brand:hover{text-decoration:none;}
.nav-brand img{width:26px; height:26px;}
.nav-links{display:flex; align-items:center; align-self:stretch; gap:30px; font-size:14px;}
.nav-links > a, .nav-dropdown > a{color:var(--text); opacity:0.85; transition:opacity .15s;}
.nav-links > a:hover, .nav-dropdown > a:hover{opacity:1; text-decoration:none;}
.nav-right{display:flex; align-items:center; gap:8px;}
.nav-dropdown{position:relative; align-self:stretch; display:flex; align-items:center;}
.nav-dropdown > a{display:flex; align-items:center; gap:5px; height:100%; cursor:default;}
.nav-dropdown > a::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg); margin-top:-3px; opacity:0.55;
}
.dropdown-panel{
  display:none; position:fixed; left:0; right:0; top:52px;
  background:var(--nav-bg); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line); padding:40px 0 48px; z-index:200;
}
.nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel{display:block;}
.dropdown-grid{display:flex; flex-wrap:wrap; gap:32px 64px;}
.dd-col{min-width:160px;}
.dd-col-label{font-size:12px; color:var(--text-2); margin-bottom:12px;}
.dd-item{display:block; color:var(--text); padding:6px 0; font-size:14px; line-height:1.3;}
.dd-item:hover{color:var(--accent); text-decoration:none;}
.dd-item.current{color:var(--accent);}
.dd-item.dd-featured{font-size:21px; font-weight:600; padding:0 0 12px;}

.icon-btn{
  width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; opacity:0.85; font-size:12px; font-weight:600;
}
.icon-btn:hover{opacity:1; background:var(--bg-alt);}
.icon-btn svg{width:17px; height:17px;}
.lang-switch{position:relative; display:flex; align-items:center;}
.lang-panel{
  display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:150px;
  background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--shadow); padding:6px; z-index:250;
}
.lang-switch.open .lang-panel{display:block;}
.lang-opt{display:block; padding:8px 12px; border-radius:8px; color:var(--text); font-size:14px;}
.lang-opt:hover{background:var(--bg-alt); text-decoration:none;}
.lang-opt.current{color:var(--accent);}
.theme-toggle .icon-moon{display:none;}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none;}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block;}
@media (prefers-color-scheme:light){
  :root:not([data-theme]) .theme-toggle .icon-sun{display:none;}
  :root:not([data-theme]) .theme-toggle .icon-moon{display:block;}
}

/* Mobile-Menü */
.nav-burger-toggle{position:absolute; opacity:0; pointer-events:none;}
.nav-burger{display:none;}
.nav-burger .icon-close{display:none;}
.nav-burger-toggle:checked ~ .nav-bar .nav-burger .icon-open{display:none;}
.nav-burger-toggle:checked ~ .nav-bar .nav-burger .icon-close{display:block;}
.mobile-menu{display:none;}
@media (max-width:760px){
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-cta{display:none;}
  .mobile-menu{
    display:block; position:fixed; left:0; right:0; top:52px; bottom:0;
    background:var(--bg); overflow-y:auto; z-index:190;
    transform:translateY(-6px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .nav-burger-toggle:checked ~ .mobile-menu{transform:none; opacity:1; pointer-events:auto;}
}
.mobile-menu-inner{padding:8px 24px 60px;}
.mobile-menu a, .mobile-menu summary{
  display:block; padding:15px 0; font-size:17px; color:var(--text); border-bottom:1px solid var(--line);
}
.mobile-menu a:hover{text-decoration:none;}
.mobile-menu a.current{color:var(--accent);}
.mobile-menu details summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.mobile-menu details summary::-webkit-details-marker{display:none;}
.mobile-menu details summary::after{
  content:""; width:8px; height:8px; border-right:1.5px solid var(--text-2); border-bottom:1.5px solid var(--text-2);
  transform:rotate(45deg); margin-top:-4px;
}
.mobile-menu details[open] summary::after{transform:rotate(-135deg); margin-top:4px;}
.mobile-menu details[open] summary{border-bottom:none;}
.mobile-menu .mm-sublist{padding:0 0 12px 16px; border-bottom:1px solid var(--line);}
.mobile-menu .mm-sublist a{padding:10px 0; font-size:15px; color:var(--text-2); border-bottom:none;}
.mobile-menu .mm-cta{margin-top:24px; text-align:center; border-bottom:none;}

/* ---------- Hero (Startseite) ---------- */
.hero{padding:88px 0 0; text-align:center;}
.hero .display{max-width:900px; margin:0 auto 20px;}
.hero .body-l{max-width:640px; margin:0 auto 28px; color:var(--text-2);}
.hero-ctas{display:flex; gap:28px; justify-content:center; align-items:center; flex-wrap:wrap; margin-bottom:64px;}
.hero-media{max-width:1200px; margin:0 auto; padding:0 24px;}
.hero-media img{width:100%; border-radius:var(--r-m); box-shadow:var(--shadow);}
@media (max-width:760px){
  .hero{padding-top:56px;}
  .hero-ctas{margin-bottom:40px; gap:20px;}
  .hero-media img{border-radius:var(--r-s);}
}

/* ---------- Seitenkopf (Header-Grafik) ---------- */
/* hell: blaue Grafik randlos über die volle Breite; dunkel: transparente Grafik zentriert */
.masthead{text-align:center;}
.masthead img{display:block; width:100%; height:auto; margin:0 auto;}
.masthead .masthead-dark{display:none; max-width:1200px; padding:40px 24px 0;}
:root[data-theme="dark"] .masthead .masthead-light{display:none;}
:root[data-theme="dark"] .masthead .masthead-dark{display:block;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .masthead .masthead-light{display:none;}
  :root:not([data-theme]) .masthead .masthead-dark{display:block;}
}
.masthead + .hero{padding-top:56px;}
@media (max-width:760px){
  .masthead .masthead-dark{padding:24px 16px 0;}
  .masthead + .hero{padding-top:40px;}
}

/* ---------- Sektionen ---------- */
.section{padding:128px 0;}
.section-alt{background:var(--bg-alt);}
.section-head{text-align:center; max-width:720px; margin:0 auto 64px;}
.section-head .body-l{color:var(--text-2); margin-top:16px;}
@media (max-width:760px){ .section{padding:80px 0;} .section-head{margin-bottom:40px;} }

/* Showcase: Bild + Text im Wechsel */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:128px;}
.showcase:last-child{margin-bottom:0;}
.showcase.reverse .showcase-media{order:2;}
.showcase-media img{border-radius:var(--r-m); box-shadow:var(--shadow);}
.showcase-text .title-2{margin-bottom:16px;}
.showcase-text p{font-size:19px; color:var(--text-2); line-height:1.42;}
.showcase-text .link-arrow{display:inline-block; margin-top:8px;}
@media (max-width:860px){
  .showcase, .showcase.reverse{grid-template-columns:1fr; gap:32px; margin-bottom:80px;}
  .showcase.reverse .showcase-media{order:0;}
  .showcase-media img{border-radius:var(--r-s);}
}

/* Story (Ich-Perspektive) */
.story{max-width:760px; margin:0 auto; text-align:center;}
.story .body-l{color:var(--text); margin-bottom:24px;}
.story .signature{color:var(--text-2); font-size:17px;}

/* Kacheln (Features, Einstellungen, Preise) */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tiles-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:900px){ .tiles{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .tiles, .tiles-2{grid-template-columns:1fr;} }
.tile{
  background:var(--bg-alt); border-radius:var(--r-m); padding:32px 28px; color:var(--text);
  display:flex; flex-direction:column; transition:transform .2s;
}
.section-alt .tile{background:var(--bg-elev);}
a.tile:hover{text-decoration:none; transform:translateY(-2px);}
.tile .icon{width:36px; height:36px; color:var(--accent); margin-bottom:20px;}
.tile .icon svg{width:36px; height:36px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.tile h3{font-size:21px; margin-bottom:8px;}
.tile p{font-size:15px; color:var(--text-2); line-height:1.45; margin:0;}
.tile .link-arrow{margin-top:auto; padding-top:16px; font-size:15px;}

/* Preise */
.price{align-items:stretch;}
.price .tile{padding:36px 32px;}
.price .plan{font-size:21px; font-weight:600;}
.price .amount{font-size:40px; font-weight:700; letter-spacing:-0.03em; margin:16px 0 2px; line-height:1;}
.price .period{font-size:14px; color:var(--text-2); margin-bottom:24px;}
.price ul{list-style:none; margin:0; padding:0;}
.price li{font-size:15px; padding:8px 0; border-top:1px solid var(--line); color:var(--text);}
.price li:first-child{border-top:none;}
.price-note{text-align:center; font-size:14px; color:var(--text-2); margin-top:32px;}

/* Warteliste */
.waitlist{padding:96px 24px; text-align:center;}
.waitlist .title-1{margin-bottom:16px;}
.waitlist p{color:var(--text-2); font-size:19px; max-width:520px; margin:0 auto 32px;}
.waitlist-form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center;}
.waitlist-form input{
  flex:1; min-width:220px; padding:12px 18px; border-radius:var(--r-pill); font-size:17px;
  border:1px solid var(--line); background:var(--bg-elev); color:var(--text); font-family:inherit;
}
.waitlist-form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,113,227,0.25);}
.waitlist-note{font-size:12px; color:var(--text-3); margin-top:16px;}
.waitlist-success{display:none; font-size:17px; margin-top:8px;}

/* ---------- Unterseiten ---------- */
.page-hero{padding:72px 0 48px; text-align:center;}
.page-hero .title-1{margin:12px auto 16px; max-width:820px;}
.page-hero .body-l{color:var(--text-2); max-width:640px; margin:0 auto;}
.back-link{font-size:14px; color:var(--accent);}
.back-link::before{content:"\2039  ";}
@media (max-width:760px){ .page-hero{padding:48px 0 32px;} }

/* Fließtext (Einstellungen, Impressum, Datenschutz) */
.prose{max-width:680px; margin:0 auto; padding:0 24px 96px;}
.prose h2{font-size:28px; margin:56px 0 12px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:21px; margin:32px 0 8px;}
.prose p, .prose li{font-size:17px; line-height:1.5; color:var(--text);}
.prose p{margin:0 0 16px;}
.prose ul, .prose ol{padding-left:22px; margin:0 0 16px;}
.prose li{margin:4px 0;}
.prose img{margin:32px 0; border-radius:var(--r-s); border:1px solid var(--line);}
.prose hr{border:none; border-top:1px solid var(--line); margin:40px 0;}

/* Vor/Zurück am Seitenende */
.pager{max-width:680px; margin:0 auto; padding:0 24px 96px; display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line);}
.pager a{padding-top:20px; font-size:15px; max-width:48%;}
.pager .caption{display:block; margin-bottom:2px;}
.pager .next{margin-left:auto; text-align:right;}

/* Weiter gedacht: ruhige Bild-Text-Blöcke */
.story-block{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:112px;}
.story-block:last-child{margin-bottom:0;}
.story-block.reverse .story-media{order:2;}
.story-block.full{grid-template-columns:1fr; max-width:680px; margin-left:auto; margin-right:auto;}
.story-block h2{font-size:clamp(28px,3.5vw,40px); margin-bottom:16px;}
.story-block p{font-size:17px; color:var(--text-2); line-height:1.5;}
.story-block p:last-child{margin-bottom:0;}
.story-media{display:grid; gap:12px;}
.story-media img{border-radius:var(--r-s); border:1px solid var(--line);}
.story-media.gallery{grid-template-columns:1fr 1fr 1fr; gap:24px; margin-bottom:40px;}
@media (max-width:860px){ .story-media.gallery{grid-template-columns:1fr;} }
.story-media.gallery img{border:none;}
@media (max-width:860px){
  .story-block, .story-block.reverse{grid-template-columns:1fr; gap:28px; margin-bottom:72px;}
  .story-block.reverse .story-media{order:0;}
}
.story-intro{max-width:760px; margin:0 auto 96px; text-align:center;}
.story-intro p{font-size:clamp(19px,2.2vw,24px); line-height:1.35; color:var(--text);}

/* FAQ */
.faq-list{max-width:680px; margin:0 auto; padding:0 24px 96px;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer;
  font-size:19px; font-weight:600; padding:22px 0; margin:0;
}
.faq-q::after{content:"+"; font-size:24px; font-weight:300; color:var(--text-2); transition:transform .2s; flex-shrink:0;}
.faq-item.open .faq-q::after{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:17px; color:var(--text-2); line-height:1.5;}
.faq-item.open .faq-a{max-height:600px; padding-bottom:24px;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line); padding:32px 24px 48px; font-size:12px; color:var(--text-2);}
.footer-inner{max-width:980px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px;}
.footer a{color:var(--text-2); margin-right:20px;}
.footer a:hover{color:var(--text);}
.footer .foot-links a:last-child{margin-right:0;}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index:1000; cursor:zoom-out; padding:24px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%; max-height:100%; border-radius:var(--r-s);}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto;} }