/* ====== Buch-Widget • optimierte finale Version ====== */

/* Host: feste Gesamtbreite, Abstand vom Header */
:host{
  display:block !important;
  width:480px !important;
  margin: 32px auto 56px !important;
  color:#101318;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Card: runde Ecken + schöner Schatten */
.bw-wrap{
  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  border-radius:24px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.14) !important;
  padding: 20px !important;

  display:grid !important;
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto auto 1fr auto !important; /* header|hero|input|body|foot */
  gap:16px !important;
}

/* Titel zentriert */
.bw-header{ text-align:center !important; }
.bw-title{
  margin:0 !important;
  font-weight:800 !important;
  font-size: 1.8rem !important;
  letter-spacing:.2px !important;
}

/* Cover – kleiner, mit abgerundeten Ecken */
.bw-hero{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: 320px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.bw-cover{
  height:100% !important;
  width:auto !important;
  object-fit:contain !important;
  display:block !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
}
/* NIE ausblenden, auch nach der Frage */
.bw-wrap.has-asked .bw-hero{ display:flex !important; }

/* Suchleiste – mehr Kontrast, abgerundet & ohne weiße Innenlinie */
.bw-input{
  display:grid !important;
  grid-template-columns: 1fr !important;
  align-items:center !important;

  padding: 8px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,#f8faff 0%, #f0f4ff 100%) !important;
  /* keine innere weiße Linie mehr */
  box-shadow: 0 8px 20px rgba(59,130,246,.08) !important;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}

/* Desktop: Mobile-Button grundsätzlich verstecken (verhindert „weiße Linie“) */
.bw-go{ 
  display:none !important; 
}

.bw-input:focus-within{
  border-color: rgba(59,130,246,.45) !important;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.12),
    0 14px 28px rgba(59,130,246,.10) !important;
  background: linear-gradient(180deg,#ffffff 0%, #f4f7ff 100%) !important;
}
.bw-input .bw-q{
  border:0 !important;
  background:transparent !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  outline:none !important;
  color:inherit !important;
  border-radius: 14px !important;

  /* Resets gegen Browser-Dekorationen/Artefakte */
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}

/* Button (alter Desktop-Button) bleibt ausgeblendet */
.bw-btn{ display:none !important; }

/* Antwortbereich + Fußnote */
.bw-body{ padding-right:2px !important; }
.bw-answer{
  font-size:1.05rem !important;
  line-height:1.62 !important;
  color:#1b1b1f !important;
}
.bw-sources{
  margin-top:10px !important;
  border-top:1px solid rgba(0,0,0,.07) !important;
  padding-top:12px !important;
  color:#5d6470 !important;
  font-size:.95rem !important;
}
.bw-foot{
  color:#667085 !important;
  font-size:.95rem !important;
}

/* Scrollbar */
.bw-body::-webkit-scrollbar{ width:8px; }
.bw-body::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.22); border-radius:4px; }
.bw-body::-webkit-scrollbar-thumb:hover{ background:rgba(0,0,0,.30); }

/* Feintuning Formatierung innerhalb der Antwort */
.bw-answer p { margin: 0 0 10px 0; }
.bw-answer h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.bw-answer strong { font-weight: 700; }

/* Mobile: Go-Taste anzeigen + hübsches Lupen-Icon, Enter deaktiviert */
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .bw-input { position: relative !important; }

  /* Platz rechts im Eingabefeld für die Taste schaffen */
  .bw-input .bw-q{
    padding-right: 52px !important;
  }

  /* Mobil: Button sichtbar + positioniert */
  .bw-go{
    display: block !important;           /* nur hier sichtbar */
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: radial-gradient(circle at 60% 40%, #6ea3ff, #3b82f6) !important;
    box-shadow: 0 6px 14px rgba(37,99,235,.22) !important;
    cursor: pointer !important;

    z-index: 2 !important;            /* über dem Input */
  }

  /* Schöne Lupe: Kreis + separater Griff */
  .bw-go::before{
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #fff !important;     /* Glas/Kreis */
    border-radius: 50% !important;
    transform: translate(-55%, -58%) !important;
  }
  .bw-go::after{
    content: '' !important;
    position: absolute !important;
    left: 60% !important;
    top: 62% !important;
    width: 10px !important;
    height: 2px !important;
    background: #fff !important;           /* Griff */
    transform: rotate(45deg) translate(-10%, -10%) !important;
    transform-origin: left center !important;
    border-radius: 2px !important;
  }
}

/* Link auf das Buch im Footer dezent stylen */
.bw-foot .bw-book-link{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.bw-foot .bw-book-link:hover{
  color: #0a66ff;
}