/* Brennholz Frank Keßler – Stylesheet
   Farben & Schriften nach CI-Handout (Roboto Slab / Roboto, Grün 1–3, Braun) */

@font-face{font-family:"Roboto Slab";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/roboto-slab-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto Slab";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/roboto-slab-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Roboto";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/roboto-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Roboto";font-style:normal;font-display:swap;font-weight:100 900;
  src:url(fonts/roboto-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --gruen:#005E5A;      /* Grün 1 – Hauptfarbe, großer Baum */
  --gruen-dunkel:#004542;
  --tanne:#005D2C;      /* Grün 2 */
  --gruen3:#005D40;     /* Grün 3 */
  --braun:#805931;      /* Braun – Jahresring */
  --papier:#EFECE6;     /* Papierton aus Briefbogen */
  --linie:#D6D0C4;
  --text:#000;
  --text-2:#3d3d3a;
  --weiss:#fff;
  --slab:"Roboto Slab",Rockwell,"Courier New",Georgia,serif;
  --sans:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --max:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.62;color:var(--text);background:var(--weiss)}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen);text-underline-offset:.18em}
a:hover{color:var(--gruen-dunkel)}
:focus-visible{outline:3px solid var(--braun);outline-offset:2px}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--slab);line-height:1.12;margin:0 0 .5em;color:var(--text)}
h1{font-weight:900;font-size:clamp(2.2rem,5.2vw,4rem);letter-spacing:-.01em}
h2{font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-weight:600;font-size:1.25rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.prose{max-width:68ch}
.lead{font-size:1.2rem;line-height:1.55;color:var(--text-2)}
.skip{position:absolute;left:-999px;top:0;background:var(--gruen);color:#fff;padding:.6em 1em;z-index:100}
.skip:focus{left:10px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:500;font-size:1rem;
  padding:.8em 1.3em;border-radius:3px;text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2}
.btn-primaer{background:var(--gruen);color:#fff}
.btn-primaer:hover{background:var(--gruen-dunkel);color:#fff}
.btn-hell{background:#fff;color:var(--gruen)}
.btn-hell:hover{background:var(--papier);color:var(--gruen-dunkel)}
.btn-rahmen{border-color:currentColor;color:var(--gruen);background:transparent}
.btn-rahmen-hell{border-color:#fff;color:#fff;background:transparent}
.btn-rahmen-hell:hover{background:rgba(255,255,255,.12);color:#fff}
.btn svg{width:1.1em;height:1.1em;flex:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--linie)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.logo img{height:66px;width:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav a{font-weight:500;color:var(--text);text-decoration:none;padding:.5em .75em;border-radius:3px}
.nav a:hover,.nav a[aria-current=page]{color:var(--gruen);background:var(--papier)}
.nav .tel{margin-left:10px;background:var(--gruen);color:#fff}
.nav .tel:hover{background:var(--gruen-dunkel);color:#fff}
.menue-knopf{display:none;background:none;border:2px solid var(--text);border-radius:3px;padding:.45em .8em;font:500 1rem var(--sans);cursor:pointer}
@media (max-width:900px){
  .logo img{height:54px}
  .kopf .wrap{min-height:70px}
  .menue-knopf{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;align-items:stretch;
    padding:10px 20px 20px;border-bottom:1px solid var(--linie);gap:2px}
  .nav.offen{display:flex}
  .nav a{padding:.8em .5em}
  .nav .tel{margin:8px 0 0;text-align:center}
  .no-js .nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;padding:0}
  .no-js .menue-knopf{display:none}
}

/* Hero */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#1d2a22}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,38,36,.86) 0%,rgba(0,38,36,.55) 42%,rgba(0,38,36,0) 72%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:80px;padding-bottom:72px}
.hero h1{color:#fff;max-width:11ch;margin-bottom:.35em}
.hero p{font-size:1.25rem;line-height:1.5;max-width:34ch;margin-bottom:1.6em}
@media (max-width:700px){
  .hero{min-height:82vh}
  .hero img{object-position:40% 50%}
  .hero::after{background:linear-gradient(0deg,rgba(0,38,36,.92) 0%,rgba(0,38,36,.6) 50%,rgba(0,38,36,.1) 85%)}
  .hero p{font-size:1.1rem}
}

/* Faktenband */
.fakten{background:var(--papier);border-bottom:1px solid var(--linie)}
.fakten dl{display:grid;grid-template-columns:repeat(3,1fr);margin:0}
.fakten dl>div{padding:22px 24px 22px 0}
.fakten dl>div+div{padding-left:24px;border-left:1px solid var(--linie)}
.fakten dt{font-size:.92rem;color:var(--text-2)}
.fakten dd{margin:0;font-family:var(--slab);font-weight:700;font-size:1.2rem}
@media (max-width:760px){
  .fakten dl{grid-template-columns:1fr}
  .fakten dl>div,.fakten dl>div+div{padding:14px 0;border-left:0}
  .fakten dl>div+div{border-top:1px solid var(--linie)}
}

/* Abschnitte */
.abschnitt{padding:88px 0}
.abschnitt-papier{background:var(--papier)}
.abschnitt-kopf{max-width:62ch;margin-bottom:40px}
@media (max-width:700px){.abschnitt{padding:60px 0}}

/* Ablauf – echte Reihenfolge, daher nummeriert */
.ablauf{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;counter-reset:schritt}
.ablauf li{counter-increment:schritt}
.ablauf figure{margin:0 0 16px;aspect-ratio:4/3;overflow:hidden;background:var(--papier)}
.ablauf figure img{width:100%;height:100%;object-fit:cover}
.ablauf h3::before{content:counter(schritt);display:block;font-weight:900;font-size:2.4rem;line-height:1;color:var(--braun);margin-bottom:.25em}
.ablauf p{color:var(--text-2);font-size:1rem}
.ablauf .karte-lieferung{aspect-ratio:4/3;background:var(--gruen);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;margin-bottom:16px}
.karte-lieferung strong{font-family:var(--slab);font-weight:900;font-size:2.6rem;line-height:1}
.karte-lieferung span{font-size:1rem;opacity:.92}
@media (max-width:1000px){.ablauf{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.ablauf{grid-template-columns:1fr}}

/* Holzarten */
.holzarten{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:36px}
.holzarten article{border-top:2px solid var(--text);padding-top:18px}
.holzarten .sorte{font-size:.95rem;color:var(--braun);font-weight:500;margin-bottom:.4em}
.holzarten p{color:var(--text-2)}
@media (max-width:820px){.holzarten{grid-template-columns:1fr;gap:28px}}

/* Über mich */
.ueber{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:56px;align-items:center}
.ueber img{width:100%;aspect-ratio:1;object-fit:cover}
.unterschrift{font-family:var(--slab);font-weight:600;margin-top:1.4em}
.unterschrift span{display:block;font-family:var(--sans);font-weight:400;color:var(--text-2)}
@media (max-width:760px){.ueber{grid-template-columns:1fr;gap:28px}.ueber img{max-width:260px}}

/* Bestellband */
.bestellen{background:var(--gruen);color:#fff}
.bestellen h2,.bestellen h3{color:#fff}
.bestellen a:not(.btn){color:#fff}
.bestellen-raster{display:grid;grid-template-columns:1.1fr 1fr;gap:56px}
.bestellen ul{padding-left:1.2em;margin:0 0 1.4em}
.bestellen li{margin-bottom:.35em}
.bestellen .hinweis{font-size:.98rem;opacity:.9}
@media (max-width:820px){.bestellen-raster{grid-template-columns:1fr;gap:28px}}

/* Unterseiten-Kopf */
.seitenkopf{position:relative;color:#fff;background:#2a241c;min-height:280px;display:flex;align-items:flex-end;overflow:hidden}
.seitenkopf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.seitenkopf::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.2))}
.seitenkopf .wrap{position:relative;z-index:1;width:100%;padding-top:60px;padding-bottom:40px}
.seitenkopf h1{color:#fff;margin:0}
.seitenkopf p{margin:.5em 0 0;font-size:1.15rem;max-width:52ch}
.seitenkopf-schlicht{background:var(--papier);color:var(--text);min-height:0}
.seitenkopf-schlicht::after{display:none}
.seitenkopf-schlicht h1{color:var(--text)}
.seitenkopf-schlicht .wrap{padding-top:56px;padding-bottom:36px}
.brotkrumen{font-size:.92rem;margin-bottom:.6em}
.brotkrumen a{color:inherit}

/* Preistabellen */
.tabelle-scroll{overflow-x:auto;margin:0 0 20px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
caption{text-align:left;font-family:var(--slab);font-weight:600;font-size:1.25rem;padding-bottom:12px}
th,td{padding:.7em .9em;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top}
thead th{font-weight:500;font-size:.95rem;color:var(--text-2);border-bottom:2px solid var(--text)}
td.zahl,th.zahl{text-align:right;white-space:nowrap}
tbody th{font-family:var(--slab);font-weight:600}
tr.gruppe td,tr.gruppe th{border-top:2px solid var(--linie)}
.einheit{font-size:.92rem;color:var(--text-2)}
.zwei-spalten{display:grid;grid-template-columns:1.4fr 1fr;gap:56px;align-items:start}
@media (max-width:900px){.zwei-spalten{grid-template-columns:1fr;gap:36px}}
.kasten{background:var(--papier);padding:24px 26px;margin-bottom:24px}
.kasten h3{margin-top:0}
.kasten p:last-child{margin-bottom:0}

/* Preisrechner */
.rechner{display:none;background:var(--papier);padding:36px;margin-top:8px}
.js .rechner{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.rechner fieldset{border:0;margin:0 0 20px;padding:0}
.rechner legend,.rechner label.titel{font-weight:500;display:block;margin-bottom:8px}
.auswahl{display:flex;flex-wrap:wrap;gap:8px}
.auswahl label{position:relative}
.auswahl input{position:absolute;opacity:0;width:1px;height:1px}
.auswahl span{display:inline-block;padding:.55em 1em;border:1.5px solid var(--linie);background:#fff;border-radius:3px;cursor:pointer}
.auswahl input:checked+span{border-color:var(--gruen);background:var(--gruen);color:#fff}
.auswahl input:focus-visible+span{outline:3px solid var(--braun);outline-offset:2px}
.menge{display:flex;align-items:center;gap:10px}
.menge input{width:5.5em;font:500 1.1rem var(--sans);padding:.45em .6em;border:1.5px solid var(--linie);border-radius:3px}
.menge button{width:2.4em;height:2.4em;font-size:1.2rem;border:1.5px solid var(--linie);background:#fff;border-radius:3px;cursor:pointer}
.ergebnis{background:#fff;padding:28px;align-self:start;border-top:4px solid var(--gruen)}
.ergebnis .betrag{font-family:var(--slab);font-weight:900;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;color:var(--gruen);margin:.15em 0 .3em}
.ergebnis .rechnung{color:var(--text-2);font-size:.98rem}
.ergebnis .klein{font-size:.9rem;color:var(--text-2)}
@media (max-width:860px){.js .rechner{grid-template-columns:1fr;padding:24px}}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 56px}
.leistungen article{border-top:2px solid var(--text);padding-top:18px}
.leistungen .preis{font-family:var(--slab);font-weight:700;color:var(--gruen)}
@media (max-width:760px){.leistungen{grid-template-columns:1fr}}
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:48px 0}
.bildpaar img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:600px){.bildpaar{grid-template-columns:1fr}}

/* Artikel */
.artikel h2{font-size:1.6rem;margin-top:1.6em}
.artikel h3{margin-top:1.3em}
.artikel ul{padding-left:1.2em}
.artikel li{margin-bottom:.4em}
.artikelliste{list-style:none;padding:0;margin:0;display:grid;gap:0}
.artikelliste li{border-top:1px solid var(--linie)}
.artikelliste li:last-child{border-bottom:1px solid var(--linie)}
.artikelliste a{display:block;padding:22px 0;text-decoration:none;color:var(--text)}
.artikelliste a:hover h2{color:var(--gruen)}
.artikelliste h2{font-size:1.45rem;margin:0 0 .25em}
.artikelliste p{margin:0;color:var(--text-2)}
.weiter{margin-top:48px;padding-top:24px;border-top:1px solid var(--linie)}

/* Formular */
.formular label{display:block;font-weight:500;margin-bottom:6px}
.formular .feld{margin-bottom:18px}
.formular input,.formular textarea{width:100%;font:400 1rem var(--sans);padding:.7em .8em;border:1.5px solid #b9b2a4;border-radius:3px;background:#fff}
.formular input:focus,.formular textarea:focus{border-color:var(--gruen);outline:2px solid var(--gruen);outline-offset:0}
.formular textarea{min-height:170px;resize:vertical}
.formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.formular .zeile{grid-template-columns:1fr}}
.formular .pflicht{color:var(--braun)}
.formular .datenschutz{font-size:.92rem;color:var(--text-2)}
.hp{position:absolute;left:-5000px}
.meldung{padding:14px 18px;margin-bottom:22px;border-left:4px solid var(--braun);background:var(--papier)}
.kontaktwege{list-style:none;padding:0;margin:0 0 24px}
.kontaktwege li{padding:12px 0;border-bottom:1px solid var(--linie)}
.kontaktwege strong{display:block;font-family:var(--slab);font-weight:600}

/* Fuß */
.fuss{background:var(--papier);border-top:1px solid var(--linie);padding:56px 0 28px;font-size:.98rem}
.fuss-raster{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px}
.fuss img{height:88px;width:auto;margin-bottom:12px}
.fuss h2{font-size:1.05rem;font-weight:600;margin-bottom:.7em}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.35em}
.fuss a{color:var(--text)}
.fuss .unten{margin-top:40px;padding-top:18px;border-top:1px solid var(--linie);font-size:.9rem;color:var(--text-2)}
@media (max-width:760px){.fuss-raster{grid-template-columns:1fr;gap:28px}}

/* Druck: Preisseite als Preisliste */
@media print{
  .kopf,.fuss,.rechner,.nicht-drucken,.seitenkopf img,.bestellen{display:none!important}
  .seitenkopf{min-height:0;color:#000;background:none}
  .seitenkopf::after{display:none}
  .seitenkopf h1{color:#000}
  .abschnitt{padding:12px 0}
  body{font-size:11pt}
  a{color:#000;text-decoration:none}
  .druck-kopf{display:block!important}
}
.druck-kopf{display:none}