* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:#253b4d;
  background:#fff;
  line-height:1.65
}
a {
  color:inherit
}
.container {
  max-width:1160px;
  margin:auto;
  padding:0 30px
}
.site-header {
  border-bottom:1px solid #e9edf0;
  background:white
}
.header-inner {
  min-height:94px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px
}
.brand {
  display:flex;
  align-items:center;
  gap:13px;
  font-weight:800;
  font-size:19px;
  letter-spacing:.06em;
  text-decoration:none;
  line-height:1.1;
  white-space:nowrap
}
.brand small {
  display:block;
  font-size:8px;
  letter-spacing:.17em;
  color:#748594;
  margin-top:8px
}
.brand-gear {
  color:#bd7549;
  font-size:43px;
  line-height:1
}
.brand-accent {
  color:#bd7549
}
.top-nav {
  display:flex;
  flex-wrap:wrap;
  gap:29px
}
.top-nav a {
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  color:#425568
}
.top-nav a:hover,.footer a:hover,.text-link:hover {
  color:#bd7549
}
.hero {
  background:linear-gradient(120deg,#f6f8f9,#fff 72%)
}
.hero-grid {
  min-height:590px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:20px
}
.eyebrow {
  font-size:11px;
  letter-spacing:.18em;
  font-weight:800;
  color:#bd7549;
  margin-bottom:19px
}
.hero h1 {
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.16;
  letter-spacing:-.045em;
  margin:0 0 24px
}
.hero h1 em {
  font-style:normal;
  color:#bd7549
}
.hero-sub {
  font-size:clamp(19px,2.1vw,25px);
  line-height:1.42;
  margin:0 0 22px
}
.hero-sub strong {
  font-weight:700
}
.hero-copy {
  font-size:15px;
  max-width:500px;
  color:#637382;
  margin-bottom:28px
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:35px;
  padding:13px 20px;
  border:1px solid #bd7549;
  text-decoration:none;
  font-size:12px;
  letter-spacing:.05em;
  font-weight:800;
  color:#a9633b;
  background:transparent
}
.btn:hover {
  background:#bd7549;
  color:#fff
}
.art-wrap {
  width:100%
}
.hero-art {
  width:100%;
  height:auto;
  display:block
}
.construction {
  background:#edf1f3;
  border-top:1px solid #e0e5e9;
  border-bottom:1px solid #e0e5e9
}
.construction .container {
  display:flex;
  align-items:center;
  gap:20px;
  padding-top:16px;
  padding-bottom:16px;
  font-size:12px;
  color:#596b78
}
.construction strong {
  color:#a7623c;
  white-space:nowrap
}
.construction span {
  flex:1
}
.construction a {
  white-space:nowrap;
  font-weight:700
}
.section {
  padding:82px 0
}
.section h2 {
  font-size:clamp(28px,3.2vw,40px);
  line-height:1.2;
  margin:0 0 18px;
  letter-spacing:-.035em
}
.section-intro {
  color:#657686;
  max-width:620px;
  margin:0 0 36px
}
/* Breitere Einleitungen: Zeilenumbruch abhängig vom verfügbaren Platz. */
.section-intro-fluid {
  max-width: none;
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px
}
.service {
  border:1px solid #e4e8ec;
  padding:31px 26px;
  min-height:300px;
  display:flex;
  flex-direction:column
}
.service .number {
  font-size:14px;
  color:#bd7549;
  font-weight:700;
  margin-bottom:24px
}
.service h3 {
  font-size:20px;
  line-height:1.3;
  margin:0 0 14px
}
.service p {
  font-size:14px;
  color:#617281;
  margin:0
}
.card-foot {
  border-top:1px solid #e8ebee;
  margin-top:auto;
  padding-top:19px;
  color:#ad6943;
  font-size:12px;
  font-weight:700
}
.alt {
  background:#f3f6f7
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px
}
.two-col p {
  color:#566a7a;
  margin:0 0 17px
}
.text-link {
  color:#a9633b;
  font-size:13px;
  font-weight:800
}
.closing {
  text-align:center
}
.closing p {
  color:#647484;
  margin:0 0 26px
}
.footer {
  border-top:1px solid #e7ebee;
  padding:27px 0;
  color:#6c7d89;
  font-size:12px
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:20px
}
.footer-inner div {
  display:flex;
  gap:24px
}
.footer a {
  text-decoration:none
}
.inner-page {
  min-height:55vh
}
.inner-page h1 {
  font-size:40px;
  line-height:1.2;
  margin:0 0 30px
}
.lead {
  font-size:19px;
  color:#637687
}
.panel {
  background:#f5f7f8;
  border:1px solid #e7ecee;
  padding:30px;
  max-width:650px
}
.panel h2 {
  font-size:23px
}
.legal {
  max-width:940px
}
.legal-content h2,.legal-content h3,.legal-content h4 {
  margin-top:28px;
  line-height:1.4
}
.legal-content p {
  overflow-wrap:anywhere
}
.legal-content a {
  overflow-wrap:anywhere
}
@media(max-width:850px) {
  .header-inner {
    align-items:flex-start;
    flex-direction:column;
    padding-top:20px;
    padding-bottom:20px;
    gap:18px
  }
  .top-nav {
    gap:18px
  }
  .hero-grid {
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:62px;
    padding-bottom:38px
  }
  .art-wrap {
    max-width:490px;
    margin:auto
  }
  .cards {
    grid-template-columns:1fr
  }
  .service {
    min-height:225px
  }
  .two-col {
    grid-template-columns:1fr;
    gap:10px
  }
  .construction .container {
    flex-wrap:wrap;
    gap:8px
  }
  .construction span {
    flex-basis:100%
  }
}
@media(max-width:480px) {
  .container {
    padding-left:20px;
    padding-right:20px
  }
  .top-nav {
    gap:12px 19px
  }
  .top-nav a {
    font-size:12px
  }
  .brand {
    font-size:16px
  }
  .brand-gear {
    font-size:36px
  }
  .hero-grid {
    padding-top:45px
  }
  .hero h1 {
    font-size:36px
  }
  .section {
    padding:58px 0
  }
  .footer-inner {
    flex-direction:column
  }
  .inner-page h1 {
    font-size:31px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}
/* V2.2: Bild und Inhalt gehen ohne sichtbare Trennkante ineinander über. */
.hero {
  overflow:hidden;
  background:linear-gradient(115deg,#f6f8f9 0%,#f7f9fa 48%,#eef2f5 100%)
}
.hero-grid {
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:8px
}
.art-wrap {
  width:calc(100% + 70px);
  margin-left:-20px;
  position:relative
}
.hero-art {
  width:100%;
  height:auto;
  display:block
}
@media(max-width:850px) {
  .hero-grid {
    grid-template-columns:1fr
  }
  .art-wrap {
    width:100%;
    margin:18px auto 0;
    max-width:700px
  }
}
/* V2.3: Leistungsnummern entfallen; Inhaber und bereitgestellter Berufsstempel. */
.owner-block {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:22px 0 24px;
  padding:16px 0;
  border-top:1px solid #dce4e8;
  border-bottom:1px solid #dce4e8
}
.owner-details {
  flex:1;
  min-width:0
}
.owner-details strong {
  display:block;
  font-size:14px;
  line-height:1.5;
  color:#253b4d
}
.owner-details p {
  font-size:13px;
  margin:7px 0 0
}
.owner-seal {
  width:112px;
  height:112px;
  object-fit:contain;
  flex-shrink:0
}
.contact-seal {
  width:115px;
  height:115px;
  object-fit:contain;
  display:block;
  margin:12px 0
}
@media(max-width:480px) {
  .owner-block {
    align-items:flex-start;
    gap:12px
  }
  .owner-seal {
    width:82px;
    height:82px
  }
}
/* V2.4 – lokal gespeicherte Piktogramme der drei Leistungsbereiche */
.service-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  border:2px solid #bd7549;
  border-radius:50%;
  margin-bottom:22px;
  flex-shrink:0;
  background:#fff
}
.service-icon img {
  width:48px;
  height:48px;
  display:block
}
/* V2.5: dezente Kennzeichnung der eingetragenen Marke im Schriftlogo */
.brand-registered {
  font-size:.49em;
  vertical-align:super;
  line-height:0;
  letter-spacing:0;
  margin-left:2px;
  color:#253b4d
}
/* V2.6: Kopfbereich bleibt beim Scrollen sichtbar, ohne Layoutversatz. */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff
}
/* Ankerziele nicht vom fixierten Kopfbereich verdecken lassen. */
#leistungen,#haltung {
  scroll-margin-top:115px
}
@media(max-width:850px) {
  #leistungen,#haltung {
    scroll-margin-top:170px
  }
}
@media(max-width:480px) {
  #leistungen,#haltung {
    scroll-margin-top:180px
  }
}
/* V2.7: Zeitleiste auf Startseite und Entwicklungsgeschichte */
.timeline-preview {
  background:#f8fafb
}
.timeline-strip {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:0;
  margin:38px 0 30px
}
.timeline-milestone {
  position:relative;
  padding:26px 14px 12px 0;
  border-top:3px solid #d7e0e5;
  min-width:0
}
.timeline-milestone:before {
  content:"";
  position:absolute;
  top:-9px;
  left:0;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#bd7549;
  border:2px solid #fff;
  box-shadow:0 0 0 1px #bd7549
}
.timeline-year {
  font-size:14px;
  font-weight:800;
  color:#b36d45
}
.timeline-milestone h3 {
  font-size:14px;
  line-height:1.3;
  margin:9px 0
}
.timeline-milestone p {
  font-size:12px;
  line-height:1.5;
  color:#607180;
  margin:0
}
.timeline-cta {
  margin-top:12px
}
.history-page {
  background:linear-gradient(#f8fafb,#fff)
}
.history-page h1 {
  font-size:clamp(30px,4vw,46px);
  line-height:1.2;
  margin:0 0 20px
}
.history-lead {
  max-width:850px;
  color:#607180;
  font-size:17px;
  margin-bottom:45px
}
.history-head,.history-row {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px
}
.history-head {
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#a9633b;
  padding:0 20px 15px
}
.history-row {
  position:relative;
  border-top:1px solid #dbe3e8;
  padding:24px 20px;
  align-items:start
}
.history-row:before {
  content:"";
  position:absolute;
  left:calc(45.45% - 20px);
  top:28px;
  width:10px;
  height:10px;
  background:#bd7549;
  border-radius:50%
}
.history-year {
  display:block;
  color:#a9633b;
  font-size:19px;
  font-weight:800;
  margin-bottom:8px
}
.history-context p,.history-experience p {
  margin:0;
  color:#607180;
  font-size:14px
}
.history-experience h2 {
  font-size:20px;
  margin:0 0 8px
}
.history-note {
  font-size:13px;
  color:#607180;
  background:#f2f5f7;
  padding:18px;
  margin:25px 0
}
@media(max-width:1000px) {
  .timeline-strip {
    grid-template-columns:repeat(4,minmax(0,1fr));
    row-gap:20px
  }
}
@media(max-width:650px) {
  .timeline-strip {
    grid-template-columns:1fr;
    gap:0
  }
  .timeline-milestone {
    border-top:0;
    border-left:3px solid #d7e0e5;
    padding:0 0 23px 22px
  }
  .timeline-milestone:before {
    left:-9px;
    top:3px
  }
  .timeline-milestone h3 {
    margin:4px 0
  }
  .history-head {
    display:none
  }
  .history-row {
    grid-template-columns:1fr;
    gap:12px;
    padding:20px 18px
  }
  .history-row:before {
    display:none
  }
  .history-context {
    border-left:3px solid #bd7549;
    padding-left:14px
  }
  .history-experience {
    padding-left:17px
  }
}

/* V3.0: lokale Firmenlogos und barrierearmes Logoband */
.references-teaser {
  border-top: 1px solid #e3e8ec;
}
.references-page {
  overflow: hidden;
}
.logo-marquee {
  overflow: hidden;
  margin: 32px 0 16px;
  padding: 20px 0;
  background: #f3f5f6;
}
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 95s linear infinite;
}
.logo-marquee:hover .logo-track,
.logo-marquee:focus-within .logo-track {
  animation-play-state: paused;
}
.logo-set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 36px;
  padding-right: 36px;
}
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 180px;
  width: 180px;
  height: 95px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e4e8eb;
  border-radius: 8px;
}
.logo-tile img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes logo-scroll {
  to { transform: translateX(-50%); }
}
.references-disclaimer {
  max-width: 820px;
  color: #647582;
  font-size: 13px;
  line-height: 1.6;
}
.reference-topics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 42px 0;
}
.reference-topics article {
  padding: 24px;
  border: 1px solid #e1e6e9;
  border-radius: 10px;
}
.reference-topics h2 { font-size: 20px; }
@media (max-width: 700px) {
  .reference-topics { grid-template-columns: 1fr; }
  .logo-set { gap: 18px; padding-right: 18px; }
  .logo-tile { flex-basis: 145px; width: 145px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-marquee { overflow-x: auto; }
}

/* V3.2: Menschenorientierte Überzeugung */
.conviction .section-intro { max-width: 780px; }
.conviction > .container > p:not(.section-intro) { max-width: 850px; }
.conviction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 30px 0 24px; }
.conviction-item { border: 1px solid #d9e0e4; border-radius: 12px; padding: 24px; background: #fff; }
.conviction-item h3 { margin-top: 0; }
.conviction-item p { margin-bottom: 0; }
.conviction-principle { margin-top: 16px; }
@media (max-width: 780px) { .conviction-grid { grid-template-columns: 1fr; gap: 14px; } }

/* V3.3: kompakte gemeinsame Haltung */
.conviction-owner { display: flex; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid #d9e0e4; padding-top: 22px; margin-top: 22px; }
.conviction-owner > div { max-width: 780px; }
.conviction-owner h3 { margin-top: 0; }
.conviction-owner p { margin: 0 0 12px; }
.conviction .conviction-grid { margin: 22px 0 16px; }
.conviction .conviction-item { padding: 20px; }
@media (max-width: 700px) { .conviction-owner { align-items: flex-start; gap: 16px; } .conviction-owner .owner-seal { max-width: 76px; height: auto; } }

/* V3.5: Signaturlogo mit Slogan im Kopfbereich */
.header-inner {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand-image {
  display: block;
  flex: 0 1 760px;
  min-width: 0;
  max-width: 100%;
}
.brand-image picture,
.brand-image img {
  display: block;
  width: 100%;
  height: auto;
}
.header-inner > .top-nav {
  width: 100%;
  justify-content: flex-end;
  gap: 12px 25px;
}
@media (max-width: 700px) {
  .brand-image { max-width: 370px; }
  .header-inner > .top-nav { justify-content: flex-start; }
}

/* V3.6: Leistungsdetails, passend zum vorhandenen Layout */
.services-more {
  margin: 30px 0 0;
}
.services-lead {
  max-width: 820px;
  color: #566a7a;
}
.service-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.service-jump a {
  border: 1px solid #dce4e8;
  padding: 10px 15px;
  text-decoration: none;
  color: #a9633b;
  font-size: 13px;
  font-weight: 700;
}
.service-jump a:hover {
  background: #f3f6f7;
}
.service-detail {
  scroll-margin-top: 150px;
}
.service-detail-subtitle {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}
.service-detail-intro {
  max-width: 850px;
  color: #566a7a;
}
.service-detail-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(0, 2fr);
  gap: 55px;
  margin-top: 30px;
}
.service-detail-grid h3 {
  margin-top: 0;
  font-size: 19px;
}
.service-detail-grid p,
.service-detail-grid li {
  color: #566a7a;
}
.service-detail-grid li {
  margin-bottom: 12px;
}
.service-detail-grid ul {
  padding-left: 22px;
  margin-top: 0;
}
.service-status {
  max-width: 870px;
  padding: 15px 20px;
  border-left: 3px solid #bd7549;
  background: #fff;
}
@media (max-width: 700px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* V3.7: Safari-sichere Größenbegrenzung des Signaturlogos im Sticky Header. */
.header-inner > .brand-image {
  display: block;
  flex: 0 1 760px;
  width: 760px;
  max-width: 100%;
  min-width: 0;
}
.brand-image picture {
  display: block;
  width: 100%;
  max-width: 100%;
}
.brand-image picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .header-inner > .brand-image {
    width: 370px;
    max-width: 100%;
  }
}

/* Im einspaltigen Header darf flex-basis nicht zur Elementhöhe werden. */
@media (max-width: 850px) {
  .header-inner > .brand-image {
    flex: 0 0 auto;
  }
}