/* ============ FONTS ============ */
/* Red Hat Display fuer Ueberschriften, Red Hat Text fuer Lesetext. Neu am 17.09.2026:
   Inter steht auf der Verbotsliste (kleim-stil §3), Bricolage ist in fuenf Kundenseiten. */
@font-face{font-family:'Red Hat Display';font-style:normal;font-weight:700;font-display:swap;src:url(/f/red-hat-display-700.woff2) format('woff2')}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:400;font-display:swap;src:url(/f/red-hat-text-400.woff2) format('woff2')}
@font-face{font-family:'Red Hat Text';font-style:normal;font-weight:700;font-display:swap;src:url(/f/red-hat-text-700.woff2) format('woff2')}


/* ============ TOKENS ============ */
.kw-mark{display:inline-block;flex-shrink:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAFACAMAAAD6TlWYAAAAwFBMVEXtm2Lz5NT0zKkdLjhqTTbrtI2lWCn7+fH0hDfVbCpRNifh5OJmU0sfL0T4rqz4z6v997D87dXnt5j/AACeZ0bYeUS8eTb//3+vqGj/r2PtzbT/c3PUtaG1bGzpnXL/dgewsLCfoaX//wDjnGqCPBR/AAAAAP9/f3+0nI0A//9/fwA7RVC/wcK86PMAVf9//3//vz/xcBsAAAD+/v4rMjvzbBfzcyP+/v73mlf4/fLytYkrMkEnLDK+///ubSKvUxehgzUwAAAAQHRSTlP7/Pj///r/Xv7//xj//wekBJegAf//AwIPA2wCaQOdAgP/AXn/AgECTAEC//8XAwIE/gD///7+A/Yrxv//BP7/msgEUQAAFRZJREFUeNrtnYl64jgSgGUTY44AIXfS5/bs7H1ZjSQIHvX7v9VWySaAsS35CraRvunpnmkg8Z8q1aGqEqF2VVrEIrAALUAL0AK0ywK0AM+7xMcDFH8V8+cvj4+P3SR29/j45fn7XAhxBgkU4unl8eC/urj2JOfPgk7LciwBUMzvYm7T1+fPn3+7fevkuv3t8+e/zacbBe4u/r15gNEPSvwxff1K1oTw0YjzIAh415b6lkd8BA/xtvCnkSSKxgGKG0qnG3/5tiYjznqygtGIfL31UTReRKMABWx7wl94hEv1hYP999DhFX3/nBDX34AY3oimAIov8OsV6MXAInKyy/jUI0j1APgYa3Lrv+9SdQMEy7HZfPZIx8UtE2XEcAQIQQxvagcoXmDvuyUj+Bo86O3iwJCvXZDC30W9AJ8A4Welu1Ky3vLDp0MxVIr8JAyDEwOA4hsVS5Q+tPz95YfsJDziTgpFXRIoqNjcrgFfZHeDPi/1hGBVuOeLqVlwogU4nYP48X5zS7En64UP4Z2BGBKd6wfiR1D8gktaYE448YWJOc4H+J1S3+MMP++iAAZMCWFlCRRoPUD2wPReFEAVmgSMgBo/VwAI2ZbNYq3YccYuDSBYErAlG/qP8gB/0I37gPIXXOhiuBHSeUmAIH+4/YEAykvFh//ygKAoAfAO9j/kB47lhRnghB4zkEFIcv1XFJVAkD9XMs7lxQKMgjswJctcS5IOcCq++K5yX1hwuQDV/oUyOJ1uNlkeDclIXokF+C/8coXvUAo9/y9FAX6i4P/1OvVSaCPE3EIhFRbCR/+Zcyt/kUfoiszTEpIagGw85YvbFeX6GXHEX80Bik/iloP+Sma3wDisQ2fGfA8U9JVYdAmK7ubHkyHAT3RDGJeW2mF6CxILGTHdCUDxHRX44vJXWhkk/t3cCOALXa4xf2qV+MiOBMxNr+MipzkEgvJnfehESMIyEjNJgHP6eWTZpVL0Nn8RBio8tRY4w46MlpupFuDz5pZb9y9tSVTilJNOktgBN8Taj6yNcLSkdxqAj7gDWgcmw5AwstFIIBhqj1mA6QAht7r2T0+KjwA+YxAnrQeTflIMxuFt8+NTDkDxDxRAm0PILleA9P5NDsAbTANaI5zlxmBaxj0pViBHaYSFVd9cgGBGcgACXM/yy98I1yfx3BFA30YhGoB8IT5lARRPwmqwtmbLTaamyaEGuzaNqtXhTcKZPgRo8wgGOrxM2GFyYIMtQAOAbqYf+EJfbSZQyw+yglkS+Ei/WidaDzB5wLkH+Pvfv/LAEtQBXCeiObLfAoVNBRoAHL0eu9LkyAhbAdSez/EFWIs0gN/pZwvQpGx6IY7S0u8Av9Bna0OMrMixGT4A+DduJVCbkskG+EhvRxagQTNiNsDfrARWAfhNfLUATQCuMwBS8WbdaAvwvABtOtUCtAAtQAvQLgvQArQALUC72g4wHubTreCnRQBjftwCDEoWK/4awhlg1yb6tAYgiN9kMJFq4qEFWEp/r2arwWrYtaEqLQEI/H6Fq9lqFV6Ng/yhhC0bEdwWgHw8WeHaDiZDnjNHeff/K+2Udc7uawlAHkzCVUQwDIcyGOf2mVYefsHjic2sJwDhUYbhdhUvEMKxTocrqfF+VngrARoMWk9R4EHEb6t+Q1uS9nDvg9rXxCVljTXUsnhk/T62vuogl9oBajen08ZteIzJbHW4tmBL3h1qfMTdw8JFAa7r/IRVvnuArfH9jut6+/H/8aZQQiprBogzCn8Nc9ev4fFbYM7woQLHK5ygEPJ3OQGh8yJy8SoNEAoJDj4GOO7F8QDjGQH+CvPX4OooWMM//xqA6iYQzkAIFbq90B0ttzxA9+TDHMcl8HUijlyeEWCA/lxSmo61c3Z9qOMYubHJNu0t/7wHoTt92N0zj8sSZFmf6ShxLPjINQPkyiHOXUoC2eHwhj+nviP808/cVbaLmXEn93PdYj+ZJlQ4VwJX4fX+Q1X2Sr3hRAa3Aw3AsmaYjfI/12X17YF/vBX3lHQAt4MDFcbvdZywwO+Seq0DWMUIZy+v2A/mwwGu9kYkmkg6CbMkVfegNRjh6pJ9RoCR0zXMenl4rdmrykqgpwMoWVckkEUhSNbr8wE6rGYjHH/sQ7EQ+ZwAcRipysGkvyHUACwZp0sNQFljJNI4wAwPxtQMl/NifmoEm3cGILo8qw8HOKrVCJ/ViMApSO4LG/FjdF4M6ZAEBpMw3+P+2YAZ1nkx624A3Hkw+T63zo/h9aQSKsn1+QBCCLLKf6XOj4GprrLow+oAOkXbU88EEP+ZaLIOK50VAT+mMEBdKsEJOgEQZ+8NNa8zMsPFvj2JvanajZW1XYWvsb0s0PLDtIM2Gi4mLQhwrf/MLkQikEPQ8YODES3AgoVIqjHQQKrbDXCm3Jg/6zZAA4AuKxrNycAAYNut8OzaIG1tmE4oAdDVGSbW/j0wYCqJaqDD/6o5nQAAtRmKTgCcaFzo+Iw9/FPdYZfWiyk86eose+Aw1MvfFs+GvZrDLm6USmi9HzjWejAxw2HdgX/d+fwzqfBkYAJwO7jXPa5X0IoYeTGtBwiqaSSAePyp3bEKmpHaUwnnAWi2Jg9gEHWRP5P1HojwLgDUu4D4CeE9aly9AAFP7QdV7ZTAbVS/wPVHkLzmqoSeAJzNsDSL1240DVIJfdkD77HqiNduhmv3YtoJcBsO1TWo+kqqonHXBQDcxgmbQFVJ60LXgld96ryYUQ9UGEvdVu9V+jW7Hbqfx7gXe+B2NuS7+yP0ZrjW2koZ9ADgVoUgO4C1blr6VELQ9UgE3jrDNpvdRdD1VkMafBrrwR44xFYs3kAli4lb2X2Ag+vDh9D7MXUa4TLVNm0DiBvgURdJnWZY/2Hdt8LbYfKyifqERptKKFP23zKA4f2RSEltOqFIVl+fSuBdB4gKLFnJFDLftbtFf4BcBD8+JDeqSugyQHjf+OQYjRjnT1T6IW53200G4MUi4Y4DVEnUk3NI0wwepr8Q3wh7E1X3ICKVB4dsBmEN67Absz1qAtsX9Jlv/NgfSw6MjkOOzarOID10GyAcA4+TGXrMaZn6MRi9jBK0HdwiZZEDkU470ngKkqxHM9C76H48mV445KmmfiVYBk55p2Phwf1pUQA3OwrPy9x4cjdpxsCL6WokgoUyg6uHFA0yqYiMp0Vlkcb2VSlZM6mENkngQ3p1sj6dgLlDUON1jnFVgy4ayOe3CODsPio9T7n/0+RYJK+IwSFG2e2fnHXYiITYhc1OhsWgX2HQl8DzHW6XRZ/kNtG82AqA4Wo7zrm7UiM4eFU3XPOb+xIsrQzqLg1skQTO7qs0SCPltSbe401UJbQGIBTuB5kHlPruQK2YOjjcp4GqhLYAxBE72du31gxDwxfX+MjqlKoRI9wCgFsVggSZXVv6dEKeD7PX4fprK9sigYNhrv3TVlkiQFc7C0ZbKjfuKsDBNa98kqFhrFwU3ogX0wYVfqg8p0Snneo1vKEpKucGOBhq3H+DzUsPEHS4GS/mnABVGVHcu1ltyoFuC1QK2owXc2YJ3K4m4xoqWkbOT60Oj0lDo7jOCRBeONTPDNWbYa0G41A7t48AQwhBAs3ESPhLnf109QAd6dZ/qN4CIzLGbB7TdQhqnp3oNRgkTJtK4B0EGA7V9Q2sWmWzgQDCixqYodICIwIEuc6D1RrQOpbXUYBbpcSyWllfHYt0EyD40RMZBDqA3PkAgAHrpBsTj9LKMyTsAwA6pS8NOHsot8VkTC5BbSKlDoCMdxUgFkVHZUE5AD0LMO9ABMvyc2wx+wAr4nUWIM7mCKNxZDme9Lq1RrgdKX3sLQzybmAZNQ1wzYLuqnAckeTwk4HTVi+mNaUd4+yvhI6227gXw7osgbAPTljuLUpNA2TdBqjOhnkewIbNcLnayhbVxqAtzjQkrHmAqjSQdVoCVyo5LbOu0SNttSGtqpGWGedzrPFouBcAt6rEqFyXW9XFewEQazzKFglWNMLj8lcctqvVK8ufbjid4I6DoOuOtMoqDDL96WatiFfhTug2AQxVs1Lql2w2neCxoA8AtyEeFAepeZlmJZD0A2CcVki/17VRP6ZPANGfTrsftEkz7PBeAVTlRiy5rTcKkAU9AjgLr1JyS436MW6vAG63UVqBfVx1gtcrgHhKMjwtumwyq08quIHtm50VxuPvEoZE1+xgAR4fdPJdF/D+c51WejGtBLhdRYbkeAiU28ZUQmvHIOMx3XG1QnNmuJIRbitAZYrZxwRz5Vr92z6IezVJJGaa82O6B9AI8CxxTNecH0N6qMJxWoGxj0gnEMZ6CTA66Dw4WHLaaITPc5+I6UY43hOUjfkxDg+6BTC8vgpNEzP7m0JlY36MW/SGzvNfCTRWZmRrNEthvz81ZYYrnAmf61avYBgaGmP0p9+vwybNAWTdUuEgGA7MDM0M89PSbBTjxQDEFn9+ZUgQ/GnOzEYxlrUhD6ySDn84wO3sCidzTgz96VU0UobLQukE1ytWW9ktCVQl5ePQPK0guaovKmCGCSnS4NAxRzq+Y30Ymp6RDFVHcaFmB2Ku7m6lSPhsAKE519gbhH7EAAZ8FjgWcQr0NlWorTzrHeuQ7ZuEpv2IKjtdoNnBY+aw1+Wre88LkAXjydZstMds9w7H2DOR/GNyMedTYZTBoektr+qSL26cToD0gLEOV0wlnBMgtKob+tOhKhzkxlA8Zp7AdmTQWYDAxMiQbKMZ3eZmWE1GHn3EgciZAeJd6wXaSEzNcFQrJN3GayvPDRCVx2wbjPoRpaEEqq4ZUx0mHZZAdeeHqSFR+emRY15oYCiuHQcoYRucbU3vGmFGauk8MPNSBod3XAIhJAF/2sQfDAdX0sgM78yCUejcaYDRFzfzp9GXGQyNmOxKhYx0uLIXc2aA6gbDoUYCt+rK8Ble10LMdzVppMMe6zTAeCqMxpCEqwGEc1g0aCJUO5ky624i3QcoA70hgS6wq3t1X5KRTHGzizR6AjBKK4QaL/A6GnVuoJVkD9Ds1R0HGN2BkZufhgacYXxVhT6dABos2e6DTUar8lYBZCanckmA+K7sbRDUd3W/O1jSI9mFZmYpbKeyANYtgfDT/xVq7q9OXH6mUn1ZaQWcBXD9sLusipsMjI6ESoVzDwb5/JYB5Ahwm7uwHS55+xncJjDJMCR4CsriN+gBHqT3mME5nsfa5kiDLP0azAY5azY7Hf2utsHUmqNwFV8VxMwAugelIAbFDBXLOpoBOL7SrCE/ndKivMFTh3oweeBMHkDRGVYVhrB389Q9gFGmOXcFqe2s6qBzeySFuP2N9+IXBS6O1qruw8RAZ7Ud3kqATLeywIMhmR1Fv/f8uPdV65kk88ua4NmRQRsBllwS/entgfc3uecJ3NqLIpN+sUaHXVmprqhlABP+9OBqzBPyynSTBJ3T22EdHW/ZH4Aqw/9ufa9TOtelxoq4sthdJGhDegUQ/elt1HF4z+V7aeUeoMyf43bSNchz0w94ftyjPTB64sksqgLmMnWaau6udlouznKT2IT1DiAmZtQ1aRmbO8+9sJmkdbqTHBus7uvrlwQqb1AFH8WncrtSnt5tmiOyhFWPhNunwhCRDDH4SP/bvANfrNVN1kri7dZZR3nK5WGsbwCDuNOaZZvqdIJ4CW4qQJZ+X4s3ZqyHAI2EgqVcrrI7DU41PSkEiWT1OQ/tAmjyTZ8g8XL2MzyMctLvbL5IgKrinJGDG2ocj+SPkoed1TtA6K7VmT6/VAlk0ebFiec6juN65GS+wonhRrO+3r088nbYxarw7iZ0lEOu4hUWQ81/CyzJ4/SErMeAdHYP3OnyR76thwBbohAWoAVoAfYWoHirzdpfJMA7ccstwAoAH+lvFqAJQJIB8Bv9agFWAfhMP9dw8tzzhUf5WQC/0GcLsArA73Q+sgC1OgwHVxkA53RKLEB9bogvxAtNA3hDN2sLUGtE2OiVpgMER5DUnr3oHUDYApegrKkAH60fYwjwJh3gF7oYWYBaM0z8IxtyAHBO/ZHlp90EXZEFUNB/E0tIB3C0EJ9oOkBIaH21+RgdwLW/oU8ZEnhDb7nlpzvm32RIIGj2hr4SC1CzXHEnMlRYAEMLULcFJpyYoz0QALossNtg3nkzODHzTIDoyKyZdabzACadmGOAEA5D3Y60AHMqxYTIAQhJVbDD0prizEInz08K4DHAJ7ohVoOzYhDoAljQTzQPIP0dj+ZsRibIahrwkzY4CVBEZsTiSu/Pd8XTDw1AsXnTVI9dcC517R9HcSkAo8S+tLjSTkMwEfNDB1A8CRsQZwgg8U98mFOAsEnCLhjYeCTpQ4NlXZw40WkAQUjd6KI8yy14n06CPoyXYoLTAEI859nTuZQ0gpOmwCkAwdD4Nilz2n2SOE/PAUhvhDuyzmAyCj5Jw2QDFDe+qlGw2+DBcboj5sIQINoan1g7cnwWl6HAqRJI6YtYxB0+Fl502ayfxS8V4A8QwgW3yenDDTCLX7oEqtSq1eH3G9+X2fwyAIrpFDOD0kLE4aLLzVQUUuHokBj9aXnpABlmUTf0D1pQAjEiEWCKL96SID/xLVuBcwBGzsxlWxIlf2JKaTmAEBUTyS6b33oxnVJRDmCcV2BBcHlqzONOebAf/8vnlwtQfJ/6GBZfXHpwd38CWQroXqClAdK/U+q7D9EYgotLoEL8thQa8dNJIN1ACOhc5FExTKKH+E3PTwtQTIXv7iauX8wWCBpHHP+L0PPLV2FYYIT+s1miEHIZzc7oeSNNdHUMiB+Iz5RWBYg/AvyFtgQnFMteZwlZNOYDri4izobe3VBKq0ugwvjtTvie6oHotTlhOLIQvD+yAPEzUV9TgGovBT0e9d+rxqFHqL3UEJ8pQPo0pxt/SdYnk077ZnpB+lB7jfmZAsT8DDJ8I7tZ4/HUYq4fxd3exaPHeDcgxEPlvSmArwBAVX9JxdIlax5NsuKcdVyn1fe/m7E1ghlxPi2gvIUBCswSQjeEv3BJ9EVVyrXTDp+MFGm0Jq4PpS/0myjIr5AExn4NeDWbJUyWW492GLu7Aj5aAzzY+AQtLn0lAGL91vwbhQDF95eviwWBte7owu/dvX1douiB4ZjPRQl+xQEe/6DEptsrfpI7WgpeaYCqq+nmZv78jXZ9vbyA0RVUlP4AUu3rP4mOr8o/AULtsgAtQAvQArTLArQALUAL0C4L0ALs2Po/u6QQnkHLUXYAAAAASUVORK5CYII=) center/contain no-repeat}
.brand .kw-mark{width:50px;height:50px;transition:width .4s var(--ease),height .4s var(--ease)}
header.scrolled .brand .kw-mark{width:42px;height:42px}

:root{
  --orange:#F2701C;
  --orange-deep:#d85f12;
  --orange-soft:#ff8a3d;
  --slate:#2B323C;
  --ink:#1b2027;        /* deepest bg */
  --ink-2:#222932;      /* raised dark */
  --ink-line:#333d49;
  --paper:#F7F5F1;      /* warm light bg */
  --paper-2:#ffffff;
  --paper-line:#e6e1d8;
  --text-dark:#2B323C;
  --text-mute-d:#5c6470;     /* muted on light */
  --text-light:#f3f1ee;
  --text-mute-l:#9aa3b0;     /* muted on dark */
  --r:6px;
  --r-sm:5px;
  --maxw:clamp(1180px,76vw,1560px);
  /* Schrift der Kleinlabels (Eyebrows, Tags, Zaehler, Menue-Knopf).
     Bewusst EINE Variable: laesst sich mit einer Zeile umstellen. */
  --font-label:var(--font-text);
  --font-head:'Red Hat Display',system-ui,sans-serif;
  --font-text:'Red Hat Text',system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.34,1);
  /* Einblend-Kurve: sehr langer Auslauf. Das Element kommt zuegig in
     Bewegung und legt sich dann weich hin, statt hart zu stoppen —
     der Unterschied zwischen "rutscht rein" und "setzt sich". */
  --ease-rv:cubic-bezier(.16,1,.3,1);
  --shadow:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-text);
  background:var(--ink);color:var(--text-light);
  line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.04;letter-spacing:-.015em;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange-soft);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 max(26px,env(safe-area-inset-right)) 0 max(26px,env(safe-area-inset-left))}
.eyebrow{
  font-family:var(--font-label);font-weight:500;font-size:12.5px;
  color:var(--orange-soft);
  display:inline-flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block}
.eyebrow.center::before{display:none}

/* skip link */
.skip{position:fixed;left:-999px;top:8px;z-index:200;background:var(--orange);color:var(--ink);
  padding:10px 16px;border-radius:var(--r);font-weight:600}
.skip:focus{left:12px}

/* ============ BUTTONS ============ */
.btn{
  --bg:var(--orange);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--bg);color:var(--fg);font-weight:700;font-size:16px;
  padding:15px 26px;border-radius:var(--r);border:none;cursor:pointer;
  font-family:inherit;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s;
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{box-shadow:none;background:var(--orange-deep)}
.btn:active{transform:translateY(-1px)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.ghost{--bg:transparent;--fg:var(--text-light);box-shadow:none;border:1.5px solid var(--ink-line)}
.btn.ghost:hover{background:rgba(255,255,255,.05);border-color:var(--orange);}
.btn.dark{--bg:var(--slate);--fg:#fff;box-shadow:none}
.btn.dark:hover{background:var(--ink)}
.btn.ghost-d{--bg:transparent;--fg:var(--text-dark);box-shadow:none;border:1.5px solid var(--paper-line)}
.btn.ghost-d:hover{background:#fff;border-color:var(--orange);}
.btn.lg{padding:17px 32px;font-size:17px}


/* KW-LANG-SWITCH */
.lang-switch{position:relative;display:inline-flex;align-items:center;gap:0;padding:4px;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-sm);background:rgba(255,255,255,.05);flex-shrink:0;align-self:center;
  -webkit-tap-highlight-color:transparent}
.lang-switch .lang-opt{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:24px;border-radius:var(--r-sm);
  border:0;background:none;padding:0;margin:0;cursor:pointer;color:inherit;
  opacity:.42;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.lang-switch .lang-opt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.lang-switch .flag{display:block;border-radius:3px;overflow:hidden;box-shadow:none}
.lang-switch .lang-ind{position:absolute;top:4px;left:4px;width:32px;height:24px;border-radius:var(--r-sm);
  background:rgba(242,112,28,.20);border:1px solid var(--orange);box-shadow:none;
  transition:transform .38s cubic-bezier(.34,1.45,.5,1)}
.lang-switch[data-active="de"] .lang-ind{transform:translateX(0)}
.lang-switch[data-active="ch"] .lang-ind{transform:translateX(32px)}
.lang-switch .lang-opt[aria-checked="true"]{opacity:1;transform:scale(1.06)}
@media (hover:hover) and (pointer:fine){.lang-switch:hover{border-color:rgba(255,255,255,.28)}.lang-switch:hover .lang-opt{opacity:.7}.lang-switch .lang-opt:hover{opacity:1}}
.lang-switch .lang-opt:active{transform:scale(.92)}
.ls-menu{margin-left:auto}
@media (max-width:360px){.lang-switch .lang-opt{width:28px}.lang-switch .lang-ind{width:28px}
  .lang-switch[data-active="ch"] .lang-ind{transform:translateX(28px)}}


/* KW-TABLET-PREISE: 3 Spalten kompakt fuer Tablets, damit nichts klemmt */
@media (min-width:600px) and (max-width:1023px){
  .price-grid{gap:12px}
  .plan{padding:22px 16px}
  .plan .pname{font-size:19px}
  .plan .pdesc{font-size:13px;margin:6px 0 14px;min-height:0}
  .plan .price .amt{font-size:34px}
  .plan .setup{font-size:12.5px;margin-bottom:12px}
  .plan ul{gap:9px;margin-bottom:20px}
  .plan li{font-size:13px;gap:8px}
  .plan li svg{flex-shrink:0}
  .plan .btn{padding:12px;font-size:14px}
  .plan.feat::before{font-size:11px}
}

/* ============ HEADER ============ */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--orange);z-index:120;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform}
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:calc(18px + env(safe-area-inset-top)) 0 18px;transition:padding .4s var(--ease),background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  padding:calc(11px + env(safe-area-inset-top)) 0 11px;background:rgba(27,32,39,.88);
  border-bottom:1px solid var(--ink-line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;flex-shrink:0;font-family:var(--font-head);font-weight:700;font-size:24px;letter-spacing:-.02em}
.brand .k{color:var(--text-light)}
.brand .w{color:var(--orange)}
.nav-right{display:flex;align-items:stretch;gap:13px}
.nav-pills{display:flex;align-items:center;gap:4px}
.nav-pill{font-size:15px;font-weight:500;color:var(--text-mute-l);padding:9px 14px;border-radius:var(--r);
  position:relative;transition:color .25s,background .25s}
.nav-pill:hover{color:var(--text-light);background:rgba(255,255,255,.05)}
.nav-pill::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav-pill:hover::after{transform:scaleX(1)}
.menu-trigger{display:none;align-items:center;gap:11px;background:rgba(255,255,255,.04);
  border:1.5px solid var(--ink-line);color:var(--text-light);cursor:pointer;font-family:var(--font-label);
  font-size:14px;font-weight:500;padding:12px 16px;border-radius:var(--r);
  transition:border-color .25s,background .25s,color .25s}
.menu-trigger:hover{border-color:var(--orange);background:rgba(242,112,28,.1);color:#fff}
.menu-trigger .mt-ico{display:flex;flex-direction:column;gap:5px;width:24px}
.menu-trigger .mt-ico i{width:100%;height:2.5px;border-radius:2px;background:currentColor}

/* ===== EPIC NAV OVERLAY ===== */
body.nav-open{overflow:hidden;overscroll-behavior:contain}
.nav-overlay{position:fixed;inset:0;z-index:130;background:var(--ink);color:var(--text-light);overscroll-behavior:contain;
  display:flex;flex-direction:column;opacity:0;visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:opacity .45s var(--ease),visibility .45s,clip-path .6s var(--ease)}
.nav-overlay.open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0)}
.nav-ov-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.nav-ov-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 80% 75% at 72% 28%,#000,transparent 76%);
  mask-image:radial-gradient(ellipse 80% 75% at 72% 28%,#000,transparent 76%)}
.nav-ov-glow{position:absolute;top:-14%;right:-8%;width:640px;height:640px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,112,28,.28),transparent 62%);filter:blur(40px)}
.nav-ov-top{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;padding-top:calc(23px + env(safe-area-inset-top));padding-bottom:16px}
.nav-close{display:inline-flex;align-items:center;gap:11px;background:none;border:1.5px solid var(--ink-line);
  color:var(--text-light);cursor:pointer;font-family:var(--font-label);font-size:13px;
  padding:11px 16px;border-radius:var(--r);transition:.25s}
.nav-close:hover{border-color:var(--orange);background:rgba(242,112,28,.1)}
.nav-close svg{transition:transform .4s var(--ease)}
.nav-close:hover svg{transform:rotate(90deg)}
.nav-ov-inner{position:relative;z-index:2;width:100%;flex:1;display:grid;grid-template-columns:1.55fr .85fr;gap:50px;
  align-items:center;padding-top:18px;padding-bottom:18px}
.nav-ov-links{display:flex;flex-direction:column}
/* Aufklapp-Animation: jeder Punkt steigt gestaffelt hoch, die Nummer laeuft
   von links nach. Delays bis nth-child(8), damit kein Punkt ohne Staffel
   bleibt und sofort dasteht. */
.nav-ov-links a{position:relative;display:flex;align-items:baseline;gap:22px;padding:15px 0;
  border-top:1px solid var(--ink-line);text-decoration:none;color:var(--text-light);
  opacity:0;transform:translateY(34px);
  transition:opacity .5s var(--ease),transform .72s cubic-bezier(.16,1,.3,1)}
