:root {
  --bg-body: #f8f9fa;
  --text: #1a1a1a;
  --muted: #555555;
  --gold: #b08d57;
  --gold-hover: #917245;
  --gold-light: rgba(176, 141, 87, 0.1);
  --white: #ffffff;
  --border: rgba(0, 0, 0, 0.1);
  --glass: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.4);
  --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --max-width: 1250px;
  --border-radius: 16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg-body);
  background-image: url('https://www.transparenttextures.com/patterns/marble-similar.png');
  color: var(--text);
  line-height: 1.7;
}

h1, h2, h3, h4 { line-height: 1.2; font-weight: 800; color: #111; }
p { margin-bottom: 1rem; }
a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
ul { list-style: none; }

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 12px;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--spacing-md); text-align: center; }
.section { padding: var(--spacing-lg) 0; }
.bg-light { background: rgba(176, 141, 87, 0.03); }

/* Utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }

/* Keep readable line-length for long copy */
.prose {
  max-width: 72ch;
  margin-left: auto;
  margin-right: auto;
}

/* Contact: compact trust row, centered */
.trust-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(182,147,81,0.08);
  border: 1px solid rgba(182,147,81,0.18);
  font-size: 0.92rem;
  color: #3b3327;
}
.trust-pill i { color: var(--gold); }

.section-title {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.section-title h2 { font-size: 2.75rem; margin-bottom: 1rem; letter-spacing: -1px; }

.header {
  background: var(--glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* When mobile nav is open: lock scroll + add soft backdrop */
body.nav-open {
  overflow: hidden;
  touch-action: none;
}
body.nav-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999; /* under header/nav (1000/1001) */
}
body.nav-open .sticky-buttons { display: none; }
.nav-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem var(--spacing-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  transition: transform .18s ease, opacity .18s ease;
  will-change: transform, opacity;
}
.logo:hover { transform: scale(1.03); opacity: .9; }
.logo:active { transform: scale(0.99); }
.logo-svg { height: 46px; width: auto; }
.logo-text {
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #111;
}
.logo-text em {
  font-style: normal;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 480px) {
  .logo-svg { height: 40px; }
  .logo-text { font-size: 1.1rem; }
}

.nav-menu { display: flex; gap: 2rem; }
.nav-menu a { font-weight: 600; font-size: 0.95rem; color: var(--text); opacity: 0.8; }
.nav-menu a:hover, .nav-menu a.active { color: var(--gold); opacity: 1; }

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; }
.burger span { width: 28px; height: 3px; background: var(--text); border-radius: 4px; }

.card, .icon-card, .gallery-item {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .3s ease;
}
.card:hover, .icon-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.icon-card .icon {
  width: 70px;
  height: 70px;
  background: var(--gold-light);
  color: var(--gold);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  margin-inline: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .85rem;
  transition: all .4s ease;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 10px 20px rgba(176,141,87,.3);
}
.btn-primary:hover {
  background: var(--gold-hover);
  transform: scale(1.03);
  box-shadow: 0 15px 25px rgba(176,141,87,.4);
}
.btn-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

.footer {
  background: #111;
  color: #fff;
  padding: 5rem 0 2rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 2rem;
  margin-top: 4rem;
  opacity: .6;
  font-size: .9rem;
}

.sticky-buttons {
  position: fixed;
  bottom: 30px;
  right: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1001;
}
.sticky-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: .3s;
  color: #fff;
  font-size: 1.4rem;
}
.sticky-btn.call { background: var(--gold); }
.sticky-btn.whatsapp { background: var(--gold); }

.section-hero { text-align: center; padding: var(--spacing-lg) 0; }
.section-hero .subline {
  opacity: .88;
  max-width: 700px;
  margin: .5rem auto 0;
}

.text-gold { color: var(--gold); }
.list-disc { list-style: disc; padding-left: 1.5rem; }

.leistung .media img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 1.75rem; }
  .nav-menu { gap: 1.25rem; }
}

.footer .links a { color: #999; }
.footer .links a:hover { color: var(--gold); }

.contact-hero {
  padding: 4rem 0;
  text-align: center;
  background: rgba(176,141,87,0.03);
}
.contact-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.contact-hero .subline { margin: 0; }

.contact-cards .icon-card .icon { font-size: 2rem; margin-bottom: 1rem; }

.contact-form { display: flex; flex-wrap: wrap; }
.contact-form .col-left {
  flex: 1;
  min-width: 320px;
  background: #1a1a1a;
  color: #fff;
  padding: 3rem;
}
.contact-form .col-right {
  flex: 1.2;
  min-width: 320px;
  background: rgba(255,255,255,0.8);
} /* ← FEHLENDE KLAMMER JETZT REPARIERT */

.home {
  background:url('assets/img/Designer.png') repeat fixed;
}

.header-solid {
  background:#fff;
  border-bottom:1px solid #eee;
}

.top-banner {
  width:100%;
  height:75vh;
  background:url('assets/img/Header.png') no-repeat center center;
  background-size:cover;
}

.main-hero-content {
  text-align:center;
  padding:0 20px 80px;
  margin-top:-80px;
  position:relative;
  z-index:10;
}

.main-hero-content h1 {
  font-size:clamp(2.5rem,8vw,5.5rem);
  font-weight:900;
  margin-bottom:20px;
  color:#b08d57;
  text-shadow:3px 3px 6px rgba(0,0,0,0.9);
}

.subline {
  max-width:1000px;
  margin:0 auto 40px;
  font-size:1.35rem;
  line-height:1.6;
  font-weight:500;
  color:#1a1a1a;
}

.btn-flex {
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:80px;
}

.btn-gold {
  background:#b08d57;
  color:#fff;
  padding:18px 40px;
  border-radius:50px;
  font-weight:700;
  transition:transform .2s;
}
.btn-gold:hover { transform:scale(1.03); }

.btn-white {
  background:#fff;
  color:#000;
  padding:18px 40px;
  border-radius:50px;
  font-weight:700;
  border:2px solid #b08d57;
  transition:transform .2s;
}
.btn-white:hover { transform:scale(1.03); }

.mb-100 { margin-bottom:100px; }

.icon-large {
  color:#b08d57;
  font-size:2.2rem;
  margin-bottom:10px;
}

.card-white {
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border-radius:15px;
  padding:35px;
  display:flex;
  flex-direction:column;
  height:100%;
  box-shadow:0 15px 35px rgba(0,0,0,0.07);
  margin-bottom:20px;
  transition:.3s;
}

.card-white img {
  width:100%;
  height:250px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:20px;
}

.footer-dark {
  background:#1a1a1a;
  color:#fff;
  padding:60px 20px;
  text-align:center;
}
.footer-dark .footer-links a {
  color:#999;
}
.footer-dark .footer-links a:hover {
  color:var(--gold);
}

/* =========================
   GALERIE – Grid + Kacheln
   ========================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

/* Die Kachel */
.gallery-item {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--card-shadow);
  cursor: pointer;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Das Bild in der Kachel (WICHTIG gegen Verzerrung) */
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;      /* gleichmäßige Kacheln */
  height: auto;             /* verhindert Stretch durch globale Regeln */
  object-fit: cover;        /* crop statt verzerren */
  display: block;
  transform: scale(1);
  transition: transform .22s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);   /* “leicht aufpoppen” */
}
.gallery-item:hover {
  border-color: rgba(176, 141, 87, 0.35);
}


