@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/manrope-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-latin-800-normal.woff2') format('woff2')}
/* Ersatzschrift mit den Massen von Manrope. Bis die Schrift geladen ist (font-display:swap),
   stand bisher Segoe UI da, 3-5 % schmaler: Nach dem Tausch brachen Zeilen anders um, der Hero
   sprang (Desktop CLS bis 0,027 auf den Leistungsseiten, 0,034 auf der neuen Startseite). Arial,
   auf Manrope-Breite skaliert, bricht genauso um. Werte im Browser gemessen (Breite Manrope : Arial
   je Gewicht, Ober-/Unterlaenge 1,066/0,300 em); die Overrides werden mit size-adjust mitskaliert,
   daher Wert/size-adjust. Ohne Arial (Android) greift wie bisher die naechste Schrift im Stapel.
   500 fehlt bewusst, das Gewicht wird nirgends verwendet. Gilt fuer alle Seiten (frueher nur start.css). */
@font-face{font-family:'Manrope Fallback';src:local('Arial'),local('ArialMT');font-weight:400;size-adjust:102.82%;ascent-override:103.68%;descent-override:29.18%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:99.58%;ascent-override:107.05%;descent-override:30.13%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:101.25%;ascent-override:105.28%;descent-override:29.63%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:102.94%;ascent-override:103.56%;descent-override:29.14%;line-gap-override:0%}
/* Versalien (text-transform:uppercase) sind in Arial Bold deutlich breiter als in Manrope: Manrope
   erreicht dort nur 93-96 % der Arial-Breite statt 101 % wie bei gemischtem Text. Mit der normalen
   Ersatzschrift brach z. B. das Hero-Label auf dem Handy zweizeilig um und sprang beim Schriftwechsel
   zurueck. Deshalb eine eigene, an den Versal-Texten der Seiten gemessene Ersatzschrift (--font-caps). */
@font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:600;size-adjust:92.9%;ascent-override:114.75%;descent-override:32.29%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:700;size-adjust:93.9%;ascent-override:113.53%;descent-override:31.95%;line-gap-override:0%}
@font-face{font-family:'Manrope Fallback Caps';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:800;size-adjust:96.1%;ascent-override:110.93%;descent-override:31.22%;line-gap-override:0%}

:root{
  /* Farbwerte sind auf WCAG 2.1 AA geprueft (Kontrast in Klammern):
     --accent  Text auf weiss 5.12 / auf --soft 4.73 / weiss darauf 5.12 / auf --dark 3.54
     --muted   Text auf weiss 5.07 / auf --soft 4.68
     --warn    Text auf --warn-bg 4.89
     --field   Feldrand gegen weiss 3.26 (1.4.11 Nicht-Text-Kontrast)
     Beim Aufhellen eines dieser Werte faellt der jeweilige Kontrast unter 4.5 bzw. 3.0. */
  --accent:#2A62F0; --accent-dark:#1E50D8; --accent-soft:#EAF0FF;
  --ink:#14161B; --text:#3C424B; --muted:#696F78;
  --bg:#FFFFFF; --soft:#F5F6F8; --line:#E7E9ED; --field:#888F9B; --dark:#14161B;
  --ok-bg:#E6F6EE; --ok:#127a4f; --warn-bg:#FFF3DE; --warn:#8F6200;
  --font:'Manrope','Manrope Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-caps:'Manrope','Manrope Fallback Caps','Segoe UI',system-ui,-apple-system,sans-serif;
  --r:16px; --shadow:0 24px 50px -30px rgba(20,22,27,.35); --chip:0 12px 30px -12px rgba(20,22,27,.25);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Alle Versal-Elemente (text-transform:uppercase) mit der Versal-Ersatzschrift, siehe oben. Neue
   Versal-Elemente hier ergaenzen. */
.label,.card-panel .top em,.gauge .num small,.plan .pt,.f-col h3,.stat .c,.proj .pchip,.cmp td::before,.qc-pk span{font-family:var(--font-caps)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.025em}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}.skip:focus{left:8px}
svg{display:block}.ico{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.h-sec{font-size:clamp(30px,4.6vw,52px);letter-spacing:-.03em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);margin-top:16px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto;max-width:62ch}
section{padding:clamp(64px,8vw,108px) 0}
.soft{background:var(--soft)}.divide{border-top:1px solid var(--line)}
.mt14{margin-top:14px}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:700;font-size:16px;padding:15px 28px;border-radius:10px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,color .15s,border-color .15s}
.btn .ico{width:18px;height:18px}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

