:root{
  --bg: #F4EFE6;
  --surface: rgba(255,255,255,.72);
  --surface-solid: #FBF8F2;
  --text: #222323;
  --muted: #5B5F63;
  --dark: #1F1F20;
  --accent: #B07A4A; /* Bronze */
  --accent-2:#6F7B6B; /* Sage */
  --ring: rgba(176,122,74,.28);
  --shadow: 0 12px 40px rgba(0,0,0,.12);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.10);
  --radius: 18px;
  --radius-sm: 14px;
  --max: 1120px;
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top: calc(var(--header-h, 78px) + 14px);
}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 900px at 20% -10%, rgba(176,122,74,.16), transparent 60%),
              radial-gradient(1100px 850px at 95% 25%, rgba(111,123,107,.16), transparent 58%),
              var(--bg);
  padding-top: 0;
}
a{color:inherit}
picture{display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}

/* Subtle floral/ornament overlay (SVG pattern) */
.ornament{
  position:absolute; inset:0; pointer-events:none; opacity:.11;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180"><g fill="none" stroke="%23B07A4A" stroke-opacity="0.55" stroke-width="1.2"><path d="M90 18c10 14 10 30 0 44-10-14-10-30 0-44Z"/><path d="M90 162c10-14 10-30 0-44-10 14-10 30 0 44Z"/><path d="M18 90c14-10 30-10 44 0-14 10-30 10-44 0Z"/><path d="M162 90c-14-10-30-10-44 0 14 10 30 10 44 0Z"/><path d="M53 53c16 3 28 15 31 31-16-3-28-15-31-31Z"/><path d="M127 127c-16-3-28-15-31-31 16 3 28 15 31 31Z"/><path d="M127 53c-3 16-15 28-31 31 3-16 15-28 31-31Z"/><path d="M53 127c3-16 15-28 31-31-3 16-15 28-31 31Z"/></g></svg>');
  background-size: 160px 160px;
}

/* Header */
.header-wrap{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(31,31,32,1);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header-wrap.is-scrolled{
  backdrop-filter: blur(10px);
  background: rgba(31,31,32,.78);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:14px;
  min-width:240px;
}
.brand .name{
  font-weight: 700;
  letter-spacing:.2px;
  color: #F5F2EC;
  font-size: 18px;
}
.brand .tag{
  color: rgba(245,242,236,.78);
  font-size: 12px;
  margin-top:2px;
}
.brand-mark{
  width: 56px; height: 56px; border-radius: 16px;
  --pad: 6px;
  background: linear-gradient(145deg, rgba(176,122,74,.38), rgba(111,123,107,.28));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding: 0;
}
.brand-mark:after{
  content:""; position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
  z-index: 0;
}
.brand-mark > *{position:relative; z-index:1}


.brand-mark svg{width:100%; height:100%; display:block}
.brand-mark.is-logo-loaded .logo-fallback{display:none}
.brand{ text-decoration:none }
.nav{
  display:flex; align-items:center; gap:18px;
}
.nav a{
  text-decoration:none;
  color: rgba(245,242,236,.9);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .2s ease, transform .2s ease;
}
.nav a:hover{background: rgba(255,255,255,.10); transform: translateY(-1px)}
.nav .cta{
  background: rgba(176,122,74,.22);
  border: 1px solid rgba(176,122,74,.35);
}


/* Mobile nav button */
.navbtn{
  display:none;
  width:46px;
  height:46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction: column;
  gap:6px;
}
.navbtn .navbtn-line{display:block; width:18px; height:2px; background: rgba(245,242,236,.92); border-radius:2px; transition: transform .18s ease, opacity .18s ease}
body.nav-open .navbtn .navbtn-line:nth-child(1){transform: translateY(6px) rotate(45deg)}
body.nav-open .navbtn .navbtn-line:nth-child(2){opacity:0}
body.nav-open .navbtn .navbtn-line:nth-child(3){transform: translateY(-6px) rotate(-45deg)}

.nav-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 40;
}
body.nav-open .nav-backdrop{opacity:1; pointer-events:auto}
/* Hero */
.hero{
  position:relative;
  color: #F7F4EF;
  min-height: 62vh;
  display:flex; align-items:stretch;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  /* JPEG fallback first, WebP where supported */
  background-image:
    linear-gradient(90deg, rgba(15,15,16,.82) 0%, rgba(15,15,16,.55) 44%, rgba(15,15,16,.20) 68%, rgba(15,15,16,.08) 100%),
    url('../img/hero.jpg');
  background-position: 0 0, 78% 18%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
  /* Blur the hero image slightly to obscure facial details while maintaining overall contrast
     and reduce overall brightness to make facial features less recognisable. The blur helps
     soften edges and the brightness filter darkens the image, acting like a semi‑transparent overlay. */
  filter: blur(3px) brightness(0.6) saturate(0.92) contrast(1.02);
}
@media (min-width: 1400px){
  .hero-media{
    background-position: 0 0, 82% 14%;
  }
}

