/* -------------------------------------------------- */
/* Mobile                                               */
/* -------------------------------------------------- */

@media (max-width: 900px) {
	/* Text over image, whichever side the image sits on at desktop width —
	   the heading has to come first on a phone, and the DOM already has it
	   there (06-warum-odoo.css only flips the painted order). */
	.section-split {
		grid-template-columns: 1fr;
	}

	.section-split--media-links .section-split__media {
		order: 0;
	}

	/* A full-width diagram on a phone is mostly whitespace and pushes the next
	   section a screen and a half down. */
	.section-split__media img {
		max-width: 560px;
		margin: 0 auto;
	}

	/* The app card carries real content (eight module names), so unlike the
	   old decorative logo mark it stays visible on a phone — just stacked
	   under the copy instead of sharing a row with it. */
	.hero__inner {
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.hero__inner .hero__panel {
		max-width: 100%;
		flex: none;
	}

	/* Dropped rather than shrunk further on a phone — the hero is already
	   tight on vertical room here (clamp(420px, 62vh, 560px), further down
	   in this same file), and the mark is a brand accent beside the copy,
	   not something the copy depends on to make its point. */
	.hero__graphic {
		display: none;
	}

	.leistungen-grid,
	.referenzen-grid,
	.zahlen-grid,
	.team-grid {
		grid-template-columns: 1fr;
	}

	.leistung-card,
	.leistung-card--wide {
		grid-column: span 1;
	}

	.leistung-card--wide,
	.leistung-card--wide.is-reverse {
		flex-direction: column;
	}

	.leistung-card__image {
		width: 100%;
	}

	/* The Vorgehen steps stack instead of sitting in a row, so the connecting
	   arrow (09-vorgehen.css) turns to point down between one card and the
	   next instead of sideways into a gap that no longer exists. Centred
	   under the badge, same "box exactly as wide as the grid gap, pushed out
	   by its own size" trick as the desktop version. */
	.vorgehen-schritte .leistung-card:not(:last-child)::after {
		content: "↓";
		top: auto;
		right: auto;
		bottom: 0;
		left: calc(var(--badge-size) / 2);
		width: 1.5rem;
		height: 1.5rem;
		line-height: 1.5rem;
		transform: translate(-50%, 100%);
	}

	/* Two flanking columns and a photo never fit a phone. Single stack, photo
	   first so the claims read as captions under it rather than a wall of
	   text before any image shows up. */
	.warum-letsdoo__layout {
		grid-template-columns: 1fr;
		gap: 3rem;
	}

	.warum-letsdoo__media {
		order: -1;
	}

	.kontakt-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.kontakt-form {
		padding: 2rem 1.5rem;
	}

	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
	}

	.vertrauen-grid {
		grid-template-columns: 1fr;
	}

	.pakete-grid {
		grid-template-columns: 1fr;
	}

	.paket-card--hervorgehoben {
		transform: none;
	}

	.paket-card--hervorgehoben:hover {
		transform: translateY(var(--hover-lift));
	}

	/* A 110px wave costs far too much vertical space on a phone — the sweep
	   still reads clearly at half the depth. Every wave (hero included) reads
	   the token, so the paddings built on it shrink with it.

	   The shapes are drawn with preserveAspectRatio='none' and painted at 100%
	   of the section width, so the curve is stretched to whatever the viewport
	   happens to be. Back when a shape carried several crests that made phones
	   steep and cramped, and the waves held a fixed 900px wavelength here and
	   tiled instead. The single-sweep shapes don't need it: one stroke squeezed
	   into 390px is still a single lazy dip, while a fixed tile would show a
	   phone one flank of the curve and read as a lopsided slant rather than a
	   swish. So mobile keeps the desktop sizing and only the depth changes.

	   The type scale (01-base.css) is a second, unrelated reason this block
	   exists: --text-h1/h2/h2-prose and --text-stat are plain fixed rem
	   values now, not the clamp() they used to be, so nothing shrinks them
	   automatically as the viewport narrows. Left alone, an 80px h1 either
	   wraps into three lines or runs past the edge of a phone screen. Every
	   var(--text-*) consumer reads the same token, so redeclaring it here
	   once is enough — no per-component overrides needed. */
	:root {
		--wave-height: 56px;
		--text-h1: 2.75rem;
		--text-h2: 2.25rem;
		--text-h2-prose: 2rem;
		/* Scaled with the headings around it: h2 is 36px here rather than
		   64px, so the lead line only has a 2x gap to body to sit inside
		   and 25.6px would crowd the heading above it. */
		--text-subheading: 1.25rem;
		--text-stat: 2rem;
		--text-lg: 1.15rem;
		--text-md: 1rem;
	}

	/* The desktop figure is generous on purpose, but a phone is already one
	   column of stacked blocks — that much padding just turns into scrolling
	   past empty screens. */
	.section {
		padding: 5rem 2rem;
	}

	.section:has(> .section__bg-photo) {
		padding-top: calc(2.5rem + var(--wave-height));
		padding-bottom: calc(2.5rem + var(--wave-height));
	}
}

