/* HERO-Header und Hintergrund */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(100deg, #007ac2 75%, #53cbf1 100%);
  box-shadow: 0 4px 28px rgba(0,122,194,0.13);
}
.hero-bg {
  background:
    linear-gradient(100deg, #007ac2 75%, #53cbf1 100%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  top: 10%; left: 10%;
  width: 350px; height: 220px;
  background: #fff;
  opacity: 0.10;
  border-radius: 44% 56% 63% 37% / 52% 51% 49% 48%;
  z-index: 2;
}

.hero-content {
  z-index: 2;
  color: #fff;
  text-align: center;
  width: 100%;
  max-width: 680px;
  margin: auto;
  padding: 2.5rem 1rem 2.2rem 1rem;
}
.hero h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 0.3em;
  letter-spacing: 1.2px;
}
.slogan {
  font-size: 1.25rem;
  margin-bottom: 1.3em;
  color: #d9f6ff;
  font-weight: 400;
  letter-spacing: 0.2px;
  text-shadow: 0 3px 18px rgba(0,122,194,0.17);
}


body {
     font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
}

/* Navigation optisch aufgeräumt */
.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em 1.5em; /* Zeilen- und Spaltenabstand */
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 680px;
}



.main-nav li {
  display: inline-block; /* Menü nebeneinander */
}

.main-nav a {
  color: #fff;
  font-weight: 500;
  background: rgba(0,80,130,0.11);
  padding: 0.5em 1.2em;
  border-radius: 7px;
  text-decoration: none;
  transition: background-colour 0.17s, transform 0.12s;
}
.main-nav a:hover, .main-nav a:focus {
  background: #53cbf1;
  color: #0a3553;
  transform: translateY(-2px) scale(1.05);
}





/* Sektionen als Karten-GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.2em;
  margin: 2.5em auto 0 auto;
  max-width: 1250px;
  width: 94vw;
}
.card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 34px rgba(0,122,194,0.09), 0 2px 9px rgba(0,0,0,0.03);
  padding: 2.1em 1.4em 1.2em 1.4em;
  margin: 0.8em 0;
  transition: box-shadow 0.23s, transform 0.15s;
  border-left: 7px solid #007ac2;
  min-height: 210px;
  position: relative;
}
.card:hover {
  box-shadow: 0 16px 52px rgba(0,122,194,0.15), 0 5px 18px rgba(0,0,0,0.06);
   /* transform: translateY(-6px) scale(1.02);  */
}
.card h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  background: #007ac2; 
  color: #fff;          
  padding: 0.8em 1em;
  margin: 0 -1em 1em -1em;
  border-radius: 7px 7px 0 0;
  font-size: 1.2em;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(0,122,194,0.08);
  border-left: 5px solid #01578b;
}
.card ul {
  margin: 0.6em 0 0 0;
  padding: 0;
  list-style: none;
}
.card ul li {
  margin-bottom: 0.58em;
}
.card a {
  color: #007ac2;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.12s;
}
.card a:hover {
  text-decoration: underline;
  color: #005b8d;
}
.formelsammlung {
  max-width: 370px;
  margin: 2.2em auto 0 auto;
  box-shadow: 0 4px 16px rgba(0,122,194,0.09);
}

/* Footer hübsch */
footer {
  background: #eef9fe;
  color: #007ac2;
  text-align: center;
  padding: 1.2em 0;
  font-size: 1.06em;
  margin-top: 3.5em;
  border-top: 2px solid #e0f2ff;
  font-weight: 500;
  letter-spacing: 0.2px;
}

/* Responsiv für Mobile */
@media (max-width: 750px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 1.2em;
    padding: 0 0.3em;
  }
  .card { min-height: 180px; }
  .hero-content { padding: 2em 0.2em; }
  .hero h1 { font-size: 1.45rem; }
  .slogan { font-size: 1rem; }
}


/* Mobil-Ansicht */
@media (max-width: 600px) {
  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .main-nav li {
    width: 100%;
  }

  .main-nav a {
    display: block;
    text-align: center;
  }

  header {
    padding: 1rem;
  }
}

/* Seiten-Padding via Variable */
:root { --page-pad: 2rem; }
main  { padding-inline: var(--page-pad); }

/* Header: full-bleed innerhalb von <main> */
.header {
  background: #007ac2;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 16px rgba(0,0,0,0.09);
  position: relative;

  /* full-bleed */
  margin-inline: calc(-1 * var(--page-pad));
  padding-block: 2.5rem;
  padding-inline: var(--page-pad);
  width: auto;
}

/* mobil: kleineres Seitenpad & Headerhöhe */
@media (max-width:700px){
  :root { --page-pad: 1rem; }
  .header { min-height: 110px; padding-block: 1.1rem; }
}

section {
  padding: 1rem;
}

section ul {
  padding: 0;
}

section ul li {
  margin-bottom: 0.5rem;
}

section a {
  color: #007ac2;
  text-decoration: none;
}

section a:hover {
  text-decoration: underline;
}

.header h1 {
  font-family: 'Montserrat', 'Roboto', Arial, sans-serif;
  font-size: 2.0rem;        /* gleiche Größe wie Startseite */
  font-weight: 700;
  color: #fff;              /* Weiß wirkt oft besser auf Blau */
  text-align: center;       /* Zentriert */
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
  letter-spacing: 0.01em;
}

h1 {
  text-align: center;
}

h2 {
  border-left: 5px solid #007ac2;
  padding-left: 0.75rem;
  color: #007ac2;
  margin-top: 3rem;
}

h3 {
  color: #2c3e50;
  font-weight: 500;
  margin-top: 2rem;
}

