/* =========================================================
   PROJECTS
   Public Project Overview + Project Detail
   Chucky1337 Community Portal
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

.projects-page,
.project-page {
  --projects-accent: var(--accent, #7c3aed);
  --projects-accent-2: #8b5cf6;

  --projects-success: #22c55e;
  --projects-warning: #f59e0b;
  --projects-info: #3b82f6;
  --projects-danger: #ef4444;

  --projects-panel:
    color-mix(
      in srgb,
      var(--bg-elevated, #16161c) 95%,
      transparent
    );

  --projects-panel-soft:
    color-mix(
      in srgb,
      var(--bg-elevated, #16161c) 82%,
      transparent
    );

  --projects-line:
    var(
      --line,
      rgba(255, 255, 255, .09)
    );

  --projects-muted:
    var(
      --text-faint,
      rgba(255, 255, 255, .58)
    );

  --projects-soft-text:
    var(
      --text-soft,
      rgba(255, 255, 255, .76)
    );

  --projects-accent-soft:
    color-mix(
      in srgb,
      var(--projects-accent) 14%,
      transparent
    );
}


/* =========================================================
   BASE
========================================================= */

.projects-page *,
.project-page *,
.project-lightbox * {
  box-sizing: border-box;
}


.projects-page,
.project-page {
  overflow: clip;
}


.projects-page img,
.project-page img {
  max-width: 100%;
}


.projects-page [hidden],
.project-page [hidden],
.project-lightbox[hidden] {
  display: none !important;
}


/* =========================================================
   BUTTON NORMALIZATION

   Wichtig:
   Alle Buttons im Projektbereich bekommen eine einheitliche
   Icon/Text Ausrichtung.

   Dadurch kleben Font Awesome Icons nicht mehr am Text.
========================================================= */

.projects-page .button,
.project-page .button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 42px;

  line-height: 1;

  text-align: center;
  white-space: nowrap;
}


.projects-page .button > i,
.project-page .button > i {
  display: inline-grid;

  place-items: center;

  flex: 0 0 16px;

  width: 16px;
  height: 16px;

  margin: 0;
  padding: 0;

  line-height: 1;

  transform: none;
}


.projects-page .button > i::before,
.project-page .button > i::before {
  display: block;

  margin: 0;
  padding: 0;

  line-height: 1;
}


.projects-page .button > span,
.project-page .button > span {
  display: inline-flex;

  align-items: center;

  min-width: 0;

  line-height: 1.15;
}


.projects-page .button:active > i,
.project-page .button:active > i {
  transform: none;
}


/* =========================================================
   PROJECTS OVERVIEW HERO
========================================================= */

.projects-hero {
  position: relative;

  overflow: hidden;

  padding:
    100px
    0
    105px;

  border-bottom:
    1px solid
    var(--projects-line);

  background:
    radial-gradient(
      circle at 73% 42%,
      rgba(124, 58, 237, .22),
      transparent 32rem
    ),
    radial-gradient(
      circle at 15% 10%,
      rgba(59, 130, 246, .10),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--bg-elevated) 94%,
        black
      ),
      var(--bg)
    );
}


.projects-hero::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -240px;

  width: 680px;
  height: 420px;

  border:
    1px solid
    rgba(124, 58, 237, .14);

  border-radius: 50%;

  transform:
    translateX(-50%);

  pointer-events: none;
}


/* =========================================================
   HERO GRID
========================================================= */

.projects-hero-grid {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .22;

  background:
    linear-gradient(
      rgba(255, 255, 255, .07) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .07) 1px,
      transparent 1px
    );

  background-size:
    58px
    58px;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .86),
      transparent 94%
    );
}


/* =========================================================
   HERO LAYOUT
========================================================= */

.projects-hero-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(310px, .95fr);

  align-items: center;

  gap: 70px;
}


/* =========================================================
   HERO COPY
========================================================= */

.projects-hero-copy {
  max-width: 760px;
}


.projects-hero-copy h1 {
  max-width: 790px;

  margin:
    8px
    0
    0;

  font-size:
    clamp(
      3rem,
      6.4vw,
      5.8rem
    );

  line-height: .95;

  letter-spacing: -.065em;
}


.projects-hero-copy > p {
  max-width: 690px;

  margin:
    22px
    0
    0;

  color:
    var(--projects-soft-text);

  font-size:
    clamp(
      .9rem,
      1.35vw,
      1.03rem
    );

  line-height: 1.78;
}


.projects-hero-copy > p + p {
  margin-top: 12px;

  color:
    var(--projects-muted);

  font-size: .82rem;
}


/* =========================================================
   HERO SIDE
========================================================= */

.projects-hero-side {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  gap: 12px;

  flex-wrap: wrap;
}


/* =========================================================
   HERO PROJECT COUNT
========================================================= */

.projects-hero-stat {
  display: flex;

  min-width: 175px;

  flex-direction: column;

  gap: 6px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(139, 92, 246, .24);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(124, 58, 237, .18),
      transparent 60%
    ),
    var(--projects-panel);

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, .14);

  backdrop-filter:
    blur(16px);
}


.projects-hero-stat span {
  color:
    var(--projects-muted);

  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .085em;
}


.projects-hero-stat strong {
  font-size: 2.15rem;

  line-height: 1;

  letter-spacing: -.045em;
}


/* =========================================================
   HERO LANGUAGE
========================================================= */

.projects-hero-side
.projects-language {
  display: inline-flex;

  gap: 4px;

  padding: 4px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 12px;

  background:
    var(--projects-panel);
}


.projects-hero-side
.projects-language a {
  display: grid;

  place-items: center;

  min-width: 39px;

  height: 32px;

  border-radius: 8px;

  color:
    var(--projects-muted);

  text-decoration: none;

  font-size: .65rem;

  font-weight: 900;

  transition:
    color .18s ease,
    background .18s ease;
}


.projects-hero-side
.projects-language a:hover {
  color:
    var(--text);

  background:
    var(--projects-panel-soft);
}


.projects-hero-side
.projects-language a.is-active {
  color: #fff;

  background:
    var(--projects-accent);
}


