/* helmerich-software.de — gemeinsames Stylesheet */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  --b-bg: #FBF8F1; --b-ink: #253440; --b-mut: #5D6E7B;
  --b-teal: #0E8C7F; --b-teal-deep: #0B6E64; --b-teal-soft: #DDEFEA;
  --b-sun: #FFC93D; --b-card: #FFFFFF; --b-line: #E7E0D2;
  background: var(--b-bg); color: var(--b-ink);
  font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  font-size: 17px; line-height: 1.7; overflow-x: clip;
}
h1, h2, h3 {
  font-family: "Arial Rounded MT Bold", "Avenir Next", "Helvetica Neue", sans-serif;
  font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--b-teal); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.b-wrap { max-width: 960px; margin: 0 auto; padding: 0 24px; }

/* Scroll-Reveals */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .12s; }
.rv-d2 { transition-delay: .24s; }
.rv-d3 { transition-delay: .36s; }

/* Navigation */
.b-nav { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; gap: 16px; }
.b-logo { display: flex; align-items: center; gap: 10px; font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif; font-size: 18px; text-decoration: none; }
.b-logo .b-dot { width: 30px; height: 30px; border-radius: 10px; background: var(--b-teal); display: grid; place-items: center; flex: none; }
.b-navlinks { display: flex; align-items: center; gap: 22px; }
.b-navlinks > a:not(.b-navcta) { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--b-mut); }
.b-navlinks > a:not(.b-navcta):hover { color: var(--b-ink); }
.b-navcta {
  text-decoration: none; background: var(--b-ink); color: #fff; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px; transition: transform .2s; white-space: nowrap;
}
.b-navcta:hover { transform: translateY(-2px); }

