/* ==========================================================================
   enterprise-search.css — nur was die Enterprise-Search-Seite zusätzlich braucht (Plan SITE-17).
   Alles Übrige aus ../css/styles.css (Overlay .ov, Bildkarte .auftrag, Eckknopf .ecke); Werte nur über
   die Rollen-Tokens (R-GEST-040/041). Umbau 2026-10-08: Schieber, Suche, Rollen, Reiter, Quellen-Finder.
   Überfahren nur unter (hover: hover) und verstärkt nur (R-GEST-037); Bewegung d-1/d-2, abschaltbar (R-GEST-070/071).
   ========================================================================== */

.es-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Umgeschaltete Treffer, Schritte und Bereiche: hidden schlägt jedes display dieser Seite. */
.seite-es [hidden] { display: none !important; }

/* ---------- Klickziele dieser Seite (R-GEST-073): Ruhe 2 px Grau + e-0, Überfahren Blau + e-1 ---------- */
.es-hero__bild, .es-quelle {
  position: relative; display: block; border: 2px solid var(--border); border-radius: var(--r-3);
  background: var(--white); box-shadow: var(--e-0); color: var(--ink); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
.es-hero__bild:focus-visible, .es-quelle:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.es-hero__bild:active, .es-quelle:active { box-shadow: var(--e-0); }
@media (hover: hover) {
  .es-hero__bild:hover, .es-quelle:hover { border-color: var(--accent); box-shadow: var(--e-1); }
}

/* ---------- 1 Einstieg: Text links, Bohne mit Quellen rechts ---------- */
.es-hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: var(--a-6); align-items: center; }
.es-hero .sect__kopf { max-width: none; }
.es-hero h1 { margin-top: var(--a-1); }
.es-hero h1 .hl { color: var(--accent); }
.es-hero .aktion { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-4); }
.es-hero__bild { padding: var(--a-4) var(--a-4) var(--a-2); background: linear-gradient(160deg, var(--white) 30%, var(--accent-soft)); }
.es-hero__bild img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain; transition: transform var(--d-2) ease-out; }
@media (hover: hover) { .es-hero__bild:hover img { transform: translateY(-0.25rem); } }

/* Overlays: großes Bildschirmfoto oben, Punkte darunter */
.es-ov__foto { margin: var(--a-4) 0 0; }
.es-ov__foto img { display: block; width: 100%; height: auto; border-radius: var(--r-2); border: 1px solid var(--border); }
.es-ov__punkte { margin-top: var(--a-3); }
.es-ov__zwischen { margin-top: var(--a-4); font-size: var(--s-02); color: var(--marke); }
.ov__kopf .ov__lead { margin-top: var(--a-1); color: var(--grey); }
/* Die ✕-Leiste zieht den Innenabstand oben auf null (styles.css); ohne Personenbild käme die Kennung an den Rand. */
.seite-es .ov__kopf { padding-top: var(--a-3); }

/* ---------- 2 Anlass: Vorher/Nachher-Schieber ----------
   In Ruhe halb und halb; das Nachher-Bild liegt oben und ist links von --pos abgeschnitten. */
.es-anlass { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.es-insight { margin-top: var(--a-3); color: var(--accent-dark); }
.es-anlass .lead { margin-bottom: 0; }
.es-vn { margin: 0; }
.es-vn__buehne {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-3);
  border: 2px solid var(--border); box-shadow: var(--e-1); background: var(--bg);
}
.es-vn__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.es-vn__bild--nachher { clip-path: inset(0 0 0 var(--pos, 50%)); }
.es-vn__linie {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px;
  background: var(--white); box-shadow: var(--e-0); pointer-events: none;
}
.es-vn__griff {
  position: absolute; top: 50%; left: 50%; width: var(--ziel); height: var(--ziel); margin: calc(var(--ziel) / -2) 0 0 calc(var(--ziel) / -2);
  border-radius: 50%; background: var(--white); border: 2px solid var(--accent); box-shadow: var(--e-1);
}
.es-vn__griff::before {
  content: "\2039\00a0\203A"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--accent); font-weight: 700; font-size: var(--s-03); line-height: 1;
}
.es-vn__marke {
  position: absolute; top: var(--a-2); padding: var(--a-0) var(--a-2); border-radius: var(--r-pille);
  font-size: var(--s-01); font-weight: 700; pointer-events: none;
}
.es-vn__marke--vorher { left: var(--a-2); background: var(--white); color: var(--ink); }
.es-vn__marke--nachher { right: var(--a-2); background: var(--accent); color: var(--white); }
.es-vn__regler {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y;
}
.es-vn__buehne:has(.es-vn__regler:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .es-vn__buehne:hover { border-color: var(--accent); } }

