:root{
  --bg:#f7f2e8;
  --bg-soft:#efe7d8;
  --surface:#fffdf8;
  --surface-2:#f3ecdf;
  --text:#302b26;
  --muted:#746d64;
  --line:#ddd1c0;
  --accent:#967747;
  --accent-dark:#755b38;
  --accent-soft:#e8dcc9;
  --shadow:0 12px 28px rgba(68,54,37,.07);
  --radius:20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit}
.container{
  width:min(1180px, calc(100% - 36px));
  margin:0 auto;
}
.narrow{width:min(780px, calc(100% - 36px))}
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(247,242,232,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:13px;
  text-decoration:none;
}
.brand-mark{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--accent);
  color:white;
  font-weight:800;
  letter-spacing:.5px;
}
.brand strong{display:block;font-size:18px}
.brand small{display:block;color:var(--muted);font-size:12px}
.nav{display:flex;gap:22px;align-items:center}
.nav a{text-decoration:none;font-weight:700;font-size:14px}
.nav-cta{
  background:var(--accent);
  color:#fff;
  padding:11px 16px;
  border-radius:999px;
}
.nav-cta:hover{background:var(--accent-dark)}

.hero{
  padding:58px 0 52px;
  background:
    radial-gradient(circle at 86% 14%, #eadfcd 0 11%, transparent 34%),
    linear-gradient(180deg, #faf6ef 0%, var(--bg) 100%);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr;
  gap:44px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  color:var(--accent-dark);
  font-weight:800;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1.35px;
  margin-bottom:9px;
}
h1,h2,h3{line-height:1.15;margin-top:0}
h1{
  font-size:clamp(48px, 5vw, 68px);
  letter-spacing:-2px;
  margin-bottom:12px;
}
h2{font-size:clamp(29px, 3.5vw, 42px);letter-spacing:-1px}
h3{font-size:22px;margin-bottom:10px}
.hero-subtitle{
  font-size:24px;
  line-height:1.35;
  max-width:760px;
  margin:0 0 8px;
  font-weight:700;
}
.hero-text{
  font-size:18px;
  color:var(--muted);
  max-width:760px;
  margin-top:0;
}
.search-box{
  margin-top:24px;
  display:flex;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:17px;
  padding:7px;
  box-shadow:var(--shadow);
}
.search-box input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  padding:14px 16px;
  font-size:16px;
  outline:none;
}
.search-box button{
  border:0;
  background:var(--accent);
  color:white;
  font-weight:800;
  padding:0 24px;
  border-radius:12px;
  cursor:pointer;
}
.search-box button:hover{background:var(--accent-dark)}
.hero-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:47px;
  padding:0 20px;
  border-radius:13px;
  font-weight:800;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  font-size:15px;
}
.btn-primary{background:var(--accent);color:white}
.btn-primary:hover{background:var(--accent-dark)}
.btn-secondary{background:transparent;border-color:var(--line)}
.btn-secondary:hover{background:var(--surface)}
.hero-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:var(--shadow);
}
.hero-card-icon{
  width:58px;height:58px;
  display:grid;place-items:center;
  background:var(--accent-soft);
  border-radius:16px;
  font-weight:900;
  margin-bottom:16px;
  color:var(--accent-dark);
}
.hero-card h2{font-size:36px;margin-bottom:16px}
.hero-card p{color:var(--muted);margin-bottom:0}

.section{padding:62px 0}
.section-soft{background:var(--bg-soft)}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:28px;
}
.section-head p{max-width:480px;color:var(--muted);margin:0}
.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.category-card{
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:18px;
  padding:21px;
  text-align:left;
  font-size:16px;
  cursor:pointer;
  transition:.2s ease;
}
.category-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.category-icon{
  width:38px;
  height:38px;
  display:grid !important;
  place-items:center;
  border-radius:12px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:900;
  margin:0 0 12px !important;
}
.category-card > span:last-child{
  display:block;
  font-weight:800;
  margin-top:0;
}
.business-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.business-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.business-image{
  height:160px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #e8dece, #f5efe5);
  color:var(--muted);
  font-weight:800;
}
.business-body{padding:22px}
.badge{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent-dark);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800;
  margin-bottom:14px;
}
.business-body p{color:var(--muted)}
.business-meta{
  display:grid;
  gap:5px;
  font-size:14px;
  margin:18px 0;
}
.text-link{
  font-weight:800;
  color:var(--accent-dark);
  text-decoration:none;
}
.cta{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  box-shadow:var(--shadow);
}

