/* Startseiten-Test: nur Kennzahlenleiste. Live-CSS bleibt unangetastet. */

/* Alle Symbole bewusst in NorseStory-Gold. */
#zahlen .stat-icon img{
  filter:brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(731%) hue-rotate(358deg) brightness(91%) contrast(87%) !important;
  opacity:.98;
}
#zahlen .stat-icon-wyrd img{
  filter:drop-shadow(0 0 10px rgba(212,183,121,.12)) !important;
  object-fit:contain;
}

/* Desktop: fünf gleichwertige Kennzahlen. */
@media(min-width:1021px){
  #zahlen .stat-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important;}
  #zahlen .stat{
    grid-template-columns:46px minmax(0,1fr) !important;
    gap:14px !important;
    padding:31px 18px 27px !important;
  }
  #zahlen .stat-icon{width:46px !important;height:64px !important;}
  #zahlen .stat-icon img{width:42px !important;height:42px !important;}
  #zahlen .stat-icon-wyrd img{width:44px !important;height:44px !important;}
  #zahlen .stat-value{font-size:3.35rem !important;}
  #zahlen .stat-label{font-size:.78rem !important;letter-spacing:.1em !important;}
  #zahlen .stat-desc{font-size:.75rem !important;}
  #zahlen .stat:nth-child(5){border-right:1px solid rgba(211,180,118,.18);}
}

/* Tablet/Mobil: bestehendes 2x2 bleibt, Masterkennzahl volle Breite darunter. */
@media(max-width:1020px){
  #zahlen .stat-mythology{
    grid-column:1/-1 !important;
    border-left:1px solid rgba(211,180,118,.18) !important;
    border-right:1px solid rgba(211,180,118,.18) !important;
    border-top:1px solid rgba(211,180,118,.18) !important;
    background:radial-gradient(circle at 82% 42%,rgba(129,0,0,.15),transparent 42%);
  }
}

@media(max-width:760px){
  #zahlen .stat-mythology{
    display:grid !important;
    grid-template-columns:72px minmax(0,1fr) !important;
    align-items:center !important;
    gap:18px !important;
    min-height:205px !important;
    padding:30px 26px !important;
    text-align:left !important;
  }
  #zahlen .stat-mythology .stat-icon{
    width:72px !important;height:72px !important;margin:0 !important;
    display:grid !important;place-items:center !important;
  }
  #zahlen .stat-mythology .stat-icon img{width:64px !important;height:64px !important;}
  #zahlen .stat-mythology .stat-copy{display:block !important;}
  #zahlen .stat-mythology .stat-value{
    display:block !important;height:auto !important;font-size:3.65rem !important;line-height:.86 !important;
  }
  #zahlen .stat-mythology .stat-label{
    display:block !important;height:auto !important;margin-top:15px !important;padding:0 !important;font-size:.82rem !important;
  }
  #zahlen .stat-mythology .stat-desc{
    display:block !important;height:auto !important;margin-top:9px !important;padding:0 !important;font-size:.78rem !important;line-height:1.45 !important;
  }
}

@media(max-width:430px){
  /* Anders als bei den vier kleinen Karten bleibt die Erklärung der Masterkennzahl sichtbar. */
  #zahlen .stat-mythology small{display:block !important;}
  #zahlen .stat-mythology{grid-template-columns:60px minmax(0,1fr) !important;padding:27px 20px !important;gap:15px !important;}
  #zahlen .stat-mythology .stat-icon{width:60px !important;height:60px !important;}
  #zahlen .stat-mythology .stat-icon img{width:54px !important;height:54px !important;}
  #zahlen .stat-mythology .stat-value{font-size:3.25rem !important;}
}


/* === Startseiten-Test v2 · Pfad des Wissens mit vier Stationen === */
@media(min-width:1021px){
  .section-path .path-flow{
    grid-template-columns:
      minmax(0,1fr) 58px
      minmax(0,1fr) 58px
      minmax(0,1fr) 58px
      minmax(0,1fr);
    max-width:1480px;
  }
  .section-path .path-step{
    padding-inline:10px;
  }
  .section-path .path-step p:not(.path-overline){
    max-width:285px;
  }
  .section-path .path-connector{
    margin-top:50px;
  }
}

