/* Lyruma Website v2.51 – Typografie DSGVO-konform: keine externen Google-Font-Requests.
   Gewünscht: Überschriften Montserrat, Fließtext Open Sans.
   Fallbacks: Arial/Helvetica/sans-serif, falls lokale Fonts nicht verfügbar sind. */
@font-face{font-family:"Montserrat";src:local("Montserrat"),local("Montserrat Regular");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Open Sans";src:local("Open Sans"),local("Open Sans Regular");font-weight:300 800;font-style:normal;font-display:swap;}
:root{--font-heading:"Montserrat",Arial,Helvetica,sans-serif;--font-body:"Open Sans",Arial,Helvetica,sans-serif;}
:root{
  --bg:#070611;
  --panel:#13101f;
  --panel2:#191527;
  --text:#f7f3ff;
  --muted:#bdb3d7;
  --line:rgba(255,255,255,.11);
  --orange:#ff7a1a;
  --orange2:#ffb86b;
  --violet:#8a5cff;
  --pink:#ff4fd8;
  --green:#55e6a5;
  --shadow:0 24px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at top left,#231146 0,#090714 38%,#05050b 100%);line-height:1.45}
button,input,textarea,select{font:inherit}
.bg-glow{position:fixed;inset:auto;pointer-events:none;filter:blur(42px);opacity:.38;z-index:0}.bg-one{width:430px;height:430px;border-radius:999px;right:-120px;top:-80px;background:var(--orange)}.bg-two{width:520px;height:520px;border-radius:999px;left:-180px;bottom:10%;background:var(--violet)}
.app-shell{position:relative;z-index:1;width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 50px}.hero{border:1px solid var(--line);border-radius:30px;padding:26px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.04));box-shadow:var(--shadow);backdrop-filter:blur(18px);display:flex;justify-content:space-between;gap:24px;align-items:center}.brand-row{display:flex;align-items:center;gap:20px}.brand-logo{width:88px;height:88px;border-radius:24px;object-fit:cover;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 50px rgba(0,0,0,.5)}.eyebrow{color:var(--orange2);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px}h1{font-size:clamp(34px,6vw,64px);line-height:.95;margin:4px 0 8px;letter-spacing:-.06em}.subtitle{margin:0;color:var(--muted);max-width:720px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.grid{display:grid;gap:18px;margin-top:18px}.grid.two{grid-template-columns:1fr 1fr}.card{border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:0 18px 55px rgba(0,0,0,.28);padding:22px;backdrop-filter:blur(14px)}.wide{margin-top:18px}.section-title{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.section-title h2{margin:0 0 4px;font-size:22px;letter-spacing:-.02em}.section-title p{margin:0;color:var(--muted)}.step{display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--orange),var(--pink));font-weight:900;color:#160a0c;box-shadow:0 10px 28px rgba(255,122,26,.26)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.small-gap{gap:10px;margin-top:12px}label{display:flex;flex-direction:column;gap:7px;color:#eee8ff;font-size:13px;font-weight:700}input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(8,7,18,.7);color:var(--text);border-radius:16px;padding:13px 14px;outline:none}input:focus,select:focus,textarea:focus{border-color:rgba(255,122,26,.8);box-shadow:0 0 0 4px rgba(255,122,26,.13)}select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 54%,calc(100% - 12px) 54%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}.btn{border:0;border-radius:999px;padding:12px 16px;font-weight:900;cursor:pointer;color:var(--text);background:#2a223e;transition:transform .12s ease,filter .12s ease,background .12s ease}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn:active{transform:translateY(0)}.primary{background:linear-gradient(135deg,var(--orange),var(--pink));color:#15060a}.secondary{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}.ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}.toolbar{display:flex;gap:10px;align-items:center}.wrap{flex-wrap:wrap}.toolbar select{width:auto;min-width:220px}.details-box{margin-top:14px;border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:13px;background:rgba(0,0,0,.16)}.details-box summary{cursor:pointer;color:var(--orange2);font-weight:900}.audio-box{margin-top:14px;display:grid;gap:10px}.file-label input{padding:12px;background:rgba(255,255,255,.06)}.status{border:1px dashed rgba(255,255,255,.16);border-radius:16px;padding:12px;color:var(--muted);background:rgba(0,0,0,.16);font-size:13px}.lyrics{min-height:390px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:15px;line-height:1.55}.sheet{min-height:420px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:15px;line-height:1.6;background:#0a0913}.hidden{display:none!important}.preview-card{overflow:auto}.print-page{width:min(820px,100%);min-height:520px;margin:0 auto;background:#fff;color:#111;border-radius:6px;padding:34px;box-shadow:0 30px 90px rgba(0,0,0,.35);font-family:Arial,Helvetica,sans-serif}.print-head{display:flex;align-items:flex-start;gap:18px;border-bottom:2px solid #111;padding-bottom:14px;margin-bottom:16px}.print-logo{width:90px;height:70px;object-fit:contain;border-radius:10px}.print-title{font-size:28px;font-weight:900;line-height:1.05;margin:0}.print-meta{display:block;font-size:12px;margin-top:8px}.meta-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:5px}.meta-credits{font-weight:600}.meta-music{border-top:1px solid #ddd;padding-top:5px}.print-body{white-space:pre-wrap;font-family:"Courier New",Courier,monospace;font-size:13.5px;line-height:1.42}.print-section{font-weight:900;margin-top:10px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#111;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:12px 18px;box-shadow:0 18px 60px rgba(0,0,0,.45);z-index:10}.toast.ok{border-color:rgba(85,230,165,.65)}.toast.warn{border-color:rgba(255,122,26,.75)}
@media (max-width:860px){.app-shell{width:min(100% - 18px,1180px);padding-top:12px}.hero{align-items:flex-start;flex-direction:column;border-radius:22px;padding:18px}.brand-row{align-items:flex-start}.brand-logo{width:64px;height:64px;border-radius:18px}.hero-actions{justify-content:flex-start}.grid.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.toolbar select{width:100%;min-width:0}.btn{width:100%;justify-content:center}.section-title{gap:10px}.lyrics,.sheet{min-height:320px;font-size:14px}.print-page{padding:22px}.print-head{gap:12px}.print-logo{width:54px;height:54px}.print-title{font-size:22px}.meta-row{gap:4px 10px}.print-body{font-size:12px}}
@media print{body{background:#fff}.bg-glow,.app-shell>*:not(.preview-card),.preview-card .section-title{display:none!important}.app-shell{width:100%;padding:0}.preview-card{display:block!important;border:0;box-shadow:none;background:#fff;padding:0}.print-page{box-shadow:none;border-radius:0;width:100%;min-height:auto;padding:0}.print-body{font-size:11.5pt}.print-title{font-size:20pt}}

.version-badge{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;padding:7px 12px;border-radius:999px;font-size:clamp(13px,1.5vw,18px);letter-spacing:.02em;background:linear-gradient(135deg,rgba(255,122,34,.22),rgba(146,77,255,.22));border:1px solid rgba(255,255,255,.18);color:#ffd19b;box-shadow:0 10px 30px rgba(0,0,0,.2)}

.logo-upload-box{grid-column:1/-1;margin-top:6px;border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:14px;background:rgba(0,0,0,.15)}
.logo-help{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.45}
.logo-preview-row{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sheet-logo-preview{min-height:72px;min-width:220px;display:flex;align-items:center;gap:12px;border:1px dashed rgba(255,255,255,.18);border-radius:16px;padding:10px 12px;color:var(--muted);background:rgba(255,255,255,.045);font-size:12px}
.sheet-logo-preview img{max-width:150px;max-height:56px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.94);padding:5px}
.sheet-logo-preview.empty{justify-content:center}
.small-btn{width:auto!important;padding:10px 14px;font-size:13px}

.logo-upload-box{margin-top:18px;padding:14px;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.045);display:grid;gap:12px}
.logo-upload-box p{margin:.35rem 0 0;color:var(--muted,#b9b3c9);font-size:.92rem;line-height:1.4}
.small-file{display:block}
.sheet-logo-preview{min-height:74px;border:1px dashed rgba(255,255,255,.22);border-radius:16px;display:flex;align-items:center;gap:12px;padding:10px;color:var(--muted,#b9b3c9);background:rgba(0,0,0,.12)}
.sheet-logo-preview img{max-width:150px;max-height:58px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
.sheet-logo-preview.empty{justify-content:center;font-style:italic}
.check-row{display:flex!important;align-items:flex-start;gap:10px;margin:12px 0;color:var(--text,#fff);font-size:.94rem;line-height:1.35}
.check-row input{width:auto!important;margin-top:3px;accent-color:#ff7a18}

.live-clock{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);font-size:13px;font-weight:800}
.clock-label{color:var(--orange2);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
#currentClock{font-variant-numeric:tabular-nums;color:#fff}
#currentDate{font-variant-numeric:tabular-nums;color:var(--muted)}
@media (max-width:860px){.live-clock{width:100%;justify-content:center;flex-wrap:wrap;border-radius:16px}}

.checkline{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:12px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.05);font-size:.93rem;color:var(--text)}
.checkline input{width:auto;margin-top:3px;accent-color:#ff7a18}

/* Lyruma v13.46 – eigener Lead-Sheet-Logo-Upload */
.logo-upload-box{margin-top:16px;border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:14px;background:rgba(0,0,0,.16)}
.logo-help{margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.45}
.logo-preview-row{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sheet-logo-preview{min-height:74px;min-width:220px;display:flex;align-items:center;gap:12px;border:1px dashed rgba(255,255,255,.22);border-radius:16px;padding:10px 12px;color:var(--muted);background:rgba(255,255,255,.045);font-size:12px}
.sheet-logo-preview img{max-width:150px;max-height:58px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
.sheet-logo-preview.empty{justify-content:center;font-style:italic}


/* Lyruma Website v2.51 – App-Responsivität / klare Schrift */
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body,input,select,textarea,button{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;}
h1,h2,h3,.print-title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;}
input,select,textarea{font-size:16px;}
@media(max-width:1120px){.grid.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr 1fr}.hero{align-items:flex-start}.hero-actions{justify-content:flex-start}}
@media(max-width:760px){.app-shell{width:min(100% - 18px,1180px);padding:14px 0 34px}.hero{border-radius:22px;padding:16px;display:block}.brand-row{align-items:flex-start;gap:12px}.brand-logo{width:58px;height:58px;border-radius:16px}h1{font-size:clamp(30px,11vw,44px);line-height:1.04;letter-spacing:-.04em}.subtitle{font-size:15.5px;line-height:1.5}.hero-actions{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px}.hero-actions .btn,.toolbar .btn,.btn{width:100%;justify-content:center}.grid{gap:14px;margin-top:14px}.card{border-radius:22px;padding:16px}.section-title h2{font-size:20px}.section-title p{font-size:14.5px}.form-grid{grid-template-columns:1fr}.toolbar{display:grid;grid-template-columns:1fr;width:100%}.toolbar select{width:100%;min-width:0}.lyrics,.sheet{min-height:300px;font-size:14px;line-height:1.55}.print-page{padding:18px;overflow:auto}.print-head{flex-direction:column}.print-logo{width:100%;max-width:160px;height:58px}.print-title{font-size:24px}.print-body{font-size:12.5px;line-height:1.45}.live-clock{width:100%;justify-content:center;flex-wrap:wrap;border-radius:16px}}

/* Lyruma v13.46 – responsive App-Layout und kleinere App-Überschrift */
html{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
.app-shell{width:min(1180px,calc(100% - 32px));padding:22px 0 46px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:22px;border-radius:26px}
.brand-row{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px}
.brand-row>div{min-width:0}.brand-logo{width:72px;height:72px;border-radius:20px;flex:0 0 auto}
h1{font-size:clamp(28px,4.4vw,50px);line-height:1.02;letter-spacing:-.045em;overflow-wrap:anywhere}.version-badge{margin-left:8px;padding:6px 10px;font-size:clamp(12px,1.2vw,15px)}.subtitle{font-size:clamp(14px,1.6vw,16px);line-height:1.5}.hero-actions{justify-content:flex-end;align-content:center}.hero-actions .btn{white-space:nowrap}.card{min-width:0}.grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{min-width:0}.toolbar>*{max-width:100%}textarea,input,select,button{font-size:16px}.lyrics,.sheet{width:100%;max-width:100%;font-size:15px;line-height:1.58}.print-page{max-width:100%;overflow:hidden}.print-body{overflow-wrap:anywhere;word-break:normal}.live-clock{max-width:100%;flex-wrap:wrap}.section-title h2{font-size:clamp(20px,2.3vw,24px)}
@media (max-width: 980px){
  .app-shell{width:min(100% - 24px,1180px);padding-top:14px}
  .hero{grid-template-columns:1fr;align-items:start;gap:16px;padding:18px;border-radius:22px}
  .hero-actions{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;justify-content:stretch}
  .hero-actions .btn{width:100%;white-space:normal;padding-left:12px;padding-right:12px}
  .grid.two{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.card{border-radius:22px;padding:18px}.section-title{align-items:flex-start}.toolbar{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.toolbar select{width:100%;min-width:0}.toolbar .btn{width:100%}.details-box .form-grid{grid-template-columns:1fr}.print-title{font-size:24px}.print-body{font-size:12.5px}
}
@media (max-width: 640px){
  .app-shell{width:min(100% - 18px,1180px);padding:10px 0 34px}.hero{padding:15px;border-radius:20px}.brand-row{grid-template-columns:1fr;gap:12px}.brand-logo{width:54px;height:54px;border-radius:15px}h1{font-size:clamp(24px,9vw,34px);line-height:1.05;letter-spacing:-.035em}.version-badge{display:inline-flex;margin-left:0;margin-top:7px;vertical-align:middle}.eyebrow{font-size:10.5px;letter-spacing:.06em}.subtitle{font-size:14px}.live-clock{border-radius:14px;justify-content:flex-start;font-size:12px;gap:7px}.hero-actions{grid-template-columns:1fr}.card{padding:15px;border-radius:20px}.section-title{gap:10px}.step{width:30px;height:30px;border-radius:10px;font-size:14px}.section-title h2{font-size:20px}.section-title p,label,.status,.logo-help{font-size:13px}.toolbar{grid-template-columns:1fr}.btn{width:100%;min-height:44px}.lyrics,.sheet{min-height:270px;font-size:13.5px;line-height:1.55;padding:12px}.print-page{padding:18px;border-radius:4px}.print-head{display:block}.print-logo{width:70px;height:52px;margin-bottom:10px}.print-title{font-size:21px}.meta-row{display:block}.print-body{font-size:11.5px;line-height:1.35}.sheet-logo-preview{min-width:0;width:100%}.sheet-logo-preview img{max-width:132px;max-height:52px}
}
@media (max-width: 380px){h1{font-size:23px}.card{padding:13px}.lyrics,.sheet{font-size:13px}.print-body{font-size:11px}.brand-logo{width:48px;height:48px}}

/* v12.4 access and feature gating */
.access-panel{
  margin-top:16px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.06);
  color:#f8f7ff;
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  align-items:center;
}
.access-panel strong{color:#fff}
.access-panel span{color:#cfc8ff;font-size:.95rem}
.feature-locked{opacity:.45; pointer-events:none}
@media(max-width:700px){.access-panel{font-size:.92rem;align-items:flex-start;flex-direction:column}}

/* v12.4 Website integration menu */
.app-site-menu{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 18px}.app-site-menu a,.app-site-menu button{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;padding:9px 13px;border-radius:999px;text-decoration:none;font-weight:700;cursor:pointer;font-size:.92rem}.app-site-menu a:hover,.app-site-menu button:hover{background:rgba(255,255,255,.14)}


/* v12.4: kompaktes App-Menü oben rechts */
.app-topline{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-bottom:10px;
}
.app-site-menu.compact{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:6px 14px;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.app-site-menu.compact a,
.app-site-menu.compact button{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  color:#ffb15a;
  font:inherit;
  font-size:0.9rem;
  line-height:1.3;
  text-decoration:none;
  cursor:pointer;
}
.app-site-menu.compact a:hover,
.app-site-menu.compact button:hover{
  color:#ffd29a;
  text-decoration:underline;
}
@media (max-width: 680px){
  .app-topline{ justify-content:flex-start; }
  .app-site-menu.compact{ justify-content:flex-start; gap:6px 12px; }
  .app-site-menu.compact a,
  .app-site-menu.compact button{ font-size:0.86rem; }
}


/* v12.5 – klarere App-Schrift, schlankes Menü und sauberer Druckkopf */
body,input,select,textarea,button{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-weight:850;
  letter-spacing:-0.025em !important;
  color:#ffffff;
  text-shadow:none !important;
  filter:none !important;
}
.version-badge{font-weight:800;letter-spacing:0 !important;}
.hero{position:relative;}
.app-topline{
  grid-column:1 / -1 !important;
  width:100%;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;
}
.app-site-menu.compact{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-end !important;
  align-items:center;
  gap:6px 14px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.app-site-menu.compact a,
.app-site-menu.compact button{
  display:inline !important;
  width:auto !important;
  min-height:0 !important;
  appearance:none;
  border:0 !important;
  background:transparent !important;
  color:#ff9f43 !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  font:inherit !important;
  font-size:0.9rem !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  text-decoration:none !important;
  cursor:pointer;
  box-shadow:none !important;
  transform:none !important;
}
.app-site-menu.compact a:hover,
.app-site-menu.compact button:hover{color:#ffd09a !important;text-decoration:underline !important;}
@media(max-width:680px){
  .app-topline{justify-content:flex-end !important;margin-bottom:10px !important;}
  .app-site-menu.compact{gap:5px 10px !important;}
  .app-site-menu.compact a,.app-site-menu.compact button{font-size:0.82rem !important;}
}
@media print{
  .print-meta{display:block !important;}
  .meta-row{display:flex !important;flex-wrap:wrap !important;gap:3mm 7mm !important;margin:1.5mm 0 0 0 !important;break-inside:avoid;}
  .meta-row span{display:inline-block !important;white-space:nowrap !important;line-height:1.25 !important;}
  .meta-music{border-top:0.2mm solid #ddd !important;padding-top:1.5mm !important;}
}


/* v13.7 – Menü oben rechts, ohne Header-Layout zu verschieben */
.hero{position:relative !important;}
.app-topline{
  position:absolute !important;
  top:18px !important;
  right:22px !important;
  z-index:5 !important;
  width:auto !important;
  max-width:calc(100% - 44px) !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  grid-column:auto !important;
}
.app-site-menu.compact{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:7px 13px !important;
  white-space:nowrap !important;
}
.app-site-menu.compact a,
.app-site-menu.compact button{
  color:#ff9f43 !important;
  font-size:0.88rem !important;
  font-weight:800 !important;
}
.app-site-menu.compact button{font-family:inherit !important;}
@media(max-width:780px){
  .app-topline{top:14px !important;right:16px !important;max-width:calc(100% - 32px) !important;}
  .app-site-menu.compact{gap:5px 10px !important;white-space:normal !important;}
  .app-site-menu.compact a,.app-site-menu.compact button{font-size:0.80rem !important;}
}


/* Lyruma v13.46 – gesperrte Abo-Funktionen sichtbar lassen */
.feature-locked{
  opacity:1 !important;
  pointer-events:auto !important;
  border-color:rgba(255,159,67,.38) !important;
  background:rgba(255,159,67,.055) !important;
}
.feature-locked input,
.feature-locked select,
.feature-locked textarea,
.feature-locked button{
  opacity:.58;
}
.feature-lock-note{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid rgba(255,159,67,.35);
  border-radius:14px;
  color:#ffd09a;
  background:rgba(255,159,67,.08);
  font-weight:800;
  font-size:.9rem;
}
.app-site-menu.compact a,.app-site-menu.compact button{
  color:#ff9f43 !important;
}

/* Lyruma v13.46 – Header sauber: Menü/Uhrzeit rechts, Buttons unten bündig */
.hero{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:18px !important;
  padding-top:28px !important;
}
.brand-row{
  width:100% !important;
  padding-right:360px !important;
}
.app-topline{
  position:absolute !important;
  top:20px !important;
  right:24px !important;
  z-index:6 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:8px !important;
  width:auto !important;
  max-width:360px !important;
  margin:0 !important;
  padding:0 !important;
}
.app-site-menu.compact{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px 12px !important;
  white-space:normal !important;
}
.app-topline .live-clock{
  margin:0 !important;
  align-self:flex-end !important;
  justify-content:flex-end !important;
  width:auto !important;
  max-width:100% !important;
  font-size:12px !important;
  padding:7px 10px !important;
}
.header-controls-row{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
  margin-top:2px !important;
}
.header-controls-row .access-panel{
  margin:0 !important;
  flex:1 1 300px !important;
  min-height:46px !important;
}
.header-controls-row .hero-actions{
  margin:0 !important;
  flex:0 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.header-controls-row .hero-actions .btn{
  width:auto !important;
  min-height:44px !important;
  white-space:nowrap !important;
}
@media(max-width:980px){
  .hero{padding-top:92px !important;}
  .brand-row{padding-right:0 !important;}
  .app-topline{left:18px !important;right:18px !important;top:16px !important;max-width:none !important;align-items:flex-end !important;}
}
@media(max-width:760px){
  .hero{padding-top:104px !important;}
  .header-controls-row{display:grid !important;grid-template-columns:1fr !important;}
  .header-controls-row .hero-actions{display:grid !important;grid-template-columns:1fr !important;width:100% !important;}
  .header-controls-row .hero-actions .btn{width:100% !important;}
  .app-topline .live-clock{align-self:stretch !important;justify-content:center !important;}
}


/* Lyruma v13.46 – finaler Header: Menü rechts oben, Uhr darunter, Zugang + Buttons klar unten */
.hero{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;
  padding:26px !important;
  padding-top:28px !important;
  min-height:190px !important;
}
.brand-row{
  width:100% !important;
  padding-right:430px !important;
  min-height:96px !important;
  align-items:center !important;
}
.app-topline{
  position:absolute !important;
  top:22px !important;
  right:26px !important;
  z-index:10 !important;
  width:410px !important;
  max-width:calc(100% - 52px) !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:10px !important;
}
.app-site-menu.compact{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px 13px !important;
  line-height:1.25 !important;
  white-space:normal !important;
}
.app-topline .live-clock{
  margin:0 !important;
  width:auto !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
  border-radius:999px !important;
  padding:8px 11px !important;
  font-size:12px !important;
  white-space:nowrap !important;
}
.header-controls-row{
  width:100% !important;
  margin-top:18px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  flex-wrap:nowrap !important;
}
.header-controls-row .access-panel{
  margin:0 !important;
  flex:0 0 280px !important;
  min-width:250px !important;
  max-width:330px !important;
  min-height:46px !important;
  justify-content:center !important;
  text-align:center !important;
  padding:10px 13px !important;
}
.header-controls-row .hero-actions{
  margin:0 !important;
  flex:1 1 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(160px,1fr)) !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
}
.header-controls-row .hero-actions .btn{
  width:100% !important;
  min-height:46px !important;
  white-space:nowrap !important;
  padding-left:14px !important;
  padding-right:14px !important;
}
.header-controls-row .hero-actions input.hidden{display:none !important;}

/* Lyruma v13.46 – App-Footer passend zur Website */
.app-footer{
  margin-top:26px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  box-shadow:0 18px 55px rgba(0,0,0,.24);
  padding:22px;
  color:var(--muted);
  backdrop-filter:blur(14px);
}
.app-footer-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr .9fr;
  gap:22px;
  align-items:start;
}
.app-footer h4{margin:0 0 9px;color:#fff;font-size:15px;letter-spacing:.01em}
.app-footer p{margin:0 0 7px;color:var(--muted);font-size:13px;line-height:1.45}
.app-footer a{display:block;color:#d7cff2;text-decoration:none;margin:5px 0;font-size:13px;font-weight:700}
.app-footer a:hover{color:#ffb86b;text-decoration:underline}
.app-footer-brand{display:flex;gap:14px;align-items:flex-start}
.app-footer-brand img{width:54px;height:54px;border-radius:15px;object-fit:cover;border:1px solid rgba(255,255,255,.16)}
.app-footer-bottom{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#bfb7d9}
@media(max-width:1060px){
  .brand-row{padding-right:0 !important; padding-top:76px !important; min-height:0 !important;}
  .app-topline{left:22px !important;right:22px !important;top:18px !important;width:auto !important;max-width:none !important;align-items:flex-end !important;}
  .header-controls-row{flex-wrap:wrap !important;}
  .header-controls-row .access-panel{flex:1 1 100% !important;max-width:none !important;}
  .header-controls-row .hero-actions{grid-template-columns:repeat(3,minmax(130px,1fr)) !important;width:100% !important;}
}
@media(max-width:760px){
  .hero{padding:18px !important;padding-top:118px !important;border-radius:22px !important;}
  .brand-row{padding-top:0 !important;}
  .app-topline{top:16px !important;left:18px !important;right:18px !important;align-items:flex-start !important;}
  .app-site-menu.compact{justify-content:flex-start !important;gap:5px 10px !important;}
  .app-topline .live-clock{align-self:stretch !important;justify-content:center !important;border-radius:16px !important;flex-wrap:wrap !important;white-space:normal !important;}
  .header-controls-row{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;margin-top:14px !important;}
  .header-controls-row .access-panel{min-width:0 !important;width:100% !important;}
  .header-controls-row .hero-actions{display:grid !important;grid-template-columns:1fr !important;gap:10px !important;}
  .header-controls-row .hero-actions .btn{width:100% !important;}
  .app-footer-grid{grid-template-columns:1fr !important;gap:16px !important;}
}

/* Lyruma v13.46 – Footer klein, flach und über die Breite verteilt */
.app-footer.compact-footer{
  margin-top:22px !important;
  padding:12px 16px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.045) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(12px) !important;
}
.app-footer.compact-footer .app-footer-line{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
.footer-brand-mini{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  min-width:220px !important;
  color:#f5f0ff !important;
  font-size:12.5px !important;
  line-height:1.25 !important;
}
.footer-brand-mini strong{font-size:13px !important;color:#fff !important;white-space:nowrap !important;}
.footer-brand-mini span:not(.footer-dot){color:#bfb7d9 !important;white-space:nowrap !important;}
.footer-dot{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  color:#fff !important;
  background:linear-gradient(135deg,#ff7a1a,#8b42ff) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.25) !important;
}
.footer-links{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px 14px !important;
  flex:1 1 440px !important;
  flex-wrap:wrap !important;
}
.app-footer.compact-footer a{
  display:inline-flex !important;
  align-items:center !important;
  margin:0 !important;
  color:#d8d0f5 !important;
  text-decoration:none !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.app-footer.compact-footer a:hover{color:#ffb86b !important;text-decoration:underline !important;}
.footer-contact{
  flex:0 0 auto !important;
  color:#ffb86b !important;
}
.app-footer.compact-footer .app-footer-bottom{
  margin-top:10px !important;
  padding-top:9px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  display:flex !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  font-size:11.5px !important;
  color:#aFA7c8 !important;
}
@media(max-width:760px){
  .app-footer.compact-footer{padding:12px !important;border-radius:16px !important;}
  .app-footer.compact-footer .app-footer-line{align-items:flex-start !important;}
  .footer-brand-mini{width:100% !important;min-width:0 !important;flex-wrap:wrap !important;}
  .footer-brand-mini span:not(.footer-dot){white-space:normal !important;}
  .footer-links{justify-content:flex-start !important;flex:1 1 100% !important;gap:8px 12px !important;}
  .footer-contact{width:100% !important;}
}


/* Lyruma v13.46 – Studio-STEM-Upload nur im Studio-Abo */
.studio-stems-box{margin-top:14px;padding:14px;border:1px solid rgba(212,178,85,.35);border-radius:18px;background:rgba(255,255,255,.045)}
.studio-stems-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.studio-stems-head strong{color:#f6d57c;font-size:1rem}
.studio-stems-head span{color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.35}
.studio-stems-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.studio-stems-grid label{font-size:.9rem}
.studio-stems-grid input[type=file]{margin-top:6px;width:100%;font-size:.82rem}
@media(max-width:760px){.studio-stems-grid{grid-template-columns:1fr}}

/* Lyruma App v13.46 / Website v2.51 – einheitliche Typografie */
body,input,select,textarea,button,.lyrics,.sheet,.print-page,.print-body{font-family:var(--font-body)!important;}
h1,h2,h3,h4,h5,h6,.section-title h2,.print-title,.btn,.brand-row h1,.version-badge{font-family:var(--font-heading)!important;}
h1{font-weight:800;letter-spacing:-.035em;}
.print-body,.sheet,.lyrics{line-height:1.55;}
@media(max-width:760px){body{font-size:15.5px}h1{font-size:clamp(28px,9vw,42px);line-height:1.05}.lyrics,.sheet{font-size:14.5px}}


/* Lyruma Website v2.51 – Roobert/Suno-inspirierte Typografie und Typewriter-Hero.
   Datenschutzkonform: keine externen Font-Requests, nur lokale/System-Fonts mit Fallbacks. */
:root{
  --font-suno-heading:"Roobert","Inter Tight","Inter","SF Pro Display","Avenir Next","Segoe UI",Arial,Helvetica,sans-serif;
  --font-suno-body:"Roobert","Inter","SF Pro Text","Avenir Next","Segoe UI",Arial,Helvetica,sans-serif;
}
html{font-size:16px;}
body,input,select,textarea,button{
  font-family:var(--font-suno-body) !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,.brand strong,.btn,.eyebrow,.price,.badge,.section-head h2,.hero h1,.cta h2,.legal-box h1,.auth-panel h1,.auth-panel h2,.price-card h3,.faq summary{
  font-family:var(--font-suno-heading) !important;
}
.hero h1{
  font-weight:560 !important;
  letter-spacing:-0.044em !important;
  line-height:0.98 !important;
  max-width:780px;
  text-shadow:0 8px 34px rgba(0,0,0,.16);
}
.typewriter-title{
  min-height:calc(1em * 3);
}
.typewriter-title::after{
  content:"";
  display:inline-block;
  width:.08em;
  height:.86em;
  margin-left:.08em;
  transform:translateY(.08em);
  background:linear-gradient(180deg,#ffd36a,#ff7a45);
  border-radius:999px;
  animation:lss-caret 850ms steps(1) infinite;
}
.typewriter-title.typewriter-done::after{
  opacity:.7;
  animation:lss-caret 1200ms steps(1) 3;
}
@keyframes lss-caret{50%{opacity:0}}
@media(max-width:760px){
  html{font-size:15.5px;}
  .hero h1{
    font-size:clamp(32px,9.6vw,48px) !important;
    line-height:1.04 !important;
    letter-spacing:-0.04em !important;
    font-weight:560 !important;
  }
  .typewriter-title{min-height:calc(1em * 4);}
}
@media(prefers-reduced-motion:reduce){
  .typewriter-title::after{display:none;}
}


/* Lyruma Website v2.51 – einheitliche, ruhigere Roobert-inspirierte Überschriften.
   Keine externen Font-Requests. Fallbacks bleiben websafe. */
:root{
  --font-suno-heading:"Roobert","Inter Tight","Inter","SF Pro Display","Avenir Next","Segoe UI",Arial,Helvetica,sans-serif;
  --font-suno-body:"Roobert","Inter","SF Pro Text","Avenir Next","Segoe UI",Arial,Helvetica,sans-serif;
}
h1,h2,h3,h4,h5,h6,
.hero h1,.section-head h2,.cta h2,.legal-box h1,.legal-page h1,
.auth-panel h1,.auth-panel h2,.card h3,.price-card h3,.faq summary,
.brand strong,.price,.eyebrow,.badge{
  font-family:var(--font-suno-heading) !important;
  font-weight:560 !important;
  letter-spacing:-0.035em !important;
  line-height:1.08 !important;
}
.hero h1{
  font-weight:540 !important;
  letter-spacing:-0.042em !important;
  line-height:1.01 !important;
  max-width:800px;
}
.section-head h2,.cta h2,.legal-page h1,.legal-box h1{
  font-weight:550 !important;
}
.card h3,.price-card h3,.footer h4,.flow-step strong,.auth-panel h2{
  font-weight:600 !important;
  letter-spacing:-0.025em !important;
}
body,p,a,li,span,small,label,input,select,textarea,button,.lead,.muted,.card p,.footer p,.footer a{
  font-family:var(--font-suno-body) !important;
}
.typewriter-title{min-height:calc(1em * 3);}
.typewriter-title::after{
  content:"";
  display:inline-block;
  width:.075em;
  height:.82em;
  margin-left:.08em;
  transform:translateY(.08em);
  background:linear-gradient(180deg,#ffd36a,#ff7a45);
  border-radius:999px;
  animation:lss-caret 850ms steps(1) infinite;
}
.typewriter-title.typewriter-done::after{opacity:1;animation:lss-caret 850ms steps(1) infinite;}
@keyframes lss-caret{50%{opacity:0}}
@media(max-width:760px){
  .hero h1{font-size:clamp(32px,9.2vw,48px) !important;line-height:1.05 !important;font-weight:540 !important;letter-spacing:-0.038em !important;}
  .section-head h2,.cta h2,.legal-page h1,.legal-box h1{font-size:clamp(27px,7.8vw,40px) !important;line-height:1.12 !important;}
  .typewriter-title{min-height:calc(1em * 4);}
}
@media(prefers-reduced-motion:reduce){.typewriter-title::after{display:none;}}


/* v2.29 / App v13.46 – dreispaltiges Studio-Layout */
body.studio-app-layout{background:#0d0d11!important;color:#f7f5ff;overflow:hidden}.studio-app-frame{height:100vh;display:grid;grid-template-columns:260px minmax(420px,1fr) minmax(390px,520px);background:#0d0d11}.studio-sidebar{border-right:1px solid rgba(255,255,255,.10);padding:28px 22px;display:flex;flex-direction:column;gap:24px;min-height:0;background:#111116}.sidebar-brand{display:flex;gap:13px;align-items:center}.sidebar-brand img{width:56px;height:56px;border-radius:16px}.sidebar-profile-menu{position:relative}.sidebar-name{border:0;background:transparent;color:#fff;font-weight:850;padding:0;font-size:16px;cursor:pointer}.sidebar-profile-menu small{display:block;color:#8f8b9a;margin-top:2px}.sidebar-dropdown{display:none;position:absolute;top:42px;left:0;min-width:190px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#1b1b22;box-shadow:0 20px 80px rgba(0,0,0,.55);z-index:20}.sidebar-profile-menu.open .sidebar-dropdown{display:grid}.sidebar-dropdown a,.sidebar-dropdown button{color:#fff;text-decoration:none;background:transparent;border:0;text-align:left;padding:10px;border-radius:10px;font-weight:700}.sidebar-dropdown a:hover,.sidebar-dropdown button:hover{background:rgba(255,255,255,.08)}.upgrade-pill{display:block;text-align:center;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fff;text-decoration:none;padding:12px 16px;font-weight:850;background:rgba(255,255,255,.05)}.sidebar-menu{display:grid;gap:6px}.sidebar-menu a{color:#aaa6b8;text-decoration:none;padding:12px 13px;border-radius:14px;font-weight:760}.sidebar-menu a:hover,.sidebar-menu a.active{color:#fff;background:rgba(255,255,255,.08)}.sidebar-legal{margin-top:auto;display:grid;gap:8px}.sidebar-legal a{color:#aaa6b8;text-decoration:none;font-size:13px}.sidebar-legal span{color:#686371;font-size:12px;margin-top:10px}.studio-main-column,.studio-preview-column{min-height:0;overflow:auto}.studio-main-column{padding:28px 28px 80px}.studio-preview-column{border-left:1px solid rgba(255,255,255,.10);padding:28px 22px 80px;background:#101015}.studio-preview-sticky{position:sticky;top:24px;display:grid;gap:18px}.studio-app-head{display:grid;gap:18px;margin-bottom:20px}.studio-app-head h1{font-size:clamp(38px,5vw,66px);font-weight:560!important;letter-spacing:-.065em!important;margin:0}.studio-head-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.studio-head-actions .access-panel{margin:0;flex:1 1 260px}.studio-head-actions .btn{width:auto!important;white-space:nowrap}.studio-editor-stack{display:grid;gap:18px}.studio-app-layout .card{margin:0!important;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);box-shadow:none}.studio-app-layout .grid.two{display:block;margin:0}.studio-app-layout .wide{margin-top:0}.studio-app-layout .section-title h2{font-weight:650!important}.studio-app-layout .lyrics{min-height:520px}.studio-app-layout .sheet{min-height:260px}.studio-app-layout .preview-card .print-page{width:100%;min-height:540px;padding:22px}.studio-app-layout .preview-card{overflow:visible}.studio-app-layout .app-footer{display:none!important}.studio-app-layout .toolbar{display:flex}.studio-app-layout .toolbar .btn{width:auto!important}.studio-app-layout .form-grid{grid-template-columns:1fr 1fr}.studio-app-layout .print-title{font-size:24px}.studio-app-layout .print-body{font-size:12px}.studio-app-layout .brand-logo,.studio-app-layout .hero,.studio-app-layout .app-topline,.studio-app-layout .brand-row{all:unset}
@media(max-width:1180px){body.studio-app-layout{overflow:auto}.studio-app-frame{height:auto;min-height:100vh;grid-template-columns:220px 1fr}.studio-preview-column{grid-column:2}.studio-sidebar{position:sticky;top:0;height:100vh}.studio-main-column{padding:22px}.studio-preview-column{padding:22px}}
@media(max-width:820px){.studio-app-frame{display:block}.studio-sidebar{position:relative;height:auto}.studio-main-column,.studio-preview-column{padding:18px}.studio-app-layout .form-grid{grid-template-columns:1fr}.studio-head-actions .btn{width:100%!important}.studio-app-layout .toolbar{display:grid}.studio-app-layout .toolbar .btn{width:100%!important}}


/* Website v2.51 – Datenschutzfreundlicher Cookie-Hinweis */
.cookie-consent {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: min(940px, calc(100% - 28px));
  z-index: 9999;
  display: none;
  background: rgba(18, 16, 26, .94);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 90px rgba(0,0,0,.48), 0 0 60px rgba(255,111,57,.14);
  border-radius: 28px;
  backdrop-filter: blur(22px);
  color: #fff;
  padding: 22px;
}
.cookie-consent.show { display: block; }
.cookie-consent-inner { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: center; }
.cookie-consent h3 { margin: 0 0 8px; font-family: var(--font-heading, Roobert, Inter, Arial, sans-serif); font-weight: 520; letter-spacing: -.02em; font-size: clamp(1.15rem, 2vw, 1.45rem); }
.cookie-consent p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.55; font-size: .96rem; }
.cookie-consent a { color: #ffd37a; text-decoration: none; }
.cookie-consent a:hover { text-decoration: underline; }
.cookie-options { display: grid; gap: 10px; margin-bottom: 14px; }
.cookie-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.055); color: rgba(255,255,255,.86); font-size: .92rem; }
.cookie-check input { margin-top: 3px; accent-color: #ff6f39; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.cookie-btn { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 11px 16px; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); font: inherit; font-weight: 700; }
.cookie-btn.primary { color: #111; background: #fff; border-color: #fff; }
.cookie-btn.accent { border: 0; background: linear-gradient(135deg,#ff7a33,#ff4fc3); color: #100914; }
.cookie-manage { position: fixed; left: 18px; bottom: 18px; z-index: 9998; border: 1px solid rgba(255,255,255,.16); background: rgba(18,16,26,.72); color: rgba(255,255,255,.8); border-radius: 999px; padding: 8px 12px; font-size: .82rem; cursor: pointer; backdrop-filter: blur(14px); display: none; }
.cookie-manage.show { display: inline-flex; }
@media (max-width: 760px) {
  .cookie-consent { bottom: 12px; border-radius: 22px; padding: 18px; }
  .cookie-consent-inner { grid-template-columns: 1fr; }
  .cookie-actions { justify-content: stretch; }
  .cookie-btn { width: 100%; }
}

/* Lyruma Website v2.51 / App v13.46 – Songbook, Tablet-/iPad-Layout und Live-Set */
.studio-app-frame{grid-template-columns:240px minmax(340px,1fr) minmax(320px,440px)!important;}
.songbook-card{scroll-margin-top:24px;}
.songbook-controls{display:grid;grid-template-columns:minmax(190px,1.2fr) minmax(150px,.8fr) minmax(140px,.7fr) auto auto;gap:12px;align-items:end;margin:16px 0;}
.songbook-controls label{margin:0;}
.songbook-list{display:grid;gap:10px;margin-top:14px;}
.songbook-empty{border:1px dashed rgba(255,255,255,.14);border-radius:18px;padding:18px;color:var(--muted);background:rgba(255,255,255,.035);}
.songbook-item{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:12px;background:rgba(255,255,255,.045);}
.songbook-item.selected{border-color:rgba(255,157,64,.72);background:linear-gradient(135deg,rgba(255,122,26,.13),rgba(184,92,255,.08));}
.songbook-index{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.08);font-weight:850;color:#fff;}
.songbook-info{min-width:0;display:grid;gap:4px;}
.songbook-info strong{font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.songbook-info span{font-size:12.5px;color:var(--muted);}
.songbook-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;}
.songbook-actions .btn{width:auto!important;padding:9px 11px;min-height:0;font-size:12px;}
.songbook-live-card{border-color:rgba(255,255,255,.10)!important;}
.songbook-live-list{display:grid;gap:8px;}
.songbook-live-row{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.045);color:#fff;padding:10px 11px;cursor:pointer;}
.songbook-live-row:hover,.songbook-live-row.active{background:rgba(255,255,255,.10);border-color:rgba(255,157,64,.52);}
.songbook-live-row span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.08);font-weight:850;}
.songbook-live-row strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;}
.songbook-live-row em{font-style:normal;color:#ffb86b;font-weight:800;font-size:12px;}
@media(max-width:1050px){
  .studio-app-frame{grid-template-columns:220px minmax(0,1fr)!important;height:auto;min-height:100vh;}
  .studio-sidebar{position:sticky;top:0;height:100vh;}
  .studio-preview-column{grid-column:2;border-left:0;border-top:1px solid rgba(255,255,255,.10);}
  .songbook-controls{grid-template-columns:1fr 1fr;}
  .songbook-controls .btn{width:100%!important;}
}
@media(max-width:820px){
  .studio-app-frame{display:block!important;}
  .studio-sidebar{position:relative;height:auto;}
  .songbook-controls{grid-template-columns:1fr;}
  .songbook-item{grid-template-columns:34px 1fr;}
  .songbook-actions{grid-column:1 / -1;justify-content:stretch;}
  .songbook-actions .btn{flex:1 1 42%;}
}


/* v2.33 / App v13.46 – schlichte Typografie, persistentes Songbook und Lyrics-Toolbar */
:root{--font-heading:"Roobert","Inter","SF Pro Display","Avenir Next","Segoe UI",Arial,Helvetica,sans-serif;--font-body:"Roobert","Inter","SF Pro Text","Segoe UI",Arial,Helvetica,sans-serif;}
body,input,select,textarea,button,.lyrics,.sheet,.print-page,.print-body{font-family:var(--font-body)!important;font-weight:360!important;}
h1,h2,h3,.section-title h2,.studio-app-head h1,.sidebar-name{font-family:var(--font-heading)!important;font-weight:500!important;letter-spacing:-.04em!important;}
.btn,.upgrade-pill,.sidebar-menu a,.sidebar-dropdown a,.sidebar-dropdown button,label{font-weight:560!important;}
.lyrics-toolbar{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;overflow-x:auto!important;padding-bottom:4px!important;}
.lyrics-toolbar .btn,.lyrics-toolbar select{flex:0 0 auto!important;width:auto!important;white-space:nowrap!important;}
.lyrics-toolbar select{min-width:190px!important;}
@media(max-width:760px){.lyrics-toolbar{overflow-x:auto!important}.lyrics-toolbar .btn,.lyrics-toolbar select{min-width:max-content!important}}

/* v2.34 language switcher */


/* v2.36: Share-Icon in WebApp */
.share-arrow-icon{width:16px;height:16px;display:inline-block;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.sidebar-profile-tools{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}.sidebar-share-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.055);color:#cfc9df;min-height:32px;min-width:32px;padding:0 9px;text-decoration:none;font-size:12px}.sidebar-share-button:hover{background:rgba(255,255,255,.10);color:#fff}


/* v2.39: Sprachmenü in der WebApp oben rechts, nicht in der Sidebar */
.app-language-floating{position:fixed!important;top:14px!important;right:18px!important;z-index:3000!important;display:inline-flex!important;align-items:center!important;gap:7px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(25,24,32,.78)!important;color:#f7f5ff!important;border-radius:999px!important;padding:7px 10px!important;font-size:12px!important;backdrop-filter:blur(18px)!important;box-shadow:0 12px 40px rgba(0,0,0,.32)!important;}
.app-language-floating select{border:0!important;background:transparent!important;color:#fff!important;font:inherit!important;outline:0!important;width:auto!important;padding:0 16px 0 0!important;}
.app-language-floating option{color:#111;background:#fff;}
@media(max-width:900px){.app-language-floating{top:10px!important;right:10px!important;}}

/* v2.42: language selector belongs in left menu under Anleitung */
.app-language-floating{position:static!important;top:auto!important;right:auto!important;box-shadow:none!important;backdrop-filter:none!important;}


/* v2.49 – Lead-Sheet-Schrift für Vorschau, Druck und Export.
   Die Schriftdatei wird nicht eingebettet; Xdot Verse wird verwendet, wenn sie lokal installiert oder serverseitig bereitgestellt ist. */
@font-face{font-family:"Xdot Verse";src:local("Xdot Verse"),local("XdotVerse-Regular"),local("XdotVerse Regular"),local("XdotVerse");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Xdot Verse";src:local("Xdot Verse Bold"),local("XdotVerse-Bold"),local("XdotVerse Bold");font-weight:700 900;font-style:normal;font-display:swap;}
:root{--font-sheet:"Xdot Verse","XdotVerse","Xdot Verse MeinHomestudio.de","Open Sans",Arial,Helvetica,sans-serif;}
.print-page,.print-body,.print-title,.print-meta,.sheet,.lyrics{font-family:var(--font-sheet)!important;}
.print-body,.sheet{letter-spacing:.01em;line-height:1.46;}


/* v2.51: Hinweis zur Sheet-Schrift Xdot Verse */
.font-install-notice{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;border-color:rgba(255,214,107,.30)!important;background:linear-gradient(135deg,rgba(255,214,107,.10),rgba(255,255,255,.035))!important;}
.font-install-notice strong{display:block;color:#fff;font-size:16px;margin-bottom:4px;}
.font-install-notice p{margin:0;color:var(--muted);line-height:1.45;}
.font-install-notice small{display:block;margin-top:7px;color:#ffd66b;font-weight:800;}
.font-install-notice.font-ok{border-color:rgba(85,230,165,.28)!important;background:linear-gradient(135deg,rgba(85,230,165,.10),rgba(255,255,255,.035))!important;}
.font-install-notice.font-ok small{color:#80f0bd;}
.font-install-notice .btn{width:auto!important;white-space:nowrap;}
@media(max-width:760px){.font-install-notice{align-items:flex-start!important;flex-direction:column!important}.font-install-notice .btn{width:100%!important}}

/* v2.55: Xdot Verse für Druck/Preview stärker erzwingen und App-Footer-Links vereinheitlichen */
@font-face{font-family:"Xdot Verse";src:local("Xdot Verse"),local("XdotVerse"),local("Xdot Verse MeinHomestudio.de"),local("XdotVerse-Regular"),local("XdotVerse Regular");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Xdot Verse";src:local("Xdot Verse Bold"),local("XdotVerse-Bold"),local("XdotVerse Bold");font-weight:700 900;font-style:normal;font-display:swap;}
:root{--font-sheet:"Xdot Verse","XdotVerse","Xdot Verse MeinHomestudio.de","XdotVerse-Regular","XdotVerse Regular",Arial,Helvetica,sans-serif;}
.print-page,.print-page *,.print-body,.print-title,.print-meta,.sheet{font-family:var(--font-sheet)!important;}
@media print{body,.print-page,.print-page *,.print-body,.print-title,.print-meta{font-family:var(--font-sheet)!important;}.print-body{font-size:11pt!important;line-height:1.42!important;}}
.app-unified-footer{gap:6px!important;}
.sidebar-footer-title{display:block;color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 4px;}
.app-unified-footer a{font-size:12.5px!important;margin:0!important;}
.font-license-inline{margin:6px 0;color:#d8d0ed;font-size:12.5px;line-height:1.45;}
/* v2.55 final: Auch Editor- und Sheet-Ausgabefelder verwenden Xdot Verse. */
.lyrics,.sheet,.print-body,.print-page,.print-page *{font-family:var(--font-sheet)!important;}


/* v2.63: Xdot Verse zuverlässig als echte Font-Datei laden, nicht als ZIP. */
@font-face{font-family:"Xdot Verse";src:url('/assets/fonts/XdotVerse-Regular.ttf?v=2.56') format('truetype'),url('/app/assets/fonts/XdotVerse-Regular.ttf?v=2.56') format('truetype'),local("Xdot Verse"),local("XdotVerse-Regular"),local("XdotVerse");font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:"Xdot Verse";src:url('/assets/fonts/XdotVerse-Bold.ttf?v=2.56') format('truetype'),url('/app/assets/fonts/XdotVerse-Bold.ttf?v=2.56') format('truetype'),local("Xdot Verse Bold"),local("XdotVerse-Bold");font-weight:700 900;font-style:normal;font-display:block;}
.sheet-output,.print-preview,.print-preview *,.sheet-editor textarea,#sheetOutput,#lyricsInput,#manualLyrics,.lead-sheet-paper,.print-body,.print-title{font-family:"Xdot Verse","XdotVerse",Arial,Helvetica,sans-serif!important;}
@media print{body,.print-preview,.print-preview *,.sheet-output,#sheetOutput{font-family:"Xdot Verse","XdotVerse",Arial,Helvetica,sans-serif!important;}}

/* v13.31: Gitarren-Grifftabellen und Tab-Vorschau im Sheet */
.chord-diagram-section,.guitar-tabs-section{margin-top:18px;padding-top:12px;border-top:1px solid rgba(17,17,17,.12);break-inside:avoid;page-break-inside:avoid}.chord-diagram-section h3,.guitar-tabs-section h3{margin:0 0 10px;font-size:15px;font-weight:900;color:#111}.chord-diagram-grid{display:flex;flex-wrap:wrap;gap:10px}.chord-svg{width:92px;height:118px;border:1px solid rgba(17,17,17,.16);border-radius:10px;background:#fff;padding:5px}.guitar-tabs-section pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.38;white-space:pre-wrap;background:#f8f8f8;border:1px solid rgba(17,17,17,.12);border-radius:10px;padding:10px;color:#111}.tabs-note{font-size:12px;line-height:1.45;color:#555;margin:0 0 8px}@media print{.chord-diagram-section,.guitar-tabs-section{break-inside:avoid;page-break-inside:avoid}.chord-svg{width:82px;height:104px}.guitar-tabs-section pre{font-size:9.5pt}}

/* v13.31: Live-Analysevorschau für Audio- und Studio-STEM-Analyse */
.analysis-live-box{margin-top:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.055);padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.16)}
.analysis-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#fff}.analysis-live-head strong{font-size:14px}.analysis-live-head span{font-variant-numeric:tabular-nums;color:#ffd66b;font-weight:800}.analysis-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}.analysis-progress span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffd66b,#ff8bc7);transition:width .45s ease}.analysis-live-steps{margin:12px 0 0;padding-left:20px;max-height:150px;overflow:auto;color:#d9d3ea}.analysis-step{margin:5px 0;line-height:1.4}.analysis-step.running::marker{color:#ffd66b}.analysis-step.done::marker{color:#55e6a5}.analysis-step.error::marker{color:#ff8b8b}.analysis-live-note{margin:10px 0 0;color:#bfb6da;font-size:12.5px;line-height:1.45}

/* v13.37: Griffbilder und Gitarren-Tabs stehen im Sheet oberhalb des Songtextes */
.sheet-music-extras{margin:10px 0 12px;padding:0;break-inside:avoid;page-break-inside:avoid}
.sheet-music-extras .chord-diagram-section,.sheet-music-extras .guitar-tabs-section{margin:0 0 14px;padding-top:0;border-top:0}
.sheet-lyrics-divider{border-top:2px solid rgba(17,17,17,.82);margin:12px 0 12px;height:0}
@media print{.sheet-music-extras{break-inside:avoid;page-break-inside:avoid}.sheet-lyrics-divider{border-top:2px solid #111;margin:10px 0}}


/* Lyruma App v13.46 – linkes Menü kompakter */
.studio-app-layout .sidebar-menu{gap:2px!important;}
.studio-app-layout .sidebar-menu a{
  padding:8px 11px!important;
  border-radius:11px!important;
  line-height:1.15!important;
  font-size:14px!important;
}
.studio-app-layout .studio-sidebar{gap:18px!important;}
.studio-app-layout .sidebar-legal{gap:5px!important;}
.studio-app-layout .sidebar-legal a{line-height:1.18!important;font-size:12.5px!important;}


/* v13.37: WebApp Login/Logout bleibt im Profilmenü klar rechts/oben, Navigation kompakt */
.studio-sidebar .sidebar-profile-menu{min-width:0;flex:1 1 auto;}
.studio-sidebar .sidebar-dropdown{right:0!important;left:auto!important;}
.studio-sidebar .sidebar-dropdown button{width:100%;}


/* v13.37: Abmelden im WebApp-Kopf rechts außen */
.studio-head-actions .app-logout-top{margin-left:auto!important;}
@media(max-width:900px){.studio-head-actions .app-logout-top{margin-left:0!important;}}

/* Lyruma v2.73 / App v13.46 – responsive Hamburger-/Off-Canvas-Menü */
.menu-text-link{
  color:#f7f3ff!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  text-decoration:none!important;
  font-weight:560!important;
  white-space:nowrap;
}
.menu-text-link:hover{color:#ffb86b!important;transform:none!important;filter:none!important;}
.suno-nav-actions .menu-text-link,.nav-actions-right .menu-text-link{display:inline-flex;align-items:center;min-height:0;}
.lss-menu-toggle{display:none;appearance:none;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.075);color:#fff;border-radius:14px;width:46px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;z-index:1002;box-shadow:0 12px 34px rgba(0,0,0,.24)}
.lss-menu-toggle span{display:block;width:20px;height:2px;border-radius:999px;background:#fff;transition:transform .18s ease,opacity .18s ease}
.lss-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lss-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.lss-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.lss-offcanvas-menu{display:none;}
@media(max-width:980px){
  .suno-nav{grid-template-columns:auto 1fr auto!important;min-height:72px!important;height:auto!important;padding:12px 16px!important;gap:12px!important;position:sticky!important;top:0!important;}
  .suno-nav .suno-brand{min-width:0!important;}
  .suno-nav .suno-nav-center,.suno-nav .suno-nav-actions{display:none!important;}
  .nav .container.nav-inner{min-height:72px!important;height:auto!important;align-items:center!important;flex-wrap:nowrap!important;justify-content:space-between!important;padding:10px 0!important;position:relative!important;}
  .nav .brand{min-width:0!important;}
  .nav .brand span{display:none!important;}
  .nav .nav-links,.nav .nav-actions-right{display:none!important;}
  .lss-menu-toggle{display:inline-flex!important;margin-left:auto!important;flex:0 0 auto!important;}
  .lss-offcanvas-menu{position:fixed;top:74px;right:12px;left:auto;width:min(330px,calc(100vw - 24px));max-height:calc(100vh - 92px);overflow:auto;display:grid;gap:4px;padding:14px;border:1px solid rgba(255,255,255,.15);border-radius:22px;background:rgba(17,17,24,.98);box-shadow:0 28px 90px rgba(0,0,0,.58);z-index:1001;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .18s ease,transform .18s ease;}
  .lss-menu-open .lss-offcanvas-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
  .lss-offcanvas-menu a,.lss-offcanvas-menu button{display:flex!important;width:100%!important;min-height:42px!important;align-items:center!important;justify-content:flex-start!important;text-align:left!important;padding:10px 12px!important;border-radius:13px!important;color:#f7f3ff!important;background:transparent!important;border:0!important;box-shadow:none!important;text-decoration:none!important;font-weight:560!important;white-space:normal!important;}
  .lss-offcanvas-menu a:hover,.lss-offcanvas-menu button:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;}
  .lss-offcanvas-menu .white-cta,.lss-offcanvas-menu .menu-text-link{padding:10px 12px!important;background:transparent!important;color:#f7f3ff!important;}
  table{max-width:100%;display:block;overflow-x:auto;white-space:nowrap;}
  .auth-layout,.profile-grid,.profile-columns,.footer-grid{grid-template-columns:1fr!important;}
}
@media(max-width:520px){
  .suno-brand span{display:inline!important;font-size:15px!important;}
  .nav .brand strong,.suno-brand span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .lss-offcanvas-menu{top:70px;right:10px;width:calc(100vw - 20px);border-radius:20px;}
}

/* Lyruma v13.46 – WebApp Hamburger-Menü auf iPad/iPhone */
.app-offcanvas-toggle,.app-menu-overlay{display:none;}
@media(max-width:900px){
  body.studio-app-layout{overflow:auto!important;padding-top:62px;}
  .app-offcanvas-toggle{display:inline-flex!important;position:fixed;top:12px;right:12px;z-index:3002;background:rgba(25,25,32,.96)!important;}
  .app-menu-overlay{position:fixed;inset:0;z-index:2998;background:rgba(0,0,0,.46);border:0;padding:0;margin:0;}
  body.app-menu-open .app-menu-overlay{display:block;}
  .studio-app-frame{display:block!important;height:auto!important;min-height:100vh!important;}
  .studio-sidebar{position:fixed!important;top:0!important;right:0!important;left:auto!important;width:min(330px,86vw)!important;height:100vh!important;z-index:3000!important;transform:translateX(104%)!important;transition:transform .22s ease!important;overflow:auto!important;border-left:1px solid rgba(255,255,255,.12)!important;border-right:0!important;box-shadow:-28px 0 90px rgba(0,0,0,.55)!important;padding:74px 18px 24px!important;}
  body.app-menu-open .studio-sidebar{transform:translateX(0)!important;}
  .studio-main-column,.studio-preview-column{padding:18px!important;}
  .studio-app-head{padding-right:52px;}
  .studio-head-actions{display:grid!important;grid-template-columns:1fr!important;}
  .studio-head-actions .btn{width:100%!important;white-space:normal!important;}
  .studio-preview-column{border-left:0!important;}
  .studio-app-layout .form-grid{grid-template-columns:1fr!important;}
}

/* Lyruma v2.73 – App-Hamburger stabil rechts oben */
@media(max-width:900px){
  .app-offcanvas-toggle{
    position:fixed!important;
    top:12px!important;
    right:12px!important;
    margin:0!important;
    z-index:3202!important;
  }
}

/* Lyruma v13.46 – bessere Lesbarkeit der Sheet-Ausgabe und Export-Schriftgröße */
.export-toolbar{align-items:center!important;gap:10px!important;}
.export-size-control{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0!important;padding:7px 10px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:14px!important;background:rgba(255,255,255,.055)!important;color:#f7f3ff!important;font-size:13px!important;font-weight:700!important;line-height:1.1!important;white-space:nowrap!important;}
.export-size-control select{width:auto!important;min-width:86px!important;padding:8px 10px!important;border-radius:10px!important;font-size:16px!important;}
.sheet{font-size:16px!important;line-height:1.62!important;}
.print-page{padding-left:30px!important;padding-right:38px!important;}
.print-body.sheet-rich-body{font-size:var(--sheet-font-size,15pt)!important;line-height:1.48!important;padding-left:8px!important;padding-right:18px!important;white-space:normal!important;color:#111!important;}
.print-body .sheet-line{min-height:1.48em;break-inside:avoid;page-break-inside:avoid;}
.print-body .sheet-line-blank{min-height:.65em;}
.print-body .sheet-chord{color:#d71920!important;font-weight:900!important;white-space:nowrap!important;}
.print-body .sheet-section-heading{font-size:var(--sheet-section-size,17pt)!important;font-weight:900!important;line-height:1.2!important;margin:12px 0 0!important;color:#111!important;break-after:avoid;page-break-after:avoid;}
.print-body .sheet-section-after{height:.58em;}
@media(max-width:760px){.export-toolbar{display:grid!important;grid-template-columns:1fr!important}.export-size-control{width:100%!important;justify-content:space-between!important}.export-size-control select{min-width:110px!important}.print-page{padding-left:20px!important;padding-right:24px!important}.print-body.sheet-rich-body{font-size:14pt!important;padding-right:8px!important}}
@media print{.export-size-control{display:none!important}.print-body .sheet-chord{color:#d71920!important}.print-body .sheet-section-heading{font-weight:900!important}}

/* v2.92 Mobile Fix: Bereich "Lied erstellen" zentrieren */
@media (max-width: 768px) {
  .app-shell,
  .app-main,
  .workspace,
  .editor-layout,
  .main-panel,
  .song-editor,
  .create-song-panel,
  .sheet-form,
  .form-card {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .app-main,
  .workspace,
  .editor-layout {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .song-editor,
  .create-song-panel,
  .sheet-form,
  .form-card {
    border-radius: 26px !important;
  }

  .top-actions,
  .app-actions,
  .editor-actions,
  .button-row,
  .toolbar,
  .sheet-actions {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .top-actions button,
  .app-actions button,
  .editor-actions button,
  .button-row button,
  .toolbar button,
  .sheet-actions button,
  .top-actions a,
  .app-actions a,
  .editor-actions a,
  .button-row a,
  .toolbar a,
  .sheet-actions a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* v2.92 Mobile Fix: Kopfbereich "Lied erstellen" + Aktionen zentrieren */
@media (max-width: 768px) {
  .studio-head {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .studio-head h1,
  .studio-head p {
    text-align: center !important;
  }

  .studio-head-actions {
    width: 100% !important;
    max-width: 430px !important;
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button,
  .studio-head-actions a {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .studio,
  .studio-card,
  .studio-main,
  .app-content {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* v2.92 Mobile Fix: Kopfbereich "Lied erstellen" + Aktionen zentrieren */
@media (max-width: 768px) {
  .studio-head {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .studio-head h1,
  .studio-head p {
    text-align: center !important;
  }

  .studio-head-actions {
    width: 100% !important;
    max-width: 430px !important;
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button,
  .studio-head-actions a {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .studio,
  .studio-card,
  .studio-main,
  .app-content {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* v2.92 Mobile Fix final: "Lied erstellen" sauber zentrieren */
@media (max-width: 820px) {
  body.studio-app-layout {
    overflow-x: hidden !important;
  }

  .studio-app-frame {
    width: 100% !important;
    max-width: 100vw !important;
    display: block !important;
  }

  .studio-main-column {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 18px 14px 80px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .studio-app-head {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .studio-app-head h1,
  .studio-app-head p {
    text-align: center !important;
  }

  .studio-head-actions {
    width: 100% !important;
    max-width: 430px !important;
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .studio-editor-stack,
  .studio-app-layout .card {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* v2.92 Mobile Fix: Buttons im Bereich Lied erstellen wirklich zentrieren */
@media (max-width: 820px) {
  .studio-head-actions {
    justify-items: center !important;
    align-items: center !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button,
  .studio-head-actions .app-logout-top {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .studio-head-actions .btn * ,
  .studio-head-actions button * {
    text-align: center !important;
  }
}

/* v2.92 Mobile Fix final: Studio-Kopfbuttons volle mobile Breite */
@media (max-width: 820px) {
  .studio-app-head,
  .studio-head-actions {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button,
  .studio-head-actions a,
  .studio-head-actions .app-logout-top {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }
}

/* v2.92 Mobile Final: Lied-erstellen Kopfbereich echte Mobile-Breite */
@media (max-width: 820px) {
  .studio-main-column {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .studio-app-head {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .studio-app-head h1,
  .studio-app-head p {
    text-align: left !important;
  }

  .studio-head-actions {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .studio-head-actions .access-panel,
  .studio-head-actions .btn,
  .studio-head-actions button,
  .studio-head-actions .app-logout-top {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions .btn,
  .studio-head-actions button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 54px !important;
  }
}

/* v2.92 FINAL: Mobile Sheet-erstellen Buttons direkt per ID auf volle Breite setzen */
@media (max-width: 820px) {
  .studio-main-column {
    padding-left: 17px !important;
    padding-right: 17px !important;
    box-sizing: border-box !important;
  }

  .studio-head-actions {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    box-sizing: border-box !important;
  }

  #accessPanel,
  #btnLoadExample,
  #btnSaveProject,
  #btnLoadProject,
  #btnSaveToSongbook,
  #appLogoutTop {
    width: calc(100vw - 34px) !important;
    max-width: calc(100vw - 34px) !important;
    min-width: calc(100vw - 34px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  #btnLoadExample,
  #btnSaveProject,
  #btnLoadProject,
  #btnSaveToSongbook,
  #appLogoutTop {
    min-height: 56px !important;
  }
}

/* v2.93 Audio-Rechte inline vor Upload */
.lss-audio-rights-inline{
  margin:14px 0 16px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(255,255,255,.045);
  box-sizing:border-box;
}
.lss-audio-rights-check{
  display:grid!important;
  grid-template-columns:32px 1fr!important;
  gap:14px!important;
  align-items:center!important;
  margin:0!important;
}
.lss-audio-rights-check input{
  width:26px!important;
  height:26px!important;
  margin:0!important;
  transform:none!important;
  accent-color:#1992ff!important;
}
.lss-audio-rights-check span{
  text-align:left!important;
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:700!important;
}
@media(max-width:820px){
  .lss-audio-rights-inline{
    width:100%!important;
    max-width:100%!important;
  }
}

/* =====================================================
   v2.93 Responsive Button Fix
   Desktop/Tablet normal, Mobile volle Breite
   ===================================================== */

/* Desktop + Tablet */
body.studio-app-layout .studio-head-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.studio-app-layout .studio-head-actions .btn,
body.studio-app-layout .studio-head-actions button {
  width: auto !important;
  min-width: 150px !important;
  max-width: none !important;
  min-height: 46px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Access/Admin-Box darf auf Desktop breit sein */
body.studio-app-layout .studio-head-actions .access-panel {
  flex: 1 1 260px !important;
  min-width: 260px !important;
  max-width: 420px !important;
}

/* Mobile */
@media (max-width: 820px) {
  body.studio-app-layout .studio-head-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.studio-app-layout .studio-head-actions .access-panel,
  body.studio-app-layout .studio-head-actions .btn,
  body.studio-app-layout .studio-head-actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* v2.93 Mobile Fix: Datum-Feld bleibt im Container */
@media (max-width: 820px) {
  body.studio-app-layout input[type="date"],
  body.studio-app-layout #date,
  body.studio-app-layout #songDate,
  body.studio-app-layout input[name="date"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body.studio-app-layout label {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.studio-app-layout .form-grid,
  body.studio-app-layout .card {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* v2.93: Songbook Controls responsive Breakpoints */
@media (max-width: 1280px) {
  body.studio-app-layout .songbook-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  body.studio-app-layout .songbook-controls label,
  body.studio-app-layout .songbook-controls input,
  body.studio-app-layout .songbook-controls select,
  body.studio-app-layout .songbook-controls button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.studio-app-layout #btnTransposeSelected {
    white-space: normal !important;
    min-height: 52px !important;
    line-height: 1.2 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 1100px) {
  body.studio-app-layout .songbook-controls {
    grid-template-columns: 1fr !important;
  }

  body.studio-app-layout #btnTransposeSelected,
  body.studio-app-layout #btnOpenPerformance {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1281px) {
  body.studio-app-layout .songbook-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: end !important;
  }

  body.studio-app-layout #btnTransposeSelected {
    width: auto !important;
    max-width: 240px !important;
    white-space: normal !important;
  }
}

/* v2.94 Audio direkt aufnehmen */
.lss-audio-recorder-card{
  margin:18px 0;
  padding:18px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  box-sizing:border-box;
}
.lss-rec-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.lss-rec-icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#ff7a1a,#ff4fd8);color:#16060a;font-weight:950}
.lss-rec-head h2{margin:0 0 6px;font-size:24px}
.lss-rec-head p{margin:0;color:#d8d0e4;line-height:1.5}
.lss-rec-rights{display:grid!important;grid-template-columns:32px 1fr!important;gap:14px!important;align-items:center!important;margin:14px 0!important;padding:14px!important;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(255,255,255,.045)}
.lss-rec-rights input{width:26px!important;height:26px!important;margin:0!important;accent-color:#1992ff!important}
.lss-rec-rights span{font-weight:700;line-height:1.45}
.lss-rec-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.lss-rec-actions button{border:0;border-radius:999px;padding:12px 18px;font-weight:950;cursor:pointer;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.16)}
.lss-rec-actions #lssRecStart,.lss-rec-actions #lssRecAnalyze{background:linear-gradient(135deg,#ff7a1a,#ff4fd8);color:#17060a}
.lss-rec-status{margin-top:12px;color:#ffd08a;font-weight:800}

@media(max-width:820px){
  .lss-rec-head{flex-direction:column;align-items:center;text-align:center}
  .lss-rec-actions{display:grid;grid-template-columns:1fr}
  .lss-rec-actions button{width:100%}
}

/* v2.94: Studio STEM Upload einklappbar */
.lss-stems-collapsible {
  margin: 14px 0 16px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  padding: 0;
  overflow: hidden;
}

.lss-stems-collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  font-weight: 850;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lss-stems-collapsible > summary::-webkit-details-marker {
  display: none;
}

.lss-stems-collapsible > summary::after {
  content: "Ausklappen";
  font-size: 13px;
  color: #ffd08a;
  font-weight: 800;
}

.lss-stems-collapsible[open] > summary::after {
  content: "Einklappen";
}

.lss-stems-collapsible .studio-stems-grid {
  padding: 0 16px 16px;
}

@media(max-width:820px){
  .lss-stems-collapsible > summary {
    text-align: left;
    gap: 12px;
  }
}

/* v2.94: Rechte-Checkbox Pflicht vor Upload/Aufnahme */
.lss-disabled-by-rights{
  opacity:.45!important;
  cursor:not-allowed!important;
  filter:grayscale(.35)!important;
}


/* Lyruma Studio v3.1.2 – App account polish */
.sidebar-brand{position:relative}.sidebar-dropdown:before{content:"Lyruma Studio Konto";display:block;padding:12px 16px 6px;color:rgba(255,255,255,.48);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.studio-app-head{border-bottom:1px solid rgba(255,255,255,.08)}.studio-app-head .eyebrow{letter-spacing:.12em}.access-panel{box-shadow:0 12px 30px rgba(0,0,0,.18)}
.lyruma-app-start-card{border:1px solid rgba(216,170,79,.24);background:linear-gradient(145deg,rgba(216,170,79,.13),rgba(255,255,255,.045));border-radius:22px;padding:20px;margin-bottom:16px}.lyruma-app-start-card strong{display:block;font-size:1.15rem}.lyruma-app-start-card p{margin:.45rem 0 0;color:rgba(255,255,255,.68);line-height:1.55}

/* Lyruma Studio v3.1.3 – WebApp UI/Logo/Cache-Fix */
.sidebar-brand img,
.app-topbar img,
.lyruma-auth-mark img,
.brand img{object-fit:cover;border-radius:18px;box-shadow:0 10px 32px rgba(255,143,63,.22);}
.studio-sidebar .sidebar-brand img{width:58px;height:58px;}
.studio-app-head .eyebrow{color:#ffca72!important;}
@media (max-width: 760px){
  body.lyruma-account-ui .section{padding-top:18px!important;}
  .lyruma-auth-shell{display:block!important;padding:0 18px!important;}
  .lyruma-auth-hero{padding:26px 24px!important;border-radius:28px!important;margin-bottom:18px!important;min-height:auto!important;}
  .lyruma-auth-hero h1{font-size:clamp(2.4rem,10vw,4.3rem)!important;line-height:.98!important;margin:.7rem 0!important;}
  .lyruma-auth-hero p{font-size:1.05rem!important;line-height:1.55!important;}
  .lyruma-auth-pills{gap:10px!important;}
  .lyruma-auth-pills span{font-size:.9rem!important;padding:9px 12px!important;}
  .lyruma-auth-card{border-radius:26px!important;margin-bottom:18px!important;}
  .lyruma-auth-card .auth-panel{padding:24px!important;}
  .lyruma-auth-card h1{font-size:clamp(2.3rem,10vw,4rem)!important;line-height:1!important;}
  #cookieManage{left:22px!important;right:auto!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;z-index:4300!important;}
  .lss-i18n-control.is-floating{right:18px!important;bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;z-index:4301!important;max-width:56vw;}
}

/* Lyruma Studio v3.1.12 – WebApp visual alignment and mobile cleanup */
:root{--lyruma-orange:#ffb84d;--lyruma-pink:#ff4fb3;--lyruma-navy:#070611;}
body.studio-app-layout .sidebar-brand img,
body.studio-app-layout .brand-logo,
body.studio-app-layout .lyruma-auth-mark img{object-fit:contain!important;background:linear-gradient(135deg,#ffbf5f,#ff4fb3)!important;padding:4px!important;border-radius:18px!important;}
body.studio-app-layout .studio-sidebar{background:linear-gradient(180deg,rgba(13,10,22,.98),rgba(8,7,14,.98))!important;}
body.studio-app-layout .studio-app-frame{background:radial-gradient(circle at 20% 0%,rgba(255,122,26,.16),transparent 36%),radial-gradient(circle at 85% 12%,rgba(255,79,179,.13),transparent 38%),#070611!important;}
body.studio-app-layout .studio-app-head h1{font-weight:650!important;}
body.studio-app-layout .card{background:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.038))!important;border-color:rgba(255,255,255,.14)!important;}
body.studio-app-layout .app-unified-footer span:last-child{color:#ffbf6b!important;font-weight:900!important;}
@media(max-width:820px){
  body.studio-app-layout{padding-top:62px!important;}
  .studio-mobile-topbar{height:62px!important;background:rgba(12,10,18,.92)!important;backdrop-filter:blur(18px)!important;}
  .studio-mobile-topbar img{object-fit:contain!important;background:linear-gradient(135deg,#ffbf5f,#ff4fb3)!important;padding:4px!important;}
  body.studio-app-layout .studio-main-column,
  body.studio-app-layout .studio-preview-column{padding:16px!important;}
  body.studio-app-layout .studio-app-head h1{font-size:clamp(32px,12vw,46px)!important;line-height:1!important;}
  body.studio-app-layout .studio-head-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;}
  body.studio-app-layout .studio-head-actions .btn,
  body.studio-app-layout .studio-head-actions button{width:100%!important;}
  body.studio-app-layout .studio-sidebar{padding-top:78px!important;}
  body.studio-app-layout .lss-i18n-control{position:static!important;width:100%!important;margin:10px 0 12px!important;max-width:none!important;}
  body.studio-app-layout #cookieManage,
  body.studio-app-layout .cookie-manage{position:static!important;margin:18px 0 24px 16px!important;}
}

/* Lyruma Studio v3.1.12 – WebApp language menu duplicate removal */
body.studio-app-layout .lss-i18n-control .lss-language-pills{display:none!important;}
body.studio-app-layout .lss-i18n-control{position:static!important;width:100%!important;max-width:none!important;margin:10px 0 14px!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
body.studio-app-layout .lss-i18n-control label{display:none!important;}
body.studio-app-layout .lss-i18n-control select{width:100%!important;min-height:52px!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.06)!important;color:#fff!important;padding:0 18px!important;font-weight:900!important;font-size:16px!important;}