@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --creme: #faf7f2; --papier: #fffdfa; --tinte: #26201b; --grau: #6b625a;
  --rost: #c9476b; --rost-dunkel: #ad3a59; --linie: #eae1d7; --gold: #c8a165;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Sprungmarken gleiten statt zu springen – auf der Inserieren-Seite führen die Reiter
   oben zu den drei Schritten, und ein harter Sprung lässt einen kurz nicht wissen,
   wo man gelandet ist. Wer Bewegung im System abgestellt hat, bekommt weiterhin den
   harten Sprung. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: var(--creme); color: var(--tinte); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.top { background: var(--creme); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.marke { font-size: 24px; font-weight: 600; }
.marke span { color: var(--rost); }
.top nav a { font-size: 14px; color: var(--grau); margin-left: 22px; }
.top nav a.cta { color: #fff; background: var(--tinte); padding: 9px 16px; border-radius: 99px; }

.hero { padding: 72px 0 56px; text-align: center; }
.hero h1 { font-weight: 800; font-size: clamp(34px, 6vw, 56px); line-height: 1.12; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--rost); }
.hero p.unter { color: var(--grau); margin: 16px auto 0; max-width: 560px; font-size: 17px; }
.suche { display: flex; gap: 8px; background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
         padding: 8px; max-width: 640px; margin: 32px auto 0; box-shadow: 0 12px 40px rgba(38,32,27,.07); }
.suche input, .suche select { border: 0; background: transparent; font: inherit; font-size: 16px; padding: 10px 12px; outline: none; }
.suche input { flex: 1; min-width: 0; }
.suche select { border-left: 1px solid var(--linie); color: var(--grau); max-width: 210px; }
.suche button { background: var(--rost); color: #fff; border: 0; font: inherit; font-weight: 600; padding: 12px 22px; border-radius: 10px; cursor: pointer; }
.suche button:hover { background: var(--rost-dunkel); }
.chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chips a { font-size: 14px; background: var(--papier); border: 1px solid var(--linie); border-radius: 99px; padding: 7px 14px; color: var(--grau); }
.chips a:hover { border-color: var(--rost); color: var(--rost); }
.chips a b { color: var(--tinte); font-weight: 600; }

section.block { padding: 44px 0; }
.block h2 { font-size: 30px; font-weight: 600; margin-bottom: 6px; }
.block p.deck { color: var(--grau); margin-bottom: 26px; }
.gewerke { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gewerke a { background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; padding: 18px; transition: .15s; }
.gewerke a:hover { border-color: var(--rost); transform: translateY(-2px); }
.gewerke .name { font-weight: 600; }
.gewerke .n { font-size: 13px; color: var(--grau); }

.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.karte { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; transition: .15s; display: flex; flex-direction: column; }
.karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(38,32,27,.10); }
.karte .foto { aspect-ratio: 3/2; background: linear-gradient(135deg, #efe6da, #e4d5c3); object-fit: cover; object-position: center 35%; width: 100%; display: block; }
.karte .inhalt { padding: 14px 16px 16px; flex: 1; }
.karte .kat { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--rost); font-weight: 600; }
.karte h3 { font-size: 19px; font-weight: 600; margin: 3px 0 4px; }
.karte .ort { font-size: 13.5px; color: var(--grau); }
.karte .ort .dist { color: var(--gold); font-weight: 600; }
.karte p.txt { font-size: 13.5px; color: var(--grau); margin-top: 8px; }

.brotkrumen { font-size: 13.5px; color: var(--grau); padding: 22px 0 0; }
.brotkrumen a:hover { color: var(--rost); }
.kopf { padding: 14px 0 34px; }
.kopf h1 { font-size: clamp(28px, 4.5vw, 42px); font-weight: 600; }
.kopf h1 em { font-style: normal; color: var(--rost); }
.kopf p { color: var(--grau); margin-top: 8px; max-width: 640px; }

.detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items: start; padding-bottom: 44px; }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.galerie picture, .karte picture { display: block; width: 100%; }
.galerie img { width: 100%; aspect-ratio: 3/2; object-fit: cover; object-position: center 35%; border-radius: 12px; display: block; }
.galerie > :first-child { grid-column: 1 / -1; }
.galerie > :first-child img, .galerie picture:first-child img { aspect-ratio: 3/2; }
.anbieter-hinweis { max-width: 720px; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 16px; padding: 20px 22px; margin-bottom: 36px; }
.anbieter-hinweis h2 { font-family: 'Merriweather', Georgia, serif; font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.anbieter-hinweis .chips { margin: 0; justify-content: flex-start; }
.chips a.aktiv { background: var(--tinte); color: var(--creme); border-color: var(--tinte); }
.chips a b { font-weight: 600; opacity: .55; margin-left: 3px; }
.chips a.aktiv b { opacity: .7; }
.verwandte { border-top: 1px solid var(--linie); padding-top: 30px; margin-bottom: 60px; }
.verwandte h2 { font-family: 'Merriweather', Georgia, serif; font-size: 21px; font-weight: 600; margin-bottom: 16px; }
.steckbrief { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px; padding: 22px; position: sticky; top: 80px; }
.steckbrief h2 { font-size: 24px; font-weight: 600; }
.steckbrief .zeile { display: flex; gap: 10px; font-size: 14.5px; padding: 9px 0; border-bottom: 1px solid var(--linie); }
.steckbrief .zeile:last-of-type { border: 0; }
.steckbrief .zeile b { min-width: 74px; color: var(--grau); font-weight: 500; }
.steckbrief a.web { display: block; text-align: center; background: var(--rost); color: #fff; font-weight: 600; border-radius: 10px; padding: 12px; margin-top: 14px; }
.steckbrief .sozial { display: flex; gap: 8px; margin-top: 12px; }
.steckbrief .sozial a { flex: 1; text-align: center; font-size: 13.5px; border: 1px solid var(--linie); border-radius: 8px; padding: 8px 4px; color: var(--grau); }
.steckbrief .sozial a:hover { border-color: var(--rost); color: var(--rost); }
.steckbrief .zeiten { margin-top: 16px; font-size: 13.5px; color: var(--grau); }
.steckbrief .zeiten b { display: block; color: var(--tinte); margin-bottom: 6px; font-weight: 600; }
.steckbrief .zeiten span { display: inline-block; width: 26px; color: var(--tinte); }
.beschreibung { margin-top: 26px; max-width: 640px; }
.beschreibung h2 { font-size: 22px; margin-bottom: 10px; }
.beschreibung p { color: #463d34; }

.leer { background: var(--papier); border: 1px dashed var(--linie); border-radius: 16px; padding: 34px; text-align: center; color: var(--grau); }
.artikel-hero { max-width: 720px; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; margin-bottom: 26px; display: block; }
.artikel { max-width: 720px; padding-bottom: 60px; color: #3d362f; }
.artikel p { margin-bottom: 16px; }
.artikel h2, .artikel h3, .artikel h4 { margin: 28px 0 10px; }
.artikel img { max-width: 100%; height: auto; border-radius: 12px; }
.artikel ul, .artikel ol { margin: 0 0 16px 22px; }
.artikel a { color: var(--rost); }
footer { border-top: 1px solid var(--linie); margin-top: 40px; padding: 30px 0 44px; color: var(--grau); font-size: 13.5px; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
/* Der Anbieter-Einstieg trägt als einziger Farbe – ein Link, sonst leuchtet nichts mehr. */
footer .anbieter { color: var(--rost); }
@media (max-width: 760px) {
  .detail { grid-template-columns: 1fr; }
  .suche { flex-wrap: wrap; }
  .suche select { border: 0; }
  .suche button { width: 100%; }
  .top nav a:not(.cta) { display: none; }
}


/* ---- Serifen: Playfair (groß) + Merriweather (klein) + warme Farbwelt ----------------- */




:root {
  /* Farbwelt: Basis Sebastian, Temperatur aus der Claude-Design-Vorlage (sandiger, tieferes Himbeerrot) */
  --creme: #f7f3ec; --papier: #fffdfa; --tinte: #1f1a17; --grau: #6f645c;
  --rost: #b8355a; --rost-dunkel: #8e2544; --linie: #e4d8c7; --gold: #e7cea6;
}
.marke, .hero h1, .kopf h1, .block h2, .karte h3, .steckbrief h2, .beschreibung h2,
.artikel h2, .artikel h3, .leer, .formular .fehler { font-family: 'Merriweather', Georgia, serif; }
.formular .fehler, .leer { font-family: inherit; }
.hero h1 { font-weight: 600; letter-spacing: 0; }
.hero h1 em, .kopf h1 em { font-style: italic; }
.karte h3 { font-size: 20px; }
.kopf h1 { font-weight: 600; }
.block h2 { font-weight: 600; }

.hero h1 { font-size: clamp(40px, 6.5vw, 64px); font-weight: 600; line-height: 1.08; }
.kopf h1 { font-size: clamp(32px, 5vw, 48px); }
.block h2 { font-size: 34px; }
.karte h3 { font-size: 23px; line-height: 1.15; }
.steckbrief h2 { font-size: 28px; }
.marke { font-size: 27px; font-weight: 700; }

.hero h1 { font-size: clamp(36px, 5.8vw, 56px); font-weight: 500; }
.kopf h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 500; }
.block h2 { font-size: 30px; font-weight: 500; }
.karte h3 { font-size: 20px; font-weight: 500; }
.steckbrief h2 { font-size: 25px; font-weight: 500; }
.marke { font-size: 25px; font-weight: 600; }

/* FAQ-Akkordeon */
.artikel details { background: var(--papier); border: 1px solid var(--linie); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.artikel details summary { cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none; position: relative; padding-right: 26px; }
.artikel details summary::after { content: '+'; position: absolute; right: 2px; top: -2px; font-size: 20px; color: var(--rost); }
.artikel details[open] summary::after { content: '–'; }
.artikel details p { margin: 10px 0 2px; }

/* Große Bühne: Playfair – kleine Überschriften: Merriweather (bleibt bei kleinen Graden lesbar) */
.karte h3, .steckbrief h2, .beschreibung h2, .artikel h2, .artikel h3, .artikel h4 {
  font-family: 'Merriweather', Georgia, serif; font-weight: 700;
}
.karte h3 { font-size: 16.5px; line-height: 1.3; }
.steckbrief h2 { font-size: 19px; }
.beschreibung h2, .artikel h2 { font-size: 21px; }
.artikel h3 { font-size: 17px; }
.artikel h4 { font-size: 15.5px; }

@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/merriweather-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/merriweather-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/merriweather-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Merriweather'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/merriweather-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Eine Serife für alles: Merriweather – groß im Normalschnitt, klein fett */
.hero h1 { font-weight: 400; font-size: clamp(34px, 5.4vw, 52px); line-height: 1.12; }
.kopf h1 { font-weight: 400; font-size: clamp(28px, 4.2vw, 40px); }
.block h2 { font-weight: 400; font-size: 28px; }
.marke { font-weight: 700; font-size: 23px; }

/* Kleine Überschriften: 600 statt 700 */
.karte h3, .steckbrief h2, .beschreibung h2, .artikel h2, .artikel h3, .artikel h4 { font-weight: 600; }

/* Kein Seiten-Versatz zwischen langen und kurzen Seiten: Scrollleisten-Platz fest reservieren */
html { scrollbar-gutter: stable; }

/* Premium-Karten */
.karte { position: relative; }
.karte-premium { border-color: var(--gold); box-shadow: 0 6px 22px rgba(200,161,101,.18); }
.premium-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--tinte); color: var(--gold);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 99px; }

/* Mobil: Suche gestapelt statt gequetscht */
@media (max-width: 560px) {
  .suche { flex-direction: column; gap: 6px; padding: 10px; }
  .suche input, .suche select { width: 100%; border-left: 0; max-width: none; }
  .suche select { border-top: 1px solid var(--linie); border-radius: 0; }
  .suche button { width: 100%; }
  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: clamp(28px, 8vw, 40px); }
  .kopf h1 { font-size: clamp(24px, 7vw, 34px); }
  .detail { gap: 20px; }
  .steckbrief { position: static; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .galerie > :first-child { grid-column: 1 / -1; }
  footer .wrap { flex-direction: column; gap: 6px; }
}

/* Auswahlfeld in der Suche: eigener Pfeil statt Systemoptik */
.suche select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236f645c' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px; color: var(--tinte); cursor: pointer;
}
.suche select:focus { outline: none; }

/* Verkaufsteil auf /inserieren – Argumente als Karten (Entwurf von Design, 29.7.) */
.verkauf { margin: 0 auto clamp(36px, 5vw, 56px); }
.verkauf h2.warum { font-family: Merriweather, Georgia, serif; font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 26px; }
/* Zwei nebeneinander, nicht drei: bei vier Argumenten stünde sonst eines allein
   in der zweiten Zeile. 2×2 geht auf. */
.verkauf .argumente { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .verkauf .argumente { grid-template-columns: 1fr; } }
.verkauf .arg { background: var(--papier); border: 1px solid var(--linie); border-radius: 14px; padding: 26px 24px; }
.verkauf .nr { display: block; font-family: Merriweather, Georgia, serif; font-weight: 700;
  font-size: 15px; color: var(--rost); margin-bottom: 12px; }
.verkauf .arg b { display: block; font-family: Merriweather, Georgia, serif; font-size: 19px;
  font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.verkauf .arg p { font-size: 14.5px; color: var(--grau); line-height: 1.65; }
.verkauf .arg i { font-style: normal; color: var(--rost); font-size: 13.5px;
  font-family: ui-monospace, Menlo, monospace; }
.verkauf .reichweite { background: var(--tinte); color: var(--creme); border-radius: 16px;
  padding: clamp(28px, 5vw, 48px); margin-top: 36px; }
.verkauf .reichweite b { display: block; font-family: Merriweather, Georgia, serif;
  font-size: clamp(22px, 3vw, 28px); font-weight: 600; color: var(--papier); }
.verkauf .reichweite p { font-size: 14.5px; color: #ded3c9; margin-top: 8px; line-height: 1.6; max-width: 560px; }
.verkauf .zahlen { display: flex; gap: clamp(24px, 5vw, 64px); margin-top: 26px; flex-wrap: wrap; }
.verkauf .zahlen div { font-size: 13.5px; color: var(--linie); }
.verkauf .zahlen span { display: block; font-family: Merriweather, Georgia, serif;
  font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--papier); line-height: 1.1; margin-bottom: 4px; }
.verkauf .schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; }
.verkauf .schritte div { padding: 2px; }
.verkauf .schritte span { display: inline-block; font: 12px/1 ui-monospace, Menlo, monospace;
  color: var(--rost); margin-bottom: 8px; }
.verkauf .schritte b { display: block; font-size: 15px; margin-bottom: 3px; }
.verkauf .schritte p { font-size: 13px; color: var(--grau); line-height: 1.5; }
@media (max-width: 560px) {
  .verkauf .schritte { grid-template-columns: 1fr; gap: 16px; }
  .verkauf .zahlen { gap: 20px; }
  }
.verkauf .nachfrage { font-size: 13.5px; color: var(--grau); margin-top: 14px; text-align: center; }
.verkauf .nachfrage a { color: var(--rost); font-weight: 600; }
.formular .zahlarten { font-size: 13.5px; color: var(--grau); margin-top: 14px; text-align: center; line-height: 1.6; }

/* ---- /inserieren: der Weg vom Argument bis zur Zahlung --------------------------------
   Nach dem Entwurf von Design (29.7.). Die Seite hatte alle Inhalte, aber keine
   Reihenfolge: vier Argumente, ein Kasten mit Zahlen, dann ein langes Formular, an
   dessen Ende irgendwann das Paket kam. Jetzt trägt jeder Schritt seine Nummer, oben
   läuft eine Fortschrittsleiste mit, rechts steht die Bestellung.
   Nebenbei löst die neue Reihenfolge ein altes Ärgernis: Weil das Paket zuerst gewählt
   wird, stehen Zeichen- und Bildgrenze fest, bevor jemand zu schreiben anfängt. */

/* Der Entwurf glättet die Schrift anders als der Rest der Seite. Das ist der Grund,
   warum derselbe Text dort feiner und klarer wirkt – die Größen sind identisch.
   Nur auf dieser Seite, damit die übrigen Seiten unverändert bleiben. */
body:has(.fortschrittsleiste) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Kopf: zentriert und luftig, damit vor dem Formular einmal durchgeatmet wird */
.anmeldekopf { max-width: 720px; margin: 0 auto; text-align: center;
  padding: clamp(36px, 6vw, 72px) 0 clamp(36px, 6vw, 64px); }
.anmeldekopf .kicker { font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grau); margin: 0 auto 14px;
  text-indent: .14em; }   /* .14em Sperrung sitzt auch hinter dem letzten Buchstaben */
/* Groß wie auf der Startseite: /inserieren ist im Grunde eine eigene Landingpage,
   nicht eine Unterseite – die auf 40px gedeckelte .kopf h1 war hier zu zaghaft. */
.anmeldekopf h1 { text-wrap: balance; font-size: clamp(32px, 5.4vw, 52px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.015em; }
.anmeldekopf p { margin: 16px auto 0; max-width: 520px; font-size: 17px; }
.ablauf { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin-top: 28px; }
.ablauf .stufe { background: var(--papier); border: 1px solid var(--linie); border-radius: 99px;
  padding: 6px 14px; font-size: 13.5px; font-weight: 500; }
.ablauf .pfeil { color: var(--grau); }
.ablauf .dauer { flex-basis: 100%; font-size: 13px; color: var(--grau); margin-top: 4px; }

/* Fortschrittsleiste: sagt jederzeit, wo man steht. Erst ab Tablet – auf dem Telefon
   ist für zwei Leisten kein Platz, dort führt die Leiste am unteren Rand.
   Auf dieser Seite scrollt der Seitenkopf weg und nur die Leiste bleibt oben –
   sonst stünden zwei Leisten übereinander. Ohne :has() bleibt es beim alten
   Verhalten (Kopf klebt, Leiste darunter), das ist ein brauchbarer Rückfall. */
.fortschrittsleiste { display: none; }
@media (min-width: 761px) {
  /* Nur wo die Leiste wirklich sichtbar ist – mobil bleibt der Seitenkopf klebend,
     sonst verliert man beim Scrollen den Weg zurück zur Startseite. */
  body:has(.fortschrittsleiste) header.top { position: static; }
  .fortschrittsleiste { display: block; position: sticky; top: 59px; z-index: 4;
    background: rgba(247, 243, 236, .95); backdrop-filter: blur(4px);
    border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
  body:has(.fortschrittsleiste) .fortschrittsleiste { top: 0; border-top: 0; }
  body:has(.fortschrittsleiste) .bestellung { top: 62px; }
  body:has(.fortschrittsleiste) .schritt[id],
  body:has(.fortschrittsleiste) .verkauf[id] { scroll-margin-top: 62px; }
  /* gleiche Maße wie .wrap, damit die Marken unter dem Logo bündig stehen */
  .fortschrittsleiste .innen { max-width: 1080px; margin: 0 auto; padding: 0 20px; display: flex;
    gap: clamp(10px, 3vw, 28px); overflow-x: auto; }
  .fortschrittsleiste a { display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
    padding: 12px 2px 10px; border-bottom: 2px solid transparent; color: var(--grau); flex: none; }
  .fortschrittsleiste a span { font-family: Merriweather, Georgia, serif; font-size: 12px; }
  .fortschrittsleiste a b { font-size: 13.5px; font-weight: 400; }
  .fortschrittsleiste a.hier { border-bottom-color: var(--rost); color: var(--rost); }
  .fortschrittsleiste a.hier b { color: var(--tinte); font-weight: 600; }
}

.anmeldung { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px;
  align-items: start; padding-bottom: 80px; }
.anmeldung .formular { max-width: none; margin: 0; padding-bottom: 0; }

/* Jeder Schritt trägt seine Nummer – daran sieht man, wo man steht und was noch kommt */
.schritt { margin-top: clamp(40px, 6vw, 66px); }
.schritt:first-of-type { margin-top: 0; }
.schritt[id], .verkauf[id] { scroll-margin-top: 108px; }   /* sonst rutscht das Ziel unter Kopf und Leiste */
/* nicht .marke nennen – so heißt die Wortmarke im Seitenkopf, und die zieht
   Merriweather mit sich; die Schrittangabe gehört in die Grotesk. */
.schritt .schrittnr { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rost); margin-bottom: 6px; }
.schritt > h2 { font-family: Merriweather, Georgia, serif; font-weight: 600;
  font-size: clamp(24px, 3.4vw, 30px); }
.schritt > .deck { font-size: 14px; color: var(--grau); margin-top: 6px; }
/* Erklärung auf Abruf: als Zeile unter der Überschrift wird sie überlesen und
   kostet Platz, hier steht sie da, wo die Frage aufkommt. */
/* zwei Klassen tief: ".formular button" macht daraus sonst einen roten Balken
   über die volle Breite – die Regel gilt für den Bezahlknopf. */
.schritt .info { appearance: none; border: 1px solid var(--linie); background: var(--papier);
  color: var(--grau); width: 20px; height: 20px; min-width: 20px; border-radius: 50%; padding: 0;
  margin: 0 0 0 8px; font: 600 12px/1 "Plus Jakarta Sans", sans-serif; cursor: help;
  vertical-align: middle; position: relative; display: inline-flex;
  align-items: center; justify-content: center; }
.schritt .info:hover, .schritt .info:focus-visible { background: var(--rost); border-color: var(--rost);
  color: var(--papier); outline: none; }
.schritt .info::after { content: attr(data-info); position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%); width: max-content; max-width: 280px; text-align: left;
  background: var(--tinte); color: var(--creme); font: 400 13px/1.5 "Plus Jakarta Sans", sans-serif;
  padding: 10px 13px; border-radius: 10px; box-shadow: 0 8px 24px rgba(31,26,23,.18);
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 10; pointer-events: none; }
.schritt .info:hover::after, .schritt .info:focus::after { opacity: 1; visibility: visible; }
/* Auf schmalen Schirmen richtet sich die Erklärung an der Überschrift aus, nicht am
   Knopf: Der Knopf steht mitten im Text, und eine 280 Pixel breite Blase daneben ragt
   über den rechten Rand. Sie ist zwar unsichtbar, zählt aber trotzdem zur Seitenbreite –
   dadurch ließ sich die ganze Seite seitwärts schieben. */
@media (max-width: 560px) {
  .schritt > h2 { position: relative; }
  .schritt .info { position: static; }
  .schritt .info::after { left: 0; right: 0; width: auto; max-width: none; transform: none; }
}

/* Die Felder liegen zusammen auf einer Fläche – das macht Schritt 2 als Block sichtbar */
.feldkasten { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
  padding: clamp(22px, 4vw, 34px); margin-top: 22px; }
.formular .feldkasten > label:first-child { margin-top: 0; }
/* Die entstehende Adresse als Pfad gesetzt: fest steht, was fest ist, und was
   der Name daraus macht, hebt sich ab. */
.adresse { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--grau); }
.adresse b { color: var(--tinte); font-weight: 600; }
.formular .drei { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 14px; align-items: end; }
.nebenbei { font-weight: 400; color: var(--grau); }

/* Bilder: eine Fläche zum Anklicken statt des nackten Dateifelds */
.bildfeld { display: block; border: 1px dashed var(--linie); border-radius: 12px;
  padding: 22px 16px; text-align: center; cursor: pointer; background: var(--creme);
  margin: 0; transition: border-color .15s; }
.bildfeld:hover { border-color: var(--rost); }
.bildfeld > b { display: block; font-size: 14.5px; font-weight: 600; }
.bildfeld span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--grau); }
.bildfeld span b { font-weight: 600; color: var(--tinte); }   /* nicht block: sonst bricht die Zeile */
.formular .bildfeld + input[type=file] { display: none; }