header{position:fixed;inset:0 0 auto;z-index:200;border-bottom:1px solid transparent;transition:background .25s,border-color .25s,box-shadow .25s}
header.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(20,22,27,.03)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:block}.logo img{display:block;height:36px;width:auto}
.nav-links{display:flex;gap:30px}.nav-links a{font-size:15px;font-weight:600;color:var(--text);transition:color .15s}.nav-links a:hover{color:var(--accent)}
.nav-r{display:flex;align-items:center;gap:14px}
.burger{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:6px}.burger .ico{width:27px;height:27px}
.mobile{display:none;background:#fff;border-bottom:1px solid var(--line);padding:8px 0 16px}.mobile a{display:block;padding:11px 24px;font-weight:700;color:var(--ink)}
@media(max-width:980px){.nav-links,.nav-r .btn{display:none}.burger{display:block}.mobile.open{display:block}}

.hero{padding:148px 0 86px;background:radial-gradient(120% 80% at 80% 0%, #F7FAFF 0%, #FFFFFF 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
/* Grid-Items duerfen unter ihre min-content-Breite schrumpfen. Ohne das sprengt ein
   langer, unumbrechbarer String (z. B. ein Dateipfad) das gesamte Seitenlayout. */
.hero-grid>*{min-width:0}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero h1{font-size:clamp(36px,5.8vw,66px);letter-spacing:-.035em;margin-top:20px}
.hero h1 .rot{color:var(--accent);display:inline-block;transition:opacity .22s,transform .22s}
/* Wortwechsel im H1: Der Begriff steht auf einer eigenen Zeile, seine Breite kann den
   Zeilenumbruch des restlichen Satzes also nicht mehr veraendern. Die Blindwoerter liegen
   in derselben Grid-Zelle und halten zusaetzlich die Hoehe fest, falls ein laengerer
   Begriff auf schmalen Displays zweizeilig umbricht. Ohne das verschiebt jeder Wechsel
   den halben Hero nach unten (CLS 0,19 auf dem Handy). */
.hero h1 .rot.rot-ready{display:grid;justify-items:start;transition:none}
/* Ohne Umbrucherlaubnis setzt ein langer Begriff ("zusammenarbeiten") die Mindestbreite
   der Grid-Spalte und sprengt auf 320px-Displays das Layout. */
.hero h1 .rot.rot-ready>*{grid-area:1/1;overflow-wrap:anywhere;hyphens:auto}
.hero h1 .rot .rot-ghost{visibility:hidden}
.hero h1 .rot .rot-word{transition:opacity .22s,transform .22s}
/* Breite in em statt ch (21.10.2026): ch haengt von der Schrift ab (Manrope 0.61em, Ersatzschrift
   0.57em). Mit 52ch war die Zeile vor dem Laden von Manrope 6 % schmaler und brach anders um
   (Layout-Sprung zwischen 600 und 900 px). 31.72em = 52ch in Manrope, dort aendert sich nichts. */
.hero .sub{margin-top:22px;font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:31.72em}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.hero .small{margin-top:26px;font-size:14px;color:var(--muted)}

.card-panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.card-panel .top{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--soft)}
.card-panel .top i{width:11px;height:11px;border-radius:50%;background:#D8DCE2;display:block}
.card-panel .top span{margin-left:8px;font-size:13px;font-weight:600;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-panel .top em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:#fff;border:1px solid var(--line);padding:3px 9px;border-radius:99px}

/* Gauge */
.perf .bd{padding:26px 26px 28px;display:flex;gap:26px;align-items:center}
@media(max-width:420px){.perf .bd{flex-direction:column;gap:18px}}
.gauge{position:relative;width:128px;height:128px;flex:0 0 auto}.gauge svg{width:128px;height:128px}
.gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gauge .num b{font-size:34px;font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1}
.gauge .num small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.metrics{flex:1;min-width:0;width:100%}
.metric{margin-bottom:16px}.metric:last-child{margin-bottom:0}
.metric .mt{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px}
.metric .mt .k{color:var(--muted);font-weight:600}.metric .mt .v{color:var(--ink);font-weight:800}
.bar{height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--accent);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

/* Scan */
.scan .bd{padding:8px 22px 18px}
.row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}
.row .k{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--ink);font-size:15px}.row .k .ico{width:18px;height:18px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:99px;padding:5px 11px;background:var(--soft);color:var(--muted);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.badge.show{opacity:1;transform:none}.badge .ico{width:14px;height:14px}
.badge.ok{background:var(--ok-bg);color:var(--ok)}.badge.warn{background:var(--warn-bg);color:var(--warn)}

/* Code */
.code{background:var(--dark);border:1px solid #1f232b}
.code .top{background:#1b1e25;border-bottom-color:rgba(255,255,255,.08)}
.code .top i{background:rgba(255,255,255,.18)}.code .top span{color:rgba(255,255,255,.55)}
.code pre{padding:22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;color:#e6e8ec;overflow-x:auto}
.code .c{color:#7b828c}.code .s{color:#9aa1ac}.code .k{color:#9fc1ff}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.svc-grid{grid-template-columns:1fr}}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;transition:transform .18s,box-shadow .18s,border-color .18s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.svc .sq{width:52px;height:52px;border-radius:13px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}.svc .sq .ico{width:25px;height:25px}
.svc h3{font-size:20px;margin-bottom:9px}.svc p{font-size:15px;color:var(--text)}

.signs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto}
@media(max-width:680px){.signs{grid-template-columns:1fr}}
.sign{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.sign .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--warn-bg);color:var(--warn);display:flex;align-items:center;justify-content:center}.sign .ic .ico{width:18px;height:18px}
.sign p{font-size:15px;color:var(--text)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 24px}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{border-top:2px solid var(--accent-soft);padding-top:18px}
.step .n{font-size:15px;font-weight:800;color:var(--accent)}.step h3{font-size:18px;margin:10px 0 8px}.step p{font-size:14.5px;color:var(--text)}

.nots{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:900px;margin:0 auto}
@media(max-width:680px){.nots{grid-template-columns:1fr}}
.not{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--text)}
.not .ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;margin-top:1px}.not .ic .ico{width:15px;height:15px}
.not b{color:var(--ink);font-weight:700}

.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.strip .chip{font-weight:600;font-size:16px;color:var(--text);border:1px solid var(--line);border-radius:100px;padding:9px 18px;background:#fff}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.plan{background:#fff;border:1px solid var(--line);border-radius:20px;padding:34px 30px;position:relative}
.plan.pop{border:2px solid var(--accent);box-shadow:var(--shadow)}
.plan .pt{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:100px}
.plan h3{font-size:22px;margin-bottom:4px}.plan .for{font-size:14.5px;color:var(--muted);margin-bottom:20px}
.plan .price{font-size:24px;font-weight:800;color:var(--ink);padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px;letter-spacing:-.02em}
.plan ul{list-style:none;display:grid;gap:13px;margin-bottom:26px}.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px}.plan li .ico{width:19px;height:19px;flex:0 0 auto;margin-top:3px;color:var(--accent)}
.plan .btn{width:100%;justify-content:center}

.faq-list{max-width:780px;margin:0 auto}
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;font-size:17px;font-weight:700;color:var(--ink);padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .pm{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;transition:transform .2s}
.faq.open .faq-q .pm{transform:rotate(45deg)}
.faq-a-in{padding:0 22px 20px;color:var(--text);font-size:15.5px}
/* Auf- und Zuklappen ueber die Grid-Zeilenhoehe (0fr/1fr) statt ueber max-height in Pixeln.
   Die Pixelvariante musste beim Oeffnen ausgemessen werden und blieb danach eingefroren:
   Nach dem Drehen des Handys war die Antwort abgeschnitten. Ohne Skript greift der Block
   nicht, dann stehen alle Antworten offen da statt unerreichbar zu sein.
   Muss NACH der Basisregel stehen: @media erhoeht die Spezifitaet nicht. */
@media(scripting:enabled){
  .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .faq.open .faq-a{grid-template-rows:1fr}
  .faq-a>*{min-height:0;overflow:hidden}
  /* Der Innenabstand muss mitwandern: Padding laesst sich nicht auf 0 stauchen und wuerde
     sonst 20px toten Streifen unter jeder geschlossenen Frage stehen lassen. */
  .faq-a-in{padding-bottom:0;transition:padding-bottom .25s ease}
  .faq.open .faq-a-in{padding-bottom:20px}
}

.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px}@media(max-width:900px){.ct-grid{grid-template-columns:1fr;gap:36px}}
.ct-h{font-size:clamp(28px,4.2vw,46px)}
.mail{display:inline-flex;align-items:center;gap:11px;font-size:clamp(18px,2.2vw,24px);font-weight:800;color:var(--ink);margin-top:22px}.mail .ico{width:21px;height:21px;color:var(--accent);transition:transform .15s}.mail:hover .ico{transform:translateX(4px)}
.ct dl{margin-top:28px;display:grid;gap:15px;font-size:14.5px}.ct dt{color:var(--muted)}.ct dd{color:var(--ink);font-weight:600;margin-top:3px}
/* Terminlink (Google Kalender) im Kontaktbereich: unterstrichen, weil a{color:inherit} ihn sonst
   wie Text aussehen liesse (Akzent auf Weiss 5.1:1). */
.ct dd a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.ct dd a:hover{color:var(--accent-dark)}
.form{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)}
.form .f{margin-bottom:16px}.form label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:7px}
/* --field statt --line: Die Fuellung (--soft) hebt sich mit 1.08:1 nicht von der weissen
   Formularkarte ab, das Feld ist also allein am Rand erkennbar. Der braucht dafuer 3:1. */
