/* NetzGewerk GmbH – Aussehen aller Seiten (seit 31.10.2026, statt IONOS MyWebsite).
   Fassung 2 (31.10.2026, Marc: „das ganze noch ein wenig moderner, das netzgewerk logo soll sich auch ein wenig bewegen“
   und „auf der startseite sieht man nicht direkt den namen“): großes Logo mit sich drehenden Zahnrädern im Start,
   runde Ecken, Pillen-Knöpfe, Kacheln mit Foto, Glas-Karten, zarter Farbschimmer aus Logo-Blau und -Magenta.
   Weiter ruhig: nur Inter 400/600, kein JavaScript (siehe _headers), Bewegung nur per CSS. Fotos: Unsplash, siehe Impressum. */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --blau: #009fe3;        /* „NETZ“ und die blauen Zahnräder im Logo */
  --magenta: #d60b53;     /* „GEWERK“ und das rote Zahnrad */
  --blau-text: #0073a8;   /* Logo-Blau abgedunkelt, damit Text darauf gut lesbar ist */
  --primaer: #0077b6;     /* Knöpfe */
  --dunkel: #0c2635;      /* Überschriften und dunkle Flächen */
  --hell: #f3f7fa;        /* helles Blaugrau für Wechselflächen */
  --text: #14212b;
  --grau: #5b6670;
  --linie: rgba(12,38,53,.10);
  --rund: 22px;
  --rund-klein: 14px;
  --schatten: 0 1px 2px rgba(12,38,53,.06), 0 12px 32px rgba(12,38,53,.08);
  --verlauf: linear-gradient(100deg, var(--blau) 0%, #4a6fd0 45%, var(--magenta) 100%);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
       color: var(--text); background: #fff; font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--blau-text); text-decoration: none; font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
.breite { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.schmal { max-width: 760px; margin: 0 auto; padding: 0 24px; }
section { padding: 120px 0; position: relative; }

/* Kopfleiste (Glas) */
header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.78);
         backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
         border-bottom: 1px solid rgba(12,38,53,.06); }
header .breite { display: flex; align-items: center; height: 74px; }
header .logo img { height: 46px; width: auto; }
/* Startseite: oben steht das große Logo im Start, das kleine in der Leiste erscheint erst beim Scrollen
   (nur wo der Browser scroll-gesteuerte Animationen kann, sonst immer sichtbar) */
@supports (animation-timeline: scroll()) {
  .startseite header .logo { animation: logo-ein linear both; animation-timeline: scroll(root); animation-range: 120px 320px; }
  @keyframes logo-ein { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}
nav { display: flex; gap: 6px; font-size: 15px; margin-left: auto; margin-right: 18px; }
nav a { color: var(--text); font-weight: 400; padding: 8px 14px; border-radius: 999px; transition: background .2s; }
nav a:hover, nav a.aktiv { background: rgba(12,38,53,.06); }
header .logo + .knopf-klein { margin-left: auto; }
.knopf-klein { font-size: 15px; font-weight: 600; color: #fff; background: var(--dunkel); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 14px; border-radius: 999px; transition: background .2s; }
.knopf-klein::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("/telefon.svg") center / contain no-repeat; mask: url("/telefon.svg") center / contain no-repeat; }
.knopf-klein:hover { background: var(--primaer); }

/* Typografie */
.ueber { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--blau-text); margin-bottom: 18px;
         background: rgba(0,159,227,.09); padding: 6px 14px 6px 10px; border-radius: 999px; }
.ueber::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }
h1, h2 { color: var(--dunkel); font-weight: 600; letter-spacing: -0.035em; overflow-wrap: break-word; }
h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1.04; }
h2 { font-size: clamp(30px, 3.8vw, 50px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 600; color: var(--dunkel); }
.verlauf { background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--grau); font-weight: 400; }
.text p { color: var(--grau); margin-top: 18px; }
.text p:first-child { margin-top: 0; }

