/* ============================================================
   SimpleTrailer — Ratgeber (helles Editorial-Design)
   Eigenständig & lesbar: warmes Papier, kräftige Tinte,
   Fraunces (Display) + Hanken Grotesk (Text), Orange als Akzent.
   Ersetzt das alte dunkle Inline-Theme + light-theme.css-Flicken.
   v1 — 2026-06-26
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --paper:    #F7F4EF;   /* warmes Papier (Seitenhintergrund) */
  --paper-2:  #FBF9F5;   /* zarte Tönung (Boxen, Footer) */
  --card:     #FFFFFF;
  --ink:      #1F1C18;   /* Überschriften, fett */
  --text:     #3B362F;   /* Fließtext */
  --muted:    #7A736A;   /* Meta, Bildunterschriften */
  --line:     rgba(31,28,24,.12);
  --line-soft:rgba(31,28,24,.07);
  --orange:   #E85D00;
  --orange-h: #FF6A00;
  --orange-ink:#B24600;  /* Orange-Ton für Text/Links (Kontrast auf hell) */
  --green:#1C7A41; --green-bg:#E7F5EC;
  --red:  #BF3A1E; --red-bg:#FBEDE8;
  --yellow:#8E6300; --yellow-bg:#FBF1D7;
  --nav:#100E0C;
  --shadow: 0 1px 2px rgba(31,28,24,.04), 0 14px 34px -20px rgba(31,28,24,.30);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--orange-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── NAV (bleibt dunkel wie auf der Startseite) ───────────── */
nav {
  background: var(--nav);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0 clamp(16px, 5vw, 40px);
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  position: sticky; top: 0; z-index: 100;
}
.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo-img { height: 30px; width: auto; display: block; }
.nav-actions { display: flex; align-items: center; gap: 16px; min-width: 0; }
.nav-back { color: #B9B3AA; font-size: .9rem; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav-back:hover { color: #fff; text-decoration: none; }
.nav-cta {
  background: var(--orange); color: #fff !important;
  padding: 9px 18px; border-radius: 10px;
  font-size: .88rem; font-weight: 700; white-space: nowrap;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 8px 18px -8px rgba(232,93,0,.7);
}
.nav-cta:hover { background: var(--orange-h); transform: translateY(-1px); text-decoration: none; }

/* ── LAYOUT-CONTAINER ─────────────────────────────────────── */
.page    { max-width: 1080px; margin: 0 auto; padding: clamp(40px,6vw,72px) clamp(18px,5vw,32px) 90px; }
article  { max-width: 720px;  margin: 0 auto; padding: clamp(32px,5vw,56px) clamp(18px,5vw,28px) 90px; }

/* ── KOPF (Breadcrumb / Tag / H1 / Lead) ──────────────────── */
.breadcrumb { color: var(--muted); font-size: .84rem; margin-bottom: 22px; }
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--ink); text-decoration: none; }

.section-tag {
  display: inline-block;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 16px;
}

h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.1rem, 5vw, 3.05rem); line-height: 1.08;
  letter-spacing: -.015em; color: var(--ink); margin-bottom: 18px;
}
.meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--muted); font-size: .88rem; margin-bottom: 30px;
}
.lead {
  font-size: clamp(1.12rem, 2.2vw, 1.3rem); line-height: 1.6;
  color: var(--ink); font-weight: 500; max-width: 640px; margin-bottom: 46px;
}
.lead strong { font-weight: 800; }

/* ── ARTIKEL-BILD (dezent, mittig, nicht zu groß) ─────────── */
.r-figure { max-width: 560px; margin: 28px auto 34px; }
.r-figure picture { display: block; }
.r-figure img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.r-figure figcaption { margin-top: 10px; font-size: .82rem; color: var(--muted); text-align: center; line-height: 1.5; }

/* ── FLIESSTEXT (nur im Artikel) ──────────────────────────── */
article h2, article h3, article p, article ul, article ol { max-width: 100%; }
h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.55rem, 3.2vw, 2rem); line-height: 1.18;
  letter-spacing: -.01em; color: var(--ink);
  margin: 50px 0 14px; scroll-margin-top: 80px;
}
h3 {
  font-family: var(--sans); font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.01em; color: var(--ink); margin: 30px 0 10px;
}
article p {
  color: var(--text); font-size: 1.07rem; line-height: 1.78; margin-bottom: 18px;
}
article p strong, li strong { color: var(--ink); font-weight: 700; }
article em { font-style: italic; }
article ul, article ol:not(.steps) {
  color: var(--text); font-size: 1.07rem; line-height: 1.78;
  margin: 0 0 20px; padding-left: 24px;
}
article li { margin-bottom: 8px; }
article ul li::marker { color: var(--orange); }

