/* =====================================================================
   Myas Welt der Physik – style.css
   Alle Styles der Seite stehen hier und in style-mobile.css.
   Aufbau:
     1. Farben und Grundwerte
     2. Grundgerüst (Kopf, Navigation, Inhalt, Fuß)
     3. Startseite
     4. Stoffgebiet-Seiten (Themen mit Anfänger/Fortgeschrittene)
     5. Suche
     6. Textseiten (Über, Impressum, Datenschutz)
     7. Bausteine der Animationen (Karten, Knöpfe, Merke, Quiz, Sprechblasen)
   Keine externen Schriften, kein jQuery, keine Fremd-Server.
   ===================================================================== */

/* ---------- 1. Farben und Grundwerte ---------- */
:root {
  /* Seite */
  --tinte:      #333366;   /* Fließtext */
  --tinte-hell: #5c6488;
  --grund:      #f1f8fa;
  --papier:     #ffffff;
  --linie:      #cfe3ea;
  --zart:       #eef8fb;
  --mya:        #1f8a7d;   /* Myas Türkis = Hauptfarbe */
  --mya-dunkel: #156b61;
  --blau:       #0099ff;
  --blau-dunkel:#1583c9;
  --rot:        #b30000;
  --petrol:     #009999;
  --orange:     #ff7f00;
  --gut:        #1b8a4a;
  --link:       #0d6e9e;
  --radius:     14px;
  --schatten:   0 1px 2px rgba(20,40,90,.06), 0 4px 14px rgba(20,40,90,.08);
  --breite:     1180px;

  /* Animationen (gleiche Namen wie in den bisherigen Seiten) */
  --raum:  #1b2038;
  --karte: #fff;
  --theo:  #c8402f;
  --paul:  #2f74c0;
  --lumi:  #c58a00;
  --kraft: #c99a00;
  --weg:   #1b9a5a;

  /* Stufen */
  --anf:   #2e9b4f;        /* Anfänger */
  --fort:  #6a3fb5;        /* Fortgeschrittene */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--grund);
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--rot); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--orange); outline-offset: 2px;
}

h1, h2, h3 { line-height: 1.25; }
h1 { color: var(--rot); font-size: 2rem; margin: .4em 0 .5em; }
h2 { color: var(--petrol); font-size: 1.45rem; margin: 1.6em 0 .5em; }
h3 { color: var(--tinte); font-size: 1.12rem; margin: 1.2em 0 .4em; }

.unsichtbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.sprung {
  position: absolute; left: -999px; top: .5rem; z-index: 10;
  background: var(--papier); padding: .4rem .8rem; border-radius: 8px;
}
.sprung:focus { left: .5rem; }

/* ---------- 2. Grundgerüst ---------- */
#kopf {
  color: #fff;
  background: linear-gradient(120deg, var(--mya) 0%, #1c9a9a 45%, var(--blau-dunkel) 100%);
}
.kopf-innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 1rem 1.25rem .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.marke {
  display: flex; align-items: center; gap: .75rem;
  color: #fff; text-decoration: none;
  font-size: 1.9rem; font-weight: 800; letter-spacing: .01em; line-height: 1.05;
}
.marke:hover { color: #fff; }
.marke img {
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.marke-klein { display: block; font-size: .95rem; font-weight: 500; opacity: .92; letter-spacing: .04em; }

.kopf-suche { display: flex; gap: .4rem; }
.kopf-suche input {
  width: 17rem; font: inherit; font-size: .95rem;
  padding: .45rem .8rem; border: 0; border-radius: 999px;
}
.kopf-suche button, .knopf {
  font: inherit; font-size: .95rem; font-weight: 700;
  padding: .45rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--orange); color: #fff; text-decoration: none; display: inline-block;
}
.kopf-suche button:hover, .knopf:hover { background: #e06c00; color: #fff; }

#hauptnavi {
  max-width: var(--breite); margin: 0 auto;
  padding: 0 1.25rem; display: flex; gap: .25rem; flex-wrap: wrap;
}
#hauptnavi a {
  color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .45rem .9rem .55rem; border-radius: 10px 10px 0 0;
}
#hauptnavi a:hover { background: rgba(255,255,255,.18); }
/* aktiver Menüpunkt: Dreamweaver-Parameter "seite" setzt die body-Klasse */
.seite-start  #hauptnavi .n-start,
.seite-gebiet #hauptnavi .n-gebiete,
.seite-suche  #hauptnavi .n-suche,
.seite-ueber  #hauptnavi .n-ueber { background: var(--grund); color: var(--mya-dunkel); }

#inhalt {
  max-width: var(--breite); margin: 0 auto;
  padding: .5rem 1.25rem 2.5rem;
  min-height: 50vh;
}

