@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root { --bg:#fffaf2; --surface:#fffdf9; --ink:#202a3a; --muted:#697383; --line:#e7e1d7; --orange:#ef694d; --orange-dark:#d95036; --yellow:#ffd268; --mint:#cde7d5; --blue:#dcebf0; --shadow:0 20px 50px rgba(42,40,34,.09); color-scheme:light; }
[data-theme="dark"] { --bg:#182231; --surface:#222f40; --ink:#f7f2e9; --muted:#b5c0cc; --line:#38485a; --orange:#ff896e; --orange-dark:#ff7457; --yellow:#ffd879; --mint:#254b43; --blue:#2d4658; --shadow:0 20px 50px rgba(0,0,0,.25); color-scheme:dark; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; transition:background .25s,color .25s; }
a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } .skip-link { position:fixed; left:1rem; top:-4rem; z-index:100; padding:.7rem 1rem; background:var(--ink); color:var(--bg); border-radius:.5rem; } .skip-link:focus { top:1rem; }
.site-header { min-height:82px; max-width:1240px; padding:0 34px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:8px; font-size:1.18rem; letter-spacing:-.07em; font-weight:700; } .brand > span:last-child span { color:var(--orange); } .brand-mark { width:31px; height:31px; display:grid; place-items:center; border-radius:50%; background:var(--orange); color:#fff8f0; font-family:"Playfair Display",serif; font-size:1.4rem; font-style:italic; }
.main-nav { display:flex; align-items:center; gap:28px; font-size:.9rem; font-weight:600; } .main-nav > a:not(.nav-cta) { color:var(--muted); } .main-nav > a:not(.nav-cta):hover,.main-nav .active { color:var(--ink); } .nav-cta,.button-primary { color:white; background:var(--orange); box-shadow:0 9px 19px rgba(222,86,60,.2); } .nav-cta { padding:11px 15px 11px 18px; border-radius:99px; } .nav-cta span,.button span { margin-left:8px; } .nav-text-button { border:0; background:none; color:var(--muted); font-weight:600; padding:0; }
.theme-toggle { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:99px; padding:5px; display:flex; gap:3px; align-items:center; } .theme-toggle span { width:22px; height:22px; display:grid; place-items:center; font-size:.8rem; border-radius:50%; } [data-theme="dark"] .theme-toggle span:first-child,:root:not([data-theme="dark"]) .theme-toggle span:last-child { opacity:.45; } :root:not([data-theme="dark"]) .theme-toggle span:first-child,[data-theme="dark"] .theme-toggle span:last-child { background:var(--yellow); color:#253040; }
.menu-toggle { display:none; border:0; background:none; padding:8px; } .menu-toggle i { width:24px; height:2px; display:block; background:var(--ink); margin:5px; transition:.2s; }
#app { max-width:1240px; min-height:calc(100vh - 149px); margin:auto; padding:27px 34px 64px; }
.hero { min-height:550px; display:grid; grid-template-columns:1fr .93fr; align-items:center; gap:45px; padding:25px 68px 39px; overflow:hidden; position:relative; background:linear-gradient(108deg,var(--blue) 0%,var(--blue) 51%,#f4deae 51%,#f4deae 100%); border-radius:25px; } [data-theme="dark"] .hero { background:linear-gradient(108deg,#2b4a58 0%,#2b4a58 51%,#5a4930 51%,#5a4930 100%); }
.hero-copy { position:relative; z-index:2; } .eyebrow { color:var(--orange); font-family:"DM Mono",monospace; font-size:.69rem; font-weight:500; letter-spacing:.13em; margin:0 0 16px; } h1,h2,h3,p { margin-top:0; } h1 { font-family:"Playfair Display",Georgia,serif; font-size:clamp(3.15rem,5.7vw,5.4rem); line-height:.97; letter-spacing:-.065em; margin-bottom:23px; } h1 em { color:var(--orange); font-weight:600; } .lede { max-width:400px; color:var(--muted); line-height:1.68; font-size:1.05rem; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:30px; } .button { min-height:48px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:99px; font-size:.92rem; font-weight:700; transition:transform .16s,background .16s; } .button:hover { transform:translateY(-2px); } .button-primary:hover { background:var(--orange-dark); } .button-quiet { color:var(--ink); border:1px solid var(--line); background:var(--surface); }.trust { display:flex; gap:18px; color:var(--muted); font-size:.76rem; margin-top:32px; } .trust span { white-space:nowrap; }
.hero-art { position:relative; width:450px; max-width:100%; height:445px; margin:auto; } .sun { position:absolute; width:260px; height:260px; background:var(--yellow); border-radius:50%; right:40px; top:54px; opacity:.95; } .record { position:absolute; width:255px; height:255px; border-radius:50%; background:repeating-radial-gradient(circle,#253645 0 2px,#2c4051 3px 5px); box-shadow:7px 12px 0 rgba(31,41,54,.18); } .record:after { content:""; position:absolute; inset:44%; border-radius:50%; background:var(--orange); border:4px solid #f4d278; } .record-back { right:26px; top:120px; transform:rotate(-12deg); } .record-front { left:56px; bottom:15px; transform:rotate(19deg); } .record-front i { position:absolute; z-index:1; width:12px; height:12px; background:#263848; border-radius:50%; top:calc(50% - 6px); left:calc(50% - 6px); } .sleeve { position:absolute; right:7px; bottom:3px; width:168px; height:210px; padding:18px; color:#243647; background:#e6c2b9; transform:rotate(9deg); box-shadow:12px 14px 0 rgba(45,46,43,.1); display:flex; flex-direction:column; justify-content:space-between; } .sleeve:after { content:""; width:70px; height:70px; position:absolute; right:19px; top:44px; background:#71a2a7; border-radius:50%; } .sleeve small { font:500 .58rem "DM Mono"; letter-spacing:.09em; } .sleeve strong { position:relative; z-index:1; font:700 2rem/.74 "Playfair Display"; letter-spacing:-.1em; } .note { position:absolute; z-index:3; color:var(--orange); font:2.5rem Georgia; } .note-one { top:23px; left:91px; transform:rotate(-15deg); } .note-two { right:3px; top:25px; transform:rotate(15deg); }
.feature-section { padding:112px 68px 55px; } .section-heading { display:flex; align-items:end; justify-content:space-between; }.section-heading h2 { font:700 clamp(2rem,3vw,3rem)/1.04 "Playfair Display"; letter-spacing:-.06em; margin:0; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }.feature-grid article { padding:31px 28px; min-height:207px; background:var(--surface); border:1px solid var(--line); border-radius:13px; }.feature-icon { color:var(--orange); font:2rem "Playfair Display"; }.feature-grid h3 { margin:21px 0 10px; font-size:1.04rem; }.feature-grid p { color:var(--muted); font-size:.9rem; line-height:1.55; margin:0; }
.auth-layout { min-height:570px; max-width:970px; margin:10px auto; display:grid; grid-template-columns:1fr 410px; gap:75px; align-items:center; }.auth-intro p:not(.eyebrow) { max-width:300px; color:var(--muted); line-height:1.6; }.auth-card { padding:39px; border-radius:19px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); }.auth-card h2 { font:700 2rem "Playfair Display"; letter-spacing:-.055em; margin-bottom:5px; }.form-hint { color:var(--muted); font-size:.88rem; margin-bottom:27px; }.form-hint a,.check a { color:var(--orange); text-decoration:underline; text-underline-offset:2px; }.auth-card label { display:block; color:var(--ink); font-size:.82rem; font-weight:700; margin:16px 0; }.auth-card label small { color:var(--muted); font-weight:400; }.auth-card input:not([type="checkbox"]) { display:block; width:100%; border:1px solid var(--line); background:var(--surface); color:var(--ink); color-scheme:inherit; outline:0; border-radius:8px; margin-top:7px; padding:12px; transition:border .15s,box-shadow .15s; }.auth-card input:focus { border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 16%,transparent); }.auth-card input:-webkit-autofill { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px var(--surface) inset; }.auth-card .check { display:flex; align-items:start; gap:9px; font-size:.75rem; line-height:1.35; color:var(--muted); font-weight:400; }.check input { margin:1px 0 0; accent-color:var(--orange); }.button-full { width:100%; margin-top:12px; }.mobile-back { display:none; }
.account { max-width:850px; padding:85px 50px; }.account h1 { font-size:clamp(3rem,5vw,4.5rem); }.account-card { margin-top:35px; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }.account-card p { color:var(--muted); margin:5px 0 0; }.status-dot { display:inline-block; height:9px; width:9px; border-radius:50%; margin-right:8px; background:var(--orange); }.status-dot.verified { background:#4ba574; }
.site-footer { border-top:1px solid var(--line); max-width:1172px; margin:auto; padding:25px 0; display:flex; color:var(--muted); justify-content:space-between; font-size:.77rem; }.site-footer nav { display:flex; gap:18px; }.toast { position:fixed; z-index:30; right:20px; bottom:20px; max-width:min(420px,calc(100vw - 40px)); padding:14px 18px; border-radius:10px; background:var(--ink); color:var(--bg); box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(10px); transition:.2s; font-size:.9rem; }.toast.is-visible { opacity:1; transform:none; }.toast.error { background:#a34438; }.noscript { padding:15px; text-align:center; background:var(--yellow); color:#263444; }
@media (max-width:800px) { .site-header { min-height:68px; padding:0 20px; }.menu-toggle { display:block; z-index:12; }.main-nav { display:none; position:absolute; top:58px; left:12px; right:12px; padding:20px; flex-direction:column; align-items:stretch; gap:4px; border:1px solid var(--line); border-radius:15px; background:var(--surface); box-shadow:var(--shadow); }.menu-open .main-nav { display:flex; }.main-nav a,.nav-text-button { padding:13px; }.nav-cta { text-align:center; margin-top:4px; }.theme-toggle { position:absolute; top:21px; right:63px; }.menu-open .menu-toggle i:first-child { transform:translateY(7px) rotate(45deg); }.menu-open .menu-toggle i:nth-child(2) { opacity:0; }.menu-open .menu-toggle i:last-child { transform:translateY(-7px) rotate(-45deg); } #app { min-height:calc(100vh - 129px); padding:15px 16px 42px; }.hero { grid-template-columns:1fr; gap:0; min-height:auto; padding:47px 28px 0; border-radius:18px; background:linear-gradient(147deg,var(--blue) 0%,var(--blue) 62%,#f4deae 62%,#f4deae 100%); }.hero h1 { font-size:clamp(2.8rem,13vw,4rem); }.trust { gap:10px; flex-wrap:wrap; margin-top:24px; }.hero-art { height:320px; width:330px; margin-top:5px; transform:scale(.78); transform-origin:top center; margin-bottom:-55px; }.feature-section { padding:65px 8px 15px; }.feature-grid { grid-template-columns:1fr; gap:12px; margin-top:27px; }.feature-grid article { min-height:0; padding:24px; }.feature-grid h3 { margin:11px 0 7px; }.auth-layout { display:block; min-height:0; margin:15px 0; }.auth-intro { display:none; }.auth-card { max-width:470px; margin:26px auto; padding:28px 22px; }.mobile-back { display:inline-block; color:var(--muted); font-size:.83rem; margin-bottom:24px; }.account { padding:60px 8px; }.account-card { align-items:flex-start; flex-direction:column; }.site-footer { margin:0 20px; padding:20px 0; }.site-footer { flex-direction:column; gap:12px; } }
@media (max-width:380px) { .trust { display:block; }.trust span { display:block; margin:5px 0; }.hero { padding-left:22px; padding-right:22px; }.hero-art { margin-left:-10px; }.site-footer nav { gap:12px; } }

/* Library and barcode scanner */
.library { max-width:1050px; margin:0 auto; padding:42px 20px 72px; }.library-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:31px; }.library-heading h1 { font-size:clamp(3rem,5.7vw,4.8rem); margin-bottom:17px; }.scan-card { background:var(--blue); border-radius:18px; padding:31px; position:relative; overflow:hidden; }.scan-card:after { content:"♫"; position:absolute; right:32px; top:-42px; color:color-mix(in srgb,var(--orange) 17%,transparent); font:12rem/1 "Playfair Display"; transform:rotate(16deg); pointer-events:none; }.scan-card h2,.collection-toolbar h2 { font:700 1.8rem "Playfair Display"; letter-spacing:-.045em; margin:0 0 7px; }.scan-card p:not(.eyebrow) { color:var(--muted); font-size:.9rem; margin:0; }.scan-actions { position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-top:22px; }.barcode-form { display:flex; gap:8px; }.barcode-form input,.add-release-form input,.library-edit input,.add-release-form select,.library-edit select { min-height:47px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:0 12px; outline:0; }.barcode-form input { width:200px; }.barcode-form input:focus,.add-release-form input:focus,.library-edit input:focus,.add-release-form select:focus,.library-edit select:focus { border-color:var(--orange); box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 15%,transparent); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }.scanner { position:relative; z-index:2; margin-top:24px; display:grid; grid-template-columns:190px 1fr auto; gap:19px; align-items:center; padding:14px; border-radius:13px; background:var(--surface); border:1px solid var(--line); }.scanner[hidden] { display:none !important; }.scanner video { width:190px; aspect-ratio:1.4; object-fit:cover; border-radius:8px; background:#17212c; }.scanner p { margin:5px 0 0; }.catalog-loading,.catalog-error { position:relative; z-index:2; margin:22px 0 0; padding:15px; border-radius:9px; background:var(--surface); color:var(--muted); }.catalog-error { color:#a34438; }.catalog-results,.release-preview { position:relative; z-index:2; margin-top:25px; padding:24px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:var(--shadow); }.catalog-results h3,.release-preview h3 { font:700 1.35rem "Playfair Display"; margin:0 0 13px; letter-spacing:-.035em; }.catalog-choice { width:100%; display:flex; align-items:center; gap:13px; padding:12px 4px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; }.catalog-choice:hover strong { color:var(--orange); }.catalog-choice span:nth-child(2) { display:grid; gap:3px; flex:1; }.catalog-choice small { color:var(--muted); }.catalog-choice b { color:var(--orange); }.catalog-choice-disc,.album-disc { display:grid; place-items:center; flex:0 0 auto; width:43px; height:43px; border-radius:50%; background:repeating-radial-gradient(circle,#233747 0 2px,#2d4759 3px 4px); color:var(--yellow); font-size:1rem; }.release-preview-head { display:flex; gap:17px; align-items:center; }.release-preview-head .album-disc { width:61px; height:61px; font-size:1.4rem; }.release-preview-head p:not(.eyebrow) { color:var(--muted); margin:0; font-size:.9rem; }.release-preview details { margin:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; }.release-preview summary { cursor:pointer; color:var(--orange); font-size:.86rem; font-weight:700; }.track-list { padding:0; list-style:none; max-height:242px; overflow:auto; }.track-list li { display:grid; grid-template-columns:36px 1fr; gap:8px; padding:7px 0; font-size:.86rem; border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent); }.track-list li span,.track-list small { color:var(--muted); }.track-list small { display:block; font-size:.76rem; margin-top:2px; }.add-release-form { display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:10px; align-items:end; }.add-release-form label,.library-edit label { display:grid; gap:6px; color:var(--muted); font-size:.72rem; font-weight:700; }.collection-section { margin-top:65px; }.collection-toolbar { display:flex; gap:25px; justify-content:space-between; align-items:end; margin-bottom:23px; }.filters { display:flex; gap:6px; flex-wrap:wrap; }.filters button { border:1px solid var(--line); border-radius:99px; padding:8px 12px; background:transparent; color:var(--muted); font-size:.76rem; font-weight:700; }.filters button.active,.filters button:hover { background:var(--ink); border-color:var(--ink); color:var(--bg); }.library-grid { display:grid; gap:14px; }.library-card { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:23px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }.library-card>.album-disc { align-self:start; width:67px; height:67px; font-size:1.5rem; }.library-card-title { display:flex; justify-content:space-between; gap:18px; }.library-card h3 { margin:2px 0 0; font:700 1.27rem "Playfair Display"; letter-spacing:-.035em; }.artist { margin:0; color:var(--orange); font-size:.77rem; font-weight:700; }.album-meta { color:var(--muted); margin:8px 0 17px; font-size:.79rem; }.visibility-pill { align-self:start; padding:5px 8px; border-radius:99px; font-size:.68rem; font-weight:700; }.visibility-pill.public { color:#207550; background:color-mix(in srgb,#5bbc88 18%,transparent); }.visibility-pill.private { color:var(--muted); background:color-mix(in srgb,var(--muted) 13%,transparent); }.library-edit { display:grid; grid-template-columns:minmax(170px,1.4fr) 150px 120px auto; gap:9px; align-items:end; }.library-edit input,.library-edit select { min-height:39px; }.icon-save { min-height:39px; border:0; border-radius:8px; padding:0 12px; color:white; background:var(--orange); font-size:.75rem; font-weight:700; }.library-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }.library-tags span { padding:5px 8px; border-radius:5px; background:color-mix(in srgb,var(--blue) 56%,transparent); color:var(--muted); font-size:.68rem; }.empty-state,.loading { padding:50px 22px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); text-align:center; }.empty-state>span { display:block; color:var(--orange); font:2.5rem "Playfair Display"; }.empty-state h3 { margin:7px 0; color:var(--ink); font:700 1.3rem "Playfair Display"; }.empty-state p { margin:0; font-size:.85rem; }
@media (max-width:800px) { .library { padding:32px 0 44px; }.library-heading { padding:0 8px; }.scan-card { padding:25px 20px; border-radius:14px; }.scan-actions,.barcode-form { align-items:stretch; flex-direction:column; }.scan-actions .button { width:100%; }.barcode-form input { width:100%; }.scanner { grid-template-columns:1fr; }.scanner video { width:100%; max-height:230px; }.add-release-form,.library-edit { grid-template-columns:1fr; }.add-release-form .button,.icon-save { width:100%; }.collection-section { margin-top:48px; padding:0 8px; }.collection-toolbar { display:block; }.filters { margin-top:14px; }.library-card { grid-template-columns:48px 1fr; padding:17px; gap:13px; }.library-card>.album-disc { width:48px; height:48px; font-size:1.1rem; }.library-card-title { display:block; }.visibility-pill { display:inline-block; margin-top:7px; }.library-edit { margin-left:-61px; margin-top:17px; }.library-tags { margin-left:-61px; }.release-preview,.catalog-results { padding:18px; }.scan-card:after { font-size:8rem; right:8px; } }
.offer-card { align-items:center; }.offer-owner { margin:0; color:var(--muted); font-size:.8rem; }.offer-owner strong { color:var(--ink); }
.scanner { grid-template-columns:300px 1fr auto; }.scanner video { width:300px; aspect-ratio:1.7; }
.photo-upload { position:relative; overflow:hidden; }.photo-upload input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.photo-upload { font-size:0; }.photo-upload::after { content:"▣ Foto mit Kamera"; font-size:.92rem; }
.photo-capture-controls { display:grid; gap:5px; }.photo-capture-controls p { color:var(--muted); font-size:.8rem; }.photo-capture-controls .button { width:max-content; margin-top:5px; }
@media (max-width:800px) { .scanner { grid-template-columns:1fr; }.scanner video { width:100%; } }