@supports (background-image: image-set(url('../img/hero.webp') type('image/webp'), url('../img/hero.jpg') type('image/jpeg'))){
  .hero-media{
    background-image:
      linear-gradient(90deg, rgba(15,15,16,.82) 0%, rgba(15,15,16,.55) 44%, rgba(15,15,16,.20) 68%, rgba(15,15,16,.08) 100%),
      image-set(
        url('../img/hero.webp') type('image/webp'),
        url('../img/hero.jpg') type('image/jpeg')
      );
  }
}

/* Mobile hero crop (phone-optimiert) */
@media (max-width: 720px){
  .hero-media{
    background-image:
      linear-gradient(180deg, rgba(15,15,16,.86) 0%, rgba(15,15,16,.62) 42%, rgba(15,15,16,.34) 70%, rgba(15,15,16,.22) 100%),
      url('../img/hero-mobile.jpg');
    /* Positionierung des Mobil-Hintergrunds angepasst: Wichtiges Motiv (Graveur und Stein) weiter nach oben für bessere Sichtbarkeit */
    background-position: 0 0, 50% 35%;
    background-size: auto, cover;
    /* Apply a similar blur and brightness reduction on mobile to reduce recognisability of faces.
       The brightness filter darkens the image which functions like a transparent overlay. */
    filter: blur(3px) brightness(0.6) saturate(0.92) contrast(1.02);
  }
}
@supports (background-image: image-set(url('../img/hero-mobile.webp') type('image/webp'), url('../img/hero-mobile.jpg') type('image/jpeg'))){
  @media (max-width: 720px){
    .hero-media{
      background-image:
        linear-gradient(180deg, rgba(15,15,16,.86) 0%, rgba(15,15,16,.62) 42%, rgba(15,15,16,.34) 70%, rgba(15,15,16,.22) 100%),
        image-set(
          url('../img/hero-mobile.webp') type('image/webp'),
          url('../img/hero-mobile.jpg') type('image/jpeg')
        );
        /* Position wie oben: Motiv weiter nach oben für Mobile-Ansicht */
        background-position: 0 0, 50% 35%;
      }
  }
}


.hero:after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(900px 500px at 20% 18%, rgba(176,122,74,.22), transparent 55%),
              radial-gradient(900px 520px at 70% 40%, rgba(111,123,107,.18), transparent 58%),
              linear-gradient(180deg, rgba(31,31,32,.50), rgba(244,239,230,0) 72%);
  pointer-events:none;
}
.hero .container{position:relative; z-index:1; display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; padding: 56px 22px 42px;}
.hero h1{margin:0 0 12px; font-size: 40px; line-height: 1.08; letter-spacing: -.6px}
.hero p{margin:0 0 20px; color: rgba(247,244,239,.86); font-size: 16px; line-height: 1.6}
.hero .hero-kicker{margin-bottom: 10px}
.hero-subtitle{margin: 2px 0 18px; color: rgba(247,244,239,.90); font-size: 16px; line-height: 1.45; max-width: 46ch}
.hero-br{display:none}
@media (max-width: 720px){
  .hero .hero-kicker{margin-bottom: 14px}
  .hero-subtitle{margin: 6px 0 18px; font-size: 15px; max-width: 34ch}
  .hero-br{display:block}
}
.hero-badges{display:flex; gap:10px; flex-wrap:wrap; margin: 16px 0 0}
.badge{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.badge:hover{background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); transform: translateY(-1px)}
.badge:active{transform: translateY(0)}
.badge:focus-visible{outline: 3px solid var(--ring); outline-offset: 2px}