.lehrjahr ul {
  background-color: #ffffff;
  border-left: 3px solid #007ac2;
  padding: 1rem;
  list-style: none;
  margin-bottom: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.lehrjahr ul li {
  padding: 0.3rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.card {
  background-color: #fff;
  padding: 2em 2em 1.5em 2em;  
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 122, 194, 0.13);
  margin: 1.5em 0;
  transition: box-shadow 0.2s;
}


footer {
  text-align: center;
  font-size: 0.9rem;
  padding: 1rem;
  background-color: #eeeeee;
  margin-top: 2rem;
  color: #555;
}

/* Akkordeon-Styles */

.accordion-button {
  background: #007ac2;
  max-width: 98%;
  width: 90%;
  color: #fff;
  border: none;
  font-size: 1.18rem;
  font-weight: bold;
  padding: 14px 22px;
  margin-bottom: 6px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

/* Aktiv (offen) - Grundzustand */
.accordion-button.active,
.accordion-button[aria-expanded="true"] {
  background: #68c3ff;   /* helles, klares Blau */
  color: #04558e;        /* leicht dunkler für Lesbarkeit */
  max-width: 98%;
}

/* HELLER beim Hover auf aktivem Button */
.accordion-button.active:hover,
.accordion-button[aria-expanded="true"]:hover {
  background: #b6e5ff;   /* noch heller beim Hover */
  color: #007ac2;
}

/* Standard Hover auf geschlossenem Button */
.accordion-button:hover:not(.active):not([aria-expanded="true"]) {
  background: #42aafc;
  color: #fff;
}



/* Accordion Content */
.accordion-content {
  background: #e7f5ff; /* ganz helles Blau für Inhalt */
  max-width: 98%;
  width: 90%;
  color: #222;
  padding: 18px 28px;
  border-radius: 0 0 10px 10px;
  border: 1px solid #b6e5ff;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px rgba(0, 122, 194, 0.07);
  font-size: 1.04rem;
}

/* Offenes Panel noch heller hervorheben */
.accordion-button.active + .accordion-content,
.accordion-button[aria-expanded="true"] + .accordion-content {
  background: #d6efff; /* leicht hervorgehoben */
}

.color1 { background: #e7f5ff; }
.color2 { background: #fffbe9; }
.color3 { background: #ebfcfa; }

/* --- Accordion Styles: Sanft, aber sichtbar gestuft --- */

/* 1. Ebene (z.B. große Hauptgruppen) */
.accordion-button {
  background: #b3defa;
  color: #066399;
  border-left: 5px solid #36a4df;
}

/* Panel-Inhalt 1. Ebene */
.accordion-content {
  background: #cae9fc;
  border: 1px solid #a2d5f6;
}

/* 2. Ebene */
.accordion-content .accordion-button {
  background: #d7f1fc;
  color: #1271a5;
  margin-top: 10px;
  margin-left: 18px;
  border-left: 4px solid #77bde8;
  border-radius: 7px 7px 0 0;
  transition: background-colour 0.2s, color 0.2s;
}
.accordion-content .accordion-content {
  background: #e4f5fd;
  border: 1px solid #c9e6f8;
  margin-left: 24px;
}

/* 3. Ebene */
.accordion-content .accordion-content .accordion-button {
  background: #f0faff; /* sichtbar, aber dezent von Ebene 2 */
  color: #227eb1;
  margin-left: 28px;
  border-left: 4px solid #b6d7ef;
}
.accordion-content .accordion-content .accordion-content {
  background: #f7fbff;
  margin-left: 34px;
}

/* 4. Ebene (fast weiß, aber noch leicht getönt) */
.accordion-content .accordion-content .accordion-content .accordion-button {
  background: #fbfdff;
  color: #3783ad;
  margin-left: 38px;
}

/* Aktive/hover Styles: leicht dunkler, aber NICHT gelb oder grau! */
.accordion-button.active,
.accordion-button[aria-expanded="true"],
.accordion-button:hover {
  background: #91c9ec;
  color: #04558e;
}

.accordion-content .accordion-button.active,
.accordion-content .accordion-button[aria-expanded="true"],
.accordion-content .accordion-button:hover {
  background: #b2dff7;
  color: #007ac2;
}

/* Details- und Karteikarten-Styles (optimiert) */

details {
  background-color: #f0f8ff;
  border-radius: 8px;
  padding: 10px;
  margin: 15px auto;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
}

details summary {
  outline: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1rem;
}

/* Karteikarten Container Design (optimiert) */

.karte {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  margin-top: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-width: 500px;
  border-top: 5px solid #007ac2;
}

.karte h3.frage {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #333;
}

.karte .antwort {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #555;
}

.karte button {
  padding: 8px 12px;
  margin: 5px;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.karte button:hover {
  transform: scale(1.05);
}

.kann { background-color: #2ecc71; }
.wiederholen { background-color: #e74c3c; }
.mix { background-color: #f39c12; }
.neu { background-color: #3498db; }
.zeigen { background-color: #9b59b6; }


.quellenangabe {
  background-color: #f9f9f9;
  border-left: 4px solid #007ac2;
  padding: 15px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #555;
  margin-top: 2rem;
}

.quellenangabe summary {
  cursor: pointer;
  font-weight: 500;
  color: #007ac2;
  outline: none;
}

.quellenangabe p {
  margin: 5px 0;
  padding-left: 10px;
}

.formel-titel {
  font-weight: 600;
  font-size: 1.1rem;
  color: #007ac2;
  margin-bottom: 8px;
}

.formel-box .einheitenbeweis {
  padding-top: 10px;
  border-top: 1px dashed #b3cde0;
  color: #555;
  font-size: 0.9rem;
  margin-top: 10px;
}


.accordion-button {
  background-color: #007ac2;
  color: white;
  cursor: pointer;
  padding: 10px;
  border: none;
  text-align: left;
  width: 98%;
  font-size: 16px;
  transition: 0.4s;
}

.accordion-content {
  width: 98%;
  padding: 0 10px;
  display: none;
  background-color: #f9f9f9;
}

.card {
  padding: 15px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin: 10px 0;
}

.formel-box {
  background: linear-gradient(90deg, #e0f2ff 80%, #f8fcff 100%);
  border-left: 6px solid #007ac2;
  border-radius: 12px;
  margin: 18px 0 10px 0;
  padding: 1.1em 1.5em 0.9em 1.5em;
  font-size: 1.1em;
  box-shadow: 0 1px 12px rgba(0, 122, 194, 0.10);
}
.formel-titel {
  font-weight: bold;
  font-size: 1.11em;
  color: #007ac2;
  margin-bottom: 5px;
}



details {
  background-color: #eaf6fb;
  border-radius: 7px;
  padding: 12px 18px;
  margin: 15px 0 15px 0;
  box-shadow: 0 1px 8px rgba(0, 122, 194, 0.08);
  font-size: 1em;
  border-left: 4px solid #007ac2;
  transition: box-shadow 0.2s;
}
details[open] {
  background: #f8fcff;
  box-shadow: 0 3px 12px rgba(0, 122, 194, 0.11);
}
details summary {
  font-weight: 600;
  color: #007ac2;
  font-size: 1.08em;
  cursor: pointer;
  outline: none;
}


.img-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.2em 0;
}
.img-box img {
  max-width: 72%;
  border-radius: 12px;
  border: 2px solid #b3cde0;
  box-shadow: 0 2px 10px rgba(0,122,194,0.07);
}
.img-caption {
  font-size: 0.95em;
  color: #3789bb;
  margin-top: 0.5em;
  text-align: center;
}


.nice-list {
  list-style: none;
  padding: 0 0 0 1.2em;
}
.nice-list li {
  margin-bottom: 0.6em;
  position: relative;
}
.nice-list li::before {
  content: '•';
  color: #007ac2;
  position: absolute;
  left: -1.1em;
  font-size: 1.2em;
  line-height: 1;
}

.wirkungen-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3em;
  margin-top: 1em;
}
.wirkung-card {
  background: #f0f8ff;
  border-radius: 13px;
  box-shadow: 0 2px 8px rgba(0,122,194,0.11);
  padding: 1em 1.2em;
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 260px;
  text-align: center;
  font-size: 1em;
  margin-bottom: 0.7em;
}
.wirkung-icon {
  font-size: 2em;
  display: block;
  margin-bottom: 0.2em;
}
.warn-box {
  background: #ffeaea;
  color: #a70000;
  border-left: 4px solid #ff5a5a;
  border-radius: 9px;
  padding: 0.8em 1.2em;
  margin-top: 1.5em;
  font-size: 1.07em;
}


.strom-fakten-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 1.3em 0 1.8em 0;
  justify-content: flex-start;
}

.strom-fakt-card {
  background: #e0f2ff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,122,194,0.08);
  flex: 1 1 240px;
  min-width: 220px;
  max-width: 310px;
  padding: 1.1em 1.3em;
  margin-bottom: 0.7em;
  display: flex;
  flex-direction: column;
}

.strom-fakt-header {
  font-size: 1.1em;
  font-weight: bold;
  color: #007ac2;
  background: #f6fbff;
  border-radius: 8px 8px 0 0;
  margin-bottom: 0.5em;
  padding: 0.2em 0.7em;
  letter-spacing: 0.5px;
  box-shadow: 0 1px 4px rgba(0,122,194,0.04);
}

.strom-fakt-body {
  font-size: 1em;
  color: #2c3e50;
  padding-left: 0.1em;
  margin-bottom: 0.2em;
  line-height: 1.45;
}

.thema-header{
  display:flex;
  align-items:center;
  gap:.6em;                          /* statt margin-right auf Icon */
  background:linear-gradient(90deg,#e0f2ff 80%,#fff 100%);
  border-left:6px solid #007ac2;
  border-radius:10px;
  font-size:1.18em;
  font-weight:600;
  color:#007ac2;
  padding:.7em 1.2em;
  margin:2em 0 1em;
  box-shadow:0 2px 8px rgba(0,122,194,.07);
  letter-spacing:.2px;
  min-width:0;                       /* 🔑 Flex-Container darf schrumpfen */
}

.thema-header .thema-icon{
  font-size:1.6em;
  line-height:1;
  flex:0 0 auto;                     /* Icon nicht schrumpfen */
}

.thema-header .thema-text{
  flex:1 1 auto;                     /* nimmt restliche Breite */
  min-width:0;                       /* 🔑 ohne das kein Umbruch */
  white-space:normal;                /* sicherheitshalber */
  overflow-wrap:anywhere;            /* lange Wörter/Ohne Leerzeichen */
  hyphens:auto;                      /* <html lang="de"> für saubere Trennung */
}

/* optional minimal kleiner auf sehr schmalen Geräten */
@media (max-width:480px){
  .thema-header{ font-size:1.05em; padding:.65em 1em; }
}


.varistor-kennlinie-box {
  margin: 0.8em 0 1em 0;
}
.vk-bg {
  fill: #a5d8ef;
}
.vk-grid {
  stroke: #bce1fa;
  stroke-width: 1;
}
.vk-curve {
  stroke: #0074d9;
  stroke-width: 4;
  fill: none;
}
.vk-point {
  stroke: #db3a34;
  stroke-width: 3;
  fill: #fff;
  cursor: grab;
}
.vk-label {
  font-size: 15px;
  fill: #222;
  font-family: Arial, sans-serif;
}
.vk-axis, .vk-axis-v {
  font-size: 17px;
  fill: #222;
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.vk-tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #888;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 16px;
  pointer-events: none;
  box-shadow: 1px 1px 7px #bbb;
  display: none;
  z-index: 3;
  font-family: Arial, sans-serif;
  min-width: 95px;
  text-align: left;
}
.varistor-kennlinie-box .img-caption {
  margin-top: 0.3em;
  color: #222;
  font-size: 15px;
  font-style: italic;
}


.card ul {
  list-style-type: none;
  padding-left: 0;
}




.pdf-viewer {
  width: 100%;
  max-width: 100vw;
  height: min(60vw, 80vh, 700px);
  border: 1.5px solid #c4c4c4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px #2221;
  margin-bottom: 24px;
  background: #fff;
}

.pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 700px) {
  .pdf-viewer {
    height: 60vw;
    min-height: 320px;
  }
}



.messbegriffe-table-box {
  width: 100%;
  overflow-x: auto;
  margin: 1.3em 0 2.2em 0;
  background: #fff;
  border-radius: 13px;
  box-shadow: 0 2px 16px rgba(44,62,80,0.08);
}

.messbegriffe-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  min-width: 380px;
}

.messbegriffe-table th, .messbegriffe-table td {
  padding: 14px 16px;
  text-align: left;
  font-size: 1em;
}

.messbegriffe-table th {
  background: #e0f2ff;
  color: #007ac2;
  font-weight: 700;
  border-bottom: 2.5px solid #b3cde0;
  letter-spacing: 0.03em;
}

.messbegriffe-table tbody tr {
  transition: background-colour 0.16s;
}

.messbegriffe-table tbody tr:nth-child(even) {
  background: #f5fbfe;
}

.messbegriffe-table tbody tr:hover {
  background: #c9e7fb;
}

.messbegriffe-table td {
  color: #2c3e50;
  border-bottom: 1px solid #eaf4fb;
}

@media (max-width: 650px) {
  .messbegriffe-table, .messbegriffe-table thead, .messbegriffe-table tbody, .messbegriffe-table th, .messbegriffe-table td, .messbegriffe-table tr {
    display: block;
    width: 100%;
  }
  .messbegriffe-table thead {
    display: none;
  }
  .messbegriffe-table tr {
    background: #fff;
    margin-bottom: 14px;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(44,62,80,0.07);
  }
  .messbegriffe-table td {
    padding: 12px;
    border-bottom: none;
    position: relative;
    font-size: 0.99em;
  }
  .messbegriffe-table td:before {
    content: attr(data-label);
    font-weight: 600;
    color: #007ac2;
    display: block;
    margin-bottom: 2px;
  }
}



.ohm-pyramide-box svg text {
  transition: fill 0.25s, font-size 0.17s;
  fill: #007ac2;
}
.ohm-pyramide-box svg text:hover {
  fill: #53cbf1;
  font-size: 2.7em;
  cursor: pointer;
}

.ohm-letter {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  font-size: 2.7em;
  fill: #b4c8d8; /* Standard grau-blau (dezent) */
  cursor: pointer;
  transition: fill 0.18s, font-size 0.18s;
  filter: drop-shadow(0 0px 0px #fff);
}
.ohm-letter.active.ohm-u { fill: #1e88e5; font-size: 2.9em; }
.ohm-letter.active.ohm-i { fill: #f4511e; font-size: 2.9em; }   /* Orange für I */
.ohm-letter.active.ohm-r { fill: #43a047; font-size: 2.9em; }   /* Grün für R */
.ohm-letter:hover {
  filter: drop-shadow(0 2px 8px #53cbf1);
}



.formel-liste {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  max-width: 440px;
  margin: 2em auto;
}

.formel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1em;
  max-width: 1120px;      /* Optional: Maximalbreite */
  margin: 2em auto;
  padding: 0 1em;         /* etwas Luft an den Seiten */
}

.formel-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,122,194,0.09);
  border-left: 5px solid #1598da;
  transition: box-shadow 0.17s, border-color 0.21s;
  overflow: hidden;
  min-width: 0;          /* wichtig für flexibles Grid */
  font-size: 0.96em;
  display: flex;
  flex-direction: column;
}

.formel-card.active {
  border-color: #047dc4;
  box-shadow: 0 8px 26px rgba(0,122,194,0.14);
}

.formel-header {
  width: 100%;
  background: none;
  border: none;
  font-size: 1em;
  color: #047dc4;
  font-weight: 700;
  text-align: left;
  padding: 0.9em 1em 0.6em 1.1em;
  border-radius: 14px 14px 0 0;
  cursor: pointer;
  transition: background-colour 0.18s, color 0.16s;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.5em;
  /* Optional: Text umbrechen lassen */
  word-break: break-word;
}

.formel-header:after {
  content: "";
  display: inline-block;
  border: solid #53cbf1;
  border-width: 0 3px 3px 0;
  padding: 4px;
  margin-left: 7px;
  transform: rotate(45deg);
  transition: transform 0.18s;
}

.formel-card.active .formel-header:after {
  transform: rotate(-135deg);
}

.formel-body {
  padding: 0.4em 1.1em 0.7em 1.3em;
  display: none;
  animation: einblenden 0.18s;
}
.formel-card.active .formel-body {
  display: block;
}
@keyframes einblenden {
  from { opacity: 0; transform: translateY(-8px);}
  to   { opacity: 1; transform: translateY(0);}
}
.formel-math {
  font-size: 1.07em;
  margin-bottom: 0.3em;
  margin-top: 0.15em;
  color: #333;
}
.einheitenbeweis {
  font-size: 0.95em;
  color: #888;
  margin-top: 0.09em;
  border: none;
  background: none;
  padding: 0 0 0 0.1em;
}

/* Für sehr kleine Bildschirme: */
@media (max-width: 600px) {
  .formel-grid {
    grid-template-columns: 1fr;
    gap: 0.7em;
    padding: 0 0.2em;
  }
  .formel-header {
    font-size: 0.97em;
    padding: 0.82em 0.8em 0.6em 0.9em;
  }
  .formel-body {
    padding: 0.35em 0.8em 0.5em 0.8em;
  }
}


.quiz-card {
  max-width: 400px;
  margin: 2em auto 1.2em auto;
  padding: 2.2em 1.6em 1.5em 1.6em;
  box-shadow: 0 6px 28px #53cbf13d;
  border-radius: 15px;
  border-left: 7px solid #007ac2;
  background: #fff;
}

.quiz-task {
  font-size: 1.12em;
  font-weight: 500;
  margin-bottom: 1.3em;
}

.quiz-input-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 1.4em;
}

#userInput {
  padding: 0.57em 1em;
  border: 1.5px solid #b3cde0;
  border-radius: 7px;
  font-size: 1.1em;
  flex: 1 1 90px;
  transition: border-color 0.2s;
}

#userInput:focus {
  border-color: #007ac2;
  outline: none;
  background: #eaf7ff;
}

.quiz-einheit {
  color: #888;
  font-size: 1.12em;
  margin-right: 0.6em;
  user-select: none;
  font-weight: 400;
}

#checkBtn, .quiz-next-btn {
  background: #007ac2;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.52em 1.25em;
  font-size: 1em;
  margin-left: 0.5em;
  cursor: pointer;
  transition: background-colour 0.18s, transform 0.12s;
  font-weight: 600;
  box-shadow: 0 2px 10px #53cbf13d;
}

#checkBtn:hover, .quiz-next-btn:hover {
  background: #53cbf1;
  color: #0a3553;
  transform: translateY(-1px) scale(1.05);
}

.quiz-feedback {
  min-height: 2em;
  font-size: 1.11em;
  font-weight: 600;
  margin-bottom: 1.2em;
  margin-top: 0.2em;
  transition: color 0.25s;
  text-align: left;
}

.quiz-feedback.correct {
  color: #27ae60;
  animation: quiz-blink-right 0.5s;
}
.quiz-feedback.wrong {
  color: #c0392b;
  animation: quiz-blink-wrong 0.5s;
}

@keyframes quiz-blink-right {
  0% { background: #d5fbe6; }
  100% { background: none; }
}
@keyframes quiz-blink-wrong {
  0% { background: #ffd6d6; }
  100% { background: none; }
}

.quiz-next-btn {
  margin-top: 0.4em;
  background: #1598da;
}
.quiz-score {
  margin-top: 1em;
  color: #007ac2;
  font-size: 0.96em;
  font-weight: 500;
  text-align: right;
}

.logik-tabelle {
  width: 220px;
  margin: 0.6em 0;
  border-collapse: collapse;
  font-size: 1.1em;
  text-align: center;
  box-shadow: 0 1px 7px #d3d3d3;
}
.logik-tabelle th, .logik-tabelle td {
  border: 1px solid #b0c4de;
  padding: 0.2em 0.7em;
}
.logik-tabelle th {
  background: #e6f0fa;
  color: #2176ae;
  font-weight: bold;
}

.info-box {
  background: #f6fbff;
  border-left: 4px solid #2196f3;
  padding: 0.5em 1em;
  border-radius: 5px;
  margin-bottom: 0.5em;
}

.wirkungen-grid, .strom-fakten-grid {
  display: flex;
  gap: 1.2em;
  margin: 1em 0 1em 0;
  flex-wrap: wrap;
}
.wirkung-card, .strom-fakt-card {
  background: #f7fbfd;
  border-radius: 10px;
  padding: 0.7em 1em;
  min-width: 170px;
  box-shadow: 0 2px 6px #c7e2fb44;
  font-size: 1.05em;
}
.formel-box {
  background: #e3f2fd;
  border-left: 6px solid #1976d2;
  margin: 1em 0;
  padding: 0.6em 1.1em;
  font-family: 'Fira Mono', 'Consolas', monospace;
}
.info-box {
  background: #f8f9fa;
  border-left: 6px solid #90caf9;
  margin: 1em 0;
  padding: 0.7em 1.2em;
}
.aufgabenliste .aufgabe {
  background: #f7fcfe;
  border-left: 6px solid #80cbc4;
  margin: 0.9em 0;
  padding: 0.7em 1em;
  border-radius: 8px;
}
.img-box img { border-radius: 7px; }
.img-caption { color: #555; margin-top: 0.5em; }




.stepper-box {
  background: #f7fbff;
  border-left: 5px solid #42a5f5;
  padding: 1.2em 1.4em;
  border-radius: 14px;
  margin-bottom: 1.3em;
  max-width: 520px;
}
.step { display: flex; align-items: center; margin-bottom: 0.6em; }
.step-circle {
  background: linear-gradient(135deg, #42a5f5 80%, #b2ebf2 100%);
  color: #fff;
  font-weight: bold;
  width: 2.2em; height: 2.2em; display: inline-flex;
  align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.3em;
  margin-right: 1em;
  box-shadow: 0 2px 6px #b2d4f866;
}
.step-text { font-size: 1.1em; }
.step-hint { font-size: 0.94em; color: #999; margin-left: 0.5em; }
.emoji { font-size: 1.1em; vertical-align: -0.1em; }





.checklist-card {
  background: linear-gradient(90deg, #e3f2fd 85%, #fff 100%);
  border-radius: 13px;
  border-left: 7px solid #42a5f5;
  padding: 1.2em 1.4em 1.2em 1.7em;
  box-shadow: 0 2px 8px #b2d4f844;
  margin-bottom: 1.3em;
  max-width: 550px;
}
.checklist-title {
  font-size: 1.21em;
  font-weight: bold;
  color: #1769aa;
  margin-bottom: 0.7em;
  display: flex; align-items: center; gap: 0.6em;
}
.checklist-list {
  list-style: none; padding: 0; margin: 0;
}
.checklist-list li {
  padding: 0.32em 0;
  font-size: 1.05em;
  display: flex; align-items: center; gap: 0.7em;
}
.emoji { font-size: 1.14em; vertical-align: -0.1em; }




/* Rahmen/Container (optional, verhindert Layout-Shift) */
.video-frame {
  width: min(90%, 700px);   /* statt width+max-width */
  margin: 0 auto;
  aspect-ratio: 16 / 9;     /* reserviert Höhe vor dem Laden */
}

/* Gilt für <video> ODER das YouTube-<iframe> */
.schulungs-video,
.yt-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 4px 24px #007ac233;
  background: #000;         /* schwarze Fläche beim Laden */
}

/* Tastaturfokus klar sichtbar */
.schulungs-video:focus-visible,
.yt-iframe:focus-visible {
  outline: 3px solid #007AC2;
  outline-offset: 3px;
  border-radius: 16px;
}

/* Dark-Mode: Schatten dezenter, kein Grauschleier */
@media (prefers-color-scheme: dark) {
  .schulungs-video,
  .yt-iframe {
    box-shadow: 0 6px 28px rgba(0,0,0,.55);
  }
}

/* Mobile: Ecken minimal kleiner, damit es „leichter“ wirkt */
@media (max-width: 480px) {
  .schulungs-video,
  .yt-iframe { border-radius: 12px; }
}


/* ==============================
   SIDEBAR (korrigiert)
   ============================== */

/* Container stapelt vertikal */
.floating-sidebar {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;              /* gleichmäßiger Abstand */
  z-index: 2040;          /* unter deinen Overlays (2050+) */
}

/* Buttons IM Sidebar-Container (überschreibt alte fixed/top-Regeln) */
.floating-sidebar > .floating-panel-btn {
  position: static !important; /* wichtig: NICHT fixed */
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;

  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  border: 2px solid #e3f1fc;
  border-radius: 50%;
  box-shadow: 0 3px 14px 2px #007ac22a;
  color: #0f5791;
  cursor: pointer;
  transition: box-shadow .18s, background-color .2s, transform .15s ease; /* colour -> color */
  z-index: 1;
}

.floating-sidebar > .floating-panel-btn:hover {
  box-shadow: 0 8px 22px 4px #007ac24a;
  background: #eaf6fd;
  transform: scale(1.05);
}

/* Optional: Mobile unten als Dock */
@media (max-width: 650px) {
  .floating-sidebar {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    right: 10px;
    left: 10px;
    transform: none;
    flex-direction: row;
    justify-content: center;
    gap: 2px; /* enger zusammenrücken (vorher 6px) */
  }
  .floating-sidebar > .floating-panel-btn,
  .floating-sidebar .auth-btn {
    width: 34px;   /* kleiner als vorher 38px */
    height: 34px;  /* kleiner als vorher 38px */
    border-radius: 12px;
    margin: 0 !important; /* kein zusätzlicher Außenabstand */
  }
}
/* ==============================
   GeoGebra Overlay & Panel
   ============================== */

#geogebra-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2050;
  pointer-events: none;
}
#geogebra-overlay.active {
  display: block;
  pointer-events: auto;
}

/* Hintergrund: KEIN Blur */
#geogebra-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}

/* ===== Panel – Desktop: fix RECHTS verankert ===== */
#geogebra-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;                     /* volle Höhe */
  width: clamp(600px, 68vw, 1280px);
  max-width: 98vw;
  height: 100dvh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #007ac229;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  border: 1.5px solid #007ac233;
  opacity: 1;
  animation: ggbSlideInRight 0.23s cubic-bezier(.61,.15,.44,1.11);
  overscroll-behavior: contain;
}

/* Desktop-Slide-in von rechts */
@keyframes ggbSlideInRight {
  from { transform: translateX(420px); opacity: 0.6; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Close */
#geogebra-close {
  position: relative;            /* damit z-index greift */
  z-index: 4;                    /* über dem Griff */
  background: none;
  border: none;
  color: #007ac2;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.17s, color 0.17s;
}
#geogebra-close:hover { opacity: 1; color: #ea4c23; }

#geogebra-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 11px;
  min-height: 0;
  background: #fff;
}

/* ===== Griff-Variablen & Cursor ===== */
:root{
  --ggb-grip-left: 20px;   /* Desktop-Griff-Breite */
  --ggb-grip-top:  56px;   /* Mobile-Griff-Höhe (Touch) */
}

/* Beim Gedrückthalten -> Hand geschlossen */
#ggb-resize-left.is-active,
#ggb-resize-top.is-active,
#geogebra-panel.is-resizing,
body.is-resizing {
  cursor: grabbing !important;
  cursor: -webkit-grabbing !important;
}

/* ===== Resize-Griffe (unsichtbar, große Hit-Zonen) ===== */

/* Desktop: linker Griff (Breite ändern, Panel bleibt rechts fix) */
#ggb-resize-left{
  position: absolute;
  top: 0; bottom: 0;
  /* halb nach außen -> leichter zu treffen, ohne Inhalt zu überdecken */
  left: calc(-1 * var(--ggb-grip-left) / 2);
  width: var(--ggb-grip-left);
  cursor: grab;
  cursor: -webkit-grab;
  touch-action: none;
  user-select: none;
  background: transparent;
  z-index: 3; /* über iFrame, unter Close */
}

/* Mobile: oberer Griff (Höhe ändern, Panel bleibt unten fix) */
#ggb-resize-top{
  position: absolute;
  left: 0;
  right: 72px;             /* Close-Button rechts frei lassen */
  top: 0;                  /* INNEN im Panel -> leichter zu treffen */
  height: var(--ggb-grip-top);
  cursor: grab;
  cursor: -webkit-grab;
  touch-action: none;
  user-select: none;
  background: transparent;
  z-index: 3;
}

/* Optional: kleine „Pill“ als visueller Hinweis */
#ggb-resize-top::after{
  content:"";
  display:block;
  width:42px; height:5px;
  margin:10px auto 0;
  border-radius:5px;
  background:#c7cbd6;
  opacity:.95;
}

/* ===== Mobile: fix UNTEN verankert + kleiner starten ===== */
@media (max-width: 768px) {
  /* WICHTIG: keine !important hier, damit JS die Höhe setzen kann */
  #geogebra-panel {
    left: env(safe-area-inset-left);
    right: env(safe-area-inset-right);
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    /* Start-Höhe via CSS-Variable steuerbar */
    height: var(--ggb-panel-height, 56dvh);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 32px 3px #007ac229;
    border: 1.5px solid #007ac233;
    padding-bottom: env(safe-area-inset-bottom);
    animation: ggbSlideUp 0.24s cubic-bezier(.61,.15,.44,1.11);
    --ggb-mobile-scale: 0.4; 
  }
  @keyframes ggbSlideUp {
    from { transform: translateY(30vh); opacity: 0.6; }
    to   { transform: translateY(0);     opacity: 1; }
  }

  #geogebra-close {
    font-size: 1.8rem;
    margin: 8px 10px 0 0;
    padding: 6px 8px;
  }

  #geogebra-iframe { border-radius: 12px 12px 0 0; }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  #geogebra-panel { animation: none !important; }
}


/* ==============================
   Whiteboard Overlay & Panel
   ============================== */

#whiteboard-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2060;
  pointer-events: none;
}
#whiteboard-overlay.active { display: block; pointer-events: auto; }
#whiteboard-bg {
  position: absolute;
  inset: 0;
  background: rgba(52, 96, 150, 0.18);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
/* Whiteboard Panel – aufgeräumte Basis (breiter auf Desktop/Tablet) */
#whiteboard-panel{
  position: absolute;
  top: 0; right: 0;
  width: clamp(700px, 72vw, 1400px);   /* weiter in die Seite */
  max-width: 98vw;
  height: 80vh;
  background: #fafdfffb;
  box-shadow: -9px 0 32px 5px #7aa8e355;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: 3.5vh;
  border: 1.7px solid #a3c1efbb;
  opacity: 1;
  animation: wbSlideIn 0.21s;
}
@keyframes wbSlideIn {
  from { right: -600px; opacity: 0.2;}
  to { right: 0; opacity: 1;}
}
#whiteboard-close {
  background: none;
  border: none;
  color: #3d5ba8;
  font-size: 2em;
  align-self: flex-end;
  margin: 6px 15px 0 0;
  cursor: pointer;
  opacity: 0.64;
  transition: opacity 0.14s;
}
#whiteboard-close:hover { opacity: 1; color: #ea4c23; }