.nav-ov-links a:last-child{border-bottom:1px solid var(--ink-line)}
.nav-overlay.open .nav-ov-links a{opacity:1;transform:none}
.nav-overlay.open .nav-ov-links a:nth-child(1){transition-delay:.10s}
.nav-overlay.open .nav-ov-links a:nth-child(2){transition-delay:.16s}
.nav-overlay.open .nav-ov-links a:nth-child(3){transition-delay:.22s}
.nav-overlay.open .nav-ov-links a:nth-child(4){transition-delay:.28s}
.nav-overlay.open .nav-ov-links a:nth-child(5){transition-delay:.34s}
.nav-overlay.open .nav-ov-links a:nth-child(6){transition-delay:.40s}
.nav-overlay.open .nav-ov-links a:nth-child(7){transition-delay:.46s}
.nav-overlay.open .nav-ov-links a:nth-child(8){transition-delay:.52s}
.nav-ov-links .n{font-family:var(--font-label);font-size:14px;color:var(--orange-soft);flex-shrink:0;width:30px;
  opacity:0;transform:translateX(-12px);
  transition:opacity .6s var(--ease),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:inherit}
.nav-overlay.open .nav-ov-links .n{opacity:1;transform:none}
.nav-ov-links .t{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,6vw,66px);line-height:1;
  letter-spacing:-.025em;transition:transform .35s var(--ease),color .25s}
.nav-ov-links .go{margin-left:auto;align-self:center;color:var(--text-mute-l);opacity:0;transform:translateX(-14px);transition:.35s var(--ease)}
.nav-ov-links a:hover .t{color:var(--orange);transform:translateX(16px)}
.nav-ov-links a:hover .go{opacity:1;transform:none;color:var(--orange)}
.nav-ov-side{align-self:center;border-left:1px solid var(--ink-line);padding-left:42px;max-width:330px;
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease) .56s,transform .6s var(--ease) .56s}
.nav-overlay.open .nav-ov-side{opacity:1;transform:none}
.nav-ov-tag{color:var(--text-mute-l);font-size:15px;margin:14px 0 22px;line-height:1.6}
.nav-ov-mail{display:block;font-family:var(--font-label);font-size:14.5px;color:var(--text-light);margin-bottom:10px;transition:color .2s}
.nav-ov-mail:hover{color:var(--orange-soft)}
.nav-ov-side .btn{margin-top:20px}
.nav-ov-foot{position:relative;z-index:2;width:100%;padding-bottom:calc(24px + env(safe-area-inset-bottom));font-family:var(--font-label);font-size:11.5px;color:var(--text-mute-l);letter-spacing:.04em}
@media (prefers-reduced-motion:reduce){
  .nav-overlay{transition:opacity .2s,visibility .2s}
  .nav-overlay,.nav-overlay.open{clip-path:none}
  .nav-ov-links a,.nav-ov-links .n,.nav-ov-side{transition:none!important;opacity:1!important;transform:none!important}
}

/* ============ SECTION SHELL ============ */
section{position:relative}
.sec{padding:118px 0}
.sec.tight{padding:90px 0}
.light{background:var(--paper);color:var(--text-dark)}
.dark{background:var(--ink);color:var(--text-light)}
.dark-2{background:var(--ink-2);color:var(--text-light)}
.sec-head{max-width:640px;margin-bottom:58px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(32px,4.6vw,52px);margin:18px 0 16px;text-wrap:balance}
.sec-head p{text-wrap:pretty}
.pop-head h2,.contact-cta h2,.contact-cta p.lead-c{text-wrap:balance}
.light .sec-head p,.light .lead{color:var(--text-mute-d)}
.dark .sec-head p,.dark .lead,.dark-2 .sec-head p{color:var(--text-mute-l)}
.sec-head p{font-size:18px;line-height:1.55}

/* reveal (progressive enhancement) */
.js .reveal{opacity:0;transform:translateY(26px) scale(.988);
  transition:opacity .95s var(--ease-rv),transform .95s var(--ease-rv)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.08s}.js .reveal.d2{transition-delay:.16s}
.js .reveal.d3{transition-delay:.24s}.js .reveal.d4{transition-delay:.32s}.js .reveal.d5{transition-delay:.4s}
/* Abschnittstitel steigen Wort fuer Wort auf. Erst ab 600px: auf dem
   Handy wischt man zu schnell, dort bleibt der Titel ein ruhiger Block.
   Bewusst OHNE overflow-Maske — die wuerde Unterlaengen abschneiden. */
