/* qelivia.css - gemeinsames Stylesheet aller Seiten: Tokens, Grundlagen,
   Typografie, Schaltflaechen, Kopf- und Fussbereich. Ladereihenfolge:
   fonts.css, qelivia.css, <style> je Seite. Farben nur ueber :root. */

:root{
  --bg:#FAFAF7; --paper:#F3F2EC; --panel:#FFFFFF;
  --ink:#101514; --ink-2:#4A524E; --ink-3:#5F6863;
  --line:#E5E6E0; --line-2:#D3D5CD;
  --green:#8A926A; --green-deep:#636B3D; --green-deeper:#535A31; --stage:#454D2C; --green-soft:#F0F1E9;
  --ok:#6B7648; --ok-soft:#EEF0E0; --warn:#C23A2B; --warn-soft:#FBEDEA; --amb:#8A6109;
  /* Dunkle Flächen: die Scan-Grafik und das Terminal auf der Startseite stehen
     auf fast schwarzem Olivgrund. Eigene Abstufungen, damit dort nicht mit
     Einzelwerten gearbeitet werden muss. */
  --dark:#0E1413; --dark-bar:#161D1A; --dark-line:#242C28; --dark-line-2:#1D2420;
  --dark-ink:#C9D2CD; --dark-ink-2:#8A938E; --green-light:#B2BC83;
  --stage-hi:#4E5730; --stage-lo:#3B421F;
  
  --sp-1:8px;                     /* Zeile zu Zeile */
  --sp-2:18px;                    /* Ueberschrift zu zugehoerigem Text */
  --sp-3:clamp(26px,3.5vh,40px);  /* Elemente einer Gruppe */
  --sp-4:clamp(44px,6vh,74px);    /* Gruppe zu Gruppe */
  --sp-5:clamp(64px,9vh,112px);   /* Abschnitt zu Abschnitt */
  --sp-6:clamp(86px,12vh,152px);  /* Kapitel zu Kapitel */
  --radius:8px; 
  --sh-sm:0 1px 2px rgba(16,21,20,.06);
  --sh-md:0 10px 30px -12px rgba(16,21,20,.14);
  --sh-lg:0 28px 60px -24px rgba(16,21,20,.22);
  --sans:'Geist','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Geist','Inter',system-ui,sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,monospace;
  --maxw:1280px;
  --ease:cubic-bezier(.25,.6,.25,1);
  --ease-o:cubic-bezier(.22,1,.36,1);
}

/* ----------------
   Grundlagen
   ----------------
   Reset, Grundtypografie des Dokuments, Fokus-Sichtbarkeit, Sprunglink. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{position:relative}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green-deep);color:var(--panel);font-weight:600;padding:12px 20px;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ----------------
   Typografie
   ----------------
   Überschriften, Fließtext-Varianten, Farbverlaufstext. */
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.lead{color:var(--ink-2);font-size:clamp(1rem,1.4vw,1.14rem);max-width:640px}

h2{font-size:clamp(1.85rem,3.2vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--sp-2)}
h3{font-size:1.06rem;font-weight:650;letter-spacing:-.015em}

.grad{font-family:var(--disp);font-style:normal;font-weight:800;letter-spacing:-.03em;background:none;color:var(--green);-webkit-text-fill-color:currentColor}


