/* =========================================================
       TALEMORE – ILLUMINATI GAMES
       ========================================================= */

    :root {
      --bg: #090b0c;
      --bg-light: #111516;
      --panel: #14191a;

      --text: #e7e2d7;
      --text-soft: #a9aaa4;

      --gold: #b79658;
      --gold-light: #d3b778;

      --line: rgba(183,150,88,.28);

      --max-width: 1280px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: Arial, Helvetica, sans-serif;
      line-height: 1.65;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(90%, var(--max-width));
      margin: auto;
    }


    /* =========================================================
       NAVIGATION
       ========================================================= */

    header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    nav {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      font-size: 18px;
      letter-spacing: 4px;
      text-transform: uppercase;
      font-weight: bold;
    }

    .logo span {
      color: var(--gold);
    }

    .nav-links {
      display: flex;
      gap: 35px;
      list-style: none;
      text-transform: uppercase;
      font-size: 12px;
      letter-spacing: 2px;
    }

    .nav-links a {
      transition: .25s;
    }

    .nav-links a:hover {
      color: var(--gold-light);
    }


    /* =========================================================
       HERO
       ========================================================= */

    .hero {
      min-height: 100vh;

      background:
        linear-gradient(
          to bottom,
          rgba(5,7,8,.18),
          rgba(5,7,8,.45) 55%,
          #090b0c 100%
        ),
        url("../images/talemore-gallery-01.jpeg") center/cover no-repeat;

      display: flex;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .hero-content {
      width: min(900px, 90%);
      margin: auto;
      padding-top: 80px;
    }

    .hero-kicker {
      text-transform: uppercase;
      letter-spacing: 7px;
      color: var(--gold-light);
      font-size: 12px;
      margin-bottom: 25px;
    }

    .hero h1 {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(70px, 11vw, 150px);
      font-weight: normal;
      line-height: .9;
      letter-spacing: 3px;
      text-shadow: 0 8px 35px #000;
    }

    .hero-subtitle {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(20px, 3vw, 34px);
      font-style: italic;
      margin-top: 25px;
      color: #ddd5c7;
    }

    .hero-text {
      max-width: 650px;
      margin: 30px auto;
      color: #c3c1ba;
      font-size: 17px;
    }

    .button {
      display: inline-block;
      margin-top: 20px;
      padding: 16px 34px;

      border: 1px solid var(--gold);

      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 11px;

      transition: .3s;
    }

    .button:hover {
      background: var(--gold);
      color: #080909;
    }


    /* =========================================================
       SECTION GENERAL
       ========================================================= */

    section {
      padding: 120px 0;
    }

    .section-kicker {
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 11px;
      margin-bottom: 18px;
    }

    h2 {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: normal;
      font-size: clamp(40px, 6vw, 72px);
      line-height: 1.05;
      margin-bottom: 30px;
    }

    .lead {
      color: var(--text-soft);
      font-size: 18px;
      max-width: 700px;
    }


    /* =========================================================
       INTRO
       ========================================================= */

    .intro {
      text-align: center;
    }

    .intro .lead {
      margin: auto;
    }

    .ornament {
      width: 80px;
      height: 1px;
      background: var(--gold);
      margin: 45px auto;
    }


    /* =========================================================
       WORLD
       ========================================================= */

    .world {
      background: var(--bg-light);
    }

    .two-column {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .image-frame {
      position: relative;
    }

    .image-frame img {
      width: 100%;
      min-height: 600px;
      object-fit: cover;
    }

    .image-frame::after {
      content: "";
      position: absolute;
      inset: 18px;
      border: 1px solid rgba(183,150,88,.35);
      pointer-events: none;
    }


    /* =========================================================
       FEATURES
       ========================================================= */

    .features-header {
      text-align: center;
      margin-bottom: 70px;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: var(--line);
    }

    .feature {
      background: var(--bg);
      padding: 55px 45px;
      min-height: 330px;
    }

    .feature-number {
      font-family: Georgia, serif;
      color: var(--gold);
      font-size: 18px;
      margin-bottom: 30px;
    }

    .feature h3 {
      font-family: Georgia, serif;
      font-size: 27px;
      font-weight: normal;
      margin-bottom: 18px;
    }

    .feature p {
      color: var(--text-soft);
      font-size: 15px;
    }


    /* =========================================================
       HEROES
       ========================================================= */

    .heroes {
      background: #0d1011;
    }

    .heroes-header {
      max-width: 700px;
      margin-bottom: 60px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
    }

    .hero-card {
      height: 520px;
      position: relative;
      overflow: hidden;
      background: #161919;
    }

    .hero-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s;
    }

    .hero-card:hover img {
      transform: scale(1.04);
    }

    .hero-card::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          transparent 45%,
          rgba(0,0,0,.9)
        );
    }

    .hero-name {
      position: absolute;
      bottom: 25px;
      left: 25px;
      z-index: 3;
    }

    .hero-name strong {
      display: block;
      font-family: Georgia, serif;
      font-size: 25px;
      font-weight: normal;
    }

    .hero-name span {
      color: var(--gold-light);
      text-transform: uppercase;
      font-size: 9px;
      letter-spacing: 3px;
    }


    /* =========================================================
       PROGRESSION
       ========================================================= */

    .progression {
      text-align: center;
    }

    .progression-flow {
      margin-top: 75px;

      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
    }

    .rank {
      border: 1px solid var(--line);
      padding: 40px 55px;
      min-width: 220px;
    }

    .rank span {
      display: block;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 3px;
      font-size: 10px;
      margin-bottom: 10px;
    }

    .rank strong {
      font-family: Georgia, serif;
      font-weight: normal;
      font-size: 29px;
    }

    .arrow {
      color: var(--gold);
      font-size: 28px;
    }


    /* =========================================================
       BATTLE
       ========================================================= */

    .battle {
      min-height: 750px;

      display: flex;
      align-items: center;

      background:
        linear-gradient(
          90deg,
          rgba(8,10,10,.98) 10%,
          rgba(8,10,10,.78) 48%,
          rgba(8,10,10,.15)
        ),
        url("../images/talemore-figuren.png")
        center/cover no-repeat;
    }

    .battle-content {
      max-width: 600px;
    }

    .battle-content p {
      color: #bbb9b1;
      font-size: 17px;
    }


    /* =========================================================
       LORE QUOTE
       ========================================================= */

    .lore {
      padding: 160px 0;
      text-align: center;
    }

    blockquote {
      font-family: Georgia, serif;
      font-size: clamp(27px, 4vw, 48px);
      line-height: 1.35;
      max-width: 950px;
      margin: auto;
      font-style: italic;
      color: #ddd7ca;
    }

    blockquote strong {
      color: var(--gold-light);
      font-weight: normal;
    }


    /* =========================================================
       CTA
       ========================================================= */

    .cta {
      text-align: center;

      background:
        linear-gradient(
          rgba(7,9,9,.75),
          rgba(7,9,9,.92)
        ),
        url("../images/talemore-gallery-05.jpeg")
        center/cover no-repeat;

      padding: 160px 20px;
    }

    .cta p {
      max-width: 650px;
      margin: 0 auto 25px;
      color: #bcb9b0;
    }


    /* =========================================================
       FOOTER
       ========================================================= */

    footer {
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 50px 0;
      color: #777;
      font-size: 12px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }


    /* =========================================================
       RESPONSIVE
       ========================================================= */

    @media (max-width: 900px) {

      .nav-links {
        display: none;
      }

      section {
        padding: 80px 0;
      }

      .two-column {
        grid-template-columns: 1fr;
        gap: 45px;
      }

      .features-grid {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        grid-template-columns: 1fr 1fr;
      }

      .progression-flow {
        flex-direction: column;
      }

      .arrow {
        transform: rotate(90deg);
      }

    }

    @media (max-width: 600px) {

      .hero-grid {
        grid-template-columns: 1fr;
      }

      .hero-card {
        height: 600px;
      }

      .footer-inner {
        flex-direction: column;
        gap: 15px;
      }

    }

  
