/* Wrapper & layout */
.soul-wrapper { font-family: system-ui, Arial, sans-serif; }

/* Row of buttons: allow wrapping so .soul-boxes always sits below */
.soul-row {
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 20px 20px;
  flex-wrap: wrap; /* sorgt dafür, dass .soul-boxes in eigener Reihe steht */
  flex-direction: row;
}

/* Each item is container for one button */
.soul-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Buttons: doppelte Breite und Höhe (+20% Höhe), mit Zwischenraum */
.soul-btn {
  --w: 200px;    /* Breite */
  --h: 480px;    /* Höhe erhöht um 20% (ursprünglich 400px) */
  --depth: 14px;
  width: var(--w);
  height: var(--h);
  border-radius: 14px;
  border: none;
  color: #fff;
  font-size: 140px;
  font-weight: 800;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
  background-clip: padding-box;
  transition: transform .22s ease;
  transform: translateY(0);
  box-shadow: none;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

/* dark overlay used on hover so child text stays bright */
.soul-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background-color .22s ease;
  z-index: 1;
}

/* ensure hover-text and letter are above the overlay */
.soul-hover-text,
.letter {
  position: relative;
  z-index: 2;
}

/* farbiger Streifen unter dem Button (sichtbar unter dem Button, nicht innen) */
.soul-btn::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(-1 * var(--depth));
  height: var(--depth);
  border-radius: 0 0 12px 12px;
  z-index: 0;
  transition: background-color .22s ease, transform .22s ease;
}

/* Hover: leicht anheben and darken overlay */
.soul-btn:hover { transform: translateY(-10px); }
.soul-btn:hover::before { background: rgba(0,0,0,0.35); }

/* Kurztext in den Buttons: weiß, nicht fett, Arial, vergrößert und vertikal zentriert.
   Blocksatz, horizontal zentriert within button. */
.soul-hover-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--w) - 28px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: left;
  hyphens: auto;
  box-sizing: border-box;
  z-index: 2;
}
.soul-btn:hover .soul-hover-text { opacity: 1; transform: translate(-50%, -50%); }

/* Buchstaben zentriert und Hover-Ausblendung */
.letter {
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 2;
}
.soul-btn:hover .letter { opacity: 0.1; /* 90% ausgeblendet */ }

/* Full-width boxes area directly under the buttons row */
.soul-boxes {
  order: 999;
  flex-basis: 100%;  /* nimmt komplette Breite: bleibt unter Buttons */
  display: block;
  margin-top: 18px;
}

/* Boxes: full-width background, centered content */
.soul-box {
  display: none;
  margin: 0 auto 12px;
  max-width: 1200px;
  width: calc(100% - 40px);
  padding: 16px 22px;
  border-radius: 10px;
  box-sizing: border-box;
  color: #111;
  font-size: 18px; /* default, will be overridden on hover */
  text-align: left;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
  background: transparent;
  background-blend-mode: multiply;
}

/* Show box when hovering the corresponding button */
.soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s { display: block; opacity: 1; transform: translateY(0); }
.soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o { display: block; opacity: 1; transform: translateY(0); }
.soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u { display: block; opacity: 1; transform: translateY(0); }
.soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l { display: block; opacity: 1; transform: translateY(0); }

/* Keep box visible when hovered directly */
.soul-box:hover { display: block; opacity: 1; transform: translateY(0); }

