/* Appiarius Hausverwaltung: Kampagnenflächen
   Editoriale Bauplan-Sprache, bewusst ohne Stock-Hero und SaaS-Card-Raster. */

.campaign-page {
  --campaign-grid: rgba(208, 167, 91, 0.16);
  background: #f7f5ef;
}

.campaign-hero {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 150px 0 88px;
  color: #fff;
  background: var(--ink);
}

.campaign-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.65;
  background-image:
    linear-gradient(var(--campaign-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--campaign-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent 0, #000 58%, #000 100%);
}

.campaign-hero::after {
  content: "";
  position: absolute;
  inset: auto -10vw -34vw auto;
  z-index: -1;
  width: 72vw;
  height: 72vw;
  border: 1px solid rgba(208, 167, 91, 0.24);
  border-radius: 50%;
}

.campaign-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.75fr);
  gap: clamp(52px, 8vw, 118px);
  align-items: center;
}

.campaign-index {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  color: var(--timber);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.campaign-index::before {
  content: "";
  width: 46px;
  height: 1px;
  background: currentColor;
}

.campaign-title {
  max-width: 11ch;
  font-size: clamp(3.5rem, 7.4vw, 7.2rem);
  line-height: 0.91;
  letter-spacing: -0.025em;
}

.campaign-title em {
  display: block;
  color: var(--timber);
  font-style: normal;
}

.campaign-lead {
  max-width: 650px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
}

.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.campaign-drawing {
  margin: 0;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 24, 30, 0.56);
}

.campaign-drawing svg {
  width: 100%;
  height: auto;
  color: rgba(255, 255, 255, 0.76);
}

.campaign-drawing .line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
}

.campaign-drawing .fine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 0.8;
}

.campaign-drawing .accent {
  fill: none;
  stroke: var(--timber);
  stroke-width: 2;
}

.campaign-drawing .fill-accent { fill: var(--timber); }

