/* ══════════════════════════════════════════════════════════════
   RANKERRA — shared design system (landing pages)
   Izvor istine za tokene: redesign/index.html :root (homepage).
   Ovaj fajl NE koristi homepage (ona ostaje inline po PO mandatu);
   koristi ga svih 11 novih stranica.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bg:#060707;
  --bg2:#0B0D0C;
  --panel:#0E1110;
  --panel2:#121514;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --txt:#F1F4F0;
  --mut:#96A19A;
  --faint:#5D6862;
  --dead:#4A545C;
  --mint:#3BF59F;
  --mint2:#0BC98B;
  --mint-ink:#04150D;
  --grad:linear-gradient(100deg,#B9FFDC 0%,#3BF59F 38%,#0BC98B 100%);
  --disp:'Archivo',sans-serif;
  --body:'Space Grotesk',sans-serif;
  --mono:'Space Mono',monospace;
  --serif:'Instrument Serif',serif;
  --r:20px;
  --pad:clamp(20px,4vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{background:var(--bg)}
body{
  font-family:var(--body);color:var(--txt);
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--mint);color:var(--mint-ink)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
code{
  font-family:var(--mono);font-size:.88em;color:var(--txt);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:6px;padding:.08em .38em;white-space:nowrap;
}

/* a11y — focus stanja (novi standard, homepage dug) */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--mint);outline-offset:3px;border-radius:4px;
}
.pill-cta:focus-visible,.pill-ghost:focus-visible{border-radius:999px}

/* ── type ─────────────────────────────────── */
.disp{
  font-family:var(--disp);
  font-variation-settings:'wdth' 122;
  font-weight:880;
  text-transform:uppercase;
  line-height:.93;
  letter-spacing:-.012em;
}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--mint);
  display:inline-flex;align-items:center;gap:10px;
}
.kicker::before{content:'';width:22px;height:1px;background:var(--mint)}
.grad-word{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.outline-word{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(241,244,240,.5);
}
.serif-pill{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:.94em;letter-spacing:.01em;text-transform:none;
  border:1px solid var(--line2);border-radius:999px;
  padding:.04em .5em .1em;white-space:nowrap;
}
.h2-tail{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:clamp(10px,1vw,12px);letter-spacing:.3em;
  color:var(--mint);margin-top:18px;text-transform:uppercase;
}

/* ── chrome: header (identičan homepage-u) ── */
#hd{
  position:fixed;inset:0 0 auto 0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s,backdrop-filter .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
#hd.scrolled{
  background:rgba(6,7,7,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:30px;height:30px;flex:none}
.logo b{
  font-family:var(--disp);font-variation-settings:'wdth' 118;
  font-weight:850;font-size:19px;letter-spacing:.02em;text-transform:uppercase;
}
#hd nav{display:flex;gap:20px}
#hd nav a{
  font-size:13px;font-weight:500;color:var(--mut);
  letter-spacing:.04em;transition:color .25s;white-space:nowrap;
}
#hd nav a:hover{color:var(--txt)}
.pill-cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--grad);color:var(--mint-ink);
  font-weight:700;font-size:14px;letter-spacing:.02em;
  border-radius:999px;padding:12px 22px;
  transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 0 0 0 rgba(59,245,159,0);
}
.pill-cta:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(59,245,159,.45)}
.pill-cta .dot{
  width:26px;height:26px;border-radius:50%;flex:none;
  background:rgba(4,21,13,.18);
  display:grid;place-items:center;
}
.pill-cta .dot svg{width:13px;height:13px}
.pill-ghost{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--line2);border-radius:999px;
  padding:12px 22px;font-weight:600;font-size:14px;color:var(--txt);
  transition:border-color .25s,background .25s;
}
.pill-ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
/* Burger: Balken oben, Wortmarke „MENÜ" darunter — ein gemeinsamer Kasten.
   50px hoch, damit das Touch-Target ≥44px bleibt (WCAG AA). */
#burger{display:none;width:52px;height:50px;flex:none;border:1px solid var(--line2);border-radius:13px;position:relative;background:transparent}
#burger i,#burger i::before,#burger i::after{
  content:'';position:absolute;left:15px;right:15px;height:1.6px;background:var(--txt);
  top:16px;transition:transform .3s,opacity .3s;
}
#burger i::before{left:0;right:0;top:-5px}
#burger i::after{left:0;right:0;top:5px}
#burger .mlabel{
  position:absolute;left:0;right:0;bottom:6px;text-align:center;
  font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);line-height:1;
}
body.menu-open #burger i{background:transparent}
body.menu-open #burger i::before{transform:translateY(5px) rotate(45deg)}
body.menu-open #burger i::after{transform:translateY(-5px) rotate(-45deg)}
#mmenu{
  position:fixed;inset:0;z-index:85;background:rgba(6,7,7,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:none;flex-direction:column;justify-content:center;gap:8px;
  padding:0 var(--pad);
}
body.menu-open #mmenu{display:flex}
/* v2: 9 stavki + uvučene Local-industrije — font spušten, meni scrolluje po potrebi */
#mmenu{justify-content:flex-start;overflow-y:auto;padding-top:96px;padding-bottom:40px;gap:6px}
#mmenu a{
  font-family:var(--disp);font-variation-settings:'wdth' 120;font-weight:850;
  text-transform:uppercase;font-size:clamp(20px,5vw,32px);line-height:1.16;
  color:var(--txt);flex:none;padding:12px 4px;
}
#mmenu a span{color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.3em;-webkit-text-stroke:0;margin-right:14px;vertical-align:middle}
/* uvučene podstavke (Local SEO branše) */
#mmenu a.mm-sub{
  font-family:var(--body);font-variation-settings:normal;font-weight:500;
  text-transform:none;font-size:15px;line-height:1.5;color:var(--mut);
  padding:12px 4px 12px 44px;
}
#mmenu a.mm-sub::before{content:'↳';color:var(--faint);margin-right:10px;font-family:var(--mono);font-size:12px}
#mmenu a.mm-sub:hover{color:var(--txt)}

/* ── layout shells ────────────────────────── */
.sect{position:relative;padding:clamp(80px,11vh,150px) var(--pad)}
.sect + .sect{padding-top:clamp(30px,5vh,70px)}
.wrap{max-width:1240px;margin:0 auto}
.s-head{margin-bottom:clamp(36px,5.5vh,64px)}
.s-head h2{font-size:clamp(34px,4.8vw,76px);margin-top:18px}
.s-head .s-sub{color:var(--mut);max-width:680px;margin-top:20px;font-size:clamp(15px,1.3vw,17.5px)}

/* ── breadcrumb ───────────────────────────── */
.crumbs{margin-bottom:clamp(22px,3vh,34px)}
.crumbs ol{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);
}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li + li::before{content:'›';color:var(--faint)}
.crumbs a{color:var(--faint);transition:color .25s}
.crumbs a:hover{color:var(--mut)}
.crumbs [aria-current="page"]{color:var(--mut)}

/* ── page hero (kompaktan, ~70vh, ne film) ── */
.p-hero{
  position:relative;overflow:clip;
  min-height:min(70vh,760px);
  display:flex;align-items:center;
  padding:clamp(140px,20vh,190px) var(--pad) clamp(56px,8vh,90px);
}
.p-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 42% at 18% 0%,rgba(59,245,159,.09),transparent 66%);
}
.p-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
}
.p-hero .wrap{position:relative;width:100%}
.p-hero h1{
  font-size:clamp(38px,5.9vw,92px);
  max-width:1080px;margin-top:20px;
}
.p-sub{
  color:var(--mut);max-width:680px;
  font-size:clamp(16px,1.4vw,19px);line-height:1.65;
  margin-top:clamp(20px,3vh,30px);
}
.p-sub + .p-sub{margin-top:14px}
.p-sub b,.p-sub strong{color:var(--txt);font-weight:600}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:clamp(26px,4vh,40px)}
.cta-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

/* ── prose (problem / tekst blokovi) ──────── */
.prose{max-width:760px}
.prose p{color:var(--mut);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.7}
.prose p + p,.prose p + .blist,.prose .blist + p{margin-top:18px}
.prose b,.prose strong{color:var(--txt);font-weight:600}
.blist{list-style:none;display:flex;flex-direction:column;gap:14px}
.blist li{
  position:relative;padding-left:30px;
  color:var(--mut);font-size:clamp(15px,1.25vw,17px);line-height:1.65;
}
.blist li::before{
  content:'';position:absolute;left:2px;top:.62em;
  width:14px;height:1.5px;background:var(--mint);
}
.blist b,.blist strong{color:var(--txt);font-weight:600}

/* ── leistung details grid ────────────────── */
.lg-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lg-card{
  position:relative;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,2.6vw,38px);
  transition:transform .35s ease,border-color .35s ease;
}
.lg-card:hover{transform:translateY(-4px);border-color:var(--line2)}
.lg-card .idx{
  font-family:var(--mono);font-size:11px;color:var(--mint);letter-spacing:.26em;
  display:block;margin-bottom:20px;
}
.lg-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:850;
  text-transform:uppercase;font-size:clamp(18px,1.7vw,24px);
  line-height:1.08;letter-spacing:.01em;margin-bottom:14px;
}
.lg-card p{color:var(--mut);font-size:14.5px;line-height:1.65}
.lg-card.ki{border-color:rgba(59,245,159,.3);background:linear-gradient(165deg,#0F1512,#0B0E0D)}
.ki-tag{
  position:absolute;top:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mint);border:1px solid rgba(59,245,159,.4);border-radius:999px;
  padding:5px 12px;background:rgba(59,245,159,.07);
}

/* ── ablauf: vertikalni mono-numerisani koraci ── */
.steps-title{
  font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:860;
  text-transform:uppercase;font-size:clamp(19px,1.8vw,25px);
  margin-bottom:clamp(26px,4vh,40px);
}
.steps{list-style:none;max-width:860px;display:flex;flex-direction:column}
.steps .step{
  position:relative;display:grid;grid-template-columns:74px 1fr;gap:22px;
  padding:26px 0;
}
.steps .step::before{
  content:'';position:absolute;left:26px;top:0;bottom:0;width:1px;
  background:var(--line);
}
.steps .step:first-child::before{top:26px}
.steps .step:last-child::before{bottom:auto;height:26px}
.st-n{
  position:relative;z-index:2;
  width:52px;height:52px;border-radius:50%;flex:none;
  border:1px solid rgba(59,245,159,.4);background:var(--bg);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;color:var(--mint);
}
.steps .step p{color:var(--mut);font-size:clamp(15px,1.25vw,16.5px);line-height:1.68;padding-top:12px;max-width:700px}
.steps .step b,.steps .step strong{color:var(--txt);font-weight:600}
.steps-note{
  max-width:860px;margin-top:clamp(24px,3.5vh,36px);
  border-left:2px solid var(--mint);padding:4px 0 4px 22px;
  color:var(--mut);font-size:15px;line-height:1.7;
}

/* ── warum / trust panel ──────────────────── */
.trust-panel{
  background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(26px,3vw,44px);
}
.trust-panel .tp-kick{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mint);
  text-transform:uppercase;display:block;margin-bottom:18px;
}
.trust-panel p{color:var(--mut);font-size:15px;line-height:1.7;max-width:760px}
.trust-panel p + p{margin-top:14px}
.why-grid{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px);
}
.why-grid .why{
  padding:22px 0;border-top:1px solid var(--line);
}
.why-grid .why > b,.why-grid .why > strong{
  display:block;color:var(--txt);font-weight:600;font-size:16.5px;margin-bottom:7px;
}
.why-grid .why p{color:var(--mut);font-size:14.5px;line-height:1.65;max-width:520px}
.tools-line{
  margin-top:clamp(26px,4vh,38px);
  font-family:var(--mono);font-size:12.5px;line-height:2;color:var(--mut);
}
.tools-line small{
  display:block;font-size:10px;letter-spacing:.26em;color:var(--faint);
  text-transform:uppercase;margin-bottom:6px;
}
/* Werkzeug-Logos statt Textliste. Die Marken sind fuer hellen Grund gezeichnet,
   darum werden sie hier einheitlich weiss ausgespielt - sonst verschwinden die
   dunklen Wortmarken auf --bg. Die Dateien selbst bleiben unveraendert. */
