/* ============================================================
   A&N Aufmaß — Website-Stylesheet
   Designlinie: „Premium & ruhig" (Variante 03) — Petrol / Messing, Fraunces-Serif
   Gemeinsame Basis für Startseite + alle Unterseiten
   ============================================================ */

:root{
  /* Farbwelt */
  --base:        #F6F4EF;   /* warmes Off-White / Greige */
  --base-2:      #EFEBE2;   /* etwas tiefere Fläche */
  --surface:     #FCFBF8;   /* Kartenflächen, fast weiß */
  --petrol:      #0F3D3E;   /* tiefes Petrol / Tannengrün – Marke */
  --petrol-2:    #13403C;
  --petrol-deep: #0A2C2C;   /* sehr dunkler Footer/Hero-Block */
  --brass:       #B08D57;   /* gedämpftes Messing / Sand */
  --brass-soft:  #C7A878;
  --ink:         #1C2826;   /* fast-schwarzer Text auf hell */
  --muted:       #5E6B66;   /* gedämpfter Text */
  --muted-2:     #8A958F;
  --line:        #E0DACE;   /* feine Hairline auf hell */
  --line-dark:   rgba(255,255,255,.14); /* Hairline auf dunkel */
  --on-dark:     #EAEFEA;
  --on-dark-mut: #A9BCB6;

  --shadow-sm: 0 1px 2px rgba(15,61,62,.04), 0 1px 3px rgba(15,61,62,.05);
  --shadow:    0 4px 14px rgba(15,61,62,.06), 0 2px 6px rgba(15,61,62,.05);
  --shadow-lg: 0 18px 50px rgba(10,44,44,.12), 0 6px 18px rgba(10,44,44,.08);

  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;

  --maxw: 1180px;
  --pad:  clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; overflow-x:clip; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--base);
  line-height:1.65;
  font-size:clamp(16px, 1.05vw, 17.5px);
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Typo ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.012em; margin:0; }
h2{ font-size:clamp(1.85rem, 3.6vw, 2.95rem); color:var(--petrol); }
h3{ font-size:clamp(1.2rem, 1.7vw, 1.42rem); color:var(--ink); letter-spacing:-.008em; }

.eyebrow{
  font-family:var(--sans);
  font-size:.74rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass);
  display:inline-flex; align-items:center; gap:.7em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:30px; height:1px; background:var(--brass);
  display:inline-block; opacity:.7;
}
.lead{ color:var(--muted); font-size:clamp(1.02rem,1.25vw,1.18rem); max-width:60ch; }

.section{ padding-block:clamp(60px, 8vw, 120px); position:relative; }
.section--tight{ padding-block:clamp(46px, 6vw, 84px); }
.section-head{ max-width:64ch; margin-bottom:clamp(34px,5vw,60px); }
.section-head .lead{ margin-top:1rem; }

/* ---------- Reveal-Animation ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  letter-spacing:.01em;
  padding:.92em 1.5em; border-radius:999px;
  text-decoration:none; cursor:pointer;
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  will-change:transform;
}
.btn .ico{ transition:transform .25s ease; }
.btn-primary{ background:var(--petrol); color:#fff; box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--petrol-2); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-primary:hover .ico{ transform:translateY(2px); }
.btn-ghost{ background:transparent; color:var(--petrol); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--petrol); transform:translateY(-2px); background:var(--surface); }
.btn-brass{ background:var(--brass); color:#23170A; box-shadow:0 6px 18px rgba(176,141,87,.28); }
.btn-brass:hover{ background:var(--brass-soft); transform:translateY(-2px); box-shadow:0 12px 26px rgba(176,141,87,.34); }
.btn-light{ background:#fff; color:var(--petrol); box-shadow:var(--shadow); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.34); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }

/* ===================================================== HEADER */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(246,244,239,.82);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.site-header.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(15,61,62,.02), 0 8px 24px rgba(15,61,62,.05); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }
.brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.brand img{ height:clamp(48px, 5.4vw, 62px); width:auto; }
.brand .logo-mark{ display:none; }   /* kompaktes Monogramm – nur auf Handys eingeblendet */
@media (max-width:600px){
  .brand .logo-full{ display:none; }
  .brand .logo-mark{ display:block; height:clamp(42px, 12vw, 48px); }
}
.nav-links{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); list-style:none; margin:0; padding:0; }
.nav-links > li{ position:relative; }
.nav-links a{
  text-decoration:none; color:var(--muted); font-weight:500; font-size:.95rem;
  letter-spacing:.01em; position:relative; padding:.3em 0; transition:color .2s ease;
  display:inline-flex; align-items:center; gap:.35em;
}
.nav-links > li > a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--brass); transition:width .28s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--petrol); }
.nav-links > li > a:hover::after, .nav-links > li > a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:inline-flex; }
.nav-links li.only-cta{ display:none; }

