/* frag-Galal.de – Edelmetallseite V11 (31.10.2026, F-WEB-36). Ergänzt fg-site.v5.css, fg-premium.v3.css, /assets/fg-sachwerte.v1.css
   und /edelmetalle/rechner-v2.css. Farben nur aus den Markenvariablen (--brand*, --paper*, --ink*, --line, --plus, --minus) und Gold #b8860b;
   Silber nur aus --paper, --paper-3, --line, --ink-3. Animationen nur über transform und opacity, gestartet erst im sichtbaren Bereich (edel11.js). */

:root{--gold:#b8860b}
.seitennav11 a{min-height:44px}

/* ================= 1 · Hero mit Barren ================= */
.hero11 .brot11{margin:0 0 14px}
.hero11 .warnung11{max-width:34rem;margin-top:22px}
.barren11{margin:0;position:relative;justify-self:center;width:100%;max-width:520px}
.barren11 svg{display:block;width:100%;height:auto;overflow:visible}
.barren11-name{display:grid;justify-items:center;margin-top:-6px;font:600 .82rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.barren11-name span{grid-area:1/1}
@media(max-width:899px){.barren11{max-width:400px}.barren11 svg{max-height:210px}}

/* Verläufe Gold (#b8860b, aufgehellt mit --paper, abgedunkelt mit --ink) und Silber (--paper, --paper-3, --line, --ink-3) */
.g-hell{stop-color:color-mix(in srgb,var(--gold) 38%,var(--paper))}
.g-licht{stop-color:color-mix(in srgb,var(--gold) 72%,var(--paper))}
.g-mitte{stop-color:var(--gold)}
.g-basis{stop-color:color-mix(in srgb,var(--gold) 86%,var(--ink))}
.g-tief{stop-color:color-mix(in srgb,var(--gold) 66%,var(--ink))}
.g-dunkel{stop-color:color-mix(in srgb,var(--gold) 46%,var(--ink))}
.s-hell{stop-color:var(--paper)}
.s-licht{stop-color:var(--paper-3)}
.s-mitte{stop-color:var(--line)}
.s-tief{stop-color:var(--ink-3)}
.r-aus{stop-color:var(--paper);stop-opacity:0}
.r-an{stop-color:var(--paper);stop-opacity:.6}
.h-an{stop-color:color-mix(in srgb,var(--gold) 20%,var(--paper))}
.h-aus{stop-color:var(--paper);stop-opacity:0}
.b11-schatten{fill:var(--ink);opacity:.22}
.b11-kante{fill:none;stroke:var(--paper);stroke-opacity:.75;stroke-width:1.5}
.b11-kante.duenn{stroke-opacity:.45;stroke-width:1}
.b11-praeg{font:600 34px var(--serif);letter-spacing:.06em;stroke:var(--paper);stroke-opacity:.35;stroke-width:.8;paint-order:stroke}
.b11-praeg.g{fill:color-mix(in srgb,var(--gold) 58%,var(--ink))}
.b11-praeg.s{fill:var(--ink-3)}
.barren11 .b11-b{opacity:0}
.b11-kipp{transform-box:fill-box;transform-origin:50% 70%}
.b11-reflex{transform:translateX(250px);opacity:.7}

/* Bewegung: nur mit Skript, pausiert außerhalb des sichtbaren Bereichs */
.js11 .barren11 .b11-kipp{animation:kipp11 11s ease-in-out infinite alternate;animation-play-state:paused}
.js11 .barren11 .b11-kipp2{animation-duration:13s;animation-delay:-5s}
.js11 .barren11 .b11-a{animation:metA11 16s ease-in-out infinite;animation-play-state:paused}
.js11 .barren11 .b11-b{animation:metB11 16s ease-in-out infinite;animation-play-state:paused}
.js11 .barren11 .b11-reflex{animation:reflex11 8s ease-in-out infinite;animation-play-state:paused}
.js11 .barren11.sicht11 .b11-kipp,.js11 .barren11.sicht11 .b11-a,.js11 .barren11.sicht11 .b11-b,.js11 .barren11.sicht11 .b11-reflex{animation-play-state:running}
@keyframes kipp11{0%{transform:rotate(-2.2deg) scaleX(1) translateY(0)}50%{transform:rotate(.6deg) scaleX(.965) translateY(-5px)}100%{transform:rotate(2deg) scaleX(1.01) translateY(-2px)}}
@keyframes metA11{0%,38%{opacity:1}50%,88%{opacity:0}100%{opacity:1}}
@keyframes metB11{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
@keyframes reflex11{0%,18%{transform:translateX(0);opacity:0}24%{opacity:1}62%{transform:translateX(560px);opacity:1}63%,100%{transform:translateX(560px);opacity:0}}

/* Grundsätze unter dem Hero */
.grund11{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:14px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.grund11{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grund11 li{border-top:2px solid var(--gold);padding-top:12px;min-width:0}
.grund11 b{display:block;font:500 1.12rem/1.2 var(--serif);color:var(--ink)}
.grund11 p{margin:4px 0 0;font-size:.92rem;color:var(--ink-2);line-height:1.45}
@media(max-width:759px){.grund11{margin-top:28px}.grund11 b{font-size:1.02rem}.grund11 p{font-size:.86rem}}

/* ================= 2 · Gold / Silber ================= */
.kopf11{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px}
.kopf11 .gross9{margin-bottom:0}
/* A18 (Audit V13): alle Übergänge des Gold/Silber-Umschalters einheitlich 300 ms, eine Kurve, Staffel 30 ms */
.vgl11{--um11-d:300ms;--um11-k:cubic-bezier(.23,1,.32,1);display:grid;gap:22px;margin-top:30px}
@media(min-width:900px){.vgl11{grid-template-columns:.75fr 1.25fr;gap:36px;align-items:stretch}}
.vgl11-bild{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:22px}
.vgl11-bild svg{display:grid;width:100%;max-width:340px;height:auto;transition:transform var(--um11-d) var(--um11-k)}
.vgl11-bild use{transition:opacity var(--um11-d) var(--um11-k)}
.vgl11-name{display:grid;justify-items:center;margin:8px 0 0;font:500 1.3rem var(--serif);color:var(--ink)}
.vgl11-name span{grid-area:1/1;transition:opacity var(--um11-d) var(--um11-k)}
.vgl11 .v-s{opacity:0}
.vgl11[data-metall=silber] .v-g{opacity:0}
.vgl11[data-metall=silber] .v-s{opacity:1}
.vgl11[data-metall=silber] .vgl11-bild svg{transform:rotate(-1.5deg) scale(.98)}
@media(max-width:899px){.vgl11-bild{flex-direction:row;gap:16px;padding:14px 18px}.vgl11-bild svg{max-width:150px}.vgl11-name{margin:0}}

.vgl11-liste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media(min-width:620px){.vgl11-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vgl11-liste li{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:16px 18px;min-width:0}
.vgl11-liste h3{margin:0 0 6px;font:600 1rem var(--sans);color:var(--ink)}
.vgl11-liste p{margin:0;font-size:.93rem;line-height:1.45;color:var(--ink-2)}
.vgl11-liste p+p{margin-top:8px}
.tag11{display:inline-block;margin:0 6px 2px 0;padding:1px 10px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--gold) 20%,var(--paper))}
.tag11.warm{background:var(--brand-soft);color:var(--brand-deep)}
/* ohne Skript: beide Texte mit Beschriftung */
html:not(.js11) .nur-g::before{content:"Gold: ";font-weight:600;color:var(--ink)}
html:not(.js11) .nur-s::before{content:"Silber: ";font-weight:600;color:var(--ink)}
.js11 .vgl11[data-metall=gold] .nur-s,.js11 .vgl11[data-metall=silber] .nur-g{display:none}
.js11 .vgl11 .nur-g,.js11 .vgl11 .nur-s{animation:ein11 var(--um11-d) var(--um11-k)}
@keyframes ein11{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* kleine schematische Anzeigen */
.mess11{display:flex;gap:4px;margin-top:12px;height:10px}
.mess11 i{display:block;border-radius:3px;background:var(--gold);transition:transform var(--um11-d) var(--um11-k),opacity var(--um11-d) var(--um11-k),background-color var(--um11-d) var(--um11-k)}
.vgl11[data-metall=silber] .mess11 i{background:var(--ink-3)}
.band11{background:var(--paper-3);border-radius:99px;overflow:hidden}
.band11 i{flex:1;border-radius:99px;transform:scaleX(.45)}
.vgl11[data-metall=silber] .band11 i{transform:scaleX(.9)}
.bloecke11 i{width:16px}
.bloecke11 i+i{opacity:0}
.vgl11[data-metall=silber] .bloecke11 i+i{opacity:1}
.vgl11[data-metall=silber] .bloecke11 i:nth-child(3){transition-delay:30ms}
.vgl11[data-metall=silber] .bloecke11 i:nth-child(4){transition-delay:60ms}
.vgl11[data-metall=silber] .bloecke11 i:nth-child(5){transition-delay:90ms}
.vgl11[data-metall=silber] .bloecke11 i:nth-child(6){transition-delay:120ms}
.kette11 i{flex:1}
.vgl11 .kette11 i:nth-child(1){background:var(--brand)}
.vgl11 .kette11 i:nth-child(2){background:var(--brand-deep)}
.vgl11 .kette11 i:nth-child(3){background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.vgl11 .kette11 i.ust{background:transparent;box-shadow:inset 0 0 0 1px var(--brand);opacity:.25}
.vgl11[data-metall=silber] .kette11 i.ust{background:var(--brand-soft);opacity:1}
.fazit11{margin:26px 0 4px;font:400 1.25rem/1.4 var(--serif);color:var(--ink)}
.fazit11 b{font-weight:600}

/* ================= 3 · Rechner ================= */
#rechner .unter9{margin-bottom:6px}
.kstand11{border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:14px;background:var(--paper-2);padding:14px 16px}
.kstand11-titel{margin:0 0 6px;font-weight:600;color:var(--ink)}
.kstand11-werte{list-style:none;margin:0;padding:0}
.kstand11-werte li{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px dotted var(--line);font-size:.93rem;color:var(--ink-2)}
.kstand11-werte b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kstand11-warn{margin:12px 0 0;font-size:.92rem;color:var(--ink-2)}
.kstand11-warn.warnung11{margin-top:12px;padding:12px 14px;font-size:.9rem}
.kstand11-knopf{margin-top:8px;padding-left:0;padding-right:0}
.erweitert11>div{display:grid;gap:18px}
.erweitert11>div .clean{margin:-6px 0 0}
#rechner .info11>summary{min-height:60px}
.em-v2 .em-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.em-v2 .em-kpis div:last-child{grid-column:1/-1}
@media(min-width:620px){.em-v2 .em-kpis{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}.em-v2 .em-kpis div:last-child{grid-column:auto}}
.em-v2 .em-kpis b{font-size:1.25rem}
.em11-mehr{margin-top:24px}
.em11-mehr .info11>div{max-width:none}
#rechner>.innen9>.infoliste11{margin-top:20px}

/* ================= 4 · Ablauf ================= */
.weg11-buehne{position:relative}
.weg11-buehne .prozess11{margin-top:44px}
.prozess11 p{margin:4px 0 0;font-size:.95rem;line-height:1.45;color:var(--ink-2);max-width:30ch}
@media(min-width:900px){.prozess11 p{margin-left:auto;margin-right:auto}}
.prozess11 .nr::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.weg11{display:none}
@media(min-width:900px){
  .weg11{display:block;position:absolute;top:2px;height:24px;left:calc((100% - 44px)/6);right:calc((100% - 44px)/6);container-type:inline-size;pointer-events:none}
  .laeufer11{position:absolute;left:-30px;top:0;width:60px;height:24px;display:block}
  .laeufer11 svg{display:block;width:60px;height:24px}
  .js11 .weg11-buehne .laeufer11{animation:lauf11 9s var(--m-ease) infinite;animation-play-state:paused}
}
.js11 .weg11-buehne .nr::after{animation:ring11 9s ease-out infinite;animation-play-state:paused}
.js11 .weg11-buehne li:nth-child(2) .nr::after{animation-delay:2.9s}
.js11 .weg11-buehne li:nth-child(3) .nr::after{animation-delay:5.9s}
.js11 .weg11-buehne.sicht11 .laeufer11,.js11 .weg11-buehne.sicht11 .nr::after{animation-play-state:running}
@keyframes lauf11{0%{transform:translateX(0);opacity:1}12%{transform:translateX(0)}33%,45%{transform:translateX(50cqw)}66%,82%{transform:translateX(100cqw);opacity:1}90%{transform:translateX(100cqw);opacity:0}91%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes ring11{0%{opacity:0;transform:scale(.85)}5%{opacity:1;transform:scale(1)}16%{opacity:1}24%,100%{opacity:0;transform:scale(1.08)}}
.schritte11{margin:0;padding-left:1.2em}
.schritte11 li{margin:.4em 0}

/* ================= 5 · Kosten und Risiken ================= */
.kosten11{display:grid;gap:28px;margin-top:30px}
@media(min-width:900px){.kosten11{grid-template-columns:1fr 1fr;gap:44px;align-items:center}}
.kgrafik11{margin:0;background:var(--paper-2);border-radius:24px;padding:24px 22px 18px}
.kg11-saeulen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:232px;align-items:end}
.kg11-spalte{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
/* A11 (Audit V13): kein Abblenden mehr vor dem Sichtbarwerden (Beschriftungen hatten dabei 1,4–1,7:1 Kontrast); die Säulen bauen sich
   per clip-path von unten auf, statt per scaleY gestaucht zu werden */
.kg11-stapel{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;clip-path:inset(0 0 0 0 round 7px);transition:clip-path 700ms var(--m-ease)}
.kg11-spalte:nth-child(2) .kg11-stapel{transition-delay:120ms}
.kg11-spalte:nth-child(3) .kg11-stapel{transition-delay:240ms}
.js11 .kgrafik11:not(.sicht11) .kg11-stapel{clip-path:inset(88% 0 0 0 round 7px)}
.kg11-stapel i{display:flex;align-items:center;justify-content:center;font:600 .74rem var(--sans);font-style:normal;border-radius:7px;overflow:hidden;white-space:nowrap}
.kg11-stapel .k-markt{height:120px;background:var(--paper-3);color:var(--ink-2)}
.kg11-stapel .k-auf{height:34px;background:var(--brand);color:var(--paper)}
.kg11-stapel .k-ust{height:22px;box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand-deep)}
.kg11-stapel .k-lager{height:26px;background:var(--brand-deep);color:var(--paper)}
.kg11-stapel .k-metall{background:var(--gold);color:var(--ink)}
.kg11-spalte:nth-child(2) .k-metall{height:126px}
.kg11-spalte:nth-child(3) .k-metall{height:104px}
.kg11-stapel .k-rueck{height:30px;background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand);color:var(--brand-deep)}
.kg11-spalte small{display:block;text-align:center;margin-top:8px;font:600 .88rem var(--sans);color:var(--ink)}
.kgrafik11 figcaption{margin:12px 0 0}
.klegende11{list-style:none;margin:0;padding:0}
.klegende11 li{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.klegende11 li:first-child{border-top:1px solid var(--line)}
.klegende11 li::before{content:"";grid-row:1/3;width:16px;height:16px;border-radius:5px;margin-top:3px}
.klegende11 .k-auf::before{background:var(--brand)}
.klegende11 .k-lager::before{background:var(--brand-deep)}
.klegende11 .k-rueck::before{background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand)}
.klegende11 .k-versand::before{background:var(--ink-3)}
.klegende11 b{color:var(--ink)}
.klegende11 p{margin:2px 0 0;font-size:.93rem;color:var(--ink-2)}

.risiko11{display:grid;gap:28px;margin-top:48px}
@media(min-width:900px){.risiko11{grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}}
.risiko11 h3{margin:0 0 10px;font:500 1.4rem var(--serif)}
.rliste11{list-style:none;margin:0;padding:0}
.rliste11 li{display:grid;gap:2px 16px;padding:11px 0;border-bottom:1px solid var(--line)}
@media(min-width:620px){.rliste11 li{grid-template-columns:150px minmax(0,1fr);align-items:baseline}}
.rliste11 b{display:flex;align-items:center;gap:8px;color:var(--ink)}
.rliste11 b::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--minus)}
.rliste11 p{margin:0;font-size:.95rem;color:var(--ink-2)}
.pruef11{background:var(--paper-2);border-radius:22px;padding:20px 22px}
.pruef11 ul{list-style:none;margin:0;padding:0}
.pruef11 li+li{border-top:1px solid var(--line)}
.pruef11 label{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;cursor:pointer;font-size:.95rem;color:var(--ink-2)}
.pruef11 input{flex:none;width:22px;height:22px;min-height:22px;margin:1px 0 0;padding:0;accent-color:var(--brand)}
.pruef11 input:checked+span{color:var(--ink)}
#kosten-risiken .infoliste11{margin-top:30px}

/* ================= 6 · Gespräch ================= */
#termin .person11{align-items:start}
@media(min-width:900px){#termin .person11 img{max-height:560px}}
.person11 .unter9{margin-bottom:12px}
.person11-text{color:var(--ink-2);max-width:38rem}
.slogan11{font:400 1.3rem var(--serif);margin:16px 0 18px;color:var(--ink)}
.person11 .btns{display:flex;flex-wrap:wrap;gap:12px}
.person11 .infoliste11{margin-top:22px}
.person11 .card{background:var(--paper)}

/* ================= 7 · FAQ und Schluss ================= */
#faq .faq-raster{margin-top:22px}
#faq .faq-raster>div>.info11:last-child{border-bottom:1px solid var(--line)}
@media(max-width:899px){#faq .faq-raster>div:first-child>.info11:last-child{border-bottom:0}}
.schluss11{display:grid;gap:26px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
@media(min-width:900px){.schluss11{grid-template-columns:.6fr 1.4fr;gap:44px}}
.weiter11{list-style:none;margin:0;padding:0}

/* Bewegung reduzieren: alles steht still (seite11.css schaltet Animationen ab), Inhalte vollständig sichtbar */
@media (prefers-reduced-motion: reduce){
  .js11 .kgrafik11 .kg11-stapel{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
  .weg11{display:none!important}
}