/* Hero */
.b-hero { position: relative; padding: clamp(40px, 8vh, 95px) 0 65px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: center; }
.b-blob {
  position: absolute; z-index: 0; border-radius: 46% 54% 55% 45% / 52% 44% 56% 48%;
  background: var(--b-teal-soft); width: 460px; height: 420px; right: -115px; top: -35px;
}
.b-blob-sun { background: #FFF3D6; }
.b-sun-deco { position: absolute; width: 90px; height: 90px; border-radius: 50%; background: var(--b-sun); left: 58%; top: 30px; z-index: 0; }
.b-hero > div { position: relative; z-index: 1; }
.b-kicker {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--b-sun); color: var(--b-ink); border-radius: 999px; padding: 6px 12px; margin-bottom: 16px;
}
.b-hero h1 { font-size: clamp(34px, 5vw, 58px); }
.b-hero h1 mark { background: linear-gradient(transparent 62%, var(--b-sun) 62%); color: inherit; padding: 0 2px; }
.b-subtitle { font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif; color: var(--b-teal-deep); font-size: 18px; margin: 14px 0 0; }
.b-hero p.b-intro { color: var(--b-mut); font-size: 18.5px; max-width: 47ch; margin: 18px 0 27px; }
.b-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.b-btn {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 16px;
  border-radius: 999px; padding: 15px 28px; transition: transform .2s, box-shadow .2s; text-align: center;
}
.b-btn-p { background: var(--b-teal); color: #fff; box-shadow: 0 10px 24px rgba(14,140,127,.28); }
.b-btn-p:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 14px 30px rgba(14,140,127,.36); }
.b-btn-s { background: #fff; border: 2px solid var(--b-ink); color: var(--b-ink); }
.b-btn-s:hover { transform: translateY(-2px) rotate(1deg); }
.b-hero-bot { display: grid; place-items: center; position: relative; }
.b-hero-bot svg { width: min(290px, 66vw); filter: drop-shadow(0 24px 30px rgba(37,52,64,.18)); }
.b-hello {
  position: absolute; left: 8%; top: 6%; z-index: 2; transform: rotate(-4deg);
  background: #fff; border: 2px solid var(--b-ink); border-radius: 16px 16px 16px 4px;
  padding: 9px 14px; font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 15px; box-shadow: 0 8px 18px rgba(37,52,64,.14);
}

/* Sektionen */
.b-sec { padding: 75px 0; }
.b-sec h2 { font-size: clamp(28px, 3.6vw, 40px); text-align: center; }
.b-sub { text-align: center; color: var(--b-mut); max-width: 56ch; margin: 14px auto 44px; }

/* Schmerzpunkte */
.b-pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-pain {
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: 22px;
  padding: 26px 24px; font-size: 16px; box-shadow: 0 8px 20px rgba(37,52,64,.05);
}
.b-pain:nth-child(1) { transform: rotate(-1.2deg); }
.b-pain:nth-child(3) { transform: rotate(1.2deg); }
.b-pain .b-emo {
  width: 46px; height: 46px; border-radius: 50%; background: var(--b-teal-soft);
  display: grid; place-items: center; margin-bottom: 14px;
}
.b-pain strong { display: block; margin-bottom: 6px; font-size: 17px; }
.b-pain span { color: var(--b-mut); font-size: 14px; }

/* Sticky-Szene: Zettelwirtschaft */
#b-chaos { height: 280vh; position: relative; }
.b-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, var(--b-bg) 0%, #EAF4EE 12%, #EAF4EE 88%, var(--b-bg) 100%);
}
.b-stage-head { position: absolute; top: 7vh; left: 0; right: 0; text-align: center; padding: 0 24px; }
.b-stagetag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  background: var(--b-sun); color: var(--b-ink); border-radius: 999px; padding: 6px 12px; margin-bottom: 14px;
}
.b-stage-head h2 { font-size: clamp(26px, 3.4vw, 40px); }
.b-cap {
  position: absolute; top: 21vh; left: 0; right: 0; text-align: center;
  color: var(--b-mut); font-size: 17px; padding: 0 24px; transition: opacity .3s linear; margin: 0;
}
.b-cap em { color: var(--b-ink); font-style: normal; font-weight: 600; }
.b-paper {
  position: absolute; left: 0; top: 0; width: 112px;
  background: #fff; border: 2px solid var(--b-ink); border-radius: 12px;
  padding: 10px 12px; font-size: 11.5px; font-weight: 600; color: var(--b-mut);
  box-shadow: 0 8px 18px rgba(37,52,64,.10); will-change: transform, opacity;
}
.b-paper svg { display: block; margin-bottom: 6px; }
.b-machine {
  position: absolute; left: 64%; top: 54%; width: 210px; transform: translateY(-50%);
  background: #fff; border: 2px solid var(--b-ink); border-radius: 20px;
  padding: 18px 16px 16px; text-align: center;
  box-shadow: 0 14px 28px rgba(37,52,64,.12);
}
.b-machine .b-led {
  width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 10px;
  background: var(--b-sun); opacity: .3; transition: opacity .3s, box-shadow .3s;
}
.b-machine.on .b-led { opacity: 1; box-shadow: 0 0 16px rgba(255,201,61,.95); }
.b-machine .b-slot { height: 12px; border-radius: 7px; background: var(--b-ink); margin-bottom: 12px; }
.b-machine .b-mface { margin-bottom: 8px; }
.b-machine .b-mlabel {
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 11px; letter-spacing: .1em; color: var(--b-mut);
}
.b-scenebot { position: absolute; left: calc(64% - 158px); top: 52%; width: 130px; transform: translateY(-40%); }
.b-out {
  position: absolute; left: calc(64% + 234px); top: 42%; width: 170px;
  display: flex; flex-direction: column; gap: 9px;
}
.b-doc {
  background: #fff; border: 2px solid var(--b-ink); border-radius: 12px;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: var(--b-ink);
  display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateX(-14px); transition: opacity .4s, transform .4s;
  box-shadow: 0 8px 18px rgba(37,52,64,.10);
}
.b-doc.on { opacity: 1; transform: none; }
.b-doc b { color: var(--b-teal); font-weight: 800; }