@media (max-width: 768px) {
	/* Header collapses to one row: logo, icons, hamburger. The Kontakt
	   button is dropped and the menu list becomes a full-width dropdown
	   anchored to the (already positioned) .site-header, so it doesn't
	   push the toggle button onto a second row. */
	.site-header__inner {
		gap: 1rem;
	}

	.site-header__actions {
		order: 1;
		margin-left: auto;
		gap: 0.5rem;
	}

	.site-header__actions .btn {
		display: none;
	}

	.main-navigation {
		margin-left: 0;
		order: 2;
	}

	.nav-divider {
		display: none;
	}

	.menu-toggle {
		display: flex;
	}

	/* Direct-child combinator, not a plain descendant selector: the mega menu
	   (03-header.css) nests its own <ul class="mega-menu__links"> several
	   levels down inside here, and a bare ".main-navigation ul" matches that
	   one too — giving it this rule's position: absolute; top: 100%; and
	   handing every item's link list the same anchor point (the nearest
	   positioned ancestor, .main-navigation__item below), so every column's
	   links landed stacked on top of each other instead of under their own
	   eyebrow. ">" reaches only the top-level #primary-menu list this was
	   actually written for. */
	.main-navigation > ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		/* Matches the glass bar it hangs off, but kept much more opaque — this
		   one has menu items to keep readable over whatever is behind it. */
		background: rgba(255, 255, 255, 0.94);
		backdrop-filter: blur(14px) saturate(1.6);
		-webkit-backdrop-filter: blur(14px) saturate(1.6);
		border-top: 1px solid rgba(255, 255, 255, 0.6);
		box-shadow: var(--shadow-card);
		padding: 0 2rem;
		/* Bounded and independently scrollable — body.nav-open below locks
		   the page behind it, so without this a long item list (or a mega-menu
		   accordion opened inside it, 03-header.css) could run off the bottom
		   of the viewport with no way left to reach it. 80vh rather than an
		   exact "100vh minus header height" figure: the header's own height
		   isn't a fixed value anywhere to calc() against, and leaving a
		   visible sliver of page below the panel is a fine trade for not
		   needing one. */
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.site-header.is-open .main-navigation > ul {
		display: flex;
	}

	/* The menu is an overlay (position: absolute, above) with nothing of its
	   own stopping the page underneath from scrolling — toggled alongside
	   .site-header.is-open (navigation.js), not tied to it directly, so a
	   future close path (Escape key, tapping outside) only has to remove one
	   class rather than needing to know about this too. */
	body.nav-open {
		overflow: hidden;
	}

	/* Same reasoning as above — unscoped, this also drew a line under every
	   mega-menu link (.mega-menu__link-item is an <li> too), not just
	   between the top-level items it's meant to separate. */
	.main-navigation > ul > li {
		border-top: 1px solid var(--color-border);
	}

	/* The desktop mega menu is a hover panel; there's no hover on a phone, so
	   it collapses to an accordion instead — .mega-menu__toggle (hidden on
	   desktop, 03-header.css) becomes the tap target, and .main-navigation__item
	   needs its own positioning context back for that button to anchor to,
	   independent of the page-centred absolute panel the desktop rules use. */
	.main-navigation__item {
		position: relative;
		display: block;
	}

	/* Beats .main-navigation__item > .nav-link's own desktop display: flex
	   (03-header.css) back to the plain stacked row every other item in this
	   drawer uses — same selector on both sides, so it comes down to this
	   file loading after 03-header.css. Doubles as this list's version of the
	   old .main-navigation ul a rule above, scoped correctly this time. */
	.main-navigation__item > .nav-link {
		display: block;
		padding: 1rem 0;
	}

	/* Was 48px square — already at the usual minimum recommended touch-target
	   size, but the chevron marking it (8px, no visible boundary of its own)
	   was easy to miss: nothing on screen showed where the tappable area
	   actually was until a thumb happened to land inside it. Bigger box, a
	   visible circular backdrop, and a bigger glyph together make the whole
	   thing findable at a glance instead of relying on landing inside an
	   invisible zone by chance. */
	.mega-menu__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 56px;
		height: 56px;
		background: none;
		border: 0;
		padding: 0;
		color: var(--color-ink);
	}

	.mega-menu__toggle::after {
		content: "";
		position: absolute;
		inset: 4px;
		border-radius: 50%;
		background: var(--color-bg-alt);
	}

	.mega-menu__toggle::before {
		content: "";
		position: relative;
		z-index: 1;
		display: block;
		width: 12px;
		height: 12px;
		border-right: 3px solid currentColor;
		border-bottom: 3px solid currentColor;
		transform: rotate(45deg);
		transition: transform var(--transition);
	}

	.main-navigation__item.is-open .mega-menu__toggle::before {
		transform: rotate(-135deg);
	}

	/* .menu-item-has-children stacked on .main-navigation__item (both already
	   on every item that gets a .mega-menu — the former from WP core, the
	   latter this walker's own wrapper class) matches the specificity of
	   03-header.css's .main-navigation__item:hover/:focus-within .mega-menu
	   rules (three classes each, a pseudo-class counting the same as a
	   class) rather than losing to them on a plain ".mega-menu" selector.
	   Without it: a device with both touch AND a pointer (a touchscreen
	   laptop, or a screen reader driving focus) can leave :hover or
	   :focus-within true on the item after a tap, and the desktop rule's
	   translateX(-50%) — meant to centre a page-wide panel — reappears and
	   shoves this one 50% of its own width off-screen. */
	.main-navigation__item.menu-item-has-children .mega-menu {
		position: static;
		width: auto;
		padding-top: 0;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition: none;
		max-height: 0;
		overflow: hidden;
	}

	.main-navigation__item.is-open .mega-menu {
		max-height: none;
	}

	.mega-menu__panel {
		display: block;
		background: none;
		border: 0;
		box-shadow: none;
		border-radius: 0;
		padding: 0 0 1rem;
	}

	.mega-menu__columns {
		display: block;
	}

	.mega-menu__col {
		padding: 0.75rem 0;
		border-top: 1px solid var(--color-border);
	}

	.mega-menu__col:first-child {
		border-top: 0;
	}

	.mega-menu__promo {
		margin-top: 1rem;
	}

	/* The copy runs the full width of the screen here, so the desktop scrim —
	   a left-weighted sweep that has cleared by 82% — leaves the ends of every
	   line sitting on bare photograph. Flatter and more even instead, weighted
	   to the bottom where the paragraph and button are, and holding enough
	   density at the top that a brighter photo swapped in by an editor can't
	   take the headline with it. */
	.hero:not(.hero--sub)::before {
		background: linear-gradient(to top,
			rgba(10, 9, 18, 0.78) 0%,
			rgba(10, 9, 18, 0.62) 55%,
			rgba(10, 9, 18, 0.45) 100%);
	}


	/* The desktop minimums leave a phone with the panel marooned in the middle
	   of a tall photo, and push the first real content off the screen — the
	   image still reads at these heights. */
	.hero {
		min-height: clamp(420px, 62vh, 560px);
	}

	.hero--sub {
		min-height: clamp(120px, 18vh, 180px);
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
	}

	/* Just copyright and legal links now (the badge that used to sit between
	   them — footer.php/20-footer.css — is gone; a permanent corner fixture
	   instead, hidden on mobile below via .footer-badge-float). Stacked and
	   centred rather than the desktop row. */
	.site-footer__bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* An explicit stack rather than leaving it to flex-wrap: the desktop
	   rule (04-hero.css) deliberately has no flex-wrap any more — a bare
	   "wrap when it doesn't fit" was triggering well before the viewport
	   was actually narrow (min-width: auto on flex text children, see that
	   file's own comment) — so mobile needs its own rule here instead of
	   inheriting one that used to (accidentally) cover this width too. */
	.page-title__inner--with-badge {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	/* Centred and bigger than the side-by-side desktop size on its own row
	   now, rather than left-aligned at a shrunk-down size — once it's wrapped
	   under the heading instead of sitting beside it, there's a full row's
	   width to use and no text next to it to stay in proportion with. */
	.page-title__badge {
		align-self: left;
		width: 280px;
	}

	.referenz-card {
		grid-template-columns: 1fr;
	}

	.referenz-card__logo {
		align-self: start;
	}

	.entry-nav__link,
	.entry-nav__link--next {
		max-width: 100%;
		margin-left: 0;
		text-align: left;
	}
}