@media (min-width:600px){
  .js .sec-head h2 .w{display:inline-block;overflow-wrap:break-word;
    opacity:0;transform:translateY(.42em) rotate(.6deg);
    transition:opacity .8s var(--ease-rv),transform .8s var(--ease-rv);
    transition-delay:calc(var(--wi,0) * .042s)}
  .js .sec-head.in h2 .w{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .sec-head h2 .w{opacity:1!important;transform:none!important;transition:none!important}
}
/* Innenleben nach dem Rahmen: die Aufzaehlungen in Karten und Stufen
   laufen gestaffelt nach, statt mit dem Kasten gleichzeitig da zu sein.
   Aus "Kasten blendet ein" wird "Karte baut sich auf".
   Nur ab 600px — auf dem Handy bleibt es ein ruhiger Block. */
@media (min-width:600px){
  .js .card.reveal li,.js .stufe.reveal li{
    opacity:0;transform:translateY(9px);
    transition:opacity .6s var(--ease-rv),transform .6s var(--ease-rv)}
  .js .card.reveal.in li,.js .stufe.reveal.in li{opacity:1;transform:none}
  .js .card.reveal.in li:nth-child(1),.js .stufe.reveal.in li:nth-child(1){transition-delay:.22s}
  .js .card.reveal.in li:nth-child(2),.js .stufe.reveal.in li:nth-child(2){transition-delay:.30s}
  .js .card.reveal.in li:nth-child(3),.js .stufe.reveal.in li:nth-child(3){transition-delay:.38s}
  .js .card.reveal.in li:nth-child(4),.js .stufe.reveal.in li:nth-child(4){transition-delay:.46s}
  .js .card.reveal.in li:nth-child(n+5),.js .stufe.reveal.in li:nth-child(n+5){transition-delay:.54s}
}
@media (prefers-reduced-motion:reduce){
  .js .card.reveal li,.js .stufe.reveal li{opacity:1!important;transform:none!important;transition:none!important}
}
/* Handy: das Fenster ist kurz und man wischt schnell — ein Block
   durchquert den Bildschirm in Sekundenbruchteilen. Eine kurze
   Einblendung mit langer Staffel-Verzoegerung laeuft dann noch, waehrend
   der Block schon nach oben wegfliegt; genau das wirkt abgehackt.
   Also laenger und weicher blenden, deutlich weniger staffeln — und im
   Skript frueher ausloesen (rootMargin), damit die Bewegung ueberwiegend
   hinter der unteren Fensterkante ablaeuft.
   ACHTUNG: Dieser Block muss NACH den d1-d5-Grundregeln stehen, sonst
   gewinnen deren Verzoegerungen. */
@media (max-width:599.98px){
  .js .reveal{transform:translateY(20px);
    transition:opacity .8s cubic-bezier(.25,.46,.45,.94),transform .8s cubic-bezier(.25,.46,.45,.94)}
  .js .reveal.d1{transition-delay:.06s}.js .reveal.d2{transition-delay:.12s}
  .js .reveal.d3{transition-delay:.18s}.js .reveal.d4{transition-delay:.24s}.js .reveal.d5{transition-delay:.3s}
  .js .step{transform:translateY(16px)}
  .js .step.in{transition:opacity .8s cubic-bezier(.25,.46,.45,.94),
    transform .8s cubic-bezier(.25,.46,.45,.94),background .35s var(--ease);
    transition-delay:calc(var(--si,0) * .07s)}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============ HERO ============ */
.hero{position:relative;padding:136px 0 86px;overflow:hidden;background:var(--ink)}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-grid{position:absolute;inset:-2px;
  background-image:linear-gradient(var(--ink-line) 1px,transparent 1px),linear-gradient(90deg,var(--ink-line) 1px,transparent 1px);
  background-size:54px 54px;opacity:.25;
  mask-image:radial-gradient(ellipse 80% 70% at 60% 20%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 20%,#000 30%,transparent 78%);
}
.glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:0}
.glow.g1{width:520px;height:520px;background:rgba(242,112,28,.34);top:-160px;right:-90px}
.glow.g2{width:420px;height:420px;background:rgba(242,112,28,.14);bottom:-180px;left:-120px}
.js .glow.g1{animation:float1 14s ease-in-out infinite}
.js .glow.g2{animation:float2 17s ease-in-out infinite}
@keyframes float1{50%{transform:translate3d(-40px,40px,0)}}
@keyframes float2{50%{transform:translate3d(50px,-30px,0)}}
@media (prefers-reduced-motion:reduce){.js .glow{animation:none!important}}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero-copy{max-width:580px}
.hero h1{font-size:clamp(38px,5.8vw,68px);margin:22px 0 0;font-weight:700}
.hero h1 .accent{color:var(--orange);position:relative;display:inline-block}
.hero h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.07em;background:var(--orange);
  border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .7s}
.js .hero.loaded h1 .accent::after{transform:scaleX(1)}
.hero p.lead{font-size:19.5px;margin:24px 0 34px;max-width:520px;color:#c4ccd6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(20px,2.8vh,36px)}
.hero-trust{display:flex;gap:22px;margin-top:30px;flex-wrap:wrap;font-size:14px;color:var(--text-mute-l)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{color:var(--orange-soft);flex-shrink:0}
.ld-m{display:none}

/* hero load stagger */
.js .hero .ld{opacity:0;transform:translateY(20px)}
.js .hero.loaded .ld{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .hero.loaded .ld.s1{transition-delay:.05s}
.js .hero.loaded .ld.s1{transition-delay:.06s}
.js .hero.loaded .ld.s2{transition-delay:.15s}
.js .hero.loaded .ld.s3{transition-delay:.26s}
.js .hero.loaded .ld.s3{transition-delay:.25s}
.js .hero.loaded .ld.s4{transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.js .hero .ld{opacity:1!important;transform:none!important}}

/* ===== signature: self-building browser ===== */
.mockup{position:relative;z-index:2}
.browser{
  background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:none;
  transform:perspective(1400px) rotateY(-13deg) rotateX(5deg);transform-style:preserve-3d;
}
.js .browser{transform:perspective(1400px) rotateY(-13deg) rotateX(5deg) translateY(38px) scale(.94);opacity:0;filter:blur(7px)}
.js .hero.loaded .browser{opacity:1;filter:blur(0);transform:perspective(1400px) rotateY(-13deg) rotateX(5deg) translateY(0) scale(1);transition:opacity 1.1s ease .5s,filter 1.2s ease .5s,transform 1.5s cubic-bezier(.16,1,.3,1) .5s}
@media (prefers-reduced-motion:reduce){.browser,.js .hero.loaded .browser{transform:none!important;opacity:1!important}}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#eceae5;border-bottom:1px solid #ddd}
.browser-bar .dot{width:11px;height:11px;border-radius:50%;background:#cfccc6}
.browser-bar .dot.r{background:#ff5f57}.browser-bar .dot.y{background:#febc2e}.browser-bar .dot.g{background:#28c840}
.browser-url{margin-left:8px;flex:1;background:#fff;border-radius:var(--r);padding:6px 12px;font-family:var(--font-label);
  font-size:11.5px;color:#8a8a8a;display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap}
.browser-url svg{flex-shrink:0;color:#28c840}
.browser-live{font-family:var(--font-label);font-size:10px;color:#28a745;display:flex;align-items:center;gap:5px;font-weight:500}
.browser-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#28c840;box-shadow:none}
.js .browser-live::before{animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:none}70%{box-shadow:none}100%{box-shadow:none}}
.viewport{background:#fbfaf8;height:330px;position:relative;overflow:hidden}
.blk{position:absolute;left:0;right:0;opacity:0}
.js .blk{opacity:0}
.js .hero.play .blk{animation:build .55s var(--ease) forwards}
.blk.nav{top:0;height:46px;background:var(--slate);display:flex;align-items:center;padding:0 16px;gap:8px;animation-delay:.7s!important}
.blk.nav .logo{width:18px;height:18px;border-radius:5px;background:var(--orange)}
.blk.nav .bars{display:flex;gap:9px;margin-left:auto}
.blk.nav .bars i{width:26px;height:6px;border-radius:3px;background:rgba(255,255,255,.35)}
.blk.heroband{top:46px;height:128px;background:linear-gradient(120deg,#fff,#fdf2e9);padding:22px 18px;animation-delay:.95s!important}
.blk.heroband .t1{width:62%;height:15px;border-radius:5px;background:var(--slate);margin-bottom:9px}
.blk.heroband .t2{width:46%;height:15px;border-radius:5px;background:var(--slate);margin-bottom:14px}
.blk.heroband .pill{width:92px;height:26px;border-radius:var(--r);background:var(--orange)}
.blk.cards{top:186px;height:80px;display:flex;gap:11px;padding:0 18px;animation-delay:1.25s!important}
.blk.cards .c{flex:1;background:#fff;border:1px solid #eee;border-radius:var(--r);box-shadow:none}
.blk.cards .c i{display:block;width:22px;height:22px;border-radius:6px;background:var(--orange);margin:13px 0 0 13px;opacity:0;transform:scale(.35);transform-origin:18px 24px}
.js .hero.play .blk.cards .c i{animation:cardPop .45s var(--ease) forwards}
.js .hero.play .blk.cards .c:nth-child(1) i{animation-delay:3.75s}
.js .hero.play .blk.cards .c:nth-child(2) i{animation-delay:6.2s}
.js .hero.play .blk.cards .c:nth-child(3) i{animation-delay:8.5s}
@keyframes cardPop{0%{opacity:0;transform:scale(.35)}55%{opacity:1;transform:scale(1.18)}100%{opacity:.92;transform:scale(1)}}
.js .hero.play .blk.cards .c{animation:cardAct .6s var(--ease) forwards}
.js .hero.play .blk.cards .c:nth-child(1){animation-delay:3.7s}
.js .hero.play .blk.cards .c:nth-child(2){animation-delay:6.15s}
.js .hero.play .blk.cards .c:nth-child(3){animation-delay:8.45s}
@keyframes cardAct{0%{}38%{transform:translateY(-5px);box-shadow:none;border-color:var(--orange)}100%{transform:none;box-shadow:none;border-color:#f1ddca}}
.blk.foot{top:282px;height:48px;background:var(--ink);animation-delay:1.55s!important}
@keyframes build{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .hero.play .blk,.js .hero.loaded .blk{animation:none!important;opacity:1!important;transform:none!important}
  .blk.cards .c i{opacity:.9!important;transform:none!important}.blk.cards .c{animation:none!important}}
/* fake cursor — slow sequential click sequence */
.cursor{position:absolute;width:20px;height:20px;z-index:5;left:78%;top:86%;opacity:0;pointer-events:none}
.js .hero.play .cursor{animation:cursorSeq 7.2s cubic-bezier(.5,0,.2,1) 2s infinite}
.cursor svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.cursor::after{content:"";position:absolute;left:-7px;top:-7px;width:18px;height:18px;border-radius:50%;
  border:2px solid var(--orange);opacity:0;transform:scale(.3);transform-origin:center;pointer-events:none}
.js .hero.play .cursor::after{animation:clickRing 7.2s linear 2s infinite}
@keyframes cursorSeq{
  0%{opacity:0;left:78%;top:86%;transform:scale(1)}
  4%{opacity:1}
  18%{left:20%;top:67%;transform:scale(1)}
  21%{transform:scale(.8)}
  25%{transform:scale(1)}
  40%{left:20%;top:67%}
  52%{left:50%;top:67%;transform:scale(1)}
  55%{transform:scale(.8)}
  59%{transform:scale(1)}
  72%{left:50%;top:67%}
  84%{left:80%;top:67%;transform:scale(1)}
  87%{transform:scale(.8)}
  91%{transform:scale(1)}
  97%{opacity:1;left:80%;top:67%}
  100%{opacity:0;left:80%;top:67%}
}
@keyframes clickRing{
  0%,20%{opacity:0;transform:scale(.3)}
  24%{opacity:.7;transform:scale(.5)}
  30%{opacity:0;transform:scale(1.5)}
  54%{opacity:0;transform:scale(.3)}
  58%{opacity:.7;transform:scale(.5)}
  64%{opacity:0;transform:scale(1.5)}
  86%{opacity:0;transform:scale(.3)}
  90%{opacity:.7;transform:scale(.5)}
  96%,100%{opacity:0;transform:scale(1.5)}
}
@media (prefers-reduced-motion:reduce){.cursor{display:none}}
.mock-tag{position:absolute;font-family:var(--font-label);font-size:11px;font-weight:500;
  background:var(--ink-2);border:1px solid var(--ink-line);color:var(--orange-soft);padding:7px 12px;border-radius:var(--r);z-index:6;
  box-shadow:none}
.mock-tag.t-a{top:-14px;left:-26px}
.mock-tag.t-b{bottom:24px;right:-30px;color:#7fd88f}
.js .mock-tag{opacity:0;transform:translateY(8px)}
.js .hero.loaded .mock-tag{opacity:1;transform:none;transition:.6s var(--ease)}
.js .hero.loaded .mock-tag.t-a{transition-delay:1.9s}
.js .hero.loaded .mock-tag.t-b{transition-delay:2.2s}

/* ============ MARQUEE / STATS ============ */
.stats{background:var(--ink-2);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line);padding:52px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.stat{text-align:center}
.stat .num{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,4.4vw,50px);color:#fff;line-height:1;letter-spacing:-.02em}
.stat .num span{color:var(--orange)}
.stat .lab{margin-top:10px;font-size:14px;color:var(--text-mute-l);font-weight:500}

/* ============ SERVICES ============ */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--paper-2);border:1px solid var(--paper-line);border-radius:var(--r);padding:30px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;position:relative;overflow:hidden;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.card:hover{box-shadow:none;border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .js .card.reveal.in:hover,.card:hover{}
}
.card:hover::before{transform:scaleX(1)}
.card-ic{width:52px;height:52px;border-radius:var(--r);background:#fff3ea;color:var(--orange);display:grid;place-items:center;margin-bottom:20px;transition:transform .4s var(--ease)}
.card:hover .card-ic{transform:scale(1.08) rotate(-4deg)}
.card h3{font-size:21px;margin-bottom:9px;color:var(--text-dark);font-weight:700;letter-spacing:-.01em}
.card p{font-size:15.5px;color:var(--text-mute-d);line-height:1.55}
/* breite Karte: füllt die Lücke bei ungerader Kartenzahl.
   span 2 wirkt im 3er-Grid (2 von 3 Spalten) UND im 2er-Grid (volle Breite = 2-2-1). */
.card.card-wide{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;column-gap:30px;align-items:center}
.card.card-wide .card-ic{grid-row:1/3;align-self:center;margin-bottom:0}
.card.card-wide h3{grid-column:2}
.card.card-wide p{grid-column:2;max-width:560px}

/* ============ PROCESS ============ */

/* ============ SOCIAL-MEDIA-BAND (Zusatzleistung) ============
   Dunkles Band innerhalb der hellen Leistungs-Sektion: hebt die
   Zusatzleistung heraus, ohne den Hell/Dunkel-Rhythmus der Seite zu
   stoeren. Grundregeln stehen VOR dem zugehoerigen Media Query. */
.sm-band{position:relative;overflow:hidden;margin-top:64px;
  background:var(--ink);color:var(--text-light);
  border-radius:var(--r);padding:46px 44px;
  box-shadow:none}
.sm-band::before{content:"";position:absolute;top:-40%;right:-12%;
  width:min(560px,70%);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(242,112,28,.20),transparent 62%)}
.sm-inner{position:relative;z-index:1}
.sm-head{max-width:640px;margin-bottom:32px}
.sm-head h3{font-size:clamp(26px,3.2vw,38px);margin:14px 0 12px;letter-spacing:-.015em}
.sm-head p{color:var(--text-mute-l);font-size:17px;line-height:1.55}
.sm-tag{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-label);font-size:11px;
  color:var(--orange-soft)}
.sm-tag::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--orange)}
.sm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:26px}
.sm-card{min-width:0;background:var(--ink-2);border:1px solid var(--ink-line);
  border-radius:var(--r-sm);padding:26px 24px;display:flex;flex-direction:column}
.sm-card.feat{border-color:rgba(242,112,28,.45)}
.sm-name{font-family:var(--font-head);font-weight:700;
  font-size:20px;letter-spacing:-.01em;margin-bottom:4px}
.sm-sub{color:var(--text-mute-l);font-size:14px;line-height:1.5;margin-bottom:16px}
.sm-price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.sm-price b{font-family:var(--font-head);font-weight:700;
  font-size:34px;line-height:1;letter-spacing:-.02em;color:#fff}
.sm-price span{color:var(--text-mute-l);font-size:14px}
.sm-setup{color:var(--text-mute-l);font-size:12.5px;margin-bottom:18px}
.sm-feat{list-style:none;display:grid;gap:9px;margin-bottom:20px}
.sm-feat li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:10px;
  align-items:start;font-size:14.5px;line-height:1.45}
.sm-feat li svg{margin-top:3px;color:var(--orange-soft)}
.sm-card .btn{margin-top:auto;width:100%;justify-content:center}

/* Staffel im Preis-Overlay */
.sm-lead{color:var(--text-mute-d);font-size:16px;line-height:1.6;max-width:760px;margin:0 auto 26px;text-align:center}
.sm-staffel-box{background:var(--paper-2);border:1px solid var(--paper-line);
  border-radius:var(--r);padding:26px 24px;margin-top:26px}
.sm-staffel-h{font-size:19px;margin-bottom:4px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sm-staffel-h span{font-family:var(--font-label);font-size:10.5px;
  color:var(--orange-text)}
.sm-staffel-note{color:var(--text-mute-d);font-size:13.5px;line-height:1.6;margin-top:12px}
/* Nur in der Schweizer Ansicht gefuellt — sonst faellt der Absatz weg. */
.sm-ch-note{margin:10px 0 2px;padding:11px 14px;border-radius:var(--r);
  background:rgba(43,50,60,.05);border:1px solid rgba(43,50,60,.1);
  color:var(--text-mute-d);font-size:13px;line-height:1.55}
.sm-ch-note:empty{display:none}
.sm-staffel-note b{color:var(--text-dark)}
.sm-fine{margin-top:22px;display:grid;gap:10px}
/* Einmalige Zusatzleistungen: bewusst EINE ruhige Zeile statt eigener
   Karten — sie sollen erwaehnt sein, ohne die Paketauswahl zu
   ueberladen. Steht ausserhalb der drei Reiter, gilt also fuer alle. */
.xtra{margin-top:26px;padding:18px 22px;border:1px dashed var(--paper-line);
  border-radius:var(--r-sm);background:transparent;
  display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.xtra-lab{font-family:var(--font-label);font-size:10.5px;
  color:var(--orange-text);flex-shrink:0}
.xtra p{color:var(--text-mute-d);font-size:13.5px;line-height:1.6;min-width:0;flex:1 1 320px}
.xtra p b{color:var(--text-dark);font-weight:700}
.sm-fine p{color:var(--text-mute-d);font-size:13px;line-height:1.6}
.sm-fine b{color:var(--text-dark);font-weight:700}
.sm-staffel{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:14px}
.sm-staffel th,.sm-staffel td{text-align:left;padding:9px 10px;
  border-bottom:1px solid var(--paper-line)}
.sm-staffel th{font-family:var(--font-label);font-size:10.5px;
  color:var(--text-mute-d);font-weight:500}
.sm-staffel td:last-child{white-space:nowrap;font-weight:700;color:var(--text-dark)}
.sm-staffel tr:last-child td{border-bottom:none}
.sm-wrapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:860px){
  .sm-band{padding:38px 30px;margin-top:48px}
  .sm-grid{grid-template-columns:1fr}
}
@media (max-width:599.98px){
  .xtra{padding:15px 16px;margin-top:20px;gap:6px}
  .xtra p{font-size:13px;flex-basis:auto}
  .sm-lead{font-size:15px;text-align:left;margin-bottom:20px}
  .sm-staffel-box{padding:20px 18px;border-radius:var(--r-sm)}
  .sm-staffel{font-size:13px}
  .sm-staffel th,.sm-staffel td{padding:8px 8px;white-space:nowrap}
  .sm-band{padding:30px 22px;margin-top:40px;border-radius:var(--r-sm)}
  .sm-head{margin-bottom:24px}
  .sm-head p{font-size:15.5px}
  .sm-card{padding:22px 20px}
  .sm-price b{font-size:30px}
  .sm-feat li{font-size:14px}
}

.steps{max-width:780px;margin:0 auto;position:relative}
.steps::before{content:"";position:absolute;left:33px;top:20px;bottom:20px;width:2px;
  background:var(--ink-line);z-index:0;border-radius:2px}
.steps::after{content:"";position:absolute;left:33px;top:20px;bottom:20px;width:2px;z-index:1;
  background:var(--orange);border-radius:2px;
  transform:scaleY(var(--fill,0));transform-origin:top center;box-shadow:none;
  transition:transform .9s cubic-bezier(.22,.8,.28,1)}
.step{display:grid;grid-template-columns:68px 1fr;gap:24px;padding:22px 0;position:relative;z-index:2;align-items:start;
  border-radius:var(--r);transition:background .35s var(--ease)}
.step:hover{background:rgba(255,255,255,.025)}
.js .step{opacity:0;transform:translateY(14px)}
.js .step.in{opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),background .35s var(--ease);
  transition-delay:calc(var(--si,0) * .09s)}
.step-n{position:relative;width:68px;height:68px;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--ink-line);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:22px;color:var(--orange);
  transition:background .45s var(--ease) .12s,color .45s var(--ease) .12s,border-color .45s var(--ease) .12s,box-shadow .45s var(--ease) .12s}
.step.in .step-n{background:var(--orange);color:var(--ink);border-color:var(--orange);box-shadow:none}
.step-n::after{content:"";position:absolute;inset:-5px;border-radius:var(--r);border:1.5px solid var(--orange);
  opacity:0;pointer-events:none}
.js .step.in .step-n::after{animation:stepRing 1.1s var(--ease) .18s forwards}
@keyframes stepRing{0%{opacity:.7;transform:scale(.9)}70%{opacity:0;transform:scale(1.22)}100%{opacity:0}}
.step-b h3{font-size:23px;margin:14px 0 7px;color:#fff;font-weight:700;letter-spacing:-.01em;
  transition:color .3s var(--ease)}
.step:hover .step-b h3{color:var(--orange-soft)}
.step-b p{color:var(--text-mute-l);font-size:16px;max-width:540px}
@media (prefers-reduced-motion:reduce){
  .js .step{opacity:1!important;transform:none!important;transition:none!important}
  .steps::after{transform:scaleY(1)!important;transition:none!important}
  .js .step.in .step-n::after{animation:none!important}
}

/* ============ PRICING ============ */

.model-switch{display:flex;justify-content:center;gap:5px;margin:0 auto 28px;background:var(--paper-line);border-radius:var(--r);padding:5px;max-width:430px}
.ms-btn{flex:1;border:none;background:transparent;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;color:var(--text-mute-d);padding:11px 12px;border-radius:var(--r);transition:background .25s var(--ease),color .25s;display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.ms-btn.on{background:var(--slate);color:#fff;box-shadow:none}
.ms-new{font-family:var(--font-label);font-size:10px;font-weight:500;background:var(--orange);color:var(--ink);padding:2px 7px;border-radius:var(--r);line-height:1.4}
.einmal-info{background:rgba(242,112,28,.08);border:1px solid rgba(242,112,28,.28);border-radius:var(--r);padding:20px 24px;margin:34px auto 0;max-width:820px}
.ei-fine{font-size:12.5px;color:var(--text-mute-d);margin:10px 0 0;line-height:1.5}
.ei-tag{display:inline-block;font-family:var(--font-label);font-size:11px;font-weight:500;color:var(--orange-text);margin-bottom:6px}
.einmal-info p{font-size:14.5px;color:var(--text-mute-d);line-height:1.55;margin:0}
.einmal-info p b{color:var(--text-dark)}
.pkg-reco{margin:18px auto 0;max-width:900px;background:var(--paper-2,#fff);border:1px solid var(--paper-line);border-radius:var(--r);padding:26px 28px}
.pkg-reco-head{margin-bottom:0}
.pkg-reco-tip{font-size:14.5px;color:var(--text-mute-d);line-height:1.6;margin:8px 0 0}
.pkg-reco-tip b{color:var(--orange-text);font-weight:700}
/* Drei benannte Zeilen lesen sich schneller als ein Absatz, in dem drei
   Modelle nacheinander erwaehnt werden. */
.reco-liste{margin:14px 0 0;display:grid;gap:0}
.reco-liste>div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:18px;
  padding:13px 0;border-top:1px solid var(--paper-line);align-items:baseline}
.reco-liste>div:first-child{border-top:none;padding-top:4px}
.reco-liste dt{font-family:var(--font-head);font-weight:700;
  font-size:16px;color:var(--orange-text);letter-spacing:-.01em}
.reco-liste dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-mute-d)}
.reco-fuss{margin-top:16px;padding-top:14px;border-top:1px solid var(--paper-line);
  font-size:13.5px;color:var(--text-mute-d)}
.plan-toggle{display:none}
@media (max-width:639.98px){.pkg-reco{padding:20px 18px}
  .pkg-reco-tip{font-size:13.5px;line-height:1.55}}
@media (min-width:600px){.plan-details{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.plan.open .plan-details{max-height:760px}
.plan-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  margin-top:18px;margin-bottom:14px;padding:11px 14px;border-radius:var(--r);cursor:pointer;
  background:transparent;border:1.5px solid var(--paper-line);color:var(--text-dark);
  font-family:inherit;font-weight:700;font-size:14.5px;
  transition:border-color .3s,background .3s}
.plan-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .35s var(--ease)}
.plan.open .plan-toggle{border-color:var(--orange);color:var(--orange-text)}
.plan.open .plan-toggle::after{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover) and (pointer:fine){
  .plan-toggle:hover{border-color:var(--orange);background:rgba(242,112,28,.05)}
}
.plan-details ul{margin-top:15px}}
/* Einordnung im aufgeklappten Bereich. Stand vorher NUR im 600px-Block —
   auf dem Handy war der "Passt zu dir"-Kasten dadurch komplett
   ungestaltet und las sich wie versehentlich eingerueckter Fliesstext. */
.pd-fit{margin-top:16px;padding:15px 16px;border-radius:var(--r);
  background:rgba(242,112,28,.07);border:1px solid rgba(242,112,28,.2)}
.pd-fit-lab{display:block;font-family:var(--font-label);font-size:11px;
  color:var(--orange-text);margin-bottom:7px}
/* text-wrap:pretty verhindert Schusterjungen — einzelne Woerter, die
   allein auf der letzten Zeile stehen. Ohne das franst jeder dieser
   kurzen Absaetze unterschiedlich aus und wirkt abgehackt. */
.pd-fit p{font-size:14.5px;line-height:1.6;color:var(--text-dark);margin:0;
  text-wrap:balance}
.plan li span,.sm-fine li,.sm-diff,.sm-satz,.reco-liste dd,
.sm-staffel-note,.sm-bsp,.sm-lead,.sm-basis span{text-wrap:pretty}
@media (max-width:599.98px){
  .price-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  .price-grid{gap:12px}
  .plan{padding:20px 18px}
  .plan-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    margin:4px 0 0;padding:12px;border:1px solid var(--paper-line);border-radius:var(--r);
    background:#fff;color:var(--text-dark);font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;
    transition:border-color .25s,background .25s}
  .plan-toggle:active{background:var(--paper-2)}
  .plan-toggle::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
  .plan.open .plan-toggle{border-color:var(--orange)}
  .plan.open .plan-toggle::after{transform:translateY(1px) rotate(-135deg)}
  .plan-details{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
  .plan.open .plan-details{max-height:1200px}
  .plan-details ul{margin:16px 0 0!important}
  .plan .year-note{margin-bottom:8px}
  .plan .btn{margin-top:14px}
}
@media (max-width:479.98px){.ms-btn{font-size:13px;padding:10px 8px}.model-switch{gap:4px}}
.toggle-row{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:46px;flex-wrap:wrap}
.toggle-row .lbl{font-weight:500;font-size:15px;color:var(--text-mute-d);transition:color .25s}
.toggle-row .lbl.on{color:var(--text-dark)}
.toggle{width:60px;height:32px;border-radius:var(--r);background:var(--orange);border:none;cursor:pointer;position:relative;padding:0;flex-shrink:0}
.toggle::before{content:"";position:absolute;top:-7px;left:-6px;right:-6px;bottom:-7px}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.toggle[aria-pressed="true"]::after{transform:translateX(28px)}
.save-badge{background:#efeae2;color:var(--text-mute-d);opacity:.75;font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:var(--r);transition:background .3s,color .3s,opacity .3s,transform .3s var(--ease);
  font-family:var(--font-label);letter-spacing:.02em}
.save-badge.on{background:var(--orange);color:var(--ink);opacity:1;transform:scale(1.04);box-shadow:none}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
/* Social Media hat nur zwei Pakete — sonst klafft die dritte Spalte leer.
   Nur ab 600px: die Handy-Regel .price-grid{grid-template-columns:1fr}
   hat geringere Spezifitaet und wuerde sonst verlieren — die Karten
   blieben auf dem Telefon zweispaltig bei 160px Breite. */
@media (min-width:600px){
  .price-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px;margin-inline:auto}
}
.plan{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:var(--r);padding:34px 30px;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);position:relative}
.plan:hover{box-shadow:none}
.plan.feat{border-color:var(--orange);outline:1.5px solid var(--orange);outline-offset:-1.5px;box-shadow:none}
#socialView .plan.feat::before{content:"Reichweite"}
.plan.feat::before{content:"Beliebt";position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--orange);color:var(--ink);font-size:12px;font-weight:500;padding:6px 16px;border-radius:var(--r);
  font-family:var(--font-label);letter-spacing:.04em;box-shadow:none}
.plan .pname{font-family:var(--font-head);font-weight:700;font-size:23px;color:var(--text-dark)}
.plan .pdesc{font-size:14px;color:var(--text-mute-d);margin:7px 0 22px;min-height:40px}
.plan .price{display:flex;align-items:flex-end;gap:4px;margin-bottom:5px}
.plan .price .amt{font-family:var(--font-head);font-weight:700;font-size:46px;color:var(--text-dark);line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.plan .price .per{font-size:15px;color:var(--text-mute-d);font-weight:500;padding-bottom:6px}
.plan .setup{font-size:13.5px;color:var(--text-mute-d);margin-bottom:16px}
.plan .setup b{color:var(--text-dark)}
.plan .year-note{font-size:13px;font-weight:500;color:var(--orange-text);margin-bottom:24px;
  font-family:var(--font-label);letter-spacing:.01em;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s var(--ease),opacity .3s,margin .35s var(--ease)}
.plan .year-note s{color:var(--text-mute-d);font-weight:500;margin-right:4px}
.price-grid.yearly .year-note{max-height:40px;opacity:1}
.plan ul{list-style:none;margin:0 0 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.plan li{display:flex;gap:11px;font-size:15px;color:var(--text-dark);align-items:flex-start;line-height:1.45}
.plan li svg{flex-shrink:0;color:var(--orange);margin-top:3px}
.plan li.off{color:#b3ada3}
.plan li.off svg{color:#cfc9bf}
.plan .btn{width:100%}
.price-note{text-align:center;margin-top:30px;font-size:13.5px;color:var(--text-mute-d)}

/* ============ WHY / COMPARE ============ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:900px;margin:0 auto}
.col{border-radius:var(--r);padding:32px;border:1px solid var(--ink-line)}
.col.bad{background:var(--ink-2)}
.col.good{background:linear-gradient(150deg,#2a3038,#23292f);border:1.5px solid var(--orange)}
.col h3{font-size:20px;margin-bottom:20px;display:flex;align-items:center;gap:10px;font-weight:700}
.col.bad h3{color:var(--text-mute-l)}.col.good h3{color:#fff}
.col ul{list-style:none;display:flex;flex-direction:column;gap:15px}
.col li{display:flex;gap:12px;font-size:15.5px;line-height:1.45}
.col.bad li{color:var(--text-mute-l)}.col.good li{color:#e9ecf0}
.col li svg{flex-shrink:0;margin-top:2px}
.col.bad li svg{color:#5c6470}.col.good li svg{color:var(--orange-soft)}

/* ============ FAQ ============ */
.faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:var(--r);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:var(--orange);box-shadow:none}
.faq summary{list-style:none;cursor:pointer;padding:22px 26px;font-weight:700;font-size:17.5px;color:var(--text-dark);
  display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-head);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex-shrink:0;width:26px;height:26px;border-radius:var(--r);background:#fff3ea;color:var(--orange);
  display:grid;place-items:center;transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq .ans{padding:0 26px 24px;color:var(--text-mute-d);font-size:16px;line-height:1.6;max-width:640px}
/* Erkennbar machen, dass die Fragen aufklappbar sind: das Pluszeichen
   liegt in einem eigenen Feld, wird beim Zeigen kraeftiger und dreht
   sich beim Oeffnen zum Kreuz. Ohne diesen Hinweis sieht die Liste aus
   wie unbeschriftete Kaesten. */
.faq summary{transition:background .25s var(--ease)}
.faq summary .ic{transition:transform .35s var(--ease),background .25s,color .25s}
.faq-hinweis{margin-top:10px;font-size:14.5px;color:var(--text-mute-d)}
.pg-preise .faq{display:grid;gap:12px}
@media (hover:hover) and (pointer:fine){
  .faq summary:hover{background:rgba(242,112,28,.04)}
  .faq summary:hover .ic{background:var(--orange);color:var(--ink)}
}
.faq details[open] summary .ic{background:var(--orange);color:var(--ink)}
.faq summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:var(--r)}

/* ============ CONTACT ============ */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.contact-side h2{font-size:clamp(30px,4vw,46px);margin:16px 0 18px}
.contact-side p{color:var(--text-mute-l);font-size:17px;max-width:380px;margin-bottom:30px}
.contact-direct{display:flex;flex-direction:column;gap:14px}
.cd-item{display:flex;align-items:center;gap:14px;padding:15px 18px;background:var(--ink-2);border:1px solid var(--ink-line);
  border-radius:var(--r);transition:border-color .3s,transform .3s var(--ease)}
.cd-item:hover{border-color:var(--orange);transform:translateX(4px)}
.cd-item .ci{width:42px;height:42px;border-radius:var(--r);background:rgba(242,112,28,.14);color:var(--orange-soft);display:grid;place-items:center;flex-shrink:0}
.cd-item .cl{font-size:12px;color:var(--text-mute-l);font-family:var(--font-label);letter-spacing:.05em;}
.cd-item .cv{font-weight:600;font-size:15.5px;color:#fff}
form.cform{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:32px}
.field{margin-bottom:18px}
.field.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:0}
.field.row>div{margin-bottom:18px}
label{display:block;font-size:13.5px;font-weight:600;color:var(--text-light);margin-bottom:8px}
label .req{color:var(--orange-soft)}
input,textarea,select{
  width:100%;background:var(--ink);border:1.5px solid var(--ink-line);border-radius:var(--r);padding:13px 15px;
  color:#fff;font-family:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s;
}
input::placeholder,textarea::placeholder{color:#6a7280}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--orange);box-shadow:none}
select{cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa3b0' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
textarea{resize:vertical;min-height:120px}
.consent{display:flex;gap:11px;align-items:flex-start;margin:4px 0 22px;font-size:13.5px;color:var(--text-mute-l);line-height:1.5}
.consent input{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:var(--orange)}
.consent a{color:var(--orange-soft);text-decoration:underline}
.form-note{font-size:12.5px;color:var(--text-mute-l);margin-top:14px;text-align:center}
.fb{display:none;padding:13px 16px;border-radius:var(--r);font-size:14.5px;font-weight:600;margin-bottom:18px}
.fb.ok{display:block;background:rgba(40,200,64,.12);border:1px solid rgba(40,200,64,.4);color:#7fd88f}
.fb.err{display:block;background:rgba(255,95,87,.12);border:1px solid rgba(255,95,87,.4);color:#ff948d}

/* ============ FOOTER ============ */
footer{background:#13171c;padding:64px 0 calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--ink-line)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:48px}
.foot-brand .brand{margin-bottom:16px}
.foot-brand p{color:var(--text-mute-l);font-size:15px;max-width:300px}
.foot-col h4{font-family:var(--font-label);font-size:12px;
  color:var(--text-mute-l);margin-bottom:18px;font-weight:500}
.foot-col a,.foot-col button{display:block;color:#c4ccd6;font-size:15px;margin-bottom:12px;background:none;border:none;
  font-family:inherit;cursor:pointer;text-align:left;padding:0;transition:color .25s}
.foot-col a:hover,.foot-col button:hover{color:var(--orange-soft)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:26px;border-top:1px solid var(--ink-line);font-size:13.5px;color:var(--text-mute-l)}
.foot-bottom .legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-bottom .lnk{background:none;border:none;color:var(--text-mute-l);font-family:inherit;font-size:13.5px;cursor:pointer;padding:0;transition:color .25s}
.foot-bottom .lnk:hover{color:var(--orange-soft)}

/* ============ OVERLAYS (CSS :target) ============ */
.overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-start;justify-content:center;
  overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;
  padding:max(40px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(40px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));background:rgba(10,12,15,.7);
  opacity:0;visibility:hidden;content-visibility:hidden;
  transition:opacity .35s,visibility .35s;overflow-y:auto;overscroll-behavior:contain}
.overlay:target{opacity:1;visibility:visible;content-visibility:visible;
  }
html.ovl-open{overflow:hidden}
body.ovl-open{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
.overlay{-webkit-overflow-scrolling:touch}
.overlay-card{background:var(--paper-2);color:var(--text-dark);max-width:min(760px,100%);width:100%;border-radius:var(--r);overflow:hidden;
  padding:44px 46px;margin:auto;position:relative;transform:translateY(20px) scale(.98);transition:transform .4s var(--ease);box-shadow:none}
.overlay:target .overlay-card{transform:none}
.overlay-card h2{font-size:30px;margin-bottom:8px;color:var(--text-dark)}
.overlay-card h3{font-size:17px;margin:24px 0 8px;color:var(--text-dark)}
.overlay-card p,.overlay-card li{font-size:14.5px;color:#4a5159;line-height:1.62;margin-bottom:9px}
.overlay-card a{color:var(--orange-text);text-decoration:underline}
.overlay-card a.btn{color:var(--fg);text-decoration:none}
.overlay-card ul{padding-left:20px;margin-bottom:10px}
.overlay-card .muted{font-size:13px;color:var(--text-mute-d)}
.overlay-close{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:var(--r);background:var(--paper);
  border:1px solid var(--paper-line);display:grid;place-items:center;color:var(--text-dark);font-size:22px;text-decoration:none;
  transition:.25s;line-height:1}
.overlay-close:hover{background:var(--orange);color:var(--ink);border-color:var(--orange);transform:rotate(90deg)}
.overlay-close::after{content:"";position:absolute;inset:-3px}
.overlay-eyebrow{font-family:var(--font-label);font-weight:500;font-size:11.5px;color:var(--orange-text);margin-bottom:6px}

/* dark form popup */
.overlay-card.form-card{background:var(--ink-2);color:var(--text-light);max-width:660px;border:1px solid var(--ink-line)}
.form-card h2{color:#fff}
.form-card .overlay-eyebrow{color:var(--orange-soft)}
.form-card .fc-lead{color:var(--text-mute-l);font-size:15px;line-height:1.6;margin-bottom:26px}
.form-card .overlay-close{background:var(--ink);border-color:var(--ink-line);color:#fff}
.form-card .overlay-close:hover{background:var(--orange);border-color:var(--orange)}
.form-card form.cform{background:none;border:none;padding:0;margin:0}
.form-card .form-note{color:var(--text-mute-l)}
.form-card a.btn{text-decoration:none}
.fc-success{text-align:center;padding:14px 6px 6px}
.fc-success h2{margin-bottom:14px}
.fc-success .fc-lead{margin-bottom:18px;max-width:440px;margin-left:auto;margin-right:auto}
.fc-success .fc-fallback{font-size:13.5px;color:var(--text-mute-l);line-height:1.6;margin-bottom:26px;max-width:420px;margin-left:auto;margin-right:auto}
.fc-success .fc-fallback a{color:var(--orange-soft)}
.success-ic{width:78px;height:78px;border-radius:50%;background:rgba(242,112,28,.16);color:var(--orange-soft);
  display:grid;place-items:center;margin:4px auto 22px}
.js .success-ic{animation:popIn .5s var(--ease) both}
@keyframes popIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.js .success-ic{animation:none}}

/* ===== POPUP VARIANTS + UNIQUE ANIMATIONS ===== */
.overlay-card.wide{max-width:1080px;padding:42px 40px;background:var(--paper)}
/* popview: geklonter Sektions-Inhalt sitzt direkt in der Karte (kein Doppel-Padding) */
#popview .wrap{max-width:none;margin:0;padding:0;width:100%}
#popview .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#popview .card.card-wide{grid-column:1/-1}
.overlay-card.dark-card{background:var(--ink-2);color:var(--text-light);border:1px solid var(--ink-line)}
.dark-card h2,.dark-card h3{color:#fff}
.dark-card .overlay-eyebrow{color:var(--orange-soft)}
.dark-card .overlay-close{background:var(--ink);border-color:var(--ink-line);color:#fff}
.dark-card .overlay-close:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.dark-card a.btn{text-decoration:none}
.overlay-card .btn.lg{margin-top:28px}
.pop-head{margin-bottom:30px}
.pop-head .overlay-eyebrow{margin-bottom:8px}
.pop-head h2{font-size:clamp(26px,3.4vw,40px)}
.pop-head p{font-size:15.5px;line-height:1.55;margin-top:12px;max-width:560px}
.dark-card .pop-head p{color:var(--text-mute-l)}
.overlay-card:not(.dark-card) .pop-head p{color:var(--text-mute-d)}

/* Über uns: staggered content reveal */
#ueber-uns .pop-body>*{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#ueber-uns:target .pop-body>*{opacity:1;transform:none}
#ueber-uns:target .pop-body>*:nth-child(1){transition-delay:.06s}
#ueber-uns:target .pop-body>*:nth-child(2){transition-delay:.13s}
#ueber-uns:target .pop-body>*:nth-child(3){transition-delay:.2s}
#ueber-uns:target .pop-body>*:nth-child(4){transition-delay:.27s}
#ueber-uns:target .pop-body>*:nth-child(5){transition-delay:.34s}
#ueber-uns:target .pop-body>*:nth-child(6){transition-delay:.41s}
#ueber-uns:target .pop-body>*:nth-child(7){transition-delay:.48s}

/* Ablauf: timeline draws + steps slide in */
.pop-steps{position:relative;display:flex;flex-direction:column}
.pop-steps::before{content:"";position:absolute;left:23px;top:14px;bottom:14px;width:2px;background:var(--ink-line);
  transform:scaleY(0);transform-origin:top;transition:transform .85s var(--ease) .12s}
#ablauf:target .pop-steps::before{transform:scaleY(1)}
.pop-step{display:grid;grid-template-columns:48px 1fr;gap:18px;align-items:start;padding:13px 0;
  opacity:0;transform:translateX(-24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#ablauf:target .pop-step{opacity:1;transform:none}
#ablauf:target .pop-step:nth-child(1){transition-delay:.2s}
#ablauf:target .pop-step:nth-child(2){transition-delay:.33s}
#ablauf:target .pop-step:nth-child(3){transition-delay:.46s}
#ablauf:target .pop-step:nth-child(4){transition-delay:.59s}
.pop-step .pn{width:48px;height:48px;border-radius:var(--r);background:var(--ink);border:1.5px solid var(--ink-line);
  display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--orange-soft);
  position:relative;z-index:1;transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
#ablauf:target .pop-step .pn{background:var(--orange);border-color:var(--orange);color:var(--ink);box-shadow:none}
.pop-step:hover .pn{transform:scale(1.08)}
.pop-step .pb h3{font-size:19px;margin-bottom:5px;font-weight:700;letter-spacing:-.01em}
.pop-step .pb p{color:var(--text-mute-l);font-size:14.5px;line-height:1.55;margin:0}

/* Preise: cards rise + toggle drop */
#preise .pop-head{text-align:center}
#preise .pop-head p{margin-left:auto;margin-right:auto}
#preise .toggle-row{opacity:0;transform:translateY(-12px);transition:opacity .5s var(--ease) .08s,transform .5s var(--ease) .08s}
#preise:target .toggle-row{opacity:1;transform:none}
#preise .plan{opacity:0;transform:translateY(28px)}
#preise:target .plan{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease),box-shadow .4s var(--ease)}
#preise:target .plan:nth-child(1){transition-delay:.16s}
#preise:target .plan:nth-child(2){transition-delay:.25s}
#preise:target .plan:nth-child(3){transition-delay:.34s}
#preise .price-note{margin-top:26px}

/* Anfrage: fields ease in */
#anfrage #fcForm .field,#anfrage #fcForm>button,#anfrage #fcForm>.form-note{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
#anfrage:target #fcForm .field,#anfrage:target #fcForm>button,#anfrage:target #fcForm>.form-note{opacity:1;transform:none}
#anfrage:target #fcForm .field:nth-of-type(1){transition-delay:.1s}
#anfrage:target #fcForm .field:nth-of-type(2){transition-delay:.17s}
#anfrage:target #fcForm .field:nth-of-type(3){transition-delay:.24s}
#anfrage:target #fcForm .field:nth-of-type(4){transition-delay:.31s}
#anfrage:target #fcForm>button{transition-delay:.38s}
#anfrage:target #fcForm>.form-note{transition-delay:.44s}

@media (prefers-reduced-motion:reduce){
  #ueber-uns .pop-body>*,.pop-step,#preise .plan,#preise .toggle-row,
  #anfrage #fcForm .field,#anfrage #fcForm>button,#anfrage #fcForm>.form-note{opacity:1!important;transform:none!important;transition:none!important}
  .pop-steps::before{transform:scaleY(1)!important;transition:none!important}
}
@media (max-width:600px){
  .pop-step{grid-template-columns:42px 1fr;gap:14px}
  .pop-step .pn{width:42px;height:42px;font-size:15px}
  .pop-steps::before{left:20px}
}

/* contact CTA band */
.contact-cta{max-width:680px;margin:0 auto;text-align:center}
.contact-cta h2{font-size:clamp(32px,4.4vw,50px);margin:16px 0 16px}
.contact-cta p.lead-c{color:var(--text-mute-l);font-size:18px;line-height:1.55;max-width:560px;margin:0 auto 30px}
.contact-cta .btn.lg{margin-bottom:34px}
.contact-cta .contact-direct{flex-direction:row;justify-content:center;gap:16px;flex-wrap:wrap}
.contact-cta .cd-item{text-align:left;min-width:260px}
.contact-cta .form-note{margin-top:26px}

/* ============ RESPONSIVE ============ */
@media (min-width:1001px){
  .hero-copy{grid-column:1;grid-row:1;align-self:center}
  .mockup{grid-column:2;grid-row:1;align-self:center}
  .hero-trust{grid-column:1/-1;grid-row:2;align-self:center;margin-top:44px;flex-wrap:nowrap}
}
/* Tablet 600-1000px: Trust-Badges als 2x2 statt 3+1-Waise */
@media (min-width:600px) and (max-width:1000px){
  .hero-trust{display:grid;grid-template-columns:repeat(2,max-content);column-gap:26px;row-gap:12px;justify-content:start}
}
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr;gap:60px}
  .mockup{max-width:520px;margin:0 auto}
  .browser{transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)}
  .js .hero.loaded .browser{transform:perspective(1400px) rotateY(-7deg) rotateX(3deg)}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .nav-pills{display:none}
  .menu-trigger{display:inline-flex}
}
@media (max-width:860px){
  .nav-ov-inner{grid-template-columns:1fr;gap:24px;align-content:center;align-items:start}
  .nav-ov-side{border-left:none;border-top:1px solid var(--ink-line);padding-left:0;padding-top:26px;max-width:none}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px}
}
@media (max-width:600px){
  body{font-size:16px}
  /* --- header: passt jetzt bis 320px --- */
  .nav{gap:12px}
  .brand{font-size:21px;gap:10px}
  .brand .kw-mark{width:42px;height:42px}
  header.scrolled .brand .kw-mark{width:38px;height:38px}
  .menu-trigger{padding:11px 14px;gap:9px}
  .nav-ov-foot{margin-top:38px}
  .nav-cta{display:none}
  .nav-ov-links .t{font-size:clamp(30px,9vw,46px)}
  .nav-ov-top .brand{font-size:18px}
  .nav-close span{display:none}
  .nav-close{padding:12px 14px}

  /* --- enger Mobile-Rhythmus statt Desktop-Leerraum --- */
  .wrap{padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  .sec{padding:52px 0}
  .sec-head{margin-bottom:30px}
  .sec-head h2{margin:12px 0 12px}
  .sec-head p{font-size:16px}

  /* --- HERO: eigene Handy-Anordnung, füllt exakt den Bildschirm --- */
  .hero{padding:calc(clamp(76px,11svh,104px) + env(safe-area-inset-top)) 0 clamp(16px,2.6svh,30px);
    min-height:100vh;min-height:100svh;box-sizing:border-box;
    display:grid;align-content:center}
  .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) clamp(132px,40vw,184px);
    column-gap:14px;row-gap:0;align-items:start;align-content:center}
  .hero-copy{display:contents}
  .hero .eyebrow{grid-column:1/-1;grid-row:1;font-size:clamp(9px,2.45vw,11.5px);letter-spacing:.055em;gap:8px;
    white-space:nowrap;flex-wrap:nowrap}
  .hero .eyebrow::before{flex:0 0 auto;width:18px}
  .hero h1{grid-column:1/-1;grid-row:2;font-size:clamp(31px,min(11.4vw,8svh),56px);
    margin-top:clamp(9px,1.7svh,18px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
  .hero h1 .accent::after{height:.06em;bottom:-.09em}
  .hero p.lead{grid-column:1;grid-row:3;align-self:center;font-size:clamp(14px,min(3.95vw,2.5svh),18px);
    line-height:1.42;margin:clamp(12px,2svh,20px) 0 0;max-width:none}
  .ld-d{display:none}
  .ld-m{display:inline}
  .hero-cta{grid-column:1/-1;grid-row:4;flex-direction:column;align-items:stretch;
    gap:clamp(9px,1.4svh,14px);margin-top:clamp(14px,2.3svh,26px)}
  .hero-cta .btn.lg{width:100%;padding:clamp(15px,2.5svh,21px) 24px;font-size:clamp(16.5px,4.4vw,19.5px)}
  .hero-cta .btn.ghost{border:none;background:transparent;box-shadow:none;color:var(--text-mute-l);
    font-size:clamp(14.5px,3.9vw,17px);font-weight:600;padding:11px 6px;width:auto;align-self:center}
  .hero-cta .btn.ghost::after{content:" →"}

  /* Vorschau: klein, leicht gekippt, oben rechts neben dem Text */
  .mockup{grid-column:2;grid-row:3;width:100%;justify-self:end;align-self:center;
    margin:clamp(12px,2.1svh,20px) 0 0;max-width:none}
  .mock-tag{display:none}
  .browser{border-radius:var(--r);box-shadow:none}
  .browser,.js .browser{transform:rotate(2.8deg) translateY(12px);opacity:0;filter:none}
  .js .hero.loaded .browser{opacity:1;filter:none;transform:rotate(2.8deg);
    transition:opacity .8s ease .3s,transform 1s var(--ease) .3s}
  .browser-bar{padding:5px 6px;gap:3px;border-bottom-width:1px}
  .browser-bar .dot{width:4px;height:4px}
  .browser-url{margin-left:3px;padding:2px 4px;border-radius:4px;font-size:6px;gap:2px}
  .browser-url svg{width:5px;height:5px}
  .browser-live{font-size:5.5px;gap:2px}
  .browser-live::before{width:3px;height:3px}
  .viewport{height:clamp(112px,min(32vw,20svh),160px)}
  .blk.nav{top:0;height:14%;padding:0 7px;gap:3px}
  .blk.nav .logo{width:8px;height:8px;border-radius:2px}
  .blk.nav .bars{gap:3px}
  .blk.nav .bars i{width:11px;height:2.5px;border-radius:1px}
  .blk.heroband{top:14%;height:38%;padding:9px 8px}
  .blk.heroband .t1{height:6px;margin-bottom:4px;border-radius:2px}
  .blk.heroband .t2{height:6px;margin-bottom:6px;border-radius:2px}
  .blk.heroband .pill{width:36px;height:11px;border-radius:3px}
  .blk.cards{top:52%;height:30%;gap:5px;padding:0 8px;align-items:stretch}
  .blk.cards .c{border-radius:5px}
  .blk.cards .c i{width:9px;height:9px;border-radius:2px;margin:6px 0 0 6px;transform-origin:7px 9px}
  .blk.foot{top:82%;height:18%}
  .cursor{width:14px;height:14px}
  .cursor svg{width:14px;height:14px}
  .cursor::after{width:14px;height:14px;left:-5px;top:-5px;border-width:1.6px}

  /* Vertrauens-Punkte als kompakte Chip-Reihe statt Stapel */
  .hero-trust{grid-column:1/-1;grid-row:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:1fr;align-items:stretch;gap:8px;margin-top:clamp(12px,2.1svh,24px);font-size:clamp(11.8px,3.3vw,14px);text-align:left}
  .hero-trust>span{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-sm);
    padding:clamp(8px,1.4svh,11px) 12px;gap:6px;color:var(--text-light);justify-content:flex-start;align-items:center;min-width:0}
  .hero-trust>span>span{overflow-wrap:break-word}
  .hero-trust>span svg{width:13px;height:13px}
  .hero-trust>span svg{width:12px;height:12px}

  /* --- STATS: kompaktes 2x2-Raster --- */
  .stats{padding:34px 0}
  .stats-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .stat{text-align:left}

  /* --- LEISTUNGEN: 2 kompakte Karten nebeneinander --- */
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{display:block;padding:16px 14px;border-radius:var(--r)}
  .card::before{display:none}
  .card-ic{width:40px;height:40px;border-radius:var(--r);margin:0 0 12px}
  .card-ic svg{width:20px;height:20px}
  .card h3{font-size:14.5px;margin:0 0 6px;line-height:1.22;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
  .card p{font-size:12.5px;line-height:1.45;overflow-wrap:break-word;hyphens:auto}
  /* breite Karte (das "1" in 2-2-1): Icon links, Text rechts */
  .card.card-wide{grid-column:1/-1;display:grid;grid-template-columns:48px 1fr;column-gap:15px;align-items:center;padding:18px 16px}
  .card.card-wide .card-ic{grid-row:1/3;align-self:center;margin:0;width:48px;height:48px}
  .card.card-wide h3{grid-column:2;font-size:16px;margin:0 0 4px}
  .card.card-wide p{grid-column:2;font-size:13px;line-height:1.45}

  /* --- restliche Blöcke --- */
  .field.row{grid-template-columns:1fr;gap:0}
  /* Direktvergleich: 2 Spalten nebeneinander zum Vergleichen */
  .compare{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .col{padding:16px 13px;border-radius:var(--r)}
  .col h3{font-size:14px;margin-bottom:14px;gap:7px;overflow-wrap:break-word}
  .col h3 svg{width:18px;height:18px}
  .col h3 .kw-mark{width:20px;height:20px}
  .col ul{gap:11px}
  .col li{font-size:12.5px;gap:8px;line-height:1.35;overflow-wrap:break-word;hyphens:auto}
  .col li svg{width:14px;height:14px}
  .overlay-card{padding:32px 24px}
  .overlay{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  .overlay-card.wide{padding:26px 16px}
  .foot-top{grid-template-columns:1fr}
  .step{grid-template-columns:54px 1fr;gap:16px}
  .step-n{width:54px;height:54px;font-size:18px}
  .steps::before,.steps::after{left:26px}
  /* Footer: Unterzeile sauber, weniger Luft oben */
  footer{padding-top:44px}
  .foot-bottom{justify-content:flex-start;gap:12px 20px;padding-top:22px}
  /* Preis-Pakete kompakter -> bessere Übersicht beim Stapeln */
  .plan{padding:24px 22px}
  .plan .pname{font-size:21px}
  .plan .pdesc{font-size:13.5px;margin:6px 0 16px;min-height:0}
  .plan .price .amt{font-size:40px}
  .plan .setup{margin-bottom:12px}
  .plan ul{margin:0 0 20px;gap:10px}
  .plan li{font-size:14px}
  .overlay-card.wide .pop-head{margin-bottom:20px}
}
/* ================= PRÄSENZ / ROI-TRICHTER (v2) ================= */
.pz-search{max-width:520px;margin:0 auto 26px;display:flex;align-items:center;gap:11px;
  background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:10px 12px 10px 16px;
  box-shadow:none}
.pz-search-ic{display:grid;place-items:center;color:var(--text-mute-l);flex-shrink:0}
.pz-type{flex:1;min-width:0;display:flex;overflow:hidden}
.pz-type-t{display:inline-block;font-family:var(--font-label);font-size:14px;color:var(--text-light);
  white-space:nowrap;overflow:hidden;border-right:2px solid var(--orange);
  width:var(--tw,26ch);padding-right:9px}
.js .pz-search .pz-type-t{width:0}
.js .pz-search.in .pz-type-t{animation:pzType 1.9s steps(22,end) .3s forwards,pzCaret .9s step-end .3s infinite}
@keyframes pzType{from{width:0}to{width:var(--tw,26ch)}}
@keyframes pzCaret{50%{border-color:transparent}}
.pz-search-btn{flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink);background:var(--orange);
  border-radius:var(--r-sm);padding:8px 15px;box-shadow:none}

.pz-funnel{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:4px}
.pz-step{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
  background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r);padding:20px 24px;overflow:hidden;
  width:calc(100% - var(--in,0px));margin:0 auto;transition:border-color .35s var(--ease)}
.pz-step:hover{border-color:rgba(242,112,28,.55)}
.js .reveal .pz-step{opacity:0}
.js .reveal.in .pz-step{animation:pzIn .6s var(--ease) both;animation-delay:calc(var(--i,0) * .13s)}
@keyframes pzIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.pz-fill{position:absolute;left:0;top:0;bottom:0;width:var(--w,100%);z-index:0;
  background:linear-gradient(90deg,rgba(242,112,28,.20) 0%,rgba(242,112,28,.10) 45%,rgba(242,112,28,0) 100%);
  transform:scaleX(0);transform-origin:left center}
.js .reveal.in .pz-fill{animation:pzFill 1.05s cubic-bezier(.16,.84,.34,1) forwards;
  animation-delay:calc(.3s + var(--i,0) * .13s)}
@keyframes pzFill{to{transform:scaleX(1)}}
.pz-num,.pz-lab,.pz-pct{position:relative;z-index:1}
.pz-num{font-family:var(--font-head);font-weight:700;font-size:clamp(34px,6.4vw,50px);
  line-height:1;color:var(--orange-soft);min-width:58px;text-align:center}
.pz-lab{font-size:16.5px;color:var(--text-light);line-height:1.42}
.pz-lab strong{color:var(--orange-soft)}
.pz-pct{font-family:var(--font-label);font-size:11.5px;font-weight:500;
  color:var(--text-mute-l);background:rgba(255,255,255,.05);border:1px solid var(--ink-line);
  padding:6px 11px;border-radius:var(--r-sm);white-space:nowrap}
.pz-arrow{display:flex;justify-content:center;color:var(--ink-line);margin:0;padding:2px 0}
.js .reveal .pz-arrow{opacity:0}
.js .reveal.in .pz-arrow{opacity:1;transition:opacity .5s ease;transition-delay:calc(.24s + var(--i,0) * .13s)}
.js .reveal.in .pz-arrow svg{animation:pzDrop 1.9s var(--ease) infinite}
@keyframes pzDrop{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(3px);opacity:1}}
.pz-win{border-color:var(--orange);background:linear-gradient(140deg,#2c323a,#232930)}
.pz-win .pz-num{color:var(--orange)}
.pz-win .pz-lab{font-size:17px}
.pz-win .pz-fill{background:linear-gradient(90deg,rgba(242,112,28,.34) 0%,rgba(242,112,28,.14) 55%,rgba(242,112,28,.02) 100%)}
.pz-pct-win{background:var(--orange);border-color:var(--orange);color:var(--ink);font-weight:600;
  box-shadow:none}
.js .reveal.in .pz-win{animation:pzIn .6s var(--ease) both,pzGlow 2.8s var(--ease) 1.3s 2;
  animation-delay:calc(var(--i,0) * .13s),1.3s}
@keyframes pzGlow{0%,100%{box-shadow:none}
  40%{box-shadow:none}}
.pz-fazit{position:relative;overflow:hidden;max-width:900px;margin:40px auto 0;
  background:linear-gradient(150deg,rgba(242,112,28,.12),rgba(242,112,28,.02) 55%,rgba(255,255,255,.02));
  border:1px solid rgba(242,112,28,.34);border-radius:var(--r);padding:34px 36px 30px}
.pz-fazit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange),rgba(242,112,28,0))}
.pz-fazit::after{content:"";position:absolute;right:-90px;top:-110px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,112,28,.22),transparent 65%);filter:blur(16px);pointer-events:none}
.pz-fazit-head{position:relative;z-index:1;display:flex;align-items:center;gap:18px;margin-bottom:18px}
.pz-fazit-ic{flex-shrink:0;width:52px;height:52px;border-radius:var(--r);background:var(--orange);color:var(--ink);
  display:grid;place-items:center;box-shadow:none}
.pz-fazit-tag{display:block;font-family:var(--font-label);font-size:11px;font-weight:500;
  color:var(--orange-soft);margin-bottom:5px}
.pz-fazit h3{font-family:var(--font-head);font-weight:700;font-size:clamp(21px,2.5vw,27px);color:#fff;
  letter-spacing:-.018em;margin:0;line-height:1.12}
.pz-fazit>p,.pz-more p{text-wrap:pretty}
.pz-fazit>p{position:relative;z-index:1;font-size:16px;line-height:1.68;color:var(--text-mute-l);
  margin:0 0 22px;max-width:660px}
.pz-fazit>p b{color:var(--orange-soft);font-weight:700}
.pz-hl{position:relative;z-index:1;display:flex;align-items:center;gap:22px;margin:0 0 22px;
  background:linear-gradient(120deg,rgba(242,112,28,.16),rgba(242,112,28,.04));
  border:1px solid rgba(242,112,28,.45);border-radius:var(--r);padding:20px 24px;overflow:hidden}
.pz-hl::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%)}
.js .pz-fazit.in .pz-hl::after{animation:kwSheen 2.4s var(--ease) .6s forwards}
.pz-hl-n{flex-shrink:0;font-family:var(--font-head);font-weight:700;font-size:clamp(46px,5.6vw,64px);
  line-height:1;color:var(--orange);letter-spacing:-.04em;
  text-shadow:0 12px 30px rgba(242,112,28,.45)}
.pz-hl p{font-size:16.5px;line-height:1.55;color:var(--text-light);margin:0}
.pz-hl p b{color:#fff;font-weight:700}
.pz-fazit-foot{border-top:1px solid var(--ink-line);padding-top:17px;
  font-size:14.5px;line-height:1.6;color:var(--text-mute-l);margin:0;max-width:none}
.pz-more{position:relative;z-index:1}
.pz-more-btn{display:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal .pz-step,.js .reveal .pz-arrow{opacity:1!important}
  .js .reveal.in .pz-step,.js .reveal.in .pz-win,.js .reveal.in .pz-arrow svg,.js .pz-search.in .pz-type-t{animation:none!important}
  .pz-fill,.js .reveal.in .pz-fill{transform:none!important;animation:none!important}
  .js .pz-search .pz-type-t{width:var(--tw,26ch)}
}
@media (max-width:640px){
  .pz-search{max-width:none;padding:8px 10px 8px 13px;gap:8px}
  .pz-type-t{font-size:12px}
  .pz-search-btn{font-size:11.5px;padding:7px 12px}
}
@media (max-width:640px){
  .pz-funnel{gap:2px}
  .pz-step{width:100%!important;grid-template-columns:auto 1fr;grid-template-areas:"num lab" "num pct";
    gap:6px 14px;padding:15px 15px}
  .pz-num{grid-area:num;align-self:center;min-width:44px;font-size:33px}
  .pz-lab{grid-area:lab;font-size:14px;line-height:1.35}
  .pz-win .pz-lab{font-size:14.5px}
  .pz-pct{grid-area:pct;justify-self:start;padding:4px 9px;font-size:10.5px}
  .pz-arrow svg{width:17px;height:17px}
  .pz-fazit{padding:22px 17px 20px;margin-top:24px;border-radius:var(--r)}
  .pz-fazit-head{gap:13px;margin-bottom:14px}
  .pz-fazit-ic{width:42px;height:42px;border-radius:var(--r)}
  .pz-fazit-ic svg{width:20px;height:20px}
  .pz-fazit h3{font-size:19px}
  .pz-fazit-tag{font-size:10px;margin-bottom:3px}
  .pz-fazit>p{font-size:14px;line-height:1.6;margin-bottom:16px}
  .pz-hl{gap:14px;padding:15px 15px;border-radius:var(--r);margin-bottom:14px}
  .pz-hl-n{font-size:40px}
  .pz-hl p{font-size:14px;line-height:1.5}
  /* Fließtext aufklappbar, spart Platz */
  .pz-more{max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease),opacity .35s var(--ease)}
  .pz-fazit.open .pz-more{max-height:520px;opacity:1}
  .pz-more-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
    margin-top:2px;padding:12px 14px;border-radius:var(--r);cursor:pointer;
    background:rgba(255,255,255,.04);border:1px solid var(--ink-line);color:var(--text-light);
    font-family:inherit;font-size:13.5px;font-weight:600;-webkit-tap-highlight-color:transparent;
    transition:border-color .3s var(--ease),background .3s var(--ease)}
  .pz-more-btn svg{color:var(--orange-soft);transition:transform .4s var(--ease)}
  .pz-fazit.open .pz-more-btn{border-color:rgba(242,112,28,.55);background:rgba(242,112,28,.08)}
  .pz-fazit.open .pz-more-btn svg{transform:rotate(180deg)}
  .pz-fazit .pz-more p{margin-top:14px}
  .pz-fazit-foot{font-size:13px;padding-top:14px}
}
@media (max-width:599.98px) and (max-height:619.98px){
  .hero{padding-top:calc(88px + env(safe-area-inset-top));padding-bottom:10px}
  .hero h1{font-size:clamp(26px,10.6vw,40px);margin-top:7px;line-height:1.04}
  .hero p.lead{font-size:clamp(13.6px,3.8vw,15.5px);margin-top:11px;line-height:1.42}
  .hero-cta{margin-top:13px;gap:9px}
  .hero-cta .btn.lg{padding:13px 20px;font-size:16px}
  .hero-cta .btn.ghost{font-size:14.5px}
  .hero-trust{margin-top:12px;gap:7px;font-size:12px}
  .hero-trust>span{padding:6px 11px}
  .viewport{height:clamp(92px,26vw,112px)}
}
@media (max-width:400px){
  .pz-search{padding:7px 8px 7px 11px;gap:6px}
  .pz-type-t{font-size:10.5px}
  .pz-search-ic svg{width:14px;height:14px}
  .pz-search-btn{font-size:10.5px;padding:6px 10px}
}

/* ================= WARUM: Vergleich + Beweis-Kacheln ================= */
.sec-head.wide{max-width:900px}
.sec-head.wide p{font-size:18.5px;line-height:1.62;max-width:860px;margin-left:auto;margin-right:auto}
.compare{gap:24px;max-width:1060px}
.col{padding:34px 32px}
.col.good{position:relative;overflow:hidden}
.col-badge{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--font-label);
  font-size:10.5px;color:var(--ink);background:var(--orange);
  padding:5px 11px;border-radius:var(--r-sm);box-shadow:none}
.col-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%)}
.js .compare .col.good.in .col-sheen{animation:kwSheen 2.4s var(--ease) .55s forwards}
@keyframes kwSheen{to{transform:translateX(130%)}}
.col h3,.col ul{position:relative;z-index:2}
.js .compare .col.bad{transform:translateY(26px) translateX(-16px)}
.js .compare .col.good{transform:translateY(26px) translateX(16px)}
.js .compare .col.in{transform:none}
.js .compare .col li{opacity:0;transform:translateY(7px)}
.js .compare .col.in li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .compare .col.in li:nth-child(1){transition-delay:.14s}
.js .compare .col.in li:nth-child(2){transition-delay:.21s}
.js .compare .col.in li:nth-child(3){transition-delay:.28s}
.js .compare .col.in li:nth-child(4){transition-delay:.35s}
.js .compare .col.in li:nth-child(5){transition-delay:.42s}
.js .compare .col.in li:nth-child(6){transition-delay:.49s}
.col.good.in{box-shadow:none}

.wm-note{max-width:900px;margin:26px auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--text-mute-l)}
/* Abschluss-Notiz: eigener Rahmen, damit sie sich optisch von der
   folgenden Ueberschrift absetzt statt Text auf Text zu stapeln. */
.wm-note.wm-note-end{max-width:640px;text-align:left;padding:13px 18px 13px 19px;
  border:1px solid var(--ink-line);border-left:3px solid rgba(242,112,28,.75);
  border-radius:var(--r);background:rgba(255,255,255,.035);font-size:14.5px;
  margin-top:22px;margin-bottom:clamp(52px,7vh,92px)}
.wm-note b{color:var(--orange-soft);font-weight:700}
@media (prefers-reduced-motion:reduce){
  .js .compare .col li,.js .compare .col{opacity:1!important;transform:none!important}
  .col-sheen{display:none}
}
@media (max-width:599.98px){
  .compare{gap:7px;margin-inline:-12px;width:calc(100% + 24px)}
  /* Reveal ohne seitlichen Versatz -> kein horizontaler Overflow */
  .js .compare .col.bad,.js .compare .col.good{transform:translateY(22px)}
  .js .compare .col.in{transform:none}
  .col{padding:15px 11px;border-radius:var(--r)}
  .col h3{font-size:13.6px;gap:6px;margin-bottom:12px}
  .col h3 svg,.col h3 .kw-mark{width:18px;height:18px}
  .col ul{gap:11px}
  .col li{gap:5px;font-size:12.4px;line-height:1.42;hyphens:none;-webkit-hyphens:none}
  .col li svg{width:12px;height:12px;margin-top:2px;flex-shrink:0}
  /* Sektions-Text nicht mehr pyramidenförmig zentriert */
  .sec-head.center p,.sec-head p{text-align:left;max-width:none;text-wrap:pretty}
  .col-badge{top:9px;right:9px;font-size:9px;padding:4px 8px;}
  .col.good h3{padding-right:0}
  .wm-note{font-size:13.5px;margin-top:14px;text-align:left}
  .wm-note.wm-note-end{font-size:13.5px;padding:12px 14px 12px 15px;margin-top:16px;
    margin-bottom:clamp(38px,6vh,58px)}
}



@media (prefers-reduced-motion:reduce){
  #preise:target .treue-shine,#preise:target .treue-ic,#preise:target .treue h3 span::after,
  #preise:target .treue-seg.free,#preise:target .treue-arrow svg{animation:none!important}
  .treue h3 span::after{transform:scaleX(1)}
}
@media (max-width:639.98px){
  .treue{grid-template-columns:1fr;gap:14px;padding:20px 17px;border-radius:var(--r);margin-bottom:26px}
  .treue-ic{width:46px;height:46px;border-radius:var(--r)}
  .treue-ic svg{width:22px;height:22px}
  .treue-tag{font-size:10px;margin-bottom:7px}
  .treue h3{font-size:22px;margin-bottom:9px}
  .treue>.treue-body>p{font-size:13.5px;line-height:1.55;margin-bottom:14px}
  .treue-track{grid-template-columns:1fr 1fr;gap:8px}
  .treue-arrow{display:none}
  .treue-seg{padding:11px 12px;border-radius:var(--r)}
  .treue-seg .ts-lab{font-size:9.5px;margin-bottom:3px}
  .treue-seg .ts-val{font-size:14px}
  .treue-fine{font-size:10.5px;margin-top:11px}
}

/* ================= KONTAKT (veredelt) ================= */
.kt{position:relative;overflow:hidden}
.kt-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.kt-glow{position:absolute;left:50%;top:34%;width:min(760px,120vw);height:min(760px,120vw);
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(242,112,28,.17),transparent 62%);filter:blur(26px)}
.js .kt-glow{animation:ktBreath 8s ease-in-out infinite}
@keyframes ktBreath{0%,100%{opacity:.62}50%{opacity:1}}
.kt>.wrap{position:relative;z-index:1}
.kt-cta{position:relative;display:inline-block;margin-bottom:26px}
.contact-cta .kt-cta .btn.lg{margin-bottom:0}
.kt-ring{position:absolute;inset:-7px;border-radius:var(--r-sm);border:1.5px solid var(--orange);opacity:0;pointer-events:none}
.js .contact-cta.in .kt-ring{animation:ktRing 2.8s var(--ease) infinite 1s}
@keyframes ktRing{0%{transform:scale(.95);opacity:.5}70%{transform:scale(1.16);opacity:0}100%{opacity:0}}
.kt-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:0 auto 30px;max-width:680px}
.kt-chip{display:inline-flex;align-items:center;gap:7px;background:var(--ink-2);border:1px solid var(--ink-line);
  border-radius:var(--r-sm);padding:8px 14px;font-size:13px;color:var(--text-light);
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.kt-chip:hover{border-color:rgba(242,112,28,.5);}
.kt-chip svg{color:var(--orange-soft);flex-shrink:0}
.js .contact-cta .kt-chip{opacity:0;transform:translateY(10px)}
.js .contact-cta.in .kt-chip{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .contact-cta.in .kt-chip:nth-child(1){transition-delay:.25s}
.js .contact-cta.in .kt-chip:nth-child(2){transition-delay:.33s}
.js .contact-cta.in .kt-chip:nth-child(3){transition-delay:.41s}
.kt-or{display:flex;align-items:center;gap:16px;max-width:440px;margin:0 auto 20px;
  font-family:var(--font-label);font-size:11px;
  color:var(--text-mute-l)}
.kt-or::before,.kt-or::after{content:"";flex:1;height:1px}
.kt-or::before{background:linear-gradient(90deg,transparent,var(--ink-line))}
.kt-or::after{background:linear-gradient(90deg,var(--ink-line),transparent)}
.contact-cta .cd-item{position:relative;overflow:hidden;min-width:290px;padding:17px 20px;border-radius:var(--r);
  background:linear-gradient(150deg,var(--ink-2),#20262e)}
.contact-cta .cd-item::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%)}
.contact-cta .cd-item:hover::after{animation:kwSheen 1.05s var(--ease) forwards}
.contact-cta .cd-item:hover{border-color:var(--orange);
  box-shadow:none}
.contact-cta .cd-item .ci{box-shadow:inset 0 0 0 1px rgba(242,112,28,.25)}
.contact-cta .cd-item .cv{font-size:16px}
@media (prefers-reduced-motion:reduce){
  .js .kt-glow,.js .contact-cta.in .kt-ring{animation:none!important}
  .js .contact-cta .kt-chip{opacity:1!important;transform:none!important}
}
@media (max-width:600px){
  .kt-cta{display:block;margin-bottom:20px}
  .kt-chips{flex-direction:column;align-items:stretch;gap:8px;margin-bottom:24px}
  .kt-chip{justify-content:flex-start;font-size:12.5px;padding:9px 13px;border-radius:var(--r)}
  .kt-or{font-size:10px;margin-bottom:16px;gap:12px}
  .contact-cta .contact-direct{flex-direction:column;gap:10px}
  .contact-cta .cd-item{min-width:0;width:100%;padding:14px 15px;border-radius:var(--r)}
  .contact-cta .cd-item .cv{font-size:14.5px}
  .contact-cta .cd-item .ci{width:38px;height:38px;border-radius:var(--r)}
}

/* ================= POPUP-VEREDELUNG (gemeinsam) ================= */
.pop-glow{position:absolute;left:50%;top:-120px;width:520px;height:520px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(242,112,28,.22),transparent 62%);filter:blur(18px);opacity:0}
.overlay:target .pop-glow{opacity:1;transition:opacity 1.1s ease .2s}
.dark-card>*:not(.pop-glow):not(.overlay-close){position:relative;z-index:1}
.overlay-card .overlay-close{z-index:5}

/* ================= ÜBER UNS ================= */
.au-card{max-width:820px}
.au-founders{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 22px}
.au-f{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--paper-line);
  border-radius:var(--r-sm);padding:6px 14px 6px 6px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.au-f:hover{border-color:var(--orange);}
.au-av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--orange);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.02em;
  box-shadow:none}
.au-ft{display:flex;flex-direction:column;line-height:1.15}
.au-ft b{font-size:13.5px;color:var(--text-dark);font-weight:700}
.au-ft small{font-size:10.5px;color:var(--text-mute-d);font-family:var(--font-label);}
.au-loc{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-mute-d);
  font-family:var(--font-label);letter-spacing:.04em;margin-left:2px}
.au-loc svg{color:var(--orange)}
.au-card p b{color:var(--text-dark);font-weight:700}

.au-card h3{font-family:var(--font-head);font-weight:700;font-size:20px;margin:26px 0 14px;letter-spacing:-.015em}
.au-list{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:8px}
.au-list li{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r);
  background:var(--paper);border:1px solid var(--paper-line);font-size:14.5px;line-height:1.5;color:var(--text-mute-d);
  transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease)}
