/* Ardi-Premiumbereich (Startseite) und Ardi-Seite (ardi.html) im Lumen-Stil der App.
   Immer dunkel, egal ob die Seite hell oder dunkel ist - so hebt sich Ardi ab. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/cormorant-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/cormorant-300i.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/dmmono-400.woff2") format("woff2"); }

.lumen {
  --l-bg: #060608;
  --l-bg2: #0d0c10;
  --l-text: #cfc6b8;
  --l-weiss: #f4efe6;
  --l-amber: #f5c97a;
  --l-amber-dk: #d9a54f;
  --l-linie: rgba(245, 201, 122, .18);
  --l-serif: "Cormorant Garamond", Georgia, serif;
  --l-mono: "DM Mono", ui-monospace, Consolas, monospace;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 38%, #1a1510 0%, var(--l-bg) 62%);
  color: var(--l-text);
}
.lumen a { color: inherit; }

/* Lichtkugel, zwei drehende Ringe, Funken */
.l-buehne { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.l-glut {
  position: absolute; left: 50%; top: 42%; width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 201, 122, .20) 0%, rgba(245, 201, 122, .06) 34%, transparent 62%);
  animation: l-atmen 7s ease-in-out infinite;
}
.l-ring {
  position: absolute; left: 50%; top: 42%; border-radius: 50%;
  border: 1px solid var(--l-linie);
}
.l-ring.a { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-style: dashed; border-color: rgba(245, 201, 122, .10); animation: l-dreh 80s linear infinite; }
.l-ring.b { width: 400px; height: 400px; margin: -200px 0 0 -200px; animation: l-dreh 48s linear infinite reverse; }
.l-ring.b::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--l-amber); box-shadow: 0 0 14px 3px rgba(245, 201, 122, .7);
}
.l-funke {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--l-amber);
  opacity: 0; animation: l-funkeln 5s ease-in-out infinite;
}
.l-funke:nth-child(4) { left: 18%; top: 30%; animation-delay: .4s; }
.l-funke:nth-child(5) { left: 76%; top: 22%; animation-delay: 1.6s; }
.l-funke:nth-child(6) { left: 64%; top: 70%; animation-delay: 2.7s; }
.l-funke:nth-child(7) { left: 28%; top: 76%; animation-delay: 3.5s; }
.l-funke:nth-child(8) { left: 86%; top: 52%; animation-delay: 1.1s; }
.l-funke:nth-child(9) { left: 10%; top: 58%; animation-delay: 4.2s; }

@keyframes l-dreh { to { transform: rotate(360deg); } }
@keyframes l-atmen { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes l-funkeln { 0%, 100% { opacity: 0; transform: scale(.6); } 45% { opacity: 1; transform: scale(1.6); } }

.l-eyebrow {
  display: inline-flex; align-items: center; gap: 16px; margin: 0 0 22px;
  font: 400 .74rem/1 var(--l-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--l-amber);
}
.l-eyebrow::before, .l-eyebrow::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: .6; }
.l-titel {
  margin: 0 0 18px; font: 300 clamp(2.5rem, 7vw, 4.6rem)/1.05 var(--l-serif); color: var(--l-weiss); letter-spacing: -.01em;
}
.l-titel em { display: block; font-style: italic; color: var(--l-amber); }
.l-text { max-width: 58ch; margin: 0 auto 26px; font: 400 .95rem/1.8 var(--l-mono); color: var(--l-text); }

.l-exklusiv {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 6px 16px;
  border: 1px solid var(--l-linie); border-radius: 999px;
  font: 400 .72rem/1 var(--l-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--l-amber);
  background: rgba(245, 201, 122, .05);
}
.l-exklusiv::before { content: "✦"; font-size: .9rem; }

