/*
 * @project     Kassel BEAUTY SaaS
 * @domain      https://demo-salon.kassel.beauty/
 * @location    assets/css/kassel.css
 * @file        kassel.css
 * @function    Globales Stylesheet. Baut auf Bootstrap 5.3 auf.
 *              Eigene Klassen beginnen mit kb-. Bootstrap-Grid wird
 *              NICHT ueberschrieben. Eigene Farb-Tokens als CSS-Variablen.
 * @version     1.1.0
 * @created     2026-03-20
 * @author      Kassel BEAUTY Dev Team
 * @changelog
 *   1.1.0  2026-03-20  Bootstrap-Container-Basis; Full-Width entfernt
 *   1.0.0  2026-03-20  Erstversion
 */

/* ── TOKENS ──────────────────────────────────────────────────────────────── */
:root {
  --kb-white:   #FDFBF7;
  --kb-nude:    #E8D7D0;
  --kb-taupe:   #A99285;
  --kb-dark:    #2D3134;
  --kb-taupe-l: #C4B0A6;
  --kb-line:    rgba(169,146,133,.18);
  --kb-r:       4px;
  --ff-serif:   'Cormorant Garamond', Georgia, serif;
  --ff-sans:    'DM Sans', system-ui, sans-serif;
  --tr:         .26s cubic-bezier(.16,1,.3,1);
}

/* ── BASE ────────────────────────────────────────────────────────────────── */
body {
  background:  var(--kb-white);
  color:        var(--kb-dark);
  font-family:  var(--ff-sans);
  font-size:    15px;
  line-height:  1.7;
}
a    { color: inherit; text-decoration: none; }
img  { display: block; max-width: 100%; }

/* ── WCAG 2.2 ────────────────────────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--kb-taupe);
  outline-offset: 3px;
  border-radius:  2px;
}
.skip-nav {
  position: absolute; top: -999px; left: 8px;
  background: var(--kb-dark); color: var(--kb-white);
  padding: 10px 20px; border-radius: var(--kb-r);
  font-size: 13px; z-index: 9999;
}
.skip-nav:focus { top: 8px; }

/* ── TYPOGRAPHY HELPERS ──────────────────────────────────────────────────── */
.kb-serif { font-family: var(--ff-serif); }

.kb-eyebrow {
  font-size:      10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color:          var(--kb-taupe);
  display:        flex;
  align-items:    center;
  gap:            12px;
  margin-bottom:  0;
}
.kb-eyebrow::before {
  content: ''; width: 26px; height: 1px;
  background: var(--kb-taupe); flex-shrink: 0;
}
.kb-eyebrow--light { color: var(--kb-taupe-l); }
.kb-eyebrow--light::before { background: var(--kb-taupe-l); }

.kb-section-title {
  font-family:    var(--ff-serif);
  font-size:      clamp(32px, 4vw, 50px);
  font-weight:    300;
  line-height:    1.1;
  letter-spacing: -.01em;
  margin:         .5rem 0 0;
}
.kb-section-title em { font-style: italic; color: var(--kb-taupe); }

.kb-stars      { letter-spacing: 2px; }
.kb-stars--gold{ color: #C9A060; }
.kb-stars-sm   { color: #C9A060; font-size: .8rem; letter-spacing: 1px; }
.kb-icon-taupe { color: var(--kb-taupe); }

/* ── SECTION SPACING ─────────────────────────────────────────────────────── */
.py-section { padding: 88px 0; }
@media (max-width: 768px) { .py-section { padding: 56px 0; } }

/* ── BACKGROUNDS ─────────────────────────────────────────────────────────── */
.kb-bg-nude { background: var(--kb-nude); }
.kb-bg-dark { background: var(--kb-dark); color: #FDFBF7; }

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.kb-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        12px 28px;
  border-radius:  var(--kb-r);
  font-family:    var(--ff-sans);
  font-size:      .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border:         none;
  transition:     background var(--tr), color var(--tr), transform var(--tr);
  cursor:         pointer;
  text-decoration:none;
}
.kb-btn-dark {
  background: var(--kb-dark);
  color:      #FDFBF7;
}
.kb-btn-dark:hover {
  background: var(--kb-taupe);
  color:      #FDFBF7;
  transform:  translateY(-2px);
}
.kb-btn-outline {
  background:  transparent;
  color:        var(--kb-dark);
  border:       1px solid var(--kb-taupe);
}
.kb-btn-outline:hover {
  background: var(--kb-nude);
  color:       var(--kb-dark);
}

/* ── BADGE ───────────────────────────────────────────────────────────────── */
.kb-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  padding:        5px 14px;
  background:     var(--kb-nude);
  border-radius:  20px;
  font-size:      .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--kb-taupe);
  width:          fit-content;
}

/* ── NAVIGATION ──────────────────────────────────────────────────────────── */
.kb-nav {
  position:         fixed;
  top: 0; left: 0; right: 0;
  z-index:          200;
  height:           68px;
  background:       rgba(253,251,247,.93);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:    1px solid var(--kb-line);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 clamp(20px, 4vw, 56px);
  transition:       box-shadow var(--tr);
}
.kb-nav.scrolled { box-shadow: 0 4px 24px rgba(45,49,52,.09); }

.nav-logo { display: flex; align-items: center; gap: 11px; }
.nav-logo img { height: 34px; width: auto; border-radius: 3px; }
.nav-logo-text {
  font-family:    var(--ff-serif);
  font-size:      1.175rem;
  font-weight:    400;
  letter-spacing: .02em;
  line-height:    1;
}
.nav-logo-text em { font-style: italic; color: var(--kb-taupe); }

.nav-toggle {
  display:    none;
  background: none;
  border:     none;
  font-size:  1.375rem;
  color:      var(--kb-dark);
  padding:    6px;
  line-height:1;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         24px;
  list-style:  none;
  margin: 0; padding: 0;
}
.nav-links a {
  font-size:      .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.6);
  padding:        4px 0;
  border-bottom:  1px solid transparent;
  transition:     color var(--tr), border-color var(--tr);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--kb-dark); border-bottom-color: var(--kb-taupe); }

.nav-cta {
  padding:        9px 20px !important;
  background:     var(--kb-dark) !important;
  color:          #FDFBF7 !important;
  border-radius:  var(--kb-r);
  border:         none !important;
  display:        inline-flex !important;
  align-items:    center;
  gap:            6px;
  transition:     background var(--tr), transform var(--tr) !important;
}
.nav-cta:hover { background: var(--kb-taupe) !important; transform: translateY(-1px); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display:        none;
    position:       fixed;
    top: 68px; left: 0; right: 0;
    background:     rgba(253,251,247,.97);
    flex-direction: column;
    align-items:    flex-start;
    padding:        16px clamp(20px,4vw,40px);
    border-bottom:  1px solid var(--kb-line);
    gap:            2px;
    box-shadow:     0 8px 24px rgba(45,49,52,.1);
  }
  .nav-links.open { display: flex; }
  .nav-links a    { font-size: .9rem; padding: 10px 0; width: 100%; }
}

/* ── HERO ────────────────────────────────────────────────────────────────── */
.kb-hero { margin-top: 68px; }

.kb-hero-left {
  padding: 64px clamp(20px, 4vw, 60px) 64px clamp(20px, 4vw, 32px);
  border-right: 1px solid var(--kb-line);
}
@media (max-width: 992px) { .kb-hero-left { border-right: none; border-bottom: 1px solid var(--kb-line); } }

.kb-hero-h1 {
  font-family:    var(--ff-serif);
  font-size:      clamp(42px, 5.5vw, 76px);
  font-weight:    300;
  line-height:    1.0;
  letter-spacing: -.02em;
  margin:         0;
}
.kb-hero-h1 em { font-style: italic; color: var(--kb-taupe); }

.kb-hero-sub {
  font-size:  1rem;
  line-height:1.7;
  color:      rgba(45,49,52,.6);
  max-width:  400px;
}

.kb-hero-stats {
  display:    flex;
  gap:        36px;
  border-top: 1px solid var(--kb-line);
  flex-wrap:  wrap;
}
.kb-stat-val {
  font-family: var(--ff-serif);
  font-size:   2.125rem;
  font-weight: 300;
  line-height: 1;
}
.kb-stat-lbl {
  font-size:      .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.5);
  margin-top:     4px;
}

