/*
Theme Name: Fosco Lab
Theme URI: https://foscolab.de/
Author: Fox & Magpie Design Studio
Author URI: https://foxmagpie.com/
Description: Maßgeschneidertes WordPress-Theme für Fosco Lab, umgesetzt von Fox & Magpie Design Studio.
Version: 1.0.56
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: foscolab
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/Inter-VariableFont_slnt,wght.woff2") format("woff2");
}

:root {
  --fosco-radius: 1.25rem;
  --fosco-transition: 220ms cubic-bezier(.2,.7,.2,1);
}

html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

html body,
html body button,
html body input,
html body textarea,
html body select,
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
a { text-underline-offset: .18em; }

.wp-site-blocks { overflow: clip; }
.fosco-section { position: relative; }
.fosco-section[id] { scroll-margin-top: 6rem; }

.fosco-eyebrow {
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fosco-card {
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--fosco-radius);
  height: 100%;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  transition: transform var(--fosco-transition), border-color var(--fosco-transition);
}

.fosco-card:hover { transform: translateY(-.25rem); border-color: currentColor; }

.fosco-index {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .8rem;
}

.fosco-hero { min-height: min(880px, 92svh); }
.fosco-hero__mark {
  aspect-ratio: 1;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: grid;
  place-items: center;
  width: min(34vw, 22rem);
}
.fosco-hero__mark::before {
  content: "";
  width: 32%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
}

.fosco-header {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--wp--preset--color--white) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 10%, transparent);
  position: sticky;
  top: 0;
  z-index: 20;
}

.wp-block-button__link { transition: transform var(--fosco-transition), opacity var(--fosco-transition); }
.wp-block-button__link:hover { transform: translateY(-2px); opacity: .84; }

@media (max-width: 781px) {
  .fosco-hero { min-height: auto; }
  .fosco-hero__mark { margin-top: 2rem; width: min(64vw, 17rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* Grid alternative for the editable challenge section. */
