/* =====================================================================
   Schriften der Laurasien-Vorlagen: Alegreya fuer Ueberschriften,
   Nunito fuer den Fliesstext.
   ===================================================================== */

@font-face {
  font-family:"Alegreya";
  src:url("fonts/Alegreya.ttf") format("truetype");
  font-weight:400 900;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:"Nunito";
  src:url("fonts/Nunito.ttf") format("truetype");
  font-weight:200 1000;
  font-style:normal;
  font-display:swap
}

:root {
  --ink:#17324a;
  --gold:#f2c94c;
  --green:#1e7a34;
  --shadow:0 10px 22px rgba(12,6,2,.45);
  --sidebar:239px;
  --radius:16px;
  --nacht:#071a2e;
  --nacht-tief:#04101f;
  --braun:#4a2c12;
  --braun-hell:#b78a44;
  --creme:#fdf3e0;
  --creme-tief:#f6e5c4;
  --text-braun:#3b2a18;
  --navy:#24406e;
  --schrift-titel:"Alegreya",Georgia,serif;
  --schrift-text:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  min-width:320px;
  color:var(--text-braun);
  font-family:var(--schrift-text);
  background:#efe0c2
}

button,select {
  font:inherit
}

button {
  cursor:pointer
}

img {
  display:block;
  max-width:100%
}

.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar);
  z-index:50;
  display:flex;
  flex-direction:column;
  padding:17px 13px;
  color:#fff5d6;
  background:radial-gradient(circle at 40% 0%,rgba(39,111,146,.36),transparent 30%),linear-gradient(180deg,#071a2c,#071522 72%,#0c2941);
  box-shadow:12px 0 35px rgba(0,0,0,.2)
}

.brand {
  display:grid;
  justify-items:center;
  gap:2px;
  text-decoration:none;
  color:#ffe398;
  padding:10px 4px 22px
}

.brand-mark {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:28px;
  border:1px solid rgba(255,225,124,.65);
  background:radial-gradient(circle,#2d6b7a,#0b2338 72%);
  box-shadow:0 0 24px rgba(255,203,78,.18)
}

.brand-title {
  font:700 30px/1 "Alegreya",Georgia,serif
}

.brand-subtitle {
  font-size:11px;
  color:#d9e8ec
}

.nav-list {
  display:grid;
  gap:7px
}

.nav-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:10px 12px;
  color:#edf7fb;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:14px
}

.nav-item.is-active {
  color:#fff0a6;
  border-color:rgba(236,190,74,.7);
  background:linear-gradient(90deg,rgba(204,145,34,.3),rgba(77,111,113,.12));
  box-shadow:inset 0 0 16px rgba(255,216,106,.13)
}

.nav-item.is-active:before {
  content:"";
  position:absolute;
  left:-6px;
  top:9px;
  bottom:9px;
  width:4px;
  border-radius:99px;
  background:#ffd96a;
  box-shadow:0 0 10px #ffd96a
}

.nav-item span:first-child {
  width:27px;
  text-align:center;
  font-size:21px
}

.sidebar-worldmark {
  margin-top:auto;
  padding:14px 13px;
  border-radius:18px;
  border:1px solid rgba(255,222,139,.27);
  background:rgba(34,103,124,.22);
  text-align:center;
  font-size:10px
}

.sidebar-worldmark strong {
  display:block;
  margin-top:3px;
  font:700 14px "Alegreya",Georgia,serif
}

.worldmark-glow {
  display:block;
  width:12px;
  height:12px;
  margin:0 auto 7px;
  border-radius:50%;
  background:#f7d46c;
  box-shadow:0 0 18px #f7d46c
}

.sidebar-help {
  margin-top:9px;
  padding:10px;
  border:0;
  background:transparent;
  color:#eaf3f7
}

.cockpit {
  margin-left:var(--sidebar);
  min-height:100vh;
  overflow:hidden
}

.world-stage {
  position:relative;
  min-height:690px;
  padding:22px 26px 34px;
  color:white;
  overflow:hidden;
  background:#86b7bc
}

.stage-backdrop {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.stage-scrim {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,28,46,.42),rgba(6,28,46,.04) 28%,rgba(3,20,30,.42) 100%),radial-gradient(circle at 55% 28%,rgba(255,243,177,.25),transparent 25%)
}

.topbar,.stage-grid {
  position:relative;
  z-index:2;
  max-width:1500px;
  margin:auto
}

.topbar {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:16px
}

.topbar h1 {
  margin:0;
  font:800 clamp(32px,3.2vw,50px)/1 "Alegreya",Georgia,serif;
  text-shadow:0 3px 18px rgba(0,0,0,.28)
}

.topbar p:not(.eyebrow) {
  margin:7px 0 0;
  color:#f1f7f2
}

.eyebrow {
  margin:0 0 5px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
  color:#6e531f
}

.eyebrow.light {
  color:#ffe18a
}

.topbar-actions {
  display:flex;
  gap:9px
}

.icon-button,.profile-pill {
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:13px;
  border:1px solid rgba(255,222,141,.42);
  color:white;
  background:rgba(5,32,53,.76)
}

.icon-button {
  padding:0 14px
}

.profile-pill {
  padding:4px 14px 4px 6px
}

.avatar-placeholder {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#17344d;
  background:#ffd482;
  font-weight:900
}

.stage-grid {
  display:grid;
  grid-template-columns:minmax(180px,.42fr) minmax(520px,1.38fr) minmax(290px,.62fr);
  gap:18px;
  align-items:end
}

.laura-welcome {
  align-self:end;
  display:grid;
  gap:8px
}

.laura-asset {
  min-height:315px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.23))
}

.laura-asset img {
  max-height:315px;
  object-fit:contain
}

.speech-card {
  position:relative;
  padding:14px 15px;
  border-radius:18px;
  color:#1a3348;
  background:rgba(255,247,224,.94);
  border:1px solid rgba(189,135,43,.72);
  box-shadow:0 10px 25px rgba(0,0,0,.18)
}

.speech-card:before {
  content:"";
  position:absolute;
  left:34px;
  top:-12px;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-bottom:14px solid rgba(255,247,224,.94)
}

.speech-card span {
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  color:#805e1f
}

.speech-card strong {
  display:block;
  font:700 17px "Alegreya",Georgia,serif
}

.speech-card p {
  margin:5px 0 0;
  font-size:12px;
  line-height:1.4;
  color:#55616c
}

.future-card {
  min-height:520px;
  display:grid;
  grid-template-rows:auto 1fr;
  overflow:hidden;
  border-radius:32px;
  border:1px solid rgba(246,216,132,.68);
  background:linear-gradient(180deg,rgba(6,35,55,.68),rgba(6,35,55,.17));
  box-shadow:0 24px 60px rgba(0,0,0,.25)
}

.future-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 21px 15px;
  background:rgba(5,29,48,.56);
  border-bottom:1px solid rgba(255,231,162,.22)
}

.future-heading h2 {
  margin:0;
  font:800 26px "Alegreya",Georgia,serif;
  color:#fff7dc
}

.stage-chip {
  flex:none;
  padding:8px 12px;
  border-radius:99px;
  background:#ffdb66;
  color:#40300d;
  font-size:12px;
  font-weight:900
}

.future-art {
  position:relative;
  min-height:430px;
  display:grid;
  place-items:center;
  padding:18px 28px 26px
}

.future-art:before {
  content:"";
  position:absolute;
  inset:auto 10% 3% 10%;
  height:20%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(31,71,45,.65),transparent 70%)
}

.future-glow {
  position:absolute;
  width:62%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,242,173,.42),rgba(255,235,158,.1) 48%,transparent 70%)
}

.future-art img {
  position:relative;
  z-index:2;
  width:min(780px,96%);
  max-height:405px;
  object-fit:contain
}

.progress-orbit {
  display:grid;
  gap:12px
}

.stat-card,.school-card {
  border-radius:20px;
  border:1px solid rgba(240,207,118,.6);
  box-shadow:0 11px 28px rgba(0,0,0,.2)
}

.stat-card {
  padding:16px;
  color:white;
  background:linear-gradient(145deg,rgba(5,42,69,.94),rgba(8,85,112,.91))
}

.stat-crystal {
  background:linear-gradient(145deg,rgba(31,30,92,.94),rgba(102,39,154,.9))
}

.stat-heading {
  display:flex;
  gap:8px;
  align-items:center;
  font:800 15px "Alegreya",Georgia,serif
}

.stat-icon {
  font-size:24px
}

.stat-value {
  display:block;
  margin:10px 0 9px;
  font-size:31px
}

.progress-track {
  height:10px;
  border-radius:99px;
  overflow:hidden;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.37)
}

.progress-track span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#ffd03d,#fff3a8)
}

.stat-crystal .progress-track span {
  background:linear-gradient(90deg,#9850e3,#f393ff)
}

.stat-card p {
  margin:7px 0 0;
  font-size:10px;
  color:#dcebf1
}

.school-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  color:#183349;
  background:rgba(255,246,219,.95)
}

.school-illustration {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f2d58d;
  border:1px solid #c89438;
  font-size:33px
}

.school-copy h2 {
  margin:0 0 5px;
  font:800 17px "Alegreya",Georgia,serif
}

.school-values {
  display:flex;
  gap:12px;
  font-size:12px
}

.school-copy small {
  font-size:9px;
  color:#6c6b65
}

.content-wrap {
  position:relative;
  z-index:3;
  max-width:1500px;
  margin:-18px auto 0;
  padding:0 26px 38px
}

.parchment {
  position:relative;
  border:1px solid rgba(145,99,31,.5);
  border-radius:var(--radius);
  background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.8),transparent 25%),linear-gradient(180deg,rgba(255,250,233,.98),rgba(247,227,183,.98));
  box-shadow:var(--shadow),inset 0 0 0 4px rgba(255,255,255,.26)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px
}

.section-heading h2,.current-stage-card h2,.tip-card h2,.activity-strip h2 {
  margin:0;
  font:800 24px/1.07 "Alegreya",Georgia,serif;
  color:#17364e
}

.section-heading.compact h2 {
  font-size:21px
}

.section-subtitle {
  margin:5px 0 0;
  font-size:12px;
  color:#68736e
}

.data-badge {
  padding:6px 9px;
  border-radius:99px;
  background:#e8cf95;
  color:#6f501d;
  font-size:10px;
  font-weight:900
}

.career-card {
  padding:20px 22px 22px;
  margin-bottom:16px
}

.career-map {
  position:relative;
  padding:22px 10px 7px
}