#whiteboard-toolbar {
  display: flex;
  gap: 10px;
  margin: 0 0 6px 0;
  padding: 0 0 0 13px;
}
#whiteboard-toolbar button {
  background: #e0edfa;
  border: none;
  color: #375189;
  font-size: 1.24em;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.16s, color 0.12s;
  margin-top: 2px;
}
#whiteboard-toolbar button.active,
#whiteboard-toolbar button:focus {
  background: #53cbf1;
  color: #007ac2;
  outline: 2px solid #007ac2;
}
#whiteboard-toolbar button:hover { background: #c2defc; color: #007ac2; }

#whiteboard-canvasbox {
  flex: 1;
  position: relative;
  width: 100%;
  height: 100%;
  background: #f7fafc;
  border-radius: 10px;
  box-shadow: 0 2px 13px #53cbf122;
  margin: 0 15px 12px 15px;
  overflow: hidden;
}
#whiteboard-canvas {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  touch-action: none;
  cursor: crosshair;
  z-index: 1;
  background: transparent;
}
#whiteboard-text-layer {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 3;
}

/* ==============================
   Responsive Design (Mobilansicht)
   ============================== */

@media (max-width: 650px) {
  .floating-panel-btn {
    right: 10px;
    border-radius: 15px;
    padding: 14px 0;
    font-size: 1.03em;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  #whiteboard-panel{
    left: 0; right: 0;
    top: unset; bottom: 0;
    width: 100vw;            /* randlos */
    height: 62vh;            /* höher als vorher */
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 34px #b6d3ff55;
    animation: wbMobileIn 0.24s;
    margin-top: 0;
  }

   @keyframes wbMobileIn {
    from { bottom: -65vh; opacity: 0.2; }
    to   { bottom: 0;     opacity: 1;   }
  }
}

/* ==============================
   Zeigerdiagramm Overlay & Panel
   ============================== */
#zeigerdiagramm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2050;
  pointer-events: none;
}
#zeigerdiagramm-overlay.active {
  display: block;
  pointer-events: auto;
}
#zeigerdiagramm-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}
#zeigerdiagramm-panel {
  position: absolute;
  top: 0; right: 0;
  width: 430px;
  max-width: 98vw;
  height: 100vh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #007ac229;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: ggbSlideIn 0.23s cubic-bezier(.61,.15,.44,1.11);
  border: 1.5px solid #007ac233;
  opacity: 1;
}
#zeigerdiagramm-close {
  background: none;
  border: none;
  color: #007ac2;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.17s;
}
#zeigerdiagramm-close:hover { opacity: 1; color: #ea4c23; }
#zeigerdiagramm-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 11px;
  min-height: 77vh;
  background: #fff;
}
@keyframes ggbSlideIn {
  from { right: -450px; opacity: 0.6; }
  to   { right: 0; opacity: 1; }
}





/* Converter Overlay & Panel */
#converter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2070; /* auf jeden Fall über anderen Panels */
  pointer-events: none;
}
#converter-overlay.active {
  display: block;
  pointer-events: auto;
}
#converter-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}
#converter-panel {
  position: absolute;
  top: 0; right: 0;
  width: 430px;
  max-width: 98vw;
  height: 100vh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #007ac229;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: ggbSlideIn 0.23s cubic-bezier(.61,.15,.44,1.11);
  border: 1.5px solid #007ac233;
  opacity: 1;
}
#converter-close {
  background: none;
  border: none;
  color: #007ac2;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.17s;
}
#converter-close:hover { opacity: 1; color: #ea4c23; }

#converter-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 11px;
  min-height: 77vh;
  background: #fff;
}

@keyframes ggbSlideIn {
  from { right: -450px; opacity: 0.6; }
  to   { right: 0; opacity: 1; }
}

@media (max-width: 650px) {
  #converter-panel {
    width: 99vw;
    max-width: 99vw;
    left: 1vw; right: unset;
    bottom: 0; top: unset;
    height: 78vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 34px #007ac223;
    animation: ggbMobileIn 0.23s cubic-bezier(.61,.15,.44,1.11);
  }
  @keyframes ggbMobileIn {
    from { bottom: -88vh; opacity: 0.4;}
    to   { bottom: 0; opacity: 1;}
  }
}



/* ==============================
   Falstad Overlay & Panel
   ============================== */
#falstad-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2080;
  pointer-events: none;
}
#falstad-overlay.active {
  display: block;
  pointer-events: auto;
}
#falstad-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}
#falstad-panel {
  position: absolute;
  top: 0; right: 0;
  width: 520px;
  min-width: 340px;
  max-width: 98vw;
  height: 100vh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #00890033;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: falstadSlideIn 0.25s cubic-bezier(.61,.15,.44,1.11);
  border: 1.5px solid #1ea12833;
  opacity: 1;
  overflow: hidden;
  transition: width 0.19s cubic-bezier(.61,.15,.44,1.11);
}
@keyframes falstadSlideIn {
  from { right: -540px; opacity: 0.5; }
  to   { right: 0; opacity: 1; }
}
#falstad-close {
  background: none;
  border: none;
  color: #1ea128;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.66;
  transition: opacity 0.15s;
  z-index: 2;
  position: absolute;
  top: 0; right: 0;
}
#falstad-close:hover { opacity: 1; color: #ea4c23; }

#falstad-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 0 0 11px 11px;
  min-height: 77vh;
  background: #fff;
}

/* Resize-Handle */
#falstad-resize-handle {
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 11px;
  cursor: ew-resize;
  z-index: 3;
  background: linear-gradient(to right, #ddffdd88 55%, transparent 100%);
  border-right: 2px solid #aee6b3;
  border-radius: 19px 0 0 19px;
}

@media (max-width: 650px) {
  #falstad-panel {
    width: 99vw !important;
    max-width: 99vw;
    left: 1vw; right: unset;
    bottom: 0; top: unset;
    height: 78vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 34px #1ea12822;
    animation: falstadMobileIn 0.24s cubic-bezier(.61,.15,.44,1.11);
    min-width: 95vw;
  }
  @keyframes falstadMobileIn {
    from { bottom: -88vh; opacity: 0.4;}
    to   { bottom: 0; opacity: 1;}
  }
  #falstad-resize-handle { display: none; }
}


/* ==============================
   Periodensystem
   ============================== */

#periodensystem-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2050;
  pointer-events: none;
}
#periodensystem-overlay.active {
  display: block;
  pointer-events: auto;
}
#periodensystem-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}

/* Haupt-Panel */
#periodensystem-panel {
  position: absolute;
  top: 0; right: 0;
  width: 56vw;
  max-width: 100vw;
  min-width: 340px;
  height: 99vh;
  max-height: 100vh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #d69a2b40;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: psSlideIn 0.23s cubic-bezier(.61,.15,.44,1.11);
  border: 1.5px solid #c79d2d33;
  opacity: 1;
  overflow: hidden;
}
@keyframes psSlideIn {
  from { right: -450px; opacity: 0.6; }
  to   { right: 0; opacity: 1; }
}

#periodensystem-close {
  background: none;
  border: none;
  color: #b08113;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.17s;
}
#periodensystem-close:hover { opacity: 1; color: #ea4c23; }

#periodensystem-iframe {
  flex: 1;
  width: 100%;
  min-width: 320px;
  max-width: 100vw;
  height: 100%;
  border: none;
  border-radius: 11px;
  background: #fff;
  box-sizing: border-box;
  display: block;
}

/* Responsive Mobile */
@media (max-width: 700px) {
  #periodensystem-panel {
    width: 99vw;
    left: 0;
    right: 0;
    top: unset;
    bottom: 0;
    height: 70vh;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -6px 34px #d69a2b33;
    animation: psMobileIn 0.24s;
    margin-top: 0;
    min-width: unset;
  }
  @keyframes psMobileIn {
    from { bottom: -75vh; opacity: 0.4;}
    to { bottom: 0; opacity: 1;}
  }
  #periodensystem-iframe {
    border-radius: 12px 12px 0 0;
    min-width: 0;
    height: 100%;
  }
}




/* ==============================
   Experience Balken
   ============================== */

.level-details-box {
  position: fixed;
  right: 90px;
  top: 38%;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 7px 28px 4px #007ac229;
  border-radius: 15px;
  border: 1.5px solid #007ac233;
  padding: 18px 22px;
  min-width: 210px;
  display: none;
  z-index: 2100;
  font-family: 'Montserrat', Arial, sans-serif;
  animation: levelSlideIn 0.18s cubic-bezier(.61,.15,.44,1.11);
}
@keyframes levelSlideIn {
  from { opacity: 0; right: 70px;}
  to { opacity: 1; right: 90px;}
}
.exp-details-card {
  color: #223;
  font-size: 1.01em;
}
.level-details-box b {
  color: #007ac2;
}




/* ==============================
   Gauß-Jordan Overlay & Panel
   ============================== */
#gausjordan-overlay,
#ebenenrechner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2050;
  pointer-events: none;
}
#gausjordan-overlay.active,
#ebenenrechner-overlay.active {
  display: block;
  pointer-events: auto;
}
#gausjordan-bg,
#ebenenrechner-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 30, 50, 0.21);
  backdrop-filter: blur(2.5px);
  z-index: 0;
  cursor: pointer;
  transition: background-color 0.25s;
}
#gausjordan-panel,
#ebenenrechner-panel {
  position: absolute;
  top: 0; right: 0;
  width: 430px;
  max-width: 98vw;
  height: 100vh;
  background: rgba(255,255,255,0.97);
  box-shadow: -7px 0 32px 3px #007ac229;
  border-radius: 19px 0 0 19px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  animation: ggbSlideIn 0.23s cubic-bezier(.61,.15,.44,1.11);
  border: 1.5px solid #007ac233;
  opacity: 1;
}
#gausjordan-close,
#ebenenrechner-close {
  background: none;
  border: none;
  color: #007ac2;
  font-size: 2em;
  align-self: flex-end;
  margin: 7px 13px 0 0;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.17s;
}
#gausjordan-close:hover,
#ebenenrechner-close:hover { opacity: 1; color: #ea4c23; }
#gausjordan-iframe,
#ebenenrechner-iframe {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 11px;
  min-height: 77vh;
  background: #fff;
}

























/****** MERKSATZ-BOX *****/

