/* ============================================================================
   handysicht.css — alles, was nur auf Telefon und schmalem Tablet gilt
   Brandpool 2.1 · angelegt 14.08.2026
   ----------------------------------------------------------------------------
   WARUM EINE EIGENE DATEI, und zwar als LETZTE eingebunden:

   Der Baukasten (`ui-wise.css`) wird vor den `seiten-*.css` geladen. Wer eine
   Handy-Regel dort hineinschreibt, verliert gegen jede gleich starke Regel aus
   einer Seitendatei — die Regel steht da, tut aber nichts. Genau das ist beim
   ersten Anlauf zweimal passiert (Kartenleiste, Zoom-Knöpfe). Statt überall die
   Spezifität hochzuschrauben, steht die Handysicht jetzt am Ende der Kette und
   gewinnt von selbst.

   Zwei Folgerungen für alle, die hier weiterarbeiten:
     · Neue Handy-Regeln kommen HIERHER, nicht in `ui-wise.css` oder `seiten-*.css`.
     · Diese Datei muss in jeder HTML-Datei als LETZTES Stylesheet stehen.

   Rücknahme der gesamten Handysicht: die 15 `<link>`-Zeilen entfernen. `ui.css`,
   `ui-wise.css` und alle `seiten-*.css` sind unberührt.

   Bruchpunkte: 760 px (schmales Tablet abwärts) · 560 px (Telefon).
   Befund und Messwerte, die dazu geführt haben: siehe OFFENE-PUNKTE.md.
   ============================================================================ */

/* ============================================================================
   WISE-NACHTRAG 6: Handysicht [14.08.2026]
   ----------------------------------------------------------------------------
   Befund der Messung vom 14.08. (Chromium, 390 × 844 und 360 × 800, alle 15
   Seiten): ein einziger Fehler erklärte fast alles. Die Reiterleiste
   (`.sp-reiter`) ist als starre Zeile gebaut — 504 px als Laden, bis 877 px als
   Marke. Auf einem Telefon zog sie das ganze Dokument auf ihre Breite auf: die
   Seite war 526 bis 899 px breit, jeder Text stand halb neben dem Bildschirm,
   und die hinteren Reiter („Mein Ladenprofil", „FAQ") waren nicht erreichbar.

   Die Antwort ist bewusst klein: die Reiterleiste wird waagerecht scrollbar,
   statt die Seite zu sprengen. Kein Aufklappmenü, keine neue Navigation — jeder
   Reiter bleibt sichtbar wie am Rechner, man wischt ihn nur heran. Damit man
   merkt, dass es weitergeht, steht rechts eine weiche Blende.

   Zwei Bruchpunkte: 760 px (Tablet hochkant und schmaler) für die Leiste,
   560 px (Telefon) für Innenabstände und Kopfzeile.
   Rücknahme: diesen Block löschen — `ui.css` ist unberührt.
   ============================================================================ */

/* --- 1 · Nichts darf breiter sein als der Bildschirm ---------------------- */
@media(max-width:760px){
  html, body{ max-width:100%; overflow-x:hidden; }
}

/* --- 2 · Reiterleiste: wischbar statt abgeschnitten ----------------------- */
@media(max-width:760px){
  .sp-kopf-nav{
    padding:0; min-width:0;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Blende rechts: zeigt an, dass hinter dem Rand noch Reiter stehen. */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
  }
  .sp-kopf-nav::-webkit-scrollbar{ display:none; }
  .sp-reiter{
    gap:20px; padding:0 16px; height:46px;
    width:max-content; min-width:100%;
  }
  .sp-reiter a, .sp-reiter button{ flex:0 0 auto; white-space:nowrap; }
  /* Am Ende der Leiste etwas Luft, sonst klebt der letzte Reiter an der Blende. */
  .sp-reiter::after{ content:""; flex:0 0 12px; }
}

/* --- 3 · Kopfzeile: Platz schaffen, ohne etwas wegzunehmen ----------------- */
@media(max-width:560px){
  .sp-kopf-top{ padding:8px 16px; gap:10px; }
  .sp-logo img{ height:21px; }
  /* Das Wort „Brandpool" neben dem Logo kostet rund 110 px und steht direkt
     darunter noch einmal als aktiver Reiter. Auf dem Telefon entfällt es. */
  .sp-logo span{ display:none; }
  .sp-who{ gap:8px; min-width:0; }
  .sp-who .sp-btn--klein{ padding:7px 11px; font-size:var(--fs-meta); }
  .sp-kopflink{ font-size:var(--fs-klein); }
  /* Das Konto-Menü ist 252 px breit und hängt rechts — auf 360 px Geräten
     ragte es über den Rand. Es darf nie breiter werden als der Bildschirm. */
  .sp-menu{ min-width:0; width:min(300px, calc(100vw - 24px)); }
}

/* --- 4 · Seitenrand: 22 px sind auf 360 px Geräten zu viel ----------------- */
@media(max-width:560px){
  .sp-seite{ padding-left:16px; padding-right:16px; }
}