/* =========================================================
   PROJECTS INTRO
========================================================= */

.projects-intro {
  padding:
    76px
    0
    0;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.project-section-heading {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;

  margin-bottom: 34px;
}


.project-section-heading h2 {
  margin:
    6px
    0
    0;

  font-size:
    clamp(
      1.8rem,
      3.4vw,
      2.65rem
    );

  letter-spacing: -.045em;
}


.project-section-heading > p {
  max-width: 500px;

  margin: 0;

  color:
    var(--projects-muted);

  font-size: .82rem;

  line-height: 1.7;
}


/* =========================================================
   PROJECTS LIST SECTION
========================================================= */

.projects-list-section {
  padding:
    34px
    0
    105px;
}


/* =========================================================
   PROJECTS PUBLIC GRID
========================================================= */

.projects-public-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 20px;
}


/* =========================================================
   PUBLIC PROJECT CARD
========================================================= */

.project-public-card {
  position: relative;

  display: flex;

  min-width: 0;

  overflow: hidden;

  flex-direction: column;

  border:
    1px solid
    var(--projects-line);

  border-radius: 23px;

  background:
    var(--projects-panel);

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, .08);

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}


.project-public-card:hover {
  border-color:
    rgba(139, 92, 246, .34);

  transform:
    translateY(-4px);

  box-shadow:
    0 27px 70px
    rgba(0, 0, 0, .16);
}


/* =========================================================
   PUBLIC PROJECT MEDIA
========================================================= */

.project-public-card-media {
  position: relative;

  display: block;

  aspect-ratio:
    16 / 9;

  overflow: hidden;

  color: inherit;

  text-decoration: none;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(124, 58, 237, .18),
      transparent 60%
    ),
    #111118;
}


.project-public-card-media::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, .04),
      rgba(0, 0, 0, .18)
    );
}


.project-public-card-media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .45s ease;
}


.project-public-card:hover
.project-public-card-media img {
  transform:
    scale(1.025);
}


/* =========================================================
   PROJECT PLACEHOLDER
========================================================= */

.project-public-placeholder {
  display: grid;

  place-items: center;
  align-content: center;

  width: 100%;
  height: 100%;

  gap: 12px;

  color:
    rgba(196, 181, 253, .72);
}


.project-public-placeholder i {
  font-size: 2.7rem;
}


.project-public-placeholder span {
  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .14em;
}


/* =========================================================
   PROJECT MEDIA TOP
========================================================= */

.project-public-card-media-top {
  position: absolute;

  z-index: 3;

  top: 14px;
  right: 14px;
  left: 14px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


/* =========================================================
   PROJECT STATUS
========================================================= */

.project-public-status {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 29px;

  padding:
    5px
    10px;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius: 999px;

  color: #c4b5fd;

  background:
    rgba(13, 12, 18, .70);

  backdrop-filter:
    blur(14px);

  font-size: .62rem;

  font-weight: 900;

  letter-spacing: .06em;

  text-transform: uppercase;
}


.project-public-status > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    currentColor;

  box-shadow:
    0 0 9px
    currentColor;
}


.project-public-status.is-seeking {
  color: #c084fc;
}


.project-public-status.is-funded {
  color: #4ade80;
}


.project-public-status.is-active {
  color: #60a5fa;
}


.project-public-status.is-completed {
  color: #34d399;
}


/* =========================================================
   LANGUAGE BADGE
========================================================= */

.project-public-language-badge {
  display: inline-flex;

  align-items: center;

  min-height: 29px;

  padding:
    5px
    10px;

  border:
    1px solid
    rgba(255, 255, 255, .14);

  border-radius: 999px;

  color: #fff;

  background:
    rgba(13, 12, 18, .70);

  backdrop-filter:
    blur(14px);

  font-size: .59rem;

  font-weight: 900;

  letter-spacing: .06em;
}


/* =========================================================
   PUBLIC PROJECT CARD BODY
========================================================= */

.project-public-card-body {
  display: flex;

  min-width: 0;

  flex: 1;

  flex-direction: column;

  padding: 25px;
}


/* =========================================================
   CARD HEADING
========================================================= */

.project-public-card-heading {
  margin-bottom: 22px;
}


.project-public-card-heading h2 {
  margin:
    6px
    0
    0;

  font-size:
    clamp(
      1.25rem,
      2vw,
      1.65rem
    );

  line-height: 1.25;
}


.project-public-card-heading h2 a {
  color: inherit;

  text-decoration: none;
}


.project-public-card-heading h2 a:hover {
  color:
    var(--projects-accent-2);
}


.project-public-card-heading p {
  display: -webkit-box;

  margin:
    10px
    0
    0;

  overflow: hidden;

  color:
    var(--projects-muted);

  font-size: .82rem;

  line-height: 1.68;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp: 3;
}


/* =========================================================
   PUBLIC PROJECT FINANCE
========================================================= */

.project-public-finance {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-bottom: 18px;
}


.project-public-finance > div {
  min-width: 0;

  padding: 12px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 12px;

  background:
    var(--projects-panel-soft);
}


.project-public-finance span {
  display: block;

  margin-bottom: 4px;

  color:
    var(--projects-muted);

  font-size: .56rem;

  font-weight: 800;

  text-transform: uppercase;
}


.project-public-finance strong {
  display: block;

  overflow: hidden;

  font-size: .78rem;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   PUBLIC PROGRESS
========================================================= */

.project-public-progress {
  margin-bottom: 18px;
}


.project-public-progress-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 7px;

  color:
    var(--projects-muted);

  font-size: .65rem;
}


.project-public-progress-head strong {
  color:
    var(--projects-accent-2);
}


.project-public-progress-track {
  height: 6px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(--projects-line);
}


.project-public-progress-track > span {
  display: block;

  height: 100%;

  max-width: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--projects-accent),
      var(--projects-success)
    );
}


/* =========================================================
   NO BUDGET
========================================================= */