.career-route {
  position:absolute;
  left:8%;
  right:8%;
  top:68px;
  border-top:4px dotted rgba(93,68,31,.55)
}

.career-path {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:10px
}

.career-step {
  text-align:center;
  position:relative
}

.career-step:nth-child(even) {
  transform:translateY(23px)
}

.career-badge {
  width:84px;
  height:84px;
  margin:0 auto 8px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:3px solid #596369;
  font:800 24px "Alegreya",Georgia,serif;
  color:#636a6e;
  background:radial-gradient(circle at 32% 28%,#f2f2ee,#a8aeab 75%);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.52),0 5px 12px rgba(0,0,0,.15)
}

.career-step.is-complete .career-badge {
  color:white;
  border-color:#1b698b;
  background:radial-gradient(circle at 32% 28%,#5ec2d8,#236d8d 74%)
}

.career-step.is-current .career-badge {
  color:white;
  border-color:#ffe27d;
  background:radial-gradient(circle at 32% 28%,#9b75e3,#5a29ab 74%);
  box-shadow:0 0 0 6px rgba(255,218,102,.5),0 0 30px rgba(255,204,69,.68)
}

.career-step.is-current:before {
  content:"Aktuell";
  position:absolute;
  left:50%;
  top:-15px;
  transform:translateX(-50%);
  padding:4px 9px;
  border-radius:99px;
  background:#ffd966;
  color:#4c3607;
  font-size:9px;
  font-weight:900
}

.career-name {
  font-size:11px;
  font-weight:900
}

.career-state {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  margin-top:4px;
  border-radius:50%;
  font-size:10px;
  background:#9ca2a2;
  color:white
}

.career-step.is-complete .career-state,.career-step.is-current .career-state {
  background:#0ba25d
}

.priority-grid {
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:16px;
  margin-bottom:16px
}

.current-stage-card {
  min-height:280px;
  padding:22px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px
}

.current-stage-copy {
  align-self:center
}

.current-stage-copy>p:not(.eyebrow) {
  line-height:1.5;
  color:#506273
}

.secondary-button,.primary-button,.text-button,.round-button {
  border:0;
  border-radius:11px;
  font-weight:900
}

.secondary-button {
  padding:11px 14px;
  color:white;
  background:linear-gradient(#0d648e,#084663);
  box-shadow:0 3px 0 #06364d
}

.primary-button {
  padding:13px 16px;
  color:white;
  background:linear-gradient(#16ad69,#087b49);
  box-shadow:0 4px 0 #065f39
}

.guardian-placeholder {
  align-self:end;
  text-align:center
}

.guardian-placeholder span {
  font-size:8px;
  color:#7a6c51;
  text-transform:uppercase
}

.guardian-placeholder img {
  max-height:205px;
  margin:auto
}

.next-steps-card {
  padding:22px
}

.quest-mark {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#ffd65a
}

.next-steps-list {
  display:grid;
  gap:10px;
  margin-top:14px
}

.next-step-item {
  display:grid;
  grid-template-columns:52px 1fr;
  gap:11px;
  align-items:center;
  padding:11px 12px;
  border:1px solid #d9bc78;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,244,210,.67))
}

.next-step-icon {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50% 50% 44% 56%;
  font-size:26px;
  background:#dcebf1
}

.next-step-item strong {
  display:block;
  font:700 15px "Alegreya",Georgia,serif
}

.next-step-item p {
  margin:3px 0 0;
  color:#6e6f6b;
  font-size:11px
}

.journey-button {
  width:100%;
  margin-top:14px;
  font-size:17px;
  box-shadow:0 5px 0 #075b37,0 10px 22px rgba(7,111,63,.17)
}

.integration-note {
  text-align:center;
  font-size:9px;
  color:#7b6b4f;
  margin:8px 0 0
}

.rewards-grid {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:16px;
  margin-bottom:16px
}

.qualifications-card {
  padding:21px
}

.state-legend {
  font-size:9px;
  color:#696b69
}

.legend-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin:0 3px 0 5px
}

.legend-dot.confirmed {
  background:#0f985a
}

.legend-dot.pending {
  background:#9da09e
}

.qualification-grid {
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:10px;
  margin-top:18px
}

.qualification-item {
  text-align:center
}

.qualification-icon {
  width:min(78px,100%);
  aspect-ratio:1;
  margin:0 auto 7px;
  border-radius:50%;
  border:3px solid #757b7d;
  background:#d5d7d5;
  filter:grayscale(1);
  opacity:.68;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.5),0 4px 10px rgba(0,0,0,.1)
}

.qualification-item.is-confirmed .qualification-icon {
  border-color:#d9a63f;
  background:#fff1bd;
  filter:none;
  opacity:1;
  box-shadow:0 0 0 3px rgba(255,218,101,.3),0 6px 14px rgba(126,88,23,.16)
}

.qualification-name {
  font-size:9px;
  font-weight:900
}

.qualification-status {
  display:block;
  margin-top:3px;
  font-size:8px;
  color:#7b7e7b
}

.qualification-item.is-confirmed .qualification-status {
  color:#087547
}

.tip-card {
  display:grid;
  grid-template-columns:145px 1fr;
  min-height:230px;
  overflow:hidden;
  border-radius:var(--radius);
  color:white;
  border:1px solid #477696;
  background:radial-gradient(circle at 18% 24%,rgba(255,222,115,.25),transparent 28%),linear-gradient(145deg,#123d5d,#174f6e 60%,#244b56);
  box-shadow:var(--shadow)
}

.tip-visual {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,216,111,.08))
}

.tip-visual img {
  width:125px;
  max-height:210px;
  object-fit:contain
}

.tip-content {
  padding:20px 18px 18px 0;
  display:grid;
  align-content:center
}

.tip-head {
  display:flex;
  justify-content:space-between;
  gap:10px
}

.tip-card h2 {
  color:#fff8df;
  font-size:19px
}

.tip-controls {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px
}

.round-button {
  width:27px;
  height:27px;
  padding:0;
  background:#ffe07a;
  color:#294159
}

.tip-card blockquote {
  margin:14px 0 0;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(255,255,255,.1);
  border-left:3px solid #ffd96c;
  font:500 12px/1.5 "Alegreya",Georgia,serif;
  color:#f4f7f6
}

.activity-strip {
  padding:16px 18px 14px;
  border-radius:20px;
  border:1px solid rgba(111,90,54,.32);
  background:rgba(255,249,232,.82);
  box-shadow:0 7px 20px rgba(34,39,26,.1)
}

.activity-heading {
  display:flex;
  align-items:center;
  justify-content:space-between
}

.activity-strip h2 {
  font-size:18px
}

.activities-list {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:10px
}

.activity-item {
  display:grid;
  grid-template-columns:22px 34px 1fr auto;
  align-items:center;
  gap:7px;
  padding:9px;
  border:1px solid rgba(197,166,103,.46);
  border-radius:12px;
  background:rgba(255,255,255,.53)
}

.activity-check {
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#11a05d;
  color:white;
  font-size:10px
}

.activity-icon {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#dfedf0;
  font-size:18px
}

.activity-copy strong {
  display:block;
  font-size:10px
}

.activity-copy span {
  display:block;
  font-size:8px;
  color:#777
}

.activity-reward {
  font-size:10px;
  font-weight:900;
  color:#bd6718
}

.activity-reward small {
  display:block;
  font-size:8px;
  color:#888
}

.text-button {
  padding:8px 10px;
  background:transparent;
  color:#244a65;
  border:1px solid #cfb375
}

.dialog-panel,.message-dialog {
  width:min(700px,calc(100vw - 30px));
  border:1px solid #ad7b2b;
  border-radius:18px;
  padding:0;
  background:#fff8e8;
  color:var(--ink)
}

.dialog-panel::backdrop,.message-dialog::backdrop {
  background:rgba(3,18,31,.65)
}

.dialog-inner,.message-dialog-inner {
  padding:20px
}

.dialog-header {
  display:flex;
  justify-content:space-between
}

.dialog-header h2,.message-dialog h2 {
  margin:0;
  font:800 26px "Alegreya",Georgia,serif
}

.dialog-close {
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#eedebd;
  font-size:24px
}

.control-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:18px 0
}

.control-grid label {
  display:grid;
  gap:6px;
  font-size:12px;
  font-weight:800
}

select {
  padding:10px;
  border:1px solid #bda372;
  border-radius:9px;
  background:white
}

fieldset {
  border:1px solid #d0ba8c;
  border-radius:12px
}

.qualification-controls {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:7px 12px
}

.qualification-controls label {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px
}

.message-dialog-inner {
  display:grid;
  gap:11px
}

.is-hidden {
  display:none!important
}

@media(max-width:1220px) {
  :root {
    --sidebar:190px
  }
  .stage-grid {
    grid-template-columns:180px minmax(430px,1fr) 280px
  }
  .qualification-grid {
    grid-template-columns:repeat(4,1fr)
  }
  .activities-list {
    grid-template-columns:1fr
  }
}

@media(max-width:1020px) {
  :root {
    --sidebar:78px
  }
  .sidebar {
    align-items:center;
    padding:12px 8px
  }
  .brand-title,.brand-subtitle,.nav-item span:last-child,.sidebar-worldmark,.sidebar-help span {
    display:none
  }
  .nav-list {
    width:100%
  }
  .nav-item {
    justify-content:center
  }
  .nav-item span:first-child {
    width:auto
  }
  .stage-grid {
    grid-template-columns:160px minmax(0,1fr)
  }
  .progress-orbit {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .school-card {
    grid-column:1/-1
  }
  .priority-grid,.rewards-grid {
    grid-template-columns:1fr
  }
}

@media(max-width:760px) {
  :root {
    --sidebar:0px
  }
  .sidebar {
    position:sticky;
    top:0;
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    gap:8px;
    padding:8px 10px;
    overflow-x:auto
  }
  .brand {
    padding:0
  }
  .brand-mark {
    width:34px;
    height:34px
  }
  .nav-list {
    display:flex;
    width:auto
  }
  .nav-item {
    min-width:42px;
    min-height:38px;
    padding:6px
  }
  .sidebar-help {
    margin:0 0 0 auto
  }
  .cockpit {
    margin-left:0
  }
  .world-stage {
    min-height:0;
    padding:16px 12px 28px
  }
  .stage-grid {
    grid-template-columns:1fr
  }
  .laura-welcome {
    grid-template-columns:125px 1fr;
    align-items:end
  }
  .laura-asset {
    min-height:170px
  }
  .laura-asset img {
    max-height:170px
  }
  .future-card {
    min-height:430px
  }
  .future-art {
    min-height:335px
  }
  .progress-orbit {
    grid-template-columns:1fr 1fr
  }
  .content-wrap {
    padding:0 12px 25px
  }
  .career-path {
    grid-template-columns:repeat(3,1fr);
    gap:28px 8px
  }
  .career-step:nth-child(even) {
    transform:none
  }
  .career-route {
    display:none
  }
  .current-stage-card {
    grid-template-columns:1fr 130px
  }
  .qualification-grid {
    grid-template-columns:repeat(4,1fr)
  }
}

@media(max-width:520px) {
  .topbar h1 {
    font-size:30px
  }
  .icon-button span,.profile-pill>span:last-child {
    display:none
  }
  .laura-welcome {
    grid-template-columns:95px 1fr
  }
  .laura-asset {
    min-height:130px
  }
  .laura-asset img {
    max-height:130px
  }
  .future-heading {
    align-items:flex-start
  }
  .future-heading h2 {
    font-size:20px
  }
  .future-art {
    min-height:290px;
    padding:10px
  }
  .progress-orbit {
    grid-template-columns:1fr
  }
  .school-card {
    grid-column:1
  }
  .career-path {
    grid-template-columns:repeat(2,1fr)
  }
  .current-stage-card {
    grid-template-columns:1fr 105px
  }
  .qualification-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .tip-card {
    grid-template-columns:90px 1fr
  }
  .tip-visual img {
    width:85px
  }
  .tip-content {
    padding:17px 12px 17px 0
  }
  .activity-heading {
    align-items:flex-start;
    flex-direction:column
  }
  .control-grid,.qualification-controls {
    grid-template-columns:1fr
  }
}
/* --- Cockpit in der Plattform: Ergaenzungen zur freigegebenen Struktur --- */

.is-hidden {
  display:none !important
}

/* Fehlt zu einem Qualifikations-Abzeichen die Bilddatei, bleibt die Stelle ruhig und leer,
   statt ein zerbrochenes Bild oder ein fremdes Abzeichen zu zeigen. */
.qualification-icon.is-missing {
  visibility:hidden
}

.login-view {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px 16px;
  background:radial-gradient(circle at 50% 0%,rgba(39,111,146,.35),transparent 45%),linear-gradient(180deg,#071a2c,#0c2941)
}

.login-card {
  width:min(430px,100%);
  display:grid;
  gap:7px;
  padding:26px 28px 24px;
  border:1px solid rgba(145,99,31,.5);
  border-radius:22px;
  color:var(--ink);
  background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.8),transparent 25%),linear-gradient(180deg,rgba(255,250,233,.99),rgba(247,227,183,.99));
  box-shadow:var(--shadow),inset 0 0 0 4px rgba(255,255,255,.26)
}

.login-card .brand-mark {
  margin:0 auto 4px
}

.login-card h1 {
  margin:0;
  text-align:center;
  font:800 26px/1.1 "Alegreya",Georgia,serif
}

.login-sub {
  margin:0 0 10px;
  text-align:center;
  font-size:12px;
  color:#68736e
}

.login-card label {
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#6f501d
}

.login-card input {
  padding:12px 13px;
  border:1px solid #d9bc78;
  border-radius:12px;
  background:#fffdf7;
  color:inherit;
  font:inherit
}

/* Der Knopf der Anmeldekarten, Fassung 0.24.0 (13.10.2026): Er war 15 px gross und sass
   auf der Seite "Passwort vergessen" mit 136 px Breite 117 px links der Kartenmitte,
   weil die Felder dort im Textfluss liefen. Jetzt traegt er 16 px Schrift, mindestens
   50 px Hoehe und fuellt als Rasterkind die Innenbreite der Karte - damit steht er
   mittig und ist deutlich groesser. */
.login-card .primary-button {
  margin-top:10px;
  border:0;
  border-radius:14px;
  font-size:16px;
  min-height:50px;
  font-weight:800
}

.form-message {
  min-height:18px;
  margin:2px 0 0;
  font-size:12px;
  color:#0b8a52
}

.form-message.error {
  color:#b03a2e
}

.journey-card,.logbook-card {
  padding:20px 22px;
  margin-top:16px
}

/* Aufgabenkarte: die Inhalte der erreichten Regionen mit einem Weg, sie zu erledigen.
   Vorher zeigte das Cockpit nur Zaehler ("1 von 19"), aber keinen Inhalt. */
.tasks-card {
  padding:20px 22px;
  margin-top:16px
}

.task-list {
  display:grid;
  gap:14px;
  margin-top:14px
}

.task-region {
  display:grid;
  gap:9px
}

.task-region-head {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  justify-content:space-between
}

.task-region-head strong {
  font:800 15px "Alegreya",Georgia,serif;
  color:#17364e
}

.task-region-head span {
  font-size:11px;
  color:#68736e
}

.task-mission {
  display:grid;
  gap:7px;
  padding:10px 11px;
  border:1px solid #d9bc78;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,244,210,.67))
}

.task-mission-title {
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  color:#8a5f14;
  text-transform:uppercase
}

.task-row {
  display:grid;
  grid-template-columns:26px 1fr auto;
  gap:10px;
  align-items:center;
  padding:7px 0;
  border-top:1px dashed rgba(217,188,120,.7)
}

.task-row:first-of-type {
  border-top:0
}

.task-mark {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#e8dcc0;
  color:#8a7850;
  font-size:12px
}

.task-row.is-done .task-mark {
  background:#0b9d5a;
  color:#fff
}

.task-row.is-pending .task-mark {
  background:#d6a13d;
  color:#fff
}

.task-row.is-blocked .task-mark {
  background:#e6ded0;
  color:#6b5c46
}

.task-row.is-blocked .task-copy span {
  color:#7a6a4f
}

.task-copy {
  display:grid;
  gap:2px
}

.task-copy strong {
  font:700 13px "Alegreya",Georgia,serif;
  color:#17364e
}

.task-copy span {
  font-size:10px;
  color:#68736e
}

.task-row.is-done .task-copy strong {
  color:#087547
}

.task-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end
}