/* --- 5 · Tippziele: mindestens 40 px hoch --------------------------------- */
@media(max-width:760px){
  .sp-reiter a, .sp-reiter button{ min-height:44px; }
  .sp-btn, .sp-btn--klein{ min-height:40px; }
  .sp-whobtn{ min-height:40px; }
}

/* ============================================================================
   WISE-NACHTRAG 7: Handysicht, Einzelseiten [14.08.2026]
   ----------------------------------------------------------------------------
   Nach der Reiterleiste (Nachtrag 6) blieben genau zwei Seiten übrig, die auf
   dem Telefon noch breiter waren als der Bildschirm. Beide aus demselben Grund:
   eine Zeile, die nicht umbrechen darf, zwingt ihrem Kasten eine Mindestbreite
   auf, die größer ist als das Gerät.

   Absichtlich hier und nicht in den `seiten-*.css`: die ganze Handysicht soll
   in einem Stück zurücknehmbar bleiben. Beide Blöcke löschen = alter Zustand.
   ============================================================================ */

/* --- 1 · Provisionsrechner: die Zahlenspalten -----------------------------
   `.pr-thead` stellt die Überschrift und vier Zahlenspalten (4 × 80 px) in eine
   Zeile, die nicht umbrechen darf. Zusammen 389 px — mehr als die 358 px, die
   auf einem iPhone zur Verfügung stehen. Das Raster übernahm diese Breite und
   schob die ganze Seite nach rechts.
   Auf dem Telefon darf die Überschrift über den Spalten stehen. */
@media(max-width:560px){
  #pane-rechner .pr-grid, .pr-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-col{ min-width:0; }
  .pr-thead{ flex-wrap:wrap; gap:4px 12px; }
  .pr-thead h4{ flex:1 1 100%; }
  .pr-tcols{ margin-left:auto; }
  .pr-table{ padding-left:13px; padding-right:13px; }
}

/* --- 2 · Läden entdecken: Filter, Legende, Zoom -----------------------------
   Die Leiste im Kartenrahmen hält „Alle Branchen", „offen", „geschlossen" und
   „coming soon" bewusst in EINER Zeile (`flex-wrap:nowrap`, HP 14.08.). Am
   Rechner ist das richtig; auf 390 px reicht der Platz nicht — die Legende wurde
   auf 27 px zusammengequetscht und ihre Beschriftungen standen neben dem
   Bildschirm. Sie war der letzte Grund, warum diese Seite 899 px breit war.
   Auf dem Telefon darf sie unter das Auswahlfeld rutschen. */
@media(max-width:560px){
  .karte-leiste{ flex-wrap:wrap; gap:8px 14px; left:10px; right:10px; top:10px; padding:8px 10px; }
  .karte-leiste .legend{ flex:1 1 100%; flex-wrap:wrap; gap:6px 14px; min-width:0; }
  .karte-leiste .legend span{ white-space:normal; }
  .karte-leiste select, .karte-leiste .sp-input{ flex:1 1 100%; min-width:0; }

  /* Die Leiste wird dadurch zwei- bis dreizeilig — wie hoch genau, hängt vom
     Gerät ab. Deshalb wandern die Zoom-Knöpfe nach unten links, statt unter
     einer Leiste zu sitzen, deren Höhe man raten müsste. */
  .karte-buehne .leaflet-top.leaflet-left{ top:auto; bottom:30px; }
  .karte-buehne .leaflet-top.leaflet-left .leaflet-control{ margin-top:0; margin-bottom:10px; }

  /* Eine 600 px hohe Karte füllt auf dem Telefon fast den ganzen Bildschirm —
     man scrollt an allem vorbei, was darunter steht. */
  #map{ height:min(60vh, 460px); }
}

/* --- 6 · Kopfzeile ohne Anmeldung [14.08.2026] ----------------------------
   Auf 390 px reicht der Platz nicht für „FAQ", „Anmelden", „Kostenlos
   registrieren" UND das Wort „Warenkorb". Weggelassen wird, was sich von selbst
   erklärt: das Einkaufswagen-Symbol braucht keine Beschriftung, und FAQ steht
   im Konto-Menü und im Fuß. Die Zähler-Blase am Korb bleibt — sie ist der
   einzige Hinweis darauf, dass etwas darin liegt. */
@media(max-width:560px){
  .sp-nurbreit{ display:none }
  .sp-korb{ padding:9px 12px }
  .sp-gastnav{ margin-left:var(--sp-3); gap:var(--sp-3) }
  .sp-kopf--gast .sp-who{ gap:6px }
  .sp-kopf--gast .sp-kopf-top{ gap:6px; padding-left:12px; padding-right:12px }
  .sp-kopf--gast .sp-logo img{ height:19px }
  .sp-kopf--gast .sp-gastnav a{ font-size:var(--fs-text) }
  .sp-kopf--gast .sp-btn--klein{ padding:7px 10px; font-size:var(--fs-meta) }
}

