/*
 * Brand overrides for the blue identity (#0a4c96) taken from the client logo,
 * plus contrast/behaviour fixes for the contexts this landing uses. Loaded
 * after main.css so equal-specificity rules here win.
 */

/* Epilogue, the theme's font, served from this site instead of Google Fonts so
   a visit sends nothing to a third party. Variable files (weights 100 to 900)
   with the latin and latin-ext subsets Google split them into; licence in
   fonts/epilogue/OFL.txt. */
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/epilogue/epilogue-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Epilogue";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/epilogue/epilogue-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Epilogue";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/epilogue/epilogue-italic-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Epilogue";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/epilogue/epilogue-italic-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Buttons: white text on blue at rest; the hvr-light hover slides a black
   layer in, where the theme already flips the label white. All button
   transitions run fast. */
.theme-btn {
  color: #fff;
}
.theme-btn,
.theme-btn::before,
.theme-btn::after {
  transition-duration: 0.15s;
}

/* The theme's own "two" (transparent, bordered) button variant exists to
   sit on a dark photo, where white text and a white border read fine — it
   inherits that same white from the rule above. On the Kontakt page's
   plain white section that made the secondary "WhatsApp schreiben"/
   "E-Mail schreiben" buttons next to "Jetzt anrufen" white-on-white,
   effectively invisible. Paint it in the brand blue instead wherever it
   sits on a light background. The theme's own hover already sweeps in a
   solid fill behind the label (:before, below) — black text on that fill
   was unreadable, so the label goes white on hover instead. */
.content-info .theme-btn.hvr-light.two {
  color: #0a4c96;
  border-color: #0a4c96;
}
.content-info .theme-btn.hvr-light.two:hover {
  color: #fff;
}
/* WhatsApp reads as itself, not the site's blue — same idea as above,
   targeted by its real wa.me link so it needs no class of its own. The
   full brand green (#25d366) next to the site's darker blue read as too
   loud; WhatsApp's own darker secondary green is closer in weight to the
   blue "E-Mail schreiben" button beside it. The hover fill (:before)
   needs its own override too, or it would sweep in the theme's blue. */
.content-info a.theme-btn.hvr-light.two[href^="https://wa.me/"] {
  color: #128c7e;
  border-color: #128c7e;
}
.content-info a.theme-btn.hvr-light.two[href^="https://wa.me/"]:before {
  background-color: #128c7e;
}
.content-info a.theme-btn.hvr-light.two[href^="https://wa.me/"]:hover {
  color: #fff;
  border-color: #128c7e;
}

/* Hero: the active-slide rule paints the button's hover layer white, which
   made the white hover label invisible. Flip the label dark there. */
.hero-section .hero-text .theme-btn.hvr-light:hover {
  color: #000;
}

/* Hero text used second-long entrance delays; keep the mechanism (it hides
   inactive slides during the fade) but make it effectively instant. */
.hero-one-slider .swiper-wrapper {
  align-items: stretch;
}
.hero-one-slider .hero-section {
  height: auto;
}
.hero-section .hero-text h1,
.hero-section .hero-text h2,
.hero-section p,
.hero-section .hero-text .theme-btn.hvr-light {
  transition-duration: 0.2s;
}
.hero-section.swiper-slide.swiper-slide-active .hero-text h1,
.hero-section.swiper-slide.swiper-slide-active .hero-text h2 {
  transition-delay: 0s;
}
.hero-section.swiper-slide-active p {
  transition-delay: 0.05s;
}
.hero-section.swiper-slide.swiper-slide-active .hero-text .theme-btn.hvr-light {
  transition-delay: 0.1s;
}
.hero-section .hero-text h2 {
  color: #fff;
  font-weight: 700;
  margin-bottom: 0;
  letter-spacing: 1px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  transform: translateY(-20px);
}
.hero-section.swiper-slide.swiper-slide-active .hero-text h2 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* The two buttons share a flex-wrap wrapper (in home.php) with its own gap,
   so spacing survives however they lay out. A margin-left on the second
   button, kept from an earlier fix, used to look right side by side but
   left it offset instead of stacked flush whenever the row was too
   narrow to fit both (any width from ~1200px down to 768px, not just
   below 768px) and wrapped on its own.
   Below 768px, give both buttons the same full width so a short label
   ("Renovierung ansehen") and a long one ("Anrufen oder schreiben") read
   as one pair instead of two different sizes. */