.task-button {
  padding:6px 10px;
  border:1px solid #c9a75a;
  border-radius:10px;
  background:#fff7e2;
  color:#17364e;
  font-size:11px;
  font-weight:700;
  cursor:pointer
}

.task-button:hover:not(:disabled) {
  background:#ffedc4
}

.task-button:disabled {
  opacity:.55;
  cursor:default
}

.task-button.is-primary {
  border-color:#0b9d5a;
  background:#0b9d5a;
  color:#fff
}

.task-button.is-primary:hover:not(:disabled) {
  background:#0a8b50
}

.task-caption {
  font-size:11px;
  color:#8a5f14
}

.task-challenge {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:9px 11px;
  border:1px dashed #b98a2c;
  border-radius:14px;
  background:rgba(255,240,196,.6)
}

.request-block {
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #e2d3ae
}

.block-title {
  margin:0 0 8px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  color:#8a5f14;
  text-transform:uppercase
}

.request-list {
  display:grid;
  gap:7px;
  margin-top:8px
}

.request-row {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border:1px solid #e2cfa0;
  border-radius:12px;
  background:rgba(255,255,255,.7)
}

.request-row strong {
  font:700 12px "Alegreya",Georgia,serif;
  color:#17364e
}

.request-row span {
  font-size:10px;
  color:#68736e
}

.request-state {
  padding:2px 8px;
  border-radius:99px;
  background:#f4e2b4;
  font-size:10px;
  font-weight:700;
  color:#8a5f14
}

.request-state.is-confirmed {
  background:#d9f2e4;
  color:#087547
}

.request-state.is-rejected {
  background:#f6dede;
  color:#9b2c2c
}

/* Meldung einer besonderen Leistung: das Kind erzeugt eine Adresse, die die
   bestaetigende Person einmalig aufruft. */
.report-block {
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #e2d3ae
}

.report-hint {
  margin:0 0 10px;
  font-size:11px;
  color:#68736e
}

.report-route {
  margin:10px 0 0;
  font-size:11px;
  color:#8a5f14
}

.report-controls {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:9px;
  align-items:end
}

.report-field {
  display:grid;
  gap:4px
}

.report-field span {
  font-size:10px;
  font-weight:700;
  color:#68736e
}

.report-field select,.report-field input {
  width:100%;
  padding:7px 9px;
  border:1px solid #c9a75a;
  border-radius:10px;
  background:#fffdf6;
  color:#17364e;
  font-size:12px
}

.report-result {
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #0b9d5a;
  border-radius:12px;
  background:#eefaf3
}

.report-result p {
  margin:0 0 8px;
  font-size:11px;
  color:#17364e
}

.report-link-row {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center
}

.report-link-row code {
  flex:1 1 260px;
  padding:7px 9px;
  border-radius:9px;
  background:#fff;
  border:1px solid #b9dcc9;
  font-size:11px;
  color:#17364e;
  word-break:break-all
}

.ghost-button {
  padding:6px 10px;
  border:1px solid #0b9d5a;
  border-radius:10px;
  background:#fff;
  color:#087547;
  font-size:11px;
  font-weight:700;
  cursor:pointer
}

.ghost-button:hover {
  background:#eefaf3
}

.region-list,.logbook-list {
  display:grid;
  gap:10px;
  margin-top:14px
}

.region-row {
  display:grid;
  grid-template-columns:1fr 190px;
  gap:14px;
  align-items:center;
  padding:11px 12px;
  border:1px solid #d9bc78;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,244,210,.67))
}

.region-copy {
  display:grid;
  gap:3px
}

.region-copy strong {
  font:800 14px "Alegreya",Georgia,serif;
  color:#17364e
}

.region-copy span {
  font-size:11px;
  color:#68736e
}

.region-copy .region-earlier {
  font-size:11px;
  color:#9a6b1f
}

.region-track {
  height:10px;
  border-radius:99px;
  background:#e8dcc0;
  overflow:hidden
}

.region-track span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#f0b93f,#0b9d5a)
}

.logbook-row {
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(197,166,103,.46);
  border-radius:12px;
  background:rgba(255,255,255,.53)
}

.logbook-row.is-due {
  border-color:#c89438;
  background:linear-gradient(90deg,rgba(255,249,228,.95),rgba(255,238,190,.85))
}

.logbook-mark {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f2d58d;
  font-size:12px;
  color:#6f501d
}

.logbook-copy {
  display:grid;
  gap:2px
}

.logbook-copy strong {
  font-size:13px;
  color:#17364e
}

.logbook-copy span {
  font-size:10px;
  color:#68736e
}