/* --- 7 · „Profil vervollständigen" auf dem Telefon [14.08.2026, HP] --------
   `.complete` ist eine starre Zeile aus vier Teilen: Fortschrittsbalken (fest
   120 px), Text, Knopf, Schließkreuz. Auf 375 px blieben dem Text keine 150 px
   — er lief über zehn Zeilen, der Knopf stand halb neben dem Bildschirm, und
   das Kreuz war gar nicht erreichbar.

   Auf dem Telefon wird daraus ein Stapel: erst der Text, darunter der Balken
   über die volle Breite, darunter der Knopf. Das Kreuz wandert in die obere
   rechte Ecke, wo man es erwartet — und wo es den Text nicht mehr verkürzt.
   Reihenfolge über `order`, damit das Markup unberührt bleibt. */
@media(max-width:760px){
  .complete{
    display:grid; grid-template-columns:1fr auto; gap:10px 12px;
    align-items:start; padding:14px 14px 16px;
  }
  .complete .ctxt{ order:1; grid-column:1; font-size:var(--fs-klein); line-height:1.5 }
  .complete .cbox-x{ order:2; grid-column:2; grid-row:1; margin:-4px -4px 0 0 }
  .complete .cbar{ order:3; grid-column:1 / -1; flex:none; width:100% }
  .complete button.btn{ order:4; grid-column:1 / -1; width:100%; justify-content:center; min-height:42px }
}

/* --- 8 · Anfrage-Kontingent nur dort, wo es zählt [14.08.2026, HP] ---------
   „Noch 7 von 10 Anfragen" steht an drei Stellen: Markenprofil,
   „Läden entdecken" und Handelsbeziehungen. Auf dem Telefon nimmt der Chip
   eine eigene Zeile ein und drängt sich zwischen Überschrift und Inhalt —
   an einer Stelle, an der man gerade gar nichts anfragt.

   Er bleibt dort, wo man ihn braucht: beim Entdecken von Läden, also direkt
   vor dem Anfragen. Auf dem Markenprofil und in den Handelsbeziehungen ist er
   am Telefon ausgeblendet. Am Rechner steht er unverändert überall — dort
   kostet er keinen Platz. */
@media(max-width:760px){
  #profilQuota, #hbQuota{ display:none }
}

/* ============================================================================
   9 · BRANDPOOL-BAUTEILE ÜBERALL GLEICH [14.08.2026, HP]
   ----------------------------------------------------------------------------
   HP: „Mach hier bei deiner Brandpool-Ansicht das genauso, wie auch die
   Brandpool-Ansicht ist, wenn man auf Mobile die Dinge anschaut. Genau gleiche
   Anordnung." Und zum Detailfenster: „Das sieht aktuell schrecklich aus."

   Ursache: Die Markenkarte, das Detailfenster und das Produktraster benutzen
   auf BEIDEN Seiten dieselben Klassen — aber ihre Handy-Regeln standen nur in
   `seiten-brandpool.css`, und die lädt `marke-profil.html` nicht. Dort blieb
   alles bei der Rechner-Anordnung: Markenname einwortweise umbrochen, Knöpfe
   übereinander, das Detailfenster als schmales Kästchen mitten im Bild.

   Die Regeln stehen deshalb jetzt HIER — in der Datei, die jede Seite lädt.
   Sie sind aus `seiten-brandpool.css` übernommen, nicht neu erfunden: dieselben
   Werte, damit beide Ansichten wirklich gleich aussehen und nicht nur ähnlich.
   Seiten-eigene Teile (Kopfleiste, Hero, Werkzeugleiste, Warenkorb-Knopf)
   bleiben dort, wo sie waren — sie gibt es auf dem Markenprofil nicht.
   ============================================================================ */
