/* ============================================================
   MT Digital Solutions — styles.css
   Palette derived from the logo lockup (assets/mt-lockup-light.png):
   a chartreuse→forest green gradient. WCAG 2.2 AA checked:
   --green on --bg-dark ....... 9.29:1  (AA/AAA)
   --green-ink on --green ..... 8.65:1  (buttons/sticker)
   --green-deep on --ivory .... 6.32:1  (green text on light)
   --green-deep on --white .... 7.02:1
   --ink on --ivory ........... 15.0:1
   Never: white text on green or hot green as text on light.
   For green text on light surfaces use --green-deep.
   Logo gradient stops: lime #d0e860 → mid #8fc935 → forest #389028.
   ============================================================ */

:root{
  --bg-dark:#0c1611;
  --bg-dark-2:#0f1b15;
  --ink:#17201b;
  --ivory:#f6f3ea;
  --white:#ffffff;
  --green:#a8dc40;        /* bright logo lime — fills & accents on dark */
  --green-hover:#93c92f;
  --green-ink:#062012;
  --green-deep:#256618;   /* accent text on light surfaces (AA) */
  --green-lime:#d0e860;   /* logo highlight — top-left gradient stop */
  --green-forest:#389028; /* logo deep end — bottom-right gradient stop */
  --green-rgb:168,220,64; /* --green as RGB, for glow/shadow tints */
  --muted:#576259;        /* body text on light */
  --muted-2:#4b5551;      /* stronger muted */
  --muted-dark:#a9c1b6;   /* body text on dark */
  --nav-dark:#9fb3a8;
  --line-dark:#1c3025;
  --line-light:#ece7db;
  --line-card:#ebe6da;
  --radius:14px;
  --radius-lg:20px;
  --maxw:1180px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}

/* ---------- dev source-preview only: reserve the chrome's space ----------
   These selectors match ONLY in the raw source folder, where js/include.js
   still has to inject the partials. dist.sh replaces every [data-include]
   mount with real markup, so none of these rules match a deployed page —
   this is zero bytes of behaviour in production.

   Without them the source preview paints a 0px-tall header, then reflows
   when the XHR lands (the "blank page, then it jumps" effect). Reserving
   the correct height up front makes the dev preview match production.
   If you change the header/footer height, update these to match. */
[data-include="header"]{display:block;min-height:91px;background:var(--bg-dark)}
[data-include="footer"]{display:block;min-height:280px;background:var(--bg-dark)}
[data-include="cookie-banner"]{display:block}
@media (max-width:860px){
  [data-include="footer"]{min-height:420px}
}
/* overflow-x:clip must be on html as well as body — with it on body alone the
   ROOT element still scrolls horizontally, which is what produced the white
   strip down the right edge on mobile. Use clip (not hidden): hidden on html
   would turn body into a scroll container and break position:sticky. */
html{scroll-behavior:smooth;overflow-x:clip}

/* ---------- cross-document view transitions ----------
   Opt in to the View Transitions API for same-origin navigations. The header
   and footer get stable transition names so the browser treats them as the
   SAME element across pages and holds them in place — no gone-then-back flash
   when you click a nav link. Only the <main> content cross-fades. Browsers
   without support simply navigate as before (progressive enhancement). */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
.site-footer{view-transition-name:site-footer}
/* Name the main content so only IT animates between pages. */
#main{view-transition-name:main-content}
/* Respect reduced-motion: keep instant navigation, no cross-fade. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none!important}
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  overflow-x:clip;               /* rotated hero badge must never cause page-wide scroll */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;line-height:1.05;letter-spacing:-0.02em;font-weight:800}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline}

/* accessible focus */
:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--green)}

/* skip link
   Hidden by CLIPPING in place, not by left:-9999px. The old off-canvas trick
   put a real box 9999px to the left of the viewport, which widened the
   scrollable area and caused a horizontal scrollbar / white strip on mobile.
   clip-path hides it with zero layout footprint and still keeps it focusable
   for keyboard + screen-reader users. */
.skip{
  position:absolute;left:0;top:0;z-index:200;
  clip-path:inset(50%);
  background:var(--green);color:var(--green-ink);padding:12px 18px;
  border-radius:0 0 10px 0;font-weight:700;
}
.skip:focus{clip-path:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-size:16px;font-weight:700;font-family:inherit;
  padding:15px 28px;border-radius:100px;border:none;cursor:pointer;
  min-height:48px;text-decoration:none;transition:background .15s,transform .15s,border-color .15s;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green);color:var(--green-ink)}
