/* Alessio Espresso: gemeinsame Bausteine für Startseite und Unterseiten
   (Kopf mit sechs Menüpunkten, Krallen-Zeichen, Einsatzkonzept-Kacheln,
   Beweiszeile, Abschluss, Formular nach Anweisung 4a, Unterseiten-Raster). */

/* ---------- Kopf: sechs Menüpunkte, Telefon, Beratung ---------- */
.bar__nav { margin-left: 15rem; margin-right: auto; }
.bar__nav ul { gap: 2.4rem; }
.bar__nav a { font-size: .95rem; }
.bar__nav a[aria-current="page"] { color: var(--ivory); }
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
.tel-link { align-self: center; font-family: var(--display); color: var(--ivory-2); text-decoration: underline; text-decoration-color: var(--gold-deep); text-underline-offset: .25em; white-space: nowrap; }
.tel-link:hover { color: var(--gold-hi); }
.bar__cta { min-height: 46px; padding: 0 1.25rem; font-size: .82rem; letter-spacing: .1em; }
.bar__menu .bar__menu-tel { border-top: 1px solid var(--line-2); margin-top: .4rem; padding-top: .4rem; }
@media (max-width: 84rem) {
  .bar__nav { display: none; }
  .bar__menu { display: block; margin-left: auto; }
}

/* ---------- Krallen: Stärke-Skala und Listenzeichen ---------- */
.krallen { display: inline-flex; gap: 3px; align-items: flex-end; vertical-align: middle; }
.krallen i { display: block; width: 3px; height: 15px; border-radius: 2px; background: var(--line-2); transform: skewX(-24deg); }
.krallen[data-staerke="1"] i:nth-child(-n+1),
.krallen[data-staerke="2"] i:nth-child(-n+2),
.krallen[data-staerke="3"] i:nth-child(-n+3),
.krallen[data-staerke="4"] i:nth-child(-n+4) { background: var(--gold); }
.krallen:not([data-staerke]), .krallen[data-staerke=""] { display: none; }
.krallenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.krallenliste li { position: relative; padding-left: 2.1rem; }
.krallenliste li::before { content: ""; position: absolute; left: 0; top: .45em; width: 20px; height: 13px;
  background: repeating-linear-gradient(115deg, var(--gold) 0 2px, transparent 2px 5px); }
.legende { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; color: var(--ivory-2); font-size: .95rem; }
.legende span { display: inline-flex; align-items: center; gap: .5rem; }

/* ---------- Beweiszeile ---------- */
.beweis { margin-top: 1.75rem; color: var(--smoke); font-size: .95rem; letter-spacing: .01em; }

/* ---------- Kicker (klein, normale Schreibweise) ---------- */
.kicker { display: block; margin-bottom: .9rem; font-family: var(--display); font-size: 1.05rem; color: var(--ivory-2); }

/* ---------- Einsatzkonzept-Kacheln (Anweisung 4b) ---------- */
.konzepte { padding-block: 8rem 6rem; }
.konzepte__head { max-width: 22ch; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.25rem); }
.konzepte__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; margin-top: 3.5rem; }
.konzept { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #000; color: var(--ivory); text-decoration: none; isolation: isolate; }
.konzept--leer { background: radial-gradient(60% 50% at 20% 10%, rgb(190 159 87 / .35), transparent), #000; box-shadow: inset 0 0 0 1px var(--line); }
.konzept .foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  filter: grayscale(1) sepia(1) saturate(1.4) hue-rotate(-4deg) brightness(.62) contrast(1.15);
  transition: filter .6s ease, transform .6s ease; }
.konzept::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(0 0 0 / .15) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / .92) 100%); }
.konzept .geraet { position: absolute; right: -2%; bottom: 22%; width: 40%; max-height: 64%; object-fit: contain; object-position: bottom; z-index: 1; filter: drop-shadow(0 24px 40px rgb(0 0 0 / .6)); transition: transform .6s var(--ease); }
.konzept .text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem; z-index: 3; display: grid; gap: .55rem; }
.konzept .text small { font-family: var(--display); font-size: .9rem; color: var(--ivory-2); }
.konzept .text strong { font-family: var(--head); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.05; color: var(--gold); }
.konzept .text span { color: var(--ivory-2); font-size: 1rem; line-height: 1.5; }
.konzept .text em { font-style: normal; font-family: var(--display); font-weight: 500; color: var(--gold); margin-top: .3rem; }
.konzept:hover .foto, .konzept:focus-visible .foto { filter: grayscale(.2) sepia(.2) saturate(1) brightness(.8) contrast(1.05); transform: scale(1.04); }
.konzept:hover .geraet { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .konzept .foto, .konzept .geraet { transition: none; } .konzept:hover .foto, .konzept:hover .geraet { transform: none; } }