@media(max-width:640px){
  /* --- Die Markenkarte --- */
  .brand-row{ padding:14px }
  .brand-row-head{ margin-bottom:12px; gap:8px }
  .brand-row-id{ flex:1 1 100% }
  .brand-row-head .brand-logo{ width:38px; height:38px; font-size:14px }
  .brand-name{ font-size:15px }
  .brand-tag{ font-size:12px; max-width:none }
  .brand-row-actions{ flex:1 1 100%; margin-left:0; order:3 }
  .brand-row-actions .link-btn{ flex:1 1 0; min-width:0 }
  .brand-row-meta{ order:2; gap:6px }
  .prov-badge, .meta-pill{ font-size:11px }

  /* --- Produkte: zwei Kacheln nebeneinander --- */
  .brand-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
  .brand-prod .pname{ font-size:11px }
  .prod-grid{ grid-template-columns:repeat(2,1fr); gap:10px }
  .prod-card .prod-name{ font-size:12.5px; line-height:1.25 }
  .prod-info{ padding:10px }
  .prod-info .prod-desc{ display:none }

  /* --- Detailfenster als Vollbild --- */
  .modal{ left:0; top:0; transform:none; width:100vw; max-width:100vw;
          height:100dvh; max-height:100dvh; border-radius:0; overflow-y:auto }
  .modal-head{ padding:13px 16px; background:var(--card) }
  .modal-head-top{ padding-right:44px }
  .modal .x-close{ position:fixed; top:10px; right:10px; z-index:6;
                   background:var(--card); box-shadow:0 2px 8px rgba(16,18,29,.2) }
  .modal-head .brand-logo{ width:42px; height:42px; font-size:15px }
  .modal-title h2{ font-size:17px }
  .modal-meta{ gap:7px; margin-top:10px }
  .modal-meta .modal-actions{ flex:1 1 100%; margin-left:0; gap:14px }
  .modal-meta .modal-actions .btn{ flex:1 1 0; text-align:center }
  .modal-meta .modal-actions .web-link{ flex:0 0 auto }
  .modal-toolbar{ padding:11px 16px; gap:8px }
  .modal-toolbar .search{ min-width:0; flex:1 1 100% }
  .modal-body{ padding:14px 16px 28px; flex:none; overflow:visible }

  /* --- Produktdetail --- */
  .popup.pd{ left:0; top:0; transform:none; width:100vw; max-width:100vw;
             height:100dvh; max-height:100dvh; border-radius:0; overflow-y:auto }
  .pd-x{ top:10px; right:10px }
  .pd-stage{ min-height:46vw }
  .pd-info{ padding:18px 16px 28px }
}

/* --- 10 · Kopf des Bearbeiten-Fensters (nur Markenprofil) ------------------
   `.pm-head-top` stellt Logo, Titel und die beiden Knöpfe in EINE Zeile, und
   „Klick zum Bearbeiten" darf dabei nicht umbrechen (`white-space:nowrap`).
   Auf 375 px blieben dem Markennamen dadurch keine 40 px — er brach nach jedem
   Wort um, und der Knopf lag über ihm. Auf dem Telefon rutschen die Knöpfe
   deshalb in eine eigene Zeile unter den Namen. */
@media(max-width:640px){
  .pm-head{ padding:14px 16px 8px }
  .pm-head-top{ flex-wrap:wrap; gap:10px }
  .pm-head-top > div:last-child{ flex:1 1 100%; order:3 }
  .pm-toggle{ flex:1 1 auto; justify-content:center; min-height:42px }
  .pm-x{ position:absolute; top:12px; right:12px; z-index:4 }
  .pm-title{ font-size:17px; line-height:1.25 }
}

/* --- 11 · Läden entdecken: Umschalter, Kontingent, Legende ----------------
   [14.08.2026, HP] „Mach den Karte/Liste-Umschalter kleiner, sodass das Badge
   mit ‚Noch 7 von 10 Anfragen' auch noch daneben passt."

   Beide standen untereinander, weil `.quota-chip{margin-left:auto}` den Chip
   ans rechte Ende schiebt und die Zeile bei 375 px dann umbricht. Auf dem
   Telefon werden beide etwas kleiner und teilen sich eine Zeile. */
@media(max-width:640px){
  .karte-top{ gap:8px; flex-wrap:nowrap; align-items:center }
  .view-toggle{ flex:0 0 auto }
  .vt-btn{ padding:7px 10px; font-size:12px; gap:5px }
  .vt-btn i{ font-size:14px }
  .quota-chip{ padding:5px 10px; font-size:11px; gap:5px; white-space:nowrap; min-width:0 }
  .quota-chip i{ font-size:13px }
}

/* Die Legende bleibt IN der Kartenleiste, neben „Alle Branchen" — auf jeder
   Bildschirmbreite (HP, 14.08.: „pack das da wieder rein"). Auf schmalen
   Geräten darf sie umbrechen statt zusammengedrückt zu werden; das ist der
   einzige Unterschied zur Rechner-Ansicht. */
/* Die Legende zieht auf schmalen Karten unter die Karte um — den Umzug macht
   `legende()` in `marke-karte.html`, weil ein Kind der schwebenden
   Kartenleiste sich per CSS nicht darunter schieben lässt. Hier steht nur, wie
   sie an ihrem neuen Platz aussieht.

   Erst alle drei in EINER Reihe (HP, 14.08.); passt das nicht, brechen sie um.
   `flex-wrap:wrap` macht genau das — kein zweiter Bruchpunkt nötig, die
   Elemente entscheiden selbst. */
.legend-unten{
  display:flex; flex-wrap:wrap;
  gap:8px 16px; margin-top:11px;
  font-size:var(--fs-klein); color:var(--muted);
}
/* Wort und (i) auf einer Grundlinie zentriert. `.info-i` steht sonst mit
   `vertical-align:-2px` leicht tiefer — das ist für Fließtext gedacht, wo es
   in einer Zeile mitläuft. Hier ist jeder Eintrag eine eigene Flex-Zeile,
   und `align-items:center` macht es exakt. */
.legend-unten > span{
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap; line-height:1;
}
.legend-unten .info-i{ vertical-align:0; flex:0 0 auto }
.legend-unten .dot{ flex:0 0 auto; margin-right:0 }