/* Restplätze am Paket – erscheint, sobald Gewerk und Ort bekannt sind */
.platzhinweis { display: block; font-size: 12.5px; font-weight: 600; margin-top: 6px; color: var(--gold); }
.platzhinweis[hidden] { display: none; }    /* display:block würde [hidden] sonst übersteuern */
.platzhinweis.leer { color: var(--rost); }
.paket.vergeben { opacity: .55; }

.abschluss { background: var(--papier); border: 1px solid var(--linie); border-radius: 16px;
  padding: clamp(22px, 4vw, 34px); margin-top: 22px; }
.abschluss .gewaehlt { font-size: 14.5px; color: var(--grau); }
.abschluss .gewaehlt b { color: var(--tinte); }
.abschluss .gewaehlt .summe { font-family: Merriweather, Georgia, serif; font-weight: 600; color: var(--tinte); }
.formular .abschluss button { margin-top: 16px; width: 100%; max-width: 380px; border-radius: 12px; padding: 15px 24px; }
.formular .abschluss .zahlarten { text-align: left; }
.abschluss .kleingedrucktes { margin-top: 18px; border-top: 1px solid var(--linie); padding-top: 16px; }

/* Die Zustimmung: bewusst kein Kleingedrucktes, sondern gleichwertig zum Rest.
   Der Kasten ist groß genug, dass die ganze Zeile das Häkchen setzt. */
