/* Brand colour: the theme ships a bright green (--theme: rgb(52,199,89) light /
   rgb(48,209,88) dark, _variables.sass). Point it at the brand teal instead.
   Both selectors are listed because the theme's dark-mode override
   (html[data-mode="dark"]) is more specific than a bare :root, so :root alone
   would be ignored once the user toggles dark mode. */
:root,
html[data-mode="dark"] {
  --theme: #047171;
}

.button-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  margin: 1rem 0;
}

.button-row .button {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Contact buttons (contact.html, and the button-row shortcode on the de home
   page): Signal / Telegram / WhatsApp. The row is nowrap with nowrap labels,
   and the theme's .button padding is 0.75rem/1.25rem — the compact override
   above only targets .nav-item — so the three labels together are wider than a
   phone and push the page sideways. Tighten the padding and size so they still
   fit on one line, and let them wrap as a last resort. */
@media screen and (max-width: 667px) {
  .button-row {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .button-row .button {
    padding: 0.55rem 0.75rem;
    font-size: 0.95rem;
  }
}

/* The contact block (layouts/_partials/contact.html) comes in two shapes.
   The default one is a two-column grid: no override needed for the 50/50
   split, since _utils.sass already defines .grid-2 as repeat(2, 1fr) above
   42rem and falls back to a single column below that.

   When the page sets the contactLeft*/contactRight* params, the partial instead
   renders .contact_offers: the two offers share one 50/50 row, then
   "Get in touch" runs as a full-width row below them, followed by the
   full-width .contact_support band. */
.contact_offers {
  align-items: start;
}

/* "Get in touch" now spans the full page width instead of sitting in a third of
   it, so the Signal/Telegram/WhatsApp buttons would stretch to roughly a third
   of the viewport each. Cap the row so they stay a sensible click target and
   the Tel/Mail line stays readable. */
.contact_actions .contact_col {
  max-width: 40rem;
}

/* The middle column carries three Signal/Telegram/WhatsApp buttons that cannot
   shrink (white-space: nowrap above) and a Tel/Mail line. In a third of the
   page width they no longer fit on one line, and the existing 667px media
   query is far too late to catch it — at a 1024px viewport the three buttons
   are already wider than the column and pushed the page sideways. Let them
   wrap inside the contact columns at any width. */
.contact_col .button-row {
  flex-wrap: wrap;
}

/* Tel/Mail and the offer copy should never force the column wider than its
   track; long addresses break inside the text instead. */
.contact_col p {
  overflow-wrap: break-word;
}

/* Full-width remote-support band. The theme's .gallery is a CSS-columns block
   with flex: 1 1 auto, which stretched the logos across the whole viewport and
   stranded the appointment button at the far right. Keep the logos and the
   button grouped at the start of the row instead. */
.contact_support .tool-row .gallery {
  flex: 0 1 auto;
}

/* Claim card — hero line style on every page: accent fill, hairline top rule
   instead of the 4px bar, square corners, roomy padding. */
.claim {
  background: var(--accent);
  border-radius: 0;
  border-top: 0.1rem solid var(--theme);
  padding: 2rem;
}

.claim h3 {
  margin-top: 0;
  color: var(--theme);
}

/* The theme adds a copy-anchor-link icon to every heading, which only shows
   on hover)Skip — it makes the claim headlines and any `.claim` heading look
   clickable. Hide it here so the green headlines no longer read as links.
   (The green headline color is kept.) */
.claim h3 .link {
  display: none;
}

/* Start page hero: renders the "Durable IT solutions" intro as a prominent box. */
.hero {
  background: var(--accent);
  border: 0;
  border-top: 0.1rem solid var(--theme);
  border-radius: 0;
  padding: 2rem;
  margin: 0 0 2.2rem;
  align-items: center;
}

.hero h1 {
  margin-top: 0;
  color: var(--theme);
}

.hero img {
  max-width: 12rem;
  margin: 0 auto;
}

.hero-right {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.hero-portrait img {
  max-width: 12rem;
  margin: 0;
}

.tech-tree-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}

/* Root point, stem, rail and branch arms use the theme color at ~30% opacity. */
.tt-root {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--theme) 30%, transparent);
}

.tt-stem {
  width: 2px;
  height: 14px;
  background: color-mix(in srgb, var(--theme) 30%, transparent);
}

.tt-canvas {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding-top: 2px;
  width: 100%;
}

/* Horizontal "rail" connecting the three branches under the root node. */
.tt-canvas::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: color-mix(in srgb, var(--theme) 30%, transparent);
}

.tt-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tt-arm {
  width: 2px;
  min-height: 22px;
  background: color-mix(in srgb, var(--theme) 30%, transparent);
}

.tt-node + .tt-arm {
  min-height: 14px;
}

