/* ============================================================= */
/* --- MAP-200 Modulübersicht im Accordion-Karten-Stil ---       */
/* ============================================================= */

:root {
  --radius: 1em;
  --gap: 0.75em;
  --transition: 0.5s cubic-bezier(.25,.9,.25,1);
  --bg: #fafafa;
  --text: #222;
  /* HPS-Farben (Orange-Blau-Töne) */
  --accent1: #555;
  --accent2: #555;
  --accent3: #555;
  --accent4: #555;
  --accent5: #555;
  --accent6: #555;
  --accent7: #555;
}


/* ------------------------------------------------------------- */
/* Accordion-Layout                                              */
/* ------------------------------------------------------------- */
.accordion {
  display: flex;
  gap: var(--gap);
  width: min(68.75em, 95vw); /* 1100px */
  height: 23.75em; /* 380px */
}

/* Jede Karte (geschlossen) */
details {
  flex: 0 0 5em; /* 80px */
  border-radius: var(--radius);
  overflow: hidden;
  background: white;
  border-left: 0.25em solid var(--accent1); /* 4px */
  box-shadow: 0 0.25em 1em rgba(0,0,0,0.08); /* 4px 16px */
  transition: flex-basis var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative;
}

/* Geöffnete Karte */
details[open] {
  flex: 2 1 auto;
  transform: translateY(-0.25em); /* 4px */
  box-shadow: 0 0.375em 1.125em rgba(0,0,0,0.12); /* 6px 18px */
}

/* ------------------------------------------------------------- */
/* Vertikale Tabs (MAP-201 … MAP-207)                            */
/* ------------------------------------------------------------- */
summary {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75em; /* 12px */
  font-weight: 600;
  font-size: 0.875em; /* 14px */
  cursor: pointer;
  list-style: none;
  color: white;
  background: var(--accent1);
  transition: opacity var(--transition), background var(--transition);
  user-select: none;
}

details:nth-child(2) summary { background: var(--accent2); }
details:nth-child(3) summary { background: var(--accent3); }
details:nth-child(4) summary { background: var(--accent4); }
details:nth-child(5) summary { background: var(--accent5); }
details:nth-child(6) summary { background: var(--accent6); }
details:nth-child(7) summary { background: var(--accent7); }

summary::-webkit-details-marker { display: none; }

/* ------------------------------------------------------------- */
/* Inhaltsbereich                                                */
/* ------------------------------------------------------------- */
.content {
  position: absolute;
  inset: 0;
  padding: 1.875em 2.5em; /* 30px 40px */
  opacity: 0;
  transform: translateX(2.5em); /* 40px */
  transition: opacity var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

details[open] .content {
  opacity: 1;
  transform: translateX(0);
  position: initial;
}

/* Typografie im Inhalt */
.content h3 {
  margin-top: 0;
  font-size: 1.5em;
  color: var(--accent1);
  max-width: 13em;
  color: #de800e;
}

.content p {
  color: #555;
  line-height: 1.6;
  max-width: 32.5em; /* 520px */
  margin-top: 0em;
}

/* ------------------------------------------------------------- */
/* Responsive Stack (Mobile Ansicht)                             */
/* ------------------------------------------------------------- */
@media (max-width: 50em) { /* 800px */
  .accordion {
    flex-direction: column;
    height: auto;
  }

  details {
    flex: 1 1 auto;
    border-left: none;
    border-top: 0.25em solid var(--accent1); /* 4px */
  }

  summary {
    writing-mode: horizontal-tb;
  }
}

/* ============================================================= */
/* --- Bild oberhalb des Textes – rechts ausgerichtet ---        */
/* ============================================================= */

.top-right-image {
  position: absolute;
  top: clamp(8em, 10vw, 12em);
  right: clamp(2vw, 4vw, 6vw);
  z-index: 10;
}

.top-right-image img {
  width: 10vw;
  height: auto;
  border-radius: 0.5em;
  box-shadow: 0 0.6em 1.2em rgba(0, 0, 0, 0.25);
  transform: rotate(0deg);
  opacity: 0.95;
  transition: transform 0.4s ease, opacity 0.3s ease;
  cursor: pointer;
}

.top-right-image img:hover {
  transform: rotate(0deg) scale(1.05);
  opacity: 1;
}

/* ============================================================= */
/* --- Zentrierung der Modulüberschrift und des Accordions ---   */
/* ============================================================= */

.composition-heading {
  text-align: center;
  margin-top: 3em;
  margin-bottom: 1.5em;
  margin-right: 3em;
  color: #333;
}

.accordion {
  margin: 0 auto 4em;
  justify-content: center;
}

/* ============================================================= */
/* --- Modulbild oben rechts im geöffneten Accordion-Kärtchen --- */
/* ============================================================= */

.module-image {
  position: absolute;
  bottom: 12em;
  right: 1em;
  width: 8vw;
  max-width: 12em;
  height: auto;
  border-radius: 0.5em;
  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.25);
  opacity: 0.95;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.module-image:hover {
  transform: scale(1.05);
  opacity: 1;
}

/* ============================================================= */
/* --- Datenblatt-Button unten links im geöffneten Kärtchen ---  */
/* ============================================================= */

.datasheet-btn {
  display: inline-block;
  position: absolute;
  bottom: 0em;
  left: 2.5em;
  background-color: #777; /* HPS-Orange */
  color: white;
  font-weight: 600;
  font-size: 0.85em;
  text-decoration: none;
  padding: 0.5em 1.2em;
  border-radius: 0.4em;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.15);
}