/* FTP-Fassung: Zugänglichkeit und kleine Bildschirme */
.centered{margin:auto}.hero h1{font-size:clamp(52px,11vw,150px)}a:focus-visible{outline:2px solid var(--gold-light);outline-offset:6px}.hero-card img{object-position:center}.image-frame img{min-height:0;aspect-ratio:4/5}.hero{padding-bottom:80px}.hero-kicker{letter-spacing:4px}@media(max-width:900px){nav{height:auto;min-height:90px;flex-wrap:wrap;gap:16px;padding-block:20px}.nav-links{display:flex;flex-wrap:wrap;gap:12px 20px;letter-spacing:1px}.hero-content{padding-top:150px}.rank{min-width:0;width:min(100%,300px)}.progression-flow{gap:20px}.hero-card{height:450px}}@media(max-width:600px){.logo{font-size:15px;letter-spacing:2px}.feature{padding:35px 25px}.hero-kicker{font-size:10px;letter-spacing:2px}.hero-card{height:480px}.lore,.cta{padding:90px 20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* Eigene TaleMore-Fotografien */
.world .image-frame img{aspect-ratio:auto;min-height:0;object-fit:contain}
.figures-photo{margin:0}.figures-photo img{width:100%;height:auto;border:1px solid var(--line)}
figcaption{padding:14px 0;color:var(--text-soft);font-size:14px;line-height:1.5}
.class-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.class-list span{border:1px solid var(--line);padding:22px;text-align:center;font-family:Georgia,serif;font-size:24px}
.gallery{background:var(--bg-light)}.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}.gallery-grid figure{margin:0;min-width:0}.gallery-grid a{display:block;overflow:hidden;border:1px solid var(--line)}.gallery-grid img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .3s}.gallery-grid a:hover img{transform:scale(1.025)}
.rulebook figure{margin:0}.rulebook img{width:100%;height:auto;border:1px solid var(--line)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.class-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}.class-list span{font-size:21px;padding:18px}.gallery-grid img{aspect-ratio:auto}.hero{background-position:55% center}}

