/* ===================================================================
   Launchini — Website
   Creme / Bronze / Tiefschwarz, Poppins + Inter, Caveat für Notizen
   =================================================================== */
:root{
  --cream:#F7F4EF; --cream-2:#F1EDE5; --white:#FFFFFF;
  --ink:#17160F; --ink-2:#575249; --ink-3:#8C867B;
  --bronze:#A38C74; --bronze-2:#8E7961; --bronze-soft:#EFE7DC;
  --line:#E5DFD4; --line-2:#EDE8DF;
  --dark:#16151A; --dark-2:#221F26; --on-dark:#F6F4F0; --on-dark-2:#A9A49C;
  --mint:#DCEFE4; --mint-ink:#1F5638;
  --peach:#F9E4D4; --peach-ink:#6E4322;
  --sky:#DDE9F5; --sky-ink:#1D4368;
  --shadow-s:0 1px 2px rgba(24,20,14,.05);
  --shadow-m:0 2px 6px rgba(24,20,14,.06), 0 12px 28px rgba(24,20,14,.07);
  --shadow-l:0 4px 10px rgba(24,20,14,.07), 0 28px 60px rgba(24,20,14,.12);
  --r-s:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --disp:'Poppins',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --hand:'Caveat',cursive;
  --wrap:1200px;
}
html[dir="rtl"]{ --disp:'Cairo',system-ui,sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif; }
html[dir="rtl"] .hand{ font-family:var(--body); font-weight:500 }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1.08;
  margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
:focus-visible{outline:2px solid var(--bronze-2);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.sec{padding-block:clamp(48px,6.5vw,96px)}
.sec-cream{background:var(--cream)}
.sec-white{background:var(--white)}
.sec-band{background:var(--cream-2)}
.only-rtl{display:none} html[dir="rtl"] .only-rtl{display:initial}

/* ---------- Bausteine ---------- */
.eyebrow{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ink-3)}
.h-xl{font-size:clamp(32px,4.4vw,54px);line-height:1.06}
.h-l{font-size:clamp(27px,3.7vw,44px)}
.h-m{font-size:clamp(22px,2.5vw,31px)}
.h-s{font-size:clamp(17px,1.5vw,20px)}
.tone{color:var(--bronze)}
.lead{color:var(--ink-2);font-size:clamp(14.5px,1.2vw,17px);line-height:1.65;max-width:56ch}
.muted{color:var(--ink-3);font-size:13.5px}
.hand{font-family:var(--hand);font-size:clamp(17px,1.8vw,23px);color:var(--ink-2);line-height:1.2}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;padding:0 25px;
  border-radius:999px;font-family:var(--body);font-weight:600;font-size:14.5px;white-space:nowrap;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s}