.pfad { font-size: .88rem; color: var(--tinte-hell); margin: 1rem 0 0; }
.pfad a { color: var(--tinte-hell); }

.einleitung { font-size: 1.08rem; max-width: 46em; }

#fuss { background: var(--tinte); color: #dfe4f5; font-size: .9rem; }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 1.2rem 1.25rem 1.6rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
#fuss a { color: #fff; }
#fuss nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.fuss-lizenz { margin: 0; max-width: 40em; }
.fuss-lizenz a[rel=license] {
  display: inline-block; font-weight: 700; text-decoration: none;
  border: 1px solid #fff; border-radius: 6px; padding: 0 .4rem; margin-right: .4rem;
}

/* ---------- 3. Startseite ---------- */
.held {
  display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 2rem; align-items: center;
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 1.6rem 2rem; margin: 1.5rem 0 1rem;
}
.held h1 { margin-top: 0; }
.held p { margin: .5em 0; }
.held-bild { text-align: center; }
.held-bild img { width: 220px; }
.held-bild figcaption { font-size: .85rem; color: var(--tinte-hell); }

.figuren { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.figuren li {
  font-size: .85rem; background: var(--zart); border: 1px solid var(--linie);
  border-radius: 999px; padding: .1rem .7rem;
}
.figuren b { color: var(--mya-dunkel); }

.gebiete {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem; margin: 1rem 0; padding: 0; list-style: none;
}
.gebiet {
  --g: var(--mya);
  display: flex; flex-direction: column;
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten);
  border-top: 6px solid var(--g);
  padding: 1rem 1.2rem 1.1rem; color: var(--tinte); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
a.gebiet:hover { transform: translateY(-3px); box-shadow: 0 6px 22px rgba(20,40,90,.16); color: var(--tinte); }
.gebiet h3 { margin: .2rem 0 .3rem; display: flex; align-items: center; gap: .6rem; color: var(--g); font-size: 1.2rem; }
.gebiet p { margin: 0 0 .6rem; font-size: .93rem; }
.gebiet .anzahl { margin-top: auto; font-size: .85rem; color: var(--tinte-hell); }
.gebiet.leer { opacity: .7; }
.symbol {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--g); color: #fff; font-weight: 700; font-size: 1.05rem;
  font-family: "Cambria Math", "Times New Roman", serif;
}

