body {
    font-family: 'Open Sans', sans-serif;
    color: #252525;
}

/* Bootstrap 5 underlines links by default, Bootstrap 4 only on hover */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a, a:hover {
    color: #000;
}

/* text links in the page content in the heading green; tiles, pagination and buttons keep their own colours */
main a:not(.btn, .focus-item, .page-link) {
    color: #076600;
}

main a:not(.btn, .focus-item, .page-link):hover {
    color: #054d00;
}

.btn-success {
    --bs-btn-bg: #076600;
    --bs-btn-border-color: #076600;
    --bs-btn-hover-bg: #054d00;
    --bs-btn-hover-border-color: #054d00;
    --bs-btn-active-bg: #054d00;
    --bs-btn-active-border-color: #054d00;
    font-weight: 600;
}

a.btn-success, a.btn-success:hover {
    color: #fff;
    text-decoration: none;
}

h1 {
    font-size: 23px;
    font-weight: bold;
}

h2, .h2 {
    font-size: 15px;
    font-weight: bold;
}

h3, .h3 {
    color: #076600;
    font-size: 27px;
    font-weight: bold;
}

h4, .h4, .h5, .h6 {
    color: inherit;
}

h4, .h4 {
    font-size: 18px;
    font-weight: bold;
}

/* service cards: white, green top line, icon in a light green circle, lift on hover */
.service-card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: .75rem;
    border-top: 4px solid #076600;
    box-shadow: 0 .25rem 1rem rgba(7, 102, 0, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .75rem 1.5rem rgba(7, 102, 0, .15);
}

.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #e8f4e7;
    color: #076600;
    font-size: 1.6rem;
}

.service-title {
    color: #076600;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: .08em;
}

@media (prefers-reduced-motion: reduce) {
    .service-card {
        transition: none;
    }

    .service-card:hover {
        transform: none;
    }
}

.project-title {
    margin-bottom: .75rem;
}

.project-title img {
    display: block;
    height: 36px;
    width: auto;
}

/* technologies of a project: white boxes like the focus tiles on "Über mich" */
.tech-box {
    padding: 1rem;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 .125rem .5rem rgba(7, 102, 0, .08);
    text-align: center;
}

.tech-box .bi, .tech-box .brand-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto .4rem;
    color: #076600;
    font-size: 2rem;
    line-height: 1;
}

.tech-box strong {
    display: block;
}

/* white bar below a project: url on the left, technologies on the right */
.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding: .6rem 1rem;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 .125rem .5rem rgba(7, 102, 0, .08);
}

.tech-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    padding: 0;
}

.tech-bar li {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
}

.tech-bar .bi, .tech-bar .brand-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: #076600;
    font-size: 1.25rem;
    line-height: 1;
}

.admin-nav {
    background-color: #076600;
}

.navbar-brand, .navbar-brand:hover {
    font-weight: bold;
    text-decoration: none;
}

.admin-nav .navbar-brand, .admin-nav .navbar-brand:hover {
    color: #fff;
}

.navbar-brand img {
    display: block;
}

.admin-nav .navbar-nav .nav-link {
    color: #fff;
}

.hero h1, .hero .h2 {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

/* scales with the viewport: fits on phones, large on desktop */
.hero h1 {
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
    margin-bottom: .75rem;
}

.hero-home h1 {
    font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem);
}

.hero-home .h2 {
    font-size: clamp(1rem, .85rem + .8vw, 1.5rem);
}

.hero .h2 {
    font-size: clamp(.95rem, .85rem + .4vw, 1.15rem);
    font-weight: 600;
    max-width: 40rem;
    margin-bottom: 1.5rem;
}

.hero .highlight {
    color: #c9efc6;
    /* keep logo and word together */
    white-space: nowrap;
}

.brand-icon {
    width: 1em;
    height: 1em;
    vertical-align: -.12em;
}

/* call to action, same orange as on parking */
.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e8710f;
    --bs-btn-hover-border-color: #e8710f;
    --bs-btn-focus-shadow-rgb: 253, 126, 20;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d4670d;
    --bs-btn-active-border-color: #d4670d;
    font-weight: 600;
}

/* larger call to action in the home banner on desktop */
@media (min-width: 992px) {
    .hero .btn-orange {
        --bs-btn-padding-y: .8rem;
        --bs-btn-padding-x: 1.75rem;
        --bs-btn-font-size: 1.2rem;
        --bs-btn-border-radius: .5rem;
    }
}

/* section divider: same green → light green transition as the line under the navigation */
.border-green {
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #076600, #c9efc6) 1;
}

.green {
    background-color: #eaffeb;
}

