/*
  AKB · A.K.Bauelemente GmbH & Co.KG, Rees
  Aufgebaut auf base.css des Relaunch-Skills. Farben aus dem Logo (Anthrazit, Ziegelrot),
  Schrift Montserrat wie im Logo. Wiedererkennbares Element: die Giebel-Kante (--roof)
  aus der Dachform des Logos, nur an Einstieg und Kontaktband.
*/

/* ---------- Schriften (lokal, keine externen Anfragen) ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design-Tokens ---------- */
:root {
  --color-bg: #ffffff;
  --color-surface: #eef0f0;      /* kühles Glasgrau */
  --color-text: #393938;         /* Anthrazit aus dem Logo */
  --color-muted: #5b5b5a;
  --color-primary: #880404;      /* Ziegelrot aus dem Logo */
  --color-primary-dark: #660303;
  --color-primary-contrast: #ffffff;
  --color-dark: #393938;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #d9d9d8;
  --color-border: #d3d6d6;
  --color-focus: #1a5fb4;

  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);
  --leading-body: 1.65;
  --leading-tight: 1.15;
  --measure: 66ch;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.44rem, 1.3rem + 0.7vw, 1.8rem);
  --step-3: clamp(1.73rem, 1.5rem + 1.15vw, 2.4rem);
  --step-4: clamp(2.07rem, 1.6rem + 2.4vw, 3.6rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-3xl: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* Giebelhöhe: Dachneigung wie im Logo, auf großen Schirmen gedeckelt */
  --roof: clamp(2.5rem, 9vw, 7.5rem);

  --radius-s: 2px;
  --radius-m: 4px;
  --container: 74rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li, figcaption, dd { max-width: var(--measure); overflow-wrap: break-word; hyphens: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
small { font-size: var(--step--1); }
strong { font-weight: 650; }

a { color: var(--color-primary); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { text-decoration-thickness: 0.15em; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

:target { scroll-margin-block-start: var(--space-m); }

/* ---------- Layout-Bausteine ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.flow > * + * { margin-block-start: var(--flow-space, var(--space-s)); }
.flow > :is(h2, h3) { --flow-space: var(--space-l); }
.flow > :is(h2, h3) + * { --flow-space: var(--space-xs); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-s)); align-items: center; }

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
}

.split { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 48em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .split--reverse > :first-child { order: 2; }
}

.section { padding-block: var(--space-2xl); }
.section--surface { background: var(--color-surface); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Grundmuster ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-s);
  inset-block-start: -100%;
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  background: var(--color-text);
  color: var(--color-bg);
  border-radius: var(--radius-s);
}
.skip-link:focus { inset-block-start: var(--space-s); }

/* Kopfbereich */
.site-header { background: var(--color-bg); border-block-end: 1px solid var(--color-border); }
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2xs) var(--space-m); padding-block: var(--space-xs);
}
.site-header__logo { display: block; }
.site-header__logo img { height: 2.75rem; width: auto; }

.site-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); font-size: 0.9375rem; }
@media (min-width: 40em) { .site-nav ul { gap: 0 var(--space-m); font-size: inherit; } }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: none; color: var(--color-text); font-weight: 550;
  border-block-end: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-primary); }
.site-nav a[aria-current="page"] { color: var(--color-primary); border-block-end-color: var(--color-primary); }

.site-header__phone { display: none; }
@media (min-width: 64em) {
  .site-header__phone {
    display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.75rem;
    font-weight: 650; text-decoration: none; color: var(--color-text);
  }
  .site-header__phone:hover { color: var(--color-primary); }
  .site-header__inner { flex-wrap: nowrap; }
  .site-nav { margin-inline-start: auto; }
}

/* Schaltflächen: eine primäre, eine zurückhaltende */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-m);
  border: 2px solid var(--color-primary); border-radius: var(--radius-m);
  background: var(--color-primary); color: var(--color-primary-contrast);
  font-weight: 650; text-decoration: none; line-height: 1.2;
}
.button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.button--ghost { background: transparent; color: var(--color-primary); }
.button--ghost:hover { background: var(--color-primary); color: var(--color-primary-contrast); }
.icon { width: 1.25em; height: 1.25em; flex: none; }