/* Caption im Grid (bei dir ohnehin ausgeblendet) */
.gallery-item figcaption {
  padding: .9rem 1rem 1.05rem;
}
.gallery-item figcaption h4 {
  margin: 0 0 .25rem 0;
}
.gallery-item figcaption p {
  margin: 0;
  color: var(--muted);
}

/* ===== Galerie Fix: Kacheln wie Premium-Referenzen ===== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Wichtig: Gallery-Item darf NICHT wie eine Card gepadded sein */
.gallery-item {
  padding: 0 !important;         /* überschreibt .card/.icon-card group */
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(176, 141, 87, 0.35);
}

/* Bilder: gleichmäßige Tiles, kein Stretch */
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform .22s ease;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

/* ===== Mobile Navigation (passt zu main.js toggles) ===== */
@media (max-width: 900px) {
  .burger { display: flex; }

  /* Mobile menu: clean, full-width, consistent spacing */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Base surface */
    background: rgba(255,255,255,0.94);
    border-bottom: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);

    border-radius: 0 0 18px 18px;
    z-index: 1001;

    display: none;
    flex-direction: column;
    gap: 0;

    padding: .9rem var(--spacing-md) 1rem;
    margin: 0;
    list-style: none;

    max-height: calc(100vh - 84px);
    overflow: auto;

    /* needed for marble overlay */
    isolation: isolate;
  }

  /* Subtle marble + gold veins (VERY light) */
  .nav-menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background:
      radial-gradient(600px 260px at 18% 22%, rgba(176,141,87,0.18), transparent 60%),
      radial-gradient(520px 240px at 82% 32%, rgba(176,141,87,0.14), transparent 62%),
      radial-gradient(520px 260px at 40% 86%, rgba(176,141,87,0.10), transparent 64%),
      /* marble “veins” */
      repeating-linear-gradient(125deg,
        rgba(0,0,0,0.06) 0 1px,
        rgba(0,0,0,0.00) 1px 14px),
      repeating-linear-gradient(35deg,
        rgba(0,0,0,0.045) 0 1px,
        rgba(0,0,0,0.00) 1px 18px);
    opacity: 0.09; /* keep the pattern present... */
    mix-blend-mode: overlay; /* ...but never loud */
  }

  .nav-menu.active { display: flex; }

  .nav-menu li { margin: 0; padding: .15rem 0; }
  .nav-menu a {
    padding: .85rem 0;
    display: block;
    font-size: 1.05rem;
    font-weight: 650;
    border-bottom: 1px solid rgba(0,0,0,0.04);
  }
  .nav-menu li:last-child a { border-bottom: none; }
}



/* =========================
   FOOTER – Premium Layout
   ========================= */