@media (max-width: 768px) {
  .hero-section .hero-text .theme-btn {
    display: flex;
    width: 100%;
  }
}

/* CTA band (blue multiply over the photo): headline and copy go white; the
   white button inside keeps black text and flips white on its black hover. */
.project-section::after {
  background-color: #343434;
}
.project-section .project h2,
.project-section .project p {
  color: #fff;
}
.project-section .project .theme-btn {
  color: #000;
}
.project-section .project .theme-btn:hover {
  color: #fff;
}

/* Blue coverage badge in the intro collage. */
.experience h6,
.experience span {
  color: #fff;
}

/* Services list: the theme's row is a single-line flex (number + title),
   with the description this landing adds it needs to wrap to a second line
   instead of squeezing into the row, and air below the last row so its
   pop-out photo never touches the next section. */
ul.wwb-ul {
  margin-bottom: 40px;
}
ul.wwb-ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}
ul.wwb-ul li span {
  grid-column: 1;
  grid-row: 1;
}
ul.wwb-ul li h3 {
  grid-column: 2;
  grid-row: 1;
}
ul.wwb-ul li p {
  grid-column: 2;
  grid-row: 2;
  padding-left: 30px;
  padding-top: 10px;
  margin-bottom: 0;
  max-width: 640px;
  color: #666;
}
@media (max-width: 992px) {
  ul.wwb-ul li p {
    padding-left: 0;
  }
  /* Below 992px the theme drops the hover-reveal photo back into normal
     flow (its own rule, further down main.css), which as a plain grid
     auto-placed item lands beside or behind the text. Give it its own row
     spanning both columns so it always sits as a clean block underneath. */
  ul.wwb-ul li figure {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 16px;
  }
}
ul.wwb-ul li.active span,
ul.wwb-ul li.active h3 {
  color: #fff;
}
/* The theme's base `a { color: #000 }` sets the link's own color directly,
   which wins over the white above (inheriting a parent's color loses to
   any rule that sets color on the element itself) — every one of these
   titles links to its own service page, and read as black text on the
   same dark blue this white was meant to cover. */
ul.wwb-ul li.active h3 a {
  color: #fff;
}
ul.wwb-ul li.active p {
  color: #dcdcdc;
}

/* Round contact icons. */
.get-in-touch i {
  color: #fff;
}

/* The theme's icon-badge reveal (design-style) runs at 0.5s; every
   clickable card on this site should react quickly. */
.design-section .design-style::before,
.design-section .design-style::after,
.design-section .design-style i {
  transition-duration: 0.25s;
}

/* Icon circles: on hover the disc fills blue, so the icon goes white. */
.design-section .design-style:hover i {
  color: #fff;
}

/* Services quick list: the hover disc is blue, so label and arrow go white.
   The theme's own reveal circle runs at 0.5s; match that but speed both up
   together so the label isn't left trailing a fast disc. */
ul.what-we li:before {
  transition: transform 0.25s ease-in-out;
}
ul.what-we li a,
ul.what-we li a i {
  transition: color 0.25s ease-in-out;
}
ul.what-we li:hover a,
ul.what-we li:hover a i {
  color: #fff;
}

/* Showcase slider card: make the broad destination visible instead of
   presenting a bare arrow that looks like a project-detail link. */
.client-company > a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #0a4c96;
  font-weight: 700;
}
.client-company > a:hover,
.client-company > a:focus-visible {
  color: #073a72;
}
.client-company > a i {
  color: #fff;
  flex: 0 0 40px;
  margin-top: 0;
}

/* Persistent orientation in the desktop navigation. */
.navbar-links li > a[aria-current="page"],
.navbar-links li > a[aria-current="true"] {
  color: #0a4c96;
  border-bottom-color: #0a4c96;
}

/* Reference cards have no detail page, so their titles are headings rather
   than fake links. Preserve the theme's former link typography. */