/* Dunkle und rote Flächen: Text, Links und Fokus hell */
.on-dark { background: var(--color-dark); color: var(--color-on-dark); --color-focus: #ffffff; }
.on-red { background: var(--color-primary); color: var(--color-primary-contrast); --color-focus: #ffffff; }
:is(.on-dark, .on-red) a:not(.button) { color: inherit; }
:is(.on-dark, .on-red) .button { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-primary); }
:is(.on-dark, .on-red) .button:hover { background: var(--color-surface); border-color: var(--color-surface); }
:is(.on-dark, .on-red) .button--ghost { background: transparent; border-color: currentColor; color: var(--color-on-dark); }
:is(.on-dark, .on-red) .button--ghost:hover { background: var(--color-bg); color: var(--color-primary); }

/* Fußbereich */
.site-footer { padding-block: var(--space-xl) var(--space-l); font-size: var(--step--1); }
.site-footer__grid { display: grid; gap: var(--space-l); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.site-footer__logo { width: 9rem; height: auto; }
.site-footer address { font-style: normal; }
.site-footer h2 { font-size: var(--step-0); margin-block-end: var(--space-2xs); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-footer address a { display: inline-block; padding-block: var(--space-3xs); }
.site-footer__bottom {
  max-width: none;
  margin-block-start: var(--space-l); padding-block-start: var(--space-s);
  border-block-start: 1px solid rgb(255 255 255 / 0.2); color: var(--color-on-dark-muted);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Komponenten dieser Seite ---------- */

/* Giebel: obere Kante als Dachform des Logos */
.gable {
  clip-path: polygon(0 var(--roof), 50% 0, 100% var(--roof), 100% 100%, 0 100%);
  padding-block-start: calc(var(--roof) + var(--space-xl));
}

/* Einstieg Startseite: Foto, darunter das Giebel-Panel, das ins Foto ragt */
.hero__media img { width: 100%; height: clamp(14rem, 42vw, 34rem); object-fit: cover; }
.hero__panel { margin-block-start: calc(-1 * var(--roof)); position: relative; padding-block-end: var(--space-2xl); }
.hero__panel h1 { max-width: 18ch; }
.hero__lead { font-size: var(--step-1); line-height: 1.5; max-width: 40ch; }
.hero__quote { border-inline-start: 3px solid var(--color-primary); padding-inline-start: var(--space-s); color: var(--color-on-dark-muted); font-style: italic; }
.hero__quote p { max-width: 50ch; }

/* Seitenkopf der Unterseiten */
.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head h1 { max-width: 20ch; }
.page-head p { font-size: var(--step-1); line-height: 1.5; color: var(--color-on-dark-muted); max-width: 48ch; }

/* Abschnittskopf */
.section-head { margin-block-end: var(--space-l); }
.section-head p { color: var(--color-muted); }

/* Produktkacheln */
.tiles { --grid-min: 9rem; --grid-gap: var(--space-l) var(--space-m); list-style: none; padding: 0; }
.tile a { display: block; text-decoration: none; color: inherit; }
.tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); }
.tile h3 { font-size: var(--step-0); margin-block-start: var(--space-xs); display: inline-block; border-block-end: 2px solid transparent; }
@media (min-width: 48em) { .tiles { --grid-min: 15rem; } .tile h3 { font-size: var(--step-1); } }
.tile a:hover h3 { color: var(--color-primary); border-block-end-color: var(--color-primary); }

/* Vertrauenspunkte mit Dachmarke statt Aufzählungspunkt */
.facts { list-style: none; padding: 0; --grid-min: 17rem; --grid-gap: var(--space-l); }
.facts li { padding-block-start: var(--space-s); position: relative; }
.facts li::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 2.5rem; height: 0.6rem; background: var(--color-primary);
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 82% 100%, 50% 35%, 18% 100%);
}
.facts h3 { margin-block-end: var(--space-3xs); }
.facts p { color: var(--color-muted); }