.form input,.form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--soft);border:1px solid var(--field);border-radius:11px;padding:13px 15px}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
/* Chrome faerbt Platzhalter standardmaessig #757575, auf der grauen Fuellung nur 4.26:1.
   opacity:1 ist noetig, weil Firefox Platzhalter sonst zusaetzlich transparent zeichnet. */
.form input::placeholder,.form textarea::placeholder{color:var(--muted);opacity:1}
.form textarea{min-height:120px;resize:vertical}.form .btn{width:100%;justify-content:center}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.5;margin:4px 0 18px}.consent input{margin-top:3px;accent-color:var(--accent);width:auto}.consent a{color:var(--accent);text-decoration:underline}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

footer{background:var(--dark);color:#aab0ba;padding:60px 0 34px}
.f-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.f-brand{max-width:300px}.f-brand .logo{display:inline-block;margin-bottom:12px}.f-brand .logo img{filter:brightness(0) invert(1)}.f-brand p{font-size:14.5px}
/* h3 statt h4: Davor steht zuletzt ein h2, der Sprung auf h4 uebersprang eine Ebene.
   Die Optik bleibt bewusst klein - Ueberschriftenrang und Schriftgroesse sind zweierlei. */
.f-col h3{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}.f-col a{display:block;color:#aab0ba;font-size:14.5px;padding:5px 0;transition:.15s}.f-col a:hover{color:#fff}
.f-bot{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:#7e858f}

.cc{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:250;max-width:30rem;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 30px 60px -28px rgba(20,22,27,.35);padding:22px 22px 18px}
@media(min-width:640px){.cc{left:1.5rem;right:auto}}
.cc[hidden]{display:none}
.cc h4{font-size:15px;color:var(--ink)}.cc p{font-size:14px;color:var(--text);margin-top:8px}.cc p a{color:var(--accent);text-decoration:underline}
.cc .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding:0;border:0}
.cc .b{font-family:inherit;font-weight:700;font-size:14px;border-radius:10px;padding:11px 18px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);transition:.15s}.cc .b:hover{border-color:var(--ink)}
.cc .b.pri{background:var(--accent);color:#fff;border-color:var(--accent)}.cc .b.pri:hover{background:var(--accent-dark)}

/* Nur bei aktivem JavaScript ausblenden, sonst bliebe der Inhalt ohne JS unsichtbar.
   Browser ohne (scripting)-Support ueberspringen den Block und zeigen alles sofort. */
@media(scripting:enabled){
  [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
  [data-reveal].in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){[data-reveal],.badge{opacity:1;transform:none;transition:none}.btn,.svc,.bar i,.hero h1 .rot,.hero h1 .rot .rot-word,.faq-a,.faq-q .pm{transition:none}}

/* ===== Startseite ===== */
.hero.xl h1{font-size:clamp(38px,6.4vw,72px)}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.avail .d{width:8px;height:8px;border-radius:50%;background:#16A34A;box-shadow:0 0 0 4px rgba(22,163,74,.14)}
@media(max-width:980px){.nav-r .avail{display:none}.nav-r .btn.always{display:inline-flex}}
/* Auf schmalen Displays wird der Button sonst zweizeilig (87px hoch) und ragt aus dem
   78px hohen Header heraus, direkt ueber das Logo. */
@media(max-width:420px){.nav-r .btn.always{padding:11px 15px;font-size:15px;white-space:nowrap}}
.stats{background:var(--dark);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:center}
@media(max-width:760px){.stats-grid{grid-template-columns:1fr 1fr;gap:40px 20px}}
.stat .n{font-size:clamp(40px,6vw,60px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.stat .n .s{color:var(--accent)}
.stat .c{margin-top:11px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9aa1ac}
.svc-note,.proj-note,.val-note{text-align:center;color:var(--muted);font-size:15px;margin-top:30px}
.svc-note a{color:var(--accent);font-weight:700}
.val-note a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
a.svc{display:block}
.tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:32px 0 38px}
.tab{font-family:inherit;font-size:14.5px;font-weight:700;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:100px;padding:9px 20px;cursor:pointer;transition:.15s}
/* Zustand haengt direkt an aria-pressed, damit Optik und Vorlesetext nicht auseinanderlaufen
   koennen. Vorher trug eine .active-Klasse die Optik und die ARIA fehlte ganz. */
.tab:hover{border-color:var(--accent);color:var(--accent)}.tab[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Nur fuer Vorlesehilfen: meldet nach dem Filtern, was jetzt zu sehen ist. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.proj-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.proj-grid{grid-template-columns:1fr}}
.proj{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s}
.proj:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.proj .ptop{height:148px;display:flex;align-items:center;justify-content:center;position:relative;color:#fff}
.proj .ptop .ico{width:38px;height:38px;opacity:.95}
.proj .ptop.a{background:var(--accent)}.proj .ptop.d{background:var(--dark)}.proj .ptop.s{background:#3F4754}
/* Dunkles statt hellem Glas: weisser Text auf der aufgehellten blauen Kachel kam nur auf
   3.37:1. Abgedunkelt sind es 8.6:1 (blau), 18.1:1 (dunkel), 11.6:1 (grau). */
.proj .pchip{position:absolute;top:14px;left:14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(20,22,27,.32);color:#fff;border-radius:100px;padding:5px 12px}
.proj .info{padding:22px 22px 24px}.proj .info h3{font-size:18px;margin-bottom:6px}.proj .info p{font-size:14.5px;color:var(--muted)}
.proj.hide{display:none}
.cta{background:var(--dark);color:#fff;text-align:center}
.cta .label{color:#9aa1ac}
.cta h2{color:#fff;font-size:clamp(30px,5vw,56px);max-width:20ch;margin:14px auto 28px}
.cta h2 em{font-style:normal;color:var(--accent)}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(max-width:820px){.val-grid{grid-template-columns:1fr}}
.val{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px 28px}
.val .sq{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.val .sq .ico{width:23px;height:23px}
.val h3{font-size:19px;margin-bottom:8px}.val p{font-size:15px;color:var(--text)}
/* Bewertungen unter "Warum Kunden mit mir arbeiten" (Startseiten), wortgetreu aus Malt. Schlicht
   wie .val: keine Avatare, kein grosses Anfuehrungszeichen. Drei Spalten erst ab 1001px, darunter
   eine Spalte mit begrenzter Breite (die lange Bewertung wuerde sonst sehr hoch).
   Sterne (.rev-stars) zeigen die tatsaechliche Bewertung auf Malt (laut Inhaber je 5 von 5,
   21.10.2026): eine SVG mit fester Groesse, Name "5 von 5 Sternen" im aria-label, Farbe #D97706
   auf Weiss 3.19:1 (Grafik mind. 3:1). Bei neuen Bewertungen die echte Sternzahl uebernehmen. */
.rev-h{text-align:center;font-size:clamp(20px,2.4vw,24px);margin-top:clamp(48px,6vw,72px)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px}
@media(max-width:1000px){.rev-grid{grid-template-columns:1fr;max-width:640px;margin-left:auto;margin-right:auto}}
.rev{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.rev-stars{display:block;width:90px;height:17px;fill:#D97706}
.rev blockquote{margin:0}.rev blockquote p{font-size:15.5px;color:var(--text)}
.rev figcaption{margin-top:auto;padding-top:4px;font-size:14.5px;color:var(--ink)}.rev figcaption span{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.steps.s3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.steps.s3{grid-template-columns:1fr 1fr}}@media(max-width:520px){.steps.s3{grid-template-columns:1fr}}
.founder{background:var(--soft)}
.founder-wrap{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:center}
@media(max-width:760px){.founder-wrap{grid-template-columns:1fr;gap:28px;text-align:center}}
.avatar{width:200px;height:200px;border-radius:24px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:72px;font-weight:800;letter-spacing:-.04em;margin:0 auto}
@media(max-width:760px){.avatar{width:150px;height:150px;font-size:54px}}
.founder .quote{font-size:clamp(22px,3vw,32px);font-weight:800;color:var(--ink);line-height:1.3;margin:10px 0 20px;letter-spacing:-.02em}
.founder .quote em{font-style:normal;color:var(--accent)}
.founder .name{font-size:19px;font-weight:800;color:var(--ink)}.founder .role{color:var(--muted);font-size:15px;margin-bottom:16px}
.founder .socials{display:flex;gap:12px;flex-wrap:wrap}@media(max-width:760px){.founder .socials{justify-content:center}}
.founder .socials a{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.founder .socials a:hover{border-color:var(--accent);color:var(--accent)}.founder .socials .ico{width:19px;height:19px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:560px){.form .two{grid-template-columns:1fr}}
.form fieldset{border:0}
.form legend{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:10px}
.scope{display:flex;flex-wrap:wrap;gap:8px}
.scope label{cursor:pointer}
.scope input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.scope span{display:inline-block;border:1px solid var(--field);border-radius:100px;padding:8px 15px;font-size:14px;font-weight:600;color:var(--text);transition:.15s}
.scope label:hover span{border-color:var(--accent);color:var(--accent)}
.scope input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.scope input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Rechtsseiten ===== */
.first{padding-top:150px}
/* Lange Komposita ("Verbraucherstreitbeilegung", "Datenschutz-Aufsichtsbehoerde") passen
   auf 320px-Displays in keine Zeile. Ohne Umbruch schneidet body{overflow-x:hidden} sie ab. */
.legal{max-width:820px;overflow-wrap:break-word;hyphens:auto}
/* 24px bei 320px Breite: "Datenschutzerklaerung" passt damit noch in eine Zeile. Groesser
   bricht das Wort mitten durch, denn auf hyphens:auto ist kein Verlass (Chrome laedt das
   deutsche Trennwoerterbuch erst bei Bedarf nach). */
.legal h1{font-size:clamp(24px,7vw,48px);margin-top:14px}
.legal h2{font-size:23px;margin:38px 0 10px}
.legal h3{font-size:18px;margin:26px 0 8px}
.legal p{margin:10px 0;font-size:16px}
.legal ul{margin:10px 0 10px 22px}
.legal li{margin:6px 0;font-size:16px}
.legal .todo{background:var(--warn-bg);border:1px solid #f0deb6;color:#6b4d00;border-radius:12px;padding:16px 18px;font-size:14.5px;margin:24px 0}
.legal .todo b{color:#6b4d00}
.legal .ph{background:var(--accent-soft);border-radius:6px;padding:1px 7px;font-weight:700;color:var(--accent-dark)}

/* ===== Sitemap (sitemap/index.html) ===== */
/* Liste ohne Punkte, daher role="list" am <ul> (Safari/VoiceOver, wie .steps). .legal .sm schlaegt
   .legal ul/.legal li per Spezifitaet. Links blau und unterstrichen, weil a{color:inherit} oben
   sie sonst unsichtbar macht. Ab 760px zwei Spalten je Gruppe. */
.legal .sm{list-style:none;margin:14px 0 0;display:grid;gap:12px}
.legal .sm li{margin:0;min-width:0}
.legal .sm a{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal .sm a:hover{color:var(--accent-dark)}
.legal .sm span{display:block;color:var(--muted);font-size:15px;margin-top:2px}
@media(min-width:760px){.legal .sm{grid-template-columns:1fr 1fr;gap:16px 32px}}

/* ===== Grafiken ===== */
.media{margin:0 auto;max-width:960px;border-radius:18px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.media img{display:block;width:100%;height:auto}
.media.band{margin-top:clamp(40px,5vw,64px)}
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,58px);align-items:center}
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:34px}}

/* ===== Vergleich und Umzug (shopware-zu-woocommerce) ===== */
/* Echte Tabelle statt Div-Raster: Vorlesehilfen sagen Zeilen- und Spaltenkopf an. Die
   role-Attribute im HTML halten diese Semantik auch dann, wenn die Zellen unten per
   display:block zu Karten werden (Safari verwirft sie sonst). */
.cmp{width:100%;max-width:960px;margin:0 auto;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-size:15px;line-height:1.55}
.cmp th,.cmp td{padding:16px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--soft);color:var(--ink);font-size:14px;font-weight:800}
.cmp thead th:first-child{border-top-left-radius:calc(var(--r) - 1px)}.cmp thead th:last-child{border-top-right-radius:calc(var(--r) - 1px)}
.cmp tbody th{width:24%;color:var(--ink);font-weight:700}
.cmp a{color:var(--accent);text-decoration:underline}
@media(min-width:720px){.cmp tbody tr:last-child>*{border-bottom:0}.cmp.map tbody th{width:42%}}
.cmp-note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px}
/* Unter 720px wird jede Zeile eine Karte, der Spaltenname steht per ::before vor der Zelle.
   Die zweite content-Angabe blendet ihn fuer Vorlesehilfen aus, die den Spaltenkopf schon
   selbst ansagen. Browser ohne diese Schreibweise verwerfen sie und nehmen die erste. */
@media(max-width:719px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp{background:none;border:0;border-radius:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cmp tbody tr{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
  .cmp tbody th{width:auto;padding:14px 18px;background:var(--soft)}
  .cmp td{border-bottom:0;padding:12px 18px 0}
  .cmp td:last-child{padding-bottom:16px}
  .cmp td::before{content:attr(data-label);content:attr(data-label) / "";display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:960px;margin:clamp(40px,5vw,64px) auto 0}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit-grid .plan ul{margin-bottom:0}
.url-panel{max-width:760px;margin:clamp(40px,5vw,64px) auto 0}
/* Umbrechen statt seitlich scrollen: Eine scrollbare Region ohne Tastaturfokus ist per
   Tastatur nicht erreichbar (axe: scrollable-region-focusable). */
.code pre.pw{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}

/* ===== Fristen, Wegweiser und Wortwechsel (e-rechnung-einrichten; .qc ist generisch) ===== */
/* Wortwechsel mit data-once (app.js): Platzhalter fuer die Breite ist das breiteste Wort als
   Pseudo-Element in derselben Grid-Zelle, nicht als Blindwoerter im DOM (wie start.css, .ex h1). */
.hero h1 .rot.rot-ready[data-ghost]::after{content:attr(data-ghost);grid-area:1/1;visibility:hidden;overflow-wrap:anywhere;hyphens:auto}
/* Zeitleiste mit Datum statt Nummer: .steps als <ol role="list"> (die Reihenfolge ist Inhalt;
   role="list", weil Safari/VoiceOver Listen mit list-style:none sonst nicht als Liste ansagt). Das
   Datum ist hier die Hauptinformation, daher groesser. Der Punkt auf der Linie ist Dekoration. */
.steps.dates{list-style:none}
.steps.dates .step{position:relative}
.steps.dates .step::before{content:'';position:absolute;left:0;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.steps.dates .step .n{font-size:clamp(18px,1.9vw,21px);line-height:1.3;letter-spacing:-.02em}

/* Wegweiser: generische Fassung von .ww- (start.css). Native Radio-Gruppe, die Antworten blendet CSS
   ueber :has() ein, auch ohne JS. Zuordnung per ID: #qc-rN zeigt #qc-aN (bis 8 Optionen, sonst die
   Liste unten verlaengern). Darin nie .badge, .row, .tab, .count oder .rot verwenden: belegt app.js. */
.qc-box{max-width:960px;margin:0 auto}
.qc-q{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.qc-q label{position:relative;cursor:pointer}
/* Unsichtbar, aber so gross wie der Chip (nicht width:0): VoiceOver steuert das Radio zuverlaessig
   an, und beim Tabben scrollt der Browser den ganzen Chip ins Bild. */
.qc-q input{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.qc-q span{display:inline-block;padding:10px 18px;border:1px solid var(--field);border-radius:100px;background:#fff;font-size:15px;font-weight:700;color:var(--text);transition:background .15s,color .15s,border-color .15s}
.qc-q label:hover span{border-color:var(--accent);color:var(--accent)}
.qc-q input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.qc-q input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.qc-ans{margin-top:30px}
.qc-a,.qc-empty{background:#fff;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px)}
.qc-a+.qc-a{margin-top:16px}
.qc-a h3{font-size:clamp(20px,2.2vw,24px)}
.qc-a p{margin-top:10px;max-width:66ch}
.qc-a .qc-pk{margin-top:16px;font-size:15px;font-weight:600;color:var(--ink)}
.qc-pk span{display:inline-block;margin-right:8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.qc-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px}
.qc-more{font-size:15px;color:var(--muted)}
.qc-more a,.qc-empty a{font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* Ohne :has() stehen alle Antworten als schlichte Liste da, ein Leerzustand ergibt dort keinen Sinn. */
.qc-empty{display:none}
/* Antworten und Leerzustand liegen in EINER Grid-Zelle: Die Hoehe richtet sich nach der laengsten
   Antwort, beim Wechsel springt nichts. visibility:hidden nimmt verdeckte Antworten aus der
   Tab-Reihenfolge und dem Vorlesebaum. */
@supports selector(:has(*)){
  .qc-ans{display:grid}
  .qc-ans>*{grid-area:1/1}
  .qc-a+.qc-a{margin-top:0}
  .qc-empty{display:flex;align-items:center;justify-content:center;text-align:center;background:transparent;border-style:dashed;border-color:var(--field);color:var(--muted);transition:opacity .2s,visibility 0s .2s}
  .qc-a{visibility:hidden;opacity:0;translate:0 8px;transition:opacity .3s,translate .3s,visibility 0s .3s}
  .qc:has(#qc-r1:checked) #qc-a1,.qc:has(#qc-r2:checked) #qc-a2,.qc:has(#qc-r3:checked) #qc-a3,.qc:has(#qc-r4:checked) #qc-a4,
  .qc:has(#qc-r5:checked) #qc-a5,.qc:has(#qc-r6:checked) #qc-a6,.qc:has(#qc-r7:checked) #qc-a7,.qc:has(#qc-r8:checked) #qc-a8{visibility:visible;opacity:1;translate:none;transition-delay:0s}
  /* Nur Zustand, keine eigene transition: Sonst verliert die Regel fuer reduzierte Bewegung unten
     gegen die hoehere Spezifitaet von :has(). */
  .qc:has(.qc-q input:checked) .qc-empty{visibility:hidden;opacity:0}
}
/* Muss hinter den Regeln oben stehen: @media erhoeht die Spezifitaet nicht. */
@media(prefers-reduced-motion:reduce){.qc-q span,.qc-a,.qc-empty{transition:none}}

/* ===== Rechner (ki-automatisierung) ===== */
/* Rechnet nur im Browser (app.js, [data-calc]), gesendet wird nichts. Die Felder nutzen die
   Formular-Optik (class="form calc"). Im HTML steht schon das Ergebnis der Startwerte: Ohne JS
   fallen die Felder weg, und dasselbe Ergebnis steht als festes Beispiel da. */
.calc{max-width:760px;margin:clamp(40px,5vw,64px) auto 0}
.calc h3{font-size:clamp(20px,2.2vw,24px)}
.calc-intro{margin-top:8px;font-size:15px;color:var(--muted)}
.calc .two{margin-top:22px}.calc .two .f{margin-bottom:0}
.calc-nojs{display:none;margin-top:18px;font-size:15px;color:var(--muted)}
.calc-res{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.calc-res b{display:block;font-size:clamp(28px,4vw,40px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.15}
.calc-note{margin-top:12px;font-size:14px;color:var(--muted)}
@media(scripting:none){.calc-in{display:none}.calc-nojs{display:block}}

/* ===== Aktueller Hinweis (wordpress-gehackt: PHP-Luecken, Stand 21.10.2026) ===== */
/* Schlichter, datierter Kasten direkt unter dem Hero, ohne Symbol. Zum Entfernen nur die
   <section class="notice"> im HTML loeschen, die Regeln hier stoeren nicht. Kontraste auf
   --warn-bg: Text 9.2:1, Links 6.0:1 (Hover 4.7:1), Stand-Zeile 7.1:1. Links unterstrichen,
   weil sich ihre Farbe vom Text nicht genug abhebt. */
section.notice{padding:0 0 clamp(48px,6vw,80px)}
.notice-box{max-width:860px;background:var(--warn-bg);border:1px solid #f0deb6;border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.notice-box h2{font-size:clamp(20px,2.6vw,25px);line-height:1.25;letter-spacing:-.01em}
.notice-box p{margin-top:10px;font-size:16px;color:var(--text)}
.notice-box a{color:var(--accent-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.notice-box .stand{margin-top:14px;font-size:14px;color:#6b4d00}
.notice-box .nw{white-space:nowrap}
/* Druck: alle Antworten untereinander, ohne Auswahl. [data-reveal] und .badge waeren sonst
   unsichtbar, solange nicht hineingescrollt wurde (gilt fuer alle Seiten). */
@media print{
  [data-reveal],.badge{opacity:1!important;transform:none!important}
  .cc,.qc-q,.qc-empty{display:none!important}
  .qc-ans{display:block!important}
  .qc-a{visibility:visible!important;opacity:1!important;translate:none!important}
  .qc-a+.qc-a{margin-top:16px!important}
}