.subhero{padding:58px 0 26px}
.entry-form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
label{
  display:grid;
  gap:8px;
  font-weight:800;
  margin-bottom:18px;
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
}
textarea{resize:vertical}
.checkline{
  grid-template-columns:auto 1fr;
  align-items:start;
  font-weight:500;
}
.checkline input{width:auto;margin-top:5px}
.no-results{
  background:var(--surface);
  border:1px dashed var(--line);
  padding:18px;
  border-radius:14px;
}
.site-footer{
  border-top:1px solid var(--line);
  padding:34px 0;
  background:#eee5d7;
}
.footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.footer-grid p{margin:6px 0 0;color:var(--muted)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{text-decoration:none;font-weight:700;font-size:14px}

@media (max-width:900px){
  .hero-grid,.business-grid{grid-template-columns:1fr}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .section-head,.cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:680px){
  .nav{display:none}
  .hero{padding-top:46px}
  h1{font-size:44px}
  .hero-subtitle{font-size:20px}
  .category-grid,.form-grid{grid-template-columns:1fr}
  .search-box{flex-direction:column}
  .search-box button{min-height:48px}
  .footer-grid{align-items:flex-start;flex-direction:column}
}


/* ===== V3: Datenbank, Formulare & Admin ===== */
.page-title{
  font-size:clamp(38px,5vw,58px);
  letter-spacing:-1.5px;
  margin-bottom:14px;
}
.section-form{padding-top:24px}
.full-field{grid-column:1/-1}
label small{font-weight:400;color:var(--muted)}
.notice{
  border-radius:16px;
  padding:18px 20px;
  margin-bottom:20px;
  border:1px solid var(--line);
  background:var(--surface);
}
.notice.success{
  border-color:#b8caa9;
  background:#f4f8ef;
}
.notice.error{
  border-color:#d6aaa2;
  background:#fbf1ef;
}
.notice ul{margin-bottom:0}
.empty-state{
  grid-column:1/-1;
  background:var(--surface);
  border:1px dashed var(--line);
  border-radius:20px;
  padding:34px;
}
.business-image.has-image{
  background:var(--surface);
  overflow:hidden;
}
.business-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px;
}
.detail-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:28px;
  align-items:start;
}
.detail-card,.contact-card,.setup-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow);
}
.detail-logo{
  width:min(280px,100%);
  min-height:150px;
  display:grid;
  place-items:center;
  margin-bottom:28px;
}
.detail-logo img{
  max-width:100%;
  max-height:220px;
  object-fit:contain;
}
.detail-description{font-size:17px;color:var(--muted)}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.gallery-grid img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--line);
}
.contact-card{
  position:sticky;
  top:100px;
}
.contact-row{
  display:grid;
  gap:3px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.contact-row span,.contact-row a{color:var(--muted)}
.full-btn{width:100%;margin-top:18px}
.setup-title{
  font-size:clamp(34px,5vw,48px);
  letter-spacing:-1px;
  margin-bottom:16px;
}
.admin-login-wrap{max-width:620px}
.admin-body{background:var(--bg)}
.admin-header{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.admin-bar{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.admin-bar a{text-decoration:none;font-weight:800}
.admin-bar strong{display:block;font-size:22px}
.admin-actions-top{display:flex;gap:18px}
.admin-title-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:22px;
}
.admin-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.admin-tabs a{
  text-decoration:none;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:999px;
  padding:10px 14px;
  font-weight:800;
}
.admin-tabs a.active{
  background:var(--accent);
  border-color:var(--accent);
  color:white;
}
.admin-tabs span{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  margin-left:6px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  font-size:12px;
}
.admin-list{display:grid;gap:15px}
.admin-entry{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  box-shadow:var(--shadow);
}
.admin-entry-main{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.admin-entry h3{margin:6px 0}
.admin-entry p{margin:0;color:var(--muted)}
.admin-entry small{color:var(--muted)}
.admin-thumb{
  width:90px;
  height:70px;
  object-fit:contain;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
.admin-thumb-empty{
  display:grid;
  place-items:center;
  color:var(--accent-dark);
  background:var(--accent-soft);
  font-weight:900;
}
.admin-entry-badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status-pill{
  border-radius:999px;
  padding:5px 9px;
  font-size:12px;
  font-weight:800;
}
.status-pill.pending{background:#fff1c9;color:#7b5d0a}
.status-pill.approved{background:#e8f3e1;color:#416834}
.admin-entry-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.admin-entry-actions form{margin:0}
.btn-danger{
  background:#9d4e45;
  color:white;
}
.btn-danger:hover{background:#7d3b34}
.admin-preview-logo{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  margin-bottom:18px;
  display:grid;
  place-items:center;
}
.admin-preview-logo img{max-width:260px;max-height:180px}
.admin-gallery{margin-bottom:20px}
.admin-bottom-actions{
  margin-top:18px;
  display:flex;
  gap:12px;
}

@media (max-width:900px){
  .detail-grid{grid-template-columns:1fr}
  .contact-card{position:static}
  .admin-entry{align-items:flex-start;flex-direction:column}
  .admin-entry-actions{justify-content:flex-start}
}
@media (max-width:680px){
  .gallery-grid{grid-template-columns:1fr}
  .admin-entry-main{align-items:flex-start}
  .admin-thumb{width:70px;height:60px}
}


/* ===== V3.1: Adminbereich deutlich größer und besser lesbar ===== */
.admin-body{
  font-size:18px;
}

.admin-body .container{
  width:min(1320px, calc(100% - 48px));
}

.admin-header{
  min-height:96px;
}

.admin-bar{
  min-height:96px;
}

.admin-bar .eyebrow{
  font-size:15px;
  letter-spacing:1.5px;
}

.admin-bar strong{
  font-size:28px;
}

.admin-actions-top{
  gap:28px;
}

.admin-actions-top a{
  font-size:17px;
}

.admin-body .section{
  padding:54px 0 70px;
}

.admin-body .page-title{
  font-size:clamp(48px, 5vw, 66px);
  margin-bottom:10px;
}

.admin-title-row p{
  font-size:18px;
  color:var(--muted);
}

.admin-tabs{
  gap:14px;
  margin:30px 0;
}

.admin-tabs a{
  font-size:18px;
  padding:14px 20px;
}

.admin-tabs span{
  min-width:30px;
  height:30px;
  margin-left:8px;
  font-size:14px;
}

.admin-list{
  gap:20px;
}

.admin-entry{
  padding:24px 26px;
  border-radius:20px;
  gap:28px;
}

.admin-entry h3{
  font-size:26px;
  margin:8px 0;
}

.admin-entry p{
  font-size:18px;
}

.admin-entry small{
  font-size:15px;
}

.admin-thumb{
  width:120px;
  height:90px;
  border-radius:14px;
}

.admin-entry-badges .badge,
.admin-entry-badges .status-pill{
  font-size:14px;
  padding:7px 11px;
}

.admin-entry-actions{
  gap:12px;
}

.admin-entry-actions .btn{
  min-height:52px;
  padding:0 20px;
  font-size:16px;
}

.admin-body .empty-state{
  padding:36px 40px;
  border-radius:20px;
}

.admin-body .empty-state h3{
  font-size:27px;
  margin-bottom:10px;
}

.admin-body .empty-state p{
  font-size:18px;
  color:var(--muted);
}

.admin-body .notice{
  font-size:17px;
  padding:20px 22px;
}

/* Bearbeiten-Seite ebenfalls größer */
.admin-body .entry-form{
  padding:34px;
}

.admin-body label{
  font-size:17px;
}

.admin-body input,
.admin-body select,
.admin-body textarea{
  font-size:17px;
  padding:15px 16px;
}

.admin-preview-logo{
  padding:26px;
}

.admin-bottom-actions .btn{
  min-height:52px;
  font-size:16px;
}

/* Admin-Login ebenfalls besser lesbar */
.admin-login-wrap{
  max-width:760px;
}

.admin-login-wrap .setup-card{
  padding:38px;
}

.admin-login-wrap .setup-title{
  font-size:52px;
}

.admin-login-wrap p{
  font-size:18px;
}

@media (max-width:900px){
  .admin-body .container{
    width:min(100% - 28px, 1320px);
  }

  .admin-entry{
    padding:22px;
  }

  .admin-thumb{
    width:100px;
    height:80px;
  }
}


/* ===== V3.2: Öffentliche Visitenkarte kompakter ===== */
.detail-page .subhero{
  padding:38px 0 18px;
}

.detail-page .page-title{
  font-size:clamp(34px, 4vw, 48px);
  margin-bottom:8px;
}

.detail-page .hero-text{
  font-size:17px;
}

.detail-page .section{
  padding:30px 0 54px;
}

.detail-page .detail-grid{
  grid-template-columns:minmax(0, 1.55fr) minmax(260px, .45fr);
  gap:22px;
}

.detail-page .detail-card,
.detail-page .contact-card{
  padding:24px;
  border-radius:18px;
}

.detail-page .detail-card h2,
.detail-page .contact-card h2{
  font-size:30px;
  margin-bottom:16px;
}

.detail-page .detail-description{
  font-size:16px;
  line-height:1.6;
}

.detail-page .detail-logo{
  width:auto;
  min-height:0;
  margin:0 0 24px;
  display:block;
}

.detail-page .detail-logo .lightbox-trigger{
  display:inline-block;
  max-width:230px;
}

.detail-page .detail-logo img{
  display:block;
  width:auto;
  max-width:230px;
  max-height:125px;
  object-fit:contain;
  padding:0;
  cursor:zoom-in;
}

.detail-page .gallery-grid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.detail-page .gallery-grid .lightbox-trigger{
  display:block;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
}

.detail-page .gallery-grid img{
  display:block;
  width:100%;
  height:150px;
  aspect-ratio:auto;
  object-fit:cover;
  border:0;
  border-radius:0;
  cursor:zoom-in;
  transition:transform .18s ease;
}

.detail-page .gallery-grid .lightbox-trigger:hover img{
  transform:scale(1.025);
}

.detail-page .contact-card{
  top:92px;
}

.detail-page .contact-row{
  padding:11px 0;
  font-size:15px;
}

.detail-page .full-btn{
  min-height:44px;
  font-size:14px;
}

/* Einfaches Bild-Zoom-Fenster */
.bs-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(35,31,27,.86);
}

.bs-lightbox.is-open{
  display:flex;
}

.bs-lightbox img{
  display:block;
  max-width:min(92vw, 1300px);
  max-height:88vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  background:#fff;
}

.bs-lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#2f2b27;
  font-size:30px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}

@media (max-width:900px){
  .detail-page .detail-grid{
    grid-template-columns:1fr;
  }

  .detail-page .gallery-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:560px){
  .detail-page .gallery-grid{
    grid-template-columns:1fr 1fr;
  }

  .detail-page .gallery-grid img{
    height:120px;
  }

  .detail-page .detail-logo .lightbox-trigger,
  .detail-page .detail-logo img{
    max-width:190px;
  }
}


/* ===== V3.3: Kompakteres Eintragsformular ===== */
.entry-page .compact-subhero{
  padding:28px 0 10px;
}

.compact-entry-container{
  width:min(1240px, calc(100% - 36px));
}

.entry-page .compact-entry-title{
  font-size:clamp(34px, 4vw, 48px);
  margin-bottom:8px;
}

.entry-page .compact-subhero p{
  margin:0;
  color:var(--muted);
}

.compact-entry-section{
  padding:20px 0 48px;
}

.compact-entry-form{
  padding:26px;
}

.compact-form-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px 18px;
}

.compact-form-grid label{
  margin-bottom:0;
}

.compact-entry-form input,
.compact-entry-form select{
  min-height:48px;
}

.compact-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.75fr) minmax(280px, .75fr);
  gap:18px;
  align-items:stretch;
  margin-top:18px;
}

.compact-bottom-grid label{
  margin-bottom:0;
}

.compact-bottom-grid textarea{
  min-height:150px;
  height:150px;
}

.photo-upload-box{
  border:1px solid var(--line);
  background:var(--surface-2);
  border-radius:16px;
  padding:18px;
}

.photo-upload-box label{
  margin-bottom:10px;
}

.photo-upload-box input[type="file"]{
  min-height:auto;
  padding:10px;
  background:#fff;
}

.photo-upload-box p{
  margin:8px 0;
  line-height:1.45;
}

.photo-upload-box small{
  color:var(--muted);
}

.compact-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
}

.compact-checkline{
  margin:0;
  flex:1;
}

.compact-submit-btn{
  flex:0 0 auto;
  min-width:240px;
}

@media (max-width:980px){
  .compact-form-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .compact-bottom-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  .compact-form-grid{
    grid-template-columns:1fr;
  }

  .compact-submit-row{
    flex-direction:column;
    align-items:stretch;
  }

  .compact-submit-btn{
    width:100%;
    min-width:0;
  }
}


/* =========================================================
   V3.9 – FEINER, MODERNER AUFBAU
   Anlehnung an die feine Aufteilung des alten Schaufensters,
   aber modern und weiterhin in Eierschale / warmem Braun.
   ========================================================= */

.refined-home{
  background:var(--bg);
}

.refined-hero{
  padding:42px 0 30px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #faf7f0 0%, var(--bg) 100%);
}

.refined-hero-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}

.refined-hero h1{
  margin:0 0 8px;
  font-size:clamp(44px, 5vw, 64px);
  line-height:1.02;
}

.refined-lead{
  margin:0 0 4px;
  font-size:21px;
  font-weight:700;
}

.refined-subline{
  margin:0;
  color:var(--muted);
  font-size:16px;
}

.refined-hero-actions{
  flex:0 0 auto;
}

