/* Startseite (Werbeseite wie Flyff Universe) im Stil des Aethoria-Logos:
   Himmelblau, weisse Kontur mit dunkelblauem Rand, Wolken in Rosa/Lavendel, Gold als Akzent. Das Spiel laeuft unter /play. */
:root {
  --sky-1: #bfe4ff; --sky-2: #e9f5ff; --blue: #1e8ff0; --blue-d: #0f62c2; --navy: #0e2a5a; --navy-2: #2a4a7f;
  --cloud-pink: #f4dcf3; --cloud-lav: #dcd6fb; --gold: #ffc928; --gold-d: #e39a0c; --white: #fff;
  --text: #17325f; --muted: #50648c;
  --head: "Baloo 2", "Fredoka", ui-rounded, system-ui, sans-serif; --body: "Nunito", ui-rounded, system-ui, sans-serif;
  --outline: 0 0 0 3px #fff, 0 0 0 5px var(--navy);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); font: 600 18px/1.55 var(--body); -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, #f6f0ff 100%) fixed;
  cursor: url(../assets/ui/cursor/c_default.png) 13 1, auto; }
a, button { cursor: url(../assets/ui/cursor/c_pointer.png) 13 1, pointer; }
img { display: block; max-width: 100%; }
.muted { color: var(--muted); }

/* Kopfzeile */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 8px 24px;
  background: rgba(255, 255, 255, .82); backdrop-filter: blur(10px); border-bottom: 3px solid rgba(30, 143, 240, .25); box-shadow: 0 6px 24px rgba(14, 42, 90, .08); }
.top-logo img { height: 48px; width: auto; }
.top-links { display: flex; gap: 6px; margin-left: auto; }
.top-links a { color: var(--navy-2); text-decoration: none; font: 700 17px var(--head); padding: 6px 14px; border-radius: 99px; transition: background .15s, color .15s; }
.top-links a:hover { background: rgba(30, 143, 240, .12); color: var(--blue-d); }

/* Knopf: goldener Stern-Look mit weisser Innenkontur und dunkelblauem Rand wie das Logo */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; border-radius: 99px; }
.btn.play { color: var(--navy); font: 800 19px var(--head); padding: 10px 26px; background: linear-gradient(#ffe46b, var(--gold) 55%, var(--gold-d));
  box-shadow: var(--outline), 0 8px 0 4px rgba(14, 42, 90, .18); text-shadow: 0 1px 0 rgba(255, 255, 255, .6); transition: transform .12s, filter .12s; }
.btn.play:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.05); }
.btn.play:active { transform: translateY(1px); }
.btn.play.small { padding: 6px 20px; font-size: 16px; }
.btn.play.big { font-size: 30px; padding: 16px 56px; line-height: 1.1; }
.btn.play small { font: 700 14px var(--body); margin-top: 2px; color: #7a4a00; text-shadow: none; }

/* Hero: Himmelsstadt mit weichem Himmel-Verlauf, Logo gross */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 60%; image-rendering: pixelated; transform: scale(1.05); animation: drift 34s ease-in-out infinite alternate; }
.hero::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 42%, rgba(233, 245, 255, .55) 0%, rgba(233, 245, 255, .1) 45%, rgba(14, 42, 90, .1) 80%),
              linear-gradient(transparent 62%, var(--sky-2) 98%); }