.merksatz-box {
  background: linear-gradient(90deg, #e3f0fc 0%, #d3eefd 60%, #b7e6fb 100%);
  border-left: 6px solid #2186d4;
  border-radius: 0.8em 0.3em 0.8em 0.3em;
  padding: 1.1em 1.3em 1.1em 2.2em;
  margin: 1.5em 0 1.8em 0;
  box-shadow: 0 2px 12px rgba(33,134,212,0.10), 0 1px 2px rgba(80,120,150,0.10);
  font-size: 1.08em;
  color: #195484;
  position: relative;
  transition: box-shadow 0.18s;
}

.merksatz-box:hover {
  box-shadow: 0 4px 24px rgba(33,134,212,0.17), 0 1px 3px rgba(80,120,150,0.11);
}

.merksatz-box .merksatz-icon {
  position: static;
  left: 0.0em;
  top: 0.95em;
  font-size: 1.4em;
  filter: drop-shadow(0 1px 2px rgba(60,100,160,0.13));
  opacity: 0.98;
}

.merksatz-box ul {
  list-style: none;   
  margin: 0.1em 0 0.1em 1em;
  padding-left: 0; 
}

.merksatz-box li {
  margin: 0.22em 0;
  font-weight: 500;
  line-height: 1.3;
  padding-left: 0;        /* Optional: Kein zusätzlicher Abstand */
  position: relative;
}

.merksatz-box b,
.merksatz-box strong {
  color: #135796;
}

formel-erklaerung {
  font-size: 0.98em;
  color: #3e4a62;
  margin-top: 0.32em;
}
.vergleich-tabelle {
  width: 92%;
  margin: 1.2em auto 1.2em auto;
  border-collapse: collapse;
  background: #f8fbff;
  box-shadow: 0 1px 7px rgba(110,145,220,0.09);
}
.vergleich-tabelle th, .vergleich-tabelle td {
  border: 1px solid #badbf5;
  padding: 0.55em 1em;
  text-align: center;
  font-size: 1.09em;
}
.vergleich-tabelle th {
  background: #d6ecfd;
  color: #0d3d75;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 600px) {
  .merksatz-box {
    padding: 0.9em 0.7em 0.9em 2.2em;
    font-size: 0.98em;
  }
  .merksatz-box .merksatz-icon {
    top: 0.0em;
    left: -0.2em;
    font-size: 1.1em;
  }
}





/****** WERKZEUG *****/

    .checklist-progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.2em;
    }
    #progressText {
      font-size: 1.11em;
      font-weight: 500;
      color: #2080dd;
      letter-spacing: .03em;
    }
    .checklist-buttons {
      text-align: right;
      margin-bottom: 1em;
    }
    .checklist-buttons button {
      background: #1587ed;
      border: none;
      border-radius: 0.7em;
      color: #fff;
      padding: 0.42em 1.1em;
      font-size: 1em;
      margin-left: 0.5em;
      cursor: pointer;
      transition: background-colour 0.2s, color 0.2s;
      font-weight: 500;
      box-shadow: 0 2px 8px 0 rgba(21,135,237,0.07);
    }
    .checklist-buttons button:hover {
      background: #065aa7;
    }
    .checklist-category {
      margin-top: 1.3em;
      margin-bottom: 0.9em;
      font-size: 1.13em;
      color: #1587ed;
      font-weight: 700;
      letter-spacing: .04em;
      border-left: 4px solid #1587ed;
      padding-left: 0.6em;
      background: #f7fafd;
      border-radius: 0 0.4em 0.4em 0;
      box-shadow: 0 1px 2px 0 rgba(32,85,183,0.02);
    }
    .category-list {
      margin: 0 0 0.2em 0;
      padding: 0;
      list-style: none;
    }
    .category-list li {
      padding: 0.45em 0;
      font-size: 1.09em;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f1f3f7;
      transition: background-colour 0.13s;
    }
    .category-list li:last-child {
      border-bottom: none;
    }
    .pretty-checkbox {
      display: flex;
      align-items: center;
      cursor: pointer;
      user-select: none;
      width: 100%;
      padding: 0.16em 0.3em;
      border-radius: 0.5em;
      transition: background-colour 0.13s;
    }
    .pretty-checkbox:hover {
      background: #f0f7fc;
    }
    .pretty-checkbox input[type="checkbox"] {
      display: none;
    }
    .pretty-checkbox .checkmark {
      width: 1.22em;
      height: 1.22em;
      border: 2px solid #1587ed;
      border-radius: 0.35em;
      background: #fff;
      margin-right: 1em;
      position: relative;
      transition: border 0.19s;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .pretty-checkbox input[type="checkbox"]:checked + .checkmark {
      background: linear-gradient(120deg,#1587ed,#57c7e4 80%);
      border: 2px solid #1587ed;
    }
    .pretty-checkbox .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    .pretty-checkbox input[type="checkbox"]:checked + .checkmark:after {
      display: block;
      left: 0.33em;
      top: 0.08em;
      width: 0.32em;
      height: 0.63em;
      border: solid #fff;
      border-width: 0 0.18em 0.18em 0;
      transform: rotate(45deg);
      animation: checkFadeIn 0.2s;
    }
    @keyframes checkFadeIn {
      from { opacity: 0; transform: scale(0.8) rotate(45deg);}
      to   { opacity: 1; transform: scale(1) rotate(45deg);}
    }
    .tool-label {
      font-size: 1em;
      transition: color 0.16s;
      flex: 1;
    }
    .pretty-checkbox input[type="checkbox"]:checked ~ .tool-label {
      color: #3bba78;
      text-decoration: line-through;
    }
    @media print {
      .checklist-buttons, .checklist-progress { display: none !important; }
      .checklist-container {
        box-shadow: none !important;
        background: #fff !important;
        border: none !important;
        margin: 0;
      }
      .checklist-category { color:#1a1a1a !important; background:#fff !important; border-left: 0.3em solid #aaa !important;}
    }



/****** Ablauf Lehrlingswettbewerb *****/


    .ablauf-panel {
  background: linear-gradient(90deg, #e9f5fe 70%, #f5fbff 100%);
  border-radius: 18px;
  box-shadow: 0 4px 20px #1c8fd33d;
  border-left: 7px solid #1899e3;
  padding: 2.2em 2.1em 1.6em 2.2em;
  margin: 1.3em 0 1.5em 0;
  position: relative;
  max-width: 680px;
}

.ablauf-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.4em;
}
.ablauf-icon {
  font-size: 2.25em;
  margin-right: 0.75em;
  color: #1899e3;
  filter: drop-shadow(0 1px 4px #8bd2fc22);
}
.ablauf-title {
  font-size: 1.45em;
  font-weight: 800;
  color: #1899e3;
  letter-spacing: 0.01em;
}
.ablauf-liste {
  margin: 0 0 1.3em 0.5em;
  padding-left: 1.2em;
  font-size: 1.13em;
}
.ablauf-liste li {
  margin-bottom: 0.8em;
  line-height: 1.5;
  font-family: 'Roboto', Arial, sans-serif;
}
.ablauf-hint {
  font-size: 0.97em;
  color: #147fae;
  font-style: italic;
}
.ablauf-tipp {
  background: linear-gradient(90deg, #d5f1ff 80%, #f7fdff 100%);
  border-left: 5px solid #1899e3;
  padding: 1em 1.3em;
  border-radius: 9px;
  font-size: 1.08em;
  color: #206995;
  margin-top: 0.5em;
  box-shadow: 0 1px 9px #1c8fd31a;
}
.ablauf-bunt {
  color: #007ac2;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .ablauf-panel {
    padding: 1.2em 0.7em 1.2em 1em;
    font-size: 1em;
  }
  .ablauf-header {
    font-size: 1.05em;
  }
  .ablauf-title {
    font-size: 1.1em;
  }
}

.wettbewerb-kachel {
  max-width: 700px;
  margin: 2em auto;
  border-radius: 24px;
  background: linear-gradient(90deg, #eaf6ff 80%, #fafdff 100%);
  box-shadow: 0 7px 32px #53cbf126, 0 1px 4px #1899e315;
  border-left: 7px solid #1899e3;
  padding: 0;
  transition: box-shadow 0.25s;
}
.wk-head {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 24px 24px 0 0;
  padding: 1.6em 2.2em 1.1em 2.2em;
  font-size: 1.19em;
  position: relative;
  background: #deeffc;
  transition: background-colour 0.18s;
  user-select: none;
}
.wk-head:hover { background: #d0e8fc; }
.wk-icon {
  font-size: 2.2em;
  margin-right: 1em;
  color: #007ac2;
  filter: drop-shadow(0 2px 6px #a6d8fa44);
}
.wk-title {
  font-weight: 800;
  color: #007ac2;
  letter-spacing: 0.01em;
  font-size: 1.4em;
  flex: 1;
}
.wk-arrow {
  font-size: 1.5em;
  margin-left: 1.2em;
  color: #0095e5;
  transition: transform 0.24s cubic-bezier(.62,.15,.44,1.11);
}
.wk-head.open .wk-arrow { transform: rotate(180deg); }

.wk-content {
  padding: 1.1em 2.6em 2.0em 3.5em;
  font-size: 1.14em;
  animation: kachelFadeIn 0.55s;
  display: none;
}
@keyframes kachelFadeIn {
  from { opacity: 0; transform: translateY(-30px);}
  to   { opacity: 1; transform: translateY(0);}
}
.wk-content ol {
  margin: 0 0 1.3em 0;
  padding-left: 1.1em;
}
.wk-content li {
  margin-bottom: 0.8em;
  line-height: 1.5;
}
.wk-hint {
  font-size: 0.97em;
  color: #147fae;
  font-style: italic;
}
.wk-tipp {
  background: linear-gradient(90deg, #d6edfa 80%, #f6fcff 100%);
  border-left: 5px solid #007ac2;
  padding: 0.95em 1.3em;
  border-radius: 13px;
  font-size: 1.09em;
  color: #206995;
  margin-top: 0.9em;
  margin-left: -1.1em;
  box-shadow: 0 2px 12px #1899e30c;
}
.wk-bunt {
  color: #007ac2;
  font-weight: 700;
  letter-spacing: 0.01em;
}
@media (max-width: 700px) {
  .wettbewerb-kachel {
    padding: 0;
    margin: 1em 0.1em;
  }
  .wk-head { padding: 1.2em 1em 1em 1.1em; font-size: 1.08em; }
  .wk-content { padding: 1.1em 1.3em 1.2em 1.6em; font-size: 1.03em;}
}


/* Ablauf-Card im Card-Stil, extra modern */
.ablauf-kachel-grid {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5em;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.ablauf-flip-card {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 350px;
  height: 170px;
  margin-bottom: 1.5em;
  border-radius: 22px;
  background: none;
  box-shadow: 0 7px 32px #53cbf122;
  position: relative;
  cursor: pointer;
  perspective: 1200px;
  box-sizing: border-box;
  transition: box-shadow 0.22s;
  border: none;
}

.ablauf-flip-inner {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 22px;
  transition: transform 0.6s cubic-bezier(.52,.1,.28,.95);
  transform-style: preserve-3d;
}

.ablauf-flip-card.flipped .ablauf-flip-inner {
  transform: rotateY(180deg);
}

.ablauf-flip-front, .ablauf-flip-back {
  position: absolute;
  width: 100%; height: 100%;
  backface-visibility: hidden;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.16s;
  background: #fff;
  font-size: 1.09em;
  padding: 0 1.1em;
  box-sizing: border-box;
}

.ablauf-flip-front {
  color: #1172bd;
  border: 0.5px solid #e2eefd;
}

.ablauf-flip-emoji {
  font-size: 2.2em;
  margin-bottom: 0.38em;
  display: block;
}

.ablauf-flip-title {
  font-weight: 700;
  color: #0070d1;
  font-size: 1.1em;
  letter-spacing: 0.01em;
  margin-top: 0.05em;
}

.ablauf-flip-back {
  background: linear-gradient(90deg, #e3f3fe 80%, #fafdff 100%);
  color: #2175b6;
  border: 0.5px solid #b9def7;
  padding: 1.0em 0.5em 0.7em 0.5em;
  text-align: left;
  transform: rotateY(180deg);
  box-shadow: 0 2px 22px #b7dbfa16;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.96em; /* etwas kleiner für mehr Inhalt */
  line-height: 1.32;
}

.ablauf-flip-back-title {
  font-weight: bold;
  font-size: 1.07em;
  color: #1172bd;
  margin-bottom: 0.28em;
  text-align: center;
  width: 100%;
}

.ablauf-flip-back-text {
  width: 100%;
  word-break: break-word;
  text-align: left;
  color: #2175b6;
  font-size: 0.97em;
}

@media (max-width: 900px) {
  .ablauf-kachel-grid { gap: 1em; }
  .ablauf-flip-card { max-width: 99vw; }
}
@media (max-width: 700px) {
  .ablauf-flip-card, .ablauf-flip-inner { height: 120px; }
  .ablauf-flip-front, .ablauf-flip-back { font-size: 0.95em;}
  .ablauf-flip-emoji { font-size: 1.6em;}
}


.material-tabelle-box {
  background: linear-gradient(90deg, #f8fbff 80%, #eaf6ff 100%);
  border-radius: 16px;
  box-shadow: 0 2px 14px #1c8fd31a;
  padding: 1.6em 1.1em 1.5em 1.1em;
  margin: 1.1em 0 1.6em 0;
  max-width: 410px;
}

.material-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: none;
  font-size: 1.09em;
  margin-bottom: 0.8em;
}

.material-table th, .material-table td {
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1.5px solid #d6eafd;
}

.material-table th {
  background: #e3f2fd;
  color: #007ac2;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-bottom: 2.5px solid #b3cde0;
  font-size: 1.06em;
}

.material-table tbody tr {
  transition: background-color 0.18s;
}

.material-table tbody tr:nth-child(even) {
  background: #f5fbfe;
}

.material-table td {
  color: #2c3e50;
  border-bottom: 1px solid #eaf4fb;
}

.material-link {
  color: #007ac2;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.07em;
  display: inline-block;
  margin-top: 0.5em;
  transition: color 0.16s;
}
.material-link:hover {
  color: #0e54b2;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .material-tabelle-box {
    padding: 1.1em 0.2em 1.1em 0.2em;
    max-width: 98vw;
    font-size: 0.99em;
  }
  .material-table th, .material-table td {
    padding: 10px 7px;
  }
}



/* FRAGEN im Lehrlingswettbewerb*/


.fragen-header {
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e0f4ff 80%, #eaf6ff 100%);
  border-radius: 11px 11px 0 0;
  padding: 1.1em 1.5em 1em 1.6em;
  margin-bottom: 1.1em;
  gap: 1.1em;
  border-left: 7px solid #6c64c7;
  box-shadow: 0 2px 8px #b3e8ff11;
}
.fragen-icon {
  font-size: 2.1em;
  color: #6c64c7;
  filter: drop-shadow(0 2px 4px #aab4fa33);
}
.fragen-title {
  font-size: 1.35em;
  font-weight: 800;
  color: #2875c2;
  letter-spacing: 0.01em;
}

.fragen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4em;
  margin: 0 0 1.6em 0;
}

.frage-card {
  background: linear-gradient(90deg, #f6fafd 75%, #eaf6ff 100%);
  border-radius: 13px;
  box-shadow: 0 2px 12px #b7dbfa19;
  padding: 1.2em 1.1em 0.95em 1.1em;
  color: #23497a;
  font-size: 1.06em;
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  border-left: 4px solid #6c64c7;
  position: relative;
  transition: box-shadow 0.16s, border-color 0.16s;
  min-height: 65px;
}
.frage-card:hover {
  box-shadow: 0 4px 18px #6c64c74c;
  border-color: #007ac2;
  background: linear-gradient(90deg, #e6f6ff 80%, #d5eeff 100%);
}
.q-icon {
  font-size: 1.23em;
  color: #6c64c7;
  margin-bottom: 0.1em;
}
.frage-hint {
  display: block;
  color: #1b91b8;
  font-size: 0.98em;
  margin-top: 0.2em;
  font-style: italic;
}

.tipp-banner {
  margin-top: 2em;
  background: linear-gradient(90deg, #e0f7fa 85%, #fafdff 100%);
  border-left: 7px solid #00bcd4;
  border-radius: 8px;
  font-size: 1.10em;
  color: #147387;
  padding: 1em 1.1em;
  font-weight: 500;
  box-shadow: 0 1px 8px #00bcd422;
  display: flex;
  align-items: center;
  gap: 0.85em;
}
.tipp-emoji {
  font-size: 1.45em;
  margin-right: 0.12em;
}

@media (max-width: 700px) {
  .fragen-header { padding: 0.7em 0.5em 0.7em 0.8em; font-size: 0.96em; }
  .fragen-title { font-size: 1.07em; }
  .fragen-grid { grid-template-columns: 1fr; gap: 0.8em; }
  .frage-card { font-size: 0.99em; padding: 0.7em 0.6em 0.7em 0.7em; min-height: 35px;}
  .tipp-banner { font-size: 0.97em; padding: 0.7em 0.7em; }
}













.tabs-container {
  display: flex;
  gap: 1em;
  margin-bottom: 1.3em;
  justify-content: flex-start;
}
.tab-btn {
  background: #eaf6ff;
  border: none;
  border-bottom: 4px solid #eaf6ff;
  font-size: 1.14em;
  font-weight: 700;
  color: #007ac2;
  border-radius: 7px 7px 0 0;
  padding: 0.8em 1.4em;
  cursor: pointer;
  transition: background-colour 0.17s, color 0.17s, border-color 0.17s;
}
.tab-btn.active {
  background: #007ac2;
  color: #fff;
  border-bottom: 4px solid #007ac2;
}
.tab-content {
  margin-top: 0;
  margin-bottom: 2em;
}
.fragen-accordion, .rechnen-accordion {
  margin-top: 1.1em;
}
.frage-acc-card, .rechnen-acc-card {
  background: #fafdff;
  border-radius: 14px;
  box-shadow: 0 2px 14px #a6d8fa13;
  margin-bottom: 1.2em;
  border-left: 6px solid #007ac2;
  transition: box-shadow 0.18s;
}
.frage-acc-head, .rechnen-acc-head {
  font-size: 1.13em;
  font-weight: 700;
  padding: 1em 1.1em;
  cursor: pointer;
  color: #1568b2;
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: linear-gradient(90deg,#e3f3fe 80%, #fafdff 100%);
  border-radius: 14px 14px 0 0;
  user-select: none;
  transition: background-colour 0.16s, color 0.16s;
}
.frage-acc-card.open, .rechnen-acc-card.open {
  box-shadow: 0 7px 26px #53cbf133;
}
.frage-acc-content, .rechnen-acc-content {
  padding: 1em 1.3em 1.2em 2.2em;
  display: none;
  color: #214067;
  background: #fff;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid #eaf6ff;
  font-size: 1.06em;
}
.frage-acc-card.open .frage-acc-content,
.rechnen-acc-card.open .rechnen-acc-content { display: block; }
.frage-acc-arrow {
  font-size: 1.14em;
  margin-right: 0.3em;
  color: #007ac2;
  transition: transform 0.16s;
}
.frage-acc-card.open .frage-acc-arrow { transform: rotate(90deg);}




/* Stolpersteine im Wettbewerb*/

.fehlerquellen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
  margin-top: 6px;
}

.fehler-card {
  background: #f8fcff;
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(60,140,200,0.07);
  padding: 22px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1.5px solid #e1effa;
  transition: transform 0.18s;
}
.fehler-card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 28px rgba(32,100,180,0.12);
  border-color: #99d0fa;
}
.fehler-emoji {
  font-size: 2em;
  margin-bottom: 8px;
}
.fehler-title {
  font-weight: bold;
  font-size: 1.09em;
  margin-bottom: 5px;
  color: #205285;
}
.fehler-text {
  font-size: 1.03em;
  color: #303645;
  margin-bottom: 3px;
  letter-spacing: 0.01em;
}

.fehler-tip-card {
  background: #e3fceb;
  color: #117d35;
  border-radius: 11px;
  padding: 14px 18px;
  font-weight: bold;
  margin-top: 8px;
  font-size: 1.08em;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(24,120,85,0.05);
}
.fehler-tip-text {
  display: inline;
}






/* Quizz im Lehrlingswettbewerb*/

.scq-quiz-wrap {
  max-width: 500px;
  margin: 38px auto 28px auto;
  background: linear-gradient(120deg, #f8fbff 80%, #e5f4fd 100%);
  border-radius: 20px;
  box-shadow: 0 6px 28px rgba(40,90,170,0.13);
  padding: 32px 22px 28px 22px;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.scq-setup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  justify-content: center;
  flex-wrap: wrap;
}
.scq-setup label { font-weight: 600; font-size: 1.12em; color: #2476ba; }
.scq-setup select, .scq-setup button {
  padding: 7px 13px;
  border-radius: 8px;
  border: 1.5px solid #b5dcfa;
  font-size: 1.07em;
  background: #f1f9fe;
  transition: border .2s;
}
.scq-setup button {
  background: linear-gradient(90deg, #2695fc 70%, #43e7f0 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px #b6dff6ad;
}
.scq-setup button:hover { background: linear-gradient(90deg, #2476ba 80%, #28bdef 100%); }

.scq-fragenum {
  color: #3ca2ed;
  margin-bottom: 13px;
  font-size: 1.07em;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.scq-card {
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 2px 10px rgba(33,80,130,0.08);
  padding: 24px 18px 18px 18px;
  margin-bottom: 18px;
}
.scq-frage {
  font-size: 1.18em;
  margin-bottom: 13px;
  font-weight: 700;
  color: #20282f;
  letter-spacing: 0.01em;
}
.scq-ant-list { margin-bottom: 16px; }
.scq-ant {
  background: #f4faff;
  border-radius: 9px;
  margin: 9px 0;
  padding: 10px 12px 10px 10px;
  border: 2px solid #e3ecf8;
  transition: border 0.14s, background-colour 0.14s;
  cursor: pointer;
  font-size: 1.09em;
  display: flex;
  align-items: center;
}
.scq-ant input[type="radio"] {
  margin-right: 11px;
  accent-color: #2695fc;
  transform: scale(1.2);
}
.scq-ant:hover, .scq-ant input:focus-visible + label {
  border: 2px solid #36befc;
  background: #e7f6ff;
}
.scq-btn,
.scq-next-btn {
  background: linear-gradient(90deg, #2695fc 70%, #43e7f0 100%);
  color: #fff;
  border: none;
  border-radius: 9px;
  padding: 10px 22px;
  margin-top: 14px;
  font-size: 1.13em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 9px #b6dff6ad;
  transition: background-colour .19s, box-shadow .19s;
  letter-spacing: 0.01em;
  min-width: 155px;
  display: inline-block;
}
.scq-btn:hover, .scq-next-btn:hover { background: linear-gradient(90deg, #2476ba 80%, #28bdef 100%); }
#scq-feedback { margin-top: 18px; min-height: 38px; font-size: 1.09em;}
.scq-richtig { color: #14b06b; font-weight: bold; font-size: 1.11em; }
.scq-falsch { color: #e13a44; font-weight: bold; font-size: 1.11em; }
.scq-end {
  text-align: center;
  font-size: 1.15em;
  margin-top: 19px;
  padding: 16px 10px 5px 10px;
  color: #205285;
}
.scq-end button {
  margin-top: 14px; background: #35b67c; color: #fff; border-radius: 8px;
  padding: 9px 24px; font-size: 1.09em; border: none; cursor: pointer; font-weight: 600;
  box-shadow: 0 2px 8px #b1f2ce50;
}
.scq-end button:hover { background: #117d35; }
@media (max-width: 650px) {
  .scq-quiz-wrap { padding: 11vw 2vw; }
  .scq-card { padding: 6vw 2vw; }
}







 .legende {
      margin-bottom: 8px;
      font-size: 17px;
      display: flex;
      gap: 25px;
      align-items: center;
      justify-content: center;
    }
    .sinus1 { color: #41caff; font-weight: bold; }
    .sinus2 { color: #ff3777; font-weight: bold; }
    .slider-box {
      margin: 15px auto 0 auto;
      text-align: center;
      color: #fff;
    }
    .slider-box label {
      font-weight: bold;
      margin-right: 7px;
    }




.expbar-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 2000;
  cursor: pointer;
  width: 330px;
  user-select: none;
}

.expbar-bg {
  position: relative;
  height: 30px;
  background: linear-gradient(90deg, #26334d 80%, #22335d 100%);
  border-radius: 14px;
  box-shadow: 0 2px 10px #2538722b;
  overflow: hidden;
  border: 2px solid #86b2ec;
}

.expbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7bd9fe 30%, #0fa9f6 100%);
  border-radius: 14px 0 0 14px;
  transition: width 0.44s cubic-bezier(.86,.13,.56,.98);
  box-shadow: 0 0 16px #7bd9fe88;
}

.expbar-lvl {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-weight: bold;
  font-size: 1.16em;
  letter-spacing: 1.5px;
  text-shadow: 0 2px 8px #1a2539;
}

.expbar-pct {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffe155;
  font-weight: 600;
  font-size: 1em;
  text-shadow: 0 2px 8px #2e3442;
}

.expbar-details {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  background: #f8fcff;
  border: 1.5px solid #7bd9fe;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 18px #53cbf13b;
  padding: 0.8em 1.3em;
  font-size: 1em;
  min-width: 270px;
  color: #2c466f;
  animation: expDropIn 0.21s cubic-bezier(.48,.08,.57,1.05);
  z-index: 5;
}
@keyframes expDropIn {
  from { opacity: 0; transform: translateY(-8px);}
  to   { opacity: 1; transform: translateY(0);}
}

.expbar-container:hover .expbar-bg {
  box-shadow: 0 6px 20px #4cb3ec4a;
  border-color: #33c5fc;
}
.expbar-container:active .expbar-bg {
  border-color: #138de7;
}

/* Responsive: mobil wandert Bar nach oben als normale Box */
@media (max-width: 600px) {
  .expbar-container {
    position: static;
    width: 98vw;
    max-width: 380px;
    margin: 1.2em auto 0 auto;
  }
}




.sidebar-top {
  position: fixed;
  top: 15px;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 1200;
}

.login-info-box {
  background: rgba(44,162,230,0.21);
  color: #fff;
  font-size: 1em;
  padding: 8px 15px;
  border-radius: 11px;
  font-weight: 600;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,122,194,0.13);
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.logout-btn {
  margin-left: 15px;
  background: #fff;
  color: #007ac2;
  padding: 6px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1em;
  transition: background-colour 0.2s, color 0.2s;
}

.logout-btn:hover {
  background: #53cbf1;
  color: #0a3553;
}

.search-container {
  background: rgba(255,255,255,0.33);
  backdrop-filter: blur(2.5px);
  border-radius: 10px;
  padding: 7px 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.11);
  display: flex;
  align-items: center;
  min-width: 190px;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

#searchInput {
  width: 90px;
  padding: 6px 24px 6px 9px;
  font-size: 0.98em;
  border-radius: 5px;
  border: 1px solid #ccc;
  outline: none;
  font-family: 'Roboto', sans-serif;
  background: #fff;
  color: #007ac2;
}

#clearSearch {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #888;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  z-index: 2;
}

#prevResult, #nextResult {
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 7px;
  margin-left: 2px;
  cursor: pointer;
  font-size: 0.82rem;
}

#prevResult:hover, #nextResult:hover {
  background: #0056b3;
}

/* Responsive Anpassung (mobil) */
@media (max-width: 600px) {
  .sidebar-top {
    top: 7px;
    right: 7px;
    gap: 7px;
  }
  .login-info-box, .search-container {
    font-size: 0.93em;
    padding: 6px 8px;
    border-radius: 7px;
  }
  #searchInput { width: 72px; font-size: 0.93em; }
}





.challenge-grid{
  display:flex; gap:14px; align-items:flex-start; margin-top:10px;
  flex-wrap:wrap;
}
.challenge-col{
  flex:1 1 360px; background:#fff; border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.06); padding:12px 14px;
}
.challenge-col h3{ margin:0 0 8px; color:#0d4e71; font-weight:700; }
.subhead{ margin:6px 0 6px; font-weight:600; color:#2b5671; }
.leaderboard{ list-style:none; padding:0; margin:0; }
.leaderboard li{
  display:flex; justify-content:space-between; gap:10px;
  padding:6px 10px; border:1px solid #e6eef6; border-radius:8px; margin:6px 0;
}
.leaderboard li:hover{ background:#f7fbff; }
.leaderboard .name{ font-weight:600; }
.leaderboard .pts{ color:#244; }
.leaderboard .muted{ color:#667; justify-content:flex-start; border-style:dashed; }
@media (max-width: 860px){
  .challenge-grid{ flex-direction:column; }
}




/* Overlays */
#ms-breath-overlay { position:fixed; inset:0; display:none; }
#ms-breath-overlay.active { display:block; }
#ms-breath-bg { position:absolute; inset:0; background:rgba(0,0,0,.35); }
#ms-breath-panel { position:absolute; right:0; top:0; bottom:0; width:min(560px,92%); background:#fff;
  padding:14px 16px; box-shadow:-6px 0 18px rgba(0,0,0,.15); display:flex; flex-direction:column; }
#ms-breath-close { position:absolute; right:10px; top:10px; border:none; background:transparent; font-size:1.1em; cursor:pointer; }
#ms-breath-circle { width:180px; height:180px; border-radius:50%; margin:8px auto 0; background:radial-gradient(circle at 30% 30%, #e8f2ff, #cfe6ff);
  transform: scale(var(--fromScale,1)); }
@keyframes msBreath { from{ transform:scale(var(--fromScale)); } to{ transform:scale(var(--toScale)); } }

/* Stress Heatmap & Sparkline */
.ms-heat { display:flex; gap:4px; align-items:center; margin:8px 0; }
.ms-heat-b { width:18px; height:14px; border-radius:3px; background:#e9eef9; }
.ms-heat-b.on { background: var(--heat-color, #5ca0ff); }
.ms-spark-wrap { margin-top:6px; height:40px; }
#ms-spark { width:100%; height:40px; color:#5ca0ff; }

/* DnD */
.ms-columns { display:flex; gap:14px; flex-wrap:wrap; }
.ms-col { flex:1 1 320px; }
.ms-col-title { font-weight:700; margin:6px 0; }
.ms-dropzone { min-height:64px; padding:8px; border:2px dashed #bcd1f3; border-radius:8px; background:#f7faff; }
.ms-dropzone.over { background:#eef5ff; border-color:#7fb0ff; }
.ms-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 8px; margin:6px; border-radius:999px; background:#eaf2ff; border:1px solid #b6d3ff; cursor:grab; }
.ms-chip:active { cursor:grabbing; }
.ms-chip .ms-x { border:none; background:transparent; cursor:pointer; font-size:1.05em; line-height:1; }

/* Inputs */
.ms-input { width:100%; margin:.25em 0; padding:.45em .6em; border:1px solid #cfd8ea; border-radius:6px; }


/* ===== Mindset Interaktiv – dezente Optik (scoped) ===== */
#mindset-interaktiv .accordion-button{
  background:#0b6aa2; color:#fff; border-radius:10px; margin-bottom:8px;
}
#mindset-interaktiv .accordion-button:hover{ background:#0f7fbe; }
#mindset-interaktiv .accordion-button.active,
#mindset-interaktiv .accordion-button[aria-expanded="true"]{
  background:#ffffff; color:#0b6aa2;
  border:1px solid #cfe8fb; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
#mindset-interaktiv .accordion-button.active + .accordion-content,
#mindset-interaktiv .accordion-button[aria-expanded="true"] + .accordion-content{
  background:#fff; border:1px solid #e6eff7;
}

#mindset-interaktiv .accordion-content{
  background:#fff; color:#223;
  border:1px solid #e6eff7; border-radius:0 0 12px 12px; box-shadow:none;
}

#mindset-interaktiv .thema-header{
  background:none; box-shadow:none;
  border-left:4px solid #0b6aa2; color:#0b6aa2;
}

#mindset-interaktiv .wirkung-card{
  background:#fff; border:1px solid #e6eff7; box-shadow:none;
}

#mindset-interaktiv .info-box{
  background:#f6fbff; border-left:4px solid #5aa9e6;
}

/* Heat + Sparkline dezenter & klar */
#mindset-interaktiv .ms-heat-b{ background:#eef3f8; }
#mindset-interaktiv #ms-spark{ color:#0ea5e9; }       /* Linienfarbe */
#mindset-interaktiv #ms-spark path{ stroke-linecap:round; }

/* Slider & Inputs etwas moderner */
#mindset-interaktiv input[type="range"]{ width:100%; accent-color:#0ea5e9; }
#mindset-interaktiv .ms-input{ border:1px solid #d8e3ee; }


/* =========================================================
   MOBILE-COMPACT PACK  —  Paste this AFTER your existing CSS
   Ziel: auf Smartphones (<= 700px) alles kleiner & kompakter
   Du kannst die Grundgröße unten über html{font-size: …} feintrimmen
   ========================================================= */

@media (max-width: 900px) {
  html { font-size: 15px; } /* leichte Verkleinerung auf Tablets */
}
@media (max-width: 700px) {
  html { font-size: 13.5px; } /* Haupthebel für Telefone */
  body { line-height: 1.35; -webkit-text-size-adjust: 100%; }
  main { padding: 1rem !important; }
  section { padding: 0.7rem !important; }
  h1 { font-size: 1.18rem !important; margin: 0.6rem 0 !important; }
  h2 { font-size: 1.02rem !important; margin-top: 1.2rem !important; }
  h3 { font-size: 0.96rem !important; margin-top: 0.9rem !important; }
  p, li, label, summary { font-size: 0.96rem !important; }

  /* HERO */
  .hero { min-height: 200px !important; }
  .hero-content { max-width: 520px !important; padding: 1.1rem .7rem !important; }
  .hero h1 { font-size: 1.22rem !important; letter-spacing: .4px !important; margin-bottom: .25em !important; }
  .slogan { font-size: 0.92rem !important; margin-bottom: 0.8em !important; }

  /* NAV */
  .main-nav ul { gap: .4rem !important; max-width: 520px !important; }
  .main-nav a { font-size: 0.93rem !important; padding: .42em .8em !important; border-radius: 6px !important; }

  /* GRID / CARDS */
  .grid { grid-template-columns: 1fr !important; gap: .8em !important; margin: 1.1em auto 0 !important; width: 96vw !important; }
  .card { padding: 1em .85em .75em .85em !important; border-radius: 12px !important; min-height: 130px !important; margin: .6em 0 !important; }
  .card h2 { font-size: .96em !important; padding: .6em .7em !important; margin: 0 -.6em .6em -.6em !important; border-radius: 7px 7px 0 0 !important; }

  /* HEADER-BALKEN AUF INNENSEITEN */
  .header { padding: 1.1rem 0 !important; min-height: 110px !important; }
  .header h1 { font-size: 1.18rem !important; margin: .4rem 0 !important; }

  /* ACCORDION / DETAILS */
  .accordion-button { font-size: 0.98rem !important; padding: .6em .75em !important; border-radius: 7px !important; }
  .accordion-content { font-size: 0.95rem !important; padding: .7em .8em !important; }
  details { font-size: 0.95rem !important; padding: 10px 12px !important; }
  details summary { font-size: 0.96rem !important; }

  /* LISTEN & TEXTBAUSTEINE */
  .nice-list li { margin-bottom: .45em !important; }
  .info-box, .warn-box, .merksatz-box, .checklist-card,
  .ablauf-panel, .wettbewerb-kachel, .quiz-card, .scq-quiz-wrap,
  .formel-box, .formel-card, .frage-acc-card, .rechnen-acc-card,
  .strom-fakt-card, .wirkung-card, .fehler-card, .fehler-tip-card,
  .material-tabelle-box {
    font-size: 0.95rem !important;
    padding: clamp(.6em, 2.5vw, 1em) !important;
  }

  /* FORMEL-KARTEN */
  .formel-grid { grid-template-columns: 1fr !important; gap: .7em !important; padding: 0 .2em !important; }
  .formel-card { font-size: .9em !important; }
  .formel-header { font-size: .92em !important; min-height: 2.6em !important; padding: .7em .8em !important; }
  .formel-math { font-size: 1em !important; }
  .einheitenbeweis { font-size: .9em !important; }

  /* QUIZ (beide Varianten) */
  .quiz-card .quiz-task, .scq-frage { font-size: 1.02em !important; }
  #userInput { font-size: 1em !important; padding: .5em .8em !important; }
  #checkBtn, .quiz-next-btn, .scq-btn, .scq-next-btn {
    font-size: .96em !important; padding: .45em 1em !important; border-radius: 6px !important;
  }
  .quiz-feedback { font-size: 1.02em !important; }
  .scq-ant { font-size: 1em !important; padding: .6em .7em !important; }

  /* TABs / Sektionen */
  .tab-btn { font-size: 1em !important; padding: .6em 1em !important; border-radius: 6px 6px 0 0 !important; }
  .frage-acc-content, .rechnen-acc-content { font-size: .98em !important; padding: .8em 1em !important; }

  /* TABELLE (Messbegriffe u.ä.) */
  .messbegriffe-table th, .messbegriffe-table td { padding: 10px 10px !important; font-size: .95em !important; }
  .messbegriffe-table td { font-size: .92em !important; }

  /* PDF-Viewer */
  .pdf-viewer { height: 55vw !important; min-height: 260px !important; }

  /* BILDER */
  .img-box img { max-width: 88% !important; border-radius: 10px !important; }
  .img-caption { font-size: .9em !important; }

  /* VARISTOR-KENNLINIE (SVG-Texte) */
  .vk-label { font-size: 12px !important; }
  .vk-axis, .vk-axis-v { font-size: 13px !important; }
  .vk-tooltip { font-size: 13px !important; min-width: 80px !important; padding: 6px 8px !important; }

  /* OHM-Pyramide (Buchstaben etwas kleiner) */
  .ohm-letter { font-size: 2.2em !important; }
  .ohm-letter.active.ohm-u,
  .ohm-letter.active.ohm-i,
  .ohm-letter.active.ohm-r { font-size: 2.4em !important; }

  /* STEPPER / CHECKLISTEN */
  .stepper-box { max-width: 480px !important; padding: .9em 1em !important; }
  .step-circle { width: 2em !important; height: 2em !important; font-size: 1.1em !important; }
  .step-text { font-size: 1em !important; }
  .checklist-title { font-size: 1.05em !important; }
  .checklist-list li { font-size: 0.98em !important; }

  /* VIDEO */
  .schulungs-video { width: 88% !important; max-width: 640px !important; border-radius: 10px !important; }

  /* OBERE RECHTSLEISTE (Login / Suche) */
  .sidebar-top { top: 6px !important; right: 6px !important; gap: 6px !important; }
  .login-info-box, .search-container { font-size: .9em !important; padding: 6px 8px !important; border-radius: 7px !important; }
  #searchInput { width: 62px !important; font-size: .9em !important; }

  /* CHALLENGE / LEADERBOARD */
  .challenge-col { padding: 10px 12px !important; }
  .leaderboard li { padding: 6px 8px !important; }

  /* EXP-BAR */
  .expbar-container { width: 96vw !important; max-width: 360px !important; margin: 1em auto 0 !important; position: static !important; }
  .expbar-bg { height: 26px !important; }
  .expbar-lvl, .expbar-pct { font-size: .9em !important; }

  /* ACCORDIONS (mehrfach definiert → letzte gewinnt) */
  .accordion-button.active,
  .accordion-button[aria-expanded="true"],
  .accordion-button:hover { filter: none !important; }

  /* KOMPONENTEN-GRIDs etwas enger */
  .strom-fakten-grid, .wirkungen-grid { gap: .8em !important; }
  .strom-fakt-card, .wirkung-card { font-size: .98em !important; padding: .7em .9em !important; }

  /* FRAGEN-BEREICH */
  .fragen-header { padding: .6em .7em !important; }
  .fragen-title { font-size: 1.05em !important; }
  .fragen-grid { grid-template-columns: 1fr !important; gap: .8em !important; }
  .frage-card { font-size: .98em !important; min-height: 40px !important; padding: .7em .7em .6em .7em !important; }

  /* TIPP-BANNER */
  .tipp-banner { font-size: .98em !important; padding: .7em .8em !important; }

  /* THEMA-HEADER */
  .thema-header { font-size: 1.02em !important; padding: .6em .8em !important; margin: 1.2em 0 .8em 0 !important; }

  /* FOOTER */
  footer { font-size: .92em !important; padding: .8em 0 !important; }

/* FLOATING SIDEBAR BUTTON DOCK */
.floating-sidebar { 
  bottom: max(10px, env(safe-area-inset-bottom)) !important; 
  right: 8px !important; 
  left: 8px !important; 
  gap: 2px !important;              /* vorher: 8px */
}
.floating-sidebar > .floating-panel-btn { 
  width: 34px !important;           /* vorher: 38px */
  height: 34px !important;          /* vorher: 38px */
  border-radius: 12px !important; 
}
  /* PANELS / OVERLAYS kompakter  Whiteboard, Zeiger, Converter, Falstad, Periodensystem, Tools) */
   #zeigerdiagramm-panel, #converter-panel, #falstad-panel, #periodensystem-panel,
   #gausjordan-panel, #ebenenrechner-panel {
    width: 99vw !important; left: 0 !important; right: 0 !important; border-radius: 14px 14px 0 0 !important;
  }
   #converter-panel, #zeigerdiagramm-panel, #gausjordan-panel, #ebenenrechner-panel { height: 70vh !important; }
  
  #falstad-panel { height: 70vh !important; min-width: unset !important; }
  #periodensystem-panel { height: 66vh !important; }

  /* iframes innen */
   #zeigerdiagramm-iframe, #converter-iframe, #falstad-iframe,
  #periodensystem-iframe, #gausjordan-iframe, #ebenenrechner-iframe {
    border-radius: 10px !important;
  }

  /* BREATH / MINDSET / SONSTIGE Toolings kleiner */
  #ms-breath-circle { width: 140px !important; height: 140px !important; }
  #mindset-interaktiv .accordion-button { font-size: .96rem !important; }
  #mindset-interaktiv .accordion-content { font-size: .95rem !important; }

  /* LEGENDEN / KLEINZEUG */
  .legende { font-size: .96rem !important; gap: 16px !important; }
}

/* Ultra-small phones */
@media (max-width: 380px) {
  html { font-size: 12.5px; }
  .main-nav a { padding: .36em .7em !important; }
  .hero { min-height: 180px !important; }
  .hero h1 { font-size: 1.12rem !important; }
  .slogan { font-size: 0.9rem !important; }
  .card { padding: .8em .75em !important; }
  .formel-header { font-size: .9em !important; }
}



/* Auth-Button im Sidebar-Stil */
.floating-sidebar .auth-btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #e3f1fc;
  border-radius: 50%;
  box-shadow: 0 3px 14px 2px #007ac22a;
  color: #0f5791;
  cursor: pointer;
  transition: box-shadow .18s, background-color .2s, transform .15s ease;
}

.floating-sidebar .auth-btn:hover {
  box-shadow: 0 8px 22px 4px #007ac24a;
  background: #eaf6fd;
  transform: scale(1.05);
}

/* Mobile-Version anpassen */
@media (max-width: 650px) {
  .floating-sidebar .auth-btn {
    width: 34px;      /* vorher: 42px */
    height: 34px;     /* vorher: 42px */
    border-radius: 12px;
  }
}
/* das LI selbst soll im Flex-Menu keinen Platz belegen */
.main-nav li.nav-auth{ width:0; padding:0; margin:0; list-style:none; }




html, body { margin:0; padding:0; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
img, iframe, video { max-width:100%; height:auto; }


/* 0) Sicherheit */
html, body { margin:0; padding:0; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }

/* 1) Seiten-Padding zentral steuern */
:root { --page-pad: 2rem; }
main { padding-inline: var(--page-pad); padding-block: var(--page-pad); }
@media (max-width:700px){ :root { --page-pad: 1rem; } }

/* 2) Hero full-bleed innerhalb von <main> */
.hero{
  margin-inline: calc(-1 * var(--page-pad));
  width: auto;
}

/* 3) Grid verursacht Overflow → 94vw raus */
.grid{
  width: 100%;                 /* statt: 94vw */
  max-width: 1250px;
  margin: 2.5em auto 0;
}

/* 4) Falls vorhanden: keine 100vw in Containern mit Padding */
.pdf-viewer{ width:100%; max-width:100%; }  /* statt max-width:100vw */






/* Accordion – mobil luftiger & ohne tiefe Einrückung */
@media (max-width: 700px) {
  .accordion-button{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important; /* Text links, Pfeil rechts */
    gap:.75em !important;
    width:100% !important;
    padding:.85em 1em !important;   /* mehr Innenabstand */
    font-size:1.02rem !important;
    line-height:1.35 !important;    /* Zeilen höher = weniger gequetscht */
    border-radius:8px !important;
    white-space:normal !important;  /* Text darf umbrechen */
  }
  .accordion-button .arrow{
    flex:0 0 auto;                  /* Pfeil fix, nicht umbrechen */
    margin-left:.5em;
  }
  .accordion-content{
    padding:.9em 1em !important;
    font-size:1rem !important;
  }

  /* Tiefe Einrückungen auf klein entfernen/ reduzieren */
  .accordion-content .accordion-button,
  .accordion-content .accordion-content,
  .accordion-content .accordion-content .accordion-button,
  .accordion-content .accordion-content .accordion-content{
    margin-left:0 !important;       /* statt 18/28/38px */
  }
  /* Wenn du leichte Staffelung möchtest, nimm z. B.: margin-left:8px */
}


/* Accordion: Titel immer links, Pfeil immer rechts – egal wie das HTML steht */
.accordion-button{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* NICHT space-between */
  gap: .6em;
  text-align: left !important;
}

.accordion-button .arrow{
  order: 2;           /* Pfeil ans Ende der Zeile */
  margin-left: auto;  /* schiebt den Pfeil nach rechts */
}

/* Offen: Pfeil drehen (optional) */
.accordion-button.active .arrow,
.accordion-button[aria-expanded="true"] .arrow{
  transform: rotate(90deg);
}








  /* Chatbot nur für das Quiz */
#exam-chat{
  /* Theme‑Variablen nur für das Quiz */
  --cb-brand:#007ac2;
  --cb-brand2:#53cbf1;
  --cb-ink:#0a3553;
  --cb-muted:#5b7286;
  --cb-ok:#2e7d32;
  --cb-bad:#c62828;
  --cb-bot:#f6fbff;
  --cb-me:#e8f4ff;

  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 34px rgba(0,122,194,.09), 0 2px 9px rgba(0,0,0,.03);
  border-left:7px solid var(--cb-brand);
  overflow:hidden;
}

/* Header */
#exam-chat .cb-head{
  background:linear-gradient(100deg,var(--cb-brand) 75%,var(--cb-brand2) 100%);
  color:#fff; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px;
}
#exam-chat .cb-title{ font-weight:700; letter-spacing:.3px; }
#exam-chat .cb-pill{
  margin-left:auto; background:rgba(255,255,255,.16);
  padding:6px 10px; border-radius:999px; font-size:.95rem;
}
#exam-chat .cb-actions{ display:flex; gap:8px; align-items:center; }
#exam-chat .cb-btn{
  border:0; border-radius:10px; padding:8px 12px; font-weight:700; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.06); background:#fff; color:var(--cb-brand);
}
#exam-chat .cb-btn.ghost{ background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.35); }
#exam-chat .cb-btn[disabled]{ opacity:.6; cursor:not-allowed; }

/* Segment-Schalter (Fragenanzahl) */
#exam-chat .cb-seg{ display:flex; gap:6px; background:rgba(255,255,255,.16); padding:4px; border-radius:999px; }
#exam-chat .cb-seg-btn{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:6px 10px; min-width:44px; font-weight:700; cursor:pointer;
}
#exam-chat .cb-seg-btn.active{ background:#fff; color:var(--cb-brand); border-color:#fff; }
#exam-chat .cb-seg[aria-disabled="true"] .cb-seg-btn{ opacity:.6; pointer-events:none; }

/* Fortschrittsleiste */
#exam-chat .cb-bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #eee; }
#exam-chat .cb-progress{ height:10px; width:100%; background:#eee; border-radius:999px; overflow:hidden; }
#exam-chat .cb-progress>span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cb-brand),var(--cb-brand2)); transition:width .35s ease; }

/* Chat-Log & Bubbles */
#exam-chat .cb-log{
  padding:16px; display:flex; flex-direction:column; gap:10px;
  max-height:70vh; overflow:auto; scroll-behavior:smooth;
  background:linear-gradient(180deg,#ffffff 0%, #f9fcff 100%);
}
#exam-chat .cb-msg{ display:flex; gap:10px; align-items:flex-end; }
#exam-chat .cb-msg.bot{ justify-content:flex-start; }
#exam-chat .cb-msg.me { justify-content:flex-end; }
#exam-chat .cb-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,var(--cb-brand) 60%,var(--cb-brand2));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 34px;
  box-shadow:0 2px 10px rgba(0,122,194,.18);
}
#exam-chat .cb-avatar.me{ background:#fff; color:var(--cb-brand); border:2px solid #e3f1fc; }
#exam-chat .cb-bubble{
  max-width:min(720px, 82%); padding:10px 12px; border-radius:14px;
  box-shadow:0 3px 14px rgba(0,0,0,.06);
  border:1px solid #e6eff8; position:relative; line-height:1.45;
}
#exam-chat .cb-msg.bot .cb-bubble{ background:var(--cb-bot); }
#exam-chat .cb-msg.me  .cb-bubble{ background:var(--cb-me); }
#exam-chat .cb-msg.bot .cb-bubble::before{
  content:""; position:absolute; left:-6px; bottom:10px;
  border-width:8px 8px 8px 0; border-style:solid;
  border-color:transparent #e6eff8 transparent transparent;
}
#exam-chat .cb-msg.me .cb-bubble::before{
  content:""; position:absolute; right:-6px; bottom:10px;
  border-width:8px 0 8px 8px; border-style:solid;
  border-color:transparent transparent transparent #e6eff8;
}
#exam-chat .cb-meta{ font-size:.86rem; color:var(--cb-muted); margin-top:4px; }
#exam-chat .cb-qno{ font-weight:700; color:var(--cb-brand); }
#exam-chat .cb-explain{
  margin-top:6px; font-size:.97rem; background:#f6f7fb; border:1px solid #e8e9ef; padding:9px 10px; border-radius:10px;
}

/* Antwortoptionen */
#exam-chat .cb-options{ margin-top:8px; display:grid; gap:8px; }
#exam-chat .cb-opt{
  text-align:left; background:#fff; border:1.5px solid #dfeaf4; border-radius:12px; padding:10px 12px; cursor:pointer;
  transition:border .15s, transform .06s ease; font-size:1rem;
}
#exam-chat .cb-opt:hover{ border-color:#b7d7f3; transform:translateY(-1px); }
#exam-chat .cb-opt[disabled]{ opacity:.65; cursor:not-allowed; }
#exam-chat .cb-opt.ok{ border-color:var(--cb-ok); box-shadow:inset 0 0 0 3px rgba(46,125,50,.12); }
#exam-chat .cb-opt.no{ border-color:var(--cb-bad); box-shadow:inset 0 0 0 3px rgba(198,40,40,.10); }

/* Footer & Ergebnis */
#exam-chat .cb-foot{
  padding:12px 16px; border-top:1px solid #eee; color:var(--cb-muted);
  display:flex; gap:10px; align-items:center; justify-content:space-between;
}
#exam-chat .cb-summary{
  padding:10px 12px; border-left:5px solid var(--cb-brand); background:#f1f8ff; border-radius:10px;
}

/* Fokus für Tastaturbedienung */
#exam-chat .cb-btn:focus-visible,
#exam-chat .cb-opt:focus-visible,
#exam-chat .cb-seg-btn:focus-visible{
  outline:3px solid var(--cb-brand2);
  outline-offset:2px;
}

/* Weniger Bewegung, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  #exam-chat .cb-progress>span{ transition:none; }
  #exam-chat .cb-opt{ transition:none; }
}

/* Mobile Tweaks */
@media (max-width:700px){
  #exam-chat .cb-log{ max-height:65vh; }
  #exam-chat .cb-bubble{ max-width:88%; }
}

/* --- Platz rechts für die Floating-Sidebar reservieren (Desktop) --- */
@media (min-width: 651px){
  /* Breite der Sidebar + etwas Luft (bei dir: Buttons ~48px → 90–100px passt) */
  #exam-chat{ --fab-gutter: 92px; padding-right: var(--fab-gutter); }

  /* Header, Progress-Zeile und Footer bekommen zusätzlich rechts Luft */
  #exam-chat .cb-head{  padding-right: calc(14px + var(--fab-gutter)); }
  #exam-chat .cb-bar{   padding-right: calc(16px + var(--fab-gutter)); }
  #exam-chat .cb-foot{  padding-right: calc(16px + var(--fab-gutter)); }
}

/* --- Auf dem Handy ist die Sidebar unten gedockt → kein Extra-Abstand --- */
@media (max-width: 650px){
  #exam-chat{ padding-right: 0; }
  #exam-chat .cb-head{ padding-right: 14px; }
  #exam-chat .cb-bar{  padding-right: 16px; }
  #exam-chat .cb-foot{ padding-right: 16px; }
}

@media (max-width: 650px) {
  /* Header kompakter */
  #exam-chat .cb-head{ padding:8px 10px; gap:6px; }
  #exam-chat .cb-title{ font-size: 0.95rem; }

  /* Segment-Gruppe enger */
  #exam-chat .cb-seg{ gap:4px; padding:3px; }

  /* Segment-Buttons (5/10/15/20/25/30) kleiner */
  #exam-chat .cb-seg-btn{
    padding: 3px 7px;     /* weniger Innenabstand */
    min-width: 30px;      /* schmaler */
    font-size: 0.82rem;   /* kleinere Schrift */
    border-radius: 8px;
  }

  /* Start- & Neu-Buttons kleiner */
  #exam-chat .cb-btn{
    padding: 6px 10px;
    font-size: 0.86rem;
    border-radius: 8px;
  }

  /* Punkte-/Fortschritt-Pills kleiner */
  #exam-chat .cb-pill{
    padding: 3px 8px;
    font-size: 0.8rem;
    border-radius: 999px;
  }
}





/* Self-Check: Skala sauber untereinander statt nebeneinander */
#mentoring-selfcheck .ms-scale{
  display: flex;
  flex-direction: column;   /* <- wichtig: Labels kommen unter die Buttons */
  align-items: flex-start;
  gap: 4px;
}

/* Buttons bleiben in einer Reihe / umbrechen hübsch */
#mentoring-selfcheck .ms-scale .ms-group{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Min/Max-Labels aussehen lassen wie gedacht (1 .... 5) */
#mentoring-selfcheck .ms-labels{
  display: flex;
  justify-content: space-between;
  width: 120px;             /* optional: Breite für Abstand zwischen 1 und 5 */
  margin: .25em 0 0 0;
  color: #5b7286;
  font-size: .92em;
}