.au-list li:hover{border-color:var(--orange);transform:translateX(4px);background:#fff}
.au-list li b{color:var(--text-dark);font-weight:700}
.au-li-ic{flex-shrink:0;width:22px;height:22px;border-radius:var(--r);display:grid;place-items:center;margin-top:1px;
  background:rgba(242,112,28,.13);color:var(--orange-text);transition:background .3s var(--ease),color .3s var(--ease)}
.au-list li:hover .au-li-ic{background:var(--orange);color:var(--ink)}
.au-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--paper-line);padding-top:20px}
.au-foot .muted{margin:0}
.au-foot .btn{margin-top:0;flex-shrink:0}
#ueber-uns .pop-body>*:nth-child(8){transition-delay:.55s}
#ueber-uns .pop-body>*:nth-child(9){transition-delay:.62s}
#ueber-uns .pop-body>*:nth-child(10){transition-delay:.69s}
#ueber-uns .au-list li,#ueber-uns .au-f{opacity:0;transform:translateY(10px)}
#ueber-uns:target .au-list li,#ueber-uns:target .au-f{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .45s var(--ease),border-color .3s,background .3s}
#ueber-uns:target .au-f:nth-child(1){transition-delay:.14s}
#ueber-uns:target .au-f:nth-child(2){transition-delay:.2s}
#ueber-uns:target .au-list li:nth-child(1){transition-delay:.5s}
#ueber-uns:target .au-list li:nth-child(2){transition-delay:.57s}
#ueber-uns:target .au-list li:nth-child(3){transition-delay:.64s}
#ueber-uns:target .au-list li:nth-child(4){transition-delay:.71s}
#ueber-uns:target .au-list li:nth-child(5){transition-delay:.78s}
#ueber-uns:target .au-list li:hover{transform:translateX(4px)}
@media (max-width:639.98px){
  .au-founders{gap:8px}
  .au-loc{font-size:11.5px}
  .au-list li{padding:11px 12px;gap:10px;font-size:13.5px;line-height:1.45}
  .au-li-ic{width:20px;height:20px;border-radius:6px}
  .au-foot{flex-direction:column;align-items:stretch;gap:14px}
  .au-foot .btn{width:100%;justify-content:center}
}

