/* ==========================================================================
   components — header, buttons, pills, cards, tabs, carousel, accordion, footer
   ========================================================================== */

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--action-bg); --btn-fg: var(--action-fg); --btn-border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  padding: 0.95rem 1.75rem; min-height: 3rem;
  border-radius: var(--radius-pill); border: 2px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: var(--weight-semibold); font-size: var(--text-base); text-decoration: none; text-transform: lowercase;
  transition: transform var(--duration-base) var(--ease-soft), background var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft);
}
.btn img { width: 1.4rem; height: 1.4rem; flex: none; }
.btn:hover { transform: translateY(-3px); }
.btn--primary { box-shadow: var(--shadow-button); }
.btn--primary:hover { --btn-bg: var(--action-bg-hover); box-shadow: 0 0.7rem 1.6rem rgb(37 211 102 / 0.45); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-heading); --btn-border: var(--line-accent); }
.btn--ghost:hover { --btn-bg: var(--surface-raised); }
.btn--paper { --btn-bg: var(--color-paper); --btn-fg: var(--color-navy); box-shadow: var(--shadow-lift); }
.btn--paper:hover { --btn-bg: var(--color-cream); }
.btn--small { padding: 0.55rem 1.15rem; min-height: 2.5rem; font-size: var(--text-sm); }
.btn--lg { padding: 1.15rem 2.25rem; font-size: var(--text-lg); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  padding: 0.4rem 1rem; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-heading);
  font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: lowercase;
  border: 1.5px solid var(--line-soft);
}
.pill img { width: 1rem; height: 1rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: var(--layer-header); padding: var(--space-xs) 0; }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: 0.55rem 0.6rem 0.55rem 1.4rem;
  background: rgb(251 246 234 / 0.9); backdrop-filter: blur(10px);
  border: 1.5px solid var(--line-soft); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 1.15rem; color: var(--text-heading); text-transform: none; line-height: 1.1; }
.brand__mark { width: 2.6rem; height: 2.6rem; flex: none; border-radius: var(--radius-blob-b); background: var(--color-blue-deep); display: grid; place-items: center; }
.brand__mark img { width: 1.6rem; height: auto; }
.brand small { display: block; font-family: var(--font-body); font-weight: var(--weight-regular); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); }

.nav { display: none; }
.nav__list { display: flex; gap: var(--space-2xs); align-items: center; }
.nav__link { display: block; padding: 0.55rem 1rem; border-radius: var(--radius-pill); text-decoration: none; font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--text-heading); text-transform: lowercase; transition: background var(--duration-fast) var(--ease-soft); }
.nav__link:hover { background: var(--color-blue-pale); }
.nav__link[aria-current="page"] { background: var(--color-blue-pale); color: var(--color-blue-deep); }
.header-cta { display: none; }

.nav-toggle { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 0; background: var(--color-blue-pale); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 1.15rem; height: 2px; background: var(--color-ink); border-radius: 2px; transition: transform var(--duration-fast) var(--ease-soft), background var(--duration-fast); }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu { display: none; margin-top: var(--space-xs); padding: var(--space-md); background: var(--surface-raised); border: 1.5px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); }
.mobile-menu.is-open { display: grid; gap: var(--space-2xs); }
.mobile-menu .nav__link { font-size: var(--text-lg); font-family: var(--font-heading); }
.mobile-menu .btn { margin-top: var(--space-xs); }

@media (min-width: 78em) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .nav-toggle, .mobile-menu { display: none !important; }
}

/* ---------- tabs (services) ---------- */
.tabs { display: grid; gap: var(--space-lg); }
.tabs__list { display: flex; gap: var(--space-xs); overflow-x: auto; padding: 0.4rem 0.25rem 0.9rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.tab {
  flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: 0.7rem 1.25rem 0.7rem 0.85rem; border-radius: var(--radius-pill);
  border: 1.5px solid var(--line-accent); background: transparent; color: var(--text-heading);
  font-weight: var(--weight-medium); text-transform: lowercase; text-align: left;
  transition: background var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft), color var(--duration-base);
}
.tab img { width: 1.9rem; height: 1.9rem; padding: 0.3rem; background: var(--color-cream); border-radius: 50%; }
.tab:hover { background: var(--surface-raised); }
.tab[aria-selected="true"] { background: var(--color-navy); color: var(--text-on-dark); border-color: var(--color-navy); transform: translateX(0.35rem); }
.tab__tag { font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-ochre); color: var(--color-ink); }

@media (min-width: 62em) {
  .tabs { grid-template-columns: minmax(16rem, 0.8fr) 1.5fr; gap: var(--space-xl); align-items: start; }
  .tabs__list { flex-direction: column; overflow: visible; padding: 0; }
  .tab { width: 100%; }
}

/* ---------- accordion (details) ---------- */
.accordion { display: grid; gap: var(--space-xs); }
.accordion details { background: var(--color-paper); border-radius: var(--radius-md); border: 1.5px solid transparent; box-shadow: var(--shadow-soft); transition: border-color var(--duration-base); }
.accordion details[open] { border-color: var(--color-ochre); }
.accordion summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: 1.05rem 1.4rem; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-heading); text-transform: lowercase; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary img { width: 1.25rem; height: 1.25rem; flex: none; transition: transform var(--duration-base) var(--ease-soft); }
.accordion details[open] summary img { transform: rotate(135deg); }
.accordion__body { padding: 0 1.4rem 1.3rem; color: var(--text-body); animation: fade-down var(--duration-base) var(--ease-soft); }
@keyframes fade-down { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: none; } }