.list-empty {
  margin:0;
  padding:12px;
  border:1px dashed #d9bc78;
  border-radius:12px;
  font-size:12px;
  color:#68736e
}

@media(max-width:760px) {
  .region-row {
    grid-template-columns:1fr;
    gap:8px
  }
}

/* =========================================================
   Laurasien – Integrationsrunde 1: echte Assets, immersive UI
   Bestehende IDs/Hooks bleiben unverändert.
   ========================================================= */

/* Navigation: echte Laurasien-Icons statt Unicode/Emoji */
.nav-item .nav-icon,
.sidebar-help .nav-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  overflow:visible;
}
.nav-item .nav-icon img,
.sidebar-help .nav-icon img{
  width:34px;
  height:34px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.nav-item.is-active .nav-icon img{
  filter:drop-shadow(0 0 8px rgba(255,218,103,.65));
}
.sidebar-help{display:flex;align-items:center;justify-content:center;gap:9px}
.sidebar-help .help-icon img{width:30px;height:30px}

/* Bühne: weniger SaaS-Karte, mehr Laurasien-Welt */
.world-stage{min-height:720px;background:#729fa9}
.stage-scrim{
  background:
    linear-gradient(180deg,rgba(3,20,36,.40),rgba(3,20,36,.02) 31%,rgba(3,20,30,.32) 100%),
    radial-gradient(circle at 56% 45%,rgba(255,238,161,.26),transparent 30%);
}
.future-card{
  min-height:535px;
  overflow:visible;
  border-color:rgba(255,226,139,.32);
  background:linear-gradient(180deg,rgba(5,31,48,.42),rgba(5,31,48,.07) 42%,rgba(5,31,48,.02));
  box-shadow:0 22px 55px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(1.5px);
}
.future-heading{
  background:linear-gradient(180deg,rgba(5,29,48,.52),rgba(5,29,48,.20));
  border-bottom-color:rgba(255,231,162,.12);
}
.future-art{min-height:445px;padding:8px 18px 12px;overflow:visible}
.future-glow{
  width:78%;
  background:radial-gradient(circle,rgba(255,244,175,.48),rgba(255,223,102,.14) 43%,transparent 72%);
  filter:blur(2px);
}
.future-art img{
  width:min(900px,108%);
  max-height:455px;
  filter:drop-shadow(0 20px 20px rgba(0,0,0,.27));
}

/* Ressourcen als schwebende Artefaktkarten */
.progress-orbit{align-self:center;gap:14px}
.stat-card{
  position:relative;
  overflow:hidden;
  padding:17px 17px 15px;
  border-color:rgba(255,224,132,.70);
  background:linear-gradient(145deg,rgba(4,37,61,.88),rgba(6,78,103,.78));
  backdrop-filter:blur(6px);
}
.stat-crystal{background:linear-gradient(145deg,rgba(34,27,91,.88),rgba(90,41,140,.79))}
.stat-icon-img{width:46px;height:46px;margin:-5px 2px -5px -4px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.34))}
.stat-heading{font-size:16px}.stat-value{font-size:34px;margin-top:12px}

/* Schule: echte Szene bekommt Raum */
.school-card{align-items:stretch;padding:10px 12px 10px 10px;gap:14px;min-height:118px}
.school-illustration{
  width:124px;
  height:96px;
  flex:0 0 124px;
  border:0;
  border-radius:16px;
  background:transparent;
  overflow:hidden;
  box-shadow:0 7px 16px rgba(46,55,46,.18);
}
.school-illustration img{width:100%;height:100%;object-fit:cover;border-radius:16px}
.school-copy{align-self:center}.school-copy h2{font-size:18px}

/* Karriere: vollständige Embleme statt Kreis-Cropping */
.career-map{padding-top:30px}
.career-route{top:88px}
.career-badge{
  width:min(142px,94%);
  height:132px;
  margin:0 auto 9px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
}
.career-badge img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0;
  display:block;
  filter:drop-shadow(0 6px 8px rgba(47,40,25,.20));
}
.career-step.is-upcoming .career-badge img{filter:grayscale(1) saturate(.25);opacity:.48}
.career-step.is-complete .career-badge img{filter:drop-shadow(0 6px 8px rgba(47,40,25,.20));opacity:1}
.career-step.is-current .career-badge img{filter:drop-shadow(0 0 11px rgba(245,192,53,.72)) drop-shadow(0 7px 8px rgba(47,40,25,.22));opacity:1}
.career-step.is-current:before{top:-10px;z-index:4}
.career-name{font-size:12px}

/* Aktuelle Karrierestufe: echtes dynamisches Abzeichen */
.current-stage-card{grid-template-columns:minmax(0,1fr) 210px;overflow:hidden}
.guardian-placeholder.current-career-visual{align-self:center;display:grid;place-items:center}
.guardian-placeholder.current-career-visual img{
  width:190px;
  max-height:220px;
  object-fit:contain;
  filter:drop-shadow(0 10px 12px rgba(74,54,24,.22));
}

/* Zusatzqualifikationen: volle Badge-Form erhalten */
.qualification-grid{gap:14px}
.qualification-icon{
  width:min(108px,100%);
  height:105px;
  aspect-ratio:auto;
  margin:0 auto 8px;
  object-fit:contain;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:grayscale(1) saturate(.22);
  opacity:.46;
}
.qualification-item.is-confirmed .qualification-icon{
  border:0;
  background:transparent;
  filter:drop-shadow(0 6px 7px rgba(96,66,22,.18));
  opacity:1;
  box-shadow:none;
}
.qualification-name{font-size:10px}

@media(max-width:1200px){
  .career-badge{height:112px;width:min(124px,96%)}
  .qualification-icon{height:92px}
  .school-illustration{width:105px;flex-basis:105px}
}
@media(max-width:1020px){
  .nav-item .nav-icon{width:38px;height:38px;flex-basis:38px}
  .nav-item .nav-icon img{width:38px;height:38px}
  .career-badge{height:118px}
  .current-stage-card{grid-template-columns:minmax(0,1fr) 175px}
}
@media(max-width:760px){
  .nav-item .nav-icon{width:30px;height:30px;flex-basis:30px}
  .nav-item .nav-icon img{width:30px;height:30px}
  .sidebar-help .nav-icon{width:30px;height:30px;flex-basis:30px}
  .career-badge{height:110px}
  .school-illustration{width:112px;height:88px;flex-basis:112px}
}
@media(max-width:520px){
  .current-stage-card{grid-template-columns:1fr 120px}
  .guardian-placeholder.current-career-visual img{width:112px}
  .career-badge{height:104px}
  .qualification-icon{height:96px}
}

/* =========================================================
   Integrationsrunde 2 – kompakter Desktop / Referenznähe
   Ziel: mehr Cockpit auf einer Bildschirmhöhe, echte Assets
   bleiben präsent. Keine IDs/Hooks/JS-Logik verändert.
   ========================================================= */
@media (min-width:1021px){
  :root{--sidebar:200px;--radius:20px}
  .sidebar{padding:12px 10px}
  .brand{padding:5px 4px 12px}
  .brand-mark{width:44px;height:44px;font-size:23px}
  .brand-title{font-size:26px}
  .brand-subtitle{font-size:10px}
  .nav-list{gap:4px}
  .nav-item{min-height:42px;padding:6px 9px;gap:9px;border-radius:12px;font-size:14px}
  .nav-item .nav-icon{width:30px;height:30px;flex-basis:30px}
  .nav-item .nav-icon img{width:30px;height:30px}
  .sidebar-worldmark{padding:10px 9px;margin-top:auto}
  .sidebar-help{padding:6px;margin-top:5px}

  .world-stage{min-height:535px;padding:14px 18px 20px}
  .topbar,.stage-grid{max-width:1380px}
  .topbar{margin-bottom:8px;align-items:flex-start}
  .topbar h1{font-size:clamp(32px,2.6vw,42px)}
  .topbar p:not(.eyebrow){margin-top:3px;font-size:13px}
  .topbar-actions{gap:6px}
  .icon-button,.profile-pill{min-height:40px;border-radius:11px}

  .stage-grid{grid-template-columns:minmax(165px,.38fr) minmax(480px,1.35fr) minmax(260px,.60fr);gap:12px;align-items:end}
  .laura-welcome{gap:5px}
  .laura-asset{min-height:240px}
  .laura-asset img{max-height:250px}
  .speech-card{padding:10px 11px;border-radius:14px}
  .speech-card strong{font-size:15px}
  .speech-card p{font-size:10px;line-height:1.32}

  .future-card{min-height:410px;border-radius:24px}
  .future-heading{padding:11px 15px 9px}
  .future-heading h2{font-size:22px}
  .stage-chip{padding:6px 10px;font-size:10px}
  .future-art{min-height:335px;padding:2px 10px 5px}
  .future-art img{width:min(700px,102%);max-height:340px}
  .future-glow{width:65%}

  .progress-orbit{gap:9px}
  .stat-card{padding:11px 13px 10px;border-radius:16px}
  .stat-heading{font-size:14px}
  .stat-icon-img{width:35px;height:35px;margin:-3px 1px -3px -2px}
  .stat-value{font-size:27px;margin:6px 0 6px}
  .progress-track{height:8px}
  .stat-card p{margin-top:4px;font-size:9px}
  .school-card{min-height:90px;padding:7px 9px;gap:10px;border-radius:16px}
  .school-illustration{width:92px;height:72px;flex-basis:92px;border-radius:12px}
  .school-illustration img{border-radius:12px}
  .school-copy h2{font-size:16px;margin-bottom:3px}
  .school-values{gap:8px;font-size:10px}
  .school-copy small{font-size:8px}

  .content-wrap{max-width:1380px;margin:-12px auto 0;padding:0 18px 24px}
  .career-card{padding:13px 16px 14px;margin-bottom:10px}
  .section-heading h2,.current-stage-card h2,.tip-card h2,.activity-strip h2{font-size:20px}
  .section-subtitle{margin-top:2px;font-size:10px}
  .data-badge{padding:5px 8px;font-size:8px}
  .career-map{padding:17px 8px 2px}
  .career-route{top:65px}
  .career-badge{height:92px;width:min(104px,94%);margin-bottom:4px}
  .career-step:nth-child(even){transform:translateY(12px)}
  .career-step.is-current:before{top:-8px;font-size:8px;padding:3px 7px}
  .career-name{font-size:10px}
  .career-state{width:15px;height:15px;margin-top:2px;font-size:8px}

  .priority-grid,.rewards-grid{gap:10px;margin-bottom:10px}
  .current-stage-card{min-height:210px;padding:15px;grid-template-columns:minmax(0,1fr) 150px}
  .current-stage-copy>p:not(.eyebrow){line-height:1.35;font-size:12px}
  .guardian-placeholder.current-career-visual img{width:145px;max-height:160px}
  .secondary-button{padding:8px 11px;font-size:12px}
  .next-steps-card{padding:15px}
  .quest-mark{width:34px;height:34px}
  .next-steps-list{gap:7px;margin-top:9px}
  .next-step-item{grid-template-columns:42px 1fr;gap:8px;padding:7px 9px;border-radius:11px}
  .next-step-icon{width:40px;height:40px;font-size:21px}
  .next-step-item strong{font-size:13px}
  .next-step-item p{font-size:9px}
  .journey-button{margin-top:9px;font-size:14px;padding:10px 13px}

  .qualifications-card{padding:14px}
  .qualification-grid{gap:8px;margin-top:10px}
  .qualification-icon{height:78px;margin-bottom:3px}
  .qualification-name{font-size:8px}
  .qualification-status{font-size:7px;margin-top:1px}
  .tip-card{grid-template-columns:112px 1fr;min-height:175px}
  .tip-visual img{width:100px;max-height:160px}
  .tip-content{padding:13px 13px 12px 0}
  .tip-card h2{font-size:17px}
  .tip-card blockquote{margin-top:8px;padding:8px 10px;font-size:10px;line-height:1.4}

  .activity-strip{padding:11px 13px 10px}
  .activities-list{gap:7px;margin-top:7px}
  .activity-item{padding:6px;grid-template-columns:19px 30px 1fr auto}
  .activity-icon{width:28px;height:28px;font-size:15px}
}