/* Dropdown „Leistungen" */
.has-drop > a .caret{ transition:transform .25s ease; }
.has-drop:hover > a .caret, .has-drop:focus-within > a .caret{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:288px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg); padding:.6rem;
  list-style:none; margin:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease, visibility .24s;
  z-index:70;
}
.dropdown::before{ /* unsichtbare Brücke zum Hover */
  content:""; position:absolute; top:-16px; left:0; right:0; height:16px;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.dropdown li{ margin:0; }
.dropdown a{
  display:flex; align-items:flex-start; gap:.7rem; padding:.7rem .8rem; border-radius:10px;
  color:var(--ink); font-weight:500; transition:background .2s ease, color .2s ease;
}
.dropdown a::after{ display:none; }
.dropdown a:hover{ background:var(--base-2); color:var(--petrol); }
.dropdown a .di{ flex:0 0 auto; color:var(--brass); margin-top:1px; }
.dropdown a .dk{ display:block; line-height:1.25; }
.dropdown a .dk small{ display:block; font-size:.78rem; color:var(--muted-2); font-weight:400; }

/* Hamburger / Mobile-Toggle */
.nav-toggle{
  display:none; flex-direction:column; gap:5px; justify-content:center;
  width:46px; height:46px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); cursor:pointer; flex-shrink:0;
}
.nav-toggle span{ width:20px; height:2px; background:var(--petrol); margin-inline:auto; border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-backdrop{ display:none; }

@media (max-width:900px){
  /* Off-Canvas-Menü braucht den Viewport als Bezug. Der backdrop-filter am
     Header macht ihn sonst zum containing block (Panel kollabiert auf
     Header-Höhe) und die Header-Stacking-Gruppe läge unter dem .nav-backdrop.
     Mobil daher: kein Blur, Header über den Backdrop heben, Toggle übers Panel. */
  .site-header{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(246,244,239,.97); z-index:70;
  }
  .nav-toggle{ display:flex; position:relative; z-index:75; }
  .nav-cta{ display:none; }

  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 380px);
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); box-shadow:var(--shadow-lg);
    padding:clamp(84px,12vw,104px) clamp(22px,6vw,32px) 32px;
    transform:translateX(100%); transition:transform .36s cubic-bezier(.22,.61,.36,1);
    overflow-y:auto; z-index:65;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links > li{ border-bottom:1px solid var(--line); }
  .nav-links > li > a{ padding:1rem 0; font-size:1.06rem; }
  .nav-links > li > a::after{ display:none; }
  .nav-links li.only-cta{ display:block; }
  .nav-links li.only-cta a{ color:var(--petrol); font-weight:600; }

  /* Dropdown im Mobile-Menü: statisch ausgeklappt */
  .dropdown{
    position:static; opacity:1; visibility:visible; pointer-events:auto;
    transform:none; box-shadow:none; border:none; min-width:0;
    background:transparent; padding:.2rem 0 .8rem .2rem;
  }
  .dropdown::before{ display:none; }
  .has-drop > a .caret{ display:none; }
  .dropdown a{ padding:.55rem .4rem; }

  .nav-backdrop.show{
    display:block; position:fixed; inset:0; background:rgba(10,44,44,.42);
    backdrop-filter:blur(2px); z-index:64; animation:fadeIn .3s ease;
  }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
}

