/* Trailcam Energy – powered by Ansmann · Richtung D „Drückjagd“
   Anthrazit-Grund, Signalorange als Akzent und Band, Chakra Petch, Höhenlinien Ton in Ton,
   Sucher-Rahmen um den einen wichtigsten Wert. Harte Kanten: keine Verläufe, Schatten, Rundungen. */

@font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/assets/fonts/chakra-petch-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --kohle: #231f20;
  --tief: #191617;
  --linie: #3a3735;
  --orange: #ff6200;
  --orange-tief: #e45700;
  --weiss: #fff;
  --sand: #d4cfc3;
  --grau: #a8a29b;
  --rand: clamp(1.25rem, 5vw, 3.5rem);
  --breite: 77.5rem;
  --kachel: 45rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--kohle);
  color: var(--sand);
  font: 400 1.0625rem/1.55 "Chakra Petch", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--orange); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.auf-orange :focus-visible, .auf-orange:focus-visible { outline-color: var(--kohle); }
::selection { background: var(--orange); color: var(--kohle); }
h1, h2, h3, p, dl, dd, figure { margin: 0; }

.innen { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }

.sprung { position: absolute; left: var(--rand); top: -4rem; z-index: 10; padding: .6rem 1rem; background: var(--orange); color: var(--kohle); font-weight: 700; text-decoration: none; }
.sprung:focus { top: 0; }
.vorrat { position: absolute; }
.powered svg { fill: currentColor; flex: none; }

/* Höhenlinien: eine kachelbare SVG als Maske, die Linienfarbe kommt aus --topo (Ton in Ton zum Grund) */
.topo { position: relative; isolation: isolate; }
@supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .topo::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--topo, var(--linie));
    -webkit-mask: url("/assets/img/topo.svg") 50% 0 / var(--kachel) repeat;
    mask: url("/assets/img/topo.svg") 50% 0 / var(--kachel) repeat;
  }
}

/* Bausteine der Verpackung */
.label { font-weight: 700; font-size: .75rem; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--orange); }
.gross { font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: -.012em; line-height: .94; color: var(--weiss); text-wrap: balance; }
.gross em { font-style: inherit; color: var(--orange); }
.h2 { font-size: clamp(2.25rem, 9vw, 4.25rem); }

/* Kopf: Zeile wie die Lasche der Schachtel, rechts der orange Reiter */
.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.kopf__text { padding-top: 1.15rem; color: var(--sand); white-space: nowrap; }
.kopf__marke { padding-top: .95rem; font-size: 1.25rem; text-decoration: none; }
.kopf__marke:hover { color: var(--weiss); }
.reiter { display: block; padding: 1.15rem 1rem .8rem; background: var(--orange); color: var(--kohle); font-weight: 700; font-size: .75rem; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.reiter:hover { background: var(--weiss); color: var(--kohle); }

/* Hero */
.hero__raster { display: grid; gap: clamp(2rem, 7vw, 3rem); padding-top: clamp(2.5rem, 9vw, 5rem); }
.marke { font-size: clamp(3.4rem, 17.4vw, 7.5rem); line-height: .86; margin-top: .9rem; text-wrap: nowrap; }
.marke span, .marke em { display: block; }
.powered { display: flex; align-items: center; gap: .9rem; margin-top: clamp(1.4rem, 5vw, 2.2rem); }
.powered svg { width: clamp(8.5rem, 38vw, 12rem); color: var(--weiss); }
.hero__satz { max-width: 30rem; margin-top: clamp(1.4rem, 5vw, 2.2rem); font-size: clamp(1.0625rem, 2.4vw, 1.25rem); }
.hero__bild { align-self: end; }
.hero__bild img { width: 100%; max-width: 34rem; margin-inline: auto; }

/* Oranges Band mit der Aussage */
.band { background: var(--orange); color: var(--kohle); --topo: var(--orange-tief); }
.band .gross { color: var(--weiss); }
.band .gross em { color: var(--kohle); }
.band .label { color: var(--kohle); }
.band__innen { padding-block: clamp(1.6rem, 5vw, 2.6rem) clamp(1.5rem, 4.5vw, 2.3rem); }
.aussage { font-size: clamp(2.7rem, 12.6vw, 6.25rem); }
.band__zeile { margin-top: clamp(.9rem, 2.5vw, 1.2rem); }

/* Abschnitte */
.abschnitt { padding-block: clamp(4rem, 12vw, 7.5rem); }
.abschnitt__kopf { display: grid; gap: .8rem; margin-bottom: clamp(2.2rem, 7vw, 3.75rem); }

/* Fakten: Sucher links, Werte rechts */
.fakten { display: grid; gap: clamp(2.75rem, 9vw, 4rem); }
.sucher { position: relative; display: grid; gap: .5rem; justify-self: start; padding: clamp(1.6rem, 6vw, 2.6rem) clamp(1.9rem, 7vw, 3.2rem); view-timeline-name: --sucher; }
.sucher__wert { font-size: clamp(5.25rem, 26vw, 10.5rem); line-height: .82; letter-spacing: -.02em; }
.sucher__zusatz { font-weight: 700; font-size: clamp(1.05rem, 4.2vw, 1.6rem); letter-spacing: .05em; color: var(--weiss); }
.ecke { position: absolute; width: clamp(1.6rem, 6vw, 2.75rem); aspect-ratio: 1; border: 0 solid var(--weiss); --s: clamp(4px, 1vw, 6px); }
.ecke--ol { top: 0; left: 0; border-top-width: var(--s); border-left-width: var(--s); --x: -1; --y: -1; }
.ecke--or { top: 0; right: 0; border-top-width: var(--s); border-right-width: var(--s); --x: 1; --y: -1; }
.ecke--ur { bottom: 0; right: 0; border-bottom-width: var(--s); border-right-width: var(--s); --x: 1; --y: 1; }
.ecke--ul { bottom: 0; left: 0; border-bottom-width: var(--s); border-left-width: var(--s); --x: -1; --y: 1; }

.werte { border-top: 2px solid var(--linie); }
.werte > div { display: grid; gap: .45rem; padding-block: 1.15rem 1.2rem; border-bottom: 2px solid var(--linie); }
.werte dd { font-size: clamp(1.6rem, 6.4vw, 2.3rem); line-height: 1; }
.werte .klein { display: block; margin-top: .55rem; font: 400 1.0625rem/1.45 "Chakra Petch", ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--sand); text-wrap: pretty; }

