.jkr-orders .checkout-step { max-width: 960px; margin: 0 auto; }
.jkr-orders__wrap { overflow-x: auto; }
.jkr-orders__table { width: 100%; border-collapse: collapse; }
.jkr-orders__table thead th {
	text-align: left; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
	color: #6b7280; font-weight: 600; padding: .55rem .75rem; border-bottom: 2px solid #e5e7eb;
}
.jkr-orders__table tbody td { padding: .95rem .75rem; border-bottom: 1px solid #eef0f2; vertical-align: middle; }
.jkr-orders__table tbody tr:last-child td { border-bottom: 0; }
.jkr-orders__no { font-weight: 600; }
.jkr-orders__num { text-align: right; white-space: nowrap; }
.jkr-orders__act { text-align: right; white-space: nowrap; }
.jkr-orders__status {
	display: inline-block; padding: .25rem .65rem; border-radius: 999px;
	font-size: .8rem; font-weight: 600; background: #eef0f2; color: #374151;
}
/* abgeschlossen / bezahlt -> gruen */
.jkr-orders__status[data-status="signed"], .jkr-orders__status[data-status="paid"], .jkr-orders__status[data-status="sent"] { background: #e6f4ea; color: #1e7e34; }
/* storniert / abgelehnt -> rot */
.jkr-orders__status[data-status="canceled"], .jkr-orders__status[data-status="cancelled"], .jkr-orders__status[data-status="declined"] { background: #fde8e8; color: #b02a37; }
/* in Bearbeitung / Unterlagen ausstehend -> gelb */
.jkr-orders__status[data-status="awaiting_upload"], .jkr-orders__status[data-status="prepared"], .jkr-orders__status[data-status="pending"], .jkr-orders__status[data-status="open"] { background: #fef3cd; color: #8a6d00; }
/* Anfrage eingegangen -> blau/neutral */
.jkr-orders__status[data-status="requested"] { background: #e7f0fb; color: #1f5fae; }
.jkr-orders__detail {
	display: inline-block; white-space: nowrap;
	padding: .3rem .75rem; font-size: .85rem; line-height: 1.4;
	background: #000; color: #fff; border: 0; border-radius: 4px;
	text-decoration: none; transition: background-color .15s ease;
}
.jkr-orders__detail:hover, .jkr-orders__detail:focus { background: #333; color: #fff; text-decoration: none; }
.jkr-orders__empty { padding: 2.5rem 1rem; text-align: center; color: #6b7280; }
@media (max-width: 640px) {
	.jkr-orders__table thead { display: none; }
	.jkr-orders__table, .jkr-orders__table tbody, .jkr-orders__table tr, .jkr-orders__table td { display: block; width: 100%; }
	.jkr-orders__table tr { border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: .85rem; padding: .35rem .65rem; }
	.jkr-orders__table td { border: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem .25rem; }
	.jkr-orders__table td::before { content: attr(data-label); font-weight: 600; color: #6b7280; }
	.jkr-orders__num, .jkr-orders__act { text-align: right; }
}

/* Detailansicht */
.jkr-orders__backrow { margin-bottom: 1rem; }
.jkr-orders__back { font-size: .9rem; text-decoration: none; color: #374151; }
.jkr-orders__back:hover { text-decoration: underline; }
.jkr-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .85rem 1.5rem; margin: 0 0 1.75rem; }
.jkr-detail-grid > div { display: flex; flex-direction: column; gap: .15rem; }
.jkr-detail-grid dt { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; font-weight: 600; margin: 0; }
.jkr-detail-grid dd { margin: 0; }
.jkr-detail-h4 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 .65rem; }
.jkr-detail-address { font-size: .95rem; line-height: 1.55; color: #374151; }
.jkr-detail-address__row { display: flex; gap: .5rem; }
.jkr-detail-address__label { min-width: 160px; color: #6b7280; }
.jkr-detail-custom { font-size: .85rem; color: #6b7280; margin-top: .2rem; }
.jkr-orders__totalrow td { border-top: 2px solid #e5e7eb; padding-top: .8rem; }
.jkr-detail-buttons { margin-top: 1.5rem; }
@media (max-width: 640px) {
	.jkr-orders__foot-spacer { display: none; }
	.jkr-detail-address__row { flex-direction: column; gap: 0; }
	.jkr-detail-address__label { min-width: 0; }
}

/* Verdeckte Werte: das Kundenkennwort des Anbieters (O2: PKK, Vodafone/Telekom:
   Kennwort). Die IBAN stand hier bis zum 18.08.2026 ebenfalls verdeckt und ist
   seither wieder im Klartext (Vorgabe Auftraggeber) — sie ist kein
   Authentifizierungsmerkmal, ein Kennwort schon.

   Weichgezeichnet wird eine ZUFALLSFOLGE, nicht der echte Teil — Begründung in
   JKR\JkrShop\ViewHelpers\VerdeckterWertViewHelper. Deshalb ist
   `user-select: none` hier kein Sicherheitsmerkmal, sondern Bequemlichkeit: es
   verhindert, dass man versehentlich eine falsche Folge kopiert. */
/* padding: 0 statt "0 .15rem" (Vorgabe Auftraggeber 11.08.2026). Die 0,15rem
   links und rechts liessen den verdeckten Wert breiter wirken als den
   danebenstehenden Klartext, weil der Schalter inline zwischen laufendem Text
   steht. Der Fokusrahmen bleibt sichtbar: er sitzt an :focus-visible mit
   outline-offset: 2px und braucht kein Innenpolster. */
.jkr-verdeckt { appearance: none; -webkit-appearance: none; border: 0; background: none; margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: baseline; border-radius: 3px; position: relative; }
.jkr-verdeckt:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* Eigener Hinweis rechts neben dem Wert, ohne Verzögerung.
   Bewusst KEIN title-Attribut: dessen Tooltip erscheint erst nach etwa einer
   Sekunde, sitzt am Mauszeiger statt am Element und lässt sich nicht gestalten.
   Der Text steht in data-jkr-hinweis und wird beim Umschalten mitgeführt, damit
   Hinweis und Zustand nicht auseinanderlaufen. */
.jkr-verdeckt::after { content: attr(data-jkr-hinweis); position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: .5rem; padding: .2rem .45rem; background: #111827; color: #fff; font-size: .78rem; line-height: 1.3; letter-spacing: normal; white-space: nowrap; border-radius: 3px; opacity: 0; visibility: hidden; pointer-events: none; z-index: 5; }
.jkr-verdeckt:hover::after, .jkr-verdeckt:focus-visible::after { opacity: 1; visibility: visible; }

/* Schmale Schirme: der Hinweis würde rechts aus dem Bild laufen, weil die Zeile
   dort ohnehin umbricht. Deshalb darunter statt daneben. */
@media (max-width: 640px) {
	.jkr-verdeckt::after { left: 0; top: 100%; transform: none; margin: .25rem 0 0; }
}

/* Kein gap und kein letter-spacing zwischen den Abschnitten: bei der IBAN
   stoßen sichtbarer Anfang, verdeckte Mitte und sichtbares Ende unmittelbar
   aneinander, sonst läse man dort eine Lücke, die es im Wert nicht gibt. */
.jkr-verdeckt__klar { white-space: pre; }
.jkr-verdeckt__platzhalter { filter: blur(5px); user-select: none; white-space: pre; font-variant-numeric: tabular-nums; transition: filter .15s ease; }

/* Aufgedeckt: scharf, markierbar, und kein Zeigefinger mehr — der zweite Klick
   verbirgt wieder, das soll aber nicht wie der Hauptzweck aussehen.

   blur(0px) und NICHT none: nur zwischen zwei Filterlisten ist der Übergang
   zweifelsfrei interpolierbar und liefert am Ende verlässlich ein
   transitionend-Ereignis. Genau darauf wartet meine-bestellungen.js, bevor es
   beim Verbergen die Zeichen zurücktauscht. Mit `none` hängt das am Grenzfall
   „Filterliste gegen Schlüsselwort", und der Zeichentausch verließe sich auf
   den Notausgang statt auf das Ereignis. Die Einheit ist mitgeschrieben, weil
   0 innerhalb einer Filterfunktion nicht überall als Länge durchgeht. */
.jkr-verdeckt.is-sichtbar .jkr-verdeckt__platzhalter { filter: blur(0px); user-select: text; }
.jkr-verdeckt.is-sichtbar { cursor: default; }

/* Ohne Bewegung kein Warten: das Skript liest die Dauer aus der CSS und tauscht
   die Zeichen dann unmittelbar, statt auf ein Ereignis zu warten, das hier nie
   käme. */
@media (prefers-reduced-motion: reduce) {
	.jkr-verdeckt__platzhalter { transition: none; }
}

/* Ohne JavaScript bleibt es bei der Zufallsfolge; damit niemand sie für den
   echten Wert hält, wird die Schaltfläche dann nicht als klickbar gezeigt. */
html:not(.jkr-verdeckt-bereit) .jkr-verdeckt { cursor: default; }