.tools-logos{
  --tl:clamp(17px,1.9vw,22px);
  display:grid;grid-template-columns:repeat(4,1fr);
  align-items:center;justify-items:start;
  gap:clamp(16px,2.4vh,26px) clamp(18px,2.4vw,34px);margin-top:14px;
}
.tools-logos img{
  height:calc(var(--k,1) * var(--tl));width:auto;max-width:100%;display:block;
  filter:brightness(0) invert(1);opacity:.58;transition:opacity .25s ease;
}
@media (max-width:560px){
  .tools-logos{grid-template-columns:repeat(2,1fr)}
}
.tools-logos img:hover{opacity:.92}
/* optischer Ausgleich: reine Wortmarken wirken bei gleicher Pixelhoehe groesser */
.tools-logos .tl-ahrefs{--k:.82}
.tools-logos .tl-gsc{--k:.86}
.tools-logos .tl-frog{--k:.91}
.tools-logos .tl-semrush{--k:.68}
.tools-logos .tl-sistrix{--k:.77}
.tools-logos .tl-rankmath{--k:.91}
.tools-logos .tl-wprocket{--k:1.36}
.tools-logos .tl-ga4{--k:1.27}

/* ── social proof: Ehrlichkeits-Panel ─────── */
.honest-panel{
  position:relative;
  background:var(--panel);border:1px solid rgba(59,245,159,.22);
  border-radius:24px;padding:clamp(28px,3.4vw,48px);
  max-width:860px;
  box-shadow:0 30px 90px -40px rgba(59,245,159,.14);
}
.honest-panel .hp-kick{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mint);
  text-transform:uppercase;display:block;margin-bottom:20px;
}
.honest-panel .hp-lead{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(19px,2vw,25px);line-height:1.5;color:var(--txt);
  margin-bottom:16px;
}
.honest-panel p{color:var(--mut);font-size:15.5px;line-height:1.7}
.honest-panel p + p{margin-top:14px}
.honest-panel .v-cta{margin-top:24px}

/* v-cta (strelica link — isti obrazac kao homepage) */
.v-cta{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:14.5px;color:var(--mint)}
.v-cta svg{width:15px;height:15px;transition:transform .25s}
.v-cta:hover svg{transform:translateX(5px)}

/* ── branchen hub grid (Local index) ──────── */
.branchen-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(10px,2vh,20px)}
.branchen-grid .b-card:last-child:nth-child(odd){grid-column:1/-1}
.branchen-grid .b-card:last-child:nth-child(odd) p{max-width:640px}
.b-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,2.6vw,36px);
  transition:transform .35s ease,border-color .35s ease;
}
.b-card:hover{transform:translateY(-5px);border-color:rgba(59,245,159,.35)}
.b-icon{
  width:46px;height:46px;border-radius:10px;flex:none;margin-bottom:20px;
  background:rgba(59,245,159,.08);border:1px solid rgba(59,245,159,.35);
  display:grid;place-items:center;
}
.b-icon svg{width:26px;height:26px}
.b-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:850;
  text-transform:uppercase;font-size:clamp(19px,1.8vw,25px);
  line-height:1.06;margin-bottom:10px;
}
.b-card p{color:var(--mut);font-size:14.5px;line-height:1.65;margin-bottom:20px;max-width:460px}
.b-card .v-cta{margin-top:auto}

/* ── finalni CTA panel ────────────────────── */
.cta-final{
  position:relative;overflow:clip;
  background:var(--panel);border:1px solid rgba(59,245,159,.3);
  border-radius:26px;padding:clamp(32px,4.5vw,64px);
  box-shadow:0 40px 110px -40px rgba(59,245,159,.2);
}
.cta-final::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 88% -10%,rgba(59,245,159,.12),transparent 62%);
}
.cta-final > *{position:relative}
.cta-final h2{font-size:clamp(30px,4.2vw,64px);margin-top:16px;max-width:900px}
.cta-final p{color:var(--mut);max-width:640px;margin-top:18px;font-size:clamp(15px,1.3vw,17px);line-height:1.68}
.cta-final .cta-row{margin-top:clamp(24px,3.5vh,36px)}
.cta-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin-top:clamp(22px,3vh,30px) !important;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint) !important;
}
.cta-meta a{color:var(--mut);transition:color .25s}
.cta-meta a:hover{color:var(--mint)}
.cta-meta .sep{width:1px;height:12px;background:var(--line2)}

/* ── faq (1:1 homepage .qa obrazac) ───────── */
.fq-wrap{max-width:900px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa button{
  width:100%;display:flex;align-items:center;gap:22px;justify-content:space-between;
  text-align:left;padding:24px 4px;
}
.qa button h3{font-size:clamp(16px,1.5vw,19px);font-weight:600;line-height:1.4;font-family:var(--body);text-transform:none;letter-spacing:0}
.qa .q-x{
  flex:none;width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;
  display:grid;place-items:center;position:relative;transition:transform .35s,border-color .35s,background .35s;
}
.qa .q-x::before,.qa .q-x::after{
  content:'';position:absolute;background:var(--txt);transition:background .35s;
}
.qa .q-x::before{width:12px;height:1.5px}
.qa .q-x::after{width:1.5px;height:12px}
.qa.open .q-x{transform:rotate(45deg);border-color:var(--mint);background:rgba(59,245,159,.08)}
.qa.open .q-x::before,.qa.open .q-x::after{background:var(--mint)}
/* Akkordeon über max-height statt des 0fr/1fr-Grid-Tricks: Letzterer kollabiert
   je nach Engine auf 0px (overflow:hidden am Grid-Item nullt dessen Mindesthöhe).
   Der Deckel liegt weit über der längsten Antwort. */
.qa .a{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.6,.1,.15,1)}
.qa.open .a{max-height:800px}
.qa .a p{color:var(--mut);font-size:15px;line-height:1.7;padding:0 60px 26px 4px;max-width:760px}

/* ── footer (identičan homepage-u) ────────── */
footer{border-top:1px solid var(--line);padding:clamp(60px,9vh,110px) var(--pad) 40px;overflow:clip}
.f-mark{
  font-family:var(--disp);font-variation-settings:'wdth' 124;font-weight:900;text-transform:uppercase;
  font-size:clamp(60px,12.6vw,232px);line-height:.86;text-align:center;
  color:transparent;-webkit-text-stroke:1.5px rgba(241,244,240,.16);
  margin-bottom:clamp(40px,7vh,80px);user-select:none;
}
.f-grid{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:46px;border-bottom:1px solid var(--line);
}
.f-grid .f-h4{font-family:var(--mono);font-size:10px;letter-spacing:.28em;color:var(--faint);text-transform:uppercase;margin-bottom:18px;max-width:none}
.f-grid p{color:var(--mut);font-size:14px;max-width:330px}
.f-grid ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.f-grid ul a,.f-grid ul button,.f-grid ul .f-hours{color:var(--mut);font-size:14px;transition:color .25s}
.f-grid ul a:hover,.f-grid ul button:hover{color:var(--mint)}
.f-soc{display:flex;gap:10px;margin-top:22px}
.f-soc a{
  width:40px;height:40px;border:1px solid var(--line2);border-radius:50%;
  display:grid;place-items:center;transition:border-color .25s,background .25s;
}
.f-soc a:hover{border-color:var(--mint);background:rgba(59,245,159,.07)}
.f-soc svg{width:16px;height:16px;fill:var(--txt)}
.f-bot{
  max-width:1240px;margin:0 auto;padding-top:26px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;
}

/* ── scroll reveal (JS-gated: bez JS sve vidljivo) ── */
.reveal{opacity:1}
html.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1);
}
html.js .reveal.in{opacity:1;transform:none}

/* ── responsive ───────────────────────────── */
@media(max-width:1279px){
  #hd nav{display:none}
  #hd .pill-cta{display:none}
  #burger{display:block}
}
@media(max-width:920px){
  .lg-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .branchen-grid{grid-template-columns:1fr}
  .p-hero{min-height:0}
}
@media(max-width:980px){
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .f-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .steps .step{grid-template-columns:52px 1fr;gap:16px}
  .steps .step::before{left:22px}
  .st-n{width:44px;height:44px;font-size:12.5px}
  .qa .a p{padding-right:12px}
  .ki-tag{position:static;display:inline-block;margin-bottom:14px}
}

/* ── reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html.js .reveal{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════
   RANKERRA v2 — KRUG 2 skyscraper toolkit
   (design-brief-krug2 §1 nav + §2 komponente; ništa iznad se ne lomi)
   ══════════════════════════════════════════════════════════════ */

/* ── nav v2: 10 flat stavki + JEDINI dropdown „Local SEO ▾" (PO odluka) ──
   Svi linkovi su statični <a href> u DOM-u; reveal je čisti CSS
   (:hover / :focus-within). JS samo toggluje aria-expanded.
   Trigger dropdowna je PRAVI link na /local-seo-agentur/.        */
#hd nav ul.nav-list{
  list-style:none;display:flex;gap:14px;align-items:center;margin:0;padding:0;
}
#hd nav .nav-list > li{position:relative}
#hd nav .nav-list a{
  font-size:12.5px;font-weight:500;color:var(--mut);
  letter-spacing:.02em;transition:color .25s;white-space:nowrap;
}
#hd nav .nav-list a:hover{color:var(--txt)}
#hd nav .nav-list a[aria-current="page"]{color:var(--txt)}
#hd nav .sub-link{display:inline-flex;align-items:center;gap:5px}
#hd nav .sub-link .caret{
  width:9px;height:9px;flex:none;transition:transform .2s;
}
#hd nav li.has-sub:hover .sub-link .caret,
#hd nav li.has-sub:focus-within .sub-link .caret{transform:rotate(180deg)}
/* kondenzacija — 11 stavki mora stati do 1380px burger-praga (1240 je bilo premalo od „SEO Automation" naovamo, 17.09.2026) */
@media(max-width:1600px){
  #hd nav ul.nav-list{gap:10px}
  #hd nav .nav-list a{font-size:11.5px;letter-spacing:.01em}
  #hd .pill-cta{padding:10px 16px;font-size:13px}
  #hd .pill-cta .dot{width:22px;height:22px}
}
#hd nav .sub{
  list-style:none;margin:0;padding:10px;
  position:absolute;top:100%;left:-14px;min-width:230px;
  background:rgba(10,12,11,.96);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line2);border-radius:16px;
  box-shadow:0 24px 70px -24px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:95;
}
/* hover-most: nevidljivi produžetak da meni ne "pobjegne" između triggera i panela */
#hd nav li.has-sub::after{
  content:'';position:absolute;left:-14px;right:-14px;top:100%;height:14px;
}
#hd nav li.has-sub:hover > .sub,
#hd nav li.has-sub:focus-within > .sub{
  opacity:1;visibility:visible;transform:translateY(6px);
}
#hd nav .sub a{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;font-size:13px;
}
#hd nav .sub a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
#hd nav .sub a .s-i{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);flex:none;
}
#hd nav .sub a:hover .s-i{color:var(--mint)}