/* big image with colour transition: home page (tall) and subpages */
.hero {
    min-height: 150px;
    /* green behind the text on the left, fading out over the skyline */
    background:
        linear-gradient(90deg, rgba(7, 102, 0, .92) 0%, rgba(7, 102, 0, .65) 45%, rgba(7, 102, 0, 0) 100%),
        url("../images/bg--8GEvJU.webp") no-repeat center;
    background-size: cover;
    position: relative;
    /* light green → green transition, mirrored to the overlay on the image above */
    border-bottom: 10px solid;
    border-image: linear-gradient(90deg, #c9efc6, #076600) 1;
    /* thin white line between the image and the transition */
    box-shadow: inset 0 -1px 0 #fff;
}

.hero-home {
    min-height: 350px;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 20px solid #c9efc6;
    /* space between the arrow and the start of the content */
    margin: 0 auto 2.25rem;
}

/* An arrow under a gradient border continues it: a clipped triangle whose
   background is the same full-width gradient, centred like the arrow itself. */
.hero + * > .arrow-down,
.border-green + * > .arrow-down {
    width: 100px;
    height: 20px;
    border: 0;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: linear-gradient(90deg, #076600, #c9efc6) center / 100vw 100% no-repeat;
}

.hero + * > .arrow-down {
    background-image: linear-gradient(90deg, #c9efc6, #076600);
}

.site-nav {
    background-color: #fff;
    border-bottom: 3px solid;
    border-image: linear-gradient(90deg, #076600, #c9efc6) 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.site-nav .navbar-nav .nav-link {
    color: #252525;
    font-weight: 700;
}

.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link.active {
    color: #076600;
}

.site-nav .navbar-toggler {
    border-color: #076600;
}

/* Backlinkseller links above the footer */
.sub-footer {
    font-size: .875rem;
}

.sub-footer-title {
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 700;
}

.sub-footer :is(p, ul) {
    margin-bottom: 0;
}

.sub-footer a, .sub-footer a:hover {
    color: #076600;
}

/* footer links in the same style as the main navigation */
.site-footer .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
    color: #252525;
    font-weight: 700;
    text-decoration: none;
}

.site-footer .nav-link:hover,
.site-footer .nav-link.active {
    color: #076600;
}

.site-footer .nav-item:last-child .nav-link {
    padding-right: 0;
}

/* menu items are marked by colour only, not underlined */
.navbar-nav .nav-link, .navbar-nav .nav-link:hover {
    text-decoration: none;
}

.admin {
    padding-top: 0;
}

.blog-teaser {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #c9efc6;
}

.blog-post {
    max-width: 50rem;
}

.blog-content h2 {
    color: #076600;
    font-size: 21px;
    margin-top: 2rem;
}

.blog-content h3 {
    color: #252525;
    font-size: 18px;
    margin-top: 1.5rem;
}

.blog-content a {
    text-decoration: underline;
}

.blog-content img {
    max-width: 100%;
    height: auto;
}

.blog-content pre {
    background-color: #2f2f2f;
    color: #f8f8f2;
    padding: 1rem;
    border-radius: .375rem;
}

.blog-content :not(pre) > code {
    background-color: #e8f4e7;
    color: #054d00;
    padding: .1em .3em;
    border-radius: .25rem;
}

.blog-content blockquote {
    border-left: 4px solid #c9efc6;
    padding-left: 1rem;
    color: #555;
}

.intro .lead {
    font-size: 1.15rem;
    font-weight: 600;
}

/* contact form: green field borders and focus ring; errors keep Bootstrap's red */
.contact-form {
    border: 0;
    border-top: 4px solid #076600;
}

.contact-form .form-label {
    font-weight: 600;
}

/* required fields get a red asterisk; the labels themselves carry no "*" */
.contact-form .form-label.required::after {
    content: " *";
    color: #dc3545;
}

.required-mark {
    color: #dc3545;
}

.contact-form .form-control:not(.is-invalid),
.contact-form .form-select:not(.is-invalid) {
    border-color: #a8dca3;
}

.contact-form .form-control:not(.is-invalid):focus,
.contact-form .form-select:not(.is-invalid):focus {
    border-color: #076600;
    box-shadow: 0 0 0 .25rem rgba(7, 102, 0, .15);
}

.contact-form .form-control::placeholder {
    color: #9a9a9a;
}

/* "Über mich": profile card, lead sentence and focus areas */
.profile-card {
    --bs-card-border-width: 0;
    --bs-card-border-radius: .75rem;
    border-top: 4px solid #076600;
    box-shadow: 0 .25rem 1rem rgba(7, 102, 0, .08);
}

.profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #076600, #5cb85c);
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.profile-facts li {
    padding: .4rem 0;
    border-bottom: 1px solid #e8f4e7;
}

.profile-facts li:last-child {
    border-bottom: 0;
}

.profile-facts .bi {
    color: #076600;
    margin-right: .5rem;
}

.about-lead {
    color: #076600;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
}

.focus-item {
    padding: 1rem;
    border-radius: .5rem;
    background-color: #fff;
    box-shadow: 0 .125rem .5rem rgba(7, 102, 0, .08);
    color: #252525;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.focus-item:hover {
    color: #252525;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(7, 102, 0, .15);
}

.focus-item .bi {
    display: block;
    color: #076600;
    font-size: 1.5rem;
    margin-bottom: .25rem;
}

@media (prefers-reduced-motion: reduce) {
    .focus-item, .focus-item:hover {
        transition: none;
        transform: none;
    }
}

/* featured service (automation & AI): larger card with numbered process steps */
.process-steps {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
    margin-bottom: 1.5rem;
}

.process-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1rem 3rem;
    min-height: 2.25rem;
}

.process-steps li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #076600;
    color: #fff;
    font-weight: 700;
}

.process-steps strong {
    display: block;
    color: #076600;
}

.profile-facts-inline .list-inline-item {
    margin-right: 1.25rem;
}

.profile-facts-inline .bi {
    color: #076600;
    margin-right: .25rem;
}

/* language switch in the navigation: flags, the current language highlighted */
.lang-switch {
    gap: .35rem;
}

.lang-switch .nav-link {
    display: flex;
    padding: .25rem;
    border-radius: .25rem;
    /* the other language is shown in grey */
    filter: grayscale(1);
    opacity: .6;
    transition: opacity .15s ease, filter .15s ease;
}

.lang-switch .nav-link:hover,
.lang-switch .nav-link.active {
    filter: none;
    opacity: 1;
}

.lang-switch .nav-link.active {
    box-shadow: 0 0 0 2px #076600;
}

.lang-switch .flag {
    display: block;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

/* content area of the subpages: generous space above and below */
.content-section {
    padding-bottom: 4.5rem;
}

.content-section > .arrow-down {
    margin-bottom: 3.5rem;
}

.lang-switch .nav-link,
.lang-switch .nav-link:hover {
    text-decoration: none;
}

/* home page: automation focus section */
.example-list li {
    padding: .35rem 0;
    font-weight: 600;
}

.example-list .bi {
    color: #076600;
    margin-right: .5rem;
}

/* two-line section heading: main keyword large, second line smaller */
.section-title {
    color: #076600;
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
}

.section-subtitle {
    display: block;
    margin-top: .35rem;
    color: #252525;
    font-size: clamp(1.1rem, .95rem + .6vw, 1.4rem);
    font-weight: 600;
}

/* consent layer: details table stays readable on small screens */
.consent-cookies {
    font-size: .8125rem;
}

.consent-cookies th {
    white-space: nowrap;
}

/* consent first layer, centered over a light backdrop */
.consent-layer {
    position: fixed;
    inset: 0;
    z-index: 1045;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .15);
}

.consent-layer[hidden] {
    display: none;
}

/* on the privacy policy and imprint the layer must not hide the text */
.consent-layer--legal {
    align-items: flex-end;
    background: none;
    pointer-events: none;
}

.consent-layer--legal .consent-box {
    pointer-events: auto;
}

.consent-box {
    pointer-events: auto;
}

/* on the privacy policy and imprint the layer must not hide the text */
.consent-layer--legal {
    align-items: flex-end;
}

.consent-box {
    pointer-events: auto;
}

.consent-box {
    width: 100%;
    max-width: 32rem;
}

/* settings layer as wide as the first layer */
.consent .modal {
    --bs-modal-width: 32rem;
}

/* opened category in light green with a green arrow instead of Bootstrap blue */
.consent .accordion {
    --bs-accordion-active-bg: #e8f4e7;
    --bs-accordion-active-color: #076600;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23076600' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* no frame around the opened or clicked category; keyboard users still get a focus outline */
.consent .accordion-button:not(.collapsed) {
    box-shadow: none;
}

.consent .accordion-button:focus-visible {
    outline: 2px solid #076600;
    outline-offset: -2px;
}

/* the header row (toggle + switch) shares the opened background */
.consent .accordion-header:has(.accordion-button:not(.collapsed)) {
    background-color: var(--bs-accordion-active-bg);
}

/* the switch sits next to the accordion toggle instead of inside it */
.consent .accordion-header .accordion-button {
    flex: 1;
}

.consent-reopen {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 1030;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.25rem;
}

/* checkboxes and switches in the site green instead of Bootstrap blue */
.form-check-input:checked {
    background-color: #076600;
    border-color: #076600;
}

.form-check-input:focus {
    border-color: #076600;
    box-shadow: 0 0 0 .25rem rgba(7, 102, 0, .15);
}

/* the unchecked switch knob turns blue on focus by default */
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23076600'/%3e%3c/svg%3e");
}

/* privacy policy: sub-headings bold and a step smaller than the numbered sections */
.privacy h3 {
    font-size: 1.05rem;
    font-weight: 700;
}

/* projects page: every project is a card like on the contact page */
.project + .project {
    margin-top: 2.5rem;
}

/* inside the white card the bar switches to the light green */
.project .project-meta {
    background-color: #eaffeb;
    box-shadow: none;
}