/* ==========================================================================
   Soyka Bestellportal – Widget-Styles
   Alle Selektoren unter .soyka-widget für konfliktfreies Embedding.
   ========================================================================== */

.soyka-widget *,
.soyka-widget *::before,
.soyka-widget *::after {
  box-sizing: border-box;
}


/* 1.Variable */
.soyka-widget {
    --primärgrün: #1f7405;
    --akzentgelb: #ffc300;
    --hellgelb: #FFE493;
    --primärrot: #A52418;
    --hintergrundgrün: #4A5A4C;
    --hintergrundgrau: #F6F6F2;
    --border-main: 2px solid var(--hintergrundgrün);
    --radius-main: 5px;
    --radius-pille: 25px;
    --bg-card: white;
    --text-main: #333;
    --text-secondary: #555;
    --table-border: #ddd;
    --input-bg: white;
    --input-border: #ddd;
    /* Zusatzfarben (für den Nachtmodus als Variablen) */
    --hover-bg: #e8e8e4;
    --gedaempft: #aaa;
    --zeile-ungerade: #fffdf0;
    --zeile-gerade: #ffffff;
    --tag-bg: #eaf4e8;
    --tag-border: #c5dfc0;
    --slider-bg: #ccc;
    --cover-leer-bg: #f6f6f2;
    --cover-leer-rand: #e4e4dc;
    --edit-hover: rgba(0, 0, 0, 0.05);
    color-scheme: light;
  }

  /* NACHTMODUS – folgt automatisch der System-/Browsereinstellung */
  @media (prefers-color-scheme: dark) {
    .soyka-widget {
      --primärgrün: #3fb31a;
      --primärrot: #e8675b;
      --akzentgelb: #ffc300;
      --hintergrundgrau: #1c1c1a;
      --hintergrundgrün: #c3d0bb;
      --bg-card: #262624;
      --text-main: #e4e4e0;
      --text-secondary: #b0b0aa;
      --table-border: #444440;
      --input-bg: #30302d;
      --input-border: #55554f;
      --hellgelb: #4d4214;
      --border-main: 2px solid var(--hintergrundgrün);
      --hover-bg: #34342f;
      --gedaempft: #8a8a84;
      --zeile-ungerade: #2c2a22;
      --zeile-gerade: #262624;
      --tag-bg: #25331f;
      --tag-border: #3e5535;
      --slider-bg: #5a5a55;
      --cover-leer-bg: #30302d;
      --cover-leer-rand: #44443f;
      --edit-hover: rgba(255, 255, 255, 0.08);
      color-scheme: dark;
    }
  }
/* 2.Basis */   
  .soyka-widget {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 15px;
    background-color: var(--hintergrundgrau);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--primärgrün);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
    transition: background-color 0.3s, color 0.3s;
  }
  .soyka-widget .header-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-top: 20px;
      margin-bottom: 10px;
  }
  .soyka-widget .logo {
      height: 53px;
      margin-right: 5px;
      margin-bottom: 18px;
  }
  .soyka-widget .title-text {
      font-size: 2.8em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin: 0;
      line-height: 1.1;
  }
  .soyka-widget .title-block {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
    .soyka-widget .subtitle-text {
      font-size: 1.1em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin: 0;
  }
/* Info-Dropdown */
.soyka-widget .info-toggle-arrow {
  font-size: 1em;
  color: var(--hintergrundgrün);
  display: inline;
  vertical-align: baseline;
  transition: color 0.3s ease;
}
.soyka-widget .title-block:hover .info-toggle-arrow {
  color: var(--primärgrün);
}
.soyka-widget .info-morph-container {
  width: 90%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.soyka-widget .info-panel-flow {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--primärgrün);
  border-radius: var(--radius-pille);
  padding: 24px 24px 55px 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  position: relative;
  margin-bottom: 10px;
  transition: opacity 0.4s ease;
}
.soyka-widget .info-dropdown-content {
  color: var(--text-main);
  font-size: 0.9em;
  line-height: 1.5;
}
.soyka-widget .info-dropdown-content p {
  margin: 0 0 10px 0;
}
.soyka-widget .info-dropdown-content p:last-child {
  margin-bottom: 0;
}
.soyka-widget .info-panel-subtitle {
  font-size: 1.15em;
  font-weight: bold;
  color: var(--hintergrundgrün);
  text-align: center;
  margin-bottom: 12px !important;
}
.soyka-widget .info-panel-download {
  text-align: center;
  margin-top: 4px !important;
}
.soyka-widget .info-panel-download a {
  color: var(--primärgrün);
  text-decoration: underline;
  text-decoration-color: var(--akzentgelb);
  text-underline-offset: 3px;
  font-weight: bold;
  transition: color 0.3s;
}
.soyka-widget .info-panel-download a:hover {
  color: var(--primärrot) !important;
  text-decoration-color: var(--primärrot);
}
.soyka-widget .close-info-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärgrün);
  color: var(--hintergrundgrün);
  border-radius: var(--radius-pille);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 22px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.soyka-widget .close-info-btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--primärrot);
  color: var(--hintergrundgrün) !important;
}
  .soyka-widget .intro-text {
      font-size: 1.1em;
      color: var(--hintergrundgrün);
      text-align: center;
      margin-top: 10px;
      margin-bottom: 20px;
}

/* 3.Container-Layout */

    .soyka-widget .dual-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      width: 90%;
      max-width: 1200px;
      margin: 0 auto 20px auto;
      flex-wrap: wrap;
    }
      .soyka-widget .customer-info-container, 
      .soyka-widget .info-container {
        background-color: var(--bg-card);
        border: var(--border-main);
        border-radius: var(--radius-main);
        display: flex;
        flex-direction: column;
        width: 280px;
        padding: 12px 15px;
        margin: 15px auto;
        box-sizing: border-box;
       }
      .soyka-widget .customer-info-container {
        gap: 15px;
      }
      .soyka-widget .info-container {
        font-size: 0.8em;
      }
/* Zentrierter Upload/Download-Bereich */
.soyka-widget .upload-download-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 25px 0 0 0;
}
.soyka-widget .upload-download-centered #rechercheButton,
.soyka-widget .upload-download-centered .upload-trigger-button {
  min-width: 280px;
}
.soyka-widget #downloadWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  position: relative;
}
.soyka-widget #downloadWrapper #rechercheButton {
  margin: 0 auto;
}
.soyka-widget #downloadWrapper .clear-list-btn {
  position: absolute;
  right: 0;
}
.soyka-widget #uploadSection {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Kundenwunsch volle Breite */
.soyka-widget .wunsch-row {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto 0 auto;
}
.soyka-widget .wunsch-col-full { display: flex; flex-direction: column; }
.soyka-widget .wunsch-col-full label {
  font-weight: bold; font-size: 0.85em;
  color: var(--hintergrundgrün); display: block; margin-bottom: 5px;
}
.soyka-widget .wunsch-col-full textarea {
  width: 100%; box-sizing: border-box;
  border: var(--border-main); border-radius: var(--radius-main);
  background: var(--input-bg); padding: 10px; font-family: inherit;
  font-size: 0.85em; color: var(--text-main);
  resize: vertical; outline: none; transition: border-color 0.3s;
}
.soyka-widget .wunsch-col-full textarea:focus { border-color: var(--primärgrün); }
.soyka-widget .bk-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 40px 65px 40px;
  border: 1px solid var(--primärgrün);
  border-radius: var(--radius-pille);
  background: var(--bg-card);
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
  min-height: 220px;
}
.soyka-widget .bk-zone:hover, .soyka-widget .bk-zone.dragover {
  background-color: var(--hover-bg) !important;
}
.soyka-widget .close-upload-btn {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärgrün);
  color: var(--hintergrundgrün);
  width: auto;
  height: auto;
  border-radius: var(--radius-pille);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  line-height: 1;
  padding: 12px 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .close-upload-btn:hover {
  background-color: var(--hover-bg);
  border-color: var(--primärrot);
  color: var(--hintergrundgrün) !important;
  box-shadow: none;
}
/* Texte innerhalb der Zone beim Hover behalten ihre Farbe */
.soyka-widget .bk-zone:hover strong { color: var(--primärgrün) !important; }
.soyka-widget .bk-zone:hover small { color: var(--text-secondary) !important; }
.soyka-widget .bk-zone:hover .bk-icon { color: var(--text-main) !important; }
.soyka-widget .bk-zone .bk-icon { font-size: 2.2em; line-height: 1; }
.soyka-widget .bk-zone strong { color: var(--primärgrün); transition: color 0.3s; }
.soyka-widget .bk-zone small { color: var(--text-secondary); transition: color 0.3s; }
.soyka-widget .bk-zone input[type="file"] { display: none; }
.soyka-widget .bk-file-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; transition: margin-top 0.4s ease; }
.soyka-widget .bk-file-tag {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: 4px;
  padding: 3px 7px; font-size: 0.74em; color: var(--hintergrundgrün); word-break: break-all;
}
.soyka-widget .bk-file-tag .bk-rm {
  cursor: pointer; color: var(--primärrot); font-weight: bold;
  margin-left: 5px; flex-shrink: 0; background: none; border: none;
  font-size: 1em; padding: 0; border-radius: 0; line-height: 1;
}
.soyka-widget .bk-file-tag .bk-rm:hover { background: none; color: darkred; }
.soyka-widget .bk-send-status {
  font-size: 0.78em; font-weight: bold; color: var(--primärgrün);
  text-align: center; margin-top: 4px; min-height: 1em;
}
@media (max-width: 768px) {
  .soyka-widget .upload-download-centered #rechercheButton,
  .soyka-widget .upload-download-centered .upload-trigger-button { min-width: auto; width: 100%; }
  .soyka-widget .bk-zone { width: 90vw; max-width: 90vw; }
}
        .soyka-widget .info-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          gap: 1px;
        }

        .soyka-widget .info-row span:first-child {
          font-weight: bold;
          color: var(--hintergrundgrün);
          flex-shrink: 0;
        }
        .soyka-widget .info-row span:first-child a {
          font-weight: bold !important;
        }
        .soyka-widget #orderTable th a {
          font-weight: bold !important;
        }

        .soyka-widget .info-row span:last-child {
          color: var(--text-secondary);
          text-align: right;
          flex-grow: 1;
}


/* 4.Formulare & Eingabe*/

.soyka-widget .main-content-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.soyka-widget .form-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  margin-top: 30px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  }
  .soyka-widget .form-container input, 
  .soyka-widget .input-group input {
    font-family: inherit;   /* 01.10.2026: Felder in der Formular-Schrift (vorher Browser-Standard Arial) */
    border: 1px solid var(--input-border);
    outline: none;
    transition: border-color 0.3s ease-in-out;
    min-width: 0;
    background-color: var(--input-bg);
    color: var(--text-main);
  }

  .soyka-widget .form-container input:focus,
  .soyka-widget .input-group input:focus {
    border-color: var(--primärgrün);
  }
  .soyka-widget .form-container input {
    padding: 12px;
    font-size: 0.9em;
    border-radius: 8px;
  }
  .soyka-widget .input-group {
    display: flex;
    flex-direction: column;
  }
  .soyka-widget .input-group label {
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 5px;
    color: var(--hintergrundgrün);
  }
  .soyka-widget .input-group input {
    padding: 10px;
    font-size: 0.8em;       /* Kundendaten-Felder 12 px wie im alten Formular (Titelzeile 13,5 px) */
    border-radius: 8px;
  }
  .soyka-widget .form-container input#anzahl { flex: 0.6; }
  .soyka-widget .form-container input#isbn { flex: 1.2; }
  /* Titelfeld: Hülle mit wechselndem Hinweis („Autor*in / Titel“ ↔ „Suchen …“) und Lupe */
  .soyka-widget .form-container .titel-feld { flex: 2.5; position: relative; display: flex; min-width: 0; }
  .soyka-widget .form-container .titel-feld input#titel { flex: 1; width: 100%; padding-right: 38px; }
  .soyka-widget .form-container input#preis { flex: 0.7; }
  .soyka-widget .form-container input#bestellzeichen { flex: 0.8; }
  .soyka-widget .form-container #addButton { flex-shrink: 0; white-space: nowrap; }
.soyka-widget .visually-hidden {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* 5.Tabelle */  
.soyka-widget table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      margin: 15px 0;
      border-radius: 8px;
      overflow: visible;
      background-color: var(--bg-card);
      border: 1px solid var(--table-border);
    }
    .soyka-widget th, .soyka-widget td {
      padding: 12px;
      text-align: center;
      font-size: 0.8em;
      border-bottom: 1px solid var(--table-border);
      border-right: 1px solid var(--table-border);
      white-space: normal; 
      word-wrap: break-word;
      color: var(--text-main);
    }
    .soyka-widget th {
      background-color: var(--hellgelb);
      color: var(--hintergrundgrün);
      font-weight: bold;
      }
    .soyka-widget th:last-child, .soyka-widget td:last-child { border-right: none; }
    .soyka-widget tbody tr:last-child td { border-bottom: none; }
.soyka-widget #orderTable tbody.has-multiple tr:nth-child(odd) td {
  background-color: var(--zeile-ungerade);
}
.soyka-widget #orderTable tbody.has-multiple tr:nth-child(even) td {
  background-color: var(--zeile-gerade);
}
    .soyka-widget th:nth-child(1), .soyka-widget td:nth-child(1) { width: 3%; }   /* Pos */
    .soyka-widget td:nth-child(1) { color: var(--gedaempft); font-size: 0.75em; }
    .soyka-widget th:nth-child(2), .soyka-widget td:nth-child(2) { width: 5%; }  /* Menge */
    .soyka-widget th:nth-child(3), .soyka-widget td:nth-child(3) { width: 14%; } /* ISBN */
    .soyka-widget th:nth-child(4), .soyka-widget td:nth-child(4) { width: 28%; text-align: left; padding-left: 12px; } /* Titel */
    .soyka-widget th:nth-child(5), .soyka-widget td:nth-child(5) { width: 7%; text-align: right; padding-right: 12px; white-space: nowrap; } /* Preis */
    .soyka-widget th:nth-child(6), .soyka-widget td:nth-child(6) { width: 10%; } /* Bestellz */
    .soyka-widget th:nth-child(7), .soyka-widget td:nth-child(7) { width: 10%; text-align: right; padding-right: 24px; } /* Gesamt */
    .soyka-widget th:nth-child(8), .soyka-widget td:nth-child(8) { width: 3%; }  /* Buchschutz */
    .soyka-widget th:nth-child(9), .soyka-widget td:nth-child(9) { width: 10%; } /* Bearbeiten */


/* 6.Buttons */

  .soyka-widget button {
    cursor: pointer;
    border-radius: var(--radius-pille);
    padding: 12px 28px;
    background-color: var(--hintergrundgrau);
    color: var(--hintergrundgrün);
    border: 1px solid var(--primärgrün);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
    text-shadow: none;
  }
  .soyka-widget button:hover {
    background-color: var(--hover-bg);
    color: var(--hintergrundgrün);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(0,0,0,0.04);
  }
  .soyka-widget .edit-btn {
    background: none;
    border: none;
    /* Feste Größe wie ursprünglich im Live-Shop (dort ist 1rem = 10px → 1.5rem = 15px).
       Mit rem war der Stift auf Seiten mit 16px-Grundschrift (Testseiten) größer. */
    font-size: 15px;
    padding: 5px;
    border-radius: 8px;
    color: var(--primärgrün);
    box-shadow: none;
  }
 .soyka-widget .edit-btn:hover {
    background-color: var(--edit-hover);
    box-shadow: none;
  }
  .soyka-widget .export-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0 30px 0;
    flex-wrap: wrap;
  }
  .soyka-widget .export-container button {
    border-color: var(--akzentgelb);
    box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
  }
  .soyka-widget .export-container button:hover {
  background-color: var(--hover-bg);
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04);
}
.soyka-widget .remove-btn {
  color: var(--primärrot);
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärrot);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .remove-btn svg {
  width: 10px;
  height: 10px;
  stroke: var(--primärrot);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke 0.2s;
  display: block;
}

.soyka-widget .remove-btn:hover {
  background-color: var(--hover-bg);
  color: var(--primärrot);
  box-shadow: 0 2px 6px rgba(165,36,24,0.18);
}
.soyka-widget .remove-btn:hover svg {
  stroke: var(--primärrot);
}
.soyka-widget #rechercheButton {
  border-color: var(--akzentgelb);
  border-width: 1px;
  width: auto;
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget #rechercheButton:hover {
  background-color: var(--hover-bg);
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04);
}
.soyka-widget .clear-list-btn {
  border-color: var(--primärrot);
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 6px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .clear-list-btn:hover {
  background-color: var(--hover-bg);
  color: var(--hintergrundgrün) !important;
  box-shadow: 0 2px 8px rgba(165,36,24,0.18);
}
.soyka-widget .clear-btn {
  background: var(--hintergrundgrau);
  border: 1px solid var(--gedaempft) !important;
  color: var(--gedaempft) !important;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.2s ease;
  cursor: default;
}
.soyka-widget .clear-btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--gedaempft);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
  transition: stroke 0.25s ease;
}
/* Aktiv-Zustand: wird rot wenn Felder Inhalt haben */
.soyka-widget .clear-btn.clear-btn--active {
  border-color: var(--primärrot) !important;
  color: var(--primärrot) !important;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .clear-btn.clear-btn--active svg {
  stroke: var(--primärrot);
}
.soyka-widget .clear-btn.clear-btn--active:hover {
  background-color: var(--hover-bg) !important;
  box-shadow: 0 2px 6px rgba(165,36,24,0.18);
}
.soyka-widget .clear-btn.clear-btn--active:hover svg {
  stroke: var(--primärrot);
}
/* Styling für den neuen Trigger-Button */
.soyka-widget .upload-trigger-button {
  cursor: pointer;
  border-radius: 25px;
  padding: 12px 28px;
  background-color: var(--hintergrundgrau);
  color: var(--hintergrundgrün);
  border: 1px solid var(--primärgrün);
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .upload-trigger-button:hover {
  background-color: var(--hover-bg);
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(0,0,0,0.04);
}

/* Container für die Animation */
.soyka-widget .morph-container {
  position: relative;
  min-height: 45px;
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
  z-index: 100;
}

/* Expandiert: Platz für die schwebende Zone reservieren */
.soyka-widget .morph-container.expanded {
  min-height: 45px;
}

/* Dateiliste direkt unter der Zone positionieren */
.soyka-widget .morph-container.expanded ~ .bk-file-list {
  margin-top: 220px;
}

/* Die bk-zone schwebt über dem Inhalt darunter */
.soyka-widget .bk-zone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: top center;
  width: 50vw;
  max-width: 600px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 100;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.soyka-widget .bk-zone[style*="opacity: 1"],
.soyka-widget .bk-zone[style*="opacity:1"] {
  transform: translateX(-50%) scale(1);
}
/* 7.Responsive Design */
@media (max-width: 768px) {
  .soyka-widget .form-container,
  .soyka-widget .dual-container,
  .soyka-widget .export-container {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    max-width: 100%;
    gap: 15px;
  }
    .soyka-widget .customer-info-container,
    .soyka-widget .info-container {
        width: 80%;
      }

    .soyka-widget .form-container input {
        width: 100% !important;
        flex: none !important;
        }
    .soyka-widget .export-container button {
        width: 100% !important;
        flex: none;
        }
    .soyka-widget .agb-checkbox {
        flex-wrap: wrap;
        padding: 10px 15px;
        text-align: center;
        justify-content: center;
      }
    .soyka-widget .info-panel-flow {
        width: 95%;
      }
    .soyka-widget #downloadWrapper {
        flex-direction: column;
        gap: 8px;
      }
    .soyka-widget #downloadWrapper .clear-list-btn {
        position: static;
      }
}

/* 8. Links */
.soyka-widget a.buchschutz-link, 
.soyka-widget a.buchschutz-link:visited,
.soyka-widget a.rabatt-link, 
.soyka-widget a.rabatt-link:visited,
.soyka-widget .agb-checkbox a, 
.soyka-widget .agb-checkbox a:visited,
.soyka-widget #aufforstungtext {
  color: var(--hintergrundgrün);
  text-decoration: underline;
  text-decoration-color: var(--akzentgelb);
  text-underline-offset: 3px;
  font-weight: bold !important;
  transition: color 0.3s;
  }
  .soyka-widget a.aufforstung-link, 
  .soyka-widget a.aufforstung-link:visited,
  .soyka-widget #aufforstung {
    color: var(--primärgrün);
    font-weight: bold !important;
    text-decoration: none;
  }
.soyka-widget a:hover {
  color: var(--primärrot) !important;
  text-decoration-color: var(--primärrot);
}

/* 8. Sonderelemente */
.soyka-widget .switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}
.soyka-widget .switch input { opacity: 0; width: 0; height: 0; }
.soyka-widget .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--slider-bg);
  transition: .4s;
  border-radius: 20px;
}
.soyka-widget .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.soyka-widget input:checked + .slider { background-color: var(--primärgrün); }
.soyka-widget input:checked + .slider:before { transform: translateX(14px); }
/* Buchschutz nicht möglich (Buch über 43 cm) */
.soyka-widget .switch.bs-zu-gross { opacity: 0.4; cursor: not-allowed; }
.soyka-widget .switch.bs-zu-gross .slider { cursor: not-allowed; }
/* Buchschutz-Aufpreis: in der Tabelle unter dem Preis, in der Kachelansicht dahinter */
.soyka-widget .bs-aufpreis { display: block; white-space: nowrap; }
.soyka-widget .error, .soyka-widget #fallbackHinweis {
  color: var(--primärrot);
  font-size: 0.85em;
  margin-top: 5px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* Meldungen direkt unter dem Titelfeld (Position/Breite setzt isbnErrorAusrichten()
   in formular.js), linksbündig auf Höhe des Feldtexts */
.soyka-widget #isbnError {
  text-align: left;
  padding: 0 12px;
  box-sizing: border-box;
  max-width: 100%;
}
/* Schmale Ansicht: steht in der Feldspalte direkt unter dem Titelfeld */
.soyka-widget .form-container #isbnError { width: 100%; margin-top: -10px; }
.soyka-widget .form-container #isbnError:empty { display: none; }
.soyka-widget .total-container {
  text-align: center;
  margin: 20px 0 30px 0;
  font-size: 1.3em;
  color: var(--hintergrundgrün);
  display: none;
}
.soyka-widget #finalPrice {
  font-weight: bold;
  font-size: 1.2em;
  text-decoration: underline double;
  color: var(--text-main);
}
.soyka-widget .order-type-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.soyka-widget .regular-label, .soyka-widget .express-label {
  color: var(--hintergrundgrün);
  font-size: 0.8em;
  transition: color 0.3s;
}
.soyka-widget input:checked ~ .express-label {
  color: var(--akzentgelb);
  font-weight: bold;
}
.soyka-widget .agb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 20px 0;
}
.soyka-widget .agb-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  gap: 8px;
  margin-top: 20px;
}
.soyka-widget .agb-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
  accent-color: var(--primärgrün);
}
.soyka-widget .agb-checkbox label {
  line-height: 1.4;
  margin: 0;
}
.soyka-widget #agbCheckbox:invalid {
  outline: 2px solid var(--primärrot);
  border-radius: 2px;
}
/* 9.Modaldesign */
.soyka-widget #customModal {
  display: none; 
  position: fixed; 
  z-index: 10000; /* Höher als alles andere */
  left: 0; 
  top: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.6); 
  backdrop-filter: blur(3px); /* Leichter Unschärfe-Effekt im Hintergrund */
  align-items: center; 
  justify-content: center;
}

