/* ==========================================================================
   Komponenten nach dem Übergabepaket (README „Wiederkehrende Bausteine“).
   Eckig, keine Schatten (einzige Ausnahme: Newsletter-Karte), Schwarz nie als
   Fläche (außer Headline-Balken), 1-px-Linien in Grau, Bewegung 140/200 ms.
   ========================================================================== */

/* ---- Container & Abschnitte ------------------------------------------------ */
.p2045-container {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}
.p2045-section { padding-block: 3.5rem; }
@media (min-width: 768px) {
  .p2045-section { padding-block: var(--section-y); }
}
.p2045-section--red { background: var(--red-500); color: var(--white); }

/* ---- Kicker / Abschnittskopf -------------------------------------------- */
.p2045-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-500);
}
.p2045-kicker::before {
  content: "";
  flex: none;
  width: 40px;
  height: 4px;
  background: var(--red-500);
}
/* Eyebrow ohne Strich (Splashpage: „Gründung am …“) */
.p2045-eyebrow {
  margin: 0;
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--red-500);
}

/* ---- Headline-Balken ----------------------------------------------------- */
.p2045-bars {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .08em;
  margin: 0;
  color: var(--white);
  text-align: left;
  text-transform: none;
  text-wrap: balance;
  line-height: var(--leading-tight);
}
.p2045-bars__line { display: block; line-height: 1.18; }
.p2045-bar {
  display: inline;
  padding: .06em .22em .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.p2045-bar--red { background: var(--red-500); color: var(--white); }
.p2045-bar--black { background: var(--black); color: var(--white); }
.p2045-bar--white { background: var(--white); color: var(--black); }
.p2045-accent { color: var(--red-500); }
/* Größen: Display 72 / 28, H1 56 / 32, H2 32 */
.p2045-bars--display { font-size: clamp(1.75rem, .54rem + 4.94vw, var(--size-5xl)); }
.p2045-bars--h1 { font-size: clamp(2rem, 1.34rem + 2.7vw, var(--size-4xl)); }
.p2045-bars--h2 { font-size: var(--size-2xl); }

/* ---- Buttons ------------------------------------------------------------- */
.p2045-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-height-md);
  padding: 0 var(--space-5);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-sans);
  font-size: var(--size-base);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition-control);
}
.p2045-btn:active { transform: translateY(1px); }
.p2045-btn--lg { height: var(--control-height-lg); padding: 0 var(--space-6); font-size: var(--size-md); }
.p2045-btn--block { display: flex; width: 100%; }
.p2045-btn--accent { background: var(--action-accent-bg); color: var(--text-on-accent); }
.p2045-btn--accent:hover { background: var(--action-accent-bg-hover); color: var(--text-on-accent); }
.p2045-btn--accent:active { background: var(--action-accent-bg-active); }
.p2045-btn--secondary { background: var(--white); color: var(--black); border-color: var(--black); }
.p2045-btn--secondary:hover { background: var(--black); color: var(--white); }
.p2045-btn--inverse { background: var(--white); color: var(--black); }
.p2045-btn--inverse:hover { background: var(--black); color: var(--white); }
.p2045-btn__arrow {
  flex: none;
  width: 1.1em;
  height: auto;
  fill: currentColor;
  transition: transform var(--duration-fast) var(--ease-out);
}
.p2045-btn:hover .p2045-btn__arrow { transform: translateX(3px); }
.p2045-btn__arrow--down { transform: rotate(90deg); }
.p2045-btn:hover .p2045-btn__arrow--down { transform: rotate(90deg) translateX(3px); }

/* ---- Logo ---------------------------------------------------------------- */
.p2045-logo { display: block; line-height: 0; color: inherit; text-decoration: none; }
.p2045-logo svg { width: 100%; height: auto; }

/* ---- Social-Links -------------------------------------------------------- */
.p2045-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.p2045-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  border: var(--border-width) solid var(--black);
  color: var(--black);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.p2045-social__link svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.p2045-social__link:hover { color: var(--red-500); border-color: var(--red-500); }
.p2045-social--sm .p2045-social__link { height: 2.25rem; min-width: 2.25rem; }
.p2045-social--sm .p2045-social__link svg { width: 16px; height: 16px; }
.p2045-social--labeled .p2045-social__link { padding: 0 var(--space-4) 0 var(--space-3); font-weight: var(--weight-bold); }
.p2045-social--on-red .p2045-social__link { border-color: var(--white); color: var(--white); }
.p2045-social--on-red .p2045-social__link:hover { color: var(--black); border-color: var(--black); }

