/*
 * Refresh 11/2026 – letzte CSS-Schicht nach custom.css.
 * Typografie, einheitliche Breiten (Nav, Inhalt, Footer), Buttons, Blog-Listen, Startseite.
 * Größen in rem/px, keine em.
 */

/* Schriften: alle benötigten Schnitte lokal (custom.css bindet nur Regular ein) */
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Regular.woff2') format('woff2'), url('../fonts/SourceSansPro-Regular.woff') format('woff');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Italic.woff2') format('woff2'), url('../fonts/SourceSansPro-Italic.woff') format('woff');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-SemiBold.woff2') format('woff2'), url('../fonts/SourceSansPro-SemiBold.woff') format('woff');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Bold.woff2') format('woff2'), url('../fonts/SourceSansPro-Bold.woff') format('woff');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../fonts/SourceSansPro-Black.woff2') format('woff2'), url('../fonts/SourceSansPro-Black.woff') format('woff');
    font-weight: 900; font-style: normal; font-display: swap;
}

:root {
    --ut-navy: #0b2a52;
    --ut-blue: #0e4f9e;
    --ut-sky: #79b0e8;
    --ut-surface: #f3f6fa;
    --ut-line: #e1e7ef;
    --ut-text: #2a3441;
    --ut-muted: #5b6878;
    --ut-page: 76rem;
    --ut-radius: 0.375rem;
}

/* ---------- Grundtypografie ---------- */

body, input, select, textarea {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
}

#main {
    color: var(--ut-text);
    border-radius: 0;
}

#main p {
    font-size: 1.0625rem;
    margin: 0 0 1.5rem 0;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    color: var(--ut-navy);
    font-weight: 700;
    letter-spacing: -0.01rem;
}

#main h1 { font-size: 2.5rem; line-height: 1.15; }
#main h2 { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem 0; }
#main h3 { font-size: 1.375rem; line-height: 1.3; margin: 0 0 0.75rem 0; }
#main h4 { font-size: 1.125rem; line-height: 1.35; }

#main strong, #main b {
    color: inherit;
    font-weight: 700;
}

#main a:hover { color: var(--ut-blue); }

/* Akzentlinie unter Abschnittsüberschriften */
h2:after,
#main h2:after,
#main header.major h2:after,
#main .list-title:after {
    background: var(--ut-blue);
    background-image: none;
    display: block;
    content: '';
    width: 3rem;
    height: 3px;
    margin: 0.875rem 0 1.5rem 0;
    border-radius: 2px;
}

a:focus-visible, .button:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--ut-sky);
    outline-offset: 2px;
}

/* ---------- Breiten: Nav, Inhalt und Footer gleich breit ---------- */

#wrapper,
body.blog #wrapper {
    width: var(--ut-page);
    max-width: calc(100% - 4rem);
}

@media screen and (max-width: 480px) {
    #wrapper, body.blog #wrapper { max-width: calc(100% - 2rem); }
}

@media screen and (max-width: 360px) {
    #wrapper, body.blog #wrapper { max-width: 100%; }
}

#main .container {
    width: calc(100% - 6rem);
    max-width: none;
}

@media screen and (max-width: 980px) {
    #main .container { width: calc(100% - 3rem); }
}

@media screen and (max-width: 480px) {
    #main .container { width: calc(100% - 2rem); }
}

/* ---------- Hintergrund und Kopfbereich ---------- */

/* Abdunklung, damit weiße Schrift auf dem Gebäudefoto lesbar bleibt */
#blurred-image-container:after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(11, 42, 82, 0.55) 0%, rgba(11, 42, 82, 0.3) 35%, rgba(11, 42, 82, 0.8) 100%);
}

#header.alt {
    padding: 3rem 2rem 3rem 2rem;
}

#header.alt .logo {
    margin: 0 0 1.75rem 0;
}

