:root {
      --blue:      #1b3f6a;
      --blue-dk:   #122b4a;
      --blue-md:   #1e4f85;
      --blue-lt:   #2e7dbe;
      --blue-pale: #eaf1f9;
      --white:     #ffffff;
      --off:       #f5f7fa;
      --border:    #dde4ec;
      --text:      #1c2b3a;
      --text-lt:   #5a6a7a;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Lato', sans-serif;
      background: var(--white);
      color: var(--text);
      overflow-x: hidden;
      margin: 0; padding: 0; /* kein weißer Rand */
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }

    /* ══════════════════════════════════════
       TOPBAR – zentriert, gut lesbar
    ══════════════════════════════════════ */
    .topbar {
      background: #1b3f6a;
      padding: 0.7rem 2.5rem;
    }
    .topbar-inner {
      max-width: 1300px; margin: 0 auto;
      display: flex; justify-content: center; align-items: center;
      gap: 2.5rem;
    }
    .tb-item {
      display: flex; align-items: center; gap: 0.5rem;
      font-size: 0.88rem; font-weight: 400;
      color: rgba(255,255,255,0.92);
      transition: color 0.2s;
      white-space: nowrap;
    }
    .tb-item:hover { color: #fff; }
    .tb-item svg { width: 14px; height: 14px; flex-shrink: 0; }
    .tb-item strong { font-weight: 700; color: #fff; }
    .tb-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.25); }

    /* ══════════════════════════════════════
       HEADER – weißer Streifen über Logo
    ══════════════════════════════════════ */
    header {
      background: #edf1f6;
      border-bottom: 3px solid var(--blue);
      position: sticky; top: 0; z-index: 500;
      box-shadow: 0 2px 10px rgba(27,63,106,0.08);
      width: 100%;
      transition: background 0.3s ease;
    }

    .hdr {
      max-width: 1300px; margin: 0 auto; padding: 0 2.5rem;
      height: 130px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 2rem; position: relative;
    }

    /* Logo – mix-blend-mode entfernt weißen Hintergrund auf hellem BG */
    .logo {
      flex-shrink: 0;
      display: flex; align-items: center;
      height: 130px;
      padding: 8px 0;
    }
    .logo img {
      height: 100%;
      width: auto;
      object-fit: contain;
      display: block;
      mix-blend-mode: multiply;
      background: transparent;
    }
    /* Logo – mix-blend-mode entfernt weißen Hintergrund auf hellem BG */
    .logo {
      flex-shrink: 0;
      display: flex; align-items: center;
      height: 130px;
      padding: 8px 0;
    }
    .logo img {
      height: 100%;
      width: auto;
      object-fit: contain;
      display: block;
      mix-blend-mode: multiply;
      background: transparent;
    }

    nav { display: flex; align-items: stretch; height: 130px; }
    .ni { position: relative; display: flex; align-items: center; }
    .ni:hover {
      background: linear-gradient(to bottom, #d6e4f0 0%, #edf1f6 100%);
    }
    .ni > a {
      font-size: 0.85rem; font-weight: 700;
      letter-spacing: 0.05em; text-transform: uppercase;
      color: var(--text);
      padding: 0 1rem; height: 100%;
      display: flex; align-items: center; gap: 0.2rem;
      border-bottom: 3px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .ni:hover > a { color: var(--blue-lt); border-bottom-color: var(--blue-lt); }

    .dd {
      position: absolute; top: 100%; left: 0;
      background: var(--white);
      border-top: 3px solid var(--blue);
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      min-width: 260px;
      opacity: 0; pointer-events: none;
      transform: translateY(-4px);
      transition: opacity 0.18s ease, transform 0.18s ease;
      z-index: 600;
      box-shadow: 0 8px 28px rgba(27,63,106,0.12);
    }
    .ni:hover .dd { opacity: 1; pointer-events: all; transform: translateY(0); }
    .dd a {
      display: flex; align-items: center;
      padding: 0.75rem 1.2rem 0.75rem 1rem;
      font-size: 0.85rem; font-weight: 400; color: var(--text);
      border-bottom: 1px solid var(--border);
      border-left: 3px solid transparent;
      transition: border-color 0.15s, color 0.15s, background 0.15s, padding 0.15s;
      text-decoration: none;
    }
    .dd a:last-child { border-bottom: none; }
    .dd a:hover {
      border-left-color: var(--blue-lt);
      color: var(--blue);
      background: var(--blue-pale);
      padding-left: 1.4rem;
      font-weight: 600;
    }

    /* Dropdown-Pfeil im Nav */
    .nav-arrow {
      width: 14px; height: 14px;
      margin-left: 2px; flex-shrink: 0;
      transition: transform 0.2s;
      color: var(--text-lt);
    }
    .ni:hover .nav-arrow { transform: rotate(180deg); color: var(--blue-lt); }

    .hdr-cta {
      flex-shrink: 0;
      background: #1b3f6a; color: var(--white);
      padding: 0.6rem 1.4rem;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      transition: background 0.2s; white-space: nowrap;
      display: flex; align-items: center; gap: 0.5rem;
    }
    .hdr-cta:hover { background: #2e7dbe; }

    /* ══════════════════════════════════════
       HERO – blau links | Foto rechts
       (DW-Original-Stil beibehalten)
    ══════════════════════════════════════ */
    .hero {
      background: linear-gradient(
        225deg,
        #2e6db4 0%,
        #235a9e 25%,
        #1a4a85 50%,
        #163a6e 75%,
        #122b4a 100%
      );
      display: grid;
      grid-template-columns: 2fr 3fr;
      min-height: 520px;
      position: relative; overflow: hidden;
      width: 100%;
    }
    /* Kein Textur-Pattern – sauberer Gradient */

    .hero-left {
      display: flex; flex-direction: column; justify-content: center; align-items: center;
      padding: 6rem 3rem;
      position: relative; z-index: 2;
      min-height: 680px;
      text-align: center;
    }

    .hero-eyebrow {
      font-size: 0.7rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.75);
      margin-bottom: 1.1rem;
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      opacity: 0; animation: fadeUp 0.5s 0.1s forwards;
    }
    .hero-eyebrow::before { display: none; }

    .hero-title {
      font-size: clamp(1.7rem, 2.5vw, 2.6rem);
      font-weight: 900;        /* Lato Black – rund & kraftvoll wie Nass */
      color: var(--white);
      line-height: 1.18;
      margin-bottom: 1.3rem;
      letter-spacing: -0.01em;
      opacity: 0; animation: fadeUp 0.5s 0.22s forwards;
    }

    .hero-text {
      font-size: 1rem; font-weight: 300;
      color: rgba(255,255,255,0.88); line-height: 1.8;
      max-width: 450px; margin-bottom: 2.5rem;
      opacity: 0; animation: fadeUp 0.5s 0.36s forwards;
    }

    .hero-btns {
      display: flex; gap: 1rem; flex-wrap: wrap;
      opacity: 0; animation: fadeUp 0.5s 0.5s forwards;
    }
    .btn-w {
      background: var(--white); color: var(--blue);
      padding: 0.82rem 1.8rem;
      font-size: 0.8rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      transition: background 0.2s, transform 0.15s; display: inline-block;
    }
    .btn-w:hover { background: var(--blue-pale); transform: translateY(-2px); }
    .btn-ol {
      border: 2px solid rgba(255,255,255,0.38); color: var(--white);
      padding: 0.82rem 1.8rem;
      font-size: 0.8rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      transition: border-color 0.2s, background 0.2s; display: inline-block;
    }
    .btn-ol:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

    .hero-stats {
      display: flex; gap: 2.5rem; justify-content: center;
      margin-top: 3rem; padding-top: 2.5rem;
      border-top: 1px solid rgba(255,255,255,0.14);
      opacity: 0; animation: fadeUp 0.5s 0.65s forwards;
    }
    .stat-num {
      font-size: 2rem; font-weight: 900; color: var(--white); line-height: 1;
    }
    .stat-num sup { font-size: 1rem; font-weight: 700; }
    .stat-lbl {
      font-size: 0.69rem; font-weight: 400;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.65); margin-top: 0.25rem;
    }
    .hero { align-items: stretch; min-height: 680px; border-bottom: 3px solid #122b4a; border-right: 3px solid #122b4a; }

    /* Hero-Right: Bild füllt exakt die Höhe des Grid-Feldes */
    .hero-right {
      position: relative;
      overflow: hidden;
      clip-path: polygon(6% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    .hero-right img {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
      transition: transform 0.6s ease;
    }
    .hero-right:hover img { transform: scale(1.06); }
    .t-item h3 { font-size: 1.15rem; font-weight: 700; color: var(--blue); line-height: 1.3; }
    .t-item p { font-size: 0.92rem; font-weight: 300; color: var(--text-lt); line-height: 1.55; }
    .t-more {
      margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      color: var(--blue-lt);
      display: flex; align-items: center; gap: 0.4rem; transition: color 0.2s;
    }
    .t-more svg { width: 13px; height: 13px; transition: transform 0.2s; }
    .t-item:hover .t-more { color: var(--blue); }
    .t-item:hover .t-more svg { transform: translateX(4px); }

    /* ══════════════════════════════════════
       SHARED – Nass-Proportionen
    ══════════════════════════════════════ */
    .sec { padding: 5.5rem 0; }
    .sec.bg-off { background: var(--off); }
    .sec.bg-hdr { background: #edf1f6; }   /* gleich wie Header */
    .sec.bg-white { background: var(--white); }
    .wrap { max-width: 1300px; margin: 0 auto; padding: 0 2.5rem; }

    .eyebrow {
      font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--blue-lt); margin-bottom: 0.7rem;
    }
    h2.heading {
      font-size: clamp(1.6rem, 2.4vw, 2.2rem);
      font-weight: 900; color: var(--blue);
      line-height: 1.22; margin-bottom: 1.2rem;
      letter-spacing: -0.01em;
    }
    .body-text {
      font-size: 1rem; font-weight: 300;
      color: var(--text-lt); line-height: 1.85; max-width: 580px;
    }
    .btn-blue {
      display: inline-block;
      background: var(--blue); color: var(--white);
      padding: 0.82rem 1.9rem;
      font-size: 0.82rem; font-weight: 700;
      letter-spacing: 0.07em; text-transform: uppercase;
      transition: background 0.2s, transform 0.15s; margin-top: 2rem;
    }
    .btn-blue:hover { background: var(--blue-lt); transform: translateY(-2px); }

    /* Einheitlicher Sekundär-Button: "Alle Fachbereiche", "Alle Meldungen" etc. */
    .btn-sec {
      display: inline-flex; align-items: center; gap: 0.5rem;
      border: 2px solid var(--blue);
      color: var(--blue);
      padding: 0.68rem 1.4rem;
      font-size: 0.78rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      transition: background 0.2s, color 0.2s;
      white-space: nowrap; flex-shrink: 0;
    }
    .btn-sec svg { width: 13px; height: 13px; transition: transform 0.2s; }
    .btn-sec:hover { background: var(--blue); color: var(--white); }
    .btn-sec:hover svg { transform: translateX(3px); }

    /* ══════════════════════════════════════
       ÜBER UNS – Split
    ══════════════════════════════════════ */
    .split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
    .split-img { position: relative; overflow: hidden; }
    .split-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s; }
    .split-img:hover img { transform: scale(1.03); }
    .split-img::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(27,63,106,0.28) 0%, transparent 50%);
    }
    .split-body {
      padding: 5rem 4rem 5rem 3.5rem;
      display: flex; flex-direction: column; justify-content: center;
      background: #f0f5fb;
      height: 100%;
      border: 1px solid var(--border);
      box-shadow: 0 2px 16px rgba(27,63,106,0.07);
    }
    .sec.bg-off .split-body { background: var(--off); }
    .sec.bg-hdr .split-body { background: #edf1f6; }

    /* ── Linkliste: in Textfluss integriert,
       gleiche Flucht wie Fließtext ────────── */
    .inline-links {
      margin-top: 1.6rem;
      display: flex; flex-direction: column; gap: 0;
    }
    .inline-links a {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.72rem 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem; font-weight: 400; color: var(--text-lt);
      transition: color 0.18s, padding-left 0.18s;
    }
    .inline-links a:first-child { border-top: 1px solid var(--border); }
    .inline-links a:hover { color: var(--blue-lt); padding-left: 0.3rem; background: linear-gradient(to bottom, #d6e4f0 0%, #edf1f6 100%); border-left-color: var(--blue-lt); }
    .inline-links a svg { width: 13px; height: 13px; opacity: 0.3; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; transform: rotate(180deg) translateX(11px); }
    .inline-links a:hover svg { opacity: 1; transform: rotate(180deg) translateX(14px); }

    /* ══════════════════════════════════════
       FACHBEREICHE
    ══════════════════════════════════════ */
    .fb-head {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 2.5rem;
    }
    .fb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
    .fb-card {
      border: 1px solid var(--border);
      border-top: 3px solid var(--border);
      padding: 1.8rem 1.6rem;
      display: flex; flex-direction: column; gap: 0.8rem;
      background: var(--white);
      transition: border-top-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }
    .fb-card:hover {
      background: var(--off) !important;
      border-top: 2px solid var(--blue) !important;
      color: var(--blue);
    }
    .fb-icon { width: 42px; height: 42px; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .fb-icon svg { width: 20px; height: 20px; color: var(--blue-lt); }
    /* Titel linksbündig, gleiche Flucht wie Icon-linke Kante */
    .fb-title { font-size: 0.95rem; font-weight: 700; color: var(--blue); text-align: left; }
    .fb-text { font-size: 0.84rem; font-weight: 300; color: var(--text-lt); line-height: 1.65; flex: 1; text-align: left; }
    .fb-more { font-size: 0.74rem; font-weight: 700; color: var(--blue-lt); letter-spacing: 0.08em; text-transform: uppercase; display: flex; align-items: center; gap: 0.35rem; }
    .fb-more svg { width: 12px; height: 12px; transition: transform 0.2s; }
    .fb-card:hover .fb-more svg { transform: translateX(4px); }

    /* ══════════════════════════════════════
       AKTUELLES
    ══════════════════════════════════════ */
    .news-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
    .news-all { font-size: 0.77rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-lt); display: flex; align-items: center; gap: 0.4rem; }
    .news-all svg { width: 12px; height: 12px; transition: transform 0.2s; }
    .news-all:hover svg { transform: translateX(4px); }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
    .news-card { border: 1px solid var(--border); background: var(--white); overflow: hidden; display: flex; flex-direction: column; transition: background 0.18s, border-top 0.18s, box-shadow 0.2s; }
    .news-card:hover { background: var(--off) !important; border-top: 2px solid var(--blue) !important; box-shadow: 0 5px 22px rgba(27,63,106,0.1); }
    .news-img { height: 185px; overflow: hidden; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; }
    .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
    .news-card:hover .news-img img { transform: scale(1.05); }
    .news-body { padding: 1.4rem; flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
    .news-date { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-lt); }
    .news-title { font-size: 0.95rem; font-weight: 700; color: var(--blue); line-height: 1.35; }
    .news-text { font-size: 0.82rem; font-weight: 300; color: var(--text-lt); line-height: 1.6; flex: 1; }
    .news-more { margin-top: 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--blue-lt); display: flex; align-items: center; gap: 0.35rem; }
    .news-more svg { width: 12px; height: 12px; transition: transform 0.2s; }
    .news-card:hover .news-more svg { transform: translateX(4px); }

    /* ══════════════════════════════════════
       KONTAKT
    ══════════════════════════════════════ */
    .contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4.5rem; align-items: start; }
    .ci-list { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
    .ci-list li { display: flex; align-items: flex-start; gap: 0.9rem; }
    .ci-icon { width: 34px; height: 34px; flex-shrink: 0; background: var(--blue-pale); display: flex; align-items: center; justify-content: center; }
    .ci-icon svg { width: 14px; height: 14px; color: var(--blue-lt); }
    .ci-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-lt); opacity: 0.6; margin-bottom: 0.12rem; }
    .ci-val { font-size: 0.88rem; color: var(--text); line-height: 1.5; }
    .ci-val a { color: var(--blue-lt); }
    .form-box { background: var(--white); border: 1px solid var(--border); padding: 2.5rem; }
    .form-box h3 { font-size: 1.15rem; font-weight: 900; color: var(--blue); margin-bottom: 1.6rem; letter-spacing: -0.01em; }
    .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
    .fg { margin-bottom: 1rem; }
    .fg label { display: block; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-lt); margin-bottom: 0.38rem; }
    .fg .req { color: var(--blue-lt); }
    .fg input, .fg textarea { width: 100%; border: 1px solid var(--border); padding: 0.7rem 0.9rem; font-family: 'Lato', sans-serif; font-size: 0.87rem; color: var(--text); background: var(--off); outline: none; border-radius: 0; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; }
    .fg input:focus, .fg textarea:focus { border-color: var(--blue-lt); background: #fff; box-shadow: 0 0 0 3px rgba(46,125,190,0.1); }
    .fg input.inv, .fg textarea.inv { border-color: #c0392b; }
    .fg textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
    .err { font-size: 0.69rem; color: #c0392b; margin-top: 0.28rem; display: none; }
    .err.on { display: block; }
    .ds-wrap { display: flex; align-items: flex-start; gap: 0.75rem; background: var(--off); border: 1px solid var(--border); padding: 0.85rem; margin-bottom: 1.2rem; }
    .ds-wrap input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; accent-color: var(--blue); cursor: pointer; }
    .ds-wrap label { font-size: 0.77rem; font-weight: 300; color: var(--text-lt); line-height: 1.55; cursor: pointer; }
    .ds-wrap label a { color: var(--blue-lt); }
    .sub-btn { width: 100%; background: var(--blue); color: var(--white); border: none; padding: 0.88rem; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
    .sub-btn:hover { background: var(--blue-lt); }
    .suc { display: none; text-align: center; padding: 3rem 1rem; }
    .suc.on { display: block; }
    .suc-icon { width: 50px; height: 50px; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.1rem; }
    .suc-icon svg { width: 22px; height: 22px; color: #fff; }
    .suc h3 { font-size: 1.2rem; font-weight: 900; color: var(--blue); margin-bottom: 0.4rem; }
    .suc p { font-size: 0.87rem; font-weight: 300; color: var(--text-lt); }

    /* ══════════════════════════════════════
       FOOTER
    ══════════════════════════════════════ */
    footer {
      background: #1b3f6a;
    }
    /* Footer: 4 Spalten — Info | Karte | Fachbereiche | Unternehmen */
    .foot-top {
      max-width: 1300px; margin: 0 auto; padding: 3rem 2.5rem 2rem;
      display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr;
      gap: 2rem;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      align-items: start;
    }
    .foot-left { display: flex; flex-direction: column; gap: 0.9rem; }
    /* .foot-logo ersetzt durch .foot-brand */
    .foot-desc {
      font-size: 0.95rem; font-weight: 400;
      color: rgba(255,255,255,0.88);
      line-height: 1.8; max-width: 300px;
    }
    /* Firmenname statt Logo-Bild */
    .foot-brand { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.2rem; }
    .foot-brand-main {
      font-size: 1.1rem; font-weight: 900;
      color: var(--white); letter-spacing: 0.02em;
      line-height: 1.2;
    }
    .foot-brand-sub {
      font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }

    /* Google Maps Embed */
    .foot-map { width: 100%; height: 100%; min-height: 200px; border: none; opacity: 0.9; border-radius: 2px; display: block; }

    /* .foot-contact-row nicht mehr genutzt */

    /* Social Media Icons */
    .foot-social {
      display: flex; align-items: center; gap: 0.75rem;
    }
    .social-icon {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.7);
      transition: background 0.2s, color 0.2s, border-color 0.2s;
      flex-shrink: 0;
    }
    .social-icon svg { width: 17px; height: 17px; }
    .social-icon:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.4);
      color: #fff;
    }
    .social-icon[title="LinkedIn"]:hover { background: #0077b5; border-color: #0077b5; }
    .social-icon[title="Instagram"]:hover { background: #e1306c; border-color: #e1306c; }
    .social-icon[title="Xing"]:hover { background: #006567; border-color: #006567; }

    /* Fachbereiche + Unternehmen: rechtsbündig – Textkante = Seitenrand */
    .foot-col { text-align: right; }
    .foot-col h4 {
      font-size: 0.75rem; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(255,255,255,0.95);
      margin-bottom: 1.1rem;
    }
    .foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-end; }
    .foot-col ul a {
      font-size: 0.95rem; font-weight: 400;   /* gleich wie Kontakt-Text */
      color: rgba(255,255,255,0.88);
      transition: color 0.2s; display: block;
    }
    .foot-col ul a:hover { color: #fff; text-decoration: underline; }

    /* Footer-Bottom: heller */
    .foot-bot {
      max-width: 1300px; margin: 0 auto; padding: 1.4rem 2.5rem;
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.95rem;   /* gleich wie Footer-Links */
      color: rgba(255,255,255,0.88);
      flex-wrap: wrap; gap: 0.5rem;
      background: transparent;   /* gleiche Farbe wie Footer */
    }
    .foot-bot a {
      color: rgba(255,255,255,0.85);
      transition: color 0.2s;
    }
    .foot-bot a:hover { color: #fff; text-decoration: underline; }

    /* ══════════════════════════════════════
       ANIMATION & RESPONSIVE
    ══════════════════════════════════════ */

    



    /* ══════════════════════════════════════
       MOBIL
    ══════════════════════════════════════ */
    .mob-btn {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px; height: 36px;
      background: none; border: none;
      cursor: pointer; flex-shrink: 0;
      padding: 6px;
    }
    .mob-btn span {
      display: block;
      width: 22px; height: 2px;
      background: var(--blue);
      border-radius: 2px;
      transition: all 0.25s ease;
    }
    .mob-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .mob-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .mob-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    #mob-nav {
      display: none;
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: #fff;
      z-index: 998;
      overflow-y: auto;
      box-shadow: 0 -2px 20px rgba(0,0,0,0.08);
    }
    #mob-nav.is-open { display: block; }

    .mob-item {
      border-bottom: 1px solid var(--border);
    }
    .mob-item-title {
      display: flex; align-items: center; justify-content: space-between;
      width: 100%; padding: 1rem 1.5rem;
      font-size: 0.9rem; font-weight: 700;
      letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--blue);
      background: none; border: none; cursor: pointer;
      text-align: left;
    }
    .mob-item-title svg { width: 16px; height: 16px; transition: transform 0.2s; flex-shrink: 0; }
    .mob-item-title.is-open svg { transform: rotate(180deg); }

    .mob-sub {
      display: none;
      background: var(--off);
      border-top: 1px solid var(--border);
    }
    .mob-sub.is-open { display: block; }
    .mob-sub a, .mob-direct a {
      display: block;
      padding: 0.85rem 1.5rem 0.85rem 2rem;
      font-size: 0.88rem; font-weight: 400;
      color: var(--text);
      border-bottom: 1px solid var(--border);
      border-left: 3px solid transparent;
      transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .mob-sub a:last-child { border-bottom: none; }
    .mob-sub a:active, .mob-direct a:active {
      border-left-color: var(--blue-lt);
      color: var(--blue);
      background: var(--blue-pale);
    }
    .mob-direct a {
      padding-left: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.85rem;
      letter-spacing: 0.04em;
      color: var(--blue);
    }
    .mob-cta-wrap {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border);
    }
    .mob-cta-wrap a {
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
      background: var(--blue); color: #fff;
      padding: 0.9rem; width: 100%;
      font-size: 0.85rem; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .mob-contact-wrap {
      padding: 1rem 1.5rem;
      background: var(--off);
      display: flex; flex-direction: column; gap: 0.6rem;
    }
    .mob-contact-wrap a {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      font-size: 0.88rem; color: var(--text-lt);
    }
    .mob-contact-wrap svg { width: 14px; height: 14px; color: var(--blue-lt); flex-shrink: 0; }
    .mob-contact-wrap span { font-size: 0.78rem; color: var(--text-lt); }

    @media (max-width: 900px) {
      nav { display: none; }
      .hdr-cta { display: none; }
      .mob-btn { display: flex; }
      .topbar { display: none; }
      .hdr { height: 80px; }
      .logo { height: 80px; }
      .foot-col { text-align: left; }
      .foot-col ul { align-items: flex-start; }
    }


    /* ══════════════════════════════════════
       INFO-LEISTE (3 Boxen)
    ══════════════════════════════════════ */
    .info-bar {
      background: #f5f7fa;
      padding: 0;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .info-bar-inner {
      max-width: 1560px; margin: 0 auto; padding: 0 2.5rem;
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0;
    }
    .info-box {
      background: transparent;
      padding: 1.4rem 2rem;
      display: flex; gap: 1.2rem; align-items: flex-start;
      transition: background 0.2s, border-color 0.2s;
      cursor: pointer;
      border-top: 3px solid transparent;
      border-right: 1px solid var(--border);
    }
    .info-box:last-child { border-right: none; }
    .info-box:hover { background: linear-gradient(to bottom, #d6e4f0 0%, #edf1f6 100%); }
    .info-box-icon {
      flex-shrink: 0;
      width: 48px; height: 48px;
      background: var(--blue);
      display: flex; align-items: center; justify-content: center;
      border-radius: 4px;
      align-self: center;
    }
    .info-box-icon svg { width: 24px; height: 24px; color: #fff; }
    .info-box-content { display: flex; flex-direction: column; gap: 0.35rem; }
    .info-box-tag {
      font-size: 0.9rem; font-weight: 700;
      color: var(--blue); letter-spacing: 0.01em;
      text-transform: none;
    }
    .info-box p {
      font-size: 0.85rem; font-weight: 300;
      color: var(--text-lt); line-height: 1.55; margin: 0;
    }
    @media (max-width: 768px) {
      .info-bar-inner { grid-template-columns: 1fr; }
    }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 1024px) {
      .hero { grid-template-columns: 1fr; }
      .hero-left { padding: 4rem 2.5rem; }
      .split { grid-template-columns: 1fr; }
      .split-img { min-height: 260px; }
      .split-body { padding: 3rem 2rem; }
      .fb-grid { grid-template-columns: repeat(2, 1fr); }
      .news-grid { grid-template-columns: repeat(2, 1fr); }
      .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
      .foot-top { grid-template-columns: 1fr; gap: 2rem; }
      .foot-col { text-align: left; }
      .foot-col ul { align-items: flex-start; }
    }
    @media (max-width: 768px) {
      nav { display: none; }
      .fb-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; }
      .frow { grid-template-columns: 1fr; }
      .fb-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
    }
  /* MOBILE-FIX-INSERTED */
    /* ═══════════════════════════════════════
       MOBILE FIX – überschreibt alles
    ═══════════════════════════════════════ */
    @media (max-width: 900px) {
      /* Kein horizontales Scrollen */
      html, body { overflow-x: hidden; max-width: 100vw; }
      * { box-sizing: border-box; }

      /* Padding reduzieren */
      .wrap, .sec > div, section > div {
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
      }

      /* Alle zweispaltigen Layouts → einspaltlg */
      [style*="grid-template-columns:1fr 380px"],
      [style*="grid-template-columns: 1fr 380px"],
      [style*="grid-template-columns:1fr 1fr"],
      [style*="grid-template-columns: 1fr 1fr"],
      [style*="grid-template-columns:3fr 2fr"],
      [style*="grid-template-columns: 3fr 2fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Gap verringern */
      [style*="gap:4rem"] { gap: 2rem !important; }
      [style*="gap: 4rem"] { gap: 2rem !important; }

      /* Bilder voll breit */
      .foto-wrap, .foto-wrap img { max-height: 260px; }

      /* Sidebar unter Content */
      .sidebar-box, .sidebar-contact { margin-top: 0; }

      /* Hero Text */
      .hero-left, [style*="padding:5rem"] {
        padding: 2.5rem 1.2rem !important;
      }
      h1, .h1 { font-size: 1.9rem !important; line-height: 1.25 !important; }
      h2, .heading { font-size: 1.5rem !important; line-height: 1.3 !important; }

      /* CTA-Buttons nebeneinander auf Mobile */
      .cta-inner { flex-direction: column; align-items: stretch; }
      .cta-inner a { text-align: center; }

      /* Fußzeile */
      .foot-top { grid-template-columns: 1fr !important; }
      .foot-bot { flex-direction: column; gap: 0.8rem; }
      .foot-bot div { flex-wrap: wrap; gap: 0.5rem; }

      /* Subnav scrollbar */
      .subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .subnav-inner { padding: 0 1.2rem; }

      /* Stats 2-spaltig */
      .stats-inner { grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }

      /* Karten-Grid */
      .fb-grid, .news-grid, [style*="grid-template-columns: repeat(3"],
      [style*="grid-template-columns:repeat(3"] {
        grid-template-columns: 1fr !important;
      }

      /* Thumbnail-Galerie bleibt 3-spaltig aber kleiner */
      [style*="grid-template-columns:repeat(3,1fr)"] { gap: 0.3rem !important; }

      /* Inline-Style Grids im Content */
      [style*="display:grid"][style*="380px"] {
        grid-template-columns: 1fr !important;
      }

      /* Kontakt-Formular */
      [style*="grid-template-columns:1fr 1fr"][style*="gap:0.5rem"] {
        grid-template-columns: 1fr !important;
      }

      /* Breadcrumb */
      .breadcrumb { font-size: 0.72rem; }

      /* Sidebar-Kontakt-Box volle Breite */
      .sidebar-contact { border-radius: 0; }

      /* Inline-Links (Fachbereich-Nav in Sidebar) */
      .inline-links a { font-size: 0.85rem; }

      /* Fakten-Leiste */
      [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
      }

      /* CTA-Banner */
      [style*="display:flex"][style*="justify-content:space-between"] {
        flex-wrap: wrap;
        gap: 1rem;
      }

      /* Keine fixed Breite für irgendwas */
      [style*="max-width:380px"] { max-width: 100% !important; }
      [style*="max-width: 380px"] { max-width: 100% !important; }
      [style*="width:380px"] { width: 100% !important; }
    }

    @media (max-width: 480px) {
      h1, .h1 { font-size: 1.6rem !important; }
      h2, .heading { font-size: 1.3rem !important; }
      .stats-inner { grid-template-columns: 1fr !important; }
      [style*="padding:3rem"] { padding: 1.5rem 1.2rem !important; }
      [style*="padding: 3rem"] { padding: 1.5rem 1.2rem !important; }
    }

    /* END-MOBILE-FIX */
  </style>
<!-- Bearbeitung durch ChatGPT: Hero-Untertext gekürzt. Slogan bleibt im großen Hero-Titel, Wiederholung im Fließtext entfernt. Design, CSS, Bilder und Layout unverändert. -->
<!-- TOPBAR: zentriert, gut lesbar -->
<!-- HEADER -->
<!-- HERO -->
<section class="hero">
<div class="hero-left">
<div class="hero-eyebrow">Diederich &amp; Wellendorf Gruppe - Hamburg Bahrenfeld</div>
<h1 class="hero-title">
      Elektrotechnik<br/>
      Anlagen<br/>
      Service
    </h1>
<p class="hero-text">Die Diederich &amp; Wellendorf Gruppe errichtet, wartet und betreut elektrotechnische Infrastruktur fuer Industrie, Gewerbe und Bestandsanlagen – von Mittelspannung, Transformatoren und Niederspannung bis Sicherheitsbeleuchtung, Ladeinfrastruktur und technischer Instandhaltung.</p>
<div class="hero-btns">
<a class="btn-w" href="<?php echo esc_url(home_url('/anfrage/')); ?>">Anfragen</a>
<a class="btn-ol" href="<?php echo esc_url(home_url('/fachbereiche/')); ?>">Fachbereiche entdecken</a>
</div>
<div class="hero-stats">
<div><div class="stat-num">2000<sup></sup></div><div class="stat-lbl">Gegründet</div></div>
<div><div class="stat-num">25</div><div class="stat-lbl">Mitarbeiter</div></div>
<div><div class="stat-num">6</div><div class="stat-lbl">Fachbereiche</div></div>
</div>
</div>
<div class="hero-right">
<img alt="Diederich &amp; Wellendorf Elektrotechnik Hamburg" src="<?php echo esc_url(dw_image_url('startseite-headerbild')); ?>"/>
</div>
</section>
<!-- INFO-LEISTE -->
<div class="info-bar">
<div class="info-bar-inner">
<a class="info-box" href="<?php echo esc_url(home_url('/ueber-uns/')); ?>">
<div class="info-box-icon"><svg aria-hidden="true" class="dw-info-icon-svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24">
<circle cx="12" cy="7.2" r="3.4"></circle>
<path d="M5.2 20.5a6.8 6.8 0 0 1 13.6 0"></path>
</svg></div>
<div class="info-box-content">
<div class="info-box-tag">Über uns</div>
<p>Inhabergeführter Mittelstand aus Hamburg-Bahrenfeld für Gewerbe, Industrie und Bestandsanlagen.</p>
</div>
</a>
<a class="info-box info-box-fachbereiche" href="<?php echo esc_url(home_url('/fachbereiche/sicherheitsbeleuchtung/')); ?>">
<div class="info-box-icon"><svg aria-hidden="true" class="dw-info-icon-svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24">
<rect height="17" rx="1.2" width="13" x="5.5" y="3.5"></rect>
<path d="M8.2 7h7.6"></path>
<path d="M8.2 10.4h7.6"></path>
<path d="M8.2 13.8h7.6"></path>
<path d="M8.2 17.2h3"></path>
<path d="M14 17.2h1.8"></path>
</svg></div>
<div class="info-box-content">
<div class="info-box-tag">Fachbereiche</div>
<p>Mittelspannung, Niederspannung, Sicherheitsbeleuchtung und Ladeinfrastruktur.</p>
</div>
</a>
<a class="info-box" href="<?php echo esc_url(home_url('/karriere/')); ?>">
<div class="info-box-icon"><svg aria-hidden="true" class="dw-info-icon-svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24">
<path d="M8.5 7V5.8A1.8 1.8 0 0 1 10.3 4h3.4a1.8 1.8 0 0 1 1.8 1.8V7"></path>
<rect height="12.5" rx="1.3" width="16" x="4" y="7"></rect>
<path d="M4 12h16"></path>
<path d="M10 12v2h4v-2"></path>
</svg></div>
<div class="info-box-content">
<div class="info-box-tag">Karriere</div>
<p>Ausbildung, Fachkräfte und Entwicklung in einem professionellen Elektrotechnikbetrieb.</p>
</div>
</a>
<a class="info-box" href="<?php echo esc_url(home_url('/anfrage/')); ?>">
<div class="info-box-icon"><svg aria-hidden="true" class="dw-info-icon-svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" viewbox="0 0 24 24">
<path d="M5.5 4.5h8.2l4.8 4.8v10.2H5.5z"></path>
<path d="M13.7 4.5v4.8h4.8"></path>
<path d="M8.5 13h7"></path>
<path d="M8.5 16h5"></path>
</svg></div>
<div class="info-box-content">
<div class="info-box-tag">Anfragen</div>
<p>Anfragen zu Projekten, Wartungen, Bestandsanlagen und technischen Leistungen.</p>
</div>
</a>
</div>
</div>
<!-- ÜBER UNS -->
<section class="sec bg-hdr" style="padding:5rem 0;overflow:hidden;">
<div class="split" style="max-width:1300px;margin:0 auto;overflow:hidden;">
<div class="split-img">
<?php $dw_home_about_image = dw_config_image_url('/', 'ueber-uns-bild'); ?>
<?php if ($dw_home_about_image) : ?>
<img alt="DW Elektrotechnik Hamburg" src="<?php echo esc_url($dw_home_about_image); ?>" style="width:100%;height:100%;object-fit:cover;display:block;"/>
<?php else : ?>
<div class="dw-config-gallery-empty" aria-hidden="true" style="height:100%;"></div>
<?php endif; ?>
<div class="dji-overlay"></div>
</div>
<div class="split-body">
<p class="eyebrow">Über uns</p>
<h2 class="heading">Elektrotechnik, Anlagen und Service mit technischer Verantwortung</h2>
<p class="body-text">
          Diederich &amp; Wellendorf wurde von Jörg Diederich und Günther Wellendorf gegründet – mit Erfahrung aus der Gebäudetechnik der Siemens AG. Heute führen Erik Vollsen und Fynn Zörner die Diederich &amp; Wellendorf Gruppe am Standort Hamburg-Bahrenfeld. Der Schwerpunkt liegt auf elektrotechnischen Anlagen für Gewerbe, Industrie und gewerbliche Betreiber.
        </p>
<!-- Links in gleicher Flucht wie Fließtext, kein Icon-Chaos -->
<div class="inline-links">
<a href="<?php echo esc_url(home_url('/unternehmen/')); ?>">Unternehmen <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
<a href="<?php echo esc_url(home_url('/aktuelles/')); ?>">Aktuelles <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
<a href="<?php echo esc_url(home_url('/karriere/')); ?>">Karriere <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
<a href="<?php echo esc_url(home_url('/downloads/')); ?>">Downloads <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
</div>
</div>
</div>
</section>
<!-- FACHBEREICHE -->
<section class="sec bg-off">
<div class="wrap">
<div class="fb-head">
<div>
<p class="eyebrow">Fachbereiche</p>
<h2 class="heading" style="margin-bottom:0;">Elektrotechnische Infrastruktur im Überblick.</h2>
</div>
<a class="btn-sec" href="<?php echo esc_url(home_url('/fachbereiche/')); ?>">Alle Fachbereiche <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
</div>
<div class="fb-grid">
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/mittelspannungsanlagen/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'mittelspannungsanlagen')); ?>"/></div>
<div class="fb-title">Mittelspannungsanlagen</div>
<p class="fb-text">Errichtung, Umbau, Austausch und Wartung von Mittelspannungsanlagen, Trafostationen und Transformatoren – inklusive Netzbetreiberabstimmung und Dokumentation.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/niederspannungsanlagen/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'niederspannungsanlagen')); ?>"/></div>
<div class="fb-title">Niederspannungsanlagen</div>
<p class="fb-text">NSHV, Energieverteilungen, Unterverteilungen, grosse Kabelquerschnitte, Beleuchtungsanlagen und gewerbliche Elektroinstallation, Verkabelung und gewerbliche Elektroinstallation im Bestand und Neubau.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/sicherheitsbeleuchtung/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'sicherheitsbeleuchtung')); ?>"/></div>
<div class="fb-title">Sicherheits- &amp; Notbeleuchtung</div>
<p class="fb-text">Einzelbatterie-, Gruppenbatterie- und Zentralbatterieanlagen fuer Gewerbe, Industrie und Bestandsgebaeude – inklusive Errichtung, Modernisierung und technischer Betreuung.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/ladeinfrastruktur/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'ladeinfrastruktur')); ?>"/></div>
<div class="fb-title">Ladeinfrastruktur</div>
<p class="fb-text">AC- und DC-Ladeinfrastruktur fuer Unternehmen, Fuhrparks, Gewerbe und Industrie – inklusive Leistungserweiterung, Netzanschluss und Integration in bestehende Energieverteilungen.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/kommunikationstechnik/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'kommunikationstechnik')); ?>"/></div>
<div class="fb-title">Kommunikationstechnik</div>
<p class="fb-text">Kommunikationsinfrastruktur, strukturierte Verkabelung und technische Netzwerkinfrastruktur fuer Gewerbe, Industrie und Bestandsgebaeude.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
<a class="fb-card" href="<?php echo esc_url(home_url('/fachbereiche/sicherheitstechnik/')); ?>">
<div class="fb-icon"><img alt="" aria-hidden="true" src="<?php echo esc_url(dw_config_image_url('fachbereiche/icons/', 'sicherheitstechnik')); ?>"/></div>
<div class="fb-title">Sicherheitstechnik</div>
<p class="fb-text">Technische Sicherheitsloesungen fuer Gewerbe- und Industrieobjekte – in Abstimmung mit langjaehrigen Partnern und eingebunden in die Gebaeudeinfrastruktur.</p>
<span class="fb-more">Mehr erfahren <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
</div>
</div>
</section>
<!-- AKTUELLES -->
<section class="sec bg-white">
<div class="wrap">
<div class="news-head">
<div>
<p class="eyebrow">Aktuelles</p>
<h2 class="heading" style="margin-bottom:0;">Aktuelle Meldungen.</h2>
</div>
<a class="btn-sec" href="<?php echo esc_url(home_url('/aktuelles/')); ?>">Alle Meldungen <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>
</div>
<div class="news-grid">
<?php
$dw_news = new WP_Query(array(
  'post_type'           => 'post',
  'post_status'         => 'publish',
  'posts_per_page'      => 3,
  'orderby'             => 'date',
  'order'               => 'DESC',
  'ignore_sticky_posts' => true,
));
if ($dw_news->have_posts()) : while ($dw_news->have_posts()) : $dw_news->the_post();
  $dw_img = dw_get_post_image_url(get_the_ID(), 'large');
