/* =========================================================
   Handwerksberatung Hinrichs — Stylesheet
   ========================================================= */

/* --- Fonts: self-hosted (nur die tatsächlich genutzten
   Schnitte/Subsets), statt Google Fonts über CDN zu laden.
   Das vermeidet die Übertragung von Besucher-IPs an Google
   (DSGVO-relevant) und spart ~20 ungenutzte Font-Dateien. --- */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/source-serif-4-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens --- */
:root {
  --color-bg-dark: #24322D;
  --color-bg-light: #F7F5F1;
  --color-text: #2A2724;
  --color-text-muted: #8B8378;
  --color-accent: #8A7F55;
  --color-link: #2F5D4E;
  --color-link-hover: #1E3F34;
  --color-border: #E2DDD4;
  --color-border-dark: #3B4A44;
  --color-footer-text: #A9B5AF;
  --color-footer-link: #CFD9D4;
  --color-photo-border: #DDD7CC;

  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --max-width: 1100px;
  --gutter: 56px;
}

/* --- Reset & base --- */
* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-dark);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a {
  color: var(--color-link);
  text-decoration: none;
}
a:hover { color: var(--color-link-hover); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

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

/* --- Layout shell --- */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  background: var(--color-bg-light);
}

/* --- Hero --- */
.hero {
  padding: 88px 0 56px;
  border-bottom: 1px solid var(--color-border);
}
.hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 5.6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

/* --- Generic two-column section (label + content) --- */
.section {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--gutter);
  padding: 52px 0;
  border-bottom: 1px solid var(--color-border);
}
.section--last {
  border-bottom: none;
  padding-bottom: 88px;
}
.section__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0;
  padding-top: 12px;
}
.section__label-note {
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--color-text-muted);
}

/* --- Leistungen --- */
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.service-list li {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.4vw, 28px);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.service-list li:last-child { border-bottom: none; }

/* --- Über mich --- */
.about {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.about__photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-photo-border);
}
.about__name {
  font-family: var(--font-serif);
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.2;
  margin: 0 0 20px;
}
.about__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.about__facts li {
  font-size: 17px;
  line-height: 1.55;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
}

/* --- Kontakt --- */
.contact-details {
  margin: 0;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0 32px;
}
.contact-details dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 24px 0 16px;
  border-top: 1px solid var(--color-border);
}
.contact-details dd {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}
.contact-link {
  color: var(--color-text);
  font-family: var(--font-serif);
}
.contact-link:hover,
.contact-link:focus-visible { color: var(--color-link); }
.contact-link--phone { font-size: clamp(24px, 2.8vw, 32px); }
.contact-link--email {
  font-size: clamp(16px, 1.8vw, 21px);
  word-break: break-word;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border-dark);
  background: var(--color-bg-dark);
}
.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.site-footer__brand {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--color-footer-text);
  text-transform: uppercase;
}
.site-footer__link { color: var(--color-footer-link); font-size: 14.5px; }
.site-footer__link:hover,
.site-footer__link:focus-visible { color: #ffffff; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* --- Legal page (Impressum) --- */
.legal {
  padding: 56px 0 88px;
}
.legal h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  margin: 0 0 32px;
}
.legal h2 {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 40px 0 12px;
}
.legal p { font-size: 16px; line-height: 1.6; margin: 0 0 8px; }
.legal .todo {
  background: #FBF3E3;
  border: 1px dashed #C9A227;
  color: #6B5410;
  padding: 12px 16px;
  font-size: 14px;
  margin: 0 0 8px;
}
.back-link { display: inline-block; margin-top: 24px; font-size: 14.5px; }

/* --- Responsive --- */
@media (max-width: 700px) {
  :root { --gutter: 24px; }

  .hero { padding: 56px 0 40px; }

  .section {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px 0;
  }
  .section__label { padding-top: 0; }

  .about {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .about__photo { max-width: 220px; }

  .contact-details { grid-template-columns: 1fr; gap: 0; }
  .contact-details dt { padding-top: 24px; }

  .site-footer__inner { padding: 24px; }
}