/* frag-Galal.de – Edelmetalle V12 (31.10.2026, F-WEB-38): Ratgeber-Artikel und Verweise auf der Landingpage.
   Ergänzt fg-site.v5.css, fg-premium.v3.css, fg-sachwerte.v1.css und edel11.css. Nur Markenvariablen und Gold (--gold, #b8860b). */

/* ---- Verweise von der Landingpage in den Ratgeber ---- */
.verweise12{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0 32px;border-top:1px solid var(--line)}
@media(min-width:760px){.verweise12{grid-template-columns:1fr 1fr}}
.verweise12 li{border-bottom:1px solid var(--line)}
.verweise12 a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;color:var(--ink);text-decoration:none;font:600 1.02rem var(--sans)}
.verweise12 a small{display:block;font:400 .9rem var(--sans);color:var(--ink-3);margin-top:2px}
.verweise12 a::after{content:"→";flex:none;color:var(--brand);font-weight:600;transition:transform var(--m-mittel) var(--m-ease)}
/* Audit V13: Hover-Bewegung nur mit Maus/Trackpad, am Handy bleibt nach dem Tippen nichts verschoben */
@media (hover:hover) and (pointer:fine){.verweise12 a:hover::after{transform:translateX(4px)}}
.mehr12{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px;margin:18px 0 0;color:var(--ink-3);font-size:.95rem}
@media(max-width:759px){.verweise12 a{min-height:52px}.verweise12 a small{display:none}}
.verweise12 a:focus-visible{outline:3px solid var(--brand);outline-offset:2px;border-radius:6px}

/* ---- Ratgeber: Kopf, Brotkrumen ---- */
.rg12 .kopf12{padding-bottom:24px}
.brot12 ol{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:.9rem;color:var(--ink-3)}
.brot12 li+li::before{content:"/";margin-right:8px;color:var(--line)}
.brot12 a{color:var(--ink-2);text-decoration:none;display:inline-flex;min-height:44px;align-items:center}
.brot12 a:hover{color:var(--brand);text-decoration:underline}
.brot12 [aria-current]{display:inline-flex;min-height:44px;align-items:center}
.rg12 .kopf12 h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;letter-spacing:-.015em;margin:6px 0 16px;max-width:20ch}
.rg12 .kopf12 .unter9{max-width:40rem}
.rg12 .kopf12 .warnung11{max-width:40rem}
.rg12 .kopf12 .btns{margin-top:22px}

/* ---- Artikeltext: Lesebreite ~68 Zeichen ---- */
.artikel12{max-width:68ch;color:var(--ink-2)}
.rg12 main section.text12{padding-top:24px}
.artikel12 h2{font:500 clamp(1.6rem,3.4vw,2.1rem)/1.15 var(--serif);color:var(--ink);margin:52px 0 14px}
.artikel12>h2:first-child{margin-top:0}
.artikel12 h3{font:500 1.3rem var(--serif);color:var(--ink);margin:30px 0 8px}
.artikel12 p{margin:0 0 14px}
.artikel12 b{color:var(--ink)}
.artikel12 a:not(.btn){color:var(--brand);text-underline-offset:3px}
.punkte12{margin:0 0 14px;border-top:1px solid var(--line)}
.punkte12 dt{font-weight:600;color:var(--ink);padding-top:14px}
.punkte12 dd{margin:2px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line)}
.liste12{margin:0 0 16px;padding-left:1.2em}
.liste12 li{margin:.25em 0}
.liste12 li::marker{color:var(--brand)}
.artikel12 .schritte11{margin:0 0 14px}
.artikel12 .prozess12{margin:8px 0 34px}
.artikel12 .prozess12 b{font-size:1.15rem}
.artikel12 .fazit11{margin:22px 0}
.artikel12 .warnung11{margin:4px 0 18px}
.artikel12 .rliste11{margin:0 0 18px}
.artikel12 .rliste11 li:first-child{border-top:1px solid var(--line)}
.artikel12 .pruef11{margin-top:6px}
.breit12 .kosten11{margin:6px 0 22px}
@media(min-width:900px){.breit12 .kosten11{grid-template-columns:1fr}}

