/* AL-Holz Website — ein Stylesheet, keine Abhängigkeiten.
   Schlicht, schnell, mobil zuerst (Zielkonzept: kein Hochglanz). */
/* Markenfarben aus dem Logo (AL-Holz_Logo_RGB_web_transp.png, gemessen):
   Oliv #969C09 (AL) + Holzbraun #8B5014 (HOLZ). Für Text/Links ein
   abgedunkeltes Oliv (--akzent), damit der Kontrast auf Weiß reicht. */
:root {
  --grund: #FBFAF6; --flaeche: #FFFFFF; --tinte: #24221B; --tinte2: #6C675A;
  --linie: #E7E3D8; --marke: #969C09; --akzent: #6B7007; --akzent-hell: #F2F4DE;
  --holz: #8B5014; --chip: #F4F0E4;
}
* { box-sizing: border-box; }
html { background: var(--grund); scroll-behavior: smooth; }
body { margin: 0; color: var(--tinte);
  font: 17px/1.6 system-ui, 'Segoe UI', Roboto, sans-serif; }
img { max-width: 100%; height: auto; }

header.kopf { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.kopf-innen { max-width: 1000px; margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; }
.logo { height: 42px; width: auto; display: block; }
nav.haupt { display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: .95rem; }
nav.haupt a { color: var(--tinte2); text-decoration: none; padding: 4px 2px; }
nav.haupt a:hover, nav.haupt a:focus { color: var(--akzent); }
.tel { margin-left: auto; font-weight: 700; color: var(--akzent);
  text-decoration: none; white-space: nowrap; }

main { max-width: 1000px; margin: 0 auto; padding: 26px 18px 60px; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: .4rem 0 .6rem; text-wrap: balance; }
h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
p.vorspann { font-size: 1.06rem; color: var(--tinte2); max-width: 46rem; }
a { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.brotkrume { font-size: .85rem; color: var(--tinte2); margin-bottom: .3rem; }
.brotkrume a { color: var(--tinte2); }

table { border-collapse: collapse; width: 100%; background: var(--flaeche);
  font-variant-numeric: tabular-nums; }
.tabellen-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--linie); }
tr:last-child td { border-bottom: 0; }
th { background: var(--chip); font-size: .85rem; }
td.zahl, th.zahl { text-align: right; }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px; margin: 1rem 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 14px 16px; }
.karte h3 { margin: 0 0 .3rem; }
.karte .preis { font-size: 1.3rem; font-weight: 800; color: var(--holz);
  font-variant-numeric: tabular-nums; }
.karte .einheit { color: var(--tinte2); font-size: .85rem; font-weight: 400; }
.karte p { margin: .4rem 0 0; font-size: .9rem; color: var(--tinte2); }
.karte a.mehr { font-size: .9rem; }
.modell-preis { font-weight: 700; color: var(--holz); margin: .1rem 0 .5rem !important;
  font-size: .95rem; }

.hinweis { background: var(--akzent-hell); border: 1px solid var(--akzent);
  border-radius: 10px; padding: .8rem 1rem; margin: 1.2rem 0; }
/* Mehrere thematische Absätze im Hinweis-Kasten sauber an den Rändern (Bodo 21.07.). */
.hinweis > p:first-child { margin-top: 0; }
.hinweis > p:last-child { margin-bottom: 0; }
.chipzeile { display: flex; flex-wrap: wrap; gap: 8px; margin: .8rem 0; }
.chip { background: var(--chip); border-radius: 999px; padding: .2rem .75rem;
  font-size: .88rem; }
.lager { display: inline-block; border-radius: 10px; padding: .15rem .7rem;
  font-size: .82rem; font-weight: 600; line-height: 1.35; max-width: 100%; }