.abschluss .zustimmung { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px;
  padding: 16px 18px; background: var(--weiss, #fffdfa); border: 1px solid var(--linie);
  border-radius: 12px; cursor: pointer; font-size: 14.5px; line-height: 1.6; }
.abschluss .zustimmung input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; cursor: pointer;
  accent-color: var(--rost); }
.abschluss .zustimmung b { color: var(--tinte); }
.abschluss .zustimmung:hover { border-color: var(--rost); }
/* Ohne Häkchen kein Vertrag – das darf man sehen, sobald der Browser es bemängelt. */
.abschluss .zustimmung:has(input:invalid) { border-color: var(--rost); }

/* Mitlaufende Bestellung: zeigt jederzeit, was gebucht wird und was noch fehlt */
/* z-index unter der Fortschrittsleiste: sonst schiebt sich die klebende Spalte
   beim Scrollen über sie, weil sie im Markup später kommt. */
/* margin-top 88px = Schrittzeile + Überschrift + Kachel-Abstand links: so liegt die
   Oberkante bündig auf der ersten Paketkarte. Nur relevant ab 901px – darunter ist
   die Spalte ausgeblendet. */
.bestellung { position: sticky; top: 108px; z-index: 1; background: var(--papier);
  border: 1px solid var(--linie); border-radius: 16px; padding: 26px; margin-top: 88px; }
