/* Lokale Schrift-Dateien. Dateien bitte unter /fonts/ ablegen; externe Google-Fonts werden nicht geladen. */
@font-face{
  font-family:"Cormorant Cerny";
  src:url("../fonts/cormorant-garamond-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Cerny";
  src:url("../fonts/cormorant-garamond-semibold.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Cormorant Cerny";
  src:url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}

/* ============================================================
   Rene Cerny — Hochzeitsfotograf
   Editorial Wedding Photography · Warm & Refined
   ============================================================ */

:root{
  /* Core palette – warm, editorial, wedding-appropriate */
  --charcoal:      #2e2a24;
  --charcoal-soft: #3d372f;
  --cream:         #bfa88f;
  --cream-deep:    #ece3d2;
  --beige:         #e0d9c8;
  --white:         #ffffff;
  --off-white:     #fbf7f0;

  --gold:          #b8965a;
  --gold-light:    #d4b883;
  --gold-dark:     #8c6f3e;
  --gold-pale:     rgba(184,150,90,.10);
  --gold-border:   rgba(184,150,90,.28);

  --text:          #3d372f;
  --text-muted:    #6b6458;
  --text-faint:    #a39a8a;

  /* Typography */
  --f-display: "Cormorant Cerny", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Layout */
  --max:       1240px;
  --max-narrow: 880px;
  --nav-h:     82px;
  --r:         4px;
  --r-lg:      10px;
  --t:         .3s cubic-bezier(.2,.8,.2,1);

  --shadow-sm: 0 2px 14px rgba(46,42,36,.07);
  --shadow-md: 0 10px 40px rgba(46,42,36,.12);
  --shadow-lg: 0 24px 70px rgba(46,42,36,.18);

  /* Hero-Text auf Bild: echter Schlagschatten (klarer Versatz, kurzer
     Weichzeichner) - bewusst kein weicher Nebel-/Glow-Schatten.
     Zentral hier pflegen, alle Hero-Regeln referenzieren diese Werte. */
  --hero-shadow:       2px 3px 2px rgba(0,0,0,.92);
  --hero-shadow-lead:  2px 2px 2px rgba(0,0,0,.92);
  --hero-shadow-small: 1px 2px 2px rgba(0,0,0,.92);
}

/* -------- Reset & Base ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Sicherheitsnetz: Inline-SVG-Icons nie größer als ihr Container */
svg{max-width:100%;max-height:100%}
/* Offset für fixe Navigation, damit Sprungmarken nicht vom Header verdeckt werden */
section[id], [id="ablauf"], [id="kontakt"], [id="galerie"], [id="leistungen"], [id="about"], [id="impressionen"], [id="pakete"], [id="garantie"], [id="angebote"]{scroll-margin-top:calc(var(--nav-h) + 20px)}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--f-body);font-weight:300;line-height:1.65;
  font-size:16px;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:color var(--t)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none;padding:0;margin:0}

/* -------- Typography ------------------------------------------------------ */
h1,h2,h3,h4,.display{
  font-family:var(--f-display);font-weight:500;
  color:var(--charcoal);letter-spacing:-.01em;line-height:1.1;
  margin:0 0 .6em;
}
h1{font-size:clamp(2.4rem, 5vw, 4.2rem);font-weight:400}
h2{font-size:clamp(1.9rem, 3.6vw, 3rem);font-weight:400}
h3{font-size:clamp(1.25rem, 2vw, 1.55rem)}
h4{font-size:1.1rem;font-weight:500}
p{margin:0 0 1em}
em{font-style:italic;color:var(--gold-dark)}
strong{font-weight:500;color:var(--charcoal)}

.eyebrow{
  display:inline-block;
  font-family:var(--f-body);font-size:.72rem;font-weight:400;
  letter-spacing:.38em;text-transform:uppercase;
  color:var(--gold-dark);margin-bottom:1.3rem;
}
.eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;
  width:28px;height:1px;background:var(--gold);margin-right:14px;
}

.lead{
  font-size:1.1rem;color:var(--text-muted);line-height:1.75;
  max-width:62ch;
}

/* Section header pattern */
.section-header{text-align:center;max-width:720px;margin:0 auto 60px}
.section-header .lead{margin:0 auto}
.section-header h2{margin-bottom:.5em}

/* Decorative rule */
.rule{
  display:block;width:48px;height:1px;background:var(--gold);
  margin:1.6rem auto;border:none;
}

/* -------- Layout ---------------------------------------------------------- */
.container{max-width:var(--max);margin:0 auto;padding:0 28px}
.container--narrow{max-width:var(--max-narrow)}
.section{padding:clamp(50px, 7vw, 90px) 0}
.section--tight{padding:clamp(26px, 4vw, 48px) 0}
.section--tight .section-header{margin-bottom:clamp(24px,3vw,38px)}
.section--compact{padding:clamp(20px, 3vw, 36px) 0}
.section--compact .section-header{margin-bottom:clamp(16px,2vw,28px)}

/* Die Startseite besteht aus vielen aufeinanderfolgenden Inhaltsblöcken.
   Kompaktere Abstände halten den Seitenrhythmus ruhig und vermeiden
   übergroße Leerflächen zwischen zwei wechselnden Hintergründen. */
.page-startseite-section{
  padding:clamp(38px,4vw,56px) 0;
}
.page-startseite-section .section-header{
  margin-bottom:clamp(28px,3vw,44px);
}
.bg-cream{background:var(--cream)}
/* Fliesstext auf .bg-cream — heller Cremeton braucht satten dunklen Text */
.bg-cream p,
.bg-cream .lead,
.bg-cream li{color:var(--charcoal);font-weight:400}
.bg-cream strong{color:var(--charcoal);font-weight:600}

/* Dunkle Content-Abschnitte nutzen die Markenfarbe. Navigation, Footer und
   funktionale Leisten behalten ihren separaten dunklen Hintergrund. */
.bg-dark{background:var(--gold);color:var(--charcoal)}
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,
.bg-dark strong{color:var(--charcoal);font-weight:500}
.bg-dark .eyebrow{color:var(--charcoal)}
.bg-dark .eyebrow::before{background:var(--charcoal)}
/* Fliesstext auf goldenem Hintergrund braucht vollen Kontrast + festere Schrift,
   sonst blasst charcoal auf gold aus (WCAG AA min. 4.5:1 fuer Fliesstext) */
.bg-dark p,
.bg-dark .lead,
.bg-dark li{color:var(--charcoal);font-weight:400}
.bg-dark a{color:var(--charcoal);text-decoration:underline;font-weight:500}
.bg-dark a:hover{color:#1a1610}
.bg-dark .btn--outline-light{
  border-color:rgba(46,42,36,.65);color:var(--charcoal);
}
.bg-dark .btn--outline-light:hover{
  background:var(--charcoal);border-color:var(--charcoal);color:var(--cream);
}

/* Two consecutive dark sections (e.g. Paket + CTA-Banner) need a visible seam, otherwise they blend into one block */
.cms-section.bg-dark + .cms-section.bg-dark{
  border-top:1px solid rgba(46,42,36,.24);
  margin-top:clamp(20px,3vw,36px);
}

/* -------- Buttons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 32px;font-size:.78rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  border-radius:var(--r);cursor:pointer;
  transition:all var(--t);text-decoration:none;
  font-family:var(--f-body);
}
.btn--gold{background:var(--gold);color:var(--white);border:1px solid var(--gold)}
.btn--gold:hover{background:var(--gold-dark);border-color:var(--gold-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(140,111,62,.35)}
.btn--outline{border:1px solid var(--charcoal);color:var(--charcoal);background:transparent}
.btn--outline:hover{background:var(--charcoal);color:var(--cream);transform:translateY(-2px)}
.btn--outline-light{border:1px solid rgba(191,168,143,.5);color:var(--cream);background:transparent}
.btn--outline-light:hover{background:rgba(191,168,143,.12);border-color:var(--cream);transform:translateY(-2px)}
.btn--link{
  padding:0;background:none;border:none;color:var(--gold-dark);
  letter-spacing:.2em;border-bottom:1px solid var(--gold);padding-bottom:4px;
  border-radius:0;
}
.btn--link:hover{color:var(--charcoal);border-color:var(--charcoal)}

/* -------- Navigation ------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(251,247,240,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(184,150,90,.14);
  transition:background var(--t);
}
.nav--dark{background:rgba(46,42,36,.85);border-bottom-color:rgba(184,150,90,.2)}
.nav--dark .nav__logo,
.nav--dark .nav__links a{color:var(--cream)}
.nav__inner{
  max-width:var(--max);margin:0 auto;padding:0 28px;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__logo{
  font-family:var(--f-display);font-size:1.4rem;font-weight:500;
  color:var(--charcoal);line-height:1;letter-spacing:.02em;
}
.nav__logo span{display:block;font-family:var(--f-body);font-size:.6rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold-dark);
  margin-top:4px;font-weight:300;
}
.nav__links{display:flex;gap:38px;align-items:center}
.nav__links a{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);position:relative;font-weight:300;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--gold);transition:width var(--t);
}
.nav__links a:hover{color:var(--charcoal)}
.nav__links a:hover::after{width:100%}
.nav__cta{
  padding:12px 24px !important;font-size:.72rem !important;
}
.nav__burger{display:none;width:28px;height:20px;position:relative;flex-direction:column;justify-content:space-between;cursor:pointer;z-index:102}
.nav__burger span{display:block;height:1.5px;background:var(--charcoal);width:100%;transition:transform var(--t),opacity var(--t)}
.nav--dark .nav__burger span{background:var(--cream)}
.nav__burger.is-open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* Dropdown submenu (desktop) */
.nav__links .has-sub{position:relative}
.nav__links .has-sub > a small{font-size:.55em;margin-left:4px;opacity:.7}
.nav__links .submenu{
  position:absolute;top:calc(100% + 10px);left:-20px;min-width:230px;
  background:var(--charcoal);border:1px solid rgba(212,184,131,.22);
  padding:10px 0;list-style:none;margin:0;opacity:0;visibility:hidden;
  transform:translateY(-6px);transition:all var(--t);pointer-events:none;
  box-shadow:var(--shadow-md);border-radius:var(--r);
}
.nav__links .has-sub:hover .submenu,
.nav__links .has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav__links .submenu li{display:block}
.nav__links .submenu a{
  display:block;padding:10px 22px;color:var(--cream);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:300;transition:background var(--t),color var(--t);
}
.nav__links .submenu a::after{display:none}
.nav__links .submenu a:hover{background:rgba(184,150,90,.14);color:var(--gold-light)}

/* Mobile nav panel */
.nav__mobile{
  position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--charcoal);padding:30px 0;overflow-y:auto;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  z-index:99;opacity:0;visibility:hidden;
}
.nav__mobile.is-open{transform:translateY(0);opacity:1;visibility:visible}
.nav__mobile ul{list-style:none;padding:0;margin:0}
.nav__mobile li{border-bottom:1px solid rgba(191,168,143,.08)}
.nav__mobile a{
  display:block;padding:18px 28px;color:var(--cream);
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;font-weight:300;
}
.nav__mobile a:hover{background:rgba(184,150,90,.1);color:var(--gold-light)}

/* Active nav link */
.nav__links a.is-active{color:var(--gold-dark)}
.nav--dark .nav__links a.is-active{color:var(--gold-light)}
.nav__links a.is-active::after{width:100%;background:var(--gold)}

/* Sub-page hero (uses existing .hero--sub, but add refinements) */
.hero--short{min-height:60vh;min-height:60svh}
.hero--mini{min-height:48vh;min-height:48svh}

/* Content page body (longer form text) */
.content-body{max-width:780px;margin:0 auto}
.content-body h2{margin-top:0}
.content-body h3{margin-top:2em;margin-bottom:.5em;font-weight:500}
.content-body h4{margin-top:1.8em;margin-bottom:.4em;color:var(--gold-dark);font-style:italic;font-size:1.2rem}
.content-body p{margin-bottom:1.1em}
.content-body img{margin:2rem auto;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.content-body a{color:var(--gold-dark);border-bottom:1px solid var(--gold);transition:color var(--t),border-color var(--t)}
.content-body a:hover{color:var(--charcoal);border-color:var(--charcoal)}

/* Standalone "bild" figures: align to the same column width as content-body text */
.cms-image{max-width:780px;margin:2.2rem auto}
.cms-image img{width:100%;border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}

/* Pricing box (for preise-style blocks) */
.pricing-box{
  background:var(--white);border:1px solid var(--beige);
  border-radius:var(--r-lg);padding:50px 48px;max-width:640px;margin:50px auto;
  box-shadow:var(--shadow-sm);text-align:center;
}
.pricing-box__label{
  display:block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:12px;
}
.pricing-box__title{
  display:block;font-family:var(--f-display);font-size:1.9rem;font-weight:500;
  color:var(--charcoal);line-height:1.2;margin-bottom:.4em;
}
.pricing-box__price{
  display:block;font-family:var(--f-display);font-size:clamp(2.4rem,4.5vw,3.6rem);
  color:var(--gold-dark);font-weight:400;line-height:1;margin:.5rem 0 1.5rem;
}
.pricing-box__list{
  list-style:none;padding:0;margin:0 0 2rem;text-align:left;
  border-top:1px solid var(--beige);
}
.pricing-box__list li{
  padding:14px 0;border-bottom:1px solid var(--beige);
  color:var(--text);font-size:.96rem;position:relative;padding-left:26px;
}
.pricing-box__list li::before{
  content:"✦";position:absolute;left:0;top:14px;
  color:var(--gold);font-size:.85rem;
}
.pricing-box--dark{background:var(--gold);color:var(--charcoal);border-color:var(--gold)}
.pricing-box--dark .pricing-box__label{color:var(--charcoal)}
.pricing-box--dark .pricing-box__title{color:var(--charcoal)}
.pricing-box--dark .pricing-box__price{color:var(--charcoal)}
.pricing-box--dark .pricing-box__list{border-top-color:rgba(46,42,36,.2)}
.pricing-box--dark .pricing-box__list li{border-bottom-color:rgba(46,42,36,.2);color:rgba(46,42,36,.9)}

/* Two pricing boxes side by side */
.pricing-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px;margin:0 auto}
.pricing-pair .pricing-box{margin:0;max-width:none}
/* Single pricing box: don't stretch thin across a half-width grid cell */
.pricing-pair--single{grid-template-columns:1fr;max-width:640px}
.pricing-pair--single .pricing-box{max-width:640px;margin:0 auto}

/* Spacing between stacked content blocks within the same section (no gap otherwise) */
.about-split + .about-split,
.about-split + .triple-grid,
.triple-grid + .about-split,
.about-split + .pricing-pair,
.pricing-pair + .about-split,
.about-split + .cms-columns,
.cms-columns + .about-split,
.triple-grid + .triple-grid,
.about-split + .process-steps,
.process-steps + .about-split{
  margin-top:clamp(40px,6vw,64px);
}

/* Video/Wedding card (referenced couples) */
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:50px}
.ref-card{text-align:center;padding:30px 24px;background:var(--white);border:1px solid var(--beige);border-radius:var(--r-lg);transition:all var(--t)}
.ref-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--gold-border)}
.ref-card__names{font-family:var(--f-display);font-size:1.3rem;color:var(--charcoal);font-weight:500;margin-bottom:.2em}
.ref-card__loc{font-size:.85rem;color:var(--text-muted);letter-spacing:.02em}
.ref-card__loc a{color:var(--gold-dark);border-bottom:1px solid var(--gold)}

