/*
  IHK Lernwerkstatt — Cozy Herbstedition
  Farbwerte aus der vom Nutzer bereitgestellten Herbstpalette.
  Klar lesbare Prüfungsinhalte, warme Papieroberflächen, Laubdetails.
  Läuft vollständig offline; keine externen Schriftarten oder Bibliotheken.
*/
:root {
  --bg:#F4ECE0;
  --paper:#FFFAF3;
  --navy:#69381F;  /* Kastanienbraun */
  --navy2:#594638;
  --text:#3F342D;
  --muted:#766A5D;
  --teal:#606C41;  /* Moosgrün */
  --soft:#F5EADB;
  --line:#E7D8C6;
  --gold:#C68F56; /* Lehm */
  --red:#AD584A;
  --orange:#B67D51;
  --shadow:0 10px 28px rgba(83,58,38,.085), 0 2px 5px rgba(83,58,38,.035);
  --wood:#69381F;
  --rust:#984A32;
  --terracotta:#A9754B;
  --beige:#E1BD9C;
  --olive:#606C41;
  --petrol:#3B4B44;
  --autumn-paper:#FFF8ED;
}
html {scroll-behavior:smooth}
body {
  color:var(--text);
  background:
    radial-gradient(ellipse at 4% 2%,rgba(225,189,156,.35),transparent 36%),
    radial-gradient(ellipse at 96% 72%,rgba(175,162,122,.20),transparent 30%),
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(114,84,56,.013) 6px 7px),
    #F4ECE0;
}
body:before {display:none}
button,input,select,textarea {font-family:inherit}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid rgba(156,99,52,.5);
  outline-offset:3px;
}
a {transition:color .2s ease}

