﻿/* Mobil-Anpassung Ihr Team 24 — Neubau, 05.10.2026 (Auftrag Metehan).
   Zielbreiten: 280 px (Galaxy Z Fold 3 zugeklappt) bis 440 px (iPhone 17 Pro Max), Tablet/Fold aufgeklappt bis 1024 px.
   Desktop über 1024 px bleibt unverändert: alle Regeln stehen in max-width-Abfragen. */

/* ---------- Menü-Knopf und Menü (nur bis 1024 px) ---------- */
.mm-knopf, .mm-menue, .mm-schleier { display: none; }
@media (max-width: 1024px) {
  .it-kopf .it-kopf__reihe { padding-inline: 16px !important; gap: 12px; justify-content: space-between; }
  .it-kopf .it-marke { flex: 0 1 auto; min-width: 0; }
  .it-kopf .it-marke img { width: auto; height: auto; max-width: min(167px, calc(100vw - 120px)); max-height: 48px; }
  .mm-knopf { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; background: rgba(3,52,109,.35); color: #fff; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mm-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .mm-knopf .mm-i { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; }
  .mm-schleier { display: block; position: fixed; inset: 0; z-index: 9998; background: rgba(3,20,45,.45); opacity: 0; transition: opacity .25s ease; }
  .mm-schleier--offen { opacity: 1; }
  .mm-menue { display: flex; flex-direction: column; position: fixed; inset: 0 0 0 auto; z-index: 9999; width: min(420px, 100vw); height: 100%; height: 100dvh; background: #fff; color: #0b2545; box-shadow: -12px 0 40px rgba(0,0,0,.18); transform: translateX(100%); transition: transform .25s ease; overscroll-behavior: contain; font-family: inherit; padding-bottom: env(safe-area-inset-bottom); }
  .mm-menue--offen { transform: none; }
  .mm-menue[hidden], .mm-schleier[hidden] { display: none; }
  html.mm-gesperrt, html.mm-gesperrt body { overflow: hidden; }
  .mm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; min-height: 64px; border-bottom: 1px solid #e3eaf2; background: linear-gradient(90deg, #03346D, #2877A6); }
  .mm-marke img { display: block; width: auto; height: auto; max-height: 40px; max-width: calc(100% - 8px); }
  .mm-zu { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .mm-zu .mm-i { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; }
  .mm-zu:focus-visible, .mm-menue a:focus-visible, .mm-auf:focus-visible { outline: 3px solid #2877A6; outline-offset: 2px; }
  .mm-inhalt { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 16px; }
  .mm-liste, .mm-unterliste { list-style: none; margin: 0; padding: 0; }
  .mm-punkt { border-bottom: 1px solid #edf1f6; }
  .mm-haupt, .mm-auf { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 12px 20px; font-family: inherit; font-weight: 700; font-size: 18px; line-height: 1.25; color: #03346D; text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; }
  .mm-haupt[aria-current="page"], .mm-eintrag[aria-current="page"] { color: #2877A6; box-shadow: inset 4px 0 0 #2877A6; }
  .mm-auf .mm-i { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; transition: transform .2s ease; }
  .mm-auf[aria-expanded="true"] .mm-auf__pfeil { transform: rotate(180deg); }
  .mm-gruppen { padding: 0 12px 12px; background: #f6f9fc; }
  .mm-gruppen[hidden] { display: none; }
  .mm-gruppe { padding-top: 10px; }
  .mm-gruppe__kopf { margin: 6px 8px 4px; font-family: inherit; font-weight: 700; font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: #5a7590; }
  .mm-eintrag { display: flex; flex-direction: column; gap: 2px; min-height: 48px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: #0b2545; }
  .mm-eintrag:active { background: #e8f1f8; }
  .mm-eintrag__titel { font-family: inherit; font-weight: 600; font-size: 16px; line-height: 1.3; }
  .mm-eintrag__zusatz { font-family: inherit; font-weight: 400; font-size: 13.5px; line-height: 1.35; color: #4d6a85; }
  .mm-fuss { flex: none; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid #e3eaf2; background: #fff; }
  .mm-handeln { display: grid; gap: 10px; }
  .mm-cta { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 12px 16px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; text-align: center; }
  .mm-cta .mm-i { width: 20px; height: 20px; flex: none; stroke: currentColor; stroke-width: 2; fill: none; stroke-linejoin: round; }
  .mm-cta--haupt { background: linear-gradient(90deg, #03346D, #2877A6); color: #fff; }
  .mm-cta--tel { background: #fff; color: #03346D; border: 2px solid #03346D; }
  .mm-sozial { display: flex; justify-content: center; gap: 18px; margin-top: 12px; }
  .mm-sozial a { display: inline-flex; padding: 8px; font-size: 0; }
  .mm-sozial svg { width: 22px; height: 22px; }
}
@media (max-width: 340px) {
  .it-kopf .it-kopf__reihe { padding-inline: 12px !important; gap: 8px; }
  .it-kopf .it-marke img { max-width: calc(100vw - 92px); }
  .mm-knopf { padding: 8px 10px; }
  .mm-knopf__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1024px) and (max-height: 720px) {
  .mm-kopf { min-height: 56px; padding-block: 6px; }
  .mm-haupt, .mm-auf { min-height: 50px; }
  .mm-fuss { padding-top: 10px; }
  .mm-handeln { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mm-cta { min-height: 46px; padding: 8px 10px; font-size: 14px; }
  .mm-sozial { margin-top: 6px; }
}
@media (max-width: 360px) and (max-height: 720px) { .mm-handeln { grid-template-columns: 1fr; } .mm-sozial { display: none; } }
/* Nachbesserung nach Prüfung Block 1 (05.10.2026): Textlogo der Startseite, Symbolstrich, Zierband der Beiträge */
@media (max-width: 1024px) {
  .ra-band { height: 96px !important; }
  .mm-marke { color: #fff !important; text-decoration: none; line-height: 1.05; display: block; min-width: 0; }
  .mm-marke b { display: block; font-size: 22px; font-weight: 700; color: #fff; }
  .mm-marke span { display: block; font-size: 13px; opacity: .92; color: #fff; }
  .mm-menue .mm-i, .mm-knopf .mm-i { fill: none !important; stroke: currentColor !important; stroke-width: 2.4 !important; }
  .mm-zu .mm-i { width: 24px !important; height: 24px !important; }
  .mm-zu { padding: 0 !important; min-width: 44px; }
  .mm-menue .mm-i, .mm-knopf .mm-i { flex: none !important; }
  .mm-auf, .mm-haupt, .mm-cta, .mm-knopf { box-sizing: border-box; }
}
@media (max-width: 480px) {
  .it-sterne { flex-wrap: wrap; width: auto !important; max-width: 100%; }
  .it-sterne img { width: clamp(16px, 5.5vw, 27px) !important; height: auto !important; }
}
@media (max-width: 360px) {
  .ra-artikel h1 { font-size: 24px !important; line-height: 1.25 !important; }
}
/* Menü-Hierarchie (Metehan 05.10., Bild 7): Ebene 1 Hauptpunkte – Ebene 2 Gruppenüberschrift – Ebene 3 Unterseiten klar getrennt */
@media (max-width: 1024px) {
  .mm-haupt, .mm-auf { font-size: 18px !important; font-weight: 700 !important; color: #03346D !important; }
  .mm-auf[aria-expanded="true"] { background: #03346D !important; color: #fff !important; }
  .mm-auf--hier > span::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fa8e0; margin-left: 10px; vertical-align: middle; }
  .mm-gruppen { background: #f1f6fb !important; padding: 4px 0 14px !important; border-bottom: 1px solid #dfe8f1; }
  .mm-gruppe { padding-top: 14px !important; }
  .mm-gruppe__kopf { margin: 0 20px 6px !important; padding-bottom: 6px; border-bottom: 2px solid #2fa8e0; display: inline-block; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: .1em !important; color: #2877A6 !important; }
  .mm-eintrag { margin: 0 12px; padding: 10px 12px 10px 16px !important; min-height: 44px !important; border-radius: 10px; border-left: 3px solid transparent; }
  .mm-eintrag__titel { font-size: 15.5px !important; font-weight: 600 !important; color: #0b2545 !important; }
  .mm-eintrag__zusatz { font-size: 12.5px !important; color: #6b8299 !important; }
  .mm-eintrag[aria-current="page"] { background: #fff; border-left-color: #2fa8e0; box-shadow: 0 2px 8px rgba(3,52,109,.08) !important; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .mm-menue, .mm-schleier, .mm-auf .mm-i { transition: none; } }

/* ---------- Inhalte: allgemeine Schutzregeln bis 1024 px ---------- */
@media (max-width: 1024px) {
  main img, main video, main iframe, .it-hauptinhalt img { max-width: 100%; height: auto; }
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* ---------- Tablet / Fold 3 aufgeklappt (bis 1024 px): Startseite ---------- */
@media (max-width: 1024px) {
  .it-wissenfaq { grid-template-columns: minmax(0, 1fr) !important; }
  .it-wissenfaq > * { min-width: 0; max-width: 100%; width: auto; }
  .it-hero .it-huelle--hero { min-width: 0; max-width: 100%; }
}
@media (max-width: 1024px) {
  /* Elementor-Nachbau: nichts breiter als der Behälter, Zeilen dürfen umbrechen, Zoom-Effekte aus */
  .ue-innen > *, .ue-spalte { max-width: 100% !important; min-width: 0 !important; }
  .ue-spalte--voll, .ue-innen { flex-wrap: wrap !important; }
  .ue-spalte--voll { margin-left: 0 !important; margin-right: 0 !important; }
  .it-entlastung { padding-inline: 20px !important; }
  .it-leiste__eintrag > div { width: auto !important; max-width: 100% !important; }
  .ue-band--voll { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; }
  .ue-bild, .ue-spalte { transform: none !important; }
  /* Startseite: Zahlenband zweispaltig, Team-Zitat und Bilder im Behälter */
  .it-band__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .it-band__gitter > * { min-width: 0; max-width: 100%; width: auto; }
  .it-team__zitat { width: auto !important; max-width: 100% !important; }
  .it-team img, .it-team__gitter img, .it-team__saeule img { margin-left: 0 !important; max-width: 100% !important; height: auto; }
  /* Entlastung: feste Rasterpositionen aufheben, sonst entstehen Zusatzspalten */
  .it-entlastung { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; }
  .it-entlastung > * { grid-column: 1 / -1 !important; grid-row: auto !important; min-width: 0; max-width: 100% !important; margin-left: 0 !important; }
  .it-entlastung > img { width: 100% !important; height: auto !important; max-height: 70vh; object-fit: cover; }
  /* Nachrichtenleiste: Bild über dem Text, sonst schiebt das Bild den Text aus dem Bild */
  .it-leiste__eintrag { flex-direction: column !important; }
  .it-leiste__eintrag > img { width: 100% !important; height: auto; max-width: 100%; }
  .it-leiste__eintrag > * { min-width: 0; max-width: 100%; }
  /* Hero */
  .it-hero .it-huelle--hero { margin-inline: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .it-hero .it-huelle--hero > * { max-width: 100%; box-sizing: border-box; }
}
/* ---------- Telefone und kleine Tablets (bis 767 px) ---------- */
@media (max-width: 767px) {
  /* Elementor-Nachbau (Leistungs-, Über-uns-, Kontaktseiten): Spalten untereinander */
  .ue-innen, .ue-spalte--voll { flex-direction: column !important; flex-wrap: nowrap !important; }
  .ue-innen > *, .ue-spalte--voll > *, .ue-spalte { max-width: 100% !important; width: 100% !important; min-width: 0 !important; flex-shrink: 1 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .ue-band--voll { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; }
  .ue-bild img { max-width: 100%; height: auto; }
  .ue-knopf, .ue-knopf__a { max-width: 100%; white-space: normal; }
  /* Startseite */
  .it-entlastung, .it-video-block, .it-team__gitter, .it-resultate__gitter, .it-huelle--breit, .it-leistungen, .it-karten { grid-template-columns: minmax(0, 1fr) !important; }
  .it-entlastung > *, .it-video-block > *, .it-video-block__links > *, .it-team__gitter > *, .it-huelle--breit > *, .it-leistungen > *, .it-karten > * { min-width: 0; max-width: 100%; }
  .it-team__saeule, .it-team__kasten, .it-resultate__zahlen { width: auto !important; }
  .it-leiste { width: 100% !important; max-width: 100%; }
  /* Städteseiten / Rechner / Beiträge: Raster mit fester Spaltenbreite einspaltig */
  .hc-autor__raster, .hc-story-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .hc-autor__raster > *, .hc-story-grid > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
  .it-band__gitter, .it-resultate__zahlen { grid-template-columns: minmax(0, 1fr) !important; }
  .it-resultate__zahl { width: auto !important; min-width: 0; }
  .it-leistung h3 > *, .it-leistung h3 { min-width: 0; }
  .it-leistung h3 { flex-wrap: wrap; }
  .it-stimme__fuss { flex-wrap: wrap; gap: 8px; }
  main img.it-ein { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; height: auto; }
  .hc-md-card { gap: 8px; }
  .hc-md-card > * { min-width: 0; }
  .hc-md-pfeil { flex: none; margin-left: 0 !important; }
  .hc-autor__knopfrand { max-width: 100%; white-space: normal; text-align: center; }
  main [style*="min-width:260px"], main [style*="min-width: 260px"] { min-width: 0 !important; flex-basis: 100% !important; }
}
/* ---------- schmale Telefone (bis 480 px) ---------- */
@media (max-width: 480px) {
  .hc-quart__gitter, .hc-schwer__gitter, .hc-pdaten__gitter, .hc-vnetz__gitter, .hc-pg-cols, .hc-pgr-card, .hc-value-grid,
  .vlist, .at-prinzipien, .davinci-related-posts > div { grid-template-columns: minmax(0, 1fr) !important; }
  .hc-quart__gitter > *, .hc-schwer__gitter > *, .hc-pdaten__gitter > *, .hc-vnetz__gitter > *, .hc-pg-cols > *, .hc-pgr-card > *, .hc-value-grid > *,
  .vlist > *, .at-prinzipien > *, .davinci-related-posts > div > * { min-width: 0; max-width: 100%; width: auto; }
  .hc-trust-3 > * { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .hc-trust-card { padding-left: 16px !important; padding-right: 16px !important; }
  .hc-hero-contact { display: flex; max-width: 100%; }
  .hc-hero-contact-body { min-width: 0; overflow-wrap: anywhere; }
  .lp-md-hint { margin-left: 0 !important; max-width: 100%; white-space: normal; }
  .ue-zaehler__zahl { flex-wrap: wrap; font-size: clamp(44px, 18vw, 72px) !important; }
  .ue-zaehler__nach, .ue-zaehler__vor { font-size: inherit; }
}
@media (max-width: 480px) {
  h1, h2, h3, h4, .hc-hero h1, .it-hero__titel { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
  main p, main li, main td, main th, main summary, main a, main strong, main span { overflow-wrap: break-word; }
  main nav [class$="trenner"] { display: inline-block; } /* Brotkrumen ohne Leerzeichen: Umbruch am „›“ statt mitten im Wort */
  .hc-btn, .it-knopf, main a[class*="btn"], main button { white-space: normal; max-width: 100%; }
}

@media (max-width: 480px) { .it-resultate__zahl { padding-left: 0 !important; padding-right: 0 !important; } }
@media (max-width: 1024px) { .it-hero > .it-huelle--hero { flex: 0 0 100%; width: 100% !important; margin: 0 !important; left: auto; } .it-beitraege { width: 100%; grid-template-columns: minmax(0, 1fr) !important; } .it-beitraege > * { min-width: 0; max-width: 100%; width: auto; } }
