/*Main Stylesheet
  ---
  1. Base & Reset
  2. Layout & Container
  3. Header & Navigation
  4. Buttons & Forms
  5. Section Styles (Hero, Services, etc.)
  6. Component Styles (Cards, Accordions, etc.)
  7. Person Page Styles
  8. Utility & Accessibility
*/

/* 1. Base & Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem; /* Offset for sticky header */
}
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--ink);
  position: relative;
  /*
    Apply a subtle vertical gradient that evolves as the user scrolls. The
    top of the page starts with the neutral paper colour while the end
    gradually shifts to a slightly darker shade. The JavaScript below
    updates the --gradient-scroll variable on scroll for a dynamic effect.
  */
  background: linear-gradient(to bottom, var(--paper) 0%, var(--gradient-scroll) 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Enable vertical scroll snapping for a cleaner, non-overlapping effect. */
  scroll-snap-type: y mandatory;
}

/* Scroll Pattern Background ---------------------------------- */
/* Scroll Pattern Background */
.scroll-pattern-wrapper {
  position: fixed;
  inset: 0;
  height: 150vh;
  top: -25vh;
  z-index: -1;
  pointer-events: none;
}

.scroll-pattern-wrapper svg {
  width: 100%;
  height: 100%;
}

/* Thin, subtle lines with blending */
.scroll-pattern-wrapper svg path {
  stroke: var(--muted);
  stroke-width: 1px;
  stroke-opacity: 0.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  mix-blend-mode: multiply;
}

/* Globale Bildanpassung für Sättigung und Helligkeit */
img:not(.logo-static) {
  filter: brightness(1.05);
}

@media (max-width: 768px) {
  body {
    scroll-snap-type: none;
  }
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. Layout & Container */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
/*
  Full-Screen Sections
  --------------------
  Certain sections are designed to fill the viewport height to create a
  cinematic, Apple‑style scrolling experience. By default, each
  section with the `.full-screen` class will stretch to at least
  100% of the viewport height and centre its contents vertically.
  On small screens the minimum height is unset to prevent
  unnecessary whitespace and ensure content remains accessible.
*/
.full-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Remove default vertical padding applied to all sections so that
     content can be centred perfectly within the viewport. Padding will
     be handled by nested containers if necessary. */
  padding-block: 0;
  /* Use scroll snapping instead of sticky positioning to avoid overlap. */
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .full-screen {
    min-height: auto;
    justify-content: flex-start;
    padding-block: clamp(3rem, 1.3rem + 7.2vw, 6rem);
  }
}
section {
  padding-block: clamp(3rem, 1.3rem + 7.2vw, 6rem); /* Responsive padding */
}