/* Herbstliches Holz statt kühler Industrieton; Logo bleibt die Katze. */
.sidebar {
  background:
    radial-gradient(circle at -20% 5%,rgba(218,156,91,.16),transparent 35%),
    repeating-linear-gradient(91deg,rgba(255,220,172,.015) 0 1px,transparent 2px 16px),
    linear-gradient(162deg,#6B442F,#593B2C 48%,#4B392E 100%);
  color:#FFF4E6;
  box-shadow:10px 0 32px rgba(78,50,31,.09);
}
.sidebar::before{display:none}
.sidebar::after{
  background:url('assets/theme/leaf_olive.svg') center/contain no-repeat;
  opacity:.075;
  right:-18px;bottom:5px;width:210px;height:210px;
  transform:rotate(-22deg);
}
.sidebar > *{z-index:1;position:relative}
.brand {padding-bottom:32px;gap:12px}
.brand-icon {
  width:58px;height:58px;border-radius:18px;
  background:#F7E8D4;
  border:2px solid rgba(239,203,163,.55);
  box-shadow:0 6px 19px rgba(37,20,11,.25);
}
.brand-icon img {object-fit:contain;padding:3px}
.brand strong {font-weight:850;letter-spacing:1.4px;font-size:12px;color:#FFF9EE}
.brand small {font-size:10px;letter-spacing:.3px;color:#E2C9AF}
.side-label,.mini-label {color:#CCA98B}
.side-nav {gap:7px}
.nav-btn {
  color:#F0DECC;
  border-radius:12px;
  border:1px solid transparent;
  padding:13px 14px;
  transition:background .2s,transform .2s,border-color .2s;
}
.nav-btn .nav-icon {color:#E2BC8C}
.nav-btn.active {
  color:#FFF8EC;
  background:linear-gradient(90deg,rgba(229,181,126,.20),rgba(229,181,126,.08));
  border-color:rgba(255,225,184,.22);
  box-shadow:inset 3px 0 #DCA46A;
}
.nav-btn:hover:not(:disabled){background:rgba(251,225,189,.13);transform:translateX(2px)}
.sidebar-bottom {
  border:1px solid rgba(255,226,189,.21);
  background:rgba(255,240,214,.09);
  border-radius:17px;
  box-shadow:0 14px 28px rgba(46,25,14,.13);
}
.sidebar-bottom .progress-track {background:rgba(255,241,219,.20)}
.sidebar-bottom p {color:#F4DFCA}
.side-percent {color:#FFF2DF}
.side-copy {color:#E1C5AC}
.side-copy span{color:#DFA565}
.progress-track{background:#EADCC9;height:8px}
.progress-fill{background:linear-gradient(90deg,#7E844F,#A9A86B);box-shadow:0 0 12px rgba(96,108,65,.18)}

/* Helle Briefpapier-Kopfleiste mit kleiner Portraitmarke. */
.topbar {
  background:rgba(255,250,243,.91);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #E9DAC9;
  box-shadow:0 2px 14px rgba(105,74,46,.035);
}
.overline,.eyebrow{color:#995331}
.breadcrumbs>span:last-child{color:#544334}
.top-right{color:#756757}
.status-dot{background:#748451}
#date-chip{border-color:#E8D5BF;background:#F8EBDD;color:#855637;border-radius:999px;padding:8px 11px}
.mascot-chip {background:#F9EEE0;border:1px solid #E8D7C5}
.mascot-chip img{object-fit:contain;background:#F6E7D5;padding:2px}
.mascot-chip strong{color:#69432E}
.mascot-chip small{color:#8D7058}
.app-pane main{position:relative}
.app-pane main:before {
  content:'';
  display:block;
  position:absolute;
  top:28px;right:18px;
  width:82px;height:82px;
  background:url('assets/theme/leaf.svg') center/contain no-repeat;
  opacity:.07;
  pointer-events:none;
  transform:rotate(20deg);
}
.app-pane main>*{position:relative;z-index:1}
.foot{background:rgba(255,248,238,.58);color:#947F6A;border-color:#E7D9C7}

/* Warmes Herbstplakat auf der Startseite. */
.hero {grid-template-columns:minmax(0,1.58fr) minmax(270px,.88fr);gap:20px}
.hero-main {
  background:
    radial-gradient(ellipse at 100% 100%,rgba(241,189,120,.32),transparent 55%),
    linear-gradient(120deg,#83523B 0%,#77513F 46%,#635547 100%);
  color:#FFF8EF;
  min-height:355px;
  border:1px solid rgba(75,49,33,.2);
  border-radius:24px;
  padding:33px 34px;
  box-shadow:0 24px 40px rgba(91,57,36,.15),inset 0 1px rgba(255,252,242,.14);
}
.hero-main:after {display:none}
.hero-main:before {
  display:block;
  content:'';
  position:absolute;
  inset:0;
  width:auto;height:auto;
  background:
    repeating-linear-gradient(94deg,transparent 0 16px,rgba(255,225,185,.02) 17px 18px),
    radial-gradient(circle at 100% 15%,rgba(255,235,201,.09),transparent 42%);
  border:none;border-radius:inherit;box-shadow:none;
  pointer-events:none;
}
.hero-layout {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(180px,220px);
  gap:1px;
  align-items:end;
  height:100%;
}
.hero-copy {padding-right:0;position:relative;z-index:2}
.hero-main .eyebrow{color:#F8D19C;letter-spacing:2px}
.hero-main h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(28px,2.7vw,40px);
  letter-spacing:-1.25px;
  line-height:1.08;
  font-weight:700;
  margin:15px 0 12px;
  text-wrap:balance;
}
.hero-main p {color:#FAE9D5;max-width:370px;font-size:12px;line-height:1.7;margin-bottom:19px}
.hero-actions {gap:9px}
.hero-actions .btn {padding:11px 13px;font-size:11px}
.hero-illustration{
  position:relative;
  align-items:flex-end;
  min-height:270px;
  align-self:end;
  display:flex;
  justify-content:center;
  z-index:1;
}
.hero-illustration .mascot-halo{
  position:absolute;
  width:225px;height:225px;
  bottom:29px;right:-5px;
  background:radial-gradient(ellipse,#E7B583 0%,rgba(223,179,129,.50) 47%,transparent 72%);
  filter:blur(13px);
  opacity:.9;
}
.hero-illustration img {
  position:relative;
  z-index:2;
  width:min(100%,227px);
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 12px 13px rgba(24,18,16,.32));
  transform:translateY(16px);
}
.hero-tip {
  margin-top:14px;
  padding:11px 12px;
  max-width:365px;
  background:rgba(255,240,218,.10);
  border:1px solid rgba(247,222,186,.16);
  border-radius:12px;
  font-size:11px;
  line-height:1.5;
  color:#FAF0E6;
}
.hero-tip strong {color:#FFE0AB}
.hero-meta {display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.edition-chip,.power-badge {
  display:inline-flex;align-items:center;
  padding:6px 10px;
  border-radius:99px;
  font-size:10px;
  letter-spacing:.1px;
  font-weight:750;
  box-shadow:none;
  line-height:1.2;
}
.edition-chip {background:#F0DAB6;color:#6A452D}
.power-badge {background:rgba(255,248,234,.12);color:#FFF2E2;border:1px solid rgba(255,230,201,.26)}
.power-badge:before {content:'✦';color:#F8C58E}
.hero-foliage{position:absolute;inset:0;pointer-events:none;z-index:1}
.fall-leaf{
  position:absolute;
  width:39px;height:39px;
  display:block;
  background:url('assets/theme/leaf.svg') center/contain no-repeat;
  opacity:.3;
  filter:drop-shadow(0 5px 4px rgba(60,37,23,.12));
  animation:leafFloat 9s ease-in-out infinite;
}
.fall-leaf.leaf-a{top:25px;right:63px;transform:rotate(15deg);animation-duration:10s}
.fall-leaf.leaf-b{top:105px;right:26px;width:24px;height:24px;opacity:.2;background-image:url('assets/theme/leaf_olive.svg');animation-delay:-3s}
.fall-leaf.leaf-c{bottom:28px;right:258px;width:27px;height:27px;opacity:.22;animation-delay:-6s}
@keyframes leafFloat{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:-6px 8px;rotate:9deg}
}
.hero-side {
  padding:25px;
  border-radius:24px;
  background:linear-gradient(160deg,#FFF9EF,#FFFEF9);
  border:1px solid #E8D8C4;
  box-shadow:var(--shadow);
}
.hero-side h3 {color:#806049;font-size:11px}
.goal-number {color:#5D6C3F;font-size:clamp(38px,4vw,54px)}
.goal-number span{color:#918172}
.hero-side p{color:#806D5F}
.goal-foot{color:#867362}
.side-mascot{
  border-top:1px dashed #E5D0B5;
  color:#816B59;
  margin-top:18px;
  padding-top:15px;
}
.side-mascot img{
  background:radial-gradient(circle,#F7EBD7,#EEE0CB);
  border:1px solid #E6D1B8;
  padding:3px;
  width:47px;height:47px;
  object-fit:contain;
}

/* Bibliothek aus Papierkarten: gleiche Gestalt in allen App-Bereichen. */
.section-heading {margin:28px 0 16px}
.section-heading h2 {
  color:#563C2B;
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.5px;
}
.section-heading p {color:#806F60}
.inline-link,.text-button {color:#8F5631}
.inline-link:hover,.text-button:hover {color:#6A432B}
.stat,.year-card,.book-card,.question-row,.filter-panel,.mode-card,.setting-panel,.question-card,.training-finish,.empty {
  background:linear-gradient(155deg,#FFFDF9,#FFF7ED);
  border:1px solid #E9D8C4;
  box-shadow:var(--shadow);
  border-radius:17px;
}
.stat {position:relative;overflow:hidden}
.stat:before {
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#C68F56,#E1BD9C 60%,transparent);
}
.stat-label,.stat-desc{color:#8D7A6A}
.stat-number{color:#5B4232}
.stat.s-teal .stat-number{color:#606C41}
.stat.s-orange .stat-number{color:#984C34}
.year-card,.book-card,.mode-card,.question-row {
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.year-card:hover,.book-card:hover,.mode-card:hover,.question-row:hover {
  transform:translateY(-2px);
  box-shadow:0 18px 32px rgba(99,65,39,.13);
  border-color:#D8B995;
}
.year-head h3,.book-card h3{color:#59402D}
.year-bar-caption,.year-bottom{color:#7B6754}
.book-card .book-symbol {
  background:linear-gradient(115deg,#694B38,#9F6E4D);
  box-shadow:inset 5px 0 #3F2D24,3px 5px 12px rgba(64,42,26,.15);
  color:#F9D7AE;
}
.book-card.master{border-color:#C6CBAE;background:linear-gradient(150deg,#F7F9EB,#FFF9EF)}
.mode-icon{color:#8A5839}
.mode-card strong,.setting-panel h3{color:#62422F}
.mode-card p,.setting-panel p {color:#79695D}
.mini-btn,.btn-secondary,.btn-outline,.btn-ghost {
  background:#F8ECDD;
  border:1px solid #E7CFB4;
  color:#6B492E;
}
.btn-primary {background:#7B4B30;color:#FFF9EC;box-shadow:0 5px 14px rgba(99,57,33,.14)}
.btn-primary:hover:not(:disabled){background:#69381F;filter:none;transform:translateY(-1px)}
.btn-light {background:#FBE5C8;color:#69432F}
.btn-light:hover:not(:disabled){background:#FFF3DC;filter:none}
.btn-outline-light{background:transparent;border-color:rgba(255,237,209,.52);color:#FFF7EC}
.btn-outline-light:hover:not(:disabled){background:rgba(255,244,223,.13);filter:none}
.btn-secondary:hover,.mini-btn:hover,.btn-outline:hover{background:#F2E0CC}
.btn {border-radius:11px}
.pill {background:#F3E7D8;color:#745642;border-color:#E4D0BA}
.pill.green{background:#EBF0DC;color:#566741;border-color:#CCDBBA}
.pill.orange{background:#FAEDDA;color:#915834;border-color:#E9D3BA}
.pill.red{background:#F8E7E2;color:#AB574A;border-color:#EBCBC5}

/* Fragen sollen weiterhin uneingeschränkt lesbar sein. */
.quiz-header h1 {font-family:Georgia,'Times New Roman',serif;color:#4E382B;letter-spacing:-.3px}
.quiz-meta{color:#836F5C}
.question-card{
  background:linear-gradient(145deg,#FFFEFA,#FFF9F0);
  border-left:4px solid #B67D51;
  border-radius:20px;
  padding:clamp(18px,3vw,31px);
}
.question-card h2{color:#563E2D}
.question-full-text{color:#332D27!important;font-weight:650!important;line-height:1.67!important}
.question-number{color:#936444}
.source-callout,.inline-source {
  background:#FAF3E7;
  border-color:#E8D9C6;
  color:#725642;
  border-radius:12px;
}
.source-callout span {color:#705644}
.answer-label{color:#614331}
.text-answers {gap:10px}
.text-answer-button,.answer-button {
  background:#FFFCF7;
  border:1px solid #E1D1BF;
  border-radius:13px;
  color:#43382E;
  box-shadow:0 3px 8px rgba(91,63,43,.035);
  transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;
}
.text-answer-button:not(:disabled):hover,.answer-button:hover:not(:disabled){
  transform:translateY(-1px);
  background:#FFF2E0;
  border-color:#CFA478;
  box-shadow:0 7px 18px rgba(95,65,40,.09);
  filter:none;
}
.text-answer-number {
  background:#F4E6D4;
  border-color:#D9BEA0;
  color:#684830;
}
.text-answer-copy{color:inherit}
.text-answer-button.correct,.answer-button.correct,.answer-button.chosen.correct {
  background:#EAF0E1;
  border-color:#79936A;
  color:#304725;
}
.text-answer-button.correct .text-answer-number{background:#667C4D;border-color:#667C4D;color:#fff}
.text-answer-button.wrong,.answer-button.chosen.wrong {
  background:#FBECE7;
  border-color:#BE7869;
  color:#823F36;
}
.text-answer-button.wrong .text-answer-number{background:#A95C4D;border-color:#A95C4D;color:#fff}
.result-block {background:#EFF3E7;border-color:#C7D8B7;color:#364D2D}
.result-block.wrong{background:#FAEEE8;border-color:#EBC5BB;color:#8A443C}
.result-block>p,.explanation-text{color:#675748}
.transcription-note,.catalog-uncertain {background:#FFF4E5;border-left-color:#C28E52;color:#75573B}
.catalog-details>summary{color:#795A35}
.qrow-main h3{color:#56402E}
.filter-panel label {color:#7C624D}
.filter-panel input,.filter-panel select,select,input[type="search"],textarea {
  background:#FFFCF7;
  border-color:#DFCDB6;
  color:#493729;
  border-radius:10px;
}
.range,.checkline input {accent-color:#606C41}
.modal-dialog{background:#FFFBF4;border:1px solid #DBC7AF}
.modal-top{background:#FFF8EA;border-color:#EBD7BD}
.modal-top h3{color:#63432E}
.modal-body{background:#E7DCD0}
.toast{background:#5B4634;color:#FFF2E1}
.empty {background:#FFF8F0;border-style:dashed}
.training-finish h2{font-family:Georgia,serif;color:#523C2C}
.training-finish p{color:#78685B}

@media(max-width:1250px){
  .hero{grid-template-columns:1fr}
  .hero-layout{grid-template-columns:minmax(0,1fr) 255px}
  .hero-illustration img{width:250px}
}
@media(max-width:780px){
  .app-pane main:before{opacity:.035}
  .hero-main{padding:25px;min-height:auto}
  .hero-layout{grid-template-columns:minmax(0,1fr) 175px;gap:4px}
  .hero-main h1{font-size:clamp(28px,5vw,36px)}
  .hero-illustration{min-height:210px}
  .hero-illustration img{width:178px}
  .hero-illustration .mascot-halo{width:180px;height:180px}
  .hero-tip{max-width:none}
  .hero-foliage{display:none}
}
@media(max-width:550px){
  .hero-main{padding:25px 22px 0}
  .hero-layout{grid-template-columns:1fr}
  .hero-copy{padding-right:0}
  .hero-illustration{margin-top:8px;min-height:155px;justify-content:flex-end}
  .hero-illustration img{width:185px;transform:translateY(10px)}
  .hero-illustration .mascot-halo{right:-15px;bottom:0;width:185px;height:185px}
  .hero-main h1{font-size:34px}
  .hero-main p{font-size:12px}
  .section-heading h2{font-size:20px}
  .hero-tip{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fall-leaf{animation:none}
  .year-card,.book-card,.mode-card,.question-row,.nav-btn,.text-answer-button,.answer-button,.btn{transition:none}
  .year-card:hover,.book-card:hover,.mode-card:hover,.question-row:hover{transform:none}
}

/* Mobile navigation: reliably off-canvas, even when the base sidebar is sticky. */
@media(max-width:780px){
  .shell{display:block!important;grid-template-columns:none!important}
  .sidebar{position:fixed!important;top:0;left:-265px!important;width:245px!important;height:100dvh;z-index:55;transition:left .25s ease}
  .sidebar.open{left:0!important}
  .app-pane{width:100%!important;min-width:0!important}
  .mobile-menu{display:block}
  .topbar{height:68px}
}