/* ── proof-bar (Home #2 — činjenice, BEZ brojki/★/ocjena) ── */
.proof-bar{
  display:flex;align-items:center;justify-content:center;gap:12px 22px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);
}
.proof-bar .pb-i{display:inline-flex;align-items:center;gap:9px}
.proof-bar .pb-i::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
.proof-bar b{color:var(--txt);font-weight:700}
.proof-bar .sep{width:1px;height:14px;background:var(--line2)}

/* ── „Inhalt" jump-nav (.toc) — stranice ≥ ~1800 riječi ── */
.toc{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.6vw,38px);
  max-width:860px;
}
.toc .toc-kick{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mint);
  text-transform:uppercase;display:block;margin-bottom:16px;
}
.toc ol{
  list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(24px,3vw,44px);
}
.toc li{break-inside:avoid;padding:5px 0}
.toc a{
  display:inline-flex;gap:10px;align-items:baseline;
  font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--mut);
  transition:color .25s;
}
.toc a:hover{color:var(--mint)}
.toc a .t-n{color:var(--faint);font-size:10px;letter-spacing:.12em;flex:none}
@media(max-width:640px){.toc ol{columns:1}}

/* ── .toc INNERHALB von .article-prose ──────────────────────────
   Die Listenregeln des Artikels (16px, 12px Abstand, 36px Einzug)
   sind fuer Fliesstext gedacht. Auf ein Inhaltsverzeichnis mit 18
   Punkten angewandt ergeben sie einen ueber 2000 Pixel hohen Block
   vor dem ersten Satz. Hier gilt wieder die kompakte Typografie des
   Verzeichnisses; die Nummerierung kommt weiterhin aus dem
   counter(apn) des Artikels, damit sie ueberall gleich aussieht. */
.article-prose .toc ol{gap:1px}
.article-prose .toc li{
  font-family:var(--mono);font-size:12.5px;line-height:1.45;
  padding-left:26px;color:var(--mut);
}
.article-prose .toc li::before{font-size:10px;top:.28em}
.article-prose .toc ol ol{margin:3px 0 7px;gap:0}
.article-prose .toc ol ol li{font-size:11.5px;padding-left:22px;opacity:.9}
.article-prose .toc a{color:var(--mut);transition:color .2s}
.article-prose .toc a:hover{color:var(--mint)}

/* ── checklist blok (.check-list) ── */
.check-list{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,2.8vw,42px);max-width:860px;
}
.check-list .cl-kick{
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--mint);
  text-transform:uppercase;display:block;margin-bottom:22px;
}
.check-list ul,.check-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.check-list li{
  display:block;position:relative;
  padding:13px 0 13px 46px;border-top:1px solid var(--line);
  color:var(--mut);font-size:clamp(14.5px,1.25vw,16.5px);line-height:1.62;
}
.check-list li:first-child{border-top:0;padding-top:0}
.check-list li:last-child{padding-bottom:0}
.check-list li b,.check-list li strong{color:var(--txt);font-weight:600}
.check-list li::before{
  content:'✓';
  position:absolute;left:0;top:14px;
  width:26px;height:26px;border-radius:8px;
  background:rgba(59,245,159,.09);border:1px solid rgba(59,245,159,.4);
  color:var(--mint);font-size:13px;line-height:1;
  display:grid;place-items:center;
}
.check-list li:first-child::before{top:1px}
/* brojčani mod (npr. 7 Baustellen, 15-Punkte Selbstcheck) */
.check-list.numbered ol{counter-reset:cln}
.check-list.numbered li{counter-increment:cln}
.check-list.numbered li::before{
  content:counter(cln,decimal-leading-zero);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
}
/* item s lead + objašnjenjem */
.check-list li .cl-t{display:block;color:var(--txt);font-weight:600;margin-bottom:3px}

/* ── komparativna tabela (.cmp-table u .cmp-wrap) ── */
.cmp-wrap{
  overflow-x:auto;max-width:960px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
.cmp-table{
  width:100%;min-width:560px;border-collapse:collapse;
  font-size:clamp(13.5px,1.15vw,15px);line-height:1.55;
}
.cmp-table th,.cmp-table td{
  padding:14px 18px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);color:var(--mut);
}
.cmp-table thead th{
  background:var(--panel2);
  font-family:var(--mono);font-weight:400;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--txt);
  white-space:nowrap;
}
.cmp-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table th:first-child,.cmp-table td:first-child{color:var(--txt);font-weight:600}
/* „naša" kolona — mint lijevi border */
.cmp-table .ours{border-left:2px solid var(--mint)}
.cmp-table thead .ours{color:var(--mint)}

/* ── Weiterlesen kartice (.wl-grid / .wl-card) ── */
.wl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wl-grid.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:920px){.wl-grid,.wl-grid.cols3{grid-template-columns:1fr}}
.wl-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px);
  transition:transform .3s ease,border-color .3s ease;
}
.wl-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.wl-card .wl-i{
  font-family:var(--mono);font-size:10px;color:var(--faint);letter-spacing:.24em;
  display:flex;align-items:center;gap:10px;margin-bottom:16px;text-transform:uppercase;
}
.wl-card .wl-i .ki-chip{
  font-size:9.5px;letter-spacing:.18em;color:var(--mint);
  border:1px solid rgba(59,245,159,.4);border-radius:999px;
  padding:3px 9px;background:rgba(59,245,159,.07);
}
.wl-card h3,.wl-card .wl-t{
  font-family:var(--body);font-weight:600;font-size:clamp(15.5px,1.35vw,17.5px);
  line-height:1.42;text-transform:none;letter-spacing:0;margin:0 0 10px;
}
.wl-card a{color:var(--txt);transition:color .25s}
.wl-card a:hover{color:var(--mint)}
/* cijela kartica klikabilna preko pseudo-elementa linka */
.wl-card h3 a::after,.wl-card .wl-t a::after{content:'';position:absolute;inset:0;border-radius:inherit}
.wl-card p{color:var(--mut);font-size:13.5px;line-height:1.6;margin:0 0 18px}
.wl-card .wl-arrow{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--mint);text-transform:uppercase;
}
.wl-card .wl-arrow svg{width:14px;height:14px;transition:transform .25s}
.wl-card:hover .wl-arrow svg{transform:translateX(5px)}

/* ── autor-box (.author-box) — dno svakog Ratgeber članka ── */
.author-box{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,32px);max-width:760px;
}
.author-box img{
  width:72px;height:72px;flex:none;border-radius:16px;
  border:1px solid rgba(59,245,159,.3);object-fit:cover;
}
.author-box p{color:var(--mut);font-size:14.5px;line-height:1.65;margin:0}
.author-box p + p{margin-top:8px}
.author-box p:first-child{color:var(--txt)}
.author-box strong,.author-box b{color:var(--txt);font-weight:600}
.author-box .v-cta{margin-top:12px;font-size:13.5px}
@media(max-width:520px){.author-box{flex-direction:column}}

/* ── prošireni prose za Ratgeber članke (.article-prose) ── */
.article-prose{max-width:68ch}
.article-prose > * + *{margin-top:18px}
.article-prose p{color:var(--mut);font-size:clamp(15.5px,1.3vw,17px);line-height:1.7}
.article-prose b,.article-prose strong{color:var(--txt);font-weight:600}
.article-prose a{
  color:var(--mint);text-decoration:underline;text-decoration-color:rgba(59,245,159,.4);
  text-underline-offset:3px;transition:text-decoration-color .25s;
}
.article-prose a:hover{text-decoration-color:var(--mint)}
.article-prose h2{
  font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:860;
  text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(22px,2.4vw,32px);line-height:1.08;
  margin-top:clamp(40px,5.5vh,58px);
}
.article-prose h3{
  font-family:var(--body);font-weight:700;font-size:clamp(17px,1.5vw,20px);
  line-height:1.35;margin-top:clamp(30px,4vh,42px);
}
.article-prose ul,.article-prose ol{
  padding-left:0;list-style:none;display:flex;flex-direction:column;gap:12px;
}
.article-prose ul li,.article-prose ol li{
  position:relative;padding-left:30px;
  color:var(--mut);font-size:clamp(15px,1.25vw,16.5px);line-height:1.65;
}
.article-prose ul li::before{
  content:'';position:absolute;left:2px;top:.65em;
  width:14px;height:1.5px;background:var(--mint);
}
.article-prose ol{counter-reset:apn}
.article-prose ol li{counter-increment:apn;padding-left:36px}
.article-prose ol li::before{
  content:counter(apn,decimal-leading-zero);
  position:absolute;left:0;top:.18em;
  font-family:var(--mono);font-size:11px;color:var(--mint);letter-spacing:.06em;
}
.article-prose code{white-space:nowrap}
.article-prose pre{
  background:var(--panel2);border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;overflow-x:auto;
}
.article-prose pre code{
  background:none;border:0;padding:0;white-space:pre;
  font-size:13px;line-height:1.7;color:var(--txt);
}
.article-prose .tbl-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);
  -webkit-overflow-scrolling:touch;
}
.article-prose table{
  width:100%;min-width:520px;border-collapse:collapse;font-size:14px;line-height:1.55;margin:0;
}
.article-prose th,.article-prose td{
  padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);color:var(--mut);
}
.article-prose thead th{
  background:var(--panel2);font-family:var(--mono);font-weight:400;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt);
}
.article-prose tbody tr:last-child td{border-bottom:0}

/* ── article header (.art-hero / .art-meta) ── */
.art-hero{
  position:relative;overflow:clip;
  padding:clamp(130px,17vh,180px) var(--pad) clamp(36px,5vh,56px);
  border-bottom:1px solid var(--line);
}
.art-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 38% at 14% 0%,rgba(59,245,159,.08),transparent 66%);
}
.art-hero .wrap{position:relative}
.art-hero h1{
  font-size:clamp(30px,4.4vw,62px);max-width:980px;margin-top:18px;
}
.art-meta{
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
  margin-top:clamp(20px,3vh,28px);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase;
}
.art-meta b{color:var(--mut);font-weight:400}
.art-meta .sep{width:1px;height:12px;background:var(--line2)}

/* ── AEO definicija — citat-spremni uvod ── */
.def-lead{
  font-size:clamp(17.5px,1.7vw,22px);line-height:1.58;color:var(--txt);
  max-width:820px;
  border-left:2px solid var(--mint);padding-left:22px;
}
.def-lead b,.def-lead strong{color:var(--txt)}

/* ── ritam long-form stranica: smjena pozadina ── */
.sect.alt{background:var(--bg2)}

/* ── Ratgeber hub: cluster sekcije ──
   width:100% ist hier NICHT redundant. Der Elternknoten .sect ist ein
   Spalten-Flexcontainer, und eine automatische Margin in der Querachse
   schaltet das sonst uebliche Strecken (align-self:stretch) ab. Ohne
   feste Breite richtet sich jede Sektion dann nach ihrem eigenen Inhalt:
   gemessen lag "SEO Audit" bei 1066px statt 1225px, weil die Kartentexte
   dort kuerzer sind — die Ueberschrift sass sichtbar eingerueckt.
   Mit width:100% ist die Breite definit, die auto-Margins fallen auf 0,
   und max-width zentriert weiterhin auf breiten Viewports. */
