*, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html {
background: var(--tief);
}
body {
margin: 0;
background: var(--weiss);
color: var(--dunkel);
font-family: var(--font-text);
-webkit-font-smoothing: antialiased; overflow-x: clip;
} @media (max-width: 820px) {
.brlbs-cmpnt-widget { bottom: calc(64px + 8px) !important; } #ht-ctc-chat {
top: auto !important;
left: auto !important;
right: 21px !important;
bottom: calc(64px + 14px + 60px + 12px) !important;
}
} body:has(.ht-chat[data-offen="1"]) #ht-ctc-chat { display: none !important; }
h1, h2, h3 {
font-family: var(--font-titel);
margin: 0;
letter-spacing: -0.03em;
font-weight: 700;
line-height: 1.08; overflow-wrap: break-word;
}
p { margin: 0; }
a { color: var(--akz-dunkel); text-decoration: none; }
a:hover { color: var(--akz); }
img { max-width: 100%; } :focus-visible {
outline: 2px solid var(--akz);
outline-offset: 3px;
} .ht-huelle {
max-width: var(--breite);
margin: 0 auto;
padding: 0 var(--rand);
width: 100%;
} .ht-marke {
font-size: var(--t-label);
font-weight: 600;
letter-spacing: 0.2em;
color: var(--akz-dunkel);
margin-bottom: 16px;
}
[data-ton="dunkel"] .ht-marke { color: var(--akz); } .ht-marke--strich {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 22px;
}
.ht-marke--strich::before {
content: "";
width: 28px;
height: 1px;
background: currentColor;
display: block;
} .ht-nr {
font-family: var(--font-mono);
font-size: 11.5px;
letter-spacing: .16em;
color: var(--grau);
}
[data-ton="dunkel"] .ht-nr { color: var(--grau-hell); } .ht-knopf {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-text);
font-weight: 600;
font-size: 16px;
padding: 17px 30px;
border: 1px solid transparent;
border-radius: var(--radius);
white-space: nowrap;
cursor: pointer;
transition: transform var(--schnell) var(--ease),
box-shadow .25s ease,
background .25s ease,
border-color .25s ease,
color .25s ease;
}
.ht-knopf svg { flex: 0 0 auto; } .ht-knopf--primaer {
background: var(--akz-verlauf);
color: var(--dunkel);
border-color: transparent;
}
.ht-knopf--primaer:hover {
color: var(--dunkel);
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(var(--akz-rgb), .4);
} .ht-knopf--rahmen {
background: transparent;
color: var(--weiss);
border-color: var(--linie-dunkel);
}
.ht-knopf--rahmen:hover {
color: var(--weiss);
border-color: var(--akz);
background: rgba(var(--akz-rgb), .08);
} .ht-knopf--massiv {
background: var(--dunkel);
color: var(--weiss);
border-color: var(--dunkel);
}
.ht-knopf--massiv:hover {
background: var(--akz);
border-color: var(--akz);
color: var(--dunkel);
} .ht-knopf--akzent {
background: transparent;
color: var(--akz);
border-color: var(--akz);
}
.ht-knopf--akzent:hover {
background: var(--akz);
color: var(--dunkel);
}
.ht-knopf--s { font-size: 14.5px; padding: 11px 20px; }
.ht-knopf--m { font-size: 15px;   padding: 15px 26px; } .ht-nur-mobil   { display: none !important; }
.ht-nur-desktop { display: flex; }
@media (max-width: 820px) {
.ht-nur-desktop { display: none !important; }
.ht-nur-mobil   { display: flex !important; }
} .ht-sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
} [data-zeig] { transition: opacity var(--ruhig) var(--ease), transform var(--ruhig) var(--ease); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
} .ht-wischhinweis {
display: none; align-items: center; gap: 8px;
margin: 0 0 16px;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: .16em; color: var(--grau-hell);
}
[data-ton="hell"] .ht-wischhinweis { color: var(--grau); }
@media (max-width: 820px) {
[data-wisch] {
display: flex !important;
flex-direction: row !important;
grid-template-columns: none !important;
flex-wrap: nowrap !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px !important;
max-width: none !important;
margin: 0 calc(var(--rand) * -1) !important;
padding: 10px var(--rand) 14px !important;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
[data-wisch]::-webkit-scrollbar { display: none; }
[data-wisch] > * {
flex: 0 0 86% !important;
min-width: 0 !important;
scroll-snap-align: start;
} [data-wisch="projekte"] > .ht-proj__eintrag {
border: 1px solid var(--linie-dunkel) !important;
padding: 20px !important;
background: rgba(255, 255, 255, .03); grid-template-rows: auto 1fr;
}
[data-wisch="projekte"] .ht-proj__text { display: flex; flex-direction: column; }
[data-wisch="projekte"] .ht-proj__daten { margin-bottom: 26px; }
[data-wisch="projekte"] .ht-proj__cta { margin-top: auto; }
.ht-wischhinweis { display: flex; }
} .ht-fliess {
max-width: 76ch;
margin: 0 auto;
padding: var(--luft) var(--rand);
color: var(--grau);
font-size: var(--t-text);
line-height: 1.7;
}
.ht-fliess > * + * {
margin-top: 1.1em;
}
.ht-fliess h2 {
margin-top: 2.4em;
color: var(--tief);
font-family: var(--font-titel);
font-size: var(--t-titel-s);
line-height: 1.25;
}
.ht-fliess h2:first-child {
margin-top: 0;
}
.ht-fliess h3 {
margin-top: 1.8em;
color: var(--tief);
font-size: var(--t-lead);
}
.ht-fliess a {
color: var(--akz-dunkel);
text-decoration: underline;
text-underline-offset: 2px;
}
.ht-fliess ul {
margin-left: 1.2em;
list-style: disc;
}
.ht-fliess li + li {
margin-top: .4em;
} .ht-form { position: relative; display: flex; flex-direction: column; gap: 22px; }
.ht-form__paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; }
.ht-form__feld { display: flex; flex-direction: column; gap: 8px; }
.ht-form__feld label { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--silber); }
.ht-form__feld label span { color: var(--akz); }
.ht-form input,
.ht-form textarea {
width: 100%;
background: rgba(255, 255, 255, .04);
border: 1px solid var(--linie-dunkel);
color: var(--weiss);
padding: 14px 16px;
font-family: var(--font-text);
font-size: 16px;
border-radius: var(--radius);
transition: border-color var(--schnell) ease, background var(--schnell) ease;
}
.ht-form textarea { line-height: 1.5; resize: vertical; }
.ht-form input:focus,
.ht-form textarea:focus {
outline: none;
border-color: var(--akz);
background: rgba(var(--akz-rgb), .06);
} .ht-form[data-geprueft="1"] input:invalid,
.ht-form[data-geprueft="1"] textarea:invalid { border-color: #C4564A; }
.ht-form__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 4px; }
.ht-form__hinweis { font-size: 13.5px; color: var(--grau-hell); max-width: 280px; line-height: 1.5; }
.ht-form__oder { margin-top: -10px; font-size: 13.5px; line-height: 1.5; color: var(--grau-hell); }
.ht-kontakt__dank {
border: 1px solid var(--akz);
background: rgba(var(--akz-rgb), .08);
padding: 38px 32px;
}
.ht-kontakt__dank h3 { font-size: 1.4rem; color: var(--weiss); margin-bottom: 12px; letter-spacing: -0.02em; }
.ht-kontakt__dank p { font-size: 1rem; line-height: 1.62; color: var(--silber); } .ht-form__falle {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.ht-form__fehler {
flex-basis: 100%;
margin-top: .6rem;
color: #E06A5C;
font-size: var(--t-klein);
}