/* ===================================================== HERO (Startseite) */
.hero{ position:relative; padding-top:clamp(48px,7vw,88px); padding-bottom:clamp(48px,7vw,96px); }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 88% -8%, rgba(176,141,87,.10), transparent 60%),
    radial-gradient(80% 70% at 0% 0%, rgba(15,61,62,.05), transparent 55%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.76rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--petrol); background:rgba(15,61,62,.06);
  border:1px solid rgba(15,61,62,.10);
  padding:.5em 1em; border-radius:999px; margin-bottom:1.6rem;
}
.hero-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass); box-shadow:0 0 0 4px rgba(176,141,87,.18); }
.hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.5rem, 5.4vw, 4.2rem);
  line-height:1.02; letter-spacing:-.02em; color:var(--petrol);
  margin:0 0 .35em;
}
.hero h1 .amp{ font-style:italic; font-weight:400; color:var(--brass); }
.hero .slogan{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.25rem, 2.2vw, 1.7rem); line-height:1.34;
  color:var(--ink); max-width:30ch; margin:.2em 0 0;
}
.hero p.intro{ color:var(--muted); max-width:50ch; margin:1.4rem 0 2.1rem; font-size:1.06rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

.hero-media{ position:relative; }
.hero-media .frame{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); border:1px solid var(--line);
  background:var(--surface);
}
.hero-media .frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.05; }
.hero-media .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,44,44,.20));
  pointer-events:none;
}
.hero-badge{
  position:absolute; left:-18px; bottom:26px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lg);
  padding:.95rem 1.2rem; display:flex; align-items:center; gap:.85rem;
  max-width:230px;
}
.hero-badge .num{ font-family:var(--serif); font-size:2rem; font-weight:500; color:var(--petrol); line-height:1; }
.hero-badge .lbl{ font-size:.82rem; color:var(--muted); line-height:1.3; }

/* Trust-Leiste */
.trustbar{ border-top:1px solid var(--line); margin-top:clamp(46px,6vw,76px); padding-top:clamp(26px,3.5vw,38px); }
.trustbar ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,3vw,40px); }
.trustbar li{ display:flex; align-items:flex-start; gap:.8rem; min-width:0; }
.trustbar li > span:last-child{ min-width:0; }
.trustbar .ti{ flex:0 0 auto; color:var(--brass); margin-top:2px; }
.trustbar .tt{ font-weight:600; color:var(--ink); font-size:.95rem; line-height:1.3; overflow-wrap:break-word; }
.trustbar .ts{ font-size:.82rem; color:var(--muted-2); overflow-wrap:break-word; }

/* ===================================================== SUB-HERO (Unterseiten) */
.subhero{ position:relative; background:var(--petrol-deep); color:var(--on-dark); overflow:hidden; }
.subhero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 90% at 92% -10%, rgba(176,141,87,.20), transparent 58%),
    radial-gradient(70% 80% at -5% 110%, rgba(255,255,255,.06), transparent 55%);
}
.subhero .wrap{ position:relative; z-index:1; padding-block:clamp(34px,5vw,60px) clamp(48px,7vw,86px); }
.subhero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,64px); align-items:center; }
.subhero .eyebrow{ color:var(--brass-soft); }
.subhero .eyebrow::before{ background:var(--brass-soft); }
.subhero h1{
  font-family:var(--serif); font-weight:500; color:#fff;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem); line-height:1.04; letter-spacing:-.018em;
  margin:0 0 .5em; max-width:18ch;
}
.subhero p.sub{ color:var(--on-dark-mut); font-size:clamp(1.04rem,1.3vw,1.18rem); max-width:52ch; margin:0 0 2rem; }
.subhero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.subhero-media .frame{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-dark);
  box-shadow:var(--shadow-lg); background:rgba(255,255,255,.03);
}
.subhero-media .frame img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }

/* Breadcrumb */
.breadcrumb{ font-size:.84rem; margin:0 0 1.4rem; color:var(--on-dark-mut); display:flex; flex-wrap:wrap; align-items:center; gap:.5em; }
.breadcrumb a{ color:var(--on-dark-mut); text-decoration:none; transition:color .2s ease; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb [aria-current="page"]{ color:var(--brass-soft); }
/* Breadcrumb-Variante auf hellem Grund */
.breadcrumb.on-light, .breadcrumb.on-light a{ color:var(--muted); }
.breadcrumb.on-light a:hover{ color:var(--petrol); }
.breadcrumb.on-light [aria-current="page"]{ color:var(--brass); }

/* ===================================================== LEISTUNGEN */
.bg-fade-down{ background:linear-gradient(180deg, var(--base) 0%, var(--base-2) 100%); }
.bg-fade-up{ background:linear-gradient(180deg, var(--base-2) 0%, var(--base) 100%); }
.lead-row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.2vw,28px); margin-top:clamp(34px,4vw,52px); }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.4vw,38px); box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
}
.card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:0; background:var(--brass);
  transition:width .4s cubic-bezier(.22,.61,.36,1);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(176,141,87,.4); }
