/* Internet Radio Vinyl Edition — landing page.
   Uses the design system's tokens; page-only layout lives here. */
@import url("/tokens/colors.css");
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700&family=Archivo+Narrow:wght@600;700&family=DM+Mono:wght@400;500&display=swap");
:root{--font-core:"Archivo",system-ui,sans-serif;--font-label:"Archivo Narrow",system-ui,sans-serif;--font-metric:"DM Mono",ui-monospace,monospace;--pad:clamp(20px,5vw,64px);--maxw:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-room);color:var(--content-primary);font-family:var(--font-core);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-wrap:pretty}
img,svg{max-width:100%}
a{color:var(--purple-80);text-decoration-color:rgba(207,188,255,.4);text-underline-offset:3px}
a:hover{color:#E2D6FF;text-decoration-color:#E2D6FF}
h1,h2,h3{margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:700}
h1{font-size:clamp(34px,5.2vw,58px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:clamp(18px,1.7vw,21px);letter-spacing:-.01em}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sect{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--edge-hairline)}
.sect--panel{background:var(--surface-deck)}
.eyebrow{font-family:var(--font-label);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-80);margin-bottom:14px}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--content-secondary);max-width:62ch}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,52px);max-width:70ch}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(14,14,15,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge-hairline)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;letter-spacing:-.01em;text-decoration:none;color:var(--content-primary);font-size:16px}
.brand:hover{color:var(--content-primary)}
.brand svg{width:30px;height:30px;border-radius:8px;flex:none}
.nav{display:flex;gap:22px;margin-left:auto;font-size:15px}
.nav a{color:var(--content-secondary);text-decoration:none}
.nav a:hover{color:var(--content-primary)}
.lang{display:flex;gap:8px;font-family:var(--font-metric);font-size:13px;color:var(--content-tertiary);border-left:1px solid var(--edge-hairline);padding-left:18px}
.lang a{text-decoration:none;color:var(--content-tertiary)}
.lang [aria-current]{color:var(--content-primary)}
@media(max-width:860px){.nav{display:none}}

/* hero */
.hero{padding-block:clamp(48px,7vw,88px) clamp(48px,7vw,80px);background:radial-gradient(120% 90% at 12% 0%,var(--purple-10) 0%,var(--surface-room) 62%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr)}}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.def{border-left:2px solid var(--purple-30);padding-left:18px;font-size:clamp(16px,1.4vw,18px);color:var(--content-secondary)}
.def strong{color:var(--content-primary);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:12px;font-weight:600;font-size:16px;text-decoration:none;border:1px solid transparent}
.btn--p{background:var(--purple-30);color:#fff;border-color:var(--purple-60)}
.btn--p:hover{background:#5C42A0;color:#fff}
.btn--s{background:var(--surface-panel);color:var(--content-primary);border-color:var(--edge-strong)}
.btn--s:hover{background:var(--surface-panel-hover);color:var(--content-primary)}
.btn small{display:block;font-family:var(--font-label);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--content-secondary);font-weight:700}
.btn--p small{color:rgba(255,255,255,.72)}
.btn b{display:block;font-size:15px;line-height:1.2}
.meta{font-family:var(--font-metric);font-size:13px;color:var(--content-secondary);letter-spacing:.01em}
/* Store-Badges. Bis zum 06.09.2026 leere image-slot-Kacheln mit Rahmen —
   jetzt die echten Grafiken. Kein eigener Hintergrund und kein Rahmen: beide
   Badges bringen ihren eigenen mit, und ein zweiter darum herum sieht aus wie
   ein Fehler. Feste Hoehe, Breite aus dem Seitenverhaeltnis. */
/* Beide Badges auf derselben Hoehe. Die Vorlagen in project/screenshots/
   tragen unterschiedlich viel Leerraum — Googles Datei hat 165 px
   durchsichtigen Rand oben und unten, also war der sichtbare Badge bei
   gleicher CSS-Hoehe halb so gross wie Apples. Die Dateien unter badges/
   sind auf ihren sichtbaren Bereich beschnitten; der Abstand, den Googles
   Richtlinie verlangt, kommt aus dem gap des .cta-Containers. */
.badge{display:inline-flex;height:60px;flex:0 0 auto;align-items:center}
.badge img{height:100%;width:auto;display:block}
.badge:focus-visible{outline:2px solid var(--purple-80);outline-offset:3px;border-radius:9px}
.spin{animation:rev 14s linear infinite;transform-origin:512px 512px}
.arm{transform-origin:912px 128px;animation:cue 1.5s cubic-bezier(.24,.9,.22,1) .35s both}
@keyframes cue{from{transform:rotate(-15deg)}to{transform:rotate(0)}}
@keyframes rev{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin,.arm{animation:none}html{scroll-behavior:auto}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--edge-hairline);border:1px solid var(--edge-hairline);border-radius:14px;overflow:hidden}
.fact{background:var(--surface-room);padding:22px 20px}
.sect--panel .fact{background:var(--surface-deck)}
.fact dt{font-family:var(--font-metric);font-size:clamp(24px,3vw,32px);font-weight:500;color:var(--purple-80);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fact dd{margin:6px 0 0;font-size:14px;color:var(--content-secondary);line-height:1.45}

/* steps + cards */
.grid{display:grid;gap:clamp(16px,2vw,24px)}
.g3{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--surface-panel);border:1px solid var(--edge-hairline);border-top-color:var(--edge-lit);border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.card p{color:var(--content-secondary);font-size:15.5px}
.num{font-family:var(--font-metric);font-size:13px;font-weight:500;color:var(--purple-80);letter-spacing:.08em}
.pill{align-self:flex-start;font-family:var(--font-label);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--purple-10);color:var(--purple-80)}
.pill--gold{background:var(--gold-wash);color:var(--gold-dim)}