/* ---- Tabelle Gold/Silber ---- */
.tabelle12-box{margin:0 0 8px}
.tabelle12{width:100%;border-collapse:collapse;font-size:.95rem}
.tabelle12 th,.tabelle12 td{text-align:left;vertical-align:top;padding:12px 10px 12px 0;border-bottom:1px solid var(--line)}
.tabelle12 thead th{font:600 .85rem var(--sans);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--line)}
.tabelle12 tbody th{color:var(--ink);font-weight:600;width:28%}
.tabelle12 td{color:var(--ink-2)}
.tabelle12 thead th:nth-child(2){color:color-mix(in srgb,var(--gold) 70%,var(--ink))}
@media(max-width:620px){
  .tabelle12 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tabelle12,.tabelle12 tbody,.tabelle12 tr,.tabelle12 th,.tabelle12 td{display:block;width:auto}
  .tabelle12 tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .tabelle12 tbody th,.tabelle12 td{border:0;padding:2px 0}
  .tabelle12 td::before{display:block;font:600 .78rem var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
  .tabelle12 td:nth-of-type(1)::before{content:"Gold"}
  .tabelle12 td:nth-of-type(2)::before{content:"Silber"}
}

/* ---- kleine SVG-Grafiken ---- */
.grafik12{margin:22px 0 26px;padding:20px 20px 14px;background:var(--paper-2);border-radius:22px}
.grafik12 svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.grafik12 figcaption{margin:10px 0 0}
.g12-gold rect{fill:var(--gold)}
.g12-silber rect{fill:var(--paper-3);stroke:var(--ink-3);stroke-width:1}
.g12-text{font:600 14px var(--sans);fill:var(--ink)}
.g12-klein{font:500 12px var(--sans);fill:var(--ink-3)}
.g12-klein.marke{fill:var(--brand-deep);font-weight:600}
.g12-trenn{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.g12-achse{stroke:var(--line);stroke-width:4;stroke-linecap:round}
.g12-frist{stroke:var(--brand);stroke-width:6;stroke-linecap:round}
.g12-punkt{fill:var(--gold)}
.g12-punkt.hohl{fill:var(--paper);stroke:var(--brand);stroke-width:3}

/* ---- Umsatzsteuer-Kacheln ---- */
.ust12{list-style:none;margin:0 0 18px;padding:0}
.ust12 .kachel11 strong{font-size:1.3rem}
.ust12 .kachel11:first-child{border-color:color-mix(in srgb,var(--gold) 55%,var(--line))}
.ust12 p{margin:8px 0 0;font-size:.92rem}

/* ---- Rechner + Gespräch ---- */
.cta12{display:grid;gap:18px}
@media(min-width:900px){.cta12{grid-template-columns:1fr 1fr}}
.cta12 .card{background:var(--paper);border-radius:24px;padding:26px}
.cta12 h2{font:500 clamp(1.5rem,3vw,1.9rem)/1.15 var(--serif);margin:4px 0 10px}
.cta12 .btns{margin-top:18px}
.rg12 #termin .slogan11{margin:26px 0 0}

/* ---- Kacheln zu Artikeln ---- */
.gross12{font:500 clamp(1.6rem,3.4vw,2.2rem)/1.15 var(--serif);margin:0 0 18px}
.kacheln12{list-style:none;margin:0;padding:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.kachel12{display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box;text-decoration:none;color:var(--ink);transition:border-color var(--m-mittel),transform var(--m-mittel) var(--m-ease)}
.kachel12 strong{font-size:1.3rem!important;margin:0!important}
.kachel12 small{font-size:.92rem!important;color:var(--ink-2)!important}
.kachel12::after{content:"Lesen →";margin-top:auto;padding-top:6px;color:var(--brand);font-weight:600;font-size:.92rem}
@media (hover:hover) and (pointer:fine){.kachel12:hover{border-color:var(--brand);transform:translateY(-2px)}}
.kachel12:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.uebersicht12 .kachel12{padding:22px}
.uebersicht12 .kachel12 strong{font-size:1.45rem!important}
.schluss12{display:grid;gap:26px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
@media(min-width:900px){.schluss12{grid-template-columns:.6fr 1.4fr;gap:44px}}
.rg12 #faq .info11>div p{margin:0 0 8px}
@media (prefers-reduced-motion: reduce){.kachel12,.verweise12 a::after{transition:none}.kachel12:hover{transform:none}}