.soyka-widget .modal-content {
  background-color: var(--hintergrundgrau);
  padding: 30px;
  border-radius: var(--radius-main);
  border: 8px solid var(--primärrot);
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: soyka-modalAppear 0.3s ease-out;
}

@keyframes soyka-modalAppear {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.soyka-widget .modal-content h3 {
  color: var(--hintergrundgrün);
  margin-top: 0;
  font-size: 1.5rem;
}

.soyka-widget .modal-content p {
  color: var(--text-main);
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 20px 0;
}

.soyka-widget .modal-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.soyka-widget .modal-buttons button {
  padding: 12px 28px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85em;
  border-radius: var(--radius-pille);
  transition: transform 0.1s, box-shadow 0.3s, background-color 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), inset 0 -1px 2px rgba(0,0,0,0.04);
}

.soyka-widget .modal-buttons button:active {
  transform: scale(0.95);
}

.soyka-widget #modalConfirmBtn {
  background-color: var(--hintergrundgrau);
  color: var(--text-main);
  border: 1px solid var(--akzentgelb);
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget #modalConfirmBtn:hover {
  background-color: var(--hover-bg);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25);
}

.soyka-widget #modalCancelBtn {
  background-color: var(--hintergrundgrau);
  color: var(--primärrot);
  border: 1px solid var(--primärrot);
  box-shadow: 0 2px 6px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03);
}

.soyka-widget #modalCancelBtn:hover {
  background-color: var(--hover-bg);
  box-shadow: 0 2px 8px rgba(165,36,24,0.18);
}
/* Bestellzeichen: Farbe kommt pro Zeile aus formular.js (--bz-farbe) */
.soyka-widget #orderTable td.bz-cell {
  color: var(--bz-farbe, inherit);
  font-weight: bold;
}

/* Nachtmodus: Einzelfälle ohne Variable */
@media (prefers-color-scheme: dark) {
  .soyka-widget .bk-file-tag .bk-rm:hover { color: #ff8a7e; }
  .soyka-widget .cover-preview { background: #3a3a36; }
  /* Dunkle Palettenfarben (z. B. Dunkelgrün, Weinrot) auf dunklem Grund aufhellen */
  .soyka-widget #orderTable td.bz-cell { color: color-mix(in srgb, var(--bz-farbe) 65%, #ffffff); }
}

/* 11. Sticky Table Header */
.soyka-widget #orderTable thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--hellgelb);
}

/* 12. Lade-Overlay (Eule pulsiert) */
.soyka-widget .loading-overlay {
  display: none;
  position: fixed;
  z-index: 10001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
}
.soyka-widget .loading-overlay.active {
  display: flex;
}
.soyka-widget .loading-overlay img {
  width: 70px;
  height: 70px;
  animation: soyka-pulse 1.3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.3));
}
.soyka-widget .loading-overlay .loading-text {
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}
@keyframes soyka-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.15); opacity: 0.7; }
}


/* ----------------------------------------------------------------------------
   Meldenummer-Hinweis unter dem Titeltext (z.B. "Erscheint neu Q4 2026")
   ----------------------------------------------------------------------------*/
.soyka-widget #orderTable .meldung-hinweis {
  display: block;
  font-size: 0.88em;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.soyka-widget #orderTable .meldung-hinweis.meldung-info {
  color: var(--primärrot); /* Rot für Info-Codes 11/12/21/80 */
}
.soyka-widget #orderTable .meldung-hinweis.meldung-error {
  color: var(--primärrot); /* Rot für Fehler-Codes 07/43/99 */
  font-weight: 700;
}

/* ==========================================================================
   Portal ohne Buchschutz (config: buchschutz.aktiv = false)
   Spalte bleibt im DOM (Spaltenindizes im JS), wird nur ausgeblendet.
   ========================================================================== */
.soyka-widget.ohne-buchschutz #orderTable th:nth-child(8),
.soyka-widget.ohne-buchschutz #orderTable td:nth-child(8) {
  display: none;
}

/* ==========================================================================
   Portal ohne Bestellzeichen-Spalte (config: bestellzeichen = 'auftrag' | null)
   Spalte bleibt im DOM (Spaltenindizes im JS), wird nur ausgeblendet.
   ========================================================================== */
.soyka-widget.ohne-bestellzeichen #orderTable th:nth-child(6),
.soyka-widget.ohne-bestellzeichen #orderTable td:nth-child(6) {
  display: none;
}

/* ==========================================================================
   13. Cover: Thumbnail links neben dem Titel + Hover-Vorschau
   ========================================================================== */
.soyka-widget #orderTable td.titel-cell {
  padding-top: 6px;
  padding-bottom: 6px;
}
.soyka-widget .titel-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.soyka-widget .titel-body {
  flex: 1 1 auto;
  min-width: 0;          /* lange Titel dürfen umbrechen */
}
.soyka-widget .cover-thumb {
  flex: 0 0 34px;
  width: 34px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  outline: none;
}
.soyka-widget .cover-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 34px;       /* ganzes Cover sichtbar – nichts wird beschnitten */
  max-height: 48px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.soyka-widget .cover-thumb:hover img,
.soyka-widget .cover-thumb:focus-visible img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.soyka-widget .cover-thumb:focus-visible {
  outline: 2px solid var(--akzentgelb);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Kein Cover vorhanden: dezenter Platzhalter, damit die Titel bündig bleiben */
.soyka-widget .cover-thumb.cover-leer {
  cursor: default;
  width: 34px;
  height: 48px;
  border: 1px solid var(--cover-leer-rand);
  border-radius: 2px;
  background:
    linear-gradient(90deg, var(--cover-leer-rand) 0 4px, transparent 4px) no-repeat,
    var(--cover-leer-bg);
}

/* Große Vorschau: schwebt über der Seite, blendet sanft ein */
.soyka-widget .cover-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;              /* unter Modal (10000) und Lade-Overlay */
  pointer-events: none;
  opacity: 0;
  /* Startzustand = Größe und Lage des Thumbnails (setzt formular.js), von dort
     wächst die Vorschau in 0,5 s auf und schrumpft beim Verlassen dorthin zurück */
  transform: translate(var(--von-x, 0px), var(--von-y, 0px)) scale(var(--von-s, 0.2));
  transform-origin: 0 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  background: #fff;
  padding: 4px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 2px 6px rgba(0,0,0,0.12);
}
.soyka-widget .cover-preview.sichtbar {
  opacity: 1;
  transform: none;
}
.soyka-widget .cover-preview.ohne-animation { transition: none; }
.soyka-widget .cover-preview img {
  display: block;
  height: 255px;
  width: auto;
  object-fit: contain;        /* nie beschneiden */
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .cover-preview { transition: none; transform: none; }
}

/* ==========================================================================
   14. Mobil: Bestelltabelle als Karten
   Greift bis 1100 px (Tablet/kleines Fenster). Vorher lief die 9-spaltige Tabelle rechts aus dem Widget und wurde
   (overflow: hidden) abgeschnitten.
   ========================================================================== */
@media (max-width: 1100px) {
  .soyka-widget .main-content-wrapper { width: 94%; }

  .soyka-widget #orderTable {
    border: none;
    background: transparent;
    border-radius: 0;
    margin: 12px 0;
  }
  .soyka-widget #orderTable,
  .soyka-widget #orderTable tbody { display: block; width: 100%; }
  .soyka-widget #orderTable thead { display: none; }

  .soyka-widget #orderTable tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "titel  titel  titel"
      "pos    isbn   isbn"
      "menge  preis  gesamt"
      "bz     bs     aktion";
    column-gap: 10px;
    row-gap: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: var(--bg-card);
    border: 1px solid var(--table-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .soyka-widget #orderTable tbody.has-multiple tr:nth-child(odd) { background: var(--zeile-ungerade); }

  .soyka-widget #orderTable tbody tr td {
    display: block;
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 0.85em;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Spalten → Bereiche */
  .soyka-widget #orderTable tbody td:nth-child(1) { grid-area: pos; }
  .soyka-widget #orderTable tbody td:nth-child(2) { grid-area: menge; }
  .soyka-widget #orderTable tbody td:nth-child(3) { grid-area: isbn; color: var(--text-secondary); }
  .soyka-widget #orderTable tbody td:nth-child(4) { grid-area: titel; font-size: 0.95em; }
  .soyka-widget #orderTable tbody td:nth-child(5) { grid-area: preis; }
  .soyka-widget #orderTable .bs-aufpreis { display: inline; }
  .soyka-widget #orderTable tbody td:nth-child(6) { grid-area: bz; }
  .soyka-widget #orderTable tbody td:nth-child(7) { grid-area: gesamt; font-weight: 700; }
  .soyka-widget #orderTable tbody td:nth-child(8) { grid-area: bs; }
  .soyka-widget #orderTable tbody td:nth-child(9) {
    grid-area: aktion;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 6px;
  }

  /* Kleine Beschriftungen über den Werten */
  .soyka-widget #orderTable tbody td:nth-child(2)::before,
  .soyka-widget #orderTable tbody td:nth-child(5)::before,
  .soyka-widget #orderTable tbody td:nth-child(6)::before,
  .soyka-widget #orderTable tbody td:nth-child(7)::before,
  .soyka-widget #orderTable tbody td:nth-child(8)::before {
    display: block;
    font-size: 0.78em;
    font-weight: 700;
    color: var(--hintergrundgrün);
    margin-bottom: 2px;
  }
  .soyka-widget #orderTable tbody td:nth-child(2)::before { content: "Menge"; }
  .soyka-widget #orderTable tbody td:nth-child(5)::before { content: "Preis (€)"; }
  .soyka-widget #orderTable tbody td:nth-child(6)::before { content: "Bestellz."; }
  .soyka-widget #orderTable tbody td:nth-child(7)::before { content: "Gesamt (€)"; }
  .soyka-widget #orderTable tbody td:nth-child(8)::before { content: var(--bs-label, "Buchschutz"); }
  .soyka-widget #orderTable tbody td:nth-child(1)::before { content: "Pos. "; }

  .soyka-widget #orderTable tbody td:nth-child(1) { color: var(--gedaempft); font-size: 0.75em; align-self: center; }
  .soyka-widget #orderTable tbody td:nth-child(3) { align-self: center; }

  /* Ausgeblendete Spalten auch in der Kartenansicht ausblenden */
  .soyka-widget.ohne-buchschutz #orderTable tbody td:nth-child(8),
  .soyka-widget.ohne-bestellzeichen #orderTable tbody td:nth-child(6) { display: none; }

  .soyka-widget #orderTable .edit-btn { font-size: 12.5px; padding: 2px 6px; }
  .soyka-widget #orderTable .remove-btn { width: 28px; height: 28px; }

  /* Hover-Vorschau auf Mobil: zentriert, etwas kleiner falls nötig */
}
@media (max-width: 1100px) {
  .soyka-widget.ohne-bestellzeichen #orderTable tbody tr {
    grid-template-areas:
      "titel  titel  titel"
      "pos    isbn   isbn"
      "menge  preis  gesamt"
      "bs     bs     aktion";
  }
}
/* Mobil: Kopfzeile darf nicht breiter als das Widget werden */
@media (max-width: 768px) {
  .soyka-widget .header-container { flex-wrap: wrap; padding: 0 12px; max-width: 100%; }
  .soyka-widget .logo { height: 40px; margin-bottom: 10px; }
  /* nie mitten im Wort trennen – nur zwischen den Wörtern („Das | Schulbuchbündel“) */
  .soyka-widget .title-text { font-size: clamp(1.5em, 8vw, 2.8em); overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .soyka-widget .subtitle-text { font-size: 0.95em; }
}

/* Formular nie breiter als das Widget (sonst wird es bei mittleren
   Fensterbreiten rechts abgeschnitten – .soyka-widget hat overflow: hidden) */
.soyka-widget > form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* ==========================================================================
   15. Auswahlseite (widget/auswahl.js) – Kästen „Schulen“ / „Schüler:innen“
   Optik wie die Upload-Zone (.bk-zone), Hintergrund wie das Formular
   ========================================================================== */
.soyka-widget.soyka-auswahl {
  padding-bottom: 80px;    /* Luft unter den Buttons */
}
.soyka-auswahl .auswahl-kreise {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(30px, 6vw, 80px);
  width: 90%;
  max-width: 900px;
  padding: 25px 0 10px 0;
  flex-wrap: wrap;
}
.soyka-widget.soyka-auswahl .auswahl-kreis,
.soyka-auswahl .auswahl-morph {
  /* Optik wie der HINZUFÜGEN-Button (.soyka-widget button), nur größer */
  width: 330px;
  min-height: 0;
  border-radius: var(--radius-pille);
  background: var(--hintergrundgrau);
  border: 1px solid var(--primärgrün);
  color: var(--hintergrundgrün);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 30px;
  text-align: center;
  /* keine eigene Schriftart: gleiche Button-Schrift wie HINZUFÜGEN */
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget.soyka-auswahl .auswahl-kreis {
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
}
.soyka-widget.soyka-auswahl .auswahl-kreis:hover,
.soyka-widget.soyka-auswahl .auswahl-kreis:focus-visible {
  background-color: var(--hover-bg);
  color: var(--hintergrundgrün);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), inset 0 -1px 2px rgba(0,0,0,0.04);
  outline: none;
}
.soyka-widget.soyka-auswahl .auswahl-kreis:focus-visible {
  outline: 2px solid var(--primärgrün);
  outline-offset: 3px;
}
.soyka-auswahl .kreis-titel {
  /* Schriftgröße wie bisher, Schrift wie beim HINZUFÜGEN-Button */
  font-size: 2em;
  font-weight: 700;
  /* Abstand im gleichen Verhältnis wie beim HINZUFÜGEN-Button (1,5 px bei 12,75 px) */
  letter-spacing: 0.12em;
  color: var(--hintergrundgrün);
  line-height: 1.1;
}
.soyka-auswahl .auswahl-frage {
  margin: 18px 0 0 0;
  font-size: 1.15em;
  color: var(--hintergrundgrün);
  text-align: center;
  transition: opacity 0.3s ease;
}
.soyka-auswahl.auswahl-aktiv .auswahl-frage { opacity: 0; }
.soyka-auswahl .auswahl-fehler {
  color: var(--primärrot);
  margin: 10px 0 0 0;
  text-align: center;
}

/* Nach dem Klick: anderer Kreis blendet aus, gewählter wächst (auswahl.js) */
.soyka-auswahl.auswahl-aktiv .auswahl-kreis { pointer-events: none; }
.soyka-auswahl.auswahl-aktiv .auswahl-kreis:not(.gewaehlt) {
  opacity: 0;
  transform: scale(0.85);
}
.soyka-auswahl .auswahl-morph {
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.soyka-auswahl .auswahl-morph > * {
  animation: soyka-auswahl-aus 0.35s ease forwards;
}
@keyframes soyka-auswahl-aus {
  to { opacity: 0; transform: scale(0.9); }
}

/* Formular nach der Auswahl weich einblenden (Kopf bleibt stehen) */
/* Nur die Formularteile – NICHT Cover-Vorschau, Pop-up und Lade-Eule (die hängen
   ebenfalls direkt am Widget; mit „both“ blieb ihre Deckkraft auf 1 stehen →
   Cover-Vorschau blieb nach der Auswahl sichtbar „hängen“). „backwards“: nach
   der Animation gelten wieder die normalen Regeln. */
.soyka-widget.auswahl-eingeblendet > :not(.header-container):not(.cover-preview):not(.loading-overlay):not(#customModal) {
  animation: soyka-auswahl-ein 0.45s ease backwards;
}
@keyframes soyka-auswahl-ein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .soyka-auswahl .auswahl-kreise { gap: 30px; }
  .soyka-widget.soyka-auswahl { padding-bottom: 60px; }
  .soyka-widget.soyka-auswahl .auswahl-kreis,
  .soyka-auswahl .auswahl-morph { width: 100%; min-height: 0; padding: 20px 24px; }
  .soyka-auswahl .kreis-titel { font-size: 1.7em; }
}
@media (prefers-reduced-motion: reduce) {
  .soyka-auswahl .auswahl-kreis,
  .soyka-widget.auswahl-eingeblendet > * { transition: none; animation: none; }
}

/* ==========================================================================
   14. Live-Suche: Vorschläge unter ISBN- und Titelfeld
   Sichtbar sind 3–4 Einträge, der Rest ist scrollbar.
   ========================================================================== */
.soyka-widget .live-liste {
  position: absolute;
  z-index: 200;               /* über „Titelliste hochladen“ (z-index 100) */
  max-height: 15em;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
  font-size: 0.86em;
  text-align: left;
  box-sizing: border-box;
}
.soyka-widget .live-liste[hidden] { display: none; }
.soyka-widget .live-kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 10px;
  background: var(--hintergrundgrau);
  color: var(--hintergrundgrün);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--table-border);
}
.soyka-widget .live-eintrag {
  padding: 7px 10px;
  border-bottom: 1px solid var(--table-border);
  cursor: pointer;
  line-height: 1.3;
}
.soyka-widget .live-eintrag:last-child { border-bottom: 0; }
.soyka-widget .live-eintrag:hover,
.soyka-widget .live-eintrag.aktiv {
  background: var(--hover-bg);
}
.soyka-widget .live-eintrag.aktiv {
  box-shadow: inset 3px 0 0 var(--primärgrün);
}
.soyka-widget .live-titel {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soyka-widget .live-titel2 {
  color: var(--text-main);
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soyka-widget .live-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  color: var(--gedaempft);
  font-size: 0.85em;
}
.soyka-widget .live-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.soyka-widget .live-preis {
  color: var(--text-main);
  white-space: nowrap;
}
.soyka-widget .live-preis.live-preis-dnb { color: var(--gedaempft); }
.soyka-widget .live-meldung {
  color: var(--primärrot);
  font-size: 0.82em;
  font-weight: 600;
}
.soyka-widget .live-laedt {
  padding: 7px 10px;
  color: var(--gedaempft);
  font-style: italic;
}

/* Soyka-Titel: zweite Zeile (Titel2) kleiner unter dem Haupttitel */
.soyka-widget .titel-zeile2 {
  display: block;
  font-size: 0.88em;
  color: var(--text-main);
  margin-top: 1px;
}

/* ==========================================================================
   Titelfeld: wechselnder Hinweis + Lupe (28.09.2026)
   Je Text: 0,5 s einblenden, 3 s stehen, 0,5 s ausblenden → dann der andere
   (Zyklus 8 s). Nur sichtbar, solange das Feld leer und nicht angeklickt ist.
   Solange das ISBN-Feld aktiv ist: statisch „Autor*in / Titel“. Beim Verlassen
   des ISBN- oder Titelfelds und nach „Hinzufügen“ startet der Wechsel von vorn.
   ========================================================================== */
.soyka-widget .titel-hinweis {
  position: absolute;
  left: 13px;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  height: 1.3em;
  font-size: 0.9em;
  color: #757575;             /* wie die Platzhalter der anderen Felder */
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
.soyka-widget .titel-hinweis span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  animation: soyka-hinweis 8s linear infinite both;
}
.soyka-widget .titel-hinweis span + span { animation-delay: 4s; }
@keyframes soyka-hinweis {
  0%     { opacity: 0; }
  6.25%  { opacity: 1; }   /* 0,5 s einblenden */
  43.75% { opacity: 1; }   /* 3 s stehen */
  50%    { opacity: 0; }   /* 0,5 s ausblenden */
  100%   { opacity: 0; }   /* der andere Text ist dran */
}
/* Feld angeklickt, Text im Feld oder „Lädt …“ → Hinweis weg */
.soyka-widget .titel-feld input:focus ~ .titel-hinweis,
.soyka-widget .titel-feld input:not(:placeholder-shown) ~ .titel-hinweis,
.soyka-widget .titel-feld input.laedt ~ .titel-hinweis { display: none; }
/* Solange das ISBN-Feld aktiv ist: statisch „Autor*in / Titel“ */
.soyka-widget .titel-feld.statisch .titel-hinweis span { animation: none; opacity: 0; }
.soyka-widget .titel-feld.statisch .titel-hinweis span:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .titel-hinweis span { animation: none; }
  .soyka-widget .titel-hinweis span:first-child { opacity: 1; }
}
.soyka-widget .titel-lupe {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--gedaempft);
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .soyka-widget .titel-hinweis { color: var(--gedaempft); }
}
@media (max-width: 768px) {
  .soyka-widget .form-container .titel-feld { width: 100%; flex: none; }
}

/* ----------------------------------------------------------------------------
   Pakete: Hinweis unter dem Titel, solange Buchschutz gewählt ist
   („Paket mit 4 Heften – Buchschutz 4 × 2,20 € …“ / „… wird geprüft“)
   ----------------------------------------------------------------------------*/
.soyka-widget #orderTable .meldung-hinweis.paket-hinweis {
  color: var(--hintergrundgrün);
  font-weight: 600;
}
.soyka-widget #orderTable .meldung-hinweis.paket-hinweis.paket-pruefen {
  color: var(--primärrot);
}

/* ----------------------------------------------------------------------------
   Abholen / Liefern (Privat) – Schalter wie „Bestellart“, Adresse nur bei Liefern
   ----------------------------------------------------------------------------*/
