/* Einheitlicher Home-Hintergrund für AC-Gemeinsam-Unterseiten. */
main:has(> .public-section),
main:has(> .strength-section),
main:has(> .wirkung-section),
main:has(> .faq-section),
main:has(> .dark-section){
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#f9fafb 0%,#eef3f7 55%,#fff 100%);
}

main:has(> .public-section)::after,
main:has(> .strength-section)::after,
main:has(> .wirkung-section)::after,
main:has(> .faq-section)::after,
main:has(> .dark-section)::after{
  content:"";
  position:absolute;
  z-index:0;
  width:470px;
  height:470px;
  right:-170px;
  top:-160px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(246,196,0,.25),rgba(239,108,0,.05) 58%,transparent 70%);
  pointer-events:none;
}

.public-section,
.strength-section,
.individual-section,
.wirkung-section,
.social-section,
.impact-section,
.faq-section,
.dark-section{
  position:relative;
  z-index:1;
  background:transparent !important;
}

/* Die bisher dunkelblaue Warum-Seite wird auf den Home-Hintergrund angepasst. */
.dark-section{color:var(--ink)}
.dark-section::before{display:none}
.dark-section h2{color:var(--navy)}
.dark-section .kicker{color:#7a8797}
.dark-section p{color:#5e6b7c}

/* Kartenrahmen */

.brand-accent-card,
.how-card,
.question-card,
.flow-card,
.possibility,
.rules,
.wirkung-card,
.impact-choice-card{
  position:relative;
  overflow:hidden;
  border:0 !important;
  background:#fff;
}

.brand-accent-card{--accent-radius:26px}
.how-card{--accent-radius:24px}
.question-card{--accent-radius:28px}
.flow-card{--accent-radius:26px}
.possibility{--accent-radius:20px}
.rules{--accent-radius:30px}
.wirkung-card{--accent-radius:24px}
.impact-choice-card{--accent-radius:26px}

.brand-accent-card::before,
.how-card::before,
.question-card::before,
.flow-card::before,
.possibility::before,
.rules::before,
.wirkung-card::before,
.impact-choice-card::before{
  content:"";
  position:absolute;
  z-index:3;
  left:-1px;
  right:-1px;
  top:-1px;
  height:32px;
  box-sizing:border-box;
  padding:2.5px;
  border-radius:calc(var(--accent-radius) + 1px) calc(var(--accent-radius) + 1px) 0 0;
  background:linear-gradient(90deg,
    var(--line) 0%,
    #91ad38 2%,
    #83ad00 6%,
    #a9c900 26%,
    #f6c400 50%,
    #ef7900 74%,
    #df4e1d 93%,
    #e58b70 98%,
    var(--line) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  clip-path:inset(0 0 5px 0) !important;
  filter:drop-shadow(0 1px 1px rgba(13,33,72,.24));
  pointer-events:none;
}

.brand-accent-card::after,
.how-card::after,
.question-card::after,
.flow-card::after,
.possibility::after,
.rules::after,
.wirkung-card::after,
.impact-choice-card::after{
  content:"";
  position:absolute;
  z-index:2;
  top:25px;
  right:0;
  bottom:0;
  left:0;
  border:0;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0 0 var(--accent-radius) var(--accent-radius);
  pointer-events:none;
}

/* Auf dem dunkelblauen Hintergrund braucht die weiße Frage-Karte etwas mehr Kontrast. */
.question-card::before{
  padding:3px;
  background:linear-gradient(90deg,
    var(--line) 0%,
    #86a900 2%,
    #7fa900 6%,
    #a9c900 26%,
    #f6c400 50%,
    #f07a00 74%,
    #d94718 93%,
    #e47c5d 98%,
    var(--line) 100%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.28));
}

/* FAQ bleibt bewusst separat in faq.html definiert. */

@media(max-width:600px){
  .brand-accent-card::before,
  .how-card::before,
  .question-card::before,
  .flow-card::before,
  .possibility::before,
  .rules::before,
  .wirkung-card::before,
  .impact-choice-card::before{
    height:29px;
    clip-path:inset(0 0 5px 0) !important;
  }

  .brand-accent-card::after,
  .how-card::after,
  .question-card::after,
  .flow-card::after,
  .possibility::after,
  .rules::after,
  .wirkung-card::after,
  .impact-choice-card::after{top:22px}
}