/* Mehler Web: targeted reading and responsive layout review, 13 November 2026.
   Load after the existing styles. The regional directory cards are unchanged. */

/* Headings can contain links and spans which previously inherited the legacy
   overflow-wrap:anywhere rule. Keep those descendants whole as well. */
#content :is(h1, h2, h3, h4):not(.city-regions *),
#content :is(h1, h2, h3, h4) :is(a, span, strong, em):not(.city-regions *) {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}

/* Keep content and form controls inside their own grid track. */
#content :is(.mw-seo-grid, .mw-grid, .ki-grid, .ki-promo-layout,
  .mw-rental-layout, .pc-format-grid, .pc-price-grid, .pc-crosslinks,
  .pc-intensive-grid, .depth-grid, .mw-travelnav__grid) > * {
  min-width: 0;
}
#content :is(.mw-seo-section, .mw-seo-card, .cg-card, .ki-card,
  .ki-promo-price, .mw-rental-price, .pc-section, .pc-price,
  .application-example, .depth-check, .legal-page) {
  min-width: 0;
}
#content :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
  max-width: 100%;
  min-width: 0;
}

/* Preserve a visible paragraph break after the content has been divided into
   shorter ideas. Several old card styles set every paragraph margin to zero. */
#content :is(.mw-seo-card, .cg-card, .ki-card, .ki-promo-price,
  .mw-rental-price, .pc-price, .mw-card, .application-example,
  .depth-grid article, .pc-format-grid article, .pc-crosslinks article,
  .pc-intensive-grid article, .legal-page section) > p + p {
  margin-top: 1rem;
}
#content :is(.mw-seo-section, .cg-section, .ki-section, .pc-section,
  .decision-guide, .depth-check) > p + p {
  margin-top: 1rem;
}
#content :is(.mw-seo-card, .cg-card, .ki-card, .mw-card,
  .pc-format-grid article, .pc-crosslinks article, .pc-intensive-grid article)
  > :is(h2, h3) {
  line-height: 1.3;
  margin-bottom: 1rem;
}
#content :is(.mw-seo-card, .cg-card, .ki-card, .mw-card,
  .pc-format-grid article, .pc-crosslinks article, .pc-intensive-grid article)
  > :last-child {
  margin-bottom: 0;
}
#content :is(.cg-section, .ki-section, .pc-section, .mw-seo-section,
  .application-example, .depth-check) > :is(ul, ol) + p {
  margin-top: 1.25rem;
}
#content :is(.cg-section, .ki-section, .pc-section) > :is(ul, ol) {
  line-height: 1.7;
}
#content :is(.cg-checks, .cg-benefits, .pc-questions, .pc-steps) > li + li {
  margin-top: .5rem;
}

/* Terms in the price column start at the same height as the offer beside it. */
#content .ki-promo-layout {
  align-items: start;
}

/* Each city offer comparison contains exactly three cards. Use one complete
   row on wide screens; at intermediate widths the third card fills its row. */
#content .city-guide .cg-section > .cg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
#content .city-guide .cg-section > .cg-grid > .cg-card {
  display: flex;
  flex-direction: column;
}
#content .city-guide .cg-section > .cg-grid > .cg-card > a:last-child {
  margin-top: auto;
  padding-top: 12px;
}
@media (min-width: 801px) and (max-width: 1099px) {
  #content .city-guide .cg-section > .cg-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #content .city-guide .cg-section > .cg-grid > .cg-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 800px) {
  #content .city-guide .cg-section > .cg-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#content :is(.ki-actions, .pc-actions, .mw-seo-actions, .cg-actions) {
  align-items: stretch;
  row-gap: 12px;
}
#content :is(.ki-button, .pc-button, .mw-seo-btn, .cg-btn) {
  max-width: 100%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  text-align: center;
}

/* Keep long explanations in opened questions separated from the summary. */
#content :is(.cg-section, .pc-section) details[open] > summary {
  margin-bottom: 16px;
}
#content :is(.cg-section, .pc-section) details[open] > p:first-of-type {
  margin-top: 0;
}
#content :is(.cg-section, .pc-section) details[open] > p + p {
  margin-top: 14px;
}

/* Scroll only the actual table. In the legacy markup a second scroll wrapper
   sits outside the accessible, keyboard-focusable .responsive-table region. */
#content :is(.table-scroll, .ki-table-wrap, .mw-compare-scroll)
  :is(.responsive-table) {
  max-width: 100%;
  min-width: 0;
}
#content :is(.table-scroll, .ki-table-wrap, .mw-compare-scroll):has(> .responsive-table) {
  overflow: visible;
  min-width: 0;
}
#content :is(.responsive-table, .table-scroll, .mw-growth-scroll) {
  max-width: 100%;
  min-width: 0;
  overscroll-behavior-inline: contain;
}
#content .mw-growth-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
#content .responsive-table :is(th, td) p + p {
  margin-top: 12px;
}

/* Two service cards previously squeezed a long heading between an icon and a
   third CTA column. The link now follows its explanatory text in that card. */
#content .mw-travelnav__card--service {
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
}
#content .mw-travelnav__card--service :is(h3, p) {
  grid-column: 2;
  min-width: 0;
}
#content .mw-travelnav__card--service .mw-travelnav__cta {
  grid-column: 2;
  grid-row: auto;
  justify-self: start;
  margin-top: 12px;
  min-width: 0;
}

/* Only the three marked six-card topic grids need an earlier two-column step. */
@media (min-width: 701px) and (max-width: 1000px) {
  #content .mw-tablet-two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Use a full heading column earlier on tablets, where a long German noun and
   a decorative hero image otherwise compete for the same narrow space. */
@media (max-width: 1100px) {
  #mw-topic-intro .ti-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    min-height: 0;
  }
  #mw-topic-intro h1 {
    max-width: none;
  }
  #mw-topic-intro .ti-stage {
    width: 100%;
    max-width: 530px;
    margin-inline: auto;
  }
  #content .pc-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  #content .pc-hero .pc-figure img {
    max-height: 400px;
  }
  #content .pc-profile-hero .pc-portrait {
    max-width: 360px;
  }
  #content .mw-travelnav__grid:not(.mw-travelnav__grid--main) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  #content .ki-promo-layout {
    gap: 24px;
  }
  #content .mw-rental-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  #content :is(.application-example, .depth-check) {
    padding-inline: 22px;
  }
  #content .application-example .depth-check {
    padding-inline: 18px;
  }
}

@media (max-width: 600px) {
  #content .ki-promo-price,
  #content .mw-rental-price {
    padding: 22px 18px;
  }
  #content .mw-travelnav__card--service {
    display: block;
  }
  #content .mw-travelnav__card--service .mw-travelnav__cta {
    width: 100%;
    margin-top: 16px;
  }
  #content .legal-page h2 {
    font-size: clamp(19px, 5.4vw, 25px);
    line-height: 1.3;
  }
  #mw-topic-intro h1 {
    font-size: clamp(27px, 7.2vw, 38px) !important;
    line-height: 1.15;
  }
  #content :is(.application-example, .depth-check) {
    padding-inline: 18px;
  }
  #content .application-example .depth-check {
    padding-inline: 16px;
  }
}

@media (max-width: 380px) {
  #content .depth-grid h3 {
    font-size: 18px;
  }
  #content .pc-author {
    grid-template-columns: minmax(0, 1fr);
  }
  #content .pc-author img {
    width: 68px;
    height: 68px;
  }
}