:root { --bg:#FFFFFF; --ink:#14161C; --mut:#565C68; --line:#DCDEE4; --card:#FFFFFF; --akzent:#E4322B; --akzent-dunkel:#C1231D; --gruen:#2F8F5B; --panel2:#F6F7F9; --kontur:#14161C; --blau:#2A4B9B; --gelb:#F5C518; }
  @media (prefers-color-scheme: dark) { :root { --bg:#12141A; --ink:#ECEEF2; --mut:#99A0AD; --line:#2A2E37; --card:#191C23; --akzent:#FF5A4F; --akzent-dunkel:#FF7A70; --gruen:#4FBE86; --panel2:#1F232B; --kontur:#000000; --blau:#7C9BF0; --gelb:#F5C518; } }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--bg); color:var(--ink); font-family:'Archivo','Trebuchet MS',sans-serif; line-height:1.5; }
  a { color:var(--akzent); }
  .wrap { max-width:1060px; margin:0 auto; padding:0 20px; }
  header { display:flex; align-items:center; gap:14px; padding:14px 0; }
  header .logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:18px; color:var(--ink); text-decoration:none; }
  header nav { margin-left:auto; display:flex; gap:8px; align-items:center; }
  header nav .btn .kurz { display:none; }
  @media (max-width:640px) { header nav .btn .lang { display:none; } header nav .btn .kurz { display:inline; } header nav .btn { padding:9px 16px; font-size:14px; } }
  .btn { display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; background:var(--akzent); color:#fff; font-weight:700; text-decoration:none; font-size:15px; border:none; cursor:pointer; }
  .btn:hover { background:var(--akzent-dunkel); }
  .btn.sek { background:var(--card); color:var(--ink); border:1.5px solid var(--line); }

  .neu-drei { border: 2px solid var(--kontur); border-radius: 18px; padding: 26px 26px 30px;
              margin-top: 34px; box-shadow: 6px 6px 0 var(--gelb); }
  .neu-drei h2 { margin-top: 0; }
  .neu-drei em { font-style: normal; font-weight: 700; color: var(--blau); }
  .hero { display:grid; grid-template-columns: 1.1fr 1fr; gap:40px; align-items:center; padding:40px 0 30px; }
  .hero h1 { font-size:clamp(30px,4.5vw,46px); line-height:1.12; margin:0 0 14px; }
  .hero h1 em { color:var(--akzent); font-style:normal; }
  .hero p.lead { font-size:17px; color:var(--mut); margin:0 0 22px; max-width:52ch; }
  .hero .cta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
  .hero .klein { font-size:12.5px; color:var(--mut); margin-top:10px; }
  .shot { border:1.5px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card); box-shadow:0 20px 50px rgba(58,50,39,.12); }
  .shot img { display:block; width:100%; height:auto; }
  .shot--hoch { max-width:420px; margin:0 auto; }
  section { padding:34px 0; }
  h2 { font-size:26px; margin:0 0 6px; }
  .sub { color:var(--mut); margin:0 0 22px; }
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .step { background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:18px; }
  .step .n { display:inline-flex; width:30px; height:30px; border-radius:50%; background:var(--akzent); color:#fff; font-weight:700; align-items:center; justify-content:center; margin-bottom:10px; }
  .step h3 { margin:0 0 6px; font-size:16px; }
  .step p { margin:0; color:var(--mut); font-size:14px; }
  .feat { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:800px) { .feat { grid-template-columns:1fr 1fr; } }
  @media (max-width:520px) { .feat { grid-template-columns:1fr; } }
  .feat div { background:var(--card); border:1.5px solid var(--line); border-radius:14px; padding:16px; }
  .feat h3 { margin:0 0 4px; font-size:15px; }
  .feat p { margin:0; font-size:13.5px; color:var(--mut); }
  /* Neun gleich große Kacheln hatten keine Rangfolge. Die drei, die den Kauf tragen,
     stehen jetzt größer darüber. */
  .feat--gross { grid-template-columns:repeat(3,1fr); margin-bottom:14px; }
  .feat--gross div { padding:22px 20px; border-width:2px; }
  .feat--gross h3 { font-size:18px; margin-bottom:7px; }
  .feat--gross p { font-size:14.5px; color:var(--text); }
  /* Diese Regel stand hinter den Handy-Regeln und gewann: drei Kacheln in 350 px → 119 px Überlauf. */
  @media (max-width:800px) { .feat--gross { grid-template-columns:1fr; } }
  .tarife { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
  .tarif { background:var(--card); border:2px solid var(--line); border-radius:16px; padding:20px; }
  .tarif.top { border-color:var(--akzent); }
  .tarif .p { font-size:28px; font-weight:700; margin:4px 0; }
  .tarif ul { padding-left:18px; margin:10px 0 14px; font-size:14px; color:var(--mut); }
  .faq details { background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:8px; }
  .faq summary { font-weight:700; cursor:pointer; }
  .faq p { margin:8px 0 0; color:var(--mut); font-size:14px; }
  /* Wo Binderplan selbst postet (12.09.2026). Dieselben Strich-Symbole wie in der App. */
  .soz { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
  @media (max-width:820px) { .soz { grid-template-columns:repeat(3,1fr); } }
  @media (max-width:520px) { .soz { grid-template-columns:repeat(2,1fr); } }
  .soz a { display:flex; align-items:center; gap:10px; padding:14px; border:1.5px solid var(--line);
           border-radius:14px; background:var(--card); color:var(--ink); text-decoration:none; }
  .soz a:hover { border-color:var(--akzent); color:var(--akzent); }
  .soz span { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
  .soz strong { font-size:14.5px; }
  .soz small { font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis; }
  .soz a:hover small { color:inherit; }
  footer { padding:26px 0 40px; color:var(--mut); font-size:12.5px; border-top:1.5px solid var(--line); margin-top:20px; }
  footer a { color:var(--mut); }
  @media (max-width:800px) { .hero { grid-template-columns:1fr; padding-top:16px; } .steps { grid-template-columns:1fr; } header nav .sek { display:none; } }

  /* ================= Neunundneunzig =================
     Laut nach außen, ruhig da, wo gearbeitet wird. Der Aufmacher ist ein
     Aufkleber: Kartenrücken-Blau, harte Kontur, versetzter Schatten. Alles
     Weitere bleibt weiß, damit die Karten die einzigen bunten Flächen sind. */
  body { font-family:'Archivo','Trebuchet MS',sans-serif; }
  h1, h2, .tarif .p, header .logo { font-family:'Bungee','Archivo',sans-serif; font-weight:400; }
  .wrap { max-width:1080px; }
  header .logo { font-size:17px; letter-spacing:.005em; gap:10px; }
  h2 { font-size:23px; letter-spacing:.005em; }
  a { color:var(--blau); }

  .btn { border-radius:11px; border:2.5px solid var(--kontur); box-shadow:3px 3px 0 var(--kontur);
         font-weight:800; font-size:14.5px; letter-spacing:.005em; padding:10px 18px; transition:transform .08s, box-shadow .08s; }
  .btn:hover { background:var(--akzent-dunkel); transform:translate(1.5px,1.5px); box-shadow:1.5px 1.5px 0 var(--kontur); }
  .btn.sek { background:var(--card); color:var(--ink); }
  .btn.sek:hover { background:var(--gelb); }

  /* Feste Markenfarbe statt --blau: im dunklen Design wird das Token aufgehellt, dann
     stand weißer Text auf Hellblau (Lead 1,85:1). Der Hero ist Marke, kein Thema. */
  .hero { background:#2A4B9B; color:#fff; border:3px solid var(--kontur); border-radius:20px;
          box-shadow:9px 9px 0 var(--kontur); padding:32px; margin:10px 0 30px; gap:32px; }
  .hero h1 { font-size:clamp(25px,3.4vw,37px); line-height:1.16; margin-bottom:16px; }
  .hero h1 em { color:#F5C518; }
  .hero p.lead { color:#E4EAF8; }
  .hero .klein { color:#C7D3EE; }
  .hero .shot { box-shadow:6px 6px 0 var(--kontur); border-color:var(--kontur); }

  .step, .feat div, .tarif, .faq details, .shot {
    border:2.5px solid var(--kontur); border-radius:14px; box-shadow:4px 4px 0 var(--kontur); background:var(--card); }
  .step .n { border-radius:8px; border:2.5px solid var(--kontur); background:var(--gelb); color:var(--kontur); font-family:'Archivo',sans-serif; font-weight:800; }
  .step h3, .feat h3, .faq summary { font-weight:800; }
  .tarif.top { box-shadow:6px 6px 0 var(--akzent); }
  .tarif .p { font-size:25px; }
  footer { border-top:2.5px solid var(--kontur); }
  @media (max-width:800px) { .hero { padding:22px; box-shadow:6px 6px 0 var(--kontur); } }

  /* Sprachschalter in der Kopfzeile: klein, neben den Knöpfen */
  header nav .sprache { font-weight:800; font-size:13px; color:var(--mut); text-decoration:none; padding:6px 8px; border-radius:8px; }
  header nav .sprache:hover { background:var(--gelb); color:var(--ink); }

  /* ================= Schaufenster: Aus der Vitrine =================
     Binderseiten auf dunklem Grund, wie in der App. Das Album ist die einzige
     Bühne der Seite: breit, kontur, gelber Schatten. Die Reihen darunter sind
     Kacheln im Stil der übrigen Karten. */
  .schau h2 { margin-bottom: 4px; }
  .album-box { border: 3px solid var(--kontur); border-radius: 18px; background: var(--card);
               box-shadow: 8px 8px 0 var(--gelb); padding: 16px 18px 14px; margin: 18px 0 30px; }
  .album-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .album-kopf strong { font-family: 'Bungee', 'Archivo', sans-serif; font-weight: 400; font-size: 17px; }
  .album-kopf span { color: var(--mut); font-size: 13px; }
  .album { display: flex; align-items: center; gap: 10px; }
  .album-seiten { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px;
                  background: #14161a; border-radius: 14px; border: 2.5px solid var(--kontur); min-height: 120px; }
  .album-pfeil { width: 42px; height: 42px; border-radius: 11px; border: 2.5px solid var(--kontur); background: var(--card);
                 color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1; cursor: pointer; flex-shrink: 0;
                 box-shadow: 3px 3px 0 var(--kontur); }
  .album-pfeil:hover { background: var(--gelb); }
  .album-pfeil:disabled { opacity: .3; cursor: default; box-shadow: none; }
  .album-fuss { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--mut); }
  .album-fuss .klein { font-size: 12px; }
  .album-fuss .btn { margin-left: auto; font-size: 13px; padding: 8px 14px; }
  .s-seite { display: grid; background: #14161a; border-radius: 8px; padding: 5px; }
  .s-seite.album { padding: 8px; border-radius: 10px; outline: 1px solid rgba(255,255,255,.12); outline-offset: -1px; }
  .s-fach { position: relative; aspect-ratio: 63/88; border-radius: 3px; background: rgba(255,255,255,.05); overflow: hidden; }
  .s-fach img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .s-fach.leer { border: 1px dashed rgba(255,255,255,.14); background: transparent; }
  .s-fach .s-art { position: absolute; inset: 0; overflow: hidden; border-radius: 3px; display: block; }
  .s-fach .s-art img { position: absolute; max-width: none; width: auto; height: auto; object-fit: fill; }
  .s-stapel { position: relative; display: flex; align-items: flex-start; padding: 0 0 9%; }
  .s-stapel .s-seite { flex: 0 0 36%; padding: 4px; border-radius: 7px; box-shadow: -5px 2px 12px rgba(0,0,0,.55);
                       outline: 1px solid rgba(255,255,255,.13); outline-offset: -1px; }
  .s-stapel .vorn { z-index: 3; }
  .s-stapel .hinten2 { z-index: 2; margin-left: -4%; margin-top: 4%; filter: brightness(.88); }
  .s-stapel .hinten3 { z-index: 1; margin-left: -4%; margin-top: 8%; filter: brightness(.76); }
  .s-stapel.bild { display: block; padding: 0; }
  .s-stapel.bild img { width: 100%; display: block; }
  .schau-h3 { font-size: 16px; font-weight: 800; margin: 22px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .schau-fenster { font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; }
  .schau-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .schau-reihe.kunst { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .s-kachel { display: block; text-decoration: none; color: var(--ink); background: var(--card); border: 2.5px solid var(--kontur);
              border-radius: 14px; box-shadow: 4px 4px 0 var(--kontur); overflow: hidden; cursor: pointer;
              transition: transform .08s, box-shadow .08s; }
  .s-kachel:hover, .s-kachel:focus-visible { transform: translate(1.5px, 1.5px); box-shadow: 2px 2px 0 var(--kontur); outline: none; }
  .s-kachel.an { box-shadow: 4px 4px 0 var(--gelb); border-color: var(--kontur); }
  .s-kachel .s-bild { background: var(--panel2); padding: 10px 10px 0; }
  .s-kachel.kunst .s-bild { padding: 10px; }
  .s-kachel .s-bild > img { display: block; width: 100%; border-radius: 6px; }
  .s-kachel .s-txt { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 2px; }
  .s-kachel .s-txt strong { font-size: 14px; }
  .s-kachel .s-txt span { font-size: 12px; color: var(--mut); }
  @media (max-width: 640px) {
    .album-box { padding: 12px; box-shadow: 5px 5px 0 var(--gelb); }
    .album-seiten { grid-template-columns: 1fr; padding: 8px; }
    .album-pfeil { width: 34px; height: 34px; font-size: 20px; }
    .schau-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .schau-reihe.kunst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s-kachel .s-txt strong { font-size: 13px; }
  }

  /* ================= Artwork-Band unter dem Aufmacher ================= */
  .btn.gelb { background: var(--gelb); color: var(--kontur); }
  .btn.gelb:hover { background: #ffd43a; }
  .kunst-band { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: center;
                background: var(--card); color: var(--ink); border: 2px solid var(--kontur); border-radius: 18px;
                box-shadow: 6px 6px 0 var(--gelb); padding: 26px 30px; margin: 34px 0; }
  .kunst-band h2 { color: var(--ink); margin: 4px 0 10px; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; }
  .kunst-band p { margin: 0 0 16px; font-size: 15.5px; max-width: 48ch; color: var(--mut); }
  .kunst-band .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
  .kunst-band .btn.sek { background: #fff; }
  .kunst-band .klein { font-size: 12.5px; color: var(--mut); margin-top: 10px; }
  .kb-eyebrow { font-family: 'Bungee', 'Archivo', sans-serif; font-size: 12px; letter-spacing: .08em; color: var(--blau); }
  /* Die Kunstseiten liegen im selben Album wie die Binder: zwei Seiten nebeneinander auf
     dunklem Grund, Pfeile blättern durch die beliebtesten aus der Vitrine. Als Poster
     waren sie zu groß und ohne Bezug zum Binder. */
  .kb-album { max-width: 480px; margin-left: auto; width: 100%; }
  .album.kb { gap: 8px; }
  .album-seiten.kb { padding: 8px; gap: 8px; border-radius: 12px; box-shadow: 5px 5px 0 var(--kontur); min-height: 0; }
  .album-seiten.kb img { display: block; width: 100%; height: auto; border-radius: 6px; }
  .album-seiten.kb .s-seite { padding: 4px; }
  .album.kb .album-pfeil { width: 34px; height: 34px; font-size: 20px; }
  .kb-stand { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--mut); margin-top: 8px;
              padding: 0 42px; font-variant-numeric: tabular-nums; }
  .kb-stand #kb-titel { font-weight: 700; color: var(--ink); text-align: right; }
  @media (max-width: 800px) {
    .kunst-band { grid-template-columns: 1fr; padding: 20px; box-shadow: 5px 5px 0 var(--gelb); gap: 18px; }
    .kb-album { max-width: 100%; margin: 0; }
    .album.kb { gap: 6px; }
    /* Stand und Titel untereinander: nebeneinander brachen beide auf je zwei Zeilen um. */
    .kb-stand { padding: 0 40px; flex-direction: column; gap: 2px; text-align: center; }
    .kb-stand #kb-titel { text-align: center; }
  }
  /* Handy: die Kunstseiten bleiben zu zweit nebeneinander — die Album-Regel weiter oben
     stapelt am Handy nur das Binder-Album auf eine Seite. */
  @media (max-width: 640px) {
    .album-seiten.kb { grid-template-columns: 1fr 1fr; padding: 6px; gap: 6px; }
    .album-seiten.kb .s-seite { padding: 3px; }
  }

  /* ================= Hero-Fächer: drei gleich große Binderseiten =================
     Eine Reihe aus drei gleich breiten Blättern, die sich an den Rändern überlappen — wie
     eine Hand aufgefächerter Karten. Breiten sind Anteile der Reihe, die Überlappung ist
     negativer Abstand: so passt der Fächer immer genau in seine Spalte, egal wie breit das
     Fenster ist. Absolut positioniert stand er vorher im Text und wurde rechts abgeschnitten.
     Vorrang bekommt die Mitte über Drehung und Schatten, nicht über die Größe — alle drei
     Seiten sind gleich groß, weil sie dasselbe zeigen: eine Binderseite. */
  .hero { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .hero h1 { text-wrap: balance; }
  .hero-fan-wrap { width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; }
  .hero-fan { display: flex; align-items: flex-start; justify-content: center; padding-top: 5%; }
  .hero-fan .fan { position: relative; display: block; height: auto; flex: 0 0 44%; width: 44%;
                   border-radius: 11px; border: 2.5px solid var(--kontur); background: #14161a; }
  .hero-fan .links, .hero-fan .rechts { margin-top: 7%; box-shadow: 5px 5px 0 var(--kontur); z-index: 1; }
  .hero-fan .links { transform: rotate(-7deg); margin-right: -16%; }
  .hero-fan .rechts { transform: rotate(7deg); margin-left: -16%; background: #fff; }
  .hero-fan .mitte { z-index: 3; box-shadow: 7px 7px 0 var(--gelb); }
  /* Je Blatt eine Beschriftung, in denselben drei Spalten wie die Bilder darüber. */
  .hero-fan-lbl { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 14px; }
  .hero-fan-lbl span { font-size: 11.5px; font-weight: 800; text-align: center; color: var(--kontur);
                       background: #fff; border: 2px solid var(--kontur); border-radius: 999px;
                       padding: 5px 6px; box-shadow: 2px 2px 0 var(--kontur); }
  .hero-fan-lbl span.m { background: var(--gelb); }
  @media (max-width: 900px) {
    .hero-fan-lbl span { font-size: 10.5px; padding: 4px 5px; }
  }
  @media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; }
    .hero-fan-wrap { max-width: 430px; }
  }

  /* Katalog-Einstieg auf der Startseite (SEO 29.09.2026): verlinkt Sets und Pokémon, damit Crawler den Katalog finden */
  .katalog .kat-spalten { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-bottom:16px; }
  .katalog h3 { font-size:15px; font-weight:800; margin:0 0 10px; }
  .kat-liste { display:flex; flex-wrap:wrap; gap:8px; }
  .kat-liste a { font-size:14px; font-weight:600; text-decoration:none; color:var(--ink); background:var(--card);
    border:1.5px solid var(--line); border-radius:999px; padding:6px 13px; }
  .kat-liste a:hover { border-color:var(--blau); color:var(--blau); }