/* Knöpfe (Pillen) */
.knoepfe { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.knopf { display: inline-flex; align-items: center; gap: 10px; background: var(--primaer); color: #fff; font-size: 16px; font-weight: 600; padding: 15px 26px; border-radius: 999px;
         box-shadow: 0 8px 22px rgba(0,119,182,.28); transition: transform .2s, background .2s, box-shadow .2s; }
.knopf:hover { background: var(--dunkel); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(12,38,53,.25); }
.knopf.tel::before { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: url("/telefon.svg") center / contain no-repeat; mask: url("/telefon.svg") center / contain no-repeat; }
.knopf.hell { background: #fff; color: var(--dunkel); box-shadow: inset 0 0 0 1.5px rgba(12,38,53,.18); }
.knopf.hell:hover { box-shadow: inset 0 0 0 1.5px var(--dunkel); }
.mehr { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--blau-text); }
.mehr::after { content: "→"; transition: transform .2s; }
.mehr:hover::after { transform: translateX(4px); }

/* Zarter Farbschimmer aus den Logo-Farben hinter dem Start und im Kontakt */
.schimmer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.schimmer::before, .schimmer::after { content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); opacity: .16; }
.schimmer::before { background: var(--blau); top: -220px; right: -120px; }
.schimmer::after { background: var(--magenta); bottom: -320px; left: -200px; opacity: .09; }
section > .breite { position: relative; z-index: 1; }

/* ---------- Start: großes Logo mit drehenden Zahnrädern, Satz, Foto mit Glas-Karte ---------- */
.start { padding: 64px 0 110px; }
.start .breite { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.start-logo { width: min(100%, 360px); height: auto; margin: 0 0 38px -4px; }
.start-name { margin: 0; font-size: 0; line-height: 0; }
.start-satz { font-size: clamp(34px, 4.4vw, 58px); line-height: 1.06; }
.start .lead { margin-top: 24px; max-width: 560px; }
.start-bild { position: relative; margin: 0; }
.start-bild > img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px rgba(12,38,53,.18); }
/* Glas-Karte mit den Zahlen der bisherigen Seite */
.glas { position: absolute; left: -36px; right: 36px; bottom: -40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
        background: rgba(255,255,255,.82); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
        border: 1px solid rgba(255,255,255,.7); border-radius: 20px; padding: 20px 22px; box-shadow: 0 18px 44px rgba(12,38,53,.16); }
.glas div { padding: 2px 10px; }
.glas div + div { border-left: 1px solid var(--linie); }
.glas b { display: block; font-size: 34px; font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--dunkel); }
.glas div:nth-child(2) b { color: var(--blau-text); }
.glas div:nth-child(3) b { color: var(--magenta); }
.glas span { display: block; font-size: 13.5px; line-height: 1.3; color: var(--grau); margin-top: 4px; }