/* Self-Check: Min/Max-Labels ausblenden */
#mentoring-selfcheck .ms-labels {
  display: none !important;
}

/* Mentoring-Bingo kompakter */
#mentoring-bingo.small { max-width: 720px; margin-inline: auto; } /* schmaler Gesamtblock */
#mentoring-bingo.small .mb-grid{ gap:.5em; }
#mentoring-bingo.small .mb-cell{
  padding: 8px 8px;
  min-height: 64px;
  font-size: .92em;
  border-radius: 10px;
}
#mentoring-bingo.small .mb-tick{
  right: 6px; top: 6px; font-size: 1em;
}







/* ==== DAILY CAPS (Marken-Blau, mobil lesbar) ==== */
#dailyCaps.caps-card{
  margin:14px 0 10px 0;
  padding:12px 14px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 20px rgba(0,122,194,.08);
  border-left:7px solid #007ac2;
}
#dailyCaps .caps-header{
  font-weight:800;
  color:#0a3553;
  margin:0 0 8px 0;
  font-size:1.02rem;
  letter-spacing:.2px;
}
#dailyCaps .cap-row{
  display:grid;
  grid-template-columns:minmax(160px,1fr) auto;
  align-items:center;
  gap:6px 12px;
  margin:8px 0;
}
#dailyCaps .cap-name{
  font-weight:700;
  color:#0d4e71;
  min-width:0;
}
#dailyCaps .cap-val{
  justify-self:end;
  font-size:.95rem;
  color:#0a3553;
  white-space:nowrap;
  font-weight:600;
}
#dailyCaps .cap-full{ color:#c62828; font-weight:800; margin-left:8px; }
#dailyCaps .cap-bar{
  grid-column:1/-1;
  height:12px;
  background:#eaf6ff;
  border:1px solid #d6eaf9;
  border-radius:999px;
  overflow:hidden;
}
#dailyCaps .cap-bar>span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#007ac2 0%, #53cbf1 100%);
  box-shadow:0 0 10px #53cbf166 inset;
}