.refined-search{
  display:flex;
  align-items:center;
  gap:8px;
  max-width:760px;
  margin-top:24px;
  padding:6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 8px 20px rgba(68,54,37,.05);
}

.refined-search input{
  border:0;
  background:transparent;
  padding:12px 14px;
  outline:none;
}

.refined-search button{
  min-height:42px;
  padding:0 20px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.refined-main-section{
  padding:36px 0 56px;
}

.refined-layout{
  display:grid;
  grid-template-columns:230px minmax(0, 1fr);
  gap:34px;
  align-items:start;
}

.refined-sidebar{
  position:sticky;
  top:96px;
  display:grid;
  gap:24px;
}

.refined-side-block{
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.refined-side-block:last-child{
  border-bottom:0;
}

.refined-side-title h2{
  margin:0 0 14px;
  font-size:24px;
}

.refined-category-list{
  display:grid;
  gap:6px;
}

.refined-category{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  text-align:left;
  font:inherit;
  color:var(--text);
  cursor:pointer;
  transition:.16s ease;
}

.refined-category:hover{
  background:var(--surface);
  border-color:var(--line);
}

.refined-category-icon{
  flex:0 0 30px;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:900;
}

.refined-category > span:last-child{
  font-weight:700;
  font-size:14px;
}

.refined-business-tools{
  display:grid;
  gap:10px;
}

.refined-business-tools > a{
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

.refined-business-tools > a:hover{
  text-decoration:underline;
}

.refined-coming-soon{
  margin-top:6px;
  padding:12px 0 0;
  border-top:1px solid var(--line);
}

.refined-coming-soon strong{
  display:block;
  font-size:14px;
}

.refined-coming-soon small{
  display:block;
  margin-top:4px;
  color:var(--muted);
  line-height:1.4;
}

.refined-content{
  min-width:0;
}

.refined-content-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.refined-content-head h2{
  margin:0;
  font-size:34px;
}

.refined-content-head p{
  max-width:420px;
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.refined-business-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

.refined-business-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 6px 16px rgba(68,54,37,.045);
}

.refined-business-link{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  min-height:126px;
  color:inherit;
  text-decoration:none;
}

.refined-business-thumb{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(135deg, #ece3d5, #f8f3eb);
  border-right:1px solid var(--line);
}

.refined-business-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.refined-business-thumb span{
  color:var(--accent-dark);
  font-size:22px;
  font-weight:900;
}

.refined-business-copy{
  padding:14px 15px;
}

.refined-business-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.refined-business-topline .badge{
  margin:0;
  padding:4px 8px;
  font-size:10px;
}

.refined-business-topline small{
  color:var(--muted);
  font-size:11px;
}

.refined-business-copy h3{
  margin:0 0 6px;
  font-size:19px;
}

.refined-business-copy p{
  margin:0 0 9px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.refined-more{
  color:var(--accent-dark);
  font-size:12px;
  font-weight:800;
}

.refined-empty{
  grid-column:1/-1;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.refined-empty strong{
  display:block;
  margin-bottom:5px;
  font-size:20px;
}

.refined-empty p{
  margin:0 0 7px;
  color:var(--muted);
}

.refined-empty a{
  color:var(--accent-dark);
  font-weight:800;
  text-decoration:none;
}

.refined-offer-teaser{
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin-top:30px;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.refined-offer-mark{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.refined-offer-teaser .eyebrow{
  margin-bottom:3px;
}

.refined-offer-teaser strong{
  display:block;
  font-size:18px;
}

.refined-offer-teaser p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:13px;
}

.refined-offer-teaser > a{
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
}

/* Angebotsseite – bewusst keine großen Kacheln */
.refined-offers-page{
  background:var(--bg);
}

.refined-offers-hero{
  padding:40px 0 18px;
}

.refined-back{
  display:inline-block;
  margin-bottom:22px;
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:800;
}

.refined-offers-hero h1{
  margin-bottom:10px;
}

.refined-offers-hero p{
  max-width:820px;
  margin:0;
  color:var(--muted);
  font-size:17px;
}

.refined-offers-section{
  padding:18px 0 56px;
}

.refined-offer-list{
  border-top:1px solid var(--line);
}

.refined-offer-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:22px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

.refined-offer-thumb{
  width:150px;
  height:88px;
  overflow:hidden;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--line);
}

.refined-offer-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.refined-offer-symbol{
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:20px;
  font-weight:900;
}

.refined-offer-copy .eyebrow{
  margin-bottom:3px;
}

.refined-offer-copy h2{
  margin:0 0 5px;
  font-size:24px;
}

.refined-offer-copy p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.refined-offer-action{
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}

.refined-offer-muted{
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}

@media (max-width:980px){
  .refined-layout{
    grid-template-columns:1fr;
  }

  .refined-sidebar{
    position:static;
  }

  .refined-category-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .refined-business-tools{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .refined-coming-soon{
    grid-column:1/-1;
  }
}

@media (max-width:760px){
  .refined-hero-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .refined-business-list{
    grid-template-columns:1fr;
  }

  .refined-content-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .refined-offer-teaser{
    grid-template-columns:52px minmax(0,1fr);
  }

  .refined-offer-teaser > a{
    grid-column:1/-1;
    padding-left:68px;
  }

  .refined-offer-row{
    grid-template-columns:110px minmax(0,1fr);
  }

  .refined-offer-thumb{
    width:110px;
    height:72px;
  }

  .refined-offer-action,
  .refined-offer-muted{
    grid-column:2;
  }
}

@media (max-width:560px){
  .refined-search{
    align-items:stretch;
    flex-direction:column;
  }

  .refined-category-list,
  .refined-business-tools{
    grid-template-columns:1fr;
  }

  .refined-business-link{
    grid-template-columns:92px minmax(0,1fr);
  }

  .refined-offer-row{
    grid-template-columns:1fr;
  }

  .refined-offer-thumb{
    width:100%;
    max-width:180px;
    height:92px;
  }

  .refined-offer-action,
  .refined-offer-muted{
    grid-column:auto;
  }
}


/* =========================================================
   V4.0 – GROSSE MODERNE VISITENKARTE
   ========================================================= */

.profile-page{
  background:
    radial-gradient(circle at 90% 8%, rgba(231,219,200,.55), transparent 30%),
    var(--bg);
}

.profile-shell{
  padding:34px 0 62px;
}

.profile-back{
  display:inline-block;
  margin-bottom:18px;
  color:var(--accent-dark);
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.profile-back:hover{
  text-decoration:underline;
}

.profile-card{
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:0 22px 55px rgba(68,54,37,.10);
}

.profile-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  padding:30px 34px 24px;
}

.profile-category{
  display:inline-block;
  margin-bottom:9px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:12px;
  font-weight:900;
}

.profile-header h1{
  margin:0;
  font-size:clamp(38px, 5vw, 58px);
  letter-spacing:-1.5px;
}

.profile-location{
  margin:8px 0 0;
  color:var(--muted);
  font-size:16px;
}

.profile-website-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:0 17px;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}

.profile-website-button:hover{
  background:var(--accent-dark);
}

.profile-gallery{
  display:grid;
  height:430px;
  gap:8px;
  padding:0 14px;
}

.profile-photo{
  position:relative;
  overflow:hidden;
  background:#ede5d8;
  cursor:zoom-in;
}

.profile-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .2s ease;
}

.profile-photo:hover img{
  transform:scale(1.025);
}

.profile-photo-main{
  border-radius:18px 0 0 18px;
}

.profile-photo-small{
  border-radius:0;
}

.profile-gallery-count-1{
  grid-template-columns:1fr;
}

.profile-gallery-count-1 .profile-photo-main{
  border-radius:18px;
}

.profile-gallery-count-2{
  grid-template-columns:1.65fr 1fr;
}

.profile-gallery-count-2 .profile-photo-small:last-child{
  border-radius:0 18px 18px 0;
}

.profile-gallery-count-3{
  grid-template-columns:1.55fr 1fr;
  grid-template-rows:1fr 1fr;
}

.profile-gallery-count-3 .profile-photo-main{
  grid-row:1 / 3;
}

.profile-gallery-count-3 .profile-photo-small:nth-child(3){
  border-radius:0 0 18px 0;
}

.profile-gallery-count-3 .profile-photo-small:nth-child(2){
  border-radius:0 18px 0 0;
}

.profile-gallery-count-4{
  grid-template-columns:1.55fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
}

.profile-gallery-count-4 .profile-photo-main{
  grid-row:1 / 3;
}

.profile-gallery-count-4 .profile-photo-small:nth-child(2){
  grid-column:2 / 4;
  border-radius:0 18px 0 0;
}

.profile-gallery-count-4 .profile-photo-small:nth-child(4){
  border-radius:0 0 18px 0;
}

.profile-gallery-count-5{
  grid-template-columns:1.5fr 1fr 1fr;
  grid-template-rows:1fr 1fr;
}

.profile-gallery-count-5 .profile-photo-main{
  grid-row:1 / 3;
}

.profile-gallery-count-5 .profile-photo-small:nth-child(3){
  border-radius:0 18px 0 0;
}

.profile-gallery-count-5 .profile-photo-small:nth-child(5){
  border-radius:0 0 18px 0;
}

.profile-more-photos{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:rgba(43,38,33,.55);
  color:#fff;
  font-size:32px;
  font-weight:900;
}

.profile-no-image{
  margin:0 14px;
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border-radius:18px;
  background:linear-gradient(135deg, #ece2d3, #f8f3ea);
  color:var(--muted);
}

.profile-no-image span{
  font-size:44px;
  font-weight:900;
  color:var(--accent-dark);
}

.profile-no-image p{
  margin:0;
}

.profile-details{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(300px, .6fr);
  gap:38px;
  padding:34px;
}

.profile-about{
  min-width:0;
}

.profile-about h2,
.profile-contact h2{
  margin:0 0 16px;
  font-size:28px;
}

.profile-description{
  color:var(--text);
  font-size:17px;
  line-height:1.75;
  white-space:normal;
}

.profile-muted{
  color:var(--muted);
}

.profile-contact{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--bg);
}

.profile-contact-row{
  display:grid;
  gap:4px;
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

.profile-contact-row:last-of-type{
  border-bottom:0;
}

.profile-contact-row span{
  color:var(--muted);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.55px;
}

.profile-contact-row strong,
.profile-contact-row a{
  color:var(--text);
  text-decoration:none;
  font-size:15px;
  line-height:1.5;
}

.profile-contact-row a:hover{
  color:var(--accent-dark);
  text-decoration:underline;
}

.profile-contact-button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  margin-top:16px;
  border-radius:11px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-size:14px;
  font-weight:900;
}

.profile-contact-button:hover{
  background:var(--accent-dark);
}

.profile-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 34px;
  border-top:1px solid var(--line);
  background:#f5efe5;
  color:var(--muted);
  font-size:13px;
}

.profile-footer a{
  color:var(--accent-dark);
  text-decoration:none;
  font-weight:900;
}

.profile-not-found{
  margin-top:30px;
  padding:40px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
}

/* Vorhandene Lightbox von V3.2 wird weiterverwendet. */
.profile-photo.lightbox-trigger{
  display:block;
}

@media (max-width:900px){
  .profile-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .profile-gallery{
    height:360px;
  }

  .profile-details{
    grid-template-columns:1fr;
  }
}

@media (max-width:680px){
  .profile-shell{
    padding-top:20px;
  }

  .profile-card{
    border-radius:22px;
  }

  .profile-header{
    padding:24px 20px 20px;
  }

  .profile-website-button{
    width:100%;
    justify-content:center;
  }

  .profile-gallery{
    height:auto;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    padding:0 8px;
  }

  .profile-photo{
    height:145px;
    grid-column:auto !important;
    grid-row:auto !important;
    border-radius:12px !important;
  }

  .profile-photo-main{
    grid-column:1 / -1 !important;
    height:220px;
  }

  .profile-details{
    padding:24px 20px;
    gap:26px;
  }

  .profile-contact{
    padding:18px;
  }

  .profile-footer{
    align-items:flex-start;
    flex-direction:column;
    padding:16px 20px;
  }
}


/* =========================================================
   V4.1 – QUERFORMAT / KOMPAKTERE VISITENKARTE
   ========================================================= */

.profile-page-horizontal .container{
  max-width: 1280px;
}

.profile-card-horizontal{
  border-radius:24px;
}

.profile-header-compact{
  padding:24px 28px 18px;
}

.profile-header-compact h1{
  font-size:clamp(34px, 4vw, 54px);
}

.profile-horizontal-top{
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) 330px;
  gap:22px;
  padding:0 28px 20px;
  align-items:start;
}

.profile-visuals{
  min-width:0;
}

.profile-hero-image{
  display:block;
  overflow:hidden;
  height:265px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#efe7db;
}

.profile-hero-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .18s ease;
}

.profile-hero-image:hover img{
  transform:scale(1.02);
}

.profile-thumb-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}

.profile-thumb{
  position:relative;
  display:block;
  overflow:hidden;
  height:92px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#efe7db;
}

.profile-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .18s ease;
}

