/* WOLF Die Baustoffprofis – Oberputz-Berater
   Farben nach Brand Book: Wolf Blau #002851, dunkel #001F5C, hell #1A3553, Grau #F3F3F3, Weiß */
:root {
  --blau: #002851;
  --blau-dunkel: #001F5C;
  --blau-hell: #1A3553;
  --grau: #F3F3F3;
  --grau-linie: #d9dde3;
  --weiss: #ffffff;
  --schwarz: #111111;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  font-family: "Anek Latin", "Segoe UI", Arial, sans-serif;
  color: var(--blau-hell);
  background: var(--weiss);
  line-height: 1.5;
}

.innen { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

a { color: var(--blau); }
a:hover { color: var(--blau-dunkel); }

h1, h2, h3 { color: var(--blau); line-height: 1.15; margin: 0 0 .4em; }
h1 { font-weight: 800; font-size: 2.1rem; }
h2 { font-weight: 800; font-size: 1.5rem; }
h3 { font-weight: 700; font-size: 1.05rem; margin-top: 1.2em; }

/* Kopf */
.kopf { border-bottom: 4px solid var(--blau); background: var(--weiss); }
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 16px; }
.logo { height: 58px; width: auto; display: block; }
.nav a { font-weight: 700; text-decoration: none; margin-left: 22px; padding-bottom: 4px; border-bottom: 3px solid transparent; text-transform: uppercase; letter-spacing: .02em; font-size: .95rem; }
.nav a.aktiv, .nav a:hover { border-bottom-color: var(--blau); }

/* Bühne */
.buehne { padding: 40px 0 8px; position: relative; }
.buehne-klein { padding-top: 28px; }
.ueberzeile { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .8rem; color: var(--blau); margin: 0 0 6px; }
.buehne h1::after { content: ""; display: block; width: 72px; height: 7px; background: var(--blau); margin-top: 12px; transform: skewY(-6deg); transform-origin: left; }
.einleitung { font-size: 1.1rem; max-width: 720px; }

/* Fragebogen */
.fragebogen { margin: 24px 0 40px; }
.frage { border: 0; padding: 0; margin: 0 0 26px; }
.frage legend { font-weight: 800; color: var(--blau); font-size: 1.15rem; padding: 0; margin-bottom: 10px; }
.nr { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; background: var(--blau); color: var(--weiss); border-radius: 50%; margin-right: 8px; font-size: .95rem; }
.optional { font-weight: 400; color: var(--blau-hell); font-size: .9rem; }
.optionen { display: flex; flex-wrap: wrap; gap: 8px; }
.option { display: inline-flex; align-items: center; gap: 8px; background: var(--grau); border: 2px solid var(--grau); border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.option:hover { border-color: var(--blau); }
.option:has(input:checked) { background: var(--blau); border-color: var(--blau); color: var(--weiss); }
.option input { accent-color: var(--blau); margin: 0; }
.option:has(input:checked) input { accent-color: var(--weiss); }
.flaeche-eingabe input { font: inherit; font-size: 1.1rem; padding: 8px 12px; border: 2px solid var(--grau-linie); border-radius: 6px; width: 160px; }
.flaeche-eingabe input:focus { outline: none; border-color: var(--blau); }
.aktion { margin-top: 10px; }
.knopf { font: inherit; font-weight: 800; font-size: 1.1rem; background: var(--blau); color: var(--weiss); border: 0; border-radius: 6px; padding: 14px 28px; cursor: pointer; }
.knopf:hover { background: var(--blau-dunkel); }

/* Karten */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.karte-klein { background: var(--grau); border-radius: 8px; padding: 18px 20px; }
.karte-klein h3 { margin-top: 0; }
.karte-klein p { margin: 0 0 .5em; }
.typ { font-weight: 700; color: var(--blau); margin-top: -4px; }
.typ-inline { font-weight: 400; font-size: .95rem; color: var(--blau-hell); margin-left: 8px; }
.meta { font-size: .9rem; color: var(--blau-hell); }

.karte { border: 2px solid var(--grau-linie); border-radius: 10px; padding: 22px 24px; margin: 18px 0; background: var(--weiss); }
.karte-top { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(0, 40, 81, .08); }
.karte-kopf h2 { margin-bottom: 0; }
.rang { display: inline-block; background: var(--blau); color: var(--weiss); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 4px; margin-bottom: 8px; }
.karte .rang + h2 { margin-top: 0; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.zwei-spalten h3:first-child { margin-top: .4em; }

ul.gut, ul.achtung { padding-left: 1.2em; margin: 0; }
ul.gut li::marker { color: var(--blau); }
ul.achtung li::marker { color: #8a6d00; }
.achtung-text { color: #8a6d00; }

.chips { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--grau); border-radius: 4px; padding: 3px 9px; font-size: .85rem; font-weight: 600; }

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: .95rem; }
.daten dt { font-weight: 700; color: var(--blau); }
.daten dd { margin: 0; }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 6px 0 12px; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--grau-linie); vertical-align: top; }
.tabelle th { background: var(--grau); color: var(--blau); font-weight: 700; }
.tabelle tr.gedimmt td { color: #777; }
.tabelle-scroll { overflow-x: auto; }
.sortiment { min-width: 900px; }
.klein { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.links { font-size: .95rem; }

/* Sonstiges */
.angaben { list-style: none; padding: 0; margin: 12px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.angaben li { background: var(--grau); border-radius: 4px; padding: 4px 10px; font-weight: 600; font-size: .9rem; }
.link-pfeil { font-weight: 700; text-decoration: none; }
.link-pfeil::after { content: " →"; }
.hinweis-box { background: var(--grau); border-left: 6px solid var(--blau); padding: 12px 16px; border-radius: 0 6px 6px 0; margin: 16px 0; }
.abschnitt { margin-top: 40px; }
.ausschluss { padding-left: 1.2em; }
.ueberblick { margin: 48px 0; }

.fuss { background: var(--blau); color: var(--weiss); margin-top: 48px; padding: 24px 0; }
.fuss p { margin: 0 0 6px; }
.fuss .klein { opacity: .85; }

@media (max-width: 720px) {
  html { font-size: 16px; }
  .logo { height: 44px; }
  .nav a { margin-left: 14px; }
  h1 { font-size: 1.6rem; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .karte { padding: 16px; }
  .daten { grid-template-columns: 1fr; gap: 0; }
  .daten dd { margin-bottom: 8px; }
}