.footer .container { max-width: var(--max-width, 1200px); margin: 0 auto; padding: 0 20px; }
.footer-content{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  text-align:left;
}
.footer-section h3{
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.footer-section p{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
}
.footer-links{
  display:flex;
  gap: 1rem;
  justify-content:center;
  margin-top: .75rem;
}
.footer-links a{
  text-decoration:none;
  transition: color .2s ease, opacity .2s ease;
}
.footer-links a:hover{ color: var(--gold); opacity: 1; }

@media (max-width: 900px){
  .footer-content{ grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-section{ text-align:center; }
}

/* =========================
   LIGHTBOX – Galerie
   ========================= */
.no-scroll{ overflow:hidden; }
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 2000;
}
.lightbox.is-open{
  opacity: 1;
  pointer-events: auto;
}
.lightbox__inner{
  width: min(980px, 96vw);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  overflow: hidden;
}
.lightbox__img{
  width: 100%;
  height: auto;
  display:block;
  max-height: 68vh;
  object-fit: contain;
  background: rgba(0,0,0,.04);
}
.lightbox__caption{
  padding: 18px 18px 20px;
}
.lightbox__title{
  margin: 0 0 6px;
  color: var(--text);
  font-size: 1.1rem;
}
.lightbox__text{
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.lightbox__close{
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(17,17,17,.55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display:grid;
  place-items:center;
  transition: transform .18s ease, background .18s ease;
}
.lightbox__close:hover{
  transform: scale(1.04);
  background: rgba(17,17,17,.72);
}

/* Sticky Buttons – angepasst auf Gold */
.sticky-btn:hover{ transform: translateY(-2px); }
.sticky-btn.call:hover,
.sticky-btn.whatsapp:hover{ background: var(--gold-hover); }


/* ===== Conversion Upgrades ===== */
.btn-sm{ padding:.7rem 1.1rem; border-radius:10px; font-size:.78rem; }
.nav-cta{ display:flex; align-items:center; }
.nav-cta-btn{ box-shadow: 0 10px 20px rgba(176,141,87,.22); }

.cta-strip{
  padding: 3.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(176,141,87,.06), rgba(255,255,255,.0));
}
.cta-strip-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 2rem;
}
.cta-strip-copy h2{ margin:0 0 .35rem 0; }
.cta-strip-copy p{ margin:0; color: var(--muted); }
.cta-strip-actions{ display:flex; gap: .9rem; flex-wrap:wrap; justify-content:flex-end; }

.faq{ padding: var(--spacing-lg) 0; }
.faq-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.faq-item{
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  padding: .25rem;
}
.faq-item summary{
  cursor:pointer;
  padding: 1.1rem 1.1rem;
  font-weight: 700;
  list-style: none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-answer{ padding: 0 1.1rem 1.1rem 1.1rem; color: var(--muted); }

@media (max-width: 900px){
  .cta-strip-inner{ flex-direction:column; align-items:flex-start; }
  .cta-strip-actions{ justify-content:flex-start; }
  .faq-grid{ grid-template-columns: 1fr; }
  .nav-cta{ width:100%; }
  .nav-cta-btn{ width:100%; }
}


/* Nav polish: consistent premium active state */
.nav-menu a{
  position: relative;
}
.nav-menu a.active::after,
.nav-menu a:hover::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background: var(--gold);
  border-radius: 2px;
  opacity: .85;
}

/* Inner-page hero spacing: reduce dead space under header */
.section-hero{
  padding: 3.25rem 0 2.5rem;
}
.section-hero + .section{
  padding-top: 2.5rem;
}
@media (max-width: 720px){
  .section-hero{ padding: 2.5rem 0 2rem; }
  .nav-menu{ gap: 1.25rem; }
}



/* =========================
   MOBILE TUNING (Premium)
   ========================= */
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .nav-container { padding: 1rem 1rem; }
  .logo-svg { height: 38px; }
  .logo-text { font-size: 1.05rem; }

  h1 { font-size: 2.15rem; line-height: 1.1; }
  .section { padding: 3rem 0; }
  .section-hero { padding: 2.25rem 0 1.75rem; }
  .section-hero .subline { font-size: 1.05rem; }

  .card, .icon-card { padding: 1.15rem; }

  /* Grids: services + icon tiles */
  .grid-4 { grid-template-columns: 1fr; gap: 1.15rem; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  /* Service cards (index section) – compact + premium */
  .card-white {
    padding: 1.15rem;
    border-radius: 18px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .card-white img{
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: .9rem;
  }
  .card-white h3{ font-size: 1.25rem; margin: .25rem 0 .35rem; }
  .card-white p{ font-size: .98rem; line-height: 1.45; margin-bottom: .85rem; }
  .card-white .btn-white{
    width: 100%;
    justify-content: center;
    display: inline-flex !important;
    padding: 12px 18px !important;
  }
  .grid-3 { grid-template-columns: 1fr; gap: 1.25rem; }
  .grid-2 { grid-template-columns: 1fr; gap: 1.25rem; }

  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; }

  .cta-strip { padding: 1.25rem 0; }
  .cta-strip .cta-actions { flex-direction: column; gap: .75rem; }
  .cta-strip .btn { width: 100%; justify-content: center; }

  .contact-form { flex-direction: column; }
  .contact-form .col-left, .contact-form .col-right { min-width: auto; }
  .contact-form .col-left { padding: 2rem 1.25rem; }
  .contact-form .col-right { padding: 1.25rem; }

  /* Sticky quick-actions: keep them above the mobile browser bar */
  .sticky-buttons{ right: 14px; bottom: 118px; gap: 10px; }
  .sticky-btn{ width: 50px; height: 50px; font-size: 1.25rem; box-shadow: 0 10px 22px rgba(0,0,0,0.18); }

  /* Section titles tighter (prevents "double" feel) */
  .section-title{ margin-bottom: 2.25rem; }
  .section-title h2{ font-size: 2.1rem; line-height: 1.08; }
  .section-title p{ font-size: 1.02rem; line-height: 1.45; }
}

@media (max-width: 380px) {
  h1 { font-size: 1.95rem; }
  .logo-text { font-size: 1rem; }
}


/* Tap-highlight / focus outline cleanup for clickable gallery hit areas */
.stage-hit{
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent !important;
  -webkit-tap-highlight-color: transparent;
}
.stage-hit:focus,
.stage-hit:focus-visible,
.stage-hit:active{
  outline:none !important;
  box-shadow:none !important;
}

/* Leistung cards media images (avoid layout shifts) */
.leistung .media img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}



/* Nav CTA placement: desktop uses right-side button; mobile uses CTA item inside dropdown */
.nav-cta-item{ display:none; }
@media (max-width: 900px){
  .nav-cta{ display:none; }
  .nav-menu .nav-cta-item{ display:block; margin-top:.5rem; }
  .nav-menu .nav-cta-item .btn{ width:100%; justify-content:center; }
}



