/* Anfragenseite (v17, 04.10.2026): gefuehrte Anfrage in fuenf Schritten. Bausteine: Kacheln, Chips, Stepper, Vorschlag,
   Modus (gesamt oder je Aufstellort), Angebot nach Bereichen, Aufstellorte, Kontakt, Zusammenfassung, Fortschrittsleiste unten, Druckansicht. */

body.anfrage-seite { padding-bottom: 0; }
.anf .schritt { scroll-margin-top: 84px; }
.anf .schritt .kopfzeile { scroll-margin-top: 118px; }
.anf .schritt.neu { animation: anfRein .7s var(--ease-in-out) both; }
@keyframes anfRein { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.anf .feld-titel, .anf .feld > label { display: block; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.anf .hilfe { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: 40em; }

/* Kopf: Automat freigestellt wie auf den anderen Unterseiten */
.anf .kopf13 .bild.frei > img { max-height: 560px; width: auto; margin-inline: auto; }

/* Schritt 1: Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; font: inherit; color: var(--ink);
  transition: transform 220ms var(--ease-in-out), border-color 220ms, box-shadow 220ms; }
.ufer-weiss .kachel { background: var(--paper); }
.kachel:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(15,51,25,.45); border-color: var(--green-light); }
.kachel .symbol { width: 52px; height: 52px; border-radius: 16px; background: var(--green-tint); display: grid; place-items: center; margin-bottom: 8px; transition: background-color 220ms; }
.kachel .symbol svg { width: 28px; height: 28px; fill: none; stroke: var(--green-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kachel b { font-size: 18px; line-height: 1.25; }
.kachel span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.kachel .haken { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; }
.kachel.aktiv { border-color: var(--green-2); box-shadow: 0 0 0 2px var(--green-2), 0 22px 40px -28px rgba(15,51,25,.45); }
.kachel.aktiv .symbol { background: var(--green-2); }
.kachel.aktiv .symbol svg { stroke: #fff; }
.kachel.aktiv .haken { background: var(--green-2); border-color: var(--green-2); }
.kachel.aktiv .haken::after { content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sonst-feld { margin-top: var(--s-5); max-width: 520px; }
.anf input[type="text"], .anf input[type="number"], .anf input[type="email"], .anf input[type="tel"], .anf input:not([type]), .anf select, .anf textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 16px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.anf input:focus, .anf select:focus, .anf textarea:focus { outline: none; border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(53,172,84,.18); }
.anf [aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(235,80,70,.15) !important; }

/* Weiter */
.weiter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: var(--s-7); }
.weiter .knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.weiter-hinweis { font-size: 14px; color: var(--muted); }

/* Schritt 2: Bedarf */
.bedarf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.bedarf .personen-feld { grid-column: 1 / -1; }
.zahl-zeile { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; max-width: 760px; }
.zahl-zeile input[type="number"] { font: 800 30px/1 var(--font-display); color: var(--green-2); padding: 12px 16px; }
.zahl-zeile input[type="number"]::placeholder { font: 400 18px/1.2 var(--font-body); color: #9aa8a0; }
.zahl-zeile input[type="range"] { width: 100%; accent-color: var(--green-2); height: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 600 15px/1 var(--font-body); padding: 12px 18px; border-radius: var(--pill); cursor: pointer;
  transition: background-color 180ms, color 180ms, border-color 180ms, transform 160ms; }
.chips button:hover { border-color: var(--green-light); }
.chips button:active { transform: scale(.97); }
.chips button.aktiv { background: var(--green-2); color: #fff; border-color: var(--green-2); }
.chips.klein { margin-top: 10px; }
.chips.klein button { font-size: 13px; padding: 8px 13px; background: transparent; }
#tage button { min-width: 54px; justify-content: center; }
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: var(--pill); background: #fff; overflow: hidden; }
.stepper button { width: 46px; height: 46px; border: 0; background: transparent; font: 600 22px/1 var(--font-body); color: var(--green-2); cursor: pointer; }
.stepper button:hover { background: var(--green-tint); }
.stepper output { min-width: 44px; text-align: center; font: 800 22px/1 var(--font-display); color: var(--ink); }
.stepper.mini button { width: 34px; height: 34px; font-size: 18px; }
.stepper.mini output { min-width: 28px; font-size: 17px; }

/* Schritt 3: Vorschlag, Modus, Geraete, Aufstellorte */
.vorschlag { background: var(--green-tint); border-radius: 32px; padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px 36px; align-items: start; }
.vorschlag .stichwort-klein { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-2); margin-bottom: 8px; }
.vorschlag-satz { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.4; }
.vorschlag-satz b { color: var(--green-2); }
.vorschlag .regeln { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.vorschlag .regeln li { position: relative; padding-left: 18px; }
.vorschlag .regeln li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.vorschlag-aktion { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.vorschlag-aktion .uebernommen { font-size: 14px; font-weight: 700; color: var(--green-2); }
.vorschlag-aktion .uebernommen::before { content: "✓ "; }
.profil-link { font-size: 14px; font-weight: 700; color: var(--green-2); text-decoration: none; }
.modus { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; margin: var(--s-6) 0 var(--s-4); background: var(--paper); border: 1.5px solid var(--line); border-radius: 22px; }
.modus button { border: 0; background: transparent; border-radius: 16px; padding: 12px 22px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.modus button b { display: block; font-size: 16px; }
.modus button span { display: block; font-size: 13px; color: var(--muted); }
.modus button.aktiv { background: #fff; box-shadow: 0 8px 20px -14px rgba(15,51,25,.55); }
.modus button.aktiv b { color: var(--green-2); }
.anf .rondell { margin-top: var(--s-4); }
.geraete-liste { margin-top: var(--s-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 16px; }
.gl-kopf { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 4px; }
.gl-kopf .feld-titel { margin: 0; }
.gl-kopf b { color: var(--green-2); }
.gl-zeile { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: 10px 12px 10px 10px; transition: border-color 200ms, background-color 200ms; }
.gl-zeile img { width: 54px; height: 64px; object-fit: contain; }
.gl-zeile b { display: block; font-size: 15.5px; }
.gl-zeile span { display: block; font-size: 13px; color: var(--muted); }
.gl-zeile.an { border-color: var(--green-light); background: #fff; }
.gl-zeile.blink { animation: anfBlink 1s var(--ease-in-out); }
@keyframes anfBlink { 0% { box-shadow: 0 0 0 0 rgba(53,172,84,.55); } 100% { box-shadow: 0 0 0 14px rgba(53,172,84,0); } }
.orte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: var(--s-4) 0 var(--s-4); }
.orte-kopf b { font-size: 18px; color: var(--green-2); }
.orte-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.ort { background: var(--paper); border: 1.5px solid var(--line); border-radius: 26px; padding: 16px 18px 18px; }
.ort-kopf { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.ort-nr { width: 30px; height: 30px; border-radius: 50%; background: var(--green-2); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.anf .ort-name { font-weight: 700; padding: 10px 14px; border-radius: 12px; }
.ort-weg { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 20px; line-height: 1; color: var(--muted); cursor: pointer; }
.ort-weg:hover:not([disabled]) { color: var(--red); border-color: var(--red); }
.ort-weg[disabled] { opacity: .35; cursor: default; }
.ort-geraete { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.og { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 8px; border-radius: 16px; border: 1.5px solid transparent; text-align: center; }
.og img { width: 34px; height: 46px; object-fit: contain; opacity: .55; transition: opacity 200ms; }
.og span { font-size: 12px; line-height: 1.2; color: var(--muted); min-height: 2.4em; display: flex; align-items: center; }
.og.an { background: #fff; border-color: var(--line); }
.og.an img { opacity: 1; }
.og.an span { color: var(--ink); font-weight: 600; }
.ort-best { margin-top: 12px; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.ort-best em { font-style: normal; color: var(--green-2); }
.chips.mini button { font-size: 12.5px; padding: 7px 11px; }
.chips.mini .zurueck { background: transparent; border-style: dashed; color: var(--muted); }

/* Schritt 4: Bestueckung */
.auswahl-band { margin-top: var(--s-6); background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 22px 24px; }
.chips.gewaehlt button { display: inline-flex; align-items: center; gap: 8px; }
.chips.gewaehlt button span { font-weight: 700; }
.mini-symbol svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.anf .schritt .feld { margin-top: var(--s-5); }
.anf .bedarf .feld { margin-top: 0; }
.rk-links .knopf.gewaehlt { color: var(--green-2); box-shadow: inset 0 0 0 2px var(--green-light); }

/* Schritt 5: Kontakt */
form.kontakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--s-6); background: var(--paper); border: 1.5px solid var(--line); border-radius: 40px; padding: clamp(22px, 3vw, 40px); }
form.kontakt .feld { margin-top: 12px; }
form.kontakt .feld > label { font-size: 14px; margin-bottom: 6px; }
form.kontakt .breit { grid-column: 1 / -1; }
form.kontakt label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); margin-top: 14px; }
form.kontakt label.check input { width: auto; margin: 3px 0 0; accent-color: var(--green-2); flex: none; }
form.kontakt label.check a { color: var(--green-2); }
.fehler { color: var(--red-dark); font-size: 14px; font-weight: 600; margin-top: 10px; }

/* Schritt 6: Zusammenfassung */
.zusammenfassung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zf-druckkopf { display: none; }
.zf-block { background: #fff; border: 1.5px solid var(--line); border-radius: 28px; padding: 20px 24px 22px; }
.zf-block:nth-child(4) { grid-column: 1 / -1; }
.zf-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.zf-kopf h3 { font-size: 22px; color: var(--green-2); }
.zf-aendern { border: 0; background: none; font: 700 13.5px/1 var(--font-body); color: var(--green-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.zf-block p { font-size: 15.5px; }
.zf-klein { margin-top: 8px; font-size: 14px !important; color: var(--muted); }
.zf-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.zf-dl dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.zf-dl dd { margin: 2px 0 0; font-weight: 700; }
.zf-geraete { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.zf-geraete li { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
.zf-geraete img { width: 30px; height: 40px; object-fit: contain; }
.zf-orte { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; }
.zf-orte th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px; border-bottom: 1.5px solid var(--line); }
.zf-orte td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.zf-orte td:first-child { font-weight: 700; }
.senden-leiste { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s-6); }
.meldung { margin-top: 16px; padding: 14px 18px; border-radius: 16px; font-size: 15px; background: var(--green-tint); color: var(--ink); max-width: 48em; }
.meldung.fehler { background: #fdecea; color: var(--red-dark); }
.danke { margin-top: var(--s-6); background: var(--green-2); color: #fff; border-radius: 32px; padding: 30px 34px; }
.danke h3 { color: #fff; font-size: 32px; }
.danke p { margin-top: 8px; font-size: 18px; }
.person-band { display: flex; gap: 16px; align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.person-band img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.person-band span { display: block; font-size: 13.5px; color: var(--muted); }
.person-band b { display: block; font-size: 17px; }
.person-band a { color: var(--green-2); font-weight: 600; text-decoration: none; }

/* Fortschrittsleiste unten */
.anf-leiste { position: fixed; left: 0; right: 0; bottom: 14px; z-index: 60; pointer-events: none; }
.anf-leiste[hidden] { display: none; }
.anf-leiste .wrap { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: min(980px, 100% - 24px);
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--pill);
  padding: 8px 8px 8px 18px; box-shadow: 0 20px 44px -26px rgba(15,51,25,.55); }
.anf-leiste ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.anf-leiste ol::-webkit-scrollbar { display: none; }
.anf-leiste li button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 10px; border-radius: var(--pill); font: 600 13.5px/1 var(--font-body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.anf-leiste li button i { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.anf-leiste li button.fertig i { background: var(--green-tint); border-color: var(--green-light); color: var(--green-2); }
.anf-leiste li button.aktiv { color: var(--ink); background: var(--green-tint); }
.anf-leiste li button.aktiv i { background: var(--green-2); border-color: var(--green-2); color: #fff; }
.anf-leiste li button[disabled] { opacity: .45; cursor: default; }
.knopf.klein { padding: 11px 18px; font-size: 14.5px; }
.anf-leiste .knopf[disabled] { opacity: .45; cursor: not-allowed; }
body.anfrage-seite footer { padding-bottom: calc(var(--s-6) + 70px); }

@media (max-width: 900px) {
  .bedarf { grid-template-columns: 1fr; }
  .vorschlag { grid-template-columns: 1fr; padding: 22px; }
  .zusammenfassung { grid-template-columns: 1fr; }
  .orte-liste { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .kacheln { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kachel { padding: 16px 14px 18px; }
  .kachel b { font-size: 16px; }
  .kachel span { font-size: 12.5px; }
  .kachel .symbol { width: 44px; height: 44px; border-radius: 13px; }
  .kachel .haken { top: 12px; right: 12px; width: 22px; height: 22px; }
  .kachel.aktiv .haken::after { left: 6.5px; top: 3px; width: 5px; height: 10px; }
  .zahl-zeile { grid-template-columns: 1fr; gap: 12px; }
  .modus { display: grid; width: 100%; }
  .modus button { padding: 10px 14px; }
  .geraete-liste { grid-template-columns: 1fr; }
  .ort-geraete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  form.kontakt { grid-template-columns: 1fr; border-radius: 28px; }
  .senden-leiste .knopf { flex: 1 1 100%; justify-content: center; }
  .anf-leiste .wrap { padding-left: 10px; }
  .anf-leiste li button span { display: none; }
  .anf-leiste li button.aktiv span { display: inline; }
}

/* v17 (04.10.2026): Schritt 3 "Ihr Angebot, nach Bereichen". Vier Bereiche zum Aufklappen (Kaffee, Getraenke und Snacks,
   Convenience, Eis), darin je Option ein Geraet mit Bild, kurzem Text und Anzahl. Beim Warenautomaten ist die Option die Bestueckung. */
.angebot17-leiste { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin: var(--s-6) 0 var(--s-5); }
.angebot17-leiste .modus { margin: 0; }
.angebot17-hinweis { margin: 0; max-width: 32em; font-size: 14px; line-height: 1.45; color: var(--muted); }
.angebot17-hinweis b { color: var(--ink); }
.angebot17-summe { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 12px 4px; }
.angebot17-summe span { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.angebot17-summe b { font: 800 20px/1.25 var(--font-display); color: var(--green-2); }

.bereiche17 { display: grid; gap: 12px; }
.br17 { background: var(--paper); border: 1.5px solid var(--line); border-radius: 28px; transition: border-color 220ms, box-shadow 220ms, background-color 220ms; }
.br17.an { background: #fff; border-color: var(--green-light); box-shadow: 0 26px 50px -42px rgba(15,51,25,.6); }
.br17-kopf { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 24px 16px 16px;
  border: 0; border-radius: 28px; background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.br17-kopf:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.br17-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--green-tint); display: grid; place-items: center; transition: background-color 220ms; }
.br17-icon svg { width: 28px; height: 28px; fill: none; stroke: var(--green-2); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.br17.an .br17-icon { background: var(--green-2); }
.br17.an .br17-icon svg { stroke: #fff; }
.br17-titel b { display: block; font: 800 20px/1.2 var(--font-display); }
.br17-titel > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.br17-zahl { white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--green-2); background: var(--green-tint); border: 1.5px solid transparent; border-radius: var(--pill); padding: 7px 14px; }
.br17:not(.an) .br17-zahl { background: #fff; border-color: var(--line); color: var(--muted); }
.br17-kopf:hover .br17-zahl { border-color: var(--green-light); color: var(--green-2); }
.br17-pfeil { width: 11px; height: 11px; border: solid var(--green-2); border-width: 0 2.5px 2.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform 220ms var(--ease-in-out); }
.br17.offen .br17-pfeil { transform: translateY(2px) rotate(-135deg); }
.br17-optionen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 16px 16px; }
.br17-optionen[hidden] { display: none; }
.br17.offen .br17-optionen { animation: br17Auf .35s var(--ease-in-out) both; }
@keyframes br17Auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.op17 { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  padding: 10px 14px 10px 10px; transition: border-color 200ms, box-shadow 200ms; }
.op17.an { border-color: var(--green-2); box-shadow: inset 0 0 0 1px var(--green-2); }
.op17-bild { display: block; width: 72px; height: 96px; }
.op17-bild img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(15,51,25,.16)); }
.op17-text { min-width: 0; }
.op17-text small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.op17-text b { display: block; margin-top: 2px; font-size: 16.5px; line-height: 1.25; }
.op17-text > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.op17 .stepper button { width: 40px; height: 40px; }
.op17 .stepper output { min-width: 32px; font-size: 19px; }
.op17:not(.an) .stepper output { color: var(--muted); }

/* Je Aufstellort */
.ort17 { display: flex; flex-direction: column; gap: 10px; }
.ort17-liste { display: grid; gap: 8px; }
.ort17-zeile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px 8px; }
.ort17-zeile img { width: 36px; height: 46px; object-fit: contain; }
.ort17-zeile small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green-2); }
.ort17-zeile b { display: block; font-size: 14.5px; line-height: 1.25; }
.ort17-leer { margin: 2px 4px; font-size: 14px; color: var(--muted); }
.anf select.ort-plus { padding: 10px 14px; border-style: dashed; border-radius: 14px; font-size: 14.5px; font-weight: 600; color: var(--green-2); cursor: pointer; }

.wuensche17 { margin-top: var(--s-6); max-width: 760px; }
.wuensche17 textarea { min-height: 0; }

/* Kontakt (Schritt 4) und Zusammenfassung (Schritt 5) mit wechselndem Hintergrund */
.schritt:not(.ufer-weiss) form.kontakt { background: #fff; }
.ufer-weiss .zf-block { background: var(--paper); }
.zf-bereich + .zf-bereich { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.zf-bereich > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 900px) {
  .br17-optionen { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .angebot17-hinweis { font-size: 13px; }
  .br17 { border-radius: 22px; }
  .br17-kopf { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; padding: 12px 12px 12px 10px; border-radius: 22px; }
  .br17-pfeil { display: none; }
  .br17-icon { width: 44px; height: 44px; border-radius: 13px; }
  .br17-icon svg { width: 24px; height: 24px; }
  .br17-titel b { font-size: 17.5px; }
  .br17-titel > span { font-size: 12.5px; }
  .br17-zahl { padding: 6px 10px; font-size: 12.5px; }
  .br17-optionen { padding: 0 10px 10px; gap: 8px; }
  .op17 { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 12px; padding: 10px; }
  .op17-bild { width: 56px; height: 78px; grid-row: span 2; }
  .op17 .stepper { justify-self: start; }
}
@media print {
  .zf-bereich + .zf-bereich { border-top-color: #ddd; }
}

/* Druck: nur die Zusammenfassung */
@media print {
  .topbar, .kopf13, .schritt:not(#schritt-5), .anf-leiste, footer, .vermerk, .senden-leiste, .meldung, .person-band, #schritt-5 .kopfzeile p, .zf-aendern, .seitennav { display: none !important; }
  body, .anf .schritt { background: #fff !important; }
  #schritt-5 { padding: 0 !important; display: block !important; }
  #schritt-5 .kopfzeile .stichwort { display: none !important; }
  .zf-druckkopf { display: flex; justify-content: space-between; align-items: center; grid-column: 1 / -1; margin-bottom: 8px; }
  .zf-druckkopf img { height: 40px; }
  .zf-block { break-inside: avoid; border-color: #ccc; }
  .traeger { color: #28803D; }
  .traeger::before { display: none; }
}