.btn svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(24,20,14,.22)}
.btn-light{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-light:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}
.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn-on-dark{background:var(--white);color:var(--ink)}
.btn-on-dark:hover{transform:translateY(-2px)}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.checks{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center}
.check{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.check i{width:18px;height:18px;border-radius:999px;background:var(--ink);display:grid;place-items:center;flex:none}
.check i svg{width:10px;height:10px;stroke:var(--white);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.pill-mint{background:var(--mint);color:var(--mint-ink)}
.pill-peach{background:var(--peach);color:var(--peach-ink)}
.pill-sky{background:var(--sky);color:var(--sky-ink)}
.pill-bronze{background:var(--bronze-soft);color:var(--bronze-2)}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin-bottom:clamp(24px,3vw,42px)}
.sec-head .lead{margin-top:10px}
.more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  border-bottom:1px solid var(--line);padding-bottom:3px}
.more:hover{border-color:var(--ink)}
.more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .more svg{transform:scaleX(-1)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .sec-head{flex-direction:column;align-items:center}

/* ---------- Kopfzeile ---------- */
.hdr{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--cream) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.stuck{border-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:clamp(14px,2vw,34px);padding-block:14px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand .mk{width:27px;height:28px;flex:none;
  background:url(/assets/mark.png) center/contain no-repeat}
.brand .wd{height:15px;width:auto;display:block;flex:none}
.nav{display:flex;align-items:center;gap:clamp(10px,1.5vw,25px);flex:1}
.nav > a,.nav > .dd > button{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:500;
  color:var(--ink-2);padding-block:6px;border-bottom:2px solid transparent}
.nav > a:hover,.nav > .dd > button:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--ink);font-weight:600}
.nav .caret{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hdr-end{display:flex;align-items:center;gap:clamp(8px,1.2vw,16px);flex:none}

/* Sprachmenü */
.lang{position:relative}
.lang > button{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.lang > button:hover{color:var(--ink)}
.lang > button svg:first-child{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7}
.lang-menu,.dd-menu{position:absolute;inset-block-start:calc(100% + 12px);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow-l);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.lang-menu{inset-inline-end:0;min-width:172px}
.lang[data-open="1"] .lang-menu,.dd[data-open="1"] .dd-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 12px;border-radius:9px;font-size:14px;text-align:start}
.lang-menu button:hover{background:var(--cream)}
.lang-menu button[aria-checked="true"]{font-weight:600}
.lang-menu button span:last-child{font-size:11px;color:var(--ink-3);letter-spacing:.06em}

/* Mega-Menü */
.dd{position:relative}
.dd-menu{inset-inline-start:0;width:min(760px,calc(100vw - 40px));padding:22px}
.dd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dd-grid h4{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.dd-item{display:flex;gap:11px;padding:9px;border-radius:11px;align-items:flex-start}
.dd-item:hover{background:var(--cream)}
.dd-item .ic{width:34px;height:34px;border-radius:9px;background:var(--cream-2);display:grid;
  place-items:center;flex:none}
.dd-item .ic svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.dd-item b{display:block;font-family:var(--body);font-size:13.5px;font-weight:600}
.dd-item span{font-size:12px;color:var(--ink-3);line-height:1.4;display:block;margin-top:2px}
.dd-promo{background:var(--dark);color:var(--on-dark);border-radius:var(--r-m);padding:20px;
  display:flex;flex-direction:column;gap:10px;justify-content:center}
.dd-promo .eyebrow{color:var(--on-dark-2)}
.dd-promo h4{font-family:var(--disp);font-size:20px;color:var(--on-dark);letter-spacing:-.03em}
.dd-promo p{font-size:12.5px;color:var(--on-dark-2);line-height:1.5}

/* Menü für Handy */
.burger{display:none;width:42px;height:42px;border-radius:11px;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line)}
.burger svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
.mob{display:none;position:fixed;inset:0;z-index:80;background:var(--cream);padding:18px;overflow:auto}
.mob[data-open="1"]{display:block}
.mob-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.mob nav{display:grid;gap:2px}
.mob nav a{padding:14px 10px;border-radius:11px;font-family:var(--disp);font-size:19px;font-weight:600}
.mob nav a:hover{background:var(--cream-2)}
.mob .btn{width:100%;margin-top:14px}
@media (max-width:1040px){
  .nav,.hdr-end .desk{display:none}
  .burger{display:grid}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(32px,4.5vw,64px) clamp(36px,5vw,72px)}
.hero-split{display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(26px,4vw,56px);align-items:center}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,22px)}
.hero-copy .checks{margin-top:2px}
.hero-art{position:relative}
.note{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;gap:2px}
.note svg{width:46px;height:40px;stroke:var(--ink-2);fill:none;stroke-width:1.6;stroke-linecap:round}
@media (max-width:1040px){
  .hero-split{grid-template-columns:1fr;gap:30px}
  .note{display:none}
}

/* Gerätemockups */
.mock{position:relative}
.mock-lap{border-radius:12px;overflow:hidden;background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-l)}
.mock-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--cream-2);
  border-bottom:1px solid var(--line-2)}