.kb-hero-right { position: relative; overflow: hidden; min-height: 420px; }
.kb-hero-img   { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }

.kb-hero-rating-badge {
  position:        absolute;
  bottom: 28px; left: 28px;
  background:      rgba(253,251,247,.92);
  backdrop-filter: blur(10px);
  padding:         14px 18px;
  border:          1px solid var(--kb-line);
  border-radius:   var(--kb-r);
  max-width:       220px;
}

/* ── GALLERY ─────────────────────────────────────────────────────────────── */
.kb-gallery-tabs {
  display:       flex;
  gap:           2px;
  border-bottom: 1px solid var(--kb-line);
  margin-bottom: 28px;
  flex-wrap:     wrap;
}
.kb-gtab {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  padding:        10px 20px;
  background:     none;
  border:         none;
  font-size:      .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.45);
  border-bottom:  2px solid transparent;
  margin-bottom:  -1px;
  transition:     all var(--tr);
  cursor:         pointer;
}
.kb-gtab:hover { color: var(--kb-dark); }
.kb-gtab.active { color: var(--kb-dark); border-bottom-color: var(--kb-taupe); }

.kb-gallery-panel        { display: none; }
.kb-gallery-panel.active { display: block; }

.kb-gallery-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   8px;
}
.kb-gallery-item {
  position:      relative;
  overflow:      hidden;
  aspect-ratio:  4/3;
  border-radius: var(--kb-r);
  cursor:        pointer;
}
.kb-gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
@media (max-width: 640px) { .kb-gallery-item--wide { grid-column: span 1; aspect-ratio: 4/3; } }

.kb-gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.kb-gallery-item:hover img { transform: scale(1.06); }

.kb-gallery-overlay {
  position:   absolute; inset: 0;
  background: linear-gradient(to top, rgba(45,49,52,.6) 0%, transparent 55%);
  opacity:    0; transition: opacity var(--tr);
  display:    flex; align-items: flex-end;
  justify-content: space-between;
  padding:    14px;
}
.kb-gallery-item:hover .kb-gallery-overlay { opacity: 1; }
.kb-gallery-label {
  color:          #FDFBF7;
  font-size:      .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.kb-gallery-zoom {
  color:     rgba(253,251,247,.8);
  font-size: .875rem;
}

/* ── LIGHTBOX ────────────────────────────────────────────────────────────── */
.lightbox {
  position:        fixed; inset: 0; z-index: 999;
  background:      rgba(45,49,52,.96);
  display:         none;
  align-items:     center;
  justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-img  {
  max-width: 90vw; max-height: 85vh;
  border-radius: var(--kb-r);
  box-shadow: 0 32px 80px rgba(0,0,0,.4);
}
.lightbox-close {
  position: fixed; top: 20px; right: 24px;
  background: none; border: none;
  color: rgba(253,251,247,.6);
  font-size: 1.75rem; line-height: 1;
  transition: color var(--tr);
}
.lightbox-close:hover { color: #FDFBF7; }
.lightbox-caption {
  position: fixed; bottom: 24px;
  left: 50%; transform: translateX(-50%);
  color: rgba(253,251,247,.5); font-size: .8125rem;
  letter-spacing: .05em; text-align: center; max-width: 80vw;
}
.lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(253,251,247,.12);
  border: 1px solid rgba(253,251,247,.2);
  color: #FDFBF7;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem;
  transition: background var(--tr);
}
.lightbox-nav:hover  { background: rgba(253,251,247,.22); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

/* ── TEAM ────────────────────────────────────────────────────────────────── */
.kb-team-card {
  background:  #FDFBF7;
  border:      1px solid var(--kb-line);
  overflow:    hidden;
  display:     flex;
  flex-direction: column;
  transition:  box-shadow var(--tr), transform var(--tr);
}
.kb-team-card:hover {
  box-shadow: 0 16px 48px rgba(169,146,133,.2);
  transform:  translateY(-4px);
}
.kb-team-photo { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.kb-team-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.kb-team-card:hover .kb-team-photo img { transform: scale(1.04); }
.kb-team-since {
  position:       absolute; bottom: 14px; left: 14px;
  background:     rgba(253,251,247,.9);
  padding:        4px 11px; border-radius: 20px;
  font-size:      .65rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kb-taupe);
}
.kb-team-body     { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.kb-team-name     { font-family: var(--ff-serif); font-size: 1.3125rem; font-weight: 400; margin: 0 0 4px; }
.kb-team-role     { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kb-taupe); margin-bottom: 8px; }
.kb-team-specialty{ font-size: .8125rem; color: rgba(45,49,52,.55); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.kb-team-bio      { font-size: .84375rem; line-height: 1.7; color: rgba(45,49,52,.7); margin-bottom: 12px; }
.kb-team-certs    { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.kb-cert-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; background: var(--kb-nude);
  border-radius: 20px; font-size: .625rem;
  letter-spacing: .05em; color: var(--kb-dark);
}
.kb-cert-badge .bi { color: var(--kb-taupe); font-size: .5625rem; }

.kb-team-portfolio {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   4px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--kb-line);
}
.kb-portfolio-item {
  aspect-ratio: 1; overflow: hidden;
  border-radius: 2px; cursor: pointer;
}
.kb-portfolio-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.kb-portfolio-item:hover img { transform: scale(1.12); }

/* ── SERVICES ────────────────────────────────────────────────────────────── */
.kb-service-card {
  padding:        24px 20px;
  background:     #FDFBF7;
  border:         1px solid var(--kb-line);
  display:        flex;
  flex-direction: column;
  position:       relative;
  overflow:       hidden;
  transition:     background var(--tr), transform var(--tr);
}
.kb-service-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--kb-taupe);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--tr);
}
.kb-service-card:hover { background: var(--kb-nude); transform: translateY(-2px); }
.kb-service-card:hover::after { transform: scaleX(1); }
.kb-service-icon  { font-size: 1.375rem; color: var(--kb-taupe); margin-bottom: 12px; }
.kb-service-name  { font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 400; margin-bottom: 4px; }
.kb-service-desc  { font-size: .75rem; color: rgba(45,49,52,.5); letter-spacing: .04em; margin-bottom: 8px; }
.kb-service-price { font-family: var(--ff-serif); font-size: .9375rem; color: var(--kb-taupe); }

/* ── REVIEWS ─────────────────────────────────────────────────────────────── */
.kb-aggregate {
  display:     flex;
  align-items: center;
  gap:         28px;
  padding:     24px 28px;
  background:  rgba(255,255,255,.07);
  border:      1px solid rgba(255,255,255,.12);
  border-radius: var(--kb-r);
  flex-wrap:   wrap;
}
.kb-aggregate-score {
  font-family: var(--ff-serif);
  font-size:   3.5rem;
  font-weight: 300;
  line-height: 1;
  color:       #FDFBF7;
  flex-shrink: 0;
}
.kb-aggregate-meta { flex: 1; min-width: 200px; }

.kb-review-card {
  padding:       22px;
  background:    rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.1);
  border-radius: var(--kb-r);
  display:       flex;
  flex-direction:column;
}
.kb-review-name    { font-family: var(--ff-serif); font-size: 1.0625rem; color: #FDFBF7; }
.kb-review-service { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kb-taupe-l); margin-top: 2px; }
.kb-review-text    { font-size: .875rem; line-height: 1.7; color: rgba(253,251,247,.7); font-style: italic; flex: 1; }
.kb-review-date    { font-size: .6875rem; color: rgba(253,251,247,.35); }

