/* ===========================
   valantic.css – Landing-Layout inspiriert an valantic.com
   Pfad: static/decision/css/valantic.css
   =========================== */

/* Grundwerte */
:root{
  --bg:#ffffff;

  /* Fließtext-Farbe laut Design */
  --fg:#100C2A;

  --muted:#5a5a5a;
  --line:#e8e8e8;
  --accent:#ff5a00; /* Orange Akzent */
  --radius:14px;
  --container:1200px;
  --space: clamp(16px, 2.5vw, 28px);
  --h1: clamp(36px, 6vw, 64px);
  --h2: clamp(24px, 3vw, 36px);
  --h3: clamp(18px, 2vw, 22px);

  /* Shadow laut Vorgabe */
  --shadow: 0px 0px 30px rgba(16, 12, 42, .08);

  font-size:16px;
}

html,body{
  background:var(--bg);
  color:var(--fg);

  /* Fließtext: Maven Pro Regular */
  font-family: "Maven Pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  font-weight: 400;

  /* Zeilenabstand */
  line-height: 1.6;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Utility Shadow (wie Vorgabe) */
.shadow{
  --tw-shadow: 0px 0px 30px rgba(16, 12, 42, .08);
  --tw-shadow-colored: 0px 0px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-shadow);
}

/* Links global */
a{
  color:#0b57d0;
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Standard-Main (für „normale“ Seiten) */
main{
  margin:3rem auto;
  padding:0 1rem;
}

/* Landing-Seite im valantic-Style: Main vollflächig, innerer Wrapper begrenzt */
main:has(.page-home) {
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 0;
  box-shadow: none;
}

/* Innerer Wrapper wie auf valantic.com */
.page-home-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0
           clamp(20px, 3vw, 32px)
           clamp(56px, 6vw, 80px);
}