.card:hover::before{ width:100%; }
.card .step{
  font-family:var(--serif); font-size:1.05rem; font-weight:500; color:var(--brass);
  display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem;
}
.card .step .ring{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); display:grid; place-items:center;
  color:var(--petrol); background:var(--base);
}
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--muted); margin:0; font-size:1rem; }
.card .tags{ margin-top:1.3rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{ font-size:.78rem; font-weight:600; color:var(--petrol); background:rgba(15,61,62,.06); border-radius:999px; padding:.32em .85em; letter-spacing:.01em; }
.card .card-link{
  margin-top:1.3rem; display:inline-flex; align-items:center; gap:.45em;
  font-size:.9rem; font-weight:600; color:var(--brass); text-decoration:none;
}
.card .card-link .ico{ transition:transform .3s ease; }
.card:hover .card-link .ico{ transform:translateX(3px); }
.leistungen-cta{ margin-top:clamp(30px,4vw,46px); display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; }
.leistungen-cta .note{ color:var(--muted); font-size:.95rem; max-width:42ch; }

/* ===================================================== ABLAUF (Steps) */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(34px,4vw,54px); counter-reset:step; }
.step-item{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(24px,2.2vw,32px); box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.step-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(176,141,87,.35); }
.step-item .sn{
  font-family:var(--serif); font-size:1.05rem; font-weight:600; color:#fff;
  width:46px; height:46px; border-radius:12px; background:var(--petrol);
  display:grid; place-items:center; margin-bottom:1.2rem;
}
.step-item:nth-child(2) .sn{ background:var(--petrol-2); }
.step-item h3{ font-size:1.18rem; margin-bottom:.5rem; }
.step-item p{ color:var(--muted); margin:0; font-size:.97rem; }
.step-item .connect{
  position:absolute; top:clamp(46px,4vw,56px); right:-13px; z-index:2; color:var(--brass);
  background:var(--base); border-radius:50%;
}
@media (max-width:900px){ .step-item .connect{ display:none; } }

/* ===================================================== MUSTERPROJEKT */
.docs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); margin-top:clamp(34px,4vw,52px); }
.doc{
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.doc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(15,61,62,.22); }
.doc-thumb{ position:relative; aspect-ratio:1024/740; overflow:hidden; background:var(--base-2); }
.doc-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.doc:hover .doc-thumb img{ transform:scale(1.045); }
.doc-thumb .ribbon{
  position:absolute; top:14px; left:14px;
  background:rgba(252,251,248,.92); backdrop-filter:blur(4px);
  border:1px solid var(--line); color:var(--petrol);
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.4em .85em; border-radius:999px;
}
.doc-foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.35rem 1.3rem; border-top:1px solid var(--line); }
.doc-foot .dt{ font-family:var(--serif); font-size:1.2rem; font-weight:500; color:var(--ink); }
.doc-foot .dl{ display:flex; align-items:center; gap:.45em; font-size:.84rem; font-weight:600; color:var(--brass); white-space:nowrap; }
.doc:hover .dl .ico{ transform:translate(2px,-2px); }
.doc .dl .ico{ transition:transform .3s ease; }

/* ===================================================== REFERENZPROJEKTE */
.refs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); margin-top:clamp(34px,4vw,52px); }
.ref{
  position:relative; display:block; text-decoration:none; border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);
  aspect-ratio:1024/704; background:var(--base-2);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.ref:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.ref img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.ref:hover img{ transform:scale(1.05); }
.ref .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,44,44,0) 38%, rgba(10,44,44,.78) 100%); }
.ref .cap{ position:absolute; left:0; right:0; bottom:0; padding:1.3rem 1.4rem; color:#fff; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.ref .cap .ct{ font-family:var(--serif); font-size:clamp(1.1rem,1.5vw,1.3rem); font-weight:500; line-height:1.18; text-shadow:0 1px 10px rgba(0,0,0,.3); }
.ref .cap .arrow{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.32);
  display:grid; place-items:center; backdrop-filter:blur(3px);
  transition:background .3s ease, transform .3s ease;
}
.ref:hover .cap .arrow{ background:var(--brass); border-color:var(--brass); transform:translate(2px,-2px); }