/*
  Value & Services Layout
  ----------------------
  The services section combines the four core values with the accordion of
  service offerings. This grid layout stacks on small screens and
  splits into two columns on larger viewports. Each card and accordion
  item can reveal with a subtle fade/slide animation (see JS). The
  surrounding wrapper ensures consistent spacing and alignment.
*/
.value-services {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .value-services {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.value-cards {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .value-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.services-wrapper {
  /* Provide spacing above the accordion on small screens */
  display: block;
}

/* Credentials blocks inside process section */
.credentials-blocks {
  margin-top: 3rem;
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .credentials-blocks {
    grid-template-columns: repeat(3, 1fr);
  }
}
.credentials-block {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover state for credentials blocks: subtle lift and tint to mirror other
   interactive cards. */
.credentials-block:hover,
.credentials-block:focus-within {
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}

/* 3. Header & Navigation */
.site-header {
  padding-block: clamp(0.5rem, 0.35rem + 0.4vw, 0.85rem);
  border-bottom: 1px solid var(--line);
  background-color: var(--paper);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.logo-static {
  height: clamp(3.75rem, 3rem + 2vw, 6rem);
  width: auto;
  transform: scale(1.15);
  transform-origin: left center;
  will-change: transform;
}
.main-nav ul {
  display: none; /* Hidden on mobile */
  list-style: none;
  gap: 2rem;
}
.main-nav li a {
  color: var(--ink);
  font-weight: 500;
  padding-block: 0.5rem;
  position: relative;
}
.main-nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease-out;
}
.main-nav li a:hover::after,
.main-nav li a:focus::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Language Switcher */
.lang-switcher {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.lang-switcher button {
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 500;
  color: var(--muted);
}
.lang-switcher button.active {
  background-color: var(--ink);
  color: var(--paper);
}

/* Mobile Nav Toggle */
.mobile-nav-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 24px;
  position: relative;
  z-index: 1000;
}
.mobile-nav-toggle .icon-bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--ink);
  border-radius: 1px;
  position: absolute;
  left: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.mobile-nav-toggle .icon-bar:nth-child(1) { top: 4px; }
.mobile-nav-toggle .icon-bar:nth-child(2) { top: 11px; }
.mobile-nav-toggle .icon-bar:nth-child(3) { top: 18px; }

/* Mobile nav open state */
.nav-open .main-nav ul {
  position: fixed;
  inset: 0;
  background-color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-xl);
}
.nav-open .mobile-nav-toggle .icon-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .mobile-nav-toggle .icon-bar:nth-child(2) { opacity: 0; }
.nav-open .mobile-nav-toggle .icon-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 768px) {
  .mobile-nav-toggle { display: none; }
  .main-nav ul { display: flex; }
}

/* 4. Buttons */
.cta-button {
  display: inline-block;
  background-color: var(--accent);
  color: var(--cta-text);
  padding: 0.75rem 1.75rem;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--accent);
  transition: background-color 0.2s, color 0.2s, transform 0.3s;
}
.cta-button:hover, .cta-button:focus {
  background-color: transparent;
  color: var(--accent);
  transform: translateY(-2px);
}

/* 5. Section Styles */
.section-title {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--muted);
  font-weight: 400;
}
.section-title-small {
  font-size: var(--font-size-lg);
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.5rem;
}

/* Hero */
.hero {
  padding-block: clamp(4rem, 2.3rem + 7.2vw, 8rem);
  /* Make the hero section fill the viewport height to anchor the
     storytelling. The content is vertically centred via flexbox in
     .hero-content. */
  min-height: 100vh;
  text-align: center;
  /* Allow the global gradient and scroll pattern to remain visible. */
  background: transparent;
  color: var(--ink);
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 2rem;
  color: inherit;
}
.logo-animated-wrapper {
  /* Base max-width increased from 520px to 620px, with additional desktop scaling */
  width: min(80vw, 620px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  fill: currentColor;
}

@media (min-width: 1024px) {
  .logo-animated-wrapper {
    width: min(70vw, 806px);
  }
}

.logo-animated-wrapper svg #logo *,
.logo-animated-wrapper svg #text * {
  fill: currentColor;
}

.logo-animated-wrapper svg,
.logo-animated-wrapper img {
  fill: currentColor;
  width: 100%;
  height: 100%;
  animation: heroLogoFloat 18s ease-in-out infinite;
  will-change: transform;
}
.logo-animated-wrapper img {
  object-fit: contain;
  fill: currentColor;
}

@keyframes heroLogoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.hero-title {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: inherit;
}
.hero-subtitle {
  font-size: var(--font-size-lg);
  color: inherit;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}
.hero-tagline {
  font-size: var(--font-size-lg);
  max-width: 40ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  color: inherit;
  opacity: 0.9;
}
/* Value Prop */
.grid-4 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
.value-card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover state for value cards: give a gentle lift and subtle shade change to
   enhance interactivity without overwhelming the minimalist aesthetic. */