/* Index hero mobile refinements (works with existing index markup) */
@media (max-width: 600px){
  .top-banner{ height: 56vh; background-position: center 18%; }
  .main-hero-content{ margin-top: -44px; padding: 0 16px 52px; }
  .main-hero-content h1{ text-shadow: 0 10px 22px rgba(0,0,0,.12); }
}
@media (max-width: 380px){
  .top-banner{ height: 58vh; }
  .main-hero-content{ margin-top: -44px; padding-bottom: 48px; }
}

/* =========================
   GALERIE – UX Fix (Feb 2026)
   Ziel:
   1) Infos unter Kacheln ausblenden (nur im Modal anzeigen)
   2) Modal als echtes Overlay (nicht "unten" im Flow)
   ========================= */

/* Grid captions komplett ausblenden */
.gallery-item figcaption{
  display:none !important;
}

/* Modal Overlay */
.gallery-modal[hidden]{
  display:none !important;
}

.gallery-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}

.gallery-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.65);
}

/* Modal Card */
.gallery-modal__card{
  position:relative;
  width:min(1040px, 100%);
  max-height:min(92vh, 920px);
  display:flex;
  flex-direction:column;
  border-radius:18px;
  overflow:hidden;
  background:rgba(14,14,14,0.92);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 28px 80px rgba(0,0,0,0.55);
}

/* Top tools */
.gallery-modal__counter{
  position:absolute;
  top:14px;
  left:16px;
  font-size:0.9rem;
  color:rgba(255,255,255,0.75);
  z-index:3;
}

.gallery-modal__tools{
  position:absolute;
  top:10px;
  right:56px;
  display:flex;
  gap:10px;
  z-index:3;
}

.gallery-modal__tools .tool-btn,
.gallery-modal__tools .tool-link{
  width:38px;
  height:38px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
}

.gallery-modal__tools .tool-btn:hover,
.gallery-modal__tools .tool-link:hover{
  background:rgba(255,255,255,0.12);
}

.gallery-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.08);
  color:#fff;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}

/* Stage */
.gallery-modal__stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:52px 18px 18px;
  min-height:320px;
}

.gallery-modal__img{
  max-width:100%;
  max-height:62vh;
  border-radius:14px;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform:translate(0px,0px) scale(1);
  transition:opacity .15s ease;
}

.gallery-modal__img.is-loading{
  opacity:0.6;
}

.stage-hit{
  position:absolute;
  inset:0;
  width:50%;
  height:100%;
  z-index:2;
}

.stage-hit--prev{ left:0; right:auto; }
.stage-hit--next{ right:0; left:auto; }

.gallery-stage__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gallery-stage__prev{ left:12px; }
.gallery-stage__next{ right:12px; }

.gallery-stage__nav:hover{
  background:rgba(0,0,0,0.48);
}

/* Text (Infos erst im Modal sichtbar) */
.gallery-modal__text{
  padding: 10px 18px 14px;
  border-top:1px solid rgba(255,255,255,0.08);
}

.gallery-modal__title{
  margin:0 0 6px 0;
  color:#fff;
  font-size:1.05rem;
}

.gallery-modal__desc{
  margin:0;
  color:rgba(255,255,255,0.78);
  font-size:0.98rem;
  line-height:1.45;
}

/* Thumbs */
.gallery-modal__thumbs{
  display:flex;
  gap:10px;
  padding: 12px 16px 16px;
  overflow:auto;
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.20);
}

.gallery-modal__thumbs .thumb{
  width:76px;
  height:56px;
  border-radius:12px;
  object-fit:cover;
  opacity:0.72;
  border:1px solid rgba(255,255,255,0.10);
  cursor:pointer;
  flex:0 0 auto;
}

.gallery-modal__thumbs .thumb.active{
  opacity:1;
  border-color: rgba(198,167,94,0.65);
}

/* Mobile */
@media (max-width: 600px){
  .gallery-modal{ padding:12px; }
  .gallery-modal__stage{ padding:56px 12px 12px; }
  .gallery-modal__img{ max-height:56vh; }
  .gallery-modal__thumbs .thumb{ width:64px; height:48px; }
}

/* Kontakt Hero: Subline sauber zentrieren (Textblock + Zeilenumbruch) */
.contact-hero .subline{
  max-width: 720px;
  margin: .5rem auto 0;
  text-align: center;
}
/* Über uns: Bild car2 sauber zentrieren und begrenzen */
.about-content {
    align-items: center; /* sorgt dafür, dass Text und Bild vertikal sauber sitzen */
}

.about-image {
    display: block;
    width: 100%;
    max-width: 520px; /* hier Größe steuern */
    height: auto;
    margin: 0 auto; /* zentriert */
    border-radius: 16px;
    object-fit: cover;
}

/* ========== GOOGLE MAPS PLACEHOLDER (2-KLICK) ========== */
.map-consent {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 100%;
  min-height: 400px;
}
.map-consent h3 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}
.map-consent p {
  margin-bottom: 1.25rem;
}


/* Index: Top-CTA beim Runterscrollen ausblenden (Premium, weniger Druck) */
.nav-cta-btn,
.nav-cta-item a.btn {
  transition: opacity 220ms ease, transform 220ms ease;
}

body.hide-top-cta .nav-cta-btn,
body.hide-top-cta .nav-cta-item a.btn {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}


/* Premium Header Behavior */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: transform 220ms ease, padding 220ms ease, background 220ms ease;
}

.site-header.header--compact {
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-header.header--hidden {
  transform: translateY(-110%);
}

.site-header .nav-cta {
  transition: opacity 200ms ease, transform 200ms ease;
}

.site-header.header--compact .nav-cta {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}


/* Premium Header Behavior v2 (body class) */
body.scrolling-down .site-header {
  transform: translateY(-110%);
}

body.scrolling-up .site-header {
  transform: translateY(0);
}


/* Header behavior (robust) */
.site-header, header, .header {
  will-change: transform;
}

.site-header.header--hidden {
  transform: translateY(-110%) !important;
}

.site-header.header--compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* Header overlay (premium) */
:root { --header-h: 92px; }

body {
  padding-top: var(--header-h);
}

.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1200;
}