.btn-primary:hover{background:var(--green-hover);transform:translateY(-1px)}
.btn-primary.glow{box-shadow:0 12px 30px -8px rgba(var(--green-rgb),.55)}
.btn-ghost-dark{background:transparent;color:var(--white);border:1.5px solid #2a463a}
.btn-ghost-dark:hover{border-color:var(--green)}
.btn-ghost-light{background:transparent;color:var(--ink);border:1.5px solid #d8d3c7}
.btn-ghost-light:hover{border-color:var(--ink)}
.btn-dark,.nav-links a.btn-dark{background:var(--green);color:#062012;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700;min-height:40px}
.btn-dark:hover,.nav-links a.btn-dark:hover{background:var(--green-hover);color:#062012}
.btn-light,.nav-links a.btn-light{background:var(--green);color:#062012;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:700;min-height:40px}
.btn-light:hover,.nav-links a.btn-light:hover{background:var(--green-hover);color:#062012}

/* ---------- header / nav ---------- */
/* position:relative makes the header the containing block for the mobile
   nav panel (.nav-links, absolutely positioned under 860px). Without it the
   panel resolves against the viewport and lands off-screen once scrolled.

   z-index is REQUIRED, not cosmetic: .site-header carries a
   view-transition-name (see the view-transitions block above), which makes it
   a stacking context. That traps the panel's own z-index:100 INSIDE the
   header, so it can no longer outrank .hero / .page-hero — both are
   position:relative and come later in the document, so they painted over the
   open menu. Raising the header itself lifts the whole context above them. */
.site-header{position:relative;z-index:50;background:var(--bg-dark);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.brand{display:inline-flex;align-items:center;color:#fff}
.brand:hover{text-decoration:none}
.brand img{width:203px;height:auto;display:block}
.brand .mark{width:28px;height:28px;border-radius:100px;background:var(--green);color:var(--green-ink);display:grid;place-items:center;font-size:15px;font-weight:800}
.nav-links{display:flex;align-items:center;gap:26px;font-size:14px}
.nav-links a{color:var(--nav-dark)}
.nav-links a:hover{color:#fff;text-decoration:none}
.nav-links a[aria-current="page"]{color:#fff}
.lang{display:inline-flex;gap:2px;align-items:center;font-size:12px;color:#6f8579}
.lang button{background:none;border:none;color:#6f8579;font:inherit;font-size:12px;cursor:pointer;padding:4px 4px;min-height:32px}
.lang button[aria-pressed="true"]{color:#fff;font-weight:700}
.lang button:hover{color:#fff}
.nav-toggle{display:none;background:none;border:1.5px solid #2a463a;border-radius:8px;color:#fff;width:44px;height:44px;cursor:pointer;font-size:20px}

/* ---------- hero ---------- */
.hero{position:relative;overflow-x:clip;background:var(--bg-dark);color:#eafff4;padding:72px 0 64px}
/* The hero's green glow now lives ON the badge (see .sticker box-shadow), so it
   always travels with the badge and stays inside the content area. The old
   standalone corner-glow element is no longer rendered. */
.hero > .glow{display:none}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;color:var(--green);font-weight:700;text-transform:uppercase;margin-bottom:22px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.hero h1{font-size:clamp(40px,6.2vw,78px);color:#fff;max-width:900px;margin-bottom:24px;overflow-wrap:break-word}
.hl{display:inline-block;max-width:100%;background:var(--green);color:var(--green-ink);padding:0 14px;border-radius:10px;transform:rotate(-2deg)}
.hero .lede{font-size:clamp(17px,2vw,20px);color:var(--muted-dark);max-width:580px;margin-bottom:24px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;list-style:none;padding:0}
.tag{border:1px solid var(--line-card);color:var(--ink);padding:7px 14px;border-radius:100px;font-size:13px}
.on-dark .tag,.hero .tag{border-color:var(--line-dark);color:#bcd4c8}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .wrap{position:relative}
/* The sticker lives inside .hero .wrap (position:relative), so top/right are
   measured from the content column and it aligns to the column edge on any
   viewport — no viewport-width calc needed. */
.sticker{position:absolute;top:12px;right:8px;width:106px;height:106px;border-radius:50%;background:var(--green);color:var(--green-ink);display:grid;place-items:center;text-align:center;transform:rotate(9deg);box-shadow:0 16px 40px -10px rgba(var(--green-rgb),.66)}
/* Soft green halo that travels WITH the badge (drawn behind it as a radial),
   so the glow stays inside the hero/content area instead of the old off-column
   corner element. */
.sticker::before{content:"";position:absolute;z-index:-1;top:50%;left:50%;
  width:230px;height:230px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(var(--green-rgb),.42) 0%,rgba(var(--green-rgb),.12) 42%,transparent 70%);
  pointer-events:none}
.sticker b{font-size:24px;font-weight:800;line-height:1;display:block;margin:2px 0}
/* "How it works" steps embedded in the dark hero */
.hero-steps{margin-top:40px;padding-top:28px;border-top:1px solid var(--line-dark)}
.hero-steps-h{font-size:clamp(22px,3vw,30px);color:#fff;margin-bottom:24px}
.on-dark .step .n{color:var(--green)}
.on-dark .step h3{color:#fff}
.on-dark .step p{color:var(--muted-dark)}

/* image placeholder */
.ph{background:repeating-linear-gradient(135deg,#eef0f4 0 12px,#e6e9ef 12px 24px);border:1px solid var(--line-card);border-radius:var(--radius);display:grid;place-items:center;color:#9aa096;font-size:13px;text-align:center;padding:20px}
.ph.dark{background:repeating-linear-gradient(135deg,#122019 0 14px,#0f1b15 14px 28px);border-color:#1c3025;color:#5c7367}
.hero-media{padding-top:8px}
.hero-media .ph{height:300px;border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.hero-photo{width:100%;height:340px;object-fit:cover;object-position:center 54%;border:1px solid var(--line-dark);border-bottom:none;border-radius:var(--radius) var(--radius) 0 0;filter:saturate(.92) contrast(1.04)}

/* ---------- generic sections ---------- */
section{scroll-margin-top:72px}
.section{padding:64px 0}
.section.ivory{background:var(--ivory)}
.section.dark{background:var(--bg-dark);color:#eafff4}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.section-head h2{font-size:clamp(26px,3.4vw,34px)}
.label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.dark .label{color:#7e9488}
.kicker{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-bottom:14px}
.dark .kicker{color:var(--green)}

/* ---------- services grid ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--white);border:1px solid var(--line-card);border-radius:var(--radius);padding:28px 24px}
.card h3{font-size:19px;font-weight:800;margin-bottom:6px}
.card p{font-size:14px;color:var(--muted)}
.card .ico{width:44px;height:44px;border-radius:11px;background:var(--bg-dark);color:var(--green);display:grid;place-items:center;margin-bottom:16px}
.card .ico svg{width:22px;height:22px}
.card.feature{background:var(--green);color:var(--green-ink);box-shadow:0 16px 40px -14px rgba(var(--green-rgb),.6)}
.card.feature .ico{background:var(--green-ink);color:var(--green)}
.card.feature p{color:#0c2417}
.card.feature .star{font-size:14px}

/* ---------- personal band ---------- */
.band{background:var(--green);color:var(--green-ink);padding:52px 0}
.band-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.band .avatar{width:64px;height:64px;border-radius:50%;background:var(--bg-dark);border:2px solid var(--green-ink);flex-shrink:0}
.band .kick{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.band p{font-size:clamp(19px,2.4vw,23px);font-weight:700;max-width:760px}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.price-card{border:1px solid var(--line-dark);border-radius:var(--radius);padding:26px 24px}
.price-card.hot{border-color:var(--green);background:rgba(var(--green-rgb),.08)}
.price-card .plan{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7e9488}
.price-card.hot .plan{color:var(--green)}
.price-card b{font-size:26px;font-weight:800;color:#fff;margin-top:6px;display:block}

/* ---------- pricing tiers (detailed cards: pricing.html + homepage) ---------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;align-items:stretch}
#preise .tier-grid{margin-top:32px}
.tier{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-card);border-radius:var(--radius);padding:28px 24px}
.tier.featured{border-color:var(--green);box-shadow:0 18px 44px -18px rgba(var(--green-rgb),.5)}
.tier .badge{position:absolute;top:-11px;left:24px;background:var(--green);color:var(--green-ink);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.tier .tier-name{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--green-deep)}
.tier .tier-for{font-size:13px;color:var(--muted);margin-top:4px;min-height:34px}
.tier .price{margin:16px 0 2px;font-size:40px;font-weight:800;color:var(--ink);line-height:1}
.tier .price small{font-size:15px;font-weight:600;color:var(--muted)}
.tier .setup{font-size:13px;color:var(--muted);margin-bottom:18px}
.tier .setup b{color:var(--ink);font-weight:700}
.tier ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.tier li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:var(--ink)}
.tier li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/12px no-repeat}
/* bonus feature (this tier adds on top of the one below): emphasised check */
.tier li.add{font-weight:600}
.tier li.add::before{background:var(--green-deep)}
.on-dark .tier li.add::before{background:var(--green)}
/* first bonus row gets a hairline divider above, to read as "plus:" */
.tier li:not(.add) + li.add{margin-top:5px;padding-top:14px;border-top:1px dashed var(--line-card)}
/* the divider row adds 14px top padding, so nudge its check down to match the text */
.tier li:not(.add) + li.add::before{top:17px}
.on-dark .tier li:not(.add) + li.add{border-top-color:#2a463a}
.tier .btn{margin-top:auto}
/* dark-surface variant (homepage pricing on dark bg) */
.on-dark .tier{background:var(--bg-dark-2,#122019);border-color:#2a463a}
.on-dark .tier .tier-name{color:var(--green)}
.on-dark .tier .price{color:#fff}
.on-dark .tier li{color:#d5e5db}
.on-dark .tier li.no{color:#6f8579}
.on-dark .tier li.no::before{background:#4a5f54}
.on-dark .tier .tier-for,.on-dark .tier .setup,.on-dark .tier .price small{color:#8fa79a}
.on-dark .tier .setup b{color:#fff}

/* ---------- tooltip (accessible: hover + keyboard focus) ---------- */
.tip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;margin-left:5px;border-radius:50%;border:1.4px solid currentColor;
  font-size:10px;font-weight:800;line-height:1;color:var(--muted);cursor:help;opacity:.75;
  vertical-align:middle;flex:0 0 auto}
.tier li .tip{color:var(--green-deep)}
.on-dark .tier li .tip{color:var(--green)}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  width:max-content;max-width:230px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;line-height:1.45;
  text-align:left;padding:9px 11px;border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .12s;z-index:50;pointer-events:none;white-space:normal}
.tip::before{content:"";position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink);opacity:0;visibility:hidden;transition:opacity .12s;z-index:50}
.tip:hover::after,.tip:focus::after,.tip:hover::before,.tip:focus::before{opacity:1;visibility:visible}
.tip:focus{outline:2px solid var(--green);outline-offset:2px}
/* small print under a pricing grid */
.price-note{margin-top:20px;font-size:13px;color:var(--muted);max-width:640px}
.on-dark .price-note{color:#8fa79a}

/* ---------- process / steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-top:2px solid var(--green);padding-top:16px}
.step .n{font-size:12px;font-weight:800;color:var(--green-deep);letter-spacing:.08em}
.step h3{font-size:18px;margin:8px 0 6px}
.step p{font-size:14px;color:var(--muted)}

/* ---------- CTA ---------- */
.cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(24px,3vw,32px)}
.cta .sub{color:var(--muted);margin-top:6px;font-size:14px}

/* ---------- content pages ---------- */
.page-hero{background:var(--bg-dark);color:#fff;padding:60px 0}
.page-hero h1{font-size:clamp(34px,5vw,56px);max-width:820px}
.page-hero p{color:var(--muted-dark);font-size:18px;max-width:620px;margin-top:18px}
.prose{max-width:720px}
.prose p{color:var(--muted);font-size:17px;margin-bottom:18px}
.prose h2{font-size:26px;margin:36px 0 12px}
.service-block{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line-light)}
.service-block:last-child{border-bottom:none}
.service-block .ico{width:44px;height:44px;border-radius:11px;background:var(--bg-dark);color:var(--green);display:grid;place-items:center}
.service-block .ico svg{width:22px;height:22px}
.service-block h3{font-size:22px;margin-bottom:8px}
.service-block p{color:var(--muted);font-size:16px}

/* ---------- contact form ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.field{margin-bottom:18px}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:15px;padding:13px 14px;
  border:1.5px solid #d8d3c7;border-radius:10px;background:#fff;color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green-deep);outline:none;box-shadow:0 0 0 3px rgba(10,107,59,.15)}
.field textarea{min-height:130px;resize:vertical}
/* invalid-field state + inline error message (WCAG: not colour alone — the
   message text states the problem, and aria-invalid/role=alert announce it) */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#b42318}
.field input[aria-invalid="true"]:focus,.field textarea[aria-invalid="true"]:focus,.field select[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(180,35,24,.15)}
.field-error{margin:6px 0 0;font-size:13px;font-weight:600;color:#b42318}
.field-error:empty{display:none}
button[type="submit"][disabled]{opacity:.75;cursor:progress}
.contact-info dt{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:20px}
.contact-info dd{margin:4px 0 0;font-size:17px}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-dark);color:var(--muted-dark);padding:56px 0 32px}
.footer-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid var(--line-dark)}
.footer-col h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7e9488;margin-bottom:14px;font-weight:700}
.footer-col a{display:block;color:var(--muted-dark);margin-bottom:8px;font-size:14px}
.footer-col a:hover{color:#fff;text-decoration:none}
.footer-brand{max-width:280px}
.footer-brand p{color:#7e9488;font-size:14px;margin-top:12px}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:13px;color:#6f8579}
/* Dark surface: the global `a{color:--green-deep}` is a LIGHT-surface colour and
   fails contrast here (2.62:1). Override to the on-dark muted token. */
.footer-bottom a{color:var(--muted-dark);text-decoration:none}
.footer-bottom a:hover{color:#fff}
.footer-bottom .cc-reopen{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
.footer-bottom .cc-reopen:hover{color:#fff}

/* ---------- cookie consent banner ---------- */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:300;
  background:var(--bg-dark-2);border-top:1px solid var(--line-dark);
  box-shadow:0 -12px 40px -12px rgba(0,0,0,.6);padding:18px 0}
.cookie-banner[hidden]{display:none}
.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cookie-banner-text{flex:1 1 420px;min-width:min(100%,320px)}
.cookie-banner-title{color:#fff;font-weight:800;font-size:15px;margin-bottom:4px}
.cookie-banner #cc-desc{color:var(--muted-dark);font-size:14px;line-height:1.55}
.cookie-banner a{color:var(--green);text-decoration:underline}
.cookie-banner a:hover{color:#fff}
.cookie-banner-actions{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}
.cookie-banner .cc-btn{font-size:14px;padding:12px 22px;min-height:44px}

/* ---------- legal pages (Impressum / Datenschutz) ---------- */
.legal{max-width:760px}
.legal h2{font-size:20px;font-weight:800;margin:32px 0 10px}
.legal p{color:var(--ink);line-height:1.7;margin-bottom:12px}
.legal ul{margin:0 0 12px;padding-left:22px}
.legal li{color:var(--ink);line-height:1.7;margin-bottom:6px}
.legal a{color:var(--green-deep);text-decoration:underline}
.legal-note{background:#fff7d6;border:1px solid #e6d98a;border-radius:10px;padding:14px 16px;font-size:14px;color:#5c4a00!important}

/* ---------- blog ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.post-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-card);border-radius:var(--radius);overflow:hidden}
.post-card:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s}
.post-card .thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--bg-dark);color:var(--green);display:grid;place-items:center;font-size:13px}
.ph-img{display:block}
.post-card .body{padding:22px 22px 24px}
.post-card .cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);font-weight:700}
.post-card h3{font-size:19px;font-weight:800;margin:8px 0 8px}
.post-card p{font-size:14px;color:var(--muted)}
.post-card .more{margin-top:14px;font-size:14px;font-weight:700;color:var(--green-deep)}
/* article body */
.article{max-width:720px}
.article .meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.article h2{font-size:24px;font-weight:800;margin:36px 0 12px}
.article h3{font-size:19px;font-weight:800;margin:26px 0 8px}
.article p{line-height:1.75;margin-bottom:16px;color:var(--ink)}
.article ul{margin:0 0 16px 20px}
.article li{line-height:1.7;margin-bottom:6px}
.article .lede{font-size:19px;color:var(--muted);line-height:1.6}
.article .faq{border-top:1px solid var(--line-card);margin-top:40px;padding-top:8px}
.article .cta-box{background:var(--ivory);border:1px solid var(--line-card);border-radius:var(--radius);padding:28px;margin-top:40px}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .post-grid{grid-template-columns:1fr 1fr}
  .grid-3,.price-grid,.steps{grid-template-columns:1fr 1fr}
  .tier-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .contact-grid{grid-template-columns:1fr}
  /* Anchored to the header's bottom edge (top:100%), not a fixed 70px, so it
     follows the real header height. Requires .site-header{position:relative}. */
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:100;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--bg-dark-2);border-top:1px solid var(--line-dark);padding:8px 24px 20px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-dark)}
  .nav-links .lang{padding-top:12px}
  .nav-toggle{display:grid;place-items:center}
  .hero{padding:52px 0 48px}
  /* The floating "ab 39€/Monat" badge is hidden on mobile — it can't be placed
     cleanly in the tight hero; revisit later. (Price is still on the pricing page.)
     Its glow is on the badge itself, so hiding the badge removes the glow too. */
  .sticker{display:none}
}
@media (max-width:560px){
  .grid-3,.price-grid,.steps,.post-grid,.tier-grid{grid-template-columns:1fr}
  .cta{flex-direction:column;align-items:flex-start}
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}