.lm{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.lm>span{display:inline-block;opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.in .lm>span{opacity:1}
.rv{opacity:0;transition:opacity .5s var(--ease);transition-delay:calc(var(--i,0)*55ms)}
.rv.in,.in .rv{opacity:1}

/* --------------------
   Schaltflächen
   --------------------
   Grundform und die gefüllte Hauptvariante. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.97rem;padding:15px 26px;border-radius:8px;transition:background .25s,color .25s,border-color .25s,box-shadow .3s,transform .25s var(--ease);border:1px solid transparent;white-space:nowrap;position:relative;overflow:hidden}
.btn-primary{background:var(--green-deep);color:var(--panel);box-shadow:var(--sh-sm)}
.btn-primary::before{content:"";position:absolute;inset:0;background:var(--green-deeper);opacity:0;transition:opacity .3s}
.btn-primary:hover{box-shadow:var(--sh-sm)}
.btn-primary:hover::before{opacity:1}

.btn-secondary{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--ink-3);box-shadow:var(--sh-sm)}
.btn-white{background:var(--green-deep);color:var(--panel);font-weight:600}
.btn-white:hover{background:var(--green-deeper)}
.btn-primary>*{position:relative}

/* -----------------
   Kopfbereich
   -----------------
   Navigationsleiste, Wortmarke mit Morsezeichen (Q = dah dah dit dah),
   Burger-Schalter und Mobilmenü. Das Markup dazu ist auf allen Seiten gleich. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(250,250,247,.88);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(16,21,20,.18)}
/* Das Attribut hidden muss staerker sein als jede display-Angabe einer
   Komponente. Ohne diese Zeile bleibt z. B. eine Schaltflaeche mit hidden
   sichtbar, weil .btn display:inline-flex setzt. */
[hidden]{display:none!important}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:82px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:800;font-size:1.3rem;letter-spacing:-.03em}
.brand-lock{display:inline-flex;flex-direction:column;gap:6px}
.brand-word{font-family:var(--disp);font-weight:800;font-size:1.72rem;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.brand-word .qg{color:var(--green)}
.morse{display:flex;justify-content:space-between;width:100%}
.morse i{display:block;height:5px;border-radius:99px;transform-origin:left center;background:var(--ink)}
.morse .dah{width:26%}
.morse .dit{width:10%;transform-origin:center;background:var(--green)}
.morse .m1{animation:qdah .42s var(--ease-o) .15s backwards}
.morse .m2{animation:qdah .42s var(--ease-o) .71s backwards}
.morse .m3{animation:qdit .3s var(--ease-o) 1.27s backwards}
.morse .m4{animation:qdah .42s var(--ease-o) 1.55s backwards}
@keyframes qdah{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes qdit{0%{transform:scale(0)}55%{transform:scale(1.6);box-shadow:0 0 0 5px rgba(138,146,106,.25)}100%{transform:scale(1)}}
.brand-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.01em;word-spacing:-.14em;color:var(--ink-3);border-left:1px solid var(--line-2);padding-left:10px;margin-left:2px;transform:translateY(1px)}
.nav-links{display:flex;align-items:center;gap:2px}
/* Sprachumschalter. Bewusst nur zwei Buchstaben, keine Flaggen -
   Flaggen stehen fuer Laender, nicht fuer Sprachen. */
.nav-links a.lang-lnk{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:9px 10px}
.nav-links a.lang-lnk:hover{color:var(--ink)}
.nav-links a.lnk{font-size:.93rem;font-weight:500;color:var(--ink-2);padding:9px 13px;border-radius:9px;transition:color .2s,background .2s;white-space:nowrap}
.nav-links a.lnk:hover{color:var(--ink);background:var(--paper)}
.nav-links a.lnk[aria-current="page"]{color:var(--ink)}
.nav-links .btn{margin-left:12px;padding:12px 21px;font-size:.9rem}

.grp{position:relative}
.grp-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.93rem;font-weight:500;color:var(--ink-2);padding:9px 13px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.grp-btn:hover,.grp.open>.grp-btn{color:var(--ink);background:var(--paper)}
/* .cur markiert die Gruppe, in der die aktive Seite liegt. */
.grp-btn.cur{color:var(--ink)}
.grp-chev{width:9px;height:9px;flex:0 0 auto;transition:transform .25s var(--ease)}
.grp.open .grp-chev{transform:rotate(180deg)}
.grp-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:238px;z-index:101;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-md);padding:8px}
.grp.open .grp-menu{display:block}

.grp-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.grp-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:.9rem;color:var(--ink-2);white-space:nowrap;transition:color .2s,background .2s}
.grp-menu a:hover{color:var(--ink);background:var(--paper)}
.grp-menu a[aria-current="page"]{color:var(--ink);font-weight:600}
/* Kundenbereich ist Zugang fuer Bestandskunden, kein Verkaufsargument.
   Deshalb sekundaer und durch eine Trennlinie vom Marketing-Menue abgesetzt. */
.nav-links a/* Kernangebot in der Navigation: gleiche Groesse wie die uebrigen Punkte,
   nur etwas kraeftiger gesetzt, damit es als erster Punkt Halt gibt. */
.lnk-tm{font-weight:600;color:var(--ink)}
.lnk-tm:hover{color:var(--green-deep)}
.lnk-login{margin-left:10px;padding-left:15px;border-left:1px solid var(--line-2);border-radius:0;font-size:.86rem;color:var(--ink-3)}
.nav-links a.lnk-login:hover{background:none;color:var(--ink)}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:10px;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}
.m-menu{display:none}


.page-hero{position:relative;background:var(--bg);border-bottom:1px solid var(--line);
  padding:calc(76px + var(--sp-5)) 0 var(--sp-5)}
