/* nsp-akt-karte */
/* --- 0. Das alte Band ------------------------------------------------ */
/* Bis 07.09.2026 stand hier ".nispel-akt{display:none !important}", weil
   Schnipsel 90 das alte Band noch ausgab und nur verdeckt werden konnte.
   Seit dem 07.09.2026 gibt 90 es gar nicht mehr aus: sein wp_body_open-Hook
   ist entfernt, ebenso das Band-CSS mit den drei Animationen ueber
   background-position, "left" und box-shadow. 90 behaelt seine drei anderen
   Aufgaben (Anlass-Zeichen im Abzeichen, Aktionsseite, Warenkorbzeile).
   Die Ausblendregel ist damit gegenstandslos und entfaellt. */

/* --- 1. Werte ----------------------------------------------------- */
.nsp-ak{
	--ak-navy:#1F3A68;
	--ak-rot:#C0000E;
	--ak-e-standard:cubic-bezier(.22,.61,.36,1);
	--ak-e-betont:cubic-bezier(.16,1,.3,1);
	--ak-e-symm:cubic-bezier(.45,0,.55,1);
	--ak-d-schnell:.12s;
	--ak-d-standard:.18s;
}

/* --- 2. Band und Karte -------------------------------------------- */
.nsp-ak{position:relative;overflow:hidden;color:#fff;
	background:linear-gradient(180deg,#152949 0%,#1b3159 60%,#1F3A68 100%);
	padding:4px 0 5px}
.nsp-ak::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
	background:var(--ak-rot);z-index:5}
/* Die Karte folgt der Nispel-Spur, aber hoechstens 1.000 px: Ihr Inhalt braucht
   994 px (Muenze 53, Text 334, Code 183, Knopf 168, Strich, Sprachwahl 103, Abstaende).
   Auf der vollen Spur von 1.290 px klaffte zwischen Satzende und Rabattcode eine Luecke
   von 341 px -- die Karte wirkte auseinandergezogen (Befund 07.09.2026).
   Mit den engeren Abstaenden und ohne den zweiten Trennstrich passt sie in
   940 px; dort bleiben 22 px Luft zwischen Satzende und Rabattcode. Bei 930 px
   bricht der Satz auf zwei Zeilen um und das Band waere 9 px hoeher -- die
   Grenze ist gemessen, nicht geschaetzt. Ein laengerer Aktionssatz bricht
   entsprechend frueher um; das ist kein Fehler, nur eine hoehere Karte. */
.nsp-ak-rahmen{width:min(1140px,var(--nsp-spur,min(1290px,90%)));margin-inline:auto;position:relative;
	z-index:3;perspective:1400px;perspective-origin:50% 20%}
/* Die Karte steht aus dem Band heraus: leichte Neigung, eigene Kante,
   Schlagschatten. Der Rand darunter (.nsp-ak-kante) zeigt ihre Dicke. */
