/* ===== IN MY LENS – Ultra Clean Editorial Wedding (FINAL CLEAN) ===== */

:root{
  --mauve:#8F6B6A;
  --mauveDark:#7C5756;
  --mauveLight:#B89A99;
  --mauvePale:rgba(143,107,106,.08);

  --bg:#FAFAFA;
  --text:#1A1A1A;
  --line:rgba(0,0,0,.10);

  --max: 1180px; /* wichtig für große Bildschirme */
}

/* Local font (DSGVO safe) */
@font-face{
  font-family:"CormorantLocal";
  src:url("/assets/fonts/cormorant/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CormorantLocal";
  src:url("/assets/fonts/cormorant/CormorantGaramond-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"CormorantLocal";
  src:url("/assets/fonts/cormorant/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);}

/* ===== Subtile Scroll-Animationen ===== */
.fade-in{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-in-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Hero und wichtige Elemente sofort sichtbar */
.hero, .heroCopy, .heroImage, .siteHeader, .siteFooter{
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered Animation für Gallery Items */
.galleryRow .galleryItem:nth-child(1){ transition-delay: 0.1s; }
.galleryRow .galleryItem:nth-child(2){ transition-delay: 0.2s; }
.galleryRow .galleryItem:nth-child(3){ transition-delay: 0.3s; }

/* Reduzierte Animation auf Mobile (Performance) */
@media (prefers-reduced-motion: reduce){
  .fade-in{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

a{color:inherit; text-decoration:none}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
  width:100%;
}

@media (max-width: 600px){
  .wrap{
    padding:0 18px;
  }
  
  /* Sehr kleine Screens: noch bessere Skalierung */
  html{
    font-size: 16px; /* verhindert Zoom auf iOS */
  }
  
  body{
    -webkit-text-size-adjust: 100%; /* verhindert automatische Textvergrößerung auf iOS */
    text-size-adjust: 100%;
  }
  
  /* Bilder skalieren besser */
  img, video{
    max-width: 100%;
    height: auto;
  }
  
  /* Buttons noch besser erreichbar */
  .btn{
    width: 100%;
    max-width: 100%;
  }
}

/* ===== Typography ===== */
p, li, label, input, textarea, button{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:15px;
  line-height:1.85;
  color:var(--text);
  letter-spacing:.03em;
  font-weight:400;
}

h1,h2{
  font-family:"CormorantLocal", ui-serif, Georgia, serif;
  font-weight:400;
  text-transform:uppercase;
  margin:0;
  color:var(--text);
  letter-spacing: .2em;
}

h1{
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.4;
  letter-spacing: .24em;
  font-weight: 400;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

h2{
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: .2em;
  font-weight: 400;
}

/* Falls irgendwo noch <div class="hr"> existiert -> unsichtbar */
.hr{display:none !important; height:0 !important; margin:0 !important;}

/* ===== Layout helpers ===== */
main{padding: 0 0 80px;}
section{padding: 72px 0;}
.center{text-align:center;}
.lead{
  max-width: 62ch;
  margin: 28px auto 0;
  font-size: 15.5px;
  line-height: 1.9;
  letter-spacing: .04em;
  font-weight: 400;
}

/* Buttons – weich, editorial, wedding */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;

  background: var(--mauve);
  color:#fff;
  border:none;

  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight:500;
  font-size:13.5px;
  letter-spacing:.1em;
  text-transform:uppercase;

  border-radius:12px;
  cursor:pointer;
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(143,107,106,.15), 0 1px 3px rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
}

/* Elegant hover effect mit Gradient */
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.05) 100%);
  opacity:0;
  transition: opacity .3s ease;
}

.btn:hover::before{
  opacity:1;
}

/* Hover-Zustand */
.btn:hover{
  background: var(--mauveDark);
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(143,107,106,.25), 0 2px 6px rgba(0,0,0,.12);
}

/* Klick */
.btn:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(143,107,106,.15), 0 1px 3px rgba(0,0,0,.1);
}

/* überall gleicher Abstand zwischen Text und Buttons */
.btnRow,
.heroButtons,
.sectionCta,
.buttonRow{
  margin-top: 44px;          /* harmonischer Abstand */
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ===== Header ===== */
.siteHeader{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:none;
}

/* Header z-index reduzieren wenn Menü offen */
body.menu-open .siteHeader{
  z-index:1;
}

/* WICHTIG: Header bekommt genug Raum für großes Logo */
.headerInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 22px 24px; /* reduziert für schmaleren Header */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 20px;              /* reduziert: Abstand Logo zu Menü */
  position:relative;
  width:100%;
}

/* Burger */
.burger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-direction:column;
  position:absolute;
  left: 22px;
  top: 18px;
}
.burger span{display:block; width:18px; height:1.6px; background:var(--text);}

/* Brand – Logo als PNG */
.brandCenter{
  display:flex;
  justify-content:center;
}

.brandLogo{
  display:inline-block;
  padding: 8px 0 12px; /* reduziert: Logo höher positioniert */
}

.brandImg{
  display:block;
  height: 160px;   /* reduziert: Logo kleiner */
  width: auto;
}

@media (max-width: 820px){
  .brandImg{ height: 120px; } /* <- Mobile */
}

/* Nav */
.navlinks{
  display:flex;
  justify-content:center;
  gap: 36px;              /* mehr Abstand zwischen Menübegriffen */
  padding-top: 4px;
  padding-bottom: 2px;
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:none;   /* normale Groß-/Kleinschreibung */
  color:var(--text);
  font-weight:400;
}

.navlinks a{
  color: var(--text);
  opacity: .75;
  display:inline-block;
  position:relative;
  padding: 4px 0;
  transform: scale(1);
  transition:
    color .25s ease,
    opacity .25s ease,
    transform .2s ease;
}

.navlinks a::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:1px;
  background:var(--mauve);
  transition: width .3s ease;
}

.navlinks a:hover{
  color: var(--mauve);
  opacity: 1;
  transform: translateY(-1px);
}

.navlinks a:hover::after{
  width:100%;
}

.navlinks a[aria-current="page"]{
  color: var(--mauve);
  opacity: 1;
  font-weight: 500;
}

.navlinks a[aria-current="page"]::after{
  width:100%;
}

/* Mobile Panel - Slide-in Overlay von links */
.mobilePanel{
  display: none;
  flex-direction:column;
  position:fixed !important;
  top:0 !important;
  left:0;
  bottom:0;
  width:100%;
  background:#fff;
  z-index:10000 !important;
  padding-top:20px;
  padding-left:24px;
  padding-right:24px;
  padding-bottom:40px;
  overflow-y:auto;
  overflow-x:hidden;
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events:none;
  -webkit-overflow-scrolling: touch;
  isolation: isolate;
  height:100vh;
  max-height:100vh;
}

/* Auf größeren Bildschirmen (Tablets) etwas schmaler */
@media (min-width: 768px) {
  .mobilePanel{
    width:85%;
    max-width:320px;
    box-shadow: 2px 0 20px rgba(0,0,0,.15);
  }
}

.mobilePanel.open{
  display: flex;
  transform: translateX(0);
  pointer-events:auto;
}

/* Overlay-Hintergrund entfernt - Seite soll nicht dunkler werden */

.mobilePanel a{
  display:block;
  padding:14px 0;
  font-size:18px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
  position:relative;
  transition: color .2s ease, transform .2s ease;
  border-bottom:1px solid rgba(0,0,0,.06);
  opacity:1;
  visibility:visible;
  flex-shrink: 0;
  font-weight:500;
}

.mobilePanel a:active{
  transform: scale(0.98);
}

.mobilePanel a[aria-current="page"]{
  color: var(--mauve);
  font-weight: 500;
}

.mobilePanel a[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:-24px;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  background:var(--mauve);
}
.mobileCta{padding-top:14px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}

/* ===== Hero ===== */
.hero{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px 22px 34px; /* reduziert: weniger Abstand vom Header */
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 72px;
  align-items:center;
  background:#fff;
}

.heroHeadline{
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: .28em;
  font-weight: 400;
}
/* ===== Startseite Video unter Hero ===== */
.homeVideo{
  margin: 48px 0 80px;
}

.homeVideoInner{
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}

.homeVideo video{
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px){
  .homeVideo{
    margin: 40px 0 64px;
  }
}

/* Strich/Line unter Headline -> weg (falls du irgendwo border-bottom nutzt) */
.heroHeadline,
.hero h1{border:0 !important;}

.heroImage{
  justify-self:center;   /* sorgt für echtes Zentrieren */
  width:100%;
  max-width: 520px;      /* damit es auf Ultra-Wide nicht “rechts hängt” */
}
.heroImage img{
  width:100%;
  height:auto;
  display:block;
}

/* ===== Gallery ===== */
.galleryRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
  align-items: start;
}
.galleryRow img{width:100%; height:auto; display:block; background:#fff;}

.galleryItem{
  display:block;
  border-radius: 0;
  overflow:hidden;
  position:relative;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
  cursor:pointer;
  background:#fafafa;
}

.galleryItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(143,107,106,0);
  transition: background .35s ease;
  z-index:1;
  pointer-events:none;
}