/* Sortiment-Anriss: zweite Zeile, Krallen */
.bean a { color: inherit; text-decoration: none; display: grid; gap: .25rem; }
.bean__einsatz { color: var(--smoke); font-size: .85rem; }
.bean__einsatz:empty { display: none; }

/* ---------- Formular nach Anweisung 4a ---------- */
.form__who label span { white-space: nowrap; }
.field select { width: 100%; min-height: 60px; padding: 1.5rem 1.1rem .5rem; border: 1px solid var(--line-2); border-radius: 12px; background: rgb(255 255 255 / 0.02); color: var(--ivory); }
.form__interesse { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; border: 0; }
.form__interesse legend { width: 100%; margin-bottom: .6rem; padding: 0; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); }
.form__interesse label { position: relative; cursor: pointer; }
.form__interesse input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.form__interesse label span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-family: var(--display); font-size: .95rem; transition: background-color 200ms ease, color 200ms ease; }
.form__interesse input:checked + span { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.form__interesse input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.form__hinweis { grid-column: 1 / -1; color: var(--smoke); font-size: .9rem; }
.field[hidden] { display: none; }
.form__who:has([aria-invalid]) legend, .form__interesse:has([aria-invalid]) legend { color: var(--error); }

/* ---------- Unterseiten ---------- */
.unterseite main { padding-top: 0; }
.seitenkopf { position: relative; padding: 13rem 0 5rem; border-bottom: 1px solid var(--line); overflow: hidden; }
.seitenkopf h1 { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.6rem); max-width: 10ch; line-height: 1.02; letter-spacing: -0.03em; }
.seitenkopf .lead { margin-top: 1.5rem; max-width: 52ch; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); color: var(--ivory-2); }
.seitenkopf--bild { min-height: 82svh; display: flex; align-items: flex-end; }
.seitenkopf--bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; object-position: 70% 40%; }
.seitenkopf--bild::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .75) 38%, rgb(0 0 0 / 0) 70%), linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 35%); }
.seitenkopf--bild { isolation: isolate; }

.block { padding-block: 6.5rem; border-bottom: 1px solid var(--line); }
.block--dunkel { background: var(--espresso); }
.block h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); max-width: 22ch; }
.block .lead { margin-top: 1.1rem; max-width: 60ch; color: var(--ivory-2); font-size: 1.15rem; }
.block p + p { margin-top: 1rem; }
.prosa { max-width: 68ch; color: var(--ivory-2); }
.prosa p + p { margin-top: 1rem; }
.prosa h2 { margin-top: 3rem; font-size: 1.6rem; }
.prosa h3 { margin-top: 2rem; font-size: 1.2rem; color: var(--ivory); }
.prosa a { color: var(--gold-hi); }

.zwei { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: center; }
.zwei--bild-rechts > :first-child { order: 0; }
.zwei img { width: 100%; border-radius: 16px; }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.kachel { padding: 2rem; border-radius: 16px; background: var(--espresso-2); box-shadow: inset 0 0 0 1px var(--line); }
.kachel h3 { font-size: 1.35rem; margin-bottom: .8rem; }
.kachel p { color: var(--ivory-2); }
.kachel .krallenliste { margin-top: .4rem; color: var(--ivory-2); }