.hub-sec{max-width:1240px;margin:0 auto;width:100%}
.hub-sec + .hub-sec{margin-top:clamp(44px,6vh,70px)}
.hub-sec .hub-h{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.hub-sec .hub-h h2{
  font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:860;
  text-transform:uppercase;font-size:clamp(19px,1.9vw,26px);line-height:1.05;
}
.hub-sec .hub-h .hub-n{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase;
}

/* ── kompaktna CTA varijanta za članke ── */
.cta-final.compact{padding:clamp(26px,3.2vw,44px)}
.cta-final.compact h2{font-size:clamp(24px,3vw,42px)}

/* ── GEO hero: mono chip-red motora ── */
.engine-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.engine-chips span{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;
}
.engine-chips span.on{color:var(--mint);border-color:rgba(59,245,159,.4);background:rgba(59,245,159,.06)}

/* ── GEO signature vizual: „Wie KI Quellen auswählen" tok ── */
.geo-flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  max-width:1060px;counter-reset:gfn;
}
.geo-flow .gf-step{
  position:relative;counter-increment:gfn;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.2vw,30px);margin-right:34px;
}
.geo-flow .gf-step:last-child{margin-right:0}
.geo-flow .gf-step::before{
  content:counter(gfn,decimal-leading-zero);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--mint);
  display:block;margin-bottom:14px;
}
/* mint konektor između koraka */
.geo-flow .gf-step::after{
  content:'';position:absolute;top:50%;left:100%;width:34px;height:1.5px;
  background:linear-gradient(90deg,var(--mint),rgba(59,245,159,.15));
}
.geo-flow .gf-step:last-child::after{display:none}
.geo-flow .gf-step h3{
  font-family:var(--mono);font-weight:700;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt);margin-bottom:8px;line-height:1.4;
}
.geo-flow .gf-step p{color:var(--mut);font-size:12.5px;line-height:1.55}
.geo-flow .gf-step.hl{border-color:rgba(59,245,159,.35);background:linear-gradient(165deg,#0F1512,#0B0E0D)}
@media(max-width:920px){
  .geo-flow{grid-template-columns:1fr;max-width:520px}
  .geo-flow .gf-step{margin-right:0;margin-bottom:30px}
  .geo-flow .gf-step:last-child{margin-bottom:0}
  .geo-flow .gf-step::after{
    top:100%;left:50%;width:1.5px;height:30px;
    background:linear-gradient(180deg,var(--mint),rgba(59,245,159,.15));
  }
}

/* ══════════════════════════════════════════════════════════════
   Krug 2 — Batch B dopune (design-landing): .ref-case (case-study
   kartica: Referenzen + Fallbeispiel na bransama), .cform (kontakt
   forma — VIZUELNI PROTOTIP, backend Faza 4), .person-hero (Ueber uns)
   ══════════════════════════════════════════════════════════════ */

/* ── case-study kartica ── */
.ref-case{
  position:relative;overflow:clip;
  background:var(--panel);border:1px solid rgba(59,245,159,.26);
  border-radius:var(--r);padding:clamp(26px,3vw,44px);
}
.ref-case::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 58% at 92% -8%,rgba(59,245,159,.09),transparent 60%);
}
.ref-case > *{position:relative}
.rc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.rc-chips span{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line2);border-radius:999px;padding:6px 13px;
}
.rc-chips span.on{color:var(--mint);border-color:rgba(59,245,159,.4);background:rgba(59,245,159,.06)}
.rc-kpi{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mint);display:block;margin-bottom:10px;
}
.rc-kpi-line{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,1.8vw,23px);line-height:1.32;letter-spacing:.02em;
  margin-bottom:clamp(20px,2.4vh,28px);max-width:760px;
}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2vw,28px)}
.rc-block{border-top:1px solid var(--line);padding-top:14px}
.rc-block .rc-h{
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px;
}
.rc-block p{color:var(--mut);font-size:14.5px;line-height:1.66}
.rc-block b,.rc-block strong{color:var(--txt);font-weight:600}
.ref-case .rc-note{color:var(--mut);font-size:14px;line-height:1.65;margin-top:clamp(18px,2.4vh,26px);max-width:760px}
.ref-case .v-cta{margin-top:20px}

/* ── kontakt-forma (vizuelni prototip) ── */
.cform{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3vw,40px);max-width:760px;
}
.cform .f-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform .f-field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.cform label{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mut);
}
.cform label .req{color:var(--mint)}
.cform input[type=text],.cform input[type=email],.cform input[type=url],.cform textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;
  color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.5;
  padding:13px 15px;transition:border-color .25s,box-shadow .25s;
}
.cform ::placeholder{color:var(--faint)}
.cform input:focus,.cform textarea:focus{
  outline:none;border-color:rgba(59,245,159,.55);box-shadow:0 0 0 3px rgba(59,245,159,.14);
}
.cform textarea{min-height:150px;resize:vertical}
.f-consent{display:flex;gap:12px;align-items:flex-start;margin:4px 0 24px}
.f-consent input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:2px;
  border:1px solid var(--line2);border-radius:6px;background:var(--bg2);cursor:pointer;
  position:relative;transition:border-color .25s,background .25s;
}
.f-consent input[type=checkbox]:checked{background:var(--mint);border-color:var(--mint)}
.f-consent input[type=checkbox]:checked::after{
  content:'';position:absolute;left:6px;top:3px;width:5px;height:9px;
  border:solid var(--mint-ink);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);
}
.f-consent input[type=checkbox]:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.f-consent label{
  font-family:var(--body);font-size:13.5px;line-height:1.6;color:var(--mut);
  text-transform:none;letter-spacing:0;cursor:pointer;
}
.f-consent a{
  color:var(--mint);text-decoration:underline;text-decoration-color:rgba(59,245,159,.4);
  text-underline-offset:3px;
}
.f-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.cform .f-send{border:0;cursor:pointer;font-family:var(--body)}
.cform .f-after{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-top:16px;
}
/* Form success/error messages (progressive enhancement) */
.form-success,.form-error{
  padding:14px 16px;border-radius:12px;margin-bottom:18px;font-size:15px;line-height:1.5;
}
.form-success{
  background:rgba(11,201,139,.12);color:#0BC98B;border:1px solid rgba(11,201,139,.3);
}
.form-error{
  background:rgba(255,87,87,.12);color:#FF5757;border:1px solid rgba(255,87,87,.3);
}
/* Bei prefers-reduced-motion faellt das Konfetti aus. Ohne Ersatz gaebe es
   dann gar keine Feier — hier eine rein statische Auszeichnung: nur Farbe
   und Haken, kein Bewegungsanteil. Zwei Klassen (0,2,0) schlagen sicher
   jede .cform p Regel (0,1,1). */
.form-success.is-static-celebrate{
  background:rgba(11,201,139,.2);border-color:rgba(59,245,159,.55);
  color:var(--mint);font-weight:600;
}
.form-success.is-static-celebrate::before{
  content:'✓';margin-right:10px;font-weight:700;
}
@media(max-width:640px){.cform .f-row{grid-template-columns:1fr}}

/* ── person layout (Ueber uns #person) ── */
.person-hero{
  display:grid;grid-template-columns:180px 1fr;gap:clamp(24px,3.5vw,48px);
  align-items:start;max-width:920px;
}
.person-hero img{
  width:180px;height:180px;border-radius:24px;
  border:1px solid rgba(59,245,159,.3);object-fit:cover;
}
.person-hero .prose p + p{margin-top:14px}
@media(max-width:640px){
  .person-hero{grid-template-columns:1fr}
  .person-hero img{width:140px;height:140px}
}

/* ── uski ekrani: duge njemacke slozenice u display headinzima
     (npr. "Schlüsseldienste", "Mandatsanbahnung") ne mogu se prelomiti
     bez hifenacije i prave horizontalni overflow na 375px.
     hyphens:auto koristi lang="de" rjecnik; break-word je fallback. ── */
@media(max-width:600px){
  h1.disp,h2.disp,h3{
    overflow-wrap:break-word;
    -webkit-hyphens:auto;hyphens:auto;
  }
  /* code{white-space:nowrap} laesst lange Shopify-Pfade wie
     /collections/badtextilien/products/handtuch-beige auf 375px aus dem
     Viewport laufen und erzeugt horizontales Scrollen der ganzen Seite.
     Auf schmalen Screens darf Inline-Code deshalb umbrechen. */
  code{white-space:normal;overflow-wrap:anywhere}
}

/* ═══ Footer-Kontaktspalte, Geo-Text, Karte · Hero-Claim (PO 2026-07-30) ═══ */
.f-grid ul button{
  background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  font-family:inherit;letter-spacing:normal;
  text-transform:none;transition:color .25s;
}
.f-grid ul button:hover{color:var(--mint)}
.f-grid ul button:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:3px}
.f-geo{margin-top:16px;font-size:12.5px;line-height:1.7;color:var(--faint)}
.f-geo b{color:var(--mut);font-weight:600}
.f-contact li{line-height:1.65}
.f-contact a{display:inline-block}
.f-grid .f-contact a{display:block;min-height:0;align-items:initial}
.f-grid .f-contact li{min-height:0}

.f-hours{display:flex;flex-direction:column;gap:5px;margin-top:6px;color:var(--mut)}
.f-hours span{display:block}
.f-hours b{color:var(--mut);font-weight:400;font-variant-numeric:tabular-nums}
.f-map{
  position:relative;border:1px solid var(--line2);border-radius:12px;
  overflow:hidden;background:rgba(255,255,255,.02);min-height:200px;
}
.f-map iframe{display:block;width:100%;height:100%;min-height:200px;border:0}
.f-map-load{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  width:100%;min-height:200px;padding:18px;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--mut);
  font-family:inherit;transition:background .25s;
}
.f-map-load:hover{background:rgba(59,245,159,.05)}
.f-map-load:focus-visible{outline:2px solid var(--mint);outline-offset:-2px}
.f-map-load svg{width:22px;height:22px;color:var(--mint)}
.f-map-load b{font-size:14px;color:var(--txt);font-weight:600}
.f-map-load span{font-size:11.5px;line-height:1.55;color:var(--faint)}
.f-map-load a{color:var(--mint);text-decoration:underline;text-underline-offset:2px}
.f-map.is-wide,.f-map.is-wide iframe,.f-map.is-wide .f-map-load{min-height:420px}

/* Hero: H1 = Kategorie/Keyword, Claim darunter als <p> im gleichen Font */
.hero-claim{
  margin-top:clamp(14px,1.7vw,22px);max-width:24ch;color:var(--txt);
  font-size:clamp(21px,2.55vw,36px);   /* eine Stufe unter dem H1 — für 1:1 gleich: var(--t-h1) */
}
.hero-kw{
  margin-top:14px;max-width:44ch;color:var(--mut);
  font-size:clamp(14.5px,1.15vw,17px);line-height:1.45;
}
@media(max-width:1040px){
  .hero-copy .hero-claim,.hero-copy .hero-kw{order:1}
}
@media(max-width:600px){
  .hero-claim{font-size:clamp(19px,5.4vw,26px);max-width:100%}
}

