* {
box-sizing: border-box
}

html {
font-size: 100%
}

body {
margin: 0;
position: relative;
min-height: 100vh;
font-family: 'Exo 2', sans-serif;
background: #F4F4F4;
color: #23122C
}

.brandmark {
width: 78px;
height: 78px;
object-fit: contain;
display: block
}

.brandbox {
border: 2px dashed #23122C;
padding: 12px;
background: #b6fe1f1f;
border-radius: 15px;
box-shadow: 0 2px 5px 0 #23122c0f;
display: inline-block
}

.topbar {
background: linear-gradient(135deg, #fff 0%, #F4F4F4 100%);
padding: 40px 24px 24px;
position: relative;
border-bottom: 3px solid #B6FE1F
}

.topbar::before {
content: '';
position: absolute;
top: 0;
right: 8%;
width: 420px;
height: 420px;
background: radial-gradient(circle at 30% 40%, #b6fe1f2e, transparent 68%);
border-radius: 42px;
pointer-events: none;
z-index: 0
}

.topbar::after {
content: '';
position: absolute;
bottom: 0;
left: 12%;
width: 280px;
height: 280px;
background: radial-gradient(circle at 70% 60%, #23122c0a, transparent 72%);
border-radius: 26px;
pointer-events: none;
z-index: 0
}

.topwrap {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
position: relative;
z-index: 1
}

.brandcol {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px
}

.brandrule {
width: 140px;
height: 2px;
background: #23122C;
border: none;
margin: 0
}

.prooftext {
font-size: 15px;
line-height: 1.7;
color: #23122C;
font-style: italic;
max-width: 280px
}

.navcol {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
padding-top: 8px
}

.navlist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
justify-content: flex-end
}

.navlink {
font-size: 18px;
line-height: 1.7;
color: #23122C;
text-decoration: none;
padding: 8px 12px;
border-radius: 9px;
border: 2px solid transparent;
transition: border-color .12s ease-out, background-color .12s ease-out;
display: inline-block;
font-weight: 400
}

.navlink:hover {
border-color: #B6FE1F;
background: #b6fe1f14
}

.navlink:focus {
outline: 2px solid #B6FE1F;
outline-offset: 2px;
border-color: #23122C
}

.baseplate {
background: #23122C;
color: #F4F4F4;
padding: 80px 24px 40px;
position: relative;
overflow: hidden
}

.baseplate::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, #b6fe1f05 12px, #b6fe1f05 24px);
pointer-events: none
}

.basewrap {
max-width: 880px;
margin: 0 auto;
position: relative;
z-index: 1
}

.baserule {
width: 160px;
height: 2px;
background: #B6FE1F;
border: none;
margin: 0 auto 40px
}

.baselogo {
text-align: center;
margin-bottom: 40px
}

.basegrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 40px 24px;
margin-bottom: 80px
}

.linkcol {
display: flex;
flex-direction: column;
gap: 12px
}

.baselink {
font-size: 15px;
line-height: 1.7;
color: #F4F4F4;
text-decoration: none;
transition: color .1s ease-out;
display: inline-block
}

.baselink:hover {
color: #B6FE1F
}

.baselink:focus {
outline: 2px solid #B6FE1F;
outline-offset: 3px
}

.contactblock {
display: flex;
flex-direction: column;
gap: 8px
}

.contactlabel {
font-size: 15px;
line-height: 1.7;
color: #f4f4f4b3;
font-weight: 400
}

.contactvalue {
font-size: 15px;
line-height: 1.7;
color: #F4F4F4;
text-decoration: none;
transition: color .1s ease-out
}

.contactvalue:hover {
color: #B6FE1F
}

.contactvalue:focus {
outline: 2px solid #B6FE1F;
outline-offset: 3px
}

.copyright {
font-size: 15px;
line-height: 1.7;
color: #f4f4f499;
text-align: center;
padding-top: 40px;
border-top: 1px solid #b6fe1f26
}

@media (max-width: 768px) {
.topwrap {
flex-direction: column;
align-items: center;
gap: 24px
}

.brandcol {
align-items: center
}

.navcol {
align-items: center;
width: 100%
}

.navlist {
justify-content: center;
gap: 12px
}

.navlink {
font-size: 15px
}

.prooftext {
text-align: center
}

.basegrid {
grid-template-columns: 1fr;
gap: 24px
}

.topbar::before {
width: 280px;
height: 280px;
right: 0
}

.topbar::after {
width: 180px;
height: 180px;
left: 0
}
}

.consentcard {
position: fixed;
top: 24px;
left: 0;
right: 0;
margin: 0 auto;
width: 90%;
max-width: 520px;
background: #fff;
border: 3px solid #23122C;
border-radius: 15px;
padding: 24px;
box-shadow: 0 8px 52px 0 #23122c21;
z-index: 1500;
transform: translateX(100vw);
transition: transform .32s ease-out
}

.consentcard.visible {
transform: translateX(0)
}

.consentheading {
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: #23122C;
margin: 0 0 12px;
font-family: 'Lora', serif
}

.consenttext {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0 0 8px
}

.consentuses {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px;
padding-left: 24px
}

.consentuses li {
margin-bottom: 4px
}

.consentactions {
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap
}

.consentbtn {
font-size: 15px;
line-height: 1.7;
color: #23122C;
text-decoration: underline;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: 'Exo 2', sans-serif;
transition: color .1s ease-out
}

.consentbtn:hover {
color: #B6FE1F
}

.consentbtn:focus {
outline: 2px solid #B6FE1F;
outline-offset: 3px
}

.consentdetails {
display: none;
margin-top: 24px;
padding-top: 24px;
border-top: 2px solid #F4F4F4
}

.consentdetails.active {
display: block
}

.consentoption {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px
}

.consentoption input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
accent-color: #B6FE1F
}

.consentoption label {
font-size: 15px;
line-height: 1.7;
color: #23122C;
cursor: pointer
}

.consentoption input[type="checkbox"]:disabled {
cursor: not-allowed;
opacity: .5
}

.consentoption label.disabled {
cursor: not-allowed;
opacity: .5
}

.consentback {
margin-top: 24px
}

.terms-info {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
background: #fff
}

.terms-info h1 {
font-size: 52px;
line-height: 1.2;
color: #23122C;
margin: 0 0 40px;
letter-spacing: -.02em
}

.terms-info h2 {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin: 80px 0 24px
}

.terms-info h3 {
font-size: 28px;
line-height: 1.2;
color: #23122C;
margin: 40px 0 24px
}

.terms-info h4 {
font-size: 22px;
line-height: 1.2;
color: #23122C;
margin: 40px 0 12px
}

.terms-info h5 {
font-size: 18px;
line-height: 1.2;
color: #23122C;
margin: 24px 0 12px
}

.terms-info h6 {
font-size: 15px;
line-height: 1.2;
color: #23122C;
margin: 24px 0 12px;
text-transform: uppercase;
letter-spacing: .08em
}

.terms-info p {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px
}

.terms-info ul,
.terms-info ol {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px;
padding: 0 0 0 24px
}

.terms-info li {
margin: 0 0 12px
}

.terms-info li:last-child {
margin-bottom: 0
}

.terms-info ul ul,
.terms-info ol ol,
.terms-info ul ol,
.terms-info ol ul {
margin: 12px 0 0
}

.terms-info em,
.terms-info i {
font-style: italic
}

.terms-info strong,
.terms-info b {
font-weight: 600;
color: #23122C
}

