/* ==========================================================================
   OmniMentis – index.css
   Sections of the landing page. Requires base.css.
   ========================================================================== */

/* ---------- Hero (#top) ---------- */

.hero__section {
  position: relative;
  overflow: hidden;
  background: var(--mint);
}
.hero__deco {
  position: absolute;
  width: clamp(340px,46vw,720px);
  height: auto;
  right: -10vw;
  bottom: 2%;
  opacity: 0.06;
  pointer-events: none;
  animation: om-bob 32s ease-in-out infinite;
}
.hero__blob {
  position: absolute;
  width: clamp(180px,26vw,340px);
  height: clamp(180px,26vw,340px);
  border-radius: 50%;
  background: rgba(255,201,77,0.5);
  top: -8vw;
  right: 6vw;
  animation: om-float 22s ease-in-out infinite;
  pointer-events: none;
}
.hero__net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
}
.hero__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px,7vw,104px) var(--edge) clamp(44px,6vw,88px);
}
.hero__div {
  padding-left: clamp(0px,3.5vw,56px);
  min-width: 0;
}
.hero__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
  animation: om-pop 700ms cubic-bezier(.34,1.56,.64,1) both;
}
.hero__span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 700;
}
.hero__h1 {
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(34px,4.8vw,68px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 24ch;
}
.hero__span-2 {
  display: block;
  text-wrap: balance;
  animation: om-rise 800ms cubic-bezier(.22,1,.36,1) both;
}
.hero__span-3 {
  display: block;
  text-wrap: balance;
  animation: om-rise 800ms cubic-bezier(.22,1,.36,1) 160ms both;
}
.hero__span-4 {
  position: relative;
  white-space: nowrap;
  color: var(--coral);
  isolation: isolate;
}
.hero__blob-2 {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 4%;
  height: 26%;
  background: var(--sun);
  border-radius: 4px;
  z-index: 0;
  display: block;
  transform-origin: left;
  animation: om-draw 700ms cubic-bezier(.22,1,.36,1) 700ms both;
}
.hero__span-5 {
  position: relative;
  z-index: 1;
}
.hero__span-6 {
  display: block;
  text-wrap: balance;
  font-weight: 500;
  font-size: 0.66em;
  margin-top: 0.4em;
  letter-spacing: -0.01em;
  animation: om-rise 800ms cubic-bezier(.22,1,.36,1) 280ms both;
}
.hero__hand {
  font-family: var(--hand);
  font-size: clamp(26px,3vw,38px);
  color: var(--teal);
  margin: 20px 0 0;
  transform: rotate(-2deg);
  transform-origin: left;
  animation: om-fade 700ms ease 800ms both;
}
.hero__layout-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: clamp(22px,4vw,56px);
  align-items: start;
  margin-top: clamp(30px,4.2vw,52px);
}
.hero__text {
  font-size: 20px;
  line-height: 1.65;
  margin: 0;
  max-width: 52ch;
  animation: om-rise 800ms ease 300ms both;
}
.hero__layout-3 {
  display: grid;
  gap: 12px;
  justify-items: start;
  animation: om-rise 800ms ease 400ms both;
}
.hero__layout-4 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__btn {
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.hero__btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.hero__btn:active {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.hero__btn-2 {
  text-decoration: none;
  color: var(--ink);
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 15px 28px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.hero__btn-2:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.hero__btn-2:active {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.hero__layout-5 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  border-top: 2px solid var(--ink);
}
.hero__layout-6 {
  flex: 1 1 260px;
  padding: 20px var(--edge);
  border-right: 2px solid var(--ink);
  background: var(--cream);
  display: flex;
  gap: 14px;
  align-items: center;
  animation: om-rise 700ms cubic-bezier(.22,1,.36,1) 740ms both;
}
.hero__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.hero__span-7 {
  font-size: 16px;
  line-height: 1.45;
}
.hero__strong {
  font-weight: 700;
}
.hero__span-8 {
  opacity: 0.8;
}
.hero__layout-7 {
  flex: 1 1 260px;
  padding: 20px var(--edge);
  border-right: 2px solid var(--ink);
  background: var(--cream);
  display: flex;
  gap: 14px;
  align-items: center;
  animation: om-rise 700ms cubic-bezier(.22,1,.36,1) 880ms both;
}
.hero__layout-8 {
  flex: 1 1 260px;
  padding: 20px var(--edge);
  background: var(--cream);
  display: flex;
  gap: 14px;
  align-items: center;
  animation: om-rise 700ms cubic-bezier(.22,1,.36,1) 1020ms both;
}

/* ---------- Lernstand-Check (#check) ---------- */

.check__section {
  position: relative;
  overflow: hidden;
  background: var(--sun);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.check__blob {
  position: absolute;
  width: clamp(180px,24vw,320px);
  height: clamp(180px,24vw,320px);
  border-radius: 50%;
  background: rgba(255,107,74,0.28);
  right: -6vw;
  top: -8vw;
  animation: om-float 24s ease-in-out infinite;
  pointer-events: none;
}
.check__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(28px,4vw,60px);
  align-items: start;
}
.check__eyebrow {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 16px;
}
.check__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(30px,4.4vw,56px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  max-width: 18ch;
}
.check__hand {
  font-family: var(--hand);
  font-size: clamp(23px,2.5vw,32px);
  color: var(--ink);
  margin: 0 0 20px;
  transform: rotate(-1.6deg);
  transform-origin: left;
}
.check__text {
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 1.68;
  max-width: 48ch;
}
.check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.check__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 16px 20px;
}
.check__span {
  font-family: var(--h);
  font-weight: 800;
  font-size: 20px;
  color: var(--teal);
}
.check__strong {
  display: block;
  font-family: var(--h);
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 3px;
}
.check__span-2 {
  font-size: 16px;
  line-height: 1.55;
}
.check__card {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 30px;
  padding: clamp(24px,3vw,38px);
  box-shadow: 6px 6px 0 var(--ink);
}
.check__h3 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(22px,2.4vw,30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.check__label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.check__field {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.check__field:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(23,163,152,0.35);
}
.check__btn {
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.check__card .check__text { font-size: 16px; margin-bottom: 20px; }
a.check__btn { display: inline-block; text-decoration: none; }
.check__btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--ink);
}
.check__btn:active {
  transform: translate(2px,2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.check__div {
  margin-top: 22px;
  border-top: 2px solid rgba(15,61,71,0.15);
  padding-top: 18px;
}
.check__strong-2 {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
}
.check__list-2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.check__item-2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}
.check__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}
.check__text-2 {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}
.check__link {
  color: var(--teal);
  font-weight: 700;
}

/* ---------- Warum (#warum) ---------- */

.warum__section {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
}
.warum__deco {
  position: absolute;
  width: clamp(280px,34vw,520px);
  height: auto;
  left: -9vw;
  bottom: -12%;
  opacity: 0.06;
  pointer-events: none;
  animation: om-bob 29s ease-in-out infinite;
}
.warum__blob {
  position: absolute;
  width: clamp(180px,22vw,320px);
  height: clamp(180px,22vw,320px);
  border-radius: 50%;
  background: rgba(217,242,234,0.7);
  right: -6vw;
  top: -8vw;
  animation: om-float 26s ease-in-out infinite;
  pointer-events: none;
}
.warum__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(28px,4vw,64px);
  align-items: start;
}
.warum__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(32px,4.6vw,58px);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  max-width: 18ch;
}
.warum__text {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 54ch;
}
.warum__text-2 {
  font-size: 19px;
  line-height: 1.65;
  margin: 0;
  max-width: 54ch;
}
.warum__card {
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 30px;
  padding: clamp(24px,3vw,38px);
  box-shadow: 6px 6px 0 var(--ink);
}
.warum__h3 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(22px,2.4vw,30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.warum__list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.warum__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.55;
}
.warum__text-3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  border-top: 2px solid rgba(15,61,71,0.15);
  padding-top: 18px;
}
.warum__hand {
  margin: 16px 0 0;
  font-family: var(--hand);
  font-size: 24px;
  color: var(--teal);
  transform: rotate(-1.6deg);
}