#header.alt h1 {
    color: #fff;
    font-weight: 900;
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.02rem;
    max-width: 32ch;
    margin: 0 auto 1rem auto;
    text-shadow: 0 2px 24px rgba(11, 42, 82, 0.35);
}

#header .header-lead,
#header .header-lead p {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1875rem;
    line-height: 1.5;
    max-width: 44rem;
    margin: 0 auto;
    letter-spacing: 0;
}

@media screen and (max-width: 768px) {
    #header.alt { padding: 2rem 1.25rem 2rem 1.25rem; }
    #header .header-lead, #header .header-lead p { font-size: 1.0625rem; }
}

/* ---------- Navigation ---------- */

#nav {
    width: var(--ut-page);
    max-width: calc(100% - 4rem);
    padding: 0.75rem 1.5rem;
    background-color: #fff;
    border-bottom: 1px solid var(--ut-line);
    border-radius: 0.5rem 0.5rem 0 0;
}

#nav + #main {
    padding-top: 4rem;
}

@media screen and (max-width: 768px) {
    #nav + #main { padding-top: 0; }
}

#nav ul li {
    margin: 0 0.125rem;
}

#nav ul li a {
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 1rem;
    border-radius: var(--ut-radius);
    color: var(--ut-navy);
    font-size: 1rem;
    font-weight: 600;
}

#nav ul li a:hover {
    background-color: var(--ut-surface);
    color: var(--ut-blue);
}

#nav ul li.active a,
#nav ul li.active a:hover {
    background-color: var(--ut-blue);
    color: #fff;
}

#nav.alt {
    background-color: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 var(--ut-line), 0 8px 24px rgba(11, 42, 82, 0.08);
    border-radius: 0;
    padding: 0.5rem 1.5rem;
}

#nav.alt ul li a {
    font-size: 0.9375rem;
}

.j_badge {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    top: -0.375rem;
    right: -0.375rem;
    font-size: 0.75rem;
    border: 0;
    background: var(--ut-sky);
    color: var(--ut-navy);
}

/* ---------- Buttons ---------- */

#main .button,
#footer .button {
    height: auto;
    line-height: 1.2;
    min-width: 0;
    padding: 0.8rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--ut-radius);
    border-bottom: 0;
}

#main .button {
    box-shadow: inset 0 0 0 2px var(--ut-blue);
}

/* main.css setzt .button { color: #fff !important } – im weißen Inhalt unsichtbar */
#main .button:not(.special) {
    color: var(--ut-blue) !important;
}

#main .button:not(.special):hover {
    background-color: var(--ut-surface);
    color: var(--ut-navy) !important;
}

#main .button.special {
    border-radius: var(--ut-radius);
    box-shadow: none;
}

#main .button.special:hover {
    background: var(--ut-navy) !important;
    color: #fff !important;
    opacity: 1;
}

#main ul.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0;
    margin: 0 0 1rem 0;
}

#main ul.actions li {
    padding: 0;
    margin: 0;
}

/* ---------- Startseite ---------- */

.homemain .main {
    padding: 4rem 0 3rem 0;
    border-top: 1px solid var(--ut-line);
}

.homemain .main:first-child {
    border-top: 0;
}

.video_frame_detail {
    border-radius: var(--ut-radius);
}

/* Zertifikate: in Farbe, gleich hoch, sauberes Raster */
.zerts ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    gap: 0;
    padding: 1.25rem 0;
    margin: 0 0 2.5rem 0;
    border: 1px solid var(--ut-line);
    border-radius: var(--ut-radius);
    list-style: none;
}

.zerts li {
    width: auto;
    padding: 0 1rem;
    border-right: 1px solid var(--ut-line);
    text-align: center;
}

.zerts img {
    -webkit-filter: none;
    filter: none;
    max-width: 100%;
    max-height: 6rem;
    width: auto;
}