/* ═══ Split-Hero mit Search-Console-Beleg (Shopify-Leistungsseite, PO 2026-07-31)
   Links Copy + Micro-Conversion, rechts der GSC-Screenshot als Beweis.
   Loest .hero-compact ab; ganze Sektion muss auf 1440x900 ohne Scrollen
   sichtbar sein, deshalb sind alle Abstaende bewusst knapp gehalten. ═══ */
.sh-hero{
  position:relative;overflow:clip;
  padding:clamp(92px,10.5vh,108px) var(--pad) clamp(36px,5vh,52px);
}
.sh-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 42% at 18% 0%,rgba(59,245,159,.09),transparent 66%);
}
.sh-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);
}
.sh-grid{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,3.4vw,56px);align-items:center;
}

.sh-copy .crumbs{margin-bottom:14px}
.sh-copy h1{
  font-size:clamp(26px,2.75vw,40px);
  line-height:1.02;margin-top:16px;
}
.sh-problem{
  color:var(--mut);margin-top:18px;
  font-size:clamp(15.5px,1.35vw,18px);line-height:1.6;
}
/* Loesungssatz — abgesetzt durch Akzentkante, nicht durch Farbe allein */
.sh-solution{
  margin-top:20px;padding:2px 0 2px 18px;
  border-left:2px solid var(--mint);
  color:var(--txt);font-weight:600;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.55;
}

/* ── Micro-Conversion ── */
.sh-form{margin-top:clamp(20px,2.6vh,26px)}
.sh-form > label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mut);
}
.sh-field{display:flex;gap:10px;flex-wrap:wrap;max-width:600px}
.sh-field input{
  flex:1 1 240px;min-width:0;min-height:52px;
  padding:0 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line2);
  color:var(--txt);font-family:var(--body);font-size:16px;
  transition:border-color .25s;
}
/* --faint waere hier nur 3.75:1 — Platzhalter und Trenner nutzen --mut (7.5:1) */
.sh-field input::placeholder{color:var(--mut);opacity:1}
.sh-field input:focus{outline:2px solid var(--mint);outline-offset:2px;border-color:transparent}
.sh-field input[aria-invalid="true"]{border-color:#FF8A7A}
.sh-btn{
  flex:0 0 auto;min-height:52px;padding:0 24px;border-radius:12px;
  background:var(--grad);color:var(--mint-ink);
  font-family:var(--body);font-weight:700;font-size:15px;
  cursor:pointer;transition:filter .25s;
}
.sh-btn:hover{filter:brightness(1.08)}
/* hidden haelt die Zeile aus dem Fluss; kein Sprung, weil sie unter dem
   Feld sitzt und nur den darunterliegenden Hinweis nach unten schiebt */
.sh-err{
  margin-top:10px;color:#FF8A7A;
  font-size:13.5px;line-height:1.5;
}
.sh-err[hidden]{display:none}
.sh-hint{
  margin-top:10px;color:var(--mut);
  font-size:13px;line-height:1.5;max-width:56ch;
}

/* ── Trust-Strip: eine Zeile, auf Mobil zweizeilig, ohne Layout-Sprung ── */
.sh-trust{
  display:flex;flex-wrap:wrap;align-items:center;
  column-gap:10px;row-gap:4px;
  margin-top:clamp(20px,2.6vh,26px);
  color:var(--mut);font-size:13px;line-height:1.55;
}
.sh-trust li{list-style:none}
.sh-trust li:not(:last-child)::after{content:'·';margin-left:10px;color:var(--mut)}

/* ── Rechte Spalte: Screenshot als Beleg ── */
.sh-proof{margin:0}
.sh-shot{
  position:relative;
  border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:var(--panel);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
/* Badge sitzt in der Chrome-Leiste, nicht auf dem Bild: an der alten
   Position (top:44px) verdeckte er die Kachel "Average position". */
.sh-chrome{
  display:flex;align-items:center;gap:10px;
  padding:7px 8px 7px 12px;min-height:42px;
  background:var(--panel2);border-bottom:1px solid var(--line);
}
.sh-dots{display:flex;gap:6px;flex:none}
.sh-dots i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.sh-shot img{width:100%;height:auto;display:block}
.sh-badge{
  margin-left:auto;
  padding:6px 12px;border-radius:999px;
  background:var(--mint);color:var(--mint-ink);
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;
}
.sh-cap{
  margin-top:12px;color:var(--mut);
  font-size:12.5px;line-height:1.55;
}
.sh-cap b{display:block;margin-top:4px;color:var(--txt);font-weight:600}

@media(max-width:900px){
  .sh-grid{grid-template-columns:1fr;gap:32px}
  .sh-proof{order:2}
  .sh-copy{order:1}
}
@media(max-width:600px){
  .sh-badge{font-size:10.5px;padding:5px 10px}
  .sh-field input,.sh-btn{flex:1 1 100%}
}

/* ═══ Preis-Sektionen auf den Leistungsseiten (PO 2026-07-30) ═══ */
.pr-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,22px);
  align-items:stretch;
}
/* Vier Stufen (SEO-Audit): 2x2 statt 3+1, damit keine einzelne Karte
   in einer eigenen Reihe haengt. */
.pr-grid.is-four{grid-template-columns:repeat(2,minmax(0,1fr));max-width:900px;margin-inline:auto}
.pr-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,32px);
  border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(165deg,#0E1311,#0A0D0C);
  transition:transform .3s cubic-bezier(.22,.8,.3,1),border-color .3s;
}
.pr-card:hover{transform:translateY(-4px);border-color:var(--line2)}
.pr-card.is-best{
  border-color:rgba(59,245,159,.42);
  background:linear-gradient(165deg,#0F1714,#0B0F0D);
  box-shadow:0 0 0 1px rgba(59,245,159,.10),0 22px 60px -30px rgba(59,245,159,.45);
}
.pr-badge{
  position:absolute;top:-11px;left:clamp(24px,2.4vw,32px);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#04120C;background:var(--mint);padding:5px 11px;border-radius:100px;white-space:nowrap;
}
.pr-card .idx{
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  color:var(--faint);text-transform:uppercase;
}
.pr-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:840;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.02;
  font-size:clamp(21px,1.9vw,27px);margin-top:12px;
}
.pr-for{color:var(--mut);font-size:13.5px;line-height:1.6;margin-top:10px;min-height:3.2em}
.pr-price{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.pr-price b{
  font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:860;
  font-size:clamp(29px,2.9vw,40px);line-height:1;color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.is-best .pr-price b{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.pr-price span{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.pr-list{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.pr-list li{
  position:relative;padding-left:24px;
  color:var(--mut);font-size:13.5px;line-height:1.6;
}
.pr-list li::before{
  content:'';position:absolute;left:2px;top:.52em;
  width:9px;height:5px;border-left:1.8px solid var(--mint);border-bottom:1.8px solid var(--mint);
  transform:rotate(-45deg);
}
.pr-list li b{color:var(--txt);font-weight:600}
.pr-cta{margin-top:24px;width:100%;justify-content:center;text-align:center}
.is-best .pr-cta{border-color:rgba(59,245,159,.45);color:var(--txt)}
.pr-note{
  max-width:820px;margin:clamp(26px,3.4vh,38px) auto 0;
  font-size:12.5px;line-height:1.7;color:var(--faint);text-align:center;
}
.pr-note b{color:var(--mut);font-weight:600}
@media(max-width:980px){
  .pr-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .pr-for{min-height:0}
  .pr-card.is-best{order:-1}
}

/* ── 12 Shopify-Probleme (.p12-*) ─────────────────────────────
   Ersetzt die Logo-Wand direkt unter dem Hero. Kein Icon, kein
   Bild — die Glaubwuerdigkeit traegt hier ausschliesslich der Text. */
.p12-intro{max-width:720px;margin:0 auto;text-align:center}
.p12-intro h2{font-size:clamp(30px,4.2vw,60px)}
.p12-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.p12-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(40px,6vh,68px);
  align-items:stretch;
}
.p12-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.2vw,34px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);
}
/* Nummer ist rein dekorativ (aria-hidden). Ab 28px gilt die
   Large-Text-Schwelle 3:1 — --faint liegt bei 3.75:1. */
.p12-n{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(28px,3vw,38px);line-height:1;
  letter-spacing:-.02em;color:var(--faint);
}
.p12-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(18px,1.5vw,21.5px);line-height:1.18;
  margin-top:14px;
}
.p12-card > p:not(.p12-fix){
  color:var(--mut);margin-top:13px;margin-bottom:20px;
  font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.64;
}
.p12-card > p code{font-size:.9em}
/* margin-top:auto schiebt die Loesungszeile an den Karten-Unterrand,
   damit sie in einer Reihe buendig steht — egal wie lang der
   Problemtext ist. Der 20px-Mindestabstand kommt aus dem
   margin-bottom des Absatzes darueber, nicht aus einem
   +-Selektor: der haette hoehere Spezifitaet als auto. */
.p12-card > p.p12-fix{
  margin-top:auto;padding:14px 16px;
  background:rgba(59,245,159,.055);
  border-left:2px solid var(--mint);border-radius:0 10px 10px 0;
  color:var(--txt);font-size:clamp(14px,1.15vw,15px);line-height:1.6;
}
.p12-fix b{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.p12-close{max-width:640px;margin:clamp(44px,6.5vh,72px) auto 0;text-align:center}
.p12-close p{
  color:var(--mut);font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.p12-cta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px);
}
.p12-link{
  color:var(--mut);font-size:14.5px;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line2);transition:color .25s;
}
.p12-link:hover{color:var(--mint);text-decoration-color:var(--mint)}
@media(max-width:900px){
  .p12-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
}
/* Sprungziel aus Sektion 3: der fixierte Header (#hd) wuerde die
   Kartenoberkante sonst verdecken. */
.p12-card{scroll-margin-top:96px}

/* ── Wo steht Ihr Shop? (.wo-*) ───────────────────────────────
   Qualifizierungsschicht zwischen Problemliste und Leistungen.
   Bewusst keine Nummern und keine Icons — die nummerierte
   Bildsprache gehoert Sektion 2. Keine Karte ist hervorgehoben. */
.wo-intro{max-width:720px;margin:0 auto;text-align:center}
.wo-intro h2{font-size:clamp(30px,4.2vw,60px)}
.wo-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.wo-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(40px,6vh,68px);
  align-items:stretch;
}
.wo-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.2vw,34px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);
}
.wo-eyebrow{
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mint);
}
.wo-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(18px,1.5vw,21.5px);line-height:1.18;
  margin-top:13px;
}
/* Eigene Klassen statt Kindselektoren: ein .wo-card > p haette hoehere
   Spezifitaet als .wo-step und wuerde dessen margin-top:auto killen. */
.wo-card .wo-body{
  color:var(--mut);margin-top:13px;margin-bottom:20px;
  font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.64;
}
/* margin-top:auto schiebt Trenner + Erster Schritt + Verweis als Block
   an den Kartenunterrand, damit die Trenner einer Reihe fluchten. */
