/* ===== Styling nur im Suchbereich scopen ===== */
:root{ --sticky-top:150px; }         /* Desktop Abstand für Sticky-Header */
@media (max-width:900px){ :root{ --sticky-top:70px; } }  /* Mobil */

.mix1-search{
  --bg:#fff; --fg:#111; --muted:#667085; --border:#E4E7EC;
  --chip-bg:#F2F4F7; --chip-fg:#344054; --chip-active:#111827; --chip-active-bg:#E5E7EB;
  --btn-bg:#0B1220; --btn-fg:#fff; --btn-bg-h:#000; --radius:999px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--fg);
}
.mix1-search h1{ font-size:clamp(20px,2.4vw,28px); margin:0 0 10px 0; }
.mix1-search p.hint{ color:var(--muted); margin:6px 0 14px 0; }

.sticky-head {
  position: static;
  top: auto;
  background: #fff;
  padding: 20px 5px 8px 5px;  /* oben 20px, rechts 5px, unten 8px, links 5px */
}

.search-headline {
  font-size: clamp(20px,2.4vw,28px);
  margin: 0 0 10px 0;
  text-align: left;       /* linksbündig */
  padding-left: 20px;     /* 20px nach rechts eingerückt */
}
/* Chips wie im Screenshot */
.mix1-search__chipform { display:inline-block; margin-right:8px; }
.chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background:#fff;
  border:1px solid #e6e6e6;
  font: 14px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  cursor:pointer;
}
.chip:hover { border-color:#d0d0d0; }
.chip--active {
  border-color:#000;
  box-shadow: inset 0 0 0 1px #000;
}
.chip-text { white-space:nowrap; }

.chip-count {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.6em;
  height:1.6em;
  padding:0 .35em;
  border:1px solid #bfbfbf;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  color:#333;
  background:#fff;
}

 .hint-inline{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; }
  .hint-inline .mix1-search__chipform{ display:inline-flex; margin:0; }
  .hint-inline .chip{ margin:0; } /* kein extra Außenabstand im Fließtext */

/* Desktop */
@media (min-width:901px){
  :root{ --sticky-top:105px; }   /* sitzt 15px höher als ursprünglich */
  .sticky-head {
    position: sticky;
    top: var(--sticky-top);
    z-index: 30;
    background: #fff;
    padding: 20px 5px 8px 5px;  /* vorne/hinten +5px weiß */
  }
}


/* === News Card (Bild links, Headline + 50-Wörter-Teaser rechts) === */
.row-card--news {
  grid-template-columns: 92px 1fr auto;
}
.row-card--news .news-thumb {
  width: 92px;
  height: 69px;
  object-fit: cover;
  border-radius: 8px;
}
.row-card--news .row-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: #111;
  margin-bottom: 4px;
}
.row-card--news .row-excerpt {
  font-size: 14px;
  color: #444;
}
.row-card--news .row-excerpt a { text-decoration: underline; }

/* === Chart Card (links oranger Rang, daneben Linktitel, darunter klein Interpret – Song) === */
.row-card--chart {
  grid-template-columns: 48px 1fr auto;
}
.row-card--chart .row-left {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #fe9900;      /* Orange Quadrat */
  color: #fff;               /* weiße Zahl */
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-card--chart .row-title a {
  font-weight: 700;
  font-size: 18px;
  color: inherit;
  text-decoration: none;
}
.row-card--chart .row-title a:hover { text-decoration: underline; }
.row-card--chart .row-sub {
  margin-top: 2px;
  font-size: 13px;
  color: #667085;           /* kleiner, zurückhaltend */
}

.toolbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 10px 0;
  flex-wrap:wrap;
}
.toolbar-row .toolbar{ margin:0; }  /* vorhandene margin neutralisieren */
.toolbar-current{
  font-size:45px;
  line-height:1;
  color:#acacac;
  font-weight:700;
  white-space:nowrap;
}
@media (max-width:900px){ .toolbar-current{ font-size:28px; } }

