/* ============================================================
   Beyer Schornsteintechnik Rhein-Main – style.css
   Modernisiert (HTML5/CSS3, Grid/Flexbox, responsive).
   Farben, Schriften und Optik entsprechen 1:1 dem Original (rmn.css).
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-text-muted: #333333;
  --color-accent: #ff0000;         /* rote Akzentfarbe (Links, Hover, Preise) */
  --color-panel-grey: #cccccc;     /* Rahmenspalten links/rechts + Footer-Leiste */
  --color-content-grey: #f5f5f5;   /* Content-Hintergrund rechts */
  --color-input-grey: #e8e8e8;     /* Formularfeld-Hintergrund */
  --font-base: Arial, Helvetica, sans-serif;
  --font-size-base: 13px;
  --font-size-small: 12px;
  --font-size-nav: 14px;
  --font-size-head: 24px;
  --font-size-headbig: 30px;
  --font-size-headnorm: 16px;
  --page-width: 761px;
  --sidebar-width: 175px;
  --content-width: 560px;
}

/* ---------- Grundlagen ---------- */
* {
  box-sizing: border-box;
}

/* Reserviert immer den Platz der vertikalen Scrollleiste - ohne das
   würden kurze Seiten (z.B. Impressum) ohne Scrollbalken minimal weiter
   rechts erscheinen als lange Seiten (z.B. Home) mit Scrollbalken. */
html {
  overflow-y: scroll;
}

body {
  background-color: var(--color-bg);
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: normal;
}

/* ---------- Links ---------- */
a {
  text-decoration: none;
  color: var(--color-accent);
  font-weight: normal;
  font-size: var(--font-size-small);
}
a:hover,
a:focus-visible {
  text-decoration: underline;
  color: var(--color-text);
}

a.nav,
a.navU {
  color: var(--color-text);
  font-size: var(--font-size-small);
}
a.nav {
  font-weight: bold;
}
a.nav:hover,
a.nav:focus-visible,
a.navU:hover,
a.navU:focus-visible {
  color: var(--color-accent);
  text-decoration: none;
}

.nav {
  font-family: var(--font-base);
  font-size: var(--font-size-nav);
  font-weight: bold;
  color: var(--color-text);
}
.navU {
  font-family: var(--font-base);
  font-size: var(--font-size-nav);
  color: var(--color-text);
}
.navwahl,
.nav-aktiv {
  font-family: var(--font-base);
  font-size: var(--font-size-small);
  font-weight: bold;
  color: var(--color-accent);
}

/* ---------- Sichtbarkeit für Tastatur-Fokus (Barrierefreiheit) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  z-index: 100;
  border: 2px solid var(--color-accent);
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ---------- Seiten-Rahmen ---------- */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

/* ---------- Kopfbereich ---------- */
.site-header {
  display: flex;
  width: 100%;
}
.site-header img {
  display: block;
  height: auto;
  max-width: 100%;
}
.site-header__logo {
  flex: 0 0 181px;
  max-width: 181px;
}
.site-header__banner {
  flex: 1 1 580px;
}

/* ---------- Hauptbereich: Sidebar + Content ---------- */
.site-main {
  display: flex;
  align-items: stretch;
}

/* Sidebar */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  max-width: var(--sidebar-width);
  background-color: var(--color-bg);
  padding: 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-nav {
  width: 170px;
}
.site-nav ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.site-nav li {
  margin: 0;
}
.site-nav a,
.site-nav .nav-current {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  padding: 0 0 0 40px;
}
.site-nav__icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}
.site-nav__sub a {
  padding-left: 62px;
  font-size: var(--font-size-small);
}

.sidebar-promo {
  margin-top: 20px;
  text-align: center;
}
.sidebar-promo img {
  display: block;
  margin: 0 auto 10px;
  max-width: 100%;
  height: auto;
}

/* Trennlinie zwischen Sidebar und Content */
.divider {
  flex: 0 0 5px;
  background-image: url("../images/strich.gif");
  background-repeat: repeat-y;
}

/* Dünner Rahmen (#CCCCCC) am äußersten Seitenrand, wie im Original */
.site-main {
  border-left: 1px solid var(--color-panel-grey);
  border-right: 1px solid var(--color-panel-grey);
}

/* Content-Bereich */
.content {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--color-content-grey);
  padding: 0 10px;
}
.content__inner {
  max-width: 550px;
  margin: 0 auto;
  padding-top: 10px;
}
.content__inner--wide {
  max-width: 560px;
}