.terms-info a {
color: #23122C;
text-decoration: underline;
text-decoration-color: #B6FE1F;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
transition: text-decoration-color .15s ease-out
}

.terms-info a:hover {
text-decoration-color: #23122C
}

.terms-info hr {
border: none;
height: 2px;
background: #F4F4F4;
margin: 80px 0
}

@media (max-width: 768px) {
.terms-info {
padding: 40px 24px
}

.terms-info h1 {
font-size: 38px;
margin-bottom: 24px
}

.terms-info h2 {
font-size: 28px;
margin-top: 40px
}

.terms-info h3 {
font-size: 22px;
margin-top: 24px
}

.terms-info h4 {
font-size: 18px
}

.terms-info h5,
.terms-info h6 {
font-size: 15px
}

.terms-info p,
.terms-info ul,
.terms-info ol {
font-size: 15px
}

.terms-info hr {
margin: 40px 0
}
}

.testimon {
background: #FFF;
color: #23122C;
overflow-x: clip
}

.testimon * {
box-sizing: border-box
}

.testimon .splithero {
display: flex;
min-height: 520px;
position: relative;
padding: 0;
margin: 0 0 80px
}

.testimon .splithero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 52%;
height: 100%;
background: #F4F4F4;
z-index: 0
}

.testimon .splithero::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 48%;
height: 100%;
background: linear-gradient(143deg, #B6FE1F 0%, #b6fe1f00 48%, #b6fe1f00 52%, #B6FE1F 100%);
z-index: 0
}

.testimon .splithero .heroinner {
position: relative;
z-index: 1;
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 80px 24px
}

.testimon .splithero .herotxt {
width: 58%;
padding-right: 40px
}

.testimon .splithero h1 {
font-size: 68px;
line-height: 1.2;
margin: 0 0 24px;
text-shadow: 0 3px 8px #23122c1f;
animation: heroreveal .5s ease-out forwards;
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%)
}

@keyframes heroreveal {
to {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
}
}

.testimon .splithero .herodesc {
font-size: 22px;
line-height: 1.7;
margin: 0;
opacity: 0;
animation: herodescfade .5s .15s ease-out forwards
}

@keyframes herodescfade {
to {
opacity: 1
}
}

.testimon .splithero .herodots {
width: 42%;
display: flex;
align-items: center;
justify-content: center;
position: relative
}

.testimon .splithero .dotpath {
display: grid;
grid-template-columns: repeat(6, 12px);
grid-template-rows: repeat(8, 12px);
gap: 24px;
opacity: 0;
animation: dotsfade .5s .3s ease-out forwards
}

@keyframes dotsfade {
to {
opacity: .4
}
}

.testimon .splithero .dotpath span {
width: 12px;
height: 12px;
background: #23122C;
border-radius: 50%
}

.testimon .splithero .dotpath span:nth-child(3n) {
background: #B6FE1F
}

.testimon .reviews {
max-width: 1100px;
margin: 0 auto;
padding: 0 24px 80px;
position: relative
}

.testimon .reviews::before {
content: '';
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: calc(100% + 48px);
height: calc(100% + 80px);
background: linear-gradient(143deg, #F4F4F4 0%, #f4f4f400 48%, #f4f4f400 52%, #F4F4F4 100%);
z-index: 0;
pointer-events: none
}

.testimon .reviews .reviewsinner {
position: relative;
z-index: 1
}

.testimon .reviews h2 {
font-size: 52px;
line-height: 1.2;
text-align: center;
margin: 0 0 80px;
text-shadow: 0 2px 6px #23122c1a
}

.testimon .reviews .reviewgrid {
display: grid;
grid-template-columns: 1fr;
gap: 40px
}

.testimon .reviews .reviewrow {
display: grid;
gap: 40px
}

.testimon .reviews .reviewrow.twocol {
grid-template-columns: 1fr 1fr
}

.testimon .reviews .reviewrow.onecol {
grid-template-columns: 1fr;
max-width: 820px;
margin: 0 auto
}

.testimon .reviews .reviewcard {
background: #FFF;
border: 4px solid #23122C;
border-radius: 26px;
padding: 40px;
position: relative;
overflow: hidden;
transition: transform .18s ease-out, box-shadow .18s ease-out
}

.testimon .reviews .reviewcard::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #B6FE1F;
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease-out
}

.testimon .reviews .reviewcard:hover {
transform: translateY(-4px);
box-shadow: 0 8px 52px 0 #23122c21
}

.testimon .reviews .reviewcard:hover::before {
transform: scaleX(1)
}

.testimon .reviews .reviewcard:active {
transform: translateY(-2px)
}

.testimon .reviews .reviewhead {
display: flex;
align-items: center;
gap: 24px;
margin: 0 0 24px
}

.testimon .reviews .reviewavatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 3px solid transparent;
transition: border-color .15s ease;
position: relative
}

.testimon .reviews .reviewcard:hover .reviewavatar {
border-color: #B6FE1F
}

.testimon .reviews .reviewavatar img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.testimon .reviews .reviewmeta {
flex: 1
}

.testimon .reviews .reviewname {
font-size: 28px;
line-height: 1.2;
margin: 0 0 8px;
font-weight: 600
}

.testimon .reviews .reviewrole {
font-size: 18px;
line-height: 1.2;
margin: 0;
opacity: .7
}

.testimon .reviews .reviewstars {
display: flex;
gap: 4px;
margin: 0 0 24px
}

.testimon .reviews .reviewstars svg {
width: 24px;
height: 24px;
fill: #B6FE1F;
stroke: #23122C;
stroke-width: 1
}

.testimon .reviews .reviewtxt {
font-size: 18px;
line-height: 1.7;
margin: 0;
position: relative
}

.testimon .reviews .reviewtxt p {
margin: 0 0 12px;
text-indent: 24px
}

.testimon .reviews .reviewtxt p:last-child {
margin: 0
}

.testimon .reviews .reviewtxt p:first-child {
text-indent: 0
}

.testimon .reviews .expandwrap {
position: relative
}

.testimon .reviews .expandtrigger {
display: none
}

.testimon .reviews .expandcontent {
max-height: 68px;
overflow: hidden;
position: relative;
transition: max-height .5s ease-out
}

.testimon .reviews .expandcontent::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to bottom, #fff0, #ffff);
pointer-events: none;
opacity: 1;
transition: opacity .2s ease
}

.testimon .reviews .expandtrigger:checked~.expandcontent {
max-height: 800px
}

.testimon .reviews .expandtrigger:checked~.expandcontent::after {
opacity: 0
}

.testimon .reviews .expandbtn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 3px solid #23122C;
border-radius: 9px;
padding: 12px 24px;
font-size: 18px;
line-height: 1.2;
color: #23122C;
cursor: pointer;
margin: 24px 0 0;
transition: background .12s ease, color .12s ease, transform .12s ease;
position: relative;
overflow: hidden
}

.testimon .reviews .expandbtn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #B6FE1F;
transform: translate(-50%, -50%);
transition: width .18s ease, height .18s ease;
z-index: 0
}

.testimon .reviews .expandbtn:hover::before {
width: 200%;
height: 200%
}

.testimon .reviews .expandbtn:hover {
transform: translateY(-2px)
}

.testimon .reviews .expandbtn:active {
transform: translateY(0)
}

.testimon .reviews .expandbtn span {
position: relative;
z-index: 1
}