/* Square, 1px border to match the active menu item. The hover only lifts the
   node now; the old border-width: 2px jump made these read as heavier than the
   nav. */
.tt-node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 2.25rem;
  padding: 0.3rem;
  background: color-mix(in srgb, var(--light) 50%, transparent);
  border: 1px solid var(--theme);
  border-radius: 0;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.tt-node:hover {
  transform: translateY(-2px);
}

.tt-node img {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: 0;
}

.hero > div:first-child {
  text-align: right;
}

.hero img {
  width: 100%;
}

.tool-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

/* Remote-support logos (layouts/_partials/contact.html). The theme's .gallery
   is a CSS-columns layout (_components.sass:155). The overrides below turn it
   into a flex row, but they also pinned each logo to height: 2.8rem with
   max-width: none, so all three laid out at intrinsic width (~15rem each) plus
   2rem margins and overflowed any phone. min-width: 0 plus max-width: 100%
   lets them shrink to the space available while staying on one row. */
.tool-row .gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
}

.tool-row .gallery_item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0 2rem 0 0;
}

.tool-row .gallery_item:last-child {
  margin-right: 0;
}

.tool-row .gallery_image {
  height: 2.8rem;
  width: auto;
  margin: 0;
  /* was `none`, which is what allowed the row to overflow */
  max-width: 100%;
  max-height: none;
  /* letterbox rather than distort once the width is clamped */
  object-fit: contain;
}

@media screen and (max-width: 667px) {
  /* Trim the per-logo margin so the three share a phone's width evenly. */
  .tool-row .gallery_item {
    margin-right: 0.5rem;
  }

  .tool-row .gallery_image {
    height: 1.9rem;
  }
}

.tabs {
  gap: 0.5rem;
}

.tabs.tabs-left label.tab-label,
.tabs label.tab-label {
  border-radius: 6px;
  border-bottom-style: solid;
  border-color: transparent;
  background-color: var(--accent);
  padding: 0.35rem 0.7rem;
  top: 0;
  opacity: 0.7;
  margin-right: 0;
}

.tabs input.tab-input:checked + label.tab-label {
  background-color: var(--accent);
  border-color: var(--theme);
  color: var(--theme);
  opacity: 1;
}

.tabs.tabs-left .tab-content,
.tabs .tab-content {
  border-radius: 6px;
  border-width: 2px;
  border-style: solid;
  border-color: var(--theme);
  margin-top: 0;
}

.lead {
  font-size: 1.15rem;
}

#vendor-landscape,
#programming-languages,
#programmiersprachen,
#databases,
#datenbanken,
#tools-und-anwendungen,
#tools-and-applications,
#the-toolbox,
h2#location,
h2#standort {
  border-top: 0.1rem solid var(--theme);
  margin-top: 2.2rem;
  padding-top: 1.1rem;
}

.page-home #remote-support-made-easy-with {
  border-top: 0.1rem solid var(--theme);
  margin-top: 2.2rem;
  padding-top: 1.1rem;
}

/* Contact/facts box — same look as the start page hero: accent fill, hairline
   top rule instead of the 4px bar, square corners, roomy padding, headings in
   the theme colour. Used on the imprint page and in the services sidebar. */
.info-box {
  background: var(--accent);
  border: 0;
  border-top: 0.1rem solid var(--theme);
  border-radius: 0;
  padding: 2rem;
  margin-top: 1rem;
}

.info-box h2,
.info-box h3,
.info-box h6 {
  color: var(--theme);
}

.info-box h2,
.info-box h3 {
  margin-top: 0;
  padding-top: 0;
}

.info-box > :first-child {
  margin-top: 0;
  padding-top: 0;
}

.info-box p:first-of-type {
  padding-top: 0;
}

.info-box a {
  color: var(--theme);
}

/* Imprint page: the contact box sits in the grid next to the photo, so its
   text is right-aligned there (everything else is inherited from .info-box). */
.page-page.type-page .content .info-box {
  text-align: right;
}

/* Services page: the tab panels follow the same hairline hero line, square
   corners and roomy padding (the claim cards are covered by .claim above). */
.type-services .tab-content {
  background: var(--accent);
  border: 0;
  border-top: 0.1rem solid var(--theme);
  border-radius: 0;
  padding: 2rem;
}

.vendor-logos {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  margin: 1rem 0;
}

.vendor-logos .vendor-note {
  margin: 0;
}

.vendor-logos .gallery {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.vendor-logos .gallery_item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 0;
  min-width: 0;
  height: 4rem;
}

.vendor-logos .gallery_image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}

.vendor-grid {
  grid-gap: 0.5rem 2rem;
  grid-template-columns: 1fr;
}

.vendor-grid .claim h3 a {
  color: var(--theme);
}