.galleryItem:hover{
  transform: translateY(-4px);
  opacity: 1;
}

.galleryItem:hover::before{
  background:rgba(143,107,106,.08);
}

.galleryItem img{
  display:block;
  width:100%;
  height:auto;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.galleryItem:hover img{
  transform: scale(1.05);
}

/* ===== Cookie Banner (schmaler, Buttons nebeneinander) ===== */
.cookie{
  position:fixed;
  left:18px; right:18px; bottom:18px;
  z-index:999;
  display:none;
}
.cookie.show{display:block;}

.cookieBox{
  max-width: 860px;
  margin:0 auto;
  background: rgba(143,107,106,.88);
  border: 1px solid rgba(255,255,255,.25);
  padding: 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.cookieBox p,
.cookieText{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
  color:#fff;
}
.cookieBox a,
.cookieText a{color:#fff; text-decoration:underline;}

.cookieActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.cookieActions button,
.cookieBtn{
  background: rgba(143,107,106,1);
  border: 1px solid rgba(255,255,255,.75);
  color:#fff;
  padding: 10px 14px;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform:none;
  cursor:pointer;
}
.cookieActions button:hover,
.cookieBtn:hover{background: var(--mauveDark);}

.cookieActions .primary,
.cookieBtnPrimary{
  background: rgba(124,87,86,1);
  border-color: rgba(255,255,255,.85);
}

/* ===== Footer ===== */
.siteFooter{
  background: var(--mauve);
  color:#fff;
  padding: 22px 0;
  margin-top: 60px;
}
.siteFooter a{color:#fff; opacity:.9}
.siteFooter a:hover{opacity:1}

.footerRow{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
  align-items:start;
}
.footerCol{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.8;
  opacity:.95;
  letter-spacing: .04em;
}
.footerCenter{justify-self:center;}
.footerRight{
  justify-self:end;
  display:flex;
  gap:18px;
  align-items:center;
}
.social{
  font-size:13px;
  letter-spacing: .06em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition: opacity .2s ease, color .2s ease;
  opacity:.9;
}
.social:hover{
  opacity:1;
  color:var(--mauve);
}

/* Social Media Icons */
.socialIcon{
  width:22px;
  height:22px;
  display:inline-block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  opacity:1;
  transition: all .2s ease;
  flex-shrink:0;
}
.social:hover .socialIcon{
  opacity:1;
  transform: scale(1.1);
}

/* ===== One "Back to Top" Button (nur 1) ===== */
.toTop{
  position:fixed;
  right: 22px;
  bottom: 22px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(143,107,106,.92);
  color:#fff;
  cursor:pointer;
  display:none; /* erscheint erst beim Scrollen via JS */
  min-width:48px;
  min-height:48px;
}

@media (max-width: 600px){
  .toTop{
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}
.toTop:hover{background: rgba(124,87,86,.95);}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero{
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 22px 32px;
  }
  .heroImage{max-width: 520px;}
  .galleryRow{
    grid-template-columns:1fr;
    gap: 18px;
    margin-top: 32px;
  }
  .footerRow{grid-template-columns:1fr; text-align:center;}
  .footerCenter,.footerRight{justify-self:center;}
  .footerRight{justify-content:center;}
}

@media (max-width: 820px){
  .navlinks{display:none;}
  .burger{display:flex;}
  .brandImg{height: 52px;}

  p, li, label, input, textarea, button{font-size: 15px;}
  .heroHeadline{
    font-size: 22px;
    line-height: 1.35;
    letter-spacing: .22em;
    max-width: 92%;
  }

  /* Mobile: optimierte Abstände */
  main{padding: 0 0 60px;}
  section{padding: 56px 0;}
  .lead{margin: 24px auto 0;}
  .btnRow,.heroButtons,.sectionCta,.buttonRow{margin-top: 36px;}
  
  /* Touch-Targets größer machen */
  .btn{
    padding:14px 24px;
    font-size:14px;
    min-height:44px; /* Apple HIG: min 44px für Touch */
    min-width: 44px; /* auch Breite für bessere Touch-Targets */
  }
  
  /* Mobile Navigation besser erreichbar */
  .mobilePanel a{
    padding:14px 0;
    font-size:18px;
    min-height: 48px; /* Touch-Target */
    display: block;
    align-items: center;
    width: 100%;
    font-weight:500;
  }
  
  /* Body scroll lock wenn Menü offen */
  body.menu-open{
    overflow:hidden;
  }
  
  /* Bessere Text-Skalierung auf sehr kleinen Screens */
  h1{
    font-size: clamp(20px, 5vw, 28px);
  }
  
  h2{
    font-size: clamp(14px, 4vw, 16px);
  }
}
/* =========================
   FIXES (Global)
========================= */

@media (max-width: 820px){
  .brandImg{ height: 60px; }
}

/* Linie unter dem Menü ausblenden (Header Border weg) */
.siteHeader{
  border-bottom: none; /* war 1px line */
}

/* =========================
   CONTACT PAGE (Wix-like)
========================= */

.pageKontakt main{
  padding-top: 18px;
}

/* Intro */
.contactIntro{
  padding: 58px 0 22px;
}
.contactTitle{
  font-family:"CormorantLocal", ui-serif, Georgia, serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin:0;
  font-size: 18px;
}
.contactSub{
  margin: 10px auto 0;
  font-size: 13.5px;
  letter-spacing:.02em;
  opacity:.85;
  max-width: 70ch;
}
.contactLead{
  margin: 16px auto 0;
  max-width: 78ch;
}

/* 3-column info row */
/* 3-column info row – gleiche Schrift wie Menü/UI */
.contactInfoGrid{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.04em;
}

/* Labels (Telefonnummer / E-Mail-Adresse / Social Media) */
.contactInfoLabel{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  font-weight:500;
  text-transform:none;
  opacity:.7;
}

/* Werte (Nummer / Mail / Social Links) */
.contactInfoValue{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
               "Helvetica Neue", Arial, sans-serif;
  font-size:13.5px;
  letter-spacing:.04em;
  opacity:.92;
}

.contactInfoSocial{
  display:flex;
  justify-content:center;
  gap: 12px;
  align-items:center;
}

.contactInfoSocial .social{
  font-size:13px;
  letter-spacing: .06em;
  display:inline-flex;
  align-items:center;
  gap:8px;
  opacity:.9;
  transition: opacity .2s ease, color .2s ease;
}

.contactInfoSocial .social:hover{
  opacity:1;
  color:var(--mauve);
}

.contactInfoSocial .socialIcon{
  width:22px;
  height:22px;
  stroke-width:2;
}

.contactInfoGrid strong{
  font-family:inherit;
  font-weight:500;
}

.contactInfo{
  padding: 18px 0 40px;
}
.contactInfoGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items:start;
  text-align:center;
}
.contactInfoLabel{
  font-size: 12px;
  letter-spacing:.08em;
  opacity:.65;
  margin-bottom: 8px;
}
.contactInfoValue{
  font-size: 13.5px;
  opacity:.92;
}
.contactInfoSocial{
  display:flex;
  justify-content:center;
  gap: 14px;
}

/* Form card */
.contactFormWrap{
  padding: 18px 0 64px;
}
.contactCard{
  position:relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 48px 40px 42px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
}

/* Desktop / Standard */
.contactWatermark{
  position:absolute;
  inset:0;
  background-image: url("/assets/img/watermark.png");
  background-repeat: no-repeat;

  /* großflächig, "Backdrop"-Look */
  background-size: cover;
  background-position: center;

  opacity: .12;
  pointer-events:none;
  z-index:0;
}

/* Mobile Anpassung */
@media (max-width: 820px){
  .contactWatermark{
    background-size: cover;      /* bleibt großflächig */
    background-position: center; /* bleibt mittig */
    opacity: .1;                /* sichtbarer auf Mobile */
  }
}

.contactCardTitle{
  text-align:center;
  font-family:"CormorantLocal", ui-serif, Georgia, serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size: 16px;
  margin: 0;
}
.contactCardHint{
  text-align:center;
  max-width: 78ch;
  margin: 12px auto 26px;
  opacity:.85;
}

/* Make form look Wix-clean */
.wForm{
  position:relative; /* über watermark */
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}
.wGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.wFull{
  margin-top: 16px;
}

/* labels */
.wForm label{
  display:block;
  font-size: 12px;
  letter-spacing: .1em;
  margin-bottom: 10px;
  opacity:.85;
  font-weight:500;
  text-transform:uppercase;
  color:var(--text);
  transition: color .2s ease;
}
.wForm label:has(+ input:focus),
.wForm label:has(+ select:focus),
.wForm label:has(+ textarea:focus){
  color: var(--mauve);
  opacity:1;
}

/* inputs */
.wForm input,
.wForm select,
.wForm textarea{
  width:100%;
  border: 1px solid rgba(0,0,0,.12);
  background:#fff;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.5;
  outline: none;
  border-radius: 8px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,.02);
}
.wForm input:hover,
.wForm select:hover,
.wForm textarea:hover{
  border-color: rgba(143,107,106,.25);
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}
.wForm input:focus,
.wForm select:focus,
.wForm textarea:focus{
  border-color: var(--mauve);
  box-shadow: 0 0 0 3px rgba(143,107,106,.08), 0 2px 8px rgba(0,0,0,.06);
  background: #fff;
}

.wConsent{
  margin-top: 16px;
  padding-top: 14px;
}
.wCheck{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  font-size: 14px;
  line-height: 1.6;
}
.wCheck input{ margin-top: 4px; }

.wSubmit{
  margin-top: 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
  text-align:center;
}
.wSubmit .btn{
  min-width: 200px;
}
.wHint{
  font-size: 13px;
  opacity:.75;
  margin:0;
}

/* Mobile */
@media (max-width: 980px){
  .contactInfoGrid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .contactCard{
    padding: 40px 28px 36px;
    border-radius: 12px;
  }
}
@media (max-width: 820px){
  .wGrid{ grid-template-columns: 1fr; }
  .contactWatermark{
    background-size: 420px auto;
    background-position: center 72%;
    opacity: .05;
  }
  .contactCard{
    padding: 32px 20px 28px;
    border-radius: 12px;
  }
  .wForm input,
  .wForm select,
  .wForm textarea{
    padding: 12px 14px;
  }
  .wSubmit .btn{
    min-width: 100%;
    width: 100%;
  }
}
/* ===== Contact Meta (Telefon / Mail / Social) ===== */
.contactMeta{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size:13px;
  letter-spacing:.08em;
  line-height:1.8;
  color: var(--text);
}

.contactMeta a{
  color: inherit;
  text-decoration: none;
  opacity:.85;
  transition: opacity .2s ease, color .2s ease;
}

.contactMeta a:hover{
  opacity:1;
  color: var(--mauve);
}
/* ===== Reportagen Cards ===== */

.cards3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin:60px 0;
}

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

.card{
  background:#fff;
  border-radius:0;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.cardMedia{
  display:block;
  position:relative;
  aspect-ratio: 4 / 3; /* HIER passiert die Magie */
  overflow:hidden;
}

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

.cardBody{
  padding:22px 22px 26px;
}

.cardTitle{
  margin:0 0 10px;
}

.cardText{
  font-size:15px;
  line-height:1.6;
  opacity:.85;
}
/* ===== Reportagen Stories (eckig, Wix-like) ===== */
.storiesGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:50px 0 80px;
  align-items: start;
}

@media (max-width: 900px){
  .storiesGrid{ 
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
    margin:40px 0 60px;
  }
}

@media (max-width: 600px){
  .storiesGrid{ 
    grid-template-columns:1fr;
    gap:24px;
    margin:32px 0 48px;
  }
}

.story{
  display:block;
  color:inherit;
  text-decoration:none;
}

.storyImg{
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#f2f2f2;
}

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

.story:hover .storyImg img{
  transform:scale(1.03);
}

.storyBody{
  padding:14px 0 0;
}

.storyTitle{
  margin:0 0 6px;
  font-size:18px;
  letter-spacing:.02em;
}

.storyMeta{
  margin:0 0 8px;
  font-size:12.5px;
  opacity:.7;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.storyText{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  opacity:.85;
}
/* ===== Portfolio Grid (eckig) ===== */
.portfolioGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:60px 0;
  align-items: start;
}

/* Portfolio-Seite: Abstand zwischen Lead-Text und Galerie reduzieren */
.pagePortfolio .portfolioGrid{
  margin-top:-12px;
}

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

.portfolioItem{
  display:block;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#fafafa;
  position:relative;
  cursor:pointer;
  transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolioItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(143,107,106,0);
  transition: background .35s ease;
  z-index:1;
  pointer-events:none;
}

.portfolioItem:hover{
  transform: translateY(-4px);
}

.portfolioItem:hover::before{
  background:rgba(143,107,106,.1);
}

.portfolioItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolioItem:hover img{
  transform: scale(1.08);
}

 /* ===== Portfolio Editorial Gallery (Wix-like) ===== */

.masonry{
  column-count: 3;
  column-gap: 28px;          /* mehr Luft */
  margin:80px 0;
}

@media (max-width: 1200px){
  .masonry{
    column-count: 2;
    column-gap: 24px;
  }
}

@media (max-width: 700px){
  .masonry{
    column-count: 1;
    column-gap: 0;
  }
}

.masonry img{
  width:100%;
  height:auto;
  display:block;
  margin:0 0 28px;          /* vertikale Ruhe */
  break-inside:avoid;
  background:#fafafa;
  cursor:pointer;
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease, box-shadow .3s ease;
  border-radius: 2px;
}

.masonry img:hover{
  transform: translateY(-4px);
  opacity: .95;
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
/* ===== Justified Gallery (Wix-like Brick Rows) ===== */
.justified{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px;            /* wird auch via JS gesetzt */
  margin:60px 0;
}

/* Portfolio-Seite: Abstand zwischen Lead-Text und Galerie reduzieren */
.pagePortfolio .justified{
  margin-top:-12px;
}

.justified img{
  height:260px;        /* wird via JS gesetzt */
  width:auto;
  display:block;
  object-fit:contain;  /* möglichst komplett sichtbar */
  background:#fafafa;
  cursor:pointer;
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease;
  border-radius: 2px;
}

.justified img:hover{
  transform: scale(1.03) translateY(-2px);
  opacity: .95;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* ===== Leistungen: ruhige Rows mit Media (nicht overloaded) ===== */

.svcRow{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:52px;
  align-items:center;
  margin:70px 0;
}

/* Leistungen-Seite: Abstand zwischen Lead-Text und Content reduzieren */
.pageLeistungen .svcRow{
  margin-top:-16px;
}

@media (max-width: 900px){
  .svcRow{
    grid-template-columns:1fr;
    gap:36px;
    margin:56px 0;
  }
}

.svcAlt .svcMedia{ order:2; }
.svcAlt .svcText{ order:1; }

@media (max-width: 900px){
  .svcAlt .svcMedia,
  .svcAlt .svcText{ order:initial; }
}

.svcMedia{
  background:#f2f2f2;
  overflow:hidden; /* eckig */
}

.svcMedia img,
.svcMedia video{
  width:100%;
  height:auto;
  display:block;
}

/* Optional: wenn du gleiche "Blockhöhe" willst, nimm cover */
.svcMedia.isCover img,
.svcMedia.isCover video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.svcText h2{
  margin:0 0 18px;
  letter-spacing: .2em;
}

.svcText .lead{
  margin:0 0 24px;
  letter-spacing: .04em;
}

.svcList{
  margin:0;
  padding-left:0;
  line-height:1.75;
  opacity:.9;
  list-style:none;
}

.svcList li{
  margin:6px 0;
  padding-left:24px;
  position:relative;
}

.svcList li::before{
  content:"♡";
  position:absolute;
  left:0;
  color:var(--mauve);
  font-size:14px;
  line-height:1.75;
}

/* Leistungen: Medien niemals fullscreen */
.svcMedia{
  height: 380px;
  overflow: hidden;
  background: #f2f2f2;
}

@media (max-width: 1100px){ .svcMedia{ height: 320px; } }
@media (max-width: 900px){  .svcMedia{ height: 260px; } }

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

.svcMedia video{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Container für Videos: Höhe anpassen für Hochkant-Format */
.svcMedia:has(video){
  height: auto;
  min-height: 380px;
}

@media (max-width: 1100px){
  .svcMedia:has(video){
    min-height: 320px;
  }
}

@media (max-width: 900px){
  .svcMedia:has(video){
    min-height: 260px;
  }
}
/* ===== Über mich ===== */

/* Video Section oben - breit */
.pageAbout .aboutVideo{
  padding: 72px 0;
}

.pageAbout .aboutVideoInner{
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}

.pageAbout .aboutVideoElement{
  width: 100%;
  height: auto;
  display: block;
  min-height: 500px;
  max-height: 75vh;
  object-fit: cover;
}

@media (max-width: 900px){
  .pageAbout .aboutVideo{
    padding: 56px 0;
  }
  
  .pageAbout .aboutVideoElement{
    min-height: 400px;
    max-height: 65vh;
  }
}

/* Text und Bild Section - nebeneinander */
.pageAbout .aboutTextImage{
  padding: 72px 0;
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 60px;
  align-items: start;
}

.pageAbout .aboutImageInner{
  overflow: hidden;
  background: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
}

.pageAbout .aboutImageInner img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.pageAbout .aboutTextContent{
  padding-top: 0;
}

.pageAbout .aboutTextContent h1{
  margin: 0 0 24px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.3;
  letter-spacing: .05em;
}

.pageAbout .aboutTextContent .lead{
  margin: 0 0 24px;
}

.pageAbout .aboutTextContent p{
  margin: 0 0 18px;
  line-height: 1.85;
  opacity: .9;
}

.pageAbout .aboutTextContent p:last-child{
  margin-bottom: 0;
}

@media (max-width: 900px){
  .pageAbout .aboutTextImage{
    padding: 56px 0;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .pageAbout .aboutTextContent{
    text-align: center;
  }
}

/* Legacy About Row (falls noch verwendet) */
.pageAbout .aboutRow{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:48px;
  align-items:center;
  margin:60px 0;
}

@media (max-width: 900px){
  .pageAbout .aboutRow{
    grid-template-columns:1fr;
    gap:28px;
    margin:40px 0;
  }
}

.pageAbout .aboutMedia{
  background:#f2f2f2;
  overflow:hidden; /* eckig */
}

.pageAbout .aboutMedia img,
.pageAbout .aboutMedia video{
  width:100%;
  height:auto;
  display:block;
}

/* falls du später Video flächig willst */
.pageAbout .aboutMedia.isCover video{
  width:100%;
  height:100%;
  object-fit:cover;
}

.pageAbout .aboutText h2{
  margin:0 0 14px;
}

.pageAbout .aboutText p{
  margin:0 0 14px;
  line-height:1.7;
  opacity:.9;
}

/* schmalere Textsektionen */
.pageAbout .narrow{
  max-width:720px;
  margin-left:auto;
  margin-right:auto;
  padding: 0 20px;
}

.pageAbout .narrow h2{
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: .12em;
  margin: 0 0 24px;
}

.pageAbout .narrow .lead{
  margin: 0 0 24px;
  font-size: 16px;
}

.pageAbout .narrow p{
  font-size: 15.5px;
  line-height: 1.85;
  opacity: .9;
}

.pageAbout .narrow p[style*="italic"]{
  font-family:"CormorantLocal", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.7;
  color: var(--mauve);
  opacity: .9;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(143,107,106,.15);
}

/* Werte / Haltung */
.pageAbout .values{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin:70px 0 90px;
  padding: 60px 0;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  background: linear-gradient(135deg, rgba(143,107,106,.02) 0%, rgba(143,107,106,.01) 100%);
}

@media (max-width: 900px){
  .pageAbout .values{
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin:50px 0 70px;
    padding: 40px 0;
  }
}

@media (max-width: 600px){
  .pageAbout .values{
    grid-template-columns:1fr;
    gap:20px;
    padding: 32px 0;
  }
}

.pageAbout .value{
  border:none;
  background:transparent;
  padding:16px 0;
  text-align:center;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
  border-radius: 0;
  transition: opacity .3s ease, color .3s ease;
  box-shadow: none;
  cursor:default;
  position:relative;
  font-weight: 400;
}

.pageAbout .value::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:50px;
  height:1.5px;
  background:var(--mauve);
  opacity:.4;
  transition: width .3s ease, opacity .3s ease;
}

.pageAbout .value:hover{
  transform: none;
  box-shadow: none;
  border-color: transparent;
  opacity:1;
  color: var(--mauve);
}

.pageAbout .value:hover::after{
  width:60px;
  opacity:.6;
}

.pageAbout .value:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  border-color: var(--mauvePale);
  opacity:1;
}
/* ===== Legal Pages: optimiert & konsistent ===== */
.pageLegal .legalHero{
  margin: 10px 0 30px;
}

.pageLegal .legalWrap{
  margin: 0 0 70px;
}

.pageLegal .legalCard{
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  padding: 34px;
}

@media (max-width: 900px){
  .pageLegal .legalCard{
    padding: 22px;
  }
}

.pageLegal .legalCard h2{
  margin: 26px 0 10px;
  font-size: 16.5px;
  letter-spacing: .02em;
}

.pageLegal .legalCard h2:first-child{
  margin-top: 0;
}

.pageLegal .legalCard p{
  margin: 0 0 14px;
  line-height: 1.75;
  opacity: .9;
}

.pageLegal .legalCard a{
  text-decoration: none;
}

.pageLegal .legalCard a:hover{
  text-decoration: underline;
}

/* ===== Danke-Seite ===== */
.thanksWrap{
  margin:70px 0;
}

.thanksCard{
  max-width:820px;
  margin:0 auto;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  padding:34px;
}

@media (max-width: 900px){
  .thanksWrap{ margin:46px 0; }
  .thanksCard{ padding:22px; }
}

.thanksSmall{
  margin-top:18px;
  font-size:13.5px;
  opacity:.85;
  line-height:1.7;
}
/* ===== Mobile: Logo größer ===== */
@media (max-width: 900px){
  .brandImg{
    height: 150px;   /* vorher meist ~28–32px */
    width: auto;
  }
}
/* ===== Mobile: Header optimiert ===== */
@media (max-width: 900px){
  .siteHeader{
    padding: 8px 0;
  }

  .headerInner{
    min-height: auto;
    padding: 0 18px;
    gap: 24px;
  }

  .brandImg{
    height: 100px;
    width: auto;
  }
}

@media (max-width: 600px){
  .headerInner{
    padding: 0 12px;
    gap: 20px;
  }
  
  .brandImg{
    height: 80px;
  }
}
/* ===== Reportagen Übersicht ===== */
.repGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  margin:40px 0 70px;
  align-items: start;
}

/* Reportagen-Seite: Abstand zwischen Lead-Text und Galerie reduzieren */
.pageReportagen .repGrid,
.page .repGrid{
  margin-top: -16px;
}

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

.repCard{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
}

.repMedia{
  height:300px;
  overflow:hidden;
  background:#f2f2f2;
}

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

.repText{
  padding:16px 16px 18px;
}

.repText h2{
  margin:0 0 8px;
  font-size:18px;
}

.repText p{
  margin:0;
  opacity:.85;
  line-height:1.7;
}

/* ===== Einzel-Reportage ===== */
.reportageHead{
  max-width: 980px;
  margin: 40px auto 32px;
}

@media (max-width: 600px){
  .reportageHead{
    margin: 32px auto 24px;
  }
}

.reportageBack a{
  text-decoration:none;
  opacity:.85;
}

.reportageBack a:hover{
  text-decoration:underline;
}

.reportageGallery{
  max-width: 1100px;
  margin: 0 auto 48px;
}

.reportageGallery img{
  width:100%;
  height:auto;
  display:block;
  margin: 0 0 28px;
  border-radius: 2px;
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow .3s ease;
}

.reportageGallery img:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
/* ===== Reportagen: Hochkant Cover + dezente Pfeile + Hover ===== */
.story{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.story:hover{
  transform: scale(1.012);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Hochkant / Portrait Preview */
.storyImg{
  position:relative;
  overflow:hidden;
  background:#f2f2f2;
  aspect-ratio: 3 / 4;      /* <- Hochkant */
}

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

.story:hover .storyImg img{
  transform: scale(1.03);
}

/* Pfeile: nur on hover sichtbar, sehr dezent */
.storyArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.22);
  color:#fff;
  font-size:20px;
  line-height:32px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, background .18s ease;
}

.story:hover .storyArrow{
  opacity:1;
  pointer-events:auto;
}

.storyArrow:hover{
  background: rgba(0,0,0,.32);
}

.storyArrow.prev{ left:10px; }
.storyArrow.next{ right:10px; }
/* ===== Love Story: Galerie Viewer (statt Bilder untereinander) ===== */
.galleryViewer{
  max-width: 1100px;
  margin: 20px auto 50px;
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 12px;
}

.gStage{
  margin:0;
  position:relative;
  overflow:hidden;
  background:#f2f2f2;
}

.gStage img{
  width:100%;
  height:auto;
  display:block;
}

.gCount{
  position:absolute;
  left:12px;
  bottom:12px;
  font-size:12px;
  letter-spacing:.04em;
  padding:6px 8px;
  background: rgba(0,0,0,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}

.gArrow{
  width:44px;
  height:44px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:42px;
  opacity:.75;
  transition: opacity .18s ease, transform .18s ease;
}

.gArrow:hover{
  opacity:1;
  transform: scale(1.03);
}

@media (max-width: 900px){
  .galleryViewer{
    grid-template-columns: 38px 1fr 38px;
    gap: 8px;
  }
  .gArrow{ width:38px; height:38px; line-height:36px; }
}
/* ===== Reportagen: Hochkant-Cover + Hover + Pfeile ===== */
.story{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.story:hover{
  transform: scale(1.012);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.storyImg{
  position:relative;
  overflow:hidden;
  background:#f2f2f2;
  aspect-ratio: 3 / 4; /* Hochkant */
}

.storyPreview{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .28s ease;
}

.story:hover .storyPreview{
  transform: scale(1.03);
}

.storyArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.22);
  color:#fff;
  font-size:20px;
  line-height:32px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease, background .18s ease;
}

.story:hover .storyArrow{
  opacity:1;
  pointer-events:auto;
}

.storyArrow:hover{
  background: rgba(0,0,0,.32);
}

.storyArrow.prev{ left:10px; }
.storyArrow.next{ right:10px; }

/* ===== Love Story: Raster-Galerie ===== */
.repGalleryGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
  margin: 40px 0 80px;
  align-items: start;
}

@media (max-width: 900px){
  .repGalleryGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:14px;
    margin: 32px 0 60px;
  }
}

@media (max-width: 600px){
  .repGalleryGrid{
    grid-template-columns: 1fr;
    gap:12px;
    margin: 28px 0 48px;
  }
}

.repItem{
  display:block;
  overflow:hidden;
  background:#fafafa;
  position:relative;
  cursor:pointer;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.repItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(143,107,106,0);
  transition: background .3s ease;
  z-index:1;
  pointer-events:none;
}

.repItem:hover{
  transform: translateY(-3px);
}

.repItem:hover::before{
  background:rgba(143,107,106,.08);
}

.repItem img{
  width:100%;
  height:100%;
  aspect-ratio: 4 / 5;
  object-fit:cover;
  display:block;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.repItem:hover img{
  transform: scale(1.06);
}

/* ===== Lightbox (Overlay) ===== */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  padding: 18px;
  opacity:0;
  transition: opacity .3s ease;
}

.lightbox.open{
  display:flex;
  opacity:1;
}

.lbInner{
  position: relative;
  max-width: 1200px;
  width: 100%;
}

.lbImg{
  width:100%;
  height:auto;
  display:block;
  background:#111;
  max-height:90vh;
  object-fit:contain;
  border-radius:4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  opacity:0;
  transform: scale(0.95);
  transition: opacity .3s ease, transform .3s ease;
}

.lightbox.open .lbImg{
  opacity:1;
  transform: scale(1);
}

.lbClose{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.5);
  color:#fff;
  font-size:22px;
  line-height:42px;
  cursor:pointer;
  border-radius:50%;
  transition: background .2s ease, transform .2s ease;
  z-index:10000;
}