.testimon .reviews .expandbtn svg {
width: 18px;
height: 18px;
position: relative;
z-index: 1;
transition: transform .2s ease
}

.testimon .reviews .expandtrigger:checked~.expandbtn svg {
transform: rotate(180deg)
}

.testimon .reviews .statbar {
display: flex;
align-items: center;
gap: 24px;
margin: 40px 0 0;
padding: 24px 0 0;
border-top: 2px solid #23122c1a
}

.testimon .reviews .statitem {
display: flex;
flex-direction: column;
gap: 8px
}

.testimon .reviews .statnum {
font-size: 38px;
line-height: 1.2;
font-weight: 600;
color: #B6FE1F;
text-shadow: 1px 1px 0 #23122C;
position: relative
}

.testimon .reviews .statnum::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 3px;
background: #B6FE1F;
transition: width .5s ease-out
}

.testimon .reviews .reviewcard:hover .statnum::after {
width: 100%
}

.testimon .reviews .statlabel {
font-size: 15px;
line-height: 1.2;
opacity: .7;
text-transform: uppercase;
letter-spacing: .05em
}

.testimon .reviews .ratingoverall {
max-width: 520px;
margin: 80px auto 0;
text-align: center;
padding: 40px;
background: #FFF;
border: 4px solid #B6FE1F;
border-radius: 42px;
position: relative
}

.testimon .reviews .ratingoverall::before {
content: '';
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid #23122c1a;
border-radius: 38px;
pointer-events: none
}

.testimon .reviews .ratingnum {
font-size: 68px;
line-height: 1.2;
font-weight: 600;
color: #23122C;
margin: 0 0 12px
}

.testimon .reviews .ratingoverall .reviewstars {
justify-content: center;
margin: 0 0 24px
}

.testimon .reviews .ratingoverall .reviewstars svg {
width: 32px;
height: 32px
}

.testimon .reviews .ratingtxt {
font-size: 18px;
line-height: 1.7;
margin: 0;
opacity: .8
}

@media (max-width: 1280px) {
.testimon .splithero {
min-height: 440px;
margin: 0 0 40px
}

.testimon .splithero .heroinner {
padding: 40px 24px
}

.testimon .splithero h1 {
font-size: 52px;
margin: 0 0 24px
}

.testimon .splithero .herodesc {
font-size: 18px
}

.testimon .reviews {
padding: 0 24px 40px
}

.testimon .reviews h2 {
font-size: 38px;
margin: 0 0 40px
}

.testimon .reviews .reviewgrid {
gap: 24px
}

.testimon .reviews .reviewrow {
gap: 24px
}

.testimon .reviews .reviewcard {
padding: 24px
}

.testimon .reviews .reviewname {
font-size: 22px
}

.testimon .reviews .ratingoverall {
margin: 40px auto 0
}

.testimon .reviews .ratingnum {
font-size: 52px
}
}

@media (max-width: 768px) {
.testimon .splithero {
flex-direction: column;
min-height: auto;
margin: 0 0 40px
}

.testimon .splithero::before {
width: 100%;
height: 58%
}

.testimon .splithero::after {
width: 100%;
height: 42%;
top: auto;
bottom: 0
}

.testimon .splithero .heroinner {
flex-direction: column;
padding: 40px 24px
}

.testimon .splithero .herotxt {
width: 100%;
padding-right: 0;
margin: 0 0 40px
}

.testimon .splithero h1 {
font-size: 38px;
text-align: center
}

.testimon .splithero .herodesc {
font-size: 18px;
text-align: center
}

.testimon .splithero .herodots {
width: 100%
}

.testimon .reviews {
padding: 0 24px 40px
}

.testimon .reviews::before {
width: 100vw;
left: 50%;
transform: translateX(-50%)
}

.testimon .reviews h2 {
font-size: 28px;
margin: 0 0 40px
}

.testimon .reviews .reviewrow.twocol {
grid-template-columns: 1fr
}

.testimon .reviews .reviewcard {
padding: 24px
}

.testimon .reviews .reviewhead {
flex-direction: column;
align-items: flex-start;
gap: 12px
}

.testimon .reviews .reviewavatar {
width: 64px;
height: 64px
}

.testimon .reviews .reviewname {
font-size: 22px
}

.testimon .reviews .reviewrole {
font-size: 15px
}

.testimon .reviews .reviewtxt {
font-size: 15px
}

.testimon .reviews .statbar {
flex-wrap: wrap;
gap: 24px
}

.testimon .reviews .statnum {
font-size: 28px
}

.testimon .reviews .ratingoverall {
padding: 24px;
margin: 40px auto 0
}

.testimon .reviews .ratingnum {
font-size: 38px
}

.testimon .reviews .ratingoverall .reviewstars svg {
width: 24px;
height: 24px
}

.testimon .reviews .ratingtxt {
font-size: 15px
}
}

.kontaktseite {
background: #F4F4F4;
overflow-x: clip
}

.kontaktseite .splitintro {
display: flex;
min-height: 520px;
position: relative;
overflow: hidden
}

.kontaktseite .splitintro .linkehaelfte {
flex: 1;
background: #23122C;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 40px;
position: relative;
z-index: 2
}

.kontaktseite .splitintro .rechtehaelfte {
flex: 1;
background: #B6FE1F;
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 40px;
position: relative;
z-index: 2
}

.kontaktseite .splitintro .verschwommen {
position: absolute;
border-radius: 50%;
filter: blur(84px);
opacity: .18;
pointer-events: none;
z-index: 1
}

.kontaktseite .splitintro .verschwommen.eins {
width: 340px;
height: 340px;
background: #B6FE1F;
top: -80px;
left: 12%
}

.kontaktseite .splitintro .verschwommen.zwei {
width: 280px;
height: 280px;
background: #23122C;
bottom: -60px;
right: 18%
}

.kontaktseite .splitintro .verschwommen.drei {
width: 220px;
height: 220px;
background: #B6FE1F;
top: 40%;
left: 48%
}

.kontaktseite .splitintro .etikett {
font-size: 15px;
letter-spacing: .08em;
text-transform: uppercase;
color: #B6FE1F;
margin-bottom: 12px;
font-weight: 600
}

.kontaktseite .splitintro .rechtehaelfte .etikett {
color: #23122C
}

.kontaktseite .splitintro .hauptueberschrift {
font-size: 52px;
line-height: 1.2;
color: #F4F4F4;
margin-bottom: 24px;
font-weight: 700;
text-shadow: 0 3px 12px #b6fe1f38
}

.kontaktseite .splitintro .rechtehaelfte .hauptueberschrift {
color: #23122C;
text-shadow: 0 3px 12px #23122c26
}

.kontaktseite .splitintro .beschreibungstext {
font-size: 18px;
line-height: 1.7;
color: #f4f4f4de;
max-width: 480px
}

.kontaktseite .splitintro .rechtehaelfte .beschreibungstext {
color: #23122cd1
}

.kontaktseite .grosseszeichen {
position: absolute;
font-size: 420px;
line-height: 1;
font-weight: 700;
color: transparent;
-webkit-text-stroke: 2px #b6fe1f1c;
pointer-events: none;
z-index: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}

.kontaktseite .formularabschnitt {
max-width: 1100px;
margin: 0 auto;
padding: 80px 40px;
position: relative
}

.kontaktseite .formularabschnitt .magazinlayout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
align-items: start
}

.kontaktseite .formularabschnitt .hauptspalte {
background: #fff;
border-radius: 15px;
padding: 40px;
box-shadow: 0 5px 14px 0 #23122c17
}