@media screen and (max-width: 640px) {
    .zerts ul { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
    .zerts li:nth-child(2n) { border-right: 0; }
}

/* Über uns */
#main .spotlight .image {
    border: 0;
    background: none;
    border-radius: var(--ut-radius);
    overflow: hidden;
}

#main .spotlight .image img {
    border-radius: var(--ut-radius);
}

/* Services */
#main ul.statistics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    margin: 2rem 0 2.5rem 0;
    padding: 0;
    list-style: none;
}

#main ul.statistics li {
    background: none;
    padding: 0;
    margin: 0;
    width: auto;
    text-align: left;
    color: var(--ut-text);
    box-shadow: none;
}

#main ul.statistics li:before {
    display: none;
}

#main ul.statistics li img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ut-radius);
    background: var(--ut-surface);
}

#main ul.statistics li p {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
}

#main ul.statistics li strong {
    font-size: 1.25rem;
    color: var(--ut-navy) !important;
    margin: 1rem 0 0.375rem 0;
}

@media screen and (max-width: 768px) {
    #main ul.statistics { grid-template-columns: 1fr; }
}

/* Blog-News */
.blog_news_content {
    padding: 4rem 0 4rem 0;
    border-top: 1px solid var(--ut-line);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.news-item a {
    display: block;
    border: 0;
    color: var(--ut-navy);
}

.news-item img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ut-radius);
}

#main .news-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0.875rem 0 0 0;
}

#main .news-item a:hover h3 {
    color: var(--ut-blue);
}

@media screen and (max-width: 980px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 560px) {
    .news-grid { grid-template-columns: 1fr; }
}

/* ---------- Blog, Kategorien (Jobs, FAQ) ---------- */

#main .list-title {
    font-size: 2.25rem;
    margin: 0;
}

.teaser {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 1.75rem;
    padding: 2rem 0;
    border-top: 1px solid var(--ut-line);
}

.blog article.teaser {
    margin-bottom: 0;
    border-bottom: 0;
}

.teaser:first-child {
    border-top: 0;
    padding-top: 0.5rem;
}

.teaser:not(:has(.teaser-image)) {
    grid-template-columns: 1fr;
}

.teaser-image {
    display: block;
    border: 0;
}

.teaser-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--ut-radius);
}

.teaser-date {
    display: block;
    font-size: 0.875rem;
    color: var(--ut-muted);
    margin-bottom: 0.25rem;
}

#main .teaser-title,
.blog #main .teaser-title {
    font-size: 1.375rem;
    line-height: 1.25;
    margin: 0 0 0.5rem 0;
    padding: 0;
}

#main .teaser-title:after {
    display: none;
}

#main .teaser-title a {
    border: 0;
    color: var(--ut-navy);
    font-size: inherit;
    font-weight: 700;
}

#main .teaser-title a:hover {
    color: var(--ut-blue);
}

#main .teaser-text {
    font-size: 1rem;
    margin: 0 0 1rem 0;
}

.teaser-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}

#main .teaser-more {
    padding: 0.55rem 1.1rem;
    font-size: 0.9375rem;
}

#main .teaser-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

#main .teaser-tags li {
    margin: 0;
    padding: 0;
}

#main .teaser-tags a {
    display: block;
    padding: 0.2rem 0.75rem;
    border: 0;
    border-radius: 1rem;
    background: var(--ut-surface);
    color: var(--ut-navy);
    font-size: 0.875rem;
}

#main .teaser-tags a:hover {
    background: #e4ebf5;
}

@media screen and (max-width: 640px) {
    .teaser { grid-template-columns: 1fr; gap: 1rem; }
}

/* Einzelner Beitrag */
#main .blogpost {
    font-size: clamp(1.625rem, 2.4vw, 2rem);
    line-height: 1.2 !important; /* custom.css setzt line-height: inherit !important */
    letter-spacing: -0.01rem;
    color: var(--ut-navy) !important;
    margin: 1.5rem 0 1.25rem 0;
}

.article-content img {
    border-radius: var(--ut-radius);
}