.schritte { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 3rem 0 0; padding: 0; }
.schritte li { counter-increment: s; padding-top: 1.2rem; border-top: 2px solid var(--gold); }
.schritte li::before { content: counter(s); display: block; font-family: var(--head); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--gold); margin-bottom: .8rem; }
.schritte strong { display: block; font-family: var(--head); font-size: 1.15rem; margin-bottom: .35rem; }
.schritte span { color: var(--ivory-2); }

.maschine { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: center; padding-block: 5rem; border-bottom: 1px solid var(--line); }
.maschine:nth-of-type(even) .maschine__bild { order: 2; }
.maschine__bild { display: grid; place-items: center; min-height: 380px; padding: 2.5rem 1.5rem; border-radius: 18px; background: radial-gradient(55% 55% at 50% 55%, var(--espresso-2), #000 75%); }
.maschine__bild img { max-height: 460px; width: auto; filter: drop-shadow(0 30px 40px rgb(0 0 0 / .7)); }
.maschine__art { font-family: var(--display); color: var(--ivory-2); }
.maschine h2 { margin-top: .4rem; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.kennzahlen div { padding-top: .8rem; border-top: 1px solid var(--line-2); }
.kennzahlen dt { color: var(--smoke); font-size: .9rem; }
.kennzahlen dd { margin: .2rem 0 0; font-family: var(--head); font-weight: 700; font-size: 1.35rem; color: var(--ivory); }
.passend { margin-top: 1.5rem; color: var(--ivory-2); font-size: .98rem; }
.passend a { color: var(--gold-hi); }
.vertrag { font-family: var(--head); font-weight: 600; font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); color: var(--ivory); }

/* Sortiment-Seite */
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.filter button { min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ivory); font-family: var(--display); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.filter button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); box-shadow: none; }
.filter button:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.produkte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.produkt { display: grid; grid-template-rows: auto 1fr; border-radius: 16px; background: var(--espresso-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; scroll-margin-top: 140px; }
.produkt:target { box-shadow: inset 0 0 0 2px var(--gold); }
.produkt img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; }
.produkt__ohnebild { aspect-ratio: 1; display: grid; place-items: center; background: #000; }
.produkt__ohnebild img { width: 34%; aspect-ratio: auto; background: none; }
.produkt__body { display: grid; align-content: start; gap: .35rem; padding: 1.1rem 1.2rem 1.3rem; }
.produkt h3 { font-size: 1.12rem; line-height: 1.2; color: var(--ivory); }
.produkt__meta { color: var(--smoke); font-size: .9rem; }
.produkt__kurz { color: var(--ivory-2); font-size: .95rem; line-height: 1.5; }
.produkt details summary { cursor: pointer; color: var(--gold); font-family: var(--display); font-size: .92rem; margin-top: .3rem; }
.produkt details p { margin-top: .5rem; color: var(--ivory-2); font-size: .92rem; }
.produkt[hidden] { display: none; }
.hinweis-box { margin-top: 3rem; padding: 2rem; border-radius: 16px; background: var(--espresso-2); box-shadow: inset 0 0 0 1px var(--gold-deep); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.hinweis-box p { color: var(--ivory-2); max-width: 60ch; }

/* Abschluss jeder Seite */
.abschluss { padding-block: 7rem; text-align: left; }
.abschluss h2 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 5rem); }
.abschluss__aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* Kontakt-Seite */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: start; }