.mock-bar i{width:8px;height:8px;border-radius:999px;background:#E2685A}
.mock-bar i:nth-child(2){background:#E8B23C}
.mock-bar i:nth-child(3){background:#5FBE63}
.mock-bar .u{margin-inline-start:10px;font-family:var(--body);font-size:10.5px;color:var(--ink-3);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mock-phone{position:absolute;inset-block-end:-18px;inset-inline-end:-10px;width:23%;min-width:118px;
  border-radius:16px;overflow:hidden;background:var(--white);border:5px solid var(--ink);
  box-shadow:var(--shadow-l);z-index:2}
.mock-phone img{aspect-ratio:414/782;object-fit:cover;object-position:top center}
.chip{position:absolute;background:var(--white);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-m);padding:10px 13px;display:flex;align-items:center;gap:10px;z-index:3}
.chip svg{width:19px;height:19px;stroke:var(--bronze-2);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.chip b{font-family:var(--body);font-size:12.5px;font-weight:600;display:block}
.chip span{font-size:11px;color:var(--ink-3);display:block;line-height:1.35}
@media (max-width:620px){.chip{display:none}.mock-phone{display:none}}

/* ---------- Kennzahlen ---------- */
.facts{background:var(--white);border-block:1px solid var(--line)}
.facts-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2)}
.fact{background:var(--white);padding:26px clamp(14px,2vw,26px);display:flex;gap:13px;align-items:flex-start}
.fact svg{width:22px;height:22px;stroke:var(--bronze-2);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:3px}
.fact b{display:block;font-family:var(--disp);font-size:clamp(18px,2vw,23px);font-weight:600;letter-spacing:-.03em}
.fact span{font-size:12.5px;color:var(--ink-3);display:block}
@media (max-width:860px){.facts-in{grid-template-columns:repeat(2,1fr)}}

/* ---------- Kategorie-Kacheln ---------- */
.cats{display:grid;grid-template-columns:repeat(8,1fr);gap:11px}
.cat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:17px 11px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;transition:all .16s}
.cat:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow-m)}
.cat[aria-current="true"]{border-color:var(--bronze);background:var(--bronze-soft)}
.cat svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.cat span{font-size:12px;font-weight:500;line-height:1.3}
@media (max-width:980px){.cats{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- Vorlagen-Karten ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
@media (max-width:980px){.tpl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.tpl-grid{grid-template-columns:1fr}}
.tpl{display:flex;flex-direction:column;gap:12px}
.tpl-shot{border-radius:var(--r-m);overflow:hidden;background:var(--white);border:1px solid var(--line);
  box-shadow:var(--shadow-s);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s}
.tpl:hover .tpl-shot{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.tpl-shot img{aspect-ratio:1280/840;object-fit:cover;object-position:top center}
.tpl-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-inline:2px}
.tpl-meta b{font-family:var(--disp);font-size:15.5px;font-weight:600;letter-spacing:-.025em;display:block}
.tpl-meta span{font-size:12.5px;color:var(--ink-3);display:block;margin-top:1px}

/* ---------- Funktionen ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:940px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:24px;
  display:flex;flex-direction:column;gap:11px}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--cream-2);display:grid;place-items:center}
.feat .ic svg{width:21px;height:21px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.feat b{font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.02em}
.feat p{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* ---------- Dunkler Block ---------- */
.dark-box{background:var(--dark);color:var(--on-dark);border-radius:var(--r-xl);position:relative;
  overflow:hidden;padding:clamp(28px,4vw,52px)}
.dark-box h2,.dark-box h3{color:var(--on-dark)}
.dark-box .lead{color:var(--on-dark-2)}
.dark-box .eyebrow{color:var(--on-dark-2)}
.dark-box .mk-bg{position:absolute;inset-block-end:-30px;inset-inline-start:-26px;width:210px;height:210px;
  background:var(--on-dark);opacity:.06;
  -webkit-mask:url(/assets/mark-solid.png) center/contain no-repeat;mask:url(/assets/mark-solid.png) center/contain no-repeat}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);position:relative;z-index:2}
.step{display:flex;flex-direction:column;gap:9px}
.step .n{width:34px;height:34px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(246,244,240,.35);
  display:grid;place-items:center;font-family:var(--disp);font-size:14px;font-weight:600}
.step b{font-family:var(--disp);font-size:16px;font-weight:600;color:var(--on-dark)}
.step p{font-size:13px;color:var(--on-dark-2);line-height:1.5}
@media (max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.cta-box{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  position:relative;z-index:2}

/* ---------- Preise ---------- */
.toggle{display:inline-flex;align-items:center;gap:4px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:4px}
.toggle button{height:38px;padding:0 20px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.toggle button[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px);align-items:start}
@media (max-width:1040px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.plans{grid-template-columns:1fr}}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;
  display:flex;flex-direction:column;gap:15px}
.plan.pop{border-color:var(--ink);box-shadow:var(--shadow-m)}
.plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.plan h3{font-size:20px}
.plan .sub{font-size:13px;color:var(--ink-3);line-height:1.45}
.price{display:flex;align-items:baseline;gap:6px;font-family:var(--disp);letter-spacing:-.04em}
.price .amt{font-size:clamp(30px,3.4vw,40px);font-weight:600}
.price .per{font-size:13.5px;color:var(--ink-3);font-family:var(--body);letter-spacing:0}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.plan li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.plan li svg{width:14px;height:14px;stroke:var(--ink);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:4px}
.cmp{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.cmp th,.cmp td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line-2)}
.cmp thead th{background:var(--cream-2);font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:not(:first-child),.cmp th:not(:first-child){text-align:center}
.cmp .yes svg{width:15px;height:15px;stroke:var(--ink);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.cmp .no{color:var(--ink-3)}
.tbl-scroll{overflow-x:auto}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:2px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-s)}
.faq details + details{margin-top:9px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 19px;
  cursor:pointer;font-size:14.5px;font-weight:500;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--disp);font-size:20px;color:var(--ink-3);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 19px 18px;font-size:13.5px;color:var(--ink-2);line-height:1.6;max-width:72ch}

