/* =====================================================================
   Laurasien - Mein Cockpit: Gestaltung nach der Vorlage Cockpit-Final.png
   Uebernommen aus dem Nachbau (laurasien-dashboard-build/styles.css),
   ergaenzt um die Umschaltung der Ansichten. Wird nach styles.css geladen.
   ===================================================================== */

/* =====================================================================
   Laurasien – Mein Cockpit  (Nachbau von Cockpit-Final.png)
   Referenzbild: 1536 x 1024
   ===================================================================== */

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

:root {
  --nacht: #071a2e;
  --nacht-tief: #04101f;
  --gold: #f2c94c;
  --gold-dunkel: #c9a227;
  --braun: #4a2c12;
  --braun-hell: #b78a44;
  --creme: #fdf3e0;
  --creme-tief: #f6e5c4;
  --text-braun: #3b2a18;
  --navy: #1c2e5a;
  --blau: #0e4e8a;
  --gruen: #1e7a34;
  --haken: #1e9e4a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #140d06;
}

body {
  font-family: "Nunito", "DejaVu Sans", sans-serif;
  color: var(--text-braun);
  font-size: 13px;
  line-height: 1.35;
}

.app {
  display: grid;
  grid-template-columns: 239px 1fr;
  width: 1536px;
  height: 1024px;
  margin: 0 auto;
  overflow: hidden;
  background: #140d06;
}

/* =====================================================================
   SEITENLEISTE
   ===================================================================== */