/* Enthüllung auf Unterseiten: nur mit JS, sonst sofort sichtbar */
@media (prefers-reduced-motion: no-preference) {
  .js .enthuellen { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .js .enthuellen.ist-da { opacity: 1; transform: none; }
}

@media (max-width: 64rem) {
  .konzepte__grid, .kacheln { grid-template-columns: minmax(0, 1fr); }
  .konzept { aspect-ratio: 4 / 4.2; }
  .produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zwei, .maschine, .kontakt-raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .maschine:nth-of-type(even) .maschine__bild { order: 0; }
}
@media (max-width: 40rem) {
  .seitenkopf { padding-top: 9rem; }
  .schritte, .kennzahlen { grid-template-columns: minmax(0, 1fr); }
  .produkte { grid-template-columns: minmax(0, 1fr); }
}

/* Startseite: Kicker über „Was bei uns zusammengehört“, Beweiszeile im Hero */
.hand__kopf { text-align: center; }
.hand__kopf .kicker { margin-bottom: .6rem; }
.hero__beweis { margin-top: 1.4rem; font-size: .9rem; max-width: 52ch; }

/* Handy: Logo-Banner, Menü und Knopf passen nicht nebeneinander → Knopf im Kopf ausblenden
   (Beratung steht im Menü unter „Kontakt“, im Hero und am Seitenende) */
@media (max-width: 34rem) {
  .bar__cta { display: none; }
}
.hero__actions, .abschluss__aktionen { align-items: center; column-gap: 1.75rem; }

/* Zweiter Knopf neben „Beratung anfragen“: gleiche Größe und Rundung, schwarz mit Goldrand */
.btn--outline { background: var(--black); color: var(--gold-hi); box-shadow: inset 0 0 0 1.5px var(--gold); }
@media (hover: hover) and (pointer: fine) { .btn--outline:hover { color: var(--on-gold); } }
.hero__copy .hero__beweis { margin-top: 2rem; }

/* Zahlen: kleiner, über die ganze Breite verteilt, Trenner nur zwischen den Spalten */
.figures__row { gap: 0; }
.figure { padding: .5rem 2rem; border-left: 0; text-align: center; justify-items: center; }
.figure + .figure { border-left: 1px solid var(--line-2); }
.figure__num { font-size: clamp(2.6rem, 1.6rem + 2.8vw, 4.75rem); }
@media (max-width: 52rem) {
  .figure { padding: 1.5rem 0; }
  .figure + .figure { border-left: 0; border-top: 1px solid var(--line-2); }
}

/* Fuß: Markenzeile als Link in Gold, ohne Unterstreichung */
.foot__brand p a { color: var(--gold); text-decoration: none; transition: color 200ms ease; }
.foot__brand p a:hover { color: var(--gold-hi); }

/* Sortiment-Karten verlinken auf die Artikelseite */
.produkt__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: inherit; text-decoration: none; }
.produkt__mehr { margin-top: .5rem; font-family: var(--display); font-weight: 500; font-size: .92rem; color: var(--gold); }
.produkt { transition: box-shadow 300ms ease, transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .produkt:hover { box-shadow: inset 0 0 0 1px var(--gold-deep), 0 24px 50px -28px rgb(190 159 87 / .45); transform: translateY(-4px); }
}
.produkt__link:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 16px; }

/* Artikelseite */
.artikel { padding-bottom: 6rem; }
.krume { margin-bottom: 2.5rem; font-family: var(--display); color: var(--smoke); }
.krume a { color: var(--ivory-2); text-decoration: none; }
.krume a:hover { color: var(--gold-hi); }
.artikel__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4.5rem; align-items: start; }
.artikel__bild { border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9); }
.artikel__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.artikel__bild .produkt__ohnebild { background: #000; }
.artikel h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4.4rem); max-width: 14ch; }
.artikel .lead { margin-top: 1.25rem; }
.artikel__daten { display: grid; gap: 0; margin: 2rem 0 1.5rem; max-width: 34rem; }
.artikel__daten div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line-2); align-items: center; }
.artikel__daten div:last-child { border-bottom: 1px solid var(--line-2); }
.artikel__daten dt { color: var(--smoke); font-size: .95rem; }
.artikel__daten dd { margin: 0; color: var(--ivory); }
.artikel__daten .krallen i { height: 18px; width: 4px; }
.artikel__staerke { color: var(--ivory-2); margin-left: .5rem; font-size: .95rem; }
.artikel .abschluss__aktionen { margin-top: 2.25rem; }
@media (max-width: 64rem) { .artikel__raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .artikel__bild { max-width: 30rem; } }
.produkt__meta .krallen { margin-left: .6rem; }