.es-punkte { margin-top: var(--a-4); list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--a-3); }
.es-punkte li { padding-left: var(--a-3); border-left: 3px solid var(--accent); }
.es-punkte strong { display: block; color: var(--marke); }
.es-punkte span { color: var(--grey); font-size: var(--s-01); }

/* ---------- Kopf quer: Überschrift links, Lead rechts ---------- */
.es-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-5); align-items: end; max-width: none; }
.es-kopf .lead { margin: 0; }

/* ---------- 3 Suche zum Ausprobieren, 4 Rollen ---------- */
.es-such {
  margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); padding: clamp(var(--a-2), 2.5vh, var(--a-4)) var(--a-4); border-radius: var(--r-3);
  background: var(--white); border: 1px solid var(--border); box-shadow: var(--e-1);
}
.es-such__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3); }
.es-such__feld {
  flex: 1 1 18rem; min-width: 0; display: flex; align-items: center; gap: var(--a-2); margin: 0;
  min-height: var(--ziel); padding: 0 var(--a-3); border-radius: var(--r-pille);
  border: 2px solid var(--accent); background: var(--white); font-size: var(--s-03); font-weight: 600; color: var(--marke);
}
.es-such__lupe { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
.es-such__text { min-width: 0; overflow-wrap: anywhere; }
.es-such__text::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.15em; background: var(--accent); }
/* Die Schreibmarke steht still: Blinken wäre Bewegung über d-3 (R-GEST-070). */
.es-such__feld--fest .es-such__text::after { display: none; }
.es-such__anfragen { margin-top: var(--a-2); display: flex; flex-wrap: wrap; gap: var(--a-2); }
.es-chip {
  display: inline-flex; align-items: center; gap: var(--a-1); min-height: var(--ziel); padding: 0 var(--a-3);
  border-radius: var(--r-pille); border: 2px solid var(--border); background: var(--bg); color: var(--ink);
  font: inherit; font-size: var(--s-01); cursor: pointer;
  transition: border-color var(--d-1) ease, background-color var(--d-1) ease, color var(--d-1) ease;
}
.es-chip code { font-family: inherit; font-weight: 700; color: var(--marke); }
.es-chip span { color: var(--grey); }
.es-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.es-chip:focus-visible, .es-schalter:focus-visible, .es-rolle:focus-visible, .es-schritt:focus-visible, .es-reiter:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
@media (hover: hover) { .es-chip:hover { border-color: var(--accent); } }

/* Schalter „+ Bedeutung" */
.es-schalter {
  display: inline-flex; align-items: center; gap: var(--a-2); min-height: var(--ziel); padding: 0 var(--a-3) 0 var(--a-2);
  border: 2px solid var(--border); border-radius: var(--r-pille); background: var(--white); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; transition: border-color var(--d-1) ease;
}
.es-schalter__spur { position: relative; width: 2.5rem; height: 1.4rem; border-radius: var(--r-pille); background: var(--line); transition: background-color var(--d-1) ease; }
.es-schalter__spur::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--white); box-shadow: var(--e-0); transition: transform var(--d-2) ease;
}
.es-schalter[aria-pressed="true"] { border-color: var(--accent); }
.es-schalter[aria-pressed="true"] .es-schalter__spur { background: var(--accent); }
.es-schalter[aria-pressed="true"] .es-schalter__spur::after { transform: translateX(1.1rem); }
@media (hover: hover) { .es-schalter:hover { border-color: var(--accent); } }
.es-such__zahl { margin-top: var(--a-2); font-size: var(--s-01); color: var(--grey); }
.es-such__zahl strong { color: var(--accent-dark); }
.es-schalter { margin-left: auto; }
.es-such__zahl--innen { margin: 0 0 0 auto; flex: none; font-size: var(--s-01); }