/* ---------- Leistungen als Kacheln mit Foto ---------- */
.leistungen { background: var(--hell); }
.abschnitt-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 56px; }
.gruppe-titel { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin: 0 0 20px; }
.kacheln { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 320px; gap: 18px; }
.kachel { position: relative; grid-column: span 2; border-radius: var(--rund); overflow: hidden; color: #fff; font-weight: 400; isolation: isolate; background: var(--dunkel); }
.kachel.breit { grid-column: span 4; }
.kachel.halb { grid-column: span 3; }
.kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,22,31,0) 30%, rgba(8,22,31,.86) 100%); }
.kachel:hover img { transform: scale(1.05); }
.kachel .k-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 74px 26px 26px; }
.kachel .chip { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); margin-bottom: 12px; }
.kachel h3 { color: #fff; font-size: 25px; }
.kachel p { color: rgba(255,255,255,.82); font-size: 15.5px; margin-top: 8px; max-width: 520px; }
.kachel .pfeil { position: absolute; right: 22px; bottom: 24px; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--dunkel); display: grid; place-items: center; font-size: 19px; transition: transform .25s, background .25s, color .25s; }
.kachel:hover .pfeil { transform: translateX(3px); background: var(--blau); color: #fff; }

/* ---------- Über uns ---------- */
.ueber-uns .breite { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ueber-uns .lead { margin-top: 24px; }
.kurzliste { list-style: none; background: var(--hell); border-radius: var(--rund); padding: 10px 28px; }
.kurzliste li { padding: 18px 0 18px 42px; border-bottom: 1px solid var(--linie); position: relative; display: grid; gap: 2px; }
.kurzliste li:last-child { border-bottom: 0; }
.kurzliste li::before { content: ""; position: absolute; left: 0; top: 21px; width: 24px; height: 24px; background: url("/zahnrad-blau.svg") center / contain no-repeat; }
.kurzliste li:nth-child(even)::before { background-image: url("/zahnrad-magenta.svg"); }
.kurzliste b { color: var(--dunkel); font-weight: 600; font-size: 18.5px; }
.kurzliste span { color: var(--grau); font-size: 16px; }
blockquote { margin-top: 36px; padding: 22px 26px; border-radius: var(--rund-klein); background: linear-gradient(100deg, rgba(0,159,227,.08), rgba(214,11,83,.06)); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.45; color: var(--dunkel); letter-spacing: -0.01em; }

/* ---------- Ablauf ---------- */
.ablauf { background: var(--hell); }
.schritte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; counter-reset: schritt; list-style: none; }
.schritte li { position: relative; background: #fff; border-radius: var(--rund); padding: 28px 26px 30px; box-shadow: var(--schatten); }
.weiss .schritte li { background: var(--hell); box-shadow: none; }
/* Nummer weiß auf einem vollen Zahnrad aus dem Logo (Marc 31.10.2026: „die punkte sehen komisch aus, vllt eher die zahnräder
   nehmen“, dann: „zahlen sehen komisch aus. von pink nach blau im verlauf die 4 symbole“) – Farben von Magenta nach Logo-Blau */
.schritte li::before { counter-increment: schritt; content: ""; display: block; width: 58px; height: 58px; margin-bottom: 18px; background: var(--rad, var(--blau));
  -webkit-mask: url("/zahnrad-voll.svg") center / contain no-repeat; mask: url("/zahnrad-voll.svg") center / contain no-repeat; }
.schritte li:nth-child(1) { --rad: #d60b53; }
.schritte li:nth-child(2) { --rad: #8f3c83; }
.schritte li:nth-child(3) { --rad: #476eb3; }
.schritte li:nth-child(4) { --rad: #009fe3; }
.schritte li::after { content: counter(schritt); position: absolute; left: 26px; top: 28px; width: 58px; height: 58px; display: grid; place-items: center; font-size: 19px; font-weight: 600; color: #fff; }
.schritte h3 { margin-bottom: 10px; }
.schritte p { color: var(--grau); font-size: 16px; }

/* ---------- Aus einer Hand ---------- */
.partner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.partner > * { display: flex; flex-direction: column; border: 1px solid var(--linie); border-radius: var(--rund); padding: 26px 24px 24px; color: var(--text); font-weight: 400; background: #fff; transition: border-color .2s, box-shadow .2s, transform .2s; }
.partner a:hover { border-color: rgba(0,159,227,.5); box-shadow: var(--schatten); transform: translateY(-2px); }
/* Logos optisch gleich groß (Marc 31.10.2026: „logos sind nicht gleich groß“): feste Maße je Logo im HTML wie auf mt-vie.de */
.partner .p-logo { height: 84px; display: flex; align-items: center; margin-bottom: 18px; }
.partner .p-logo img { max-width: 100%; object-fit: contain; object-position: left center; }
.partner b { font-size: 18px; font-weight: 600; color: var(--dunkel); }
.partner span { font-size: 15.5px; color: var(--grau); margin-top: 4px; }
.partner small { margin-top: auto; padding-top: 16px; font-size: 14.5px; font-weight: 600; color: var(--blau-text); }
.vorteile-band { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; margin-top: 90px; align-items: center; }
.vorteile-band img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 28px; }

/* Nummerierte Liste (Leistungen, Vorteile) */
.liste { list-style: none; counter-reset: nr; }
.liste li { display: grid; grid-template-columns: 52px 1fr; gap: 3px 14px; padding: 18px 8px 18px 0; border-bottom: 1px solid var(--linie); }
.liste li:last-child { border-bottom: 0; }
.liste li::before { counter-increment: nr; content: counter(nr, decimal-leading-zero); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(214,11,83,.08); font-size: 14px; font-weight: 600; color: var(--magenta); grid-row: span 2; font-variant-numeric: tabular-nums; }
.liste b { font-size: 18.5px; font-weight: 600; color: var(--dunkel); letter-spacing: -0.01em; padding-top: 6px; }
.liste span { color: var(--grau); font-size: 16px; }
.karte-liste { background: #fff; border-radius: var(--rund); padding: 10px 28px; box-shadow: var(--schatten); }
.weiss .karte-liste, .hand .karte-liste { background: var(--hell); box-shadow: none; }

/* ---------- Kontakt ---------- */
.kontakt { background: var(--dunkel); color: #fff; overflow: hidden; }
.kontakt .schimmer::before { opacity: .22; }
.kontakt .schimmer::after { opacity: .2; }
.kontakt h2 { color: #fff; }
.kontakt .ueber { color: #fff; background: rgba(255,255,255,.1); }
.kontakt .lead { color: rgba(255,255,255,.74); margin-top: 24px; max-width: 640px; }
.telefon { display: inline-block; margin-top: 40px; font-size: clamp(38px, 6vw, 78px); font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: #fff; }
.telefon:hover { color: var(--blau); }
.wege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
.weg { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--rund-klein); padding: 22px 24px; color: #fff; font-weight: 400; transition: background .2s; }
.weg span { display: block; font-size: 12.5px; color: rgba(255,255,255,.6); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
.weg b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.weg small { display: block; margin-top: 6px; font-size: 15px; color: rgba(255,255,255,.6); font-weight: 400; }
a.weg:hover { background: rgba(255,255,255,.11); }

/* Kontakt speichern (vCard) und QR-Code zur Visitenkarten-Seite /kontakt: am Computer der QR-Code, am Handy der Knopf */
.speichern { margin-top: 40px; }
.knopf.hell-auf-dunkel { background: #fff; color: var(--dunkel); box-shadow: none; }
.knopf.hell-auf-dunkel:hover { background: var(--blau); color: #fff; }
.qr { display: none; align-items: center; gap: 22px; margin: 0; }
.qr img { width: 132px; height: 132px; background: #fff; padding: 10px; border-radius: 14px; }
.qr figcaption { color: rgba(255,255,255,.75); font-size: 15px; max-width: 260px; }
@media (hover: hover) and (pointer: fine) and (min-width: 961px) {
  .speichern .knopf { display: none; }
  .qr { display: flex; }
}

/* ---------- Unterseiten der Leistungen ---------- */
.seite-kopf { padding: 56px 0 90px; overflow: hidden; }
.seite-kopf .breite { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.seite-kopf .lead { margin-top: 24px; }
.seite-kopf img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; border-radius: 28px; box-shadow: 0 30px 70px rgba(12,38,53,.16); }
.pfad { font-size: 14.5px; color: var(--grau); margin-bottom: 22px; }
.pfad a { color: var(--grau); font-weight: 400; }
.pfad a:hover { color: var(--blau-text); }
.inhalt { background: var(--hell); }
.inhalt .breite { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.inhalt .breite + .breite { margin-top: 100px; }
.inhalt h2 { margin-bottom: 24px; }
.weiss { background: #fff; }
.drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; }
.drei > div { background: #fff; border-radius: var(--rund); padding: 30px 28px 32px; box-shadow: var(--schatten); }
.drei h3 { margin-bottom: 10px; }
.drei p { color: var(--grau); font-size: 16px; }
.weiss .drei > div { background: var(--hell); box-shadow: none; }
.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 50px; }
.zwei-spalten > div { background: var(--hell); border-radius: var(--rund); padding: 30px 30px 14px; }
.zwei-spalten h3 { margin-bottom: 8px; }

/* Aufruf am Ende jeder Leistungsseite: dunkle Karte mit Farbschimmer */
.aufruf { padding: 100px 0 0; }
.aufruf-karte { position: relative; overflow: hidden; background: var(--dunkel); color: #fff; border-radius: 30px; padding: 64px 60px; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; isolation: isolate; }
.aufruf-karte::before, .aufruf-karte::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); z-index: -1; }
.aufruf-karte::before { background: var(--blau); opacity: .3; top: -200px; right: -60px; }
.aufruf-karte::after { background: var(--magenta); opacity: .22; bottom: -260px; left: 10%; }
.aufruf h2 { color: #fff; max-width: 640px; }
.aufruf p { color: rgba(255,255,255,.75); margin-top: 14px; max-width: 620px; }
.aufruf .knoepfe { margin-top: 0; }
.aufruf .knopf { background: #fff; color: var(--dunkel); box-shadow: none; }
.aufruf .knopf:hover { background: var(--blau); color: #fff; }
.aufruf .knopf.hell { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5); }
.aufruf .knopf.hell:hover { background: #fff; color: var(--dunkel); }
.weitere { padding: 70px 0 100px; }
.weitere nav { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; }
.weitere nav a { border: 1px solid var(--linie); padding: 11px 20px; border-radius: 999px; font-weight: 600; color: var(--dunkel); background: #fff; }
.weitere nav a:hover { border-color: var(--blau); color: var(--blau-text); background: #fff; }

/* Rechtliches (Impressum, Datenschutz, 404) */
.recht { padding: 80px 0 110px; }
.recht h1 { font-size: clamp(38px, 6vw, 58px); margin-bottom: 30px; }
.recht h2 { font-size: 21px; letter-spacing: -0.01em; margin: 34px 0 10px; color: var(--text); }
.recht p, .recht li { font-size: 16px; color: #333; margin-bottom: 10px; }
.recht ul { padding-left: 22px; }
.recht.mitte { text-align: center; }
.recht.mitte .knoepfe { justify-content: center; }
.stand { margin-top: 30px; color: var(--grau) !important; }

/* Fußzeile */
footer { background: #08161f; padding: 34px 0 40px; font-size: 13.5px; color: rgba(255,255,255,.55); }
footer .breite { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer nav { display: flex; margin: 0; font-size: 13.5px; gap: 4px; flex-wrap: wrap; }
footer nav a { color: rgba(255,255,255,.75); padding: 6px 10px; }
footer nav a:hover { color: #fff; background: rgba(255,255,255,.08); }

/* Einblenden beim Scrollen (nur wo der Browser es kann, sonst sofort sichtbar) */
@supports (animation-timeline: view()) {
  .auftauchen { animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  @keyframes auftauchen { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
}

/* Visitenkarten-Seite /kontakt */
body.visitenkarte { background: var(--hell); }
.vk { max-width: 420px; margin: 0 auto; padding: 56px 24px 40px; text-align: center; }
.vk-logo { width: 240px; margin: 0 auto 30px; }
.vk h1 { font-size: 24px; letter-spacing: -0.02em; }
.vk-ort { color: var(--grau); font-size: 16px; margin-top: 6px; }
.aktionen { display: grid; gap: 12px; margin-top: 34px; }
.aktionen a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 16px; border-radius: 999px; background: #fff;
  color: var(--text); font-size: 17px; font-weight: 600; border: 1px solid var(--linie); }
.aktionen a.haupt { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.aktionen svg { width: 20px; height: 20px; }
.vk-fuss { margin-top: 34px; font-size: 13px; color: var(--grau); }

/* Handy und Tablet */
@media (max-width: 960px) {
  header nav { display: none; }
  header .breite { height: 64px; }
  header .logo img { height: 38px; }
  header .knopf-klein { font-size: 0; gap: 0; padding: 11px; margin-left: auto; }  /* am Handy nur das Telefonzeichen */
  header .knopf-klein::before { width: 18px; height: 18px; }
  section { padding: 84px 0; }
  .start { padding: 36px 0 100px; }
  .start .breite, .seite-kopf .breite, .ueber-uns .breite, .inhalt .breite, .vorteile-band, .abschnitt-kopf, .zwei-spalten { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .start-logo { width: min(78%, 300px); margin-bottom: 30px; }
  .start-bild > img { aspect-ratio: 4 / 3.3; border-radius: 22px; }
  .glas { left: 12px; right: 12px; bottom: -48px; padding: 14px 8px; }
  .glas b { font-size: 26px; }
  .glas span { font-size: 12px; }
  .seite-kopf { padding: 36px 0 70px; }
  .seite-kopf h1 { font-size: clamp(32px, 8.4vw, 44px); hyphens: auto; -webkit-hyphens: auto; }  /* „Wasserschadensanierung“ passt sonst nicht */
  .seite-kopf img { border-radius: 22px; }
  .inhalt .breite + .breite { margin-top: 70px; }
  .vorteile-band { margin-top: 70px; }
  .abschnitt-kopf { margin-bottom: 40px; align-items: start; }
  .kacheln { grid-template-columns: 1fr; grid-auto-rows: 280px; }
  .kachel, .kachel.breit, .kachel.halb { grid-column: auto; }
  .drei { grid-template-columns: 1fr; }
  .partner { grid-template-columns: 1fr 1fr; }
  .schritte { grid-template-columns: 1fr 1fr; }
  .wege { grid-template-columns: 1fr; }
  .aufruf { padding-top: 70px; }
  .aufruf-karte { padding: 44px 28px; border-radius: 24px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .breite { padding: 0 20px; }
  .liste li { grid-template-columns: 46px 1fr; }
  .knopf { padding: 15px 24px; }
  .partner, .schritte { grid-template-columns: 1fr; }
  .karte-liste, .kurzliste { padding: 6px 20px; }
  .zwei-spalten > div { padding: 24px 20px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}