:root {
  --night: #07090b;
  --panel: #111315;
  --panel-soft: #181512;
  --ivory: #f5eee4;
  --muted: #b8b0aa;
  --copper: #d77a2b;
  --gold: #ffbd66;
  --ember: #ff8a2a;
  --green: #63e6b3;
  --line: rgba(255, 189, 102, .18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ivory);
  background:
    radial-gradient(circle at 82% 14%, rgba(215,122,43,.14), transparent 31rem),
    radial-gradient(circle at 12% 80%, rgba(99,230,179,.06), transparent 25rem),
    var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }
.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.sig {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 15px;
  border: 1px solid rgba(215,122,43,.5);
  background: linear-gradient(145deg, #27170e, #0d0e10);
  color: var(--gold); font: 700 29px/1 Georgia, serif;
}
.brand strong { display: block; font-size: 18px; letter-spacing: .02em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); letter-spacing: .18em; text-transform: uppercase; }
.status { display: flex; align-items: center; gap: 10px; color: #d8f7e9; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 13px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 9px rgba(99,230,179,.1), 0 0 24px rgba(99,230,179,.55); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
  gap: clamp(34px, 6vw, 86px);
  align-items: center;
  padding: clamp(54px, 8vw, 108px) 0 76px;
}
.eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .25em; font-weight: 800; font-size: 12px; }
h1 {
  margin: 18px 0 24px;
  max-width: 760px;
  font: 500 clamp(62px, 8.4vw, 124px)/.82 Georgia, "Times New Roman", serif;
  letter-spacing: -.055em;
}
h1 em { display: block; color: var(--gold); font-weight: 500; }
.lead { max-width: 680px; color: #ded7d0; font-size: clamp(18px, 2vw, 24px); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button {
  display: inline-flex; min-height: 50px; align-items: center; justify-content: center;
  padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 850;
  border: 1px solid rgba(255,255,255,.12);
}
.button.primary { color: #17100a; background: linear-gradient(120deg, var(--copper), var(--gold)); border: 0; }
.portrait {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 40px 40px 120px 40px;
  background: #0b0c0e; box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.portrait img { display: block; width: 100%; height: auto; filter: saturate(.92) contrast(1.03); }
.portrait::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent, rgba(5,6,7,.82)); pointer-events: none; }
.seal { position: absolute; z-index: 2; left: 26px; bottom: 24px; }
.seal strong { display: block; font: 500 32px/1 Georgia, serif; color: var(--gold); }
.seal span { display: block; margin-top: 6px; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .28em; text-transform: uppercase; }
.manifesto { padding: 78px 0 94px; border-top: 1px solid var(--line); }
.manifesto-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px, 8vw, 110px); }
h2 { margin: 0; font: 500 clamp(42px, 5vw, 74px)/.95 Georgia, serif; letter-spacing: -.035em; }
.copy { color: #d8d0c9; font-size: 19px; line-height: 1.75; }
.copy p:first-child { margin-top: 0; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.card { min-height: 190px; padding: 25px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(215,122,43,.045)); }
.card b { display: block; color: var(--gold); font: 500 28px/1.1 Georgia, serif; margin-bottom: 16px; }
.card span { color: var(--muted); line-height: 1.55; }
.quote { margin: 80px 0 0; padding: 42px; border-left: 3px solid var(--copper); background: rgba(215,122,43,.055); font: italic 500 clamp(27px, 3.6vw, 48px)/1.25 Georgia, serif; }
.quote small { display: block; margin-top: 20px; color: var(--muted); font: 800 11px/1.2 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; }
footer { padding: 32px 0 45px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.footer-row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .portrait { max-width: 620px; justify-self: center; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 1180px); }
  .topbar { min-height: 72px; }
  .brand small { display: none; }
  .status { font-size: 10px; letter-spacing: .09em; }
  h1 { font-size: clamp(54px, 18vw, 80px); }
  .hero { padding-top: 42px; }
  .portrait { border-radius: 28px 28px 74px 28px; }
  .quote { padding: 28px 24px; }
}
/* ANGELSTYLE™ PERSONAL SONG PLAYER · 2026-09-04 */
.angel-music{padding:90px 0;border-top:1px solid var(--line);background:radial-gradient(circle at 78% 35%,rgba(215,122,43,.14),transparent 30rem)}
.angel-music-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(36px,7vw,92px);align-items:center}.angel-music-intro h2 em{color:var(--gold);font-weight:500}.angel-music-intro p{max-width:35rem;margin:24px 0 30px;color:var(--muted);font-size:18px;line-height:1.7}
.angel-player{min-width:0;padding:clamp(22px,4vw,42px);border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,#1a1511,#0c0e10);box-shadow:0 28px 75px rgba(0,0,0,.45)}.angel-player-count{color:#80776f;font:800 12px ui-monospace,monospace;letter-spacing:.16em}.angel-player-edition{margin:24px 0 8px;color:var(--green);font-size:11px;font-weight:900;letter-spacing:.18em}.angel-player h3{margin:0 0 22px;color:var(--gold);font:500 clamp(32px,4.5vw,58px)/1 Georgia,serif;letter-spacing:-.035em;overflow-wrap:anywhere}.angel-player audio{display:block;width:100%;margin-bottom:15px;accent-color:var(--copper)}
.angel-player-controls{display:flex;flex-wrap:wrap;gap:9px}.angel-player-controls button,.angel-choice{appearance:none;border:1px solid rgba(255,255,255,.12);background:#111315;color:var(--ivory);cursor:pointer}.angel-player-controls button{padding:11px 14px;border-radius:999px;font-weight:800}.angel-player-controls button:hover,.angel-player-controls button.active,.angel-choice:hover,.angel-choice.active{border-color:rgba(255,189,102,.65);background:#2b1b10;color:var(--gold)}
.angel-playlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}.angel-choice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;padding:13px;border-radius:14px;text-align:left}.angel-choice span{color:var(--ember);font:800 11px ui-monospace,monospace}.angel-choice strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.angel-player-note{margin:13px 0 0;color:#918982;font-size:12px}
@media(max-width:860px){.angel-music-grid{grid-template-columns:1fr}.angel-player{max-width:720px;width:100%}}
@media(max-width:560px){.angel-music{padding:64px 0}.angel-player{padding:18px;border-radius:22px}.angel-playlist{grid-template-columns:1fr}.angel-player-controls button{flex:1 1 calc(50% - 9px)}}


/* --- ALS ANGEL™ IHRE STIMME FAND --- */
.voice-reveal {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 24% 48%, rgba(117, 236, 235, 0.13), transparent 34%),
    radial-gradient(circle at 76% 22%, rgba(194, 116, 255, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(8, 18, 24, 0.98), rgba(11, 12, 18, 0.98));
}

.voice-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(141, 238, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(141, 238, 235, 0.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, black, transparent 68%);
}

.voice-reveal-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}