/* Referenz-Kacheln ohne Foto (benannte Bauvorhaben) */
.ref-named{
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(155deg, var(--petrol) 0%, var(--petrol-deep) 100%);
  border:1px solid var(--line-dark); color:#fff;
  padding:clamp(22px,2.6vw,30px);
}
.ref-named:hover{ transform:none; box-shadow:var(--shadow-lg); }   /* Info-Kacheln: nur Schatten */
a.ref-named:hover{ transform:translateY(-5px); }                  /* verlinkte Kachel: anheben */
.ref-named .rn-ico{
  width:54px; height:54px; border-radius:14px;
  background:rgba(255,255,255,.07); border:1px solid var(--line-dark);
  color:var(--brass-soft); display:grid; place-items:center;
}
.ref-named .rn-cap{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; }
.ref-named .ct{ display:block; font-family:var(--serif); font-size:clamp(1.1rem,1.5vw,1.3rem); font-weight:500; line-height:1.18; color:#fff; }
.ref-named .rn-sub{ display:block; margin-top:.4rem; font-size:.84rem; font-weight:400; color:var(--on-dark-mut); }
.ref-named .arrow{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center; color:#fff;
  transition:background .3s ease, transform .3s ease;
}
a.ref-named:hover .arrow{ background:var(--brass); border-color:var(--brass); transform:translate(2px,-2px); }

/* ===================================================== PARTNER */
.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(30px,4vw,48px); }
.partner{
  display:flex; align-items:center; justify-content:center; min-height:128px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.5rem 1.8rem; text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.partner:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(176,141,87,.4); }
.partner img{ max-height:54px; width:auto; object-fit:contain; opacity:.78; filter:grayscale(100%); transition:opacity .3s ease, filter .3s ease; }
.partner:hover img{ opacity:1; filter:grayscale(0%); }
.partner.wordmark{ flex-direction:column; gap:.3rem; }
.partner .wm{ font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--petrol); letter-spacing:.01em; line-height:1; }
.partner .wm b{ color:var(--brass); font-weight:500; }
.partner .wm-sub{ font-size:.72rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }

/* ===================================================== ÜBER UNS / dunkler Block */
.section-dark{ background:var(--petrol-deep); color:var(--on-dark); position:relative; overflow:hidden; }
.section-dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(176,141,87,.16), transparent 55%),
    radial-gradient(60% 80% at 0% 100%, rgba(255,255,255,.05), transparent 50%);
}
.section-dark .wrap{ position:relative; z-index:1; }
.section-dark .eyebrow{ color:var(--brass-soft); }
.section-dark .eyebrow::before{ background:var(--brass-soft); }
.section-dark h2{ color:#fff; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:center; }
.about-grid p{ color:var(--on-dark-mut); font-size:1.08rem; max-width:54ch; }
.about-grid p + p{ margin-top:1.1rem; }
.claim{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.15rem); line-height:1.25; color:#fff;
  margin-top:1.8rem; padding-left:1.2rem; border-left:2px solid var(--brass);
}
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:var(--r-lg); overflow:hidden; }
.about-stats .st{ background:rgba(255,255,255,.025); padding:clamp(22px,3vw,34px); }
.about-stats .st .n{ font-family:var(--serif); font-size:clamp(2.1rem,3.4vw,2.9rem); font-weight:500; color:#fff; line-height:1; }
.about-stats .st .n .u{ color:var(--brass-soft); }
.about-stats .st .l{ margin-top:.5rem; color:var(--on-dark-mut); font-size:.92rem; }

/* ===================================================== FAQ */
.faq{ max-width:860px; margin-top:clamp(30px,4vw,48px); }
.faq-item{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  margin-bottom:.9rem; box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.faq-item[open]{ border-color:rgba(176,141,87,.4); box-shadow:var(--shadow); }
.faq-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:clamp(1.05rem,1.6vw,1.35rem) clamp(1.2rem,2vw,1.7rem);
  font-family:var(--serif); font-size:clamp(1.08rem,1.5vw,1.24rem); font-weight:500; color:var(--petrol);
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--petrol-2); }
.faq-item .qmark{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--brass); position:relative; transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.faq-item .qmark::before, .faq-item .qmark::after{
  content:""; position:absolute; background:currentColor; border-radius:2px;
}
.faq-item .qmark::before{ width:12px; height:2px; }
.faq-item .qmark::after{ width:2px; height:12px; transition:transform .3s ease; }
.faq-item[open] .qmark{ background:var(--brass); border-color:var(--brass); color:#fff; }
.faq-item[open] .qmark::after{ transform:rotate(90deg) scaleX(0); }
.faq-answer{ padding:0 clamp(1.2rem,2vw,1.7rem) clamp(1.2rem,1.8vw,1.5rem); color:var(--muted); }
.faq-answer p{ margin:0; }
.faq-answer p + p{ margin-top:.8rem; }

/* ===================================================== VORTEILS-KARTEN (z. B. Bluebeam) */
.benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(34px,4vw,54px); }
.benefit{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(24px,2.2vw,32px); box-shadow:var(--shadow-sm);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.benefit:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(176,141,87,.35); }
.benefit .bi{
  width:50px; height:50px; border-radius:14px; background:rgba(15,61,62,.06);
  color:var(--petrol); display:grid; place-items:center; margin-bottom:1.2rem;
}
.benefit h3{ font-size:1.18rem; margin-bottom:.5rem; }
.benefit p{ color:var(--muted); margin:0; font-size:.96rem; }

