/* metalldetektoren.de – md-startseite.css – aus den Templates ausgelagert am 29.10.2026.
   Vorher als <style>-Blöcke direkt im HTML; jetzt eine Datei, die der Browser zwischenspeichert.
   Reihenfolge = Reihenfolge der Blöcke im Template. Bei Änderungen in index.html die ?v=-Nummer erhöhen. */

/* ===== hero.tpl (1) ===== */
.mdd-hero,
.mdd-hero *,
.mdd-hero *::before,
.mdd-hero *::after {
  box-sizing: border-box;
}

.mdd-hero {
  --mdd-primary: #163e7c;
  --mdd-primary-dark: #0f2d5c;
  --mdd-primary-light: #1f4f9c;
  --mdd-accent: #dc143c;
  --mdd-accent-dark: #b8102f;
  --mdd-bg: #f6f8fb;
  --mdd-bg-card: #ffffff;
  --mdd-text: #0e1a30;
  --mdd-text-muted: #4a5568;
  --mdd-border: #e2e8f0;
  --mdd-shadow-sm: 0 1px 2px rgba(15, 45, 92, 0.08);
  --mdd-shadow-md: 0 4px 14px rgba(15, 45, 92, 0.10);
  --mdd-shadow-lg: 0 12px 32px rgba(15, 45, 92, 0.16);
  --mdd-radius: 12px;
  --mdd-radius-sm: 8px;

  font-family: 'Red Hat Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--mdd-text);
  line-height: 1.5;
  width: 100%;
  padding: 8px 0 16px;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
@media (min-width: 768px) {
  .mdd-hero {
    padding: 22px 0 32px;
  }
}

/* ─── Container ─── */
.mdd-hero__container {
  position: relative;
  width: 100%;
  padding: 12px 10px 16px;
  border-radius: 12px;
  background: #F0F0F0;
}
@media (min-width: 480px) {
  .mdd-hero__container {
    padding: 14px 12px 18px;
  }
}
@media (min-width: 768px) {
  .mdd-hero__container {
    padding: 32px 24px 22px;
  }
}

/* ─── Kopfzeile ─── */
.mdd-hero__top {
  text-align: center;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .mdd-hero__top {
    margin-bottom: 14px;
  }
}

.mdd-hero__kicker {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mdd-primary);
  background: rgba(22, 62, 124, 0.08);
  border: 1px solid rgba(22, 62, 124, 0.18);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
@media (min-width: 768px) {
  .mdd-hero__kicker {
    display: inline-flex;
  }
}
.mdd-hero__kicker svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.mdd-hero__headline {
  font-family: 'Red Hat Display', sans-serif;
  font-size: clamp(20px, 5.5vw, 36px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  width: 100%;
  margin: 0 0 4px;
  padding: 0 4px;
  color: var(--mdd-text);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .mdd-hero__headline {
    margin-bottom: 10px;
    padding: 0 8%;
  }
}

.mdd-hero__headline-accent {
  color: var(--mdd-accent);
  white-space: nowrap;
  position: relative;
  display: inline-block;
}
.mdd-hero__headline-accent::after {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0.05em;
  height: 0.12em;
  background: var(--mdd-accent);
  opacity: 0.25;
  border-radius: 2px;
  transform-origin: left center;
  animation: mdd-underline 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}
@keyframes mdd-underline {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mdd-hero__headline-accent::after {
    animation: none;
  }
}

.mdd-hero__sub {
  font-size: clamp(13px, 3.5vw, 16px);
  color: var(--mdd-text-muted);
  width: 100%;
  margin: 0;
  padding: 0 4px;
  line-height: 1.45;
}
.mdd-hero__sub-short {
  font-weight: 600;
  color: var(--mdd-primary);
}
.mdd-hero__sub-long { display: none; }
@media (min-width: 768px) {
  .mdd-hero__sub {
    padding: 0 12%;
  }
  .mdd-hero__sub-short { display: none; }
  .mdd-hero__sub-long { display: inline; }
}

.mdd-hero__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Rahmen um die Kacheln (nur Desktop sichtbar) ─── */
.mdd-hero__frame {
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
.mdd-hero__frame-label {
  display: none;
}
@media (min-width: 768px) {
  .mdd-hero__frame {
    padding: 44px 18px 22px;
    margin-top: 28px;
    border: 1.5px solid rgba(22, 62, 124, 0.22);
    border-radius: 18px;
    background:
      radial-gradient(ellipse at top, rgba(22, 62, 124, 0.04) 0%, transparent 60%),
      rgba(255, 255, 255, 0.58);
    box-shadow: 0 4px 18px rgba(15, 45, 92, 0.10);
  }
  /* Bewusst KEIN Button-Look: heller Hintergrund, keine Schattenwirkung,
     Default-Cursor – es ist eine Überschrift für die Kacheln, kein Link */
  .mdd-hero__frame-label {
    display: inline-flex;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #F0F0F0;
    color: var(--mdd-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
    z-index: 3;
  }
  .mdd-hero__frame-label svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
}

/* ─── Kachel-Grid: 2×2 Mobil, 4×1 Desktop ─── */
.mdd-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
}
@media (min-width: 480px) {
  .mdd-hero__grid {
    gap: 10px;
  }
}
@media (min-width: 768px) {
  .mdd-hero__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

/* ─── Kachel (Mobil kompakt: ca. 135px hoch) ─── */
.mdd-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(226, 232, 240, 0.85);
  border-radius: var(--mdd-radius);
  padding: 8px 6px 9px;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  min-width: 0;
}
.mdd-hero__card:hover,
.mdd-hero__card:focus-visible,
.mdd-hero__card:active {
  border-color: var(--mdd-primary);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--mdd-shadow-md);
  text-decoration: none !important;
  color: inherit !important;
  outline: none;
}
.mdd-hero__card:focus-visible {
  outline: 2px solid var(--mdd-primary);
  outline-offset: 2px;
}
@media (hover: hover) {
  .mdd-hero__card:hover {
    transform: translateY(-3px);
  }
}

/* Hervorgehobene Kachel */
.mdd-hero__card--top {
  border-color: var(--mdd-primary);
  background:
    radial-gradient(ellipse at top right, rgba(22, 62, 124, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(238, 243, 251, 0.92) 100%);
  box-shadow: 0 4px 14px rgba(22, 62, 124, 0.12);
}
.mdd-hero__card--top::before {
  content: 'Beliebt';
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  background: var(--mdd-accent);
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 3px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(220, 20, 60, 0.35);
  z-index: 2;
}
/* Englische Seiten: Badge-Text (28.10.2026) */
html[lang="en"] .mdd-hero__card--top::before {
  content: 'Popular';
}
@media (min-width: 768px) {
  .mdd-hero__card--top::before {
    top: 10px;
    right: 10px;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 3px 7px;
  }
}

/* ─── Bild ─── */
.mdd-hero__card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 66px;
  margin-bottom: 4px;
  flex-shrink: 0;
  overflow: visible;
  position: relative;
  z-index: 0;
}
.mdd-hero__card-image img {
  max-width: 100%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (min-width: 400px) {
  .mdd-hero__card-image {
    height: 76px;
  }
  .mdd-hero__card-image img {
    max-height: 76px;
  }
}
@media (min-width: 768px) {
  .mdd-hero__card {
    padding: 18px 14px 16px;
    min-height: 260px;
  }
  .mdd-hero__card-image {
    height: 170px;
    margin-bottom: 0;
  }
  .mdd-hero__card-image img {
    max-height: 170px;
  }
}

.mdd-hero__card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mdd-text);
  margin: 0 0 1px;
  line-height: 1.2;
  text-align: center;
  padding: 0 2px;
  overflow-wrap: break-word;
  hyphens: auto;
  position: relative;
  z-index: 1;
  width: 100%;
}
.mdd-hero__card-meta {
  font-size: 12px;
  color: var(--mdd-text-muted);
  margin: 0 0 5px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .mdd-hero__card-title {
    font-size: 15.5px;
    margin: 0 0 4px;
  }
  .mdd-hero__card-meta {
    font-size: 13px;
    margin-bottom: 10px;
  }
}

.mdd-hero__card-arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mdd-primary);
  letter-spacing: 0.2px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.mdd-hero__card-arrow svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.mdd-hero__card:hover .mdd-hero__card-arrow svg {
  transform: translateX(3px);
}
.mdd-hero__card--top .mdd-hero__card-arrow {
  color: var(--mdd-accent);
}
@media (min-width: 768px) {
  .mdd-hero__card-arrow {
    font-size: 12.5px;
    gap: 5px;
  }
  .mdd-hero__card-arrow svg {
    width: 14px;
    height: 14px;
  }
}