.lbClose:hover{
  background: rgba(0,0,0,.7);
  transform: scale(1.1);
}

.lbArrow{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.5);
  color:#fff;
  font-size:24px;
  line-height:46px;
  cursor:pointer;
  opacity:.85;
  border-radius:50%;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}

.lbArrow:hover{
  background: rgba(0,0,0,.7);
  opacity:1;
  transform: translateY(-50%) scale(1.1);
}

.lbPrev{ left:12px; }
.lbNext{ right:12px; }

@media (max-width: 600px){
  .lbClose{
    top:8px;
    right:8px;
    width:40px;
    height:40px;
    font-size:20px;
    line-height:38px;
  }
  
  .lbArrow{
    width:44px;
    height:44px;
    font-size:22px;
    line-height:42px;
  }
  
  .lbPrev{ left:8px; }
  .lbNext{ right:8px; }
  
  .lbImg{
    max-height:85vh;
  }
  
  .lightbox{
    padding: 12px;
  }
}

/* ===== Reportagen Übersicht – Hochkant ===== */
.storiesGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin: 26px 0 60px;
  align-items: start;
}

/* Reportagen-Seite: Abstand zwischen Lead-Text und Galerie reduzieren */
.pageReportagen .storiesGrid,
.page .storiesGrid{
  margin-top: -16px;
}