.site-header.header--hidden {
  transform: translateY(-110%) !important;
}

.site-header.header--compact {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* Gallery image safety */
.gallery-grid img, .gallery-item img {
  transform: none !important;
  rotate: 0deg !important;
}


/* Dezent Premium Motion Pack */
:root {
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Header polish on scroll */
.site-header {
  transition: background 260ms var(--motion-ease), box-shadow 260ms var(--motion-ease), backdrop-filter 260ms var(--motion-ease);
}

body.is-scrolled .site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Section reveal */
.reveal {
  opacity: 0;
  transform: translateY(10px);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms var(--motion-ease), transform 520ms var(--motion-ease);
}

/* Button micro interaction */
a.btn, .btn, button.btn, .nav-cta, .nav-cta-btn, .btn-gold {
  transition: transform 220ms var(--motion-ease), box-shadow 220ms var(--motion-ease), background-color 220ms var(--motion-ease), color 220ms var(--motion-ease), border-color 220ms var(--motion-ease);
}

a.btn:hover, .btn:hover, button.btn:hover, .nav-cta:hover, .nav-cta-btn:hover, .btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
}

a.btn:active, .btn:active, button.btn:active, .nav-cta:active, .nav-cta-btn:active, .btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}

/* Gallery hover */
.gallery-item, .gallery-card, .gallery-grid a, .gallery-grid .item, .gallery-grid figure {
  overflow: hidden;
}

.gallery-grid img, .gallery-item img {
  transition: transform 520ms var(--motion-ease), filter 520ms var(--motion-ease);
  will-change: transform;
}

.gallery-grid a:hover img, .gallery-item:hover img, .gallery-card:hover img, .gallery-grid figure:hover img {
  transform: scale(1.03);
  filter: saturate(1.02);
}


/* Premium Modal Upgrade */

/* Modal base */
.modal, .lightbox, .gallery-modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms cubic-bezier(0.2,0.8,0.2,1), visibility 320ms;
}

.modal.is-open, .lightbox.is-open, .gallery-modal.is-open {
  opacity: 1;
  visibility: visible;
}

/* Background blur */
.modal::before, .lightbox::before, .gallery-modal::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.45);
  z-index: -1;
}

/* Modal image animation */
.modal img, .lightbox img, .gallery-modal img {
  transform: scale(0.98);
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.2,0.8,0.2,1), opacity 360ms;
}

.modal.is-open img, .lightbox.is-open img, .gallery-modal.is-open img {
  transform: scale(1);
  opacity: 1;
}


/* Premium Typography & Dividers */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

body { line-height: 1.6; letter-spacing: 0.1px; }

h1, h2, h3, h4 { letter-spacing: 0.2px; }

.main-hero-content h1 { letter-spacing: 0.5px; }

.subline { max-width: 68ch; }

.section-title p { max-width: 72ch; margin-left: auto; margin-right: auto; }

/* Dezent gold divider */
.gold-divider {
  height: 1px;
  width: 100%;
  max-width: 1100px;
  margin: 44px auto;
  background: linear-gradient(90deg, rgba(182,147,81,0) 0%, rgba(182,147,81,0.75) 50%, rgba(182,147,81,0) 100%);
  opacity: 0.9;
}

/* Hero load in */
.main-hero-content h1,
.main-hero-content .subline,
.main-hero-content .btn-flex {
  opacity: 0;
  transform: translateY(10px);
}

body.is-loaded .main-hero-content h1,
body.is-loaded .main-hero-content .subline,
body.is-loaded .main-hero-content .btn-flex {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 520ms var(--motion-ease), transform 520ms var(--motion-ease);
}

body.is-loaded .main-hero-content .subline { transition-delay: 80ms; }
body.is-loaded .main-hero-content .btn-flex { transition-delay: 140ms; }


.small-note { margin-top: 12px; font-size: 0.95rem; opacity: 0.85; }


/* Contact Premium Relayout */
.contact-layout {
  max-width: 980px;
  margin: 0 auto;
  padding: 110px 20px;
}

.contact-premium-wrapper {
  background: #ffffff;
  padding: 50px;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.05);
  margin-top: 40px;
}

.contact-premium-wrapper input,
.contact-premium-wrapper textarea,
.contact-premium-wrapper select {
  margin-bottom: 22px;
}

.contact-premium-wrapper .btn {
  margin-top: 10px;
}

@media (max-width: 768px) {
  .contact-premium-wrapper {
    padding: 30px;
  }
}


/* Contact Conversion Upgrade */
.contact-trust-block {
  margin-top: 60px;
  margin-bottom: 40px;
  padding: 38px;
  border-radius: 14px;
  background: rgba(182,147,81,0.06);
}

.contact-trust-block h2 {
  margin-bottom: 16px;
}

.contact-trust-block ul {
  margin: 0 0 14px 18px;
  line-height: 1.7;
}

.contact-note {
  margin-top: 10px;
  font-size: 0.95rem;
  opacity: 0.85;
}

.contact-alt-block {
  margin-top: 70px;
  padding-top: 40px;
}

.contact-alt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 18px;
}

.alt-item {
  background: #fff;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.04);
}

.alt-item p {
  margin-top: 8px;
  opacity: 0.86;
}

@media (max-width: 900px) {
  .contact-alt-grid { grid-template-columns: 1fr; }
  .contact-trust-block { padding: 26px; }
}


