@font-face {
font-display: swap;
font-family: 'IM Fell DW Pica';
font-style: normal;
font-weight: 400;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/im-fell-dw-pica-v16-latin-regular.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/im-fell-dw-pica-v16-latin-regular.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'IM Fell DW Pica';
font-style: italic;
font-weight: 400;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/im-fell-dw-pica-v16-latin-italic.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/im-fell-dw-pica-v16-latin-italic.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'Karla';
font-style: normal;
font-weight: 400;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-regular.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-regular.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'Karla';
font-style: italic;
font-weight: 400;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-italic.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-italic.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'Karla';
font-style: normal;
font-weight: 500;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-500.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-500.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'Karla';
font-style: normal;
font-weight: 600;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-600.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-600.ttf) format('truetype');
} @font-face {
font-display: swap;
font-family: 'Karla';
font-style: normal;
font-weight: 700;
src: url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-700.woff2) format('woff2'),
url(//hanshooss.de/wp-content/themes/urbanist/assets/fonts/karla-v33-latin-700.ttf) format('truetype');
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
.main-container {
opacity: 0;
transition: opacity 0.2s ease;
}
.main-container.is-loaded {
opacity: 1;
} :root { --c-bg: #ffffff;
--c-text: #111111;
--c-muted: #555555;
--c-line: #dddddd; --c-accent: #5579fc; --c-focus: var(--c-accent); --radius: 10px; --ff-text: "IM Fell DW Pica", Georgia, "Times New Roman", sans-serif;
--ff-heading: "Karla", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --c-link: var(--c-text);
--c-link-hover: var(--c-accent);
--c-link-underline: color-mix(in srgb, var(--c-text), transparent 55%);
--c-link-underline-hover: var(--c-link-hover); --c-field-bg: transparent;
--c-field-text: var(--c-text);
--c-field-border: var(--c-line);
--c-field-border-hover: color-mix(in srgb, var(--c-text), transparent 55%);
--c-field-placeholder: color-mix(in srgb, var(--c-text), transparent 55%);
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-focus), transparent 70%);
} html[data-theme="dark"],
body[data-theme="dark"] {
--c-bg: #111111;
--c-text: #f7f7f5;
--c-muted: color-mix(in srgb, var(--c-text), transparent 35%);
--c-line: color-mix(in srgb, var(--c-text), transparent 75%);
--c-accent: #9aa36a;
--c-focus: var(--c-accent);
--c-link: var(--c-text);
--c-link-underline: color-mix(in srgb, var(--c-text), transparent 60%);
--c-field-bg: transparent;
--c-field-text: var(--c-text);
--c-field-border: color-mix(in srgb, var(--c-text), transparent 70%);
--c-field-border-hover: color-mix(in srgb, var(--c-text), transparent 55%);
--c-field-placeholder: color-mix(in srgb, var(--c-text), transparent 60%);
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--c-focus), transparent 72%);
}  html {
font-size: 62.5%;
color-scheme: light dark;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: var(--ff-text);
background: var(--c-bg);
color: var(--c-text);
font-size: 62.5%;
line-height: 1.55;
transition: background-color 0.25s ease, color 0.25s ease;
}
picture,
img {
max-width: 100%;
height: auto;
}
hr {
border: 0;
border-top: 1px solid var(--c-line);
margin: 2.5em 0;
}
strong {
font-weight: 600;
}
em {
font-style: italic;
} @media (prefers-reduced-motion: reduce) {
* {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
} :focus-visible {
outline: 1px dotted var(--c-focus);
outline-offset: 2px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 1px dotted var(--c-focus);
outline-offset: 2px;
}  a {
color: var(--c-link);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
text-decoration-color: var(--c-link-underline);
}
a:hover {
color: var(--c-link-hover);
text-decoration-color: var(--c-link-underline-hover);
}
.site-header a {
text-decoration: none;
} .entry-content a {
color: var(--c-link);
text-decoration: underline;
text-decoration-color: var(--c-link-underline);
text-underline-offset: 0.15em;
text-decoration-thickness: 0.09em;
}
.entry-content .portfolio-card__link,
.entry-content h2 a,
.entry-content .uagb-button__wrapper a {
text-decoration: none;
}
.entry-content a:hover {
color: var(--c-link-hover);
text-decoration-color: var(--c-link-underline-hover);
} .entry-content a {
text-decoration-skip-ink: auto;
}  button,
input,
textarea,
select {
font: inherit;
color: inherit;
} input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
width: 100%;
max-width: 100%;
background: var(--c-field-bg);
color: var(--c-field-text);
border: 1px solid var(--c-field-border);
border-radius: var(--radius);
padding: 0.75em 0.9em;
line-height: 1.2;
} input::placeholder,
textarea::placeholder {
color: var(--c-field-placeholder);
opacity: 1;
} input[type="text"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
border-color: var(--c-field-border-hover);
} input:focus-visible,
textarea:focus-visible,
select:focus-visible {
border-color: var(--c-focus);
box-shadow: var(--shadow-focus);
} textarea {
min-height: 12rem;
resize: vertical;
} input[type="checkbox"],
input[type="radio"] {
accent-color: var(--c-accent);
} button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link {
display: inline-block;
background: transparent;
color: var(--c-text);
border: 1px solid var(--c-line);
border-radius: var(--radius);
padding: 0.7em 1em;
cursor: pointer;
text-decoration: none;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover {
border-color: var(--c-text);
}
button.portfolio-filter {
font-family: 'Karla';
} form>*+* {
margin-top: 1.2em;
}
label {
display: inline-block;
margin-bottom: 0.4em;
font-family: var(--ff-heading);
font-weight: 600;
} .wrap {
width: min(200rem, 100% - 3.2rem);
margin-inline: auto;
}
.site-header,
.site-footer {
padding-block: 2.4rem;
}
.site-footer {
margin-bottom: 3vh;
}
#site-main {
padding: 0 0 3.2em;
}
@media (max-width: 1350px) {
#site-main {
padding-block-start: 0;
}
}
.project-breadcrumb {
font-size: 2.8rem;
margin: 0 0 2em 0;
} .site-header {
padding: 1.5rem 0 0;
}
.site-title {
display: inline-block;
text-decoration: none;
color: inherit;
font-weight: 500;
}
.site-header h1 {
display: inline-block;
font-size: clamp(5rem, 8vw, 11rem);
font-weight: 600;
font-family: var(--ff-heading);
text-transform: uppercase;
letter-spacing: 0.025em;
line-height: 1.05;
padding: 2rem 0 0 0;
transform-origin: center;
}
.site-header .site-claim {
font-size: clamp(1.8rem, 4vw, 4rem);
font-size: 2.8rem;
line-height: 1.2;
display: block;
margin-top: 0em;
padding: 0 0 1.5em 0;
font-weight: 400;
font-family: Karla;
} .theme-toggle {
background: none;
border: 0;
font-size: clamp(3rem, 4vw, 4rem);
cursor: pointer;
color: var(--c-text);
padding: 0.25em;
font-family: var(--ff-heading);
}
.theme-toggle:hover {
color: red;
} .entry-content {
text-wrap: pretty;
}
.entry-content p,
cite em {
margin: 0 0 1rem 0;
font-size: clamp(1.85rem, 2.5vw, 2.2rem);
}
p,
li {
letter-spacing: 0.01em;
line-height: 1.3;
}
.schmaler-fliesstext>* {
max-width: 50rem;
line-height: 1.6;
}
.site-footer p {
font-family: var(--ff-heading);
font-size: clamp(1.4rem, 1.2vw + 0.4rem, 1.6rem);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--ff-heading);
font-weight: 400;
line-height: 1.15;
margin: 0;
}
.error404 .site-main p,
h1.entry-title,
.entry-content h1 {
font-size: clamp(3.5rem, 4.5vw, 4.5rem);
margin: 0 0 0.5em 0;
font-weight: 600;
}
.entry-content h1.wp-block-heading {
font-size: clamp(3.5rem, 4.5vw, 4.5rem);
font-weight: 600;
}
.wp-block-uagb-advanced-heading .uagb-heading-text,
.entry-content h2 {
font-size: clamp(3.5rem, 4.5vw, 4.5rem);
font-weight: 600;
margin-top: 6rem;
margin-bottom: 3rem;
}
.entry-content .projektgruppe h2 {
margin-bottom: 1.5rem;
}
.entry-content h2.wp-block-heading.halbe-breite strong {
font-weight: normal;
font-size: clamp(1.6rem, 1.2vw + 0.8rem, 2.2rem);
}
h2.wp-block-heading.wie-h1 {
font-size: clamp(3.5rem, 4.5vw, 4.5rem);
margin: 1.5em 0 0.5em 0;
}
.portfolio-archive h2 {
margin-bottom: 1.5em;
font-weight:normal;
}
.portfolio-archive h2 strong {
font-weight: bold;
font-style: italic;
}
.entry-content h3 {
font-size: clamp(1.7rem, 2.5vw, 2.35rem);
font-weight: normal;
margin-top: 1.8em;
margin-bottom: 0.15em;
}
.entry-content h4 {
font-size: clamp(1.6rem, 1.2vw + 0.8rem, 2.2rem);
margin-top: 1.8em;
font-weight: 500;
}
.entry-content h5 {
font-size: clamp(1.85rem, 2.5vw, 2.2rem);
font-style: italic;
}
.entry-content .wp-block-uagb-buttons .uagb-block-d6f822ca .uagb-buttons-repeater .uagb-button__link {
color: #ffffff;
font-size: clamp(2.1rem, 1vw + 1.8rem, 2.5rem) !important;
} .entry-content>* {
margin-block: 0;
}
.entry-content>*+* {
margin-bottom: 0.4em;
}
.entry-content .wp-block-group,
.entry-content .wp-block-columns,
.entry-content .wp-block-cover {
margin-block: 0;
}
.entry-content figure {
margin: 0;
}
.entry-content figcaption {
font-family: var(--ff-text);
font-size: 1.8rem;
line-height: 1.4;
color: var(--c-muted);
margin-top: 0.5em;
opacity: 0.9;
} .entry-content .alignwide {
width: min(144rem, 100% - 0);
margin-inline: auto;
}
.entry-content .alignfull {
width: 100%;
margin-inline: 0;
}
.entry-content .alignwide,
.entry-content .alignfull {
margin-top: 3.5em;
margin-bottom: 3.5em;
}
:where(.is-layout-grid) {
gap: 7em;
}
.entry-content .textblock {
max-width: 100rem;
}
.entry-content .halbe-breite {
max-width: 50vw;
font-size: clamp(2.4rem, 8vw, 7rem);
}
.entry-content .projektgruppe h2.halbe-breite {
font-size: clamp(2.4rem, 5vw, 5.5rem);
}
.entry-content .halbe-breite.has-fit-text {
max-width: 80rem;
} ul,
ol {
padding-left: 1.2em;
margin: 0;
}
li {
margin: 0 0 0.5em 0;
font-size: clamp(1.6rem, 1.2vw + 0.8rem, 2.2rem);
} .site-nav {
margin-top: 0.8rem;
margin-bottom: 5em;
}
.page-id-2838 .site-nav {
margin-bottom: 2em;
}
@media (max-width: 1000px) {
.site-nav {
margin-top: 0;
margin-bottom: 1.5em;
}
.site-header h1 {
padding: 0;
}
.entry-content h2 {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
}
.site-nav ul,
.site-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.site-nav-list {
display: flex;
flex-direction: row;
gap: 2rem;
flex-wrap: wrap;
}
@media (max-width: 795px) {
.site-nav-list {
flex-direction: column;
gap: 2rem;
flex-wrap: wrap;
}
}
#menu-fotografie li,
#menu-hauptnavigation li {
margin-bottom: 0;
font-family: var(--ff-heading);
font-weight: 500;
background: #000;
color: white;
padding: .3em 1em;
text-transform: uppercase;
font-size: 2.8rem;
}
.site-nav a,
.site-nav-list a {
color: inherit;
text-decoration: none;
border-bottom: none;
background: #000;
}
.is-project-single #menu-item-2840,
#menu-fotografie .current-menu-item,
#menu-hauptnavigation .current-menu-item,
#menu-fotografie li:hover,
#menu-fotografie li:hover a,
#menu-hauptnavigation li:hover,
#menu-hauptnavigation li:hover a,
.site-nav .current-menu-item a,
.site-nav-list a:hover,
.site-nav-list a:focus-visible {
text-decoration: none;
color: white;
background: #5579fc;
}
.wp-block-buttons {
gap: 2rem;
}
.wp-block-buttons .wp-block-button {
border: none;
border-radius: none;
background: black;
padding: 0;
}
.wp-block-buttons .wp-block-button a.wp-block-button__link {
font-size: 20px;
border: none;
font-family: Karla;
color: white;
text-transform: uppercase;
padding: .25em .5em;
border-radius: 0;
}
.wp-block-buttons .wp-block-button a.wp-block-button__link:hover {
background: #5579fc;
text-decoration: none;
} .wrap .entry-content .wp-block-image {
margin-top: 2.5em;
margin-bottom: 2.5em;
}
.entry-content .wp-block-image img,
.entry-content .wp-block-image picture {
display: block;
width: auto
}
.entry-content .wp-block-columns {
gap: 1.92rem;
margin-top: 3em;
margin-bottom: 3em;
}
.entry-content .wp-block-columns .wp-block-image {
margin: 0;
}
.entry-content .wp-block-image+.wp-block-image {
margin-top: 3em;
}
#site-main .wp-block-uagb-image-gallery,
#site-main .wp-block-gallery {
--wp--style--unstable-gallery-gap: var(--wp--style--gallery-gap-default, var(--gallery-block--gutter-size, var(--wp--style--block-gap, 0.5em)));
gap: 4rem;
}
@media (min-width: 70rem) {
.entry-content .wp-block-columns.is-layout-flex {
gap: 1.6rem;
}
} .hh-block-slider {
margin: 8em 0;
}
.entry-content .alignfull.projektgruppe {
max-height: 100svh;
display: flex;
flex-direction: column;
gap: 1rem;
padding-block: 1.5rem;
box-sizing: border-box;
margin-bottom: 10rem;
}
.projektgruppe .wp-block-image {
margin: 0;
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
}
.projektgruppe .wp-block-image img, 
.projektgruppe .wp-block-image image {
display: block;
width: 100%;
height: auto;
max-height: calc(100svh - 12rem);
object-fit: contain;
}
.projektgruppe .wp-block-image img,
.projektgruppe .wp-block-image picture {
display: block;
width: 100%;
height: auto;
max-height: calc(100svh - 16rem);
object-fit: contain;
}
#site-main blockquote {
margin-left: 0;
}
.wp-block-group> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 900px;
margin-left: 0;
margin-right: 0;
}
.wp-block-columns.alignwide {
max-width: 1400px !important;
width: min(calc(100vw - 6rem), 1400px);
margin-left: 0;
margin-right: 0;
gap: 6rem !important;
column-gap: 4rem;
}
@media (max-width: 1190px) {
.page-id-303 .wp-block-columns.alignwide {
max-width: 1400px !important;
width: min(100vw, 1400px);
margin-left: 0 !important;
margin-right: 0 !important;
gap: 6rem !important;
column-gap: 4rem;
flex-direction: column-reverse;
}
.page-id-303 .schmaler-fliesstext .wp-block-uagb-tabs {
width: 100%;
max-width: min(119rem, 100%);
}
.uagb-tabs__wrap .uagb-tabs__body-wrap {
position: relative;
max-width: min(119rem, 100% - 3rem);
padding: 10px;
}
.uagb-tabs__wrap.uagb-tabs__vstyle6-tablet ul.uagb-tabs__panel,
.uagb-tabs__wrap.uagb-tabs__vstyle7-tablet ul.uagb-tabs__panel,
.uagb-tabs__wrap.uagb-tabs__vstyle8-tablet ul.uagb-tabs__panel,
.uagb-tabs__wrap.uagb-tabs__vstyle9-tablet ul.uagb-tabs__panel,
.uagb-tabs__wrap.uagb-tabs__vstyle10-tablet ul.uagb-tabs__panel {
flex-direction: row;
}
.uagb-tabs__wrap.uagb-tabs__hstyle1-desktop ul.uagb-tabs__panel {
margin-bottom: 0;
padding: 0;
display: flex;
align-items: center;
flex-direction: row;
max-width: 100%;
flex-wrap: nowrap !important;
}
.uagb-tabs__wrap.uagb-tabs__vstyle6-tablet ul.uagb-tabs__panel {
max-width: min(119rem, 100% - 3rem);
min-width: min(119rem, 100% - 3rem);
}
.uagb-tabs__wrap.uagb-tabs__vstyle6-tablet .uagb-tabs__body-wrap {
max-width: min(119rem, 100% - 2rem);
}
.uagb-tabs__wrap.uagb-tabs__vstyle6-tablet {
flex-direction: column !important;
}
.page-id-2419 .wp-block-spacer {
display: none;
}
.entry-content .alignfull.projektgruppe {
max-height: 100svh;
display: flex;
flex-direction: column;
gap: 1rem;
padding-block: 1.5rem;
box-sizing: border-box;
margin-bottom: 3rem;
}
.entry-content .halbe-breite {
max-width: 100%;
font-size: clamp(2.4rem, 8vw, 7rem);
}
}
.wp-block-group.projektgruppe.alignfull {
max-width: 2000px;
width: min(100vw, 2000px -2rem);
margin-left: 0;
margin-right: 0;
}
.wp-block-group.projektgruppe.alignfull.is-layout-constrained>* {
max-width: none;
}
.is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
margin-left: 0 !important;
margin-right: 0 !important;
} .footer-widgets {
margin-top: 4em;
padding-top: 2em;
border-top: 1px solid var(--c-line);
display: grid;
gap: 2em;
} .footer-widget-title {
font-family: var(--ff-heading);
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.6em;
} .footer-widget {
font-size: 1.4rem;
line-height: 1.4;
color: var(--c-muted);
} .footer-widget a {
color: inherit;
}
.footer-widget a:hover {
color: var(--c-link-hover);
} @media (min-width: 60rem) {
.footer-widgets {
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
}
.spectra-image-gallery__media-thumbnail-caption {
font-size: 3rem !important;
}
.wp-block-uagb-tabs > .uagb-tabs__body-wrap {
border: none !important;
}
.uagb-tab {
background: black;
color: white;
}
.uagb-tabs__active {
color: white;
background: #5579fc;
}
.uagb-tab a {
text-decoration: none !important;
font-family: 'Karla';
}
.uagb-tabs__wrap .uagb-tabs__body-wrap {
position: relative;
max-width: 100%;
padding: 10px 0 0 0;
}
.uagb-tabs__wrap .uagb-tabs__body-container {
padding: 10px 0;
display: none;
} .site-header h1:hover * {
color: var(--c-text);
} @media (max-width: 600px) {
#site-main {
padding-block: 1em;
}
.hh-block-slider {
margin: 2em 0;
}
}
@media only screen and (max-width: 976px) {
.uagb-block-c97bd486.uagb-buttons__outer-wrap .uagb-buttons__wrap {
justify-content: left;
align-items: left;
}
}
@media (max-width: 498px) { .wp-block-uagb-buttons .uagb-buttons__wrap.uagb-buttons-layout-wrap {
width: 100% !important;
flex-direction: column !important;
align-items: stretch !important; justify-content: flex-start !important;
gap: 1rem;
} .wp-block-uagb-buttons .wp-block-uagb-buttons-child,
.wp-block-uagb-buttons .wp-block-uagb-buttons-child .uagb-button__wrapper,
.wp-block-uagb-buttons .wp-block-uagb-buttons-child .uagb-buttons-repeater {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
} .wp-block-uagb-buttons .wp-block-uagb-buttons-child .wp-block-button__link {
display: block;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
}