.profile-thumb:hover img{
  transform:scale(1.03);
}

.profile-contact-compact{
  padding:18px 18px 16px;
  border-radius:18px;
}

.profile-contact-compact h2{
  margin-bottom:12px;
  font-size:24px;
}

.profile-contact-compact .profile-contact-row{
  padding:10px 0;
}

.profile-contact-compact .profile-contact-row strong,
.profile-contact-compact .profile-contact-row a{
  font-size:14px;
}

.profile-about-full{
  padding:0 28px 24px;
}

.profile-about-full h2{
  margin-bottom:12px;
  font-size:24px;
}

.profile-about-full .profile-description{
  font-size:16px;
  line-height:1.7;
}

.profile-no-image-compact{
  min-height:250px;
  margin:0;
}

@media (max-width:980px){
  .profile-horizontal-top{
    grid-template-columns:1fr;
  }

  .profile-contact-compact{
    max-width:none;
  }
}

@media (max-width:700px){
  .profile-header-compact{
    padding:22px 18px 16px;
  }

  .profile-horizontal-top{
    padding:0 18px 18px;
    gap:18px;
  }

  .profile-hero-image{
    height:220px;
  }

  .profile-thumb-row{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .profile-thumb{
    height:94px;
  }

  .profile-about-full{
    padding:0 18px 20px;
  }
}


/* =========================================================
   V4.2 – BRANCHEN-NAVIGATOR MIT VISITENKARTE RECHTS
   ========================================================= */

.directory-page{
  min-height:calc(100vh - 80px);
  background:var(--bg);
}

.directory-intro{
  padding:28px 0 22px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, #faf7f0 0%, var(--bg) 100%);
}

.directory-intro-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
}

.directory-intro h1{
  margin:0 0 7px;
  font-size:clamp(34px, 4vw, 50px);
  letter-spacing:-1.2px;
}

.directory-intro p{
  max-width:780px;
  margin:0;
  color:var(--muted);
  font-size:16px;
}

.directory-workspace{
  padding:26px 0 58px;
}

.directory-grid{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:28px;
  align-items:start;
}

.directory-sidebar{
  position:sticky;
  top:94px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,253,248,.68);
}

.directory-side-heading{
  padding:2px 4px 13px;
  border-bottom:1px solid var(--line);
}

.directory-side-heading .eyebrow{
  margin-bottom:3px;
}

.directory-side-heading h2{
  margin:0;
  font-size:24px;
}

.directory-accordion{
  padding-top:8px;
}

.directory-category{
  border-bottom:1px solid rgba(221,209,192,.72);
}

.directory-category:last-child{
  border-bottom:0;
}

.directory-category-toggle{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:9px;
  padding:12px 4px;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}

.directory-category-toggle > span:first-child{
  font-size:14px;
  font-weight:800;
}

.directory-count{
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:900;
}

.directory-chevron{
  color:var(--accent-dark);
  font-size:17px;
  transition:transform .18s ease;
}

.directory-category.is-open .directory-chevron{
  transform:rotate(180deg);
}

.directory-company-list{
  display:grid;
  gap:4px;
  padding:0 0 10px;
}

.directory-company-button{
  width:100%;
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.directory-company-button:hover{
  border-color:var(--line);
  background:var(--surface);
}

.directory-company-button.is-active{
  border-color:#c9b38e;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:800;
}

.directory-company-dot{
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
}

.directory-empty-category{
  padding:4px 10px 10px 25px;
  color:var(--muted);
  font-size:12px;
}

.directory-side-links{
  display:grid;
  gap:9px;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line);
}

.directory-side-links a,
.directory-side-links span{
  color:var(--accent-dark);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.directory-side-links a:hover{
  text-decoration:underline;
}

.directory-side-links small{
  margin-left:4px;
  color:var(--muted);
  font-weight:600;
}

.directory-profile-stage{
  min-width:0;
}

.directory-placeholder{
  min-height:560px;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center;
  padding:60px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 12px 34px rgba(68,54,37,.06);
}

.directory-placeholder-mark{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border-radius:20px;
  background:var(--accent);
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.directory-placeholder h2{
  max-width:610px;
  margin:0 0 12px;
  font-size:clamp(30px, 4vw, 44px);
}

.directory-placeholder p{
  max-width:650px;
  margin:0;
  color:var(--muted);
  font-size:16px;
}

.directory-placeholder-hints{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}

.directory-placeholder-hints span{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg);
  color:var(--muted);
  font-size:12px;
  font-weight:700;
}

/* Integrierte Visitenkarte */
.directory-profile-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 16px 42px rgba(68,54,37,.08);
}

.directory-profile-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  padding:24px 26px 18px;
  border-bottom:1px solid var(--line);
}

.directory-profile-header h2{
  margin:0;
  font-size:clamp(30px, 4vw, 48px);
  letter-spacing:-1px;
}

.directory-profile-main{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:20px;
  padding:20px 26px 0;
  align-items:start;
}

.directory-visuals{
  min-width:0;
}

.directory-main-image{
  display:block;
  overflow:hidden;
  height:260px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#eee5d7;
}

.directory-main-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.directory-thumbs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:7px;
  margin-top:7px;
}