.section-path .path-seal-wyrd img{
  width:54px;
  height:54px;
  object-fit:contain;
  filter:brightness(0);
}

/* Masterkennzahl: identischer Goldton wie die vier vorhandenen Statistik-Icons.
   Das Wyrd-PNG wird dafür zuerst neutralisiert und anschließend eingefärbt. */
.stat-master .stat-icon img{
  filter:none;
}

/* Unterhalb Desktop greift weiterhin die vorhandene NorseStory-Logik:
   eine Station unter der anderen, ohne Verbindungspfeile. */
@media(max-width:1020px){
  .section-path .path-flow{
    grid-template-columns:1fr;
    gap:42px;
    max-width:650px;
  }
  .section-path .path-connector{
    display:none;
  }
}



/* =========================================================
   MYTHOLOGIE VERSTEHEN — STARTSEITE V8 / SCREEN TEASER
   ========================================================= */
.section-mythology-home{
  position:relative;overflow:hidden;padding:clamp(92px,7vw,132px) 0 clamp(94px,7vw,132px);
  background:radial-gradient(circle at 78% 42%,rgba(102,24,15,.24),transparent 38%),linear-gradient(112deg,#0d0c0b 0%,#151210 58%,#1a0e0b 100%);
  color:#d4b879;border-top:1px solid rgba(212,184,121,.12);border-bottom:1px solid rgba(212,184,121,.12);
}
.mythology-home-stage{position:relative;z-index:1}
.mythology-home-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:clamp(55px,7vw,120px);align-items:end;margin-bottom:clamp(54px,5vw,82px)}
.mythology-home-title .eyebrow{color:#b52a1e;margin-bottom:22px}
.mythology-home-title h2{margin:0;color:#ead7b0;font-family:var(--font-display,Georgia,serif);font-size:clamp(48px,4.1vw,72px);font-weight:400;line-height:1.02;letter-spacing:-.025em}
.mythology-home-intro{max-width:650px;padding-bottom:3px}
.mythology-home-intro p{margin:0;color:#9f8d77;font-size:clamp(15px,1vw,17px);line-height:1.75}
.mythology-home-intro .mythology-home-lead{color:#d8c29b;font-family:var(--font-display,Georgia,serif);font-size:clamp(21px,1.55vw,27px);line-height:1.45;margin-bottom:17px}
.mythology-home-intro strong{color:#cbb486}
.mythology-home-cta{margin-top:29px}

.mythology-showcase{display:grid;grid-template-columns:minmax(235px,.34fr) minmax(0,1.66fr);gap:clamp(30px,4vw,66px);align-items:center;padding:clamp(34px,4vw,60px) 0;border-top:1px solid rgba(212,184,121,.15);border-bottom:1px solid rgba(212,184,121,.15)}
.mythology-master-number{padding:8px 0 10px}
.mythology-master-kicker{display:block;color:#b52a1e;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}
.mythology-master-number > strong{display:block;color:#d4b879;font-family:var(--font-display,Georgia,serif);font-size:clamp(72px,6vw,108px);font-weight:400;line-height:.82;margin-bottom:15px}
.mythology-master-label{display:block;color:#d9c79f;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.mythology-master-number p{margin:0;max-width:300px;color:#8f7d68;font-size:14px;line-height:1.7}

.mythology-screens{position:relative;min-height:clamp(470px,38vw,650px);isolation:isolate}
.mythology-screen{position:absolute;margin:0;overflow:hidden;background:#0b0908;border:1px solid rgba(212,184,121,.28);box-shadow:0 28px 70px rgba(0,0,0,.42);transition:transform .45s ease,border-color .45s ease,box-shadow .45s ease}
.mythology-screen img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(1.04) brightness(.88);transition:filter .45s ease,transform .65s ease}
.mythology-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,5,.8) 0,transparent 34%);pointer-events:none}
.mythology-screen figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:18px;display:flex;align-items:center;gap:13px;color:#e3c993;text-transform:uppercase;font-size:10px;letter-spacing:.14em}
.mythology-screen figcaption span{color:#b52a1e;font-weight:800}.mythology-screen figcaption strong{font-weight:800}
.mythology-screen-main{z-index:3;left:4%;top:5%;width:56%;height:82%;transform:rotate(-1.1deg)}
.mythology-screen-worlds{z-index:2;right:2%;top:0;width:48%;height:57%;transform:rotate(1.2deg)}
.mythology-screen-time{z-index:4;right:7%;bottom:0;width:46%;height:48%;transform:rotate(.5deg)}
.mythology-screen:hover{z-index:8;border-color:rgba(212,184,121,.58);box-shadow:0 32px 85px rgba(0,0,0,.58)}
.mythology-screen:hover img{filter:saturate(1) contrast(1.03) brightness(1);transform:scale(1.015)}
.mythology-screen-main:hover{transform:rotate(-.4deg) translateY(-7px)}
.mythology-screen-worlds:hover{transform:rotate(.5deg) translateY(-7px)}
.mythology-screen-time:hover{transform:rotate(0deg) translateY(-7px)}

.mythology-home-principle{display:grid;grid-template-columns:170px 1fr;gap:30px;align-items:start;padding-top:25px}
.mythology-home-principle>span{color:#b52a1e;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.mythology-home-principle p{margin:0;color:#9d8a73;font-size:14px;line-height:1.7;max-width:980px}.mythology-home-principle strong{color:#d8c29b}

@media(max-width:980px){
 .mythology-home-head{grid-template-columns:1fr;gap:28px}.mythology-home-intro{max-width:720px}
 .mythology-showcase{grid-template-columns:1fr}.mythology-master-number{display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:end}.mythology-master-kicker,.mythology-master-number p{grid-column:1/-1}.mythology-master-label{padding-bottom:5px}.mythology-master-number p{max-width:520px}
 .mythology-screens{min-height:570px}
}
@media(max-width:650px){
 .section-mythology-home{padding:66px 0 72px}.mythology-home-title h2{font-size:clamp(42px,12vw,56px)}
 .mythology-home-intro .mythology-home-lead{font-size:21px}.mythology-home-cta{width:100%}
 .mythology-showcase{padding:34px 0}.mythology-master-number{display:block}.mythology-master-number > strong{font-size:78px}.mythology-master-label{margin-bottom:18px}
 .mythology-screens{min-height:520px}.mythology-screen figcaption{left:14px;right:14px;bottom:12px;font-size:9px}
 .mythology-screen-main{left:0;top:4%;width:76%;height:58%}.mythology-screen-worlds{right:0;top:0;width:57%;height:39%}.mythology-screen-time{right:2%;bottom:2%;width:70%;height:42%}
 .mythology-home-principle{grid-template-columns:1fr;gap:10px}
}

/* Mythologie verstehen – Korrekturrunde 09.09.2026 */
.section-mythology-home .mythology-home-intro.editorial-intro{max-width:none;padding-bottom:3px}
.section-mythology-home .mythology-home-intro.editorial-intro p{margin:0;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit}
.section-mythology-home .mythology-home-intro.editorial-intro strong{color:inherit;font-weight:700}
.section-mythology-home .mythology-home-cta{margin-top:29px}

/* Kennzahl als Teil der Inszenierung statt als eigene Rubrik */
.mythology-master-number{position:relative;padding:30px 0 34px;border-top:1px solid rgba(212,184,121,.18);border-bottom:1px solid rgba(212,184,121,.18)}
.mythology-master-number > strong{color:#d4b879}
.mythology-master-label{color:#d4b879;margin-bottom:20px}
.mythology-master-number p{color:#9f8d77}

/* Screens ca. 30 % ruhiger/kleiner; Welten vollständig sichtbar */
.mythology-screens{min-height:clamp(390px,31vw,520px)}
.mythology-screen-main{left:8%;top:8%;width:44%;height:72%}
.mythology-screen-worlds{right:10%;top:2%;width:38%;height:48%}
.mythology-screen-time{right:13%;bottom:2%;width:37%;height:41%}
.mythology-screen-worlds img{object-fit:contain;object-position:center top;background:#0b0908}

/* Grundsatz bewusst als Abschluss herausstellen */
.mythology-home-principle{margin-top:18px;padding:30px 28px 28px;border-top:1px solid rgba(212,184,121,.28);border-bottom:1px solid rgba(212,184,121,.14);background:linear-gradient(90deg,rgba(118,20,14,.10),rgba(212,184,121,.025) 55%,transparent)}
.mythology-home-principle>span{padding-top:4px}
.mythology-home-principle p{font-size:15px;line-height:1.75;color:#9f8d77}
.mythology-home-principle strong{color:#d8c29b;font-size:1.08em}

@media(max-width:760px){
 .mythology-screens{min-height:430px}
 .mythology-screen-main{left:0;top:8%;width:62%;height:51%}
 .mythology-screen-worlds{right:0;top:1%;width:47%;height:34%}
 .mythology-screen-time{right:3%;bottom:2%;width:55%;height:36%}
 .mythology-home-principle{padding:24px 18px}
}

/* === Mythologie verstehen · v10 Feinschliff === */
/* Der rechte Introblock ist absichtlich exakt der bestehende Blog-Introblock.
   Keine eigene Mythologie-Typografie mehr. */
.section-mythology-home .mythology-home-intro.editorial-intro{
  max-width:none;
  padding-bottom:3px;
}
.section-mythology-home .mythology-home-intro.editorial-intro p,
.section-mythology-home .mythology-home-intro.editorial-intro strong{
  color:revert;
  font-family:revert;
  font-size:revert;
  line-height:revert;
}
.section-mythology-home .mythology-home-intro.editorial-intro .editorial-archive-cta{
  margin-top:29px;
}

/* 01 beginnt jetzt mit den Räumen; danach Beziehungen, dann Zeit. */
.mythology-screen-main.mythology-screen-worlds{
  z-index:3;left:8%;top:8%;width:44%;height:72%;transform:rotate(-1.1deg);
}
.mythology-screen-main.mythology-screen-worlds img{
  object-fit:cover;object-position:center top;background:#0b0908;
}
.mythology-screen-secondary{
  z-index:2;right:10%;top:2%;width:38%;height:48%;transform:rotate(1.2deg);
}
.mythology-screen-secondary:hover{transform:rotate(.5deg) translateY(-7px)}

/* Masterzahl: keine zusätzliche Rubrik, sondern ruhiger Bestandteil der Bühne. */
.mythology-master-number{
  border:0;
  padding:34px 0 36px 24px;
}
.mythology-master-number::before{
  content:"";position:absolute;left:0;top:30px;bottom:32px;width:1px;
  background:linear-gradient(to bottom,rgba(181,42,30,.9),rgba(212,184,121,.38),transparent);
}
.mythology-master-number strong{color:#ead7b0}
.mythology-master-label{color:#d8c29b}
.mythology-master-number p{color:#9f8d77}

/* Grundsatz ohne obere Trennlinie; als ruhiger, aber gewichtiger Schlussakkord. */
.mythology-home-principle{
  margin-top:18px;
  padding:31px 28px 30px;
  border-top:0;
  border-bottom:1px solid rgba(212,184,121,.14);
  background:linear-gradient(90deg,rgba(118,20,14,.11),rgba(212,184,121,.025) 55%,transparent);
}
.mythology-home-principle p{max-width:1080px}

@media(max-width:760px){
  .mythology-screen-main.mythology-screen-worlds{left:0;top:8%;width:62%;height:51%}
  .mythology-screen-secondary{right:0;top:1%;width:47%;height:34%}
  .mythology-master-number{padding-left:18px}
}


/* =========================================================
   V11 — EXAKTER BLOG-ABGLEICH: TEXT + CTA
   Keine Vererbung aus der Mythologie-Sektion mehr.
   ========================================================= */

/* Rechts oben exakt in der Typografie des Blog-Introtexts. */
.section-mythology-home .mythology-home-intro.editorial-intro{
  max-width:560px !important;
  padding-bottom:0 !important;
  font-family:var(--sans) !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  font-weight:400 !important;
  color:#b8aa96 !important;
}
.section-mythology-home .mythology-home-intro.editorial-intro > p{
  margin:0 0 22px !important;
  font-family:var(--sans) !important;
  font-size:1rem !important;
  line-height:1.7 !important;
  font-weight:400 !important;
  color:#b8aa96 !important;
}
.section-mythology-home .mythology-home-intro.editorial-intro > p strong{
  color:#b8aa96 !important;
  font:inherit !important;
  font-weight:700 !important;
}

/* CTA optisch wie der Wissensarchiv-Button, aber ohne den
   display:inline-flex-Konflikt von editorial-archive-cta.
   Dadurch besitzt Linie | Text | Pfeil jeweils eine feste Spalte. */
.mythology-blog-cta{
  position:relative;
  display:inline-grid !important;
  grid-template-columns:54px auto 38px !important;
  align-items:center;
  width:auto !important;
  min-width:360px !important;
  min-height:58px;
  margin-top:6px !important;
  border:1px solid rgba(213,191,154,.34);
  background:linear-gradient(105deg,rgba(129,0,0,.34),rgba(39,29,24,.72));
  color:#f0dcba;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.mythology-blog-cta .cta-line{
  display:block;
  width:28px;
  height:1px;
  justify-self:center;
  background:linear-gradient(90deg,#a81712,#d2b477);
}
.mythology-blog-cta .cta-text{
  display:block;
  padding:0 22px 0 2px;
  white-space:nowrap;
}
.mythology-blog-cta .cta-arrow{
  align-self:stretch;
  width:38px;
  display:grid;
  place-items:center;
  border-left:1px solid rgba(213,191,154,.22);
  transition:transform .25s;
}
.mythology-blog-cta .cta-arrow .ns-arrow{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mythology-blog-cta:hover{
  transform:translateY(-3px);
  border-color:rgba(213,191,154,.62);
  box-shadow:0 20px 46px rgba(0,0,0,.34);
}
.mythology-blog-cta:hover .cta-arrow{
  transform:translate(2px,-2px);
}

@media(max-width:900px){
  .section-mythology-home .mythology-home-intro.editorial-intro{
    max-width:none !important;
  }
  .mythology-blog-cta{
    width:100% !important;
    min-width:0 !important;
  }
}
@media(max-width:760px){
  .section-mythology-home .mythology-home-intro.editorial-intro,
  .section-mythology-home .mythology-home-intro.editorial-intro > p{
    font-size:.96rem !important;
  }
  .mythology-blog-cta{
    grid-template-columns:46px 1fr 42px !important;
  }
  .mythology-blog-cta .cta-text{
    padding-right:10px;
    font-size:.75rem;
    line-height:1.25;
    white-space:normal;
  }
}


/* =========================================================
   V12 — Masterkennzahl / Wachstums-Hinweis
   ========================================================= */

/* Kennzahl etwas höher in der gemeinsamen Bühne platzieren. */
.section-mythology-home .mythology-showcase{
  align-items:start;
}
.section-mythology-home .mythology-master-number{
  transform:translateY(-24px);
  padding-top:28px;
}

/* 910 optisch beruhigen: Ziffern enger zusammenhalten und
   deutlicher Abstand zur Bezeichnung. */
.section-mythology-home .mythology-master-number > strong{
  display:block;
  margin:0 0 24px !important;
  line-height:.78 !important;
  letter-spacing:-.045em;
  font-variant-numeric:lining-nums tabular-nums;
}
.section-mythology-home .mythology-master-label{
  display:block;
  margin:0 0 24px !important;
}

/* Die vorhandene Erklärung + aktueller Wachstums-Hinweis bilden
   jetzt einen echten kleinen Inhaltsblock statt einer Fußnote. */
.section-mythology-home .mythology-master-number > p{
  max-width:330px;
}
.section-mythology-home .mythology-master-number .mythology-master-update{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid rgba(212,184,121,.14);
  color:#9f8d77;
}
.section-mythology-home .mythology-master-number .mythology-master-update strong{
  color:#b8aa96;
  font-weight:700;
}

@media(max-width:900px){
  .section-mythology-home .mythology-master-number{
    transform:none;
  }
}