/* ── CTA / STANDORTE ─────────────────────────────────────────────────────── */
.kb-standort-card {
  padding:       16px 18px;
  background:    rgba(45,49,52,.05);
  border:        1px solid var(--kb-line);
  border-radius: var(--kb-r);
}
.kb-bg-dark .kb-standort-card {
  background: rgba(253,251,247,.07);
  border-color: rgba(253,251,247,.12);
}
.kb-standort-name { font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 400; margin-bottom: 5px; }
.kb-standort-info { font-size: .8125rem; color: rgba(45,49,52,.6); margin: 0; display: flex; align-items: flex-start; gap: 6px; }
.kb-bg-dark .kb-standort-name { color: #FDFBF7; }
.kb-bg-dark .kb-standort-info { color: rgba(253,251,247,.55); }

/* ── SHARED LINK ─────────────────────────────────────────────────────────── */
.kb-book-link {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--kb-taupe);
  border-bottom:  1px solid transparent;
  transition:     border-color var(--tr);
  margin-top:     12px;
  text-decoration:none;
}
.kb-book-link:hover { border-bottom-color: var(--kb-taupe); color: var(--kb-taupe); }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.kb-footer {
  background:   var(--kb-dark);
  color:        rgba(253,251,247,.5);
  padding:      56px 0 28px;
  border-top:   1px solid rgba(255,255,255,.06);
}
.footer-brand        { max-width: 260px; }
.footer-logo-img     { height: 32px; width: auto; margin-bottom: 14px; border-radius: 3px; }
.footer-brand-desc   { font-size: .8125rem; line-height: 1.7; margin-bottom: 16px; }
.footer-social       { display: flex; gap: 8px; }
.social-link {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(253,251,247,.5); transition: all var(--tr);
}
.social-link:hover { background: var(--kb-taupe); color: #FDFBF7; border-color: var(--kb-taupe); }
.footer-col-title { font-size: .625rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(253,251,247,.3); margin-bottom: 14px; }
.footer-links     { list-style: none; padding: 0; margin: 0; }
.footer-links li  { margin-bottom: 6px; }
.footer-links a   { font-size: .84375rem; color: rgba(253,251,247,.5); transition: color var(--tr); }
.footer-links a:hover { color: var(--kb-taupe-l); }
.footer-loc-name  { display: block; font-size: .875rem; color: rgba(253,251,247,.7); margin-bottom: 4px; }
.footer-loc-addr  { display: block; font-size: .78rem; color: rgba(253,251,247,.4); }
.footer-loc-phone { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: rgba(253,251,247,.4); transition: color var(--tr); }
.footer-loc-phone:hover { color: var(--kb-taupe-l); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.07);
  font-size: .75rem; flex-wrap: wrap; gap: 8px;
}
.footer-bottom a { color: rgba(253,251,247,.4); transition: color var(--tr); margin: 0 3px; }
.footer-bottom a:hover { color: var(--kb-taupe-l); }

/* ── SCROLL REVEAL ───────────────────────────────────────────────────────── */
.reveal {
  opacity:   0;
  transform: translateY(22px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── SCROLL TO TOP ───────────────────────────────────────────────────────── */
#scroll-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--kb-dark); color: #FDFBF7;
  border: none; display: flex; align-items: center; justify-content: center;
  font-size: 1rem; opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  transform: translateY(8px);
}

/* ── HERO SLIDER (Bootstrap Carousel override) ──────────────────────────── */
.kb-hero-slider {
  position:   relative;
  margin-top: 68px;
}
.kb-slide-img-wrap {
  position:   relative;
  height:     clamp(420px, 70vh, 720px);
  overflow:   hidden;
}
.kb-slide-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.kb-slide-overlay {
  position:   absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(45,49,52,.72) 0%,
    rgba(45,49,52,.35) 55%,
    rgba(45,49,52,.1) 100%
  );
}
.carousel-indicators [data-bs-target] {
  width:  8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: none;
  transition: background .3s, transform .3s;
}
.carousel-indicators .active {
  background: var(--kb-white);
  transform: scale(1.3);
}
.carousel-control-prev,
.carousel-control-next {
  width: 52px;
  opacity: .7;
  transition: opacity .2s;
}
.carousel-control-prev:hover,
.carousel-control-next:hover { opacity: 1; }

.kb-slide-caption {
  bottom: 28px !important;
  left:   clamp(20px, 5vw, 60px) !important;
  right:  auto !important;
  text-align: left !important;
  max-width: 480px;
  padding: 0 !important;
}
.kb-slide-caption-text {
  font-family:    var(--ff-serif);
  font-size:      clamp(.875rem, 1.5vw, 1.0625rem);
  font-style:     italic;
  color:          rgba(253,251,247,.8);
  margin:         0;
  background:     rgba(45,49,52,.35);
  display:        inline;
  padding:        2px 8px;
  border-radius:  2px;
}

/* Overlay-Hero-Text auf dem Slider */
.kb-slider-hero-box {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display:  flex;
  align-items: center;
  pointer-events: none;
  z-index:  10;
}
.kb-slider-hero-inner {
  pointer-events: all;
  padding: clamp(24px, 5vw, 56px) 0;
  max-width: 560px;
}

/* Light-variants fuer dunklen Hintergrund */
.kb-badge--light {
  background:   rgba(253,251,247,.15);
  color:        rgba(253,251,247,.85);
  border:       1px solid rgba(253,251,247,.2);
}
.kb-hero-stats--light .kb-stat-val { color: var(--kb-white); }
.kb-hero-stats--light .kb-stat-lbl { color: rgba(253,251,247,.55); }
.kb-hero-stats--light              { border-top-color: rgba(253,251,247,.15); }

.kb-btn-white {
  background: var(--kb-white);
  color:      var(--kb-dark);
}
.kb-btn-white:hover {
  background: var(--kb-nude);
  color:      var(--kb-dark);
  transform:  translateY(-2px);
}
.kb-btn-outline-white {
  background:  transparent;
  color:        rgba(253,251,247,.85);
  border:       1px solid rgba(253,251,247,.4);
}
.kb-btn-outline-white:hover {
  background: rgba(253,251,247,.1);
  color:       var(--kb-white);
}

/* Single hero row height */
.kb-hero-row { min-height: calc(100vh - 68px); }
@media (max-width: 992px) { .kb-hero-row { min-height: auto; } }

/* ── PAGE HEADER ─────────────────────────────────────────────────────────── */
.kb-page-header {
  padding: 40px 0 48px;
  background: var(--kb-nude);
  margin-top: 68px;
  border-bottom: 1px solid var(--kb-line);
}
.kb-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         6px;
  font-size:   .75rem;
  color:       rgba(45,49,52,.5);
  margin-bottom: 12px;
  flex-wrap:   wrap;
}
.kb-breadcrumb a:hover { color: var(--kb-taupe); }
.kb-breadcrumb .bi { font-size: .6rem; opacity: .5; }
.kb-page-title {
  font-family:    var(--ff-serif);
  font-size:      clamp(2rem, 5vw, 3.25rem);
  font-weight:    300;
  line-height:    1.1;
  letter-spacing: -.02em;
  margin:         0 0 8px;
}
.kb-page-title em { font-style: italic; color: var(--kb-taupe); }
.kb-page-sub { color: rgba(45,49,52,.6); max-width: 560px; margin: 0; }

/* ── CATEGORY NAV ────────────────────────────────────────────────────────── */
.kb-cat-nav {
  background:   rgba(253,251,247,.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kb-line);
  padding: 0;
}
.kb-cat-nav-inner {
  display:    flex;
  gap:        0;
  overflow-x: auto;
  padding:    0 0;
  scrollbar-width: none;
}
.kb-cat-nav-inner::-webkit-scrollbar { display: none; }
.kb-cat-nav-link {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        12px 20px;
  font-size:      .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.5);
  white-space:    nowrap;
  border-bottom:  2px solid transparent;
  transition:     all var(--tr);
}
.kb-cat-nav-link:hover  { color: var(--kb-dark); border-bottom-color: var(--kb-taupe); }
.kb-cat-count {
  background:     var(--kb-nude);
  color:          var(--kb-taupe);
  padding:        1px 6px;
  border-radius:  10px;
  font-size:      .625rem;
}

