/* ---------------------------------------------------------------------------
   Warenkorb, Kasse und Kundenkonto.

   Eigene Datei, nur auf diesen drei Abläufen geladen: Sie tragen Tabellen,
   Formulare und Zustände, die sonst nirgends vorkommen. In base.css hätten
   diese Regeln auf jeder Seite mitgereist, ohne je zu greifen.
   --------------------------------------------------------------------------- */

/* ---- Anmelden und Registrieren -------------------------------------------
   Links die Anmeldung, rechts die Antwort auf die Frage davor: Brauche ich
   ein Konto ueberhaupt? Die Registrierung liegt darunter und klappt auf. */
.sb-login{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--gut) var(--s7);align-items:start;padding-top:var(--s3)}
.sb-login h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin:0 0 var(--s4)}
.sb-login-main{max-width:34rem}

/* Formularfelder: eine Form fuer alles, was der Shop erfragt.
   `.sb-page` davor, weil WooCommerce dem Anmeldeformular Rahmen und
   Innenabstand mitgibt (`.woocommerce form.login{border:1px;padding:20px}`)
   und Felder auf 370 px begrenzt — mit gleicher Spezifitaet und spaeter
   geladen. */
.sb-page .woocommerce form.sb-form{border:0;border-radius:0;padding:0;margin:0}
/* `max-width:none`, weil Formularzeilen `<p>` sind und damit das Textmass
   von 34 Zeichen erben — dieselbe Regel, die Fliesstext lesbar haelt, schnuert
   hier die Eingabefelder auf 376 px ein. */
.sb-page .woocommerce form.sb-form .form-row{margin:0 0 var(--s3);display:block;
  padding:0;max-width:none}
/* WooCommerce haengt jeder Formularzeile zwei leere Pseudoelemente an — ein
   Clearfix aus der Zeit vor Flexbox. In einer Flex-Zeile sind sie vollwertige
   Posten: `::before` stand vor dem Kaestchen und kassierte den Abstand von
   17.6 px. Das Kaestchen war eingerueckt, ohne dass eine Regel das sagte. */
.sb-page .woocommerce form.sb-form .form-row::before,
.sb-page .woocommerce form.sb-form .form-row::after{display:none}
.sb-page .woocommerce form.sb-form label{display:block;font-family:var(--display);font-weight:300;
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);
  margin:0 0 .4rem}
/* Das Kaestchen-Label ist Fliesstext, keine Feldbeschriftung. */
.sb-page .woocommerce form.sb-form label.sb-check{font-family:var(--body);font-weight:400;
  font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
.sb-form .required{color:var(--coral);text-decoration:none}
.sb-page .woocommerce form.sb-form .form-row input.input-text,
.sb-page .woocommerce form.sb-form .form-row input[type=text],
.sb-page .woocommerce form.sb-form .form-row input[type=email],
.sb-page .woocommerce form.sb-form .form-row input[type=password],
.sb-page .woocommerce form.sb-form .form-row input[type=tel]{
  width:100%;max-width:none;font:400 1.05rem/1.3 var(--body);
  padding:.85rem .8rem;min-height:3rem;
  border:1px solid var(--ink);border-radius:0;background:#fff;color:var(--ink)}
.sb-page .woocommerce form.sb-form input:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* „Angemeldet bleiben" und der Knopf auf einer Zeile — sie gehoeren zum
   selben Schritt.

   Die Regel muss `.form-row` mittragen: Die Zeile ist selbst eine Formularzeile,
   und `.sb-page .woocommerce form.sb-form .form-row{display:block}` weiter oben
   wiegt eine Klasse mehr. Ohne das gewann `block`, und Kaestchen und Knopf
   standen untereinander — genau das, was dieser Block verhindern soll.
   Dasselbe beim Kaestchen-Label: Es ist ein `label` im Formular und erbt
   `display:block` aus derselben Regel. */
.sb-page .woocommerce form.sb-form .form-row.sb-form-actions{display:flex;
  flex-wrap:wrap;align-items:center;gap:var(--s3);margin-top:var(--s4)}
.sb-page .woocommerce form.sb-form label.sb-check,
.sb-check{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--body);font-size:.95rem;letter-spacing:0;text-transform:none;
  color:var(--ink);margin:0}
.sb-check input{width:1.05rem;height:1.05rem;accent-color:var(--coral)}
/* `margin:0 0 0 auto` statt nur `margin-left`: WooCommerce gibt jedem Knopf
   im Formular 1em Aussenabstand nach rechts mit. In einer Flex-Zeile schob
   das den Knopf 17 px vor das Zeilenende — er stand nicht bündig mit den
   Eingabefeldern darüber. */
.sb-page .woocommerce form.sb-form .sb-form-actions .sb-cta{margin:0 0 0 auto}
.lost_password{margin:var(--s3) 0 0;font-size:.92rem}
.lost_password a{color:var(--steel)}

/* Ein Aufklapper: geschlossen eine Zeile, offen ein Formular. Als `<details>`,
   nicht ueber ein Skript — er funktioniert damit auch ohne JavaScript, ist mit
   der Tastatur bedienbar, und Vorleseprogramme geben den Zustand bekannt.
   Zweimal im Einsatz: die Registrierung im Konto, die Anmeldung an der Kasse. */
.sb-aufklapp summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  cursor:pointer;list-style:none}
.sb-aufklapp summary::-webkit-details-marker{display:none}
.sb-aufklapp-frage{font-family:var(--body);color:var(--steel)}
.sb-aufklapp-tu{font-family:var(--display);font-weight:700;color:var(--coral);
  border-bottom:2px solid var(--coral);padding-bottom:.1rem}
