:root{--orange:#e58a2d;--orange-dark:#c96e18;--ink:#252525;--muted:#686868;--line:#dedede;--bg:#f7eee5;--panel:#fff;--nav:#464646;--max:1020px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:linear-gradient(#ed9948 0,#f5c69d 320px,#fff 760px);line-height:1.55}a{color:#a95816}img{max-width:100%;height:auto}.site{max-width:var(--max);margin:0 auto}.header{margin-top:0;background:linear-gradient(#eee,#fff);min-height:88px;display:flex;align-items:center;justify-content:flex-end;padding:10px 24px;border-bottom:1px solid #bbb}.logo{width:230px;max-height:82px;object-fit:contain}.nav{background:linear-gradient(#555,#353535);display:flex;flex-wrap:wrap;padding:0 8px}.nav a{color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:12px 14px;border-right:1px solid rgba(255,255,255,.08)}.nav a:hover,.nav a[aria-current=page]{background:linear-gradient(#ee9b46,#c96e18)}main{background:#fff;padding:22px 26px 30px;box-shadow:0 4px 15px rgba(0,0,0,.24)}h1{font-size:29px;margin:0 0 10px}h2{font-size:22px;margin:28px 0 8px}h3{font-size:17px;margin:20px 0 5px;color:#744017}.lead{color:#4c4c4c;margin-top:0}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:600px;margin:22px auto}.gallery img,.ref-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid #ccc;padding:3px;background:#fff}.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.service{border:1px solid var(--line);border-radius:6px;padding:16px;background:#fcfcfc}.service ul{padding-left:20px;margin-bottom:0}.contact-card{border-left:5px solid var(--orange);padding:16px 18px;background:#faf6f2;margin:18px 0}.button{display:inline-block;padding:10px 16px;background:var(--orange-dark);color:#fff;text-decoration:none;font-weight:bold;border-radius:4px}.footer{margin:22px auto 0;background:rgba(255,255,255,.93);padding:20px 22px 26px;border-radius:7px 7px 0 0;color:#777}.footer h2{color:#929292;margin:0 0 15px;border-bottom:1px solid #ddd;padding-bottom:8px;font-size:21px}.footer-grid{display:grid;grid-template-columns:1.15fr 1.15fr 1.15fr .9fr 1.2fr;gap:20px;font-size:12px}.footer strong{display:block;color:#777;margin-bottom:8px}.footer a{display:block;color:#777;text-decoration:none;margin:5px 0}.notice{font-size:13px;color:#666}.legal p{margin:.45em 0}@media(max-width:760px){body{background:linear-gradient(#ed9948 0,#fff 480px)}.site{width:100%}.header{min-height:70px}.logo{width:185px}.nav{padding:0}.nav a{flex:1 1 50%;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}main{padding:20px 17px;box-shadow:none}.gallery{grid-template-columns:repeat(2,1fr)}.ref-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr}.footer{margin-top:0;border-radius:0}.footer-grid{grid-template-columns:1fr 1fr}}

/* GIB correction, 2026-09-16.
   Basis: original_header_grauer_verlauf. No generated artwork.
   Layout and all main content are retained from that version. */

/* Original orange-to-white strip, tiled across the page, NEVER down the page. */
html { background-color:#fff; }
body {
  min-height:100vh;
  background:#fff url('../img/body-bg-original.png') left top repeat-x;
}

/* Retain the agreed 90 px header, original map/compass and grey gradient. */
.header {
  position:relative;
  display:block;
  height:90px;
  min-height:90px;
  padding:0;
  overflow:visible;
  background:#f9f8f8 url('../img/header-gradient-original.png') center top repeat-x;
  border-bottom:0;
}
.header-compass {
  position:absolute;
  left:0;
  top:0;
  width:150px;
  height:150px;
  max-width:none;
  z-index:1;
  pointer-events:none;
  /* The old site showed this 150 px image inside its 90 px header. */
  clip-path:inset(0 0 60px 0);
}
.logo-wrap {
  position:absolute;
  right:15px;
  top:19px;
  width:171px;
  height:104px;
  display:block;
  overflow:visible;
  line-height:0;
  z-index:4;
  pointer-events:none;
}
.logo-main {
  position:absolute;
  top:0;
  right:0;
  width:171px;
  height:auto;
  max-width:none;
  display:block;
  z-index:2;
  pointer-events:auto;
  filter:drop-shadow(-2px 3px 2px rgba(0,0,0,.55));
}
/* Use the EXISTING reflection in the old logo.png, not a newly drawn one.
   Its upper 68 px (old lettering) are clipped out. The lower 32 px already
   contain the original compressed geometry, colour and fade. The visible
   reflection starts at y = 19 + 4 + 68 = 91 px, inside the navigation band. */
.logo-reflection {
  position:absolute;
  top:4px;
  right:0;
  width:171px;
  height:100px;
  max-width:none;
  display:block;
  clip-path:inset(68px 0 0 0);
  opacity:1;
  transform:none;
  filter:none;
  z-index:1;
  pointer-events:none;
}
.nav {
  position:relative;
  z-index:2;
  background:#666 url('../img/nav-gradient-original.png') left top / auto 100% repeat-x;
}

/* Keep the content dimensions; restore the narrow orange gap and panel tint. */
main {
  margin-top:10px;
  background:#fff url('../img/content-bg-original.png') left top repeat-x;
}

/* Contact/imprint links use the same resting colour as their surrounding text. */
.contact-card a:not(.button), .legal a {
  color:inherit;
  text-decoration:none;
}
.contact-card a:not(.button):hover, .legal a:hover {
  color:#ea7b0c;
  text-decoration:underline;
}
.contact-card a:focus-visible, .legal a:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
  text-decoration:underline;
}

/* Original small monochrome footer logo, including its original reflection.
   Keep the native 25 x 22 px dimensions instead of enlarging the file. */
.footer h2 { border-bottom-style:dotted; }
.footer-brand { font-size:9px; color:#999; }
.footer-brand-head {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:22px;
  margin:0 0 7px;
  white-space:nowrap;
}
.footer-brand-head img {
  display:block;
  flex:0 0 25px;
  width:25px;
  height:22px;
  max-width:none;
}
.footer-brand-head span { color:#999; font-size:9px; font-weight:400; }
.footer-brand > a { color:#999; }
.footer-brand > span { display:block; }

@media(max-width:760px) {
  .header {
    height:76px;
    min-height:76px;
    background-size:auto 125px;
  }
  .header-compass { width:125px; height:125px; clip-path:inset(0 0 49px 0); }
  .logo-wrap { right:10px; top:15px; width:145px; height:89px; }
  .logo-main { width:145px; }
  .logo-reflection {
    top:3.4px;
    width:145px;
    height:84.7953px;
    clip-path:inset(57.6608px 0 0 0);
  }
  /* Give the reflection its own strip above the wrapped menu links. */
  .nav { padding-top:29px; }
  .footer-brand-head { white-space:normal; }
}

/* Intermediate widths: keep menu links clear of the original reflection. */
@media(min-width:761px) and (max-width:850px) {
  .nav { padding-top:34px; }
}


/* Startseite: linke Menüleiste und ausgewogene Darstellung der beiden Arbeitsfelder. */
.home-layout{
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.side-nav{
  margin:-2px 0 0 -10px;
  border:1px solid #e2e2e2;
  background:#f5f5f5;
}
.side-nav a{
  position:relative;
  display:block;
  padding:11px 14px 11px 28px;
  border-bottom:1px solid #fff;
  color:#4f4f4f;
  text-decoration:none;
  background:linear-gradient(#fafafa,#eeeeee);
  font-size:14px;
}
.side-nav a:last-child{border-bottom:0}
.side-nav a:hover{color:#c96e18;background:linear-gradient(#fff,#f3f3f3)}
.side-nav a.active{color:#d96e0b;font-weight:700;background:linear-gradient(#fff,#f1f1f1)}
.side-arrow{
  position:absolute;
  left:9px;
  top:7px;
  color:#ef8c24;
  font-size:24px;
  line-height:1;
}
.home-content h1{margin-top:0}
.home-content > p:not(.lead):not(.home-more){max-width:720px}
.home-focus-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:20px 0 8px;
}
.home-focus{
  border:1px solid var(--line);
  border-radius:6px;
  padding:15px 16px 13px;
  background:#fcfcfc;
}
.home-focus h2{
  margin:0 0 7px;
  font-size:18px;
  color:#744017;
}
.home-focus p{margin:0}
.home-more{margin:14px 0 8px}
.home-layout .gallery{max-width:620px;margin:22px auto 0}

@media(max-width:760px){
  .home-layout{grid-template-columns:1fr;gap:16px}
  .side-nav{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-nav a{border-bottom:1px solid #fff;border-right:1px solid #fff;padding-left:26px;text-align:left}
  .home-focus-grid{grid-template-columns:1fr}
}
@media(max-width:430px){
  .side-nav{grid-template-columns:1fr}
}

/* Startseite v4: Zusatzkaestchen und Button entfernt; Bilder nutzen die volle Inhaltsbreite. */
.home-layout .gallery{
  width:100%;
  max-width:none;
  margin:24px 0 0;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.home-layout .gallery img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
@media(max-width:760px){.home-layout .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:430px){.home-layout .gallery{grid-template-columns:1fr;}}

/* Layout stabilization v5: prevent horizontal page jump when the browser
   scrollbar appears/disappears on pages of different lengths. */
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.site {
  width:100%;
  max-width:var(--max);
  margin-left:auto;
  margin-right:auto;
}

/* Keep the two lower lines in the right footer column exactly the same
   type size and line height as the links/text in the other footer columns. */
.footer-brand > a,
.footer-brand > span {
  font-size:12px;
  line-height:1.55;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:400;
  color:#777;
  margin:5px 0;
}

/* Einheitliche Schrift und gemeinsame Zeilen im Domainblock. */
.footer .footer-brand { font: 12px/1.55 Arial,Helvetica,sans-serif; color: #777; }
.footer .footer-brand-head { position: relative; display: block; min-height: 0; margin: 0 0 8px; white-space: normal; font: inherit; }
.footer .footer-brand-head span { display: block; margin-left: 43.3333px; color: #777; font: inherit; font-weight: 700; }
.footer .footer-brand-head img { position: absolute; left: 0; top: -8px; width: 33.3333px; height: 29.3333px; max-width: none; }
.footer .footer-brand > a,
.footer .footer-brand > span { display: block; margin: 5px 0; color: #777; font: inherit; }

/* Fuenf gleich breite Spalten mit gleichmaessigen Zwischenraeumen. */
@media (min-width: 1061px) {
  .footer .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 20px; }
  .footer .footer-grid > div { min-width: 0; }
  .footer .footer-grid > div > strong,
  .footer .footer-brand-head { min-height: 37.2px; }
}

@media (min-width: 1061px) { .footer .footer-grid a { white-space: nowrap; } }
@media (min-width: 761px) and (max-width: 1060px) { .footer .footer-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }

/* Rechte Ueberschrift einzeilig; verbleibenden Platz gleichmaessig verteilen. */
@media (min-width: 1061px) {
  .footer .footer-grid { grid-template-columns: repeat(5,max-content); justify-content: space-between; column-gap: 12px; }
  .footer .footer-grid > div > strong,
  .footer .footer-brand-head { min-height: 0; }
  .footer .footer-brand-head span { white-space: nowrap; }
}