/* Trefferliste */
.es-treffer { margin-top: var(--a-1); list-style: none; padding: 0; display: grid; gap: var(--a-0); }
.es-tr {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; column-gap: var(--a-3); row-gap: 0;
  padding: clamp(var(--a-0), 1vh, var(--a-2)) var(--a-3); border-radius: var(--r-2); background: var(--bg); border-left: 3px solid transparent;
}
.es-tr.ist-neu { animation: esAuf var(--d-2) ease-out both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes esAuf { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }
.es-tr__quelle {
  grid-column: 1; grid-row: 1 / span 2; align-self: start; display: inline-flex; align-items: center; gap: var(--a-1);
  font-size: var(--s-00); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-dark);
}
.es-tr__quelle svg { width: 1.125rem; height: 1.125rem; flex: none; }
.es-tr__titel { grid-column: 2; grid-row: 1; font-weight: 700; color: var(--marke); overflow-wrap: anywhere; }
.es-tr__schnipsel { grid-column: 2 / -1; grid-row: 2; font-size: var(--s-01); color: var(--ink); }
.es-tr__schnipsel mark { background: var(--accent-soft); color: var(--marke); padding: 0 var(--a-0); font-weight: 700; }
/* Herkunft rechts in der Titelzeile: spart je Treffer eine Zeile (R-GEST-081). */
.es-tr__meta { grid-column: 3; grid-row: 1; align-self: center; text-align: right; font-size: var(--s-00); color: var(--grey); }
.es-tr--sem { border-left-color: var(--accent); background: var(--white); box-shadow: var(--e-0); }
.es-tr__sem { color: var(--accent-dark); font-weight: 700; }
.es-such__fuss { margin-top: var(--a-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-2); }
.es-kennung { margin: 0; font-size: var(--s-00); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); }
.ecke.es-ecke--fuss { position: static; }
/* Kennzeichnung der erfundenen Daten oben im Beispiel, vor dem ersten Klick sichtbar (R-PSY-004). */
.es-kennung--kopf { margin-bottom: var(--a-2); color: var(--accent-dark); }
.es-such__fuss { justify-content: flex-end; }

/* Kette im Overlay: nummerierte Schritte */
.es-kette { margin-top: var(--a-4); list-style: none; padding: 0; display: grid; gap: var(--a-2); }
.es-kette li { position: relative; padding: var(--a-2) var(--a-3) var(--a-2) calc(var(--ziel) + var(--a-2)); border-radius: var(--r-2); background: var(--bg); }
.es-kette strong { color: var(--marke); }
.es-kette span:not(.es-kette__nr) { color: var(--grey); }
.es-kette__nr {
  position: absolute; left: var(--a-2); top: var(--a-2); width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--white); font-weight: 700; font-size: var(--s-01);
}

/* Rollen */
.es-rechte { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.es-rechte .es-such { margin-top: 0; }
.es-rechte__hinweis { margin-top: var(--a-3); font-size: var(--s-01); color: var(--grey); }
.es-rechte__bohne { display: block; width: 7rem; height: auto; margin-top: var(--a-3); }
.es-rollen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin-bottom: var(--a-3); }
.es-rollen__l { font-size: var(--s-01); color: var(--grey); margin-right: var(--a-1); }
.es-rolle {
  display: inline-flex; align-items: center; gap: var(--a-2); min-height: var(--ziel); padding: 0 var(--a-3) 0 var(--a-1);
  border-radius: var(--r-pille); border: 2px solid var(--border); background: var(--white); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; transition: border-color var(--d-1) ease, background-color var(--d-1) ease;
}
.es-rolle__kreis {
  width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--marke); font-size: var(--s-01); transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.es-rolle__kreis svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.es-rolle[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.es-rolle[aria-pressed="true"] .es-rolle__kreis { background: var(--accent); color: var(--white); }
@media (hover: hover) { .es-rolle:hover { border-color: var(--accent); } }
.es-such--rechte .es-treffer { margin-top: var(--a-2); }

/* ---------- 5 Werkzeuge: sechs Bildkacheln (Baustein .auftrag) ---------- */
.es-kacheln { margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); }
/* Mindestens 7.5rem (120 px): darunter setzt nav/ki-marke.js keinen Marker „KI-generiert“ (R-GEST-081, R-IMG-013).
   Absolut gelegt, damit der Marker aufs Bild kommt statt eine eigene Zeile einzuschieben. */
