/* ==========================================================================
   Neuhaus & Hohenester – Website
   Markenfarben, Schriften und Abstände entsprechen dem Markenhandbuch.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, SIL Open Font License) ---------- */
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }

/* ---------- Design-Tokens ---------- */
:root {
  --ink: #0b0b0b;          /* Text, dunkle Flächen */
  --paper: #ffffff;        /* Grund */
  --ivory: #f4f3ef;        /* ruhige Zweitfläche */
  --stone: #5f5e5a;        /* Sekundärtext (4,5:1 auf paper/ivory) */
  --stone-light: #8f8e89;  /* nur dekorativ / ab 24 px */
  --line: #d8d7d2;         /* Haarlinien */
  --on-ink-muted: #b3b2ad; /* Sekundärtext auf ink */
  --line-on-ink: #3a3a38;  /* Haarlinien auf ink */

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 104px;
  --gutter: 96px;          /* seitlicher Rand Desktop */
  --section: 120px;        /* vertikaler Abschnittsabstand Desktop */
  --radius: 2px;           /* nur Buttons und Felder */
  --max: 1440px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--stone); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--paper); }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 12px 16px; z-index: 100; }
.skip-link:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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

/* ---------- Typografie ---------- */
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--stone); line-height: 1.4; }
.on-ink .eyebrow { color: var(--on-ink-muted); }
.display { font-family: var(--serif); font-weight: 600; font-size: clamp(44px, 5.3vw, 76px); line-height: 1.03; letter-spacing: -.005em; }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 3.7vw, 52px); line-height: 1.06; }
.h3-serif { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; }
.h3 { font-size: 17px; font-weight: 600; line-height: 1.4; }
.lead { font-size: 18px; line-height: 1.67; color: var(--stone); max-width: 36em; }
.muted { color: var(--stone); }
.small { font-size: 15px; line-height: 1.6; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; text-decoration: none; background: var(--ink); color: var(--paper); padding: 18px 30px; border: 0; border-radius: var(--radius); font: 500 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.btn:hover { background: #333331; color: var(--paper); }
.btn--light { background: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--ivory); color: var(--ink); }
.link-underline { text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { height: 104px; display: flex; align-items: center; justify-content: space-between; }
.site-header .logo img { height: 60px; width: auto; }
.nav { display: flex; align-items: center; gap: 40px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav .btn { padding: 15px 24px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; align-items: center; justify-content: center; }

/* ---------- Hero ---------- */
.hero .wrap { padding-block: 96px 104px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 32px; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 32px; padding-top: 8px; }
/* Platzhalter für die spätere Hero-Animation: Inhalt von .hero__media ersetzen */
.hero__media { background: var(--ink); aspect-ratio: 1 / 1; max-height: 560px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.hero__media img { height: 70%; width: auto; }

/* ---------- Beweisleiste ---------- */
.proof { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.proof li { padding: 28px 32px; display: flex; flex-direction: column; gap: 6px; }
.proof li:first-child { padding-left: 0; }
.proof li + li { border-left: 1px solid var(--line); }
.proof .h3 { font-size: 15px; }
.proof p:last-child { font-size: 14px; line-height: 1.5; color: var(--stone); }

/* ---------- Grundsatz ---------- */
.quote { background: var(--ivory); margin: var(--space-6) 0 0; padding: 80px var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; }

/* ---------- Zweispaltige Abschnitte ---------- */
.section .wrap { padding-block: var(--section); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 96px; }
.split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
.split--profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.stack { display: flex; flex-direction: column; gap: 28px; }
.stack p:not(.eyebrow) { font-size: 17px; line-height: 1.65; color: var(--stone); }

/* Wappen-Werte */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.values li { padding: 32px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--line); }
.values li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); }
.values li:nth-child(even) { padding-right: 0; }
.values li:nth-last-child(-n+2) { border-bottom: 0; }
.values p:last-child { font-size: 15px; line-height: 1.6; color: var(--stone); }

/* So investieren wir */
.principles .wrap { padding-bottom: var(--section); }
.principles__head { display: flex; align-items: flex-end; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 48px; margin-bottom: 56px; gap: 24px; }
.principles__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; list-style: none; margin: 0; padding: 0; }
.principles__grid li { display: flex; flex-direction: column; gap: 14px; }
.num { font-family: var(--serif); font-weight: 600; font-size: 40px; line-height: 1; color: var(--stone-light); }

/* Ankaufsprofil */
.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .stack p:not(.eyebrow) { color: var(--on-ink-muted); }
.criteria { margin: 0; }
.criteria div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--line-on-ink); }
.criteria div:last-child { border-bottom: 1px solid var(--line-on-ink); }
.criteria dt { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--on-ink-muted); padding-top: 4px; }
.criteria dd { margin: 0; font-size: 17px; line-height: 1.65; }