/* ================= ABLAUF-POPUP ================= */
.ab-card{max-width:800px}
.pop-step{border-radius:var(--r);padding:13px 14px;margin-left:-14px;transition:background .3s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
.pop-step:hover{background:rgba(255,255,255,.03)}
.pop-step .pb{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.pop-step .pb h3{grid-column:1;margin-bottom:0}
.pop-step .pb p{grid-column:1/-1;margin-top:5px}
.ps-meta{grid-column:2;justify-self:end;font-family:var(--font-label);font-size:10.5px;font-weight:500;
  color:var(--text-mute-l);
  background:rgba(255,255,255,.05);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:5px 10px;white-space:nowrap}
.ps-meta-on{color:var(--ink);background:var(--orange);border-color:var(--orange)}
#ablauf:target .pop-step .pn{animation:pnPop .55s var(--ease) both}
#ablauf:target .pop-step:nth-child(1) .pn{animation-delay:.28s}
#ablauf:target .pop-step:nth-child(2) .pn{animation-delay:.41s}
#ablauf:target .pop-step:nth-child(3) .pn{animation-delay:.54s}
#ablauf:target .pop-step:nth-child(4) .pn{animation-delay:.67s}
@keyframes pnPop{0%{transform:scale(.6) rotate(-8deg)}60%{transform:scale(1.12) rotate(2deg)}100%{transform:none}}
.ab-sum{display:flex;align-items:flex-start;gap:14px;margin-top:24px;
  background:linear-gradient(140deg,rgba(242,112,28,.14),rgba(242,112,28,.04));
  border:1px solid rgba(242,112,28,.4);border-radius:var(--r);padding:18px 20px;
  opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease) .78s,transform .55s var(--ease) .78s}
#ablauf:target .ab-sum{opacity:1;transform:none}
.ab-sum-ic{flex-shrink:0;width:36px;height:36px;border-radius:var(--r);background:var(--orange);color:var(--ink);
  display:grid;place-items:center;box-shadow:none}
.ab-sum p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-mute-l)}
.ab-sum p b{color:#fff;font-weight:700}
@media (max-width:639.98px){
  .pop-step{grid-template-columns:40px 1fr;gap:13px;padding:11px 10px;margin-left:-10px}
  .pop-step .pn{width:40px;height:40px;border-radius:var(--r);font-size:14px}
  .pop-steps::before{left:19px}
  .pop-step .pb{grid-template-columns:1fr}
  .pop-step .pb h3{font-size:16.5px}
  .ps-meta{grid-column:1;justify-self:start;margin-top:5px;font-size:9.5px;padding:4px 8px}
  .pop-step .pb p{font-size:13.5px}
  .ab-sum{padding:15px 14px;gap:11px;margin-top:18px}
  .ab-sum p{font-size:13.5px}
}

/* ================= KARRIERE-VEREDELUNG ================= */
.krr-sheen{position:absolute;inset:0;z-index:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.10) 50%,transparent 62%)}
#karriere:target .krr-sheen{animation:kwSheen 2.6s var(--ease) 1s 2}
.krr-apply{position:relative;overflow:hidden}
.krr-apply>*:not(.krr-sheen){position:relative;z-index:1}
.krr-card-it{position:relative;overflow:hidden}
.krr-card-it:hover{box-shadow:none}
.krr-card-it:hover .krr-ic{background:var(--orange);color:var(--ink);box-shadow:none}
.krr-ic{transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.krr-rank{position:relative;overflow:hidden}
.krr-rank:hover{border-color:rgba(242,112,28,.55);}
#karriere:target .krr-rank.rk-top{box-shadow:none}
#karriere:target .krr-rank.rk-top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%);
  transform:translateX(-130%);animation:kwSheen 2.2s var(--ease) 1.4s 2}
.krr-ctotal{position:relative;overflow:hidden}
#karriere:target .krr-ctotal::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);
  transform:translateX(-130%);animation:kwSheen 2.4s var(--ease) 1.6s 1}

@media (prefers-reduced-motion:reduce){
  #ueber-uns .au-list li,#ueber-uns .au-f,.ab-sum{opacity:1!important;transform:none!important;transition:none!important}
  #ablauf:target .pop-step .pn,#karriere:target .krr-sheen,#karriere:target .krr-rank.rk-top::after,
  #karriere:target .krr-ctotal::after{animation:none!important}
  .pop-glow{opacity:1}
}

/* ================= HANDY-FEINSCHLIFF ================= */
@media (max-width:599.98px){
  /* Sauberer Textumbruch überall */
  p,li,.lead,.sec-head p,.card p,.col li span,.au-list li,.pz-lab,.pz-fazit p,.wm-note,.krr-mini li{
    overflow-wrap:break-word;word-break:normal;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;
    hyphenate-limit-chars:8 4 4;
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
    hyphenate-limit-lines:2;-webkit-hyphenate-limit-lines:2}
  h1,h2,.pop-head h2,.sec-head h2{text-wrap:balance;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}
  h3,h4{text-wrap:pretty;overflow-wrap:break-word;hyphens:none;-webkit-hyphens:none}

  /* "Unser Weg"-Badge überlappt nicht mehr mit "Kleim Websites" */
  .col.good{padding-top:14px}
  .col-badge{position:static;display:inline-block;margin:0 0 10px;font-size:9.5px;padding:4px 9px}
  .col.good h3{margin-top:0}

  /* Leistungen: Karten als Akkordeon (nur Handy) */
  #leistungen .card.acc{position:relative;display:grid;grid-template-columns:36px 1fr 20px;
    grid-template-areas:"ic title chev" "body body body";align-items:center;gap:0 12px;
    padding:15px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease)}
  #leistungen .card.acc:active{transform:scale(.985)}
  #leistungen .card.acc .card-ic{grid-area:ic;width:36px;height:36px;border-radius:var(--r);margin:0}
  #leistungen .card.acc .card-ic svg{width:19px;height:19px}
  #leistungen .card.acc h3{grid-area:title;margin:0;font-size:15.5px;line-height:1.25;align-self:center}
  #leistungen .card.acc .acc-chev{grid-area:chev;display:grid;place-items:center;color:var(--text-mute-d);
    transition:transform .4s var(--ease),color .3s var(--ease)}
  #leistungen .card.acc p{grid-area:body;margin:0;max-height:0;opacity:0;overflow:hidden;font-size:13.5px;line-height:1.55;
    transition:max-height .45s var(--ease),opacity .3s var(--ease),margin .35s var(--ease)}
  #leistungen .card.acc.open{border-color:var(--orange);background:#fff}
  #leistungen .card.acc.open .acc-chev{transform:rotate(180deg);color:var(--orange)}
  #leistungen .card.acc.open .card-ic{background:var(--orange);color:var(--ink)}
  #leistungen .card.acc.open p{max-height:300px;opacity:1;margin-top:12px}
  #leistungen .cards-grid{grid-template-columns:1fr;gap:9px}
  #leistungen .card.card-wide{grid-column:auto}
}

/* ===== KARRIERE (Recruiting-Overlay + Nav-Akzent) ===== */
.nav-pill-join{color:var(--orange-soft);position:relative}
.nav-pill-join::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;background:linear-gradient(90deg,var(--orange),transparent);opacity:.5;transition:opacity .3s}
.nav-pill-join:hover::after{opacity:1}
.nav-ov-links a[data-join] .t{color:var(--orange-soft)}

.krr-card{max-width:1080px}
.krr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
.krr-card-it{background:var(--ink);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:22px 20px;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.krr-card-it:hover{border-color:rgba(242,112,28,.5);}
.krr-ic{width:42px;height:42px;border-radius:var(--r);display:grid;place-items:center;background:rgba(242,112,28,.12);color:var(--orange-soft);margin-bottom:13px}
.krr-card-it h3{font-size:17.5px;font-weight:700;color:#fff;margin-bottom:7px;letter-spacing:-.01em}
.krr-card-it p{font-size:14px;line-height:1.6;color:var(--text-mute-l);margin:0}
.krr-card-it b{color:var(--text-light)}
.krr-mini{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.krr-mini li{position:relative;padding-left:17px;font-size:13.5px;line-height:1.42;color:var(--text-mute-l)}
.krr-mini li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--orange-soft)}
.krr-mini li b{color:var(--text-light)}

.krr-pay{background:var(--ink);border:1px solid var(--ink-line);border-radius:var(--r);padding:26px 24px;margin-bottom:26px}
.krr-pay-head{margin-bottom:18px}
.krr-pay-head h3{font-size:20px;color:#fff;font-weight:700;margin:6px 0 6px;letter-spacing:-.01em}
.krr-pay-head p{font-size:14px;color:var(--text-mute-l);line-height:1.55;margin:0;max-width:560px}
.krr-ranks{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:20px}
.krr-rank{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:13px 8px;text-align:center;transition:border-color .35s var(--ease),transform .35s var(--ease)}
.krr-rank .rk-n{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(16px,2.2vw,20px);color:var(--orange-soft);letter-spacing:-.02em}
.krr-rank .rk-t{display:block;font-size:11.5px;color:var(--text-mute-l);margin-top:3px;letter-spacing:.02em}
.krr-rank.rk-top{background:var(--orange);border-color:var(--orange)}
.krr-rank.rk-top .rk-n,.krr-rank.rk-top .rk-t{color:#fff}
.krr-points{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.krr-points li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.55;color:var(--text-mute-l)}
.krr-points li svg{flex-shrink:0;margin-top:3px;color:var(--orange-soft)}
.krr-points li b{color:var(--text-light)}

.krr-calc{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:20px 20px 18px;overflow:hidden}
.krr-calc-tag{font-family:var(--font-label);font-weight:500;font-size:11px;color:var(--orange-soft);margin-bottom:14px}
.krr-calc-intro{font-size:13.5px;color:var(--text-mute-l);line-height:1.5;margin:0 0 14px}
.krr-calc-intro b{color:var(--text-light);font-weight:700}
.krr-calc-flow{display:flex;flex-direction:column;gap:0}
.krr-crow{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--ink);border:1px solid var(--ink-line);border-radius:var(--r-sm);padding:13px 15px}
.krr-cl{display:flex;align-items:center;gap:12px}
.krr-cstep{flex-shrink:0;width:26px;height:26px;border-radius:var(--r);background:rgba(242,112,28,.15);color:var(--orange-soft);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:14px}
.krr-ct b{display:block;color:#fff;font-size:14px;font-weight:700;line-height:1.3}
.krr-ct small{display:block;color:var(--text-mute-l);font-size:12px;margin-top:2px;line-height:1.35}
.krr-cval{font-family:var(--font-head);font-weight:700;font-size:18px;color:#fff;white-space:nowrap}
.krr-cop{align-self:flex-start;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--orange-soft);margin:6px 0;padding-left:22px;line-height:1}
.krr-ctotal{background:linear-gradient(155deg,rgba(242,112,28,.18),rgba(242,112,28,.05));border-color:rgba(242,112,28,.55)}
.krr-ctotal .krr-cval{color:var(--orange-soft);font-size:22px}
.krr-calc-note{font-size:13px;color:var(--text-mute-l);line-height:1.55;margin:13px 0 0}
.krr-calc-note b{color:var(--text-light)}
.krr-legal{font-size:11.5px;color:var(--text-mute-l);line-height:1.5;margin:16px 0 0;opacity:.85}
.krr-apply{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:linear-gradient(150deg,rgba(242,112,28,.14),rgba(242,112,28,.04));border:1px solid rgba(242,112,28,.42);border-radius:var(--r);padding:24px 26px;margin-bottom:14px}
.krr-apply-txt{flex:1 1 300px}
.krr-apply-txt h3{font-size:20px;color:#fff;font-weight:700;margin:6px 0 7px;letter-spacing:-.01em}
.krr-apply-txt p{font-size:14px;color:var(--text-mute-l);line-height:1.55;margin:0;max-width:470px}
.krr-apply-btn{flex-shrink:0;white-space:nowrap;margin-top:0}
.bw-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.bw-actions .btn{margin-top:0;width:100%}
.btn.bw-wa{--bg:#25D366;--fg:#fff;box-shadow:none}
.btn.bw-wa:hover{background:#1fbe5a;box-shadow:none}
@media (max-width:479.98px){.bw-actions{grid-template-columns:1fr}.krr-apply{padding:20px 18px}.krr-apply-btn{width:100%}}

/* :target Stagger — im Stil von #ueber-uns / #ablauf */
#karriere .krr-card-it,#karriere .krr-apply,#karriere .btn.lg,#karriere .krr-legal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
#karriere:target .krr-card-it,#karriere:target .krr-apply,#karriere:target .btn.lg,#karriere:target .krr-legal{opacity:1;transform:none}
#karriere:target .krr-card-it:nth-child(1){transition-delay:.08s}
#karriere:target .krr-card-it:nth-child(2){transition-delay:.15s}
#karriere:target .krr-card-it:nth-child(3){transition-delay:.22s}
#karriere:target .krr-card-it:nth-child(4){transition-delay:.29s}
#karriere:target .krr-apply{transition-delay:.34s}
#karriere:target .btn.lg{transition-delay:.42s}
#karriere:target .krr-legal{transition-delay:.48s}
#karriere .krr-rank{opacity:0;transform:translateY(12px) scale(.94);transition:opacity .45s var(--ease),transform .45s var(--ease)}
#karriere:target .krr-rank{opacity:1;transform:none}
#karriere:target .krr-rank:nth-child(1){transition-delay:.42s}
#karriere:target .krr-rank:nth-child(2){transition-delay:.5s}
#karriere:target .krr-rank:nth-child(3){transition-delay:.58s}
#karriere:target .krr-rank:nth-child(4){transition-delay:.66s}
#karriere:target .krr-rank:nth-child(5){transition-delay:.74s}
#karriere:target .krr-rank.rk-top{animation:popIn .5s var(--ease) .74s both}

/* Tablet 600-1199px: Karten-Grid bleibt 2-spaltig (Laptop-Look), Ränge nebeneinander */
@media (min-width:600px) and (max-width:1199px){
  .krr-ranks{grid-template-columns:repeat(5,1fr)}
}
/* Mobile <600px: Karten stapeln, Rang-Leiste als wischbare Snap-Reihe */
@media (max-width:599.98px){
  .price-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}
  /* 2 Karten pro Reihe — Icon-Zeile und Titel-Zeile beider Karten exakt auf gleicher Höhe */
  .krr-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
  .overlay-card.wide{padding:24px 10px}
  .krr-grid{gap:7px}
  .krr-card-it{padding:14px 11px;display:grid;grid-template-rows:34px auto 1fr;align-content:start;gap:0}
  .krr-card-it .krr-mini{padding-left:0}
  .krr-card-it .krr-ic{grid-row:1;width:34px;height:34px;border-radius:var(--r);margin:0}
  .krr-card-it .krr-ic svg{width:18px;height:18px}
  .krr-card-it h3{grid-row:2;margin:10px 0 0;font-size:14.5px;line-height:1.22;letter-spacing:-.01em;
    min-height:2.44em;display:flex;align-items:flex-start}
  .krr-card-it>p{grid-row:3;margin-top:9px}
  .krr-mini{grid-row:3;margin-top:10px;gap:7px}
  .krr-mini li{font-size:12.5px;padding-left:12px;line-height:1.4;hyphens:none;-webkit-hyphens:none}
  .krr-mini li::before{left:0;top:6px;width:5px;height:5px}
  .krr-pay{padding:20px 16px}
  .krr-ranks{display:flex;overflow-x:auto;gap:9px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-inline:-2px;padding:2px}
  .krr-ranks::-webkit-scrollbar{display:none}
  .krr-rank{flex:0 0 30%;scroll-snap-align:start}
  .krr-row{font-size:13px;gap:10px}
  .krr-row.krr-sum b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  #karriere .krr-card-it,#karriere .krr-pay,#karriere .btn.lg,#karriere .krr-legal,#karriere .krr-rank{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
}


/* KW-UNIVERSAL-RESPONSIVE  ── Skalierung auf grossen Screens (Windows/4K/Ultrawide).
   Greift NUR ab >1512px (oberhalb MacBook), Laptop-/MacBook-Look bleibt identisch. */
@media (min-width:1600px){
  body{font-size:18px}
  .hero{padding:152px 0 92px}
  .hero-inner{gap:64px}
  .hero-copy{max-width:640px}
  .hero h1{font-size:clamp(38px,5.8vw,76px)}
  .hero p.lead{font-size:21px;max-width:560px}
  .sec{padding:132px 0}
  .sec.tight{padding:100px 0}
  .sec-head{max-width:720px;margin-bottom:64px}
  .sec-head h2{font-size:clamp(32px,4.6vw,58px)}
  .sec-head p{font-size:19px}
}
@media (min-width:1921px){
  :root{--maxw:clamp(1560px,74vw,1720px)}
  body{font-size:19px}
  .hero{padding:176px 0 104px}
  .hero-inner{gap:74px}
  .hero-copy{max-width:700px}
  .hero h1{font-size:clamp(38px,5.8vw,86px)}
  .hero p.lead{font-size:22.5px;max-width:600px}
  .sec{padding:150px 0}
  .sec.tight{padding:112px 0}
  .sec-head{max-width:780px;margin-bottom:70px}
  .sec-head h2{font-size:clamp(32px,4.6vw,64px)}
  .sec-head p{font-size:20px;line-height:1.6}
}
@media (min-width:2560px){
  :root{--maxw:1800px}
  body{font-size:20px}
  .hero{padding:196px 0 116px}
  .hero-copy{max-width:760px}
  .hero h1{font-size:clamp(38px,5.8vw,96px)}
  .hero p.lead{font-size:24px;max-width:640px}
  .sec{padding:168px 0}
  .sec-head h2{font-size:clamp(32px,4.6vw,72px)}
  .sec-head p{font-size:21px}
}
/* -- Hinweis Grossprojekte im Preise-Modal -- */
.pkg-gross{margin-top:16px;display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:rgba(242,112,28,.09);border:1.5px solid rgba(242,112,28,.42);border-radius:var(--r);
  padding:32px 34px;box-shadow:none}
.pkg-gross .pg-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:var(--r);
  background:rgba(242,112,28,.16);color:var(--orange-text);flex-shrink:0}
.pkg-gross .pg-ic svg{width:26px;height:26px}
.pkg-gross h4{font-size:24px;margin-bottom:8px;line-height:1.15}
.pkg-gross p{color:var(--text-mute-d);font-size:16.5px;line-height:1.6;text-wrap:pretty}
.pkg-gross .btn{font-size:16.5px;padding:16px 28px}
.pkg-gross .btn{white-space:nowrap;flex-shrink:0}
@media (max-width:860px){
  .pkg-gross{grid-template-columns:auto 1fr;gap:14px;padding:18px 18px}
  .pkg-gross .btn{grid-column:1/-1;justify-content:center}
}
@media (max-width:599.98px){
  /* Icon neben die Ueberschrift, Text darunter, Button auf volle Breite */
  .pkg-gross{grid-template-columns:auto 1fr;gap:12px 13px;padding:20px 17px;border-radius:var(--r)}
  .pkg-gross .pg-ic{width:44px;height:44px;border-radius:var(--r)}
  .pkg-gross .pg-ic svg{width:21px;height:21px}
  .pkg-gross>div{grid-column:2}
  .pkg-gross h4{font-size:19px;margin-bottom:6px}
  .pkg-gross p{font-size:14.5px}
  .pkg-gross .btn{grid-column:1/-1;width:100%;justify-content:center;min-height:50px;font-size:16px}
}

/* ============ STUFENMODELL / ZIELGRUPPEN / ABRECHNUNG ============ */

/* -- Stufen -- */
.stufen-hint{display:none}
.stufen{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.stufe{position:relative;overflow:hidden;border:1px solid var(--paper-line);
  background:linear-gradient(168deg,#fff 0%,var(--paper-2) 46%,#fdfaf6 100%);
  border-radius:var(--r);padding:22px 20px 24px;display:flex;flex-direction:column;
  box-shadow:none;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s}
.stufe::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 30%,rgba(242,112,28,.32) 72%,transparent)}
.stufe:hover{border-color:rgba(242,112,28,.45);
  box-shadow:none}
.st-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.st-n{font-family:var(--font-label);font-weight:500;font-size:13px;
  color:var(--orange);opacity:.9}
.st-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r);flex-shrink:0;
  background:linear-gradient(150deg,rgba(242,112,28,.17),rgba(242,112,28,.06));
  border:1px solid rgba(242,112,28,.2);color:var(--orange-text)}
.stufe h3{font-size:22px;margin-bottom:6px}
.st-tag{font-family:var(--font-label);font-size:10.5px;
  color:var(--text-mute-d);display:block;margin-bottom:14px}
.stufe>p{color:var(--text-mute-d);font-size:14.5px;line-height:1.55;margin-bottom:14px}
.stufe ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.stufe ul li{position:relative;padding-left:18px;font-size:14px;line-height:1.45}
.stufe ul li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;border-radius:2px;
  background:var(--orange);opacity:.85}
.st-price{display:inline-block;margin-top:auto;padding:8px 14px;border-radius:var(--r-sm);
  background:rgba(242,112,28,.12);border:1px solid rgba(242,112,28,.32);color:var(--orange-text);
  font-weight:700;font-size:13.5px;align-self:flex-start}
.stufe.st-top-tier{border-color:rgba(242,112,28,.45);box-shadow:none}
.st-sheen{position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:.85}

/* Unterüberschrift innerhalb einer Sektion */
.sec-head.sub{margin-top:66px;margin-bottom:30px}
.h2-sub{font-size:clamp(24px,3vw,34px)!important}

/* -- Abrechnung -- */
.ab-models{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch}
.ab-model{position:relative;background:rgba(255,255,255,.035);border:1px solid var(--ink-line);
  border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column}
.ab-model.ab-std{border-color:rgba(242,112,28,.45);background:rgba(242,112,28,.055);
  box-shadow:none}
.ab-badge{align-self:flex-start;font-family:var(--font-label);font-size:11px;
  padding:6px 12px;border-radius:var(--r-sm);margin-bottom:16px;
  background:var(--orange);color:var(--ink);font-weight:500}
.ab-badge.alt{background:transparent;border:1px solid var(--ink-line);color:var(--text-mute-l)}
.ab-model h3{font-size:25px;margin-bottom:11px}
.ab-lead{color:var(--text-mute-l);font-size:15.5px;line-height:1.6;margin-bottom:18px}
.ab-model ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.ab-model ul li{position:relative;padding-left:20px;font-size:15px;line-height:1.5}
.ab-model ul li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;
  border-radius:2px;background:var(--orange);opacity:.85}
.ab-or{display:grid;place-items:center;position:relative}
.ab-or::before{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--ink-line)}
.ab-or span{position:relative;z-index:1;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--ink-2);border:1px solid var(--ink-line);
  font-family:var(--font-label);font-size:12px;font-weight:500;
  color:var(--text-light);
  box-shadow:none}
.ab-close{margin-top:26px;display:flex;gap:20px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid var(--ink-line);border-radius:var(--r);padding:28px 30px}
.ab-close-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r);flex-shrink:0;
  background:rgba(242,112,28,.13);color:var(--orange-soft)}
.ab-close h3{font-size:22px;margin-bottom:9px}
.ab-close p{color:var(--text-mute-l);font-size:15.5px;line-height:1.62;text-wrap:pretty}
.ab-close p b{color:var(--text-light)}
.ab-link{display:inline-flex;align-items:center;gap:8px;margin-top:15px;font-weight:700;font-size:15px;
  color:var(--orange-soft);transition:gap .3s var(--ease)}
.ab-link:hover{gap:12px}

/* ---- Tablet ---- */
@media (max-width:1000px){
  .stufen{grid-template-columns:repeat(2,1fr)}
  .stufe.st-top-tier{grid-column:1/-1}
  .stufe.st-top-tier ul{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 22px}
  .ab-models{grid-template-columns:1fr;gap:16px}
  .ab-or{padding:2px 0}
  .ab-or::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}
  .ab-or span{background:var(--ink);padding:0 16px}
}

/* ---- Handy: eigene Anordnung, kein Stapel ---- */
@media (max-width:599.98px){
  /* Stufen werden zur wischbaren Reihe */
  .stufen-hint{display:flex;align-items:center;gap:7px;margin:-14px 0 16px;
    font-family:var(--font-label);font-size:11px;
    color:var(--orange-text)}
  .stufen-hint svg{animation:stNudge 1.9s var(--ease) infinite}
  @keyframes stNudge{0%,60%,100%{transform:translateX(0)}80%{transform:translateX(5px)}}
  .stufen{display:flex;grid-template-columns:none;gap:8px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
    touch-action:pan-x;overscroll-behavior:contain;
    scroll-padding-inline:max(26px,env(safe-area-inset-left));
    scrollbar-width:none;align-items:stretch;
    margin:0 calc(-1 * max(26px,env(safe-area-inset-left)));
    padding:2px max(26px,env(safe-area-inset-left)) 10px}
  .stufen::-webkit-scrollbar{display:none}
  /* Karte 2 und 3 liegen beim Laden ausserhalb des Viewports. Mit einzelnem
     .reveal startet ihr Einflug (translateY 26px) erst mitten im Wischen —
     die Karte zieht sich waehrend der Seitwaertsbewegung nach oben. In der
     Wischreihe stehen die Karten deshalb sofort. */
  .js .stufen .stufe.reveal{opacity:1;transform:none;transition:none}
  .stufe{flex:0 0 72vw;max-width:288px;scroll-snap-align:center;padding:14px 15px 16px}
  .stufe:hover{transform:none;box-shadow:none}
  .st-top{margin-bottom:8px}
  .st-n{font-size:12px}
  .stufe h3{font-size:18.5px;margin-bottom:4px}
  .st-tag{font-size:10px;margin-bottom:7px}
  .stufe>p{font-size:13px;line-height:1.45;margin-bottom:9px}
  .stufe ul{gap:5px}
  .stufe ul li{font-size:12.5px;line-height:1.4;padding-left:15px}
  .stufe ul li::before{top:.6em;width:8px;height:2px}
  .st-ic{width:30px;height:30px;border-radius:var(--r)}
  .st-ic svg{width:16px;height:16px}
  .st-price{font-size:12px;padding:6px 11px;margin-top:10px}
  .stufe.st-top-tier ul{display:flex}
  .sec-head.sub{margin-top:34px;margin-bottom:20px}

  /* Zielgruppen: kompaktes 2er-Raster, Icon neben Titel */

  /* Abrechnung: Badge in die Kopfzeile neben den Titel, damit die Karte
     nicht drei Zeilen nur fuer Label und Ueberschrift verbraucht */
  .ab-models{gap:11px}
  /* Badge in eigener Zeile: neben der Ueberschrift stand diese
     eingerueckt gegen den Text darunter und wirkte versetzt. */
  .ab-model{padding:18px 16px;border-radius:var(--r);display:flex;flex-direction:column;gap:0}
  .ab-badge{margin-bottom:11px;align-self:flex-start;font-size:10px;padding:5px 10px}
  .ab-model h3{font-size:19px;margin:0 0 7px}
  .ab-lead{font-size:14.5px;margin-bottom:13px}
  .ab-model ul{gap:7px;margin-top:0}
  .ab-model ul li{font-size:13.8px;padding-left:20px;line-height:1.4}
  .ab-model ul li::before{top:.62em;width:9px;height:2px}
  .ab-or{display:none}
  .ab-close{flex-direction:column;gap:13px;padding:20px 18px;margin-top:14px}
  .ab-close-ic{width:38px;height:38px;border-radius:var(--r)}
  .ab-close h3{font-size:19px}
  .ab-close p{font-size:14.5px}
}