/* ── SERVICES CATEGORY BLOCK ─────────────────────────────────────────────── */
.kb-services-cat-block { margin-bottom: 16px; }
.kb-services-cat-header {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 20px;
  padding-bottom:12px;
  border-bottom: 1px solid var(--kb-line);
}
.kb-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kb-services-cat-title {
  font-family: var(--ff-serif);
  font-size:   1.5rem;
  font-weight: 400;
  margin: 0;
}
.kb-service-card--full { border-radius: var(--kb-r); overflow: hidden; }
.kb-service-card-img { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.kb-service-card-img img { width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.kb-service-card--full:hover .kb-service-card-img img { transform: scale(1.05); }
.kb-service-card-icon-wrap {
  position:        relative;
  aspect-ratio:    16/9;
  background:      var(--kb-nude);
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.kb-service-card-big-icon { font-size: 2.5rem; color: var(--kb-taupe); }
.kb-featured-badge {
  position:       absolute; top: 10px; right: 10px;
  background:     var(--kb-dark);
  color:          var(--kb-white);
  padding:        3px 9px;
  border-radius:  20px;
  font-size:      .625rem;
  letter-spacing: .08em;
  display:        flex;
  align-items:    center;
  gap:            4px;
}
.kb-service-card-body   { padding: 16px; display:flex; flex-direction:column; flex:1; }
.kb-service-duration    { font-size: .75rem; color: rgba(45,49,52,.5); margin: 2px 0 0; display: flex; align-items:center; gap:4px; }
.kb-btn-sm              { padding: 7px 14px !important; font-size: .7rem !important; }

/* ── CTA BAND ────────────────────────────────────────────────────────────── */
.kb-cta-band {
  background: var(--kb-dark);
  padding:    40px 0;
}

/* ── TEAM PAGE EXTRA ─────────────────────────────────────────────────────── */
.kb-team-card--full   .kb-team-photo { aspect-ratio: 3/4; }
.kb-team-photo-badges {
  position: absolute; bottom: 12px; left: 12px;
  display:  flex; flex-direction: column; gap: 6px;
}
.kb-team-location {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background:     rgba(45,49,52,.75);
  color:          var(--kb-white);
  padding:        3px 10px;
  border-radius:  20px;
  font-size:      .65rem;
  letter-spacing: .07em;
}

/* ── GALLERY MASONRY ─────────────────────────────────────────────────────── */
.kb-gallery-grid--masonry {
  columns:     3;
  column-gap:  8px;
}
.kb-gallery-grid--masonry .kb-gallery-item {
  break-inside: avoid;
  margin-bottom: 8px;
  aspect-ratio:  unset;
  display:       block;
}
.kb-gallery-grid--masonry .kb-gallery-item img { height: auto; }
.kb-gallery-grid--masonry .kb-gallery-item--wide { column-span: all; }
@media(max-width:768px) { .kb-gallery-grid--masonry { columns:2; } }
@media(max-width:480px) { .kb-gallery-grid--masonry { columns:1; } }

/* ── CONTACT ─────────────────────────────────────────────────────────────── */
.kb-contact-card {
  border:        1px solid var(--kb-line);
  border-radius: var(--kb-r);
  overflow:      hidden;
}
.kb-contact-card-header {
  padding:    20px 22px 14px;
  background: var(--kb-nude);
  border-bottom: 1px solid var(--kb-line);
}
.kb-contact-card-body { padding: 20px 22px; }
.kb-hours-table { font-size: .8125rem; }
.kb-hours-table td { padding: 3px 0; }
.kb-hours-day  { width: 36px; font-weight: 500; color: rgba(45,49,52,.7); }
.kb-hours-time { color: rgba(45,49,52,.6); }
.kb-contact-form-wrap { padding: 32px; background: var(--kb-nude); border-radius: var(--kb-r); }

/* ── FORM ELEMENTS ───────────────────────────────────────────────────────── */
.kb-label {
  display:        block;
  font-size:      .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.65);
  margin-bottom:  6px;
}
.kb-input {
  display:       block;
  width:         100%;
  padding:       10px 14px;
  background:    var(--kb-white);
  border:        1px solid var(--kb-line);
  border-radius: var(--kb-r);
  font-family:   var(--ff-sans);
  font-size:     .9375rem;
  color:         var(--kb-dark);
  transition:    border-color var(--tr);
  outline:       none;
}
.kb-input:focus { border-color: var(--kb-taupe); }
.kb-textarea { resize: vertical; min-height: 120px; }
.kb-check-label { font-size: .8125rem; color: rgba(45,49,52,.7); }
.kb-check-label a { color: var(--kb-taupe); }

/* ── BOOKING WIZARD ──────────────────────────────────────────────────────── */
.kb-steps {
  display:     flex;
  align-items: center;
  gap:         0;
}
.kb-step {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.kb-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background:    var(--kb-line);
  color:         rgba(45,49,52,.4);
  display:       flex;
  align-items:   center;
  justify-content:center;
  font-size:     .8125rem;
  font-weight:   500;
  transition:    all var(--tr);
  flex-shrink:   0;
}
.kb-step-label { font-size: .78rem; letter-spacing:.06em; text-transform: uppercase; color: rgba(45,49,52,.4); transition: color var(--tr); }
.kb-step.active .kb-step-num   { background: var(--kb-dark); color: var(--kb-white); }
.kb-step.active .kb-step-label { color: var(--kb-dark); }
.kb-step.done .kb-step-num     { background: var(--kb-taupe); color: var(--kb-white); }
.kb-step.done .kb-step-label   { color: var(--kb-taupe); }
.kb-step-line { flex: 1; height: 1px; background: var(--kb-line); min-width: 24px; }

.kb-pick-card {
  border:        1px solid var(--kb-line);
  border-radius: var(--kb-r);
  padding:       14px;
  cursor:        pointer;
  transition:    all var(--tr);
  height:        100%;
  display:       flex;
  align-items:   center;
  gap:           12px;
}
.kb-pick-card:hover  { border-color: var(--kb-taupe); background: var(--kb-nude); }
.kb-pick-card.selected { border-color: var(--kb-dark); background: rgba(45,49,52,.05); }
.kb-pick-icon  { font-size: 1.375rem; color: var(--kb-taupe); flex-shrink: 0; }
.kb-pick-name  { font-size: .875rem; font-weight: 500; margin: 0; }
.kb-pick-meta  { font-size: .75rem; color: rgba(45,49,52,.5); margin: 2px 0 0; }
.kb-pick-check { margin-left: auto; font-size: 1rem; color: var(--kb-taupe); opacity: 0; transition: opacity var(--tr); }
.kb-pick-card.selected .kb-pick-check { opacity: 1; }

.kb-pick-card--staff { flex-direction: column; align-items: center; text-align: center; padding: 16px 10px; }
.kb-staff-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; border: 2px solid var(--kb-line); }
.kb-staff-avatar img { width:100%; height:100%; object-fit:cover; }
.kb-staff-avatar--any { background: var(--kb-nude); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color: var(--kb-taupe); }

.kb-filter-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-filter-btn {
  padding:        6px 14px;
  background:     var(--kb-nude);
  border:         1px solid var(--kb-line);
  border-radius:  20px;
  font-size:      .75rem;
  letter-spacing: .06em;
  color:          rgba(45,49,52,.6);
  cursor:         pointer;
  transition:     all var(--tr);
}
.kb-filter-btn.active,
.kb-filter-btn:hover { background: var(--kb-dark); color: var(--kb-white); border-color: var(--kb-dark); }

.kb-time-slots { display: flex; flex-wrap: wrap; gap: 7px; }
.kb-time-btn {
  padding:        7px 13px;
  background:     var(--kb-white);
  border:         1px solid var(--kb-line);
  border-radius:  var(--kb-r);
  font-size:      .8125rem;
  cursor:         pointer;
  transition:     all var(--tr);
  color:          var(--kb-dark);
}
.kb-time-btn:hover   { border-color: var(--kb-taupe); background: var(--kb-nude); }
.kb-time-btn.selected{ background: var(--kb-dark); color: var(--kb-white); border-color: var(--kb-dark); }

.kb-booking-summary {
  position:      sticky;
  top:           88px;
  padding:       24px;
  background:    var(--kb-nude);
  border:        1px solid var(--kb-line);
  border-radius: var(--kb-r);
}

/* ── HOME FOOTER JS reveal for gallery tabs ───────────────────────────────── */
.kb-gallery-tabs .kb-cat-count {
  font-size:.6rem; padding:1px 5px;
}

/* ── SECTION: hero-page ──────────────────────────────────────────────────── */
.kb-page-hero {
  position:   relative;
  margin-top: 68px;
  overflow:   hidden;
}
.kb-page-hero--img  { min-height: clamp(280px, 40vh, 500px); }
.kb-page-hero--nude { background: var(--kb-nude); padding: 56px 0 52px; }

.kb-page-hero-bg {
  position:   absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.kb-page-hero-overlay {
  position:   absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(45,49,52,.78) 0%,
    rgba(45,49,52,.42) 60%,
    rgba(45,49,52,.15) 100%
  );
}
.kb-page-hero-inner {
  position: relative;
  z-index:  2;
  padding:  clamp(40px,6vh,80px) 0;
  max-width:680px;
}
.kb-page-hero-title {
  font-family:    var(--ff-serif);
  font-size:      clamp(2rem,5vw,3.5rem);
  font-weight:    300;
  line-height:    1.1;
  letter-spacing: -.02em;
  margin:         .75rem 0 0;
}
.kb-page-hero-title em { font-style: italic; color: var(--kb-taupe); }
.text-white .kb-page-hero-title em,
.kb-page-hero-title.text-white em { color: var(--kb-taupe-l); }

.kb-page-hero-sub   { font-size: 1rem; line-height: 1.7; max-width: 520px; margin-top: .75rem; }
.text-white-60      { color: rgba(253,251,247,.65); }
.kb-breadcrumb--light a,
.kb-breadcrumb--light span { color: rgba(253,251,247,.6); }
.kb-breadcrumb--light a:hover { color: var(--kb-white); }
.kb-breadcrumb--light .bi    { color: rgba(253,251,247,.3); }

/* Dark standort card variant */
.kb-standort-card--dark {
  background:  rgba(253,251,247,.07);
  border-color: rgba(253,251,247,.12);
}
.kb-standort-card--dark .kb-standort-name { color: var(--kb-white); }
.kb-standort-card--dark .kb-standort-info { color: rgba(253,251,247,.55); }

/* ════════════════════════════════════════════════════════════════
   PORTAL STYLES (nur wenn body.portal-home)
════════════════════════════════════════════════════════════════ */

/* ── Portal Nav ─────────────────────────────────────────────── */
.kb-portal-nav {
  position:        fixed; top: 0; left: 0; right: 0; z-index: 200;
  height:          64px;
  background:      rgba(45,49,52,.92);
  backdrop-filter: blur(14px);
  border-bottom:   1px solid rgba(255,255,255,.07);
  transition:      box-shadow .3s;
}
.kb-portal-nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.3); }