.hero-card{
  align-self:end;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  overflow:hidden;
}
.hero-card-inner{
  padding: 18px 18px 16px;
  backdrop-filter: blur(12px);
}
.hero-card h3{margin:0 0 8px; font-size: 14px; letter-spacing:.2px}
.hero-card p{margin:0 0 14px; font-size: 13px; color: rgba(255,255,255,.84)}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.20)}
.btn.primary{
  background: linear-gradient(135deg, rgba(176,122,74,.95), rgba(156,103,58,.95));
  border-color: rgba(176,122,74,.55);
  color: #121212;
}
.btn.ghost{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.btn.soft{
  background: rgba(31,31,32,.06);
  border: 1px solid rgba(31,31,32,.12);
  color: var(--text);
}
.btn.soft:hover{box-shadow: 0 14px 30px rgba(0,0,0,.10)}

.btn-ico{width:16px;height:16px;display:inline-grid;place-items:center}
.btn-ico svg{width:16px;height:16px;display:block}

.link{color: var(--accent); text-decoration:none; border-bottom:1px solid rgba(176,122,74,.35)}
.link:hover{border-bottom-color: rgba(176,122,74,.65)}

/* Sections */
.lift{position:relative; margin-top:-44px; padding-top: 88px;}

@media (max-width: 920px){
  .lift{margin-top:-26px; padding-top: 72px;}

  /* Mobile navigation */
  .navbtn{display:flex}
  .nav{
    position: fixed;
    top: calc(var(--header-h, 72px) + 8px);
    left: 14px;
    right: 14px;
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(31,31,32,.96);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 60;
  }
  body.nav-open .nav{transform: translateY(0); opacity: 1; pointer-events: auto}
  .nav a{padding: 12px 12px; font-size: 15px}
  .nav .cta{justify-self: start}
}
.section{padding: clamp(46px, 6vw, 70px) 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom: 18px}
.kicker{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color: var(--accent-2)}
.h2{margin:6px 0 0; font-size: 26px; letter-spacing: -.4px; line-height: 1.2}
.sub{margin: 0; color: var(--muted); line-height: 1.65; max-width: 62ch}
.divider{height:1px; background: rgba(31,31,32,.10); margin: 24px 0 0}

/* Services */
.grid{display:grid; gap:14px}
.grid.cols-3{grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}
.card{
  background: var(--surface);
  border: 1px solid rgba(31,31,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.card-inner{padding: 16px 16px 14px}
.card-title{display:flex; align-items:center; justify-content:space-between; gap:12px}
.card-title h3{margin:0; font-size: 16px}
.icon{
  width: 40px; height: 40px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(176,122,74,.28), rgba(111,123,107,.18));
  border: 1px solid rgba(31,31,32,.10);
  display:grid; place-items:center;
}
.icon svg{width:18px; height:18px; opacity:.9}
.card p{margin:10px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px}
.details{
  border-top: 1px solid rgba(31,31,32,.10);
  padding: 12px 16px 16px;
  background: rgba(251,248,242,.72);
}
.details summary{
  list-style:none; cursor:pointer;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(176,122,74,.22);
  background: rgba(176,122,74,.10);
  display:flex; align-items:center; justify-content:space-between;
}
.details summary::-webkit-details-marker{display:none}
.details summary span{color: var(--muted); font-weight: 600; font-size: 13px}
/* Details (Accordion) – Bild oben, volle Breite, saubere Skalierung */
.details-content{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 12px 2px 2px;
}

.details-content ul{
  margin:0;
  padding-left: 18px;
  color: var(--muted);
  line-height:1.55;
  font-size: 14px;
}

.details-content li{margin: 6px 0}

.details-media{
  order: -1;
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(31,31,32,.10);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  background: #ece7de;
  padding: 10px;
}

.details-media img{
  width: 100%;
  height: clamp(180px, 24vw, 240px);
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 12px;
}

.details-media picture{
  width: 100%;
  display: block;
}

.details-media picture img{
  width: 100%;
  height: clamp(180px, 24vw, 240px);
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 12px;
}

@media (max-width: 560px){
  .details-content{gap: 10px; padding-top: 10px}
  .details-media{padding: 8px}
  .details-media img,
  .details-media picture img{height: clamp(170px, 45vw, 240px)}
}

.details[open] .details-content{animation: detailsIn .18s ease both}
@keyframes detailsIn{from{opacity:0; transform: translateY(-6px)} to{opacity:1; transform: translateY(0)}}

/* Gallery */
.gallery{
  background: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.55));
  border-top: 1px solid rgba(31,31,32,.06);
  border-bottom: 1px solid rgba(31,31,32,.06);
}
.masonry{columns: 3 280px; column-gap: 14px; margin-top: 18px}
.masonry figure{
  break-inside: avoid;
  margin: 0 0 14px;
  border-radius: var(--radius);
  overflow:hidden;
  border: 1px solid rgba(31,31,32,.10);
  background: #fff;
  box-shadow: var(--shadow-soft);
  cursor: zoom-in;
}
.masonry img{width:100%; height:auto; display:block; transform: scale(1.01); transition: transform .25s ease}
.masonry figure:hover img{transform: scale(1.04)}
.masonry figcaption{padding: 10px 12px; color: var(--muted); font-size: 14px}

