/* joomla-light.css - Zusatz zum Light-Design fuer die Joomla-Seiten von
   www.Meine-Bonuskarten.App (14.10.2026). Baut auf mbk-city.css auf:
   alte Inhaltsbloecke (Text + Bild, Zahlen, Aufruf-Band), Joomla-Formulare
   (Login, Registrierung), SobiPro-Verzeichnis und die App-Seite open-mbk-app. */

/* Seitenkopf fuer Unterseiten */
.j-kopf { padding:34px 0 10px; }
.j-kopf h1 { font-size:40px; }
.j-kopf p { color:var(--muted); font-size:17px; margin-top:10px; max-width:720px; }

/* Text + Bild im Wechsel */
.j-zwei > * { min-width:0; }
.j-zwei.nur-text { grid-template-columns:1fr; max-width:860px; }
.j-zwei { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.j-zwei.bild-links { grid-template-columns:.9fr 1.1fr; }
.j-zwei.bild-links .j-bild { order:-1; }
.j-text h1, .j-text h2 { font-size:32px; margin-bottom:16px; }
.j-text h3 { color:var(--muted); font-weight:600; margin:-6px 0 18px; }
.j-text p { color:var(--text2); font-size:16px; line-height:1.7; margin-bottom:12px; }
.j-text strong { color:var(--text); }
.j-text .knoepfe { display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.j-bild { text-align:center; }
.j-bild img { max-width:100%; height:auto; border-radius:22px; }

/* Zahlen aus den alten Kreis-Grafiken */
.j-zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-top:24px; }
.j-zahl { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.sec-soft .j-zahl { background:var(--bg); }
.j-zahl b { display:block; font-size:30px; font-weight:800; color:var(--primary); }
.j-zahl span { display:block; font-size:13.5px; color:var(--muted); line-height:1.45; margin-top:4px; }
.j-zahl span strong { color:var(--text2); }

/* Karten mit Symbol (vorher Spalten mit Bild) */
.j-karten { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.j-karte { background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:24px; text-align:center; }
.sec-soft .j-karte { background:var(--bg); }
.j-karte img { width:64px; height:64px; object-fit:contain; margin-bottom:12px; }
.j-karte b { display:block; font-size:17px; margin-bottom:6px; } .j-karte p { color:var(--muted); font-size:14px; line-height:1.55; margin:0; }
.sec-head p { margin-left:auto; margin-right:auto; }
:root:not(.hell) .j-karte img { filter:brightness(2.2) saturate(.8); }

/* Aufruf-Band (vorher bg-dark-blue) */
.j-aufruf { padding:26px 0; }
.j-aufruf .box { background:linear-gradient(135deg,#8b7cd8,#6559a9); color:#fff; border-radius:24px; padding:34px 36px;
	display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; }
.j-aufruf h2 { color:#fff; font-size:26px; } .j-aufruf p { opacity:.9; margin-top:6px; }
.j-aufruf .btn { background:#171522; color:#fff; white-space:nowrap; }

/* Joomla-Formulare (Login, Registrierung, Passwort) */
.j-formular { max-width:460px; margin:0 auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.j-formular .icon { width:64px; height:64px; border-radius:20px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 18px; }
.j-formular fieldset { border:0; padding:0; margin:0; display:grid; gap:16px; }
.j-formular .control-label label, .j-formular label { font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.04em; display:block; margin-bottom:6px; }
.j-formular .star { color:var(--primary); }
.j-formular input[type=text], .j-formular input[type=password], .j-formular input[type=email] { width:100%; padding:13px 14px; border-radius:12px;
	border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
.j-formular input:focus { outline:none; border-color:var(--primary); }
.j-formular .remember_section .control-group { display:flex; align-items:center; gap:10px; }
.j-formular .remember_section label { margin:0; text-transform:none; letter-spacing:0; font-size:14px; color:var(--text2); }
.j-formular input[type=checkbox] { width:20px; height:20px; accent-color:var(--primary); }
.j-formular button[type=submit], .j-formular .btn-primary { width:100%; border:0; cursor:pointer; font:inherit; font-weight:700; font-size:16px;
	padding:15px; border-radius:14px; background:var(--primary); color:var(--on-primary); }
.j-formular ul.nav { list-style:none; padding:0; margin:20px 0 0; display:grid; gap:8px; text-align:center; font-size:14px; }
.j-formular ul.nav a { color:var(--primary); }

/* SobiPro-Verzeichnis (Unternehmen) */
.SobiPro .lead { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); }
.SobiPro #skip, .SobiPro .navbar-toggle, .SobiPro .sr-only { display:none; }
.SobiPro .topmenu { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:14px 0 26px; }
.SobiPro .topmenu ul { list-style:none; display:flex; gap:8px; padding:0; margin:0; }
.SobiPro .topmenu ul a { display:inline-block; padding:9px 14px; border-radius:999px; background:var(--soft); color:var(--text2); font-size:13.5px; font-weight:600; }
.SobiPro .topmenu ul a.active { background:var(--primary); color:var(--on-primary); }
.SobiPro .search-query { padding:11px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; min-width:240px; }
.SobiPro h1.page-header { display:none; }
.SobiPro .spCategoryContainer { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.SobiPro .spCategoryContainer > .row { display:contents; }
.SobiPro .spCat .row { display:flex; align-items:center; gap:12px; background:var(--card); border:1.5px solid var(--line); border-radius:16px; padding:14px 16px; }
.SobiPro .spCaticon { width:40px; height:40px; border-radius:12px; background:var(--soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.SobiPro .spCaticon img { width:22px; height:22px; opacity:.85; }
.SobiPro .spCatname p { margin:0; font-weight:700; } .SobiPro .spCatname a { color:var(--text); }

/* App-Seite open-mbk-app: Ladebalken */
.j-app { text-align:center; max-width:640px; margin:0 auto; }
.j-app h1 { font-size:40px; } .j-app h1 span { color:var(--primary); display:block; font-size:22px; margin-top:10px; }
.j-app p { color:var(--text2); margin-top:12px; }
#ladebalken { margin:28px auto 8px; width:250px; height:38px; border-radius:999px; background:var(--soft); overflow:hidden; text-align:left; }
#fortschritt { height:100%; width:250px; max-width:100%; background:linear-gradient(135deg,#8b7cd8,#6559a9); border-radius:999px; display:flex; align-items:center; justify-content:center; }
#txtAppLaden { color:#fff; font-size:13px; font-weight:700; white-space:nowrap; padding:0 12px; }
.j-app .knoepfe { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:22px; }

/* ---- Alte Inhalte, die unveraendert uebernommen sind (j-alt) ----------------
   Einfaches Raster statt Bootstrap, alte Knoepfe und Karten im neuen Aussehen. */
.j-alt .container, .j-text .container { max-width:none; width:auto; padding:0; margin:0; }
.j-alt .row, .j-text .row { display:flex; flex-wrap:wrap; gap:20px; margin:0; }
.j-alt [class*="col-"], .j-text [class*="col-"] { flex:1 1 240px; min-width:0; max-width:100%; padding:0; margin:0; }
.j-alt .col-lg-12, .j-alt .col-xl-12, .j-alt .col-12, .j-alt [class*="col-xl-10"] { flex-basis:100%; }
.j-alt [align="center"], .j-alt .text-center, .j-alt .text_center, .j-alt .center { text-align:center; }
.j-alt img, .j-text img { max-width:100%; height:auto; }
.j-alt iframe { width:100%; max-width:860px; aspect-ratio:16/9; height:auto; border:0; border-radius:18px; }
.j-alt h1 { font-size:32px; margin:0 0 14px; } .j-alt h2 { font-size:26px; margin:0 0 12px; } .j-alt h3 { font-size:20px; margin:0 0 10px; }
.j-alt h4, .j-alt h5, .j-alt h6 { font-size:16px; margin:0 0 8px; }
.j-alt p, .j-alt li { color:var(--text2); line-height:1.7; }
.j-alt p { margin:0 0 12px; } .j-alt ul, .j-alt ol { margin:0 0 14px 20px; padding:0; }
.j-alt a { color:var(--primary); }
.j-alt .text-box { max-width:860px; margin:0 auto; }
.j-alt .mb-5 { margin-bottom:0; }
.j-alt .card { background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:22px; width:auto !important; flex:1 1 280px; }
.sec-soft .j-alt .card { background:var(--bg); }
.j-alt .card-body { padding:0; }
.j-alt .col-lg-12:has(> .card) { display:flex; flex-wrap:wrap; gap:16px; }
.j-alt .col-lg-12:has(> .card) > .card { flex:1 1 300px; }
.j-alt .list-unstyled { list-style:none; margin:0; padding:0; }
.j-alt .media { display:flex; gap:10px; align-items:flex-start; margin:6px 0; }
.j-alt .media i { color:var(--primary); margin-top:5px; }
.j-alt .package { font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); }
.j-alt .price { font-size:38px; font-weight:800; color:var(--text); margin:6px 0 2px; }
.j-alt .price .currency { font-size:20px; vertical-align:top; margin-right:4px; }
.j-alt .yearly { display:none; }
.j-alt .period { color:var(--muted); font-size:13px; }
.j-alt .plan-switch { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px; font-weight:700; }
.j-alt .plan-switch a { cursor:pointer; color:var(--text2); }
.j-alt .switch { position:relative; display:inline-block; width:52px; height:28px; }
.j-alt .switch input { opacity:0; width:0; height:0; }
.j-alt .switch .slider { position:absolute; inset:0; background:var(--soft); border-radius:999px; cursor:pointer; transition:.2s; }
.j-alt .switch .slider:before { content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; background:var(--primary); border-radius:50%; transition:.2s; }
.j-alt .switch input:checked + .slider:before { transform:translateX(24px); }
.j-alt .switchPopup { font-size:12px; color:var(--accent); }
.j-alt .collapse:not(.show) { display:none; }
.btn-solid-lg, .btn-solid-bold, .btn-solid-reg, .j-alt .btn-primary, .j-inhalt .btn-primary, .j-inhalt button[type=submit], .j-inhalt input[type=submit] {
	display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:14px; border:0; cursor:pointer;
	font:inherit; font-weight:700; font-size:15px; background:var(--primary); color:var(--on-primary) !important; text-decoration:none; margin:4px; }
.btn-outline-reg, .btn-outline-lg, .j-alt .btn:not(.btn-p):not(.btn-o):not(.btn-primary) { display:inline-flex; align-items:center; gap:8px; padding:12px 20px;
	border-radius:14px; border:1.5px solid var(--line); color:var(--text) !important; font-weight:700; text-decoration:none; background:transparent; margin:4px; }
/* Zeitleiste (Web-Code-Anleitung) */
.j-alt .cd-timeline__container { max-width:860px; margin:0 auto; padding:0; }
.j-alt .cd-timeline__block { display:flex; gap:18px; margin-bottom:18px; }
.j-alt .cd-timeline__img { width:52px; height:52px; border-radius:16px; background:var(--soft); color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.j-alt .cd-timeline__img i { font-size:20px; }
.j-alt .cd-timeline__content { background:var(--card); border:1.5px solid var(--line); border-radius:18px; padding:20px 22px; flex:1; min-width:0; }
.j-alt .cd-timeline__content h2 { font-size:19px; }
.j-alt .cd-timeline__date { display:none; }
.j-alt .owl-carousel { max-width:340px; margin:0 auto; }
.j-text .owl-carousel { max-width:100%; }

/* ---- Joomla-Inhalte (Beitraege, Blog, Meldungen, Formulare) -------------- */
.j-inhalt .item-page, .j-inhalt .blog, .j-inhalt .contact, .j-inhalt .registration, .j-inhalt .remind, .j-inhalt .reset { max-width:860px; margin:0 auto; }
.j-inhalt .item-page .page-header h2, .j-inhalt .item-page > h2 { font-size:26px; margin-bottom:12px; }
.j-inhalt [itemprop="articleBody"] { color:var(--text2); font-size:15.5px; line-height:1.7; }
.j-inhalt [itemprop="articleBody"] h2, .j-inhalt [itemprop="articleBody"] h3, .j-inhalt [itemprop="articleBody"] h4 { color:var(--text); margin:22px 0 8px; font-size:18px; }
.j-inhalt [itemprop="articleBody"] h4:empty { display:none; }
.j-inhalt [itemprop="articleBody"] a { text-decoration:underline; overflow-wrap:anywhere; }
.j-inhalt .article-info, .j-inhalt .muted { color:var(--muted); font-size:13px; }
.j-inhalt dl.article-info { margin:0 0 10px; } .j-inhalt dl.article-info dd { margin:0; }
.j-inhalt .items-row, .j-inhalt .items-leading > div { background:var(--card); border:1.5px solid var(--line); border-radius:20px; padding:22px 24px; margin-bottom:14px; }
.j-inhalt .items-row .page-header h2 { font-size:21px; margin:0 0 6px; } .j-inhalt .items-row h2 a { color:var(--text); }
.j-inhalt .readmore a { color:var(--primary); font-weight:700; }
.j-inhalt .pagination ul { list-style:none; display:flex; gap:8px; justify-content:center; padding:0; margin:20px 0 0; }
.j-inhalt .pagination a, .j-inhalt .pagination span { display:inline-block; padding:8px 13px; border-radius:10px; background:var(--soft); color:var(--text2); }
.j-inhalt table { width:100%; border-collapse:collapse; font-size:14px; }
.j-inhalt th, .j-inhalt td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
#system-message-container .alert, #system-message .alert { background:var(--soft); border:1px solid var(--primary); color:var(--text); border-radius:14px; padding:14px 18px; margin:16px 0; }
.j-inhalt input[type=text], .j-inhalt input[type=email], .j-inhalt input[type=password], .j-inhalt input[type=tel], .j-inhalt input[type=number],
.j-inhalt input[type=url], .j-inhalt select, .j-inhalt textarea { width:100%; max-width:520px; padding:12px 14px; border-radius:12px;
	border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:15px; }
.j-inhalt textarea { min-height:120px; }
.j-inhalt label { font-size:13px; font-weight:700; color:var(--muted); }
.j-inhalt fieldset { border:0; padding:0; margin:0 0 14px; }
.j-inhalt .control-group { margin-bottom:14px; }
/* Tabelle im Datenschutz-Abschnitt (Speicher-Eintraege) */
.ds-table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:14px; }
.ds-table th, .ds-table td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line); }
.ds-table th { width:150px; color:var(--text); font-weight:700; }
.ds-table code { color:var(--primary); }
@media (max-width:600px) { .ds-table th { width:110px; } }
/* Formular-Seiten (Login, Registrierung, Pass) als Kasten in der Mitte */
.j-formular-seite .login, .j-formular-seite .registration, .j-formular-seite .remind, .j-formular-seite .reset, .j-formular-seite form {
	max-width:460px; margin-left:auto; margin-right:auto; }
.j-formular-seite .login form, .j-formular-seite > .wrap > form { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.j-formular-seite .login input[type=text], .j-formular-seite .login input[type=password] { max-width:none; }
.j-formular-seite .remember_section .control-group { display:flex; align-items:center; gap:10px; }
.j-formular-seite input[type=checkbox] { width:20px; height:20px; accent-color:var(--primary); }
.j-formular-seite .login button[type=submit] { width:100%; margin:6px 0 0; }
.j-formular-seite ul.nav { list-style:none; padding:0; margin:18px auto 0; display:grid; gap:8px; text-align:center; font-size:14px; max-width:460px; }
.j-formular-seite ul.nav a { color:var(--primary); }
.j-formular-seite .login-area .icon-area { display:none; }

/* Zitate der Partner (vorher Slider) */
.j-stimme img { width:72px; height:72px; border-radius:50%; object-fit:cover; filter:none !important; }
.j-stimme p { font-style:italic; margin-bottom:10px !important; color:var(--text2) !important; }
.j-zahlen.gross { margin-top:0; } .j-zahlen.gross .j-zahl { text-align:center; }

/* "Nach oben"-Knopf, den das alte scripts.js einfuegt */
a.back-to-top { position:fixed; right:20px; bottom:20px; z-index:15; width:46px; height:46px; border-radius:50%; background:var(--primary);
	display:none; font-size:0; color:transparent; box-shadow:var(--shadow); }
a.back-to-top::after { content:"\2191"; font-size:20px; font-weight:800; color:var(--on-primary); display:flex; align-items:center; justify-content:center; height:100%; }

/* Kompatibilitaet: alte Skripte (scripts.js) fragen die alte Navigationsleiste ab */
.mbk-alt-navbar { display:none !important; }

@media (max-width:860px) {
	.j-zwei, .j-zwei.bild-links { grid-template-columns:1fr; gap:28px; }
	.j-zwei.bild-links .j-bild { order:0; }
	.j-aufruf .box { grid-template-columns:1fr; text-align:center; padding:28px 22px; }
	.j-kopf h1, .j-app h1 { font-size:30px; }
	.j-text h1, .j-text h2 { font-size:26px; }
}