/* Dienstleistungsseite: nur hier geladen, ergänzt style.css */

/* Hero: GIS in vier Schichten */
.dl-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.dl-hero-copy h1 { max-width: 13ch; }
.dl-stack { margin: 0; }
.dl-stack svg { display: block; width: 100%; height: auto; overflow: visible; }
.dl-face { fill: #fff; stroke: var(--c-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dl-face-top { stroke: var(--c-accent); stroke-width: 1.5; }
.dl-slab { fill: #E4EAE6; }
.dl-slab-top { fill: #D3E8DA; }
.dl-road { fill: none; stroke: #E7ECE9; stroke-width: 14; }
.dl-pipe { fill: none; stroke: var(--c-dark); stroke-width: 3; }
.dl-pt { fill: var(--c-accent); stroke: #fff; stroke-width: 2; }
.dl-pole { stroke: var(--c-dark); stroke-width: 2; }
.dl-antenna { fill: #fff; stroke: var(--c-dark); stroke-width: 2; }
.dl-link { fill: none; stroke: var(--c-accent); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; }
.dl-logo rect { fill: none; stroke: none; }
.dl-src { fill: #F4F6F5; stroke: var(--c-gray); stroke-width: 1.2; }
.dl-dst { fill: var(--c-accent-soft); stroke: var(--c-accent-deep); stroke-width: 1.5; }
.dl-flow { fill: none; stroke: var(--c-accent); stroke-width: 2.5; }
.dl-doc { fill: none; stroke: #C9D2CD; stroke-width: 6; stroke-linecap: round; }
.dl-doc-box { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 1.2; }
.dl-tag line { stroke: var(--c-dark); stroke-width: 1; }
.dl-tag text { font: 500 17px/1 var(--font-display); fill: var(--c-dark); }
.dl-tag .dl-tag-n { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; fill: var(--c-gray); }
.dl-stack-legend { display: none; }

/* Schichten legen sich einmal von unten nach oben auf, mit Abstand, ohne Nachwippen */
@media (prefers-reduced-motion: no-preference) {
  .dl-layer, .dl-tag { opacity: 0; animation: dl-lay .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.2s + var(--i) * 1s); }
  .dl-tag { animation-name: dl-fade; animation-delay: calc(.6s + var(--i) * 1s); }
}
@keyframes dl-lay { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes dl-fade { from { opacity: 0; } to { opacity: 1; } }

/* Ausgangslagen: links die Sätze, rechts die Antwort */
.dl-lagen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 32px; align-items: start; border-top: 1px solid var(--c-dark); }
.dl-lage-q { grid-column: 1; all: unset; box-sizing: border-box; grid-column: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 20px 16px 20px 0; border-bottom: 1px solid var(--c-line); font: 500 17px/1.4 var(--font-display); color: var(--c-gray); cursor: pointer; position: relative; transition: color .2s var(--ease); }
.dl-lage-q span { font: 500 12px/1.9 var(--font-mono); color: var(--c-gray); }
.dl-lage-q:hover { color: var(--c-dark); }
.dl-lage-q.is-on { color: var(--c-dark); }
.dl-lage-q.is-on span { color: var(--c-accent-deep); }
.dl-lage-q.is-on::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 2px; background: var(--c-accent); }
.dl-lage-q:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.dl-lage-a { grid-column: 2; grid-row: 1 / span 4; margin-top: 20px; background: #fff; border: 1px solid var(--c-line); border-top: 2px solid var(--c-dark); padding: clamp(24px, 3vw, 36px); }
/* Alle Antworten liegen übereinander in derselben Zelle; die längste bestimmt die Höhe.
   So springt die Seite beim Durchklicken nicht (Martin, 12.11.2026). */
.dl-lage-a { align-self: stretch; }
.dl-lage-a[hidden] { display: block; visibility: hidden; }
.dl-lage-eyebrow { display: block; margin-bottom: 12px; font: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent-deep); }
.dl-lage-a h3 { font: var(--fs-h3); margin-bottom: 12px; }
.dl-lage-a p { margin: 0 0 18px; }
.dl-lage-a ul { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--c-line); }
.dl-lage-a li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--c-line); font: 500 15px/1.45 var(--font); color: var(--c-dark); }
.dl-lage-a li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }

/* Bausteine */
.dl-bausteine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; border-top: 1px solid var(--c-dark); }
.dl-baustein { display: flex; flex-direction: column; gap: 10px; padding: 28px 0 32px; border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; }
/* Icon, Titel, Text und Link teilen sich die Zeilen der Reihe: zweizeilige Titel schieben die Texte daneben mit */
@supports (grid-template-rows: subgrid) {
  .dl-baustein { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
}
.dl-baustein svg { width: 28px; height: 28px; fill: none; stroke: var(--c-dark); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.dl-baustein .dl-ico-dot { fill: var(--c-accent); stroke: none; }
.dl-baustein h4 { font: var(--fs-h6); margin: 0; transition: color .2s var(--ease); }
.dl-baustein p { margin: 0; font: var(--fs-body-sm); color: var(--c-dark-2); flex: 1; }
.dl-baustein-go { align-self: end; }
.dl-baustein-go { margin-top: 8px; font: 600 14px/1 var(--font); color: var(--c-dark); }
.dl-baustein-go span { display: inline-block; transition: transform .2s var(--ease); }
@media (hover: hover) {
  .dl-baustein:hover h4 { color: var(--c-accent-deep); }
  .dl-baustein:hover .dl-baustein-go span { transform: translateX(4px); }
}

/* Open-Source-Band */
.dl-oss { background: var(--c-ink-green); color: rgba(255,255,255,.8); }
.dl-oss h2 { color: #fff; }
.dl-oss h2 span[style] { color: var(--c-accent) !important; }
.dl-oss .eyebrow { color: rgba(255,255,255,.6); }
.dl-oss-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.dl-oss-copy p { max-width: 52ch; font: var(--fs-body-lg); }
.dl-oss-list { list-style: none; margin: 0; padding: 0; counter-reset: oss; border-top: 1px solid rgba(255,255,255,.4); }
.dl-oss-list li { counter-increment: oss; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 8px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.dl-oss-list li::before { content: counter(oss, decimal-leading-zero); grid-row: 1 / span 2; font: 500 12px/1.9 var(--font-mono); color: var(--c-accent); }
.dl-oss-list h4 { font: var(--fs-h6); color: #fff; margin: 0 0 6px; }
.dl-oss-list p { margin: 0; font: var(--fs-body-sm); color: rgba(255,255,255,.75); }

/* Werkzeuge: freigestellte Originallogos auf Weiß */
.dl-tools { padding: 40px 0; border-bottom: 1px solid var(--c-line); }
.dl-tools-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.dl-tools-row li { display: flex; align-items: center; gap: 12px; font: 700 26px/1 var(--font-display); letter-spacing: -.01em; color: #3a3a3a; }
.dl-tool-mark { height: 40px; width: auto; }
.dl-tool-word { height: 34px; width: auto; }
.dl-tool-gs { height: 38px; }

/* Abschluss */
.dl-partner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.dl-partner h2 { margin-bottom: 16px; }
.dl-partner p { max-width: 56ch; margin: 0; }
.dl-partner-cta p { margin-bottom: 16px; font: var(--fs-body-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--c-gray); }

@media (max-width: 1100px) {
  .dl-hero-grid { grid-template-columns: 1fr; }
  .dl-stack { max-width: 640px; }
}
@media (max-width: 860px) {
  .dl-lagen { grid-template-columns: 1fr; }
  .dl-lage-a { grid-column: 1; grid-row: auto; margin: 0 0 8px; }
  .dl-lage-a[hidden] { display: none; }
  .dl-bausteine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-oss-grid, .dl-partner { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 600px) {
  .dl-tools-row { justify-content: flex-start; gap: 24px 32px; }
  .dl-tools-row li { font-size: 21px; }
  .dl-tool-mark { height: 32px; }
  .dl-tool-word { height: 27px; }
  .dl-tool-gs { height: 30px; }
  .dl-tags { display: none; }
  .dl-stack svg { margin-right: -8%; }
  .dl-stack-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin-top: 16px; font: 500 14px/1.3 var(--font-display); color: var(--c-dark); }
  .dl-stack-legend b { display: block; font: 500 11px/1.6 var(--font-mono); letter-spacing: .14em; color: var(--c-gray); }
  .dl-bausteine { grid-template-columns: 1fr; }
}