/* --- 12 · Angebots-Popup: Knöpfe gehören ganz nach unten -------------------
   [14.08.2026, HP] „Aktuell steht in der Mitte ‚Angebot senden' und
   ‚Abbrechen'. Das gehört nach ganz unten."

   Ursache ist eine Regel, die am Rechner richtig ist und auf dem Telefon
   kippt: `.req-cart-actions{position:sticky; bottom:0}`. Am Rechner scrollt
   `.req-cart` in sich, die Leiste klebt am unteren Rand dieses Kastens. Auf
   dem Telefon wird `.req-cart` auf `overflow:visible` gestellt und scrollt
   nicht mehr — `sticky` bezieht sich dann auf den Bildschirm und heftet die
   Leiste mitten ins Fenster, mit Formularfeldern darunter, die im Markup
   davor stehen. Es sah aus wie ein Fehler in der Reihenfolge, war aber
   Klebe-Verhalten.

   Antwort: Auf dem Telefon wird das Fenster ein Vollbild-Blatt mit fester
   Fußleiste. Der Inhalt scrollt darüber, die beiden Knöpfe stehen immer unten
   und sind immer erreichbar — man muss nicht mehr an das Ende einer langen
   Produktliste scrollen, um abzuschicken. */
@media(max-width:780px){
  #reqModal.mini{
    left:0; top:0; transform:none;
    width:100vw; max-width:100vw; height:100dvh; max-height:100dvh;
    border-radius:0;
  }
  #reqModal .mini-head{ padding:13px 16px; flex-wrap:wrap; gap:8px }
  #reqModal .mini-head h3{ flex:1 1 100%; font-size:16px; line-height:1.3 }

  /* Der Rumpf ist der eine Scrollbereich — nicht mehr zwei ineinander. */
  #reqModal .req-checkout-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden }
  #reqModal .req-checkout{ height:auto }
  #reqModal .req-cart{ overflow:visible }
  #reqModal .req-cart-scroll{ overflow:visible; padding-bottom:10px }

  /* Die Fußleiste sitzt fest am unteren Rand des Fensters, nicht im Fluss. */
  #reqModal .req-cart-actions{
    position:sticky; bottom:0; z-index:3;
    display:grid; gap:8px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border); background:#f4f6f8;
    box-shadow:0 -6px 18px rgba(16,18,29,.07);
  }
  #reqModal .req-cart-actions .btn{ width:100%; min-height:46px; justify-content:center }
  /* Abbrechen ist die seltenere Handlung — sie steht unter dem Hauptknopf und
     tritt zurück, statt gleich laut zu sein. */
  #reqModal .req-cart-cancel{ background:transparent; border-color:transparent; color:var(--muted) }

  /* Damit die Fußleiste wirklich unten klebt, muss der Kasten, in dem sie
     steckt, der scrollende sein — sonst greift `sticky` wieder auf den
     Bildschirm zu (genau der Fehler von vorher). */
  #reqModal .req-cart{ display:flex; flex-direction:column; min-height:0 }
}

/* ============================================================================
   13 · HANDELSBEZIEHUNGEN UND CHAT AUF DEM TELEFON [14.08.2026, HP]
   ----------------------------------------------------------------------------
   Drei Ansichten, ein Fehler: alle drei sind als Rechner-Raster gebaut, das
   waagerecht aufteilt (Logo | Name | Zahlen | Knöpfe). Bei 375 px bleiben dem
   Namen 60 px — „Heinz-Peter Hölscher" bricht wortweise um, das Badge legt
   sich darüber, und die Zahlen stehen zwischen den Zeilen des Namens.

   Auf dem Telefon wird aus jedem Nebeneinander ein Untereinander:
   Name und Zustand, darunter die Nebeninfo, darunter Zahlen und Knöpfe.

   HP hatte gefragt, ob die Liste besser ganz weggehört. Nein: Am Telefon zeigt
   sie sechs bis acht Zeilen, das Grid zwei Karten. Wer zwölf Beziehungen im
   Blick behalten will, braucht die Dichte. Kaputt war nicht die Liste, sondern
   dass sie nie eine Handy-Anordnung hatte.
   ============================================================================ */