.datasheet-btn:hover {
  background-color: #5c5a5a;
  transform: scale(1.05);
}

.datasheet-btn:active {
  transform: scale(0.96) translateY(0.05em);
  background-color: #5c5a5a;
  box-shadow: 0 0.15em 0.4em rgba(0, 0, 0, 0.2);
}

/* ============================================================= */
/* --- Extra Large Screens: ab 1900px ---                       */
/* ============================================================= */

@media (min-width: 1900px) {
  /* Gesamtes Accordion größer */
  .accordion {
    width: min(85em, 80vw);
    height: 30em; /* mehr Höhe, damit nichts überlappt */
    gap: 1em;
  }

  /* Karten (Details) etwas breiter geschlossen */
  details {
    flex: 0 0 6em;
    border-left-width: 0.35em;
  }

  /* Geöffnete Karte leicht angehoben */
  details[open] {
    transform: translateY(-0.4em);
  }

  /* Inhalt weiter nach unten rücken, um Platz für Bild zu schaffen */
  .content {
    padding: 3em 3.5em 2em 3em; /* oben + unten etwas mehr */
  }

  .content h3 {
    font-size: 1.75em;
    max-width: 13em;
    z-index: 2;
    position: relative;
  }

  .content p {
    font-size: 1.1em;
    line-height: 1.7;
    max-width: 36em;
    z-index: 2;
    margin-top: 1em;
    position: relative;
  }

  /* Modulbild – bleibt im Kärtchen */
  .module-image {
    bottom: 12em; /* weiter nach unten, damit es nicht oben rausgeht */
    right: 2em;
    width: 8vw; /* proportional statt riesig */
    max-width: 13em;
    box-shadow: 0 0.6em 1.4em rgba(0, 0, 0, 0.25);
    z-index: 1; /* Bild unter Text */
  }

  /* Datenblatt-Button unten links */
  .datasheet-btn {
    font-size: 0.95em;
    padding: 0.6em 1.4em;
    left: 3em;

  }

  /* Überschrift */
  .composition-heading {
    font-size: 1.6em;
    margin-top: 3.5em;
    margin-bottom: 2.2em;
    text-align: center;
  }

  .top-right-image img {
    margin-top: 3em;
}
}

/* Handy: Modulbild über dem Text statt als Mini-Bild darauf */
@media (max-width: 600px) {
  .module-image {
    position: static;
    display: block;
    width: 45vw;
    max-width: none;
    margin: 0 auto 4vw;
  }
}