/* Suchleiste */
.searchbar{ position:relative; display:flex; align-items:center; gap:10px; margin:12px 0 16px 0; }


input{
  flex: 1;
  padding: 11px 14px;
  border: 2px solid #fe9900;
  border-radius: 10px;
  font-size: 16px;
  outline: none;

  margin-top: 0;
  margin-bottom: 0;
}


/* Fokus-Effekt optional: bleibt Orange */
.input:focus{
  border-color: #fe9900;
  box-shadow: 0 0 0 3px rgba(254,153,0,.25);
}
.btn{
  appearance: none;
  border: 2px solid #fe9900;
  background: #fe9900;
  color: #fff;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-top: -7px;
  margin-bottom: 5px;
}
.btn:hover{
  background: #e58900; /* dunkleres Orange beim Hover */
  border-color: #e58900;
}

#showMoreBtn {
  margin-top: 10px;
}
/* Filter-Chips */
.toolbar{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 10px 0; }
.mix1-search__chipform{ display:inline; }
.chip{ background:var(--chip-bg); color:var(--chip-fg); border:1px solid var(--border); border-radius:var(--radius); padding:8px 14px; cursor:pointer; font-weight:600; }
.chip:hover{ background:#ECEFF3; }
.chip--active{ background:var(--chip-active-bg); color:var(--chip-active); border-color:#D1D5DB; }

/* Link-Button (Textlink-Optik) */
.linkbtn{ background:none; border:none; color:#0B5FFF; padding:0; margin:0; cursor:pointer; font-weight:600; text-decoration:underline; }

/* Ergebnisliste */
.results{ list-style:none; padding:0; margin:14px 0 0 0; display:grid; gap:10px; grid-template-columns:1fr; }

/* Kartenlayout NUR für Videos */
.result-card {
  display: grid;
  grid-template-columns:100px 1fr max-content; /* Thumb | Text | Buttons */
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
   margin-left: 15px;
   cursor: pointer; 
}

 

/* Bild 100x80 */
.result-thumb{ width:100px; height:80px; border-radius:8px; object-fit:cover; display:block; }

/* Text: +1px (größer) */
.result-meta{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.result-meta .interpret{ font-weight:700; font-size:20px; color:#111; white-space:normal; word-break:break-word; }
.result-meta .title{ font-size:19px; color:#444; white-space:normal; word-break:break-word; }

/* Buttons 36x36 (inkl. Info-Button) */
.result-actions{ align-self:end; justify-self:end; display:flex; gap:6px; }
.result-actions .icon{ width:36px; height:36px; display:block; }

/* Footer-Abstand */
.mix1-search main{ padding-bottom:18px; }

/* 2-Spalten-Layout (Suche links, add.php rechts) */
.mix1-search .container {
  max-width:1320px;
  margin:0 auto;
  padding:16px;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
}
 

/* Mobile */
@media (max-width:900px){
    .results {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%; /* Stellt sicher, dass der Container selbst die volle Breite einnimmt */
  }
  .result-card{ grid-template-columns:100px 1fr; } /* Buttons unter den Text */
  .result-actions{ grid-column:1 / -1; justify-self:start; margin-top:6px; }
  .mix1-search .container{ grid-template-columns:1fr; }
 
}
/* Höhe, wo der Kasten festklebt – nutzt deine vorhandene Variable */
:root{
  /* Du hast bereits --sticky-top definiert; hier nur zur Sicherheit: */
  /* --sticky-top: 150px; wird in deinem CSS schon gesetzt */
}

/* farbiger, sticky Kasten um die Suche */
.sticky-search{
  position: sticky;
  top: var(--sticky-top);     /* sitzt direkt unter dem Header */
  z-index: 40;                /* über Inhalt, unter ggf. Modals */
  background: #fe9900;        /* Wunschfarbe */
  padding: 12px;              /* innen Abstand */
  border-radius: 12px;        /* runde Ecken */
  margin: 10px 0 14px 0;      /* etwas Luft außen */
}

/* Kontrast im orangen Kasten optimieren (optional) */
.sticky-search .input{
  border-color: rgba(255,255,255,0.6);
  background: #fff;
}
.sticky-search .btn{
  /* deine bestehenden Button-Farben sind ok; optional etwas heller machen */
}

/* Mobil: geringere Oberkante (du hast <900px bereits in deinem CSS) */
@media (max-width: 900px){
  .sticky-search{
    padding: 10px;
    border-radius: 10px;
    /* top kommt weiter aus deiner bestehenden :root Anpassung */
  }
}
 
/* Wrapper selbst nicht sticky */
.sticky-wrap{
  position: static;
  background: transparent;
}

/* Weißer Kasten: 100% Spaltenbreite, ohne Rahmen/Schatten */
.sticky-inner{
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  background: #fff;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* kleine Abstände im Band */
.sticky-inner .searchbar{ margin: 0 0 10px 0; }
.sticky-inner .toolbar{  margin: 0 0 6px 0; }
.sticky-inner .hint{     margin: 0; }

/* WICHTIG: Sticky braucht sichtbaren Overflow */
.mix1-search .container,
.search-col{ overflow: visible; }

/* Mobil kompakter */
@media (max-width: 900px){
  .sticky-inner{ padding: 10px 12px; 
 width: 95%;  }
}
 

/* Desktop: Kasten klebt direkt unter dem Header */
@media (min-width: 901px){
  .sticky-inner{
    position: sticky;
    top: var(--sticky-top);   /* du hast die Variable schon gesetzt */
    z-index: 60;
    /* wenn du mittig innerhalb der Spalte willst, reicht width:100% + margin:0 */
  }
}

/* Mobil: nicht sticky — scrollt raus */
@media (max-width: 900px){
  .sticky-inner{
    position: static;
  }
}@media (max-width: 900px) {
  .result-card {
    display: flex;
    flex-direction: column; /* Alles untereinander */
    align-items: flex-start;
    padding: 12px;
    gap: 8px;
	 margin-left: 15px;
	  margin-right: -15px; /* übersteht rechts */
   
  }

  .result-thumb {
    width: 100%;
    height: auto;
    max-height: 200px; /* optional: begrenzt Höhe */
    object-fit: cover;
    border-radius: 10px;
  }

  .result-meta {
    order: 2;
  }

  .result-meta .interpret {
    font-size: 18px;
    margin-top: 4px;
  }

  .result-meta .title {
    font-size: 16px;
  }

  .result-actions {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    margin-top: 8px;
    gap: 8px;
  }
}

@media (max-width: 900px) {
  .toolbar {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .mix1-search p.hint {
    text-align: center;
  }
}

 .result-card{
    position: relative;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color .15s ease;
  }
  .result-card:hover{ background:#f7f7f7; } /* sehr helles Grau */
  .result-card .result-actions a{ position: relative; z-index: 2; } /* Buttons liegen oben */
  
 
  /* Actions immer als kompakte Leiste rechts */
.result-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* alle Icon-Links gleich groß */
.result-actions a,
.result-actions a.has-tip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
}

/* Bild-Icons einheitlich */
.result-actions img.icon{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
}

/* Info-Kreis als eigene Klasse, statt Inline-Style */
.result-actions .info-dot{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fe9900;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

/* ganz helle Hover-Färbung (wie gewünscht) */
.result-actions a:hover img.icon,
.result-actions a:hover .info-dot{
  filter:brightness(1.12);
}

/* Tooltip (falls noch nicht enthalten) */
.result-actions a.has-tip{ position:relative; }
.result-actions a.has-tip::after{
  content:attr(data-title);
  position:absolute; left:50%; bottom:115%; transform:translateX(-50%);
  background:#333; color:#fff; font-size:12px; line-height:1;
  padding:6px 8px; border-radius:6px; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:20; pointer-events:none;
}
.result-actions a.has-tip::before{
  content:""; position:absolute; left:50%; bottom:110%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#333;
  opacity:0; visibility:hidden; transition:opacity .2s ease; z-index:19;
}
.result-actions a.has-tip:hover::after,
.result-actions a.has-tip:hover::before{ opacity:1; visibility:visible; }


/* bereits vorhandener hover bleibt: Icons werden sehr hellgrau */
.result-actions a.has-tip img.icon:hover {
  filter: brightness(1.15);
}

/* ========== News & Charts: kompakte Row-Cards ========== */
.mix1-search .row-card{
  display:grid;
  grid-template-columns: auto 1fr auto; /* Icon/Rank | Inhalt | Pfeil/Badge */
  align-items:center;
  gap:10px;
  padding:12px 12px;
  background:#fff;
  border:1px solid #E5E7EB;
  border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  text-decoration:none;
  color:inherit;
  transition:background-color .15s ease, border-color .15s ease;
  margin-left: 15px; /* wie Videos */
}
.mix1-search .row-card:hover{ background:#f7f7f7; border-color:#D1D5DB; }

.mix1-search .row-left{
  width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; color:#fff;
  background:#fe9900; /* corporate orange */
}

/* News: „N“ Badge links, Headline + Meta */
.mix1-search .row-card--news .row-left{ background:#0B5FFF; } /* blaues N */
.mix1-search .row-card--news .row-title{
  font-weight:700; font-size:18px; line-height:1.2; color:#111;
}
.mix1-search .row-card--news .row-meta{
  margin-top:2px; font-size:13px; color:#667085; white-space:nowrap;
}

/* Charts: Rank-Pill links, Titel fett */
.mix1-search .row-card--chart .row-left{
  background:#FE9900; font-variant-numeric:tabular-nums; font-size:22px;
}
.mix1-search .row-card--chart .row-title{
  font-weight:700; font-size:18px; line-height:1.2; color:#111;
}
.mix1-search .row-card--chart .row-sub{
  margin-top:2px; font-size:13px; color:#667085; white-space:nowrap;
}
.mix1-search .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid #E5E7EB; border-radius:999px;
  font-size:12px; color:#344054; background:#F2F4F7; white-space:nowrap;
}

/* Pfeil rechts (optional) */
.mix1-search .row-right{
  display:flex; align-items:center; gap:8px; margin-left:8px;
}
.mix1-search .row-arrow{
  width:20px; height:20px; border:1px solid #D1D5DB; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; color:#111; background:#fff;
}

/* Mobile: einspaltig, Luft nach rechts wie Videos */
@media (max-width:900px){
  .mix1-search .row-card{
    grid-template-columns: auto 1fr; /* Icon/Rank | Inhalt, Pfeil unterdrückt */
    margin-right: -15px; /* übersteht rechts – wie Videos */
  }
  .mix1-search .row-right{ display:none; }
}

.row-card--chartgroup {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
}
.row-card--chartgroup .chart-line {
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.row-card--chartgroup .row-left {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fe9900;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.row-card--chartgroup .row-sub {
  font-size: 14px;
  color: #444;
}

 /* optional: verhindert unschöne Überläufe beim Ein-/Ausblenden */
  #results-hidden{overflow:hidden}
  /* Button mind. 50px nach oben schieben */
  #more-toggle{margin-top:-50px !important;}

/* Chart-Gruppen: Button ganz rechts */
.row-card.row-card--chartgroup{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}
.row-card.row-card--chartgroup .row-center{
  flex:1 1 auto;
  min-width:0;
}
.row-card.row-card--chartgroup .row-right{
  margin-left:auto;
}
.row-card--chartgroup {
  position: relative; /* notwendig für absolute Position des Buttons */
  display: block;
}

.row-card--chartgroup .row-bottom-right {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
}
/* Mobile-Anpassungen */
@media (max-width: 740px) {
  /* 1) Badge "Charts" in eigene Zeile, rechtsbündig */
  .row-card--chartgroup .row-bottom-right {
    position: static;      /* nicht absolut auf Mobile */
    display: block;        /* ganze Zeile einnehmen */
    text-align: right;     /* Badge nach rechts */
    margin-top: .75rem;    /* Abstand nach oben */
  }

  /* 2) Chart-Box rechts 20px Abstand zum Rand */
  .results .row-card--chartgroup {
    margin-right: 5px;    /* Abstand nach rechts */
  }

  /* (Optional) Wenn du lieber innen Abstand willst statt außen: */
  /* .row-card--chartgroup { padding-right: 20px; } */
}
@media (max-width: 640px) {
  .row-card--chartgroup .row-left {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    line-height: 26px;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
  }
}

/* === NEWS-Karten Layout === */

/* Grundlayout: zwei Spalten (links Datum+Bild, rechts Text) */
.row-card--news {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Linke Spalte: Datum oben, Bild unten */
.row-card--news .news-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* Bild immer exakt 140x100 px, sauber zugeschnitten */
.row-card--news .news-thumb {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: cover;        /* schneidet sauber zu, ohne Verzerrung */
  object-position: center;  /* Motiv mittig */
}

/* Rechte Spalte: Text */
.row-card--news .row-center {
  flex: 1 1 auto;
  min-width: 0;             /* Text-Überlauf verhindern */
}

/* Datum über dem Bild */
.row-card--news .row-date {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

/* === MOBIL: Bild oben, darunter Headline + Text === */
@media (max-width: 600px) {
  .row-card--news {
    display: block;                /* ganze Karte untereinander anordnen */
    margin-right: 10px;            /* Box 10px vom rechten Rand */
  }

  .row-card--news .news-left {
    width: 100%;                   /* volle Breite nutzen */
    margin-bottom: 12px;           /* Abstand zwischen Bildblock und Text */
  }

  .row-card--news .row-center {
    width: 100%;
    display: block;                /* zwingt Headline + Text in eine neue Zeile */
    margin-left: 0;
  }

  /* Mobil: größeres Bild 280x140 */
  .row-card--news .news-thumb {
    width: 310px;
    height: 150px;
  }

  /* Mobil: Headline & Text +2px */
  .row-card--news .row-title { font-size: 20px; }
  .row-card--news .row-excerpt { font-size: 16px; }

  /* Mobil: Button "News lesen" unter dem Text (nutzt vorhandenes .row-right/.badge) */
  .row-card--news .row-right {
    display: block;
    margin-top: 8px;
  }
}

/* NEWS: Grid der generischen .row-card für News übersteuern */
.mix1-search .row-card.row-card--news{
  display: flex;                 /* Desktop: zwei Spalten */
  grid-template-columns: none;   /* evtl. geerbtes Grid neutralisieren */
  align-items: flex-start;
  gap: 12px;
}

/* Linke Spalte: Datum + Bild */
.mix1-search .row-card.row-card--news .news-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* Bild immer 140x100 */
.mix1-search .row-card.row-card--news .news-thumb{
  width: 140px;
  height: 100px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Rechte Spalte: Text */
.mix1-search .row-card.row-card--news .row-center{
  flex: 1 1 auto;
  min-width: 0;
}

/* Datum über dem Bild */
.mix1-search .row-card.row-card--news .row-date{
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

/* === NEWS-Karten Layout === */

/* Grundlayout: zwei Spalten (links Datum+Bild, rechts Text) */
.row-card--news {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Linke Spalte: Datum oben, Bild unten */
.row-card--news .news-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}

/* Bild immer exakt 140x100 px, sauber zugeschnitten */
.row-card--news .news-thumb {
  display: block;
  width: 140px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

/* Rechte Spalte: Text */
.row-card--news .row-center {
  flex: 1 1 auto;
  min-width: 0;
}

/* Datum über dem Bild */
.row-card--news .row-date {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

/* === MOBIL: Bild oben, darunter Headline + Text === */
@media (max-width: 600px) {
  .mix1-search .row-card.row-card--news {
    display: block;               /* ganze Karte untereinander anordnen */
    margin-right: 10px;           /* Box 10px vom rechten Rand */
  }

  .mix1-search .row-card.row-card--news .news-left {
    width: 100%;                  /* volle Breite nutzen */
    margin-bottom: 12px;          /* Abstand zwischen Bildblock und Text */
  }

  .mix1-search .row-card.row-card--news .row-center {
    width: 100%;
    display: block;               /* Headline + Text in neue Zeile */
    margin-left: 0;
  }

  /* >>> Nur News: Bild mobil 280x140 <<< */
  .mix1-search .row-card.row-card--news .news-thumb {
    width: 310px;
    height: 150px;
  }

  /* Nur News: Headline & Text +2px */
  .mix1-search .row-card.row-card--news .row-title { font-size: 20px; }
  .mix1-search .row-card.row-card--news .row-excerpt { font-size: 16px; }

  /* Nur News: Button unter dem Text */
  .mix1-search .row-card.row-card--news .row-right {
    display: block;
    margin-top: 8px;
  }
}
/* === Fix: Mobile-Größen sauber trennen === */

/* NEWS mobil: 280 x 140 + größere Typo + Button unten + 10px rechts */
@media (max-width: 600px){
  .row-card--news{
    display:block;
    margin-right:10px;
  }
  .row-card--news .news-left{
    width:100%;
    margin-bottom:12px;
  }
  .row-card--news .row-center{
    width:100%;
    display:block;
    margin-left:0;
  }
  .row-card--news .news-thumb{
    width:280px;
    height:140px;
    object-fit:cover;
    object-position:center;
    display:block;
  }
  .row-card--news .row-title{ font-size:20px; }
  .row-card--news .row-excerpt{ font-size:16px; }
  .row-card--news .row-right{ display:block; margin-top:8px; }
}

/* VIDEOS & MUSIK mobil: Thumbs NICHT skalieren (100 x 80 beibehalten) */
@media (max-width: 900px){
  /* Stelle das Grid-Layout sicher, falls vorher auf flex-column umgeschaltet wurde */
  .result-card{
    display:grid;
    grid-template-columns:100px 1fr;   /* Thumb | Text */
    gap:10px;
    align-items:center;
    padding:10px;
  }
  .result-card .result-thumb{
    width:100px;
    height:80px;
    border-radius:8px;
    object-fit:cover;
    display:block;
  }
  /* optional: Actions unter dem Text lassen wie gehabt */
  .result-actions{
    grid-column:1 / -1;
    justify-self:start;
    margin-top:6px;
  }
}
/* === Globale Anpassung für Ergebnisse === */

/* Videos & Musik: 1 px größere Schrift */
.result-meta .interpret {
  font-size: 21px;   /* vorher 20px */
}
.result-meta .title {
  font-size: 20px;   /* vorher 19px */
}

/* News: Headline +1 px, Text +1 px und Blocksatz */
.mix1-search .row-card.row-card--news .row-title {
  font-size: 19px;   /* vorher 18px */
}
.mix1-search .row-card.row-card--news .row-excerpt {
  font-size: 15px;   /* vorher 14px */
  text-align: justify;
}

/* Mobile (unter 600 px): ebenfalls +1 px */
@media (max-width: 600px) {
  .mix1-search .row-card.row-card--news .row-title {
    font-size: 21px;  /* vorher 20px */
  }
  .mix1-search .row-card.row-card--news .row-excerpt {
    font-size: 17px;  /* vorher 16px */
  }
}
/* === Suchfeld 10px schmaler – robust mit Flex === */
.mix1-search .searchbar {
  padding-right: 10px !important; /* zieht das Eingabefeld rechts um 10px ein (Desk+Mobil) */
}

.mix1-search .searchbar .input {
  flex: 1 1 auto;
  width: 100%;
  box-sizing: border-box;
  margin-right: 0;
  padding-right: 46px; /* Platz für Icon rechts */
}
/* === Mobile: Boxen 10px schmaler (Videos & Musik) === */
@media (max-width: 900px) {
  .mix1-search .results .result-card {
    margin-right: 10px; /* statt -15px → jetzt 10px vom rechten Rand */
  }
}
/* === Mobile Fix: Kein horizontales Scrollen === */
@media (max-width: 900px) {

  /* Ergebnis-Boxen (Videos & Musik) */
  .mix1-search .result-card {
    margin-right: 10px !important;  /* +10px Abstand statt -15px */
    margin-left: 15px;              /* linker Rand unverändert */
  }

  /* Chart- und News-Boxen */
  .mix1-search .row-card {
    margin-right: 10px !important;  /* +10px Abstand statt -15px */
    margin-left: 15px;
  }

  /* Optional: generelles Overflow verhindern */
  body, html {
    overflow-x: hidden;
  }
}
.result-card {
  position: relative; /* hast du schon – wichtig für das Overlay */
}
.result-card .card-link-overlay{
  position:absolute;
  inset:0;                 /* top/right/bottom/left: 0 */
  z-index:1;
  border-radius: inherit;
}
.result-actions a{         /* hast du schon – Icons über Overlay */
  position: relative;
  z-index: 2;
}

/* Lupe im Suchfeld 6px nach oben verschieben */
.searchbar .search-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  cursor: pointer;
}



/* Chartliste (Gruppenkarte): Titel +2px */
.mix1-search .row-card--chartgroup .row-title{
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600; /* falls gewünscht */
}
/* ===== Fix: Suchleiste mittig auf Mobilgeräten ===== */
@media (max-width:900px){
  .mix1-search main.container {
    padding-left: 12px;
    padding-right: 12px;
    margin: 0 auto;             /* zentriert den Container */
  }

  .searchbar {
    width: 100%;                /* nimmt volle Breite ein */
    margin: 0 auto;             /* mittig zentriert */
    padding-left: 0;            /* überschreibt evtl. alte Padding-Werte */
    padding-right: 0;
  }

  .searchbar input.input {
    width: 100%;
    box-sizing: border-box;     /* berücksichtigt Padding/Borders */
    margin: 0;                  /* kein extra Außenabstand */
  }
}
/* Mehr Luft bis Footer – überall */
.mix1-search main{ padding-bottom: 90px; }          /* vorher 18px */

/* Abstand direkt an den Ergebnislisten */
.results{ margin-bottom: 24px; }
.results:last-of-type{ margin-bottom: 80px; }

/* falls der ausgeklappte Block sichtbar ist */
#results-hidden{overflow:hidden}

  /* Spezial-Liste: Basis-Reset */
  .results--special { margin: 0; padding: 0; list-style: none; }
  .results--special .row-card--special { margin-bottom: 8px; }

  /* Einheitlicher Abstand zwischen Blöcken */
  .results-spacer { height: 40px; }


/* Standard: NICHT erzwingen, schmal halten */
.sticky-inner{
  width: auto;         /* statt 100% */
  max-width: 860px;    /* Wunschbreite Desktop */
  margin: 0;           /* in deiner Spalte linksbündig */
}

/* Mobil darf’s breit sein */
@media (max-width:900px){
  .sticky-inner{
    width: 95%;
    max-width: none;
  }
}

/* Optional: die linke Spalte selbst begrenzen, damit sie nie „springt“ */
.mix1-search .search-col{ max-width: 860px; }
@media (min-width:901px){
  .mix1-search .container{
    /* linke Spalte bleibt „schmaler“, rechte ist 1fr */
    grid-template-columns: minmax(680px, 2fr) 1fr;
  }
}