/* ============================================================
   vml_einfach.css – "Einfach bedienen"
   Grosse Kacheln, klare Knoepfe, gut lesbare Formulare.
   ============================================================ */

/* Aktive Reiter/Knoepfe: Schrift immer weiss (vorher pink auf pink = unlesbar) */
a.aktiv, a.aktiv:link, a.aktiv:visited, a.aktiv:hover,
a.active, a.active:link, a.active:visited, a.active:hover {
	color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: none !important;
}
/* Auf dem Handy bleibt "hover" nach dem Antippen haengen – dort keine Pink-Faerbung */
@media (hover: none) {
	a:hover { text-shadow: none !important; }
}

/* ---------- Startseite: Kacheln ---------- */
.ve-box { padding: 16px !important; }
.ve-hallo { font-size: 18px; text-align: center; margin: 2px 0 14px; color: #fff; }
.ve-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ve-kachel, .ve-kachel:link, .ve-kachel:visited {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 104px; padding: 12px 8px; border-radius: 16px; text-align: center; text-decoration: none;
	background: linear-gradient(160deg, rgba(255,47,143,.14), rgba(155,61,255,.14));
	border: 1px solid rgba(217,168,255,.28); color: #fff !important; box-sizing: border-box;
	transition: transform .12s ease, border-color .12s ease;
}
.ve-kachel:hover, .ve-kachel:active { transform: translateY(-2px); border-color: #ff2fd0; color: #fff !important; text-shadow: none !important; }
.ve-kachel .ve-ic { font-size: 30px; line-height: 1.1; }
.ve-kachel b { font-size: 15px; color: #fff; }
.ve-kachel small { font-size: 12px; color: #cdb8e6; line-height: 1.3; }
.ve-kachel.ve-neu { border-color: #ff2f5d; box-shadow: 0 0 14px rgba(255,47,93,.3); }
.ve-zahl { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff2f5d; color: #fff; font-size: 12px; font-weight: bold; line-height: 22px; box-sizing: border-box; }
@media (max-width: 700px) { .ve-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Erste Schritte ---------- */
.ve-schritte-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; text-align: left; }
.ve-schritte-kopf b { font-size: 16px; color: #fff; }
.ve-schritte-kopf span { font-size: 13px; color: #cdb8e6; flex: 1; }
.ve-weg { background: none; border: 1px solid rgba(255,255,255,.2); color: #cdb8e6; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 13px; }
.ve-balken { height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 10px; }
.ve-balken i { display: block; height: 100%; background: linear-gradient(90deg, #2ee6a8, #00eaff); border-radius: 4px; }
.ve-schritt, .ve-schritt:link, .ve-schritt:visited {
	display: flex; align-items: center; gap: 12px; padding: 12px; margin-top: 8px; border-radius: 14px; text-align: left;
	border: 1px solid rgba(217,168,255,.25); background: rgba(255,255,255,.03); text-decoration: none; color: #fff !important;
}
.ve-schritt:hover { border-color: #ff2fd0; color: #fff !important; text-shadow: none !important; }
.ve-schritt b { display: block; font-size: 15px; color: #fff; }
.ve-schritt small { display: block; font-size: 12.5px; color: #cdb8e6; margin-top: 2px; }
.ve-schritt > span:nth-child(2) { flex: 1; }
.ve-haken { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(255,47,143,.15); }
.ve-schritt.ok { opacity: .65; }
.ve-schritt.ok .ve-haken { background: #2ee6a8; color: #0b0614; font-weight: bold; }
.ve-pfeil { font-size: 26px; color: #ff2fd0; }

/* ---------- Gaeste-Begruessung ---------- */
.ve-gast { text-align: center; }
.ve-gast-titel { font-size: 24px; font-weight: bold; line-height: 1.3; color: #fff; margin: 6px 0 14px; }
.ve-gast-titel span { color: #2ee6a8; }
.ve-punkte { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 380px; text-align: left; }
.ve-punkte li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 16px; color: #f3e9ff; border-bottom: 1px solid rgba(255,255,255,.07); }
.ve-punkte li span { font-size: 24px; width: 32px; text-align: center; }
.ve-gross, .ve-gross:link, .ve-gross:visited {
	display: block; max-width: 380px; margin: 0 auto; padding: 16px 20px; border-radius: 16px; box-sizing: border-box;
	background: linear-gradient(90deg, #ff2f8f, #9b3dff); color: #fff !important; font-size: 18px; font-weight: bold; text-decoration: none;
	box-shadow: 0 6px 24px rgba(255,47,143,.35);
}
.ve-gross:hover { color: #fff !important; filter: brightness(1.1); text-shadow: none !important; }
.ve-klein { margin-top: 12px; font-size: 14px; color: #cdb8e6; }
.ve-klein a { font-weight: bold; }

/* ---------- Formulare (Anmelden / Einloggen) ---------- */
.ve-form { max-width: 440px; margin: 0 auto; text-align: left; display: grid; gap: 14px; }
.ve-form .ve-feld label { display: block; font-size: 15px; font-weight: bold; color: #fff; margin-bottom: 6px; }
.ve-form input[type=text], .ve-form input[type=email], .ve-form input[type=password], .ve-form select {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box; min-height: 48px; padding: 10px 14px !important;
	font-size: 16px !important; border-radius: 12px !important; background: #140a22 !important; color: #fff !important;
	border: 1px solid rgba(217,168,255,.45) !important; margin: 0 !important;
}
.ve-form input:focus, .ve-form select:focus { outline: none; border-color: #ff2fd0 !important; box-shadow: 0 0 0 3px rgba(255,47,208,.25); }
.ve-form .ve-tipp { display: block; font-size: 13px; color: #cdb8e6; margin-top: 5px; }
.ve-form .ve-reihe { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; }
.ve-form .ve-reihe2 { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.ve-form .ve-pw { position: relative; }
.ve-form .ve-pw input { padding-right: 56px !important; }
.ve-form .ve-auge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #cdb8e6; font-size: 20px; cursor: pointer; padding: 6px 8px; }
.ve-form .ve-check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: #f3e9ff; line-height: 1.45; }
.ve-form .ve-check input { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; accent-color: #ff2f8f; }
.ve-form .ve-knopf, .ve-form button.ve-knopf {
	width: 100%; min-height: 54px; border: 0; border-radius: 14px; cursor: pointer; font-size: 18px; font-weight: bold; color: #fff;
	background: linear-gradient(90deg, #ff2f8f, #9b3dff); box-shadow: 0 6px 24px rgba(255,47,143,.35);
}
.ve-status { display: block; font-size: 13.5px; margin-top: 6px; min-height: 18px; }
.ve-status.gut { color: #2ee6a8; } .ve-status.schlecht { color: #ff8aa5; }
.ve-form .vml-feld-fehler { border-color: #ff2f5d !important; }
.ve-unten { text-align: center; font-size: 15px; color: #cdb8e6; margin-top: 4px; }
.ve-unten a { font-weight: bold; }
.ve-geschlecht { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ve-geschlecht label { display: flex !important; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; border: 1px solid rgba(217,168,255,.45); cursor: pointer; font-weight: normal !important; margin: 0 !important; }
.ve-geschlecht input { position: absolute; opacity: 0; pointer-events: none; }
.ve-geschlecht label:has(input:checked) { background: linear-gradient(90deg, rgba(255,47,143,.35), rgba(155,61,255,.35)); border-color: #ff2fd0; }
.ve-fehlerbox { max-width: 440px; margin: 0 auto 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,47,93,.12); border: 1px solid rgba(255,47,93,.5); color: #ffb3c2; text-align: left; font-size: 14.5px; line-height: 1.5; }

/* ---------- Mitglieder-Menue: wichtige zuerst, Rest unter "Mehr" ---------- */
.ve-mehr { width: 100%; }
.ve-mehr > summary { list-style: none; cursor: pointer; text-align: center; padding: 10px; margin-top: 6px; border-radius: 12px; border: 1px dashed rgba(217,168,255,.45); color: #d9a8ff; font-size: 14px; }
.ve-mehr > summary::-webkit-details-marker { display: none; }
.ve-mehr[open] > summary { margin-bottom: 8px; }
.ve-mehr-inhalt { display: flex; flex-wrap: wrap; gap: inherit; justify-content: center; }

/* ---------- Hilfe ---------- */
.ve-hilfe { max-width: 720px; margin: 0 auto; text-align: left; }
.ve-hilfe details { border: 1px solid rgba(217,168,255,.25); border-radius: 14px; padding: 0 14px; margin-bottom: 10px; background: rgba(255,255,255,.03); }
.ve-hilfe summary { cursor: pointer; padding: 14px 0; font-size: 16px; font-weight: bold; color: #fff; list-style: none; display: flex; gap: 10px; align-items: center; }
.ve-hilfe summary::-webkit-details-marker { display: none; }
.ve-hilfe summary::after { content: "+"; margin-left: auto; font-size: 22px; color: #ff2fd0; }
.ve-hilfe details[open] summary::after { content: "–"; }
.ve-hilfe .ve-antwort { padding: 0 0 14px; font-size: 15px; line-height: 1.6; color: #f3e9ff; }
.ve-hilfe .ve-antwort ol { margin: 6px 0; padding-left: 22px; }
.ve-hilfe .ve-antwort li { margin: 4px 0; }
.ve-hilfe-suche { width: 100%; box-sizing: border-box; min-height: 48px; font-size: 16px; padding: 10px 14px; border-radius: 12px; margin-bottom: 14px; }

/* Mitglieder-Menue auf dem Handy: 2 Spalten statt endloser Wisch-Zeile */
.vml-member-nav.ve-mnav { flex-wrap: wrap !important; }
.vml-member-nav.ve-mnav .ve-mehr-inhalt { gap: 8px; }
@media (max-width: 700px) {
	.vml-member-nav.ve-mnav { display: grid !important; grid-template-columns: 1fr 1fr; overflow: visible !important; gap: 6px !important; }
	.vml-member-nav.ve-mnav > .vml-member-nav-item, .vml-member-nav.ve-mnav .ve-mehr-inhalt .vml-member-nav-item { white-space: normal !important; justify-content: flex-start; min-height: 44px; font-size: 14px !important; }
	.vml-member-nav.ve-mnav .ve-mehr { grid-column: 1 / -1; }
	.vml-member-nav.ve-mnav .ve-mehr-inhalt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* Handy-Seitenmenue: grosse Kacheln + "Alle Bereiche" zugeklappt */
.ve-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.ve-dgrid a, .ve-dgrid a:link, .ve-dgrid a:visited {
	display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px; border-radius: 14px; box-sizing: border-box;
	background: rgba(255,255,255,.04); border: 1px solid rgba(217,168,255,.3); color: #fff !important; font-size: 14.5px; font-weight: bold; text-decoration: none; line-height: 1.2;
}
.ve-dgrid a span { font-size: 22px; }
.ve-dgrid a.aktiv { background: linear-gradient(90deg, #ff2f8f, #9b3dff); border-color: transparent; }
.ve-dmehr > summary { list-style: none; cursor: pointer; padding: 13px; border-radius: 14px; border: 1px dashed rgba(217,168,255,.45); color: #d9a8ff; text-align: center; font-size: 14.5px; margin-bottom: 10px; }
.ve-dmehr > summary::-webkit-details-marker { display: none; }
.ve-dmehr[open] > summary { border-style: solid; }

/* Feinschliff */
.ve-schritte-kopf { flex-wrap: nowrap; }
.ve-schritte-kopf > div { flex: 1; }
.ve-schritte-kopf > div b, .ve-schritte-kopf > div span { display: block; }
.ve-schritte-kopf > div span { margin-top: 2px; }
.ve-status:empty { display: none; }
.ve-mehr > summary, .ve-dmehr > summary { font-family: "Segoe UI", Roboto, Arial, sans-serif; }
.vml-member-nav.ve-mnav .vml-member-nav-item { text-align: left; }
@media (max-width: 700px) { .vml-member-nav.ve-mnav .vml-member-nav-item { justify-content: flex-start !important; } }

/* Profil: klare Knoepfe "Nachricht senden" / "Freund hinzufuegen" */
.vml-profilhead-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.ve-aktion, .ve-aktion:link, .ve-aktion:visited {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 12px; box-sizing: border-box;
	border: 1px solid rgba(217,168,255,.5); color: #fff !important; font-size: 14.5px; font-weight: bold; text-decoration: none; background: rgba(255,255,255,.04);
}
.ve-aktion-haupt, .ve-aktion-haupt:link, .ve-aktion-haupt:visited { background: linear-gradient(90deg, #ff2f8f, #9b3dff); border-color: transparent; }
.ve-aktion:hover { color: #fff !important; filter: brightness(1.1); text-shadow: none !important; }
@media (max-width: 700px) { .vml-profilhead-actions { width: 100%; } .ve-aktion { flex: 1 1 100%; } }
@media (max-width: 700px) { .vml-topbar:has(> .vml-login-row[style*="none"]) { display: none !important; } }
.ve-balken { text-align: left !important; } .ve-balken-fill { display: block !important; height: 100%; margin: 0 !important; background: linear-gradient(90deg, #2ee6a8, #00eaff); border-radius: 4px; }

/* iPhone/Safari: Auswahllisten sonst weiss mit unsichtbarer Schrift */
.ve-form select {
	-webkit-appearance: none !important; appearance: none !important; background-color: #140a22 !important; color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d9a8ff' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important; background-position: right 12px center !important; padding-right: 34px !important;
}
.ve-form select option { background: #140a22; color: #fff; }

/* Mitglieder-Menue: lange Woerter nicht abschneiden */
.vml-member-nav.ve-mnav .vml-member-nav-item { min-width: 0; overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 700px) { .vml-member-nav.ve-mnav > .vml-member-nav-item, .vml-member-nav.ve-mnav .ve-mehr-inhalt .vml-member-nav-item { font-size: 13px !important; padding: 8px 10px !important; } }

/* Postfach auf dem Handy: passt ohne Seitwaerts-Wischen */
@media (max-width: 700px) {
	table.ve-mailtab { display: table !important; table-layout: fixed; width: 100% !important; font-size: 13px; }
	table.ve-mailtab th:first-child, table.ve-mailtab td:first-child { display: none; }
	table.ve-mailtab th:nth-child(2), table.ve-mailtab td:nth-child(2) { width: 30px; }
	table.ve-mailtab th:last-child, table.ve-mailtab td:last-child { width: 34px; }
	table.ve-mailtab th:nth-child(5), table.ve-mailtab td:nth-child(5) { width: 62px; font-size: 11.5px; }
	table.ve-mailtab td { overflow-wrap: anywhere; padding: 8px 4px !important; }
}

/* iPhone/iPad: Safari zoomt beim Antippen in Felder mit Schrift unter 16px – hier verhindern */
@supports (-webkit-touch-callout: none) {
	input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* Startseite: leerer Platz (Top Frau / Top Mann / User des Tages noch nicht vergeben) */
.ve-platz-frei, .ve-platz-frei:link, .ve-platz-frei:visited {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	width: 100%; height: 100%; min-height: 140px; margin: 0 auto; border-radius: 50%; text-decoration: none; text-align: center; box-sizing: border-box; padding: 14px;
	background: radial-gradient(circle, rgba(255,47,143,.18), rgba(155,61,255,.12)); border: 2px dashed rgba(217,168,255,.55); color: #fff !important;
}
.ve-platz-frei span { font-size: 30px; line-height: 1; }
.ve-platz-frei b { font-size: 15px; color: #fff; }
.ve-platz-frei small { font-size: 11.5px; color: #cdb8e6; line-height: 1.25; }
.ve-platz-frei:hover { border-color: #ff2fd0; color: #fff !important; text-shadow: none !important; }

/* Forum: Untermenues/Ueberschriften-Links lesbar */
.vml-panel-title a, .vml-panel-title a:link, .vml-panel-title a:visited { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; text-shadow: none; }
.vml-forum-side-nav, .vml-forum-side-kat, .vml-forum-side-schnell { display: contents; }
/* Forum auf dem Handy: oben nur "Neues Thema" + Kategorien als wischbare Zeile, dann gleich der Inhalt */
@media (max-width: 1150px) {
	.vml-forum-shell { grid-template-columns: minmax(0, 1fr) !important; }
	.vml-forum-shell > * { min-width: 0; max-width: 100%; }
}
@media (max-width: 700px) {
	.vml-forum-sidebar { padding: 8px !important; gap: 8px; min-width: 0; max-width: 100%; box-sizing: border-box; }
	.vml-forum-side-nav, .vml-forum-side-schnell { display: none !important; }
	.vml-forum-side-kat { display: flex !important; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
	.vml-forum-side-kat::-webkit-scrollbar { display: none; }
	.vml-forum-side-kat .vml-forum-side-title { display: none; }
	.vml-forum-side-kat a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px !important; border-radius: 999px !important; border: 1px solid rgba(217,168,255,.35); font-size: 13.5px !important; margin: 0 !important; }
}

/* Start-Geschenk auf der Anmeldeseite */
.ve-startcash{max-width:440px;margin:0 auto 14px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,210,63,.6);background:linear-gradient(90deg,rgba(255,210,63,.14),rgba(255,47,143,.12));text-align:center;font-size:16px;color:#fff;line-height:1.45}
.ve-startcash small{font-size:13px;color:#ffe9a8}

/* Statistik-Kasten "Live auf VoteMyLove" (online.php) */
.vml-statbox .vml-panel-body{padding:12px;font-family:"Segoe UI",Roboto,Arial,sans-serif}
.vml-statbox .vml-panel-body *{font-family:inherit}
.vml-stat-online{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-bottom:6px;border-radius:12px;background:rgba(46,230,168,.10);border:1px solid rgba(46,230,168,.45);color:#d9fff1!important;text-decoration:none!important;font-size:14px}
.vml-stat-online b{font-size:18px;color:#2ee6a8}
.vml-stat-online,.vml-stat-online:link,.vml-stat-online:visited{color:#d9fff1!important}
.vml-stat-online span:last-child{margin-left:auto;font-size:18px;opacity:.7}
.vml-stat-punkt{width:10px;height:10px;border-radius:50%;background:#2ee6a8;box-shadow:0 0 0 0 rgba(46,230,168,.7);animation:vmlStatPuls 1.8s infinite}
@keyframes vmlStatPuls{0%{box-shadow:0 0 0 0 rgba(46,230,168,.6)}70%{box-shadow:0 0 0 8px rgba(46,230,168,0)}100%{box-shadow:0 0 0 0 rgba(46,230,168,0)}}
@media (prefers-reduced-motion:reduce){.vml-stat-punkt{animation:none}}
.vml-stat-gruppe{margin:12px 2px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#d9a8ff}
.vml-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.vml-stat-kachel{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;row-gap:1px;align-items:center;min-width:0;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(217,168,255,.22);color:#f3e9ff!important;text-decoration:none!important;text-shadow:none}
a.vml-stat-kachel:hover{border-color:rgba(255,47,143,.7);background:rgba(255,47,143,.08)}
.vml-stat-icon{font-size:16px;line-height:1}
.vml-stat-kachel b{font-size:18px;line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.vml-stat-text{grid-column:1 / span 2;font-size:12.5px;line-height:1.25;color:#cdb8e6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vml-stat-kachel small{grid-column:1 / span 2;font-size:11px;color:#9f8bb8}

/* Geschenke-Shop: Kategorie-Reiter + größere animierte Geschenke */
.vml-gift-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.vml-gift-tabs button{flex:0 0 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid rgba(217,168,255,.45);background:rgba(255,255,255,.06);color:#f3e9ff;font:700 14px "Segoe UI",Roboto,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.vml-gift-tabs button small{opacity:.7;font-weight:600}
.vml-gift-tabs button.aktiv{background:linear-gradient(90deg,#ff2f8f,#9b3dff);border-color:transparent;color:#fff}
.vml-gift-tabs button:focus-visible{outline:3px solid #ff2fd0;outline-offset:2px}
.vml-gift-card img.vml-gift-anim{width:96px;height:96px;object-fit:contain}
.vml-paket-items img.vml-gift-anim{width:64px;height:64px}
.vml-gift-grid picture img,.vml-gift-grid > .vml-gift-card > img{max-width:100%;height:auto}
html[class*="th-"] .vml-gift-tabs button{background:var(--h-flaeche) !important;border-color:var(--h-rand) !important;color:var(--h-text) !important}
html[class*="th-"] .vml-gift-tabs button.aktiv{background:var(--h-verlauf) !important;color:#fff !important}
.vml-gift-grid .vml-gift-card{box-sizing:border-box;width:136px;flex-basis:136px;font-size:12.5px}
.vml-gift-grid .vml-gift-card img,.vml-gift-grid .vml-gift-card picture img{width:104px;height:104px;object-fit:contain}
@media (max-width:480px){.vml-gift-grid{gap:10px}.vml-gift-grid .vml-gift-card{width:calc(50% - 6px);flex-basis:calc(50% - 6px)}}

/* ---- Mein Bereich (myprofil_raum.php, eigener Raum) ---- */
a.vml-hello-chip{text-decoration:none !important;color:inherit;cursor:pointer}
a.vml-hello-chip:hover{filter:brightness(1.15)}
.vmb .vml-panel-body{padding:14px}
.vmb-karte{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px}
.vmb-foto{flex:0 0 auto;display:block;width:72px;height:72px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#ff2fd0,#8a2be2,#00eaff)}
.vmb-foto img{display:block;width:66px;height:66px;border-radius:50%;object-fit:cover;border:0}
.vmb-wer{flex:1 1 200px;min-width:0}
.vmb-nick{font-size:18px;margin:0 0 6px;overflow-wrap:anywhere}
.vmb-level{display:block;text-decoration:none !important;color:inherit !important}
.vmb-level-kopf{display:block;font-size:14px;margin:0 0 5px;opacity:.95}
.vmb-level small{display:block;font-size:12.5px;opacity:.75;margin-top:4px}
.vmb-balken{display:block;height:10px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.vmb-balken i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ff2fd0,#8a2be2,#00eaff);min-width:6px}
.vmb-balken-gruen i{background:linear-gradient(90deg,#2ee6a8,#00eaff)}
.vmb .vmb-karte .vmb-cash,.vmb .vmb-karte .vmb-cash *{color:#ffe28a !important}
.vmb-cash{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 16px;border-radius:999px;background:rgba(255,210,63,.12);border:1px solid rgba(255,210,63,.45);text-decoration:none !important;font-size:15px}
.vmb-fertig{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:rgba(46,230,168,.07);border:1px solid rgba(46,230,168,.3)}
.vmb-fertig-kopf{margin:0 0 6px;font-size:15px}
.vmb-fehlt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:13.5px}
.vmb-fehlt > span{opacity:.8;margin-right:2px}
.vmb-fehlt a{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px dashed rgba(46,230,168,.6);color:#d9fff1 !important;text-decoration:none !important}
.vmb-fehlt a b{color:#2ee6a8}
.vmb-neu{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px}
.vmb-neu-titel{margin-right:4px;font-size:15px}
.vmb-neu-leer{opacity:.7;font-size:14px}
.vmb-neu a{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 13px;border-radius:999px;background:rgba(255,47,208,.14);border:1px solid rgba(255,47,208,.5);color:#fff !important;text-decoration:none !important;font-size:14px;animation:vmbPuls 2.4s ease-in-out infinite}
.vmb-neu a b{color:#ff8de6}
@keyframes vmbPuls{0%,100%{box-shadow:0 0 0 0 rgba(255,47,208,0)}50%{box-shadow:0 0 0 4px rgba(255,47,208,.18)}}
@media (prefers-reduced-motion:reduce){.vmb-neu a{animation:none}}
.vmb-suche{margin:0 0 12px}
.vmb-suche input{width:100%;box-sizing:border-box;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid rgba(217,168,255,.4);background:rgba(255,255,255,.06);color:#fff;font-size:16px}
.vmb-suche input:focus{outline:none;border-color:#ff2fd0;box-shadow:0 0 0 3px rgba(255,47,208,.2)}
.vmb-nichts{margin:0 0 12px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);text-align:center}
.vmb-schnell{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.vmb-schnell[hidden]{display:none}
.vmb-schnell a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:84px;padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(217,168,255,.28);color:#fff !important;text-decoration:none !important;text-align:center;box-sizing:border-box;transition:transform .15s,border-color .15s}
.vmb-schnell a:hover,.vmb-schnell a:focus-visible{transform:translateY(-2px);border-color:#ff2fd0}
.vmb-ic{font-size:26px;line-height:1}
.vmb-tx{font-size:13.5px;line-height:1.25;font-weight:600}
.vmb-badge{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#ff2fd0;color:#fff !important;font:700 12px/22px Arial,sans-serif;box-sizing:border-box;text-align:center}
.vmb-schnell .vmb-badge{position:absolute;top:6px;right:6px}
.vmb-liste .vmb-badge{margin-left:auto}
.vmb-gruppe{margin:0 0 8px;border-radius:14px;border:1px solid rgba(217,168,255,.22);background:rgba(255,255,255,.03);overflow:hidden}
.vmb-gruppe[hidden]{display:none}
.vmb-gruppe summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;cursor:pointer;font-weight:700;font-size:15.5px;list-style:none;text-align:left}
.vmb-gruppe summary::-webkit-details-marker,.vmb-anpassen summary::-webkit-details-marker{display:none}
.vmb-gruppe summary::after{content:"▾";margin-left:auto;transition:transform .2s;opacity:.7}
.vmb-gruppe:not([open]) summary::after{transform:rotate(-90deg)}
.vmb-gruppe summary small{font-weight:400;opacity:.65}
.vmb-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;padding:0 10px 12px}
.vmb-liste a{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:10px;background:rgba(255,255,255,.04);color:#f3e9ff !important;text-decoration:none !important;font-size:14.5px;box-sizing:border-box;text-align:left;line-height:1.25}
.vmb-liste a[hidden]{display:none}
.vmb-liste a:hover,.vmb-liste a:focus-visible{background:rgba(255,47,208,.14)}
.vmb-anpassen{margin-top:12px;border-radius:14px;border:1px dashed rgba(255,210,63,.45);background:rgba(255,210,63,.04)}
.vmb-anpassen summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;cursor:pointer;font-weight:700;list-style:none}
.vmb-anpassen form{padding:0 12px 14px}
.vmb-anpassen-info{margin:0 0 10px;font-size:14px}
.vmb-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.vmb-wahl label{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 10px;border-radius:10px;background:rgba(255,255,255,.04);cursor:pointer;font-size:14px}
.vmb-wahl input{width:20px;height:20px;accent-color:#ff2fd0;flex:0 0 auto}
.vmb-wahl input:disabled + span{opacity:.45}
.vmb-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.vmb-knoepfe .vml-login-btn{min-height:44px;padding:0 22px}
.vmb-zurueck{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(217,168,255,.4);background:transparent;color:inherit;cursor:pointer;font-size:14px}
@media (max-width:700px){
  .vmb .vml-panel-body{padding:10px}
  .vmb-karte{gap:10px}
  .vmb-cash{width:100%;justify-content:center;box-sizing:border-box}
  .vmb-schnell{gap:8px}
  .vmb-schnell a{min-height:76px;padding:8px 2px}
  .vmb-ic{font-size:24px}
  .vmb-schnell a .vmb-tx{font-size:12px}
  .vmb-liste,.vmb-wahl{grid-template-columns:1fr 1fr}
  .vmb-liste a{font-size:13.5px;padding:6px 10px}
  .vmb-wahl label{font-size:13px}
}
@media (max-width:360px){ .vmb-schnell{grid-template-columns:repeat(2,minmax(0,1fr))} .vmb-liste,.vmb-wahl{grid-template-columns:1fr} }
.vmb-karte,.vmb-wer,.vmb-fertig,.vmb-neu,.vmb-anpassen{text-align:left}
@media (max-width:700px){
  .vmb-fehlt{gap:5px}
  .vmb-fehlt > span{flex:0 0 100%}
  .vmb-fehlt a{min-height:34px;padding:0 10px;font-size:13px}
  .vmb-neu a{min-height:36px;padding:0 11px;font-size:13.5px}
  .vmb-neu-titel{flex:0 0 100%}
}
.vmb-fertig-lob{margin-top:8px;font-size:14.5px;font-weight:600;color:#2ee6a8}
.vmb-fertig.komplett .vmb-balken i{box-shadow:0 0 12px rgba(46,230,168,.6)}

/* ---- Reiter in Mein Raum: Mein Bereich | Mein Raum | Design ---- */
.vmt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 14px;padding:6px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(217,168,255,.28)}
.vmt-tabs a{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 10px;border-radius:13px;color:#e9dcff !important;text-decoration:none !important;font-weight:700;font-size:15.5px;transition:background .15s}
.vmt-tabs a:hover{background:rgba(255,255,255,.07)}
.vmt-tabs a.aktiv{background:linear-gradient(90deg,#ff2fd0,#8a2be2);color:#fff !important;box-shadow:0 4px 16px rgba(255,47,208,.3)}
.vmt-tabs .vmt-ic{font-size:20px;line-height:1}
.vmt-tabs a.aktiv .vmt-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);font-size:18px}
.vmt-tabs .vmb-badge{position:static;margin-left:2px}
.vmt-an[data-zeige="mein-bereich"] > #design,.vmt-an[data-zeige="mein-bereich"] > #raum,
.vmt-an[data-zeige="raum"] > #mein-bereich,.vmt-an[data-zeige="raum"] > #design,
.vmt-an[data-zeige="design"] > #mein-bereich,.vmt-an[data-zeige="design"] > #raum{display:none !important}
@media (max-width:700px){
  .vmt-tabs{gap:4px;padding:4px;border-radius:16px;margin-bottom:10px}
  .vmt-tabs a{flex-direction:column;gap:3px;min-height:58px;padding:4px 2px;font-size:12.5px}
  .vmt-tabs .vmb-badge{position:absolute;top:4px;right:6px}
}

/* ---- Geschenke-Wand im Profil + Geschenk der Woche ---- */
.vml-gw .vml-panel-title small{font-weight:400;opacity:.8}
.vml-gw-reihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.vml-gw-item{margin:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 8px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(217,168,255,.22);box-shadow:0 0 16px var(--gw-glow,transparent);text-align:center;animation:vmlGwRein .5s ease both}
.vml-gw-item:nth-child(2){animation-delay:.06s}.vml-gw-item:nth-child(3){animation-delay:.12s}.vml-gw-item:nth-child(4){animation-delay:.18s}
.vml-gw-item:nth-child(5){animation-delay:.24s}.vml-gw-item:nth-child(6){animation-delay:.3s}.vml-gw-item:nth-child(7){animation-delay:.36s}.vml-gw-item:nth-child(8){animation-delay:.42s}
@keyframes vmlGwRein{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vml-gw-item{animation:none}}
.vml-gw-item img{width:76px;height:76px;object-fit:contain}
.vml-gw-item figcaption{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0;max-width:100%}
.vml-gw-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.vml-gw-von{font-size:12px;opacity:.75;overflow-wrap:anywhere}
.vml-gw-leer{margin:0 0 4px;text-align:center;opacity:.85}
.vml-gw-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px}
.vml-gw-knoepfe a{min-height:42px;display:inline-flex;align-items:center;padding:0 18px !important;text-decoration:none !important}
.vml-woche-karte{position:relative;border:2px solid #ffd23f !important;box-shadow:0 0 22px rgba(255,210,63,.35) !important}
.vml-woche-band{margin:-4px auto 8px;display:inline-block;padding:4px 14px;border-radius:999px;background:linear-gradient(90deg,#ffd23f,#ff9f1c);color:#2a1600 !important;-webkit-text-fill-color:#2a1600;font-weight:800;font-size:13px}
@media (max-width:700px){ .vml-gw-reihe{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .vml-gw-item img{width:64px;height:64px} .vml-gw-name{font-size:12px} }
@media (max-width:360px){ .vml-gw-reihe{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---- Kennenlernen (Wischen) ---- */
.kl-seite .vml-panel-body{padding:14px}
.kl-reiter{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 12px;padding:5px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(217,168,255,.25)}
.kl-reiter a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;border-radius:12px;color:#e9dcff !important;text-decoration:none !important;font-weight:700}
.kl-reiter a.aktiv{background:linear-gradient(90deg,#ff2fd0,#8a2be2);color:#fff !important;-webkit-text-fill-color:#fff}
.kl-reiter .vmb-badge{position:static}
.kl-filter{display:flex;justify-content:center;gap:6px;margin:0 0 12px;flex-wrap:wrap}
.kl-filter a{min-height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid rgba(217,168,255,.35);color:#e9dcff !important;text-decoration:none !important;font-size:14px}
.kl-filter a.aktiv{background:rgba(255,47,208,.18);border-color:#ff2fd0;color:#fff !important;-webkit-text-fill-color:#fff}
.kl-stapel{position:relative;width:100%;max-width:400px;margin:0 auto;aspect-ratio:3/4;max-height:68vh;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kl-karte{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#1c0f2e;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .25s ease,opacity .25s ease;cursor:grab;touch-action:none}
.kl-karte.zieht{transition:none;cursor:grabbing}
.kl-karte.weg{pointer-events:none;opacity:0;transition:transform .38s ease,opacity .38s ease}
.kl-karte.nach-rechts{transform:translate(140%,-10%) rotate(22deg) !important}
.kl-karte.nach-links{transform:translate(-140%,-10%) rotate(-22deg) !important}
.kl-bild{position:absolute;inset:0;background-size:cover;background-position:center}
.kl-karte::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(8,3,18,.92));pointer-events:none}
.kl-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px 18px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.kl-info *{color:#fff}
.kl-name{font-size:26px;font-weight:800;line-height:1.1}
.kl-name span{font-weight:400}
.kl-online{display:inline-block;width:12px;height:12px;border-radius:50%;background:#2ee6a8;box-shadow:0 0 0 3px rgba(46,230,168,.3);vertical-align:middle}
.kl-ort,.kl-status{font-size:15px;margin-top:5px;opacity:.95}
.kl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.kl-chips span{padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.18);font-size:13px;backdrop-filter:blur(4px)}
.kl-profil-link{display:inline-block;margin-top:10px;font-size:14px;text-decoration:underline !important}
.kl-stempel{position:absolute;top:26px;z-index:3;padding:6px 14px;border:4px solid;border-radius:12px;font:900 30px/1 Arial,sans-serif;opacity:0;pointer-events:none}
.kl-stempel-like{left:20px;color:#2ee6a8;border-color:#2ee6a8;transform:rotate(-14deg);opacity:var(--like,0)}
.kl-stempel-nope{right:20px;color:#ff4d6d;border-color:#ff4d6d;transform:rotate(14deg);opacity:var(--nope,0)}
.kl-karte.nach-rechts .kl-stempel-like,.kl-karte.nach-links .kl-stempel-nope{opacity:1}
.kl-leer{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;border-radius:22px;border:2px dashed rgba(217,168,255,.35)}
.kl-leer.zeigen{display:flex}
.kl-leer p{margin:6px 0}
.kl-leer .vml-login-btn,.kl-leer .vml-register-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px !important;margin:4px;text-decoration:none !important}
.kl-knoepfe{display:flex;justify-content:center;align-items:center;gap:22px;margin:18px 0 6px}
.kl-knoepfe.aus{visibility:hidden}
.kl-knopf{display:inline-flex;align-items:center;justify-content:center;width:66px;height:66px;border-radius:50%;border:0;cursor:pointer;font-size:30px;line-height:1;text-decoration:none !important;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .12s}
.kl-knopf:active{transform:scale(.9)}
.kl-nope{background:#fff;color:#ff4d6d !important;font-weight:900}
.kl-like{background:linear-gradient(135deg,#ff2fd0,#ff4d6d)}
.kl-gift{width:52px;height:52px;font-size:24px;background:linear-gradient(135deg,#ffd23f,#ff9f1c)}
.kl-tipp{text-align:center;font-size:13px;opacity:.7;margin:6px 0 0}
.kl-leer-text{text-align:center;margin:14px 0}
.kl-matchliste{display:flex;flex-direction:column;gap:8px}
.kl-match{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(217,168,255,.22)}
.kl-match-foto img{width:64px;height:64px;border-radius:50%;object-fit:cover;display:block}
.kl-match-wer{flex:1;min-width:0;display:flex;flex-direction:column;overflow-wrap:anywhere}
.kl-match-wer small{opacity:.7}
.kl-match-knoepfe{display:flex;gap:6px}
.kl-match-knoepfe a{min-height:42px;display:inline-flex;align-items:center;padding:0 14px !important;text-decoration:none !important;white-space:nowrap}
.kl-match-overlay{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(8,3,18,.82);backdrop-filter:blur(4px)}
.kl-match-overlay[hidden]{display:none}
.kl-match-box{position:relative;width:100%;max-width:380px;padding:26px 20px 20px;border-radius:24px;text-align:center;background:linear-gradient(160deg,#ff2fd0,#8a2be2);color:#fff;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;animation:klPop .45s cubic-bezier(.2,1.4,.4,1) both}
.kl-match-box *{color:#fff}
.kl-match-box h2{margin:0 0 6px;font-size:30px}
@keyframes klPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.kl-match-fotos{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0}
.kl-match-fotos img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:4px solid #fff}
.kl-match-fotos span{font-size:34px}
.kl-match-box .vml-login-btn,.kl-match-box .vml-register-btn{display:flex;align-items:center;justify-content:center;min-height:48px;margin:8px 0 0;text-decoration:none !important;background:#fff !important;color:#8a2be2 !important;-webkit-text-fill-color:#8a2be2;font-weight:800;border:0 !important;border-radius:999px}
.kl-match-box .vml-register-btn{background:rgba(255,255,255,.18) !important;color:#fff !important;-webkit-text-fill-color:#fff}
.kl-match-weiter{margin-top:12px;background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;font-size:15px;min-height:40px}
.kl-konfetti{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,#ffd23f 2px,transparent 3px),radial-gradient(circle,#00eaff 2px,transparent 3px),radial-gradient(circle,#fff 2px,transparent 3px);background-size:60px 60px,80px 80px,50px 50px;background-position:0 0,20px 30px,40px 10px;opacity:.5;animation:klKonfetti 3s linear infinite}
@keyframes klKonfetti{to{background-position:0 120px,20px 190px,40px 110px}}
@media (prefers-reduced-motion:reduce){.kl-konfetti,.kl-match-box{animation:none}}
@media (max-width:700px){
  .kl-seite .vml-panel-body{padding:10px}
  .kl-stapel{max-height:62vh}
  .kl-name{font-size:23px}
  .kl-match-knoepfe a span{display:none}
}

/* ---- App installieren: Banner (Handy), iPhone-Anleitung, Karte in Mein Bereich ---- */
.vml-app-banner{position:fixed;left:10px;right:10px;bottom:calc(var(--vmlm-bottom,0px) + 10px);z-index:9500;display:flex;align-items:center;gap:10px;padding:10px 10px 10px 12px;border-radius:18px;background:#1c0f2e;border:1px solid rgba(255,47,208,.5);box-shadow:0 10px 30px rgba(0,0,0,.45);color:#fff;animation:vmlAppRein .35s ease both}
@keyframes vmlAppRein{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.vml-app-banner img{border-radius:11px;flex:0 0 auto}
.vml-app-banner-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.vml-app-banner-text b{font-size:15px;color:#fff}
.vml-app-banner-text span{font-size:12.5px;opacity:.8;color:#fff}
.vml-app-banner-los{flex:0 0 auto;min-height:40px;padding:0 14px;border:0;border-radius:999px;background:linear-gradient(90deg,#ff2fd0,#8a2be2);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.vml-app-banner-zu{flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:16px;cursor:pointer}
body.vml-app-banner-an #vmlSkyBtn{display:none !important}
.vml-app-ios{position:fixed;inset:0;z-index:99999;display:flex;align-items:flex-end;justify-content:center;padding:12px;background:rgba(8,3,18,.7)}
.vml-app-ios-box{width:100%;max-width:420px;padding:22px 20px 18px;border-radius:22px;background:#fff;color:#1c1430;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.vml-app-ios-box *{color:#1c1430}
.vml-app-ios-box img{border-radius:15px}
.vml-app-ios-box h3{margin:10px 0 8px;font-size:19px}
.vml-app-ios-box ol{text-align:left;margin:0 0 16px;padding-left:22px;line-height:1.6;font-size:15.5px}
.vml-app-ios-box .vml-login-btn{min-height:46px;padding:0 30px;color:#fff !important;-webkit-text-fill-color:#fff}
.vmb-app{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(255,47,208,.12),rgba(138,43,226,.12));border:1px solid rgba(255,47,208,.35)}
.vmb-app[hidden]{display:none}
.vmb-app img{border-radius:12px;flex:0 0 auto}
.vmb-app-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.vmb-app-text small{opacity:.8}
.vmb-app .vml-login-btn{flex:0 0 auto;min-height:42px;padding:0 16px !important;white-space:nowrap}
.vmb-app .vmb-app-ok{display:none}
.vmb-app.ist-app .vmb-app-nein,.vmb-app.ist-app .vml-login-btn{display:none}
.vmb-app.ist-app .vmb-app-ok{display:block}
@media (max-width:420px){ .vmb-app{flex-wrap:wrap} .vmb-app .vml-login-btn{width:100%;justify-content:center} }
.kl-hinweis{display:block;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(255,47,208,.16),rgba(138,43,226,.16));border:1px solid rgba(255,47,208,.4);color:#fff !important;text-decoration:none !important;font-size:14.5px}
.kl-karte{isolation:isolate;z-index:1}
.kl-stapel article.kl-karte:nth-last-of-type(n+4){visibility:hidden}
.kl-stapel article.kl-karte:not(:last-of-type){pointer-events:none}
.kl-stapel article.kl-karte:nth-last-of-type(2):not(.weg){transform:scale(.96) translateY(10px)}
.kl-stapel article.kl-karte:nth-last-of-type(3):not(.weg){transform:scale(.92) translateY(20px)}
.kl-info{text-align:left}
.kl-match-overlay,.kl-match-overlay *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.kl-match-box .vml-login-btn,.kl-match-box .vml-register-btn{border:0 !important;outline:none;box-shadow:0 4px 14px rgba(0,0,0,.18) !important}
.kl-match-box .vml-login-btn:focus-visible,.kl-match-box .vml-register-btn:focus-visible,.kl-match-weiter:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:700px){
  .kl-seite .vml-panel-title{display:none !important}
  .kl-reiter{margin-bottom:8px}
  .kl-reiter a{min-height:40px;font-size:14px}
  .kl-filter{margin-bottom:8px}
  .kl-filter a{min-height:34px;padding:0 14px}
  /* Karte + Knöpfe passen zusammen auf den Bildschirm */
  .kl-stapel{aspect-ratio:auto;height:clamp(220px,calc(100svh - 334px),620px);max-height:none}
  .kl-knoepfe{margin:12px 0 4px;gap:18px}
  .kl-knopf{width:60px;height:60px;font-size:27px}
  .kl-gift{width:48px;height:48px;font-size:22px}
  .kl-tipp{display:none}
}
@media (max-width:700px){ body[data-vmlm-page="kennenlernen.php"] #vmlSkyBtn{display:none !important} }
.vml-app-ios,.vml-app-ios *,.vml-app-banner,.vml-app-banner *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body.vml-app-banner-an{padding-bottom:calc(var(--vmlm-bottom,0px) + 96px) !important}
.vml-app-banner-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vml-app-banner-text b{font-size:14.5px;line-height:1.2}
.vml-app-banner-los{padding:0 12px}