/* ═════════════════════════════════════════════════════════════
   HUI WORLD PAGES — Vision-1.0-Designsystem der Themenwelten
   Referenz: /menschen (freigegeben) · gemeinsame Basis aller Welten
   ═════════════════════════════════════════════════════════════ */
/* ═══ MENSCHEN — Vision-1.0-Redesign (petrolgetönte Bühne, organische Akte) ═══ */
.m-hero{position:relative;z-index:1;overflow:hidden;background:#0B2B2E;color:#fff;display:flex;align-items:center;padding:150px 0 clamp(80px,9vw,120px)}
.m-hero-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 52% at 80% 16%,rgba(13,196,181,.17) 0,transparent 62%),radial-gradient(46% 40% at 10% 88%,rgba(244,115,85,.08) 0,transparent 66%),linear-gradient(180deg,rgba(4,20,22,.42),transparent 42%,rgba(4,20,22,.5))}
.m-hero-grid{position:relative;max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(40px,5vw,72px);align-items:center;width:100%}
.m-hero .hui-page-back{display:inline-block;color:rgba(250,247,242,.6);font-size:13px;font-weight:600;letter-spacing:.02em;margin-bottom:26px;transition:color .2s}
.m-hero .hui-page-back:hover{color:#fff}
.m-kicker{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#35D6C8;margin-bottom:16px}
.m-hero h1{font-size:clamp(38px,5.6vw,70px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:6px}
.m-script{font-family:'Brush Script MT','Segoe Script','Snell Roundhand',cursive;font-style:italic;font-size:clamp(22px,2.5vw,33px);color:rgba(250,247,242,.95);transform:rotate(-2deg);margin:6px 0 24px;line-height:1.2}
.m-hero-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:rgba(250,247,242,.8);max-width:54ch;margin-bottom:0}
.m-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.m-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:700;font-size:15.5px;letter-spacing:-.01em;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,background .25s,border-color .25s}
.m-btn-teal{background:#087F76;color:#fff;box-shadow:0 12px 30px -12px rgba(8,127,118,.85)}
.m-btn-teal:hover{background:#0DC4B5;transform:translateY(-2px);box-shadow:0 18px 38px -14px rgba(13,196,181,.7)}
.m-btn-glass{background:rgba(250,247,242,.07);border:1px solid rgba(250,247,242,.24);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.m-btn-glass:hover{background:rgba(250,247,242,.13);border-color:rgba(250,247,242,.4);transform:translateY(-2px)}
.m-hero-fig{position:relative;justify-self:end;width:100%;max-width:460px;margin:0}
.m-hero-fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28px;box-shadow:0 46px 90px -34px rgba(0,0,0,.6),0 0 0 1px rgba(250,247,242,.1)}
.m-hero-fig::before{content:'';position:absolute;right:-16px;bottom:-16px;width:58%;height:58%;border:1.5px solid rgba(13,196,181,.55);border-radius:32px;pointer-events:none}
.m-fig-chip{position:absolute;left:18px;bottom:18px;padding:9px 16px;border-radius:999px;background:rgba(11,43,46,.68);border:1px solid rgba(250,247,242,.18);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* ── Akt 1: Vielfalt (Creme, organischer Übergang) ── */
.m-vielfalt{position:relative;z-index:2;background:linear-gradient(180deg,var(--cream) 0,var(--cream-warm) 100%);border-radius:44px 44px 0 0;margin-top:-44px;padding:clamp(76px,9vw,124px) 0 clamp(56px,7vw,96px);overflow:hidden}
.m-vielfalt::before{content:'';position:absolute;left:50%;top:-1px;width:min(560px,70%);height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,var(--teal),var(--coral),transparent);opacity:.7}
.m-sec{max-width:1180px;margin:0 auto;padding:0 32px}
.m-sec .m-kicker{color:var(--teal-deep)}
.m-h2{font-weight:800;letter-spacing:-.03em;line-height:1.07;font-size:clamp(30px,4.4vw,52px);color:var(--ink);margin:12px 0 18px}
.m-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:var(--ink-body);max-width:60ch}
.m-vielfalt-grid{display:grid;grid-template-columns:1fr .9fr;gap:clamp(40px,5vw,72px);align-items:center}
.m-vielfalt-fig{position:relative;width:100%;max-width:480px;justify-self:end;margin:0}
.m-vielfalt-fig img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:26px;box-shadow:0 34px 70px -32px rgba(11,43,46,.4)}
.m-vielfalt-fig::before{content:'';position:absolute;left:-16px;top:-16px;width:52%;height:52%;border:1.5px solid rgba(13,196,181,.45);border-radius:30px;pointer-events:none}
.m-quote{margin:clamp(44px,6vw,72px) auto 0;max-width:880px;padding:clamp(28px,4vw,46px) clamp(26px,5vw,56px);background:#fff;border:1px solid rgba(20,31,34,.06);border-radius:26px;box-shadow:0 26px 64px -34px rgba(11,43,46,.3);text-align:center}
.m-quote p{font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.4;margin:0}
.m-quote p::before{content:'„';color:var(--coral);margin-right:2px}
.m-quote p::after{content:'“';color:var(--coral)}

/* ── Akt 2: Sichtbarkeit (dunkles Petrol-Band) ── */
.m-sichtbar{position:relative;background:linear-gradient(180deg,#0B2B2E 0,#10393D 100%);color:#fff;border-radius:44px;margin:clamp(20px,3vw,36px) auto 0;max-width:1244px;padding:clamp(76px,9vw,120px) 32px;overflow:hidden;text-align:center}
.m-word{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-weight:900;font-size:clamp(90px,15vw,210px);letter-spacing:.02em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(250,247,242,.08);white-space:nowrap;pointer-events:none;user-select:none}
.m-sichtbar h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:14px 0 20px;position:relative}
.m-sichtbar .m-kicker{color:#35D6C8;position:relative}
.m-sichtbar .m-lead{margin:0 auto;color:rgba(250,247,242,.8);max-width:62ch;position:relative}

/* ── Akt 3: Erste Schritte (5 Karten) ── */
.m-wie{background:var(--cream);padding:clamp(64px,8vw,112px) 0}
.m-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin-top:clamp(36px,5vw,56px)}
.m-card{position:relative;background:#fff;border:1px solid rgba(20,31,34,.055);border-radius:26px;padding:28px 24px 26px;box-shadow:0 22px 54px -36px rgba(11,43,46,.3);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;display:flex;flex-direction:column;gap:14px}
@media(hover:hover){.m-card:hover{transform:translateY(-6px);box-shadow:0 32px 62px -30px rgba(11,43,46,.4)}}
.m-card-icon{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:rgba(13,196,181,.14);border:1px solid rgba(13,196,181,.38);display:flex;align-items:center;justify-content:center}
.m-card-icon svg{width:20px;height:20px;stroke:#087F76;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.m-card-num{position:absolute;top:24px;right:24px;font-size:13px;font-weight:800;color:rgba(20,31,34,.16);letter-spacing:.06em}
.m-card h3{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.35;margin:0}
.m-card p{font-size:14.5px;color:var(--ink-body);line-height:1.6;margin:0}

/* ── Interaktion: Was bringst du mit? ── */
.m-bringst{max-width:820px;margin:clamp(56px,7vw,96px) auto 0;text-align:center;padding:0 32px}
.m-bringst h3{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.m-bringst-sub{font-size:15.5px;color:var(--muted);margin:0 0 28px}
.m-bringst .hui-interact-options{justify-content:center}
.m-bringst .hui-interact-chip{padding:12px 22px;font-size:14.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid rgba(20,31,34,.08);border-radius:999px;box-shadow:0 12px 30px -20px rgba(11,43,46,.35);transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s,box-shadow .3s}
.m-bringst .hui-interact-chip:hover{border-color:rgba(13,196,181,.55);transform:translateY(-2px);box-shadow:0 16px 34px -18px rgba(11,43,46,.4)}
.m-bringst .hui-interact-chip.selected{background:#087F76;border-color:#087F76;color:#fff;transform:translateY(-2px)}
.m-bringst .hui-interact-response-text{font-size:16px;color:var(--ink);line-height:1.6}

/* ── Abschluss: dunkle CTA-Bühne ── */
.m-cta{position:relative;background:linear-gradient(180deg,#0B2B2E 0,#0E3236 100%);color:#fff;border-radius:44px 44px 0 0;overflow:hidden;padding:clamp(88px,11vw,140px) 32px clamp(72px,9vw,110px);text-align:center}
.m-cta::before{content:'';position:absolute;left:50%;top:-1px;width:min(560px,70%);height:6px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:linear-gradient(90deg,transparent,var(--teal),var(--coral),transparent);opacity:.7}
.m-cta .m-kicker{color:#35D6C8}
.m-cta h2{font-size:clamp(30px,4.4vw,54px);font-weight:800;letter-spacing:-.03em;line-height:1.06;margin:12px 0 20px}
.m-cta-lead{font-size:clamp(16px,1.6vw,19px);line-height:1.65;color:rgba(250,247,242,.8);max-width:62ch;margin:0 auto 38px}
.m-cta-sub{font-size:13.5px;color:rgba(250,247,242,.5);margin:16px 0 34px}
.m-next{display:inline-flex;align-items:center;gap:8px;color:rgba(250,247,242,.75);font-size:14.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;border-bottom:1px solid rgba(250,247,242,.25);padding-bottom:3px;transition:color .25s,border-color .25s}
.m-next:hover{color:#fff;border-color:var(--teal)}

/* ── Responsive ── */
@media(max-width:1024px){
  .m-hero{padding-top:132px}
  .m-hero-grid{grid-template-columns:1fr;gap:44px}
  .m-hero-fig{justify-self:start;max-width:420px}
  .m-vielfalt-grid{grid-template-columns:1fr;gap:44px}
  .m-vielfalt-fig{justify-self:start}
}
@media(max-width:640px){
  .m-hero{padding:118px 0 64px}
  .m-hero-grid,.m-sec,.m-bringst{padding:0 20px}
  .m-vielfalt,.m-cta{border-radius:28px 28px 0 0}
  .m-sichtbar{border-radius:28px}
  .m-actions .m-btn{flex:1 1 100%}
  .m-hero-fig{max-width:320px}
  .m-word{font-size:88px;right:-6%}
}
@media(prefers-reduced-motion:reduce){
  .m-card,.m-btn,.hui-interact-chip{transition:none}
}


/* ═══ EDITORIALE KAPITEL-REIHEN (alle Welten) ═══ */
.m-chapters{display:flex;flex-direction:column;gap:clamp(56px,7vw,92px);margin-top:clamp(40px,5vw,64px)}
.m-chapter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.m-chapter:nth-child(even) .m-chapter-fig{order:-1}
.m-chapter-num{display:block;font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:14px}
.m-chapter-fig{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,43,46,.35);border:1px solid rgba(11,43,46,.06)}
.m-chapter-fig img{width:100%;height:auto;display:block}
.m-chapter h3{font-size:clamp(22px,2.4vw,29px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin-bottom:14px}
.m-chapter p{font-size:16px;line-height:1.75;color:var(--ink-body)}

/* ═══ SCHritte-TIMELINE IM DUNKLEN BAND (alle Welten) ═══ */
.m-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;position:relative;z-index:1;margin-top:clamp(36px,4vw,56px);text-align:left}
.m-step-num{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;color:#35D6C8;background:rgba(13,196,181,.09);border:1px solid rgba(53,214,200,.32);margin-bottom:16px}
.m-step-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.35;margin-bottom:7px}
.m-step-text{font-size:13.5px;line-height:1.6;color:rgba(250,247,242,.64)}
@media(max-width:1024px){.m-chapter{grid-template-columns:1fr;gap:28px}.m-chapter:nth-child(even) .m-chapter-fig{order:0}.m-steps{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:640px){.m-steps{grid-template-columns:1fr;gap:24px}}

/* ═══ DUNKLES BAND: ELEMENTE-LISTE MIT GEISTER-ZIFFERN (alle Welten) ═══ */
.m-items{display:grid;grid-template-columns:1fr 1fr;gap:26px clamp(32px,4vw,64px);position:relative;z-index:1;margin-top:clamp(36px,4vw,56px);text-align:left}
.m-item{display:flex;gap:16px;align-items:flex-start;padding-top:6px}
.m-item-num{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1;color:rgba(53,214,200,.34);min-width:46px}
.m-item-title{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.35;margin-bottom:6px}
.m-item-text{font-size:13.5px;line-height:1.6;color:rgba(250,247,242,.64)}
@media(max-width:768px){.m-items{grid-template-columns:1fr;gap:22px}}
/* Grid-Spiegelung fuer abwechselnde Bild/Text-Rhythmen */
.m-vielfalt-grid.rev .m-vielfalt-fig{order:-1}
@media(max-width:900px){.m-vielfalt-grid.rev .m-vielfalt-fig{order:0}}

/* Coral-Akzentvariante der Elemente-Liste (emotionale Welten) */
.m-items.coral .m-item-num{color:rgba(244,115,85,.42)}

/* ═══ EDITORIALER BILD-STREIFEN (volle Breite, alle Welten) ═══ */
.m-strip{max-width:1180px;margin:0 auto;padding:0 32px}
.m-strip-fig{position:relative;border-radius:28px;overflow:hidden;border:1px solid rgba(11,43,46,.06);box-shadow:0 40px 80px -40px rgba(11,43,46,.4);margin:clamp(8px,2vw,24px) 0}
.m-strip-fig img{width:100%;height:clamp(260px,42vw,460px);object-fit:cover;display:block}
.m-strip-cap{position:absolute;left:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);background:rgba(7,30,33,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:rgba(250,247,242,.92);font-size:13px;font-weight:600;letter-spacing:.02em;padding:10px 18px;border-radius:999px;border:1px solid rgba(53,214,200,.28)}


/* ═══ WIDE-SCREEN-STUFE (ab 2026-10-16): Website an große Monitore angepasst —
   Content-Spalte wächst kontrolliert mit dem Bildschirm, Nav folgt der Inhaltsspalte.
   Sichtprüfung: Desktop 1600+, WQHD 2560, Ultrawide 3440. Keine Änderungen unter 1600px. ═══ */
@media(min-width:1600px){ .m-hero-grid, .m-sec, .m-strip, .m-sichtbar{max-width:1440px} }
@media(min-width:2200px){ .m-hero-grid, .m-sec, .m-strip, .m-sichtbar{max-width:1600px} }