so admin-typed B/I/links/lists render with our typography. */
.module-about-intro {
color: var(--about-grey);
font-size: 0.98rem;
font-style: italic;
line-height: 1.65;
}
.module-about-intro p {
margin: 0 0 16px;
}
.module-about-intro p:last-child {
margin-bottom: 0;
}
.module-about-intro strong,
.module-about-intro b {
font-style: normal;
font-weight: 700;
color: var(--about-blue);
}
.module-about-intro em,
.module-about-intro i {
font-style: italic;
}
.module-about-intro a {
color: var(--about-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-about-intro a:hover {
color: var(--about-blue);
}
.module-about-intro ul,
.module-about-intro ol {
margin: 8px 0 16px;
padding-left: 22px;
}
.module-about-intro li {
margin-bottom: 4px;
}
.module-about-subheading {
color: var(--about-blue);
font-size: 1.4rem;
font-weight: 700;
font-style: italic;
margin: 24px 0 14px;
line-height: 1.2;
}
.module-about-points {
list-style: none;
padding: 0 0 0 22px;
margin: 0 0 24px;
}
.module-about-point {
color: var(--about-grey);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 10px;
font-style: italic;
}
.module-about-point-label {
color: var(--about-blue);
font-weight: 700;
font-style: normal;
}
/* The desc is richtext now — strip the wrapper margins so
it stays inline alongside the bold label. */
.module-about-point-desc p {
display: inline;
margin: 0;
}
.module-about-point-desc strong,
.module-about-point-desc b {
font-style: normal;
font-weight: 700;
color: var(--about-blue);
}
.module-about-point-desc a {
color: var(--about-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-about-point-desc a:hover {
color: var(--about-blue);
}
.module-about-outro {
color: var(--about-grey);
font-size: 0.96rem;
font-style: italic;
line-height: 1.65;
margin: 16px 0 0;
}
.module-about-outro p {
margin: 0 0 14px;
}
.module-about-outro p:last-child {
margin-bottom: 0;
}
.module-about-outro strong,
.module-about-outro b {
font-style: normal;
font-weight: 700;
color: var(--about-blue);
}
.module-about-outro em,
.module-about-outro i {
font-style: italic;
}
.module-about-outro a {
color: var(--about-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-about-outro a:hover {
color: var(--about-blue);
}
.module-about-outro ul,
.module-about-outro ol {
margin: 8px 0 14px;
padding-left: 22px;
}
/* Image-right variant: just swap visual order via grid ordering */
.module-about-image-right .module-about-grid {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
/* Mobile: stack vertically, image on top */
@media (max-width: 900px) {
.module-about-grid,
.module-about-image-right .module-about-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.module-about-image {
aspect-ratio: 16 / 10;
max-width: 600px;
margin: 0 auto;
}
.module-about-section {
margin: 40px 0;
}
}
/* ════════════════════════════════════════════════════════════════
ROUND 31 — bulletproof slideshow gap fix
════════════════════════════════════════════════════════════════
Problem: even after round 30's body.no-page-title approach, a
~20-30px white gap remained when [hero-slideshow] was used on
regular pages. Cause: the body class is only added when the
show_title COLUMN exists in the DB AND the admin set it to 0.
On installs where the auto-migration didn't run yet, OR where
the admin didn't set show_title=0, the body class isn't
present so the round-30 rules don't apply.
Solution: use :has() to detect "the page-content's first child
contains a hero-slideshow" and zero the top padding REGARDLESS
of body class or DB state. For older browsers without :has(),
fall back to a more aggressive negative margin on the slideshow
itself (which works as long as overflow doesn't clip it).
════════════════════════════════════════════════════════════════ */
/* Modern browsers (~95% as of 2026): :has() detects a slideshow
inside .page-content's container and zeros the gap directly.
This works regardless of the body class, regardless of whether
the show_title column even exists in the database. */
@supports selector(:has(*)) {
.page-content:has(> .container > .hero-slideshow:first-child),
.page-content:has(> .container > .hero-slideshow:first-of-type) {
padding-top: 0;
}
/* Cancel the negative margin too (round 25 added it to "eat"
the page-content padding that's now zero). */
.page-content:has(> .container > .hero-slideshow:first-child) > .container > .hero-slideshow:first-child,
.page-content:has(> .container > .hero-slideshow:first-of-type) > .container > .hero-slideshow:first-of-type {
margin-top: 0;
}
}
/* Fallback for browsers without :has() — keep the round-25 approach
(negative margin on the slideshow). This is already in place from
round 25 / 29 / 30, so we just leave it untouched here. The :has()
block above takes precedence in modern browsers. */
/* Bonus: the same treatment for [process-steps] and [about-section]
when they're the first thing on a page with no title strip. */
@supports selector(:has(*)) {
.page-content:has(> .container > .module-process-steps:first-child),
.page-content:has(> .container > .process-section:first-child),
.page-content:has(> .container > .module-about-section:first-child) {
padding-top: 0;
}
}
/* ════════════════════════════════════════════════════════════════
ROUND 31 — sticky WYSIWYG toolbar
════════════════════════════════════════════════════════════════
When editing long pages with many modules, the user shouldn't
lose access to the formatting toolbar when they scroll down.
position:sticky pins the toolbar to the top of the viewport
while the wrapper is in view.
We use top:0 with high z-index. The wy-wrapper (parent) is
position:relative so sticky resolves correctly within it.
════════════════════════════════════════════════════════════════ */
.wy-toolbar {
position: sticky !important;
top: 0;
z-index: 100;
background: var(--wy-toolbar-bg, #f8fafc);
/* Subtle shadow when stuck so it's visually distinct from
the content scrolling behind it. */
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* ════════════════════════════════════════════════════════════════
MODULE: Industry Solutions [industry-solutions]
"Branchenlösungen" pattern — header strip with eyebrow / italic
heading / subtitle / gold rule, then a row of cards. Each card
has a big serif italic NUMBER at the top by default, with the
option to override per-card to an icon or uploaded image.
════════════════════════════════════════════════════════════════ */
.module-industry-solutions {
--isol-navy: #0B1D3A;
--isol-gold: #E8A317;
--isol-grey: #64748b;
--isol-grey-light: #94a3b8;
--isol-card-border: #e2e8f0;
padding: 64px 0;
background: #fff;
}
/* Header strip — shared visual language with services-grid */
.module-isol-header {
text-align: center;
margin-bottom: 40px;
}
.module-isol-eyebrow {
display: inline-block;
color: var(--isol-gold);
font-size: 0.84rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.module-isol-heading {
color: var(--isol-navy);
font-size: 2rem;
font-weight: 800;
font-style: italic;
margin: 0 0 8px;
line-height: 1.2;
}
.module-isol-subtitle {
color: var(--isol-grey-light);
font-size: 1rem;
font-style: italic;
margin: 0 0 18px;
line-height: 1.5;
}
.module-isol-rule {
width: 56px;
height: 3px;
background: var(--isol-gold);
border-radius: 2px;
margin: 0 auto;
}
/* Cards grid */
.module-isol-grid {
display: grid;
gap: 18px;
}
.module-isol-cols-2 .module-isol-grid { grid-template-columns: repeat(2, 1fr); }
.module-isol-cols-3 .module-isol-grid { grid-template-columns: repeat(3, 1fr); }
.module-isol-cols-4 .module-isol-grid { grid-template-columns: repeat(4, 1fr); }
.module-isol-cols-5 .module-isol-grid { grid-template-columns: repeat(5, 1fr); }
.module-isol-card {
background: #fff;
border: 1px solid var(--isol-card-border);
border-radius: 12px;
padding: 28px 22px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
display: flex;
flex-direction: column;
/* Long descriptions in some cards shouldn't push other cards
to be taller — but we DO want all cards in a row to have the
same height, so use stretch on the grid. */
height: 100%;
text-decoration: none;
color: inherit;
}
.module-isol-card-link {
cursor: pointer;
}
.module-isol-card-link:hover {
border-color: var(--isol-navy);
box-shadow: 0 8px 24px rgba(11, 29, 58, 0.10);
transform: translateY(-2px);
}
/* Top-of-card visual — number / icon / image, all positioned the
same way (top, ~ same vertical real-estate). */
.module-isol-card-visual {
margin-bottom: 18px;
line-height: 1;
display: flex;
align-items: flex-start;
min-height: 56px; /* keeps cards aligned regardless of mode */
}
/* Number mode — big serif italic */
.module-isol-visual-number {
font-family: 'Georgia', 'Times New Roman', serif;
font-style: italic;
font-weight: 400;
font-size: 3rem;
color: var(--isol-navy);
letter-spacing: -0.02em;
}
/* Icon mode — gold colour to make the icon pop visually */
.module-isol-visual-icon {
color: var(--isol-navy);
}
.module-isol-visual-icon svg {
width: 36px;
height: 36px;
}
/* Image mode — capped size so layouts don't break */
.module-isol-visual-image {
width: 56px;
height: 56px;
border-radius: 8px;
overflow: hidden;
background: #f1f5f9;
}
.module-isol-visual-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.module-isol-card-title {
color: var(--isol-navy);
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
margin: 0 0 12px;
line-height: 1.3;
}
.module-isol-card-desc {
color: var(--isol-grey);
font-size: 0.86rem;
font-style: italic;
line-height: 1.6;
flex: 1; /* take remaining space so cards stretch evenly */
}
.module-isol-card-desc p {
margin: 0 0 10px;
}
.module-isol-card-desc p:last-child {
margin-bottom: 0;
}
.module-isol-card-desc strong,
.module-isol-card-desc b {
color: var(--isol-navy);
font-style: normal;
font-weight: 700;
}
.module-isol-card-desc a {
color: var(--isol-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-isol-card-desc a:hover {
color: var(--isol-navy);
}
.module-isol-card-desc ul,
.module-isol-card-desc ol {
margin: 6px 0;
padding-left: 20px;
}
/* Responsive */
@media (max-width: 1100px) {
.module-isol-cols-4 .module-isol-grid,
.module-isol-cols-5 .module-isol-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.module-isol-cols-2 .module-isol-grid,
.module-isol-cols-3 .module-isol-grid,
.module-isol-cols-4 .module-isol-grid,
.module-isol-cols-5 .module-isol-grid {
grid-template-columns: 1fr;
}
.module-industry-solutions {
padding: 48px 0;
}
.module-isol-heading {
font-size: 1.6rem;
}
}
/* ════════════════════════════════════════════════════════════════
MODULE: Services Grid [services-grid]
"Unsere Leistungen" pattern — header strip + grid of cards. Each
card has a navy-gradient square at the top-left containing a
gold icon, then bold italic title + italic description below.
════════════════════════════════════════════════════════════════ */
.module-services-grid {
--svc-navy: #0B1D3A;
--svc-navy-2: #1e3a8a;
--svc-gold: #E8A317;
--svc-grey: #64748b;
--svc-grey-light: #94a3b8;
--svc-card-border: #e2e8f0;
padding: 64px 0;
background: #f8fafc;
}
/* Header strip — same shape as industry-solutions */
.module-svc-header {
text-align: center;
margin-bottom: 40px;
}
.module-svc-eyebrow {
display: inline-block;
color: var(--svc-gold);
font-size: 0.84rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.module-svc-heading {
color: var(--svc-navy);
font-size: 2rem;
font-weight: 800;
font-style: italic;
margin: 0 0 8px;
line-height: 1.2;
}
.module-svc-subtitle {
color: var(--svc-grey-light);
font-size: 1rem;
font-style: italic;
margin: 0 0 18px;
line-height: 1.5;
}
.module-svc-rule {
width: 56px;
height: 3px;
background: var(--svc-gold);
border-radius: 2px;
margin: 0 auto;
}
/* Cards grid */
.module-svc-grid {
display: grid;
gap: 22px;
}
.module-svc-cols-2 .module-svc-grid { grid-template-columns: repeat(2, 1fr); }
.module-svc-cols-3 .module-svc-grid { grid-template-columns: repeat(3, 1fr); }
.module-svc-cols-4 .module-svc-grid { grid-template-columns: repeat(4, 1fr); }
.module-svc-card {
background: #fff;
border: 1px solid var(--svc-card-border);
border-radius: 12px;
padding: 26px 24px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
}
.module-svc-card-link {
cursor: pointer;
}
.module-svc-card-link:hover {
border-color: var(--svc-navy);
box-shadow: 0 8px 24px rgba(11, 29, 58, 0.10);
transform: translateY(-2px);
}
/* Icon box — navy gradient square with gold icon inside.
This is the visual hallmark of the services-grid module. */
.module-svc-icon-box {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--svc-navy) 0%, var(--svc-navy-2) 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: var(--svc-gold); /* sets currentColor for SVG icon strokes */
box-shadow: 0 2px 8px rgba(11, 29, 58, 0.15);
flex-shrink: 0;
}
.module-svc-icon-box svg {
width: 24px;
height: 24px;
color: var(--svc-gold);
stroke: currentColor;
}
.module-svc-icon-emoji {
font-size: 1.4rem;
line-height: 1;
}
.module-svc-icon-empty {
background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
box-shadow: none;
}
.module-svc-title {
color: var(--svc-navy);
font-size: 1.05rem;
font-weight: 700;
font-style: italic;
margin: 0 0 8px;
line-height: 1.3;
}
.module-svc-desc {
color: var(--svc-grey);
font-size: 0.88rem;
font-style: italic;
line-height: 1.55;
flex: 1;
}
.module-svc-desc p {
margin: 0 0 8px;
}
.module-svc-desc p:last-child {
margin-bottom: 0;
}
.module-svc-desc strong,
.module-svc-desc b {
color: var(--svc-navy);
font-style: normal;
font-weight: 700;
}
.module-svc-desc a {
color: var(--svc-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-svc-desc a:hover {
color: var(--svc-navy);
}
.module-svc-desc ul,
.module-svc-desc ol {
margin: 6px 0;
padding-left: 20px;
}
/* Responsive */
@media (max-width: 1000px) {
.module-svc-cols-4 .module-svc-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.module-svc-cols-2 .module-svc-grid,
.module-svc-cols-3 .module-svc-grid,
.module-svc-cols-4 .module-svc-grid {
grid-template-columns: 1fr;
}
.module-services-grid {
padding: 48px 0;
}
.module-svc-heading {
font-size: 1.6rem;
}
}
/* ════════════════════════════════════════════════════════════════
MODULE: Contact Form [contact-form]
Four selectable layout styles sharing a common set of input,
alert, and button rules. The .module-cf-style-* class on the
picks the layout-specific tweaks.
════════════════════════════════════════════════════════════════ */
.module-contact-form {
--cf-navy: #0B1D3A;
--cf-navy-2: #1e3a8a;
--cf-blue: #1565c0;
--cf-gold: #E8A317;
--cf-grey: #475569;
--cf-grey-light: #94a3b8;
--cf-bg-light: #f8fafc;
--cf-border: #cbd5e1;
padding: 56px 0;
}
/* ── Section header (eyebrow + heading + subtitle + optional rule) ── */
.module-cf-header {
text-align: center;
margin-bottom: 32px;
}
.module-cf-eyebrow {
display: inline-block;
color: var(--cf-gold);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.module-cf-heading {
color: var(--cf-navy);
font-size: 1.8rem;
font-weight: 800;
font-style: italic;
margin: 0 0 8px;
line-height: 1.2;
}
.module-cf-subtitle {
color: var(--cf-grey-light);
font-size: 0.95rem;
margin: 0 0 14px;
line-height: 1.5;
}
.module-cf-rule {
width: 50px;
height: 3px;
background: var(--cf-gold);
border-radius: 2px;
margin: 0 auto;
}
/* ── Generic form inputs (light theme) ── */
.module-cf-form {
margin: 0;
}
.module-cf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 14px;
}
.module-cf-row-full {
grid-template-columns: 1fr;
}
.module-cf-row-extras {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.module-cf-field {
display: flex;
flex-direction: column;
min-width: 0;
}
.module-cf-field label {
font-size: 0.86rem;
font-weight: 600;
color: var(--cf-navy);
margin-bottom: 6px;
line-height: 1.2;
}
.module-cf-req {
color: #ef4444;
margin-left: 1px;
}
.module-cf-input {
padding: 10px 12px;
border: 1px solid var(--cf-border);
border-radius: 6px;
font-size: 0.92rem;
font-family: inherit;
color: var(--cf-navy);
background: #fff;
width: 100%;
box-sizing: border-box;
transition: border-color .15s ease, box-shadow .15s ease;
}
.module-cf-input:focus {
outline: 0;
border-color: var(--cf-gold);
box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.15);
}
.module-cf-input::placeholder {
color: var(--cf-grey-light);
}
textarea.module-cf-input {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
/* ── Submit buttons ── */
.module-cf-btn {
border: 0;
cursor: pointer;
font-family: inherit;
font-weight: 700;
font-size: 0.92rem;
transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.module-cf-btn-gold {
background: var(--cf-gold);
color: var(--cf-navy);
padding: 12px 28px;
border-radius: 6px;
width: 100%;
margin-top: 8px;
}
.module-cf-btn-gold:hover {
background: #f3b850;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(232, 163, 23, 0.25);
}
.module-cf-btn-navy {
background: var(--cf-navy);
color: #fff;
padding: 12px 28px;
border-radius: 6px;
width: 100%;
margin-top: 8px;
}
.module-cf-btn-navy:hover {
background: #142a52;
transform: translateY(-1px);
}
/* White pill button (image-form style) */
.module-cf-btn-pill {
background: #fff;
color: var(--cf-navy);
padding: 11px 22px;
border-radius: 999px;
margin-top: 6px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.module-cf-btn-pill:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255,255,255,0.25);
}
.module-cf-btn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: var(--cf-navy);
color: #fff;
border-radius: 50%;
font-size: 0.72rem;
line-height: 1;
}
/* ── Alert banners ── */
.module-cf-alert {
padding: 12px 16px;
border-radius: 6px;
margin-bottom: 14px;
font-size: 0.92rem;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.45;
}
.module-cf-alert-icon {
flex-shrink: 0;
font-weight: 700;
}
.module-cf-alert-ok {
background: #f0fdf4;
color: #14532d;
border: 1px solid #86efac;
}
.module-cf-alert-err {
background: #fef2f2;
color: #7f1d1d;
border: 1px solid #fca5a5;
}
/* ════════════════════════════════════════════════════════════════
STYLE 1: split-info (form left, info card right)
════════════════════════════════════════════════════════════════ */
.module-cf-grid-split {
display: grid;
grid-template-columns: 1fr 0.85fr;
gap: 56px;
align-items: start;
max-width: 1100px;
margin: 0 auto;
}
.module-cf-info {
color: var(--cf-grey);
line-height: 1.5;
}
.module-cf-info-title {
color: var(--cf-navy);
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 16px;
}
.module-cf-info-company {
color: var(--cf-navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.95rem;
margin-bottom: 8px;
}
.module-cf-info-address {
color: var(--cf-grey);
font-size: 0.92rem;
line-height: 1.5;
margin-bottom: 18px;
}
.module-cf-info-line {
color: var(--cf-grey);
font-size: 0.92rem;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.module-cf-info-line a {
color: var(--cf-navy);
text-decoration: underline;
text-underline-offset: 2px;
}
.module-cf-info-line a:hover {
color: var(--cf-gold);
}
.module-cf-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 1rem;
line-height: 1;
}
.module-cf-icon-phone { color: #dc2626; }
.module-cf-icon-fax { color: var(--cf-navy); }
.module-cf-icon-mail { color: var(--cf-navy); }
.module-cf-info-hours {
margin-top: 24px;
padding: 18px 22px;
background: var(--cf-bg-light);
border-radius: 8px;
}
.module-cf-info-hours-title {
color: var(--cf-navy);
font-weight: 700;
font-size: 0.98rem;
margin-bottom: 10px;
}
.module-cf-info-hours-line {
color: var(--cf-grey);
font-size: 0.92rem;
margin-bottom: 6px;
line-height: 1.5;
}
.module-cf-info-hours-line:last-child {
margin-bottom: 0;
}
/* ════════════════════════════════════════════════════════════════
STYLE 2: image-form (image left, dark form panel right)
════════════════════════════════════════════════════════════════ */
.module-cf-style-image-form {
background: var(--cf-bg-light);
padding: 64px 0;
}
.module-cf-grid-image {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 24px;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.module-cf-image {
border-radius: 12px;
overflow: hidden;
background: #e2e8f0;
min-height: 480px;
}
.module-cf-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.module-cf-image-empty {
background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
}
.module-cf-panel {
background: var(--cf-navy-2);
color: #fff;
border-radius: 12px;
padding: 48px 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
.module-cf-panel-eyebrow {
color: rgba(255,255,255,0.85);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
}
.module-cf-panel-heading {
color: #fff;
font-size: 2.4rem;
font-weight: 800;
margin: 0 0 24px;
line-height: 1.05;
}
.module-cf-panel-subtitle {
color: rgba(255,255,255,0.85);
margin: 0 0 18px;
font-size: 0.96rem;
line-height: 1.5;
}
/* Dark-theme inputs (translucent on navy panel) */
.module-cf-form-dark .module-cf-field label {
color: rgba(255,255,255,0.92);
font-size: 0.78rem;
}
.module-cf-input-dark {
background: transparent;
border: 1px solid rgba(255,255,255,0.35);
color: #fff;
border-radius: 999px;
padding: 12px 18px;
}
.module-cf-input-dark::placeholder {
color: rgba(255,255,255,0.5);
}
.module-cf-input-dark:focus {
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}
textarea.module-cf-input-dark {
border-radius: 16px;
min-height: 100px;
}
/* ════════════════════════════════════════════════════════════════
STYLE 3: centered (single centered card)
════════════════════════════════════════════════════════════════ */
.module-cf-style-centered {
background: var(--cf-bg-light);
}
.module-cf-centered-wrap {
display: flex;
justify-content: center;
}
.module-cf-centered-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 36px 40px;
width: 100%;
max-width: 540px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
/* ════════════════════════════════════════════════════════════════
STYLE 4: compact-cta (inline single-row form)
════════════════════════════════════════════════════════════════ */
.module-cf-style-compact-cta {
padding: 32px 0;
}
.module-cf-form-compact {
background: var(--cf-navy);
color: #fff;
border-radius: 12px;
padding: 24px 32px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: end;
}
.module-cf-compact-intro {
flex-shrink: 0;
align-self: end;
padding-bottom: 4px;
}
.module-cf-compact-eyebrow {
color: var(--cf-gold);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 4px;
}
.module-cf-compact-heading {
color: #fff;
font-size: 1.3rem;
font-weight: 700;
margin: 0 0 4px;
line-height: 1.2;
}
.module-cf-compact-subtitle {
color: rgba(255,255,255,0.75);
font-size: 0.82rem;
margin: 0;
line-height: 1.4;
}
.module-cf-compact-fields {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 14px;
align-items: end;
}
.module-cf-form-compact .module-cf-field label {
color: rgba(255,255,255,0.72);
font-size: 0.74rem;
margin-bottom: 4px;
}
.module-cf-input-translucent {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: #fff;
padding: 10px 14px;
font-size: 0.86rem;
}
.module-cf-input-translucent::placeholder {
color: rgba(255,255,255,0.5);
}
.module-cf-input-translucent:focus {
border-color: var(--cf-gold);
background: rgba(255,255,255,0.15);
}
.module-cf-btn-compact {
align-self: end;
padding: 11px 20px;
height: auto;
white-space: nowrap;
}
/* ════════════════════════════════════════════════════════════════
RESPONSIVE breakpoints for all 4 styles
════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* split-info: stack form on top, info below */
.module-cf-grid-split {
grid-template-columns: 1fr;
gap: 40px;
}
/* image-form: stack image on top, panel below */
.module-cf-grid-image {
grid-template-columns: 1fr;
}
.module-cf-image {
aspect-ratio: 16 / 10;
min-height: 0;
}
.module-cf-panel {
padding: 36px 28px;
}
.module-cf-panel-heading {
font-size: 1.8rem;
}
/* compact-cta: stack everything */
.module-cf-form-compact {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px;
}
.module-cf-compact-fields {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
/* Inputs in 2-col rows stack to 1 col */
.module-cf-row {
grid-template-columns: 1fr;
gap: 14px;
}
.module-cf-heading {
font-size: 1.5rem;
}
.module-cf-centered-card {
padding: 24px 20px;
}
.module-cf-panel-heading {
font-size: 1.5rem;
}
}
/* ════════════════════════════════════════════════════════════════
MODULE: Text / HTML (round 39) [text-html]
Free-form rich text block — eyebrow + heading + sanitized body.
Width can be "normal" (full container) or "narrow" (max 720px,
centered for easier reading). Alignment can be left, center,
justify.
════════════════════════════════════════════════════════════════ */
.module-text-html {
margin: 56px 0;
--th-blue: #0B1D3A;
--th-grey: #475569;
--th-gold: #E8A317;
}
.module-text-html-header {
text-align: center;
margin-bottom: 32px;
}
.module-text-html-eyebrow {
color: var(--th-gold);
font-size: 0.78rem;
font-weight: 600;
font-style: italic;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
.module-text-html-heading {
color: var(--th-blue);
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
font-weight: 700;
font-style: italic;
margin: 0;
letter-spacing: -0.01em;
line-height: 1.15;
}
.module-text-html-body {
color: var(--th-grey);
font-size: 1rem;
line-height: 1.7;
}
.module-text-html-body p { margin: 0 0 16px; }
.module-text-html-body p:last-child { margin-bottom: 0; }
.module-text-html-body strong { color: var(--th-blue); font-weight: 700; }
.module-text-html-body em { font-style: italic; }
.module-text-html-body a {
color: var(--th-gold);
text-decoration: underline;
text-underline-offset: 2px;
transition: color .15s ease;
}
.module-text-html-body a:hover { color: var(--th-blue); }
.module-text-html-body h3 {
color: var(--th-blue);
font-size: 1.4rem;
font-weight: 700;
margin: 28px 0 12px;
line-height: 1.25;
}
.module-text-html-body h4 {
color: var(--th-blue);
font-size: 1.15rem;
font-weight: 700;
margin: 24px 0 10px;
line-height: 1.3;
}
.module-text-html-body ul,
.module-text-html-body ol {
margin: 0 0 16px;
padding-left: 28px;
}
.module-text-html-body ul { list-style: disc; }
.module-text-html-body ol { list-style: decimal; }
.module-text-html-body li {
margin-bottom: 6px;
line-height: 1.6;
}
/* Width variants */
.module-text-html.module-th-width-narrow .module-text-html-body,
.module-text-html.module-th-width-narrow .module-text-html-header {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Alignment variants */
.module-text-html.module-th-align-center .module-text-html-body { text-align: center; }
.module-text-html.module-th-align-justify .module-text-html-body { text-align: justify; }
/* default left needs no rule */
@media (max-width: 600px) {
.module-text-html { margin: 36px 0; }
.module-text-html-header { margin-bottom: 20px; }
}
/* faq-tabs-pro.css */
/* ════════════════════════════════════════════════════════════════════════
MODULE: Tabs / FAQ Tabs — PRO redesign (round 62)
════════════════════════════════════════════════════════════════════════
Replaces the legacy .module-tabs-nav / .module-tabs-btn styling from
sections.css with a more modern, polished version.
This file is loaded AFTER sections.css so its rules override.
Two main improvements:
1) Desktop — modern look
• Inactive tabs: muted gray (was gold — gold everywhere felt loud)
• Active tab: navy text + thicker gold underline + subtle lift
• Hover state: text fades to navy + ghost underline previews active
• Smooth animated underline using ::after pseudo-element
2) Mobile — single horizontal scroll row (was: 6 tabs wrapping into
3+ chaotic rows)
• flex-wrap: nowrap forces single row
• overflow-x: auto + scroll-snap for natural touch swipe
• Edge gradient fades on the right hint that more tabs exist
• Active tab gets scroll-margin so it doesn't end at the edge
• Tap targets stay 44px tall for accessibility
Compatible with both [tabs] and [faq-tabs] modules — both reuse the
same `.module-tabs-nav` / `.module-tabs-btn` markup.
════════════════════════════════════════════════════════════════════════ */
/* ── Wrapper to host the gradient edge fades on mobile ──
Achieved by making the nav itself the scroll container and
adding ::before / ::after via the parent module section.
We do this by wrapping the nav with a positioned parent. */
/* Reset the legacy mobile rule that wrapped tabs onto multiple rows */
.module-tabs-nav,
.module-faq-tabs .module-tabs-nav {
flex-wrap: nowrap !important; /* Single row, ALWAYS */
overflow-x: auto !important;
overflow-y: hidden;
scroll-snap-type: x proximity; /* Soft snap — feels natural */
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 1px solid #e5e7eb;
margin-bottom: 32px;
padding: 0;
gap: 4px; /* small gap between pills */
/* Padding-bottom holds the underline so the focus ring doesn't
clip against the bottom border. */
padding-bottom: 0;
position: relative;
}
.module-tabs-nav::-webkit-scrollbar {
display: none;
}
/* The button itself — a cleaner, more polished look */
.module-tabs-btn {
flex-shrink: 0;
background: transparent;
border: 0;
border-radius: 8px 8px 0 0;
padding: 14px 20px 13px;
margin-bottom: -1px; /* overlap nav border */
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #94a3b8; /* muted gray for inactive */
cursor: pointer;
transition: color 0.18s ease, background 0.18s ease;
white-space: nowrap;
position: relative;
scroll-snap-align: start;
scroll-margin-left: 12px; /* leave breathing room when snapped */
}
/* Animated underline — a pseudo-element so we can transition it */
.module-tabs-btn::after {
content: '';
position: absolute;
left: 14px;
right: 14px;
bottom: -1px; /* sit on the nav border */
height: 3px;
background: var(--gold, #E8A317);
border-radius: 2px 2px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.module-tabs-btn:hover {
color: #475569; /* nudge toward navy on hover */
background: rgba(232, 163, 23, 0.04);
}
.module-tabs-btn:hover::after {
transform: scaleX(0.4); /* tease the underline */
background: rgba(232, 163, 23, 0.4);
}
.module-tabs-btn.is-active {
color: var(--navy, #0B1D3A); /* clear active text */
background: rgba(232, 163, 23, 0.06); /* subtle gold tint */
}
.module-tabs-btn.is-active::after {
transform: scaleX(1); /* full underline */
background: var(--gold, #E8A317);
height: 3px;
}
.module-tabs-btn:focus-visible {
outline: 2px solid var(--gold, #E8A317);
outline-offset: 2px;
border-radius: 8px 8px 0 0;
}
/* ── Edge gradient hints — only shown on mobile/narrow screens ──
We want a subtle "there's more" cue on the right when tabs scroll.
We attach it to the nav's parent (typically .module-tabs or
.module-faq-tabs) using a ::before/::after overlay.
Using ::after on the nav itself is tricky because it's the scroll
container — the pseudo would scroll with the content. Instead,
wrap-style cue: linear-gradient masks via background. */
@media (max-width: 768px) {
.module-tabs-nav {
margin: 0 -16px 24px; /* extend to viewport edges */
padding: 0 16px;
/* A right-edge gradient fade hint that more tabs exist.
Background-attachment local keeps the gradient from
scrolling with the content. */
background:
linear-gradient(to right, transparent calc(100% - 28px), rgba(255, 255, 255, 0.95) 100%) right top / 100% 100% no-repeat local,
transparent;
}
.module-tabs-btn {
padding: 12px 14px 11px;
font-size: 0.74rem;
letter-spacing: 0.06em;
min-height: 44px; /* iOS HIG min tap target */
}
.module-tabs-btn::after {
left: 10px;
right: 10px;
height: 3px;
}
}
/* Very narrow phones — even tighter */
@media (max-width: 380px) {
.module-tabs-btn {
padding: 12px 12px 11px;
font-size: 0.72rem;
}
}
/* ════════════════════════════════════════════════════════════════════════
FAQ ITEMS — small polish to match the new tab look
════════════════════════════════════════════════════════════════════════
The .module-faq-boxed items inside each tab panel get a slightly
softer card shadow + smoother accordion animation. */
.module-faq-boxed .module-faq-item {
transition: box-shadow 0.18s ease, background 0.18s ease;
}
.module-faq-boxed .module-faq-item:hover {
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.module-faq-boxed .module-faq-item.is-open {
box-shadow: 0 4px 14px rgba(232, 163, 23, 0.12);
}
/* Smoother accordion open/close — only animates the answer height */
.module-faq-boxed .module-faq-item .module-faq-a {
transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.18s ease;
}
/* ════════════════════════════════════════════════════════════════════════
FAQ heading "Häufige gestellte Fragen" — nicer treatment on mobile
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.module-tabs-title,
.module-faq-tabs .module-tabs-title {
font-size: 1.6rem !important;
line-height: 1.2 !important;
margin-bottom: 1.5rem !important;
}
}
/* value-cards.css */
/* ════════════════════════════════════════════════════════════════════════
MODULE: Value Cards [value-cards]
════════════════════════════════════════════════════════════════════════
Edge-to-edge row of color-alternating cards with centered icon, title,
and description. The section breaks out of any wrapping container so
it spans the full viewport width.
Drop-in CSS — no dependency on sections.css. Tokens fall back to
sensible defaults if --navy / --gold aren't defined.
════════════════════════════════════════════════════════════════════════ */
.module-value-cards {
--vc-cream: #f5efe6;
--vc-beige: #f5f0e6;
--vc-navy: #0B1D3A;
--vc-red: #E5594D;
--vc-gold: #E8A317;
--vc-text-dark: #0B1D3A;
--vc-text-mid: #475569;
--vc-text-light: #ffffff;
--vc-text-light-muted: rgba(255, 255, 255, 0.85);
/* Break out of any wrapping container — full viewport width */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 0;
box-sizing: border-box;
overflow: hidden; /* clip any decoration bleeding past the edge */
}
/* Optional header above the row of cards */
.module-vc-header {
text-align: center;
padding: 56px 24px 28px;
max-width: 980px;
margin: 0 auto;
}
.module-vc-eyebrow {
display: inline-block;
font-size: 0.78rem;
font-weight: 700;
color: var(--vc-gold);
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 10px;
}
.module-vc-heading {
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
font-weight: 700;
color: var(--vc-text-dark);
margin: 0 0 12px;
line-height: 1.2;
}
.module-vc-subtitle {
color: var(--vc-text-mid);
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* ── Grid ─────────────────────────────────────────────────────────────── */
/* ROUND 59 — DEFENSIVE FIX for desktop layout collapse:
On some sites, the grid was rendering as block-stacked (cards
one-on-top-of-another) instead of in a row. The cause was either
a parent CSS rule somewhere overriding `display: grid`, or a
browser-cached old stylesheet. To make sure this NEVER happens
again, we:
1. Use higher specificity (.module-value-cards > .module-vc-grid)
instead of the bare class — beats any rule with shorter
selectors that might be loaded later.
2. Use !important on the layout properties (display + columns)
so even an inline style or a third-party plugin can't
override them.
3. Add a fallback flexbox layout that kicks in if the browser
somehow refuses to apply grid. */
.module-value-cards > .module-vc-grid,
.module-vc-grid {
display: grid !important;
grid-template-columns: repeat(var(--vc-cols, 4), 1fr) !important;
width: 100%;
box-sizing: border-box;
}
/* Specificity-boosted selectors so the column count beats any later
loaded CSS. Both class orderings work because we use the parent
class as well. */
.module-value-cards.module-vc-cols-2 > .module-vc-grid,
.module-vc-cols-2 .module-vc-grid { --vc-cols: 2; }
.module-value-cards.module-vc-cols-3 > .module-vc-grid,
.module-vc-cols-3 .module-vc-grid { --vc-cols: 3; }
.module-value-cards.module-vc-cols-4 > .module-vc-grid,
.module-vc-cols-4 .module-vc-grid { --vc-cols: 4; }
.module-value-cards.module-vc-cols-5 > .module-vc-grid,
.module-vc-cols-5 .module-vc-grid { --vc-cols: 5; }
/* Defensive: if grid totally fails to apply (very old browser,
broken CSS layer, etc.), fall back to flexbox so cards still
line up horizontally instead of stacking. The @supports rule
is only honored when grid IS supported, so this acts as a
no-grid fallback for ancient browsers. */
@supports not (display: grid) {
.module-vc-grid {
display: flex !important;
flex-wrap: wrap;
}
.module-vc-grid > .module-vc-card {
flex: 1 1 calc(100% / var(--vc-cols, 4));
min-width: 0;
}
}
/* Gap variants */
.module-vc-gap-edge .module-vc-grid { gap: 0; }
.module-vc-gap-tight .module-vc-grid { gap: 4px; background: #f1f5f9; padding: 4px; }
.module-vc-gap-normal .module-vc-grid { gap: 16px; padding: 0 24px; }
.module-vc-gap-wide .module-vc-grid { gap: 32px; padding: 0 32px; }
/* Each card MUST be a grid item taking exactly one column. Defensive
rule: in case any descendant CSS sets `grid-column: 1/-1` on cards,
we explicitly say each card takes one column. */
.module-vc-grid > .module-vc-card {
grid-column: span 1;
min-width: 0; /* prevent grid blowout from long words */
}
/* ── Card ─────────────────────────────────────────────────────────────── */
.module-vc-card {
padding: 56px 32px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 18px;
color: var(--vc-text-dark);
transition: transform .25s ease, box-shadow .25s ease;
position: relative;
overflow: hidden;
}
/* Linkified card */
a.module-vc-card-link {
text-decoration: none;
color: inherit;
}
a.module-vc-card-link:hover { transform: translateY(-2px); }
/* ── Icon ─────────────────────────────────────────────────────────────── */
.module-vc-icon {
color: var(--vc-gold);
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.module-vc-icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.module-vc-icon-emoji {
font-size: 2.2rem;
line-height: 1;
color: var(--vc-gold);
}
/* ── Title + description ─────────────────────────────────────────────── */
.module-vc-card-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
line-height: 1.3;
color: inherit; /* dark on light cards, white on dark cards */
}
.module-vc-card-desc {
font-size: 0.95rem;
line-height: 1.7;
color: var(--vc-text-mid);
max-width: 360px;
margin: 0 auto;
}
.module-vc-card-desc p { margin: 0 0 10px; }
.module-vc-card-desc p:last-child { margin: 0; }
.module-vc-card-desc a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ── Background variants ─────────────────────────────────────────────── */
.module-vc-bg-cream { background: var(--vc-cream); color: var(--vc-text-dark); }
.module-vc-bg-beige { background: var(--vc-beige); color: var(--vc-text-dark); }
.module-vc-bg-navy { background: var(--vc-navy); color: var(--vc-text-light); }
.module-vc-bg-red { background: var(--vc-red); color: var(--vc-text-light); }
.module-vc-bg-gold { background: var(--vc-gold); color: var(--vc-text-dark); }
.module-vc-bg-white { background: #ffffff; color: var(--vc-text-dark); }
.module-vc-bg-light { background: #f8fafc; color: var(--vc-text-dark); }
.module-vc-bg-gray { background: #64748b; color: var(--vc-text-light); }
.module-vc-bg-green { background: #43A047; color: var(--vc-text-light); }
.module-vc-bg-blue { background: #1565C0; color: var(--vc-text-light); }
/* ── Round 53: AUTO-CONTRAST helper classes ────────────────────────────
Applied alongside the card's bg class. The PHP renderer measures
the background's perceived brightness and adds either:
.module-vc-is-dark (text becomes white)
.module-vc-is-light (text stays dark)
This is what makes CUSTOM HEX backgrounds get the right text
color even when there's no per-color CSS class for them.
The rules below DON'T fire when the user has set an explicit
text-color via inline style — that wins because of CSS specificity
(inline style beats class). */
.module-vc-is-dark { color: #ffffff; }
.module-vc-is-dark .module-vc-card-title { color: #ffffff; }
.module-vc-is-dark .module-vc-card-desc { color: rgba(255, 255, 255, 0.85); }
.module-vc-is-light { color: var(--vc-text-dark); }
.module-vc-is-light .module-vc-card-title { color: var(--vc-text-dark); }
.module-vc-is-light .module-vc-card-desc { color: var(--vc-text-mid); }
/* On dark cards (whether named-class or auto-contrast), description
text uses the muted-light variant for readability. */
.module-vc-bg-navy .module-vc-card-desc,
.module-vc-bg-red .module-vc-card-desc,
.module-vc-bg-gray .module-vc-card-desc,
.module-vc-bg-green .module-vc-card-desc,
.module-vc-bg-blue .module-vc-card-desc {
color: var(--vc-text-light-muted);
}
/* When the card has an explicit inline `color:` style (text_color
override), the inline rule already wins — but for the description
block (which reassigns its own color), we make sure it inherits
from the card. CSS specificity: inline style > class, but `inherit`
propagates from the inline-styled parent down to the desc. */
.module-vc-card[style*="color"] .module-vc-card-title,
.module-vc-card[style*="color"] .module-vc-card-desc {
color: inherit;
}
/* On dark cards, the title is white (override .card-title color: inherit
doesn't need an override — inherit from the card's color above which
is already white on those backgrounds — kept here for clarity). */
/* Hover effect — subtle lift on linked cards */
a.module-vc-card-link:hover .module-vc-icon {
transform: scale(1.06);
transition: transform .25s ease;
}
/* ── Responsive collapse ─────────────────────────────────────────────── */
/* Tablet: collapse 4-col / 5-col → 2-col.
These selectors match the high-specificity ones at the top of this
file so they reliably override the desktop column count. */
@media (max-width: 960px) {
.module-value-cards.module-vc-cols-4 > .module-vc-grid,
.module-vc-cols-4 .module-vc-grid,
.module-value-cards.module-vc-cols-5 > .module-vc-grid,
.module-vc-cols-5 .module-vc-grid {
--vc-cols: 2;
}
.module-value-cards.module-vc-cols-3 > .module-vc-grid,
.module-vc-cols-3 .module-vc-grid {
--vc-cols: 2;
}
.module-vc-card { padding: 44px 24px; }
}
/* Phone: stack to single column */
@media (max-width: 600px) {
.module-value-cards.module-vc-cols-2 > .module-vc-grid,
.module-vc-cols-2 .module-vc-grid,
.module-value-cards.module-vc-cols-3 > .module-vc-grid,
.module-vc-cols-3 .module-vc-grid,
.module-value-cards.module-vc-cols-4 > .module-vc-grid,
.module-vc-cols-4 .module-vc-grid,
.module-value-cards.module-vc-cols-5 > .module-vc-grid,
.module-vc-cols-5 .module-vc-grid {
--vc-cols: 1;
}
.module-vc-card { padding: 36px 20px; gap: 14px; }
.module-vc-icon { width: 40px; height: 40px; }
.module-vc-card-title { font-size: 1.05rem; }
.module-vc-card-desc { font-size: 0.9rem; }
.module-vc-header { padding: 36px 20px 20px; }
}
/* transport-order.css */
/* ════════════════════════════════════════════════════════════════════════
MODULE: Transport Order Form [transport-order]
════════════════════════════════════════════════════════════════════════
Multi-section transport order form with light cyan background, two-
column field layout, dark navy heading, red eyebrow, teal submit button.
════════════════════════════════════════════════════════════════════════ */
.module-transport-order {
--to-cyan: #dff1fb; /* page background — light cyan */
--to-navy: #0B1D3A; /* heading + labels */
--to-red: #E5594D; /* eyebrow + required asterisks */
--to-teal: #1AAD9B; /* submit button */
--to-teal-hover: #169888;
--to-text-mid: #475569;
--to-text-muted: #64748b;
--to-input-bg: #ffffff;
--to-input-border: #cdd9e1;
--to-input-focus: #1AAD9B;
--to-section-rule: #b5cad6;
/* Break out of any wrapping container — full viewport width */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding: 64px 24px;
box-sizing: border-box;
}
.module-to-container {
max-width: 760px;
margin: 0 auto;
}
/* ── Header ─────────────────────────────────────────────────────────── */
.module-to-header {
text-align: center;
margin-bottom: 28px;
}
.module-to-eyebrow {
color: var(--to-red);
font-style: italic;
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.module-to-heading {
color: var(--to-navy);
font-weight: 700;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.25;
margin: 0 0 8px;
}
.module-to-subtitle {
color: var(--to-text-mid);
font-size: 1rem;
margin: 8px 0 0;
}
/* ── Banner (success / error after submit) ──────────────────────────── */
.module-to-banner {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 18px;
border-radius: 8px;
font-size: 0.95rem;
margin: 20px 0 24px;
line-height: 1.5;
}
.module-to-banner-ok {
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
}
.module-to-banner-err {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
.module-to-banner svg { flex-shrink: 0; margin-top: 2px; }
/* ── Form base ──────────────────────────────────────────────────────── */
.module-to-form {
width: 100%;
}
.module-to-section-label {
color: var(--to-navy);
font-weight: 700;
font-size: 1.02rem;
margin: 24px 0 12px;
padding-top: 16px;
border-top: 1px solid var(--to-section-rule);
letter-spacing: 0.01em;
}
.module-to-section-label:first-of-type {
margin-top: 8px;
}
/* Two-column row that collapses to single on mobile */
.module-to-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 12px;
}
/* Each field — label + input/textarea */
.module-to-field {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}
.module-to-field-full {
grid-column: 1 / -1;
margin-bottom: 14px;
}
.module-to-field label {
color: var(--to-text-muted);
font-size: 0.78rem;
font-weight: 500;
line-height: 1.3;
}
.module-to-field label .req {
color: var(--to-red);
font-weight: 700;
}
.module-to-field input,
.module-to-field textarea {
background: var(--to-input-bg);
border: 1px solid var(--to-input-border);
border-radius: 6px;
padding: 10px 12px;
font-size: 0.95rem;
color: var(--to-navy);
font-family: inherit;
transition: border-color .15s ease, box-shadow .15s ease;
width: 100%;
box-sizing: border-box;
}
.module-to-field textarea {
resize: vertical;
min-height: 120px;
line-height: 1.55;
}
.module-to-field input::placeholder,
.module-to-field textarea::placeholder {
color: #b0bdc8;
}
.module-to-field input:focus,
.module-to-field textarea:focus {
outline: 0;
border-color: var(--to-input-focus);
box-shadow: 0 0 0 3px rgba(26, 173, 155, 0.18);
}
/* Honeypot — hidden from real users, visible to bots */
.module-to-honeypot {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
}
/* ── Submit button ──────────────────────────────────────────────────── */
.module-to-actions {
margin-top: 18px;
display: flex;
justify-content: flex-start;
}
.module-to-submit {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--to-teal);
color: #ffffff;
border: 0;
border-radius: 6px;
padding: 12px 22px;
font-size: 0.92rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background .15s ease, transform .12s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
letter-spacing: 0.02em;
}
.module-to-submit:hover {
background: var(--to-teal-hover);
}
.module-to-submit:active {
transform: translateY(1px);
}
.module-to-submit-tick {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: rgba(255, 255, 255, 0.22);
border-radius: 4px;
color: #fff;
}
/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.module-transport-order {
padding: 40px 16px;
}
.module-to-row {
grid-template-columns: 1fr;
gap: 0;
}
.module-to-heading {
font-size: 1.35rem;
}
}
/* mobile-polish.css */
/* ════════════════════════════════════════════════════════════════════════
TransLog — Mobile Polish v2 (round 55)
────────────────────────────────────────────────────────────────────────
Loaded AFTER style.css and sections.css. All rules wrapped in media
queries — desktop is unaffected.
Replaces round 54's mobile-polish.css with a SAFER carousel approach:
• v1 used a CSS grid hack on .module-carousel-viewport — that
broke slide rendering on some viewports (image disappeared,
leaving only nav buttons + dots floating in white space).
• v2 keeps the original `position: absolute` for prev/next and
just hides them on phones (swipe + dots are enough).
Also new in v2:
• Mobile language switcher next to the hamburger button (matches
the user's screenshot mockup with the red arrow pointing there).
• Top-bar language pill is hidden on phones — it now lives in
the header bar itself, where it actually fits.
Three areas covered:
1) Carousel — phone + tablet polish (without breaking the track)
2) Top contact bar — clean wrapping, lang switcher moved
3) Mobile slide-out menu — animations + dim backdrop
════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
1) CAROUSEL — phones (≤ 640px) — PRO mobile redesign (round 57)
════════════════════════════════════════════════════════════════
Previous attempt didn't beat the inline `--carousel-visible: 3`
that Carousel.php writes onto the . Inline custom
properties beat regular CSS rules, so we need `!important`.
Design goals (Apple App Store / Instagram-style mobile carousel):
• ONE main card centered on screen, ~88% of viewport width
• A small PEEK of the next card on the right (visual hint to swipe)
• Image keeps its 4:3 ratio, full-width inside the card
• Caption sits IN the bottom-left of the image, transparent gradient
background for readability — does NOT overlap the gold arrow
• Gold "go" arrow in the top-right corner (only when the slide
has a link), out of caption's way
• Prev/next nav buttons hidden on phones (swipe + dots are enough)
• Bigger gold dots with smooth transitions
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* ── Force 1 visible slide. !important is REQUIRED because
Carousel.php writes `style="--carousel-visible: 3"` directly
on the , and inline custom properties win over
regular CSS rules. !important on the rule beats inline styles. ── */
.module-carousel,
.module-carousel-visible-1,
.module-carousel-visible-2,
.module-carousel-visible-3,
.module-carousel-visible-4 {
--carousel-visible: 1 !important;
--car-gap: 14px !important;
}
/* Slim down the carousel header for phones */
.module-carousel-header {
margin-bottom: 22px;
}
.module-carousel-eyebrow {
font-size: 0.74rem;
letter-spacing: 0.16em;
}
.module-carousel-heading {
font-size: 1.5rem;
line-height: 1.2;
max-width: 100%;
padding: 0 16px;
}
/* ── Track: small left padding, RIGHT padding shows the peek ── */
.module-carousel-track {
padding: 4px 36px 12px 16px; /* 36px right reveals next-card peek */
gap: 14px;
scroll-padding-left: 16px;
}
/* ── Slide: take ~88% of the viewport so the next card peeks ──
Override the calc()-based formula entirely with !important.
100% would fill the whole track; ~88% leaves a 12% peek. */
.module-carousel-slide {
width: 88% !important;
scroll-snap-align: start;
}
/* The slide inner box — proper rounding and shadow */
.module-carousel-slide-image .module-carousel-slide-inner {
aspect-ratio: 4 / 3;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16),
0 2px 4px rgba(15, 23, 42, 0.08);
}
/* ── Caption: bottom-left strip with gradient background.
NOT a separate white pill — the original design had it as
a pill that floated above the image, but on a small mobile
card that fights the gold arrow for the bottom corners.
A subtle gradient overlay reads better. ── */
.module-carousel-caption {
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top,
rgba(11, 29, 58, 0.92) 0%,
rgba(11, 29, 58, 0.78) 60%,
rgba(11, 29, 58, 0) 100%);
padding: 50px 18px 16px; /* big top padding for the gradient fade */
border-radius: 0 0 14px 14px;
box-shadow: none;
pointer-events: none;
}
.module-carousel-caption-label {
color: #FFC966; /* lighter gold against navy */
font-size: 0.72rem;
font-style: italic;
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: 4px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.module-carousel-caption-title {
color: #ffffff;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.25;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
/* Clamp very long titles to 2 lines */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── Gold arrow in top-right corner (only when slide has a link) ── */
.module-carousel-arrow {
top: 14px;
right: 14px;
bottom: auto;
left: auto;
width: 44px;
height: 44px;
background: var(--car-gold, #E8A317);
color: var(--car-blue, #0B1D3A);
box-shadow: 0 4px 12px rgba(232, 163, 23, 0.45),
0 0 0 3px rgba(255, 255, 255, 0.55);
z-index: 2;
}
.module-carousel-arrow svg {
width: 20px;
height: 20px;
}
/* ── Hide prev/next nav buttons — swipe handles navigation ── */
.module-carousel-prev,
.module-carousel-next {
display: none !important;
}
/* ── Dots: bigger, more elegant ── */
.module-carousel-dots {
margin-top: 22px;
gap: 8px;
}
.module-carousel-dot {
width: 9px;
height: 9px;
background: #cbd5e1;
transition: background 0.18s ease, width 0.22s ease;
}
.module-carousel-dot.is-active {
background: var(--car-gold, #E8A317);
width: 28px;
border-radius: 5px;
}
}
/* Very narrow phones (≤ 380px): keep the same design but tighter */
@media (max-width: 380px) {
.module-carousel-track {
padding: 4px 28px 12px 12px;
}
.module-carousel-slide {
width: 90% !important;
}
.module-carousel-heading {
font-size: 1.35rem;
}
.module-carousel-caption-title {
font-size: 0.98rem;
}
}
/* Tablet (641–900px): keep the desktop layout BUT pull arrows + caption
inward slightly so they don't overlap the slide images on narrower
viewports (the screenshot at 820px showed everything working — these
tweaks just make the medium tablet width even cleaner). */
@media (min-width: 641px) and (max-width: 900px) {
.module-carousel-prev { left: 6px; }
.module-carousel-next { right: 6px; }
.module-carousel-caption {
left: 14px;
right: 64px;
padding: 11px 14px;
}
.module-carousel-caption-title {
font-size: 0.95rem;
}
.module-carousel-arrow {
width: 42px;
height: 42px;
}
}
/* ════════════════════════════════════════════════════════════════
2) MOBILE LANGUAGE SWITCHER — moved into .header-inner
════════════════════════════════════════════════════════════════
The header.php file (round-55 update) now has TWO copies of the
flag/lang switcher:
• Inside .top-bar-right.top-bar-right-desktop → desktop only
• Inside .header-inner > .lang-switcher-mobile → mobile only
The CSS below handles which one is visible at each breakpoint.
Round 56: the mobile copy now uses flagDropdownHTML() which
renders a single-pill trigger + popup panel. Styled below.
════════════════════════════════════════════════════════════════ */
/* Default (desktop): hide the mobile copy entirely */
.lang-switcher-mobile {
display: none;
}
/* ── Round 56: PRO Lang Dropdown ── */
/* Universal styles (works on any background; specifics for mobile
header bar overrides are below in the @media block). */
.lang-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.lang-dd-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid var(--gray-200, #e2e8f0);
background: #fff;
color: var(--gray-700, #334155);
border-radius: 6px;
font-family: inherit;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
line-height: 1;
}
.lang-dd-trigger:hover:not(:disabled) {
background: var(--gray-50, #f8fafc);
border-color: var(--gray-300, #cbd5e1);
}
.lang-dd-trigger:focus-visible {
outline: 0;
border-color: var(--gold, #E8A317);
box-shadow: 0 0 0 3px rgba(232, 163, 23, 0.18);
}
.lang-dd-trigger:disabled {
cursor: default;
opacity: 0.85;
}
.lang-dd-trigger img {
width: 20px;
height: 14px;
border-radius: 2px;
object-fit: cover;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
flex-shrink: 0;
}
.lang-dd-code {
letter-spacing: 0.04em;
}
.lang-dd-caret {
font-size: 0.7rem;
line-height: 1;
margin-left: 2px;
opacity: 0.6;
transition: transform 0.18s ease, opacity 0.15s ease;
}
.lang-dropdown.open .lang-dd-caret {
transform: rotate(180deg);
opacity: 1;
}
.lang-dropdown.open .lang-dd-trigger {
border-color: var(--gold, #E8A317);
background: rgba(232, 163, 23, 0.06);
color: var(--navy, #0B1D3A);
}
/* The popup panel */
.lang-dd-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: #fff;
border: 1px solid var(--gray-200, #e2e8f0);
border-radius: 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
padding: 6px;
z-index: 1100; /* above sticky header (1000) */
/* Animation in */
opacity: 0;
transform: translateY(-4px) scale(0.98);
transform-origin: top right;
transition: opacity 0.18s ease, transform 0.18s ease;
pointer-events: none;
}
.lang-dropdown.open .lang-dd-panel {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* When `hidden` attribute is present (initial state), block layout */
.lang-dd-panel[hidden] {
display: none;
}
.lang-dropdown.open .lang-dd-panel[hidden] {
/* JS removes the hidden attr on open, but covering edge cases */
display: block;
}
.lang-dd-panel-title {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--gray-500, #64748b);
padding: 8px 10px 6px;
margin-bottom: 2px;
border-bottom: 1px solid #f1f5f9;
}
.lang-dd-row {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 6px;
text-decoration: none;
color: var(--gray-700, #334155);
font-size: 0.86rem;
transition: background 0.12s ease, color 0.12s ease;
}
.lang-dd-row:hover {
background: var(--gray-50, #f8fafc);
color: var(--navy, #0B1D3A);
}
.lang-dd-row.is-active {
background: rgba(232, 163, 23, 0.10);
color: var(--gold, #E8A317);
font-weight: 600;
}
.lang-dd-row img {
width: 22px;
height: 16px;
border-radius: 2px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.lang-dd-row-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lang-dd-row-code {
font-family: ui-monospace, monospace;
font-size: 0.72rem;
color: var(--gray-400, #94a3b8);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.lang-dd-row.is-active .lang-dd-row-code {
color: var(--gold, #E8A317);
}
.lang-dd-row-tick {
color: var(--gold, #E8A317);
font-weight: 700;
margin-left: 4px;
}
@media (max-width: 720px) {
/* Hide the top-bar copy on phones (it had bad wrapping behavior) */
.top-bar-right-desktop {
display: none;
}
/* Show the mobile copy in the white header bar, just before the
hamburger.
CRITICAL: `margin-left: auto` pushes this all the way to the
right of the flex row, so it groups with the hamburger.
Without this, justify-content: space-between on .header-inner
would distribute logo / DE / ☰ evenly, leaving the DE pill
stranded in the middle. */
.lang-switcher-mobile {
display: inline-flex;
align-items: center;
margin-left: auto;
margin-right: 4px;
}
/* Mobile-specific tightening of the dropdown trigger */
.lang-switcher-mobile .lang-dd-trigger {
padding: 6px 8px;
font-size: 0.74rem;
gap: 5px;
}
.lang-switcher-mobile .lang-dd-trigger img {
width: 18px;
height: 13px;
}
/* Panel positioning on mobile — anchor under the trigger,
align right edge so it doesn't overflow off-screen. */
.lang-switcher-mobile .lang-dd-panel {
right: -4px; /* nudge so the panel hugs the screen edge */
min-width: 180px;
max-width: calc(100vw - 24px);
}
}
/* ════════════════════════════════════════════════════════════════
3) HEADER + TOP CONTACT BAR — phones (≤ 720px)
════════════════════════════════════════════════════════════════
With the lang switcher now moved out of the top bar, the top bar
is just phone + email. Keep them centered and tightly spaced.
════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.top-bar {
padding: 6px 0;
font-size: 0.75rem;
}
.top-bar .container {
padding-left: 14px;
padding-right: 14px;
gap: 6px 14px;
justify-content: center; /* center phone + email */
}
.top-bar-left {
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.top-bar-left a {
font-size: 0.78rem;
}
/* Header bar — tighter, but make room for the new mobile lang pill */
.header-inner {
padding: 0 12px;
height: 64px;
gap: 8px;
}
.logo {
font-size: 1.15rem;
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
.logo img {
max-height: 36px;
width: auto;
}
/* Hide logo sub-tagline on phones */
.logo small,
.logo .logo-tagline,
.logo-sub,
.logo .tagline {
display: none;
}
/* Hamburger: meatier tap target */
.hamburger {
padding: 8px;
margin-left: 0;
}
.hamburger span {
width: 22px;
transition: transform 0.22s ease, opacity 0.15s ease;
}
}
/* Very narrow phones (≤ 380px): drop the email entirely. */
@media (max-width: 380px) {
.top-bar-left a:nth-of-type(2),
.top-bar-left .top-bar-email {
display: none;
}
/* Even tighter dropdown trigger — keep only the flag image,
drop the "DE"/"EN" code label so the pill doesn't crowd the
hamburger. */
.lang-switcher-mobile .lang-dd-trigger {
padding: 5px 7px;
}
.lang-switcher-mobile .lang-dd-code {
display: none;
}
.header-inner {
padding: 0 10px;
}
}
/* ════════════════════════════════════════════════════════════════
4) MOBILE MENU — slide-down + backdrop + polished items
════════════════════════════════════════════════════════════════
(Same as round 54 — this part wasn't broken, just kept here so
the patch is self-contained.)
════════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
/* Animated dropdown panel.
CRITICAL: must stay `position: absolute` (matching the original
style.css mobile rule) so the nav DOES NOT take space inside
.header-inner's flex layout. Otherwise it pushes other items
(logo, lang pill, hamburger) out of their proper positions.
The animation comes from max-height + opacity, not from
changing display. */
.main-nav {
position: absolute;
top: 64px; /* below the (mobile) sticky header */
left: 0;
right: 0;
background: var(--white);
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 16px;
display: flex;
flex-direction: column;
gap: 2px;
pointer-events: none;
transition: max-height 0.28s ease, opacity 0.18s ease, padding 0.28s ease;
border-top: 1px solid #f1f5f9;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
z-index: 1000;
}
.main-nav.open {
max-height: 80vh;
opacity: 1;
padding: 12px 16px 18px;
overflow-y: auto;
pointer-events: auto;
}
/* Backdrop — only when body has .nav-open class */
body.nav-open::before {
content: '';
position: fixed;
inset: 0;
top: 64px;
background: rgba(11, 29, 58, 0.35);
z-index: 999;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: tl-nav-backdrop-fade 0.18s ease both;
pointer-events: auto;
}
@keyframes tl-nav-backdrop-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Top-level items */
.main-nav a,
.main-nav .nav-parent {
padding: 13px 14px;
font-size: 0.95rem;
font-weight: 500;
border-radius: 8px;
border-left: 3px solid transparent;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.main-nav a:hover,
.main-nav .nav-parent:hover {
background: #f8fafc;
color: var(--navy);
border-left-color: var(--gold);
}
.main-nav a.active,
.main-nav .nav-parent.active {
background: var(--gold);
color: #fff;
border-left-color: var(--gold);
}
.main-nav a.active::after,
.main-nav .nav-parent.active::after {
display: none;
}
/* Submenu */
.main-nav .nav-item.has-submenu.open > .submenu {
max-height: 600px;
padding: 4px 0 8px 14px;
margin: 2px 0 6px 14px;
border-left: 2px solid #e2e8f0;
}
.submenu a {
padding: 10px 14px;
font-size: 0.86rem;
color: var(--gray-500);
border-left: 0;
}
.submenu a:hover {
background: #f1f5f9;
color: var(--navy);
}
.submenu a.active {
background: rgba(232, 163, 23, 0.12);
color: var(--gold);
}
/* Caret */
.submenu-caret {
font-size: 0.7rem;
opacity: 0.6;
margin-left: auto;
transition: transform 0.2s ease, opacity 0.15s ease;
}
.main-nav .nav-item.has-submenu.open > .nav-parent .submenu-caret {
transform: rotate(180deg);
opacity: 1;
}
}
/* tlmap.css */
/* ════════════════════════════════════════════════════════════════════════
TransLog — Maps (round 64)
────────────────────────────────────────────────────────────────────────
Styles for tracking maps + business location maps using Leaflet.
Site palette: --gold #E8A317 --navy #0B1D3A --cream #f5efe6
════════════════════════════════════════════════════════════════════════ */
/* ── Map container (shared) ─────────────────────────────────────── */
.tlmap-tracking,
.tlmap-business {
width: 100%;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
background: #f1f5f9;
position: relative;
z-index: 0; /* keep below sticky header */
}
.tlmap-tracking { min-height: 360px; }
.tlmap-business { min-height: 380px; }
/* Loading state */
.tlmap-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #475569;
gap: 14px;
z-index: 1;
}
.tlmap-loading-spinner {
width: 36px;
height: 36px;
border: 3px solid #e2e8f0;
border-top-color: #E8A317;
border-radius: 50%;
animation: tlmap-spin 0.8s linear infinite;
}
@keyframes tlmap-spin {
to { transform: rotate(360deg); }
}
.tlmap-loading-text {
font-size: 0.9rem;
font-weight: 500;
}
/* Error state */
.tlmap-error {
padding: 30px 24px;
text-align: center;
color: #b91c1c;
background: #fef2f2;
border-radius: 14px;
font-size: 0.92rem;
}
/* Custom pins — kill the default Leaflet shadow on divIcons */
.tlmap-pin {
background: none !important;
border: none !important;
filter: drop-shadow(0 4px 6px rgba(15, 23, 42, 0.25));
}
.tlmap-pin svg {
display: block;
}
/* Logo pin (used on business maps when admin enables "show logo on pin") */
.tlmap-logo-pin {
position: relative;
width: 56px;
height: 68px;
pointer-events: auto;
}
.tlmap-logo-pin-circle {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
border: 3px solid #E8A317;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.25);
position: relative;
z-index: 2;
}
.tlmap-logo-pin-circle img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 6px;
box-sizing: border-box;
}
.tlmap-logo-pin-stem {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 14px solid #E8A317;
z-index: 1;
}
/* ── Popup card (Leaflet popup contents) ───────────────────────── */
.leaflet-popup-content-wrapper {
border-radius: 10px !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18) !important;
}
.leaflet-popup-content {
margin: 12px 16px !important;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.5;
}
.tlmap-popup-card {
min-width: 220px;
}
.tlmap-popup-name {
font-size: 1rem;
font-weight: 700;
color: #0B1D3A;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #f1f5f9;
}
.tlmap-popup-row {
margin: 4px 0;
color: #334155;
}
.tlmap-popup-row a {
color: #0B1D3A;
text-decoration: none;
}
.tlmap-popup-row a:hover {
color: #E8A317;
text-decoration: underline;
}
.tlmap-popup-directions {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #f1f5f9;
}
.tlmap-popup-directions a {
color: #E8A317;
font-weight: 600;
}
/* ── Tracking map specific — header strip above the map ─────── */
.tlmap-tracking-wrap {
margin: 32px 0;
}
.tlmap-tracking-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
color: #0B1D3A;
}
.tlmap-tracking-header h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 700;
}
.tlmap-tracking-legend {
display: flex;
gap: 16px;
margin-top: 10px;
flex-wrap: wrap;
font-size: 0.82rem;
color: #475569;
}
.tlmap-tracking-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tlmap-tracking-legend-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.tlmap-tracking-legend-dot.is-sender { background: #E8A317; }
.tlmap-tracking-legend-dot.is-receiver { background: #0B1D3A; border: 2px solid #E8A317; }
.tlmap-tracking-legend-dot.is-event { background: #fff; border: 2px solid #E8A317; }
.tlmap-tracking-legend-line {
display: inline-block;
width: 24px;
height: 0;
border-top: 2px dashed #E8A317;
}
/* ── Business map module wrapper — styling for the section ─── */
.module-business-map {
padding: 60px 0;
}
.module-business-map-header {
text-align: center;
max-width: 720px;
margin: 0 auto 32px;
padding: 0 20px;
}
.module-business-map-eyebrow {
color: #E8A317;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 10px;
font-style: italic;
}
.module-business-map-heading {
color: #0B1D3A;
font-size: 2rem;
font-weight: 800;
margin: 0 0 12px;
line-height: 1.2;
}
.module-business-map-subtitle {
color: #475569;
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.module-business-map-wrap {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ── Mobile polish ───────────────────────────────────────────── */
@media (max-width: 720px) {
.tlmap-tracking { min-height: 280px; }
.tlmap-business { min-height: 320px; }
.tlmap-tracking-wrap { margin: 24px 0; }
.tlmap-tracking-legend { font-size: 0.78rem; gap: 12px; }
.module-business-map { padding: 40px 0; }
.module-business-map-heading { font-size: 1.5rem; }
}
/* tlmap-route.css */
/* ════════════════════════════════════════════════════════════════════════
TransLog — Route Maps (round 66)
────────────────────────────────────────────────────────────────────────
Extends tlmap.css with the route + truck-pin + click-to-pick styles.
════════════════════════════════════════════════════════════════════════ */
/* ── Route map container ─────────────────────────────────────── */
.tlmap-route {
width: 100%;
min-height: 380px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
background: #f1f5f9;
position: relative;
z-index: 0;
}
/* ── Truck pin — animated pulse ──────────────────────────────── */
.tlmap-truck-pin {
position: relative;
width: 44px;
height: 44px;
pointer-events: auto;
}
.tlmap-truck-pin-inner {
position: relative;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff;
border: 3px solid #E8A317;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
z-index: 2;
}
.tlmap-truck-pin-pulse {
position: absolute;
inset: -4px;
border-radius: 50%;
background: rgba(232, 163, 23, 0.4);
animation: tlmap-truck-pulse 2s ease-out infinite;
z-index: 1;
}
@keyframes tlmap-truck-pulse {
0% { transform: scale(0.85); opacity: 0.7; }
70% { transform: scale(1.55); opacity: 0; }
100% { transform: scale(1.55); opacity: 0; }
}
/* ── Admin: click-to-pick map ─────────────────────────────────── */
.tlmap-pick {
width: 100%;
height: 320px;
border-radius: 10px;
overflow: hidden;
border: 1px solid #cbd5e1;
background: #f1f5f9;
cursor: crosshair;
}
.tlmap-pick-wrap {
margin: 8px 0 16px;
}
.tlmap-pick-row {
display: flex;
gap: 8px;
margin-top: 8px;
align-items: center;
flex-wrap: wrap;
}
.tlmap-pick-coords {
flex: 1;
min-width: 0;
padding: 7px 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-size: 0.82rem;
color: #0B1D3A;
}
.tlmap-pick-coords:empty::before {
content: 'Klicken Sie auf die Karte, um eine Position auszuwählen';
color: #94a3b8;
font-style: italic;
font-family: inherit;
}
.tlmap-pick-btn {
padding: 7px 14px;
border: 1px solid #cbd5e1;
background: #fff;
color: #0B1D3A;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.tlmap-pick-btn:hover:not(:disabled) {
background: #f8fafc;
border-color: #94a3b8;
}
.tlmap-pick-btn:disabled {
opacity: 0.6;
cursor: wait;
}
.tlmap-pick-btn-clear {
color: #b91c1c;
border-color: #fca5a5;
}
.tlmap-pick-btn-clear:hover:not(:disabled) {
background: #fef2f2;
border-color: #ef4444;
}
/* The little title strip above each pick map */
.tlmap-pick-title {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0 8px;
color: #0B1D3A;
font-size: 0.95rem;
font-weight: 700;
}
.tlmap-pick-title-color {
width: 14px;
height: 14px;
border-radius: 50%;
flex-shrink: 0;
border: 2px solid #fff;
box-shadow: 0 0 0 1px #cbd5e1;
}
.tlmap-pick-title-color.is-sender { background: #E8A317; }
.tlmap-pick-title-color.is-receiver { background: #0B1D3A; box-shadow: 0 0 0 2px #E8A317; }
.tlmap-pick-title-color.is-truck { background: #fff; box-shadow: inset 0 0 0 3px #E8A317, 0 0 0 1px #cbd5e1; }
/* ── Section + heading on admin form ─────────────────────────── */
.tlmap-admin-section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 24px;
margin: 20px 0;
}
.tlmap-admin-section h3 {
margin: 0 0 6px;
font-size: 1.1rem;
color: #0B1D3A;
}
.tlmap-admin-section p.tlmap-admin-help {
margin: 0 0 16px;
color: #64748b;
font-size: 0.86rem;
line-height: 1.55;
}
/* Admin: truck info card showing last update */
.tlmap-truck-info {
display: flex;
gap: 12px;
align-items: center;
padding: 12px 14px;
background: #fef9e6;
border-left: 4px solid #E8A317;
border-radius: 6px;
margin: 12px 0;
font-size: 0.86rem;
}
.tlmap-truck-info-icon {
font-size: 1.4rem;
flex-shrink: 0;
}
.tlmap-truck-info strong {
display: block;
color: #0B1D3A;
margin-bottom: 2px;
}
.tlmap-truck-info span {
color: #64748b;
}
/* Sync-from-event button */
.tlmap-sync-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #0B1D3A;
color: #fff;
border: 0;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
margin-top: 8px;
}
.tlmap-sync-btn:hover { background: #1e3a5f; }
.tlmap-sync-btn:disabled { opacity: 0.5; cursor: wait; }
/* ── Public tracking — route info bar above the map ──────────── */
.tlmap-route-info {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 14px 18px;
background: #f8fafc;
border-radius: 10px;
margin-bottom: 14px;
font-size: 0.9rem;
}
.tlmap-route-info-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.tlmap-route-info-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
}
.tlmap-route-info-value {
font-weight: 700;
color: #0B1D3A;
}
/* ── Mobile polish ───────────────────────────────────────────── */
@media (max-width: 720px) {
.tlmap-route { min-height: 300px; }
.tlmap-pick { height: 280px; }
.tlmap-route-info {
gap: 14px;
padding: 10px 12px;
}
.tlmap-pick-row {
flex-direction: column;
align-items: stretch;
}
.tlmap-pick-coords {
width: 100%;
}
}
/* ════════════════════════════════════════════════════════════════════════
Round 67 — auto-movement status panel (admin)
════════════════════════════════════════════════════════════════════════ */
.auto-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
margin: 14px 0;
}
.auto-status-cell {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
}
.auto-status-label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #64748b;
margin-bottom: 4px;
}
.auto-status-value {
display: block;
font-size: 0.92rem;
font-weight: 600;
color: #0B1D3A;
}
.auto-status-pill {
display: inline-block;
padding: 4px 10px;
color: #fff;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
}
/* Progress bar */
.auto-progress-bar {
width: 100%;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
margin: 10px 0 16px;
}
.auto-progress-fill {
height: 100%;
background: linear-gradient(90deg, #E8A317 0%, #d4940a 100%);
transition: width 0.3s ease;
}
/* Action button row */
.auto-action-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.btn-auto {
padding: 9px 16px;
border: 0;
border-radius: 6px;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: opacity 0.15s ease, background 0.15s ease;
white-space: nowrap;
}
.btn-auto:disabled { opacity: 0.5; cursor: wait; }
.btn-auto-start { background: #10b981; color: #fff; }
.btn-auto-start:hover:not(:disabled) { background: #059669; }
.btn-auto-tick { background: #E8A317; color: #0B1D3A; }
.btn-auto-tick:hover:not(:disabled) { background: #d4940a; }
.btn-auto-stop { background: #6b7280; color: #fff; }
.btn-auto-stop:hover:not(:disabled) { background: #4b5563; }
.btn-auto-reset { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
.btn-auto-reset:hover:not(:disabled) { background: #fecaca; }
/* ════════════════════════════════════════════════════════════════════════
Round 66/67 admin-fix: persistent alert classes
The admin layout has JS that auto-hides any .alert element after 5s.
We use these classes for warnings that MUST stay visible (e.g. "Set
coordinates first").
════════════════════════════════════════════════════════════════════════ */
.tlmap-persistent-alert {
padding: 14px 18px;
border-radius: 8px;
margin: 12px 0;
font-size: 0.92rem;
line-height: 1.55;
}
.tlmap-persistent-alert strong { display: inline; }
.tlmap-persistent-alert a {
color: inherit;
text-decoration: underline;
font-weight: 600;
}
.tlmap-alert-warning {
background: #fef3c7;
border-left: 4px solid #f59e0b;
color: #78350f;
}
.tlmap-alert-info {
background: #dbeafe;
border-left: 4px solid #3b82f6;
color: #1e3a8a;
}
/* ════════════════════════════════════════════════════════════════════════
Round 68 — ETA card (public tracking page)
════════════════════════════════════════════════════════════════════════ */
.eta-card {
display: flex;
align-items: flex-start;
gap: 16px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid #fbbf24;
border-left: 5px solid #E8A317;
border-radius: 12px;
padding: 18px 22px;
margin: 16px 0 20px;
box-shadow: 0 4px 12px rgba(232, 163, 23, 0.12);
}
.eta-card-icon {
font-size: 2rem;
flex-shrink: 0;
line-height: 1;
margin-top: 2px;
}
.eta-card-body {
flex: 1;
min-width: 0;
}
.eta-card-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #78350f;
font-weight: 700;
margin-bottom: 4px;
}
.eta-card-value {
font-size: 1.4rem;
font-weight: 800;
color: #0B1D3A;
line-height: 1.2;
}
.eta-card-rel {
font-size: 0.95rem;
color: #78350f;
font-weight: 600;
margin-top: 2px;
}
.eta-card-disclaimer {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: 8px;
font-size: 0.86rem;
line-height: 1.5;
color: #57370b;
}
.eta-card-disclaimer-icon {
flex-shrink: 0;
font-size: 1rem;
margin-top: 1px;
}
@media (max-width: 720px) {
.eta-card { padding: 14px 16px; gap: 12px; }
.eta-card-icon { font-size: 1.6rem; }
.eta-card-value { font-size: 1.15rem; }
.eta-card-rel { font-size: 0.86rem; }
.eta-card-disclaimer { font-size: 0.8rem; }
}