@font-face {
  font-family: 'SKODANext';
  src: url('../fonts/SKODANext-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


:root{
  --md-bg: #ffffff;            /* Wrapper background = white (container) */
  --md-card-bg: #ffffff;       /* Farbe der einzelnen Anzeigen (Karten) */
  --md-card-border: #eeeeee;   /* Kantenfarbe der Karten */
  --md-primary: #0E3A2F;       /* Preisfarbe */
  --md-muted: #0E3A2F;         /* generelle Textfarbe (weiß) */
  --md-accent: #ff8a00;
  --md-radius: 12px;
  --md-shadow: 0 8px 24px rgba(15,20,25,0.06);
  --md-shadow-hover: 0 16px 40px rgba(15,20,25,0.08);
  --md-gap: 14px;
  --md-trans: 200ms ease;
  font-family: 'SKODANext', sans-serif;
}

/* Wrapper */
#md-ads-wrapper{
  display:block;
  background: var(--md-bg); /* weiß */
  padding:18px;
  border-radius:14px;
  box-shadow: none;
  color: var(--md-muted); /* make default text white inside cards where appropriate */
}

/* Controls (Such-/Filterfelder) */
#md-ads-wrapper .md-controls {
  display:flex;
  gap:12px;
  margin-bottom:18px;
  flex-wrap:wrap;
  align-items:center;
}
/* Inputs and selects: dark green background, white text */
.md-controls select,
.md-controls input[type="number"]{
  appearance:none;
  border:1px solid rgba(255,255,255,0.06);
  background: #ffffff;      /* gewünschte Farbe für Felder */
  color: #0E3A2F;           /* Texte weiß */
  padding:10px 12px;
  border-radius:10px;
  font-size:0.95rem;
  min-width:160px;
  transition: box-shadow var(--md-trans), transform var(--md-trans);
  box-shadow: none;
}
.md-controls input[type="number"] { width:120px; }

.md-controls select:focus,
.md-controls input[type="number"]:focus{
  outline: none;
  box-shadow: 0 6px 18px rgba(23,95,77,0.12);
  transform: translateY(-1px);
}

/* Search button: color #175F4D */
#md-search-btn{
  background: #78FAAE;     /* Button-Farbe */
  color: #0E3A2F;
  border: none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition: transform var(--md-trans), box-shadow var(--md-trans), opacity var(--md-trans);
  box-shadow: 0 6px 18px rgba(23,95,77,0.12);
}
#md-search-btn:hover{ transform: translateY(-2px); box-shadow: var(--md-shadow-hover); }
#md-search-btn:active{ transform: translateY(0); }
#md-search-btn[disabled]{ opacity: .6; cursor:not-allowed; box-shadow:none; transform:none; }

#md-reset-btn{
  background: #0E3A2F;     /* Button-Farbe */
  color: #78FAAE;
  border: none;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition: transform var(--md-trans), box-shadow var(--md-trans), opacity var(--md-trans);
  box-shadow: 0 6px 18px rgba(23,95,77,0.12);
}
#md-reset-btn:hover{ transform: translateY(-2px); box-shadow: var(--md-shadow-hover); }
#md-reset-btn:active{ transform: translateY(0); }
#md-reset-btn[disabled]{ opacity: .6; cursor:not-allowed; box-shadow:none; transform:none; }


/* Grid */
#md-ads-wrapper .md-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--md-gap);
}

/* Card: dunkelgrün Hintergrund, weiße Texte */
.md-card {
  background: var(--md-card-bg);  /* #0E3A2F */
  border-radius: var(--md-radius);
  overflow: hidden;
  border: 1px solid var(--md-card-border);
  box-shadow: var(--md-shadow);
  transition: transform var(--md-trans), box-shadow var(--md-trans);
  display:flex;
  flex-direction:column;
  min-height: 340px;
  color: #0E3A2F; /* alle Texte in Karte weiß */
}
.md-card:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--md-shadow-hover);
}
.md-card a{ color:inherit; text-decoration:none; display:block; height:100%; }