.soyka-widget .liefer-info {
  display: block;
  margin-top: 6px;
  font-size: 0.72em;
  line-height: 1.35;
  text-align: center;
  color: var(--text-secondary);
}
.soyka-widget .liefer-adresse {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.soyka-widget .liefer-adresse[hidden] { display: none; }
.soyka-widget .liefer-ort {
  display: flex;
  gap: 10px;
}
.soyka-widget .liefer-ort .input-group:first-child { flex: 0 0 5.5em; }
.soyka-widget .liefer-ort .input-group:last-child { flex: 1; min-width: 0; }
.soyka-widget .liefer-ort input { width: 100%; box-sizing: border-box; }

/* Aufbau „Tabelle oben“ (Privat): Kundendaten stehen unter der Titelliste */
.soyka-widget.tabelle-oben .dual-container { margin-top: 10px; align-items: flex-start; }

/* ----------------------------------------------------------------------------
   Pop-up nach der Bestellung mit GiroCode
   ----------------------------------------------------------------------------*/
.soyka-widget .modal-content.mit-girocode { max-width: 520px; }
.soyka-widget #modalMessage .zahlung-absatz { display: block; margin: 0 0 8px; }
.soyka-widget #modalMessage .zahlung-text { margin-top: 14px; font-size: 0.92em; }
.soyka-widget #modalMessage .zahlung-klein { font-size: 0.8em; color: var(--text-secondary); margin-top: 10px; }
.soyka-widget .girocode-bild {
  display: block;
  width: 190px;
  height: 190px;
  margin: 6px auto 10px;
  background: #fff;                 /* auch im Nachtmodus weißer Rand – sonst liest die Kamera schlecht */
  padding: 6px;
  border-radius: 6px;
  image-rendering: pixelated;
}
.soyka-widget .girocode-daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
  margin: 0 auto;
  max-width: 400px;
  text-align: left;
  font-size: 0.8em;
}
.soyka-widget .girocode-daten dt { color: var(--text-secondary); }
.soyka-widget .girocode-daten dd { margin: 0; font-weight: 600; word-break: break-word; }

/* Aufbau „Tabelle oben“ (Privat): Bestellart + Lieferung stehen oben in den
   Auftragsdetails. Der Kasten hat font-size 0.8em – hier zurück auf die Größe
   der Kundendaten (1 / 0.8 = 1.25), damit Schalter und Felder gleich aussehen. */
.soyka-widget .info-container .auftrag-schalter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 1.25em;
  padding-bottom: 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #ccc;
}

/* Überschrift „Ihre Informationen“ (Aufbau „Tabelle oben“) – wie „Auftragsdetails“ */
.soyka-widget .customer-info-container .kasten-titel {
  margin: 0 0 -5px;
  color: var(--hintergrundgrün);
  text-align: center;
  font-weight: 700;
  font-size: 0.94em;
}

/* ==========================================================================
   Privatportal: geführter Ablauf unter der Titelliste (config layout 'schritte')
   1 Regulär/Eilbestellung → 2 Abholen/Liefern → 3 Ihre Informationen →
   4 Auftragsdetails, Wünsche, Absenden. Jeder Schritt klappt auf, wenn der
   vorige erledigt ist.
   ========================================================================== */
.soyka-widget .schritte {
  width: 90%;
  max-width: 1200px;   /* 06.10.2026: so breit wie die Tabelle (.main-content-wrapper) */
  margin: 30px auto 10px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.soyka-widget .schritte[hidden],
.soyka-widget .schritt[hidden] { display: none; }
.soyka-widget .schritt {
  background: var(--bg-card);
  border: var(--border-main);
  border-radius: 14px;
  padding: 18px 20px 20px;
  box-sizing: border-box;
}
.soyka-widget .schritt.schritt-neu { animation: soyka-schritt-auf 0.4s ease-out; }
@keyframes soyka-schritt-auf {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .schritt.schritt-neu { animation: none; }
}
.soyka-widget .schritt-titel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--hintergrundgrün);
}
.soyka-widget .schritt-nr {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85em;
  background: var(--hintergrundgrün);
  color: var(--bg-card);
  transition: background-color 0.3s;
}
.soyka-widget .schritt.erledigt .schritt-nr { background: var(--primärgrün); color: #fff; }

/* Auswahlknöpfe (Regulär/Eil, Abholen/Liefern) */
.soyka-widget .wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.soyka-widget .wahl-knopf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 74px;
  padding: 14px 14px 14px 46px;
  text-align: left;
  font: inherit;
  color: var(--text-main);
  background: var(--input-bg);
  border: 2px solid var(--input-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.soyka-widget .wahl-knopf:hover { border-color: var(--hintergrundgrün); }
.soyka-widget .wahl-knopf:active { transform: scale(0.98); }
.soyka-widget .wahl-knopf:focus-visible { outline: 3px solid var(--akzentgelb); outline-offset: 2px; }
.soyka-widget .wahl-knopf strong { font-size: 1em; color: var(--hintergrundgrün); }
.soyka-widget .wahl-knopf small { font-size: 0.8em; line-height: 1.35; color: var(--text-secondary); }
.soyka-widget .wahl-haken {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  box-sizing: border-box;
  border: 2px solid var(--input-border);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}
.soyka-widget .wahl-knopf.gewaehlt {
  border-color: var(--primärgrün);
  background: var(--tag-bg);
  box-shadow: 0 2px 10px rgba(31, 116, 5, 0.12);
}
.soyka-widget .wahl-knopf.gewaehlt .wahl-haken { border-color: var(--primärgrün); background: var(--primärgrün); }
.soyka-widget .wahl-knopf.gewaehlt .wahl-haken::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.soyka-widget .schritt .liefer-info { margin-top: 10px; text-align: left; font-size: 0.8em; }
.soyka-widget .schritt .liefer-info:empty { display: none; }

/* Ihre Informationen */
.soyka-widget .schritt-felder { display: flex; flex-direction: column; gap: 14px; }
.soyka-widget .feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.soyka-widget .schritt .input-group label { font-size: 0.85em; }
.soyka-widget .schritt .input-group input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 0.8em;         /* Kundendaten wie im alten Formular: 12 px */
  border-radius: 8px;
}
.soyka-widget .schritt .liefer-adresse { gap: 14px; }

/* Auftragsdetails + Abschluss */
.soyka-widget .schritt-details {
  background: var(--hintergrundgrau);
  border-radius: 10px;
  padding: 14px 16px 6px;
  font-size: 0.9em;
}
.soyka-widget .schritt-details .info-row { margin-bottom: 10px; }
.soyka-widget .schritt-details .info-row[hidden] { display: none; }
.soyka-widget .schritt-details .info-summe { border-top: 1px solid #ccc; padding-top: 8px; }
.soyka-widget .schritt-hinweis { margin: 4px 0 8px; font-size: 0.85em; text-align: center; color: var(--text-secondary); }
.soyka-widget .schritt .wunsch-row { width: 100%; margin: 18px 0 0; }
.soyka-widget .schritt .agb-checkbox { margin-top: 16px; }
.soyka-widget .schritt .export-container { margin: 14px 0 0; justify-content: center; }

/* Menge mit − / + (config mengeKnoepfe) */
.soyka-widget .form-container .menge-knoepfe {
  flex: 0.9;
  min-width: 112px;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--input-bg);
  overflow: hidden;
  box-sizing: border-box;
}
.soyka-widget .form-container .menge-knoepfe:focus-within { border-color: var(--primärgrün); }
.soyka-widget .menge-btn {
  flex: 0 0 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hintergrundgrün);
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.soyka-widget .menge-btn:hover { background: var(--hover-bg); }
.soyka-widget .menge-btn:active { background: var(--tag-bg); }
.soyka-widget .form-container .menge-knoepfe input#anzahl {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  cursor: default;
  caret-color: transparent;
}
.soyka-widget .form-container .menge-knoepfe input#anzahl::placeholder { color: var(--text-main); opacity: 1; }

@media (max-width: 768px) {
  .soyka-widget .schritte { width: 94%; margin-top: 24px; gap: 14px; }
  .soyka-widget .schritt { padding: 16px 14px 18px; border-radius: 12px; }
  .soyka-widget .schritt .input-group input { font-size: 16px; }   /* iPhone zoomt sonst ins Feld */
  .soyka-widget .form-container .menge-knoepfe { width: 100%; flex: none; }
  .soyka-widget .menge-btn { flex-basis: 64px; font-size: 1.6em; }
  .soyka-widget .form-container .menge-knoepfe input#anzahl { font-size: 16px; }
}
@media (max-width: 420px) {
  .soyka-widget .wahl { grid-template-columns: 1fr; gap: 10px; }
  .soyka-widget .wahl-knopf { min-height: 62px; }
}

/* Globale Button-Optik (Pille, Großbuchstaben, Schatten) für Auswahl- und Mengeknöpfe aufheben */
.soyka-widget .wahl-knopf {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95em;
  font-weight: 400;
  box-shadow: none;
}
.soyka-widget .wahl-knopf:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.soyka-widget .wahl-knopf.gewaehlt:hover { background: var(--tag-bg); }
.soyka-widget .menge-btn,
.soyka-widget .menge-btn:hover {
  border-radius: 0;
  box-shadow: none;
  letter-spacing: 0;
  min-width: 0;
}

/* Menge-Knöpfe kompakt: nur so breit wie − Zahl + (29.09.2026) */
.soyka-widget .form-container .menge-knoepfe {
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
}
.soyka-widget .form-container .menge-knoepfe input#anzahl {
  flex: 0 0 2.6em !important;
  width: 2.6em !important;
}
@media (max-width: 768px) {
  .soyka-widget .form-container .menge-knoepfe {
    flex: none;
    width: auto;
    align-self: center;
  }
  .soyka-widget .menge-btn { flex: 0 0 46px; font-size: 1.5em; }
  .soyka-widget .form-container .menge-knoepfe input#anzahl {
    flex: 0 0 3em !important;
    width: 3em !important;
  }
}

/* Menge-Knöpfe (29.09.2026, 3): feste Spalten − | Zahl | + per Grid, damit kein
   Browser das Plus wegschieben kann; kein grüner Rahmen beim Anklicken. */
.soyka-widget .form-container .menge-knoepfe {
  display: inline-grid;
  grid-template-columns: 34px 2.6em 34px;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
.soyka-widget .form-container .menge-knoepfe:focus-within { border-color: var(--input-border); }
.soyka-widget .form-container .menge-knoepfe .menge-btn {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  margin: 0;
  display: flex;
}
.soyka-widget .form-container .menge-knoepfe input#anzahl {
  width: 100% !important;
  min-width: 0;
  flex: none !important;
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
@media (max-width: 768px) {
  .soyka-widget .form-container .menge-knoepfe { grid-template-columns: 46px 3em 46px; }
}

/* Privat (Tabelle oben / Schritte), nur Desktop: mehr Luft – zwei Feldhöhen zwischen
   Überschrift und Eingabezeile und unter dem letzten Element */
@media (min-width: 769px) {
  .soyka-widget.tabelle-oben .form-container { margin-top: 74px; }
  .soyka-widget.tabelle-oben > form { padding-bottom: 84px; }
}

/* Pop-up: klickbarer Überweisungs-Link unter dem GiroCode (fürs Handy) */
.soyka-widget #modalMessage .bezahl-link {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 10px 20px;
  border: 1px solid var(--primärgrün);
  border-radius: var(--radius-pille);
  color: var(--primärgrün);
  font-weight: 700;
  font-size: 0.9em;
  text-decoration: none;
}
.soyka-widget #modalMessage .bezahl-link:hover { background: var(--tag-bg); }

/* Pop-ups, die höher als der Bildschirm sind (GiroCode auf dem Handy): scrollbar,
   oben nicht abgeschnitten (margin: auto zentriert nur, solange Platz ist) */
.soyka-widget #customModal { overflow-y: auto; align-items: flex-start; padding: 12px 0; box-sizing: border-box; }
.soyka-widget #customModal .modal-content { margin: auto; }
@media (max-width: 600px) {
  .soyka-widget .modal-content.mit-girocode { padding: 20px 16px; }
}

/* Beim Aufklappen wird der nächste Schritt oben ins Bild gescrollt – mit etwas Luft */
.soyka-widget .schritt { scroll-margin-top: 24px; }

/* Pop-up GiroCode: Kopieren-Knöpfe hinter IBAN, Betrag, Verwendungszweck */
.soyka-widget .girocode-daten dd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.soyka-widget .girocode-daten dd span { min-width: 0; }
.soyka-widget .girocode-daten .kopier-knopf {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 0.75em;
  letter-spacing: 0.5px;
  text-transform: none;
  border-radius: var(--radius-pille);
  box-shadow: none;
}
.soyka-widget .girocode-daten .kopier-knopf.kopiert { background: var(--tag-bg); border-color: var(--primärgrün); color: var(--primärgrün); }
.soyka-widget .girocode-daten dt { align-self: center; }

/* GiroCode-Daten im Pop-up untereinander: Bezeichnung klein, darunter Wert + Kopieren */
.soyka-widget .girocode-daten { grid-template-columns: 1fr; gap: 0; max-width: 360px; }
.soyka-widget .girocode-daten dt { font-size: 0.85em; margin-top: 8px; }
.soyka-widget .girocode-daten dt:first-child { margin-top: 0; }
.soyka-widget .girocode-daten dd { padding: 2px 0 6px; border-bottom: 1px solid var(--table-border); }

/* ==========================================================================
   Bibliotheksportal: Bibliothek + ISIL mit Live-Suche im ISIL-Verzeichnis,
   Lieferadresse, Rabatt nach Bibliotheksart
   ========================================================================== */
.soyka-widget .bib-suche { position: relative; }
.soyka-widget .bib-suche #kundenNr { width: 100%; box-sizing: border-box; }
/* Liste direkt unter dem Eingabefeld (top setzt das Skript) */
.soyka-widget .isil-liste {
  left: 0;
  top: 100%;
  width: 360px;
  min-width: 100%;
  max-width: calc(100vw - 32px);
}
.soyka-widget .isil-liste .live-titel { white-space: normal; }
.soyka-widget .isil-info:empty { display: none; }
.soyka-widget .bib-suche .isil-info { margin-top: 5px; }
.soyka-widget .isil-info {
  font-size: 0.72em;
  line-height: 1.35;
  color: var(--text-secondary);
  min-height: 1.35em;
}
.soyka-widget .isil-info.isil-ok { color: var(--primärgrün); font-weight: 600; }
.soyka-widget .isil-info.isil-vorbehalt { color: #9a7405; }
.soyka-widget .isil-info.isil-laedt { color: var(--gedaempft); font-style: italic; }
@media (prefers-color-scheme: dark) {
  .soyka-widget .isil-info.isil-vorbehalt { color: #e0b640; }
}
.soyka-widget #discountPercentage.rabatt-vorbehalt { text-decoration: underline dotted; cursor: help; }
.soyka-widget #discountPercentage.rabatt-vorbehalt::after { content: " *"; }
@media (max-width: 700px) {
  .soyka-widget .isil-liste { width: 100%; }
}

/* ----------------------------------------------------------------------------
   Lieferadresse (Privat): PLZ → Stadt, Straßenvorschläge (OpenPLZ, apiplz.php)
   ----------------------------------------------------------------------------*/
.soyka-widget .adress-feld { position: relative; }
.soyka-widget .adress-liste {
  left: 0;
  top: 100%;
  margin-top: 4px;
  width: 100%;
  min-width: 220px;
  max-width: calc(100vw - 32px);
}
.soyka-widget .plz-hinweis {
  display: block;
  margin-top: -6px;
  font-size: 0.78em;
  line-height: 1.35;
  color: var(--primärrot);
}
.soyka-widget .plz-hinweis:empty { display: none; }

/* ----------------------------------------------------------------------------
   Listen-Import (Privat): Foto machen / Datei, Fortschritt, Vorschau mit Haken
   ----------------------------------------------------------------------------*/
.soyka-widget .bk-zone.listen-import { min-height: 250px; }
.soyka-widget .morph-container.expanded:has(.listen-import) ~ .bk-file-list { margin-top: 300px; }
.soyka-widget .bk-zone.listen-import .bk-icon { font-size: 1.6em; }
.soyka-widget .bk-zone.listen-import small { max-width: 26em; line-height: 1.4; }
.soyka-widget .bk-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.soyka-widget .bk-knopf {
  padding: 10px 18px;
  border-radius: var(--radius-pille);
  border: 1px solid var(--primärgrün);
  background: var(--hintergrundgrau);
  color: var(--hintergrundgrün);
  font-weight: 700;
  font-size: 0.8em;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.soyka-widget .bk-knopf:hover { background: var(--hover-bg); }
.soyka-widget .bk-foto { border-color: var(--akzentgelb); }
.soyka-widget label.bk-knopf { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.25; }
/* Datei-Felder: unsichtbar, aber nicht display:none – die Knöpfe sind <label for>,
   und Firefox (Android) öffnet ein Feld mit display:none/hidden nicht zuverlässig */
.soyka-widget input.bk-datei-feld,
.soyka-widget .bk-zone input.bk-datei-feld {
  display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; opacity: 0; pointer-events: none;
}
/* Handy/Tablet: „Bücherliste hochladen“ mit zwei Knöpfen statt „hierher ziehen“.
   Maus (Desktop): Text „hierher ziehen“, die ganze Zone ist der Knopf */
.soyka-widget .bk-nur-maus { display: none; }
@media (hover: hover) and (pointer: fine) {
  .soyka-widget .bk-nur-touch { display: none; }
  .soyka-widget .bk-nur-maus { display: inline; }
}
@media (max-width: 520px) {
  .soyka-widget .bk-knoepfe.bk-nur-touch { flex-direction: column; align-items: stretch; width: 100%; max-width: 20em; }
}
.soyka-widget .bk-status {
  font-size: 0.8em;
  text-align: center;
  margin-top: 6px;
  min-height: 1em;
  color: var(--hintergrundgrün);
}
.soyka-widget .bk-status.bk-laeuft::before {
  content: '';
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 6px;
  vertical-align: -0.12em;
  border: 2px solid var(--primärgrün);
  border-right-color: transparent;
  border-radius: 50%;
  animation: soyka-drehen 0.8s linear infinite;
}
@keyframes soyka-drehen { to { transform: rotate(360deg); } }

.soyka-widget .import-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px 0;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}
.soyka-widget .import-box {
  margin: auto;
  width: calc(100% - 32px);
  max-width: 620px;
  box-sizing: border-box;
  background: var(--hintergrundgrau);
  color: var(--text-main);
  border: 8px solid var(--primärgrün);
  border-radius: var(--radius-main);
  padding: 24px 22px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: soyka-modalAppear 0.3s ease-out;
  text-align: left;
}
.soyka-widget .import-box h3 { margin: 0 0 6px; color: var(--hintergrundgrün); font-size: 1.35rem; }
.soyka-widget .import-unter { margin: 0 0 12px; font-size: 0.9em; line-height: 1.45; color: var(--text-secondary); }
.soyka-widget .import-alle { display: inline-flex; gap: 8px; align-items: center; font-size: 0.85em; font-weight: 600; margin: 0 0 8px 10px; cursor: pointer; }
.soyka-widget .import-liste {
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--table-border);
  border-radius: 8px;
  background: var(--bg-card);
}
.soyka-widget .import-gruppe {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 4px 10px;
  background: var(--hintergrundgrau);
  color: var(--hintergrundgrün);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--table-border);
}
.soyka-widget .import-zeile {
  padding: 9px 10px;
  border-bottom: 1px solid var(--table-border);
  line-height: 1.3;
}
.soyka-widget .import-haupt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
/* Buchschutz-Kästchen unter dem Titel (eingerückt bis zum Titeltext) */
.soyka-widget .import-bs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 72px;
  font-size: 0.8em;
  color: var(--text-secondary);
  cursor: pointer;
}
.soyka-widget .import-bs input { width: 16px; height: 16px; margin: 0; accent-color: var(--primärgrün); }
.soyka-widget .import-bs input:disabled + span { color: var(--gedaempft); }
.soyka-widget .import-bs small { color: var(--text-main); }
.soyka-widget .import-kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 10px 8px; }
.soyka-widget .import-kopfzeile .import-alle { margin: 0; }
.soyka-widget .import-zeile:last-child { border-bottom: 0; }
.soyka-widget .import-haupt:hover .import-titel { color: var(--primärgrün); }
.soyka-widget .import-haupt input[type="checkbox"] { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primärgrün); }
.soyka-widget .import-cover { width: 34px; height: 46px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; background: var(--cover-leer-bg); }
.soyka-widget .import-cover-leer { display: inline-block; border: 1px solid var(--cover-leer-rand); box-sizing: border-box; }
.soyka-widget .import-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.soyka-widget .import-titel { font-weight: 600; font-size: 0.9em; }
.soyka-widget .import-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78em; color: var(--gedaempft); }
.soyka-widget .import-preis { color: var(--text-main); white-space: nowrap; }
.soyka-widget .import-preis-grau { color: var(--gedaempft); }
.soyka-widget .import-hinweis { font-size: 0.76em; color: var(--text-secondary); }
.soyka-widget .import-warnung .import-hinweis { color: var(--primärrot); font-weight: 600; }
.soyka-widget .import-auswahl { max-width: 100%; font: inherit; font-size: 0.85em; padding: 4px; margin: 2px 0; }
.soyka-widget .import-fehlt {
  margin-top: 12px;
  padding: 8px 12px;
  border-left: 4px solid var(--akzentgelb);
  background: var(--bg-card);
  border-radius: 4px;
  font-size: 0.82em;
}
.soyka-widget .import-fehlt ul { margin: 6px 0 0; padding-left: 18px; }
.soyka-widget .import-fehlt li { margin: 3px 0; }
.soyka-widget .import-fehlt small { display: block; color: var(--gedaempft); }
.soyka-widget .import-nr { font-family: ui-monospace, Menlo, Consolas, monospace; }
/* Menge, Bestellzeichen und Buchschutz je Zeile der Import-Vorschau (eingerückt bis zum Titeltext) */
.soyka-widget .import-felder {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 6px 0 0 72px; font-size: 0.8em; color: var(--text-secondary);
}
.soyka-widget .import-felder .import-bs { margin: 0; }
.soyka-widget .import-feld { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.soyka-widget .import-feld span { white-space: nowrap; }
.soyka-widget .import-felder input.import-menge,
.soyka-widget .import-felder input.import-bz {
  font: inherit; font-size: 0.9em; margin: 0; padding: 3px 6px; box-sizing: border-box; height: auto;
  border: 1px solid var(--input-border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-main);
}
.soyka-widget .import-felder input.import-menge { width: 4.6em; text-align: center; }
.soyka-widget .import-felder input.import-bz { width: 10em; }
/* Nicht in der Liste gefunden (Schule: „Menge bitte prüfen“) */
.soyka-widget .import-nicht-erkannt input { outline: 2px solid var(--akzentgelb); outline-offset: 1px; }

/* Zeile zum Korrigieren: Nummer nicht gefunden / unklar gelesen / Abfrage fehlgeschlagen */
.soyka-widget .import-korrektur { border-left: 4px solid var(--akzentgelb); background: var(--hintergrundgrau); }
.soyka-widget .import-korrektur-fehler { border-left-color: var(--primärrot); }
.soyka-widget .import-korrektur .import-haupt { cursor: default; }
.soyka-widget .import-korrektur .import-k-hinweis { color: var(--text-secondary); font-size: 0.78em; line-height: 1.35; }
.soyka-widget .import-korrektur-fehler .import-k-hinweis { color: var(--primärrot); }
.soyka-widget .import-k-zeile { display: flex; gap: 6px; align-items: stretch; margin-top: 3px; }
.soyka-widget .import-korrektur input.import-k-nr,
.soyka-widget .import-korrektur input.import-k-titel,
.soyka-widget .import-korrektur input.import-k-preis {
  font: inherit; font-size: 0.9em; margin: 3px 0 0; padding: 5px 7px; box-sizing: border-box; height: auto;
  width: 100%; min-width: 0; border: 1px solid var(--input-border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-main);
}
.soyka-widget .import-korrektur input.import-k-nr { margin: 0; flex: 1 1 auto; font-family: ui-monospace, Menlo, Consolas, monospace; }
.soyka-widget .import-korrektur input.import-k-preis { max-width: 11em; }
.soyka-widget .import-k-suchen, .soyka-widget .import-erneut {
  font: inherit; font-size: 0.85em; padding: 4px 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--primärgrün); background: var(--primärgrün); color: #fff;
}
.soyka-widget .import-k-suchen:disabled, .soyka-widget .import-erneut:disabled { opacity: 0.6; cursor: default; }
.soyka-widget .import-fehlt p { margin: 4px 0; }
.soyka-widget .import-erneut { margin-left: 6px; padding: 3px 10px; }
.soyka-widget .import-mengen-hinweis { border-left: 4px solid var(--akzentgelb); padding-left: 8px; }
@media (max-width: 520px) {
  .soyka-widget .import-felder { margin-left: 0; }
}
.soyka-widget .import-datei-hinweis { margin: 10px 0 0; font-size: 0.78em; color: var(--text-secondary); }
.soyka-widget .import-knoepfe { margin-top: 16px; flex-wrap: wrap; }
.soyka-widget .import-knoepfe .import-ok {
  background-color: var(--primärgrün);
  color: #fff;
  border: 1px solid var(--primärgrün);
}
.soyka-widget .import-knoepfe .import-ok:disabled { opacity: 0.5; cursor: default; }
.soyka-widget .import-knoepfe .import-abbrechen {
  background-color: var(--hintergrundgrau);
  color: var(--primärrot);
  border: 1px solid var(--primärrot);
}
@media (max-width: 520px) {
  .soyka-widget .import-box { padding: 18px 14px 16px; border-width: 5px; }
  .soyka-widget .import-knoepfe button { flex: 1 1 100%; }
}
/* Handy: Upload-Zone für den Listen-Import in voller Breite (sonst nur 50vw) */
@media (max-width: 768px) {
  .soyka-widget .bk-zone.listen-import { width: 90vw; max-width: 90vw; padding: 24px 18px 65px; }
}

