/* Rainbow Business Hosting (business-hosting.php, angebote.php): Paketkarten, Umschalter "Jährlich | Monatlich",
 Paket-Artikel, Vergleichstabelle. Bis 2026-10-23 stand das als <style> in business-hosting.php. */
.biz-lead { max-width: 760px; margin: 0 auto; text-align: center; }
.biz-lead p { color: var(--rw-soft); }
.biz-compare { overflow-x: auto; }
.biz-compare .rw-tldtable { min-width: 640px; }
.biz-compare .rw-tldtable th:nth-child(4), .biz-compare .rw-tldtable td:nth-child(4) { display: table-cell; }
.biz-compare .rw-tldtable thead th:not(:first-child), .biz-compare .rw-tldtable td { text-align: center; }
.biz-compare .rw-tldtable tbody th { font-weight: 400; text-align: left; }
.biz-yes { color: var(--rw-olive-text); font-weight: 600; }
.biz-no { color: var(--rw-soft); }
.biz-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.biz-pick .rw-sidebox ul { margin: 0 0 20px; padding-left: 20px; font-size: 14.5px; list-style: disc; }
.biz-pick .rw-sidebox li { display: list-item; margin: 0 0 6px; }
.biz-pick .rw-sidebox.is-current { border: 2px solid var(--rw-olive); }
@media (max-width: 767px) { .biz-pick { grid-template-columns: 1fr; } }
/* Paketkarten wie die WebLux-Karten (includes/hosting-plans.php): ohne Symbol und Farbleiste */
.biz-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; margin-top: 10px; }
.biz-plan { position: relative; display: flex; flex-direction: column; padding: 30px 22px 24px; background: var(--rw-white); border: 1px solid var(--rw-line); border-radius: 2px; text-align: center; }
.biz-plan.is-featured { border: 2px solid var(--rw-olive); padding: 29px 21px 23px; }
.biz-plan__tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 3px 10px; background: var(--rw-olive); color: var(--rw-slate); font: 600 11px/1.4 var(--rw-mono); letter-spacing: .1em; text-transform: uppercase; }
.biz-plan__head { padding: 0; }
.biz-plan__name { margin: 0; font: 600 19px/1.3 var(--rw-mono) !important; color: var(--rw-ink); }
.biz-plan__name span { font-weight: 400; color: var(--rw-soft); }
.biz-plan__for { margin: 6px 0 0; min-height: 44px; font-size: 14px; line-height: 1.5; color: var(--rw-soft); }
.biz-plan__body { display: flex; flex-direction: column; flex: 1; padding-top: 14px; }
.biz-plan__stats { display: flex; justify-content: center; gap: 0; margin: 16px 0 4px; padding: 12px 0; border-top: 1px solid var(--rw-line); border-bottom: 1px solid var(--rw-line); }
.biz-plan__stats div { flex: 1; }
.biz-plan__stats div + div { border-left: 1px solid var(--rw-line); }
.biz-plan__stats b { display: block; font: 600 18px/1.2 var(--rw-mono); color: var(--rw-ink); }
.biz-plan__stats span { font-size: 12px; color: var(--rw-soft); }
.biz-plan__intro { margin: 14px 0 2px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--rw-text); }
.biz-plan .rw-specs { text-align: left; flex: 1; }
/* Angebot und KI (2026-10-23) - Bausteine der Website: Pfeil-Anhänger, Sechseck, Karte mit Olivkante */
.biz-offer { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 32px; margin: 0 0 56px; padding: 26px 30px; background: var(--rw-surface); border: 1px solid var(--rw-line); border-left: 5px solid var(--rw-orange, #e8642c); }
.biz-offer__tag { grid-column: 1; margin: 0 !important; justify-self: start; padding: 4px 16px 4px 10px; background: var(--rw-olive); color: var(--rw-on-olive); font: 600 12.5px/1.3 var(--rw-sans); clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.biz-offer__head { grid-column: 1; margin: 6px 0 0 !important; font: 600 clamp(20px, 2.2vw, 26px)/1.3 var(--rw-mono); color: var(--rw-ink); }
.biz-offer__head b { color: var(--rw-orange-text); }
.biz-offer__text { grid-column: 1; margin: 0 !important; color: var(--rw-text); }
.biz-offer .button { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding-left: 30px; padding-right: 30px; }
.biz-ai { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.biz-ai__item { position: relative; border-top: 3px solid var(--rw-olive); }
.biz-ai__new { position: absolute; top: 18px; right: 18px; padding: 2px 8px; background: var(--rw-orange-soft, #fdf0e9); color: var(--rw-orange-text); font: 600 11px/1.5 var(--rw-mono); letter-spacing: .06em; text-transform: uppercase; }
.biz-plan__save { display: inline-block; margin-right: 4px; padding: 1px 6px; background: var(--rw-orange, #e8642c); color: #fff; font-weight: 700; }
.biz-plan__then { margin: 6px 0 0 !important; font-size: 13.5px; color: var(--rw-soft); }
/* Laufzeit-Umschalter (2026-10-23): beide Tarife stehen in jeder Karte, html[data-biz-tarif] blendet einen aus */
html[data-biz-tarif="monat"] .biz-term--jahr, html:not([data-biz-tarif="monat"]) .biz-term--monat { display: none !important; }
.biz-term-row { display: flex; justify-content: center; margin: 0 0 34px; }
.biz-term { display: inline-flex; gap: 4px; padding: 4px; background: var(--rw-white); border: 1px solid var(--rw-line-dark, var(--rw-line)); border-radius: 2px; }
.biz-term__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 22px; border: 0; border-radius: 2px; background: transparent; color: var(--rw-text); font: 600 15px/1.2 var(--rw-sans); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.biz-term__opt:hover { color: var(--rw-ink); background: var(--rw-surface); }
.biz-term__opt[aria-pressed="true"] { background: var(--rw-olive); color: var(--rw-on-olive); }
.biz-term__opt:focus-visible { outline: 2px solid var(--rw-ink); outline-offset: 2px; }
.biz-term__save { padding: 2px 7px; background: var(--rw-orange, #e8642c); color: #fff; font: 700 12px/1.4 var(--rw-sans); }
.biz-term__hint { font-weight: 400; font-size: 13px; }
/* der Monatstarif hat keinen Domain-Rabatt und damit den einfachen Button (.btn.button-secondary, umrandet) -
   in der Karte soll er aussehen wie der des Jahrestarifs */
.rw-plan__cta .btn.button-secondary { background: var(--rw-olive) !important; border-color: var(--rw-olive) !important; color: var(--rw-on-olive) !important; }
.rw-plan__cta .btn.button-secondary:hover { background: var(--rw-olive-hover) !important; border-color: var(--rw-olive-hover) !important; color: var(--rw-ink) !important; }
.biz-focus__buy .biz-term { display: flex; margin: 0 0 18px; }
.biz-focus__buy .biz-term__opt { flex: 1; justify-content: center; flex-wrap: wrap; gap: 2px 6px; padding: 8px 10px; font-size: 14px; }
@media (max-width: 575px) { .biz-term { display: flex; width: 100%; } .biz-term__opt { flex: 1; justify-content: center; flex-wrap: wrap; gap: 2px 6px; padding: 8px 10px; font-size: 14px; } }
/* Paket im Fokus (?paket=...): Leistungen links, Preis und Kauf rechts */
.biz-focus { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.biz-focus__title { margin: 14px 0 0; font: 600 clamp(24px, 2.6vw, 32px)/1.25 var(--rw-mono); color: var(--rw-ink); }
.biz-focus__title span { font-weight: 400; color: var(--rw-soft); }
.biz-focus__for { margin: 8px 0 0 !important; font-size: 16px; color: var(--rw-soft); }
.biz-focus__sub { margin: 26px 0 0; font: 600 15px/1.4 var(--rw-sans); color: var(--rw-ink); }
.biz-focus__specs { columns: 2; column-gap: 28px; margin-top: 10px; }
.biz-focus__specs li { break-inside: avoid; }
.biz-focus__buy { padding-top: 26px; }
.biz-focus__buy .rw-plan__more { align-self: center; }
@media (max-width: 991px) { .biz-focus { grid-template-columns: 1fr; } .biz-focus__buy { max-width: 420px; } }
@media (max-width: 575px) { .biz-focus__specs { columns: 1; } }
@media (max-width: 991px) { .biz-ai { grid-template-columns: 1fr; } .biz-offer { grid-template-columns: 1fr; } .biz-offer .button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px; } }
@media (max-width: 1099px) { .biz-plans { grid-template-columns: 1fr 1fr; gap: 34px 20px; } }
@media (max-width: 575px) { .biz-plans { grid-template-columns: 1fr; } .biz-plan__for { min-height: 0; } }
/* Jährlich gegen monatlich (2026-10-23): die Ersparnis im Jahrestarif, der Vergleich im Monatstarif mit Sprung zu jährlich */
.biz-plan__save--soft { background: var(--rw-line-dark, #c9ced6); color: var(--rw-ink); }
.biz-plan__vs { margin: 8px 0 0 !important; font-size: 13.5px; color: var(--rw-olive-text, #5f6b1f); }
.biz-plan__vs b { color: inherit; }
.biz-plan__vs--month { color: var(--rw-soft); }
.biz-plan__switch { padding: 0; border: 0; background: none; color: var(--rw-link); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.biz-term__opt[aria-pressed="true"] .biz-term__hint { color: inherit; }
/* der Monatspreis ohne Orange: das Angebot ist der Jahrestarif */
.biz-term--monat .rw-price__amount { color: var(--rw-ink); }