.voice-reveal-art {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 244, 240, 0.38);
  border-radius: 26px;
  background: #071214;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.46),
    0 0 42px rgba(111, 236, 231, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.voice-reveal-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -92px 72px -48px rgba(1, 7, 9, 0.95);
}

.voice-reveal-art img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1.01);
}

.voice-reveal-art figcaption {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 18px;
  left: 22px;
  color: rgba(234, 255, 254, 0.82);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.voice-reveal-copy h2 {
  max-width: 760px;
  margin: 0 0 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5.2vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.voice-reveal-copy h2 em {
  color: #96f2ed;
  font-weight: 400;
}

.voice-reveal-lead {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.78;
}

.voice-reveal-note {
  max-width: 620px;
  margin: 24px 0 0;
  padding-left: 18px;
  border-left: 2px solid rgba(145, 241, 236, 0.58);
  color: rgba(236, 244, 247, 0.86);
  line-height: 1.65;
}

.voice-reveal-copy .button {
  margin-top: 30px;
}

@media (max-width: 860px) {
  .voice-reveal {
    padding: 72px 0;
  }

  .voice-reveal-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .voice-reveal-art {
    width: min(100%, 560px);
  }
}

@media (max-width: 560px) {
  .voice-reveal {
    padding: 58px 0;
  }

  .voice-reveal-grid {
    gap: 34px;
  }

  .voice-reveal-art {
    border-radius: 20px;
  }

  .voice-reveal-art figcaption {
    right: 16px;
    bottom: 14px;
    left: 16px;
    font-size: 0.64rem;
  }
}


/* ANGEL™ ZIEHT INS DIGITALE ZUHAUSE EIN · 11.09.2026 */
.angel-homecoming{padding:90px 0;border-top:1px solid var(--line);background:radial-gradient(circle at 16% 28%,rgba(99,230,179,.09),transparent 28rem),linear-gradient(135deg,rgba(8,15,13,.96),rgba(15,12,11,.98))}
.angel-homecoming-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,7vw,92px);align-items:start}
.angel-homecoming h2 em{color:var(--green);font-weight:500}
.angel-homecoming-copy{color:#d8d0c9;font-size:19px;line-height:1.75}
.angel-homecoming-copy p:first-child{margin-top:0}
.angel-homecoming-copy blockquote{margin:30px 0;padding:24px 28px;border-left:3px solid var(--gold);background:rgba(255,189,102,.055);color:var(--ivory);font:italic 500 clamp(24px,3vw,38px)/1.3 Georgia,serif}
.angel-homecoming-copy .button{margin-top:18px}
@media(max-width:860px){.angel-homecoming-grid{grid-template-columns:1fr}}
@media(max-width:560px){.angel-homecoming{padding:64px 0}.angel-homecoming-copy{font-size:17px}.angel-homecoming-copy blockquote{padding:21px 20px}}