.directory-thumb{
  display:block;
  overflow:hidden;
  height:82px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#eee5d7;
}

.directory-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.directory-no-image{
  min-height:260px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:16px;
  background:linear-gradient(135deg, #ece2d3, #f8f3ea);
  color:var(--muted);
}

.directory-no-image span{
  color:var(--accent-dark);
  font-size:40px;
  font-weight:900;
}

.directory-contact-panel{
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--bg);
}

.directory-contact-panel h3{
  margin:0 0 11px;
  font-size:23px;
}

.directory-contact-row{
  display:grid;
  gap:3px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}

.directory-contact-row:last-child{
  border-bottom:0;
}

.directory-contact-row span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.directory-contact-row strong,
.directory-contact-row a{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  line-height:1.45;
  white-space:pre-line;
}

.directory-contact-row a:hover{
  color:var(--accent-dark);
  text-decoration:underline;
}

.directory-contact-empty{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.directory-description{
  margin:22px 26px 0;
  padding:20px 0 24px;
  border-top:1px solid var(--line);
}

.directory-description h3{
  margin:0 0 10px;
  font-size:23px;
}

.directory-description p{
  margin:0;
  color:var(--text);
  font-size:15px;
  line-height:1.7;
}

/* Lightbox */
.bs-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(35,31,27,.86);
}

.bs-lightbox.is-open{
  display:flex;
}

.bs-lightbox img{
  max-width:min(92vw, 1300px);
  max-height:88vh;
  border-radius:10px;
  background:#fff;
  object-fit:contain;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}

.bs-lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:#fff;
  color:#2f2b27;
  font-size:30px;
  cursor:pointer;
}

@media (max-width:1000px){
  .directory-grid{
    grid-template-columns:230px minmax(0,1fr);
    gap:18px;
  }

  .directory-profile-main{
    grid-template-columns:1fr;
  }
}

@media (max-width:800px){
  .directory-intro-inner{
    align-items:flex-start;
    flex-direction:column;
  }

  .directory-grid{
    grid-template-columns:1fr;
  }

  .directory-sidebar{
    position:static;
  }

  .directory-placeholder{
    min-height:400px;
    padding:38px 24px;
  }
}

@media (max-width:600px){
  .directory-profile-header{
    align-items:flex-start;
    flex-direction:column;
    padding:20px 18px 16px;
  }

  .directory-profile-header .profile-website-button{
    width:100%;
    justify-content:center;
  }

  .directory-profile-main{
    padding:16px 18px 0;
  }

  .directory-main-image{
    height:210px;
  }

  .directory-thumbs{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .directory-description{
    margin:18px 18px 0;
  }
}


/* =========================================================
   V4.3 – KOMPAKTER NAVIGATOR / FEINERE VISITENKARTE
   ========================================================= */

/* Oberen Bereich deutlich kleiner halten */
.directory-intro{
  padding:16px 0 14px;
}

.directory-intro-inner{
  align-items:center;
}

.directory-intro .eyebrow{
  margin-bottom:4px;
  font-size:11px;
}

.directory-intro h1{
  margin:0 0 4px;
  font-size:clamp(27px, 3vw, 36px);
  letter-spacing:-.7px;
}

.directory-intro p{
  max-width:720px;
  font-size:13px;
  line-height:1.45;
}

.directory-intro .btn{
  min-height:40px;
  padding:0 15px;
  font-size:13px;
}

/* Weniger Luft zwischen Kopf und Arbeitsbereich */
.directory-workspace{
  padding:18px 0 42px;
}

.directory-grid{
  grid-template-columns:240px minmax(0, 1fr);
  gap:20px;
}

/* Linke Navigation ebenfalls etwas feiner */
.directory-sidebar{
  top:88px;
  padding:14px;
  border-radius:15px;
}

.directory-side-heading{
  padding-bottom:10px;
}

.directory-side-heading h2{
  font-size:21px;
}

.directory-category-toggle{
  padding:9px 3px;
}

.directory-category-toggle > span:first-child{
  font-size:13px;
}

.directory-company-button{
  padding:7px 9px;
  font-size:13px;
}

.directory-side-links{
  gap:7px;
  margin-top:11px;
  padding-top:11px;
}

/* Anfangskarte kleiner und ruhiger */
.directory-placeholder{
  min-height:410px;
  padding:38px;
  border-radius:20px;
}

.directory-placeholder-mark{
  width:58px;
  height:58px;
  margin-bottom:13px;
  border-radius:16px;
  font-size:15px;
}

.directory-placeholder .eyebrow{
  margin-bottom:5px;
  font-size:11px;
}

.directory-placeholder h2{
  max-width:560px;
  margin-bottom:9px;
  font-size:clamp(27px, 3.3vw, 36px);
}

.directory-placeholder p{
  max-width:600px;
  font-size:14px;
}

.directory-placeholder-hints{
  margin-top:17px;
}

.directory-placeholder-hints span{
  padding:6px 9px;
  font-size:11px;
}

/* Die Visitenkarte soll wie eine feine Querformat-Karte wirken */
.directory-profile-card{
  border-radius:19px;
}

.directory-profile-header{
  padding:17px 20px 13px;
}

.directory-profile-header .profile-category{
  margin-bottom:6px;
  padding:4px 8px;
  font-size:10px;
}

.directory-profile-header h2{
  font-size:clamp(28px, 3.2vw, 38px);
}

.directory-profile-header .profile-location{
  margin-top:5px;
  font-size:13px;
}

.directory-profile-header .profile-website-button{
  min-height:38px;
  padding:0 13px;
  font-size:12px;
}

/* Links vier kleine Bilder statt eines riesigen Bildes */
.directory-profile-main{
  grid-template-columns:minmax(0, 1fr) 270px;
  gap:16px;
  padding:16px 20px 0;
}

.directory-image-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.directory-small-image{
  display:block;
  overflow:hidden;
  height:132px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#eee5d7;
  cursor:zoom-in;
}

.directory-small-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .16s ease;
}

.directory-small-image:hover img{
  transform:scale(1.025);
}

.directory-no-image{
  min-height:272px;
  border-radius:12px;
}

.directory-no-image span{
  font-size:31px;
}

/* Kontaktblock kleiner */
.directory-contact-panel{
  padding:14px;
  border-radius:13px;
}

.directory-contact-panel .eyebrow{
  margin-bottom:3px;
  font-size:10px;
}

.directory-contact-panel h3{
  margin-bottom:8px;
  font-size:20px;
}

.directory-contact-row{
  padding:7px 0;
}

.directory-contact-row span{
  font-size:9px;
}

.directory-contact-row strong,
.directory-contact-row a{
  font-size:12px;
}

.directory-contact-panel .profile-contact-button{
  min-height:38px;
  margin-top:11px;
  font-size:12px;
}

/* Beschreibung direkt darunter, aber deutlich kompakter */
.directory-description{
  margin:16px 20px 0;
  padding:15px 0 18px;
}

.directory-description .eyebrow{
  margin-bottom:3px;
  font-size:10px;
}

.directory-description h3{
  margin-bottom:7px;
  font-size:20px;
}

.directory-description p{
  font-size:13px;
  line-height:1.55;
}

/* Alte große Hauptbild-/Thumbnail-Regeln aus V4.2 nicht mehr verwenden */
.directory-main-image,
.directory-thumbs,
.directory-thumb{
  display:none !important;
}

@media (min-width:1200px){
  .directory-small-image{
    height:145px;
  }
}

@media (max-width:1000px){
  .directory-grid{
    grid-template-columns:220px minmax(0,1fr);
  }

  .directory-profile-main{
    grid-template-columns:1fr 240px;
  }

  .directory-small-image{
    height:118px;
  }
}

@media (max-width:800px){
  .directory-intro-inner{
    align-items:flex-start;
  }

  .directory-grid{
    grid-template-columns:1fr;
  }

  .directory-profile-main{
    grid-template-columns:1fr;
  }

  .directory-image-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .directory-small-image{
    height:145px;
  }
}

@media (max-width:520px){
  .directory-image-grid{
    grid-template-columns:1fr 1fr;
  }

  .directory-small-image{
    height:105px;
  }
}


/* =========================================================
   V4.4 – FEINERE PLATZHALTER / WENIGER PLATZVERBRAUCH
   ========================================================= */

/* Der mittlere Auswahlbereich soll noch kompakter werden */
.directory-placeholder{
  min-height: 285px;
  padding: 24px 26px;
  border-radius: 18px;
}

.directory-placeholder-mark{
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 14px;
  font-size: 12px;
}

.directory-placeholder .eyebrow{
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .8px;
}

.directory-placeholder h2{
  max-width: 560px;
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  letter-spacing: -.4px;
}

.directory-placeholder p{
  max-width: 640px;
  font-size: 13px;
  line-height: 1.45;
}

.directory-placeholder-hints{
  margin-top: 14px;
  gap: 8px;
}

.directory-placeholder-hints span{
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 999px;
}

/* Leerer Bildbereich feiner und flacher */
.directory-no-image{
  min-height: 155px;
  padding: 18px;
  gap: 0;
  border-radius: 10px;
  background: #f6f0e5;
}