/* ---------- Suche ---------- */
.search{display:flex;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:999px;padding:6px 6px 6px 18px;align-items:center;box-shadow:var(--shadow-s);flex:1}
.search svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.8;flex:none}
.search input{flex:1;border:0;outline:0;background:none;font-family:var(--body);font-size:14.5px;
  color:var(--ink);min-width:0}
.search-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chips .lbl{font-size:12.5px;color:var(--ink-3);margin-inline-end:2px}
.chips button{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:500;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line)}
.chips button:hover{box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- Kontakt ---------- */
.con-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,50px);align-items:start}
@media (max-width:900px){.con-grid{grid-template-columns:1fr}}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(22px,3vw,34px);
  display:grid;gap:15px}
.fld{display:grid;gap:7px}
.fld > span:first-child,.fld label{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.fld input,.fld select,.fld textarea{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;
  font-family:var(--body);font-size:14.5px;color:var(--ink);background:var(--cream);width:100%}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink);background:var(--white)}
.fld textarea{min-height:120px;resize:vertical;line-height:1.55}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:520px){.fld-2{grid-template-columns:1fr}}
.con-cards{display:grid;gap:13px}
.con-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);padding:20px;
  display:flex;gap:14px;align-items:flex-start}
.con-card .ic{width:40px;height:40px;border-radius:11px;background:var(--cream-2);display:grid;
  place-items:center;flex:none}
.con-card .ic svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.con-card b{font-family:var(--disp);font-size:15px;font-weight:600;display:block}
.con-card p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:3px;white-space:pre-line}

/* ---------- Fußzeile ---------- */
.ftr{background:var(--dark);color:var(--on-dark);padding-block:clamp(40px,5vw,68px) 26px}
.ftr-in{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:clamp(22px,3vw,40px)}
@media (max-width:860px){.ftr-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-in{grid-template-columns:1fr}}
.ftr-logo{width:clamp(124px,12vw,146px);height:auto;display:block}
.ftr h4{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-dark-2);margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr ul a{font-size:13.5px;color:var(--on-dark);opacity:.82}
.ftr ul a:hover{opacity:1}
.ftr .about{font-size:13.5px;color:var(--on-dark-2);line-height:1.6;max-width:36ch;margin-top:14px}
.ftr-btm{margin-top:clamp(28px,3.4vw,44px);padding-top:20px;
  border-top:1px solid rgba(246,244,240,.14);display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--on-dark-2)}

/* ---------- Hinweisbalken Testphase ---------- */
.beta{background:var(--bronze-soft);border-block:1px solid var(--line)}
.beta-in{display:flex;gap:14px;align-items:flex-start;padding-block:16px}
.beta svg{width:19px;height:19px;stroke:var(--bronze-2);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:2px}
.beta p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:88ch}
.beta b{color:var(--ink)}

/* ---------- Ergänzungen: Seitenbau ---------- */
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 12px;border-radius:9px;font-size:14px;text-align:start}
.lang-menu a:hover{background:var(--cream)}
.lang-menu a[aria-current="true"]{font-weight:600}
.lang-menu a span:last-child{font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.lang-menu .flip{direction:ltr;unicode-bidi:isolate}

.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:clamp(28px,4vw,52px)}
.mb-m{margin-bottom:26px}
.row-center{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.stack.center-x{align-items:center;text-align:center}

/* Hero-Zubehör */
.hero-mini{padding-block:clamp(34px,4.5vw,64px) clamp(20px,2.5vw,34px)}
.hero-mini .stack{max-width:66ch}
.chip-a{inset-block-start:22%;inset-inline-start:-54px}
.chip-b{inset-block-end:-10px;inset-inline-start:7%}
.note-a{inset-block-start:-34px;inset-inline-end:4%;align-items:flex-end;text-align:end}
html[dir="rtl"] .note-a svg{transform:scaleX(-1)}
@media (max-width:1180px){.chip-a{inset-inline-start:-14px}}

/* Vorlagen-Filter */
.tpl[hidden]{display:none}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--on-dark);box-shadow:none}
.empty{padding:40px 0;text-align:center;color:var(--ink-3);font-size:14.5px}
.empty[hidden]{display:none}