/* Mobile kompakt */
@media (max-width:700px){
  #dailyCaps.caps-card{ padding:10px 12px; border-radius:10px; }
  #dailyCaps .cap-row{ gap:4px 8px; margin:6px 0; }
  #dailyCaps .cap-bar{ height:10px; }
  #dailyCaps .cap-val{ font-size:.9rem; }
}

















/* ===== Roadmap: höher platzierte Knoten + Kantenplatz + Clip-Schutz ===== */
:root{
  --brand:#007ac2; --brand2:#53cbf1;
  --ink:#0a3553; --muted:#547a93;
  --bg:#f7fbff; --line:#d6eaf9; --chip:#ffffff;

  --node-offset: 180px;   /* wie hoch die Nodes über der Leiste sitzen */
  --edge-space: 140px;    /* Platz links/rechts, damit 1./letzter Node nicht abgeschnitten wird */
}

/* Clip-Schutz für Tooltips/Pills */
.rm-wrap, .rm-card, .rm-scroller { overflow: visible; }

/* Layout & Karte */
.rm-wrap{ max-width:1120px; margin:22px auto; padding:0 14px; }
.rm-card{
  background:#fff; border-radius:14px; box-shadow:0 6px 28px rgba(0,122,194,.10);
  padding:16px; border-left:7px solid var(--brand);
}
.rm-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.rm-head h2{ margin:0; font-size:1.25rem; color:var(--ink); }
.rm-head .rm-meta{ color:#0d4e71; font-weight:700; }

/* Scroller: oben genug Luft für Pills/Dot/Tooltip */
.rm-scroller{
  overflow-x:auto;
  overflow-y:visible;
  padding: calc(var(--node-offset) + 40px) 0 56px;
  margin-top:8px;
  scrollbar-width:thin;
}

/* Leiste + Kantenabstand */
.rm-track{
  position:relative;
  height:14px;
  background:#eaf6ff;
  border:1px solid var(--line);
  border-radius:999px;
  min-width:960px;
  margin: 0 var(--edge-space);
}
.rm-fill{
  position:absolute; left:0; top:-3px;
  height:16px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:999px;
  box-shadow:0 0 12px #53cbf166 inset;
  z-index:1;
}
.rm-cursor{
  position:absolute; top:50%; transform:translate(-50%,-50%);
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
  box-shadow:0 0 0 4px #eaf6ff;
  pointer-events:none;
  z-index:2;
}
.rm-nodes{ position:relative; height:0; }

/* Knoten + Label-Pills (oberhalb) */
.rm-node{
  position:absolute; top: calc(var(--node-offset) * -1);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:180px;
}
.rm-dot{
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid #9acdef;
  box-shadow:0 0 0 2px #ffffff, 0 0 0 6px #eaf6ff;
}
.rm-node.done .rm-dot{
  background:var(--brand); border-color:var(--brand);
  box-shadow:0 0 0 3px #fff, 0 0 0 9px #d9eefc;
}
.rm-node.next .rm-dot{
  border-color:var(--brand);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%{   box-shadow:0 0 0 3px #fff, 0 0 0 9px #d9eefc; }
  70%{  box-shadow:0 0 0 3px #fff, 0 0 0 16px #d9eefc00; }
  100%{ box-shadow:0 0 0 3px #fff, 0 0 0 9px #d9eefc; }
}

/* Farbpills */
.rm-pill{
  max-width:180px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  text-align:center;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 0 #fff;
  font-size: clamp(.88rem, 1.9vw, 1rem);
}
.tone-base   { background:#eef7ff; border:1.5px solid #cfe6fb; color:#0a3553; }
.tone-grund  { background:#eaf6ff; border:1.5px solid #bfe0ff; color:#0a3553; }
.tone-aufbau { background:#e9fff9; border:1.5px solid #b9f2db; color:#0b5a4a; }
.tone-bronze { background:#fff4e7; border:1.5px solid #e7c29a; color:#7b4b16; }
.tone-silber { background:#f5f8fb; border:1.5px solid #c9d5e2; color:#4d5d6d; }
.tone-gold   { background:#fff8df; border:1.5px solid #ecd27a; color:#6e5a05; }
.tone-profi  { background:#f2ecff; border:1.5px solid #d2c6ff; color:#422c95; }
.tone-meister{ background:#fff0f0; border:1.5px solid #f2b6b6; color:#8b2121; }

.rm-label{ margin-top:0; font-size:1.02rem; font-weight:800; color:var(--ink); }
.rm-sub{ font-size:.86rem; color:var(--muted); font-weight:700; margin-top:-2px; }

/* Info / Legende */
.rm-box{
  margin-top:12px; padding:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px; color:var(--ink);
}
.rm-grid{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.rm-legend{ display:flex; align-items:center; gap:12px; font-size:.92rem; color:var(--muted); }
.rm-leg-dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid #9acdef; }
.rm-leg-dot.done{ background:var(--brand); border-color:var(--brand); }

/* Tooltip */
.rm-tip{
  position:absolute; transform:translate(-50%, calc(-100% - 14px));
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; width:240px;
  box-shadow:0 10px 28px rgba(0,0,0,.12); z-index:5;
}
.rm-tip:after{
  content:""; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:#fff;
  border-left:1px solid var(--line); border-bottom:1px solid var(--line);
}
.rm-tip .t1{ font-weight:800; margin-bottom:4px; }
.rm-tip .t2{ color:var(--muted); font-size:.85rem; }
.rm-tip .t3{ margin-top:6px; font-size:.9rem; }

/* Abzeichen-Liste */
.rm-badges{
  margin-top:12px; padding:12px;
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
}
.rm-badges-head{
  font-weight:900; color:var(--ink);
  margin-bottom:8px; display:flex; align-items:center; gap:8px;
}
.rm-badges-strip{ display:flex; flex-wrap:wrap; gap:8px; }
.rm-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:999px;
  background:var(--chip); border:1px solid var(--line);
  color:var(--ink); font-weight:800;
}
.rm-chip .em{ font-size:1.05em; }

/* Mobile Tweaks */
@media (max-width:700px){
  .rm-scroller{ padding: calc(var(--node-offset) + 60px) 0 64px; }
  .rm-node{ width:168px; }
  .rm-label{ font-size:.98rem; }
  .rm-sub{ font-size:.8rem; }
  .rm-tip{ width:220px; }
}





/* ========== FORMEL-BOX – mobil-fest & mit MathJax-Umbruch ========== */

/* Canvas skaliert sauber */
.formel-box canvas#wire-simpl{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:560/210;
  margin-inline:auto;
  background:#fafdff;
  border-radius:13px;
  box-shadow:0 2px 10px #1172bd15;
}

/* Die Box selbst (zusammengeführt) */
.formel-box{
  /* Look */
  background: linear-gradient(90deg,#e0f2ff 80%,#f8fcff 100%);
  border-left:6px solid #007ac2;
  border-radius:12px;
  margin:18px 0 10px;
  padding:1.1em 1.5em .9em;
  font-size:1.1em;
  box-shadow:0 1px 12px rgba(0,122,194,.10);
  max-width:740px;
  margin-inline:auto;

  /* 🔑: gegen Überlaufen */
  min-width:0;
  white-space:normal;
  overflow:visible;             /* NICHT clippen */
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;                 /* <html lang="de"> setzen */
}
/* Flex/Grid-Kinder dürfen schrumpfen */
.formel-box > *{ min-width:0; }

/* Überschrift & Bild-Box sicher NICHT als flex */
.formel-box .thema-header,
.formel-box .img-box{
  display:block;                /* überschreibt evtl. globales display:flex */
  min-width:0;
}

/* MathJax: nie breiter als Container, keine harten Cuts */
.formel-box mjx-container{
  display:block;
  max-width:100%;
  overflow:visible;             /* wichtig: nicht hidden/auto -> sonst Abschneiden */
}
.formel-box mjx-container > mjx-math{
  max-width:100%;
  min-width:0;
  white-space:normal;           /* erlaubt Umbrüche */
}

/* Medien allgemein */
.formel-box img,
.formel-box svg,
.formel-box canvas{
  max-width:100%;
  height:auto;
}

/* Steuer-Grid mit Inline-Columns auf 1 Spalte zwingen */
@media (max-width:700px){
  .formel-box > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
}

/* Inputs & Buttons fingerfreundlich */
.formel-box input[type="range"]{
  width:100%;
  accent-color:#1172bd;
  touch-action:pan-x;
}
.formel-box button{
  padding:.6em 1em;
  border-radius:8px;
}

/* Kleinere Typo-Anpassungen */
@media (max-width:600px){
  .formel-box{ font-size:.98rem; }
  .formel-box .hint{ font-size:.95rem; }
  .formel-box mjx-container{ font-size:.95em; } /* nur MathJax etwas kleiner */
}


#csx10-canvas{
  display:block;
  width:100%;
  max-width:900px;
  margin-inline:auto;
  background:#fafdff;
  border-radius:14px;
  box-shadow:0 2px 10px #1172bd22;
  border:1px solid #e6f2fb;
  aspect-ratio: 16 / 8; /* Desktop */
}
@media (max-width: 600px){
  #csx10-canvas{ aspect-ratio: 10 / 11; }
}












/* ===========================================
   SELFCHECK – Komplett-CSS (scoped auf #selfcheck)
   Ziel: kein Overflow rechts, kein überdeckender Footer
   Brand-Blau: #007ac2 / Akzent: #53cbf1
   =========================================== */

/* Seite nur dann hell halten, wenn das Modul existiert */
body:has(#selfcheck){
  background:#f7fbff !important;
  color-scheme: light !important;
}

/* ---------- Root des Moduls ---------- */
#selfcheck{
  --brand:#007ac2; --brand2:#53cbf1;
  --ink:#0a3553; --muted:#5b7286;
  --ok:#1e9e61; --mid:#f0ad00; --bad:#d33f49;
  --line:#e6eff8; --soft:#f6fbff; --card:#ffffff; --bg:#ffffff;
  --shadow:0 8px 32px rgba(83,203,241,0.16);

  max-width:1150px; margin:22px auto; padding:0 14px 16px;
  color:var(--ink); background:var(--bg);
  color-scheme: light;
}
/* Box-Sizing & Overflow-Schutz innerhalb des Moduls */
#selfcheck, #selfcheck *{ box-sizing:border-box; }
#selfcheck .sc-grid > *{ min-width:0; }           /* verhindert Rauslaufen rechts */
#selfcheck .q-card, #selfcheck .cat-body, #selfcheck .opt{ max-width:100%; }
#selfcheck .q-text, #selfcheck .opt span{ overflow-wrap:anywhere; word-break:break-word; }

/* ---------- Tabs ---------- */
#selfcheck .sc-tabs{
  display:flex; gap:8px; flex-wrap:wrap;
  border-bottom:2px solid var(--line);
  margin:12px 0 10px;
}
#selfcheck .sc-tab-btn{
  appearance:none; border:0; background:#eaf6ff; color:var(--brand);
  font:800 15px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding:10px 14px; border-radius:10px 10px 0 0; cursor:pointer;
}
#selfcheck .sc-tab-btn.active{ background:var(--brand); color:#fff; }
#selfcheck .sc-tab-panel{ display:none; }
#selfcheck .sc-tab-panel.active{ display:block; }

/* ---------- Grid ---------- */
#selfcheck .sc-grid{
  display:grid; gap:18px;
  grid-template-columns:minmax(280px,1fr) minmax(300px,420px);
  align-items:start;
}
@media (max-width:980px){
  #selfcheck .sc-grid{ grid-template-columns:1fr; }
}

/* ---------- Cards ---------- */
#selfcheck .sc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-left:6px solid var(--brand);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
}
#selfcheck h2{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; color:var(--brand); }
#selfcheck .scale-hint{ margin:0 0 10px; color:var(--muted); }

/* ---------- Kategorien (Accordion) ---------- */
#selfcheck details.cat{
  margin:10px 0 12px; border:1px solid var(--line);
  border-radius:12px; overflow:clip; background:#fff;
}
#selfcheck details.cat[open]{ box-shadow:0 6px 20px rgba(0,122,194,.08); }
#selfcheck details.cat > summary{
  list-style:none; cursor:pointer; user-select:none; outline:none;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:linear-gradient(90deg,#e3f3fe 80%, #fff 100%);
  border-bottom:1px solid var(--line); font-weight:800; color:#1568b2;
}
#selfcheck details.cat > summary::-webkit-details-marker{ display:none; }
#selfcheck .sum-badge{
  margin-left:auto; background:#fff; color:var(--brand);
  border:1px solid #bfe6fb; border-radius:999px; padding:6px 10px;
  font:700 12px/1 system-ui;
}
#selfcheck .cat-body{ padding:8px 12px 12px; }

/* ---------- Fragekarten ---------- */
#selfcheck .q-card{
  border:1px solid var(--line);
  border-radius:12px; padding:10px 12px; margin:10px 0;
  background:#fff; transition:border-color .16s ease, box-shadow .16s ease;
}
#selfcheck .q-card:hover{ border-color:#dbeaf7; box-shadow:0 10px 28px rgba(0,122,194,.08); }
#selfcheck .q-text{ font-weight:700; margin-bottom:8px; }

/* ---------- Optionen (Radio → Label-Karten) ---------- */
#selfcheck .opts{ display:grid; gap:8px; }
#selfcheck .opt{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  background:#fbfdff; transition:border-color .16s ease, background .16s ease;
}
#selfcheck .opt:hover{ border-color:#cfe5f7; background:#f6fbff; }
#selfcheck .opt input[type="radio"]{
  appearance:none; width:18px; height:18px; margin-top:2px;
  border-radius:50%; border:2px solid var(--muted);
  position:relative; background:#fff; flex:0 0 auto;
}
#selfcheck .opt input[type="radio"]:checked{ border-color:var(--brand); }
#selfcheck .opt input[type="radio"]:checked::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--brand);
}
#selfcheck .opt.ok{ border-color:var(--ok); background:#f2fbf6; }
#selfcheck .opt.no{ border-color:var(--bad); background:#fff5f6; }