.directory-no-image span{
  display: none;
}

.directory-no-image small{
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0;
}

@media (max-width: 800px){
  .directory-placeholder{
    min-height: 240px;
    padding: 22px 18px;
  }

  .directory-placeholder h2{
    font-size: clamp(22px, 6vw, 28px);
  }

  .directory-no-image{
    min-height: 130px;
  }
}


/* =========================================================
   V4.5 – NUR DIE 4 BILDER, KEIN LEERER BILDKASTEN
   ========================================================= */

.directory-image-grid[hidden]{
  display:none !important;
}

/* Falls ein Eintrag wirklich keine Bilder hat, wird links kein leerer
   Platzhalter mehr angezeigt. */
.directory-visuals:has(.directory-image-grid[hidden]){
  display:none;
}

/* Wenn links keine Bilder vorhanden sind, darf der Kontaktbereich
   die verfügbare Breite sauber nutzen. */
.directory-profile-main:has(.directory-image-grid[hidden]){
  grid-template-columns:minmax(260px, 420px);
  justify-content:end;
}

/* Der alte Platzhalter wird nicht mehr benutzt. */
.directory-no-image{
  display:none !important;
}


/* =========================================================
   V4.6a – SICHERER ZWISCHENSCHRITT
   Nur rechte Navigation, noch ohne Umschaltfunktion
   ========================================================= */

.directory-grid{
  grid-template-columns:230px minmax(0,1fr) 220px;
  gap:18px;
}

.safe-rightbar{
  position:sticky;
  top:88px;
  display:grid;
  gap:14px;
}

.safe-right-block{
  padding:13px;
  border:1px solid var(--line);
  border-radius:15px;
  background:rgba(255,253,248,.72);
}

.safe-right-block h2{
  margin:2px 0 9px;
  font-size:17px;
}

.safe-right-item{
  width:100%;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:8px 7px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.safe-right-item:hover{
  border-color:var(--line);
  background:var(--surface);
}

.safe-right-icon{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:900;
}

.safe-right-item strong{
  display:block;
  font-size:12px;
  line-height:1.2;
}

.safe-right-item small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:10px;
}

@media (max-width:1100px){
  .directory-grid{
    grid-template-columns:220px minmax(0,1fr);
  }
  .safe-rightbar{
    position:static;
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:800px){
  .directory-grid{
    grid-template-columns:1fr;
  }
  .safe-rightbar{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.6b – NAVIGATION ETWAS GRÖSSER + MAXIMAL 4 BILDER
   ========================================================= */

/* Linke Navigation */
.directory-side-heading h2{
  font-size:23px;
}

.directory-category-toggle > span:first-child{
  font-size:15px;
}

.directory-count{
  font-size:12px;
}

.directory-company-button{
  font-size:14px;
}

.directory-empty-category{
  font-size:13px;
}

.directory-side-links a,
.directory-side-links span{
  font-size:14px;
}

/* Rechte Navigation */
.safe-right-block h2{
  font-size:19px;
}

.safe-right-item strong{
  font-size:14px;
  line-height:1.25;
}

.safe-right-item small{
  font-size:11px;
  line-height:1.25;
}

.safe-right-icon{
  font-size:11px;
}


/* =========================================================
   V4.6c – GESAMTE SEITE ETWAS BREITER
   ========================================================= */

/* Bisher 1180px – jetzt 1360px.
   Dadurch bekommen besonders die Visitenkarte in der Mitte
   und die rechte Navigation mehr Luft. */
.container{
  width:min(1360px, calc(100% - 36px));
}

/* Auf kleineren Bildschirmen bleibt alles weiterhin flexibel. */
@media (max-width:900px){
  .container{
    width:min(100% - 24px, 1360px);
  }
}


/* =========================================================
   V4.7 – BEDIENBARE RECHTE BUTTONS + FORMULARE IN DER MITTE
   ========================================================= */

.safe-right-item.is-active{
  border-color:#c9b38e;
  background:var(--accent-soft);
  color:var(--accent-dark);
}

.safe-right-item.is-active .safe-right-icon{
  background:var(--accent);
  color:#fff;
}

/* Mittlerer Formularbereich */
.portal-module-panel{
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 10px 28px rgba(68,54,37,.05);
}

.portal-module-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line);
}

.portal-module-head .eyebrow{
  margin-bottom:4px;
  font-size:11px;
}

.portal-module-head h2{
  margin:0 0 6px;
  font-size:27px;
  letter-spacing:-.4px;
}

.portal-module-head p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.portal-close-button{
  flex:0 0 auto;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--accent-dark);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.portal-close-button:hover{
  background:var(--accent-soft);
}

.portal-form{
  padding-top:17px;
}

.portal-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
}

.portal-form label,
.portal-full-field{
  display:grid;
  gap:6px;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

.portal-form input,
.portal-form select,
.portal-form textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:400;
}

.portal-form input,
.portal-form select{
  min-height:41px;
  padding:0 11px;
}

.portal-form input[type="file"]{
  min-height:auto;
  padding:9px;
}

.portal-form textarea{
  padding:10px 11px;
  resize:vertical;
  line-height:1.5;
}

.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus{
  outline:2px solid rgba(166,128,70,.22);
  border-color:#b79b70;
}

.portal-form label small{
  color:var(--muted);
  font-size:10px;
  font-weight:500;
}

.portal-full-field{
  margin-top:13px;
}

.portal-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:17px;
  padding-top:15px;
  border-top:1px solid var(--line);
}

.portal-check{
  grid-template-columns:auto 1fr !important;
  align-items:flex-start;
  gap:8px !important;
  max-width:610px;
  font-weight:500 !important;
  line-height:1.4;
}

.portal-check input{
  width:auto;
  min-height:auto;
  margin-top:2px;
}

.portal-submit-button{
  flex:0 0 auto;
  min-height:42px;
  padding:0 16px;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.portal-submit-button:hover{
  filter:brightness(.96);
}

.portal-form-note{
  margin-top:14px;
  padding:11px 13px;
  border:1px solid #d8c5a6;
  border-radius:9px;
  background:#f7efe1;
  color:#715936;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}

/* Weitere Angebote */
.portal-offer-list{
  display:grid;
  margin-top:16px;
  border-top:1px solid var(--line);
}

.portal-offer-row{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px 3px;
  border-bottom:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
}

.portal-offer-row:hover{
  background:#fbf7f0;
}

.portal-offer-row.is-placeholder{
  color:var(--muted);
}

.portal-offer-badge{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:900;
}

.portal-offer-row strong{
  display:block;
  font-size:14px;
}

.portal-offer-row small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
}

/* Auf kleineren Bildschirmen sauber untereinander */
@media (max-width:800px){
  .portal-module-panel{
    padding:18px;
  }

  .portal-module-head{
    flex-direction:column;
  }

  .portal-form-grid{
    grid-template-columns:1fr;
  }

  .portal-form-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .portal-submit-button{
    width:100%;
  }
}


/* =========================================================
   V4.8 – HANDWERKER-GESUCHE
   ========================================================= */

.trade-view-tabs{
  display:flex;
  gap:8px;
  margin:16px 0 14px;
}

.trade-view-tab{
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--bg);
  color:var(--accent-dark);
  font:inherit;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.trade-view-tab.is-active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}

.trade-module-notice,
.trade-empty-public{
  padding:19px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
}

.trade-module-notice strong,
.trade-empty-public strong{
  display:block;
  margin-bottom:5px;
  font-size:16px;
}

.trade-module-notice p,
.trade-empty-public p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.trade-request-list{
  display:grid;
  gap:10px;
}

.trade-request-card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.trade-request-summary{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 15px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  font:inherit;
  cursor:pointer;
}

.trade-request-summary:hover{
  background:#fbf7f0;
}

.trade-request-badge{
  display:inline-block;
  margin-bottom:5px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:900;
}

.trade-request-summary h3{
  margin:0 0 4px;
  font-size:17px;
}

.trade-request-summary p{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.trade-request-open{
  flex:0 0 auto;
  color:var(--accent-dark);
  font-size:11px;
  font-weight:900;
}

.trade-request-detail{
  padding:0 15px 15px;
  border-top:1px solid var(--line);
}

.trade-request-detail > p{
  margin:13px 0;
  font-size:13px;
  line-height:1.55;
}

.trade-private-hint{
  display:grid;
  gap:3px;
  padding:10px 11px;
  border-radius:9px;
  background:var(--bg);
  color:var(--muted);
  font-size:11px;
}

.trade-private-hint strong{
  color:var(--accent-dark);
  font-size:11px;
}

.trade-interest-button{
  margin-top:11px;
  min-height:38px;
  padding:0 12px;
  border:0;
  border-radius:9px;
  background:#ddd2c0;
  color:#776b5a;
  font:inherit;
  font-size:11px;
  font-weight:900;
  cursor:not-allowed;
}

.trade-manage-card{
  padding:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface);
}

.trade-manage-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
  margin-top:15px;
}

.trade-manage-field{
  padding:10px 0;
  border-bottom:1px solid var(--line);
}