.seitenleiste {
  position: relative;
  background: linear-gradient(180deg, #0a2340 0%, #071a2e 45%, #04101f 100%);
  border-right: 3px solid #4a2c12;
  box-shadow: inset -6px 0 18px rgba(0, 0, 0, 0.45);
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.marke {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0 0 14px;
  margin-top: -6px;
  border-bottom: none;
}

.marke-baum {
  display: block;
  width: 125.3px;
  height: auto;
  flex: none;
  margin-bottom: -9px;
}

.marke-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marke-name {
  font-family: "Alegreya", serif;
  font-size: 29px;
  letter-spacing: 4.4px;
  margin-right: -4.4px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(180deg, #fff9dd 0%, #f8d76b 38%, #e6ac2c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));

  margin-top: 3px;
}

.marke-unter {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1;
  color: #fcf9ef;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

.nav { display: flex; flex-direction: column; gap: 3px; margin: 23px -3px 0; }

.nav-eintrag {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 11px;
  color: #e8e2d2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
}

.nav-symbol { width: 22px; height: 22px; flex: none; color: #e9b93b; }

.nav-eintrag:not(.nav-aktiv) .nav-symbol { color: #cbb98c; }

.nav-aktiv {
  background:
    linear-gradient(90deg, rgba(233, 185, 59, 0.34) 0%, rgba(160, 118, 40, 0.14) 40%, rgba(233, 185, 59, 0.30) 100%),
    linear-gradient(180deg, rgba(0, 20, 40, 0.35) 0%, rgba(0, 20, 40, 0.55) 100%);
  color: #f7dc84;
  border: 1.5px solid #efd28c;
  box-shadow:
    0 0 14px rgba(244, 214, 138, 0.35),
    0 3px 9px rgba(0, 0, 0, 0.4),
    inset 0 0 12px rgba(233, 185, 59, 0.35),
    inset 0 1px 0 rgba(255, 245, 205, 0.55);
}

.nav-aktiv .nav-symbol { color: #f6d478; }

.seitenleiste-unten {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 47px;
}

.bogen {
  width: 196px;
  height: 220px;
  border-radius: 112px 112px 15px 15px;
  border: 3px solid #c9a66b;
  box-shadow: 0 0 0 2px #4a2c12, inset 0 0 22px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.bogen img { width: 100%; height: 100%; object-fit: cover; }

.bogen-text {
  margin: 0;
  font-family: "Alegreya", serif;
  font-style: italic;
  font-size: 13.5px;
  color: #f3e3bd;
  text-align: center;
}

/* =====================================================================
   HAUPTBEREICH / HERO
   ===================================================================== */

.haupt {
  position: relative;
  background: radial-gradient(120% 90% at 70% 10%, #35200f 0%, #1d1108 55%, #140d06 100%);
  display: flex;
  flex-direction: column;
}

.hero {
  position: relative;
  height: 394px;
  flex: none;
  background: url("assets/background/laurasien-landscape.png") center 38% / cover no-repeat;
  overflow: hidden;
}

/* --- Sprechblase der Begruessung: liegt hinter der Figur --- */

.begruessungsblase {
  position: absolute;
  z-index: 1;
  left: 86px;
  top: 24px;
  width: 352px;
  height: 104px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(130% 125% at 50% 8%, #f9edd8 0%, #f8e5c4 44%, #f7d9a6 76%, #f3c98b 100%);
  border: 1.5px solid #d8b686;
  border-radius: 44px 42px 48px 46px / 42px 44px 46px 44px;
  box-shadow: 0 9px 18px rgba(40, 24, 6, 0.38), inset 0 0 26px rgba(214, 176, 116, 0.45);
}

/* Zipfel: zeigt schraeg nach unten links und verschwindet hinter der Figur */

.begruessungsblase::before {
  content: "";
  position: absolute;
  left: 48px;
  bottom: -46px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 42px solid transparent;
  border-top: 46px solid #d8b686;
}

.begruessungsblase::after {
  content: "";
  position: absolute;
  left: 50px;
  bottom: -44px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 40px solid transparent;
  border-top: 44px solid #f7d9a6;
}

.willkommen {
  margin: 0;
  font-family: "Alegreya", serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.04;
  color: #2b2014;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.55);
}

.willkommen-unter {
  margin: 5px 0 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  color: #3a2b18;
  text-shadow: 0 1px 0 rgba(255, 250, 235, 0.45);
}

/* Kleine Reiseblase: vorerst ausgebaut (Wunsch vom 11.10.2026).
   Regeln bleiben stehen, damit der Wiedereinbau nur eine Zeile im Markup kostet. */

.sprechblase {
  z-index: 2;
  position: absolute;
  left: 221px;
  top: 166px;
  width: 142px;
  min-height: 112px;
  box-sizing: border-box;
  padding: 16px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fdf3e6;
  border: 1.5px solid #241a10;
  border-radius: 46% 44% 48% 46% / 40% 42% 44% 46%;
  color: #241a10;
  font-family: "Alegreya", serif;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.26;
  text-align: center;
  box-shadow: 0 7px 15px rgba(20, 30, 50, 0.32);
}

.sprechblase::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -12px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #fdf3e6;
  border-bottom: 0;
}

.hero-laura {
  position: absolute;
  left: -45px;
  bottom: -264px;
  height: 542px;
  z-index: 3;
  filter: drop-shadow(0 10px 16px rgba(10, 25, 50, 0.45));
}

.hero-baum {
  position: absolute;
  left: 457px;
  bottom: -5px;
  height: 350px;
  filter: drop-shadow(0 0 34px rgba(242, 201, 76, 0.55));
}

.baum-plakette {
  position: absolute;
  /* Mittig auf der Achse des Lernbaums: der Baum beginnt bei 457px und ist
     350px breit (Achse also 632px), die Plakette ist 257px breit -
     632 - 128,5 = 503,5. Vorher stand sie bei 439px direkt an der
     Begruessungsblase und damit 61,9px links der Baumachse (Wunsch vom
     11.10.2026: Banner mittig am Baum). */
  left: 503.5px;
  top: 318px;
  width: 257px;
  height: 67px;
  box-sizing: border-box;
  padding: 8px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, rgba(2, 33, 44, 0.97), rgba(1, 26, 35, 0.97));
  border: 2px solid #f5c62e;
  border-radius: 10px;
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.45);
}

.baum-titel {
  color: #ffffff;
  font-family: "Alegreya", serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
}

.baum-fuss { display: inline-flex; align-items: center; gap: 21px; margin-left: 27px; }

.baum-stufe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 137px;
  height: 27px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f9cd5e, #f2bd45);
  color: #33260c;
  font-family: "Nunito", sans-serif;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.info-i {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0358a3;
  color: #ffffff;
  font-family: "Alegreya", serif;
  font-size: 17px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

/* --- Karten-Spalte oben rechts --- */

.hero-karten {
  position: absolute;
  top: 6px;
  right: 5px;
  width: 437px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kopfzeile {
  align-self: flex-end;
  margin-right: 3px;
  width: 246px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 3px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}

.hilfe-feld {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex: 0 0 auto;
  width: 70px;
  height: 54px;
  box-sizing: border-box;
  text-decoration: none;
  border-radius: 13px;
  background: linear-gradient(180deg, #0a3f68 0%, #042c50 100%);
  border: 1.5px solid #79b3dd;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.hilfe-kreis {
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 3px solid #f0c04a;
  background: rgba(2, 26, 46, 0.7);
  color: #ffffff;
}

.pill-symbol { width: 17px; height: 17px; color: #ffffff; }

.hilfe-text {
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.laura-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  flex: 0 0 auto;
  width: 172px;
  height: 56px;
  box-sizing: border-box;
  padding: 0 12px 0 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0a3f68 0%, #042c50 100%);
  border: 1.5px solid #79b3dd;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.avatar {
  margin-right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #e2c37f;
  object-fit: cover;
  object-position: 66% 74%;
  background: #fdf3e0;
}

.laura-name {
  color: #ffffff;
  font-family: "Alegreya", serif;
  font-size: 21px;
  font-weight: 700;
}

.chevron { margin-left: 6px; width: 15px; height: 15px; color: #ffffff; }

/* --- Karten allgemein --- */

.karte {
  position: relative;
  border-radius: 16px;
  border: 2px solid var(--braun);
  background-image: linear-gradient(158deg, #fff9ec 0%, #fbeed7 45%, #f6e5c4 100%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: auto;
  box-shadow:
    inset 0 0 0 2px #d9b778,
    0 10px 22px rgba(12, 6, 2, 0.45);
}

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

.karten-titel {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: "Alegreya", serif;
  font-size: 19px;
  font-weight: 800;
  color: #202a46;
}

.karten-titel::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13' fill='%23E7B94A' stroke='%236A4718' stroke-width='1.6'/><path d='M16 3 18.1 16 16 29 13.9 16Z' fill='%23FFF6DC' stroke='%236A4718' stroke-width='0.9'/><path d='M3 16 16 13.9 29 16 16 18.1Z' fill='%23FFF6DC' stroke='%236A4718' stroke-width='0.9'/><path d='M16 8.4 17.3 16 16 23.6 14.7 16Z' fill='%23F3C74F'/><path d='M8.4 16 16 14.7 23.6 16 16 17.3Z' fill='%23F3C74F'/><path d='M16 1.6 17.7 5.6 14.3 5.6Z' fill='%23E7B94A' stroke='%236A4718' stroke-width='0.7'/><path d='M16 30.4 17.7 26.4 14.3 26.4Z' fill='%23E7B94A' stroke='%236A4718' stroke-width='0.7'/><path d='M1.6 16 5.6 14.3 5.6 17.7Z' fill='%23E7B94A' stroke='%236A4718' stroke-width='0.7'/><path d='M30.4 16 26.4 14.3 26.4 17.7Z' fill='%23E7B94A' stroke='%236A4718' stroke-width='0.7'/><circle cx='16' cy='16' r='2.1' fill='%236A4718'/></svg>" ) center / contain no-repeat;
}

/* --- Dunkle Karten (Lichtfunken / Kristalle) --- */

.karte-dunkel {
  border-color: #0a1430;
  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, 0.6), 0 10px 20px rgba(5, 10, 25, 0.5);
}

.kristalle {
  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%);
  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;
}

.karte-dunkel::after { border-color: rgba(233, 185, 59, 0.35); }

.dunkel-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 0;
}

.kopf-symbol { width: 26px; height: 26px; object-fit: contain; }

.dunkel-titel {
  font-family: "Alegreya", serif;
  font-size: 16px;
  font-weight: 700;
  color: #fdf3e0;
}

.dunkel-zahl { padding: 2px 14px 0; }

.dunkel-zahl span {
  font-family: "Alegreya", serif;
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(242, 201, 76, 0.45);
}

.balken {
  height: 11px;
  margin: 6px 14px 0;
  border-radius: 999px;
  background: rgba(3, 8, 20, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
}

.balken i { display: block; height: 100%; border-radius: 999px; }

.balken-gelb i { background: linear-gradient(90deg, #f5c542, #ffdf7e); box-shadow: 0 0 10px rgba(245, 197, 66, 0.8); }

.balken-violett i { background: linear-gradient(90deg, #b23ae0, #e879f9); box-shadow: 0 0 10px rgba(217, 70, 239, 0.8); }

.dunkel-fuss {
  padding: 4px 12px 8px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  color: #f3e3bd;
}

.dunkel-fuss img { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; margin-left: 4px; }

/* --- Statistik-Karten nebeneinander --- */

.stat-reihe { display: flex; gap: 6px; height: 184px; }

.lichtfunken, .kristalle { width: calc(50% - 3px); height: 100%; }

/* --- Schulkarte --- */

.schule-karte { padding: 6px 8px; height: 134px; display: flex; gap: 9px; align-items: stretch; }

.schule-klein { width: 60px; height: 100%; flex: none; border-radius: 9px; border: 2px solid #c9a66b; object-fit: cover; object-position: 52% 62%; }

.schule-mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.schule-titel {
  font-family: "Alegreya", serif;
  font-size: 17px;
  font-weight: 800;
  color: #3b2a18;
  line-height: 1.1;
}

.schule-name { font-size: 13.5px; font-weight: 800; color: #24406e; }

.schule-zahlen { display: flex; gap: 13px; margin-top: 6px; }

.schule-zahlen .zahl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 800;
  color: #3b2a18;
}

.schule-zahlen .zahl img { width: 17px; height: 17px; object-fit: contain; }

.schule-spruch {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: #24406e;
  line-height: 1.15;
}

.mini-menschen { width: 16px; height: 16px; flex: none; color: #24406e; }

.schule-rechts { width: 146px; flex: none; display: flex; flex-direction: column; gap: 4px; }

.schule-bild {
  width: 114px;
  height: 79px;
  align-self: flex-end;
  border-radius: 8px;
  border: 2px solid #c9a66b;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.karte .schule-knopf {
  margin-top: auto;
  width: 100%;
  padding: 6px 8px;
  font-size: 12.5px;
  justify-content: center;
  white-space: nowrap;
}

/* --- Knoepfe --- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 11px;
  font-family: "Nunito", sans-serif;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid #f2c94c;
  color: #fff8e6;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.knopf-blau { background: linear-gradient(180deg, #10589a 0%, #04386c 100%); }

.knopf-gruen { background: linear-gradient(180deg, #35a24e 0%, #1e7a34 100%); }

.knopf-hell {
  background: linear-gradient(180deg, #fff9ec 0%, #f3e3bd 100%);
  color: #3b2a18;
  border-color: #b78a44;
}

.pfeil { font-weight: 800; }

.text-link {
  font-size: 12.5px;
  font-weight: 800;
  color: #24406e;
  text-decoration: none;
}

/* =====================================================================
   MITTLERE REIHE
   ===================================================================== */

.reihe {
  display: grid;
  gap: 3px;
  padding: 0 5px 0 0;
}

.reihe-mitte {
  grid-template-columns: 780px 1fr;
  height: 202px;
  min-height: 0;
  overflow: hidden;
  flex: none;
  margin-top: 2px;
}

.karriere-karte { padding: 11px 18px 8px; }

.karriere-karte .karten-titel { text-align: center; margin-bottom: 8px; }

.karriere-bahn {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0 0;
}

.bahn-linie {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 60px;
  border-top: 3px dashed #c9a66b;
  opacity: 0.85;
}

.abzeichen-station {
  position: relative;
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abzeichen {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #c9a66b;
  box-shadow: 0 6px 14px rgba(40, 20, 5, 0.35);
  background: #0b1e4d;
}

.abzeichen img { width: 100%; height: 100%; object-fit: cover; display: block; }

.station-aktiv .abzeichen {
  width: 94px;
  height: 94px;
  margin-top: -5px;
  border-color: #f2c94c;
  box-shadow: 0 0 0 3px rgba(242, 201, 76, 0.55), 0 0 24px rgba(242, 201, 76, 0.75), 0 8px 16px rgba(40, 20, 5, 0.4);
}

.band {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  background: linear-gradient(180deg, #ffe27a, #f2c94c);
  border: 2px solid #8a5a18;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  color: #4a2c12;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.status {
  position: absolute;
  right: 16px;
  top: 64px;
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.station-aktiv .status { right: 11px; top: 74px; }

.abzeichen-name {
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 800;
  color: #3b2a18;
  text-align: center;
  line-height: 1.15;
}

.station-aktiv .abzeichen-name { margin-top: 9px; color: #24406e; }

/* --- "Du bist aktuell" --- */

.stufe-karte { padding: 12px 16px 12px 23px; display: flex; gap: 12px; }

.stufe-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding-left: 44px; }

.stufe-titel { margin: 0 0 6px; display: flex; flex-direction: column; }

.stufe-klein {
  font-family: "Alegreya", serif;
  font-size: 14px;
  font-weight: 700;
  color: #6b4a2a;
}

.stufe-gross {
  font-family: "Alegreya", serif;
  font-size: 28px;
  font-weight: 900;
  color: #24406e;
  line-height: 1;
}

.stufe-satz { margin: 0 0 10px; font-size: 12.8px; line-height: 1.35; font-weight: 600; color: #3b2a18; max-width: 214px; }

.stufe-bild { position: relative; width: 210px; flex: none; }

.stufe-junge {
  position: absolute;
  right: -6px;
  top: 0;
  width: 218px;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 12px;
  filter: drop-shadow(0 8px 14px rgba(40, 20, 5, 0.35));
}

.stufe-karte .knopf { margin-top: auto; padding: 10px 18px; font-size: 13.5px; }

.kompass-medaillon {
  position: absolute;
  left: 22px;
  top: 10px;
  width: 34px;
  height: 34px;
  filter: drop-shadow(0 4px 8px rgba(40, 20, 5, 0.4));
}

/* =====================================================================
   UNTERE REIHE
   ===================================================================== */

.reihe-unten {
  grid-template-columns: 442px 349px 1fr;
  height: 394px;
  min-height: 0;
  flex: none;
  margin-top: 2px;
}

/* --- Naechste Schritte --- */

.schritte-karte { padding: 14px 16px; display: flex; flex-direction: column; }

.schritt-hero { margin-top: 19px; display: flex; gap: 10px; align-items: flex-start; }

.schritt-bild { position: relative; flex: none; width: 150px; height: 158px; border-radius: 11px; overflow: hidden; border: 2px solid #c9a66b; }

.schritt-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.schritt-text { flex: 1; min-width: 0; padding-top: 6px; }

.schritt-marke {
  font-family: "Alegreya", serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #8a6a3a;
  margin-bottom: 4px;
}

.bild-plakette {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 10px;
  background: rgba(7, 20, 40, 0.88);
  border: 1.5px solid #c9a66b;
  border-radius: 999px;
  color: #f2c94c;
  font-family: "Alegreya", serif;
  font-size: 12.5px;
  font-weight: 700;
}

.schritt-titel {
  margin-top: 0;
  font-family: "Alegreya", serif;
  font-size: 16.5px;
  line-height: 23px;
  font-weight: 800;
  color: #1d2b57;
}

.schritt-unter { margin: 6px 0 10px; font-size: 12.5px; color: #6d7c95; font-weight: 600; }

.schritt-hero .knopf-gruen {
  width: 100%;
  height: 48px;
  font-size: 14.5px;
  border-radius: 15px;
  justify-content: center;
  border: 2px solid #12945f;
  background: linear-gradient(180deg, #0a7b45 0%, #016a3b 42%, #01703f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 8px rgba(6, 61, 33, 0.35);
}

.schritt-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.schritte-karte .karten-titel { color: #16224a; }

.schritt-liste li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  background: rgba(255, 252, 244, 0.42);
  border: 1.5px solid rgba(201, 166, 107, 0.22);
  border-radius: 13px;
}

.schritt-liste .listen-titel { font-size: 14.5px; color: #1d2b57; }

.schritt-liste .listen-unter { font-size: 12px; color: #6d7c95; }

.schritt-liste .listen-symbol { width: 42px; height: 42px; }

.listen-kachel {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: linear-gradient(180deg, #7d5fc6 0%, #56389f 55%, #3f2585 100%);
  border: 2px solid #2b1a5c;
  box-shadow: inset 0 3px 7px rgba(255, 255, 255, 0.28), 0 2px 4px rgba(30, 20, 60, 0.25);
}

.listen-kachel svg { width: 30px; height: 30px; }

.listen-symbol { width: 30px; height: 30px; object-fit: contain; flex: none; }

.listen-text { flex: 1; display: flex; flex-direction: column; }

.listen-titel { font-size: 13px; font-weight: 800; color: #3b2a18; }

.listen-unter { font-size: 11px; color: #6b4a2a; font-weight: 600; }

.listen-pfeil { width: 15px; height: 15px; color: #8a5a18; flex: none; }

/* --- Aktivitaeten --- */

.aktivitaeten-karte { padding: 14px 16px; display: flex; flex-direction: column; }

.aktivitaeten-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.aktivitaeten-liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 250, 238, 0.75);
  border: 1.5px solid #d9b778;
  border-radius: 11px;
}

.aktiv-bild {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
}

.aktiv-bild svg { width: 19px; height: 19px; }

.aktiv-blau { background: linear-gradient(180deg, #1d4e8f, #0d2f5e); }
.aktiv-violett { background: linear-gradient(180deg, #6a35a8, #3f1a6e); }
.aktiv-gruen { background: linear-gradient(180deg, #2f7d4c, #175434); }

.aktiv-text { flex: 1; display: flex; flex-direction: column; }

.aktiv-lohn { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }

.plus { font-size: 13.5px; font-weight: 900; color: #1e7a34; }

.zeit { font-size: 10.5px; font-weight: 700; color: #8a6a44; }

.aktivitaeten-karte .knopf-hell { margin-top: auto; align-self: flex-start; }

/* --- Rechte Spalte: Zusatz + Tipp --- */

.rechts-spalte { display: flex; flex-direction: column; gap: 3px; min-height: 0; }

.zusatz-karte { padding: 10px 14px 9px; height: 249px; }

.zusatz-kopf { display: flex; align-items: center; justify-content: space-between; }

.zusatz-raster {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 8px;
}

.zusatz { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.zusatz img {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 2px solid #c9a66b;
  box-shadow: 0 4px 9px rgba(40, 20, 5, 0.3);
  background: #0b1e4d;
}

.zusatz span {
  font-size: 10.5px;
  font-weight: 800;
  color: #3b2a18;
  text-align: center;
  line-height: 1.1;
}

/* --- Tipp --- */

.tipp-karte { padding: 9px 13px 10px; height: 141px; overflow: hidden; }

.tipp-kopf { display: flex; align-items: center; gap: 16px; padding-left: 9px; font-family: "Alegreya", serif; font-size: 14.5px; font-weight: 800; color: #202a46; }

.tipp-kopf > span { border-bottom: 2px solid #2d4f8f; padding-bottom: 1px; }

.tipp-symbol { width: 21px; height: 21px; flex: none; color: #6b4a1e; }

.tipp-inhalt {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 5px;
  min-height: 104px;
  border-radius: 11px;
  border: 2px solid #c1904f;
  background:
    radial-gradient(120% 62% at 22% 116%, rgba(163, 209, 138, 0.75) 0 38%, rgba(163, 209, 138, 0) 62%),
    radial-gradient(90% 50% at 78% 118%, rgba(246, 224, 168, 0.7) 0 40%, rgba(246, 224, 168, 0) 66%),
    linear-gradient(180deg, #cfe6fb 0%, #e9f4ff 58%, #fbf3e0 100%);
}

.tipp-laura {
  position: absolute;
  left: 3px;
  bottom: 0;
  height: 104px;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(40, 20, 5, 0.35));
}

.tipp-mitte { flex: 1; position: relative; margin-left: 140px; margin-right: 22px; }

.tipp-zitat {
  position: relative;
  margin: 0;
  font-family: "Alegreya", serif;
  font-size: 13px;
  line-height: 1.45;
  color: #1f2a4d;
  text-align: left;
  background: linear-gradient(180deg, #f4faff, #e6f1fd);
  border: 2px solid #bcd4ee;
  border-radius: 15px;
  padding: 10px 14px;
}

.tipp-zitat::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 44%;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-right-color: #e6f1fd;
}

.kleeblatt { position: absolute; right: 10px; top: -12px; font-size: 19px; line-height: 1; }

.tipp-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #f0c95a;
  background: #1b2a5c;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
}

.tipp-pfeil:first-of-type { left: -3px; }

.tipp-pfeil:last-of-type { right: -3px; }


/* =====================================================================
   Anhang: Ansichten (Cockpit, Meine Reise, Deine Aufgaben, Wissensinseln,
   Mein Logbuch, Meine Erfolge, Schuelercoach, Meine Schule, Hilfe & Regeln)
   ===================================================================== */

.ansicht.is-hidden { display: none !important; }
.ansicht { display: block; }

/* Geruest: der Nachbau war auf genau 1536 x 1024 festgelegt (Vergleichsbild).
   Fuer die App bleibt die Seitenleiste 239 Pixel breit, der Hauptbereich waechst
   mit dem Fenster und die Seite laesst sich rollen. */
.app-shell {
  display: grid;
  grid-template-columns: 239px minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  background: #140d06;
}
.app-shell .seitenleiste {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
}
.app-shell .haupt { min-height: 100vh; }
.ansicht:not(#ansicht-cockpit) { padding: 26px 28px 44px; }

/* Knoepfe: im Nachbau sind alle Knoepfe Verweise, hier auch echte Schaltflaechen. */
button.knopf, .knopf {
  font: inherit;
  cursor: pointer;
  border: 0;
  text-decoration: none;
}

/* Abmelden unten in der Seitenleiste. */
.abmelden-knopf {
  width: 196px;
  height: 42px;
  box-sizing: border-box;
  border: 1.5px solid #79b3dd;
  background: linear-gradient(180deg, #0a3f68 0%, #042c50 100%);
  color: #ffffff;
  border-radius: 13px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.abmelden-knopf:hover { background: linear-gradient(180deg, #0d4b7a 0%, #06355e 100%); }

/* Anfangsbuchstabe anstelle eines Lichtbilds. */
.avatar-initial {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, #d9a52c);
  color: #4a2c12;
  font-weight: 800;
  font-size: 15px;
  border: 1.5px solid rgba(90, 66, 34, 0.45);
}

/* Zaehler der Tipps klein neben dem Zitat. */
.tipp-zaehler { font-size: 12px; color: rgba(74, 44, 18, 0.65); align-self: flex-end; }

/* Zustand der Zusatzqualifikationen auf der Cockpitkarte. */
.zusatz { position: relative; }
/* Das Zustandszeichen haengt am Bild selbst, nicht an der Kachel: die Rasterzellen sind
   unterschiedlich breit, das Bild bleibt aber 74px gross - so bleibt das Zeichen auf jedem
   Schirm am Abzeichen (Wunsch vom 11.10.2026 abends). */
.zusatz-bild { position: relative; display: inline-flex; }
.zusatz-zeichen {
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: #1e9e4a;
  color: #fff;
  border: 1.5px solid #fff;
}
/* Die noch offenen Kacheln tragen das Schloss der gesperrten Karrierestufen (Wunsch vom
   11.10.2026), an derselben Stelle des Abzeichens und genauso gross wie dort. Es ersetzt den
   frueheren amberfarbenen Punkt. Das Zeichen sitzt jetzt rechts unten am Abzeichen und haengt
   am Bild (span.zusatz-bild) - dieselbe Ecke wie im Karriereweg (Wunsch vom 11.10.2026 abends). */
.zusatz-schloss {
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
/* Nicht aktive Elemente erscheinen als ausgegraute Kopie ihres Motivs, damit man
   erkennt: vorhanden, aber nicht aktiv (Wunsch vom 11.10.2026, wie im Zielbild). */
.zusatz-offen img { border-color: #b6bac2; background: #33383f; filter: grayscale(1); }
.station-gesperrt .abzeichen { border-color: #b6bac2; background: #33383f; }
.station-gesperrt .abzeichen img { filter: grayscale(1); }
.zusatz-fehlend { opacity: 0.45; filter: saturate(0.4); }

/* Bilder der Karrierebahn und der Stufe. */
.abzeichen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stufe-abzeichen {
  width: 168px;
  height: 168px;
  object-fit: contain;
  display: block;
  margin: 0 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(20, 12, 4, 0.35));
}

/* Listen in den Nebenansichten (Aufgaben, Reise, Logbuch, Inseln). */
.ansicht .parchment,
.ansicht .activity-strip {
  margin: 0 0 18px;
}
.ansicht-kopf { margin: 4px 0 16px; }
.ansicht-kopf h1 {
  font-family: var(--schrift-titel, "Alegreya", serif);
  font-size: 34px;
  margin: 0 0 4px;
  color: #4a2c12;
}
.ansicht-kopf p { margin: 0; color: rgba(59, 42, 24, 0.78); }

/* Die alten Karten der Nebenansichten bleiben in ihrer Gestaltung, werden aber
   auf die Breite des Hauptbereichs gebracht. */
.ansicht .career-card,
.ansicht .tasks-card,
.ansicht .journey-card,
.ansicht .abenteuer-card,
.ansicht .qualifications-card,
.ansicht .logbook-card { width: 100%; }

/* Weiterfuehrende Verweise auf den Cockpitkarten. */
a.text-link, .schule-knopf { text-decoration: none; }

/* Abenteuerwelt-Karte in "Meine Reise": Einstieg in die Lernwelt und die Adressen,
   die in ihren Schaltflaechen hinterlegt werden. */
.abenteuer-card { padding: 20px 22px; margin: 0 0 18px; }
.abenteuer-satz { margin: 0 0 14px; color: #4a3520; }
.abenteuer-aktion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abenteuer-aktion .knopf { padding: 12px 20px; }
.abenteuer-aktion .form-message { margin: 0; }
.abenteuer-card .integration-note { text-align: left; margin: 10px 0 0; }
.welt-adressen {
  margin-top: 14px;
  border-top: 1px dashed rgba(74, 44, 18, 0.25);
  padding-top: 10px;
}
.welt-adressen summary { cursor: pointer; font-weight: 600; color: #4a2c12; }
.welt-satz { margin: 8px 0; font-size: 13px; color: rgba(59, 42, 24, 0.78); }
.welt-kennung { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13px; }
.welt-kennung input {
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(74, 44, 18, 0.3);
  font: inherit;
  min-width: 180px;
}
.welt-zeile { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 12.5px; flex-wrap: wrap; }
.welt-label { min-width: 96px; color: rgba(59, 42, 24, 0.78); }
.welt-zeile code {
  background: rgba(74, 44, 18, 0.07);
  border-radius: 6px;
  padding: 3px 6px;
  word-break: break-all;
}
.welt-kopieren { padding: 6px 12px; font-size: 12px; }
.welt-kopieren:disabled { opacity: 0.55; cursor: default; }
.welt-hinweis { margin: 8px 0 0; font-size: 12px; color: #7b6b4f; }