.sb-aufklapp summary:hover .sb-aufklapp-tu{color:var(--ink);border-bottom-color:var(--ink)}
.sb-aufklapp summary:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.sb-aufklapp[open] summary{margin-bottom:var(--s4)}
.sb-aufklapp[open] .sb-aufklapp-tu{color:var(--ink);border-bottom-color:var(--ink)}

/* Die Registrierung sitzt unter der Anmeldung und wird von ihr abgesetzt. */
.sb-register{margin-top:var(--s5);border-top:1px solid var(--line);padding-top:var(--s4)}

/* Die Spalte daneben ist Text, kein Formular — sie darf ruhiger sein. */
.sb-login-aside{background:var(--surface);padding:var(--s4)}
.sb-login-aside-title{font-size:1.35rem;margin:0 0 var(--s3)}
.sb-login-aside p{max-width:34ch}
.sb-login-aside-go a{font-family:var(--display);font-weight:700;color:var(--coral);
  text-decoration:none}
.sb-login-aside-go a:hover{text-decoration:underline;text-underline-offset:.25em}

@media (max-width:60rem){
  .sb-login{grid-template-columns:1fr}
  .sb-login-main{max-width:none}
}

/* ---- Kundenkonto ---------------------------------------------------------
   Zwei Spalten: links die Punkte untereinander, rechts der Inhalt über die
   ganze Spaltenbreite. Vorher lief die Navigation waagrecht um und der Text
   stand in der Lesespalte von 34 Zeichen — beides sah aus wie ein Fehler. */
/* WooCommerce laesst Navigation und Inhalt mit 30 und 68 Prozent schwimmen.
   Im eigenen Raster macht das aus einer 14-rem-Spalte derer 67 px, und die
   Beschriftungen brachen mitten im Wort um. */
.sb-page .woocommerce .woocommerce-MyAccount-navigation{grid-column:1;
  float:none;width:auto}
.sb-page .woocommerce .woocommerce-MyAccount-content{grid-column:2;
  float:none;width:auto;min-width:0}

/* Nur im angemeldeten Zustand zwei Spalten.
   Abgemeldet steht dort die Anmeldemaske, kein Navigations-Inhalt-Paar — sie
   landete sonst in der 14-rem-Spalte und brach auf ein Wort je Zeile um.
   `logged-in` setzt WordPress selbst; abgemeldet fehlt die Klasse. */
.logged-in.woocommerce-account .sb-page .woocommerce{display:grid;
  grid-template-columns:minmax(0,14rem) minmax(0,1fr);
  gap:var(--s6) clamp(2rem,5vw,4.5rem);align-items:start}