/* Bühne: Standbild, über das die 3D-Zellen gelegt werden, sobald sie geladen sind */
.buehne { position: relative; }
.buehne__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .3s; touch-action: pan-y; }
.buehne.ist-3d .buehne__canvas { opacity: 1; }
.buehne.ist-3d img { opacity: 0; transition: opacity .2s .25s; }

/* Rundum signalorange: eine liegende Zelle in 3D */
.rundum { overflow: clip; padding-block: clamp(4rem, 12vw, 7rem); border-block: 2px solid var(--linie); }
.rundum__raster { display: grid; gap: clamp(1rem, 4vw, 2rem); }
.rundum__text { display: grid; gap: .8rem; }
.rundum__satz { max-width: 28rem; margin-top: .4rem; }
.rundum__tipp { margin-top: .6rem; color: var(--sand); }
.buehne--liegend { --neigung: 34; aspect-ratio: 1; display: grid; place-items: center; }
.buehne--liegend img { width: 96%; margin-inline: auto; transform: rotate(calc(var(--neigung) * -1deg)); }

/* Im Revier: Zellen auf dem Waldboden */
.fund { padding-block: clamp(4rem, 12vw, 7.5rem) 0; }
.fund__kopf { display: grid; gap: .8rem; }
.fund__satz { max-width: 30rem; margin-top: .4rem; }
.fund__bild { max-width: calc(var(--breite) + 2 * var(--rand)); margin: clamp(2.2rem, 7vw, 3.75rem) auto 0; }
.fund__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fund__bild figcaption { margin-top: .8rem; font-size: .9375rem; color: var(--grau); }

/* Sortiment: die drei Schachteln im wahren Größenverhältnis (86 : 86 : 172 mm) */
.sortiment { display: grid; gap: clamp(2.5rem, 7vw, 2rem); }
.artikel { display: grid; gap: 1.1rem; align-content: start; }
.artikel img { width: 100%; }
.artikel figcaption { display: grid; gap: .45rem; }
.artikel h3 { font-size: clamp(1.7rem, 6vw, 2.1rem); }
.hinweis { margin-top: clamp(2rem, 6vw, 3rem); font-size: .9375rem; color: var(--grau); }

/* Verfügbarkeit */
.bald__innen { padding-block: clamp(3.5rem, 11vw, 6.5rem); display: grid; gap: 1rem; }
.bald__wort { font-size: clamp(2.7rem, 12.6vw, 7rem); }

