/* ============================================================
   Dezente Marken-Akzente – ergänzt style.css (separat gehalten)
   ============================================================ */

/* Feiner Marken-Streifen oben/unten an Schlüsselbereichen */
.hero { border-bottom: 4px solid var(--accent); }
.site-footer { border-top: 4px solid var(--accent); }
.page-head { box-shadow: inset 0 -4px 0 rgba(255,255,255,.18); }

/* Karten: dezenter Akzent-Rand + etwas weicheres Anheben beim Hover */
.card { border-top: 3px solid transparent; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { border-top-color: var(--accent); transform: translateY(-4px); }
.card .icon { transition: background .2s ease, transform .2s ease; }
.card:hover .icon { transform: scale(1.06); }

/* Galerie & Vertrauensleiste: feine Bewegungen */
.gallery img { transition: transform .25s ease, box-shadow .25s ease; }
.trustbar .ti { transition: color .2s ease; }
.trustbar .ti:hover { color: var(--primary-dark); }

/* Buttons: weicher Übergang (ergänzend) */
.btn { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }

@media (prefers-reduced-motion: reduce){
  .card, .card .icon, .gallery img, .btn, .trustbar .ti { transition: none; }
}

/* ============================================================
   Design-Pass 2 (Juni 2026): Tiefe, dezente Wärme, Lese-Rhythmus
   ============================================================ */
:root{
  --warm:#e29a52;        /* warmer Akzent (Sand/Bernstein) – sparsam einsetzen */
  --warm-dark:#bd7a31;   /* warmer Ton für Text auf Hell */
  --warm-soft:#fdf4ea;   /* warmer Tönungs-Hintergrund */
}

/* Seitenkopf: räumliche Tiefe statt flacher Farbfläche */
.page-head{
  background:
    radial-gradient(900px 320px at 85% -50%, rgba(20,160,181,.55), transparent 62%),
    linear-gradient(120deg, var(--primary-dark) 0%, var(--primary) 72%) !important;
  position:relative; overflow:hidden;
}
.page-head::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(440px 180px at 10% 135%, rgba(226,154,82,.20), transparent 70%);
}

/* Getönte Abschnitte klarer absetzen → Rhythmus über die Seite */
.section--soft{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

/* ---------- Lange Textseiten: Rhythmus & Lebendigkeit ---------- */
.article{ font-size:1.02rem; }
.article > p, .article > ul{ color:var(--text-soft); }
.article .lead{ color:var(--text); font-size:1.22rem; }
.article h2{ position:relative; padding-left:18px; margin-top:1.9em; }
.article h2::before{
  content:""; position:absolute; left:0; top:.14em; bottom:.14em;
  width:5px; border-radius:3px; background:linear-gradient(var(--accent), var(--primary));
}

/* Pull-Quote (hebt eine starke Aussage hervor) */
.pullquote{
  margin:32px 0; padding:8px 0 8px 28px; border-left:4px solid var(--accent);
  font-size:1.45rem; line-height:1.4; font-weight:600; color:var(--primary-dark); position:relative;
}
.pullquote::before{
  content:"\201C"; position:absolute; left:14px; top:-2px;
  font-size:2.6rem; line-height:1; color:var(--warm); opacity:.55;
}
.pullquote cite{ display:block; margin-top:8px; font-size:.92rem; font-weight:500; font-style:normal; color:var(--text-soft); }

/* Zahlen-Highlights (nutzt belastbare Daten als Blickfang) */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0; }
.stats .stat{ background:var(--warm-soft); border:1px solid #f0e2cf; border-radius:var(--radius); padding:22px 16px; text-align:center; }
.stats .stat b{ display:block; font-size:1.9rem; color:var(--warm-dark); line-height:1.1; }
.stats .stat span{ display:block; margin-top:6px; font-size:.9rem; color:var(--text-soft); }
@media (max-width:600px){ .stats{ grid-template-columns:1fr; } }

/* Akzentbalken für linksbündige Abschnitts-Überschriften (sitewide, gezielt gesetzt) */
.acc-h2{ position:relative; padding-left:18px; }
.acc-h2::before{
  content:""; position:absolute; left:0; top:.14em; bottom:.14em;
  width:5px; border-radius:3px; background:linear-gradient(var(--accent), var(--primary));
}

/* Barrierefreiheit: sichtbarer Tastatur-Fokus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,.nav__menu a:focus-visible{outline:3px solid #0a505c;outline-offset:3px;}