.kwk-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.kwk-layout .form-grid {
  flex: 1 1 380px;
}
.kwk-layout__image {
  flex: 0 0 110px;
  text-align: center;
}
.kwk-layout__image img {
  max-width: 100%;
  height: auto;
}

.head {
  font-size: var(--font-size-head);
  color: var(--color-text);
  font-weight: bold;
}
.headbig {
  font-size: var(--font-size-headbig);
  font-weight: bold;
  text-align: center;
}
.headnorm {
  font-size: var(--font-size-headnorm);
  font-weight: bold;
}
.klein {
  font-size: var(--font-size-small);
}
.kleinRot {
  font-size: var(--font-size-small);
  color: var(--color-accent);
}
.bold {
  font-weight: bold;
}
.normText {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: var(--font-size-nav);
}

.content figure {
  margin: 0 0 1em;
  text-align: center;
}
.content figure img {
  max-width: 100%;
  height: auto;
}

.inline-img {
  max-width: 170px;
  height: auto;
  margin-bottom: 10px;
}
.inline-img--left {
  float: left;
  margin-right: 10px;
}
.inline-img--right {
  float: right;
  margin-left: 10px;
}
.content__inner::after {
  content: "";
  display: block;
  clear: both;
}

.cta {
  text-align: center;
  margin: 1em 0;
}
.cta a {
  color: var(--color-accent);
  font-style: italic;
}

.advantages {
  max-width: 480px;
  margin: 1em auto;
  padding-left: 1.2em;
}
.advantages li {
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* ---------- Galerie (Kaminöfen-Seite) ---------- */
.gallery-grid {
  list-style: none;
  margin: 1.5em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 30px;
}
.gallery-grid li {
  width: 170px;
  text-align: center;
}
.gallery-grid img {
  display: block;
  width: 170px;
  height: 170px;
  border: 0;
}
.gallery-grid__caption {
  margin: 8px 0 0;
  font-size: var(--font-size-base);
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  border-left: 1px solid var(--color-panel-grey);
  border-right: 1px solid var(--color-panel-grey);
}
.site-footer__spacer {
  flex: 0 0 var(--sidebar-width);
  max-width: var(--sidebar-width);
  background-color: var(--color-bg);
}
.site-footer__divider {
  flex: 0 0 5px;
  background-image: url("../images/strich.gif");
  background-repeat: repeat-y;
}
.site-footer__info {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--color-content-grey);
  padding: 16px 10px;
  text-align: center;
  font-size: var(--font-size-small);
}
.site-footer__info a {
  color: var(--color-accent);
}

/* ---------- Formulare ---------- */
.form-grid {
  display: grid;
  gap: 14px;
  max-width: 370px;
}
.form-row {
  display: flex;
  gap: 10px;
}
.form-field {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.form-field label {
  background-color: var(--color-content-grey);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  padding-left: 2px;
  margin-bottom: 2px;
}
input.normal,
input.lang,
input.kurz,
input.mittel,
.form-field input[type="text"],
.form-field textarea {
  font-family: var(--font-base);
  font-size: var(--font-size-nav);
  background-color: var(--color-input-grey);
  color: var(--color-text-muted);
  border: 0;
  padding: 4px 5px;
  height: 26px;
}
textarea {
  font-family: var(--font-base);
  font-size: var(--font-size-nav);
  background-color: var(--color-input-grey);
  color: var(--color-text-muted);
  border: 0;
  padding: 5px;
  width: 100%;
  min-height: 100px;
}
input.kurz { width: 60px; }
input.mittel { width: 100%; }
input.normal { width: 100%; }
input.lang { width: 100%; }

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Spam-Honeypot: für echte Nutzer unsichtbar, aber für Screenreader
   nicht einfach nur display:none (das ignorieren manche Bots gezielt) -
   stattdessen optisch verschoben und mit aria-hidden auf dem Wrapper. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-submit {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.form-submit img {
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .page {
    max-width: 100%;
  }
  .site-header {
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
  }
  .site-header__logo,
  .site-header__banner {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .site-main {
    flex-direction: column;
  }
  .sidebar {
    flex-basis: auto;
    max-width: 100%;
    width: 100%;
    padding: 16px 0;
  }
  .divider {
    display: none;
  }
  .site-nav {
    width: 100%;
    max-width: 320px;
  }

  .site-footer {
    flex-direction: column;
  }
  .site-footer__spacer,
  .site-footer__divider {
    display: none;
  }

  .form-row {
    flex-direction: column;
  }

  .inline-img--left,
  .inline-img--right {
    float: none;
    display: block;
    margin: 0 auto 10px;
  }
}