@media(max-width:760px){

  /* --- Listenzeile --- */
  .hb-row{
    grid-template-columns:1fr; gap:10px; padding:14px 15px;
    align-items:stretch;
  }
  .hb-row.hot{ padding-left:11px }
  .hb-id{ gap:11px; align-items:flex-start }
  .hb-av{ width:38px; height:38px; font-size:17px }
  .hb-nm{ font-size:14.5px; flex-wrap:wrap; gap:6px; line-height:1.3 }
  .hb-sub{ font-size:12px; line-height:1.4 }
  /* Der Zustands-Aufkleber saß per `margin-left` am Namen und schob ihn um.
     Er steht jetzt in derselben Zeile, darf aber umbrechen. */
  .hb-rowflag{ margin-left:0; order:3 }

  /* Zahlen und Knöpfe in eine eigene Zeile, linksbündig — sie gehören
     zusammen und sollen nicht am rechten Rand kleben. */
  .hb-counts{ justify-items:start; grid-template-columns:repeat(3,42px); gap:4px }
  .hb-row > *:last-child{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  .hb-rowcta{ flex:1 1 auto; min-height:40px; padding:9px 14px }

  /* --- Detailansicht einer Beziehung --- */
  .hb-split{ grid-template-columns:1fr; gap:14px }
  .hb-card-b .hb-counts{ grid-template-columns:repeat(3,42px) }

  /* --- Chat --- */
  /* Zwei Spalten wurden zu zwei Zeilen mit fester Höhe (190 px Liste oben).
     Das reicht für zwei Einträge und lässt darunter einen Verlauf, in dem man
     kaum lesen kann. Auf dem Telefon bekommt der Verlauf den Platz: die Liste
     wird flach und waagerecht wischbar. */
  .cv-inbox{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    height:calc(100dvh - 190px); min-height:420px;
  }
  .cv-left{ border-right:none; border-bottom:1px solid var(--border); max-height:150px }

  /* Der Kopf des Verlaufs: Name eigene Zeile, Knöpfe darunter. Vorher standen
     „Ladenprofil" und „Handelsbeziehung" neben einem 40 px schmalen Namen. */
  .cv-head{ flex-wrap:wrap; padding:11px 14px; gap:10px }
  .cv-hmid{ flex:1 1 calc(100% - 52px) }
  .cv-hnm{ font-size:14.5px; line-height:1.3 }
  .cv-hacts{ flex:1 1 100%; gap:8px }
  .cv-hacts .btn{ flex:1 1 auto; justify-content:center; min-height:38px; font-size:12.5px }
  .cv-body{ padding:12px }
}

/* ============================================================================
   14 · JEDES FENSTER IST AUF DEM TELEFON EIN VOLLBILD [14.08.2026, HP]
   ----------------------------------------------------------------------------
   HP: „Bei Smartphones soll sich jedes Popup in einen kompletten Bildschirm
   verwandeln. Aktuell wird bei ‚Profil vervollständigen' oder ‚bearbeiten'
   nicht der volle Bildschirm verwendet."

   Bisher galt das nur für einzelne Fenster, die jemand von Hand umgestellt
   hatte (`.modal`, `.popup.pd`, `#reqModal`). Alle übrigen blieben ein
   zentriertes Kästchen mit `width:min(…, 94vw)` und `max-height:90vh` — auf
   375 px ein Fenster im Fenster, mit Rändern, die nichts tragen, und einem
   Inhalt, der in einem 80 px hohen Schlitz scrollt.

   Diese Regel fasst ALLE Fenstertypen des Produkts zusammen. Neue Fenster
   erben sie, solange sie eine der Klassen benutzen — man muss nichts mehr
   einzeln nachziehen.

   `100dvh` statt `100vh`: `vh` rechnet die Adressleiste des Telefons nicht
   heraus, dadurch stand der untere Rand jedes Fensters knapp außerhalb.
   ============================================================================ */
/* ACHTUNG, hier lag ein Fehler (14.08.2026, behoben am selben Tag):
   Die erste Fassung sprach `.popup, .modal, .mini` OHNE `.open` an und setzte
   dabei `display:flex`. Damit war das `display:none`, mit dem geschlossene
   Fenster versteckt sind, überschrieben — beim Wechsel in die Handyansicht
   klappten SÄMTLICHE Fenster einer Seite gleichzeitig auf, übereinander, und
   ließen sich nicht schließen, weil das oberste gar nicht „offen" war und sein
   Kreuz nichts zu schließen hatte.

   Zwei Lehren, beide hier festgehalten:
     · Eine Regel für Fenster gilt NUR im offenen Zustand. Ohne `.open` (bzw.
       das, was die Seite stattdessen benutzt) trifft sie auch alles, was
       gerade versteckt sein soll.
     · In so einer Regel wird `display` NIE gesetzt. Sichtbarkeit steuert die
       Seite selbst; das Aussehen des Fensters ist eine andere Frage als die,
       ob es überhaupt da ist.
   Deshalb steht unten nur Größe und Position — und das ausschließlich für
   Fenster, die tatsächlich offen sind. */
@media(max-width:760px){
  .popup.open, .modal.open, .mini.open, .poolmodal.open,
  .filtersheet.open, .lp-crop.open, .sh-galov.open .sh-galbox{
    position:fixed !important;
    left:0 !important; top:0 !important; right:auto !important; bottom:auto !important;
    transform:none !important;
    width:100vw !important; max-width:100vw !important;
    height:100dvh !important; max-height:100dvh !important;
    border-radius:0 !important;
    flex-direction:column;
  }
  /* Der Rumpf ist der eine Scrollbereich — nicht mehr Fenster und Rumpf
     gleichzeitig, sonst scrollen zwei Sachen ineinander. */
  .open > .popup-body, .open > .modal-body, .open > .mini-body,
  .open > .pm-body, .open > .lp-crop-body{
    flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  }
  /* Kopf und Fuß bleiben stehen, damit Schließen und Bestätigen immer
     erreichbar sind — der häufigste Grund, warum jemand ein Fenster nicht
     zubekommt, ist ein weggescrolltes Kreuz. */
  .open > .popup-head, .open > .modal-head, .open > .mini-head, .open > .pm-head{ flex:0 0 auto }
  .open > .popup-foot, .open > .modal-foot, .open > .mini-foot{
    flex:0 0 auto; padding-bottom:calc(14px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border); background:var(--card);
  }
  /* Die Abdunklung dahinter braucht keinen Unschärfe-Effekt mehr — sie ist
     vollständig verdeckt und kostet auf schwachen Geräten nur Leistung. */
  .overlay{ backdrop-filter:none }
}

/* Zusätzlich zum `overflow:hidden` am Rumpf: iOS scrollt den Hintergrund
   sonst weiter, sobald das Fenster selbst zu Ende gescrollt ist. Die Klasse
   setzt `scrollSperre()` in `app-start.js`. */
body.sp-fenster-offen{ overscroll-behavior:none }
@media(max-width:760px){
  body.sp-fenster-offen{ position:fixed; inset:0; width:100%; overflow:hidden }
}

/* ============================================================================
   15 · HANDELSBEZIEHUNG IM DETAIL [14.08.2026, HP]
   ============================================================================ */

/* --- Der Verlauf klappt unter der Produktzeile auf ------------------------
   Den Umzug macht `hbVerlaufEinordnen()` in `marke-hb.html`. Hier steht, wie
   er an seinem neuen Platz aussieht: eingerückt wie ein Unterpunkt, mit einem
   Streifen links, der ihn sichtbar an die Zeile darüber bindet. */
.hb-stick--inline{
  position:static !important; max-height:none !important;
  display:block; padding:0 0 14px 0; background:#fbfcfd;
  border-bottom:1px solid #eef0f2;
}
/* Kein Streifen an der Seite (HP, 14.08.: „richtig kacke"). Dass der Verlauf
   zum Produkt darüber gehört, zeigt schon die Einrückung und der gemeinsame
   Kasten — ein zweiter Farbstreifen neben dem, den die Produktzeile ohnehin
   trägt, macht daraus zwei Signale für eine Aussage. */
.hb-stick--inline .hb-thread{
  border:0; border-radius:0; margin:0; box-shadow:none; background:transparent;
}
.hb-stick--inline .hb-thread-b{ max-height:none; overflow:visible }

@media(max-width:760px){
  /* --- Das Kennzeichen „Aktion nötig" in der Kartenecke ------------------
     [HP] „Mach das dezenter." Es war eine kräftig orange Fläche mit weißer
     Schrift und einem pulsierenden Punkt — auf einer Karte, die ohnehin schon
     einen orangefarbenen Rand und einen orangefarbenen Streifen trägt. Drei
     Signale für dieselbe Aussage. Jetzt: gedämpfter Grund, dunkle Schrift,
     kein Puls. Die Aussage bleibt, das Schreien hört auf. */
  .hb-ribbon{
    background:#fdf0dd !important; color:#a35c05 !important;
    border:1px solid #f6dcb4; box-shadow:none !important;
    font-weight:700;
  }
  .hb-ribbon .hb-pulse{ background:#e5820e; animation:none }

  /* --- Die Zählzeile im Partnerkopf --------------------------------------
     [HP] „Aktion nötig, Warten, Konditionen geeinigt untereinander, nicht so
     hässlich nebeneinander." Nebeneinander brachen sie mitten im Wort um. */
  .hb-kopfzahlen{
    flex-direction:column; align-items:flex-start !important; gap:9px !important;
  }
  .hb-kopfzahlen > .btn{ margin-left:0 !important; width:100%; justify-content:center; min-height:42px }

  /* --- Gleiche Breite für alle Karten der Ansicht ------------------------
     Die Produktliste stand einen Tick breiter als die Kopfkarte darüber,
     weil ihre Zeilen einen 3 px breiten Farbstreifen als `border-left`
     tragen — der zählt zur Breite, wenn der Kasten nicht `border-box` ist. */
  .hb-split, .hb-split > .card{ width:100%; max-width:100%; box-sizing:border-box }
  .hb-prow{ box-sizing:border-box; max-width:100% }
}

/* --- Produktzeile: Kennzeichen, Preis, Konditionen [14.08.2026, HP] -------- */
/* --- Das Kennzeichen sitzt in der Ecke [14.08.2026, HP] -------------------
   Es stand in der Textspalte auf einer Linie mit dem Produktnamen und nahm ihm
   Breite weg. Jetzt sitzt es absolut in der oberen rechten Ecke der ganzen
   Zeile — über dem Bild, nicht daneben.

   ENTFERNT wurden hier drei Regeln aus der ersten Fassung, die das Zeichen mit
   `!important` auf 10 px zwangen. Sie stammten aus dem Versuch, das Kennzeichen
   „dezenter" zu machen, und blieben stehen, als der Kreis wieder gefüllt wurde.
   Ergebnis: derselbe Kreis sah in der Zeile kleiner aus als in der Zählzeile
   darüber, obwohl beide aus derselben Funktion kommen. Größe und Farbe stehen
   ausschließlich in `hbKreis()` — hier steht nur, WO das Kennzeichen sitzt. */
.hb-prow{ position:relative }
.hb-pbadge{
  position:absolute; top:10px; right:12px; z-index:2;
  margin-left:0; flex:0 0 auto; line-height:0;
}
/* Der Produktname darf nicht unter das Kennzeichen laufen. */
.hb-pkopf{ padding-right:32px }

/* Preis direkt unter den Namen … */
.hb-puvp{ font-size:12px; color:var(--muted); margin-top:1px }

/* … danach mit Abstand die Konditionen als eingerückte Aufzählung, die beiden
   Punkte eng beieinander — sie gehören zusammen. */
.hb-pkond{
  list-style:none; margin:10px 0 0; padding:0 0 0 13px;
  display:flex; flex-direction:column; gap:3px; font-size:12.5px;
}
.hb-pkond li{ position:relative; line-height:1.45 }
.hb-pkond li::before{
  content:""; position:absolute; left:-11px; top:8px;
  width:4px; height:4px; border-radius:50%; background:#c2c7ce;
}
.hb-pkond span{ color:var(--muted) }
.hb-pkond b{ color:var(--text) }

/* Knopfzeile.
   [14.08.2026, HP] Zwei Anläufe, zwei Fehler — beide hier festgehalten:

   1. `flex:0 1 auto` mit `margin-left:auto` am dritten Knopf: Reichte der Platz
      nicht, schrumpfte der mittlere Knopf, sein Innenabstand blieb links stehen
      und wurde rechts weggedrückt. Er sah schief aus.
   2. `flex:0 0 auto` mit `flex-wrap:wrap`: Jetzt schrumpfte keiner mehr — dafür
      brach das X in eine zweite Zeile. Die drei brauchen 269 px, die Textspalte
      neben dem Produktbild hat auf einem 375-px-Gerät aber nur 251.

   Jetzt teilen sich die beiden BESCHRIFTETEN Knöpfe den Platz gleichmäßig
   (`flex:1 1 0`), das X behält seine feste Breite, und umgebrochen wird gar
   nicht mehr. Damit passt die Zeile auch auf 360 px — und beide Wörter bleiben
   lesbar, weil sie kurz genug sind. */
.hb-pacts{ display:flex; align-items:center; gap:7px; margin-top:11px; flex-wrap:nowrap }
/* Beide Knöpfe behalten ihre natürliche Breite — gleich breit zu machen klang
   ordentlich, schnitt aber „Gegenvorschlag" ab. Ein Knopf, dessen Beschriftung
   nicht mehr hineinpasst, ist schlimmer als zwei verschieden breite. */
.hb-pacts .hb-b{ flex:0 0 auto; padding:7px 10px; font-size:12px }
.hb-pacts .hb-b-x{ flex:0 0 34px; padding-left:0; padding-right:0 }
.hb-pacts .hb-b-x i{ font-size:14px }
/* Auf 360-px-Geräten bleiben der Textspalte nur rund 236 px. Dort wird die
   Zeile noch einmal enger — lieber etwas kleiner als umgebrochen oder
   beschnitten. Gemessen, nicht geraten: 84 + 116 + 34 + Abstände passen bei
   375 px genau, bei 360 px nicht mehr. */
@media(max-width:380px){
  .hb-pacts{ gap:6px }
  .hb-pacts .hb-b{ padding:7px 8px; font-size:11.5px }
}

/* --- Die Schrittleiste darf die Seite nicht mitziehen [15.08.2026, HP] ----
   HP sieht auf seinem iPhone rechts einen Streifen — als wäre die Seite breiter
   als der Bildschirm. Gemessen ist sie das nicht: `html` und `body` haben exakt
   Fensterbreite, beide mit `overflow-x:hidden`.

   Das einzige, was überhaupt über den Rand hinausragt, ist der Inhalt der
   Schrittleiste („1 Interessante Produkte auswählen · 2 …"). Sie ist absichtlich
   waagerecht wischbar (`overflow-x:auto`), und ihr Inhalt ist rund 960 px breit.
   Safari behandelt solche Streifen beim Wischen anders als Chromium: eine
   waagerechte Geste kann dort auf die Seite durchschlagen, und dann sieht man
   neben dem Inhalt den Hintergrund.

   `overscroll-behavior-x:contain` hält die Geste im Streifen. `max-width:100%`
   und `contain:paint` sorgen dafür, dass er unter keinen Umständen mehr Platz
   beansprucht, als er hat. Kostet nichts, schließt die Ursache aus. */
.flow-steps{
  max-width:100%;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:760px){
  .flow-steps{ contain:paint }
}