/* KRAFTPROTZ – Stylesheet
   Zusammengeführt aus Inline-CSS, wordpress-design.css und modern-design.css.
   Aufbau: Grundlagen → Bausteine → Startseite → Über uns → Footer → Overlays → Breakpoints. */

/* ========== Schriften (lokal, DSGVO) ========== */
@font-face { font-family: 'Roboto'; font-weight: 400; font-display: swap; src: url('fonts/Roboto-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 500; font-display: swap; src: url('fonts/Roboto-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 700; font-display: swap; src: url('fonts/Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Roboto'; font-weight: 900; font-display: swap; src: url('fonts/Roboto-Black.ttf') format('truetype'); }

/* ========== Farben & Maße ========== */
:root {
  --accent: #F59C28;        /* CI-Orange, nur als Akzent */
  --ink: #111111;           /* Text, Buttons */
  --ink-soft: #1a1a1d;      /* Fließtext in Abschnitten */
  --gray: #f4f3ef;          /* helle Flächen */
  --line: #e5e5e5;
  --muted: #626262;
  --font: 'Roboto', Arial, sans-serif;
  --gut: clamp(16px, 3vw, 32px);
  color-scheme: light;
}

/* ========== Grundlagen ========== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
body {
  padding-top: 80px;
  background: #ffffff;
  color: var(--ink);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button, a, h1, h2, h3 { font-family: var(--font); }
h1, h2, h3 { font-weight: 900; line-height: 1.05; letter-spacing: -.045em; }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }

.wrap { width: 100%; max-width: 1360px; margin-inline: auto; padding-inline: clamp(22px, 4vw, 56px); }
.section { position: relative; padding-block: clamp(56px, 6vw, 88px); }
.page { display: none; background: #ffffff; color: var(--ink); }
.page.on { display: block; }
.page .section { color: var(--ink-soft); }

/* Sprachumschaltung der Rechtstexte */
.l-en { display: none; }
html[lang="en"] .l-de { display: none; }
html[lang="en"] .l-en { display: block; }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ========== Typo-Bausteine ========== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.h-lg { font-size: clamp(36px, 4vw, 58px); }
.h-md { font-size: clamp(34px, 4vw, 54px); }
.page .h-md { color: var(--ink-soft); }
.lead { max-width: 56ch; color: var(--muted); font-size: 19px; line-height: 1.65; }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn-p { color: #ffffff; background: var(--ink); border: 1px solid var(--ink); }
.btn-p:hover { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.btn-g { padding-inline: 24px; color: var(--ink-soft); background: transparent; border: 1px solid rgba(0, 0, 0, .18); }
.shop-band .btn-g { color: var(--ink); }
.btn-g:hover, .shop-band .btn-g:hover { color: var(--accent); background: #ffffff; border-color: var(--accent); }

/* ========== Header ========== */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: #ffffff; border-bottom: 1px solid var(--line); }
.hdr-inner { display: flex; align-items: center; gap: 26px; height: 80px; }
.hdr-logo { display: flex; align-items: center; flex-shrink: 0; cursor: pointer; }
.hdr-logo img { width: auto; height: 42px; filter: drop-shadow(0 1px 0 #11111138); }
/* Navigation als Pillen-Leiste mit Glanzstreifen beim Überfahren.
   Aufbau und Effekt angelehnt an nudaui.dev (navx-pill-tab-bar, shine-sweep), in eigenem CSS und CI-Farben nachgebaut. */
.hdr-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px;
  border-radius: 12px;   /* 8 px der Pillen + 4 px Innenabstand */
  background: var(--gray);
  animation: nav-in .35s ease-out both;
}
.hdr-nav a {
  --sweep: rgba(245, 156, 40, .45);   /* Glanz: CI-Orange auf hellen Pillen */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-height: 36px;   /* Leiste = 4 + 36 + 4 = 44 px, wie „Jetzt einkaufen“ */
  padding: 0 18px;
  border-radius: 8px;   /* wie alle Buttons der Seite */
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.hdr-nav a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--sweep), transparent);
  pointer-events: none;
}
.hdr-nav a:hover::after, .hdr-nav a:focus-visible::after { animation: nav-sweep .6s ease-in-out; }
.hdr-nav a:hover { background: #ffffff; }
.hdr-nav a.on { --sweep: rgba(255, 255, 255, .35); color: #ffffff; background: var(--ink); }   /* aktive Seite: schwarz, Glanz weiß */
.hdr-nav a.on:hover { background: #2b2b2b; }
.hdr-nav a.on::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hdr-nav a:focus-visible { outline-offset: 2px; }
@keyframes nav-sweep { to { transform: translateX(400%); } }
@keyframes nav-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hdr-actions { display: flex; align-items: center; gap: 16px; }
.hdr-actions > .btn { min-height: 44px; padding-inline: 20px; font-size: 14px; }
.lang-tog { display: inline-flex; overflow: hidden; padding: 3px; border-radius: 8px; background: var(--gray); }
.lang-tog button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 5px; color: var(--muted); font-size: 12px; font-weight: 700; transition: background .2s, color .2s; }
.lang-tog button.on { color: var(--ink); background: #ffffff; box-shadow: 0 1px 4px #00000012; }
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; flex-shrink: 0; width: 44px; height: 44px; transition: border-color .2s; }
.burger span { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--ink); transition: transform .25s, opacity .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ========== Startseite: Einstieg mit Maskottchen ========== */
.brand-hero { overflow: hidden; background: var(--gray); }
.brand-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  align-items: center;
  gap: 48px;
  min-height: 680px;
  padding-top: 20px;
}
.brand-hero-copy { position: relative; z-index: 2; padding-bottom: 12px; }
.brand-hero-copy h1 { margin: 0; color: var(--ink); font-size: clamp(60px, 6.8vw, 90px); line-height: .94; letter-spacing: -.055em; }
.brand-hero-copy h1 span { display: block; }
.brand-headline-primary { color: var(--ink); }
.brand-headline-accent { color: var(--accent); }
.brand-hero-copy .eyebrow { display: block; max-width: 440px; margin: 26px 0 0; line-height: 1.7; }
.brand-hero-copy p { margin-top: 10px; color: #555555; font-size: 18px; line-height: 1.65; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; }
.brand-hero-visual { display: flex; justify-content: flex-end; align-self: end; }
.brand-hero-visual img {
  width: 100%;
  max-width: 540px;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 12px #0000000a);
}

/* ----- Einstieg: „BUILT TO BOND.“ und „BUILT TO LAST.“ schlagen nacheinander ein -----
   Entwurf E „BÄM“ (Vault, Notiz 16). Erst die schwarze, nach kurzer Pause die orangefarbene Hälfte: Sie kommt groß und
   unscharf heran, schlägt ein, federt leicht zurück, dabei wackelt die ganze Fläche kurz. Danach erscheinen Zeile, Satz
   und Buttons nacheinander. Gestartet wird per Skript (Klasse `go`), sobald der Einstieg im Bild ist. */
.js .fx-slam:not(.go) .hero-in, .js .fx-slam:not(.go) .slam { opacity: 0; }
.fx-slam .slam { transform-origin: 0 100%; }
.fx-slam.go .slam { animation: hero-slam .45s backwards; animation-delay: var(--st); }
@keyframes hero-slam {
  0% { opacity: 0; transform: scale(1.5); filter: blur(8px); animation-timing-function: cubic-bezier(.55, 0, .9, .5); }
  35% { opacity: 1; }
  70% { opacity: 1; transform: scale(1); filter: blur(0); animation-timing-function: ease-out; }
  82% { transform: scale(.975); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.fx-slam.go .brand-hero-inner { animation: hero-shk-s .42s linear .465s, hero-shk-b .5s linear 1.165s; }
@keyframes hero-shk-s { 0%, 100% { transform: none; } 12% { transform: translate(-3px, 2px); } 28% { transform: translate(3px, -2px); } 46% { transform: translate(-2px, 1px); } 64% { transform: translate(1px, -1px); } }
@keyframes hero-shk-b { 0%, 100% { transform: none; } 10% { transform: translate(-6px, 4px); } 24% { transform: translate(6px, -4px); } 40% { transform: translate(-4px, 3px); } 56% { transform: translate(3px, -2px); } 74% { transform: translate(-1px, 1px); } }
.fx-slam.go .hero-in { animation: hero-in .75s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(1.5s + var(--k) * .14s); }
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }

/* Maskottchen: Gleich nach dem Einschlag läuft ein Glanzstreifen über die Figur (ab 1,7 s), danach alle 7 Sekunden wieder; dazu atmet es kaum merklich (Entwurf E, Vault Notiz 18).
   Das Bild ist unten abgeschnitten, deshalb bleibt es am Fuß verankert: nichts hebt sich ab, es wird nur minimal skaliert und überstrahlt.
   Der Glanz liegt auf der Silhouette (das Bild selbst ist die Maske). Die Zeiten laufen ab dem Start des Einschlags (Klasse `go`), der Einschlag ist bei etwa 1,7 s fertig. */
.mascot { position: relative; display: block; width: 100%; max-width: 540px; transform-origin: 50% 100%; }
.fx-slam.go .mascot { animation: m-breathe 6s ease-in-out 2.4s infinite; }
.mascot-glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(images/kraftprotz-maskottchen.webp) no-repeat bottom center / contain; mask: url(images/kraftprotz-maskottchen.webp) no-repeat bottom center / contain;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%) 130% 0 / 260% 100% no-repeat;
}
.fx-slam.go .mascot-glint { animation: m-glint 7s ease-in-out 1.7s infinite; }
@keyframes m-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014, 1.02); } }
@keyframes m-glint { 0% { background-position: 130% 0; } 17%, 100% { background-position: -30% 0; } }

/* ========== Startseite: Sortiment mit Produkt-Slider ========== */
.hero { position: relative; overflow: hidden; background: #ffffff; color: var(--ink); }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  align-items: center;
  gap: 80px;
  padding-block: 88px;
}
.hero-text > .eyebrow { margin-bottom: 20px; }
#pg-home .hero h2 { max-width: 650px; margin-bottom: 28px; color: var(--ink-soft); font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; }
.hero .lead { max-width: 530px; color: #555555; font-size: 18px; line-height: 1.8; }
.hero-media { position: relative; }
.pwrap { position: relative; width: 100%; max-width: 470px; margin-inline: auto; }
.pslider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  height: 520px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--gray);
}
.pslider::-webkit-scrollbar { display: none; }
.pslide { position: relative; min-width: 100%; height: 100%; scroll-snap-align: center; }
.pslide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 46px 36px 58px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px #00000016);
}
.pnav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding-bottom: 3px;
  border-radius: 50%;
  color: var(--ink);
  background: #ffffff;
  box-shadow: 0 3px 12px #00000009;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background .2s, border-color .2s, color .2s;
}
.pnav:hover { color: var(--ink); background: var(--accent); }
.pprev { left: 16px; }
.pnext { right: 16px; }
.pdots { position: absolute; left: 0; right: 0; bottom: 24px; z-index: 3; display: flex; justify-content: center; gap: 7px; }
.pdot { width: 16px; height: 5px; padding: 0; border-radius: 4px; background: #c5c5c2; cursor: pointer; transition: .2s; }
.pdot.on { width: 34px; background: var(--accent); }

/* ========== Startseite: Warum KRAFTPROTZ? ========== */
#pg-home > .section { padding-block: 88px; background: #ffffff; }
#pg-home > .why-section { background: var(--gray); }
.why-intro { max-width: 900px; }
.why-intro h2 { max-width: 740px; margin-top: 18px; font-size: clamp(40px, 4.7vw, 64px); }
.why-intro .lead { max-width: 740px; margin-top: 28px; font-size: 18px; line-height: 1.8; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
/* ----- Bereich „Warum KRAFTPROTZ?“ -----
   Aufbau und Effekte angelehnt an nudaui.dev (Spotlight Card, Staggered List Reveal, Step Progress, Vertical Ticker),
   mit eigenem CSS in CI-Farben nachgebaut. Entwurf und Messwerte: Vault, Notiz 15. */

/* Überschrift: „einfacher“ (Bereich Warum KRAFTPROTZ?) und „passende“ (Startseite) bekommen eine beim Scrollen gezeichnete, leicht nach oben gewölbte Unterstreichung */
.hl, .hl-u { position: relative; display: inline-block; white-space: nowrap; }
.hl-line { position: absolute; left: -3%; bottom: -.24em; width: 106%; height: .34em; overflow: visible; pointer-events: none; -webkit-text-fill-color: initial; }
.hl-line path { fill: none; stroke: var(--accent); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 1; }
.js .hl-line path { stroke-dashoffset: 1; }

/* Karten: erscheinen nacheinander, Lichtfleck folgt der Maus, Karte hebt sich */
.js .fx-stagger .why-item { opacity: 0; transform: translateY(18px); }
.js .fx-stagger.in .why-item { opacity: 1; transform: none; animation: why-in .6s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--i) * 130ms); }
@keyframes why-in { from { opacity: 0; transform: translateY(18px); } }
.why-item { position: relative; overflow: hidden; padding: 38px 28px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff; transition: translate .25s ease, border-color .25s ease, box-shadow .25s ease; }
.why-item::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--accent); transition: width .4s ease; }
.why-item:hover { translate: 0 -4px; border-color: rgba(245, 156, 40, .55); box-shadow: 0 18px 34px -22px rgba(17, 17, 17, .4); }
.why-item:hover::after { width: 100%; }
.fx-light { position: absolute; inset: 0; background: radial-gradient(circle 280px at var(--x, 50%) var(--y, 50%), rgba(245, 156, 40, .17), transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.why-item:hover .fx-light { opacity: 1; }
.why-item > :not(.fx-light) { position: relative; z-index: 1; }
.why-ic { width: 56px; height: 56px; margin-bottom: 22px; transition: rotate .35s cubic-bezier(.3, 1.6, .5, 1); }
.why-item:hover .why-ic { rotate: -8deg; }

/* Kleine Bewegung unter dem Text jeder Karte */
/* Alle drei Bilder sitzen in gleich hohen Rahmen am unteren Rand der Karte, der Inhalt ist darin mittig: Die Mittelpunkte liegen auf einer Höhe. */
.why-item { display: flex; flex-direction: column; }
.why-item p { margin-bottom: 26px; }
.vis { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; height: 156px; margin-top: auto; border-top: 1px dashed #d9d9d6; }

/* Karte 1: „Auspacken, anwenden, fertig“, drei Schritte füllen sich nacheinander */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; text-align: center; }
.steps .ic { position: relative; z-index: 1; display: grid; place-items: center; height: 36px; }
.steps .d { position: relative; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid #d6d6d3; border-radius: 50%; background: #ffffff; }
.steps li:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: calc(50% + 17px); width: calc(100% - 31px); height: 2px; border-radius: 2px; background: linear-gradient(var(--accent), var(--accent)) left center / 0% 100% no-repeat, #d6d6d3; }
.steps li:last-child .d::after { content: ''; width: 10px; height: 5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; rotate: -45deg; translate: 0 -1px; opacity: 0; }
.steps li:nth-child(1) .d { animation: st-d1 7s infinite; }
.steps li:nth-child(2) .bt { animation: st-bp 7s infinite; }
.steps li:nth-child(2) .b-body { animation: st-bb 7s infinite; }
.steps li:nth-child(2) .b-tip { animation: st-bt 7s infinite; }
.steps .bt { display: block; width: 16px; height: 36px; overflow: visible; }
.steps .b-body { fill: #d6d6d3; }
.steps .b-tip { fill: #bdbdb9; }
.steps li:nth-child(3) .d { animation: st-d3 7s infinite; }
.steps li:nth-child(1)::after { animation: st-l1 7s infinite; }
.steps li:nth-child(2)::after { animation: st-l2 7s infinite; }
.steps li:last-child .d::after { animation: st-ck 7s infinite; }
@keyframes st-d1 { 0%, 4% { background: #fff; border-color: #d6d6d3; } 10%, 90% { background: var(--accent); border-color: var(--accent); } 10% { box-shadow: 0 0 0 0 rgba(245, 156, 40, .5); } 18%, 100% { box-shadow: 0 0 0 8px rgba(245, 156, 40, 0); } 97%, 100% { background: #fff; border-color: #d6d6d3; } }
.steps li:nth-child(2) .ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; pointer-events: none; animation: st-ring 7s infinite; }
@keyframes st-ring { 36% { box-shadow: 0 0 0 0 rgba(245, 156, 40, .5); } 44%, 100% { box-shadow: 0 0 0 8px rgba(245, 156, 40, 0); } }
@keyframes st-bb { 0%, 30% { fill: #d6d6d3; } 36%, 90% { fill: var(--accent); } 97%, 100% { fill: #d6d6d3; } }
@keyframes st-bt { 0%, 30% { fill: #bdbdb9; } 36%, 90% { fill: #111111; } 97%, 100% { fill: #bdbdb9; } }
@keyframes st-bp { 0%, 34% { transform: scale(1); } 40% { transform: scale(1.18); } 46%, 100% { transform: scale(1); } }
@keyframes st-d2 { 0%, 30% { background: #fff; border-color: #d6d6d3; } 36%, 90% { background: var(--accent); border-color: var(--accent); } 36% { box-shadow: 0 0 0 0 rgba(245, 156, 40, .5); } 44%, 100% { box-shadow: 0 0 0 8px rgba(245, 156, 40, 0); } 97%, 100% { background: #fff; border-color: #d6d6d3; } }
@keyframes st-d3 { 0%, 56% { background: #fff; border-color: #d6d6d3; } 62%, 90% { background: #111; border-color: #111; } 62% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .4); } 70%, 100% { box-shadow: 0 0 0 8px rgba(17, 17, 17, 0); } 97%, 100% { background: #fff; border-color: #d6d6d3; } }
@keyframes st-l1 { 0%, 12% { background-size: 0% 100%, auto; } 30%, 90% { background-size: 100% 100%, auto; } 97%, 100% { background-size: 0% 100%, auto; } }
@keyframes st-l2 { 0%, 38% { background-size: 0% 100%, auto; } 56%, 90% { background-size: 100% 100%, auto; } 97%, 100% { background-size: 0% 100%, auto; } }
@keyframes st-ck { 0%, 62% { opacity: 0; scale: .4; } 68%, 90% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: .4; } }


/* Karte „Verlässliche Ergebnisse“: die vier Produkte als Silhouetten in einer Reihe (Körper orange, Spitze, Kappe und Sprühkopf schwarz),
   darunter je ein Wort aus „Kleben. Sichern. Fixieren. Reinigen.“. Sie leuchten der Reihe nach auf wie die Schritte in der ersten Karte
   (9 s: bei 8, 28, 48 und 68 % je ein Produkt, alle bleiben bis 90 %). Ohne Bewegung stehen alle leuchtend da. Entwurf: Vault, Notiz 19. */
.rng { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.pr { flex: 1 1 0; margin: 0; text-align: center; }
.pr svg { display: block; width: auto; height: 84px; margin-inline: auto; overflow: visible; }
.pr .pb { fill: #F59C28; }
.pr .pt { fill: #111111; }
.pr figcaption { margin-top: 10px; color: #111111; font-size: 13px; font-weight: 700; }
@keyframes pa-b0 { 0%, 7% { fill: #d6d6d3; } 11%, 90% { fill: #F59C28; } 96%, 100% { fill: #d6d6d3; } }
@keyframes pa-t0 { 0%, 7% { fill: #bdbdb9; } 11%, 90% { fill: #111111; } 96%, 100% { fill: #bdbdb9; } }
@keyframes pa-c0 { 0%, 7% { color: #8a8a86; } 11%, 90% { color: #111111; } 96%, 100% { color: #8a8a86; } }
@keyframes pa-u0 { 0%, 7% { transform: translateY(0); } 9.5% { transform: translateY(-7px); } 13%, 100% { transform: translateY(0); } }
.rng .pr:nth-child(1) { animation: pa-u0 9s ease-in-out infinite; }
.rng .pr:nth-child(1) .pb { animation: pa-b0 9s ease-in-out infinite; }
.rng .pr:nth-child(1) .pt { animation: pa-t0 9s ease-in-out infinite; }
.rng .pr:nth-child(1) figcaption { animation: pa-c0 9s ease-in-out infinite; }
@keyframes pa-b1 { 0%, 27% { fill: #d6d6d3; } 31%, 90% { fill: #F59C28; } 96%, 100% { fill: #d6d6d3; } }
@keyframes pa-t1 { 0%, 27% { fill: #bdbdb9; } 31%, 90% { fill: #111111; } 96%, 100% { fill: #bdbdb9; } }
@keyframes pa-c1 { 0%, 27% { color: #8a8a86; } 31%, 90% { color: #111111; } 96%, 100% { color: #8a8a86; } }
@keyframes pa-u1 { 0%, 27% { transform: translateY(0); } 29.5% { transform: translateY(-7px); } 33%, 100% { transform: translateY(0); } }
.rng .pr:nth-child(2) { animation: pa-u1 9s ease-in-out infinite; }
.rng .pr:nth-child(2) .pb { animation: pa-b1 9s ease-in-out infinite; }
.rng .pr:nth-child(2) .pt { animation: pa-t1 9s ease-in-out infinite; }
.rng .pr:nth-child(2) figcaption { animation: pa-c1 9s ease-in-out infinite; }
@keyframes pa-b2 { 0%, 47% { fill: #d6d6d3; } 51%, 90% { fill: #F59C28; } 96%, 100% { fill: #d6d6d3; } }
@keyframes pa-t2 { 0%, 47% { fill: #bdbdb9; } 51%, 90% { fill: #111111; } 96%, 100% { fill: #bdbdb9; } }
@keyframes pa-c2 { 0%, 47% { color: #8a8a86; } 51%, 90% { color: #111111; } 96%, 100% { color: #8a8a86; } }
@keyframes pa-u2 { 0%, 47% { transform: translateY(0); } 49.5% { transform: translateY(-7px); } 53%, 100% { transform: translateY(0); } }
.rng .pr:nth-child(3) { animation: pa-u2 9s ease-in-out infinite; }
.rng .pr:nth-child(3) .pb { animation: pa-b2 9s ease-in-out infinite; }
.rng .pr:nth-child(3) .pt { animation: pa-t2 9s ease-in-out infinite; }
.rng .pr:nth-child(3) figcaption { animation: pa-c2 9s ease-in-out infinite; }
@keyframes pa-b3 { 0%, 67% { fill: #d6d6d3; } 71%, 90% { fill: #F59C28; } 96%, 100% { fill: #d6d6d3; } }
@keyframes pa-t3 { 0%, 67% { fill: #bdbdb9; } 71%, 90% { fill: #111111; } 96%, 100% { fill: #bdbdb9; } }
@keyframes pa-c3 { 0%, 67% { color: #8a8a86; } 71%, 90% { color: #111111; } 96%, 100% { color: #8a8a86; } }
@keyframes pa-u3 { 0%, 67% { transform: translateY(0); } 69.5% { transform: translateY(-7px); } 73%, 100% { transform: translateY(0); } }
.rng .pr:nth-child(4) { animation: pa-u3 9s ease-in-out infinite; }
.rng .pr:nth-child(4) .pb { animation: pa-b3 9s ease-in-out infinite; }
.rng .pr:nth-child(4) .pt { animation: pa-t3 9s ease-in-out infinite; }
.rng .pr:nth-child(4) figcaption { animation: pa-c3 9s ease-in-out infinite; }

/* Karte „Reparieren statt wegwerfen“: Der Balken ist am Anfang gebrochen und zeigt Risse, die sich ausbreiten. Die Hälften knallen schnell zusammen
   („Wucht und Blitz“: heftiges Wackeln, der Balken blitzt hell auf, weißer Lichtblitz über der Naht), dabei verschwinden die Risse. Gleich danach läuft ein
   Glanz über den heilen Balken (6 s). Ohne Bewegung steht der ganze Balken da, ohne Risse. Entwurf 2 von 6, Vault Notiz 19. */
.bk { display: block; width: 100%; height: auto; aspect-ratio: 5 / 1; overflow: visible; }
.bk * { transform-box: fill-box; }
.bk-all { transform-origin: 50% 50%; animation: bk-all 6s ease-out infinite; }
.bk-l { transform-origin: 0 50%; animation: bk-l 6s cubic-bezier(.7, 0, 1, .6) infinite; }
.bk-r { transform-origin: 100% 50%; animation: bk-r 6s cubic-bezier(.7, 0, 1, .6) infinite; }
.bk-cr { fill: none; stroke: rgba(17, 17, 17, .5); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; opacity: 0; animation: bk-cr 6s ease-out infinite; }
.bk-flash { opacity: 0; filter: drop-shadow(0 0 4px #fff3d6); animation: bk-flash 6s ease-out infinite; }
.bk-flare { opacity: 0; transform-origin: center; animation: bk-flare 6s ease-out infinite; }
.bk-glint { animation: bk-glint 6s ease-in-out infinite; }
@keyframes bk-all {
  0% { opacity: 0; transform: none; filter: none; } 4% { opacity: 1; } 14.5% { transform: none; filter: none; }
  15.5% { transform: scale(1.07, .88) translateX(-8px); filter: brightness(1.4); } 17% { transform: translateX(8px); } 19% { transform: translateX(-7px); } 21% { transform: translateX(6px); filter: brightness(1.2); }
  23% { transform: translateX(-4px); } 25% { transform: translateX(3px); } 27% { transform: translateX(-1.5px); } 30%, 93% { opacity: 1; transform: none; filter: none; } 100% { opacity: 0; transform: none; filter: none; }
}
@keyframes bk-l { 0%, 9% { transform: translate(-12px, -3px) rotate(-2deg); } 15%, 100% { transform: translate(0, 0) rotate(0); } }
@keyframes bk-r { 0%, 9% { transform: translate(12px, 4px) rotate(2deg); } 15%, 100% { transform: translate(0, 0) rotate(0); } }
@keyframes bk-cr { 0%, 3% { opacity: 1; stroke-dashoffset: 1; } 10% { opacity: 1; stroke-dashoffset: 0; } 15% { opacity: 1; stroke-dashoffset: 0; } 23%, 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes bk-flash { 0%, 14.5% { opacity: 0; stroke-width: 3.5px; } 15.5% { opacity: 1; stroke-width: 8px; } 30%, 100% { opacity: 0; stroke-width: 3.5px; } }
@keyframes bk-flare { 0%, 14.5% { opacity: 0; transform: scale(.3); } 15.5% { opacity: 1; transform: scale(.5); } 27%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes bk-glint { 0%, 27% { transform: translateX(0); } 42%, 100% { transform: translateX(440px); } }
.why-item h3 { margin-bottom: 16px; color: var(--ink); font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.why-item p { max-width: 360px; color: var(--muted); font-size: 16px; line-height: 1.75; }

/* ========== Startseite: Anwendungsbereiche ========== */
.usecases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.usecase { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 16px; }
.usecase img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.usecase-label { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: calc(100% - 24px); padding: 16px 18px; border-radius: 8px; background: #ffffff; color: #ffffff; }
.usecase-label h3 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.uc-dots { display: none; justify-content: center; gap: 8px; margin-top: 16px; }
.uc-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: #c5c5c2; cursor: pointer; transition: .2s; }
.uc-dot.on { width: 24px; border-radius: 4px; background: var(--accent); }

/* ========== Startseite: Shop- und Social-Leiste ========== */
.shop-band { background: var(--gray); color: var(--ink); }
.shop-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-block: 48px; }
.shop-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.social { display: flex; align-items: center; gap: 12px; }
.social-label { margin-right: 4px; color: var(--muted); font-size: 14px; font-weight: 700; }
.social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: #ffffff;
  transition: color .2s, border-color .2s, transform .2s;
}
.social a:hover { color: var(--accent); border-color: var(--accent); }
.social a svg { width: 22px; height: 22px; fill: currentColor; }

/* ========== Über uns ========== */
#pg-about > .section:nth-of-type(odd) { background: var(--gray); }
#pg-about > .section:nth-of-type(even) { background: #ffffff; }
#pg-about .page-hero { padding-block: 88px; background: var(--gray); }
.statement p {
  max-width: 1050px;
  color: var(--ink);
  font-size: clamp(44px, 5.7vw, 78px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.045em;
}
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 72px; }
.split.rev .split-media { order: 2; }
.split-media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; border-radius: 18px; }
/* Bilder („Über uns“, Anwendungsbereiche, Produktfenster der Startseite): Der ganze Rahmen kippt mit der Maus und hebt sich leicht (Vorbild: nudaui.dev „Parallax Tilt“, eigenes CSS). Entwurf B, Vault Notiz 17. */
.split-media, .usecase, .pwrap { --px: 0; --py: 0; transform: perspective(900px); transition: transform .5s cubic-bezier(.4, 0, .2, 1), box-shadow .4s; }
.split-media { border-radius: 18px; }
.pwrap { border-radius: 24px; }
.split-media.on, .usecase.on, .pwrap.on { transform: perspective(900px) rotateY(calc(var(--px) * 10deg)) rotateX(calc(var(--py) * -8deg)) scale(1.02); box-shadow: 0 26px 44px -22px rgba(17, 17, 17, .45); transition-duration: .18s, .4s; transition-timing-function: ease-out; }
@media (hover: none) { .split-media.on, .usecase.on, .pwrap.on { transform: perspective(900px); box-shadow: none; } }
.split-body .eyebrow { margin-bottom: 16px; }
.split-body h2 { margin-bottom: 18px; font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.035em; }
.split-body p { color: var(--muted); font-size: 17px; line-height: 1.8; }
.split-body p + p { margin-top: 14px; }
.about-cta { text-align: center; }
.about-cta h2 { margin-bottom: 14px; }
.about-cta .lead { max-width: 720px; margin: 0 auto 28px; color: #666666; font-size: 17px; line-height: 1.7; text-align: center; }
.about-cta .shop-row { justify-content: center; }

/* ========== Footer ========== */
.ftr { padding-block: 64px 32px; border-top: 1px solid #e7e7e4; background: #ffffff; color: var(--ink); }
.ftr-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 24px; }
.ftr-links a { color: #6b6b6b; font-size: 15px; cursor: pointer; transition: color .2s; }
.ftr-links a:hover { color: var(--accent); }
.ftr-logo { display: inline-flex; flex-shrink: 0; cursor: pointer; }
.ftr-logo img { display: block; width: auto; height: 34px; filter: drop-shadow(0 1px 0 #11111138); }
.ftr-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid #e7e7e4;
  color: #6b6b6b;
  font-size: 13px;
}

/* ========== Overlays (Impressum, Datenschutz, Über) ========== */
.ov { display: none; position: fixed; inset: 0; z-index: 100; overflow-y: auto; background: rgba(255, 255, 255, .98); color: var(--ink); }
.ov.open { display: block; }
.ov-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 101;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--ink);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s;
}
.ov-close:hover { color: var(--ink); background: var(--accent); }
.ov-body { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; }
.ov-body h1 { margin-bottom: 32px; color: var(--ink); font-size: 36px; font-weight: 800; letter-spacing: -.035em; }
.ov-body h2 { margin: 32px 0 12px; padding-top: 20px; border-top: 1px solid #e7e7e4; color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.ov-body h2:first-of-type { margin-top: 0; border-top: none; }
.ov-body p { margin-bottom: 10px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.ov-body a { color: #a75e0d; }
.ov-body a:hover { text-decoration: underline; }

/* ========== Breakpoints ========== */
@media (max-width: 1100px) {
  .brand-hero-inner { grid-template-columns: minmax(0, 1fr) 44%; gap: 32px; min-height: 640px; }
  .brand-hero-copy h1 { font-size: clamp(58px, 7vw, 78px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) 42%; gap: 48px; }
  .pslider { height: 460px; }
  .why-grid { gap: 14px; }
  .why-item { padding: 30px 22px; }
  .why-item h3 { font-size: 22px; }
}

@media (max-width: 1024px) {
  .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { padding-top: 72px; }
  .hdr-inner { height: 72px; gap: 16px; }
  .hdr-logo img { height: 35px; }
  .burger { display: flex; }
  .hdr-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 12px var(--gut) 14px;
    border-radius: 0;
    background: #ffffff;
    border-bottom: 1px solid #e7e7e4;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  }
  .hdr-nav.open { display: flex; }
  .hdr-nav a { padding: 14px 18px; border-radius: 8px; background: var(--gray); }
  .hdr-nav a:not(.on):hover { background: #ebeae5; }
  .brand-hero-inner { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding-top: 40px; }
  .brand-hero-copy { padding-bottom: 0; }
  .brand-hero-copy h1 { font-size: clamp(60px, 10vw, 78px); }
  .brand-hero-visual { justify-content: center; width: 100%; max-width: 500px; margin-inline: auto; }
  .brand-hero-visual img { max-width: 500px; max-height: 500px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding-block: 60px; }
  .hero .lead { max-width: 650px; }
  .pwrap { max-width: 520px; }
  .pslider { height: 490px; }
  #pg-home > .section { padding-block: 60px; }
  .why-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .why-item { padding: 30px; }
  .why-item p { max-width: none; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.rev { gap: 42px; }
  .split.rev .split-media { order: 0; }
}

@media (max-width: 768px) {
  .usecases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 24px 4px; }
  .usecases::-webkit-scrollbar { display: none; }
  /* Feste Kartenbreite (80 % des Bildschirms, max. 340 px) im Hochformat wie auf dem Desktop */
  .usecase { flex: 0 0 min(80vw, 340px); scroll-snap-align: center; }
  .uc-dots { display: flex; }
}

@media (max-width: 640px) {
  .wrap { padding-inline: 22px; }
  .hdr .wrap { padding-inline: 16px; }
  .section { padding-block: 60px; }
  .hdr-logo img { height: 29px; }
  .hdr-actions { gap: 10px; }
  .brand-hero-inner { padding-top: 32px; }
  .brand-hero-copy h1 { font-size: clamp(52px, 12vw, 68px); }
  .brand-hero-copy .eyebrow { font-size: 11px; letter-spacing: .1em; }
  .brand-hero-copy p { max-width: 300px; font-size: 17px; }
  .hero-cta { gap: 12px; }
  .hero-cta .btn { min-height: 52px; padding-inline: 20px; }
  .brand-hero-visual img { max-height: 390px; }
  #pg-home .hero h2, .why-intro h2 { font-size: clamp(36px, 9vw, 48px); }
  .hero .lead, .why-intro .lead { font-size: 17px; }
  .pslider { height: min(110vw, 460px); border-radius: 18px; }
  .pnav { width: 40px; height: 40px; }
  .pslide img { padding: 38px 34px 54px; }
  .usecases { gap: 14px; }
  .usecase { border-radius: 12px; }
  .usecase-label { padding: 12px 14px; }
  .usecase-label h3 { font-size: 18px; }
  .shop-band-inner { justify-content: center; gap: 28px; padding-block: 40px; text-align: center; }
  .social { flex-wrap: wrap; justify-content: center; }
  #pg-about .page-hero { padding-block: 60px; }
  .statement p { font-size: clamp(36px, 9vw, 48px); }
  .ftr-row { align-items: flex-start; gap: 28px; }
  .ftr-links { gap: 14px 22px; }
}

@media (max-width: 560px) {
  .shop-band-inner { flex-direction: column; }
  .hdr-actions > .btn-p { display: none; }
}

/* Tablet hochkant (Breite 700 bis 860 px und mindestens 700 px hoch, zum Beispiel iPad): Das Maskottchen steht wie am Computer neben dem Text statt darunter, groß (56 % der Breite, bis an den rechten Rand, nach Andrés Photoshop-Vorlage).
   Handys (auch quer, da nur etwa 390 px hoch) und alle anderen Breiten bleiben unverändert. */
@media (min-width: 700px) and (max-width: 860px) and (min-height: 700px) {
  .brand-hero-inner { grid-template-columns: minmax(0, 1fr) 56%; gap: 0; min-height: 560px; padding-top: 20px; }
  .brand-hero-copy { padding-bottom: 12px; }
  .brand-hero-copy h1 { font-size: clamp(54px, 7vw, 66px); }
  .brand-hero-visual { justify-content: flex-end; width: auto; max-width: none; margin-inline: 0 calc(var(--gut) * -1); }
  .brand-hero-visual img { max-width: 100%; max-height: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .mascot-glint { display: none; }
  .js .fx-slam:not(.go) .slam, .js .fx-slam:not(.go) .hero-in { opacity: 1; }
  /* Bereich „Warum KRAFTPROTZ?“: ruhige Endzustände ohne Bewegung */
  .js .fx-stagger .why-item { opacity: 1; transform: none; }
  .js .hl-line path { stroke-dashoffset: 0; }
  .steps li:nth-child(1) .d { border-color: var(--accent); background: var(--accent); }
  .steps li:nth-child(2) .b-body { fill: var(--accent); }
  .steps li:nth-child(2) .b-tip { fill: #111111; }
  .steps li:last-child .d { border-color: #111; background: #111; }
  .steps li:last-child .d::after { opacity: 1; }
  .steps li:not(:last-child)::after { background-size: 100% 100%, auto; }
}

/* ===================== Kontaktseite ===================== */
.kon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.kon-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.kon-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.kon-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.09); border-color: #dcdcdc; }
.kon-card:hover::before { transform: scaleX(1); }
.kon-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--ink); transition: background .3s, color .3s; }
.kon-card:hover .kon-ico { background: var(--accent); color: #fff; }
.kon-ico svg { width: 21px; height: 21px; }
.kon-k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kon-v { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.35; word-break: break-word; }
.kon-v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
  transition: color .2s, border-color .2s; }
.kon-v a:hover { color: var(--accent); border-color: var(--accent); }
.kon-addr { margin-top: 22px; padding: 22px 26px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--gray); }
.kon-addr strong { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.kon-addr p { margin: 0; font-size: 16px; line-height: 1.6; }
@media (max-width: 900px) { .kon-grid { grid-template-columns: 1fr; } }