.kontaktseite .formularabschnitt .nebenspalte {
display: flex;
flex-direction: column;
gap: 24px
}

.kontaktseite .formularabschnitt .formtitel {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin-bottom: 8px;
font-weight: 700
}

.kontaktseite .formularabschnitt .formuntertitel {
font-size: 18px;
line-height: 1.7;
color: #23122cad;
margin-bottom: 40px
}

.kontaktseite .formularabschnitt .eingabegruppe {
margin-bottom: 24px
}

.kontaktseite .formularabschnitt .eingabelabel {
display: block;
font-size: 15px;
font-weight: 600;
color: #23122C;
margin-bottom: 8px
}

.kontaktseite .formularabschnitt .textfeld {
width: 100%;
padding: 12px;
font-size: 15px;
color: #23122C;
background: #F4F4F4;
border: 2px solid transparent;
border-radius: 9px;
transition: border-color .14s ease-out, box-shadow .14s ease-out;
box-shadow: inset 0 2px 4px #23122c0f
}

.kontaktseite .formularabschnitt .textfeld::placeholder {
color: #23122c6b
}

.kontaktseite .formularabschnitt .textfeld:focus {
outline: none;
border-color: #B6FE1F;
box-shadow: inset 0 2px 4px #23122c0f 0 0 0 3px #b6fe1f2e
}

.kontaktseite .formularabschnitt .bewertungsbereich {
margin-bottom: 24px
}

.kontaktseite .formularabschnitt .bewertungstitel {
font-size: 15px;
font-weight: 600;
color: #23122C;
margin-bottom: 12px;
display: block
}

.kontaktseite .formularabschnitt .sternreihe {
display: flex;
gap: 8px;
flex-direction: row-reverse;
justify-content: flex-end
}

.kontaktseite .formularabschnitt .sterneingabe {
display: none
}

.kontaktseite .formularabschnitt .sternlabel {
cursor: pointer;
font-size: 38px;
color: #E0E0E0;
transition: color .12s ease, transform .12s ease;
line-height: 1
}

.kontaktseite .formularabschnitt .sternlabel:hover,
.kontaktseite .formularabschnitt .sterneingabe:checked~.sternlabel {
color: #B6FE1F;
transform: scale(1.12)
}

.kontaktseite .formularabschnitt .sterneingabe:checked~.sternlabel:hover,
.kontaktseite .formularabschnitt .sterneingabe:checked~.sternlabel:hover~.sternlabel {
color: #B6FE1F
}

.kontaktseite .formularabschnitt .datenschutzfeld {
display: flex;
align-items: start;
gap: 8px;
margin-bottom: 24px
}

.kontaktseite .formularabschnitt .datenschutzfeld input[type="checkbox"] {
margin-top: 4px;
width: 18px;
height: 18px;
cursor: pointer;
flex-shrink: 0
}

.kontaktseite .formularabschnitt .datenschutztext {
font-size: 15px;
line-height: 1.7;
color: #23122cb8
}

.kontaktseite .formularabschnitt .datenschutztext a {
color: #23122C;
text-decoration: underline;
transition: color .11s ease
}

.kontaktseite .formularabschnitt .datenschutztext a:hover {
color: #B6FE1F
}

.kontaktseite .formularabschnitt .sendebutton {
width: 100%;
padding: 12px 24px;
font-size: 18px;
font-weight: 600;
color: #23122C;
background: #B6FE1F;
border: 3px solid #23122C;
border-radius: 9px;
cursor: pointer;
transition: transform .16s ease-out, box-shadow .16s ease-out;
position: relative;
overflow: hidden
}

.kontaktseite .formularabschnitt .sendebutton:hover {
transform: translateY(-2px);
box-shadow: 0 8px 52px 0 #23122c21
}

.kontaktseite .formularabschnitt .sendebutton:active {
transform: translateY(0)
}

.kontaktseite .formularabschnitt .sendebutton::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #23122c1f;
transform: translate(-50%, -50%);
transition: width .5s ease-out, height .5s ease-out
}

.kontaktseite .formularabschnitt .sendebutton:active::before {
width: 300px;
height: 300px
}

.kontaktseite .infokarte {
background: #fff;
border-radius: 15px;
padding: 24px;
box-shadow: 0 2px 5px 0 #23122c0f;
border: 2px solid #F4F4F4;
transition: border-color .18s ease, box-shadow .18s ease
}

.kontaktseite .infokarte:hover {
border-color: #B6FE1F;
box-shadow: 0 8px 52px 0 #23122c21
}

.kontaktseite .infokarte .kartentitel {
font-size: 22px;
line-height: 1.2;
color: #23122C;
margin-bottom: 12px;
font-weight: 700
}

.kontaktseite .infokarte .kontaktzeile {
display: flex;
align-items: start;
gap: 8px;
margin-bottom: 12px;
font-size: 15px;
line-height: 1.7;
color: #23122cc7
}

.kontaktseite .infokarte .kontaktzeile:last-child {
margin-bottom: 0
}

.kontaktseite .infokarte .ikonform {
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 2px
}

.kontaktseite .infokarte .ikonform.telefon {
background: #B6FE1F;
border-radius: 4px;
position: relative
}

.kontaktseite .infokarte .ikonform.telefon::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 12px;
height: 12px;
border: 2px solid #23122C;
border-radius: 2px;
border-bottom-right-radius: 9px
}

.kontaktseite .infokarte .ikonform.email {
background: #23122C;
border-radius: 4px;
position: relative
}

.kontaktseite .infokarte .ikonform.email::before {
content: '';
position: absolute;
top: 6px;
left: 3px;
width: 14px;
height: 8px;
border: 2px solid #B6FE1F;
border-top: none
}

.kontaktseite .infokarte .ikonform.email::after {
content: '';
position: absolute;
top: 6px;
left: 3px;
width: 7px;
height: 6px;
border-right: 2px solid #B6FE1F;
border-bottom: 2px solid #B6FE1F;
transform: rotate(45deg);
transform-origin: center
}

.kontaktseite .infokarte .ikonform.standort {
background: linear-gradient(143deg, #B6FE1F 0%, transparent 48%, transparent 52%, #23122C 100%);
border-radius: 50% 50% 50% 4px;
transform: rotate(-45deg);
position: relative
}

.kontaktseite .infokarte .ikonform.standort::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
width: 8px;
height: 8px;
background: #fff;
border-radius: 50%
}

.kontaktseite .infokarte .kontaktlink {
color: #23122C;
text-decoration: none;
transition: color .13s ease;
position: relative
}

.kontaktseite .infokarte .kontaktlink::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #B6FE1F;
transition: width .19s ease-out
}

.kontaktseite .infokarte .kontaktlink:hover::after {
width: 100%
}