.challenge-end-spacer { display: block; flex: 0 0 0; height: 1px; pointer-events: none; }
.challenge.challenge-tone-brand { --accent: var(--brand) !important; --tint: #fbf3e4 !important; }
.challenge.challenge-tone-people { --accent: var(--people) !important; --tint: #eaf5fc !important; }
.challenge.challenge-tone-ai { --accent: var(--ai) !important; --tint: #e8f7f5 !important; }
.challenge.has-no-icon { grid-template-columns: minmax(0,1fr) auto; }
.challenge-stage.is-grid { grid-template-columns: 1fr; }
.challenge-stage.is-grid .challenge-slider { overflow: visible; }
.challenge-stage.is-grid .challenge-track {
  display: grid;
  grid-template-columns: repeat(var(--fosco-grid-columns, 3), minmax(0, 1fr));
  overflow: visible;
  padding: 8px 0 24px;
}
.challenge-stage.is-grid .challenge {
  min-height: 280px;
  opacity: 1;
  transform: none;
  grid-template-columns: 112px minmax(0,1fr) auto;
}
.challenge-stage.is-grid .challenge.has-no-icon { grid-template-columns: minmax(0,1fr) auto; }
.challenge-stage.is-grid .challenge-index { position: absolute; right: 28px; top: 28px; }
@media (max-width: 1050px) {
  .challenge-stage.is-grid .challenge-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .challenge-stage.is-grid .challenge-track { grid-template-columns: 1fr; }
}

/* Challenge detail drawer, adapted from the Eliashof drawer interaction. */
.foscolab-drawer {
  position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; pointer-events: none;
}
.foscolab-drawer[hidden] { display: none; }
.foscolab-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(21,44,58,.26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .32s ease;
}
.foscolab-drawer__panel {
  position: relative; width: min(720px,100vw); height: calc(100dvh - 32px); margin: 16px;
  background: var(--fosco-drawer-bg,#fff); color: var(--fosco-drawer-text,#152c3a);
  border: 1px solid var(--fosco-drawer-border,rgba(21,44,58,.09)); border-radius: 32px; box-shadow: 0 24px 80px rgba(21,44,58,.2);
  transform: translateX(calc(100% + 32px)); transition: transform .36s cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column; overflow: hidden; pointer-events: auto;
  outline: 0;
}
.foscolab-drawer__handle { display: none; }
.foscolab-drawer__close {
  position: absolute; top: 24px; right: 24px; width: 50px; height: 50px; border: 0; border-radius: 50%;
  background: var(--fosco-drawer-soft,rgba(21,44,58,.07)); color: inherit; display: grid; place-items: center; font-size: 34px; line-height: 1;
  cursor: pointer; z-index: 2; transition: transform .2s ease,background .2s ease;
}
.foscolab-drawer__close:hover { background: var(--fosco-drawer-soft,rgba(21,44,58,.13)); transform: scale(1.06); }
.foscolab-drawer__header { padding: 32px 82px 24px 32px; border-bottom: 1px solid var(--fosco-drawer-border,rgba(21,44,58,.09)); }
.foscolab-drawer__title { margin: 0; font-size: clamp(30px,2.5vw,36px); line-height: 1.05; letter-spacing: -.035em; }
.foscolab-drawer__header,.foscolab-drawer__title,.foscolab-drawer__header .eyebrow,.foscolab-drawer__body,.foscolab-drawer__body a { color: inherit; }
.foscolab-drawer__body { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: 30px 32px 36px; font-size: 16.5px; line-height: 1.62; overscroll-behavior: contain; }
.foscolab-drawer__body,
.foscolab-drawer__body * { color: inherit; }
.foscolab-drawer__body h1,
.foscolab-drawer__body h2,
.foscolab-drawer__body h3,
.foscolab-drawer__body h4,
.foscolab-drawer__body h5,
.foscolab-drawer__body h6 {
  max-width: 100%;
  overflow-wrap: break-word;
}
.foscolab-drawer__body h1,
.foscolab-drawer__body h2 { font-size: clamp(25px,2.2vw,30px); line-height: 1.12; margin: 1.35em 0 .5em; letter-spacing: -.025em; }
.foscolab-drawer__body h3 { font-size: clamp(20px,1.8vw,24px); line-height: 1.18; margin: 1.3em 0 .45em; letter-spacing: -.018em; }
.foscolab-drawer__body h4,
.foscolab-drawer__body h5,
.foscolab-drawer__body h6 { font-size: 1.15em; line-height: 1.2; margin: 1.15em 0 .4em; }
.foscolab-drawer__body p,
.foscolab-drawer__body li { font-size: inherit; line-height: inherit; }
.foscolab-drawer__body .alignwide,
.foscolab-drawer__body .alignfull { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.foscolab-drawer__body > :first-child { margin-top: 0; }
.foscolab-drawer__body > :last-child { margin-bottom: 0; }
.foscolab-drawer__body img { max-width: 100%; height: auto; border-radius: 22px; }
.foscolab-drawer__body.has-foscolab-accordion { display: grid; align-content: start; gap: 12px; padding-top: 24px; }
.foscolab-accordion {
  --accordion-accent: var(--brand,#d9a441); --accordion-tint: var(--brand-light,#f7ebcf);
  border: 1px solid color-mix(in srgb,var(--accordion-accent) 18%,rgba(21,44,58,.08)); border-radius: 18px;
  background: linear-gradient(145deg,#fff 0%,var(--accordion-tint) 145%); overflow: clip;
  box-shadow: 0 10px 28px rgba(21,44,58,.045);
  transition: border-color .24s ease,box-shadow .24s ease,transform .24s ease;
}
.foscolab-accordion[open] { border-color: color-mix(in srgb,var(--accordion-accent) 34%,rgba(21,44,58,.08)); box-shadow: 0 14px 34px rgba(21,44,58,.075); }
.foscolab-accordion__summary {
  list-style: none; display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 18px; align-items: center;
  padding: 18px 20px; cursor: pointer; color: inherit;
}
.foscolab-accordion__summary::-webkit-details-marker { display: none; }
.foscolab-accordion__summary::marker { display: none; content: ""; }
.foscolab-accordion__title { color: var(--navy,#152c3a); font-size: clamp(17px,1.5vw,19px); font-weight: 760; line-height: 1.28; letter-spacing: -.015em; }
.foscolab-accordion__icon {
  position: relative; width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%; opacity: .62;
  color: var(--accordion-accent);
  transition: transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}
.foscolab-accordion__icon::before,.foscolab-accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px;
  background: currentColor; transform: translate(-50%,-50%);
}
.foscolab-accordion__icon::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform .25s ease; }
.foscolab-accordion[open] .foscolab-accordion__icon { transform: rotate(180deg); opacity: 1; }
.foscolab-accordion[open] .foscolab-accordion__icon::after { transform: translate(-50%,-50%) rotate(0); }
.foscolab-accordion__summary:hover .foscolab-accordion__icon { opacity: 1; }
.foscolab-accordion__summary:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 4px; }
.foscolab-accordion__content { color: var(--navy,#152c3a); padding: 0 56px 20px 20px; }
.foscolab-accordion__content > :first-child { margin-top: 0; }
.foscolab-accordion__content > :last-child { margin-bottom: 0; }
.foscolab-drawer.is-open { pointer-events: auto; }
.foscolab-drawer.is-open .foscolab-drawer__backdrop { opacity: 1; }
.foscolab-drawer.is-open .foscolab-drawer__panel { transform: translateX(0); }
.foscolab-drawer.is-dragging .foscolab-drawer__panel,.foscolab-drawer.is-dragging .foscolab-drawer__backdrop { transition: none!important; }
html.has-foscolab-drawer-open,html.has-foscolab-drawer-open body { overflow: hidden; }

@media (max-width:782px) {
  .foscolab-drawer { height: 100lvh; align-items: flex-end; justify-content: stretch; }
  .foscolab-drawer__panel { width: 100%; height: min(92dvh,920px); margin: 0; border-radius: 28px 28px 0 0; transform: translateY(calc(100% + 32px)); touch-action: pan-y; }
  .foscolab-drawer__handle { display: block; width: 72px; height: 6px; border-radius: 99px; background: currentColor; opacity: .3; margin: 14px auto 3px; flex-shrink: 0; }
  .foscolab-drawer__header { padding: 15px 22px 20px; text-align: center; touch-action: none; }
  .foscolab-drawer__header .eyebrow { margin-bottom: 8px; }
  .foscolab-drawer__title { font-size: clamp(28px,7.5vw,32px); }
  .foscolab-drawer__body { min-height: 0; padding: 22px 22px calc(24px + env(safe-area-inset-bottom,0px)); font-size: 16px; line-height: 1.58; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .foscolab-drawer__body h1,
  .foscolab-drawer__body h2 { font-size: clamp(24px,6.8vw,28px); }
  .foscolab-drawer__body h3 { font-size: clamp(19px,5.5vw,22px); }
  .foscolab-drawer__body.has-foscolab-accordion { gap: 10px; padding-top: 18px; }
  .foscolab-accordion { border-radius: 16px; }
  .foscolab-accordion__summary { grid-template-columns: minmax(0,1fr) 34px; gap: 12px; padding: 16px 17px; }
  .foscolab-accordion__title { font-size: 17px; }
  .foscolab-accordion__icon { width: 34px; height: 34px; }
  .foscolab-accordion__content { padding: 0 17px 18px; }
  .foscolab-drawer__close { display: none; }
  .foscolab-drawer.is-open .foscolab-drawer__panel { transform: translateY(0); }
}

/* Portrait photo inside the fixed frame (Über mich). */
.photo-placeholder.has-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Contact form: status message and spam trap (server mode). */
.form .form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .form-status { margin-top: 14px; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.45; background: rgba(21,44,58,.06); color: #152c3a; }
.form .form-status.is-ok { background: #e6f7f5; }
.form .form-status.is-error { background: #fbeceb; }
.form button[disabled] { opacity: .7; cursor: progress; }