.bestellung .kicker { font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grau); }
.bestellung .name { font-family: Merriweather, Georgia, serif; font-weight: 600; font-size: 19px;
  line-height: 1.3; margin-top: 14px; }
.bestellung .summe { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.bestellung .summe b { font-family: Merriweather, Georgia, serif; font-weight: 600; font-size: 28px; }
.bestellung .summe span { font-size: 13px; color: var(--grau); }
.bestellung ul { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linie); }
.bestellung ul li { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.5; padding: 4px 0; }
.bestellung ul li::before { content: "✓"; color: var(--rost); flex: none; font-weight: 700; }
.bestellung .fortschritt { border-top: 1px solid var(--linie); border-bottom: 0;
  margin-top: 16px; padding-top: 14px; }
.bestellung .fortschritt li { justify-content: space-between; font-size: 13px; }
.bestellung .fortschritt li::before { content: none; }
.bestellung .fortschritt li i { font-style: normal; color: var(--grau); text-align: right; }
.bestellung .fortschritt li.fertig i { color: var(--rost); font-weight: 600; }
.bestellung .weiter { display: block; text-align: center; margin-top: 18px; border: 1px solid var(--rost);
  color: var(--rost); font-weight: 600; font-size: 14px; border-radius: 12px; padding: 11px 16px;
  transition: background .15s, color .15s; }