.kb-portal-logo-icon {
  width: 36px; height: 36px;
  background: var(--kb-taupe);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; color: var(--kb-white);
  flex-shrink: 0;
}
.kb-portal-logo-text {
  font-family: var(--ff-serif); font-size: 1.125rem;
  font-weight: 400; color: var(--kb-white); line-height: 1;
}
.kb-portal-logo-text em { font-style: italic; color: var(--kb-taupe-l); }
.kb-portal-logo-tag {
  display: block; font-size: .55rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(253,251,247,.35);
  margin-top: 2px;
}
.kb-portal-nav-link {
  font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(253,251,247,.5); transition: color var(--tr);
}
.kb-portal-nav-link:hover { color: var(--kb-white); }
.kb-btn-portal-cta {
  background:     var(--kb-taupe);
  color:          var(--kb-white);
  padding:        9px 20px;
  border-radius:  var(--kb-r);
  font-size:      .78rem; letter-spacing: .08em;
  text-transform: uppercase; border: none;
  display:        inline-flex; align-items: center; gap: 6px;
  transition:     background var(--tr), transform var(--tr);
}
.kb-btn-portal-cta:hover { background: var(--kb-dark); color: var(--kb-white); transform: translateY(-1px); }

/* ── Portal Hero ─────────────────────────────────────────────── */
.kb-portal-hero {
  position:     relative; margin-top: 64px;
  min-height:   clamp(540px, 75vh, 820px);
  overflow:     hidden;
  display:      flex; align-items: center;
}
.kb-portal-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 25%;
}
.kb-portal-hero-overlay {
  position:   absolute; inset: 0;
  background: linear-gradient(
    135deg,
    rgba(45,49,52,.88) 0%,
    rgba(45,49,52,.55) 50%,
    rgba(45,49,52,.25) 100%
  );
}
.kb-portal-hero-inner {
  position: relative; z-index: 2;
  padding: 64px 0; max-width: 700px;
}
.kb-portal-eyebrow {
  display:        inline-flex; align-items: center; gap: 7px;
  font-size:      .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kb-taupe-l);
  margin-bottom:  16px;
}
.kb-portal-hero-title {
  font-family:    var(--ff-serif);
  font-size:      clamp(2.5rem, 6vw, 5rem);
  font-weight:    300; line-height: 1.0;
  letter-spacing: -.025em; color: var(--kb-white);
  margin:         0 0 4px;
}
.kb-portal-hero-title em { font-style: italic; color: var(--kb-taupe-l); }
.kb-portal-hero-sub {
  font-size: 1.0625rem; color: rgba(253,251,247,.65);
  max-width: 520px;
}

/* Search */
.kb-portal-search-inner {
  display:       flex; align-items: center;
  background:    rgba(253,251,247,.95);
  border-radius: var(--kb-r); overflow: hidden;
  max-width:     540px;
  box-shadow:    0 8px 32px rgba(0,0,0,.25);
}
.kb-portal-search-icon {
  padding: 0 14px; color: rgba(45,49,52,.4); font-size: 1rem; flex-shrink: 0;
}
.kb-portal-search-input {
  flex: 1; padding: 13px 4px; border: none; background: transparent;
  font-family: var(--ff-sans); font-size: .9375rem; outline: none;
  color: var(--kb-dark);
}
.kb-portal-search-input::placeholder { color: rgba(45,49,52,.4); }

/* Stats */
.kb-portal-stats {
  display: flex; gap: 36px; flex-wrap: wrap;
  border-top: 1px solid rgba(253,251,247,.12); padding-top: 36px;
}
.kb-portal-stat-val {
  font-family: var(--ff-serif); font-size: 2.25rem;
  font-weight: 300; color: var(--kb-white); line-height: 1;
}
.kb-portal-stat-lbl {
  font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(253,251,247,.45); margin-top: 4px;
}

/* ── Portal Sections ─────────────────────────────────────────── */
.kb-portal-section { padding: 88px 0; background: var(--kb-white); }
.kb-portal-dark     { background: var(--kb-dark); }
.kb-portal-section-eyebrow {
  font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kb-taupe); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.kb-portal-section-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--kb-taupe);
}
.kb-portal-eyebrow--light { color: var(--kb-taupe-l); }
.kb-portal-eyebrow--light::before { background: var(--kb-taupe-l); }
.kb-portal-section-title {
  font-family: var(--ff-serif);
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 0;
}
.kb-portal-section-title em { font-style: italic; color: var(--kb-taupe); }

/* ── Salon Cards ─────────────────────────────────────────────── */
.kb-portal-card {
  background:    var(--kb-white);
  border:        1px solid var(--kb-line);
  border-top:    3px solid var(--salon-color, var(--kb-taupe));
  display:       flex; flex-direction: column;
  transition:    box-shadow var(--tr), transform var(--tr);
  overflow:      hidden;
}
.kb-portal-card:hover {
  box-shadow: 0 16px 48px rgba(45,49,52,.14);
  transform:  translateY(-4px);
}

.kb-portal-card-cover {
  display: block; position: relative;
  aspect-ratio: 16/9; overflow: hidden;
}
.kb-portal-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.kb-portal-card:hover .kb-portal-card-cover img { transform: scale(1.05); }
.kb-portal-card-cover-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(45,49,52,.5) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--tr);
}
.kb-portal-card:hover .kb-portal-card-cover-overlay { opacity: 1; }

