:root {
  --green: #77DD77;
  --green-dark: #26A356;
  --green-soft: rgba(119, 221, 119, 0.14);
  --green-soft-2: rgba(38, 163, 86, 0.12);
}

/* Scope: only this form/page (apply.php) */
#virtual-office-apply {
  scroll-margin-top: 110px;
}

/* Make the page feel less grey: highlight the main form card */
#virtual-office-apply {
  background: transparent;
}

#virtual-office-apply .btn-a {
  background-color: var(--green-dark) !important;
  border-color: var(--green-dark) !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  letter-spacing: .2px;
}

#virtual-office-apply .btn-a:hover {
  filter: brightness(0.95);
}

#virtual-office-apply .card {
  border: 0;
  border-left: 6px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}

#virtual-office-apply .card .card-title {
  color: var(--green-dark);
  font-weight: 700;
}

#virtual-office-apply .alert.alert-light {
  background: var(--green-soft);
  border-left: 5px solid var(--green-dark) !important;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-right: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

#virtual-office-apply .form-check-input:checked {
  background-color: var(--green-dark);
  border-color: var(--green-dark);
}

#virtual-office-apply .form-control:focus,
#virtual-office-apply .form-select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 .2rem rgba(38, 163, 86, 0.18);
}

/* Badge look (used in other parts of the form) */
#virtual-office-apply .badge.bg-light {
  background: rgba(119, 221, 119, 0.22) !important;
  border-color: rgba(38, 163, 86, 0.25) !important;
  color: #1b6f39 !important;
}

/* Generic "card" blocks inside the form */
#virtual-office-apply .border.rounded.p-3 {
  background: linear-gradient(180deg, var(--green-soft-2), rgba(255,255,255,0));
  border-color: rgba(38, 163, 86, 0.22) !important;
}

/* Firmendaten-Block (Step 2) – grün, damit es zum restlichen Design passt */
#virtual-office-apply .m26-company-box.border.rounded.p-3 {
  background: linear-gradient(180deg, var(--green-soft), rgba(255,255,255,0));
  border: 2px solid var(--green) !important;
}

#virtual-office-apply .form-text {
  color: #5e6c6f;
}

/* Optional: subtly tint the whole section background around the form */
.section-t3 {
  background:
    radial-gradient(1200px 420px at 15% 0%, rgba(119, 221, 119, 0.18), rgba(255,255,255,0) 60%),
    radial-gradient(900px 380px at 85% 10%, rgba(38, 163, 86, 0.10), rgba(255,255,255,0) 55%);
}

/* Headline accent (fits existing template classes) */
.title-single-box .title-single {
  position: relative;
}

.title-single-box .title-single::after {
  content: "";
  display: block;
  width: 88px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-dark), var(--green));
}

/* Breadcrumb active color */
.breadcrumb .breadcrumb-item.active {
  color: var(--green-dark);
}

/*
  Kachel-Design (Step 1 + Step 2)
  -> bewusst exakt gleich, damit der Flow konsistent wirkt.
*/
.m26-plan-grid{display:grid;grid-template-columns:1fr;gap:16px;}
@media (min-width:768px){.m26-plan-grid{grid-template-columns:1fr 1fr;}}

.m26-plan-card{
  border:2px solid #e9ecef;
  border-radius:12px;
  padding:16px;
  cursor:pointer;
  transition:all .12s ease;
  background:#fff;
  height:100%;
}

.m26-plan-card:hover{
  border-color:var(--green);
  box-shadow: 0 6px 18px rgba(38,163,86,0.15);
}

.m26-plan-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.m26-plan-card.is-selected{
  border-color:var(--green-dark);
  box-shadow: 0 0 0 3px rgba(38,163,86,0.25);
}


.m26-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}

.m26-plan-title{font-weight:700;}

.m26-plan-sub{font-size:.9rem;color:#6c757d;margin-top:2px;}

.m26-plan-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;font-weight:700;}

.m26-plan-price{
  font-weight:700;
  white-space:nowrap;
}

.m26-plan-cycle{
  font-weight:600;
  opacity:.7;
  margin-left:4px;
}

.m26-plan-desc{
  opacity:.85;
  margin-bottom:10px;
  font-size:.95rem;
}

/* Step 1: Details box */
.m26-info-box{border:1px solid #e9ecef;border-radius:12px;padding:16px;background:#fcfcfd;}
.m26-info-row{display:flex;flex-wrap:wrap;gap:14px;font-size:.95rem;}
.price-note{font-size:.9rem;color:#6c757d;margin-top:6px;}
.m26-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.m26-plan-features{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.m26-plan-feature{
  font-size:.85rem;
  padding:4px 8px;
  border-radius:999px;
  background: rgba(0,0,0,.05);
}

.m26-plan-tax{
  font-size: .85rem;
  opacity: .75;
  font-weight: 600;
  margin-top: 2px;
}

.wizard-steps {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:30px;
}

.wizard-steps .step {
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e5e5e5;
  font-weight:600;
}

.wizard-steps .step.active {
  background:#000;
  color:#fff;
}

.wizard-steps .line {
  flex:1;
  height:2px;
  background:#e5e5e5;
}

/* Step 2: Firmendaten optisch hervorheben */
.company-card{
  border:2px solid var(--green);
  border-left:6px solid var(--green-dark);
  background: rgba(34, 197, 94, 0.06);
  border-radius:14px;
}

/* Step 2: kleines Info-(i) wie bei Durchblicker */
.m26-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(38, 163, 86, 0.45);
  background: rgba(119, 221, 119, 0.16);
  color: var(--green-dark);
  font-weight:700;
  font-size:12px;
  line-height:1;
  padding:0;
}

.m26-info-btn:hover{
  filter: brightness(0.97);
}

.m26-info-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(38,163,86,0.22);
}