.wo-card .wo-step{
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--txt);font-size:clamp(14px,1.15vw,15px);line-height:1.6;
}
.wo-card .wo-step b{color:var(--mint);font-weight:700}
.wo-card .wo-ref{
  margin-top:12px;color:var(--mut);
  font-size:13px;line-height:1.6;
}
.wo-card .wo-ref b{color:var(--mut);font-weight:600}
.wo-card .wo-ref a{
  color:var(--txt);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line2);
  transition:color .2s,text-decoration-color .2s;
}
.wo-card .wo-ref a:hover{color:var(--mint);text-decoration-color:var(--mint)}
.wo-fallback{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.wo-fallback p{color:var(--mut);font-size:14.5px;line-height:1.65}
.wo-fallback .pill-cta{margin-top:clamp(22px,3vh,28px)}
@media(max-width:900px){
  .wo-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
}

/* ── Leistungen (.lst-*) ──────────────────────────────────────
   Desire-Stufe ohne Fallstudien: die Konkretheit der Artefakte
   traegt, nicht Behauptungen. Jeder Block endet mit "Was Sie
   bekommen". Keine Icons, keine Logos, keine Preise. */
.lst-intro{max-width:720px;margin:0 auto;text-align:center}
.lst-intro h2{font-size:clamp(30px,4.2vw,60px)}
.lst-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.lst-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);
  margin-top:clamp(40px,6vh,68px);
  align-items:stretch;
}
.lst-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.2vw,34px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);
}
.lst-card h3,.lst-geo h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(18px,1.5vw,21.5px);line-height:1.18;
}
.lst-body{
  color:var(--mut);margin-top:13px;
  font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.64;
}
.lst-doL{
  display:block;margin-top:20px;
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.lst-do{list-style:none;margin-top:12px}
.lst-do li{
  position:relative;padding-left:16px;
  color:var(--mut);font-size:14px;line-height:1.55;
}
.lst-do li + li{margin-top:7px}
/* typografischer Strich als Marker — bewusst kein Icon */
.lst-do li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--mint);
}
/* margin-top:auto haelt Trenner und Artefaktzeile am Kartenunterrand. */
.lst-get{
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--txt);font-size:clamp(14px,1.15vw,15px);line-height:1.6;
}
.lst-card .lst-get{margin-top:auto}
.lst-get b{color:var(--mint);font-weight:700}
.lst-do + .lst-get{margin-top:22px}

/* GEO — herausgehoben durch Rahmen und Tint, nicht als fuenfte Karte:
   volle Breite, eigener Hintergrund, Liste zweispaltig. */
.lst-geo{
  position:relative;overflow:hidden;
  margin-top:clamp(20px,2.4vw,28px);
  padding:clamp(28px,3.2vw,46px);
  border:1px solid rgba(59,245,159,.32);
  border-radius:var(--r);
  background:
    radial-gradient(78% 130% at 0% 0%,rgba(59,245,159,.10),transparent 64%),
    var(--panel2);
}
/* Dekorative Netzwerkgrafik, rein visuell — deshalb als Hintergrund und
   nicht als <img>: kein alt noetig, kein CLS, kein LCP-Wettbewerb.
   Das PNG wurde freigestellt (Schwarz -> transparent) und gespiegelt,
   damit das Netz rechts sitzt, wo der auf 61ch begrenzte Text nicht
   hinreicht. Erste Zeile ist der Fallback fuer Browser ohne image-set. */
.lst-geo::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url(/assets/geo-netzwerk-1200.webp);
  background-image:image-set(
    url(/assets/geo-netzwerk-1200.avif) type("image/avif"),
    url(/assets/geo-netzwerk-1200.webp) type("image/webp"));
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
  /* Das Netz ist zu weitlaeufig, um rechts neben dem Text zu bleiben —
     die zweispaltige Liste laeuft ohnehin ueber die volle Breite.
     Deckkraft ist deshalb gemessen, nicht geschaetzt: gegen den hellsten
     Punkt der Grafik ergibt .28 nur 3.07:1 und .18 erst 4.27:1 fuer
     --mut. .12 liefert 5.14:1 und haelt damit Abstand zu den 4.5:1. */
  opacity:.12;
}
.lst-geo > *{position:relative}
.lst-geo h3{margin-top:12px;font-size:clamp(20px,1.9vw,27px)}
/* 74ch ergaben gemessen 88 Zeichen pro Zeile — die ch-Einheit misst die
   Breite der "0", die bei Space Grotesk schmaler ist als der
   Durchschnittsbuchstabe. 61ch landet bei rund 72. */
.lst-geo .lst-body{max-width:61ch;font-size:clamp(15px,1.25vw,16.5px)}
.lst-geo .lst-do{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,52px);row-gap:8px;
}
.lst-geo .lst-do li + li{margin-top:0}
.lst-geo .lst-get{
  margin-top:24px;max-width:61ch;
  border-top-color:rgba(59,245,159,.24);
}
.lst-close{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.lst-close p{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.lst-cta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px);
}
/* ── Preise (.pk-*) ───────────────────────────────────────────
   Groesster Wettbewerbsvorteil auf dieser SERP: niemand nennt Preise.
   Deshalb ist hier ALLES echter Text — kein Bild, kein PDF, nichts
   hinter einem Formular. Keine Karte ist hervorgehoben, es gibt keine
   Rabatte, Countdowns oder durchgestrichenen Preise. */
.pk-intro{max-width:720px;margin:0 auto;text-align:center}
.pk-intro h2{font-size:clamp(30px,4.2vw,60px)}
.pk-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
/* Der Audit steht ueber den Karten und in voller Breite: er ist einmalig
   statt monatlich und hat vier nach URL-Zahl gestaffelte Preise, die in
   eine einzelne Preiszeile nicht passen. */
.pk-audit{
  margin-top:clamp(40px,6vh,68px);
  padding:clamp(26px,2.6vw,38px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,48px);
}
.pk-tiers{list-style:none;margin-top:16px}
.pk-tiers li{
  display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;
  padding:11px 0;border-top:1px solid var(--line);
}
.pk-tiers li:first-child{border-top:0;padding-top:0}
.pk-tiers li b{color:var(--mut);font-weight:500;font-size:14px}
.pk-tiers li span{
  color:var(--txt);font-weight:700;font-size:15px;
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  text-align:right;
}
.pk-tiers li.is-free span{color:var(--mint)}
.pk-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.5vw,20px);
  margin-top:clamp(18px,2vw,24px);align-items:stretch;
}
.pk-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,2vw,32px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);
}
.pk-card h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(18px,1.45vw,21px);line-height:1.18;
}
.pk-for{color:var(--mut);margin-top:11px;font-size:14px;line-height:1.55}
.pk-price{
  margin-top:20px;
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:820;letter-spacing:-.02em;
  font-size:clamp(30px,3vw,42px);line-height:1;
  /* overflow-wrap, damit lange Platzhalter wie [PREIS_WACHSTUM] auf
     380px umbrechen statt die Karte aufzuspannen. */
  overflow-wrap:anywhere;
}
.pk-price span{
  display:block;margin-top:8px;
  font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:0;color:var(--mut);
}
.pk-lab{
  display:block;margin-top:22px;padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.pk-list{list-style:none;margin-top:13px}
.pk-list li{
  position:relative;padding-left:16px;
  color:var(--mut);font-size:13.5px;line-height:1.55;
}
.pk-list li + li{margin-top:7px}
.pk-list li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--mint);
}
.pk-note{
  margin-top:16px;color:var(--txt);
  font-size:13.5px;line-height:1.58;
}
.pk-note b{color:var(--mint);font-weight:700}
.pk-note + .pk-note{margin-top:10px}
.pk-cta{
  margin-top:auto;padding-top:22px;
  display:flex;justify-content:center;
}
.pk-cta .pill-ghost{width:100%;justify-content:center;text-align:center}
.pk-projekt{
  margin-top:clamp(18px,2vw,24px);
  padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--mut);font-size:clamp(14px,1.2vw,15.5px);line-height:1.62;
}
.pk-projekt b{color:var(--txt);font-weight:600}
.pk-duo{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);margin-top:clamp(18px,2vw,24px);
}
.pk-duo > div{
  padding:clamp(24px,2.2vw,32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.pk-duo h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;font-size:clamp(17px,1.4vw,20px);line-height:1.2;
}
.pk-duo > div > p{color:var(--mut);margin-top:10px;font-size:13.5px;line-height:1.55}
.pk-duo .pk-list{margin-top:16px}
/* Sprungziel aus dem FAQ; Offset gegen den fixierten Header. */
.pk-terms{
  scroll-margin-top:96px;
  margin-top:clamp(18px,2vw,24px);
  padding:clamp(26px,2.8vw,38px);
  border:1px solid rgba(59,245,159,.32);border-radius:var(--r);
  background:
    radial-gradient(70% 130% at 100% 0%,rgba(59,245,159,.10),transparent 64%),
    var(--panel2);
}
.pk-terms h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;font-size:clamp(19px,1.7vw,25px);line-height:1.18;
}
.pk-terms .pk-list{
  margin-top:18px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(24px,3vw,52px);row-gap:9px;
}
.pk-terms .pk-list li{color:var(--txt);font-size:14.5px}
.pk-terms .pk-list li + li{margin-top:0}
.pk-close{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.pk-close p{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.pk-final{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px);
}
/* ── Vergleich (.vg-*) ────────────────────────────────────────
   Die Tabelle ist das Asset: echtes <table> mit thead/th scope/tbody,
   damit Google und KI-Suchen sie zitieren koennen. Spalte 2 (wir) ist
   bewusst NICHT hervorgehoben — die Ehrlichkeit traegt nur, wenn die
   Tabelle nicht sichtbar Partei ergreift. */
.vg-intro{max-width:720px;margin:0 auto;text-align:center}
.vg-intro h2{font-size:clamp(30px,4.2vw,60px)}
.vg-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.vg-wrap{
  margin-top:clamp(40px,6vh,68px);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;
}
.vg-table{width:100%;border-collapse:collapse;table-layout:fixed}
.vg-table th,.vg-table td{
  padding:15px clamp(12px,1.1vw,18px);
  text-align:left;vertical-align:top;
  font-size:clamp(13px,1.05vw,14px);line-height:1.55;
}
.vg-table thead th{
  background:var(--panel2);
  border-bottom:1px solid var(--line2);
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.004em;
  font-size:clamp(13.5px,1.15vw,15.5px);line-height:1.25;
  color:var(--txt);
}
.vg-table tbody tr + tr th,.vg-table tbody tr + tr td{border-top:1px solid var(--line)}
.vg-table tbody th{
  width:19%;color:var(--txt);font-weight:600;
  background:rgba(255,255,255,.018);
}
.vg-table tbody td{color:var(--mut)}
/* sr-only: bleibt im Accessibility-Baum, wenn die mobile Ansicht die
   Zeilenlabels visuell durch data-label ersetzt. */
.vg-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.vg-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.6vw,22px);margin-top:clamp(18px,2vw,24px);
}
.vg-grid > div{
  padding:clamp(24px,2.2vw,32px);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.vg-grid h3,.vg-risk h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(17px,1.4vw,20px);line-height:1.2;
}
.vg-grid p{color:var(--mut);margin-top:12px;font-size:14.5px;line-height:1.62}
.vg-risk{
  margin-top:clamp(18px,2vw,24px);
  padding:clamp(26px,2.8vw,40px);
  border:1px solid rgba(59,245,159,.32);border-radius:var(--r);
  background:
    radial-gradient(70% 130% at 0% 0%,rgba(59,245,159,.10),transparent 64%),
    var(--panel2);
}
.vg-risk h3{font-size:clamp(19px,1.7vw,25px)}
.vg-risk > p{color:var(--mut);margin-top:13px;font-size:clamp(15px,1.25vw,16.5px);line-height:1.64;max-width:61ch}
.vg-risk ul{list-style:none;margin-top:20px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,52px);row-gap:10px}
.vg-risk li{position:relative;padding-left:16px;color:var(--txt);font-size:14.5px;line-height:1.58}
.vg-risk li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--mint)}
.vg-close{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.vg-close p{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.vg-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px)}
@media(max-width:900px){
  .vg-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .vg-risk{max-width:620px;margin-left:auto;margin-right:auto}
  .vg-risk ul{grid-template-columns:1fr;row-gap:9px}
}
/* Mobile: KEIN overflow-x. Die Tabelle wird zu vier Bloecken, einer je
   Option, mit wiederholten Zeilenlabels. display:contents hebt die
   Zellen in den Flex-Container, gleiche order-Werte behalten die
   DOM-Reihenfolge — deshalb reichen acht Regeln statt 32. */