@media (max-width: 900px){
  .storiesGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px){
  .storiesGrid{ grid-template-columns: 1fr; }
}

.storyCard{
  display:block;
  text-decoration:none;
  color: inherit;
  overflow:hidden;
  background:#fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}

.storyCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
}

/* 🔑 Hochkant-Format */
.storyThumb{
  width:100%;
  aspect-ratio: 4 / 5;     /* Hochkant */
  overflow:hidden;
  background:#fafafa;
  position:relative;
}

.storyThumb img{
  width:100%;
  height:100%;
  object-fit: cover;       /* sauberer Beschnitt */
  object-position: center;
  display:block;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.storyCard:hover .storyThumb img{
  transform: scale(1.05);
}

.storyInfo{
  padding: 20px;
}

.storyInfo h2{
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .1em;
  color: var(--text);
}

.storyInfo p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: .75;
  letter-spacing: .03em;
}
/* ===== Love Story Galerie (Masonry) ===== */
.repMasonry{
  column-count: 3;
  column-gap: 14px;
  margin: 26px 0 60px;
}

@media (max-width: 900px){
  .repMasonry{
    column-count: 2;
    column-gap: 14px;
    margin: 32px 0 60px;
  }
}

@media (max-width: 600px){
  .repMasonry{
    column-count: 1;
    column-gap: 0;
    margin: 28px 0 48px;
  }
}