/* Leistungen overview grid (landing for /leistungen/) */
.lp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lp-card{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--beige);border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  text-decoration:none;color:inherit;
}
.lp-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--gold-border)}
.lp-card__img{aspect-ratio:4/3;overflow:hidden;background:var(--beige)}
.lp-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.lp-card:hover .lp-card__img img{transform:scale(1.05)}
.lp-card__body{padding:26px 28px 28px;flex:1;display:flex;flex-direction:column}
.lp-card__body h3{margin-bottom:.4em;font-weight:500;font-size:1.35rem}
.lp-card__body p{font-size:.92rem;color:var(--text-muted);margin-bottom:1rem;flex:1}
.lp-card__meta{display:flex;justify-content:space-between;align-items:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;padding-top:12px;border-top:1px solid var(--beige)}
.lp-card__meta em{font-style:normal;color:var(--gold-dark);font-weight:500}
.lp-card__meta span::after{content:" →";margin-left:4px;transition:margin var(--t)}
.lp-card:hover .lp-card__meta span::after{margin-left:10px}

/* -------- Hero ------------------------------------------------------------ */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:center;color:var(--cream);
  padding:calc(var(--nav-h) + 40px) 0 40px;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero__bg--contain{background:#211d18}
/* Hero-Video: fuellt denselben Rahmen wie ein Hero-Bild. */
.hero__bg--video{background:#211d18}
.hero__bg--video .cms-hero__video{width:100%;height:100%;object-fit:cover;display:block}
.hero__bg--video .hero__video-frame{position:absolute;inset:0;overflow:hidden}
.hero__bg--video .hero__video-frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;border:0;
}
.hero__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:2;width:86px;height:86px;border-radius:50%;
  border:2px solid rgba(191,168,143,.85);
  background:rgba(30,25,20,.42);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  cursor:pointer;transition:background var(--t),transform var(--t),border-color var(--t);
}
.hero__play span{
  display:block;width:0;height:0;margin:0 auto;
  border-left:22px solid var(--cream);
  border-top:14px solid transparent;border-bottom:14px solid transparent;
  transform:translateX(4px);
}
.hero__play:hover{background:rgba(30,25,20,.62);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.05)}
.hero__play:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.hero__bg--video.is-playing::after{display:none}
/* Ohne Hero-Bild startet die Seite direkt mit dem Einfuehrungsbereich. */
.cms-hero-intro--solo{padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px))}
@media (prefers-reduced-motion:reduce){
  .hero__play{transition:none}
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(46,42,36,.35) 0%,rgba(46,42,36,.55) 60%,rgba(46,42,36,.75) 100%);
}
.hero__content{position:relative;z-index:1;max-width:820px}
.hero__eyebrow{
  display:inline-block;
  font-size:.74rem;font-weight:300;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-light);margin-bottom:1.6rem;
  padding-bottom:1rem;border-bottom:1px solid rgba(212,184,131,.35);
}
.hero h1{color:var(--cream);font-weight:300;line-height:1.05;margin-bottom:1.1rem}
.hero h1 em{display:block;font-size:.78em;color:var(--gold-light);margin-top:.3em;font-weight:300}
.hero__tagline{
  font-family:var(--f-display);font-style:italic;
  color:var(--gold-light);
  font-size:clamp(1.15rem,2vw,1.5rem);font-weight:400;
  letter-spacing:.04em;margin-bottom:1.4rem;
}
.hero__sub{
  font-size:1.05rem;color:rgba(191,168,143,.85);
  max-width:620px;line-height:1.75;margin-bottom:2rem;
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:16px}

/* Hero jump-nav: primary CTA + secondary anchor buttons */
.hero__jumpnav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:2.4rem}

/* Feature badges in hero */
.hero__features{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;max-width:720px;margin-top:.5rem;
}
.hero__feature{
  background:rgba(46,42,36,.55);
  border:1px solid rgba(212,184,131,.22);
  border-radius:var(--r-lg);
  padding:18px 22px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  text-align:center;
  transition:border-color var(--t),background var(--t),transform var(--t);
}
/* Team-Avatare im Hero */
.hero__team{
  display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,2.4vw,34px);
  margin-top:.9rem;margin-bottom:2rem;
}
.hero__team-item{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__team-item img{
  width:clamp(112px,9.5vw,150px);
  height:clamp(112px,9.5vw,150px);
  border-radius:50%;object-fit:cover;
  border:3px solid rgba(191,168,143,.75);
  box-shadow:0 8px 24px rgba(0,0,0,.38);
}
.hero__team-item span{
  font-size:.8rem;letter-spacing:.06em;color:var(--cream);
  text-shadow:var(--hero-shadow-small);
}
/* Mobil: zwei Portraits nebeneinander, zwei Reihen. */
@media (max-width:640px){
  .hero__team{
    display:grid;
    grid-template-columns:repeat(2,max-content);
    justify-content:center;
    column-gap:26px;row-gap:18px;
    margin-bottom:1.6rem;
  }
  .hero__team-item img{width:118px;height:118px;border-width:2px;}
  .hero__team-item span{font-size:.72rem;}
}
@media (max-width:360px){
  .hero__team-item img{width:100px;height:100px;}
}

/* Behind-the-Scenes-Galerie: quadratische statt runde Bilder */
#behind-the-scenes .triple-item__img{
  border-radius:10px;max-width:none;margin-bottom:0;
}

.hero__feature:hover{
  border-color:rgba(212,184,131,.5);
  background:rgba(46,42,36,.7);
  transform:translateY(-2px);
}
.hero__feature strong{
  display:block;color:var(--cream);
  font-family:var(--f-display);font-size:1.35rem;font-weight:500;
  line-height:1.15;margin-bottom:.35em;
}
.hero__feature small{
  display:block;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(212,184,131,.85);font-weight:300;
}

/* Ghost-light button variant for secondary hero jumpnav */
.btn--ghost-light{
  border:1px solid rgba(191,168,143,.28);
  background:rgba(46,42,36,.35);
  color:var(--cream);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.btn--ghost-light:hover{
  background:rgba(191,168,143,.12);
  border-color:rgba(212,184,131,.6);
  color:var(--gold-light);
  transform:translateY(-2px);
}
.hero__scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;
  color:rgba(191,168,143,.65);z-index:1;
}
.hero__scroll::after{
  content:"";display:block;width:1px;height:36px;
  background:rgba(212,184,131,.6);margin:12px auto 0;
  animation:drop 2.2s infinite ease-out;
}
@keyframes drop{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* Alt hero – shorter for sub-pages */
.hero--sub{min-height:72vh;min-height:72svh}

/* -------- Banner strip (promo) ------------------------------------------- */
.promo-strip{
  background:var(--charcoal);color:var(--cream);
  text-align:center;padding:10px 28px;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:300;
}
.promo-strip em{color:var(--gold-light);font-style:normal;font-weight:500}

/* -------- Stats ----------------------------------------------------------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;border-top:1px solid var(--beige);border-bottom:1px solid var(--beige);
  background:var(--cream);
}
.stat{
  padding:42px 24px;text-align:center;position:relative;
}
.stat + .stat::before{
  content:"";position:absolute;left:0;top:25%;bottom:25%;width:1px;
  background:var(--beige);
}
.stat__num{
  font-family:var(--f-display);font-size:clamp(2.2rem,4vw,3.2rem);
  color:var(--gold-dark);line-height:1;font-weight:400;
  display:block;margin-bottom:.5rem;
}
.stat__label{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--text-muted);font-weight:400;
}

/* -------- About split ---------------------------------------------------- */
.about-split{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(48px,4.5vw,72px);align-items:center;
}
.about-split__img{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
}
.about-split__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.about-split__img:hover img{transform:scale(1.03)}
.about-split__img::after{
  content:"";position:absolute;inset:18px;
  border:1px solid rgba(191,168,143,.35);pointer-events:none;
  border-radius:var(--r);
}
.about-split__text h2{margin-bottom:.6em}
.about-split__signature{
  margin-top:2rem;font-family:var(--f-display);font-style:italic;
  font-size:1.4rem;color:var(--gold-dark);
}
.about-split__signature small{
  display:block;font-family:var(--f-body);font-size:.72rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint);
  font-style:normal;margin-top:6px;
}
.about-split__buttons{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:2rem;
}
.about-split__buttons .btn{
  flex:0 1 auto;justify-content:center;
}

/* -------- Services grid -------------------------------------------------- */
.services-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;
}
.service-card{
  background:var(--white);border:1px solid var(--beige);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.service-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-md);
  border-color:var(--gold-border);
}
.service-card__img{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--beige)}
.service-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.service-card:hover .service-card__img img{transform:scale(1.06)}
.service-card__body{padding:34px 32px 36px;flex:1;display:flex;flex-direction:column}
.service-card__body h3{margin-bottom:.4em;font-weight:500}
.service-card__body p{color:var(--text-muted);font-size:.95rem;line-height:1.7;margin-bottom:1.4rem;flex:1}
.service-card__price{
  font-family:var(--f-display);font-size:1.25rem;color:var(--gold-dark);
  font-weight:400;margin-bottom:1rem;padding-top:1rem;
  border-top:1px solid var(--beige);
}
.service-card__price small{
  font-family:var(--f-body);font-size:.65rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--text-faint);display:block;margin-bottom:4px;
}
.service-card__link{
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--charcoal);font-weight:500;
  display:inline-flex;align-items:center;gap:8px;
}
.service-card__link::after{content:"→";transition:transform var(--t)}
.service-card:hover .service-card__link::after{transform:translateX(4px)}

/* -------- Why grid -------------------------------------------------------- */
.why-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:50px;
}
.why-item{
  padding:36px 22px;text-align:center;
  border:1px solid rgba(212,184,131,.18);
  border-radius:var(--r-lg);
  background:rgba(191,168,143,.03);
  transition:all var(--t);
}
.why-item:hover{
  border-color:rgba(212,184,131,.4);
  background:rgba(191,168,143,.06);
  transform:translateY(-4px);
}
.why-item__num{
  font-family:var(--f-display);font-size:1rem;font-style:italic;
  color:var(--gold-light);display:block;margin-bottom:.8rem;letter-spacing:.1em;
}
.why-item h4{color:var(--cream);font-family:var(--f-display);font-size:1.3rem;font-weight:500;margin-bottom:.6rem}
.why-item p{font-size:.88rem;color:rgba(191,168,143,.7);margin:0;line-height:1.65}

/* Auf goldenem .bg-dark-Hintergrund braucht .why-item dunklen Text fuer WCAG-Kontrast */
.bg-dark .why-item{
  background:rgba(46,42,36,.10);
  border-color:rgba(46,42,36,.35);
}
.bg-dark .why-item:hover{
  background:rgba(46,42,36,.16);
  border-color:rgba(46,42,36,.55);
}
.bg-dark .why-item__num{
  color:var(--charcoal);
  font-size:1.15rem;
  font-style:normal;
  font-weight:600;
  letter-spacing:.08em;
}
.bg-dark .why-item h4{color:var(--charcoal)}
.bg-dark .why-item p{color:rgba(46,42,36,.92)}

/* -------- Foto + Video Pair (2-Spalten Media-Split) --------------------- */
/* Foto (links) und Vimeo-Video (rechts) nebeneinander, jeweils 16:9,
   mit Titel/Beschreibung/Button darunter. Mobil untereinander. */
.foto-video-pair{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,3vw,44px);
  margin:clamp(20px,3vw,40px) 0;
}
.foto-video-pair__col{display:flex;flex-direction:column}
.foto-video-pair__media{
  position:relative;padding-top:56.25%;height:0;
  border-radius:var(--r-lg);overflow:hidden;
  background:#000;box-shadow:var(--shadow-md);
}
.foto-video-pair__media--photo img,
.foto-video-pair__media iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  border:0;object-fit:cover;
}
.foto-video-pair__body{
  text-align:center;padding:1.6rem 1rem 0;
  flex:1;display:flex;flex-direction:column;align-items:center;
}
.foto-video-pair__body .eyebrow{margin-bottom:.9rem}
.foto-video-pair__body h3{
  font-family:var(--f-display);
  font-size:clamp(1.35rem,2vw,1.75rem);
  font-weight:500;line-height:1.2;
  margin:0 0 .8rem;color:var(--charcoal);
}
.foto-video-pair__body p{
  color:var(--text-muted);
  font-size:.95rem;line-height:1.7;
  max-width:44ch;margin:0 auto 1rem;
}
.foto-video-pair__cta{margin-top:auto;padding-top:1rem}

/* Video-only Embed (Vimeo/YouTube) — vollbreite Variante */
.cms-video-embed{
  /* padding-top:56.25% rechnete gegen die Breite des Elternelements (1120 px),
     nicht gegen die eigene (max-width:1040 px) - das ergab 1040x630 statt
     1040x585 und damit schwarze Balken im Player. aspect-ratio rechnet gegen
     die eigene Breite. Gemessen am 09.09.2026. */
  position:relative;aspect-ratio:16/9;
  max-width:1040px;margin:clamp(20px,3vw,40px) auto;
  border-radius:var(--r-lg);overflow:hidden;
  background:#000;box-shadow:var(--shadow-md);
}
.cms-video-embed iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;border:0;
}
.cms-media__caption{
  text-align:center;color:var(--text-muted);
  font-size:.9rem;margin-top:.6rem;
}

@media (max-width:768px){
  .foto-video-pair{grid-template-columns:1fr;gap:36px}
  .foto-video-pair__body{padding:1.2rem .5rem 0}
}

/* -------- Process (4 steps) ---------------------------------------------- */
.process-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.process-step{text-align:center}
.process-step__img{
  aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-lg);
  margin-bottom:24px;background:var(--beige);
}
.process-step__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.process-step:hover .process-step__img img{transform:scale(1.05)}
.process-step__num{
  font-family:var(--f-display);font-style:italic;font-size:1rem;
  color:var(--gold-dark);letter-spacing:.1em;display:block;margin-bottom:.4rem;
}
.process-step h3{font-size:1.35rem;margin-bottom:.7rem;font-weight:500}
.process-step p{font-size:.92rem;color:var(--text-muted);line-height:1.7;margin:0}

/* -------- Style/Quality strip (3-up) ------------------------------------- */
.triple-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.triple-item{text-align:center}
.triple-item__img{
  aspect-ratio:1/1;overflow:hidden;border-radius:50%;
  max-width:200px;margin:0 auto 22px;
}
.triple-item__img img{width:100%;height:100%;object-fit:cover}
.triple-item h4{font-size:1.25rem;margin-bottom:.6rem;font-weight:500;font-style:italic}
.triple-item p{font-size:.95rem;color:var(--text-muted);max-width:32ch;margin:0 auto;line-height:1.7}

/* -------- Mosaic (1 grosses Bild + 2x2 Bilder) --------------------------- */
.mosaic-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-bottom:clamp(24px,4vw,44px);
}
.mosaic-grid__big{
  border-radius:var(--r-lg);overflow:hidden;
}
.mosaic-grid__big img{width:100%;height:100%;object-fit:cover;display:block}
.mosaic-grid__small{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.mosaic-grid__small img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  border-radius:var(--r-lg);
}
@media (max-width:768px){
  .mosaic-grid{grid-template-columns:1fr;gap:12px}
  .mosaic-grid__big img{aspect-ratio:4/3}
  .mosaic-grid__small{gap:12px}
}

/* -------- Galleries ------------------------------------------------------- */
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.gallery-grid--wide{grid-template-columns:repeat(4,1fr)}
.gallery-grid a{
  display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r);background:var(--beige);
  position:relative;cursor:zoom-in;
}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.gallery-grid a:hover img{transform:scale(1.08)}
.gallery-grid a::after{
  content:"";position:absolute;inset:0;background:rgba(46,42,36,0);
  transition:background var(--t);
}
.gallery-grid a:hover::after{background:rgba(46,42,36,.2)}