/* ---------- Lernreise (#lernreise) ---------- */

.lernreise__section {
  position: relative;
  overflow: hidden;
  background: var(--teal);
  color: var(--cream);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.lernreise__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(34px,5vw,64px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  max-width: 24ch;
}
.lernreise__hand {
  font-family: var(--hand);
  font-size: clamp(24px,2.6vw,34px);
  color: var(--sun);
  margin: 0 0 26px;
  transform: rotate(-1.6deg);
  transform-origin: left;
}
.lernreise__text {
  font-size: 19px;
  line-height: 1.65;
  margin: 0 0 clamp(34px,4.6vw,56px);
  max-width: 58ch;
}
.lernreise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(24px,3.2vw,38px);
}
.lernreise__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.lernreise__layout {
  position: relative;
  z-index: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--h);
  font-weight: 800;
  font-size: 20px;
  color: var(--teal);
}
.lernreise__span {
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: calc(-1 * clamp(24px,3.2vw,38px));
  width: 0;
  border-left: 3px dashed rgba(255,253,247,0.5);
}
.lernreise__span-2 {
  display: block;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 22px 26px;
  box-shadow: 5px 5px 0 rgba(15,61,71,0.9);
}
.lernreise__strong {
  display: block;
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(22px,2.4vw,29px);
  line-height: 1.12;
  margin-bottom: 8px;
}
.lernreise__span-3 {
  display: block;
  font-size: 17px;
  line-height: 1.62;
  max-width: 56ch;
}
.lernreise__card {
  margin-top: clamp(36px,5vw,64px);
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 30px;
  padding: clamp(24px,3.2vw,40px);
  box-shadow: 7px 7px 0 rgba(15,61,71,0.9);
  max-width: 900px;
}
.lernreise__span-4 {
  display: inline-block;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 16px;
}
.lernreise__h3 {
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(24px,2.8vw,34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.lernreise__text-2 {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.66;
}
.lernreise__text-3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.66;
}

/* ---------- Praxispaket (#praxisbuch) ---------- */

.praxisbuch__section {
  position: relative;
  overflow: hidden;
  background: var(--coral);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.praxisbuch__blob {
  position: absolute;
  width: clamp(180px,24vw,320px);
  height: clamp(180px,24vw,320px);
  border-radius: 50%;
  background: rgba(255,201,77,0.4);
  left: -6vw;
  bottom: -8vw;
  animation: om-float 22s ease-in-out infinite;
  pointer-events: none;
}
.praxisbuch__deco {
  position: absolute;
  width: clamp(280px,36vw,540px);
  height: auto;
  right: -6vw;
  top: 2%;
  opacity: 0.07;
  pointer-events: none;
  animation: om-bob 27s ease-in-out infinite;
}
.praxisbuch__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px,1fr));
  gap: clamp(30px,5vw,72px);
  align-items: center;
}
.praxisbuch__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.praxisbuch__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(34px,5vw,62px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.praxisbuch__hand {
  font-family: var(--hand);
  font-size: clamp(24px,2.6vw,34px);
  margin: 0 0 20px;
  transform: rotate(-1.6deg);
  transform-origin: left;
}
.praxisbuch__text {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.68;
  max-width: 48ch;
}
.praxisbuch__list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 12px;
}
.praxisbuch__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.55;
}
.praxisbuch__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
}
.praxisbuch__card {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 26px;
  padding: clamp(20px,2.4vw,28px);
  box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  gap: 16px;
}
.praxisbuch__layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
}
.praxisbuch__span {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(30px,3.6vw,44px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.praxisbuch__span-2 {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.75;
}
.praxisbuch__list-2 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  border-top: 2px solid rgba(15,61,71,0.15);
  padding-top: 16px;
}
.praxisbuch__item-2 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.5;
}
.praxisbuch__span-3 {
  font-weight: 700;
  min-width: 8ch;
}
.praxisbuch__span-4 {
  opacity: 0.6;
}
.praxisbuch__layout-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.praxisbuch__btn {
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 15px 30px;
  font-weight: 700;
  font-size: 17px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.praxisbuch__btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink);
}
.praxisbuch__btn:active {
  transform: translate(2px,2px);
  box-shadow: 2px 2px 0 var(--ink);
}
.praxisbuch__layout-3 {
  display: flex;
  justify-content: center;
}
.praxisbuch__div {
  width: min(340px, 78vw);
  transform: rotate(-2.4deg);
}
.praxisbuch__card-2 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 1074;
  object-fit: cover;
  border: 2px solid #0f3d47;
  box-shadow: 10px 10px 0 #0f3d47;
  border-radius: 14px;
}
.praxisbuch__wrap-2 {
  position: relative;
  max-width: 1180px;
  margin: clamp(36px,5vw,64px) auto 0;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 30px;
  padding: clamp(24px,3.2vw,40px);
  box-shadow: 7px 7px 0 var(--ink);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: clamp(24px,3.4vw,48px);
  align-items: center;
}
.praxisbuch__img {
  display: block;
  width: min(235px, 65vw);
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 4px 14px 14px 4px;
  box-shadow: 6px 6px 0 var(--ink);
}
.praxisbuch__div-2 {
  grid-column: span 2;
  min-width: 0;
}
.praxisbuch__eyebrow-2 {
  display: inline-block;
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.praxisbuch__h3 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(24px,3vw,36px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
}
.praxisbuch__text-2 {
  margin: 0 0 14px;
  font-family: var(--h);
  font-weight: 500;
  font-size: clamp(17px,1.9vw,21px);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.praxisbuch__text-3 {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.66;
  max-width: 56ch;
}
.praxisbuch__text-4 {
  margin: -8px 0 18px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.7;
}
.praxisbuch__link {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Über uns (#wir) ---------- */

.wir__section {
  background: var(--cream);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.wir__wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(30px,4.5vw,70px);
  align-items: center;
}
.wir__div {
  position: relative;
}
.wir__span {
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: var(--mint);
  z-index: 0;
}
.wir__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 26px;
}
.wir__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(30px,4vw,54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.wir__hand {
  font-family: var(--hand);
  font-size: clamp(23px,2.4vw,32px);
  color: var(--teal);
  margin: 0 0 20px;
  transform: rotate(-1.5deg);
  transform-origin: left;
}
.wir__text {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.68;
}
.wir__wrap-2 {
  max-width: 1180px;
  margin: clamp(40px,6vw,84px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(20px,3vw,36px);
}
.wir__card {
  background: var(--mint);
  border: 2px solid var(--ink);
  border-radius: 28px;
  padding: clamp(22px,2.6vw,32px);
  box-shadow: 5px 5px 0 var(--ink);
  display: grid;
  gap: 18px;
  align-content: start;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.wir__card:hover {
  transform: translate(-3px,-3px);
  box-shadow: 8px 8px 0 var(--ink);
}
.wir__img-2 {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 22px;
}
.wir__h3 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(22px,2.4vw,30px);
  letter-spacing: -0.025em;
  margin: 0 0 6px;
}
.wir__text-2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
}
.wir__text-3 {
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 1.68;
}
.wir__text-4 {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.68;
}

/* ---------- PISA (#pisa) ---------- */

.pisa__section {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border-top: 2px solid var(--ink);
  padding: clamp(48px,6vw,88px) var(--edge);
}
.pisa__deco {
  position: absolute;
  width: clamp(300px,36vw,560px);
  height: auto;
  right: -8vw;
  top: -14%;
  opacity: 0.07;
  pointer-events: none;
  animation: om-bob 31s ease-in-out infinite;
}
.pisa__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(28px,3.8vw,48px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  max-width: 26ch;
}
.pisa__text {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 clamp(28px,3.6vw,44px);
  max-width: 62ch;
}
.pisa__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: clamp(16px,2.2vw,24px);
}
.pisa__card {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 5px 5px 0 rgba(255,253,247,0.25);
}
.pisa__div {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(40px,5vw,60px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.pisa__div-2 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 8px;
}
.pisa__text-2 {
  margin: clamp(24px,3vw,34px) 0 0;
  font-size: 15px;
  line-height: 1.65;
  max-width: 74ch;
  border-top: 2px solid rgba(255,253,247,0.25);
  padding-top: 16px;
}
.pisa__strong {
  font-weight: 700;
  color: var(--sun);
}
.pisa__link {
  color: var(--sun);
  font-weight: 700;
}

/* ---------- FAQ (#faq) ---------- */

.faq__section {
  position: relative;
  overflow: hidden;
  background: var(--mint);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.faq__div {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.faq__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(32px,4.6vw,58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(28px,4vw,46px);
}
.faq__card {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
}
.faq__button {
  width: 100%;
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--h);
  font-weight: 700;
  font-size: clamp(19px,2vw,23px);
  color: var(--ink);
  line-height: 1.2;
}
.faq__span {
  font-size: 30px;
  color: var(--coral);
  flex: none;
  line-height: 1;
}
.faq__text {
  margin: 0;
  padding: 20px 24px 22px;
  font-size: 17px;
  line-height: 1.65;
  border-top: 2px solid rgba(15,61,71,0.12);
}

/* ---------- Kontakt (#kontakt) ---------- */

.kontakt__section {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  border-top: 2px solid var(--ink);
  padding: clamp(52px,7vw,104px) var(--edge);
  scroll-margin-top: 78px;
}
.kontakt__deco {
  position: absolute;
  width: clamp(320px,42vw,660px);
  height: auto;
  left: -8vw;
  top: 38%;
  opacity: 0.07;
  pointer-events: none;
  animation: om-bob 30s ease-in-out infinite reverse;
}
.kontakt__wrap {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: clamp(30px,5vw,72px);
  align-items: start;
}
.kontakt__h2 {
  font-family: var(--h);
  font-weight: 800;
  font-size: clamp(32px,4.4vw,56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.kontakt__hand {
  font-family: var(--hand);
  font-size: clamp(24px,2.6vw,34px);
  color: var(--sun);
  margin: 0 0 20px;
  transform: rotate(-1.6deg);
  transform-origin: left;
}
.kontakt__text {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.68;
  max-width: 42ch;
  color: rgba(255,253,247,0.92);
}
.kontakt__text-2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.kontakt__form {
  display: grid;
  gap: 16px;
  background: rgba(255,253,247,0.06);
  border: 2px solid rgba(255,253,247,0.28);
  border-radius: 28px;
  padding: clamp(22px,3vw,34px);
}
.kontakt__layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 16px;
}
.kontakt__label {
  display: grid;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,253,247,0.85);
}
.kontakt__field {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 2px solid rgba(255,253,247,0.32);
  background: rgba(255,255,255,0.08);
  color: var(--cream);
}
.kontakt__field:focus {
  border-color: var(--sun);
  outline: none;
}
.kontakt__field-2 {
  font: inherit;
  font-size: 16px;
  padding: 13px 15px;
  border-radius: 14px;
  border: 2px solid rgba(255,253,247,0.32);
  background: rgba(255,255,255,0.08);
  color: var(--cream);
  resize: vertical;
}
.kontakt__field-2:focus {
  border-color: var(--sun);
  outline: none;
}
.kontakt__text-3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,253,247,0.7);
}
.kontakt__link {
  color: var(--sun);
  font-weight: 600;
}
.kontakt__btn {
  font: inherit;
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--cream);
  border-radius: 999px;
  padding: 15px 28px;
  cursor: pointer;
  box-shadow: 4px 4px 0 rgba(255,253,247,0.5);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.kontakt__btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 rgba(255,253,247,0.5);
}
.kontakt__btn:active {
  transform: translate(2px,2px);
  box-shadow: 1px 1px 0 rgba(255,253,247,0.5);
}

/* Cover placeholder (replace with <img> once the cover exists) */