/*
  BeLaGra Modern – Ergänzungen für das bestehende Lumia/Bootstrap-Template
  Diese Datei bewusst NACH assets/css/style.css laden.
*/

:root {
  --belagra-bg: #fbfaf8;
  --belagra-soft: #f4efe9;
  --belagra-card: #ffffff;
  --belagra-text: #292724;
  --belagra-muted: #706a64;
  --belagra-accent: #a87755;
  --belagra-accent-dark: #895d40;
  --belagra-line: #e5ddd5;
  --belagra-dark: #292724;
  --belagra-radius: 20px;
  --belagra-shadow: 0 18px 55px rgba(48, 39, 32, 0.09);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--belagra-text);
  background: var(--belagra-bg);
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--belagra-accent-dark);
}

a:hover {
  color: var(--belagra-accent);
}

img {
  max-width: 100%;
}

/* Header */
#header {
  height: 84px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(229, 221, 213, 0.88);
  box-shadow: 0 6px 28px rgba(43, 39, 35, 0.05);
  backdrop-filter: blur(12px);
}

#header .logo h1 {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

#header .logo h1 a {
  color: var(--belagra-text);
}

.logo-subline {
  margin-top: 1px;
  color: var(--belagra-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.navbar a,
.navbar a:focus {
  padding: 10px 0 10px 26px;
  color: #433f3b;
  font-weight: 600;
  font-size: 14px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: var(--belagra-accent-dark);
}

.header-shop-btn {
  margin-left: 24px;
  padding: 11px 17px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--belagra-dark);
  border-radius: 999px;
  color: var(--belagra-dark);
  font-size: 13px;
  font-weight: 700;
  transition: all .25s ease;
}

.header-shop-btn:hover {
  color: #fff;
  background: var(--belagra-dark);
}

/* Hero */
#hero.belagra-hero {
  width: 100%;
  min-height: 760px;
  height: auto;
  margin-top: 0;
  padding: 150px 0 95px;
  position: relative;
  background:
    linear-gradient(90deg, rgba(29, 27, 25, 0.86) 0%, rgba(29, 27, 25, 0.70) 42%, rgba(29, 27, 25, 0.44) 100%),
    url("../img/hero-produkte.jpg") center center / cover no-repeat;
}

#hero.belagra-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(29, 27, 25, 0.18));
  pointer-events: none;
}

#hero.belagra-hero .container {
  position: relative;
  z-index: 2;
}

.hero-kicker,
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--belagra-accent-dark);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero-kicker {
  color: #f1d9c7;
}

#hero.belagra-hero h1 {
  margin: 0;
  max-width: 620px;
  color: #fff;
  font-family: "Raleway", sans-serif;
  font-size: clamp(44px, 5.4vw, 70px);
  line-height: 1.01;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.hero-laser {
  position: relative;
  display: block;
}

.hero-laser-text {
  display: block;
  animation: belagraBurn 2.1s .15s cubic-bezier(.55,.1,.25,1) backwards;
}

.hero-laser::after {
  content: "";
  position: absolute;
  top: -3%;
  bottom: -3%;
  left: 0;
  width: 3px;
  background: #ffd59c;
  opacity: 0;
  box-shadow: 0 0 10px 3px rgba(255,190,90,.92), 0 0 28px 11px rgba(219,154,71,.38);
  animation: belagraBeam 2.1s .15s cubic-bezier(.55,.1,.25,1);
  pointer-events: none;
}

@keyframes belagraBurn {
  from { clip-path: inset(-10% 100% -10% 0); }
  to { clip-path: inset(-10% 0 -10% 0); }
}

@keyframes belagraBeam {
  0% { left: 0; opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-laser-text { animation: none; clip-path: none; }
  .hero-laser::after { display: none; }
}

.hero-lead {
  max-width: 540px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.btn-belagra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 13px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn-belagra:hover {
  transform: translateY(-2px);
}

.btn-belagra-primary {
  color: #fff;
  background: var(--belagra-accent);
  box-shadow: 0 10px 30px rgba(168, 119, 85, .24);
}

.btn-belagra-primary:hover {
  color: #fff;
  background: var(--belagra-accent-dark);
  box-shadow: 0 13px 34px rgba(137, 93, 64, .28);
}

.btn-belagra-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,.48);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
}

.btn-belagra-light:hover {
  color: var(--belagra-text);
  background: #fff;
  border-color: #fff;
}

.btn-belagra-outline-light {
  color: #fff;
  border: 1px solid rgba(255,255,255,.38);
}

.btn-belagra-outline-light:hover {
  color: var(--belagra-text);
  background: #fff;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 34px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 600;
}

