* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:Montserrat,Arial,sans-serif;
    color:#111;
    background:#f4f4f2
}

a {
    color:inherit;
    text-decoration:none
}

.topbar {
    height:78px;
    padding:0;
    background:#617d2d;
    position:sticky;
    top:0;
    z-index:50
}

.topbar-inner {
    width:min(1180px,88%);
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.topbar-logo {
    display:block;
    width:auto;
    height:70px;
    object-fit:contain;
    flex-shrink:0
}

.logo {
    font-weight:800;
    font-size:1.3rem;
    letter-spacing:-1px
}

.logo span {
    font-weight:500
}

.nav {
    display:flex;
    align-items:center;
    gap:22px
}

.nav a {
    font-size:.84rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1.2px
}

.nav a:hover {
    opacity:.55
}

.menu-toggle {
    display:none;
    background:none;
    border:0;
    padding:10px
}

.menu-toggle span {
    display:block;
    width:25px;
    height:2px;
    background:#111;
    margin:5px
}

.hero {
    min-height:650px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#252824
}

.hero-bg {
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.76),rgba(0,0,0,.2)),url('header/header-lapp.jpg') center/cover
}

.hero-content {
    position:relative;
    color:white;
    width:min(1180px,88%);
    margin:auto;
    padding:90px 0
}

.eyebrow {
    text-transform:uppercase;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:3px;
    margin:0 0 20px
}

.green {
    color:#668b00
}

.hero h1 {
    font-size:clamp(3.2rem,7vw,7rem);
    line-height:.86;
    letter-spacing:-5px;
    margin:0 0 28px;
    max-width:800px
}

.hero h1 span {
    color:#7fba00
}

.hero-content>p:not(.eyebrow) {
    max-width:570px;
    line-height:1.7;
    color:#e2e2e2
}

.hero-actions {
    display:flex;
    gap:12px;
    margin-top:34px
}

.btn {
    display:inline-block;
    padding:16px 24px;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    border:1px solid transparent
}

.primary {
    background:#7fba00;
    color:#101010
}

.ghost {
    border-color:#fff;
    color:#fff
}

.section {
    padding:120px 6vw
}

.section-inner {
    width:min(1600px,88%);
    margin:auto;
    position:relative;
    z-index:2
}

.narrow {
    max-width:1600px;
    text-align:center
}

.section h2,.diagonal h2 {
    font-size:clamp(2.1rem,4vw,4.2rem);
    line-height:1.05;
    letter-spacing:-2px;
    margin:0 0 25px
}

.lead {
    font-size:1.05rem;
    line-height:1.8;
    color:#686868
}

.facts {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:65px
}

.facts strong {
    display:block;
    font-size:2.5rem
}

.facts span {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:1px
}

.diagonal {
    min-height:570px;
    position:relative;
    overflow:hidden;
    border-top:1px solid #222
}

.diagonal-left .shape {
    position:absolute;
    inset:0 48% 0 0;
    background:#617d2d;
    clip-path:polygon(0 0,100% 0,72% 100%,0 100%)
}

.diagonal-content {
    padding:100px 0
}

.diagonal-content>h2 {
    max-width:750px
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:55px
}

.cards article {
    background:#fff;
    padding:35px;
    min-height:220px;
    box-shadow:0 12px 35px rgba(0,0,0,.07)
}

.cards span {
    font-size:.72rem;
    font-weight:800;
    color:#7fba00
}

.cards h3 {
    font-size:1.2rem;
    margin:25px 0 12px
}

.cards p {
    font-size:.9rem;
    line-height:1.7;
    color:#686868
}

.diagonal-right {
    background:#fff
}

.diagonal-right .shape {
    position:absolute;
    inset:0 0 0 50%;
    background:#617d2d;
    clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)
}

.project-content {
    padding:100px 0;
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:80px;
    align-items:center
}

.text-link {
    font-weight:800;
    font-size:.8rem;
    text-transform:uppercase
}

.project-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}

.project-card {
    background:white;
    padding:12px;
    box-shadow:0 12px 35px rgba(0,0,0,.08)
}

.placeholder {
    height:210px;
    display:grid;
    place-items:center;
    background:#292929;
    color:#7fba00;
    font-weight:800;
    letter-spacing:2px
}

.project-card h3 {
    margin:18px 10px 4px
}

.project-card p {
    margin:0 10px 14px;
    font-size:.75rem;
    color:#777
}

.cta {
    background:#f4f4f2
}

