/* Shared project layout: the same padded sections and 1328px containers
   used by Homepage, Leistungen and Kontakt. No separate gutter tokens. */
body.projekte-page :is(.projekte-hero, .projekte-gallery, .projekte-references),
body.case-page main > :is(.case-hero, .case-intro, .case-process, .case-feature, .case-contact, .case-related) {
  padding-inline:var(--ao-page-gutter, var(--ao-responsive-gutter, 56px));
}
body.projekte-page :is(.projekte-hero-inner, .projekte-grid, .projekte-references-inner),
body.case-page :is(.case-grid, .case-intro-inner) {
  width:100%; max-width:1328px; margin-inline:auto; padding-inline:0;
}
/* Intro prose keeps its existing reading measure inside the aligned container. */
body.case-page .case-intro-copy { max-width:1000px; }
body.case-page .case-contact-card { right:0; }
body.case-page .case-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

/* One natural hero composition accommodates different copy and wrapped tags. */
body.case-page .case-hero { height:auto; }
body.case-page .case-hero-inner {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:end; align-content:end; gap:32px 40px;
  height:auto; min-height:580px; padding-block:64px;
}
body.case-page :is(.case-hero-title, .case-hero-copy, .case-tags) {
  position:static; inset:auto; width:100%; max-width:100%; min-width:0;
}
body.case-page .case-hero-copy { text-align:left; margin:0!important; }
body.case-page .case-tags {
  grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap;
  gap:12px; margin:0;
}
body.case-page .case-tag {
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:auto; max-width:100%; height:38px; min-height:38px; margin:0;
  padding:8px 18px; border-radius:19px; font-size:13px; font-weight:600;
  line-height:22px; text-align:center; white-space:nowrap;
}
body.case-page .case-tag > span { transform:none; }

/* Overview uses the shared grid width; existing card typography and visuals remain. */
body.projekte-page .projekte-hero { height:auto; padding-block:56px 32px; }
body.projekte-page .projekte-hero-inner { height:auto; }
body.projekte-page :is(.projekte-eyebrow, .projekte-hero h1, .projekte-intro) {
  position:static; inset:auto;
}
body.projekte-page .projekte-hero h1 { margin-top:20px; }
body.projekte-page .projekte-intro { width:100%; max-width:960px; margin-top:20px; }
body.projekte-page .projekte-gallery { height:auto; }
body.projekte-page .projekte-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto;
  gap:var(--ao-card-gap,40px);
}
body:is(.projekte-page,.case-page) .projekte-card {
  display:flex; flex-direction:column; height:auto; padding:12px 0 20px;
}
body:is(.projekte-page,.case-page) .projekte-visual {
  position:relative; inset:auto; height:auto; aspect-ratio:400 / 264;
}
body:is(.projekte-page,.case-page) :is(.projekte-card h2, .projekte-description, .projekte-case-link) {
  position:relative; inset:auto; width:100%;
}
body:is(.projekte-page,.case-page) .projekte-card h2 { margin-top:16px; }
body:is(.projekte-page,.case-page) .projekte-description { margin-top:11px; }
body:is(.projekte-page,.case-page) .projekte-case-link { margin-top:auto; padding-top:28px; }

@media (max-width:1100px) {
  body.projekte-page .projekte-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1050px), (orientation:portrait) and (max-width:1199px) {
  body.case-page .case-hero-inner { grid-template-columns:minmax(0,1fr); }
  body.case-page .case-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  body.case-page .case-hero-inner { min-height:0; padding-block:56px 48px; }
  body.case-page .case-related-grid { grid-template-columns:minmax(0,1fr); max-width:none; }
}
@media (max-width:600px) {
  body.projekte-page .projekte-grid { grid-template-columns:minmax(0,1fr); }
  body.projekte-page .projekte-hero { padding-block:36px 24px; }
  body.projekte-page .projekte-hero h1 { margin-top:16px; }
  body.projekte-page .projekte-intro { margin-top:18px; }
}