/* Geführter Ablauf: Rand der Kästen 1–3 so dick wie bei den Eingabefeldern (1 px) */
.soyka-widget .schritt { border-width: 1px; }

/* Ohne „Titelliste herunterladen“ (Privat): „Liste löschen“ steht rechts über dem
   Upload statt schwebend daneben – überschnitt sich sonst auf einer Linie */
.soyka-widget.ohne-download .upload-download-centered { gap: 16px; }
.soyka-widget.ohne-download #downloadWrapper { justify-content: flex-end; }
.soyka-widget.ohne-download #downloadWrapper .clear-list-btn { position: static; }
@media (max-width: 768px) {
  .soyka-widget.ohne-download .upload-download-centered { gap: 20px; }
  .soyka-widget.ohne-download #downloadWrapper { justify-content: center; }
}

/* Kurze Einleitung unter dem Kopf (config 'einleitung', z. B. Privat) */
.soyka-widget .portal-einleitung {
  max-width: 680px;
  margin: 4px auto 22px;
  padding: 0 16px;
  text-align: center;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--text-secondary);
}
.soyka-widget .portal-einleitung p { margin: 0 0 6px; }

/* Handy (Privat): „Hinzufügen“ und das X zum Leeren auf einer Höhe nebeneinander
   (vorher untereinander). Die Felder bleiben in voller Breite. */
@media (max-width: 768px) {
  .soyka-widget[data-portal="privat"] .form-container { flex-direction: row; justify-content: center; }
  .soyka-widget[data-portal="privat"] .form-container > #addButton { flex: 0 1 auto; margin: 0; }
  .soyka-widget[data-portal="privat"] .form-container > .clear-btn { align-self: center; margin: 0; }
}

/* ----------------------------------------------------------------------------
   Listen-Import: Lupe während der Texterkennung („Suchscheinwerfer“)
   ----------------------------------------------------------------------------*/