.bestellung .weiter:hover { background: var(--rost); color: var(--papier); }

/* Mobil ersetzt eine Leiste am unteren Rand die Spalte rechts */
.abschlussleiste { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--papier); border-top: 1px solid var(--linie);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); align-items: center;
  justify-content: space-between; gap: 12px; }
.abschlussleiste .was { min-width: 0; }
.abschlussleiste .was b { display: block; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abschlussleiste .was span { font-family: Merriweather, Georgia, serif; font-weight: 600; font-size: 16px; }
.abschlussleiste .was em { font-style: normal; font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11.5px; font-weight: 400; color: var(--grau); }
.abschlussleiste a { flex: none; background: var(--rost); color: var(--papier); font-weight: 600;
  font-size: 14px; border-radius: 12px; padding: 12px 18px; }

@media (max-width: 900px) {
  /* minmax(0, …) statt 1fr: Eine 1fr-Spalte wird nie schmaler als ihr Inhalt.
     Ein einzelnes zu breites Element im Formular hätte sonst das ganze Raster
     über den Fensterrand hinausgezogen. */
  .anmeldung { grid-template-columns: minmax(0, 1fr); padding-bottom: 98px; }
  .bestellung { display: none; }
  .abschlussleiste { display: flex; }
  .schritt[id], .verkauf[id] { scroll-margin-top: 72px; }
}
@media (max-width: 560px) {
  .formular .drei { grid-template-columns: 1fr; gap: 0; }
}
.kopf { position: relative; }
.kopf .siegel { position: absolute; top: 62px; right: 0; display: inline-flex; align-items: center; gap: 6px;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 99px; padding: 5px 14px 5px 11px;
  font-size: 13px; font-weight: 600; color: var(--tinte); white-space: nowrap; }
.kopf .siegel svg { color: var(--rost); flex: none; }
@media (max-width: 700px) {
  .kopf .siegel { position: static; margin-top: 14px; }
}

/* Lupe: Bild groß ansehen. Natives <dialog>, deshalb kommt das Abdunkeln
   des Hintergrunds vom Browser (::backdrop) und Escape schließt von selbst. */
#lupe { border: 0; padding: 0; background: none; max-width: 100vw; max-height: 100vh;
        width: 100%; height: 100%; overflow: hidden;
        display: grid; place-items: center; }        /* Bild sitzt senkrecht mittig */
