/* ---------- Schriften ---------- */
@font-face{font-family:"Plex Sans";src:url(/fonts/plexsans-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/fonts/plexmono500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Vollkorn";src:url(/fonts/vollkorn-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --paper:#edeef0;
  --paper-2:#e3e5e8;
  --surface:#ffffff;
  --ink:#16181b;
  --muted:#5b6067;
  --line:rgba(22,24,27,.14);
  --line-soft:rgba(22,24,27,.08);
  --wine:#690d1c;
  --wine-lift:#97253a;
  --band:#5c0c19;
  --band-ink:#f4e9ea;
  --band-muted:rgba(244,233,234,.68);
  --band-line:rgba(244,233,234,.22);
  --logo-plate:transparent;
  --foot-bg:#16181b;
  --foot-ink:#edeef0;
  --shadow:0 1px 2px rgba(22,24,27,.05),0 12px 32px -18px rgba(22,24,27,.35);
  --shadow-lift:0 2px 4px rgba(22,24,27,.06),0 26px 50px -22px rgba(105,13,28,.4);
  --gutter:clamp(20px,5vw,56px);
  --wrap:1180px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101215;
    --paper-2:#16191d;
    --surface:#1a1d21;
    --ink:#e8e9eb;
    --muted:#9aa1a9;
    --line:rgba(232,233,235,.16);
    --line-soft:rgba(232,233,235,.09);
    --wine:#d5838f;
    --wine-lift:#e8a2ad;
    --band:#43080f;
    --band-ink:#f4e9ea;
    --band-muted:rgba(244,233,234,.66);
    --band-line:rgba(244,233,234,.2);
    --logo-plate:#ffffff;
    --foot-bg:#08090b;
    --foot-ink:#e8e9eb;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 28px 54px -22px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#101215;--paper-2:#16191d;--surface:#1a1d21;--ink:#e8e9eb;--muted:#9aa1a9;
  --line:rgba(232,233,235,.16);--line-soft:rgba(232,233,235,.09);
  --wine:#d5838f;--wine-lift:#e8a2ad;--band:#43080f;--band-ink:#f4e9ea;
  --band-muted:rgba(244,233,234,.66);--band-line:rgba(244,233,234,.2);--logo-plate:#ffffff;--foot-bg:#08090b;--foot-ink:#e8e9eb;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 6px rgba(0,0,0,.55),0 28px 54px -22px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --paper:#edeef0;--paper-2:#e3e5e8;--surface:#ffffff;--ink:#16181b;--muted:#5b6067;
  --line:rgba(22,24,27,.14);--line-soft:rgba(22,24,27,.08);
  --wine:#690d1c;--wine-lift:#97253a;--band:#5c0c19;--band-ink:#f4e9ea;
  --band-muted:rgba(244,233,234,.68);--band-line:rgba(244,233,234,.22);--logo-plate:transparent;--foot-bg:#16181b;--foot-ink:#edeef0;
  --shadow:0 1px 2px rgba(22,24,27,.05),0 12px 32px -18px rgba(22,24,27,.35);
  --shadow-lift:0 2px 4px rgba(22,24,27,.06),0 26px 50px -22px rgba(105,13,28,.4);
}

/* ---------- Grundlage ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:146px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.97rem + .16vw,1.06rem);line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:"Vollkorn",Georgia,serif;font-weight:600;text-wrap:balance;margin:0;line-height:1.05}
p{margin:0}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--wine);outline-offset:3px;border-radius:2px}

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

.label{
  font-family:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;
  font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;
}


/* ---------- Kopfzeile ---------- */
.head{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:126px}
.brand{display:flex;align-items:center;background:var(--logo-plate);padding:5px 9px;border-radius:3px;line-height:0}
.brand img{height:clamp(58px,6.8vw,94px);width:auto}
.nav{display:flex;gap:clamp(1rem,3vw,2.4rem);align-items:center}
.nav a{
  text-decoration:none;color:var(--muted);position:relative;padding:.35rem 0;
  font-family:"Plex Mono",ui-monospace,monospace;font-weight:500;
  font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;
  transition:color .25s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--wine);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{transform:scaleX(1)}
@media (max-width:560px){.nav a{font-size:.68rem;letter-spacing:.1em}.brand img{height:58px}.head-in{min-height:96px}}

/* ---------- Hero ---------- */
.hero{position:relative;padding-block:clamp(48px,7vw,92px) 0}
.hero-grid{display:grid;gap:clamp(32px,5vw,60px);align-items:center}
@media (min-width:960px){.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}}