/* ===================================================== PROSE / CONTENT (Gewerke) */
.content-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(34px,5vw,68px); align-items:start; }
.prose h2{ margin-bottom:1.1rem; }
.prose h3{ margin:2rem 0 .9rem; color:var(--petrol); }
.prose p{ color:var(--muted); margin:0 0 1.1rem; font-size:1.06rem; }
.prose p:last-child{ margin-bottom:0; }

/* Häkchen-Liste */
.check-list{ list-style:none; margin:1.2rem 0 0; padding:0; }
.check-list li{ position:relative; padding:.6rem 0 .6rem 2.2rem; border-top:1px solid var(--line); color:var(--ink); font-size:1.02rem; }
.check-list li:first-child{ border-top:none; }
.check-list li::before{
  content:""; position:absolute; left:0; top:.78rem; width:22px; height:22px; border-radius:50%;
  background:rgba(176,141,87,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B08D57' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

/* Info-/Aside-Box (z. B. „Sie nutzen Bluebeam selbst?") */
.aside-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.6vw,38px); box-shadow:var(--shadow-sm); align-self:start; position:sticky; top:100px;
}
.aside-card .ac-ico{ width:48px; height:48px; border-radius:14px; background:rgba(176,141,87,.14); color:var(--brass); display:grid; place-items:center; margin-bottom:1.1rem; }
.aside-card h3{ margin-bottom:.6rem; }
.aside-card p{ color:var(--muted); font-size:.98rem; margin:0 0 1.3rem; }

/* ===================================================== CROSS-LINKS / verwandte Seiten */
.cross{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(30px,4vw,48px); }
.cross-card{
  display:flex; flex-direction:column; gap:.5rem; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2vw,30px); box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cross-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:rgba(176,141,87,.4); }
