/* Reference-led home: graphite surfaces, warm orange and three real request paths. */
body[data-page="home"] #so-funktioniert-es,
body[data-page="home"] #produkte { scroll-margin-top: calc(var(--site-header-height) + 1rem); }
.home-entry { isolation: isolate; padding-top: var(--site-header-height); padding-bottom: 2.25rem; background: #0c1011; }
.home-entry .container:not(.container--narrow) { max-width: 1440px; padding-inline: clamp(1.5rem, 5.6vw, 5rem); }
.home-entry__visual { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.home-entry__visual picture { display: block; width: 100%; }
.home-entry__scene { position: relative; z-index: 1; max-width: 2000px; margin-inline: auto; }
.home-entry__visual .home-entry__extension { display: none; }
.home-entry__weather-frame { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; visibility: hidden; z-index: 0; }
.home-entry__weather-frame.is-current { opacity: 1; visibility: visible; }
.home-entry__weather-frame.is-incoming {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  /* A very broad diagonal feather changes the light without moving the photo. */
  -webkit-mask-image: linear-gradient(135deg, #000 25%, #000000fa 34%, #000000d9 42%, #00000080 50%, #00000026 58%, #00000005 66%, transparent 75%);
  mask-image: linear-gradient(135deg, #000 25%, #000000fa 34%, #000000d9 42%, #00000080 50%, #00000026 58%, #00000005 66%, transparent 75%);
  -webkit-mask-size: 400% 400%;
  mask-size: 400% 400%;
  -webkit-mask-position: 100% 100%;
  mask-position: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.home-entry__render { display: block; width: 100%; height: auto; }
/* Subtle vertical fades at the header and lower edge. */
.home-entry__visual::after { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg, #080d1099, transparent 11rem), linear-gradient(0deg, #0c101199, transparent 34%); }
.home-entry__weather-controls { position: absolute; z-index: 1; right: clamp(1.5rem, 5.6vw, 5rem); bottom: 1.75rem; max-width: calc(100% - 3rem); display: flex; align-items: center; gap: .8rem; padding: .6rem .65rem .6rem .85rem; border: 1px solid #ffffff30; border-radius: 14px; background-color: var(--entry-surface); background-image: linear-gradient(140deg, #ffffff04, #00000026); backdrop-filter: blur(10px); box-shadow: 0 8px 24px #0003, inset 0 1px #ffffff09; transition: background-color var(--entry-tone-duration) cubic-bezier(.4, 0, .2, 1); }
.home-entry__weather-controls[hidden] { display: none; }
.home-entry__weather-status { width: clamp(8.5rem, 10vw, 10rem); min-width: 0; }
.home-entry__weather-caption { display: flex; justify-content: space-between; align-items: baseline; gap: .7rem; margin-bottom: .45rem; color: #f5f6f5; font-size: .7rem; line-height: 1.2; }
.home-entry__weather-caption [data-weather-count] { color: #c6ccca; font-size: .62rem; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.home-entry__weather-caption [data-weather-label] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-entry__weather-track { height: 3px; overflow: hidden; border-radius: 3px; background: #ffffff2b; }
.home-entry__weather-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d44a06, #f46b13 50%, #fb923c); transform: scaleX(0); transform-origin: left center; }
.home-entry__weather-nav { display: flex; flex: none; align-items: center; gap: 8px; }
.home-entry__weather-button { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff30; border-radius: 50%; color: #fb7b22; background: #ffffff06; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; }
.home-entry__weather-button::before { content: ""; position: absolute; inset: -4px; }
.home-entry__weather-button[hidden] { display: none; }
.home-entry__weather-button:hover { color: #ffa454; background: #fb7b221a; border-color: #fb7b22; }
.home-entry__weather-button:focus-visible { outline: 2px solid #fb923c; outline-offset: 3px; }
.home-entry__weather-button:disabled { opacity: .45; cursor: default; }
.home-entry__stage { position: relative; padding-top: clamp(2.5rem, 5svh, 5rem); padding-bottom: 2.75rem; }
.home-entry__intro { position: relative; width: min(57%, 40rem); }
.home-entry__eyebrow { margin: 0 0 1.6rem; color: #fb7b22; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; }
.home-entry__intro h1 { margin: 0; color: #fafafa; font-size: clamp(2.7rem, 3.8vw, 3.7rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 650; }
.home-entry__intro h1 span { color: #f46b13; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .home-entry__intro h1 span { display: inline-block; background-image: linear-gradient(100deg, #fb923c, #f46b13 60%, #d44a06); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.home-entry__lead { max-width: 31rem; margin: 1.45rem 0 0; color: #dedfdf; font-size: 1rem; line-height: 1.6; }
.home-entry__paths { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; padding-bottom: 2.5rem; }
.home-entry__paths-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1.8rem; }
.home-entry__paths-title { margin: 0; color: #f5f6f5; font-size: 1rem; font-weight: 650; line-height: 1.4; letter-spacing: -.015em; text-shadow: 0 2px 8px #000b; }
.home-entry__benefits { display: none; margin-block: 0; list-style: none; }
/* Share the ready image's tint with header panels; leaving home clears it naturally. */
.home-entry, body:has(.home-entry) { --entry-surface: #2d241ff5; --entry-tone-duration: 4000ms; }
.home-entry:is([data-weather-tone="night"], [data-weather-tone="blue-hour"]), body:has(.home-entry:is([data-weather-tone="night"], [data-weather-tone="blue-hour"])) { --entry-surface: #1b2734f5; }
.home-entry:is([data-weather-tone="winter"], [data-weather-tone="snow-night"]), body:has(.home-entry:is([data-weather-tone="winter"], [data-weather-tone="snow-night"])) { --entry-surface: #222d37f5; }
.home-entry:is([data-weather-tone="dawn"], [data-weather-tone="sunrise"]), body:has(.home-entry:is([data-weather-tone="dawn"], [data-weather-tone="sunrise"])) { --entry-surface: #2d272bf5; }
.home-entry[data-weather-tone="sunny"], body:has(.home-entry[data-weather-tone="sunny"]) { --entry-surface: #232f27f5; }
.home-entry:is([data-weather-tone="haze"], [data-weather-tone="rainbow"]), body:has(.home-entry:is([data-weather-tone="haze"], [data-weather-tone="rainbow"])) { --entry-surface: #292e24f5; }
.home-entry:is([data-weather-tone="fog"], [data-weather-tone="cloudy"]), body:has(.home-entry:is([data-weather-tone="fog"], [data-weather-tone="cloudy"])) { --entry-surface: #273031f5; }
.home-entry:is([data-weather-tone="rain"], [data-weather-tone="storm"], [data-weather-tone="hail"]), body:has(.home-entry:is([data-weather-tone="rain"], [data-weather-tone="storm"], [data-weather-tone="hail"])) { --entry-surface: #202e37f5; }
.home-entry[data-weather-tone="drizzle"], body:has(.home-entry[data-weather-tone="drizzle"]) { --entry-surface: #322731f5; }
.home-entry[data-weather-fade="manual"], body:has(.home-entry[data-weather-fade="manual"]) { --entry-tone-duration: 1600ms; }
.entry-card { --entry-art-size: clamp(6.5rem, 8.5vw, 8.25rem); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) var(--entry-art-size); grid-template-areas: "title art" "copy art" "action art"; grid-template-rows: auto 1fr auto; gap: .65rem .7rem; min-width: 0; min-height: 13.5rem; padding: 1.35rem; border: 1px solid #ffffff24; border-radius: 14px; color: #f3f5f3; background-color: var(--entry-surface); background-image: linear-gradient(140deg, #ffffff03, #00000010); backdrop-filter: blur(10px); text-align: left; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px #0000001a, inset 0 1px #ffffff06; transition: background-color var(--entry-tone-duration) cubic-bezier(.4, 0, .2, 1), border-color .22s ease, box-shadow .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1); }
.entry-card:hover { border-color: #e78643b3; color: #f3f5f3; text-decoration: none; box-shadow: 0 10px 26px #0000002b, inset 0 1px #ffffff09; }
.entry-card--primary { border-color: #e9843ca6; }
.entry-card--primary:hover { border-color: #f6954dc7; }
.entry-card__art { grid-area: art; align-self: center; width: var(--entry-art-size); height: var(--entry-art-size); pointer-events: none; transition: transform .3s ease; }
.entry-card__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.entry-card__body { display: contents; }
.entry-card h3 { grid-area: title; margin: 0; color: #f5f6f5; font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.25; letter-spacing: -.025em; }
.entry-card p { grid-area: copy; align-self: start; max-width: 33ch; margin: 0; color: #c6ccca; font-size: .85rem; line-height: 1.5; }
.entry-card__action { grid-area: action; display: inline-flex; align-items: center; justify-self: start; gap: .65rem; margin: 0; padding-top: .15rem; color: var(--brand-orange); font-size: .88rem; font-weight: 600; }
.entry-card__action .icon { flex: none; transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.entry-card:hover .entry-card__action { color: var(--brand-orange-hover); }
.entry-card:focus-visible { outline: 3px solid #fb923c; outline-offset: 4px; text-decoration: none; }
.home-page .marquee-band { background: transparent; padding-block: 0; margin-block: -1.5rem 0; }
.home-page .marquee { background: linear-gradient(100deg, #fb923c, #f46b13 60%, #d44a06); border-top-color: #c84704; border-bottom: 2px solid #563323; }
.home-page .marquee__run { font-size: .82rem; font-weight: 750; letter-spacing: .1em; }
@media (min-width: 901px) {
  /* Keep the angled band just below the first screen, including its overlap. */
  .home-entry { display: flex; flex-direction: column; min-height: calc(100svh + clamp(3rem, 5svh, 4rem)); padding-bottom: calc(clamp(3rem, 5svh, 4rem) + 1rem); }
  .home-entry__stage { display: flex; flex-direction: column; justify-content: flex-end; flex: 1 0 auto; min-height: 0; padding-bottom: 1.2rem; }
  .home-entry__intro { top: clamp(.75rem, 2svh, 1.5rem); }
  /* Reserve the weather controls' height while the first image decodes. */
  .home-entry__paths-heading { min-height: calc(36px + 1.2rem + 2px); margin-top: clamp(3rem, 9svh, 8rem); }
  .home-entry__paths-title { align-self: flex-end; margin-bottom: .25rem; }
  .home-entry__weather-controls { position: static; flex: none; max-width: none; }
  .home-entry__lead { max-width: 34rem; font-size: clamp(1.1rem, 1.2vw, 1.2rem); }
  .home-entry__paths { flex: none; }
  .home-entry__benefits { position: relative; display: grid; flex: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; padding-block: .25rem 1rem; }
  .home-entry__benefits li { display: flex; align-items: center; gap: .8rem; min-width: 0; text-shadow: 0 1px 4px #000b; }
  .home-entry__benefits .icon { flex: none; color: #fb7b22; stroke-width: 1.5; }
  .home-entry__benefits strong, .home-entry__benefits span { display: block; }
  .home-entry__benefits strong { color: #f3f5f3; font-size: .9rem; font-weight: 600; line-height: 1.4; }
  .home-entry__benefits span { margin-top: .2rem; color: #c6ccca; font-size: .8rem; line-height: 1.45; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .home-entry { padding-bottom: 2rem; }
  .home-entry__paths-heading { margin-top: 2rem; }
  .home-entry__paths { padding-bottom: 1.5rem; }
}
@media (min-width: 1680px) {
  .home-entry .container:not(.container--narrow) { max-width: 1520px; }
}
@media (min-width: 2001px) {
  .home-entry { background: #1b2734; }
  /* The original stays sharp. Each weather frame carries its own outpainted sides. */
  .home-entry__scene {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 256px, #000 calc(100% - 256px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 256px, #000 calc(100% - 256px), transparent);
  }
  .home-entry__visual .home-entry__extension { display: block; position: absolute; top: 0; height: 100%; z-index: 0; }
  /* 100 generated overlap pixels correspond to 256 pixels beside the 2000px master. */
  .home-entry__visual .home-entry__extension--left { right: calc(50% + 744px); width: max(1216px, calc(50% - 680px)); }
  .home-entry__visual .home-entry__extension--right { left: calc(50% + 744px); width: max(1219px, calc(50% - 680px)); }
  .home-entry__extension img { display: block; width: 100%; height: 2616px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .home-entry__intro { width: 65%; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .entry-card { --entry-art-size: 4.75rem; grid-template-areas: "title art" "copy copy" "action action"; grid-template-rows: auto 1fr auto; padding: 1.2rem; }
  .entry-card h3 { align-self: center; }
  .entry-card p { align-self: start; }
}
@media (max-width: 900px) {
  .home-entry { --mobile-image-space: 95vw; padding-top: var(--mobile-image-space); }
  .home-entry__visual { position: absolute; inset: 0; height: auto; }
  /* The supplied full master already includes the roof and sky above the pergola. */
  .home-entry__weather-controls { top: -1rem; right: clamp(1.5rem, 5.6vw, 5rem); bottom: auto; transform: translateY(-100%); gap: .35rem; padding: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; transition: none; }
  .home-entry__weather-caption { display: none; }
  .home-entry__weather-status { width: clamp(5.5rem, 20vw, 7rem); }
  .home-entry__weather-track { background: #ffffff55; box-shadow: 0 1px 3px #0007; }
  .home-entry__weather-button { width: 44px; height: 44px; border: 0; border-radius: 0; background: transparent; color: #fff; }
  .home-entry__weather-button::before { inset: 0; }
  .home-entry__weather-button svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 3px #000a); }
  .home-entry__weather-button:hover { color: #fb923c; background: transparent; }
  .home-entry__render { height: auto; object-fit: initial; object-position: initial; }
  .home-entry__render { mask-image: linear-gradient(#000 90%, transparent); -webkit-mask-image: linear-gradient(#000 90%, transparent); }
  .home-entry__visual::after { background: linear-gradient(180deg, #080d1080, transparent 6rem), linear-gradient(180deg, transparent calc(var(--mobile-image-space) - 4rem), #0c1011a3 var(--mobile-image-space), #0c1011c2 calc(var(--mobile-image-space) + 10rem), #0c1011 calc(var(--mobile-image-space) + 22rem)); }
  .home-entry__stage { min-height: 0; padding-top: .35rem; padding-bottom: .85rem; }
  .home-entry__intro { width: 100%; text-shadow: 0 2px 8px #000a; }
  .home-entry__intro h1 { font-size: clamp(2.05rem, 5.8vw, 3.6rem); }
  .home-entry__intro h1 span { text-shadow: none; filter: drop-shadow(0 2px 5px #000a); }
  .home-entry__eyebrow { margin-bottom: 1.15rem; }
  .home-entry__lead { max-width: 40rem; }
  .home-entry__paths { grid-template-columns: 1fr; gap: .85rem; padding-bottom: 1.6rem; }
  .entry-card { --entry-art-size: 8.25rem; grid-template-areas: "title art" "copy art" "action art"; gap: .55rem 1rem; min-height: 0; padding: 1.25rem; }
  .entry-card p { max-width: 42ch; align-self: start; }
  .entry-card__action { padding-top: .15rem; }
}
@media (max-width: 640px) {
  .home-entry .container:not(.container--narrow) { padding-inline: 1.15rem; }
  .home-entry__weather-controls { right: 1.15rem; }
  .home-entry__eyebrow { font-size: .66rem; letter-spacing: .04em; }
  .home-entry__intro h1 { font-size: clamp(1.85rem, 7.4vw, 2.75rem); line-height: 1.12; }
  .home-entry__lead { margin-top: 1rem; font-size: .98rem; line-height: 1.55; }
  .entry-card { --entry-art-size: 6rem; gap: .55rem .75rem; padding: 1rem; border-radius: 13px; }
  .entry-card h3 { font-size: 1rem; line-height: 1.25; }
  .entry-card p { font-size: .78rem; }
  .entry-card__action { font-size: .82rem; }
}
@media (max-width: 380px) {
  .home-entry .container:not(.container--narrow) { padding-inline: 1rem; }
  .home-entry__weather-controls { right: 1rem; }
  .home-entry__intro h1 { font-size: 1.85rem; }
  .entry-card { --entry-art-size: 5rem; grid-template-areas: "title art" "copy art" "action action"; gap: .55rem .6rem; }
  .entry-card__action { gap: .4rem; font-size: .76rem; }
}
@media (hover: hover) and (pointer: fine) {
  .entry-card:hover { transform: translateY(-2px); }
  .entry-card:hover .entry-card__art { transform: translateY(-3px); }
  .entry-card:hover .entry-card__action .icon { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .home-entry__weather-controls, .entry-card, .entry-card__art, .entry-card__action, .entry-card__action .icon { transition: none; }
  .entry-card:hover .entry-card__art { transform: none; }
  .entry-card:hover, .entry-card:hover .entry-card__action .icon { transform: none; }
}
@media (forced-colors: active) {
  .home-entry__intro h1 span { background-image: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}