/* Stärke als Kaffeebohnen (statt Krallen, User 07.11.2026) */
.bohnen { display: inline-flex; gap: 3px; align-items: center; vertical-align: -2px; margin-left: .55rem; }
.bohnen i { display: block; width: 11px; height: 15px; background: var(--line-2);
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%201C5.9%201%201%207.7%201%2016s4.9%2015%2011%2015%2011-6.7%2011-15S18.1%201%2012%201Zm.6%203.2c-2.6%203.1-3%206.2-1.3%209.4%201.9%203.6%201.5%207.7-1.3%2011.9l1.7%201.1c3.2-4.7%203.6-9.4%201.4-13.6-1.4-2.6-1.1-5.1%201-7.6l-1.5-1.2Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2032%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%201C5.9%201%201%207.7%201%2016s4.9%2015%2011%2015%2011-6.7%2011-15S18.1%201%2012%201Zm.6%203.2c-2.6%203.1-3%206.2-1.3%209.4%201.9%203.6%201.5%207.7-1.3%2011.9l1.7%201.1c3.2-4.7%203.6-9.4%201.4-13.6-1.4-2.6-1.1-5.1%201-7.6l-1.5-1.2Z%22/%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(18deg); }
.bohnen[data-staerke="1"] i:nth-child(-n+1),
.bohnen[data-staerke="2"] i:nth-child(-n+2),
.bohnen[data-staerke="3"] i:nth-child(-n+3),
.bohnen[data-staerke="4"] i:nth-child(-n+4) { background: var(--gold); }
.legende .bohnen { margin-left: 0; }
.artikel__daten .bohnen i { width: 14px; height: 19px; }
.bean__kind .bohnen { margin-left: .45rem; }

/* Sortiment in Abschnitten je Gruppe */
.gruppe { padding-top: 4rem; scroll-margin-top: 120px; }
.gruppe:first-of-type { padding-top: 1rem; }
.gruppe h2 { display: flex; align-items: baseline; gap: .8rem; font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.6rem); padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); }
.gruppe__anzahl { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--smoke); }
.gruppe .produkte { margin-top: 1.75rem; }
.gruppe[hidden] { display: none; }
.gruppe h2 { max-width: none; }

/* Maschinen: Claim, Vorteile, technische Daten */
.maschine__claim { margin-top: .6rem; font-family: var(--head); font-weight: 600; font-size: 1.15rem; color: var(--ivory); }
.maschine__vorteile { margin: .5rem 0 1.5rem; color: var(--ivory-2); }
.maschine__tech-titel { margin-top: 2rem; font-size: 1.15rem; }
.technik { display: grid; margin: .8rem 0 0; max-width: 40rem; }
.technik div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--line-2); }
.technik div:last-child { border-bottom: 1px solid var(--line-2); }
.technik dt { color: var(--smoke); font-size: .95rem; }
.technik dd { margin: 0; color: var(--ivory); }
.maschine { align-items: start; }
.maschine__bild { position: sticky; top: 7rem; }
@media (max-width: 64rem) { .maschine__bild { position: static; } .technik div { grid-template-columns: 9rem minmax(0, 1fr); } }

/* Gerätebilder: Größe je Gerät, mittig neben dem Text (User 07.11.2026) */
.maschine__bild { position: static; align-self: center; }
#smart .maschine__bild img { max-height: 550px; }
#dorado .maschine__bild img, #invariocup .maschine__bild img { max-height: 820px; }

/* Sortiment-Hero: Bild rechtsbündig, Text links (User 07.11.2026) */
.seitenkopf--rechts { min-height: clamp(34rem, 44vw, 52rem); padding-bottom: 4.5rem; }
/* Bild ganz in Abschnittshöhe, rechtsbündig, linker Rand weich ins Schwarz */
.seitenkopf--rechts > img { inset: 0 0 0 auto; width: auto; height: 100%; max-width: none; object-fit: contain; object-position: right center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.seitenkopf--rechts::before { background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .85) 35%, rgb(0 0 0 / 0) 55%); }
@media (max-width: 48rem) { .seitenkopf--rechts > img { inset: 0; width: 100%; object-fit: cover; object-position: 78% 30%; -webkit-mask-image: none; mask-image: none; } }