.vendor-grid .claim {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.vendor-grid .claim h3 {
  font-size: 120%;
}

.vendor-grid .claim p {
  font-size: 0.6em;
  padding-top: 0.25rem;
}

.aside #toc-vendor,
.aside #toc-programming {
  margin: 0.25rem 0 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--theme);
  font-size: 0.9rem;
}

.aside #toc-vendor ul,
.aside #toc-programming ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aside #toc-vendor li,
.aside #toc-programming li {
  margin: 0;
  padding: 0;
}

.aside #toc-vendor a,
.aside #toc-programming a {
  display: block;
  padding: 0.25rem 0;
  overflow-wrap: anywhere;
}

@media screen and (max-width: 667px) {
  .content > .grid-auto {
    grid-gap: 0;
  }
}

.color_mode {
  display: none;
}

.nav_lang {
  display: flex;
  flex-direction: row;
  gap: 0;
}

/* The language switch runs tight: no link padding, so the separator carries
   the spacing. The padding: 0 itself lives at the end of this file, because
   the general .nav-item .nav-link rule below outranks an override placed here. */
.nav_lang_sep {
  align-self: center;
  padding: 0 0.25rem;
  color: var(--text);
  opacity: 0.35;
  user-select: none;
}

/* Compact nav controls. _nav.sass uses 0.5rem/1rem on .nav-link and
   _components.sass 0.75rem/1.25rem on .button, so these win on source order.
   Scoped to .nav-item so content-page .button elements are untouched.
   The first item (Schedule) is the one call-to-action: it keeps the theme's
   solid teal fill and white label, is offset with a left margin, and is the
   only nav item with a background. */
.nav-item .nav-link {
  padding: 0.25rem 0.55rem;
}

/* _base.sass:60 sets `li, li p { padding: 0.25rem 0 }` site-wide, which adds a
   0.25rem band above and below every nav row item and inflates the row height.
   Neutralize it for the header only, so the link padding above is the only
   spacing. Content and aside lists keep the site-wide rule. */
.nav_body li,
.nav_body li p {
  padding: 0;
}

.nav-item .button {
  padding: 0.3rem 0.7rem;
  margin-left: 0.75rem;
  margin-right: 2rem;
  background-color: var(--theme);
  border: 1px solid transparent;
  color: var(--light);
}

/* Square off the nav controls. _components.sass rounds .button (0.25rem), the
   search field (1.5rem) and the results dropdown. */
.nav-item .button,
.search_field {
  border-radius: 0;
}

.search_results {
  border-radius: 0;
}

/* The search field's border is transparent in light mode and --accent in dark
   mode (_variables.sass), so it only reads as a box on hover. Give it a real
   hairline in the brand teal instead. */
.search_field {
  border: 1px solid #047171;
}

/* Active menu link: no fill, the teal border is the only marker. The theme
   styles .active as color alone (_utils.sass:51), and there is no background
   to strip back, so this is purely additive. Every link carries a transparent
   border so moving between pages cannot shift the row by 2px. */
.nav-item .nav-link {
  border: 1px solid transparent;
}

.nav-item .nav-link.active {
  background: transparent;
  border-color: var(--theme);
  color: var(--theme);
}

/* The active language is marked by its teal label alone, not a box. Equal
   specificity to the rule above and later in the file, so it wins. */
.nav_lang .nav-link.active {
  border-color: transparent;
}

@media screen and (min-width: 992px) {
  .nav-item .search {
    margin-right: 0.75rem;
  }

  /* Menu buttons stay left, search and the language switch sit at the right
     edge. _nav.sass uses justify-content: flex-end on .nav_body, so the auto
     margin on the first utility item absorbs all the free space. */
  .nav_search {
    margin-left: auto;
  }
}

/* Nav is a single column: the logo owns the first row at full width and
   ul.nav_body forms the link row directly beneath it. Overrides the theme's
   10rem/1fr two-column grid (_nav.sass); the ul keeps its right-aligned row
   layout from there. grid-gap is zeroed so no space sits between the logo and
   the menu row. */
.nav {
  grid-template-columns: 1fr;
  grid-gap: 0;
}

.nav_brand {
  width: 100%;
}

.nav_brand picture,
.nav_brand img {
  display: block;
  width: 100%;
  max-width: 100%;
  /* _base.sass sets img { margin: 1rem auto }, which pushed the header down. */
  margin: 0;
}

/* Keep the off-canvas hamburger clear of the now full-width logo. */
@media screen and (max-width: 991px) {
  .nav_brand {
    padding-right: 3rem;
  }
}

/* logo.png is only 400x55, so the expanded header upscales it roughly 3x and
   the interpolated edges read as soft. CSS cannot restore detail, but a slight
   blur+contrast pass steepens the edge transition and approximates an unsharp
   mask. Scoped to the expanded state on purpose: at the compact 7rem size the
   image is downscaled and already crisp, so the filter would only crunch it.
   Drop this once a higher-resolution or vector logo is available. */