.repMasonry .repItem{
  display: block;
  break-inside: avoid;
  margin: 0 0 18px;
  background: #fafafa;
  overflow: hidden;
  text-decoration: none;
  position:relative;
  cursor:pointer;
  transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

.repMasonry .repItem::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(143,107,106,0);
  transition: background .3s ease;
  z-index:1;
  pointer-events:none;
}

.repMasonry .repItem:hover{
  transform: translateY(-3px);
}

.repMasonry .repItem:hover::before{
  background:rgba(143,107,106,.08);
}

.repMasonry img{
  width: 100%;
  height: auto;   /* wichtig: Bild bleibt komplett sichtbar */
  display: block;
  cursor:pointer;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1), opacity .3s ease, box-shadow .3s ease;
  border-radius: 2px;
}

.repMasonry img:hover{
  transform: scale(1.04);
  box-shadow: 0 12px 32px rgba(0,0,0,.15);
}
/* ===== Lightbox (duplicate removed - using optimized version above) ===== */
/* ===== Reportagen Übersicht – Hochkant ===== */
.storyThumb{
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eee;
}

.storyThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== Leistungen: Video ===== */
.svcVideo{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  background: #000;
  aspect-ratio: 9 / 16; /* Hochkant-Format für Drohnenvideo */
}