/* Asymmetric hero gallery – for homepage */
.asym-gallery{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:160px;gap:14px;
}
.asym-gallery a{
  overflow:hidden;border-radius:var(--r);background:var(--beige);
  position:relative;cursor:zoom-in;
}
.asym-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.asym-gallery a:hover img{transform:scale(1.07)}
.asym-gallery a::after{
  content:"";position:absolute;inset:0;
  background:rgba(46,42,36,0);
  transition:background var(--t);pointer-events:none;
}
.asym-gallery a:hover::after{background:rgba(46,42,36,.15)}
.asym-gallery a:nth-child(1){grid-column:span 2;grid-row:span 2}
.asym-gallery a:nth-child(2){grid-column:span 2;grid-row:span 1}
.asym-gallery a:nth-child(3){grid-column:span 2;grid-row:span 2}
.asym-gallery a:nth-child(4){grid-column:span 2;grid-row:span 2}
.asym-gallery a:nth-child(5){grid-column:span 2;grid-row:span 1}
.asym-gallery a:nth-child(6){grid-column:span 2;grid-row:span 1}

/* -------- Breadcrumb ----------------------------------------------------- */
.crumb{
  padding:calc(var(--nav-h) + 24px) 0 0;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-faint);
}
.crumb a{color:var(--text-muted)}
.crumb a:hover{color:var(--gold-dark)}
.crumb span{margin:0 10px;color:var(--gold)}

/* -------- Feature price card (location) --------------------------------- */
.price-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:50px 0 10px;
}
.price-card{
  padding:32px 28px;background:var(--white);border:1px solid var(--beige);
  border-radius:var(--r-lg);text-align:left;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  display:block;text-decoration:none;color:inherit;
}
.price-card:hover{
  transform:translateY(-4px);box-shadow:var(--shadow-md);
  border-color:var(--gold-border);
}
.price-card--highlight{background:var(--gold);color:var(--charcoal);border-color:var(--gold)}
.price-card--highlight .price-card__label{color:var(--charcoal)}
.price-card--highlight .price-card__value{color:var(--charcoal)}
.price-card--highlight:hover{background:var(--gold-light);border-color:var(--gold-dark)}
.price-card__label{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;display:block;
}
.price-card__value{
  font-family:var(--f-display);font-size:1.6rem;color:var(--charcoal);
  line-height:1.25;font-weight:400;
}
.price-card__value em{color:var(--gold-dark);font-size:.85em;display:block;margin-top:4px}

/* -------- CTA Section ---------------------------------------------------- */
.cta-section{
  position:relative;padding:clamp(80px,12vw,160px) 0;
  color:var(--cream);text-align:center;overflow:hidden;
}
.cta-section__bg{position:absolute;inset:0;z-index:0}
.cta-section__bg img{width:100%;height:100%;object-fit:cover}
.cta-section__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(46,42,36,.75),rgba(46,42,36,.85));
}
.cta-section__content{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:0 28px}
.cta-section h2{color:var(--cream);font-weight:300;margin-bottom:1rem}
.cta-section p{color:rgba(191,168,143,.82);font-size:1.05rem;margin-bottom:2rem}

/* -------- Team cards ----------------------------------------------------- */
.team-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px;
}
.team-card{text-align:center}
.team-card__img{
  aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-lg);
  background:var(--beige);margin-bottom:16px;
}
.team-card__img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transition:transform .6s ease;filter:grayscale(.15)}
.team-card:hover .team-card__img img{transform:scale(1.04);filter:grayscale(0)}
.team-card h4{font-family:var(--f-display);font-size:1.2rem;font-weight:500;margin-bottom:.2rem}
.team-card p{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-dark);margin:0}

/* -------- Location intro ------------------------------------------------- */
.loc-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;margin-bottom:0}
.loc-intro__img{aspect-ratio:5/4;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.loc-intro__img img{width:100%;height:100%;object-fit:cover}
.loc-intro h2 em{display:block;font-style:italic;color:var(--gold-dark);font-size:.7em;margin-top:.4em}

/* Reverse variant */
.loc-intro--reverse{direction:rtl}
.loc-intro--reverse > *{direction:ltr}

/* Bio-Variante: Portrait-Seitenverhältnis + Fokus auf Gesicht (Team-Seite) */
.loc-intro--bio{grid-template-columns:1fr 1.2fr;gap:60px}
.loc-intro--bio .loc-intro__img{aspect-ratio:4/5;max-width:440px}
.loc-intro--bio .loc-intro__img img{object-position:center 22%}
.loc-intro--bio.loc-intro--reverse .loc-intro__img{margin-left:auto}

/* -------- Highlight box (promo / Schön-Wetter) --------------------------- */
.highlight-box{
  background:var(--cream);border-left:3px solid var(--gold);
  padding:36px 40px;border-radius:0 var(--r-lg) var(--r-lg) 0;
  margin:30px 0;
}
.highlight-box h3{color:var(--gold-dark);font-style:italic;margin-bottom:.6em}
.highlight-box p:last-child{margin-bottom:0}
.highlight-box strong{color:var(--charcoal);font-weight:500}

/* -------- Bullet list (clean) ------------------------------------------- */
.bullet-list{list-style:none;padding:0;margin:1.5rem 0}
.bullet-list li{
  position:relative;padding:12px 0 12px 28px;
  border-bottom:1px solid var(--beige);color:var(--text);
}
.bullet-list li:last-child{border-bottom:none}
.bullet-list li::before{
  content:"✦";position:absolute;left:0;top:12px;
  color:var(--gold);font-size:.85rem;
}

/* -------- Contact form -------------------------------------------------- */
.contact-wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start;
}
.contact-info h2{margin-bottom:.5em}
.contact-info__detail{
  padding:18px 0;border-bottom:1px solid var(--beige);
  display:flex;flex-direction:column;gap:4px;
}
.contact-info__detail:last-child{border-bottom:none}
.contact-info__label{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint);
}
.contact-info__value{font-family:var(--f-display);font-size:1.2rem;color:var(--charcoal)}
.contact-info__value a:hover{color:var(--gold-dark)}

.form{display:flex;flex-direction:column;gap:18px;background:var(--white);padding:44px 40px;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--beige)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__field{display:flex;flex-direction:column;gap:6px}
.form__field label{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-muted);font-weight:400;
}
.form__field input,.form__field textarea,.form__field select{
  padding:14px 16px;border:1px solid var(--beige);background:var(--off-white);
  border-radius:var(--r);font-family:var(--f-body);font-size:.95rem;
  color:var(--text);transition:border-color var(--t),background var(--t);
}
.form__field input:focus,.form__field textarea:focus,.form__field select:focus{
  outline:none;border-color:var(--gold);background:var(--white);
}
.form__field textarea{resize:vertical;min-height:110px;font-family:var(--f-body)}
.form__checks{display:flex;flex-wrap:wrap;gap:14px 22px;font-size:.9rem}
.form__checks label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  letter-spacing:.02em;text-transform:none;font-size:.88rem;color:var(--text);
}
.form__checks input{accent-color:var(--gold)}
.form__submit{align-self:flex-start;margin-top:8px}

/* -------- Footer --------------------------------------------------------- */
.footer{
  background:var(--charcoal);color:rgba(191,168,143,.72);
  padding:80px 0 30px;font-size:.92rem;
}
.footer__grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:50px;margin-bottom:60px;
}
.footer__brand h3{color:var(--cream);font-family:var(--f-display);font-size:1.6rem;font-weight:500;margin-bottom:.4em}
.footer__brand p{color:rgba(191,168,143,.6);font-size:.92rem;line-height:1.7;max-width:32ch}
.footer__col h5{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-light);margin:0 0 1.2rem;font-family:var(--f-body);font-weight:400;
}
.footer__col a{display:block;padding:6px 0;color:rgba(191,168,143,.72);font-size:.92rem}
.footer__col a:hover{color:var(--gold-light)}
.footer__bottom{
  border-top:1px solid rgba(191,168,143,.08);
  padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:.78rem;color:rgba(191,168,143,.5);letter-spacing:.08em;
}

/* -------- Responsive ---------------------------------------------------- */
@media (max-width:960px){
  :root{--nav-h:70px}
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__cta{display:none}

  .stats{grid-template-columns:1fr}
  .stat + .stat::before{display:none}
  .stat{border-top:1px solid var(--beige)}
  .stat:first-child{border-top:none}
  .about-split,.loc-intro,.contact-wrap{grid-template-columns:1fr;gap:40px}
  .about-split__img{width:100%;max-width:none;margin:0 auto}

  .services-grid{grid-template-columns:1fr;gap:20px}
  .why-grid{grid-template-columns:1fr}
  .why-item:last-child{grid-column:span 1}
  .process-grid{grid-template-columns:1fr}
  .triple-grid{grid-template-columns:1fr;gap:28px}
  .team-grid{grid-template-columns:1fr}
  .price-row{grid-template-columns:1fr}

  .gallery-grid{grid-template-columns:1fr}
  .gallery-grid--wide{grid-template-columns:1fr}

  .asym-gallery{grid-template-columns:1fr;grid-auto-rows:220px}
  .asym-gallery a:nth-child(n){grid-column:span 1;grid-row:span 1}

  .lp-grid{grid-template-columns:1fr}
  .pricing-pair{grid-template-columns:1fr}
  .ref-grid{grid-template-columns:1fr}
  .cms-columns{grid-template-columns:1fr}

  .footer__grid{grid-template-columns:1fr;gap:36px}
  .footer__brand{grid-column:span 1}

  .form{padding:28px 22px}
  .form__row{grid-template-columns:1fr}

  .loc-intro--reverse{direction:ltr}

  .hero__eyebrow{font-size:.68rem;letter-spacing:.32em}
  .hero__features{grid-template-columns:repeat(3,1fr);gap:10px}
  .hero__feature{padding:14px 12px}
  .hero__feature strong{font-size:1.1rem}
  .hero__feature small{font-size:.6rem;letter-spacing:.15em}
  .hero__jumpnav{gap:10px}
  .hero__jumpnav .btn{padding:14px 20px;font-size:.7rem}
}

@media (max-width:560px){
  .container{padding:0 20px}
  .eyebrow{font-size:.66rem;letter-spacing:.3em}
  .eyebrow::before{width:18px}
  .btn{padding:14px 26px;font-size:.72rem}
  .nav__logo{font-size:1.2rem}
  .hero{min-height:92vh}
  .section-header{margin-bottom:42px}
  .stats{grid-template-columns:1fr}
  .stat + .stat::before{display:none}
  .stat{border-top:1px solid var(--beige);padding:30px 20px}
  .stat:first-child{border-top:none}

  /* Hero features: stack vertically on phones */
  .hero__features{grid-template-columns:1fr;gap:8px;max-width:360px}
  .hero__feature{padding:16px 20px;text-align:left;display:flex;align-items:baseline;gap:12px}
  .hero__feature strong{margin-bottom:0;font-size:1.15rem}
  .hero__feature small{letter-spacing:.15em}

  /* Jumpnav: full-width primary, compact secondary in row */
  .hero__jumpnav{gap:8px}
  .hero__jumpnav .btn--gold{flex:1 1 100%;order:-1}
  .hero__jumpnav .btn--ghost-light{flex:1 1 calc(50% - 4px);padding:12px 16px;font-size:.66rem;letter-spacing:.2em}
}

/* -------- Reveal on scroll ---------------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease, transform .9s ease}
.reveal.is-in{opacity:1;transform:translateY(0)}

/* -------- Back-to-top --------------------------------------------------- */
.back-to-top{
  position:fixed;right:22px;bottom:90px;z-index:80;
  width:44px;height:44px;border-radius:50%;
  background:var(--cream);color:var(--charcoal);
  border:1px solid var(--beige);
  box-shadow:var(--shadow-md);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--t),visibility var(--t),transform var(--t),background var(--t),color var(--t);
}
.back-to-top svg{width:20px;height:20px}
.back-to-top:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

/* -------- Action bar (fixed bottom) ------------------------------------- */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  background:var(--charcoal);
  border-top:1px solid rgba(212,184,131,.22);
  box-shadow:0 -6px 22px rgba(0,0,0,.25);
}
.action-bar__btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:12px 8px;min-height:68px;
  color:var(--cream);text-decoration:none;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;
  border:none;border-right:1px solid rgba(191,168,143,.08);
  transition:background var(--t),color var(--t);
}
.action-bar__btn:last-child{border-right:none}
.action-bar__btn svg{width:22px;height:22px;opacity:.9}
.action-bar__btn:hover{background:rgba(184,150,90,.12);color:var(--gold-light)}
.action-bar__btn:hover svg{opacity:1}
.action-bar__btn--primary{
  background:rgba(184,150,90,.1);
  color:var(--gold-light);
}
.action-bar__btn--primary svg{color:var(--gold)}
.action-bar__btn--primary:hover{background:rgba(184,150,90,.2);color:var(--gold-light)}

/* Add bottom space for body so footer isn't hidden behind action-bar */
body{padding-bottom:68px}

/* Adjust back-to-top position so it sits above action-bar comfortably */
@media (max-width:560px){
  .back-to-top{bottom:80px;right:16px;width:40px;height:40px}
  .action-bar__btn{font-size:.6rem;letter-spacing:.15em;min-height:64px}
  .action-bar__btn svg{width:20px;height:20px}
  body{padding-bottom:64px}
}

