:root {
  --astro-frameimage: url('/images/astrosym/rahmen-astro.png') 250 round;
  --astro-boxshadow: 0 0 30px #5405d3;
  --astro-item: rgba(0, 0, 0, 0.4);
}

.modal-content {
  box-shadow: var(--astro-boxshadow); /*Überschreiben von site-style*/
}
.aries-mark, .mars-mark, .pholus-mark, .ac-mark
{
font-weight: bold;
color: firebrick;
}
.taurus-mark, .juno-mark
{
font-weight: bold;
color: seagreen;
}
.gemini-mark, .merkur-mark
{
font-weight: bold;
color: skyblue;
}
.cancer-mark, .mond-mark, .ic-mark 
{
font-weight: bold;
color: peachpuff;
}
.leo-mark, .sun-mark, .fortuna-mark
{
font-weight: bold;
color: goldenrod;
}
.virgo-mark, .ceres-mark
{
font-weight: bold;
color: sandybrown;
}
.libra-mark, .venus-mark, .dc-mark
{
font-weight: bold;
color: palevioletred;
}
.scorpio-mark, .pluto-mark, .lilith-mark
{
font-weight: bold;
color: darkslateblue;
}
.sagittarius-mark, chiron-mark, .mk-mark
{
font-weight: bold;
color: purple;
}
.capricorn-mark, .saturn-mark, .mc-mark
{
font-weight: bold;
color: darkslategrey;
}
.aquarius-mark, .uranus-mark, .pallas-mark
{
font-weight: bold;
color: turquoise;
}
.pisces-mark
{
font-weight: bold;
color: plum;
}
.jupiter-mark 
{
font-weight: bold;
color: orangered;
}
.neptun-mark, .vesta-mark
{
font-weight: bold;
color: darkblue;
}

.latin-name
{
font-size: 0.75rem;
display: block; /* sorgt für eigene Zeile */
font-style: italic;
color: #666; /* optional: zartes Grau für dezente Wirkung */
margin-left: 1.4rem;
margin-top: 0.1rem; /* minimaler Abstand zur Hauptzeile */
line-height: 1; /* engere Zeilenhöhe für den Zusatz */
}
.astro-image-row {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.planet-link:hover{
  box-shadow: none;
  transform: scale(1.1);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.mars:hover{
  filter: var(--red-shadow);
}
.venus:hover{
  filter: var(--pink-shadow);
}
.merkur:hover,.mond:hover{
  filter: var(--silver-shadow);
}
.sonne:hover{
  filter: var(--gold-shadow);
}
.pluto:hover{
  filter: var(--black-shadow);
}
.jupiter:hover{
  filter: var(--orange-shadow);
}
.saturn:hover{
  filter: var(--purple-shadow);
}
.uranus:hover{
  filter: var(--turquoise-shadow);
}
.neptun:hover{
  filter: var(--blue-shadow);
}
.sign:hover{
  filter: var(--green-shadow);
}

.symbol-wrapper{
 box-shadow: var(--box-shadow);
 border-radius: 0.5rem;
} 
img[data-glow="magic"] {
 box-shadow: none;
 filter: var(--logo-shadow); 
} 
img[data-glow="red"] {
  box-shadow: none;
  filter: var(--red-shadow); 
 } 
img[data-glow="pink"] {
  box-shadow: none;
  filter: var(--pink-shadow);
}
img[data-glow="silver"] {
  box-shadow: none;
  filter: var(--silver-shadow);
}
img[data-glow="gold"] {
  box-shadow: none;
  filter: var(--gold-shadow);
}
img[data-glow="orange"] {
  box-shadow: none;
  filter: var(--orange-shadow);
}
img[data-glow="purple"] {
  box-shadow: none;
  filter: var(--purple-shadow);
}
img[data-glow="turquoise"] {
  box-shadow: none;
  filter: var(--turquoise-shadow);
}
img[data-glow="blue"] {
  box-shadow: none;
  filter: var(--blue-shadow);
}
img[data-glow="black"] {
  box-shadow: none;
  filter: var(--black-shadow);
}
h4 {
   margin:1rem 0;
}

.astro-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;   
}

.astro-row {
  display: flex;
  align-items: flex-start; /* sorgt für gleiche Höhe */
  gap: 2rem;
  max-width: 1400px;
}  

.astro-row.reverse {
  flex-direction: row-reverse;
}

.zickzack-image,
.zickzack-text {
  flex: 1;
}/*verhindert das zu große Dateien riesig werden*/

.zickzack-text {
  flex: 1 1 300px; /*steuert bildgrößenverhältnis*/
  background-color: var(--section-background);
  border: 1px solid var(--section-frame);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--box-shadow);
  line-height: 1.8;
  font-size: 1.1rem;
  text-align: center;
}
.zickzack-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.zickzack-text ul {
  list-style-position: inside; /* Aufzählungszeichen nah an Text */
  padding-left: 1rem;
  text-align: left;
  display: inline-block; /* sorgt dafür, dass ul in zentrierter Umgebung nicht 100% Breite nimmt */
  column-count: 3; 
  column-gap: 1rem; /* Optional: Abstand zwischen den Spalten */ 
  
}
.zickzack-text ul li {
  text-indent: -1em;
  padding-left: 1em;
}