/* ===== Blog ===== */
.blogGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin: 50px 0 80px;
  align-items: start;
}

/* Blog-Seite: Abstand zwischen Lead-Text und Content reduzieren */
.pageBlog .blogGrid{
  margin-top:-16px;
}

@media (max-width: 900px){
  .blogGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 20px;
    margin: 40px 0 60px;
  }
}

@media (max-width: 600px){
  .blogGrid{
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 32px 0 48px;
  }
}

.blogCard{
  display:block;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
}

.blogCard:hover{
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.08);
}

.blogThumb{
  width:100%;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:#fafafa;
  position:relative;
}

.blogThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blogCard:hover .blogThumb img{
  transform: scale(1.05);
}

.blogPlaceholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(143,107,106,.05) 0%, rgba(143,107,106,.02) 100%);
  color:var(--mauve);
  font-size:14px;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.6;
}

.blogInfo{
  padding: 24px;
}

.blogCategory{
  display:inline-block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mauve);
  font-weight:500;
  margin-bottom:10px;
}

.blogCard h2{
  font-size:18px;
  line-height:1.4;
  letter-spacing:.08em;
  margin:0 0 10px;
  color:var(--text);
}

.blogCard p{
  font-size:14px;
  line-height:1.7;
  opacity:.85;
  margin:0 0 12px;
}

