/* parti.de – static site (replaces the former WordPress/Avada install) */

@font-face {
  font-family: "Circular";
  src: url("/assets/fonts/CircularStd-Medium.woff") format("woff");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Circular";
  src: url("/assets/fonts/CircularStd-Black.woff") format("woff");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0a0b;
  --paper: #ffffff;
  --yellow: #ffff00;
  --line: #e2e2e2;
  --font: "Circular", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wide: 840px;
  --text: 608px;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

h1, h2, h3 { font-weight: 900; line-height: 1.15; margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 10;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--paper);
}
.skip-link:focus { top: 16px; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__letters {
  position: absolute;
  top: -1.4vw;
  left: -0.7vw;
  width: 101.4vw;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.hero__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  container-type: inline-size;
}

.hero__logo {
  display: block;
  width: clamp(80px, 9.4cqw, 112px);
  margin: max(24px, 5.4cqw) auto 0;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 5.6cqw 0 0 59.6cqw;
  font-weight: 900;
  font-size: clamp(15px, 1.95cqw, 23px);
  text-decoration: none;
}
.hero__cta img { width: 3.6em; flex: none; }
.hero__cta:hover span { text-decoration: underline; }

.hero__text { margin: -0.4cqw 0 0 10.6cqw; }

.hero__title {
  font-size: clamp(40px, 7.7cqw, 92px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.hero__lead {
  margin: 0.15em 0 0;
  font-size: clamp(21px, 4.45cqw, 53px);
  line-height: 1.17;
  font-weight: 500;
}

.hero__quote {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 20.8cqw;
  margin: 3.4cqw 0 0;
  padding-left: 23.2cqw;
}
.hero__quote::before {
  content: "";
  position: absolute;
  left: 14.2cqw;
  top: 50%;
  width: 17.3cqw;
  aspect-ratio: 328 / 337;
  transform: translateY(-50%);
  background: url("/assets/img/asterisk-yellow.png") center / contain no-repeat;
}
.hero__quote p {
  position: relative;
  margin: 0;
  font-weight: 900;
  font-size: clamp(19px, 2.95cqw, 35px);
  line-height: 1.2;
}
.hero__quote cite {
  font-style: normal;
  font-size: 0.56em;
  margin-left: 0.3em;
  white-space: nowrap;
}

.hero__screens {
  width: 70.3cqw;
  margin: 6.4cqw auto 0;
  padding-bottom: 6.6cqw;
}
.hero__screens img { width: 100%; }

@media (max-width: 700px) {
  .hero__letters { top: 18px; left: -30vw; width: 160vw; }
  .hero__inner { padding: 0 16px; }
  .hero__cta { margin: 28px 0 0; float: right; }
  .hero__cta img { width: 2.8em; }
  .hero__text { clear: both; margin: 24px 0 0; padding-top: 8px; }
  .hero__quote { min-height: 0; margin-top: 12px; padding: 32px 0 32px 56px; }
  .hero__quote::before { left: 0; width: 104px; }
  .hero__screens { width: 100%; margin-top: 32px; padding-bottom: 40px; }
}

/* ---------- Accordion ---------- */

.faq {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 16px;
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 26px 0 22px;
  cursor: pointer;
  list-style: none;
  text-align: center;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--ink);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(180deg); }
.faq__item summary h2 { font-size: 20px; }

.faq__body {
  max-width: var(--text);
  margin: 0 auto;
  padding: 4px 0 36px;
  hyphens: auto;
}
.faq__body h3 { font-size: 20px; margin: 22px 0 8px; }
.faq__body h3:first-child { margin-top: 0; }
.faq__body h3 small { font-size: inherit; font-weight: 500; }
.faq__body p { margin: 0 0 14px; }

.faq__body blockquote {
  margin: 28px 40px;
  padding: 15px;
  border-left: 4px solid #000;
  font-style: italic;
}
.faq__body blockquote p { margin: 0; }

@media (max-width: 700px) {
  .faq__body blockquote { margin: 24px 0; }
}

/* ---------- Sections ---------- */

.section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 72px 16px;
  text-align: center;
}
.section + .section { border-top: 1px solid var(--line); }

.display {
  font-size: clamp(40px, 6vw, 54px);
  line-height: 1.1;
}

.stores {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px 72px;
  margin-top: 40px;
}
.store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.store a { display: block; }
.store__badge { width: 160px; }
.store__qr { width: 88px; image-rendering: pixelated; }

.sponsors {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px 36px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.sponsors img { max-height: 44px; max-width: 110px; width: auto; }

/* ---------- Contact & footer ---------- */

.contact h2 { font-size: 20px; }
.contact h3 { font-size: 16px; font-weight: 500; margin-top: 18px; }
.contact p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.contact .gap { margin-left: 1em; }

.site-footer {
  padding: 24px 16px 56px;
  font-size: 13px;
}
.site-footer ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 88px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.to-top {
  position: fixed;
  right: max(16px, calc((100vw - 1024px) / 2 + 40px));
  bottom: 40px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  text-decoration: none;
}
.to-top span { writing-mode: vertical-rl; transform: rotate(180deg); }

@media (max-width: 700px) {
  .to-top { display: none; }
}

/* ---------- Legal page ---------- */

.page-header { padding: 32px 16px 0; }
.page-header .hero__logo { margin-top: 24px; }

.legal {
  max-width: 663px;
  margin: 0 auto;
  padding: 24px 16px 64px;
  hyphens: auto;
}
.legal h1 { text-align: center; margin-bottom: 40px; }
.legal h2 { font-size: 20px; margin: 28px 0 6px; }
.legal p { margin: 0 0 12px; }
.legal--center { text-align: center; }
.legal ul,
.legal ol { margin: 0 0 12px; padding-left: 1.2em; }
.legal li { margin-bottom: 2px; }
.legal .notice {
  margin: 28px 0;
  padding: 4px 20px 8px;
  border-left: 4px solid var(--yellow);
  background: #fffde0;
}