/* Sammys Lernwelt – gemeinsames Erscheinungsbild */
:root{
  --lw-ink:#24324a;
  --lw-blue:#176c9f;
  --lw-blue-dark:#124f78;
  --lw-sky:#e9f7ff;
  --lw-green:#4b985b;
  --lw-yellow:#ffd76a;
  --lw-red:#cc5555;
  --lw-panel:#ffffff;
  --lw-border:#b9dbea;
  --lw-shadow:0 10px 28px rgba(27,74,104,.12);
  --lw-radius:22px;
}
html{scroll-behavior:smooth}
body.lernwelt-page{
  margin:0;
  min-height:100vh;
  color:var(--lw-ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.62;
  background:linear-gradient(180deg,#dff4ff 0,#f8fff5 48%,#fffdf3 100%);
}
body.lernwelt-page *{box-sizing:border-box}
body.lernwelt-page > main.app,
body.lernwelt-page > .wrap,
body.lernwelt-page > main,
body.lernwelt-page > .layout{
  width:min(1180px,calc(100% - 28px));
  margin:24px auto 42px;
}
body.lernwelt-page main.app,
body.lernwelt-page .wrap{
  border-radius:28px;
}
body.lernwelt-page header:not(.top-status),
body.lernwelt-page .top{
  background:linear-gradient(135deg,#bce8ff,#fff1ae,#e8ddff) !important;
  color:var(--lw-ink) !important;
  border-bottom:4px solid #6eb4dc !important;
}
body.lernwelt-page main.app > header{
  border-radius:26px 26px 0 0;
  padding:24px !important;
}
body.lernwelt-page h1,
body.lernwelt-page h2,
body.lernwelt-page h3{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--lw-blue-dark);
}
body.lernwelt-page h1{line-height:1.15}
body.lernwelt-page a{color:var(--lw-blue-dark)}
body.lernwelt-page button,
body.lernwelt-page .btn,
body.lernwelt-page a.btn{
  font-family:inherit;
  border-radius:13px !important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
body.lernwelt-page button:hover,
body.lernwelt-page .btn:hover,
body.lernwelt-page a.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}
body.lernwelt-page button:focus-visible,
body.lernwelt-page a:focus-visible,
body.lernwelt-page input:focus-visible,
body.lernwelt-page select:focus-visible{
  outline:4px solid rgba(255,199,53,.72);
  outline-offset:2px;
}
body.lernwelt-page .card,
body.lernwelt-page .panel,
body.lernwelt-page .mainpanel,
body.lernwelt-page .sidebar,
body.lernwelt-page .lesson,
body.lernwelt-page .quiz,
body.lernwelt-page .visual,
body.lernwelt-page .info,
body.lernwelt-page .note,
body.lernwelt-page .demo,
body.lernwelt-page .question{
  border-radius:var(--lw-radius) !important;
}
body.lernwelt-page .card,
body.lernwelt-page .panel,
body.lernwelt-page .mainpanel,
body.lernwelt-page .sidebar{
  box-shadow:var(--lw-shadow);
}
body.lernwelt-page .lesson-list button,
body.lernwelt-page .lesson-btn,
body.lernwelt-page .lesson-item{
  border-radius:14px !important;
}
body.lernwelt-page .lesson-list button.active,
body.lernwelt-page .lesson-btn.active,
body.lernwelt-page .lesson-item.active{
  background:#e5f5ff !important;
  border-color:var(--lw-blue) !important;
  color:var(--lw-blue-dark) !important;
}
body.lernwelt-page .progress,
body.lernwelt-page progress{
  border-radius:999px !important;
  overflow:hidden;
}
body.lernwelt-page .progress > div{
  background:linear-gradient(90deg,var(--lw-green),var(--lw-yellow)) !important;
}
body.lernwelt-page .module-links,
body.lernwelt-page .module-jump{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
}
body.lernwelt-page .module-links a,
body.lernwelt-page .module-jump a{
  text-decoration:none;
  background:#edf7fc !important;
  border:1px solid var(--lw-border);
  padding:10px 14px;
  border-radius:13px !important;
  font-weight:bold;
}
body.lernwelt-page .tag,
body.lernwelt-page .badge,
body.lernwelt-page .stars,
body.lernwelt-page .scorebox,
body.lernwelt-page .status-pill{
  border-radius:999px !important;
}
body.lernwelt-page img,
body.lernwelt-page svg,
body.lernwelt-page canvas{max-width:100%}
body.lernwelt-page table{max-width:100%;border-collapse:collapse}
body.lernwelt-page input,
body.lernwelt-page select,
body.lernwelt-page textarea{font-family:inherit}

/* Die Geografie-Module 13 und 14 verwenden dieselben Klassen, besaßen aber kein zuverlässiges Layout. */
body.lernwelt-page.theme-geografie .app{
  background:#fff;
  box-shadow:var(--lw-shadow);
  overflow:hidden;
}
body.lernwelt-page.theme-geografie .layout{
  display:grid;
  grid-template-columns:minmax(230px,300px) minmax(0,1fr);
  gap:18px;
  padding:20px;
}
body.lernwelt-page.theme-geografie .side{
  padding:18px;
  background:#f4fbff;
  border:2px solid var(--lw-border);
  border-radius:20px;
  align-self:start;
}
body.lernwelt-page.theme-geografie .main{min-width:0}
body.lernwelt-page.theme-geografie .lesson-list{display:grid;gap:9px}
body.lernwelt-page.theme-geografie .lesson-btn{
  width:100%;
  border:2px solid #c8dde8;
  background:#fff;
  color:var(--lw-ink);
  padding:11px 12px;
  text-align:left;
  cursor:pointer;
  font-weight:bold;
}
body.lernwelt-page.theme-geografie .nav{display:flex;gap:9px;margin-top:14px}
body.lernwelt-page.theme-geografie .nav .btn{flex:1}
body.lernwelt-page.theme-geografie .btn{
  border:0;
  padding:11px 14px;
  background:#6f7f8b;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}
body.lernwelt-page.theme-geografie .btn.primary{background:var(--lw-blue)}
body.lernwelt-page.theme-geografie .lead{font-size:1.08rem}
body.lernwelt-page.theme-geografie .tip{
  padding:14px 16px;
  margin:14px 0;
  background:#fff8df;
  border:2px solid #edca60;
  border-radius:16px;
}
body.lernwelt-page.theme-geografie .tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
  gap:12px;
}
body.lernwelt-page.theme-geografie .tile{
  padding:15px;
  background:#fff;
  border:2px solid #c4dce7;
  border-radius:17px;
  cursor:pointer;
  text-align:center;
  font-weight:bold;
}
body.lernwelt-page.theme-geografie .tile.active{border-color:var(--lw-green);background:#eefbea}
body.lernwelt-page.theme-geografie .tile .ico{font-size:2.4rem}
body.lernwelt-page.theme-geografie .detail{
  margin-top:14px;
  padding:16px;
  min-height:75px;
  background:#eef7fc;
  border-radius:16px;
}
body.lernwelt-page.theme-geografie .quiz{
  margin-top:18px;
  padding:18px;
  background:#fff8df;
  border:2px solid #edca60;
}
body.lernwelt-page.theme-geografie .answers{display:grid;gap:9px;margin-top:12px}
body.lernwelt-page.theme-geografie .answer{
  padding:11px;
  border:2px solid #c8dbe5;
  background:#fff;
  color:var(--lw-ink);
  text-align:left;
  cursor:pointer;
}
body.lernwelt-page.theme-geografie .answer.correct{background:#ddf3df;border-color:#58a463}
body.lernwelt-page.theme-geografie .answer.wrong{background:#ffe1e1;border-color:#cf6060}
body.lernwelt-page.theme-geografie .feedback{min-height:26px;margin-top:9px;font-weight:bold}
body.lernwelt-page.theme-geografie .module-links{margin-top:18px}
body.lernwelt-page.theme-geografie .ocean-map,
body.lernwelt-page.theme-geografie .polar-scene{max-width:100%;border-radius:20px}

@media(max-width:820px){
  body.lernwelt-page > main.app,
  body.lernwelt-page > .wrap,
  body.lernwelt-page > main,
  body.lernwelt-page > .layout{width:min(100% - 16px,1180px);margin-top:10px}
  body.lernwelt-page.theme-geografie .layout{grid-template-columns:1fr;padding:13px}
  body.lernwelt-page .module-links,
  body.lernwelt-page .module-jump{flex-direction:column}
  body.lernwelt-page .module-links a,
  body.lernwelt-page .module-jump a{text-align:center}
}


/* Dezentes Logo am unteren Ende vorhandener Seitennavigationen */
body.lernwelt-page .lw-side-logo{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid rgba(23,108,159,.18);
  text-align:center;
}
body.lernwelt-page .lw-side-logo img{
  width:min(145px,78%);
  max-height:72px;
  object-fit:contain;
  display:inline-block;
  opacity:.88;
}
@media(max-width:820px){
 body.lernwelt-page .lw-side-logo img{width:min(120px,55%);max-height:58px}
}


/* Korrekturrunde 3: Überbreite Inhalte und Spezialseiten */
body.lernwelt-page{overflow-x:hidden}
body.lernwelt-page .layout,
body.lernwelt-page .main,
body.lernwelt-page .main-area,
body.lernwelt-page .panel,
body.lernwelt-page .diagram-card,
body.lernwelt-page .diagram-wrap,
body.lernwelt-page section{min-width:0}
body.lernwelt-page .diagram-wrap,
body.lernwelt-page .mapscroll,
body.lernwelt-page .solar{max-width:100%;overscroll-behavior-inline:contain}

/* Sonnensystem soll auf normalen Bildschirmen vollständig sichtbar bleiben. */
body.theme-geografie .solar{overflow:hidden!important;padding:12px!important}
body.theme-geografie .orbitrow{
  min-width:0!important;width:100%!important;height:270px!important;
  gap:clamp(6px,1.35vw,19px)!important;padding:0 8px!important;
  justify-content:space-between!important;
}
body.theme-geografie .sun{width:clamp(88px,11vw,135px)!important;height:clamp(88px,11vw,135px)!important}
body.theme-geografie .jupiter{width:clamp(60px,7vw,86px)!important;height:clamp(60px,7vw,86px)!important}
body.theme-geografie .saturn{width:clamp(54px,6.5vw,73px)!important;height:clamp(54px,6.5vw,73px)!important}
body.theme-geografie .uranus,body.theme-geografie .neptune{width:clamp(40px,5vw,55px)!important;height:clamp(40px,5vw,55px)!important}
body.theme-geografie .earth,body.theme-geografie .venus{width:clamp(29px,3.6vw,39px)!important;height:clamp(29px,3.6vw,39px)!important}
body.theme-geografie .mars{width:clamp(23px,2.8vw,29px)!important;height:clamp(23px,2.8vw,29px)!important}
body.theme-geografie .mercury{width:clamp(18px,2.2vw,24px)!important;height:clamp(18px,2.2vw,24px)!important}
body.theme-geografie .saturn:after{width:145%!important;left:-23%!important;top:38%!important;height:25%!important}

/* Computer-Innenleben: SVG fluid statt Mindestbreite. */
body.theme-computer .diagram-wrap{overflow:hidden!important}
body.theme-computer .diagram-wrap svg{min-width:0!important;width:100%!important;height:auto!important;aspect-ratio:1000/640;display:block}
body.theme-computer .layout{grid-template-columns:minmax(250px,320px) minmax(0,1fr)!important}
@media(max-width:980px){body.theme-computer .layout{grid-template-columns:1fr!important}}

/* Notenspiel: Notenschlüssel darf unten nicht abgeschnitten werden. */
body.theme-musik .staff-card{overflow:visible!important;padding:8px 0}
body.theme-musik #staff{height:auto!important;min-height:300px;overflow:visible}

/* Verkehrslektionen vollständig hell und lesbar. */
body.lernwelt-page.theme-verkehr,
body.lernwelt-page.traffic-page{background:linear-gradient(180deg,#dff4ff,#f9fff6)!important;color:#24324a!important}
body.theme-verkehr .shell,body.theme-verkehr .app,body.traffic-page .shell,body.traffic-page .app{background:#fff!important;color:#24324a!important}
body.theme-verkehr aside,body.traffic-page aside{background:#f3faff!important;color:#24324a!important;border-color:#b9dbea!important}
body.theme-verkehr aside button,body.traffic-page aside button{background:#fff!important;color:#24324a!important;border:2px solid #c4dce8!important}
body.theme-verkehr aside button.active,body.traffic-page aside button.active{background:#dff3ff!important;color:#124f78!important;border-color:#176c9f!important}
body.theme-verkehr .hero,body.traffic-page .hero{background:linear-gradient(135deg,#c5ebff,#fff1b8)!important;color:#173f5b!important;border-color:#75b9dc!important}
body.theme-verkehr .hero p,body.traffic-page .hero p{color:#355e75!important}
body.theme-verkehr .card,body.theme-verkehr .sign,body.theme-verkehr .marking,
body.traffic-page .card,body.traffic-page .sign,body.traffic-page .marking{background:#fff!important;color:#24324a!important;border-color:#bfdce9!important;box-shadow:0 7px 18px rgba(27,74,104,.09)!important}
body.theme-verkehr .detail,body.traffic-page .detail{background:#eff8fd!important;color:#24324a!important}
body.theme-verkehr .quiz,body.traffic-page .quiz{background:#fff8df!important;color:#24324a!important;border:2px solid #efcc61!important}
body.theme-verkehr .quiz button,body.traffic-page .quiz button{background:#fff!important;color:#24324a!important;border:2px solid #bfd5e0!important}
body.theme-verkehr .feedback,body.traffic-page .feedback{color:#274f65!important}
body.theme-verkehr .danger,body.traffic-page .danger{background:#ffe9e9!important;color:#7c2929!important;border-left:6px solid #cb5555!important}
body.theme-verkehr table,body.traffic-page table{background:#fff!important;color:#24324a!important}
body.theme-verkehr th,body.traffic-page th{background:#dff3ff!important;color:#124f78!important}
body.theme-verkehr td,body.theme-verkehr th,body.traffic-page td,body.traffic-page th{border-color:#b9dbea!important}
body.theme-verkehr .next,body.traffic-page .next{background:#176c9f!important;color:#fff!important}

/* Fachgrafiken Elektrik */
body.theme-strom .circuit-svg{width:100%;height:auto;display:block;max-height:440px}
body.theme-strom .c-wire{stroke:#176c9f;stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
body.theme-strom .c-wire.off{stroke:#aab7bf;stroke-dasharray:13 10}
body.theme-strom .c-contact{fill:#fff;stroke:#24324a;stroke-width:4}
body.theme-strom .c-switch{stroke:#d69000;stroke-width:9;stroke-linecap:round}
body.theme-strom .c-lamp{fill:#e9eef1;stroke:#344e5d;stroke-width:5}
body.theme-strom .c-lamp.on{fill:#ffe267;filter:drop-shadow(0 0 17px #ffc928)}
body.theme-strom .c-label{font:700 21px Arial,sans-serif;fill:#24324a}
body.theme-strom .c-small{font:600 16px Arial,sans-serif;fill:#516979}
body.theme-strom .cabinet-svg{width:100%;height:auto;display:block;max-height:650px}
body.theme-strom .component-demo{display:grid;grid-template-columns:minmax(190px,260px) 1fr;gap:18px;align-items:center;padding:16px;margin:15px 0;background:#f2f9fd;border:2px solid #b9dbea;border-radius:18px}
body.theme-strom .component-demo svg{width:100%;height:auto;max-height:180px;cursor:pointer}
body.theme-strom .component-demo .demo-actions{min-width:0}
body.theme-strom .component-demo button{margin:4px}
@media(max-width:680px){body.theme-strom .component-demo{grid-template-columns:1fr}}