/* Zusammenarbeit */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; align-content: start; }
.steps li { border-top: 1px solid var(--ink); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.steps li p:last-child { font-size: 15px; line-height: 1.6; color: var(--stone); }

/* Kontakt */
.contact { background: var(--ivory); }
.contact .wrap { padding-block: 112px; }
.address { font-style: normal; font-size: 17px; line-height: 1.65; display: flex; flex-direction: column; gap: 6px; }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-content: start; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.field--full, .consent, .form__submit, .form__note { grid-column: 1 / -1; }
.field input, .field select, .field textarea { height: 52px; border: 1px solid #c9c8c2; border-radius: var(--radius); background: var(--paper); padding: 0 16px; font: 400 16px/1.5 var(--sans); color: var(--ink); letter-spacing: 0; text-transform: none; width: 100%; }
.field textarea { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.55; color: var(--stone); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.hp { position: absolute; left: -9999px; }
.form__note { font-size: 14px; color: var(--stone); min-height: 1.5em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-ink-muted); }
.site-footer .wrap { padding-block: 72px 48px; display: flex; flex-direction: column; gap: 56px; }
.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.site-footer__top img { height: 64px; width: auto; }
.site-footer__cols { display: flex; gap: 72px; font-size: 15px; line-height: 1.75; flex-wrap: wrap; }
.site-footer__cols div { display: flex; flex-direction: column; }
.site-footer a { text-decoration: none; color: var(--on-ink-muted); }
.site-footer a:hover, .site-footer .strong { color: var(--paper); }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2d2d2b; padding-top: 24px; font-size: 13px; }
.site-footer__bottom nav { display: flex; gap: 32px; }

/* ---------- Rechtstexte ---------- */
.legal .wrap { padding-block: 96px 120px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 96px; }
.legal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-content: start; font-size: 16px; line-height: 1.7; }
.legal__grid > div { display: flex; flex-direction: column; gap: 8px; }
.legal__prose { font-size: 16px; line-height: 1.7; }
.legal__prose h2 { margin: 40px 0 12px; }
.legal__prose h2:first-child { margin-top: 0; }
.legal__prose p + p { margin-top: 12px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  :root { --gutter: 48px; --section: 96px; }
  .nav { gap: 28px; }
  .hero .wrap, .split, .split--wide, .split--profile, .legal .wrap { gap: 56px; }
  .principles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof li:nth-child(4) { border-top: 1px solid var(--line); }
}

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  :root { --gutter: 20px; --section: 64px; }
  body { font-size: 16px; }
  .site-header .wrap { height: 76px; }
  .site-header .logo img { height: 44px; }
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 24px; }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { margin-top: 16px; text-align: center; padding: 18px 24px; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 48px 56px; gap: 40px; }
  .hero__text { gap: 24px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero__actions .btn { text-align: center; }
  .hero__actions .link-underline { align-self: center; }
  .hero__media { aspect-ratio: 6 / 5; }
  .lead { font-size: 16px; }
  .proof { grid-template-columns: 1fr; }
  .proof li, .proof li:first-child, .proof li:nth-child(3) { padding: 14px 0; border-left: 0; border-top: 0; }
  .proof li + li { border-left: 0; border-top: 1px solid var(--line); }
  .quote { margin: 48px 0 0; padding: 56px 24px; }
  .split, .split--wide, .split--profile, .legal .wrap { grid-template-columns: 1fr; gap: 32px; }
  .stack { gap: 22px; }
  .values { grid-template-columns: 1fr; }
  .values li, .values li:nth-child(odd), .values li:nth-child(even) { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .values li:last-child { border-bottom: 0; }
  .values li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .h3-serif { font-size: 24px; }
  .principles__head { padding-top: 32px; margin-bottom: 28px; flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .principles__grid { grid-template-columns: 1fr; gap: 28px; }
  .num { font-size: 30px; }
  .criteria div { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps li { padding-top: 18px; gap: 6px; }
  .contact .wrap { padding-block: 64px; }
  .form { grid-template-columns: 1fr; gap: 16px; }
  .form .btn { width: 100%; }
  .site-footer .wrap { padding-block: 48px 32px; gap: 28px; }
  .site-footer__top { flex-direction: column; }
  .site-footer__top img { height: 52px; }
  .site-footer__cols { flex-direction: column; gap: 16px; }
  .site-footer__bottom { flex-direction: column-reverse; }
  .legal .wrap { padding-block: 56px 72px; }
  .legal__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Sprungmarken nicht unter dem fixierten Header verstecken */
[id] { scroll-margin-top: 112px; }
@media (max-width: 860px) { [id] { scroll-margin-top: 84px; } }