.astro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: transparent;
  border-radius: 0.5rem;
  background: none; /* optional: sanfter Hintergrund */
  font-size: 1rem;
}
.astro-box {
  padding: 0.5rem;
  background: var(--dark-bg);
  border-radius: 0.5rem;
  text-align: center;
  border: 2px groove black;
  box-shadow: var(--box-shadow);
  
}

.astro-text {
  background-color: var(--background);
  border: none; 
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--astro-boxshadow); 
  text-align: center;
  justify-content: center;
  line-height: 1.8;
  font-size: 1.1rem;
  max-width: 1400px;

} 

.astro-frame {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  border-radius: 0.5rem;
  background: none; 
  border: none;
}

.astro-item {
  padding: 0.5rem;
  background: none;
  border-radius: 1rem;
  text-align: center;
  background-color: var(--astro-item);
  border: 25px solid transparent;
  border-image: var(--astro-frameimage);
  
}

.doppelzeichen img {
  margin: 0.5rem;
  max-width: 100px !important;
  transition: max-width 0.3s ease;
}






/* Smartphone */ 
@media (max-width: 480px) { 
  
 .doppelzeichen img {
  margin: 0.2rem;
  max-width: 50px !important;
} 
  
astro-image-row {
    flex-direction: column;
    justify-content: center;
  }      
.image-wrapper img {
    max-width: 60px; 
  } 
.zickzack-text{
    font-size: 1rem;
    line-height: 1.6rem; 
  } 

.zickzack-text ul {
  column-count: 1;  
  } 
  
.astro-text{
  font-size: 1rem;
  line-height: 1.6rem;
  padding: 1rem;
  }  
  
.astro-grid {
    grid-template-columns: 1fr; 
  }  
.astro-frame {
    grid-template-columns: 1fr; 
  } 
.astro-item {
  border-radius: 0.5rem;
  
  border: 15px solid transparent;
 border-image: var(--astro-frameimage);
  font-size: 0.8rem;
  line-height: 1.4rem;
  }  

}


/* Zickzack: Smartphone und kleine Tablets */
@media (max-width: 700px) {
  
.zickzack-image, .zickzack-text {
    order: unset !important;
  }     
.astro-row, .astro-row.reverse {
    flex-direction: column;
    align-items: center;
  }  
.zickzack-image img{
  align-items: center;
  max-width: 300px;
  } 
}


/* Zickzack: große Tablets */
@media (min-width: 701px) and (max-width: 899px) { 
  
.zickzack-text {
  flex: 1 1 200px; /*steuert bildgrößenverhältnis*/
  }  
}

/* Tablets */
@media (min-width: 481px) and (max-width: 899px) { 

  
.zickzack-text ul {
  column-count: 2;  
  }
.astro-image-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
.image-wrapper img {
    border-radius: 1rem;
    max-width: 70px;
  } 
.doppelzeichen img {
  margin: 0.2rem;
  max-width: 70px !important;
} 
.astro-frame {
    grid-template-columns: 1fr; 
  } 
}

/* Desktop */  
@media (min-width: 900px) { 
  
.astro-image-row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
.image-wrapper img {
    max-width: 200px;
  }   
}