/* ---- Laufband ------------------------------------------------------------ */
.p2045-ticker {
  overflow: hidden;
  padding: var(--space-3) 0;
  background: var(--red-500);
  color: var(--white);
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--weight-display);
  font-size: var(--size-lg);
  letter-spacing: var(--tracking-heading);
}
.p2045-ticker__track {
  display: flex;
  width: max-content;
  animation: p2045-marquee var(--p2045-ticker-speed, 60s) linear infinite;
}
.p2045-ticker:hover .p2045-ticker__track,
.p2045-ticker:focus-within .p2045-ticker__track { animation-play-state: paused; }
.p2045-ticker__group {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-right: var(--space-5);
  flex-shrink: 0;
}
.p2045-ticker__label {
  padding: .3em .55em;
  background: var(--white);
  color: var(--black);
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.p2045-ticker__text { white-space: nowrap; }
.p2045-ticker__sep { font-size: .6em; }
.p2045-ticker a { color: inherit; text-decoration: none; }
.p2045-ticker a:hover { text-decoration: underline; color: inherit; }
@keyframes p2045-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .p2045-ticker__track { width: auto; flex-wrap: wrap; animation: none; }
  .p2045-ticker__group[aria-hidden="true"] { display: none; }
  .p2045-ticker__group { flex-wrap: wrap; row-gap: var(--space-2); padding-inline: var(--page-padding-inline); }
}

/* ---- Formulare ------------------------------------------------------------ */
.p2045-field { display: flex; flex-direction: column; gap: var(--space-2); }
.p2045-field > label {
  font: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.p2045-req { color: var(--red-500); }
.p2045-field__hint { font: var(--text-small); color: var(--text-secondary); }
.p2045-form-note { margin: 0; font: var(--text-small); color: var(--text-secondary); }
.p2045-form .wpcf7-form-control-wrap { display: block; }
.p2045-form input[type="text"],
.p2045-form input[type="email"],
.p2045-form input[type="tel"] {
  display: block;
  width: 100%;
  height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: var(--border-solid);
  border-radius: var(--radius-none);
  background: var(--white);
  color: var(--text-primary);
  font: var(--text-body);
  box-sizing: border-box;
  transition: var(--transition-control);
}
.p2045-form input.wpcf7-not-valid { border-color: var(--red-500); }
.p2045-form .wpcf7-not-valid-tip { margin-top: var(--space-1); font: var(--text-small); font-weight: var(--weight-bold); color: var(--red-500); }
.p2045-form .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.p2045-form .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: var(--space-3); font: var(--text-body); cursor: pointer; }
.p2045-form .wpcf7-acceptance input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  border: var(--border-solid);
  border-radius: var(--radius-none);
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0;
  cursor: pointer;
  transition: background-color 120ms var(--ease-out), background-size 200ms cubic-bezier(.34, 1.56, .64, 1), transform 100ms var(--ease-out);
}
.p2045-form .wpcf7-acceptance input[type="checkbox"]:checked { background-color: var(--black); background-size: 14px; }
.p2045-form .wpcf7-acceptance input[type="checkbox"]:active { transform: scale(.88); }
.p2045-form .wpcf7-acceptance a { color: inherit; }
.p2045-form .wpcf7-spinner { display: none; }
.p2045-form .wpcf7-response-output { margin: var(--space-3) 0 0; padding: var(--space-3); border: var(--border-width) solid var(--black); font: var(--text-small); }
.p2045-form .wpcf7 form.init .wpcf7-response-output { display: none; }
.p2045-altcha altcha-widget {
  --altcha-border-radius: 0;
  --altcha-border-width: 2px;
  --altcha-color-border: var(--black);
  --altcha-color-text: var(--black);
  --altcha-color-base: var(--white);
  --altcha-max-width: 100%;
}

/* Absenden: Button pulsiert, Fehler wackeln, Erfolg ersetzt die Felder in derselben Karte */
.p2045-form .wpcf7-form[data-status="submitting"] button[type="submit"] { pointer-events: none; animation: p2045-pulse 900ms ease-in-out infinite; }
@keyframes p2045-pulse { 50% { opacity: .65; } }
.p2045-form .is-shaking { animation: p2045-shake 260ms cubic-bezier(.36, .07, .19, .97); }
@keyframes p2045-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.p2045-form .wpcf7-form.is-leaving > :not(.wpcf7-response-output) { animation: p2045-fade-out 200ms ease-in forwards; }
@keyframes p2045-fade-out { to { opacity: 0; transform: translateY(-8px); } }
.p2045-form .wpcf7-form.is-done { display: flex; align-items: center; }
.p2045-form .wpcf7-form.is-done > :not(.wpcf7-response-output) { display: none; }
.p2045-form .wpcf7-form.is-done .wpcf7-response-output {
  display: flex !important;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  font: var(--text-lead);
  font-weight: var(--weight-bold);
  animation: p2045-rise 420ms cubic-bezier(.22, 1, .36, 1) both;
}
.p2045-form .wpcf7-form.is-done .wpcf7-response-output::before {
  content: "\2713";
  flex: none;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--red-500);
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
}
.p2045-form .wpcf7-form.is-done .wpcf7-response-output:focus { outline: none; }
@keyframes p2045-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Einblenden beim Scrollen (Starthaltung setzt splash.js; ohne JS bleibt alles sichtbar) */
.p2045-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.p2045-reveal.is-in { opacity: 1; transform: none; }
.p2045-form .is-pinged { animation: p2045-ping 700ms var(--ease-out); }
@keyframes p2045-ping { from { box-shadow: 0 0 0 0 rgba(227, 0, 15, .8); } to { box-shadow: 0 0 0 14px rgba(227, 0, 15, 0); } }