@keyframes drift { from { transform: scale(1.05) translateX(-1.5%); } to { transform: scale(1.05) translateX(1.5%); } }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 90px 16px 60px; text-align: center; }
.hero-logo { width: min(680px, 92vw); filter: drop-shadow(0 14px 30px rgba(14, 42, 90, .35)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
.hero-tag { margin: -10px 0 10px; font: 800 26px var(--head); color: #fff; -webkit-text-stroke: 1px var(--navy); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--navy), 0 6px 18px rgba(14, 42, 90, .5); }
.hero-online { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 16px; border-radius: 99px; background: rgba(255, 255, 255, .85); color: var(--navy); font-weight: 800; box-shadow: 0 4px 14px rgba(14, 42, 90, .15); }
.hero-online i { width: 10px; height: 10px; border-radius: 50%; background: #35c56a; box-shadow: 0 0 0 3px rgba(53, 197, 106, .25); }
.hero-down { position: absolute; bottom: 28px; left: 50%; z-index: 1; width: 22px; height: 22px; margin-left: -11px; border-right: 4px solid var(--blue); border-bottom: 4px solid var(--blue); border-radius: 2px; transform: rotate(45deg); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 6px; } }

/* Abschnitte mit Wolkenkante */
.sec { position: relative; padding: 90px 24px; max-width: 1180px; margin: 0 auto; }
.sec.alt { max-width: none; background: linear-gradient(180deg, #fff 0%, #f3ecff 100%); }
.sec.alt::before { content: ''; position: absolute; left: 0; right: 0; top: -38px; height: 40px;
  background: radial-gradient(40px 34px at 40px 40px, #fff 98%, transparent) 0 0 / 80px 40px repeat-x; }
.sec.alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.sec-title { margin: 0 0 8px; text-align: center; font: 800 44px/1.1 var(--head); color: var(--blue); -webkit-text-stroke: 2px var(--navy); paint-order: stroke fill;
  text-shadow: 0 0 0 #fff, 0 4px 0 var(--navy); letter-spacing: .5px; }
.sec-sub { margin: 0 auto 40px; max-width: 640px; text-align: center; color: var(--muted); }

.card { background: #fff; border-radius: 22px; box-shadow: 0 0 0 3px var(--navy), 0 12px 30px rgba(14, 42, 90, .12); overflow: hidden; }
.worlds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.world { transition: transform .18s; }
.world:hover { transform: translateY(-6px) rotate(-.4deg); }
.world img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; image-rendering: pixelated; border-bottom: 3px solid var(--navy); }
.world div { padding: 16px 20px 22px; }
.world h3 { margin: 0 0 6px; font: 800 24px/1.15 var(--head); color: var(--blue-d); }
.world p { margin: 0; color: var(--muted); font-size: 16px; }

.feats { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; margin-top: 34px; }
.feat-img { border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--navy), 0 20px 40px rgba(14, 42, 90, .2); transform: rotate(-1.2deg); }
.feat-img img { image-rendering: pixelated; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feat-list li { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.feat-list li::before { content: ''; grid-row: span 2; width: 26px; height: 26px; margin-top: 3px; background: var(--gold);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 0 var(--navy)); }
.feat-list b { font: 800 21px/1.2 var(--head); color: var(--navy); }
.feat-list span { color: var(--muted); font-size: 16px; }

.classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.cls { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 22px 26px; text-align: center; }
.cls canvas { width: 198px; height: 183px; image-rendering: pixelated; border-radius: 18px; }
.cls.fire canvas { background: radial-gradient(circle at 50% 70%, #ffd9c2, #fff3ea 70%); }
.cls.ice canvas { background: radial-gradient(circle at 50% 70%, #c7f0ff, #eefbff 70%); }
.cls.shadow canvas { background: radial-gradient(circle at 50% 70%, #e2d2ff, #f6f0ff 70%); }
.cls h3 { margin: 4px 0 0; font: 800 26px/1.1 var(--head); }
.cls.fire h3 { color: #f0621a; } .cls.ice h3 { color: #1e8ff0; } .cls.shadow h3 { color: #7a4fd6; }
.cls p { margin: 0; color: var(--muted); font-size: 16px; min-height: 52px; }
.cls dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 4px 0 10px; font-size: 15px; }
.cls dt { color: var(--muted); text-align: right; } .cls dd { margin: 0; text-align: left; color: var(--navy); font-weight: 800; }

.news { display: grid; gap: 18px; max-width: 820px; margin-top: 34px; }
.news-item { padding: 18px 22px; }
.news-item time { font-size: 14px; color: var(--muted); font-weight: 700; }
.news-item h3 { margin: 2px 0 6px; font: 800 24px/1.15 var(--head); color: var(--blue-d); }
.news-item p { margin: 0; color: var(--muted); font-size: 16px; }

.cta { position: relative; padding: 110px 24px 100px; text-align: center; background: linear-gradient(180deg, #f3ecff, var(--sky-1)); overflow: hidden; }
.cta::before, .cta::after { content: ''; position: absolute; border-radius: 50%; background: #fff; opacity: .9; filter: blur(1px); }
.cta::before { width: 340px; height: 120px; left: -60px; bottom: 30px; box-shadow: 120px -30px 0 10px #fff, 240px 10px 0 -10px var(--cloud-pink); }
.cta::after { width: 300px; height: 110px; right: -40px; top: 40px; box-shadow: -120px 20px 0 0 var(--cloud-lav), -220px -10px 0 -20px #fff; }
.cta h2 { position: relative; margin: 0 0 30px; font: 800 46px/1.1 var(--head); color: #fff; -webkit-text-stroke: 2px var(--navy); paint-order: stroke fill; text-shadow: 0 4px 0 var(--navy); }
.cta .btn { position: relative; }

.foot { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px 32px; color: var(--muted); font-weight: 700; background: var(--sky-1); }
.foot img { height: 40px; width: auto; }

@media (max-width: 900px) {
  .worlds, .classes { grid-template-columns: 1fr; }
  .feats { grid-template-columns: 1fr; }
  .top-links { display: none; }
  .top .btn { margin-left: auto; }
  .btn.play.big { font-size: 22px; padding: 14px 34px; }
  .sec { padding: 64px 16px; }
  .sec-title { font-size: 34px; }
  .hero-tag { font-size: 20px; }
  .cta h2 { font-size: 32px; }
}

/* Welt: vier Karten, Level-Hinweis */
.worlds { grid-template-columns: repeat(2, 1fr); }
.lv-pill { display: inline-block; margin-bottom: 6px; padding: 2px 12px; border-radius: 99px; font: 800 13px var(--head); color: #fff; background: var(--blue); box-shadow: 0 0 0 2px var(--navy); }
.lv-pill.gold { background: linear-gradient(#ffe46b, var(--gold)); color: var(--navy); }
/* Drachentempel-Abschnitt */
.sec.temple { max-width: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #e9f5ff 100%), url(../assets/intro/hero.jpg) center 40% / cover; position: relative; }
.sec.temple::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.88) 45%, rgba(255,255,255,.2) 100%); }
.temple-in { position: relative; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 460px; gap: 44px; align-items: center; }
.sec-title.left { text-align: left; margin: 4px 0 18px; }
.temple-img { border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--navy), 0 20px 40px rgba(14, 42, 90, .25); transform: rotate(1.2deg); }
@media (max-width: 900px) { .worlds { grid-template-columns: 1fr; } .temple-in { grid-template-columns: 1fr; } .sec.temple::before { background: rgba(255,255,255,.9); } }
.world img[src*="wild"] { object-position: center bottom; }