/* sechsmeterfreiheit.de – Gestaltung
   Leitidee: das Maßband. Echte Maße sind der Kern der Inhalte; Lineal und Bemaßungslinien
   tragen die Identität, alles andere bleibt ruhig. Markenfarben aus Videos/branding. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --petrol: #1f5c63;
  --petrol-tief: #163f44;
  --sand: #f6f0e4;
  --sand-hell: #fcf9f3;
  --orange: #d9894a;
  --orange-hell: #f2a65e;
  --tinte: #1c2c2e;
  --grau: #4c5c5d;
  --linie: #cfc4b0;

  --schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;

  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 1rem;
  --abstand-4: 1.5rem;
  --abstand-5: 2.5rem;
  --abstand-6: 4rem;

  --breite: 72rem;
  --breite-text: 42rem;
}

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

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

body {
  margin: 0;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: 1.125rem;
  line-height: 1.6;
  /* ss01: Null ohne Schrägstrich – sonst liest sich „600 LR“ wie „6ØØ LR“. */
  font-feature-settings: "ss01";
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  font-family: var(--schrift-titel);
  color: var(--petrol-tief);
  line-height: 1.15;
  font-weight: 750;
  letter-spacing: -0.01em;
  margin: 0 0 var(--abstand-3);
}
@media (max-width: 30rem) {
  h1,
  h2,
  h3 {
    hyphens: auto;
  }
}
h1 {
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.5rem);
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  margin-top: var(--abstand-5);
}
h3 {
  font-size: 1.25rem;
}

p,
ul,
ol,
dl {
  margin: 0 0 var(--abstand-3);
}

a {
  color: var(--petrol);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--petrol-tief);
  text-decoration-thickness: 0.14em;
}
:focus-visible {
  outline: 3px solid var(--petrol-tief);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--abstand-3);
  top: -4rem;
  z-index: 10;
  background: var(--petrol-tief);
  color: var(--sand);
  padding: var(--abstand-2) var(--abstand-3);
}
.skip-link:focus {
  top: var(--abstand-2);
  color: var(--sand);
  outline-color: var(--orange-hell);
}

.container {
  width: min(100% - 2rem, var(--breite));
  margin-inline: auto;
}
.container--text {
  width: min(100% - 2rem, var(--breite-text));
}

.vorschau-banner {
  background: var(--orange-hell);
  color: var(--petrol-tief);
  padding: var(--abstand-2) var(--abstand-3);
  text-align: center;
  font-weight: 700;
}

/* ---------- Kopf ---------- */

.site-header {
  border-bottom: 3px solid var(--petrol);
  background: var(--sand);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
  padding-block: var(--abstand-3);
}
.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--petrol-tief);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.wortmarke img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: var(--abstand-1) var(--abstand-2);
  min-height: 2.25rem;
  font-weight: 650;
  font-size: 1rem;
  color: var(--petrol-tief);
  text-decoration: none;
  border-radius: 6px;
}
.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.2em;
}
.site-nav a[aria-current] {
  background: var(--petrol);
  color: var(--sand);
}

/* ---------- Bausteine ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: 8px;
  border: 2px solid var(--petrol);
  background: var(--petrol);
  color: var(--sand);
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  line-height: 1.2;
}
.button:hover {
  background: var(--petrol-tief);
  border-color: var(--petrol-tief);
  color: var(--sand);
}
.button--akzent {
  background: var(--orange-hell);
  border-color: var(--petrol-tief);
  color: var(--petrol-tief);
}
.button--akzent:hover {
  background: #f7bf88;
  border-color: var(--petrol-tief);
  color: var(--petrol-tief);
}
.button--leise {
  background: transparent;
  color: var(--petrol-tief);
}
.button--leise:hover {
  background: var(--petrol-tief);
  color: var(--sand);
}

.marke {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 var(--abstand-2);
  border-radius: 4px;
  border: 2px solid var(--grau);
  color: var(--grau);
}
.marke--eigen {
  background: var(--petrol);
  border-color: var(--petrol);
  color: var(--sand);
}
.badge--entwurf {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 var(--abstand-2);
  background: var(--orange-hell);
  color: var(--petrol-tief);
  border-radius: 4px;
}
.hinweis--entwurf {
  border: 2px dashed var(--orange);
  padding: var(--abstand-3);
}

.tabelle-scroll {
  overflow-x: auto;
  margin-bottom: var(--abstand-3);
}
table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-2) 0;
  border-bottom: 1px solid var(--linie);
}
th {
  font-family: var(--schrift-titel);
  color: var(--petrol-tief);
}

/* ---------- Das Maßband ---------- */