/* Sidebar: helle Fläche, Suche mit Button, Aktuelles mit Datum, Themen als Chips */
.blog-sidebar {
    background: var(--ut-surface);
    border-radius: 0.5rem;
    padding: 1.75rem 1.5rem;
    margin-top: 0.5rem;
}

.sidebar-block + .sidebar-block {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ut-line);
}

#main .sidebar-heading {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ut-navy);
    margin: 0 0 0.875rem 0;
}

#main .sidebar-heading:after {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sidebar-search {
    display: flex;
    background: #fff;
    border: 1px solid var(--ut-line);
    border-radius: var(--ut-radius);
    overflow: hidden;
}

.sidebar-search:focus-within {
    border-color: var(--ut-blue);
    box-shadow: 0 0 0 3px rgba(14, 79, 158, 0.15);
}

#main .sidebar-search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    padding: 0 0.875rem;
    border: 0;
    background: transparent;
    color: var(--ut-text);
    font-size: 1rem;
    outline: 0;
    box-shadow: none;
}

#main .sidebar-search button {
    flex: 0 0 2.75rem;
    min-width: 0;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 0;
    background: var(--ut-blue);
    box-shadow: none;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main .sidebar-search button:hover {
    background: var(--ut-navy);
}

.sidebar-recent,
.sidebar-topics {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main .sidebar-recent li {
    margin: 0;
    padding: 0;
}

#main .sidebar-recent a {
    display: block;
    padding: 0.625rem 0 0.625rem 0.875rem;
    border: 0;
    border-left: 3px solid transparent;
    color: var(--ut-text);
    line-height: 1.35;
}

#main .sidebar-recent li + li a {
    border-top: 0;
}

#main .sidebar-recent time {
    display: block;
    font-size: 0.8125rem;
    color: var(--ut-muted);
    margin-bottom: 0.125rem;
}

#main .sidebar-recent span {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ut-navy);
}

#main .sidebar-recent a:hover {
    border-left-color: var(--ut-sky);
}

#main .sidebar-recent a:hover span {
    color: var(--ut-blue);
}

#main .sidebar-recent .is-current a {
    border-left-color: var(--ut-blue);
}

#main .sidebar-all {
    display: inline-block;
    margin: 0.75rem 0 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ut-blue);
    border-bottom: 1px solid rgba(14, 79, 158, 0.35);
}

.sidebar-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#main .sidebar-topics li {
    margin: 0;
    padding: 0;
}

#main .sidebar-topics a {
    display: block;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--ut-line);
    border-radius: 1rem;
    background: #fff;
    color: var(--ut-navy);
    font-size: 0.875rem;
    line-height: 1.4;
}

#main .sidebar-topics a:hover {
    border-color: var(--ut-sky);
    color: var(--ut-blue);
}

#main .sidebar-topics a.is-current {
    background: var(--ut-blue);
    border-color: var(--ut-blue);
    color: #fff;
}

@media screen and (max-width: 767px) {
    .blog-sidebar { margin-top: 2.5rem; }
}

/* Mobiles Menü: in jedem Zustand lesbar (auf Foto und beim Scrollen) */
#navPanelToggle,
#navPanelToggle:hover,
#navPanelToggle:focus,
#navPanelToggle:active {
    color: #fff;
    background-color: rgba(11, 42, 82, 0.6);
    border-radius: var(--ut-radius);
    border-bottom: 0;
}

#navPanelToggle.alt,
#navPanelToggle.alt:hover,
#navPanelToggle.alt:focus,
#navPanelToggle.alt:active {
    color: var(--ut-navy);
    background-color: #fff;
}

/* Seiten mit Titelbild (page.php): Bild direkt unter der Navigation, ohne Section-Padding */
#main > .main:has(> .img_responsive:first-child) {
    padding-top: 0;
}

#main > .main > .img_responsive:first-child {
    margin-top: 0;
}