.project-public-no-budget {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 18px;

  padding:
    12px
    13px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 12px;

  color:
    var(--projects-muted);

  background:
    var(--projects-panel-soft);

  font-size: .66rem;

  line-height: 1.5;
}


.project-public-no-budget i {
  flex: 0 0 auto;

  color:
    var(--projects-accent-2);
}


/* =========================================================
   PROJECT SUPPORT NOTE
========================================================= */

.project-public-support {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 18px;

  padding: 13px;

  border:
    1px solid
    rgba(139, 92, 246, .18);

  border-radius: 13px;

  background:
    rgba(124, 58, 237, .07);
}


.project-public-support-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 38px;
  height: 38px;

  border-radius: 11px;

  color: #c4b5fd;

  background:
    var(--projects-accent-soft);
}


.project-public-support > div:last-child {
  min-width: 0;
}


.project-public-support strong,
.project-public-support span {
  display: block;
}


.project-public-support strong {
  margin-bottom: 2px;

  font-size: .72rem;
}


.project-public-support span {
  color:
    var(--projects-muted);

  font-size: .62rem;

  line-height: 1.45;
}


/* =========================================================
   PUBLIC CARD ACTIONS
========================================================= */

.project-public-card-actions {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

  margin-top: auto;

  padding-top: 18px;

  border-top:
    1px solid
    var(--projects-line);
}


/* =========================================================
   PROJECTS EMPTY
========================================================= */

.projects-public-empty {
  display: flex;

  min-height: 380px;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding:
    50px
    30px;

  border:
    1px dashed
    var(--projects-line);

  border-radius: 24px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0,
      var(--projects-accent-soft),
      transparent 52%
    ),
    var(--projects-panel);
}


.projects-public-empty-icon {
  display: grid;

  place-items: center;

  width: 64px;
  height: 64px;

  margin-bottom: 18px;

  border-radius: 19px;

  color:
    var(--projects-accent-2);

  background:
    var(--projects-accent-soft);

  font-size: 1.5rem;
}


.projects-public-empty h2 {
  margin:
    7px
    0;

  font-size: 1.35rem;
}


.projects-public-empty p {
  max-width: 520px;

  margin: 0;

  color:
    var(--projects-muted);

  font-size: .78rem;

  line-height: 1.7;
}


/* =========================================================
   PROJECT PROCESS
========================================================= */

.projects-process-section {
  padding:
    95px
    0;

  border-top:
    1px solid
    var(--projects-line);

  border-bottom:
    1px solid
    var(--projects-line);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(124, 58, 237, .08),
      transparent 30rem
    ),
    color-mix(
      in srgb,
      var(--bg-elevated) 45%,
      transparent
    );
}


.projects-process-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 12px;
}


.projects-process-grid article {
  min-width: 0;

  padding: 22px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 17px;

  background:
    var(--projects-panel);
}


.projects-process-grid article > span {
  display: block;

  margin-bottom: 25px;

  color:
    var(--projects-accent-2);

  font-size: .6rem;

  font-weight: 900;

  letter-spacing: .1em;
}


.projects-process-grid article > i {
  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 17px;

  border-radius: 12px;

  color: #c4b5fd;

  background:
    var(--projects-accent-soft);
}


.projects-process-grid h3 {
  margin:
    0
    0
    7px;

  font-size: .95rem;
}


.projects-process-grid p {
  margin: 0;

  color:
    var(--projects-muted);

  font-size: .69rem;

  line-height: 1.62;
}


/* =========================================================
   PARTNER CTA
========================================================= */

.projects-partner-section {
  padding:
    95px
    0
    105px;
}


.projects-partner-card {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 25px;

  overflow: hidden;

  padding: 28px;

  border:
    1px solid
    rgba(139, 92, 246, .22);

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(124, 58, 237, .18),
      transparent 38%
    ),
    var(--projects-panel);
}


.projects-partner-card::after {
  content: "";

  position: absolute;

  right: -80px;
  bottom: -120px;

  width: 260px;
  height: 260px;

  border:
    1px solid
    rgba(139, 92, 246, .13);

  border-radius: 50%;

  pointer-events: none;
}


.projects-partner-icon {
  position: relative;

  z-index: 2;

  display: grid;

  place-items: center;

  width: 62px;
  height: 62px;

  border-radius: 18px;

  color: #c4b5fd;

  background:
    var(--projects-accent-soft);

  font-size: 1.35rem;
}


.projects-partner-copy {
  position: relative;

  z-index: 2;
}


.projects-partner-copy h2 {
  margin:
    4px
    0
    6px;

  font-size: 1.35rem;
}


.projects-partner-copy p {
  max-width: 760px;

  margin: 0;

  color:
    var(--projects-muted);

  font-size: .78rem;

  line-height: 1.6;
}


.projects-partner-card > .button {
  position: relative;

  z-index: 2;
}


/* =========================================================
   PROJECT DETAIL HERO
========================================================= */

.project-detail-hero {
  position: relative;

  min-height: 630px;

  overflow: hidden;

  border-bottom:
    1px solid
    var(--projects-line);

  background:
    radial-gradient(
      circle at 75% 35%,
      rgba(124, 58, 237, .18),
      transparent 33rem
    ),
    linear-gradient(
      180deg,
      #15131d,
      var(--bg)
    );
}


/* =========================================================
   DETAIL COVER
========================================================= */

.project-detail-hero-image {
  position: absolute;

  inset: 0;
}


.project-detail-hero-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.project-detail-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(10, 9, 15, .94) 0%,
      rgba(10, 9, 15, .80) 43%,
      rgba(10, 9, 15, .42) 72%,
      rgba(10, 9, 15, .52) 100%
    ),
    linear-gradient(
      0deg,
      rgba(10, 9, 15, .90),
      transparent 55%
    );
}


.project-detail-hero.no-cover
.project-detail-hero-overlay {
  background:
    radial-gradient(
      circle at 76% 36%,
      rgba(124, 58, 237, .20),
      transparent 26rem
    ),
    linear-gradient(
      180deg,
      rgba(13, 12, 19, .25),
      rgba(13, 12, 19, .8)
    );
}


/* =========================================================
   DETAIL HERO GRID
========================================================= */

