/* funktionen.css — Ergaenzungen NUR fuer /funktionen/-Seiten und /datensicherheit.
   Laedt nach site.css und trades.css; beide bleiben unangetastet. */

/* Inner-Nav auf trade-page-Basis: trades.css liefert den sticky dunklen Header,
   site.css die Disclosure-Mechanik; hier kommen Brand/Links/CTA dazu. */
body.trade-page .inner-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(16px,4vw,40px);min-height:64px}
body.trade-page .nav-brand{display:inline-flex;align-items:center;text-decoration:none}
body.trade-page .nav-brand img{width:auto;height:27px}
body.trade-page .inner-nav .nav-links{display:flex;align-items:center;gap:4px}
body.trade-page .inner-nav .nav-links a{padding:8px 13px;font-size:14px;font-weight:500;text-decoration:none;border-radius:6px;color:#fff;transition:background .15s;white-space:nowrap}
body.trade-page .inner-nav .nav-links a:hover{background:rgba(255,255,255,.16)}
body.trade-page .inner-nav .nav-links a[aria-current]{color:var(--trade-gold-bright,#e1bd63)}
body.trade-page .inner-nav + main{padding-top:0}
@media(max-width:1100px){body.trade-page .inner-nav .nav-links{display:none}}
@media(min-width:1101px){body.trade-page .inner-menu{display:none}}

/* Gold-Highlight in Ueberschriften (dunkler Hero) */
body.funktionen-page h1 em.hl{font-style:normal;color:#E1BD63}

/* Hero: Text links, Mockup rechts */
body.funktionen-page .f-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,34vw,420px);gap:clamp(28px,5vw,64px);align-items:center}
body.funktionen-page .f-shot{margin:0}
body.funktionen-page .f-shot img{width:100%;height:auto;border-radius:16px;border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 80px -46px rgba(0,0,0,.95)}
body.funktionen-page .f-shot figcaption{margin-top:10px;color:rgba(255,255,255,.55);font-size:12px;text-align:center}

/* Ehrliche Grenzen: ruhiger Kastenblock */
body.funktionen-page .f-limits{border:1px solid var(--trade-line);border-radius:14px;background:#fff;padding:clamp(20px,3vw,30px)}
body.funktionen-page .f-limits h2{margin-top:0}
body.funktionen-page .f-limits p{margin:0;color:#686050;font-size:16px;line-height:1.65}

/* Uebersicht /funktionen/: kompakte Text-Karten, kleines Vorschaubild links */
body.funktionen-page .hubgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.funktionen-page .hubcard{display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:18px;align-items:start;padding:16px;overflow:hidden}
body.funktionen-page .hub-thumb{grid-row:1 / span 3;width:120px;height:90px;aspect-ratio:auto;object-fit:cover;background:#efe7d6;border:1px solid var(--trade-line);border-radius:10px;align-self:start}
body.funktionen-page .hubcard .hk{padding:0;font-size:18px}
body.funktionen-page .hubcard .hd2{padding:0;font-size:15px;line-height:1.5}
body.funktionen-page .hubcard::after{grid-column:2;padding:0;margin-top:6px;white-space:nowrap}

@media(max-width:820px){
  body.funktionen-page .f-hero-grid{grid-template-columns:1fr}
  body.funktionen-page .f-shot{max-width:340px;margin:6px auto 0}
}

/* Mobil: eine Spalte, Thumbs etwas kleiner */
@media(max-width:820px){
  body.funktionen-page .hubgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  body.funktionen-page .hubcard{grid-template-columns:96px minmax(0,1fr);column-gap:14px;padding:12px}
  body.funktionen-page .hub-thumb{width:96px;height:72px}
}