/* Preise */
.price-head{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:clamp(26px,3vw,40px)}
.plan .bill{font-size:12px;color:var(--ink-3)}
.plan .bill[hidden]{display:none}
.plan .btn{width:100%;margin-top:auto}
.plan{min-height:100%}
.save-tag{font-size:11.5px;font-weight:600;color:var(--bronze-2);background:var(--bronze-soft);
  padding:3px 9px;border-radius:999px}

/* Kontaktformular */
.form .ok{background:var(--mint);color:var(--mint-ink);border-radius:var(--r-s);padding:12px 14px;font-size:13.5px}
.form .ok[hidden]{display:none}
.fld-note{font-size:12px;color:var(--ink-3);line-height:1.5}

/* Zwei Spalten allgemein */
.split-2{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:center}
@media (max-width:980px){.split-2{grid-template-columns:1fr;gap:30px}}
.card-shot{border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-l);background:var(--white)}

html.noscroll{overflow:hidden}
.btn-ghost.btn-on-dark{background:none;color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(246,244,240,.34)}
.btn-ghost.btn-on-dark:hover{box-shadow:inset 0 0 0 1px var(--on-dark)}
.dark-box .cta-box .lead{max-width:48ch}
.hero-copy .btn-row{margin-top:2px}
.tpl .checks{justify-content:space-between;width:100%;gap:10px}

@media (max-width:620px){
  .hdr-end > .btn{display:none}
  .hdr-in{gap:10px}
}
.cmp{min-width:620px}
.tbl-scroll{margin-inline:-2px;padding-inline:2px}
.tpl .checks{margin-top:auto}
.price .amt.sm{font-size:clamp(21px,2.2vw,27px)}
.plan-top .pill{white-space:nowrap;flex:none}

/* Logo im Handy-Menue etwas kleiner */
.mob-top .brand .mk{width:25px;height:26px}
.mob-top .brand .wd{height:14px}
.ftr-btm .ftr-langs{display:flex;gap:16px;flex-wrap:wrap}
.ftr-btm .ftr-langs a:hover{color:var(--on-dark)}
.lang > button svg:first-child{width:17px;height:17px;flex:none}
.tpl-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto;padding-inline:2px}
.tpl-act .muted{margin-inline-start:auto}
@media (max-width:420px){.tpl-act .muted{margin-inline-start:0;width:100%}}

/* Fusszeile: waagerechtes Logo (Variante D) */
.ftr-brand .mk{width:31px;height:32px;background-image:url(/assets/mark-inv.png)}
.ftr-brand .wd{height:16px}
.ftr-claim{display:block;margin-top:9px;font-size:9.5px;font-weight:600;letter-spacing:.15em;
  color:var(--on-dark-2);direction:ltr;unicode-bidi:isolate}

/* ---- Startseite: Bilder nach Referenz ---- */
.hero-pic{position:relative}
.hero-pic img{display:block;width:100%;height:auto;mix-blend-mode:multiply;margin-block:-2% -4%}
.soon-split{display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.soon-art{position:relative}
.soon-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.soon-note{position:absolute;inset-inline-start:2%;inset-block-end:-6px;font-size:clamp(16px,1.6vw,21px);transform:rotate(-6deg);color:var(--ink-2)}
.soon-copy .lead{margin-top:12px}
.soon-sub{margin:20px 0 10px;font-size:14.5px;color:var(--ink-2)}
.soon-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.soon-list li{display:flex;gap:12px;align-items:flex-start}
.soon-list .ic{flex:none;width:34px;height:34px;border-radius:10px;background:var(--cream-2);display:grid;place-items:center}
.soon-list .ic svg{width:17px;height:17px;stroke:var(--bronze-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.soon-list b{font-family:var(--body);font-size:14.5px;font-weight:600}
.soon-list em{font-style:normal;font-size:10.5px;padding:2px 8px;margin-inline-start:4px;vertical-align:1px}
.soon-list li>span>span{display:block;font-size:13.5px;color:var(--ink-3);line-height:1.5;margin-top:2px}
@media (max-width:980px){.soon-split{grid-template-columns:1fr}.soon-note{display:none}}