.project-detail-hero-grid {
  position: absolute;

  z-index: 2;

  inset: 0;

  opacity: .16;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(255, 255, 255, .08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .08) 1px,
      transparent 1px
    );

  background-size:
    62px
    62px;

  mask-image:
    linear-gradient(
      90deg,
      black,
      transparent 80%
    );
}


/* =========================================================
   DETAIL HERO CONTENT
========================================================= */

.project-detail-hero
.content-shell {
  position: relative;

  z-index: 3;

  min-height: 630px;
}


.project-detail-hero-content {
  display: flex;

  justify-content: center;

  min-height: 630px;

  max-width: 850px;

  flex-direction: column;

  padding:
    72px
    0;
}


/* =========================================================
   BACK LINK
========================================================= */

.project-back-link {
  display: inline-flex;

  align-items: center;
  align-self: flex-start;

  gap: 8px;

  margin-bottom: 42px;

  color:
    rgba(255, 255, 255, .66);

  font-size: .7rem;

  font-weight: 700;

  text-decoration: none;
}


.project-back-link:hover {
  color: #fff;
}


/* =========================================================
   DETAIL META
========================================================= */

.project-detail-meta {
  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

  margin-bottom: 17px;
}


/* =========================================================
   DETAIL LANGUAGE
========================================================= */

.project-detail-language {
  display: inline-flex;

  gap: 3px;

  padding: 3px;

  border:
    1px solid
    rgba(255, 255, 255, .13);

  border-radius: 999px;

  background:
    rgba(13, 12, 18, .55);

  backdrop-filter:
    blur(12px);
}


.project-detail-language a {
  display: grid;

  place-items: center;

  min-width: 31px;

  height: 23px;

  border-radius: 999px;

  color:
    rgba(255, 255, 255, .58);

  font-size: .57rem;

  font-weight: 900;

  text-decoration: none;
}


.project-detail-language a.is-active {
  color: #fff;

  background:
    var(--projects-accent);
}


/* =========================================================
   DETAIL TITLE
========================================================= */

.project-detail-title h1 {
  max-width: 850px;

  margin:
    8px
    0
    0;

  color: #fff;

  font-size:
    clamp(
      2.7rem,
      6.5vw,
      5.4rem
    );

  line-height: .98;

  letter-spacing: -.06em;
}


.project-detail-title p {
  max-width: 720px;

  margin:
    21px
    0
    0;

  color:
    rgba(255, 255, 255, .73);

  font-size:
    clamp(
      .94rem,
      1.4vw,
      1.05rem
    );

  line-height: 1.75;
}


/* =========================================================
   DETAIL ACTIONS
========================================================= */

.project-detail-actions {
  display: flex;

  gap: 9px;

  flex-wrap: wrap;

  margin-top: 28px;
}


.project-detail-actions .button {
  min-height: 42px;

  padding-inline: 16px;
}


/* =========================================================
   FINANCE SECTION
========================================================= */

.project-finance-section {
  position: relative;

  z-index: 5;

  margin-top: -54px;
}


.project-finance-card {
  display: grid;

  grid-template-columns:
    minmax(230px, .75fr)
    minmax(0, 1.25fr);

  gap: 30px;

  padding:
    25px
    27px;

  border:
    1px solid
    rgba(139, 92, 246, .24);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(124, 58, 237, .13),
      transparent 40%
    ),
    color-mix(
      in srgb,
      var(--bg-elevated) 94%,
      transparent
    );

  box-shadow:
    0 26px 65px
    rgba(0, 0, 0, .22);

  backdrop-filter:
    blur(20px);
}


/* =========================================================
   FINANCE MAIN
========================================================= */

.project-finance-main {
  padding-right: 25px;

  border-right:
    1px solid
    var(--projects-line);
}


.project-finance-total {
  margin-top: 9px;
}


.project-finance-total > span {
  display: block;

  margin-bottom: 2px;

  color:
    var(--projects-muted);

  font-size: .65rem;
}


.project-finance-total > strong {
  font-size:
    clamp(
      1.7rem,
      3.5vw,
      2.6rem
    );

  letter-spacing: -.045em;
}


.project-finance-total > small {
  margin-left: 5px;

  color:
    var(--projects-muted);

  font-size: .65rem;
}


/* =========================================================
   FINANCE STATS
========================================================= */

.project-finance-stats {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.project-finance-stats > div {
  min-width: 0;

  padding:
    12px
    14px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 12px;

  background:
    var(--projects-panel-soft);
}


.project-finance-stats span {
  display: block;

  margin-bottom: 4px;

  color:
    var(--projects-muted);

  font-size: .58rem;

  font-weight: 800;

  text-transform: uppercase;
}


.project-finance-stats strong {
  display: block;

  overflow: hidden;

  font-size: .85rem;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* =========================================================
   FINANCE PROGRESS
========================================================= */

.project-finance-progress {
  grid-column: 2;
}


.project-finance-progress
> div:first-child {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  margin:
    12px
    0
    6px;

  color:
    var(--projects-muted);

  font-size: .65rem;
}


.project-finance-progress
> div:first-child strong {
  color:
    var(--projects-accent-2);
}


.project-finance-progress-track {
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(--projects-line);
}


.project-finance-progress-track span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--projects-accent),
      #22c55e
    );
}


/* =========================================================
   DETAIL CONTENT SECTION
========================================================= */

.project-detail-section {
  padding:
    105px
    0
    100px;
}


.project-detail-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(290px, 360px);

  align-items: start;

  gap: 65px;
}


.project-detail-content > header {
  margin-bottom: 27px;
}


.project-detail-content h2 {
  margin:
    6px
    0
    0;

  font-size:
    clamp(
      1.8rem,
      3.5vw,
      2.7rem
    );

  letter-spacing: -.045em;
}


/* =========================================================
   DETAIL TEXT
========================================================= */

.project-detail-text {
  color:
    var(--projects-soft-text);

  font-size: .94rem;

  line-height: 1.85;
}


.project-detail-text > *:first-child {
  margin-top: 0;
}