.lager-lagernd { background: #EEF1D2; color: #4F5405; }
.lager-knapp { background: #FBF0DC; color: #7A5410; }
.lager-vorbestellung { background: #E8EEF6; color: #2C4A73; }
.lager-anfrage { background: #EDEBE6; color: #5A5648; }
.cta { display: inline-block; background: var(--akzent); color: #fff;
  border-radius: 8px; padding: .6rem 1.2rem; font-weight: 700;
  text-decoration: none; margin: .6rem 0; }
.cta:hover, .cta:focus { filter: brightness(1.1); }
/* Zwei Knöpfe nebeneinander (Anfragen + Anrufen, Bodo 19.07.): am Handy
   sollen sie untereinander stehen statt zu quetschen. */
.cta + .cta { margin-left: .6rem; }
@media (max-width: 700px) {
  .cta { display: block; text-align: center; }
  .cta + .cta { margin-left: 0; }
}
/* Stillerer Zweit-Button (Anruf, Verweise): Umriss statt Vollfläche, damit
   der primäre Anfrage-Button führt (Bodo 20.07.). Auf den Übersichtsseiten
   sitzt der Handlungsaufruf jetzt als Button-Zeile an den passenden Stellen. */
.cta-still { background: transparent; color: var(--akzent);
  border: 2px solid var(--akzent); padding: calc(.6rem - 2px) calc(1.2rem - 2px); }
.cta-still:hover, .cta-still:focus { background: var(--akzent); color: #fff; filter: none; }
.cta-zeile { margin: .6rem 0; }
/* Anfragen-Button je Produkt (Bodo 20.07.): auf den Karten normal, in der
   Preistabelle der Ortsseiten die kompakte Variante. Der Button springt zum
   Formular #anfrage, das dort schon mit Produkt (+ Lieferort) vorbelegt ist. */
.cta-klein { padding: .32rem .7rem; font-size: .92rem; margin: 0; }
.td-cta { vertical-align: middle; white-space: nowrap; text-align: right; }
.td-cta .cta { display: inline-block; }
[id="anfrage"] { scroll-margin-top: .8rem; }

.rechner { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 14px 16px; margin: 1rem 0; }
.rechner label { font-weight: 600; margin-right: .6rem; }
.rechner select { font: inherit; padding: .3rem .5rem; }
.rechner output { font-weight: 800; color: var(--holz); font-size: 1.15rem; }

ul.orte { columns: 2; max-width: 40rem; padding-left: 1.2rem; }
@media (min-width: 700px) { ul.orte { columns: 3; } }

img.foto { width: 100%; height: auto; border-radius: 12px; margin: 1.1rem 0 .4rem;
  border: 1px solid var(--linie); }
img.foto-schmal { max-width: 460px; display: block; }

.faq { display: grid; gap: 10px; margin: 1.2rem 0; }
.faq details { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: .7rem 1rem; }
.faq summary { font-weight: 700; cursor: pointer; }
.faq summary::marker { color: var(--marke); }
.faq details[open] summary { color: var(--akzent); }
.faq p { margin: .6rem 0 .2rem; color: var(--tinte2); }

form.anfrage { max-width: 44rem; }
form.anfrage fieldset { background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: .4rem 1rem 1rem; margin: 0 0 14px;
  min-width: 0; }   /* sonst erzwingt fieldset die Breite seines Inhalts */
form.anfrage legend { font-weight: 700; padding: 0 .4rem; color: var(--akzent); }
form.anfrage label { display: block; font-weight: 600; margin: .7rem 0 .2rem; }
form.anfrage label.wahl { display: block; font-weight: 400; margin: .3rem 0; }
/* Privat/Firma nebeneinander + Vor-/Nachname zweispaltig (Bodo 19.07.);
   am Handy untereinander, damit nichts quetscht. */
form.anfrage .wahlzeile { display: flex; flex-wrap: wrap; gap: 1.2rem; }
form.anfrage .wahlzeile label.wahl { margin: .3rem 0 0; }
form.anfrage .zweispalt { display: flex; gap: .5rem; }
form.anfrage .zweispalt input { flex: 1; min-width: 0; }
@media (max-width: 700px) { form.anfrage .zweispalt { flex-direction: column; } }
/* Fahrzeug-Hinweis mit aufklappbarem Bild (Bodo 19.07.): ohne JavaScript,
   das Bild lädt erst beim Aufklappen. */
form.anfrage .bildinfo { margin: .4rem 0 0; }
form.anfrage .bildinfo summary { cursor: pointer; font-size: .9rem;
  color: var(--tinte2); list-style: none; }
form.anfrage .bildinfo summary::-webkit-details-marker { display: none; }
form.anfrage .bildinfo .info-ikon { color: var(--akzent); font-weight: 700;
  border: 1px solid var(--linie); border-radius: 999px;
  padding: .05rem .5rem; margin-left: .3rem; white-space: nowrap; }
form.anfrage .bildinfo img { display: block; margin-top: .5rem; width: 100%;
  max-width: 460px; height: auto; border-radius: 8px; border: 1px solid var(--linie); }
form.anfrage input, form.anfrage select, form.anfrage textarea {
  font: inherit; padding: .45rem .6rem; border: 1px solid var(--linie);
  border-radius: 7px; background: var(--grund); color: var(--tinte);
  max-width: 100%; }
form.anfrage input:not([type=checkbox]):not([type=radio]),
form.anfrage select, form.anfrage textarea { width: 100%; }
form.anfrage input[type=checkbox], form.anfrage input[type=radio] {
  width: auto; margin-right: .3rem; }
form.anfrage #plz { width: 6rem; display: inline-block; }
form.anfrage #ort { width: calc(100% - 7.5rem); display: inline-block; }
form.anfrage .einheit { display: block; color: var(--tinte2); font-size: .85rem;
  font-weight: 400; margin-top: .25rem; }
form.anfrage label.wahl .einheit { display: inline; margin: 0; }
form.anfrage table.slots { width: auto; background: none; margin: .2rem 0 .4rem;
  font-size: .95rem; }
form.anfrage table.slots td { border: 0; padding: .15rem .4rem .15rem 0;
  vertical-align: middle; }
form.anfrage table.slots td:first-child { min-width: 6.5rem; }
form.anfrage table.slots button { font: inherit; font-size: .82rem; cursor: pointer;
  background: none; border: 1px solid var(--linie); border-radius: 6px;
  padding: .1rem .45rem; color: var(--tinte2); white-space: nowrap; }
form.anfrage table.slots button:hover { border-color: var(--akzent); color: var(--akzent); }
form.anfrage tr.fenster-zusatz input[type=time] { margin-left: 0; }
form.anfrage table.slots input[type=time] { width: auto; }
form.anfrage table.slots label.wahl { margin: 0; white-space: nowrap; }
.nur-lesehilfe { position: absolute; left: -9999px; }

.gebiet-info { font-size: .9rem; margin: .3rem 0 0 !important; }
.gebiet-info.erkannt { color: var(--akzent); font-weight: 600; }
.gebiet-info.unbekannt { color: #7A5410; background: #FBF0DC; border-radius: 7px;
  padding: .5rem .7rem; }
.hinweis-lieferbar { font-size: .9rem; background: #E8EEF6; color: #2C4A73;
  border-radius: 7px; padding: .55rem .8rem; margin: .5rem 0 0 !important; }
.hinweis-lieferbar.warnung { background: #FBF0DC; color: #7A5410; }
form.anfrage .einheit.warnung-zeit { color: #7A5410; font-weight: 600; }
/* Nutzen-Satz beim Lieferfenster (Bodo 19.07.): dezent hervorgehoben —
   kein Kasten, nur ein zarter Grundton und eine Kante in der Markenfarbe,
   damit er aus dem Kleingedruckten heraussticht, ohne zu schreien. */
form.anfrage .vorteil { background: var(--akzent-hell);
  border-left: 3px solid var(--marke); border-radius: 0 7px 7px 0;
  padding: .55rem .8rem; margin: .5rem 0 0; font-size: .95rem;
  color: var(--tinte); }
form.anfrage label.wahl.gesperrt { color: var(--tinte2); opacity: .55;
  text-decoration: line-through; text-decoration-color: var(--tinte2); }
form.anfrage label.wahl.gesperrt .einheit { text-decoration: none; }

.summe { background: var(--akzent-hell); border: 1px solid var(--akzent);
  border-radius: 10px; padding: .7rem 1rem; margin: 0 0 12px;
  font-variant-numeric: tabular-nums; line-height: 1.6; }

footer.fuss { background: var(--flaeche); border-top: 1px solid var(--linie);
  margin-top: 40px; }
.fuss-innen { max-width: 1000px; margin: 0 auto; padding: 22px 18px 30px;
  display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  font-size: .9rem; color: var(--tinte2); }
.fuss-innen a { color: var(--tinte2); }
.fuss-innen strong { color: var(--tinte); }