/* Netzwerktechnik Wien – Desktop/Tablet-Erweiterung des Stitch-Layouts.
   Mobil (< 640px) bleibt unverändert: alle Regeln stehen in min-width-Queries. */

/* ---------- Tablet: etwas mehr Breite ---------- */
@media (min-width: 640px) {
  .ntw-m-sec, .ntw-m-header-in, .ntw-m-hero-in, .ntw-m-uhero-in, .ntw-m-pagehero-in, .ntw-m-footer-in, .ntw-m-drawer ul { max-width: 42rem; }
  .ntw-m-svc { display: grid; grid-template-columns: 1fr 1fr; }
  .ntw-m-post { flex-basis: calc(50% - 6px); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .ntw-m { --ntw-max: 82rem; padding-bottom: 0; }
  .ntw-m-sec, .ntw-m-header-in, .ntw-m-hero-in, .ntw-m-uhero-in, .ntw-m-pagehero-in, .ntw-m-footer-in { max-width: var(--ntw-max); padding-left: 2rem; padding-right: 2rem; }
  .ntw-m-sec { padding-top: 4rem; padding-bottom: 2rem; }
  .ntw-m-bar { display: none !important; }

  /* Typografie etwas größer */
  .ntw-m-h2 { font-size: 2rem; }
  .ntw-m-sub { font-size: .9rem; }
  .ntw-m-body { padding: 2rem; }
  .ntw-m-body p, .ntw-m-utext p, .ntw-m-article p, .ntw-m-welcome p, .ntw-m-about-body p { font-size: .98rem; line-height: 1.75; }
  .ntw-m-article ul.is-style-ntw-check li, .ntw-m-check li { font-size: .95rem; }
  .ntw-m-article h2 { font-size: 1.3rem; }
  .ntw-m-article h3 { font-size: 1.08rem; }
  .ntw-m details.wp-block-details summary { font-size: .95rem; padding: 1rem 1.1rem; }
  .ntw-m details.wp-block-details > :not(summary) { font-size: .92rem !important; padding-left: 1.1rem; padding-right: 1.1rem; }

  /* Header: Logo | Navigation | Telefon + Anfrage (eine Flex-Zeile) */
  .ntw-m-header { display: flex; align-items: center; gap: 1.5rem; height: 4.75rem; padding: 0 max(2rem, calc((100% - var(--ntw-max)) / 2 + 2rem)); }
  .ntw-m-header-in { display: contents; }
  .ntw-m-logo-badge { order: 1; max-width: none; flex-shrink: 0; }
  .ntw-m-logo-badge img { height: 2.6rem; }
  .ntw-m-burger { display: none; }
  .ntw-m-drawer { order: 2; display: block !important; flex: 1; background: none; border: 0; }
  .ntw-m-drawer > ul { flex-direction: row; justify-content: center; align-items: center; gap: .15rem; padding: 0; margin: 0; max-width: none; }
  .ntw-m-drawer li { position: relative; list-style: none; }
  .ntw-m-drawer > ul > li > a { padding: .6rem .8rem; font-size: .88rem; white-space: nowrap; }
  .ntw-m-drawer .current-menu-item > a, .ntw-m-drawer .current-menu-ancestor > a, .ntw-m-drawer .current-page-ancestor > a { color: #fff; background: rgba(59,130,246,.18); }
  .ntw-m-drawer .menu-item-has-children > a::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15rem) rotate(45deg); opacity: .7; }
  .ntw-m-drawer .sub-menu { position: absolute; top: 100%; left: 0; min-width: 18rem; display: none; flex-direction: column; gap: 2px; padding: .5rem; margin: 0; background: #0a192f; border: 1px solid rgba(59,130,246,.3); border-radius: .8rem; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
  .ntw-m-drawer li:hover > .sub-menu, .ntw-m-drawer li:focus-within > .sub-menu { display: flex; }
  .ntw-m-drawer .sub-menu a { font-size: .85rem; font-weight: 500; }
  .ntw-m-hactions { order: 3; display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
  .ntw-m-htel { display: inline-flex; align-items: center; gap: .45rem; color: #bfdbfe; font-weight: 600; font-size: .88rem; white-space: nowrap; }
  .ntw-m-htel svg { color: #34d399; }
  .ntw-m-hreq { padding: .65rem 1.2rem; border-radius: .7rem; background: var(--ntw-blue); color: #fff; font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
  .ntw-m-hreq:hover { background: var(--ntw-accent); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .ntw-m-header { gap: 1rem; }
  .ntw-m-htel { display: none !important; }
  .ntw-m-drawer > ul > li > a { padding: .55rem .55rem; font-size: .8rem; }
}
@media (min-width: 1024px) {

  /* ---------- Startseite ---------- */
  .ntw-m-hero-in { padding-top: 5rem; padding-bottom: 4rem; }
  .ntw-m-hero::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 42%; background: url('/wp-content/uploads/2025/02/4-1.webp') center/cover no-repeat; opacity: .35; -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); pointer-events: none; }
  .ntw-m-hero-slide > * { max-width: 40rem; }
  .ntw-m-hero h1, .ntw-m-hero-h { font-size: 3rem; }
  .ntw-m-hero p { font-size: 1.1rem; max-width: 36rem; }
  .ntw-m-cta { width: auto; align-self: flex-start; padding: 1rem 2rem; }
  .ntw-m-dots { justify-content: flex-start; }

  .ntw-m-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; align-items: center; }
  .ntw-m-split-head { grid-column: 1 / -1; margin-bottom: 2.5rem; }
  .ntw-m-split .ntw-m-photo { margin: 0; height: 100%; }
  .ntw-m-split .ntw-m-photo img { height: 100%; min-height: 24rem; }

  .ntw-m-svc { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
  .ntw-m-svc-card { padding: 1.75rem; transition: transform .2s ease, box-shadow .2s ease; }
  .ntw-m-svc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -8px rgba(19,81,168,.25); }
  .ntw-m-svc-row { flex-direction: column; }
  .ntw-m-svc-card h3 { font-size: 1.15rem; }
  .ntw-m-svc-card p { font-size: .92rem; }

  .ntw-m-about { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; padding: 2.5rem; }
  .ntw-m-about > img { height: 100%; min-height: 22rem; margin: 0; }
  .ntw-m-about-txt h2 { font-size: 2rem; }
  .ntw-m-about-body .wp-block-button, .ntw-m-about-body .wp-block-button__link { width: auto; }

  .ntw-m-blog-view { overflow: visible; margin: 0; padding: 0; }
  .ntw-m-blog-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .ntw-m-blog-track > .ntw-m-post:nth-child(n+4) { display: none; }
  .ntw-m-cdots { display: none; }
  .ntw-m-post-img img { height: 13rem; }

  #ntw-kontakt .ntw-m-contact, .ntw-m-sec > .ntw-m-contact { max-width: 46rem; margin: 0 auto; padding: 2.5rem; }

  /* ---------- Unterseiten ---------- */
  .ntw-m-uhero-in { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .ntw-m-shero h1, .ntw-m-uhero h1, .ntw-m-h1 { font-size: 2.6rem; }
  .ntw-m-usearch { max-width: 24rem; }

  .ntw-m-layout { max-width: var(--ntw-max); margin: 0 auto; padding: 3rem 2rem 1rem; display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem; align-items: start; }
  .ntw-m-layout .ntw-m-sec { max-width: none; padding: 0 0 1.5rem; margin: 0; }
  .ntw-m-side { position: sticky; top: 6rem; }
  .ntw-m-side .ntw-m-body { padding: 1.5rem; }
  .ntw-m-side .ntw-m-body p { font-size: .85rem; }
  .ntw-m-narrow { max-width: 54rem; margin: 0 auto; padding: 3rem 2rem 1rem; }
  .ntw-m-narrow .ntw-m-sec { max-width: none; padding: 0 0 1.5rem; }
  .ntw-m-artimg img { height: 20rem; }
  .ntw-m-logos .wp-block-group, .ntw-m-logos > .is-layout-flex { grid-template-columns: repeat(4, 1fr); }
  .ntw-m-ctabanner { padding: 2.5rem; }
  .ntw-m-ctabanner .wp-block-button, .ntw-m-ctabanner .wp-block-button__link { width: auto; }
  .ntw-m-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
  .ntw-m-topics .ntw-m-topic { border-bottom: 1px solid #f1f5f9; padding: 1rem 0 !important; }

  /* Blog-Übersicht / Archive / Suche: Kartenraster */
  .ntw-m-sec > .ntw-m-svc:has(.ntw-m-post) { grid-template-columns: repeat(3, 1fr); }
  .ntw-m-svc > .ntw-m-pager { grid-column: 1 / -1; }

  /* ---------- Footer ---------- */
  .ntw-m-footer { padding: 3.5rem 0 2rem; }
  .ntw-m-footer-in { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr; grid-template-areas: "logo grid box" "sub grid box" "quote grid box" "legal legal legal"; gap: 0 3rem; align-items: start; }
  .ntw-m-footer-in > .ntw-m-logo-top { grid-area: logo; }
  .ntw-m-footer-in > .ntw-m-logo-sub { grid-area: sub; }
  .ntw-m-footer-in > .ntw-m-quote { grid-area: quote; }
  .ntw-m-footer-in > .ntw-m-fgrid { grid-area: grid; border: 0; margin: 0; padding: 0; font-size: .85rem; }
  .ntw-m-footer-in > .ntw-m-contactbox { grid-area: box; margin: 0; font-size: .85rem; }
  .ntw-m-footer-in > .ntw-m-legal { grid-area: legal; margin-top: 2.5rem; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; text-align: left; }
}

@media (min-width: 1024px) {
  body.single-post .ntw-m-sec { max-width: 58rem; }
}

/* ---------- Lesbarkeit: Desktop insgesamt größer ----------
   Alles im Stitch-Layout ist in rem angegeben -> die Grundschrift skaliert Schrift UND Abstände mit. */
@media (min-width: 1024px) {
  html:has(body.ntw-unified) { font-size: 17px; }
  /* kleine Beschriftungen anheben */
  .ntw-m-kicker, .ntw-m-eyebrow, .ntw-m-badge, .ntw-m-uhbadge, .ntw-m-crumb, .ntw-m-sub, .ntw-m-contact-sub,
  .ntw-m-post-in time, .ntw-m-recent-date, .ntw-m-meta, .ntw-m-artbadge, .ntw-m-post-badge, .ntw-m-photo-tag span { font-size: .85rem; }
  .ntw-m-recent-row strong, .ntw-m-subnav a, .ntw-m-hours > div, .ntw-m-infolight, .ntw-m-contactbox,
  .ntw-m-fgrid, .ntw-m-legal, .ntw-m-legal nav, .ntw-m-legal ul.menu, .ntw-m-quote { font-size: .9rem; }
  .ntw-m-callout p, .ntw-m p.is-style-ntw-note, .ntw-m-notebox p, .ntw-m p.is-style-ntw-location { font-size: .92rem !important; }
  .ntw-m-post-in p, .ntw-m-svc-card p, .ntw-m-topic p { font-size: 1rem; line-height: 1.7; }
  .ntw-m-post-in h3, .ntw-m-topic h3 { font-size: 1.15rem; }
  .ntw-m-body p, .ntw-m-utext p, .ntw-m-article p, .ntw-m-welcome p, .ntw-m-about-body p,
  .ntw-m-article li, .ntw-m-gloss p, .ntw-m-gloss li { font-size: 1.05rem; line-height: 1.75; }
  .ntw-m-gloss h3 { font-size: 1.1rem; }
  .ntw-m-gloss ul a { font-size: .85rem; }
  .ntw-m-welcome h3 { font-size: 1.25rem; }
  .ntw-m-drawer > ul > li > a { font-size: .9rem; }
  .ntw-m-drawer .sub-menu a { font-size: .9rem; }
  .ntw-m-more, .ntw-m-btn-o, .ntw-m-cta, .ntw-m-hreq, .ntw-m-btnblue, .ntw-m-pager a { font-size: .85rem; }
  .ntw-m-contact label, .ntw-m-contact .wpcf7-form > p, .ntw-m-contact input:not([type=submit]):not([type=checkbox]),
  .ntw-m-contact select, .ntw-m-contact textarea { font-size: .95rem; }
  .ntw-m-contact .wpcf7-acceptance, .ntw-m-gdpr { font-size: .85rem; }
  .ntw-m-layout { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; }
  .ntw-m-narrow { max-width: 60rem; }
  body.single-post .ntw-m-sec { max-width: 62rem; }
}
@media (min-width: 1440px) { html:has(body.ntw-unified) { font-size: 18px; } }
@media (min-width: 1800px) { html:has(body.ntw-unified) { font-size: 19.5px; } }
@media (min-width: 1024px) { .ntw-m-hero-slide > .ntw-m-badge { align-self: flex-start; } }
/* Hero-Bild deutlicher zeigen */
@media (min-width: 1024px) {
  .ntw-m-hero::after { width: 58%; opacity: .9; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 25%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.6) 25%, #000 55%); }
  .ntw-m-hero::before { z-index: 1; }
  .ntw-m-hero-in { z-index: 2; }
}

/* Formular auf Inhaltsseiten so breit wie die anderen Karten */
@media (min-width: 1024px) {
  .ntw-m-layout .ntw-m-sec > .ntw-m-contact, .ntw-m-narrow .ntw-m-sec > .ntw-m-contact { max-width: none; }
}