.kontaktseite .zitatblock {
background: linear-gradient(143deg, #b6fe1f14 0%, transparent 42%, transparent 58%, #23122c0a 100%);
border-radius: 26px;
padding: 40px;
border: 2px solid #b6fe1f47;
position: relative;
animation: sanftespuls 6s ease-in-out infinite
}

@keyframes sanftespuls {

0%,
100% {
opacity: 1
}

50% {
opacity: .76
}
}

.kontaktseite .zitatblock .anfuehrung {
font-size: 68px;
line-height: 1;
color: #B6FE1F;
font-weight: 700;
margin-bottom: 12px
}

.kontaktseite .zitatblock .zitattext {
font-size: 22px;
line-height: 1.7;
color: #23122C;
margin-bottom: 24px;
font-style: italic
}

.kontaktseite .zitatblock .attribution {
font-size: 15px;
line-height: 1.2;
color: #23122cb8;
font-weight: 600
}

.kontaktseite .trennlinie {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin: 80px auto;
max-width: 1100px;
padding: 0 40px
}

.kontaktseite .trennlinie .linie {
width: 80px;
height: 2px;
background: #23122C
}

.kontaktseite .trennlinie .mittelform {
width: 12px;
height: 12px;
background: #B6FE1F;
border-radius: 4px;
transform: rotate(45deg);
position: relative
}

.kontaktseite .trennlinie .mittelform::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background: #23122C;
border-radius: 50%;
animation: pulsieren 2.4s ease-in-out infinite
}

@keyframes pulsieren {

0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1
}

50% {
transform: translate(-50%, -50%) scale(1.4);
opacity: .6
}
}

.kontaktseite .erweiterungslinie {
position: relative;
height: 3px;
background: #B6FE1F;
max-width: 180px;
margin: 24px 0;
animation: linienexpansion 3.2s ease-in-out infinite
}

@keyframes linienexpansion {

0%,
100% {
width: 60px
}

50% {
width: 180px
}
}

@media (max-width: 768px) {
.kontaktseite .splitintro {
flex-direction: column;
min-height: auto
}

.kontaktseite .splitintro .linkehaelfte,
.kontaktseite .splitintro .rechtehaelfte {
padding: 40px 24px
}

.kontaktseite .splitintro .hauptueberschrift {
font-size: 38px
}

.kontaktseite .grosseszeichen {
font-size: 280px
}

.kontaktseite .formularabschnitt {
padding: 40px 24px
}

.kontaktseite .formularabschnitt .magazinlayout {
grid-template-columns: 1fr;
gap: 24px
}

.kontaktseite .formularabschnitt .hauptspalte {
padding: 24px
}

.kontaktseite .formularabschnitt .formtitel {
font-size: 28px
}

.kontaktseite .zitatblock {
padding: 24px
}

.kontaktseite .zitatblock .anfuehrung {
font-size: 52px
}

.kontaktseite .zitatblock .zitattext {
font-size: 18px
}

.kontaktseite .trennlinie {
margin: 40px auto;
padding: 0 24px
}

.kontaktseite .splitintro .verschwommen.eins {
width: 240px;
height: 240px
}

.kontaktseite .splitintro .verschwommen.zwei {
width: 200px;
height: 200px
}

.kontaktseite .splitintro .verschwommen.drei {
width: 160px;
height: 160px
}
}

@media (min-width: 769px) and (max-width: 1280px) {
.kontaktseite .formularabschnitt .magazinlayout {
grid-template-columns: 1.5fr 1fr
}

.kontaktseite .splitintro .hauptueberschrift {
font-size: 42px
}
}

.aboutpage {
background: #FFF;
color: #23122C;
overflow-x: clip
}

.aboutpage .titlezone {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
display: flex;
align-items: center;
gap: 40px;
position: relative
}

.aboutpage .titletxt {
flex: 1;
min-width: 0
}

.aboutpage .titletxt h1 {
font-size: 52px;
line-height: 1.2;
margin: 0 0 24px;
color: #23122C;
text-shadow: 0 3px 8px #b6fe1f26
}

.aboutpage .titletxt .actionlink {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 18px;
color: #23122C;
text-decoration: none;
border: 3px solid #B6FE1F;
padding: 12px 24px;
border-radius: 9px;
background: transparent;
transition: background .15s ease-out, transform .1s ease;
position: relative;
overflow: hidden
}

.aboutpage .titletxt .actionlink:hover {
background: #B6FE1F;
transform: translateY(-2px)
}

.aboutpage .titletxt .actionlink:active {
transform: translateY(0)
}

.aboutpage .titletxt .actionlink::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #23122C;
border-radius: 50%;
opacity: 0;
pointer-events: none
}

.aboutpage .titletxt .actionlink:active::after {
animation: rippleout .5s ease-out
}

@keyframes rippleout {
0% {
opacity: .6;
transform: scale(1)
}

100% {
opacity: 0;
transform: scale(25)
}
}

.aboutpage .titleimg {
flex: 0 0 380px;
position: relative
}

.aboutpage .titleimg img {
width: 380px;
height: 380px;
object-fit: cover;
object-position: center;
border-radius: 15px;
filter: grayscale(100%) contrast(1.3);
box-shadow: 0 8px 52px 0 #23122c21;
display: block
}

.aboutpage .decorband {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(143deg, #B6FE1F 0%, transparent 50%, #23122C 100%)
}

.aboutpage .spiraldeco {
position: absolute;
top: 24px;
right: -40px;
width: 120px;
height: 120px;
opacity: .08;
pointer-events: none;
z-index: 1
}

.aboutpage .spiraldeco svg {
width: 100%;
height: 100%;
fill: none;
stroke: #B6FE1F;
stroke-width: 2
}

.aboutpage .contentblock {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
position: relative;
background: linear-gradient(180deg, #F4F4F4 0%, #FFF 40%)
}

.aboutpage .contentblock::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background: repeating-linear-gradient(90deg, #B6FE1F 0px, #B6FE1F 4px, transparent 4px, transparent 12px)
}

.aboutpage .twocolgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start
}

.aboutpage .leftcol {
padding-top: 40px
}

.aboutpage .rightcol {
padding-top: 0
}

.aboutpage .contentblock h2 {
font-size: 38px;
line-height: 1.2;
margin: 0 0 24px;
color: #23122C;
text-align: left;
text-shadow: 0 2px 6px #b6fe1f1f
}

.aboutpage .txtpara {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px;
text-indent: 24px
}

.aboutpage .txtpara:first-of-type {
text-indent: 0
}

.aboutpage .featurelist {
list-style: none;
margin: 40px 0 0;
padding: 0
}

.aboutpage .featurelist li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 24px;
font-size: 18px;
line-height: 1.7;
color: #23122C
}

.aboutpage .featurelist li::before {
content: '';
flex-shrink: 0;
width: 24px;
height: 24px;
background: #B6FE1F;
border-radius: 4px;
margin-top: 4px;
box-shadow: 0 2px 5px 0 #23122c0f
}

.aboutpage .previewcard {
background: #FFF;
border: 2px solid #F4F4F4;
border-radius: 15px;
padding: 24px;
position: relative;
overflow: hidden;
box-shadow: 0 5px 14px 0 #23122c17;
animation: shadowbuild .8s ease-out forwards
}

@keyframes shadowbuild {
0% {
box-shadow: 0 0 0 0 #23122c00
}

100% {
box-shadow: 0 5px 14px 0 #23122c17
}
}

.aboutpage .previewcard::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(143deg, #B6FE1F 0%, transparent 50%, #23122C 100%)
}

.aboutpage .previewcard img {
width: 100%;
height: 280px;
object-fit: cover;
object-position: center;
border-radius: 9px;
margin-bottom: 24px;
display: block;
transition: transform .2s ease-out
}

.aboutpage .previewcard:hover img {
transform: scale(1.05)
}

.aboutpage .previewcard h3 {
font-size: 22px;
line-height: 1.2;
margin: 0 0 12px;
color: #23122C
}

.aboutpage .previewcard p {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0
}