.cross-card .cc-ey{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.cross-card h3{ font-size:1.16rem; }
.cross-card p{ color:var(--muted); font-size:.95rem; margin:.2rem 0 0; }
.cross-card .cc-go{ margin-top:.8rem; display:inline-flex; align-items:center; gap:.4em; font-size:.88rem; font-weight:600; color:var(--petrol); }
.cross-card .cc-go .ico{ transition:transform .3s ease; }
.cross-card:hover .cc-go .ico{ transform:translateX(3px); }

/* ===================================================== CTA-BAND */
.cta-band{ background:var(--petrol); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 120% at 100% 0%, rgba(176,141,87,.22), transparent 55%);
}
.cta-band .wrap{ position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.8rem; padding-block:clamp(44px,6vw,72px); }
.cta-band h2{ color:#fff; max-width:20ch; }
.cta-band p{ color:rgba(234,239,234,.8); max-width:46ch; margin:.7rem 0 0; }
.cta-band .cta-actions{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ===================================================== KONTAKT */
.contact-panel{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.contact-body{ padding:clamp(28px,3.6vw,52px); }
.contact-body h2{ font-size:clamp(1.7rem,2.8vw,2.4rem); }
.contact-intro{ color:var(--muted); margin:.4rem 0 0; max-width:46ch; }
.contact-body .who{ font-family:var(--serif); font-size:1.35rem; color:var(--ink); margin:.9rem 0 0; }
.contact-body .role{ color:var(--brass); font-weight:600; font-size:.88rem; letter-spacing:.04em; }
.contact-list{ list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column; }
.contact-list li{ display:flex; align-items:flex-start; gap:1rem; padding:1.05rem 0; border-top:1px solid var(--line); }
.contact-list li:first-child{ border-top:none; padding-top:0; }
.contact-list .ci{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:rgba(15,61,62,.06); color:var(--petrol);
  display:grid; place-items:center; margin-top:2px;
}
.contact-list .ci + span{ display:flex; flex-direction:column; min-width:0; }
.contact-list .ck{ font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.4rem; }
.contact-list a, .contact-list .cv{ color:var(--ink); text-decoration:none; font-weight:500; font-size:1.05rem; overflow-wrap:anywhere; }
.contact-list a:hover{ color:var(--petrol); text-decoration:underline; text-underline-offset:3px; }
.contact-actions{ margin-top:clamp(2.2rem,3.4vw,3rem); display:flex; flex-wrap:wrap; gap:.8rem; }
.contact-figure{ position:relative; min-height:360px; }
.contact-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 28%; }

/* ===================================================== FOOTER */
.site-footer{ background:var(--petrol-deep); color:var(--on-dark-mut); padding-block:clamp(40px,5vw,60px); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:2rem; border-bottom:1px solid var(--line-dark); }
.footer-brand .footer-logo{ background:rgba(255,255,255,.92); border-radius:10px; padding:.7rem 1rem; display:inline-flex; }
.footer-brand .footer-logo img{ height:48px; width:auto; }
.footer-brand p{ margin:1.1rem 0 0; max-width:36ch; font-size:.92rem; color:var(--on-dark-mut); }
.footer-col h4{ font-family:var(--sans); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-soft); margin:0 0 1.1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.footer-col a, .footer-col .fc-txt{ color:var(--on-dark-mut); text-decoration:none; font-size:.92rem; font-weight:500; transition:color .2s ease; overflow-wrap:anywhere; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:space-between; padding-top:1.6rem; font-size:.84rem; }
.footer-bottom .meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
.footer-bottom a{ color:var(--on-dark-mut); text-decoration:none; }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom .copy{ color:var(--muted-2); }

/* ===================================================== RESPONSIVE */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ order:-1; max-width:560px; }
  .subhero-grid{ grid-template-columns:1fr; }
  .subhero-media{ max-width:560px; }
  .about-grid, .content-grid{ grid-template-columns:1fr; }
  .aside-card{ position:static; }
  .contact-panel{ grid-template-columns:1fr; }
  .contact-figure{ order:-1; min-height:0; aspect-ratio:1/1; max-height:440px; }
  .cards, .docs, .refs{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .trustbar ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:680px){
  .cards, .docs, .refs, .partners{ grid-template-columns:1fr; }
  .steps, .benefits{ grid-template-columns:1fr; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .lead-row{ flex-direction:column; align-items:flex-start; }
  .doc-foot{ padding:1rem 1.1rem 1.15rem; }
  .hero-badge{ left:0; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  :root{ --pad:18px; }
  .about-stats{ grid-template-columns:1fr; }
}

/* ===================================================== LEGAL / RECHTSTEXTE */
.legal-head{ border-bottom:1px solid var(--line); }
.legal-head .wrap{ padding-block:clamp(30px,5vw,52px); }
.legal{ max-width:760px; }
.legal h2{ font-size:clamp(1.3rem,2vw,1.7rem); color:var(--petrol); margin:2.6rem 0 .8rem; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:1.15rem; margin:1.7rem 0 .5rem; }
.legal p{ color:var(--muted); margin:0 0 1rem; }
.legal ul{ margin:0 0 1.1rem; padding-left:1.25rem; color:var(--muted); }
.legal li{ margin-bottom:.4rem; }
.legal a{ color:var(--petrol); text-underline-offset:3px; }
.legal .note-box{ background:var(--base-2); border:1px solid var(--line); border-left:3px solid var(--brass); border-radius:var(--r-sm); padding:1rem 1.2rem; margin:0 0 1.4rem; font-size:.92rem; }
.legal .note-box strong{ color:var(--ink); }

/* ===================================================== UTILITIES */
.skip{ position:absolute; left:-9999px; top:auto; }
.skip:focus{ left:var(--pad); top:10px; z-index:99; background:var(--petrol); color:#fff; padding:.6em 1em; border-radius:8px; }
a:focus-visible, .btn:focus-visible, summary:focus-visible, .nav-toggle:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:6px; }
.center{ text-align:center; margin-inline:auto; }