/* Ruhigere Gestaltungsvariante, ausschliesslich in der Vorschau. */
:root {
  --red: #c40000;
  --red-dark: #9f0000;
  --ink: #2d3033;
  --muted: #5c6064;
  --paper: #f1f2f3;
  --white: #fafafb;
  --line: #d3d5d8;
  --gutter: clamp(24px, 5.3vw, 80px);
}
body { background: var(--paper); }
.wrap { max-width: 1480px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline-color: var(--red);
}
.header { height: 94px; background: var(--white); border-color: #d8dadd; }
.header .brand img { width: 178px; max-height: 74px; }
.header nav { font-size: 13px; gap: 25px; }
.header .button.red { color: var(--red); background: transparent; border-color: #c40000; }
.header .button.red:hover { background: #3a3d42; }
.button { border-radius: 2px; }
.button.red:hover { background: var(--red-dark); }
.button:hover { transform: none; }
.hero { background: #303338; color: #f2f3f5; height: auto; min-height: 560px; max-height: none; }
.hero-content { padding-top: 66px; padding-bottom: 132px; }
.hero h1 { font-size: clamp(48px, 5.4vw, 82px); line-height: 1.09; letter-spacing: -2.7px; max-width: 730px; margin-bottom: 25px; }
.hero h1 span { color: #f2f3f5; }
.hero-copy { font-size: 16px; color: #d9dde2; line-height: 1.75; margin-bottom: 28px; }
.hero-image { left: 37%; }
.hero-image img { filter: grayscale(1) brightness(.8) contrast(.88); }
.hero-image:after { background: linear-gradient(90deg, #303338 0%, rgba(48,51,56,.72) 16%, rgba(48,51,56,.12) 63%), linear-gradient(0deg, rgba(35,38,43,.68), transparent 65%); }
.hero .eyebrow { color: #cbd1d7; letter-spacing: 1.6px; margin-bottom: 27px; }
.hero .text-link.light { color: #e3e6eb; }
.hero-bottom { height: 62px; color: #cbd1d7; }
.hero-bottom:before { border-color: #ffffff26; }
.photo-label { bottom: 100px; color: #e1e5e9; }
.photo-label small { color: #c7cdd4; }
.capabilities { background: #e5e7e9; padding-block: 25px; }
.capabilities strong { font-size: 27px; letter-spacing: -.7px; }
.capabilities .micro { font-size: 10px; }
.section { padding-block: 76px; }
h2 { font-size: clamp(32px, 3.1vw, 46px); line-height: 1.14; letter-spacing: -1.35px; }
.section-heading { margin-bottom: 38px; }
.section-heading>p { font-size: 15px; }
.eyebrow.dark { color: #565d64; }
.service-layout { gap: 54px; }
.service-tab { font-size: clamp(22px, 2vw, 28px); padding: 23px 16px; letter-spacing: -.45px; }
.service-tab.active, .service-tab.active:hover { color: var(--red); background: #e4e7eb; border-color: var(--line); box-shadow: inset 3px 0 var(--red); }
.service-tab.active .service-number { color: #666e76; }
.service-tab:not(.active):hover { background: #e4e7eb; }
.service-number { font-size: 11px; }
.service-note { padding-left: 16px; }
.service-description h3 { font-size: 23px; }
.service-photo { height: 350px; }
.about { background: #34373c; color: #f2f3f5; }
.about-copy { padding-top: 59px; padding-bottom: 59px; }
.about-copy h2 { font-size: clamp(31px, 2.9vw, 43px); letter-spacing: -1.2px; line-height: 1.17; }
.about-copy>p:not(.eyebrow) { color: #d5dbe1; }
.about-photo { min-height: 520px; }
.expertise { background: #e1e4e7; }
.expertise-prose { max-width: 860px; }
.expertise-prose h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.15; letter-spacing: -1.2px; margin-bottom: 24px; }
.expertise-lead { font-size: 19px; line-height: 1.8; margin-bottom: 22px; }
.expertise-copy p, .cad-copy p { font-size: 16px; line-height: 1.85; }
.cad-service { background: var(--white); }
.cad-layout { gap: 55px; }
.cad-service h2 { font-size: clamp(31px, 2.9vw, 42px); letter-spacing: -1.2px; line-height: 1.17; }
.cad-copy { border-left-width: 2px; }
.cad-copy .cad-intro { font-size: 21px; }
.machine-table { background: var(--white); border-top-width: 2px; }
.machine-table summary strong { font-size: 19px; letter-spacing: -.3px; }
.machine-table summary { padding-block: 22px; }
.work { background: #e4e7eb; }
.work figure img { filter: saturate(.65) contrast(.93); }
.work figcaption { font-size: 15px; }
.process { padding-top: 72px; padding-bottom: 76px; }
.process h2 { font-size: clamp(31px, 2.9vw, 42px); line-height: 1.17; }
.process li { background: var(--white); }
.process h3 { font-size: 18px; }
.contact { background: #34373b; color: var(--ink); border-top: 2px solid #555b63; }
.contact-inner { padding-block: 67px; gap: 65px; }
.contact .eyebrow { color: #bec6cf; }
.contact .square { background: var(--red); }
.contact h2 { font-size: clamp(34px, 3.7vw, 53px); line-height: 1.14; letter-spacing: -1.6px; }
.contact h2 span { color: var(--ink); }
.contact p:not(.eyebrow) { color: #d1d6dd; }
.contact .button.white { background: var(--red); color: #fafafb; }
.contact .button.white:hover { background: var(--red-dark); }
.contact-details { border-color: #5b636d; padding-top: 35px; }
.contact-details .micro { color: #bec6cf; }
.contact-phone { font-size: clamp(23px, 2vw, 29px); letter-spacing: -.6px; }
.contact-email { border-color: #78818a; }
.contact .text-link { color: var(--red); border-color: #78818a; font-size: 13px; }
.footer { background: var(--white); border-top: 1px solid #d3d7dd; }
.legal h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -1.4px; }
.legal h2 { font-size: 27px; }
@media(min-width:1600px) {
  .hero { min-height: 610px; }
  .hero-content { padding-top: 82px; }
}
@media(max-width:1100px) {
  .header nav { gap: 16px; font-size: 12px; }
  .hero h1 { font-size: clamp(48px, 6.5vw, 68px); }
  .about-copy { padding-left: 38px; }
  .service-layout { gap: 35px; }
}
@media(max-width:880px) {
  html { scroll-padding-top: 85px; }
  .header { height: 80px; }
  .header .brand img { width: 150px; max-height: 62px; }
  .menu-toggle, .header nav { background: var(--white); }
  .header nav { top: 80px; font-size: 14px; }
  .header nav.open { gap: 6px; }
  .hero { min-height: 580px; }
  .hero-content { padding-top: 55px; padding-bottom: 120px; }
  .hero h1 { font-size: clamp(43px, 9vw, 65px); line-height: 1.12; letter-spacing: -1.7px; margin-bottom: 24px; }
  .hero-image { left: 0; opacity: .62; }
  .hero-image:after { background: linear-gradient(90deg, rgba(48,51,56,.88), rgba(48,51,56,.48)), linear-gradient(0deg, #303338, transparent 80%); }
  .hero-copy { font-size: 15px; }
  .hero .eyebrow { margin-bottom: 29px; font-size: 9px; letter-spacing: 1.1px; }
  .hero-actions .button { font-size: 12px; }
  .hero-actions .text-link { font-size: 13px; }
  .section { padding-block: 55px; }
  h2, .expertise-prose h2, .cad-service h2, .about-copy h2, .process h2 { font-size: 31px; letter-spacing: -.9px; line-height: 1.17; }
  .section-heading { margin-bottom: 29px; }
  .capabilities strong { font-size: 24px; }
  .capabilities .micro { font-size: 9px; }
  .service-tab { font-size: 22px; padding: 20px 13px; }
  .service-description h3 { font-size: 22px; }
  .service-photo { height: 290px; }
  .about-photo { min-height: 300px; }
  .about-copy { padding: 40px var(--gutter); }
  .expertise-lead { font-size: 18px; line-height: 1.8; }
  .expertise-copy p, .cad-copy p { font-size: 15px; }
  .cad-layout { gap: 26px; }
  .cad-copy .cad-intro { font-size: 20px; }
  .machine-table summary strong { font-size: 16px; }
  .machine-table summary>span:nth-child(2) { font-size: 12px; }
  .process { padding-top: 55px; padding-bottom: 55px; }
  .process h3 { font-size: 17px; }
  .contact-inner { padding-block: 52px; gap: 32px; }
  .contact h2 { font-size: 36px; letter-spacing: -1.05px; }
  .contact-details { padding-top: 28px; padding-left: 0; }
  .contact-phone { font-size: 25px; }
}

/* Neutrales Grau statt Beige/Salbei. Cyan-Komplement nur als Petrol-Detail. */
:root { --accent: #28767b; --accent-light: #83b9bd; }
.header { background: #e7e9eb; border-bottom: 1px solid #cbd0d5; }
.header nav { color: #30353a; }
.header nav>a[aria-current] { color: var(--red); }
.header nav>a:not(.button):after { background: #c40000; }
.header .button.red { background: #c40000; border-color: #c40000; color: #fff; }
.header .button.red:hover { background: #9f0000; border-color: #9f0000; }
.hero-image img { filter: grayscale(1) brightness(.87) contrast(.96); }
.contact, .contact h2, .contact h2 span { color: #f2f3f5; }
.contact .text-link { color: #e5e9ee; }
.footer { background: #e6e8eb; }
.cad-copy { border-left-color: var(--accent); }
.cad-service .eyebrow { color: var(--accent); }
.cad-service .square { background: var(--accent); }
.photo-label .crosshair { color: var(--accent-light); }
.menu-toggle { border-color: #bdc3c9; }
.menu-toggle span { background: #30353a; }
.header a:focus-visible, .header button:focus-visible { outline-color: var(--accent); }
@media(max-width:880px) {
 .header nav, .menu-toggle { background: #e7e9eb; }
 .header nav.open { border-bottom: 1px solid #cbd0d5; }
}

/* Komplementaerer Mouse-over: gezielt und ohne zusaetzliche bunte Flaechen. */
.button.red:hover, .header .button.red:hover, .contact .button.white:hover {
 background: var(--accent); border-color: var(--accent); color: #fff;
}
.header nav>a:not(.button):hover { color: var(--accent); }
.header nav>a:not(.button):hover:after { background: var(--accent); }
.text-link:hover { color: var(--accent); border-color: var(--accent); }
.hero .text-link.light:hover, .about .text-link.light:hover, .contact .text-link:hover {
 color: var(--accent-light); border-color: var(--accent-light);
}
.circle-link:hover { background: var(--accent); border-color: var(--accent); }
.service-tab:not(.active):hover { background: #dce6e8; color: var(--accent); }
.service-tab.active:hover { color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.machine-detail a:hover, .machine-note a:hover, .service-note a:hover {
 color: var(--accent); border-color: var(--accent);
}
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
 outline-color: var(--accent);
}
.header a:focus-visible, .header button:focus-visible { outline-color: var(--accent); }

/* Aufbereitete Originalmotive: Raum fuer Werkstuecke und echte Werkstattdetails. */
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 28px; }
.work figure img { height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #343639; filter: none; }
.work .work-original img { filter: brightness(1.08); }
.work .work-freeform img { filter: saturate(.7) brightness(1.08); }
.about-photo img { filter: brightness(.87); object-position: 32% center; }
.service-photo img { object-position: center; }
@media(max-width:880px) {
 .work-grid { grid-template-columns: 1fr; gap: 32px; }
 .work figure img { height: auto; }
 .about-photo img { object-position: 34% center; }
}

/* Alle Leistungstexte stehen im HTML; Tabs steuern nur die Anzeige. */
.service-panels { min-width: 0; display: grid; gap: 38px; align-content: start; }
.service-panel[hidden] { display: none; }