/* Contact Two Column Fix */
.contact-form {
  gap: 64px !important;
  align-items: flex-start;
}

.contact-form .col-left {
  flex: 0 0 440px;
  max-width: 440px;
}

.contact-form .col-right {
  flex: 1 1 520px;
  min-width: 420px;
}

.contact-form .col-left,
.contact-form .col-right {
  padding: 34px;
  border-radius: 14px;
}

.contact-form .col-left {
  background: #141414;
}

.contact-form .col-right {
  background: #ffffff;
}

/* Keep form field text readable */
.contact-form input,
.contact-form textarea,
.contact-form select {
  text-align: left;
}

.contact-form .form-group { margin-bottom: 18px !important; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100% !important;
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .contact-form { gap: 26px !important; }
  .contact-form .col-left,
  .contact-form .col-right {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
    padding: 26px;
  }
}


/* Contact page container spacing */
.page-kontakt .section.bg-light .container {
  max-width: 1180px;
}

.page-kontakt .section.bg-light {
  padding-top: 110px;
  padding-bottom: 110px;
}


/* Contact Spacing Polish */
.page-kontakt .section.bg-light .container {
  padding-left: 24px;
  padding-right: 24px;
}

.contact-form .col-left,
.contact-form .col-right {
  padding: 40px !important;
}

.contact-form .col-right {
  background: rgba(255,255,255,0.92) !important;
}

.contact-form .col-right .form-group {
  margin-bottom: 20px !important;
}

.contact-form .col-right label[style*="display:flex"] {
  max-width: 620px;
  margin: 18px auto 0;
}

.contact-form .col-right button[type="submit"] {
  width: 100% !important;
  max-width: 560px;
  display: block;
  margin: 16px auto 0;
  border-radius: 12px;
}

.contact-form .col-right p[style*="verschlüsselt"] {
  text-align: center;
  margin-top: 12px !important;
}

.contact-alt-block {
  margin-top: 96px !important;
  padding-top: 0 !important;
}

.contact-alt-block h3,
.contact-alt-block h2,
.contact-alt-block h4 {
  margin-bottom: 20px;
}

.contact-alt-grid {
  gap: 34px !important;
  margin-top: 0 !important;
}

.alt-item {
  padding: 32px !important;
  border: 1px solid rgba(0,0,0,0.04);
}

@media (max-width: 900px) {
  .page-kontakt .section.bg-light .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .contact-form .col-left,
  .contact-form .col-right {
    padding: 28px !important;
  }
}


/* Black Block Rectangle Fix */
.project-block select,
.project-block input,
.project-block textarea {
  width: 100% !important;
  max-width: 100% !important;
}

.project-block .form-group {
  max-width: 100% !important;
}

.project-block .project-spacer {
  height: 28px;
}

@media (max-width: 900px) {
  .project-block .project-spacer {
    height: 18px;
  }
}


/* Contact Layout Centering */
.contact-form {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  gap: 64px;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;
}

@media (max-width: 980px) {
  .contact-form {
    flex-wrap: wrap;
    gap: 28px;
  }
}


/* Direktkontakt Centering */
.contact-alt-block {
  text-align: center;
}

.contact-alt-block .contact-alt-grid {
  align-items: stretch;
}

.contact-alt-block .alt-item {
  text-align: center;
}

.contact-alt-block .alt-item strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.contact-alt-block .alt-item p {
  margin: 0 auto;
  max-width: 34ch;
  line-height: 1.65;
}

.small-note {
  text-align: center;
  margin-top: 18px;
}


/* Contact Readability & Centering Audit */
.page-kontakt h1,
.page-kontakt .section-title,
.page-kontakt .contact-trust-block,
.page-kontakt .contact-alt-block {
  text-align: center;
}

.page-kontakt .contact-trust-block ul {
  text-align: left;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.page-kontakt .contact-form {
  margin-top: 26px;
}

.page-kontakt .contact-form .col-left h2,
.page-kontakt .contact-form .col-left h3,
.page-kontakt .contact-form .col-left h4,
.page-kontakt .contact-form .col-left label {
  color: rgba(255,255,255,0.92);
}

.page-kontakt .contact-form .col-left .form-group label {
  color: rgba(255,255,255,0.88);
}

.page-kontakt .contact-form .col-left input::placeholder,
.page-kontakt .contact-form .col-left textarea::placeholder {
  color: rgba(255,255,255,0.55);
}

.page-kontakt .contact-form .col-right .checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: center;
  text-align: left;
  max-width: 760px;
  margin: 24px auto 0;
  color: #555;
}

.page-kontakt .contact-form .col-right .checkbox-row input[type="checkbox"] {
  margin-top: 3px;
}

.page-kontakt .small-note {
  text-align: center;
  margin-top: 22px;
  opacity: 0.85;
}

.page-kontakt .contact-alt-block {
  margin-top: 88px !important;
}

/* =============================
   Leistungen: Text fluessig (nicht komplett zentriert)
   ============================= */
.page-leistungen .section .container{ text-align: left; }
.page-leistungen .section .leistung-text{ text-align: left; }
.page-leistungen .section .leistung-text p,
.page-leistungen .section .leistung-text li{ text-align: left; }
.page-leistungen .section-hero .container{ text-align: center; }

/* ===== Header: one-line desktop alignment (no wrap, single CTA) ===== */
@media (min-width: 901px) {
  .nav-container { flex-wrap: nowrap; }
  .logo { flex-shrink: 0; white-space: nowrap; }
  .logo-text { white-space: nowrap; }
  .nav-menu { flex-wrap: nowrap; align-items: center; white-space: nowrap; }
  .nav-menu li { white-space: nowrap; }
  .nav-menu a { white-space: nowrap; }
  .site-header .nav-cta { flex-shrink: 0; }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .nav-menu { gap: 1.25rem; }
  .nav-menu a { font-size: 0.92rem; }
}
@media (min-width: 901px) {
  /* Slightly deeper, more balanced header height */
  .nav-container { padding-top: 1.35rem; padding-bottom: 1.35rem; }
}