.page-hero>.wrap{position:relative;z-index:1}
.page-hero h1{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:650;letter-spacing:-.035em;line-height:1.14;max-width:21ch;margin:0}
.page-hero .lead{margin-top:var(--sp-2);max-width:60ch;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.68}
.page-hero .hero-cta{margin-top:var(--sp-3)}
.page-hero.ph-artikel h1{max-width:26ch;font-size:clamp(1.8rem,3vw,2.6rem)}
.page-hero.ph-legal{padding-top:calc(76px + var(--sp-4));padding-bottom:var(--sp-4)}
.page-hero.ph-legal h1{font-size:clamp(1.7rem,2.6vw,2.25rem);max-width:24ch}
.crumb{display:flex;gap:10px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--sp-3)}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--ink)}
@media(max-width:720px){
  .page-hero{padding-top:calc(64px + var(--sp-4));padding-bottom:var(--sp-4)}
  .page-hero h1{max-width:100%;overflow-wrap:break-word}}

/* ----------------
   Abschnitte
   ----------------
   Vertikale Rhythmik der Seitenabschnitte. */
.sec{padding:var(--sp-6) 0}

.page-hero + .sec{padding-top:var(--sp-5)}
.page-hero.ph-legal + .sec{padding-top:var(--sp-4)}

.sec-flush{padding-top:0}
.sec-tight{padding-top:clamp(48px,7vh,80px)}
.plan.hot{border-top:3px solid var(--green)}
.faq.open{border-color:var(--line-2)}
.faq.open .chev{transform:rotate(180deg);color:var(--green-deep)}

/* -----------------
   Fußbereich
   -----------------
   Aufbau und Spalten des Seitenfußes. */
footer{border-top:1px solid var(--line);background:var(--panel);overflow:clip}
.foot{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding:clamp(32px,5vh,56px) 0 40px}
.foot-pad{padding-top:clamp(36px,6vh,64px)}
.foot-brand p{color:var(--ink-3);font-size:.9rem;max-width:330px;margin-top:12px}
.foot-slogan{margin-top:10px;font-family:var(--mono);font-style:normal;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--green);background:none;-webkit-text-fill-color:currentColor;display:inline-block}
.foot-cols{display:flex;gap:52px;flex-wrap:wrap}
.foot-cols b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px;font-weight:500}
.foot-cols a{display:block;color:var(--ink-2);font-size:.92rem;padding:4px 0;transition:color .2s}
.foot-cols a:hover{color:var(--ink)}
.foot-legal{border-top:1px solid var(--line);padding:18px 0 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ink-3);font-size:.8rem}

.job{border-top:1px solid var(--line);transition:none}
.job:last-of-type{border-bottom:1px solid var(--line)}
.job-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 2px;cursor:pointer;text-align:left;width:100%}
.job-head h3{font-size:1.04rem;font-weight:650;letter-spacing:-.015em;transition:color .2s}
.job-head:hover h3{color:var(--green-deep)}
.job-tags{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
.job-tags span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.job-tags span:not(:last-child)::after{content:"·";color:var(--green);margin-left:14px}
.job-tags .hot{color:var(--green-deep);font-weight:600}
.job .chev{flex:0 0 auto;width:18px;height:18px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease),color .3s}
.job .chev svg{width:12px;height:12px}
.job-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.job-body-in{padding:0 2px 24px;color:var(--ink-2);font-size:.94rem;line-height:1.7;max-width:76ch}
.job.open .chev{transform:rotate(180deg);color:var(--green-deep)}


@media(max-width:1000px){.brand-tag{display:none}}
@media(max-width:900px){.grp-btn,/* Sprachumschalter. Bewusst nur zwei Buchstaben, keine Flaggen -
   Flaggen stehen fuer Laender, nicht fuer Sprachen. */
.nav-links a.lang-lnk{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;padding:9px 10px}
.nav-links a.lang-lnk:hover{color:var(--ink)}
.nav-links a.lnk{padding:9px 9px;font-size:.87rem}.nav-links .btn{padding:10px 15px;font-size:.84rem;margin-left:8px}}
@media(max-width:820px){
  .nav-links{display:none}
  .burger{display:block}
  .m-menu.show{display:block;position:fixed;top:82px;left:0;right:0;z-index:99;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh-md);padding:10px 20px 20px}
  .m-menu.show a{display:block;padding:14px 4px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--paper);font-size:1.02rem}
  
  .m-menu.show .m-head{display:block;padding:18px 4px 6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  .m-menu.show .m-head:first-child{padding-top:6px}
  .m-menu.show .btn{margin-top:14px;width:100%}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.lm>span{transition:none;opacity:1;transform:none}
  .morse i{animation:none!important}}