/*
Theme Name: SRBT EN
Theme URI: https://www.sr-begruenungstechnik.de
Description: English site theme for SR Begrünungstechnik GmbH — hydroseeding, erosion control, technical revegetation.
Version: 1.0.0
Author: Sargut Digital
Author URI: https://sargut.me
Text Domain: srbt
*/
/* === DESIGN TOKENS === */
:root {
--grey-900: #3d4f5e;
--grey-800: #4a5d6e;
--grey-700: #4a4a4a;
--grey-500: #767676;
--grey-400: #9a9a9a;
--grey-200: #d8d8d8;
--grey-100: #efefef;
--grey-50: #f7f7f7;
--white: #ffffff;
--text-primary: #3d4f5e;
--text-secondary: #4a4a4a;
--text-muted: #767676;
--border: #d8d8d8;
--border-light: #efefef;
--green: #6aab35;
--green-dark: #4d8a20;
--green-deep: #1e3d10;
--green-light: #edf6e3;
--green-pale: #f5faf0;
--accent: #6aab35;
--accent-hover: #4d8a20;
--font-display: 'Open Sans', system-ui, sans-serif;
--font-body: 'Open Sans', system-ui, sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2.5rem;
--space-xl: 3rem;
--space-xxl: 4.5rem;
--max-width: 1240px;
--radius: 3px;
--radius-lg: 6px;
}
/* === RESET === */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text-primary); background: var(--white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
/* === NAV === */
.nav { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--border-light); box-shadow: 0 1px 8px rgba(0,0,0,.06); }
.nav-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); display: flex; align-items: center; height: 72px; gap: var(--space-xl); }
.nav-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.nav-logo-img { height: 46px; width: auto; display: block; }
.nav-logo-fallback { font-family: var(--font-display); font-size: 1.2rem; color: var(--grey-800); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.nav-menu { display: flex; align-items: center; gap: 0; flex: 1; }
.nav-item { position: relative; }
.nav-link { display: block; padding: 0 var(--space-sm); font-size: .92rem; font-weight: 600; color: var(--green); text-decoration: none; height: 72px; line-height: 72px; white-space: nowrap; transition: color .12s; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link.active { color: var(--green-dark); border-bottom-color: var(--green); }
.nav-right { display: flex; align-items: center; gap: var(--space-md); margin-left: auto; flex-shrink: 0; }
.nav-phone { font-size: .92rem; font-weight: 600; color: var(--green); text-decoration: none; }
.nav-phone:hover { opacity: .7; }
.nav-dropdown { position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--border-light); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-radius: var(--radius-lg); min-width: 240px; padding: var(--space-xs) 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s; }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: .55rem var(--space-md); font-size: .83rem; color: var(--text-secondary); text-decoration: none; transition: color .1s, background .1s; }
.nav-dropdown a:hover { color: var(--green-dark); background: var(--green-light); }
/* === BUTTONS === */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .72rem 1.5rem; border-radius: var(--radius); font-family: var(--font-body); font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all .15s; white-space: nowrap; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-dark); }
.btn-outline { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border); }
.btn-outline:hover { border-color: var(--grey-700); }
.btn-outline-white { background: transparent; color: var(--grey-700); border: 1.5px solid var(--grey-300, #c4c4c4); }
.btn-outline-white:hover { background: var(--grey-100); border-color: var(--grey-500); color: var(--grey-900); }
/* === LAYOUT === */
.section { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xxl) var(--space-lg); }
/* Compact sections: less top padding when following tight elements */
.section + .section { padding-top: var(--space-xl); }
.section-full { background: var(--grey-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.section-full + .section { padding-top: var(--space-xl); }
.section + .section-full { margin-top: 0; }
.fullwidth-img { width: 100%; height: auto; display: block; max-height: 480px; object-fit: cover; }
.section-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.section-divider { height: 1px; background: var(--border-light); max-width: var(--max-width); margin: 0 auto; }
.content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-xxl); align-items: start; }
.cg-aligned { }
.cg-row { display: flex; gap: var(--space-xxl); }
.cg-row + .cg-row { margin-top: var(--space-md); }
.cg-col { flex: 1; min-width: 0; }
.cg-heading h3 { font-size: 1.15rem; line-height: 1.35; margin: 0; font-weight: 700; color: var(--text-primary); }
.cg-row > .body-text > *:first-child { margin-top: 0; }
.cg-row > .body-text > *:last-child { margin-bottom: 0; }
.cg-row > .body-text + .body-text { margin-top: 0; }
.content-grid-svg { padding-top: var(--space-md); }
.content-grid-svg svg { width: 100%; height: auto; }
.section-svg-full { margin-top: var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,.08); border: 1px solid var(--border-light); }
.section-svg-full svg { width: 100%; height: auto; display: block; }
.section-svg-pair { display: flex; gap: var(--space-lg); margin-top: var(--space-xl); }
.section-svg-pair .section-svg-full { flex: 1; min-width: 0; margin-top: 0; }
.svg-zoomable { cursor: pointer; transition: box-shadow .2s; }
.svg-zoomable:hover { box-shadow: 0 4px 24px rgba(0,0,0,.14); }
.svg-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 2rem; cursor: zoom-out; opacity: 0; transition: opacity .2s; }
.svg-lightbox.active { opacity: 1; }
.svg-lightbox svg { max-width: 95vw; max-height: 92vh; background: #fff; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.3); }
/* === BREADCRUMB === */
.breadcrumb { max-width: var(--max-width); margin: 0 auto; padding: .4rem var(--space-lg); display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: var(--text-muted); border-bottom: 1px solid var(--border-light); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); }
/* === HERO === */
.hero { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; background: var(--grey-50); border-bottom: 1px solid var(--grey-200); }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 35%; opacity: 0.08; }
/* Hero with full background image */
.hero--has-bg { min-height: 520px; background: #111; border-bottom: none; }
.hero-bg-full { position: absolute; inset: 0; z-index: 0; }
.hero-bg-full img, .hero-bg-full video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bg-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,25,5,0.85) 0%, rgba(10,25,5,0.55) 25%, rgba(10,25,5,0.18) 48%, rgba(10,25,5,0.04) 100%); z-index: 1; }
.hero--has-bg .hero-inner { position: relative; z-index: 2; grid-template-columns: 1fr; padding: var(--space-xxl) var(--space-lg); max-width: var(--max-width); }
.hero--has-bg .hero-inner > div { max-width: 680px; }
.hero--has-bg .hero-kicker { color: var(--green); }
.hero--has-bg .hero-title { color: var(--white); }
.hero--has-bg .hero-lead { color: rgba(255,255,255,0.78); }
.hero--has-bg .hero-tags { border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--space-md); }
.hero--has-bg .hero-tag { color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.hero--has-bg .hero-tag:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.hero-inner { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: var(--space-xxl) var(--space-lg); width: 100%; }
.hero-inner--single { display: block; max-width: 760px; }
.hero-content { max-width: 640px; }
.hero-kicker { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: var(--space-md); }
.hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.12; color: var(--text-primary); margin-bottom: var(--space-md); letter-spacing: -.02em; }
.hero-title { font-family: var(--font-body); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: var(--space-md); }
.hero-sub { font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--space-lg); max-width: 520px; font-weight: 300; }
.hero-lead { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; font-weight: 300; max-width: 520px; }
.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.hero-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
.hero-tags { display: flex; gap: var(--space-xs); flex-wrap: wrap; margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--grey-200); }
.hero-tag { display: inline-block; padding: .3rem .85rem; font-size: .78rem; font-weight: 500; color: var(--text-muted); border: 1px solid var(--grey-200); border-radius: 2px; text-decoration: none; transition: all .15s; letter-spacing: .02em; }
.hero-tag:hover { color: var(--text-primary); border-color: var(--grey-400); background: var(--white); }
/* Hero variant: subpages with two-column layout */
.hero--page { min-height: auto; padding: var(--space-xxl) 0; }
.hero--page .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxl); align-items: center; padding: 0 var(--space-lg); }
.hero--page .hero-inner--single { display: block; max-width: 760px; }
.hero--page .hero-tags { margin-top: var(--space-md); padding-top: 0; border-top: none; }
.hero--page .hero-tag { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; background: var(--white); }
.hero--page.hero--has-bg .hero-tag { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.65); border-color: rgba(255,255,255,0.18); }
.hero--page.hero--has-bg .hero-inner { max-width: var(--max-width); display: block; }
/* Auftragsbedingungen (page-id-10683): no ACF hero_layout set, so it falls back to the
two-column grid even though the second column is empty — title gets squeezed to half
width and wraps unnecessarily. Force single column for this page only. */
body.page-id-10683 .hero--page .hero-inner { grid-template-columns: 1fr; }
body.page-id-10683 .hero-title { hyphens: none; }
/* Nur die §-Überschriften bekommen mehr Platz nach rechts (negativer margin-right zieht
nur die Überschrift breiter als der 820px-Textblock, Absätze bleiben bei 820px) — nur ab
einer Viewport-Breite, wo im .section-Container tatsächlich ungenutzter Platz ist,
damit auf schmalen/mobilen Bildschirmen kein horizontaler Überlauf entsteht. */
@media (min-width: 960px) {
body.page-id-10683 .body-text h2,
body.page-id-10683 .body-text h3 { margin-right: -320px; }
}
/* Hero variant: homepage */
.hero--home.hero--has-bg { min-height: 720px; }
.hero--home .hero-bg-overlay {
background: linear-gradient(to right, rgba(10,25,5,0.75) 0%, rgba(10,25,5,0.50) 30%, rgba(10,25,5,0.18) 55%, rgba(10,25,5,0.0) 80%);
}
.hero--home .hero-content { max-width: 900px; }
.hero--home.hero--has-bg .hero-inner > div { max-width: 900px; }
.hero--home.hero--has-bg h1 { color: var(--white); font-size: clamp(1.6rem, 3.5vw, 2.8rem); letter-spacing: .06em; font-weight: 500; }
.hero-title-sub { display: block; font-size: .7em; font-style: italic; font-weight: 900; color: var(--white); }
.hero--home.hero--has-bg .hero-sub { color: rgba(255,255,255,0.80); }
.hero--home.hero--has-bg .btn-outline-white { border-color: rgba(255,255,255,0.4); color: var(--white); }
.hero--home.hero--has-bg .btn-outline-white:hover { background: rgba(255,255,255,0.1); }
/* === SECTION TYPOGRAPHY === */
.section-kicker { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: var(--space-sm); }
.section-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: var(--space-md); }
.section-lead { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; font-weight: 500; max-width: 660px; }
.section-intro { font-size: .95rem; color: var(--text-secondary); line-height: 1.75; font-weight: 400; max-width: 660px; margin-top: var(--space-md); }
.page-intro { padding-top: var(--space-xl); padding-bottom: 0; }
.page-intro-text { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.8; font-weight: 500; max-width: 780px; }
.body-text { font-size: .95rem; color: var(--text-secondary); line-height: 1.75; }
.body-text + .body-text { margin-top: var(--space-md); }
.body-text p { margin: 0 0 1em; }
.body-text h2 { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .6em; }
.body-text h2:first-child, .body-text h3:first-child { margin-top: 0; }
.body-text h2, .body-text h3 { hyphens: none; }
.body-text ul, .body-text ol { padding-left: 1.6em; margin: 0 0 1em; }
.body-text ul:last-child, .body-text ol:last-child { margin-bottom: 0; }
.body-text li { margin-bottom: .35em; }
.body-text > *:last-child { margin-bottom: 0; }
/* === ANWENDUNGSFELDER === */
.anwendung-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.anwendung-item { transition: border-color .2s; text-decoration: none; color: inherit; }
.anwendung-item--has-img { border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.anwendung-item--has-img:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.anwendung-item:not(.anwendung-item--has-img) { border-top: 2px solid var(--border); padding-top: var(--space-md); }
.anwendung-item:not(.anwendung-item--has-img):hover { border-top-color: var(--green); }
.anwendung-img-wrap { width: 100%; height: 220px; overflow: hidden; background: var(--grey-100); }
.anwendung-item .anwendung-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.anwendung-item:hover .anwendung-img { transform: scale(1.03); }
.anwendung-item--has-img .anwendung-body { padding: .8rem .9rem; }
.anwendung-title { font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-bottom: .4rem; }
.anwendung-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.65; }
.anwendung-norm { display: inline-block; margin-top: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--text-muted); text-transform: uppercase; }
/* === SYSTEM CARDS === */
.system-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.system-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; display: block; }
.system-card:hover { box-shadow: 0 4px 16px rgba(106,171,53,.12); border-color: var(--green); }
.system-card-header { padding: var(--space-md) var(--space-lg); background: var(--grey-50); border-bottom: 1px solid var(--border-light); }
.system-card-tag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .25rem; }
.system-card-title { font-family: var(--font-display); font-size: 1.05rem; color: var(--text-primary); }
.system-card-body { padding: var(--space-md) var(--space-lg); }
.system-card-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.65; }
.system-card-link { display: inline-block; margin-top: var(--space-sm); font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.system-card-svg { padding: 0 var(--space-md) var(--space-md); }
.system-card-svg svg { width: 100%; height: auto; display: block; }
.system-card { display: flex; flex-direction: column; }
.system-card-body { flex: 1; }
/* === HIGHLIGHT BOX === */
.highlight-box { background: var(--green-pale); border-left: 3px solid var(--green); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--space-md) var(--space-lg); margin-top: var(--space-lg); }
.highlight-box p { font-size: .88rem; color: var(--text-secondary); line-height: 1.7; }
/* === DETAIL ACCORDION === */
.detail-block { margin-top: var(--space-lg); border: 1px solid var(--border-light); border-radius: var(--radius); overflow: hidden; }
.detail-header { width: 100%; display: flex; align-items: center; padding: var(--space-sm) var(--space-md); background: var(--green-light); border-bottom: 1px solid #c8e6b0; font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--green-deep); }
.detail-content { display: none; padding: var(--space-md); font-size: .85rem; color: var(--text-secondary); line-height: 1.75; background: var(--grey-50); }
.detail-content.open { display: block; }
.detail-content p + p { margin-top: .75rem; }
/* === REGULATORIK === */
.regulatorik-band { background: var(--grey-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-lg) 0; }
.regulatorik-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.regulatorik-label { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: var(--space-sm); }
.regulatorik-items { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.regulatorik-item { display: flex; flex-direction: column; gap: .2rem; min-width: 200px; }
.regulatorik-norm { font-size: .78rem; font-weight: 700; color: var(--text-primary); }
.regulatorik-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
/* === PROZESS STEPS === */
.prozess-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); }
.step-num { font-family: var(--font-display); font-size: 2rem; color: var(--grey-200); line-height: 1; margin-bottom: var(--space-sm); }
.step-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: .4rem; }
.step-text { font-size: .85rem; color: var(--text-secondary); line-height: 1.7; }
/* === GALLERY === */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-sm); margin-top: var(--space-xl); }
.gallery img { width: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
.gallery a.gallery-item { display: block; cursor: zoom-in; overflow: hidden; border-radius: var(--radius); }
.gallery a.gallery-item:first-child { grid-row: 1/3; height: 360px; }
.gallery a.gallery-item:not(:first-child) { height: 172px; }
.gallery a.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gallery a.gallery-item:hover img { transform: scale(1.04); }
/* legacy fallback for gallery rendered as direct ![]()
children */
.gallery > img:first-child { grid-row: 1/3; height: 360px; }
.gallery > img:not(:first-child) { height: 172px; }
/* Gallery-Variante: gleich große Bilder mit Bildunterschrift (section-gallery.php,
layout==="equal") statt des Standard-Masonry (1 groß + 2 klein, ohne Unterschrift). */
.gallery--equal { grid-template-columns: repeat(3, 1fr); }
.gallery--equal .gallery-figure { margin: 0; }
.gallery--equal .gallery-item { display: block; height: auto; aspect-ratio: 1/1; }
.gallery--equal .gallery-item img { height: 100%; }
.gallery-caption { margin-top: .6rem; font-size: .78rem; font-style: italic; color: var(--text-muted); line-height: 1.5; }
.gallery-caption strong { font-style: normal; color: var(--grey-700); font-weight: 600; }
@media (max-width: 700px) {
.gallery--equal { grid-template-columns: 1fr; }
}
/* === GALLERY LIGHTBOX === */
.gallery-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; transition: opacity .2s; }
.gallery-lightbox.active { opacity: 1; }
.gl-stage { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 100%; }
.gl-image { max-width: 95vw; max-height: 88vh; object-fit: contain; box-shadow: 0 10px 50px rgba(0,0,0,.5); border-radius: 4px; display: block; }
.gl-close, .gl-prev, .gl-next { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: none; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.gl-close { top: 1.2rem; right: 1.2rem; width: 44px; height: 44px; border-radius: 50%; font-size: 1.8rem; }
.gl-close:hover { background: rgba(255,255,255,.2); }
.gl-prev, .gl-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; }
.gl-prev { left: 1.2rem; }
.gl-next { right: 1.2rem; }
.gl-prev:hover, .gl-next:hover { background: rgba(255,255,255,.2); }
.gl-counter { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-family: var(--font-body); font-size: .85rem; letter-spacing: .04em; background: rgba(0,0,0,.5); padding: .4rem .9rem; border-radius: 999px; }
@media (max-width: 700px) {
.gl-prev, .gl-next { width: 44px; height: 44px; font-size: 1.1rem; }
.gl-prev { left: .6rem; }
.gl-next { right: .6rem; }
.gl-close { top: .6rem; right: .6rem; }
.gl-image { max-height: 80vh; }
}
/* === KENNZAHL CARDS === */
.kennzahl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.kennzahl-card { background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); }
.kennzahl-zahl { font-family: var(--font-display); font-size: 2.5rem; color: var(--text-primary); line-height: 1; }
.kennzahl-unit { font-size: .85rem; color: var(--text-muted); margin-top: .25rem; }
.kennzahl-label { font-size: .82rem; font-weight: 600; color: var(--text-primary); margin-top: var(--space-sm); }
.kennzahl-desc { font-size: .78rem; color: var(--text-secondary); line-height: 1.6; margin-top: .25rem; }
/* === PARAM BLOCK === */
.param-block { background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-lg); }
.param-header { padding: var(--space-sm) var(--space-lg); background: var(--green-deep); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.85); border-bottom: none; }
.param-row { display: flex; justify-content: space-between; padding: .6rem var(--space-lg); border-bottom: 1px solid var(--border-light); font-size: .83rem; }
.param-row:last-child { border-bottom: none; }
.param-row span:first-child { color: var(--text-secondary); }
.param-row span:last-child { font-weight: 600; color: var(--text-primary); }
/* === TIMELINE === */
.timeline { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-xl); }
.timeline-item { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); position: relative; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ''; position: absolute; left: 99px; top: 28px; bottom: 0; width: 1px; background: var(--border-light); }
.timeline-item:last-child::before { display: none; }
.timeline-year { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-muted); letter-spacing: -.01em; padding-top: .15rem; text-align: right; }
.timeline-dot { position: absolute; left: 94px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--green); }
.timeline-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; }
.timeline-desc { font-size: .85rem; color: var(--text-secondary); line-height: 1.7; }
/* === VERBUND CARDS === */
.verbund-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.verbund-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.verbund-card-tag { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.verbund-card-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text-primary); margin-bottom: var(--space-sm); }
.verbund-card-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.65; }
.verbund-card-focus { margin-top: var(--space-sm); font-size: .75rem; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
/* === KACHELN (Leistungen LP) === */
.leistungen-section { max-width: var(--max-width); margin: 0 auto; padding: var(--space-xxl) var(--space-lg); }
.leistungen-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: var(--space-md); }
.leistungen-section .section-lead { margin-bottom: var(--space-xxl); font-weight: 400; }
.kachel-featured { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; margin-bottom: var(--space-lg); }
.kachel-featured:hover { box-shadow: 0 8px 32px rgba(106,171,53,.15); border-color: var(--green); }
.kachel-featured-img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.kachel-featured-body { padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
.kachel-nr { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.kachel-title { font-family: var(--font-display); font-size: 2.2rem; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: var(--space-md); }
.kachel-desc { font-size: .92rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-lg); }
.kachel-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-lg); }
.kachel-tag { font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); background: var(--grey-50); border: 1px solid var(--border-light); padding: .15rem .5rem; border-radius: 2px; }
.kachel-link { font-size: .85rem; font-weight: 700; color: var(--green-dark); display: flex; align-items: center; gap: .4rem; transition: gap .15s; }
.kachel-featured:hover .kachel-link { gap: .7rem; }
.kachel-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.kachel-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); margin-bottom: var(--space-lg); }
.kachel { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; }
.kachel:hover { box-shadow: 0 8px 32px rgba(106,171,53,.15); border-color: var(--green); }
.kachel-img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform .3s; }
.kachel:hover .kachel-img { transform: scale(1.02); }
.kachel-img-wrap { overflow: hidden; }
.kachel-body { padding: 1rem 1.1rem 1.1rem; flex: 1; display: flex; flex-direction: column; }
.kachel-body .kachel-title { font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; margin-bottom: .6rem; color: var(--green); }
.kachel-body .kachel-desc { font-size: .82rem; line-height: 1.6; flex: 1; margin-bottom: .6rem; }
.kachel-body .kachel-tags { margin-bottom: .5rem; }
.kachel-body .kachel-link { font-size: .8rem; margin-top: auto; }
.kachel:hover .kachel-body .kachel-link { gap: .7rem; }
.kachel-banner { display: block; text-decoration: none; color: inherit; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--grey-50); padding: var(--space-lg) var(--space-xl); transition: box-shadow .2s, border-color .2s; margin-top: var(--space-lg); }
.kachel-banner:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); border-color: var(--grey-400); }
.kachel-banner-content { display: flex; align-items: center; gap: var(--space-xl); }
.kachel-banner-title { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -.01em; color: var(--text-primary); margin-bottom: .4rem; }
.kachel-banner-desc { font-size: .85rem; color: var(--text-secondary); line-height: 1.65; max-width: 600px; }
/* === ANSATZ BAND === */
.ansatz-band { background: var(--grey-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-xl) 0; }
.ansatz-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-xl); }
.ansatz-num { font-family: var(--font-display); font-size: 1.8rem; color: var(--grey-200); line-height: 1; margin-bottom: var(--space-sm); }
.ansatz-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; }
.ansatz-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.65; }
/* === GASBE BAND === */
.gasbe-band { border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-lg) 0; }
.gasbe-band-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
.gasbe-logo { height: 44px; width: auto; }
.gasbe-logo-row { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.gasbe-arrow { font-size: 1.4rem; color: var(--green); line-height: 1; }
.gasbe-text { font-size: .88rem; color: var(--text-secondary); line-height: 1.6; }
.gasbe-link { color: var(--grey-700); text-decoration: none; font-weight: 500; white-space: nowrap; font-size: .85rem; flex-shrink: 0; }
.gasbe-link:hover { text-decoration: underline; }
/* === LOGISTIKHUB CARDS === */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
.hub-card { background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: var(--space-lg); }
.hub-card-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-sm); }
.hub-card-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); margin-bottom: var(--space-sm); }
.hub-card-desc { font-size: .85rem; color: var(--text-secondary); line-height: 1.7; }
/* === VERGLEICH TABLE === */
.vergleich-table { width: 100%; border-collapse: collapse; margin-top: var(--space-xl); }
.vergleich-table th { text-align: left; padding: .8rem var(--space-md); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; border-bottom: 2px solid var(--green-deep); background: transparent; }
.vergleich-table td { padding: .9rem var(--space-md); font-size: .85rem; color: var(--text-secondary); border-bottom: 1px solid var(--border-light); vertical-align: top; line-height: 1.5; }
.vergleich-table td:first-child { font-weight: 600; color: var(--text-primary); }
.vergleich-table tr:hover td { background: var(--grey-50); }
/* === PHASE BLOCK === */
.phase-block { background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-lg); }
.phase-header { padding: var(--space-sm) var(--space-lg); background: var(--green-deep); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.85); border-bottom: none; }
.phase-row { display: grid; grid-template-columns: 60px 1fr; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); border-bottom: 1px solid var(--border-light); }
.phase-row:last-child { border-bottom: none; }
.phase-num { font-family: var(--font-display); font-size: 1.2rem; color: var(--grey-300); }
.phase-content { font-size: .83rem; color: var(--text-secondary); line-height: 1.65; }
/* === MATERIALANFORDERUNGEN TABELLE (Golf) === */
.req-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: .84rem; }
.req-table th { text-align: left; padding: 10px 14px; background: var(--grey-900); color: white; font-size: .69rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.req-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--text-secondary); }
.req-table tr:last-child td { border-bottom: none; }
.req-table tr:nth-child(even) td { background: var(--grey-50); }
.req-table td:first-child { color: var(--text-primary); font-weight: 500; }
.check { color: var(--green); font-weight: 500; }
/* === AKKORDEON (Leistungen) === */
.acc-group { border-top: 1px solid var(--border-light); padding-top: 1.25rem; margin-bottom: 2rem; }
.acc-group-title { font-size: .69rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: .85rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.acc-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; background: var(--grey-50, #f7f6f4); border: 1px solid var(--border-light); border-radius: 3px; font-size: .81rem; font-weight: 500; color: var(--text-primary); cursor: pointer; transition: background .15s, border-color .15s, color .15s; font-family: inherit; }
.acc-tag:hover { border-color: var(--green); color: var(--green); }
.acc-tag.open { background: var(--green); border-color: var(--green); color: #fff; }
.acc-tag-arrow { font-size: .63rem; opacity: .6; transition: transform .2s; }
.acc-tag.open .acc-tag-arrow { transform: rotate(180deg); opacity: 1; }
.acc-panel { display: none; margin-top: .85rem; padding: 1rem 1.25rem; background: var(--grey-50, #f7f6f4); border: 1px solid var(--border-light); border-radius: 3px; }
.acc-panel.open { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.acc-panel p { font-size: .88rem; line-height: 1.75; color: var(--text-primary); flex: 1; }
.acc-link { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .81rem; font-weight: 500; color: var(--green); text-decoration: none; white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color .15s; align-self: center; }
.acc-link:hover { border-bottom-color: var(--green); }
.acc-link::after { content: '→'; }
@media (max-width: 640px) {
.acc-panel.open { flex-direction: column; gap: 1rem; }
.acc-link { align-self: flex-start; }
}
/* === KONTAKT STRIP === */
.kontakt-strip { background: #f7f7f7; border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); padding: var(--space-xl) 0; margin-top: var(--space-xxl); }
.kontakt-strip-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.kontakt-strip-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); margin-bottom: .25rem; letter-spacing: -.01em; }
.kontakt-strip-text { color: var(--text-secondary); font-size: .95rem; font-weight: 300; }
.kontakt-strip-actions { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.kontakt-phone-big { color: var(--green); text-decoration: none; font-size: 1.1rem; font-weight: 600; transition: opacity .15s; }
.kontakt-phone-big:hover { opacity: .75; }
.kontakt-strip .btn-primary { background: var(--green); }
.kontakt-strip .btn-primary:hover { background: var(--green-dark); }
.kontakt-strip .btn-outline { color: var(--text-secondary); border-color: var(--grey-300); background: transparent; }
.kontakt-strip .btn-outline:hover { border-color: var(--text-primary); color: var(--text-primary); }
/* === FOOTER === */
.footer { background: var(--grey-100); border-top: 1px solid var(--grey-200); color: var(--text-secondary); padding: var(--space-xxl) 0 var(--space-xl); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); }
/* Fünf Spalten statt vier: Equipment und Locations waren im Fuß gar nicht
verlinkt und nur über die Hauptnavigation erreichbar (Edis, Teil C.1).
Der Spaltenabstand geht von xl auf lg zurück, sonst wird es bei 1240 px eng. */
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: var(--space-lg); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--grey-200); }
.footer-logo { display: inline-block; margin-bottom: var(--space-md); }
.footer-logo-img { height: 38px; width: auto; display: block; }
.footer-desc { font-size: .83rem; line-height: 1.7; color: var(--text-muted); margin-bottom: var(--space-md); }
.footer-address { font-size: .82rem; line-height: 1.8; color: var(--text-muted); font-style: normal; }
.footer-address a { color: var(--text-secondary); text-decoration: none; }
.footer-address a:hover { color: var(--green); }
.footer-contact-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.footer-icon { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.footer-col-title { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.footer-links a { font-size: .85rem; color: var(--text-secondary); text-decoration: none; transition: color .12s; }
.footer-links a:hover { color: var(--text-primary); }
.footer-bottom { padding-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); font-size: .78rem; color: var(--text-muted); }
.footer-legal { display: flex; gap: var(--space-md); }
.footer-legal a { color: var(--text-muted); text-decoration: none; }
.footer-legal a:hover { color: var(--text-primary); }
/* === HOMEPAGE SPECIFIC === */
.stats-band { background: var(--grey-50); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); padding: var(--space-xl) 0; }
.stats-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); text-align: center; }
.stat-number { font-family: var(--font-display); font-size: 2.2rem; color: var(--text-primary); line-height: 1; }
.stat-label { font-size: .82rem; color: var(--text-muted); margin-top: .4rem; }
/* === PRINZIP / DAS UNTERNEHMEN === */
.prinzip-bg { background: var(--grey-50); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.section-header { margin-bottom: var(--space-xl); }
/* === ANWENDUNGSBEREICHE GRID (Homepage) === */
.anwendungen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; background: var(--border); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--space-xl); }
.anwendung-card { display: block; text-decoration: none; background: var(--white); padding: var(--space-lg); transition: background .15s; position: relative; }
.anwendung-card:hover { background: var(--grey-50); }
.anwendung-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-md); display: block; background: var(--grey-100); }
.anwendung-arrow { display: inline-block; margin-top: var(--space-sm); font-size: .8rem; font-weight: 600; color: var(--grey-700); letter-spacing: .02em; }
/* === PROZESS (Homepage) === */
.prozess-bg { background: var(--grey-50); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.step-line { width: 32px; height: 2px; background: var(--green); margin-bottom: var(--space-md); }
.step-num { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--grey-200); margin-bottom: var(--space-sm); letter-spacing: -.03em; }
.prozess-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--grey-200); align-items: center; }
.prozess-cta-text { font-size: .95rem; color: var(--text-secondary); font-weight: 300; }
.prozess-cta-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; align-items: center; }
.prozess-cta-phone { font-size: .88rem; color: var(--text-secondary); text-decoration: none; transition: color .15s; }
.prozess-cta-phone:hover { color: var(--text-primary); }
/* === TECHNIK & VERFAHREN GRID (Homepage) === */
.technik-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.technik-card { display: block; text-decoration: none; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-lg); transition: all .15s; background: var(--white); }
.technik-card:hover { border-color: var(--grey-700); box-shadow: 0 4px 16px rgba(61, 122, 82, 0.1); }
.technik-icon { width: 36px; height: 36px; background: var(--grey-50); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-md); flex-shrink: 0; }
.technik-icon svg { width: 18px; height: 18px; color: var(--grey-700); }
.technik-card-title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin-bottom: .4rem; }
.technik-card-desc { font-size: .83rem; color: var(--text-secondary); line-height: 1.6; }
/* === PARTNER SECTION (Homepage) === */
.partner-bg { background: var(--grey-50); border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.partner-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-xxl); align-items: start; }
.partner-text .section-lead { max-width: 100%; }
.partner-note { margin-top: var(--space-md); font-size: .85rem; color: var(--text-muted); font-style: italic; }
.kriterien-list { list-style: none; display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.kriterium { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); background: var(--white); }
.kriterium-num { font-size: .72rem; font-weight: 700; color: var(--grey-700); padding-top: 3px; flex-shrink: 0; width: 1.5rem; letter-spacing: .04em; }
.kriterium-title { font-size: .88rem; font-weight: 600; color: var(--text-primary); margin-bottom: .2rem; }
.kriterium-desc { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; }
/* === PROJEKTBERICHTE HINT (Homepage) === */
.projekte-hint { display: flex; align-items: center; justify-content: space-between; padding: var(--space-lg) var(--space-xl); background: var(--grey-50); border: 1px solid var(--border); border-radius: var(--radius-lg); gap: var(--space-lg); }
.projekte-hint-text { font-size: .92rem; color: var(--text-secondary); line-height: 1.6; }
.projekte-hint-text strong { color: var(--text-primary); display: block; margin-bottom: .25rem; font-weight: 600; }
/* === BLOG GRID (Technik & Praxis) === */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-xl); }
.blog-card { display: block; text-decoration: none; background: var(--grey-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: .6rem; transition: border-color .15s, box-shadow .15s; }
.blog-card:hover { border-color: var(--green); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.blog-card[hidden] { display: none !important; }
@keyframes srbt-blog-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.blog-card--revealed { animation: srbt-blog-fadein .35s ease-out; }
.blog-grid-more-wrap { display: flex; justify-content: center; margin-top: var(--space-xl); }
.blog-grid-load-more { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.8rem; background: var(--white); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius); font-family: var(--font-body); font-size: .85rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.blog-grid-load-more:hover { background: var(--green); border-color: var(--green); color: #fff; }
.blog-grid-load-more:active { transform: translateY(1px); }
.blog-img { width: 100%; height: 180px; object-fit: cover; background: var(--grey-100); border-radius: var(--radius); margin-bottom: var(--space-md); display: block; }
.blog-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; margin-bottom: .65rem; padding-bottom: .55rem; border-bottom: 1px solid var(--border-light); }
.blog-excerpt { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.blog-read-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: var(--space-sm); font-size: .82rem; font-weight: 600; color: var(--green); transition: gap .15s, color .15s; }
.blog-read-more-arrow { transition: transform .15s; }
.blog-card:hover .blog-read-more { color: var(--green-dark); }
.blog-card:hover .blog-read-more-arrow { transform: translateX(3px); }
.section-more { display: flex; justify-content: flex-end; margin-top: calc(var(--space-lg) - .6rem); }
/* min-height + Polsterung: der Text ist 21 px hoch, als Tippziel auf dem
Handy zu wenig. Die Polsterung wird oben an .section-more wieder abgezogen,
damit der Abstand zum Abschnitt gleich bleibt. */
.link-more { font-size: .85rem; font-weight: 600; color: var(--green-dark); text-decoration: none; letter-spacing: .02em; display: flex; align-items: center; gap: .35rem; min-height: 44px; padding: .6rem 0; transition: gap .15s; }
.link-more:hover { gap: .6rem; }
/* === BLOG CAROUSEL (Homepage only) === */
.blog-carousel { position: relative; margin-top: var(--space-xl); padding: 0 56px; }
.blog-carousel-viewport { overflow: hidden; }
.blog-carousel-track { display: flex; gap: var(--space-lg); transition: transform .5s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.blog-carousel-card { flex: 0 0 calc((100% - 2 * var(--space-lg)) / 3); min-width: 0; display: block; text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: var(--space-md); transition: border-color .15s; }
.blog-carousel-card:hover { border-color: var(--green); }
.blog-carousel-card .blog-img { width: 100%; height: 180px; object-fit: cover; background: var(--grey-100); border-radius: var(--radius); margin-bottom: var(--space-md); display: block; }
.blog-carousel-card .blog-title { font-size: .9rem; font-weight: 600; color: var(--text-primary); line-height: 1.45; margin-bottom: .4rem; }
.blog-carousel-card .blog-excerpt { font-size: .82rem; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-carousel-arrow { position: absolute; top: calc(90px); transform: translateY(0); width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 1px solid var(--border); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.08); transition: background .15s, border-color .15s, transform .15s; z-index: 2; -webkit-tap-highlight-color: transparent; }
.blog-carousel-arrow:hover { background: var(--green); border-color: var(--green); color: #fff; }
.blog-carousel-arrow:active { transform: scale(.95); }
.blog-carousel-prev { left: 0; }
.blog-carousel-next { right: 0; }
@media (max-width: 1023px) {
.blog-carousel-card { flex: 0 0 calc((100% - var(--space-lg)) / 2); }
}
@media (max-width: 767px) {
.blog-carousel { padding: 0 48px; }
.blog-carousel-card { flex: 0 0 100%; }
/* Die Pfeile waren hier auf 40 px verkleinert — genau verkehrt: mit dem
Finger braucht man mehr Fläche als mit dem Zeiger, nicht weniger. Sie
bleiben deshalb bei den 44 px aus der Grundregel. */
}
/* === READING PROGRESS BAR === */
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999; background: transparent; }
.reading-progress-bar { height: 100%; width: 0; background: var(--green); transition: width .1s linear; }
/* === ARTICLE (Single Post) === */
.article { max-width: 960px; margin: 0 auto; padding: var(--space-xl) var(--space-lg) var(--space-xxl); }
.article-header { margin-bottom: var(--space-xl); }
.article-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -.02em; color: var(--text-primary); margin-bottom: var(--space-sm); }
.article-meta { font-size: .82rem; color: var(--text-secondary); display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }
.article-meta-sep { color: var(--grey-300); }
.article-meta-cat { color: var(--green); text-decoration: none; font-weight: 500; }
.article-meta-cat:hover { text-decoration: underline; }
.article-hero { margin-bottom: var(--space-xl); }
.article-hero-img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.article-body { font-size: 1rem; line-height: 1.8; color: var(--text-primary); }
.article-body h2 { font-family: var(--font-display); font-size: 1.4rem; margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.article-body h3 { font-family: var(--font-display); font-size: 1.15rem; margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.article-body p { margin-bottom: var(--space-md); }
.article-body ul, .article-body ol { margin-bottom: var(--space-md); padding-left: 1.5rem; }
.article-body li { margin-bottom: .4rem; }
.article-footer { margin-top: var(--space-xxl); padding-top: var(--space-lg); border-top: 1px solid var(--border-light); }
/* Blog post content (Kai's Fachbeiträge) */
.article-body h2 { border-left: 3px solid var(--green); padding-left: .7em; }
.article-body .intro-box { background: var(--grey-100); border-left: 4px solid var(--green); padding: 1.1em 1.4em; margin: 1.6em 0 2em 0; font-size: .97rem; color: var(--text-secondary); }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .93rem; }
.article-body table th { background: var(--text-primary); color: #fff; padding: .6em .9em; text-align: left; font-weight: 600; }
.article-body table td { padding: .55em .9em; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.article-body table tr:nth-child(even) td { background: var(--grey-50, #f9f9f8); }
.article-body .svg-container { margin: 2em 0; background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 1em; overflow-x: auto; }
.article-body .svg-container svg { width: 100%; height: auto; display: block; }
.article-body .svg-caption { font-size: .83rem; color: var(--text-secondary); text-align: center; margin-top: .5em; font-style: italic; }
/* === Blöcke, deren Grafik fehlt =============================================
In 16 dieser Blöcke steckt keine SVG — sie fehlt bereits im deutschen
Datenbank-Export, auf der deutschen Live-Seite sehen sie identisch aus.
Übrig sind Titel, Beschriftungen und Bildunterschrift. Die leeren Absätze
räumt ein Filter in functions.php ab; hier bekommt der Rest eine Form, die
nach Absicht aussieht statt nach Panne: erste Zeile als Überschrift,
Datenzeilen eng gesetzt und abgesetzt, Unterschrift als Unterschrift.
Das ersetzt keine Zeichnung. Die 16 Grafiken müssen neu gebaut werden —
siehe tools/pruefung-svg.mjs für die Liste. */
.article-body .svg-container:not(:has(svg)) {
background: var(--grey-50, #f7f6f4);
padding: 1.25em 1.4em;
}
.article-body .svg-container:not(:has(svg)) > p {
margin: 0 0 .55em;
line-height: 1.5;
}
/* erste Zeile ist der Titel der Zeichnung */
.article-body .svg-container:not(:has(svg)) > p:first-of-type {
font-weight: 600;
font-size: 1rem;
color: var(--text-primary);
margin-bottom: 1em;
padding-bottom: .6em;
border-bottom: 1px solid var(--border-light);
}
/* Datenzeilen: die
darin waren im Original Zellgrenzen */
.article-body .svg-container:not(:has(svg)) > p:not(:first-of-type):not(.svg-caption) {
font-size: .9rem;
color: var(--text-secondary);
padding-left: .9em;
border-left: 2px solid var(--border-light);
}
.article-body .svg-container:not(:has(svg)) > .svg-caption {
margin-top: 1.1em;
padding-top: .6em;
border-top: 1px solid var(--border-light);
text-align: left;
}
.article-body .hinweis { background: #eaf7ef; border: 1px solid #b2dfc3; border-radius: var(--radius); padding: .9em 1.2em; margin: 1.5em 0; font-size: .94rem; }
.article-body .hinweis strong { color: #2a7a45; }
.article-body .warnung { background: #fdf6ec; border: 1px solid #f0d49a; border-radius: var(--radius); padding: .9em 1.2em; margin: 1.5em 0; font-size: .94rem; }
.article-body .warnung strong { color: #8a5c00; }
.article-body .meta { font-size: .88rem; color: var(--text-secondary); margin-bottom: 2em; border-bottom: 1px solid var(--border-light); padding-bottom: .8em; }
/* === RESPONSIVE === */
@media (max-width: 1024px) {
.anwendungen-grid { grid-template-columns: repeat(2, 1fr); }
.prozess-steps { grid-template-columns: 1fr; gap: var(--space-lg); }
.prozess-cta { grid-template-columns: 1fr; }
.prozess-cta-actions { justify-content: flex-start; }
.partner-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.section-svg-pair { flex-direction: column; }
.hero--page .hero-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
.content-grid { grid-template-columns: 1fr; }
.cg-row { flex-direction: column; gap: var(--space-md); }
.anwendung-grid { grid-template-columns: 1fr 1fr; }
.system-grid { grid-template-columns: 1fr; }
.prozess-steps { grid-template-columns: 1fr; }
.gallery { grid-template-columns: 1fr 1fr; }
.gallery img:first-child { grid-row: auto; height: 240px; }
.gallery img:not(:first-child) { height: 180px; }
.kennzahl-grid { grid-template-columns: 1fr 1fr; }
.verbund-grid { grid-template-columns: 1fr; }
.kachel-featured { grid-template-columns: 1fr; }
.kachel-grid-3 { grid-template-columns: 1fr 1fr; }
.kachel-grid-2 { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
.kontakt-strip-inner { flex-direction: column; text-align: center; }
.gasbe-band-inner { flex-direction: column; gap: var(--space-md); }
.ansatz-inner { grid-template-columns: 1fr; }
.hub-grid { grid-template-columns: 1fr; }
.stats-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
.kachel-banner-content { flex-direction: column; align-items: flex-start; }
.regulatorik-items { flex-direction: column; }
}
/* === Text + Image side by side (content_grid) === */
.cg-text-image {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xl);
align-items: start;
}
.cg-text-image--img-left .cg-text-image-img { order: -1; }
.cg-text-image-img img { border-radius: var(--radius); }
@media (max-width: 900px) {
.cg-text-image { grid-template-columns: 1fr; }
.cg-text-image--img-left .cg-text-image-img { order: 0; }
}
/* === Checkmark Lists === */
.check-list { list-style: none; padding-left: 0; margin: var(--space-sm) 0; }
.check-list li { position: relative; padding-left: 1.8em; margin-bottom: .55em; line-height: 1.6; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: 1.1em; }
/* === Big Hero Title — Technik & Verfahren pages === */
body.page-id-96 .hero-title,
body.page-id-4019 .hero-title,
body.page-id-4041 .hero-title,
body.page-id-4108 .hero-title,
body.page-id-11961 .hero-title,
body.page-id-11962 .hero-title,
body.page-id-11955 .hero-title,
body.page-id-11956 .hero-title,
body.page-id-11957 .hero-title,
body.page-id-1192 .hero-title,
body.page-id-11958 .hero-title,
body.page-id-11959 .hero-title,
body.page-id-2412 .hero-title,
body.page-id-4308 .hero-title,
body.page-id-12513 .hero-title {
font-size: clamp(3rem, 5.5vw, 5rem);
line-height: 1.08;
letter-spacing: -.03em;
}
/* Erosionsschutz nach Waldbrand (page-id-12513) und sein englisches Duplikat Post-Fire
Erosion Control (page-id-12520): reine ACF-Seiten ohne Elementor-Altlasten, dadurch lädt
(anders als die übrigen Verfahren-Seiten mit Elementor-Reststand) das Elementor-Kit-CSS
nicht mit, das dort per ".elementor-kit-6 h2/h3{color:#76B536}" die Überschriften grün
färbt. Explizit repliziert, damit diese Seiten optisch zur Verfahren-Reihe passen,
unabhängig von Elementors Lade-Logik. */
body.page-id-12513 .section-title,
body.page-id-12513 .body-text h3,
body.page-id-12513 .cg-heading h3,
body.page-id-12520 .section-title,
body.page-id-12520 .body-text h3,
body.page-id-12520 .cg-heading h3 {
color: #76B536;
}
/* Hero ohne hero_image: page.php setzt "hero-inner--single" nur wenn hero_layout==='single'
ODER ein Bild vorhanden ist. Bei hero_layout='two-column' ohne Bild bleibt das 2-Spalten-Grid
aktiv, obwohl nur eine Spalte Inhalt hat — derselbe Bug wie zuvor bei page-id-10683. */
body.page-id-12513 .hero--page .hero-inner { grid-template-columns: 1fr; }
/* 4 statt 3 Prozess-Schritte (Inhalt gibt 4 vor) — sauberes 2x2 statt 3+1-Umbruch */
body.page-id-12513 .prozess-steps { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) {
body.page-id-12513 .prozess-steps { grid-template-columns: 1fr; }
}
/* param_block-Zeilen: Basis-.param-row nutzt flex+space-between, wodurch die rechte Spalte
je nach Label-Länge unterschiedlich weit einrückt (kein sauberes Tabellen-Alignment bei
längeren, umbrechenden Texten). Festes Grid sorgt für konsistente Spaltenposition in allen
param_block-Tabellen dieser Seiten (12513 DE + 12520 EN-Duplikat). */
body.page-id-12513 .param-block .param-row,
body.page-id-12520 .param-block .param-row {
display: grid;
grid-template-columns: minmax(180px, 260px) 1fr;
gap: var(--space-md);
}
/* .param-block hat von Haus aus nur margin-top, kein margin-bottom — wo direkt danach eine
.section-divider-Trennlinie folgt (Einflussfaktoren- und Verfahrensvergleich-Tabelle),
sitzt die Linie sonst ohne jeden Abstand direkt an der letzten Zeile. */
body.page-id-12513 .param-block,
body.page-id-12520 .param-block { margin-bottom: var(--space-xl); }
/* Zweigeteilte param-header-Kopfzeile (section-param_block.php: "Label1|Label2" im header-Feld
ergibt Klasse "param-header--split" mit zwei ). Gleiches Spaltenraster wie .param-row,
damit Kopf und Zeilen exakt fluchten. Klasse wird nur bei "|"-Trenner im Feldwert erzeugt,
daher unkritisch für andere Seiten mit param_block (z.B. Flugbegrünung) — dort bleibt die
einzeilige .param-header-Variante unverändert bestehen. */
.param-header--split {
display: grid;
grid-template-columns: minmax(180px, 260px) 1fr;
gap: var(--space-md);
}
body.page-id-4108 .hero-bg-overlay {
background: linear-gradient(to right, rgba(10,25,5,0.72) 0%, rgba(10,25,5,0.48) 30%, rgba(10,25,5,0.15) 55%, rgba(10,25,5,0.0) 75%);
}
body.page-id-4108 .hero-bg-full img {
filter: brightness(1.0);
object-position: center 45%;
}
body.page-id-4041 .hero-bg-overlay {
background: linear-gradient(to right, rgba(10,25,5,0.70) 0%, rgba(10,25,5,0.45) 30%, rgba(10,25,5,0.12) 55%, rgba(10,25,5,0.0) 75%);
}
body.page-id-4041 .hero-bg-full img {
filter: brightness(1.1);
object-position: center 40%;
}
body.page-id-12513 .hero--has-bg {
min-height: 640px;
}
body.page-id-12513 .hero-bg-full img {
object-position: center 5%;
}
/* === ALPINE CONTENT LAYOUTS === */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 32px 0 48px; align-items: start; }
.graphic-block { background: var(--grey-50); border-radius: var(--radius); overflow: hidden; }
.graphic-block svg { width: 100%; height: auto; display: block; }
.graphic-full { margin: 32px 0; }
.graphic-full svg { width: 100%; height: auto; display: block; border-radius: var(--radius); overflow: hidden; }
.section-divider-thin { height: 1px; background: var(--border-light); margin-bottom: 32px; }
/* Card Grid (3-column) */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 32px 0; background: var(--border-light); border: 1px solid var(--border-light); }
.card-grid-3 .card { background: var(--white); padding: 28px 24px; }
.card-grid-3 .card-num { font-family: var(--font-display); font-size: 36px; color: var(--green); line-height: 1; margin-bottom: 12px; }
.card-grid-3 .card-title { font-size: .82rem; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .06em; }
.card-grid-3 .card p { font-size: .84rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
/* Highlight Box */
.highlight-box { background: var(--green-pale); border-left: 3px solid var(--green); padding: 20px 24px; margin: 32px 0; border-radius: 0 var(--radius) var(--radius) 0; }
.highlight-box p { font-size: .88rem; line-height: 1.65; color: var(--text-secondary); margin: 0; }
/* Regulation Pills */
.reg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.reg-pill { display: inline-block; padding: 6px 14px; background: var(--grey-50); border: 1px solid var(--border-light); border-radius: 20px; font-size: .75rem; color: var(--text-muted); letter-spacing: .02em; }
/* SRBT Table (Alpine) */
.srbt-table { width: 100%; border-collapse: collapse; margin: 20px 0 32px; font-size: .84rem; }
.srbt-table th { text-align: left; padding: 10px 14px; background: var(--grey-900); color: white; font-size: .69rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.srbt-table td { padding: 10px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--text-secondary); }
.srbt-table tr:last-child td { border-bottom: none; }
.srbt-table tr:nth-child(even) td { background: var(--grey-50); }
.srbt-table td:first-child { color: var(--text-primary); font-weight: 500; }
/* Body text h3 within sections */
.body-text h3 { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin: 36px 0 12px; }
.body-text h3:first-child { margin-top: 0; }
/* Wide body: remove max-width when body contains grid/SVG layouts */
.body-text:has(.intro-grid),
.body-text:has(.card-grid-3),
.body-text:has(.graphic-full),
.body-text:has(.srbt-table),
.body-text:has(.reg-pills) { max-width: none !important; }
@media (max-width: 768px) {
.anwendungen-grid { grid-template-columns: 1fr; }
.technik-grid { grid-template-columns: 1fr; }
.blog-grid { grid-template-columns: 1fr; }
.projekte-hint { flex-direction: column; }
.intro-grid { grid-template-columns: 1fr; }
.card-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.anwendung-grid { grid-template-columns: 1fr; }
.kachel-grid-3 { grid-template-columns: 1fr; }
.kennzahl-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.gallery { grid-template-columns: 1fr; }
.gallery img:first-child { height: 200px; }
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ─── Legacy Page Template ─── */
.legacy-page { padding-bottom: var(--space-xxl); }
.legacy-elementor-content { overflow: hidden; }
.legacy-elementor-content img { max-width: 100%; height: auto; }
.legacy-elementor-content a { color: var(--green); }
.legacy-elementor-content a:hover { color: var(--green-dark); }
/* ==========================================================
SIMULATIONSTOOLS-GRID (Homepage 3-Box-Sektion)
Vorher hartcodiertes inline-style "repeat(3, 1fr)"
→ jetzt als Klasse mit responsivem Verhalten
========================================================== */
.simulation-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
@media (max-width: 1024px) {
.simulation-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.simulation-grid-3 { grid-template-columns: 1fr; gap: 20px; }
}
/* ==========================================================
ELEMENTOR-KIT OVERRIDE (Buttons)
==========================================================
Elementor lädt .elementor-kit-6 a { color: var(--e-global-color-accent) }
das ist spezifischer (0,1,1) als .btn-primary (0,1,0) und überschreibt
unsere Button-Schriftfarbe. Wir erhöhen Spezifität auf (0,2,1).
*/
.elementor-kit-6 a.btn,
.elementor-kit-6 .btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus { text-decoration: none; }
.elementor-kit-6 a.btn-primary,
.elementor-kit-6 .btn-primary,
a.btn-primary:link,
a.btn-primary:visited { color: #ffffff !important; }
.elementor-kit-6 a.btn-primary:hover,
a.btn-primary:hover { color: #ffffff !important; background: var(--green-dark); }
.elementor-kit-6 a.btn-outline { color: var(--text-primary); }
.elementor-kit-6 a.btn-outline-white { color: #ffffff; }
.elementor-kit-6 a.nav-phone { color: var(--green); }
.elementor-kit-6 a.nav-link { color: var(--green); }
/* ==========================================================
MOBILE QUICK-FIXES (v1.14.0 — 2026-05-15)
========================================================== */
/* Globaler Overflow-Schutz: kein horizontales Scrollen */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe, svg { max-width: 100%; height: auto; }
/* Lange Überschriften umbrechen statt überlaufen */
h1, h2, h3, .hero h1, .hero-title, .nav-link {
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* === Hamburger-Button === */
.nav-toggle {
display: none;
background: transparent;
border: 0;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 5px;
}
.nav-toggle-bar {
display: block;
width: 24px;
height: 2px;
background: var(--green);
transition: transform .25s, opacity .25s;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-phone-mobile, .nav-cta-mobile { display: none; }
/* === Navigation umschalten: ab 900px, nicht ab 768px ======================
Hier klaffte eine Lücke. Das waagerechte Menü wird oben bei
`max-width: 900px` auf display:none gesetzt — das Hamburger-Symbol
erschien aber erst bei `max-width: 768px`. Zwischen 769 und 900 px hatte
die Seite deshalb ÜBERHAUPT KEINE Navigation: kein Menü, kein Symbol, nur
Logo und Contact-Knopf. Nachgemessen bei 900, 834 und 769 px — jedes Mal
null anklickbare Menüpunkte; bei 768 px sieben.
Das trifft genau die Tablets im Hochformat: iPad 768 (gerade noch gut),
iPad Air 820, iPad Pro 11" 834, dazu viele Android-Tablets und Telefone
im Querformat.
Die deutsche Seite hat denselben Fehler und ist davon live betroffen —
dort wird nichts geändert, es ist gemeldet.
Die Schriftgrößen bleiben bewusst bei 768 px: auf einem Tablet sollen die
Überschriften nicht auf Handygröße schrumpfen.
NACHTRAG: die Grenze liegt jetzt bei 1239/1240 px, nicht bei 900/901. Bei
901 px umzuschalten war zu früh — die englische Fassung hat SIEBEN Punkte
oberster Ebene, die deutsche nur fünf. Gemessen im emulierten Viewport:
bei 1100 px ragte "Applications" 103 px in den Telefon-/Contact-Block, bei
960 px zusätzlich "Become a Partner". Erst ab ~1236 px ist wirklich Platz
(Beschriftungen 692 + Logo 206 + rechter Block 242 + Abstände), deshalb
1240 — das ist zugleich die max-width von .nav-inner.
Der allgemeine Layout-Umbruch bleibt bei 900 px. Nur die Navigation
schaltet hier um; wer beides zusammenlegt, macht auf Laptops alle Raster
einspaltig. */
@media (max-width: 1239px) {
.nav-toggle { display: inline-flex; }
.nav-right { display: none; }
.nav-menu {
position: fixed;
top: 72px;
left: 0;
right: 0;
bottom: 0;
background: var(--white);
flex-direction: column;
align-items: flex-start;
padding: 1.5rem 1.25rem 2rem;
overflow-y: auto;
transform: translateX(100%);
transition: transform .3s ease;
z-index: 90;
display: flex !important;
gap: .25rem;
}
body.nav-open .nav-menu { transform: translateX(0); }
.nav-menu .nav-link {
height: auto;
line-height: 1.4;
padding: .85rem 0;
font-size: 1.05rem;
width: 100%;
border-bottom: 1px solid var(--border-light);
}
.nav-phone-mobile {
display: block;
margin-top: 1.5rem;
font-size: 1rem;
/* war .5rem und ergab 42 px — knapp unter der Antippfläche */
padding: .6rem 0;
}
.nav-cta-mobile {
display: inline-flex;
margin-top: .75rem;
width: 100%;
justify-content: center;
padding: .9rem 1.5rem;
}
body.nav-open { overflow: hidden; }
/* Untermenüs im Schubfach ausklappen.
Die Aufklappmenüs sind für die Maus gebaut: position:absolute,
visibility:hidden, und sichtbar werden sie nur über
`.nav-item:hover`. Auf einem Touchscreen gibt es kein Hover — damit
waren im Handymenü nur 9 von 26 Punkten erreichbar. Die 17 Unterseiten
(Infrastructure, Reclamation, Hydroseeding, Europe, Applications …)
ließen sich von dort gar nicht ansteuern.
Im Schubfach brauchen sie kein Aufklappen: sie stehen einfach
eingerückt unter ihrem Oberpunkt. Das Schubfach hat schon
overflow-y:auto, die zusätzliche Höhe rollt also.
Die deutsche Seite hat denselben Fehler (7 von 18 sichtbar) und ist
davon live betroffen — dort wird nichts geändert, es ist gemeldet. */
.nav-menu .nav-dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
min-width: 0;
width: 100%;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0 0 .4rem .9rem;
}
.nav-menu .nav-dropdown a {
padding: .7rem 0;
font-size: .95rem;
border-bottom: 1px solid var(--border-light);
}
.nav-menu .nav-dropdown a:last-child { border-bottom: 0; }
/* Antippflächen: die Akkordeon-Reiter auf /services/ waren 34 px hoch —
alle 23. Mit mehr Innenabstand kommen sie auf 44 px, ohne dass sich
Schriftgröße oder Anordnung ändern. */
.acc-tag { padding: .75rem .9rem; }
}
/* === Mobile (<= 768px) === */
@media (max-width: 768px) {
/* Heading-Größen für Mobile reduzieren */
.hero h1,
.hero-title { font-size: clamp(1.5rem, 7vw, 2.1rem) !important; line-height: 1.18 !important; }
body.page-id-96 .hero-title,
body.page-id-4019 .hero-title,
body.page-id-4041 .hero-title,
body.page-id-4108 .hero-title,
body.page-id-11961 .hero-title,
body.page-id-11962 .hero-title,
body.page-id-11955 .hero-title,
body.page-id-11956 .hero-title,
body.page-id-11957 .hero-title,
body.page-id-1192 .hero-title,
body.page-id-11958 .hero-title,
body.page-id-11959 .hero-title,
body.page-id-2412 .hero-title,
body.page-id-4308 .hero-title,
body.page-id-12513 .hero-title { font-size: clamp(1.7rem, 8vw, 2.4rem) !important; }
h1 { font-size: clamp(1.5rem, 6.5vw, 2rem); }
h2 { font-size: clamp(1.25rem, 5.5vw, 1.7rem); }
}
/* Weltkarte der Liefergebiete — statische SVG, Farben stecken in der Datei */
.weltkarte { margin: var(--space-xl) 0 0; }
.weltkarte img {
display: block; width: 100%; height: auto;
background: var(--white);
border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.weltkarte-legende {
display: flex; align-items: center; gap: .5em;
margin-top: var(--space-sm);
font-size: .82rem; color: var(--text-muted);
}
.weltkarte-punkt {
width: .8em; height: .8em; border-radius: 2px;
background: var(--green); flex: 0 0 auto;
}
/* Auf dem Handy war die Karte nur 295 px breit — bei 93 Ländern auf 240
Einheiten Kartenbreite sind Slowenien oder Montenegro dann kaum ein
Farbpunkt. Zoomen geht nicht, es ist ein ![]()
ohne Skript. Also lässt
die Karte hier die seitliche Polsterung des Inhalts aus und nutzt die
volle Fensterbreite: 375 statt 295 px, gut ein Viertel mehr.
Die Beschriftung bleibt eingerückt. */
@media (max-width: 700px) {
.weltkarte img {
width: 100vw; max-width: 100vw;
margin-left: 50%; transform: translateX(-50%);
border-left: 0; border-right: 0; border-radius: 0;
}
}
/* === Kopfleiste: Platz für das längere englische Menü ======================
Die englische Navigation trägt zwei Punkte mehr als die deutsche —
"Locations" und den vorläufigen Punkt "Verschiedenes". Zusammen brauchte
die Leiste 1291 px, ihr Behälter gibt 1160 her. Weil body ein
overflow-x: hidden trägt, gab es dafür keine Rollleiste: der Contact-Knopf
wurde bei JEDER Bildschirmbreite über 900 px um 92 px abgeschnitten, auch
auf einem großen Monitor, weil .nav-inner ohnehin bei 1240 px deckelt.
131 px kommen aus engeren Abständen und weniger Innenabstand IN DER LEISTE
(der Inhalt darunter behält seine 40 px). Bleibt danach doch einmal zu
wenig Platz — schmales Notebook, noch längeres Menü — rollt das Menü
seitlich, statt den Knopf zu verschlucken. */
@media (min-width: 1240px) {
.nav-inner { gap: var(--space-md); padding: 0 var(--space-md); }
.nav-link { padding: 0 .75rem; }
.nav-right { gap: var(--space-sm); }
/* min-width: 0 erlaubt dem Menü zu schrumpfen. Ein overflow-x: auto stand
hier auch einmal, als Sicherung falls es trotz allem zu eng wird — das war
ein Fehler und hat die Aufklappmenüs gekostet: overflow-x: auto macht die
Leiste zum Rollbehälter, und der schneidet alles ab, was außerhalb liegt.
Die Aufklappmenüs beginnen bei top: 100% — also genau an der Unterkante —
und reichten 399 px darunter. Sie waren vollständig weggeschnitten, auf
jeder Seite, ohne dass irgendein Prüfer das gemerkt hätte.
NICHT wieder einbauen. Die Beschriftungen brauchen 693 px, die Leiste hat
720 — 27 px Luft. Wenn ein Menüpunkt dazukommt und es zu eng wird, ist die
Antwort eine kürzere Beschriftung oder eine andere Gliederung, nicht eine
Rollleiste, die das Problem versteckt und die Untermenüs mitnimmt. */
.nav-menu { min-width: 0; }
}
/* === Tabellen auf dem Handy ================================================
Die Vergleichstabellen sind 423 bis 833 px breit, das Telefon hat 375.
Bisher standen die rechten Spalten schlicht außerhalb des Bildschirms —
und weil body ein overflow-x: hidden trägt, gab es keine Rollleiste,
mit der man sie hätte erreichen können. Auf 17 Seiten war damit ein Teil
des Inhalts auf dem Handy unsichtbar UND unerreichbar.
display:block macht die Tabelle selbst rollbar. Die Spaltenbreiten bleiben
dabei unverändert — nachgemessen: 125/140/151/139/145 px vorher wie
nachher. Die Tabelle bricht also nicht um, sie lässt sich nur schieben. */
@media (max-width: 767px) {
.section table,
.article table,
.prose table,
table.vergleich-table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
/* === Zeichnungen auf dem Handy =============================================
Die technischen SVG passen zwar in die Breite, ihre Beschriftung schrumpft
dabei aber auf 2,1 bis 4,8 px — das liest niemand. Die Lupe half nicht:
max-width 95vw abzüglich 2rem Rand ergab 311 px, also kaum mehr als die
294 px im Fließtext.
Im geöffneten Fenster bekommt die Zeichnung deshalb eine feste Breite und
das Fenster wird verschiebbar. Gemessen steigt die kleinste Schrift damit
auf 8,7 bis 21,2 px. Am Bildschirm ändert sich nichts. */
@media (max-width: 767px) {
.svg-lightbox {
padding: 0;
align-items: flex-start;
justify-content: flex-start;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.svg-lightbox svg {
max-width: none;
max-height: none;
width: 1200px;
height: auto;
flex: 0 0 auto;
border-radius: 0;
}
}
/* === Links im Inhaltstext ==================================================
Das Theme hatte gar keine Regel dafür — nur für Navigation, Brotkrumen und
Fußbereich. Jeder Link in einem Textabschnitt erschien deshalb im
Browser-Blau #0000EE mit Unterstreichung. Aufgefallen ist das erst auf
einem Bildschirmfoto von /applications/, wo kaputtes Markup dazu führte,
dass ganze Absätze und Überschriften als solche Links gerendert wurden.
Auch nach der Reparatur bleiben Textlinks übrig — im Impressum und auf den
drei Equipment-Unterseiten. Die gehören ins Grün der Seite. */
.body-text a,
.article-body a,
.prose a,
.section-lead a,
.section-intro a,
.intro-box a,
.hinweis a,
.warnung a {
color: var(--green);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .18em;
transition: color .12s;
}
.body-text a:hover,
.article-body a:hover,
.prose a:hover,
.section-lead a:hover,
.section-intro a:hover,
.intro-box a:hover,
.hinweis a:hover,
.warnung a:hover {
color: var(--green-dark);
}
/* === Brotkrumen auf dem Handy ==============================================
Auf tiefen Pfaden brach der Pfad unleserlich um. Auf der Qatar-Seite
verteilte sich "Home › International Surface Engineering Delivery ›
Hydroseeding & Desertification Control in MENA › Hydroseeding Qatar" über
mehrere Spalten, weil .breadcrumb ein flex mit Umbruch ist.
Jetzt bleibt der Pfad einzeilig und lässt sich schieben. Das overflow-x
ist hier gefahrlos — anders als bei .nav-menu hängt an den Brotkrumen kein
absolut positioniertes Aufklappmenü, das dabei abgeschnitten würde. */
@media (max-width: 767px) {
.breadcrumb {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.breadcrumb::-webkit-scrollbar { height: 0; }
.breadcrumb > * { flex: 0 0 auto; white-space: nowrap; }
}
/* === Keine Silbentrennung in Überschriften =================================
hyphens: auto stammt aus dem deutschen Theme, wo es Wörter wie
"Bodenstabilisierung" bändigt. Im Englischen erzeugt dieselbe Regel auf dem
Handy "recla-mation", "mecha-nisms", "prob-lems" — in einer Schlagzeile
liest sich das wie ein Fehler.
204 Überschriften auf 24 Seiten bei 390 px nachgemessen: ohne Trennung
läuft keine einzige über, und die Zeilenzahl bleibt gleich. Das
overflow-wrap: break-word aus der Grundregel bleibt als Netz bestehen. */
h1, h2, h3, .hero h1, .hero-title {
hyphens: none;
-webkit-hyphens: none;
}
/* === Fachgrafiken als gebaute Abschnitte ==================================
Neun Fachbeiträge tragen zusammen 16 Blöcke, in denen die SVG-Grafik fehlt.
Sie fehlt auch auf der deutschen Seite — es gab sie nie. Übrig blieben lose
Textzeilen und die HTML-Kommentare, die den Aufbau der Zeichnung
beschrieben: "2x2 grid of mechanism boxes", "Box 1: ionic interaction (top
left)", "Clay particle (negative)".
Genau diese Kommentare sind der Bauplan. Sie sagen, welche Zeile zu welchem
Kasten gehört — damit lässt sich der Abschnitt richtig bauen, statt lose
Absätze nur etwas hübscher anzuordnen. Der Inhalt wird zu echten Karten in
der Sprache, die das Theme schon spricht (vgl. .system-card): weiße Karte,
Rahmen, Radius, grüne Nummer, Wirkung als abgesetzter Streifen.
Was NICHT übernommen wird: Beschriftungen, die im Inneren der Zeichnung
lagen und ohne sie nichts mehr sagen — "+ + +" als Ladungssymbole,
"Clay (−)", "Treated soil". Ihr Inhalt steckt bereits im Beschreibungstext
der jeweiligen Karte.
========================================================================= */
.article-body .fig { margin: var(--space-xl) 0; }
.article-body .fig-head {
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.35;
padding-bottom: var(--space-xs);
border-bottom: 2px solid var(--green);
margin-bottom: var(--space-md);
}
.article-body .fig-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.article-body .fig-grid--3 { grid-template-columns: repeat(3, 1fr); }
.article-body .fig-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-md);
display: flex;
flex-direction: column;
transition: border-color .2s, box-shadow .2s;
}
.article-body .fig-card:hover {
border-color: var(--green);
box-shadow: 0 4px 16px rgba(106,171,53,.12);
}
.article-body .fig-card-kopf {
display: flex;
align-items: center;
gap: .6rem;
margin-bottom: .65rem;
}
.article-body .fig-num {
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--green);
color: var(--white);
font-size: .82rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
.article-body .fig-card-title {
font-family: var(--font-display);
font-size: .98rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
.article-body .fig-card-text {
font-size: .87rem;
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 var(--space-sm);
flex: 1;
}
.article-body .fig-effect {
margin: 0;
background: var(--green-pale);
border-left: 3px solid var(--green);
border-radius: 0 var(--radius) var(--radius) 0;
padding: .55rem .8rem;
font-size: .8rem;
line-height: 1.55;
color: var(--text-secondary);
}
.article-body .fig-effect strong {
color: var(--green-dark);
font-weight: 700;
}
.article-body .fig-note {
font-size: .83rem;
color: var(--text-secondary);
text-align: center;
font-style: italic;
margin-top: var(--space-md);
}
/* Auf dem Handy untereinander — zwei Spalten sind bei 375 px unlesbar. */
@media (max-width: 767px) {
.article-body .fig-grid,
.article-body .fig-grid--3 { grid-template-columns: 1fr; }
}
/* Tabellen in Fachgrafiken — heller Kopf mit grüner Kante wie .vergleich-table,
nicht der dunkle Kopf der Fließtext-Tabellen. Auf dem Handy seitlich
schiebbar, sonst stehen die rechten Spalten außerhalb des Bildschirms. */
.article-body .fig-tabelle { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body .fig-tabelle table { margin: 0; font-size: .85rem; }
.article-body .fig-tabelle th {
background: var(--grey-50, #f7f8f7);
color: var(--text-muted);
font-size: .68rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
border-bottom: 2px solid var(--green);
padding: .7rem .8rem;
white-space: nowrap;
}
.article-body .fig-tabelle td {
padding: .7rem .8rem;
border-bottom: 1px solid var(--border-light);
vertical-align: top;
line-height: 1.45;
background: transparent;
}
.article-body .fig-tabelle td:first-child { font-weight: 600; color: var(--text-primary); }
.article-body .fig-tabelle tbody tr:hover td { background: var(--green-pale); }
.article-body .fig-zelle-zusatz {
display: block;
font-size: .78rem;
color: var(--text-muted);
margin-top: .15rem;
font-weight: 400;
}
/* Schlussbemerkung unter einer Fachgrafik — kein Bildtitel, sondern eine
inhaltliche Einordnung, die im Original unter der Zeichnung stand. */
.article-body .fig-hinweis {
margin: var(--space-md) 0 0;
background: var(--green-pale);
border-left: 3px solid var(--green);
border-radius: 0 var(--radius) var(--radius) 0;
padding: .7rem .9rem;
font-size: .84rem;
line-height: 1.6;
color: var(--text-secondary);
}
/* Zwei Hälften nebeneinander (Diagramm links, Wirkprinzip rechts). */
.article-body .fig-zweispalt {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
align-items: start;
}
.article-body .fig-spalte-titel {
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: var(--space-sm);
}
/* Balken: Beschriftung, Wert, proportionaler Balken. Die Anteile stammen aus
den Bauplan-Kommentaren der verlorenen Zeichnung ("Bar 1: pure sand ~1",
"Bar 3: loam ~18") — also aus den Originaldaten, nicht geschätzt. */
.article-body .fig-balken { display: flex; flex-direction: column; gap: .7rem; }
.article-body .fig-balken-zeile { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: baseline; }
.article-body .fig-balken-name { font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.article-body .fig-balken-wert { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.article-body .fig-balken-spur {
grid-column: 1 / -1;
height: .55rem;
background: var(--border-light);
border-radius: 999px;
overflow: hidden;
}
.article-body .fig-balken-fuellung {
display: block;
height: 100%;
background: var(--green);
border-radius: 999px;
}
/* Abgeschnittener Balken: die Zeichnung hatte hier einen Pfeil, weil der Wert
über die Achse hinausging. */
.article-body .fig-balken-zeile--offen .fig-balken-fuellung {
background: linear-gradient(90deg, var(--green) 78%, var(--green-light));
}
.article-body .fig-balken-zeile--offen .fig-balken-wert::after { content: ' ↑'; color: var(--green); }
/* Zwei gegenübergestellte Schritte (ohne / mit Behandlung). */
.article-body .fig-schritt {
background: var(--white);
border: 1px solid var(--border);
border-left: 3px solid var(--border);
border-radius: var(--radius);
padding: .8rem .9rem;
margin-bottom: var(--space-sm);
}
.article-body .fig-schritt:last-child { margin-bottom: 0; }
.article-body .fig-schritt--gut { border-left-color: var(--green); }
.article-body .fig-schritt-name { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.article-body .fig-schritt-zusatz { font-size: .78rem; color: var(--text-muted); margin-left: .35rem; font-weight: 400; }
.article-body .fig-schritt-text { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin: .35rem 0 0; }
.article-body .fig-marker {
display: inline-block;
font-size: .72rem;
font-weight: 700;
letter-spacing: .04em;
padding: .1rem .4rem;
border-radius: var(--radius);
background: var(--grey-50, #f7f8f7);
color: var(--text-muted);
margin-right: .3rem;
}
@media (max-width: 767px) {
.article-body .fig-zweispalt { grid-template-columns: 1fr; }
}
/* Dreier-Vergleich mit Bewertung: zu wenig / richtig / zu viel.
Die Zeichnung hatte hier drei Spalten mit ✓- und ✗-Kästen. */
.article-body .fig-card--gut { border-top: 3px solid var(--green); }
.article-body .fig-card--schlecht { border-top: 3px solid #c4756a; }
.article-body .fig-card-mass {
font-size: .76rem;
color: var(--text-muted);
font-weight: 400;
display: block;
margin-top: .1rem;
}
.article-body .fig-liste { list-style: none; margin: 0; padding: 0; }
.article-body .fig-liste li {
position: relative;
padding-left: 1.25rem;
font-size: .82rem;
line-height: 1.55;
color: var(--text-secondary);
margin-bottom: .45rem;
}
.article-body .fig-liste li:last-child { margin-bottom: 0; }
.article-body .fig-liste li::before {
position: absolute;
left: 0;
top: 0;
font-weight: 700;
}
.article-body .fig-liste li.ja::before { content: '✓'; color: var(--green); }
.article-body .fig-liste li.nein::before { content: '✗'; color: #c4756a; }
/* Kurze Anmerkung an einem Balken (stand in der Zeichnung daneben). */
.article-body .fig-balken-notiz {
grid-column: 1 / -1;
font-size: .74rem;
color: var(--text-muted);
margin-top: .1rem;
}
.article-body .fig-balken-notiz--gut { color: var(--green-dark); }
/* Schichtaufbau (Querschnitt). Die Zeichnung zeigte übereinanderliegende
Bänder von der Oberfläche bis in den Boden; hier stehen sie als gestapelte
Blöcke, oben die Oberfläche, unten der Boden. */
.article-body .fig-oben {
font-size: .76rem;
color: var(--text-muted);
text-align: center;
margin-bottom: .45rem;
}
.article-body .fig-oben::after { content: ' ↓'; }
.article-body .fig-schichten { display: flex; flex-direction: column; gap: 2px; }
.article-body .fig-schicht {
background: var(--white);
border: 1px solid var(--border);
border-left: 4px solid var(--green);
padding: .7rem .9rem;
}
.article-body .fig-schicht:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.article-body .fig-schicht:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.article-body .fig-schicht--zwischen { border-left-color: var(--green-dark); background: var(--green-pale); }
.article-body .fig-schicht--boden {
border-left-color: #9c8768;
background: var(--grey-50, #f7f8f7);
}
.article-body .fig-schicht-kopf { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.article-body .fig-schicht-nr {
flex: 0 0 auto;
width: 1.35rem;
height: 1.35rem;
border-radius: 50%;
background: var(--green);
color: var(--white);
font-size: .72rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
}
.article-body .fig-schicht-name { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.article-body .fig-schicht-tiefe { font-size: .76rem; color: var(--text-muted); }
.article-body .fig-schicht-text { font-size: .82rem; color: var(--text-secondary); line-height: 1.55; margin: .3rem 0 0; }
.article-body .fig-schicht-text + .fig-schicht-text { margin-top: .15rem; color: var(--text-muted); font-size: .78rem; }
/* Ergebniszeile unter einer Bewertungsliste. */
.article-body .fig-folge {
margin: .6rem 0 0;
font-size: .8rem;
color: var(--text-muted);
border-top: 1px solid var(--border-light);
padding-top: .5rem;
}
/* Jahresraster: zwölf Monatsspalten, markierte Zeiträume.
Die Monatsbereiche stammen aus den Bauplan-Kommentaren der Zeichnung
("Nov–May approx.", "Jul–Aug (after snowmelt)"). */
.article-body .fig-monate { display: flex; flex-direction: column; gap: .75rem; }
.article-body .fig-monate-kopf {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
font-size: .66rem;
color: var(--text-muted);
text-align: center;
letter-spacing: .02em;
}
.article-body .fig-monate-zeile-name {
font-size: .84rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: .2rem;
}
.article-body .fig-monate-zeile-notiz {
font-size: .76rem;
color: var(--text-muted);
margin-left: .4rem;
font-weight: 400;
}
.article-body .fig-monate-spur {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2px;
}
.article-body .fig-monate-spur span {
height: .8rem;
background: var(--border-light);
border-radius: 2px;
}
.article-body .fig-monate-spur span.an { background: var(--green); }
.article-body .fig-monate-spur span.an-hell { background: var(--green-light); }
/* Zonen-Skala: was die Zeichnung als Kurve zeigte, steht hier als Abfolge von
Bereichen. Eine Kurve lässt sich aus Beschriftungen nicht rekonstruieren —
die Aussage (wo das Optimum liegt, wo es kippt) sehr wohl. */
.article-body .fig-zonen { display: grid; gap: var(--space-sm); }
.article-body .fig-zonen--3 { grid-template-columns: repeat(3, 1fr); }
.article-body .fig-zonen--4 { grid-template-columns: repeat(4, 1fr); }
.article-body .fig-zone {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: .7rem .8rem;
background: var(--white);
}
.article-body .fig-zone--optimum { border-color: var(--green); background: var(--green-pale); }
.article-body .fig-zone-name { font-size: .84rem; font-weight: 700; color: var(--text-primary); }
.article-body .fig-zone-text { font-size: .78rem; color: var(--text-secondary); line-height: 1.5; margin: .3rem 0 0; }
.article-body .fig-zone-stufe {
display: block;
height: .35rem;
border-radius: 999px;
background: var(--green);
margin-bottom: .5rem;
}
.article-body .fig-achse {
display: flex;
justify-content: space-between;
font-size: .72rem;
color: var(--text-muted);
margin-top: .5rem;
}
@media (max-width: 767px) {
.article-body .fig-zonen--3,
.article-body .fig-zonen--4 { grid-template-columns: 1fr; }
.article-body .fig-monate-kopf { font-size: .58rem; }
}
/* ==== Mobil: Tabellen schwenkbar, Grafik-Lightbox nutzbar — Anfang ==== */
/* Tabellen: 3 bis 5 Spalten passen auf einem Telefon nicht nebeneinander.
Ohne diese Regel liegen die hinteren Spalten ausserhalb des Schirms und
sind nicht erreichbar, weil ein Elternelement waagerecht abschneidet. */
@media (max-width: 900px) {
.article-body table,
.section table,
.vergleich-table,
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.article-body table > *,
.section table > *,
table > * {
/* die Zeilen sollen weiterhin als Tabelle rechnen */
display: table;
width: auto;
/* 720 px statt max-content: mit max-content werden die Spalten so breit
wie ihr laengster Satz, man wischt ewig. 720 px laesst den Text
umbrechen und passt in knapp zwei Schirmbreiten. */
min-width: 720px;
}
}
/* Grafik-Lightbox: auf dem Telefon war sie auf 95vw gedeckelt und damit
genauso klein wie die Grafik auf der Seite. Jetzt darf die Grafik
breiter als der Schirm werden und die Lightbox laesst sich schwenken. */
@media (max-width: 767px) {
.svg-lightbox {
padding: 0;
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
cursor: default;
}
.svg-lightbox svg {
/* Vorrang erzwungen, weil die Simulationsgrafiken der Startseite ein
style="width:100%" im SVG selbst tragen. Ohne das bleibt die
geoeffnete Grafik dort 372 px breit und die Beschriftung 5,5 px hoch. */
max-width: none !important;
max-height: none !important;
width: 1400px !important;
height: auto;
border-radius: 0;
margin: 0;
}
}
/* ==== Mobil: Tabellen schwenkbar, Grafik-Lightbox nutzbar — Ende ==== */
/* ==== A.9 Kennzeichnung KI-veraenderter Bilder — Anfang ==== */
/* Die Marke haengt am Elternelement des Bildes: ein ![]()
kann selbst kein
Pseudoelement tragen. Getroffen wird ueber den Dateinamen-Stamm, damit
jede srcset-Groesse dieselbe Marke bekommt. Liste der Bilder siehe
SRBT_KI-Bildkennzeichnung. */
:where(:has(> img[src*="gasbe-network-member-meeting"])),
:where(:has(> img[src*="dust-control-tanker-spraying-quarry-haul-road"])) {
position: relative;
}
:where(:has(> img[src*="gasbe-network-member-meeting"]))::after,
:where(:has(> img[src*="dust-control-tanker-spraying-quarry-haul-road"]))::after {
content: "AI modified";
position: absolute;
right: .5rem;
bottom: .5rem;
z-index: 2;
padding: .25rem .45rem;
border-radius: 3px;
background: rgba(17, 24, 39, .58);
color: #fff;
font-size: .68rem;
font-weight: 600;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
pointer-events: none;
}
/* ==== A.9 Kennzeichnung KI-veraenderter Bilder — Ende ==== */
/* ==== Gruene Abschnittsueberschriften (Gegenstuecke der gruenen DE-Seiten) — Anfang ==== */
/* Auf der deutschen Seite sind diese neun Seiten gruen — allerdings durch
einen Elementor-Rest, der dort auch Manrope 900 und 52 px erzwingt.
Uebernommen ist bewusst nur die FARBE: Groesse und Schrift bleiben die
des Themes, damit die englische Seite in sich einheitlich bleibt. */
body.page-id-187 .section-title,
body.page-id-175 .section-title,
body.page-id-184 .section-title,
body.page-id-176 .section-title,
body.page-id-186 .section-title,
body.page-id-165 .section-title,
body.page-id-166 .section-title,
body.page-id-167 .section-title,
body.page-id-444 .section-title {
color: #76B536;
}
body.page-id-187 .cg-heading h3,
body.page-id-187 .body-text h3,
body.page-id-175 .cg-heading h3,
body.page-id-175 .body-text h3,
body.page-id-184 .cg-heading h3,
body.page-id-184 .body-text h3,
body.page-id-176 .cg-heading h3,
body.page-id-176 .body-text h3,
body.page-id-186 .cg-heading h3,
body.page-id-186 .body-text h3,
body.page-id-165 .cg-heading h3,
body.page-id-165 .body-text h3,
body.page-id-166 .cg-heading h3,
body.page-id-166 .body-text h3,
body.page-id-167 .cg-heading h3,
body.page-id-167 .body-text h3,
body.page-id-444 .cg-heading h3,
body.page-id-444 .body-text h3 {
color: #76B536;
}
/* ==== Gruene Abschnittsueberschriften — Ende ==== */
/* ==== Ueberschriftengroessen nach deutschem Vorbild — Anfang ==== */
/* 1. Grosse Hero-Ueberschrift — dieselbe Staffelung wie auf den deutschen
Gegenstuecken (dort 76 px bei 1400 px). Die vorhandene Regel weiter oben
nennt die Seiten-IDs der deutschen Installation und greift hier nie. */
body.page-id-187 .hero-title,
body.page-id-187 .hero h1,
body.page-id-184 .hero-title,
body.page-id-184 .hero h1,
body.page-id-176 .hero-title,
body.page-id-176 .hero h1,
body.page-id-186 .hero-title,
body.page-id-186 .hero h1,
body.page-id-165 .hero-title,
body.page-id-165 .hero h1,
body.page-id-166 .hero-title,
body.page-id-166 .hero h1,
body.page-id-167 .hero-title,
body.page-id-167 .hero h1,
body.page-id-152 .hero-title,
body.page-id-152 .hero h1,
body.page-id-153 .hero-title,
body.page-id-153 .hero h1,
body.page-id-155 .hero-title,
body.page-id-155 .hero h1,
body.page-id-156 .hero-title,
body.page-id-156 .hero h1,
body.page-id-158 .hero-title,
body.page-id-158 .hero h1,
body.page-id-177 .hero-title,
body.page-id-177 .hero h1,
body.page-id-375 .hero-title,
body.page-id-375 .hero h1,
body.page-id-175 .hero-title,
body.page-id-175 .hero h1 {
font-size: clamp(3rem, 5.5vw, 5rem);
line-height: 1.08;
letter-spacing: -.03em;
}
/* 2. Abschnittsueberschriften auf den neun Seiten, deren deutsche
Gegenstuecke gruen und groesser gesetzt sind (Elementor-Rest dort:
h2 52/26 px, h3 30/24 px). Groessen uebernommen, Schrift bleibt
Open Sans. */
body.page-id-187 .section-title,
body.page-id-175 .section-title,
body.page-id-184 .section-title,
body.page-id-176 .section-title,
body.page-id-186 .section-title,
body.page-id-165 .section-title,
body.page-id-166 .section-title,
body.page-id-167 .section-title {
font-size: 3.25rem;
}
body.page-id-187 .cg-heading h3,
body.page-id-187 .body-text h3,
body.page-id-175 .cg-heading h3,
body.page-id-175 .body-text h3,
body.page-id-184 .cg-heading h3,
body.page-id-184 .body-text h3,
body.page-id-176 .cg-heading h3,
body.page-id-176 .body-text h3,
body.page-id-186 .cg-heading h3,
body.page-id-186 .body-text h3,
body.page-id-165 .cg-heading h3,
body.page-id-165 .body-text h3,
body.page-id-166 .cg-heading h3,
body.page-id-166 .body-text h3,
body.page-id-167 .cg-heading h3,
body.page-id-167 .body-text h3 {
font-size: 1.875rem;
line-height: 1.17;
}
@media (max-width: 767px) {
body.page-id-187 .section-title,
body.page-id-175 .section-title,
body.page-id-184 .section-title,
body.page-id-176 .section-title,
body.page-id-186 .section-title,
body.page-id-165 .section-title,
body.page-id-166 .section-title,
body.page-id-167 .section-title {
font-size: 1.625rem;
}
body.page-id-187 .cg-heading h3,
body.page-id-187 .body-text h3,
body.page-id-175 .cg-heading h3,
body.page-id-175 .body-text h3,
body.page-id-184 .cg-heading h3,
body.page-id-184 .body-text h3,
body.page-id-176 .cg-heading h3,
body.page-id-176 .body-text h3,
body.page-id-186 .cg-heading h3,
body.page-id-186 .body-text h3,
body.page-id-165 .cg-heading h3,
body.page-id-165 .body-text h3,
body.page-id-166 .cg-heading h3,
body.page-id-166 .body-text h3,
body.page-id-167 .cg-heading h3,
body.page-id-167 .body-text h3 {
font-size: 1.5rem;
}
}
/* ==== Ueberschriftengroessen nach deutschem Vorbild — Ende ==== */
/* ==== Staffel: Fallstudien, Guides und die dritte Ebene — Anfang ==== */
/* Fallstudien und Insights-Guides: dieselbe grosse Hero-Ueberschrift wie auf
den uebrigen Baukasten-Seiten, damit der Abstand zu den Abschnitts-
ueberschriften (40 px) sichtbar ist. Vorher lagen 54 und 40 px so nah
beieinander, dass die Seite wie eine Kette gleichrangiger Ueberschriften
gelesen wurde. */
body.parent-pageid-307 .hero-title,
body.parent-pageid-307 .hero h1,
body.parent-pageid-154 .hero-title,
body.parent-pageid-154 .hero h1 {
font-size: clamp(3rem, 5.5vw, 5rem);
line-height: 1.08;
letter-spacing: -.03em;
}
/* Dritte Ebene: ein Abschnitt, der ueber das Feld "titel_ebene" auf h3
gesetzt ist, muss auch kleiner aussehen als ein h2 — sonst ist die Ebene
nur im Quelltext vorhanden. Zwischen Abschnittsueberschrift (40 px) und
Fliesstext (16 px). */
h3.section-title {
font-size: clamp(1.35rem, 1.9vw, 1.65rem);
line-height: 1.25;
}
@media (max-width: 767px) {
h3.section-title {
font-size: 1.25rem;
}
}
/* ==== Staffel: Fallstudien, Guides und die dritte Ebene — Ende ==== */