.nav_header:not(.scrolled) .nav_brand picture,
.nav_header:not(.scrolled) .nav_brand img {
  filter: blur(0.03rem) contrast(1.6);
}

@media screen and (min-width: 42rem) {
  .aside {
    padding: 0;
    top: 0;
    margin-top: 0;
  }
}

/* Non-sticky aside: neutralize the theme's sticky sidebar (position: sticky,
   top, z-index, max-height with overflow) so the menu column just sits in the
   normal flow. custom.css loads after the theme stylesheet, so these equal-
   specificity rules win. */
.aside {
  position: static;
  top: auto;
  z-index: auto;
  max-height: none;
  overflow-y: visible;
}

/* Services page: keep the tab menu column wide enough so the main column
   never overlaps it (it collapses to 0 in the 672-991px range). */
.aside.menu:has(a[data-radio]) {
  min-width: 16rem;
  max-width: 20rem;
}

/* Keep the services side menu (incl. the vendor box anchors) always expanded:
   the theme collapses .aside_inner (height:0; overflow:hidden) below 672px or
   until the toggle is opened. */
.aside.menu .aside_inner {
  height: auto !important;
  overflow: visible !important;
}

/* The sidebar script (assets/js/custom.js) tags every <nav> in the aside with
   the theme's .toc class. The theme collapses .toc to height:0; overflow:hidden
   unless it also carries .toc_active, which only the Toolbox nav receives. That
   hid the Programming and Vendor nav. Keep every section visible here. */
.aside.menu .toc {
  height: auto !important;
  overflow: visible !important;
}

.aside.menu .aside_toggle {
  display: none;
}

/* Let menu entries be clickable across their full row, including wrapped lines. */
.aside .toc_item .toc_link {
  display: block;
}

/* No active-highlight marking in the aside menu. The theme colors any .active
   element with the theme color; keep the current page neutral here. The top
   menu's active state is unaffected. */
.aside .active {
  color: inherit;
}

/* Sticky header: keep the nav at the top while scrolling. The theme uses
   position:absolute, so the content wrapper (.main.pt-4) no longer needs the
   large top padding once the header sits in the normal flow. */
html {
  scroll-padding-top: 4.5rem;
}

.nav_header {
  position: sticky;
  top: 0;
  border-bottom: 0.1rem solid transparent;
}

.main.wrap.pt-4 {
  padding-top: 0;
}

/* Legal & Imprint (document layout): optimize vertical rhythm of the text.
   More breathing room between sections, tighter paragraph flow. */
.page-page.type-page .content > h1 {
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.5rem;
}

.page-page.type-page .content h2 {
  margin: 0.25rem 0 0.75rem;
  padding: 0;
}

.page-page.type-page .content h3 {
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 120%;
}

.page-page.type-page .content p {
  padding: 0.4rem 0;
}

.nav_header,
.nav_header .nav,
.nav_header .nav_brand picture,
.nav_header .nav_brand img,
.nav_header .nav-link,
.nav_header .button,
.nav_header .search_field {
  transition: padding 0.25s var(--ease), max-width 0.25s var(--ease),
    font-size 0.25s var(--ease), border-color 0.25s var(--ease),
    filter 0.25s var(--ease);
}

/* Compact state: set by custom.js once the page is scrolled. */
.nav_header.scrolled {
  border-bottom-color: var(--theme);
}

.nav_header.scrolled .nav {
  padding: 0.25rem 1.5rem !important;
}

/* width stays 100%; max-width clamps it down to the compact size so the
   existing max-width transition animates the shrink. */
.nav_header.scrolled .nav_brand picture,
.nav_header.scrolled .nav_brand img {
  max-width: 7rem;
}

.nav_header.scrolled .nav-link {
  padding: 0.15rem 0.5rem;
}

/* No override here: the language switch is padding-free in both states, and a
   .nav_header.scrolled rule would outrank the padding: 0 above. */

.nav_header.scrolled .button {
  padding: 0.4rem 0.9rem;
}

.nav_header.scrolled .search_label {
  width: 0.75rem;
  height: 0.75rem;
}

/* Search icon sits slightly high in the field with the default top offset. */
.search_label {
  top: 0.1rem;
}

.nav_header.scrolled .search_field {
  padding: 0.25rem 0.75rem 0.25rem 2rem;
  font-size: 0.95rem;
}

/* Language switch: no link padding in either nav state. This has to stay at the
   end of the file — .nav-item .nav-link (0,2,0) and
   .nav_header.scrolled .nav-link (0,3,0) both match these links, so an
   earlier rule of equal specificity gets outranked and the padding returns. */
.nav_lang .nav-link {
  padding: 0;
}