.project-detail-text > *:last-child {
  margin-bottom: 0;
}


.project-detail-text p {
  margin:
    0
    0
    20px;
}


.project-detail-text h2,
.project-detail-text h3,
.project-detail-text h4 {
  color:
    var(--text);
}


.project-detail-text h2 {
  margin:
    40px
    0
    15px;

  font-size: 1.55rem;
}


.project-detail-text h3 {
  margin:
    34px
    0
    12px;

  font-size: 1.2rem;
}


.project-detail-text ul,
.project-detail-text ol {
  margin:
    18px
    0
    22px;

  padding-left: 22px;
}


.project-detail-text li {
  margin-bottom: 8px;
}


.project-detail-text strong {
  color:
    var(--text);
}


/* =========================================================
   SIDEBAR
========================================================= */

.project-detail-sidebar {
  position: sticky;

  top: 100px;

  display: grid;

  gap: 14px;
}


.project-side-card {
  padding: 20px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 18px;

  background:
    var(--projects-panel);
}


.project-side-list {
  display: grid;

  margin-top: 15px;
}


.project-side-list > div {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    12px
    0;

  border-bottom:
    1px solid
    var(--projects-line);
}


.project-side-list > div:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.project-side-list span {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--projects-muted);

  font-size: .66rem;
}


.project-side-list span i {
  width: 14px;

  color:
    var(--projects-accent-2);

  text-align: center;
}


.project-side-list strong {
  font-size: .7rem;

  text-align: right;
}


.project-side-card.is-highlight {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(124, 58, 237, .16),
      transparent 50%
    ),
    var(--projects-panel);
}


.project-side-icon {
  display: grid;

  place-items: center;

  width: 43px;
  height: 43px;

  margin-bottom: 14px;

  border-radius: 13px;

  color: #c4b5fd;

  background:
    var(--projects-accent-soft);
}


.project-side-card h3 {
  margin:
    0
    0
    7px;

  font-size: 1rem;
}


.project-side-card p {
  margin:
    0
    0
    17px;

  color:
    var(--projects-muted);

  font-size: .72rem;

  line-height: 1.6;
}


.project-side-card .button {
  width: 100%;

  justify-content: center;
}


/* =========================================================
   COST SECTION
========================================================= */

.project-cost-section {
  padding:
    95px
    0;

  border-top:
    1px solid
    var(--projects-line);

  border-bottom:
    1px solid
    var(--projects-line);

  background:
    radial-gradient(
      circle at 80% 25%,
      rgba(124, 58, 237, .07),
      transparent 30rem
    ),
    color-mix(
      in srgb,
      var(--bg-elevated) 48%,
      transparent
    );
}


/* =========================================================
   COST LIST
========================================================= */

.project-cost-public-list {
  display: grid;

  gap: 10px;
}


.project-cost-public-item {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    minmax(150px, auto);

  align-items: center;

  gap: 18px;

  padding: 17px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 15px;

  background:
    var(--projects-panel);
}


.project-cost-number {
  display: grid;

  place-items: center;

  width: 40px;
  height: 40px;

  border:
    1px solid
    rgba(139, 92, 246, .18);

  border-radius: 11px;

  color:
    var(--projects-accent-2);

  background:
    var(--projects-accent-soft);

  font-size: .62rem;

  font-weight: 900;
}


.project-cost-copy {
  min-width: 0;
}


.project-cost-copy h3 {
  margin: 0;

  font-size: .88rem;
}


.project-cost-copy p {
  margin:
    4px
    0
    0;

  color:
    var(--projects-muted);

  font-size: .68rem;

  line-height: 1.55;
}


.project-cost-values {
  min-width: 150px;

  text-align: right;
}


.project-cost-values > span {
  display: block;

  margin-bottom: 2px;

  color:
    var(--projects-muted);

  font-size: .57rem;

  font-weight: 800;

  text-transform: uppercase;
}


.project-cost-values > strong {
  display: block;

  font-size: .84rem;
}


.project-cost-values > small {
  display: block;

  margin-top: 3px;

  color:
    var(--projects-warning);

  font-size: .6rem;
}


/* =========================================================
   COST ITEM PROGRESS
========================================================= */

.project-cost-item-progress {
  grid-column:
    2 / -1;

  padding-top: 4px;
}


.project-cost-item-progress
> div:first-child {
  display: flex;

  justify-content: space-between;

  margin-bottom: 5px;

  color:
    var(--projects-muted);

  font-size: .58rem;
}


.project-cost-item-progress
> div:last-child {
  height: 4px;

  overflow: hidden;

  border-radius: 999px;

  background:
    var(--projects-line);
}


.project-cost-item-progress
> div:last-child
> span {
  display: block;

  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--projects-accent),
      var(--projects-success)
    );
}


/* =========================================================
   COST TOTAL
========================================================= */

.project-cost-total {
  display: flex;

  align-items: stretch;
  justify-content: flex-end;

  gap: 10px;

  margin-top: 17px;
}


.project-cost-total > div {
  min-width: 210px;

  padding:
    14px
    17px;

  border:
    1px solid
    rgba(139, 92, 246, .18);

  border-radius: 14px;

  background:
    var(--projects-panel);

  text-align: right;
}


.project-cost-total span {
  display: block;

  margin-bottom: 2px;

  color:
    var(--projects-muted);

  font-size: .58rem;

  font-weight: 800;

  text-transform: uppercase;
}


.project-cost-total strong {
  font-size: 1rem;
}


.project-cost-total small {
  margin-left: 4px;

  color:
    var(--projects-muted);

  font-size: .58rem;
}


/* =========================================================
   GALLERY
========================================================= */

.project-gallery-section {
  padding:
    100px
    0;
}


.project-public-gallery {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  grid-auto-rows: 220px;

  gap: 10px;
}


.project-public-gallery-item {
  position: relative;

  min-width: 0;

  padding: 0;

  cursor: zoom-in;

  overflow: hidden;

  border: 0;

  border-radius: 15px;

  background: #111;
}


.project-public-gallery-item.is-large {
  grid-column: span 2;

  grid-row: span 2;
}


