/* assets/css/app.css */

/* ══ tx-guide: Hilfe-Box / Schritt-für-Schritt-Anleitung ══
   Verwendung:
     <div class="tx-guide">               ← amber/gelb  (Standard: Tipp/Anleitung)
     <div class="tx-guide tx-guide--info"> ← blau        (Hinweis)
     <div class="tx-guide tx-guide--warn"> ← rot         (Warnung)
*/
.tx-guide {
  --tx-g:      #f59e0b;          /* amber */
  --tx-g-bg:   rgba(245,158,11,.07);
  --tx-g-brd:  rgba(245,158,11,.35);
  background:  var(--tx-g-bg);
  border:      1px solid var(--tx-g-brd);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: .84rem;
  margin-bottom: 1rem;
  position: relative;
}
.tx-guide--info {
  --tx-g:     #60a5fa;
  --tx-g-bg:  rgba(96,165,250,.07);
  --tx-g-brd: rgba(96,165,250,.30);
}
.tx-guide--warn {
  --tx-g:     #f87171;
  --tx-g-bg:  rgba(248,113,113,.07);
  --tx-g-brd: rgba(248,113,113,.30);
}

.tx-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: .85rem;
  color: var(--tx-g);
  margin-bottom: 12px;
}
.tx-guide-title i { font-size: 1rem; }

.tx-guide-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tx-guide-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.tx-guide-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tx-g);
  color: #111;
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.tx-guide-step-title {
  font-weight: 600;
  font-size: .82rem;
  color: #D1D4DC;
}
.tx-guide-step-desc {
  font-size: .75rem;
  color: #9aa3ad;
  margin-top: 2px;
  line-height: 1.45;
}

/* Exakte 70/30-Aufteilung ab LG (≥ 992px) */
@media (min-width: 992px) {
    .layout-70-30 {
      display: grid;
      grid-template-columns: 70% 30%;
      gap: 1.5rem;            /* Abstand zwischen Spalten */
      align-items: start;
    }
  }
  
  /* Auf kleineren Screens stacken die Spalten untereinander */
  @media (max-width: 991.98px) {
    .layout-70-30 {
      display: block;
    }
  }
  
  /* (Optional) kleine Helfer */
  .border-rounded {
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .75rem;
  }

/* ── Seiten-Info-Icon & Hover-Box ── */
.tx-info-wrap{position:relative;display:inline-flex;align-items:center;}
.tx-info-box{display:none;position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
    width:440px;z-index:1050;
    background:rgba(40,28,8,.92);border:1px solid rgba(245,158,11,.55);border-radius:12px;
    padding:.95rem 1.15rem;font-size:.83rem;line-height:1.72;color:#e2c97e;
    box-shadow:0 8px 28px rgba(0,0,0,.55);}
.tx-info-box strong{color:#fcd34d;}
.tx-info-box ul{margin:.45rem 0 0;padding-left:1.15rem;}
.tx-info-box li{margin-bottom:.28rem;}
.tx-info-wrap:hover .tx-info-box{display:block;}
@media(max-width:700px){.tx-info-box{left:0;top:calc(100% + 8px);transform:none;width:calc(100vw - 32px);max-width:380px;}}

.tx-page-info {
    display: inline-flex;
    align-items: center;
    color: #60a5fa;
    opacity: .55;
    font-size: 1.05rem;
    cursor: pointer;
    margin-left: 12px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: opacity .15s, color .15s;
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
}
.tx-page-info:hover,
.tx-page-info:focus {
    opacity: 1;
    color: #93c5fd;
    outline: none;
}

/* Bernstein-Popover (wie tx-guide) */
.tx-popover {
    --bs-popover-bg:           rgba(245,158,11,.09);
    --bs-popover-border-color: rgba(245,158,11,.4);
    --bs-popover-body-color:   #e2c97e;
    --bs-popover-max-width:    340px;
    border-radius: 12px;
    font-size: .83rem;
    box-shadow: 0 8px 28px rgba(0,0,0,.45);
}
.tx-popover .popover-header { display: none; }
.tx-popover .popover-body {
    padding: .9rem 1.05rem;
    line-height: 1.7;
    color: #e2c97e;
}
.tx-popover .popover-body strong { color: #fcd34d; }
.tx-popover .popover-body ul {
    margin: .45rem 0 0;
    padding-left: 1.1rem;
}
.tx-popover .popover-body li { margin-bottom: .25rem; }
.tx-popover.bs-popover-end    > .popover-arrow::before { border-right-color:  rgba(245,158,11,.4); }
.tx-popover.bs-popover-end    > .popover-arrow::after  { border-right-color:  rgba(245,158,11,.09);}
.tx-popover.bs-popover-start  > .popover-arrow::before { border-left-color:   rgba(245,158,11,.4); }
.tx-popover.bs-popover-start  > .popover-arrow::after  { border-left-color:   rgba(245,158,11,.09);}
.tx-popover.bs-popover-top    > .popover-arrow::before { border-top-color:    rgba(245,158,11,.4); }
.tx-popover.bs-popover-top    > .popover-arrow::after  { border-top-color:    rgba(245,158,11,.09);}
.tx-popover.bs-popover-bottom > .popover-arrow::before { border-bottom-color: rgba(245,158,11,.4); }
.tx-popover.bs-popover-bottom > .popover-arrow::after  { border-bottom-color: rgba(245,158,11,.09);}