/* Linke Seitenleiste (page.php, z. B. Qualität & Sicherheit): Sprungmarken, mitlaufend.
   In der Flex-Zeile wird die Spalte sonst auf volle Höhe gestreckt und sticky greift nicht. */
@media (min-width: 992px) {
    #main .sidebar_left.sticky-lg-top {
        align-self: flex-start;
        top: 5.5rem;
    }
}

#main .go-to ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--ut-line);
}

#main .go-to ul li {
    margin: 0;
    padding: 0;
}

#main .go-to ul li a {
    display: block;
    margin-left: -2px;
    padding: 0.4rem 0 0.4rem 1rem;
    border: 0;
    border-left: 2px solid transparent;
    color: var(--ut-navy);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
}

#main .go-to ul li a:hover {
    border-left-color: var(--ut-blue);
    color: var(--ut-blue);
}

#main .go-to .topicon {
    padding-top: 1.5rem;
    color: var(--ut-muted);
}

@media (max-width: 991px) {
    #main .sidebar_left {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    #main .go-to .topicon {
        display: none;
    }
}

/* Beitragstext (blog-post.php): klare Hierarchie h2/h3, Listen, Tabellen */
#main .article-content h2 {
    font-size: 1.625rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--ut-navy) !important;
    margin: 2.5rem 0 0.75rem 0;
}

#main .article-content h2:after {
    display: none;
}

#main .article-content h3 {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 1.75rem 0 0.5rem 0;
}

#main .article-content p,
#main .article-content ul,
#main .article-content ol {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0 0 1.25rem 0;
}

#main .article-content ul,
#main .article-content ol {
    padding-left: 1.25rem;
}

#main .article-content li {
    padding-left: 0.25rem;
    margin-bottom: 0.375rem;
}

#main .article-content a {
    color: var(--ut-blue);
    border-bottom: 1px solid rgba(14, 79, 158, 0.35);
}

#main .article-content a:hover {
    border-bottom-color: transparent;
}

#main .article-content table {
    width: 100%;
    margin: 0 0 1.75rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

#main .article-content th,
#main .article-content td {
    padding: 0.75rem 0.875rem;
    color: var(--ut-text);
    background: #fff;
    border-bottom: 1px solid var(--ut-line);
    text-align: left;
    vertical-align: top;
}

#main .article-content thead th {
    background: var(--ut-navy);
    color: #fff;
    font-weight: 600;
}

#main .article-content tbody tr:nth-child(even) td {
    background: var(--ut-surface);
}

@media screen and (max-width: 640px) {
    #main .article-content table { display: block; overflow-x: auto; }
}

.post-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: var(--ut-muted);
}

/* Kontaktformular (contactform.php) */
.contact-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-form .form-group {
    margin: 0;
}

.contact-form .form-group--full {
    grid-column: 1 / -1;
}

@media screen and (max-width: 640px) {
    .contact-form .form-grid { grid-template-columns: 1fr; }
}

#main .contact-form label {
    display: block;
    margin: 0 0 0.375rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ut-navy);
}

#main .contact-form input[type="text"],
#main .contact-form input[type="email"],
#main .contact-form select,
#main .contact-form textarea {
    width: 100%;
    background-color: #fff;
    border: 1px solid #c9d4e2;
    border-radius: var(--ut-radius);
    color: var(--ut-text);
    font-size: 1rem;
    box-shadow: none;
}

#main .contact-form input[type="text"],
#main .contact-form input[type="email"],
#main .contact-form select {
    height: 3rem;
    padding: 0 0.875rem;
}

#main .contact-form select {
    padding-right: 2.5rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230b2a52' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 0.75rem auto;
}

#main .contact-form textarea {
    padding: 0.75rem 0.875rem;
    min-height: 11rem;
    resize: vertical;
}