/* Filterleiste: alle Punkte in einer Zeile (User 08.11.2026) */
.filter { gap: .4rem; }
.filter button { min-height: 40px; padding: 0 .9rem; font-size: .92rem; white-space: nowrap; }
@media (min-width: 64rem) { .filter { flex-wrap: nowrap; } }

/* Partner werden / Für Unternehmen: Fließtext-Fassung (08.11.2026) */
.kralle-titel { position: relative; padding-left: 2.1rem; }
.kralle-titel::before { content: ""; position: absolute; left: 0; top: .4em; width: 20px; height: 13px;
  background: repeating-linear-gradient(115deg, var(--gold) 0 2px, transparent 2px 5px); }
.einsatz { align-items: start; }
.einsatz > .konzept { position: sticky; top: 7rem; }
.einsatz__text h2 { margin-top: .6rem; }
.einsatz__text > p { margin-top: 1.1rem; color: var(--ivory-2); max-width: 62ch; }
.einsatz__text .ausstattung { margin-top: 1.8rem; padding: 1.1rem 1.3rem; border-left: 2px solid var(--gold); background: var(--espresso-2); border-radius: 0 12px 12px 0; color: var(--ivory); }
.einsatz__text .krallenliste { margin-top: 1.5rem; }
.einsatz__text .einsatz__aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.schritte span { display: block; color: var(--ivory-2); margin-top: .4rem; }
@media (max-width: 64rem) { .einsatz > .konzept { position: static; } }

/* Maschinen: Zwischenzeile, Aktion, Standort-Tabelle (5c, 08.11.2026) */
.maschine h3.maschine__claim { margin-top: .5rem; }
.maschine .enthuellen > p:not(.passend):not(.maschine__aktion) { margin-top: 1.1rem; color: var(--ivory-2); max-width: 62ch; }
.maschine .maschine__vorteile { margin-top: 1.5rem; }
.maschine__aktion { margin-top: 2rem; }
.tabelle-wrap { margin-top: 2.5rem; overflow-x: auto; }
.standort-tabelle { width: 100%; border-collapse: collapse; min-width: 34rem; }
.standort-tabelle th { text-align: left; font-family: var(--display); font-weight: 500; font-size: .9rem; color: var(--ivory-2); padding: 0 1.25rem .9rem 0; border-bottom: 1px solid var(--gold); }
.standort-tabelle td { padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ivory-2); }
.standort-tabelle td:nth-child(2) a { font-family: var(--head); font-weight: 700; color: var(--gold); text-decoration: none; }
.standort-tabelle td:nth-child(2) a:hover { text-decoration: underline; }

/* Partner werden: längere Einleitung breiter, damit der Hero so hoch bleibt wie Sortiment/Maschinen */
.seitenkopf--breit .lead { max-width: 68ch; }
@media (min-width: 64rem) { .seitenkopf--breit::before { background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .88) 45%, rgb(0 0 0 / 0) 68%); } }

/* Startseite 5f (08.11.2026): Tür-Kicker, Intros */
.door__kicker { font-family: var(--display); font-weight: 500; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ivory-2); }
.hand__intro { max-width: 58ch; margin: 1.2rem auto 0; color: var(--ivory-2); font-size: clamp(1rem, .95rem + .3vw, 1.2rem); }
.konzepte__intro { max-width: 58ch; margin-top: 1.4rem; color: var(--ivory-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }

/* Beratung: Überschrift so groß wie die übrigen Abschnittsüberschriften (User 08.11.2026) */
.talk__title { font-size: clamp(2.2rem, 1.2rem + 3vw, 4.25rem); letter-spacing: -0.03em; line-height: 1.02; max-width: 22ch; }

/* Für Unternehmen: Einsatzbilder in voller Höhe des Textblocks, Seiten im Wechsel (User 08.11.2026) */
.einsatz { align-items: stretch; }
.einsatz__bild { margin: 0; position: relative; min-height: 26rem; border-radius: 18px; overflow: hidden; background: var(--espresso-2); }
.einsatz__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.einsatz--rechts > .einsatz__bild { order: 2; }
.einsatz__text { align-self: center; }
@media (max-width: 64rem) {
  .einsatz--rechts > .einsatz__bild { order: 0; }
  .einsatz__bild { min-height: 0; aspect-ratio: 4 / 5; max-height: 34rem; }
}

/* Partner werden: „Für wen“ zweispaltig, Produktbild vollflächig unten mittig (User 08.11.2026) */
.wer { background: #000 url("assets/partner-produkte.webp") no-repeat center bottom / 100% auto; padding-bottom: calc(26.6vw + 2rem); }
.wer__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; }
.wer__raster .lead + .lead { margin-top: 1.2rem; }
@media (max-width: 64rem) { .wer__raster { grid-template-columns: 1fr; gap: 1.5rem; } }

/* Die Marke: „Wer hinter Alessio steht“ mit Firmensitz als Hintergrund (User 08.11.2026) */
.wer-steht { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(30rem, 38vw, 44rem); display: flex; align-items: center; }
.wer-steht > .wrap { width: 100%; }
.wer-steht__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: -2; }
.wer-steht::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .82) 38%, rgb(0 0 0 / .15) 70%, rgb(0 0 0 / 0) 100%); }
@media (max-width: 64rem) { .wer-steht::before { background: rgb(0 0 0 / .7); } }

