/* Einlieferungsseite nach dem Vorbild der bisherigen Auktion:NG-Seite
   (templates/core/page_einlieferung.html, consign.html, _steps3.html, _einlieferung_warum.html).
   Hellpetrol als Grund, weiße Karten darauf, Petrol-Band "Warum Auktionshaus Weser?". */


.einl { background: var(--tint); padding: 0 0 56px; }
.einl section { scroll-margin-top: 90px; }

/* Einleitung mit großer Serifenzeile und zwei Pillen */
.einl-intro { text-align: center; padding: 44px 0 10px; }
.einl-intro h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 14px; }
.einl-intro__lead { font: 500 clamp(1.3rem, 2.4vw, 1.75rem)/1.55 var(--text); color: var(--navy); max-width: 820px; margin: 0 auto 26px; }
.einl-intro .eyebrow { margin-bottom: 8px; }
.einl-intro + .einl-card { margin-top: 30px; }

.einl-hands { text-align: center; max-width: 820px; margin: 0 auto; padding: 40px 0 34px; }
.einl-hands h2 { font: 700 20px/1.3 var(--serif); letter-spacing: 1.5px; color: var(--ink); margin: 0 0 10px; }
.einl-hands p { font-family: var(--text); color: var(--ink-2); margin: 0; }

/* Weiße Karten */
.einl-card { background: #fff; border-radius: 3px; padding: 44px 44px; margin: 0 0 30px; }
.einl-card__title { font: 700 32px/1.2 var(--serif); letter-spacing: 1px; color: var(--navy); text-align: center; margin: 0 0 28px; }
.einl-card .sectiontitle { margin-bottom: 30px; }

/* Drei Schritte: Kreise größer wie auf A:NG */
.einl-steps .steps3 { gap: 34px; }
.einl-steps .steps3__num { width: 72px; height: 72px; font: 700 30px/72px var(--serif); margin-bottom: 20px; }
.einl-steps .steps3 h3 { color: var(--navy); font-size: 15px; letter-spacing: 2px; }
.einl-steps .steps3 p { font-size: 18px; line-height: 1.65; }
.einl-card--steps .sectiontitle { margin-bottom: 26px; }

/* Was wir versteigern: fünf Symbole */
.einl-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; }
.einl-cats li { padding: 10px 6px; }
.einl-cats svg { display: block; width: 46px; height: 46px; margin: 0 auto 12px; fill: none; stroke: var(--petrol); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.einl-cats span { display: block; font: 700 13px/1.35 var(--serif); letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); }