.aboutpage .checklist {
background: #FFF;
border: 2px solid #B6FE1F;
border-radius: 15px;
padding: 24px;
margin-top: 24px
}

.aboutpage .checklist h4 {
font-size: 18px;
line-height: 1.2;
margin: 0 0 12px;
color: #23122C;
display: flex;
align-items: center;
justify-content: space-between
}

.aboutpage .progressind {
font-size: 15px;
color: #23122C;
opacity: .7
}

.aboutpage .checkitems {
list-style: none;
margin: 0;
padding: 0
}

.aboutpage .checkitems li {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 15px;
line-height: 1.7;
color: #23122C;
border-bottom: 1px solid #F4F4F4
}

.aboutpage .checkitems li:last-child {
border-bottom: none
}

.aboutpage .checkitems li .checkicon {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 4px;
background: #B6FE1F;
display: flex;
align-items: center;
justify-content: center
}

.aboutpage .checkitems li .checkicon svg {
width: 12px;
height: 12px;
stroke: #23122C;
stroke-width: 3;
fill: none
}

.aboutpage .formblock {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
position: relative;
background: #FFF
}

.aboutpage .formblock::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background: repeating-linear-gradient(90deg, #23122C 0px, #23122C 4px, transparent 4px, transparent 12px)
}

.aboutpage .formblock h2 {
font-size: 38px;
line-height: 1.2;
margin: 0 0 12px;
color: #23122C;
text-align: center;
text-shadow: 0 2px 6px #23122c1a
}

.aboutpage .formdesc {
font-size: 18px;
line-height: 1.7;
color: #23122C;
text-align: center;
margin: 0 0 40px
}

.aboutpage .subscribeform {
max-width: 640px;
margin: 0 auto;
background: #F4F4F4;
padding: 40px;
border-radius: 26px;
border: 3px solid #B6FE1F;
box-shadow: 0 5px 14px 0 #23122c17
}

.aboutpage .fieldwrap {
margin-bottom: 24px
}

.aboutpage .fieldwrap label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin-bottom: 8px;
font-weight: 600
}

.aboutpage .fieldwrap label .labelicon {
width: 20px;
height: 20px;
flex-shrink: 0
}

.aboutpage .fieldwrap label .labelicon svg {
width: 100%;
height: 100%;
fill: #B6FE1F
}

.aboutpage .fieldwrap input[type="email"] {
width: 100%;
padding: 12px;
font-size: 15px;
line-height: 1.7;
color: #23122C;
background: #FFF;
border: 2px solid #B6FE1F;
border-radius: 9px;
outline: none;
transition: border-color .15s ease, box-shadow .15s ease;
box-shadow: inset 0 2px 4px 0 #23122c0a
}

.aboutpage .fieldwrap input[type="email"]::placeholder {
color: #23122c66
}

.aboutpage .fieldwrap input[type="email"]:focus {
border-color: #23122C;
box-shadow: inset 0 2px 4px 0 #23122c14 0 0 0 3px #b6fe1f33
}

.aboutpage .checkgroup {
margin-bottom: 24px
}

.aboutpage .checkgroup legend {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin-bottom: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px
}

.aboutpage .checkgroup legend .labelicon {
width: 20px;
height: 20px;
flex-shrink: 0
}

.aboutpage .checkgroup legend .labelicon svg {
width: 100%;
height: 100%;
fill: #B6FE1F
}

.aboutpage .checkopts {
display: flex;
flex-direction: column;
gap: 12px
}

.aboutpage .checkopts label {
display: flex;
align-items: center;
gap: 8px;
font-size: 15px;
line-height: 1.7;
color: #23122C;
cursor: pointer
}

.aboutpage .checkopts input[type="checkbox"] {
width: 20px;
height: 20px;
flex-shrink: 0;
cursor: pointer;
accent-color: #B6FE1F
}

.aboutpage .submitbtn {
width: 100%;
padding: 12px 24px;
font-size: 18px;
line-height: 1.7;
color: #23122C;
background: #B6FE1F;
border: 3px solid #B6FE1F;
border-radius: 9px;
cursor: pointer;
transition: background .15s ease-out, border-color .15s ease-out, transform .1s ease;
position: relative;
overflow: hidden
}

.aboutpage .submitbtn:hover {
background: transparent;
border-color: #23122C;
transform: translateY(-2px)
}

.aboutpage .submitbtn:active {
transform: translateY(0)
}

.aboutpage .submitbtn::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
background: #23122C;
border-radius: 50%;
opacity: 0;
pointer-events: none
}

.aboutpage .submitbtn:active::after {
animation: rippleout .5s ease-out
}

.aboutpage .profilesection {
max-width: 1100px;
margin: 0 auto;
padding: 80px 24px;
position: relative;
background: linear-gradient(180deg, #FFF 0%, #F4F4F4 60%)
}

.aboutpage .profilesection::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 90%;
height: 1px;
background: repeating-linear-gradient(90deg, #B6FE1F 0px, #B6FE1F 4px, transparent 4px, transparent 12px)
}

.aboutpage .profilegrid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 40px;
align-items: center
}

.aboutpage .profileimg {
position: relative
}

.aboutpage .profileimg img {
width: 280px;
height: 392px;
object-fit: cover;
object-position: top;
border-radius: 15px;
display: block;
box-shadow: 0 5px 14px 0 #23122c17
}

.aboutpage .profiletxt h2 {
font-size: 38px;
line-height: 1.2;
margin: 0 0 24px;
color: #23122C;
text-align: left;
text-shadow: 0 2px 6px #b6fe1f1f
}

.aboutpage .profiletxt .txtpara {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px;
text-indent: 24px
}

.aboutpage .profiletxt .txtpara:first-of-type {
text-indent: 0
}

.aboutpage .spiraldeco2 {
position: absolute;
bottom: 24px;
left: -40px;
width: 100px;
height: 100px;
opacity: .06;
pointer-events: none;
z-index: 0
}

.aboutpage .spiraldeco2 svg {
width: 100%;
height: 100%;
fill: none;
stroke: #23122C;
stroke-width: 2
}

@media (max-width: 768px) {
.aboutpage .titlezone {
flex-direction: column;
padding: 40px 24px
}

.aboutpage .titleimg {
flex: 0 0 auto;
width: 100%
}

.aboutpage .titleimg img {
width: 100%;
height: auto;
aspect-ratio: 1
}

.aboutpage .titletxt h1 {
font-size: 38px
}

.aboutpage .contentblock {
padding: 40px 24px
}

.aboutpage .twocolgrid {
grid-template-columns: 1fr;
gap: 24px
}

.aboutpage .leftcol {
padding-top: 0
}

.aboutpage .contentblock h2 {
font-size: 28px
}

.aboutpage .previewcard img {
height: 220px
}

.aboutpage .formblock {
padding: 40px 24px
}

.aboutpage .formblock h2 {
font-size: 28px
}

.aboutpage .subscribeform {
padding: 24px
}

.aboutpage .profilesection {
padding: 40px 24px
}

.aboutpage .profilegrid {
grid-template-columns: 1fr;
gap: 24px
}

.aboutpage .profileimg img {
width: 100%;
height: auto;
aspect-ratio: 5/7
}

.aboutpage .profiletxt h2 {
font-size: 28px
}

.aboutpage .spiraldeco {
display: none
}

.aboutpage .spiraldeco2 {
display: none
}
}

