/* Surge Atlas — Ratgeber-Artikel. Ergaenzt styles.css (../styles.css).
   Keine externen Aufrufe, kein Tracking. */

.art { max-width: var(--schmal); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--rand) clamp(50px, 8vw, 90px); }

/* Brotkruemel */
.brot { font-size: .82rem; color: var(--grau); margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.brot a { color: var(--grau); text-decoration: none; }
.brot a:hover { color: var(--gold); }
.brot span.sep { opacity: .5; }

/* Artikel-Kopf */
.art-kopf { margin-bottom: 30px; }
.art-kopf h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-bottom: 14px; }
.art-lead { font-size: 1.12rem; color: #cfdcd5; max-width: 40em; }
.art-meta { font-size: .8rem; color: var(--grau); margin-top: 16px; letter-spacing: .02em; }

/* Definitionsbox (zitierfaehig, oben) */
.def { background: rgba(229,178,45,.09); border: 1px solid rgba(229,178,45,.4); border-radius: 14px;
  padding: 20px 22px; margin: 0 0 34px; }
.def b { display: block; font: 700 .76rem/1 "SA Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px; }
.def p { margin: 0; color: #e6efe9; font-size: 1.02rem; }

/* Fliesstext */
.art-inhalt { font-size: 1.04rem; }
.art-inhalt h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 42px 0 14px; }
.art-inhalt h3 { font-size: 1.22rem; margin: 30px 0 10px; color: var(--eis); }
.art-inhalt p, .art-inhalt li { color: #dce7e0; }
.art-inhalt ul, .art-inhalt ol { margin: 0 0 1.1em; padding-left: 1.3em; display: grid; gap: 7px; }
.art-inhalt li { padding-left: 4px; }
.art-inhalt strong { color: #fff; }

/* Beispiel-Kasten */
.bsp { background: linear-gradient(180deg, var(--karte), var(--gruen-2)); border: 1px solid var(--linie);
  border-radius: 16px; padding: 22px 24px; margin: 28px 0; }
.bsp .marke-zeile { font: 700 .74rem/1 "SA Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gruen-signal); margin-bottom: 12px; }
.bsp p:last-child { margin-bottom: 0; }

/* Tabelle */
.tabelle { width: 100%; border-collapse: collapse; margin: 22px 0; font-size: .98rem; }
.tabelle th, .tabelle td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); }
.tabelle th { color: var(--gold); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.tabelle td { color: #dce7e0; }

/* Merksatz */
.merk { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 26px 0; color: #e6efe9;
  font-size: 1.06rem; }

/* Weiterlesen */
.weiter { border: 1px solid var(--linie); border-radius: 16px; padding: 22px 24px; margin: 40px 0 0;
  background: #0a1f15; }
.weiter h3 { margin: 0 0 14px; font-family: "SA Sans", sans-serif; font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold); }
.weiter ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.weiter a { color: var(--eis); text-decoration: none; font-weight: 700; }
.weiter a:hover { color: var(--gold); }
.weiter .pfeil { color: var(--gold); margin-right: 8px; }

/* CTA */
.cta-box { position: relative; text-align: center; border: 1px solid rgba(229,178,45,.45); border-radius: 18px;
  padding: 30px 26px; margin: 44px 0 0; background: radial-gradient(60% 100% at 50% 0%, rgba(229,178,45,.12), transparent 70%), #0a1f15; }
.cta-box h3 { font-size: 1.5rem; margin-bottom: 10px; }
.cta-box p { color: #cfdcd5; max-width: 34em; margin: 0 auto 20px; }
.cta-box .knopf { margin: 0 6px 8px; }

/* Disclaimer */
.art-disc { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linie);
  font-size: .84rem; line-height: 1.6; color: var(--grau); }
.art-disc strong { color: #c6d5cc; }