/* ── SCHRITT-LISTE ────────────────────────────────────────── */
.steps { list-style: none; counter-reset: step; margin: 30px 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step-item {
  position: relative; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 26px 24px 80px; box-shadow: var(--shadow);
  transition: border-color .2s, transform .2s;
}
.step-item:hover { border-color: rgba(232,93,0,.4); transform: translateY(-2px); }
.step-item::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 22px; top: 23px;
  width: 42px; height: 42px; background: var(--orange); color: #fff;
  border-radius: 13px; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  box-shadow: 0 8px 16px -7px rgba(232,93,0,.65);
}
.step-item h3 { margin: 0 0 8px; font-size: 1.14rem; }
.step-item p  { margin-bottom: 0; }
.step-tip {
  margin-top: 12px !important; font-size: .94rem !important;
  color: var(--muted) !important; font-style: normal;
  background: var(--paper-2); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 10px 14px;
}

/* ── HINWEIS- / WARN-BOXEN ────────────────────────────────── */
.hint, .warn {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: 14px; padding: 20px 22px; margin: 26px 0;
}
.hint {
  background: linear-gradient(180deg,#FFF6EE,#FFF0E2);
  border: 1px solid #F4D2B2; border-left: 4px solid var(--orange);
}
.warn {
  background: linear-gradient(180deg,#FCEFEB,#FAE6E0);
  border: 1px solid #F0C4B6; border-left: 4px solid var(--red);
}
.hint .icon, .warn .icon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.hint p { margin: 0; color: var(--ink); }
.warn p { margin: 0; color: #5A2719; }
.warn p strong { color: #3E1810; }

/* ── ZUSAMMENFASSUNG ──────────────────────────────────────── */
.summary {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 28px 30px 26px; margin: 38px 0; box-shadow: var(--shadow);
}
.summary::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--orange); }
.summary h2 { margin: 0 0 14px; font-size: 1.3rem; }
.summary ul { margin: 0; padding-left: 22px; }
.summary li { margin-bottom: 10px; }

/* ── RECHEN-BOX (.calc) ───────────────────────────────────── */
.calc {
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--orange); border-radius: 14px;
  padding: 20px 22px; margin: 24px 0; box-shadow: var(--shadow);
  line-height: 2; font-size: 1.02rem; color: var(--text);
}
.calc-label { color: var(--muted); }
.calc-val   { color: var(--ink); font-weight: 700; }
.calc-result {
  display: inline-block; margin-top: 12px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif); font-weight: 700; font-size: 1.16rem;
  color: var(--orange-ink); line-height: 1.4;
}

/* ── TABELLEN (.compare-table + .penalty table) ───────────── */
.compare-table, .penalty table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 24px 0; font-size: .98rem; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow);
}
.compare-table th, .compare-table td,
.penalty th, .penalty td {
  padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.compare-table thead th, .penalty th {
  background: #F1ECE3; color: var(--ink); font-weight: 800;
  font-size: .8rem; letter-spacing: .03em; text-transform: uppercase;
}
.compare-table td, .penalty td { color: var(--text); }
.compare-table tbody tr:nth-child(even) td, .penalty tr:nth-child(even) td { background: var(--paper-2); }
.compare-table tbody tr:last-child td, .penalty tr:last-child td { border-bottom: none; }
.compare-table td:first-child, .compare-table th:first-child,
.penalty td:first-child, .penalty th:first-child { color: var(--ink); }
.amount { text-align: right; font-weight: 700; color: var(--ink) !important; white-space: nowrap; }

/* Bußgeld-Block */
.penalty { margin: 24px 0; }
.penalty h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--red); }

/* ── PILLS (Mini-Labels) ──────────────────────────────────── */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; line-height: 1.5; white-space: normal;
}
.pill-green  { background: var(--green-bg);  color: var(--green); }
.pill-yellow { background: var(--yellow-bg); color: var(--yellow); }
.pill-red    { background: var(--red-bg);    color: var(--red); }