@media(max-width:820px){
  .vg-wrap{border:0;background:none;overflow:visible}
  .vg-table{display:flex;flex-direction:column}
  .vg-table thead,.vg-table tbody,.vg-table tr{display:contents}
  .vg-table thead th:first-child{display:none}
  .vg-table tbody th{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;padding:0;border:0;
  }
  .vg-table thead th{
    margin-top:18px;padding:14px 18px;
    background:var(--panel2);
    border:1px solid var(--line2);border-radius:14px 14px 0 0;
    font-size:16px;
  }
  .vg-table tbody td{
    padding:13px 18px;
    background:var(--panel);
    border:1px solid var(--line);border-top:0;
    font-size:14px;
  }
  .vg-table tbody tr:last-child td{border-radius:0 0 14px 14px}
  .vg-table tbody tr + tr td{border-top:0}
  .vg-table td::before{
    content:attr(data-label);display:block;margin-bottom:4px;
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--mint);
  }
  .vg-table thead th:nth-child(2){order:0}
  .vg-table tbody td:nth-child(2){order:1}
  .vg-table thead th:nth-child(3){order:2}
  .vg-table tbody td:nth-child(3){order:3}
  .vg-table thead th:nth-child(4){order:4}
  .vg-table tbody td:nth-child(4){order:5}
  .vg-table thead th:nth-child(5){order:6}
  .vg-table tbody td:nth-child(5){order:7}
}

/* ── Ablauf (.ab-*) ───────────────────────────────────────────
   Schritte sind ein echtes <ol> — die Reihenfolge ist inhaltlich,
   nicht dekorativ. Nichts ist eingeklappt oder per Scroll versteckt:
   der ganze Ablauf steht im ersten HTML. */
.ab-intro{max-width:720px;margin:0 auto;text-align:center}
.ab-intro h2{font-size:clamp(30px,4.2vw,60px)}
.ab-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
/* Zickzack-Zeitstrahl: Karten wechseln die Seite, dazwischen laeuft
   eine gestrichelte Linie. Bewusst Grid mit expliziten Zeilen statt
   absoluter Positionierung — die Schritte sind unterschiedlich lang,
   feste Pixel-Tops wuerden bei jedem Textwechsel brechen. */
.ab-steps{
  position:relative;list-style:none;counter-reset:abs;
  margin:clamp(40px,6vh,68px) auto 0;max-width:1000px;
  display:grid;
  grid-template-columns:1fr clamp(56px,5vw,72px) 1fr;
  row-gap:clamp(20px,2.6vh,30px);
}
/* Die Linie: animierter Verlauf statt SVG — kein Koordinaten-Rechnen,
   und sie passt sich jeder Inhaltshoehe automatisch an. */
.ab-steps::before{
  content:'';position:absolute;top:12px;bottom:12px;
  left:50%;transform:translateX(-50%);width:2px;
  background:repeating-linear-gradient(180deg,
    rgba(59,245,159,.55) 0 8px, transparent 8px 18px);
  background-size:2px 18px;
  animation:ab-flow 1.4s linear infinite;
}
@keyframes ab-flow{to{background-position-y:18px}}
.ab-steps li{
  position:relative;counter-increment:abs;
  padding:clamp(20px,2vw,26px) clamp(20px,2vw,28px);
  background:var(--panel);border:1px solid var(--line);
  border-radius:16px;
  /* leichte Neigung, die beim Hover verschwindet */
  transform:rotate(var(--tilt,0deg));
  transition:transform .45s cubic-bezier(.22,1,.36,1),
             border-color .45s, box-shadow .45s;
}
.ab-steps li:hover{
  transform:rotate(0deg) translateY(-3px);
  border-color:rgba(59,245,159,.34);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.85);
}
.ab-steps li:nth-child(odd){grid-column:1;--tilt:-.7deg}
.ab-steps li:nth-child(even){grid-column:3;--tilt:.7deg}
.ab-steps li:nth-child(1){grid-row:1}
.ab-steps li:nth-child(2){grid-row:2}
.ab-steps li:nth-child(3){grid-row:3}
.ab-steps li:nth-child(4){grid-row:4}
.ab-steps li:nth-child(5){grid-row:5}
.ab-steps li:nth-child(6){grid-row:6}
/* Nummer sitzt auf der Linie, nicht in der Karte */
.ab-steps li::before{
  content:counter(abs,decimal-leading-zero);
  position:absolute;top:22px;
  width:clamp(34px,3vw,40px);height:clamp(34px,3vw,40px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--panel2);border:1px solid rgba(59,245,159,.42);
  color:var(--mint);font-family:var(--mono);font-weight:700;
  font-size:clamp(11px,.95vw,12.5px);letter-spacing:.02em;
  transform:rotate(calc(var(--tilt,0deg) * -1));
  z-index:1;
}
.ab-steps li:nth-child(odd)::before{right:calc(-1 * (clamp(56px,5vw,72px) + clamp(34px,3vw,40px)) / 2)}
.ab-steps li:nth-child(even)::before{left:calc(-1 * (clamp(56px,5vw,72px) + clamp(34px,3vw,40px)) / 2)}
/* kurzer Stich von der Karte zur Mittellinie */
.ab-steps li::after{
  content:'';position:absolute;top:calc(22px + clamp(34px,3vw,40px) / 2);
  width:calc(clamp(56px,5vw,72px) / 2 - clamp(34px,3vw,40px) / 2);
  height:1px;background:rgba(59,245,159,.34);
}
.ab-steps li:nth-child(odd)::after{right:calc(-1 * (clamp(56px,5vw,72px) / 2 - clamp(34px,3vw,40px) / 2))}
.ab-steps li:nth-child(even)::after{left:calc(-1 * (clamp(56px,5vw,72px) / 2 - clamp(34px,3vw,40px) / 2))}
@media(prefers-reduced-motion:reduce){
  .ab-steps::before{animation:none}
  .ab-steps li{transform:none;transition:none}
  .ab-steps li:hover{transform:none}
  .ab-steps li::before{transform:none}
}
.ab-when{
  display:inline-block;
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.ab-steps h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(18px,1.55vw,22px);line-height:1.18;margin-top:9px;
}
.ab-body{color:var(--mut);margin-top:12px;font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.64;max-width:64ch}
.ab-do{
  margin-top:15px;padding:12px 16px;
  background:rgba(59,245,159,.05);
  border-left:2px solid var(--mint);border-radius:0 10px 10px 0;
  color:var(--txt);font-size:14px;line-height:1.58;max-width:64ch;
}
.ab-do b{color:var(--mint);font-weight:700}
/* Zeitleiste: reines HTML, kein Bild und kein Canvas — sie ist eines
   der staerksten Zitat-Ziele fuer "wie lange dauert Shopify SEO". */
.ab-time{
  margin-top:clamp(40px,5.5vh,64px);
  padding:clamp(26px,2.8vw,40px);
  border:1px solid rgba(59,245,159,.32);border-radius:var(--r);
  background:
    radial-gradient(70% 130% at 100% 0%,rgba(59,245,159,.10),transparent 64%),
    var(--panel2);
}
.ab-time h3{
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;font-size:clamp(19px,1.7vw,25px);line-height:1.18;
}
.ab-time > p{color:var(--mut);margin-top:13px;font-size:clamp(15px,1.25vw,16.5px);line-height:1.64;max-width:64ch}
.ab-scale{
  display:flex;justify-content:space-between;
  margin-top:clamp(24px,3vh,32px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);
}
/* Segmentbreiten sind proportional zur Dauer: 2+2+2+6 = 12 Monate. */
.ab-bar{
  list-style:none;display:grid;
  grid-template-columns:2fr 2fr 2fr 6fr;
  gap:clamp(10px,1vw,14px);margin-top:10px;
}
.ab-bar li{
  padding:14px 0 0;
  border-top:3px solid var(--mint);
  color:var(--mut);font-size:13.5px;line-height:1.55;
}
.ab-bar li:nth-child(1){border-top-color:rgba(59,245,159,.32)}
.ab-bar li:nth-child(2){border-top-color:rgba(59,245,159,.52)}
.ab-bar li:nth-child(3){border-top-color:rgba(59,245,159,.74)}
.ab-bar li:nth-child(4){border-top-color:var(--mint)}
.ab-bar b{
  display:block;margin-bottom:6px;color:var(--txt);
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;font-size:14.5px;letter-spacing:-.004em;
}
.ab-time .ab-note{
  margin-top:clamp(22px,2.6vh,30px);padding-top:20px;
  border-top:1px solid rgba(59,245,159,.22);
  color:var(--mut);font-size:14.5px;line-height:1.62;max-width:64ch;
}
.ab-close{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.ab-close p{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.ab-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px)}
@media(max-width:820px){
  /* Einspaltig: Linie faellt weg, Neigung faellt weg, Nummerierung bleibt. */
  .ab-steps{grid-template-columns:1fr;row-gap:14px;max-width:620px}
  .ab-steps::before{display:none}
  .ab-steps li,
  .ab-steps li:nth-child(odd),
  .ab-steps li:nth-child(even){grid-column:1;--tilt:0deg;transform:none}
  .ab-steps li:hover{transform:none}
  .ab-steps li::after{display:none}
  .ab-steps li::before{position:static;margin-bottom:12px;transform:none}
  .ab-bar{grid-template-columns:1fr;gap:16px}
  .ab-scale{display:none}
}

/* ── Person (.pe-*) ───────────────────────────────────────────
   E-E-A-T. Bewusst in der Ich-Form, waehrend die uebrige Seite "wir"
   sagt — das ist Absicht und wird nicht angeglichen.
   Nur eine H2, die beiden Bloecke tragen ein <strong>-Label statt
   einer Ueberschrift, damit die Gliederung sauber bleibt. */
.pe-grid{
  display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(28px,3.4vw,56px);align-items:start;
}
.pe-photo{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line2);background:var(--panel);
  box-shadow:0 24px 60px -28px rgba(0,0,0,.8);
}
.pe-photo img{width:100%;height:auto;display:block}
.pe-cap{
  margin-top:12px;color:var(--mut);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.6;
}
.pe-col h2{font-size:clamp(28px,3.8vw,52px)}
/* Selektoren mit Klasse UND Element, sonst schlaegt .pe-col > p die
   Sonderregeln fuer Name und Schlusszeile — dieselbe Falle wie bei
   .p12-fix und .wo-step. */