?>
<a class="news-card" href="<?php the_permalink(); ?>">
<div class="news-img"><?php if ($dw_img) : ?><img alt="<?php echo esc_attr(get_the_title()); ?>" src="<?php echo esc_url($dw_img); ?>"/><?php endif; ?></div>
<div class="news-body">
<div class="news-date"><?php echo esc_html(get_the_date('d.m.Y')); ?></div>
<div class="news-title"><?php the_title(); ?></div>
<p class="news-text"><?php echo esc_html(wp_trim_words(get_the_excerpt(), 24)); ?></p>
<span class="news-more">Weiterlesen <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</div>
</a>
<?php endwhile; wp_reset_postdata(); else : ?>
<p class="body-text">Aktuell sind keine Meldungen veröffentlicht.</p>
<?php endif; ?>
</div>
</div>
</section>
<!-- KONTAKT -->
<section class="sec bg-off">
<div class="wrap">
<div class="contact-grid">
<div>
<p class="eyebrow">Kontakt</p>
<h2 class="heading">Technische Anfrage stellen</h2>
<p class="body-text">Rufen Sie uns an oder senden Sie uns eine Anfrage zu Mittelspannung, Niederspannung, Sicherheitsbeleuchtung, Ladeinfrastruktur, Kommunikationstechnik, Sicherheitstechnik oder technischer Instandhaltung.</p>
<ul class="ci-list">
<li>
<div class="ci-icon"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path><circle cx="12" cy="10" r="3"></circle></svg></div>
<div><div class="ci-label">Adresse</div><div class="ci-val">Mendelssohnstraße 15c · 22761 Hamburg-Bahrenfeld</div></div>
</li>
<li>
<div class="ci-icon"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.007 1.16A2 2 0 012 .82h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"></path></svg></div>
<div><div class="ci-label">Telefon</div><div class="ci-val"><a href="tel:040800048585">+49 (0) 40 / 800 04 85–85</a></div></div>
</li>
<li>
<div class="ci-icon"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg></div>
<div><div class="ci-label">E-Mail</div><div class="ci-val"><a class="tb-item" href="mailto:info@dw-elektro.de"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>info@dw-elektro.de</a></div></div>
</li>
<li>
<div class="ci-icon"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg></div>
<div><div class="ci-label">Öffnungszeiten</div><div class="ci-val">Mo – Do 08:00–16:00 Uhr  ·  Fr 08:00–12:00 Uhr</div></div>
</li>
</ul>
</div>
<div class="form-box">
<h3>Jetzt kontaktieren</h3>
<div class="dw-home-forminator">
<?php echo do_shortcode('[forminator_form id="1472"]'); ?>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<!-- MOBILES MENÜ -->
<div id="mobNav" style="display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;z-index:9999;overflow-y:auto;border-top:3px solid #1b3f6a;box-shadow:0 -4px 20px rgba(0,0,0,0.15);">
<!-- Fachbereiche Accordion -->
<div style="border-bottom:1px solid #dde4ec;">
<button onclick="var s=document.getElementById('mobSub');var a=document.getElementById('mobArrow');var open=s.style.display==='block';s.style.display=open?'none':'block';a.style.transform=open?'':'rotate(180deg)';" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:none;border:none;cursor:pointer;font-size:0.88rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#1b3f6a;">
      Fachbereiche
      <svg fill="none" height="16" id="mobArrow" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" style="transition:transform 0.2s;flex-shrink:0;" viewbox="0 0 24 24" width="16"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div id="mobSub" style="display:none;background:#f5f7fa;border-top:1px solid #dde4ec;">
