/* Startseite / — gestaltete Mobilansicht (Auftrag Metehan 05.10.2026, Bilder 1–5).
   Grundsätze: alles zentriert, einheitlicher Seitenrand 20 px, ruhige Abstände, kompakte Karten,
   Nachrichten-Seitenleisten mobil ausgeblendet. Nur Gestaltung — kein Text, kein Link, kein Schema geändert.
   Wirkt nur bis 1024 px (Tablet / Fold aufgeklappt) bzw. 767 px (Telefone); Desktop bleibt unverändert. */

/* ---------- bis 1024 px: Seitenleisten raus, Raster einspaltig ---------- */
@media (max-width: 1024px) {
  main .it-leiste { display: none !important; }
  .it-video-block, .it-wissenfaq { display: block !important; padding-left: 0 !important; padding-right: 0 !important; }
  .it-video-block > *, .it-video-block__links > *, .it-wissenfaq > * { grid-column: auto !important; grid-row: auto !important; width: auto !important; max-width: 100% !important; }
  .it-video-block__links { display: block !important; }
}

/* ---------- Telefone und Fold/Tablet bis 1024 px (Inhalt mittig, max. 680 px breit) ---------- */
@media (max-width: 1024px) {
  :root { --m-rand: max(20px, calc((100vw - 680px) / 2)); --m-abschnitt: 48px; }
  main#inhalt { text-align: center; }
  main#inhalt h2 { font-size: clamp(23px, 6.6vw, 28px) !important; line-height: 1.25 !important; letter-spacing: -.01em; text-align: center !important; }
  main#inhalt h3 { text-align: center !important; }
  main#inhalt p, main#inhalt li, main#inhalt blockquote { text-align: center !important; }
  main#inhalt img { margin-left: auto; margin-right: auto; }

  /* Knöpfe: volle Breite, zweizeilig erlaubt, Inhalt mittig */
  main#inhalt .it-knopf:not(.it-knopf--text) { display: flex !important; justify-content: center; width: 100% !important; max-width: 400px !important; margin-left: auto !important; margin-right: auto !important; min-height: 52px; padding: 12px 22px !important; border-radius: 999px !important; box-sizing: border-box; }
  main#inhalt .it-knopf__inhalt { justify-content: center !important; align-items: center !important; gap: 10px; text-align: center; }
  main#inhalt .it-knopf__i { margin-top: 0 !important; flex: none; }
  main#inhalt .it-knopf--text { display: inline-flex !important; margin: 14px auto 0 !important; }

  /* 1 · Hero: Text beginnt unter dem festen Kopf, mittig */
  .it-hero { display: block !important; min-height: 0 !important; padding: 140px var(--m-rand) 48px !important; text-align: center; background-position: 62% center !important; }
  .it-hero > .it-huelle--hero { width: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; }
  .it-hero h1.it-hero__dach { font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: .02em; opacity: .95; margin: 0 0 10px !important; text-align: center !important; }
  .it-hero h1:not(.it-hero__dach), .it-hero .it-hero__titel { font-size: clamp(22px, 6.4vw, 27px) !important; line-height: 1.25 !important; text-align: center !important; margin: 0 !important; }
  .it-hero { position: relative; isolation: isolate; }
  .it-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(3,30,64,.55) 0%, rgba(3,30,64,.35) 55%, rgba(3,30,64,.6) 100%); pointer-events: none; }
  .it-hero .it-knopf { margin-top: 26px !important; }

  /* 1 · Zahlenband: 2 × 2, mittig */
  .it-band { padding: 0 !important; }
  .it-band__gitter { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 22px 12px !important; padding: 32px var(--m-rand) !important; }
  .it-zahl { align-items: center !important; text-align: center !important; padding: 0 !important; }
  .it-zahl__wert { font-size: clamp(28px, 9vw, 36px) !important; line-height: 1.1 !important; }
  .it-zahl__wort { font-size: 14px !important; line-height: 1.35 !important; margin-top: 4px; }

  /* 2 · Preisstaffel: Bestpreis-Karte oben über volle Breite, die übrigen kompakt 2 × 2 */
  .it-preise { padding-top: var(--m-abschnitt) !important; padding-bottom: 8px !important; }
  .it-preise .it-huelle--breit { padding-left: var(--m-rand) !important; padding-right: var(--m-rand) !important; }
  .it-preise .it-kicker { display: inline-block; font-size: 12.5px !important; line-height: 1.4 !important; padding: 8px 14px !important; }
  .it-preise__titel { margin-top: 18px !important; }
  .it-preise__text { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 14px !important; }
  .it-karten { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 26px !important; }
  .it-karte { padding: 14px 10px 12px !important; border-radius: 14px !important; text-align: center !important; align-items: center; min-width: 0; }
  .it-karte:hover { transform: none !important; }
  .it-karte--best { grid-column: 1 / -1; padding: 24px 16px 16px !important; }
  .it-karte__fahne { left: 50% !important; transform: translateX(-50%); white-space: nowrap; font-size: 11px !important; }
  .it-karte__grad { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px !important; letter-spacing: .04em; margin: 0 !important; }
  .it-karte__grad b { width: 24px !important; height: 24px !important; font-size: 13px !important; border-radius: 7px !important; margin-right: 0 !important; }
  .it-karte__eigen { font-size: 11.5px !important; margin: 8px 0 0 !important; }
  .it-karte__effektiv { font-size: 10.5px !important; margin: 6px 0 0 !important; }
  .it-karten .it-karte .it-karte__preis { font-size: clamp(22px, 7vw, 28px) !important; line-height: 1.1 !important; margin: 2px 0 0 !important; }
  .it-karten .it-karte--best .it-karte__preis { font-size: clamp(32px, 10vw, 42px) !important; }
  .it-karte__monat { font-size: 11px !important; margin: 0 !important; }
  .it-karte__bedarf { font-size: 11.5px !important; line-height: 1.35 !important; margin: 8px 0 0 !important; padding-top: 8px !important; border-top: 1px dashed #dde8f1; width: 100%; }
  .it-karten .it-karte__mehr { justify-content: center; font-size: 11.5px !important; margin-top: 6px !important; padding-top: 6px !important; white-space: nowrap; opacity: .85; }
  .it-karten .it-karte:not(.it-karte--best) .it-karte__mehr > svg { display: none; }
  .it-preise__fuss, .it-preise p, .it-preise__zusatz { font-size: 13.5px !important; line-height: 1.55 !important; }
  .it-preise__ueberschrift { margin-top: 36px !important; }

  /* Kassenlogos: 2 × 2, ruhig */
  .it-kassen { grid-template-columns: 1fr 1fr !important; gap: 18px 16px !important; align-items: center; justify-items: center; padding: 18px 0 var(--m-abschnitt) !important; }
  .it-kassen img { width: auto !important; max-width: 100% !important; max-height: 64px !important; height: auto !important; object-fit: contain; }

  /* Entlastung: Überschrift normal groß, Bild flach */
  .it-entlastung { padding: var(--m-abschnitt) var(--m-rand) !important; gap: 22px !important; }
  .it-entlastung > h2 { font-size: clamp(24px, 7vw, 30px) !important; }
  .it-entlastung > div > svg { display: block; margin: 0 auto 10px; }
  .it-entlastung p { font-size: 16px !important; line-height: 1.65 !important; }
  .it-entlastung > img { max-height: 280px !important; border-radius: 18px; object-fit: cover; }
  .it-termin { justify-content: center; flex-wrap: wrap; gap: 10px !important; }

  /* Leistungen: kompakte Karten mit flachem Bild */
  .it-huelle > .it-abschnitt-titel { padding-top: var(--m-abschnitt); }
  .it-leistungen { gap: 16px !important; padding-left: var(--m-rand) !important; padding-right: var(--m-rand) !important; margin-top: 22px !important; }
  .it-leistung { align-items: center !important; text-align: center !important; padding: 20px 18px 18px !important; border-radius: 18px; background: #fff; box-shadow: 0 6px 22px rgba(3,52,109,.08); height: auto !important; }
  .it-leistung h3 { flex-direction: column; align-items: center !important; gap: 8px !important; font-size: 19px !important; line-height: 1.3 !important; margin: 0 0 12px !important; }
  .it-leistung h3 svg { width: 40px !important; height: 40px !important; }
  .it-leistung__bild { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border-radius: 12px; background-size: cover !important; background-position: center !important; margin: 0 !important; }
  .it-leistung p { font-size: 15.5px !important; line-height: 1.6 !important; margin-top: 12px !important; }

  /* Video, Verfügbarkeits-Check, Galerie, Presse */
  .it-video-block { padding: var(--m-abschnitt) var(--m-rand) 0 !important; }
  .it-video-titel b { display: inline !important; }
  .it-video { height: auto !important; margin-top: 18px; border-radius: 16px; overflow: hidden; }
  .it-video video { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; }
  .it-check { margin: 32px 0 0 !important; padding: 30px 18px !important; border-radius: 20px !important; }
  .it-check h2 { font-size: clamp(22px, 6.4vw, 26px) !important; }
  .it-check p { font-size: 15.5px !important; line-height: 1.6 !important; }
  .it-schritte { justify-content: center !important; gap: 8px !important; padding: 0 !important; }
  .it-check__belege { justify-content: center !important; gap: 6px 14px !important; }
  .it-galerie { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 32px 0 !important; }
  .it-galerie__marke { grid-column: 1 / -1; width: auto !important; padding-top: 0 !important; }
  .it-galerie img { height: 150px !important; border-radius: 12px; }
  .it-presse { grid-template-columns: 1fr !important; gap: 16px !important; padding: 8px 0 var(--m-abschnitt) !important; }
  .it-presse img { width: 100% !important; height: 190px !important; border-radius: 16px; }
  .it-presse h3, .it-presse time { font-size: 20px !important; }
  .it-presse p { font-size: 15.5px !important; line-height: 1.6 !important; }

  /* Bewertungen: waagerecht wischbar, eine Karte pro Blick */
  .it-stimmen { padding-top: var(--m-abschnitt) !important; padding-bottom: var(--m-abschnitt) !important; }
  .it-stimmen__kopf { display: block !important; }
  .it-stimmen__kopf > div:first-child { padding: 0 var(--m-rand); }
  .it-stimmen h2 span { display: inline !important; }
  .it-google { justify-content: center; gap: 12px !important; margin: 16px auto 0 !important; width: fit-content; max-width: 100%; }
  .it-google img { width: 48px !important; height: 48px !important; }
  .it-google__reihe { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px !important; }
  .it-google__wert { font-size: 18px !important; letter-spacing: .04em !important; white-space: nowrap; }
  .it-google .it-sterne { flex-wrap: nowrap !important; }
  .it-google .it-sterne img { width: 16px !important; height: 16px !important; }
  .it-google__wort { font-size: 12.5px !important; letter-spacing: .08em !important; text-align: left; }
  .it-stimme { margin: 0 !important; padding: 26px 20px 20px !important; font-size: 15.5px !important; line-height: 1.6 !important; text-align: center; align-items: center; }
  .it-stimme > *, .it-stimme p { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .it-stimme__zitat { width: 34px !important; height: 34px !important; margin: 0 auto 14px !important; }
  .it-stimme__fuss { flex-direction: column; gap: 10px !important; padding-top: 18px !important; }
  .it-stimme__pfeile { margin: 6px auto 0 !important; }
  .it-stimme__pfeile a { width: 44px !important; height: 44px !important; }
  .it-stimmen__liste { display: grid !important; grid-auto-flow: column; grid-auto-columns: 100%; grid-template-columns: none !important; gap: calc(var(--m-rand) * 2) !important; overflow-x: auto; scroll-snap-type: x mandatory; padding: 22px var(--m-rand) 8px !important; scroll-padding-inline: var(--m-rand); }
  .it-stimmen__liste > * { scroll-snap-align: start; min-width: 0; width: auto !important; }

  /* Situation, Zitat, Kümmern, Partner, Team, Resultate */
  .it-situation { padding: var(--m-abschnitt) var(--m-rand) !important; }
  .it-sitkarten { grid-template-columns: 1fr !important; gap: 10px !important; margin: 22px auto 6px !important; padding: 0 !important; max-width: 520px; }
  /* Situationskarten (Metehan 06.10.): ruhige, kompakte Auswahl statt roter Kanten */
  .it-sitkarte { min-height: 0 !important; padding: 15px 44px 15px 18px !important; border-radius: 14px !important; background: #fff !important; border: 1px solid #dbe6f0 !important; box-shadow: 0 2px 10px rgba(3,52,109,.06) !important; position: relative; transform: none !important; }
  .it-sitkarte::after { content: "\203A"; position: absolute; right: 16px; top: 50%; transform: translateY(-52%); font-size: 26px; line-height: 1; font-weight: 400; color: #2fa8e0; }
  .it-sitkarte:active { background: #eef6fc !important; border-color: #2fa8e0 !important; }
  .it-sitkarte span { font-size: 15.5px !important; line-height: 1.4 !important; font-weight: 600 !important; color: #03346D !important; }
  .it-situation h2 { font-size: clamp(20px, 6vw, 24px) !important; text-transform: none !important; letter-spacing: 0 !important; }
  .it-situation-band { padding: 0 !important; background: #f4f7fb !important; }
  .it-situation__schluss { font-size: 17px !important; line-height: 1.5 !important; margin-top: 22px !important; }
  .it-zitat { padding: var(--m-abschnitt) 0 !important; }
  .it-zitat blockquote { font-size: 20px !important; line-height: 1.45 !important; }
  .it-kuemmern { padding: var(--m-abschnitt) var(--m-rand) !important; gap: 28px !important; }
  .it-kuemmern img { width: 100% !important; max-height: 300px; object-fit: cover; border-radius: 18px; margin-top: 22px !important; }
  .it-kuemmern__text { font-size: 15.5px !important; line-height: 1.65 !important; }
  .it-kuemmern__cta { padding: 26px 18px !important; border-radius: 18px; margin-top: 22px !important; }
  .it-kuemmern__cta h3 { font-size: 20px !important; line-height: 1.35 !important; }
  .it-punkte { gap: 22px !important; }
  .it-punkt { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 10px !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: 100% !important; grid-template-columns: none !important; }
  .it-punkt > * { margin-left: 0 !important; }
  .it-punkt > svg, .it-punkt__i { position: static !important; align-self: center !important; margin: 0 auto !important; width: 36px !important; height: 36px !important; }
  .it-team__zahl { justify-content: center !important; gap: 2px; }
  .it-partner { padding: var(--m-abschnitt) var(--m-rand) !important; }
  .it-partner__gitter, .it-team__gitter, .it-resultate__gitter { padding-left: 0 !important; padding-right: 0 !important; }
  .it-team { padding: var(--m-abschnitt) var(--m-rand) !important; }
  .it-team__kasten, .it-team__saeule { text-align: center !important; padding: 24px 18px !important; }
  .it-team__kasten *, .it-team__saeule * { text-align: center !important; justify-content: center !important; margin-left: auto !important; margin-right: auto !important; }
  .it-zitat p { color: #cfe8f7 !important; }
  .it-team img { height: auto !important; aspect-ratio: 16 / 10; border-radius: 16px 16px 0 0; }
  .it-team__zitat { width: auto !important; margin-top: 0 !important; padding: 22px 18px !important; border-radius: 0 0 16px 16px !important; }
  .it-team__zitat h4 { font-size: clamp(18px, 5.6vw, 22px) !important; line-height: 1.35 !important; hyphens: manual !important; }
  .it-team__kasten { border-radius: 16px; margin-top: 4px; }
  .it-team h3 { font-size: clamp(18px, 5.6vw, 22px) !important; line-height: 1.35 !important; }
  .it-team__zahl { font-size: clamp(38px, 12vw, 52px) !important; }
  .it-team__zahl sup { font-size: .55em !important; }
  .it-team__wort { font-size: clamp(24px, 8vw, 32px) !important; line-height: 1.25 !important; hyphens: manual !important; }
  main#inhalt .it-knopf--text, main#inhalt .it-knopf--text * { white-space: nowrap; }
  .it-fuss__zeile { flex-wrap: nowrap !important; }
  .it-resultate { padding: var(--m-abschnitt) var(--m-rand) !important; }
  .it-resultate__zahlen { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .it-resultate__zahlen .it-resultate__zahl { text-align: center !important; padding: 18px 6px !important; min-width: 0; }
  .it-resultate__zahl span { font-size: clamp(28px, 9vw, 38px) !important; justify-content: center; }
  .it-resultate__zahl h4 { font-size: 15px !important; line-height: 1.35 !important; hyphens: manual !important; overflow-wrap: normal !important; }
  .it-resultate img { max-height: 180px; width: auto !important; }
  .it-partner__gitter h3, .it-partner h3 { color: #bfe0f5 !important; }

  /* Ratgeber-Beiträge: kompakte Karten 2 × n */
  .it-wissenfaq { padding: var(--m-abschnitt) var(--m-rand) !important; }
  .it-wissen h2 { margin-bottom: 20px !important; }
  .it-beitraege { grid-template-columns: 1fr 1fr !important; gap: 14px 10px !important; }
  .it-beitrag { text-align: center !important; min-width: 0; }
  .it-beitrag img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
  .it-beitrag__meta { justify-content: center; flex-wrap: wrap; gap: 4px 8px !important; font-size: 11.5px !important; }
  .it-beitrag h3 { font-size: 14px !important; line-height: 1.35 !important; margin-top: 6px !important; }
  .it-beitrag p:not(.it-beitrag__meta) { display: none; }

  /* FAQ */
  .it-faq { margin-top: var(--m-abschnitt); }
  .it-faq__gitter { grid-template-columns: 1fr !important; gap: 0 !important; }
  .it-faq h2 { font-size: clamp(22px, 6.4vw, 26px) !important; }
  .it-faq summary { justify-content: center !important; text-align: center !important; gap: 10px; }
  .it-faq details p, .it-faq details div { text-align: center !important; }

  /* Fuß: mittig, kompakt, Symbole direkt vor dem Text */
  .it-fuss { padding: 40px 0 28px !important; }
  .it-fuss .it-huelle { padding-left: var(--m-rand) !important; padding-right: var(--m-rand) !important; }
  .it-fuss__gitter { gap: 14px !important; text-align: center; }
  .it-fuss__gitter > * { text-align: center !important; padding: 24px 18px !important; border-radius: 16px; }
  .it-fuss p, .it-fuss li, .it-fuss a { font-size: 16px !important; line-height: 1.8 !important; }
  .it-fuss .it-fuss__kopf { font-size: 21px !important; margin-bottom: 10px !important; }
  .it-fuss__marke b { font-size: 24px !important; }
  .it-fuss__unterzeile { margin-bottom: 12px !important; font-size: 16px !important; }
  .it-fuss nav li, .it-fuss__zeile { justify-content: center !important; gap: 8px !important; }
  .it-fuss__zeile { flex-wrap: wrap; }
  .it-fuss__sozial { justify-content: center !important; }
  .it-fuss__unten { justify-content: center !important; text-align: center; margin-top: 24px !important; font-size: 13.5px !important; }
}
@media (max-width: 340px) {
  .it-karten { gap: 8px !important; }
  .it-karte { padding: 12px 6px 10px !important; }
  .it-karte__grad { flex-direction: column; gap: 4px !important; font-size: 10px !important; letter-spacing: 0; white-space: nowrap; }
  .it-karte--best .it-karte__grad { flex-direction: row; }
  .it-karte__bedarf { font-size: 10.5px !important; hyphens: manual !important; overflow-wrap: normal !important; }
  .it-karte__eigen { font-size: 10.5px !important; }
  .it-beitraege { grid-template-columns: 1fr !important; }
}

/* M9 (06.10.2026): Zahlenband 1025–1320 px – feste Spalten ragten rechts hinaus → vier flexible Spalten. Darüber unverändert. */
@media (min-width: 1025px) and (max-width: 1320px) { .it-band__gitter { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding-left: 24px; padding-right: 24px; } }

/* M10 (06.10.2026): Startseite 1025–1320 px – feste Desktop-Spalten ragten rechts hinaus → flexible Spalten, Seitenleiste 260 px. Darüber unverändert. */
@media (min-width: 1025px) { .it-huelle--hero { max-width: min(1467px, 100%) !important; box-sizing: border-box; } }
@media (min-width: 1025px) and (max-width: 1320px) {
  .it-entlastung { grid-template-columns: minmax(0, 1fr) minmax(0, 340px) 260px !important; column-gap: 28px !important; padding-right: 20px; }
  .it-leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px !important; padding-left: 20px; padding-right: 20px; }
  .it-video-block { grid-template-columns: minmax(0, 1fr) 260px !important; column-gap: 32px !important; padding-right: 20px !important; }
  .it-kuemmern { grid-template-columns: minmax(0, 640fr) minmax(0, 527fr) !important; gap: 48px !important; padding-left: 20px; padding-right: 20px; }
  .it-wissenfaq { grid-template-columns: minmax(0, 1fr) 260px !important; column-gap: 32px !important; padding-right: 20px !important; }
  .it-leiste { width: 260px !important; max-width: 100%; }
  .it-leistung img { max-width: 100%; height: auto; }
  .it-kuemmern > div:first-child > img { width: calc(100% - 40px) !important; max-width: 486px; margin-left: 40px !important; }
  .it-kuemmern > div:nth-child(2) > img { width: 100% !important; max-width: 370px; margin-left: 0 !important; }
}