/* Variante 2 · Feinschliff, ergänzend zu Basislayout und Bildlook. */
:root {
  --acid: #c9f65a;
  --ink: #f1f3ed;
  --surface: #111614;
  --panel: #19201b;
  --muted: #b0b9b3;
  --line: #2e3832;
  --photo-room-filter: saturate(.57) contrast(1.07) brightness(.92);
  --photo-room-hover-filter: saturate(.72) contrast(1.06) brightness(.98);
  --photo-portrait-filter: saturate(.88) contrast(1.025) brightness(1);
}

::selection { background: var(--acid); color: var(--bg); }
body { -webkit-font-smoothing: antialiased; }
main:focus { outline: none; }
h2, h3 { text-wrap: balance; }
p, .body-copy { text-wrap: pretty; }
.two-col > *, .contact-grid > *, .services-pair > *, .team-grid > * { min-width: 0; }
.skip-link { position: fixed; left: 20px; top: 12px; z-index: 100; padding: 14px 22px; background: var(--acid); color: var(--bg); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

/* Orientierung und präzise Interaktionen. */
.site-header { background: #0b0d0ee8; transition: background .25s, box-shadow .25s; }
.site-header.is-scrolled { background: #0b0d0ef5; box-shadow: 0 10px 30px -20px #000c; }
.site-header nav a { color: #c8d0cb; }
.site-header nav a[aria-current]::after { transform: scaleX(1); }
.header-support { transition: background .2s, border-color .2s; }
.header-support > span:last-child, .button > span:last-child, .text-link > span,
.service-strip .small-arrow, .vacancy-list > a > span { display: inline-block; transition: transform .25s; }
.header-support:hover > span:last-child, .button:hover > span:last-child,
.text-link:hover > span, .service-strip > a:hover .small-arrow,
.vacancy-list > a:hover > span { transform: translate(3px, -3px); }

/* Die große Titelkomposition bleibt das Zentrum. */
.hero-inner { padding-top: 36px; padding-bottom: 56px; }
.hero-location { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.hero-location > span:first-child { color: #56645a; }
.hero-location .hero-coordinate { margin-left: 12px; }
.hero-image > img { filter: saturate(.52) contrast(1.08) brightness(.9); }
.hero-image::before { opacity: .24; }
.hero-image::after { background: linear-gradient(90deg, #0b0d0e4d, transparent 65%), linear-gradient(0deg, #050b10a6, transparent 65%); }
.image-note { font-size: 10px; letter-spacing: .035em; }
.hero-statement { line-height: 1.24; max-width: 390px; }
.hero-subline { color: #b4bdb6; }
.hero-actions .button { min-width: 206px; }
.hero-grid { opacity: .7; }
.service-strip > a { min-height: 88px; }
.service-strip > a:hover { background: #cdff4f05; }
.service-icon { flex: 0 0 28px; display: grid; place-items: center; }
.service-icon svg { display: block; width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.3; }
.service-strip > a > span:nth-child(2) { line-height: 1.5; }

/* Gemeinsames Raster für Abschnittsmarkierungen und Inhalte. */
.section-kicker { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .09em; line-height: 1.6; text-transform: uppercase; }
.section-kicker > span, .section-number { color: var(--acid); font-variant-numeric: tabular-nums; }
.section-kicker > span::after, .section-number::after { content: "/"; display: inline-block; margin-left: 15px; color: #56645a; }
.section-number { margin-right: 13px; }
.intro-copy { padding-top: 45px; }
.intro h2 { max-width: 510px; }
.intro-copy > .large-copy { line-height: 1.6; }
.promises > article { position: relative; }
.promises > article::before { content: ""; position: absolute; top: -1px; left: 0; width: 36px; height: 1px; background: var(--acid); }
.promises h3 { line-height: 1.18; }
.promises p { max-width: 31ch; }
.service-feature h2 { max-width: 11ch; line-height: 1.08; }
.service-feature .body-copy { max-width: 58ch; }
.service-feature .button { min-height: 66px; }
.text-grid article { transition: background .25s; }
.text-grid > article { min-width: 0; }
.values-grid article:hover, .jobs-task-grid article:hover { background: #18201b; }
.values-grid article:first-child { background: linear-gradient(145deg, #202a21, var(--panel)); }
.values-grid article:first-child::before { width: 44px; }
.values-grid .body-copy { max-width: 42ch; }
.customers { padding-block: 88px; }
.customers p { max-width: 46ch; }
.big-numeral { font-variant-numeric: tabular-nums; }
.maintenance-grid h3 { line-height: 1.2; }
.sla { border-left: 2px solid var(--acid); }
.about-intro > p { line-height: 1.65; }
.about-feature .body-copy { line-height: 1.85; }
.team-grid .photo-surface { border-bottom: 2px solid #455440; }
.team-grid article:hover .photo-surface, .team-grid article:focus-within .photo-surface { border-bottom-color: var(--acid); }
.team-grid h3 { line-height: 1.2; }
.team-grid .role { min-height: 3.4em; color: #b6c0b8; }
.person-email { line-height: 1.6; }
.person-email a { text-underline-offset: 4px; }
.career-teaser p { line-height: 1.85; }
.contact .section-kicker { color: #4d5b43; }
.contact .section-kicker > span { color: #314a18; }
.contact .section-kicker > span::after { color: #859078; }
.contact-details a { text-underline-offset: 6px; }
.contact-form input:not([type=checkbox]), .contact-form textarea { transition: border-color .2s, box-shadow .2s; padding-inline: 2px; }
.contact-form input:not([type=checkbox]):focus, .contact-form textarea:focus { border-bottom-color: #253a13; box-shadow: 0 1px 0 #253a13; }
.contact-form label.check { align-items: center; min-height: 44px; }
.check input { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; }
.form-required { margin-bottom: 16px; font-family: var(--mono); font-size: 10px; color: #4d5747; }
.contact-form .form-note { font-size: 11px; max-width: 62ch; }
footer a { text-underline-offset: 5px; }
footer > div a { padding-block: 12px; }
.vacancy-list > a { padding-inline: 18px; }
.vacancy-list > a:hover { background: #cdff4f05; }
.vacancy-list h3 { line-height: 1.25; }
.gallery-item:focus-visible { outline-offset: 5px; }
.legal .body-copy { line-height: 1.85; }
.support-page h1 { text-wrap: balance; }
.support-intro { margin-top: 28px; max-width: 40ch; font-size: clamp(20px, 2vw, 28px); line-height: 1.5; color: var(--muted); }

/* Zweite Verfeinerung: ruhigerer Rhythmus, klarere Konturen. */
h2 { letter-spacing: -.05em; }
.eyebrow { letter-spacing: .11em; }
.site-header { border-bottom-color: #ffffff12; }
.site-header nav a { letter-spacing: .025em; }
.brand small { color: #b0b9b3; }
.button { padding: 18px 22px; font-weight: 500; }
.button:hover { transform: none; }
.button > span:last-child { font-size: 23px; }
.header-support:hover > span:last-child, .button:hover > span:last-child,
.text-link:hover > span { transform: translate(2px, -2px); }
.hero-power { letter-spacing: -.07em; }
.hero-topline .eyebrow, .hero-location { color: #b2bcb4; }
.hero-statement { font-weight: 500; letter-spacing: -.035em; }
.hero-actions { align-items: center; }
.hero-image.photo-surface { box-shadow: none; }
.image-corner { width: 13px; height: 13px; }
.hero-image .image-corner.tl { border-width: 1px; left: -4px; top: -4px; }
.hero-image .image-corner.br { border-width: 1px; right: -4px; bottom: -4px; }
.hero-location .hero-coordinate { font-size: 20px; }
.service-strip > a { font-weight: 500; }
.service-strip .small-arrow { color: #9daa9e; }
.section-kicker { font-size: 11px; letter-spacing: .1em; }
.intro-copy > .body-copy + .body-copy .accent-text { color: #c4cec3; }
.promises h3 { font-weight: 500; }
.promises p { line-height: 1.8; }
.section-heading { margin-bottom: 36px; }
.section-heading .line { background: linear-gradient(90deg, var(--line), transparent); }
.service-feature .eyebrow { font-size: 10px; }
.service-feature .button { min-height: 60px; border-color: #485644; }
.service-feature .strong-copy { padding-top: 30px; }
.values-grid article:first-child { background: var(--panel); }
.values-grid article:first-child::before { height: 1px; }
.values-grid h3 { font-weight: 500; }
.customers p { border-left: 1px solid #13200c35; padding-left: 38px; }
.sla { background: #131b15; border-left-width: 1px; }
.sla h3 { letter-spacing: -.035em; }
.contact-heading { border-bottom-color: #aeb8a455; }
.contact-form input:not([type=checkbox]), .contact-form textarea { border-bottom-color: #89957e99; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #6a765f; }
.contact-form label.check { font-size: 12px; }
.contact-form .button { min-height: 60px; }
.back-top { border-color: #45513f; }

@media (min-width: 821px) {
  .section { padding-block: clamp(88px, 8vw, 116px); }
  .intro { padding-bottom: 72px; }
  .intro-copy { padding-top: 47px; }
  .career-teaser { padding-block: 116px; }
  .hero-inner { padding-bottom: 62px; }
  .hero-actions .text-link { font-size: 12px; }
}
@media (min-width: 1200px) {
  .about-feature > .photo-surface { height: 480px; }
}
@media (max-width: 680px) {
  .customers p { border-left: 0; padding-left: 0; }
  .section-kicker { font-size: 10px; }
  .contact-form .button { min-height: 56px; }
}

/* Galerie mit Tastaturbedienung und großen Touch-Schaltflächen. */
body.image-view-open { overflow: hidden; }
#image-dialog { width: fit-content; max-width: min(94vw, 1280px); padding: 48px 24px 20px; overflow: auto; }
#image-dialog .lightbox-photo { margin-inline: auto; }
#image-dialog img { max-width: 85vw; max-height: 70vh; }
.dialog-close { top: 2px; right: 8px; width: 44px; height: 44px; line-height: 1; }
.gallery-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 18px; }
.gallery-toolbar .image-caption { margin: 0; line-height: 1.6; }
.gallery-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gallery-position { font-family: var(--mono); color: var(--muted); font-size: 10px; margin-right: 10px; font-variant-numeric: tabular-nums; }
.gallery-controls button { width: 44px; height: 44px; border: 1px solid #53604e; background: transparent; color: var(--ink); font-size: 22px; }
.gallery-controls button:hover { background: var(--acid); color: var(--bg); border-color: var(--acid); }

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .hero-prefix, .hero-power, .hero-bottom { animation: hero-arrive .7s both; }
  .hero-power { animation-delay: .07s; }
  .hero-bottom { animation-delay: .14s; }
  @keyframes hero-arrive { from { opacity: .4; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 1180px) {
  .service-strip > a { font-size: 12px; }
  .hero-actions .button { min-width: 185px; }
  .intro-copy { padding-top: 44px; }
}
@media (max-width: 940px) {
  .hero-inner { padding-bottom: 44px; }
  .intro-copy { padding-top: 42px; }
  .service-strip > a { font-size: 13px; }
  .team-grid .role { min-height: 0; }
}
@media (max-width: 820px) {
  .site-header { height: 76px; padding-inline: 24px; gap: 14px; }
  .site-header .brand { margin-right: auto; }
  .site-header .brand > span { display: block; font-size: 13px; }
  .site-header .brand img { width: 34px; height: 34px; }
  .site-header .brand small { font-size: 9px; }
  .header-support { min-height: 44px; padding: 10px 12px; }
  .menu-toggle { display: block; width: 44px; height: 44px; position: relative; flex-shrink: 0; }
  .menu-toggle > span { position: absolute; left: 11px; width: 22px; height: 1.5px; margin: 0; transition: transform .2s; }
  .menu-toggle > span:first-child { top: 17px; }
  .menu-toggle > span:last-child { top: 25px; }
  .menu-toggle[aria-expanded=true] > span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] > span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header nav { display: none; position: absolute; top: 76px; left: 0; right: 0; margin: 0; padding: 18px 24px 26px; background: #121617; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; box-shadow: 0 25px 35px #0005; max-height: calc(100dvh - 76px); overflow-y: auto; }
  .site-header nav.open { display: flex; }
  .site-header nav a { font-family: 'Space Grotesk', Arial, sans-serif; font-size: 28px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .site-header nav a::after { display: none; }
  html { scroll-padding-top: 96px; }
}
@media (max-width: 680px) {
  main h1, main h2, main h3 { hyphens: auto; overflow-wrap: anywhere; }
  .site-header { padding-inline: 20px; gap: 10px; }
  .site-header .brand { gap: 9px; }
  .site-header .brand > span { font-size: 11px; }
  .site-header .brand small { font-size: 8px; }
  .header-support { font-size: 10px; padding-inline: 10px; }
  .hero-inner { padding-top: 24px; padding-bottom: 34px; }
  .hero-topline { margin-bottom: 26px; }
  .hero-location { gap: 9px; font-size: 8px; letter-spacing: .015em; }
  .hero-location .hero-coordinate { display: none; }
  .hero-image::after { background: linear-gradient(0deg, #050b1073, transparent 70%), linear-gradient(180deg, #0b0d0e80, transparent 50%); }
  .hero-image > img { object-position: 50% 55%; }
  .hero-statement { max-width: 350px; font-size: 29px; }
  .hero-subline { font-size: 14px; max-width: 330px; }
  .hero-actions { gap: 24px; }
  .hero-actions .button { min-width: 0; min-height: 56px; gap: 22px; }
  .hero-actions .text-link { min-height: 48px; }
  .service-strip > a { min-height: 78px; font-size: 11px; gap: 10px; }
  .service-icon { flex-basis: 24px; }
  .service-icon svg { width: 24px; height: 24px; }
  .service-strip .small-arrow { display: none; }
  .section-kicker { margin-bottom: 24px; font-size: 9px; gap: 14px; }
  .section-kicker > span::after, .section-number::after { margin-left: 12px; }
  .intro-copy { padding-top: 0; }
  .intro h2 { font-size: clamp(44px, 12.8vw, 64px); }
  .intro-copy > .large-copy { font-size: 21px; }
  .promises { grid-template-columns: 1fr; }
  .promises > article, .promises > article:first-child, .promises > article:last-child, .promises > article:nth-child(3) { padding: 24px 0; border-right: 0; display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; }
  .promises > article + article { border-top: 1px solid var(--line); }
  .promises > article:nth-child(-n+2) { border-bottom: 0; }
  .promises > article::before { display: none; }
  .promises .number { grid-row: span 2; margin: 4px 0 0; }
  .promises h3 { font-size: 24px; max-width: none; margin-bottom: 12px; }
  .promises p { font-size: 14px; max-width: 38ch; }
  .service-feature h2 { font-size: clamp(40px, 11vw, 52px); }
  .values-grid { grid-template-columns: 1fr; }
  .values-grid article, .values-grid article:first-child { grid-column: auto; padding: 28px; }
  .values-grid h3 { font-size: 26px; overflow-wrap: normal; }
  .values-grid .body-copy { font-size: 14px; }
  .values-grid article:first-child h3 { font-size: 38px; }
  .values-grid article:first-child .body-copy { font-size: 16px; }
  .customers { padding-block: 64px; }
  .big-numeral { font-size: clamp(90px, 28vw, 130px); }
  .text-grid h3 { hyphens: auto; overflow-wrap: anywhere; }
  .maintenance-grid { grid-template-columns: 1fr; gap: 28px; }
  .maintenance-grid h3 { font-size: 27px; margin-bottom: 14px; }
  .maintenance-grid .body-copy { font-size: 14px; max-width: 42ch; }
  .sla { padding: 28px 24px; }
  .team-grid { gap: 36px 18px; }
  .team-grid h3 { font-size: clamp(21px, 5.8vw, 28px); }
  .team-grid .role { font-size: 10px; }
  .person-email { font-size: 11px; }
  .contact-grid { gap: 48px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-form > h3 { font-size: 32px; }
  .contact-form .form-note { font-size: 11px; }
  footer > span, footer > div { font-size: 10px; }
  footer > div { gap: 20px; }
  .jobs-hero h1 { font-size: clamp(58px, 15.5vw, 80px); }
  .vacancy-list > a { padding-inline: 0; }
  .gallery-toolbar { gap: 16px; align-items: flex-start; flex-direction: column; }
  .gallery-controls { align-self: flex-end; }
  #image-dialog { padding: 48px 14px 16px; }
  #image-dialog img { max-width: calc(94vw - 30px); max-height: 62vh; }
  .legal .body-copy { font-size: 16px; }
}
@media (max-width: 480px) {
  .contact-details { grid-template-columns: 1fr; }
  .contact-details article:last-child { grid-column: auto; }
  .contact-details a[href^="tel:"] { white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-header .brand > span { display: none; }
  .hero-location { font-size: 7px; }
  .hero-topline .eyebrow { font-size: 8px; }
  .hero-actions { gap: 18px; }
  .hero-actions .button { padding-inline: 14px; gap: 10px; font-size: 11px; white-space: nowrap; }
  .hero-actions .text-link { font-size: 11px; gap: 9px; }
  .service-strip > a { font-size: 10px; gap: 8px; }
  .service-icon { flex-basis: 20px; }
  .service-icon svg { width: 20px; height: 20px; }
  .team-grid { grid-template-columns: 1fr; }
  .team-grid > article:nth-child(even) { padding-top: 0; }
  .team-grid h3 { font-size: 28px; }
  .person-email { font-size: 13px; }
}
/* Fünf Profile, am Desktop leicht versetzt und mobil als lesbare Kontaktzeilen. */
#team { scroll-margin-top: 12px; }
.team-heading { margin-top: 96px; margin-bottom: 36px; padding-bottom: 30px; border-bottom: 1px solid var(--line); align-items: end; }
.team-heading .team-eyebrow { margin-bottom: 18px; color: var(--muted); font-size: 10px; }
.team-heading h2 { font-size: clamp(52px, 5.2vw, 76px); letter-spacing: -.055em; }
.team-heading .lead { font-size: 20px; line-height: 1.5; max-width: 290px; padding-bottom: 2px; }
.team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; align-items: start; }
.team-grid > article { padding-top: 0; min-width: 0; }
.team-grid > article:nth-child(even) { padding-top: 36px; }
.team-grid .photo-surface { aspect-ratio: 4 / 5; border: 0; box-shadow: none; overflow: hidden; }
.team-grid .photo-surface::after { border: 1px solid #edf8f019; background: linear-gradient(180deg, transparent 60%, #050c1420); }
.team-grid .photo-surface > img { aspect-ratio: auto; width: 100%; height: 100%; object-position: center 35%; }
.team-grid article:hover .photo-surface, .team-grid article:focus-within .photo-surface { border: 0; }

.person-meta { padding-top: 22px; }
.team-grid h3 { margin-top: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; font-weight: 500; letter-spacing: -.035em; hyphens: none; overflow-wrap: normal; }
.team-grid h3 > span { display: block; }
.team-grid .role { min-height: 3.4em; margin-top: 14px; font-size: 12px; line-height: 1.7; color: #abb8ad; font-family: inherit; letter-spacing: .005em; }
.team-grid .person-email { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.7; color: #d5ddd3; }
.team-grid .person-email a { display: block; padding-block: 3px; text-decoration: none; transition: color .2s; }
.team-grid .person-email a:hover { color: var(--acid); }
.team-grid .person-email--placeholder { color: #9caa9e; }
.team-placeholder-tag { position: absolute; top: 11px; left: 11px; z-index: 3; padding: 6px 8px; background: #e8ede1; color: #263322; font-family: var(--mono); font-size: 9px; font-weight: 400; letter-spacing: .04em; line-height: 1.3; text-transform: uppercase; }
.team-person--placeholder .photo-surface > img { filter: saturate(.4) contrast(1.025) brightness(.9); }
.team-person--placeholder:hover .photo-surface > img { filter: saturate(.4) contrast(1.025) brightness(.9); }

@media (min-width: 821px) and (max-width: 1199px) {
  .team-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 24px; }
  .team-grid > article { grid-column: span 2; }
  .team-grid > article:nth-child(4) { grid-column: 2 / span 2; padding-top: 0; }
  .team-grid > article:nth-child(5) { grid-column: 4 / span 2; padding-top: 36px; }
  .team-grid h3 { font-size: 28px; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
  .team-grid > article { grid-column: span 2; }
  .team-grid > article:last-child { grid-column: 2 / span 2; }
  .team-grid h3 { font-size: 30px; }
  .team-grid .role, .team-grid .person-email { font-size: 12px; }
}
@media (max-width: 680px) {
  .team-heading { margin-top: 64px; padding-bottom: 26px; }
  .team-heading h2 { font-size: 54px; }
  .team-heading .lead { max-width: 300px; margin-top: 18px; font-size: 18px; }
}
@media (max-width: 600px) {
  #team { scroll-margin-top: 8px; }
  .team-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .team-grid > article, .team-grid > article:nth-child(even) { display: grid; grid-template-columns: minmax(96px, .8fr) minmax(0, 1fr); gap: 20px; padding-top: 0; }
  .team-grid > article + article { padding-top: 26px; border-top: 1px solid var(--line); }
  .team-grid > article:nth-child(even) { padding-top: 26px; }
  .team-grid .person-meta { align-self: center; padding-top: 0; }
  .team-grid h3 { font-size: clamp(23px, 6vw, 30px); }
  .team-grid .role { min-height: 0; margin-top: 10px; font-size: 11px; line-height: 1.6; }
  .team-grid .person-email { margin-top: 10px; padding-top: 10px; font-size: 11px; line-height: 1.6; }
  .team-grid .person-email a { padding: 0; }
  .team-placeholder-tag { top: 8px; left: 8px; padding: 5px 6px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}