/* -------- Lightbox ------------------------------------------------------ */
.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(20,18,15,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  padding:60px 80px 90px;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__stage{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.lightbox__img{
  max-width:100%;max-height:100%;object-fit:contain;
  opacity:0;transition:opacity .3s ease;
  border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.5);
  user-select:none;-webkit-user-drag:none;
}
.lightbox__img.is-ready{opacity:1}
.lightbox__close,
.lightbox__prev,
.lightbox__next{
  position:absolute;z-index:2;
  background:rgba(191,168,143,.08);border:1px solid rgba(191,168,143,.18);
  color:var(--cream);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.lightbox__close{top:20px;right:24px;width:44px;height:44px}
.lightbox__prev,.lightbox__next{
  top:50%;transform:translateY(-50%);
  width:52px;height:52px;
}
.lightbox__prev{left:24px}
.lightbox__next{right:24px}
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{
  background:var(--gold);border-color:var(--gold);color:var(--white);
}
.lightbox__next:hover,.lightbox__prev:hover{transform:translateY(-50%) scale(1.06)}
.lightbox__close svg{width:20px;height:20px}
.lightbox__prev svg,.lightbox__next svg{width:24px;height:24px}

.lightbox__foot{
  position:absolute;left:0;right:0;bottom:20px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:0 20px;pointer-events:none;
}
.lightbox__counter{
  font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-light);font-weight:400;
}
.lightbox__caption{
  font-size:.85rem;color:rgba(191,168,143,.7);
  max-width:720px;text-align:center;line-height:1.4;
  font-family:var(--f-display);font-style:italic;
}

@media (max-width:700px){
  .lightbox{padding:40px 8px 80px}
  .lightbox__close{top:12px;right:12px;width:40px;height:40px}
  .lightbox__prev,.lightbox__next{width:42px;height:42px}
  .lightbox__prev{left:8px}
  .lightbox__next{right:8px}
  .lightbox__caption{font-size:.78rem}
}

/* -------- Utility ------------------------------------------------------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}

/* CMS Navigationserweiterung */
.nav__links > li{position:relative}
.nav__item--has-children > a::after{content:'▾';font-size:.68em;margin-left:.45rem;opacity:.75}
.nav__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:230px;margin:0;padding:10px;background:rgba(46,42,36,.96);border:1px solid rgba(196,161,90,.35);box-shadow:0 18px 45px rgba(0,0,0,.28);list-style:none;opacity:0;visibility:hidden;transition:.18s ease;z-index:40}
.nav__item--has-children:hover .nav__dropdown,.nav__item--has-children:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav__dropdown a{display:block;padding:10px 12px;color:#fff;text-decoration:none;white-space:nowrap;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase}
.nav__dropdown a:hover,.nav__dropdown a.is-active{color:var(--gold,#c4a15a)}
.nav__mobile-sub{margin:.35rem 0 .7rem 1rem;padding:0;list-style:none;border-left:1px solid rgba(196,161,90,.35)}
.nav__mobile-sub a{font-size:.9rem;padding:.45rem .9rem}
.cms-admin-bar{position:fixed;right:18px;bottom:92px;z-index:9999;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 36px)}
.cms-admin-bar a{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:999px;background:#263238;color:#fff;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cms-admin-bar a:hover{background:#c4a15a;color:#1e1711}
@media(max-width:900px){.cms-admin-bar{bottom:76px;right:10px}.cms-admin-bar a{font-size:12px;padding:8px 10px}}

/* Suche und Sitemap */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.nav__search{display:flex;align-items:center;gap:0;border:1px solid rgba(255,255,255,.28);border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}
.nav__search input{width:120px;border:0;background:transparent;color:#fff;padding:.62rem .2rem .62rem .85rem;font:inherit;outline:0}
.nav__search input::placeholder{color:rgba(255,255,255,.75)}
.nav__search button{border:0;background:transparent;color:#fff;width:2.35rem;height:2.35rem;font-size:1.35rem;line-height:1;cursor:pointer;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.nav__search:focus-within{border-color:var(--gold,#c4a15d);background:rgba(0,0,0,.22)}
.nav__mobile-search{padding:1rem;display:flex;gap:.5rem}
.nav__mobile-search input{flex:1;padding:.85rem;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:.6rem}
.nav__mobile-search button{border:0;border-radius:.6rem;background:var(--gold,#c4a15d);color:#211b16;padding:.85rem 1rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.site-search-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;max-width:860px;margin:2rem auto 1.5rem}
.site-search-form input{width:100%;padding:1.05rem 1.2rem;border:1px solid rgba(46,42,36,.2);border-radius:999px;font:inherit;font-size:1.05rem;background:#fff;box-shadow:0 12px 36px rgba(0,0,0,.06)}
.search-intro,.search-meta,.notice-box{max-width:860px;margin:1.5rem auto;text-align:center}
.search-suggestions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:1rem}
.search-suggestions a{display:inline-flex;align-items:center;border:1px solid rgba(196,161,93,.45);background:rgba(196,161,93,.11);border-radius:999px;padding:.58rem 1rem;text-decoration:none;color:inherit;font-weight:700}
.search-results,.sitemap-list{display:grid;gap:1rem;max-width:920px;margin:2rem auto 0}
.search-result-card,.sitemap-entry{background:#fff;border:1px solid rgba(46,42,36,.12);border-radius:1rem;padding:1.35rem 1.5rem;box-shadow:0 15px 40px rgba(0,0,0,.05)}
.search-result-card h2,.sitemap-entry h2{font-family:Arial,Helvetica,sans-serif;font-size:1.25rem;margin:0 0 .5rem;color:#2e2a24}
.search-result-card h2 a,.sitemap-entry h2 a{text-decoration:none;color:inherit}
.search-result-card h2 a:hover,.sitemap-entry h2 a:hover{color:var(--gold,#c4a15d)}
.search-result-url,.sitemap-entry>a{font-size:.92rem;color:var(--gold,#a9853d);font-weight:700;text-decoration:none}
.muted{color:rgba(46,42,36,.68);font-size:.95rem}
.sitemap-generated{text-align:center}
@media (max-width:1100px){.nav__search{display:none}}
@media (max-width:700px){.site-search-form{grid-template-columns:1fr}.site-search-form .btn{width:100%;justify-content:center}.search-result-card,.sitemap-entry{padding:1.1rem}}


/* ============================================================
   Frontend Feinschliff Startseite / Logo / Kontaktbar
   ============================================================ */
.nav__logo{display:flex;align-items:center;min-width:178px;max-width:230px}
.nav__logo img{display:block;width:210px;max-width:100%;height:auto}
@media (max-width:980px){.nav__logo img{width:170px}.nav__inner{gap:16px}}

.hero__bg::after{background:linear-gradient(180deg,rgba(30,25,20,.20) 0%,rgba(30,25,20,.38) 55%,rgba(30,25,20,.55) 100%)}
.hero__content{text-align:center;margin-left:auto;margin-right:auto;max-width:980px}
.hero h1{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em;font-size:clamp(2.35rem,5.3vw,5.8rem);text-shadow:var(--hero-shadow)}
.hero__tagline{font-family:var(--f-display);font-style:normal;font-size:clamp(1.45rem,2.4vw,2.35rem);color:var(--cream);text-shadow:var(--hero-shadow-lead);margin-bottom:1.8rem}
.hero__sub{margin-left:auto;margin-right:auto;text-shadow:var(--hero-shadow-small)}
.hero__features{margin-left:auto;margin-right:auto;margin-bottom:1.1rem}
.hero__jumpnav{justify-content:center;margin-bottom:0}
.hero__eyebrow{border-bottom:none;text-shadow:var(--hero-shadow-small)}

.cms-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(28px,4vw,52px);align-items:stretch}
.cms-column{height:100%}
.cms-column img{border-radius:var(--r-lg);box-shadow:var(--shadow-sm);width:100%}
.cms-column .btn + .btn{margin-left:10px;margin-top:10px}
.tariff-card{background:var(--white);border:1px solid var(--beige);border-radius:999px;padding:32px 24px;box-shadow:var(--shadow-sm);text-align:center;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;max-width:280px;margin:auto}
.tariff-card strong{font-family:var(--f-display);font-size:2rem;line-height:1.05;color:var(--charcoal)}
.tariff-card span{font-size:.82rem;color:var(--text-muted)}
.tariff-card .btn{padding:12px 18px;font-size:.65rem;letter-spacing:.14em;margin-top:8px}
.cms-card-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cms-card-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cms-card p{line-height:1.65}
.cms-card .cms-card__meta{margin-top:1rem}
.form-message{max-width:840px;margin:0 auto 28px;padding:16px 20px;border-radius:var(--r);font-weight:400;text-align:center}
.form-message--success{background:#e7f5ea;color:#245d34;border:1px solid #b9dfc1}
.form-message--error{background:#fff0ef;color:#8d2f28;border:1px solid #e7b7b2}
.form__honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form__copy{display:flex;gap:10px;align-items:center;margin:12px 0 18px;font-size:.92rem;color:var(--text-muted)}

.scroll-hint{position:fixed;right:22px;bottom:96px;z-index:90;max-width:420px;background:rgba(46,42,36,.94);color:var(--cream);border:1px solid rgba(212,184,131,.35);box-shadow:var(--shadow-lg);border-radius:var(--r-lg);padding:20px 52px 20px 22px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity var(--t),visibility var(--t),transform var(--t)}
.scroll-hint.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-hint p{margin:0;font-size:.95rem;line-height:1.55;color:var(--cream)}
.scroll-hint a{color:var(--gold-light);border-bottom:1px solid var(--gold-light)}
.scroll-hint__close{position:absolute;right:10px;top:8px;width:34px;height:34px;border-radius:50%;color:var(--cream);font-size:1.25rem;line-height:1;background:rgba(255,255,255,.08)}
.scroll-hint__close:hover{background:rgba(212,184,131,.24)}
@media (max-width:900px){.cms-card-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.scroll-hint{left:16px;right:16px;max-width:none}}
@media (max-width:560px){.cms-card-grid--4,.cms-card-grid--2{grid-template-columns:1fr}.hero h1{font-size:clamp(2rem,10vw,3.4rem)}.hero__tagline{font-size:1.25rem}.scroll-hint{bottom:82px;padding:16px 48px 16px 18px}.tariff-card{border-radius:var(--r-lg);aspect-ratio:auto;max-width:none}}


/* ============================================================
   Frontend Korrektur: Original-Logo, Hero-Typografie, Navigation
   ============================================================ */
/* .nav default = hell (über Content), .nav--dark = transparent dunkel (über Hero, beim Page-Load) */
.nav--dark{background:rgba(46,42,36,.92);border-bottom-color:rgba(184,150,90,.20)}
.nav__inner{max-width:1520px;gap:20px;padding-left:clamp(18px,2.6vw,42px);padding-right:clamp(18px,2.6vw,42px)}
.nav__logo{min-width:210px;max-width:250px;flex:0 0 auto;overflow:hidden}
.nav__logo img{width:220px;height:auto;max-height:58px;object-fit:contain;object-position:left center;border:0;background:transparent}
.nav__links{flex:1 1 auto;justify-content:center;gap:clamp(18px,1.65vw,30px);min-width:0}
.nav__links a{white-space:nowrap;font-size:.73rem;letter-spacing:.15em;line-height:1.15}
.nav__item--has-children > a::after{margin-left:.35rem}
.nav__cta{white-space:nowrap;flex:0 0 auto;min-width:max-content;padding:13px 22px !important;letter-spacing:.16em !important}
.nav__search{display:none}

.hero{align-items:center;padding-top:calc(var(--nav-h) + 20px);padding-bottom:84px}
.hero__content{max-width:min(980px,92vw)}
.hero h1{font-family:"Times New Roman", Times, Georgia, serif;font-weight:400;letter-spacing:-.035em;line-height:1.04;font-size:clamp(2.25rem,4.1vw,4.65rem);text-shadow:var(--hero-shadow);margin-bottom:.35em}
.hero__tagline{font-family:"Times New Roman", Times, Georgia, serif;font-style:normal;font-weight:400;letter-spacing:-.015em;font-size:clamp(1.25rem,2vw,2rem);line-height:1.18;margin-bottom:1.45rem;color:var(--cream);text-shadow:var(--hero-shadow-lead)}
.hero__eyebrow{display:none}
.hero__sub{font-size:1rem;max-width:680px}
.hero__feature strong{font-family:"Times New Roman", Times, Georgia, serif;font-size:1.18rem;font-weight:700;letter-spacing:.01em}
.hero__feature small{font-size:.62rem;letter-spacing:.18em}
.hero__features{max-width:690px;gap:12px}
.hero__feature{padding:15px 20px;background:rgba(46,42,36,.48)}
.hero__jumpnav .btn{padding:14px 24px;font-size:.70rem;letter-spacing:.19em}

.scroll-hint{max-width:560px;padding:24px 58px 24px 26px;right:30px;bottom:104px;border-radius:14px}
.scroll-hint p{font-size:1.05rem;line-height:1.6;font-weight:400}
.scroll-hint__close{top:12px;right:12px}

@media (max-width:1280px){
  .nav__inner{gap:15px;padding-left:20px;padding-right:20px}
  .nav__logo{min-width:178px;max-width:205px}
  .nav__logo img{width:190px;max-height:52px}
  .nav__links{gap:16px}
  .nav__links a{font-size:.68rem;letter-spacing:.12em}
  .nav__cta{padding:12px 18px !important;font-size:.66rem !important;letter-spacing:.13em !important}
}
@media (max-width:1080px){
  .nav__links{gap:12px}
  .nav__links a{font-size:.64rem;letter-spacing:.09em}
  .nav__logo{min-width:160px}.nav__logo img{width:170px}
}
@media (max-width:960px){
  :root{--nav-h:70px}
  body.nav-open{overflow:hidden}
  .nav__inner{height:var(--nav-h);justify-content:space-between}
  .nav__logo{min-width:180px;max-width:210px}
  .nav__logo img{width:180px;max-height:50px}
  .nav__burger{display:flex;z-index:1003}
  .nav__mobile{display:block;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:1002;background:rgba(46,42,36,.98);padding:10px 0 110px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateX(100%);transition:transform .28s ease,opacity .28s ease,visibility .28s ease;box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .nav__mobile.is-open{opacity:1;visibility:visible;transform:translateX(0)}
  .nav__mobile-search{display:flex;padding:16px 22px 12px}
  .nav__mobile li{border-bottom:1px solid rgba(191,168,143,.10)}
  .nav__mobile a{padding:14px 24px;font-size:.82rem;line-height:1.25;letter-spacing:.13em;white-space:normal}
  .nav__mobile-sub{margin:0;padding:0 0 8px 18px;border-left:none;background:rgba(0,0,0,.10)}
  .nav__mobile-sub a{font-size:.76rem;padding:10px 24px;color:rgba(191,168,143,.82)}
  .hero{padding-top:calc(var(--nav-h) + 16px);padding-bottom:88px;min-height:100svh}
  .hero h1{font-size:clamp(2rem,7vw,3.2rem)}
  .hero__tagline{font-size:clamp(1.18rem,4.2vw,1.65rem)}
  .hero__features{grid-template-columns:repeat(3,minmax(0,1fr));max-width:660px}
}
@media (max-width:560px){
  .nav__logo{min-width:170px;max-width:190px}
  .nav__logo img{width:170px;max-height:48px}
  .hero{min-height:100svh;padding-top:calc(var(--nav-h) + 14px);padding-bottom:92px}
  .hero h1{font-size:clamp(1.82rem,9vw,2.75rem);line-height:1.06;margin-bottom:.28em}
  .hero__tagline{font-size:clamp(1.08rem,5vw,1.42rem);margin-bottom:1.1rem}
  .hero__features{grid-template-columns:1fr;max-width:330px;gap:7px;margin-bottom:.85rem}
  .hero__feature{padding:11px 16px;text-align:center;display:block}
  .hero__feature strong{font-size:1.05rem;margin-bottom:.12em}
  .hero__feature small{font-size:.58rem;letter-spacing:.14em}
  .hero__jumpnav{max-width:330px;margin-left:auto;margin-right:auto}
  .hero__jumpnav .btn{font-size:.62rem;padding:11px 13px;letter-spacing:.15em}
  .scroll-hint{left:16px;right:16px;bottom:82px;max-width:none;padding:18px 50px 18px 18px}
  .scroll-hint p{font-size:.95rem;line-height:1.5}
}


/* ============================================================
   Patch: Original-Logo, lokale Fonts, Hero-Typografie, Navigation
   ============================================================ */
.nav__logo img{width:clamp(152px,14.5vw,220px);height:auto;display:block;object-fit:contain}
.nav__inner{max-width:1380px;gap:18px}
.nav__links{gap:clamp(16px,1.55vw,30px);flex:1;justify-content:center;min-width:0}
.nav__links>li{position:relative;flex:0 0 auto}
.nav__links a{white-space:nowrap;font-size:clamp(.68rem,.72vw,.78rem);letter-spacing:.15em}
.nav__cta{white-space:nowrap;flex:0 0 auto}
.nav__search{display:none!important}

.hero h1{
  font-family:var(--f-display)!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
  line-height:1.05!important;
  font-size:clamp(2rem,3.55vw,4.15rem)!important;
  text-shadow:var(--hero-shadow)!important;
}
.hero__tagline{
  font-family:var(--f-display)!important;
  font-weight:400!important;
  font-style:normal!important;
  letter-spacing:-.01em!important;
  font-size:clamp(1.35rem,2.15vw,2.25rem)!important;
  line-height:1.12!important;
  text-shadow:var(--hero-shadow-lead)!important;
}
.hero__feature strong{font-family:var(--f-display)!important;font-weight:600!important}

.scroll-hint{max-width:640px;padding:26px 62px 26px 28px;bottom:106px}
.scroll-hint p{font-size:1.12rem;line-height:1.62}

body.nav-open{overflow:hidden}
.nav__mobile-head{display:none}
.nav__mobile-cta{display:none}

@media (max-width:1180px){
  .nav__links{gap:14px}
  .nav__links a{font-size:.66rem;letter-spacing:.12em}
  .nav__logo img{width:150px}
  .nav__cta{padding:11px 16px!important;font-size:.64rem!important;letter-spacing:.14em}
}

@media (max-width:980px){
  .nav{background:rgba(46,42,36,.97);border-bottom:1px solid var(--gold)}
  .nav__inner{height:72px;padding:0 20px;max-width:none}
  .nav__logo img{width:176px;max-height:58px}
  .nav__links,.nav__cta{display:none!important}
  .nav__burger{display:flex;width:30px;height:22px}
  .nav__burger span{height:2px;background:var(--gold)}
  .nav__burger.is-open span:nth-child(1),
  .nav__burger.is-open span:nth-child(3){background:var(--gold)}
  .nav__mobile{
    display:block!important;
    position:fixed!important;
    inset:0 0 64px 0!important;
    z-index:1005!important;
    background:#3f3d39!important;
    padding:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%)!important;
    opacity:0!important;
    visibility:hidden!important;
    transition:transform .24s ease,opacity .24s ease,visibility .24s ease!important;
    border:3px solid #27313a;
  }
  .nav__mobile.is-open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important}
  .nav__mobile-head{
    display:flex;align-items:center;gap:18px;justify-content:space-between;
    min-height:72px;padding:10px 20px 9px;background:#3a3834;border-bottom:3px solid var(--gold);
    position:sticky;top:0;z-index:3;
  }
  .nav__mobile-logo img{width:178px;height:auto;max-height:58px;object-fit:contain}
  .nav__mobile-search-link{margin-left:auto;font-size:1.75rem;line-height:1;color:#f1eee6;padding:8px 4px;text-decoration:none}
  .nav__mobile-close{font-size:2.25rem;line-height:1;color:var(--gold);padding:6px 0 8px 6px;background:none;border:0}
  .nav__mobile-search{display:none!important}
  .nav__mobile ul{margin:0;padding:0;background:#44423e}
  .nav__mobile li{border-bottom:1px solid rgba(255,255,255,.08)}
  .nav__mobile a{
    display:block;padding:17px 24px;color:#f3f0e8!important;background:#44423e;
    font-family:var(--f-body);font-size:.92rem;font-weight:700;letter-spacing:.02em;text-transform:none;line-height:1.25;
  }
  .nav__mobile a:hover,.nav__mobile a:focus{background:#4a4742;color:var(--gold-light)!important}
  .nav__mobile-sub{margin:0!important;padding:0!important;border-left:0!important;background:#3c3a36!important}
  .nav__mobile-sub a{padding:14px 24px 14px 42px!important;background:#3c3a36!important;color:#f1eee6!important;font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
  .nav__mobile-cta{
    display:block;margin:18px 22px 22px!important;text-align:center;border-radius:7px;background:var(--gold)!important;color:#2e2a24!important;
    padding:15px 18px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em!important;
  }
  .hero{padding-top:calc(72px + 16px);}
}

@media (max-width:560px){
  .nav__inner{height:70px;padding:0 16px}
  .nav__logo img{width:164px}
  .nav__mobile-head{min-height:70px;padding:9px 16px}
  .nav__mobile-logo img{width:166px}
  .hero h1{font-size:clamp(1.7rem,8.2vw,2.55rem)!important;line-height:1.08!important}
  .hero__tagline{font-size:clamp(1.1rem,5vw,1.48rem)!important}
  .hero__features{max-width:330px}
  .scroll-hint{left:12px;right:12px;bottom:84px;max-width:none;padding:17px 50px 17px 18px}
  .scroll-hint p{font-size:.95rem;line-height:1.5}
}

/* ============================================================
   Patch: mobile Navigation wie DJ-Menü, korrektes Logo, lokale Serif-Hero-Schrift
   ============================================================ */
.nav__logo img,
.nav__mobile-logo img{
  content:url('../images/global/logo-fotograf-cerny.webp');
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:left center;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

.hero h1,
.hero__tagline{
  font-family:var(--f-display)!important;
  font-weight:400!important;
  letter-spacing:-.028em!important;
}
.hero h1{
  font-size:clamp(2rem,3.3vw,3.9rem)!important;
  line-height:1.06!important;
}
.hero__tagline{
  font-size:clamp(1.22rem,1.85vw,2rem)!important;
  line-height:1.14!important;
}

@media (max-width:980px){
  .nav{
    z-index:2147480000!important;
    background:rgba(46,42,36,.98)!important;
    border-bottom:2px solid var(--gold)!important;
  }
  .nav__inner{
    height:70px!important;
    padding:0 18px!important;
    max-width:none!important;
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
  }
  .nav__logo{
    flex:0 0 auto!important;
    min-width:0!important;
    max-width:220px!important;
    width:190px!important;
    overflow:visible!important;
  }
  .nav__logo img{
    width:190px!important;
    max-height:54px!important;
  }
  .nav__links,
  .nav__cta,
  .nav__search{
    display:none!important;
  }
  .nav__burger{
    display:flex!important;
    width:30px!important;
    height:24px!important;
    z-index:2147480002!important;
    border:0!important;
    background:transparent!important;
    padding:0!important;
  }
  .nav__burger span{
    height:2px!important;
    background:var(--gold)!important;
  }

  .nav__mobile{
    position:fixed!important;
    inset:0 0 calc(64px + env(safe-area-inset-bottom)) 0!important;
    z-index:2147480001!important;
    display:flex!important;
    flex-direction:column!important;
    background:#3f3d39!important;
    color:#f3f0e8!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateX(105%)!important;
    transition:transform .24s ease, opacity .24s ease, visibility .24s ease!important;
    border:3px solid #27313a!important;
    box-shadow:0 20px 80px rgba(0,0,0,.55)!important;
  }
  .nav__mobile.is-open{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
  }
  .nav__mobile-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    min-height:70px!important;
    padding:9px 18px!important;
    background:#3a3834!important;
    border-bottom:3px solid var(--gold)!important;
    flex:0 0 auto!important;
  }
  .nav__mobile-logo{
    display:block!important;
    width:190px!important;
    max-width:calc(100vw - 128px)!important;
    padding:0!important;
    background:transparent!important;
  }
  .nav__mobile-logo img{
    width:190px!important;
    max-height:54px!important;
  }
  .nav__mobile-search-link{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin-left:auto!important;
    width:38px!important;
    height:38px!important;
    color:#f3f0e8!important;
    font-size:1.55rem!important;
    line-height:1!important;
    padding:0!important;
    background:transparent!important;
    text-decoration:none!important;
  }
  .nav__mobile-close{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    border:0!important;
    background:transparent!important;
    color:var(--gold)!important;
    font-size:2.1rem!important;
    line-height:1!important;
    cursor:pointer!important;
    padding:0!important;
  }

  .nav__mobile-list{
    flex:1 1 auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:#44423e!important;
    padding:0!important;
    margin:0!important;
  }
  .nav__mobile-row,
  .nav__mobile-group>summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:54px!important;
    padding:16px 22px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    color:#f3f0e8!important;
    background:#44423e!important;
    font-family:var(--f-body)!important;
    font-size:.94rem!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    text-transform:none!important;
    text-decoration:none!important;
    cursor:pointer!important;
    list-style:none!important;
  }
  .nav__mobile-group>summary::-webkit-details-marker{display:none!important;}
  .nav__mobile-group>summary::after{
    content:'+';
    color:var(--gold);
    font-size:1.4rem;
    line-height:1;
    font-weight:300;
  }
  .nav__mobile-group[open]>summary::after{content:'–';}
  .nav__mobile-row:hover,
  .nav__mobile-row:focus,
  .nav__mobile-group>summary:hover,
  .nav__mobile-group>summary:focus{
    background:#4a4742!important;
    color:var(--gold-light)!important;
  }
  .nav__mobile-sublist{
    padding:0!important;
    margin:0!important;
    background:#383631!important;
  }
  .nav__mobile-sublist a{
    display:block!important;
    padding:12px 22px 12px 40px!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
    color:#f3f0e8!important;
    background:#383631!important;
    font-family:var(--f-body)!important;
    font-size:.80rem!important;
    line-height:1.25!important;
    font-weight:600!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    text-decoration:none!important;
  }
  .nav__mobile-sublist a:hover,
  .nav__mobile-sublist a:focus{
    background:#403d38!important;
    color:var(--gold-light)!important;
  }
  .nav__mobile-parent-link{
    color:var(--gold-light)!important;
  }
  .nav__mobile-cta{
    display:block!important;
    flex:0 0 auto!important;
    margin:14px 20px calc(16px + env(safe-area-inset-bottom))!important;
    padding:15px 18px!important;
    text-align:center!important;
    border-radius:7px!important;
    background:var(--gold)!important;
    color:#2e2a24!important;
    font-family:var(--f-body)!important;
    font-size:.9rem!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    text-decoration:none!important;
  }
}

@media (max-width:560px){
  .nav__logo{width:184px!important;max-width:calc(100vw - 86px)!important;}
  .nav__logo img,
  .nav__mobile-logo img{width:184px!important;max-height:52px!important;}
  .hero h1{font-size:clamp(1.85rem,8vw,2.55rem)!important;line-height:1.07!important;}
  .hero__tagline{font-size:clamp(1.1rem,4.7vw,1.42rem)!important;line-height:1.14!important;}
}

/* ============================================================
   FINAL FIX: Mobile Navigation sichtbar und unabhängig vom Footer
   ============================================================ */
@media (max-width: 980px){
  html.mobile-nav-open,
  body.nav-open{overflow:hidden!important;}
  .nav{z-index:2147483000!important;}
  .nav__links,
  .nav__cta,
  .nav__search{display:none!important;}
  .nav__burger{
    display:flex!important;
    flex-direction:column!important;
    justify-content:space-between!important;
    width:30px!important;
    height:24px!important;
    border:0!important;
    background:transparent!important;
    padding:0!important;
    margin:0!important;
    cursor:pointer!important;
    z-index:2147483200!important;
  }
  .nav__burger span{display:block!important;width:100%!important;height:2px!important;background:var(--gold)!important;border-radius:2px!important;}
  .nav__burger.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg)!important;}
  .nav__burger.is-open span:nth-child(2){opacity:0!important;}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)!important;}

  .nav__mobile{
    position:fixed!important;
    top:0!important;
    right:0!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    left:0!important;
    z-index:2147483100!important;
    display:flex!important;
    flex-direction:column!important;
    background:#3f3d39!important;
    color:#f3f0e8!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translateX(105%)!important;
    pointer-events:none!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    border:3px solid #27313a!important;
    box-shadow:0 20px 80px rgba(0,0,0,.6)!important;
    transition:transform .24s ease, opacity .24s ease, visibility .24s ease!important;
  }
  .nav__mobile.is-open,
  .nav.is-mobile-open .nav__mobile,
  body.nav-open .nav__mobile,
  html.mobile-nav-open .nav__mobile{
    opacity:1!important;
    visibility:visible!important;
    transform:translateX(0)!important;
    pointer-events:auto!important;
  }
  .nav__mobile-head{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    min-height:72px!important;
    padding:9px 18px!important;
    background:#3a3834!important;
    border-bottom:3px solid var(--gold)!important;
    position:relative!important;
    z-index:2!important;
  }
  .nav__mobile-logo{display:block!important;width:190px!important;max-width:calc(100vw - 128px)!important;padding:0!important;background:transparent!important;}
  .nav__mobile-logo img{display:block!important;width:190px!important;height:auto!important;max-height:54px!important;object-fit:contain!important;object-position:left center!important;}
  .nav__mobile-search-link{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;margin-left:auto!important;padding:0!important;color:#f3f0e8!important;background:transparent!important;text-decoration:none!important;font-size:1.55rem!important;}
  .nav__mobile-close{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--gold)!important;font-size:2.1rem!important;line-height:1!important;cursor:pointer!important;}
  .nav__mobile-list{
    display:block!important;
    flex:1 1 auto!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    background:#44423e!important;
    padding:0!important;
    margin:0!important;
  }
  .nav__mobile-row,
  .nav__mobile-group>summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:54px!important;
    box-sizing:border-box!important;
    padding:16px 22px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    color:#f3f0e8!important;
    background:#44423e!important;
    font-family:var(--f-body)!important;
    font-size:.94rem!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    text-transform:none!important;
    text-decoration:none!important;
    cursor:pointer!important;
    list-style:none!important;
    white-space:normal!important;
  }
  .nav__mobile-group{display:block!important;margin:0!important;padding:0!important;background:#44423e!important;}
  .nav__mobile-group>summary::-webkit-details-marker{display:none!important;}
  .nav__mobile-group>summary::after{content:'+';color:var(--gold);font-size:1.4rem;line-height:1;font-weight:300;margin-left:16px;}
  .nav__mobile-group[open]>summary::after{content:'–';}
  .nav__mobile-sublist{display:block!important;padding:0!important;margin:0!important;background:#383631!important;}
  .nav__mobile-sublist a{display:block!important;padding:12px 22px 12px 40px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;color:#f3f0e8!important;background:#383631!important;font-family:var(--f-body)!important;font-size:.80rem!important;line-height:1.25!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-decoration:none!important;white-space:normal!important;}
  .nav__mobile-parent-link{color:var(--gold-light)!important;}
  .nav__mobile-cta{display:block!important;flex:0 0 auto!important;margin:14px 20px calc(16px + env(safe-area-inset-bottom))!important;padding:15px 18px!important;text-align:center!important;border-radius:7px!important;background:var(--gold)!important;color:#2e2a24!important;font-family:var(--f-body)!important;font-size:.9rem!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-decoration:none!important;}
}

/* ============================================================
   FINALER FIX: Mobile Navigation nach DJ-Rico-Logik
   eigenstaendige Klassen, keine alten nav__mobile-Konflikte
   ============================================================ */
.nav__mobile{display:none!important;}
.cerny-mobile-menu{display:none;}
@media (max-width:980px){
  html.cerny-menu-open,
  body.cerny-menu-open{overflow:hidden!important;}
  .nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:2147483000!important;background:#34302b!important;border-bottom:2px solid var(--gold,#c4a15d)!important;}
  .nav__inner{height:70px!important;min-height:70px!important;max-width:none!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;}
  .nav__links,
  .nav__cta,
  .nav__search{display:none!important;}
  .nav__logo{display:flex!important;align-items:center!important;width:190px!important;max-width:calc(100vw - 92px)!important;min-width:0!important;overflow:visible!important;}
  .nav__logo img{display:block!important;width:190px!important;max-width:100%!important;max-height:54px!important;height:auto!important;object-fit:contain!important;object-position:left center!important;}
  .nav__burger{display:flex!important;flex-direction:column!important;justify-content:space-between!important;width:30px!important;height:24px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;cursor:pointer!important;z-index:2147483300!important;}
  .nav__burger span{display:block!important;width:100%!important;height:2px!important;background:var(--gold,#c4a15d)!important;border-radius:2px!important;transition:transform .2s ease,opacity .2s ease!important;}
  .nav__burger.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg)!important;}
  .nav__burger.is-open span:nth-child(2){opacity:0!important;}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)!important;}

  .cerny-mobile-menu{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    z-index:2147483100!important;
    background:#44423e!important;
    color:#f3f0e8!important;
    transform:translateX(105%)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .24s ease,opacity .24s ease,visibility .24s ease!important;
    box-shadow:0 20px 80px rgba(0,0,0,.55)!important;
    overflow:hidden!important;
  }
  .cerny-mobile-menu.is-open{transform:translateX(0)!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
  .cerny-mobile-menu__head{display:flex!important;align-items:center!important;gap:14px!important;min-height:70px!important;padding:9px 18px!important;background:#34302b!important;border-bottom:3px solid var(--gold,#c4a15d)!important;box-sizing:border-box!important;}
  .cerny-mobile-menu__logo{display:flex!important;align-items:center!important;width:190px!important;max-width:calc(100vw - 128px)!important;min-width:0!important;text-decoration:none!important;background:transparent!important;}
  .cerny-mobile-menu__logo img{display:block!important;width:190px!important;max-width:100%!important;max-height:54px!important;height:auto!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .cerny-mobile-menu__search{display:flex!important;align-items:center!important;justify-content:center!important;margin-left:auto!important;width:38px!important;height:38px!important;color:#f3f0e8!important;background:transparent!important;text-decoration:none!important;font-size:1.55rem!important;line-height:1!important;}
  .cerny-mobile-menu__close{display:flex!important;align-items:center!important;justify-content:center!important;width:38px!important;height:38px!important;padding:0!important;border:0!important;background:transparent!important;color:var(--gold,#c4a15d)!important;font-size:2.1rem!important;line-height:1!important;cursor:pointer!important;}
  .cerny-mobile-menu__list{height:calc(100% - 70px - 92px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;background:#44423e!important;}
  .cerny-mobile-menu__row,
  .cerny-mobile-menu__group>summary{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;min-height:54px!important;box-sizing:border-box!important;padding:16px 22px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;color:#f3f0e8!important;background:#44423e!important;font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;font-size:.94rem!important;font-weight:700!important;letter-spacing:.02em!important;text-transform:none!important;text-decoration:none!important;cursor:pointer!important;list-style:none!important;}
  .cerny-mobile-menu__group{display:block!important;margin:0!important;padding:0!important;background:#44423e!important;}
  .cerny-mobile-menu__group>summary::-webkit-details-marker{display:none!important;}
  .cerny-mobile-menu__group>summary::after{content:'+';color:var(--gold,#c4a15d);font-size:1.4rem;line-height:1;font-weight:300;margin-left:16px;}
  .cerny-mobile-menu__group[open]>summary::after{content:'–';}
  .cerny-mobile-menu__sublist{display:block!important;padding:0!important;margin:0!important;background:#383631!important;}
  .cerny-mobile-menu__sublist a{display:block!important;padding:12px 22px 12px 40px!important;border-bottom:1px solid rgba(255,255,255,.06)!important;color:#f3f0e8!important;background:#383631!important;font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;font-size:.80rem!important;line-height:1.25!important;font-weight:600!important;letter-spacing:.08em!important;text-transform:uppercase!important;text-decoration:none!important;white-space:normal!important;}
  .cerny-mobile-menu__overview{color:var(--gold-light,#e3c98f)!important;}
  .cerny-mobile-menu__cta-wrap{position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:14px 20px calc(16px + env(safe-area-inset-bottom))!important;background:#44423e!important;border-top:1px solid rgba(255,255,255,.08)!important;}
  .cerny-mobile-menu__cta{display:block!important;width:100%!important;box-sizing:border-box!important;padding:15px 18px!important;text-align:center!important;border-radius:7px!important;background:var(--gold,#c4a15d)!important;color:#2e2a24!important;font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;font-size:.9rem!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-decoration:none!important;}
}
@media (max-width:560px){
  .nav__inner{height:70px!important;padding:0 16px!important;}
  .nav__logo,
  .cerny-mobile-menu__logo{width:176px!important;}
  .nav__logo img,
  .cerny-mobile-menu__logo img{width:176px!important;max-height:50px!important;}
}

/* ============================================================
   FINAL: Mobile Navigation stabil wie DJ Rico
   - echtes nav__mobile-Panel
   - öffnet über .open / .is-open / body.nav-open
   - keine unsichtbaren transform-Konflikte
   ============================================================ */
.cerny-mobile-menu{display:none!important;}
.nav__mobile-search-trigger{display:none;}

@media (max-width:980px){
  html.nav-open,
  body.nav-open{overflow:hidden!important;}
  .nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:99990!important;background:#34302b!important;border-bottom:2px solid var(--gold,#c4a15d)!important;}
  .nav__inner{height:70px!important;min-height:70px!important;max-width:none!important;padding:0 18px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;}
  .nav__logo{display:flex!important;align-items:center!important;width:190px!important;max-width:calc(100vw - 126px)!important;min-width:0!important;overflow:visible!important;}
  .nav__logo img{display:block!important;width:190px!important;max-width:100%!important;max-height:54px!important;height:auto!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;}
  .nav__links,
  .nav__cta,
  .nav__search{display:none!important;}
  .nav__mobile-search-trigger{display:flex!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;margin-left:auto!important;color:#f3f0e8!important;background:transparent!important;text-decoration:none!important;font-size:1.48rem!important;line-height:1!important;}
  .nav__burger,
  .nav__toggle{display:flex!important;flex-direction:column!important;justify-content:space-between!important;width:30px!important;height:24px!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;cursor:pointer!important;z-index:100010!important;}
  .nav__burger span,
  .nav__toggle span{display:block!important;width:100%!important;height:2px!important;background:var(--gold,#c4a15d)!important;border-radius:2px!important;transition:transform .2s ease,opacity .2s ease!important;}
  .nav__burger.is-open span:nth-child(1),
  .nav__toggle.is-open span:nth-child(1){transform:translateY(11px) rotate(45deg)!important;}
  .nav__burger.is-open span:nth-child(2),
  .nav__toggle.is-open span:nth-child(2){opacity:0!important;}
  .nav__burger.is-open span:nth-child(3),
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-11px) rotate(-45deg)!important;}

  .nav__mobile{
    display:none!important;
    position:fixed!important;
    top:70px!important;
    left:0!important;
    right:0!important;
    bottom:calc(64px + env(safe-area-inset-bottom))!important;
    z-index:99980!important;
    background:#44423e!important;
    color:#f3f0e8!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:0!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    box-shadow:0 20px 70px rgba(0,0,0,.50)!important;
  }
  .nav__mobile.open,
  .nav__mobile.is-open,
  body.nav-open .nav__mobile,
  html.nav-open .nav__mobile{display:block!important;}
  .nav__mobile-list{display:block!important;margin:0!important;padding:0!important;background:#44423e!important;}
  .nav__mobile-row,
  .nav__mobile-group>summary{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-height:54px!important;
    padding:16px 22px!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    color:#f3f0e8!important;
    background:#44423e!important;
    font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;
    font-size:.96rem!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:.02em!important;
    text-transform:none!important;
    text-decoration:none!important;
    list-style:none!important;
    cursor:pointer!important;
  }
  .nav__mobile-group{display:block!important;margin:0!important;padding:0!important;background:#44423e!important;}
  .nav__mobile-group>summary::-webkit-details-marker{display:none!important;}
  .nav__mobile-group>summary::after{content:'+';color:var(--gold,#c4a15d);font-size:1.45rem;font-weight:300;line-height:1;margin-left:16px;}
  .nav__mobile-group[open]>summary::after{content:'–';}
  .nav__mobile-sublist{display:block!important;margin:0!important;padding:0!important;background:#383631!important;}
  .nav__mobile-sublist a{
    display:block!important;
    padding:13px 22px 13px 40px!important;
    border-bottom:1px solid rgba(255,255,255,.06)!important;
    color:#f3f0e8!important;
    background:#383631!important;
    font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;
    font-size:.82rem!important;
    line-height:1.25!important;
    font-weight:600!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    text-decoration:none!important;
    white-space:normal!important;
  }
  .nav__mobile-sublist a.nav__mobile-parent-link{color:var(--gold-light,#e3c98f)!important;}
  .nav__mobile-row:hover,
  .nav__mobile-row:focus,
  .nav__mobile-group>summary:hover,
  .nav__mobile-group>summary:focus,
  .nav__mobile-sublist a:hover,
  .nav__mobile-sublist a:focus{background:#4a4742!important;color:var(--gold-light,#e3c98f)!important;}
  .nav__mobile-cta{display:block!important;margin:18px 22px 24px!important;}
  .nav__mobile-cta .btn,
  .nav__mobile-cta a{display:block!important;width:100%!important;box-sizing:border-box!important;text-align:center!important;border-radius:7px!important;background:var(--gold,#c4a15d)!important;color:#2e2a24!important;padding:15px 18px!important;font-family:var(--f-body,Arial,Helvetica,sans-serif)!important;font-size:.9rem!important;font-weight:800!important;letter-spacing:.04em!important;text-transform:uppercase!important;text-decoration:none!important;}
  .hero{padding-top:calc(70px + 16px)!important;}
}

@media (max-width:560px){
  .nav__inner{height:70px!important;padding:0 16px!important;}
  .nav__logo{width:176px!important;max-width:calc(100vw - 118px)!important;}
  .nav__logo img{width:176px!important;max-height:50px!important;}
}

/* ============================================================
   Desktop Navigation: Dropdown-Pfeile neben dem Wort + Suche sichtbar
   ============================================================ */
@media (min-width:981px){
  .nav__inner{
    max-width:1560px!important;
    gap:clamp(14px,1.15vw,24px)!important;
  }
  .nav__logo{
    min-width:clamp(148px,12vw,205px)!important;
    max-width:clamp(148px,12vw,205px)!important;
  }
  .nav__logo img{
    width:clamp(148px,12vw,205px)!important;
    max-height:56px!important;
  }
  .nav__links{
    flex:1 1 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(16px,1.25vw,27px)!important;
    min-width:0!important;
  }
  .nav__links>li{
    display:flex!important;
    align-items:center!important;
    position:relative!important;
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  .nav__links>li>a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    white-space:nowrap!important;
    line-height:1!important;
  }
  .nav__item--has-children>a::after{
    content:'▾'!important;
    position:static!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    height:auto!important;
    margin-left:.55rem!important;
    padding:0!important;
    background:transparent!important;
    color:var(--gold-light,#e3c98f)!important;
    font-size:1rem!important;
    line-height:1!important;
    opacity:1!important;
    transform:none!important;
    border:0!important;
  }
  .nav__item--has-children>a:hover::after,
  .nav__item--has-children>a.is-active::after{
    color:var(--gold,#c4a15d)!important;
  }
  .nav__search{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:50%!important;
    overflow:visible!important;
    background:transparent!important;
    backdrop-filter:none!important;
  }
  .nav__search input{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    border:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
  }
  .nav__search button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:42px!important;
    height:42px!important;
    border:0!important;
    border-radius:50%!important;
    background:transparent!important;
    color:#f3f0e8!important;
    font-size:1.35rem!important;
    line-height:1!important;
    cursor:pointer!important;
    text-shadow:0 2px 10px rgba(0,0,0,.45)!important;
  }
  .nav__search button:hover,
  .nav__search button:focus-visible{
    color:var(--gold-light,#e3c98f)!important;
    background:rgba(255,255,255,.08)!important;
    outline:none!important;
  }
  .nav__cta{
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .nav__inner{gap:12px!important;padding-left:18px!important;padding-right:18px!important;}
  .nav__links{gap:13px!important;}
  .nav__links a{font-size:.62rem!important;letter-spacing:.09em!important;}
  .nav__item--has-children>a::after{font-size:.88rem!important;margin-left:.38rem!important;}
  .nav__search{flex-basis:34px!important;width:34px!important;height:34px!important;}
  .nav__search button{width:34px!important;height:34px!important;font-size:1.16rem!important;}
  .nav__cta{font-size:.61rem!important;letter-spacing:.10em!important;padding:10px 12px!important;}
}

/* ============================================================
   Desktop Navigation: Hover-Kontrast auf dunklem Header
   ============================================================ */
@media (min-width:981px){
  .nav--dark .nav__links > li > a:hover,
  .nav--dark .nav__links > li > a:focus-visible,
  .nav--dark .nav__links > li:hover > a,
  .nav--dark .nav__links > li:focus-within > a{
    color:var(--gold-light,#e3c98f)!important;
    text-shadow:0 1px 10px rgba(0,0,0,.55)!important;
  }
  .nav--dark .nav__links > li > a:hover::after,
  .nav--dark .nav__links > li > a:focus-visible::after,
  .nav--dark .nav__links > li:hover > a::after,
  .nav--dark .nav__links > li:focus-within > a::after{
    background:var(--gold-light,#e3c98f)!important;
  }
  .nav--dark .nav__dropdown a:hover,
  .nav--dark .nav__dropdown a:focus-visible,
  .nav--dark .nav__dropdown a.is-active{
    color:var(--gold-light,#e3c98f)!important;
    background:rgba(255,255,255,.08)!important;
    outline:none!important;
  }
}




/* ============================================================
   Startseite-Korrektur: alter Inhalt im neuen Design
   ============================================================ */

/* Logo ohne Kontur.
   Bis 09.09.2026 lag hier eine Kontur aus fuenf Schlagschatten - sie war noetig,
   weil auf der hellen Navigation dasselbe helle Logo stand und sonst kaum zu
   sehen war. Seit es eine eigene dunkle Logo-Datei gibt (Wechsel in nav.php und
   weiter unten in dieser Datei), ist die Kontur ueberfluessig; sie hat das
   dunkle Logo nur unsauber wirken lassen. */
.nav__logo img{filter:none}

/* Einleitungsbild der Startseite: eckig, 4:3, wie die uebrigen Bild/Text-Bloecke. */
#freunde .about-split__img{
  aspect-ratio:4/3;
  border-radius:var(--r-lg);
  box-shadow:0 24px 70px rgba(46,42,36,.16);
}
#freunde .about-split__img img{object-position:center center;}

/* "Ueber mich": Reise-Abschnitt hat Bild/Text-Block und darunter die Galerie. */
#reisen .about-split + .section-header{margin-top:clamp(44px,6vw,72px);}

/* Links im Fließtext sichtbar machen. Global gilt a{color:inherit;text-decoration:none},
   dadurch waren interne Verlinkungen im Text von normalem Text nicht zu unterscheiden. */
.about-split__text p a,
.about-split__text li a,
.loc-intro p a,
.loc-intro li a,
.cms-text p a,
.cms-text li a,
.highlight-box p a,
.highlight-box li a{
  color:var(--gold-dark);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(140,111,62,.45);
}
.about-split__text p a:hover,
.about-split__text li a:hover,
.loc-intro p a:hover,
.loc-intro li a:hover,
.cms-text p a:hover,
.cms-text li a:hover,
.highlight-box p a:hover,
.highlight-box li a:hover{
  color:var(--charcoal);
  text-decoration-color:currentColor;
}
.bg-dark .about-split__text p a,
.bg-dark .about-split__text li a,
.bg-dark .cms-text p a,
.bg-dark .cms-text li a{
  color:var(--gold);
  text-decoration-color:rgba(198,163,98,.55);
}
.bg-dark .about-split__text p a:hover,
.bg-dark .cms-text p a:hover{color:#fff;text-decoration-color:currentColor;}

/* Dienstleistungen: saubere, einheitliche Bildflächen ohne ungewollten Zuschnitt */
#leistungen .service-card__img{
  aspect-ratio:3/2;
  min-height:0;
}
#leistungen .service-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
#leistungen .service-card__img::after{inset:10px;}

/* Authentische Hochzeitsfotos */
#reportage .triple-grid{align-items:start;}
#reportage .triple-item__img{
  width:100%;
  max-width:380px;
  aspect-ratio:3/2;
  margin:0 auto 1.4rem;
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
#reportage .triple-item__img::after{
  border-radius:var(--r);
  inset:14px;
}
#reportage .triple-item__img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Startseiten-Galerie: alle Bilder aus dem alten ZIP als hochwertiges Raster */
#galerie .cms-photoalbum{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
#galerie .cms-photoalbum__item{
  position:relative;
  display:block;
  overflow:hidden;
  min-height:190px;
  border-radius:0;
  background:#e9e1d5;
}
#galerie .cms-photoalbum__item:nth-child(1),
#galerie .cms-photoalbum__item:nth-child(6){grid-column:span 2;grid-row:span 2;}
#galerie .cms-photoalbum__item::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.72);
  pointer-events:none;
  z-index:2;
}
#galerie .cms-photoalbum__item img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transition:none;
}
#galerie .cms-photoalbum__item:hover img{transform:none;}

/* Vollständige Hochzeitsreportagen: großzügige, responsive Bildstrecken */
.reportage-gallery .cms-photoalbum{display:block;columns:4;column-gap:10px;margin-top:0;}
.reportage-gallery .cms-text + .cms-photoalbum,
.reportage-gallery .cms-button + .cms-photoalbum{margin-top:clamp(20px,3vw,32px);}
.reportage-gallery .cms-photoalbum__item{
  display:inline-block;
  width:100%;
  margin:0 0 10px;
  overflow:hidden;
  background:var(--cream);
  break-inside:avoid;
}
.reportage-gallery .cms-photoalbum__item:nth-child(9n+1),
.reportage-gallery .cms-photoalbum__item:nth-child(9n+6){grid-column:auto;grid-row:auto;}
.reportage-gallery .cms-photoalbum__item img{
  width:100%;
  height:auto;
  min-height:0;
  object-fit:contain;
  display:block;
  transition:transform .7s ease;
}
.reportage-gallery .cms-photoalbum__item:hover img{transform:scale(1.035);}

#einleitung .about-split__img{aspect-ratio:auto;}
#einleitung .about-split__img img{width:100%;height:auto;object-fit:contain;display:block;}

@media (max-width:900px){
  .reportage-gallery .cms-photoalbum{columns:2;}
}
@media (max-width:560px){
  .reportage-gallery .cms-photoalbum{columns:1;column-gap:0;}
}

/* Google Bewertungen */
.rc-reviews{max-width:1100px;margin:0 auto;}
.rc-reviews__summary{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  margin-bottom:28px;
  color:var(--ink,#2e2a24);
}
.rc-reviews__summary strong{font-family:var(--font-serif);font-size:3.1rem;font-weight:400;line-height:1;}
.rc-reviews__summary span{color:var(--gold,#b99354);letter-spacing:.08em;}
.rc-reviews__summary em{font-style:normal;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--muted,#84776a);}
.rc-review-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.rc-review-grid article{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(185,147,84,.26);
  padding:24px;
  box-shadow:0 18px 50px rgba(46,42,36,.07);
}
.rc-review-grid b{display:block;font-family:var(--font-serif);font-size:1.2rem;font-weight:500;margin-bottom:.35rem;}
.rc-review-grid span{display:block;color:var(--gold,#b99354);letter-spacing:.08em;margin-bottom:.8rem;}
.rc-review-grid p{margin:0;color:var(--muted,#6f665b);}

@media (max-width:900px){
  #galerie .cms-photoalbum{grid-template-columns:repeat(2,minmax(0,1fr));}
  #galerie .cms-photoalbum__item:nth-child(n){grid-column:span 1;grid-row:span 1;min-height:150px;}
  .rc-review-grid{grid-template-columns:1fr;}
}

/* ============================================================
   Startseite 2026: einheitliche Breiten, Pakete, Bildfokus, Video
   ============================================================ */
html{font-size:16px;}

/* Der Hero füllt auf jeder Gerätegröße den sichtbaren Bildschirm. */
.cms-hero{
  min-height:100vh!important;
  min-height:100svh!important;
}


/* Preise und Ablauf verwenden dieselbe innere Breite. */
.pricing-pair{width:100%;max-width:1040px;margin-inline:auto;}
/* Der Ablauf-Block liegt exakt auf Breite und Spaltenraster des Preisblocks. */
#ablauf .process-grid{width:100%;max-width:var(--max);margin-inline:auto;gap:18px;}
.pricing-pair--four{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;max-width:var(--max);}
.pricing-pair--four .pricing-box{padding:34px 24px;}
.pricing-pair--four .pricing-box__title{font-size:1.45rem;}
.pricing-pair--four .pricing-box__price{font-size:clamp(2rem,3vw,2.8rem);}
.pricing-pair--four .pricing-box__list li{font-size:.9rem;padding-top:12px;padding-bottom:12px;}
.pricing-pair--four .btn{padding:13px 18px;font-size:.68rem;}

/* Die Ablauf-Schritte tragen sich über "Schritt I.-IV." – keine Icon-Kreise. */
.process-step__icon{display:none;}

/* Eigener Bildbereich unter der Reportage. Quadratische Vorschau,
   Klick oeffnet ueber die Lightbox das vollstaendige Bild (1600 px). */
#reportage-galerie .cms-photoalbum{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  width:100%;max-width:var(--max);margin:0 auto;
}
#reportage-galerie .cms-photoalbum__item{
  aspect-ratio:1/1;
  border-radius:var(--r-lg);
  background:var(--beige);
  box-shadow:var(--shadow-sm);
  cursor:zoom-in;
}
#reportage-galerie .cms-photoalbum__item img{
  object-fit:cover;object-position:center center;
}
/* Bildausschnitt dort verschieben, wo die Personen nicht mittig stehen. */
#reportage-galerie .cms-photoalbum__item:nth-child(3) img{object-position:45% center;}
#reportage-galerie .cms-photoalbum__item:nth-child(4) img{object-position:65% center;}
#reportage-galerie .cms-photoalbum__item:nth-child(5) img{object-position:70% center;}
/* Der Streifen laeuft erst ab Tablet quer (1024 px). Darunter wird der ganze
   Abschnitt ausgeblendet; weil die Bilder loading="lazy" tragen und in einem
   display:none-Container nie in den Viewport kommen, laedt das Handy sie nicht. */
@media (max-width:1023.98px){
  #reportage-galerie{display:none!important;}
}

/* Gesichter und Personen in den Leistungskarten sowie im Album höher priorisieren. */
#leistungen .service-card__img img{object-position:center 28%;}
#leistungen .service-card:nth-child(1) .service-card__img img{object-position:center 34%;}
#leistungen .service-card:nth-child(4) .service-card__img img{object-position:center center;}
#galerie .cms-photoalbum__item img{object-position:center center;}
/* Bei diesen beiden Hochformat-/Personenmotiven muss der sichtbare
   Ausschnitt oben beginnen, damit Köpfe nicht aus dem Rahmen fallen. */
#galerie .cms-photoalbum__item:nth-child(5) img,
#galerie .cms-photoalbum__item:nth-child(10) img{
  object-position:center top;
}

/* Responsive Vimeo-Einbettung; die iframes selbst werden erst im Viewport geladen. */
.home-video-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,34px);width:100%;max-width:1100px;margin:0 auto;
}
.home-video{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--charcoal);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
.home-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

@media (max-width:1050px){
  .pricing-pair--four{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  #freunde .about-split{grid-template-columns:1fr;}
  .pricing-pair--four,.home-video-grid{grid-template-columns:1fr;}
  .pricing-pair--four{max-width:620px;}
  /* Mobil: einspaltig, jedes Bild exakt auf der Inhaltsbreite der Seite. */
  #reportage .triple-grid,
  #reportage .triple-grid--small{
    grid-template-columns:1fr;
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    transform:none;
    column-gap:0;
    row-gap:32px;
  }
  #reportage .triple-item__img,
  #reportage .triple-grid--small .triple-item__img{
    width:100%;
    max-width:none;
    aspect-ratio:3/2;
    margin-left:0;
    margin-right:0;
  }
  #reportage .triple-item__img img{
    object-fit:cover;
    object-position:center center;
  }
  /* Alle Inhaltsbilder mobil auf derselben Breite. */
  .about-split__img,
  #freunde .about-split__img{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
  }
  .about-split__buttons{flex-direction:column;}
  .about-split__buttons .btn{width:100%;}
}
@media (max-width:560px){
  #galerie .cms-photoalbum{grid-template-columns:1fr;}
}

/* Startseiten-Sonderlösung: Im Hero steht ausschließlich das Foto.
   Die redaktionellen Hero-Inhalte folgen als eigenständiger Bereich darunter. */
.cms-hero.cms-hero--image-only{
  min-height:100vh!important;
  min-height:100svh!important;
  padding:0!important;
  display:block;
}
.cms-hero--image-only .cms-hero__bg{
  position:absolute;
  inset:0;
}
.cms-hero-intro{
  padding:clamp(44px,5vw,72px) 0;
  color:var(--charcoal);
  text-align:center;
}
.cms-hero__content--below{
  position:relative;
  max-width:1050px;
  color:var(--charcoal);
  text-align:center;
}
.cms-hero__content--below .hero__eyebrow{
  color:var(--gold-dark);
  border-bottom-color:rgba(156,120,56,.35);
  margin-bottom:clamp(18px,2vw,28px);
  text-shadow:none;
}
.cms-hero__content--below h1{
  max-width:980px;
  margin:0 auto .35em;
  color:var(--charcoal);
  font-family:var(--f-display);
  font-size:clamp(2.25rem,4.5vw,4.6rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
  text-shadow:none;
}
.cms-hero__content--below .hero__tagline{
  margin-bottom:1rem;
  color:var(--gold-dark);
  font-family:var(--f-display);
  font-size:clamp(1.2rem,2vw,1.65rem);
  font-style:italic;
  font-weight:400;
  /* !important, weil .hero__tagline weiter oben global einen Schatten fuer
     Text auf dem Hero-Bild setzt. Hier steht der Text auf hellem Grund. */
  text-shadow:none!important;
}
.cms-hero__content--below .hero__sub{
  max-width:780px;
  margin:0 auto clamp(24px,3vw,38px);
  color:var(--text-muted);
  font-family:var(--f-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.75;
  text-shadow:none;
}
.cms-hero__content--below .cms-hero__features{
  max-width:900px;
  margin:0 auto clamp(24px,3vw,36px);
}
.cms-hero__content--below .hero__feature{
  background:rgba(255,255,255,.72);
  border:1px solid var(--gold-border);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cms-hero__content--below .hero__feature:hover{
  background:#fff;
  border-color:var(--gold);
}
.cms-hero__content--below .hero__feature strong{
  color:var(--charcoal);
  font-family:var(--f-display);
  font-weight:500;
  text-shadow:none;
}
.cms-hero__content--below .hero__feature small{
  color:var(--gold-dark);
  font-weight:500;
  text-shadow:none;
}
.cms-hero__content--below .cms-hero__buttons{
  gap:12px;
  margin:0 auto!important;
}
.cms-hero__content--below .cms-hero__buttons .btn{
  font-family:var(--f-body);
  font-weight:500;
  text-shadow:none;
}
@media (max-width:760px){
  .cms-hero.cms-hero--image-only{
    min-height:100svh!important;
    padding:0!important;
  }
  .cms-hero-intro{padding:38px 0 44px;}
  .cms-hero__content--below h1{font-size:clamp(2rem,10vw,3rem);}
  .cms-hero__content--below .cms-hero__features{grid-template-columns:1fr;}
  .cms-hero__content--below .cms-hero__buttons .btn{flex:1 1 100%;}
}

/* Fallback für Server mit verzögertem PHP-/OPcache-Refresh:
   Auch das ältere Hero-Markup der Startseite wird zuverlässig in eine
   reine Bildfläche plus darunterliegenden Textbereich umgebaut. #freunde
   existiert nur auf der Startseite und begrenzt die Regel auf diese Seite. */
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only){
  min-height:0!important;
  padding:100vh 0 0!important;
  padding:100svh 0 0!important;
  display:block;
  overflow:hidden;
  background:var(--cream);
  color:var(--charcoal);
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) > .cms-hero__bg{
  position:absolute;
  inset:0 0 auto;
  height:100vh;
  height:100svh;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) > .cms-hero__content{
  position:relative;
  max-width:1050px;
  padding-top:clamp(44px,5vw,72px);
  padding-bottom:clamp(44px,5vw,72px);
  color:var(--charcoal);
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__eyebrow{
  color:var(--gold-dark);
  border-bottom-color:rgba(156,120,56,.35);
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) h1{
  max-width:980px;
  margin:0 auto .35em;
  color:var(--charcoal);
  font-family:var(--f-display);
  font-size:clamp(2.25rem,4.5vw,4.6rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.025em;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__tagline{
  color:var(--gold-dark);
  font-family:var(--f-display);
  font-style:italic;
  font-weight:400;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__sub{
  margin-left:auto;
  margin-right:auto;
  color:var(--text-muted);
  font-family:var(--f-body);
  font-weight:400;
  line-height:1.75;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__feature{
  background:rgba(255,255,255,.72);
  border:1px solid var(--gold-border);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__feature strong{
  color:var(--charcoal);
  font-family:var(--f-display);
  font-weight:500;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .hero__feature small{
  color:var(--gold-dark);
  font-weight:500;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .cms-hero__buttons .btn{
  font-family:var(--f-body);
  font-weight:500;
  text-shadow:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .cms-hero__buttons .btn--ghost-light{
  border-color:var(--charcoal);
  background:transparent;
  color:var(--charcoal);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) .cms-hero__buttons .btn--ghost-light:hover{
  background:var(--charcoal);
  color:var(--cream);
}
@media (max-width:760px){
  main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) > .cms-hero__content{
    padding-top:38px;
    padding-bottom:44px;
  }
  main:has(> #freunde) > .cms-hero:not(.cms-hero--image-only) h1{
    font-size:clamp(2rem,10vw,3rem);
  }
}


/* ==========================================================================
   Mobile-Hero, alle Seiten AUSSER der Startseite (main:has(> #freunde)).
   Ueberschrift und Text stehen oben, die Fakten klein in einer Reihe unten,
   der CTA darunter. Kein Farbschleier ueber dem Bild - die Lesbarkeit kommt
   allein ueber die Textschatten.
   ========================================================================== */
@media (max-width:640px){
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only){
    align-items:stretch;
    padding-bottom:150px;
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) > .cms-hero__bg::after{
    background:linear-gradient(180deg,rgba(30,25,20,.10) 0%,rgba(30,25,20,.04) 40%,rgba(30,25,20,.26) 100%);
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) > .cms-hero__content{
    display:flex;flex-direction:column;justify-content:flex-start;
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) h1,
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__tagline{
    text-shadow:var(--hero-shadow-lead);
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__sub{
    text-shadow:var(--hero-shadow-small);
    margin-bottom:1.4rem;
  }
  /* Fakten: nach unten geschoben, klein, dreispaltig, ohne Kaesten. */
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__features{
    margin-top:auto;margin-bottom:1.1rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;max-width:none;
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__feature{
    padding:9px 6px;text-align:center;display:block;
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__feature strong{
    font-size:.88rem;line-height:1.2;margin-bottom:.2em;
    text-shadow:var(--hero-shadow-small);
  }
  main:not(:has(> #freunde)) > .cms-hero:not(.cms-hero--image-only) .hero__feature small{
    font-size:.53rem;letter-spacing:.12em;
    text-shadow:var(--hero-shadow-small);
  }
}

/* "Ueber mich" > Leistungsspektrum: quadratisches Quellbild (1252x1255) im
   4:3-Rahmen. Mit zentriertem Ausschnitt werden die Koepfe oben abgeschnitten,
   deshalb wird der Ausschnitt nach oben gezogen. */
#destination .about-split__img img{object-position:center 12%;}


/* ============================================================
   Hochzeitsvideo (/leistungen/video/)
   Lag bis 08.09.2026 als <style> in einem code-Baustein direkt in
   content/pages/leistungen-video.json. Dadurch war die Sektion im
   Backend nicht bearbeitbar. Selektoren sind ueber
   .page-leistungen-video-section auf diese Seite begrenzt,
   damit #paket und #videos auf anderen Seiten unberuehrt bleiben.
   ============================================================ */
#warum.page-leistungen-video-section > .cms-container,
#mehrwert.page-leistungen-video-section > .cms-container,
#filmarten.page-leistungen-video-section > .cms-container,
#videos.page-leistungen-video-section > .cms-container,
#drohne.page-leistungen-video-section > .cms-container {
  max-width:1120px;
}
#warum.page-leistungen-video-section .section-header,
#mehrwert.page-leistungen-video-section .section-header,
#filmarten.page-leistungen-video-section .section-header,
#videos.page-leistungen-video-section .section-header,
#drohne.page-leistungen-video-section .section-header {
  max-width:820px;margin-bottom:42px;
}
#warum.page-leistungen-video-section .content-body,
#mehrwert.page-leistungen-video-section .content-body,
#filmarten.page-leistungen-video-section .content-body,
#drohne.page-leistungen-video-section .content-body {
  max-width:860px;margin:0 auto 30px;text-align:left;
}
#warum.page-leistungen-video-section .content-body h3,
#mehrwert.page-leistungen-video-section .content-body h3,
#filmarten.page-leistungen-video-section .content-body h3,
#drohne.page-leistungen-video-section .content-body h3 {
  margin-top:1.8rem;
}
#warum.page-leistungen-video-section .content-body p,
#mehrwert.page-leistungen-video-section .content-body p,
#filmarten.page-leistungen-video-section .content-body p,
#drohne.page-leistungen-video-section .content-body p {
  font-size:1rem;line-height:1.8;
}
#warum.page-leistungen-video-section .cms-image,
#mehrwert.page-leistungen-video-section .cms-image,
#filmarten.page-leistungen-video-section .cms-image,
#drohne.page-leistungen-video-section .cms-image {
  max-width:860px;margin:36px auto 58px;
}
#warum.page-leistungen-video-section .cms-image img,
#mehrwert.page-leistungen-video-section .cms-image img,
#filmarten.page-leistungen-video-section .cms-image img,
#drohne.page-leistungen-video-section .cms-image img {
  width:100%;border-radius:10px;box-shadow:0 12px 40px rgba(46,42,36,.12);
}
#paket.page-leistungen-video-section .pricing-pair--single {
  max-width:720px;
}
#paket.page-leistungen-video-section .pricing-box {
  padding:54px 58px;
}
#videos.page-leistungen-video-section .video-grid {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:start;
}
#videos.page-leistungen-video-section .video-card__frame {
  position:relative;padding-top:56.25%;overflow:hidden;background:#000;
  border-radius:8px;box-shadow:0 10px 30px rgba(46,42,36,.12);
}
#videos.page-leistungen-video-section .video-card iframe {
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
#videos.page-leistungen-video-section .video-card h3 {
  margin:.75rem 0 .15rem;font-size:1.45rem;
}
#videos.page-leistungen-video-section .video-card p {
  margin:0;color:#6b6458;font-size:.93rem;
}
@media (max-width:900px){
  #videos.page-leistungen-video-section .video-grid {
    grid-template-columns:1fr;gap:30px;
  }
  #warum.page-leistungen-video-section > .cms-container,
  #mehrwert.page-leistungen-video-section > .cms-container,
  #filmarten.page-leistungen-video-section > .cms-container,
  #videos.page-leistungen-video-section > .cms-container,
  #drohne.page-leistungen-video-section > .cms-container {
    max-width:100%;padding-left:24px;padding-right:24px;
  }
  #warum.page-leistungen-video-section .content-body,
  #mehrwert.page-leistungen-video-section .content-body,
  #filmarten.page-leistungen-video-section .content-body,
  #drohne.page-leistungen-video-section .content-body,
  #warum.page-leistungen-video-section .cms-image,
  #mehrwert.page-leistungen-video-section .cms-image,
  #filmarten.page-leistungen-video-section .cms-image,
  #drohne.page-leistungen-video-section .cms-image {
    max-width:100%;
  }
  #paket.page-leistungen-video-section .pricing-box {
    padding:38px 28px;
  }
}

/* Foto-Seite, Abschnitt "Der Ablauf": Das Bild unter den vier Schritten laeuft
   ueber die volle Inhaltsbreite statt der globalen 780/980 px. */
#ablauf.page-leistungen-foto-section .cms-image{
  max-width:none;
  width:100%;
  margin-top:clamp(28px,3.5vw,48px);
}
#ablauf.page-leistungen-foto-section .cms-image img{
  display:block;
  width:100%;
  height:auto;
}

/* ============================================================
   Hero-Typografie, 08.09.2026 (Vorgabe Rico)
   - kein Textschatten
   - Ueberschrift und Tagline etwas kraeftiger (Cormorant Semibold liegt
     lokal unter /fonts/, wird also echt gezeichnet)
   - Textfarbe automatisch nach Motivhelligkeit. Die Klassen
     .cms-hero--text-mobile-dark und .cms-hero--text-desktop-dark setzt
     cms_hero_tone_classes() in includes/hero-contrast.php aus den beim
     Upload gemessenen Werten. Ohne Messwert bleibt die Schrift hell,
     also beim bisherigen Verhalten.
   - !important, weil die Patch-Bloecke ab Z. ~1412 Schatten und
     Schriftschnitt ihrerseits mit !important setzen.
   ============================================================ */
.cms-hero h1,
.cms-hero .hero__tagline,
.cms-hero .hero__sub,
.cms-hero .hero__eyebrow{
  text-shadow:none!important;
}
.cms-hero h1{font-weight:600!important}
.cms-hero .hero__tagline{font-weight:600!important}
.cms-hero .hero__sub{font-weight:500!important}

/* Helles Motiv im mobilen Textbereich (oben) -> dunkle Schrift. */
@media (max-width:640px){
  .cms-hero--text-mobile-dark h1,
  .cms-hero--text-mobile-dark .hero__tagline,
  .cms-hero--text-mobile-dark .hero__sub,
  .cms-hero--text-mobile-dark .hero__eyebrow{
    color:#2e2a24!important;
  }
}
/* Helles Motiv im Desktop-Textbereich (mittig) -> dunkle Schrift. */
@media (min-width:641px){
  .cms-hero--text-desktop-dark h1,
  .cms-hero--text-desktop-dark .hero__tagline,
  .cms-hero--text-desktop-dark .hero__sub,
  .cms-hero--text-desktop-dark .hero__eyebrow{
    color:#2e2a24!important;
  }
}

/* Empfohlenes Preisangebot hervorheben (08.09.2026) --------------------
   Beide Boxen behalten dieselbe Fuellfarbe; die Empfehlung bekommt nur
   einen goldenen Rahmen und eine Kennzeichnung auf der oberen Kante. */
.pricing-box--featured{
  position:relative;
  border:2px solid var(--gold);
  box-shadow:0 8px 28px rgba(184,150,90,.30);
}
.pricing-box__badge{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:inline-block;white-space:nowrap;
  background:var(--gold);color:var(--charcoal);
  padding:7px 18px;border-radius:999px;
  font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  box-shadow:0 3px 10px rgba(46,42,36,.22);
}
/* Auf den goldbraunen "dunklen" Abschnitten ist var(--gold) exakt die
   Hintergrundfarbe - Rahmen und Kennzeichnung waeren unsichtbar (gemessener
   Kontrast 1,00). Dort uebernimmt das Anthrazit der Seite. */
.bg-dark .pricing-box--featured{border-color:var(--charcoal)}
.bg-dark .pricing-box__badge{background:var(--charcoal);color:#fff}
@media (max-width:960px){
  /* Gestapelt braucht die Kennzeichnung Luft nach oben, damit sie nicht
     in die darueberliegende Box ragt. */
  .pricing-pair .pricing-box--featured{margin-top:12px}
}

/* ==========================================================================
   Kartenraster mit Rundbild ("Echte Reportagen ansehen").
   Das Bild steht oben aus der weissen Karte heraus. Das Raster bekommt dafuer
   zusaetzlichen Abstand nach oben und zwischen den Zeilen. Karten ohne Bild
   bleiben unveraendert - der Modifier wird nur gesetzt, wenn Bilder gepflegt sind.
   ========================================================================== */
/* Doppelte Klasse, weil css/cms.css NACH dieser Datei geladen wird und dort
   .cms-card-grid mit "margin:34px 0" und "gap:22px" steht. Mit nur einer Klasse
   gewinnt die spaetere Regel und der Kreis rutscht in die Ueberschrift. */
.cms-card-grid.cms-card-grid--portrait{
  --card-portrait:252px;
  margin-top:calc(48px + var(--card-portrait) / 2);
  row-gap:calc(34px + var(--card-portrait) / 2);
}
.cms-card-grid--portrait .cms-card{
  position:relative;
  padding-top:calc(var(--card-portrait) / 2 + 26px);
}
.cms-card__portrait{
  position:absolute;
  top:calc(var(--card-portrait) / -2);
  left:50%;
  transform:translateX(-50%);
  width:var(--card-portrait);
  height:var(--card-portrait);
  border-radius:50%;
  overflow:hidden;
  background:var(--white);
  box-shadow:0 14px 34px rgba(46,42,36,.18);
  display:block;
}
.cms-card__portrait picture{display:block;width:100%;height:100%;}
.cms-card__portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media (max-width:900px){
  .cms-card-grid.cms-card-grid--portrait{--card-portrait:224px;}
}
@media (max-width:560px){
  .cms-card-grid.cms-card-grid--portrait{--card-portrait:248px;}
}


/* ==========================================================================
   Meta-Zeile der Karten ("REFERENZ") auf eine gemeinsame Linie
   Die Karten einer Reihe sind im Grid schon gleich hoch, die Meta-Zeile stand
   aber direkt unter dem Text - bei ein- und zweizeiligen Texten also auf
   unterschiedlicher Hoehe. Als Flex-Spalte schiebt margin-top:auto sie an den
   unteren Rand, damit sitzt sie in jeder Karte gleich.
   Zwei Klassen im Selektor, weil css/cms.css NACH dieser Datei geladen wird
   und dort .cms-card{display:block} steht.
   ========================================================================== */
.cms-card-grid .cms-card{
  display:flex;
  flex-direction:column;
}
.cms-card-grid .cms-card .cms-card__meta{
  margin-top:auto;
  align-self:flex-start;
}


/* ==========================================================================
   Logo passend zur Navigationsfarbe
   Ueber dem Hero traegt die Navigation die Klasse nav--dark und ist dunkel -
   dort gehoert das helle Logo hin. Beim Scrollen entfernt footer.php die
   Klasse, die Navigation wird hell, und das helle Logo waere fast unsichtbar.
   Deshalb liegen beide Fassungen im Markup und werden hier getauscht: kein
   JavaScript, kein Nachladen, damit beim Scrollen nichts flackert.
   ========================================================================== */
/* Weiter oben (Z. ~1513) setzt eine Regel content:url(...) auf .nav__logo img und
   erzwingt damit das helle Logo - unabhaengig davon, was im src steht. Genau daran
   scheiterte der Wechsel zuerst. Fuer die beiden Logo-Bilder wird das aufgehoben,
   damit wieder die jeweils eigene Datei gilt. Die Regel selbst bleibt stehen, weil
   .nav__mobile-logo img sie weiterhin nutzt. */
/* Zwei Befunde vom 10.09.2026, beide gemessen:
   1. Mehrere Mobil-Medienabfragen weiter oben (Z. ~1885, ~1955) setzen
      .nav__logo img{display:block!important}. Ohne Gegengewicht standen unter
      981 px BEIDE Logos nebeneinander. Deshalb hier ebenfalls !important.
   2. Unter 981 px bleibt die Navi IMMER dunkel (#34302b, Z. 1885/1955) - der
      Wechsel auf hellen Grund passiert nur ab 981 px. Das dunkle Logo gehoert
      also nur dorthin; auf dem Handy bliebe es sonst schwarz auf schwarz.
   Standard ist deshalb das helle Logo; der Tausch gilt erst ab 981 px. */
.nav__logo .nav__logo-img{content:normal}
.nav__logo .nav__logo-img--hell{display:block!important}
.nav__logo .nav__logo-img--dunkel{display:none!important}
@media (min-width:981px){
  .nav__logo .nav__logo-img--hell{display:none!important}
  .nav__logo .nav__logo-img--dunkel{display:block!important}
  .nav--dark .nav__logo .nav__logo-img--hell{display:block!important}
  .nav--dark .nav__logo .nav__logo-img--dunkel{display:none!important}
}


/* ==========================================================================
   --- Folgefarben auf den beigen Flaechen (09.09.2026) ---
   --cream ist von #F6F1E8 auf #BFA88F gewechselt. Als Textfarbe auf dunklem
   Grund traegt der neue Ton weiter gut (6,3:1). Als FLAECHE (.bg-cream) ist er
   aber deutlich dunkler als vorher - Fließtext und Gold-Akzente kaemen dort auf
   2,6:1 bzw. 1,8:1 und waeren praktisch unlesbar.
   Deshalb werden die beiden Variablen INNERHALB der beigen Abschnitte
   nachgezogen. Weil CSS-Variablen vererben, greift das automatisch fuer jedes
   Element, das var(--text-muted) oder var(--gold-dark) nutzt - ohne dass
   einzelne Selektoren gepflegt werden muessen.
   Gemessen auf #BFA88F: Fließtext 4,9:1, Akzent 5,0:1, Ueberschrift 6,3:1.
   ========================================================================== */
.bg-cream{
  --text-muted:#3f3a33;
  --gold-dark:#4a3717;
}

/* --- Halbtransparente Textfarben auf dunklem Grund nachziehen ---
   Der neue Ton ist deutlich dunkler als #F6F1E8. Bei unveraenderter Deckkraft
   fielen Footer, Werte-Punkte und Lightbox-Text auf 2,7 bis 4,0:1. Mit 86 %
   stehen sie wieder bei 4,6 bis 5,3:1 auf dem Anthrazit.
   Der CTA-Absatz liegt auf einem Foto mit dunklem Verlauf darueber; dort reicht
   erst die volle Deckkraft (gemessen 4,6:1). */
.footer,
.footer__brand p,
.footer__col a,
.footer__bottom,
.why-item p,
.lightbox__caption{
  color:rgba(191,168,143,.86);
}
.cta-section p{color:var(--cream)}


/* ==========================================================================
   Klick-Platzhalter fuer Videos (09.09.2026)
   Statt fertiger Vimeo-Player steht ein lokales Standbild mit Abspiel-Knopf da;
   der Player kommt erst beim Klick (Skript in includes/footer.php,
   cms_video_facade in page-render.php). Der Hero ist ausgenommen und spielt weiter sofort.
   Gemessen vorher auf /leistungen/video/: neun Player, 14,7 MB, 18,6 s bis zum
   ersten Inhalt auf dem Handy - bei nur 141 KB eigener Seite.
   ========================================================================== */
.cms-video-lazy{
  position:relative;display:block;width:100%;
  aspect-ratio:16/9;background:#211d18;
  overflow:hidden;cursor:pointer;
}
/* In den vorhandenen 16:9-Rahmen fuellt der Platzhalter die Flaeche, sonst
   wuerde sich das Seitenverhaeltnis verdoppeln. */
.cms-video-embed .cms-video-lazy,
.video-card__frame .cms-video-lazy,
.foto-video-pair__media .cms-video-lazy{
  position:absolute;inset:0;height:100%;aspect-ratio:auto;
}
.cms-video-lazy__bild{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s ease;
}
.cms-video-lazy:hover .cms-video-lazy__bild{transform:scale(1.03);filter:brightness(.92)}
.cms-video-lazy__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;
  border:2px solid rgba(246,241,232,.9);
  background:rgba(30,25,20,.45);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  cursor:pointer;padding:0;
  transition:background var(--t),transform var(--t),border-color var(--t);
}
.cms-video-lazy__play span{
  display:block;width:0;height:0;margin:0 auto;
  border-left:16px solid #fff;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
  transform:translateX(3px);
}
.cms-video-lazy:hover .cms-video-lazy__play{
  background:rgba(30,25,20,.68);border-color:var(--gold);
  transform:translate(-50%,-50%) scale(1.06);
}
.cms-video-lazy__play:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.cms-video-lazy iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (prefers-reduced-motion:reduce){
  .cms-video-lazy__bild,.cms-video-lazy__play{transition:none}
  .cms-video-lazy:hover .cms-video-lazy__bild{transform:none}
}

/* Gold-Buttons: weisser Text auf #b8965a ergab 2,78:1 und ist damit unter der
   Schwelle - PageSpeed hat das am 09.09. als Kontrastfehler gemeldet. Das
   Anthrazit der Marke bringt 5,12:1 und passt zu den dunklen Abschnitten, die
   es schon so machen. */
.btn--gold{color:var(--charcoal)}