/* Auf eher niedrigen Desktop-/Laptop-Bildschirmen nochmals kompakter. */
@media (min-width:1021px) and (max-height:950px){
  .world-stage{min-height:485px;padding-top:10px;padding-bottom:16px}
  .topbar{margin-bottom:5px}
  .topbar h1{font-size:36px}
  .stage-grid{grid-template-columns:minmax(155px,.36fr) minmax(450px,1.34fr) minmax(245px,.58fr)}
  .laura-asset{min-height:215px}
  .laura-asset img{max-height:225px}
  .speech-card{padding:8px 10px}
  .future-card{min-height:370px}
  .future-heading{padding:9px 13px 7px}
  .future-art{min-height:300px}
  .future-art img{max-height:300px;width:min(640px,98%)}
  .stat-card{padding:9px 11px}
  .stat-value{font-size:25px;margin:4px 0}
  .school-card{min-height:82px}
  .school-illustration{width:82px;height:64px;flex-basis:82px}
  .content-wrap{margin-top:-10px}
  .career-card{padding-top:10px;padding-bottom:10px}
  .career-map{padding-top:13px}
  .career-badge{height:82px;width:min(94px,94%)}
  .career-route{top:57px}
}


/* =========================================================
   Integrationsrunde 3 – Referenznähe & 100%-Zoom
   - Bühne als Welt statt Dashboard-Karte
   - Baum in Landschaft integriert
   - konsistente Badge-Größen
   - kompaktere Desktop-Höhen ohne Miniaturisierung
   ========================================================= */

