/* Schriften lokal eingebunden (SIL Open Font License) — keine Verbindung zu Drittanbietern */
@font-face{
  font-family:"Playfair Display";
  src:url("assets/fonts/PlayfairDisplay-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* Goldfuss Consulting — Website */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#FAF7F2;
  --paper-light:#FDFCFA;
  --sand:#F2EAE0;
  --dark:#221D19;
  --ink:#1E1A17;
  --text:#3A342F;
  --muted:#837A70;
  --gold:#9C7A46;
  --line:#E6DCCF;
  --line-dark:rgba(255,255,255,.16);
  --display:"Playfair Display","Didot","Bodoni 72","Hoefler Text",Georgia,serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --sans:"Futura","Avenir Next","Avenir","Century Gothic","Segoe UI",system-ui,-apple-system,sans-serif;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:1000px;margin:0 auto;padding:0 44px}
.narrow{max-width:680px}

/* ---------- Kopf ---------- */
.topbar{padding:44px 0 44px;text-align:center}
.logo{width:150px;height:auto}

nav{margin-top:36px;text-align:center}
nav a{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  margin:0 17px;
  display:inline-block;
  padding:6px 0;
  transition:color .25s;
}
nav a:hover{color:var(--gold)}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--ink);overflow-wrap:break-word;hyphens:auto}
h1{font-size:38px;line-height:1.34;letter-spacing:-.005em}
h2{font-size:29px;line-height:1.36;margin-bottom:24px}
h3{font-size:20px;line-height:1.4;margin-bottom:12px}

p{color:var(--text)}
p + p{margin-top:16px}
.lead{font-size:17px;line-height:1.85}
.small{font-size:15.5px;line-height:1.78}

a{color:var(--ink)}
a:hover{color:var(--gold)}

sup.c{font-size:.5em;vertical-align:.6em;letter-spacing:0}
del{text-decoration:line-through;text-decoration-thickness:1px}

.label{
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:30px;
  display:block;
}

/* ---------- Sektionen ---------- */
section{padding:104px 0}
.hero{padding:92px 0 104px;text-align:center;background:var(--dark)}
.hero h1{color:#FFFDF9}
.hero p{color:rgba(243,238,231,.86)}
.hero h1{max-width:21em;margin:0 auto}
.hero .lead{max-width:34em;margin:40px auto 0;text-align:left}
.tinted{background:var(--sand)}
.light{background:var(--paper-light)}
.bordered{border-top:1px solid var(--line)}

/* Leistungskacheln */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.card{
  background:var(--dark);
  color:#F3EEE7;
  padding:40px 32px 44px;
  display:flex;
  flex-direction:column;
}
.card .num{
  font-family:var(--display);
  font-size:26px;
  color:var(--gold);
  margin-bottom:22px;
  display:block;
  line-height:1;
}
.card h3{color:#FFFDF9;font-size:19px;margin-bottom:14px}
.card p{color:rgba(243,238,231,.82);font-size:15px;line-height:1.8}

/* Ablauf */
.steps{margin-top:52px;max-width:820px}
.step{display:grid;grid-template-columns:70px 1fr;gap:28px;padding:22px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .num{
  font-family:var(--display);
  font-size:22px;
  color:var(--gold);
  line-height:1.3;
  padding-top:2px;
}
.step h3{margin-bottom:0;font-size:19px}
.step p{font-size:15.5px;line-height:1.78}

/* Person */
.person{display:grid;grid-template-columns:262px 1fr;gap:60px;align-items:start}
.person img{width:100%;height:auto;display:block;margin-top:7px}
.person .caption{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-top:16px;line-height:1.9;
}

/* Referenz */
.quote{
  font-family:var(--display);
  font-weight:500;
  font-size:25px;
  line-height:1.5;
  color:var(--ink);
  margin:0;
}
.quote::before{content:"\201E"}
.quote::after{content:"\201C"}
.attrib{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);margin-top:34px;line-height:2.1;
}
.attrib span{color:var(--muted)}
.factline{
  font-size:15px;line-height:1.8;color:var(--muted);
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
}

/* Projekte */
.projects{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line)}
.project{background:var(--paper);padding:34px 34px 36px}
.project .meta{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px;
}
.project h3{font-size:19px;margin-bottom:14px}
.project p{font-size:15px;line-height:1.8}
.project .caseline{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:block;margin:18px 0 5px;
}
.selection{margin-top:34px;font-size:15px;color:var(--muted)}

/* Publikation */
.publication{margin-top:76px;border-top:1px solid var(--line);padding-top:46px;max-width:680px}
.publication h3{font-size:22px;margin-bottom:12px}

.subtitle{
  font-family:var(--display);font-size:21px;line-height:1.4;color:var(--muted);margin-bottom:26px;
}

/* Kontakt */
.contact{background:var(--dark);color:#F3EEE7;text-align:center;padding:104px 0}
.contact .label{color:var(--gold)}
.contact h2{color:#FFFDF9}
.contact p{color:rgba(243,238,231,.85)}
.contact .lines{font-size:16px;line-height:2.2;margin-top:26px}
.contact a{color:#FFFDF9;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .25s,color .25s}
.contact a:hover{color:var(--gold);border-color:var(--gold)}

.contact .revision{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,238,231,.5);margin-top:46px;
}

/* ---------- Fuss ---------- */
footer{background:var(--dark);border-top:1px solid var(--line-dark);padding:34px 0 52px}
footer .inner{
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,238,231,.6);display:flex;justify-content:center;gap:26px;flex-wrap:wrap;
}
footer a{color:rgba(243,238,231,.6);text-decoration:none}
footer a:hover{color:var(--gold)}

/* ---------- Rechtsseiten ---------- */
.legal{padding:60px 0 96px}
.legal h1{font-size:32px;margin-bottom:10px}
.legal h2{
  font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin:42px 0 12px;
}
.legal p{font-size:16px;line-height:1.9;margin-bottom:12px}
.legal p + p{margin-top:0}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:1fr;gap:2px}
  .projects{grid-template-columns:1fr}
  .person{grid-template-columns:1fr;gap:34px}
  .person img{max-width:220px}
}
@media (max-width:640px){
  .wrap{padding:0 24px}
  .quote{font-size:20px}
  h1{font-size:24px;line-height:1.38}
  h2{font-size:21px}
  .lead{font-size:16.5px}
  section{padding:72px 0}
  .hero{padding:48px 0 68px}
  .contact{padding:76px 0}
  nav a{margin:0 9px;font-size:9px;letter-spacing:.18em}
  .step{grid-template-columns:1fr;gap:4px}
  .step .num{padding-top:0;font-size:18px}
  .card{padding:34px 26px 36px}
  .project{padding:32px 26px 34px}
  footer .inner{flex-direction:column;gap:12px;text-align:center}
  br.opt{display:none}
}