.soyka-widget .lupe-karte {
  margin: 14px auto 4px;
  padding: 16px 14px 12px;
  max-width: 500px;
  border: 1px solid var(--primärgrün);
  border-radius: var(--radius-main);
  background: var(--bg-card);
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.soyka-widget .lupe-buehne {
  position: relative;
  margin: 0 auto;
  width: 280px;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f0ea center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.soyka-widget .lupe-karte.bereit .lupe-buehne { opacity: 1; }
.soyka-widget .lupe-schleier {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transition: opacity 0.9s ease;
}
.soyka-widget .lupe-karte.fertig .lupe-schleier { opacity: 0; }
/* Lupe = Glas (bewegt sich) mit runder Linse (vergrößerter Ausschnitt) und Griff */
.soyka-widget .lupe-glas {
  position: absolute; left: 0; top: 0;
  will-change: transform;
}
.soyka-widget .lupe-linse {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 4px solid var(--primärgrün);
  background-color: #fff;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.75), 0 6px 22px rgba(0,0,0,0.35), inset 0 0 18px rgba(255,255,255,0.35);
  overflow: hidden;
  box-sizing: border-box;
}
.soyka-widget .lupe-glas::after {
  content: '';
  position: absolute;
  left: 86%; top: 86%;
  width: 34%; height: 11%;
  min-height: 8px;
  border-radius: 6px;
  background: var(--primärgrün);
  transform-origin: 0 50%;
  transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.soyka-widget .lupe-eule {
  position: absolute; inset: 12%;
  width: 76%; height: 76%;
  object-fit: contain;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.soyka-widget .lupe-glas.eule .lupe-linse {
  background-image: none !important;
  background-color: var(--bg-card);
  border-color: var(--akzentgelb);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.soyka-widget .lupe-glas.eule .lupe-eule { opacity: 1; transform: scale(1) rotate(0); }
/* Zum Schluss wird die Lupe etwas kleiner und legt die runde Eule frei */
.soyka-widget .lupe-glas { transition: scale 0.5s ease; }
.soyka-widget .lupe-glas.eule { scale: 0.82; }
.soyka-widget .lupe-eule { inset: 8%; width: 84%; height: 84%; }
.soyka-widget .lupe-text {
  margin: 12px 0 0;
  font-size: 0.9em;
  line-height: 1.45;
  color: var(--text-main);
}
.soyka-widget .lupe-text strong { color: var(--primärgrün); display: block; }
/* Die kleine Statuszeile darunter bleibt (Fortschritt), ohne Drehkreisel */
.soyka-widget .lupe-karte ~ .bk-status.bk-laeuft::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .lupe-eule, .soyka-widget .lupe-schleier { transition: none; }
}
.soyka-widget .lupe-glas.eule::after { background: var(--akzentgelb); transition: background 0.3s ease; }

/* ----------------------------------------------------------------------------
   Zahlungsart (Privat): zwischen AGB-Häkchen und „Zahlungspflichtig bestellen“
   ----------------------------------------------------------------------------*/
.soyka-widget .zahlungsart { margin: 18px auto 6px; max-width: 640px; }
.soyka-widget .zahlungsart-titel { margin: 0 0 8px; text-align: center; color: var(--hintergrundgrün); }
.soyka-widget .wahl-knopf:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.soyka-widget .wahl-knopf:disabled:hover { border-color: var(--input-border); box-shadow: none; }
.soyka-widget .zahlungsart-hinweis {
  display: block; margin-top: 8px; text-align: center;
  font-size: 0.8em; line-height: 1.4; color: var(--primärrot);
}
.soyka-widget .zahlungsart-hinweis[hidden] { display: none; }

/* Kamera im Browser (Firefox am Android): Vollbild mit Auslöser */
.soyka-widget .kamera-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.soyka-widget .kamera-box { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.soyka-widget .kamera-bild { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: #000; }
.soyka-widget .kamera-tipp { margin: 0; padding: 8px 16px; color: #fff; text-align: center; font-size: 0.85em; }
.soyka-widget .kamera-knoepfe {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
}
.soyka-widget .kamera-abbrechen {
  justify-self: start; background: none; border: none; color: #fff;
  font-size: 1em; padding: 10px 6px; cursor: pointer;
}
.soyka-widget .kamera-ausloesen {
  width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 5px solid var(--akzentgelb);
  box-shadow: 0 0 0 3px #fff; cursor: pointer; padding: 0;
}
.soyka-widget .kamera-ausloesen:active { transform: scale(0.94); }

/* Auswahlknöpfe (Bestellart, Lieferung, Zahlungsart): Hintergrund wie die Seite
   statt grün, dünnere Ränder (1 px) – gewählt erkennt man am Haken und am grünen Rand */
.soyka-widget .wahl-knopf,
.soyka-widget .wahl-knopf.gewaehlt,
.soyka-widget .wahl-knopf.gewaehlt:hover { background: var(--hintergrundgrau); border-width: 1px; }
.soyka-widget .wahl-knopf.gewaehlt { box-shadow: none; }
.soyka-widget .wahl-haken { border-width: 1.5px; }

/* Zarter Hinweis unter dem Titelfeld (z. B. „Hinzufügen“ ohne Eingabe) */
.soyka-widget #isbnError.zart { color: var(--text-secondary); font-weight: 400; font-style: italic; }

/* Bibliothek ohne ISIL: Adresse der Bibliothek */
.soyka-widget .bib-adresse { margin-top: 10px; }
.soyka-widget .bib-adresse-hinweis { margin: 0 0 8px; font-size: 0.8em; color: var(--text-secondary); }
.soyka-widget .export-container button[hidden] { display: none; }
.soyka-widget.preis-aus .form-container input#preis { display: none; }
.soyka-widget .agb-checkbox .datenschutz-hinweis { display: block; margin-top: 4px; opacity: .85; }

/* Foto-Knopf ganz oben (Privat, nur Handy/Tablet) */
.soyka-widget .foto-oben { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 14px; text-align: center; }
.soyka-widget .foto-oben-knopf {
  display: block; width: 100%; max-width: 22em; box-sizing: border-box; padding: 16px 18px;
  background: var(--primärgrün, #1f7405); color: #fff; font-weight: 700; font-size: 1.05em;
  border-radius: 10px; cursor: pointer; text-align: center;
}
.soyka-widget .foto-oben small { color: var(--gedaempft, #666); }
@media (hover: hover) and (pointer: fine) { .soyka-widget .foto-oben { display: none; } }

/* „Liste gelöscht – Rückgängig“ */
.soyka-widget .rueckgaengig-meldung {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 10px;
  background: #333; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.3); max-width: 92vw;
}
.soyka-widget .rueckgaengig-meldung button {
  background: transparent; border: 0; color: #FFE493; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 1em; padding: 4px;
}

/* Bibliothek: „Andere Lieferadresse?“ */
.soyka-widget .bib-liefer { margin: 6px 0 10px; }
.soyka-widget .bib-liefer-frage { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
.soyka-widget .bib-liefer .liefer-adresse[hidden] { display: none; }

/* ISBN-Feld mit Barcode-Knopf (Handy) */
.soyka-widget .form-container .isbn-feld { flex: 1.2; position: relative; display: flex; min-width: 0; }
.soyka-widget .form-container .isbn-feld input#isbn { flex: 1; width: 100%; }
.soyka-widget .barcode-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; padding: 6px; border: 0; border-radius: 6px; background: transparent;
  color: var(--primärgrün, #1f7405); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.soyka-widget .barcode-btn svg { width: 24px; height: 24px; }
.soyka-widget .isbn-feld:has(.barcode-btn) input#isbn { padding-right: 44px; }
@media (max-width: 768px) { .soyka-widget .form-container .isbn-feld { width: 100%; flex: none; } }
@media (hover: hover) and (pointer: fine) { .soyka-widget .barcode-btn { display: none; } }
.soyka-widget .barcode-rahmen {
  position: absolute; left: 10%; right: 10%; top: 38%; height: 18%;
  border: 3px solid rgba(255, 228, 147, .9); border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35);
}

/* „Liste per Link“ (Knopf sieht aus wie alle Knöpfe, Formular darunter) */
.soyka-widget .merken-form { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: 10px auto; max-width: 30em; text-align: center; }
.soyka-widget .merken-form[hidden] { display: none; }
.soyka-widget .merken-zeile { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.soyka-widget .merken-zeile input { flex: 1 1 14em; min-width: 0; }
.soyka-widget .merken-status { min-height: 1.2em; }

/* Titel, die nicht rabattfähig sind */
.soyka-widget .rabatt-nein { font-size: 0.8em; color: var(--text-secondary, #666); font-style: italic; margin-top: 2px; }

/* ==========================================================================
   01.10.2026 (23) – Kartenansicht Privat, runde Knöpfe, Upload oben, Liste per Link
   ========================================================================== */

/* ISBN-Zeile im Titel: nur in der Privat-Kartenansicht sichtbar (siehe unten) */
.soyka-widget .titel-isbn { display: none; }

/* Stift wie das X: runder Knopf mit Rand (überall) */
.soyka-widget .edit-btn {
  width: 26px; height: 26px; padding: 0; margin: 0;
  border-radius: 50%;
  border: 1px solid var(--primärgrün);
  background: var(--hintergrundgrau);
  font-size: 12px; line-height: 1; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .edit-btn:hover { background-color: var(--hover-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.soyka-widget .remove-btn { width: 26px; height: 26px; }
.soyka-widget #orderTable td:nth-child(9) .edit-btn { margin-right: 6px; }

@media (max-width: 1100px) {
  /* Kartenansicht (alle Portale): Stift und X etwas größer */
  .soyka-widget #orderTable .edit-btn { width: 34px; height: 34px; font-size: 15px; padding: 0; margin: 0; }
  .soyka-widget #orderTable .remove-btn { width: 34px; height: 34px; }
  .soyka-widget #orderTable .remove-btn svg { width: 12px; height: 12px; }
  .soyka-widget #orderTable tbody td:nth-child(9) { gap: 10px; align-items: center; }

  /* ── Privat: Positionen von oben nach unten (Pos. 1 oben, neue Titel unten) ──
     Die Zeilen bleiben im DOM „neueste zuerst“ (Speichern, Mail, Excel unverändert),
     nur die Anzeige wird umgedreht. */
  .soyka-widget[data-portal="privat"] #orderTable tbody { display: flex; flex-direction: column-reverse; }

  /* Karte: [Cover | Titel / Untertitel / ISBN]
            Pos.  Menge  Preis  Gesamtpreis
            Buchschutz            (Stift) (X) */
  .soyka-widget[data-portal="privat"] #orderTable tbody tr {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
    grid-template-areas:
      "titel titel titel  titel"
      "pos   menge preis  gesamt"
      "bs    bs    aktion aktion";
    row-gap: 10px;
  }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(3) { display: none; }   /* ISBN steht im Titel */
  .soyka-widget[data-portal="privat"] #orderTable .titel-isbn {
    display: block; margin-top: 3px; font-size: 0.88em; color: var(--text-secondary);
  }
  .soyka-widget[data-portal="privat"] #orderTable .titel-wrap { align-items: flex-start; gap: 12px; }
  .soyka-widget[data-portal="privat"] #orderTable .titel-body { align-self: center; }
  .soyka-widget[data-portal="privat"] #orderTable .cover-thumb,
  .soyka-widget[data-portal="privat"] #orderTable .cover-thumb.cover-leer { flex: 0 0 50px; width: 50px; height: 72px; }
  .soyka-widget[data-portal="privat"] #orderTable .cover-thumb img { max-width: 50px; max-height: 72px; }

  /* Pos. wie die anderen: Beschriftung oben, Wert darunter */
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(1) {
    color: var(--text-main); font-size: 0.85em; align-self: start;
  }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(1)::before {
    content: "Pos."; display: block; font-size: 0.78em; font-weight: 700;
    color: var(--hintergrundgrün); margin-bottom: 2px;
  }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(7)::before { content: "Gesamt (€)"; }
  .soyka-widget[data-portal="privat"] #orderTable .bs-aufpreis { display: inline; color: var(--text-secondary); }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(5) { white-space: nowrap !important; overflow-wrap: normal; }

  /* Buchschutz: Beschriftung neben dem Schalter, Stift und X rechts daneben */
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8) {
    display: flex; align-items: center; gap: 10px; align-self: center;
  }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8)::before { margin: 0; font-size: 0.85em; }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(9) { align-self: center; }
}

/* „Liste hochladen / Foto“ ganz oben (Privat) */
.soyka-widget .upload-oben {
  width: 90%; max-width: 1200px; margin: 0 auto 18px auto;
  display: flex; flex-direction: column; align-items: center;
}
.soyka-widget .upload-oben .upload-trigger-button { min-width: 280px; }
@media (max-width: 768px) {
  .soyka-widget .upload-oben { width: 94%; }
  .soyka-widget .upload-oben .upload-trigger-button { min-width: auto; width: 100%; }
}

/* „Liste per Link“ (Schule) */

/* Einheitliches Aussehen (01.10.2026 (23)):
   – Eingabefelder wie Menge / ISBN / Suche: 1 px heller Rand, 8 px Rundung, grün beim Hineinklicken
   – Alles Anklickbare mit rundem Rahmen wie HINZUFÜGEN bzw. das X */
.soyka-widget .input-group input,
.soyka-widget .merken-zeile input,
.soyka-widget .wunsch-col-full textarea {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background-color: var(--input-bg);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.3s ease-in-out;
  box-sizing: border-box;
}
.soyka-widget .input-group input { padding: 10px; }   /* wie im alten Formular */
.soyka-widget .merken-zeile input { padding: 12px; }
.soyka-widget .input-group input:focus,
.soyka-widget .merken-zeile input:focus,
.soyka-widget .wunsch-col-full textarea:focus { border-color: var(--primärgrün); }

.soyka-widget .wahl-knopf {
  border: 1px solid var(--primärgrün);
  border-radius: var(--radius-pille);
  padding-left: 50px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .wahl-knopf .wahl-haken { left: 18px; }
.soyka-widget .wahl-knopf:hover { background-color: var(--hover-bg); border-color: var(--primärgrün); }
.soyka-widget .wahl-knopf.gewaehlt { box-shadow: inset 0 0 0 1px var(--primärgrün), 0 2px 10px rgba(31, 116, 5, 0.12); }

/* Schule: HERUNTERLADEN · LISTE PER LINK · LISTE LÖSCHEN nebeneinander */
.soyka-widget #downloadWrapper:has(#linkBtn) { justify-content: center; gap: 16px; flex-wrap: wrap; }
.soyka-widget #downloadWrapper:has(#linkBtn) #rechercheButton { margin: 0; }
.soyka-widget #downloadWrapper:has(#linkBtn) .clear-list-btn { position: static; }
.soyka-widget #linkBtn { white-space: nowrap; }
.soyka-widget .upload-oben:not(:empty) + .main-content-wrapper > .form-container { margin-top: 0; }

/* ==========================================================================
   01.10.2026 (24)
   ========================================================================== */

/* Stift: gelber Rand wie unsere gelben Knöpfe, Hintergrund wie das X */
.soyka-widget .edit-btn,
.soyka-widget .edit-btn:hover { border-color: var(--akzentgelb); }
.soyka-widget .edit-btn { background: var(--hintergrundgrau); box-shadow: 0 2px 4px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03); }
.soyka-widget .edit-btn:hover { background-color: var(--hover-bg); }

/* Handy (Privat): Menge kompakt links neben dem ISBN-Feld */
@media (max-width: 768px) {
  .soyka-widget[data-portal="privat"] .form-container .menge-knoepfe {
    grid-template-columns: 32px 2.2em 32px;
    align-self: stretch;
    flex: 0 0 auto;
  }
  .soyka-widget[data-portal="privat"] .form-container .menge-knoepfe .menge-btn { font-size: 1.25em; }
  .soyka-widget[data-portal="privat"] .form-container .menge-knoepfe input#anzahl { padding: 12px 0; }
  .soyka-widget[data-portal="privat"] .form-container .isbn-feld { flex: 1 1 0; width: auto; min-width: 0; }
  .soyka-widget[data-portal="privat"] .form-container .titel-feld { flex: 1 1 100%; }
  .soyka-widget[data-portal="privat"] .form-container input#preis { flex: 1 1 100% !important; }
}

/* „Liste hochladen / Foto“ oben nur am Handy – am Desktop wieder unter der Liste
   (formular.js verschiebt #uploadSection je nach Breite in den passenden Platz) */
.soyka-widget .upload-oben:empty { display: none; }

/* Texterkennung: Fortschritt in der Lupen-Karte unter der grünen Zeile */
.soyka-widget .lupe-fortschritt { display: block; margin: 2px 0 4px; font-weight: 600; color: var(--hintergrundgrün); min-height: 1.3em; }
.soyka-widget .lupe-fortschritt:empty { min-height: 0; margin: 0; }

/* Schule: „Link zur Liste“ klappt ein Feld auf (wie „Titelliste hochladen“) */
.soyka-widget .link-zone {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; max-width: 560px; box-sizing: border-box;
  margin: 6px auto 18px; padding: 24px 28px 64px;
  /* aufgeklapptes Feld in der Farbe des Knopfs, der es öffnet („Liste speichern“ = gelb) */
  border: 1px solid var(--akzentgelb); border-radius: var(--radius-pille);
  background: var(--bg-card); text-align: center;
  opacity: 0; transform: scale(0.97); transition: opacity 0.3s ease, transform 0.3s ease;
}
.soyka-widget .link-zone[hidden] { display: none; }
.soyka-widget .link-zone.offen { opacity: 1; transform: none; }
.soyka-widget .link-titel { margin: 0; font-weight: 600; color: var(--hintergrundgrün); }
.soyka-widget .link-adresse {
  max-width: 100%; overflow-wrap: anywhere; font-size: 0.85em;
  color: var(--text-secondary); text-decoration: none; user-select: all; cursor: text;
}
.soyka-widget .link-adresse:empty { display: none; }
.soyka-widget .link-kopieren { min-width: 220px; }
.soyka-widget .link-zone .merken-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .soyka-widget .link-zone { transition: none; } }

/* HERUNTERLADEN · LINK · LISTE LÖSCHEN: breit – die beiden Knöpfe mittig, „Liste löschen“
   rechts; schmal (Feld unter 960 px) – umbrechen, mittig, mit Abstand. Nie überlappen. */
.soyka-widget #uploadDownloadCol { container-type: inline-size; }
.soyka-widget #downloadWrapper:has(#linkBtn) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  align-items: center; gap: 16px; margin-bottom: 18px;
}
.soyka-widget #downloadWrapper:has(#linkBtn) #rechercheButton { grid-column: 2; margin: 0; }
.soyka-widget #downloadWrapper:has(#linkBtn) #linkBtn { grid-column: 3; }
.soyka-widget #downloadWrapper:has(#linkBtn) .clear-list-btn { grid-column: 4; justify-self: end; position: static; }
@container (max-width: 960px) {
  .soyka-widget #downloadWrapper:has(#linkBtn) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
}

/* 01.10.2026 (25): Knopfreihe unter der Liste für Schule UND Bibliothek gleich:
   „Herunterladen“ (+ „Link“) mittig, „Liste löschen“ rechts, nie überlappend; schmal
   (Feld < 960 px) mittig umbrechen. Abstand nach unten zu „Titelliste hochladen“. */
.soyka-widget:not(.ohne-download) #downloadWrapper {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 16px; margin-bottom: 22px;
}
.soyka-widget:not(.ohne-download) #downloadWrapper #rechercheButton { grid-column: 2; margin: 0; }
.soyka-widget:not(.ohne-download) #downloadWrapper .clear-list-btn { grid-column: 3; justify-self: end; position: static; }
.soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); }
.soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) .clear-list-btn { grid-column: 4; }
@container (max-width: 960px) {
  .soyka-widget:not(.ohne-download) #downloadWrapper,
  .soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; }
}
/* aufgeklappte Upload-Zone nie an die Knöpfe darüber stoßen lassen */
.soyka-widget #uploadDownloadCol #uploadSection { margin-top: 4px; }

/* Satz unter dem Untertitel (Privat) */
.soyka-widget .title-satz { margin: 4px 0 0; font-size: 1em; color: var(--hintergrundgrün); font-weight: 600; }
/* Stift: gelber Ring dezenter */
.soyka-widget .edit-btn,
.soyka-widget .edit-btn:hover { border-color: rgba(255, 195, 0, 0.45); }
.soyka-widget .edit-btn { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

/* 01.10.2026 (26) */
/* Barcode-Knopf im ISBN-Feld: grau statt grün, ohne Kasten */
.soyka-widget .barcode-btn { color: var(--gedaempft, #8a8a8a); background: transparent !important; box-shadow: none !important; }
.soyka-widget .barcode-btn:hover { color: var(--text-main); }
/* Schule: „Liste speichern“ – Link kopieren und Herunterladen nebeneinander im aufgeklappten Feld */
.soyka-widget .link-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.soyka-widget .link-knoepfe #rechercheButton { min-width: 0; margin: 0; }
.soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) #linkBtn { grid-column: 2; }
.soyka-widget:not(.ohne-download) #downloadWrapper:has(#linkBtn) .clear-list-btn { grid-column: 3; }
/* Upload: „Aus Zwischenablage einfügen“ (auch am Desktop sichtbar) */
.soyka-widget .bk-einfuegen { margin-top: 2px; }
.soyka-widget .einfuegen-box {
  background: var(--bg-card); color: var(--text-main); border-radius: 16px; padding: 18px; width: min(92vw, 520px);
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
}
.soyka-widget .einfuegen-box textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--input-border); border-radius: 8px; padding: 12px; font: inherit; font-size: 0.9em; background: var(--input-bg); color: var(--text-main); outline: none; }
.soyka-widget .einfuegen-box textarea:focus { border-color: var(--primärgrün); }
.soyka-widget .einfuegen-knoepfe { display: flex; justify-content: flex-end; gap: 10px; }
.soyka-widget .kamera-overlay.einfuegen-overlay { background: rgba(0,0,0,.55); }

/* ============================================================================
   01.10.2026 (9) – Regeln für alle Portale
   ----------------------------------------------------------------------------
   Eingabefelder: überall gleich – 1 px grauer Rand (--input-border), Ecken 8 px,
   Schrift wie das Formular, beim Tippen grüner Rand; Größe wie im alten Formular:
   Titelzeile 13,5 px (0.9em), Kundendaten 12 px (0.8em), Wunsch-Feld 12,75 px
   (0.85em); am Handy 16 px (sonst zoomt das iPhone). Die Werte stehen direkt in den
   Regeln oben (input-group, form-container, schritt, Wunsch-Feld, Import,
   Einfügen) – hier nur der Grundwert für Felder ohne eigene Regel.
   ============================================================================ */
.soyka-widget :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea) {
  border: 1px solid var(--input-border); border-radius: 8px; background-color: var(--input-bg); color: var(--text-main);
  font-family: inherit; font-size: 0.9em; padding: 12px; box-sizing: border-box; outline: none; transition: border-color 0.3s ease-in-out;
}
.soyka-widget :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], select, textarea):focus { border-color: var(--primärgrün); }
@media (max-width: 768px) {
  .soyka-widget .form-container input, .soyka-widget .input-group input, .soyka-widget .merken-zeile input,
  .soyka-widget .wunsch-col-full textarea, .soyka-widget .einfuegen-box textarea { font-size: 16px; }
}

/* Schließen/Abbrechen-Knöpfe: Rand in der Farbe des Knopfs, der das Feld
   geöffnet hat – beim Darüberfahren rot umrandet. */
.soyka-widget .close-upload-btn:hover,
.soyka-widget .close-info-btn:hover,
.soyka-widget .einfuegen-nein:hover,
.soyka-widget .kamera-abbrechen:hover { border-color: var(--primärrot) !important; }
/* „Abbrechen“ im Einfügen-Fenster: geöffnet über „Aus Zwischenablage einfügen“ (grün) */
.soyka-widget .einfuegen-nein { border-color: var(--primärgrün); }
/* „Abbrechen“ in der Kamera: geöffnet über „Foto machen“ (grün) – Pille statt nackter Schrift */
.soyka-widget .kamera-abbrechen {
  border: 1px solid var(--primärgrün); border-radius: var(--radius-pille);
  padding: 8px 18px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85em;
  background: rgba(0,0,0,.35); color: #fff;
}

/* ============================================================================
   01.10.2026 (10) – Knöpfe an die Regel angepasst
   ============================================================================ */
/* „Liste speichern ▼“ und „Link kopieren“ = einwirken → gelb; „Schließen“ des
   Link-Felds in der Farbe des öffnenden Knopfs (gelb), beim Darüberfahren rot */
.soyka-widget #linkBtn,
.soyka-widget .link-kopieren,
.soyka-widget #linkSchliessen {
  border-color: var(--akzentgelb);
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget #linkBtn:hover,
.soyka-widget .link-kopieren:hover { border-color: var(--akzentgelb); box-shadow: 0 2px 8px rgba(255,195,0,0.25); }
.soyka-widget #linkSchliessen:hover { border-color: var(--primärrot) !important; }

/* Upload-Zone: alle drei Wege fügen Titel hinzu → grün (vorher „Foto machen“ gelb) */
.soyka-widget .bk-foto { border-color: var(--primärgrün); }

/* Rückfragen: OK in der Farbe seiner Wirkung (Standard gelb, „Liste löschen“ rot,
   „Trotzdem hinzufügen“ grün – siehe showCustomDialog(…, { jaArt })),
   Abbrechen ohne Farbe, beim Darüberfahren rot. */
.soyka-widget #modalConfirmBtn.knopf-gruen { border-color: var(--primärgrün); box-shadow: 0 2px 6px rgba(31,116,5,0.12), inset 0 -1px 2px rgba(0,0,0,0.03); }
.soyka-widget #modalConfirmBtn.knopf-rot { border-color: var(--primärrot); box-shadow: 0 2px 6px rgba(165,36,24,0.10), inset 0 -1px 2px rgba(0,0,0,0.03); }
.soyka-widget #modalCancelBtn { border-color: var(--gedaempft); color: var(--hintergrundgrün); box-shadow: 0 2px 6px rgba(0,0,0,0.06), inset 0 -1px 2px rgba(0,0,0,0.03); }
.soyka-widget #modalCancelBtn:hover { border-color: var(--primärrot); }
.soyka-widget #modalCancelBtn.knopf-rot { border-color: var(--primärrot); }
.soyka-widget #modalCancelBtn.knopf-gruen { border-color: var(--primärgrün); }

/* Import-Dialog: „Übernehmen“ grün umrandet (statt gefüllt), „Abbrechen“ in der
   Farbe des öffnenden Knopfs (Upload, grün) mit rotem Rand beim Darüberfahren,
   „Suchen“/„Erneut versuchen“ = einwirken → gelb umrandete Pille (statt grün gefüllt, eckig) */
.soyka-widget .import-knoepfe .import-ok {
  background-color: var(--hintergrundgrau); color: var(--hintergrundgrün); border: 1px solid var(--primärgrün);
}
.soyka-widget .import-knoepfe .import-ok:hover:not(:disabled) { background-color: var(--hover-bg); }
.soyka-widget .import-knoepfe .import-abbrechen {
  background-color: var(--hintergrundgrau); color: var(--hintergrundgrün); border: 1px solid var(--primärgrün);
}
.soyka-widget .import-knoepfe .import-abbrechen:hover { border-color: var(--primärrot); background-color: var(--hover-bg); }
.soyka-widget .import-k-suchen,
.soyka-widget .import-erneut {
  border: 1px solid var(--akzentgelb); background: var(--hintergrundgrau); color: var(--hintergrundgrün);
  border-radius: var(--radius-pille); font-weight: 700; padding: 4px 14px;
  box-shadow: 0 1px 3px rgba(255,195,0,0.15);
}
.soyka-widget .import-k-suchen:hover:not(:disabled),
.soyka-widget .import-erneut:hover:not(:disabled) { background: var(--hover-bg); }

/* ============================================================================
   01.10.2026 (11) – Optik wie das alte Formular im Shop, unabhängig vom Shop-CSS
   ----------------------------------------------------------------------------
   Im Gambio-Shop erbt das Formular Zeilenhöhe, Überschriften-Stärke und Schrift
   der Knöpfe vom Shop-Stylesheet. Damit es auf den Testseiten (und überall sonst)
   genauso aussieht wie das alte Formular im Shop, stehen die Werte hier fest.
   Gemessen am 01.10.2026 auf soyka-berlin.de/de/info/schulbuchportal.html.
   ============================================================================ */
.soyka-widget { line-height: 1.42857; }                       /* Shop: 20 px bei 14 px */
.soyka-widget .title-text { font-weight: 400; }                /* „Das Schulbuchportal“ nicht fett */
.soyka-widget h3 { font-size: 18px; line-height: 1.1; margin-bottom: 9px; }   /* „Auftragsdetails“ 18 px */
.soyka-widget .logo { vertical-align: middle; }
.soyka-widget button,
.soyka-widget input,
.soyka-widget select,
.soyka-widget textarea { font-family: inherit; line-height: inherit; }   /* Knöpfe in der Formular-Schrift statt Arial, Höhe wie im Shop */

/* ============================================================================
   01.10.2026 (13) – Eule mittig ganz oben, Augen folgen dem Mauszeiger
   ----------------------------------------------------------------------------
   Wie auf soyka-berlin.de: Eule ohne Augen (Eule_ohne_Augen.svg) + zwei
   Pupillen darüber, die formular.js/auswahl.js zur Maus hin verschieben.
   Größe wie das bisherige Logo (53 px, am Handy 40 px).
   02.10.2026: immer die Tag-Eule (schwarze Eule, schwarzer Ring, schwarze
   Pupillen), innen der helle Formular-Hintergrund (#F6F6F2) – auch im Nachtmodus.
   Im Nachtmodus ist außerhalb des Rings alles schwarz (kein heller Rand).
   ============================================================================ */
.soyka-widget .header-container { flex-direction: column; align-items: center; justify-content: flex-start; }
.soyka-widget .eule-link { display: block; line-height: 0; margin: 0 0 6px; text-decoration: none; }
.soyka-widget .eule {
  position: relative; display: block; width: 53px; height: 53px;
  /* helle Scheibe nur innerhalb des schwarzen Rings (Ring liegt bei 90–92,5 % des Radius) – kein heller Rand außen */
  border-radius: 50%; background: radial-gradient(circle closest-side, #F6F6F2 0 89.5%, transparent 90%); line-height: 0;
}
.soyka-widget .eule-bild { display: block; width: 100%; height: 100%; }
.soyka-widget .eule-auge {
  position: absolute; top: 31%; width: 22.5%; height: 22.5%;
  border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.soyka-widget .eule-auge.links { left: 27.6%; }
.soyka-widget .eule-auge.rechts { right: 27.6%; }
.soyka-widget .eule-pupille {
  width: 34%; height: 34%; border-radius: 50%; background: #000;
  will-change: transform; transition: transform 0.1s ease-out;
}
/* Nachtmodus: dieselbe Tag-Eule; außerhalb des Rings schwarz statt durchsichtig */
@media (prefers-color-scheme: dark) {
  .soyka-widget .eule { background: radial-gradient(circle closest-side, #F6F6F2 0 89.5%, #000 90%); }
}
@media (max-width: 768px) {
  .soyka-widget .eule { width: 40px; height: 40px; }
}

/* ============================================================================
   06.10.2026 (15) – Änderungen Dienstag
   ============================================================================ */

/* Nur Handy / nur Desktop (Breite) */
.soyka-widget .nur-mobil { display: none; }
@media (max-width: 768px) {
  .soyka-widget .nur-mobil { display: revert; }
  .soyka-widget .nur-desktop { display: none !important; }
}

/* Eule: schaut von sich aus nach unten (Handy immer, PC bis die Maus sich bewegt) */
.soyka-widget .eule-pupille { transform: translateY(65%); }

/* AGB-Häkchen: eigenes Kästchen, der rote Rand sitzt genau auf dem Kästchen.
   Kästchen auf Höhe der ersten Textzeile („Ich habe …“), am Handy ebenso. */
.soyka-widget .agb-checkbox { align-items: flex-start; text-align: left; }
.soyka-widget .agb-checkbox input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; flex: 0 0 18px;
  margin: calc((1.4em - 18px) / 2) 0 0;
  border: 2px solid var(--input-border); border-radius: 4px;
  background: var(--input-bg) center / 12px 12px no-repeat;
  cursor: pointer; outline: none;
  transition: border-color .2s, background-color .2s;
}
.soyka-widget #agbCheckbox:invalid { outline: none; border-color: var(--primärrot); }
.soyka-widget .agb-checkbox input[type="checkbox"]:checked {
  border-color: var(--primärgrün); background-color: var(--primärgrün);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.9 9 9.8 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.soyka-widget .agb-checkbox input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(255, 195, 0, .45); }
.soyka-widget .agb-checkbox label { font-size: 1em; }
@media (max-width: 768px) {
  .soyka-widget .agb-checkbox { flex-wrap: nowrap; justify-content: flex-start; text-align: left; }
}

/* Weißer Haken mittig im grünen Kreis (Auswahlknöpfe in den Schritten 1–4, Kacheln) */
.soyka-widget .wahl-knopf.gewaehlt .wahl-haken::after,
.soyka-widget .kachel.offen .wahl-haken::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 5px; height: 10px; margin: 0; box-sizing: border-box;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}

/* Privat: Kästen der Schritte grau umrandet wie die Eingabefelder (Knöpfe bleiben) */
.soyka-widget .schritt { border: 1px solid var(--input-border); }

/* ── Aufklappen aus dem Knopf: Felder sind normal im Fluss (kein Schweben mehr) ── */
.soyka-widget .bk-zone.bk-zone-neu {
  position: relative; top: auto; left: auto; transform: none; opacity: 1;
  width: 100%; max-width: 760px; min-height: 0; margin: 0 auto;
  padding: 22px 24px 70px; gap: 14px; cursor: default;
  box-shadow: none; transition: none;
}
.soyka-widget .bk-zone.bk-zone-neu[hidden] { display: none; }
.soyka-widget .bk-zone.bk-zone-neu:hover { background-color: var(--bg-card) !important; }
.soyka-widget .bk-zone.bk-zone-neu.dragover { background-color: var(--hover-bg) !important; border-style: dashed; }
.soyka-widget .morph-container.expanded ~ .bk-file-list,
.soyka-widget .morph-container.expanded:has(.listen-import) ~ .bk-file-list { margin-top: 8px; }
.soyka-widget .morph-container { width: 100%; justify-content: center; flex-direction: column; align-items: center; }
.soyka-widget .bk-titel { margin: 0; font-weight: 700; color: var(--hintergrundgrün); font-size: 1.05em; }
.soyka-widget .bk-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.soyka-widget .bk-option {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 18px 14px; min-height: 120px; box-sizing: border-box;
  font: inherit; text-align: center; color: var(--text-main);
  background: var(--hintergrundgrau); border: 1px dashed var(--input-border); border-radius: 14px;
  cursor: pointer; transition: border-color .2s, background-color .2s;
}
.soyka-widget .bk-option:hover, .soyka-widget .bk-option:focus-visible { border-color: var(--primärgrün); background: var(--hover-bg); outline: none; }
.soyka-widget .bk-text-option { padding: 0; border-style: dashed; cursor: default; }
.soyka-widget .bk-text-option:hover { background: var(--hintergrundgrau); }
.soyka-widget .bk-option-knopf {
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 118px;
  padding: 18px 14px; font: inherit; color: var(--text-main); background: transparent; border: 0; border-radius: 14px; cursor: pointer;
}
.soyka-widget .bk-option-knopf:hover { background: var(--hover-bg); }
.soyka-widget .bk-option svg, .soyka-widget .kachel-aktion svg {
  width: 30px; height: 30px; fill: none; stroke: var(--primärgrün); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.soyka-widget .bk-option strong, .soyka-widget .bk-option-knopf strong { color: var(--hintergrundgrün); font-size: .92em; line-height: 1.3; }
.soyka-widget .bk-option small, .soyka-widget .bk-option-knopf small { color: var(--text-secondary); font-size: .78em; }
.soyka-widget label.bk-option.bk-nur-touch { display: none; }
@media not all and (hover: hover) and (pointer: fine) {
  .soyka-widget label.bk-option.bk-nur-touch { display: flex; }
  .soyka-widget .bk-optionen { grid-template-columns: 1fr 1fr; }
  .soyka-widget .bk-optionen > label.bk-option { grid-column: 1 / -1; min-height: 0; flex-direction: row; justify-content: center; }
}
.soyka-widget .bk-text-feld { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 12px; box-sizing: border-box; }
.soyka-widget .bk-text-feld[hidden] { display: none; }
.soyka-widget .bk-text-feld textarea, .soyka-widget .kachel textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px;
  padding: 10px; font: inherit; font-size: 12.75px; line-height: 1.4;
  color: var(--text-main); background: var(--input-bg);
  border: 1px solid var(--input-border); border-radius: 8px; outline: none; transition: border-color .3s;
}
.soyka-widget .bk-text-feld textarea:focus, .soyka-widget .kachel textarea:focus { border-color: var(--primärgrün); }
.soyka-widget .bk-text-knoepfe { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.soyka-widget .bk-text-knoepfe button, .soyka-widget .kachel-hinzufuegen, .soyka-widget .kachel-aktion {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-pille); cursor: pointer;
  font: inherit; font-size: .8em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--hintergrundgrün); background: var(--hintergrundgrau);
  border: 1px solid var(--primärgrün); box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 -1px 2px rgba(0,0,0,.03);
  transition: background-color .2s, border-color .2s;
}
.soyka-widget .bk-text-knoepfe button:hover, .soyka-widget .kachel-hinzufuegen:hover, .soyka-widget .kachel-aktion:hover { background: var(--hover-bg); }
.soyka-widget .bk-text-knoepfe .bk-text-abbrechen:hover { border-color: var(--primärrot); }
.soyka-widget .kachel-aktion svg { width: 20px; height: 20px; }
.soyka-widget .bk-hinweis { color: var(--text-secondary); font-size: .8em; max-width: 34em; }
@media (max-width: 560px) {
  .soyka-widget .bk-optionen { grid-template-columns: 1fr; }
  .soyka-widget .bk-zone.bk-zone-neu { width: 100%; max-width: 100%; padding: 18px 14px 66px; }
}
/* Datei-Schildchen: Klick wählt weitere Dateien (bewusst ohne sichtbaren Hinweis) */
.soyka-widget .bk-file-tag { cursor: default; }
.soyka-widget .bk-file-tag .bk-kb { color: var(--gedaempft); }
.soyka-widget .bk-file-list:empty, .soyka-widget .bk-status:empty { display: none; }

/* ── Schule/Bibliothek: unter der Liste EINE Reihe ──
   links „Liste speichern“ · mittig „Titelliste hochladen“ · rechts „Liste löschen“.
   Aufgeklappte Felder darunter über die ganze Breite. */
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: 16px; row-gap: 14px; margin-top: 22px;
}
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol > #downloadWrapper,
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol > #uploadSection,
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #uploadMorphContainer { display: contents; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol > #downloadWrapper[style*="none"] { display: none !important; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkBtn,
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol > #downloadWrapper > #rechercheButton { grid-row: 1; grid-column: 1; justify-self: start; margin: 0; min-width: 0; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #showUploadBtn { grid-row: 1; grid-column: 2; width: auto; min-width: 280px; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol .clear-list-btn { grid-row: 1; grid-column: 3; justify-self: end; position: static; margin: 0; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkForm { grid-row: 2; grid-column: 1 / -1; margin: 0 auto; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkZone { grid-row: 3; grid-column: 1 / -1; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkFileList { grid-row: 4; grid-column: 1 / -1; justify-self: center; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkStatus { grid-row: 5; grid-column: 1 / -1; justify-self: center; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkKameraInput { display: none; }
@media (max-width: 768px) {
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol { grid-template-columns: 1fr 1fr; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #showUploadBtn { grid-column: 1 / -1; min-width: 0; width: 100%; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkBtn,
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol > #downloadWrapper > #rechercheButton { grid-row: 2; grid-column: 1; justify-self: stretch; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol .clear-list-btn { grid-row: 2; grid-column: 2; justify-self: stretch; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkForm { grid-row: 3; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkZone { grid-row: 4; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkFileList { grid-row: 5; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkStatus { grid-row: 6; }
}
.soyka-widget .link-zone { opacity: 1; transform: none; transition: none; }

/* ── Privat: Kacheln ──────────────────────────────────────────────────────── */
.soyka-widget .kacheln {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin: 26px 0 8px; align-items: stretch;
}
.soyka-widget .kachel {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--input-border); border-radius: 16px;
  padding: 18px 18px 20px; box-sizing: border-box; min-width: 0;
}
.soyka-widget .kachel[hidden], .soyka-widget .kachel-nur-mobil { display: none; }
.soyka-widget .kachel-kopf {
  display: flex; align-items: flex-start; gap: 0; padding: 0; margin: 0 0 14px;
  font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: default;
}
.soyka-widget .kachel-kopf .wahl-haken { display: none; }
.soyka-widget .kachel-kopf-text { display: flex; flex-direction: column; gap: 4px; }
.soyka-widget .kachel-kopf-text strong { color: var(--hintergrundgrün); font-size: 1.02em; line-height: 1.3; }
.soyka-widget .kachel-kopf-text small { color: var(--text-secondary); font-size: .82em; line-height: 1.4; }
.soyka-widget .kachel-inhalt { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; justify-content: center; }
.soyka-widget .kachel .kachel-zieh { color: var(--gedaempft); font-size: .78em; }
.soyka-widget .kachel-hinzufuegen { align-self: center; }
.soyka-widget #kachel-datei.dragover { border-color: var(--primärgrün); border-style: dashed; background: var(--hover-bg); }
/* Formular in der schmalen Kachel: Menge + ISBN, Titel, Preis, Hinzufügen + X untereinander */
.soyka-widget .kachel .form-container { flex-wrap: wrap; margin: 0; gap: 10px; justify-content: center; }
.soyka-widget .kachel .form-container .menge-knoepfe { flex: 0 0 auto; }
.soyka-widget .kachel .form-container .isbn-feld { flex: 1 1 140px; }
.soyka-widget .kachel .form-container .titel-feld,
.soyka-widget .kachel .form-container input#preis { flex: 1 1 100%; }
.soyka-widget .kachel .form-container #addButton { margin: 0; }
.soyka-widget .kachel .form-container .clear-btn { margin: 0; }
.soyka-widget .kachel #isbnError { width: 100%; margin: 0; }
.soyka-widget .kachel #isbnError:empty, .soyka-widget .kachel #isbnError:has(> :only-child:empty) { display: none; }
.soyka-widget .kachel .bk-file-list { width: 100%; }
/* Gewählt (Titel stehen in der Liste): nur die benutzte Kachel, volle Breite, Formular wieder in einer Zeile */
.soyka-widget .kacheln.kacheln-gewaehlt { grid-template-columns: 1fr; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel-kopf { display: none; }
.soyka-widget .kacheln.kacheln-gewaehlt #kachel-formular { background: none; border: 0; padding: 0; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container { flex-wrap: nowrap; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container .isbn-feld { flex: 1.2; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container .titel-feld { flex: 2.5 1 0; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container input#preis { flex: 0.7 1 0; }
.soyka-widget .kacheln.kacheln-gewaehlt .kachel-inhalt { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.soyka-widget .kacheln.kacheln-gewaehlt #kachel-formular .kachel-inhalt { flex-direction: column; align-items: stretch; }
.soyka-widget .kacheln.kacheln-gewaehlt #kachel-text .kachel-inhalt { flex-direction: column; align-items: stretch; }
.soyka-widget .kacheln-weitere { margin: 6px 0 4px; text-align: center; font-size: .82em; }
.soyka-widget .kacheln-weitere a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.soyka-widget .kacheln-weitere a:hover { color: var(--primärgrün); }
.soyka-widget .kacheln-weitere[hidden], .soyka-widget .liste-abgleich[hidden] { display: none; }
.soyka-widget .liste-abgleich { margin: 22px 0 6px; text-align: center; font-weight: 600; color: var(--hintergrundgrün); }
.soyka-widget[data-portal="privat"] .liste-abgleich + .error + #orderTable,
.soyka-widget[data-portal="privat"] .liste-abgleich ~ #orderTable { margin-top: 8px; }
@media (max-width: 1000px) and (min-width: 769px) {
  .soyka-widget .kacheln:not(.kacheln-gewaehlt) { grid-template-columns: 1fr; }
}
/* Handy: 4 Kacheln zum Antippen (wie die Zahlungsart-Knöpfe), eine ist offen */
@media (max-width: 768px) {
  .soyka-widget .kacheln { grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
  .soyka-widget .kachel-nur-mobil:not([hidden]) { display: flex; }
  .soyka-widget .kachel { padding: 0; border: 1px solid var(--primärgrün); border-radius: var(--radius-pille); background: var(--hintergrundgrau);
    box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 -1px 2px rgba(0,0,0,.03); overflow: hidden; }
  .soyka-widget .kachel.offen { border-radius: 22px; background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--primärgrün); }
  .soyka-widget .kachel-kopf { position: relative; width: 100%; min-height: 62px; margin: 0; padding: 14px 16px 14px 50px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .soyka-widget .kachel-kopf .wahl-haken { display: block; left: 18px; }
  .soyka-widget .kachel.offen .wahl-haken { border-color: var(--primärgrün); background: var(--primärgrün); }
  .soyka-widget .kachel-kopf-text strong { font-size: 1em; }
  .soyka-widget .kachel-inhalt { display: none; padding: 4px 16px 18px; }
  .soyka-widget .kachel.offen .kachel-inhalt { display: flex; }
  .soyka-widget .kachel .form-container { flex-direction: row; }
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel { border: 0; background: none; box-shadow: none; border-radius: 0; }
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel-inhalt { padding: 0; }
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container { flex-wrap: wrap; }
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container .titel-feld,
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container input#preis,
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel .form-container .isbn-feld { flex: 1 1 100%; }
  .soyka-widget .kachel-aktion { width: 100%; }
}

/* ── Karten am Handy (Privat): „Gesamt“, Buchschutz über dem Schalter, beides so hoch
   wie Stift und X (34 px). „Buchschutz“ bricht nicht um und ist ein Link. ── */
@media (max-width: 1100px) {
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(7)::before { content: "Gesamt (€)"; }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8) {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; min-height: 34px; justify-self: start; align-self: center;
  }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8)::before { content: none; }
  .soyka-widget[data-portal="privat"] #orderTable .bs-karten-label { display: block; font-size: .78em; font-weight: 700; line-height: 1.1; white-space: nowrap; }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8) .switch { transform: none; margin: 0 auto; width: 34px; height: 18px; flex: 0 0 auto; align-self: center; }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8) .bs-karten-label { line-height: 14px; text-align: center; }
  .soyka-widget[data-portal="privat"] #orderTable tbody td:nth-child(8) .slider:before { height: 12px; width: 12px; bottom: 3px; }
}
.soyka-widget .bs-karten-label { display: none; }
.soyka-widget a.bs-link { color: inherit; text-decoration: underline; text-decoration-color: var(--akzentgelb); text-underline-offset: 3px; }
.soyka-widget a.bs-link:hover { color: var(--primärgrün); }
/* Kachel-Kopf: kein Knopf-Aussehen (die allgemeine Knopf-Regel setzt Großbuchstaben, Rahmen, Schatten) */
.soyka-widget .kachel-kopf,
.soyka-widget .kachel-kopf:hover {
  width: 100%; text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 1em;
  border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit;
}
.soyka-widget .kachel-kopf-text.nur-mobil { display: none; }
@media (max-width: 768px) {
  .soyka-widget .kachel-kopf-text.nur-mobil { display: flex; }
  .soyka-widget .kachel-kopf-text.nur-desktop { display: none; }
  .soyka-widget #kachel-foto { order: 1; }
  .soyka-widget #kachel-datei { order: 2; }
  .soyka-widget #kachel-text { order: 3; }
  .soyka-widget #kachel-formular { order: 4; }
  .soyka-widget .kachel-kopf:active { transform: scale(.99); }
}
.soyka-widget .kachel-kopf { justify-content: flex-start; align-items: flex-start; }
.soyka-widget .kachel-kopf-text { align-items: flex-start; text-align: left; }
@media (max-width: 768px) { .soyka-widget .kachel-kopf { align-items: center; } }
/* Reihe unter der Liste: ältere Regeln (#downloadWrapper:has(#linkBtn) …) überstimmen */
.soyka-widget #uploadDownloadCol #downloadWrapper #linkBtn,
.soyka-widget #uploadDownloadCol #downloadWrapper > #rechercheButton { grid-row: 1 !important; grid-column: 1 !important; justify-self: start !important; margin: 0; }
.soyka-widget #uploadDownloadCol #downloadWrapper .clear-list-btn { grid-row: 1 !important; grid-column: 3 !important; justify-self: end !important; position: static; margin: 0; }
@media (max-width: 768px) {
  .soyka-widget #uploadDownloadCol #downloadWrapper #linkBtn,
  .soyka-widget #uploadDownloadCol #downloadWrapper > #rechercheButton { grid-row: 2 !important; grid-column: 1 !important; justify-self: stretch !important; }
  .soyka-widget #uploadDownloadCol #downloadWrapper .clear-list-btn { grid-row: 2 !important; grid-column: 2 !important; justify-self: stretch !important; }
}
.soyka-widget[data-portal="privat"] #uploadDownloadCol #downloadWrapper .clear-list-btn { grid-row: auto !important; grid-column: auto !important; }
/* Optionen in der Upload-Zone: normale Schrift statt Knopf-Großbuchstaben */
.soyka-widget .bk-option, .soyka-widget .bk-option-knopf,
.soyka-widget .bk-option:hover, .soyka-widget .bk-option-knopf:hover {
  text-transform: none; letter-spacing: normal; font-weight: 400; box-shadow: none;
}
.soyka-widget .bk-option-knopf { border-radius: 14px; }
.soyka-widget .bk-option strong, .soyka-widget .bk-option-knopf strong { font-weight: 700; }

/* ============================================================================
   NACHTMODUS neu (06.10.2026) – ruhiger, wie YouTube / Wordle / Zeit Online:
   • neutrales Grau statt grün-braun getöntem Grau (Grund #121212, Flächen #1e1e1e)
   • Akzentfarben gedämpft, aus der 70er-Palette der Bestellzeichen:
     Grün → Oliv (#A4AE6A, aus #6E7D2C), Gelb → Ocker (#E3B151), Rot → Terrakotta (#D98A6C),
     Überschriften → Sand (#D9C9A0)
   • keine Ränder an Kästen und Feldern – Flächen heben sich nur durch hellere Töne ab;
     Knöpfe behalten ihren farbigen Rand (Farbregel grün/gelb/rot)
   • keine Schatten
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  .soyka-widget {
    --primärgrün: #A4AE6A;
    --akzentgelb: #E3B151;
    --primärrot: #D98A6C;
    --hintergrundgrün: #D9C9A0;
    --hintergrundgrau: #121212;
    --bg-card: #1e1e1e;
    --input-bg: #262626;
    --input-border: transparent;
    --table-border: transparent;
    --text-main: #e8e6e3;
    --text-secondary: #a8a49e;
    --gedaempft: #7f7b75;
    --hover-bg: #2c2c2c;
    --hellgelb: #2b2519;
    --zeile-ungerade: #191919;
    --zeile-gerade: #1e1e1e;
    --tag-bg: #262820;
    --tag-border: transparent;
    --slider-bg: #3d3d3d;
    --cover-leer-bg: #2a2a2a;
    --cover-leer-rand: transparent;
    --edit-hover: rgba(255, 255, 255, 0.06);
    --border-main: 1px solid transparent;
    border-color: transparent;
    box-shadow: none;
  }
  /* Kästen ohne Rand, nur Fläche */
  .soyka-widget .customer-info-container,
  .soyka-widget .info-container,
  .soyka-widget .schritt,
  .soyka-widget .kachel,
  .soyka-widget .bk-zone,
  .soyka-widget .link-zone,
  .soyka-widget .info-panel-flow,
  .soyka-widget .bk-option,
  .soyka-widget .bk-text-option,
  .soyka-widget .modal-content,
  .soyka-widget .bk-file-tag { border-color: transparent !important; box-shadow: none !important; }
  .soyka-widget .customer-info-container,
  .soyka-widget .info-container,
  .soyka-widget .schritt,
  .soyka-widget .kachel,
  .soyka-widget .bk-zone,
  .soyka-widget .link-zone { background: var(--bg-card); }
  .soyka-widget .bk-option, .soyka-widget .bk-text-option { background: var(--input-bg); }
  .soyka-widget .schritt-details { background: #242424; }
  .soyka-widget .info-row[style*="border-top"],
  .soyka-widget .schritt-details .info-summe { border-top-color: #333 !important; }
  /* Felder: ohne Rand, beim Tippen ein dezenter Oliv-Rand */
  .soyka-widget input:not([type="checkbox"]):not([type="radio"]),
  .soyka-widget textarea,
  .soyka-widget select,
  .soyka-widget .menge-knoepfe { border-color: transparent !important; box-shadow: none !important; }
  .soyka-widget input:not([type="checkbox"]):focus,
  .soyka-widget textarea:focus { border-color: var(--primärgrün) !important; }
  .soyka-widget .agb-checkbox input[type="checkbox"] { border-color: #555; }
  .soyka-widget #agbCheckbox:invalid { border-color: var(--primärrot); }
  /* Tabelle: keine Linien, Zeilen nur durch Töne getrennt */
  .soyka-widget #orderTable, .soyka-widget #orderTable th, .soyka-widget #orderTable td { border-color: transparent !important; }
  .soyka-widget #orderTable { box-shadow: none; }
  .soyka-widget #orderTable thead th { color: var(--hintergrundgrün); }
  /* Knöpfe: farbiger Rand bleibt, keine Schatten */
  .soyka-widget button, .soyka-widget .kachel-aktion, .soyka-widget .wahl-knopf, .soyka-widget .wahl-knopf.gewaehlt { box-shadow: none !important; }
  .soyka-widget .wahl-knopf.gewaehlt { background: #23261c; }
  .soyka-widget .kachel { background: var(--bg-card); }
  .soyka-widget .eule { background: radial-gradient(circle closest-side, #F6F6F2 0 89.5%, transparent 90%); }
  .soyka-widget .cover-preview { background: #2a2a2a; }
  .soyka-widget #orderTable td.bz-cell { color: color-mix(in srgb, var(--bz-farbe) 70%, #ffffff); }
}
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .soyka-widget .kachel { background: var(--bg-card); box-shadow: none; border: 1px solid transparent; }
  .soyka-widget .kachel.offen { box-shadow: inset 0 0 0 1px var(--primärgrün) !important; }
  .soyka-widget #orderTable tbody tr { border-color: transparent; box-shadow: none; }
}

/* ── Wunschliefertermin (Schule) ─────────────────────────────────────────── */
.soyka-widget .termin-gruppe { position: relative; margin-top: 4px; }
.soyka-widget .termin-optional { font-weight: 400; color: var(--text-secondary); }
.soyka-widget .termin-knopf {
  width: 100%; padding: 9px 14px; border-radius: var(--radius-pille);
  font: inherit; font-size: .8em; font-weight: 700; letter-spacing: 1px; text-transform: none;
  color: var(--hintergrundgrün); background: var(--hintergrundgrau);
  border: 1px solid var(--akzentgelb); cursor: pointer; box-shadow: 0 2px 6px rgba(255,195,0,.15);
}
.soyka-widget .termin-knopf:hover:not(:disabled) { background: var(--hover-bg); }
.soyka-widget .termin-knopf:disabled { border-color: var(--input-border); color: var(--text-secondary); cursor: default; box-shadow: none; }
.soyka-widget .termin-knopf.gewaehlt { color: var(--text-main); }
.soyka-widget .termin-aendern { margin-left: 4px; opacity: .6; }
.soyka-widget .termin-info { display: block; margin-top: 5px; font-size: .72em; line-height: 1.35; color: var(--text-secondary); }
.soyka-widget .termin-info:empty { display: none; }
.soyka-widget .termin-zone {
  display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  padding: 14px 12px 14px; border: 1px solid var(--akzentgelb); border-radius: 18px; background: var(--bg-card);
}
.soyka-widget .termin-zone[hidden] { display: none; }
.soyka-widget .termin-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--hintergrundgrün); font-size: .9em; }
.soyka-widget .termin-nav {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; font-size: 1.2em; line-height: 1; letter-spacing: 0;
  color: var(--hintergrundgrün); background: var(--hintergrundgrau); border: 1px solid var(--input-border); box-shadow: none; cursor: pointer;
}
.soyka-widget .termin-nav:disabled { opacity: .35; cursor: default; }
.soyka-widget .termin-wochentage, .soyka-widget .termin-tage { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.soyka-widget .termin-wochentage span { text-align: center; font-size: .7em; font-weight: 700; color: var(--text-secondary); }
.soyka-widget .termin-laedt { grid-column: 1 / -1; font-size: .75em; color: var(--text-secondary); text-align: center; padding: 10px 0; }
.soyka-widget .termin-tag {
  position: relative; height: 34px; padding: 0; border-radius: 8px; letter-spacing: 0; text-transform: none;
  font: inherit; font-size: .8em; font-weight: 600; box-shadow: none; cursor: pointer;
  color: var(--text-main); background: var(--tag-bg); border: 1px solid transparent;
}
.soyka-widget .termin-tag.halb { background: linear-gradient(135deg, var(--tag-bg) 50%, var(--hover-bg) 50%); }
.soyka-widget .termin-tag.voll, .soyka-widget .termin-tag.aus { background: none; color: var(--gedaempft); text-decoration: line-through; cursor: default; }
.soyka-widget .termin-tag.aus { text-decoration: none; opacity: .5; }
.soyka-widget .termin-tag:hover:not(:disabled) { border-color: var(--primärgrün); }
.soyka-widget .termin-tag.aktiv { border-color: var(--primärgrün); }
.soyka-widget .termin-tag.gewaehlt { background: var(--primärgrün); color: #fff; }
.soyka-widget .termin-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soyka-widget .termin-slots[hidden] { display: none; }
.soyka-widget .termin-tag-text { grid-column: 1 / -1; margin: 0; font-size: .78em; font-weight: 700; color: var(--hintergrundgrün); }
.soyka-widget .termin-slot {
  padding: 8px 6px; border-radius: var(--radius-pille); font: inherit; font-size: .75em; font-weight: 700; letter-spacing: .5px; text-transform: none;
  color: var(--hintergrundgrün); background: var(--hintergrundgrau); border: 1px solid var(--primärgrün); box-shadow: none; cursor: pointer;
}
.soyka-widget .termin-slot:hover:not(:disabled) { background: var(--hover-bg); }
.soyka-widget .termin-slot.gewaehlt { background: var(--primärgrün); color: #fff; }
.soyka-widget .termin-slot:disabled { border-color: var(--input-border); color: var(--gedaempft); text-decoration: line-through; cursor: default; }
.soyka-widget .termin-hinweis { font-size: .7em; line-height: 1.4; color: var(--text-secondary); text-align: center; }
.soyka-widget .termin-zone-knoepfe { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.soyka-widget .termin-zone .termin-schliessen { position: static; transform: none; padding: 8px 18px; font-size: .72em; border-color: var(--akzentgelb); }
.soyka-widget .termin-zone .termin-schliessen:hover { border-color: var(--primärrot); }
.soyka-widget .termin-ohne {
  padding: 8px 14px; border-radius: var(--radius-pille); font: inherit; font-size: .72em; font-weight: 700; letter-spacing: .5px; text-transform: none;
  color: var(--hintergrundgrün); background: var(--hintergrundgrau); border: 1px solid var(--primärrot); box-shadow: none; cursor: pointer;
}
.soyka-widget .termin-ohne:hover { background: var(--hover-bg); }
/* Privat: hochgeladene Dateien und Fortschritt der Erkennung unter den Kacheln (immer sichtbar) */
.soyka-widget .kacheln-dateien { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.soyka-widget .kacheln-dateien .bk-file-list { max-width: 420px; width: 100%; }
@media (max-width: 768px) {
  .soyka-widget #uploadDownloadCol #linkBtn,
  .soyka-widget #uploadDownloadCol .clear-list-btn { padding: 12px 8px; letter-spacing: .5px; white-space: nowrap; font-size: .78em; min-width: 0; width: 100%; }
}
@media (prefers-color-scheme: dark) {
  .soyka-widget .wahl-haken { border-color: #5a5a5a; }
  .soyka-widget .wahl-knopf.gewaehlt .wahl-haken, .soyka-widget .kachel.offen .wahl-haken { border-color: var(--primärgrün); }
}

/* ============================================================================
   06.10.2026 (16) – Änderungen Dienstag 2
   ============================================================================ */
/* Lupe beim Durchsuchen: halb so groß */
.soyka-widget .lupe-buehne { width: 140px; height: 100px; }
.soyka-widget .lupe-karte { max-width: 340px; padding: 12px 12px 10px; }
.soyka-widget .lupe-linse { border-width: 3px; }
.soyka-widget .lupe-glas::after { min-height: 5px; }
.soyka-widget .lupe-text { font-size: .85em; }

/* Mobil im Shop: Formular immer über die ganze Bildschirmbreite (wie „Shop-Rahmen aus“) –
   bricht aus der Inhaltsspalte von Gambio aus, ohne Rand und Ecken */
@media (max-width: 768px) {
  .soyka-widget {
    width: 100vw; max-width: 100vw;
    margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
  }
}

/* „Besonderheiten / Wünsche“: eine halbe Knopfhöhe Abstand zu „Titelliste hochladen“ (06.10.2026) */
.soyka-widget .wunsch-row { margin-top: 22px; }
.soyka-widget .schritt .wunsch-row { margin-top: 46px; }

/* ── Schule/Bibliothek: Reihe 1 = Liste speichern (links) · Liste löschen (rechts),
      Reihe 2 = Titelliste hochladen (mittig). „Liste speichern“ klappt links auf. ── */
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
.soyka-widget #uploadDownloadCol #downloadWrapper #linkBtn,
.soyka-widget #uploadDownloadCol #downloadWrapper > #rechercheButton { grid-row: 1 !important; grid-column: 1 !important; justify-self: start !important; }
.soyka-widget #uploadDownloadCol #downloadWrapper .clear-list-btn { grid-row: 1 !important; grid-column: 2 !important; justify-self: end !important; align-self: start; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkForm { grid-row: 1 !important; grid-column: 1 !important; justify-self: start !important; margin: 0 !important; width: 100%; max-width: 520px; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #showUploadBtn { grid-row: 2 !important; grid-column: 1 / -1 !important; justify-self: center; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkZone { grid-row: 3 !important; grid-column: 1 / -1 !important; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkFileList { grid-row: 4 !important; grid-column: 1 / -1 !important; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkStatus { grid-row: 5 !important; grid-column: 1 / -1 !important; }
@media (max-width: 768px) {
  .soyka-widget #uploadDownloadCol #downloadWrapper #linkBtn,
  .soyka-widget #uploadDownloadCol #downloadWrapper > #rechercheButton,
  .soyka-widget #uploadDownloadCol #downloadWrapper .clear-list-btn { justify-self: stretch !important; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #linkForm { grid-row: 2 !important; grid-column: 1 / -1 !important; max-width: none; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #showUploadBtn { grid-row: 3 !important; width: 100%; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkZone { grid-row: 4 !important; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkFileList { grid-row: 5 !important; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol #bkStatus { grid-row: 6 !important; }
}

/* Upload- und Speichern-Zone: Optionen mit durchgehender Linie */
.soyka-widget .bk-option, .soyka-widget .bk-text-option { border-style: solid !important; }
/* „Liste speichern“ im Aussehen von „Titelliste hochladen“ (Rand gelb wie sein Knopf) */
.soyka-widget .link-zone.link-zone-neu {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 20px 70px; border: 1px solid var(--akzentgelb); border-radius: var(--radius-pille);
  background: var(--bg-card); box-shadow: none; text-align: center;
}
.soyka-widget .link-zone.link-zone-neu[hidden] { display: none; }
.soyka-widget .link-zone-neu .bk-optionen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.soyka-widget .link-zone-neu .bk-option,
.soyka-widget .link-zone-neu #rechercheButton {
  min-width: 0; width: auto; margin: 0; border: 1px solid var(--input-border); border-radius: 14px;
  background: var(--hintergrundgrau); color: var(--text-main); box-shadow: none;
  font-size: 1em; font-weight: 400; letter-spacing: normal; text-transform: none; padding: 16px 12px; min-height: 0;
}
.soyka-widget .link-zone-neu .bk-option:hover, .soyka-widget .link-zone-neu #rechercheButton:hover { border-color: var(--akzentgelb); background: var(--hover-bg); }
.soyka-widget .link-zone-neu .bk-option svg { stroke: var(--akzentgelb); }
.soyka-widget .link-zone-neu .bk-option:disabled { opacity: .5; cursor: progress; }
.soyka-widget .link-zone-neu .link-adresse { font-size: .8em; }
.soyka-widget .link-zone-neu .link-adresse[hidden] { display: none; }
.soyka-widget .link-zone-neu .link-schliessen { border-color: var(--akzentgelb); }
.soyka-widget .link-zone-neu .link-schliessen:hover { border-color: var(--primärrot); }

/* „Liste fotografieren“: Kamera über dem Text wie bei den anderen Optionen */
@media not all and (hover: hover) and (pointer: fine) {
  .soyka-widget .bk-optionen > label.bk-option { flex-direction: column !important; justify-content: flex-start; }
}

/* Wunschtermin: eine Eingabe → grün */
.soyka-widget .termin-knopf { border-color: var(--primärgrün); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.soyka-widget .termin-zone { border-color: var(--primärgrün); }
.soyka-widget .termin-zone .termin-schliessen { border-color: var(--primärgrün); }
.soyka-widget .termin-zone .termin-schliessen:hover { border-color: var(--primärrot); }
/* „0 von 3 Wunschterminen gewählt“ – über dem Monat, deutlich (06.10.2026) */
.soyka-widget .termin-zaehler { display: block; font-size: .9em; font-weight: 700; color: var(--hintergrundgrün); text-align: center; letter-spacing: .2px; }
.soyka-widget .termin-zaehler:empty { display: none; }

/* ── Schule/Bibliothek: Angebot · Bestellung · Eilbestellung, Wunschtermin, AGB, Absenden ── */
.soyka-widget .auftragsart { width: 90%; max-width: 1200px; margin: 22px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.soyka-widget .auftragsart .wahl-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; }
.soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.soyka-widget .auftrag-termin { width: 100%; max-width: 420px; }
.soyka-widget .auftrag-termin[hidden] { display: none; }
.soyka-widget .auftrag-termin .termin-gruppe > label { text-align: center; }
.soyka-widget .auftrag-termin .termin-knopf { font-size: .85em; padding: 12px 18px; }
.soyka-widget .auftrag-termin .termin-info { text-align: center; }
.soyka-widget .export-container #absendenKnopf {
  border: 1px solid var(--primärgrün); min-width: 260px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 -1px 2px rgba(0,0,0,.03);
}
.soyka-widget .export-container #absendenKnopf:hover { background-color: var(--hover-bg); }
@media (max-width: 768px) {
  .soyka-widget .auftragsart { width: 94%; }
  .soyka-widget .auftragsart .wahl-drei, .soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) { grid-template-columns: 1fr; }
  .soyka-widget .export-container #absendenKnopf { min-width: 0; width: 94% !important; max-width: 360px; margin-left: auto !important; margin-right: auto !important; }
}

/* ── Privat Desktop: drei Kacheln untereinander über die volle Breite ── */
@media (min-width: 769px) {
  .soyka-widget .kacheln, .soyka-widget .kacheln:not(.kacheln-gewaehlt) { grid-template-columns: 1fr; }
  .soyka-widget .kachel .form-container { flex-wrap: nowrap; }
  .soyka-widget .kachel .form-container .menge-knoepfe { flex: 0 0 auto; }
  .soyka-widget .kachel .form-container .isbn-feld { flex: 1.2 1 0; }
  .soyka-widget .kachel .form-container .titel-feld { flex: 2.5 1 0; }
  .soyka-widget .kachel .form-container input#preis { flex: 0.7 1 0; }
  .soyka-widget #kachel-datei .kachel-inhalt { flex-direction: row; justify-content: center; gap: 14px; }
  .soyka-widget #kachel-text .kachel-inhalt { align-items: stretch; }
  .soyka-widget #kachel-text textarea { min-height: 90px; }
  .soyka-widget .kachel-kopf { margin-bottom: 12px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   06.10.2026 (17) – Änderungen Dienstag 3
   ════════════════════════════════════════════════════════════════════════════ */

/* Kalender: nur ganze Tage. Gewählt sieht aus wie die gewählte Wahl bei Privat
   (grüner Doppelrand, heller Grund) – ohne Haken */
.soyka-widget .termin-tag {
  height: 36px; border-radius: 10px; font-weight: 600;
  color: var(--text-main); background: var(--input-bg); border: 1px solid var(--input-border);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.soyka-widget .termin-tag.frei:hover:not(:disabled) { border-color: var(--primärgrün); background: var(--hover-bg); }
.soyka-widget .termin-tag.gewaehlt,
.soyka-widget .termin-tag.gewaehlt:hover:not(:disabled) {
  color: var(--hintergrundgrün); background: var(--tag-bg); border-color: var(--primärgrün);
  box-shadow: inset 0 0 0 1px var(--primärgrün), 0 2px 8px rgba(31, 116, 5, .12); font-weight: 700;
}
.soyka-widget .termin-tag.aus, .soyka-widget .termin-tag:disabled {
  background: none; border-color: transparent; color: var(--gedaempft); text-decoration: none; opacity: .45; cursor: default;
}
/* 13.10.2026: Berliner Schulferien und Feiertage - leichter grüner Strich im unteren Viertel des Tages (14.10.2026).
   Der Strich reicht über den Zwischenraum (5px), so dass er sich über mehrere Tage durchzieht. */
.soyka-widget .termin-tag.mk-ferien, .soyka-widget .termin-tag.mk-feiertag { position: relative; }
.soyka-widget .termin-tag.mk-ferien::after, .soyka-widget .termin-tag.mk-feiertag::after {
  content: ''; position: absolute; left: -3px; right: -3px; top: 78%; height: 3px; margin-top: 0;
  background: rgba(46, 160, 67, .45); border-radius: 2px; pointer-events: none;
}
.soyka-widget .termin-tag.mk-feiertag::after { background: rgba(46, 160, 67, .8); }
.soyka-widget .termin-tag.mk-ferien.aus, .soyka-widget .termin-tag.mk-feiertag.aus { opacity: .75; }
/* Pfeile „voriger/nächster Monat“ genau mittig */
.soyka-widget .termin-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 0; padding: 0 0 2px; font-size: 1.25em; line-height: 1;
}
.soyka-widget .termin-knopf .termin-optional { font-weight: 400; letter-spacing: 0; color: var(--text-secondary); }
.soyka-widget .termin-knopf.gewaehlt .termin-optional { display: none; }
@media (prefers-color-scheme: dark) {
  .soyka-widget .termin-tag { border-color: transparent; }
  .soyka-widget .termin-tag.gewaehlt, .soyka-widget .termin-tag.gewaehlt:hover:not(:disabled) { background: #23261c; }
}

/* Angebot · Bestellung · Eilbestellung: ohne Haken-Kreis, Text mittig */
.soyka-widget .auftragsart .wahl-haken { display: none; }
.soyka-widget .auftragsart .wahl-knopf { padding: 14px 18px; align-items: center; text-align: center; }

/* Kundendaten (Schule/Bibliothek): Felder gleichmäßig über die Höhe des Kastens */
.soyka-widget .customer-info-container { justify-content: space-evenly; }
.soyka-widget .customer-info-container > .input-group { margin: 0; }

/* Hinweis „Bitte geben Sie zuerst …“ mittig unter dem Titelfeld */
.soyka-widget #isbnError { text-align: center; }
.soyka-widget .kachel #isbnError { padding: 0 12px; }

/* Nachtmodus: Kundenfelder heben sich vom Kasten ab (wie die Felder der Tabelleneingabe) */
@media (prefers-color-scheme: dark) {
  .soyka-widget .customer-info-container input:not([type="checkbox"]):not([type="radio"]),
  .soyka-widget .customer-info-container textarea,
  .soyka-widget .customer-info-container select,
  .soyka-widget .customer-info-container .termin-knopf { background-color: #333331; }
  .soyka-widget .customer-info-container input::placeholder { color: #8a8a86; }
}
/* Nachtmodus Handy (Privat): nach dem ersten Titel keinen eckigen Rahmen um die Eingabe */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  .soyka-widget .kacheln.kacheln-gewaehlt .kachel.offen { box-shadow: none !important; border-color: transparent; }
}

/* 06.10.2026 (18): Privat „Bücherzettel als Datei hochladen“ – Knopf mittig, „hierher ziehen“ darunter */
.soyka-widget #kachel-datei .kachel-inhalt { flex-direction: column !important; align-items: center !important; justify-content: center; gap: 6px !important; }
.soyka-widget #kachel-datei .kachel-zieh { text-align: center; }

/* ── 06.10.2026 (19): Titelzeile Schule/Bibliothek – Menge und Preis etwas schmaler, ISBN etwas breiter ── */
@media (min-width: 769px) {
  .soyka-widget:not([data-portal="privat"]) .form-container input#anzahl { flex: 0.5; }
  .soyka-widget:not([data-portal="privat"]) .form-container .isbn-feld { flex: 1.45; }
  .soyka-widget:not([data-portal="privat"]) .form-container input#preis { flex: 0.6; }
}

/* ISBN-Feld: wechselnder Hinweis ISBN → EAN → Artikelnummer (wie „Autor*in / Titel“ ↔ „Suchen …“).
   Je Text 0,5 s ein, 3 s stehen, 0,5 s aus (Zyklus 12 s); weg beim Anklicken oder mit Inhalt. */
.soyka-widget .isbn-hinweis {
  position: absolute; left: 13px; right: 10px; top: 50%; transform: translateY(-50%);
  height: 1.3em; font-size: 0.9em; color: #757575; pointer-events: none; overflow: hidden; white-space: nowrap;
}
.soyka-widget .isbn-hinweis span { position: absolute; left: 0; top: 0; opacity: 0; animation: soyka-hinweis3 12s linear infinite both; }
.soyka-widget .isbn-hinweis span:nth-child(2) { animation-delay: 4s; }
.soyka-widget .isbn-hinweis span:nth-child(3) { animation-delay: 8s; }
@keyframes soyka-hinweis3 {
  0%      { opacity: 0; }
  4.17%   { opacity: 1; }
  29.17%  { opacity: 1; }
  33.33%  { opacity: 0; }
  100%    { opacity: 0; }
}
.soyka-widget .isbn-feld input:focus ~ .isbn-hinweis,
.soyka-widget .isbn-feld input:not(:placeholder-shown) ~ .isbn-hinweis { display: none; }
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .isbn-hinweis span { animation: none; }
  .soyka-widget .isbn-hinweis span:first-child { opacity: 1; }
}
@media (prefers-color-scheme: dark) { .soyka-widget .isbn-hinweis { color: var(--gedaempft); } }

/* ── 06.10.2026 (19): Privat Desktop – drei Wege deutlich als Auswahl ──────────────────────
   Leichter Rahmen (auf manchen Bildschirmen war die Kachel kaum vom Hintergrund zu unterscheiden),
   Überschriften mittig, alle Kacheln gleich hoch (so hoch wie „Datei hochladen“),
   „oder“ zwischen den Kacheln: man wählt einen der drei Wege. */
@media (min-width: 769px) {
  .soyka-widget .kacheln:not(.kacheln-gewaehlt) { grid-auto-rows: 1fr; gap: 30px; }
  .soyka-widget .kachel {
    border-color: #c4c9c0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  }
  .soyka-widget .kachel-kopf { justify-content: center; align-items: center; width: 100%; }
  .soyka-widget .kachel-kopf-text { align-items: center; text-align: center; }
  .soyka-widget .kacheln:not(.kacheln-gewaehlt) #kachel-datei::before,
  .soyka-widget .kacheln:not(.kacheln-gewaehlt) #kachel-text::before {
    content: 'oder'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%);
    font-size: .8em; font-weight: 600; letter-spacing: .5px; color: var(--gedaempft); pointer-events: none;
  }
  .soyka-widget #kachel-text textarea { min-height: 0; height: 52px; resize: vertical; }
}
/* Text einfügen: „Hinzufügen“ erst, wenn etwas eingetragen ist */
.soyka-widget .kachel-hinzufuegen[hidden] { display: none; }
@media (max-width: 768px) { .soyka-widget #kachel-text textarea { min-height: 110px; } }

/* ── 06.10.2026 (20) ───────────────────────────────────────────────────────── */
/* „Besonderheiten / Wünsche“ (Schule/Bibliothek, Runde 6c): unten im Kundenkasten, Felder enger
   zusammen; zwei Zeilen hoch, grauer Rand wie die anderen Felder, wächst beim Schreiben (JS wunschHoehe). */
.soyka-widget:not([data-portal="privat"]) .customer-info-container { justify-content: flex-start; gap: 12px; }
.soyka-widget .customer-info-container .input-group label { margin-bottom: 4px; }
.soyka-widget .wunsch-kasten textarea {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: .8em; line-height: 1.35;
  padding: 10px; border: 1px solid var(--input-border); border-radius: 8px;
  background: var(--input-bg); color: var(--text-main);
  resize: none; overflow-y: auto; outline: none; transition: border-color .3s;
}
.soyka-widget .wunsch-kasten textarea:focus { border-color: var(--primärgrün); }
/* Wunschtermin-Knopf ist ein Flex-Container – ohne gap kleben „wählen“, „(optional)“ und „▼“ zusammen */
.soyka-widget .termin-knopf { column-gap: .35em; }

/* Titelzeile bei mittlerer Breite (769–1100 px, z. B. halber Bildschirm): Platzhalter
   „Menge“, „Preis (€)“, „Bestellzeichen“ nicht mehr abgeschnitten – feste Mindestbreiten,
   weniger Innenabstand, der Rest geht an „Autor*in / Titel“. */
@media (max-width: 1100px) and (min-width: 769px) {
  .soyka-widget .form-container { gap: 6px; }
  .soyka-widget .form-container input { padding-left: 8px; padding-right: 8px; }
  .soyka-widget[data-portal] .form-container > input#anzahl { flex: 0 0 72px; }
  .soyka-widget[data-portal] .form-container > input#preis { flex: 0 0 78px; }
  .soyka-widget[data-portal] .form-container > input#bestellzeichen { flex: 0 0 112px; }
  .soyka-widget[data-portal] .form-container > .isbn-feld { flex: 1 1 0; min-width: 88px; }
  .soyka-widget .form-container #addButton { padding-left: 16px !important; padding-right: 16px !important; letter-spacing: 1px; }
}

/* Handy (Schule/Bibliothek wie Privat): „Hinzufügen“ und das X nebeneinander, Felder volle Breite */
@media (max-width: 768px) {
  .soyka-widget .form-container { flex-direction: row; justify-content: center; }
  .soyka-widget .form-container > .isbn-feld,
  .soyka-widget .form-container > .titel-feld { flex: 1 1 100%; width: 100%; }
  .soyka-widget .form-container > #addButton { flex: 0 1 auto; margin: 0; }
  .soyka-widget .form-container > .clear-btn { align-self: center; margin: 0; }
}


/* ── 06.10.2026 (20) Runde 6d: Angebot · Bestellung · Eilbestellung · Wunschtermin großgeschrieben
   wie HINZUFÜGEN / TITELLISTE HOCHLADEN; der Bereich erscheint erst mit dem ersten Titel oder Upload ── */
.soyka-widget .auftragsart[hidden] { display: none; }
.soyka-widget .auftragsart.auftragsart-neu { animation: auftragsart-ein .35s ease-out; }
@keyframes auftragsart-ein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.soyka-widget .auftragsart .wahl-knopf strong { text-transform: uppercase; letter-spacing: 1.5px; }
.soyka-widget .auftrag-termin .termin-knopf { letter-spacing: 1.5px; }
.soyka-widget .auftrag-termin .termin-knopf .termin-optional { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .soyka-widget .auftragsart.auftragsart-neu { animation: none; } }
/* Runde 6e: AGB und ABSENDEN erst nach der Wahl Angebot / Bestellung / Eilbestellung */
.soyka-widget .agb-checkbox[hidden], .soyka-widget .export-container[hidden] { display: none !important; }
/* Runde 6f (Schule/Bibliothek): AGB-Zeile mittig – Kästchen + „Ich habe …“ als eine zentrierte Zeile,
   Datenschutz-Hinweis zentriert darunter. Mehr Luft (ca. ⅓ Knopfhöhe) über Angebot · Bestellung · Eil. */
.soyka-widget:not([data-portal="privat"]) .agb-checkbox { display: block; text-align: center; }
.soyka-widget:not([data-portal="privat"]) .agb-checkbox input[type="checkbox"] { display: inline-block; vertical-align: -3px; margin: 0 3px 0 0; }
.soyka-widget:not([data-portal="privat"]) .agb-checkbox label { display: inline; }
.soyka-widget:not([data-portal="privat"]) .agb-checkbox .datenschutz-hinweis { display: block; text-align: center; }
.soyka-widget .auftragsart { margin-top: 37px; }
/* Runde 6g: Menge ohne Zahlen-Pfeile (Schule/Bibliothek; Privat hat − / +) */
.soyka-widget .form-container input#anzahl { -moz-appearance: textfield; appearance: textfield; }
.soyka-widget .form-container input#anzahl::-webkit-inner-spin-button,
.soyka-widget .form-container input#anzahl::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Runde 6j: Kundenkasten und Auftragsdetails mit denselben Ecken wie die Eingabefelder (8 px) */
.soyka-widget .customer-info-container,
.soyka-widget .info-container { border-radius: 8px; }
/* Runde 6k – Handy/schmal (Schule/Bibliothek): Menge kompakt neben ISBN, Preis neben Bestellzeichen,
   Titel volle Breite (wie Privat). Vorher stand „− 1 +“ links in einem breiten Kasten. */
@media (max-width: 768px) {
  .soyka-widget:not([data-portal="privat"]) .form-container { gap: 10px; }
  .soyka-widget:not([data-portal="privat"]) .form-container > .menge-knoepfe { flex: 0 0 auto; width: auto; align-self: stretch; grid-template-columns: 40px 2.4em 40px; }
  .soyka-widget:not([data-portal="privat"]) .form-container > input#anzahl { flex: 0 0 76px !important; width: 76px !important; }
  .soyka-widget:not([data-portal="privat"]) .form-container > .isbn-feld { flex: 1 1 0; width: auto; min-width: 0; }
  .soyka-widget:not([data-portal="privat"]) .form-container > input#preis { flex: 1 1 0 !important; width: auto !important; min-width: 80px; }
  /* Schule: Preis + Bestellzeichen teilen sich eine Zeile, „Hinzufügen“ rutscht darunter */
  .soyka-widget:not([data-portal="privat"]) .form-container > input#bestellzeichen { flex: 1 1 calc(50% - 5px) !important; width: auto !important; min-width: 0; }
}
/* Runde 6k – groß: Angebot · Bestellung · Eilbestellung je höchstens so breit wie „Titelliste hochladen“ (280 px) */
.soyka-widget .auftragsart .wahl-drei { max-width: calc(3 * 280px + 2 * 12px); }
.soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) { max-width: calc(2 * 280px + 12px); }

/* Runde 6l: Wunschtermin-Knopf (eingeklappt) so breit wie die Knöpfe darüber (280 px), der aufgeklappte
   Kalender behält seine Breite; ABSENDEN etwas schmaler. */
.soyka-widget .auftrag-termin .termin-knopf { max-width: 280px; margin-left: auto; margin-right: auto; }
@media (min-width: 769px) {
  .soyka-widget .export-container #absendenKnopf { min-width: 200px; width: 200px; }
}


/* ============================================================================
   07.10.2026 (21) – Änderungen Mittwoch
   ============================================================================ */
/* Auftragsdetails: mehr Luft unter der Überschrift, Zeilen (Gesamtmenge …) sitzen unten im Kasten */
.soyka-widget .dual-container .info-container > h3 { margin-bottom: auto; padding-bottom: 18px; }

/* ANGEBOT · BESTELLUNG · EILBESTELLUNG und ABSENDEN: gelb umrandet, Größe wie „Angebot anfordern“ /
   „Bestellung beauftragen“ im Shop (soyka-berlin.de/de/info/bibliotheken.html: 12px 28px, Pille, 1.5px Sperrung).
   Der frühere Untertitel steht im ⓘ und erscheint beim Darüberfahren. */
.soyka-widget .auftragsart .wahl-drei,
.soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: none;
}
.soyka-widget .auftragsart .wahl-knopf {
  flex-direction: row; align-items: center; justify-content: center; gap: 9px;
  min-height: 0; width: auto; padding: 12px 28px;
  background-color: var(--hintergrundgrau); color: var(--hintergrundgrün);
  border: 1px solid var(--akzentgelb); border-radius: var(--radius-pille);
  font-size: 0.85em; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .auftragsart .wahl-knopf strong { font-size: 1em; font-weight: 700; letter-spacing: 1.5px; color: inherit; }
.soyka-widget .auftragsart .wahl-knopf:hover {
  background-color: var(--hover-bg); border-color: var(--akzentgelb);
  box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04);
}
/* Gewählt: hellgelb hinterlegt, Rand kräftiger */
.soyka-widget .auftragsart .wahl-knopf.gewaehlt,
.soyka-widget .auftragsart .wahl-knopf.gewaehlt:hover {
  background-color: rgba(255,195,0,0.18); border-color: var(--akzentgelb);
  box-shadow: inset 0 0 0 1px var(--akzentgelb), 0 2px 8px rgba(255,195,0,0.3);
}
/* ⓘ mit Hinweis beim Darüberfahren (bzw. wenn der Knopf per Tastatur den Fokus hat) */
.soyka-widget .auftrag-info {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 16px; height: 16px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 50%;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; font-size: 11px; line-height: 1;
  letter-spacing: 0; text-transform: none; opacity: .7; cursor: help;
}
.soyka-widget .auftrag-info:hover { opacity: 1; }
.soyka-widget .auftrag-info::after {
  content: attr(data-info);
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 10px; border-radius: 6px;
  background: var(--hintergrundgrün); color: #fff;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.3;
  letter-spacing: 0; text-transform: none; box-shadow: 0 3px 10px rgba(0,0,0,0.15);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; z-index: 20;
}
.soyka-widget .auftrag-info::before {
  content: ''; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--hintergrundgrün);
  opacity: 0; visibility: hidden; transition: opacity .15s; z-index: 20;
}
.soyka-widget .auftrag-info:hover::after, .soyka-widget .auftrag-info:hover::before,
.soyka-widget .auftragsart .wahl-knopf:focus-visible .auftrag-info::after,
.soyka-widget .auftragsart .wahl-knopf:focus-visible .auftrag-info::before { opacity: 1; visibility: visible; }
/* ABSENDEN: ebenfalls gelb, Breite nach Inhalt wie die Knöpfe im Shop */
.soyka-widget .export-container #absendenKnopf {
  border: 1px solid var(--akzentgelb);
  box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03);
}
.soyka-widget .export-container #absendenKnopf:hover { box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04); }
@media (min-width: 769px) {
  .soyka-widget .export-container #absendenKnopf { min-width: 0; width: auto; }
}
@media (max-width: 768px) {
  .soyka-widget .auftragsart .wahl-drei,
  .soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) { flex-direction: column; align-items: stretch; gap: 12px; max-width: 360px; margin: 0 auto; }
  .soyka-widget .auftragsart .wahl-knopf { width: 100%; }
  /* Am Handy keinen schwebenden Hinweis (kein Darüberfahren) – ein Tipp wählt den Knopf */
  .soyka-widget .auftrag-info::after, .soyka-widget .auftrag-info::before { display: none; }
}
@media (prefers-color-scheme: dark) {
  .soyka-widget .auftragsart .wahl-knopf.gewaehlt, .soyka-widget .auftragsart .wahl-knopf.gewaehlt:hover { background-color: rgba(255,195,0,0.14); }
}
/* 07.10.2026 (21b): die drei Auftragsknöpfe gleich breit (so breit wie EILBESTELLUNG),
   gewählt grau statt gelb hinterlegt, ABSENDEN etwas größer */
.soyka-widget .auftragsart .wahl-drei,
.soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; max-width: 100%;
}
.soyka-widget .auftragsart .wahl-knopf.gewaehlt,
.soyka-widget .auftragsart .wahl-knopf.gewaehlt:hover {
  background-color: #dcdcd6;
  box-shadow: inset 0 0 0 1px var(--akzentgelb), 0 2px 8px rgba(255,195,0,0.25);
}
.soyka-widget .export-container #absendenKnopf { padding: 15px 42px; font-size: 0.95em; }
@media (max-width: 768px) {
  .soyka-widget .auftragsart .wahl-drei,
  .soyka-widget .auftragsart .wahl-drei:not(:has(> :nth-child(3))) { grid-auto-flow: row; width: 100%; max-width: 360px; }
}
@media (prefers-color-scheme: dark) {
  .soyka-widget .auftragsart .wahl-knopf.gewaehlt, .soyka-widget .auftragsart .wahl-knopf.gewaehlt:hover { background-color: #3a3a34; }
}
/* 07.10.2026 (21c): ABSENDEN in derselben Schrift wie alle Knöpfe (12,75 px wie im Shop), größer nur über den Innenabstand;
   weichere Übergänge beim Wählen und beim ⓘ-Hinweis */
.soyka-widget .export-container #absendenKnopf { font-size: 0.85em; padding: 16px 46px; }
.soyka-widget .auftragsart .wahl-knopf { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .1s; }
.soyka-widget .auftrag-info::after { transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.soyka-widget .auftrag-info::before { transition: opacity .2s ease, visibility .2s; }
.soyka-widget .auftrag-info:hover::after,
.soyka-widget .auftragsart .wahl-knopf:focus-visible .auftrag-info::after { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .soyka-widget .auftragsart .wahl-knopf, .soyka-widget .auftrag-info::after, .soyka-widget .auftrag-info::before { transition: none; }
}
/* 07.10.2026 (21d): Solange AGB/ABSENDEN noch nicht da sind, eine Knopfhöhe Luft unter
   ANGEBOT · BESTELLUNG · EILBESTELLUNG bis zur unteren Kante (gleitet mit beim Einblenden) */
.soyka-widget .auftragsart { transition: margin-bottom .38s cubic-bezier(.2,.8,.2,1); }
.soyka-widget .auftragsart:has(~ .export-container[hidden]) { margin-bottom: 44px; }
@media (prefers-reduced-motion: reduce) { .soyka-widget .auftragsart { transition: none; } }
/* 07.10.2026 (21e): Privat – wächst das Feld „Text einfügen“, wächst nur seine Kachel; die anderen
   behalten ihre gemeinsame Höhe (--kachel-h, von formular.js gemerkt) */
@media (min-width: 769px) {
  .soyka-widget .kacheln.text-waechst:not(.kacheln-gewaehlt) { grid-auto-rows: auto; }
  .soyka-widget .kacheln.text-waechst:not(.kacheln-gewaehlt) .kachel { min-height: var(--kachel-h, 0); }
}

/* ============================================================================
   07.10.2026 (22) – Änderungen Mittwoch 2
   ============================================================================ */
/* ABSENDEN (Schule/Bibliothek) so breit wie ANGEBOT · BESTELLUNG · EILBESTELLUNG (--eab-breite misst formular.js) */
@media (min-width: 769px) {
  .soyka-widget .export-container #absendenKnopf {
    width: var(--eab-breite, 280px); min-width: 0; padding-left: 12px; padding-right: 12px; box-sizing: border-box;
  }
}
/* Listen-Import: Hinweis „… nicht gefunden oder unklar gelesen“ steht jetzt über dem ersten Titel */
.soyka-widget .import-hilfe .import-fehlt { margin: 0 0 12px; }
/* ISBN-Feld: eine ISBN mit Strichen (978-3-551-55922-7) passt ganz hinein.
   Am Rechner (ohne Barcode-Knopf) kein Platz mehr rechts für den Knopf freihalten; Mindestbreite. */
@media (hover: hover) and (pointer: fine) {
  .soyka-widget .isbn-feld:has(.barcode-btn) input#isbn { padding-right: 10px; }
}
@media (min-width: 769px) {
  .soyka-widget .form-container .isbn-feld,
  .soyka-widget[data-portal] .form-container > .isbn-feld { min-width: 150px; }
}
/* Hinweis im ISBN-Feld fest „ISBN/Artikelnr.“ (kein Wechsel ISBN → EAN → Artikelnummer mehr) */
.soyka-widget .isbn-hinweis span { position: static; opacity: 1; animation: none; }
/* Privat nach dem Listen-Import (Foto / Datei / Text): oben die gewählte Kachel als weißes Feld,
   darunter „Bitte gleichen Sie … ab.“ und die Eingabezeile wie bei „Bücher einzeln hinzufügen“.
   Datei/Foto: Datei · „✓ 12 Titel übernommen“, darunter mittig „Weitere Dateien hochladen“.
   Text: Textfeld, darunter Datei · „✓ … Titel übernommen“. */
.soyka-widget .kachel-datei-knopf { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.soyka-widget .kacheln.kacheln-gewaehlt #kachel-formular { order: 9; }
.soyka-widget .kacheln.kacheln-gewaehlt > .liste-abgleich { order: 8; margin: 4px 0 0; }
.soyka-widget .kacheln.kacheln-mit-import { gap: 14px; }
.soyka-widget .kacheln-mit-import .kachel-import {
  background: var(--bg-card); border: 1px solid var(--input-border); border-radius: 16px; padding: 14px 18px;
}
.soyka-widget .kacheln-mit-import .kachel-import .kachel-inhalt { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; }
.soyka-widget .kacheln-mit-import .kachel-import .kachel-inhalt > .bk-file-list { margin-top: 10px; }
.soyka-widget .kacheln-mit-import #kachel-text.kachel-import .kachel-inhalt { align-items: stretch !important; }
.soyka-widget .kacheln-mit-import .kachel-import .kachel-zieh { display: none; }
.soyka-widget .kacheln-mit-import .kachel-import .bk-file-list { margin: 0; width: auto; max-width: 100%; align-items: center; }
.soyka-widget .kacheln-mit-import #kachel-text.kachel-import .bk-file-list { align-items: center; align-self: center; }
.soyka-widget .kacheln-mit-import .kachel-import .bk-file-list:empty { display: none; }
.soyka-widget .kacheln-mit-import .kachel-import .bk-file-tag { font-size: .82em; padding: 5px 9px; gap: 10px; max-width: 100%; }
.soyka-widget .kacheln-mit-import #kachel-text.kachel-import .kachel-hinzufuegen { align-self: center; }
.soyka-widget .bk-file-tag .bk-anzahl { margin-left: auto; padding-left: 12px; color: var(--primärgrün); font-weight: 600; white-space: nowrap; word-break: normal; }
@media (max-width: 768px) {
  .soyka-widget .kacheln.kacheln-gewaehlt.kacheln-mit-import .kachel-import {
    border: 1px solid var(--primärgrün); background: var(--bg-card); border-radius: 22px; box-shadow: none; padding: 0;
  }
  .soyka-widget .kacheln.kacheln-gewaehlt.kacheln-mit-import .kachel-import .kachel-inhalt { padding: 14px 16px; }
  .soyka-widget .kacheln-mit-import .kachel-import .kachel-datei-knopf,
  .soyka-widget .kacheln-mit-import #kachel-foto.kachel-import .kachel-aktion { width: 100%; }
}
/* Eilbestellung grau, solange nicht alle Titel kurzfristig lieferbar sind (formular.js: eilKnopfAktualisieren).
   Statt „3-5 Werktage“ steht „Position … nicht verfügbar“ im Knopf (Schule: im ⓘ); beim Darüberfahren
   erscheint unter den betroffenen Titeln „… Eilbestellung nicht möglich“ (eilVorschau). */
.soyka-widget .wahl-knopf.eil-gesperrt,
.soyka-widget .wahl-knopf.eil-gesperrt:hover,
.soyka-widget .auftragsart .wahl-knopf.eil-gesperrt,
.soyka-widget .auftragsart .wahl-knopf.eil-gesperrt:hover {
  cursor: not-allowed; border-color: var(--input-border); box-shadow: none; background-color: var(--hintergrundgrau); color: var(--gedaempft, #8a8a8a);
}
.soyka-widget .wahl-knopf.eil-gesperrt strong,
.soyka-widget .wahl-knopf.eil-gesperrt .wahl-haken { opacity: .55; }
.soyka-widget .wahl-knopf.eil-gesperrt small { color: var(--primärrot); opacity: 1; }
.soyka-widget .wahl-knopf.eil-gesperrt:active { transform: none; }
.soyka-widget #orderTable .eil-vorschau { animation: soyka-eil-vorschau .2s ease-out; }
@keyframes soyka-eil-vorschau { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   07.10.2026 (22b) – Farben global: AUSWÄHLEN / KONFIGURIEREN = gelb
   (Regulär/Eil, Abholen/Liefern, PayPal/Überweisung, Angebot/Bestellung/Eil, Wunschtermin),
   HINZUFÜGEN / HOCHLADEN / AUFTRAG AUSLÖSEN = grün (Hinzufügen, Upload, ABSENDEN, Zahlungspflichtig bestellen).
   Eingabefelder bleiben beim Tippen grün.
   ============================================================================ */
.soyka-widget .wahl-knopf { border-color: var(--akzentgelb); box-shadow: 0 2px 6px rgba(255,195,0,0.15), inset 0 -1px 2px rgba(0,0,0,0.03); }
.soyka-widget .wahl-knopf:hover { border-color: var(--akzentgelb); box-shadow: 0 2px 8px rgba(255,195,0,0.25), inset 0 -1px 2px rgba(0,0,0,0.04); }
.soyka-widget .wahl-knopf.gewaehlt,
.soyka-widget .wahl-knopf.gewaehlt:hover {
  border-color: var(--akzentgelb); background-color: #dcdcd6;
  box-shadow: inset 0 0 0 1px var(--akzentgelb), 0 2px 8px rgba(255,195,0,0.25);
}
.soyka-widget .wahl-knopf.gewaehlt .wahl-haken { border-color: var(--akzentgelb); background: var(--akzentgelb); }
.soyka-widget .wahl-knopf.gewaehlt .wahl-haken::after { border-color: var(--hintergrundgrün); }
.soyka-widget .wahl-knopf:disabled, .soyka-widget .wahl-knopf:disabled:hover { border-color: var(--input-border); box-shadow: none; }
@media (prefers-color-scheme: dark) {
  .soyka-widget .wahl-knopf.gewaehlt, .soyka-widget .wahl-knopf.gewaehlt:hover { background-color: #3a3a34; }
}
/* Wunschtermin (konfigurieren) gelb, aufgeklappter Kalender ebenso */
.soyka-widget .termin-knopf { border-color: var(--akzentgelb); box-shadow: 0 2px 6px rgba(255,195,0,0.15); }
.soyka-widget .termin-zone,
.soyka-widget .termin-zone .termin-schliessen { border-color: var(--akzentgelb); }
.soyka-widget .termin-zone .termin-schliessen:hover { border-color: var(--primärrot); }
/* Auftrag auslösen grün: ABSENDEN (Schule/Bibliothek) und „Zahlungspflichtig bestellen“ (Privat) */
.soyka-widget .export-container #absendenKnopf,
.soyka-widget .export-container #bestellKnopf {
  border: 1px solid var(--primärgrün);
  box-shadow: 0 2px 6px rgba(0,0,0,.08), inset 0 -1px 2px rgba(0,0,0,.03);
}
.soyka-widget .export-container #absendenKnopf:hover,
.soyka-widget .export-container #bestellKnopf:hover { border-color: var(--primärgrün); background-color: var(--hover-bg); box-shadow: 0 2px 8px rgba(31,116,5,.18); }

/* Privat: Schritte 1–4 so breit wie PayPal · Überweisung (mit etwas Rand links und rechts), mittig */
.soyka-widget .schritte { width: 94%; max-width: 700px; }
.soyka-widget .zahlungsart { max-width: none; }
/* Abstand „Zahlungspflichtig bestellen“ wie zwischen AGB und Zahlungsart */
.soyka-widget .schritt .zahlungsart { margin: 18px auto 0; }
.soyka-widget .schritt .export-container { margin-top: 18px; }

/* ============================================================================
   07.10.2026 (22c) – Stille Funktion: Titel gedrückt halten und ziehen
   (sortieren · zur Seite = entfernen · auf die Eingabezeile = bearbeiten)
   ============================================================================ */
.soyka-widget #orderTable tbody tr img { -webkit-touch-callout: none; }
.soyka-widget.zieht, .soyka-widget.zieht * { -webkit-user-select: none; user-select: none; cursor: grabbing !important; }
.soyka-widget #orderTable tbody tr.zieh-quelle { opacity: .35; outline: 2px dashed var(--primärgrün); outline-offset: -2px; }
.soyka-widget #orderTable tbody tr.zieh-quelle.zieh-weg { outline-color: var(--primärrot); }
.soyka-widget .zieh-geist {
  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
  display: flex; align-items: center; gap: 8px; max-width: 320px; padding: 6px 12px 6px 6px;
  background: var(--bg-card, #fff); color: var(--text-main, #222); border: 1px solid var(--primärgrün); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); font-size: 13px; line-height: 1.3;
}
.soyka-widget .zieh-geist img { width: 26px; height: 36px; object-fit: cover; border-radius: 3px; flex: none; }
.soyka-widget .zieh-geist-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soyka-widget .zieh-geist-ziel:empty { display: none; }
.soyka-widget .zieh-geist-ziel { flex: none; font-size: 11px; font-weight: 700; white-space: nowrap; }
.soyka-widget .zieh-geist.ziel-weg { border-color: var(--primärrot); }
.soyka-widget .zieh-geist.ziel-weg .zieh-geist-ziel { color: var(--primärrot); }
.soyka-widget .zieh-geist.ziel-bearbeiten { border-color: var(--akzentgelb); }
.soyka-widget .zieh-geist.ziel-bearbeiten .zieh-geist-ziel { color: var(--hintergrundgrün); }
.soyka-widget .form-container.zieh-ablage { outline: 2px dashed var(--akzentgelb); outline-offset: 6px; border-radius: 10px; }
.soyka-widget .zieh-rueckgaengig {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10000;
  display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 18px;
  background: var(--hintergrundgrün, #2e4635); color: #fff; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  font-size: 14px; animation: soyka-eil-vorschau .2s ease-out;
}
.soyka-widget .zieh-rueckgaengig button {
  margin: 0; padding: 6px 14px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  background: #fff; color: var(--hintergrundgrün, #2e4635); border: 1px solid var(--primärgrün); border-radius: 999px; box-shadow: none; cursor: pointer;
}

/* ============================================================================
   07.10.2026 (22d)
   ============================================================================ */
/* Fenster (Hinweise/Fragen): schmaler Rand, innen abgerundet; Farbe per showCustomDialog(…, { rand }) */
.soyka-widget .modal-content { border-width: 3px; border-radius: 18px; }
/* Mehrere Wunschtermine im Knopf untereinander */
.soyka-widget .termin-knopf .termin-liste { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
.soyka-widget .termin-knopf.gewaehlt { height: auto; }
/* ⓘ bei Anfrage · Bestellung · Eilbestellung: längere Texte umbrechen */
.soyka-widget .auftrag-info::after { white-space: normal; width: max-content; max-width: 260px; text-align: center; }
/* Hochgeladene Datei: Kreuz zum Entfernen größer */
.soyka-widget .bk-file-tag .bk-rm { font-size: 1.45em; line-height: 1; padding: 0 2px 2px 6px; margin-left: 6px; }
/* Suchanimation (Lupe) bei Schule/Bibliothek mittig: eigene Zeile über die ganze Breite (vorher in der linken Spalte) */
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol .lupe-karte { grid-row: 5; grid-column: 1 / -1; justify-self: center; width: 100%; box-sizing: border-box; }
.soyka-widget:not([data-portal="privat"]) #uploadDownloadCol:has(.lupe-karte) #bkStatus { grid-row: 6 !important; }
@media (max-width: 768px) {
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol .lupe-karte { grid-row: 6; }
  .soyka-widget:not([data-portal="privat"]) #uploadDownloadCol:has(.lupe-karte) #bkStatus { grid-row: 7 !important; }
}
/* Privat: Lupe ebenfalls mittig unter den Kacheln */
.soyka-widget .kacheln-dateien .lupe-karte { align-self: center; width: 100%; box-sizing: border-box; }
/* Graue Eilbestellung: beim Darüberfahren „Eilbestellung nicht möglich. Siehe Pos. …“ (Privat am Knopf, Schule im ⓘ) */
.soyka-widget .wahl-knopf.eil-gesperrt:not(.auftrag-knopf) { position: relative; }
.soyka-widget .wahl-knopf.eil-gesperrt:not(.auftrag-knopf)::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px);
  width: max-content; max-width: 260px; white-space: normal; padding: 6px 10px; border-radius: 6px;
  background: var(--hintergrundgrün); color: #fff; text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-weight: 400; font-size: 12px; line-height: 1.3;
  letter-spacing: 0; text-transform: none; box-shadow: 0 3px 10px rgba(0,0,0,.15);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 30;
}
.soyka-widget .wahl-knopf.eil-gesperrt:not(.auftrag-knopf):hover::after,
.soyka-widget .wahl-knopf.eil-gesperrt:not(.auftrag-knopf):focus-visible::after,
.soyka-widget .wahl-knopf.eil-gesperrt.tip-zeigen:not(.auftrag-knopf)::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.soyka-widget .auftrag-knopf.eil-gesperrt:hover .auftrag-info::after,
.soyka-widget .auftrag-knopf.eil-gesperrt:hover .auftrag-info::before,
.soyka-widget .auftrag-knopf.eil-gesperrt.tip-zeigen .auftrag-info::after,
.soyka-widget .auftrag-knopf.eil-gesperrt.tip-zeigen .auftrag-info::before { opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .soyka-widget .auftrag-knopf.eil-gesperrt.tip-zeigen .auftrag-info::after,
  .soyka-widget .auftrag-knopf.eil-gesperrt.tip-zeigen .auftrag-info::before { display: block; }
}
/* Privat: AGB unter PayPal · Überweisung, gleiche Abstände (18 px) bis „Zahlungspflichtig bestellen“ */
.soyka-widget .schritt .zahlungsart + .agb-checkbox { margin-top: 18px; margin-bottom: 0; }

/* ── Weitere Optionen (Schule): Wunschtermin · Lieferart · Nachhaltigkeit – 09.10.2026 ──
   Fenster wie „Titelliste hochladen“ (.bk-zone-neu): gleiche Breite, Überschriften-Schrift, „Fertig“ wie „Schließen“ */
.soyka-widget .auftrag-termin.mit-optionen { max-width: 760px; margin: 14px auto 0; }
.soyka-widget .optionen-gruppe { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.soyka-widget .auftrag-termin .optionen-knopf { display: block; width: 100%; max-width: 280px; margin: 0 auto; text-align: center; }
.soyka-widget .optionen-zone {
  position: relative; display: flex; flex-direction: column; gap: 28px; box-sizing: border-box; width: 100%; max-width: 760px;
  padding: 22px 24px 70px; border: 1px solid var(--akzentgelb); border-radius: var(--radius-pille); background: var(--bg-card); text-align: center;
}
.soyka-widget .optionen-zone[hidden] { display: none; }
.soyka-widget .optionen-block { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; min-width: 0; }
.soyka-widget .optionen-block .wahl-drei { width: 100%; max-width: none; }
.soyka-widget .optionen-block .termin-gruppe { width: 100%; max-width: 420px; margin: 0 auto; }   /* Kalender wie vorher (420 px) */
.soyka-widget .optionen-text { display: block; max-width: 36em; margin: 0 auto; font-size: .85em; line-height: 1.4; color: var(--text-secondary); text-align: center; }

/* 14.10.2026: Portalverbesserungen */
.soyka-widget .bk-file-tag .bk-anzahl.bk-anzahl-warn { color: #b45309; }
.soyka-widget #customModal { z-index: 10001; }   /* Rückfragen über der Titelauswahl */
.soyka-widget .import-unklar-link { background: none; border: 1px solid #d9a400; border-radius: 6px; padding: 8px 12px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.soyka-widget .import-unklar-link:hover { background: rgba(217, 164, 0, .12); }
.soyka-widget .import-unklar-zurueck { background: none; border: 0; padding: 4px 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.soyka-widget .import-uebernommen { opacity: .7; }
.soyka-widget .termin-tage.laedt { opacity: .45; pointer-events: none; transition: opacity .15s; }