.project-public-gallery-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .35s ease,
    filter .35s ease;
}


.project-public-gallery-item:hover img {
  transform:
    scale(1.035);

  filter:
    brightness(.82);
}


.project-gallery-overlay {
  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: #fff;

  background:
    rgba(0, 0, 0, .16);

  opacity: 0;

  transition:
    opacity .2s ease;
}


.project-gallery-overlay i {
  display: grid;

  place-items: center;

  width: 41px;
  height: 41px;

  border:
    1px solid
    rgba(255, 255, 255, .22);

  border-radius: 12px;

  background:
    rgba(0, 0, 0, .5);

  backdrop-filter:
    blur(10px);
}


.project-public-gallery-item:hover
.project-gallery-overlay {
  opacity: 1;
}


.project-gallery-caption {
  position: absolute;

  right: 10px;
  bottom: 10px;
  left: 10px;

  padding:
    9px
    11px;

  border-radius: 10px;

  color: #fff;

  background:
    rgba(0, 0, 0, .60);

  backdrop-filter:
    blur(12px);

  font-size: .64rem;

  line-height: 1.4;
}


/* =========================================================
   PROJECT INQUIRY
========================================================= */

.project-inquiry-section {
  position: relative;

  overflow: hidden;

  padding:
    105px
    0
    115px;

  border-top:
    1px solid
    var(--projects-line);

  background:
    radial-gradient(
      circle at 15% 40%,
      rgba(124, 58, 237, .16),
      transparent 30rem
    ),
    radial-gradient(
      circle at 85% 10%,
      rgba(59, 130, 246, .07),
      transparent 28rem
    ),
    color-mix(
      in srgb,
      var(--bg-elevated) 54%,
      transparent
    );
}


.project-inquiry-layout {
  display: grid;

  grid-template-columns:
    minmax(0, .86fr)
    minmax(430px, 1.14fr);

  align-items: start;

  gap: 65px;
}


/* =========================================================
   INQUIRY COPY
========================================================= */

.project-inquiry-copy {
  padding-top: 18px;
}


.project-inquiry-copy h2 {
  max-width: 580px;

  margin:
    7px
    0
    16px;

  font-size:
    clamp(
      2rem,
      4vw,
      3.1rem
    );

  line-height: 1.06;

  letter-spacing: -.05em;
}


.project-inquiry-copy > p {
  max-width: 590px;

  margin: 0;

  color:
    var(--projects-soft-text);

  font-size: .88rem;

  line-height: 1.78;
}


/* =========================================================
   INQUIRY BENEFITS
========================================================= */

.project-inquiry-benefits {
  display: grid;

  gap: 9px;

  margin-top: 30px;
}


.project-inquiry-benefits > div {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 13px;

  background:
    var(--projects-panel-soft);
}


.project-inquiry-benefits
> div
> i {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 37px;
  height: 37px;

  border-radius: 11px;

  color:
    var(--projects-accent-2);

  background:
    var(--projects-accent-soft);
}


.project-inquiry-benefits span {
  display: flex;

  flex-direction: column;

  gap: 1px;
}


.project-inquiry-benefits strong {
  font-size: .72rem;
}


.project-inquiry-benefits small {
  color:
    var(--projects-muted);

  font-size: .62rem;
}


/* =========================================================
   INQUIRY PROJECT
========================================================= */

.project-inquiry-project {
  margin-top: 25px;

  padding: 16px;

  border-left:
    3px solid
    var(--projects-accent);

  border-radius:
    0
    13px
    13px
    0;

  background:
    rgba(124, 58, 237, .07);
}


.project-inquiry-project span,
.project-inquiry-project small {
  display: block;

  color:
    var(--projects-muted);

  font-size: .62rem;
}


.project-inquiry-project strong {
  display: block;

  margin:
    3px
    0;

  font-size: .82rem;
}


/* =========================================================
   INQUIRY FORM CARD
========================================================= */

.project-inquiry-form-card {
  padding: 25px;

  border:
    1px solid
    rgba(139, 92, 246, .20);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(124, 58, 237, .08),
      transparent 40%
    ),
    var(--projects-panel);

  box-shadow:
    0 24px 65px
    rgba(0, 0, 0, .13);
}


.project-inquiry-form {
  position: relative;
}


.project-inquiry-form-heading {
  margin-bottom: 22px;
}


.project-inquiry-form-heading > span {
  color:
    var(--projects-accent-2);

  font-size: .6rem;

  font-weight: 900;

  letter-spacing: .1em;
}


.project-inquiry-form-heading h3 {
  margin:
    5px
    0;

  font-size: 1.25rem;
}


.project-inquiry-form-heading p {
  margin: 0;

  color:
    var(--projects-muted);

  font-size: .68rem;

  line-height: 1.55;
}


/* =========================================================
   HONEYPOT
========================================================= */

.project-inquiry-honeypot {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  overflow: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  clip-path:
    inset(50%) !important;
}


/* =========================================================
   FORM GRID
========================================================= */

.project-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;
}


/* =========================================================
   FORM FIELD
========================================================= */

.project-form-field {
  display: grid;

  gap: 6px;

  margin-bottom: 13px;
}


.project-form-field > span {
  color:
    var(--projects-soft-text);

  font-size: .65rem;

  font-weight: 700;
}


