/* DOSIGNY – Einstieg, Projektbeispiele und Anfrage auf Branchen-Seiten.
   Erstellt durch DOSIGNY — Dominik Baurhenn — https://www.dosigny.com */
.page-bereich .bereich-hero__inner { grid-template-columns: minmax(0, 1fr) 160px; }
.page-bereich .bereich-hero__content { min-width: 0; }
.page-bereich .bereich-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.page-bereich .bereich-hero__actions .btn { min-height: 48px; }
.page-bereich .bereich-hero__check-note { max-width: 620px; margin: 1rem 0 0; color: #d0d6de; font-size: .93rem; line-height: 1.7; }
.page-bereich .bereich-hero__project-link { display: inline-block; margin-top: 1rem; color: #bcefe2; text-underline-offset: .2em; }
.page-bereich .bereich-projekte,
.page-bereich .bereich-zusammenarbeit { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.page-bereich .bereich-projekte { background: #12101c; scroll-margin-top: 100px; }
.page-bereich .bereich-projektstart__heading { max-width: 780px; margin-bottom: 1.7rem; }
.page-bereich .bereich-projektstart__heading h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; margin: 0 0 1rem; }
.page-bereich .bereich-projektstart__heading p { color: #d0d6de; line-height: 1.7; }
.page-bereich .bereich-projektstart__heading .bereich-projektstart__eyebrow { color: #bcefe2; font-size: .85rem; margin: 0 0 .8rem; }
.page-bereich .bereich-projekte__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.15rem; }
.page-bereich .bereich-projekt { min-width: 0; display: flex; flex-direction: column; background: #1b1826; border: 1px solid #393244; border-radius: 14px; overflow: hidden; }
.page-bereich .bereich-projekt__image { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.page-bereich .bereich-projekt__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.page-bereich .bereich-projekt__image--logo img { object-fit: contain; padding: 1.2rem; box-sizing: border-box; }
.page-bereich .bereich-projekt__content { flex: 1; display: flex; flex-direction: column; padding: 1.15rem; }
.page-bereich .bereich-projekt h3 { font-size: 1.06rem; line-height: 1.4; margin: 0 0 .65rem; color: #fff; overflow-wrap: anywhere; }
.page-bereich .bereich-projekt p { color: #d0d6de; font-size: .94rem; line-height: 1.6; margin: 0 0 1rem; }
.page-bereich .bereich-projekt__link { display: inline-flex; align-items: center; gap: .45rem; color: #bcefe2; line-height: 1.6; text-decoration: underline; text-underline-offset: .2em; }
.page-bereich .bereich-projekt__content .bereich-projekt__link { margin-top: auto; }
.page-bereich .bereich-projekt__link svg { width: 18px; height: 18px; flex-shrink: 0; }
.page-bereich .bereich-zusammenarbeit__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.page-bereich .bereich-zusammenarbeit__grid article { min-width: 0; }
.page-bereich .bereich-zusammenarbeit__grid h3 { color: #fff; font-size: 1.1rem; line-height: 1.45; margin: 0 0 .7rem; }
.page-bereich .bereich-zusammenarbeit__grid p,
.page-bereich .bereich-zusammenarbeit__note { color: #d0d6de; line-height: 1.7; font-size: .95rem; }
.page-bereich .bereich-zusammenarbeit__note { border-top: 1px solid #393244; padding-top: 1.25rem; margin-top: 1.5rem; }
.page-bereich #contact { scroll-margin-top: 90px; }
.page-bereich #contact .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.page-bereich #contact .contact__form-wrapper { grid-column: 2; grid-row: 1; min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); }
.page-bereich #contact .contact__form { padding: 0; }
.page-bereich #contact .contact__info { grid-column: 1; grid-row: 1; min-width: 0; }
.page-bereich .bereich-contact__steps { margin: 1.5rem 0; padding-left: 1.4rem; color: #d0d6de; line-height: 1.7; }
.page-bereich .bereich-contact__steps li { padding-left: .4rem; margin-bottom: .7rem; }
.page-bereich .bereich-contact__steps li::marker { color: #bcefe2; font-weight: 600; }
.page-bereich .bereich-contact__check { padding: 1.25rem; margin-top: 1.5rem; border: 1px solid #579d8b; border-radius: 14px; background: #122a27; }
.page-bereich .bereich-contact__check h3 { color: #fff; font-size: 1.1rem; margin: 0 0 .7rem; }
.page-bereich .bereich-contact__check p { color: #d0e5df; font-size: .95rem; line-height: 1.7; }
.page-bereich .bereich-contact__check .btn { margin-top: 1rem; white-space: normal; text-align: center; }
.page-bereich .bereich-contact__hint { color: #d0d6de; font-size: .94rem; line-height: 1.7; margin-bottom: 1.5rem; }
.page-bereich .bereich-projektstart a:focus-visible,
.page-bereich .bereich-projekte a:focus-visible,
.page-bereich .bereich-zusammenarbeit a:focus-visible,
.page-bereich .bereich-hero a:focus-visible { outline: 3px solid #bcefe2; outline-offset: 4px; }
@media (max-width: 1100px) {
    .page-bereich .bereich-projekte__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 968px) {
    .page-bereich #contact .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .page-bereich #contact .contact__form-wrapper,
    .page-bereich #contact .contact__info { grid-column: auto; grid-row: auto; }
}
@media (max-width: 768px) {
    .page-bereich .bereich-hero__inner { grid-template-columns: minmax(0, 1fr); }
    .page-bereich .bereich-hero__icon { display: none; }
    .page-bereich .bereich-hero__check-note { margin-inline: auto; font-size: .88rem; }
    .page-bereich .bereich-hero__actions .btn { padding-inline: 1rem; white-space: normal; }
    .page-bereich .bereich-zusammenarbeit__grid { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
}
@media (max-width: 520px) {
    .page-bereich .bereich-projekte__grid { grid-template-columns: minmax(0, 1fr); }
    .page-bereich .bereich-projekt { display: grid; grid-template-columns: 105px minmax(0, 1fr); align-items: start; }
    .page-bereich .bereich-projekt__image { aspect-ratio: 1; margin: 1rem 0 1rem 1rem; border-radius: 7px; }
    .page-bereich .bereich-projekt__image--logo img { padding: .4rem; }
    .page-bereich .bereich-projekt__content { padding: 1rem; }
    .page-bereich .bereich-projekt p { font-size: .87rem; }
}
@media (max-width: 359px) {
    .page-bereich .bereich-projekt { grid-template-columns: 80px minmax(0, 1fr); }
    .page-bereich .bereich-projekt__image { margin-left: .7rem; }
    .page-bereich .bereich-projekt__content { padding: .9rem; }
}