/* Fuß */
.fuss { background: var(--tief); --topo: #2a2627; color: var(--sand); }
.fuss__innen { display: grid; gap: 2.25rem; padding-block: clamp(3rem, 9vw, 4.5rem) 2rem; }
.fuss__marke { font-size: 1.6rem; }
.fuss .powered { margin-top: 1rem; }
.fuss .powered svg { width: 8.5rem; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; padding: 0; list-style: none; margin: 0; }
.fuss__nav a { display: inline-block; padding-block: .6rem; font-weight: 700; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--weiss); text-decoration: none; }
.fuss__nav a::before { content: "→ "; color: var(--orange); }
.fuss__nav a:hover { color: var(--orange); }
.fuss__recht { padding-top: 1.4rem; border-top: 2px solid #2f2b2c; font-size: .875rem; color: var(--grau); }

/* Textseiten: Impressum, Datenschutz, 404 */
.text { padding-block: clamp(3rem, 10vw, 5.5rem) clamp(4rem, 12vw, 7rem); }
.text__spalte { max-width: 44rem; }
.text h1 { font-size: clamp(2.5rem, 10vw, 4.25rem); margin-top: .8rem; }
.text h2 { margin-top: 2.6rem; font-weight: 700; font-size: .8125rem; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--orange); }
.text p, .text ul, .text address { margin: .8rem 0 0; font-style: normal; }
.text ul { padding-left: 1.2rem; }
.text li { margin-top: .3rem; }
.text li::marker { color: var(--orange); }
.text strong { font-weight: 600; color: var(--weiss); }
.text a { color: var(--weiss); overflow-wrap: anywhere; }
.text a:hover { color: var(--orange); }
.text__stand { margin-top: 2.6rem; font-size: .875rem; color: var(--grau); }
.zurueck { display: inline-block; margin-top: 2.6rem; padding: .95rem 1.2rem .8rem; background: var(--orange); color: var(--kohle); font-weight: 700; font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.text a.zurueck { color: var(--kohle); }
.text a.zurueck:hover { background: var(--weiss); color: var(--kohle); }

/* Ab Tablet */
@media (min-width: 40rem) {
  .sortiment { grid-template-columns: 1fr 1fr; }
  .artikel--set { grid-column: 1 / -1; }
  .werte > div { grid-template-columns: 12.5rem 1fr; gap: 1.5rem; align-items: baseline; }
  .werte dt { padding-top: .35rem; }
  .fund__bild img { aspect-ratio: 16 / 9; }
  .fuss__innen { grid-template-columns: 1fr auto; align-items: end; }
  .fuss__recht { grid-column: 1 / -1; }
}

/* Ab Desktop */
@media (min-width: 60rem) {
  .hero__raster { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: end; }
  .hero__text { padding-bottom: clamp(3rem, 6vw, 5rem); }
  .marke { font-size: clamp(5rem, 9.1vw, 8.2rem); }
  .hero__bild img { max-width: none; }
  .fakten { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .sucher { position: sticky; top: 3rem; }
  .sucher__wert { font-size: clamp(7rem, 13.2vw, 11.5rem); }
  .rundum__raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: 2rem; }
  .buehne--liegend { --neigung: 16; aspect-ratio: 16 / 10; }
  .buehne--liegend img { width: 91%; }
  .fund__bild { padding-inline: var(--rand); }
  .fund__bild figcaption { padding-inline: 0; }
  .sortiment { grid-template-columns: 1fr 1fr 2fr; gap: clamp(1.5rem, 2.4vw, 2.25rem); }
  .artikel--set { grid-column: auto; }
}

/* Bewegung: einmal beim Laden, dazu der Sucher, der beim Scrollen einrastet */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hoch { from { opacity: 0; transform: translateY(1.4rem); } }
  @keyframes zellen { from { opacity: 0; transform: translateY(3.5rem); } }
  .hero__text > * { animation: hoch .55s cubic-bezier(.2, .7, .2, 1) both; }
  .hero__text > :nth-child(2) { animation-delay: .07s; }
  .hero__text > :nth-child(3) { animation-delay: .16s; }
  .hero__text > :nth-child(4) { animation-delay: .24s; }
  .hero__bild { animation: zellen .7s cubic-bezier(.2, .7, .2, 1) .12s both; }

  @supports (animation-timeline: view()) {
    @keyframes einrasten { from { transform: translate(calc(var(--x) * 1.5rem), calc(var(--y) * 1.5rem)); opacity: .25; } }
    .ecke { animation: einrasten linear both; animation-timeline: --sucher; animation-range: entry 10% cover 38%; }
  }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media print { .topo::before, .reiter, .sprung, .buehne__canvas { display: none; } body { background: #fff; color: #000; } }