.hero-facts span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hero-facts i {
  color: #f1d9c7;
  font-size: 17px;
}

.hero-product-card {
  position: relative;
  max-width: 560px;
  margin-left: auto;
}

.hero-product-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 24px 55px rgba(24, 20, 17, 0.28);
}


/* General */
.belagra-section {
  padding: 92px 0;
}

.belagra-section-soft {
  background: var(--belagra-soft);
}

.section-heading {
  max-width: 780px;
  margin: 0 auto 46px;
}

.section-heading h2,
#about h2,
.shop-cta h2 {
  margin: 0;
  color: var(--belagra-text);
  font-family: "Raleway", sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.section-heading p {
  margin: 18px auto 0;
  color: var(--belagra-muted);
  font-size: 17px;
  line-height: 1.75;
}

/* Intro */
.intro-strip {
  position: relative;
  z-index: 3;
  margin-top: -46px;
  padding-bottom: 18px;
}

.trust-card {
  display: flex;
  align-items: flex-start;
  gap: 17px;
  padding: 25px;
  border: 1px solid rgba(229, 221, 213, .8);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: var(--belagra-shadow);
}

.trust-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: var(--belagra-accent-dark);
  background: var(--belagra-soft);
  font-size: 21px;
}

.trust-card h3 {
  margin: 1px 0 7px;
  font-size: 17px;
  font-weight: 700;
}

.trust-card p {
  margin: 0;
  color: var(--belagra-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Services */
.service-card {
  height: 100%;
  display: block;
  overflow: hidden;
  color: var(--belagra-text);
  border: 1px solid var(--belagra-line);
  border-radius: var(--belagra-radius);
  background: var(--belagra-card);
  box-shadow: 0 12px 38px rgba(48,39,32,.055);
  transition: transform .28s ease, box-shadow .28s ease;
}

.service-card:hover {
  color: var(--belagra-text);
  transform: translateY(-7px);
  box-shadow: var(--belagra-shadow);
}

.service-image {
  height: 245px;
  overflow: hidden;
  background: #ece8e3;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.035);
}

.service-content {
  position: relative;
  padding: 24px 24px 26px;
}

.service-number {
  display: block;
  margin-bottom: 12px;
  color: var(--belagra-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
}

.service-content h3 {
  margin: 0 0 11px;
  font-size: 22px;
  font-weight: 700;
}

.service-content p {
  min-height: 72px;
  margin: 0 0 18px;
  color: var(--belagra-muted);
  font-size: 14px;
  line-height: 1.7;
}

.service-link,
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--belagra-accent-dark);
  font-size: 13px;
  font-weight: 800;
}

.service-card:hover .service-link i,
.text-link:hover i {
  transform: translateX(4px);
}

.service-link i,
.text-link i {
  transition: transform .2s ease;
}

/* About */
.about-image-wrap {
  position: relative;
}

.about-image {
  width: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: var(--belagra-shadow);
}

.about-badge {
  position: absolute;
  right: -18px;
  bottom: 28px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(47,39,32,.13);
  color: var(--belagra-muted);
  font-size: 13px;
  line-height: 1.35;
}

.about-badge i {
  color: var(--belagra-accent-dark);
  font-size: 23px;
}

.about-badge strong {
  color: var(--belagra-text);
}

#about h2 {
  margin-bottom: 22px;
}

.lead-copy {
  color: #49443f;
  font-size: 18px;
  line-height: 1.75;
}

#about p:not(.lead-copy) {
  color: var(--belagra-muted);
  line-height: 1.8;
}

.about-checks {
  display: grid;
  gap: 12px;
  margin: 24px 0 27px;
}

.about-checks div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4a4540;
  font-weight: 600;
}

.about-checks i {
  margin-top: 3px;
  color: var(--belagra-accent-dark);
  font-size: 18px;
}

/* Process */
.process-card {
  height: 100%;
  padding: 34px;
  border-top: 1px solid var(--belagra-line);
}

.process-card > span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border-radius: 50%;
  background: var(--belagra-soft);
  color: var(--belagra-accent-dark);
  font-weight: 800;
}

.process-card h3 {
  margin-bottom: 12px;
  font-size: 21px;
  font-weight: 700;
}

.process-card p {
  margin: 0;
  color: var(--belagra-muted);
  line-height: 1.75;
}

/* Materials */
.belagra-materials-section {
  background: #fff;
  padding-top: 82px;
  padding-bottom: 86px;
}