.blogDate{
  font-size:12px;
  opacity:.6;
  letter-spacing:.05em;
}

.blogCardComingSoon{
  opacity:.7;
  cursor:default;
}

.blogCardComingSoon:hover{
  transform:none;
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}

/* Blog Single Post */
.blogBack{
  padding: 20px 0 10px;
}

.blogBack a{
  font-size:14px;
  opacity:.75;
  transition: opacity .2s ease, color .2s ease;
}

.blogBack a:hover{
  opacity:1;
  color:var(--mauve);
}

.blogPost{
  max-width: 780px;
  margin: 0 auto;
}

.blogPostHeader{
  text-align:center;
  padding: 20px 0 40px;
}

.blogPostCategory{
  display:inline-block;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mauve);
  font-weight:500;
  margin-bottom:16px;
}

.blogPostHeader h1{
  font-size: clamp(24px, 3vw, 36px);
  line-height:1.3;
  letter-spacing:.12em;
  margin:0 0 12px;
}

.blogPostMeta{
  font-size:13px;
  opacity:.7;
  letter-spacing:.05em;
  margin:0;
}

.blogPostImage{
  width:100%;
  margin: 0 0 50px;
  border-radius: 12px;
  overflow:hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.blogPostImage img{
  width:100%;
  height:auto;
  display:block;
}

.blogPostContent{
  font-size:16px;
  line-height:1.85;
  letter-spacing:.02em;
}

.blogPostContent h2{
  font-size:20px;
  line-height:1.5;
  letter-spacing:.1em;
  margin: 48px 0 20px;
  color:var(--text);
}

.blogPostContent h2:first-of-type{
  margin-top:0;
}

.blogPostContent ul,
.blogPostContent ol{
  margin: 20px 0;
  padding-left: 24px;
}

.blogPostContent li{
  margin: 10px 0;
  line-height:1.8;
}

.blogPostContent strong{
  font-weight:500;
  color:var(--text);
}

.blogPostContent a{
  color:var(--mauve);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition: opacity .2s ease;
}

.blogPostContent a:hover{
  opacity:.8;
}

.blogPostCta{
  margin: 60px 0 40px;
  padding: 40px;
  background:linear-gradient(135deg, rgba(143,107,106,.04) 0%, rgba(143,107,106,.02) 100%);
  border-radius: 16px;
  text-align:center;
}

.blogPostCta h2{
  font-size:22px;
  margin:0 0 12px;
}

.blogPostCta p{
  font-size:15px;
  opacity:.85;
  margin:0 0 24px;
}

@media (max-width: 820px){
  .blogPostContent{
    font-size:15px;
  }
  .blogPostCta{
    padding: 32px 24px;
  }
}