@media (prefers-reduced-motion:reduce){
}

/* Handy: Benefit-Chips kompakter — vorher 65px hoch und zweizeilig.
   .hero-trust span{display:inline-flex} ist spezifischer als .ld-m{display:none},
   deshalb hier eigene Regeln mit passender Spezifitaet. */
.hero-trust .ld-m{display:none}
.hero-trust .ld-d{display:inline}
@media (max-width:600px){
  .hero-trust{gap:7px;margin-top:18px}
  .hero-trust>span{padding:8px 12px;font-size:12.2px;line-height:1.25;gap:6px}
  .hero-trust>span svg{width:11px;height:11px}
  .hero-trust .ld-d{display:none}
  .hero-trust .ld-m{display:inline}
}

/* ==================== KW-TABLET ====================
   Eigene mittlere Ansicht fuer Touch-Tablets 600-1366px.
   (pointer:coarse) steht in JEDEM Block — ohne die Sperre bekaeme jedes
   Laptop-Browserfenster dieser Breite das iPad-Layout. */

/* ---- T-Portrait: 600-1024px Touch ---- */
@media (min-width:600px) and (max-width:1024px) and (pointer:coarse){
  /* Hoehe gedeckelt: volle 100svh liessen auf dem iPad ueber 680px leer,
     der Hero wirkte dadurch ausgestorben. Jetzt fuellt der Inhalt den
     Bereich, das Kennzahlen-Band darunter lugt bewusst an. */
  .hero{min-height:min(100svh,780px);display:flex;align-items:center;
    padding-top:clamp(96px,11svh,116px);padding-bottom:clamp(24px,4svh,44px)}
  /* Deko-Marken innerhalb des Fensters halten, sonst laufen sie
     auf dem Tablet ueber den rechten Rand */
  .mock-tag.t-b{right:6px;bottom:-14px}
  .mock-tag.t-a{left:0;top:-16px}
  .mock-tag{font-size:11px;padding:6px 10px}
  .hero-inner{width:100%}

  /* Nebeneinander statt gestapelt: gestapelt stand das Fenster unten
     mittig, wirkte hochkant und liess links und rechts viel Leerraum. */
  .hero-inner{grid-template-columns:1.12fr .88fr;column-gap:clamp(18px,2.8vw,40px);
    row-gap:clamp(26px,4svh,44px);align-items:center}
  .hero-copy{grid-column:1;grid-row:1;max-width:none;align-self:center}
  .mockup{grid-column:2;grid-row:1;max-width:none;width:100%;margin:0;align-self:center}
  .hero-trust{grid-column:1/-1;grid-row:2;justify-content:flex-start}

  /* K1 — eigene Typo-Skala, groesser gefasst damit der Hero gefuellt wirkt */
  .hero h1{font-size:clamp(27px,4.3vw,48px);line-height:1.05;text-wrap:balance}
  .hero p.lead{font-size:clamp(16px,1.9vw,19px);max-width:44ch}
  /* Fenster im Querformat wie ein echter Desktop-Browser */
  /* 2:1 statt 16:10 — die Browser-Leiste kommt oben drauf,
     erst damit wirkt das Gesamtfenster querformatig */
  .hero .viewport{height:auto;aspect-ratio:2/1;min-height:0}
  /* Buttons nebeneinander statt gestapelt */
  .hero-cta{gap:10px;flex-wrap:nowrap;margin-top:clamp(18px,3svh,28px)}
  .hero-cta .btn{padding:13px 18px;font-size:14.5px;white-space:nowrap}
  .hero-cta .btn.ghost{padding-inline:16px}
  .hero-trust{gap:14px 26px;font-size:14.5px;margin-top:0}
  .hero .eyebrow{font-size:11.5px;}

  /* T1 — Bloecke umgruppieren statt stapeln */
  .stufen{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .stufe.st-top-tier{grid-column:1/-1}
  .stufe.st-top-tier ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px}
  .ab-models{grid-template-columns:1fr;gap:16px}

  /* T6 — Dichte zwischen Desktop und Handy, nicht Handy-eng */
  .sec{padding:84px 0}
  .sec-head{margin-bottom:44px}
}

/* ---- T-Landscape: 1025-1366px Touch ---- */
@media (min-width:1025px) and (max-width:1366px) and (pointer:coarse){
  /* K4 — quer ist die Hoehe knapp (real ~700px): Hoehe fuellen, aber
     Padding, Typo und CTAs kompakter statt den Hero zu deckeln */
  .hero{min-height:100svh;padding-top:clamp(72px,10svh,98px);padding-bottom:clamp(20px,4svh,42px)}
  .hero-inner{gap:clamp(20px,2.6vw,40px);align-items:center}
  /* K1 — 2 saubere Zeilen statt vier */
  /* G8 — Breiten viewport-basiert, NICHT in Prozent: % waere hier
     spaltenrelativ (~320px) und die Headline briche auf 6 Zeilen. */
  .hero h1{font-size:clamp(28px,3.15vw,38px);line-height:1.0}
  .hero p.lead{font-size:clamp(15px,1.4vw,17px);max-width:44ch}
  .hero-copy{max-width:min(560px,50vw)}
  .hero-cta{margin-top:18px}
  .hero-cta .btn{padding:12px 20px;font-size:15px}
  .hero-trust{margin-top:16px;font-size:13.5px;gap:10px 18px}
  /* K2/K3 — Motiv gross genug und vollstaendig im Bild */
  .mockup{max-width:none}
  .browser{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg)}

  /* T1 — quer ist Platz fuer drei Spalten */
  .stufen{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .stufe.st-top-tier{grid-column:auto}
  .stufe.st-top-tier ul{display:flex}
  .ab-models{grid-template-columns:1fr auto 1fr;gap:18px}
  .ab-or{display:grid}
  .ab-or::before{top:0;bottom:0;left:auto;right:auto;width:1px;height:auto}
  .sec{padding:88px 0}
}

/* ---- Touch generell: Hygiene ---- */
@media (min-width:600px) and (max-width:1366px) and (pointer:coarse){
  /* T7 — lange deutsche Woerter duerfen Spalten nicht sprengen */
  .stufen>*,.ab-models>*,.cards-grid>*,.price-grid>*{min-width:0}
  .stufe h3,.ab-model h3{overflow-wrap:break-word}
  /* T6 — Touch-Targets */
  .nav-pill,.btn,.plan-toggle,.ms-btn{min-height:44px}
  /* T4 — ruckelfreies Touch-Scrollen */
  body{background-attachment:scroll}
  /* Handy-Snap-Reihe aufloesen: auf dem Tablet ist Platz fuers Raster */
  .stufen-hint,.stufen-nav{display:none}
}
/* ================== /KW-TABLET ==================== */

/* Handy: Mockup hoeher und weiter oben — mit 1.94:1 wirkte das
   Browserfenster flach und gestreckt. Innenflaeche deutlich hoeher,
   der gewonnene Platz kommt aus dem Abstand nach unten. */
@media (max-width:600px){
  /* Ein gemeinsamer Abstands-Rhythmus statt Einzelwerte:
     Headline -> Fenster -> CTA -> Chips in gleichmaessigen Schritten. */
  .hero{--rhythmus:clamp(19px,6.7vw,26px)}
  /* Kopfbereich enger: der gewonnene Platz geht in die Fensterhoehe */
  .hero{padding-top:calc(clamp(96px,27vw,105px) + env(safe-area-inset-top))}
  /* Headline minimal kleiner — schafft zusaetzlich Luft */
  .hero h1{font-size:clamp(29px,min(10.6vw,7.4svh),52px)}
  /* Fenster nach oben gezogen: mehr Hoehe, gleiche Breite */
  /* Feste Hoehen statt vw/svh: gemischte Viewport-Einheiten aendern sich
     beim Scrollen (Adressleiste, Scrollbar) — das Fenster sprang dadurch
     in der Groesse und die Animation wirkte, als starte sie neu. */
  /* Hoehe NUR ueber die Breite. Viewport-Hoehen aendern sich beim Ein-
     und Ausklappen der Adressleiste — genau daran sprang das Fenster. */
  .hero .viewport{height:clamp(132px,42vw,180px)}
  /* Die Hero-Elemente sind eigene Grid-Zeilen — der Abstand gehoert
     an row-gap, Margins wuerden in der Zeilenhoehe verpuffen. */
  .hero .hero-inner{row-gap:var(--rhythmus);align-content:start}
  /* Der Zeilenabstand kommt beim Fenster nicht an (die H1-Box reicht
     bis dicht heran). Padding schafft den Platz zuverlaessig. */
  .hero .mockup{align-self:start;padding-top:calc(var(--rhythmus) * .8)}
  .hero .mockup,.hero .hero-cta,.hero .hero-trust{margin-top:0}
  /* Eyebrow eng an die Headline: ueber die Zeilenhoehe des Eyebrows
     loesen, nicht ueber negative Margins an der H1 — die verschieben
     deren Box und fressen den Zeilenabstand zum Fenster auf. */
  .hero .eyebrow{margin-bottom:calc(var(--rhythmus) * -0.6)}
}

/* Handy: Das Mockup stand rechtsbuendig neben dem Lead-Absatz.
   Seit der entfernt ist, wirkt es verschoben — also mittig setzen. */
@media (max-width:600px){
  .hero .mockup{grid-column:1/-1;justify-self:center;width:min(340px,86%);margin-inline:auto}
}

/* Kein seitliches Verschieben der Seite: fixed-Overlays und Deko-Glows
   ragen minimal ueber den rechten Rand und machten die Seite horizontal
   ziehbar. clip statt hidden, damit sticky/fixed weiter funktionieren. */
html{overflow-x:clip}
body{overflow-x:clip;width:100%;max-width:100%}
.nav-ov-bg,.hero-bg,.kt-bg{overflow:hidden}
.overlay,.nav-overlay,.mob-bar{max-width:100vw}

/* ---------- ENTRANCE ----------
   Kurzer Marken-Auftritt beim Laden: Logo zoomt sanft auf, danach
   wischt die Flaeche nach oben weg. Rein per CSS, damit nichts am
   bestehenden Hero-Intro haengt. */
.kw-intro{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:var(--ink);
  /* Sicherung: rein dekorativ. Sollte die Animation irgendwo nicht
     starten, bleibt die Seite trotzdem bedienbar. */
  pointer-events:none;
  animation:kwIntroWipe .5s cubic-bezier(.76,0,.24,1) .6s forwards}
.kw-intro-mark{
  width:clamp(64px,15vw,104px);height:clamp(64px,15vw,104px);
  animation:kwIntroMark .66s cubic-bezier(.16,.84,.34,1) both}
.kw-intro::after{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:clamp(150px,34vw,240px);height:clamp(150px,34vw,240px);border-radius:50%;
  background:radial-gradient(circle,rgba(242,112,28,.30),transparent 66%);
  filter:blur(26px);animation:kwIntroGlow .72s var(--ease) both}
@keyframes kwIntroMark{
  0%{opacity:0;transform:scale(.72)}
  60%{opacity:1}
  100%{opacity:1;transform:scale(1)}}
@keyframes kwIntroGlow{
  0%{opacity:0;transform:scale(.6)}
  100%{opacity:1;transform:scale(1)}}
@keyframes kwIntroWipe{
  to{transform:translateY(-101%);visibility:hidden}}
/* Sicherung: ohne Animationen darf nichts die Seite blockieren */
@media (prefers-reduced-motion:reduce){ .kw-intro{display:none} }

/* ==================== KW-MOBILE ====================
   Handy-Ansicht: Wisch-Affordance, Direktkontakt, Intro-Choreografie.
   Alles in max-width:599.98px, Desktop und Tablet bleiben unberuehrt. */

/* R7 — Overflow-Fix: der 640px-Glow im geschlossenen Nav-Overlay ragte
   ueber den rechten Rand und erzeugte auf jedem Handy ~6px Seitwaerts-Scroll. */
.nav-ov-bg{overflow:hidden}

/* Sticky-Bar und Affordance-Bausteine standardmaessig aus */
.mob-bar{display:none}
.stufen-nav{display:none}
.sh-chev{display:none}

@media (max-width:599.98px){
  /* R4 — animierte Chevrons statt statischem Pfeil */
  .stufen-hint{gap:9px}
  .sh-chev{display:inline-flex;gap:3px;align-items:center}
  .sh-chev i{width:6px;height:6px;border-right:2px solid currentColor;border-top:2px solid currentColor;
    transform:rotate(45deg);opacity:.35;animation:shChev 1.6s var(--ease) infinite}
  .sh-chev i:nth-child(2){animation-delay:.16s}
  .sh-chev i:nth-child(3){animation-delay:.32s}
  @keyframes shChev{0%,100%{opacity:.3;transform:rotate(45deg) translateX(0)}
    45%{opacity:1;transform:rotate(45deg) translateX(2px)}}

  /* R4 — Punkte-Leiste + Zaehler unter der Snap-Reihe */
  .stufen-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
    margin:-4px 0 18px;padding:0 2px}
  .sn-dots{display:flex;gap:6px;align-items:center}
  .sn-dots i{width:7px;height:7px;border-radius:var(--r-sm);background:var(--paper-line);
    transition:width .32s var(--ease),background .32s var(--ease)}
  .sn-dots i.on{width:22px;background:var(--orange)}
  .sn-count{font-family:var(--font-label);font-size:11.5px;
    color:var(--text-mute-d)}
  .sn-count b{color:var(--orange-text);font-weight:500}

  /* R5 — Sticky-Bottom-Bar: Anrufen + Anfrage immer erreichbar */
  .mob-bar{display:grid;grid-template-columns:auto 1fr;gap:9px;position:fixed;z-index:120;
    left:0;right:0;bottom:0;padding:9px max(12px,env(safe-area-inset-right))
    calc(9px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    background:rgba(27,32,39,.92);
    border-top:1px solid var(--ink-line);
    transform:translateY(102%);transition:transform .42s var(--ease)}
  .mob-bar.on{transform:none}
  .mb-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 16px;border-radius:var(--r);font-weight:700;font-size:15px;
    border:1.5px solid var(--ink-line);color:var(--text-light);
    -webkit-tap-highlight-color:transparent}
  .mb-wa{background:rgba(37,211,102,.14);border-color:rgba(37,211,102,.45);color:#25d366}
  .mb-cta{background:var(--orange);border-color:var(--orange);color:var(--ink);
    box-shadow:none}
  .mb-item:active{transform:scale(.98)}
  /* Platz schaffen, damit die Bar nichts verdeckt */
  footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

  /* Kein eigenes Intro hier: der Hero hat bereits eins ueber
     .js .hero.loaded .ld (Einblendung) und .js .hero.play .cursor
     (Klick-Sequenz im Mockup). Ein zweites System wuerde es ueberschreiben. */
}
@media (prefers-reduced-motion:reduce){
  /* nur die von diesem Block ergaenzten Bewegungen abschalten —
     die bestehenden Hero-Animationen bleiben unberuehrt */
  .sh-chev i{animation:none!important}
  .mob-bar{transition:none}
}
/* ---------- HANDY-PERFORMANCE ----------
   Auf dem Telefon kosten die grossflaechigen Weichzeichner am meisten.
   Eine backdrop-filter-Leiste muss bei JEDEM Scroll-Frame den Hintergrund
   hinter sich neu weichzeichnen — genau das fuehlt sich beim Scrollen
   zaeh an. Optisch praktisch identisch, aber gratis: deckendere Flaeche
   ohne Filter, und die Deko-Glows als Farbverlauf statt als
   weichgezeichnete Vollflaeche. */
@media (max-width:599.98px){
  header.scrolled{background:var(--ink);
    }
  .mob-bar{background:var(--ink);
    }
  /* Die Deko-Glows driften in 14-17 s um wenige Pixel und werden dabei
     leicht skaliert. Auf dem Handy sieht man die Bewegung nicht, aber
     jede Skalierung zwingt den Browser, die weichgezeichnete Flaeche neu
     zu rastern - dauerhaft, waehrend man scrollt. Aussehen bleibt,
     nur die unsichtbare Bewegung entfaellt. */
  .js .glow{animation:none}
  .js .kt-glow{animation:none;opacity:.82}
}
/* ================== /KW-MOBILE ==================== */

/* ==================== KW-DESKTOP-XL ====================
   Flaechennutzung, Skalierung und Deko-Verankerung ab 1200px.
   Handy (<600) und Tablet (600-1366 coarse) bleiben unberuehrt. */

/* D0 — Container-Breite gestaffelt hochziehen (--maxw ist max-width, wirkt) */
@media (min-width:1700px){ :root{--maxw:min(1560px,84vw)} }
@media (min-width:2000px){ :root{--maxw:min(1800px,82vw)} }
@media (min-width:2300px){ :root{--maxw:min(2000px,82vw)} }
@media (min-width:2700px){ :root{--maxw:min(2240px,76vw)} }
@media (min-width:3200px){ :root{--maxw:min(2400px,70vw)} }
@media (min-width:4000px){ :root{--maxw:min(2600px,62vw)} }
@media (min-width:4800px){ :root{--maxw:min(2760px,55vw)} }

@media (min-width:1200px){
  /* D2 — Lesespalten deckeln, unabhaengig vom Container.
     Werte in ch bewusst niedrig: CSS-ch = Breite der Ziffer 0 und damit
     schmaler als der Durchschnittsbuchstabe (Faktor ~1.2 bei Inter). */
  .ab-close p,.ab-lead,.stufe>p{max-width:56ch;margin-inline:0}
  /* nur den zentrierten Fliesstext mittig halten — Karten bleiben buendig */
  .sec-head.wide p{max-width:min(56ch,710px);margin-inline:auto}
  .sec-head:not(.center) p{margin-inline:0}
  .pkg-gross p{max-width:58ch}

  /* D4 — Hero-Deko am Content verankern statt am Bildschirmrand */
  .glow.g1{right:max(-90px,calc(50% - var(--maxw)/2 - 130px))}
  .glow.g2{left:max(-120px,calc(50% - var(--maxw)/2 - 150px))}
}

/* Headline mit dem laengeren "bis hin zum" brach auf grossen Schirmen
   auf vier Zeilen und darunter klaffte eine Luecke zu den Trust-Punkten.
   Textspalte breiter, Schrift etwas ruhiger, Abstand gestrafft. */
@media (min-width:1200px){
  /* Textspalte breiter statt Schrift kleiner: mit "bis hin zum" brach die
     Headline sonst auf vier Zeilen. Rechnerisch passen bei 702px Spalte
     nur 57px — zu klein. Mit breiterer Spalte bleiben es 66px. */
  .hero-inner{grid-template-columns:1.22fr .78fr}
  .hero-copy{max-width:none}
  .hero h1{font-size:clamp(38px,3.5vw,58px)}
  /* Die Zeile richtet sich am hoeheren Mockup aus, dadurch entstand
     unter den Buttons eine grosse Luecke. Text oben andocken. */
  .hero-inner{align-items:start;row-gap:clamp(20px,2.6vh,34px)}
  .hero-copy{align-self:center}
  .mockup{align-self:center}
  .hero-trust{margin-top:0;align-self:start}
}
@media (min-width:1921px){
  .hero-inner{grid-template-columns:1.18fr .82fr}
  .hero h1{font-size:clamp(52px,3.4vw,72px)}
}

/* D3/D6 — ab 2000px: Typo, Karten und Raster wachsen mit */
@media (min-width:2000px){
  .stufen{gap:clamp(20px,1.5vw,34px)}
  .stufe{padding:clamp(28px,2vw,44px) clamp(26px,1.9vw,42px) clamp(30px,2.1vw,46px)}
  .stufe h3{font-size:clamp(22px,1.4vw,32px)}
  .stufe>p,.stufe ul li{font-size:clamp(14.5px,.82vw,17px)}
  .st-ic{width:clamp(36px,2.2vw,50px);height:clamp(36px,2.2vw,50px)}
  .st-ic svg{width:clamp(22px,1.4vw,30px);height:clamp(22px,1.4vw,30px)}
  .st-price{font-size:clamp(13.5px,.82vw,17px);padding:clamp(8px,.6vw,13px) clamp(14px,1vw,22px)}
  .ab-models{gap:clamp(22px,1.7vw,38px)}
  .ab-model{padding:clamp(30px,2.2vw,48px) clamp(28px,2vw,44px)}
  .ab-model h3{font-size:clamp(25px,1.6vw,36px)}
  .ab-lead,.ab-model ul li,.ab-close p{font-size:clamp(15.5px,.92vw,19px)}
  .ab-close{padding:clamp(28px,2.1vw,46px) clamp(30px,2.2vw,48px);gap:clamp(20px,1.5vw,34px)}
  .ab-close-ic{width:clamp(46px,2.9vw,64px);height:clamp(46px,2.9vw,64px)}
}

/* D3 — Hero auf sehr breiten Schirmen: Spalten zusammenhalten, Motiv mitwachsen
   lassen. Ohne das reisst der Hero auf 32:9 auseinander und das Mockup wirkt
   verloren, obwohl der Container korrekt breit ist. */
@media (min-width:2600px){
  .hero-inner{max-width:2280px;margin-inline:auto;gap:clamp(54px,3.4vw,110px)}
  .hero-copy{max-width:clamp(760px,25vw,980px)}
  .hero p.lead{max-width:clamp(600px,19vw,760px)}
  .mockup{transform:scale(clamp(1,1 + (100vw - 2600px)/14000,1.28));transform-origin:center left}
  .hero-trust{font-size:clamp(15px,.62vw,19px)}
}
@media (min-width:2600px) and (prefers-reduced-motion:reduce){
  .mockup{transform:scale(1.12)}
}

/* D7 — kurzer Laptop-Viewport: Hero darf nicht ueberlaufen */
@media (min-width:1200px) and (max-height:760px){
  .hero{padding-top:clamp(96px,13vh,132px);padding-bottom:clamp(28px,4vh,56px)}
  .hero-trust{margin-top:clamp(14px,2.5vh,26px)}
}
/* ================== /KW-DESKTOP-XL ==================== */

/* ==================== PREISSEITE (/preise/) ====================
   Die Kopfleiste der Startseite ist im Ruhezustand durchsichtig — sie
   liegt dort ueber dem dunklen Hero. Hier beginnt die Seite hell, die
   helle Schrift waere unsichtbar. Also von Anfang an deckend. */
.pg-preise header{background:var(--ink);border-bottom:1px solid var(--ink-line)}
.pg-preise header.scrolled{background:var(--ink)}
/* ==================== PREISSEITE (/preise/) ====================
   Eigene Seite statt Popup: mehr Platz, alles untereinander lesbar.
   Grundregeln stehen VOR den zugehoerigen Media Queries. */
.pg-preise .pr-main{padding-top:calc(126px + env(safe-area-inset-top))}
.pg-preise .pr-sec{scroll-margin-top:96px}
.pg-preise .nav-back{padding:11px 16px;font-size:14px}

/* Umschalter oben: gleiche Logik wie im frueheren Popup, nur groesser.
   Zwei Zeilen je Knopf — Name und Einstiegspreis — damit man die Wahl
   trifft, ohne erst zu scrollen. */
/* Ohne JS taete der Umschalter nichts — dann stehen die drei Angebote
   stattdessen untereinander und alles bleibt lesbar. */
.pr-switch{display:none}
.js .pr-switch{display:flex;max-width:760px;gap:6px;padding:6px;margin-bottom:40px}
.js #einmalView,.js #socialView{margin-top:0}
#einmalView,#socialView{margin-top:46px}
.pr-switch .ms-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:14px 14px;line-height:1.25}
.pr-switch .ms-btn b{font-size:15.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.pr-switch .ms-btn span{font-size:12.5px;font-weight:500;opacity:.75}
.pr-switch .ms-btn.on span{opacity:.85}

/* Auf der eigenen Seite ist Platz: Paketdetails stehen offen da,
   der Aufklapper entfaellt. Genau das macht sie uebersichtlicher. */
@media (min-width:600px){
  /* Der Aufklapper bleibt auch am Rechner: sichtbar stehen nur die
     Kernangaben, der Rest kommt auf Klick. Das war vorher offen und
     hat die Karten mit Text zugeschuettet. */
  .pg-preise .plan.open .plan-details{max-height:1000px}
}
/* Aufklapper lesbarer: groessere Tippflaeche, kraeftigere Schrift,
   und der Inhalt faehrt nicht nur auf, sondern blendet dabei ein —
   ein reines max-height-Auffahren wirkt wie ein Ruck. */
.plan-toggle{min-height:50px;font-weight:700;letter-spacing:.01em}
.plan-details{opacity:0;transition:max-height .45s var(--ease),opacity .35s var(--ease) .05s}
.plan.open .plan-details{opacity:1}
.plan-details>*{transform:translateY(6px);transition:transform .45s var(--ease-rv) .06s}
.plan.open .plan-details>*{transform:none}
/* Innerhalb der aufgeklappten Details staffeln sich die Punkte */
.plan.open .plan-details li{animation:pdIn .5s var(--ease-rv) both;
  animation-delay:calc(.12s + var(--pi,0) * .05s)}
@keyframes pdIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .plan-details,.plan-details>*{opacity:1!important;transform:none!important;transition:none!important}
  .plan.open .plan-details li{animation:none!important}
}

/* Einmal-Paket steht auf dunklem Grund: Text der Sektionsköpfe hell */
.pg-preise .dark .sec-head p{color:var(--text-mute-l)}

/* Zusatzleistungen als eigene Karten */
.xtra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.xtra-card{min-width:0;background:var(--ink);border:1px solid var(--ink-line);
  border-radius:var(--r);padding:28px 26px;color:var(--text-light)}
.xtra-ic{width:46px;height:46px;border-radius:var(--r);display:grid;place-items:center;
  background:rgba(242,112,28,.14);color:var(--orange-soft);margin-bottom:18px}
