/* JagdIQ Audio-Lernen */
.audio-shell{
  width:min(100vw,432px);
  min-height:100dvh;
  margin:0 auto;
  overflow-y:auto;
  color:var(--green,#0b4a38);
  background:
    radial-gradient(circle at 85% 3%,rgba(255,255,255,.25),transparent 24%),
    linear-gradient(180deg,#f5e4cf 0%,#edd7ba 100%);
}
.audio-dashboard,.audio-player{
  min-height:100dvh;
  box-sizing:border-box;
  padding:max(18px,env(safe-area-inset-top)) 15px max(28px,calc(env(safe-area-inset-bottom) + 20px));
}
.audio-head,.audio-player-head{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
}
.audio-head{grid-template-columns:44px minmax(0,1fr)}
.audio-head>div,.audio-player-head>div{min-width:0}
.audio-head span,.audio-player-head span,.audio-kicker{
  display:block;
  color:#9a711d;
  font-size:7px;
  font-weight:900;
  letter-spacing:1.1px;
}
.audio-head h1{
  margin:3px 0 0;
  font-family:Georgia,serif;
  font-size:27px;
  line-height:1;
}
.audio-player-head strong{
  display:block;
  margin-top:3px;
  font-family:Georgia,serif;
  font-size:16px;
}
.audio-back{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.78);
  border-radius:50%;
  background:rgba(255,249,241,.54);
  color:inherit;
  box-shadow:0 7px 18px rgba(86,60,37,.08),inset 0 1px 0 rgba(255,255,255,.92);
}
.audio-back svg{
  width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.audio-hero{
  display:grid;
  gap:12px;
  padding:19px 17px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:27px;
  background:rgba(255,249,241,.58);
  box-shadow:0 10px 25px rgba(91,62,37,.08),inset 0 1px 0 rgba(255,255,255,.92);
}
.audio-hero h2{
  margin:0;
  font-family:Georgia,serif;
  font-size:27px;
  line-height:1.08;
}
.audio-hero p,.audio-device-note{
  margin:0;
  color:#6f6960;
  font-size:10px;
  line-height:1.45;
}
.audio-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.audio-hero-stats>div{
  min-width:0;
  display:grid;
  gap:2px;
  padding:10px 6px;
  border-radius:15px;
  background:rgba(11,74,56,.055);
  text-align:center;
}
.audio-hero-stats strong{
  overflow:hidden;
  font-family:Georgia,serif;
  font-size:17px;
  text-overflow:ellipsis;
}
.audio-hero-stats span{color:#746e65;font-size:7px}
.audio-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:10px;
  margin:18px 2px 8px;
}
.audio-section-title h2{margin:0;font-family:Georgia,serif;font-size:20px}
.audio-section-title span{color:#746e65;font-size:8px}
.audio-mode-grid{display:grid;gap:8px}
.audio-mode-grid button{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  min-height:68px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:20px;
  background:rgba(255,249,241,.54);
  color:inherit;
  text-align:left;
  box-shadow:0 8px 18px rgba(91,62,37,.06);
}
.audio-mode-grid button>span{
  grid-row:1/3;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:12px;
  background:rgba(11,74,56,.07);
  font-size:8px;font-weight:900;
}
.audio-mode-grid button strong{align-self:end;font-family:Georgia,serif;font-size:14px}
.audio-mode-grid button small{align-self:start;margin-top:2px;color:#746e65;font-size:8px}
.audio-mode-grid button.active{
  border-color:rgba(11,106,73,.25);
  background:rgba(197,218,188,.43);
}
.audio-subject{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding:12px;
  border-radius:17px;
  background:rgba(255,249,241,.5);
}
.audio-subject[hidden]{display:none}
.audio-subject label{font-size:8px;font-weight:900;letter-spacing:.8px;color:#9a711d}
.audio-subject select{
  width:100%;
  min-height:44px;
  border:1px solid rgba(11,74,56,.12);
  border-radius:13px;
  padding:0 11px;
  background:rgba(255,255,255,.55);
  color:inherit;
  font:inherit;
  font-size:10px;
}
.audio-duration{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
}
.audio-duration button{
  min-height:54px;
  display:grid;
  place-content:center;
  gap:2px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:17px;
  background:rgba(255,249,241,.5);
  color:inherit;
  font-family:Georgia,serif;
  font-size:17px;
}
.audio-duration button small{font-family:system-ui,-apple-system,sans-serif;font-size:6px;font-weight:900;letter-spacing:.7px;color:#746e65}
.audio-duration button.active{background:rgba(197,218,188,.48);border-color:rgba(11,106,73,.22)}
.audio-primary,.audio-secondary{
  width:100%;
  min-height:50px;
  border-radius:17px;
  font:inherit;
  font-weight:900;
}
.audio-primary{
  margin-top:14px;
  border:0;
  background:linear-gradient(180deg,#08704d 0%,#07583c 100%);
  color:#fff;
  box-shadow:0 9px 18px rgba(9,97,63,.14);
}
.audio-secondary{
  margin-top:8px;
  border:1px solid rgba(11,74,56,.14);
  background:rgba(255,249,241,.52);
  color:inherit;
}
.audio-device-note{margin:9px 4px 0;text-align:center;font-size:8px}
.audio-loading,.audio-error{
  min-height:100dvh;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  align-content:center;
  gap:12px;
  padding:24px;
  text-align:center;
}
.audio-loading>span{
  width:34px;height:34px;
  border:3px solid rgba(11,74,56,.15);
  border-top-color:currentColor;
  border-radius:50%;
  animation:audio-spin .8s linear infinite;
}
.audio-loading strong,.audio-error h1{font-family:Georgia,serif}
.audio-error>div{
  width:68px;height:68px;
  display:grid;place-items:center;
  border-radius:22px;
  background:rgba(255,249,241,.58);
}
.audio-error>div svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.audio-error h1{margin:0;font-size:27px}
.audio-error p{max-width:310px;margin:0;color:#6f6960;font-size:10px;line-height:1.45}
@keyframes audio-spin{to{transform:rotate(360deg)}}
.audio-offline-badge{
  padding:6px 8px;
  border-radius:999px;
  background:rgba(11,74,56,.07);
  color:#587065!important;
  font-size:6.5px!important;
  letter-spacing:.8px!important;
}
.audio-progress{
  height:5px;
  overflow:hidden;
  margin:0 2px 15px;
  border-radius:999px;
  background:rgba(11,74,56,.1);
}
.audio-progress i{display:block;height:100%;border-radius:inherit;background:var(--green,#0b4a38)}
.audio-now{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:20px 17px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:27px;
  background:rgba(255,249,241,.58);
  text-align:center;
  box-shadow:0 10px 25px rgba(91,62,37,.08);
}
.audio-speaker-orb{
  width:74px;height:74px;
  display:grid;place-items:center;
  margin:2px 0;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(11,106,73,.13),rgba(255,255,255,.48));
}
.audio-speaker-orb svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.audio-now>small{color:#746e65;font-size:7px;font-weight:900;letter-spacing:.8px}
.audio-now h1{margin:0;font-family:Georgia,serif;font-size:22px;line-height:1.18}
.audio-now p{margin:0;color:#665f57;font-size:10px;line-height:1.4}
.audio-controls{
  display:grid;
  grid-template-columns:54px 76px 54px;
  justify-content:center;
  align-items:center;
  gap:16px;
  margin:17px 0 12px;
}
.audio-controls button{
  display:grid;place-items:center;
  width:54px;height:54px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:50%;
  background:rgba(255,249,241,.55);
  color:inherit;
}
.audio-controls button:disabled{opacity:.28}
.audio-controls svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.audio-controls .audio-play{
  width:76px;height:76px;
  background:linear-gradient(180deg,#08704d 0%,#07583c 100%);
  color:#fff;
  border:0;
  box-shadow:0 11px 22px rgba(9,97,63,.16);
}
.audio-controls .audio-play svg{width:30px;height:30px}
.audio-speed{
  display:grid;
  gap:7px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,249,241,.48);
}
.audio-speed>span{color:#9a711d;font-size:7px;font-weight:900;letter-spacing:.9px}
.audio-speed>div{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.audio-speed button{
  min-height:34px;
  border:1px solid rgba(11,74,56,.1);
  border-radius:11px;
  background:rgba(255,255,255,.38);
  color:inherit;
  font:inherit;
  font-size:9px;
  font-weight:850;
}
.audio-speed button.active{background:rgba(197,218,188,.55);border-color:rgba(11,106,73,.2)}
.audio-transcript{
  display:grid;
  gap:6px;
  margin-top:10px;
  padding:14px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:19px;
  background:rgba(255,249,241,.47);
}
.audio-transcript small{color:#9a711d;font-size:7px;font-weight:900;letter-spacing:.9px}
.audio-transcript p{margin:0;color:#5f5a53;font-size:9px;line-height:1.5}
.audio-plan-meta{
  display:flex;justify-content:space-between;gap:10px;
  margin:10px 3px 0;
  color:#746e65;
  font-size:7.5px;
}
.learn-mode-card--audio{
  grid-column:1/-1;
  min-height:66px;
  border-color:rgba(11,106,73,.17);
  background:rgba(204,223,193,.42);
}
.learn-mode-card--audio>span svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:380px){
  .audio-dashboard,.audio-player{padding-left:13px;padding-right:13px}
  .audio-hero h2{font-size:24px}
  .audio-duration{gap:5px}
  .audio-controls{gap:12px}
}