/*
 * Theme: Thomas Krause — Mobile Stylesheet (komplett, v6)
 * 2026-06-18 — strikte Mobile/Desktop-Trennung.
 * Geladen NACH style.css in functions.php.
 * AUSSCHLIESSLICH @media-Regeln. NIEMALS Desktop-Regeln hier rein.
 *
 * Specificity-Trick: `body:not(#_)` davor = +1 attribute → schlägt
 * desktop-rules sicher ohne IDs erfinden zu müssen.
 */

/* =====================================================================
   MOBILE (≤ 768px) — Smartphone (Specificity-bumped via body:not(#_))
   ===================================================================== */
@media (max-width: 768px) {

  /* ============ FOUNDATION ============ */
  html, body:not(#_) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  body:not(#_) main .wp-block-group.has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ============ HEADER (fixed, kompakt) ============ */
  body:not(#_) header.top,
  body:not(#_) header.wp-block-template-part {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  body:not(#_) .tk-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    min-height: 56px !important;
    max-width: 100vw !important;
  }
  body:not(#_) .tk-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  body:not(#_) .tk-brand .tk-logo {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
  }
  body:not(#_) .tk-brand .tk-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  body:not(#_) .tk-header-inner .tk-brand-name,
  body:not(#_) .tk-header-inner .tk-brand-sub {
    display: none !important;
  }
  body:not(#_) .tk-header-inner a[href*='tel:'] {
    display: none !important;
  }
  body:not(#_) .tk-header-inner a[href*='mailto'] {
    font-size: 11px !important;
    letter-spacing: 0 !important;
    max-width: 220px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============ COOKIE-NOTICE: an unteren Rand kleben, nicht mehr mitte ============ */
  body:not(#_) > div[style*='position:fixed'],
  body:not(#_) > div:not(.tk-lang):not(.wp-site-blocks)[id^=''] {
    /* Generischer Sticky-Banner unten */
  }
  /* Cookie-Notice ist <div id="tk-cookie"> — fixed position kommt aus style.css */
  body:not(#_) #tk-cookie,
  html body #tk-cookie,
  #tk-cookie {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    z-index: 9999 !important;
    box-shadow: 0 -4px 16px rgba(0,10,48,0.18) !important;
  }

  /* ============ LANG-SWITCHER: nicht über Inhalt schweben ============ */
  body:not(#_) .tk-lang {
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    z-index: 9998 !important;
  }
  body:not(#_) .tk-lang-toggle {
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 4px 12px rgba(0,10,48,0.35) !important;
  }
  body:not(#_) .tk-lang-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }
  body:not(#_) .tk-lang-flag {
    width: 30px !important;
    height: 30px !important;
  }

  /* ============ SPALTEN: IMMER als BLOCK stapeln, NIE side-by-side ============ */
  body:not(#_) .wp-block-columns,
  body:not(#_) .wp-block-columns.are-vertically-aligned-center,
  body:not(#_) .wp-block-columns.proj-row,
  body:not(#_) .wp-block-columns.svc-row,
  body:not(#_) .wp-block-columns.detail-body,
  body:not(#_) .wp-block-columns.intro-block,
  body:not(#_) .wp-block-columns.intro-bottom-row,
  body:not(#_) .wp-block-columns.tk-footer-grid,
  body:not(#_) .wp-block-columns.wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }
  body:not(#_) .wp-block-columns > .wp-block-column,
  body:not(#_) .wp-block-columns > .wp-block-column[style],
  body:not(#_) .wp-block-columns > .wp-block-column[style*='flex-basis'],
  body:not(#_) .wp-block-columns > div[class*='wp-block-column'],
  body:not(#_) section.services .svc-row > .wp-block-column,
  body:not(#_) section.services .svc-row > .wp-block-column[style*='flex-basis'],
  body:not(#_) section.services .proj-row > .wp-block-column,
  body:not(#_) section.services .proj-row > .wp-block-column[style*='flex-basis'],
  body:not(#_) .entry-content .wp-block-columns > .wp-block-column {
    display: block !important;
    flex: 0 0 100% !important;
    flex-basis: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 0 0 20px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body:not(#_) .wp-block-columns > .wp-block-column:last-child {
    margin-bottom: 0 !important;
  }

  /* ============ KARUSSELL: vollbreit, klein, Pfeile WEG ============ */
  body:not(#_) .tk-carousel-wrap,
  body:not(#_) .wp-block-group.alignfull.tk-carousel {
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 16px 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  body:not(#_) .tk-carousel-track {
    max-width: none !important;
  }
  body:not(#_) .tk-carousel-btn,
  body:not(#_) .tk-carousel-btn.prev,
  body:not(#_) .tk-carousel-btn.next {
    display: none !important;
  }

  /* ============ HERO H1 (Homepage) ============ */
  body:not(#_) .tk-hero h1 {
    font-size: clamp(28px, 7.5vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    max-width: 100% !important;
  }
  body:not(#_) .tk-hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ============ SECTION-HEAD H2 ('Von der Idee...') ============ */
  body:not(#_) section.services .section-head h2,
  body:not(#_) section.services .section-head h2.wp-block-heading {
    text-align: left !important;
    margin: 0 !important;
    padding: 0 16px !important;
    font-size: clamp(28px, 7vw, 36px) !important;
  }

  /* ============ SERVICES-SECTION ============ */
  body:not(#_) section.services .svc-row .svc-photo,
  body:not(#_) section.services .svc-row figure.wp-block-image.svc-photo {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }
  body:not(#_) section.services .svc-row {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 16px !important;
  }

  /* ============ FOOTER ============ */
  body:not(#_) .tk-footer-band {
    padding: 32px 0 !important;
  }
  body:not(#_) .tk-footer-band .tk-footer-grid {
    display: block !important;
    margin-bottom: 24px !important;
    padding: 0 16px !important;
  }
  body:not(#_) .tk-footer-band .tk-footer-col-contact,
  body:not(#_) .tk-footer-band .tk-footer-col-services,
  body:not(#_) .tk-footer-band .tk-footer-col-hero {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
  }
  body:not(#_) .tk-footer-band .tk-footer-wordmark {
    font-size: 11px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 16px !important;
  }
  body:not(#_) footer .tk-footer-band .tk-footer-col-hero .tk-footer-kicker,
  body:not(#_) .tk-footer-band .tk-footer-col-hero .tk-footer-kicker {
    font-size: clamp(14px, 4.5vw, 18px) !important;
    line-height: 1.15 !important;
    margin: 0 0 8px 0 !important;
  }
  body:not(#_) footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h,
  body:not(#_) .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 16px 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  body:not(#_) footer .tk-footer-band .tk-footer-col-hero .tk-footer-hero-h .accent-orange {
    font-size: inherit !important;
  }

  /* ============ FOOTER-PILLS: vertikal stapeln (war überall noch breit) ============ */
  body:not(#_) .tk-footer-band .tk-footer-pills,
  body:not(#_) .wp-block-buttons.tk-footer-pills,
  body:not(#_) .wp-block-buttons.tk-footer-pills.is-content-justification-right,
  body:not(#_) .wp-block-buttons.tk-footer-pills.is-content-justification-left {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 16px !important;
  }
  body:not(#_) .tk-footer-band .tk-footer-pills .wp-block-button,
  body:not(#_) .wp-block-buttons.tk-footer-pills .wp-block-button {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: auto !important;
  }
  body:not(#_) .tk-footer-band .tk-footer-pills .wp-block-button__link,
  body:not(#_) .wp-block-buttons.tk-footer-pills .wp-block-button__link {
    display: block !important;
    width: 100% !important;
    padding: 10px 0 !important;
    text-align: left !important;
  }

  /* ============ LEAFLET-KARTE: nicht über Viewport ============ */
  body:not(#_) .leaflet-container,
  body:not(#_) .worldmap .leaflet-container,
  body:not(#_) #tk-worldmap {
    max-width: 100vw !important;
    width: 100% !important;
    height: 280px !important;
    overflow: hidden !important;
  }
  body:not(#_) .leaflet-tile-container {
    max-width: 100vw !important;
  }

  /* ============ SINGLE-HERO Bild auf Projekt-Seiten ============ */
  body:not(#_) figure.single-hero,
  body:not(#_) .single-hero,
  body:not(#_) .hero-row .single-hero {
    max-height: 280px !important;
    overflow: hidden !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body:not(#_) figure.single-hero img,
  body:not(#_) .single-hero img {
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
  }

  /* ============ TAP-TARGETS ============ */
  body:not(#_) a[href='#wp--skip-link--target'],
  body:not(#_) a.skip-link {
    /* Skip-link bleibt unsichtbar (1x1) — Accessibility-Standard */
  }
}

/* =====================================================================
   TABLET (769–1024px)
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  body:not(#_) .tk-header-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* =====================================================================
   MOBILE v8 — Service-Section Bilder: Container an Bild-Aspect anpassen
   Vorher: Bilder 393×294 Querformat in 257×380 Hochformat-Container
           → object-fit:cover schneidet links/rechts ab.
   Jetzt: Container nimmt Bild-Aspect (4/3), height:auto, keine Crops.
   ===================================================================== */
@media (max-width: 768px) {
  html body:not(#_) section.services .svc-row,
  html body:not(#_) section.services .svc-row.wp-block-columns {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body:not(#_) section.services .svc-row .svc-photo,
  html body:not(#_) section.services .svc-row figure.wp-block-image.svc-photo,
  html body:not(#_) section.services .svc-row figure.svc-photo,
  html body:not(#_) section.services .svc-row .wp-block-image.svc-photo {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 0 12px 0 !important;
  }
  html body:not(#_) section.services .svc-row .svc-photo img,
  html body:not(#_) section.services .svc-row figure.wp-block-image.svc-photo img,
  html body:not(#_) section.services .svc-row figure.wp-block-image img,
  html body:not(#_) section.services .svc-row figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
  }
  /* Spalten-Höhe auch killen — Original setzt height:380px auf .wp-block-column */
  html body:not(#_) section.services .svc-row > .wp-block-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* =====================================================================
   MOBILE v8.1 — Services-Section auf volle Breite
   Container war nur 289px auf 393 Viewport (104px Gesamt-Rand).
   Mit padding-Reduktion auf Eltern-Container: volle Breite (-12 Rand).
   ===================================================================== */
@media (max-width: 768px) {
  html body:not(#_) section.services {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  html body:not(#_) section.services > .wp-block-group,
  html body:not(#_) section.services > .wrap,
  html body:not(#_) section.services .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0 !important;
  }
  html body:not(#_) section.services .svc-rows,
  html body:not(#_) section.services .svc-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* =====================================================================
   MOBILE v9 (2026-06-18 Greensta) — single-body Padding-Override
   Greensta-style.css setzt section.single-body padding 24px 73px 0 36px
   → auf Mobile bleibt nur 284px Content auf 393px Viewport.
   Lösung: padding auf 16/16/24/16 zwingen.
   ===================================================================== */
@media (max-width: 768px) {
  html body:not(#_) section.single-body,
  html body:not(#_) section.wp-block-group.single-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body:not(#_) .single-body .wp-block-group.prose,
  html body:not(#_) .single-body > .wp-block-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  html body:not(#_) .single-body .entry-content,
  html body:not(#_) .single-body .wp-block-post-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Single-Hero auch padding raus */
  html body:not(#_) section.single-lead,
  html body:not(#_) section.wp-block-group.single-lead {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }

  /* ============ V10 FIX (2026-06-18 nacht) ============ */

  /* Bug 1: Kundenaufträge .ref-grid hat 3-Spalten-Grid auf Mobile — alles zerquetscht.
     Selektor: .wp-block-group.ref-grid mit display:grid + 3x ~93px Spalten.
     Fix: auf 1fr (= eine Spalte volle Breite) zwingen. */
  html body:not(#_) .wp-block-group.ref-grid,
  html body:not(#_) div.ref-grid,
  html body:not(#_) .is-layout-grid.ref-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* ref-card und ref-body innen jetzt volle Breite */
  html body:not(#_) .wp-block-group.ref-grid > .ref-card,
  html body:not(#_) .ref-grid > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  html body:not(#_) .wp-block-group.ref-grid .ref-body {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Wrap-Container die Grid umschließen */
  html body:not(#_) .wp-block-group.wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Bug 2: Header-Email "info@transporttechniker.de" rechts abgeschnitten.
     Vorhandene Regel auf [href*='mailto'] greift nicht weil href ist /kontakt.
     Direkt am .wp-block-button__link im Header ansetzen. */
  html body:not(#_) header .wp-block-button__link,
  html body:not(#_) .tk-header-inner .wp-block-button__link,
  html body:not(#_) .tk-header-inner .wp-block-buttons a {
    font-size: 11px !important;
    letter-spacing: 0 !important;
    max-width: 200px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding-left: 0 !important;
    padding-right: 8px !important;
  }
  /* Container der Buttons darf nicht überschießen */
  html body:not(#_) .tk-header-inner .wp-block-buttons {
    max-width: calc(100vw - 116px) !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }

  /* Bug 3: Hero — weisser Header-Block überlappt mit Hero-Headline.
     Header ist position:fixed, h=56. Carousel beginnt y=82, Hero-Text danach.
     Aber Hero hat negativen margin oder transparent-overlap.
     Lösung: Carousel + Hero-Lead haben sichtbaren Gap vom Header. */
  html body:not(#_) main.wp-block-group {
    padding-top: 0 !important;
  }
  /* Carousel direkt unter Header — wenn margin-top fehlt, push runter */
  html body:not(#_) .wp-block-group.alignfull.tk-carousel {
    margin-top: 60px !important;
  }
  /* Wenn keine Carousel da ist (Unterseiten): single-lead bekommt margin-top */
  html body:not(#_) section.single-lead {
    margin-top: 60px !important;
  }
  /* Wenn beide: Carousel + single-lead, dann single-lead drauf folgen lassen */
  html body:not(#_) .tk-carousel + section.single-lead {
    margin-top: 0 !important;
  }

  /* Bug 4: Whitespace zwischen Bild + Text reduzieren.
     Lange Section-Abstände auf Mobile kompakt machen. */
  html body:not(#_) main section.wp-block-group {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  html body:not(#_) main section.wp-block-group.single-lead {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  /* Gap zwischen Bild und Heading kürzen */
  html body:not(#_) .wp-block-image,
  html body:not(#_) figure.wp-block-image {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
  html body:not(#_) main h2.wp-block-heading,
  html body:not(#_) main h3.wp-block-heading {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }


  /* ============ V11 FIX HERO (2026-06-18 nacht v2) ============ */

  /* Header ist position:fixed weiss 56px hoch.
     .tk-hero ist display:flex align-items:center min-height:475px.
     Auf Mobile: H1 wird vom weissen Header verdeckt weil hero-content padding-top: 130px
     auf Desktop die H1 unten haelt — auf Mobile aber zu wenig hilft weil min-height geringer.

     Fix: hero-content padding-top hoeher (so dass H1 unter Header bleibt),
     und tk-hero min-height passend angehoben damit content nicht overflowed. */
  html body:not(#_) .tk-hero {
    min-height: 540px !important;
    align-items: flex-start !important;
  }
  html body:not(#_) .tk-hero-content {
    padding-top: 88px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
  }

  /* Carousel zurueck zu default (kein margin-top) */
  html body:not(#_) .wp-block-group.alignfull.tk-carousel {
    margin-top: 0 !important;
  }
  /* single-lead zurueck zu default */
  html body:not(#_) section.single-lead {
    margin-top: 0 !important;
  }
  /* Unterseiten ohne tk-hero brauchen main padding-top fuer den fixed header */
  html body:not(#_) main.wp-block-group:not(:has(.tk-hero)) {
    padding-top: 56px !important;
  }


  /* ============ V12 FIX (2026-06-18 nacht v3) ============ */

  /* Bug 1: Single-Projekt .hero-row hat grid-template-columns:1fr 260px die
     auf Mobile nicht zu 1fr wird (Theme's @media (max-width:860px) wird
     irgendwie ueberschrieben). Featured-Image rendert mit 21px Breite.
     Fix: .hero-row stapeln, .single-hero img volle Breite, contain. */
  html body.single-post:not(#_) .hero-row,
  html body:not(#_) section.wp-block-group.hero-row {
    display: block !important;
    grid-template-columns: 1fr !important;
    padding: 0 16px !important;
    margin-top: 16px !important;
    max-width: 100% !important;
    gap: 0 !important;
  }
  html body.single-post:not(#_) .hero-row > .single-hero,
  html body:not(#_) .hero-row > figure.single-hero {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  html body.single-post:not(#_) .hero-row > .single-hero img,
  html body:not(#_) .hero-row > figure.single-hero img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Bug 2: hero-aside "Melden Sie sich" Block — auf Mobile UNTER das Bild,
     nicht daneben (war 260px Spalte). Volle Breite, kompakt. */
  html body.single-post:not(#_) .hero-row > .hero-aside,
  html body:not(#_) .hero-row > .hero-aside {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    background: rgba(0, 10, 48, 0.04) !important;
    border-radius: 12px !important;
    text-align: left !important;
    margin: 0 !important;
  }
  html body:not(#_) .hero-aside h3 {
    font-size: 18px !important;
    margin: 0 0 8px !important;
  }
  html body:not(#_) .hero-aside p {
    font-size: 14px !important;
    margin: 4px 0 !important;
  }

  /* Bug 3: Header — T-Logo und Email-Text vertikal aligned, "TRANSPORTTECHNIKER"
     Schriftzug auch sichtbar (nicht display:none auf Mobile). */
  html body:not(#_) .tk-header-inner {
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    min-height: 56px !important;
  }
  html body:not(#_) .tk-brand {
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  /* TRANSPORTTECHNIKER neben T-Logo wieder sichtbar (war display:none) */
  html body:not(#_) .tk-header-inner .tk-brand-name {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #001659 !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  html body:not(#_) .tk-header-inner .tk-brand-name a {
    color: inherit !important;
    text-decoration: none !important;
  }
  /* Email-Button rechts kleiner, beide vertikal mittig */
  html body:not(#_) .tk-header-inner .wp-block-buttons {
    align-items: center !important;
    max-width: calc(100vw - 200px) !important;
    flex-shrink: 1 !important;
  }
  html body:not(#_) header .wp-block-button__link,
  html body:not(#_) .tk-header-inner .wp-block-button__link {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }
  /* Burger-Button: ganz nach rechts vom brand-Bereich */
  html body:not(#_) .tk-header-inner .wp-block-navigation__responsive-container-open {
    margin-left: auto !important;
    width: 28px !important;
    height: 28px !important;
    align-self: center !important;
  }

  /* Bug 4: Karussell-Bilder werden mit object-fit:cover beschnitten
     (technische Zeichnungen werden gecroppt). Auf Mobile contain. */
  html body:not(#_) .tk-carousel img,
  html body:not(#_) .tk-carousel-track img,
  html body:not(#_) .wp-block-group.tk-carousel img {
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
  }
  /* Single-Body proj-row Bilder (im Inhalt): nicht beschneiden */
  html body:not(#_) .single-body .proj-row img,
  html body:not(#_) .single-body .wp-block-image img {
    object-fit: contain !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
  }


  /* ============ V13 FIX HEADER LAYOUT (2026-06-18 nacht v4) ============ */

  /* Header so kompakt: T-Logo + TRANSPORTTECHNIKER eine Zeile, Burger + Email rechts.
     Vorher: 2-Zeilen-Header (76px hoch), Email unsichtbar unten.
     Jetzt: nowrap, Tel-Wrap komplett raus, Email kompakt. */
  html body:not(#_) .tk-header-inner {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
  /* Tel-Wrap KOMPLETT verstecken (war: nur a[href*=tel] versteckt) */
  html body:not(#_) .tk-header-inner .tk-phone-wrap,
  html body:not(#_) .tk-header-inner .wp-block-buttons.tk-phone-wrap {
    display: none !important;
  }
  /* Brand kompakter */
  html body:not(#_) .tk-brand {
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  html body:not(#_) .tk-brand .tk-logo {
    width: 30px !important;
    height: 30px !important;
  }
  html body:not(#_) .tk-header-inner .tk-brand-name {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }
  /* Navigation (Burger) ganz nach rechts vom Brand-Bereich, vor Email */
  html body:not(#_) .tk-header-inner > .wp-block-navigation {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  /* Email-Buttons-Wrap: nach rechts, kompakt */
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
    max-width: 200px !important;
  }
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) .wp-block-button {
    margin: 0 !important;
    min-width: 0 !important;
  }
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) .wp-block-button__link {
    font-size: 9.5px !important;
    letter-spacing: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    display: block !important;
  }


  /* ============ V14 FIX (2026-06-18 nacht v5) ============ */

  /* Bug 1: Header — alle Items vertikal auf gleicher Linie (centerY).
     Aktuell: Brand 54px hoch (Logo+Text vertikal gestapelt), Email 10px,
     Burger 28px → unterschiedliche centerY (28/34/43).
     Fix: .tk-brand bleibt row (Logo neben TRANSPORTTECHNIKER horizontal),
     ABER die Inline-Anordnung muss baseline-aligned sein. */
  html body:not(#_) .tk-header-inner {
    align-items: center !important;
    min-height: 48px !important;
    max-height: 48px !important;
    height: 48px !important;
    padding: 0 12px !important;
  }
  html body:not(#_) .tk-brand {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Logo und Brand-Name beide auf gleiche Hoehe-Mitte */
  html body:not(#_) .tk-brand .tk-logo {
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    align-self: center !important;
    line-height: 0 !important;
  }
  html body:not(#_) .tk-brand .tk-logo img {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
  }
  html body:not(#_) .tk-header-inner .tk-brand-name {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    line-height: 1 !important;
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }
  /* Burger zentriert — Nav-Container ist parent, Button ist drinnen */
  html body:not(#_) .tk-header-inner > nav.wp-block-navigation,
  html body:not(#_) .tk-header-inner > .wp-block-navigation {
    align-self: center !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  html body:not(#_) .tk-header-inner .wp-block-navigation__responsive-container-open {
    width: 22px !important;
    height: 22px !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Email rechts auf gleicher Hoehe */
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) {
    align-self: center !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) .wp-block-button {
    margin: 0 !important;
    line-height: 1 !important;
  }
  html body:not(#_) .tk-header-inner .wp-block-buttons:not(.tk-phone-wrap) .wp-block-button__link {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 9.5px !important;
    align-self: center !important;
  }
  /* Burger-Dropdown-Menü (offen) auch sauber */
  html body:not(#_) .wp-block-navigation__responsive-container.is-menu-open {
    padding-top: 56px !important;
  }

  /* Bug 2: Single-Projekt — proj-row Stapelung soll IMMER Bild zuerst sein,
     dann Text. Aktuell wechselt es im DOM (Bild-Text, Bild-Text, Text-Bild,
     Bild-Text, Text-Bild) → bei Stapelung wird mal Text oben mal Bild oben.
     Fix: flex-direction column + order, sodass Spalte mit Bild immer order:1,
     ohne Bild order:2. */
  html body:not(#_) .single-body .proj-row,
  html body:not(#_) .single-body .wp-block-columns.proj-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 32px !important;
  }
  html body:not(#_) .single-body .proj-row > .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  /* CSS :has() ist auf WebKit/iOS Safari 15.4+ supported - perfekt fuer iPhone 14 Pro.
     Spalte mit <img> → order: 1 (oben), ohne <img> → order: 2 (unten) */
  html body:not(#_) .single-body .proj-row > .wp-block-column:has(img) {
    order: 1 !important;
  }
  html body:not(#_) .single-body .proj-row > .wp-block-column:not(:has(img)) {
    order: 2 !important;
  }


  /* ============ V15 FIX (2026-06-18 nacht v6) ============ */

  /* Bug 1: Service-Pages (cargo-survey, havariekommissariat, streckenstudien,
     cad-transportplanung) — Text zu gross (~21px) + text-align:justify gibt
     riesige Wort-Lucken + parent hat 0 Padding → Text klebt am Rand. */
  html body:not(#_) main p,
  html body:not(#_) main .wp-block-paragraph,
  html body:not(#_) main .wp-block-column p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    hyphens: auto !important;
    word-spacing: 0 !important;
  }
  /* Etwas grossere Lede-/Intro-Paragraphen lassen */
  html body:not(#_) main .lede,
  html body:not(#_) main p.lede {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
  /* Listen-Items */
  html body:not(#_) main li,
  html body:not(#_) main .wp-block-list li {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  /* Service-Page Container: seitlich 16px Padding sodass Text nicht am Rand klebt */
  html body:not(#_) main > section.wp-block-group,
  html body:not(#_) main > .wp-block-group,
  html body:not(#_) main .wp-block-columns,
  html body:not(#_) main .wp-block-column {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Aber Featured-Image Container / alignfull bleiben volle Breite (Bilder sollen Edge-to-Edge) */
  html body:not(#_) main figure.wp-block-image,
  html body:not(#_) main .wp-block-image,
  html body:not(#_) main figure.single-hero,
  html body:not(#_) main figure.alignfull,
  html body:not(#_) main .alignfull > figure.wp-block-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Bug 2: Whitespace zwischen proj-row Sektionen zu gross.
     Aktuell: margin-bottom 32px + gap 12px = 44px. Sollte kompakter. */
  html body:not(#_) .single-body .proj-row,
  html body:not(#_) .single-body .wp-block-columns.proj-row {
    margin: 0 0 16px !important;
    gap: 8px !important;
  }
  /* Auch Section-Padding im single-body reduzieren */
  html body:not(#_) section.single-body {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
  /* Headings kompakter */
  html body:not(#_) main h2.wp-block-heading,
  html body:not(#_) main h3.wp-block-heading {
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }


  /* ============ V16 FIX (2026-06-18 nacht v7) ============ */

  /* Bug: H2 ". . . und packen an." hat white-space:nowrap + font-size:46px
     → 375px breit auf 285px Viewport-Content → rechts abgeschnitten.
     Fix: nowrap aus, kleinere font-size auf Mobile. */
  html body:not(#_) main h2.wp-block-heading,
  html body:not(#_) main h2.has-large-font-size,
  html body:not(#_) main h3.wp-block-heading,
  html body:not(#_) main h3.has-large-font-size,
  html body:not(#_) main h1.wp-block-heading,
  html body:not(#_) main .wp-block-heading {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
  }
  /* Mobile-fontsize-cap fuer riesige Headlines */
  html body:not(#_) main h2.has-large-font-size {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }
  html body:not(#_) main h1.has-large-font-size {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }

}

/* CTA "Melden Sie sich gerne" / hero-aside (2026-07-19):
   YellowPencil zieht den Block am Desktop per top:-105px neben das
   Hero-Bild. Sobald der Hero stapelt (unter 860px), lag der Text
   dadurch AUF dem Bild und darunter klaffte ein 105px-Loch.
   Auf schmalen Screens: Verschiebung aus. */
@media (max-width: 860px) {
  html body .hero-aside {
    top: 0 !important;
  }
}

/* Beitrags-Reihen am Handy (2026-07-19): Desktop-Zurechtrueckungen
   (negative Margins, Festbreiten wie 1004px bei wp-image-650,
   Verschiebungen) neutralisieren. Gestapelt gilt: Bild passt in die
   Spalte, nichts ragt in Nachbar-Reihen. Betrifft route-survey-250t
   (Text auf Bild) und umladung-hochgeschwindigkeitszuege (Riesenbild). */
@media (max-width: 781px) {
  html body .proj-row,
  html body .proj-row.wp-block-columns {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .proj-row .wp-block-column {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .proj-row .wp-block-image,
  html body .proj-row figure {
    margin-top: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .proj-row img {
    margin-top: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Nachtrag (2026-07-19): YellowPencil-Pixel-Nudges in Beitragsreihen
   (top:-84px auf proj-rows, Transforms auf Absaetzen) am Handy aus —
   sie stammen von der Desktop-Ausrichtung und schieben gestapelte
   Inhalte ineinander. Featured-Image der Beitraege einheitlich
   gedeckelt (Post 20 hatte ein ueberlaufendes Portrait). */
@media (max-width: 781px) {
  html body .proj-row,
  html body .proj-row.wp-block-columns {
    top: 0 !important;
    transform: none !important;
  }
  html body .proj-row p,
  html body .proj-row h2,
  html body .proj-row h3,
  html body .proj-row li {
    transform: none !important;
  }
  html body.single-post .single-hero {
    height: auto !important;
    max-height: 340px !important;
    overflow: hidden !important;
  }
  html body.single-post .single-hero img {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: cover !important;
  }
}

/* Nachtrag 2 (2026-07-19): entry-content wird am Desktop per top:-56px
   an den Hero herangerueckt — am Handy schob das die Beitrags-
   Ueberschrift in den Kontakt-Kasten (sichtbar bei Post 20). */
@media (max-width: 781px) {
  html body .entry-content.wp-block-post-content,
  html body .wp-block-post-content {
    top: 0 !important;
  }
}

/* Nachtrag 3 (2026-07-19): dieselbe Nudge-Neutralisierung auch fuer
   Tablets (782-1080px) — die YellowPencil-Verschiebungen sind fuer
   grosse Desktops justiert und schieben auch auf Tablet-Breite
   Text in Bilder (route-survey-250t, umladung, 227t). */
@media (min-width: 782px) and (max-width: 1080px) {
  html body .proj-row,
  html body .proj-row.wp-block-columns {
    top: 0 !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body .proj-row .wp-block-column {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .proj-row p,
  html body .proj-row h2,
  html body .proj-row h3,
  html body .proj-row li {
    transform: none !important;
  }
  html body .proj-row .wp-block-image,
  html body .proj-row figure {
    margin-top: 0 !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body .proj-row img {
    margin-top: 0 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
  }
  html body .entry-content.wp-block-post-content,
  html body .wp-block-post-content {
    top: 0 !important;
  }
  html body.single-post .single-hero {
    height: auto !important;
    max-height: 380px !important;
    overflow: hidden !important;
  }
  html body.single-post .single-hero img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: cover !important;
  }
}

/* Nachtrag 4 (2026-07-19): Beitrags-Zweispalter auf Tablet stapeln.
   Text + grosse technische Zeichnungen nebeneinander brauchen mehr
   als Tablet-Breite — gestapelt (Bild oben) bleibt alles lesbar. */
@media (min-width: 782px) and (max-width: 1080px) {
  html body .proj-row.wp-block-columns,
  html body .proj-row {
    flex-wrap: wrap !important;
  }
  html body .proj-row > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  html body .proj-row > .wp-block-column:has(img),
  html body .proj-row > .wp-block-column:has(figure) {
    order: -1 !important;
  }
}

/* Nachtrag 5 (2026-07-19): YellowPencil-Transforms (translateY ±30px)
   liegen DIREKT auf den proj-rows und schlagen normale Selektoren.
   Hier mit maximaler Spezifitaet neutralisiert — unter 1081px
   verschieben sie Reihen in den Text darueber/darunter. */
@media (max-width: 1080px) {
  html body .wp-site-blocks .site .proj-row.proj-row,
  html body .wp-site-blocks .proj-row.proj-row,
  html body .entry-content .proj-row.proj-row,
  html body .proj-row.proj-row.wp-block-columns {
    transform: none !important;
  }
}

/* Nachtrag 6 (2026-07-19): Die YellowPencil-Transforms nutzen die ID
   #wp--skip-link--target im Selektor — IDs schlagen Klassen, darum
   griffen die bisherigen Resets nicht. Hier mit ID + mehr Klassen. */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .proj-row.proj-row.proj-row.proj-row.wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target .single-body .prose .wp-block-post-content-is-layout-constrained .wp-block-columns.proj-row {
    transform: none !important;
  }
}

/* Nachtrag 7 (2026-07-19): YellowPencil-Pixel-Pushes in Beitraegen
   komplett neutralisieren (nur unter 1081px). Betroffen v.a. Post 20:
   hero-aside top:-123/left:-41 (CTA ragte links raus, lag auf H1),
   Absaetze mit Festbreiten ~500px + translatey bis -197px,
   single-hero img min-height:651px. Alle Regeln nutzen die ID
   #wp--skip-link--target — darum hier dieselbe ID im Selektor. */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .wp-block-group .hero-aside.hero-aside {
    top: 0 !important;
    left: 0 !important;
  }
  html body .wp-site-blocks #wp--skip-link--target .single-hero.single-hero img {
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  html body .wp-site-blocks #wp--skip-link--target .prose .wp-block-paragraph.wp-block-paragraph,
  html body .wp-site-blocks #wp--skip-link--target .prose .wp-block-columns .wp-block-column .wp-block-paragraph {
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    left: 0 !important;
    position: static !important;
  }
  html body .wp-site-blocks #wp--skip-link--target .prose .wp-block-image.wp-block-image,
  html body .wp-site-blocks #wp--skip-link--target .prose .wp-block-image img {
    transform: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    left: 0 !important;
  }
  html body .wp-site-blocks #wp--skip-link--target .prose .wp-block-columns.wp-block-columns {
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

/* Nachtrag 8 (2026-07-19): YP zieht die Beitrags-H1 per
   translatey(-46px) hoch (ID-Regel) — unter 1081px kollidierte sie
   mit dem Kontakt-Kasten darueber. */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .single-lead.single-lead h1,
  html body .wp-site-blocks #wp--skip-link--target .single-lead h1.wp-block-post-title {
    transform: none !important;
  }
}

/* Projekt-/Beitrags-Karten "WEITERLESEN" abgeschnitten am Handy (2026-07-21):
   Die .ref-grid Karten liegen in einem CSS-Grid, dessen Zeilenhoehen fuer
   Desktop berechnet sind. Am Handy bricht der Text laenger um -> Inhalt hoeher
   als die (gestreckte) Zeile -> .ref-card overflow:hidden schneidet WEITERLESEN
   ab. Fix: Grid am Handy durch simple Flex-Spalte ersetzen, Karten wachsen mit
   dem Inhalt (flex:0 0 auto), nichts wird mehr abgeschnitten. ID im Selektor,
   weil die YP-Grid-Regeln #wp--skip-link--target nutzen (schlagen Klassen). */
@media (max-width: 781px) {
  html body #wp--skip-link--target .ref-grid,
  html body #wp--skip-link--target .wp-block-group.ref-grid,
  html body #wp--skip-link--target .is-layout-grid.ref-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  html body #wp--skip-link--target .ref-grid > .ref-card,
  html body #wp--skip-link--target .ref-card {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body #wp--skip-link--target .ref-card .ref-img,
  html body #wp--skip-link--target .ref-card .wp-block-post-featured-image {
    overflow: hidden !important;
  }
}

/* Leistungsseiten (Havarie, Cargo, CAD, Strecken): Ueberschriften ueberlappen
   am Handy die Checklisten darueber (2026-07-22). URSACHE: YellowPencil-Pixel-
   Verschiebungen (translatey -49/-74/-75px + top:-Npx) auf Spalten/Listen/
   Ueberschriften, fuer Desktop justiert. Am Handy schieben sie Ueberschriften
   in die vorherige Liste. Fix: diese Verschiebungen NUR am Handy aufheben.
   ID im Selektor, weil YP #wp--skip-link--target nutzt. Karussell (tk-carousel-
   track) NICHT betroffen (nicht in der Selektor-Liste). */
@media (max-width: 781px) {
  html body #wp--skip-link--target .detail-body .wp-block-columns,
  html body #wp--skip-link--target .detail-body .wp-block-column,
  html body #wp--skip-link--target .detail-body .wp-block-list,
  html body #wp--skip-link--target .detail-body .wp-block-heading,
  html body #wp--skip-link--target .detail-body h2,
  html body #wp--skip-link--target .detail-body h3,
  html body #wp--skip-link--target .detail-body p,
  html body #wp--skip-link--target .detail-body li,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-columns,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-column,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-list,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-heading,
  html body #wp--skip-link--target .wp-block-post-content > h2,
  html body #wp--skip-link--target .wp-block-post-content > h3 {
    transform: none !important;
    top: auto !important;
  }
}

/* Leistungsseiten Kapitel-Ueberschriften + lange Listenpunkte am Handy
   (2026-07-22, ergaenzt den JS-Flatten in functions.php): */
@media (max-width: 781px) {
  html body #wp--skip-link--target .detail-body p.lead,
  html body #wp--skip-link--target .wp-block-post-content p.lead {
    line-height: 1.25 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  html body #wp--skip-link--target .detail-body li,
  html body #wp--skip-link--target .wp-block-post-content li {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  html body #wp--skip-link--target .detail-body .wp-block-column,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-column,
  html body #wp--skip-link--target .detail-body .wp-block-columns,
  html body #wp--skip-link--target .wp-block-post-content .wp-block-columns {
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* Leistungsseiten/Beitraege: Text klebte am Handy am linken+rechten Rand
   (2026-07-22, Thomas). Selektor OHNE .single-body (Pages haben die Klasse
   nicht!), Startseite via body:not(.home) ausgenommen. Vollbild-Karussell
   behaelt volle Breite, zu breite Spalten begrenzt (lange Listenpunkte). */
@media (max-width: 781px) {
  html body:not(.home) #wp--skip-link--target .entry-content.wp-block-post-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }
  html body:not(.home) #wp--skip-link--target .entry-content.wp-block-post-content > .tk-carousel,
  html body:not(.home) #wp--skip-link--target .entry-content.wp-block-post-content > .alignfull.tk-carousel,
  html body:not(.home) #wp--skip-link--target .entry-content.wp-block-post-content > .wp-block-group.alignfull.tk-carousel {
    margin-left: -22px !important;
    margin-right: -22px !important;
    width: calc(100% + 44px) !important;
    max-width: calc(100% + 44px) !important;
  }
  html body:not(.home) #wp--skip-link--target .detail-body .wp-block-column.wp-block-column.wp-block-column.wp-block-column,
  html body:not(.home) #wp--skip-link--target .detail-body .wp-block-columns.wp-block-columns.wp-block-columns.wp-block-columns {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body:not(.home) #wp--skip-link--target .detail-body img {
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
}

/* 2026-08-04: Harte Umbrüche in Überschriften gelten nur am Rechner.
   Am Handy ist die Spalte so schmal, dass Thomas' <br> zusätzliche
   Fransen erzeugen (einzelne Wörter auf eigener Zeile). Dort lassen
   wir den Text natürlich fließen. Desktop bleibt unverändert. */
@media (max-width: 781px) {
  .wp-block-post-title br,
  h1.wp-block-post-title br {
    display: none;
  }
}

/* ============================================================
   2026-08-23, zweiter Anlauf nach dem Rollback.
   Enthalten sind NUR die Reparaturen fuer von Thomas gemeldete
   bzw. unsichtbar machende Fehler. BEWUSST NICHT enthalten:
   - Karten-Umbau (.ref-card order/flex) — hatte auf /projekte/
     und /beitraege/ "KUNDENAUFTRAG" unter den Text geschoben
   - Burger-Menue ab 1280px ("weisses Menueband")
   - Marken-/Kopfzeilen-Aenderungen
   - jede Regel oberhalb von 1080px Fensterbreite
   Der Desktop ist damit pixel-identisch zum Stand vom 22.08.
   ============================================================ */

/* 2026-08-22 (Thomas, Buchstabensalat auf dem Handy): YellowPencil setzt
   Listen auf den Leistungsseiten FESTE HOEHEN (z.B. .wp-block-list:
   nth-child(6){height:23px}). Am Desktop passt das, weil YP dort zwei
   der drei Punkte per transform in die rechte Spalte schiebt und nur
   eine Zeile stehen bleibt. Am Handy heben wir die Verschiebungen seit
   22.07. auf — die Hoehe blieb aber stehen. Ergebnis: 141px Liste in
   einem 23px-Kasten, der Rest lief in die naechste Ueberschrift.
   Darum hier zusaetzlich alle YP-Hoehen aufheben. */
@media (max-width: 781px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-list,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ul,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ol,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body li,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body strong,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-list,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained ul,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained ol,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained li {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body strong,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p.lead strong {
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }
}

/* 2026-08-22: Tablet-Bereich (782-1080px). Die YP-Verschiebungen
   (translatex bis 585px) sind fuer ~1200px Spaltenbreite justiert.
   Bei 820px Fensterbreite standen 9 Listenpunkte komplett ausserhalb
   des Bildschirms, dazu 5 Ueberlappungen — die halbe Leistungsliste
   war unsichtbar. Hier greift derselbe Reset wie am Handy, die Liste
   stapelt einspaltig. Ab 1081px bleibt der Desktop unveraendert. */
@media (min-width: 782px) and (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-column,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-list,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ul,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ol,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body li,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body strong,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-heading,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body h2,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body h3 {
    transform: none !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* 2026-08-22: Gleiche Ursache, andere Eigenschaft — YellowPencil setzt
   auf der Havarie-Seite FESTE BREITEN (547px) auf Listenpunkte. Am
   Handy (390px) lief der Text damit rechts aus dem Bild; 39 Punkte
   waren nur zur Haelfte lesbar. Breiten am Handy freigeben. */
@media (max-width: 781px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body li,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-list,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ul,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ol,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > p,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* 2026-08-22 (Thomas, Startseite EN): Der Hero ist ein Kasten mit fester
   Geometrie — style.css gibt ihm aspect-ratio:16/9 + overflow:hidden,
   mobile.css seit 18.06. zusaetzlich min-height:540px. Die Hoehe kommt
   also NICHT vom Inhalt. Am Handy braucht der englische Hero-Text 620px
   (der deutsche ist kuerzer und passte knapp), der Kasten blieb bei
   540px: die letzte Textzeile wurde angeschnitten und der Knopf
   "Our Services" (y=578) lag komplett unter der Schnittkante.
   Text im Editor hochschieben half nicht, weil das die Kastenhoehe
   nicht aendert. Fix: bis 1080px waechst der Hero mit seinem Inhalt (auf Tablet
   ragte der Inhalt 4-13px heraus). Ab 1081px unveraendert.
   min-height 540px bleibt als Untergrenze, overflow:hidden bleibt
   (beschneidet weiter das Hintergrundbild, nicht mehr den Text). */
@media (max-width: 1080px) {
  html body:not(#_) .tk-hero {
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    min-height: 540px !important;
  }
}

/* 2026-08-22 (Thomas): Die rechtsbuendige H2 (". . . and get the job done.")
   brach am Handy auf zwei Zeilen und ragte 75px links aus dem Bild.
   Ursache war nicht die Schriftgroesse, sondern YellowPencil-Geometrie:
   die H2 sitzt in einer Spalte mit fester Breite 282px, hat selbst
   padding-right:49px, und auf der EN-Startseite zusaetzlich left:-207px
   plus margin-left:78px. Der Text braucht bei 32px aber 345px.
   Fix am Handy: nur diese eine Spalte und diese H2 freigeben, eine Zeile
   erzwingen, Schrift unter 501px Breite passend mitskalieren.
   Ab 782px unveraendert. */
@media (max-width: 781px) {
  html body .wp-site-blocks #wp--skip-link--target .wp-block-column.wp-block-column:has(> h2.wp-block-heading.has-text-align-right),
  html body .wp-site-blocks #wp--skip-link--target .wp-block-columns.wp-block-columns:has(> .wp-block-column > h2.wp-block-heading.has-text-align-right) {
    width: auto !important;
    flex-basis: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .wp-site-blocks #wp--skip-link--target h2.wp-block-heading.has-text-align-right.has-text-align-right {
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 500px) {
  html body .wp-site-blocks #wp--skip-link--target h2.wp-block-heading.has-text-align-right.has-text-align-right {
    font-size: min(32px, 7.5vw) !important;
  }
}

/* 2026-08-22 (Vollpruefung): Text stand auf mehreren Seiten rechts
   ausserhalb des Bildschirms. Immer dieselbe Ursache, immer YellowPencil:
     .hero-aside auf /uk/umladung-muldenkipper-uk/  transform 1093px
     H1 / p.lead auf den Havarie-Seiten (DE/EN/UK)  left 82-123px
     .hero-row auf /projekt-12/                     left 49px
     H1 auf /uk/streckenstudien-uk/                 left 83px
   Der Reset vom 22.07. nahm nur transform und top zurueck, nicht left.
   Fuer Desktop sind diese Versaetze passend justiert, unter 1081px
   schieben sie den Text aus dem Bild. Karussell bleibt bewusst
   unberuehrt (nicht in der Selektor-Liste, es braucht transform). */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body li,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body h2,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body h3,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-heading,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-column,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target h1.wp-block-heading.has-navy-deep-color,
  html body .wp-site-blocks #wp--skip-link--target p.lead.lead,
  html body .wp-site-blocks #wp--skip-link--target .hero-row.hero-row.hero-row,
  html body .wp-site-blocks #wp--skip-link--target .hero-aside.hero-aside.hero-aside,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > p,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > h2,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > h3 {
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin-left: 0 !important;
  }
}

/* 2026-08-22 (Vollpruefung): Auf den Havarie-Seiten liefen am Handy die
   letzten 10-15 Listenpunkte ueber den Footer — navy Schrift auf navy
   Grund, praktisch unsichtbar, nur die orangen Haken blieben zu sehen.
   Ursache ist dasselbe YellowPencil-Muster wie beim Buchstabensalat, nur
   eine Ebene hoeher: die aussere .wp-block-columns.detail-body hat eine
   feste height (1168px), ihr Inhalt braucht 1877px. Weil hier
   overflow:visible gilt, wird nicht abgeschnitten, sondern der Rest
   ragt heraus und legt sich ueber den Footer.
   Der Fix vom Nachmittag gab nur Listen, Absaetze und Ueberschriften
   frei — die Spalten-Container fehlten. Hier nachgezogen. */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-column,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-column,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > .wp-block-group {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}


/* 2026-08-22 (Vollpruefung, Nachtrag): Auf den Havarie-Seiten ragten bei
   1024px (Tablet quer) 18-19 Listenpunkte 93px aus dem Bild. ul.checks
   ist dort ein zweispaltiges Grid, und YellowPencil gibt den Listen-
   punkten eine feste width:517px. In der linken Spalte faellt das nicht
   auf, in der rechten (ab x=583) ragt es heraus.
   Der Breiten-Reset von heute Nachmittag endete bei 781px — hier auf
   1080px ausgeweitet, damit die Punkte ihre Grid-Spalte fuellen statt
   eine Wunschbreite zu behalten. Ab 1081px unveraendert. */
@media (min-width: 782px) and (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body p,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body li,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body .wp-block-list,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ul,
  html body .wp-site-blocks #wp--skip-link--target .detail-body.detail-body.detail-body.detail-body.detail-body.detail-body.detail-body ol,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained > p,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* 2026-08-22 (Vollpruefung, letzter Nachtrag): Rest-Faelle, bei denen
   Text rechts aus dem Bild ragt. Alle haben eine YellowPencil-Regel
   "left: N px", die fuer breite Monitore justiert ist:
     h1.wp-block-post-title   /en/umladung-muldenkipper-en/  144px raus @390
     h1.wp-block-post-title   /projekt-12/                    32px raus @390/768
     NUR h1 MIT has-navy-deep-color (Leistungsseiten) — die blanken
     h1.wp-block-heading auf Datenschutz/Impressum/Kontakt sind per
     YP-left ZENTRIERT und muessen es bleiben (Lehre 24.08.)
     p.lead                   Havarie EN + UK                 33px raus @1280
     .hero-aside              /projekt-12/                    13px raus @1280
   Hier wird BEWUSST nur `left` zurueckgenommen — nicht transform, top
   oder margin. Ein frueherer Versuch fasste auch transform/top an und
   schob die Beitrags-H1 in den ersten Absatz (8 neue Ueberlappungen);
   fuer die gilt weiterhin allein der Nachtrag 8 vom 19.07.
   Grenze diesmal 1080px — oberhalb bleibt ALLES unangetastet, auch wenn
   bei 1280px noch 13-33px fehlen. Desktop gehoert Thomas. */
@media (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target h1.wp-block-post-title.wp-block-post-title,
  html body .wp-site-blocks #wp--skip-link--target h1.wp-block-heading.has-navy-deep-color,
  html body .wp-site-blocks #wp--skip-link--target p.lead.lead,
  html body .wp-site-blocks #wp--skip-link--target .hero-row.hero-row.hero-row,
  html body .wp-site-blocks #wp--skip-link--target .hero-aside.hero-aside.hero-aside {
    left: auto !important;
    right: auto !important;
  }
}


/* 2026-08-23 (letzter Rest der Vollpruefung): Auf
   /en/umladung-muldenkipper-en/ ragte die Beitrags-Ueberschrift am Handy
   144px aus dem Bild. Ursache ist kein Versatz und keine Breite, sondern
   YellowPencil setzt der H1 ein `padding-right: 518px` — in einem 390px
   breiten Container. Am Desktop schiebt das den Umbruch nach links, am
   Handy sprengt es die Zeile.
   Nur die seitlichen Innenabstaende werden freigegeben; transform und
   top bleiben unangetastet, dafuer gilt weiter Nachtrag 8 vom 19.07. */
@media (max-width: 1080px) {
  html body:not(#_) .wp-site-blocks #wp--skip-link--target h1.wp-block-post-title.wp-block-post-title,
  html body:not(#_) .wp-site-blocks #wp--skip-link--target h1.wp-block-post-title {
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 2026-08-23 Nachbesserung 1: Auf der ENGLISCHEN Havarie-Seite liegen
   zwei Sektionen ("Furniture Damage", "Fall of a heavy-load crate")
   NICHT im .detail-body-Wrapper — dort griffen die Resets oben nie, und
   YPs `top:-162px !important` auf der Spalte zog die Sektion bei
   782-1080px in die Liste darueber (2 Text-auf-Text-Ueberdeckungen).
   Deshalb derselbe Reset zusaetzlich ueber .wp-block-post-content,
   nur fuer Spalten/Listen-Container (H2/P/Links bleiben unberuehrt,
   dort sitzen gewollte Feinjustagen der Startseiten). */
@media (min-width: 782px) and (max-width: 1080px) {
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-column,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-columns,
  html body .wp-site-blocks #wp--skip-link--target .wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained.wp-block-post-content-is-layout-constrained .wp-block-list {
    top: auto !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* 2026-08-23 Nachbesserung 2: Die Einzeilen-Regel fuer die
   rechtsbuendige H2 (". . . and get the job done.") erwischte auch die
   ukrainische Startseite — dort ist ". . . і працюємо на результат."
   laenger und ragte mit nowrap 46px aus dem Bild. Ukrainisch darf
   weiter normal umbrechen (war dort nie beanstandet). */
@media (max-width: 781px) {
  html[lang^="uk"] body .wp-site-blocks #wp--skip-link--target h2.wp-block-heading.has-text-align-right.has-text-align-right {
    white-space: normal !important;
  }
}

/* 2026-08-25 (PL-Go-live): Die polnischen Footer-Service-Links sind
   laenger als die aller anderen Sprachen ("Ekspertyzy tras dla
   transportow ponadgabarytowych") und ragten mit dem Einzeilen-Zwang
   ab 1280px (style.css 2.7.2) bei 1280-1439px bis 77px aus dem Band —
   auf allen 26 PL-Seiten. Umbrechen geht nicht: die Services-Spalte
   hat eine feste Hoehe, zweizeilige Eintraege ueberlappten die Zeilen
   darunter (gemessen 5->8). Loesung: NUR auf Polnisch, NUR in diesem
   Fenster die Service-Zeilen von 15px auf 12px — einzeilig, passt
   (Bedarf 418px * 12/15 = 334px < 341px verfuegbar). Ab 1440px und
   in allen anderen Sprachen unveraendert. */
@media (min-width: 1280px) and (max-width: 1439px) {
  html[lang^="pl"] body .tk-footer-band .tk-footer-col-services .tk-footer-line,
  html[lang^="pl"] body .tk-footer-band .tk-footer-col-services .tk-footer-line a {
    font-size: 12px !important;
  }
}