/* quote strip */
.claims{display:grid;gap:1px;background:var(--edge-hairline);border-block:1px solid var(--edge-hairline)}
.claim{background:var(--surface-room);padding:26px var(--pad);font-size:clamp(18px,2.1vw,24px);font-weight:600;letter-spacing:-.01em;max-width:none}
.claim span{color:var(--purple-80)}

/* table */
.tw{overflow-x:auto;border:1px solid var(--edge-hairline);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px}
caption{text-align:left;padding:16px 20px;color:var(--content-secondary);font-size:14px}
th,td{text-align:left;padding:14px 20px;border-top:1px solid var(--edge-hairline);vertical-align:top}
thead th{border-top:0;font-family:var(--font-label);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--content-tertiary);font-weight:700}
tbody th{font-weight:600;color:var(--content-primary);width:34%}
td{color:var(--content-secondary)}
td.yes{color:var(--purple-80)}

/* screenshots */
/* Zwei statt vier nebeneinander. Die Aufnahmen sind App-Store-Bilder mit
   einer Ueberschrift IM Bild — bei einem Viertel der Breite war die
   unleserlich, und ein Bild, dessen Aussage man nicht lesen kann, ist
   Dekoration. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media(max-width:700px){.shots{grid-template-columns:1fr}}

/* Der Telefonrahmen ist weg. Die Aufnahmen bringen ihren eigenen mit —
   ein zweiter darum herum war ein Telefon im Telefon, und weil das innere
   Geraet nur einen Teil des Bildes einnimmt, sah das Ganze gestaucht aus.
   Geblieben ist eine weiche Kante und ein Schatten, damit die Kachel auf
   dem dunklen Grund nicht ausfranst. */
.phone{border-radius:22px;overflow:hidden;box-shadow:0 20px 44px rgba(0,0,0,.5)}
.phone picture,.phone img{display:block;width:100%;height:auto}
/* Kein aspect-ratio. Die Aufnahmen bringen ihre eigene mit (1284x2778),
   und width/height im <img> halten den Platz schon vor dem Laden frei. */
.shot figcaption{margin-top:12px;font-family:var(--font-label);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--content-secondary);text-align:center}

/* pricing */
.price{background:var(--surface-panel);border:1px solid var(--edge-hairline);border-top-color:var(--edge-lit);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:16px}
.price--hi{border-color:var(--purple-30);background:linear-gradient(180deg,var(--purple-10),var(--surface-panel) 58%)}
.amount{font-family:var(--font-metric);font-size:38px;font-weight:500;letter-spacing:-.02em}
.amount small{font-family:var(--font-core);font-size:15px;color:var(--content-secondary);letter-spacing:0}
.price ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15.5px;color:var(--content-secondary)}
.price li{padding-left:22px;position:relative}
.price .btn{align-self:flex-start}
.price li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;border:2px solid var(--purple-60)}
.price--hi li::before{border-color:var(--gold-dim)}

/* faq + glossary */
details{border-bottom:1px solid var(--edge-hairline);padding:18px 0}
details:first-of-type{border-top:1px solid var(--edge-hairline)}
summary{cursor:pointer;font-weight:600;font-size:clamp(16.5px,1.6vw,19px);list-style:none;display:flex;gap:14px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;font-family:var(--font-metric);color:var(--purple-80);font-size:20px;line-height:1.2}
details[open] summary::after{content:"–"}
details p{margin-top:12px;color:var(--content-secondary);max-width:74ch}
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2vw,26px)}
.gloss div{border-top:1px solid var(--edge-hairline);padding-top:14px}
.gloss dt{font-weight:600;margin-bottom:5px}
.gloss dd{margin:0;color:var(--content-secondary);font-size:15px}

/* signup + footer */
.signup{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
input[type=email]{flex:1 1 240px;min-height:52px;padding:0 16px;border-radius:12px;background:var(--surface-sunken);border:1px solid var(--edge-strong);color:var(--content-primary);font:inherit;font-size:16px}
input[type=email]::placeholder{color:var(--content-tertiary)}
input[type=email]:focus-visible{outline:2px solid var(--purple-60);outline-offset:2px}
button.btn{cursor:pointer;font-family:inherit}
.fine{font-size:13.5px;color:var(--content-secondary);margin-top:12px}
footer{border-top:1px solid var(--edge-hairline);padding-block:44px;color:var(--content-secondary);font-size:14.5px}
footer .wrap{display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer a{color:var(--content-secondary);text-decoration:none}
footer a:hover{color:var(--content-primary)}
.fnav{display:flex;gap:20px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--purple-60);outline-offset:3px;border-radius:4px}