/* Image area: neutral bg so image looks good */
.md-img{
  position:relative;
  width:100%;
  aspect-ratio: 16/10;
  background: linear-gradient(90deg,#0b2320,#0e3a2f); /* harmoniert mit Karte */
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
/* Ensure images fill and are rendered with best quality */
.md-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform 300ms ease;
  image-rendering: auto; /* keep default rendering for photos */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.md-card:hover .md-img img{ transform: scale(1.02); }
.md-no-image{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.75); font-weight:600; }

/* Body (texts) */
.md-body{ padding:14px 14px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.md-body h3{
  margin:0;
  font-size:1.05rem;
  line-height:1.2;
  color: #0E3A2F; /* Überschrift weiß */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.md-desc{
  margin:0;
  color:rgba(255,255,255,0.9);
  font-size:0.95rem;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Meta row */
.md-meta-row{ display:flex; gap:4px; align-items:center; justify-content:space-between; margin-top:auto; }
.md-meta{ color:rgba(255,255,255,0.85); font-size:0.88rem; display:flex; gap:8px; align-items:center; }

/* Price badge: keep requested color */
.md-price{
  color: var(--md-primary); /* #78FAAE */
  font-weight:800;
  font-size:1.04rem;
  background: #78FAAE;
  padding:6px 10px;
  border-radius:8px;
  border:1px solid #78FAAE;
}

/* Pager - buttons should use #175F4D too */
.md-pager{
  margin-top:16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.md-pager button{
  border:1px solid rgba(255,255,255,0.06);
  background:#0E3A2F;    /* pager buttons same color as requested */
  color:#fff;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  transition: transform var(--md-trans), box-shadow var(--md-trans);
}
.md-pager button[aria-current="true"], .md-pager button.active{
  box-shadow: 0 8px 20px rgba(23,95,77,0.12);
  transform: translateY(-2px);
}
.md-pager button:focus{ outline: 3px solid rgba(23,95,77,0.12); }

/* Empty / error states */
.md-error, .md-empty{
  padding:28px;
  text-align:center;
  color:rgba(255,255,255,0.9);
  background:linear-gradient(180deg,#0E3A2F,#0b2f25);
  border-radius:10px;
  border:1px dashed rgba(255,255,255,0.03);
}

/* Skeleton - adapt for dark card look */
.md-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.02) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius:10px;
  height:100%;
}
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

/* Responsive tweaks */
@media (max-width:720px){
  .md-controls select, .md-controls input[type="number"]{ min-width:140px; }
  .md-body h3{ font-size:1rem; }
}

/* Dark mode support: keep same look but ensure contrast */
@media (prefers-color-scheme: dark){
  :root{
    --md-bg: #ffffff; /* container stays white as requested */
  }
  #md-ads-wrapper{ background: var(--md-bg); }
}

.md-firstreg { font-size:0.9rem; color: #666; margin: 1px 0; }
.md-features { font-size:0.85rem; color: #444; margin: 1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* --- Fix: verhindern, dass Link-Styles (theme) Texte unterstreichen / ausblenden --- */
.md-card a,
.md-card a * {
  text-decoration: none !important;
  color: inherit !important;
}

/* Stelle sicher, dass Überschrift und Meta sichtbar sind und umbrechen dürfen */
.md-body h3 {
  white-space: normal;            /* vorher: nowrap -> macht manchmal seltsame Darstellung */
  overflow: visible;
  color: #0E3A2F;                 /* dunkles Grün, sicher sichtbar auf weiß */
}

/* Meta (Marke/Modell/km) */
.md-meta {
  color: #0E3A2F;                 /* sichtbar */
  font-weight: 500;
}

/* Price: keine Unterstreichung, etwas stärkeres Styling */
.md-price {
  text-decoration: none !important;
  color: var(--md-primary) !important;
  display: inline-block;
}

/* Features: erlauben mehrzeilige Anzeige und bessere Lesbarkeit */
.md-features {
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  color: #444;
}

/* firstReg: dezenter Stil */
.md-firstreg {
  color: #666;
  font-size: 0.92rem;
  margin: 2px 0;
}

.md-price{
  margin-top: auto !important;  
}

.md-body{
  flex: 1;            /* Body nimmt volle Kartenhöhe */
}

/* make multi-select readable and consistent with inputs */
.md-controls select[multiple]{
  min-width: 280px;
  padding:8px 10px;
  max-height: 220px;
  overflow:auto;
}


/* Checkbox-list styles */
.md-filter { display:flex; flex-direction:column; gap:6px; min-width:200px; }
.md-checkbox-list {
  max-height:220px;
  overflow:auto;
  border:1px solid #e6e6e6;
  padding:8px;
  border-radius:8px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.md-checkbox-list label {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:0.95rem;
  cursor:pointer;
  padding:4px 6px;
  border-radius:6px;
}
.md-checkbox-list label:hover { background: rgba(0,0,0,0.02); }
.md-checkbox-list input[type="checkbox"] { width:16px; height:16px; }
#md-price-from, #md-price-to { width:120px; }

/* Preiscontainer weiter rechts platzieren */
.md-price-filter {
  margin-left: auto; /* schiebt den Preiscontainer nach rechts innerhalb des flex-Containers */
  display:flex;
  gap:10px;
  align-items:flex-end;
  min-width:180px;
}

/* kleine Responsive-Fix: falls Fenster sehr klein, entferne margin-left um Umbrechen zu verhindern */
@media (max-width:720px){
  .md-price-filter { margin-left: 0; width:100%; justify-content:flex-start; gap:8px; }
  .md-price-filter label { display:flex; gap:8px; align-items:center; }
}