.pe-col > p.pe-name{
  margin-top:16px;color:var(--txt);
  font-family:var(--disp);font-variation-settings:'wdth' 100;
  font-weight:760;letter-spacing:-.008em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.3;
}
.pe-col > p{
  color:var(--mut);margin-top:15px;
  font-size:clamp(15px,1.25vw,16.5px);line-height:1.66;
}
.pe-block{
  margin-top:clamp(24px,3vh,32px);
  padding:clamp(20px,2vw,26px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
}
.pe-block strong{
  display:block;
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.pe-block > p{color:var(--mut);margin-top:9px;font-size:14px;line-height:1.58}
.pe-block ul{list-style:none;margin-top:14px}
.pe-block li{
  position:relative;padding-left:16px;
  color:var(--mut);font-size:14px;line-height:1.58;
}
.pe-block li + li{margin-top:8px}
.pe-block li::before{
  content:'';position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--mint);
}
.pe-contact{
  list-style:none;margin-top:clamp(24px,3vh,32px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px clamp(20px,2.4vw,36px);
}
.pe-contact li{font-size:14.5px;line-height:1.55}
.pe-contact b{
  display:block;margin-bottom:3px;color:var(--mut);
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
}
.pe-contact a{
  color:var(--txt);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line2);
  transition:color .2s,text-decoration-color .2s;overflow-wrap:anywhere;
}
.pe-contact a:hover{color:var(--mint);text-decoration-color:var(--mint)}
.pe-contact span{color:var(--txt)}
.pe-col > p.pe-note{margin-top:20px;color:var(--mut);font-size:13.5px;line-height:1.6}
@media(max-width:768px){
  /* Foto zuerst, aber verkleinert — sonst schiebt es den Text zu weit
     nach unten, bevor ueberhaupt etwas gesagt wurde. */
  .pe-grid{grid-template-columns:1fr;gap:26px}
  .pe-photo{max-width:280px}
  .pe-contact{grid-template-columns:1fr;gap:14px}
}

/* ── FAQ (.fq2-*) ─────────────────────────────────────────────
   Native <details>/<summary>, kein JavaScript-Toggle. Jede Antwort
   steht im ausgelieferten HTML — nachgeladener Text ist fuer Crawler
   unsichtbar und macht das FAQPage-Schema wertlos.
   Die Fragen sind KEINE Ueberschriften: sie stehen im summary, die
   Gliederung traegt allein die H3 pro Gruppe. */
.fq2-intro{max-width:720px;margin:0 auto;text-align:center}
.fq2-intro h2{font-size:clamp(30px,4.2vw,60px)}
.fq2-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.fq2-list{max-width:800px;margin:clamp(40px,6vh,68px) auto 0}
.fq2-h{
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mint);
  margin-top:clamp(34px,4.6vh,48px);margin-bottom:14px;
}
.fq2-h:first-child{margin-top:0}
.fq2{
  border:1px solid var(--line);border-radius:14px;
  background:var(--panel);
}
.fq2 + .fq2{margin-top:10px}
.fq2 summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px clamp(16px,1.6vw,22px);
  cursor:pointer;list-style:none;
  color:var(--txt);font-weight:600;
  font-size:clamp(15px,1.25vw,16.5px);line-height:1.45;
}
.fq2 summary::-webkit-details-marker{display:none}
/* Plus/Minus aus zwei Strichen — kein Icon-Font, kein SVG */
.fq2 summary::after{
  content:'';flex:none;margin-left:auto;
  width:13px;height:13px;margin-top:.3em;
  background:
    linear-gradient(var(--mint),var(--mint)) center/13px 1.6px no-repeat,
    linear-gradient(var(--mint),var(--mint)) center/1.6px 13px no-repeat;
  transition:transform .25s,opacity .25s;
}
.fq2[open] summary::after{transform:rotate(135deg)}
.fq2 summary:hover{color:var(--mint)}
.fq2 summary:focus-visible{outline:2px solid var(--mint);outline-offset:-2px;border-radius:14px}
.fq2-a{
  padding:0 clamp(16px,1.6vw,22px) 18px;
  border-top:1px solid var(--line);margin-top:-1px;
}
.fq2-a p{
  color:var(--mut);padding-top:15px;
  font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.68;
}
.fq2-close{max-width:640px;margin:clamp(40px,6vh,64px) auto 0;text-align:center}
.fq2-close p{color:var(--mut);font-size:clamp(15px,1.3vw,17px);line-height:1.66}
.fq2-cta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 24px;margin-top:clamp(24px,3.2vh,32px);
}

/* ── Finaler CTA (.fin-*) ─────────────────────────────────────
   Vier gleichwertige Einstiege — keiner ist als primaer gestylt.
   Keine Dringlichkeitsmechanik: kein Countdown, keine Restplaetze.
   Die Verfuegbarkeitszeile nennt eine echte Zahl oder faellt weg. */
.fin-intro{max-width:640px;margin:0 auto;text-align:center}
.fin-intro h2{font-size:clamp(30px,4.2vw,58px)}
.fin-intro p{
  color:var(--mut);margin-top:22px;
  font-size:clamp(15.5px,1.3vw,17.5px);line-height:1.66;
}
.fin-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.4vw,18px);
  margin-top:clamp(40px,6vh,68px);align-items:stretch;
}
.fin-card{
  display:flex;flex-direction:column;
  padding:clamp(20px,1.9vw,26px);
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
}
.fin-lab{
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--mint);
}
.fin-card > p{
  color:var(--mut);margin-top:11px;
  font-size:13.5px;line-height:1.55;
}
/* min-height 48px: eigenstaendige Aktion in einer Karte, kein Inline-Link
   im Fliesstext — hier gilt die Mindestgroesse fuer Tap-Targets. */
.fin-act{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:flex-end;min-height:48px;
  color:var(--txt);font-weight:600;font-size:15px;line-height:1.4;
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--line2);overflow-wrap:anywhere;
  transition:color .2s,text-decoration-color .2s;
}
.fin-act:hover{color:var(--mint);text-decoration-color:var(--mint)}
/* Sichtbarer Platzhalter, bewusst nicht als Link gestylt — er fuehrt
   noch nirgendwohin und darf nicht klickbar aussehen. --mut statt
   --faint, damit auch der Platzhalter ueber 4.5:1 bleibt. */
.fin-todo{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:flex-end;min-height:48px;
  color:var(--mut);font-family:var(--mono);font-size:12px;
  line-height:1.5;overflow-wrap:anywhere;
}
.fin-form{margin-top:auto;padding-top:18px}
.fin-form .sh-field{gap:8px}
.fin-form .sh-field input,.fin-form .sh-btn{flex:1 1 100%;min-height:48px}
.fin-form .sh-btn{padding:0 18px;font-size:14px}
.fin-form .sh-hint{font-size:12px;margin-top:8px}
.fin-avail{
  max-width:760px;margin:clamp(28px,3.4vh,38px) auto 0;text-align:center;
  padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,26px);
  border:1px solid rgba(59,245,159,.32);border-radius:14px;
  background:rgba(59,245,159,.05);
  color:var(--txt);font-size:clamp(14.5px,1.2vw,15.5px);line-height:1.6;
}
.fin-avail b{color:var(--mint);font-weight:700}
.fin-note{
  max-width:640px;margin:clamp(22px,2.6vh,30px) auto 0;text-align:center;
  color:var(--mut);font-size:13px;line-height:1.62;
}
@media(max-width:980px){
  .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .fin-grid{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
}

/* Kontextlinks in laufenden Text der Sektionen. Kein eigener Link-Block:
   die Verweise stehen dort, wo das Thema aufkommt. */
.p12-fix a,.lst-do a,.wo-step a{
  color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(59,245,159,.5);
  transition:color .2s,text-decoration-color .2s;
}
.p12-fix a:hover,.lst-do a:hover,.wo-step a:hover{
  color:var(--mint);text-decoration-color:var(--mint);
}

.pk-legal{
  max-width:900px;margin:clamp(22px,2.6vw,30px) auto 0;
  color:var(--faint);font-size:12.5px;line-height:1.7;text-align:center;
}
.pk-legal b{color:var(--mut);font-weight:600}
.pk-legal a{color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.pk-legal a:hover{color:var(--mint)}
@media(max-width:900px){
  .pk-audit{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .pk-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .pk-duo{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .pk-projekt,.pk-terms{max-width:620px;margin-left:auto;margin-right:auto}
  .pk-terms .pk-list{grid-template-columns:1fr;row-gap:8px}
}

@media(max-width:900px){
  .lst-grid{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .lst-geo{max-width:620px;margin-left:auto;margin-right:auto}
  .lst-geo .lst-do{grid-template-columns:1fr;row-gap:7px}
  /* Schmaler Block: der Text deckt hier fast die ganze Flaeche ab,
     deshalb noch weiter zurueckgenommen — Lesbarkeit vor Dekoration. */
  .lst-geo::before{opacity:.09}
}

/* ══ Leistungsseiten 11/2026 (Lepara-Schema: Hero → Nachweis → CTA) ══
   USP-Liste direkt im Hero, Telefonnummer als eigener Button,
   Breadcrumb am Seitenende statt im teuersten Teil der Seite,
   ganze Karte als Link. */
.p-hero .usp{margin-top:clamp(20px,3vh,28px);max-width:700px;gap:10px}
.p-hero .usp li{font-size:clamp(15px,1.2vw,16.5px)}
.p-hero.svc{min-height:0;padding-top:clamp(104px,13vh,138px);padding-bottom:clamp(40px,6vh,64px)}
.p-hero.svc h1{font-size:clamp(32px,4vw,60px);margin-top:14px}
.p-hero.svc .p-sub{margin-top:clamp(14px,2vh,22px)}
.p-hero.svc .usp{margin-top:clamp(14px,2vh,20px);gap:7px}
.pill-tel{font-family:var(--mono);letter-spacing:.02em}
.crumbs-sect{padding:clamp(22px,3vh,30px) var(--pad);border-top:1px solid var(--line)}
.crumbs-sect .crumbs{margin-bottom:0}
a.b-card,a.lg-card{display:flex;flex-direction:column;color:inherit;text-decoration:none}
a.lg-card .v-cta{margin-top:auto;padding-top:18px}
.lg-grid.three{grid-template-columns:repeat(3,1fr)}
.cta-band{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(22px,3vw,48px);align-items:center}
.cta-band .cta-ways{list-style:none;display:flex;flex-direction:column;gap:10px;font-family:var(--mono);font-size:13px}
.cta-band .cta-ways a{color:var(--txt);border-bottom:1px solid var(--line2);padding-bottom:2px}
.cta-band .cta-ways a:hover{color:var(--mint);border-color:var(--mint)}
.cta-band .cta-ways span{display:block;color:var(--faint);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.proof-grid .ref-case{display:flex;flex-direction:column}
.proof-grid .ref-case h3{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.5vw,21px);line-height:1.25;margin-bottom:12px}
.proof-grid .ref-case p{color:var(--mut);font-size:14.5px;line-height:1.66}
.proof-grid .ref-case p + p{margin-top:10px}
.proof-grid .ref-case .v-cta{margin-top:auto;padding-top:16px}
.qa button>h3{min-width:0}
.qa .q-x{flex-shrink:0}
@media(max-width:920px){
  .lg-grid,.lg-grid.three,.branchen-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:900px){
  .cta-band{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
  main h1,main h2,main h3{overflow-wrap:break-word;hyphens:auto}
}