/* === Kontakt: Premium Anthrazit Projekt-Block (links) === */
.contact-form .col-left.project-block{
  background:#2b2b2f;
  border:1px solid #3a3a3f;
  border-radius:18px;
  padding:40px;
  box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.contact-form .col-left.project-block h3{
  color: var(--gold) !important;
}
.contact-form .col-left.project-block label{
  color:#cfcac2 !important;
}
.contact-form .col-left.project-block input,
.contact-form .col-left.project-block textarea,
.contact-form .col-left.project-block select{
  background:#343438 !important;
  border:1px solid #4a4a4f !important;
  color:#f5f3ee !important;
  border-radius:10px !important;
}
.contact-form .col-left.project-block input::placeholder,
.contact-form .col-left.project-block textarea::placeholder{
  color:#9e9e9e !important;
}
.contact-form .col-left.project-block input:focus,
.contact-form .col-left.project-block textarea:focus,
.contact-form .col-left.project-block select:focus{
  outline:none !important;
  border-color:#b08a5a !important;
  box-shadow:0 0 0 2px rgba(176,138,90,0.20) !important;
}

/* Modal safety: if hidden is removed but opacity rules exist elsewhere */
.gallery-modal:not([hidden]){
  display:flex;
}




/* === CONTACT PAGE PREMIUM TUNING (anthrazit + spacing) === */
#anfrage .card {
  border-radius: 20px;
}

.contact-form{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
}

.contact-form .col-left{
  background: linear-gradient(180deg, #323135 0%, #2a2a2d 100%);
  color: #f5f3ee;
  padding: 56px 48px;
  border-right: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px 0 0 20px;
}

.contact-form .col-right{
  background: rgba(255,255,255,0.92);
  padding: 56px 48px;
  border-radius: 0 20px 20px 0;
}

.contact-form .col-left h3{
  color:#f5f3ee !important;
  margin-bottom: 28px !important;
  letter-spacing: .2px;
}

.contact-form .col-right h3{
  margin-bottom: 28px !important;
}

.contact-form .col-left label{
  color: rgba(245,243,238,0.86) !important;
  font-weight: 600;
}

.contact-form .col-left select,
.contact-form .col-left input,
.contact-form .col-left textarea{
  width:100% !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: #f5f3ee !important;
}

.contact-form .col-left input::placeholder,
.contact-form .col-left textarea::placeholder{
  color: rgba(245,243,238,0.55) !important;
}

.contact-form .col-left select:focus,
.contact-form .col-left input:focus,
.contact-form .col-left textarea:focus{
  outline:none !important;
  border-color: rgba(176,138,90,0.9) !important;
  box-shadow: 0 0 0 3px rgba(176,138,90,0.18) !important;
}

.contact-form .col-right input,
.contact-form .col-right textarea,
.contact-form .col-right select{
  padding: 14px 16px !important;
  border-radius: 10px !important;
}

@media (max-width: 900px){
  .contact-form{
    grid-template-columns: 1fr;
  }
  .contact-form .col-left{
    border-radius: 20px 20px 0 0;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 44px 28px;
  }
  .contact-form .col-right{
    border-radius: 0 0 20px 20px;
    padding: 44px 28px;
  }
}



/* Button alignment: keep 'Mehr erfahren' buttons on the same baseline within service cards */
.grid-4 { align-items: stretch; }
.card-white { display: flex; flex-direction: column; height: 100%; }
.card-white .btn-white { margin-top: auto; align-self: flex-start; }



/* FINAL Über Uns Layout */
.about-layout{display:flex;align-items:center;gap:60px;}
.about-text{flex:1;max-width:620px;}
.about-image{flex:1;display:flex;justify-content:center;}
.about-image img{width:100%;max-width:600px;border-radius:18px;box-shadow:0 15px 40px rgba(0,0,0,0.12);}
@media(max-width:900px){.about-layout{flex-direction:column;}}


/* Clean Über Uns Layout */
.about-flex-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  max-width: 1200px;
  margin: 80px auto;
}

.about-text {
  flex: 1;
  max-width: 620px;
  text-align: left;
}

.about-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.about-image img {
  width: 100%;
  max-width: 580px;
  border-radius: 18px;
}

@media (max-width: 900px) {
  .about-flex-wrapper {
    flex-direction: column;
    gap: 40px;
  }
  .about-image {
    justify-content: center;
  }
}


/* Über uns: Bild neben Text (rechts), nicht im Header */
.section .about-content{
  display:flex;
  gap:64px;
  align-items:flex-start;
}
.section .about-content .about-text{
  flex:1;
  text-align:left;
}
.section .about-content .about-media{
  flex:0 0 520px;
  display:flex;
  justify-content:flex-end;
}
.section .about-content .about-media img{
  width:100%;
  max-width:520px;
  border-radius:18px;
}
@media (max-width: 980px){
  .section .about-content{
    flex-direction:column;
    gap:32px;
  }
  .section .about-content .about-media{
    flex:1 1 auto;
    justify-content:center;
  }
  .section .about-content .about-media img{
    max-width:640px;
  }
}




