/* Branchenseiten (Energie, Tiefbau): Kopf mit Foto, Graben-Grafik im Workflow */
.ev-hero h1 { max-width: none; }
.ev-hero h1 span { display: block; white-space: nowrap; }
@media (max-width: 420px) { .ev-hero h1 { font-size: 32px; } }
@media (max-width: 360px) { .ev-hero h1 { font-size: 27px; } }
.ev-foto { position: relative; margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; max-width: 100%; background: var(--c-bg-light); }
.ev-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
.ev-marke { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 4px; padding: 10px 14px; font: 500 12px/1.2 var(--font-mono); letter-spacing: .08em; color: var(--c-dark); box-shadow: 0 6px 24px rgba(16,23,26,.18); }
.ev-marke i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); flex: none; }
@media (min-width: 1101px) { .ev-hero .dl-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
@media (max-width: 1100px) { .ev-foto { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .ev-marke { left: 12px; bottom: 12px; padding: 7px 10px; font-size: 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .ev-marke { opacity: 0; animation: ev-fade .8s ease 1.2s forwards; }
}
@keyframes ev-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Workflow: Schnitt durch den offenen Graben statt Foto */
.ev-graben { margin: 0; }
.ev-graben svg { display: block; width: 100%; height: auto; overflow: visible; }
.ev-karte { fill: #fff; stroke: var(--c-line); stroke-width: 1.2; }
.ev-strasse { fill: none; stroke: #E7ECE9; stroke-width: 22; stroke-linecap: butt; }
.ev-haus { fill: #F4F6F5; stroke: var(--c-line); stroke-width: 1; }
.ev-bestand { fill: none; stroke: var(--c-gray); stroke-width: 2; stroke-dasharray: 6 5; }
.ev-neu { fill: none; stroke: var(--c-accent); stroke-width: 4; stroke-linecap: round; }
.ev-neu-pt { fill: var(--c-accent); stroke: #fff; stroke-width: 2; }
.ev-label { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; fill: var(--c-gray); }
.ev-wert { font: 500 13px/1 var(--font-mono); fill: var(--c-dark); }
.ev-ok { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; fill: var(--c-accent-deep); }
.ev-asphalt { fill: #C9D2CD; }
.ev-erde { fill: #EEF1EF; }
.ev-wand { fill: none; stroke: var(--c-gray); stroke-width: 1.2; stroke-dasharray: 3 4; }
.ev-bett { fill: #F7F3EA; stroke: none; }
.ev-rohr { fill: #fff; stroke: var(--c-dark); stroke-width: 2.5; }
.ev-rohr-alt { fill: none; stroke: var(--c-gray); stroke-width: 2; stroke-dasharray: 5 4; }
.ev-kabel { fill: var(--c-dark); }
.ev-stab { stroke: var(--c-dark); stroke-width: 2.5; }
.ev-antenne { fill: #fff; stroke: var(--c-dark); stroke-width: 2; }
.ev-mess { fill: var(--c-accent); stroke: #fff; stroke-width: 2; }
.ev-tag-linie { stroke: var(--c-dark); stroke-width: 1; }
.ev-sync { fill: none; stroke: var(--c-accent); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
/* Ein Ablauf, startet erst, wenn der Abschnitt im Bild ist, danach Ruhe */
@media (prefers-reduced-motion: no-preference) {
  .ev-graben .ev-a { opacity: 0; }
  .ev-graben .ev-zeichnen { stroke-dasharray: 400; stroke-dashoffset: 400; }
  .ev-graben.ist-sichtbar .ev-a { animation: ev-ein .8s ease forwards; animation-delay: var(--d); }
  .ev-graben.ist-sichtbar .ev-stab-g { animation-name: ev-senken; animation-duration: 1.1s; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
  .ev-graben.ist-sichtbar .ev-zeichnen { animation: ev-zeichnen 1.4s ease forwards; animation-delay: var(--d); }
}
@keyframes ev-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes ev-senken { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } }
@keyframes ev-zeichnen { to { stroke-dashoffset: 0; } }

/* Tiefbau: Foto anders ausrichten, Absteckpflock in der Grafik */
.tb-hero .ev-foto img { object-position: 52% 50%; }
.tb-hero h1 { font-size: clamp(30px, 4.1vw, 56px); }
@media (max-width: 420px) { .tb-hero h1 { font-size: 29px; } }
@media (max-width: 360px) { .tb-hero h1 { font-size: 25px; } }
.ev-pflock { stroke: var(--c-dark); stroke-width: 2.5; }
.ev-pflock-kopf { fill: var(--c-accent); stroke: #fff; stroke-width: 2; }
.ev-lot { stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; }
.ev-rohr-bestand { fill: #fff; stroke: var(--c-gray); stroke-width: 2; }

/* Kommunal: Hochformat-Foto, Motiv in der Mitte */
.ko-hero .ev-foto img { object-position: 50% 40%; }
.ko-hero .ev-marke { left: auto; right: 20px; }
@media (max-width: 1100px) { .ko-hero .ev-foto { aspect-ratio: 4 / 5; max-width: 460px; } }
@media (max-width: 600px) { .ko-hero .ev-marke { right: 12px; } }