.xtra-card h3{font-size:19px;margin-bottom:10px;letter-spacing:-.01em}
.xtra-p{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.xtra-p b{font-family:var(--font-head);font-weight:700;
  font-size:28px;line-height:1;letter-spacing:-.02em;color:#fff}
.xtra-p span{font-size:13px;color:var(--text-mute-l)}
.xtra-card>p{color:var(--text-mute-l);font-size:14.5px;line-height:1.55;margin-bottom:16px}
.xtra-card ul{list-style:none;display:grid;gap:8px}
.xtra-card li{position:relative;padding-left:20px;font-size:14px;line-height:1.45}
.xtra-card li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:2px;
  border-radius:2px;background:var(--orange)}

.pr-disclaimer{margin-top:30px;color:var(--text-mute-d);font-size:13px;line-height:1.65;
  max-width:820px}
.pr-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

@media (hover:hover) and (pointer:fine){
  .pr-switch .ms-btn:not(.on):hover{background:rgba(255,255,255,.55)}
}
@media (max-width:900px){
  .xtra-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}
@media (max-width:599.98px){
  .pg-preise .pr-main{padding-top:calc(96px + env(safe-area-inset-top))}
  .pg-preise .pr-sec{scroll-margin-top:74px}
  .pr-switch{flex-direction:column;gap:5px;margin-bottom:28px}
  .pr-switch .ms-btn{flex-direction:row;justify-content:space-between;padding:12px 16px;min-height:52px}
  .pr-switch .ms-btn span{font-size:12px}
  .xtra-card{padding:22px 20px}
  .pr-cta-row{flex-direction:column}
  .pr-cta-row .btn{width:100%;justify-content:center}
  .pg-preise .nav-back{display:none}
}

/* ==================== PREISSEITE · FEINSCHLIFF ====================
   Grundregeln zuerst, Media Queries danach. */

/* Knoepfe aller Karten einer Reihe enden auf derselben Linie: die Karten
   werden vom Raster ohnehin gleich hoch gezogen, der Knopf wird ans
   untere Ende geschoben. Ohne das haengt er dort, wo der Text zufaellig
   aufhoert. */
.plan .btn{margin-top:auto}
/* Gefuellte Knoepfe haben keinen Rahmen, helle einen von 1,5px — dadurch
   waren sie 2px unterschiedlich hoch und die Beschriftungen der
   Nachbarkarten standen nicht auf einer Linie. Ein durchsichtiger
   Rahmen gleicht die Hoehe an, ohne etwas sichtbar zu veraendern. */
.plan .btn{border:1.5px solid transparent}
.plan .btn.ghost-d{border-color:var(--paper-line)}
.plan .btn.ghost{border-color:var(--ink-line)}
/* Beschreibung und Zusatzzeile bekommen eine feste Mindesthoehe, damit
   Preis und Folgezeilen der Nachbarkarten auf gleicher Hoehe stehen. */
.plan .pdesc{min-height:2.9em}
.plan .setup{min-height:2.9em}

/* Einblenden beim Umschalten: die Ansicht wechselt von display:none auf
   sichtbar, dadurch startet die Animation jedes Mal neu. */
.js #aboView,.js #einmalView,.js #socialView{animation:kwViewIn .45s var(--ease-rv) both}
.js .price-grid>.plan{animation:kwCardIn .55s var(--ease-rv) both}
.js .price-grid>.plan:nth-child(2){animation-delay:.07s}
.js .price-grid>.plan:nth-child(3){animation-delay:.14s}
.js #socialView .sm-staffel-box{animation:kwCardIn .55s var(--ease-rv) .16s both}
.js #socialView .sm-fine{animation:kwCardIn .55s var(--ease-rv) .22s both}
@keyframes kwViewIn{from{opacity:0}to{opacity:1}}
@keyframes kwCardIn{from{opacity:0;transform:translateY(14px) scale(.992)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js #aboView,.js #einmalView,.js #socialView,
  .js .price-grid>.plan,.js #socialView .sm-staffel-box,
  .js #socialView .sm-fine,.js #aboView .treue{animation:none!important}
}

/* --- Social: Unterschied der beiden Pakete sichtbar machen --- */
.sm-basis{display:flex;align-items:center;gap:11px;margin:0 0 4px;
  padding:13px 15px;border-radius:var(--r);
  background:rgba(43,50,60,.055);border:1px solid rgba(43,50,60,.1)}
.sm-basis svg{flex-shrink:0;color:var(--slate)}
.sm-basis b{font-size:14.5px;color:var(--text-dark)}
.sm-basis span{font-size:13px;color:var(--text-mute-d);display:block;margin-top:1px}
.sm-plus-lab{display:flex;align-items:center;gap:10px;margin:18px 0 2px;
  font-family:var(--font-label);font-size:11px;
  color:var(--orange-text)}
.sm-plus-lab::after{content:"";flex:1;height:1px;background:var(--paper-line)}
.plan li.plus svg{color:var(--orange)}
/* Abgrenzung am Fuss der schlankeren Karte: erklaert den Unterschied
   und fuellt zugleich den Raum, der entsteht, weil die Nachbarkarte
   mehr Inhalt hat. */
/* Kernangaben: das, was ohne Klick zu sehen ist. Bewusst wenige,
   kurze Zeilen — die Ziffer traegt die Aussage. */
/* flex:none ist wichtig: .plan ul erbt sonst flex:1 aus der Grundregel,
   dehnt sich in der hoeheren Nachbarkarte auf und reisst eine Luecke
   zwischen Kernangaben und Satz auf. */
.plan ul.sm-kern{list-style:none;display:grid;gap:0;margin:4px 0 0;flex:none;
  border-top:1px solid var(--paper-line)}
.sm-kern li{display:flex;align-items:center;gap:13px;padding:11px 2px;min-height:52px;
  border-bottom:1px solid var(--paper-line);font-size:14.5px;
  color:var(--text-dark);line-height:1.4}
.sm-kern li>b{flex-shrink:0;min-width:34px;text-align:center;
  font-family:var(--font-head);font-weight:700;
  font-size:20px;letter-spacing:-.02em;color:var(--orange-text)}
.sm-kern li>svg{flex-shrink:0;width:34px}
.sm-kern li.ist>svg{color:var(--slate)}
.sm-kern li.plus>svg{color:var(--orange)}
.sm-kern li span b{font-weight:700}
.sm-satz{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-mute-d);min-height:3.2em}
.sm-diff{margin-top:20px;padding:15px 17px;border-radius:var(--r);
  border:1px dashed var(--paper-line);color:var(--text-mute-d);
  font-size:13.5px;line-height:1.6}
.sm-diff b{color:var(--text-dark);font-weight:700}
.pg-preise .sm-lead b{color:var(--text-dark);font-weight:700}

/* --- Erklaerteil unter der Staffel: drei Spalten statt Textwand --- */
/* Kleingedrucktes: drei gleich gebaute Kaesten statt frei stehender
   Textbloecke. Jeder traegt Ueberschrift, kurze Liste und genau eine
   Fusszeile — dadurch enden alle drei auf derselben Kante. */
.sm-fine{display:grid;gap:16px;margin-top:26px;align-items:stretch;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.sm-fine section{min-width:0;display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--paper-line);
  border-radius:var(--r-sm);padding:22px 22px 18px}
.sm-fine h4{font-family:var(--font-label);font-size:11px;
  color:var(--orange-text);margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--paper-line)}
.sm-fine b{color:var(--text-dark);font-weight:700}
.sm-fine ul{list-style:none;display:grid;gap:10px;margin:0}
.sm-fine li{position:relative;padding-left:19px;color:var(--text-mute-d);
  font-size:13.5px;line-height:1.55}
.sm-fine li::before{content:"";position:absolute;left:0;top:.52em;width:9px;height:2px;
  border-radius:2px;background:var(--orange);opacity:.5}
.sm-fine-fuss{margin-top:auto;padding-top:14px;color:var(--text-mute-d);
  font-size:13px;line-height:1.5}
.sm-fine-fuss b{color:var(--orange-text)}

/* Beispielrechnung als eigener Kasten statt Fussnote */
.sm-bsp{margin-top:16px;padding:16px 18px;border-radius:var(--r);
  background:rgba(242,112,28,.07);border:1px solid rgba(242,112,28,.2)}
.sm-bsp b{color:var(--text-dark)}
.sm-bsp .sm-bsp-sum{font-family:var(--font-head);
  font-weight:700;color:var(--orange-text)}

@media (min-width:600px){
  /* Der Social-Bereich war auf 720px gedeckelt, waehrend der Container
     bis 2000px breit wird — daher die leeren Flanken. Jetzt laeuft er
     wie die uebrigen Ansichten bis an den Rand des Rasters. */
  .price-grid.two{max-width:none}
  .js .pr-switch{max-width:920px}
  .pg-preise .sm-lead{max-width:900px}
}
@media (min-width:1000px){
  /* Breite Karten: Merkmale zweispaltig, sonst laufen die Zeilen leer */
  .pg-preise #socialView .plan-details>ul{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 28px}
  .pg-preise #socialView .plan-details>ul li{margin:0}
}
@media (max-width:899.98px){
  .sm-fine{grid-template-columns:1fr;gap:12px}
  .sm-fine-fuss{margin-top:14px}
  .reco-liste>div{grid-template-columns:1fr;gap:3px}
  .reco-liste dt{font-size:15px}
}
@media (max-width:599.98px){
  .plan .pdesc,.plan .setup{min-height:0}
  .sm-basis{padding:11px 13px}
  .sm-bsp{padding:14px 15px}
}

/* ============================================================
   HANDY-FEINSCHLIFF II
   Nachtrag zu den Handy-Bloecken weiter oben. Steht bewusst am
   Dateiende: gleiche Spezifitaet, spaetere Regel gewinnt — so
   muss an den gewachsenen Bloecken nichts aufgetrennt werden.
   ============================================================ */

/* --- Kopfleiste unter ~390px ---------------------------------
   Marke (207px) + Landwahl (66) + Knopf (54) + Abstaende + Rand
   ergaben 391px. Auf einem 320er Geraet lag der Menue-Knopf damit
   komplett neben dem Bildschirm — das Menue war nicht zu oeffnen. */
@media (max-width:389.98px){
  .wrap.nav{padding-left:max(14px,env(safe-area-inset-left));
            padding-right:max(14px,env(safe-area-inset-right))}
  .nav{gap:8px}
  .nav-right{gap:8px}
  .brand{font-size:17px;gap:8px;min-height:40px}
  .brand .kw-mark,header.scrolled .brand .kw-mark{width:34px;height:34px}
  .menu-trigger{padding:10px 11px}
  .lang-switch{padding:3px}
  .lang-switch .lang-opt,.lang-switch .lang-ind{width:26px;height:22px}
  .lang-switch .lang-ind{top:3px;left:3px}
  .lang-switch[data-active="ch"] .lang-ind{transform:translateX(26px)}
  .lang-switch .flag{width:19px;height:14px}
  /* Beschriftung der Browser-Attrappe rechnet sich auf 6px herunter
     und ist dort nur noch Griess — die Attrappe wirkt ohne sie besser. */
  .browser-url,.browser-live{display:none}
}

@media (max-width:599.98px){
  /* --- Zeilenumbruch ------------------------------------------
     Der Block weiter oben deckt p/li ab. Die Haelfte der Texte auf
     der Seite haengt aber in div/dd/span-Traegern; genau die haben
     ihr letztes Wort allein in die Schlusszeile gestellt.
     Bei Flex-Kindern greift text-wrap, weil sie blockifiziert sind. */
  .stat .lab,.plan .pdesc,.sm-sub,.sm-setup,.sm-diff,.sm-satz,
  .reco-liste dd,.reco-liste dt,.plan li span,.foot-bottom>span,
  .faq summary>span:first-child,.hero-trust>span>span,
  .pd-fit p,.ans,.sm-lead,.sm-fine-fuss,.sm-staffel-note{
    text-wrap:pretty;overflow-wrap:break-word}
  /* Kurze Bloecke gleichmaessig auf die Zeilen verteilen statt
     die letzte Zeile ausfransen zu lassen. */
  .stat .lab,.plan .pdesc,.sm-sub,.sm-setup,.reco-liste dt,.pname,
  .faq summary>span:first-child,.hero-trust>span>span,
  .plan li span,.btn>span,.overlay-eyebrow{text-wrap:balance}
  /* Kurze Vorspann-Absaetze brauchen keine Silbentrennung — bei
     ~28 Zeichen pro Zeile passen die langen Woerter ohnehin, und
     "Kleinun-ternehmer" liest sich schlechter als eine kurze Zeile. */
  .sec-head p,.lead,.sm-lead,.hero-sub,.foot-brand p{
    hyphens:none;-webkit-hyphens:none}

  /* --- Fusszeile ----------------------------------------------
     Sieben Links untereinander waren ein halber Bildschirm, jeder
     davon nur 24px hoch. Zwei Spalten, volle Tippflaeche. */
  .foot-top{grid-template-columns:1fr 1fr;gap:26px 18px}
  .foot-brand{grid-column:1/-1}
  .foot-col a,.foot-col button{display:flex;align-items:center;
    min-height:44px;margin-bottom:0;padding:4px 0;line-height:1.3}
  .foot-col h4{margin-bottom:0}
  .foot-bottom .legal{gap:0 22px}
  .foot-bottom .lnk{display:inline-flex;align-items:center;min-height:44px}

  /* --- FAQ ------------------------------------------------------
     22px/26px Polsterung machten aus jeder zugeklappten Frage einen
     100px-Klotz und nahmen dem Text 20px Breite. */
  .faq summary{padding:17px 16px}
  .faq .ans{padding-left:16px;padding-right:16px}

  /* --- Fenster-Ueberschriften ------------------------------------
     "Datenschutzerklaerung" ist bei 30px breiter als die Karte. Ohne
     Silbentrennung brach der Browser hart nach dem "n" um und stellte
     ein einzelnes "g" in die zweite Zeile. */
  .overlay-card h2{font-size:clamp(23px,6.4vw,30px);
    hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

  /* --- Kleinstschrift ------------------------------------------- */
  .hero .eyebrow{font-size:clamp(10.5px,2.9vw,11.5px)}
  .st-tag{font-size:11px}
}

/* ============ GRÜNDER-GESCHICHTE (Über uns) ============
   Fliesstext in vier Abschnitten. Die Karte hat WEISSEN Grund, also
   dunkle Schrift: mit --text-light waeren die Ueberschriften unsichtbar. */
.story{margin:4px 0 28px;display:grid;gap:26px}
.story section{min-width:0;position:relative;padding-left:20px}
.story section::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:3px;background:var(--paper-line)}
.story section:first-child::before,.story section:last-child::before{background:var(--orange)}
.story h4{font-family:var(--font-head);font-weight:700;
  font-size:17.5px;letter-spacing:-.015em;color:var(--text-dark);
  margin-bottom:9px;line-height:1.28;text-wrap:balance}
.story p{color:var(--text-mute-d);font-size:15.5px;line-height:1.68;text-wrap:pretty}
.story p+p{margin-top:11px}
.story-schluss{margin-top:14px;padding:15px 17px;border-radius:var(--r);
  background:rgba(242,112,28,.07);border:1px solid rgba(242,112,28,.22);
  color:var(--text-dark);font-weight:500}

@media (max-width:599.98px){
  .story{gap:22px;margin-bottom:24px}
  .story section{padding-left:15px}
  .story p{line-height:1.66}
  .story h4{font-size:16.5px}
  .story p{font-size:14.8px;line-height:1.62}
  .story-schluss{padding:13px 14px}
}

/* ==================== ÜBER-UNS-SEITE (/ueber-uns/) ====================
   Wie die Preisseite: eigene Seite statt Popup. Die Kopfleiste ist im
   Ruhezustand durchsichtig und liegt hier ueber hellem Grund, also
   deckend setzen. */
.pg-ueber header{background:var(--ink);border-bottom:1px solid var(--ink-line)}
.pg-ueber header.scrolled{background:var(--ink)}
.pg-ueber .ub-head{padding-top:calc(120px + env(safe-area-inset-top))}
.pg-ueber .ub-head h1{font-size:clamp(34px,4.8vw,56px);font-weight:700;
  line-height:1.06;letter-spacing:-.015em;margin:18px 0 16px}
.pg-ueber .sec{scroll-margin-top:96px}
/* Eine einzige, mittige Lesespalte. Vorher war der Container bis 1560px
   breit, die Textbloecke aber auf 760 bis 900px gedeckelt und links
   ausgerichtet: rechts blieben ueber 700px leer. Fliesstext braucht eine
   begrenzte Zeilenlaenge, also wird der Container schmaler statt der
   Text breiter. */
.pg-ueber main .wrap{max-width:min(var(--maxw),880px)}
.pg-ueber .sec-head,.pg-ueber .sec-head.wide{max-width:none}
.pg-ueber .ub-cta .sec-head{margin-inline:auto}
.ub-karte{margin-top:30px;background:var(--paper-2);
  border:1px solid var(--paper-line);border-radius:var(--r);padding:26px 28px}
.ub-karte p{color:var(--text-mute-d);font-size:15.5px;line-height:1.68;text-wrap:pretty}
.ub-karte p+p{margin-top:11px}
.ub-karte .au-founders{margin:0 0 16px}
/* .sec traegt 118px oben und unten. Zwischen zwei reinen Textabschnitten
   ergibt das ueber 350px Leerraum. Auf einer Leseseite ist das zu viel. */
.pg-ueber .sec{padding:70px 0}
.pg-ueber .ub-head{padding-bottom:0}
.pg-ueber .ub-story{padding-top:44px}
.pg-ueber .ub-story .story{margin-bottom:0}
.pg-ueber .sec-head{margin-bottom:34px}
.pg-ueber .ub-story .story{margin-top:0}
.pg-ueber .au-list{margin-bottom:0}
.ub-cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

@media (max-width:599.98px){
  .pg-ueber .ub-head{padding-top:calc(96px + env(safe-area-inset-top))}
  .pg-ueber .sec{scroll-margin-top:74px}
  .ub-karte{padding:20px 18px;margin-top:22px;border-radius:var(--r-sm)}
  .ub-karte p{font-size:14.8px}
  .pg-ueber .ub-story{padding-top:38px}
  .ub-cta-row{flex-direction:column}
  .ub-cta-row .btn{width:100%;justify-content:center}
}

@media (max-width:380px){
  /* Unter 380px zaehlt jeder Pixel: 34 Zeichen pro Zeile sind zu wenig,
     der Text wird sonst zur schmalen, staendig getrennten Saeule. */
  .story section{padding-left:11px}
  .pg-ueber .ub-karte{padding-left:15px;padding-right:15px}
  .wrap{padding-left:12px;padding-right:12px}
}

/* ==================== NEUGESTALTUNG 2026-09 ====================
   Tim, 17.09.2026: „gestalte unsere komplette seite bitte nochmal bisschen
   neu … das es nicht so sehr nach ki aussieht aber im prinzip bitte so
   halten mit den ganzen ständen".

   Zielgruppe: Inhaber kleiner Betriebe, 35 bis 60, meist auf dem Handy,
   oft nachdem jemand vom Vertrieb da war. Sie wollen in fuenf Sekunden
   sehen, wer dahintersteckt und was es kostet, und misstrauen Technik-
   Kauderwelsch und Start-up-Optik. Deshalb hell und sachlich statt
   dunkler Tech-Buehne mit Leuchtflecken; Orange nur zum Handeln.

   Diese Schicht steht ZULETZT. Farben und Formen gelten ueberall, Layout
   nur ab 1000px — die am 03.09. freigegebene Handy-Anordnung bleibt. */