.logged-in.woocommerce-account .sb-page .woocommerce-notices-wrapper{grid-column:1 / -1}

/* Die Punkte untereinander, jeder auf seiner Zeile. */
.sb-page .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column}
.sb-page .woocommerce-MyAccount-navigation li{margin:0;border-bottom:1px solid var(--line)}
.sb-page .woocommerce-MyAccount-navigation li:first-child{border-top:1px solid var(--line)}
.sb-page .woocommerce-MyAccount-navigation a{display:block;padding:.75rem 0;
  font-family:var(--display);font-weight:300;text-decoration:none;color:var(--ink)}
.sb-page .woocommerce-MyAccount-navigation a:hover,
.sb-page .woocommerce-MyAccount-navigation a:focus-visible{color:var(--coral);outline:none}
.sb-page .woocommerce-MyAccount-navigation .is-active a{font-weight:700;color:var(--coral)}

/* Der Inhalt nutzt die Spalte. `p` traegt sonst das Textmass von 34 Zeichen,
   und die Saetze brachen nach vier Woertern um. */
.sb-page .woocommerce-MyAccount-content>p{max-width:60ch}
.sb-page .woocommerce-MyAccount-content h2,
.sb-page .woocommerce-MyAccount-content h3{margin:var(--s5) 0 var(--s3)}
.sb-page .woocommerce-MyAccount-content h2:first-child,
.sb-page .woocommerce-MyAccount-content h3:first-child{margin-top:0}

/* Rechnungs- und Lieferadresse untereinander: nebeneinander stehen zwei
   fast gleiche Bloecke, und man vergleicht sie, statt sie zu lesen. */
/* WooCommerce laesst die beiden Adressen in `.col2-set` nebeneinander
   schwimmen — `.woocommerce .col2-set .col-1{width:48%;float:left}`. Die
   eigene Regel braucht deshalb `.woocommerce` und beide Klassen, sonst
   passiert sichtbar nichts. */
.sb-page .woocommerce .woocommerce-Addresses{display:block}
.sb-page .woocommerce .woocommerce-Addresses .col-1,
.sb-page .woocommerce .woocommerce-Addresses .col-2,
.sb-page .woocommerce .woocommerce-Address{width:auto;float:none;margin:0 0 var(--s5);
  padding-bottom:var(--s4);border-bottom:1px solid var(--line);max-width:44rem}
.sb-page .woocommerce-Address:last-child{border-bottom:0;margin-bottom:0}
/* Als Textfluss und nicht als Flex-Zeile: WooCommerce setzt Umbrueche und
   Tabulatoren zwischen Ueberschrift und Link, und Chrome zaehlt die als
   eigenen Abstand — die Ueberschrift stand dadurch um eine Luecke eingerueckt
   und lief nicht mit dem Absatz darueber. */
.sb-page .woocommerce-Address-title{display:block;margin-bottom:var(--s2)}
.sb-page .woocommerce-Address-title h2,
.sb-page .woocommerce-Address-title h3{display:inline;margin:0 .7rem 0 0;font-size:1.35rem}
.sb-page .woocommerce-Address-title a{font-family:var(--display);font-weight:700;
  font-size:.9rem;color:var(--coral);text-decoration:none;
  border-bottom:2px solid var(--coral);padding-bottom:.05rem}
.sb-page .woocommerce-Address address{font-style:normal;line-height:1.6}

@media (max-width:60rem){
  .logged-in.woocommerce-account .sb-page .woocommerce{grid-template-columns:1fr}
  .sb-page .woocommerce-MyAccount-navigation,
  .sb-page .woocommerce-MyAccount-content{grid-column:1}
}

/* Positionen statt summierter Mengen in der Bestellliste (T027). Der Zusatz
   steht unter der Summe, nicht daneben — sonst bricht die Spalte auf schmalen
   Geräten mitten im Betrag um. */
.woocommerce-orders-table .sb-order-items{display:block;font-size:.82rem;
  color:var(--steel);margin-top:.15rem}

