/* =========================================================
   Bella Wildherz · Hauptwelten 2026-09-24
   Gemeinsames Layout für Hören, Material, Forschen, Rausgehen,
   Lesen, Bella und Unterstützen.
   Bannerbilder werden später nur als Dateien in /Bilder ergänzt.
   ========================================================= */

:root{
  --world-banner-height:clamp(510px,calc(42vw + 100px),720px);
  --world-banner-height-tablet:490px;
  --world-banner-height-mobile:410px;
}

.world-main-v2{
  width:min(1180px,calc(100% - 28px));
  margin:0 auto 70px;
  overflow:visible;
}

body[data-world="hoeren"]{--world-zone-bg:#dfe9d8;--world-fallback-a:#f0ebfb;--world-fallback-b:#c7bce4}
body[data-world="material"]{--world-zone-bg:#f3e7dc;--world-fallback-a:#f9eadf;--world-fallback-b:#ddbea7}
body[data-world="forschen"]{--world-zone-bg:#dfeee9;--world-fallback-a:#e0f2ed;--world-fallback-b:#9bcac1}
body[data-world="rausgehen"]{--world-zone-bg:#dfead9;--world-fallback-a:#e8f1e2;--world-fallback-b:#a9c49d}
body[data-world="lesen"]{--world-zone-bg:#eae4d9;--world-fallback-a:#f1ece2;--world-fallback-b:#cdbfa7}
body[data-world="bella"]{--world-zone-bg:#dfe8ed;--world-fallback-a:#e7f0f5;--world-fallback-b:#adc4d0}
body[data-world="unterstuetzen"]{--world-zone-bg:#eee3dc;--world-fallback-a:#f6ebe4;--world-fallback-b:#d5b8a5}

/* ---------- gemeinsamer Welt-Header ---------- */
.world-intro-v2{
  position:relative;
  width:100vw;
  margin:18px calc(50% - 50vw) 34px;
  padding-bottom:14px;
}

.world-banner-v2{
  --world-banner-image:none;
  position:relative;
  width:100%;
  min-height:var(--world-banner-height);
  overflow:visible;
  background-image:
    var(--world-banner-image),
    radial-gradient(circle at 76% 24%,rgba(255,255,255,.40),transparent 18%),
    radial-gradient(circle at 23% 67%,rgba(255,255,255,.24),transparent 20%),
    linear-gradient(135deg,var(--world-fallback-a),var(--world-fallback-b));
  background-position:center,center,center,center;
  background-size:cover,auto,auto,cover;
  background-repeat:no-repeat;
}

.world-banner-v2::before{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:112px;
  z-index:2;
  pointer-events:none;
  background:bottom center/100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f4ec' d='M0 78 C75 112 149 46 228 74 C311 104 395 44 483 72 C566 98 649 45 733 72 C820 100 909 47 997 75 C1083 102 1174 47 1261 74 C1329 95 1387 81 1440 75 L1440 140 L0 140 Z'/%3E%3C/svg%3E");
}

.world-banner-v2::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:24%;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(24,48,36,.07));
}

.world-banner-v2:not(.has-banner)::after{
  height:100%;
  background:
    linear-gradient(155deg,transparent 0 44%,rgba(70,100,73,.16) 44% 62%,transparent 62%),
    linear-gradient(25deg,transparent 0 56%,rgba(255,255,255,.16) 56% 72%,transparent 72%);
}

.world-titlebar-v2{
  position:relative;
  z-index:3;
  width:min(1180px,calc(100% - 28px));
  margin:-24px auto 0;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  align-items:center;
  gap:14px;
}

.world-title-icon-v2{
  width:72px;height:72px;
  display:grid;place-items:center;
  border:7px solid #f6f4ec;
  border-radius:50%;
  background:var(--world-soft);
  box-shadow:0 8px 22px rgba(37,55,43,.11);
}
.world-title-icon-v2 img{width:31px;height:31px}
.world-title-copy-v2{padding-top:27px}
.world-title-copy-v2 .eyebrow{color:var(--world)}
.world-title-copy-v2 h1{
  margin:1px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.2rem,4vw,3.7rem);
  line-height:.95;
}

/* ---------- Inhaltsrhythmus ---------- */
.world-content-section{
  margin:54px 0 72px;
}

.world-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.world-section-head h2{
  margin:2px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.9rem,3.5vw,2.9rem);
  line-height:1.02;
}
.world-section-head .count{flex:0 0 auto}
.world-kicker{
  display:inline-block;
  color:var(--world);
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.world-help{
  margin:6px 0 0;
  max-width:64ch;
  color:var(--muted);
  font-size:.79rem;
  line-height:1.55;
}

/* ---------- vollbreite Farbzone ---------- */
.world-zone-v2{
  position:relative;
  isolation:isolate;
  width:100vw;
  margin:92px calc(50% - 50vw);
  padding:76px max(calc((100vw - 1180px)/2),14px) 86px;
  background:var(--world-zone-bg);
}
.world-zone-v2::before,
.world-zone-v2::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0;right:0;
  height:72px;
  pointer-events:none;
  background:bottom center/100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23dfe9d8' d='M0 64 C82 35 150 87 231 61 C314 34 381 88 466 63 C553 37 622 86 708 64 C795 42 861 91 947 62 C1033 33 1106 89 1191 62 C1275 35 1342 80 1440 57 L1440 120 L0 120 Z'/%3E%3C/svg%3E");
  opacity:0;
}
.world-zone-v2::before{top:-58px}
.world-zone-v2::after{bottom:-58px;transform:rotate(180deg)}

/* individuelle Zonenfarbe ohne duplizierte SVG-Dateien */
body[data-world="hoeren"] .world-zone-v2::before,
body[data-world="hoeren"] .world-zone-v2::after{opacity:1}
body[data-world="material"] .world-zone-v2::before,
body[data-world="material"] .world-zone-v2::after{opacity:1;filter:hue-rotate(326deg) saturate(.72) brightness(1.04)}
body[data-world="forschen"] .world-zone-v2::before,
body[data-world="forschen"] .world-zone-v2::after{opacity:1;filter:hue-rotate(150deg) saturate(.42) brightness(1.04)}
body[data-world="rausgehen"] .world-zone-v2::before,
body[data-world="rausgehen"] .world-zone-v2::after{opacity:1}
body[data-world="lesen"] .world-zone-v2::before,
body[data-world="lesen"] .world-zone-v2::after{opacity:1;filter:saturate(.35) sepia(.10) brightness(1.02)}
body[data-world="bella"] .world-zone-v2::before,
body[data-world="bella"] .world-zone-v2::after{opacity:1;filter:hue-rotate(165deg) saturate(.28) brightness(1.04)}
body[data-world="unterstuetzen"] .world-zone-v2::before,
body[data-world="unterstuetzen"] .world-zone-v2::after{opacity:1;filter:hue-rotate(318deg) saturate(.45) brightness(1.04)}

.world-zone-inner-v2{width:min(1180px,100%);margin:auto}

/* ---------- Auswahl-/Informationskarten ---------- */
.world-choice-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.world-choice-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.world-choice-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.world-choice-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  min-height:220px;
  padding:18px;
  color:inherit;
  text-decoration:none;
  border:1px solid rgba(73,96,78,.14);
  background:rgba(255,253,248,.91);
  box-shadow:0 10px 26px rgba(37,55,43,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.world-choice-card:nth-child(4n+1){border-radius:24% 12% 18% 10%/14% 21% 11% 18%}
.world-choice-card:nth-child(4n+2){border-radius:12% 22% 11% 20%/20% 12% 22% 11%}
.world-choice-card:nth-child(4n+3){border-radius:21% 11% 23% 13%/12% 22% 13% 20%}
.world-choice-card:nth-child(4n+4){border-radius:13% 23% 12% 21%/22% 11% 20% 13%}
.world-choice-card:hover{transform:translateY(-3px);box-shadow:0 15px 34px rgba(37,55,43,.10)}
.world-choice-icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  margin-bottom:22px;
  border-radius:50%;
  background:var(--world-soft);
}
.world-choice-icon img{width:26px;height:26px}
.world-choice-card h3{
  margin:auto 0 5px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.35rem;
  line-height:1.1;
}
.world-choice-card p{
  margin:0;
  color:var(--muted);
  font-size:.77rem;
  line-height:1.5;
}
.world-choice-card strong.world-card-action{
  margin-top:12px;
  color:var(--world);
  font-size:.72rem;
}

.world-action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:22px;
  border:1px solid rgba(73,96,78,.14);
  border-radius:24px;
  background:rgba(255,253,248,.88);
}
.world-action-row h3{margin:0 0 4px;font-family:Georgia,serif;font-size:1.4rem}
.world-action-row p{margin:0;color:var(--muted);font-size:.8rem}

.world-note-v2{
  max-width:780px;
  margin:58px auto 0;
  padding:22px 24px;
  border-radius:24px;
  background:var(--world-soft);
  text-align:center;
}
.world-note-v2 h2{margin:0 0 6px;font-size:1.55rem}
.world-note-v2 p{margin:0;color:var(--muted)}

/* Funktionale Elemente sollen in den Vordergrund, nicht in große Außenboxen. */
.world-functional-v2{
  margin:54px 0 72px;
}
.world-functional-v2>.section-headline{margin-bottom:14px}
.world-functional-v2>.section-headline h2,
.world-zone-v2>.section-headline h2{
  margin:2px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.9rem,3.5vw,2.9rem);
}

/* Bestehende Filter/Player/Karten bleiben funktional, wirken aber ruhiger. */
.world-main-v2 .research-filter-panel,
.world-main-v2 .mission-toolbar{
  box-shadow:none;
}
.world-main-v2 .research-project-card,
.world-main-v2 .research-tip-card,
.world-main-v2 .mission-sheet-card{
  box-shadow:0 8px 24px rgba(37,55,43,.055);
}

/* Unterstützen */
.support-choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.support-choice-card .support-amount{margin-top:auto}
.support-choice-card h3{margin-top:10px}

@media(max-width:980px){
  .world-choice-grid.cols-4,.support-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .world-banner-v2{min-height:var(--world-banner-height-tablet)}
  .world-banner-v2::before{height:88px}
  .world-titlebar-v2{grid-template-columns:68px minmax(0,1fr);margin-top:-20px}
  .world-title-icon-v2{width:68px;height:68px}
  .world-section-head{align-items:flex-start;flex-direction:column}
  .world-choice-grid,.world-choice-grid.cols-2{grid-template-columns:1fr}
  .world-zone-v2{padding-top:62px;padding-bottom:72px}
  .world-action-row{align-items:flex-start;flex-direction:column}
}
@media(max-width:560px){
  .world-main-v2{width:calc(100% - 20px)}
  .world-intro-v2{margin-top:14px}
  .world-banner-v2{min-height:var(--world-banner-height-mobile)}
  .world-banner-v2::before{height:66px}
  .world-titlebar-v2{width:calc(100% - 16px);grid-template-columns:62px minmax(0,1fr);gap:10px;margin-top:-16px}
  .world-title-icon-v2{width:62px;height:62px;border-width:6px}
  .world-title-icon-v2 img{width:27px;height:27px}
  .world-title-copy-v2{padding-top:22px}
  .world-title-copy-v2 h1{font-size:2.45rem}
  .world-choice-grid.cols-4,.support-choice-grid{grid-template-columns:1fr}
  .world-zone-v2{padding-left:10px;padding-right:10px}
}


/* ---------- Bildkarten der Material-Unterwelten ---------- */
.world-choice-card-image{
  min-height:330px;
  overflow:hidden;
}
.world-choice-media{
  display:block;
  height:160px;
  margin:-18px -18px 18px;
  overflow:hidden;
  background:var(--world-soft);
}
.world-choice-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .24s ease;
}
.world-choice-card-image:hover .world-choice-media img{transform:scale(1.025)}

@media(max-width:760px){
  .world-choice-card-image{min-height:300px}
  .world-choice-media{height:150px}
}