/* Farbe je Stoffgebiet */
.g-mechanik     { --g: #d9480f; }
.g-schwingungen { --g: #7048c8; }
.g-elektrizitaet{ --g: #c99a00; }
.g-magnetismus  { --g: #1c6fd1; }
.g-optik        { --g: #e0397a; }
.g-waerme       { --g: #c2410c; }
.g-stoffe       { --g: #0f8a6a; }
.g-atome        { --g: #4b5563; }
.g-astronomie   { --g: #334a9c; }
.g-messen       { --g: #0e7490; }

.stufen-erklaerung {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;
}
.stufen-erklaerung > div {
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten); padding: .9rem 1.2rem;
}
.stufen-erklaerung p { margin: .3rem 0 0; font-size: .93rem; }

/* ---------- 4. Stoffgebiet-Seiten ---------- */
.gebiet-kopf { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.gebiet-kopf h1 { margin: 0; color: var(--g); }
.gebiet-kopf .symbol { width: 3rem; height: 3rem; font-size: 1.5rem; }

.themen { display: grid; gap: 1rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.thema {
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 1rem 1.3rem 1.1rem; border-left: 6px solid var(--g, var(--mya));
}
.thema h2 { margin: 0 0 .2rem; color: var(--tinte); font-size: 1.25rem; }
.thema > p { margin: 0 0 .7rem; font-size: .95rem; }
.stufen { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }

.ani {
  display: block; position: relative;
  border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .8rem .7rem;
  text-decoration: none; color: var(--tinte); background: var(--zart);
}
a.ani:hover { border-color: var(--mya); background: #e2f5f2; color: var(--tinte); }
.ani strong { display: block; margin-top: .25rem; color: var(--link); }
a.ani:hover strong { color: var(--rot); }
.ani span.klasse { display: block; font-size: .82rem; color: var(--tinte-hell); }
.ani.bald { background: repeating-linear-gradient(135deg, #f6f8fa 0 10px, #eef1f4 10px 20px); color: var(--tinte-hell); }
.ani.bald strong { color: var(--tinte-hell); font-weight: 500; }

.stufe {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  color: #fff; border-radius: 999px; padding: .05rem .6rem;
}
.stufe.anf  { background: var(--anf); }
.stufe.fort { background: var(--fort); }
.stufe.bald { background: #9aa3b5; }

/* ---------- 5. Suche ---------- */
.suchformular {
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: 1rem 1.3rem; margin: 1rem 0 1.5rem;
  display: grid; grid-template-columns: minmax(0,2fr) repeat(3, minmax(0,1fr)) auto; gap: .8rem; align-items: end;
}
.suchformular label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .2rem; }
.suchformular input, .suchformular select {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .45rem .6rem; border: 1px solid #9cc9da; border-radius: 8px; background: #fff;
}
.suchformular .haken { display: flex; align-items: center; gap: .4rem; font-weight: 400; font-size: .9rem; }
.suchformular .haken input { width: auto; }

.treffer-info { color: var(--tinte-hell); }
.treffer { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.treffer li {
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten);
  padding: .8rem 1.2rem; border-left: 6px solid var(--g, var(--mya));
}
.treffer h3 { margin: .1rem 0 .2rem; font-size: 1.1rem; }
.treffer p { margin: .2rem 0; font-size: .93rem; }
.treffer .meta { font-size: .84rem; color: var(--tinte-hell); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.treffer mark { background: #fff1a8; color: inherit; padding: 0; border-radius: 2px; }
.schlagworte { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.schlagworte a {
  font-size: .78rem; text-decoration: none; background: var(--zart);
  border: 1px solid var(--linie); border-radius: 999px; padding: 0 .55rem; color: var(--tinte);
}
.meldung { background: #fff8e6; border-left: 5px solid var(--orange); padding: .7rem 1rem; border-radius: 8px; }

/* ---------- 6. Textseiten ---------- */
.text { max-width: 46em; }
.text .kasten {
  background: var(--papier); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1rem 1.3rem;
}
.platzhalter { background: #fff1a8; padding: 0 .2em; border-radius: 3px; }

/* ---------- 7. Bausteine der Animationen ----------
   Aus den bisherigen Simulationsseiten übernommen (Regeln, die fast alle Seiten
   gleich enthalten). Seiten-eigene Regeln bleiben vorerst im head-Bereich der Seite. */
.spruch[data-wer="Kater Erwin"]::before { color:#555 }
.karte button { font:inherit;font-size:.9rem;font-weight:600;border:1px solid #9cc9da;background:var(--zart);color:var(--tinte);border-radius:999px;padding:.32rem .8rem;cursor:pointer }
.frage .rueck { margin:.4rem 0 0;font-size:.88rem;min-height:1.2em }
.klein { font-size:.82rem;color:#556 }
.selbst input { width:6.5em;font:inherit;padding:.2rem .3rem;border:1px solid #9cc9da;border-radius:6px }
.ergebnis { margin-top:.6rem;padding:.5rem .7rem;border-radius:10px;background:var(--zart);border-left:5px solid var(--farbe,var(--petrol));font-size:.9rem }
.merke ul { margin:.3rem 0 .2rem;padding-left:1.3rem }
.ergebnis:empty { display:none }
.karte button:disabled { opacity:.45;cursor:default }
.merke { background:#fff8e6;border:1px solid #f3d9a4;border-radius:12px;padding:.8rem 1rem;margin:1rem 0 }
.erg-wert { display:inline-block;background:#e8f7ee;border-radius:6px;padding:0 .35rem;font-weight:700;color:var(--gut) }
.wahl { display:grid;grid-template-columns:1fr 1fr;gap:.35rem }
.karte .frage button.richtig { border-color:var(--gut);background:#e8f7ee }
.sim label { cursor:pointer }
.sim fieldset:first-of-type { margin-top:0 }
.aufgabe { font-size:1rem;margin:.3rem 0 0 }
.ergebnis.schlecht { --farbe:var(--rot);background:#fdecec }
.merke b.kopf { color:var(--rot) }
.sim legend { font-weight:700;padding:0 .3rem;color:var(--farbe,var(--tinte));background:none;border:0;margin:0 }
.karte button.haupt:hover { background:#0080d6 }
.profi { display:inline-block;font-size:.72rem;font-weight:700;color:#fff;background:var(--petrol);border-radius:999px;padding:.05rem .55rem;margin-left:.4rem;vertical-align:.2em;letter-spacing:.03em;text-transform:none }
.selbst { display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.6rem;font-size:.95rem }
.wahl button small { display:block;font-weight:400;font-size:.75rem;opacity:.85;font-variant-numeric:tabular-nums }
.wahl.drei { grid-template-columns:1fr 1fr 1fr }
.karte button:focus-visible,.karte input:focus-visible { outline:3px solid var(--blau);outline-offset:2px }
.frage { border:1px solid var(--linie);border-radius:10px;padding:.6rem .8rem;margin:.6rem 0;background:#fff }
.sim { display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:start;margin:1rem 0 }
.spruch { margin:.5rem 0 0;padding:.45rem .7rem;border-radius:10px;background:#fffbe6;border:1px solid #f3d9a4;font-size:.88rem;min-height:2.6em }
.karte .frage button { font-weight:500;background:#fff;border-radius:999px }
.faelle button { text-align:left;padding-left:.55rem }
.formel { font-family:"Cambria Math","Times New Roman",serif;font-size:1.05rem;white-space:nowrap }
.karte button:hover { background:#dff3fa }
.karte h3 { margin:0 0 .6rem;font-size:1rem;color:var(--tinte);text-transform:none }
.karte button.haupt { background:var(--blau);border-color:var(--blau);color:#fff }
.sim * { box-sizing:border-box }
fieldset.f-petrol { --farbe:var(--petrol) }
fieldset.f-blau { --farbe:var(--blau) }
.spruch[data-wer=Paul] { background:#eef5fd;border-color:#bfd6ef }
[hidden] { display:none!important }
.spruch[data-wer="Kater Erwin"] { background:#f0f0f4;border-color:#d0d0dc }
.rechnung .formel { white-space:normal }
.regler input[type=range] { flex:1;min-width:0 }
.frage .wahl { display:flex;flex-wrap:wrap;gap:.35rem }
.regler { display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin:.2rem 0 }
.faelle button.geloest::after { content:" ✓";color:var(--gut) }
.rechnung { font-size:.9rem;margin-top:.6rem;padding:.5rem .7rem;border-radius:10px;background:var(--zart);border-left:5px solid var(--petrol) }
.karte { background:var(--karte);border:1px solid var(--linie);border-radius:12px;padding:.9rem 1rem;box-shadow:0 1px 2px rgba(20,40,90,.06),0 4px 14px rgba(20,40,90,.07);min-width:0 }
.wahl button { border-radius:8px;padding:.4rem .4rem;font-size:.84rem }
.sim fieldset { border:1px solid var(--linie);border-radius:10px;margin:.8rem 0 0;padding:.4rem .8rem .7rem;border-left:5px solid var(--farbe,var(--linie));background:#fff;font-size:inherit }
.regler output { font-weight:700;font-variant-numeric:tabular-nums;min-width:4.5em;text-align:right }
.fw { color:var(--weg);font-weight:700 }
.anzeige div { background:var(--zart);border-radius:8px;padding:.25rem .2rem }
.spruch::before { content:attr(data-wer) ": ";font-weight:700;color:var(--lumi) }
.anzeige b { display:block;font-variant-numeric:tabular-nums;font-size:.95rem }
.karte button[aria-pressed=true] { background:var(--blau);border-color:var(--blau);color:#fff }
.anzeige { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;margin-top:.6rem;font-size:.82rem;text-align:center }
.merke li { margin:.15rem 0 }
.spruch[data-wer="Mya"]::before { color:var(--mya) }
canvas.raum { width:100%;height:auto;display:block;border-radius:8px;background:var(--raum);touch-action:pan-y }
.faelle button[aria-pressed=true].geloest::after { color:#fff }
#quizStand { font-weight:600 }
.leiste { display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 .2rem;align-items:center }
.frage p.f { margin:0 0 .4rem;font-weight:600 }
.fk { color:var(--kraft);font-weight:700 }
.spruch[data-wer=Theo] { background:#fdf0ee;border-color:#efc6bf }
.spruch[data-wer="Mya"] { background:#eaf6f4;border-color:#b7dcd6 }
.karte .frage button.falsch { border-color:var(--rot);background:#fdecec }
.hinweis { width:auto;display:block;font-size:.85rem;background:#fff8e6;border-left:4px solid #ff7f00;padding:.45rem .6rem;border-radius:6px;margin:.6rem 0 0 }
.rechnung p { margin:.25rem 0 }
.ergebnis.gut { --farbe:var(--gut);background:#e8f7ee }
.tabelle { width:100%;border-collapse:collapse;font-size:.84rem;margin-top:.6rem;font-variant-numeric:tabular-nums }
.spruch[data-wer=Lumi]::before { color:var(--lumi) }
.tabelle th:first-child,.tabelle td:first-child { text-align:left }
.tabelle th,.tabelle td { border-bottom:1px solid var(--linie);padding:.25rem .35rem;text-align:right }
.tabelle tr.neu td { background:#fff8e6 }
.tabelle th { background:var(--zart);font-weight:700 }
@media (max-width: 900px) {
  .sim { grid-template-columns: minmax(0,1fr); }
}