.massband {
  --tick: var(--petrol-tief);
  position: relative;
  margin-block: var(--abstand-5) var(--abstand-6);
}
.massband__band {
  position: relative;
  height: 3rem;
  background-color: var(--orange-hell);
  border-radius: 4px;
  background-image:
    repeating-linear-gradient(to right, var(--tick) 0 2px, transparent 2px calc(100% / 6)),
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px calc(100% / 60));
  background-size:
    100% 1.4rem,
    100% 0.6rem;
  background-repeat: no-repeat;
  background-position:
    0 0,
    0 0;
  box-shadow: inset 0 -3px 0 rgb(22 63 68 / 0.25);
}
.massband__meter {
  position: absolute;
  left: var(--links);
  bottom: var(--abstand-1);
  transform: translateX(-50%);
  font-family: var(--schrift-titel);
  font-weight: 750;
  font-size: 0.9rem;
  color: var(--petrol-tief);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.massband__meter:first-child {
  transform: none;
  padding-left: var(--abstand-1);
}
.massband__meter:last-child {
  transform: translateX(-100%);
  padding-right: var(--abstand-1);
}
.massband__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 3.5rem;
}
.massband__punkt {
  position: absolute;
  top: 0;
  left: calc(var(--pos) * 100%);
  transform: translateX(-50%);
  padding-top: var(--abstand-3);
  white-space: nowrap;
}
.massband__punkt::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  left: 50%;
  width: 3px;
  height: 1.6rem;
  margin-left: -1.5px;
  background: var(--petrol-tief);
}
.massband__punkt[data-rand="rechts"] {
  transform: translateX(-100%);
  text-align: right;
}
.massband__punkt[data-rand="rechts"]::before {
  left: auto;
  right: 0;
}
.massband__punkt[data-rand="links"] {
  transform: none;
}
.massband__punkt[data-rand="links"]::before {
  left: 0;
}
.massband__punkt a {
  font-family: var(--schrift-titel);
  font-weight: 700;
}
.massband__lage {
  display: block;
  font-size: 0.85rem;
  color: var(--grau);
}
/* Schmale Fenster: Beschriftungen würden sich überlappen – dort als Liste unter dem Band,
   und am Band nur jeder zweite Meter (0, 2, 4, 6 m). */
@media (max-width: 30rem) {
  .massband__meter:nth-child(even) {
    display: none;
  }
}
@media (max-width: 47.99rem) {
  .massband__punkte {
    height: auto;
    display: grid;
    gap: var(--abstand-2);
    margin-top: var(--abstand-3);
  }
  .massband__punkt,
  .massband__punkt[data-rand] {
    position: static;
    transform: none;
    padding-top: 0;
    white-space: normal;
    text-align: left;
  }
  .massband__punkt::before {
    display: none;
  }
}

/* ---------- Startseite ---------- */

.hero {
  padding-block: var(--abstand-6) 0;
}
.hero h1 {
  max-width: 16ch;
}
.hero__lead {
  font-size: 1.25rem;
  max-width: 40rem;
  color: var(--tinte);
}

.teile-abschnitt {
  margin-block: var(--abstand-5);
}
.teile-abschnitt__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-3);
}
.abschnitt__mehr {
  margin-top: var(--abstand-4);
}

.abschnitt {
  padding-block: var(--abstand-5);
}
.abschnitt > h2:first-child {
  margin-top: 0;
}
.abschnitt__einleitung {
  max-width: var(--breite-text);
  color: var(--grau);
}

.umbau-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--abstand-5);
}
.umbau-zeile {
  display: grid;
  gap: var(--abstand-4);
  align-items: start;
  border-top: 3px solid var(--petrol);
  padding-top: var(--abstand-4);
}
@media (min-width: 48rem) {
  .umbau-zeile {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.umbau-zeile__bild img {
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--fokus, 50% 15%);
  width: 100%;
}
.umbau-zeile h3 {
  font-size: 1.6rem;
}
.umbau-zeile h3 a {
  text-decoration: none;
  color: var(--petrol-tief);
}
.umbau-zeile h3 a:hover {
  text-decoration: underline;
}
.umbau-zeile__fakten {
  color: var(--grau);
  font-size: 1rem;
}

.kategorie-raster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--abstand-4) var(--abstand-5);
}
@media (min-width: 40rem) {
  .kategorie-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .kategorie-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.kategorie-eintrag {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--abstand-3);
  align-items: start;
}
.kategorie-eintrag svg {
  width: 3rem;
  height: 3rem;
  color: var(--petrol);
}
.kategorie-eintrag h3 {
  margin-bottom: var(--abstand-1);
}
.kategorie-eintrag p {
  margin: 0;
  font-size: 1rem;
  color: var(--grau);
}