.hero-eyebrow{color:var(--wine);display:flex;align-items:center;gap:.85rem;margin-bottom:1.6rem}
.hero-eyebrow::after{content:"";height:1px;flex:1;background:var(--line);max-width:120px}
.hero h1{font-size:clamp(2rem,4.4vw,3.9rem);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--wine)}
.hero-lead{
  margin-top:1.5rem;max-width:34ch;color:var(--muted);
  font-size:clamp(1.08rem,.98rem + .55vw,1.34rem);line-height:1.58;
}
.hero-mail{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2.2rem;
  text-decoration:none;color:var(--ink);border-bottom:1px solid var(--wine);
  padding-bottom:.3rem;font-weight:600;transition:color .25s ease,gap .25s ease;
}
.hero-mail svg{width:15px;height:15px;color:var(--wine);flex:none}
.hero-mail:hover{color:var(--wine);gap:1.05rem}

.hero-figure{position:relative;isolation:isolate}
.hero-figure img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.05;
  filter:saturate(.92) contrast(1.03);
}
@media (min-width:960px){
  .hero-figure{margin-right:calc(-1 * (max(0px,(100vw - var(--wrap))/2) + var(--gutter)))}
  .hero-figure img{aspect-ratio:auto;min-height:min(74vh,620px)}
  .hero-figure::before{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 40%,transparent) 22%,transparent 46%);
  }
}
.hero-figure::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--wine);opacity:.1;mix-blend-mode:multiply;
}

/* Kernbereiche — sitzen auf der Naht zwischen Hero und Leistungen */
.pillars{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  margin-top:clamp(40px,6vw,72px);box-shadow:var(--shadow);position:relative;z-index:5}
@media (min-width:720px){.pillars{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.pillars{margin-top:-64px}}
.pillar{background:var(--surface);padding:clamp(26px,3.4vw,40px);display:flex;gap:1.3rem;align-items:flex-start}
.pillar svg{width:30px;height:30px;flex:none;color:var(--wine);stroke-width:1.3}
.pillar h3{font-size:1.32rem;margin-bottom:.55rem}
.pillar p{color:var(--muted);font-size:.98rem;line-height:1.62}

/* ---------- Abschnitte mit Marginalspalte ---------- */
.section{padding-block:clamp(76px,10vw,140px)}
.ledger{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:1000px){.ledger{grid-template-columns:170px minmax(0,1fr)}}
.rail{color:var(--muted);border-top:1px solid var(--wine);padding-top:.9rem}
@media (min-width:1000px){.rail{position:sticky;top:168px;align-self:start}}
.section h2{font-size:clamp(1.95rem,1.4rem + 2.2vw,3rem);letter-spacing:-.015em;max-width:20ch}
.section-lead{margin-top:1.1rem;color:var(--muted);max-width:56ch;font-size:1.08rem}

/* ---------- Leistungen ---------- */
.cards{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:clamp(36px,4.5vw,58px)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface);border:1px solid var(--line-soft);display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:color-mix(in srgb,var(--wine) 40%,transparent)}
.card-media{overflow:hidden;aspect-ratio:16/10;position:relative}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1);filter:saturate(.94)}
.card:hover .card-media img{transform:scale(1.05)}
.card-media::after{content:"";position:absolute;inset:0;background:var(--wine);opacity:.07;mix-blend-mode:multiply}
.card-body{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:.85rem;flex:1}
.card .label{color:var(--wine);line-height:1.5;min-height:2.1rem}
.card h3{font-size:1.5rem}
.card p:last-child{color:var(--muted);font-size:.98rem;line-height:1.65}

/* ---------- Projektumsetzung ---------- */
.split{display:grid;gap:clamp(34px,5vw,68px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr)}}
.split-figure{position:relative}
.split-figure img{width:100%;aspect-ratio:5/4;object-fit:cover;position:relative;z-index:2;box-shadow:var(--shadow)}
.split-figure::before{
  content:"";position:absolute;z-index:1;inset:auto auto -18px -18px;width:62%;height:70%;
  border:1px solid var(--wine);opacity:.45;
}
.uebernahmen{list-style:none;margin:1.9rem 0 0;padding:0;display:flex;flex-direction:column}
.uebernahmen li{
  display:flex;align-items:center;gap:1rem;padding:1.05rem 0;border-top:1px solid var(--line-soft);
}
.uebernahmen li:last-child{border-bottom:1px solid var(--line-soft)}
.uebernahmen svg{width:20px;height:20px;color:var(--wine);flex:none;stroke-width:1.4}
.uebernahmen span{font-size:1.06rem;font-weight:600}
.split-contact{margin-top:1.9rem;color:var(--muted)}
.split-contact a{color:var(--wine);font-weight:600;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--wine) 45%,transparent);transition:border-color .25s ease}
.split-contact a:hover{border-bottom-color:var(--wine)}