.es-kachel { padding-top: 7.5rem; }
.es-kachel__bild { position: absolute; top: 0; left: 0; right: 0; height: 7.5rem; overflow: hidden; }
.es-kachel .auftrag__foto { position: absolute; inset: 0; height: 100%; object-position: left top; transition: transform var(--d-2) ease-out; }
.es-kachel { isolation: isolate; }
@media (hover: hover) { .es-kachel:hover .auftrag__foto { transform: scale(1.04); } }
.es-kachel .ecke { top: var(--a-1); right: var(--a-1); }
.es-kachel .auftrag__foto.es-kachel__foto--mitte { object-position: center 60%; }
.es-kachel .auftrag__titel { margin-top: var(--a-2); }
.seite-es .es-kachel { padding-bottom: var(--a-2); }
.es-kacheln { row-gap: var(--a-2); }

/* ---------- 6 Auskunft: fünf Schritte, Fachfarbe Datenschutz (R-GEST-042) ---------- */
.es-auskunft { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); align-items: center; }
.es-fach { color: var(--fach); }
.es-schritte { margin-top: var(--a-4); }
.es-schritte__leiste { display: flex; flex-wrap: wrap; gap: var(--a-1); }
.es-schritt {
  display: inline-flex; align-items: center; gap: var(--a-1); min-height: var(--ziel); padding: 0 var(--a-3) 0 var(--a-1);
  border-radius: var(--r-pille); border: 2px solid var(--border); background: var(--white); color: var(--ink);
  font: inherit; font-size: var(--s-01); font-weight: 700; cursor: pointer;
  transition: border-color var(--d-1) ease, background-color var(--d-1) ease;
}
.es-schritt__nr {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--line); color: var(--marke); transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.es-schritt[aria-selected="true"] { border-color: var(--fach); }
.es-schritt[aria-selected="true"] .es-schritt__nr { background: var(--fach); color: var(--white); }
.es-schritt:focus-visible { outline-color: var(--fach); }
@media (hover: hover) { .es-schritt:hover { border-color: var(--fach); } }
.es-schritte__tafel {
  margin-top: var(--a-3); padding: var(--a-3) var(--a-4); border-radius: var(--r-2);
  background: var(--white); border-left: 4px solid var(--fach); box-shadow: var(--e-0);
}
.es-schritte__tafel p { margin: 0; }
.es-schritte__tafel.ist-neu, .es-tafel.ist-neu { animation: esAuf var(--d-2) ease-out both; }
.es-auskunft__bild { max-width: 17rem; margin: 0 0 0 auto; }
.es-auskunft__bild img { border-radius: var(--r-3); }

/* ---------- 7 Quellen-Finder ---------- */
.es-quellen { margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-2) var(--a-3); }
.es-quelle { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--a-2); row-gap: var(--a-1); padding: clamp(var(--a-2), 2vh, var(--a-3)) var(--a-3); }
.es-quelle__logos { grid-row: 1; align-self: center; }
.es-quelle__titel { grid-row: 1; align-self: center; }
.es-quelle__text, .es-quelle__mehr { grid-column: 1 / -1; }
.es-quelle__logos { display: flex; gap: var(--a-1); }
.es-quelle__logos img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.es-quelle__titel { font-weight: 700; color: var(--marke); }
.es-quelle__text { font-size: var(--s-01); color: var(--grey); }
.es-quelle__mehr {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--a-1); margin-top: var(--a-1);
  min-height: 2rem; padding: 0 var(--a-2); border-radius: var(--r-pille); border: 2px solid var(--accent);
  color: var(--accent); font-size: var(--s-01); font-weight: 700;
  transition: background-color var(--d-1) ease, color var(--d-1) ease, border-color var(--d-1) ease;
}
.es-quelle:active .es-quelle__mehr { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); }
@media (hover: hover) { .es-quelle:hover .es-quelle__mehr { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--white); } }
.es-quellen__fuss { margin-top: var(--a-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-4); font-size: var(--s-01); color: var(--grey); }
.es-quellen__fuss p { margin: 0; }
.es-quellen__fuss strong { color: var(--ink); }