.darktext {
    margin-top:20px
}

footer {
    background:#617d2d;
    padding:80px 6vw 25px
}

.footer-grid {
    width:min(1180px,88%);
    margin:auto;
    display:grid;
    grid-template-columns:1.5fr repeat(3,1fr);
    gap:50px
}

.footer-grid h4 {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:1.5px;
    margin-top:4px
}

.footer-grid a,.footer-grid p {
    display:block;
    font-size:.8rem;
    line-height:1.8;
    margin:5px 0
}

.footer-grid>div:first-child p {
    max-width:260px;
    margin-top:20px
}

.copyright {
    width:min(1180px,88%);
    margin:60px auto 0;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,.2);
    font-size:.68rem
}

.reveal {
    opacity:0;
    transform:translateY(25px);
    transition:.7s ease
}

.reveal.visible {
    opacity:1;
    transform:none
}

 @media(max-width:800px) {
    .topbar {
        height:68px
    }
    .topbar-logo {
        height:56px
    }
    .menu-toggle {
        display:block;
        z-index:2
    }
    .nav {
        position:absolute;
        top:68px;
        left:0;
        right:0;
        background:#617d2d;
        display:none;
        flex-direction:column;
        padding:25px 6vw 32px;
        gap:20px
    }
    .nav.open {
        display:flex
    }
    .hero {
        min-height:600px
    }
    .hero h1 {
        letter-spacing:-3px
    }
    .hero-bg {
        background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.65)),url("header/header-lapp.jpg") center/cover
    }
    .section {
        padding:85px 5vw
    }
    .facts {
        grid-template-columns:1fr;
        gap:35px
    }
    .diagonal-left .shape {
        inset:0;
        background:#617d2d;
        clip-path:polygon(0 0,100% 0,100% 23%,0 36%);
        opacity:.25
    }
    .diagonal-right .shape {
        inset:0;
        background:#617d2d;
        clip-path:polygon(70% 0,100% 0,100% 100%,90% 100%);
        opacity:.3
    }
    .diagonal-content,.project-content {
        padding:80px 0
    }
    .cards {
        grid-template-columns:1fr
    }
    .project-content {
        grid-template-columns:1fr;
        gap:40px
    }
    .project-grid {
        grid-template-columns:1fr
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .hero-actions {
        flex-wrap:wrap
    }

}

 @media(max-width:480px) {
    .section-inner,.footer-grid,.copyright {
        width:90%
    }
    .hero-content {
        width:90%
    }
    .hero h1 {
        font-size:3.25rem
    }
    .hero-actions {
        flex-direction:column;
        align-items:stretch
    }
    .btn {
        text-align:center
    }
    .footer-grid {
        grid-template-columns:1fr;
        gap:30px
    }

}

 /* Keine horizontalen Trennlinien zwischen den Sektionen */
 main section, .diagonal, .section {
     border-top: none !important;
     border-bottom: none !important;
     outline: none;

}

 /* ===== Unterseiten ===== */
 .subpage h1 {
    font-size:clamp(3rem,7vw,7rem);
    line-height:.9;
    letter-spacing:-5px;
    margin:0
}

.subpage h1 span {
    color:#7fba00
}

 .subpage h2 {
    letter-spacing:-1.5px
}

.subhero {
    min-height:610px;
    padding:90px max(6vw,24px);
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden
}

 .about-hero {
    background:#242722;
    color:#fff
}

.about-hero:after {
    content:"";
    position:absolute;
    right:-8%;
    top:0;
    width:50%;
    height:100%;
    background:#7fba00;
    clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)
}

 .subhero-copy {
    width:min(1180px,88%);
    margin:auto;
    position:relative;
    z-index:2
}

.subhero-copy>p:last-child {
    max-width:550px;
    line-height:1.8;
    color:#ccc
}

 .hero-number {
    position:absolute;
    right:7%;
    bottom:-50px;
    font-size:18rem;
    font-weight:800;
    color:rgba(0,0,0,.12);
    z-index:1
}

 .story {
    padding:120px 6vw;
    background:#f4f4f2
}

.story-grid {
    width:min(1180px,88%);
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px
}

.story h2 {
    font-size:clamp(2.2rem,4vw,4rem);
    margin:0
}

.story-grid>div:last-child {
    font-size:1rem;
    line-height:1.9;
    color:#666
}

 .values-band {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    background:#7fba00;
    padding:0 6vw
}