.kb-portal-plan-badge {
  position:       absolute; top: 10px; right: 10px;
  padding:        3px 9px; border-radius: 20px;
  font-size:      .6rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500;
}
.kb-portal-plan-free       { background:rgba(45,49,52,.7); color:rgba(253,251,247,.8); }
.kb-portal-plan-starter    { background:rgba(122,158,143,.8); color:#fff; }
.kb-portal-plan-pro        { background:rgba(169,146,133,.9); color:#fff; }
.kb-portal-plan-enterprise { background:rgba(45,49,52,.9); color:var(--kb-taupe-l); }

.kb-portal-card-body {
  padding: 20px; display: flex; flex-direction: column; flex: 1;
}
.kb-portal-salon-logo {
  width: 48px; height: 48px; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--kb-line); flex-shrink: 0;
  background: var(--kb-nude);
}
.kb-portal-salon-logo img { width: 100%; height: 100%; object-fit: cover; }
.kb-portal-salon-name {
  font-family: var(--ff-serif); font-size: 1.0625rem; font-weight: 400; margin: 0 0 2px;
}
.kb-portal-salon-city {
  font-size: .75rem; color: rgba(45,49,52,.5); margin: 0;
  display: flex; align-items: center; gap: 4px;
}
.kb-portal-salon-desc {
  font-size: .8125rem; color: rgba(45,49,52,.65);
  line-height: 1.6; margin: 8px 0;
}
.kb-portal-salon-stats {
  display: flex; flex-wrap: wrap; gap: 10px;
  font-size: .75rem; color: rgba(45,49,52,.5);
  margin: 8px 0; padding: 10px 0;
  border-top: 1px solid var(--kb-line); border-bottom: 1px solid var(--kb-line);
}
.kb-portal-salon-stats span { display: flex; align-items: center; gap: 4px; }
.kb-portal-salon-rating {
  display: flex; align-items: center; gap: 6px; margin: 8px 0;
}
.kb-portal-stars     { color: #C9A060; font-size: .875rem; letter-spacing: 1px; }
.kb-portal-rating-val{ font-family: var(--ff-serif); font-size: 1rem; font-weight: 400; }
.kb-portal-rating-count { font-size: .75rem; color: rgba(45,49,52,.45); }

.kb-portal-card-cta {
  display:        inline-flex; align-items: center; gap: 6px;
  font-size:      .78rem; letter-spacing: .08em; text-transform: uppercase;
  color:          var(--salon-color, var(--kb-taupe));
  margin-top:     12px;
  border-bottom:  1px solid transparent; padding-bottom: 1px;
  transition:     border-color var(--tr);
}
.kb-portal-card-cta:hover { border-bottom-color: var(--salon-color, var(--kb-taupe)); }

/* ── Plan Cards ──────────────────────────────────────────────── */
.kb-portal-plan-card {
  padding:       18px; background: rgba(255,255,255,.06);
  border:        1px solid rgba(255,255,255,.1);
  border-radius: var(--kb-r);
}
.kb-portal-plan-card--highlight {
  background:   rgba(169,146,133,.15);
  border-color: rgba(169,146,133,.3);
}
.kb-portal-plan-name  { font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--kb-taupe-l); margin:0 0 4px; }
.kb-portal-plan-price { font-family:var(--ff-serif); font-size:1.375rem; color:var(--kb-white); margin:0 0 10px; }
.kb-portal-plan-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.kb-portal-plan-features li {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; color: rgba(253,251,247,.6);
}
.kb-portal-plan-features .bi { color: var(--kb-taupe-l); flex-shrink: 0; }

/* ── Portal Footer ───────────────────────────────────────────── */
.kb-portal-footer {
  background: var(--kb-dark); padding: 32px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════════════════════════════
   PORTAL PROMO GRUPPEN + KATEGORIE + SOFTWARE BADGE
════════════════════════════════════════════════════════════════ */

/* ── Promo Section ───────────────────────────────────────────── */
.kb-portal-promo-section {
  background:    var(--promo-bg, #FDFBF7);
  padding:       64px 0;
  border-bottom: 1px solid rgba(45,49,52,.06);
}
.kb-portal-promo-section:first-child { border-top: none; }

.kb-portal-promo-header { margin-bottom: 36px; }

.kb-portal-promo-badge-label {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        4px 14px;
  background:     var(--promo-color, #A99285);
  color:          #fff;
  border-radius:  20px;
  font-size:      .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight:    500;
  margin-bottom:  10px;
}
.kb-portal-promo-title {
  font-family:    var(--ff-serif);
  font-size:      clamp(1.5rem, 3vw, 2.25rem);
  font-weight:    300;
  margin:         0 0 4px;
}
.kb-portal-promo-sub {
  font-size: .875rem; color: rgba(45,49,52,.5); margin: 0;
}

/* ── Promo Badge auf Karte ───────────────────────────────────── */
.kb-portal-promo-badge {
  position:       absolute;
  top:            10px; left: 10px;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  padding:        4px 10px;
  background:     var(--promo-color, #A99285);
  color:          #fff;
  border-radius:  20px;
  font-size:      .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight:    600;
  box-shadow:     0 2px 8px rgba(0,0,0,.15);
}

/* Preis-Badge rechts oben */
.kb-portal-price-badge {
  position:       absolute;
  top:            10px; right: 10px;
  padding:        3px 9px;
  background:     rgba(45,49,52,.75);
  color:          rgba(253,251,247,.9);
  border-radius:  20px;
  font-size:      .65rem;
  letter-spacing: .05em;
}

/* ── Karte Promo-Variante ─────────────────────────────────────── */
.kb-portal-card--promo {
  border-top:  3px solid var(--salon-color, var(--kb-taupe));
  box-shadow:  0 4px 24px rgba(45,49,52,.08);
}
.kb-portal-card--promo:hover {
  box-shadow: 0 20px 56px rgba(45,49,52,.16);
  transform:  translateY(-5px);
}

/* Card Header (Logo + Name) */
.kb-portal-card-header {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  margin-bottom: 10px;
}
.kb-portal-salon-name { margin: 0; }
.kb-portal-salon-name a { color: inherit; text-decoration: none; }
.kb-portal-salon-name a:hover { color: var(--kb-taupe); }

/* ── Software Badge (Karte) ──────────────────────────────────── */
.kb-software-badge {
  margin-top:   12px;
  padding-top:  10px;
  border-top:   1px solid var(--kb-line);
}
.kb-software-badge-inner {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-wrap:   wrap;
}
.kb-software-badge-item {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      .625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.45);
  font-weight:    500;
}
.kb-software-badge-item .bi { font-size: .6875rem; }
.kb-software-badge-link {
  color:          var(--kb-taupe);
  text-decoration:none;
}
.kb-software-badge-link:hover { color: var(--kb-dark); }
.kb-software-badge-sep { color: rgba(45,49,52,.25); font-size: .625rem; }
.kb-software-badge-sub {
  font-size: .5625rem; font-weight: 400; opacity: .7;
}

/* ── Software Badge (Portal Footer) ─────────────────────────── */
.kb-portal-tech-badge {
  display:         flex;
  align-items:     center;
  gap:             6px;
  padding:         5px 12px;
  background:      rgba(255,255,255,.07);
  border:          1px solid rgba(255,255,255,.1);
  border-radius:   20px;
}
.kb-portal-tech-item {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  font-size:      .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          rgba(253,251,247,.5);
}
.kb-portal-tech-item .bi { font-size: .75rem; }
.kb-portal-tech-link { color: var(--kb-taupe-l); text-decoration: none; }
.kb-portal-tech-link:hover { color: var(--kb-white); }
.kb-portal-tech-sep { color: rgba(253,251,247,.2); font-size: .625rem; }

/* ── Kategorie-Bar ───────────────────────────────────────────── */
.kb-portal-cat-bar {
  background:    rgba(253,251,247,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kb-line);
  position:      sticky;
  top:           64px;
  z-index:       100;
}
.kb-portal-cat-inner {
  display:        flex;
  gap:            2px;
  overflow-x:     auto;
  padding:        0;
  scrollbar-width:none;
}
.kb-portal-cat-inner::-webkit-scrollbar { display: none; }

.kb-portal-cat-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  padding:        12px 18px;
  font-size:      .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color:          rgba(45,49,52,.5);
  white-space:    nowrap;
  border-bottom:  2px solid transparent;
  transition:     all var(--tr);
  text-decoration:none;
}
.kb-portal-cat-btn:hover { color: var(--kb-dark); }
.kb-portal-cat-btn.active {
  color:         var(--kb-dark);
  border-bottom-color: var(--kb-taupe);
}
.kb-portal-cat-dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.kb-portal-cat-count {
  font-size: .55rem; padding: 1px 5px;
  background: var(--kb-nude); color: var(--kb-taupe);
  border-radius: 10px;
}

/* ── Kategorie Hero ──────────────────────────────────────────── */
.kb-portal-cat-hero {
  margin-top:    64px;
  padding:       48px 0;
  background:    linear-gradient(135deg,
    color-mix(in srgb, var(--cat-color) 15%, var(--kb-dark)) 0%,
    color-mix(in srgb, var(--cat-color) 8%,  var(--kb-dark)) 100%
  );
  position:      relative;
  overflow:      hidden;
}
.kb-portal-cat-hero::after {
  content: ''; position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: var(--cat-color);
  opacity: .08; border-radius: 50%;
}

/* ── Portal Section Header ───────────────────────────────────── */
.kb-portal-section-header { }
.kb-portal-section { padding: 72px 0; background: var(--kb-white); }

/* ── Plan Grid (2×2) ─────────────────────────────────────────── */
.kb-portal-plan-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px;
}
.kb-portal-plan-header {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
}
.kb-portal-plan-header .bi { font-size: .875rem; }

/* ── Feature Grid ────────────────────────────────────────────── */
.kb-portal-features-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   12px 24px;
  margin-top:            24px;
}
.kb-portal-feature-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   .875rem;
  color:       rgba(253,251,247,.75);
}
.kb-portal-feature-item .bi {
  color:       var(--kb-taupe-l);
  font-size:   1rem;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   PORTAL 2.0 — kbp-* namespace
════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --kbp-dark:   #1E2022;
  --kbp-taupe:  #A99285;
  --kbp-nude:   #F0E8E3;
  --kbp-white:  #FDFBF7;
  --kbp-line:   rgba(169,146,133,.15);
}