.project-form-field input,
.project-form-field select,
.project-form-field textarea {
  width: 100%;

  border:
    1px solid
    var(--projects-line);

  border-radius: 11px;

  outline: none;

  color:
    var(--text);

  background:
    var(--projects-panel-soft);

  font: inherit;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.project-form-field input,
.project-form-field select {
  min-height: 44px;

  padding:
    0
    12px;
}


.project-form-field textarea {
  min-height: 150px;

  padding:
    11px
    12px;

  line-height: 1.55;

  resize: vertical;
}


.project-form-field input:focus,
.project-form-field select:focus,
.project-form-field textarea:focus {
  border-color:
    rgba(139, 92, 246, .65);

  background:
    color-mix(
      in srgb,
      var(--projects-panel-soft) 90%,
      var(--projects-accent) 4%
    );

  box-shadow:
    0 0 0 3px
    rgba(124, 58, 237, .10);
}


.project-form-field.has-error input,
.project-form-field.has-error select,
.project-form-field.has-error textarea {
  border-color:
    rgba(239, 68, 68, .62);

  box-shadow:
    0 0 0 3px
    rgba(239, 68, 68, .08);
}


/* =========================================================
   PRIVACY
========================================================= */

.project-form-privacy {
  display: flex;

  align-items: flex-start;

  gap: 9px;

  margin:
    4px
    0
    17px;

  cursor: pointer;

  color:
    var(--projects-muted);

  font-size: .62rem;

  line-height: 1.5;
}


.project-form-privacy input {
  flex: 0 0 auto;

  width: 16px;
  height: 16px;

  margin-top: 1px;

  accent-color:
    var(--projects-accent);
}


.project-form-privacy.has-error {
  color: #f87171;
}


/* =========================================================
   INQUIRY MESSAGE
========================================================= */

.project-inquiry-message {
  margin-bottom: 15px;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 11px;

  font-size: .68rem;

  line-height: 1.5;
}


.project-inquiry-message.is-error {
  border-color:
    rgba(239, 68, 68, .28);

  color: #fca5a5;

  background:
    rgba(239, 68, 68, .07);
}


.project-inquiry-message.is-success {
  border-color:
    rgba(34, 197, 94, .28);

  color: #86efac;

  background:
    rgba(34, 197, 94, .07);
}


/* =========================================================
   INQUIRY SUBMIT

   Hier ist der Button Fix besonders wichtig.
========================================================= */

.project-inquiry-submit {
  display: flex;

  width: 100%;

  min-height: 44px;

  align-items: center;
  justify-content: center;

  gap: 9px;
}


.project-inquiry-submit > i {
  flex-basis: 16px;

  width: 16px;
  height: 16px;

  font-size: .82rem;
}


.project-inquiry-submit.is-loading {
  cursor: wait;

  opacity: .76;
}


/* =========================================================
   FORM NOTE
========================================================= */

.project-form-note {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 10px;

  color:
    var(--projects-muted);

  font-size: .57rem;
}


/* =========================================================
   INQUIRY CLOSED
========================================================= */

.project-inquiry-closed {
  padding:
    80px
    0
    100px;
}


.project-inquiry-closed
.content-shell > div {
  display: flex;

  align-items: center;

  gap: 22px;

  padding: 24px;

  border:
    1px solid
    var(--projects-line);

  border-radius: 19px;

  background:
    var(--projects-panel);
}


.project-inquiry-closed
.content-shell > div > i {
  color:
    var(--projects-success);

  font-size: 1.6rem;
}


.project-inquiry-closed
.content-shell > div > div {
  flex: 1;
}


.project-inquiry-closed h2 {
  margin:
    5px
    0;

  font-size: 1.25rem;
}


.project-inquiry-closed p {
  margin: 0;

  color:
    var(--projects-muted);

  font-size: .72rem;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.project-lightbox {
  position: fixed;

  z-index: 10000;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 30px;
}


.project-lightbox-backdrop {
  position: absolute;

  inset: 0;

  padding: 0;

  cursor: zoom-out;

  border: 0;

  background:
    rgba(5, 5, 8, .91);

  backdrop-filter:
    blur(15px);
}


.project-lightbox-dialog {
  position: relative;

  z-index: 2;

  display: flex;

  max-width:
    min(
      1200px,
      94vw
    );

  max-height: 90vh;

  overflow: hidden;

  flex-direction: column;

  border:
    1px solid
    rgba(255, 255, 255, .12);

  border-radius: 17px;

  background: #09090d;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .58);
}


.project-lightbox-dialog > img {
  display: block;

  max-width: 100%;

  max-height: 82vh;

  object-fit: contain;
}


.project-lightbox-close {
  position: absolute;

  z-index: 3;

  top: 12px;
  right: 12px;

  display: grid;

  place-items: center;

  width: 39px;
  height: 39px;

  cursor: pointer;

  border:
    1px solid
    rgba(255, 255, 255, .16);

  border-radius: 11px;

  color: #fff;

  background:
    rgba(0, 0, 0, .62);

  backdrop-filter:
    blur(12px);
}


.project-lightbox-caption {
  padding:
    12px
    15px;

  color:
    rgba(255, 255, 255, .72);

  background: #101016;

  font-size: .68rem;

  line-height: 1.5;
}


body.project-lightbox-open {
  overflow: hidden;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"]
.projects-page,

html[data-theme="light"]
.project-page {
  --projects-panel:
    rgba(255, 255, 255, .88);

  --projects-panel-soft:
    rgba(247, 246, 250, .9);

  --projects-line:
    rgba(24, 20, 32, .10);

  --projects-muted:
    rgba(31, 28, 38, .58);

  --projects-soft-text:
    rgba(31, 28, 38, .76);
}


html[data-theme="light"]
.projects-hero {
  background:
    radial-gradient(
      circle at 73% 42%,
      rgba(124, 58, 237, .13),
      transparent 32rem
    ),
    radial-gradient(
      circle at 15% 10%,
      rgba(59, 130, 246, .07),
      transparent 28rem
    ),
    linear-gradient(
      180deg,
      #fbfaff,
      var(--bg)
    );
}


html[data-theme="light"]
.project-public-card-media,

html[data-theme="light"]
.project-public-gallery-item {
  background: #e9e7ee;
}


html[data-theme="light"]
.projects-hero-stat,

html[data-theme="light"]
.projects-hero-side
.projects-language {
  background:
    rgba(255, 255, 255, .88);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1120px) {

  .projects-hero-layout {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, .78fr);

    gap: 48px;
  }


  .projects-process-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .project-detail-layout {
    gap: 42px;
  }


  .project-inquiry-layout {
    grid-template-columns:
      minmax(0, .82fr)
      minmax(420px, 1.18fr);

    gap: 42px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

  .projects-hero {
    padding:
      75px
      0
      80px;
  }


  .projects-hero-layout {
    grid-template-columns:
      1fr;

    gap: 28px;
  }


  .projects-hero-side {
    justify-content:
      flex-start;
  }


  .projects-public-grid {
    grid-template-columns:
      1fr;
  }


  .projects-partner-card {
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }


  .projects-partner-card
  > .button {
    grid-column:
      1 / -1;

    width: 100%;
  }


  /* =====================================================
     DETAIL HERO
  ===================================================== */

  .project-detail-hero,
  .project-detail-hero
  .content-shell,
  .project-detail-hero-content {
    min-height: 570px;
  }


  /* =====================================================
     DETAIL LAYOUT
  ===================================================== */

  .project-detail-layout {
    grid-template-columns:
      1fr;
  }


  .project-detail-sidebar {
    position: static;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* =====================================================
     FINANCE
  ===================================================== */

  .project-finance-card {
    grid-template-columns:
      1fr;
  }


  .project-finance-main {
    padding-right: 0;
    padding-bottom: 18px;

    border-right: 0;

    border-bottom:
      1px solid
      var(--projects-line);
  }


  .project-finance-progress {
    grid-column: 1;
  }


  /* =====================================================
     GALLERY
  ===================================================== */

  .project-public-gallery {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  /* =====================================================
     INQUIRY
  ===================================================== */

  .project-inquiry-layout {
    grid-template-columns:
      1fr;
  }


  .project-inquiry-copy {
    max-width: 720px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 680px) {

  .projects-hero {
    padding:
      62px
      0
      65px;
  }


  .projects-hero-copy h1 {
    font-size:
      clamp(
        2.65rem,
        15vw,
        4.2rem
      );
  }


  .projects-hero-side {
    align-items: stretch;

    flex-direction: column;
  }


  .projects-hero-stat {
    min-width: 0;
  }


  .projects-hero-side
  .projects-language {
    align-self: flex-start;
  }


  .projects-intro {
    padding-top: 58px;
  }


  .project-section-heading {
    align-items: flex-start;

    flex-direction: column;

    gap: 12px;
  }


  .projects-list-section {
    padding:
      25px
      0
      80px;
  }


  .project-public-card {
    border-radius: 18px;
  }


  .project-public-card-body {
    padding: 19px;
  }


  .project-public-finance {
    grid-template-columns:
      1fr;
  }


  .project-public-card-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .project-public-card-actions
  .button {
    width: 100%;
  }


  .projects-process-section {
    padding:
      75px
      0;
  }


  .projects-process-grid {
    grid-template-columns:
      1fr;
  }


  .projects-partner-section {
    padding:
      75px
      0
      80px;
  }


  .projects-partner-card {
    grid-template-columns:
      1fr;

    padding: 21px;
  }


  .projects-partner-card
  > .button {
    width: 100%;

    justify-content: center;
  }


  /* =====================================================
     DETAIL HERO
  ===================================================== */

  .project-detail-hero,
  .project-detail-hero
  .content-shell,
  .project-detail-hero-content {
    min-height: 530px;
  }


  .project-detail-hero-content {
    padding:
      55px
      0;
  }


  .project-back-link {
    margin-bottom: 30px;
  }


  .project-detail-title h1 {
    font-size:
      clamp(
        2.35rem,
        13vw,
        4rem
      );
  }


  .project-detail-actions {
    display: grid;

    grid-template-columns:
      1fr;
  }


  .project-detail-actions
  .button {
    width: 100%;

    justify-content: center;
  }


  /* =====================================================
     FINANCE
  ===================================================== */

  .project-finance-section {
    margin-top: -35px;
  }


  .project-finance-card {
    padding: 19px;

    border-radius: 18px;
  }


  .project-finance-stats {
    grid-template-columns:
      1fr;
  }


  .project-finance-stats
  > div {
    display: flex;

    align-items: center;
    justify-content: space-between;
  }


  .project-finance-stats span {
    margin-bottom: 0;
  }


  /* =====================================================
     DETAIL
  ===================================================== */

  .project-detail-section {
    padding:
      75px
      0;
  }


  .project-detail-sidebar {
    grid-template-columns:
      1fr;
  }


  /* =====================================================
     COST
  ===================================================== */

  .project-cost-section {
    padding:
      75px
      0;
  }


  .project-cost-public-item {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    align-items: start;

    gap: 13px;
  }


  .project-cost-values {
    grid-column: 2;

    min-width: 0;

    text-align: left;
  }


  .project-cost-item-progress {
    grid-column: 2;
  }


  .project-cost-total {
    flex-direction: column;
  }


  .project-cost-total > div {
    min-width: 0;

    text-align: left;
  }


  /* =====================================================
     GALLERY
  ===================================================== */

  .project-gallery-section {
    padding:
      75px
      0;
  }


  .project-public-gallery {
    grid-template-columns:
      1fr;

    grid-auto-rows:
      230px;
  }


  .project-public-gallery-item.is-large {
    grid-column: auto;

    grid-row: auto;
  }


  /* =====================================================
     INQUIRY
  ===================================================== */

  .project-inquiry-section {
    padding:
      78px
      0
      85px;
  }


  .project-inquiry-form-card {
    padding: 19px;

    border-radius: 18px;
  }


  .project-form-grid {
    grid-template-columns:
      1fr;

    gap: 0;
  }


  /* =====================================================
     CLOSED
  ===================================================== */

  .project-inquiry-closed
  .content-shell > div {
    align-items: flex-start;

    flex-direction: column;
  }


  .project-inquiry-closed
  .button {
    width: 100%;

    justify-content: center;
  }


  /* =====================================================
     LIGHTBOX
  ===================================================== */

  .project-lightbox {
    padding: 12px;
  }


  .project-lightbox-dialog {
    max-width: 100%;

    max-height: 94vh;

    border-radius: 13px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

  .project-public-card-media-top {
    align-items: flex-start;

    flex-direction: column;
  }


  .project-public-language-badge {
    min-height: 26px;
  }


  .project-detail-language {
    margin-left: 0;
  }

}