/* ---- Zahlungsbereich (T018) ------------------------------------------------
   WooCommerce liefert den Block in Flieder: rgba(129,110,153,.14) auf
   `#payment`, #dcd7e2 auf der Erläuterung, dazu runde Ecken und ein kleines
   Dreieck. Das ist die Farbe eines anderen Shops, mitten in unserer Übersicht.

   `form.sb-checkout #payment` reicht dafür NICHT: WooCommerce schreibt
   `.woocommerce-checkout #payment` — dieselbe Gewichtung (eine Klasse, eine
   Kennung), und seine Datei lädt später. Bei Gleichstand gewinnt die
   spätere Zeile. Dieselbe Falle hat in diesem Umbau schon sechsmal
   zugeschlagen (Kachelrand, Logo, Warenkorbtabelle, Hinweise, Anmeldefeld,
   Kontonavigation). Das `form.` davor gibt den Ausschlag — ohne
   `!important`, das nur die nächste Runde verschiebt. */
form.sb-checkout #payment{background:none;border-radius:0;padding:0;
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
form.sb-checkout #payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0}
form.sb-checkout #payment li.wc_payment_method{margin:0 0 var(--s2);padding:0}
/* Zeichen und Beschriftung auf einer Linie, das Feld gross genug zum Treffen. */
form.sb-checkout #payment li.wc_payment_method>label{display:inline-flex;align-items:center;
  gap:var(--s2);margin:0;min-height:2.2rem;cursor:pointer}
form.sb-checkout #payment input[type=radio]{width:1.1rem;height:1.1rem;margin:0 .1rem 0 0;
  accent-color:var(--coral);flex:0 0 auto;cursor:pointer}
/* Die Erläuterung zur Zahlart: ein ruhiger Kasten, kein zweiter Farbton. */
form.sb-checkout #payment div.payment_box{background:var(--surface);color:var(--mute);
  border-radius:0;font-size:.92rem;line-height:1.5;padding:var(--s3);
  margin:var(--s2) 0 0;border-left:3px solid var(--coral)}
form.sb-checkout #payment div.payment_box::before,
form.sb-checkout #payment div.payment_box::after{display:none}
form.sb-checkout #payment div.payment_box p{margin:0;max-width:none}

/* Der Datenschutzhinweis ist Kleingedrucktes und soll auch so aussehen —
   vorher stand er in derselben Grösse wie die Bestellung darüber. */
form.sb-checkout .woocommerce-privacy-policy-text{margin:var(--s3) 0 0}
form.sb-checkout .woocommerce-privacy-policy-text p{font-size:.82rem;line-height:1.5;
  color:var(--steel);margin:0;max-width:none}
form.sb-checkout #payment .form-row.place-order{padding:0;margin:0}

/* ---- Anmelden an der Kasse (T018) -----------------------------------------
   Derselbe Aufklapper wie die Registrierung im Konto, nur andersherum
   belegt. Er steht über der Kasse und darf sie nicht verdrängen: geschlossen
   ist er eine Zeile, offen so breit wie eine Formularspalte — nicht so breit
   wie die Seite, sonst laufen die Eingabefelder auf 1000 px auseinander. */
.sb-checkout-login{max-width:34rem;margin:var(--s3) 0 var(--s5);
  border-bottom:1px solid var(--line);padding-bottom:var(--s4)}
.sb-checkout-login-hinweis{font-size:.95rem;color:var(--mute);max-width:42ch;
  margin:0 0 var(--s4)}

/* ---------------------------------------------------------------------------
   Nach der Bestellung

   Der Moment, in dem jemand gerade Geld ausgegeben und Vertrauen
   vorgeschossen hat. WooCommerce beantwortet ihn mit einer Tabelle über die
   volle Fensterbreite und dem Satz „Ihre Bestellung ist eingegangen."

   Hier steht stattdessen: eine Lesespalte statt der Fensterbreite, ein Wort
   von Anina vor den Zahlen, ihre Unterschrift, und erst zuletzt die Bitte um
   eine Rezension.
--------------------------------------------------------------------------- */

/* Die Kassenseite läuft breit, weil dort Formularspalten nebeneinander
   stehen. Nach der Bestellung gibt es keine Spalten mehr — nur Text, und der
   braucht ein Mass. */