.nsp-ak-karte{position:relative;transform-style:preserve-3d;transform:rotateX(3deg);
	border-radius:12px;
	background:linear-gradient(180deg,#2c4f88 0%,#25457a 58%,#1f3c6d 100%);
	box-shadow:0 7px 14px rgba(0,0,0,.42),
		inset 0 1px 0 rgba(255,255,255,.26),
		inset 0 -1px 0 rgba(0,0,0,.35)}
.nsp-ak-kante{position:absolute;left:8px;right:8px;bottom:-5px;height:7px;
	border-radius:0 0 10px 10px;background:linear-gradient(180deg,#173058,#0f2246);z-index:-1}
/* Kein min-height mehr: die Muenze (52 px) gibt die Hoehe vor, die Angabe war
   nur Ballast. Abstaende 14 statt 20 px -- bei vier Luecken sind das 24 px
   weniger Breite, die der Karte zugutekommen (Vorgabe 07.09.2026: schmaler,
   weniger Leerraum). */
.nsp-ak-in{display:flex;align-items:center;padding:4px 12px;min-height:0;gap:8px 12px}

/* --- 3. Schrift --------------------------------------------------- */
.nsp-ak-titel{font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.008em;
	color:#fff;text-wrap:balance;overflow-wrap:break-word;white-space:nowrap;flex:0 0 auto;
	/* -webkit-hyphens ist fuer Safari und jeden iOS-Browser noetig: ohne das
	   Praefix trennt WebKit nicht, und "Langzeit-Blutdruckmessung" liefe bei
	   374 px wieder ueber die Spalte hinaus. Silbentrennung braucht ausserdem
	   ein lang-Attribut -- WordPress setzt lang="de" am html-Element. */
	-webkit-hyphens:auto;hyphens:auto}
.nsp-ak-satz{font-size:14px;font-weight:400;line-height:1.25;color:#dce6f5;min-width:0}
/* Der Trennpunkt gliedert die Zeile, ohne Platz zu kosten. #b9cbe6 auf der Karte
   ergibt 3,4:1 -- die 3:1, die fuer grafische Zeichen gelten, sind erfuellt;
   das zuerst gewaehlte #8ba3c9 kam nur auf 2,6:1. */
.nsp-ak-satz::before{content:"·";display:inline-block;margin:0 7px;
	color:#b9cbe6;font-weight:700}
/* Aktionsname und Satz stehen NEBENEINANDER statt uebereinander. Das ist der
   Schritt, der die Bandhoehe von 80 auf 57 px bringt (Vorgabe 07.09.2026). Unter
   1.050 px klappt der Satz zurueck unter den Namen -- abgeschnitten wird nie etwas. */
.nsp-ak-text{display:flex;flex-direction:row;align-items:baseline;gap:0;flex-wrap:nowrap;
	min-width:0;flex:1 1 auto}

/* --- 3b. Handlungsgruppe ------------------------------------------ */
/* Code und Knopf stehen nebeneinander. Ohne diese Basisregel bleibt der
   span display:block, beide stapeln sich untereinander und das Band wird
   131 statt 95 px hoch -- so eingesetzt am 07.09.2026 gemessen. Die
   Regel ging beim Umbenennen der Klassen verloren; die beiden
   @media-Regeln zu .nsp-ak-tat setzten sie voraus. */
.nsp-ak-tat{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.nsp-ak-melder{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --- 4. Rabattcode ------------------------------------------------ */
/* Das Wort "kopieren" steht dauerhaft da, nicht erst beim Ueberfahren:
   auf einem Tastgeraet gibt es kein Ueberfahren. */
.nsp-ak-code{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
	height:36px;padding:0 11px;border-radius:9px;cursor:pointer;touch-action:manipulation;
	background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
	transition:background var(--ak-d-schnell) var(--ak-e-standard),
		box-shadow var(--ak-d-schnell) var(--ak-e-standard)}
.nsp-ak-code:hover{background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px #fff}
.nsp-ak-code:focus-visible{background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px #fff;
	outline:2px solid #fff;outline-offset:3px}
.nsp-ak-code b{font:700 13px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.09em}
.nsp-ak-code em{font-style:normal;font-size:11px;font-weight:700;color:#e3ebf7;
	margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,.4);
	display:flex;align-items:center}
.nsp-ak-code.nsp-kopiert{background:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px #fff}
.nsp-ak-code.nsp-kopiert b,.nsp-ak-code.nsp-kopiert em{color:#1F3A68}
/* Das Zeichen fuer "kopieren" auf schmalen Schirmen: zwei versetzte
   Quadrate. Ein Unicode-Symbol dafuer fehlt auf zu vielen Geraeten. */
.nsp-ak-zeichen{display:none;position:relative;width:14px;height:14px;flex:0 0 auto}
.nsp-ak-zeichen::before,.nsp-ak-zeichen::after{content:"";position:absolute;
	width:10px;height:10px;border:1.5px solid currentColor;border-radius:2px}
.nsp-ak-zeichen::before{left:0;top:0}
.nsp-ak-zeichen::after{right:0;bottom:0;background:#25457a}
.nsp-ak-code.nsp-kopiert .nsp-ak-zeichen::after{background:rgba(255,255,255,.9)}

/* --- 5. Knopf ----------------------------------------------------- */
/* min-width haelt die Aufschrift im Knopf. Ohne sie schrumpft er im
   Umbruch auf die Restbreite; auf 320 px waren das 65 px, und
   "Zu den Artikeln" stand quer darueber hinaus (Befund 04.09.2026). */
.nsp-ak-knopf{position:relative;display:block;flex:0 0 auto;height:36px;min-width:126px;
	touch-action:manipulation;
	width:140px;perspective:560px;perspective-origin:50% 34%;
	text-decoration:none;color:#fff}
.nsp-ak-knopf .kt{position:absolute;inset:0;transform-style:preserve-3d;
	transform:rotateX(6deg);
	transition:transform var(--ak-d-standard) var(--ak-e-standard)}
.nsp-ak-knopf:hover .kt,.nsp-ak-knopf:focus-visible .kt{
	transform:rotateX(1deg) translateY(-1px)}
.nsp-ak-knopf:active .kt{transform:rotateX(10deg) translateY(2px)}
.nsp-ak-knopf .kv{position:absolute;inset:0;border-radius:9px;
	background:linear-gradient(156deg,#d8151f,#C0000E 70%);
	display:grid;place-items:center;font:700 15px/1 Helvetica,Arial,sans-serif;
	color:#fff;white-space:nowrap;transform:translateZ(7px);font-size:14.5px;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.nsp-ak-knopf .ku{position:absolute;left:0;right:0;top:50%;height:11px;margin-top:-5.5px;
	background:#5c0008;transform:rotateX(-90deg) translateZ(22px);
	border-radius:0 0 6px 6px}
.nsp-ak-knopf:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:10px}

/* --- 6. Sprachwahl ------------------------------------------------ */
/* 30 x 30 Zielflaeche statt 26 x 18: WCAG 2.2 verlangt 24 x 24, und der
   Umschalter steht direkt neben dem Knopf. Die Farbe sitzt am ::before,
   damit nur die Fahne farbig ist und nicht das ganze Ziel. */
/* Der Sprachumschalter (Schnipsel 294) bringt einen eigenen Trennstrich als
   ::before mit, der ab 1.380 px auf display:block springt. Im Band steht damit
   ein zweiter Strich direkt neben .nsp-ak-strich -- und seine 24 px (1 px
   Strich, 16 px Aussenabstand, 7 px Spalte) nehmen dem Text genau die Reserve,
   die der Satz zum Einzeiligbleiben braucht: das Band wuchs ab 1.380 px von
   80 auf 89 px. Beides erledigt sich mit dieser Zeile (Befund 07.09.2026). */
.nsp-ak .nsp-sprache::before{display:none !important}
.nsp-ak-strich{width:1px;align-self:stretch;margin:4px 0;flex:0 0 auto;
	background:linear-gradient(180deg,transparent,rgba(255,255,255,.28) 22%,
		rgba(255,255,255,.28) 78%,transparent)}
.nsp-ak .nsp-sprache{flex:0 0 auto;margin:0 !important;padding:0 !important;
	position:static !important;transform:none !important}
.nsp-ak .nsp-sprache .nsp-sprache-in{display:flex !important;align-items:center;
	gap:18px !important;position:static !important;margin:0 !important;padding:0 !important}
/* FLIMMERN, behoben am 07.09.2026: Der Link selbst trug beim Ueberfahren ein
   translateY(-2px). Bei 30 px Hoehe heisst das -- steht der Zeiger in den
   unteren zwei Pixeln, rutscht das Element unter ihm weg, der Hover endet, es
   springt zurueck, der Hover beginnt: eine Endlosschleife, die als Flimmern
   sichtbar wird. Deshalb bewegt sich jetzt NUR DAS BILD; die Trefferflaeche
   steht still. Dieselbe Rueckmeldung, kein Wettlauf. */
.nsp-ak .nsp-sprache a.nsp-flagge{display:grid !important;place-items:center;
	width:30px !important;height:30px !important;border-radius:5px;
	transition:background var(--ak-d-schnell) var(--ak-e-standard)}
.nsp-ak .nsp-sprache a.nsp-flagge:hover,
.nsp-ak .nsp-sprache a.nsp-flagge:focus-visible{background:rgba(255,255,255,.16)}
.nsp-ak .nsp-sprache a.nsp-flagge svg{display:block;width:26px !important;height:24px !important;
	border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.4);
	transition:transform var(--ak-d-schnell) var(--ak-e-standard)}
.nsp-ak .nsp-sprache a.nsp-flagge:hover svg{transform:translateY(-2px)}
/* Bei abbestellter Bewegung steht auch das Bild still. */
@media (prefers-reduced-motion:reduce){
	.nsp-ak .nsp-sprache a.nsp-flagge:hover svg{transform:none}
}

/* ==================================================================
   7  DIE MUENZE
   Rund statt eckig: eine Scheibe von 46 px mit 9 px Dicke. Zwei
   Kreisflaechen und ein Mantel aus 28 Streifen — das ist eine
   geriffelte Muenzkante, und sie ist der eigentliche Reiz: Beim Wippen
   wird sie sichtbar und verschwindet wieder.

   DIE HELLIGKEIT DER STREIFEN steht nicht abwechselnd, sondern folgt
   ihrer Lage: oben hell, unten dunkel, seitlich dazwischen. Das ist
   dieselbe feste Lichtrichtung wie bei allen anderen Koerpern im Shop
   — von oben-vorn-links. Ein starrer Wechsel hell/dunkel sieht aus
   nahen Winkeln wie ein Muster; nach Lage gesetzt sieht er aus wie
   Metall.

   ZWEI ACHSEN mit teilerfremden Perioden: 9 s um die Hochachse, 13 s
   um die Querachse. Das Bild wiederholt sich damit erst nach 117
   Sekunden, statt alle neun.

   Bei +/- 30 Grad zeigt die Vorderseite noch 87 % ihrer Breite. Die
   Zahl bleibt also lesbar, waehrend die Kante ins Bild kommt.
   ================================================================== */
.nsp-ak-muenze{flex:0 0 auto;display:block;position:relative;width:40px;height:40px;
	perspective:360px;perspective-origin:50% 42%;overflow:visible;
	transition:transform 260ms var(--ak-e-betont)}
.nsp-ak-karte:hover .nsp-ak-muenze{transform:translateY(-2px) scale(1.05)}
.nsp-ak-schatten{position:absolute;left:50%;bottom:0;width:40px;height:8px;
	margin-left:-20px;border-radius:50%;
	background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));
	animation:nspAkSchatten 9s var(--ak-e-symm) infinite}
.nsp-ak-hof{position:absolute;left:50%;bottom:-4px;width:62px;height:16px;
	margin-left:-31px;border-radius:50%;
	background:radial-gradient(closest-side,rgba(0,0,0,.26),rgba(0,0,0,0))}
@keyframes nspAkSchatten{
	0%,100%{transform:scaleX(.82);opacity:.75}
	50%    {transform:scaleX(1);opacity:.95}}

/* Der Auftritt: die Muenze rollt einmal herein und setzt sich. Er
   laeuft genau einmal; "both" haelt den Anfangswert, bis die
   Verzoegerung abgelaufen ist. */
.nsp-ak-auftritt{position:absolute;left:20px;top:20px;transform-style:preserve-3d;
	animation:nspAkAuftritt 950ms 140ms var(--ak-e-betont) 1 both}
@keyframes nspAkAuftritt{
	0%  {transform:translate3d(-16px,3px,-140px) rotateZ(-24deg);opacity:0}
	55% {opacity:1}
	100%{transform:translate3d(0,0,0) rotateZ(0deg);opacity:1}}

.nsp-ak-wippe{position:absolute;transform-style:preserve-3d;
	animation:nspAkWippe 9s var(--ak-e-symm) infinite}
@keyframes nspAkWippe{
	0%,100%{transform:rotateY(-30deg)}
	50%    {transform:rotateY(30deg)}}
.nsp-ak-nick{position:absolute;transform-style:preserve-3d;
	animation:nspAkNick 13s var(--ak-e-symm) infinite}
@keyframes nspAkNick{
	0%,100%{transform:rotateX(-12deg) translateY(-1px)}
	50%    {transform:rotateX(-5deg)  translateY(1px)}}
.nsp-ak-scheibe{position:absolute;transform-style:preserve-3d}

.nsp-ak-vorn,.nsp-ak-hinten{position:absolute;width:35px;height:35px;
	margin:-17.5px 0 0 -17.5px;border-radius:50%;display:grid;place-items:center}
.nsp-ak-vorn{transform:translateZ(4.5px);
	background:radial-gradient(120% 120% at 32% 24%,#e0303c,#C0000E 58%,#9d000b);
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.24),
		inset 0 0 0 3.5px rgba(0,0,0,.14),
		inset 0 2px 3px rgba(255,255,255,.3),
		inset 0 -2px 3px rgba(0,0,0,.3)}
.nsp-ak-vorn b{font:700 11.5px/1 Helvetica,Arial,sans-serif;color:#fff;
	letter-spacing:0;white-space:nowrap;
	text-shadow:0 -1px 0 rgba(120,0,8,.6),0 1px 0 rgba(255,255,255,.24)}
.nsp-ak-hinten{transform:rotateY(180deg) translateZ(4.5px);
	background:radial-gradient(120% 120% at 32% 24%,#b3000d,#8a000a 70%)}
.nsp-ak-mantel{position:absolute;transform-style:preserve-3d}
.nsp-ak-mantel i{position:absolute;width:7px;height:4.6px;margin:-2.3px 0 0 -3.5px;
	background:#a3000c}

/* --- 8. Schmale Schirme ------------------------------------------- */
/* Nichts wird ausgeblendet, es ordnet sich um:
     Reihe 1  Muenze + Titel + Satz + Sprachwahl
     Reihe 2  Rabattcode + Knopf
   Die Sprachwahl steht dabei im Fluss, nicht absolut — ein absolut
   gesetztes Element nimmt keinen Platz, und genau deshalb lag sie in
   einem frueheren Anlauf ueber dem Text (Befund 04.09.2026). */
/* --- 7b. Zeile wird zu Spalte ------------------------------------- */
/* Die einzeilige Textzeile braucht 551 px (Name 227, Trennpunkt 22, Satz 302).
   Unter 1.268 px reicht der Platz nicht mehr: dann klappt der Satz unter den
   Namen zurueck. Abgeschnitten wird nie etwas -- abgeschnittener Text liest sich
   wie ein Fehler, ein Umbruch nicht (Entscheidung 07.09.2026). */
@media (max-width:1267.98px){
	.nsp-ak-text{flex-direction:column;align-items:flex-start;gap:1px}
	.nsp-ak-satz::before{content:none}
	.nsp-ak-titel{white-space:normal;line-height:1.15}
}

/* --- 7c. Fingerbedienung ------------------------------------------ */
/* 36 px reichen am Zeigegeraet, am Finger nicht: 44 px sind das Mass, das eine
   Fingerkuppe sicher trifft. Entschieden wird nach EINGABEART, nicht nach
   Fensterbreite -- ein Tablet im Querformat braucht grosse Ziele, ein schmales
   Browserfenster am Schreibtisch nicht. */
@media (pointer:coarse){
	.nsp-ak-code{height:44px;padding:0 14px}
	.nsp-ak-knopf{height:44px;min-width:150px}
	.nsp-ak-knopf .ku{height:14px;margin-top:-7px}
	.nsp-ak .nsp-sprache a.nsp-flagge{width:44px;height:44px}
}

@media (max-width:899.98px){
	.nsp-ak-in{flex-wrap:wrap;row-gap:14px}
	.nsp-ak-muenze{order:1}
	.nsp-ak-text{order:2;flex:1 1 150px}
	.nsp-ak .nsp-sprache{order:3;margin-left:auto !important}
	.nsp-ak-tat{order:4;width:100%;gap:16px}
	.nsp-ak-code{flex:1 1 auto}
	.nsp-ak-knopf{flex:1 1 auto;width:auto}
	.nsp-ak-strich{display:none}
}
@media (max-width:619.98px){
	.nsp-ak-titel{font-size:15px;line-height:1.2}
	.nsp-ak-satz{font-size:13.5px;line-height:1.3}
	.nsp-ak-muenze{width:38px;height:38px}
	.nsp-ak-auftritt{left:19px;top:19px}
	.nsp-ak-vorn,.nsp-ak-hinten{width:33px;height:33px;margin:-16.5px 0 0 -16.5px}
	.nsp-ak-vorn b{font-size:11px}
	.nsp-ak-mantel i{width:6.5px;height:4.4px;margin:-2.2px 0 0 -3.25px}
	.nsp-ak-in{padding:10px 12px 12px}
	.nsp-ak-text{flex:1 1 130px}
	/* Das Wort weicht dem Zeichen — dieselbe Angabe, andere Form. Ohne
	   das braeuchten Code und Knopf 345 px bei 337 px Spur. */
	.nsp-ak-wort{display:none}
	.nsp-ak-zeichen{display:block}
	.nsp-ak-code em{margin-left:9px;padding-left:0;border-left:none}
	.nsp-ak-code{flex:0 0 auto;padding:0 11px}
	.nsp-ak-code b{font-size:12px}
	.nsp-ak-knopf .kv{font-size:13px}
}
@media (max-width:389.98px){
	/* 15,5px ergaben 134 px Wortbreite bei 131 px Spalte:
	   "Langzeit-Blutdruckmessung" lief 3 px ueber (Befund 07.09.2026). */
	.nsp-ak-titel{font-size:14.5px}
	.nsp-ak-code{padding:0 10px}
	.nsp-ak-knopf .kv{font-size:13px}
}
/* Bis 374 px passen Code und Knopf nicht mehr nebeneinander. Statt beide
   untereinander ueber die volle Breite zu legen (vier Zeilen, 290 px Bandhoehe
   bei 320 px Schirm), wird die Gruppe per display:contents aufgeloest: Code und
   Sprachwahl teilen sich eine Zeile, der Knopf bekommt die naechste. Das sind
   drei Zeilen und 72 px weniger -- gemessen am 07.09.2026 ueber 22 Breiten. */
@media (max-width:374.98px){
	.nsp-ak-tat{display:contents}
	.nsp-ak-code{order:4;flex:0 1 auto;width:auto}
	.nsp-ak .nsp-sprache{order:5;margin-left:auto !important}
	.nsp-ak-knopf{order:6;flex:1 1 100%;width:100%}
}

/* --- 9. Bewegung abbestellt --------------------------------------- */
@media (prefers-reduced-motion:reduce){
	.nsp-ak-auftritt,.nsp-ak-wippe,.nsp-ak-nick,.nsp-ak-schatten{animation:none}
	.nsp-ak-auftritt{transform:none;opacity:1}
	.nsp-ak-wippe{transform:rotateY(-18deg)}
	.nsp-ak-nick{transform:rotateX(-9deg)}
	.nsp-ak-muenze{transition:none}
}

/* --- 10. Druck ---------------------------------------------------- */
@media print{.nsp-ak{display:none}}
/* nsp-korb-v2 */
/* ================================================================
   A  Aufklappfeld im Kopfbereich (Blocksy .ct-cart-content)
   ================================================================ */
.ct-cart-content{
  width:340px;max-width:min(360px,calc(100vw - 24px));
  border:1px solid #dde5f1;border-radius:12px;
  box-shadow:0 20px 44px rgba(24,34,52,.16);
  padding:16px 16px 14px}

/* Kopfzeile (Schnipsel 122): Titel traegt die Stufe, die Zaehlung tritt zurueck. */
.ct-cart-content .nsp-kf-korbkopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9eef7}
.ct-cart-content .nsp-kf-korbkopf b{font-size:16px;font-weight:700;color:#1F3A68}
.ct-cart-content .nsp-kf-korbkopf span{font-size:12.5px;color:#5a6a87;white-space:nowrap}

/* Liste: Rollbereich statt unbegrenzter Hoehe. 320 px fassen vier
   Positionen; die fuenfte schaut an - der billigste Rollhinweis. */
.ct-cart-content ul.woocommerce-mini-cart{
  max-height:320px;overflow-y:auto;overscroll-behavior:contain;
  margin:0;padding:0 4px 0 0;list-style:none}
.ct-cart-content ul.woocommerce-mini-cart::-webkit-scrollbar{width:8px}
.ct-cart-content ul.woocommerce-mini-cart::-webkit-scrollbar-thumb{
  background:#d5dded;border-radius:4px}

.ct-cart-content li.woocommerce-mini-cart-item{
  position:relative;display:grid;
  grid-template-columns:56px minmax(0,1fr);
  column-gap:12px;align-items:start;
  margin:0;padding:12px 34px 12px 0;border-bottom:1px solid #f0f4fa}
.ct-cart-content li.woocommerce-mini-cart-item:last-child{border-bottom:0}

.ct-cart-content li.woocommerce-mini-cart-item .ct-media-container,
.ct-cart-content li.woocommerce-mini-cart-item > a:not(.remove):first-of-type{
  grid-row:1 / span 2;width:56px;height:56px;
  border:1px solid #eef2f8;border-radius:8px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Gedehnt wird nur das Bild IM Medienkasten. Bis zum 18.09.2026 stand hier
   `li ... img`, also jedes Bild der Zeile. An der Kasse legt Germanized ein
   zweites Vorschaubild in den Artikelnamen (div.wc-gzd-cart-item-thumbnail);
   es wurde dadurch 181 px gross, die Position 267 statt 105 px hoch. Gefunden
   hat es der Inhaber, nicht die Pruefung - die Vorschau war in keinem
   Bildvergleich (F-2026-09-18-m). */
.ct-cart-content li.woocommerce-mini-cart-item .ct-media-container img,
.ct-cart-content li.woocommerce-mini-cart-item > a:not(.remove):first-of-type img{
  width:100%;height:100%;object-fit:contain;margin:0}
/* Alles, was ein fremdes Plugin rechts in die Zeile legt, doppelt den
   Medienkasten links. In einem 320 px hohen Feld ist dafuer kein Platz.
   Die Regel greift nach Bereich, nicht nach Pluginnamen - sonst faengt sie
   das naechste Plugin wieder nicht. */
.ct-cart-content li.woocommerce-mini-cart-item .product-data img{display:none}

.ct-cart-content .product-data{min-width:0}
.ct-cart-content a.product-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:14.5px;font-weight:600;line-height:1.32;color:#1F3A68;
  text-decoration:none;overflow-wrap:break-word;hyphens:auto}
.ct-cart-content a.product-title:hover{color:#C0000E}
.ct-cart-content .nsp-kf-korbnr{
  display:block;margin:3px 0 0;font-size:11.5px;color:#5a6a87;
  font-variant-numeric:tabular-nums}
/* Menge und Zeilenbetrag in eine eigene, lesbare Zeile. */
.ct-cart-content .quantity{
  display:block;margin:5px 0 0;font-size:13.5px;color:#1c2333;
  font-variant-numeric:tabular-nums}
.ct-cart-content .quantity .woocommerce-Price-amount{font-weight:700;color:#1F3A68}

/* Entfernen: 36 px Trefferflaeche, Farbe erst beim Ueberfahren. */
.ct-cart-content li.woocommerce-mini-cart-item a.remove{
  position:absolute;top:10px;right:0;width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;color:#8593ac;background:transparent;font-size:0;line-height:1}
.ct-cart-content li.woocommerce-mini-cart-item a.remove:hover{
  color:#C0000E;background:#fdeef0}
.ct-cart-content li.woocommerce-mini-cart-item a.remove svg{width:13px;height:13px}

/* Zwischensumme: vorher 12 px - die kleinste Zahl im Feld war die wichtigste. */
.ct-cart-content .woocommerce-mini-cart__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:12px 0 0;padding:12px 0 0;border-top:1px solid #e9eef7;
  font-size:15px;font-weight:600;color:#1c2333;text-transform:none;letter-spacing:0}
.ct-cart-content .woocommerce-mini-cart__total strong{
  font-size:15px;font-weight:600;color:#1c2333}
.ct-cart-content .woocommerce-mini-cart__total .woocommerce-Price-amount{
  font-size:19px;font-weight:800;color:#1F3A68;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* Versandfrei (Schnipsel 66) schlanker. */
.ct-cart-content .nsp-mk-vf{margin:12px 0 0;padding:11px 12px;
  background:#f4f8fd;border:1px solid #e4ecf7;border-radius:9px}
.ct-cart-content .nsp-mk-vf-txt{margin:0 0 7px;font-size:13px;line-height:1.4;color:#1c2333}
.ct-cart-content .nsp-mk-vf-fuss{font-size:11.5px;color:#5a6a87}

/* Versandkostenhinweis bleibt (PAngV), tritt aber als Fussnote zurueck. */
.ct-cart-content p.shipping-costs-cart-info{
  margin:9px 0 0;font-size:11.5px;line-height:1.4;color:#5a6a87}
.ct-cart-content p.shipping-costs-cart-info a{color:#5a6a87;text-decoration:underline}

.ct-cart-content .woocommerce-mini-cart__buttons{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.ct-cart-content .woocommerce-mini-cart__buttons a.button{
  width:100%;margin:0;min-height:46px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;
  white-space:nowrap;padding:11px 12px}
.ct-cart-content .woocommerce-mini-cart__buttons a.button:not(.checkout){
  background:#fff;color:#1F3A68;border:1.5px solid #1F3A68}
.ct-cart-content .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{
  background:#1F3A68;color:#fff}
.ct-cart-content .woocommerce-mini-cart__buttons a.button.checkout{
  background:#C0000E;color:#fff;border:1.5px solid #C0000E}
.ct-cart-content .woocommerce-mini-cart__buttons a.button.checkout:hover{
  background:#9A000B;border-color:#9A000B}
.ct-cart-content a.button:focus-visible{outline:3px solid #1F3A68;outline-offset:2px}

/* Leerer Korb: ein Weg statt einer Feststellung. */
.ct-cart-content p.woocommerce-mini-cart__empty-message{
  margin:6px 0 0;font-size:14px;color:#5a6a87}

/* ================================================================
   B  Warenkorbseite
   ================================================================ */
/* Der Codechip ist fuer das dunkle Meldeband gebaut (weiss auf 12 %
   Weiss). Im hellen Hinweiskasten war er unlesbar - gemessen 19.08.2026. */
.nispel-akt-korb .nispel-akt-code,
.woocommerce .nispel-akt-korb .nispel-akt-code{
  background:#eaf0f9;color:#1F3A68;border:1px solid #cfdaee;
  padding:3px 9px;border-radius:6px;font-weight:700;letter-spacing:.5px}

/* Designsystem: keine Versalien in Tabellenkoepfen. */
.woocommerce table.shop_table thead th,
.woocommerce-cart table.cart thead th{
  text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;
  color:#5a6a87;padding-block:12px}

/* Ware groesser zeigen: 40 px reichten nicht, um zwei Manschetten
   zu unterscheiden. Die Regel nennt die Bildzelle, nicht den Elementnamen:
   ".woocommerce table.cart img" traf jedes Bild in der Tabelle, auch eines,
   das ein Plugin spaeter in eine andere Zelle haengt - dieselbe Bauart hat am
   18.09.2026 an der Kasse ein Germanized-Bild auf 181 px aufgeblasen
   (F-2026-09-18-m). */
.woocommerce table.cart td.product-thumbnail img{
  width:64px;height:64px;object-fit:contain;
  border:1px solid #eef2f8;border-radius:8px;background:#fff}

/* Ein Produktname darf umbrechen - abgeschnitten werden darf er nicht.
   Gemessen 18.09.2026 bei 320 px: "GCE Medimeter Flowmeter Sauerstoff 0-16
   l/min" lief rechts aus der Tabelle, "0-" war weg.

   Die Regel gilt dem Namenslink und nur bis 600 px - zwei Einschraenkungen,
   die beide aus dem Bildvergleich stammen (korbname18):
   - Auf der ganzen Zelle traf sie auch die Preisangabe, die bis 600 px in
     dieser Zelle steht: aus "79,00 EUR" wurde "79,0 / 0 EUR".
   - `anywhere` senkt zusaetzlich die Mindestbreite der Zelle. Bei 1024 px
     schrumpfte die Namensspalte dadurch auf rund 50 px, und der Name stand
     buchstabenweise untereinander ("GCE Medi mete r Flow mete r"). Oberhalb
     von 600 px war ohnehin nichts abgeschnitten, also gilt die Regel dort
     nicht. */
@media (max-width:600px){
  .woocommerce table.cart td.product-name a{overflow-wrap:anywhere}
}

/* Gleiche Absicherung wie in der Vorschau: Bilder gehoeren in die Bildzelle.
   Legt ein Plugin eines in die Namenszelle - Germanized tut das an der Kasse -,
   stuende es doppelt in der Zeile (F-2026-09-18-m). Gemessen wurde hier bisher
   keines; die Regel steht vorbeugend, weil dieselbe Bauart einmal schon
   zugeschlagen hat. */
.woocommerce table.cart td.product-name img{display:none}

/* Am Telefon war die Bildzelle 33 px breit und das Bild ein 9-px-Punkt (gemessen
   14.09.2026 bei 390 px). Der Artikelname daneben fuehrt zur selben Seite - bis 600 px
   entfaellt das Bild, statt die Mengen-Knoepfe aus der Zeile zu draengen. */
@media (max-width:600px){
  .woocommerce-cart table.cart td.product-thumbnail,
  .woocommerce-cart table.cart th.product-thumbnail{display:none}
}

.woocommerce-cart table.cart td{padding-block:14px}
.woocommerce-cart table.cart td.product-name a{
  font-size:15px;font-weight:600;color:#1F3A68;text-decoration:none}
.woocommerce-cart table.cart td.product-name a:hover{color:#C0000E}

/* Summenkarte: die Endsumme ist die Zahl, wegen der die Seite da ist. */
.woocommerce .cart_totals .order-total td,
.woocommerce .cart_totals .order-total th{
  font-size:16px;font-weight:700;color:#1F3A68}
.woocommerce .cart_totals .order-total .woocommerce-Price-amount{
  font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}

/* Empfehlungen: eigener Bereich, nur mit Inhalt sichtbar. */
/* Empfehlungsreihe (WooCommerce Cross-Sells). Ohne Kachelbegrenzung gibt
   das Theme drei Spalten auf 1.290 px aus - eine einzelne Empfehlung wurde
   dadurch 581 px hoch. Und ohne Inhalt verschwindet sie samt Ueberschrift. */
.cross-sells{margin:30px 0 0}
.cross-sells > h2{font-size:24px;color:#1F3A68;margin:0 0 14px}
.cross-sells ul.products{
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))!important}
.cross-sells:not(:has(li.product)){display:none}

/* ================================================================
   C  Die beiden anderen Aufklappfelder derselben Familie (Schnipsel 122)
   ================================================================
   Sie tragen seit dem 05.08.2026 Blocksys alte Werte: Radius 6, Schatten
   0 10px 20px, Titel 15 px. Neben dem neu gefassten Warenkorbfeld sahen sie
   aus wie aus einer anderen Zeit. Angeglichen werden NUR Maszstab und
   Oberflaeche - der Inhalt bleibt, wie der Inhaber ihn bestellt hat:
   "Bei der Schnellbestellung soll man nur eine Info erhalten, nicht direkt
   dort eintragen" (05.08.2026, dokumentiert in Schnipsel 122). Ein
   Eingabefeld kommt deshalb hier NICHT zurueck. */
.nsp-kf{width:320px;max-width:min(340px,calc(100vw - 24px));padding:18px;
  border:1px solid #dde5f1;border-radius:12px;
  box-shadow:0 20px 44px rgba(24,34,52,.16)}
.nsp-kf-titel{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.3}
.nsp-kf p{font-size:13.5px;line-height:1.5;color:#3d4a63}
.nsp-kf-schritte{margin:0 0 14px}
.nsp-kf-schritte li{padding-left:30px;margin:0 0 9px;font-size:13.5px;
  line-height:1.45;color:#3d4a63}
.nsp-kf-schritte li::before{width:22px;height:22px;font-size:12.5px;font-weight:700;
  background:#e8eefa;color:#1F3A68}
.nsp-kf-punkte li{font-size:13.5px;line-height:1.5;color:#3d4a63}
.nsp-kf-musterkopf{margin:0 0 5px;font-size:12px;color:#5a6a87}
.nsp-kf-muster{padding:10px 12px;border-radius:8px;font-size:12.5px;line-height:1.45}
.nsp-kf-wege{display:grid;gap:9px;margin-top:14px}
.nsp-kf-weg{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;border-radius:9px;font-size:14px;font-weight:700;
  text-transform:none;letter-spacing:0;text-decoration:none;
  border:1.5px solid #1F3A68;background:#fff;color:#1F3A68}
.nsp-kf-weg:hover{background:#eef3fb}
.nsp-kf-haupt{background:#1F3A68;color:#fff}
.nsp-kf-haupt:hover{background:#16294a;color:#fff}
.nsp-kf-weg:focus-visible{outline:3px solid #1F3A68;outline-offset:2px}

@media (max-width:560px){
  .ct-cart-content{width:min(340px,calc(100vw - 20px));padding:14px}
  .ct-cart-content ul.woocommerce-mini-cart{max-height:min(320px,42vh)}
  .ct-cart-content .woocommerce-mini-cart__buttons{grid-template-columns:1fr}
}

/* ================================================================
   D  Nachtrag 19.08.2026: drei Regeln, die ohne Vorrang verlieren
   ================================================================
   Gemessen nach dem ersten Einspielen (pruefung/kaskade_1908.py):
   Die Stilblaetter der Schnipsel 6, 66 und 122 stehen SPAETER im
   Dokument als dieses hier (Kopf), obwohl sie dieselbe Spezifitaet
   tragen - bei Gleichstand gewinnt das spaetere. Betroffen waren
   Breite, Radius und Schatten der Aufklappfelder. Ein zusaetzliches
   body im Selektor genuegt (0,0,1,1 gegen 0,0,1,0); nur beim
   Rabattcode im Warenkorb, dessen Quelle sich nicht aufloesen liess,
   steht !important - dort war die Schrift weiss auf weissem Grund,
   also unlesbar. */
body .ct-cart-content{width:340px;max-width:min(360px,calc(100vw - 24px));
  border:1px solid #dde5f1;
  /* Nachgemessen 19.08.2026: Breite und Schatten greifen jetzt, der Radius
     nicht - eine spaetere Regel mit zwei Klassen schlaegt body+Klasse.
     Hier steht deshalb ein begruendetes !important (Designsystem Regel 25). */
  border-radius:12px!important;
  box-shadow:0 20px 44px rgba(24,34,52,.16);padding:16px 16px 14px}
body .nsp-kf{width:320px;max-width:min(340px,calc(100vw - 24px));padding:18px;
  border:1px solid #dde5f1;border-radius:12px;
  box-shadow:0 20px 44px rgba(24,34,52,.16)}
body .nsp-kf-titel{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.3}
body .nsp-kf-schritte li::before{width:22px;height:22px;font-size:12.5px;font-weight:700;
  background:#e8eefa;color:#1F3A68}
body .nsp-kf-weg{min-height:46px;border-radius:9px;font-size:14px}
body .nispel-akt-korb .nispel-akt-code{
  background:#eaf0f9!important;color:#1F3A68!important;
  border:1px solid #cfdaee!important;padding:3px 9px;border-radius:6px;
  font-weight:700;letter-spacing:.5px}

/* ================================================================
   E  Querlauf 19.08.2026: derselbe Tooltip, ein anderer Fall
   ================================================================
   Am 17.08. war der Kopierhinweis .nispel-akt-code::after als Ursache
   von 31 px Ueberhang gefunden und hinter @media (hover:none)
   abgeschaltet worden - damit ist er auf Touchgeraeten weg.
   Gemessen am 19.08.2026, beide Faelle belegt:
     echtes Telefon (Touch, hover:none)  scrollWidth 390 = sauber
     schmales Fensterfenster am Rechner  scrollWidth 420 = 30 px Ueberhang
   Der Hinweis ist 156 px breit, absolut positioniert und zaehlt damit in
   den scrollWidth des Bandes; das Band selbst klemmt nicht. Wer sein
   Browserfenster schmal zieht (geteilter Bildschirm), bekommt deshalb
   waagerechtes Rollen auf JEDER Seite ausser der Startseite - dort faengt
   das overflow-x:clip aus Schnipsel 132 es ab, aber nur fuer body.home.
   Loesung ohne Klemmen: unter 760 px braucht ihn niemand. */
@media (max-width:759px){
  .nispel-akt-code::after{content:none!important}
}

/* ================================================================
   F  Das Feld passt sich der Fensterhoehe an (19.08.2026, 2. Runde)
   ================================================================
   Gemeldet: "wenn man ueber den Warenkorb geht, darf nichts ueberlappen".
   Gemessen mit drei Positionen: das Feld war starr 662 px hoch, egal wie
   hoch das Fenster ist. Oberkante 167 px.
     Fenster 900 px  Knoepfe bei 814  -> 86 px Luft
     Fenster 768 px  Knoepfe bei 814  -> 46 px UNTER dem Rand, unerreichbar
   Eine feste Hoehe fuer die Liste (320 px) reicht nicht: sie begrenzt die
   Liste, nicht das Feld. Jetzt ist das FELD an die Fensterhoehe gekoppelt,
   Kopf und Fuss stehen fest, nur die Liste rollt. Zwischensumme und beide
   Knoepfe sind damit immer sichtbar, egal wie voll der Korb ist. */
body .ct-cart-content{
  /* Gemessen 19.08.2026: max-height greift, display NICHT - eine spaetere
     Regel setzt das Feld auf display:block, und dann verteilt Flexbox gar
     nichts: die Liste behaelt ihre 340 px und Summe samt Knoepfen laufen
     unten aus dem Feld heraus (Knoepfe konstant bei y=817, egal wie hoch
     das Fenster war). Deshalb hier !important - ohne das Flex-Layout ist
     die Hoehenbegrenzung wirkungslos. */
  max-height:calc(100vh - 190px);
  padding:14px 14px 12px}
/* Das Flex-Layout NUR im geoeffneten Zustand setzen. Blocksy oeffnet das
   Feld mit .ct-header-cart:hover .ct-cart-content{display:block!important}
   und haelt es sonst auf display:none. Eine allgemeine Regel mit
   display:flex!important wuerde es dauerhaft offen stehen lassen - deshalb
   hier derselbe Selektorsatz mit einem body davor (gewinnt bei gleichem
   !important ueber die hoehere Spezifitaet). */
body .ct-header-cart:hover .ct-cart-content,
body .ct-header-cart:focus-within .ct-cart-content,
body .ct-cart-content.ct-active{
  display:flex!important;flex-direction:column!important}
body .ct-cart-content > *{flex:0 0 auto}
body .ct-cart-content ul.woocommerce-mini-cart{
  /* flex:1 1 0% statt 1 1 auto - mit auto bleibt die natuerliche Hoehe die
     Basis, und die Liste schrumpft nicht, obwohl der Fuss darunter aus dem
     Feld laeuft (gemessen 19.08.2026: Feld 554 px, Kinder zusammen 612 px,
     Knoepfe 72 px unterhalb der Feldunterkante). Mit der Basis 0 nimmt die
     Liste genau den Platz, den Kopf und Fuss uebrig lassen. */
  flex:1 1 0%;min-height:104px;max-height:none;
  /* Rollschatten oben und unten: zeigt ohne Skript, dass mehr da ist. */
  background:
    linear-gradient(#fff 32%, rgba(255,255,255,0)) top / 100% 22px no-repeat local,
    linear-gradient(rgba(255,255,255,0), #fff 68%) bottom / 100% 22px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(31,58,104,.13), rgba(31,58,104,0)) top / 100% 9px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(31,58,104,.13), rgba(31,58,104,0)) bottom / 100% 9px no-repeat scroll;
  scrollbar-width:thin;scrollbar-color:#cdd8ec transparent}
body .ct-cart-content ul.woocommerce-mini-cart::-webkit-scrollbar{width:6px}
body .ct-cart-content ul.woocommerce-mini-cart::-webkit-scrollbar-track{background:transparent}
body .ct-cart-content ul.woocommerce-mini-cart::-webkit-scrollbar-thumb{
  background:#cdd8ec;border-radius:3px}
body .ct-cart-content ul.woocommerce-mini-cart:hover::-webkit-scrollbar-thumb{background:#a9b8d6}

/* Der Fuss ruht: Summe, Versandfrei und Knoepfe als ein Block mit einer
   Trennlinie darueber statt drei einzelnen Kaesten. Die Versandkostenzeile
   (PAngV) sitzt jetzt am Versandfrei-Kasten und kostet keine eigene Zeile. */
body .ct-cart-content .woocommerce-mini-cart__total{
  margin:10px 0 0;padding:11px 0 0;border-top:1px solid #e9eef7}
body .ct-cart-content .nsp-mk-vf{margin:10px 0 0;padding:10px 11px}
body .ct-cart-content .nsp-mk-vf-txt{margin:0 0 6px;font-size:12.5px}
body .ct-cart-content .nsp-mk-vf-fuss{font-size:11px}
body .ct-cart-content p.shipping-costs-cart-info{
  margin:6px 0 0;padding:0;font-size:11px;color:#8593ac}
body .ct-cart-content .woocommerce-mini-cart__buttons{margin:12px 0 0;gap:8px}

/* Positionen etwas straffer: bei gleicher Fensterhoehe passt eine mehr ins
   Bild, ohne dass die Zeile gedraengt wirkt. */
body .ct-cart-content li.woocommerce-mini-cart-item{padding:10px 34px 10px 0}

@media (max-width:782px){
  body .ct-cart-content{max-height:calc(100vh - 150px)}
}

/* ================================================================
   G  Nichts darf sich ueberlagern (19.08.2026, 2. Runde)
   ================================================================
   Die Zulege-Einblendung (Schnipsel 22/88) liegt fest im Fenster mit
   z-index 99999 und deckte im geoeffneten Warenkorbfeld die beiden Knoepfe
   ab. Das Skript weiter unten raeumt sie beim Ueberfahren weg, aber es
   haengt an einem Ereignis - ein reiner CSS-Weg ist verlaesslicher und
   greift auch, wenn die Einblendung erst waehrend des Schwebens erscheint.
   :has() ist in allen drei Motoren vorhanden (gegengeprueft in WebKit). */
body:has(.ct-header-cart:hover) .nispel-korb,
body:has(.ct-header-cart:focus-within) .nispel-korb{
  opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* Und das Feld selbst liegt ueber allem anderen, was im Kopfbereich klebt. */
body .ct-cart-content{z-index:100000}

/* ================================================================
   H  Aufklappfeld: Kopf in Navy, Summe als Balken (19.08.2026)
   ================================================================
   Inhaber: "den Kasten beim Warenkorb auch nochmal schoener gestalten".
   Das Feld bekommt denselben farbigen Kopf wie das Bestellfeld (Schnipsel
   122) - drei Felder im Kopfbereich, eine Sprache. Die negativen Raender
   heben den Innenabstand von 16 px auf, damit der Kopf bis an die Kante
   geht; das Feld selbst behaelt sein Polster fuer alles Uebrige. */
body .ct-cart-content .nsp-kf-korbkopf{
  margin:-16px -16px 12px!important;padding:13px 16px!important;
  border-bottom:0!important;border-radius:11px 11px 0 0;
  background:linear-gradient(122deg,#1F3A68 0%,#2d5596 100%)}
body .ct-cart-content .nsp-kf-korbkopf b{color:#fff!important;font-size:15px}
body .ct-cart-content .nsp-kf-korbkopf span{color:#c3d4ee!important;font-size:12px}

/* Die Zwischensumme ist die Zahl, auf die es ankommt - sie bekommt eine
   eigene Flaeche statt nur einer Trennlinie. */
body .ct-cart-content .woocommerce-mini-cart__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:10px 0 0!important;padding:10px 12px!important;border-radius:9px;
  background:#f4f7fc;border:1px solid #e4ecf8;border-top:1px solid #e4ecf8!important}
body .ct-cart-content .woocommerce-mini-cart__total strong{
  font-size:13.5px;font-weight:600;color:#3d4a63}
body .ct-cart-content .woocommerce-mini-cart__total .woocommerce-Price-amount{
  font-size:19px;font-weight:800;color:#1F3A68;font-variant-numeric:tabular-nums}

/* Der Versandfrei-Hinweis stand als grosser gruener Kasten unter der Summe
   und zog mehr Aufmerksamkeit als der Weg zur Kasse. Jetzt eine ruhige
   Zeile mit Balken - dieselbe Aussage, halbe Lautstaerke. */
body .ct-cart-content .nsp-mk-vf{
  margin:8px 0 0!important;padding:9px 12px!important;border-radius:9px;
  font-size:12.5px;line-height:1.45}
body .ct-cart-content .nsp-mk-vf-fertig{background:#f1f8f3;border:1px solid #d5e9dc}
/* Ist das Ziel erreicht, sagt ein zu 100 % gefuellter Balken nichts mehr -
   er nimmt nur Hoehe. Die Fusszeile mit dem Warenwert steht schon in der
   Zwischensumme darueber. */
body .ct-cart-content .nsp-mk-vf-fertig .nsp-mk-vf-bahn,
body .ct-cart-content .nsp-mk-vf-fertig .nsp-mk-vf-fuss{display:none}
body .ct-cart-content .nsp-mk-vf-txt{margin:0!important;font-size:12.5px;line-height:1.45}

body .ct-cart-content .shipping-costs-cart-info{
  margin:8px 0 0!important;font-size:11.5px;color:#5a6a87}
body .ct-cart-content .woocommerce-mini-cart__buttons{margin:12px 0 0!important}