/* Robustheit: falls Radios nicht in .opt-Labels liegen */
#selfcheck label:has(> input[type="radio"]){
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:6px 0; border:1px solid var(--line);
  border-radius:10px; background:#fbfdff; cursor:pointer;
}
#selfcheck label:has(> input[type="radio"]):hover{
  border-color:#cfe5f7; background:#f6fbff;
}
#selfcheck .cat-body :is(li,div,p,span):has(> input[type="radio"]){
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  margin:6px 0; border:1px solid var(--line); border-radius:10px; background:#fbfdff;
}

/* ---------- Erklärungen ---------- */
#selfcheck .q-explain{
  display:none; margin-top:8px; padding:8px 10px;
  border-left:3px solid #b5dffd; background:#f7fbff; color:var(--muted); border-radius:6px;
}
#selfcheck .q-explain.show{ display:block; }

/* ---------- Kategorie-Aktion ---------- */
#selfcheck .cat .sc-btn[data-act="clear"]{ margin:6px 12px 2px; }

/* ---------- Ergebnis: Radar + Liste ---------- */
#selfcheck .chart-wrap{
  width:100%; height:420px; position:relative; margin:6px 0 8px;
  background:#fff; border:1px solid var(--line); border-radius:12px;
}
@media (max-width:480px){ #selfcheck .chart-wrap{ height:360px; } }
#selfcheck canvas#radar{ width:100% !important; height:100% !important; display:block; }

#selfcheck .radar-legend{
  display:flex; align-items:center; gap:18px; color:var(--muted);
  font-size:13px; margin:6px 0 10px;
}
#selfcheck .radar-legend .dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  border:1px solid #d0dbe6; margin-right:6px;
}

