:root {

  --red: #b21a1a;

  --text: #1f2937;

  --muted: #6b7280;

  --bg: #f6f6f6;

  --card: #ffffff;

  --border: rgba(0, 0, 0, 0.08);

}



* {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  font-family: Arial, Helvetica, sans-serif;

  color: var(--text);

  background: var(--bg);

}



.skip-link {

  position: absolute;

  left: -999px;

  top: 8px;

  padding: 10px 12px;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 8px;

  color: var(--text);

  z-index: 10;

}



.skip-link:focus {

  left: 8px;

}



.site-header {

  max-width: 1100px;

  margin: 0 auto;

  padding: 18px 16px 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 14px;

}



.brand-icon {

  width: 44px;

  height: 44px;

  background: var(--red);

  border-radius: 6px;

  position: relative;

}



.brand-icon::before {

  content: "";

  position: absolute;

  left: 10px;

  top: 9px;

  width: 9px;

  height: 26px;

  background: #fff;

  border-radius: 2px;

}



.brand-icon::after {

  content: "";

  position: absolute;

  left: 23px;

  top: 7px;

  width: 12px;

  height: 32px;

  background: #fff;

  opacity: 0.15;

  border-radius: 3px;

}



.brand-name {

  font-weight: 800;

  letter-spacing: 0.06em;

  font-size: 20px;

}



.brand-role {

  font-size: 12px;

  margin-top: 2px;

  letter-spacing: 0.12em;

  color: var(--muted);

  font-weight: 700;

}



.brand-bar {

  height: 15px;

  /* Referenz-Farbverlauf aus dem bereitgestellten Beispielbild */

  background: linear-gradient(

    90deg,

    rgb(187, 0, 0) 0%,

    rgb(196, 0, 0) 25%,

    rgb(211, 0, 0) 50%,

    rgb(229, 0, 0) 75%,

    rgb(238, 0, 0) 100%

  );

  margin-top: 14px;

  margin-bottom: 18px;

}



.page {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 16px 28px;

}



.layout {

  display: grid;

  grid-template-columns: 200px 1fr;

  gap: 22px;

  align-items: start;

}



.side-nav {

  position: sticky;

  top: 12px;

  padding-top: 18px;

}



.nav-link {

  display: block;

  padding: 8px 0;

  color: var(--red);

  text-decoration: none;

  font-weight: 700;

  letter-spacing: 0.01em;

}



.nav-link:hover,

.nav-link:focus {

  text-decoration: underline;

}



.content {

  min-width: 0;

}



.section {

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 14px;

  padding: 20px 18px;

  margin-bottom: 16px;

  scroll-margin-top: 24px;

}



.section h1 {

  margin: 4px 0 10px;

  font-size: 24px;

}



.section h2 {

  margin: 0 0 12px;

  font-size: 18px;

  color: var(--red);

}



.section p {

  margin: 10px 0;

  line-height: 1.55;

}



.cta {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;

}



.btn {

  display: inline-block;

  background: var(--red);

  color: #fff;

  text-decoration: none;

  padding: 10px 14px;

  border-radius: 10px;

  font-weight: 800;

  letter-spacing: 0.01em;

  border: 1px solid var(--red);

}



.btn-ghost {

  background: #fff;

  color: var(--red);

}



.btn:hover,

.btn:focus {

  filter: brightness(1.03);

}



.list {

  margin: 10px 0;

  padding-left: 20px;

}



.list li {

  margin: 8px 0;

  line-height: 1.5;

}



.info-box {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 14px 14px;

  margin-top: 14px;

  background: #fff;

}



.info-title {

  font-weight: 800;

  letter-spacing: 0.04em;

  color: var(--muted);

  font-size: 12px;

  text-transform: uppercase;

}



.info-text {

  margin-top: 6px;

  line-height: 1.55;

}



.muted {

  color: var(--muted);

}



.contact-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 10px;

  margin-top: 10px;

}



.contact-item {

  border: 1px solid var(--border);

  border-radius: 12px;

  padding: 12px 12px;

  background: #fff;

}



.contact-label {

  font-weight: 900;

  letter-spacing: 0.06em;

  color: var(--muted);

  font-size: 12px;

  text-transform: uppercase;

  margin-bottom: 6px;

}



.contact-link {

  color: var(--text);

  font-weight: 800;

  text-decoration: none;

}



.contact-link:hover,

.contact-link:focus {

  text-decoration: underline;

  color: var(--red);

}



.impressum p {

  margin: 12px 0;

}



.site-footer {

  padding: 0 16px 24px;

}



.contact-strip {

  max-width: 1100px;

  margin: 0 auto;

  background: #e9e9e9;

  border-top: 1px solid rgba(0, 0, 0, 0.06);

  padding: 16px 18px;

  display: grid;

  grid-template-columns: 1.1fr 1.4fr 1fr 1fr;

  gap: 12px;

}



.strip-col {

  min-width: 0;

}



.strip-name {

  font-weight: 900;

  letter-spacing: 0.06em;

}



.strip-role {

  color: var(--muted);

  font-weight: 800;

  letter-spacing: 0.06em;

  margin-top: 2px;

  font-size: 12px;

}



.strip-phone,

.strip-addr,

.strip-mobile {

  font-weight: 700;

  line-height: 1.45;

}



.strip-contact-link {

  color: var(--red);

  text-decoration: none;

  font-weight: 900;

}



.strip-contact-link:hover,

.strip-contact-link:focus {

  text-decoration: underline;

}



@media (max-width: 860px) {

  .layout {

    grid-template-columns: 1fr;

  }

  .side-nav {

    position: static;

    padding-top: 0;

    display: flex;

    flex-wrap: wrap;

    gap: 16px;

  }

  .nav-link {

    padding: 6px 0;

  }

  .contact-strip {

    grid-template-columns: 1fr 1fr;

  }

}



@media (max-width: 520px) {

  .section h1 {

    font-size: 20px;

  }

  .contact-strip {

    grid-template-columns: 1fr;

  }

  .brand-name {

    font-size: 18px;

  }

  .brand-icon {

    width: 40px;

    height: 40px;

  }

}