/* ---------- 8 Einsatz: Reiter je Bereich ---------- */
.es-einsatz { margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); }
.es-einsatz__leiste { display: flex; flex-wrap: wrap; gap: var(--a-1); }
.es-reiter {
  min-height: var(--ziel); padding: 0 var(--a-4); border-radius: var(--r-pille);
  border: 2px solid var(--border); background: var(--white); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer; transition: border-color var(--d-1) ease, background-color var(--d-1) ease, color var(--d-1) ease;
}
.es-reiter[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--white); }
@media (hover: hover) { .es-reiter:hover { border-color: var(--accent); } }
.es-tafel { margin-top: var(--a-3); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--a-5); align-items: center; }
.es-tafel + .es-tafel { margin-top: var(--a-5); }
.es-tafel__bild { margin: 0; height: clamp(12rem, 40vh, 22rem); overflow: hidden; border-radius: var(--r-3); box-shadow: var(--e-1); }
.es-tafel__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-2) ease-out; }
.es-tafel__bild--hoch img { object-position: center 20%; }
@media (hover: hover) { .es-tafel__bild:hover img { transform: scale(1.03); } }
.es-tafel__text h3 { color: var(--marke); }
.es-tafel__anfrage { margin-top: var(--a-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-1); }
.es-tafel__l { font-size: var(--s-00); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey); }
.es-tafel__q {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0 var(--a-3); border-radius: var(--r-pille);
  border: 2px solid var(--accent); font-weight: 700; color: var(--marke);
}
.es-tafel__text .liste { margin-top: var(--a-2); }
.es-tafel__branchen { margin-top: var(--a-2); font-size: var(--s-01); color: var(--accent-dark); font-weight: 600; }
.es-tafel__text .es-kennung { margin-top: var(--a-2); }
.es-referenz { margin-top: var(--a-3); color: var(--grey); font-size: var(--s-01); }

/* ---------- Preis: Schieber über die Objektleiter + Rechner-Kachel (styles.css .rechner-kachel) ---------- */
.es-preis { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--a-5); align-items: start; }
.es-preis__regler {
  margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); padding: var(--a-3) var(--a-4);
  background: var(--white); border: 1px solid var(--border); border-top: 4px solid var(--accent); border-radius: var(--r-3); box-shadow: var(--e-1);
}
.es-preis__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-2); }
.es-preis__l { font-size: var(--s-01); color: var(--grey); font-weight: 700; }
.es-preis__menge { font-size: var(--s-04); font-weight: 700; color: var(--marke); font-variant-numeric: tabular-nums; }
.es-preis__eingabe { display: block; width: 100%; min-height: var(--ziel); margin: 0; accent-color: var(--accent); cursor: pointer; }
.es-preis__eingabe:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.es-preis__ergebnis { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-2); }
.es-preis__wert { margin: 0; }
.es-preis__wert span { font-size: var(--s-07); font-weight: 700; line-height: 1; color: var(--accent-dark); font-variant-numeric: tabular-nums; }
.es-preis__wert small { font-size: var(--s-01); color: var(--grey); }
.es-abrechnung { display: inline-flex; padding: var(--a-0); border-radius: var(--r-pille); background: var(--bg); border: 1px solid var(--border); }
.es-abrechnung__k {
  min-height: var(--ziel); padding: 0 var(--a-3); border: 0; border-radius: var(--r-pille); background: transparent; color: var(--grey);
  font: inherit; font-size: var(--s-01); font-weight: 700; cursor: pointer; transition: background-color var(--d-1) ease, color var(--d-1) ease;
}
.es-abrechnung__k[aria-pressed="true"] { background: var(--accent); color: var(--white); }
.es-abrechnung__k:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .es-abrechnung__k[aria-pressed="false"]:hover { color: var(--accent-dark); } }
.es-preis__inkl {
  margin: var(--a-3) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-1) var(--a-4);
}
.es-preis__inkl li { position: relative; padding-left: var(--a-4); font-size: var(--s-01); line-height: 1.5; }
.es-preis__inkl li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--erfolg); font-weight: 700; }
.es-preis__mehr { margin: var(--a-1) 0 0; font-size: var(--s-01); color: var(--grey); }
.es-preis__regler.ist-anfrage .es-preis__wert span { font-size: var(--s-05); }
.es-preis__rechts { min-width: 0; }
.es-preis__fuss { margin: var(--a-3) 0 0; font-size: var(--s-00); color: var(--grey); line-height: 1.5; }
.es-preis__kachel .rechner-kachel__bild img { aspect-ratio: auto; height: clamp(9rem, 26vh, 15rem); }

