/* ============================================================
   styles.css — gemeinsames Stylesheet für alle Seiten von
   The Analog Imagination Orchestra (Apple-Look).
   Eingebunden von: startseite-im-aufbau.html, impressum.html,
   datenschutz.html. Änderungen hier wirken auf alle drei.
   ============================================================ */
/* Gleiches Tokensystem wie die Apple-Variante — Konsistenz über
   Teaser- und spätere Vollversion hinweg. */
:root{
  --paper:#FBFBFD; --paper-2:#F5F5F7; --ink:#1D1D1F; --ink-dim:#6E6E73; --hair:#D2D2D7;
  --accent:#FF9F0A; --accent-2:#FF375F; --glass:rgba(255,255,255,.66);
  --sys:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(20px,6vw,80px); --maxw:1180px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sys); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding-block:clamp(64px,9vw,120px); }
.section--tint{ background:var(--paper-2); }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

.badge{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 22px;
  padding:7px 16px; border-radius:980px; background:var(--glass);
  border:1px solid rgba(255,255,255,.6); backdrop-filter:blur(14px);
  font-size:13px; font-weight:590; color:var(--ink);
}
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }

.eyebrow{ font-size:13px; font-weight:590; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 14px; }
h1,h2,h3{ margin:0; font-family:var(--sys); font-weight:650; letter-spacing:-0.03em; }
.h-hero{ font-size:clamp(40px,7.2vw,84px); line-height:1.05; letter-spacing:-0.035em; max-width:15ch; }
.h-hero b{ font-weight:650; background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.h-sec{ font-size:clamp(28px,4vw,46px); line-height:1.1; letter-spacing:-0.025em; max-width:16ch; }
.h-card{ font-size:20px; font-weight:600; letter-spacing:-0.015em; }
.lede{ font-size:clamp(17px,1.3vw,21px); font-weight:400; color:var(--ink-dim); max-width:40ch; line-height:1.45; }
.body-sm{ font-size:15px; color:var(--ink-dim); line-height:1.55; }
.center{ text-align:center; margin-inline:auto; }

.topbar{ position:sticky; top:0; z-index:30; height:52px; background:rgba(251,251,253,.78); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--hair); display:flex; align-items:center; }
.topbar__inner{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; justify-content:space-between; }
.brand{ font-size:13px; font-weight:650; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; }
.nav{ display:flex; gap:28px; }
.nav a{ font-size:12px; color:var(--ink); text-decoration:none; opacity:.86; }
.nav a:hover{ opacity:1; }
@media (max-width:600px){ .nav a:nth-child(1){ display:none; } }

.btn{ display:inline-flex; align-items:center; gap:6px; font-size:17px; padding:12px 24px; border-radius:980px; text-decoration:none; transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s ease, background-color .25s ease; }
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ opacity:.82; }
.btn--ghost{ border:1px solid var(--hair); color:var(--ink); }
.btn--ghost:hover{ background:rgba(0,0,0,.03); }
.btn--link{ padding:0; border-radius:0; color:var(--accent-2); font-weight:590; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px; }

.hero{ padding-top:clamp(60px,10vw,108px); padding-bottom:clamp(50px,7vw,84px); text-align:center; overflow:hidden; }
.orb{ position:absolute; z-index:-1; top:-10%; left:50%; translate:-50% 0; width:min(1100px,150vw); height:600px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,159,10,.4), transparent 70%) 30% 40%/55% 55% no-repeat,
             radial-gradient(closest-side, rgba(255,55,95,.32), transparent 70%) 68% 55%/55% 55% no-repeat;
  filter:blur(60px); opacity:.85; }
@media (prefers-reduced-motion:no-preference){ .orb{ animation:drift 22s ease-in-out infinite alternate; } }
@keyframes drift{ from{ transform:translateX(-3%) scale(1); } to{ transform:translateX(3%) translateY(2%) scale(1.06); } }

.hero__actions{ display:flex; justify-content:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero__note{ margin-top:18px; color:var(--ink-dim); font-size:13px; }

.glass-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:52px; }
@media (max-width:760px){ .glass-row{ grid-template-columns:1fr; } }
.glass{ background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.6); border-radius:22px; padding:26px 24px; text-align:left; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 28px rgba(0,0,0,.05); }
.glass p{ margin:8px 0 0; color:var(--ink-dim); font-size:15px; line-height:1.5; }

