/* Optimierung 2026-10: behutsame Korrekturen über style.css.
   Aufbau und Größen bleiben. Ersetzt werden: Violett-Verläufe, Verlaufstext, Glas, Schweben, Glühen.
   Farben aus dem Logo: Navy (--primary) und Dachgold (--accent). */

:root {
  --navy-deep: #16304f;
  --gold: #d4a373;
  --gold-hover: #c6915c;
  --ink: #1e293b;
  --ink-soft: #475569;
  --line: #e2e8f0;
}

/* ---------- Kopfzeile ---------- */
.cta-button {
  background: var(--primary) !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  transition: background-color .2s !important;
}
.cta-button:hover { background: var(--primary-light) !important; transform: none; box-shadow: none; }

/* ---------- Held ---------- */
.s-hero { background: var(--navy-deep); }
.s-hero::before, .s-hero::after { display: none; }
.s-hero h1 .s-gradient,
.s-hero h2 .s-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--gold);
}
.s-hero h2 { color: #fff; font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-bottom: 1rem; }
.s-hero-text { color: #cbd5e1; }
.s-hero-visual img { border-radius: 10px; border: 0; box-shadow: none; }
.s-hero-facts {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  margin: -1.25rem 0 2.25rem; padding: 0; list-style: none;
  color: #fff; font-weight: 600; font-size: 1rem;
}
.s-hero-facts li::before { content: "✓"; color: var(--gold); margin-right: .45rem; }

/* Buttons überall */
.s-btn-primary {
  background: var(--gold);
  color: var(--navy-deep);
  border-radius: 8px;
  box-shadow: none;
  transition: background-color .2s;
}
.s-btn-primary:hover { background: var(--gold-hover); transform: none; box-shadow: none; }
.s-btn-ghost { border-radius: 8px; border-color: rgba(255,255,255,.35); }

/* ---------- Leistungen (früher Bento) ---------- */
.s-bento-card {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s;
}
.s-bento-card:hover { transform: none; box-shadow: none; border-color: #cbd5e1; }
.s-bento-card.dark { background: var(--navy-deep); border-color: var(--navy-deep); }
.s-bento-card.dark:hover { border-color: var(--navy-deep); }
.s-bento-card.dark p { color: #cbd5e1; }
.s-bento-card p { color: var(--ink-soft); }
.s-bento-icon { color: var(--primary); font-size: 1.5rem; margin-bottom: .75rem; }
.s-bento-card.dark .s-bento-icon { color: var(--gold); }
.s-bento-price {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--gold);
}
.s-bento-price span { -webkit-text-fill-color: currentColor; color: #cbd5e1; }
.s-bento-card a { color: var(--primary); font-weight: 600; }
.s-bento-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; }
.s-bento-shots img { margin: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--line); }

/* ---------- Langtext ---------- */
.s-intro-head p { color: var(--ink-soft); }
.s-seo { max-width: 760px; margin: 0 auto; color: #334155; font-size: 1.05rem; line-height: 1.8; }
.s-seo p { margin-bottom: 1.5rem; }
.s-seo .s-seo-close { font-weight: 600; color: var(--ink); font-size: 1.1rem; margin-top: 2rem; padding-left: 1rem; border-left: 4px solid var(--gold); }
.s-seo .s-seo-close span { color: var(--primary); }

/* ---------- Beliebte Vorlagen ---------- */
.s-demos-head a { color: var(--primary); }
.s-demo-card { border-radius: 10px; transition: border-color .2s; }
.s-demo-card:hover { transform: none; box-shadow: none; border-color: #94a3b8; }
.s-demo-card:hover .s-demo-card-img img { transform: none; }
.s-demo-card-img img { object-position: top center; }
.s-demo-card-overlay { display: none; }
.s-demo-card-body p { color: var(--ink-soft); }
.s-demo-card-price { color: var(--primary); }
.s-demo-card-link { display: inline-block; margin-top: .75rem; color: var(--primary); font-weight: 600; text-decoration: none; }
.s-demo-card-link:hover { text-decoration: underline; }
.s-demo-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }

/* ---------- HTML oder WordPress ---------- */
.s-split-card { border-radius: 10px; }
.s-split-card.dark { background: var(--navy-deep); }
.s-split-card.dark .s-split-price { background: none; -webkit-text-fill-color: currentColor; color: var(--gold); }
.s-split-card.light .s-split-price { color: var(--primary); }
.s-split-card.dark .s-split-desc, .s-split-card.dark .s-split-list li { color: #cbd5e1; }
.s-split-card.dark .s-split-price-sub { color: #94a3b8; }
.s-split-card.light .s-split-price-sub { color: #64748b; }
.s-split-card.dark .s-split-list li::before { background: rgba(212,163,115,.18); color: var(--gold); }
.s-split-card.light .s-split-list li::before { background: rgba(30,58,95,.08); color: var(--primary); }
.s-split-card img { border-radius: 6px; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.s-split-card .icon { display: none; }

/* ---------- Schluss ---------- */
.s-cta { background: #f3ece3; }
.s-cta::before { display: none; }
.s-cta .s-btn-primary { background: var(--primary); color: #fff; }
.s-cta .s-btn-primary:hover { background: var(--primary-light); }
.s-cta .s-btn-ghost { color: var(--primary); border-color: var(--primary); }

/* ---------- Fuß ---------- */
footer { background: var(--navy-deep) !important; }
footer::before, footer::after { display: none !important; }
.footer-col h5 { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.footer-brand img { background: #fff; padding: 6px 10px; border-radius: 6px; margin-top: 1rem; }
.footer-bottom { border-top-color: rgba(255,255,255,.12); }

/* ---------- Handy ---------- */
@media (max-width: 1024px) {
  .s-hero-facts { justify-content: center; }
}
@media (max-width: 640px) {
  .s-bento-shots { grid-template-columns: 1fr 1fr; }
  .s-bento-shots img:nth-child(3) { display: none; }
}

/* Bilder mit width/height-Attributen nicht verzerren */
.s-hero-visual img, .s-bento-shots img, .s-split-card img, .s-demo-card-img img { height: auto; }
.s-demo-card-img img { height: 100%; }

.s-demo-card-price { white-space: nowrap; }

/* Hinweis über der Überschrift, in Markenfarbe statt Violett */
.s-hero-label { color: var(--gold); background: rgba(212,163,115,.12); border-color: rgba(212,163,115,.35); }

/* ================= Alle Seiten ================= */

/* Navigation: kein pulsierender violetter Punkt, kein Hüpfen */
.nav-menu a.active::before { background: var(--gold); box-shadow: none; animation: none; }
.nav-menu a:hover { transform: none; }

/* Vorlagen: Demo-Link als ruhiger Button in Markenfarbe (überschreibt den Inline-Stil) */
.s-demo-grid .s-demo-card-link {
  background: var(--primary); color: #fff; border-radius: 8px; box-shadow: none;
  padding: .55rem 1.1rem; font-size: .9rem; transform: none;
}
.s-demo-grid .s-demo-card-link:hover { background: var(--primary-light); transform: none; box-shadow: none; text-decoration: none; }
.s-demo-dead { display: inline-block; margin-top: .75rem; color: #64748b; font-size: .9rem; }

/* Vorteile: Preis-Leistung ohne Verlauf, Glühen und Schweben */
.s-plv { background: #faf7f2; }
.s-plv::before { display: none; }
.s-plv-card { border-radius: 10px; }
.s-plv-card:hover { transform: none; box-shadow: none; }
.s-plv-icon { background: var(--primary); box-shadow: none; border-radius: 10px; }
.s-btn-ghost-dark { border-radius: 8px; }

/* Ablauf */
.step-card { box-shadow: none; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 10px; }
.info-box { border-radius: 10px; }

/* FAQ (überschreibt den Inline-Stil der Seite) */
.faq-answer a { color: var(--primary); }
.faq-highlight { background: #faf7f2; }

/* Werbemittel */
.wm-hero { background: #faf7f2; }
.wm-hero-collage img { box-shadow: none; border-radius: 12px; }
.wm-card { box-shadow: none; border-radius: 12px; }
.wm-card:hover { transform: none; box-shadow: none; border-color: #cbd5e1; }
.wm-card:hover .wm-image img { transform: none; }
.wm-link { border-radius: 8px; }
.wm-process li { border-radius: 10px; }

/* Kopfbilder der Unterseiten */
.s-hero-visual img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }

/* Startseite: Kopfbild größer, darf rechts angeschnitten werden */
@media (min-width: 1025px) {
  .s-hero-visual--bleed img { width: 135%; max-width: none; aspect-ratio: auto; object-fit: initial; }
}

/* Demo-Buttons hell: Gold mit dunkler Schrift */
.s-demo-grid .s-demo-card-link { background: var(--gold); color: var(--navy-deep); }
.s-demo-grid .s-demo-card-link:hover { background: var(--gold-hover); color: var(--navy-deep); }

/* Preise auf hellen Karten gut lesbar */
.s-bento-card:not(.dark) .s-bento-price { color: var(--primary); }
.s-bento-card:not(.dark) .s-bento-price span { color: #64748b; }

/* Demo-Buttons: weiße Schrift; Gold etwas kräftiger, damit Weiß lesbar bleibt */
.s-demo-grid .s-demo-card-link { background: #b47b46; color: #fff; }
.s-demo-grid .s-demo-card-link:hover { background: #9c6838; color: #fff; }

/* SEO-Update: width/height-Attribute dürfen die Seitenverhältnisse nicht überschreiben */
.wm-hero-collage img { height: auto; }

/* Startseite: Kopfbild größer und quadratisch */
@media (min-width: 1025px) {
  .s-hero-inner:has(.s-hero-visual--bleed) { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .s-hero-visual--bleed img { width: 100%; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; object-position: 29% center; }
}