.belagra-materials-section h2 {
  margin: 0;
  color: var(--belagra-text);
  font-family: "Raleway", sans-serif;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.materials-lead {
  margin: 18px 0 0;
  color: var(--belagra-muted);
  font-size: 17px;
  line-height: 1.8;
  max-width: 34rem;
}

.material-grid-warm {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.material-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(229,221,213,.9);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(48,39,32,.04);
}

.material-chip strong {
  display: block;
  color: var(--belagra-text);
  font-size: 15px;
  line-height: 1.2;
}

.material-chip small {
  display: block;
  margin-top: 3px;
  color: var(--belagra-muted);
  font-size: 12px;
  line-height: 1.4;
}

.swatch {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(34,40,45,.12);
}

.sw-holz{background:repeating-linear-gradient(92deg,#d8b580 0 7px,#cfa96f 7px 10px,#ddbd8b 10px 19px)}
.sw-glas{background:linear-gradient(135deg,#f2fafb,#bcd9df 55%,#eaf6f8)}
.sw-edelstahl{background:linear-gradient(90deg,#b4bbbf,#eceff0 30%,#a5acb0 62%,#e2e6e8)}
.sw-messing{background:linear-gradient(135deg,#c9a24a,#ecd083 45%,#b08628)}
.sw-leder{background:radial-gradient(circle at 30% 28%,#92603f,#5a3824)}
.sw-schiefer{background:linear-gradient(135deg,#3c454c,#252b30)}
.sw-acryl{background:linear-gradient(135deg,rgba(173,184,194,.35),#fff 62%)}
.sw-textil{background:linear-gradient(135deg,#e7e0d8,#f7f4ef 55%,#ded6cc)}
.sw-papier{background:linear-gradient(135deg,#ccb393,#f0e2cf 55%,#b9956b)}
.sw-stein{background:linear-gradient(135deg,#c9c7c3,#a9a39c 45%,#ddd9d4)}


/* Portfolio */
.belagra-section-dark {
  color: #fff;
  background: var(--belagra-dark);
}

.section-heading-light h2,
.section-heading-light p {
  color: #fff;
}

.section-heading-light p {
  opacity: .7;
}

.section-heading-light .eyebrow {
  color: #ddbca5;
}

.portfolio-tile {
  position: relative;
  display: block;
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
}

.portfolio-tile::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
}

.portfolio-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .4s ease;
}

.portfolio-tile span {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}

.portfolio-tile:hover img {
  transform: scale(1.045);
  opacity: .9;
}

/* CTA */
.shop-cta {
  padding: 70px 0;
  background: #fff;
}

.shop-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: 42px 46px;
  border: 1px solid var(--belagra-line);
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, #f6f1ec 100%);
}

.shop-cta h2 {
  max-width: 800px;
  font-size: clamp(28px, 3.2vw, 42px);
}

.shop-cta p {
  margin: 12px 0 0;
  color: var(--belagra-muted);
}

/* Contact */
.contact-side {
  padding: 8px 20px 0 0;
}

.contact-side h3 {
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 700;
}

.contact-side > p {
  margin-bottom: 28px;
  color: var(--belagra-muted);
  line-height: 1.7;
}

.contact-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 15px 17px;
  border: 1px solid rgba(229,221,213,.9);
  border-radius: 15px;
  color: var(--belagra-text);
  background: rgba(255,255,255,.6);
}

a.contact-detail:hover {
  color: var(--belagra-text);
  background: #fff;
}

.contact-detail > i {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--belagra-accent-dark);
  background: #fff;
  font-size: 18px;
}

.contact-detail span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  font-weight: 700;
}

.contact-detail small {
  color: var(--belagra-muted);
  font-size: 11px;
  font-weight: 600;
}

.contact-note {
  display: flex;
  gap: 11px;
  margin-top: 25px;
  color: var(--belagra-muted);
  font-size: 13px;
  line-height: 1.65;
}

.contact-note p {
  margin: 0;
}

.belagra-form {
  padding: 32px;
  border: 1px solid rgba(229,221,213,.88);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(48,39,32,.065);
}

.belagra-form label {
  margin-bottom: 7px;
  color: #4a4540;
  font-size: 13px;
  font-weight: 700;
}

.belagra-form .form-control,
.belagra-form .form-select {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #dcd4cd;
  border-radius: 12px;
  color: var(--belagra-text);
  background-color: #fff;
  box-shadow: none;
}

.belagra-form textarea.form-control {
  min-height: 170px;
  resize: vertical;
}

.belagra-form .form-control:focus,
.belagra-form .form-select:focus {
  border-color: var(--belagra-accent);
  box-shadow: 0 0 0 4px rgba(168,119,85,.10);
}

.belagra-check {
  padding-top: 4px;
}

.belagra-check .form-check-input {
  margin-top: .23rem;
}

.belagra-check .form-check-label {
  margin: 0;
  color: var(--belagra-muted);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 500;
}

.form-required {
  color: var(--belagra-muted);
}

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

.form-status {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 14px;
}

.form-status i {
  margin-top: 2px;
  font-size: 21px;
}

.form-status div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-status span {
  font-size: 13px;
}

.form-status-success {
  color: #225c3e;
  border: 1px solid #bfddcc;
  background: #edf8f1;
}

.form-status-error {
  color: #7e342f;
  border: 1px solid #e8c5c0;
  background: #fff0ee;
}

/* Footer */
#footer.belagra-footer {
  color: rgba(255,255,255,.75);
  background: #211f1d;
}

#footer.belagra-footer .footer-top {
  padding: 66px 0 50px;
  background: transparent;
}

#footer.belagra-footer h3,
#footer.belagra-footer h4 {
  color: #fff;
}

.footer-brand {
  margin-bottom: 4px;
  font-size: 29px;
  font-weight: 700;
}

.footer-tagline {
  color: #d2ad93;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

#footer.belagra-footer p {
  color: rgba(255,255,255,.66);
  line-height: 1.75;
}

#footer.belagra-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer.belagra-footer ul li {
  padding: 5px 0;
}

#footer.belagra-footer a {
  color: rgba(255,255,255,.7);
}

#footer.belagra-footer a:hover {
  color: #fff;
}

.footer-social {
  width: 39px;
  height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
}

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
}

.footer-contact-line i {
  color: #d2ad93;
}

.footer-bottom {
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

.footer-credit {
  margin-top: 5px;
}

/* Existing template helpers */
.back-to-top {
  background: var(--belagra-accent);
}

.back-to-top:hover {
  background: var(--belagra-accent-dark);
}

/* Responsive */
@media (max-width: 991.98px) {
  #header {
    height: 74px;
  }

  #hero.belagra-hero {
    min-height: 700px;
    padding: 130px 0 95px;
    background-position: 62% center;
  }

  #hero.belagra-hero h1 {
    max-width: 680px;
  }

  .belagra-section {
    padding: 72px 0;
  }

  .about-image {
    min-height: 420px;
  }

  .about-badge {
    right: 18px;
  }

  .shop-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .navbar-mobile {
    background: rgba(255,255,255,.98);
  }
}

@media (max-width: 767.98px) {
  #hero.belagra-hero {
    min-height: 650px;
    padding-top: 120px;
    background-position: 66% center;
  }

  #hero.belagra-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(23, 22, 20, .20);
  }

  #hero.belagra-hero h1 {
    font-size: 44px;
  }

  .hero-lead {
    font-size: 17px;
  }

  .hero-facts {
    display: grid;
    gap: 9px;
  }

  .intro-strip {
    margin-top: -28px;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .service-image {
    height: 280px;
  }

  .about-image {
    min-height: 350px;
  }

  .portfolio-tile {
    height: 230px;
  }

  .shop-cta {
    padding: 50px 0;
  }

  .shop-cta-inner {
    padding: 30px 24px;
  }

  .belagra-form {
    padding: 23px 19px;
  }

  .contact-side {
    padding-right: 0;
  }
}

@media (max-width: 575.98px) {
  #hero.belagra-hero h1 {
    font-size: 39px;
  }

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

  .hero-actions .btn-belagra {
    width: 100%;
  }

  .portfolio-tile {
    height: 195px;
  }

  .service-image {
    height: 245px;
  }
}

@media (max-width: 991.98px) {
  #hero.belagra-hero {
    min-height: auto;
    padding: 128px 0 88px;
    background-position: center center;
  }

  .hero-product-card {
    margin: 10px auto 0;
    max-width: 620px;
  }

  .material-grid-warm {
    margin-top: 4px;
  }
}

@media (max-width: 767.98px) {
  #hero.belagra-hero {
    padding: 118px 0 76px;
    background-position: center center;
  }

  #hero.belagra-hero h1 {
    font-size: 42px;
  }

  .hero-product-card img {
    border-radius: 18px;
  }

  .material-grid-warm {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  #hero.belagra-hero h1 {
    font-size: 37px;
  }

  .hero-lead {
    font-size: 17px;
  }

  .belagra-materials-section {
    padding-top: 68px;
    padding-bottom: 72px;
  }

  .material-chip {
    padding: 13px 14px;
  }
}