@media (min-width:1021px){
  :root{--sidebar:210px;--radius:18px}
  body{background:#dce9dc}
  .sidebar{padding:13px 11px}
  .brand{padding:4px 3px 14px}
  .brand-mark{width:46px;height:46px}
  .brand-title{font-size:27px}
  .nav-item{min-height:44px;padding:6px 9px;font-size:14px}
  .nav-item .nav-icon{width:31px;height:31px;flex-basis:31px}
  .nav-item .nav-icon img{width:31px;height:31px}

  /* Bühnenbild: bewusst als breiter Ausschnitt der Welt */
  .world-stage{
    height:clamp(360px,44vh,430px);
    min-height:0;
    padding:12px 22px 16px;
    overflow:hidden;
  }
  .stage-backdrop{
    object-fit:cover;
    object-position:center 47%;
    transform:scale(1.015);
  }
  .stage-scrim{
    background:
      linear-gradient(90deg,rgba(4,24,39,.36) 0%,rgba(4,24,39,.08) 24%,rgba(4,24,39,.02) 62%,rgba(4,24,39,.28) 100%),
      linear-gradient(180deg,rgba(4,20,34,.28),transparent 25%,transparent 72%,rgba(5,25,31,.30));
  }
  .topbar,.stage-grid{max-width:1370px}
  .topbar{margin-bottom:4px;min-height:62px;align-items:flex-start}
  .topbar h1{font-size:clamp(34px,2.8vw,44px);line-height:.94}
  .topbar p:not(.eyebrow){font-size:12px;margin-top:5px;text-shadow:0 1px 4px rgba(0,0,0,.55)}
  .eyebrow{font-size:10px}
  .icon-button,.profile-pill{min-height:39px}

  .stage-grid{
    height:calc(100% - 66px);
    grid-template-columns:minmax(190px,.48fr) minmax(470px,1.25fr) minmax(270px,.64fr);
    gap:14px;
    align-items:stretch;
  }

  /* Laura sitzt direkt in der Welt; Sprechkarte überlagert dezent */
  .laura-welcome{position:relative;display:block;min-width:0;align-self:stretch}
  .laura-asset{height:100%;min-height:0;align-items:flex-end;justify-content:center}
  .laura-asset img{max-height:100%;height:100%;width:auto;object-fit:contain;object-position:center bottom}
  .speech-card{
    position:absolute;left:6px;right:6px;bottom:0;
    padding:9px 11px;border-radius:14px;
    background:rgba(255,247,224,.95);
    box-shadow:0 8px 18px rgba(0,0,0,.17);
  }
  .speech-card:before{display:none}
  .speech-card strong{font-size:14px}
  .speech-card p{font-size:9px;margin-top:3px}

  /* Zukunftsbaum: keine SaaS-Karte mehr */
  .future-card{
    min-height:0;height:100%;overflow:visible;
    display:grid;grid-template-rows:auto 1fr;
    border:0;border-radius:0;background:transparent;box-shadow:none;
  }
  .future-heading{
    width:74%;margin:0 auto 0;padding:7px 13px 6px;
    border:1px solid rgba(244,210,119,.72);border-radius:14px;
    background:linear-gradient(180deg,rgba(3,31,49,.86),rgba(3,31,49,.68));
    box-shadow:0 8px 18px rgba(0,0,0,.16);
    backdrop-filter:blur(4px);
  }
  .future-heading h2{font-size:18px}
  .stage-chip{padding:5px 9px;font-size:9px}
  .future-art{min-height:0;height:100%;padding:0;overflow:visible;place-items:end center}
  .future-art:before{
    inset:auto 9% 0 9%;height:22%;
    background:radial-gradient(ellipse,rgba(45,73,36,.42),rgba(33,61,35,.18) 48%,transparent 72%);
    filter:blur(5px);
  }
  .future-glow{
    width:58%;bottom:8%;
    background:radial-gradient(circle,rgba(255,232,121,.32),rgba(255,220,94,.09) 50%,transparent 72%);
    filter:blur(7px);
  }
  .future-art img{
    width:auto;height:100%;max-height:310px;max-width:78%;
    object-fit:contain;object-position:center bottom;
    filter:drop-shadow(0 10px 13px rgba(31,35,22,.20));
    transform:translateY(7px);
  }

  .progress-orbit{align-self:stretch;display:grid;grid-template-rows:1fr 1fr auto;gap:8px}
  .stat-card{padding:10px 13px 9px;border-radius:16px;min-height:0}
  .stat-heading{font-size:13px}.stat-icon-img{width:34px;height:34px}
  .stat-value{font-size:26px;margin:3px 0 4px}.progress-track{height:7px}.stat-card p{font-size:8px;margin-top:3px}
  .school-card{min-height:76px;padding:7px 9px;gap:9px}
  .school-illustration{width:82px;height:62px;flex-basis:82px}
  .school-copy h2{font-size:14px}.school-values{font-size:9px}.school-copy small{font-size:7.5px}

  /* Unterer Bereich bei 100 % Zoom lesbar, aber deutlich dichter */
  .content-wrap{max-width:1370px;margin:-1px auto 0;padding:8px 20px 24px}
  .career-card{padding:10px 16px 11px;margin-bottom:8px}
  .section-heading h2,.current-stage-card h2,.tip-card h2,.activity-strip h2{font-size:18px}
  .section-heading.compact h2{font-size:17px}
  .section-subtitle{font-size:9px;margin-top:2px}
  .career-map{padding:11px 5px 1px}
  .career-route{top:49px;border-top-width:3px}
  .career-badge{height:72px;width:min(84px,94%);margin-bottom:2px}
  .career-step:nth-child(even){transform:none}
  .career-step.is-current:before{top:-6px;font-size:7px;padding:2px 6px}
  .career-name{font-size:9px}.career-state{width:14px;height:14px;font-size:7px;margin-top:1px}

  .priority-grid{grid-template-columns:.78fr 1.22fr;gap:8px;margin-bottom:8px}
  .current-stage-card{min-height:160px;padding:12px 14px;grid-template-columns:minmax(0,1fr) 118px}
  .current-stage-copy>p:not(.eyebrow){font-size:10px;line-height:1.3;margin:5px 0 8px}
  .guardian-placeholder.current-career-visual img{width:108px;max-height:125px}
  .secondary-button{padding:7px 10px;font-size:10px}
  .next-steps-card{padding:11px 13px}
  .next-steps-list{gap:5px;margin-top:6px}
  .next-step-item{grid-template-columns:48px 1fr;gap:8px;padding:5px 7px;border-radius:10px;min-height:48px}
  .next-step-icon{width:44px;height:44px;font-size:0;overflow:hidden;border-radius:9px;background:#edf5e8}
  .next-step-icon img{width:100%;height:100%;object-fit:cover}
  .next-step-item strong{font-size:11px}.next-step-item p{font-size:8px;line-height:1.2;margin-top:1px}
  .journey-button{margin-top:6px;padding:8px 12px;font-size:12px}
  .integration-note{display:none}

  .rewards-grid{grid-template-columns:1.48fr .52fr;gap:8px;margin-bottom:8px}
  .qualifications-card{padding:10px 12px}
  .qualification-grid{gap:5px;margin-top:7px}
  .qualification-icon{height:58px;width:min(64px,100%);margin-bottom:1px}
  .qualification-name{font-size:7px;line-height:1.05}
  .qualification-status{display:none}
  .state-legend{font-size:7px}
  .tip-card{grid-template-columns:92px 1fr;min-height:120px;border-radius:18px}
  .tip-visual{display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
  .tip-visual img{width:88px;max-height:116px}
  .tip-content{padding:9px 10px 8px 0}
  .tip-card h2{font-size:15px}.tip-head{gap:5px}.tip-controls{gap:3px}
  .round-button{width:24px;height:24px;font-size:15px}.tip-card blockquote{margin:5px 0 0;padding:7px 8px;font-size:9px;line-height:1.28}

  .activity-strip{padding:8px 11px 8px}
  .activity-heading h2{font-size:15px}.text-button{font-size:9px;padding:6px 8px}
  .activities-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:5px}
  .activity-item{padding:5px;grid-template-columns:17px 26px 1fr auto;min-width:0}
  .activity-icon{width:24px;height:24px;font-size:13px}.activity-check{width:15px;height:15px;font-size:8px}
  .activity-copy strong{font-size:9px}.activity-copy span{font-size:7px}.activity-reward{font-size:8px}.activity-reward small{font-size:6px}
}

/* Zielgröße für typische 1080p-/Laptop-Browserfenster: fast alles bei 100 % erfassbar. */
@media (min-width:1021px) and (max-height:900px){
  .world-stage{height:330px}
  .topbar{min-height:55px}.topbar h1{font-size:32px}.topbar p:not(.eyebrow){font-size:10px}
  .stage-grid{height:calc(100% - 58px);grid-template-columns:minmax(170px,.46fr) minmax(430px,1.22fr) minmax(245px,.62fr)}
  .future-heading{padding-top:5px;padding-bottom:5px}.future-heading h2{font-size:16px}
  .future-art img{max-height:248px;max-width:70%}
  .speech-card{padding:6px 9px}.speech-card strong{font-size:12px}.speech-card p{font-size:8px}
  .stat-card{padding:7px 10px}.stat-icon-img{width:28px;height:28px}.stat-value{font-size:22px}
  .school-card{min-height:62px}.school-illustration{width:68px;height:52px;flex-basis:68px}.school-copy h2{font-size:12px}
  .career-card{padding-top:8px;padding-bottom:8px}.career-map{padding-top:7px}.career-badge{height:62px;width:74px}.career-route{top:42px}
  .current-stage-card{min-height:145px}.next-step-item{min-height:42px}.next-step-icon{width:38px;height:38px}.qualification-icon{height:50px;width:56px}.tip-card{min-height:106px}
}

@media (min-width:1021px) and (min-height:1000px){
  .world-stage{height:400px}
  .future-art img{max-height:300px}
  .career-badge{height:78px;width:90px}
  .qualification-icon{height:64px;width:70px}
}


/* =========================================================
   Integrationsrunde 4 – Feinschliff nach Nutzerfeedback
   - insgesamt ca. 10–15 % kompakter
   - Baum höher / Titelbalken unter dem Baum
   - Lichtfunken und Lernkristalle nebeneinander
   - Schule vollständig sichtbar
   - Karriere und „Nächste Schritte“ nochmals kompakter
   - linke Weltmarke mit Laurasien-Tor
   ========================================================= */
@media (min-width:1021px){
  :root{--sidebar:198px;--radius:16px}
  .sidebar{padding:12px 10px}
  .brand{padding:3px 3px 12px}
  .brand-mark{width:44px;height:44px;font-size:23px}
  .brand-title{font-size:26px}
  .brand-subtitle{font-size:10px}
  .nav-list{gap:3px}
  .nav-item{min-height:41px;padding:5px 8px;gap:8px;font-size:13px;border-radius:12px}
  .nav-item .nav-icon{width:29px;height:29px;flex-basis:29px}
  .nav-item .nav-icon img{width:29px;height:29px}
  .sidebar-worldmark{
    min-height:110px;
    padding:10px 8px 12px;
    background:
      linear-gradient(180deg,rgba(7,21,34,.28),rgba(7,21,34,.72)),
      url('assets/regions/gedaechtnisschloss.png') center/cover no-repeat;
    border:1px solid rgba(255,221,142,.34);
    justify-content:flex-end;
    gap:2px;
  }
  .sidebar-worldmark .worldmark-glow{display:none}
  .sidebar-worldmark span{font-size:9px;color:#e9f0f3;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .sidebar-worldmark strong{font-size:13px;color:#fff7d6;text-shadow:0 1px 3px rgba(0,0,0,.65)}
  .sidebar-help{padding:6px 4px}

  .world-stage{height:clamp(318px,40vh,372px);padding:10px 18px 12px}
  .stage-backdrop{object-position:center 45%;transform:scale(1.02)}
  .topbar,.stage-grid,.content-wrap{max-width:1325px}
  .topbar{min-height:50px;margin-bottom:3px}
  .topbar h1{font-size:clamp(30px,2.5vw,39px)}
  .topbar p:not(.eyebrow){font-size:11px;margin-top:4px}
  .icon-button,.profile-pill{min-height:36px}
  .stage-grid{
    height:calc(100% - 53px);
    grid-template-columns:minmax(162px,.43fr) minmax(398px,1.16fr) minmax(322px,.77fr);
    gap:12px;
  }

  .laura-asset img{max-height:96%}
  .speech-card{left:8px;right:auto;bottom:-1px;max-width:178px;padding:7px 9px}
  .speech-card strong{font-size:13px}
  .speech-card p{font-size:8px;line-height:1.22}

  .future-card{grid-template-rows:1fr auto;align-items:end}
  .future-art{align-items:end;justify-items:center;padding-top:0}
  .future-art img{max-height:238px;max-width:67%;transform:translateY(-14px)}
  .future-glow{width:54%;bottom:18%}
  .future-art:before{inset:auto 12% 9% 12%;height:18%}
  .future-heading{
    order:2;
    width:58%;
    margin:0 auto 2px;
    padding:6px 12px;
    text-align:center;
    justify-content:center;
    gap:8px;
  }
  .future-heading>div{display:flex;flex-direction:column;align-items:center}
  .future-heading h2{font-size:16px}
  .stage-chip{padding:5px 8px;font-size:8px}

  /* Ressourcen nebeneinander, Schule darunter */
  .progress-orbit{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    gap:8px;
    align-self:end;
  }
  .progress-orbit .stat-fire{grid-column:1}
  .progress-orbit .stat-crystal{grid-column:2}
  .progress-orbit .school-card{grid-column:1 / span 2}
  .stat-card{padding:8px 10px;border-radius:15px}
  .stat-heading{font-size:12px}
  .stat-icon-img{width:28px;height:28px}
  .stat-value{font-size:22px;margin:2px 0 4px}
  .progress-track{height:6px}
  .stat-card p{font-size:7px;margin-top:3px}
  .school-card{min-height:66px;padding:6px 8px;gap:9px;border-radius:15px}
  .school-illustration{width:76px;height:56px;flex-basis:76px}
  .school-copy h2{font-size:13px}.school-values{font-size:8px;gap:7px}.school-copy small{font-size:7px}

  .content-wrap{margin:0 auto;padding:6px 18px 18px}
  .career-card{padding:8px 14px 8px;margin-bottom:8px}
  .section-heading h2,.current-stage-card h2,.tip-card h2,.activity-strip h2{font-size:17px}
  .section-heading.compact h2{font-size:16px}
  .section-subtitle{font-size:8px}
  .data-badge{padding:4px 7px;font-size:7px}
  .career-map{padding:7px 4px 1px}
  .career-route{top:40px;border-top-width:3px}
  .career-badge{height:64px;width:min(74px,94%);margin-bottom:1px}
  .career-name{font-size:8px;line-height:1.05}
  .career-step:nth-child(even){transform:none}
  .career-state{width:13px;height:13px;font-size:6px}
  .career-step.is-current:before{top:-5px;font-size:6.5px;padding:2px 5px}

  .priority-grid{grid-template-columns:.74fr 1.26fr;gap:8px;margin-bottom:8px}
  .current-stage-card{min-height:130px;padding:10px 12px;grid-template-columns:minmax(0,1fr) 94px}
  .current-stage-copy>p:not(.eyebrow){font-size:9px;line-height:1.28;margin:4px 0 8px}
  .guardian-placeholder.current-career-visual img{width:86px;max-height:106px}
  .secondary-button{padding:7px 9px;font-size:9px}

  .next-steps-card{padding:10px 11px}
  .next-steps-list{gap:4px;margin-top:5px}
  .next-step-item{grid-template-columns:38px 1fr;gap:7px;padding:4px 6px;border-radius:9px;min-height:40px}
  .next-step-icon{width:34px;height:34px;border-radius:8px}
  .next-step-item strong{font-size:10px;line-height:1.1}
  .next-step-item p{font-size:7px;line-height:1.15;margin-top:1px}
  .journey-button{margin-top:5px;padding:8px 11px;font-size:11px}

  .rewards-grid{grid-template-columns:1.56fr .44fr;gap:8px;margin-bottom:8px}
  .qualifications-card{padding:9px 10px}
  .qualification-grid{gap:5px;margin-top:6px}
  .qualification-icon{height:52px;width:min(58px,100%)}
  .qualification-name{font-size:6.7px;line-height:1.05}
  .state-legend{font-size:6.8px}
  .tip-card{grid-template-columns:84px 1fr;min-height:108px}
  .tip-visual img{width:78px;max-height:102px}
  .tip-content{padding:8px 9px 8px 0}
  .tip-card h2{font-size:14px}.round-button{width:22px;height:22px;font-size:14px}
  .tip-card blockquote{padding:6px 8px;font-size:8px;line-height:1.24}

  .activity-strip{padding:7px 10px 7px}
  .activity-heading h2{font-size:14px}.text-button{font-size:8px;padding:5px 7px}
  .activities-list{gap:5px;margin-top:4px}
  .activity-item{padding:4px 5px;grid-template-columns:15px 24px 1fr auto}
  .activity-icon{width:22px;height:22px;font-size:12px}
  .activity-check{width:14px;height:14px;font-size:7px}
  .activity-copy strong{font-size:8px}.activity-copy span{font-size:6.5px}.activity-reward{font-size:7px}.activity-reward small{font-size:5.5px}
}

@media (min-width:1021px) and (max-height:900px){
  .world-stage{height:300px}
  .stage-grid{height:calc(100% - 49px)}
  .topbar h1{font-size:28px}
  .future-art img{max-height:214px;max-width:64%}
  .future-heading{width:56%}
  .career-badge{height:58px;width:68px}
  .qualification-icon{height:48px;width:54px}
  .current-stage-card{min-height:120px}
  .next-step-item{min-height:36px}
  .school-card{min-height:60px}
}

/* =========================================================
   Nachtrag zur Spielschleife des Kindes (Fassung 0.13.0)
   Befund Karte 105: im Band 1021 bis 1240 Pixel lag die rechte Spalte
   ausserhalb des sichtbaren Bereichs (world-stage kappt mit
   overflow:hidden), auf schmalen Handys ragte die Stufenanzeige ueber den
   Rand. Hier: kleinere Spaltenmindestbreiten, min-width:0 fuer die Kinder
   des Rasters und eine umbrechende Kopfzeile des Zukunftsbaums.
   ========================================================= */
@media (min-width:1021px){
  .stage-grid>*{min-width:0}
  .progress-orbit,.stat-card,.school-card,.tip-card,.tip-content{min-width:0}
  .tip-content{overflow-wrap:anywhere}
}
@media (min-width:1021px) and (max-width:1240px){
  .stage-grid{
    grid-template-columns:minmax(140px,.4fr) minmax(0,1.3fr) minmax(200px,.56fr);
    gap:12px;
  }
}
@media (max-width:760px){
  .future-heading{flex-wrap:wrap}
  .future-heading>div{min-width:0}
  .stage-chip{white-space:normal;max-width:100%}
}
@media (max-width:420px){
  .future-heading{gap:6px;padding:9px 12px 7px}
  .future-heading h2{font-size:19px}
  .stage-chip{padding:4px 8px;font-size:9px}
}

/* =====================================================================
   VORLAGEN-EBENE
   Gestaltung nach den Laurasien-Vorlagen: Nachtblau und Gold, Karten in
   Pergament mit brauner Doppellinie, Alegreya fuer Ueberschriften, Nunito
   fuer den Text, goldene Umrandung des aktiven Menuepunkts.
   Bewusst am Dateiende, damit diese Angaben die vorherigen ueberschreiben.
   Aufbau, Kennungen und app.js bleiben unveraendert.
   ===================================================================== */

/* --- Seitenleiste --------------------------------------------------- */

.sidebar {
  padding:18px 14px 14px;
  background:linear-gradient(180deg,#0a2340 0%,#071a2e 45%,#04101f 100%);
  border-right:3px solid var(--braun);
  box-shadow:inset -6px 0 18px rgba(0,0,0,.45)
}

.brand {
  padding:0 0 4px;
  gap:0
}

.brand-mark {
  width:125px;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  margin-bottom:-9px
}

.brand-title {
  font-family:var(--schrift-titel);
  font-size:29px;
  font-weight:700;
  letter-spacing:4.4px;
  margin:3px -4.4px 0 0;
  background:linear-gradient(180deg,#fff9dd 0%,#f8d76b 38%,#e6ac2c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.55))
}

.brand-subtitle {
  margin-top:5px;
  font-size:13.5px;
  line-height:1;
  color:#fcf9ef;
  text-shadow:0 1px 3px rgba(0,0,0,.65)
}

.nav-list {
  gap:3px;
  margin:20px -3px 0
}

.nav-item {
  gap:11px;
  min-height:0;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:11px;
  color:#e8e2d2;
  font-size:15px;
  font-weight:600
}

.nav-item:hover {
  background:rgba(233,185,59,.12)
}

.nav-item.is-active {
  color:#f7dc84;
  border:1.5px solid #efd28c;
  background:
    linear-gradient(90deg,rgba(233,185,59,.34) 0%,rgba(160,118,40,.14) 40%,rgba(233,185,59,.30) 100%),
    linear-gradient(180deg,rgba(0,20,40,.35) 0%,rgba(0,20,40,.55) 100%);
  box-shadow:
    0 0 14px rgba(244,214,138,.35),
    0 3px 9px rgba(0,0,0,.4),
    inset 0 0 12px rgba(233,185,59,.35),
    inset 0 1px 0 rgba(255,245,205,.55)
}

.nav-item.is-active:before {
  content:none
}

.nav-icon img {
  width:22px;
  height:22px;
  object-fit:contain
}

.sidebar-worldmark {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:2px;
  min-height:168px;
  padding:12px 10px 16px;
  border:3px solid #c9a66b;
  border-radius:112px 112px 15px 15px;
  background:radial-gradient(circle at 50% 20%,rgba(255,231,160,.18),transparent 55%),linear-gradient(180deg,rgba(6,28,46,.9),rgba(3,20,30,.94));
  box-shadow:0 0 0 2px var(--braun),inset 0 0 22px rgba(0,0,0,.55)
}

.sidebar-worldmark span {
  font-family:var(--schrift-titel);
  font-style:italic;
  font-size:13.5px;
  color:#f3e3bd
}

.sidebar-worldmark strong {
  font-family:var(--schrift-titel);
  font-size:15px;
  color:#ffe9a8
}

.sidebar-help {
  border:1.5px solid #79b3dd;
  border-radius:13px;
  background:linear-gradient(180deg,#0a3f68 0%,#042c50 100%);
  color:#fff;
  box-shadow:0 5px 12px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18)
}

.sidebar-help .help-icon {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:3px solid #f0c04a;
  border-radius:50%;
  background:rgba(2,26,46,.7)
}

/* --- Hauptflaeche und Kopfzeile ------------------------------------ */

.cockpit {
  background:radial-gradient(120% 90% at 70% 10%,#35200f 0%,#1d1108 55%,#140d06 100%)
}

.topbar h1 {
  font-family:var(--schrift-titel);
  font-weight:800;
  color:#fff;
  text-shadow:0 3px 18px rgba(0,0,0,.5)
}

.topbar p:not(.eyebrow) {
  color:#f6ecd6
}

.eyebrow.light {
  color:#f2c94c
}

.icon-button,.profile-pill {
  border:1.5px solid #79b3dd;
  border-radius:13px;
  background:linear-gradient(180deg,#0a3f68 0%,#042c50 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18)
}

.avatar-placeholder {
  border:2px solid #e2c37f;
  background:#fdf3e0;
  color:#3b2a18
}

/* --- Karten in Pergament ------------------------------------------- */

.parchment {
  border:2px solid var(--braun);
  border-radius:16px;
  background:linear-gradient(158deg,#fff9ec 0%,#fbeed7 45%,#f6e5c4 100%);
  box-shadow:inset 0 0 0 2px #d9b778,0 10px 22px rgba(12,6,2,.45)
}

.parchment::after {
  content:"";
  position:absolute;
  inset:7px;
  border:1.5px solid rgba(183,138,68,.55);
  border-radius:9px;
  pointer-events:none
}

.parchment h2,.section-heading h2,.current-stage-card h2,.tip-card h2,.activity-strip h2 {
  font-family:var(--schrift-titel);
  color:#202a46
}

.section-subtitle {
  color:#6b4a2a;
  font-weight:600
}

.data-badge {
  border:1.5px solid #8a5a18;
  background:linear-gradient(180deg,#ffe27a,#f2c94c);
  color:#4a2c12
}

.stage-chip {
  border:2px solid #8a5a18;
  background:linear-gradient(180deg,#ffe27a,#f2c94c);
  color:#4a2c12
}

.school-card {
  border:2px solid var(--braun);
  border-radius:16px;
  background:linear-gradient(158deg,#fff9ec 0%,#fbeed7 45%,#f6e5c4 100%);
  box-shadow:inset 0 0 0 2px #d9b778,0 10px 22px rgba(12,6,2,.45);
  color:var(--text-braun)
}

.school-illustration {
  border:2px solid #c9a66b;
  background:linear-gradient(180deg,#fff3d4,#f2d58d)
}

/* --- Dunkle Kennzahlenkarten --------------------------------------- */

.stat-card {
  border:2px solid #0a1430;
  border-radius:16px;
  background-image:
    url("assets/ornamente/stern_dunkel.svg"),url("assets/ornamente/stern_dunkel.svg"),
    url("assets/ornamente/stern_dunkel.svg"),url("assets/ornamente/stern_dunkel.svg"),
    linear-gradient(160deg,#12325e 0%,#0b1e4d 55%,#081637 100%);
  background-size:16px 16px,16px 16px,16px 16px,16px 16px,auto;
  background-position:7px 7px,calc(100% - 7px) 7px,7px calc(100% - 7px),calc(100% - 7px) calc(100% - 7px),0 0;
  box-shadow:inset 0 0 0 2px rgba(233,185,59,.6),0 10px 20px rgba(5,10,25,.5)
}

.stat-crystal {
  background-image:
    url("assets/ornamente/stern_dunkel.svg"),url("assets/ornamente/stern_dunkel.svg"),
    url("assets/ornamente/stern_dunkel.svg"),url("assets/ornamente/stern_dunkel.svg"),
    linear-gradient(160deg,#4b1a7a 0%,#341052 55%,#240b3e 100%)
}

.stat-heading {
  font-family:var(--schrift-titel);
  font-size:16px
}

.stat-value {
  font-family:var(--schrift-titel);
  font-size:30px;
  text-shadow:0 0 14px rgba(242,201,76,.45)
}

.stat-card p {
  color:#f3e3bd
}

/* --- Zukunftsbaum, Lauras Blase, Tipp ------------------------------ */

.future-card {
  border:2px solid var(--gold);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(2,33,44,.97),rgba(1,26,35,.97));
  box-shadow:0 9px 20px rgba(0,0,0,.45)
}

.future-card h2,.future-heading {
  font-family:var(--schrift-titel);
  color:#fff
}

.speech-card {
  border:1.5px solid #241a10;
  border-radius:46% 44% 48% 46% / 40% 42% 44% 46%;
  background:#fdf3e6;
  color:#241a10;
  font-family:var(--schrift-titel);
  font-weight:600;
  box-shadow:0 7px 15px rgba(20,30,50,.32)
}

.speech-card:before {
  border-top-color:#fdf3e6
}

.speech-card strong,.speech-card span {
  color:#241a10
}

.tip-card {
  border:2px solid var(--gold);
  border-radius:16px;
  background:radial-gradient(circle at 18% 24%,rgba(255,222,115,.25),transparent 28%),linear-gradient(145deg,#123d5d,#174f6e 60%,#244b56)
}

.tip-card h2 {
  color:#fff8df
}

.tip-card blockquote {
  font-family:var(--schrift-titel);
  border-left:3px solid var(--gold)
}

/* --- Knoepfe -------------------------------------------------------- */

.primary-button,.journey-button {
  border:2px solid var(--gold);
  border-radius:11px;
  background:linear-gradient(180deg,#35a24e 0%,#1e7a34 100%);
  color:#fff8e6;
  font-weight:800;
  box-shadow:0 5px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35)
}

.journey-button {
  box-shadow:0 5px 0 #14512a,0 10px 22px rgba(7,60,25,.3)
}

.secondary-button {
  border:2px solid var(--braun-hell);
  border-radius:11px;
  background:linear-gradient(180deg,#fff9ec 0%,#f3e3bd 100%);
  color:var(--text-braun);
  font-weight:800
}

.ghost-button {
  border:1.5px solid rgba(121,179,221,.7);
  border-radius:11px;
  background:rgba(5,32,53,.5);
  color:#eaf4ff
}

.task-button {
  border:1.5px solid var(--braun-hell);
  border-radius:10px;
  background:linear-gradient(180deg,#fff9ec,#f3e3bd);
  color:var(--text-braun)
}

.task-button:hover:not(:disabled) {
  background:linear-gradient(180deg,#fff3d4,#efd9a8)
}

.round-button {
  border:1.5px solid #efd28c;
  background:linear-gradient(180deg,#0a3f68,#042c50);
  color:#ffe9a8
}

/* --- Karriere, Listen, Dialoge ------------------------------------- */

.career-badge {
  border:3px solid #c9a66b
}

.career-step.is-current .career-badge {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(242,201,76,.55),0 0 24px rgba(242,201,76,.75)
}

.region-row,.qualification-item,.activity-item {
  border:1px solid rgba(183,138,68,.5);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,250,240,.9),rgba(247,233,205,.9))
}

.dialog-panel,.message-dialog {
  border:2px solid var(--braun);
  border-radius:16px;
  background:linear-gradient(158deg,#fff9ec 0%,#fbeed7 45%,#f6e5c4 100%);
  color:var(--text-braun);
  box-shadow:inset 0 0 0 2px #d9b778,0 20px 40px rgba(12,6,2,.5)
}

.dialog-panel h2,.dialog-header h2 {
  font-family:var(--schrift-titel);
  color:#202a46
}

/* --- Anmeldefenster ------------------------------------------------- */

.login-view {
  background:radial-gradient(90% 70% at 50% 0%,#123a5c 0%,#0a2340 45%,#04101f 100%)
}

.login-card {
  border:2px solid var(--braun);
  border-radius:16px;
  background:linear-gradient(158deg,#fff9ec 0%,#fbeed7 45%,#f6e5c4 100%);
  box-shadow:inset 0 0 0 2px #d9b778,0 22px 44px rgba(6,3,0,.55);
  color:var(--text-braun)
}

.login-card .brand-mark {
  width:132px;
  margin:0 auto -6px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none
}

.login-card h1 {
  font-family:var(--schrift-titel);
  color:#202a46
}

.login-sub {
  color:#6b4a2a
}

.login-card label {
  color:#5b3f22;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:11px
}

.login-card input {
  border:1.5px solid #d9b778;
  border-radius:10px;
  background:#fffdf6;
  color:var(--text-braun)
}

.login-card input:focus {
  border-color:var(--gold);
  outline:2px solid rgba(242,201,76,.5)
}

/* Die Passwortfelder der Aktivierungsseite liegen in einem Zwischenbehaelter. Ohne
   eigenes Raster fallen Label und Feld in den Textfluss und rutschen versetzt
   untereinander (Sichtmeldung vom 13.10.2026). Das Raster gleicht die Felder der
   uebrigen Karte an. */
.login-card #passwordFields {
  display:grid;
  gap:7px
}

/* Dasselbe gilt fuer den Feldblock der Seite "Passwort vergessen" (Fassung 0.24.0,
   13.10.2026). Ohne Raster lief der Knopf "Link anfordern" im Textfluss der Karte:
   gemessen 136 px breit und 117 px links der Kartenmitte. Mit Raster fuellen Feld und
   Knopf die Innenbreite der Karte; der Knopf steht damit mittig. */
.login-card #emailFields {
  display:grid;
  gap:7px
}

/* --- Nachtraege aus der Sichtpruefung ------------------------------ */

/* Auf grossen Bildschirmen gilt das Mass der Vorlage; die schmalen Baender
   der Oberflaeche behalten ihre eigenen Werte. */
@media (min-width:1241px) {
  :root {
    --sidebar:239px;
    --radius:16px
  }
}

/* Kleine Bildschirme: Markenzeichen klein halten, damit die schmale
   Seitenleiste nicht ueberlaeuft. */
@media (max-width:1020px) {
  .brand-mark {
    width:52px
  }
}

body {
  background:#efe0c2
}

.task-button.is-primary {
  border:2px solid var(--gold);
  background:linear-gradient(180deg,#35a24e 0%,#1e7a34 100%);
  color:#fff8e6;
  font-weight:800
}

.task-button.is-primary:hover:not(:disabled) {
  background:linear-gradient(180deg,#2f9448,#1b6f2f)
}

/* --- Vorlagen-Ebene: Ruecknahmen fuer enge Fenster (Fassung 0.14.0) ----------
   Die Vorlagen-Ebene steht am Ende dieser Datei und gewinnt damit auch gegen die
   Staffelregeln der App fuer enge Fenster. Ohne Ruecknahme wird der Text der
   dunklen Karten im Band 1021-1240 px zu gross (gemessen: 18 px ueber den rechten
   Rand hinaus) und die Seitenleiste unnoetig hoch. Die Werte unten sind die der
   Fassung 0.13.0; Farben, Schriften, Pergamentflaechen und Goldraender der
   Vorlagen-Ebene bleiben davon unberuehrt. Ab 1241 px gilt die Ebene vollstaendig. */

@media (max-width:1240px) {
  .sidebar { padding:12px 10px }
  .brand { padding:3px 3px 12px; gap:2px }
  .brand-mark { width:44px; height:44px; margin-bottom:0 }
  .brand-title { font-size:26px; letter-spacing:2px }
  .brand-subtitle { font-size:10px }
  .nav-list { gap:4px; margin:0 }
  .nav-item { min-height:41px; padding:5px 8px; gap:8px; font-size:13px; border-radius:12px }
  .sidebar-worldmark { min-height:110px; padding:10px 8px 12px }
  .sidebar-worldmark span { font-size:9px }
  .sidebar-worldmark strong { font-size:13px }
  .stat-heading { font-size:12px; letter-spacing:.06em }
  .stat-value { font-size:22px; margin:2px 0 4px }
}

@media (max-width:1020px) {
  .sidebar { align-items:center; padding:12px 8px }
  .brand { padding:0; gap:2px }
  .brand-title, .brand-subtitle, .sidebar-worldmark { display:none }
  .brand-mark { width:52px; height:52px; margin-bottom:0 }
  .nav-list { width:100%; margin:0; gap:7px }
  .nav-item { justify-content:center; border-radius:12px }
  .nav-item .nav-icon { width:38px; height:38px; flex-basis:38px }
  .sidebar-help { border:0; border-radius:0; background:transparent; box-shadow:none; padding:10px }
  .sidebar-help .help-icon { width:30px; height:30px; border:0; border-radius:0; background:transparent }
}

@media (max-width:760px) {
  .sidebar { position:sticky; top:0; width:100%; height:auto; display:flex; flex-direction:row;
             gap:8px; padding:8px 10px; overflow-x:auto }
  .brand-mark { width:34px; height:34px }
  .nav-list { display:flex; width:auto }
  .nav-item { min-width:42px; min-height:38px; padding:6px; border-radius:14px }
  .sidebar-help { margin:0 0 0 auto }
  .nav-item .nav-icon { width:30px; height:30px; flex-basis:30px }
  .sidebar-help .nav-icon { width:30px; height:30px; flex-basis:30px }
}


/* --- Vorlagen-Ebene: Ruecknahmen fuer enge Fenster (Fassung 0.14.0) ----------
   Die Vorlagen-Ebene steht am Ende dieser Datei und gewinnt damit auch gegen die
   Staffelregeln der App fuer enge Fenster. Ohne Ruecknahme wird der Text der
   dunklen Karten im Band 1021-1240 px zu gross (gemessen: 18 px ueber den rechten
   Rand hinaus) und die Seitenleiste unnoetig hoch. Die Werte unten sind die der
   Fassung 0.13.0; Farben, Schriften, Pergamentflaechen und Goldraender der
   Vorlagen-Ebene bleiben davon unberuehrt. Ab 1241 px gilt die Ebene vollstaendig. */

@media (max-width:1240px) {
  .sidebar { padding:12px 10px }
  .brand { padding:3px 3px 12px; gap:2px }
  .brand-mark { width:44px; height:44px; margin-bottom:0 }
  .brand-title { font-size:26px; letter-spacing:2px }
  .brand-subtitle { font-size:10px }
  .nav-list { gap:4px; margin:0 }
  .nav-item { min-height:41px; padding:5px 8px; gap:8px; font-size:13px; border-radius:12px }
  .sidebar-worldmark { min-height:110px; padding:10px 8px 12px }
  .sidebar-worldmark span { font-size:9px }
  .sidebar-worldmark strong { font-size:13px }
  .stat-heading { font-size:12px; letter-spacing:0 }
  .stat-value { font-size:22px; margin:2px 0 4px }
}

@media (max-width:1020px) {
  .sidebar { align-items:center; padding:12px 8px }
  .brand { padding:0; gap:2px }
  .brand-title, .brand-subtitle, .sidebar-worldmark { display:none }
  .brand-mark { width:52px; height:52px; margin-bottom:0 }
  .nav-list { width:100%; margin:0; gap:7px }
  .nav-item { justify-content:center; border-radius:12px }
  .nav-item .nav-icon { width:38px; height:38px; flex-basis:38px }
  .sidebar-help { border:0; border-radius:0; background:transparent; box-shadow:none; padding:10px }
  .sidebar-help .help-icon { width:30px; height:30px; border:0; border-radius:0; background:transparent }
}

@media (max-width:760px) {
  .sidebar { position:sticky; top:0; width:100%; height:auto; display:flex; flex-direction:row;
             gap:8px; padding:8px 10px; overflow-x:auto }
  .brand-mark { width:34px; height:34px }
  .nav-list { display:flex; width:auto }
  .nav-item { min-width:42px; min-height:38px; padding:6px; border-radius:14px }
  .sidebar-help { margin:0 0 0 auto }
  .nav-item .nav-icon { width:30px; height:30px; flex-basis:30px }
  .sidebar-help .nav-icon { width:30px; height:30px; flex-basis:30px }
}