/* ---------- Ordnen: Bildschirmfotos zum Umschalten + vier Wege ---------- */
.es-ordnen { margin-top: clamp(var(--a-2), 2.5vh, var(--a-4)); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--a-5); align-items: start; }
.es-galerie { min-width: 0; }
.es-galerie__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-2); }
.es-galerie__reiter { display: flex; flex-wrap: wrap; gap: var(--a-1); }
.es-galerie__tafel { margin-top: var(--a-2); }
.es-galerie__tafel.ist-neu { animation: esAuf var(--d-2) ease-out both; }
.es-galerie__bild {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in;
  border: 2px solid var(--border); border-radius: var(--r-3); background: var(--white); box-shadow: var(--e-1);
  transition: border-color var(--d-1) ease, box-shadow var(--d-1) ease;
}
.es-galerie__bild img { display: block; width: 100%; height: clamp(12rem, 37vh, 24rem); object-fit: cover; object-position: left top; transition: transform var(--d-2) ease-out; }
.es-galerie__bild .ecke { top: auto; bottom: var(--a-2); right: var(--a-2); }
.es-galerie__bild:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.es-galerie__bild:active { box-shadow: var(--e-0); }
@media (hover: hover) { .es-galerie__bild:hover { border-color: var(--accent); box-shadow: var(--e-2); } .es-galerie__bild:hover img { transform: scale(1.02); } }
.es-galerie__text { margin: var(--a-2) 0 0; font-size: var(--s-01); color: var(--grey); line-height: 1.5; }
.es-wege { margin: clamp(var(--a-2), 2.5vh, var(--a-3)) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(var(--a-1), 1.5vh, var(--a-2)); }
.es-wege li { padding: var(--a-2) var(--a-3); border-radius: var(--r-2); background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--accent); font-size: var(--s-01); line-height: 1.5; }
.es-wege strong { display: block; color: var(--marke); font-size: var(--s-02); }
.es-wege span { color: var(--grey); }
.es-wege a { color: var(--accent-dark); font-weight: 700; }
.es-ordnen .es-wege { margin-top: 0; }
.es-ordnen .es-wege li { padding: clamp(var(--a-1), 1.2vh, var(--a-2)) var(--a-3); }
.es-ordnen .es-wege strong { display: inline; }