.hero-product-card { display:none; }


/* Intro copy section */
.belagra-copy-intro {
  padding-top: 74px;
  padding-bottom: 74px;
  background: #fff;
}
.copy-intro-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.copy-intro-inner h2 {
  margin: 0;
  color: var(--belagra-text);
  font-family: "Raleway", sans-serif;
  font-size: clamp(34px, 4.5vw, 58px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.copy-intro-line {
  display: block;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  margin: 20px auto 22px;
  background: linear-gradient(90deg, transparent 0, var(--belagra-accent) 28%, var(--belagra-accent) 72%, transparent 100%);
}
.copy-intro-inner p {
  margin: 0 auto 16px;
  max-width: 1040px;
  color: #4e4944;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.8;
}
.copy-intro-inner p:last-child { margin-bottom: 0; }

/* About overview */
.belagra-about-overview {
  background: #fbf8f4;
}
.belagra-about-overview h2 {
  margin: 0 0 18px;
  color: var(--belagra-text);
  font-family: "Raleway", sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.belagra-about-overview p {
  color: var(--belagra-muted);
  line-height: 1.84;
}
.belagra-about-overview .lead-copy { color: #49443f; }
.about-overview-card {
  padding: 22px;
  border: 1px solid rgba(229,221,213,.86);
  border-radius: 26px;
  background: #fff;
  box-shadow: var(--belagra-shadow);
}
.about-overview-card img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
}
.overview-points {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
.overview-points div {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #4a4540;
  font-weight: 600;
}
.overview-points i {
  margin-top: 2px;
  color: var(--belagra-accent-dark);
}

/* Service cards */
.belagra-service-section {
  background: #f6f3ef;
}
.service-info-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px 26px;
  border: 1px solid rgba(229,221,213,.88);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(48,39,32,.05);
}
.service-info-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--belagra-soft);
  color: var(--belagra-accent);
  font-size: 28px;
}
.service-info-card h3 {
  margin: 2px 0 10px;
  color: var(--belagra-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}
.service-info-card p {
  margin: 0;
  color: var(--belagra-muted);
  line-height: 1.75;
}

/* Portfolio mosaic */
.portfolio-mosaic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: 16px;
}
.mosaic-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: #111;
}
.mosaic-item::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
}
.mosaic-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease, opacity .4s ease;
}
.mosaic-item span {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.mosaic-item:hover img {
  transform: scale(1.045);
  opacity: .9;
}
.mosaic-large { grid-column: span 2; grid-row: span 2; }
.mosaic-wide { grid-column: span 2; }
.mosaic-tall { grid-row: span 2; }

@media (max-width: 991.98px) {
  .copy-intro-inner p {
    font-size: 18px;
  }
  .about-overview-card img {
    height: 300px;
  }
  .portfolio-mosaic-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .belagra-copy-intro {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  .copy-intro-inner p {
    font-size: 17px;
    line-height: 1.7;
  }
  .service-info-card {
    padding: 22px 20px;
  }
  .portfolio-mosaic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 160px;
  }
  .mosaic-large,
  .mosaic-wide,
  .mosaic-tall { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 575.98px) {
  .copy-intro-inner h2 {
    font-size: 30px;
  }
  .service-info-card {
    flex-direction: column;
    gap: 16px;
  }
  .portfolio-mosaic-grid {
    gap: 12px;
  }
}


/* V8 Feinschliff: ruhigere Typografie */
#hero.belagra-hero h1 {
  font-size: clamp(38px, 4.8vw, 58px);
  max-width: 580px;
}
.hero-lead {
  font-size: clamp(17px, 1.7vw, 20px);
  max-width: 510px;
}
.section-heading h2,
#about h2,
.shop-cta h2,
.belagra-materials-section h2,
.belagra-about-overview h2 {
  font-size: clamp(28px, 3vw, 38px);
}
.copy-intro-inner h2 {
  font-size: clamp(29px, 3.2vw, 42px);
}
.copy-intro-inner p {
  font-size: clamp(18px, 1.45vw, 21px);
}
.belagra-section {
  padding: 82px 0;
}
.section-heading {
  margin-bottom: 38px;
}
.eyebrow,
.hero-kicker {
  font-size: 11px;
}

/* Works section like uploaded project, but in warm dark-brown look */
.belagra-works-section {
  background: linear-gradient(180deg, #2b221d 0%, #231b17 100%);
}
.works-heading {
  max-width: 860px;
  margin: 0 auto 34px;
}
.works-heading h2 {
  margin: 0;
  color: #f7f2ed;
  font-family: "Raleway", sans-serif;
  font-size: clamp(29px, 3vw, 42px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.works-heading p {
  margin: 14px 0 0;
  color: rgba(247,242,237,.82);
  font-size: 18px;
  line-height: 1.7;
}
.works-gallery {
  column-count: 2;
  column-gap: 1rem;
}
@media (min-width:768px){
  .works-gallery { column-count: 3; }
}
@media (min-width:1200px){
  .works-gallery { column-count: 4; }
}
.works-gallery .shot {
  break-inside: avoid;
  margin: 0 0 1rem;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #e9e2dc;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}
.works-gallery .shot a {
  display: block;
}
.works-gallery .shot img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .35s ease;
}
.works-gallery .shot:hover img {
  transform: scale(1.025);
}
.works-gallery .shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.9rem .9rem .75rem;
  background: linear-gradient(transparent, rgba(18,14,12,.86));
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.works-gallery .shot:hover figcaption,
.works-gallery .shot:focus-within figcaption {
  opacity: 1;
}
.works-gallery .shot-count {
  position: absolute;
  top: .7rem;
  right: .7rem;
  background: rgba(21,16,14,.88);
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  padding: .18rem .58rem;
  border-radius: 99px;
  pointer-events: none;
}
.belagra-works-section .btn-belagra-outline-light {
  color: #fff;
  border-color: rgba(255,255,255,.38);
}
.belagra-works-section .btn-belagra-outline-light:hover {
  background: #fff;
  color: var(--belagra-text);
}

@media (max-width: 991.98px) {
  .works-heading p { font-size: 17px; }
}
@media (max-width: 575.98px) {
  .works-heading { margin-bottom: 28px; }
  .works-heading p { font-size: 16px; }
}


/* V9 – Typografie deutlich ruhiger */
#hero.belagra-hero h1 {
  font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.07;
  font-weight: 650;
  max-width: 540px;
  letter-spacing: -0.035em;
}
.hero-lead {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  max-width: 500px;
}
.section-heading h2,
#about h2,
.shop-cta h2,
.belagra-materials-section h2,
.belagra-about-overview h2 {
  font-size: clamp(25px, 2.25vw, 34px);
  line-height: 1.16;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.section-heading p,
.materials-lead {
  font-size: 16px;
}
.copy-intro-inner {
  max-width: 1240px;
}
.copy-intro-inner h2 {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(27px, 2.4vw, 36px);
  line-height: 1.18;
  font-weight: 650;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.copy-intro-inner p {
  max-width: 1040px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.68;
}
.copy-intro-line {
  margin-top: 17px;
  margin-bottom: 20px;
}
.works-heading h2 {
  font-size: clamp(26px, 2.4vw, 35px);
  font-weight: 650;
}
.works-heading p {
  font-size: 16px;
}
.shop-cta h2 {
  max-width: 760px;
}

/* komplette Galerieseite */
.gallery-page-hero {
  padding: 150px 0 72px;
  background: linear-gradient(135deg,#2b221d 0%,#211915 100%);
  color:#fff;
}
.gallery-page-hero .eyebrow { color:#d6b292; }
.gallery-page-hero h1 {
  margin:0;
  max-width:760px;
  font-family:"Raleway",sans-serif;
  font-size:clamp(32px,3vw,44px);
  line-height:1.12;
  font-weight:650;
  letter-spacing:-.03em;
}
.gallery-page-hero p {
  max-width:720px;
  margin:18px 0 0;
  color:rgba(255,255,255,.76);
  font-size:17px;
  line-height:1.7;
}
.gallery-page-section {
  padding:76px 0 88px;
  background:#fbfaf8;
}
.gallery-page-section .gallery {
  column-count:2;
  column-gap:1rem;
}
@media(min-width:768px){.gallery-page-section .gallery{column-count:3}}
@media(min-width:1200px){.gallery-page-section .gallery{column-count:4}}
.gallery-page-section .shot {
  break-inside:avoid;
  margin:0 0 1rem;
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#eee8e2;
  box-shadow:0 12px 30px rgba(48,39,32,.09);
}
.gallery-page-section .shot a{display:block}
.gallery-page-section .shot img{display:block;width:100%;height:auto;transition:transform .35s ease}
.gallery-page-section .shot:hover img{transform:scale(1.025)}
.gallery-page-section .shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.9rem .9rem .75rem;
  background:linear-gradient(transparent,rgba(27,20,17,.88));
  color:#fff;font-size:.86rem;font-weight:600;line-height:1.3;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.gallery-page-section .shot:hover figcaption,
.gallery-page-section .shot:focus-within figcaption{opacity:1}
.gallery-page-section .shot-count{
  position:absolute;top:.65rem;right:.65rem;background:rgba(34,26,22,.88);color:#fff;
  font-size:.76rem;font-weight:700;padding:.18rem .58rem;border-radius:99px;pointer-events:none
}
.gallery-page-back { margin-bottom:28px; }

@media(max-width:767.98px){
  #hero.belagra-hero h1{font-size:clamp(32px,9vw,42px)}
  .copy-intro-inner h2{font-size:clamp(25px,7vw,31px)}
  .gallery-page-hero{padding-top:120px}
}

/* V12 Trust-Karten */
.trust-icon .bx{font-size:24px;line-height:1;}

/* V13: Inline-SVG icons are independent of icon-font versions */
.trust-icon svg, .service-info-icon svg { width: 25px; height: 25px; display: block; }


/* V14 - gemeinsame Unterseiten im warmen BeLaGra Stil */
.subpage-hero {
  padding: 148px 0 70px;
  background: linear-gradient(135deg,#2b221d 0%,#211915 100%);
  color:#fff;
}
.subpage-hero .eyebrow { color:#d6b292; }
.subpage-hero h1 {
  max-width:820px;
  margin:0;
  font-family:"Raleway",sans-serif;
  font-size:clamp(31px,3vw,43px);
  line-height:1.13;
  font-weight:650;
  letter-spacing:-.028em;
}
.subpage-hero p {
  max-width:780px;
  margin:18px 0 0;
  color:rgba(255,255,255,.79);
  font-size:17px;
  line-height:1.72;
}
.subpage-section { padding:82px 0; background:#fff; }
.subpage-section.subpage-soft { background:#f7f3ef; }
.subpage-section h2 {
  font-size:clamp(25px,2.2vw,34px);
  line-height:1.2;
  font-weight:650;
  letter-spacing:-.022em;
  color:var(--belagra-text);
  margin:8px 0 18px;
}
.subpage-section p { color:#5e554f; font-size:16px; line-height:1.75; }
.subpage-image-card { position:relative; overflow:hidden; border-radius:22px; box-shadow:0 18px 45px rgba(49,39,33,.12); background:#efe8e1; }
.subpage-image-card img { width:100%; height:auto; max-height:520px; object-fit:cover; display:block; }
.subpage-image-card span { position:absolute; left:18px; bottom:18px; padding:8px 13px; border-radius:999px; background:rgba(38,29,25,.82); color:#fff; font-size:13px; }
.detail-card { padding:30px; border:1px solid #e8ded5; border-radius:20px; background:#fff; box-shadow:0 12px 35px rgba(45,36,30,.06); }
.detail-icon { width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:#f3ece6; color:#a77752; font-size:22px; margin-bottom:18px; }
.detail-card h3 { font-size:20px; font-weight:650; margin:0 0 10px; }
.detail-card p { margin-bottom:0; }
.detail-card .text-link { display:inline-flex; margin-top:17px; }
.mini-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mini-gallery a { display:block; overflow:hidden; border-radius:18px; background:#eee7e0; min-height:260px; }
.mini-gallery img { width:100%; height:100%; min-height:260px; max-height:360px; object-fit:cover; transition:transform .3s ease; }
.mini-gallery a:hover img { transform:scale(1.025); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.tag-cloud span { padding:10px 16px; border-radius:999px; background:#fff; border:1px solid #e4d8ce; color:#4b413b; font-size:14px; }
.subpage-cta { padding:72px 0; background:#2a211d; color:#fff; }
.subpage-cta-inner { display:flex; gap:40px; align-items:center; justify-content:space-between; }
.subpage-cta .eyebrow { color:#d6b292; }
.subpage-cta h2 { color:#fff; font-size:clamp(25px,2.2vw,34px); margin:7px 0 10px; font-weight:650; }
.subpage-cta p { max-width:720px; color:rgba(255,255,255,.74); margin:0; line-height:1.7; }
.subpage-cta-actions { min-width:270px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.subpage-phone { color:#fff; font-weight:650; }
.subpage-phone:hover { color:#fff; }
.subpage-phone small { display:block; font-weight:400; color:rgba(255,255,255,.62); margin-top:2px; }
.person-card { padding:34px; border-radius:22px; background:#fff; border:1px solid #e8ded5; text-align:center; box-shadow:0 12px 35px rgba(45,36,30,.06); }
.person-initials { width:66px; height:66px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; background:#ede3da; color:#8f6245; font-weight:700; font-size:20px; }
.person-card h3 { margin:0 0 4px; font-size:21px; }
.person-card > span { display:block; color:#a77752; font-size:14px; margin-bottom:14px; }
.location-card { border-radius:22px; background:#f4ece6; padding:34px; text-align:center; }
.location-card i { display:block; font-size:30px; color:#a77752; margin-bottom:10px; }
.location-card strong,.location-card span,.location-card small { display:block; }
.location-card strong { font-size:21px; margin-bottom:8px; }
.location-card span { color:#554b45; line-height:1.7; }
.location-card small { margin-top:12px; color:#8a7d73; }
.legal-card { max-width:920px; margin:0 auto; padding:42px; border-radius:22px; border:1px solid #e7ddd4; background:#fff; box-shadow:0 12px 35px rgba(45,36,30,.05); }
.legal-card h2 { font-size:22px; margin-top:30px; }
.legal-card h2:first-child { margin-top:0; }
.legal-card a { color:#9a694b; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:991.98px){.subpage-cta-inner{align-items:flex-start;flex-direction:column}.subpage-cta-actions{min-width:0}.mini-gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575.98px){.subpage-hero{padding:118px 0 56px}.subpage-section{padding:62px 0}.mini-gallery{grid-template-columns:1fr}.mini-gallery a,.mini-gallery img{min-height:220px}.legal-card{padding:26px 20px}}


/* V15 - Leistungsmenue und feste SVG Icons */
.detail-icon svg{width:25px;height:25px;display:block;}
.navbar .dropdown ul{border-radius:14px;border:1px solid rgba(122,91,68,.12);box-shadow:0 14px 35px rgba(43,34,29,.12);padding:10px 0;}
.navbar .dropdown ul a{font-size:14px;color:#323232;padding:9px 20px;}
.navbar .dropdown ul a:hover,.navbar .dropdown ul .active{color:#a77752;}
@media(min-width:992px){.mini-gallery:has(a:nth-child(4)){grid-template-columns:repeat(4,1fr)}.mini-gallery:has(a:nth-child(4)) a{min-height:230px}.mini-gallery:has(a:nth-child(4)) img{min-height:230px}}

/* V18 - ausführliche Unterseiten */
.rich-copy{max-width:980px;margin:0 auto;}
.rich-copy h2{font-size:clamp(23px,2.2vw,30px);margin:34px 0 12px;color:#2f2b28;}
.rich-copy h2:first-child{margin-top:0;}
.rich-copy p{font-size:16px;line-height:1.75;color:#4c4641;margin-bottom:14px;}
.rich-copy ul{margin:0 0 22px 1.1rem;padding-left:.8rem;color:#4c4641;}
.rich-copy li{margin:.4rem 0;line-height:1.6;}
.mini-gallery img{object-fit:cover;}
@media (max-width:767px){.rich-copy h2{font-size:23px}.rich-copy p,.rich-copy li{font-size:15px;}}


/* ===== V19 Feinschliff Unterseiten ===== */

/* Lange SEO-Texte als ruhige, filigrane Inhaltskarte */
.rich-copy{
  max-width:1040px;
  margin:0 auto;
  padding:clamp(30px,4vw,48px);
  background:#fbf7f2;
  border:1px solid #eadfd5;
  border-radius:24px;
  box-shadow:0 12px 30px rgba(54,43,35,.05);
}
.rich-copy h2{
  position:relative;
  font-size:clamp(22px,2vw,28px);
  line-height:1.28;
  margin:34px 0 12px;
  padding-top:30px;
  color:#2f2a26;
  font-weight:650;
}
.rich-copy h2:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:64px;
  height:1px;
  background:#c7a889;
}
.rich-copy h2:first-child{
  margin-top:0;
  padding-top:0;
}
.rich-copy p{
  max-width:900px;
  font-size:16px;
  line-height:1.78;
  color:#4c4641;
  margin-bottom:15px;
}
.rich-copy ul{
  max-width:900px;
  margin:4px 0 24px 1rem;
  padding-left:1rem;
  color:#4c4641;
}
.rich-copy li{
  margin:.45rem 0;
  line-height:1.65;
}
.rich-copy strong{
  color:#352e29;
  font-weight:650;
}

/* Bereich über dem Footer freundlicher und heller */
.subpage-cta{
  padding:70px 0;
  background: linear-gradient(135deg, #f4ebe3 0%, #eaded2 100%);
  color:#2f2925;
  border-top:1px solid rgba(111,82,61,.08);
  
}
.subpage-cta .subpage-phone {
  color: #2f2925;
}

.subpage-cta .subpage-phone small {
  color: #5a4e46;
}
.subpage-cta .eyebrow{
  color:#8b5f42;
}
.subpage-cta h2{
  color:#2f2925;
}
.subpage-cta p{
  color:#5a4e46;
}
.subpage-cta .btn-belagra-light{
  color:#3d332d;
  border:1px solid rgba(61,51,45,.32);
  background:rgba(255,255,255,.32);
  backdrop-filter:none;
}
.subpage-cta .btn-belagra-light:hover{
  color:#2d2521;
  background:#fff;
  border-color:#fff;
}

@media (max-width:767px){
  .rich-copy{
    padding:26px 20px;
    border-radius:18px;
  }
  .rich-copy h2{
    font-size:22px;
    padding-top:24px;
  }
}