/* Colors for buttons and stripes */
.btn-red { background: linear-gradient(180deg,#145ea9,#104e8b); }
.btn-red::after { background: #0d3d6e; }

.btn-orange { background: linear-gradient(180deg,#D16F57,#c85336); }
.btn-orange::after { background: #a8492E; }

.btn-teal { background: linear-gradient(180deg,#22a8d8,#1d8eb7); }
.btn-teal::after { background: #18789e; }

.btn-blue { background: linear-gradient(180deg,#9dd2ce,#88c8c4); }
.btn-blue::after { background: #73BFBA; }

/* When hovering a button, set the corresponding box background to a darkened version
   of the button gradient and set box text color to white. Also set box font-size
   equal to the short button text size (14px). */
.soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s,
.soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s:hover {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    linear-gradient(180deg,#145ea9,#104e8b);
  background-blend-mode: multiply;
  color: #fff;
  display: block;
  opacity: 1;
  transform: translateY(0);
  font-size: 18px; /* entspricht .soul-hover-text */
}
.soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o,
.soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o:hover {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    linear-gradient(180deg,#d16f57,#c85336);
  background-blend-mode: multiply;
  color: #fff;
  display: block;
  opacity: 1;
  transform: translateY(0);
  font-size: 18px;
}
.soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u,
.soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u:hover {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    linear-gradient(180deg,#22a8d8,#1d8eb7);
  background-blend-mode: multiply;
  color: #fff;
  display: block;
  opacity: 1;
  transform: translateY(0);
  font-size: 18px;
}
.soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l,
.soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l:hover {
  background:
    linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    linear-gradient(180deg,#9dd2ce,#88c8c4);
  background-blend-mode: multiply;
  color: #fff;
  display: block;
  opacity: 1;
  transform: translateY(0);
  font-size: 18px;
}

/* Responsive: adjust short text size and ensure boxes match it */

/* <=1200px: short text unchanged (14px), adjust button sizes */
@media (max-width:1200px){
  .soul-row { gap: 22px; padding: 34px 18px 18px; }
  .soul-btn { --w:160px; --h:384px; font-size:112px; border-radius:12px; } /* height 320 -> 384 (20% up) */
  /* keep box font-size matching short text (14px) */
  .soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s,
  .soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o,
  .soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u,
  .soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l { font-size: 16px; }
}

/* <=900px: */
@media (max-width:900px){
  .soul-row { gap: 18px; padding: 28px 14px 14px; justify-content: center; }
  .soul-btn { --w:140px; --h:336px; font-size:96px; } /* height 280 -> 336 (20% up) */
  .soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s,
  .soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o,
  .soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u,
  .soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l { font-size: 14px; }
}

/* <=560px: short text reduces to 13px; boxes follow */
@media (max-width:560px){
  .soul-row { gap: 12px; padding: 20px 10px 10px; }
  .soul-btn { --w:120px; --h:288px; font-size:80px; } /* height 240 -> 288 (20% up) */
  .soul-hover-text, .soul-box { font-size:13px; }
  .soul-box { width: calc(100% - 24px); }

  .soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s,
  .soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o,
  .soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u,
  .soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l { font-size: 13px; }
}

/* Buchstabe bleibt weiß */
.letter { pointer-events: none; }

/* Fluid responsive sizing to keep all 4 columns on one row without wrap or horizontal scroll */
.soul-wrapper {
  /* Fluid short-text size (hover text) */
  --fs: clamp(14px, 3vw, 24px);
  /* Larger infobox text */
  --box-fs: clamp(12px, 2vw, 18px);
}

/* Fluid gap based on viewport, with safe min/max */
.soul-row {
  --cols: 4;
  --gap: clamp(6px, 2vw, 18px);
  --sidepad: 20px; /* default horizontal page padding used in width calc */
}

/* Align --sidepad with existing paddings at breakpoints */
@media (max-width: 900px) { .soul-row { --sidepad: 14px; } }
@media (max-width: 560px) { .soul-row { --sidepad: 10px; } }

/* Let button width shrink so 4 columns always fit: (viewport - paddings - gaps) / 4 */
.soul-btn {
  /* max 200px (desktop), min 64px (tiny screens), fluid in between */
  --w: clamp(64px, calc((100vw - (var(--sidepad) * 2) - ((var(--cols) - 1) * var(--gap))) / var(--cols)), 200px);
  /* keep original aspect ratio (200 -> 480 = 2.4x) */
  --h: calc(var(--w) * 2.4);
  /* scale letter size with width (200 -> 140px ~ 0.7x) */
  font-size: calc(var(--w) * 0.7);
}

/* Use fluid gap values set above */
.soul-row { gap: var(--gap); }

/* Fluidize short text and boxes (boxes slightly larger) */
.soul-hover-text { font-size: var(--fs); }
.soul-box { font-size: var(--box-fs); }

/* Ensure box font-size overrides fixed sizes defined earlier */
.soul-row > .soul-item:nth-child(1):hover ~ .soul-boxes .box-s,
.soul-row > .soul-item:nth-child(2):hover ~ .soul-boxes .box-o,
.soul-row > .soul-item:nth-child(3):hover ~ .soul-boxes .box-u,
.soul-row > .soul-item:nth-child(4):hover ~ .soul-boxes .box-l {
  font-size: var(--box-fs) !important;
}

/* Optional: allow an extra step down on ultra-small screens */
@media (max-width: 360px) {
  .soul-btn { --w: clamp(56px, calc((100vw - (var(--sidepad) * 2) - ((var(--cols) - 1) * var(--gap))) / var(--cols)), 200px); }
}
/* Keep all 4 columns on one line by allowing items to shrink within the row
   while still letting .soul-boxes move to the next line */
.soul-row { gap: clamp(6px, 2vw, 28px); } /* smaller gap on small screens */
.soul-item { flex: 1 1 0; min-width: 0; }  /* let button columns shrink equally */

/* Make buttons fluid: fill column, keep original aspect (200x480 => 5:12), and cap max size */
.soul-btn {
  width: 100%;
  max-width: 200px;        /* matches desktop design */
  aspect-ratio: 5 / 12;    /* keeps height proportional */
  height: auto;            /* derived from aspect-ratio */
  font-size: clamp(64px, 7vw, 140px); /* scale big letter so it doesn’t force wrap */
}