/* ── NAV ─────────────────────────────────────────────────────── */
.kbp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(30,32,34,.92);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kbp-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 20px;
}
.kbp-nav-brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex-shrink: 0;
}
.kbp-nav-gem {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--kbp-taupe);
  display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; color: #fff; flex-shrink: 0;
}
.kbp-nav-wordmark {
  font-family: var(--ff-serif); font-size: 1.125rem;
  font-weight: 400; color: var(--kbp-white); line-height: 1;
}
.kbp-nav-wordmark em { font-style: italic; color: var(--kbp-taupe); }
.kbp-nav-wordmark small,
.kbp-portal-logo-tag {
  display: block; font-size: .5rem; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(253,251,247,.3);
  font-family: var(--ff-sans); font-weight: 400; margin-top: 2px;
}
.kbp-nav-links {
  display: flex; gap: 4px; flex: 1; overflow-x: auto;
  scrollbar-width: none; padding: 0 8px;
}
.kbp-nav-links::-webkit-scrollbar { display: none; }
.kbp-nav-link {
  font-size: .75rem; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(253,251,247,.5); padding: 5px 12px; border-radius: 20px;
  white-space: nowrap; transition: all var(--tr); text-decoration: none;
}
.kbp-nav-link:hover { color: var(--kbp-white); background: rgba(255,255,255,.07); }
.kbp-nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; background: var(--kbp-taupe); color: #fff;
  border-radius: var(--kb-r); font-size: .78rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background var(--tr), transform var(--tr); flex-shrink: 0;
}
.kbp-nav-cta:hover { background: var(--kbp-dark); transform: translateY(-1px); color: #fff; }

/* ── HERO ─────────────────────────────────────────────────────── */
.kbp-hero {
  position: relative; margin-top: 64px;
  min-height: clamp(560px, 78vh, 860px);
  display: flex; align-items: center; overflow: hidden;
}
.kbp-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.kbp-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(130deg,
    rgba(30,32,34,.90) 0%,
    rgba(30,32,34,.55) 52%,
    rgba(30,32,34,.18) 100%);
}
.kbp-hero-inner {
  position: relative; z-index: 2;
  padding: 64px 0; max-width: 680px;
}
.kbp-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kbp-taupe); margin-bottom: 14px;
}
.kbp-hero-h1 {
  font-family: var(--ff-serif);
  font-size: clamp(2.5rem,6vw,5.25rem);
  font-weight: 300; line-height: 1.02;
  letter-spacing: -.025em; color: var(--kbp-white); margin: 0;
}
.kbp-hero-h1 em { font-style: italic; color: var(--kbp-taupe); }
.kbp-hero-sub {
  font-size: 1.0625rem; color: rgba(253,251,247,.65);
  max-width: 500px; margin-top: .75rem;
}

/* Search */
.kbp-search {
  display: flex; align-items: center;
  background: rgba(253,251,247,.96);
  border-radius: var(--kb-r); max-width: 520px;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
  overflow: hidden; margin-top: 32px;
}
.kbp-search-ico { padding: 0 14px; color: rgba(45,49,52,.4); font-size: 1rem; flex-shrink: 0; }
.kbp-search-inp {
  flex: 1; padding: 13px 4px; border: none; background: transparent;
  font-family: var(--ff-sans); font-size: .9375rem; color: var(--kb-dark); outline: none;
}
.kbp-search-inp::placeholder { color: rgba(45,49,52,.4); }
.kbp-search-btn { border-radius: 0 var(--kb-r) var(--kb-r) 0 !important; }

/* Stats */
.kbp-hero-stats {
  display: flex; gap: 32px; flex-wrap: wrap;
  border-top: 1px solid rgba(253,251,247,.12); padding-top: 32px; margin-top: 32px;
}
.kbp-stat-n {
  font-family: var(--ff-serif); font-size: 2.25rem;
  font-weight: 300; color: var(--kbp-white); line-height: 1;
}
.kbp-stat-l {
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(253,251,247,.4); margin-top: 4px;
}

/* ── KATEGORIE-BAR ───────────────────────────────────────────── */
.kbp-cat-bar {
  background: rgba(253,251,247,.97); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kbp-line);
  position: sticky; top: 64px; z-index: 100;
}
.kbp-cat-scroll {
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0; scrollbar-width: none;
}
.kbp-cat-scroll::-webkit-scrollbar { display: none; }
.kbp-cat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px; font-size: .78rem; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(45,49,52,.5);
  white-space: nowrap; border-bottom: 2px solid transparent;
  transition: all var(--tr); text-decoration: none;
}
.kbp-cat-pill:hover { color: var(--kb-dark); }
.kbp-cat-pill.is-active { color: var(--kb-dark); border-bottom-color: var(--cc, var(--kbp-taupe)); }
.kbp-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cc, var(--kbp-taupe)); }
.kbp-cat-n {
  font-size: .55rem; padding: 1px 5px;
  background: var(--kbp-nude); color: var(--kbp-taupe); border-radius: 10px;
}

/* ── PROMO BANDS ─────────────────────────────────────────────── */
.kbp-promo-band {
  background:    var(--promo-bg, #FDFBF7);
  border-bottom: 1px solid var(--pb, rgba(169,146,133,.15));
  padding:       64px 0;
}
.kbp-promo-head { margin-bottom: 32px; }
.kbp-promo-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 14px; background: var(--pc, #A99285); color: #fff;
  border-radius: 20px; font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 10px;
}
.kbp-promo-title {
  font-family: var(--ff-serif); font-size: clamp(1.5rem,3vw,2.25rem);
  font-weight: 300; margin: 0 0 4px; color: var(--kb-dark);
}
.kbp-promo-meta { font-size: .875rem; color: rgba(45,49,52,.45); margin: 0; }

.kbp-other-band  { padding: 72px 0; background: var(--kbp-white); }
.kbp-section-head { }
.kbp-section-eyebrow {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--kbp-taupe); margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px;
}
.kbp-section-eyebrow::before { content:''; width:22px; height:1px; background:var(--kbp-taupe); }
.kbp-section-title {
  font-family: var(--ff-serif); font-size: clamp(2rem,4vw,3rem);
  font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: 0;
}
.kbp-section-title em { font-style: italic; color: var(--kbp-taupe); }

/* ── SALON CARDS ─────────────────────────────────────────────── */
.kbp-card {
  background: var(--kbp-white);
  border: 1px solid var(--kbp-line);
  border-top: 3px solid var(--sc, var(--kbp-taupe));
  display: flex; flex-direction: column;
  transition: box-shadow .3s, transform .3s;
  overflow: hidden;
}
.kbp-card--g0:hover  { box-shadow: 0 12px 36px rgba(45,49,52,.10); transform: translateY(-3px); }
.kbp-card--g1:hover,
.kbp-card--g2:hover  { box-shadow: 0 20px 56px rgba(45,49,52,.16); transform: translateY(-5px); }
.kbp-card--g3:hover,
.kbp-card--g4:hover  { box-shadow: 0 16px 44px rgba(45,49,52,.12); transform: translateY(-4px); }

/* Cover */
.kbp-card-cover {
  display: block; position: relative;
  aspect-ratio: 16/9; overflow: hidden;
}
.kbp-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
.kbp-card:hover .kbp-card-cover img { transform: scale(1.05); }
.kbp-card-cover-dim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,32,34,.5) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--tr);
}
.kbp-card:hover .kbp-card-cover-dim { opacity: 1; }