#lupe:not([open]) { display: none; }
#lupe::backdrop { background: rgba(31, 26, 23, .93); }
#lupe img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; display: block;
            border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.55); }

/* Bedienelemente in der Formensprache der Seite: runde, cremefarbene Flächen
   mit feiner Linie – wie die Chips und Karten. */
#lupe button { position: fixed; width: 48px; height: 48px; border-radius: 50%;
  background: var(--creme); color: var(--tinte); border: 1px solid rgba(31,26,23,.12);
  cursor: pointer; display: grid; place-items: center; padding: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: background .15s, transform .15s; }
#lupe button:hover { background: #fff; transform: scale(1.06); }
#lupe button:active { transform: scale(.96); }
#lupe button svg { width: 18px; height: 18px; }
.lupe-zu { top: 22px; right: 22px; }
.lupe-blaettern[data-richtung="-1"] { left: 22px; top: 50%; margin-top: -24px; }
.lupe-blaettern[data-richtung="1"]  { right: 22px; top: 50%; margin-top: -24px; }
.lupe-zaehler { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  color: var(--creme); font-size: 13px; margin: 0; letter-spacing: .06em;
  background: rgba(31,26,23,.55); padding: 6px 14px; border-radius: 99px;
  font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  #lupe img { max-width: 100vw; max-height: 74vh; border-radius: 0; }
  #lupe button { width: 42px; height: 42px; }
  .lupe-zu { top: 14px; right: 14px; }
  .lupe-blaettern[data-richtung="-1"] { left: 10px; }
  .lupe-blaettern[data-richtung="1"]  { right: 10px; }
  .lupe-zaehler { bottom: 18px; }
}

