/* Toolbar immer sichtbar */
.tts-toolbar { display:none; }
.ls-on .tts-toolbar { display:block; }

.tts-toolbar{
    margin: 10px 0 14px;
    position: sticky;
    top: 1em;
}

.tts-wrap{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;

  padding: 8px 10px;
  border: 1px solid rgba(10,40,60,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 20px rgba(4,20,30,.10);
}

.tts-buttons {
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.tts-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 700;
  padding-right: 6px;
  border-right: 1px solid rgba(10,40,60,.12);
  margin-right: 4px;
}

.tts-icon{
  width: 24px;
  height: 24px;
  display:inline-flex;
}

.tts-btn{
  appearance:none;
  border: 1px solid rgba(10,40,60,.18);
  background: rgba(255,255,255,.96);
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:0;
}

.tts-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    stroke: currentColor;
}

.tts-btn:focus-visible{
  outline: 3px solid rgba(101,179,91,.85);
  outline-offset: 2px;
}

.tts-btn--play{
  border-color: rgba(30,123,46,.35);
  color: rgb(20,110,40);
}
.tts-btn--stop{
  border-color: rgba(200,40,40,.35);
  color: rgb(175,20,20);
}
.tts-btn--ghost{
  color: rgba(9,18,25,.78);
}

.tts-sliders{
  display:flex;
  align-items:center;
  gap: 10px;
  padding-left: 4px;
}

.tts-slider{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
}

.tts-slider span {
    display: flex;
    align-items: center;
}

.tts-slider input{ 
    max-width: 20vw;
    width: clamp(4em, 20vw, 9em);
 }

.tts-status{
  flex: 1 1 220px;
  min-width: 220px;
  color: rgba(9,18,25,.70);
  font-size: .92rem;
  padding-left: 6px;
}

/* Absatz-Highlight */
.tts-reading-block{
  outline: 3px solid rgba(101,179,91,.85);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Wort-Highlight */
mark.tts-word{
  background: rgba(101,179,91,.35);
  border-radius: .25em;
  padding: 0 .06em;
}

/* Screenreader-only (falls nicht global vorhanden) */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}


/* ===== Neumorphismus Theme ===== */
.tts-wrap{
  --nm-bg: #eef2f7;
  --nm-ink: rgba(9,18,25,.86);

  --nm-shadow-out: 10px 10px 22px rgba(14, 28, 45, .14),
                   -10px -10px 20px rgba(255,255,255,.85);
  --nm-shadow-in: inset 8px 8px 18px rgba(14, 28, 45, .16),
                  inset -8px -8px 18px rgba(255,255,255,.92);

  --nm-ring: 0 0 0 3px rgba(101,179,91,.55);

  background: var(--nm-bg);
  color: var(--nm-ink);

  border: 1px solid rgba(10,40,60,.08);
  border-radius: 18px;
  box-shadow: var(--nm-shadow-out);
}

/* Title „chip“ */
.tts-title{
  border-right: 1px solid rgba(10,40,60,.08);
  padding-right: 10px;
  margin-right: 4px;
}

/* ===== Toolbar Grundlook (Neumorph, aber nicht schwebend) ===== */
.tts-wrap{
  --nm-bg: #eef2f7;
  --nm-ink: rgba(9,18,25,.86);

  /* „flacher“ Neumorphismus: kaum Außen-Schatten, mehr Kontur */
  --nm-border: rgba(10,40,60,.10);

  --nm-in: inset 7px 7px 14px rgba(14,28,45,.16),
           inset -7px -7px 14px rgba(255,255,255,.92);

  /* Hover-Fokus Glow */
  --nm-glow: 0 0 0 3px rgba(101,179,91,.28);

  background: var(--nm-bg);
  color: var(--nm-ink);
  border: 1px solid var(--nm-border);
  border-radius: 18px;
  /* keine „floating card“ Optik */
  box-shadow: none;
}

/* ===== Buttons: default = „flat“, active = „pressed“ ===== */
.tts-btn{
  background: var(--nm-bg);
  border: 2px solid rgba(10,40,60,.10);
  border-radius: 14px;

  /* default: flach */
  box-shadow: none;

  /* Smooth press/release */
  transition:
    box-shadow 180ms cubic-bezier(.2,.8,.2,1),
    border-color 180ms ease,
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1);

  transform: translateY(0);
}

/* Hover: NICHT anheben; stattdessen „soft ring/glow“ */
.tts-btn:hover{
  border-color: rgba(101,179,91,.35);
  box-shadow: var(--nm-glow);
}

/* Keyboard-Fokus: stärkerer Ring */
.tts-btn:focus-visible{
  outline: none;
  border-color: rgba(101,179,91,.55);
  box-shadow:
    0 0 0 3px rgba(101,179,91,.55),
    0 10px 24px rgba(4,20,30,.10);
}

/* Active gedrückt (Mouse down) */
.tts-btn:active{
  box-shadow: var(--nm-in);
  transform: translateY(0); /* bleibt flach */
}

/* Programmatic active (Play läuft / Pause aktiv / Tapmode) */
.tts-btn.is-active,
.tts-btn[aria-pressed="true"]{
  box-shadow: var(--nm-in);
  border-color: rgba(10,40,60,.12);
}

/* Farb-Akzente nur über Icon-Farbe */
.tts-btn--play{ color: rgb(18, 122, 46); }
.tts-btn--stop{ color: rgb(180, 18, 18); }
.tts-btn--ghost{ color: rgba(9,18,25,.78); }

/* ===== Slider: „inset“ aber ruhig ===== */
.tts-slider{
  background: var(--nm-bg);
}

.tts-slider input{ accent-color: rgb(18, 122, 46); }

/* ===== Tap-Mode Absatz-Hover: wieder „flach“ (wie vorher, ohne Neumorph) ===== */
section.textbox.tts-tapmode p,
section.textbox.tts-tapmode li{
  cursor: pointer;
  border-radius: 10px;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

section.textbox.tts-tapmode p:hover,
section.textbox.tts-tapmode li:hover{
  background: rgba(101,179,91,.12);
  box-shadow: 0 0 0 2px rgba(101,179,91,.20) inset;
}


/* ===== Button Press-Effekt mit „inset“ Schatten in animiert ===== */
.tts-btn{ position: relative; overflow: hidden; }

.tts-btn::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: var(--nm-in);
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events:none;
}

.tts-btn:active::after,
.tts-btn.is-active::after,
.tts-btn[aria-pressed="true"]::after{
  opacity: 1;
}

/* damit bisheriges box-shadow nicht „doppelt“ ist */
.tts-btn:active,
.tts-btn.is-active,
.tts-btn[aria-pressed="true"]{
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce){
  .tts-btn::after{ transition: none; }
}