/* ---------- Kostenrechnung (Band) ---------- */
.band{background:var(--band);color:var(--band-ink)}
.band .rail{color:var(--band-muted);border-top-color:var(--band-line)}
.band h2{max-width:16ch}
.band .section-lead{color:var(--band-muted)}
.posten{display:grid;gap:1px;margin-top:clamp(36px,4.5vw,56px);background:var(--band-line);border:1px solid var(--band-line)}
@media (min-width:820px){.posten{grid-template-columns:repeat(3,1fr)}}
.posten article{
  background:var(--band);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:.9rem;
  transition:background .35s ease;
}
.posten article:hover{background:color-mix(in srgb,var(--band-ink) 7%,var(--band))}
.posten svg{width:26px;height:26px;color:var(--band-ink);opacity:.62;stroke-width:1.2}
.posten h3{font-size:1.16rem;letter-spacing:.01em;line-height:1.25}
.posten p{color:var(--band-muted);font-size:.96rem;line-height:1.62}

/* ---------- Kontakt ---------- */
.kontakt{background:var(--paper-2)}
.kontakt-in{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem}
.kontakt h2{max-width:24ch}
.kontakt p{color:var(--muted);max-width:52ch}
.mailto{
  margin-top:1rem;display:inline-flex;align-items:center;gap:.9rem;text-decoration:none;
  font-family:"Vollkorn",Georgia,serif;font-weight:600;
  font-size:clamp(1.35rem,1rem + 2vw,2.4rem);color:var(--ink);
  border-bottom:2px solid var(--wine);padding-bottom:.25rem;letter-spacing:-.01em;
  transition:color .3s ease;overflow-wrap:anywhere;
}
.mailto:hover{color:var(--wine)}
.mailto svg{width:.8em;height:.8em;color:var(--wine);flex:none;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.mailto:hover svg{transform:translateX(5px)}

/* ---------- Fuß ---------- */
.foot{background:var(--foot-bg);color:var(--foot-ink);padding-block:clamp(48px,6vw,76px)}
.foot-grid{display:grid;gap:clamp(30px,4vw,48px)}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot .brand{background:#fff;align-self:start;justify-self:start;padding:8px 12px}
.foot .brand img{height:118px}
.foot-grid .label{color:rgba(237,238,240,.5);display:block;margin-bottom:1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot a{color:var(--foot-ink);text-decoration:none;opacity:.86;transition:opacity .25s ease,color .25s ease}
.foot a:hover{opacity:1;color:#d5838f}
.foot address{font-style:normal;opacity:.86;line-height:1.75}
.foot-base{
  margin-top:clamp(34px,4vw,54px);padding-top:1.4rem;border-top:1px solid rgba(237,238,240,.14);
  color:rgba(237,238,240,.45);display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;justify-content:space-between;
}

/* ---------- Bewegung ---------- */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.d1.in{transition-delay:.09s}
.reveal.d2.in{transition-delay:.18s}
.reveal.d3.in{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---------- Pflichtseiten ---------- */
/* padding-block, nicht die Kurzform: `padding` wuerde das seitliche
   padding-inline von .wrap ueberschreiben und den Text an den Rand ziehen. */
.legal{padding-block:clamp(48px,6vw,76px) clamp(64px,8vw,110px)}
.legal h1{margin:0 0 .9em}
.legal h2{margin:1.9em 0 .5em;font-size:clamp(1.25rem,2.2vw,1.5rem)}
.legal h3{margin:1.6em 0 .55em;font-size:1.05rem}
.legal h4{margin:1.3em 0 .45em;font-size:1rem}
.legal p,.legal li{max-width:64ch;line-height:1.7;margin:0 0 .85em;color:var(--muted)}
.legal h2,.legal h3,.legal h4{color:var(--ink)}
.legal ul{margin:0 0 1.2em 1.2em}
.legal a{color:var(--wine)}