/* Computer-Service Wegberg – statische Fassung, Optik an das bisherige Twenty-Seventeen-Child-Theme angelehnt */

@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/libre-franklin-300.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/libre-franklin-300italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-franklin-regular.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/libre-franklin-600.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/libre-franklin-600italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/libre-franklin-800.woff2") format("woff2"); }

:root {
  --rot: #a4161c;
  --text: #333;
  --linie: #eee;
}

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

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

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.66;
}
@media (min-width: 48em) { body { font-size: 1rem; } }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 1.5em; }

a { color: #222; text-decoration: none; box-shadow: 0 1px 0 0 currentColor; }
a:hover, a:focus { color: #000; box-shadow: 0 3px 0 0 currentColor; }
a img { box-shadow: none; }

p { margin: 0 0 1.5em; padding: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 0.5em 1em; z-index: 100; }
.skip-link:focus { left: 0; }

/* Kopf */
/* Das Logo-JPG hat #fbfbfb als Hintergrund; der Kopfbereich bekommt dieselbe Farbe, damit kein Kasten sichtbar ist */
.site-header { background: #fbfbfb; }
.branding { text-align: right; }
.branding img { display: inline-block; max-width: 100%; height: auto; max-height: 232px; width: auto; vertical-align: bottom; }
.branding a { box-shadow: none; display: inline-block; }

/* Menü */
.main-nav { background: #fff; border-bottom: 1px solid var(--linie); border-top: 1px solid var(--linie); position: relative; z-index: 10; }
.menu-toggle {
  display: block; width: 100%; margin: 0; padding: 1em; text-align: left;
  background: transparent; border: 0; font: inherit; font-size: 0.875rem; font-weight: 800; color: #333; cursor: pointer;
}
.menu { list-style: none; margin: 0; padding: 0; display: none; }
.menu.open { display: block; }
.menu li { margin: 0; position: relative; }
.menu a, .sub-toggle {
  display: block; padding: 0.75em 0; font-size: 0.875rem; font-weight: 600; line-height: 1.2;
  color: #222; box-shadow: none; background: transparent; border: 0; font-family: inherit; cursor: pointer; text-align: left; width: 100%;
}
.menu a:hover, .menu a:focus, .sub-toggle:hover, .sub-toggle:focus { color: #767676; box-shadow: none; }
.menu a[aria-current="page"], .has-sub.current > .sub-toggle { color: #000; }
.caret { display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); }
.sub-menu { list-style: none; margin: 0; padding: 0 0 0 1em; display: none; }
.has-sub.open > .sub-menu { display: block; }

@media (min-width: 48em) {
  .menu-toggle { display: none; }
  .menu { display: flex; flex-wrap: wrap; }
  .menu > li > a, .menu > li > .sub-toggle { display: inline-block; width: auto; padding: 1.2em 1.1em; }
  .menu > li:first-child > a { padding-left: 0; }
  .sub-menu {
    position: absolute; left: 0; top: 100%; min-width: 15em; margin: 0; padding: 0;
    background: #fff; border: 1px solid #bbb; border-top: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
  .sub-menu a { padding: 0.75em 1em; white-space: nowrap; }
  .has-sub:hover > .sub-menu, .has-sub:focus-within > .sub-menu, .has-sub.open > .sub-menu { display: block; }
}

/* Inhalt */
.site-content { padding: 2.5em 0 3em; }

.entry-title {
  margin: 0 0 1em; color: var(--rot); font-size: 1.5rem; font-weight: 600; letter-spacing: 0.1em;
  line-height: 1.4; text-transform: none; overflow-wrap: break-word;
}

.entry-content h2 { color: #333; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.1em; line-height: 1.4; margin: 2.5em 0 1em; text-transform: uppercase; }
.entry-content h2:first-child { margin-top: 0; }
.entry-content ul { list-style: square; margin: 1em 0 1.2em 14px; padding-left: 14px; }
.entry-content ol { list-style: decimal; margin: 1em 0 1.2em; padding-left: 14px; }

.cols { display: block; }
.col { min-width: 0; }
@media (min-width: 48em) {
  .cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.75em; }
}
.cols + .cols { margin-top: 1em; }

.rote_symbole_text { color: var(--rot); font-size: 1.5rem; vertical-align: -7%; }
.icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.12em; }
.telefonnummer_fussnote { color: var(--rot); font-size: 2rem; }
.kapitaelchen { float: left; font-size: 3.2em; line-height: 0.9; padding: 0.05em 0.1em 0 0; font-weight: 800; }

/* Formular */
.kontaktformular label { display: block; font-weight: 400; }
.kontaktformular input[type="text"], .kontaktformular input[type="email"], .kontaktformular input[type="tel"], .kontaktformular textarea {
  width: 100%; max-width: 40em; padding: 0.7em; font: inherit; color: #666; background: #fff;
  border: 1px solid #bbb; border-radius: 3px;
}
.kontaktformular input:focus, .kontaktformular textarea:focus { color: #222; border-color: #333; outline: 0; }
.kontaktformular .zustimmung label { max-width: 40em; }
.kontaktformular .zustimmung input { margin-right: 0.4em; }
.kontaktformular input[type="submit"] {
  padding: 0.7em 2em; font: inherit; font-size: 0.875rem; font-weight: 800; color: #fff; background: #222;
  border: 0; border-radius: 2px; cursor: pointer;
}
.kontaktformular input[type="submit"]:hover, .kontaktformular input[type="submit"]:focus { background: #767676; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-status { padding: 0.8em 1em; border: 2px solid #46b450; margin: 0 0 1.5em; max-width: 40em; }
.form-status.fehler, .form-status.eingabe { border-color: var(--rot); }
.form-status[hidden] { display: none; }

/* Fuß */
.site-footer { background: #fff; border-top: 1px solid var(--linie); padding: 2.5em 0 1em; font-size: 0.875rem; }
.widget-title { margin: 0 0 1em; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #333; }
.footer-cols { display: block; }
@media (min-width: 48em) {
  .footer-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.75em; }
}
.site-footer p { margin-bottom: 1.2em; }