/* ---------- carousel (dashboards) ---------- */
.carousel { position: relative; }
.carousel__track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0.5rem 0 1.5rem; -webkit-overflow-scrolling: touch; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 min(88%, 46rem); scroll-snap-align: center; margin: 0; }
.carousel__slide img { border-radius: var(--radius-md); box-shadow: var(--shadow-lift); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carousel__slide figcaption { margin-top: var(--space-sm); padding-inline: var(--space-xs); color: var(--text-on-dark-soft); font-size: var(--text-sm); }
.carousel__slide figcaption strong { display: block; font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: var(--text-lg); color: var(--text-on-dark); text-transform: lowercase; }
.carousel__controls { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.carousel__btn { width: 3.1rem; height: 3.1rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--color-blue-soft); background: transparent; transition: background var(--duration-base) var(--ease-soft), transform var(--duration-base) var(--ease-soft); }
.carousel__btn:hover { background: rgb(143 176 198 / 0.2); transform: translateY(-2px); }
.carousel__btn img { width: 1.4rem; }
.carousel__btn--prev img { transform: scaleX(-1); }
.carousel__dots { display: flex; gap: var(--space-2xs); margin-left: var(--space-sm); }
.carousel__dot { width: 0.7rem; height: 0.7rem; padding: 0; border-radius: 50%; border: 0; background: var(--color-blue); transition: width var(--duration-base) var(--ease-soft), background var(--duration-base); }
.carousel__dot[aria-current="true"] { width: 2rem; border-radius: var(--radius-pill); background: var(--color-ochre); }

/* ---------- footer ---------- */
.site-footer { position: relative; background: var(--surface-dark); color: var(--text-on-dark-soft); padding-block: var(--space-xl) var(--space-lg); isolation: isolate; }
.site-footer__grid { display: grid; gap: var(--space-lg); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text-on-dark); text-decoration: underline; }
.site-footer .brand { color: var(--text-on-dark); margin-bottom: var(--space-sm); }
.site-footer .brand small { color: var(--text-on-dark-soft); }
.site-footer h2 { font-size: var(--text-lg); color: var(--text-on-dark); margin-bottom: var(--space-xs); }
.site-footer__links { display: grid; gap: var(--space-2xs); }
.site-footer__fine { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgb(143 176 198 / 0.3); font-size: var(--text-sm); }
@media (min-width: 40em) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .site-footer__grid { grid-template-columns: 1.3fr 1.3fr 1.2fr 1fr; } }

/* ---------- language toggle ---------- */
.lang-toggle { display: inline-flex; align-items: center; gap: 0; padding: 0.2rem; border: 1.5px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--surface-raised); cursor: pointer; font: inherit; flex: none; }
.lang-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lang-toggle__opt { display: inline-block; min-width: 2.1rem; padding: 0.3rem 0.55rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-align: center; color: var(--text-muted); transition: background var(--duration-fast) var(--ease-soft), color var(--duration-fast) var(--ease-soft); }
:root:not([data-lang="de"]) .lang-toggle__opt[data-lang-opt="en"],
:root[data-lang="de"] .lang-toggle__opt[data-lang-opt="de"] { background: var(--color-blue-deep); color: var(--text-on-accent); }
@media (max-width: 61.99em) { .lang-toggle { margin-left: auto; } }

/* german: nouns need capitals, and long compounds need to wrap */
:root[data-lang="de"] :where(h1, h2, h3, h4, p, li, summary, strong, blockquote, figcaption) { text-transform: none; }
:root[data-lang="de"] :where(h1, h2, h3, p, li, summary, blockquote) { hyphens: auto; overflow-wrap: break-word; }
:root[data-lang="de"] h1 { font-size: clamp(2rem, 9.5vw, var(--text-4xl)); }
:root[data-lang="de"] :where(h1, h2, h3) { overflow-wrap: anywhere; }

.btn--blue { background: var(--color-blue-deep); color: var(--text-on-accent); box-shadow: 0 0.375rem 1.125rem rgb(47 93 124 / 0.32); }
.btn--blue:hover { background: var(--color-navy); }

/* ---------- services dropdown ---------- */
.nav__item--sub { position: relative; display: flex; align-items: center; }
.nav__subtoggle { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin-left: -0.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--text-heading); cursor: pointer; padding: 0; }
.nav__subtoggle svg { transition: transform .2s; }
.nav__subtoggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__subtoggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.nav__sub { position: absolute; left: 0; top: 100%; min-width: 17rem; padding: var(--space-2xs); background: var(--surface-raised); border: 1.5px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); display: none; z-index: var(--layer-header); }
.nav__item--sub:hover > .nav__sub, .nav__item--sub:focus-within > .nav__sub, .nav__item--sub.is-open > .nav__sub { display: grid; }
.nav__sub a { display: block; padding: 0.55rem 0.9rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-heading); font-size: var(--text-sm); text-transform: lowercase; }
.nav__sub a:hover, .nav__sub a:focus-visible { background: var(--color-blue-pale); }
.mobile-menu__sub { display: grid; gap: 0.1rem; margin: -0.25rem 0 var(--space-2xs) var(--space-sm); padding-left: var(--space-sm); border-left: 2px solid var(--color-blue-soft); }
.mobile-menu__sub a { padding: 0.35rem 0.5rem; font-size: var(--text-sm); text-decoration: none; color: var(--text-heading); text-transform: lowercase; }

/* header: never wrap labels (longer German words) */
.nav__link, .header-cta { white-space: nowrap; }
.site-header__bar { gap: var(--space-sm); }
@media (min-width: 78em) and (max-width: 88em) { .nav__link { padding: 0.5rem 0.7rem; } .header-cta { padding-inline: 1rem; } }