/* Promo Pin (oben links) */
.kbp-promo-pin {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; background: var(--pc, #A99285); color: #fff;
  border-radius: 20px; font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.kbp-price-pin {
  position: absolute; top: 10px; right: 10px;
  padding: 3px 10px; background: rgba(30,32,34,.7); color: rgba(253,251,247,.9);
  border-radius: 20px; font-size: .65rem; letter-spacing: .04em;
}

/* Card Body */
.kbp-card-body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.kbp-card-head { display: flex; align-items: flex-start; gap: 11px; }
.kbp-logo-wrap {
  width: 44px; height: 44px; border-radius: 6px;
  overflow: hidden; border: 1px solid var(--kbp-line);
  background: var(--kbp-nude); flex-shrink: 0;
}
.kbp-logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.kbp-name-block {}
.kbp-salon-name {
  font-family: var(--ff-serif); font-size: 1.0625rem;
  font-weight: 400; margin: 0 0 2px; line-height: 1.2;
}
.kbp-salon-name a { color: inherit; text-decoration: none; }
.kbp-salon-name a:hover { color: var(--kbp-taupe); }
.kbp-city {
  font-size: .75rem; color: rgba(45,49,52,.5);
  margin: 0; display: flex; align-items: center; gap: 4px;
}
.kbp-city-extra { color: rgba(45,49,52,.35); }
.kbp-headline  { font-size: .8125rem; color: rgba(45,49,52,.65); line-height: 1.55; margin: 0; }
.kbp-stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .75rem; color: rgba(45,49,52,.5);
  padding: 8px 0; border-top: 1px solid var(--kbp-line); border-bottom: 1px solid var(--kbp-line);
}
.kbp-stats span { display: flex; align-items: center; gap: 4px; }
.kbp-cats { font-size: .7rem; color: rgba(45,49,52,.4); font-style: italic; }
.kbp-rating { display: flex; align-items: center; gap: 6px; }
.kbp-stars  { color: #C9A060; font-size: .8125rem; letter-spacing: 1px; }
.kbp-rating-n { font-size: .75rem; color: rgba(45,49,52,.4); }
.kbp-cta {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sc, var(--kbp-taupe)); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: border-color var(--tr);
}
.kbp-cta:hover { border-bottom-color: var(--sc, var(--kbp-taupe)); color: var(--sc, var(--kbp-taupe)); }

/* ── SOFTWARE BADGE (auf Karte) ──────────────────────────────── */
.kbp-badge-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding-top: 10px; border-top: 1px solid var(--kbp-line);
}
.kbp-badge-item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(45,49,52,.4); font-weight: 500;
}
.kbp-badge-item .bi { font-size: .6875rem; }
.kbp-badge-link { color: var(--kbp-taupe); text-decoration: none; }
.kbp-badge-link:hover { color: var(--kbp-dark); }
.kbp-badge-sep  { color: rgba(45,49,52,.2); font-size: .625rem; }
.kbp-badge-link em { font-style: normal; font-size: .5625rem; opacity: .7; margin-left: 2px; }
.kbp-mini-promo {
  display: inline-flex; align-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--pc, #A99285); justify-content: center;
  font-size: .5625rem; color: #fff; flex-shrink: 0;
}

/* ── FÜR SALONS ──────────────────────────────────────────────── */
.kbp-for-salons {
  background: var(--kbp-dark);
  padding: 96px 0;
}
.kbp-eyebrow-lt { color: var(--kbp-taupe) !important; }
.kbp-eyebrow-lt::before { background: var(--kbp-taupe) !important; }
.kbp-fs-sub {
  color: rgba(253,251,247,.6); font-size: 1rem;
  margin-top: 16px; max-width: 440px;
}
.kbp-features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px;
  margin-top: 24px;
}
.kbp-feature {
  display: flex; align-items: center; gap: 9px;
  font-size: .875rem; color: rgba(253,251,247,.7);
}
.kbp-feature .bi { color: var(--kbp-taupe); font-size: 1rem; flex-shrink: 0; }

.kbp-plans {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.kbp-plan {
  padding: 18px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--kb-r);
}
.kbp-plan--hl { background: rgba(169,146,133,.15); border-color: rgba(169,146,133,.3); }
.kbp-plan-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.kbp-plan-hd .bi { font-size: .875rem; }
.kbp-plan-name  { font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(253,251,247,.5); }
.kbp-plan-price { font-family: var(--ff-serif); font-size: 1.375rem; color: var(--kbp-white); margin: 0 0 10px; }
.kbp-plan-list  { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; }
.kbp-plan-list li { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: rgba(253,251,247,.6); }
.kbp-plan-list .bi { color: var(--kbp-taupe); flex-shrink: 0; }

/* ── FOOTER ──────────────────────────────────────────────────── */
.kbp-footer {
  background: var(--kbp-dark);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 32px 0;
}
.kbp-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 20px;
}
.kbp-footer-brand .kbp-nav-wordmark { font-size: 1.125rem; }
.kbp-footer-copy { font-size: .75rem; color: rgba(253,251,247,.3); margin: 4px 0 0; }
.kbp-footer-links {
  display: flex; gap: 20px;
}
.kbp-footer-links a { font-size: .8125rem; color: rgba(253,251,247,.35); text-decoration: none; }
.kbp-footer-links a:hover { color: var(--kbp-taupe); }

.kbp-tech-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
}
.kbp-tech-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .7rem; letter-spacing: .06em;
  color: rgba(253,251,247,.4); text-decoration: none;
}
.kbp-tech-item strong { font-weight: 500; color: rgba(253,251,247,.55); }
.kbp-tech-item .bi { font-size: .8125rem; }
.kbp-tech-link { color: var(--kbp-taupe); }
.kbp-tech-link strong { color: var(--kbp-taupe); }
.kbp-tech-link:hover { color: var(--kbp-white); }
.kbp-tech-link:hover strong { color: var(--kbp-white); }
.kbp-tech-sep { color: rgba(253,251,247,.15); font-size: .75rem; }

/* ── KATEGORIE HERO BAND ─────────────────────────────────────── */
.kbp-cat-hero-band {
  margin-top: 64px; padding: 56px 0;
  background: linear-gradient(130deg,
    color-mix(in srgb, var(--ch, #A99285) 30%, #1E2022) 0%,
    color-mix(in srgb, var(--ch, #A99285) 12%, #1E2022) 100%);
  position: relative; overflow: hidden;
}
.kbp-cat-hero-circle {
  position: absolute; top: -80px; right: -80px;
  width: 340px; height: 340px; border-radius: 50%;
  background: var(--ch, #A99285); opacity: .08;
  pointer-events: none;
}

/* ── PREIS-TABELLE (Leistungs-Unterseite) ────────────────────── */
.kbp-price-table {
  display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--kbp-line); border-radius: var(--kb-r); overflow: hidden;
}
.kbp-price-row {
  display: grid;
  grid-template-columns: 1fr 100px 100px 120px 100px;
  align-items: center;
  gap: 12px; padding: 14px 20px;
  background: var(--kbp-white);
  border-bottom: 1px solid var(--kbp-line);
  border-left: 3px solid var(--sc, var(--kbp-taupe));
  transition: background var(--tr);
}
.kbp-price-row:last-child { border-bottom: none; }
.kbp-price-row:hover { background: var(--kbp-nude); }
.kbp-price-row-salon {
  display: flex; align-items: center; gap: 8px; font-size: .9375rem;
}
.kbp-price-salon-name { color: var(--kb-dark); text-decoration: none; font-weight: 500; }
.kbp-price-salon-name:hover { color: var(--kbp-taupe); }
.kbp-price-row-price { font-family: var(--ff-serif); font-size: 1rem; color: var(--kbp-taupe); }
.kbp-price-row-dur   { font-size: .8125rem; color: rgba(45,49,52,.5); }
.kbp-price-row-dep   { font-size: .75rem; color: rgba(45,49,52,.45); }
.kbp-price-row-cta   { justify-self: end; }

@media (max-width: 600px) {
  .kbp-price-row { grid-template-columns: 1fr auto; }
  .kbp-price-row-dur,
  .kbp-price-row-dep { display: none; }
}