.city-why .section__intro,
.city-services .section__intro,
.city-fields .section__intro {
text-align: center;
}
.city-why .section__intro > h2,
.city-why .section__intro > p,
.city-services .section__intro > h2,
.city-services .section__intro > p,
.city-fields .section__intro > h2,
.city-fields .section__intro > p {
margin-inline: auto;
}
.city-hero__badge,
.city-why__item p,
.city-services__card-name,
.city-services__card-text,
.city-services__more-label,
.city-services__name,
.city-services__text,
.city-fields .section__intro > p,
.city-fields__title,
.city-fields__item p,
.city-callout__points li,
.city-rates li,
.city-proof__label,
.city-proof__outro,
.city-nearby__name {
-webkit-hyphens: none;
hyphens: none;
}
@media (min-width: 1024px) {
.city-hero__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
gap: clamp(3rem, 5vw, 5rem);
}
}
.city-hero__content {
max-width: 40rem;
}
.city-hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
padding: 0.4rem 0.85rem 0.4rem 0.7rem;
border: 1px solid rgb(255 255 255 / 0.18);
border-radius: var(--radius-pill);
background-color: rgb(255 255 255 / 0.05);
font-size: var(--font-size-sm);
color: rgb(255 255 255 / 0.9);
line-height: 1.35;
}
.city-hero__badge-icon {
flex-shrink: 0;
width: 1rem;
height: 1rem;
color: var(--color-blue-light);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.city-hero__points {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.city-hero__map {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
}
.city-map {
width: auto;
height: auto;
max-width: 100%;
max-height: min(36rem, calc(100svh - 20rem));
}
@media (max-width: 1023.98px) {
.city-hero__grid {
gap: var(--space-5);
}
.city-hero__map {
order: -1;
}
.city-map {
max-height: clamp(10rem, 34vw, 22rem);
}
}
.city-map__kreis {
fill: none;
stroke: var(--color-blue-light);
stroke-opacity: 0.7;
stroke-width: 2.6;
stroke-linejoin: round;
stroke-linecap: round;
}
.city-map__area {
fill: var(--color-blue-light);
fill-opacity: 0.16;
stroke: var(--color-blue-light);
stroke-opacity: 0.7;
stroke-width: 2.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.city-map--mit-kreis .city-map__area {
fill-opacity: 0.24;
stroke-opacity: 0.95;
}
.city-map__guide {
stroke: rgb(255 255 255 / 0.12);
stroke-width: 2;
stroke-dasharray: 16 16;
}
.city-map__rahmen {
position: relative;
display: grid;
}
.city-map__name {
position: absolute;
left: var(--x);
top: min(var(--y), calc(100% - 0.7rem));
translate: -50% -50%;
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.08em;
color: var(--color-blue-light);
white-space: nowrap;
text-shadow: 0 0 4px var(--color-bg), 0 0 9px var(--color-bg);
pointer-events: none;
}
.city-map__rahmen-name {
position: absolute;
left: 50%;
top: 0;
translate: -50% 0;
margin: 0;
font-size: 0.6875rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.55);
white-space: nowrap;
text-shadow: 0 0 4px var(--color-bg), 0 0 9px var(--color-bg);
pointer-events: none;
}
@media (max-width: 1023.98px) {
.city-map__area {
stroke-width: 9;
fill-opacity: 0.24;
stroke-opacity: 0.85;
}
.city-map__guide {
stroke-width: 7;
stroke-dasharray: 56 56;
}
}
@media (prefers-reduced-motion: no-preference) {
.city-map__area {
stroke-dasharray: 1;
animation:
city-map-draw 1.6s var(--easing-standard) 350ms backwards,
city-map-fill var(--duration-slower) var(--easing-standard) 1150ms backwards;
}
.city-map__kreis {
stroke-dasharray: 1;
animation: city-map-draw 1.3s var(--easing-standard) 150ms backwards;
}
.city-map__guide {
animation: city-map-guides var(--duration-slower) var(--easing-premium) 120ms backwards;
}
.city-map__name {
animation: city-map-name var(--duration-slower) var(--easing-standard) 1750ms backwards;
}
.city-map__rahmen-name {
animation: city-map-name var(--duration-slower) var(--easing-standard) 1500ms backwards;
}
}
@keyframes city-map-draw {
from { stroke-dashoffset: 1; }
to   { stroke-dashoffset: 0; }
}
@keyframes city-map-fill {
from { fill-opacity: 0; }
}
@keyframes city-map-name {
from { opacity: 0; }
}
@keyframes city-map-guides {
from { opacity: 0; }
}
.city-why__grid {
list-style: none;
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
padding: 0;
}
.city-why__item {
display: grid;
align-content: start;
min-width: 0;
padding: var(--space-6);
border-radius: var(--radius-xl);
border: 1px solid rgb(1 1 1 / 0.07);
background-color: var(--color-white);
box-shadow: 0 18px 48px rgb(1 1 1 / 0.07), 0 2px 6px rgb(1 1 1 / 0.04);
transition: translate var(--duration-base) var(--easing-premium),
box-shadow var(--duration-base) var(--easing-premium),
border-color var(--duration-base) var(--easing-premium);
}
.city-why__icon {
width: 1.75rem;
height: 1.75rem;
margin-bottom: var(--space-5);
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.city-why__title {
font-size: clamp(1.375rem, 1.05rem + 0.65vw, 1.75rem);
font-weight: 500;
line-height: 1.25;
}
.city-why__item p {
margin-top: var(--space-3);
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text-muted);
}
@media (min-width: 640px) {
.city-why__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7) var(--space-6);
}
.city-why__item {
padding: var(--space-7);
}
.city-why__item:hover,
.city-why__item:focus-within {
translate: 0 -5px;
border-color: rgb(61 154 211 / 0.35);
box-shadow: 0 24px 60px rgb(1 1 1 / 0.10), 0 3px 10px rgb(1 1 1 / 0.05);
}
}
@media (min-width: 1100px) {
.city-why__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.city-why__item {
padding: var(--space-5);
}
.city-why__title {
font-size: clamp(1.0625rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 1.3;
}
.city-why__item p {
font-size: var(--font-size-sm);
line-height: 1.55;
}
}
@media (min-width: 640px) and (max-width: 1099.98px) {
.city-why__grid--3 > .city-why__item:last-child {
grid-column: 1 / -1;
}
}
@media (min-width: 1100px) {
.city-why__grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.city-services__featured {
list-style: none;
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
padding: 0;
}
.city-services__card {
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--space-3);
height: 100%;
min-width: 0;
padding: var(--space-6);
border-radius: var(--radius-xl);
text-decoration: none;
color: var(--color-text);
background-color: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.09);
box-shadow: 0 2px 8px rgb(0 0 0 / 0.35);
transition: translate var(--duration-base) var(--easing-premium),
background-color var(--duration-base) var(--easing-premium),
border-color var(--duration-base) var(--easing-premium);
}
.city-services__card-name {
font-size: clamp(1.375rem, 1.05rem + 0.65vw, 1.75rem);
font-weight: 500;
line-height: 1.25;
}
.city-services__card-text {
font-size: var(--font-size-base);
line-height: 1.6;
color: var(--color-text-muted);
}
.city-services__card-arrow {
width: 1.5rem;
height: 1.5rem;
justify-self: start;
margin-top: var(--space-2);
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--duration-base) var(--easing-premium);
}
@media (min-width: 640px) {
.city-services__featured {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-7) var(--space-6);
}
.city-services__card {
padding: var(--space-7);
}
.city-services__card:hover,
.city-services__card:focus-visible {
translate: 0 -5px;
background-color: rgb(255 255 255 / 0.07);
border-color: rgb(61 154 211 / 0.45);
}
.city-services__card:hover .city-services__card-arrow,
.city-services__card:focus-visible .city-services__card-arrow {
transform: rotate(45deg);
}
}
@media (min-width: 1100px) {
.city-services__featured {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.city-services__card {
padding: var(--space-5);
}
.city-services__card-name {
font-size: clamp(1.0625rem, 0.75rem + 0.42vw, 1.25rem);
line-height: 1.3;
}
.city-services__card-text {
font-size: var(--font-size-sm);
line-height: 1.55;
}
}
.city-services__more {
margin-top: var(--space-8);
padding-top: var(--space-7);
border-top: 1px solid var(--color-border);
}
.city-services__more-label {
margin-bottom: var(--space-4);
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.62);
}
.city-services__list {
list-style: none;
padding: 0;
}
.city-services__row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3) var(--space-5);
padding: var(--space-5) 0;
border-top: 1px solid var(--color-border);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--duration-base) var(--easing-standard),
color var(--duration-base) var(--easing-standard);
}
.city-services__list li:last-child .city-services__row {
border-bottom: 1px solid var(--color-border);
}
.city-services__name {
font-size: var(--font-size-md);
font-weight: 500;
line-height: var(--line-height-tight);
}
.city-services__text {
grid-column: 1;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.city-services__arrow {
grid-column: 2;
grid-row: 1 / -1;
width: 1.5rem;
height: 1.5rem;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--duration-base) var(--easing-premium);
}
.city-services__row:hover,
.city-services__row:focus-visible {
background-color: rgb(255 255 255 / 0.05);
}
.city-services__row:hover .city-services__arrow,
.city-services__row:focus-visible .city-services__arrow {
transform: rotate(45deg);
}
@media (min-width: 900px) {
.city-services__row {
grid-template-columns: minmax(0, 20rem) minmax(0, 1fr) auto;
align-items: baseline;
padding-inline: var(--container-padding);
margin-inline: calc(-1 * var(--container-padding));
}
.city-services__text {
grid-column: 2;
}
.city-services__arrow {
grid-column: 3;
grid-row: 1;
align-self: center;
}
}
.city-fields__list {
list-style: none;
display: grid;
gap: var(--space-7);
margin-top: var(--space-8);
padding: 0;
counter-reset: none;
}
.city-fields__item {
min-width: 0;
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.city-fields__num {
display: block;
font-size: var(--font-size-sm);
font-weight: 500;
letter-spacing: 0.08em;
color: color-mix(in srgb, var(--color-blue-dark) 85%, black);
}
.city-fields__title {
margin-top: var(--space-2);
font-size: var(--font-size-md);
font-weight: 500;
line-height: var(--line-height-tight);
}
.city-fields__item p {
margin-top: var(--space-3);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.city-fields__link {
margin-top: var(--space-4);
}
@media (min-width: 900px) {
.city-fields__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-8);
}
.city-fields__item--wide {
grid-column: 1 / -1;
}
.city-fields__item--wide .city-fields__title,
.city-fields__item--wide p {
max-width: 34rem;
}
}
.city-callout__layout {
display: grid;
gap: 0;
}
.city-callout__intro {
text-align: center;
margin-bottom: 0;
}
.city-callout__eyebrow {
justify-content: center;
max-width: fit-content;
margin-inline: auto;
margin-bottom: var(--space-4);
}
.city-callout__intro h2 {
font-size: clamp(1.75rem, 1.35rem + 2.2vw, 3.25rem);
max-width: 30ch;
margin-inline: auto;
}
.city-callout .city-callout__lede {
max-width: 44rem;
margin-top: var(--space-6);
margin-inline: auto;
font-size: var(--font-size-md);
line-height: 1.6;
color: rgb(255 255 255 / 0.72);
}
.city-callout.section--light .city-callout__lede {
color: var(--color-text-muted);
}
.city-callout__points {
list-style: none;
display: grid;
gap: 1rem;
max-width: 44rem;
margin: var(--space-8) auto 0;
padding: 0;
}
.city-callout__points li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--space-4);
min-width: 0;
min-height: 5.5rem;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-lg);
background-color: rgb(255 255 255 / 0.045);
border: 1px solid rgb(255 255 255 / 0.09);
font-size: var(--font-size-md);
line-height: 1.4;
}
.city-callout__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background-color: rgb(61 154 211 / 0.12);
}
.city-callout__icon .icon {
width: 1.375rem;
height: 1.375rem;
color: var(--color-blue-light);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.city-callout__link,
.trust-certs__memberships .service-link,
.city-fields__link {
min-height: 44px;
}
.city-proof__outro a:not(.btn),
.city-callout__lede a:not(.btn) {
display: inline-block;
padding-block: 0.75rem;
}
.city-callout__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4) var(--space-6);
margin-top: var(--space-7);
}
.city-rates {
list-style: none;
margin-top: var(--space-6);
padding: 0;
}
.city-rates li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
column-gap: var(--space-4);
row-gap: var(--space-1);
padding-block: var(--space-3);
border-top: 1px solid var(--color-border);
color: var(--color-gray);
}
.city-rates li:last-child {
border-bottom: 1px solid var(--color-border);
}
.city-rates__service {
font-weight: 500;
}
.city-rates__note {
font-weight: var(--font-weight-regular);
color: rgb(59 73 86 / 0.82);
}
.city-rates__range {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.city-rates__einordnung {
grid-column: 1 / -1;
font-size: var(--font-size-sm);
line-height: var(--line-height-snug);
color: rgb(59 73 86 / 0.8);
}
@media (min-width: 900px) {
.city-rates {
grid-column: 1;
}
.service-price__box {
align-self: center;
}
}
.city-trust .section__intro {
text-align: center;
}
.city-trust .section__intro > p {
margin-inline: auto;
}
.city-trust .section__intro h2 {
max-width: 36ch;
margin-inline: auto;
}
.city-trust__quotes {
display: grid;
gap: var(--space-6);
margin-top: var(--space-8);
}
@media (min-width: 900px) {
.city-trust__quotes {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
.city-trust__quotes .testimonial {
height: 100%;
}
.city-trust__quotes .testimonial:only-child {
grid-column: 1 / -1;
width: calc((100% - var(--space-6)) / 2);
margin-inline: auto;
}
}
.city-proof__grid {
list-style: none;
display: grid;
gap: 0;
margin-top: var(--space-8);
padding: 0;
}
@media (min-width: 1024px) {
.city-proof__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.city-proof__grid > li + li {
border-left: 1px solid var(--color-border);
}
}
.city-proof__item {
display: grid;
align-content: start;
height: 100%;
min-width: 0;
padding: var(--space-5) 0;
border-top: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
.city-proof__item {
padding: var(--space-6) var(--space-6) var(--space-5);
}
}
.city-proof__icon {
width: 2.5rem;
height: 2.5rem;
justify-self: center;
margin-bottom: var(--space-5);
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.city-proof .section__intro,
.city-proof__item {
text-align: center;
}
.city-proof .section__intro h2 {
margin-inline: auto;
}
.city-proof__label {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
letter-spacing: normal;
line-height: var(--line-height-heading);
text-wrap: balance;
}
.city-proof__outro {
max-width: 52rem;
margin-top: var(--space-8);
margin-inline: auto;
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
font-size: var(--font-size-md);
color: var(--color-text-muted);
text-align: center;
text-wrap: balance;
}
.city-nearby__intro {
text-align: center;
}
.city-nearby__intro h2,
.city-nearby .city-nearby__intro > p {
margin-inline: auto;
}
.city-nearby__list {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-top: var(--space-7);
padding: 0;
}
.city-nearby__tile {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
color: var(--color-text);
text-decoration: none;
transition: background-color var(--duration-base) var(--easing-standard),
border-color var(--duration-base) var(--easing-standard);
}
.city-nearby__name {
font-size: var(--font-size-md);
font-weight: 500;
}
.city-nearby__pin {
width: 1rem;
height: 1rem;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
}
.city-nearby__arrow {
width: 1rem;
height: 1rem;
color: var(--color-accent);
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform var(--duration-base) var(--easing-premium);
}
a.city-nearby__tile:hover,
a.city-nearby__tile:focus-visible {
background-color: var(--color-blue-light);
border-color: var(--color-blue-light);
color: var(--color-white);
}
a.city-nearby__tile:hover .city-nearby__pin,
a.city-nearby__tile:focus-visible .city-nearby__pin,
a.city-nearby__tile:hover .city-nearby__arrow,
a.city-nearby__tile:focus-visible .city-nearby__arrow {
color: currentColor;
}
a.city-nearby__tile:hover .city-nearby__arrow,
a.city-nearby__tile:focus-visible .city-nearby__arrow {
transform: rotate(45deg);
}
.city-nearby__tile--mention {
border-style: dashed;
color: var(--color-text-muted);
}
.city-nearby__tile--mention .city-nearby__pin {
color: var(--color-text-muted);
}
.city-nearby__title {
font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
}
.city-certs .trust-certs {
margin-top: 0;
padding-top: 0;
border-top: none;
}
.city-certs .section__intro {
text-align: center;
}
.city-certs .section__intro h2 {
max-width: 30ch;
margin-inline: auto;
}
.city-certs .section__intro > p {
margin-inline: auto;
}
@media (max-width: 767.98px) {
.page-city .pixel-seam {
--pixel-band-h: 80px;
}
.page-city .section {
padding-block: var(--space-8);
}
.page-city .pixel-seam + .section {
padding-top: calc(var(--space-8) + 80px);
}
.page-city .pixel-seam + .conversion {
padding-top: 80px;
}
.page-city .city-hero {
padding-block: var(--space-8) var(--space-9);
}
@media (max-width: 639.98px) {
.city-hero .service-hero__actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.city-hero .service-hero__actions .btn {
width: 100%;
justify-content: center;
}
}
@media (max-width: 639.98px) {
.city-callout__actions {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.city-callout__link {
justify-content: center;
}
}
@media (max-width: 639.98px) {
.city-callout__actions .btn {
width: 100%;
justify-content: center;
white-space: normal;
}
}
.city-callout__intro h2,
.city-callout .city-callout__lede {
max-width: none;
}
.city-services__row {
min-height: 44px;
padding-block: var(--space-4);
}
.city-fields__list {
gap: var(--space-6);
}
}