/* =====================================================================
   ARTiQ Designsystem-Schicht über dem Trexa-Original (style.css bleibt unangetastet)
   Quelle des Systems: artiq-angebotstool (Angebot AN-1197), artiq-kickoff Decks,
   e-repa Konzeptvorlage, ARTiQ Hub. Regeln: nur Kanit, Schnitt-Wechsel 600 / 300 /
   200-italic / 100-italic, Dunkel #060606, Grün #A2C14B, Pills 999px, ✦-Bullets,
   grün gerahmte Karten 20px, Hairlines #e4e4df. Layout/Effekte des Templates bleiben.
   ===================================================================== */

/* ---------- Kanit lokal (DSGVO) ---------- */
@font-face{font-family:"Kanit";font-style:italic;font-weight:100;font-display:swap;src:url("../fonts/kanit/Kanit-100-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:100;font-display:swap;src:url("../fonts/kanit/Kanit-100-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:italic;font-weight:200;font-display:swap;src:url("../fonts/kanit/Kanit-200-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:200;font-display:swap;src:url("../fonts/kanit/Kanit-200-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:italic;font-weight:300;font-display:swap;src:url("../fonts/kanit/Kanit-300-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/kanit/Kanit-300-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:italic;font-weight:400;font-display:swap;src:url("../fonts/kanit/Kanit-400-italic-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/kanit/Kanit-400-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/kanit/Kanit-500-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/kanit/Kanit-600-normal-latin.woff2") format("woff2")}

/* ---------- Token-Mapping: Template-Variablen -> ARTiQ ---------- */
:root{
  --artiq-dark:#060606; --artiq-green:#A2C14B; --artiq-green-ink:#6f8525; --artiq-green-soft:#eef2e1;
  --artiq-ink:#1d1d1b; --artiq-body:#3a3a35; --artiq-muted:#83837e; --artiq-muted-light:#bdbdb7;
  --artiq-line:#e4e4df; --artiq-line-dark:rgba(255,255,255,.14); --artiq-paper:#f3f3ef; --artiq-coal:#0f0f0e;
  --primary:var(--artiq-dark); --black:var(--artiq-dark); --secondary:var(--artiq-muted);
  --red:var(--artiq-green); --green:var(--artiq-green); --lime-green:var(--artiq-green); --orange:var(--artiq-green);
  --yellow:var(--artiq-green); --purple:var(--artiq-green); --gray:var(--artiq-muted); --gray-two:var(--artiq-muted);
  --gray-three:var(--artiq-paper); --border-color-one:var(--artiq-line-dark); --border-color-two:var(--artiq-line);
  --font_kanit:"Kanit",Arial,sans-serif; --font_instr:"Kanit",Arial,sans-serif; --font_mono:"Kanit",Arial,sans-serif; --font_bai:"Kanit",Arial,sans-serif;
}
body{font-family:var(--font_kanit);color:var(--artiq-ink);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
h1,h2,h3,h4,h5,h6{font-family:var(--font_kanit)}

/* ---------- Typo-System (Angebot): Headline 600 Versal, Subline 200 italic Versal, Kicker 100 italic Versal grün ---------- */
.artiq-h,.section__title,.section-top6__title,.about-area6__content-title,.cyber-services7 .section-title,.cyber-services7__card-title,
.testimonial-area6__card-content-subtitle,.footer-area6__top-title,.about-section-3__dec,.testimonial-5__desc,.about-us-5__subtitle,.about-us-5__subtitle strong,
.hero-section-5__title,.hero-section-5__title strong,.about-area6__number-title,.testimonial-area6__items-info-content-point,.achievement-area6__items-year,.achievement-area6__items-title,.footer-area4-widget__title,.footer-area6-widget__title{
  font-family:var(--font_kanit)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.005em;text-decoration:none!important;
}
.hero-section-5__title,.hero-section-5__title strong{line-height:.98!important}
.section__title,.section-top6__title,.about-area6__content-title,.cyber-services7 .section-title,.footer-area6__top-title,.testimonial-5__desc,.about-us-5__subtitle{line-height:1.02!important}
.cyber-services7__card-title{line-height:1.05!important;font-size:30px!important}
.testimonial-area6__card-content-subtitle,.about-section-3__dec{text-transform:none;font-weight:400!important;line-height:1.35!important}
.testimonial-5__desc{font-weight:300!important;text-transform:none;line-height:1.25!important}
.about-us-5__subtitle{font-weight:200!important;font-style:italic}
.about-us-5__subtitle strong{font-style:normal}
/* Kicker */
.hero-section-5__subtitle,.section-top6__subtitle,.cyber-services7__subtitle,.about-area6__content-subtitle,.hero-section-5__author .desg{
  font-family:var(--font_kanit)!important;font-weight:100!important;font-style:italic;text-transform:uppercase;letter-spacing:.04em;text-decoration:none!important;color:var(--artiq-green)!important;
}
.hero-section-5__subtitle{font-size:26px!important;line-height:1.1!important;display:inline-block;margin-bottom:22px}
.section-top6__subtitle{font-size:22px!important}
.cyber-services7__subtitle{font-size:22px!important;letter-spacing:.04em!important;margin-bottom:14px!important}
.about-area6__content-subtitle{font-size:22px!important;margin-bottom:10px!important}
/* Sublines / Fließtext 300 */
.section-top6__text,.about-us-5__desc,.about-us-5__text span,.cyber-services7__card-text,.hero-section-5__author .desc,.achievement-area6__items-subtitle,.testimonial-area6__items-info-content-subtitle,.about-section-3__text{
  font-family:var(--font_kanit)!important;font-weight:300!important;
}
.section-top6__text,.about-section-3__text{color:var(--artiq-body)!important}
.about-us-5__text{font-weight:600!important;text-transform:uppercase;letter-spacing:.02em}
.about-us-5__title{font-family:var(--font_kanit)!important;font-weight:100!important;font-style:italic;color:var(--artiq-green)}

/* ---------- Pills (Angebot .pill) ---------- */
.section__subtitle,.about-area6__number-button,.artiq-pill{
  font-family:var(--font_kanit)!important;font-size:12px!important;font-weight:500!important;letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1!important;
  padding:11px 20px!important;border-radius:999px!important;white-space:nowrap;display:inline-flex!important;align-items:center;gap:8px;
}
.section__subtitle{border:1px solid var(--artiq-green)!important;color:var(--artiq-green-ink)!important;background:transparent!important}
.project-section-3__top .section-heading__wrap_3 .section__subtitle{color:var(--artiq-green)!important;border-color:rgba(162,193,75,.6)!important}
.section__subtitle span{display:none}
.about-area6__number-button{background:var(--artiq-green)!important;border:1px solid var(--artiq-green)!important;color:#2c2c2b!important;font-size:14px!important;padding:16px 26px!important}

/* ---------- Buttons: Pill 999px, 500, Versal .12em; Hover-Text-Swap bleibt (Original-Effekt) ---------- */
.rr-btn-green,.rr-btn-2{font-family:var(--font_kanit)!important;font-size:14px!important;font-weight:500!important;letter-spacing:.12em!important;text-transform:uppercase;border-radius:999px!important;padding:17px 34px!important;line-height:1.2!important}
.rr-btn-green.btn-black{background:var(--artiq-dark)!important;color:#fff!important}
.rr-btn-green::before,.rr-btn-2::before{background-color:var(--artiq-green)!important}
.rr-btn-green:hover .btn-wrap .text-two,.rr-btn-green:focus .btn-wrap .text-two,.rr-btn-2:hover .btn-wrap .text-two{color:var(--artiq-dark)!important}
.rr-btn-green .btn-wrap .text-one{color:inherit!important}
.rr-btn-border,.rr-btn-button,.rr-btn-button2,.rr-btn-button3,.rr-btn-button4,.rr-btn-button5{font-family:var(--font_kanit)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em!important;border-radius:999px!important;border-color:var(--artiq-line)!important}
.rr-btn-border .icon,.rr-btn-button .icon,.rr-btn-button2 .icon,.rr-btn-button3 .icon,.rr-btn-button4 .icon,.rr-btn-button5 .icon{background:var(--artiq-green)!important;color:var(--artiq-dark)!important}
.rr-btn-button2.btn-purple{background:var(--artiq-green)!important;color:var(--artiq-dark)!important;border-color:var(--artiq-green)!important}
.rr-btn-button2.btn-purple .icon{background:var(--artiq-dark)!important}
.rr-btn-button2.btn-purple .icon svg path{stroke:#fff}
.rr-btn-button3.btn-purple .icon,.rr-btn-button5.btn-dark .icon{background:var(--artiq-green)!important}
.rr-btn-button3.btn-purple .icon svg path,.rr-btn-button5.btn-dark .icon svg path{stroke:var(--artiq-dark)}

/* ---------- Header (transparent über dunklem Hero) ---------- */
.header-area-5 .header-area-5__inner{border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);padding:8px 14px 8px 24px}
.header-area-5 .main-menu li a{font-family:var(--font_kanit);font-weight:400;font-size:15px;letter-spacing:.02em;color:#f2f2ee}
.header-area-5 .main-menu > ul > li:hover > a,.header-area-5 .main-menu li a:hover{color:var(--artiq-green)}
.header-area-5 .main-menu ul.dp-menu{background:var(--artiq-coal);border:1px solid var(--artiq-line-dark);border-radius:14px}
.header-area-5 .main-menu ul.dp-menu li a{font-weight:300;color:#e8e8e3}
.header-area-5 .header-social li a{color:#f2f2ee;border-color:rgba(255,255,255,.35)}
.header-area-5 .header-social li a:hover{background:var(--artiq-green);border-color:var(--artiq-green);color:var(--artiq-dark)}
.header__logo img.normal-logo{height:30px;width:auto}
.header-area-5 .rr-btn-border{color:#f2f2ee!important;border-color:rgba(255,255,255,.35)!important}
.header-area-5 .rr-btn-border .icon{background:var(--artiq-green)!important;color:var(--artiq-dark)!important}
.side-toggle .bar-icon span{background:#f2f2ee!important}

/* ---------- Hero: dunkle Bühne (Angebots-Cover) ---------- */
.hero-section-5{background:var(--artiq-dark)!important;color:#fff}
.hero-section-5__wrapper{background-image:radial-gradient(1400px 900px at 78% 12%,rgba(255,255,255,.05),transparent 60%),linear-gradient(133deg,#121212 0%,#0a0a0a 45%,#050505 100%)!important}
.hero-section-5__title,.hero-section-5__title strong,.hero-section-5__rating-box .score,.hero-section-5__author .name,.hero-section-5__author .desc,.hero-section-5__thumb a{color:#fff!important}
.hero-section-5__title{font-size:92px!important}
.hero-section-5__title strong{font-size:92px!important}
.hero-section-5__title img{background:var(--artiq-green)!important}
.hero-section-5__author .desc{color:var(--artiq-muted-light)!important;font-size:15px!important;line-height:1.55!important}
.hero-section-5__rating-box{border-right:1px solid var(--artiq-line-dark)!important}
.hero-section-5__rating-box .rating-star i,.about-area6__content-star i{color:var(--artiq-green)!important}
.hero-section-5__btn .btn-black{background:var(--artiq-green)!important;color:var(--artiq-dark)!important}
.hero-section-5__btn .btn-black::before{background-color:#fff!important}
.hero-section-5__thumb .zoom-thumb{border-radius:20px!important}
.hero-section-5__thumb a{font-family:var(--font_kanit)!important;font-weight:500!important;letter-spacing:.12em;font-size:12px!important}

/* ---------- About 6 ---------- */
.about-area6__number-title{color:var(--artiq-ink);font-weight:200!important}
.about-area6__content-title{color:var(--artiq-ink)!important;font-size:46px!important}
.about-area6__thumb img{border-radius:20px}

/* ---------- Projekte (dunkel) ---------- */
.rr-bg-primary{background-color:var(--artiq-dark)!important}
.project-section-3__top .section-heading__wrap_3 .section__title{color:#fff!important}
.project-section-3__thumb,.project-section-3__thumb img{border-radius:20px!important}
.project-section-3__btn a{font-family:var(--font_kanit)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;background:var(--artiq-green)!important;color:var(--artiq-dark)!important}
.project-section-3__pagination .swiper-pagination-bullet{background-color:var(--artiq-line-dark)!important}
.project-section-3__pagination .swiper-pagination-bullet-active{background-color:var(--artiq-green)!important}

/* ---------- Leistungen (dunkle Karten) ---------- */
.cyber-services7{background:var(--artiq-dark)!important}
.cyber-services7 .section-title{color:#fff;font-size:50px!important}
.cyber-services7__card{background:var(--artiq-coal)!important;border:1px solid var(--artiq-line-dark)!important;border-radius:20px!important}
.cyber-services7__card--highlight{background:var(--artiq-coal)!important;border-color:var(--artiq-green)!important;border-width:1.4px!important}
.cyber-services7__card:hover{background:var(--artiq-coal)!important;box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px rgba(162,193,75,.35)!important}
.cyber-services7__icon{color:var(--artiq-green)!important}
.cyber-services7__card-text{color:#c4c4bf!important}
.cyber-services7__arrow{background:var(--artiq-green)!important}
.cyber-services7__arrow svg path{stroke:var(--artiq-dark)!important}
.cyber-services7__arrow:hover{background:#fff!important}

/* ---------- Testimonial 6 + Zahlen (gedämpfte Fläche) ---------- */
.testimonial-area6,.achievement-area6,.testimonial-area6__items{background:var(--artiq-paper)!important}
.testimonial-area6__card{border:1px solid var(--artiq-line);border-radius:20px!important}
.testimonial-area6__card-content-subtitle{color:var(--artiq-ink)!important;font-size:22px!important}
.testimonial-area6__card-content-items-subtitle{font-weight:500!important;font-size:20px!important;color:var(--artiq-ink)!important}
/* Quelle unter dem Namen (echte Google-Bewertungen seit 28.09.2026, ohne Trexa-Stockfoto) */
.testimonial-area6__card-content-items-subtitle .artiq-stimme__quelle{display:block;margin-top:4px;font-weight:300;font-size:14px;line-height:1.3;opacity:.72}
.testimonial-area6__card-content-icon svg,.testimonial-area6__card-content-icon svg *{fill:var(--artiq-green)}
.testimonial-area6__items-info-content-point{font-weight:600!important}
.achievement-area6-wrapper{border-radius:20px!important;border:1px solid var(--artiq-line-dark)!important;background-color:var(--artiq-dark)!important;background-image:none!important}
.achievement-area6__items-year{color:var(--artiq-green)!important}
.achievement-area6__items-title{font-size:20px!important;letter-spacing:.02em}
.achievement-area6__items-subtitle{color:var(--artiq-muted-light)!important}

/* ---------- Testimonial 5 (Zitat) ---------- */
.testimonial-5__quote svg,.testimonial-5__quote svg *{fill:var(--artiq-green)}
.testimonial-5__name{font-weight:500!important;color:var(--artiq-ink)!important}
.testimonial-5__swiper-button-next{background:var(--artiq-green)!important}
.testimonial-5__swiper-button-prev{background:var(--artiq-dark)!important}

/* ---------- About 3 (grün gerahmte Karten wie Angebots-Positionskarte) ---------- */
.about-section-3__card{border:1.4px solid var(--artiq-green)!important;border-radius:20px!important}
.about-section-3__title{font-family:var(--font_kanit)!important;font-weight:500!important;font-size:13px!important;letter-spacing:.12em;color:var(--artiq-green-text,#5f7420)!important}
.about-section-3__title a i{color:var(--artiq-green)!important}
.about-section-3__dec{color:var(--artiq-ink)!important;font-size:26px!important}
.about-section-3__thumb,.about-section-3__thumb img{border-radius:20px!important}
.section-heading__wrap_3 .section__title{color:var(--artiq-ink)}

/* ---------- About-us 5 (Hairlines) ---------- */
.about-us-5__wrap{border-top:1px solid var(--artiq-line)!important}
.about-us-5__item{border-right:1px solid var(--artiq-line)!important}
.about-us-5__subtitle,.about-us-5__subtitle strong,.about-us-5__text,.about-us-5__text span{color:var(--artiq-ink)!important}
.about-us-5__desc{color:var(--artiq-body)!important}

/* ---------- Footer ---------- */
.footer-area6{background:var(--artiq-dark)!important}
.footer-area6-main{background:var(--artiq-coal)!important;border:1px solid var(--artiq-line-dark);border-bottom:0;border-radius:20px 20px 0 0!important}
.footer-area6__top-title{font-size:46px!important}
.footer-area4-widget__title,.footer-area6-widget__title{font-family:var(--font_kanit)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em;color:var(--artiq-green)!important}
.footer-area4-widget__nav-link,.footer-area6-widget__nav-link{font-family:var(--font_kanit)!important;font-weight:300!important;color:#d6d6d1!important}
.footer-area4-widget__nav-link:hover,.footer-area6-widget__nav-link:hover{color:var(--artiq-green)!important}
.footer-area6-bottom__copyright{font-weight:300!important;color:var(--artiq-muted)!important;font-size:14px!important}

/* ---------- Globale Details ---------- */
.progress-wrap::after,.progress-wrap svg.progress-circle path{color:var(--artiq-green);stroke:var(--artiq-green)}
.loader-wrap{background:var(--artiq-dark)}
.loader-wrap-heading .load-text span{color:var(--artiq-green);font-family:var(--font_kanit);font-weight:200}
::selection{background:var(--artiq-green);color:var(--artiq-dark)}

/* ---------- Feinschliff nach Sichtprüfung 11.09.2026 ---------- */
.hero-section-5__title{font-size:84px!important;max-width:66%}
.hero-section-5__title strong{font-size:84px!important}
.header__logo img.normal-logo{height:34px}
.project-section-3__top .section-heading__wrap_3{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.project-section-3__top .section-heading__wrap_3 .section__title{margin-left:0!important}
.about-section-3__circle span{background-color:var(--artiq-green-soft)!important;border-radius:20px}

/* ---------- Choreografie + Whitespace (Senior-UI-Pass 11.09.2026) ---------- */
/* Hero: Band-Höhe/-Abstand setzt artiq.js; Bild wächst aus seiner Position */
.hero-section-5__wrapper{padding-top:190px!important}
.hero-section-5__wrapper .zoom-thumb{object-fit:cover;will-change:width,height,top,left}
.hero-section-5__btn{margin:44px 0 64px 0!important}
/* Projekte: Pin-Sektion passt in den Viewport, Slider wird Scroll-Spur */
.project-section-3__area{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0!important}
.project-section-3__wrapper{width:100%}
.project-section-3__top{margin-bottom:56px!important}
.project-section-3__top .section-heading__wrap_3 .section__title{font-size:44px!important;max-width:1000px!important;margin-top:24px!important;margin-bottom:34px!important}
.artiq-hscroll{overflow:visible!important}
.artiq-hscroll .swiper-wrapper{display:flex;gap:30px;will-change:transform}
.artiq-hscroll .swiper-slide{flex:0 0 auto;width:620px}
.artiq-hscroll .project-section-3__item{max-width:none}
.artiq-hscroll .project-section-3__thumb{height:420px}
.project-section-3__pagination{margin-top:56px!important}
.artiq-progress{display:block;width:100%;max-width:560px;height:2px;background:var(--artiq-line-dark);position:relative}
.artiq-progress i{position:absolute;left:0;top:-1px;height:4px;width:0;background:var(--artiq-green);transition:width .15s linear}
.tr-btn{font-family:var(--font_kanit)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;border-radius:999px!important;background:var(--artiq-green)!important;color:var(--artiq-dark)!important}
/* SEO-ToDo 3 (15.10.2026): Absatz unter "Partner statt Dienstleister". Werte 1:1 wie .about-section-3__text
   (style.css + Farbe aus diesem File), Links wie die Fliesstext-Links der Unterseiten (artiq-layouts.css .artiq-l p a). */
.artiq-start-absatz{font-family:var(--font_instr);font-size:24px;font-weight:400;line-height:34px;max-width:530px;color:var(--artiq-body)!important;margin:24px 0 0}
.artiq-start-absatz a{color:inherit;text-decoration:underline;text-decoration-color:var(--artiq-green);text-underline-offset:4px;text-decoration-thickness:1.5px}
/* Ziele-Karten: Kartentitel ist der Link (Marius 15.10.2026), Optik wie die Karten-H3 der Unterseiten (Textpruefung 08.10.2026) */
.cyber-services7__card-title a{color:inherit;text-decoration:none;transition:color .25s,text-decoration-color .25s}
.cyber-services7__card-title a:hover,.cyber-services7__card-title a:focus-visible{text-decoration:underline;text-decoration-color:var(--artiq-green);text-underline-offset:4px;text-decoration-thickness:1.5px}

/* Mehr Luft zwischen den Sektionen (Premium-Rhythmus) */
@media (min-width:1400px){
  .section-spacing{padding-top:150px!important;padding-bottom:150px!important}
  .about-area6__wrapper{margin-bottom:110px!important}
  .cyber-services7{padding:150px 0!important}
  .cyber-services7 .section-title{margin-bottom:84px!important}
  .testimonial-area6.section-spacing{padding-bottom:110px!important}
  .achievement-area6.pt-0{padding-bottom:150px!important}
  .brand-slide-5__area{padding:40px 0 60px!important}
  .about-us-5__wrapper{padding-top:20px}
  .section-top6__title{margin-bottom:90px!important}
}
/* Hairline-Trenner über hellen Sektionen (editorialer Rhythmus) */
.about-section-3__area{border-top:1px solid var(--artiq-line)}
/* Footer: volle Viewport-Höhe, komplett dunkel, Claim mittig, Linkleiste unten */
.footer-area6{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
.footer-area6 > .container{display:flex;flex-direction:column;flex:1}
.footer-area6__top{flex:1;display:flex;align-items:center;justify-content:center;padding:140px 0 100px!important}
.footer-area6__top-title{font-size:52px!important;margin-bottom:44px!important}
.footer-area6-main{padding:64px 70px 10px!important}

/* Feinschliff Senior-UI-Pass, Runde 2 */
.hero-section-5__title{font-size:76px!important;max-width:62%}
.hero-section-5__title strong{font-size:76px!important}
.project-section-3__area{padding:90px 0!important}
.project-section-3__top{margin-bottom:40px!important}
.project-section-3__top .section-heading__wrap_3 .section__title{font-size:40px!important;margin-top:18px!important;margin-bottom:28px!important}
.artiq-hscroll .project-section-3__thumb{height:380px}
.artiq-hscroll .swiper-slide{width:580px}
.project-section-3__pagination{margin-top:44px!important}

/* =====================================================================
   ARTiQ-Handschrift: Header, Hero, Footer, Logos (löst das Template-Design ab)
   ===================================================================== */
/* ---------- Buttons / Pills (Komponenten) ---------- */
.artiq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font_kanit);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:15px 26px;border-radius:999px;border:1px solid transparent;white-space:nowrap;transition:background .35s cubic-bezier(.2,.7,.2,1),color .35s,border-color .35s,transform .35s}
.artiq-btn--lg{padding:19px 34px;font-size:14px}
.artiq-btn--primary{background:var(--artiq-green);color:var(--artiq-dark);border-color:var(--artiq-green)}
.artiq-btn--primary:hover{background:#fff;border-color:#fff;color:var(--artiq-dark);transform:translateY(-1px)}
.artiq-btn--ghost{background:transparent;color:#f2f2ee;border-color:rgba(255,255,255,.28)}
.artiq-btn--ghost:hover{border-color:var(--artiq-green);color:var(--artiq-green)}
.artiq-pill--ghost{border:1px solid rgba(255,255,255,.28)!important;color:#d6d6d1!important;background:transparent!important;font-size:11px!important;padding:10px 18px!important}
.artiq-pill--ghost::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--artiq-green);display:inline-block}

/* ---------- Header ---------- */
.header-area{display:none}
.artiq-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:22px 32px 0;pointer-events:none;transition:padding .4s cubic-bezier(.2,.7,.2,1)}
.artiq-header__bar{pointer-events:auto;max-width:1376px;margin:0 auto;height:66px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 10px 0 26px;border-radius:999px;background:rgba(6,6,6,.52);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 18px 44px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:height .4s cubic-bezier(.2,.7,.2,1),background .4s,box-shadow .4s}
.artiq-header.is-scrolled{padding-top:12px}
.artiq-header.is-scrolled .artiq-header__bar{height:58px;background:rgba(6,6,6,.82)}
.artiq-header__logo{display:flex;align-items:center}
.artiq-header__logo img{height:28px;width:auto;display:block;transition:height .4s}
.artiq-header.is-scrolled .artiq-header__logo img{height:24px}
.artiq-header__nav{justify-self:center}
.artiq-header__nav>ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.artiq-header__nav>ul>li{position:relative}
.artiq-header__nav>ul>li>a{position:relative;display:inline-block;padding:12px 16px;font-family:var(--font_kanit);font-size:15px;font-weight:400;letter-spacing:.01em;color:#e8e8e3;transition:color .3s}
.artiq-header__nav>ul>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:1.5px;background:var(--artiq-green);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.artiq-header__nav>ul>li:hover>a{color:#fff}
.artiq-header__nav>ul>li:hover>a::after{transform:scaleX(1)}
.artiq-header__sub{position:absolute;top:calc(100% + 10px);left:0;min-width:300px;list-style:none;margin:0;padding:10px;border-radius:18px;background:rgba(15,15,14,.96);border:1px solid rgba(255,255,255,.1);box-shadow:0 24px 60px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility 0s .3s}
.artiq-header__nav>ul>li:hover .artiq-header__sub{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
.artiq-header__sub a{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;transition:background .25s}
.artiq-header__sub a strong{font-weight:500;font-size:15px;color:#fff}
.artiq-header__sub a span{font-weight:300;font-size:13px;color:var(--artiq-muted)}
.artiq-header__sub a:hover{background:rgba(255,255,255,.06)}
.artiq-header__sub a:hover strong{color:var(--artiq-green)}
.artiq-header__actions{display:flex;align-items:center;gap:8px}
.artiq-header__burger{display:none;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-radius:50%}
.artiq-header__burger span{display:block;width:22px;height:1.5px;background:#fff}
@media (max-width:1199px){.artiq-header__nav,.artiq-header__actions .artiq-btn{display:none}.artiq-header__burger{display:flex}.artiq-header{padding:14px 16px 0}}

/* ---------- Hero ---------- */
.artiq-hero{background:var(--artiq-dark)!important}
.hero-section-5__wrapper.artiq-hero__wrapper{padding-top:0!important;background-image:radial-gradient(1200px 700px at 82% 8%,rgba(162,193,75,.10),transparent 60%),radial-gradient(900px 600px at 10% 90%,rgba(255,255,255,.04),transparent 60%),linear-gradient(133deg,#111 0%,#0a0a0a 45%,#050505 100%)!important}
.hero-section-5__wrap.artiq-hero__wrap{display:grid!important;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:56px;min-height:100vh;min-height:100svh;padding:132px 0 56px;position:relative}
.artiq-hero__content{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:720px}
.artiq-hero__title{margin:6px 0 0;font-family:var(--font_kanit);font-weight:600;font-size:72px;line-height:.98;letter-spacing:.004em;text-transform:uppercase;color:#fff}
.artiq-hero__title i{display:block;font-weight:200;font-style:italic;color:var(--artiq-green);margin-top:6px}
.artiq-hero__sub{margin:0;max-width:560px;font-weight:300;font-size:19px;line-height:1.55;color:var(--artiq-muted-light)}
.artiq-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.artiq-hero__trust{display:flex;align-items:center;gap:36px;margin-top:22px;padding-top:26px;border-top:1px solid var(--artiq-line-dark);width:100%}
.artiq-hero__rating{display:flex;align-items:center;gap:16px}
.artiq-hero__score{font-weight:600;font-size:52px;line-height:1;color:#fff;letter-spacing:-.01em}
.artiq-hero__score .odometer{font-family:var(--font_kanit)!important;font-weight:600}
.artiq-hero__rating-meta{display:flex;flex-direction:column;gap:6px}
.artiq-stars{display:flex;gap:3px}
.artiq-stars svg{width:15px;height:15px;fill:var(--artiq-green)}
.artiq-hero__rating-label{font-weight:400;font-size:14px;color:#fff;line-height:1.2}
.artiq-hero__rating-label small{display:block;font-weight:300;font-size:12px;color:var(--artiq-muted)}
.artiq-hero__badges{display:flex;align-items:center;gap:22px;padding-left:36px;border-left:1px solid var(--artiq-line-dark)}
.artiq-hero__badges img{height:50px;width:auto;opacity:.95}
.hero-section-5__thumb.artiq-hero__media{position:relative!important;right:auto!important;bottom:auto!important;left:auto!important;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:20px;height:100%;padding:0!important}
.artiq-hero__figure{margin:0;width:100%;display:flex;justify-content:flex-end}
.artiq-hero__media .zoom-thumb{width:100%;max-width:560px!important;height:400px!important;border-radius:20px!important;object-fit:cover;margin:0!important;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.artiq-hero__scroll{position:static!important;transform:none!important;display:inline-flex;align-items:center;gap:10px;font-size:12px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;color:var(--artiq-muted)!important;text-decoration:none}
.artiq-hero__scroll svg{width:16px;height:16px;fill:none;stroke:var(--artiq-green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:artiqBounce 2.2s ease-in-out infinite}
@keyframes artiqBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.artiq-zoom-ph{width:100%;max-width:560px;height:400px}
@media (max-width:1399px){.artiq-hero__title{font-size:60px}.artiq-hero__media .zoom-thumb,.artiq-zoom-ph{height:340px!important}}
@media (max-width:1199px){.hero-section-5__wrap.artiq-hero__wrap{grid-template-columns:1fr;min-height:0;padding:120px 0 60px}.artiq-hero__badges{padding-left:0;border-left:0}.artiq-hero__trust{flex-wrap:wrap}.artiq-hero__media{align-items:flex-start}}

/* ---------- Kundenlogos (Leiste) ---------- */
.brand-slide-5__area{background:var(--artiq-paper)!important}
.brand-section-5__item{display:flex;align-items:center;justify-content:center;height:64px}
.brand-section-5__item img.artiq-logo{height:38px;width:auto;max-width:150px;object-fit:contain;filter:grayscale(1) brightness(.35) contrast(1.05);opacity:.7;transition:filter .4s,opacity .4s}
.brand-section-5__item:hover img.artiq-logo{filter:none;opacity:1}

/* ---------- Footer ---------- */
.footer-area6.artiq-footer{background:var(--artiq-dark)!important;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.artiq-footer::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:60%;background:radial-gradient(60% 60% at 50% 100%,rgba(162,193,75,.10),transparent 70%);pointer-events:none}
.artiq-footer__inner{display:flex;flex-direction:column;flex:1;position:relative}
.artiq-footer__cta{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:26px;padding:150px 0 110px}
.artiq-footer__claim{margin:0;max-width:1000px;font-weight:600;font-size:64px;line-height:1;text-transform:uppercase;color:#fff;letter-spacing:.004em}
.artiq-footer__claim i{display:block;font-weight:200;font-style:italic;color:var(--artiq-green);margin-top:8px}
.artiq-footer__cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.artiq-footer__main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;padding:64px 0 56px;border-top:1px solid var(--artiq-line-dark)}
.artiq-footer__logo{height:34px;width:auto;display:block;margin-bottom:22px}
.artiq-footer__brand p{margin:0;max-width:380px;font-weight:300;font-size:15px;line-height:1.6;color:var(--artiq-muted-light)}
.artiq-footer__trust{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.artiq-footer__trust img{height:36px;width:auto;filter:saturate(.75);opacity:.85;transition:opacity .3s,filter .3s}
.artiq-footer__trust img:hover{opacity:1;filter:none}
.artiq-footer__partner{display:inline-flex;align-items:center;height:36px;font-size:13px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,.72);white-space:nowrap}
.artiq-footer__col h3{margin:0 0 20px;font-family:var(--font_kanit);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--artiq-green)}
.artiq-footer__col a{display:block;padding:6px 0;font-weight:300;font-size:16px;color:#e8e8e3;transition:color .25s,transform .25s}
.artiq-footer__col a:hover{color:var(--artiq-green);transform:translateX(3px)}
.artiq-footer__contact address{font-style:normal;font-weight:300;font-size:16px;line-height:1.6;color:#e8e8e3;margin:0 0 14px}
.artiq-footer__social{display:flex;gap:10px;margin-top:20px}
.artiq-footer__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#f2f2ee;transition:all .3s}
.artiq-footer__social a:hover{background:var(--artiq-green);border-color:var(--artiq-green);color:var(--artiq-dark);transform:none}
.artiq-footer__social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.artiq-footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:22px 0 26px;border-top:1px solid var(--artiq-line-dark);font-weight:300;font-size:13px;color:var(--artiq-muted)}
.artiq-footer__bottom nav{display:flex;gap:22px}
.artiq-footer__bottom nav a{color:var(--artiq-muted);transition:color .25s}
.artiq-footer__bottom nav a:hover{color:#fff}
@media (max-width:1199px){.artiq-footer__main{grid-template-columns:1fr 1fr}.artiq-footer__claim{font-size:44px}}
@media (max-width:767px){.artiq-footer__main{grid-template-columns:1fr}.artiq-footer__claim{font-size:34px}}

/* =====================================================================
   Runde 3 (12.09.2026): Chris-Feedback
   ===================================================================== */
@font-face{font-family:"Kanit";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/kanit/Kanit-800-normal-latin.woff2") format("woff2")}
@font-face{font-family:"Kanit";font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/kanit/Kanit-900-normal-latin.woff2") format("woff2")}
/* Header: vollbreit, ohne Rundung, direkt auf dem Hero; Logo links, Menü mittig, Socials rechts */
.artiq-header{padding:0!important}
.artiq-header.is-scrolled{padding-top:0!important}
.artiq-header__bar{max-width:none;height:88px;border-radius:0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding:0 48px;grid-template-columns:1fr auto 1fr}
.artiq-header.is-scrolled .artiq-header__bar{height:70px;background:rgba(6,6,6,.86);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 10px 40px rgba(0,0,0,.35)}
.artiq-header__logo img{height:30px}
.artiq-header__nav>ul{gap:2px}
.artiq-header__nav>ul>li>a{padding:12px 15px;font-size:15px}
.artiq-header__social{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.artiq-header__social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#f2f2ee;transition:all .3s}
.artiq-header__social a:hover{background:var(--artiq-green);border-color:var(--artiq-green);color:var(--artiq-dark)}
.artiq-header__social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:1199px){.artiq-header__social a{display:none}.artiq-header__bar{padding:0 20px;height:72px}}
/* Hero: Kicker im Angebots-Stil (100 italic, grün), H1 bold und groß, darf in die Bildspalte ragen */
.artiq-hero__kicker{display:block;font-family:var(--font_kanit);font-weight:100;font-style:italic;text-transform:uppercase;letter-spacing:.04em;font-size:28px;line-height:1.1;color:var(--artiq-green)}
.artiq-hero__title{font-size:96px!important;line-height:.95!important;max-width:1180px!important;position:relative;z-index:3}
.artiq-hero__title i{display:inline;font-style:normal;font-weight:600;color:#fff;margin:0}
.hero-section-5__wrap.artiq-hero__wrap{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)!important;gap:32px;overflow:visible}
.artiq-hero__content{max-width:none;gap:24px}
.hero-section-5__thumb.artiq-hero__media{align-self:end}
.artiq-hero__media .zoom-thumb{max-width:520px!important;height:380px!important}
.artiq-zoom-ph{max-width:520px;height:380px}
@media (max-width:1399px){.artiq-hero__title{font-size:74px!important}}
/* About 6: 11 in Kanit Black, Kicker kräftig (Angebots-Positionslabel), Gesichter statt Emoji, Zielicon im ARTiQ-Stil */
.about-area6__number-title{font-weight:900!important;font-size:320px!important;letter-spacing:-.02em}
.about-area6__content-subtitle{font-weight:500!important;font-style:normal!important;font-size:14px!important;letter-spacing:.14em!important;color:var(--artiq-green-text,#5f7420)!important;margin-bottom:12px!important}
.artiq-avatars{display:flex;align-items:center}
.artiq-avatars img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-right:-14px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.artiq-avatars span{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 16px 0 28px;border-radius:999px;background:var(--artiq-dark);color:#fff;font-weight:500;font-size:14px;letter-spacing:.04em}
.artiq-target{width:150px;height:150px;fill:none;stroke:var(--artiq-green);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.about-area6__content-image-shape{top:-4%!important}
/* Projekte: 5 quadratische Boxen, passend in den Viewport */
.artiq-hscroll .swiper-slide{width:min(520px,54vh)}
.artiq-hscroll .project-section-3__thumb{height:auto;aspect-ratio:1/1}
.artiq-hscroll .project-section-3__thumb img{height:100%}
.project-section-3__area{padding:80px 0!important}
.project-section-3__top{margin-bottom:34px!important}
.project-section-3__top .section-heading__wrap_3 .section__title{font-size:36px!important;margin-top:16px!important;margin-bottom:24px!important}
.project-section-3__pagination{margin-top:36px!important}
/* Ziele: mehr Schwarz unter den Karten */
@media (min-width:1400px){.cyber-services7{padding:150px 0 260px!important}}
/* Zahlen: keine Bild-Icons, dünne Divider */
.achievement-area6-wrapper{gap:0!important;padding:56px 60px 60px!important}
.achievement-area6__items{flex:1;padding:0 40px;border-left:1px solid var(--artiq-line-dark)}
.achievement-area6__items:first-child{border-left:0;padding-left:0}
.achievement-area6__items:last-child{padding-right:0}
.achievement-area6__items-subtitle{margin-bottom:0!important}
.achievement-area6__items-thumb{display:none}
/* "300+" und "+75": das Pluszeichen steht neben dem Odometer, damit der Zaehler zaehlbar bleibt */
.achievement-area6__items-year .artiq-zahl-zeichen{color:inherit;font:inherit;line-height:inherit}
/* Zitat: ein einzelnes Zitat, keine Pfeile */
.testimonial-5__swiper-button-next,.testimonial-5__swiper-button-prev{display:none!important}
.testimonial-5__desc{font-size:40px!important;line-height:1.28!important;max-width:1100px;margin-left:auto;margin-right:auto}
.testimonial-5__thumb img{filter:grayscale(1);border-radius:50%}  /* 08.10.2026: Chris-Portraet rund wie der Template-Bildplatz */
/* Logo-Leiste: exakt die Template-Boxen (278x210, #f1f1f1, 10px), Logos grau */
.brand-slide-5__area{background:#fff!important}
.brand-section-5__item{height:210px!important;width:278px!important;background:#f1f1f1!important;border-radius:10px!important}
.brand-section-5__item img.artiq-logo{height:auto;max-height:64px;max-width:170px;filter:grayscale(1) brightness(.3) contrast(1.05);opacity:.75}
/* Footer: 5 Spalten + Marke mit Kontakt */
.artiq-footer__main{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
.artiq-footer__brand p{max-width:420px}
.artiq-footer__brand address{font-style:normal;font-weight:300;font-size:14px;line-height:1.7;color:var(--artiq-muted-light);margin:18px 0 0}
.artiq-footer__brand address a{color:#e8e8e3}
.artiq-footer__brand address a:hover{color:var(--artiq-green)}
.artiq-footer__col .artiq-footer__social{margin-top:22px}
@media (max-width:1199px){.artiq-footer__main{grid-template-columns:1fr 1fr 1fr}.artiq-footer__brand{grid-column:1 / -1}}
@media (max-width:767px){.artiq-footer__main{grid-template-columns:1fr}}
/* Hero-Feinschliff: Kicker einzeilig, H1 ragt in die Bildspalte (feste Breite), passt in 100vh */
.artiq-hero__kicker{font-size:24px;white-space:nowrap}
.artiq-hero__title{width:1180px;max-width:none!important;font-size:92px!important}
.artiq-hero__content{gap:22px}
.hero-section-5__wrap.artiq-hero__wrap{padding:124px 0 48px}
.artiq-hero__trust{margin-top:14px;padding-top:22px}
@media (max-width:1599px){.artiq-hero__title{width:1080px;font-size:84px!important}}
@media (max-width:1399px){.artiq-hero__title{width:auto;font-size:68px!important}.artiq-hero__kicker{white-space:normal;font-size:20px}}
/* H1 liegt bewusst über dem Hero-Bild (Überlapp in die Mitte) */
.hero-section-5__thumb.artiq-hero__media,.artiq-hero__media .zoom-thumb,.hero-section-5__wrapper .zoom-thumb{z-index:1!important}
.artiq-hero__content{position:relative;z-index:3}

/* Runde 4 (12.09.2026) */
.artiq-hscroll .swiper-wrapper{transition:none!important;transform:translate3d(0,0,0)}
.artiq-hscroll .swiper-slide{transition:none!important}
/* Hero: Trust-Zeile breit gezogen, Awards größer */
.artiq-hero__trust{display:grid;grid-template-columns:auto 1fr;gap:0;align-items:center;width:100%}
.artiq-hero__rating{padding-right:44px}
.artiq-hero__badges{display:flex;align-items:center;justify-content:space-around;gap:32px;padding-left:44px;border-left:1px solid var(--artiq-line-dark);min-height:72px}
.artiq-hero__badges img{height:68px;width:auto;opacity:.95}
.artiq-hero__score{font-size:56px}
/* Footer: Siegel + Socials in einer Zeile, Abstand zur Navi-Zeile */
.artiq-footer__meta{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:64px;padding-top:36px;border-top:1px solid var(--artiq-line-dark)}
.artiq-footer__meta .artiq-footer__trust{margin-top:0}
.artiq-footer__meta .artiq-footer__social{margin-top:0}
.artiq-footer__main{padding-bottom:0}

/* Runde 5 (12.09.2026) */
.loader-wrap .loader-wrap-heading .load-text{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600!important;font-size:64px!important;letter-spacing:.01em;text-align:center}
.artiq-load__line{display:block;line-height:1}
.artiq-load__line--2{font-weight:200;font-style:italic;color:#e8e8e3}
.artiq-load__line--2 b{font-weight:600;font-style:normal;color:var(--artiq-green)}
.artiq-hero__badges img{height:80px}
.artiq-hero__score{font-size:62px}
.artiq-stars svg{width:17px;height:17px}
.artiq-hero__rating-label{font-size:15px}
.artiq-line2{display:block;font-weight:200;font-style:italic;color:var(--artiq-green);margin-top:8px}
.cyber-services7 .section-title{font-size:48px!important;line-height:1.05!important}
.brand-slide-5__area .container{max-width:none!important;padding:0!important;width:100%!important}
.brand-section-5__wrap{margin:0!important}
.about-us-5__subtitle br{display:block}
.artiq-footer__meta{margin-top:56px;padding:40px 0}
.artiq-footer__bottom{padding:32px 0 40px}
.loader-wrap .loader-wrap-heading{position:relative;z-index:20}
.loader-wrap .loader-wrap-heading .load-text{color:#fff!important;position:relative;z-index:20}
.artiq-load__line--2{color:#e8e8e3!important}
.artiq-line2{font-size:.66em;line-height:1.1;margin-top:10px}
.artiq-hero__badges{gap:28px}
.artiq-hero__badges img{height:72px}
.artiq-hero__trust{max-width:calc(100% - 110px);position:relative;z-index:4}
.artiq-hero__badges{gap:22px;padding-left:34px;justify-content:flex-start}
.artiq-hero__badges img{height:64px}
.artiq-hero__rating{padding-right:34px}
.artiq-hero__trust{max-width:calc(100% - 160px)}
.artiq-hero__badges{gap:20px;padding-left:30px}
.artiq-hero__badges img{height:60px}
.artiq-hero__badges{gap:40px}
.artiq-hero__badges{gap:44px}
.artiq-hero__badges img{height:58px;width:auto}
.artiq-footer__trust img{height:34px}

/* =====================================================================
   Mobile-/Tablet-Pass (12.09.2026): alles unter 1200px. Regeln stehen
   bewusst NACH dem Desktop-Layer, damit sie dessen !important übersteuern.
   Desktop (>=1200px) bleibt pixelidentisch.
   ===================================================================== */

/* ---------- Fullscreen-Menü (Komponente, alle Breiten definiert, nur <1200 sichtbar) ---------- */
.artiq-menu{position:fixed;inset:0;z-index:990;visibility:hidden;pointer-events:none;color:#fff;overflow:hidden}
.artiq-menu.is-open{visibility:visible;pointer-events:auto}
.artiq-menu__bg{position:absolute;inset:0;background:#060606;background-image:radial-gradient(70% 50% at 100% 100%,rgba(162,193,75,.16),transparent 70%),radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.04),transparent 70%);clip-path:circle(0px at calc(100% - 44px) 34px)}
.artiq-menu__mark{position:absolute;right:-.06em;bottom:-.12em;font-family:var(--font_kanit);font-weight:100;font-style:italic;font-size:min(44vw,300px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(162,193,75,.32);letter-spacing:-.02em;pointer-events:none;user-select:none;opacity:0}
.artiq-menu__inner{position:relative;height:100%;display:flex;flex-direction:column;padding:92px 24px 28px;padding-bottom:max(28px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.artiq-menu__nav{flex:1 0 auto}
.artiq-menu__nav>ul{list-style:none;margin:0;padding:0}
.artiq-menu__item{border-bottom:1px solid rgba(255,255,255,.09)}
.artiq-menu__link{display:flex;align-items:baseline;gap:14px;width:100%;margin:0;padding:17px 0;border:0;background:none;color:#fff;font-family:var(--font_kanit);font-weight:600;font-size:clamp(28px,7.4vw,40px);line-height:1;text-transform:uppercase;letter-spacing:.004em;text-align:left;text-decoration:none;cursor:pointer;transition:color .25s}
.artiq-menu__link:hover,.artiq-menu__link:focus-visible{color:var(--artiq-green)}
.artiq-menu__link i{font-style:italic;font-weight:100;font-size:14px;letter-spacing:.08em;color:var(--artiq-green);min-width:26px}
.artiq-menu__link b{margin-left:auto;align-self:center;position:relative;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.22);flex:0 0 auto;transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s}
.artiq-menu__link b::before,.artiq-menu__link b::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.artiq-menu__link b::after{transform:translate(-50%,-50%) rotate(90deg)}
.artiq-menu__item.is-expanded .artiq-menu__link b{transform:rotate(45deg);border-color:var(--artiq-green)}
.artiq-menu__sub{list-style:none;margin:0;padding:0 0 0 40px;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.artiq-menu__item.is-expanded .artiq-menu__sub{max-height:420px}
.artiq-menu__sub a{display:flex;flex-direction:column;gap:2px;padding:10px 0;text-decoration:none}
.artiq-menu__sub li:last-child a{padding-bottom:22px}
.artiq-menu__sub a strong{font-weight:500;font-size:18px;color:#fff;transition:color .25s}
.artiq-menu__sub a span{font-weight:300;font-size:13px;color:var(--artiq-muted)}
.artiq-menu__sub a:hover strong{color:var(--artiq-green)}
.artiq-menu__foot{display:flex;flex-direction:column;gap:20px;padding-top:32px}
.artiq-menu__foot .artiq-btn{width:100%}
.artiq-menu__contact{display:flex;flex-direction:column;gap:6px;font-weight:300;font-size:15px;line-height:1.4;color:var(--artiq-muted-light)}
.artiq-menu__contact a{color:#e8e8e3;text-decoration:none}
.artiq-menu__contact a:hover{color:var(--artiq-green)}
.artiq-menu__social{display:flex;gap:10px}
.artiq-menu__social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#f2f2ee;transition:all .3s}
.artiq-menu__social a:hover{background:var(--artiq-green);border-color:var(--artiq-green);color:var(--artiq-dark)}
.artiq-menu__social svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.artiq-lock,html.artiq-lock body{overflow:hidden!important;height:100%}
@media (min-width:1200px){.artiq-menu{display:none}}
/* Header im Menü-Zustand: Leiste transparent, Burger wird zum X, Ausblend-Zustand aufgehoben */
.artiq-header.menu-open .artiq-header__bar{background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.artiq-header__burger{width:48px;height:48px;gap:7px;margin-right:-8px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.artiq-header__burger span{width:24px;transition:transform .45s cubic-bezier(.2,.7,.2,1),width .3s,background .3s}
.artiq-header.menu-open .artiq-header__burger span:first-child{transform:translateY(4.25px) rotate(45deg)}
.artiq-header.menu-open .artiq-header__burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
/* Header: Richtungslogik (verschwindet beim Runterscrollen, kommt beim Hochscrollen) */
.artiq-header{transition:transform .5s cubic-bezier(.2,.7,.2,1),padding .4s cubic-bezier(.2,.7,.2,1)}
.artiq-header.is-hidden{transform:translateY(-100%)}
.artiq-header.menu-open{transform:none!important}
/* Scroll-nach-oben-Button: kein Exclusion-Blend (wurde violett), immer Grün auf Dunkel */
.progress-wrap.active-progress{mix-blend-mode:normal!important;background:var(--artiq-coal)!important;border:1px solid rgba(255,255,255,.12)}
.progress-wrap::after{color:var(--artiq-green)!important}
.progress-wrap svg.progress-circle path{fill:transparent!important;stroke:var(--artiq-green)!important;stroke-width:4}
.progress-wrap svg path{fill:transparent}

/* ---------- Tablet + Mobile (<1200px) ---------- */
@media (max-width:1199px){
  /* Header: Logo links, Burger rechts, kompakter */
  .artiq-header__bar{grid-template-columns:1fr auto!important;padding:0 16px 0 20px!important;height:68px!important;gap:12px}
  .artiq-header.is-scrolled .artiq-header__bar{height:60px!important}
  /* Mobil-Scrollen (24.09.2026): kein backdrop-filter auf dem fixierten Header - der Blur muss auf dem Handy
     bei jedem Bild neu gerechnet werden und ist die teuerste Operation der ganzen Seite. Stattdessen deckende
     Flaeche in derselben Anmutung. Ein-/Ausblenden nur ueber transform, keine Farb- und Schattenuebergaenge.
     Header-Zustaende (Chris' iPhone-Test 28.09.2026, Logik in artiq.js header()):
       is-hidden   Leiste weg (Runterscrollen)
       is-compact  nur der runde Burger-Knopf oben rechts, mit Schatten fuer dunkle Sektionen
       (ohne)      volle Leiste; die dunkle Flaeche ist ein ::before, das per opacity+transform
                   einblendet - kein Farbuebergang, keine backdrop-Berechnung. */
  .artiq-header__bar,.artiq-header.is-scrolled .artiq-header__bar{position:relative;z-index:0;background:transparent!important;border-bottom-color:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:height .3s ease!important;box-shadow:none!important}
  .artiq-header__bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,6,6,.96);border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-8px);transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
  .artiq-header.is-scrolled:not(.menu-open):not(.is-compact) .artiq-header__bar::before{opacity:1;transform:none}
  .artiq-header{transition:transform .32s cubic-bezier(.2,.7,.2,1),padding .3s!important;will-change:transform}
  .artiq-header__logo{transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
  .artiq-header__burger{transition:opacity .22s ease,background-color .3s ease,box-shadow .3s ease}
  .artiq-header.is-hidden .artiq-header__burger{opacity:0}
  /* compact: sofort wieder im Bild (kein Herunterrutschen der leeren Leiste), Knopf blendet ein */
  .artiq-header.is-compact{transform:none;transition:none!important}
  .artiq-header.is-compact .artiq-header__bar{pointer-events:none}
  .artiq-header.is-compact .artiq-header__logo{opacity:0;transform:translateY(-8px);visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility 0s .2s}
  .artiq-header.is-compact .artiq-header__burger{pointer-events:auto;background:rgba(6,6,6,.92);box-shadow:0 4px 16px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.14)}
  .artiq-header__logo img{height:26px!important}
  .artiq-header.is-scrolled .artiq-header__logo img{height:23px!important}
  .artiq-header__social{justify-self:end}
  /* Hero: einspaltig, Bild als Abschluss der Sektion */
  .hero-section-5__wrap.artiq-hero__wrap{grid-template-columns:1fr!important;gap:40px;min-height:0;padding:112px 0 48px}
  .artiq-hero__content{gap:20px}
  .artiq-hero__kicker{white-space:normal;font-size:18px;line-height:1.3}
  .artiq-hero__title{width:auto!important;max-width:none!important;font-size:clamp(44px,8.4vw,72px)!important;line-height:.97!important}
  .artiq-hero__sub{font-size:18px;max-width:600px}
  .artiq-hero__trust{max-width:100%;display:flex;flex-wrap:wrap;gap:24px 36px;margin-top:10px}
  .artiq-hero__rating{padding-right:0}
  .artiq-hero__badges{padding-left:0;border-left:0;min-height:0;gap:22px;flex-wrap:wrap;justify-content:flex-start}
  .artiq-hero__badges img{height:46px}
  .artiq-hero__score{font-size:52px}
  .hero-section-5__thumb.artiq-hero__media{align-self:auto;align-items:stretch;height:auto;margin:0}
  .artiq-hero__figure{justify-content:stretch}
  .artiq-hero__media .zoom-thumb{max-width:none!important;width:100%;height:auto!important;aspect-ratio:16/10;border-radius:20px!important;box-shadow:none}
  /* Hero-Zoom (Chris' iPhone-Test 28.09.2026): der Zoom laeuft nur ab 1200 px (artiq.js heroZoom, gsap.matchMedia);
     hier bleiben trotzdem will-change (vier Layout-Eigenschaften) und Trexas transition:all am Bild - beides raus,
     das Bild ist unter 1200 px statisch. */
  .hero-section-5__wrapper .zoom-thumb,.artiq-hero__media .zoom-thumb{will-change:auto!important;transition:none!important;transform:none!important}
  .artiq-hero__scroll{display:none!important}
  /* Projekte: nativer Swipe (Scroll-Snap), Fortschrittsbalken als Daumen */
  .project-section-3__area{min-height:0;display:block;padding:72px 0 64px!important}
  .project-section-3__top .section-heading__wrap_3 .section__title{font-size:32px!important;max-width:760px!important}
  /* Mobil-Scrollen (24.09.2026, mit Wischgesten gemessen): Ein senkrechter Wisch, der auf den Projektkarten startete,
     kam NICHT bei der Seite an (Delta 0), der zweite dann schon. Ursache: der Slider hatte rechnerisch overflow-y auto
     (die Desktop-Regel ".artiq-hscroll{overflow:visible!important}" weiter oben gewinnt; visible wird neben overflow-x auto
     zu auto - Vera 24.09.) und einen Pixel senkrechten Ueberlauf (scrollHeight 335, clientHeight 334).
     Chrome und iOS binden die Geste dann an den Slider, der schluckt den Wisch, bis er am Anschlag steht.
     Deshalb overflow-y hidden MIT !important (nachgemessen: Delta 502 statt 0), Snap nur noch proximity.
     touch-action mit pinch-zoom, sonst verliert die Bildflaeche den Zwei-Finger-Zoom (Vera A2). */
  .artiq-hscroll{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;touch-action:pan-x pan-y pinch-zoom;scrollbar-width:none;padding:0 15px;scroll-padding:0 15px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .artiq-hscroll::-webkit-scrollbar{display:none}
  .artiq-hscroll .swiper-wrapper{gap:16px;transform:none!important;width:max-content;box-sizing:border-box;padding-right:15px}
  .artiq-hscroll .swiper-slide{width:min(62vw,440px);scroll-snap-align:start}
  .artiq-hscroll .project-section-3__thumb{border-radius:16px!important}
  .artiq-progress{max-width:320px}
  .artiq-progress i{transition:none}
  /* Ziele */
  .cyber-services7 .section-title{font-size:36px!important}
  .cyber-services7__subtitle{font-size:17px!important}
  .cyber-services7__card{padding:44px 30px!important}
  /* About 6 */
  .about-area6__number-title{font-size:200px!important}
  .about-area6__content-title{font-size:38px!important}
  /* Über ARTiQ / Säulen / Zitat */
  .about-section-3__dec{font-size:22px!important}
  .testimonial-5__desc{font-size:30px!important;line-height:1.3!important}
  /* Footer: CTA-Block ohne Vollhöhe, kompaktere Abstände */
  .footer-area6.artiq-footer{min-height:0}
  .artiq-footer__cta{padding:120px 0 80px}
  .artiq-footer__claim{font-size:clamp(34px,6vw,52px)}
  .artiq-footer__main{gap:44px 32px;padding-top:56px}
  .artiq-footer__meta{margin-top:48px}
}

/* ---------- Mobile (<768px) ---------- */
@media (max-width:767px){
  :root{--artiq-gutter:15px}
  .artiq-header__bar{height:64px!important;padding:0 12px 0 16px!important}
  .artiq-header.is-scrolled .artiq-header__bar{height:58px!important}
  .artiq-header__logo img{height:24px!important}
  .artiq-header.is-scrolled .artiq-header__logo img{height:22px!important}
  .artiq-menu__inner{padding:88px 20px 24px}
  /* Hero (Chris' iPhone-Test 28.09.2026): Kicker, H1, Intro und Knoepfe so weit verkleinert, dass die
     Trust-Zeile auf 390x844 ohne Scrollen sichtbar ist. Reihenfolge unveraendert. Trust-Zeile: Google-G,
     5,0, Sterne und Label in EINER Zeile, die beiden Awards darunter (passen nicht mehr daneben). */
  .hero-section-5__wrap.artiq-hero__wrap{gap:24px;padding:84px 0 32px}
  .artiq-hero__content{gap:12px}
  .artiq-hero__kicker{font-size:12px;letter-spacing:.07em;line-height:1.3}
  .artiq-hero__title{font-size:clamp(28px,8.6vw,38px)!important;line-height:1!important;margin-top:0}
  .artiq-hero__sub{font-size:15px;line-height:1.45}
  .artiq-hero__cta{width:100%;flex-direction:column;gap:8px;margin-top:2px}
  .artiq-hero__cta .artiq-btn{width:100%;padding:14px 22px;font-size:14px}
  .artiq-hero__trust{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:0;padding-top:14px}
  .artiq-hero__rating{gap:10px;flex-wrap:nowrap}
  .artiq-hero__google{width:24px;height:24px;flex:0 0 auto}
  .artiq-hero__google svg{width:24px;height:24px}
  .artiq-hero__score{font-size:30px}
  .artiq-hero__rating-meta{gap:3px}
  .artiq-stars svg{width:11px;height:11px}
  .artiq-hero__rating-label{font-size:12px}
  .artiq-hero__rating-label small{font-size:11px}
  .artiq-hero__badges{gap:10px 14px;flex-wrap:nowrap}
  .artiq-hero__badges img{height:26px}
  .artiq-hero__media .zoom-thumb{aspect-ratio:4/3;border-radius:16px!important}
  /* About 6 */
  .about-area6.section-spacing{padding-top:56px!important;padding-bottom:56px!important}
  .about-area6__number{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
  .about-area6__number-title{font-size:112px!important;line-height:.8!important;margin:0}
  .about-area6__number-button{position:static!important;transform:rotate(-8deg)!important;font-size:12px!important;padding:11px 16px!important;display:inline-flex!important}
  .about-area6__content-thumb{margin-bottom:22px!important}
  .artiq-avatars img{width:44px;height:44px;border-width:2px;margin-right:-12px}
  .artiq-avatars span{height:44px;font-size:12px;padding:0 14px 0 24px}
  .about-area6__content-subtitle{font-size:12px!important}
  .about-area6__content-title{font-size:28px!important;line-height:1.06!important}
  .artiq-start-absatz{font-size:17px!important;line-height:1.55!important}  /* SEO-ToDo 3: wie .about-section-3__text mobil */
  .about-area6__content-image-shape{display:none}
  .about-area6__wrapper{margin-bottom:0!important}
  .about-area6__thumb img{border-radius:16px;aspect-ratio:4/3;object-fit:cover;width:100%}
  /* Projekte */
  .project-section-3__area{padding:60px 0 56px!important}
  .project-section-3__top{margin-bottom:28px!important}
  .project-section-3__top .section-heading__wrap_3 .section__title{font-size:26px!important;line-height:1.05!important;margin-top:14px!important;margin-bottom:20px!important}
  .section__subtitle{font-size:11px!important;padding:10px 16px!important}
  .tr-btn{font-size:12px!important;padding:16px 24px!important}
  .artiq-hscroll .swiper-slide{width:min(78vw,340px)}
  .artiq-hscroll .swiper-wrapper{gap:12px}
  .project-section-3__pagination{margin-top:28px!important}
  .artiq-progress{max-width:200px}
  /* Ziele */
  .cyber-services7{padding:64px 0 96px!important}
  .cyber-services7 .section-title{font-size:28px!important;line-height:1.06!important;margin-bottom:36px!important}
  .cyber-services7__subtitle{font-size:14px!important;letter-spacing:.08em!important}
  .cyber-services7__card{padding:34px 26px!important;border-radius:16px!important}
  .cyber-services7__card-title{font-size:22px!important}
  .cyber-services7__card-text{font-size:15px!important;line-height:1.55!important}
  .cyber-services7__cards{row-gap:14px!important}
  /* Partnerstimmen */
  .section-top6__title{font-size:26px!important;line-height:1.08!important;margin-bottom:36px!important}
  .section-top6__subtitle{font-size:14px!important}
  .testimonial-area6__items-info{margin-bottom:40px!important}
  .testimonial-area6__items-info-content-point{font-size:30px!important}
  .testimonial-area6__items-info-content-subtitle{font-size:15px!important}
  .testimonial-area6__items-image-subtitle{font-family:var(--font_kanit)!important;font-weight:500!important;font-size:15px!important}
  .testimonial-area6__card-content-subtitle{font-size:18px!important}
  .testimonial-area6__card-content-items-subtitle{font-size:16px!important}
  /* Zahlen: 2x2 mit Hairlines statt Treppe */
  .achievement-area6-wrapper{display:grid!important;grid-template-columns:1fr 1fr;gap:0!important;padding:14px 24px 18px!important;border-radius:16px!important}
  .achievement-area6__items{padding:22px 0!important;border-left:0!important}
  .achievement-area6__items:nth-child(even){border-left:1px solid var(--artiq-line-dark)!important;padding-left:22px!important}
  .achievement-area6__items:nth-child(n+3){border-top:1px solid var(--artiq-line-dark)}
  /* Seit 28.09.2026 wieder vier Kacheln (Chris): sauberes 2x2, die Sonderregel fuer drei Kacheln ist raus */
  .achievement-area6__items-year{font-size:40px!important;margin-bottom:8px!important}
  .achievement-area6__items-title{font-size:14px!important;line-height:1.2!important;margin-bottom:6px!important}
  .achievement-area6__items-subtitle{font-size:12px!important;line-height:1.4!important}
  /* Zitat */
  .testimonial-5__quote{margin-bottom:22px!important}
  .testimonial-5__quote svg{width:44px;height:auto}
  .testimonial-5__desc{font-size:22px!important;line-height:1.36!important;margin-bottom:30px!important}
  .testimonial-5__thumb img{width:56px;height:56px}
  /* Logo-Leiste: Boxen füllen den Slide, Logos klein und lesbar */
  .brand-slide-5__area{padding:24px 0 32px!important}
  .brand-section-5__item{width:100%!important;height:96px!important;border-radius:8px!important}
  .brand-section-5__item img.artiq-logo{max-height:36px;max-width:104px}
  /* Über ARTiQ */
  .about-section-3__area .section__title{font-size:28px!important;line-height:1.06!important}
  .about-section-3__text{font-size:17px!important;line-height:1.55!important}
  .about-section-3__card{border-radius:16px!important}
  .about-section-3__dec{font-size:19px!important;line-height:1.4!important}
  .about-section-3__title{font-size:12px!important}
  .about-section-3__thumb,.about-section-3__thumb img{border-radius:16px!important}
  /* Zwei Säulen: linksbündige Liste mit Hairlines */
  .about-us-5__title{font-size:44px!important;line-height:1!important;margin-bottom:22px!important}
  .about-us-5__subtitle{font-size:19px!important;line-height:1.25!important}
  .about-us-5__wrap{border-top:1px solid var(--artiq-line)!important;margin-bottom:0!important;margin-top:36px;text-align:left}
  .about-us-5__item{border-right:0!important;border-bottom:1px solid var(--artiq-line)!important;padding:26px 0!important;margin-bottom:0!important;display:grid;grid-template-columns:52px 1fr;column-gap:16px;align-items:start}
  .about-us-5__item:last-child{border-bottom:0!important}
  .about-us-5__item>*:first-child{grid-row:1 / span 2}
  .about-us-5__item img,.about-us-5__item svg{width:44px;height:auto;margin:0!important}
  .about-us-5__text{font-size:15px!important;margin:0 0 6px!important}
  .about-us-5__desc{font-size:15px!important;line-height:1.5!important;margin:0!important}
  /* Footer */
  .artiq-footer__cta{padding:100px 0 64px;gap:20px}
  .artiq-footer__claim{font-size:clamp(30px,8.6vw,38px);line-height:1}
  .artiq-footer__cta-row{width:100%;flex-direction:column;gap:10px}
  .artiq-footer__cta-row .artiq-btn{width:100%}
  .artiq-footer__main{grid-template-columns:1fr 1fr;gap:36px 20px;padding-top:44px}
  .artiq-footer__brand{grid-column:1 / -1}
  .artiq-footer__brand p{font-size:15px}
  .artiq-footer__brand address{font-size:14px}
  .artiq-footer__col h3{margin-bottom:14px}
  .artiq-footer__col a{font-size:15px;padding:5px 0}
  .artiq-footer__meta{flex-direction:column;align-items:flex-start;gap:24px;margin-top:40px;padding:32px 0}
  .artiq-footer__trust{gap:12px}
  .artiq-footer__trust img{height:28px}
  .artiq-footer__bottom{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0 96px}
  .artiq-footer__bottom nav{gap:16px;flex-wrap:wrap}
  /* Global */
  .progress-wrap{right:16px;bottom:16px}
  .section-spacing{padding-top:56px!important;padding-bottom:56px!important}
  .section-spacing-top-120{padding-top:56px!important}
  .artiq-line2{font-size:.72em;margin-top:8px}
}
@media (max-width:389px){
  .artiq-hero__title{font-size:36px!important}
  .artiq-menu__link{font-size:26px}
}
/* Mobile-Pass, Runde 2 (Sichtprüfung) */
.artiq-menu__mark{font-size:min(38vw,260px);bottom:-.22em;right:-.08em;-webkit-text-stroke:1px rgba(162,193,75,.22)}
@media (max-width:1199px){
  .hero-section-5__wrapper.artiq-hero__wrapper{padding-bottom:0!important}
}
@media (max-width:767px){
  .about-area6__content{margin-bottom:32px}
  .cyber-services7{padding:40px 0 88px!important}
  .artiq-footer__brand address br,.artiq-menu__contact br{display:block}
  .artiq-footer__trust img{height:27px}
}
@media (min-width:768px) and (max-width:1199px){
  .artiq-footer__main{grid-template-columns:repeat(3,1fr)}
  .artiq-footer__brand{grid-column:1 / -1}
  .artiq-menu__link{font-size:56px;padding:22px 0}
  .artiq-menu__inner{padding:110px 40px 40px}
  .artiq-menu__foot{flex-direction:row;flex-wrap:wrap;align-items:center;gap:24px 40px}
  .artiq-menu__foot .artiq-btn{width:auto}
}

/* =====================================================================
   Unterseiten (12.09.2026): Hero, Breadcrumb, Text-Bausteine
   ===================================================================== */
.artiq-subhero{background:var(--artiq-dark);color:#fff;background-image:radial-gradient(1100px 600px at 85% 0%,rgba(162,193,75,.12),transparent 60%),linear-gradient(133deg,#111 0%,#0a0a0a 45%,#050505 100%);padding:150px 0 96px;position:relative;overflow:hidden}
.artiq-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:38px;font-weight:300;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--artiq-muted)}
.artiq-breadcrumb a{color:var(--artiq-muted-light);transition:color .25s}
.artiq-breadcrumb a:hover{color:var(--artiq-green)}
.artiq-breadcrumb span[aria-current]{color:var(--artiq-green)}
.artiq-subhero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:56px;align-items:end}
.artiq-subhero__content{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.artiq-subhero__title{margin:0;font-family:var(--font_kanit);font-weight:600;font-size:clamp(44px,5.6vw,84px);line-height:.97;letter-spacing:.004em;text-transform:uppercase;color:#fff;max-width:14ch}
.artiq-subhero__title i{font-style:italic;font-weight:200;color:var(--artiq-green)}
.artiq-subhero__intro{margin:0;max-width:640px;font-weight:300;font-size:19px;line-height:1.55;color:var(--artiq-muted-light)}
.artiq-subhero__aside{border-left:1px solid var(--artiq-line-dark);padding-left:36px}
.artiq-subhero__facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.artiq-subhero__facts li{display:flex;flex-direction:column;gap:3px}
.artiq-subhero__facts strong{font-weight:600;font-size:20px;text-transform:uppercase;letter-spacing:.01em;color:#fff}
.artiq-subhero__facts span{font-weight:300;font-size:14px;color:var(--artiq-muted)}
@media (max-width:1199px){.artiq-subhero{padding:132px 0 72px}.artiq-subhero__grid{grid-template-columns:1fr;gap:36px;align-items:start}.artiq-subhero__aside{border-left:0;padding-left:0;border-top:1px solid var(--artiq-line-dark);padding-top:26px}.artiq-subhero__facts{flex-direction:row;flex-wrap:wrap;gap:20px 40px}}
@media (max-width:767px){.artiq-subhero{padding:104px 0 52px}.artiq-breadcrumb{margin-bottom:26px;font-size:12px}.artiq-subhero__title{font-size:clamp(34px,10.4vw,48px);max-width:none}.artiq-subhero__intro{font-size:17px}.artiq-subhero__content .artiq-hero__cta{width:100%;flex-direction:column}.artiq-subhero__content .artiq-btn{width:100%}.artiq-subhero__facts{flex-direction:column;gap:14px}.artiq-subhero__facts strong{font-size:17px}}

/* =====================================================================
   Preloader: No-JS-fest, reduced-motion-fest, einmal pro Sitzung (12.09.2026)
   Befund Vera: `.loader-wrap` lag mit position:fixed und z-index 2147483647 ueber allem
   und wurde ausschliesslich per JS entfernt. Ohne JavaScript blieb die Seite dauerhaft
   schwarz; mit JavaScript war der erste CTA rund 3 bis 4 Sekunden nicht klickbar.
   Loesung: sichtbar nur, wenn html.js UND data-artiq-loader="on" (Inline-Script im <head>).
   ===================================================================== */
.loader-wrap{display:none}
html.js[data-artiq-loader="on"] .loader-wrap{display:flex}
/* Ohne Loader darf der von GSAP eingeblendete <main>-Tween den Inhalt nicht verstecken */
html[data-artiq-loader="off"] main{opacity:1!important;visibility:visible!important}
/* Mit Loader: Inhalt wird nach 1,3 s freigegeben, das Aufraeumen macht das Template danach */
html.js[data-artiq-loader="on"] .loader-wrap{transition:opacity .55s cubic-bezier(.2,.7,.2,1)}
html.js[data-artiq-loader="on"] .loader-wrap.artiq-loader-done{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .loader-wrap{display:none!important}
  main{opacity:1!important;visibility:visible!important}
  /* Template-Bewegung insgesamt stilllegen: Reveals, Marquee, Hover-Wege, Zaehler-Optik */
  .wow,.animated{animation:none!important;visibility:visible!important;opacity:1!important;transform:none!important}
  .artiq-menu__bg,.artiq-menu__mark,.artiq-menu__item,.artiq-menu__foot{transition:none!important;animation:none!important}
  .artiq-header,.artiq-header__bar,.artiq-header__burger span,.artiq-header__logo img{transition:none!important}
  .artiq-hero__scroll svg{animation:none!important}
  .brand-slide-5__area .swiper-wrapper,.marque-section6 *,[class*="marquee"]{animation:none!important}
  *,*::before,*::after{scroll-behavior:auto!important}
}
/* Noch nicht existierende Ziele werden als Text gefuehrt, nicht als toter Link (Befund Vera, 12.09.2026) */
.artiq-link--offen{cursor:default}
.artiq-footer__col .artiq-link--offen,.artiq-footer__bottom .artiq-link--offen{display:block;padding:6px 0;font-weight:300;font-size:16px;color:#8c8c87}
.artiq-footer__bottom nav .artiq-link--offen{display:inline;padding:0;font-size:13px}
.artiq-header__nav .artiq-link--offen,.artiq-menu .artiq-link--offen{color:#8c8c87}
/* Fokusring im Fullscreen-Menue wiederhergestellt (Befund Vera, WCAG 2.4.7 / 1.4.11) */
.artiq-menu__link:focus-visible,.artiq-menu__sub a:focus-visible,.artiq-menu__social a:focus-visible,
.artiq-menu__contact a:focus-visible,.artiq-header__burger:focus-visible,.artiq-header__nav a:focus-visible{
  outline:2px solid var(--artiq-green)!important;outline-offset:4px;border-radius:6px}

/* Fokus im CI fuer alle Seiten: Textgruen auf hellen Flaechen (5,2:1), Markengruen auf dunklen (9,7:1) */
:root{--artiq-focus:#5f7420}
.artiq-header,.artiq-header__sub,.artiq-menu,.artiq-footer,.hero-section-5,.breadcrumb1,.artiq-inhero,.artiq-l--dark,.choose-us,.service-area4,.connect-area7,.work-section,.expertise-2,.artiq-footer__cta-row,.cyber-services7__card,.project-section-3__area{--artiq-focus:#A2C14B}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--artiq-focus)!important;outline-offset:4px!important;box-shadow:none!important}
.artiq-header__nav>ul>li:focus-within .artiq-header__sub{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .3s}
/* WOW setzt vor dem Einblenden visibility:hidden inline; so bleiben Elemente per Tastatur erreichbar (Vera Runde 6, alle Seiten) */
html.js .wow[style*="visibility: hidden"]{visibility:visible!important;opacity:0}
html.js .wow[style*="visibility: hidden"]:focus-within{opacity:1!important}
/* Projektslider Startseite: "Zum Projekt" erscheint sonst nur bei Hover (scale 0), bei Tastaturfokus mit einblenden (Vera 15.09.2026) */
.project-section-3__item:focus-within .project-section-3__btn{transform:translate(-50%,-50%) scale(1)!important}
/* Links im Fliesstext: Ring naeher am Wort, damit er Nachbarwoerter und die Zeile darueber nicht schneidet */
p a:focus-visible,li a:focus-visible{outline-offset:2px!important}
/* Projektslider bei reduzierter Bewegung am Desktop: kein Pin, sondern horizontal scrollbar mit sichtbarer Leiste (sonst Karten 3 bis 5 abgeschnitten) */
@media (min-width:1200px) and (prefers-reduced-motion: reduce){
  .artiq-hscroll{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--artiq-green) rgba(255,255,255,.12);padding:0 clamp(20px,5.2vw,75px) 18px;scroll-padding:0 clamp(20px,5.2vw,75px);overscroll-behavior-x:contain}
  .artiq-hscroll .swiper-wrapper{transform:none!important;width:max-content;box-sizing:border-box;padding-right:clamp(20px,5.2vw,75px)}
  .artiq-hscroll .swiper-slide{scroll-snap-align:start}
}
/* Touch-Geraete ohne Hover: "Zum Projekt" direkt sichtbar, sonst braucht es zwei Tipps (Staging-Test 15.09.2026) */
@media (hover: none){
  .project-section-3__btn{transform:translate(-50%,-50%) scale(1)!important}
}

/* =====================================================================
   Runde 6 (16.09.2026): Chris-Feedback Startseite, von oben nach unten.
   Steht bewusst am Dateiende, damit die Regeln die Runden 1-5 und den
   Mobile-Pass sauber ueberstimmen (gleiche Spezifitaet, spaeter = gewinnt).
   ===================================================================== */
/* 1 Hero: Google-G vor der Note; Trust-Zeile bis zum Spaltenende, Awards gleichmaessig
   verteilt, letztes Logo schliesst buendig mit dem Ende der Trennlinie ab */
.artiq-hero__google{display:inline-flex;flex:0 0 auto;width:38px;height:38px;margin-right:2px}
.artiq-hero__google svg{width:100%;height:100%;display:block}
.artiq-hero__trust{max-width:100%}
.artiq-hero__badges{flex:1 1 auto;justify-content:space-between;gap:48px;padding-left:44px;padding-right:0;min-width:0}
.artiq-hero__badges img{height:58px;flex:0 0 auto}
@media (max-width:1399px){.artiq-hero__badges{gap:28px;padding-left:32px}.artiq-hero__badges img{height:50px}}
@media (max-width:1199px){.artiq-hero__badges{padding-left:0;justify-content:flex-start;gap:28px}.artiq-hero__badges img{height:46px}}
/* 28.09.2026: Werte folgen dem Mobil-Hero-Block weiter oben (Trust-Zeile einzeilig, Awards darunter) */
@media (max-width:767px){.artiq-hero__google{width:24px;height:24px}.artiq-hero__badges{gap:10px 14px}.artiq-hero__badges img{height:26px}}

/* 2 Zielscheibe (About 6): dezente Bewegung - Ringe atmen versetzt, Pfeil zeichnet sich
   periodisch, das Ganze schwebt leicht. Bei reduzierter Bewegung steht alles still. */
.about-area6__content-image-shape{animation:artiqTargetFloat 6s ease-in-out infinite;will-change:transform}
.artiq-target circle{transform-box:fill-box;transform-origin:center;animation:artiqTargetRing 5s ease-in-out infinite}
.artiq-target circle:nth-child(1){animation-delay:.9s}
.artiq-target circle:nth-child(2){animation-delay:.45s}
.artiq-target circle:nth-child(4){animation:artiqTargetDot 5s ease-in-out infinite}
.artiq-target path{stroke-dasharray:100;stroke-dashoffset:0;animation:artiqTargetArrow 7s ease-in-out infinite}
@keyframes artiqTargetFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes artiqTargetRing{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.06);opacity:1}}
@keyframes artiqTargetDot{0%,100%{transform:scale(1)}50%{transform:scale(1.8)}}
@keyframes artiqTargetArrow{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}38%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}94%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:100;opacity:0}}
@media (prefers-reduced-motion:reduce){.about-area6__content-image-shape,.artiq-target circle,.artiq-target path{animation:none}}

/* 3 Projekte: H2 in der Standardgroesse der Website (48 px wie Ziele), zweizeilig mit kursiver Zeile 2 */
.project-section-3__top .section-heading__wrap_3 .section__title{font-size:48px!important;line-height:1.05!important;max-width:1100px!important}
@media (max-width:1199px){.project-section-3__top .section-heading__wrap_3 .section__title{font-size:36px!important}}
@media (max-width:767px){.project-section-3__top .section-heading__wrap_3 .section__title{font-size:28px!important;line-height:1.06!important}}

/* 4 Ziele: gruener Rahmen nur im Hover (Standardzustand aller Karten gleich) */
.cyber-services7__card{border-color:var(--artiq-line-dark)!important;border-width:1px!important}
.cyber-services7__card:hover{border-color:var(--artiq-green)!important;box-shadow:0 18px 44px rgba(0,0,0,.45)!important}

/* 5 Partnerstimmen: Karte rechts mittig zur linken Spalte, Hausschrift, Logo mittig ueber dem vollbreiten Button */
.testimonial-area6 .row.g-4{align-items:center}
.testimonial-area6__items-image-subtitle{font-family:var(--font_kanit)!important;font-weight:500!important;font-size:18px!important;letter-spacing:.01em}
.testimonial-area6__items-button-items{flex-direction:column;align-items:center;gap:22px!important}
.testimonial-area6__items-button-items-logo{display:flex;justify-content:center}
.testimonial-area6__items-button-items-logo img{width:150px!important;height:auto}
.testimonial-area6__items-button-items-button{width:100%}
.testimonial-area6__items-button-items-button .rr-btn-button3{display:flex;width:100%}

/* 6 Saeulen: Grid nach aussen offen, kein Strich rechts neben Partner Hub */
.about-us-5__item:last-child{border-right:0!important}

/* 7 Footer: Siegel entzerrt; Serverstandort-Siegel als Negativ (weisser Schriftzug) */
.artiq-footer__trust{gap:44px}
@media (max-width:767px){.artiq-footer__trust{gap:16px 24px}}

/* Inhaltsraster fuer grosse Bildschirme (16.09.2026, Chris: "auf dem grossen Bildschirm wirkt alles
   verloren"). Ein Wert fuer alle: 1650px Inhaltsbreite = die Breite, die der Footer schon hatte.
   Bis ca. 1800px Fensterbreite greift er nicht, dort bleibt alles wie abgenommen. Der Header-Balken
   bleibt vollbreit, nur Logo/Menue/Socials ruecken an die Kanten des Rasters. */
:root{--artiq-content-max:1650px}
@media (min-width:1200px){
  .artiq-header__bar{padding-left:max(48px,calc((100% - var(--artiq-content-max)) / 2));padding-right:max(48px,calc((100% - var(--artiq-content-max)) / 2))}
}

/* =====================================================================
   Navigation Sitemap v3 (16.09.2026): Mega-Menue Leistungen, Knopf-Ausloeser,
   Kontakt-Knopf, Footer zweizeilig, Cookie-Einstellungen. Quelle der Eintraege
   ist startseite/navigation.json (bau-navigation.py), hier nur die Optik im
   bestehenden Header-Stil. Steht am Dateiende und ueberstimmt damit Runde 1-6.
   ===================================================================== */
/* Ausloeser ohne eigene Seite (Knopf) und Punkte ohne Link sehen aus wie die Links */
.artiq-header__nav>ul>li>button,.artiq-header__nav>ul>li>.artiq-link--offen{position:relative;display:inline-block;margin:0;padding:12px 15px;border:0;background:none;font-family:var(--font_kanit);font-size:15px;font-weight:400;letter-spacing:.01em;line-height:inherit;color:#e8e8e3;cursor:pointer;transition:color .3s}
.artiq-header__nav>ul>li>.artiq-link--offen{color:#8c8c87;cursor:default}
.artiq-header__nav>ul>li>button::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;background:var(--artiq-green);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.artiq-header__nav>ul>li:hover>button,.artiq-header__nav>ul>li>button[aria-expanded="true"]{color:#fff}
.artiq-header__nav>ul>li:hover>button::after,.artiq-header__nav>ul>li>button[aria-expanded="true"]::after{transform:scaleX(1)}
.artiq-header__nav>ul>li>a::after{left:15px;right:15px}
/* Titel mit eigener Seite (ab Welle 2 z. B. Leistungen): Link plus kleiner Aufklapp-Knopf fuer Touch */
.artiq-header__nav>ul>li>button.artiq-header__toggle{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:-10px;padding:0;border-radius:50%;vertical-align:middle}
.artiq-header__nav>ul>li>button.artiq-header__toggle::after{display:none}
.artiq-header__toggle span{display:block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate .3s}
.artiq-header__toggle[aria-expanded="true"] span{rotate:225deg;translate:0 2px}
/* Unterpunkte ohne Beschreibung: gleiche Zeilenhoehe fuer Link und Text */
.artiq-header__sub .artiq-link--offen{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px}
.artiq-header__sub .artiq-link--offen strong{font-weight:500;font-size:15px;color:#8c8c87}
.artiq-header__sub a:focus-visible strong,.artiq-header__sub a:hover strong{color:var(--artiq-green)}
/* Mega-Menue: zwei Gruppen nebeneinander, mittig unter "Leistungen" */
.artiq-header__mega{left:50%;display:grid;grid-template-columns:repeat(2,minmax(250px,1fr));gap:6px 18px;min-width:560px;padding:16px;transform:translate(-50%,8px)}
.artiq-header__nav>ul>li:hover .artiq-header__mega,.artiq-header__nav>ul>li:focus-within .artiq-header__mega{transform:translate(-50%,0)}
.artiq-header__gruppe ul{list-style:none;margin:0;padding:0}
.artiq-header__gruppentitel{display:block;padding:8px 14px 8px;font-family:var(--font_kanit);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--artiq-green)}
/* Escape schliesst das offene Panel, auch wenn der Fokus noch im Eintrag steht */
.artiq-header__nav>ul>li.is-zu .artiq-header__sub{opacity:0!important;visibility:hidden!important;transition:opacity .2s,visibility 0s .2s!important}
/* Kontakt-Knopf rechts vor den Socials; mobil fuehrt das Fullscreen-Menue dorthin */
.artiq-header__kontakt{margin-right:8px;padding:13px 24px}
.artiq-header.is-scrolled .artiq-header__kontakt{padding:11px 22px}
.artiq-header__social .artiq-header__kontakt{width:auto;height:auto;border-radius:999px;border:1px solid var(--artiq-green);color:var(--artiq-dark)}
.artiq-header__social .artiq-header__kontakt:hover{background:#fff;border-color:#fff;color:var(--artiq-dark)}
@media (max-width:1199px){.artiq-header__social .artiq-header__kontakt{display:none}}
/* Fullscreen-Menue: Gruppen unter Leistungen, Punkte ohne Link */
.artiq-menu__item.is-expanded .artiq-menu__sub--gruppen{max-height:1000px}
.artiq-menu__gruppe ul{list-style:none;margin:0;padding:0}
.artiq-menu__gruppentitel{display:block;padding:14px 0 4px;font-family:var(--font_kanit);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--artiq-green)}
.artiq-menu__sub .artiq-link--offen{display:flex;flex-direction:column;gap:2px;padding:10px 0}
.artiq-menu__sub .artiq-link--offen strong{font-weight:500;font-size:18px;color:#8c8c87}
.artiq-menu__sub>li:last-child>.artiq-link--offen{padding-bottom:22px}
/* In Gruppen nur der allerletzte Eintrag mit Abschlussabstand (die Bestandsregel li:last-child a trifft sonst jede Zeile der letzten Gruppe) */
.artiq-menu__sub--gruppen .artiq-menu__gruppe li a,.artiq-menu__sub--gruppen .artiq-menu__gruppe li .artiq-link--offen{padding-bottom:10px}
.artiq-menu__sub--gruppen>li:last-child li:last-child>a,.artiq-menu__sub--gruppen>li:last-child li:last-child>.artiq-link--offen{padding-bottom:22px}
.artiq-menu__sub a:focus-visible strong{color:var(--artiq-green)}
.artiq-menu__link.artiq-link--offen{cursor:default}
/* Footer zweizeilig: Marke links ueber beide Reihen, je Reihe drei Spalten (Bug-Shot #43, Chris 09.10.2026: Projekte-Spalte raus, Link unter ARTiQ) */
@media (min-width:1200px){
  .artiq-footer__main{row-gap:56px}
  .artiq-footer__brand{grid-row:1 / span 2}
}
/* Cookie-Einstellungen als Knopf in der Rechtsleiste, Optik wie die Links daneben */
.artiq-footer__cookie{margin:0;padding:0;border:0;background:none;font:inherit;color:var(--artiq-muted);cursor:pointer;transition:color .25s}
.artiq-footer__cookie:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.artiq-header__mega,.artiq-header__nav>ul>li>button::after{transition:none!important}}

/* "Zurueck nach oben" (17.09.2026, Befund Vera): das Template zeichnet den Pfeil als Font-Awesome-Glyphe U+F062.
   Das Theme liefert Font Awesome nicht aus, im Browser stand ein Kaestchen in Kanit. Pfeil als SVG-Maske in Markengruen. */
.progress-wrap::after{content:""!important;font:0/0 a!important;left:50%!important;top:50%!important;width:18px!important;height:18px!important;
  transform:translate(-50%,-50%);background-color:var(--artiq-green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}

/* ==========================================================================
   Desktop-Mega-Menue, Variante A1 (Chris 21.09.2026, Testseite /menue-test/)
   Volle Breite unter der Leiste: links Einordnung, Mitte Punkte mit Bild + Satz,
   rechts Vorschau (artiq.js stellt sie je Hover/Fokus um), unten Abbinder.
   Oeffnen/Schliessen bleibt bei den bestehenden Regeln (li:hover, :focus-within,
   .is-zu), deshalb traegt das Panel weiter .artiq-header__sub. Das li ist statisch,
   damit sich das Panel an Header bzw. Leiste (backdrop-filter) ausrichtet - beide
   sind vollbreit und gleich hoch. Markup: startseite/bau-navigation.py (mega).
   ========================================================================== */
.artiq-header__nav>ul>li.has-mega{position:static}
.artiq-header__sub.artiq-mega{top:100%;left:0;right:0;min-width:0;padding:0;border-radius:0;border:0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,10,9,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 40px 80px rgba(0,0,0,.55);transform:translateY(-10px);transition:opacity .28s,transform .38s cubic-bezier(.2,.7,.2,1),visibility 0s .38s;content-visibility:hidden;color:#e8e8e3}
.artiq-header__nav.is-bereit .artiq-mega,.artiq-header__nav>ul>li:hover .artiq-mega,.artiq-header__nav>ul>li:focus-within .artiq-mega{content-visibility:visible}
.artiq-header__nav>ul>li:hover .artiq-header__sub.artiq-mega,.artiq-header__nav>ul>li:focus-within .artiq-header__sub.artiq-mega{transform:none;transition:opacity .28s,transform .38s cubic-bezier(.2,.7,.2,1)}
.artiq-mega::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}
.artiq-mega__in{max-width:var(--artiq-content-max,1650px);margin:0 auto;padding:44px 48px 40px;display:grid;grid-template-columns:280px 1fr 340px;gap:48px}
.artiq-mega .artiq-mega__kicker{display:block;font-family:var(--font_kanit);font-style:italic;font-weight:100;font-size:15px;letter-spacing:.02em;color:var(--artiq-green)}
.artiq-mega__intro .artiq-mega__titel{margin:10px 0 16px;font-family:var(--font_kanit);font-weight:600;font-size:34px;line-height:1.02;text-transform:uppercase;color:#fff}
.artiq-mega__intro p{margin:0 0 26px;font-size:15px;line-height:1.6;color:#bdbdb7}
.artiq-mega .artiq-mega__alle,.artiq-mega .artiq-mega__mehr{display:inline-flex;flex-direction:row;align-items:center;gap:10px;padding:0;border-radius:0;font-family:var(--font_kanit);font-size:15px;color:#fff;background:none}
.artiq-mega__alle i,.artiq-mega__mehr i{position:relative;display:inline-block;width:18px;height:1.5px;background:var(--artiq-green);transition:width .3s}
.artiq-mega__alle i::after,.artiq-mega__mehr i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1.5px solid var(--artiq-green);border-right:1.5px solid var(--artiq-green);rotate:45deg}
.artiq-mega .artiq-mega__alle:hover{background:none}
.artiq-mega__alle:hover i,.artiq-mega__pv:hover .artiq-mega__mehr i{width:28px}
.artiq-mega__spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px;align-content:start}
.artiq-mega__spalten ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.artiq-mega__spalten>ul.artiq-mega__liste{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 32px}
.artiq-mega__spalten>ul.artiq-mega__liste--1{grid-template-columns:minmax(0,1fr)}
.artiq-mega__gruppentitel{display:block;padding:0 12px 6px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--font_kanit);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--artiq-green)}
.artiq-mega .artiq-mega__punkt{display:grid;grid-template-columns:76px 1fr;flex-direction:initial;gap:16px;align-items:center;padding:10px 12px;border-radius:14px;transition:background .25s}
.artiq-mega .artiq-mega__punkt:hover,.artiq-mega .artiq-mega__punkt.is-act{background:rgba(255,255,255,.05)}
.artiq-mega .artiq-mega__punkt img{display:block;width:76px;height:76px;object-fit:cover;border-radius:12px;filter:saturate(.85);transition:filter .3s,transform .5s}
.artiq-mega .artiq-mega__punkt:hover img,.artiq-mega .artiq-mega__punkt.is-act img{filter:none;transform:scale(1.04)}
.artiq-mega .artiq-mega__txt strong{display:block;margin-bottom:3px;font-family:var(--font_kanit);font-weight:500;font-size:17px;color:#fff;transition:color .25s}
.artiq-mega .artiq-mega__punkt:hover strong,.artiq-mega .artiq-mega__punkt.is-act strong,.artiq-mega a.artiq-mega__punkt:focus-visible strong{color:var(--artiq-green)}
.artiq-mega .artiq-mega__txt>span{display:block;font-size:13.5px;font-weight:300;line-height:1.5;color:#a3a39d}
.artiq-mega .artiq-link--offen strong,.artiq-mega .artiq-mega__punkt.artiq-link--offen:hover strong,.artiq-mega .artiq-mega__punkt.artiq-link--offen.is-act strong{color:#8c8c87}
.artiq-mega .artiq-mega__punkt.artiq-link--offen:hover,.artiq-mega .artiq-mega__punkt.artiq-link--offen.is-act{background:none;cursor:default}
.artiq-mega .artiq-link--offen img{opacity:.55}
.artiq-mega .artiq-mega__folgt{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:11px;font-weight:400;letter-spacing:.04em;color:#bdbdb7;vertical-align:middle}
.artiq-mega .artiq-mega__pv{display:block;align-self:start;padding:0;border-radius:18px;overflow:hidden;background:#161614;border:1px solid rgba(255,255,255,.08)}
.artiq-mega .artiq-mega__pv:hover{background:#161614}
.artiq-mega__bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#1a1a18}
.artiq-mega__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.06;transition:opacity .45s,scale 1.1s cubic-bezier(.2,.7,.2,1)}
.artiq-mega__bild img.is-act{opacity:1;scale:1}
.artiq-mega__pv-txt{display:block;min-height:170px;padding:18px 20px 20px}
.artiq-mega .artiq-mega__pv-txt strong{display:block;margin:6px 0;font-family:var(--font_kanit);font-weight:500;font-size:19px;color:#fff;overflow-wrap:break-word;hyphens:auto}
.artiq-mega .artiq-mega__pv-txt>span[data-pv="s"]{display:block;margin:0 0 14px;font-size:13.5px;font-weight:300;line-height:1.5;color:#a3a39d}
.artiq-mega__pv.is-offen .artiq-mega__mehr{visibility:hidden}
.artiq-mega__abbinder{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px max(48px,calc((100% - var(--artiq-content-max,1650px)) / 2 + 48px));border-top:1px solid rgba(255,255,255,.08);background:#0b0b0a}
.artiq-mega__abbinder p{margin:0;font-size:15px;color:#bdbdb7}
.artiq-mega__abbinder p b{font-weight:500;color:#fff}
.artiq-mega .artiq-mega__abbinder .artiq-btn{display:inline-flex;flex-direction:row;flex:none;padding:15px 26px;border-radius:999px;color:var(--artiq-dark)}
.artiq-mega .artiq-mega__abbinder .artiq-btn:hover{background:#fff;color:var(--artiq-dark)}
@media (max-width:1440px){.artiq-mega__in{grid-template-columns:240px 1fr 300px;gap:36px}}
@media (max-width:1360px){.artiq-mega__in{grid-template-columns:200px 1fr 250px;gap:28px;padding:36px 40px 32px}.artiq-mega__intro .artiq-mega__titel{font-size:28px}.artiq-mega__spalten,.artiq-mega__spalten>ul.artiq-mega__liste{gap:6px 18px}.artiq-mega .artiq-mega__punkt{grid-template-columns:56px 1fr;gap:12px;padding:8px}.artiq-mega .artiq-mega__punkt img{width:56px;height:56px}.artiq-mega .artiq-mega__pv-txt strong{font-size:17px}.artiq-mega__pv-txt{padding:16px 16px 18px}.artiq-mega__abbinder{padding:16px 40px}}
@media (prefers-reduced-motion:reduce){.artiq-header__sub.artiq-mega,.artiq-mega *{transition:none!important}}

/* ---------- Anfragestrecke ARTiQ LeadGen (#anfrage), gemeinsam fuer /kontakt/ und Startseite ----------
   Aus artiq-pages.css hierher verschoben (21.09.2026, woertlich), weil die Strecke jetzt auch auf der Startseite
   steht und artiq-pages.css dort nicht laedt. Das Plugin setzt Farben und Groessen per Inline-Style aus den
   Formular-Einstellungen (dort bereits CI-Werte). Hier nur, was sich dort nicht einstellen laesst: Typo, Zustaende
   (Hover, Fokus, ausgewaehlt, gesperrt, Fehler), Knopfformen. Alles unter .artiq-anfrage gekapselt,
   !important nur gegen Inline-Styles. */
.artiq-anfrage{max-width:1100px;margin:0 auto}
.artiq-anfrage .af2_form{background:transparent!important;box-shadow:none!important;font-family:var(--font_kanit)!important}
.artiq-anfrage .af2_question_heading{font-family:var(--font_kanit)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.004em;color:var(--artiq-ink)!important;font-size:clamp(24px,2.4vw,36px)!important;line-height:1.1!important}
.artiq-anfrage .af2_question_description{font-weight:300!important;font-size:18px!important;line-height:1.5!important;color:var(--artiq-green-text,#5f7420)!important;margin-top:10px}
.artiq-anfrage .af2_answer{border-radius:14px;cursor:pointer}
.artiq-anfrage .af2_answer_card{background:#fff!important;border:1px solid #cfcfc7!important;border-radius:14px!important;box-shadow:none!important;transform:none!important;scale:none;translate:none;transition:border-color .25s,background-color .25s,box-shadow .25s}
.artiq-anfrage .af2_answer_text{font-family:var(--font_kanit)!important;font-weight:400!important;color:var(--artiq-ink)!important}
.artiq-anfrage .af2_answer:hover .af2_answer_card,.artiq-anfrage .af2_answer.hover .af2_answer_card{border-color:var(--artiq-green)!important;background:#f6f8ee!important}
.artiq-anfrage .af2_answer.selected_item .af2_answer_card{border-color:var(--artiq-green)!important;background:rgba(162,193,75,.14)!important;box-shadow:inset 0 0 0 1px var(--artiq-green)!important}
.artiq-anfrage .af2_answer:focus{outline:none}
.artiq-anfrage .af2_answer:focus-visible{outline:2px solid #5f7420!important;outline-offset:4px!important}
/* Weiter/Zurueck: Knopfsprache der Website (dunkle Schrift auf Gruen, Pille, Versal) */
.artiq-anfrage .af2_form_button{font-family:var(--font_kanit)!important;font-size:13px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;line-height:1!important;color:var(--artiq-dark)!important;background:var(--artiq-green)!important;border:1px solid var(--artiq-green)!important;border-radius:999px!important;padding:15px 26px!important;min-height:46px;transition:background .3s,color .3s,border-color .3s}
.artiq-anfrage .af2_form_button:hover{background:var(--artiq-ink)!important;border-color:var(--artiq-ink)!important;color:#fff!important}
.artiq-anfrage .af2_form_button.af2_disabled,.artiq-anfrage .af2_form_button.af2_disabled:hover{background:#ececE6!important;border-color:#ececE6!important;color:#5d5d58!important;cursor:not-allowed}
.artiq-anfrage .af2_form_button:focus-visible,.artiq-anfrage .af2_submit_button:focus-visible{outline:2px solid #5f7420!important;outline-offset:4px!important}
.artiq-anfrage .af2_form_progress_bar{background:#e4e4dd!important;height:4px!important;border-radius:4px}
.artiq-anfrage .af2_form_progress{background:var(--artiq-green)!important;height:4px!important;border-radius:4px}
/* Kontaktteil */
.artiq-anfrage .af2_question_cf_text_type_wrapper input,.artiq-anfrage .af2_textbereich_frage{font-family:var(--font_kanit)!important;font-size:16px!important;font-weight:400!important;color:var(--artiq-ink)!important;background:#fff!important;border:1px solid #bdbdb5!important;border-radius:14px!important;box-shadow:none!important;transition:border-color .25s}
.artiq-anfrage .af2_question_cf_text_type_wrapper input::placeholder,.artiq-anfrage .af2_textbereich_frage::placeholder{color:#6b6b66;opacity:1}
.artiq-anfrage .af2_question_cf_text_type_wrapper input:hover,.artiq-anfrage .af2_textbereich_frage:hover{border-color:#8c8c87!important}
.artiq-anfrage .af2_question_cf_text_type_wrapper input:focus,.artiq-anfrage .af2_textbereich_frage:focus{border-color:#5f7420!important;outline:2px solid #5f7420!important;outline-offset:2px!important}
.artiq-anfrage .af2_question_text{margin:0 0 8px}
.artiq-anfrage .af2_question_label{font-family:var(--font_kanit)!important;font-size:15px!important;font-weight:500!important;line-height:1.35!important;color:var(--artiq-ink)!important;text-align:left;margin:0!important;cursor:default}
.artiq-anfrage .af2_form_html_content{font-family:var(--font_kanit)!important;font-weight:300!important;font-size:15px!important;line-height:1.55!important;color:var(--artiq-body)!important;max-width:620px;margin:6px auto 0}
/* Das Plugin faerbt Links mit ID-Selektor (#af2_form_N .af2_ahref) im Markengruen, auf Weiss 2,05:1. Die Sektions-ID schlaegt das. */
#anfrage .af2_form_html_content a.af2_ahref,#anfrage .af2_form_html_content a,#erstgespraech .af2_form_html_content a.af2_ahref,#erstgespraech .af2_form_html_content a{color:#5f7420!important;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#anfrage .af2_form_html_content a.af2_ahref:hover,#anfrage .af2_form_html_content a:hover,#erstgespraech .af2_form_html_content a.af2_ahref:hover,#erstgespraech .af2_form_html_content a:hover{color:var(--artiq-ink)!important}
.artiq-anfrage .af2_form_html_content a:focus-visible{outline:2px solid #5f7420!important;outline-offset:2px!important}
.artiq-anfrage .af2_submit_button{font-family:var(--font_kanit)!important;font-size:14px!important;font-weight:500!important;letter-spacing:.12em;text-transform:uppercase;color:var(--artiq-dark)!important;background:var(--artiq-green)!important;border:1px solid var(--artiq-green)!important;border-radius:999px!important;padding:19px 34px!important;transition:background .3s,color .3s,border-color .3s}
.artiq-anfrage .af2_submit_button:hover{background:var(--artiq-ink)!important;border-color:var(--artiq-ink)!important;color:#fff!important}
.artiq-anfrage .af2_submit_button .fa{display:none}
.artiq-anfrage .af2_response_error{font-family:var(--font_kanit)!important;font-weight:400!important;font-size:14px!important;color:#a4231a!important;margin-top:6px}
.artiq-anfrage .af2_loading_error{color:#a4231a!important}
@media (max-width:767px){.artiq-anfrage .af2_form_button{padding:12px 14px!important;letter-spacing:.06em;min-width:0;width:auto!important}.artiq-anfrage .af2_form_progress_bar{flex:1 1 auto!important;min-width:60px}
/* Mobil-Kopie der Navigation (Plugin: .af2_form_button.af2_mobile.special, height/min-height 40px, padding 0 35px !important).
   Touch-Ziel mindestens 44 px (gemessen 28.09.2026 auf /kontakt/ bei 390 px: 40 px). Spezifitaet 0,4,0 + !important schlaegt die Plugin-Regel unabhaengig von der Ladereihenfolge. */
.artiq-anfrage .af2_form_button.af2_mobile.special{height:44px!important;min-height:44px!important;padding:0 24px!important}}

/* ---------- Startseite: Anfragestrecke vor dem Footer (Testfunnel, 21.09.2026) ----------
   Keine neue Layoutform: heller Papierton der Partnerstimmen, Kopf wie Projekte/Ueber ARTiQ (Pill-Kicker, H2 mit
   kursiv-gruener Zeile 2), Formular in der gruen gerahmten 20-px-Karte der Ueber-ARTiQ-Karten. */
.artiq-start-anfrage{background:var(--artiq-paper)}
.artiq-start-anfrage .section-heading__wrap_3{text-align:center;max-width:1100px;margin:0 auto 56px}
/* Kicker im AA-Textgruen der Unterseiten (#5f7420): das Startseiten-Gruen #6f8525 erreicht auf dem Papierton nur 3,7:1 */
.artiq-start-anfrage .section__subtitle{display:inline-block;color:#5f7420!important}
.artiq-start-anfrage .section__title{color:var(--artiq-ink)!important;font-size:48px!important;line-height:1.05!important;margin:24px auto 0!important;max-width:1100px}
.artiq-start-anfrage .artiq-anfrage{background:#fff;border:1px solid rgba(162,193,75,.55);border-radius:20px;padding:56px 64px 48px}
.artiq-start-anfrage .af2_question_heading{font-size:clamp(22px,2vw,30px)!important}
/* Nach dem Schrittwechsel setzt artiq-anfrage.js den Fokus auf die Frage; das Karussell schneidet einen aeusseren Rahmen oben ab */
.artiq-start-anfrage .af2_question_heading:focus-visible{outline:2px solid #5f7420!important;outline-offset:-2px!important;border-radius:6px}
/* Erfolgsscreen: Plugin-Bild (Fremd-Icon) durch das CI-Haekchen ersetzen, ohne weitere Anfrage (Daten-URI) */
.artiq-anfrage .af2_success_image{height:auto!important;min-height:0!important;margin:0!important}
.artiq-anfrage .af2_success_image img{display:none!important}
.artiq-anfrage .af2_success_image::before{content:"";display:block;width:72px;height:72px;margin:0 auto 24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='48' r='48' fill='%23A2C14B'/%3E%3Cpath d='M29 49.5 42 62l25-28' fill='none' stroke='%23060606' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.artiq-anfrage .af2_success_text{font-family:var(--font_kanit)!important;font-weight:600!important;text-transform:uppercase;letter-spacing:.004em;color:var(--artiq-ink)!important;font-size:clamp(22px,2vw,30px)!important;line-height:1.15!important;text-align:center}
@media (max-width:1199px){.artiq-start-anfrage .section__title{font-size:36px!important}.artiq-start-anfrage .artiq-anfrage{padding:40px 36px 36px}}
@media (max-width:767px){.artiq-start-anfrage .section__title{font-size:28px!important;line-height:1.06!important;margin-top:16px!important}.artiq-start-anfrage .section-heading__wrap_3{margin-bottom:32px}.artiq-start-anfrage .artiq-anfrage{padding:28px 4px 24px;border-radius:16px}}

/* Antwort-Icons Funnel A (Bug-Shot #14, 08.10.2026): Lucide-Linien-SVGs in CI-Gruen aus der Mediathek (Frage 1082).
   Feste Groesse statt Plugin-Automatik (64 px Desktop, 40 px mobil), Anker ueber die Sektions-IDs, weil die
   Plugin-Regel mit acht Klassen und important jede Klassenkette schlaegt. Bewusst ohne die Plugin-Klassen pic/desktop
   (nicht im Purge-Inventar, die Regel fiele sonst still weg). */
#anfrage .af2_answer_card .af2_answer_image_wrapper,#erstgespraech .af2_answer_card .af2_answer_image_wrapper{flex:0 0 auto!important;width:auto!important;height:auto!important;padding:0!important;margin:0 18px 0 28px!important}
#anfrage .af2_answer_card:not(.af2_mobile) .af2_answer_image,#erstgespraech .af2_answer_card:not(.af2_mobile) .af2_answer_image{width:44px!important;max-width:44px!important;height:44px!important;display:block}
#anfrage .af2_answer_card.af2_mobile .af2_answer_image_wrapper,#erstgespraech .af2_answer_card.af2_mobile .af2_answer_image_wrapper{margin:0 14px 0 16px!important}
#anfrage .af2_answer_card.af2_mobile .af2_answer_image,#erstgespraech .af2_answer_card.af2_mobile .af2_answer_image{width:32px!important;max-width:32px!important;height:32px!important;display:block}
#anfrage .af2_answer_card.af2_mobile .af2_answer_text,#erstgespraech .af2_answer_card.af2_mobile .af2_answer_text{padding-left:0!important;margin-left:0!important;text-align:left!important}
/* ---------- Hero-Mikrozeile (Chris 24.09.2026, LeadGen-CTA-Konzept) ----------
   Kleine Zeile direkt unter den Knoepfen im Wortlaut von Chris. Kicker-Gruen, Leichtschnitt, keine neue Farbe und
   keine neue Sektion - der Designstand vom 12.09.2026 bleibt. Der Hero-Inhalt ist eine Flex-Spalte mit 24 px Abstand,
   der negative Rand zieht die Zeile naeher an die Knoepfe. */
.artiq-hero__note{margin:-8px 0 0;max-width:560px;font-family:var(--font_kanit);font-weight:300;font-size:15px;line-height:1.5;color:var(--artiq-green)}
@media (max-width:767px){.artiq-hero__note{margin-top:-4px;font-size:14px}}

/* ---------- Anfrage-Popup #erstgespraech (Chris 24.09.2026) ----------
   Dieselbe Strecke wie #anfrage als modales Overlay hinter dem Header-Kontakt-Knopf (Desktop und Fullscreen-Menue).
   Muster wie das Fullscreen-Menue: fixiert, Sichtbarkeit per Klasse, Fokusfalle und Scroll-Sperre in artiq.js
   (anfragePopup). Liegt zur Laufzeit direkt in <body>, nie im ScrollSmoother-Inhalt. Ohne JavaScript existiert es
   nicht (html:not(.js)), der Knopf fuehrt dann auf die Kontaktseite. Der weisse Dialog ist die gruen gerahmte
   20-px-Karte der Startseiten-Strecke; visibility statt display, damit das Plugin die Karussellhoehe im verborgenen
   Zustand messen kann (jQuery .height() liefert bei display:none 0). Die Karussell-Transition des Plugins bleibt
   auch bei reduzierter Bewegung an (frontend.js wartet auf transitionend), nur Hintergrund und Dialog stehen still. */
html:not(.js) .artiq-anfrage-popup{display:none}
.artiq-anfrage-popup{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;pointer-events:none;outline:none}
.artiq-anfrage-popup.is-open{visibility:visible;pointer-events:auto}
.artiq-anfrage-popup__bg{position:absolute;inset:0;background:rgba(6,6,6,.86);opacity:0;transition:opacity .35s}
.artiq-anfrage-popup.is-open .artiq-anfrage-popup__bg{opacity:1}
.artiq-anfrage-popup__dialog{position:relative;width:100%;max-width:1100px;max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid rgba(162,193,75,.55);border-radius:20px;padding:44px 64px 40px;opacity:0;transform:translateY(16px);transition:opacity .35s,transform .45s cubic-bezier(.2,.7,.2,1)}
.artiq-anfrage-popup.is-open .artiq-anfrage-popup__dialog{opacity:1;transform:none}
.artiq-anfrage-popup__close{position:absolute;top:18px;right:18px;width:44px;height:44px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(29,29,27,.18);background:#fff;cursor:pointer;transition:border-color .3s,background .3s}
.artiq-anfrage-popup__close span{position:absolute;left:50%;top:50%;width:16px;height:1.5px;background:var(--artiq-ink);transform:translate(-50%,-50%) rotate(45deg)}
.artiq-anfrage-popup__close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.artiq-anfrage-popup__close:hover{border-color:var(--artiq-green);background:#f6f8ee}
.artiq-anfrage-popup__close:focus-visible{outline:2px solid #5f7420;outline-offset:3px}
.artiq-anfrage-popup .section-heading__wrap_3{text-align:center;max-width:900px;margin:0 auto 28px}
.artiq-anfrage-popup .section__subtitle{display:inline-block;color:#5f7420!important}
.artiq-anfrage-popup .section__title{color:var(--artiq-ink)!important;font-size:34px!important;line-height:1.05!important;margin:18px auto 0!important;max-width:900px}
.artiq-anfrage-popup .af2_question_heading{font-size:clamp(22px,2vw,30px)!important}
.artiq-anfrage-popup .af2_question_heading:focus-visible{outline:2px solid #5f7420!important;outline-offset:-2px!important;border-radius:6px}
@media (max-width:1199px){.artiq-anfrage-popup .section__title{font-size:32px!important}.artiq-anfrage-popup__dialog{padding:52px 36px 36px}}
@media (max-width:767px){.artiq-anfrage-popup{padding:0}.artiq-anfrage-popup__dialog{height:100%;max-height:100vh;max-height:100svh;border-radius:0;border:0;padding:76px 8px 28px}.artiq-anfrage-popup .section-heading__wrap_3{margin-bottom:26px;padding:0 8px}.artiq-anfrage-popup .section__title{font-size:26px!important;line-height:1.06!important;margin-top:14px!important}.artiq-anfrage-popup__close{top:14px;right:14px}}
@media (prefers-reduced-motion:reduce){.artiq-anfrage-popup__bg,.artiq-anfrage-popup__dialog{transition:none!important}}

/* ==========================================================================
   Hauptleiste + Mega-Menue, Runde 07.10.2026 (Chris)
   1) Flackern beim Wechsel Leistungen -> Deine Ziele. Drei Ursachen, gemessen
      (scratchpad/flacker-test.mjs): (a) die unsichtbare Bruecke .artiq-mega::before
      (30 px ueber dem Panel) lag ueber der unteren Haelfte der Nachbar-Ausloeser
      und hielt das alte Panel offen; (b) ein ausblendendes Panel blieb 0,38 s
      hit-testbar und fing den Zeiger wieder ein; (c) zwei Panels blendeten
      gleichzeitig ueber- und ineinander (Kreuzblende). Jetzt: keine Bruecke
      (das Panel schliesst ohne Luecke an die Leiste an), geschlossene und
      schliessende Panels nehmen keine Zeigerereignisse an, beim Wechsel zwischen
      zwei Punkten schaltet artiq.js (.is-wechsel) hart um statt zu blenden.
   2) Leiste: Versalien, mehr Luft, Chevron an jedem Aufklapper.
   ========================================================================== */
.artiq-mega::before{content:none}
/* Die Punkte fuellen die ganze Leistenhoehe: so bleibt li:hover erhalten, waehrend der Zeiger vom Menuepunkt
   nach unten ins Panel faehrt (Chris 07.10. abends: Panel ging zu, sobald man hineinwollte - die entfernte
   Bruecke hatte diese Luecke mit abgedeckt). Kein Ueberlappen der Nachbarn, Panel sitzt buendig an der Leiste. */
/* Nur Desktop: ohne die Media-Query ueberschrieb display:flex die Mobil-Regel
   `@media (max-width:1199px){.artiq-header__nav{display:none}}` (gleiche Spezifitaet, spaeter im Stylesheet) -
   die Desktop-Leiste stand ab 18:23 Uhr auf jedem Handy sichtbar ueber dem Hero, der Burger fehlte
   (gemessen am Staging 07.10. 20:05, overflow.mjs 390: 15 abgeschnittene Menuepunkte). */
@media (min-width:1200px){
.artiq-header__nav{align-self:stretch;display:flex;align-items:center}
.artiq-header__nav>ul{height:100%}
.artiq-header__nav>ul>li{display:flex;align-items:center;height:100%}
}
.artiq-header__sub.artiq-mega{pointer-events:none}
.artiq-header__nav>ul>li:hover .artiq-header__sub.artiq-mega,.artiq-header__nav>ul>li:focus-within .artiq-header__sub.artiq-mega{pointer-events:auto}
.artiq-header__nav>ul>li.is-zu .artiq-header__sub.artiq-mega{pointer-events:none!important}
.artiq-header__nav.is-wechsel .artiq-header__sub{transition:none!important}
/* Leiste */
.artiq-header__nav>ul{gap:14px}
.artiq-header__nav>ul>li>a,.artiq-header__nav>ul>li>button.artiq-header__trigger,.artiq-header__nav>ul>li>.artiq-link--offen{padding:12px 14px;font-size:13px;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.artiq-header__nav>ul>li>a::after,.artiq-header__nav>ul>li>button.artiq-header__trigger::after{left:14px;right:14px;bottom:7px}
/* Aufklapper ohne eigene Seite: Chevron am Textende, gleiche Geometrie wie .artiq-header__toggle */
.artiq-header__nav>ul>li>button.artiq-header__trigger{padding-right:31px}
.artiq-header__nav>ul>li>button.artiq-header__trigger::after{right:31px}
.artiq-header__chev{position:absolute;right:12px;top:50%;display:block;width:7px;height:7px;margin-top:-5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;transition:rotate .3s,margin-top .3s}
.artiq-header__nav>ul>li:hover>button.artiq-header__trigger .artiq-header__chev,.artiq-header__nav>ul>li>button.artiq-header__trigger[aria-expanded="true"] .artiq-header__chev{rotate:225deg;margin-top:-1px}
.artiq-header__nav>ul>li>button.artiq-header__toggle{margin-left:-11px}
.artiq-header__nav>ul>li:hover>button.artiq-header__toggle span{rotate:225deg;translate:0 2px}
@media (prefers-reduced-motion:reduce){.artiq-header__chev{transition:none!important}}

/* ROT-Markierung (A4, Chris 07.10.2026): Textstellen, die auf Chris' Freigabe warten (Bugshot im Frontend).
   Quelle: unterseiten/bau/pruefen.json (Sektionen) bzw. {rot}...{/rot} im Copy-Text. Vor der Umstellung muss die Klasse auf 0 stehen. */
section.artiq-pruefen{position:relative;outline:3px solid #e0201b;outline-offset:-3px}
section.artiq-pruefen::before{content:"Text wartet auf Freigabe";position:absolute;top:0;right:0;z-index:20;padding:5px 12px;background:#e0201b;color:#fff;font:600 12px/1.3 system-ui,sans-serif;letter-spacing:.04em;pointer-events:none}
/* ohne :is() - der Purge-Schritt im Theme-Build zerschneidet :is(...span.klasse) und reisst damit alle folgenden Regeln mit (07.10.2026) */
section.artiq-pruefen h1,section.artiq-pruefen h2,section.artiq-pruefen h3,section.artiq-pruefen p,section.artiq-pruefen li{text-decoration:underline wavy rgba(224,32,27,.75);text-decoration-thickness:1px;text-underline-offset:4px}
mark.artiq-pruefen{background:rgba(224,32,27,.16);color:inherit;box-shadow:inset 0 -2px #e0201b;padding:0 2px}

/* Hero auf Laptop-Hoehen (Chris 08.10.2026, Laptop-Check verify/laptop-2026-10-08): ab 1400 px Breite und unter 960 px
   Fensterhoehe lief die dritte H1-Zeile ins Hero-Bild -> Bild 300 statt 380 px hoch. Bei sehr flachen Fenstern (bis
   700 px, 13-Zoll mit Leisten) lag der CTA unter dem Fold -> H1 58 px, weniger Abstand oben. 1920x1080 unveraendert.
   Gemessen per Testbrowser (hero-fix-test2.mjs): 0 Ueberlappungen, CTA bei allen Laptop-Groessen im Fold. */
@media (min-width:1400px) and (max-height:960px){
  .artiq-hero__media .zoom-thumb,.artiq-zoom-ph{height:300px!important}
}
@media (min-width:1200px) and (max-height:700px){
  .artiq-hero__title{font-size:58px!important}
  .hero-section-5__wrap.artiq-hero__wrap{padding-top:104px}
  .artiq-hero__content{gap:16px}
}
/* Ziele-Karten 992-1199 px (Checkup 08.10.2026): Titelbox 153 px, "MITARBEITER" braucht bei 30 px 184 px und ragte aus
   der Karte. 24 px passt in alle vier Titel. */
@media (min-width:992px) and (max-width:1199px){.cyber-services7__card-title{font-size:24px!important}}
/* Tippflaechen mind. 24 px (WCAG 2.2 AA, 2.5.8), Checkup 08.10.2026: Breadcrumb, Abschluss-Links und Footer-Links waren
   20-21 px hoch. Innenabstand plus gleich grosser negativer Aussenabstand: groessere Trefferflaeche, Layout unveraendert. */
.artiq-breadcrumb a,.artiq-connect__secondary,.footer-area6 nav a,.footer-area6 address a,.artiq-footer__cookie,.feature-area8__item-title a{padding-top:4px;padding-bottom:4px;margin-top:-4px;margin-bottom:-4px}
/* Werte-Karten Startseite gleich hoch (Checkup 08.10.2026): die Spalten waren gleich hoch, die Karte als Block nur so hoch
   wie ihr Text (407/407/372 px). */
.about-section-3__bottom .row>[class*="col-"]{display:flex;flex-direction:column}
.about-section-3__bottom .about-section-3__card{flex:1 1 auto}
/* Schmale Handys (360 px), Checkup 08.10.2026: lange Breadcrumb ("SUCHMASCHINENOPTIMIERUNG") und lange Buttons
   ("PROJEKT L&T IMMOBILIEN ANSEHEN") liefen 8 px ueber den Rand. Umbruch nur, wenn der Platz fehlt. */
.artiq-breadcrumb{flex-wrap:wrap;row-gap:2px}
@media (max-width:480px){.artiq-btn{white-space:normal;text-align:center;max-width:100%}}

/* ---------- Vera-Sichtpruefung 08.10.2026 (verify/checkup/vera-sichtpruefung-2026-10-08.md) ---------- */
/* G0: Das Template blendet mobil ALLE <br> aus (style.css: @media max-width:767px br{display:none}). In Fliesstext,
   Adressen und Rechtstexten klebten dadurch Zeilen zusammen ("ARTiQ MarketingInhaber Chris Kuehnle..."). In
   Ueberschriften bleibt der Template-Umbruch mobil aus (dort folgt ein eigener Zweizeiler-Span). */
@media (max-width:767px){p br,address br,li br,td br,dd br,blockquote br{display:inline}}
/* S4: Odometer setzt nach dem Start die Theme-Klasse mit "Helvetica Neue" - Zaehler in Hausschrift. */
.odometer,.odometer.odometer-auto-theme,.odometer.odometer-theme-default,.odometer .odometer-digit,.odometer .odometer-value{font-family:var(--font_kanit)!important}
/* S3: Kennzahlen auf dem Tablet - vier Werte in einer Flex-Zeile, der vierte rutschte allein in Reihe zwei. 2x2 wie mobil. */
@media (min-width:768px) and (max-width:1199px){
  .achievement-area6-wrapper{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px!important}
  .achievement-area6-wrapper .achievement-area6__items{margin:0!important}
  .achievement-area6-wrapper .achievement-area6__items{padding:0 32px!important}
  .achievement-area6-wrapper .achievement-area6__items:nth-child(odd){border-left:0!important;padding-left:0!important}
}
/* S5: Leistungsreihe Startseite - Template zentriert die Spalten vertikal, Icons und Titel standen auf vier Hoehen. */
.about-us-5__wrap{align-items:start!important}
/* S10/global: Telefonnummern brechen nicht um. */
a[href^="tel:"]{white-space:nowrap}

/* Hero-Bild auf grossen Bildschirmen (Chris 08.10.2026, Bug-Shot #35 bei 3008x1525: "Above the Fold richtig leer").
   Das Bild waechst nach rechts in den freien Rand neben dem 1770-px-Container, die linke Kante bleibt -> kein neuer
   Ueberlapp mit der H1. Der Platzhalter der Zoom-Animation (artiq.js heroZoom) bekommt denselben Versatz, sonst springt
   das Bild beim Start der Animation zurueck in die Spalte. Unter 2200 px Breite unveraendert. */
@media (min-width:2200px) and (min-height:1000px){
  .artiq-hero__media .zoom-thumb{max-width:none!important;width:640px!important;height:460px!important;margin-right:-120px!important}
  .artiq-hero__media .artiq-zoom-ph{max-width:none;margin-right:-120px}
  /* Endband der Zoom-Animation ist hier sehr flach (bis 4,2:1) - Ausschnitt nach oben, sonst faellt die Wortmarke der
     Visitenkarte aus dem Bild (Vera 08.10.2026, 3008x1525). */
  .hero-section-5__wrapper .zoom-thumb{object-position:50% 30%}
}
@media (min-width:2560px) and (min-height:1100px){
  .artiq-hero__media .zoom-thumb{width:820px!important;height:590px!important;margin-right:-300px!important}
  .artiq-hero__media .artiq-zoom-ph{margin-right:-300px}
}
/* Partnerkreise in der Bewertungs-Karte (Bug-Shot #37): Datei 585x180 fuer scharfe Darstellung, angezeigt 195x60. */
.testimonial-area6__items-image-thumb img{width:195px;height:auto}
/* Bug-Shot #41 (Chris 09.10.2026): Google-Bewertung in der hellen Partnerstimmen-Box wie im Hero, Farben fuer hellen Grund */
.testimonial-area6__items-info-content .artiq-rating--hell{padding-right:0!important;gap:14px}
.artiq-rating--hell .artiq-hero__score{color:var(--artiq-ink)}
.artiq-rating--hell .artiq-hero__rating-label{color:var(--artiq-ink)}
.artiq-rating--hell .artiq-hero__rating-label small{color:#6c6c67}
/* Bug-Shot #14 (Chris 07.10.2026 "Hochwertige Icons dazu. Aktuell sehr blass."): duenne #A2C14B-Linien auf Weiss hatten ~2:1 Kontrast.
   Jetzt CI-Plakette: gruener Kreis, Icon schwarz (wie die gruenen Knoepfe mit schwarzer Schrift). Die SVGs bleiben unveraendert
   (LeadGen-Objekte nicht anfassen, urlencode(serialize)-Falle) - nur Darstellung. Gilt fuer alle Strecken mit Antwort-Icons. */
.artiq-anfrage .af2_answer_card .af2_answer_image_wrapper,#anfrage .af2_answer_card .af2_answer_image_wrapper,#erstgespraech .af2_answer_card .af2_answer_image_wrapper{display:flex!important;align-items:center;justify-content:center;width:56px!important;height:56px!important;border-radius:50%;background:var(--artiq-green)!important;transition:transform .25s}
.artiq-anfrage .af2_answer_card:not(.af2_mobile) .af2_answer_image,#anfrage .af2_answer_card:not(.af2_mobile) .af2_answer_image,#erstgespraech .af2_answer_card:not(.af2_mobile) .af2_answer_image{width:28px!important;max-width:28px!important;height:28px!important;filter:brightness(0)}
.artiq-anfrage .af2_answer_card.af2_mobile .af2_answer_image_wrapper,#anfrage .af2_answer_card.af2_mobile .af2_answer_image_wrapper,#erstgespraech .af2_answer_card.af2_mobile .af2_answer_image_wrapper{width:42px!important;height:42px!important}
.artiq-anfrage .af2_answer_card.af2_mobile .af2_answer_image,#anfrage .af2_answer_card.af2_mobile .af2_answer_image,#erstgespraech .af2_answer_card.af2_mobile .af2_answer_image{width:22px!important;max-width:22px!important;height:22px!important;filter:brightness(0)}
.artiq-anfrage .af2_answer:hover .af2_answer_image_wrapper,.artiq-anfrage .af2_answer.selected_item .af2_answer_image_wrapper{transform:scale(1.06)}
@media (max-width:767px){
  .testimonial-area6__items-info-thumb{display:none!important}
  .artiq-rating--hell .artiq-hero__rating-label{white-space:nowrap}
}