/* ---------- Seitenkopf der Unterseiten ---------- */

.seitenkopf {
  padding-block: var(--abstand-5) var(--abstand-4);
}
.seitenkopf__lead {
  font-size: 1.2rem;
  max-width: var(--breite-text);
}
.brotkrumen {
  font-size: 0.95rem;
  margin-bottom: var(--abstand-3);
}
.brotkrumen ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  padding: 0;
  margin: 0;
}
.brotkrumen li + li::before {
  content: "/";
  margin-right: var(--abstand-2);
  color: var(--grau);
}

/* ---------- Umbau-Seite ---------- */

.umbau-kopf {
  display: grid;
  gap: var(--abstand-4);
}
@media (min-width: 56rem) {
  .umbau-kopf {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: end;
  }
}
.umbau-kopf__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}
.bilderreihe {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--abstand-5);
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.bilderreihe figure {
  margin: 0;
}
.bilderreihe img {
  border-radius: 6px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: var(--fokus, 50% 50%);
  width: 100%;
}
.bilderreihe figcaption {
  font-size: 0.95rem;
  color: var(--grau);
  margin-top: var(--abstand-2);
}

.zweispaltig {
  display: grid;
  gap: var(--abstand-5);
}
@media (min-width: 60rem) {
  .zweispaltig {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
.fliesstext {
  max-width: var(--breite-text);
}
.fliesstext h2:first-child,
.zweispaltig > div > h2:first-child {
  margin-top: 0;
}

.teileliste td:first-child,
.teileliste th:first-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.teileliste a {
  font-weight: 700;
}

/* Bemaßung: eine Linie je Maß, Länge im Verhältnis zum größten Maß */
.bemassung {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--abstand-4);
  display: grid;
  gap: var(--abstand-3);
}
.bemassung__linie {
  position: relative;
  width: calc(var(--anteil) * 100%);
  min-width: 6rem;
  height: 1.6rem;
  border-inline: 2px solid var(--petrol-tief);
}
.bemassung__linie::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid var(--petrol-tief);
}
.bemassung__wert {
  position: relative;
  display: inline-block;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--sand);
  padding: 0 var(--abstand-2);
  font-family: var(--schrift-titel);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.6rem;
  color: var(--petrol-tief);
  white-space: nowrap;
}
.bemassung__ort {
  font-size: 1rem;
  color: var(--grau);
}
.massliste dt {
  font-weight: 700;
}
.massliste dd {
  margin: 0 0 var(--abstand-2);
}

.ki-hinweis {
  font-size: 0.95rem;
  color: var(--grau);
  margin: 0 0 var(--abstand-3);
}

.werbelink-hinweis {
  font-size: 0.95rem;
  color: var(--grau);
}

/* ---------- Kategorie-Seite: Vergleich ---------- */

.eigener-umbau {
  border: 3px solid var(--petrol);
  border-radius: 10px;
  padding: var(--abstand-4);
  background: var(--sand-hell);
  display: grid;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-5);
}
@media (min-width: 48rem) {
  .eigener-umbau {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: center;
  }
}
.eigener-umbau img {
  border-radius: 6px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--fokus, 50% 30%);
}
.eigener-umbau h2 {
  margin-top: 0;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: end;
  padding: var(--abstand-3) 0;
  border-block: 1px solid var(--linie);
  margin-bottom: var(--abstand-4);
}
.filter[hidden] {
  display: none;
}
.filter label {
  display: grid;
  gap: var(--abstand-1);
  font-weight: 700;
  font-size: 1rem;
}
.filter select {
  font: inherit;
  font-weight: 400;
  min-height: 2.75rem;
  padding: var(--abstand-1) var(--abstand-2);
  border: 2px solid var(--petrol);
  border-radius: 6px;
  background: var(--sand-hell);
  color: var(--tinte);
}
.filter__anzahl {
  margin: 0 0 0 auto;
  color: var(--grau);
  font-size: 1rem;
}