/* ─── Kaufberater-CTA (unter den Kacheln, Mobil + Desktop) ─── */
.mdd-hero__advisor {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
  padding: 9px 10px 9px 10px;
  background: #ffffff;
  border: 1.5px solid rgba(22, 62, 124, 0.28);
  border-radius: var(--mdd-radius);
  text-decoration: none !important;
  color: var(--mdd-text) !important;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  min-height: 52px;
}
.mdd-hero__advisor:hover,
.mdd-hero__advisor:focus-visible,
.mdd-hero__advisor:active {
  border-color: var(--mdd-primary);
  box-shadow: var(--mdd-shadow-md);
  text-decoration: none !important;
  color: var(--mdd-text) !important;
}
.mdd-hero__advisor:focus-visible {
  outline: 2px solid var(--mdd-primary);
  outline-offset: 2px;
}
.mdd-hero__advisor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(22, 62, 124, 0.10);
  color: var(--mdd-primary);
  flex-shrink: 0;
  overflow: hidden;
}
/* Hypnose-Spirale: dreht sich dauerhaft, beim Überfahren schneller */
.mdd-hero__advisor-icon svg.mdd-hero__hypno {
  width: 34px;
  height: 34px;
  transform-origin: 50% 50%;
  animation: mdd-hypno 2.6s linear infinite;
}
.mdd-hero__advisor:hover .mdd-hero__hypno {
  animation-duration: 1.1s;
}
@keyframes mdd-hypno {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mdd-hero__advisor-icon svg.mdd-hero__hypno {
    animation: none;
  }
}
.mdd-hero__advisor-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
  text-align: left;
}
.mdd-hero__advisor-text strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--mdd-text);
}
.mdd-hero__advisor-text small {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--mdd-text-muted);
}
.mdd-hero__advisor-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 8px 12px;
  background: var(--mdd-accent) !important;
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: background 0.18s ease;
}
.mdd-hero__advisor-btn svg {
  width: 12px;
  height: 12px;
  transition: transform 0.18s ease;
}
.mdd-hero__advisor:hover .mdd-hero__advisor-btn {
  background: var(--mdd-accent-dark) !important;
}
.mdd-hero__advisor:hover .mdd-hero__advisor-btn svg {
  transform: translateX(3px);
}
@media (min-width: 768px) {
  .mdd-hero__advisor {
    width: fit-content;
    margin: 28px auto 0;
    padding: 10px 12px 10px 14px;
    gap: 14px;
    border-radius: 999px;
  }
  .mdd-hero__advisor-text {
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .mdd-hero__advisor-text strong {
    font-size: 15px;
  }
  .mdd-hero__advisor-text small {
    font-size: 13.5px;
  }
  .mdd-hero__advisor-btn {
    padding: 9px 16px;
    font-size: 12.5px;
  }
}

/* ─── SHOP-FEST: überschreibt globale Shop-Styles für h1/p/Links ─── */
.mdd-hero .mdd-hero__top {
  width: 100% !important;
  text-align: center !important;
}
.mdd-hero .mdd-hero__headline,
.mdd-hero .mdd-hero__sub {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center !important;
}
/* Headline-Link (nur der rote Teil führt zum Kaufberater) */
.mdd-hero a.mdd-hero__headline-link {
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--mdd-accent) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer;
}
.mdd-hero a.mdd-hero__headline-link:hover,
.mdd-hero a.mdd-hero__headline-link:focus-visible {
  color: var(--mdd-accent-dark) !important;
  background: none !important;
  text-decoration: none !important;
}
.mdd-hero a.mdd-hero__headline-link:hover::after,
.mdd-hero a.mdd-hero__headline-link:focus-visible::after {
  opacity: 0.6;
}
.mdd-hero a.mdd-hero__headline-link:focus-visible {
  outline: 2px solid var(--mdd-primary);
  outline-offset: 3px;
  border-radius: 4px !important;
}
.mdd-hero a.mdd-hero__advisor {
  display: flex !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 10px 0 0 !important;
  padding: 9px 10px !important;
  background: #ffffff !important;
  background-image: none !important;
  border: 1.5px solid rgba(22, 62, 124, 0.28) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: var(--mdd-text) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.mdd-hero a.mdd-hero__advisor:hover,
.mdd-hero a.mdd-hero__advisor:focus-visible,
.mdd-hero a.mdd-hero__advisor:active {
  background: #ffffff !important;
  background-image: none !important;
  border-color: var(--mdd-primary) !important;
  box-shadow: var(--mdd-shadow-md) !important;
  color: var(--mdd-text) !important;
}
.mdd-hero a.mdd-hero__advisor .mdd-hero__advisor-icon {
  background: #ffffff !important;
  box-shadow: 0 0 0 1.5px rgba(22, 62, 124, 0.18) !important;
  color: var(--mdd-primary) !important;
}
.mdd-hero a.mdd-hero__advisor .mdd-hero__advisor-text strong {
  color: var(--mdd-text) !important;
}
.mdd-hero a.mdd-hero__advisor .mdd-hero__advisor-text small {
  color: var(--mdd-text-muted) !important;
}
@media (min-width: 768px) {
  .mdd-hero a.mdd-hero__advisor {
    width: fit-content !important;
    margin: 28px auto 0 !important;
    padding: 10px 12px 10px 14px !important;
    border-radius: 999px !important;
  }
}

/* ─── Trust-Facts ─── */
.mdd-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding-top: 0;
}
.mdd-hero__fact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mdd-text) !important;
  line-height: 1;
  text-decoration: none !important;
}
.mdd-hero__fact svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--mdd-primary);
}
.mdd-hero__fact--phone {
  background: var(--mdd-primary);
  border-color: var(--mdd-primary);
  color: #ffffff !important;
}
.mdd-hero__fact--phone svg {
  color: #ffffff;
}
.mdd-hero__fact--phone:hover,
.mdd-hero__fact--phone:focus-visible {
  background: var(--mdd-primary-dark);
  color: #ffffff !important;
  text-decoration: none !important;
  outline: none;
}
@media (min-width: 768px) {
  .mdd-hero__facts {
    gap: 10px 22px;
    padding: 0;
    margin-top: 18px;
    border-top: 0;
  }
  .mdd-hero__fact {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 4px;
    font-size: 13.5px;
    color: var(--mdd-text-muted) !important;
  }
  .mdd-hero__fact svg {
    width: 16px;
    height: 16px;
  }
  .mdd-hero__fact--phone {
    background: transparent;
    border: none;
    color: var(--mdd-text) !important;
    font-weight: 700;
  }
  .mdd-hero__fact--phone svg {
    color: var(--mdd-primary);
  }
  .mdd-hero__fact--phone:hover {
    background: transparent;
    color: var(--mdd-primary) !important;
  }
  .mdd-hero__fact--link {
    color: var(--mdd-primary) !important;
  }
  .mdd-hero__fact--link:hover {
    color: var(--mdd-accent) !important;
    text-decoration: none !important;
  }
}

