:root{
    --anthracite-900:#33383c;
    --anthracite-700:#4a5055;
    --anthracite-500:#6d7378;
    --orange-600:#d9641c;
    --orange-500:#e8752b;
    --orange-300:#f3a874;
    --gold-500:#c9a24b;
    --gold-300:#e0c383;
    --marble-100:#f6efe4;
    --marble-50:#fdfaf5;
    --line:#ece2d0;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Work Sans', 'Segoe UI', sans-serif;
    /* Reserve fuer die klebende Kopfleiste bei Anker-Spruengen (siehe scroll-padding/margin unten) */
    --anchor-offset: clamp(94px, calc(18vw + 30px), 114px);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; font-size:17.5px; overflow-x:hidden; scroll-padding-top:var(--anchor-offset);}
  /* v36 — Grundschrift von 16px auf 17.5px angehoben (rem-basiert, wirkt auf die gesamte Seite),
     da viele Kunden aelter sind und kleine Schrift schwer lesen */
  body{
    font-family:var(--sans);
    color:var(--anthracite-900);
    background:var(--marble-50);
    line-height:1.6;
    overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1140px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:var(--sans); font-size:0.92rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--gold-500); font-weight:600; margin-bottom:14px; display:block;
  }
  h1,h2,h3{font-family:var(--serif); font-weight:500; letter-spacing:-0.01em;}

  /* ============ HEADER ============ */
  header{
    background:var(--marble-50); border-bottom:1px solid var(--line);
    position:sticky; top:0; z-index:50;
  }
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 24px;}
  .logo{font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:0.01em;}
  .logo span{color:var(--gold-500);}
  nav.main-nav{display:flex; gap:28px; font-size:0.92rem;}
  nav.main-nav a:hover{color:var(--orange-600);}
  .header-phones{display:flex; gap:18px; font-size:0.85rem; color:var(--anthracite-500);}
  .header-phones a{border-bottom:1px solid var(--orange-300); padding-bottom:1px;}
  @media (max-width:1400px){ nav.main-nav, .header-phones{display:none;} }

  /* ============ HERO ============ */
  .hero{
    background:
      linear-gradient(180deg, rgba(51,56,60,0.6), rgba(51,56,60,0.48) 55%, rgba(51,56,60,0.65)),
      url("images/hero-pannonia-gruen.webp") center / cover no-repeat;
    color:var(--marble-50);
    padding:110px 24px 90px;
    position:relative;
    overflow:hidden;
    border-bottom:2px solid var(--gold-akzent);
  }
  .hero-inner{max-width:1140px; margin:0 auto; position:relative;}
  .hero .eyebrow{
    color:var(--marble-50);
    font-size:1.02rem;
    text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.32);
  }
  .hero h1{
    font-size:clamp(2.1rem, 4.6vw, 3.4rem);
    line-height:1.08;
    max-width:820px;
    color:var(--marble-50);
    text-shadow:0 2px 4px rgba(0,0,0,0.6), 0 14px 30px rgba(0,0,0,0.4);
    overflow-wrap:break-word;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(120deg, var(--orange-600), var(--gold-500));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .hero p.lead{
    max-width:560px; margin-top:24px; font-size:1.14rem; color:#e4e0d8; font-family:var(--serif);
    text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.32);
  }
  .hero-ctas{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
  .btn{
    display:inline-block; padding:14px 26px; font-size:0.92rem; font-weight:600;
    border-radius:4px; letter-spacing:0.01em; transition:all .15s ease;
  }
  .btn-gold{ background:linear-gradient(135deg,var(--orange-500),var(--orange-600)); color:#fff; box-shadow:0 4px 14px rgba(217,100,28,0.28); }
  .btn-gold:hover{ filter:brightness(1.06); box-shadow:0 6px 18px rgba(217,100,28,0.36); }
  .btn-ghost{ border:1px solid var(--anthracite-500); color:var(--anthracite-900); }
  .btn-ghost:hover{ border-color:var(--orange-600); color:var(--orange-600); }

  .hero-locations{
    display:flex; gap:32px; margin-top:56px; flex-wrap:wrap;
    border-top:1px solid rgba(244,242,236,0.2); padding-top:28px;
  }
  .hero-loc{font-size:0.88rem; color:#c9c4b8;}
  .hero-loc strong{display:block; color:var(--marble-50); font-family:var(--serif); font-size:1rem; font-weight:500; margin-bottom:4px;}
  .hero .btn-ghost{ border:1px solid rgba(244,242,236,0.55); color:var(--marble-50); }
  .hero .btn-ghost:hover{ border-color:var(--gold-300); color:var(--gold-300); }

  /* ============ TRUST BAR ============ */
  .trust-bar{background:var(--marble-100); border-bottom:1px solid var(--line);}
  .trust-bar .wrap{
    display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  }
  .trust-item{
    padding:22px 20px; text-align:center; font-size:0.86rem; font-weight:500;
    border-left:1px solid var(--line);
  }
  .trust-item:first-child{border-left:none;}
  @media (max-width:760px){ .trust-bar .wrap{grid-template-columns:1fr 1fr;} .trust-item{border-left:1px solid var(--line);} }

  /* ============ SERVICES ============ */
  .section{padding:96px 24px;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.8rem,3vw,2.4rem);}
  .section-head p{color:var(--anthracite-500); margin-top:14px; font-size:1.08rem; font-family:var(--serif);}

  .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  .service-card{
    background:var(--marble-50); padding:0; min-height:200px;
    display:flex; flex-direction:column;
    transition:background .2s ease;
    overflow:hidden;
  }
  .service-card:hover{ background:var(--marble-100); }
  .service-card-img{
    width:100%; height:190px; overflow:hidden; background:var(--marble-100);
  }
  .service-card-img img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    transition:transform .35s ease;
  }
  .service-card-img img.img-contain{ object-fit:contain; background:var(--marble-100); }
  .service-card:hover .service-card-img img{ transform:scale(1.05); }
  .service-card-body{ padding:22px 24px 28px; display:flex; flex-direction:column; }
  .service-num{font-family:var(--serif); font-size:0.85rem; color:var(--gold-500); margin-bottom:10px;}
  .service-card h3{font-size:1.12rem; margin-bottom:8px;}
  .service-card p{font-size:0.88rem; color:var(--anthracite-500);}
  @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }

  /* ============ RENOVIERUNG / VORHER-NACHHER ============ */
  .reno{ background:var(--marble-100); color:var(--anthracite-900); }
  .reno .section-head p{ color:var(--anthracite-500); }
  .reno-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:8px;}
  .reno-list li{ font-size:0.95rem; padding-left:24px; position:relative; color:var(--anthracite-700); }
  .reno-list li::before{ content:"—"; position:absolute; left:0; color:var(--orange-600); font-weight:600; }
  @media (max-width:640px){ .reno-list{grid-template-columns:1fr;} }

  /* ============ FAQ (matches schema above — good for GEO/AI-Suche) ============ */
  .faq-item{ border-top:1px solid var(--line); padding:26px 0; }
  .faq-item:last-child{ border-bottom:1px solid var(--line); }
  .faq-item h3{ font-size:1.12rem; font-weight:600; margin-bottom:10px; }
  .faq-item p{ color:var(--anthracite-500); font-size:0.95rem; max-width:760px; }

  /* ============ LOCATIONS ============ */
  .locations{ background:var(--marble-100); }
  .loc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .loc-card{ background:var(--marble-50); border:1px solid var(--line); padding:32px; }
  .loc-card .eyebrow{margin-bottom:8px;}
  .loc-card h3{font-size:1.3rem; margin-bottom:16px;}
  .loc-card dl{font-size:0.92rem; color:var(--anthracite-500);}
  .loc-card dt{font-weight:600; color:var(--anthracite-900); margin-top:14px;}
  .loc-card a.phone{color:var(--orange-600); font-weight:600;}
  @media (max-width:760px){ .loc-grid{grid-template-columns:1fr;} }

  /* ============ FOOTER ============ */
  footer{ background:var(--anthracite-900); color:#c7c1b4; padding:56px 24px 28px; font-size:0.85rem; }
  .footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; padding-bottom:32px; border-bottom:1px solid rgba(244,242,236,0.1);}
  footer a:hover{ color:var(--orange-300); }
  .footer-bottom{ padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

  .note{
    background:#fff4d6; border:1px solid #e8cd8a; color:#5c4a1a; font-size:0.85rem;
    padding:14px 18px; margin:0 24px 0; border-radius:4px;
  }

/* ============ SUBPAGES: page hero, breadcrumb, prose ============ */
.page-hero{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:2px solid var(--gold-akzent);
  padding:90px 24px 56px;
  position:relative;
}
/* Foto-Heroes: einheitliche Steintextur, Text unten verankert (gleiches Prinzip wie Startseiten-Hero) */
.page-hero:not(.no-photo){
  min-height:clamp(260px, 28vw, 420px);
  display:flex;
  align-items:flex-end;
  padding:40px 24px 36px;
}
.page-hero:not(.no-photo) .wrap{ width:100%; }
/* Breadcrumb + Unternavigation liegen jetzt direkt im Titelbild (kein separater Balken mehr) */
.page-hero .breadcrumb{ font-size:0.82rem; color:#d8d3c6; margin-bottom:18px; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.page-hero .breadcrumb a{ color:#d8d3c6; }
.page-hero .breadcrumb a:hover{ color:var(--gold-300); }
.page-hero h1{ font-size:clamp(1.95rem,3.9vw,2.85rem); max-width:760px; color:var(--marble-50); text-shadow:0 2px 4px rgba(0,0,0,0.6), 0 12px 26px rgba(0,0,0,0.4); overflow-wrap:break-word; }
.page-hero:not(.no-photo) h1{
  background:var(--gold-verlauf-hell);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; filter:none;
}
.page-hero p.lead{ margin-top:16px; max-width:620px; color:#e4e0d8; font-size:1.12rem; font-family:var(--serif); text-shadow:0 1px 3px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.32); }

/* Variant: page has no title photo — light marble background, dark text */
.page-hero.no-photo{
  background-image:none !important;
  background: linear-gradient(180deg, var(--marble-100), var(--marble-50));
}
.page-hero.no-photo .breadcrumb{ color:var(--anthracite-500); }
.page-hero.no-photo .breadcrumb a{ color:var(--anthracite-500); }
.page-hero.no-photo .breadcrumb a:hover{ color:var(--orange-600); }
.page-hero.no-photo h1{ color:var(--anthracite-900); text-shadow:none; }
.page-hero.no-photo p.lead{ color:var(--anthracite-700); }

/* Variant: show the whole photo smaller/contained instead of a full-bleed crop */
.page-hero.photo-contain{
  background-size:contain;
  background-position:top center;
  background-color:var(--anthracite-900);
}

.prose{ max-width:760px; }
.prose p{ margin-bottom:18px; color:var(--anthracite-700); font-size:1.02rem; }
.prose h2{ font-size:1.5rem; margin:36px 0 18px; }
.check-list{ list-style:none; margin:0 0 8px; }
.check-list li{ padding:10px 0 10px 30px; position:relative; border-top:1px solid var(--line); font-size:0.98rem; color:var(--anthracite-700); }
.check-list li:before{ content:"✓"; position:absolute; left:0; color:var(--orange-600); font-weight:700; }
.check-list li:last-child{ border-bottom:1px solid var(--line); }

.cta-band{
  background: linear-gradient(180deg, var(--anthracite-900), var(--anthracite-700));
  color: var(--marble-50);
  padding:56px 24px; text-align:center;
}
.cta-band h2{ color:var(--marble-50); font-size:1.7rem; margin-bottom:16px; }
.cta-band .btn-gold{ margin-top:6px; }

.subnav{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.subnav a{
  font-size:0.85rem; padding:8px 14px; border:1px solid var(--line); border-radius:20px;
  color:var(--anthracite-700); background:var(--marble-50);
}
.subnav a:hover, .subnav a.active{ border-color:var(--orange-500); color:var(--orange-600); }

/* ============ RENO IMAGE ============ */
.reno-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:start; }
.reno-img{ border-radius:2px; overflow:hidden; border:1px solid rgba(244,242,236,0.15); }
.reno-img img{ width:100%; display:block; }
.reno-img-caption{ font-size:0.82rem; color:#a89f8f; margin-top:10px; text-align:center; }
@media (max-width:900px){ .reno-grid{ grid-template-columns:1fr; } }

/* ============ MOBILE: Anruf-Button & Touch-Ziele ============ */
.btn-call{ display:none; }
@media (max-width:1400px){
  .btn-call{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:10px 22px;
    background:linear-gradient(135deg,var(--orange-500),var(--orange-600));
    color:#fff; font-weight:600; font-size:0.95rem; border-radius:4px;
    box-shadow:0 3px 10px rgba(217,100,28,0.28);
  }
  footer a{ display:inline-block; padding:6px 0; } /* größere Touch-Ziele im Footer */
}
@media (max-width:560px){
  .subnav a{ padding:12px 18px; font-size:0.92rem; } /* Touch-Ziele >= 44px */
}

/* ============ MOBILE: Startseiten-Hero ============ */
@media (max-width:700px){
  .hero{ background-color:var(--anthracite-900); }
  .hero-locations{ margin-top:36px; }
}
/* Anker-Sprungziele: nicht unter der klebenden Kopfleiste verstecken.
   Wert folgt der tatsaechlichen Kopfleisten-Hoehe (Logo clamp 64-84px + Innenabstand),
   statt ueberall pauschal denselben, zu grosszuegigen Wert zu verwenden — dadurch
   beginnen die Abschnitte nach einem Klick auf einen Anker-Link nicht mehr so weit unten. */
section[id], footer[id]{ scroll-margin-top:var(--anchor-offset); }

/* ================================================================
   EDLE OPTIK: Anthrazit / Gold / Beige — nur Hintergruende
   (Aufbau, Schriften und orange Buttons unveraendert)
   ================================================================ */
:root{
  --beige-100:#f1e7d3;   /* Grundflaeche */
  --beige-200:#e9dcc0;   /* vertiefte Flaechen */
  --gold-bg1:#cfa952;    /* Goldband hell */
  --gold-bg2:#bd9440;    /* Goldband dunkel */
}
body{ background:var(--beige-100); }

/* Kopfleiste: Anthrazit mit goldener Linie */
header{
  background:var(--anthracite-900);
  border-bottom:1px solid rgba(201,162,75,0.45);
}
header .logo{ color:var(--marble-100); }
nav.main-nav a{ color:#e8e1d2; }
nav.main-nav a:hover{ color:var(--gold-300); }
.header-phones{ color:#cfc9bc; }
.header-phones a{ border-bottom-color:rgba(201,162,75,0.5); }

/* Vertrauensleiste: gedaempftes Gold */
.trust-bar{
  background:linear-gradient(180deg,var(--gold-bg1),var(--gold-bg2));
  border-bottom:none;
}
.trust-item{ color:#2e2a20; border-left:1px solid rgba(51,56,60,0.18); }
@media (max-width:760px){ .trust-bar .wrap .trust-item{ border-left:1px solid rgba(51,56,60,0.18); } }

/* Karten: Creme auf Beige */
.services-grid{ background:var(--beige-200); border-color:var(--beige-200); }
.service-card{ background:var(--marble-50); }
.service-card:hover{ background:var(--marble-100); }
.faq-item{ border-color:#dccfae; }
.faq-item:last-child{ border-color:#dccfae; }

/* Renovierung: edler Anthrazit-Block */
.reno{ background:var(--anthracite-900); }
.reno .eyebrow{ color:var(--gold-300); }
.reno h2{ color:var(--marble-100); }
.reno .section-head p{ color:#cfc8b8; }
.reno-list li{ color:#ddd6c8; }
.reno-list li::before{ color:var(--gold-300); }

/* Standorte: vertieftes Beige, Karten in Creme mit Goldlinie */
.locations{ background:var(--beige-200); }
.loc-card{ background:var(--marble-50); border-color:#dccfae; border-top:2px solid var(--gold-500); }

/* Unterseiten */
.subnav a{ border-color:#d8c9a6; background:var(--marble-50); }
.page-hero.no-photo{ background:linear-gradient(180deg,var(--beige-200),var(--beige-100)); }
.cta-band{ border-top:3px solid var(--gold-500); }
.check-list li{ border-color:#dccfae; }
.check-list li:last-child{ border-color:#dccfae; }

/* Fusszeile: goldene Trennlinie */
footer{ border-top:3px solid var(--gold-500); }

/* ================================================================
   GOLD-EDITION v14 — Gebürstetes Gold & goldener Schriftzug
   Nur Design: Texte, Bilder, Aufbau und Markup unverändert.
   Bürstenstruktur: quer verlaufend, sehr fein (2 Lagen à 1px).
   ================================================================ */
:root{
  --gold-700:#8f6f2b;
  --gold-hell:#e8cf8f;
  --creme-50:#f6f1e6;
  --creme-100:#ece4d2;
}

/* Grundfläche: weicheres Creme statt kräftigem Beige */
body{ background:var(--creme-50); }

/* ---------- Gebürstetes Gold (Flächen) ---------- */
.trust-bar,
.cta-band{
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.045) 0px, rgba(255,255,255,0.045) 1px,
      transparent 1px, transparent 2px),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0.03) 0px, rgba(0,0,0,0.03) 1px,
      transparent 1px, transparent 3px),
    linear-gradient(135deg,
      #b28d3e 0%, #d9bc72 22%, #c2a052 40%, #e6d191 55%,
      #b8934a 72%, #d3b569 88%, #ab8637 100%);
}

/* ---------- Goldener Schriftzug im Header & Footer ---------- */
.logo, .logo a, .logo span{
  background:linear-gradient(120deg,
    #a9852f 0%, #e8cf8f 35%, #c6a14b 55%, #f0dfa8 75%, #a9852f 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
}

/* ---------- Buttons: Gold statt Orange ---------- */
.btn-gold, .btn-call{
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
      transparent 1px, transparent 2px),
    linear-gradient(135deg, #b28d3e 0%, #dcc077 45%, #e6d191 60%, #ab8637 100%);
  color:#2b2417;
  box-shadow:0 4px 14px rgba(143,111,43,0.3);
}
.btn-gold:hover, .btn-call:hover{
  filter:brightness(1.06);
  box-shadow:0 6px 18px rgba(143,111,43,0.42);
}

/* Ghost-Button (außerhalb Hero): Gold statt Orange */
.btn-ghost:hover{ border-color:var(--gold-700); color:var(--gold-700); }

/* Hero-Headline: Akzentwort in reinem Gold statt Orange-Gold */
.hero h1 em{
  background:linear-gradient(120deg, var(--gold-500), var(--gold-hell) 60%, var(--gold-300));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- CTA-Band: Goldfläche, dunkler Button ---------- */
.cta-band{ border-top:none; color:#2b2e32; }
.cta-band h2{ color:#2b2e32; }
.cta-band .btn-gold{
  background:var(--anthracite-900);
  color:var(--gold-hell);
  box-shadow:0 3px 12px rgba(0,0,0,0.28);
}
.cta-band .btn-gold:hover{
  filter:none; background:#282c30; color:#f0dfa8;
  box-shadow:0 5px 16px rgba(0,0,0,0.36);
}

/* ---------- Orange-Akzente -> Gold ---------- */
.check-list li:before{ color:var(--gold-700); }
.loc-card a.phone{ color:var(--gold-700); }
.subnav a:hover, .subnav a.active{ border-color:var(--gold-500); color:var(--gold-700); }
.page-hero.no-photo .breadcrumb a:hover{ color:var(--gold-700); }

/* ---------- Flächen ans weichere Creme angepasst ---------- */
.locations{ background:var(--creme-100); }
.services-grid{ background:var(--creme-100); border-color:var(--creme-100); }
.page-hero.no-photo{ background:linear-gradient(180deg, var(--creme-100), var(--creme-50)); }
.trust-bar .wrap .trust-item{ border-left-color:rgba(51,56,60,0.22); }

/* ---------- Sichtbarer Tastatur-Fokus in Gold ---------- */
a:focus-visible, .btn:focus-visible, .btn-call:focus-visible{
  outline:2px solid var(--gold-500); outline-offset:3px;
}

/* ================================================================
   v16 — FARBUMSTELLUNG: RAL 6004 (var(--green)) / Creme #ebe8e4 / Salbei #aabf9e
   Gold-Verlauf ausschliesslich fuer den Schriftzug "Steinmetz Stockerer".
   Aufbau, Texte und Markup unveraendert — nur Farben und Abstaende.
   ================================================================ */
:root{
  /* Leitfarbe ersetzt Anthrazit */
  --anthracite-900:var(--green);
  --anthracite-700:#2F5457;
  --anthracite-500:#4A6B6D;

  /* Alle hellen Flaechen auf einen Ton */
  --marble-50:#ebe8e4;
  --marble-100:#ebe8e4;
  --creme-50:#ebe8e4;
  --creme-100:#ebe8e4;
  --beige-100:#ebe8e4;
  --beige-200:#ebe8e4;

  /* Trennlinien, damit die Struktur trotz einheitlicher Flaeche lesbar bleibt */
  --line:#ddd8c4;

  /* Salbei fuer Standorte und CTA-Band */
  --sage-hell:#bcceb2;
  --sage:#aabf9e;
  --sage-dunkel:#93a986;

  /* Gold */
  --gold-verlauf:linear-gradient(120deg,#a9852f 0%,#e8cf8f 35%,#c6a14b 55%,#f0dfa8 75%,#a9852f 100%);
  --gold-verlauf-hell:linear-gradient(120deg,#d9b45c 0%,#f7e9bd 35%,#eccb7d 55%,#fdf3d9 75%,#d9b45c 100%);
  --gold-text:#e3c883;      /* Gold auf dunklem Grund */
  --gold-akzent:#9a7a2c;    /* Gold auf hellem Grund, kontraststark */
}

body{ background:#ebe8e4; color:var(--green); }

/* ---------- Textfarben durchgaengig auf RAL 6004 ---------- */
.section-head p, .service-card p, .faq-item p, .loc-card dl,
.prose p, .check-list li, .subnav a{ color:var(--green); }
.reno-list li{ color:#dbe4d6; }

/* Gold-Akzente auf hellem Grund abdunkeln (Lesbarkeit) */
.eyebrow{ color:var(--gold-akzent); }
.service-num{ color:var(--gold-akzent); }
.check-list li:before{ color:var(--gold-akzent); }
.loc-card a.phone{ color:var(--gold-akzent); }
.subnav a:hover, .subnav a.active{ border-color:var(--gold-akzent); color:var(--gold-akzent); }

/* ---------- Bildverzerrung am Smartphone beheben ---------- */
img{ height:auto; }
.reno-img img{ width:100%; height:auto; }

/* ---------- Hero: Overlay in RAL 6004 ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(31,58,61,0.62), rgba(31,58,61,0.50) 55%, rgba(31,58,61,0.68)),
    url("images/hero-pannonia-gruen.webp") center / cover no-repeat;
}
.hero h1 em{
  background:var(--gold-verlauf-hell);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none; filter:none;
}

/* ---------- Kopfleiste: RAL 6004, Schrift in Gold ---------- */
header{ background:linear-gradient(110deg, var(--green) 0%, #3D6265 50%, var(--green) 100%); border-bottom:2px solid var(--gold-akzent); }
header .logo{
  background:var(--gold-verlauf);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
}
/* v36 — Header-Schriftzug durch das Firmenzeichen (Bild) ersetzt */
header .logo img{ display:block; height:64px; width:auto; }
nav.main-nav a{ color:var(--gold-text); }
nav.main-nav a:hover{ color:#f5e6b8; }
.header-phones{ color:var(--gold-text); }
.header-phones a{ color:var(--gold-text); border-bottom-color:rgba(227,200,131,0.45); }

/* ---------- Vertrauensleiste + Buttons: fliessendes Gold ---------- */
.trust-bar{ background:var(--gold-verlauf); border-bottom:none; }
.trust-item{ color:#2b2417; border-left:1px solid rgba(31,58,61,0.20); }
.btn-gold, .btn-call{
  background:var(--gold-verlauf);
  color:#2b2417;
  box-shadow:0 4px 14px rgba(143,111,43,0.28);
}
.btn-ghost{ border:1px solid var(--anthracite-500); color:var(--green); }
.btn-ghost:hover{ border-color:var(--gold-akzent); color:var(--gold-akzent); }

/* ---------- Standorte + CTA-Band: Salbei mit Verlauf ---------- */
.locations, .cta-band{
  background:linear-gradient(135deg,var(--sage-hell) 0%,var(--sage) 48%,var(--sage-dunkel) 100%);
  border-top:none;
}
.locations .section-head h2, .locations .section-head p{ color:var(--green); }
.cta-band{ color:var(--green); }
.cta-band h2{ color:var(--green); }
.cta-band .btn-gold{
  background:var(--green); color:var(--gold-text);
  box-shadow:0 3px 12px rgba(31,58,61,0.30);
}
.cta-band .btn-gold:hover{ filter:none; background:#183033; color:#f0dfa8; }
.loc-card{ background:#ebe8e4; border:1px solid rgba(31,58,61,0.14); border-top:2px solid var(--gold-akzent); }

/* ---------- Struktur trotz einheitlicher Flaeche erhalten ---------- */
.services-grid{ background:var(--line); border:1px solid var(--line); }
.service-card{ background:#ebe8e4; }
.service-card:hover{ background:#e4e1dc; }
.service-card-img{ background:#e4e1dc; }
.faq-item, .faq-item:last-child{ border-color:var(--line); }
.check-list li, .check-list li:last-child{ border-color:var(--line); }
.subnav a{ background:#ebe8e4; border-color:var(--line); }
.page-hero.no-photo{ background:#ebe8e4; }
.page-hero.no-photo h1, .page-hero.no-photo p.lead,
.page-hero.no-photo .breadcrumb, .page-hero.no-photo .breadcrumb a{ color:var(--green); }

/* ---------- Renovierungsblock: RAL 6004 ---------- */
.reno{ background:var(--green); }
.reno .eyebrow{ color:var(--gold-text); }
.reno h2{ color:#ebe8e4; }
.reno .section-head p{ color:#d7dfd4; }
.reno-list li::before{ color:var(--gold-text); }

/* ---------- Fusszeile: RAL 6004, Schrift durchgaengig Gold ---------- */
footer{ background:var(--green); color:var(--gold-text); border-top:2px solid var(--gold-akzent); }
footer p, footer span, footer a, footer strong{ color:var(--gold-text) !important; }
footer .logo{
  background:var(--gold-verlauf);
  -webkit-background-clip:text; background-clip:text;
  color:transparent !important; -webkit-text-fill-color:transparent;
}
footer a:hover{ color:#f5e6b8 !important; }
.footer-grid{ border-bottom:1px solid rgba(227,200,131,0.22); }

/* ---------- Engere Abstaende zwischen den Abschnitten ---------- */
.section{ padding:60px 24px; }
.section-head{ margin-bottom:36px; }
.hero{ padding:48px 24px 32px; }
.hero-locations{ margin-top:38px; padding-top:22px; }
.hero-ctas{ margin-top:28px; }
.trust-item{ padding:16px 20px; }
.cta-band{ padding:40px 24px; }
footer{ padding:40px 24px 22px; }
.footer-grid{ padding-bottom:24px; }
.faq-item{ padding:20px 0; }
.page-hero{ padding:64px 24px 40px; }
.prose h2{ margin:26px 0 14px; }

@media (max-width:700px){
  .section{ padding:44px 20px; }
  .section-head{ margin-bottom:28px; }
  .hero{ background-color:var(--green); }
  .page-hero:not(.no-photo){ background-color:var(--green); }
}


/* ================================================================
   v17 — Feinschliff Juli 2026
   - Hintergrund heller/moderner (#ebe8e4)
   - Gruen als Variable, am Smartphone etwas dunkler/gedaempfter
   - E-Mail-Adressen in Gold wie die Telefonnummern
   - Menuepunkt "Kontakt" + "Nach oben"-Button
   ================================================================ */
:root{ --green:#1F3A3D; }

/* E-Mail-Links in Gold (auf hellem Grund); Footer bleibt ueber sein eigenes Gold */
a[href^="mailto:"]{ color:var(--gold-akzent); }

/* Nach-oben-Button */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:46px; height:46px; border-radius:50%;
  background:var(--gold-verlauf); color:#1B3032;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; line-height:1; font-weight:600;
  box-shadow:0 4px 14px rgba(31,58,61,0.30);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ filter:brightness(1.06); }

@media (max-width:700px){
  /* Am Smartphone wirkt RAL 6004 durch das Display heller/gruener -> etwas abdunkeln */
  :root{ --green:#1B3032; }
  .to-top{ right:14px; bottom:14px; width:42px; height:42px; }
}


/* ================================================================
   v21 — Mobile-First & GEO, Juli 2026
   - Rein CSS-basiertes Hamburger-Menue (kein JavaScript)
   - Touch-Flaechen mind. 48x48 px
   - Skip-Link, Fokus-Sichtbarkeit, reduzierte Bewegung
   ================================================================ */

/* ---------- Skip-Link (Tastatur & Screenreader) ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold-verlauf); color:#1B3032;
  padding:12px 20px; font-weight:600; border-radius:0 0 4px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Hamburger: Grundzustand (Desktop = unsichtbar) ---------- */
.nav-toggle{
  position:absolute; opacity:0; width:1px; height:1px;
  margin:0; pointer-events:none;
}
.nav-burger{ display:none; }
.nav-tel{ display:none; }

/* ---------- Mobile Kopfleiste + Menue ---------- */
@media (max-width:1400px){
  .header-inner{ position:relative; gap:10px; padding:10px 16px; }
  .logo{ order:1; font-size:1.15rem; }
  /* v36 — Firmenzeichen am Smartphone/Tablet groesser als am Desktop (bis 84px),
     skaliert mit der Bildschirmbreite und schrumpft auf kleinen Handys nie unter 64px */
  .logo img{ height:clamp(64px, 18vw, 84px); width:auto; }
  .btn-call{ order:2; margin-left:auto; }
  .nav-burger{ order:3; }

  .nav-burger{
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; min-width:48px; min-height:48px; padding:6px 4px;
    cursor:pointer; border-radius:4px; user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .nav-burger-bars{
    position:relative; display:block;
    width:24px; height:2px; border-radius:2px; background:var(--gold-text);
    margin:7px 0; /* Platz fuer die beiden aeusseren Balken, sonst ueberlappt die Beschriftung */
    transition:background .18s ease;
  }
  .nav-burger-bars::before,
  .nav-burger-bars::after{
    content:""; position:absolute; left:0;
    width:24px; height:2px; border-radius:2px; background:var(--gold-text);
    transition:transform .22s ease;
  }
  .nav-burger-bars::before{ transform:translateY(-7px); }
  .nav-burger-bars::after{ transform:translateY(7px); }
  .nav-burger-text{
    font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--gold-text); font-weight:600; line-height:1;
  }

  /* Geoeffnet: Balken werden zum Kreuz */
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars{ background:transparent; }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars::before{ transform:rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger .nav-burger-bars::after{ transform:rotate(-45deg); }
  .nav-toggle:focus-visible ~ .nav-burger{ outline:2px solid var(--gold-500); outline-offset:2px; }

  /* Menueflaeche */
  nav.main-nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--green);
    border-top:1px solid rgba(227,200,131,0.30);
    border-bottom:2px solid var(--gold-akzent);
    box-shadow:0 12px 24px rgba(31,58,61,0.28);
    padding:6px 0 10px;
    font-size:1rem;
  }
  .nav-toggle:checked ~ nav.main-nav{ display:flex; }

  nav.main-nav a{
    display:flex; align-items:center;
    min-height:48px; padding:12px 20px;
    color:var(--gold-text);
    border-bottom:1px solid rgba(227,200,131,0.14);
  }
  nav.main-nav a:last-child{ border-bottom:none; }
  nav.main-nav a:active{ background:rgba(227,200,131,0.10); }

  .nav-tel{
    display:flex;
    font-size:0.92rem; font-weight:600;
  }
  nav.main-nav .nav-tel:first-of-type{ margin-top:6px; border-top:1px solid rgba(227,200,131,0.30); }

  /* Anrufen-Button: sichere Touch-Groesse */
  .btn-call{ min-height:48px; padding:12px 20px; }
}

/* ---------- Touch-Flaechen in Fusszeile und Unternavigation ---------- */
@media (max-width:700px){
  footer a{ display:inline-block; padding:12px 0; line-height:1.4; }
  .footer-bottom a{ padding:12px 4px; }
  .subnav a{ display:inline-flex; align-items:center; min-height:48px; }
  .btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ---------- Faktenblock "Auf einen Blick" (Startseite) ---------- */
.facts{ background:#ebe8e4; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 24px; }
.facts h2{ font-size:clamp(1.5rem,2.4vw,1.9rem); margin-bottom:6px; }
.facts > .wrap > p{ color:var(--green); margin-bottom:24px; max-width:640px; }
.facts dl{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.facts dl > div{ background:#ebe8e4; padding:16px 18px; }
.facts dt{
  font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-akzent); font-weight:600; margin-bottom:6px;
}
.facts dd{ font-size:0.95rem; color:var(--green); }
.facts dd a{ color:var(--gold-akzent); font-weight:600; }
@media (max-width:760px){
  .facts{ padding:32px 20px; }
  .facts dl{ grid-template-columns:1fr; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* Telefonnummern in der Kopfleiste frueher ausblenden (Platz fuer 6 Menuepunkte) */
@media (max-width:1400px){ .header-phones{ display:none; } }

/* Routen-Button in den Standort-Karten */
.loc-route{ margin-top:18px; }
@media (max-width:700px){ .loc-route{ display:flex; width:100%; } }


/* ================================================================
   v29 — Schriften selbst gehostet (kein Google-Fonts-Aufruf mehr)
   Playfair Display & Work Sans, SIL Open Font License 1.1
   Lizenztexte: fonts/OFL-PlayfairDisplay.txt, fonts/OFL-WorkSans.txt
   ================================================================ */
@font-face{
  font-family:'Playfair Display';
  src:url('fonts/playfairdisplay-var.woff2') format('woff2');
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('fonts/worksans-var.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* v31 — Mobiles Menue: Hoehe begrenzen, damit nie der ganze Bildschirm verdeckt wird */
@media (max-width:1400px){
  .nav-toggle:checked ~ nav.main-nav{
    /* v36: an die groessere mobile Kopfzeile angepasst, war 72px */
    max-height:calc(100vh - 112px);
    max-height:calc(100dvh - 112px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ================================================================
   v33 — <picture>/WebP-Wrapper (Layout unveraendert halten)
   + Content-Bild auf den Leistungsseiten
   ================================================================ */
.service-card-img picture{ display:block; width:100%; height:100%; }
.reno-img picture{ display:block; width:100%; }

.content-figure{ max-width:760px; margin:4px 0 2px; }
.content-figure picture{ display:block; }
.content-figure img{ width:100%; height:auto; display:block; border-radius:10px; box-shadow:0 8px 24px rgba(31,58,61,0.13); }

/* ================================================================
   v34 — Kontaktformular
   ================================================================ */
.form-wrap{
  max-width:720px; background:#ebe8e4;
  border:1px solid var(--line); border-radius:8px;
  padding:28px 26px;
}
.form-row{ margin-bottom:20px; }
.form-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:640px){ .form-grid2{ grid-template-columns:1fr; gap:0; } }

.form-row label{
  display:block; margin-bottom:7px;
  font-size:0.78rem; letter-spacing:0.10em; text-transform:uppercase;
  color:var(--gold-akzent); font-weight:600;
}
.form-row .hint{
  display:block; margin-top:6px;
  font-size:0.82rem; color:var(--green); opacity:0.75; letter-spacing:normal;
  text-transform:none;
}
.form-row input[type=text],
.form-row input[type=tel],
.form-row input[type=email],
.form-row textarea{
  width:100%; box-sizing:border-box;
  min-height:48px; padding:12px 14px;
  font-family:inherit; font-size:1rem; color:var(--green);
  background:#fff; border:1px solid var(--line); border-radius:4px;
}
.form-row textarea{ min-height:150px; resize:vertical; line-height:1.55; }
.form-row input:focus, .form-row textarea:focus{
  outline:2px solid var(--gold-500); outline-offset:1px; border-color:var(--gold-500);
}
.form-row input::placeholder, .form-row textarea::placeholder{ color:#9a9a92; }

.form-check{ display:flex; align-items:flex-start; gap:12px; margin-bottom:24px; }
.form-check input[type=checkbox]{
  width:22px; height:22px; margin:2px 0 0; flex:0 0 auto;
  accent-color:var(--green);
}
.form-check label{
  font-size:0.9rem; color:var(--green); line-height:1.5;
  text-transform:none; letter-spacing:normal; margin:0; font-weight:400;
}
.form-check a{ color:var(--gold-akzent); font-weight:600; text-decoration:underline; }

.form-submit{ border:0; cursor:pointer; font-family:inherit; }

/* Honigtopf gegen Spam — fuer Menschen unsichtbar, nicht per display:none */
.hp-field{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* Rueckmeldungen nach dem Absenden */
.form-note{
  max-width:720px; margin-bottom:26px; padding:18px 20px;
  border-radius:6px; border:1px solid var(--line);
  font-size:0.98rem; line-height:1.6;
}
.form-note.ok{ background:#e7efe1; border-color:#aabf9e; color:var(--green); }
.form-note.err{ background:#f6ece4; border-color:#d9b48c; color:var(--green); }
.form-note strong{ display:block; margin-bottom:4px; }

.kontakt-side{ font-size:0.97rem; }
.kontakt-side h2{ font-size:1.25rem; margin-bottom:10px; }
.kontakt-side p{ margin-bottom:18px; }
.kontakt-side a{ color:var(--gold-akzent); font-weight:600; }
.kontakt-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:44px; align-items:start; }
@media (max-width:900px){ .kontakt-grid{ grid-template-columns:1fr; gap:34px; } }

/* ================================================================
   v37 — Referenzprojekte-Seite (echte Vorher-Nachher-Projekte)
   ================================================================ */
.ref-project + .ref-project{ margin-top:56px; padding-top:56px; border-top:1px solid var(--line); }
.ref-project h2{ font-size:1.5rem; margin-bottom:6px; }
.ref-project .ref-meta{ color:var(--anthracite-500); font-family:var(--serif); font-size:0.98rem; margin-bottom:20px; }
.ref-project > p{ margin-top:20px; color:var(--anthracite-700); }
.vorher-nachher{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.vorher-nachher figure{ margin:0; }
.vorher-nachher img{ width:100%; height:auto; display:block; border-radius:4px; }
.vorher-nachher figcaption{
  margin-top:10px; text-align:center; font-family:var(--sans); font-weight:600;
  font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-akzent);
}
@media (max-width:700px){
  .vorher-nachher{ grid-template-columns:1fr; gap:14px; }
}

/* ================================================================
   v42 — Prozessgalerie (echte Arbeitsfotos: Gravur & Vergoldung)
   ================================================================ */
.process-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.process-gallery figure{ margin:0; }
.process-gallery img{ width:100%; height:auto; display:block; border-radius:4px; }
.process-gallery figcaption{ margin-top:10px; font-size:0.9rem; color:var(--anthracite-500); text-align:center; }
@media (max-width:760px){
  .process-gallery{ grid-template-columns:1fr; gap:24px; }
}

/* v68: Links im Fliesstext erkennbar machen */
.prose p a{ color:var(--green); text-decoration:underline; text-decoration-color:var(--gold-500); text-decoration-thickness:1px; text-underline-offset:3px; }
.prose p a:hover{ text-decoration-thickness:2px; }

/* v70 — Grabanlagen-Kachel: Bildausschnitt Richtung Engel */
.service-card-img img.img-pos-engel{ object-position:68% center; }
/* v71 — Kachelbilder mit festem Seitenverhaeltnis statt fester Hoehe */
.service-card-img{ height:auto; aspect-ratio:16/10; }

/* ================================================================
   v72 — Preisseite
   ================================================================ */
.price-note{ max-width:760px; margin-top:18px; padding:16px 20px; border-left:3px solid var(--gold-akzent); background:#e4e1dc; color:var(--green); border-radius:0 8px 8px 0; font-size:1rem; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .price-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:560px){ .price-grid{ grid-template-columns:1fr; } }
.price-card{ background:#e4e1dc; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
.price-card picture{ display:block; aspect-ratio:4/5; background:#dcd8d2; }
.price-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.price-card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.price-card h3{ font-size:1.2rem; color:var(--green); margin-bottom:4px; }
.price-meta{ font-size:0.92rem; color:var(--green); opacity:.8; margin-bottom:14px; }
.price-row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:10px 0; border-top:1px solid #d3cec6; color:var(--green); font-size:0.95rem; }
.price-row strong{ white-space:nowrap; font-family:var(--serif); font-size:1.15rem; color:var(--gold-700); font-weight:600; }
.price-main{ margin-top:auto; }
.price-small{ max-width:760px; margin-top:20px; font-size:0.95rem; color:var(--green); }
.price-small a, .price-tables h3 a{ color:var(--gold-700); }
.price-tables{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 40px; }
@media (max-width:760px){ .price-tables{ grid-template-columns:1fr; } }
.price-tables h3{ font-size:1.15rem; margin-bottom:8px; }
.price-tables h3 a{ text-decoration:none; }
.price-table{ width:100%; border-collapse:collapse; }
.price-table td{ padding:11px 0; border-top:1px solid var(--line); color:var(--green); font-size:0.98rem; vertical-align:top; }
.price-table tr:last-child td{ border-bottom:1px solid var(--line); }
.price-table td:last-child{ text-align:right; white-space:nowrap; padding-left:16px; font-family:var(--serif); font-weight:600; color:var(--gold-700); }
.price-hint{ font-size:0.9rem; color:var(--green); opacity:.8; margin:-2px 0 8px; }
.price-sub{ display:block; font-size:0.85rem; opacity:.75; margin-top:2px; }

/* ================================================================
   v78 — Seite Aufforderung Standsicherheit
   ================================================================ */
.contact-quick{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.contact-quick .btn-ghost{ border-color:var(--green); color:var(--green); }
.contact-quick .btn-ghost:hover{ border-color:var(--gold-700); color:var(--gold-700); }
@media (max-width:560px){ .contact-quick .btn{ width:100%; text-align:center; } }
.letter-wrap{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:40px; align-items:start; }
@media (max-width:900px){ .letter-wrap{ grid-template-columns:1fr; gap:24px; } }
.letter-figure{ margin:0; max-width:460px; }
.letter-figure img{ width:100%; height:auto; display:block; border:1px solid #d3cec6; border-radius:6px; box-shadow:0 10px 28px rgba(31,58,61,0.16); background:#fff; }
.letter-figure figcaption{ font-size:0.88rem; color:var(--green); opacity:.8; margin-top:10px; }
.steps{ list-style:none; margin:0; padding:0; max-width:820px; counter-reset:none; }
.step{ display:flex; gap:20px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--line); position:relative; }
.step:last-child{ border-bottom:1px solid var(--line); }
.step-num{ flex:0 0 48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.3rem; font-weight:600; color:#1F3A3D; background:linear-gradient(135deg,#f3e2ad,#c9a24b 60%,#a8842f); box-shadow:0 4px 12px rgba(31,58,61,0.18); }
.step h3{ font-size:1.18rem; color:var(--green); margin:4px 0 6px; }
.step p{ color:var(--green); font-size:1rem; margin:0; }
.price-note a, .price-hint a{ color:var(--gold-700); }

/* v79 — Foto-Upload im Kontaktformular */
.file-pick{ position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:12px 16px; padding:12px; background:#fff; border:1px dashed #b9b2a6; border-radius:4px; }
.file-pick input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.file-btn{ display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:4px; font-size:0.92rem !important; letter-spacing:0.02em !important; text-transform:none !important; font-weight:600; color:#1F3A3D !important; background:linear-gradient(135deg,#f3e2ad,#c9a24b 60%,#a8842f); cursor:pointer; margin:0 !important; }
.file-pick input[type=file]:focus-visible + .file-btn{ outline:2px solid var(--gold-500); outline-offset:2px; }
.file-count{ font-size:0.92rem; color:var(--green); }
.file-list{ list-style:none; margin:8px 0 0; padding:0; }
.file-list li{ font-size:0.9rem; color:var(--green); padding:4px 0 4px 22px; position:relative; word-break:break-all; }
.file-list li:before{ content:"✓"; position:absolute; left:0; color:var(--gold-akzent); font-weight:700; }
.file-list li.file-warn{ color:#8a4b1f; }
.file-list li.file-warn:before{ content:"!"; color:#8a4b1f; }
.form-submit:disabled{ opacity:.7; cursor:wait; }
.file-list li.file-warn{ word-break:normal; }
/* v83 — alle Kontakt-Buttons in Gold; Mail-Link-Farbe nicht auf Buttons anwenden */
.contact-quick a.btn-gold, .contact-quick a.btn-gold[href^="mailto:"]{ color:#2b2417; }