. */
.fp-hero .fp-hero-sub {
margin: 16px 0 0;
color: #F7C86B;
font-family: 'Inter';
font-size: 23px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .01em;
text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
/* The lead keeps a measure — a 840px line of body copy is too long to read
comfortably even though the column allows it.
Larger and brighter than before (was 17px at 84% white): the small copy in
the banner sits on a photograph, and thin light type over an image needs
more size and more contrast than the same type on a flat ground. The soft
shadow is for the moments the photo is bright behind a word. */
.fp-hero .fp-hero-lead {
max-width: 62ch;
margin-top: 14px;
color: rgba(255, 255, 255, .94);
font-size: 19px;
line-height: 1.65;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
/* ---------- the discount chip (phones and tablets only) ----------
Below 1024px the offer card drops under the buttons, out of the first
screen. This chip carries the offer up to the top and jumps to the card. */
.fp-hero-promo {
display: none;
}
.fp-hero-offer {
scroll-margin-top: 110px;
}
/* ---------- USP list ---------- */
.fp-hero-list {
margin: 26px 0 30px;
}
/* Two columns: four promises read as a block instead of a long thin list.
No max-width — it was 600px inside a ~735px column, so the list stopped
short of the copy above it and widened the gap to the card. */
.fp-hero .banner-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 26px;
margin: 0;
}
/* flex-start, not center: two of the four promises wrap to a second line, and
a centred tick then floats between the two lines instead of marking where
the item begins. Top-aligned, every tick sits on the first line and the
column of ticks stays straight. */
.fp-hero .banner-list li {
display: flex;
align-items: flex-start;
gap: 11px;
/* 17px, up from --fs-md (16px): see the note on the lead above. */
font-size: var(--fs-base);
font-weight: 500;
line-height: 1.4;
color: #fff !important; /* beats theme.css's global li colour */
text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.fp-usp-tick {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 24px;
height: 24px;
/* Nudged down so the tick centres on the cap height of the first line
rather than on its line box. */
margin-top: 1px;
border-radius: 50%;
background-color: rgba(242, 168, 32, .18);
border: 1px solid rgba(242, 168, 32, .55);
color: #F2A820;
}
.fp-usp-tick svg {
display: block;
width: 13px;
height: 13px;
}
/* ---------- the two CTAs ----------
Both are the same object: an icon in a translucent disc, the label, and an
arrow that slides on hover. Only the fill separates them, so the row reads
as one pair of choices rather than two differently-built buttons. */
.fp-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.fp-hero-btn {
display: inline-flex;
align-items: center;
gap: 13px;
height: 58px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 14px;
color: #fff !important; /* beats theme.css's orange global a colour */
font-family: 'Inter';
font-size: var(--fs-md);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.fp-hero-btn-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .18);
}
.fp-hero-btn-ico svg {
display: block;
width: 18px;
height: 18px;
}
.fp-hero-btn-arrow {
display: inline-flex;
transition: transform .25s ease;
}
.fp-hero-btn-arrow svg {
display: block;
width: 17px;
height: 17px;
}
.fp-hero-btn:hover,
.fp-hero-btn:focus-visible {
transform: translateY(-3px);
}
.fp-hero-btn:hover .fp-hero-btn-arrow {
transform: translateX(4px);
}
.fp-hero-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
.fp-hero-btn--wa {
background-color: #2F5D34;
box-shadow: 0 12px 28px -14px rgba(47, 93, 52, .95);
}
.fp-hero-btn--wa:hover,
.fp-hero-btn--wa:focus-visible {
background-color: #24492A;
box-shadow: 0 18px 34px -14px rgba(47, 93, 52, 1);
}
.fp-hero-btn--call {
background-color: #F2A820;
box-shadow: 0 12px 28px -14px rgba(242, 168, 32, .95);
}
/* Ruhezustand orange, überfahren grün — wie überall. */
.fp-hero-btn--call:hover,
.fp-hero-btn--call:focus-visible {
background-color: var(--brand-green);
box-shadow: 0 14px 28px -12px rgba(47, 93, 52, .75);
}
/* ---------- trust badges ----------
Glass cards on the scrim rather than the white blocks the exported images
forced. The mark, the rating and the stars are all live markup now. */
.fp-hero-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.fp-badge {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 11px 18px 11px 13px;
border-radius: 12px;
background-color: rgba(255, 255, 255, .09);
border: 1px solid rgba(255, 255, 255, .18);
text-decoration: none;
backdrop-filter: blur(6px);
transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.fp-badge:hover,
.fp-badge:focus-visible {
background-color: rgba(255, 255, 255, .15);
border-color: rgba(242, 168, 32, .6);
transform: translateY(-2px);
}
.fp-badge:focus-visible {
outline: 2px solid #F2A820;
outline-offset: 3px;
}
/* White disc behind the platform mark: the Google G is four brand colours and
the ProvenExpert seal is near-black, so neither sits on a dark glass panel
on its own. */
.fp-badge-mark {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #fff;
}
.fp-badge-mark svg {
display: block;
width: 21px;
height: 21px;
}
.fp-badge-mark--pe svg {
width: 30px;
height: 30px;
}
.fp-badge-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.fp-badge-title {
color: #fff;
font-family: 'Inter';
font-size: 15px;
font-weight: 600;
line-height: 1.2;
}
/* "123 Bewertungen ansehen" — the count from the Customizer and the promise
of where the click goes, in one line. */
.fp-badge-count {
display: none !important;
color: #F7C86B;
font-family: 'Inter';
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-decoration: underline;
text-decoration-color: rgba(247, 200, 107, .45);
text-underline-offset: 3px;
}
/* Slightly more solid than the ProvenExpert badge: it carries the number. */
.fp-badge--google {
background-color: rgba(255, 255, 255, .13);
border-color: rgba(255, 255, 255, .26);
}
.fp-badge-rating {
display: flex;
align-items: center;
gap: 7px;
}
.fp-badge-score {
color: #fff;
font-family: 'Inter';
font-size: 16px;
font-weight: 800;
line-height: 1;
}
.fp-badge-stars svg {
display: block;
width: 78px;
height: 15px;
}
.fp-badge-sub {
color: rgba(255, 255, 255, .82);
font-family: 'Inter';
font-size: 13px;
line-height: 1.2;
}
/* blog.css owns this class but is not loaded on the front page. */
.front-page .screen-reader-only {
position: absolute;
width: 1px;
height: 1px;
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
/* ---------- the offer card ----------
One panel. The old block was a rotated-and-skewed ribbon, a clip-path'd
panel and a loose PNG, each cut on a different angle and none of them
sharing an edge — which is the whole reason it read as stuck on top of the
banner rather than part of it. */
/* The track is the card's width now, so there is nothing left to align to. */
.fp-hero-offer {
display: flex;
}
.fp-offer-card {
position: relative;
width: 100%;
max-width: 430px;
/* No overflow:hidden — the ribbon deliberately runs past both edges of the
panel, which is what makes it read as a band laid across the card rather
than a heading inside it. */
padding: 0 0 30px;
border-radius: 18px;
/* Frosted white panel: the brightest object on the banner, so it is found
before it is read, with the photo faintly showing through. The gold edge
and halo tie it to the ribbon. Browsers without backdrop-filter just get
the slightly translucent white, which is still readable. */
background-color: rgba(255, 255, 255, .78);
-webkit-backdrop-filter: blur(6px) saturate(140%);
backdrop-filter: blur(6px) saturate(140%);
border: 1px solid rgba(242, 168, 32, .55);
box-shadow:
0 30px 60px -28px rgba(0, 0, 0, .55),
0 0 60px -20px rgba(242, 168, 32, .5);
/* ONE angle for the whole component. The ribbon rotates by it, the panel's
top edge is clipped to match, and the ribbon's text counter-rotates by the
same value so it reads level. */
--fp-offer-skew: -2.6deg;
}
/* The panel's top edge follows the ribbon, so the two are parallel instead of
a straight card with a tilted label stuck on it. */
.fp-offer-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
border-radius: 18px;
clip-path: polygon(0 4.2%, 100% 0, 100% 100%, 0 100%);
background: linear-gradient(180deg, rgba(233, 240, 233, .5) 0%, rgba(233, 240, 233, 0) 62%);
pointer-events: none;
}
/* The decorative shape the previous design placed loose under the panel. Kept,
blurred and dropped behind the ribbon as a glow. `display: none` here
removes it — the card is designed to hold without it. */
.fp-offer-shape {
position: absolute;
top: -60px;
right: -60px;
z-index: 0;
margin: 0;
opacity: .18;
filter: blur(30px);
pointer-events: none;
}
.fp-offer-shape img {
display: block;
width: 240px;
height: auto;
}
/* ---------- the ribbon ---------- */
.fp-offer-ribbon {
position: relative;
z-index: 2;
/* Overhangs the card on both sides and sits slightly above it. */
margin: -18px -14px 26px;
padding: 20px 26px;
transform: rotate(var(--fp-offer-skew));
background: linear-gradient(100deg, #F7C86B 0%, #F2A820 42%, #e29708 100%);
border-radius: 6px;
box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .75);
/* Clips the sheen below to the band. */
overflow: hidden;
}
/* A slow band of light across the ribbon, once every few seconds. Movement is
what the eye notices first on a still page; one quiet pass, then a long
pause, keeps it from reading as a flashing advert. Off for anyone who has
asked their system for reduced motion (see the end of this section). */
.fp-offer-ribbon::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-18deg);
animation: fp-offer-sheen 6s ease-in-out 1.2s infinite;
pointer-events: none;
}
@keyframes fp-offer-sheen {
0% { left: -60%; }
28% { left: 125%; }
100% { left: 125%; }
}
/* The condition, as a pill under the band. */
.fp-offer-eyebrow {
position: relative;
z-index: 1;
display: table;
margin: 0 auto 16px !important;
padding: 6px 14px;
border-radius: 999px;
background-color: var(--brand-green);
border: 1px solid var(--brand-green);
color: #fff !important;
font-family: 'Inter';
font-size: 13.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .08em;
text-transform: uppercase;
}
/* "Kostenlos · Unverbindlich · Festpreis" under the button — answers the
three doubts that stop someone clicking it. */
.fp-offer-assure {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 16px;
margin: 16px 30px 0;
padding: 0;
list-style: none;
}
.fp-offer-assure li {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
color: var(--text) !important;
font-family: 'Inter';
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.fp-offer-assure li::before {
content: '';
flex: 0 0 auto;
width: 14px;
height: 14px;
background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2A820' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.6 17 4 11.4'/%3E%3C/svg%3E");
}
/* Counter-rotated by the same angle, so the type is level on a tilted band. */
.fp-offer-ribbon-inner {
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
transform: rotate(calc(var(--fp-offer-skew) * -1));
}
.fp-offer-value {
color: #24282e;
font-family: 'Inter';
font-size: clamp(46px, 4.8vw, 60px);
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
}
.fp-offer-word {
color: #fff;
font-family: 'Inter';
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
text-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.fp-offer-text {
position: relative;
z-index: 1;
margin: 0 30px 22px;
}
/* Scoped to beat `.fp-hero p { color: #fff }` — the card is white now. */
.fp-hero .fp-offer-text {
color: var(--text);
font-size: var(--fs-base);
line-height: 1.65;
}
/* A step up from the sentence around it, so the amount is what the eye picks
out of the paragraph. em, so it scales with the text on smaller screens. */
.fp-offer-text strong {
color: var(--brand-green);
font-size: 1.15em;
font-weight: 800;
white-space: nowrap;
}
.fp-offer-cta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 11px;
width: calc(100% - 60px);
margin: 0 30px;
padding: 16px 20px;
border-radius: 12px;
background-color: #F2A820;
color: #fff !important;
font-family: 'Inter';
/* Smaller than body copy: the label is short now and the card is narrow,
so at 17px it was the largest type in the panel after the amount.
16px since the site-wide size increase. */
font-size: 16px;
font-weight: 700;
line-height: 1.3;
text-decoration: none;
box-shadow: 0 12px 28px -14px rgba(242, 168, 32, .95);
transition: background-color .25s ease, color .25s ease,
transform .25s ease, box-shadow .25s ease;
}
.fp-offer-cta-ico {
flex: 0 0 auto;
display: inline-flex;
}
.fp-offer-cta-ico svg {
display: block;
width: 19px;
height: 19px;
}
/* Pushed to the far edge so the label and the arrow are not competing for the
same visual centre. */
.fp-offer-cta-arrow {
flex: 0 0 auto;
display: inline-flex;
margin-left: auto;
transition: transform .25s ease;
}
.fp-offer-cta-arrow svg {
display: block;
width: 17px;
height: 17px;
}
/* Hovers to WHITE, not to the near-black it used before. On a dark glass
card a dark hover made the button recede into the panel — the one moment
it should be at its most obvious. Inverting to white with dark type is the
strongest available step and keeps the orange as the resting state. */
/* Deepen, not invert. The button sits on the dark offer card, and a white
fill there was the one control on the banner that hovered away from the
brand colour instead of into it. */
.fp-offer-cta:hover,
.fp-offer-cta:focus-visible {
background-color: var(--brand-green);
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 18px 34px -14px rgba(47, 93, 52, .8);
}
.fp-offer-cta:hover .fp-offer-cta-arrow {
transform: translateX(4px);
}
.fp-offer-cta:focus-visible {
outline: 2px solid var(--brand-green);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.fp-hero-btn,
.fp-hero-btn-arrow,
.fp-badge,
.fp-offer-cta,
.fp-offer-cta-arrow {
transition: none;
}
.fp-hero-btn:hover,
.fp-badge:hover,
.fp-offer-cta:hover,
.fp-hero-btn:hover .fp-hero-btn-arrow,
.fp-offer-cta:hover .fp-offer-cta-arrow {
transform: none;
}
.fp-offer-ribbon::after {
display: none;
animation: none;
}
.front-page .fp-rating-card,
.fp-rating-card-link svg {
transition: none;
}
.front-page .fp-rating-card:hover,
.fp-rating-card:hover .fp-rating-card-link svg {
transform: none;
}
}
/* ---------- Google rating summary (reviews section header) ----------
The same number as the banner badge, at the point where someone is reading
the reviews and wants to know whether they are real. Links to the profile. */
.fp-review-sources {
display:none !important;
/*display: flex;*/
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.front-page .fp-google-summary {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
padding: 10px 18px 10px 12px;
border-radius: 999px;
background-color: #fff;
border: 1px solid var(--fp-border);
box-shadow: 0 8px 22px -14px rgba(28, 35, 44, .35);
color: var(--text) !important;
font-family: 'Inter';
font-size: 15px;
line-height: 1.2;
text-decoration: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
.front-page .fp-google-summary:hover,
.front-page .fp-google-summary:focus-visible {
border-color: #F2A820;
box-shadow: 0 10px 26px -14px rgba(242, 168, 32, .7);
}
.fp-google-summary-g svg {
display: block;
width: 22px;
height: 22px;
}
.fp-google-summary-score {
font-weight: 800;
font-size: 17px;
color: var(--orange);
}
.fp-google-summary-stars {
color: #FBBC05;
font-size: 16px;
letter-spacing: 1px;
}
.fp-google-summary-link {
color: var(--brand-green);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---------- WhatsApp quote panel ----------
The client's favourite block: the button is the largest control in it, with
the business number printed underneath. */
.fp-whatsapp .fp-wa-actions {
flex-direction: column;
align-items: center;
gap: 10px;
}
.front-page .fp-wa-btn {
min-height: 58px;
padding-left: 26px;
padding-right: 28px;
font-size: var(--fs-md);
}
.front-page .fp-wa-btn .fr-btn-ico svg {
width: 22px;
height: 22px;
}
.front-page .fp-wa-number {
color: #24492A !important;
font-family: 'Inter';
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
}
.front-page .fp-wa-number:hover {
text-decoration: underline;
}
/* =============================================================
SECTION SYSTEM — everything from the counter bar to the FAQ
The sections below used to set their own vertical padding and their own
background, one at a time. Padding ran 4rem, 4.5rem, 8rem, 9rem and 0; the
backgrounds cycled through three near-identical creams in no order, so
neighbouring sections merged into one long block and the joins that were
meant to read landed in the wrong places. Almost every "spacing" and
"alignment" problem on this page came from those two things.
Three rules now:
1. ONE RHYTHM. --fp-section-y is the padding above and below every section.
Nothing sets its own except where a section deliberately runs into its
neighbour (the marquee, the full-bleed rows).
2. GROUND IS A MODIFIER, NOT A SECTION PROPERTY. .fp-bg-white /
.fp-bg-cream / .fp-bg-dark are set in the template, so the rhythm of
the page is visible in the markup and can be re-ordered without
touching CSS. Related sections share a ground, and the ground changes
at the boundaries between ideas — six changes down the page instead of
eighteen.
3. ONE SECTION HEADER. .fp-head holds an optional eyebrow, the h2 and an
optional lead, at one width and one set of margins. They were three
loose elements with per-section margins before, which is why no two
section headings began at the same distance from the content above.
============================================================= */
/* Tightened (Oct. 2026, client: "too much spacing between headings, text,
buttons and images"): 4rem → 3.5rem between sections, 2.5rem → 2rem under
section headers, and the same step down at every breakpoint. */
:root {
--fp-section-y: 3.5rem;
--fp-head-gap: 2rem;
--fp-card-radius: 16px;
}
.front-page .fp-section > .fp-inner {
padding-top: var(--fp-section-y);
padding-bottom: var(--fp-section-y);
}
/*
* THE DOUBLED-GAP RULE.
*
* Two neighbouring sections each pay a full --fp-section-y, so where they also
* share a background there is no line to explain the 2x gap and it reads as a
* hole in the page. That was the "too much spacing" — it was worst exactly
* where the grounds matched, which is why it looked like a background problem.
*
* On a shared ground the second section drops its top padding and the first
* one's bottom padding carries the gap: one unit between blocks that belong
* together, two at a change of ground where the colour explains it.
*/
.front-page .fp-bg-white + .fp-bg-white > .fp-inner,
.front-page .fp-bg-cream + .fp-bg-cream > .fp-inner {
padding-top: 0;
}
/* Except after a full-bleed row: its .fp-inner has no bottom padding, so there
is nothing to stand in for the padding just removed and the next section
would butt straight against the photograph. */
.front-page .fp-residen + .fp-section > .fp-inner {
padding-top: var(--fp-section-y);
}
/* ...but two full-bleed rows in a row DO meet, edge to edge. They are two
halves of one band — a gap between them shows the page background through
a join that is supposed to be continuous. */
.front-page .fp-residen + .fp-residen > .fp-inner {
padding-top: 0;
}
/* The gallery and the reviews used to be excluded from the collapse above,
because a slider with arrows overhanging its track needs clearance under it.
They no longer overhang: carousel.js hands both sets of arrows to the
section header, where they are ordinary flow items. The exception outlived
the reason for it and was paying a second full gap under the gallery — the
hole between the photographs and the WhatsApp panel. */
/* ---------- grounds ---------- */
.front-page .fp-bg-white {
background-color: #fff;
}
.front-page .fp-bg-cream {
background-color: var(--fp-cream);
}
/* No section carries this any more — the proof strip was the only one, and it
is light now. The modifier stays defined because it is part of the ground
set, and theme.css's dark-ground button rules already name it. */
.front-page .fp-bg-dark {
background-color: #12171e;
}
/* ---------- section header ---------- */
.front-page .fp-head {
max-width: 880px;
margin: 0 auto var(--fp-head-gap);
text-align: center;
}
/* Was an 18px paragraph, which read as a second heading competing
with the real one. A small caps label with a rule sits under the title's
weight instead of beside it. */
.front-page .fp-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 14px;
color: #b8790a;
font-family: 'Inter';
font-size: 13px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.3;
text-transform: uppercase;
}
.front-page .fp-eyebrow::before,
.front-page .fp-eyebrow::after {
content: '';
width: 22px;
height: 2px;
border-radius: 2px;
background-color: #F2A820;
}
/* clamp() statt fester Pixel und eigener Verkleinerungsstufen: eine Zeile
trägt Telefon bis Desktop, und die Größe folgt derselben Kurve wie h2 in
theme.css. */
.front-page .fp-section-title {
width: auto; /* theme.css setzt width:100% auf jede Überschrift */
margin: 0 auto;
font-size: clamp(25px, 2.6vw, 36px);
line-height: 1.25;
text-wrap: balance;
}
.front-page .fp-lead {
max-width: 100%;
margin: 14px auto 0;
color: #5c5a5a;
font-size: var(--fs-md);
line-height: 1.75;
text-align: center;
}
/* ---------- header with slider controls ---------- */
/* Left-aligned heading with the arrows on the right of the same line. A
centred heading cannot host controls without them looking bolted on. */
.front-page .fp-head--row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
max-width: none;
text-align: left;
}
.front-page .fp-head--row .fp-head-text {
min-width: 0;
}
.front-page .fp-head--row .fp-section-title,
.front-page .fp-head--row .fp-lead {
margin-left: 0;
margin-right: 0;
text-align: left;
}
.front-page .fp-head--row .fp-section-title {
max-width: 100%;
}
/* slick writes its two buttons straight in here. */
.fp-slider-nav {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
}
/* =============================================================
2. VERSPRECHEN
Vier Karten in einem gewöhnlichen Abschnitt. Kein Überstand, kein negativer
Rand, keine Abstimmung mit dem Fuß des Banners.
Das ist der Punkt: Die vorige Fassung ragte 74px ins Banner hinein, und
dieser Wert musste an drei Umbruchpunkten mit dem Innenabstand des Banners
übereinstimmen. Sechs Zahlen, die zusammenpassen mussten, damit nichts
überlappt — auf dem Telefon taten sie es nicht. Ein Abschnitt, der einfach
unter dem vorigen steht, hat diese Abhängigkeit nicht und kann sie deshalb
auch nicht verlieren.
Die Zahl steht in derselben Zeile wie das Stichwort. Vier große „100 %“
untereinander lasen sich als Statistikleiste ohne Statistik; „100 %
Stressfrei“ liest sich als Zusage.
============================================================= */
.fp-promise-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
}
.fp-promise-item {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 15px;
padding: 22px 22px;
background-color: #fff;
border: 1px solid #f3e9d6;
border-radius: 16px;
box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 16px 34px -30px rgba(96, 58, 20, .4);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
/* Die Kante links färbt sich beim Überfahren — dieselbe Geste wie bei den
Karten weiter unten, damit die Seite eine Sprache spricht. */
.fp-promise-item::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background-color: #F2A820;
transform: scaleY(0);
transform-origin: center;
transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.fp-promise-item:hover::before {
transform: scaleY(1);
}
.fp-promise-item:hover {
transform: translateY(-3px);
border-color: #f0d9b4;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 22px 40px -26px rgba(242, 168, 32, .6);
}
.fp-promise-icon {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background-color: var(--icon-bg);
color: var(--icon-fg);
transition: background-color .28s ease, color .28s ease;
}
.fp-promise-item:hover .fp-promise-icon {
background-color: var(--icon-bg-hover);
color: var(--icon-fg-hover);
}
.fp-promise-icon svg {
display: block;
width: 23px;
height: 23px;
}
.fp-promise-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* Zahl und Stichwort auf einer Grundlinie. baseline, nicht center: Die Zahl
ist deutlich größer als das Wort, mittig ausgerichtet stünde das Wort zu
hoch. */
.fp-promise-head {
display: flex;
align-items: baseline;
gap: 7px;
}
/* !important schlägt die 54px aus der .home-counter-Regel in vikanshu.css,
die gegen das alte Markup geschrieben ist und weiterhin .kb-count-up
trifft. */
.fp-promise-item .kb-count-up-number {
display: flex;
align-items: baseline;
color: #1c232c;
font-family: 'Inter';
font-size: 26px !important;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
}
.fp-promise-item .kb-count-up-suffix {
margin-left: 1px;
color: #F2A820;
font-size: .72em;
}
.fp-promise-word {
color: #1c232c;
font-family: 'Inter';
font-size: 17px;
font-weight: 700;
line-height: 1.2;
}
.fp-promise-item .kb-count-up-title {
margin: 0;
color: #5c5a5a;
font-family: 'Inter';
font-size: 13.5px;
font-weight: 500;
line-height: 1.45;
}
/* =============================================================
3. SERVICE TILES
The title sits on the photograph over a gradient, rather than in a white
caption box beneath it. Twelve cards of picture-plus-caption were three
identical rows where half of every card was empty white; as tiles the
pictures do the work and the grid reads at a glance.
============================================================= */
.fp-services-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.fp-tile {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--fp-card-radius);
background-color: #12171e;
box-shadow: 0 1px 2px rgba(29, 35, 38, .05), 0 16px 34px -22px rgba(29, 35, 38, .5);
transition: transform .32s ease, box-shadow .32s ease;
}
.fp-tile:hover,
.fp-tile:focus-visible {
transform: translateY(-5px);
box-shadow: 0 3px 8px rgba(29, 35, 38, .07), 0 26px 46px -22px rgba(29, 35, 38, .6);
}
.fp-tile:focus-visible {
outline: 2px solid #f2a820;
outline-offset: 3px;
}
.fp-tile-media {
display: block;
/* A fixed ratio keeps every tile the same shape — 4/3 is close to the
684x433 sources and gives the title room without cropping the subject. */
aspect-ratio: 4 / 3;
}
.fp-tile-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.fp-tile:hover .fp-tile-media img,
.fp-tile:focus-visible .fp-tile-media img {
transform: scale(1.07);
}
/* The scrim covers the bottom of the tile only, so the photograph is not
dimmed for the sake of two or three words. */
.fp-tile-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 40px 16px 15px;
background: linear-gradient(180deg,
rgba(10, 13, 17, 0) 0%,
rgba(10, 13, 17, .55) 42%,
rgba(10, 13, 17, .9) 100%);
}
.fp-tile-title {
color: #fff;
font-family: 'Inter';
font-size: 15px;
font-weight: 600;
line-height: 1.35;
text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.fp-tile-arrow {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: rgba(255, 255, 255, .16);
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
transition: background-color .28s ease, border-color .28s ease, transform .28s ease;
}
.fp-tile-arrow svg {
display: block;
width: 14px;
height: 14px;
}
.fp-tile:hover .fp-tile-arrow,
.fp-tile:focus-visible .fp-tile-arrow {
background-color: #F2A820;
border-color: #F2A820;
transform: translateX(3px);
}
/* Closing line + button under the grid. */
.front-page .would-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 22px;
margin-top: 2.5rem;
}
.fp-cta-text {
margin: 0;
font-size: 19px;
line-height: 1.4;
}
/* =============================================================
4 / 7 / 11. TEXT + IMAGE SPLIT ROWS
Trust, Überzeugung and Zielgruppe are the same component. They were three
sections with three different column gaps (4rem, 4rem, 130px) and three
different paddings, which is why the page never settled into a column.
============================================================= */
.front-page .fp-split > .fp-inner,
.fp-audience > .fp-inner {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3.5rem;
row-gap: 2rem;
align-items: center;
}
.front-page .fp-split h2,
.fp-audience h2,
.fp-service-row h2 {
width: auto;
margin: 0 0 18px;
font-size: 27px;
line-height: 1.3;
}
.front-page .fp-split p,
.fp-audience p,
.fp-service-row p {
margin: 0 0 18px;
color: #5c5a5a;
line-height: 1.75;
}
.front-page .fp-split > .fp-inner > figure img,
.fp-audience > .fp-inner > figure img {
display: block;
width: 100%;
border-radius: var(--fp-card-radius);
}
/* =============================================================
5. CALLBACK
The card that stood here (.fp-callback-card, an orange panel with its own
heading, copy and button styles) is gone: the section renders the shared
.fr-cta--panel component from theme.css now, so there is nothing left for
this file to say about it beyond the section rhythm every section gets.
============================================================= */
/* =============================================================
6. PRICING
============================================================= */
.fp-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
align-items: center;
}
.fp-pricing-grid .kosten-box > .kt-inside-inner-col,
.fp-pricing-grid .kosten-new-box > .kt-inside-inner-col {
display: flex;
flex-direction: column;
align-items: center;
height: auto !important; /* beats the fixed 325/375px in vikanshu.css */
margin-top: 0 !important;
padding: 40px 28px 36px !important;
background-color: var(--btn-green);
border-radius: var(--fp-card-radius);
color: #fff;
}
/* The middle card is the recommended one — it is raised and outlined rather
than being 50px taller than its neighbours and overflowing the row. */
/*
* Die mittlere Karte ist die empfohlene — sie steht höher und trägt einen
* Rahmen, statt 50px größer zu sein als ihre Nachbarn und aus der Reihe zu
* ragen.
*
* KEIN VERLAUF MEHR. Er lief von #47708f nach Grün — ein Blau, das aus der
* Zeit vor dem Wechsel auf die Logofarben stammte und beim Austausch der
* Hexwerte übersehen wurde, weil es in keiner der ersetzten Farben vorkam.
* Übrig blieb ein Blaugrün-Schleier über genau der Karte, die am klarsten
* lesbar sein sollte. Sie hat jetzt dieselbe Fläche wie ihre Nachbarn; dass
* sie hervorgehoben ist, sagen Rahmen und Schatten.
*/
.fp-pricing-grid .kosten-new-box > .kt-inside-inner-col {
padding: 52px 28px 48px !important;
background-color: var(--btn-green);
background-image: none;
border: 2px solid #F2A820;
box-shadow: 0 26px 50px -26px rgba(47, 93, 52, .95);
}
.fp-pricing-grid figure img {
display: block;
margin: 0 auto;
}
.fp-price-meta {
display: flex;
justify-content: center;
gap: 26px;
margin: 24px 0 20px;
}
.fp-price-meta p {
margin: 0;
color: rgba(255, 255, 255, .85);
font-size: var(--fs-sm);
}
.fp-pricing-grid h3 {
width: auto;
margin: 0 0 6px;
color: #fff;
font-size: 40px !important; /* beats the 36px in vikanshu.css */
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
text-align: center;
}
.fp-pricing-grid span {
display: block;
color: rgba(255, 255, 255, .85);
font-size: var(--fs-sm);
text-align: center;
}
.fp-pricing-grid span + span {
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, .18);
color: rgba(255, 255, 255, .7);
}
.kosten-group {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
.fp-kosten-inner {
text-align: center;
}
.fp-price-note {
margin: 0 0 18px;
color: #6b6a68;
font-size: var(--fs-sm);
}
/* =============================================================
8. FOUR STEPS
============================================================= */
.fp-steps .kt-row-layout-overlay {
position: absolute;
inset: 0;
z-index: 0;
/* background-image: url('../images/works-boder-new.webp'); */
background-size: 100% auto;
background-position: 50% 60%;
background-repeat: no-repeat;
opacity: .5;
}
.fp-new-img{
}
.fp-new-img img {
display: block;
width: 100%;
height: 100%;
max-height: 460px;
object-fit: cover;
border-radius: var(--sv-card-radius);
}
.fp-steps-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
/* Every step is the same card. The second and fourth used to be pushed down
6rem by `.new-works`, which made the row read as broken rather than
staggered — the numbers ran 01 03 above 02 04. */
.fp-steps-grid .works-box > .kt-inside-inner-col {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
margin-top: 0 !important; /* beats `.new-works .kt-inside-inner-col` */
padding: 34px 26px 30px;
/* White cards on a white section left the border doing all the work, and a
1px grey hairline is not enough to make four boxes read as four boxes.
They take the cream as their ground and hand white back on hover, so the
step being pointed at is the one that lifts out of the row. */
background-color: var(--fp-cream);
border: 1px solid #f2e6d1;
border-radius: var(--fp-card-radius);
box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 16px 36px -26px rgba(96, 58, 20, .4);
text-align: center;
transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.fp-steps-grid .works-box:hover > .kt-inside-inner-col {
transform: translateY(-5px);
background-color: #fff;
border-color: #F2A820;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 22px 44px -22px rgba(242, 168, 32, .55);
}
/* The step number, as a marker in the corner rather than a stray figure
floating above the icon. */
.fp-steps-grid .works-box > .kt-inside-inner-col > span {
position: absolute;
top: 14px;
right: 18px;
margin: 0 !important; /* beats the 0 55px -15px 0 in vikanshu.css */
color: #ecd9bd;
font-family: 'Inter';
font-size: 34px;
font-weight: 800;
line-height: 1;
}
.fp-steps-grid .wp-block-kadence-image {
width: 84px !important;
height: 84px !important;
margin: 0 auto 20px !important;
border: 1px solid rgba(242, 168, 32, .35);
border-radius: 50%;
display: grid;
place-items: center;
}
.fp-steps-grid .works-box figure {
width: 62px;
height: 62px;
background-color: #F2A820;
border-radius: 50%;
display: grid;
place-items: center;
transition: background-color .3s ease;
}
.fp-steps-grid .works-box:hover figure {
background-color: #12171e;
}
.fp-steps-grid .works-box figure img {
width: 28px;
height: auto;
filter: brightness(0) invert(1);
}
.fp-steps-grid .works-box h3 {
width: auto;
margin: 0 0 10px;
font-size: 18px;
line-height: 1.35;
}
.fp-steps-grid .works-box p {
margin: 0;
color: #5c5a5a;
font-size: var(--fs-sm);
line-height: 1.65;
}
/* =============================================================
9. MARQUEE BAND
============================================================= */
.fp-marquee {
background-image: url('../images/marque-new.webp');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
padding-top: 3.5rem;
}
.fp-marquee .marquee-ban img {
display: block;
width: 100%;
}
/* =============================================================
10. AWARDS / CERTIFICATES
============================================================= */
.fp-awards-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
align-items: center;
column-gap: 4rem;
row-gap: 2.25rem;
}
.fp-awards-eyebrow {
margin: 0 0 10px !important;
color: #d98f0c !important;
font-family: 'Inter';
font-size: 13px !important;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
/* ---------- the two platform cards ----------
White cards on the cream ground, the same family as the promise cards at
the top of the page. Each is one link: rating, count and the platform in a
single target, so "check it yourself" is one tap. */
.fp-rating-cards {
display: none;
/* display: grid; */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 20px 0 16px;
}
/* Compact, three short lines: platform · rating · "199 Bewertungen lesen". */
.front-page .fp-rating-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 12px 16px 11px;
border-radius: 14px;
background-color: #fff;
border: 1px solid var(--fp-border);
box-shadow: 0 2px 6px rgba(29, 35, 38, .04), 0 18px 34px -26px rgba(29, 35, 38, .45);
color: var(--text) !important;
text-decoration: none;
transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.front-page .fp-rating-card:hover,
.front-page .fp-rating-card:focus-visible {
border-color: #F2A820;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 18px 34px -18px rgba(242, 168, 32, .55);
transform: translateY(-2px);
}
.front-page .fp-rating-card:focus-visible {
outline: 2px solid #F2A820;
outline-offset: 3px;
}
.fp-rating-card-head {
display: flex;
align-items: center;
gap: 8px;
}
.fp-rating-card-logo svg {
display: block;
width: 20px;
height: 20px;
}
.fp-rating-card-name {
color: var(--orange);
font-family: 'Inter';
font-size: 14.5px;
font-weight: 700;
}
.fp-rating-card-score {
display: flex;
align-items: center;
gap: 7px;
}
.fp-rating-card-value {
color: var(--orange);
font-family: 'Inter';
font-size: 26px;
font-weight: 800;
line-height: 1;
letter-spacing: -.02em;
}
.fp-rating-card-stars {
color: #FBBC05;
font-size: 15px;
letter-spacing: 1px;
line-height: 1;
}
.fp-rating-card-link {
display:none !important;
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--brand-green);
font-family: 'Inter';
font-size: 13.5px;
font-weight: 700;
}
.fp-rating-card-link svg {
width: 14px;
height: 14px;
transition: transform .25s ease;
}
.fp-rating-card:hover .fp-rating-card-link svg {
transform: translate(2px, -2px);
}
/* ---------- certificates ---------- */
.fp-awards-media {
width: 100%;
max-width: 620px;
margin-left: auto;
}
/* The copy column is the only left-aligned .fp-section-title on the page, so
the centring the component sets by default is undone here rather than a
second heading class being invented for it. */
.fp-awards-copy .fp-section-title,
.fp-awards-copy .fp-lead {
max-width: none;
margin-left: 0;
margin-right: 0;
text-align: left;
}
.fp-awards-copy .fp-section-title {
margin-bottom: 16px;
}
.fp-awards-copy .fp-lead {
margin-top: 0;
}
/* 1240x1754 portrait scans, side by side and upright. Each column is ~270px
on desktop — large enough to read the award name and the year. */
.fp-awards-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.fp-award {
margin: 0;
}
.fp-award img {
display: block;
width: 100%;
height: auto;
border-radius: 14px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 24px 50px -28px rgba(29, 35, 38, .6);
}
.fp-awards-note {
margin: 0 0 22px;
color: #5c5a5a;
font-size: var(--fs-sm);
line-height: 1.7;
}
/* ---------- audience types ---------- */
.fp-audience-media img {
display: block;
width: 100%;
border-radius: var(--fp-card-radius);
/* A fixed frame, so swapping in a photo of any proportion keeps the
section's height and the copy beside it in place. */
aspect-ratio: 4 / 3;
/* .fp-new-img img above sets height: 100%, which would cancel the ratio. */
height: auto;
object-fit: cover;
}
/* The gap to the button. A stray
after a commented-out list used to
stand in for it. */
.fp-audience-copy > p {
margin-bottom: 24px;
}
/* The four groups the heading names, as a row of their own. */
.fp-audience-types {
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 26px 0 28px;
padding: 0;
}
.fp-audience-types li {
display: flex;
align-items: center;
gap: 11px;
padding: 12px 14px;
background-color: #fff;
border: 1px solid var(--fp-border);
border-radius: 11px;
color: #2a2e34 !important; /* beats theme.css's global li colour */
font-size: var(--fs-sm);
font-weight: 600;
line-height: 1.3;
transition: border-color .25s ease, box-shadow .25s ease;
}
.fp-audience-types li:hover {
border-color: #F2A820;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 12px 24px -16px rgba(242, 168, 32, .6);
}
.fp-audience-ico {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
background-color: var(--icon-bg);
color: var(--icon-fg);
}
.fp-audience-ico svg {
display: block;
width: 18px;
height: 18px;
}
/* =============================================================
12. SERVICE + INSURANCE ROWS
============================================================= */
.fp-service-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3.5rem;
row-gap: 2rem;
align-items: center;
}
.fp-service-row + .fp-service-row {
margin-top: 3rem;
padding-top: 3rem;
border-top: 1px solid var(--fp-border);
}
.fp-service-row > figure img {
display: block;
width: 100%;
border-radius: var(--fp-card-radius);
}
/* =============================================================
13. GALLERY SLIDER
============================================================= */
/* The arrows are in the header now, so the strip needs no clearance under it. */
.fp-gallery .gellary-slider {
margin-top: .5rem;
}
.fp-gallery .gallery-slide img {
display: block;
width: 100%;
}
/* =============================================================
14. SERVICE AREAS
The same chips the Standorte page uses for its 66 locations, so the two
listings of "where we work" are recognisably one component.
They were 35 bordered cards in a rigid five-column grid: every column had
to be wide enough for "Mecklenburg-Vorpommern", and the state under each
city repeated so heavily ("Nordrhein-Westfalen" eleven times) that it read
as noise rather than information. It is the chip's title attribute now —
there for anyone who wants it, out of the way of the scan.
============================================================= */
/* The city directory used to be defined here. It is a shared partial now —
template-parts/locations.php, styled by standorte-page.css — so the home
page, the Kontakt page and the Standorte page render one component instead
of three near-copies. Only the button under it is still local. */
.fp-locations-foot {
display: flex;
justify-content: center;
margin-top: 2.5rem;
}
/* =============================================================
15 / 16. FULL-BLEED IMAGE + TEXT ROWS
The photo runs to the edge of the viewport and the copy sits in a column
that lines up with .alignwide above and below it — which is what stops
these two rows reading as a different page from the rest.
============================================================= */
/* `.front-page` is on the selector to outrank the section rhythm rule
(`.front-page .fp-section > .fp-inner`) — without it this is (0,2,0)
against that rule's (0,3,0), the zeroed padding loses, and the row gets the
full --fp-section-y back top and bottom. That was the gap between the two
rows: the first one's bottom padding, reinstated. */
.front-page .fp-residen > .fp-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
/* Full bleed: the gutter belongs to the text column, set below. */
padding: 0;
}
.fp-residen .residen-left,
.fp-residen .residen-left > .kt-inside-inner-col,
.fp-residen .residen-left figure,
.fp-residen .residen-left img {
height: 100%;
}
.fp-residen .residen-left img {
display: block;
width: 100%;
object-fit: cover;
border-radius: 0 !important; /* beats .img-radius */
}
/* The photograph was setting the height of the whole row: at its natural
1060x600 it ran to ~600px, and the copy beside it — often only four or five
lines — was stretched across all of it, which is where the empty half of
those two rows came from. Capping the row lets the copy decide the height
and the photograph fill whatever that is. */
.front-page .fp-residen > .fp-inner {
/* max-height: 610px; */
/* max-height alone does NOT clip — the grid row simply overflows it, which
is how the photograph ended up spilling over the section below. */
overflow: hidden;
}
.fp-residen .residen-left {
overflow: hidden;
}
.fp-residen .fp-residen-text > .kt-inside-inner-col {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
max-width: 660px !important; /* beats the 570/750px in vikanshu.css */
padding: var(--fp-section-y) var(--fp-edge) !important;
}
/* Image on the left → the copy column hugs the container's left edge. */
.fp-residen .residen-box > .kt-inside-inner-col {
margin-right: auto;
padding-left: 3.5rem !important;
}
/* Copy on the left → it hugs the container's right edge instead. */
.fp-residen .residen-box-sec > .kt-inside-inner-col {
margin-left: auto;
padding-right: 3.5rem !important;
}
/*
* THE FULL-WIDTH BUTTON.
*
* .fr-btn is inline-flex and sizes to its label everywhere else on the page.
* Inside these columns it was stretching edge to edge — because the column is
* `display: flex; flex-direction: column`, and a flex item with no align-self
* takes `stretch` on the cross axis. On a column that cross axis is the WIDTH,
* so the button filled it. Nothing to do with the label length.
*
* The same trap applies to any button dropped into one of these columns, so it
* is set on the column's children rather than on one button.
*/
.fp-residen .fr-btn,
.fp-residen .fr-cta-phone {
align-self: flex-start;
}
.fp-residen h2 {
width: auto;
margin: 0 0 18px;
font-size: 27px;
line-height: 1.3;
}
.fp-residen p {
margin: 0 0 18px;
color: #5c5a5a;
line-height: 1.75;
}
.fp-residen--top {
border-top: 1px solid var(--fp-border);
}
/* =============================================================
17. SPECIAL REQUESTS
============================================================= */
/* Copy on the left, the call to action on the right.
It was one centred column running the full 1350px — around 150 characters
a line, centre-aligned — and then a button on its own underneath. */
.fp-special > .fp-inner > .fp-special-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
column-gap: 4rem;
row-gap: 2.5rem;
align-items: start;
}
.fp-special-cols {
columns: 1;
max-width: none;
margin: 0;
}
.fp-special-cols p {
margin: 0 0 18px;
color: #5c5a5a;
line-height: 1.8;
/* Keeps a paragraph from being split across the two columns. */
break-inside: avoid;
}
.fp-special-cols p:last-child {
margin-bottom: 0;
}
/* The card that closes the section. Sticky so it stays beside the copy on a
tall screen rather than sitting level with the first paragraph and leaving
the rest of the column empty. */
.fp-special-cta {
position: sticky;
top: 120px;
padding: 30px 28px;
background-color: var(--fp-cream);
border: 1px solid #f2e4d1;
border-radius: var(--fp-card-radius);
text-align: center;
}
.fp-special-cta-icon {
display: grid;
place-items: center;
width: 54px;
height: 54px;
margin: 0 auto 16px;
border-radius: 50%;
background-color: #F2A820;
color: #fff;
}
.fp-special-cta-icon svg {
display: block;
width: 24px;
height: 24px;
}
.fp-special-cta p {
margin: 0 0 20px;
color: #5c5a5a;
font-size: var(--fs-sm);
line-height: 1.7;
}
/* =============================================================
18. REVIEWS
Individual cards, three across.
The orange panel was the slider's own .slick-list with a background colour
on it: two reviews shared one card and the line between them was a gap in
the text, not a border. Separate cards mean each review is its own object,
a third one fits, and the section stops being one large flat rectangle.
============================================================= */
.fp-reviews .review-slider {
position: relative;
/* Negative gutters so the cards' own padding lines the row up with the
container edge rather than sitting inside it twice. */
margin: 0 -11px;
}
.fp-reviews .review-slider .slick-list {
/* No background here any more — the cards carry it. Overflow stays visible
vertically so the hover lift and the shadows are not cut off. */
padding: 10px 0 26px;
}
/* height:100%, not auto. slick gives each slide the track height once the
track is a flex row; `auto` stops that being passed down to the card, which
is why the three ended up as tall as their own text and no taller. */
.fp-reviews .review-slide {
height: 100%;
padding: 0 11px;
}
/* equal-height cards whatever the review length */
.fp-reviews .review-slider .slick-track {
display: flex;
}
.fp-reviews .review-slider .slick-slide {
height: auto;
}
.fp-reviews .review-slider .slick-slide > div {
height: 100%;
}
.fp-review {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 30px 28px 26px;
background-color: #fff;
border: 1px solid #f0e4d3;
border-radius: var(--fp-card-radius);
box-shadow: 0 1px 2px rgba(66, 47, 12, .04), 0 18px 40px -26px rgba(66, 47, 12, .45);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.fp-review:hover {
transform: translateY(-4px);
border-color: #F2A820;
box-shadow: 0 3px 8px rgba(66, 47, 12, .06), 0 26px 50px -26px rgba(242, 168, 32, .6);
}
.fp-review-mark {
display: block;
width: 36px;
color: #f7dfb4;
}
.fp-review-mark svg {
display: block;
width: 100%;
height: auto;
}
.fp-review-stars {
margin-top: 16px;
line-height: 0;
}
.fp-review-stars svg {
display: block;
height: 16px;
width: auto;
}
.fp-review-text {
flex: 1 1 auto;
margin: 14px 0 22px;
color: #4a4846;
font-size: var(--fs-sm);
line-height: 1.75;
}
.fp-review-author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
}
/* No portrait. The photographs were generic stock faces attached to real
names, which reads as decoration at best and as a claim about who these
people are at worst. Der Name allein sagt, was die Zeile sagen muss — die
Zeile "Verifizierte Bewertung" ist auf Wunsch ebenfalls raus. Ein kurzer
oranger Strich steht an ihrer Stelle, damit der Fußbereich der Karte etwas
hat, wogegen er anfängt.
Das Markup für .fp-review-avatar ist aus beiden Vorlagen verschwunden. */
.fp-review-author {
padding-left: 14px;
border-left: 3px solid var(--fp-orange, #F2A820);
}
.fp-review-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.fp-review-name {
color: #2a2e34;
font-family: 'Inter';
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
/* =============================================================
16b. SLIDER ARROWS
The arrows live in .fp-slider-nav in each section header now (carousel.js
hands them over with slick's appendArrows), so they are ordinary flow
items. Every `position: absolute` / `bottom: -76px` / `!important` that
used to place them — and the section-overlap that came with it — is gone.
============================================================= */
.fp-slider-nav .slick-arrow {
position: static;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid #ddd;
border-radius: 50%;
background-color: #fff;
color: #2a2e34;
cursor: pointer;
transform: none;
transition: background-color .25s ease, border-color .25s ease,
color .25s ease, transform .25s ease;
}
.fp-slider-nav .slick-arrow:hover {
background-color: #F2A820;
border-color: #F2A820;
color: #fff;
transform: translateY(-2px);
}
.fp-slider-nav .slick-arrow:focus-visible {
outline: 2px solid #2a2e34;
outline-offset: 2px;
}
/* Both sliders loop, so this should never show. If it ever does — a white
button at .4 opacity on a pale ground was invisible rather than disabled. */
.fp-slider-nav .slick-arrow.slick-disabled {
border-color: #e6e2da;
background-color: #f4efe7;
opacity: 1;
pointer-events: none;
}
.fp-slider-nav .slick-arrow.slick-disabled::before {
opacity: .35;
}
/* slick's default skin puts a font glyph in ::before. These are inline SVG
arrows drawn in currentColor, so they follow the hover above. */
/*
* slick's default skin puts a font glyph in ::before, from a webfont this
* theme does not load — so the buttons came out as empty circles.
*
* The first attempt recoloured that pseudo-element with a CSS `mask`, which
* paints nothing at all where masks are unsupported or blocked: same empty
* circle, harder to debug. A plain background-image always paints. Two
* images rather than one recoloured one, because an inline SVG in a
* background cannot inherit currentColor.
*/
.fp-slider-nav .slick-arrow::before {
content: '';
display: block;
width: 18px;
height: 18px;
opacity: 1;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.fp-slider-nav .slick-prev::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322303c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H6'/%3E%3Cpath d='M11 7l-5 5 5 5'/%3E%3C/svg%3E");
}
.fp-slider-nav .slick-next::before {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322303c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='M13 7l5 5-5 5'/%3E%3C/svg%3E");
}
.fp-slider-nav .slick-arrow:hover::before {
filter: brightness(0) invert(1);
}
/* =============================================================
17. FAQ
============================================================= */
/* Full container width. The photograph that took half this row is gone — it
said nothing, and it squeezed six questions into a column so narrow that
every one of them ran to two lines. */
.fp-faq-list {
margin: 0;
}
.fp-faq-cta {
margin: 2.5rem 0 0;
}
/* The panel takes whichever ground its section is NOT.
.fr-cta--panel is a white card, which is right on cream and invisible on
white — so this used to hard-code cream, which was correct for the front
page (white FAQ) and wrong for the Kontakt page, where the FAQ sits on
cream and the panel came out cream-on-cream. With the warm ::after wash on
top of that it read as a washed-out orange smear rather than a card. */
.fp-bg-white .fp-faq-cta {
background-color: var(--fp-cream);
border-color: #f2e4d1;
}
.fp-bg-cream .fp-faq-cta {
background-color: #fff;
border-color: #eceff3;
}
/* .fp-faq-image is gone with the photograph. */
/* The heading lives in .fp-head now, like every other section's. */
.fp-faq .kt-accordion-inner-wrap {
display: flex;
flex-direction: column;
row-gap: 15px;
}
/* Panes carry the surface so the header and its panel read as one card and
the panel can animate open underneath the header. */
.fp-faq .kt-accordion-pane {
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
overflow: hidden;
transition: border-color .3s ease, box-shadow .3s ease;
}
.fp-faq .kt-accordion-pane:has(.kt-accordion-panel-active) {
border-color: #f2a820;
box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 16px 34px -22px rgba(242, 168, 32, .5);
}
.fp-faq .kt-blocks-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
width: 100%;
padding: 20px;
background: transparent;
color: var(--text);
border: 0;
font-family: 'Inter';
text-align: left;
cursor: pointer;
transition: background-color .25s ease;
}
.fp-faq .kt-blocks-accordion-header:hover {
background-color: var(--fp-cream-soft);
}
.fp-faq .kt-blocks-accordion-header:focus-visible {
outline: 2px solid #f2a820;
outline-offset: -3px;
}
.fp-faq .kt-blocks-accordion-icon-trigger {
position: relative;
flex: 0 0 16px;
width: 16px;
height: 16px;
}
.fp-faq .kt-blocks-accordion-icon-trigger::before,
.fp-faq .kt-blocks-accordion-icon-trigger::after {
content: '';
position: absolute;
top: 50%;
width: 10px;
height: 2px;
background: var(--grey);
border-radius: 2px;
transition: transform .38s cubic-bezier(.32, .72, 0, 1);
}
.fp-faq .kt-blocks-accordion-icon-trigger::before {
left: 0;
transform: translateY(-50%) rotate(45deg);
}
.fp-faq .kt-blocks-accordion-icon-trigger::after {
right: 0;
transform: translateY(-50%) rotate(-45deg);
}
.fp-faq .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::before {
transform: translateY(-50%) rotate(-45deg);
}
.fp-faq .kt-blocks-accordion-header.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger::after {
transform: translateY(-50%) rotate(45deg);
}
/* Open/close animation.
The panel is a one-row grid animated between 0fr and 1fr, which lets the
height transition to and from the content's natural size without JavaScript
measuring it. `display: none` was used here before, so the panel simply
snapped open. The inner element needs min-height:0 + overflow:hidden for
the 0fr row to actually collapse. */
.fp-faq .kt-accordion-panel {
display: grid;
grid-template-rows: 1fr;
background: transparent;
overflow: hidden;
opacity: 1;
visibility: visible;
transition:
grid-template-rows .42s cubic-bezier(.32, .72, 0, 1),
opacity .3s ease .06s,
visibility 0s;
}
.fp-faq .kt-accordion-panel-hidden {
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition:
grid-template-rows .34s cubic-bezier(.32, .72, 0, 1),
opacity .18s ease,
visibility 0s linear .34s;
}
/* The inner element must be a bare clipping box: any padding of its own sits
outside the content box and survives the 0fr collapse, which would leave
every closed pane 20px tall. The spacing lives on the copy instead. */
.fp-faq .kt-accordion-panel > .kt-accordion-panel-inner {
min-height: 0;
overflow: hidden;
padding: 0;
transform: translateY(0);
transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}
.fp-faq .kt-accordion-panel-inner > * {
margin: 0 0 20px;
padding: 0 20px;
}
/* The copy trails the height very slightly, which is what stops the open
from looking like the text is being stretched into place. */
.fp-faq .kt-accordion-panel-hidden > .kt-accordion-panel-inner {
transform: translateY(-8px);
transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-reduced-motion: reduce) {
.fp-faq .kt-accordion-pane,
.fp-faq .kt-blocks-accordion-header,
.fp-faq .kt-blocks-accordion-icon-trigger::before,
.fp-faq .kt-blocks-accordion-icon-trigger::after,
.fp-faq .kt-accordion-panel,
.fp-faq .kt-accordion-panel-hidden,
.fp-faq .kt-accordion-panel > .kt-accordion-panel-inner,
.fp-faq .kt-accordion-panel-hidden > .kt-accordion-panel-inner {
transition: none;
}
.fp-faq .kt-accordion-panel-hidden > .kt-accordion-panel-inner {
transform: none;
}
}
/* .fp-faq-more ("Sie haben weitere Fragen?") is the CTA panel's own heading
now — see .fr-cta--panel in theme.css. */
/* =============================================================
RESPONSIVE — mirrors the site's 1024 / 767 breakpoints
The rhythm steps down by changing ONE variable. Every section measures its
padding off --fp-section-y, so the whole page tightens together instead of
through the twenty-odd per-section padding overrides that used to live
here — several of which contradicted each other and were the reason
neighbouring sections ended up with different gaps at the same width.
============================================================= */
@media only screen and (max-width: 1200px) {
:root {
/* Was 4.5rem — more than the desktop value it is meant to step down from. */
--fp-section-y: 3.25rem;
--fp-head-gap: 2rem;
}
/* A comment here had lost its closing marker (and the selector of the rule
it described), so everything down to the next comment — the end of this
query and the start of the 1024px one — was swallowed. The tablet hero
layout was applying from 1200px down and both :root steps were lost.
The orphaned location-grid rule is gone; the location browser styles
itself in standorte-page.css. */
.fp-services-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fp-awards-layout {
column-gap: 2.5rem;
}
.fp-special > .fp-inner > .fp-special-layout {
column-gap: 2.5rem;
}
.front-page .fp-split > .fp-inner,
.fp-audience > .fp-inner,
.fp-service-row {
column-gap: 3rem;
}
.fp-residen .residen-box > .kt-inside-inner-col {
padding-left: 2.5rem !important;
}
.fp-residen .residen-box-sec > .kt-inside-inner-col {
padding-right: 2.5rem !important;
}
}
/* Side by side on a narrow desktop, the offer card reaches the right edge —
where the floating contact dock (footer.php, ~64px) sits. Keep it clear. */
@media only screen and (min-width: 1025px) and (max-width: 1320px) {
.fp-hero .fp-inner {
grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
column-gap: 2rem;
padding-right: 84px;
}
}
@media only screen and (max-width: 1024px) {
:root {
--fp-section-y: 3rem;
--fp-head-gap: 1.75rem;
}
/* ---------- hero (section 1, unchanged in scope) ---------- */
.fp-hero .fp-inner {
grid-template-columns: minmax(0, 1fr);
row-gap: 2.5rem;
padding-top: 4rem;
padding-bottom: 3rem;
}
/* Stacked, so the scrim no longer needs to be heaviest on one side — an
even veil keeps the copy legible wherever the photo is bright. */
.fp-hero .fp-hero-overlay {
background: var(--fr-scrim-stacked);
}
.fp-offer-card {
max-width: none;
}
/* The offer card is below the buttons from here down — the chip brings the
discount into the first screen. */
.fp-hero-promo {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin: 0 0 18px;
padding: 8px 14px 8px 8px;
border-radius: 999px;
background-color: rgba(255, 255, 255, .82);
-webkit-backdrop-filter: blur(5px) saturate(140%);
backdrop-filter: blur(5px) saturate(140%);
border: 1px solid rgba(242, 168, 32, .6);
box-shadow: 0 0 34px -10px rgba(242, 168, 32, .55);
color: var(--text) !important;
font-family: 'Inter';
font-size: 14.5px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
}
.fp-hero-promo-value {
padding: 6px 11px;
border-radius: 999px;
background: linear-gradient(100deg, #F7C86B 0%, #F2A820 55%, #e29708 100%);
color: #24282e;
font-weight: 800;
letter-spacing: .01em;
}
.fp-hero-promo svg {
width: 15px;
height: 15px;
color: #F2A820;
}
/* ---------- sections ---------- */
.fp-promise-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fp-services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Every two-column row stacks at the same width, so the page reads as one
column from here down rather than some rows folding before others. */
.front-page .fp-split > .fp-inner,
.fp-audience > .fp-inner,
.fp-service-row,
.fp-awards-layout,
.fp-special > .fp-inner > .fp-special-layout {
grid-template-columns: minmax(0, 1fr);
column-gap: 0;
}
/* Left-aligned copy is only right beside the certificates; once it is above
them it centres like every other section header. */
.fp-awards-eyebrow,
.fp-awards-copy .fp-section-title,
.fp-awards-copy .fp-lead,
.fp-awards-copy .fp-awards-note {
text-align: center;
}
.fp-awards-copy .fp-lead,
.fp-awards-copy .fp-awards-note,
.fp-rating-cards {
margin-left: auto;
margin-right: auto;
max-width: 680px;
}
.fp-awards-copy .fr-btn {
display: flex;
width: max-content;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Certificates under the copy, centred. */
.fp-awards-media {
max-width: 560px;
margin: 0 auto;
}
.fp-audience-media img {
aspect-ratio: 16 / 10;
}
/* The header row stacks: a heading and a pair of arrows side by side leaves
the heading about 60% of an already narrow row. */
.front-page .fp-head--row {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* Nothing to stick to once the card is under the copy rather than beside it. */
.fp-special-cta {
position: static;
}
/* Copy first on every stacked row, including the ones that are
image-first on desktop. */
.fp-conviction > .fp-inner > figure,
.fp-audience > .fp-inner > figure {
order: 2;
}
.fp-conviction > .fp-inner > div,
.fp-audience > .fp-inner > div {
order: 1;
}
.fp-service-row + .fp-service-row {
margin-top: 2.25rem;
padding-top: 2.25rem;
}
.fp-pricing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.fp-pricing-grid .kosten-box > .kt-inside-inner-col,
.fp-pricing-grid .kosten-new-box > .kt-inside-inner-col {
padding: 32px 20px 28px !important;
}
.fp-steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fp-steps .kt-row-layout-overlay {
display: none;
}
.fp-marquee {
padding-top: 0;
}
/* The arrows are in the header now — no overhang to clear. */
/* The full-bleed rows become ordinary stacked rows: photo, then copy, with
the container gutter back on. The desktop height cap has to go with the
side-by-side layout it was capping — stacked, it would clip the copy. */
.front-page .fp-residen > .fp-inner {
grid-template-columns: minmax(0, 1fr);
max-height: none;
}
.fp-residen .fp-residen-text > .kt-inside-inner-col {
max-width: none !important;
margin: 0 !important;
padding: var(--fp-section-y) var(--fp-edge) !important;
}
.fp-residen .fp-residen-text {
order: 2;
}
.fp-residen .residen-left {
order: 1;
}
.fp-residen .residen-left img {
aspect-ratio: 16 / 9;
}
.fp-review {
padding: 26px 24px 24px;
}
}
@media only screen and (max-width: 767px) {
:root {
--fp-section-y: 2.5rem;
--fp-head-gap: 1.5rem;
}
.front-page .fp-split h2,
.fp-audience h2,
.fp-service-row h2,
.fp-residen h2 {
font-size: 23px;
}
/* ---------- hero (section 1, unchanged in scope) ---------- */
.fp-hero .fp-inner {
padding-top: 2rem;
}
/* Phone type in the banner: the tagline comes down from 22px so it fits two
lines rather than three; the lead and the list stay at 17px — the size
that is comfortable to read on a phone at arm's length. */
.fp-hero .fp-hero-sub {
margin-top: 12px;
font-size: 18px;
}
.fp-hero .fp-hero-lead {
font-size: 17px;
line-height: 1.6;
}
/* The shared stacked scrim (.88/.76/.88) all but hides the photograph on a
phone, where the banner is over a screen tall. Lighter at the top, behind
the chip and the 32px headline, which hold up on their own; as dark as
before from the list down, where the smaller type and the cards sit. */
.fp-hero .fp-hero-overlay {
background:
linear-gradient(180deg,
rgba(11, 14, 18, .58) 0%,
rgba(11, 14, 18, .7) 30%,
rgba(11, 14, 18, .84) 55%,
rgba(11, 14, 18, .9) 100%),
linear-gradient(120deg,
rgba(242, 168, 32, .12) 0%,
rgba(242, 168, 32, 0) 60%);
}
.fp-hero-offer {
width: 100%;
}
/* Rating badge first and full width: the number is the strongest trust
signal on the screen and should not be squeezed beside a second badge. */
.fp-badge--google {
flex-basis: 100%;
}
.fp-offer-assure {
margin-left: 20px;
margin-right: 20px;
}
/* Wraps to two lines on a phone; a full pill radius on two lines reads as
a blob, so it becomes a rounded card instead. */
.front-page .fp-google-summary {
border-radius: 14px;
}
/* One promise per row: two columns leaves ~150px per cell, which breaks
"Umzüge in ganz Berlin & Umgebung" across three lines. */
.fp-hero .banner-list {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
/* The four core promises only (price, insurance, call-back, experience):
all six push the WhatsApp button out of the first screen on a phone. The
other two are said again further down the page. */
.fp-hero .banner-list li:nth-child(n+5) {
display: none;
}
/* Both CTAs go full width and stack — side by side they would each be too
narrow for their label and the arrow would be clipped. */
.fp-hero-actions {
flex-direction: column;
align-items: stretch;
gap: 11px;
}
.fp-hero-btn {
justify-content: flex-start;
height: 56px;
padding: 0 18px;
}
.fp-hero-btn-arrow {
margin-left: auto;
}
.fp-badge {
flex: 1 1 auto;
}
.fp-offer-card {
padding: 0 0 24px;
border-radius: 14px;
}
/* The ribbon overhang and the inner gutter both come in, so the card keeps
its proportions rather than the ribbon swallowing a phone-width panel. */
.fp-offer-ribbon {
margin: -14px -8px 22px;
padding: 16px 18px;
}
.fp-offer-word {
letter-spacing: .1em;
}
.fp-offer-text {
margin-left: 20px;
margin-right: 20px;
}
.fp-offer-cta {
width: calc(100% - 40px);
margin: 0 20px;
padding: 15px 16px;
}
/* ---------- sections ---------- */
/* One card per row: two columns leaves the icon and the figure fighting
for about 140px of content width. */
/* Zwei Karten nebeneinander bleiben auch auf dem Telefon lesbar: Symbol,
Zahl und ein Stichwort brauchen keine volle Zeile, und vier gestapelte
Karten sind eine ganze Bildschirmhöhe für vier kurze Zusagen. */
.fp-promise-grid {
gap: 10px;
}
.fp-promise-item {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 18px 16px;
}
.fp-promise-icon {
width: 40px;
height: 40px;
border-radius: 12px;
}
.fp-promise-icon svg {
width: 20px;
height: 20px;
}
.fp-promise-item .kb-count-up-number {
font-size: 23px !important;
}
.fp-promise-word {
font-size: 15.5px;
}
.fp-promise-item .kb-count-up-title {
font-size: 13.5px;
}
.fp-pricing-grid,
.fp-steps-grid {
grid-template-columns: minmax(0, 1fr);
}
/* The tiles stay two-up on a phone. At one column, twelve of them at a 4/3
ratio is over three thousand pixels of scrolling for one section — and a
picture tile is still perfectly readable at half a phone's width. */
.fp-services-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.fp-tile-body {
padding: 32px 12px 12px;
}
.fp-tile-title {
font-size: 14px;
}
.fp-tile-arrow {
display: none;
}
.fp-steps-grid {
gap: 16px;
}
.front-page .would-row {
flex-direction: column;
gap: 16px;
margin-top: 2rem;
text-align: center;
}
.fp-cta-text {
font-size: 18px;
}
/* The middle price card is no longer the raised one when they are stacked —
there is nothing left or right of it to be raised against. */
.fp-pricing-grid .kosten-new-box > .kt-inside-inner-col {
padding: 32px 20px 28px !important;
}
.fp-review {
padding: 24px 20px 22px;
}
.fp-review-text {
margin-bottom: 18px;
}
.fp-audience-types {
grid-template-columns: minmax(0, 1fr);
}
/* Two platform cards side by side still fit at 360px: logo, a 30px
number, the stars and a short count. */
.fp-rating-cards {
gap: 10px;
margin-top: 18px;
}
.front-page .fp-rating-card {
gap: 4px;
padding: 11px 12px 10px;
border-radius: 12px;
}
.fp-rating-card-value {
font-size: 24px;
}
.fp-rating-card-stars {
font-size: 13px;
}
.fp-rating-card-link {
font-size: 13px;
white-space: nowrap;
}
.fp-rating-card-verb {
display: none;
}
/* Two-up on a phone too: each is ~170px wide, where the award name and
year are still legible. */
.fp-awards-grid {
gap: 12px;
}
.fp-award img {
border-radius: 10px;
}
.fp-slider-nav .slick-arrow {
width: 42px;
height: 42px;
}
}
@media (prefers-reduced-motion: reduce) {
.fp-hero-btn,
.fp-hero-btn-arrow,
.fp-badge,
.fp-offer-cta,
.fp-offer-cta-arrow,
.fp-promise-item,
.fp-promise-item::before,
.fp-promise-icon,
.fp-tile,
.fp-tile-media img,
.fp-tile-arrow,
.fp-steps-grid .works-box > .kt-inside-inner-col,
.fp-steps-grid .works-box figure,
.fp-review,
.fp-audience-types li,
.fp-slider-nav .slick-arrow {
transition: none;
}
.fp-hero-btn:hover,
.fp-badge:hover,
.fp-offer-cta:hover,
.fp-hero-btn:hover .fp-hero-btn-arrow,
.fp-offer-cta:hover .fp-offer-cta-arrow,
.fp-promise-item:hover,
.fp-tile:hover,
.fp-tile:hover .fp-tile-media img,
.fp-tile:hover .fp-tile-arrow,
.fp-steps-grid .works-box:hover > .kt-inside-inner-col,
.fp-review:hover,
.fp-slider-nav .slick-arrow:hover {
transform: none;
}
}