.value {
    padding:70px 45px;
    border-right:1px solid rgba(0,0,0,.15)
}

.value:last-child {
    border:0
}

.value b {
    font-size:.75rem
}

.value h3 {
    font-size:1.5rem;
    margin:28px 0 12px
}

.value p {
    line-height:1.7
}

 .service-head {
    padding:120px max(6vw,24px);
    background:#20231f;
    color:#fff;
    display:grid;
    grid-template-columns:1.4fr .6fr;
    gap:70px;
    align-items:end
}

.service-head>p {
    line-height:1.8;
    color:#bbb;
    max-width:450px
}

 .service-list {
    background:#f3f3f1
}

.service-list article {
    display:grid;
    grid-template-columns:80px 1fr 50px;
    align-items:center;
    gap:30px;
    padding:50px max(8vw,30px);
    border-bottom:1px solid #d2d2ce;
    transition:.25s
}

.service-list article:hover {
    background:#7fba00;
    padding-left:calc(max(8vw,30px) + 12px)
}

.service-list article>span {
    font-size:.75rem;
    font-weight:800
}

.service-list h2 {
    font-size:clamp(1.6rem,3vw,3rem);
    margin:0 0 8px
}

.service-list p {
    margin:0;
    color:#666
}

.service-list article:hover p {
    color:#243000
}

.service-list article>b {
    font-size:2rem
}

.service-cta {
    text-align:center;
    padding:100px 6vw;
    background:#fff
}

.service-cta h2 {
    font-size:clamp(2rem,4vw,4rem);
    margin:0 0 35px
}

 .projects-intro {
    padding:120px max(6vw,24px) 90px;
    background:#f4f4f2
}

.projects-intro>* {
    max-width:1180px;
    margin-left:auto;
    margin-right:auto
}

.projects-intro>p:last-child {
    max-width:1180px;
    margin-top:30px;
    line-height:1.8;
    color:#666
}

 .portfolio {
    padding:0 max(6vw,24px) 120px;
    background:#f4f4f2
}

.work {
    width:min(1180px,100%);
    margin:0 auto 100px;
    display:grid;
    grid-template-columns:1.35fr .65fr;
    gap:60px;
    align-items:end
}

.work-b {
    grid-template-columns:.65fr 1.35fr
}

.work-b .work-image {
    order:2
}

.work-image {
    height:480px;
    display:grid;
    place-items:center;
    background:#272a26;
    color:#7fba00;
    font-size:1.3rem;
    font-weight:800;
    letter-spacing:4px
}

.work-b .work-image {
    background:#7fba00;
    color:#111
}

.work-c .work-image {
    background:#d8d8d3;
    color:#111
}

.work small {
    font-weight:800;
    letter-spacing:1px
}

.work h2 {
    font-size:2.2rem;
    margin:15px 0
}

.work p {
    line-height:1.7;
    color:#666
}

 .contact-layout {
    min-height:760px;
    display:grid;
    grid-template-columns:1fr 1fr
}

.contact-copy {
    padding:110px max(6vw,40px);
    background:#252824;
    color:#fff
}

.contact-copy>p {
    max-width:570px;
    line-height:1.8;
    color:#bbb
}

.contact-data {
    margin-top:60px
}

.contact-data a {
    display:block;
    font-size:1.15rem;
    font-weight:700;
    margin:10px 0
}

.contact-data p {
    color:#aaa!important
}

.contact-form {
    padding:100px max(7vw,40px);
    background:#d9d9d5;
    display:flex;
    flex-direction:column;
    gap:26px
}

.contact-form label {
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px
}

.contact-form input,.contact-form textarea,.contact-form select {
    width:100%;
    margin-top:9px;
    padding:15px 0;
    border:0;
    border-bottom:1px solid rgba(0,0,0,.45);
    background:transparent;
    font:inherit;
    outline:none
}

.contact-form textarea {
    resize:vertical
}

.contact-form .btn {
    align-self:flex-start;
    background:#222;
    color:#fff;
    border:0
}