/* Linkliste für die Instagram-Bio: große Flächen, wenig Text, alles antippbar */
.artikel .einleitung { font-size: 17px; color: var(--grau); margin-bottom: 24px; }
.linkliste { display: grid; gap: 10px; margin-bottom: 36px; }
.linkliste a { display: block; background: var(--papier); border: 1px solid var(--linie);
  border-radius: 14px; padding: 16px 18px; color: var(--tinte); transition: border-color .15s, transform .15s; }
.linkliste a:hover { border-color: var(--rost); transform: translateY(-1px); }
.linkliste a b { display: block; font-family: 'Merriweather', Georgia, serif; font-size: 16px; margin-bottom: 3px; }
.linkliste a span { display: block; font-size: 14px; color: var(--grau); line-height: 1.45; }
.linkliste a.haupt { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
.linkliste a.haupt span { color: rgba(250, 247, 242, .72); }
.linkliste a.haupt:hover { border-color: var(--rost); }
.linkliste a.dienstleister { border-color: var(--gold); border-style: dashed; }

/* Woher die Reihenfolge kommt – muss von der Ergebnisliste aus erreichbar sein,
   soll aber nicht nach Inhalt aussehen: kleiner, blasser, Link nur unterstrichen */
.sortierhinweis { font-size: 12px; color: #a89c92; margin-top: 18px; line-height: 1.6; }
.sortierhinweis a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sortierhinweis a:hover { color: var(--grau); }