/* Die Marke: Panther + drei Begriffe in einem Abschnitt (User 08.11.2026) */
.panther-block { background: #15100b; }
.panther-block .lead { margin-top: 1.5rem; max-width: 62ch; }

/* Abschluss „Sprechen wir …“: so groß wie die übrigen Abschnittsüberschriften (User 08.11.2026) */
.abschluss h2 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); max-width: 22ch; }

/* Impressum/Datenschutz: volle Seitenbreite als Rahmen, Text linksbündig auf zwei Drittel (User 08.11.2026) */
.wrap.prosa { max-width: var(--wrap); }
.wrap.prosa > * { max-width: 66.666%; }
@media (max-width: 64rem) { .wrap.prosa > * { max-width: none; } }

/* Show-Unterseiten: Seitenkopf bis zum Start der Animation verbergen; Rückfall nach 3,5 s (08.11.2026) */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.show-start) body.show .seitenkopf .wrap,
  .js:not(.show-start) body.show .seitenkopf > img { opacity: 0; animation: safety-show 1ms 3.5s forwards; }
}

/* Schritte 1–4: Linie wächst, Zahl erscheint (gesteuert von seiten-show.js über --l und --z) */
.schritte--animiert li { position: relative; border-top-color: transparent; }
.schritte--animiert li::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--gold); transform-origin: left center; transform: scaleX(var(--l, 1)); }
.schritte--animiert li::before { opacity: var(--z, 1); transform: translateY(calc((1 - var(--z, 1)) * 16px)); }

/* Für Unternehmen: drei Einsatzkonzept-Icons unter der Einleitung (User 08.11.2026) */
.konzept-icons { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.konzept-icons a { display: grid; justify-items: center; gap: 1.1rem; padding: 2.4rem 1rem 2rem; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ivory); transition: box-shadow .3s ease, translate .4s var(--ease); }
.konzept-icons svg { width: 76px; height: 76px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.konzept-icons span { font-family: var(--head); font-weight: 700; font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); color: var(--gold); }
@media (hover: hover) { .konzept-icons a:hover { box-shadow: inset 0 0 0 1px var(--gold); translate: 0 -4px; } }
@media (max-width: 40rem) { .konzept-icons { grid-template-columns: 1fr; } .konzept-icons a { grid-template-columns: auto 1fr; justify-items: start; align-items: center; padding: 1.2rem 1.4rem; } .konzept-icons svg { width: 48px; height: 48px; } }