.contact-form small {
    opacity:.7
}

 @media(max-width:800px) {
    .subpage h1 {
        letter-spacing:-3px
    }
    .about-hero:after {
        width:38%;
        opacity:.45
    }
    .hero-number {
        font-size:10rem
    }
    .story-grid,.service-head,.contact-layout {
        grid-template-columns:1fr
    }
    .story-grid {
        gap:35px
    }
    .values-band {
        grid-template-columns:1fr
    }
    .value {
        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.15)
    }
    .service-head {
        padding-top:90px
    }
    .service-list article {
        grid-template-columns:45px 1fr 25px;
        padding:35px 6vw
    }
    .service-list article:hover {
        padding-left:6vw
    }
    .work,.work-b {
        grid-template-columns:1fr;
        gap:25px;
        margin-bottom:70px
    }
    .work-b .work-image {
        order:0
    }
    .work-image {
        height:320px
    }
    .contact-copy,.contact-form {
        padding:80px 7vw
    }

}

 /* Leistungen: zwei große Sektoren statt Leistungs-Liste */
 .service-sectors {
    background:#f4f4f2
}

 .service-sector {
    min-height:560px;
    display:grid;
    grid-template-columns:1fr 1fr
}

 .service-sector-copy {
    position:relative;
    padding:95px max(7vw,55px);
    display:flex;
    flex-direction:column;
    justify-content:center
}

 .service-sector-copy .sector-no {
    position:absolute;
    top:45px;
    right:55px;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:1px
}

 .service-sector-copy h2 {
    font-size:clamp(2.5rem,4.5vw,5rem);
    line-height:.95;
    margin:0 0 28px;
    letter-spacing:-3px
}

 .service-sector-copy>p:not(.eyebrow) {
    max-width:600px;
    line-height:1.8;
    color:#646464
}

 .service-visual {
    min-height:560px;
    display:grid;
    place-items:center;
    background:#d9d9d5;
    overflow:hidden;
    position:relative
}

 .service-visual:after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,transparent 0 60%,rgba(127,186,0,.9) 60%)
}

 .service-visual span {
    position:relative;
    z-index:2;
    text-align:center;
    font-size:.75rem;
    font-weight:800;
    letter-spacing:3px
}

 .sector-two .service-sector-copy {
    background:#7fba00
}

 .sector-two .service-sector-copy>p:not(.eyebrow) {
    color:#273500
}

 .sector-two .service-visual {
    background:#242724;
    color:#fff
}

 .sector-two .service-visual:after {
    background:linear-gradient(135deg,rgba(127,186,0,.82) 0 35%,transparent 35%)
}

 .sector-link {
    margin-top:25px;
    font-size:.78rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
    align-self:flex-start;
    border-bottom:2px solid currentColor;
    padding-bottom:6px
}

 @media(max-width:800px) {
     .service-sector {
        grid-template-columns:1fr;
        min-height:0
    }
     .service-sector-copy {
        padding:75px 7vw
    }
     .service-sector-copy .sector-no {
        top:30px;
        right:7vw
    }
     .service-sector-copy h2 {
        letter-spacing:-2px
    }
     .service-visual {
        min-height:330px
    }
     .sector-two .service-visual {
        order:2
    }
     .sector-two .service-sector-copy {
        order:1
    }

}

/* ==================================================
   HERO – CALL TO ACTION
   ================================================== */

.hero-cta-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 30px;
    background: #5f7f2b;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.25s ease;
}

.hero-cta:hover {
    background: #4f6c22;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-cta span {
    font-size: 20px;
    transition: transform 0.25s ease;
}

.hero-cta:hover span {
    transform: translateX(4px);
}

.hero-cta-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: #777;
    text-align: center;
}

/* =========================================
   PROJEKTE
   ========================================= */

.work {
    width: min(1650px, 92%);
    margin: 0 auto 120px;

    display: grid;
    grid-template-columns: 800px 420px;
    gap: 80px;

    justify-content: center;
    align-items: center;
}


/* BILD */

.work-image {
    width: 800px;
    height: 800px;
    overflow: hidden;
    background: transparent;
}

.work-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* TEXT */

.work-copy {
    width: 420px;
}