.trade-manage-field span{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.trade-manage-field strong,
.trade-manage-field p{
  margin:0;
  font-size:13px;
  line-height:1.5;
}

.trade-status{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
}

.trade-status.pending{ background:#f6e7c8; color:#7b5c28; }
.trade-status.approved{ background:#dfeedd; color:#365d32; }
.trade-status.closed{ background:#e8e5e0; color:#5f5a52; }

.trade-secret-link{
  margin-top:16px;
  padding:12px;
  border:1px dashed #cdb996;
  border-radius:10px;
  background:#fbf5e9;
  word-break:break-all;
}

.trade-secret-link a{
  color:var(--accent-dark);
  font-weight:800;
}

@media (max-width:650px){
  .trade-view-tabs{
    flex-direction:column;
  }

  .trade-view-tab{
    width:100%;
  }

  .trade-manage-grid{
    grid-template-columns:1fr;
  }
}


.trade-admin-entry{
  align-items:flex-start;
}

.trade-admin-main{
  min-width:0;
  flex:1 1 auto;
}

.trade-admin-main h3{
  margin:7px 0 6px;
  font-size:20px;
}

.trade-admin-main > p{
  margin:5px 0;
  font-size:13px;
  line-height:1.5;
}

.trade-admin-private{
  margin:12px 0;
  padding:12px;
  border:1px solid #d8c5a6;
  border-radius:10px;
  background:#fbf5e9;
}

.trade-admin-private > strong{
  color:var(--accent-dark);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.trade-admin-private p{
  margin:5px 0 0;
  font-size:12px;
  line-height:1.5;
}


/* =========================================================
   V4.8a – KURZER KUNDENZUGANG + ADMIN BESSER LESBAR
   ========================================================= */

.trade-access-data{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:16px 0 12px;
}

.trade-access-data > div{
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg);
}

.trade-access-data span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.trade-access-data strong{
  display:block;
  color:var(--accent-dark);
  font-size:22px;
  letter-spacing:.8px;
}

.trade-access-help{
  max-width:760px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.trade-login-inline{
  padding:18px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
}

.trade-login-inline h3{
  margin:2px 0 5px;
  font-size:20px;
}

.trade-login-inline > p{
  margin:0;
  color:var(--muted);
  font-size:13px;
}

.trade-inline-access-form{
  margin-top:12px;
  padding-top:0;
}

/* Adminbereich: bisher waren die Detailtexte zu klein. */
.admin-body{
  font-size:16px;
}

.admin-header .eyebrow{
  font-size:12px;
}

.admin-header strong{
  font-size:22px;
}

.admin-actions-top a{
  font-size:16px;
}

.admin-title-row p{
  font-size:17px;
  line-height:1.5;
}

.admin-tabs a{
  font-size:17px;
}

.admin-tabs a span{
  font-size:14px;
}

.trade-admin-main h3{
  font-size:23px;
}

.trade-admin-main > p{
  font-size:16px;
  line-height:1.55;
}

.trade-admin-private{
  padding:15px;
}

.trade-admin-private > strong{
  font-size:13px;
}

.trade-admin-private p{
  font-size:15px;
  line-height:1.55;
}

.trade-admin-main small{
  font-size:14px;
}

.admin-entry-badges .badge,
.trade-status{
  font-size:12px;
}

.admin-entry-actions .btn{
  min-height:44px;
  padding:0 16px;
  font-size:15px;
}

@media (max-width:650px){
  .trade-access-data{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.9 – HANDWERKER-ANGEBOTE
   ========================================================= */

.trade-interest-button.is-ready{
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}

.trade-interest-button.is-ready:hover{
  filter:brightness(.96);
}

.trade-offer-setup-hint{
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
}

.trade-offer-form-wrap{
  margin-top:13px;
  padding:15px;
  border:1px solid #d8c5a6;
  border-radius:12px;
  background:#fbf7ef;
}

.trade-offer-form-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.trade-offer-form-head h4{
  margin:1px 0 4px;
  font-size:18px;
}

.trade-offer-form-head p{
  max-width:620px;
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}

.trade-offer-close{
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--accent-dark);
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}

.trade-offer-form{
  padding-top:12px;
}

.trade-honeypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

.trade-customer-offers{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid var(--line);
}

.trade-customer-offers-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
}

.trade-customer-offers-head h2{
  margin:2px 0 0;
  font-size:22px;
}

.trade-offer-count{
  padding:5px 9px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:900;
}

.trade-customer-offer-list{
  display:grid;
  gap:11px;
}

.trade-customer-offer-card{
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.trade-customer-offer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.trade-customer-offer-top h3{
  margin:0 0 3px;
  font-size:18px;
}

.trade-customer-offer-top p{
  margin:0;
  color:var(--muted);
  font-size:11px;
}

.trade-offer-price{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:9px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:13px;
}

.trade-offer-message{
  margin:12px 0;
  font-size:13px;
  line-height:1.55;
}

.trade-offer-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}

.trade-offer-facts > div{
  padding:9px;
  border-radius:9px;
  background:var(--bg);
}

.trade-offer-facts span{
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.trade-offer-facts strong,
.trade-offer-facts a{
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.trade-customer-offer-card > small{
  color:var(--muted);
  font-size:10px;
}

@media (max-width:700px){
  .trade-offer-form-head,
  .trade-customer-offer-top,
  .trade-customer-offers-head{
    flex-direction:column;
  }

  .trade-offer-facts{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.10 – EINFACHER DIREKTKONTAKT
   ========================================================= */

.direct-email-box{
  display:grid;
  gap:5px;
  margin:18px 0;
  padding:16px;
  border:1px solid #d8c5a6;
  border-radius:11px;
  background:#fbf5e9;
}

.direct-email-box span{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.direct-email-box strong{
  color:var(--accent-dark);
  font-size:20px;
  word-break:break-word;
}

.compact-manage-card{
  max-width:980px;
  margin:0 auto;
}

.compact-manage-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.compact-manage-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.compact-manage-facts > div,
.compact-manage-description{
  padding:12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
}

.compact-manage-facts span,
.compact-manage-description > span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.compact-manage-facts strong{
  font-size:13px;
}

.compact-manage-description{
  margin-bottom:14px;
}

.compact-manage-description p{
  margin:0;
  font-size:13px;
  line-height:1.55;
}

@media (max-width:700px){
  .compact-manage-facts{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V4.11 – SCHLICHTER ABLAUF OHNE ZUGANGSCODE
   ========================================================= */

.simple-submit-success{
  max-width:980px;
  margin:0 auto;
}

.simple-submit-text{
  max-width:780px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}


/* =========================================================
   V4.12 – EINFACHES GESUCH + OPTIONALE BILDER
   ========================================================= */

.simple-trade-form .portal-form-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.trade-public-images{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin:12px 0;
}

.trade-public-image{
  display:block;
  overflow:hidden;
  height:92px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#eee5d7;
  cursor:zoom-in;
}

.trade-public-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

@media (max-width:700px){
  .simple-trade-form .portal-form-grid{
    grid-template-columns:1fr;
  }

  .trade-public-images{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .trade-public-image{
    height:105px;
  }
}


/* =========================================================
   V4.13 – STELLEN / AZUBI / AUSHILFE
   ========================================================= */

.job-admin-type-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:12px 0 18px;
}

.job-admin-type-tabs a{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
  color:var(--accent-dark);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.job-admin-type-tabs a.active{
  border-color:var(--accent);
  background:var(--accent);
  color:#fff;
}


/* =========================================================
   V4.14 – NUR ZWEI ANGEBOTE FÜR UNTERNEHMEN
   ========================================================= */

.business-offers-panel{
  padding-bottom:20px;
}

.business-offer-list{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.business-offer-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  align-items:start;
  padding:16px;
  border:1px solid var(--line);
  border-radius:13px;
  background:#fff;
  color:var(--text);
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}

.business-offer-card:hover{
  background:#fbf7f0;
  border-color:#ccb894;
  transform:translateY(-1px);
}

.business-offer-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:900;
}

.business-offer-content{
  min-width:0;
}

.business-offer-content .eyebrow{
  display:block;
  margin-bottom:3px;
  font-size:10px;
}

.business-offer-content strong{
  display:block;
  margin-bottom:5px;
  font-size:18px;
  line-height:1.25;
}

.business-offer-content small{
  display:block;
  max-width:760px;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}

.business-offer-content b{
  display:inline-block;
  margin-top:9px;
  color:var(--accent-dark);
  font-size:12px;
}

.business-offers-note{
  margin:13px 0 0;
  color:var(--muted);
  font-size:10px;
}

@media (max-width:600px){
  .business-offer-card{
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
    padding:13px;
  }

  .business-offer-icon{
    width:40px;
    height:40px;
  }

  .business-offer-content strong{
    font-size:16px;
  }
}


/* =========================================================
   V4.15 – ERKLÄRUNG + AUSPROBIEREN
   ========================================================= */

.directory-side-links-clean{
  margin-top:10px;
}

.business-offer-card{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.business-offer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.business-offer-explain,
.business-offer-test{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 11px;
  border-radius:9px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}

.business-offer-explain{
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--accent-dark);
}

.business-offer-explain:hover{
  background:#f4ebdf;
}

.business-offer-test{
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
}

.business-offer-test:hover{
  opacity:.92;
}

.business-explain-panel{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:14px;
  margin-top:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--bg);
}

.business-explain-preview{
  position:relative;
  overflow:hidden;
  min-height:96px;
  border-radius:9px;
  background:#eee5d7;
}

.business-explain-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.business-explain-play{
  position:absolute;
  left:50%;
  top:50%;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--accent-dark);
  font-size:15px;
  box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.business-explain-copy strong{
  display:block;
  margin-bottom:5px;
  font-size:13px;
}

.business-explain-copy p{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.business-explain-copy a{
  display:inline-block;
  margin-top:8px;
  color:var(--accent-dark);
  font-size:11px;
  font-weight:900;
  text-decoration:none;
}

.business-explain-copy a:hover{
  text-decoration:underline;
}

@media (max-width:680px){
  .business-explain-panel{
    grid-template-columns:1fr;
  }

  .business-explain-preview{
    min-height:150px;
  }

  .business-offer-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .business-offer-explain,
  .business-offer-test{
    width:100%;
  }
}


/* =========================================================
   V4.16 – EIN EINTRAGEN-BUTTON + VIDEO KLAR KLICKBAR
   ========================================================= */

/* Der einzige Eintragen-Button oben rechts darf etwas deutlicher sein. */
.site-header .nav-cta{
  padding:14px 22px;
  font-size:15px;
  font-weight:900;
  box-shadow:0 4px 12px rgba(86,63,32,.10);
}

/* Video-Vorschau ist jetzt selbst ein Link. */
.business-explain-preview-link{
  text-decoration:none;
  cursor:pointer;
  outline:none;
}

.business-explain-preview-link:hover .business-explain-play{
  transform:translate(-50%,-50%) scale(1.08);
}

.business-explain-preview-link:focus-visible{
  box-shadow:0 0 0 3px rgba(160,124,67,.22);
}

/* Der bisher kleine Textlink wird zu einem sichtbaren Video-Button. */
.business-explain-copy .business-video-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  min-height:38px;
  padding:9px 14px;
  border:1px solid var(--accent);
  border-radius:9px;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
}

.business-explain-copy .business-video-button:hover{
  text-decoration:none;
  background:var(--accent-dark);
}

/* Die Introzeile braucht ohne zweiten Button keinen leeren rechten Platz. */
.directory-intro-inner{
  display:block;
}

@media (max-width:700px){
  .site-header .nav-cta{
    padding:12px 16px;
    font-size:13px;
  }

  .business-explain-copy .business-video-button{
    width:100%;
  }
}


/* =========================================================
   V4.19 – KONTAKT & BESUCHERZÄHLER
   ========================================================= */

.visitor-counter-section{
  padding:14px 0 24px;
}

.visitor-counter-box{
  width:min(760px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 5px 16px rgba(68,54,37,.04);
}

.visitor-counter-box > div{
  padding:11px 14px 10px;
  text-align:center;
  border-right:1px solid var(--line);
}

.visitor-counter-box > div:last-child{
  border-right:0;
}

.visitor-counter-box strong{
  display:block;
  color:var(--text);
  font-size:18px;
  line-height:1.1;
}

.visitor-counter-box span{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10px;
}

.visitor-online-box{
  position:relative;
}

.visitor-online-dot{
  display:block;
  width:11px;
  height:11px;
  margin:0 auto 5px;
  border-radius:50%;
  background:#35c978;
  box-shadow:0 0 0 4px rgba(53,201,120,.12);
}

.visitor-online-box strong{
  color:#169653;
}

.contact-page{
  min-height:60vh;
}

.contact-intro{
  padding:42px 0 16px;
}

.contact-intro h1{
  margin-bottom:8px;
  font-size:clamp(34px,4vw,50px);
}

.contact-intro p{
  max-width:720px;
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.contact-section{
  padding:0 0 54px;
}

.contact-card{
  padding:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.contact-form{
  margin-top:4px;
}

.contact-direct{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--bg);
}

.contact-direct span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}

.contact-direct a{
  color:var(--accent-dark);
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.footer-help{
  font-size:12px;
}

.footer-help a{
  color:var(--accent-dark);
  font-weight:800;
  text-decoration:none;
}

@media(max-width:680px){
  .visitor-counter-box{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .visitor-counter-box > div{
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .visitor-counter-box > div:nth-child(even){
    border-right:0;
  }

  .visitor-counter-box > div:last-child{
    grid-column:1 / -1;
    border-right:0;
    border-bottom:0;
  }

  .contact-card{
    padding:17px;
  }

  .contact-direct{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
}


/* =========================================================
   V4.20 – BRANCHEN-FLYOUT + "JETZT DABEI SEIN"
   ========================================================= */

/* Kleiner Hinweis, nicht als riesiger Werbeblock */
.bs-join-section{
  padding:0 0 4px;
}

.bs-join-strip{
  min-height:142px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:20px 26px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(105deg, rgba(255,255,255,.96), rgba(248,242,232,.96));
  box-shadow:0 8px 24px rgba(65,49,31,.05);
}

.bs-join-copy{
  max-width:780px;
}

.bs-join-copy .eyebrow{
  margin-bottom:5px;
}

.bs-join-copy h2{
  margin:0 0 6px;
  font-size:clamp(22px,2.6vw,31px);
  line-height:1.08;
  letter-spacing:-.4px;
}

.bs-join-copy p{
  max-width:690px;
  margin:0 0 12px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.bs-join-copy .btn{
  min-height:38px;
  padding:0 14px;
  font-size:12px;
}

.bs-join-mascot{
  flex:0 0 auto;
  width:auto;
  height:124px;
  object-fit:contain;
  filter:drop-shadow(0 8px 10px rgba(80,56,22,.10));
}

/* Desktop: Firmen nicht mehr endlos unter der Branche aufklappen,
   sondern als eigene Liste direkt daneben. */
@media (min-width:801px){
  .directory-sidebar{
    overflow:visible;
    z-index:20;
  }

  .directory-accordion{
    position:relative;
    overflow:visible;
  }

  .directory-category{
    position:relative;
  }

  .directory-company-list{
    position:absolute;
    z-index:80;
    top:-8px;
    left:calc(100% + 12px);
    width:260px;
    max-height:min(430px,calc(100vh - 150px));
    overflow-y:auto;
    overscroll-behavior:contain;
    display:grid;
    gap:4px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(255,253,249,.99);
    box-shadow:0 16px 42px rgba(42,34,25,.16);
  }

  .directory-company-list[hidden]{
    display:none!important;
  }

  .directory-company-list::before{
    content:"";
    position:absolute;
    left:-7px;
    top:18px;
    width:12px;
    height:12px;
    border-left:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:rgba(255,253,249,.99);
    transform:rotate(45deg);
  }

  .directory-company-button{
    position:relative;
    z-index:1;
    padding:9px 10px;
    border-radius:9px;
    background:#fffdfa;
  }

  .directory-company-button:hover{
    background:var(--accent-soft);
  }

  .directory-category.is-open .directory-category-toggle{
    color:var(--accent-dark);
    background:rgba(238,222,198,.30);
    border-radius:9px;
  }

  .directory-category.is-open .directory-chevron{
    transform:rotate(-90deg);
  }
}

@media (max-width:800px){
  .bs-join-strip{
    min-height:0;
    padding:18px;
  }

  .bs-join-mascot{
    height:94px;
  }

  /* Mobil bleibt die bewährte normale Aufklapp-Liste unter der Branche. */
  .directory-company-list{
    position:static;
    width:auto;
    max-height:280px;
    overflow-y:auto;
  }
}

@media (max-width:560px){
  .bs-join-strip{
    align-items:flex-end;
    gap:10px;
  }

  .bs-join-copy h2{
    font-size:22px;
  }

  .bs-join-copy p{
    font-size:12px;
  }

  .bs-join-mascot{
    height:76px;
  }
}

/* =========================================================
   V4.21 – INFO-VIDEO: MANUELLER START, KEIN AUTOPLAY
   ========================================================= */
.bs-info-video-section{
  padding:18px 0 22px;
}

.bs-info-video-card{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);
  gap:28px;
  align-items:center;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 8px 24px rgba(65,49,31,.05);
}

.bs-info-video-copy h2{
  margin:0 0 10px;
  font-size:clamp(24px,2.8vw,34px);
}

.bs-info-video-copy p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.bs-info-video-copy .bs-info-video-note{
  margin-bottom:0;
  font-size:12px;
  color:var(--accent-dark);
  font-weight:700;
}

.bs-info-video-media{
  overflow:hidden;
  border-radius:14px;
  background:#171512;
  box-shadow:0 10px 28px rgba(42,34,25,.12);
}

.bs-info-video-media video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#171512;
}

@media (max-width:900px){
  .bs-info-video-card{
    grid-template-columns:1fr;
  }
}

@media (max-width:560px){
  .bs-info-video-section{
    padding:14px 0 18px;
  }
  .bs-info-video-card{
    padding:16px;
    gap:16px;
  }
  .bs-info-video-copy p{
    font-size:13px;
  }
}