/* The service pages share the original branding and a quiet, dark reading surface. */
:root {
  --bg: #1b1d1f;
  --panel: #242729;
  --text: #f2f2ef;
  --muted: #b8bdc0;
  --line: #41464a;
  --paper: #ededeb;
  --ink: #202326;
  --pad: clamp(24px, 6vw, 112px);
}

html { scroll-padding-top: 112px; }
body { line-height: 1.55; }
body.modal-open { overflow: hidden; }
.section { padding-top: clamp(72px, 8vw, 124px); padding-bottom: clamp(72px, 8vw, 124px); }
.header { height: 90px; background: rgba(27, 29, 31, .97); border: 0; }
.brand, .footer .brand { width: 176px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.brand img { display: block; width: 100%; height: auto; object-fit: contain; }
.header nav { font-size: 13px; gap: 34px; }
.header nav a:hover, .related a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.nav-contact { border-bottom: 1px solid #7f878d; }
.settings-trigger { width: 44px; height: 44px; opacity: 1; }
.settings-trigger:hover { background: #31363a; }
h1, h2, h3 { font-weight: 300; }
h1 { font-size: clamp(44px, 5vw, 78px); line-height: 1.11; letter-spacing: -.035em; }
h2 { font-size: clamp(34px, 3.5vw, 54px); line-height: 1.15; letter-spacing: -.03em; }
p { line-height: 1.7; }
.button { font-size: 14px; padding: 16px 23px; min-height: 52px; }
.button.light { background: #ebedeb; color: #202326; }
.button:hover { background: #fff; color: #101214; }
.button:disabled { opacity: .5; }

.detail-hero { background: var(--bg); padding-top: 36px; padding-bottom: 88px; }
.back-link { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; margin-bottom: 62px; }
.back-link::before { content: '\2190'; font-size: 18px; }
.back-link:hover { color: #fff; }
.detail-hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
.detail-hero-grid.has-visual { grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 68px); }
.detail-hero-copy { min-width: 0; }
.detail-category { font-size: 16px; color: #c2c8cc; line-height: 1.45; margin-bottom: 22px; }
.detail-subtitle { color: var(--muted); font-size: 14px; margin-top: -14px; margin-bottom: 22px; }
.detail-hero h1 { font-size: clamp(44px, 5vw, 78px); margin: 0; max-width: 1000px; }
.detail-hero .has-visual h1 { font-size: clamp(42px, 4.3vw, 68px); }
.detail-intro { font-size: 18px; color: #bcc3c8; max-width: 730px; margin-top: 30px; }
.detail-hero .button { margin-top: 30px; }
.detail-visual { margin: 0; align-self: center; min-width: 0; }
.detail-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.detail-visual figcaption { color: #9ea7ad; text-align: center; font-size: 11px; margin-top: 12px; }

.detail-content { background: #232629; color: var(--text); grid-template-columns: .8fr 1.2fr; gap: clamp(42px, 7vw, 112px); }
.detail-content-heading { padding-top: 25px; }
.detail-content h2 { font-size: clamp(34px, 3.5vw, 54px); }
.detail-item { border-color: #4b5156; gap: 0; padding: 28px 0 32px; }
.detail-item:first-child { border-top: 0; padding-top: 25px; }
.detail-item:last-child { padding-bottom: 0; }
.detail-item h3 { font-size: 26px; font-weight: 400; line-height: 1.3; letter-spacing: -.015em; }
.detail-item p { font-size: 16px; color: #bdc4c9; margin-top: 12px; max-width: 650px; }
.detail-approach { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(42px, 7vw, 112px); }
.detail-approach h2 { max-width: 520px; }
.detail-approach p { max-width: 650px; color: #bcc3c8; font-size: 17px; }
.detail-approach p + p { margin-top: 22px; }
.detail-crosslinks { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 26px; }
.detail-crosslinks a { font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }

.contact { grid-template-columns: .8fr 1.2fr; gap: clamp(42px, 7vw, 112px); background: #24282b; }
.contact-intro h2 { font-size: clamp(36px, 3.5vw, 54px); }
.contact-intro > p:not(.eyebrow) { font-size: 17px; color: #c4cace; margin-top: 25px; }
.contact-intro .direct-contact-note { font-size: 13px !important; color: #acb6bd !important; margin-top: 14px !important; }
.mail-link { font-size: 22px; margin-top: 27px; letter-spacing: -.015em; }
.mail-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-form fieldset { min-width: 0; }
.form-topic { font-size: 16px; line-height: 1.5; color: #e3e7e9; margin-bottom: 28px; padding: 0; max-width: 100%; }
.form-grid { gap: 26px 24px; }
.contact-form label { font-size: 13px; color: #c8cdd1; }
.contact-form input, .contact-form textarea, .contact-form select { font-size: 16px; border-color: #737d85; padding: 12px 0; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #e3e7ea; }
.form-note { font-size: 12px; color: #b0bac1; line-height: 1.65; margin: 24px 0; }
.form-note a { text-decoration: underline; text-underline-offset: 3px; }
.form-status { font-size: 14px; color: #e1e6e9; }
.form-status:empty { margin: 0; }
.form-status a { display: inline-block; color: #fff; margin-top: 10px; text-underline-offset: 4px; }
.related { background: var(--bg); padding-top: 72px; padding-bottom: 80px; }
.related h2 { font-size: 32px; margin-bottom: 30px; }
.related > div { gap: 0 60px; }
.related a { border-color: #495057; font-size: 16px; padding: 21px 0; line-height: 1.5; }

.footer { background: #17191b; border-color: #3a4146; padding-top: 64px; }
.footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 44px; }
.footer-label { display: block; margin-bottom: 20px; color: #c0c6cb; font-size: 14px; }
.footer-grid p, .footer address { color: #aeb7bd; font-size: 14px; }
.footer-grid > div > a:not(.brand) { font-size: 14px; }
.footer-grid .mail-link { font-size: 20px !important; }
.footer-bottom { color: #aeb7bd; border-color: #3f464c; font-size: 12px; line-height: 1.6; }
.legal { flex-wrap: wrap; gap: 12px 22px; }
.legal button { font-size: 12px; }
.footer a:hover, .legal button:hover { text-decoration: underline; text-underline-offset: 4px; }
.settings-dialog { width: min(540px, calc(100vw - 32px)); background: #262b2f; border-color: #717b83; padding: 44px 36px 32px; }
.settings-dialog h2 { font-size: 30px; line-height: 1.2; margin: 8px 0 28px; }
.settings-dialog .close { width: 44px; height: 44px; top: 5px; right: 7px; }
.setting { gap: 28px; border-color: #56616a; }
.setting strong { font-size: 15px; }
.setting small { font-size: 13px; color: #bdc6cd; }
.setting input { flex-shrink: 0; width: 22px; height: 22px; }
.privacy-note { font-size: 12px; color: #bac4cb; border-color: #56616a; }
.text-button { font-size: 13px; }
.noscript { margin: 0; padding: 20px var(--pad); color: #e4e8eb; background: #31383d; font-size: 14px; }

body.high-contrast { --bg: #000; --panel: #111; --text: #fff; --muted: #eee; --line: #aaa; background: #000; }
.high-contrast .header, .high-contrast .detail-hero, .high-contrast .detail-content, .high-contrast .detail-approach, .high-contrast .contact, .high-contrast .related, .high-contrast .footer, .high-contrast .settings-dialog { background: #000; color: #fff; }
.high-contrast p, .high-contrast label, .high-contrast small, .high-contrast address, .high-contrast legend, .high-contrast .footer-label, .high-contrast .footer-bottom, .high-contrast .back-link, .high-contrast figcaption { color: #fff !important; }
.high-contrast .detail-item, .high-contrast .related a, .high-contrast .footer-bottom, .high-contrast .setting, .high-contrast .privacy-note, .high-contrast .contact-form input, .high-contrast .contact-form textarea { border-color: #b8b8b8; }
.high-contrast .direct-contact-note { color: #fff !important; }
.detail-page.large-text p:not(.eyebrow), .large-text .contact-form label, .large-text .contact-form input, .large-text .contact-form textarea, .large-text .form-topic, .large-text .related a, .large-text .setting small, .large-text .setting strong { font-size: 19px; }
.detail-page.large-text .contact-intro .direct-contact-note { font-size: 17px !important; }
.large-text .header nav, .large-text .footer address, .large-text .footer-label, .large-text .footer-bottom, .large-text .legal button, .large-text .button, .large-text .text-button { font-size: 16px; }
.large-text .detail-hero-grid.has-visual { grid-template-columns: 1.3fr .7fr; }

@media (min-width: 1700px) {
  .detail-page > main, .detail-page > .header, .detail-page > .footer { max-width: 1920px; margin-inline: auto; }
}
@media (max-width: 1050px) {
  .detail-hero-grid.has-visual { grid-template-columns: 1fr .65fr; gap: 24px; }
  .detail-hero .has-visual h1 { font-size: 44px; }
  .detail-intro { font-size: 16px; }
  .detail-content, .detail-approach, .contact { grid-template-columns: .8fr 1.2fr; gap: 42px; }
  .footer-grid { gap: 30px; }
  .footer-bottom { align-items: flex-start; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .header { height: 76px; gap: 12px; }
  .brand, .footer .brand { width: 145px; }
  .header nav { gap: 0; }
  .header nav > a:not(.nav-contact) { display: none; }
  .nav-contact { font-size: 13px; }
  .settings-trigger { width: 40px; height: 44px; }
  .section { padding-top: 64px; padding-bottom: 64px; }
  .detail-hero { padding-top: 28px; padding-bottom: 54px; }
  .back-link { margin-bottom: 34px; }
  .detail-hero-grid.has-visual, .large-text .detail-hero-grid.has-visual { grid-template-columns: 1fr; gap: 32px; }
  .detail-category { font-size: 15px; margin-bottom: 18px; }
  .detail-hero h1, .detail-hero .has-visual h1 { font-size: clamp(38px, 7.4vw, 56px); letter-spacing: -.032em; }
  .detail-intro { font-size: 17px; margin-top: 24px; }
  .detail-visual { max-width: 500px; width: 100%; margin-inline: auto; }
  .detail-visual figcaption { font-size: 11px; }
  .detail-content, .detail-approach, .contact { grid-template-columns: 1fr; gap: 36px; }
  .detail-content-heading { padding-top: 0; }
  .detail-content h2, .detail-approach h2, .contact-intro h2 { font-size: 38px; }
  .detail-item:first-child { padding-top: 24px; border-top: 1px solid #4b5156; }
  .detail-item h3 { font-size: 25px; }
  .detail-item p { font-size: 16px; }
  .contact-intro > p:not(.eyebrow) { margin-top: 20px; }
  .related > div { grid-template-columns: 1fr; }
  .related a { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 38px 24px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bottom { gap: 20px; margin-top: 38px; font-size: 12px; }
  .legal button { font-size: 12px; }
  .settings-dialog { padding: 42px 24px 26px; }
  .settings-dialog h2 { font-size: 28px; }
  .large-text .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  :root { --pad: 22px; }
  .header { gap: 8px; }
  .brand { width: 128px; }
  .detail-hero h1, .detail-hero .has-visual h1 { font-size: 36px; }
  .form-grid, .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
  .detail-content h2, .detail-approach h2, .contact-intro h2 { font-size: 34px; }
  .settings-dialog h2 { font-size: 26px; }
}

/* Edition 08 photographs share the homepage's quiet, responsive treatment. */
.detail-page{background:var(--section-tone,var(--bg));transition:background-color 1.5s ease}
.detail-page .detail-hero{background:transparent;padding-bottom:clamp(90px,9vw,145px)}
.detail-hero-grid.has-visual{grid-template-columns:1.05fr .95fr;gap:clamp(45px,7vw,112px);align-items:center}
.detail-hero .has-visual h1{font-size:clamp(42px,4.35vw,70px);line-height:1.12}
.detail-intro{font-size:17px;line-height:1.85}
.detail-visual.editorial-media{position:relative;margin:0;min-width:0;width:100%;max-width:none;isolation:isolate}
.detail-visual .media-frame{position:relative;width:100%;aspect-ratio:5/6;overflow:hidden;background:#101417}
.detail-visual .media-surface{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform-origin:50% 50%;backface-visibility:hidden}
.editorial-media[data-colour] .media-surface{filter:grayscale(1);transition:filter 1.2s ease}
.editorial-media[data-colour].is-colour .media-surface{filter:grayscale(0)}
[data-service="marketing-design"] .detail-visual .media-frame{aspect-ratio:2/3}
[data-service="it-systeme"] .detail-visual .media-frame,[data-service="hosting"] .detail-visual .media-frame{aspect-ratio:5/4}
[data-service="ki-automatisierung"] .detail-visual .media-frame{aspect-ratio:4/5;perspective:1200px;background:#090e11}
[data-service="ki-automatisierung"] .detail-visual .media-surface{object-position:50% 46%;transform-origin:50% 45%}
[data-service="websites"] .detail-visual .media-frame,[data-service="veranstaltungstechnik"] .detail-visual .media-frame{aspect-ratio:4/3}
[data-service="gebaeudemanagement"] .detail-visual .media-frame{aspect-ratio:16/10}
.detail-page .button.light{background:transparent;color:var(--text);border:1px solid #98a4ac;font-size:13px}
.detail-page .button.light:hover{background:#e5eaed;color:#202428;border-color:#e5eaed}
.head-hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2;color:#d9f4f2;opacity:.45;mix-blend-mode:screen}
.head-hud .hud-orbit{transform-box:fill-box;transform-origin:center}
.head-active .head-hud .hud-orbit{animation:detail-hud-orbit 24s linear infinite}
.head-active .head-hud .hud-drift{animation:detail-hud-drift 8s ease-in-out infinite alternate}
.head-active .head-hud .hud-point{animation:detail-hud-pulse 4s ease-in-out infinite}
@keyframes detail-hud-orbit{to{transform:rotate(360deg)}}
@keyframes detail-hud-drift{from{transform:translateY(-1px);opacity:.45}to{transform:translateY(1px);opacity:.85}}
@keyframes detail-hud-pulse{0%,100%{opacity:.3}50%{opacity:.9}}
.editorial-cursor{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:1000}
.editorial-cursor-active,.editorial-cursor-active a,.editorial-cursor-active button{cursor:none}
.editorial-cursor-active input,.editorial-cursor-active textarea,.editorial-cursor-active [contenteditable="true"]{cursor:text}
.editorial-cursor-active select{cursor:default}
.editorial-reduced,.editorial-reduced .media-surface{transition:none!important}
.editorial-reduced .head-hud,.reduced-motion .head-hud{display:none}
.detail-page.high-contrast{background:#000!important}
@media(max-width:1050px){
  .detail-hero-grid.has-visual{grid-template-columns:1.1fr .9fr;gap:36px}
  .detail-hero .has-visual h1{font-size:44px}
  .detail-intro{font-size:16px}
}
@media(max-width:760px){
  .detail-hero-grid.has-visual,.large-text .detail-hero-grid.has-visual{grid-template-columns:1fr;gap:42px}
  .detail-hero .has-visual h1{font-size:clamp(38px,7.4vw,56px)}
  .detail-visual.editorial-media{width:100%;max-width:580px;margin-inline:auto}
  .detail-intro{font-size:17px;line-height:1.8}
  .detail-page .detail-hero{padding-bottom:75px}
  [data-service="marketing-design"] .detail-visual.editorial-media{width:90%;margin-inline:0 auto}
  [data-service="marketing-design"] .detail-visual .media-frame{aspect-ratio:2/3}
  .head-hud{opacity:.35}
}
@media(max-width:420px){.detail-hero .has-visual h1{font-size:36px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .detail-page{transition:none}html:not(.motion-enabled) .editorial-media .media-surface{transition:none!important}html:not(.motion-enabled) .head-hud{display:none}}