/* Demo */
.b-demo { background: var(--b-ink); color: #fff; border-radius: 30px; padding: clamp(30px, 5vw, 56px); position: relative; }
.b-demo h2 { color: #fff; text-align: left; }
.b-demotag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  background: var(--b-sun); color: var(--b-ink); border-radius: 999px; padding: 6px 12px; margin-bottom: 16px;
}
.b-demo p.b-demosub { color: #B9C6CF; margin: 12px 0 24px; max-width: 56ch; }
.b-demoform { display: flex; gap: 10px; flex-wrap: wrap; }
.b-demoform input {
  flex: 1 1 300px; font: inherit; padding: 15px 20px; border-radius: 14px;
  border: 2px solid transparent; background: #fff; color: var(--b-ink);
}
.b-demoform input:focus { outline: none; border-color: var(--b-sun); }
.b-demoform button { background: var(--b-teal); border: 0; color: #fff; font-weight: 700; border-radius: 14px; padding: 15px 26px; }
.b-demoform button:hover { background: var(--b-teal-deep); }
.b-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.b-chip {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  color: #E5ECF1; border-radius: 999px; padding: 8px 15px; font-size: 13px;
}
.b-chip:hover { background: rgba(255,255,255,.2); }
.b-answer {
  margin-top: 26px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 22px 24px; white-space: pre-line;
  font-size: 15.5px; line-height: 1.75; min-height: 30px; display: none;
}
.b-answer.on { display: block; }
.b-answer .b-cursor { display: inline-block; width: 9px; height: 18px; background: var(--b-sun); vertical-align: -3px; animation: b-blink .8s steps(1) infinite; }
@keyframes b-blink { 50% { opacity: 0; } }
.b-answer-cta { margin-top: 16px; display: none; }
.b-answer-cta.on { display: block; }
.b-finenote { color: #8fa0ac; font-size: 12px; margin-top: 18px; }

/* Angebots-Teaser */
.b-offers { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.b-offer { border-radius: 26px; padding: 34px 30px; position: relative; overflow: hidden; }
.b-offer-1 { background: var(--b-teal-soft); }
.b-offer-2 { background: #FFF3D6; }
.b-offer h3 { font-size: 22px; margin: 0 0 12px; }
.b-offer p { color: var(--b-mut); font-size: 15px; margin: 0 0 18px; }
.b-offer ul { margin: 0; padding: 0; list-style: none; }
.b-offer li { padding: 8px 0 8px 30px; position: relative; font-size: 15px; }
.b-offer li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--b-teal);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M4 12l5 5 11-11"/></svg>') center/70% no-repeat, linear-gradient(#000 0 0);
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M4 12l5 5 11-11"/></svg>') center/70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}
.b-offer-2 li::before { background: #C79A1B; }
.b-okicker {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--b-teal-deep); margin-bottom: 8px;
}
.b-offer-2 .b-okicker { color: #8A6A12; }
.b-oprice {
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 22px; color: var(--b-ink); margin: 0 0 12px; font-variant-numeric: tabular-nums;
}
.b-oprice small { font-size: 13px; color: var(--b-mut); font-family: "Avenir Next", system-ui, sans-serif; font-weight: 600; }
.b-olink { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--b-teal-deep); text-decoration: none; font-size: 15px; }
.b-olink b { display: inline-block; transition: transform .2s; font-weight: 700; }
.b-olink:hover b { transform: translateX(4px); }

/* Beispielarbeiten */
.b-works { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-works.two { grid-template-columns: 1fr 1fr; max-width: 820px; margin: 0 auto; }
.b-work {
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: 22px;
  padding: 26px 24px; box-shadow: 0 8px 20px rgba(37,52,64,.05);
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.b-work:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 16px 30px rgba(37,52,64,.10); }
.b-worktag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; padding: 5px 11px;
  background: var(--b-teal-soft); color: var(--b-teal-deep);
}
.b-workstat {
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 27px; color: var(--b-teal); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.b-workstat span {
  display: block; font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  font-size: 13px; font-weight: 600; color: var(--b-mut); margin-top: 4px;
}
.b-work h3 { font-size: 18px; }
.b-work > p { color: var(--b-mut); font-size: 14px; margin: 0; flex: 1; }
.b-worklink { font-weight: 700; color: var(--b-teal); font-size: 14px; }
.b-worklink b { display: inline-block; transition: transform .2s; font-weight: 700; }
.b-work:hover .b-worklink b { transform: translateX(4px); }

/* Kundenstimmen */
.b-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.b-quotes.one { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
.b-quote {
  background: #fff; border: 2px solid var(--b-ink); border-radius: 20px 20px 20px 4px;
  padding: 24px; box-shadow: 0 8px 18px rgba(37,52,64,.10);
}
.b-quotes:not(.one) .b-quote:nth-child(1) { transform: rotate(-.8deg); }
.b-quotes:not(.one) .b-quote:nth-child(3) { transform: rotate(.8deg); }
.b-quote > p { margin: 0 0 18px; font-size: 15px; line-height: 1.65; }
.b-quotes.one .b-quote > p { font-size: 17px; }
.b-qwho { display: flex; align-items: center; gap: 11px; }
.b-qava {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif; font-size: 14px;
  border: 2px solid var(--b-ink); flex: none; overflow: hidden;
}
.b-qava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-qwho strong { display: block; font-size: 14px; }
.b-qwho span { font-size: 12px; color: var(--b-mut); }

/* Ablauf-Schritte */
.b-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-step { background: var(--b-card); border: 1px solid var(--b-line); border-radius: 22px; padding: 28px 24px; text-align: center; }
.b-step .b-stepnum {
  width: 44px; height: 44px; border-radius: 50%; background: var(--b-sun);
  display: grid; place-items: center; margin: 0 auto 14px;
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif; font-size: 20px;
}
.b-step h3 { font-size: 18px; margin-bottom: 8px; }
.b-step p { color: var(--b-mut); font-size: 14px; margin: 0; }

/* Preistabelle (KI-Begleitung) */
.p-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.p-card {
  background: #fff; border: 1px solid var(--b-line); border-radius: 24px; padding: 30px 26px;
  display: flex; flex-direction: column; gap: 16px; position: relative;
  box-shadow: 0 8px 20px rgba(37,52,64,.05);
}
.p-card.p-hot { border: 2px solid var(--b-teal); box-shadow: 0 16px 34px rgba(14,140,127,.16); }
.p-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--b-teal); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.p-card h3 { font-size: 20px; }
.p-price {
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 38px; line-height: 1; color: var(--b-ink); font-variant-numeric: tabular-nums;
}
.p-price span { font-size: 15px; color: var(--b-mut); font-family: "Avenir Next", system-ui, sans-serif; font-weight: 600; }
.p-card ul { margin: 0; padding: 0; list-style: none; flex: 1; }
.p-card li { padding: 8px 0 8px 30px; position: relative; font-size: 14.5px; }
.p-card li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--b-teal);
  -webkit-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M4 12l5 5 11-11"/></svg>') center/70% no-repeat, linear-gradient(#000 0 0);
          mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="black" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M4 12l5 5 11-11"/></svg>') center/70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}
.p-note { text-align: center; color: var(--b-mut); font-size: 13px; margin-top: 22px; }

/* Produkttreppe (Automatisierung) */
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.t-card {
  background: var(--b-card); border: 1px solid var(--b-line); border-radius: 22px;
  padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.t-card.t-hot { border: 2px solid var(--b-teal); box-shadow: 0 16px 34px rgba(14,140,127,.16); }
.t-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--b-teal); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 5px 14px; white-space: nowrap;
}
.t-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--b-sun);
  display: grid; place-items: center;
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif; font-size: 18px;
}
.t-card h3 { font-size: 18px; }
.t-price {
  font-family: "Arial Rounded MT Bold", "Avenir Next", sans-serif;
  font-size: 24px; color: var(--b-teal); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.t-price span { display: block; font-family: "Avenir Next", system-ui, sans-serif; font-size: 12.5px; font-weight: 600; color: var(--b-mut); margin-top: 2px; }
.t-card p { color: var(--b-mut); font-size: 13.5px; margin: 0; flex: 1; }
.t-note { text-align: center; color: var(--b-mut); font-size: 13px; margin-top: 22px; max-width: 64ch; margin-inline: auto; }

/* FAQ */
.b-faq { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.b-faq details { background: #fff; border: 1px solid var(--b-line); border-radius: 16px; padding: 0 22px; }
.b-faq summary {
  cursor: pointer; font-weight: 700; font-size: 16px; padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.b-faq summary::-webkit-details-marker { display: none; }
.b-faq summary::after { content: "+"; font-family: "Arial Rounded MT Bold", sans-serif; font-size: 22px; color: var(--b-teal); flex: none; }
.b-faq details[open] summary::after { content: "–"; }
.b-faq details p { margin: 0 0 18px; color: var(--b-mut); font-size: 15px; }

/* CTA + Footer */
.b-cta { text-align: center; padding: 85px 0 105px; }
.b-cta h2 { font-size: clamp(30px, 4vw, 46px); }
.b-cta p { color: var(--b-mut); margin: 16px auto 30px; max-width: 46ch; }
.b-foot {
  border-top: 1px solid var(--b-line); padding: 26px 0 60px; color: var(--b-mut);
  font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
}
.b-foot a { color: var(--b-mut); }

/* Rechtsseiten */
.legal { max-width: 680px; margin: 0 auto; padding: 30px 0 80px; }
.legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 28px; }
.legal h2 { font-size: 20px; margin: 30px 0 8px; }
.legal p, .legal address, .legal ul { color: var(--b-mut); font-style: normal; font-size: 15.5px; margin: 0 0 12px; }
.legal a { color: var(--b-teal-deep); }

/* Kai (Maskottchen) */
.wave-arm { transform-box: view-box; transform-origin: 150px 108px; animation: b-wave 5s ease-in-out infinite; }
@keyframes b-wave {
  0%, 12%, 100% { transform: rotate(0deg); }
  3% { transform: rotate(-46deg); } 6% { transform: rotate(-20deg); } 9% { transform: rotate(-46deg); }
}
.antenna-ball { animation: b-boing 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes b-boing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pupil { transition: transform .12s linear; }
#b-mini {
  position: fixed; right: 20px; bottom: 24px; z-index: 60; width: 92px;
  opacity: 0; transform: translateY(24px); transition: opacity .4s, transform .4s;
  pointer-events: none;
}
#b-mini.on { opacity: 1; transform: none; }
#b-say {
  position: absolute; right: 82px; bottom: 58px; width: max-content; max-width: 190px;
  background: #fff; border: 2px solid var(--b-ink); border-radius: 16px 16px 4px 16px;
  padding: 9px 13px; font-size: 13px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 18px rgba(37,52,64,.14);
}
#b-say.pop { animation: b-pop .4s ease; }
@keyframes b-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* Responsive */
@media (max-width: 980px) {
  .t-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 920px) {
  .b-scenebot, .b-out { display: none; }
  .b-machine { left: auto; right: 16px; }
}
@media (max-width: 860px) {
  .b-hero { grid-template-columns: 1fr; text-align: center; padding-top: 26px; }
  .b-hero h1 { font-size: clamp(29px, 8vw, 40px); }
  .b-hero p.b-intro { margin-inline: auto; font-size: 17px; }
  .b-ctas { justify-content: center; }
  .b-btn { padding: 13px 22px; font-size: 15px; }
  .b-sun-deco { display: none; }
  .b-blob { width: 320px; height: 300px; right: 50%; top: auto; bottom: -20px; transform: translateX(50%); }
  .b-pains, .b-offers, .b-steps, .b-works, .b-works.two, .p-grid, .b-quotes { grid-template-columns: 1fr; }
  .p-card.p-hot { order: -1; }
  #b-mini { width: 72px; }
}
@media (max-width: 720px) {
  .b-navlinks > a:not(.b-navcta) { display: none; }
}
@media (max-width: 700px) {
  #b-chaos { height: 240vh; }
  .b-stage-head { top: 5vh; }
  .b-stage-head h2 { font-size: 24px; }
  .b-cap { top: 17vh; font-size: 15px; }
  .b-paper { width: 86px; font-size: 10.5px; padding: 8px 9px; border-radius: 10px; }
  .b-machine { left: 50%; right: auto; top: auto; bottom: 8vh; transform: translateX(-50%); width: 172px; padding: 14px 12px 12px; }
  .b-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; left: 20px; right: 20px; top: 29vh; width: auto; }
  .b-doc { font-size: 11.5px; padding: 8px 10px; border-radius: 10px; }
}
@media (max-width: 560px) {
  .t-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .b-logo { font-size: 15px; }
  .b-navcta { padding: 9px 14px; font-size: 13px; }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .wave-arm, .antenna-ball { animation: none; }
}