/* ---------- Für Ihre KI: drei Aufträge an einen KI-Assistenten ---------- */
.es-ki { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
.es-ki .es-such { margin-top: 0; }
.es-ki__rechts { min-width: 0; }
.es-ki .es-wege { margin-top: var(--a-3); }
.es-ki__rest { margin: var(--a-3) 0 0; font-size: var(--s-01); color: var(--grey); }
.es-ki__ablauf { margin-top: var(--a-3); display: grid; gap: var(--a-2); }
.es-ki__wer { display: block; font-size: var(--s-00); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.es-ki__frage { justify-self: end; max-width: 85%; margin: 0; padding: var(--a-2) var(--a-3); border-radius: var(--r-3) var(--r-3) var(--r-2) var(--r-3); background: var(--accent); color: var(--white); }
.es-ki__frage .es-ki__wer { color: var(--white); opacity: 0.85; }
.es-ki__schritte { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--a-0); }
.es-ki__schritte li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--a-1) var(--a-2); padding: var(--a-1) var(--a-3); border-radius: var(--r-2); background: var(--bg); border-left: 3px solid var(--accent); font-size: var(--s-01); color: var(--grey); }
.es-ki__schritte code { font-size: var(--s-00); font-weight: 700; color: var(--marke); padding: 0 var(--a-1); border-radius: var(--r-2); background: var(--white); border: 1px solid var(--border); }
.es-ki__schritte li.ist-neu, .es-ki__antwort.ist-neu, .es-ki__frage.ist-neu { animation: esAuf var(--d-2) ease-out both; animation-delay: calc(var(--i, 0) * 120ms); }
.es-ki__antwort { max-width: 92%; margin: 0; padding: var(--a-2) var(--a-3); border-radius: var(--r-3) var(--r-3) var(--r-3) var(--r-2); background: var(--white); border: 1px solid var(--border); box-shadow: var(--e-0); line-height: 1.5; }
.es-ki__antwort .es-ki__wer { color: var(--accent-dark); }
.es-ki__quelle { display: block; margin-top: var(--a-1); font-size: var(--s-00); color: var(--grey); }
.es-ki__ja {
  display: inline-flex; align-items: center; min-height: var(--ziel); margin-top: var(--a-1); padding: 0 var(--a-3); border: 0; border-radius: var(--r-pille);
  background: var(--handlung); color: var(--handlung-text); font: inherit; font-weight: 700; cursor: pointer; transition: box-shadow var(--d-1) ease;
}
.es-ki__ja:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.es-ki__ja:active { box-shadow: var(--e-0); }
@media (hover: hover) { .es-ki__ja:hover { box-shadow: var(--e-1); } }
.es-ki__weiter { margin: var(--a-1) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--a-4); }
.es-ki__weiter a { display: inline-flex; align-items: center; min-height: var(--ziel); font-weight: 700; color: var(--accent-dark); }
@media (hover: hover) { .es-ki__weiter a:hover { color: var(--accent); } }

/* ---------- Fragen: wie auf der Chatbot-Seite — Fragen mit Symbol links, Kopf und Bild rechts ---------- */
.es-fragen { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--a-5); align-items: start; }
.es-fragen__rechts .sect__kopf { margin-bottom: var(--a-3); }
.es-fragen__bild { margin: 0; overflow: hidden; border-radius: var(--r-3); box-shadow: var(--e-1); }
.es-fragen__bild img { display: block; width: 100%; height: auto; }
.es-faq { margin-top: var(--a-1); background: var(--white); border: 1px solid var(--border); border-radius: var(--r-2); }
.es-fragen__liste .es-faq:first-child { margin-top: 0; }
.es-faq summary {
  cursor: pointer; min-height: var(--ziel); padding: var(--a-1) var(--a-3); gap: var(--a-2);
  font-weight: 700; display: flex; align-items: center;
}
.es-faq__ico { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--accent); background: var(--accent-soft); transition: background-color var(--d-1) ease, color var(--d-1) ease; }
.es-ico { width: 1.5rem; height: 1.5rem; flex: none; }
.es-faq[open] .es-faq__ico { background: var(--accent); color: var(--white); }
.es-faq summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.es-faq p { margin: 0; padding: 0 var(--a-3) var(--a-3); color: var(--grey); }
.es-faq p a { color: var(--accent-dark); }
@media (hover: hover) { .es-faq summary:hover { color: var(--accent); } }

/* ---------- 11 Vorführung: Bohne lädt ein, beim Überfahren des Knopfs Handschlag ---------- */
.es-demo { position: relative; }
.es-demo__referenz { margin-top: var(--a-3); font-size: var(--s-01); font-weight: 600; color: var(--white); }
/* Eine Zeile mehr links (Referenz), damit das Formular rechts alle überspannt (styles.css: vier Zeilen). */
.es-demo { grid-template-rows: auto auto auto auto 1fr; } /* wirkt nur, wo .demo ein Raster ist (breit) */
/* Die Bohne schaut über die Oberkante des Kastens, damit sie kein Feld verdeckt. */
.es-demo { overflow: visible; }
.es-demo__bohne { position: absolute; top: -5.5rem; right: var(--a-5); width: 7rem; height: 7rem; pointer-events: none; }
.es-demo__bohne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity var(--d-2) ease; }
.es-demo__hover { opacity: 0; }
.es-demo:has(.btn--handlung:focus-visible) .es-demo__ruhe { opacity: 0; }
.es-demo:has(.btn--handlung:focus-visible) .es-demo__hover { opacity: 1; }
@media (hover: hover) {
  .es-demo:has(.btn--handlung:hover) .es-demo__ruhe { opacity: 0; }
  .es-demo:has(.btn--handlung:hover) .es-demo__hover { opacity: 1; }
}