#selfcheck .inclu{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  border:1px dashed var(--line); background:#fbfdff;
  padding:8px 10px; border-radius:10px; color:var(--muted);
}
#selfcheck .inclu label{
  display:inline-flex; gap:8px; align-items:center;
  padding:4px 8px; border-radius:999px; background:#fff; border:1px solid #bfe6fb;
}
#selfcheck .inclu input[type="checkbox"]{ accent-color:var(--brand); }

#selfcheck .scorelist{
  display:grid;
  grid-template-columns:minmax(120px,1.2fr) minmax(90px,.8fr) minmax(150px,1fr);
  gap:8px 12px; align-items:center; margin-top:12px;
}
@media (max-width:560px){ #selfcheck .scorelist{ grid-template-columns:1fr; } }
#selfcheck .tag{
  display:inline-block; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  border:1px solid transparent;
}
#selfcheck .tag.ok{ background:#eefaf4; color:#0b6b42; border-color:#bfead3; }
#selfcheck .tag.mid{ background:#fff9e9; color:#8a5f00; border-color:#ffe2a3; }
#selfcheck .tag.bad{ background:#fff2f3; color:#7c1523; border-color:#f7b9c0; }

/* ---------- Buttons ---------- */
#selfcheck .sc-btn{
  appearance:none; border:1px solid var(--brand); background:var(--brand);
  color:#fff; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,122,194,0.18);
  transition:transform .06s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
#selfcheck .sc-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,122,194,0.22); }
#selfcheck .sc-btn:active{ transform:translateY(0); box-shadow:0 4px 14px rgba(0,122,194,0.18); }
#selfcheck .sc-btn.ghost{ background:#fff; color:var(--brand); border-color:#bfe6fb; box-shadow:none; }
#selfcheck .sc-btn.ghost:hover{ background:#f6fbff; }

/* ---------- Footer NICHT sticky (inline am Ende) ---------- */
#selfcheck .mobile-stick{
  position: static;                 /* <- war fixed */
  z-index:auto;
  display:flex; gap:10px; justify-content:space-between; align-items:center;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  margin:14px 0 0;                  /* Abstand nach oben */
  box-shadow:0 6px 16px rgba(0,122,194,.06);
}
#selfcheck .mobile-stick .progress{ display:grid; gap:6px; min-width:200px; }
#selfcheck #progText{ font-size:13px; color:var(--muted); }
#selfcheck .bar{ height:8px; border-radius:999px; background:#edf5fc; overflow:hidden; border:1px solid #d7e8fb; }
#selfcheck #progBar{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:inherit; transition:width .24s ease; }

/* ---------- Dark-Mode: Modul bleibt hell ---------- */
@media (prefers-color-scheme: dark){
  body:has(#selfcheck){ background:#0b1b27; } /* Seite darf dunkel sein … */
  #selfcheck{ background:#ffffff; }           /* … Modul bleibt hell */
  #selfcheck .sc-card,
  #selfcheck .cat,
  #selfcheck .chart-wrap,
  #selfcheck .trainer summary,
  #selfcheck .inclu label,
  #selfcheck .q-card{ background:#ffffff; }
}





/* Responsive Tabelle */
.responsive-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.table-row {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #a0c4ff;
}

.table-col {
  flex: 1 1 50%;
  padding: 8px;
  border-right: 1px solid #a0c4ff;
}

.table-col:last-child {
  border-right: none;
}

.table-header {
  background: #cfe8ff;
  font-weight: bold;
  text-align: center;
}

@media (max-width: 768px) {
  .table-col {
    flex: 1 1 100%;   /* auf Handy volle Breite */
    border-right: none;
    border-bottom: 1px solid #a0c4ff;
  }
  .table-col:last-child {
    border-bottom: none;
  }
}










/* === Hausaufgaben-Add-on auf Basis deines Designs === */

/* Container */
.ha-wrap { max-width: 980px; margin: 24px auto; padding: 0 12px; }

/* Headline im Stil deiner H2 */
.ha-title { 
  font-size: 1.6rem; font-weight: 800; color: #007ac2; 
  display:flex; align-items:center; gap:.6rem; margin: 0 0 12px;
}
.ha-title::before{content:""; width:6px; height:22px; background:#007ac2; border-radius:4px}

/* Pills / Badges (orientiert an deiner Blaupalette) */
.pill {
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:.84rem; border:1px solid #cfe8f7; background:#eef8ff; color:#0a3553;
}
.pill.overdue  { background:#ffe9e9; border-color:#ffb3b3; color:#7f1d1d }
.pill.due_soon { background:#fff8e1; border-color:#ffde7a; color:#7c2d12 }
.pill.done     { background:#ebfcfa; border-color:#b7f5e7; color:#065f46 }
.pill.open     { background:#f1f5f9; border-color:#e5edf4; color:#334155 }

/* Progressbar im Blau */
.ha-progress { height: 8px; background:#eaf4fb; border-radius:999px; overflow:hidden }
.ha-progress > span { display:block; height:100%; width:0; background:#007ac2 }

/* Buttons im Look deiner Navigation */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:8px 12px; border:1px solid #b9dbef; border-radius:10px;
  background:#f1f9ff; color:#0a3553; text-decoration:none;
  transition: background-color .15s, transform .12s;
}
.btn:hover { background:#d8f0ff; transform: translateY(-1px) }
.btn.primary { background:#007ac2; border-color:#007ac2; color:#fff }
.btn.primary:hover { background:#016aa7 }

/* Tabellen nutzen deine .messbegriffe-table-Optik */
.ha-table { width:100% }
.ha-table th, .ha-table td { vertical-align: middle }

/* Kleine Meta-Textfarbe */
.meta { color:#506a7b; font-size:.92rem }







/* Button-Ladezustand */
button.loading {
  position: relative;
  pointer-events: none;
  opacity: .8;
}
button.loading::after {
  content: "";
  position: absolute;
  right: 12px;              /* Spinner rechts im Button */
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }









/* Desktop normal, Mobil als Karten */
.table-box{
  overflow-x:auto;                 /* Fallback: horizontales Scrollen */
  -webkit-overflow-scrolling:touch;
}

/* feine Linien + Abstände (optional) */
.table-responsive th,
.table-responsive td{
  border-bottom:1px solid #e6eef7;
}

/* ---------- Mobil-Layout ---------- */
@media (max-width:700px){
  /* Header ausblenden (wir zeigen Labels in den Zellen) */
  .table-responsive tr:first-child{ display:none; }

  /* Jede Daten-Zeile wird zur Karte */
  .table-responsive tr{
    display:block;
    background:#fff;
    margin:0 0 .8rem 0;
    border:1px solid #e6eef7;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,122,194,.06);
    padding:.4rem .6rem;
  }
  /* Jede Zelle zeigt links das Label, rechts den Wert */
  .table-responsive td{
    display:flex;
    gap:.6rem;
    align-items:baseline;
    padding:.5rem .4rem;
  }
  .table-responsive td::before{
    content: attr(data-label);
    flex:0 0 48%;                 /* Label-Spalte */
    color:#547a93;
    font-weight:600;
  }
}