.l-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.l-knopf {
  display: inline-block; padding: 15px 34px; border-radius: 6px; border: 1px solid var(--l-amber);
  background: var(--l-amber); color: #15110b !important; text-decoration: none;
  font: 500 .8rem/1 var(--l-mono); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 10px 40px -12px rgba(245, 201, 122, .6);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.l-knopf:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(245, 201, 122, .8); background: #f8d596; }
.l-knopf.leise { background: transparent; color: var(--l-amber) !important; box-shadow: none; }
.l-knopf.leise:hover { background: rgba(245, 201, 122, .1); }

/* Laufband */
.l-band {
  display: flex; overflow: hidden; border-top: 1px solid var(--l-linie); border-bottom: 1px solid var(--l-linie);
  background: rgba(255, 255, 255, .015);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.l-band div { display: flex; flex: none; gap: 56px; padding: 16px 28px; animation: l-lauf 38s linear infinite; }
.l-band span { font: 400 .74rem/1 var(--l-mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(207, 198, 184, .6); white-space: nowrap; }
.l-band span::before { content: "◆"; color: var(--l-amber); margin-right: 56px; font-size: .6rem; vertical-align: middle; }
@keyframes l-lauf { to { transform: translateX(-100%); } }

/* ---------- Teaser auf der Startseite ---------- */
.ardi-teaser { text-align: center; }
.ardi-teaser .l-innen { position: relative; max-width: 860px; margin: 0 auto; padding: clamp(80px, 12vh, 120px) max(18px, 5vw) clamp(60px, 9vh, 90px); }
.l-preis { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: 0 0 28px; }
.l-preis b { font: 300 clamp(2.6rem, 6vw, 3.6rem)/1 var(--l-serif); color: var(--l-weiss); }
.l-preis span { font: 400 .74rem/1.4 var(--l-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--l-amber); text-align: left; }
.l-merkmale { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 34px; padding: 0; list-style: none; max-width: 720px; }
.l-merkmale li {
  padding: 8px 16px; border: 1px solid var(--l-linie); border-radius: 999px;
  font: 400 .78rem/1.3 var(--l-mono); color: var(--l-text); background: rgba(255, 255, 255, .02);
}

/* Navigation: Ardi-Punkt mit Stern */
.main-nav a.nav-ardi { color: var(--gold); font-weight: 500; }
.main-nav a.nav-ardi::before { content: "✦ "; }

/* ---------- Ardi-Seite ---------- */
body.ardi-seite { background: #060608; }
.ardi-seite .site-header { background: rgba(6, 6, 8, .88); border-bottom-color: rgba(245, 201, 122, .14); }
.ardi-seite .site-header .brand-name, .ardi-seite .main-nav a { color: #e8e0d3; }
.ardi-seite .main-nav a:hover { color: var(--gold); }
.ardi-seite .theme-toggle { display: none; }
.l-hero { min-height: calc(100vh - 80px); display: grid; place-items: center; text-align: center; padding: 60px max(18px, 5vw); }
.l-abschnitt { position: relative; max-width: 1100px; margin: 0 auto; padding: clamp(60px, 10vh, 110px) max(18px, 5vw); }
.l-nummer { display: block; margin-bottom: 12px; font: 400 .72rem/1 var(--l-mono); letter-spacing: .3em; color: var(--l-amber); }
.l-h2 { margin: 0 0 16px; font: 300 clamp(2rem, 4.6vw, 3rem)/1.1 var(--l-serif); color: var(--l-weiss); }
.l-h2 em { font-style: italic; color: var(--l-amber); }
.l-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 34px; }
.l-karte {
  position: relative; padding: 28px 26px; border: 1px solid rgba(245, 201, 122, .12); border-radius: 14px;
  background: linear-gradient(160deg, rgba(245, 201, 122, .06), rgba(255, 255, 255, .01) 60%);
  transition: border-color .3s, transform .3s;
}
.l-karte:hover { border-color: rgba(245, 201, 122, .35); transform: translateY(-3px); }
.l-karte h3 { margin: 0 0 10px; font: 400 1.35rem/1.2 var(--l-serif); color: var(--l-weiss); }
.l-karte p { margin: 0; font: 400 .85rem/1.75 var(--l-mono); color: var(--l-text); }
.l-karte i { display: block; width: 28px; height: 1px; margin-bottom: 18px; background: var(--l-amber); box-shadow: 0 0 10px rgba(245, 201, 122, .8); }

.l-vergleich { margin-top: 34px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(245, 201, 122, .14); background: #000; }
.l-vergleich.ba { padding: 0; box-shadow: none; }
.l-vergleich .ba-label { background: rgba(6, 6, 8, .75); color: var(--l-amber); font-family: var(--l-mono); }

.l-angebot {
  position: relative; max-width: 620px; margin: 34px auto 0; padding: clamp(32px, 5vw, 52px); text-align: center;
  border-radius: 18px; border: 1px solid rgba(245, 201, 122, .35);
  background: radial-gradient(ellipse at 50% 0%, rgba(245, 201, 122, .14), transparent 70%), #0b0a0d;
  box-shadow: 0 30px 90px -40px rgba(245, 201, 122, .45);
}
.l-angebot::before {
  content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--l-winkel, 0deg), transparent 0 70%, var(--l-amber) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: l-umlauf 6s linear infinite;
}
@property --l-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes l-umlauf { to { --l-winkel: 360deg; } }
.l-angebot ul { list-style: none; margin: 0 auto 30px; padding: 0; max-width: 380px; text-align: left; }
.l-angebot li { padding: 10px 0 10px 28px; border-bottom: 1px solid rgba(245, 201, 122, .1); position: relative; font: 400 .85rem/1.6 var(--l-mono); }
.l-angebot li::before { content: "✦"; position: absolute; left: 0; color: var(--l-amber); }
.l-klein { margin: 18px 0 0; font: 400 .74rem/1.7 var(--l-mono); color: rgba(207, 198, 184, .65); }
.l-faq { max-width: 760px; margin: 30px auto 0; }
.l-faq details { border-bottom: 1px solid rgba(245, 201, 122, .14); padding: 18px 0; }
.l-faq summary { cursor: pointer; font: 400 1.2rem/1.4 var(--l-serif); color: var(--l-weiss); list-style: none; }
.l-faq summary::-webkit-details-marker { display: none; }
.l-faq summary::after { content: "+"; float: right; color: var(--l-amber); transition: transform .2s; }
.l-faq details[open] summary::after { transform: rotate(45deg); }
.l-faq p { margin: 12px 0 0; font: 400 .85rem/1.8 var(--l-mono); }
.ardi-seite .site-footer { background: #060608; border-top: 1px solid rgba(245, 201, 122, .12); color: #9b9285; }

/* Einblenden beim Scrollen (Klasse setzt ardi.js) */
.l-auf { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.l-auf.sichtbar { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .l-ring.a { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .l-ring.b { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
  .l-knopf { width: 100%; max-width: 320px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lumen *, .lumen *::before, .lumen *::after { animation: none !important; }
  .l-auf { opacity: 1; transform: none; }
}

/* Kapitel-Überschrift oben an Ardi/Editor, damit man zwei Werkzeuge erkennt (21.10.2026) */
.l-kapitel { position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; max-width: 1100px; margin: 0 auto; padding: 26px max(18px, 5vw) 0;
  font: 500 .72rem/1.4 var(--l-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--l-amber); text-align: left; }
.l-kapitel::after { content: ""; flex: 1; min-width: 30px; height: 1px; background: linear-gradient(90deg, var(--l-linie), transparent); }
.editor-teaser { border-top: 1px solid var(--l-linie); background: radial-gradient(ellipse at 50% 30%, #15120e 0%, var(--l-bg) 65%); }
.editor-teaser .l-innen { padding-bottom: 40px; }
.l-vorschau { margin: 0 auto; max-width: 1060px; padding: 0 max(18px, 5vw) clamp(60px, 9vh, 90px); }
.l-vorschau img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--l-linie); box-shadow: 0 30px 80px rgba(0, 0, 0, .65), 0 0 60px rgba(245, 201, 122, .08); }
.section.trenn-band { padding-top: clamp(48px, 7vh, 72px); padding-bottom: clamp(40px, 6vh, 60px); }
.section.trenn-band .section-head { margin-bottom: 0; }