.produktliste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--abstand-4);
}
.produktliste > li[hidden] {
  display: none;
}
.produkt-karte {
  background: var(--sand-hell);
  border: 1px solid var(--linie);
  border-left: 6px solid var(--linie);
  border-radius: 6px;
  padding: var(--abstand-4);
}
.produkt-karte--eigen {
  border-left-color: var(--petrol);
}
.produkt-karte__marken {
  margin-bottom: var(--abstand-2);
}
.produkt-karte__name {
  font-size: 1.3rem;
}
.produkt-karte__erfahrung {
  font-size: 1rem;
}
.produkt-karte__erfahrung p {
  display: inline;
}
.produkt-karte__hinweis {
  font-size: 1rem;
  border-left: 3px solid var(--orange);
  padding-left: var(--abstand-3);
}
.produkt-karte__werte {
  display: grid;
  gap: var(--abstand-2) var(--abstand-4);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-bottom: var(--abstand-4);
}
.produkt-karte__werte dt {
  font-size: 0.9rem;
  color: var(--grau);
}
.produkt-karte__werte dd {
  margin: 0;
  font-weight: 700;
}
.produkt-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
  justify-content: space-between;
}
.produkt-karte__quelle {
  margin: 0;
  font-size: 0.9rem;
  color: var(--grau);
}

.ratgeber-hinweis {
  margin-top: var(--abstand-5);
  padding: var(--abstand-4);
  border-top: 3px solid var(--petrol);
}

/* ---------- Ratgeber und Textseiten ---------- */

.artikel__kopf {
  padding-block: var(--abstand-5) var(--abstand-3);
}
.artikel__lead {
  font-size: 1.2rem;
}
.artikel__meta {
  color: var(--grau);
  font-size: 1rem;
}
.artikel__inhalt {
  padding-bottom: var(--abstand-6);
}
.artikel__inhalt li {
  margin-bottom: var(--abstand-2);
}
.quellen {
  font-size: 1rem;
  border-top: 1px solid var(--linie);
  padding-top: var(--abstand-3);
}

.leer-seite {
  padding-block: var(--abstand-6);
}

/* ---------- Fuß ---------- */

.site-footer {
  background: var(--petrol-tief);
  color: var(--sand);
  padding-block: var(--abstand-5) var(--abstand-4);
  margin-top: var(--abstand-6);
  font-size: 1rem;
}
.site-footer h2 {
  color: var(--sand);
  font-size: 1.15rem;
  margin: 0 0 var(--abstand-2);
}
.site-footer a {
  color: var(--orange-hell);
}
.site-footer a:hover {
  color: #f7c999;
}
.site-footer :focus-visible {
  outline-color: var(--orange-hell);
}
/* Auf dem dunklen Fuß bekäme der leise Knopf sonst Petrol-tief auf Petrol-tief. */
.site-footer .button--leise {
  border-color: var(--sand);
  color: var(--sand);
}
.site-footer .button--leise:hover {
  background: var(--sand);
  color: var(--petrol-tief);
}
.site-footer ul {
  list-style: none;
  padding: 0;
}
.site-footer li {
  margin-bottom: var(--abstand-1);
}
.site-footer__grid {
  display: grid;
  gap: var(--abstand-4) var(--abstand-5);
}
@media (min-width: 48rem) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}
.kanaele {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
}
.site-footer__hinweis {
  border-top: 1px solid rgb(246 240 228 / 0.3);
  margin-top: var(--abstand-4);
  padding-top: var(--abstand-3);
  font-size: 0.95rem;
}

/* ---------- Zustimmung Amazon-Bilder (nur bei AMAZON_BILDER_AKTIV) ---------- */

.einwilligung {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 20;
  background: var(--sand-hell);
  border-top: 3px solid var(--petrol);
  padding-block: var(--abstand-3);
  font-size: 1rem;
}
.einwilligung[hidden] {
  display: none;
}
.einwilligung__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3);
  align-items: center;
  justify-content: space-between;
}
.einwilligung__inner p {
  margin: 0;
  max-width: 48rem;
}
.einwilligung__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-2);
}
.produkt-karte__bild {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  margin-bottom: var(--abstand-3);
}

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