.portfolio > h2 {
  margin: 0;
  padding-top: 24px;
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
}
@media (max-width: 1400px) {
  .portfolio > h2 {
    font-size: 26px;
    line-height: 36px;
  }
}
@media (max-width: 768px) {
  .portfolio > h2 {
    font-size: 22px;
    line-height: 30px;
  }
}

/* Dark surfaces (footer, banner breadcrumb): the saturated brand
   blue is too dark for hover text there — use the light brand tint. */
.breadcrumb li.breadcrumb-item a:hover {
  color: #8ab6f9;
}
footer .get-in-touch p a {
  background-image: linear-gradient(to right, #8ab6f9, #8ab6f9 50%, #e8e8e8 50%);
}

/* Solid single-tone footer: no photo, no darkening layer. */
footer::before {
  content: none;
}
footer {
  padding-top: 110px;
}
@media (max-width: 768px) {
  footer {
    padding-top: 70px;
  }
}

/* Four footer columns (was three) now wrap two-per-row at tablet widths too,
   not just on narrow phones, so a widget-title heading can land directly
   under the previous row's text with no breathing room. The theme's own
   gap-on-wrap rule only fires below 768px; extend it to the tablet range
   where col-md-6 pairs start stacking. */
@media (max-width: 1199px) {
  footer .widget-title h3 {
    margin-top: 40px;
  }
}

/* The theme Title-Cases headings; that corrupts German copy. "Über uns" is
   the visible case: the source text is lowercase everywhere, but the theme's
   capitalize rules turn it into "Über Uns" in the main nav and the
   breadcrumb. */
.bannr h1,
.widget-title h3,
.accordion .heading .title,
.navbar-links li > a,
.breadcrumb li.breadcrumb-item {
  text-transform: none;
}

/* The icon discs were positioned at 24% of the card height, so cards with
   longer copy pushed the disc off the icon. Pin them to the icon instead. */
.design-section .design-style::before,
.design-section .design-style::after {
  top: 70px;
}
@media (max-width: 1200px) {
  .design-section .design-style::before,
  .design-section .design-style::after {
    top: 64px;
  }
}

/* The dark audience band needs a denser overlay for its copy. */
.design-your::before {
  opacity: 0.75;
}

/* The audience grid is two rows of icon cards, which the theme's own version
   of this block never is — there it is a single row, so no vertical gutter
   was ever needed and Bootstrap's default gutter is horizontal only. With
   four cards the last line of a card in row one ended exactly on the top
   edge of the card below it, whose grey disc then began two pixels later. */
.design-your .col-lg-7 > .row {
  row-gap: 50px;
}

/* Contact rows: the row is a flex pair of icon and text, but the text half
   was left at its default auto width, so it shrank to the widest of its two
   children (the phone number, about 137px) instead of taking the space the
   column actually offers. The label then got a percentage of that already
   collapsed box (67%, 90% below 1400px) and "E-Mail schreiben:" and
   "WhatsApp schreiben:" broke across two lines while "Anrufen:" did not,
   leaving the three rows at different heights. Let the text half take the
   remaining width and the label take what it needs. */
.get-in-touch > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.get-in-touch span {
  width: auto;
}
.get-in-touch p {
  margin: 0;
  color: #dcdcdc;
}
/* This light color only ever needed to be readable behind the gradient-clip
   link every .get-in-touch p was built to contain (below) — its own color
   doesn't matter once -webkit-text-fill-color paints the link instead. The
   languages line is plain text with no link, so it needs a real color of
   its own; #dcdcdc read as white-on-white on the Kontakt page's light
   card. Scoped to .contact-information: the same #dcdcdc is correct as-is
   on the footer's dark background, where this component is also used. */
.contact-information .get-in-touch p:not(:has(a)) {
  color: #444;
}
.get-in-touch p a {
  background-image: linear-gradient(to right, #0a4c96, #0a4c96 50%, #e8e8e8 50%);
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 4px;
  transition: background-position 0.3s ease-in-out;
}
.get-in-touch p a:hover {
  background-position: 0%;
}
.contact-information .get-in-touch p a {
  background-image: linear-gradient(to right, #0a4c96, #0a4c96 50%, #000 50%);
}
header .content-header p {
  margin: 0;
  padding-left: 6px;
  color: #444;
  font-size: 16px;
  font-weight: 500;
}
header .content-header p a {
  color: #444;
}
@media (max-width: 1400px) {
  header .content-header p {
    font-size: 14px;
  }
}

@media (max-width: 992px) {
  /* Stacked, the cards carried both the row gap above and the theme's own
     40px bottom margin. The gap covers it now. */
  .design-section .design-style {
    margin-bottom: 0;
  }
  /* That margin was also the only thing between the last card and the
     contact card, which is a change of subject rather than the next item
     in the same list and needs more room than the cards get from each
     other. */
  .design-your .col-lg-7 {
    margin-bottom: 60px;
  }
}

/* The theme's black header panel has a fixed px height tuned to its own
   slim top-bar; our top-bar carries real phone/email/area text and is
   taller, so the panel used to fall short and leave a white sliver under
   the logo. Stretch it to the header's real height instead. */
header::before {
  height: 100%;
}

/* The contact card in the dark "design-your" audience section sits on a photo
   background; the theme's widget-title h3 defaults to black, unreadable there. */
.design-your .widget-title h3 {
  color: #fff;
}

/* Header logo scales with the black panel instead of a fixed inline width. */
header .logo img {
  width: 185px;
}
@media (max-width: 1400px) {
  header .logo img {
    width: 165px;
  }
}
@media (max-width: 1200px) {
  header .logo img {
    width: 140px;
  }
}
@media (max-width: 480px) {
  header .logo img {
    width: 120px;
  }
}

/* Buttons: the theme's ::after is a 5x24px sliver clipped by the button's own
   overflow:hidden, meant to read as a corner accent but landing as a stray
   cut-off strip on every CTA on the site. Not load-bearing for any state
   (hover only recolors it), so drop it. */
.theme-btn::after {
  content: none;
}

/* Coverage badge in the intro collage: was a fixed 280px/230px box while the
   photo it sits over scales with the column (min(436px, 58% of it)), so the
   two ratios diverge hard between the fixed sm-tier container (badge nearly
   as wide as the photo) and mobile (badge wider than the photo). Sizing it
   as a share of the same column keeps it at the same proportion to the photo
   at every width, matching the desktop look exactly (280/746 = 37.5%). */
.experience {
  width: 37.5%;
}
/* Below the lg breakpoint the collage stacks to the container's full width,
   which puts the badge back in mobile-app-icon territory (~190px and
   shrinking) while its own padding and 90px digits stayed sized for a
   280px box laid out number-beside-label. Below 480px even the scaled-down
   pair leaves "Einsatzgebiet" about 40px to work with, too narrow for a
   compound word at any font size — stack the label under the number
   instead of squeezing it into the leftover sliver. */
@media (max-width: 991px) {
  .experience {
    padding: 14px 16px 6px;
  }
  .experience h6 {
    font-size: 44px;
    line-height: 44px;
  }
  .experience span {
    font-size: 14px;
    width: auto;
    padding-left: 10px;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}
@media (max-width: 480px) {
  .experience {
    flex-wrap: wrap;
  }
  .experience h6 {
    width: 100%;
  }
  .experience span {
    padding-left: 0;
    padding-top: 6px;
    width: 100%;
  }
}

/* The service jump links must remain stationary and fully visible so they
   work as quick navigation for touch, keyboard, and screen-reader users. */
.marquee-box-one {
  width: min(1320px, calc(100% - 24px));
  margin: 0 auto;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.marquee-box-one .marquee-content-one {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  padding: 0;
  gap: 16px;
  animation: none;
}
.marquee-box-one .marquee-content-one a {
  display: flex;
  align-items: center;
  min-height: 82px;
  padding: 18px 22px;
  border: 1px solid #d4d4d4;
  border-left: 4px solid #0a4c96;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.marquee-box-one .marquee-content-one a:hover,
.marquee-box-one .marquee-content-one a:focus-visible {
  color: #fff;
  border-color: #0a4c96;
  background-color: #0a4c96;
}
@media (max-width: 992px) {
  .marquee-box-one .marquee-content-one {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 576px) {
  .marquee-box-one .marquee-content-one {
    grid-template-columns: 1fr;
  }
  .marquee-box-one .marquee-content-one a {
    min-height: 0;
    padding: 15px 18px;
    font-size: 17px;
  }
}

/* Showcase slider captions: both fade in with an 0.8s/1.3s delay after their
   slide becomes active, well after the 1000ms slide transition already
   finished, so the incoming slide sits caption-less for a beat. Show them
   as soon as the slide arrives instead. */
.swiper-slide-active .contruction,
.swiper-slide-active .client-company {
  transition-delay: 0s;
}

.accordion .heading:focus-visible {
  outline: 3px solid #8ab6f9;
  outline-offset: 3px;
}

/* Signature block (Marian Krupa / role) under the intro text: the theme's
   own version leads with a signature image (padding-bottom under it comes
   from that), which we don't have, so the name reads as stray text with no
   visual separation from the paragraph above. A rule stands in for the
   missing image. */
.architect-text.two {
  border-top: 2px solid #0a4c96;
  padding-top: 20px;
}

/* Kontakt's three call/WhatsApp/email buttons: inline-flex sized to its own
   label, so "Jetzt anrufen", "WhatsApp schreiben" and "E-Mail schreiben"
   wrap to a jagged staircase of different widths once they no longer fit
   on one line. Stack them full-width and equal below that point. */
@media (max-width: 576px) {
  .content-info .theme-btn {
    display: flex;
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 16px;
  }
}

/* Two accordions on the site (Home, Leistungen FAQs) toggle a +/- icon that
   sits on top of the title text rather than beside it in a reserved column,
   so a title long enough to wrap crowds the icon on its last line. */
.accordion .title {
  padding-right: 40px;
}
.accordion button.heading {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .hero-section .hero-text h1,
  .hero-section .hero-text h2,
  .hero-section p,
  .hero-section .hero-text .theme-btn.hvr-light,
  .swiper-wrapper {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Spacing inside the audience band, previously carried by the Bootstrap
   utility classes mt-2 and mb-4 in the markup. Those work (Bootstrap is
   loaded) but appear in no page of the theme, which is what
   check:landings/landing-invented-markup reports: the rule keeps the
   transferred markup the theme's own. Same values, moved to the layer that
   already owns this section's spacing. */
.design-section .design-style p {
  margin-top: 0.5rem;
}
.design-your .widget-title > p {
  margin-bottom: 1.5rem;
}

/* Keyboard focus opens the services dropdown the same way hovering does. */
.navbar-links li.navbar-dropdown:focus-within .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translatey(0px);
  z-index: 1111;
}

/* Service side menu: a quiet list next to the text. The theme's heavy black
   frame, bold labels and filled blue pill drew the eye away from the page's
   own content; thin grey lines, regular labels and a blue bar on the current
   service keep it findable without competing. The theme also drops the left
   padding below 992px, which pushed the labels against the frame. */
.tab-two.nav-pills {
  border-color: #e3e3e3;
}
section .tab-two.nav-pills .nav-link {
  padding: 12px 18px !important;
  border-bottom-color: #e3e3e3;
  color: #555;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
section .tab-two.nav-pills .nav-link:hover {
  color: #0a4c96;
}
section .tab-two.nav-pills .nav-link.active {
  background-color: transparent !important;
  box-shadow: inset 3px 0 0 #0a4c96;
  color: #0a4c96;
  font-weight: 700;
}

/* The theme fits the service page image to its column only below 1400px;
   wider screens showed it at its natural size, past the column. */
.video-blog img {
  width: 100%;
  height: auto;
}

/* Service page text column. The theme sets this page for a project write-up
   with one short paragraph; with a scope list, sections and a FAQ it read as
   a wall: subheadings (26px) nearly as large as the title (30px), list items
   in another colour and line height than the paragraphs, and FAQ questions in
   20px bold with 2px letter spacing and a 3px blue bar that belonged to no
   other block on the page. One text style, one heading scale, and the FAQ
   drawn with the same thin rules as the side menu. */
.project-details h4 {
  line-height: 1.2;
}
.project-details h6 {
  padding-top: 36px;
  padding-bottom: 10px;
  font-size: 22px;
  line-height: 1.3;
}
.project-details p,
.project-details .accordion .content p,
.project-details .list-style li {
  color: #444;
  font-size: 17px;
  line-height: 1.75;
}
.project-details .list-style {
  padding-top: 20px;
}
.project-details .list-style li {
  padding-bottom: 8px;
}
.project-details .list-style li::before {
  top: 9px;
  width: 10px;
  height: 10px;
}
.project-details .accordion .accordion-item,
.project-details .accordion .accordion-item.active {
  border-bottom: 1px solid #e3e3e3;
  border-radius: 0;
}
.project-details .accordion .accordion-item:first-of-type {
  border-top: 1px solid #e3e3e3;
}
.project-details .accordion .title,
.project-details .accordion .accordion-item.active .title {
  display: block;
  padding: 18px 40px 18px 0;
  border: 0;
  color: #000;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
}
.project-details .accordion .accordion-item.active .title {
  padding-bottom: 6px;
  color: #0a4c96;
}
.project-details .accordion .content {
  margin-bottom: 0;
  padding: 0 40px 18px 0;
}
.project-details .accordion .icon:before,
.project-details .accordion .icon:after {
  width: 14px;
}

/* No dark overlay on page banners; the photo shows through on its own. */
.bannr::before {
  content: none;
}

/* Impressum and Datenschutz repeat the theme's <h3> as an inline subsection
   heading, but the global reset zeroes h3/p margins and the theme sizes h3
   for a page's one big intro heading (40px) — so on these two pages every
   section ran flush into the next at hero size. Give it a heading's own
   scale and breathing room; h3 inside .heading.two occurs only here. */
.heading.two h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 22px;
  line-height: 1.3;
}
.heading.two h3:first-of-type {
  margin-top: 0;
}
.heading.two h3 ~ p {
  margin-bottom: 16px;
}

/* Phone navigation, app style: logo-only header, a tab bar at the bottom
   within thumb reach, and the full menu as a bottom sheet. Markup and script
   in layout.php and js/app-nav.js; above 1200px the header navigation stays. */
#app-bar,
#app-sheet,
#app-sheet-backdrop {
  display: none;
}
@media (max-width: 1200px) {
  body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  html[data-app-sheet="open"],
  html[data-app-sheet="open"] body {
    overflow: hidden;
  }

  #app-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid #e6e8eb;
    background-color: #fff;
    box-shadow: 0 -6px 20px rgba(15, 18, 22, 0.06);
  }
  #app-bar > a,
  #app-bar > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 56px;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #0f1216;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  #app-bar > a i,
  #app-bar > button i {
    font-size: 21px;
    line-height: 1;
  }
  #app-bar > a:active,
  #app-bar > button:active {
    background-color: #f1f4f8;
  }
  #app-bar > a[aria-current="page"],
  #app-bar > button[aria-expanded="true"] {
    color: #0a4c96;
  }

  #app-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: block;
    background-color: rgba(15, 18, 22, 0.5);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease;
  }
  html[data-app-sheet="open"] #app-sheet-backdrop {
    opacity: 1;
    visibility: visible;
  }

  #app-sheet {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-height: 88dvh;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background-color: #fff;
    box-shadow: 0 -10px 40px rgba(15, 18, 22, 0.18);
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
      visibility 0.3s ease;
  }
  html[data-app-sheet="open"] #app-sheet {
    transform: translateY(0);
    visibility: visible;
  }
  #app-sheet-handle {
    flex: none;
    width: 44px;
    height: 5px;
    margin: 12px auto 6px;
    border-radius: 3px;
    background-color: #d5d9de;
  }
  #app-sheet-close {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #0f1216;
    font-size: 24px;
  }
  #app-sheet-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #app-sheet-nav,
  #app-sheet-services {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #app-sheet-nav {
    padding: 14px 24px 8px;
  }
  #app-sheet-nav > li > a,
  #app-sheet-services-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 17px 0;
    border: 0;
    border-bottom: 1px solid #e9ecef;
    background: transparent;
    color: #0f1216;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
  }
  #app-sheet-nav > li:last-child > a {
    border-bottom: 0;
  }
  #app-sheet-services-toggle i {
    color: #8a929c;
    font-size: 16px;
    transition: transform 0.2s ease;
  }
  #app-sheet-services-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
  }
  #app-sheet-services {
    padding: 6px 0 10px;
    border-bottom: 1px solid #e9ecef;
  }
  #app-sheet-services a {
    display: block;
    padding: 9px 0 9px 14px;
    color: #444;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
  }
  #app-sheet-nav a[aria-current="page"],
  #app-sheet-nav a[aria-current="true"],
  #app-sheet-services-toggle[aria-current="true"] {
    color: #0a4c96;
  }

  #app-sheet-contact {
    padding: 14px 24px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid #e9ecef;
    background-color: #f5f7f9;
  }
  #app-sheet-contact > a,
  #app-sheet-contact > div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    color: #0f1216;
    font-size: 17px;
    font-weight: 600;
  }
  /* The languages line is information, not a link — lighter weight sets
     it apart from the three tap-to-contact actions above it. */
  #app-sheet-contact > div {
    font-size: 15px;
    font-weight: 400;
    color: #444;
  }
  #app-sheet-contact > a i,
  #app-sheet-contact > div i {
    flex: none;
    width: 24px;
    color: #0a4c96;
    font-size: 21px;
    text-align: center;
  }
  #app-sheet-contact > #app-sheet-cta {
    justify-content: center;
    margin-top: 12px;
    padding: 16px;
    border-radius: 10px;
    background-color: #0a4c96;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
  }
  #app-sheet-contact > #app-sheet-cta:active {
    background-color: #073a72;
  }

  #app-bar > a:focus-visible,
  #app-bar > button:focus-visible,
  #app-sheet a:focus-visible,
  #app-sheet button:focus-visible {
    outline: 3px solid #8ab6f9;
    outline-offset: 2px;
  }
}
@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  #app-sheet,
  #app-sheet-backdrop,
  #app-sheet-services-toggle i {
    transition: none;
  }
}

