/* JOBWOCHE Top-Jobs 3.0 (2026-10-21, zweiter Entwurf des Nutzers): dunkelgrüner Kasten mit Deko-Kreisen, Titel + Unterzeile,
   weiße Reiter-Pillen, „Alle Jobs anzeigen“ als Rahmenknopf. Farbige Karten ohne Foto (Farbe je Anzeige: --f kräftig, --f-hell Grund),
   die Mittelkarte liegt größer über den Seitenkarten. Weiter als Karussell. */
.jwtj { --t: var(--nowo-teal, #0b7d71); --schrift: #10262c; position: relative; overflow: hidden; margin-top: 28px; padding: 26px 0 18px; border-radius: 16px;
	/* seit 3.0.5 (2026-10-22, Farbvorschlag des Nutzers): helles, frisches Türkis statt Dunkelgrün; links kräftiger, damit die weiße Schrift trägt */
	background: linear-gradient(120deg, #0f9a8b 0%, #1fb3a1 40%, #3fc8b6 75%, #6fdccd 100%); color: #fff; box-shadow: 0 6px 22px rgba(15, 140, 126, .18); scroll-margin-top: 16px; isolation: isolate; }
.jwtj::before, .jwtj::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.jwtj::before { width: 620px; height: 620px; right: -160px; top: -300px; background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 60%, transparent 70%); }
.jwtj::after { width: 520px; height: 520px; left: -170px; bottom: -300px; background: radial-gradient(circle, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .05) 60%, transparent 70%); }

.jwtj-kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 20px; padding: 0 30px; margin-bottom: 6px; }
.jwtj-titel { position: relative; margin: 0; padding-top: 12px; color: #fff; font-size: 32px !important; line-height: 1.05; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.jwtj-titel::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; border-radius: 2px; background: #fff; }
.jwtj-unterzeile { margin: 6px 0 0; font-size: 14px; color: #f0fbf9; }
.jwtj-reiter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.jwtj-reiter button { appearance: none; border: 1.5px solid rgba(255, 255, 255, .7); background: transparent; color: #fff; border-radius: 30px; padding: 8px 20px; font: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; line-height: 1.2; transition: background .2s, color .2s; }
.jwtj-reiter button:hover { background: rgba(255, 255, 255, .12); }
.jwtj-reiter button[aria-selected="true"] { background: #fff; color: var(--t); border-color: #fff; }
.jwtj a.jwtj-alle, .jwtj a.jwtj-alle:visited { justify-self: end; display: inline-flex; align-items: center; gap: 10px; color: #fff; border: 1.5px solid rgba(255, 255, 255, .8); border-radius: 30px; padding: 10px 22px; font-weight: 700; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.jwtj a.jwtj-alle:hover { background: #fff; color: var(--t); }
.jwtj-reiter button:focus-visible, .jwtj-pfeil:focus-visible, .jwtj-karte:focus-visible, .jwtj a.jwtj-alle:focus-visible { outline: 3px solid #ffd54f; outline-offset: 2px; }

/* Bühne: Kartenbreite --k, Höhe --h; data-pos 0 Mitte (größer, vorn), ±1 halb dahinter, ±2 versteckt */
.jwtj-feld { position: relative; container-type: inline-size; --k: min(500px, max(300px, 42cqw)); --h: calc(var(--k) * .38 + 134px); }
.jwtj-feld[hidden] { display: none; }
.jwtj-buehne { position: relative; height: calc(var(--h) + 40px); touch-action: pan-y; }
.jwtj-karte { position: absolute; top: 20px; left: 50%; width: var(--k); height: var(--h); box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start;
	padding: calc(var(--k) * .04) calc(var(--k) * .045); overflow: hidden; border-radius: 16px; color: var(--schrift); text-decoration: none;
	background: linear-gradient(140deg, #fff 0%, #fff 35%, var(--f-hell) 100%); box-shadow: 0 14px 36px rgba(4, 40, 36, .35);
	transform: translateX(-50%) scale(.7); opacity: 0; pointer-events: none; z-index: 0; cursor: pointer;
	transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .45s, background .45s, padding .55s; }
.jwtj-karte[data-pos="0"] { transform: translateX(-50%); opacity: 1; z-index: 3; pointer-events: auto; }
.jwtj-karte[data-pos="-1"], .jwtj-karte[data-pos="1"] { opacity: 1; z-index: 2; pointer-events: auto; background: linear-gradient(140deg, var(--f-hell) 0%, color-mix(in srgb, var(--f-hell) 80%, var(--f)) 100%); }
.jwtj-karte[data-pos="-1"] { transform: translateX(-50%) translateX(-72%) scale(.82); }
.jwtj-karte[data-pos="1"] { transform: translateX(-50%) translateX(72%) scale(.82); }
/* Seitenkarten: Inhalt in den sichtbaren Teil rücken – innen liegt die Mittelkarte darüber (~22 % der Breite), außen der Pfeil. */
@media (min-width: 641px) {
	.jwtj-karte[data-pos="-1"] { padding-left: calc(var(--k) * .045 + 34px); padding-right: calc(var(--k) * .25); }
	.jwtj-karte[data-pos="1"] { padding-left: calc(var(--k) * .25); padding-right: calc(var(--k) * .045 + 34px); }
	.jwtj-karte[data-pos="-1"] .jwtj-fakten li:nth-child(3), .jwtj-karte[data-pos="1"] .jwtj-fakten li:nth-child(3) { display: none; }
}
.jwtj-karte[data-pos="-2"] { transform: translateX(-50%) translateX(-40%) scale(.7); }
.jwtj-karte[data-pos="2"] { transform: translateX(-50%) translateX(40%) scale(.7); }
.jwtj-karte:hover { color: var(--schrift); }
.jwtj-deko { position: absolute; z-index: 0; right: -18%; top: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--f) 10%, transparent) 0%, transparent 70%); pointer-events: none; }
.jwtj-karte > :not(.jwtj-deko):not(.jwtj-motiv-bild) { position: relative; z-index: 1; }

.jwtj-anzeige { display: inline-block; background: #24343a; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; line-height: 1.2; }
.jwtj-firma { display: flex; align-items: center; gap: 12px; margin-top: 8px; max-width: 100%; line-height: 1.25; }
.jwtj-firma > span:last-child { min-width: 0; }
.jwtj-firma b { display: block; font-size: clamp(13px, calc(var(--k) * .032), 16px); font-weight: 800; color: var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jwtj-firma small { display: block; font-size: clamp(11.5px, calc(var(--k) * .026), 13px); color: #50626a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jwtj-firma small .fa { color: var(--f); margin-right: 2px; }
.jwtj-logo { flex: none; width: calc(var(--k) * .095); height: calc(var(--k) * .095); min-width: 36px; min-height: 36px; border-radius: 9px; background: var(--f); color: #fff; display: grid; place-items: center; overflow: hidden;
	font-size: clamp(14px, calc(var(--k) * .036), 19px); font-weight: 800; letter-spacing: .02em; }
.jwtj-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; background: #fff; }
.jwtj-kicker { margin: calc(var(--k) * .035) 0 2px; color: var(--f); font-size: clamp(11px, calc(var(--k) * .025), 13px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.jwtj-stelle { margin: 0 0 auto; font-size: clamp(19px, calc(var(--k) * .066), 34px) !important; line-height: 1.08; font-weight: 900; color: var(--schrift); letter-spacing: -.01em;
	overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jwtj-fakten { display: flex; gap: 6px; list-style: none; margin: 10px 0 12px; padding: 0; max-width: 100%; overflow: hidden; }
.jwtj-fakten li { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; margin: 0; padding: 6px clamp(8px, calc(var(--k) * .024), 12px); border: 1px solid color-mix(in srgb, var(--f) 22%, #d8e2e4); border-radius: 30px; background: rgba(255, 255, 255, .75);
	font-size: clamp(11px, calc(var(--k) * .028), 13.5px); line-height: 1.2; color: #2b3d44; white-space: nowrap; }
.jwtj-fakten li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.jwtj-fakten li i { flex: none; color: var(--f); }
.jwtj-knopf { display: inline-flex; align-items: center; gap: 10px; border-radius: 30px; padding: 11px 26px; font-size: clamp(13.5px, calc(var(--k) * .032), 15.5px); font-weight: 700; color: #fff; line-height: 1.2;
	background: var(--f); box-shadow: 0 4px 12px color-mix(in srgb, var(--f) 35%, transparent); transition: filter .2s; }
.jwtj-karte:hover .jwtj-knopf { filter: brightness(1.1); }
.jwtj-karte[data-pos="-1"] .jwtj-knopf, .jwtj-karte[data-pos="1"] .jwtj-knopf { background: rgba(255, 255, 255, .85); color: var(--schrift); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }

/* Motiv-Anzeige (fertiges Bild vom Kunden) */
.jwtj-motiv { padding: 0; background: #fff; }
/* contain statt cover (3.0.6): Motive werden nie beschnitten. In Reitern nur mit Motiven (.jwtj-nur-motive) hat die Karte ihr Seitenverhältnis 1000:648, dann ohne Rand. */
.jwtj-motiv .jwtj-motiv-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; }
.jwtj-feld.jwtj-nur-motive { --h: calc(var(--k) * .648); }
/* .jwtj-karte.jwtj-motiv > …, damit die Regel oben (> :not(…):not(…), position: relative) nicht gewinnt */
.jwtj-karte.jwtj-motiv > .jwtj-anzeige { position: absolute; top: 8px; left: 8px; }
.jwtj-karte.jwtj-motiv > .jwtj-knopf { position: absolute; right: 10px; bottom: 10px; padding: 7px 14px; gap: 7px; font-size: 13px; }

.jwtj-pfeil { position: absolute; z-index: 5; top: calc(20px + var(--h) / 2); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0;
	background: #fff; color: var(--t); font-size: 28px; line-height: 46px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.jwtj-pfeil:hover { background: #e9f7f4; }
.jwtj-zurueck { left: 12px; }
.jwtj-vor { right: 12px; }
.jwtj-punkte { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }
.jwtj-punkte span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .4); transition: background .3s; }
.jwtj-punkte span.ist-aktiv { background: #fff; }

@media (max-width: 1000px) {
	.jwtj-kopf { grid-template-columns: 1fr auto; }
	.jwtj-reiter { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
	.jwtj-feld { --k: min(480px, 64cqw); }
}
@media (max-width: 640px) {
	.jwtj { padding: 20px 0 14px; border-radius: 14px; }
	.jwtj-kopf { grid-template-columns: 1fr; padding: 0 16px; gap: 12px; }
	.jwtj-titel { font-size: 26px !important; }
	.jwtj-reiter { flex-wrap: nowrap; gap: 6px; }
	.jwtj-reiter button { padding: 7px 12px; font-size: 11.5px; letter-spacing: .03em; }
	.jwtj a.jwtj-alle { justify-self: start; padding: 8px 16px; font-size: 13.5px; }
	.jwtj-feld { --k: 86cqw; }
	.jwtj-karte[data-pos="-1"] { transform: translateX(-50%) translateX(calc(-100% - 10px)) scale(.92); opacity: .55; }
	.jwtj-karte[data-pos="1"] { transform: translateX(-50%) translateX(calc(100% + 10px)) scale(.92); opacity: .55; }
	.jwtj-pfeil { width: 32px; height: 32px; line-height: 32px; font-size: 21px; }
	.jwtj-zurueck { left: 2px; }
	.jwtj-vor { right: 2px; }
}
@media (prefers-reduced-motion: reduce) { .jwtj-karte { transition: none; } }