/* CSS für Trenner aus zwei gegenläufigen Fünfecken */


/* Sorgt für die horizontale Zentrierung auf der Seite */
.trenner-zentriert {
  display: block;
  text-align: center;      /* Zentriert das Fünfeck horizontal */
  width: 100%;             

  
  /* ----------------------------------------------------------------------
     1) ABSTÄNDE & GRÖSSEN: SMARTPHONES (Standard)
     ---------------------------------------------------------------------- */
  margin-top: -25px;       /* <--- MANUELLE EINSTELLUNG: Abstand oben auf Handys */
  margin-bottom: -37px;    /* <--- MANUELLE EINSTELLUNG: Abstand unten auf Handys */
}

/* Die feste quadratische Box für das Fünfeck */
.trenner-container {
  display: inline-block;   /* Ermöglicht die Zentrierung via text-align */
  position: relative;
  
  /* RELATIVE GRÖSSE (SMARTPHONES) */
  width: 63vw;             /* <--- GRÖSSE: Relative Breite auf Handys (z.B. 20vw) */
  height: 63vw;            /* <--- GRÖSSE: MUSS identisch zur Breite sein (Quadrat) */
}


/* ----------------------------------------------------------------------
   2) MEDIA QUERY: MEDIUM SIZE & TABLETS (Bildschirme ab 500px Breite)
   ---------------------------------------------------------------------- */
@media (min-width: 500px) {
  .trenner-zentriert {
    margin-top: -25px;     /* <--- MANUELLE EINSTELLUNG: Abstand oben auf Tablets */
    margin-bottom: -35px;  /* <--- MANUELLE EINSTELLUNG: Abstand unten auf Tablets */
  }
  .trenner-container {
    width: 24vw;           /* <--- GRÖSSE: Relative Breite auf Tablets */
    height: 24vw;          /* <--- GRÖSSE: Relative Höhe auf Tablets */
  }
}


/* ----------------------------------------------------------------------
   3) MEDIA QUERY: DESKTOPS (Bildschirme ab 900px Breite)
   ---------------------------------------------------------------------- */
@media (min-width: 900px) {
  .trenner-zentriert {
    margin-top: -25px;     /* <--- MANUELLE EINSTELLUNG: Abstand oben auf Desktops */
    margin-bottom: -35px;  /* <--- MANUELLE EINSTELLUNG: Abstand unten auf Desktops */
  }
  .trenner-container {
    width: 175px;           /* <--- GRÖSSE: ABSOLUTE Breite auf Desktops, andere sizes sind RELATIV */
    height: 175px;          /* <--- GRÖSSE: ABSOLUTE Höhe auf Desktops, andere sizes sind RELATIV */
  }
}


/* ==========================================================================
   SVG-OPTIK (STRICHDICKE & FARBE)
   ========================================================================== */
.trenner-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: none;              
  
  /* --- COATING / REGLER FÜR DIE OPTIK IM SVG --- */
  stroke: #B8E2FF;         /* <--- OPTIK: Die RICHTIGE blaue Strichfarbe, wird im js zyklisch ausgetauscht! */
  stroke-width: 5.5px;       /* <--- OPTIK: Die Strichdicke */
  
  stroke-linejoin: miter;  /* Eckige, spitze Kanten */
  vector-effect: non-scaling-stroke; 
  will-change: transform; 
}