/* Phone header: the menu lives in the bottom bar, so the header is only the
   logo, centred on the dark panel stretched to the full width. */
@media (max-width: 1200px) {
  header::before {
    width: 100%;
  }
  .header-bottom-bar,
  .bottom-bar {
    background-color: transparent;
  }
  .bottom-bar {
    justify-content: center;
    padding: 14px 0;
  }
  .two-bar {
    justify-content: center;
    padding-right: 0;
  }
  header .logo img {
    width: 120px;
  }
}

/* Leistungen dropdown: 10 plain-text rows in one 230px column read as a
   wall of near-identical lines with nothing to tell one from the next at a
   glance. A two-column grid, a badge icon per row and a hover fill on the
   whole row (not just the text) give the eye something to land on while
   scanning down a column — still the same <ul><li><a>, just laid out and
   painted differently. */
.navbar-links li.navbar-dropdown .sub-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 480px;
  padding: 8px;
  gap: 4px;
  background-color: #fff;
}
/* The theme's per-row bottom divider was built for one plain column with no
   gaps; rounded, individually-backed rows read better with plain spacing
   between them than with a line running behind each one. */
.navbar-links li.navbar-dropdown .sub-menu li:before {
  content: none;
}
.navbar-links li.navbar-dropdown .sub-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
}
.navbar-links li.navbar-dropdown .sub-menu a:hover {
  background-color: #eef4fc;
}
.navbar-links li.navbar-dropdown .sub-menu a i {
  display: flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #eef4fc;
  color: #0a4c96;
  font-size: 14px;
}
.navbar-links li.navbar-dropdown .sub-menu a:hover i {
  background-color: #fff;
}

