/* Gestaltung der Google-Einzelseiten (Karte, Set, Pokémon, Übersichten) – baut auf shop.css auf */
.s-kopf{grid-template-columns:auto 1fr auto}
.s-nav{display:flex;gap:6px;flex-wrap:wrap}
.s-nav a{color:var(--text);text-decoration:none;border:1px solid var(--rand);background:var(--flaeche);border-radius:999px;padding:9px 14px;font-weight:600;font-size:14px}
.s-nav a.s-shop{background:var(--orange);border-color:var(--orange);color:var(--knopf-text)}
.seite{max-width:1200px;margin:0 auto;padding:16px 16px 40px;display:block}
.seite h1{font-family:var(--kopf-schrift);font-size:30px;line-height:1.2;margin:8px 0 6px}
.seite h1 small,.seite h2 small{color:var(--leise);font-weight:500;font-size:.6em}
.seite h2{font-size:21px;margin:34px 0 12px}
.brot{font-size:13px;color:var(--leise);margin:4px 0 10px}
.brot a{color:var(--leise)}
.s-unter{color:var(--leise);margin:0 0 6px}
.s-text{max-width:820px;color:var(--text);line-height:1.65}
.s-text a,.seite p a{color:var(--cyan)}
.s-karte{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;align-items:start}
/* Kartenfotos: großes Bild (Klick = bildschirmfüllend) + Wechsel Vorder-/Rückseite (Steve 06.10.2026) */
.s-bilder{display:grid;gap:12px;justify-items:center}
.s-gross{border:0;padding:0;background:none;cursor:zoom-in;width:100%;max-width:460px}
.s-gross img{display:block;width:100%;max-height:78vh;border-radius:10px;background:#000;object-fit:contain}
.s-daumen{display:flex;gap:10px;justify-content:center}
.s-daumen button{display:flex;align-items:center;gap:8px;border:1px solid var(--rand);background:var(--flaeche2);color:var(--leise);border-radius:10px;padding:5px 12px 5px 5px;cursor:pointer;font:inherit;font-size:13px}
.s-daumen button.an{border-color:var(--cyan);color:var(--text)}
.s-daumen img{width:38px;aspect-ratio:63/88;object-fit:contain;border-radius:4px;background:#000}
.s-lupe{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
.s-lupe img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.s-kaufen{display:inline-block;text-decoration:none;margin:14px 0 4px;padding:14px 22px;font-size:16px}
.s-ex{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.s-ex a{flex:0 0 92px;text-decoration:none;color:var(--text);text-align:center;font-size:13px}
.s-ex img{width:100%;aspect-ratio:63/88;object-fit:contain;border-radius:6px;background:#000;margin-bottom:4px}
.s-fakten,.s-liste{border-collapse:collapse;width:100%;margin-top:18px;font-size:14px}
.s-fakten th,.s-fakten td,.s-liste th,.s-liste td{border-bottom:1px solid var(--rand);padding:8px 10px;text-align:left;vertical-align:top}
.s-fakten th{color:var(--leise);font-weight:500;width:38%}
.s-liste tr.fehlt td{color:var(--leise);opacity:.7}
.s-liste small{display:block;color:var(--leise)}
.s-liste a{color:var(--cyan);text-decoration:none}
.s-zahlen{display:flex;gap:26px;flex-wrap:wrap;margin:14px 0;color:var(--leise);font-size:13.5px}
.s-zahlen b{display:block;font:700 22px var(--kopf-schrift);color:var(--text)}
.s-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 14px}
.s-kachel{text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:2px}
.s-kachel .bild{margin-bottom:6px;box-shadow:var(--schatten)}
.s-kachel:hover .bild img{transform:scale(1.05)}
.s-kachel .k-name{font-weight:600;font-size:14px}
.s-kachel .preis{font-size:15px}
.s-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.s-sets a{display:block;text-decoration:none;color:var(--text);border:1px solid var(--rand);background:var(--flaeche);border-radius:10px;padding:10px 12px}
.s-sets a:hover{border-color:var(--leise)}
.s-sets small{display:block;color:var(--leise);font-size:12px}
.s-abc{display:flex;flex-wrap:wrap;gap:6px}
.s-abc a{color:var(--text);text-decoration:none;border:1px solid var(--rand);border-radius:8px;padding:4px 10px}
/* Ratgeber */
.s-artikel{max-width:820px;line-height:1.7;font-size:16px}
.s-artikel h1{font-size:32px}
.s-artikel h2{font-size:22px;margin:30px 0 8px}
.s-artikel li{margin:6px 0}
.s-artikel a{color:var(--cyan)}
.s-artikel .s-fakten{width:auto;min-width:min(100%,420px)}
.s-artikel .s-fakten th{color:var(--text);font-weight:700;white-space:nowrap;width:auto}
.s-beispiel{float:right;width:230px;margin:6px 0 16px 24px;text-align:center;font-size:13px;color:var(--leise)}
.s-beispiel img{width:100%;border-radius:10px;background:#000;box-shadow:var(--schatten);margin-bottom:6px}
/* Bildunterschrift (Steve 06.10.2026: „schöner machen“): Etikett · Kartenname · Set */
.s-beispiel figcaption{display:grid;gap:2px;line-height:1.35}
.s-bsp-etikett{font:700 10.5px/1.4 var(--kopf-schrift);letter-spacing:1.2px;text-transform:uppercase;color:var(--orange)}
.s-artikel .s-bsp-name{font:700 15px/1.3 var(--kopf-schrift);color:var(--text);text-decoration:none}
.s-artikel .s-bsp-name:hover{color:var(--orange)}
.s-bsp-set{color:var(--leise);font-size:12.5px}
.s-artikel .s-bsp-los{display:inline-block;justify-self:center;margin-top:8px;padding:6px 14px;border-radius:999px;background:var(--orange);color:#160a00;
  font:700 13px var(--kopf-schrift);text-decoration:none}
.s-artikel .s-bsp-los:hover{filter:brightness(1.08)}
.s-beispiel.verkauft img{filter:grayscale(.7);opacity:.7}
.s-beispiel.verkauft .s-bsp-los{background:var(--flaeche2);color:var(--leise)}
.s-verkauft{border:1px solid var(--magenta);background:rgba(227,23,111,.1);border-radius:12px;padding:12px 16px;margin:0 0 16px;font-size:15px}
.s-verkauft b{display:block;margin-bottom:4px}
.s-verkauft a{color:var(--cyan)}
.s-artikel::after{content:"";display:block;clear:both}
.s-top{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px;max-width:900px}
.s-top a{display:grid;grid-template-columns:44px 70px 1fr auto;gap:14px;align-items:center;text-decoration:none;color:var(--text);background:var(--flaeche);border:1px solid var(--rand);border-radius:12px;padding:8px 14px}
.s-top a:hover{border-color:var(--orange)}
.s-top .platz{font:800 24px var(--kopf-schrift);color:var(--orange);text-align:center}
.s-top li:nth-child(-n+3) .platz{color:var(--gelb)}
.s-top img{width:70px;aspect-ratio:63/88;object-fit:contain;border-radius:6px;background:#000}
.s-top small{display:block;color:var(--leise)}
.s-top .preis{font:700 17px var(--kopf-schrift);white-space:nowrap}
@media (max-width:820px){.s-top a{grid-template-columns:30px 56px 1fr;gap:10px}.s-top img{width:56px}.s-top .preis{grid-column:3}}
.s-gewaehr{clear:both;margin:28px 0 8px;padding:12px 14px;border-left:3px solid var(--leise);background:var(--flaeche);border-radius:0 10px 10px 0;
  font-size:13px;line-height:1.55;color:var(--leise)}
.s-gewaehr b{color:var(--text)}
.s-hinweis{border:1px solid var(--orange);background:rgba(255,138,31,.08);border-radius:10px;padding:10px 14px;font-size:14px}
.s-ratgeber{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.s-ratgeber a{display:block;text-decoration:none;color:var(--text);border:1px solid var(--rand);background:var(--flaeche);border-radius:12px;padding:14px 16px}
.s-ratgeber a:hover{border-color:var(--orange)}
.s-ratgeber b{display:block;font-family:var(--kopf-schrift);font-size:16px;margin-bottom:4px}
.s-ratgeber small{color:var(--leise);font-size:13px}
@media (max-width:820px){.s-beispiel{float:none;width:60%;margin:8px auto 16px}.s-artikel h1{font-size:25px}.s-artikel{font-size:15.5px}}
/* Beispielkarte: .s-pc oben rechts nur am PC, .s-handy in der Artikelmitte nur am Handy (Steve 07.10.2026) */
.s-beispiel.s-handy{display:none}
@media (max-width:820px){.s-beispiel.s-pc{display:none}.s-beispiel.s-handy{display:block;margin:20px auto 24px}}
/* Ratgeber-Layout (Steve 06.10.2026): PC = Inhaltsverzeichnis links, Artikel Mitte, weitere Ratgeber rechts – beide Seiten laufen mit */
.s-artikel h2[id]{scroll-margin-top:16px}
.s-rg-layout{display:block}
.s-toc,.s-rg-seite{display:none}
.s-toc-handy{margin:10px 0 18px;border:1px solid var(--rand);border-radius:12px;background:var(--flaeche);padding:10px 14px;font-size:15px}
.s-toc-handy summary{cursor:pointer;font-weight:700}
.s-toc-handy ol{margin:8px 0 0;padding-left:22px}
.s-toc-handy a{color:var(--text)}
@media (min-width:1180px){
  .seite:has(.s-rg-layout){max-width:1440px}
  .s-rg-layout{display:grid;grid-template-columns:230px minmax(0,820px) 260px;gap:40px;justify-content:center;align-items:start}
  .s-toc,.s-rg-seite{display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;font-size:14px;padding-top:58px;
    scrollbar-width:thin;scrollbar-color:var(--rand) transparent}   /* falls doch gescrollt wird: dünn und dunkel statt weißem Balken */
  .s-toc b,.s-rg-seite b{display:block;font:700 12px/1 var(--kopf-schrift);letter-spacing:1px;text-transform:uppercase;color:var(--leise);margin-bottom:10px}
  .s-toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--rand)}
  .s-toc a{display:block;padding:5px 10px 5px 12px;margin-left:-2px;border-left:2px solid transparent;color:var(--leise);text-decoration:none;line-height:1.35}
  .s-toc a:hover{color:var(--text)}
  .s-toc a.an{color:var(--text);border-left-color:var(--orange);font-weight:600}
  .s-rg-seite ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .s-rg-seite li a{display:block;padding:6px 10px;border-radius:8px;color:var(--leise);text-decoration:none;line-height:1.35}
  .s-rg-seite li a:hover{background:var(--flaeche);color:var(--text)}
  .s-rg-alle{display:inline-block;margin-top:10px;color:var(--orange);text-decoration:none;font-weight:600}
  .s-toc-handy,.s-rg-unten{display:none}
}

/* Google-Textblock auf der Shop-Startseite */
.s-start{max-width:1440px;margin:30px auto 0;padding:24px 16px;border-top:1px solid var(--rand);color:var(--leise);font-size:14px;line-height:1.6}
.s-start h1{font:700 22px var(--kopf-schrift);color:var(--text);margin:0 0 8px}
.s-start h2{font-size:16px;color:var(--text);margin:18px 0 6px}
.s-links a{color:var(--leise)}
@media (max-width:820px){
  .s-kopf{grid-template-columns:auto 1fr}
  .s-nav{grid-column:1/-1;overflow-x:auto;flex-wrap:nowrap}
  .s-nav a{white-space:nowrap;padding:8px 12px;font-size:13px}
  .seite{padding:12px 12px 30px}
  .seite h1{font-size:23px}
  .s-karte{grid-template-columns:1fr;gap:16px}
  .s-gross{max-width:78%}.s-gross img{max-height:56vh}
  .s-kaufen{display:block;text-align:center}
  .s-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-zahlen{gap:16px}
  body{padding-bottom:0}
}