/* ==========================================================================
   Züchterseite, Fassung 2 (30.09.2026)

   Baut auf css/startseite.css auf (Bühne, Schnellanfrage, Zahlen, Ablauf,
   Stimmen, Fragen, Anfrage). Hier steht nur, was die Züchterseite zusätzlich
   braucht: Welpenfoto, Person in der Bühne, drei Themen-Chips, der Satz für
   die Käufer, der Tippgeld-Rechner und die beiden Listen.
   ========================================================================== */

/* --- Bühne ---------------------------------------------------------------- */

.s2-buehne--z .s2-buehne__bild img { object-position: 50% 24%; height: clamp(10.5rem, 23vh, 14.5rem); }

.z-person {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--s2-hell-text);
}
.z-person img {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 2px solid var(--brass-bright);
}
.z-person strong { color: var(--bone); font-weight: 650; }

.z-notiz { display: none; }

@media (min-width: 40em) {
  .s2-buehne--z .s2-buehne__bild img { height: 20rem; }
}
@media (min-width: 60em) {
  .s2-buehne--z .s2-buehne__bild img { object-position: 50% 55%; height: 100%; }
  .z-person img { width: 2.75rem; height: 2.75rem; }
  .z-notiz {
    display: block;
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2;
    max-width: 15rem;
    padding: 0.35rem 0.7rem 0.4rem;
    background-color: var(--bone);
    color: var(--forest-deep);
    font-family: var(--font-hand);
    font-size: 1.2rem;
    line-height: 1.15;
    box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.55);
  }
  .z-zitatkarte { bottom: auto; top: 42%; }
  .z-zitatkarte footer { font-weight: 600; color: var(--forest); font-size: 0.8125rem; }
}

/* --- Schnellanfrage: drei Tierarten, freiwillige Wurf-Frage --------------- */

.schnell__chips--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schnell__chips--drei .schnell__chip {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 4.9rem;
}
@media (min-width: 60em) {
  .schnell .schnell__chips--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schnell__chips--drei .schnell__chip { min-height: 5.6rem; }
}
.schnell__zusatz { margin-top: 1rem !important; }
.schnell__frei {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.7;
}

/* --- Ablauf: drei Schritte und der Satz ----------------------------------- */

@media (min-width: 60em) {
  .s2-schritte--drei { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
  .s2-schritte--drei li { grid-template-columns: 1fr; border-bottom: 1px solid var(--rule); }
  .s2-schritte--drei .s2-schritte__nr { grid-row: auto; margin-bottom: 0.6rem; font-size: 2.6rem; }
}

.z-satz {
  margin: 1.75rem 0 0;
  padding: 1.35rem 1.3rem 1.25rem;
  background-color: var(--paper);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--brass);
}
.z-satz .s2-kicker { margin-bottom: 0.7rem; }
.z-satz blockquote { margin: 0; }
.z-satz blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--ink);
  font-variation-settings: 'opsz' 22;
}
.z-satz__klein { margin-top: 0.85rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-soft); }
@media (min-width: 60em) {
  .z-satz { margin-top: 2.25rem; padding: 1.75rem 2rem 1.6rem; }
  .z-satz blockquote p { font-size: 1.5rem; }
}

/* --- Der Anruf nach der Abgabe (Zahl) -------------------------------------- */

.z-zahl__titel {
  font-family: var(--font-display);
  font-weight: 440;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bone);
  margin-bottom: 0.9rem;
  max-width: 22ch;
  font-variation-settings: 'opsz' 28;
}
.s2-zahl--z .s2-zahl__wert { font-size: clamp(2.6rem, 1.5rem + 5vw, 5.75rem); }
.z-zahl__klein { margin-top: 0.8rem; font-size: 0.875rem !important; color: rgba(248, 245, 238, 0.72) !important; }
@media (min-width: 60em) {
  .s2-zahl--z .s2-zahl__raster { grid-template-columns: 1.1fr 1fr; column-gap: 4rem; }
}

/* --- Tippgeld ------------------------------------------------------------ */

.z-geld { padding-block: var(--s2-y); background-color: var(--paper); border-bottom: 1px solid var(--rule-soft); }
.z-geld__raster { display: grid; gap: 2.25rem; }

.z-rechner {
  padding: 1.5rem 1.25rem 1.35rem;
  background-color: var(--forest-deep);
  color: var(--bone);
}
.z-rechner .s2-kicker { color: var(--brass-bright); }
.z-rechner .s2-h2 { color: var(--bone); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: 0.6rem; }
.z-rechner__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(248, 245, 238, 0.15);
}
.z-rechner__label { font-size: 0.9375rem; line-height: 1.35; }
.z-rechner__stepper { display: inline-flex; align-items: center; gap: 0.2rem; flex: none; }
.z-rechner__stepper button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(248, 245, 238, 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.z-rechner__stepper button:hover:not(:disabled) { border-color: var(--brass-bright); background-color: rgba(248, 245, 238, 0.06); }
.z-rechner__stepper button:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.z-rechner__stepper button:disabled { opacity: 0.3; cursor: default; }
.z-rechner__stepper output {
  min-width: 2.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}
.z-rechner__summe { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.25rem; }
.z-rechner__summe output {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brass-bright);
  font-variant-numeric: tabular-nums lining-nums;
}
.z-rechner__summe span { color: var(--s2-hell-text); }
.z-rechner__hinweis { margin-top: 0.9rem; font-size: 0.8125rem; line-height: 1.5; color: rgba(248, 245, 238, 0.72); }

.z-haken p { margin-top: 0.85rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }

@media (min-width: 60em) {
  .z-geld__raster { grid-template-columns: 6fr 5fr; gap: 4.5rem; align-items: center; }
  .z-rechner { padding: 2.25rem 2.25rem 2rem; }
}

/* --- Nutzen und Grenzen -------------------------------------------------- */

.z-grenzen { padding-block: var(--s2-y); }
.z-listen { display: grid; gap: 1.75rem; margin-top: 1.5rem; }
.z-listen__titel {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.z-liste { list-style: none; margin: 0; padding: 0; }
.z-liste li {
  position: relative;
  padding: 0.75rem 0 0.75rem 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.z-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 1.2rem;
  height: 1.2rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.z-liste--plus li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23E5D5B2'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 8.8' fill='none' stroke='%230E3B2E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.z-liste--nein li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.2' fill='none' stroke='%235A6F63' stroke-width='1.6'/%3E%3Cpath d='m8.6 8.6 6.8 6.8M15.4 8.6l-6.8 6.8' fill='none' stroke='%235A6F63' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.z-programm {
  margin-top: 1.75rem;
  padding: 1.1rem 1.2rem;
  background-color: var(--paper);
  border: 1px solid var(--rule-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 72ch;
}
.z-programm strong { color: var(--ink); font-weight: 650; }

@media (min-width: 60em) {
  .z-listen { grid-template-columns: 5fr 7fr; gap: 3.5rem; margin-top: 2.25rem; }
  .z-programm { margin-top: 2.25rem; padding: 1.3rem 1.5rem; }
}