.work-copy small {
    display: block;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.work-copy h2 {
    font-size: 2.6rem;
    margin: 0 0 18px;
}

.work-copy p {
    margin: 0;
    line-height: 1.7;
    color: #666;
}


/* =========================================
   PROJEKT B – NUR SPIEGELN
   ========================================= */

.work-b {
    grid-template-columns: 420px 800px;
}

.work-b .work-copy {
    grid-column: 1;
    grid-row: 1;
}

.work-b .work-image {
    grid-column: 2;
    grid-row: 1;

    width: 800px;
    height: 800px;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 1000px) {

    .work,
    .work-b {
        width: 90%;
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 80px;
    }

    .work-image,
    .work-b .work-image {
        grid-column: 1;
        grid-row: auto;

        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .work-copy,
    .work-b .work-copy {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
    }
}

 
    .lohnify-pricing {
      --lp-green: #617d2d;
      --lp-dark: #243319;
      --lp-light: #f4f7ef;
      --lp-border: #e1e8d8;
      padding: 90px 20px;
      background: #f4f4f2;
      color: #202820;
      font-family: inherit;
    }

    .lohnify-pricing * {
      box-sizing: border-box;
    }

    .lp-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    .lp-heading {
      text-align: center;
      margin-bottom: 48px;
    }

    .lp-heading span {
      color: var(--lp-green);
      font-weight: 800;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-size: 13px;
    }

    .lp-heading h2 {
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.15;
      margin: 14px 0 18px;
      color: var(--lp-dark);
    }

    .lp-heading p {
      max-width: 650px;
      margin: auto;
      color: #697168;
      line-height: 1.7;
    }

    .lp-cards {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
      align-items: stretch;
    }

    .lp-card {
      position: relative;
      border: 1px solid var(--lp-border);
      border-radius: 20px;
      padding: 34px 28px;
      display: flex;
      flex-direction: column;
      background: #fff;
    }

    .lp-card.featured {
      border: 2px solid var(--lp-green);
      box-shadow: 0 16px 40px rgba(54, 86, 28, .12);
    }

    .lp-card .lp-tag {
      color: var(--lp-green);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .lp-card h3 {
      margin: 10px 0;
      font-size: 29px;
      color: var(--lp-dark);
    }

    .lp-price {
      margin: 15px 0 6px;
      font-size: 40px;
      font-weight: 850;
      letter-spacing: -1.5px;
      color: var(--lp-dark);
    }

    .lp-price small {
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0;
    }

    .lp-tax {
      color: #818981;
      font-size: 13px;
    }

    .lp-desc {
      color: #697168;
      line-height: 1.65;
      min-height: 82px;
      margin: 22px 0;
    }

    .lp-button {
      display: block;
      text-align: center;
      padding: 15px 20px;
      background: var(--lp-green);
      color: #fff !important;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 750;
      margin-bottom: 26px;
      transition: background .2s;
    }

    .lp-button:hover {
      background: #496321;
    }

    .lp-features {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }

    .lp-features li {
      display: flex;
      gap: 11px;
      line-height: 1.5;
      font-size: 14px;
    }

    .lp-features li::before {
      content: "✓";
      color: var(--lp-green);
      font-weight: 900;
      flex-shrink: 0;
    }

    .lp-limits {
      border-top: 1px solid var(--lp-border);
      padding-top: 20px;
      margin-top: 25px;
      color: #5e695b;
      font-size: 13px;
      line-height: 1.8;
    }

    .lp-limits strong {
      display: block;
      color: var(--lp-dark);
      font-size: 14px;
      margin-bottom: 7px;
    }

    .lp-table-wrap {
      margin-top: 65px;
      overflow-x: auto;
    }

    .lp-table-wrap h3 {
      font-size: 29px;
      text-align: center;
      margin-bottom: 25px;
      color: var(--lp-dark);
    }

    .lp-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 610px;
    }

    .lp-table th,
    .lp-table td {
      padding: 16px;
      border-bottom: 1px solid var(--lp-border);
      text-align: center;
      font-size: 14px;
    }

    .lp-table th:first-child,
    .lp-table td:first-child {
      text-align: left;
      font-weight: 600;
    }

    .lp-table th {
      background: var(--lp-light);
      color: var(--lp-dark);
    }

    .lp-yes {
      color: var(--lp-green);
      font-weight: 900;
      font-size: 19px;
    }

    .lp-no {
      color: #b1b8ad;
    }

    .lp-trial {
      margin-top: 60px;
      padding: 45px 35px;
      border-radius: 20px;
      background: var(--lp-light);
      text-align: center;
    }

    .lp-trial h3 {
      font-size: clamp(25px, 3vw, 36px);
      color: var(--lp-dark);
      margin: 0 0 15px;
    }

    .lp-trial p {
      color: #62705f;
      line-height: 1.7;
      max-width: 650px;
      margin: 0 auto 25px;
    }

    .lp-trial .lp-button {
      display: inline-block;
      margin: 0;
    }

    .lp-footnote {
      text-align: center;
      margin-top: 30px;
      color: #777f74;
      font-size: 13px;
      line-height: 1.7;
    }

    @media (max-width: 900px) {
      .lp-cards {
        grid-template-columns: 1fr;
        max-width: 550px;
        margin: 0 auto;
      }

      .lp-desc {
        min-height: 0;
      }

      .lohnify-pricing {
        padding: 60px 16px;
      }
    }

    @media (max-width: 480px) {
      .lp-card {
        padding: 28px 22px;
      }

      .lp-trial {
        padding: 35px 22px;
      }

      .lp-price {
        font-size: 36px;
      }
    }

/* LOHNIFY: Tarifvergleich auf Mobilgeräten ohne horizontales Scrollen */
@media (max-width: 650px) {
  .lp-table-wrap { overflow-x: visible; width: 100%; }
  .lp-table { min-width: 0; width: 100%; table-layout: fixed; }
  .lp-table th, .lp-table td { padding: 12px 4px; font-size: 12px; overflow-wrap: anywhere; }
  .lp-table th:first-child, .lp-table td:first-child { width: 49%; padding-left: 5px; text-align: left; }
  .lp-table th:not(:first-child), .lp-table td:not(:first-child) { width: 17%; }
  .lp-table .lp-yes { font-size: 17px; }
  .lp-table-wrap h3 { font-size: clamp(22px, 6vw, 29px); }
}

/* ===== Lohnify Funktionsübersicht: aufklappbare Themenbereiche ===== */
.lohnify-features{width:min(100% - 48px,1160px);margin:80px auto 90px;color:#151515;font-family:inherit;text-align:left}
.lohnify-features *{box-sizing:border-box}
.lohnify-features .features-head{text-align:center;max-width:800px;margin:0 auto 46px}
.lohnify-features .features-kicker{display:block;color:#617d2d;font-size:.8rem;font-weight:800;letter-spacing:.13em;margin-bottom:14px}
.lohnify-features h2{font-size:clamp(2rem,3.7vw,3.3rem);line-height:1.15;letter-spacing:-.035em;color:#151515;margin:0 0 20px;text-align:center}
.lohnify-features .features-intro{color:#686868;font-size:1.02rem;line-height:1.8;margin:0 auto}
.lohnify-features .features-groups{border-top:1px solid #d9d9d5}
.lohnify-features .features-group{border-bottom:1px solid #d9d9d5;background:transparent}
.lohnify-features .features-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 8px;outline-offset:4px}
.lohnify-features .features-group>summary::-webkit-details-marker{display:none}
.lohnify-features .features-group-info{display:flex;flex-direction:column;gap:7px;min-width:0}
.lohnify-features .features-group-info strong{font-size:1.26rem;line-height:1.35;color:#191919;font-weight:700}
.lohnify-features .features-group-info small{font-size:.92rem;color:#777;line-height:1.5}
.lohnify-features .features-group-right{display:flex;align-items:center;gap:23px;flex-shrink:0}
.lohnify-features .features-count{font-size:.82rem;color:#777;white-space:nowrap}
.lohnify-features .features-chevron{display:block;width:11px;height:11px;border-right:2px solid #617d2d;border-bottom:2px solid #617d2d;transform:rotate(45deg);transition:transform .2s;margin-right:9px;margin-top:-5px}
.lohnify-features .features-group[open] .features-chevron{transform:rotate(225deg);margin-top:5px}
.lohnify-features .features-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:50px;row-gap:0;padding:0 8px 27px}
.lohnify-features .features-item{padding:17px 0;border-top:1px solid #e7e7e3}
.lohnify-features .features-item h3{font-size:.98rem;line-height:1.45;color:#242424;margin:0 0 6px;font-weight:700}
.lohnify-features .features-item p{font-size:.9rem;line-height:1.7;color:#696969;margin:0}
.lohnify-features .features-note{font-size:.82rem;color:#828282;margin:22px 0 0;line-height:1.6}
@media(max-width:700px){
 .lohnify-features{width:calc(100% - 32px);margin:48px auto 60px}
 .lohnify-features .features-head{margin-bottom:32px}
 .lohnify-features .features-group>summary{padding:21px 0;gap:12px}
 .lohnify-features .features-group-info strong{font-size:1.08rem}
 .lohnify-features .features-group-info small{font-size:.83rem}
 .lohnify-features .features-group-right{gap:12px}
 .lohnify-features .features-count{display:none}
 .lohnify-features .features-items{grid-template-columns:1fr;padding:0 0 20px}
 .lohnify-features .features-item{padding:14px 0}
}