/* ---------- Dichte (R-GEST-081: Folie mindestens, möglichst genau fensterhoch) ---------- */
.seite-es .sect { padding: var(--a-5) 0; }
.seite-es .es-hero { padding: clamp(var(--a-4), 5vh, var(--a-6)) 0; }
.seite-es .sect .lead { margin-top: var(--a-2); }
.seite-es .sect__kopf h2 { margin-bottom: 0; }
.seite-es .cards { margin-top: var(--a-3); gap: var(--a-3); }
.seite-es .card h3 { font-size: var(--s-03); line-height: 1.25; margin-bottom: var(--a-0); }
.seite-es .card p, .seite-es .card li { line-height: 1.5; }

/* ---------- Umbruchpunkte (R-GEST-030) ---------- */
@media (max-width: 56rem) {
  .es-hero__split, .es-anlass, .es-rechte, .es-auskunft, .es-tafel, .es-preis, .es-ordnen, .es-ki, .es-fragen { grid-template-columns: minmax(0, 1fr); }
  .es-fragen__rechts { order: -1; }
  .es-fragen__bild { max-width: 26rem; }
  .es-hero__bild { max-width: 22rem; margin: 0 auto; }
  .es-kopf { grid-template-columns: minmax(0, 1fr); gap: var(--a-2); }
  .es-kacheln, .es-quellen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-punkte, .es-quellen__fuss { grid-template-columns: minmax(0, 1fr); }
  .es-auskunft__bild { max-width: 14rem; margin: 0 auto; }
  .es-rechte__bohne { display: none; }
  .es-demo__bohne { display: block; position: relative; margin: 0 0 var(--a-2) auto; width: 6rem; height: 6rem; }
}
@media (max-width: 40rem) {
  .es-hero .aktion .btn { width: 100%; }
  .es-kacheln, .es-quellen, .es-preis__inkl { grid-template-columns: minmax(0, 1fr); }
  .es-tr { grid-template-columns: minmax(0, 1fr); }
  .es-tr__quelle, .es-tr__titel, .es-tr__schnipsel, .es-tr__meta { grid-column: 1; grid-row: auto; text-align: left; justify-content: flex-start; }
  .es-ki__frage, .es-ki__antwort { max-width: none; }
  .es-such { padding: var(--a-3); }
}

/* ---------- Bewegung abschaltbar (R-GEST-071): Endzustand ohne Übergang ---------- */
@media (prefers-reduced-motion: reduce) {
  .es-hero__bild, .es-quelle, .es-hero__bild img, .es-chip, .es-schalter,
  .es-schalter__spur, .es-schalter__spur::after, .es-rolle, .es-rolle__kreis, .es-kachel .auftrag__foto,
  .es-schritt, .es-schritt__nr, .es-quelle__mehr, .es-reiter, .es-tafel__bild img, .es-demo__bohne img, .es-abrechnung__k, .es-galerie__bild, .es-galerie__bild img, .es-ki__ja, .es-faq__ico {
    transition: none;
  }
  .es-tr.ist-neu, .es-schritte__tafel.ist-neu, .es-tafel.ist-neu, .es-galerie__tafel.ist-neu,
  .es-ki__schritte li.ist-neu, .es-ki__antwort.ist-neu, .es-ki__frage.ist-neu { animation: none; }
  .es-hero__bild:hover img, .es-kachel:hover .auftrag__foto, .es-tafel__bild:hover img, .es-galerie__bild:hover img { transform: none; }
}