:root{
  --paper:#F1F2EF; --paper-2:#FFFFFF; --paper-line:#D9DBD6;
  --ink:#1C2128; --ink-2:#262D36; --ink-line:#3A434E; --slate:#2B323C;
  --text-dark:#1C2128; --text-mute-d:#565E69;
  --text-light:#F2F3F1; --text-mute-l:#A9B1BB;
  --orange-soft:#F59A5C;   /* Orange als Schrift auf Dunkel, 7.4:1 */
  --orange-text:#A94B0B;   /* Orange als Schrift auf Hell, 5.0:1 */
}
body{background:var(--paper);color:var(--text-dark);font-family:var(--font-text)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;letter-spacing:-.012em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.dark-2 :focus-visible,.stats :focus-visible,.sm-band :focus-visible,
footer :focus-visible,.nav-overlay :focus-visible{outline-color:var(--orange-soft)}

/* Rubrik ueber Ueberschriften: normaler Satz, keine Linie, kein Orange */
.eyebrow{font-family:var(--font-text);font-weight:700;font-size:14.5px;color:var(--text-mute-d);gap:0}
.eyebrow::before{display:none}
.dark .eyebrow,.dark-2 .eyebrow,.sm-band .eyebrow{color:var(--text-mute-l)}

/* Knoepfe: flach, Tinte auf Orange */
.btn{--bg:var(--orange);--fg:var(--ink);border-radius:var(--r-sm);
  transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:#E0661A}
.btn.ghost,.btn.ghost-d{--bg:transparent;--fg:var(--text-dark);border:1.5px solid var(--text-dark)}
.btn.ghost:hover,.btn.ghost-d:hover{--fg:var(--paper);background:var(--text-dark);border-color:var(--text-dark)}
.dark .btn.ghost,.dark-2 .btn.ghost,.sm-band .btn.ghost{--fg:var(--text-light);border-color:rgba(242,243,241,.6)}
.dark .btn.ghost:hover,.dark-2 .btn.ghost:hover,.sm-band .btn.ghost:hover{--fg:var(--ink);background:var(--text-light)}
.btn.dark{--bg:var(--ink);--fg:var(--paper)}
.btn.dark:hover{background:var(--slate)}

/* Kopfleiste hell, auf allen Seiten gleich */
header{color:var(--text-dark)}
header.scrolled,.pg-preise header,.pg-preise header.scrolled,.pg-ueber header,.pg-ueber header.scrolled{
  background:var(--paper);border-bottom:1px solid var(--paper-line)}
.brand .k{color:var(--text-dark)}
.nav-pill{color:var(--text-mute-d);border-radius:0}
.nav-pill:hover{color:var(--text-dark);background:transparent}
.menu-trigger{background:transparent;border:1.5px solid var(--text-dark);color:var(--text-dark)}
.menu-trigger:hover{background:var(--text-dark);border-color:var(--text-dark);color:var(--paper)}

/* Hero: hell, die Ueberschrift fuehrt */
.hero{background:var(--paper);color:var(--text-dark)}
.hero-bg{display:none}
.hero h1{color:var(--text-dark);letter-spacing:-.025em}
.hero h1 .accent{color:var(--text-dark)}
.hero h1 .accent::after{border-radius:0;height:.09em;bottom:-.04em}
.hero p.lead{color:var(--text-mute-d)}
.hero-trust{color:var(--text-mute-d)}
.hero-trust svg{color:var(--text-dark)}
.browser{border:1px solid var(--paper-line);border-radius:var(--r);background:#fff}
.browser-bar{background:var(--paper);border-bottom:1px solid var(--paper-line)}
.browser-bar .dot{display:none}
.viewport{background:#fff}
.blk.heroband{background:var(--paper)}
.blk.cards .c{border-color:var(--paper-line)}
.cursor svg{filter:none}
/* erst ab 1200px: darunter ist das Mockup ausgeblendet, die rechte Spalte waere leer */
@media (min-width:1200px) and (max-width:1999.98px){
  .hero-inner{grid-template-columns:1.32fr .68fr;gap:40px}
  .hero-copy{max-width:none}
  /* an die Hoehe gekoppelt: auf 1366x768 greift sonst die D7-Schutzregel ins Leere */
  .hero h1{font-size:clamp(52px,min(5.5vw,9.5vh),124px);line-height:1}
}

/* Kennzahlen: ruhiges Schieferband, linksbuendig mit Trennlinien */
.stats{background:var(--slate);border:0}
.stat .num{color:var(--text-light)}
.stat .num span{color:var(--orange-soft)}
.stat .lab{color:var(--text-mute-l)}
@media (min-width:1000px){
  .stat{text-align:left;border-left:1px solid var(--ink-line);padding-left:24px}
  .stat:first-child{border-left:0;padding-left:0}
}

/* Drei Stufen: keine drei gleichen Icon-Karten. Die Einstiegsstufe, die
   fast alle Kunden betrifft, steht dunkel und fuehrt. */
.stufe{background:#fff;border:1px solid var(--paper-line)}
.stufe::before,.st-sheen,.st-ic{display:none}
.stufe:hover,.stufe.st-top-tier{border-color:var(--paper-line)}
.stufe:hover{border-color:var(--text-dark)}
.st-n{color:var(--text-mute-d);opacity:1}
.stufe ul li::before{background:var(--text-dark);opacity:1}
.st-price{background:transparent;border:0;padding:0;color:var(--orange-text);font-weight:700}
.stufen .stufe:first-child{background:var(--slate);border-color:var(--slate);color:var(--text-light)}
.stufen .stufe:first-child h3{color:var(--text-light)}
.stufen .stufe:first-child .st-tag,.stufen .stufe:first-child>p,.stufen .stufe:first-child .st-n{color:var(--text-mute-l)}
.stufen .stufe:first-child ul li{color:var(--text-light)}
.stufen .stufe:first-child ul li::before{background:var(--orange-soft)}
.sn-dots i{border-radius:50%}
@media (min-width:1000px){
  .stufen{grid-template-columns:1.25fr 1fr 1fr}
}

/* Das Drumherum: Liste statt Kachelraster mit Icons */
.card-ic{background:var(--paper);color:var(--text-dark)}
#leistungen .card.acc.open{border-color:var(--text-dark);background:#fff}
#leistungen .card.acc.open .acc-chev{color:var(--text-dark)}
#leistungen .card.acc.open .card-ic{background:var(--text-dark);color:var(--paper)}
@media (min-width:1000px){
  #leistungen .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
  #leistungen .card,#leistungen .card.card-wide{background:transparent;border:0;border-top:1px solid var(--paper-line);
    border-radius:0;padding:28px 0 30px;display:block;grid-column:auto}
  #leistungen .card-ic{display:none}
  #leistungen .card h3{font-size:22px;margin-bottom:8px}
}

/* Social Media: Schieferband ohne Leuchtfleck */
.sm-band{background:var(--slate)}
.sm-band::before{display:none}
.sm-tag{color:var(--orange-soft)}
.sm-tag::before{display:none}
.sm-card{background:var(--ink);border-color:var(--ink-line)}
.sm-card.feat{border-color:var(--orange-soft)}
.sm-feat li svg{color:var(--orange-soft)}

/* Ablauf */
.steps::after{background:var(--orange)}
.step:hover{background:transparent}
.step-n{background:var(--ink);border-color:var(--ink-line);color:var(--text-light)}
.step.in .step-n{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.step:hover .step-b h3{color:var(--text-light)}

/* Vergleich: hell wie ein Angebotsblatt, kein Glanz, kein Schild */
#warum.dark-2{background:var(--paper-2);color:var(--text-dark)}
#warum .sec-head p{color:var(--text-mute-d)}
#warum .eyebrow{color:var(--text-mute-d)}
#warum .col{border:1px solid var(--paper-line)}
#warum .col.bad{background:transparent}
#warum .col.good{background:var(--paper);border:2px solid var(--text-dark)}
#warum .col-badge,#warum .col-sheen{display:none}
#warum .col.bad h3,#warum .col.bad li{color:var(--text-mute-d)}
#warum .col.bad li svg{color:#8E949C}
#warum .col.good h3,#warum .col.good li{color:var(--text-dark)}
#warum .col.good li svg{color:var(--orange-text)}
#warum .wm-note{color:var(--text-mute-d)}
#warum .wm-note.wm-note-end{border:1px solid var(--paper-line);background:var(--paper)}
#warum .wm-note b{color:var(--text-dark)}

/* FAQ: Titel links, Fragen rechts */
.faq details{background:#fff;border:1px solid var(--paper-line)}
.faq details[open]{border-color:var(--text-dark)}
.faq summary:hover{background:transparent}
.faq summary .ic{background:var(--paper);color:var(--text-dark)}
.faq summary:hover .ic,.faq details[open] summary .ic{background:var(--text-dark);color:var(--paper)}
@media (min-width:1000px){
  #faq .faq{gap:0}
  #faq .faq details{background:transparent;border:0;border-top:1px solid var(--paper-line);border-radius:0}
  #faq .faq details:last-child{border-bottom:1px solid var(--paper-line)}
  #faq .faq details[open]{border-color:var(--paper-line)}
}

/* Kontakt: ohne Leuchtfleck und pulsierenden Ring */
.kt-bg,.kt-glow,.kt-ring{display:none}
.kt-chip{background:transparent;border-color:var(--ink-line)}
.kt-chip svg{color:var(--orange-soft)}
.kt-or::before,.kt-or::after{background:var(--ink-line)}
.contact-cta .cd-item{background:var(--ink-2)}
.contact-cta .cd-item::after{display:none}
.contact-cta .cd-item:hover{border-color:var(--orange-soft)}

/* Ein Deko-Pfeil, damit die Systemschrift nicht zufaellig einspringt */
.arr{font-family:system-ui,sans-serif}

/* Nachtrag nach matrix.js: Reste des frueher dunklen Handy-Heros */
@media (max-width:600px){
  .hero-cta .btn.ghost{color:var(--text-dark)}
  .hero-trust>span{background:#fff;border-color:var(--paper-line);color:var(--text-dark)}
}
@media (max-width:600px) and (min-height:620px){
  .hero h1{font-size:clamp(29px,min(11.4vw,7.9svh),54px)}
}
.au-av{color:var(--ink)}
.nav-ov-glow,.mock-tag,.kw-intro::after{display:none}
.browser-url{color:var(--text-mute-d)}
.browser-live{color:#1E7B34}
/* Red Hat hat weniger Leerraum in der Ueberschriftenbox als Bricolage:
   das Polster, das den alten Leerraum ausglich, wird entsprechend kleiner */
@media (max-width:600px){
  .hero .mockup{padding-top:calc(var(--rhythmus) * .5)}
  body{line-height:1.66}
}
/* Nur Startseite: die kompaktere Schrift machte die Seite kuerzer und damit dichter
   (matrix bleiwueste 440px: 4,6 Bloecke je Schirm, Grenze 4,5). Luft statt kleinerer Schrift. */
@media (max-width:600px){
  body:not(.pg-preise):not(.pg-ueber) .sec{padding:74px 0}
}
/* Handy-Diaet (Tim 17.09.: „viel text noch von altbestand"). Nur Darstellung,
   kein Inhalt geloescht: Desktop und /preise/ zeigen weiter alles.
   Preisangaben mit Aufsetz- und Einrichtungsgebuehr bleiben sichtbar. */
@media (max-width:600px){
  #warum .col li:nth-child(n+4),#warum .wm-note-end{display:none}
  .stufe>p,.stufe ul li:nth-child(n+4){display:none}
  .sm-sub,.sm-feat{display:none}
  #ablauf-sec .sec-head p{display:none}
  #leistungen .card.acc:not(.open) p{visibility:hidden}
  .kt-chips,.sm-head p,.step-b p,.st-tag,body:not(.pg-preise):not(.pg-ueber) .foot-brand p{display:none}
}
/* Das Drumherum ab 1200px dreispaltig: fuenf kurze Punkte in zwei Zeilen
   statt drei (matrix riesensektion 1920: Faktor 2,3 zum Median, Grenze 2,2) */
@media (min-width:1200px){
  #leistungen .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px}
  /* Social-Media-Kopf nebeneinander statt gestapelt: nutzt die Breite, spart Hoehe */
  .sm-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;max-width:none}
  .sm-head>.sm-tag,.sm-head>h3{grid-column:1}
  .sm-head>p{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0}
  #leistungen .sm-band,#leistungen .sec-head.sub{margin-top:48px}
}
/* Zugeklappte Paketdetails auch unsichtbar, nicht nur flach: sonst per
   Tastatur und Screenreader erreichbar (matrix meldete sie als Ueberlappung) */
.plan-details{visibility:hidden;transition:max-height .45s var(--ease),opacity .35s var(--ease) .05s,visibility 0s linear .45s}
.plan.open .plan-details{visibility:visible;transition:max-height .45s var(--ease),opacity .35s var(--ease) .05s,visibility 0s}
/* Stufen: auf dem Handy kommt die ganze Wischreihe herein (einzelne Karten
   bleiben dort bewusst ohne Einblendung, seitlich liegende wuerden nie
   sichtbar). Ab 600px blenden die Karten selbst ein, die Reihe steht still. */
@media (min-width:600px){
  .js .stufen.reveal{opacity:1;transform:none;transition:none}
}
/* --- Erster Bildschirm fuellt jedes Fenster (Tim 17.09.: „je nachdem, wie
   gross der Screen ist, unten nicht das schon sehen"). Vorher hatte der
   Desktop-Hero gar keine Mindesthoehe, Tablets waren bei 780px gedeckelt. */
@media (min-width:601px){
  /* Oberkante fest an der Fensterhoehe, freie Flaeche geht nach unten an den
     Rand: Leerraum ueber der H1 bleibt unter 25 % (matrix fuellgrad), und
     zentriert wanderte der Block je nach Zeilenzahl sichtbar auf und ab */
  .hero{min-height:100vh;min-height:100svh;box-sizing:border-box;display:flex;align-items:flex-start;
    padding-top:clamp(120px,18vh,220px);padding-bottom:clamp(60px,8vh,120px)}
  .hero>.hero-inner{width:100%}
}

/* --- Einblendungen sauberer: Text nie skalieren oder drehen, das macht die
   Schrift waehrend der Bewegung unscharf */
@media (min-width:600px){
  .js .reveal{transform:translateY(18px)}
  .js .sec-head h2 .w{transform:translateY(.36em)}
}
.js .browser{filter:none}

/* --- Zeilenmaske fuer die Hero-Ueberschrift (§3.7). Die Zeilen setzt kw.js
   nach dem Messen, weil die Umbrueche je Breite verschieden sind. */
.js .hero h1.ln-bereit{opacity:1!important;transform:none!important;transition:none!important}
.js .hero h1 .ln{display:block;overflow:hidden;padding:.12em .06em .2em;margin:-.12em -.06em -.2em}
.js .hero h1 .ln>span{display:block;transform:translateY(110%)}
.js .hero.loaded h1 .ln>span{transform:none;
  transition:transform .9s cubic-bezier(.22,.68,.34,1);transition-delay:calc(.08s + var(--i,0) * .09s)}
.js .hero.loaded .ld.s4{transition-delay:.46s}
@media (prefers-reduced-motion:reduce){.js .hero h1 .ln>span{transform:none!important;transition:none!important}}

/* Hohe Schirme: die Ueberschrift waechst mit der Fensterhoehe, damit der
   volle erste Bildschirm aus Inhalt besteht und nicht aus Luft */
@media (min-width:2000px){
  .hero h1{font-size:clamp(72px,min(4.6vw,9.5vh),150px);line-height:1}
}
@media (min-width:601px) and (max-width:1024px) and (orientation:portrait){
  .hero h1{font-size:clamp(40px,min(7.4vw,5.8vh),76px);line-height:1.02}
}
@media (max-width:599.98px){
  /* „Social-Media-Betreuung NEU" ist auf schmalen Handys laenger als die
     Zeile: der Preis darf dann unter den Namen rutschen */
  .pr-switch .ms-btn{flex-wrap:wrap;row-gap:2px;column-gap:10px}
}
/* Beschriftungen in der Modell-Empfehlung sind kein Handlungsziel: Tinte statt Orange */
.reco-liste dt{color:var(--text-dark)}
/* --- Vorhang in Papierfarbe: kein dunkler Blitz vor der hellen Seite */
.kw-intro{background:var(--paper)}

/* --- Preisseite: Individualprojekte */
.pr-individuell{margin:18px auto 0;max-width:900px;background:var(--slate);color:var(--text-light);
  border-radius:var(--r);padding:28px 30px;display:flex;align-items:center;gap:28px;justify-content:space-between}
.pr-individuell h3{font-size:clamp(21px,2.2vw,26px);margin:6px 0 8px;color:var(--text-light)}
.pr-individuell p{color:var(--text-mute-l);max-width:560px}
.pr-individuell .eyebrow{color:var(--text-mute-l)}
.pr-individuell .btn{flex-shrink:0}
@media (max-width:639.98px){
  .pr-individuell{flex-direction:column;align-items:flex-start;padding:22px 20px;gap:16px}
}
/* ==== UNTERSEITEN (Tim 17.09.: „die ganzen unterseiten viel schöner … der
   karrierereiter nochmal viel schöner und übersichtlicher") ====
   Echte Seiten statt aufgelegter Popup-Karten: Seitenkopf, gegliederte
   Abschnitte mit wechselndem Traeger, Formulare hell mit eigenen Farben. */
.pg-seite main{background:var(--paper)}
.sk{padding:calc(136px + env(safe-area-inset-top)) 0 72px;background:var(--paper)}
.sk-raster{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:64px;align-items:end}
.sk h1{font-size:clamp(38px,5.2vw,72px);line-height:1.02;letter-spacing:-.022em;margin:12px 0 18px;color:var(--text-dark);text-wrap:balance}
.sk-schmal h1{font-size:clamp(34px,4.4vw,58px)}
.sk-kontakt h1{font-size:clamp(34px,3.9vw,56px)}
.sk-lead{font-size:clamp(17px,1.45vw,19.5px);line-height:1.6;color:var(--text-mute-d);max-width:640px}
.sk-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.sk-fakten{list-style:none;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:8px 26px}
.sk-fakten li{padding:16px 0;border-top:1px solid var(--paper-line);font-weight:700;color:var(--text-dark)}
.sk-fakten li:first-child{border-top:0}

.sb{padding:96px 0}
.sb-weiss{background:#fff}
.sb-papier{background:var(--paper)}
.sb-dunkel{background:var(--slate);color:var(--text-light)}
.sb h2{font-size:clamp(28px,3.4vw,46px);line-height:1.08;margin:10px 0 36px;color:inherit}
.sb-dunkel h2{color:var(--text-light)}
.sb-dunkel p{color:var(--text-mute-l)}
.sb-dunkel .eyebrow{color:var(--text-mute-l)}

/* Karriere */
.kr-schritte{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.kr-schritte li{border-top:2px solid var(--text-dark);padding-top:18px}
.kr-schritte .n{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--text-mute-d)}
.kr-schritte h3{font-size:clamp(19px,1.6vw,23px);line-height:1.25;margin-top:10px;color:var(--text-dark);font-weight:700}
.kr-schritte h3 b{font-weight:700}
.kr-zwei{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.kr-liste{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:34px 36px}
.kr-liste h2{font-size:clamp(24px,2.3vw,30px);margin:0 0 14px}
.kr-liste ul{list-style:none}
.kr-liste li{position:relative;padding:13px 0 13px 32px;border-top:1px solid var(--paper-line);color:var(--text-dark)}
.kr-liste li:first-child{border-top:0}
.kr-liste li::before{content:"";position:absolute;left:3px;top:19px;width:13px;height:7px;
  border-left:2.2px solid var(--orange-text);border-bottom:2.2px solid var(--orange-text);transform:rotate(-45deg)}
.kr-tempo{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.kr-tempo li{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,1.9vw,26px);line-height:1.2;
  color:var(--text-light);border-top:1px solid var(--ink-line);padding-top:18px}

/* Formularseiten: Text links, helles Formular rechts */
.sf-raster{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:start}
.sk-kontakt .sf-raster{align-items:start}
.sf-text h2{margin-top:10px}
.sf-recht{margin-top:22px;font-size:13.5px;line-height:1.6;color:var(--text-mute-d);max-width:560px}
.sf-karte{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:36px 38px;color:var(--text-dark)}
.sf-titel{font-family:var(--font-head);font-size:clamp(22px,2vw,28px);color:var(--text-dark);margin:0 0 8px}
.sf-hinweis{color:var(--text-mute-d);font-size:15px;line-height:1.6;margin-bottom:22px}
.sf-karte .cform,.sf-karte form.cform{background:none;border:0;padding:0;margin:0}
.sf-karte .cform label{display:block;font-weight:700;font-size:14.5px;color:var(--text-dark);margin-bottom:7px}
.sf-karte .cform label .req{color:var(--orange-text)}
.sf-karte .cform input,.sf-karte .cform textarea,.sf-karte .cform select{width:100%;background-color:var(--paper);
  border:1.5px solid #C9CCC6;border-radius:var(--r-sm);color:var(--text-dark);font:inherit;font-size:16px;padding:13px 14px;box-shadow:none}
.sf-karte .cform textarea{min-height:150px;resize:vertical}
.sf-karte .cform input::placeholder,.sf-karte .cform textarea::placeholder{color:#636A74;opacity:1}
.sf-karte .cform input:focus,.sf-karte .cform textarea:focus,.sf-karte .cform select:focus{outline:2px solid var(--text-dark);outline-offset:1px;border-color:var(--text-dark);background-color:#fff}
.sf-karte .cform select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C2128' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
.sf-karte .form-note{color:var(--text-mute-d);font-size:13px;text-align:left;margin-top:14px}
.sf-karte .form-note a{color:var(--text-dark);text-decoration:underline}
.sf-karte .fc-success{text-align:left;padding:4px 0}
.sf-karte .fc-success h2{color:var(--text-dark);font-size:clamp(24px,2.2vw,30px);margin:14px 0 10px}
.sf-karte .fc-success .fc-lead{color:var(--text-mute-d);margin-left:0;max-width:none}
.sf-karte .fc-success .fc-fallback{color:var(--text-mute-d);margin-left:0;max-width:none}
.sf-karte .fc-success .fc-fallback a{color:var(--text-dark);text-decoration:underline}
.sf-karte .success-ic{background:var(--paper);color:var(--text-dark);margin:0}
.sf-zurueck{margin-top:6px}
.sk-zusagen{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0}
.sk-zusagen li{position:relative;padding-left:22px;font-weight:700;font-size:15px;color:var(--text-dark)}
.sk-zusagen li::before{content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;
  border-left:2px solid var(--orange-text);border-bottom:2px solid var(--orange-text);transform:rotate(-45deg)}
.sk-direkt{display:grid;gap:10px;margin-top:32px;max-width:460px}
.sk-direkt-titel{font-weight:700;color:var(--text-dark)}
.sk-direkt a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;background:#fff;
  border:1px solid var(--paper-line);border-radius:var(--r);padding:14px 18px;transition:border-color .2s}
.sk-direkt a:hover{border-color:var(--text-dark)}
.sk-direkt small{font-size:13.5px;color:var(--text-mute-d)}
.sk-direkt b{color:var(--text-dark);font-size:15.5px}

.band-raster{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band-raster h2{margin:0 0 10px}
.band-raster p{max-width:560px}

/* Rechtstexte: Dokument mit Inhaltsverzeichnis */
.rt{padding-top:0}
.rt-raster{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.rt-einzeln .rt-text{margin:0}
.rt-nav{position:sticky;top:112px;font-size:14.5px}
.rt-nav-titel{display:block;font-weight:700;color:var(--text-dark);margin-bottom:10px}
.rt-nav ol,.rt-klapp ol{list-style:none;display:grid;gap:2px}
.rt-nav a,.rt-klapp a{display:block;color:var(--text-mute-d);padding:6px 10px;border-radius:var(--r-sm);line-height:1.35}
.rt-nav a:hover,.rt-klapp a:hover{color:var(--text-dark);background:#fff}
.rt-klapp{display:none;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:4px 14px}
.rt-klapp summary{cursor:pointer;font-weight:700;color:var(--text-dark);padding:12px 0;list-style-position:inside}
.rt-klapp ol{padding-bottom:10px}
.rt-text{background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:52px 60px;max-width:860px;color:#353C46}
.rt-text h3{font-size:clamp(19px,1.6vw,22px);color:var(--text-dark);margin:38px 0 10px;scroll-margin-top:110px}
.rt-text h3:first-child,.rt-text>p:first-child+h3{margin-top:0}
.rt-text p,.rt-text li{line-height:1.72;color:#353C46}
.rt-text p+p{margin-top:10px}
.rt-text ul{padding-left:20px;margin:8px 0}
.rt-text a{color:var(--text-dark);text-decoration:underline}
.rt-text .muted{color:var(--text-mute-d)}

@media (max-width:999.98px){
  .sk-raster,.sf-raster{grid-template-columns:1fr;gap:32px}
  .kr-schritte,.kr-tempo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rt-raster{grid-template-columns:1fr;gap:18px}
  .rt-nav{display:none}
  .rt-klapp{display:block}
}
@media (max-width:600px){
  .sk{padding:calc(98px + env(safe-area-inset-top)) 0 44px}
  .sb{padding:60px 0}
  .sb h2{margin-bottom:24px}
  .kr-schritte,.kr-tempo,.kr-zwei{grid-template-columns:1fr;gap:18px}
  .kr-liste,.sf-karte{padding:24px 20px}
  .rt-text{padding:26px 20px}
  .sk-cta .btn{flex:1 1 100%}
}

/* Rechtstexte: eine mittige Lesespalte (Kopf, Verzeichnis, Dokument). Die
   Seitenspalte mit dem kurzen Verzeichnis liess neben dem langen Text ein Loch
   (matrix leerflaeche ab 1024px). */
.sk-schmal>.wrap,.rt>.wrap.rt-oben{max-width:calc(860px + 2 * 26px)}
.rt-oben{display:grid;gap:16px}
.rt-oben .rt-nav{position:static;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:20px 24px}
.rt-oben .rt-nav ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.rt-oben .rt-text{max-width:none}
@media (max-width:999.98px){.rt-oben .rt-nav{display:none}}
@media (max-width:600px){.sk-schmal{padding-bottom:22px}}

/* ==== ABLAUF-SEITE (Tim 17.09.: „die ablauf unterseite sollte auch noch viel
   schöner gemacht werden … auch ohne animationen find ichs schwach") ====
   Zwei Momente: der Zeitplan-Balken waechst beim Laden Abschnitt fuer
   Abschnitt, und die Zeitleiste fuellt sich beim Scrollen (kw.js). */
.ab2-plan{margin:0;background:#fff;border:1px solid var(--paper-line);border-radius:var(--r);padding:28px 30px 24px}
.ab2-plan-titel{display:block;font-size:14.5px;font-weight:700;color:var(--text-mute-d)}
.ab2-plan-zahl{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(30px,3vw,44px);line-height:1.05;color:var(--text-dark);margin:6px 0 24px}
.ab2-balken{display:grid;grid-template-columns:minmax(58px,1fr) minmax(0,5fr) minmax(74px,2fr) minmax(60px,3fr);gap:5px}
.ab2-seg{display:flex;flex-direction:column;gap:7px;min-width:0}
.ab2-seg i{display:block;height:16px;border-radius:3px;background:var(--text-dark);transform-origin:left center}
.ab2-seg.s4 i{background:repeating-linear-gradient(90deg,var(--text-dark) 0 9px,transparent 9px 15px)}
.ab2-seg b{font-size:13px;line-height:1.2;color:var(--text-dark)}
.ab2-seg small{font-size:12.5px;color:var(--text-mute-d);white-space:nowrap;margin-top:-4px}
.ab2-plan figcaption{margin-top:22px;padding-top:16px;border-top:1px solid var(--paper-line);color:var(--text-mute-d);font-size:15px;line-height:1.55}
.js .ab2-plan .ab2-seg i{transform:scaleX(0);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.js .ab2-plan.in .ab2-seg i{transform:scaleX(1)}
.js .ab2-plan.in .s1 i{transition-delay:.3s}
.js .ab2-plan.in .s2 i{transition-delay:.55s}
.js .ab2-plan.in .s3 i{transition-delay:.95s}
.js .ab2-plan.in .s4 i{transition-delay:1.2s}

.ab2-zeit{position:relative;margin-top:6px}
.ab2-liste{list-style:none;display:grid}
.ab2-schiene{position:absolute;left:27px;top:34px;bottom:34px;width:2px;background:var(--paper-line);overflow:hidden}
.ab2-fuell{position:absolute;inset:0;background:var(--orange);transform-origin:top center;transform:scaleY(1)}
.js .ab2-fuell{transform:scaleY(0)}
.ab2-schritt{position:relative;display:grid;grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start;padding:28px 0}
.ab2-schritt+.ab2-schritt{border-top:1px solid var(--paper-line)}
.ab2-marke{position:relative;z-index:1;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--paper-line);font-family:var(--font-head);font-weight:700;font-size:18px;color:var(--text-mute-d);
  transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.ab2-schritt.erreicht .ab2-marke{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.ab2-titel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:56px}
.ab2-titel h3{font-size:clamp(22px,2.1vw,30px);line-height:1.1;color:var(--text-dark)}
.ab2-dauer{font-size:13.5px;font-weight:700;color:var(--text-dark);background:var(--paper);border-radius:var(--r-sm);padding:5px 10px;white-space:nowrap}
.ab2-inhalt p{margin-top:6px;color:var(--text-mute-d);font-size:17px;line-height:1.6;max-width:540px}
.ab2-teile{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.ab2-teile>div{background:var(--paper);border-radius:var(--r);padding:15px 17px}
.ab2-teile .ab2-wir{background:var(--slate)}
.ab2-teile dt{font-size:13px;font-weight:700;color:var(--text-mute-d);margin-bottom:5px}
.ab2-teile dd{margin:0;font-weight:700;color:var(--text-dark);line-height:1.35}
.ab2-teile .ab2-wir dt{color:var(--text-mute-l)}
.ab2-teile .ab2-wir dd{color:var(--text-light)}

.ab2-danach{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.ab2-danach>div{border-top:2px solid var(--text-dark);padding-top:18px}
.ab2-danach h3{font-size:clamp(19px,1.6vw,22px);color:var(--text-dark);margin-bottom:8px}
.ab2-danach p{color:var(--text-mute-d);line-height:1.6}

/* Zeilenmaske auch fuer die Unterseiten-Ueberschriften (kw.js teilt sie) */
.js .sk h1.ln-bereit{opacity:1!important;transform:none!important;transition:none!important}
.js .sk h1 .ln{display:block;overflow:hidden;padding:.12em .06em .2em;margin:-.12em -.06em -.2em}
.js .sk h1 .ln>span{display:block;transform:translateY(110%)}
.js .sk h1.in .ln>span{transform:none;transition:transform .85s cubic-bezier(.22,.68,.34,1);transition-delay:calc(.05s + var(--i,0) * .08s)}

@media (max-width:999.98px){
  .ab2-schritt{grid-template-columns:56px minmax(0,1fr);gap:8px 22px}
  .ab2-teile{grid-column:2}
  .ab2-danach{grid-template-columns:1fr;gap:24px}
}
@media (max-width:600px){
  .ab2-plan{padding:22px 20px 20px}
  .ab2-schritt{grid-template-columns:44px minmax(0,1fr);gap:6px 16px;padding:22px 0}
  .ab2-marke{width:44px;height:44px;font-size:15px}
  .ab2-titel{min-height:44px}
  .ab2-schiene{left:21px;top:28px;bottom:28px}
  .ab2-inhalt p{font-size:16px}
  .js .ab2-plan.in .s1 i{transition-delay:.2s}
  .js .ab2-plan.in .s2 i{transition-delay:.4s}
  .js .ab2-plan.in .s3 i{transition-delay:.7s}
  .js .ab2-plan.in .s4 i{transition-delay:.9s}
}
@media (prefers-reduced-motion:reduce){
  .js .ab2-plan .ab2-seg i,.js .ab2-fuell{transform:none!important;transition:none!important}
  .js .sk h1 .ln>span{transform:none!important;transition:none!important}
}

/* Karriere-Kopf: Faktenkasten mittig und kraeftiger (unten angesetzt blieben
   darueber 256px leer, matrix leerflaeche 1440px) */
.pg-karriere .sk-raster{align-items:center}
.pg-karriere .sk-fakten li{font-family:var(--font-head);font-size:clamp(18px,1.6vw,23px);line-height:1.25;padding:20px 0}
/* Ablauf auf dem Handy: „Dein Teil / Unser Teil" sagt dasselbe wie der Satz
   darueber, kuerzer (matrix bleiwueste: 200+ Zeichen je Schritt) */
@media (max-width:600px){
  .ab2-inhalt p{display:none}
}

/* ==== Kontrast in dunklen Kontexten (Tim 17.09.: „niemals schwarz auf schwarz") ====
   Gemessen: „Per E-Mail" 1,16:1 in dunkler Karte, „Per WhatsApp" 1,98:1,
   „Kleim" im offenen Handy-Menue 1,00:1. */
.dark-card .btn.ghost,.nav-overlay .btn.ghost,.kt .btn.ghost,.pr-individuell .btn.ghost,.sb-dunkel .btn.ghost{
  --fg:var(--text-light);border-color:rgba(242,243,241,.6)}
.dark-card .btn.ghost:hover,.nav-overlay .btn.ghost:hover,.kt .btn.ghost:hover,.pr-individuell .btn.ghost:hover,.sb-dunkel .btn.ghost:hover{
  --fg:var(--ink);background:var(--text-light)}
.nav-overlay .brand .k{color:var(--text-light)}
.btn.bw-wa{--bg:#0F7A3F;--fg:#fff}
.btn.bw-wa:hover{background:#0B6A36}
.nav-pill[aria-current="page"]{color:var(--text-dark)}
.nav-pill[aria-current="page"]::after{transform:scaleX(1)}

/* ==== Handy-Bewegung (Tim 17.09.: „animationen auf dem handy sind richtig
   schlecht") ====
   Gemessen per getAnimations und Bildfolge beim Wischen: ein Mauszeiger klickte
   endlos durchs Mockup, der LIVE-Punkt pulsierte, die Wischpfeile blinkten
   ohne Ende, im Ablauf pulsierten vier Ringe, Mockup-Karten federten von 35 %
   auf 118 %, und die Kopfleiste schrumpfte beim Scrollen von 79 auf 65 px.
   Kein Ruckeln (laengster Frame 18 ms) — es war Unruhe.
   Neu: nichts laeuft in Schleife. Alles kommt einmal auf dieselbe ruhige Art
   herein und steht dann. */
@media (max-width:600px){
  .kw-intro{display:none}

  /* Mockup steht fertig da und kommt als Ganzes herein */
  .hero .blk,.hero .blk *{animation:none!important;opacity:1!important}
  .hero .blk{transform:none!important}
  .hero .cursor,.hero .browser-live{display:none!important}
  .js .hero .browser{opacity:1!important;transition:none!important}
  .js .hero .mockup{opacity:0;transform:translateY(14px)}
  .js .hero.loaded .mockup{opacity:1;transform:none;
    transition:opacity .6s ease .26s,transform .7s cubic-bezier(.2,.7,.2,1) .26s}

  /* Hero-Staffel: kurz und gleichmaessig */
  .js .hero .ld{transform:translateY(12px)}
  .js .hero.loaded .ld{transition:opacity .55s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
  .js .hero.loaded .ld.s1{transition-delay:0s}
  .js .hero.loaded .ld.s4{transition-delay:.34s}
  .js .hero.loaded h1 .ln>span{transition-duration:.7s;transition-delay:calc(.04s + var(--i,0) * .06s)}

  /* keine Dauerschleifen: Wischpfeile dreimal, dann stehen sie */
  .sh-chev i{animation-iteration-count:3}
  .step-n::after{animation:none!important;display:none!important}

  /* Kopfleiste bleibt gleich hoch, nur der Grund blendet */
  header,header.scrolled{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px;
    transition:background-color .25s ease,border-color .25s ease}
  .brand .kw-mark,header.scrolled .brand .kw-mark{width:40px;height:40px;transition:none}

  /* Ein Einblendmuster fuer die ganze Seite */
  .js .reveal{transform:translateY(14px);
    transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.d1{transition-delay:.04s}
  .js .reveal.d2{transition-delay:.08s}
  .js .reveal.d3,.js .reveal.d4,.js .reveal.d5{transition-delay:.12s}
  .js .step{transform:translateY(12px)}
  .js .step.in{transition:opacity .55s ease,transform .65s cubic-bezier(.2,.7,.2,1),background .3s ease;
    transition-delay:calc(var(--si,0) * .05s)}
  .step-n{transition:background-color .3s ease,border-color .3s ease,color .3s ease}
}
/* ================== /NEUGESTALTUNG 2026-09 ==================== */