/* Arbeitsschritte: echte Abfolge, daher nummeriert */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-s); }
.steps li {
  counter-increment: step; display: flex; align-items: center; gap: var(--space-s);
  font-weight: 650; font-size: var(--step-1);
}
.steps li::before {
  content: counter(step); display: grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border: 2px solid var(--color-primary); border-radius: 50%;
  color: var(--color-primary); font-size: var(--step-0);
}
@media (min-width: 48em) {
  .steps { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .steps li { flex-direction: column; align-items: flex-start; position: relative; }
  .steps li:not(:last-child)::after {
    content: ""; position: absolute; inset-block-start: 1.375rem; inset-inline: 3.25rem 0.5rem;
    height: 2px; background: var(--color-border);
  }
}

/* Bild-Text-Paare */
.media-text img { width: 100%; border-radius: var(--radius-m); }
.media-text--contain img { background: var(--color-bg); padding: var(--space-s); object-fit: contain; max-height: 26rem; }
.text-link { font-weight: 650; }

/* Partnerleiste */
.partners { list-style: none; padding: 0; --grid-min: 12rem; --grid-gap: 0; border-block-start: 1px solid var(--color-border); border-inline-start: 1px solid var(--color-border); }
.partners li { border-block-end: 1px solid var(--color-border); border-inline-end: 1px solid var(--color-border); }
.partners a {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-s);
  height: 100%; padding: var(--space-m); text-decoration: none; color: var(--color-muted); font-size: var(--step--1);
}
.partners a:hover { background: var(--color-surface); color: var(--color-text); }
.partners img { height: 3.25rem; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }

/* Bauelemente: Sprungnavigation */
.jump { list-style: none; padding: 0; --cluster-gap: var(--space-2xs); }
.jump a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--space-s);
  border: 1px solid rgb(255 255 255 / 0.5); border-radius: var(--radius-m); text-decoration: none; font-weight: 550;
}
.jump a:hover { background: var(--color-bg); color: var(--color-primary); }

/* Bauelemente: Produktabschnitte */
.product { align-items: start; }
.product__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-m); }
.product__media--tall img { aspect-ratio: 4 / 5; }
.product ul { padding-inline-start: 1.2em; }
.product li + li { margin-block-start: var(--space-3xs); }
.makers { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-s); }
.makers h3 { font-size: var(--step-0); }
.makers dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-m); margin-block-start: var(--space-2xs); }
.makers dt { font-weight: 650; }
.makers dd { margin: 0; }
.makers dd a { display: inline-block; margin-inline-end: var(--space-xs); }

/* Über uns: Jahreszahl als Schriftmarke */
.years { display: grid; gap: var(--space-m); justify-items: start; }
.years__number { font-size: clamp(6rem, 4rem + 12vw, 13rem); font-weight: 750; line-height: 0.85; letter-spacing: -0.05em; color: var(--color-primary); }
.years__label { font-size: var(--step-2); font-weight: 650; line-height: 1.2; max-width: 14ch; }
.years img { width: min(100%, 18rem); }

/* Kontaktband */
.contact-band { padding-block-end: var(--space-2xl); }
.contact-band h2 { max-width: 20ch; }
.contact-band p { max-width: 52ch; }
.contact-band .cluster { max-width: none; }

/* Kontaktseite */
.contact-list { list-style: none; padding: 0; --grid-min: 15rem; --grid-gap: var(--space-m); }
.contact-list li { border-block-start: 3px solid var(--color-primary); padding-block-start: var(--space-s); }
.contact-list h3 { font-size: var(--step-0); color: var(--color-muted); font-weight: 600; letter-spacing: 0; }
.contact-list a { display: inline-block; padding-block: var(--space-3xs); font-size: var(--step-1); font-weight: 650; overflow-wrap: anywhere; }
.address-block { font-style: normal; font-size: var(--step-1); line-height: 1.5; }

/* Rechtstexte */
.legal { --measure: 72ch; }
.legal h2 { font-size: var(--step-2); }
.legal h3 { font-size: var(--step-0); }
.legal ul, .legal ol { padding-inline-start: 1.25em; }
.legal li + li { margin-block-start: var(--space-2xs); }
.legal a { overflow-wrap: anywhere; }
.legal section + section { margin-block-start: var(--space-xl); }