/* Service: vier hellpetrol Karten */
.einl-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.einl-service { background: var(--tint); border-radius: 3px; padding: 28px 28px 24px; }
.einl-service svg { display: block; width: 38px; height: 38px; margin: 0 0 12px; fill: none; stroke: var(--petrol); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.einl-service h3 { font: 700 22px/1.25 var(--serif); letter-spacing: .5px; color: var(--navy); margin: 0 0 8px; }
.einl-service p { font-family: var(--text); color: var(--ink-2); font-size: 18px; line-height: 1.6; margin: 0 0 10px; }
.einl-service p:last-child { margin-bottom: 0; }
.einl-service__note { font: 700 15px/1.5 var(--serif) !important; letter-spacing: .5px; color: var(--petrol) !important; }

/* Petrol-Band mit Häkchen, volle Breite */
.einl-why { background: var(--petrol); color: var(--tint); padding: 44px 0 46px; margin: 4px 0 40px; }
.einl-why h2 { color: #fff; text-align: center; font: 700 clamp(1.6rem, 3.4vw, 2.2rem)/1.2 var(--serif); letter-spacing: 1px; margin: 0 0 26px; }
.einl-why__list { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 30px; font: 500 18px/1.5 var(--text); }
.einl-why__list li { display: flex; align-items: flex-start; gap: 10px; text-align: left; }
.einl-why__list svg { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.einl-why :focus-visible { outline-color: #fff; }
.einl > .einl-why:last-child { margin-bottom: -56px; }

/* Redaktioneller Text aus der Verwaltung */
.einl-card--text .pagebody { max-width: 46em; margin: 0 auto; }
.einl-card--text .pagebody > :first-child { margin-top: 0; }

/* Häufige Fragen */
.einl-faq-wrap { padding-top: 16px; }
.einl-faq-wrap > .sectiontitle { margin-bottom: 24px; }
.einl-faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 36px 40px; }
.einl-faq h3 { font: 700 21px/1.3 var(--serif); color: var(--petrol); margin: 0 0 10px; }
.einl-faq p { font-family: var(--text); color: var(--ink-2); font-size: 18px; line-height: 1.65; margin: 0; }

/* Abschluss */
.einl-cta { background: #fff; border: 1px solid rgba(29, 95, 110, .15); border-radius: 3px; text-align: center; padding: 44px 28px 38px; margin-top: 18px; }
.einl-cta h2 { font: 700 clamp(1.6rem, 3.6vw, 2.3rem)/1.25 var(--serif); color: var(--navy); letter-spacing: .5px; margin: 0 0 10px; }
.einl-cta > p { font-family: var(--text); color: var(--ink-2); max-width: 600px; margin: 0 auto 22px; font-size: 19px; }
.einl-cta .pillpair { margin-bottom: 22px; }
.einl-cta__note { font-size: 16px !important; margin: 0 auto 4px !important; }
.einl-cta__note:last-child { font-style: italic; color: var(--muted); }
.einl-cta .btn--outline { color: var(--ink); }

/* Anfrageformular */
.einl-form { padding-top: 20px; }
.einl-form .formcard { box-shadow: none; }

/* Fotoauswahl mit Vorschau (static/js/einlieferung.js) */
.photopick__count { font-size: .9rem; color: var(--ink-2); margin: 10px 0 8px; }
.photopick__count:empty { display: none; }
.photopick__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.photopick__grid:empty { display: none; }
.photopick__item { position: relative; aspect-ratio: 1; background: var(--tint); border: 1px solid #d5e4e6; border-radius: 3px; overflow: hidden; }
.photopick__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photopick__name { position: absolute; left: 0; right: 0; bottom: 0; font: 400 10px/1.3 var(--sans); color: #fff; background: rgba(15, 58, 63, .72); padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photopick__item.is-noimg img { display: none; }
.photopick__item.is-noimg .photopick__name { top: 0; display: flex; align-items: center; justify-content: center; white-space: normal; text-align: center; color: var(--ink-2); background: none; font-size: 11px; }
.photopick__remove { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .92); color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.photopick__remove svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.photopick__remove:hover, .photopick__remove:focus-visible { background: #fff; color: #a3262a; }
.photopick__error { color: #a3262a; font-size: .9rem; font-weight: 600; margin: 8px 0 0; }

@media (max-width: 900px) {
  .einl-cats { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .einl-why__list { grid-template-columns: repeat(2, 1fr); }
  .einl-faq { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 760px) {
  .einl-card { padding: 30px 20px; margin-bottom: 20px; }
  .einl-card__title, .einl-card .sectiontitle--serif h2 { font-size: 26px; }
  .einl-services { grid-template-columns: 1fr; gap: 14px; }
  .einl-service { padding: 22px 20px 20px; }
  .einl-faq { padding: 28px 20px; }
  .einl-intro { padding-top: 32px; }
  .einl-hands { padding: 30px 0 26px; }
}
@media (max-width: 560px) {
  .einl-cats { grid-template-columns: repeat(2, 1fr); }
  .einl-cats li:last-child { grid-column: 1 / -1; }
  .einl-why__list { grid-template-columns: 1fr; max-width: 22em; }
  .einl-cta { padding: 32px 18px 28px; }
  .einl-steps .steps3__num { width: 60px; height: 60px; font-size: 26px; line-height: 60px; }
}

/* lot-tissimo im Fließtext als ruhiger Link statt Knopf (Wunsch des Hauses 17.10.2026) */
.einl-lot { color: var(--petrol); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.einl-lot:hover, .einl-lot:focus-visible { color: var(--petrol-2); }
.einl-banner { height: clamp(180px, 33.3vw, 460px); } /* Foto 3:1, Ring und Lupe ganz im Bild (Laza, 18.10.2026) */