/* Hinterlegte Navigation und Verlag */
header{background:rgba(9,11,12,.96);border-bottom:1px solid var(--line);box-shadow:0 4px 24px rgba(0,0,0,.25)}
nav{gap:24px}.brand{display:block;flex-shrink:0;background:#fff;padding:6px 10px;border-radius:3px;width:220px}.brand img{width:100%;height:auto}.nav-links{gap:22px}.publisher-link{display:inline-block;margin-top:10px;color:var(--gold-light);text-decoration:underline;text-underline-offset:4px}
.stories{background:var(--bg-light)}.stories-intro{max-width:840px;margin-bottom:48px}.stories-intro .lead{max-width:840px;margin-bottom:22px}.story-map{margin:0}.story-map a{display:block;border:1px solid var(--line)}.story-map img{width:100%;height:auto}.story-map figcaption{text-align:center}
/* Tagansicht: Pergamenttöne mit dunkler Schrift. Fotobereiche bleiben kontrastreich. */
html[data-theme="day"]{--bg:#f6efdf;--bg-light:#e9dfc9;--panel:#fff8e8;--text:#30291f;--text-soft:#655944;--gold:#806020;--gold-light:#705018;--line:rgba(112,80,24,.3)}
html[data-theme="day"] header{background:rgba(246,239,223,.98);box-shadow:0 4px 24px rgba(68,49,19,.12)}
html[data-theme="day"] .heroes{background:#eee5d2}
html[data-theme="day"] .hero{background-image:linear-gradient(to bottom,rgba(5,7,8,.28),rgba(5,7,8,.5) 60%,#f6efdf 100%),url("../images/talemore-gallery-01.jpeg")}
html[data-theme="day"] .hero,html[data-theme="day"] .battle,html[data-theme="day"] .cta{color:#f7f1e4;--gold:#d3b778;--gold-light:#ead39f;--line:rgba(211,183,120,.4)}
html[data-theme="day"] .hero-text,html[data-theme="day"] .battle-content p,html[data-theme="day"] .cta p{color:#eee4d4}
html[data-theme="day"] blockquote{color:#53432d}
html[data-theme="day"] footer{color:var(--text-soft);border-color:var(--line)}
@media(max-width:1100px){nav{height:auto;min-height:90px;flex-wrap:wrap;padding-block:16px;gap:16px}.nav-links{gap:12px 20px}.hero-content{padding-top:160px}}
@media(max-width:600px){.brand{width:175px}.nav-links{font-size:10px;gap:10px 16px}.hero-content{padding-top:190px}.stories-intro{margin-bottom:30px}}

/* Bildansicht, Navigation und vertiefter Spielbereich */
.brand{background:transparent;padding:0;border-radius:0}.brand img{max-height:78px;object-fit:contain}
.theme-toggle{flex-shrink:0;background:var(--panel);color:var(--text);border:1px solid var(--gold);padding:10px 15px;cursor:pointer;font:inherit;font-size:13px}.theme-toggle:hover{border-color:var(--gold-light)}button:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
.game-showcase{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;align-items:center;margin-bottom:60px}.game-showcase figure{margin:0}.game-showcase img{width:100%;height:auto;border:1px solid var(--line)}.game-showcase h3{font-family:Georgia,serif;font-size:36px;font-weight:normal;line-height:1.2;margin-bottom:22px}.game-showcase p{color:var(--text-soft);margin-bottom:18px}
.feature{padding:0 0 32px;min-height:0}.feature-photo{display:block;overflow:hidden}.feature-photo img{width:100%;aspect-ratio:16/10;object-fit:cover}.feature-number,.feature h3,.feature p{margin-left:28px;margin-right:28px}.feature-number{margin-top:26px;margin-bottom:18px}.features-grid{gap:20px;background:transparent}
.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;background:transparent;color:#fff;padding:70px 5vw 28px;overflow:auto}.lightbox::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}.lightbox figure{margin:0 auto;max-width:1400px;pointer-events:none;text-align:center}.lightbox img{max-width:100%;max-height:calc(100dvh - 155px);width:auto;height:auto;object-fit:contain;margin:auto;box-shadow:0 20px 65px rgba(0,0,0,.45)}.lightbox figcaption{color:#fff;max-width:900px;margin:auto}.lightbox-close{position:fixed;right:22px;top:18px;width:44px;height:44px;border:1px solid rgba(255,255,255,.6);background:rgba(0,0,0,.65);color:white;font-size:32px;line-height:1;cursor:pointer}.lightbox-open{overflow:hidden}.lightbox-open #site-content{filter:blur(5px)}
@media(max-width:1100px){nav{gap:14px}.nav-links{flex:1 1 auto}.brand{width:190px}}
@media(max-width:900px){.game-showcase{grid-template-columns:1fr;gap:28px}.features-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}.game-showcase h3{font-size:30px}.nav-links{order:3;flex-basis:100%}.theme-toggle{margin-left:auto}.lightbox{padding:75px 12px 20px}.hero-content{padding-top:210px}}

/* TaleMore-Titel und Brettspiel-Einstieg */
.hero .game-logo{width:min(710px,100%);margin:0 auto;line-height:1;text-shadow:none}.game-logo img{width:100%;height:auto}.boardgame-label{margin-top:26px;text-transform:uppercase;letter-spacing:4px;color:#ead39f;font-size:14px}.hero-content{padding-bottom:35px}.hero .hero-text{max-width:720px}
/* Heller oberer Fotorand: nur der sichtbare Ausschnitt wird verkürzt. */
.figures-photo>a{display:block;overflow:hidden;border:1px solid var(--line)}.figures-photo img{margin-top:-4.5%;border:0;width:100%;height:auto}.battle{background-size:auto,cover;background-position:center,center 56%}
@media(max-width:600px){.boardgame-label{font-size:11px;letter-spacing:2px}.hero .hero-subtitle{font-size:23px}.hero .hero-text{font-size:16px}}

.lightbox img.crop-figures{clip-path:inset(8% 0 0 0)}