/* Verlinkte Kacheln (z. B. Die Marke „Wo bekommen Sie Alessio?“): Hover wie die übrigen Kacheln (User 08.11.2026) */
a.kachel { color: inherit; transition: box-shadow .3s ease, translate .4s var(--ease); } /* „translate“ statt „transform“: kollidiert nicht mit der Einflug-Animation */
a.kachel h3::after { content: " →"; display: inline-block; transition: transform .4s var(--ease); }
@media (hover: hover) {
  a.kachel:hover { box-shadow: inset 0 0 0 1px var(--gold); translate: 0 -4px; }
  a.kachel:hover h3::after { transform: translateX(4px); }
}
a.kachel:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Service: Deutschlandkarte neben „In NRW direkt …“ (User 08.11.2026) */
.service-karte { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.service-karte__bild { margin: 0; }
.service-karte__bild img { width: 100%; max-width: 520px; margin-inline: auto; border-radius: 0; filter: drop-shadow(0 30px 50px rgb(0 0 0 / .6)); }
@media (max-width: 64rem) { .service-karte { grid-template-columns: 1fr; } }

/* Seitenkopf ohne Bild (Service): Überschrift auf zwei Zeilen, Einleitung breiter (User 08.11.2026) */
.seitenkopf--weit h1 { max-width: 24ch; }
.seitenkopf--weit .lead { max-width: 78ch; }

/* Service: Wartung und Vertragsformen nebeneinander (User 08.11.2026) */
.service-paar { align-items: start; }
.service-paar .lead { margin-top: 1.5rem; }
@media (max-width: 64rem) { .service-paar { grid-template-columns: 1fr; } }

/* Startseite: Einsatzkacheln mit Fotos, Gesichter oben im Bild halten (08.11.2026) */
.konzept .foto { object-position: center 20%; }

/* Startseite Einsatzkacheln: Fotos in Originalfarbe (kein Gold-Overlay), Hover = Kachel hebt sich + langsamer Ken-Burns-Zoom (User 08.11.2026) */
.konzept .foto { filter: none; transition: transform 1.2s var(--ease); }
.konzept:hover .foto, .konzept:focus-visible .foto { filter: none; transform: scale(1.07); }
.konzept { transition: translate .5s var(--ease), box-shadow .4s ease; } /* translate statt transform: kollidiert nicht mit der Einflug-Animation */
@media (hover: hover) { .konzept:hover { translate: 0 -8px; box-shadow: 0 30px 60px -25px rgb(0 0 0 / .8), inset 0 0 0 1px var(--gold); } }
@media (prefers-reduced-motion: reduce) { .konzept, .konzept .foto { transition: none; } .konzept:hover { translate: none; } .konzept:hover .foto { transform: none; } }

/* Mobil (User 09.11.2026) */
@media (max-width: 48rem) {
  /* Startseite: Bohnenfläche höher, Bohnen nicht abgeschnitten */
  .flight { height: 260px; }
  /* Hero mit Bild rechts: dunkle Fläche 50 % über dem ganzen Bild, Text lesbar */
  .seitenkopf--rechts::before { background: linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 40%), rgb(0 0 0 / .5); }
  /* Die Marke: gleiche Kopfhöhe wie die anderen Seiten, beide Panther-Augen im Bild */
  .seitenkopf--bild:not(.seitenkopf--rechts) { min-height: 34rem; padding-bottom: 3rem; }
  .seitenkopf--bild:not(.seitenkopf--rechts) > img { object-position: 83% 40%; }
}

/* Fix (09.11.2026): Verlauf/Abdunklung muss ÜBER dem Hero-Bild liegen. Bild und ::before hatten beide z-index -1,
   das Bild kommt im DOM nach ::before und lag damit obenauf – die Abdunklung war unsichtbar. */
.seitenkopf--bild > img { z-index: -2; }

/* Produktkarten: Rahmen als Ebene über Bild und Text, damit er beim Hover rundum sichtbar ist
   (vorher lag das Bild über dem inneren Schatten, der Goldrand war nur unten zu sehen; User 13.11.2026) */
.produkt { position: relative; box-shadow: none; }
.produkt::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: box-shadow 300ms ease; }
.produkt:target { box-shadow: none; }
.produkt:target::after { box-shadow: inset 0 0 0 2px var(--gold); }
@media (hover: hover) {
  .produkt:hover { box-shadow: 0 24px 50px -28px rgb(190 159 87 / .45); }
  .produkt:hover::after { box-shadow: inset 0 0 0 1px var(--gold); }
}