/* 1. Der äußere Wrapper (stapelt Cards und Werbung untereinander) */
.hunde_ranking {
  display: grid;
  /* Das '0' in minmax erlaubt es dem Grid, kleiner als der (falsche) Anzeigeninhalt zu sein */
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: 20px;
}

body.wide-content .hunde_ranking {grid-template-columns: 1fr 1fr; }

/* 2. Die Card selbst (wird nun zum inneren Grid) */
a.ranking_card {
  display: grid; 
  /* Hier definierst du deine gewünschte Aufteilung: */
  grid-template-columns: 30px 2fr 4fr; 
  align-items: center; /* Zentriert die Inhalte vertikal */
  gap: 2%;
  
  background-color: #f9f9f9;
  border: 1px solid #999;
  border-radius: 10px;
  padding: 5px;
  text-decoration: none;
  color: inherit;
  
  font-size: 0.9em;
  line-height:110%;
}

.ranking_card:link, 
.ranking_card:visited, 
.ranking_card:hover, 
.ranking_card:active {
  color: inherit;
  text-decoration: none;
}



.ranking_card:hover {
  background-color: #f9f9f9;
  border-color: #ddd;
  
}

.ranking_card.no_pos  {grid-template-columns: 2fr 4fr; }

/* 3. Die Werbung (spannt sich über die gesamte Breite des äußeren Grids) */
.ranking_ad {
  grid-column: 1 / -1;
  /* Falls die Anzeige im HTML kein Link ist, musst du sie stylen */
  XXdisplay:none;
}

/* 4. Details für die Items */
.ranking_pos {
  font-weight: bold;
  text-align: center;
  font-size: 30px;
  color: #888;
}
.ranking_card.no_pos .ranking_pos {display:none;}

.ranking_picture {background: #ddd;} /*mitte, ein Bild*/
.ranking_picture img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

a.ranking_card h3, a.ranking_card span {
  XXcolor: inherit; /* Verhindert, dass der Browser das typische Link-Blau erzwingt */
}

.ranking_text h3 {
  margin: 0 0 5px 0; /* Verhindert zu große Abstände oben/unten */
  font-size: 1.3em;
}

.ranking_text h3 {
  margin: 0 0 5px 0; /* Verhindert zu große Abstände oben/unten */
  font-size: 1.3em;
}


.ranking_text {}

/*zuechter und Uersichten */
.allezuechter_grid, .hunde_grid2 {
	display: grid; 
  /* Hier definierst du deine gewünschte Aufteilung: */
  grid-template-columns: 1fr 1fr;  
  gap: 10px;

}
.allezuechter .allezuechter_grid .verein,
.hunde_grid2 .hunde_loop
 {
    width: 100%;
    float: none;
	padding:5px;
	border-radius: 10px;
}

.hunde_grid2 .hunde_loop, .zuechter_loop {
	background-color: #f9f9f9;
    border: 1px solid #999;
    border-radius: 10px;
    padding: 5px;
    text-decoration:none;

}
.hunde_grid2 a.hunde_loop img {
    width: 110px;
    margin: 0 6px 0 0;
    float: left;
	border-radius: 6px;
}


/*Zuechter */
.zuechter_grid {
	display: grid;   
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	XXjustify-content: center; /* Zentriert die Spalten, falls Restplatz bleibt */
  }
.zuechter_grid .zuechter_loop {font-size: 0.9em; line-height: 110%; position:relative; padding-right:20%;}
.zuechter_grid .zuechter_loop h3 {font-size: 1em; margin: 0 0 0 0; hyphens:none;}
.zuechter_grid .zuechter_loop a.picupl, .zuechter_loop .member-link {position:absolute; bottom:5px; right:5px; width: 20px; height: 20px; background: #0ff; overflow:hidden;}
.zuechter_loop .member-link {background: #fff url(/files/icons/a_external.svg); background-size: 100% 100%; bottom:auto; top:0; width: 30px; height: 30px; XXborder-radius: 50%;}
.zuechter_loop .member-link, .zuechter_loop .member-link a {XXopacity:0; color:transparent;}


#filter-input {background: url(/files/icons/filter.svg) no-repeat right center; border: 1px solid #ccc;    margin: 0 0 5px;    padding: 5px; outline: 0 none; float:right;}
.zuechter_loop.not-found {display:none;}

/*============= =================== ===============*/

-submitallButton {display: block; padding: 20px; text-align: center;}


/* ================================================================================================= */
/* Smaller Screens */
@media screen and (max-width: 600px) {
	/*zuechter und Uersichten */
	.allezuechter_grid, .hunde_grid2 {
  	grid-template-columns: 1fr;  
	}
	body.wide-content .hunde_ranking {grid-template-columns: 1fr; }
}