/* ============================================================
     MWG-Webauftritt — Entwurf 6
     Vollbild-Hero, aufklappbare Leistungen, Netz-Schaubild,
     Anfrage-Formular
     ============================================================ */
  :root {
    --weiss:      #FFFFFF;
    --grund-2:    #F4F7FB;
    --navy:       #0E1B2C;
    --text:       #1D2939;
    --grau:       #5B6675;
    --grau-hell:  #98A2B3;
    --rand:       #E4E9F0;
    --blau:       #0B5FD0;
    --blau-tief:  #0A4CA6;
    --blau-zart:  #E8F0FC;

    --display: "Archivo", "Segoe UI", system-ui, Arial, sans-serif;
    --body:    "Inter", "Segoe UI", system-ui, Arial, sans-serif;

    --max: 1400px;

    --breit:    var(--max);
    --radius: 16px;
    --schatten: 0 1px 2px rgba(14,27,44,.05), 0 12px 32px rgba(14,27,44,.07);
    --schatten-hover: 0 3px 6px rgba(14,27,44,.09), 0 24px 56px rgba(14,27,44,.19);

    /* Vertikaler Rhythmus: ein Mass fuer alle Abschnitte */
    --sektion-abstand: 104px;
    --band-abstand:    calc(var(--sektion-abstand) / 2);

    /* Klebende Kopfzeile: .kopf 76px Zeile + 1px unterer Rand.
       Die Anker-Sprungziele rechnen damit. */
    --kopf-hoehe: 77px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; overflow-y: scroll; scrollbar-gutter: stable; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--body);
    color: var(--text);
    background: var(--weiss);
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--blau-zart); }

  a { color: var(--blau); }
  a:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
  img { max-width: 100%; }

  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 34px; }

  .etikett {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 12.5px;
    color: var(--blau);
  }

  h2 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 680;
    font-size: clamp(30px, 3.6vw, 44px);
    line-height: 1.12;
    letter-spacing: -.012em;
    color: var(--navy);
    margin: 12px 0 14px;
  }
  .deck { color: var(--grau); font-size: 17.5px; }

  /* ---------- Kopfzeile ---------- */
  header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--weiss);
    border-bottom: 1px solid var(--rand);
  }
  .kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .marke { display: flex; align-items: center; text-decoration: none; }
  .marke img { height: 48px; width: 201px; display: block; }
  nav { display: flex; align-items: center; gap: 6px; }
  nav a {
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    padding: 9px 15px;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
  }
  nav a:hover { color: var(--blau); }
  .knopf {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    border-radius: 10px;
    padding: 13px 26px;
    border: none;
    cursor: pointer;
    transition: background .22s ease, transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  .knopf .pfeil { transition: transform .22s ease; }
  .knopf:hover .pfeil { transform: translateX(4px); }
  .knopf--voll {
    background: var(--blau);
    color: #fff;
    box-shadow: 0 8px 22px rgba(11,95,208,.28);
  }
  .knopf--voll:hover { background: var(--blau-tief); transform: translateY(-1px); }
  .knopf--glas {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    backdrop-filter: blur(6px);
  }
  .knopf--glas:hover { border-color: rgba(255,255,255,.8); transform: translateY(-1px); }
  nav .knopf--voll { margin-left: 12px; padding: 11px 22px; }

  /* ---------- Hero: Vollbild mit Hintergrundfoto ---------- */
  .hero {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
  }
  .hero .hintergrund {
    position: absolute; inset: 0;
    background: url("bilder/foto-muenchen-daemmerung.jpg") center 30% / cover no-repeat #10141B;
  }
  .hero .schleier {
    position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(7,13,25,.94) 0%, rgba(7,13,25,.78) 42%, rgba(7,13,25,.38) 75%, rgba(7,13,25,.55) 100%),
      linear-gradient(0deg, rgba(7,13,25,.55) 0%, transparent 30%);
  }
  .hero .wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 110px;
    padding-bottom: 110px;
  }
  .hero .inhalt { max-width: 680px; }
  .hero .etikett { color: #8FBAF2; }
  .hero h1 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 700;
    font-size: clamp(40px, 5.4vw, 66px);
    line-height: 1.05;
    letter-spacing: -.015em;
    margin: 18px 0 22px;
  }
  .hero h1 em { font-style: normal; color: #7FB2E8; }
  .hero .lead {
    color: rgba(222,231,243,.92);
    font-size: 19px;
    max-width: 30em;
    margin-bottom: 30px;
  }
  .haken-zeile { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 36px; }
  .haken {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 500;
    color: #E8EEF6;
  }
  .haken svg { width: 19px; height: 19px; flex: 0 0 auto; }
  .aktionen { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero .bild-nachweis {
    position: absolute;
    right: 24px; bottom: 18px;
    z-index: 2;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }

  /* Einstiegsanimation */
  .hero .inhalt > * { opacity: 0; transform: translateY(20px); animation: auftauchen .8s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero .inhalt > *:nth-child(1) { animation-delay: .05s; }
  .hero .inhalt > *:nth-child(2) { animation-delay: .15s; }
  .hero .inhalt > *:nth-child(3) { animation-delay: .27s; }
  .hero .inhalt > *:nth-child(4) { animation-delay: .38s; }
  .hero .inhalt > *:nth-child(5) { animation-delay: .48s; }
  @keyframes auftauchen { to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .hero .inhalt > * { animation: none; opacity: 1; transform: none; }
  }

  /* ---------- Logo-Band ---------- */
  .band { padding: var(--band-abstand) 0; border-bottom: 1px solid var(--rand); }
  .band .label {
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--grau);
    margin-bottom: 30px;
  }
  .band__fenster {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .band__spur {
    display: flex;
    width: max-content;
    align-items: stretch;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    will-change: transform;
  }
  .band__spur.zieht { cursor: grabbing; }
  .band-tipp {
    position: fixed;
    z-index: 90;
    max-width: 280px;
    background: var(--navy);
    color: rgba(255, 255, 255, .75);
    font-size: 13.5px;
    line-height: 1.45;
    padding: 9px 13px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(14,27,44,.25);
    pointer-events: none;
  }
  .band-tipp[hidden] { display: none; }
  .band-tipp strong { display: block; color: #fff; font-size: 14.5px; margin-bottom: 3px; }
  .kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 34px;
    min-width: 150px;
  }
  .kachel img { height: 62px; width: 170px; object-fit: contain; }
  .kachel .unter {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grau-hell);
    white-space: nowrap;
  }

  /* ---------- Leistungen ---------- */
  section { padding: var(--sektion-abstand) 0; }
  /* Anker-Sprungziele der Navigation: die OBERKANTE der Sektion schliesst
     buendig mit der Unterkante der klebenden Kopfzeile ab — der volle
     Innenabstand der Sektion bleibt als bewusster Abstand sichtbar
     (Andreas, 26.08.). Ohne diese Regel verschwaende die Oberkante hinter
     der Kopfzeile. */
  section[id] {
    scroll-margin-top: var(--kopf-hoehe);
  }
  .abschnitt-kopf { margin-bottom: 56px; }
  .loesung {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
    padding: 44px 0;
  }
  .loesung + .loesung { border-top: 1px solid var(--rand); }
  .loesung:nth-child(even) .bildseite { order: 2; }
  .bildpanel {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
    aspect-ratio: 16 / 10;
    background: linear-gradient(155deg, #232B38, #171E29);
  }
  .bildpanel svg.grafik { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bild-tag {
    position: absolute;
    left: 16px; bottom: 14px;
    z-index: 2;
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    background: rgba(14,27,44,.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    padding: 6px 13px;
    white-space: nowrap;
    max-width: calc(100% - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .loesung h3 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 660;
    font-size: clamp(24px, 2.6vw, 32px);
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--navy);
    margin: 10px 0 12px;
  }
  .loesung .textseite > p { color: var(--grau); font-size: 16.5px; margin-bottom: 20px; max-width: 34em; }
  .loesung ul { list-style: none; margin-bottom: 26px; }
  .loesung li {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--text);
  }
  .loesung li svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px; }
  .mehr {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    color: var(--blau);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .mehr .pfeil { transition: transform .22s ease; }
  .mehr:hover .pfeil { transform: translateX(4px); }

  /* Außerdem: zum Aufklappen */
  .aufklapp {
    margin-top: 44px;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    background: var(--grund-2);
    overflow: hidden;
  }
  .aufklapp summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 30px;
    font-family: var(--display);
    font-weight: 640;
    font-size: 18px;
    color: var(--navy);
  }
  .aufklapp summary::-webkit-details-marker { display: none; }
  .aufklapp summary .plus {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: 999px;
    background: var(--weiss);
    border: 1px solid var(--rand);
    display: grid;
    place-items: center;
    color: var(--blau);
    font-size: 20px;
    line-height: 1;
    transition: transform .25s ease;
  }
  .aufklapp[open] summary .plus { transform: rotate(45deg); }
  .aufklapp .innenraum {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 4px 30px 28px;
  }
  .aufklapp .posten {
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: 12px;
    padding: 18px 20px;
  }
  .aufklapp .posten b {
    display: block;
    font-family: var(--display);
    font-weight: 640;
    font-size: 15.5px;
    color: var(--navy);
    margin-bottom: 4px;
  }
  .aufklapp .posten span { font-size: 14px; color: var(--grau); }

  /* Leistungs-Raster: neun Karten, drei mal drei */
  /* ---------- Leistungen: drei Kernleistungen, sechs in einer Reihe ---------- */
  .kopf-breit {
    max-width: var(--breit); margin: 0 auto; padding: 0 34px 48px;
  }
  .kopf-breit h2 {
    font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08;
    letter-spacing: -.02em; margin: 10px 0 0;
  }
  .kopf-breit p { color: var(--grau); font-size: 17px; margin: 12px 0 0; max-width: 46em; }
  #leistungen .kopf-breit p { max-width: none; }
  .ef-band .etikett { color: #8FBAF2; }
  #netzwerk .etikett, #kontakt .etikett { color: #8FBAF2; }

  /* Ueber uns: Fliesstext, etwas praesenter als eine Abschnitts-Einleitung */
  #ueber-uns { padding: var(--sektion-abstand) 0; background: var(--grund-2); }
  /* letzter Kopf im Abschnitt: keine zusaetzliche Fusszeile */
  #ueber-uns .kopf-breit { padding-bottom: 0; }
  .kopf-breit p.ueber-text {
    color: var(--text);
    font-size: 19px;
    line-height: 1.72;
    max-width: 52em;
    margin-top: 18px;
  }

  .kern {
    max-width: var(--breit); margin: 0 auto; padding: 0 34px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
  }
  .kb {
    text-decoration: none; color: inherit;
    border-top: 2px solid var(--navy); padding-top: 22px; display: block;
  }
  .kb h3 {
    font-family: var(--display); font-variation-settings: "wdth" 104;
    font-weight: 650; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12;
    color: var(--navy); margin: 0 0 12px; letter-spacing: -.01em;
    transition: color .18s ease;
  }
  .kb p { color: var(--grau); font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
  .kb-mehr { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--blau); }
  .kb:hover h3 { color: var(--blau); }
  .kb:hover .kb-mehr { text-decoration: underline; }

  .weiter {
    max-width: var(--breit); margin: 40px auto 0; padding: 0 34px;
    display: grid; grid-template-columns: repeat(7, 1fr);
  }
  .wz {
    padding: 20px 18px 4px;
    border-top: 1px solid var(--rand); border-left: 1px solid var(--rand);
    font-family: var(--display); font-variation-settings: "wdth" 104;
    font-weight: 600; font-size: 15.5px; line-height: 1.25;
    color: var(--navy); text-decoration: none;
    transition: color .18s ease, background .18s ease;
  }
  .wz:first-child { border-left: 0; padding-left: 0; }
  .wz:hover { color: var(--blau); background: var(--grund-2); }

  /* ---------- Einsatzfelder: randloses dunkles Band ---------- */
  .ef-band { background: var(--navy); color: #fff; padding: var(--sektion-abstand) 0; }
  .ef-band .innen { max-width: var(--breit); margin: 0 auto; }
  .ef-band .kopf-breit { max-width: none; }
  .ef-band h2 { color: #fff; }
  .ef-band .kopf-breit p { color: rgba(255,255,255,.62); }
  .ef-reihe {
    max-width: var(--breit); margin: 0 auto; padding: 0 34px;
    display: grid; grid-template-columns: repeat(5, 1fr);
  }
  .ef { padding: 0 26px; border-left: 1px solid rgba(255,255,255,.16); }
  .ef:first-child { padding-left: 0; border-left: 0; }
  .ef:last-child { padding-right: 0; }
  .ef h3 {
    font-family: var(--display); font-variation-settings: "wdth" 104;
    font-weight: 650; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.15;
    color: #fff; margin: 0 0 12px;
  }
  .ef-kurz { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.88); margin: 0 0 12px; }
  .ef-lang { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.5); margin: 0; }

  /* ---------- Referenzkarten ---------- */
  .ref-gitter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  #referenzen { background: var(--weiss); }
  .ref {
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
    display: flex; flex-direction: column;
  }

  .ref-bild {
    position: relative;
    height: 152px;
    background: var(--grund-2);
    overflow: visible;
  }
  .ref-foto {
    position: absolute; inset: 0; overflow: hidden; z-index: 0;
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .ref-foto::before {
    content: "";
    position: absolute; inset: 0;
    background-image: var(--hg);
    background-size: cover; background-position: center;
    filter: saturate(.85);
    z-index: 0;
  }
  .ref-foto::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,27,44,.46) 0%, rgba(14,27,44,.30) 60%, rgba(14,27,44,.16) 100%);
    z-index: 1;
  }

  /* Referenz ohne Foto: ruhige Flaeche im Markenton */
  .ref-foto--flaeche::before {
    background-image: none;
    background-color: var(--navy);
    background:
      radial-gradient(120% 140% at 78% 8%, rgba(11,95,208,.55) 0%, rgba(11,95,208,0) 62%),
      linear-gradient(158deg, #14304F 0%, #0E1B2C 62%, #0A1522 100%);
    filter: none;
    transform: none;
    inset: 0;
  }
  .ref-foto--flaeche::after {
    background: linear-gradient(180deg, rgba(14,27,44,.10) 0%, rgba(14,27,44,.22) 100%);
  }

  /* weisses Logo-Kaestchen, links versetzt, ragt ueber die Kante */
  .ref-logo {
    position: absolute;
    left: 26px; bottom: -38px;
    width: 116px; height: 116px;
    background: var(--weiss);
    border: 1px solid var(--rand);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(14,27,44,.06), 0 14px 30px rgba(14,27,44,.13);
    display: flex; align-items: center; justify-content: center;
    padding: 14px;
    z-index: 5;
  }
  .ref-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

  /* Ortsname frei im Bildbereich, mittig */
  .ref-ortname {
    position: absolute;
    left: 168px;          /* 26 Rand + 116 Logo + 26 Abstand */
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
    z-index: 4;
    font-family: var(--display);
    font-variation-settings: "wdth" 104;
    font-weight: 650;
    font-size: clamp(15px, 1.62vw, 23px);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--weiss);
    text-shadow: 0 1px 2px rgba(14,27,44,.45), 0 6px 22px rgba(14,27,44,.55);
    line-height: 1.16;
    hyphens: none;
  }

  /* Kopftext im Bildstreifen: Ortsname plus Marker-Pillen */
  .ref-kopftext {
    position: absolute;
    left: 168px;          /* 26 Rand + 116 Logo + 26 Abstand */
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
  }
  .ref-kopftext .ort {
    display: block;
    font-family: var(--display);
    font-variation-settings: "wdth" 104;
    font-weight: 650;
    font-size: clamp(15px, 1.62vw, 23px);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--weiss);
    text-shadow: 0 1px 2px rgba(14,27,44,.45), 0 6px 22px rgba(14,27,44,.55);
    line-height: 1.16;
    hyphens: none;
  }
  .ref-marker { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
  .ref-marker span {
    font-family: var(--body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--navy);
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.94);
    border-radius: 999px;
    padding: 3px 10px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(14,27,44,.18);
  }

  .ref-inhalt {
    padding: 58px 28px 26px;
    display: flex; flex-direction: column; flex: 1;
  }
  .ref h3 {
    font-family: var(--display);
    font-variation-settings: "wdth" 106;
    font-weight: 650; font-size: 21px; line-height: 1.22;
    color: var(--navy); margin-bottom: 9px;
  }
  .ref .kurz { color: var(--grau); font-size: 15px; }

  .ref-mehr { margin-top: 44px; text-align: center; }

  /* ---------- Netzwerk ---------- */
  #netzwerk { position: relative; background: var(--navy); color: #E6ECF4; padding: var(--sektion-abstand) 0; overflow: hidden; }
  #netz-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; }
  #netzwerk .innen { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
  #netzwerk h2 { color: #fff; }
  #netzwerk p { color: #A9B4C4; font-size: 16.5px; max-width: 30em; }
  /* festes 3x2-Raster statt umbrechender Wolke */
  #netzwerk .chips {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: end;
    gap: 12px;
  }
  #netzwerk .chip {
    font-family: var(--display);
    font-weight: 550;
    font-size: 14px;
    letter-spacing: .03em;
    color: #D9E2EF;
    background: rgba(14,27,44,.55);
    border: 1px solid rgba(143,186,242,.35);
    border-radius: 999px;
    padding: 11px 20px;
    text-align: center;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 24px rgba(94,160,240,.15);
  }
  @media (max-width: 560px) {
    #netzwerk .chips { grid-template-columns: 1fr; justify-content: stretch; }
  }

  /* ---------- Kontakt ---------- */
  #kontakt { background: linear-gradient(120deg, var(--blau) 0%, #0A4CA6 100%); color: #fff; padding: var(--sektion-abstand) 0; }
  #kontakt .innen { display: block; }
  #kontakt h2 { color: #fff; margin: 0 0 12px; }
  #kontakt .deck { color: rgba(255,255,255,.85); }
  #kontakt .direkt { margin-top: 26px; font-size: 16px; color: rgba(255,255,255,.88); }
  #kontakt .direkt b { display: block; color: #fff; font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 4px; }
  #kontakt .direkt a { color: #fff; }
  /* Kontaktwege: Telefon und E-Mail direkt, sichtbar und anklickbar */
  #kontakt .kontaktwege { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 38px; }
  #kontakt .weg { flex: 1 1 auto; }
  #kontakt .weg {
    display: block;
    padding: 16px 26px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    color: #fff;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
  }
  #kontakt a.weg:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }
  #kontakt .weg .art {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.82);
    margin-bottom: 5px;
  }
  #kontakt .weg .wert {
    display: block;
    font-family: var(--display);
    font-variation-settings: "wdth" 104;
    font-weight: 680;
    font-size: 21px;
    line-height: 1.2;
    white-space: nowrap;
  }
  /* Kopier-Knopf oben rechts in der Pille, als Geschwister neben dem Link */
  #kontakt .weg-huelle { position: relative; flex: 1 1 auto; display: flex; }
  #kontakt .weg-huelle > .weg { flex: 1 1 auto; padding-right: 58px; }
  #kontakt .kopierknopf {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.86);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  #kontakt .kopierknopf svg {
    width: 15.5px;
    height: 15.5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (hover: hover) {
    #kontakt .kopierknopf:hover { background: #fff; color: var(--blau); border-color: #fff; }
  }
  #kontakt .kopierknopf:focus-visible { background: #fff; color: var(--blau); border-color: #fff; }
  #kontakt .kopierknopf:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* Beschriftung als kleine Blase, sofort sichtbar */
  #kontakt .kopiermeldung {
    position: absolute;
    top: 50%;
    right: calc(100% + 9px);
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .01em;
    line-height: 1;
    padding: 7px 10px;
    border-radius: 8px;
    background: #0B1522;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease;
  }
  @media (hover: hover) {
    #kontakt .kopierknopf:hover .kopiermeldung { opacity: 1; visibility: visible; }
  }
  #kontakt .kopierknopf:focus-visible .kopiermeldung,
  #kontakt .kopierknopf.gemeldet .kopiermeldung { opacity: 1; visibility: visible; }
  #kontakt .kopierknopf.gemeldet { background: #fff; color: var(--blau); border-color: #fff; }

  /* ---------- Footer ---------- */
  footer { background: #0B1522; color: #94A0B1; font-size: 14.5px; }
  footer .oben {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding: 64px 0 48px;
  }
  footer h4 {
    font-family: var(--display);
    font-weight: 650;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #C8D2DF;
    margin-bottom: 16px;
  }
  footer ul { list-style: none; }
  footer li { padding: 5px 0; }
  footer a { color: #94A0B1; text-decoration: none; }
  footer a:hover { color: #fff; }
  .fusslogo { margin-bottom: 18px; }
  .fusslogo img { height: 42px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
  footer .unten {
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 0;
    font-size: 13px;
  }

  /* ---------- Einblenden ---------- */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.sichtbar { opacity: 1; transform: none; }
  .ref-gitter .reveal:nth-child(even), .kern .reveal:nth-child(2) { transition-delay: .08s; }
  .gruppen .reveal:nth-child(3) { transition-delay: .16s; }
  .gruppen .reveal:nth-child(4) { transition-delay: .24s; }
  .gruppen .reveal:nth-child(5) { transition-delay: .32s; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

  /* Unterseiten: Seiteninhalt gleitet beim Aufruf einmal sanft ein */
  main.einblenden { animation: seiteEin .6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes seiteEin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { main.einblenden { animation: none; } }

  /* ---------- Mobil ---------- */
  @media (max-width: 1100px) {
    .kern { grid-template-columns: 1fr; gap: 30px; }
    .weiter { grid-template-columns: repeat(3, 1fr); }
    .wz:first-child { border-left: 1px solid var(--rand); padding-left: 18px; }
    .wz:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .ef-reihe { grid-template-columns: 1fr 1fr; gap: 34px 0; }
    .ef { border-left: 0; padding: 0 22px 0 0; }
  }

  @media (max-width: 640px) {
    .weiter { grid-template-columns: 1fr 1fr; }
    .wz:nth-child(3n+1) { border-left: 1px solid var(--rand); padding-left: 18px; }
    .wz:nth-child(2n+1) { border-left: 0; padding-left: 0; }
    .ef-reihe { grid-template-columns: 1fr; }
  }

  @media (max-width: 940px) {
    .hero { min-height: 0; }
    .hero .wrap { padding-top: 76px; padding-bottom: 84px; }
    .loesung { grid-template-columns: 1fr; gap: 28px; padding: 32px 0; }
    .loesung:nth-child(even) .bildseite { order: 0; }
    .aufklapp .innenraum { grid-template-columns: 1fr; }
    .leistungs-raster { grid-template-columns: 1fr 1fr; }
    #referenzen .ref-gitter { grid-template-columns: 1fr; }
    .gruppen { grid-template-columns: 1fr 1fr; }
    .gruppe { height: auto; min-height: 268px; }
    #netzwerk .innen { grid-template-columns: 1fr; gap: 40px; }
    #kontakt .innen { grid-template-columns: 1fr; gap: 40px; }
    #kontakt .weg { width: 100%; }
    #kontakt .weg-huelle { width: 100%; flex: 1 1 100%; }
    #kontakt .weg .wert { white-space: normal; }
    footer .oben { grid-template-columns: 1fr 1fr; gap: 36px; }
    nav a { padding: 7px 9px; font-size: 13.5px; }
    .marke img { height: 30px; width: auto; }
    :root { --sektion-abstand: 76px; }
  }
  @media (max-width: 560px) {
    .gruppen { grid-template-columns: 1fr; }
    .gruppe { height: auto; min-height: 0; }
    .leistungs-raster { grid-template-columns: 1fr; }
    footer .oben { grid-template-columns: 1fr; }
    #kontakt .weg-huelle > .weg { padding-right: 52px; }
    #kontakt .kopiermeldung { white-space: normal; max-width: 44vw; line-height: 1.3; text-align: right; }
  }

  /* ---------- Leistungs-Dropdown in der Navigation ---------- */
  .menue { position: relative; }
  .menue > a .winkel { font-size: 11px; opacity: .6; margin-left: 2px; }
  .menue .unterliste {
    position: absolute;
    top: 100%; left: 0;
    padding-top: 12px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
    z-index: 50;
  }
  .menue:hover .unterliste, .menue:focus-within .unterliste { opacity: 1; visibility: visible; transform: none; }
  .unterliste .box {
    min-width: 640px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    background: #fff;
    border: 1px solid var(--rand);
    border-radius: 14px;
    box-shadow: var(--schatten-hover);
    padding: 10px;
  }
  .unterliste .box a {
    display: block;
    padding: 12px 16px;
    border-radius: 10px;
    text-decoration: none;
  }
  .unterliste .box a:hover { background: var(--grund-2); }
  .unterliste .box a b { display: block; font-family: var(--display); font-weight: 640; font-size: 15px; color: var(--navy); }
  .unterliste .box a span { display: block; color: var(--grau); font-size: 12.5px; margin-top: 1px; }

  /* ---------- „Außerdem": fest ausgeklappt ---------- */
  .aufklapp-titel {
    padding: 24px 30px 2px;
    font-family: var(--display);
    font-weight: 640;
    font-size: 18px;
    color: var(--navy);
  }
  .aufklapp .innenraum { padding-top: 16px; }

  /* ---------- Leistungs-Unterseiten ---------- */
  .unterseite-kopf {
    background: var(--weiss);
    border-bottom: 1px solid var(--rand);
    padding: 72px 0 60px;
  }
  .unterseite-kopf h1 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.08;
    letter-spacing: -.012em;
    color: var(--navy);
    margin: 14px 0 16px;
  }
  .spalten { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; padding: 76px 34px; }
  .spalten h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 0; }
  .checkliste { list-style: none; }
  .checkliste li { display: flex; gap: 12px; padding: 8px 0; font-weight: 500; color: var(--text); }
  .checkliste li svg { width: 21px; height: 21px; flex: 0 0 auto; margin-top: 2px; }
  .ablauf { counter-reset: schritt; list-style: none; }
  .ablauf li { position: relative; padding: 0 0 24px 60px; counter-increment: schritt; }
  .ablauf li::before {
    content: counter(schritt, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--display); font-weight: 700; font-size: 15px;
    color: var(--blau); background: var(--blau-zart);
    border-radius: 10px;
    width: 42px; height: 42px;
    display: grid; place-items: center;
  }
  .ablauf b { display: block; color: var(--navy); font-family: var(--display); font-weight: 640; margin-bottom: 2px; }
  .ablauf span { color: var(--grau); font-size: 15px; }
  .beispiel-band { background: var(--weiss); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 68px 0; }
  .beispiele { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
  .beispiel { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
  .beispiel .kopf {
    position: relative;
    height: 88px;
    background: var(--weiss);
    border-bottom: 1px solid var(--rand);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 26px;
    overflow: hidden;
    isolation: isolate;
  }
  .beispiel .kopf::before {
    content: "";
    position: absolute;
    inset: -40px;
    background-image: var(--hg);
    background-size: cover;
    background-position: center;
    filter: saturate(.9);
    transform: scale(1.1);
    z-index: -2;
  }
  .beispiel .kopf::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(244,247,251,.08);
    z-index: -1;
  }
  .beispiel .kopf {
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 20px 16px;
  }
  .beispiel .kopf::after {
    background: linear-gradient(to top, rgba(14,27,44,.72) 0%, rgba(14,27,44,.28) 45%, rgba(14,27,44,0) 100%);
  }
  .beispiel .kopf .name {
    position: relative;
    font-family: var(--display);
    font-variation-settings: "wdth" 106;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 10px rgba(14,27,44,.55);
  }
  .beispiel .txt span { display: block; }
  .beispiel .txt { padding: 16px 20px 18px; }
  .beispiel b { font-family: var(--display); font-weight: 650; color: var(--navy); font-size: 16px; display: block; margin-bottom: 3px; }
  .beispiel span { color: var(--grau); font-size: 13.5px; }
  .unterseite-cta { padding: 80px 34px; text-align: center; }
  .cta-linie { border-top: 1px solid var(--rand); margin-top: 40px; }
  .unterseite-cta .knopf { margin-top: 18px; }

  /* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
  .rechtstext { padding-top: 8px; padding-bottom: 96px; }
  .rechtstext h2 {
    font-family: var(--display);
    font-variation-settings: "wdth" 106;
    font-weight: 680;
    font-size: 30px;
    line-height: 1.2;
    color: var(--navy);
    margin: 56px 0 16px;
  }
  .rechtstext h3 {
    font-family: var(--display);
    font-weight: 640;
    font-size: 19px;
    color: var(--navy);
    margin: 34px 0 10px;
  }
  .rechtstext p, .rechtstext li {
    color: var(--text);
    font-size: 16.5px;
    line-height: 1.8;
  }
  .rechtstext p { margin-bottom: 18px; }
  .rechtstext ul { margin: 0 0 18px 24px; }
  .rechtstext li { margin-bottom: 6px; }
  .rechtstext a { word-break: break-word; }
  .platzhalter-hinweis {
    border-left: 3px solid var(--blau);
    background: var(--grund-2);
    padding: 14px 20px;
    color: var(--grau);
    font-size: 15px;
    margin-bottom: 8px;
  }
  .quelle {
    color: var(--grau);
    font-size: 14px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--rand);
  }
  @media (max-width: 940px) {
    .rechts-meta { grid-template-columns: 1fr; }
    .rechts-inhalt ol { columns: 1; }
  }
  @media (max-width: 940px) {
    .spalten { grid-template-columns: 1fr; gap: 44px; }
    .beispiele { grid-template-columns: 1fr; }
    #kontakt .aktion { justify-content: flex-start; }
    .menue .unterliste { display: none; }
  }
  /* Außerdem-Kacheln als Links */
  a.posten { text-decoration: none; display: block; transition: border-color .2s ease, transform .2s ease; }
  a.posten:hover { border-color: var(--blau); transform: translateY(-2px); }

  /* ---------- Gremien und Regelwerk ---------- */
  #gremien { background: var(--grund-2); }
  .gremien-innen { display: grid; grid-template-columns: 42% 1fr; gap: 70px; align-items: start; }

  .gremien-kopf h2 {
    font-family: var(--display);
    font-variation-settings: "wdth" 108;
    font-weight: 700;
    font-size: clamp(26px, 2.7vw, 35px);
    line-height: 1.08;
    letter-spacing: -.014em;
    color: var(--navy);
  }
  .gremien-kopf > p { color: var(--grau); font-size: 17px; margin-top: 12px; }

  .gremien-vor { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rand); }
  .gremien-vor .titel {
    font-size: 13px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--grau-hell); margin-bottom: 14px;
  }
  .gremien-vor ul { list-style: none; }
  .gremien-vor li { padding: 7px 0; color: var(--grau); font-size: 15.5px; }
  .gremien-vor li b { font-weight: 600; color: var(--navy); }

  .gremien-liste { border-top: 1px solid var(--rand); }
  .gremien-zeile { padding: 20px 0; border-bottom: 1px solid var(--rand); }
  .gremien-zeile .was {
    font-family: var(--display); font-weight: 640; font-size: 17px; color: var(--navy);
  }
  .gremien-zeile .rolle { color: var(--text); font-size: 16px; margin-top: 3px; }

  @media (max-width: 940px) {
    .gremien-innen { grid-template-columns: 1fr; gap: 40px; }
  }

  /* ============================================================
     SPRACHUMSCHALTER EN/DE
     Eigene Klasse. Kein bestehender Selektor wird angefasst.
     Im HTML steht der Umschalter als Geschwister direkt vor
     .burger, also zwischen Logo und Navigation.

     Am Desktop ist er absolut positioniert und damit KEIN
     Flex-Element der Kopfzeile: die Zeile braucht exakt so viel
     Platz wie vorher (Logo 201 + sechs Links 634 + Rand 68 =
     903px), Logo und Navigation stehen pixelgenau wie bisher.
     Das gilt auch in der engen Zone 941 bis 960px, die dadurch
     nicht um einen Pixel weiter verengt wird.

     Sein Platz ist der rechte 34px-Rand der .wrap, direkt hinter
     dem letzten Link "Kontakt": Kasten 28px breit, rechte Kante
     4px vor der Aussenkante der .wrap, linke Kante damit 2px
     hinter dem Ende der Navigation. Der Text "Kontakt" endet
     wegen seines 15px-Innenrands noch einmal 15px frueher.

     Ab 900px wird er wieder gewoehnliches Flex-Element und
     stellt sich mit 44 x 44 direkt vor den Burger.
     ============================================================ */
  .sprachwahl {
    position: absolute;
    top: 50%;
    right: 4px;   /* Rueckfall fuer sehr alte Browser ohne max() */
    right: calc(max(0px, (100% - var(--max)) / 2) + 4px);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--weiss);
    line-height: 0;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  .sprachwahl svg { display: block; border-radius: 2px; }
  .sprachwahl:hover { border-color: var(--blau); }
  .sprachwahl:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

  /* Schmal: zurueck in die Flexzeile, Tippflaeche 44 x 44.
     margin-left: auto schluckt den freien Platz, damit der
     Umschalter am Burger klebt und nicht in der Mitte landet
     (die Kopfzeile verteilt sonst mit space-between).
     Bei 360px: Rand 68 + Logo 125 + Umschalter 44 + Burger 33
     = 270px, es bleiben 90px Reserve. */
  @media (max-width: 900px) {
    .sprachwahl {
      position: static;
      transform: none;
      margin-left: auto;
      width: 44px;
      height: 44px;
      padding: 0;
      border-color: transparent;
      background: transparent;
      border-radius: 10px;
    }
    .sprachwahl:active { background: var(--grund-2); }
  }

  /* ============================================================
     HANDY-TAUGLICHKEIT
     Alles hier steht in Media Queries. Einzige Ausnahme sind die
     Grundregeln fuer den Burger-Knopf und den Sprachumschalter.
     ============================================================ */

  /* Neu im HTML. Am Desktop ohne jede Wirkung. */
  .burger { display: none; }

  /* ---------- Schmal: Burger-Knopf statt Linkleiste ----------
     Umschaltpunkt 900px. Bei 901px braucht die Kopfzeile rund
     735px (Logo 125 + sechs Links 520 + Rand 68 + Luft 20), es
     bleiben also ueber 160px Reserve. Die Reserve ist zugleich
     der Platz fuer den spaeteren Sprachumschalter EN/DE. */
  @media (max-width: 900px) {
    .burger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      margin-right: -11px;   /* Striche buendig zum Rand der .wrap */
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 10px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    /* Sprachumschalter EN/DE kommt spaeter als Geschwister
       direkt vor .burger in die Kopfzeile. Platz ist da. */
    .burger span {
      display: block;
      width: 22px;
      height: 2px;
      border-radius: 2px;
      background: var(--navy);
    }
    .burger[aria-expanded="true"] { background: var(--grund-2); }
    .burger:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

    /* Die vorhandene Navigation wird zur Klappliste unter der Kopfzeile.
       header ist sticky, also bezugsfaehig fuer position: absolute. */
    nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--weiss);
      border-bottom: 1px solid var(--rand);
      box-shadow: var(--schatten);
    }
    nav.offen { display: flex; }
    nav a {
      display: block;
      min-height: 44px;
      padding: 15px 34px;
      font-size: 16px;
      border-radius: 0;
      border-top: 1px solid var(--rand);
    }
    nav a:first-of-type { border-top: 0; }
    nav a:active { background: var(--grund-2); }

    /* Referenzkarten einspaltig. Zweispaltig wird die Kachel hier
       schmaler als 370px, dann passt kein langer Ortsname mehr. */
    .ref-gitter { grid-template-columns: 1fr; }

    /* Hero-Ueberschrift: die 900px aus dem Inline-Style freigeben */
    .hero h1 { width: auto !important; max-width: 100% !important; }

    /* Kopier-Knoepfe: unsichtbare Trefferflaeche auf 44 x 44,
       die Pillen-Optik bleibt bei 30 x 30 unveraendert. */
    #kontakt .kopierknopf::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 44px;
      height: 44px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
  }

  /* ---------- Hero auf Handybreite ----------
     "Parkraum wirtschaftlich" hat 23 Zeichen. Konservativ mit
     0.62em je Zeichen abzueglich letter-spacing -.015em sind das
     23 x 0.605 = 13.92em. Bei 360px ergibt 5vw genau 18px, also
     rund 250px in 292px verfuegbarer Breite: 14% Reserve.
     Das Minimum von 17px greift erst unter 340px. */
  @media (max-width: 640px) {
    .hero h1 {
      font-size: clamp(17px, 5vw, 34px);
      margin: 14px 0 18px;
    }
    .hero .lead { font-size: 16.5px; margin-bottom: 24px; }
    .hero .haken-zeile { gap: 9px 20px; margin-bottom: 28px; }
    .hero .haken { align-items: flex-start; font-size: 14px; }
    .hero .haken svg { width: 18px; height: 18px; margin-top: 3px; }
    .hero .aktionen { gap: 12px; }
    .hero .aktionen .knopf { padding: 13px 22px; }
  }

  /* ---------- Ortsnamen auf schmalen Referenzkarten ----------
     Kleineres Logo, nachgezogener Textbeginn, kleinere Schrift.
     Bei 360px bleiben 186px. Konservativ mit 0.62em je Zeichen
     plus .03em letter-spacing (= 0.65em) und 12.5px Schrift:
       "Rieden am Forggensee" (20 Z.) = 162px  ->  13% Reserve
       "Bodman-Ludwigshafen"  (19 Z.) = 154px  ->  17% Reserve
       "Neubrandenburg"       (14 Z.) = 114px  ->  39% Reserve
     Einwort-Namen bleiben damit sicher einzeilig, Mehrwort-Namen
     haetten notfalls die zweite Zeile als Reserve. */
  @media (max-width: 480px) {
    .ref-logo {
      left: 16px;
      bottom: -28px;
      width: clamp(72px, 19vw, 96px);
      height: clamp(72px, 19vw, 96px);
      border-radius: 16px;
      padding: 9px;
    }
    .ref-ortname,
    .ref-kopftext {
      left: calc(22px + clamp(72px, 19vw, 96px));
      right: 12px;
    }
    .ref-ortname,
    .ref-kopftext .ort {
      font-size: clamp(12.5px, 3.3vw, 19px);
      letter-spacing: .03em;
    }
    .ref-marker { gap: 5px; margin-top: 7px; }
    .ref-marker span {
      font-size: 10px;
      letter-spacing: .04em;
      padding: 2px 7px;
      max-width: 100%;
      overflow-wrap: anywhere;   /* Notbremse gegen Ueberstand */
    }
    .ref-inhalt { padding: 46px 20px 24px; }
    .ref h3 { font-size: 19px; }
  }

  /* ============================================================
     BLAETTER-STREIFEN AUF DEN LEISTUNGS-UNTERSEITEN
     Eigene Klassen, kein bestehender Selektor wird angefasst.
     Im HTML steht der Streifen direkt hinter .unterseite-kopf,
     also zwischen Hero und Inhalt.

     Bewusst KEIN <nav>: ab 900px macht die Regel "nav" die
     Kopfzeilen-Navigation unsichtbar und absolut positioniert.
     Der Streifen ist deshalb ein div mit role="navigation".

     Optik: ein schmaler getoenter Streifen (--grund-2) mit
     Trennlinie nach unten. Der Hero darueber ist weiss, der
     Inhalt darunter ebenfalls, der Streifen setzt sich also nur
     durch seinen leichten Ton ab und traegt keinen eigenen
     Kasten, der mit der Ueberschrift konkurriert.

     Die negativen Aussenraender -10px heben den Innenrand der
     Links wieder auf: der Text steht damit exakt auf der
     34px-Kante der .wrap, buendig unter der Hero-Ueberschrift.
     Die Hover-Flaeche darf ruhig darueber hinausragen.
     ============================================================ */
  .blaetterband {
    background: var(--grund-2);
    border-bottom: 1px solid var(--rand);
  }
  .blaetterzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .blaetter-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 -10px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--display);
    font-variation-settings: "wdth" 104;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--grau);
    transition: color .18s ease, background .18s ease;
  }
  .blaetter-link:hover { color: var(--blau); background: var(--weiss); }
  .blaetter-link:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
  .blaetter-link .pfeil {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1;
    color: var(--grau-hell);
    transition: color .18s ease;
  }
  .blaetter-link:hover .pfeil { color: var(--blau); }
  .blaetter-link--vor { text-align: right; }

  /* Handy: nebeneinander passen zwei volle Leistungsnamen nicht
     mehr in 390px. Statt zu kuerzen stehen sie untereinander,
     zurueck oben links, weiter unten rechts. Der Streifen bleibt
     damit zwei kurze Zeilen hoch und beide Namen bleiben ganz. */
  @media (max-width: 900px) {
    .blaetterzeile {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .blaetter-link {
      justify-self: start;
      min-height: 40px;
      font-size: 14px;
    }
    .blaetter-link--vor { justify-self: end; }
  }

  /* ============================================================
     BLAETTERN: ANIMIERTER SEITENUEBERGANG
     Gehoert zum Blaetter-Streifen darueber. Technik: die
     Cross-Document View Transitions API des Browsers.

     Grundhaltung: die Animation ist AUS und wird nur beim
     Blaettern eingeschaltet. Der Browser wuerde von sich aus
     jeden Seitenwechsel weich ueberblenden — das ist hier
     ausdruecklich abgeschaltet (animation: none weiter unten).
     Ein Klick auf Menue, Logo oder Fusszeile sieht deshalb
     genauso aus wie bisher, auf allen Seiten der Website.

     Eingeschaltet wird ueber zwei Klassen an <html>, die
     blaettern.js auf der ANKOMMENDEN Seite setzt:
       .blaettert-vor      Inhalt schiebt nach links raus,
                           der neue kommt von rechts
       .blaettert-zurueck  umgekehrt
     Die Schnipsel (::view-transition-old/new) gehoeren immer
     zum neuen Dokument, deshalb reicht die Klasse dort.

     Die Kopfzeile bekommt einen eigenen Namen und wird damit
     getrennt aufgenommen: sie steht still, waehrend der Inhalt
     darunter durchschiebt.

     Browser ohne die API ignorieren den ganzen Block und
     wechseln die Seite wie bisher.
     ============================================================ */
  @view-transition { navigation: auto; }

  /* Standard fuer die ganze Website: kein Ueberblenden.
     mix-blend-mode muss mit zurueckgesetzt werden, sonst
     addiert der Browser die beiden Standbilder zu Weiss. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Kopfzeile stillstellen: eigenes Standbild, das nicht mitlaeuft */
  header { view-transition-name: mwg-kopfzeile; }
  ::view-transition-old(mwg-kopfzeile),
  ::view-transition-new(mwg-kopfzeile) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Nur beim Blaettern und nur, wenn der Rechner keine
     reduzierte Bewegung verlangt: der Inhalt schiebt. */
  @media (prefers-reduced-motion: no-preference) {
    :root.blaettert-vor::view-transition-old(root) {
      animation: 280ms cubic-bezier(.22,.61,.36,1) both blaettern-raus-links;
    }
    :root.blaettert-vor::view-transition-new(root) {
      animation: 280ms cubic-bezier(.22,.61,.36,1) both blaettern-rein-rechts;
    }
    :root.blaettert-zurueck::view-transition-old(root) {
      animation: 280ms cubic-bezier(.22,.61,.36,1) both blaettern-raus-rechts;
    }
    :root.blaettert-zurueck::view-transition-new(root) {
      animation: 280ms cubic-bezier(.22,.61,.36,1) both blaettern-rein-links;
    }
  }

  @keyframes blaettern-raus-links  { from { transform: translateX(0);     } to { transform: translateX(-100%); } }
  @keyframes blaettern-rein-rechts { from { transform: translateX(100%);  } to { transform: translateX(0);     } }
  @keyframes blaettern-raus-rechts { from { transform: translateX(0);     } to { transform: translateX(100%);  } }
  @keyframes blaettern-rein-links  { from { transform: translateX(-100%); } to { transform: translateX(0);     } }