.campaign-drawing figcaption {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.campaign-proofbar {
  color: #fff;
  background: #0a1d24;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.campaign-proofbar .shell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.campaign-proofbar div {
  min-height: 112px;
  padding: 25px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.campaign-proofbar div:first-child { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.campaign-proofbar strong { display: block; font-family: var(--serif); font-size: 1.15rem; }
.campaign-proofbar span { display: block; margin-top: 5px; color: rgba(255, 255, 255, 0.54); font-size: 0.82rem; }

.campaign-manifest {
  padding: clamp(90px, 14vh, 170px) 0;
  background: #f7f5ef;
}

.campaign-manifest p {
  max-width: 1050px;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 5.25rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.02em;
}

.campaign-manifest p span { color: var(--brick-deep); }

.campaign-section {
  padding: var(--section-y) 0;
  background: #fff;
}

.campaign-section.is-sand { background: #f0eee6; }
.campaign-section.is-ink { color: #fff; background: var(--ink); }
.campaign-section.is-ink .section-title { color: #fff; }
.campaign-section.is-ink .section-sub { color: rgba(255, 255, 255, 0.68); }

.campaign-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
  gap: 44px;
  align-items: start;
  margin-bottom: 58px;
}

.campaign-heading .section-head { margin: 0; }
.campaign-heading .campaign-side-note { max-width: 31ch; padding-top: 4px; color: var(--muted); }
.is-ink .campaign-side-note { color: rgba(255, 255, 255, 0.58); }

.campaign-loop {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.campaign-loop li {
  position: relative;
  min-height: 300px;
  padding: 30px 26px 34px;
  border-right: 1px solid var(--line);
}

.campaign-loop li:first-child { border-left: 1px solid var(--line); }
.campaign-loop b { display: block; color: var(--brick); font-size: 0.78rem; letter-spacing: 0.16em; }
.campaign-loop h3 { margin-top: 86px; font-size: clamp(1.6rem, 2.3vw, 2.25rem); }
.campaign-loop p { margin-top: 14px; color: var(--muted); font-size: 0.96rem; }

.evidence-note {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 34px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.evidence-note strong {
  color: var(--brick-deep);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.evidence-note p { max-width: 74ch; color: var(--muted); }

.campaign-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.campaign-check {
  min-height: 190px;
  padding: 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.32);
}

.campaign-check b { color: var(--brick); font-size: 0.72rem; letter-spacing: 0.14em; }
.campaign-check h3 { margin-top: 36px; font-size: 1.28rem; }
.campaign-check p { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }

.case-timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.case-step {
  display: grid;
  grid-template-columns: 100px minmax(180px, 0.55fr) minmax(0, 1.2fr) 150px;
  gap: 26px;
  align-items: center;
  min-height: 142px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.case-step .no { color: var(--timber); font-family: var(--serif); font-size: 2.1rem; }
.case-step h3 { font-size: 1.38rem; }
.case-step p { color: rgba(255, 255, 255, 0.66); }
.case-step .state { justify-self: end; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.74); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

.role-lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.role-lane { min-height: 250px; padding: 30px; background: #fff; }
.role-lane span { color: var(--brick); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.role-lane h3 { margin-top: 48px; font-size: 1.5rem; }
.role-lane p { margin-top: 14px; color: var(--muted); }

.year-board {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  border: 1px solid var(--line);
  background: #fff;
}

.year-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-right: 1px solid var(--line);
}

.year-months span {
  display: grid;
  place-items: center;
  min-height: 92px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.15rem;
}

.year-months span:nth-child(3n) { border-right: 0; }
.year-months span:nth-last-child(-n + 3) { border-bottom: 0; }
.year-months .active { color: #fff; background: var(--ink); }
.year-board-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 72px); }
.year-board-copy h3 { max-width: 14ch; font-size: clamp(2rem, 4vw, 3.8rem); }
.year-board-copy p { max-width: 55ch; margin-top: 20px; color: var(--muted); }

.measure-table { width: 100%; border-collapse: collapse; }
.measure-table th, .measure-table td { padding: 19px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.measure-table th { color: var(--brick-deep); font-size: 0.73rem; letter-spacing: 0.11em; text-transform: uppercase; }
.measure-table td { color: var(--muted); }
.measure-table td:first-child { color: var(--ink); font-weight: 700; }

.campaign-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: start;
}

.campaign-form-intro { position: sticky; top: 126px; }
.campaign-form-intro h2 { margin-top: 16px; font-size: clamp(2.4rem, 5vw, 4.8rem); }
.campaign-form-intro > p { max-width: 38ch; margin-top: 22px; color: var(--muted); }
.campaign-form-meta { display: grid; gap: 10px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.campaign-form-meta span { color: var(--muted); font-size: 0.9rem; }

.campaign-form-card {
  padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--line);
  background: #f7f5ef;
}

.campaign-form-card .contact-form { gap: 18px; }
.campaign-form-card .btn { border: 0; }

.campaign-boundary {
  margin-top: 30px;
  padding: 18px 20px;
  border-left: 3px solid var(--timber);
  color: var(--muted);
  background: #fff;
  font-size: 0.9rem;
}

@media (max-width: 1024px) {
  .campaign-hero-grid { grid-template-columns: 1fr; }
  .campaign-drawing { max-width: 640px; }
  .campaign-loop { grid-template-columns: repeat(2, 1fr); }
  .campaign-loop li:nth-child(2) { border-right: 1px solid var(--line); }
  .campaign-loop li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .campaign-form-wrap { grid-template-columns: 1fr; }
  .campaign-form-intro { position: static; }
}

@media (max-width: 820px) {
  .campaign-heading { grid-template-columns: 1fr; gap: 18px; }
  .campaign-proofbar .shell { grid-template-columns: 1fr; }
  .campaign-proofbar div, .campaign-proofbar div:first-child { min-height: 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .campaign-check-grid, .role-lanes { grid-template-columns: 1fr; }
  .case-step { grid-template-columns: 60px minmax(0, 1fr); gap: 12px 20px; padding: 24px 0; }
  .case-step p, .case-step .state { grid-column: 2; justify-self: start; }
  .year-board { grid-template-columns: 1fr; }
  .year-months { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 620px) {
  .campaign-hero { min-height: 0; padding: 122px 0 66px; }
  .campaign-hero-grid { gap: 44px; }
  .campaign-title { font-size: clamp(3rem, 15vw, 4.8rem); }
  .campaign-drawing { padding: 16px; }
  .campaign-drawing figcaption { display: grid; gap: 4px; }
  .campaign-loop { grid-template-columns: 1fr; }
  .campaign-loop li { min-height: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .campaign-loop h3 { margin-top: 44px; }
  .campaign-check-grid { display: block; border: 0; }
  .campaign-check { min-height: 0; border-left: 1px solid var(--line); }
  .evidence-note { grid-template-columns: 1fr; gap: 10px; }
  .year-months span { min-height: 68px; }
  .campaign-form-card { padding: 24px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .campaign-page *, .campaign-page *::before, .campaign-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}