:root {
--fx-text: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--fx-display: "Barlow Condensed", "Barlow", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--fx-ink: #15181B;
--fx-body: #3A4148;
--fx-muted: #6B737B;
--fx-line: #E3E6E9;
--fx-red: #C01722;
} body {
--wp--preset--font-size--small: 0.875rem;
--wp--preset--font-size--normal: 1rem;
--wp--preset--font-size--medium: 1.125rem;
--wp--preset--font-size--large: 1.6rem;
--wp--preset--font-size--larger: 2rem;
--wp--preset--font-size--huge: 2.4rem;
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
body {
--wp--preset--font-size--large: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
--wp--preset--font-size--larger: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
--wp--preset--font-size--huge: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem);
}
} html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body,
button,
input,
select,
textarea {
font-family: var(--fx-text);
font-weight: 400;
color: var(--fx-body);
}
body {
font-size: 16px;
line-height: 1.65;
text-rendering: optimizeLegibility;
-webkit-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
}
@media (min-width: 768px) {
body { font-size: 17px; }
}
p {
color: inherit;
font-size: inherit;
font-weight: 400;
line-height: 1.7;
margin: 0 0 1.1em;
}
strong, b { font-weight: 600; } @media (max-width: 600px) {
.entry-content p,
.entry-content li {
-webkit-hyphens: auto;
hyphens: auto;
}
} h1, h2, h3, h4, h5, h6 {
font-family: var(--fx-display);
font-weight: 700;
color: var(--fx-ink);
line-height: 1.15;
letter-spacing: 0.005em;
padding-bottom: 0;
margin: 0 0 0.55em;
word-wrap: break-word;
overflow-wrap: break-word;
text-wrap: balance;
}
h1 { font-size: 2.3rem; }
h2 { font-size: 1.95rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.3rem; font-weight: 600; }
h5 { font-size: 1.12rem; font-weight: 600; }
h6 {
font-family: var(--fx-text);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
h1 { font-size: clamp(2rem, 1.35rem + 2.8vw, 3.1rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.45rem); }
h3 { font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem); }
h4 { font-size: clamp(1.18rem, 1.08rem + 0.45vw, 1.4rem); }
} .entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > .wp-block-heading {
margin-top: 1.7em;
}
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child,
.entry-content > .wp-block-heading:first-child {
margin-top: 0;
} .entry-content p.has-large-font-size,
.entry-content p.has-larger-font-size,
.entry-content p.has-huge-font-size {
font-family: var(--fx-display);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.005em;
margin-bottom: 0.7em;
}
.entry-content p.has-medium-font-size { line-height: 1.65; } .entry-content p[style*="font-size:30px"] {
font-family: var(--fx-display);
font-weight: 600;
font-size: 1.45rem !important;
line-height: 1.25;
color: var(--fx-ink);
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
.entry-content p[style*="font-size:30px"] { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem) !important; }
}
.entry-content p[style*="font-size:30px"] > br:first-child { display: none; } .entry-content p:empty { display: none; }
.entry-content .wp-block-spacer { max-height: 64px; }
@media (max-width: 767px) {
.entry-content .wp-block-spacer { max-height: 36px; }
} .entry-content ul,
.entry-content ol {
padding-left: 1.25em;
margin: 0 0 1.4em;
}
.entry-content li { margin-bottom: 0.4em; line-height: 1.6; }
.entry-content ul li::marker { color: var(--fx-red); }
blockquote,
.wp-block-quote,
.wp-block-quote.is-style-large {
margin: 2em 0;
padding: 0.4em 0 0.4em 1.25em;
border: 0;
border-left: 4px solid var(--fx-red);
font-family: var(--fx-display);
font-size: 1.35rem;
font-style: normal;
font-weight: 600;
line-height: 1.3;
color: var(--fx-ink);
}
blockquote p { margin-bottom: 0.4em; }
blockquote cite,
.wp-block-quote cite {
font-family: var(--fx-text);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--fx-muted);
}
table, .wp-block-table table { font-size: 0.94em; }
th, td,
.wp-block-table th,
.wp-block-table td {
padding: 0.6em 0.8em;
border-color: var(--fx-line);
}
th { font-weight: 600; color: var(--fx-ink); }
figcaption,
.wp-element-caption,
.wp-caption-text {
font-size: 0.85rem;
line-height: 1.45;
color: var(--fx-muted);
margin-top: 0.6em;
}
hr, .wp-block-separator { margin: 2.6em 0; background: var(--fx-line); } .main-navigation a,
.main-navigation ul.menu li a {
font-family: var(--fx-text);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.015em;
color: var(--fx-ink);
}
.main-navigation li { padding: 0 16px; }
.main-navigation ul li ul { width: 220px; }
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
padding: 11px 18px;
color: var(--fx-body);
}
@media screen and (max-width: 768px) {
#masthead .menu-primary-container li a,
#masthead .nav-menu li a {
font-size: 16px;
font-weight: 500;
padding: 14px 0;
color: var(--fx-ink);
border-bottom-color: var(--fx-line);
}
}
#site-title a { font-family: var(--fx-display); font-weight: 700; }
#site-description { font-size: 14px; color: var(--fx-muted); } .big-slider .entry-title {
font-family: var(--fx-display);
font-weight: 700;
font-size: 2.6rem;
line-height: 1.02;
letter-spacing: 0.02em;
padding-bottom: 0;
margin-bottom: 0.6em;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
.big-slider .entry-title { font-size: clamp(1.5rem, 0.9rem + 3.2vw, 3.6rem); }
}
.slider-button {
font-family: var(--fx-text);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
padding: 13px 24px;
border-width: 2px;
}
@media screen and (max-width: 600px) {
.slider-button { font-size: 12px; letter-spacing: 0.1em; padding: 9px 14px; }
}
@media screen and (max-width: 400px) {
.big-slider .entry-title { margin-bottom: 0.35em; }
.slider-button { font-size: 11px; padding: 6px 10px; }
} .header-post-title-container { padding: 34px 0; }
.header-post-title-class {
font-family: var(--fx-display);
font-weight: 700;
font-size: 2rem;
line-height: 1.1;
letter-spacing: 0.01em;
margin: 0;
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
.header-post-title-class { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); }
}
.breadcrumb { font-size: 14px; font-weight: 400; margin-top: 10px; }
@media (min-width: 900px) {
.header-post-title-container { padding: 46px 0; }
} .main-wrapper > .single-page > .inner-wrap,
.single-page { margin-top: 0; }
.main-wrapper .inner-wrap { padding-top: 56px; padding-bottom: 24px; }
@media (max-width: 767px) {
.main-wrapper .inner-wrap { padding-top: 36px; padding-bottom: 8px; }
}
.entry-content > *:last-child { margin-bottom: 0; } .hentry .entry-title {
font-size: 1.65rem;
line-height: 1.15;
padding-bottom: 0;
margin-bottom: 0.4em;
}
@supports (font-size: clamp(1rem, 1vw, 2rem)) {
.hentry .entry-title { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
}
.hentry .entry-title a { color: var(--fx-ink); font-weight: 700; }
.entry-meta { font-size: 14px; padding-bottom: 18px; color: var(--fx-muted); }
.entry-meta a { color: var(--fx-muted); font-weight: 400; }
article.post { padding-bottom: 48px; margin-bottom: 48px; border-bottom: 1px solid var(--fx-line); }
article.post:last-of-type { border-bottom: 0; }
.single article.post { border-bottom: 0; margin-bottom: 0; }
.read-btn a {
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 11px 20px;
border-width: 2px;
border-radius: 4px;
}
.related-posts-wrapper .entry-title { font-size: 1.2rem; } #secondary .widget,
#tertiary .widget { padding-bottom: 44px; }
#secondary .widget-title,
#tertiary .widget-title {
font-family: var(--fx-display);
font-size: 1.3rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.2;
margin-bottom: 18px;
padding-bottom: 0;
}
#secondary .widget-title::after,
#tertiary .widget-title::after {
content: "";
display: block;
width: 30px;
height: 3px;
margin-top: 10px;
background: var(--fx-red);
}
#secondary .widget,
#tertiary .widget { font-size: 15px; line-height: 1.5; }
#secondary .widget li,
#tertiary .widget li { margin-bottom: 4px; }
#secondary .widget li a,
#tertiary .widget li a { padding-bottom: 2px; font-weight: 500; }
#secondary .post-date,
#tertiary .post-date { display: block; font-size: 13px; color: var(--fx-muted); margin-bottom: 8px; }
.wp-calendar-table { font-size: 14px; }
@media (max-width: 767px) {
#secondary { margin-top: 24px; padding-top: 36px; border-top: 1px solid var(--fx-line); }
} input[type="text"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
font-size: 16px; line-height: 1.4;
color: var(--fx-ink);
padding: 11px 13px;
border: 1px solid #CFD4D9;
border-radius: 5px;
background-color: #fff;
margin-bottom: 20px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
border-color: var(--fx-red);
outline: 0;
box-shadow: 0 0 0 3px rgba(192, 23, 34, 0.15);
}
input.s { font-size: 16px; height: auto; }
label { font-size: 15px; font-weight: 500; color: var(--fx-ink); }
.ample-button,
input[type="reset"],
input[type="button"],
input[type="submit"],
button:not(.fx-cookie-knopf):not(.menu-toggle):not(.cmplz-btn),
.wp-block-button__link {
font-family: var(--fx-text);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.3;
padding: 12px 26px;
border-radius: 5px;
} #colophon .fx-col__titel { font-family: var(--fx-display); font-size: 15px; letter-spacing: 0.12em; }
#colophon .fx-kontakt__firma { font-family: var(--fx-display); font-size: 19px; font-weight: 700; }
#colophon.fx-footer {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}