<a href="<?php echo esc_url(home_url('/fachbereiche/mittelspannungsanlagen/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Mittelspannungsanlagen</a>
<a href="<?php echo esc_url(home_url('/fachbereiche/niederspannungsanlagen/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Niederspannungsanlagen</a>
<a href="<?php echo esc_url(home_url('/fachbereiche/sicherheitsbeleuchtung/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Sicherheits- &amp; Notbeleuchtung</a>
<a href="<?php echo esc_url(home_url('/fachbereiche/ladeinfrastruktur/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Ladeinfrastruktur</a>
<a href="<?php echo esc_url(home_url('/fachbereiche/kommunikationstechnik/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Kommunikationstechnik</a>
<a href="<?php echo esc_url(home_url('/fachbereiche/sicherheitstechnik/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Sicherheitstechnik</a>
</div>
</div>
<!-- Wartung und Pruefung Accordion -->
<div style="border-bottom:1px solid #dde4ec;">
<button onclick="var s=document.getElementById('mobSubWartung');var a=document.getElementById('mobArrowWartung');var open=s.style.display==='block';s.style.display=open?'none':'block';a.style.transform=open?'':'rotate(180deg)';" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:none;border:none;cursor:pointer;font-size:0.88rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#1b3f6a;">
      Wartung &amp; Prüfung
      <svg fill="none" height="16" id="mobArrowWartung" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" style="transition:transform 0.2s;flex-shrink:0;" viewbox="0 0 24 24" width="16"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div id="mobSubWartung" style="display:none;background:#f5f7fa;border-top:1px solid #dde4ec;">