/* Headline-Stile (Gradient wie von Design vorgegeben) */
h1, h2{
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: "Maven Pro";
  font-style: normal;
  font-weight: 700;

  background: var(--coral-red-peach, linear-gradient(278deg, #FF744F 45.18%, #FF4B4B 82.87%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h1{
  font-size: 72px;
  line-height: 80px;
  letter-spacing: -2.4px;
}

h2{
  max-width: 848px;
  width: 100%;

  font-size: 48px;
  line-height: 60px;
  letter-spacing: -1.2px;
}

h3{
  max-width: 848px;
  width: 100%;

  color: var(--Black, #100C2A);
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: "Maven Pro";
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
}

/* Fließtext konsistent (auch in Kästen) */
p, li{
  font-family: "Maven Pro", sans-serif;
  font-weight: 400;
  color: var(--fg);
  line-height: 1.6;
}
p{margin:0 0 12px}

/* Muted Text */
.muted{color:var(--muted)}

/* Hero für Node-Seiten (einspaltig, bestehendes Layout beibehalten) */
.hero-node-page{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items:center;
  padding: clamp(12px, 2vw, 20px) 0;
  border-bottom:1px solid var(--line);
}
.hero-node-page h1{ margin-bottom: 8px; }
.hero-node-page p{ font-size: clamp(16px, 1.4vw, 18px); }

/* Hero auf der Home-Seite */
.page-home .page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: 0;
}

.page-home .page-hero__content h1 {
  font-size: var(--h1);
  margin-top: 0;
  margin-bottom: 16px;
}

.page-home .page-hero__content .muted {
  font-size: clamp(16px, 1.4vw, 18px);
  margin-bottom: 24px;
  max-width: 36rem;
}

/* SVG definitions container - hidden but accessible */
.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Organic shape clip-path via SVG reference */
.shape {
  clip-path: url(#shape-30-70-c);
  -webkit-clip-path: url(#shape-30-70-c);
}

/* Wrapper for hero image */
.page-home .page-hero__image-wrapper {
  position: relative;
  width: 100%;
  max-width: 520px;
  justify-self: start;
  margin-top: -9.5%;
  transition: max-width 0.3s ease;
  /* GPU layer for smoother rendering */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
}

/* Hero image with organic blob shape */
.page-home .page-hero__image {
  max-width: 100%;
  max-height: 638px;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 16 / 10;
  display: block;
  /* Smooth rendering for clip-path */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: clip-path, transform;
  /* Anti-aliasing and smooth edges */
  image-rendering: auto;
  -webkit-transform: translate3d(0, 0, 0);
  /* Soften clip-path edges slightly */
  filter: blur(0.3px);
  -webkit-filter: blur(0.3px);
}

/* Responsive Bild */
img.resp{
  width:100%;
  height:auto;
  border-radius: var(--radius);
  border:1px solid var(--line);
}

/* ===========================
   Buttons – Vorgabe:
   Höhe 42px, Maven Pro SemiBold, 20px, font-weight 600
   =========================== */

.vbtn1,
.vbtn2,
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:42px;
  padding: 0 20px;

  border-radius: 40px;

  font-family: "Maven Pro", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;

  cursor:pointer;
  text-decoration:none;

  transition: transform .12s ease, box-shadow .12s ease,
              background .12s ease, color .12s ease, border-color .12s ease;
}

/* Primär-CTA */
.vbtn1{
  background: var(--Vibrant-Purple, #4B26B7);
  color:#fff;
}
.vbtn1:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.vbtn1:active{
  transform: translateY(0) scale(.98);
}

/* Sekundär-CTA */
.vbtn2{
  background: var(--coral-red-peach, #FF6A5C);
  color:#fff;
}
.vbtn2:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
}
.vbtn2:active{
  transform: translateY(0) scale(.98);
}

/* Alte CTA-Buttons */
.cta{
  border:1px solid #000;
  background:#000;
  color:#fff;
}
.cta:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  background:var(--accent);
  border-color:var(--accent);
}
.cta:active{
  transform: translateY(0) scale(.99);
}

/* Small-Varianten bleiben kompakter (optional, aber praxisnah) */
.vbtn1-small,
.vbtn2-small{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:42px;         /* Vorgabe gilt auch hier */
  padding: 0 16px;

  border-radius: 32px;

  font-family: "Maven Pro", sans-serif;
  font-size: 20px;     /* Vorgabe */
  font-weight: 600;    /* Vorgabe */
  line-height: 1;

  cursor:pointer;
  text-decoration:none;

  transition: transform .12s ease, box-shadow .12s ease;
}

.vbtn1-small{
  background: var(--Vibrant-Purple, #4B26B7);
  color:#fff;
}
.vbtn1-small:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,.12);
}
.vbtn1-small:active{
  transform: translateY(0) scale(.98);
}

.vbtn2-small{
  background: var(--coral-red-peach, #FF6A5C);
  color:#fff;
}
.vbtn2-small:hover{
  transform: translateY(-1px);
  box-shadow: 0 5px 12px rgba(0,0,0,.12);
}
.vbtn2-small:active{
  transform: translateY(0) scale(.98);
}

/* Sektionen */
section{margin-top: clamp(24px, 4vw, 48px)}
section + section{margin-top: clamp(28px, 5vw, 64px)}

/* Grid Cards */
.grid{
  display:grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* Variante für einspaltiges Layout */
.grid-single{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}

/* ===========================
   Boxen/Kästen – Vorgabe:
   Weiß #fff + Shadow 0 0 30px rgba(16,12,42,.08)
   =========================== */

.card,
.section-alt,
.v-fieldset label{
  background:#ffffff;
  box-shadow: var(--shadow);
}

/* Card */
.card{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 2.3vw, 22px);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  color: var(--fg);
}
.card:hover{
  border-color:#dcdcdc;
  /* Shadow bleibt, optional leicht stärker beim Hover */
  transform: translateY(-2px);
}
.card h3{margin-bottom:6px}
.card p{margin:0; color: var(--fg);}

/* Abgesetzte Sektion */
.section-alt{
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 3vw, 28px);
  color: var(--fg);
}

/* Footer minimal */
.site-footer{
  margin-top: clamp(36px, 6vw, 80px);
  padding: clamp(16px, 3vw, 28px) 0;
  border-top:1px solid var(--line);

  /* Typo wie Fließtext */
  font-family: "Maven Pro", sans-serif;
  font-weight: 400;
  font-size:14px;
  line-height:1.6;

  /* vBlack */
  color: var(--fg);
}

.site-footer a{
  color: var(--fg);
}
.site-footer a:hover{
  text-decoration: underline;
}

/* Kleine Helfer */
.hr{height:1px;background:var(--line);border:0;margin:24px 0}

/* Unterer CTA auf der Home-Seite zentrieren */
.page-home-cta-bottom{
  display:flex;
  justify-content:center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* ── Contact Section (valantic overrides) ────────────── */
.contact-section label {
  font-family: "Maven Pro", sans-serif !important;
}

.contact-section .hs-input,
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section input[type="url"],
.contact-section input[type="number"],
.contact-section input[type="password"],
.contact-section textarea,
.contact-section select {
  font-family: "Maven Pro", sans-serif !important;
}

.contact-section .hs-button,
.contact-section input[type="submit"],
.contact-section button[type="submit"] {
  font-family: "Maven Pro", sans-serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  height: 42px !important;
  padding: 0 20px !important;
  background: var(--Vibrant-Purple, #4B26B7) !important;
}

.contact-section .hs-richtext p,
.contact-section .hs-richtext span,
.contact-section .hs-richtext a,
.contact-section .inputs-list label,
.contact-section legend {
  font-family: "Maven Pro", sans-serif !important;
}

.contact-section .hs-richtext a {
  color: #0b57d0 !important;
}

/* Responsiv */
@media (max-width: 980px){
  .page-home .page-hero{
    grid-template-columns: 1fr;
  }
  .page-home .page-hero__image-wrapper{
    order: -1;
    justify-self: center;
    margin-top: 0;
    max-width: 80%;
  }
  .grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px){
  .page-home .page-hero__image-wrapper{
    max-width: 90%;
  }
}
@media (max-width: 620px){
  .grid{ grid-template-columns: 1fr; }
  .cta{ width:100%; text-align:center }
}

/* Form-Layout */
.v-form{max-width:760px}
.v-fieldset{border:0;padding:0;margin:0}

/* Standard-Fragenformat */
.question{
  font-size:1.1rem;
  margin:0 0 1rem;
}

/* Listen in Formularen */
form ul{
  list-style:none;
  padding:0;
  margin:0 0 1rem;
}
form li{
  margin:.35rem 0;
}

/* Aktionen im Formular */
.actions{
  display:flex;
  gap:.75rem;
}

/* Buttons (native) */
button{
  cursor:pointer;
  font-family:inherit;
}

/* Django RadioSelect Standard-Markup schön darstellen */
.v-fieldset ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.v-fieldset li{margin:0;padding:0}

.v-fieldset label{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
  cursor:pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
  color: var(--fg);
}
.v-fieldset input[type="radio"]{
  accent-color:var(--accent);
  width:18px;
  height:18px;
}

.v-fieldset label:hover{
  border-color:#dcdcdc;
  transform:translateY(-1px);
}
.v-fieldset input[type="radio"]:focus-visible + label{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Actions (valantic-spezifisch) */
.v-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:16px;
}
.v-link{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px dashed var(--line);
}
.v-link:hover{
  color:var(--fg);
  border-bottom-color:var(--fg);
}

/* Prose für Ergebnistext */
.prose{
  font-size:16px;
  line-height:1.6;
  color:var(--fg);
}
.prose p{margin:0 0 12px}
.prose ul, .prose ol{margin:12px 0 12px 22px}
.prose h3{margin:18px 0 8px; font-size:var(--h3)}

/* CKEditor Content-Basis */
.ck-content img {
  display: block;
  max-width: 100%;
  height: auto !important;
}

/* Figure */
.ck-content figure.image {
  display: block;
  margin: 1em 0;
  text-align: initial;
}
.ck-content figure.image::after {
  content: "";
  display: block;
  clear: both;
}

/* Safety: feste HTML-Attribute neutralisieren */
.ck-content img[width],
.ck-content img[height] {
  width: auto !important;
  height: auto !important;
}

/* Optional: Caption-Stil */
.ck-content figcaption {
  font-size: 0.85em;
  color: #5a5a5a;
  text-align: center;
}