.value-card:hover,
.value-card:focus-within {
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}
.value-card h3 {
  font-size: var(--font-size-lg);
  margin-bottom: 0.5rem;
}
.value-card p {
  margin-bottom: 0;
  color: var(--muted);
  flex-grow: 1;
}
@media (min-width: 500px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Services: Accordion is styled below */
.services .accordion { max-width: 800px; margin-inline: auto; }

/* Work */
/*
  Work/Projects Layout
  --------------------
  On mobile we keep the swipeable horizontal scroller so cards remain
  easy to explore with touch. From tablet upwards the container
  progressively enhances into a grid, giving the references a more
  editorial presentation while preserving hover animations.
*/
.work-scroller {
  overflow-x: auto;
  padding-bottom: 1.5rem; /* space for scrollbar */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.work-cards {
  display: flex;
  gap: 1rem;
  list-style: none;
}
.work-card {
  flex: 0 0 85%;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  scroll-snap-align: center;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.work-card:hover,
.work-card:focus {
  transform: scale(1.03);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.work-card:hover,
.work-card:focus {
  text-decoration: none;
}
.work-card:hover h3,
.work-card:focus h3 {
  text-decoration: underline;
}
.work-card img {
  width: 100%;
  object-fit: cover;
  height: auto;
  display: block;
}
.work-card-content {
  padding: 1.5rem;
}
.work-card-content h3 {
  font-size: var(--font-size-lg);
  margin-bottom: 0.5rem;
}
.work-card-content p {
  color: var(--muted);
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .work-scroller {
    overflow: visible;
    padding-bottom: 0;
    scroll-snap-type: none;
  }
  .work-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .work-card {
    flex: none;
    scroll-snap-align: unset;
    height: 100%;
  }
  .work-card:hover,
  .work-card:focus {
    transform: translateY(-6px);
  }
}

@media (min-width: 1024px) {
  .work-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 1.5rem;
}
.projects-grid .work-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.projects-grid .work-card img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.projects-grid .work-card .work-card-content {
  padding: 1.25rem 1.5rem;
}
.projects-grid .project-tile.tile-wide {
  grid-column: span 2;
}
.projects-grid .project-tile.tile-tall {
  grid-row: span 2;
}
.projects-grid .project-tile.tile-large {
  grid-column: span 2;
  grid-row: span 2;
}

@media (min-width: 768px) {
  .projects-grid {
    grid-auto-rows: 220px;
  }
}

@media (min-width: 1200px) {
  .projects-grid {
    grid-auto-rows: 240px;
  }
}

@media (max-width: 599px) {
  .projects-grid .project-tile.tile-wide,
  .projects-grid .project-tile.tile-large {
    grid-column: span 1;
  }
  .projects-grid .project-tile.tile-tall,
  .projects-grid .project-tile.tile-large {
    grid-row: span 1;
  }
}

/* Process */
.process-scroller {
  overflow-x: auto;
  padding-bottom: 1.5rem; /* For scrollbar */
  scrollbar-width: thin;
}
.process-steps {
  display: flex;
  gap: 1rem;
  list-style: none;
  scroll-snap-type: x mandatory;
  /* Reset the counter for numbered steps so static HTML shows 01, 02, 03, 04. */
  counter-reset: step;
}
.process-step {
  flex: 0 0 80%;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  scroll-snap-align: start;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover state for process steps: subtly elevate and tint the background to
   encourage exploration. */
.process-step:hover,
.process-step:focus-within {
  background-color: rgba(0, 0, 0, 0.02);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.process-step::before {
  content: "0" counter(step);
  counter-increment: step;
  display: block;
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  color: var(--accent);
  margin-bottom: 1rem;
}
.process-step h3 { font-size: var(--font-size-lg); }
.process-step p { margin-bottom: 0; color: var(--muted); }
@media(min-width: 768px) {
  .process-step { flex-basis: 40%; }
}
@media(min-width: 1024px) {
  .process-scroller { overflow: visible; padding: 0; }
  .process-steps { flex-direction: column; gap: 0; }
  .process-step {
    position: relative;
    padding-left: 4rem;
    padding-block: 0 4rem;
    border: none;
    border-left: 2px solid var(--line);
  }
  .process-step::before {
    position: absolute;
    left: -1.75rem;
    top: -0.5rem;
    background-color: var(--paper);
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 2px solid var(--line);
    display: grid;
    place-content: center;
    font-size: var(--font-size-xl);
  }
  .process-steps li:last-child { border-left: 2px solid transparent; }
}

/* Credentials */
.credentials-container {
  display: grid;
  gap: 2rem;
  text-align: center;
}
.credentials-block h3 {
  font-size: var(--font-size-lg);
}
@media (min-width: 768px) {
  .credentials-container { grid-template-columns: repeat(3, 1fr); }
}

/* Team */
.team-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  max-width: 900px;
  margin-inline: auto;
}
.team-card {
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding: 1rem;
}
.team-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-inline: auto;
  margin-bottom: 1rem;
  object-fit: cover;
  transition: transform 0.3s;
}
.team-card:hover .team-photo {
  transform: scale(1.05);
}
.team-card:hover,
.team-card:focus {
  text-decoration: none;
}
.team-card:hover .team-link,
.team-card:focus .team-link {
  text-decoration: underline;
}
.team-card h3 {
  font-size: var(--font-size-xl);
}
.team-title {
  color: var(--muted);
  margin-bottom: 1rem;
}
.team-link {
  color: var(--accent);
  font-weight: 500;
}
@media (min-width: 768px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Testimonials */
.testimonials-scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}
.testimonials-wrapper {
    display: flex;
    gap: 2rem;
    padding-bottom: 1rem;
}
.testimonial-card {
    flex: 0 0 90%;
    scroll-snap-align: center;
    padding: 2rem;
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    text-align: center;
}
.testimonial-card blockquote {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    line-height: 1.4;
    margin-bottom: 1rem;
}
.testimonial-card footer {
    color: var(--muted);
}
@media (min-width: 768px) {
    .testimonial-card { flex-basis: 45%; }
}

/* Contact */
.contact {
    background-color: #fff; /* In case paper is not pure white */
}
.contact-card {
    max-width: 600px;
    margin-inline: auto;
    text-align: center;
    /* Provide consistent padding on mobile and a clean backdrop */
    padding: clamp(2rem, 1rem + 4.2vw, 4rem);
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: var(--paper);
    box-shadow: 0 4px 8px rgba(0,0,0,0.03);
}
.contact-details {
    margin-block: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    line-height: 1.5;
    /* Allow the details panel to grow and shrink within the flex container. */
    flex: 1 1 300px;
}
.contact-actions button {
    cursor: pointer;
}
.muted {
    opacity: 0.72;
}
@media (min-width: 768px) {
    /*
      Keep the details stacked vertically even on larger screens so that the
      address and contact links remain easy to scan. The flex: 1 1 300px
      property defined above ensures this panel will align next to the form
      in the contact grid.  We intentionally avoid switching to row
      orientation here because it squashes the text into a single line.
    */
    .contact-details {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Contact form enhancements */
/*
  Use a flexible layout for the contact grid so that the address block and
  form align nicely across all screen sizes. A flex container allows
  children to wrap automatically and centre within the card.  Increased
  gap provides breathing room between the two halves.
*/
.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .contact-card {
    max-width: 900px;
    margin-inline: auto;
    /* Provide generous padding and a subtle border to distinguish the card
       from the background. The card stays centred on wide screens. */
    padding: clamp(2rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: var(--paper);
    box-shadow: 0 6px 12px rgba(0,0,0,0.04);
  }
  /* On larger screens, keep using flex: the children grow evenly and
     remain aligned to the top. */
  .contact-grid {
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
}

.contact-form {
  display: grid;
  gap: 1rem;
  text-align: left;
  /* Allow the form to grow and shrink within the flex container on wide screens. */
  flex: 1 1 300px;
}
.contact-form label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: block;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  background-color: #fff;
}
.contact-form textarea {
  resize: vertical;
}
.contact-form button {
  justify-self: start;
}
.g-recaptcha {
  margin-top: 0.5rem;
}

/* Footer */
.site-footer {
    padding: 2rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--font-size-sm);
}
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}
.footer-container a { color: var(--muted); }
@media (min-width: 768px) {
    .footer-container { flex-direction: row; justify-content: space-between; }
}

/* 6. Component Styles */
/* Accordion */
/*
  Accordion items should breathe a little more on long pages. A generous
  bottom margin ensures each section can be easily distinguished when
  scanning the Leistungen list on both the home page and the dedicated
  services page. Remove the margin on the last item to avoid trailing
  whitespace.  Increased from 1.5rem to 2rem per user feedback.
*/
.accordion-item {
  /* Use a card-like container for each service. A soft border, rounded
     corners and light drop shadow separate items from the page while
     maintaining the minimalistic aesthetic. */
  border: 1px solid var(--line);
  border-radius: 8px;
  background-color: var(--paper);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 2rem;
}
/* Remove bottom margin for the last accordion item */
.accordion-item:last-child {
  margin-bottom: 0;
}
.accordion-item:first-child {
  /* Remove the extra top border: the card now has its own border */
  border-top: none;
}
.accordion-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  text-decoration: none;
  text-align: left;
  padding: 1.5rem 1.25rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}
.accordion-header::after {
  content: '+';
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 0.3s ease;
}
.accordion-header[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

/* When expanded, subtly highlight the header to indicate active state */
.accordion-header[aria-expanded="true"] {
  background-color: var(--line);
}
.accordion-header:hover,
.accordion-header:focus {
  background-color: var(--line);
}
/* Style for the numbered prefix */
.accordion-number {
  font-family: var(--font-body);
  font-size: calc(var(--font-size-lg) * 0.8);
  font-weight: 700;
  color: var(--accent);
  margin-right: 1rem;
  flex-shrink: 0;
}
.accordion-title {
  flex-grow: 1;
}
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.accordion-header[aria-expanded="true"] + .accordion-content {
  grid-template-rows: 1fr;
}
.accordion-content-inner {
  overflow: hidden;
}
.accordion-content-inner p {
  color: var(--muted);
  padding: 0 1.25rem 1.5rem 1.25rem;
  margin-bottom: 0;
}

/* 7. Person Page Styles */
body.person-page { background-color: #fff; } /* Override paper for full white */
.sticky-header {
  border-bottom: 1px solid var(--line);
}
.sticky-header .logo-link { font-weight: 400; font-size: var(--font-size-base); }
.person-profile { max-width: 800px; }
.person-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  margin-bottom: 4rem;
}
.person-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}
.person-name { font-size: var(--font-size-3xl); margin-bottom: 0.5rem; }
.person-title { color: var(--muted); margin-bottom: 1rem; }
.person-bio { font-size: var(--font-size-lg); max-width: 50ch; margin: 0; }
@media (min-width: 768px) {
  .person-hero {
    flex-direction: row;
    text-align: left;
  }
}

/* Timeline List */
.timeline-list {
    list-style: none;
    border-left: 2px solid var(--line);
    padding-left: 1.75rem;
    margin: 0;
}
.timeline-item {
    position: relative;
    padding: 0.75rem 0 0.75rem 0.75rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.timeline-item + .timeline-item {
    margin-top: 0.25rem;
}
.timeline-item:last-child {
    padding-bottom: 0.75rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.05rem;
    top: 1.1rem;
    width: 0.75rem;
    height: 0.75rem;
    background-color: var(--paper);
    border: 2px solid var(--line);
    border-radius: 50%;
}
.reveal-on-scroll.is-visible .timeline-item {
    opacity: 1;
    transform: none;
}
.timeline-date {
    font-weight: 700;
    color: var(--accent);
}
.timeline-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    font-weight: 500;
    margin-block: 0.25rem;
}
.timeline-desc {
    color: var(--muted);
    margin: 0;
}

/* Person Profile Enhancements (2024-05) */
.person-profile .kv {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 2.2fr;
    gap: 0.5rem 1.5rem;
    margin-block: 1.5rem;
}
.person-profile .kv div:nth-child(odd) {
    color: var(--muted);
    font-weight: 600;
}
@media (max-width: 720px) {
    .person-profile .kv {
        grid-template-columns: 1fr;
    }
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--chip-bg, rgba(0, 0, 0, 0.04));
    margin: 0.2rem 0.4rem 0.2rem 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.person-profile details {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    background: var(--paper);
    margin-top: 1.25rem;
}

.person-profile details > summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.person-profile details > summary::-webkit-details-marker {
    display: none;
}

.person-profile .person-links .social-link {
    text-decoration: underline;
}

.contact-note {
    margin-top: 1rem;
}

/* Person details grid */
.person-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-block: 4rem;
}
@media (min-width: 768px) {
    .person-details-grid { grid-template-columns: 2fr 1fr; }
}

.expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.expertise-tags span {
    background-color: var(--paper);
    border: 1px solid var(--line);
    padding: 0.25rem 0.75rem;
    border-radius: 99px;
    font-size: var(--font-size-sm);
}

.person-contact-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2rem;
    margin-top: 4rem;
    border-top: 1px solid var(--line);
}
.person-links { display: flex; gap: 1rem; }
.social-link { color: var(--ink); font-weight: 500; }
.aspect-3-2 { aspect-ratio: 3 / 2; }

@media (min-width: 768px) {
    .person-contact-cta { flex-direction: row; }
}


/* 8. Utility & Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  background-color: var(--ink);
  color: var(--paper);
  padding: 0.5rem 1rem;
  z-index: 9999;
  transition: transform 0.2s ease-in-out;
}
.skip-link:focus {
  transform: translate(-50%, 10%);
}
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Reveal on Scroll */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(10px); /* Make the upward movement more subtle */
  transition: opacity 0.8s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.8s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .logo-animated-wrapper svg,
  .logo-animated-wrapper img {
    animation: none;
  }
  .reveal-on-scroll {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* 9. Project Page Styles (Moved from inline <style> tags) */
.project-page {
  background-color: var(--paper);
  color: var(--ink);
}

.project-page .site-header,
.project-page .site-footer {
  background-color: transparent;
  border-color: var(--line);
}

.project-page .site-header a,
.project-page .site-footer a {
  color: var(--muted);
}

.project-page .project-title {
  font-size: var(--font-size-3xl);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.project-page .project-meta {
  color: var(--muted);
  margin-bottom: 2rem;
}

.project-page .project-hero img {
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.project-page .project-overview,
.project-page .project-gallery,
.project-page .project-cta {
  background-color: rgba(255, 255, 255, 0.9);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(17, 24, 39, 0.08);
  margin-bottom: 2.5rem;
}

.project-page .project-description {
  max-width: 60ch;
  margin-bottom: 2rem;
  font-size: var(--font-size-lg);
  line-height: 1.65;
  color: var(--ink);
}

.project-page .project-details {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.project-page .project-details div {
  flex: 1 1 200px;
}

.project-page .project-details h4 {
  font-size: var(--font-size-lg);
  margin-bottom: 0.25rem;
  color: var(--ink);
}

.project-page .project-details p {
  margin: 0;
  color: var(--muted);
}

.project-page .project-gallery h2 {
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.project-page .gallery {
  display: grid;
  gap: 1rem;
}

.project-page .gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
}

@media (min-width: 768px) {
  .project-page .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-page .project-cta {
  text-align: center;
  background-color: rgba(247, 244, 239, 0.95);
}

.project-page .project-cta p {
  margin-bottom: 1.5rem;
  color: var(--muted);
}

.project-page .cta-button {
  background-color: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.project-page .cta-button:hover,
.project-page .cta-button:focus {
  background-color: transparent;
  color: var(--ink);
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 6px;
}

.about-intro {
  text-align: center;  /* Zentriert den Text innerhalb des Blocks */
  margin-inline: auto; /* Zentriert den Block selbst auf der Seite */
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.accordion-item,
.value-card,
.work-card,
.project-overview,
.project-gallery,
.project-cta,
.contact-card,
.testimonial-card,
.credentials-block,
.process-step {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}