<a href="<?php echo esc_url(home_url('/wartung-pruefung/mittelspannungsanlagen/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Mittelspannungsanlagen</a>
<a href="<?php echo esc_url(home_url('/wartung-pruefung/niederspannungsanlagen/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Niederspannungsanlagen</a>
<a href="<?php echo esc_url(home_url('/wartung-pruefung/sicherheitsbeleuchtung/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Sicherheitsbeleuchtung</a>
<a href="<?php echo esc_url(home_url('/wartung-pruefung/ladeinfrastruktur/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Ladeinfrastruktur</a>
<a href="<?php echo esc_url(home_url('/wartung-pruefung/ortsveraenderliche-betriebsmittel/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;">Ortsveränderliche Betriebsmittel</a>
</div>
</div>
<!-- Über uns Accordion -->
<div style="border-bottom:1px solid #dde4ec;">
<button onclick="var s=document.getElementById('mobSubUU');var a=document.getElementById('mobArrowUU');var open=s.style.display==='block';s.style.display=open?'none':'block';a.style.transform=open?'':'rotate(180deg)';" style="width:100%;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:none;border:none;cursor:pointer;font-size:0.88rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#1b3f6a;">
      Über uns
      <svg fill="none" height="16" id="mobArrowUU" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" style="transition:transform 0.2s;flex-shrink:0;" viewbox="0 0 24 24" width="16"><polyline points="6 9 12 15 18 9"></polyline></svg>