/* ── CTA-BLOCK (dunkel, premium) ──────────────────────────── */
.cta, .cta-block {
  position: relative; overflow: hidden; text-align: center;
  margin-top: 54px;
  background: radial-gradient(130% 140% at 0% 0%, #2A2017 0%, #15110D 62%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 22px;
  padding: clamp(32px,5vw,46px) clamp(24px,4vw,40px);
}
.cta::after, .cta-block::after {
  content: ""; position: absolute; top: -45%; right: -12%;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(232,93,0,.30), transparent 70%);
  pointer-events: none;
}
.cta h2, .cta-block h2 {
  font-family: var(--serif); color: #fff; margin: 0 0 10px;
  font-size: clamp(1.5rem, 3vw, 1.95rem); position: relative;
}
.cta p, .cta-block p {
  color: #CCC4B8; font-size: 1.03rem; margin: 0 auto 22px; max-width: 460px; position: relative;
}
.cta-btn, .cta-block .btn {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  background: var(--orange); color: #fff !important;
  padding: 14px 30px; border-radius: 12px; font-weight: 800; font-size: 1rem;
  box-shadow: 0 12px 28px -10px rgba(232,93,0,.75);
  transition: background .2s, transform .15s;
}
.cta-btn:hover, .cta-block .btn:hover { background: var(--orange-h); transform: translateY(-2px); text-decoration: none; }

/* ── FAQ-HINWEIS (Index) ──────────────────────────────────── */
.faq-hint {
  margin-top: 30px; text-align: center;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px;
}
.faq-hint p { color: var(--muted); margin-bottom: 12px; }
.faq-hint a { color: var(--orange-ink); font-weight: 700; }

/* ── ARTIKEL-GRID (Index) ─────────────────────────────────── */
.articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.article-card {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .25s ease, border-color .2s, box-shadow .25s;
}
.article-card:hover { transform: translateY(-4px); border-color: rgba(232,93,0,.5); box-shadow: 0 24px 46px -24px rgba(31,28,24,.45); }
.article-card-img { aspect-ratio: 3/2; overflow: hidden; background: #EFEAE2; }
.article-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.article-card:hover .article-card-img img { transform: scale(1.06); }
.article-card-badge { display: none; }
.article-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 24px 24px 22px; }
.article-title { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; line-height: 1.24; letter-spacing: -.01em; color: var(--ink); }
.article-desc  { color: var(--text); font-size: .98rem; line-height: 1.62; flex: 1; }
.article-meta  { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--muted); }
.article-meta .read-more { margin-left: auto; color: var(--orange-ink); font-weight: 800; }

/* ── VERWANDTE ARTIKEL (Artikel) ──────────────────────────── */
.related { margin-top: 56px; }
.related h2 { font-size: 1.3rem; margin: 0 0 18px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.related-card {
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; box-shadow: var(--shadow);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.related-card:hover { transform: translateY(-3px); border-color: rgba(232,93,0,.5); text-decoration: none; }
.related-card .icon  { display: block; font-size: 1.45rem; margin-bottom: 10px; }
.related-card .title { display: block; font-family: var(--sans); font-weight: 700; color: var(--ink); font-size: .98rem; line-height: 1.35; }
.related-card .arrow { display: block; margin-top: 10px; color: var(--orange-ink); font-weight: 700; font-size: .85rem; }

/* ── FOOTER ───────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); background: var(--paper-2);
  margin-top: 90px; padding: 34px clamp(18px,5vw,40px) 42px;
  color: var(--muted); font-size: .85rem;
}
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); transition: color .2s; }
.footer-links a:hover { color: var(--orange-ink); text-decoration: none; }

/* ── EINGANGS-ANIMATION (dezent) ──────────────────────────── */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .section-tag { animation: riseIn .5s ease both; }
  h1           { animation: riseIn .5s ease .05s both; }
  .meta, .lead { animation: riseIn .5s ease .12s both; }
  .articles .article-card { animation: riseIn .55s ease both; }
  .articles .article-card:nth-child(2) { animation-delay: .09s; }
  .articles .article-card:nth-child(3) { animation-delay: .18s; }
}

/* ── MOBILE ───────────────────────────────────────────────── */
@media (max-width: 760px) {
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .step-item { padding: 20px 20px 20px 66px; }
  .step-item::before { left: 16px; top: 20px; width: 36px; height: 36px; font-size: 1.05rem; border-radius: 11px; }
  .compare-table, .penalty table { font-size: .85rem; }
  .compare-table th, .compare-table td, .penalty th, .penalty td { padding: 10px 11px; }
  .cta, .cta-block, .summary, .calc, .hint, .warn { border-radius: 14px; }
}
/* Kopfzeile darf auf kleinen Geräten NICHT mehr aus dem Bild laufen:
   Logo + Button kleiner, „Zurück"-Link weicht (Breadcrumb übernimmt). */
@media (max-width: 560px) {
  nav { height: 54px; gap: 8px; padding: 0 14px; }
  .logo-img { height: 23px; }
  .nav-back { display: none; }
  .nav-cta { padding: 8px 14px; font-size: .82rem; border-radius: 9px; }
}