@media (min-width: 769px) and (max-width: 1280px) {
.aboutpage .titlezone {
padding: 60px 24px
}

.aboutpage .titleimg {
flex: 0 0 320px
}

.aboutpage .titleimg img {
width: 320px;
height: 320px
}

.aboutpage .titletxt h1 {
font-size: 42px
}

.aboutpage .contentblock {
padding: 60px 24px
}

.aboutpage .twocolgrid {
gap: 32px
}

.aboutpage .formblock {
padding: 60px 24px
}

.aboutpage .profilesection {
padding: 60px 24px
}

.aboutpage .profilegrid {
grid-template-columns: 240px 1fr;
gap: 32px
}

.aboutpage .profileimg img {
width: 240px;
height: 336px
}
}

.fnc {
background: #F4F4F4;
overflow-x: clip
}

.fnc .titlezone {
display: flex;
flex-direction: row;
align-items: stretch;
max-width: 1100px;
margin: 0 auto;
background: #fff;
position: relative;
margin-top: 80px;
margin-bottom: 80px;
border-radius: 15px;
box-shadow: 0 5px 14px 0 #23122c17;
overflow: hidden
}

.fnc .titlezone::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(143deg, #B6FE1F 0%, transparent 35%, transparent 65%, #23122C 100%)
}

.fnc .imgcol {
flex: 0 0 280px;
position: relative;
overflow: hidden
}

.fnc .imgcol img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block
}

.fnc .imgcol::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(143deg, #b6fe1fb3 0%, transparent 100%);
z-index: 1;
pointer-events: none
}

.fnc .txtcol {
flex: 1;
padding: 80px 80px 80px 60px;
display: flex;
flex-direction: column;
justify-content: center
}

.fnc .titlezone h1 {
font-size: 52px;
line-height: 1.2;
color: #23122C;
margin: 0 0 24px;
text-shadow: 0 2px 4px #23122c14
}

.fnc .titlezone .desc {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0
}

.fnc .investsec {
max-width: 1100px;
margin: 0 auto 80px;
padding: 0 24px;
margin-left: 120px
}

.fnc .investsec .inwrap {
background: #fff;
border-radius: 26px;
padding: 60px;
box-shadow: 0 8px 52px 0 #23122c21;
position: relative;
border: 3px solid #B6FE1F
}

.fnc .investsec .inwrap::before {
content: '';
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: #23122C;
border-radius: 4px
}

.fnc .investsec h2 {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 3px #b6fe1f4d
}

.fnc .investgrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px
}

.fnc .invcard {
background: linear-gradient(143deg, #F4F4F4 0%, transparent 40%, transparent 60%, #b6fe1f1a 100%);
border-radius: 9px;
padding: 24px;
border: 2px solid #23122C;
transition: transform .15s ease-out, box-shadow .15s ease-out;
position: relative;
overflow: hidden
}

.fnc .invcard:hover {
transform: translateY(-4px);
box-shadow: 0 5px 14px 0 #23122c17
}

.fnc .invcard::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #B6FE1F;
transform: scaleX(0);
transform-origin: left;
transition: transform .2s ease
}

.fnc .invcard:hover::after {
transform: scaleX(1)
}

.fnc .invcard h3 {
font-size: 22px;
line-height: 1.2;
color: #23122C;
margin: 0 0 12px;
letter-spacing: .02em
}

.fnc .invcard p {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0
}

.fnc .invcard p+p {
margin-top: 0;
text-indent: 24px
}

.fnc .wavediv {
width: 100%;
height: 60px;
position: relative;
overflow: hidden
}

.fnc .wavediv svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%
}

.fnc .gradsec {
background: linear-gradient(143deg, white 0%, transparent 35%, transparent 65%, #F4F4F4 100%);
padding: 80px 24px;
position: relative
}

.fnc .gradsec::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 8px;
height: 100%;
background: #B6FE1F
}

.fnc .gradwrap {
max-width: 1100px;
margin: 0 auto;
margin-right: 120px
}

.fnc .gradsec h2 {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin: 0 0 40px;
text-align: left;
text-shadow: 2px 2px 4px #b6fe1f33
}

.fnc .gradcontent {
display: flex;
flex-direction: row;
gap: 40px;
align-items: flex-start
}

.fnc .gradtxt {
flex: 1
}

.fnc .gradtxt p {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0 0 12px
}

.fnc .gradtxt p+p {
text-indent: 24px;
margin-top: 0
}

.fnc .gradimg {
flex: 0 0 420px;
border-radius: 42px;
overflow: hidden;
border: 4px solid #23122C;
box-shadow: 0 8px 52px 0 #23122c21;
transition: transform .18s ease-out
}

.fnc .gradimg:hover {
transform: scale(1.03)
}

.fnc .gradimg img {
width: 100%;
height: 380px;
object-fit: cover;
object-position: center;
display: block
}

.fnc .belongsec {
max-width: 1100px;
margin: 80px auto;
padding: 0 24px
}

.fnc .belongsec h2 {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px #23122c26
}

.fnc .belonggrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px
}

.fnc .belongside {
background: #fff;
border-radius: 15px;
padding: 40px;
border: 3px solid #23122C;
box-shadow: 0 5px 14px 0 #23122c17;
position: relative
}

.fnc .belongside.fit {
background: linear-gradient(143deg, #b6fe1f26 0%, transparent 40%, transparent 60%, white 100%)
}

.fnc .belongside.notfit {
background: linear-gradient(143deg, white 0%, transparent 40%, transparent 60%, #23122c14 100%)
}

.fnc .belongside h3 {
font-size: 28px;
line-height: 1.2;
color: #23122C;
margin: 0 0 24px
}

.fnc .belongside ul {
list-style: none;
padding: 0;
margin: 0
}

.fnc .belongside li {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0 0 12px;
padding-left: 28px;
position: relative
}

.fnc .belongside.fit li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
background: #B6FE1F;
border-radius: 4px;
border: 2px solid #23122C
}

.fnc .belongside.notfit li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 12px;
height: 12px;
background: #23122C;
border-radius: 4px;
border: 2px solid #23122C
}

.fnc .belongside::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: #B6FE1F
}

.fnc .belongside.notfit::after {
background: #23122C
}

.fnc .profilegrid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-top: 40px
}

.fnc .profcard {
background: #fff;
border-radius: 9px;
padding: 24px;
border: 2px solid #23122C;
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
box-shadow: 0 2px 5px 0 #23122c0f;
transition: transform .12s ease-out, box-shadow .12s ease-out;
position: relative;
overflow: hidden
}

.fnc .profcard:hover {
transform: translateX(8px);
box-shadow: 0 5px 14px 0 #23122c17
}

.fnc .profcard::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #B6FE1F;
transform: scaleY(0);
transform-origin: top;
transition: transform .18s ease
}

.fnc .profcard:hover::before {
transform: scaleY(1)
}

.fnc .profimg {
flex: 0 0 80px;
width: 80px;
height: 80px;
border-radius: 4px;
overflow: hidden;
border: 2px solid #23122C
}

.fnc .profimg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block
}

.fnc .proftxt {
flex: 1
}

.fnc .proftxt h4 {
font-size: 18px;
line-height: 1.2;
color: #23122C;
margin: 0 0 4px;
font-weight: 600
}

.fnc .proftxt p {
font-size: 15px;
line-height: 1.7;
color: #23122C;
margin: 0
}

.fnc .metricbar {
background: #fff;
border-radius: 15px;
padding: 40px;
margin-top: 40px;
border: 3px solid #B6FE1F;
box-shadow: 0 5px 14px 0 #23122c17;
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 40px
}