</button>
<div id="mobSubUU" style="display:none;background:#f5f7fa;border-top:1px solid #dde4ec;">
<a href="<?php echo esc_url(home_url('/unternehmen/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;border-bottom:1px solid #dde4ec;">Unternehmen</a>
<a href="<?php echo esc_url(home_url('/aktuelles/')); ?>" style="display:block;padding:0.8rem 1.5rem 0.8rem 2rem;font-size:0.88rem;color:#1c2b3a;">Aktuelles</a>
</div>
</div>
<!-- Direkte Links -->
<a href="<?php echo esc_url(home_url('/karriere/')); ?>" style="display:block;padding:1rem 1.5rem;font-size:0.88rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#1b3f6a;border-bottom:1px solid #dde4ec;">Karriere</a>
<a href="<?php echo esc_url(home_url('/downloads/')); ?>" style="display:block;padding:1rem 1.5rem;font-size:0.88rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#1b3f6a;border-bottom:1px solid #dde4ec;">Downloads</a>
<a href="<?php echo esc_url(home_url('/kontakt/')); ?>" style="display:block;padding:1rem 1.5rem;font-size:0.88rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#1b3f6a;border-bottom:1px solid #dde4ec;">Kontakt</a>
<!-- CTA -->
<div style="padding:1rem 1.5rem;border-bottom:1px solid #dde4ec;">
<a href="<?php echo esc_url(home_url('/anfrage/')); ?>" style="display:flex;align-items:center;justify-content:center;gap:0.5rem;background:#1b3f6a;color:#fff;padding:0.9rem;font-size:0.85rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;">
<svg fill="none" height="15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewbox="0 0 24 24" width="15"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg> Anfragen
    </a>
</div>
<!-- Kontakt -->
<div style="padding:1rem 1.5rem;background:#f5f7fa;display:flex;flex-direction:column;gap:0.6rem;">
<a href="tel:040800048585" style="font-size:0.88rem;color:#5a6a7a;display:flex;align-items:center;gap:0.5rem;"><svg fill="none" height="14" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.007 1.16A2 2 0 012 .82h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"></path></svg>040 / 800 04 85–85</a>
<a href="mailto:info@dw-elektro.de" style="font-size:0.88rem;color:#5a6a7a;display:flex;align-items:center;gap:0.5rem;"><svg fill="none" height="14" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>info@dw-elektro.de</a>
<span style="font-size:0.78rem;color:#5a6a7a;display:flex;align-items:center;gap:0.5rem;"><svg fill="none" height="14" stroke="#2e7dbe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="14"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>Mo – Do 08:00–16:00 Uhr · Fr 08:00–12:00 Uhr</span>
</div>
</div>
@media (max-width: 900px) {
  #mobNav {
    left: .75rem !important;
    right: .75rem !important;
    bottom: .75rem !important;
    max-height: calc(100vh - 5.5rem) !important;
    border-radius: 8px !important;
    overflow-x: hidden !important;
  }
}