/* Printing / "Save as PDF": this theme's layout (full-bleed cropped photo
   banners, multi-column grids, hover-swap image pairs, a slider, fixed nav)
   is built for a screen, and reproducing it 1:1 on paper is what breaks —
   backgrounds vanish leaving white-on-white text, columns squeeze into
   unreadable slivers, and a hover-swap pair (two images stacked for a
   crossfade) prints as two overlapping photos. Instead of forcing the
   design onto the page, strip it down to a plain document: black text on
   white, one column, no photos, no navigation, every FAQ answer expanded
   (nobody can click "+" on paper) — sized to be read on A4, not to look
   like the site. */
@media print {
  @page {
    margin: 2cm 1.5cm;
  }
  html,
  body {
    background: #fff !important;
  }
  /* The universal selector does not reach ::before/::after — several dark
     sections (e.g. "Für wen wir arbeiten") get their tint from exactly
     such a pseudo-element overlay, so it needs its own rule here too.
     Several links (phone numbers, "…ansehen" links) are painted by
     clipping a gradient to the text shape and setting the glyphs
     themselves fully transparent (-webkit-text-fill-color), so the real
     paint color is invisible on paper even once `color` is reset — that
     property has to be reset on its own. */
  *,
  *::before,
  *::after {
    background: none !important;
    background-image: none !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* The "40 km Umkreis" stat is a badge absolutely positioned over the
     photo next to it (top/right percentages, its own fixed width); with
     that photo hidden for print, the badge has nothing left to sit on
     top of and lands on whatever text follows instead. Only this one
     component does this — resetting position everywhere else broke
     unrelated sections that rely on it for their own height. */
  .experience {
    position: static !important;
    width: auto !important;
  }
  .experience h6 {
    font-size: 14pt !important;
    line-height: 1.4 !important;
  }
  body {
    font-size: 12pt;
    line-height: 1.5;
  }
  h1 {
    font-size: 20pt;
  }
  h2 {
    font-size: 17pt;
  }
  h3,
  h4 {
    font-size: 14pt;
  }
  h5,
  h6 {
    font-size: 12.5pt;
  }

  /* Chrome and interactive controls have no function on paper. */
  header,
  footer nav,
  #app-bar,
  #app-sheet,
  #app-sheet-backdrop,
  .swiper-pagination,
  .breadcrumb,
  .theme-btn,
  .social-media,
  .get-in-touch > div:first-child,
  .accordion .icon {
    display: none !important;
  }
  footer ul {
    display: none !important;
  }

  /* Photos: a hover-swap pair (two images stacked for a crossfade) has no
     "hover" on paper and would print as two overlapping photos; dropping
     every image is simpler and more reliable than fixing each pattern. */
  img,
  figure {
    display: none !important;
  }

  /* A slider keeps every slide in the DOM; removing every background
     above uncovers whichever ones a given carousel stacks behind the
     active one instead of removing from the page. The hero slider never
     loops (`loop: false` in custom.js), so keeping only the slide it has
     already marked active is stable — there is exactly one real slide at
     a time and no clone of it. */
  .swiper-slide:not(.swiper-slide-active) {
    display: none !important;
  }

  /* The "So sieht die Arbeit aus" showcase carousel loops (`loop: true`),
     which makes Swiper clone slides for seamless wraparound and mark
     both a real slide and its clone active whenever they land on the
     same spot — which one that is shifts with the carousel's own state,
     so there is no single CSS rule that reliably keeps exactly one copy.
     It is a repeat of photos and captions already covered elsewhere on
     the page, not unique content, so the simple, stable fix is to drop
     the carousel for print rather than chase its state. */
  .section-innovative {
    display: none !important;
  }

  /* Bootstrap's grid is flex/float for side-by-side columns on screen;
     on paper everything reads top to bottom as one column. */
  .row {
    display: block !important;
  }
  [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  /* Banners, hero slides and CTA bands are fixed/min-height boxes sized
     for a cropped photo; without the photo they only need to fit their
     text. */
  .bannr,
  .hero-section,
  .project-section,
  .design-section,
  .concept-design {
    height: auto !important;
    min-height: auto !important;
    padding: 10px 0 !important;
  }

  /* A collapsed FAQ answer is hidden with the `hidden` attribute; nobody
     can click it open on a printed page, so every answer shows. */
  .accordion .content[hidden] {
    display: block !important;
  }
}