#main .contact-form input:focus,
#main .contact-form select:focus,
#main .contact-form textarea:focus {
    border-color: var(--ut-blue);
    box-shadow: 0 0 0 3px rgba(14, 79, 158, 0.15);
    outline: 0;
}

#main .contact-form .form-control.contact_form_inputerror {
    border-color: #c62828;
    background-color: #fff6f6;
}

.contact_form_errortext {
    margin: 0 0 1.5rem 0;
    padding: 0.75rem 1rem;
    border-left: 3px solid #c62828;
    border-radius: var(--ut-radius);
    background: #fff6f6;
    color: #8e1c1c;
    font-weight: 600;
}

.contact-form .form-consent {
    margin: 0 0 1.5rem 0;
}

#main .contact-form .form-consent input[type="checkbox"] + label:before {
    background: #fff;
    border-color: #c9d4e2;
    border-radius: var(--ut-radius);
}

#main .contact-form .form-consent input[type="checkbox"]:checked + label:before {
    background: var(--ut-blue);
    border-color: var(--ut-blue);
    color: #fff;
}

#main .contact-form .form-consent input[type="checkbox"]:focus-visible + label:before {
    outline: 2px solid var(--ut-sky);
    outline-offset: 2px;
}

#main .contact-form .form-consent label {
    font-weight: 400;
    color: var(--ut-text);
}

#main .contact-form .form-consent .ds {
    font-size: 0.875rem;
    line-height: 1.5;
}

#main .contact-form .contact-submit {
    min-width: 12rem;
    border: 0;
    font-family: inherit;
    font-size: 1.0625rem;
}

/* Rechte Spalte Kontakt: wie die Blog-Sidebar, plus Kontaktliste und Zertifikate */
.contact-aside {
    background: var(--ut-surface);
    border-radius: 0.5rem;
    padding: 1.75rem 1.5rem;
    margin-top: 0.5rem;
}

@media screen and (max-width: 991px) {
    .contact-aside { margin-top: 2.5rem; }
}

#main .contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main .contact-list li {
    margin: 0 0 1rem 0;
    padding: 0;
    color: var(--ut-text);
    font-size: 1rem;
    line-height: 1.5;
}

#main .contact-list li:last-child {
    margin-bottom: 0;
}

.contact-list-label {
    display: block;
    font-size: 0.8125rem;
    color: var(--ut-muted);
}

#main .contact-list a {
    color: var(--ut-navy);
    font-weight: 600;
    border-bottom: 1px solid rgba(14, 79, 158, 0.3);
}

#main .contact-list a:hover {
    color: var(--ut-blue);
    border-bottom-color: transparent;
}

.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.cert-grid img {
    display: block;
    width: 100%;
    height: 4.75rem;
    object-fit: contain;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid var(--ut-line);
    border-radius: var(--ut-radius);
}

.cert-grid img:last-child {
    grid-column: 1 / -1;
}

/* ---------- Footer: dunkle Fläche, bündig mit dem Inhalt ---------- */

#footer {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 2rem 4rem;
    width: 100%;
    margin: 0 0 3rem 0;
    padding: 3.5rem 3rem 1.5rem 3rem;
    background: var(--ut-navy);
    border-radius: 0 0 0.5rem 0.5rem;
    color: rgba(255, 255, 255, 0.8);
}

#footer > * {
    width: auto;
    margin: 0;
}

#footer h2 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

#footer h2:after {
    background: var(--ut-sky);
}

#footer p,
#footer dd,
#footer dt {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
}

#footer a {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

#footer a:hover {
    border-bottom-color: transparent;
}

#footer .button {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
    color: #fff;
    background: transparent;
}

#footer .button:hover {
    background: rgba(255, 255, 255, 0.1);
}

#footer .copyright {
    grid-column: 1 / -1;
    margin: 1rem 0 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}

@media screen and (max-width: 980px) {
    #footer {
        grid-template-columns: 1fr;
        padding: 2.5rem 1.5rem 1rem 1.5rem;
    }
}