.sb-danke { max-width: 52rem; }

.sb-danke .eyebrow { margin-bottom: var(--s2); }
.sb-danke h1 { margin: 0 0 var(--s3); }
.sb-danke-lead {
	font-size: 1.15rem;
	line-height: 1.5;
	max-width: 42ch;
	margin-bottom: var(--s5);
}

/* Die Zahlen, die man sich merken will. Als Reihe, nicht als Tabelle: Es sind
   vier Angaben, keine Daten zum Vergleichen. */
.sb-danke-fakten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s3) var(--s5);
	margin: 0 0 var(--s6);
	padding: var(--s3) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.sb-danke-fakten > div { margin: 0; }
.sb-danke-fakten dt {
	font-family: var(--display);
	font-weight: 300;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0 0 .2rem;
}
.sb-danke-fakten dd {
	margin: 0;
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.15rem;
}

/* Das Wort von Anina. Kein Kasten, kein Rahmen — es soll wie ein Zettel
   wirken, der beiliegt, nicht wie ein weiteres Element der Seite. */
/* `.woocommerce .sb-danke section` davor, weil genau diese Regel weiter unten
   allen Abschnitten `padding: 0` gibt — zwei Klassen und ein Element schlagen
   eine einzelne Klasse. Ohne den Vorsatz klebte der Text an der Linie.
   Dieselbe Falle wie bei WooCommerce' Tabellen, diesmal die eigene. */
.woocommerce .sb-danke section.sb-danke-wort,
.sb-danke-wort {
	margin: 0 0 var(--s5);
	padding: var(--s4) 0 var(--s4) var(--s4);
	border-left: 3px solid var(--coral);
}
.sb-danke-wort p { max-width: 46ch; }
.sb-danke-gruss {
	font-family: var(--display);
	font-weight: 300;
	font-size: 1.05rem;
	margin: var(--s4) 0 var(--s2);
}
/* Die Unterschrift ist ein PNG mit weissem Grund. `mix-blend-mode:multiply`
   lässt das Papier des Ladens durchscheinen, statt ein weisses Rechteck auf
   den warmen Ton zu legen. */
.sb-danke-signatur {
	width: 11rem;
	height: auto;
	margin: 0 0 var(--s2);
	mix-blend-mode: multiply;
}
.sb-danke-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.6rem;
	margin: 0 0 var(--s2);
}
.sb-danke-rolle {
	font-family: var(--display);
	font-weight: 300;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--steel);
	margin: 0;
}

.sb-danke h2 {
	font-size: 1.5rem;
	margin: 0 0 var(--s3);
}

/* Die Bestelltabelle: ruhig, ohne Kästchen um jede Zelle.
 *
 * `table.shop_table` statt der sprechenden Klasse: WooCommerce setzt seinen
 * Rahmen über `.woocommerce table.shop_table` — zwei Klassen plus Element.
 * Eine Regel mit nur zwei Klassen verliert, und die Tabelle behielt ihren
 * abgerundeten Kasten. Dieselbe Falle wie schon siebenmal in diesem Projekt. */