/* Shared project refinements; the established global gutters stay unchanged. */
body.case-page :is(.case-hero, .case-hero-image, .case-hero-overlay) { border-radius:0; }
body.case-page .case-process { height:auto; padding-block:56px 70px; }
body.case-page .case-process-inner { height:auto; }
body.case-page :is(.case-process-eyebrow, .case-process-title, .case-process-cards) {
  position:relative; inset:auto;
}
body.case-page .case-process-title { margin-top:10px!important; }
body.case-page .case-process-cards { margin-top:48px; align-items:stretch; }
body.case-page .case-process-card {
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-content:start; align-items:center; gap:24px 16px;
  height:auto; min-height:0; padding:28px 30px 36px;
}
body.case-page :is(.case-process-number, .case-process-card-title, .case-process-card-copy) {
  position:relative; inset:auto; margin:0!important; min-width:0;
}
body.case-page .case-process-card-title { grid-column:1; grid-row:1; }
body.case-page .case-process-number { grid-column:2; grid-row:1; text-align:right; }
body.case-page .case-process-card-copy { grid-column:1 / -1; }
@media (orientation:portrait) and (min-width:701px) and (max-width:1199px) {
  body.case-page .case-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.case-page .case-related-grid > :nth-child(n+3) { display:none; }
}
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (max-width:1100px) {
  body.case-page .case-tag:not(:first-child) { display:none; }
  body.case-page .case-visual-strip {
    display:flex; height:auto; overflow-x:auto; overflow-y:hidden;
    gap:10px; scrollbar-width:none; scroll-behavior:auto;
    scroll-snap-type:none; overscroll-behavior-x:contain;
  }
  body.case-page .case-visual-strip::-webkit-scrollbar { display:none; }
  body.case-page .case-strip-image {
    flex:0 0 80%; height:auto; aspect-ratio:1.25;
  }
  body.case-page .case-process-card { padding-inline:24px; }
}

/* Portrait-tablet cards share one width, with the final card centered. */
@media (orientation:portrait) and (min-width:701px) and (max-width:1199px) {
  body.case-page .case-process-cards {
    grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:auto;
  }
  body.case-page .case-process-card { grid-column:span 2; }
  body.case-page .case-process-card:last-child:nth-child(odd) { grid-column:2 / 4; }
  body.case-page .case-contact-inner { grid-template-columns:minmax(0,1fr); }
  body.case-page .case-contact-card { width:420px; max-width:100%; margin-inline:auto; }
}
/* Content determines card height even when a project has longer copy. */
body.case-page .case-process-card { grid-template-rows:auto auto; overflow:visible; }
body.case-page .case-process-card-copy { grid-row:2; }
@media (max-width:700px), (orientation:landscape) and (max-height:500px) and (max-width:1100px) {
  body.case-page .case-hero-title {
    font-size:clamp(30px,8.2vw,38px); line-height:1.2;
    white-space:normal; overflow-wrap:anywhere; min-width:0; max-width:100%;
  }
  body.case-page .case-hero-copy { white-space:normal; overflow-wrap:anywhere; }
}

/* Reuse the site's tablet classification; short landscape phones stay stacked. */
@media (orientation:landscape) and (min-width:951px) and (min-height:501px) {
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact {
    height:auto; padding-block:56px;
  }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact-inner {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,1fr);
    align-items:center; gap:40px; height:auto;
  }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact-copy {
    width:100%; max-width:none; min-width:0; height:auto;
  }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page :is(.case-contact-eyebrow, .case-contact-title, .case-contact-body, .case-project-cta) {
    position:relative; inset:auto; max-width:100%;
  }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact-title { margin-top:14px!important; }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact-body { margin-top:22px!important; }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-project-cta { margin-top:30px; }
  html:is([data-ao-tablet="landscape"], [data-ao-tablet-header="landscape"]) body.case-page .case-contact-card {
    position:relative; inset:auto; width:420px; max-width:100%;
    justify-self:center; align-self:center; margin:0;
  }
}

/* Focused vertical CTA: heading, contact card, then action. */
@media (max-width:700px), (orientation:portrait) and (max-width:1199px), (orientation:landscape) and (max-height:500px) and (max-width:1100px) {
  body.case-page .case-contact { height:auto; padding-block:56px; }
  body.case-page .case-contact-inner {
    display:grid; grid-template-columns:minmax(0,1fr); height:auto; gap:32px;
    justify-items:center;
  }
  body.case-page .case-contact-copy {
    width:100%; max-width:660px; height:auto; text-align:center;
  }
  body.case-page :is(.case-contact-eyebrow, .case-contact-title) {
    position:relative; inset:auto; width:100%; max-width:100%;
  }
  body.case-page .case-contact-title { margin-top:14px!important; overflow-wrap:anywhere; }
  body.case-page .case-contact-body { display:none; }
  body.case-page .case-contact-card {
    position:relative; inset:auto; width:420px; max-width:100%; margin-inline:auto;
  }
  body.case-page .case-contact-inner > .case-project-cta {
    position:relative; inset:auto; width:220px; max-width:100%; margin:0;
  }
}