/* ===== md-themen-kacheln.tpl (1) ===== */
.mdtk{width:100%;box-sizing:border-box;padding:0;margin:8px 0 40px;font-family:inherit;color:#163e7c}
.mdtk *{box-sizing:border-box}
.mdtk-head{position:relative;display:flex;flex-wrap:nowrap;align-items:center;gap:8px 14px;margin:0 0 18px;padding:0 0 12px;border-bottom:3px solid #163e7c}
/* Roter Akzent am Anfang der Linie – liegt exakt auf der blauen Unterstreichung */
.mdtk-head::after{content:'';position:absolute;left:0;bottom:-3px;width:56px;height:3px;background:#dc143c;border-radius:0 2px 2px 0;pointer-events:none}
.mdtk-head svg{width:20px;height:20px;flex-shrink:0;color:#163e7c}
.mdtk .mdtk-title{display:flex;align-items:center;gap:10px;margin:0;padding:0;font-size:16px;font-weight:800;line-height:1.2;letter-spacing:0;text-transform:uppercase;color:#163e7c;background:none;border:0}
.mdtk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mdtk-tile{position:relative;display:block;aspect-ratio:3/4;border-radius:14px;overflow:hidden;text-decoration:none !important;color:#fff !important;box-shadow:0 4px 14px rgba(22,62,124,.14);transition:transform .2s ease,box-shadow .2s ease}
.mdtk-tile:hover,.mdtk-tile:focus-visible{transform:translateY(-3px);box-shadow:0 10px 26px rgba(22,62,124,.24)}
.mdtk-tile:focus-visible{outline:3px solid #dc143c;outline-offset:3px}
.mdtk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .4s ease}
.mdtk-tile:hover .mdtk-img{transform:scale(1.04)}
.mdtk-shade{position:absolute;left:0;right:0;bottom:0;height:65%;background:linear-gradient(to top,rgba(10,24,48,.92) 0%,rgba(10,24,48,.5) 60%,rgba(10,24,48,0) 100%)}
.mdtk-body{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px}
.mdtk-name{font-size:18px;font-weight:800;line-height:1.15;color:#fff}
.mdtk-text{font-size:13px;line-height:1.35;color:rgba(255,255,255,.9)}
.mdtk-btn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:4px;font-size:14px;font-weight:700;color:#fff}
.mdtk-btn i{display:inline-flex;width:28px;height:28px;border-radius:999px;background:#dc143c;align-items:center;justify-content:center;font-style:normal}
.mdtk-btn .mdtk-long{display:none}
.mdtk .mdtk-c1{background-color:#2f6f8f !important}
.mdtk .mdtk-c2{background-color:#8a6a2e !important}
.mdtk .mdtk-c3{background-color:#4f5a3a !important}
.mdtk .mdtk-c4{background-color:#b0784a !important}

@media (min-width:768px){
  .mdtk .mdtk-title{font-size:17px}
  .mdtk-grid{gap:16px}
}
@media (min-width:992px){
  .mdtk{margin:16px 0 56px}
  .mdtk-head{margin:0 0 24px;padding:0 0 16px}
  .mdtk-head::after{width:72px}
  .mdtk-head svg{width:20px;height:20px}
  .mdtk .mdtk-title{font-size:18px}
  .mdtk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .mdtk-tile{aspect-ratio:1/1;border-radius:16px}
  .mdtk-body{left:22px;right:22px;bottom:22px;gap:8px}
  .mdtk-name{font-size:24px}
  .mdtk-text{font-size:15px;line-height:1.4}
  .mdtk-btn{margin-top:6px;background:#dc143c;padding:10px 16px;border-radius:999px}
  .mdtk-btn i{width:auto;height:auto;background:none;order:2}
  .mdtk-btn .mdtk-short{display:none}
  .mdtk-btn .mdtk-long{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .mdtk-tile,.mdtk-img{transition:none}
  .mdtk-tile:hover,.mdtk-tile:hover .mdtk-img{transform:none}
}

/* ===== empfehlung-1.tpl (1) ===== */
@media (max-width: 767px) {
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-grid > .md-card {
    display: none !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-grid > .md-card-featured,
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-grid > .ang-slot {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .ang-slot .md-card {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: 100% !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-header::after {
    content: none !important;
  }
}

/* ─── Einheitliche Sektionsüberschrift (14.10.2026) ───
   Gleiche Optik wie "Wo möchten Sie suchen?" (md-themen-kacheln.tpl):
   blaue 3px-Linie, roter Akzent links, gleiche Abstände, kein Badge.
   Linie + Akzent per Hintergrund gezeichnet -> kein Pseudo-Element nötig. */
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-header {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
  padding: 0 0 15px !important;
  border: 0 !important;
  background:
    linear-gradient(#dc143c, #dc143c) left bottom / 56px 3px no-repeat,
    linear-gradient(#163e7c, #163e7c) left bottom / 100% 3px no-repeat !important;
}
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: #163e7c !important;
}
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-title svg {
  flex-shrink: 0;
}
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-link-long { display: none; }
.md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-link-short { display: inline; }
@media (min-width: 480px) {
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-link-long { display: inline; }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-link-short { display: none; }
}
@media (min-width: 768px) {
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-title {
    font-size: 17px !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-link {
    font-size: 14px !important;
  }
}
@media (min-width: 992px) {
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-header {
    margin: 0 0 24px !important;
    padding: 0 0 19px !important;
    background:
      linear-gradient(#dc143c, #dc143c) left bottom / 72px 3px no-repeat,
      linear-gradient(#163e7c, #163e7c) left bottom / 100% 3px no-repeat !important;
  }
  .md-section[aria-label="Unsere Metalldetektor-Empfehlungen"] .md-section-title {
    font-size: 18px !important;
  }
}

/* Hero-Bar auf Mobile vereinfachen */
@media (max-width: 767px) {
  .hero-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
  .hero-bar .bar-item {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
}

/* Highlights in der Featured-Empfehlungskarte */
.md-card-featured .md-card-body { display: flex; flex-direction: column; }
.md-card-featured .md-btn { margin-top: auto; } /* hält Button + Footer unten -> Höhe bleibt stabil */

.md-highlights {
  list-style: none;
  margin: 4px 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 11px 16px;
}
.md-highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.25;
  font-weight: 600;
  color: #1f2d3d;
  letter-spacing: .1px;
}
.md-highlights li svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  stroke: #163e7c;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.md-card-featured .md-footer {
  margin-top: 14px;
}

/* ===== wissen-praxis-komplett.tpl (1) ===== */
#sg-wp{width:100%;margin:0 0 18px}

/* ─── Einheitliche Sektionsüberschrift (14.10.2026) ───
   Gleiche Optik wie die übrigen Startseiten-Sektionen:
   blaue 3px-Linie, roter Akzent links, gleiche Abstände, kein Badge. */
#sg-wp .md-section-header{
  display:flex !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  margin:25px 0 18px !important;padding:0 0 15px !important;border:0 !important;
  background:
    linear-gradient(#dc143c,#dc143c) left bottom / 56px 3px no-repeat,
    linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
}
#sg-wp .md-section-header::before,
#sg-wp .md-section-header::after{content:none !important}
#sg-wp .md-section-title{
  display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;
  margin:0 !important;padding:0 !important;font-size:16px !important;font-weight:800 !important;line-height:1.2 !important;
  letter-spacing:0 !important;text-transform:uppercase !important;color:#163e7c !important;background:none !important;border:0 !important;
}
#sg-wp .md-section-title svg{flex-shrink:0}
@media(min-width:768px){
  #sg-wp .md-section-title{font-size:17px !important}
}
@media(min-width:992px){
  #sg-wp .md-section-header{
    margin:25px 0 24px !important;padding:0 0 19px !important;
    background:
      linear-gradient(#dc143c,#dc143c) left bottom / 72px 3px no-repeat,
      linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
  }
  #sg-wp .md-section-title{font-size:18px !important}
}

/* ─── Leiste "Alle Wissens-Themen anzeigen" (20.10.2026) ───
   Kein Accordion mehr, sondern ein direkter Link auf die
   Übersichtsseite "Wissen & Ratgeber" (Content-ID 10000).
   Gleiche Optik wie die FAQ-Leiste darunter, Pfeil statt Plus. */
html body a#sg-wp-all{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  width:100% !important;box-sizing:border-box !important;
  margin:0 0 10px !important;padding:16px 20px !important;
  background:#fff !important;background-image:none !important;
  border:1px solid #e3e8ef !important;border-radius:12px !important;box-shadow:none !important;
  color:#163e7c !important;-webkit-text-fill-color:#163e7c !important;
  font-size:14px !important;font-weight:700 !important;line-height:1.25 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  text-decoration:none !important;cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease;
}
html body a#sg-wp-all::before,
html body a#sg-wp-all::after{content:none !important;display:none !important}
html body a#sg-wp-all:hover,
html body a#sg-wp-all:focus-visible{
  background:#f6f8fb !important;border-color:#163e7c !important;
}
html body a#sg-wp-all:focus-visible{outline:2px solid #163e7c;outline-offset:2px}
html body a#sg-wp-all .sg-wp-all-label{
  display:inline-flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;
  color:#163e7c !important;-webkit-text-fill-color:#163e7c !important;
  font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;
}
html body a#sg-wp-all svg{stroke:#163e7c !important;fill:none !important;flex-shrink:0}
html body a#sg-wp-all .sg-wp-all-go{
  width:18px !important;height:18px !important;
  transition:transform .16s ease;
}
html body a#sg-wp-all:hover .sg-wp-all-go{transform:translateX(3px)}
@media(min-width:768px){
  html body a#sg-wp-all{padding:18px 22px !important;font-size:15px !important}
}

/* ─── FAQ-Accordion-Leiste (14.10.2026) ───
   Weiß, feiner Rahmen, blaue Schrift. Kein dunkler Balken. */
/* Über ID angesprochen -> schlägt auch globale Regeln mit !important */
html body details#sg-acc-faq:not([open]){
  background:transparent !important;background-image:none !important;border:0 !important;box-shadow:none !important;
}
html body details#sg-acc-faq > summary.sg-accordion-header{
  display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  list-style:none !important;cursor:pointer;
  margin:0 !important;padding:16px 20px !important;
  background:#fff !important;background-image:none !important;
  border:1px solid #e3e8ef !important;border-radius:12px !important;box-shadow:none !important;
  color:#163e7c !important;font-size:14px !important;font-weight:700 !important;line-height:1.25 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  transition:border-color .16s ease,background-color .16s ease;
}
html body details#sg-acc-faq > summary.sg-accordion-header::-webkit-details-marker{display:none}
html body details#sg-acc-faq > summary.sg-accordion-header::marker{content:''}
html body details#sg-acc-faq > summary.sg-accordion-header::before,
html body details#sg-acc-faq > summary.sg-accordion-header::after{content:none !important;display:none !important}
html body details#sg-acc-faq > summary.sg-accordion-header:hover,
html body details#sg-acc-faq > summary.sg-accordion-header:focus-visible{
  background:#f6f8fb !important;border-color:#163e7c !important;
}
html body details#sg-acc-faq > summary.sg-accordion-header:focus-visible{outline:2px solid #163e7c;outline-offset:2px}
html body details#sg-acc-faq[open] > summary.sg-accordion-header{
  border-color:#163e7c !important;border-bottom-left-radius:0 !important;border-bottom-right-radius:0 !important;
}
html body details#sg-acc-faq > summary.sg-accordion-header,
html body details#sg-acc-faq > summary.sg-accordion-header *{
  color:#163e7c !important;
  -webkit-text-fill-color:#163e7c !important;
  background-clip:border-box !important;-webkit-background-clip:border-box !important;
  opacity:1 !important;visibility:visible !important;text-shadow:none !important;
}
/* Ausgefranste Linien oben/unten: alle Rahmen-Varianten des Themes neutralisieren */
html body details#sg-acc-faq{
  outline:0 !important;border-image:none !important;filter:none !important;
  -webkit-mask:none !important;mask:none !important;padding:0 !important;
}
html body details#sg-acc-faq > summary.sg-accordion-header{
  outline:0;border-image:none !important;filter:none !important;
  -webkit-mask:none !important;mask:none !important;
}
/* Dekor-Pseudo-Elemente des globalen Themes am äußeren Element ausblenden */
html body details#sg-acc-faq::before,
html body details#sg-acc-faq::after{content:none !important;display:none !important}
html body details#sg-acc-faq > summary.sg-accordion-header .sg-label{
  display:inline-flex !important;align-items:center !important;gap:10px !important;
  background:none !important;font:inherit !important;letter-spacing:inherit !important;text-transform:inherit !important;
}
/* Eigener Text-Container: unabhängig davon, wie das globale Theme
   den Label-Text versteckt (Schriftgröße 0, Einrückung, Breite 0 …) */
html body details#sg-acc-faq > summary.sg-accordion-header .sg-label{
  width:auto !important;max-width:none !important;height:auto !important;overflow:visible !important;
  text-indent:0 !important;font-size:14px !important;line-height:1.25 !important;position:static !important;
  clip:auto !important;clip-path:none !important;white-space:normal !important;
}
html body details#sg-acc-faq > summary.sg-accordion-header .sgx-acc-txt{
  display:inline !important;position:static !important;
  width:auto !important;max-width:none !important;height:auto !important;overflow:visible !important;
  clip:auto !important;clip-path:none !important;text-indent:0 !important;transform:none !important;
  font-family:inherit !important;font-size:14px !important;font-weight:700 !important;line-height:1.25 !important;
  letter-spacing:.06em !important;text-transform:uppercase !important;
  color:#163e7c !important;-webkit-text-fill-color:#163e7c !important;
  background:none !important;opacity:1 !important;visibility:visible !important;
}
@media(min-width:768px){
  html body details#sg-acc-faq > summary.sg-accordion-header .sg-label,
  html body details#sg-acc-faq > summary.sg-accordion-header .sgx-acc-txt{font-size:15px !important}
}
html body details#sg-acc-faq > summary.sg-accordion-header svg{
  stroke:#163e7c !important;fill:none !important;flex-shrink:0;
}
html body details#sg-acc-faq > summary.sg-accordion-header .sg-accordion-icon{
  width:18px !important;height:18px !important;padding:0 !important;margin:0 !important;
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  transition:transform .2s ease;
}
html body details#sg-acc-faq[open] > summary.sg-accordion-header .sg-accordion-icon{transform:rotate(45deg)}
@media(min-width:768px){
  html body details#sg-acc-faq > summary.sg-accordion-header{padding:18px 22px !important;font-size:15px !important}
}

/* ─── Teaser-Kacheln: kompakt (14.10.2026) ───
   Statt hoher Blöcke mit großem Icon und Leerraum: schlanke Zeilen-Karten.
   Icon links, Text in der Mitte, Pfeil rechts. Ganze Karte ist der Link. */
#sg-wp-grid{width:100%;display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:600px){#sg-wp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(min-width:1200px){#sg-wp-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

#sg-wp .sg-wp-card{
  --cat:#163e7c;position:relative;
  display:grid;grid-template-columns:36px minmax(0,1fr) 24px;align-items:center;gap:12px;
  /* Leichter Farbverlauf von unten nach oben in der Kategoriefarbe */
  background:linear-gradient(to top, color-mix(in srgb,var(--cat) 11%,#fff) 0%, #fff 75%);
  border:1px solid color-mix(in srgb,var(--cat) 20%,#e3e8ef);border-radius:12px;
  padding:14px 14px 14px 14px;text-decoration:none !important;color:#1c2733 !important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
#sg-wp .sg-wp-card:hover{
  border-color:var(--cat);
  background:linear-gradient(to top, color-mix(in srgb,var(--cat) 18%,#fff) 0%, #fff 85%);
  box-shadow:0 4px 14px color-mix(in srgb,var(--cat) 14%,transparent);
}
#sg-wp .sg-wp-card:focus-visible{outline:2px solid var(--cat);outline-offset:2px}

#sg-wp .sg-wp-chip{
  display:inline-flex;align-items:center;justify-content:center;align-self:start;
  width:36px;height:36px;border-radius:9px;
  color:var(--cat);background:#fff;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cat) 18%,transparent);
}
#sg-wp .sg-wp-chip svg{width:18px;height:18px}

#sg-wp .sg-wp-main{display:flex;flex-direction:column;gap:3px;min-width:0}
#sg-wp .sg-wp-meta{display:flex;align-items:center;gap:6px;line-height:1}
#sg-wp .sg-wp-cat{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cat)}
#sg-wp .sg-wp-flag{
  font-size:9.5px;font-weight:800;letter-spacing:.05em;line-height:1;
  color:#dc143c;background:rgba(220,20,60,.08);padding:3px 6px;border-radius:4px;
}
#sg-wp .sg-wp-flag.is-update{color:#b45309;background:rgba(180,83,9,.10)}
#sg-wp .sg-wp-title{
  font-size:14.5px;font-weight:700;line-height:1.3;color:#1c2733;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#sg-wp .sg-wp-teaser{
  font-size:12.5px;line-height:1.35;color:#5b6876;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
#sg-wp .sg-wp-go{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;color:#163e7c;
  transition:transform .16s ease,color .16s ease;
}
#sg-wp .sg-wp-go svg{width:16px;height:16px}
#sg-wp .sg-wp-card:hover .sg-wp-go{transform:translateX(3px);color:var(--cat)}

/* Ladezustand passend zur kompakten Karte */
#sg-wp .sg-wp-skel{display:flex;flex-direction:column;justify-content:center;gap:8px;min-height:84px;pointer-events:none}
#sg-wp .sg-wp-skel .sk{display:block;background:#eef1f6;border-radius:6px;animation:sgSkel 1.2s ease-in-out infinite}
#sg-wp .sg-wp-skel .sk-chip{display:none}
#sg-wp .sg-wp-skel .sk-line{height:10px}
#sg-wp .sg-wp-skel .sk-w40{width:30%}#sg-wp .sg-wp-skel .sk-w85{width:85%}#sg-wp .sg-wp-skel .sk-w60{width:60%}
@keyframes sgSkel{0%,100%{opacity:1}50%{opacity:.5}}

@media(prefers-reduced-motion:reduce){
  #sg-wp .sg-wp-card,#sg-wp .sg-wp-go,#sg-acc-faq > summary,#sg-acc-faq .sg-accordion-icon,#sg-wp-all,#sg-wp-all .sg-wp-all-go{transition:none !important}
  #sg-wp .sg-wp-card:hover .sg-wp-go,#sg-wp-all:hover .sg-wp-all-go{transform:none}
  #sg-wp .sg-wp-skel .sk{animation:none}
}

/* ===== kundenstimme.tpl (1) ===== */
/* ─── Einheitliche Sektionsüberschrift (14.10.2026) ───
   Gleiche Optik wie die übrigen Startseiten-Sektionen:
   blaue 3px-Linie, roter Akzent links, kein Badge.
   Rechts: kompakte Bewertung, Aufteilung Google/Shop klein darunter. */
.mdw-widget .md-section-header.mdw-head{
  display:flex !important;flex-wrap:nowrap !important;align-items:flex-end !important;justify-content:space-between !important;gap:12px !important;
  margin:0 0 18px !important;padding:0 0 15px !important;border:0 !important;
  background:
    linear-gradient(#dc143c,#dc143c) left bottom / 56px 3px no-repeat,
    linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
}
.mdw-widget .md-section-header.mdw-head::before,
.mdw-widget .md-section-header.mdw-head::after{content:none !important}
.mdw-widget .mdw-head .md-section-title{
  display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;
  margin:0 !important;padding:0 !important;font-size:16px !important;font-weight:800 !important;line-height:1.2 !important;
  letter-spacing:0 !important;text-transform:uppercase !important;color:#163e7c !important;background:none !important;border:0 !important;
}
.mdw-widget .mdw-head .md-section-title svg{flex-shrink:0}

/* Bewertungsblock rechts */
.mdw-widget .mdw-rating{
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;
  text-transform:none !important;letter-spacing:normal !important;text-align:right;
}
.mdw-widget .mdw-rating__main{display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap}
.mdw-widget .mdw-rating__score{font-size:16px;font-weight:800;color:#163e7c}
.mdw-widget .mdw-rating__stars{font-size:13px;letter-spacing:1px;color:#e8a020}
.mdw-widget .mdw-rating__count{font-size:13px;font-weight:600;color:#4a5568}
.mdw-widget .mdw-rating__split{font-size:11.5px;font-weight:500;color:#8a94a3;line-height:1.2;white-space:nowrap}

/* Handy: nur Note + Sterne, Aufteilung ausblenden */
@media(max-width:599px){
  .mdw-widget .mdw-rating__count,
  .mdw-widget .mdw-rating__split{display:none}
  .mdw-widget .mdw-rating__stars{font-size:12px}
}
@media(min-width:768px){
  .mdw-widget .mdw-head .md-section-title{font-size:17px !important}
}
@media(min-width:992px){
  .mdw-widget .md-section-header.mdw-head{
    margin:0 0 24px !important;padding:0 0 19px !important;
    background:
      linear-gradient(#dc143c,#dc143c) left bottom / 72px 3px no-repeat,
      linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
  }
  .mdw-widget .mdw-head .md-section-title{font-size:18px !important}
}

/* ===== fund_des_monats.tpl (1) ===== */
/* ─── Einheitliche Sektionsüberschrift (14.10.2026) ───
   Gleiche Optik wie die übrigen Startseiten-Sektionen:
   blaue 3px-Linie, roter Akzent links, kein Badge. */
.md-section-header.md-head-fund{
  display:flex !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;
  margin:25px 0 18px !important;padding:0 0 15px !important;border:0 !important;
  background:
    linear-gradient(#dc143c,#dc143c) left bottom / 56px 3px no-repeat,
    linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
}
.md-section-header.md-head-fund::before,
.md-section-header.md-head-fund::after{content:none !important}
.md-head-fund .md-section-title{
  display:flex !important;align-items:center !important;gap:10px !important;min-width:0 !important;
  margin:0 !important;padding:0 !important;font-size:16px !important;font-weight:800 !important;line-height:1.2 !important;
  letter-spacing:0 !important;text-transform:uppercase !important;color:#163e7c !important;background:none !important;border:0 !important;
}
.md-head-fund .md-section-title svg{flex-shrink:0}
/* Inhalt direkt unter der Linie beginnen lassen, wie bei den anderen Sektionen */
.md-head-fund + .fdm-block{padding:0 0 24px !important}
@media(min-width:768px){
  .md-head-fund .md-section-title{font-size:17px !important}
}
@media(min-width:992px){
  .md-section-header.md-head-fund{
    margin:25px 0 24px !important;padding:0 0 19px !important;
    background:
      linear-gradient(#dc143c,#dc143c) left bottom / 72px 3px no-repeat,
      linear-gradient(#163e7c,#163e7c) left bottom / 100% 3px no-repeat !important;
  }
  .md-head-fund .md-section-title{font-size:18px !important}
}

/* ===== fund_des_monats.tpl (2) ===== */
.fdm-block{
  --fdm-navy:#163e7c;
  --fdm-crimson:#dc143c;
  --fdm-gold:#FCDD09;
  width:100%;
  padding:24px 16px;
  box-sizing:border-box;
  font-family:'Red Hat Display',Arial,sans-serif;
  color:var(--fdm-navy);
}
.fdm-grid{
  width:100%;
  display:grid;
  grid-template-columns:1fr;   /* mobil gestapelt */
  gap:20px;
  align-items:start;
}

/* ----- Slideshow-Bühne ----- */
.fdm-media{ width:100%; }
.fdm-stage{
  position:relative;
  width:100%;                   /* füllt die linke 1/3-Spalte */
  height:350px;                 /* Höhe gedeckelt auf 350px */
  overflow:hidden;
  border-radius:16px;
  background:#000;
  box-shadow:0 8px 24px rgba(22,62,124,.18);
}
.fdm-stage .fdm-video,
.fdm-stage .fdm-slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;             /* füllt die Fläche, beschneidet bei Bedarf */
  object-position:center;
}
.fdm-stage .fdm-video{ opacity:1; z-index:2; transition:opacity .6s ease; }
.fdm-stage .fdm-slide{ opacity:0; z-index:1; transition:opacity .6s ease; }
.fdm-stage .fdm-slide.is-active{ opacity:1; }
.fdm-block.fdm-slides-on .fdm-video{ opacity:0; z-index:0; }

/* Play-Fallback (nur sichtbar, wenn Autoplay blockiert wird) */
.fdm-play{
  display:none;
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  width:64px; height:64px;
  align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--fdm-navy);
  cursor:pointer;
}
.fdm-play svg{ margin-left:3px; }

/* ----- Textspalte ----- */
.fdm-headline{
  margin:0 0 16px;
  font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:900;
  line-height:1.1;
  color:var(--fdm-navy);
}
.fdm-headline span{
  color:var(--fdm-crimson);
  box-shadow:inset 0 -.28em 0 var(--fdm-gold);
}

.fdm-profile{
  display:flex; align-items:center; gap:16px;
  text-decoration:none;
  margin-bottom:16px;
}
.fdm-avatar{ position:relative; flex:0 0 auto; }
.fdm-avatar img{
  width:84px; height:84px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--fdm-gold);
  display:block;
}
.fdm-badge{
  position:absolute; right:2px; bottom:2px;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--fdm-crimson);
  color:#fff;
  border:2px solid #fff;
}
.fdm-badge svg{ width:15px; height:15px; }
.fdm-profile-text{ display:flex; flex-direction:column; line-height:1.25; }
.fdm-name{ font-weight:800; color:var(--fdm-navy); font-size:1.2rem; }
.fdm-handle{ font-weight:600; color:var(--fdm-crimson); font-size:.95rem; }

.fdm-story{ font-size:1rem; line-height:1.6; color:#1f2937; }
.fdm-story p{ margin:0 0 12px; }
.fdm-story p:last-child{ margin-bottom:0; font-weight:700; color:var(--fdm-navy); }

/* ----- Desktop: 1/3 – 2/3 ----- */
@media (min-width:768px){
  .fdm-grid{ grid-template-columns:1fr 2fr; gap:32px; align-items:stretch; }
  .fdm-content{
    display:flex;
    flex-direction:column;
    justify-content:space-evenly;   /* Inhalt über die volle Höhe verteilen */
  }
  .fdm-profile{ margin-bottom:0; }  /* Abstände übernimmt space-evenly */
}

/* ----- Mobil: nur erster Absatz der Fundgeschichte ----- */
@media (max-width:767px){
  .fdm-story .fdm-desktop-only{ display:none; }
}

/* ===== seo-startseite.tpl (1) ===== */
.md-kauf{font-family:'Red Hat Display',system-ui,-apple-system,sans-serif;color:#4a5263;line-height:1.6;font-size:14.5px;font-weight:400;margin:4px 0 6px}
.md-kauf *,.md-kauf *::before,.md-kauf *::after{box-sizing:border-box}
.md-section-header.md-head-kauf{display:flex!important;align-items:center!important;gap:12px!important;margin:25px 0 12px!important;padding:0 0 12px!important;border:0!important;background:linear-gradient(#dc143c,#dc143c) left bottom/56px 3px no-repeat,linear-gradient(#163e7c,#163e7c) left bottom/100% 3px no-repeat!important}
.md-section-header.md-head-kauf::before,.md-section-header.md-head-kauf::after{content:none!important}
.md-head-kauf .md-section-title{display:flex!important;align-items:center!important;margin:0!important;padding:0!important;font-size:16px!important;font-weight:800!important;line-height:1.2!important;text-transform:uppercase!important;color:#163e7c!important;background:none!important;border:0!important}
.md-kauf p{margin:0 0 8px}
.md-kauf strong{font-weight:600;color:#1a1d24}
.md-kauf a{color:#163e7c;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.md-kauf a:hover{color:#dc143c}
.md-kauf details{margin:4px 0 0}
.md-kauf summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;color:#163e7c;font-weight:600;font-size:14.5px;min-height:36px}
.md-kauf summary::-webkit-details-marker{display:none}
.md-kauf summary::after{content:"";width:8px;height:8px;border-right:2px solid #163e7c;border-bottom:2px solid #163e7c;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.md-kauf details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.md-kauf h3{font-size:15px;font-weight:600;color:#1a1d24;margin:10px 0 4px;line-height:1.35}
.md-kauf ul{margin:0 0 6px;padding-left:18px}
.md-kauf li{margin:0 0 3px}

/* ===== ueber-uns.tpl (1) ===== */
  @media (max-width: 767px) {
    .ueber-uns-block .uu-desktop-only { display: none !important; }
    .ueber-uns-block .ueber-uns-text { margin-top: 0; }
  }
  .ueber-uns-block .uu-gutfund {
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
    color: #163e7c;
    margin: 16px 0 6px;
  }

  /* ─── Einheitliche Sektionsüberschrift (14.10.2026) ───
     Gleiche Optik wie die übrigen Startseiten-Sektionen:
     blaue 3px-Linie, roter Akzent links, kein Badge. */
  .md-section-header.md-head-ueber {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    justify-content: space-between !important; gap: 12px !important;
    margin: 25px 0 18px !important; padding: 0 0 15px !important; border: 0 !important;
    background:
      linear-gradient(#dc143c, #dc143c) left bottom / 56px 3px no-repeat,
      linear-gradient(#163e7c, #163e7c) left bottom / 100% 3px no-repeat !important;
  }
  .md-section-header.md-head-ueber::before,
  .md-section-header.md-head-ueber::after { content: none !important; }
  .md-head-ueber .md-section-title {
    display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 800 !important;
    line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: uppercase !important;
    color: #163e7c !important; background: none !important; border: 0 !important;
  }
  .md-head-ueber .md-section-title svg { flex-shrink: 0; }
  @media (min-width: 768px) {
    .md-head-ueber .md-section-title { font-size: 17px !important; }
  }
  @media (min-width: 992px) {
    .md-section-header.md-head-ueber {
      margin: 25px 0 24px !important; padding: 0 0 19px !important;
      background:
        linear-gradient(#dc143c, #dc143c) left bottom / 72px 3px no-repeat,
        linear-gradient(#163e7c, #163e7c) left bottom / 100% 3px no-repeat !important;
    }
    .md-head-ueber .md-section-title { font-size: 18px !important; }
  }