/* Steps */
.steps{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 18px}
.step{
  background: var(--surface);
  border: 1px solid rgba(31,31,32,.10);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-soft);
}
.step .n{font-weight: 800; color: var(--accent); font-size: 12px; letter-spacing:.12em}
.step h3{margin:8px 0 6px; font-size: 16px}
.step p{margin:0; color: var(--muted); line-height:1.6; font-size: 14px}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px}
.panel{
  background: var(--surface);
  border: 1px solid rgba(31,31,32,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.panel .inner{padding: 16px}
.field{display:flex; flex-direction:column; gap:8px; margin: 10px 0}
.label{font-size: 14px; font-weight: 700; color: var(--muted)}
.input, .textarea{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(31,31,32,.12);
  background: rgba(255,255,255,.75);
  outline: none;
}
.input:focus, .textarea:focus{box-shadow: 0 0 0 4px var(--ring); border-color: rgba(176,122,74,.35)}
.textarea{min-height: 120px; resize: vertical}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px}
.small{font-size: 14px; color: var(--muted); line-height:1.7}

/* Footer */
.footer{
  background: rgba(31,31,32,.94);
  color: rgba(245,242,236,.9);
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer .row{display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer a{color: rgba(245,242,236,.9)}

/* Floating buttons */
/* Vereinheitlichte Gestaltung für alle Floating-Buttons (Telefon, WhatsApp, E‑Mail) */
.call-float{
  position: fixed;
  right: 18px;
  bottom: calc(calc(18px + env(safe-area-inset-bottom)) + 68px);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  border: 1px solid rgba(176,122,74,.35);
  z-index: 1000;
  transition: transform .18s ease, box-shadow .18s ease;
}
.call-float:hover{transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.26)}
.call-float svg{width: 22px; height: 22px}

/* WhatsApp-Button erhält die gleiche Gestaltung wie die anderen */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: calc(calc(18px + env(safe-area-inset-bottom)) + 136px);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  border: 1px solid rgba(176,122,74,.35);
  z-index: 1000;
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-float:hover{transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.26)}
.wa-float svg{width: 26px; height: 26px}

/* Modal (lightbox) */
.modal{
  position: fixed; inset: 0; display:none;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(4px);
  z-index: 1200;
}
.modal[aria-hidden="false"]{display:grid; place-items:center}
.modal-inner{
  width: min(980px, 92vw);
  border-radius: 18px;
  overflow:hidden;
  background:#111;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  position:relative;
}
.modal-inner img{width:100%; height:auto; display:block}
.modal-close{
  position:absolute; top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 18px;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 920px){
  .hero .container{grid-template-columns: 1fr; padding-top: 44px}
  .hero{min-height: 72vh}
  /* hero-media: phone crop handled in separate breakpoint */
  .hero-card{align-self: start}
  .grid.cols-3{grid-template-columns: 1fr}
  .steps{grid-template-columns: 1fr}
  .contact-grid{grid-template-columns: 1fr}
  .details-content{grid-template-columns: 1fr}
  /* Mobile: Bild zuerst (oberhalb der Liste), ohne festes Seitenverhältnis. */
  .details-content ul{grid-row:2}
  .details-media{grid-row:1; justify-self:start; aspect-ratio: auto; max-width: none}
  .details-media img{height:auto}
  .details-media picture{height:auto}
  .details-media picture img{height:auto}
  .nav{gap:8px}
}
@media (max-width: 920px) and (min-width: 721px){
  .hero-media{background-position: 0 0, 50% 18%; background-size: auto, cover}
}
@media (max-width: 520px){
  .brand{min-width:auto}
  .brand-mark{width:56px; height:56px; padding:0; border-radius:18px}
  .brand .tag{display:none}
  .hero h1{font-size: 32px}
  .hero{min-height: 76vh}
  .hero-media{background-position: 0 0, 50% 48%;}

  .container{padding: 0 18px}
  .card p{font-size: 15px; line-height: 1.65}
  .step p{font-size: 15px; line-height: 1.65}
  .masonry figcaption{font-size: 14px}
}


/* Typografie & Abstände – Feintuning (v12) */
body{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (max-width: 720px){
  .section-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
  }
}

.panel .inner p.small{margin: 0 0 12px}
.panel .inner p.small:last-child{margin-bottom:0}


/* E‑Mail‑Button erhält die gleiche Gestaltung wie die anderen */
.mail-float{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 16px 34px rgba(0,0,0,.22);
  border: 1px solid rgba(176,122,74,.35);
  z-index: 1000;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mail-float:hover{transform: translateY(-2px); box-shadow: 0 20px 46px rgba(0,0,0,.28)}
.mail-float svg{width: 22px; height: 22px}


.brand-mark img.logo-fallback{position:absolute; inset:0; width:100%; height:100%; transform: scale(var(--logo-scale)); transform-origin:50% 50%; object-fit:contain; z-index:1; pointer-events:none;}


/* Gold-Logo: inner box defines the exact render area (prevents drift on resize) */
.brand-mark{ --pad: 6px; position:relative; overflow:hidden; }
.brand-mark-inner{
  position:absolute;
  inset: var(--pad);
}
.brand-mark-inner > .logo-fallback,
.brand-mark-inner > canvas.gold-logo{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
}
.brand-mark-inner > .logo-fallback{ z-index: 1; object-fit: contain; }
.brand-mark-inner > canvas.gold-logo{ z-index: 2; pointer-events:none; }


/* Legal pages */
.legal-card .card-inner{padding: 26px 24px;}
/*
 * Legal pages (Datenschutz & Impressum)
 * Improve readability by using darker text and clearer link colours on the light card background.
 */
.legal-content{
  max-width: 86ch;
  margin: 0 auto;
  /* use site-wide dark text for better contrast */
  color: var(--dark);
  line-height: 1.7;
}
/* headings inherit the darker base colour; adjust sizes only */
.legal-content h1{font-size: 28px; letter-spacing: -.4px; margin: 0 0 10px;}
.legal-content h2{font-size: 20px; margin: 18px 0 8px; letter-spacing: -.2px;}
.legal-content h3{
  font-size: 16px;
  margin: 14px 0 6px;
  color: var(--dark);
}
/* paragraphs and list items use muted dark grey for improved legibility */
.legal-content p{
  margin: 0 0 10px;
  color: var(--muted);
}
.legal-content ul{margin: 0 0 12px 18px;}
.legal-content li{
  margin: 6px 0;
  color: var(--muted);
}
/* links use the accent colour with an underline; colour intensifies on hover */
.legal-content a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(176,122,74,.55);
}
.legal-content a:hover{
  text-decoration-color: rgba(176,122,74,.9);
}

/* Desktop wide: keep face in view */
@media (min-width: 1200px){
  .hero-media{
    background-position: 0 0, 82% 16%;
  }
}