.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }
.split__head{ position:sticky; top:88px; }
@media (max-width:820px){ .split__head{ position:static; } }
.rule-rows{ border-top:1px solid var(--hair); }
.rule-row{ padding:24px 0; border-bottom:1px solid var(--hair); }
.rule-row h3{ font-size:17px; font-weight:600; letter-spacing:-0.01em; margin-bottom:8px; }
.rule-row p{ margin:0; color:var(--ink-dim); font-size:15.5px; line-height:1.55; }

.mixes{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px; }
@media (max-width:920px){ .mixes{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .mixes{ grid-template-columns:1fr; } }
.mix{ position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; isolation:isolate; box-shadow:0 10px 24px rgba(0,0,0,.14); }
.mix::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--g); }
.mix::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,0) 55%); }
.mix h3{ font-size:17px; font-weight:650; letter-spacing:-0.01em; }

.perms{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); margin-top:48px; }
@media (max-width:700px){ .perms{ grid-template-columns:1fr; } }
.perms h3{ font-size:15px; font-weight:650; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
.perms ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.perms li{ padding:12px 0; border-bottom:1px solid var(--hair); font-size:15px; color:var(--ink-dim); display:flex; gap:10px; }
.yes li::before{ content:"✓"; color:#2FA84A; font-weight:650; }
.no li::before{ content:"✕"; color:var(--accent-2); font-weight:650; }

/* ---------- Kontaktformular ---------- */
.contact-form{ max-width:560px; margin:44px auto 0; display:grid; gap:18px; text-align:left; }
.field{ display:grid; gap:6px; }
.field label{ font-size:13px; font-weight:590; color:var(--ink-dim); }
.field label span{ font-weight:400; }
.field input, .field textarea{
  font:inherit; font-size:16px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--hair); background:var(--paper); color:var(--ink); resize:vertical; width:100%;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--accent-2); outline-offset:1px; border-color:transparent; }
.consent{ font-size:13px; color:var(--ink-dim); line-height:1.55; margin:0; }
.consent a{ color:var(--accent-2); text-decoration:none; }
.form-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.form-status{ font-size:13px; color:var(--ink-dim); min-height:1.2em; }

.foot{ border-top:1px solid var(--hair); padding-block:32px; }
.foot__inner{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; align-items:center; }
.foot nav{ display:flex; flex-wrap:wrap; gap:18px; }
.foot a{ font-size:12px; color:var(--ink-dim); text-decoration:none; }
.foot a:hover{ color:var(--ink); }
.foot small{ font-size:12px; color:var(--ink-dim); }

/* ---------- Rechtstexte (Impressum/Datenschutz) ---------- */
.legal{ max-width:720px; }
.legal h2{ font-size:clamp(30px,4.4vw,44px); letter-spacing:-0.03em; line-height:1.08; margin-bottom:8px; }
.legal .lede{ max-width:60ch; }
.legal h3{ font-size:20px; font-weight:600; letter-spacing:-0.015em; margin:44px 0 12px; }
.legal h3:first-of-type{ margin-top:52px; }
.legal p{ color:var(--ink-dim); font-size:16px; line-height:1.65; margin:0 0 16px; }
.legal p strong{ color:var(--ink); font-weight:600; }
.legal ul{ margin:0 0 16px; padding-left:1.2em; color:var(--ink-dim); font-size:16px; line-height:1.65; }
.legal ul li{ margin-bottom:6px; }
.legal a{ color:var(--accent-2); text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px; }
.legal a:hover{ text-decoration-color:var(--accent-2); }
.legal .note{
  margin:18px 0 32px; padding:16px 20px; border-radius:14px;
  background:var(--paper-2); border:1px solid var(--hair);
  font-size:14px; color:var(--ink-dim); line-height:1.6;
}
.legal .placeholder{ color:var(--accent-2); font-weight:590; }
.legal .stamp{ margin-top:52px; padding-top:20px; border-top:1px solid var(--hair); font-size:13px; color:var(--ink-dim); }