/* ==========================================================================
   Overflow guards

   Cross-cutting rules that stop content escaping the right edge of the
   viewport. Every layout links this file last, after the per-template
   stylesheets, so a guard wins a specificity tie. Keep it last when adding a
   layout: it used to load before md-shared.css and article.css on the
   Markdown layouts, which left that guarantee untrue.

   ---------------------------------------------------------------------------
   1. Elementor container overflow guard

   Elementor clamps only top-level containers:

     :is(.elementor-section-wrap,[data-elementor-id]) > .e-con {
       max-width: min(100%, var(--width));
     }

   Nested containers (.e-child) keep the bare `width: var(--width)` from
   `.e-con` with no clamp. Any fixed pixel --width baked into a page's
   Elementor CSS therefore overflows the viewport once the viewport is
   narrower than that value, which produces a horizontal scrollbar and
   clips content off the left edge on centred containers.

   Apply the same clamp to nested containers.

   Verified: no page in this repo gives a container a negative margin, so
   nothing relies on a child overflowing its parent.
   ========================================================================== */

.e-con.e-child {
	max-width: 100%;
}

/* ==========================================================================
   2. Long unbroken strings

   A full URL in legal text, a German compound in a heading, a long bold
   product name: each sets a minimum width that its container cannot go below,
   and the page then scrolls sideways. /datenschutz/ overflowed by 314px at a
   320px viewport on a bare Google privacy-policy link.

   Let them break instead. overflow-wrap inherits, so one declaration on body
   reaches every layout. Elements that must not wrap, such as the header nav
   links and buttons, already set white-space: nowrap and are unaffected.
   ========================================================================== */

body {
	overflow-wrap: break-word;
}


/* ==========================================================================
   3. Oversized icons

   Elementor sizes an icon widget with font-size, which the SVG picks up as its
   width. Nothing caps that against the column the icon sits in, so a 140px
   icon in a narrower column simply hung over the edge. On the German home page
   that pushed the whole document 18px sideways between 768px and 870px.

   Only bites when the icon is genuinely wider than its column: at 1440px and
   at 390px the same icon keeps its intended 140px and 160px.
   ========================================================================== */

.elementor-icon,
.elementor-icon svg {
	max-width: 100%;
}


/* ==========================================================================
   4. Icon-box text columns

   An icon box is a flex row: the icon beside a heading and description. The
   text column inherits min-width: auto, so it is floored at its longest word
   and the pair can end up wider than the row. The last 3px of overflow on the
   German home page at 320px came from here.
   ========================================================================== */

.elementor-icon-box-wrapper > .elementor-icon-box-content {
	min-width: 0;
}