.fnc .metricitem {
text-align: center;
position: relative
}

.fnc .metricitem::after {
content: '';
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 60px;
background: #23122C
}

.fnc .metricitem:last-child::after {
display: none
}

.fnc .metricnum {
font-size: 52px;
line-height: 1.2;
color: #23122C;
font-weight: 700;
display: block;
margin-bottom: 8px;
text-shadow: 2px 2px 0 #b6fe1f66
}

.fnc .metriclabel {
font-size: 15px;
line-height: 1.7;
color: #23122C;
display: block;
text-transform: uppercase;
letter-spacing: .08em
}

.fnc .clickinvert {
transition: background .1s ease, color .1s ease
}

.fnc .clickinvert:active {
background: #23122C;
color: #B6FE1F
}

@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-60px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(60px)
}

to {
opacity: 1;
transform: translateX(0)
}
}

@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(40px)
}

to {
opacity: 1;
transform: translateY(0)
}
}

.fnc .titlezone {
animation: slideInLeft .5s ease-out
}

.fnc .investsec {
animation: slideInRight .5s ease-out .1s both
}

.fnc .gradsec {
animation: slideInLeft .5s ease-out .2s both
}

.fnc .belongsec {
animation: slideInUp .5s ease-out .3s both
}

@media (max-width: 768px) {
.fnc .titlezone {
flex-direction: column;
margin: 40px 24px
}

.fnc .imgcol {
flex: 0 0 200px;
width: 100%
}

.fnc .txtcol {
padding: 40px 24px
}

.fnc .titlezone h1 {
font-size: 38px;
margin-bottom: 12px
}

.fnc .titlezone .desc {
font-size: 15px
}

.fnc .investsec {
margin-left: 0;
margin-bottom: 40px
}

.fnc .investsec .inwrap {
padding: 40px 24px
}

.fnc .investsec h2 {
font-size: 28px;
margin-bottom: 24px
}

.fnc .investgrid {
grid-template-columns: 1fr;
gap: 12px
}

.fnc .invcard {
padding: 24px
}

.fnc .invcard h3 {
font-size: 18px
}

.fnc .gradsec {
padding: 40px 24px
}

.fnc .gradwrap {
margin-right: 0
}

.fnc .gradsec h2 {
font-size: 28px;
margin-bottom: 24px
}

.fnc .gradcontent {
flex-direction: column;
gap: 24px
}

.fnc .gradimg {
flex: 0 0 auto;
width: 100%
}

.fnc .gradimg img {
height: 280px
}

.fnc .belongsec {
margin-top: 40px;
margin-bottom: 40px
}

.fnc .belongsec h2 {
font-size: 28px;
margin-bottom: 24px
}

.fnc .belonggrid {
grid-template-columns: 1fr;
gap: 24px
}

.fnc .belongside {
padding: 24px
}

.fnc .belongside h3 {
font-size: 22px;
margin-bottom: 12px
}

.fnc .profilegrid {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 24px
}

.fnc .profcard {
padding: 24px
}

.fnc .metricbar {
flex-direction: column;
gap: 24px;
padding: 24px;
margin-top: 24px
}

.fnc .metricitem::after {
display: none
}

.fnc .metricnum {
font-size: 38px
}
}

@media (min-width: 769px) and (max-width: 1280px) {
.fnc .titlezone {
margin-left: 24px;
margin-right: 24px
}

.fnc .txtcol {
padding: 60px 40px
}

.fnc .titlezone h1 {
font-size: 38px
}

.fnc .investsec {
margin-left: 60px;
padding: 0 24px
}

.fnc .investsec .inwrap {
padding: 40px
}

.fnc .investgrid {
grid-template-columns: 1fr;
gap: 12px
}

.fnc .gradwrap {
margin-right: 60px
}

.fnc .gradcontent {
gap: 24px
}

.fnc .gradimg {
flex: 0 0 340px
}

.fnc .gradimg img {
height: 320px
}

.fnc .belonggrid {
gap: 24px
}

.fnc .profilegrid {
gap: 24px
}

.fnc .metricbar {
gap: 24px
}
}

.successpage {
background: linear-gradient(143deg, #F4F4F4 0%, #F4F4F4 35%, #b6fe1f00 50%, #b6fe1f00 65%, #B6FE1F 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px
}

.successpage .confirmwrap {
max-width: 580px;
width: 100%;
background: #FFF;
border-radius: 26px;
padding: 80px 40px;
text-align: center;
box-shadow: 0 8px 52px 0 #23122c21
}

.successpage .iconcheck {
width: 92px;
height: 92px;
margin: 0 auto 40px;
background: #B6FE1F;
border-radius: 42px;
display: flex;
align-items: center;
justify-content: center;
position: relative
}

.successpage .iconcheck svg {
width: 48px;
height: 48px;
stroke: #23122C;
stroke-width: 3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round
}

.successpage .msgtitle {
font-size: 38px;
line-height: 1.2;
color: #23122C;
margin: 0 0 24px;
text-shadow: 0 2px 4px #23122c14
}

.successpage .msgbody {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px
}

.successpage .msgbody+.msgbody {
margin-top: 24px
}

.successpage .detailbox {
background: #F4F4F4;
border-radius: 15px;
padding: 24px;
margin: 40px 0;
text-align: left
}

.successpage .detailbox .infolabel {
font-size: 15px;
line-height: 1.7;
color: #23122C;
opacity: .7;
margin: 0 0 8px
}

.successpage .detailbox .infovalue {
font-size: 18px;
line-height: 1.7;
color: #23122C;
margin: 0 0 24px;
word-break: break-word
}

.successpage .detailbox .infovalue:last-child {
margin-bottom: 0
}

.successpage .actiongroup {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap
}

.successpage .btnprimary {
background: #B6FE1F;
color: #23122C;
font-size: 18px;
line-height: 1.7;
padding: 12px 40px;
border: 3px solid #23122C;
border-radius: 9px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: transform .15s ease-out, box-shadow .15s ease-out;
position: relative;
overflow: hidden
}

.successpage .btnprimary:hover {
transform: translateY(-2px);
box-shadow: 0 5px 14px 0 #23122c17
}

.successpage .btnprimary:active {
transform: translateY(0)
}

.successpage .btnsecondary {
background: transparent;
color: #23122C;
font-size: 18px;
line-height: 1.7;
padding: 12px 40px;
border: 3px solid #23122C;
border-radius: 9px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: background .18s ease, color .18s ease
}

.successpage .btnsecondary:hover {
background: #23122C;
color: #F4F4F4
}

.successpage .supportnote {
font-size: 15px;
line-height: 1.7;
color: #23122C;
opacity: .6;
margin: 40px 0 0
}

.successpage .supportnote a {
color: #23122C;
text-decoration: underline;
transition: opacity .12s ease-out
}

.successpage .supportnote a:hover {
opacity: .7
}

@media (max-width: 768px) {
.successpage {
padding: 24px 12px
}

.successpage .confirmwrap {
padding: 40px 24px
}

.successpage .iconcheck {
width: 72px;
height: 72px;
margin-bottom: 24px
}

.successpage .iconcheck svg {
width: 38px;
height: 38px
}

.successpage .msgtitle {
font-size: 28px
}

.successpage .actiongroup {
flex-direction: column
}

.successpage .btnprimary,
.successpage .btnsecondary {
width: 100%
}
}