.sb-danke .woocommerce-order-details table.shop_table,
.sb-danke .woocommerce-customer-details table.shop_table,
.sb-danke .woocommerce-table--order-details {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	border-radius: 0;
	/* Keinen eigenen Rand: Der Abschnitt darum trägt ihn schon. Beide zusammen
	   ergaben 176 px zwischen Summe und Rechnungsadresse — gemessen, nicht
	   geschätzt. */
	margin: 0;
}
.sb-danke .woocommerce-order-details table.shop_table th,
.sb-danke .woocommerce-order-details table.shop_table td,
.sb-danke .woocommerce-customer-details table.shop_table th,
.sb-danke .woocommerce-customer-details table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: var(--s3) 0;
	text-align: left;
}
.sb-danke .woocommerce-order-details table.shop_table thead th {
	font-family: var(--display);
	font-weight: 300;
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--steel);
	border-bottom: 1px solid var(--ink);
}
.sb-danke .woocommerce-order-details table.shop_table td:last-child,
.sb-danke .woocommerce-order-details table.shop_table th:last-child { text-align: right; }
.sb-danke .woocommerce-order-details table.shop_table tfoot th { font-family: var(--body); font-weight: 400; }
.sb-danke .woocommerce-order-details table.shop_table tfoot tr:last-child th,
.sb-danke .woocommerce-order-details table.shop_table tfoot tr:last-child td {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.1rem;
	border-bottom: 0;
	border-top: 1px solid var(--ink);
}
.sb-danke .woocommerce-column__title { font-size: 1.5rem; }
.sb-danke address { font-style: normal; line-height: 1.6; }
/* Auch die Adresse trägt WooCommerce' Kasten.
 *
 * Der erste Versuch schrieb `.sb-danke .woocommerce …` — und konnte nie
 * greifen: `.woocommerce` ist der ELTERNKNOTEN von `.sb-danke`, nicht ein
 * Kind. Der Kurzbefehl liefert seinen Rahmen aussen herum.
 *
 * Ein Selektor, der nichts trifft, meldet sich nicht. Er sieht nur aus wie
 * eine Regel. */
.woocommerce .sb-danke .woocommerce-customer-details address,
.sb-danke .woocommerce-customer-details address {
	border: 0;
	border-radius: 0;
	padding: 0;
	border-left: 3px solid var(--line);
	padding-left: var(--s3);
}
.sb-danke .woocommerce-order-details__title,
.sb-danke .woocommerce-column__title { font-size: 1.5rem; margin: 0 0 var(--s3); }

/* WooCommerce setzt seinen Abschnitten grosszügige Ränder — zwischen
   Unterschrift und Bestelldetails klaffte dadurch ein Loch von zwei
   Bildschirmzeilen. Die Seite soll gelesen werden, nicht durchgescrollt. */
.woocommerce .sb-danke .woocommerce-order,
.woocommerce .sb-danke .woocommerce-order-details,
.woocommerce .sb-danke .woocommerce-customer-details,
/* `base.css` gibt jedem `<section>` 88 px Innenabstand oben und unten — für
 * die grossen Abschnitte der Zielseiten gedacht, wo das richtig ist.
 *
 * Hier ist jeder Block ein `<section>`: Aninas Wort ebenso wie WooCommerce'
 * Bestelldetails. Die Folge waren eine korallene Linie, die 88 px unter dem
 * letzten Wort weiterlief, und 132 px Leere zwischen Summe und Adresse — die
 * Lücke, die ich vorhin am falschen Ende gesucht habe.
 *
 * Der Abstand wird hier gesetzt, nicht geerbt. */
.woocommerce .sb-danke section { padding: 0; margin: 0 0 var(--s5); }
.woocommerce .sb-danke .woocommerce-customer-details { margin-bottom: 0; }
.sb-danke .woocommerce-notice,
.sb-danke .woocommerce-thankyou-order-received { display: none; }
.sb-danke ul.woocommerce-thankyou-order-details { display: none; }

/* Die Bitte um eine Rezension. Zuletzt, als Karte mit Rahmen — wie die
   „+68 weitere"-Karte auf den Zielseiten: derselbe Griff für dieselbe Geste,
   nämlich „hier geht es weiter, wenn du magst". */
.sb-danke-rezension {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	/* Sie steht jetzt zwischen Aninas Wort und den Zahlen, nicht mehr am
	   Schluss — der Abstand nach oben darf darum kleiner sein. */
	margin: 0 0 var(--s6);
	padding: var(--s4);
	border: 2px solid var(--ink);
}
.sb-danke-rezension h2 { margin: 0 0 var(--s2); font-size: 1.35rem; }
.sb-danke-rezension p { margin: 0; max-width: 46ch; font-size: .95rem; }
.sb-danke-rezension .sb-cta { flex: 0 0 auto; }

.sb-danke-knoepfe { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (max-width: 40rem) {
	.sb-danke-fakten { gap: var(--s3); }
	.sb-danke-fakten > div { flex: 1 1 42%; }
	.sb-danke-rezension { flex-direction: column; align-items: flex-start; }
}