/* ===== SANE MOBILE FIX ===== */
@media (max-width: 900px){

  html, body{
    overflow-x: hidden !important;
  }

  body{
    padding-top: 82px !important;
  }

  .site-header,
  .header,
  header{
    min-height: 82px !important;
  }

  .nav-container{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:12px !important;
    padding:14px 16px !important;
  }

  .logo{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:10px !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:calc(100% - 64px) !important;
  }

  .logo-svg{
    width:auto !important;
    height:34px !important;
    flex:0 0 auto !important;
  }

  .logo-text{
    display:block !important;
    font-size:1rem !important;
    line-height:1.2 !important;
    white-space:normal !important;
    letter-spacing:0 !important;
    text-transform:none !important;
    max-width:100% !important;
  }

  .logo-text em{
    display:inline !important;
    font-size:inherit !important;
    line-height:inherit !important;
  }

  .burger{
    display:flex !important;
    margin-left:auto !important;
    flex:0 0 auto !important;
    order:2 !important;
  }

  .burger span{
    width:30px !important;
    height:3px !important;
  }

  .nav-menu{
    top:100% !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
  }

  .top-banner{
    display:block !important;
    width:100% !important;
    height:34vh !important;
    min-height:220px !important;
    max-height:280px !important;
    background-position:center center !important;
    background-size:cover !important;
  }

  .main-hero-content{
    margin-top:-12px !important;
    padding:0 16px 32px !important;
  }

  .main-hero-content h1{
    font-size:clamp(2rem, 9vw, 2.7rem) !important;
    line-height:1.05 !important;
    margin-bottom:12px !important;
    text-shadow:0 8px 16px rgba(0,0,0,.12) !important;
  }

  .main-hero-content .subline{
    max-width:24ch !important;
    margin:0 auto 18px !important;
    font-size:1rem !important;
    line-height:1.45 !important;
  }

  .btn-flex{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    margin-bottom:32px !important;
  }

  .btn-flex a,
  .btn-gold,
  .btn-white{
    width:100% !important;
    display:inline-flex !important;
    justify-content:center !important;
  }

  .grid-5{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .grid-5 .card-white{
    min-height:0 !important;
    padding:18px !important;
  }

  .grid-4{
    grid-template-columns:1fr !important;
  }

  .grid-2,
  .leistung{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:start !important;
  }

  .leistung .media{
    width:100% !important;
    margin-bottom:0 !important;
    overflow:hidden !important;
    border-radius:14px !important;
  }

  .leistung .media img{
    width:100% !important;
    height:220px !important;
    object-fit:cover !important;
    border-radius:14px !important;
  }

  .leistung .leistung-text{
    text-align:left !important;
  }

  .leistung .btn,
  .leistung .btn-primary,
  .leistung .btn-secondary,
  .leistung .btn-white{
    width:100% !important;
    display:inline-flex !important;
    justify-content:center !important;
  }

  .about-content{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    align-items:start !important;
  }

  .about-content > .card{
    width:100% !important;
    max-width:100% !important;
    position:relative !important;
    top:auto !important;
    margin:0 !important;
  }

  .cta-strip-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }

  .cta-strip-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    width:100% !important;
  }

  .cta-strip-actions .btn{
    width:100% !important;
    display:inline-flex !important;
    justify-content:center !important;
  }

  .contact-premium-wrapper{
    padding:22px 16px !important;
  }

  .contact-form{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:0 !important;
    max-width:100% !important;
  }

  .contact-form .col-left,
  .contact-form .col-right{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:22px 16px !important;
    border-radius:0 !important;
  }

  .contact-form .col-left{
    border-radius:18px 18px 0 0 !important;
  }

  .contact-form .col-right{
    border-radius:0 0 18px 18px !important;
  }

  .contact-form .col-right > div[style*="grid-template-columns: 1fr 1fr"]{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
    margin-bottom:16px !important;
  }

  .contact-form input,
  .contact-form textarea,
  .contact-form select{
    width:100% !important;
    max-width:100% !important;
    font-size:16px !important;
    box-sizing:border-box !important;
  }

  .checkbox-row{
    display:grid !important;
    grid-template-columns:20px 1fr !important;
    gap:10px !important;
    align-items:start !important;
    text-align:left !important;
    max-width:100% !important;
    margin:12px 0 0 !important;
  }

  .checkbox-row input[type="checkbox"]{
    width:18px !important;
    height:18px !important;
    margin:3px 0 0 !important;
  }

  .contact-form .col-right button[type="submit"]{
    width:100% !important;
    max-width:100% !important;
    margin:14px 0 0 !important;
  }

  .sticky-buttons{
    right:12px !important;
    bottom:90px !important;
    gap:10px !important;
    z-index:900 !important;
  }

  .sticky-btn{
    width:50px !important;
    height:50px !important;
    font-size:1.1rem !important;
  }

  .section-hero,
  .contact-hero{
    padding:2rem 0 1.3rem !important;
  }

  .section-hero h1,
  .contact-hero h1{
    font-size:clamp(2rem, 10vw, 2.6rem) !important;
    line-height:1.06 !important;
    margin-bottom:10px !important;
  }

  .section-hero .subline,
  .contact-hero .subline{
    max-width:24ch !important;
    margin:0 auto !important;
    font-size:1rem !important;
    line-height:1.42 !important;
  }
}

@media (max-width: 420px){
  .logo-svg{
    height:30px !important;
  }

  .logo-text{
    font-size:.92rem !important;
  }

  .top-banner{
    height:30vh !important;
    min-height:190px !important;
  }

  .main-hero-content h1{
    font-size:1.95rem !important;
  }

  .leistung .media img{
    height:200px !important;
  }

  .sticky-btn{
    width:46px !important;
    height:46px !important;
  }
}


/* === REAL FIX FOR SERVICE CARDS === */

.grid-4 > .card-white {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.grid-4 > .card-white p {
    flex-grow: 1;
}

.grid-4 > .card-white a {
    margin-top: auto;
    align-self: center;
}