/* ===== RAIBA-IMMO VISITENKARTE BUILD-MARKER: v1.10.0 ===== */
/*
 * Eigenständiges Visitenkarten-Widget. Optik orientiert sich an einer echten
 * Visitenkarte (85,6 x 54 mm): feste Proportion, ruhige Typo-Hierarchie,
 * Kontaktzeilen als kompakter Block, optionaler Akzentstreifen und Logo.
 *
 * Alle Innenmaße sind in em angegeben und hängen an der Schriftgröße der Karte.
 * Diese skaliert per Container-Query mit der Kartenbreite – dadurch bleibt das
 * Verhältnis stimmig, egal wie breit das Widget im Layout ist.
 * Schrift immer per inherit (Theme-/Elementor-Globalschrift).
 */

.rvk {
	--rvk-accent: #FF6600;
	--rvk-bg: #ffffff;
	--rvk-ink: #16202b;
	--rvk-muted: #6b7684;
	--rvk-line: #e2e7ee;
	--rvk-bar: 6px;
	--rvk-radius: 10px;
	--rvk-base: 16px;
	--rvk-pad-x: 1.55em;
	--rvk-pad-y: 1.4em;
	width: 100%;
}
.rvk *, .rvk *::before, .rvk *::after { box-sizing: border-box; }
.rvk, .rvk strong, .rvk span, .rvk a, .rvk address, .rvk small { font-family: inherit; }

.rvk-card {
	position: relative;
	width: 100%;
	max-width: 520px;
	border-radius: var(--rvk-radius);
	container-type: inline-size;
}
.rvk-card.is-ratio { aspect-ratio: 856 / 540; }

.rvk-inner { position: relative; width: 100%; height: 100%; }
.rvk-card.is-ratio .rvk-inner { position: absolute; inset: 0; }

.rvk-face {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--rvk-pad-y) var(--rvk-pad-x);
	/* Inhalt liegt in .rvk-body – das erlaubt ein randabfallendes Foto-Panel. */
	background: var(--rvk-bg);
	border: var(--rvk-border-w, 1px) solid var(--rvk-line);
	border-radius: inherit;
	overflow: hidden;
	color: var(--rvk-ink);
	/* Basisgröße; die Container-Query-Zeile darunter verfeinert sie. */
	font-size: 16px;
	font-size: clamp(8.5px, 3.08cqw, var(--rvk-base));
	box-shadow: 0 1px 2px rgba(16, 28, 40, .05), 0 18px 40px -24px rgba(0, 40, 90, .38);
}
.rvk-card.is-ratio .rvk-face { position: absolute; inset: 0; }

/* Kartenoptik */
.rvk--flat .rvk-face { box-shadow: none; }
.rvk--strong .rvk-face { box-shadow: 0 2px 4px rgba(16, 28, 40, .07), 0 30px 60px -28px rgba(0, 40, 90, .55); }

/* Akzentbalken: eigenes Element statt Rahmen – dadurch frei in Länge,
   Position, Abstand und Rundung, ohne die Kartenumrandung mitzufärben. */
.rvk-face { position: relative; }
.rvk--bar .rvk-face--front::after {
	content: ""; position: absolute; pointer-events: none; z-index: 1;
	background: var(--rvk-bar-bg, var(--rvk-bar-color, var(--rvk-accent)));
	border-radius: var(--rvk-bar-radius, 0);
}
/* Senkrecht (links/rechts) */
.rvk--bar-left .rvk-face--front::after,
.rvk--bar-right .rvk-face--front::after { width: var(--rvk-bar, 6px); height: var(--rvk-bar-len, 100%); }
.rvk--bar-left .rvk-face--front::after { left: var(--rvk-bar-inset, 0px); }
.rvk--bar-right .rvk-face--front::after { right: var(--rvk-bar-inset, 0px); }
.rvk--bar-left.rvk--bara-start .rvk-face--front::after,
.rvk--bar-right.rvk--bara-start .rvk-face--front::after { top: var(--rvk-bar-inset, 0px); }
.rvk--bar-left.rvk--bara-center .rvk-face--front::after,
.rvk--bar-right.rvk--bara-center .rvk-face--front::after { top: 50%; transform: translateY(-50%); }
.rvk--bar-left.rvk--bara-end .rvk-face--front::after,
.rvk--bar-right.rvk--bara-end .rvk-face--front::after { bottom: var(--rvk-bar-inset, 0px); }
/* Waagerecht (oben/unten) */
.rvk--bar-top .rvk-face--front::after,
.rvk--bar-bottom .rvk-face--front::after { height: var(--rvk-bar, 6px); width: var(--rvk-bar-len, 100%); }
.rvk--bar-top .rvk-face--front::after { top: var(--rvk-bar-inset, 0px); }
.rvk--bar-bottom .rvk-face--front::after { bottom: var(--rvk-bar-inset, 0px); }
.rvk--bar-top.rvk--bara-start .rvk-face--front::after,
.rvk--bar-bottom.rvk--bara-start .rvk-face--front::after { left: var(--rvk-bar-inset, 0px); }
.rvk--bar-top.rvk--bara-center .rvk-face--front::after,
.rvk--bar-bottom.rvk--bara-center .rvk-face--front::after { left: 50%; transform: translateX(-50%); }
.rvk--bar-top.rvk--bara-end .rvk-face--front::after,
.rvk--bar-bottom.rvk--bara-end .rvk-face--front::after { right: var(--rvk-bar-inset, 0px); }
/* Rahmen ringsum statt Balken */
.rvk--bar-frame .rvk-face--front::after { display: none; }
.rvk--bar-frame .rvk-face { border-width: var(--rvk-bar, 6px); border-color: var(--rvk-bar-color, var(--rvk-accent)); }

/* Logo */
.rvk-logo { position: absolute; max-width: 6em; line-height: 0; }
.rvk-logo img { display: block; width: 100%; height: auto; }
.rvk-logo--tl { top: var(--rvk-logo-y, 1.3em); left: var(--rvk-logo-x, 1.5em); }
.rvk-logo--tr { top: var(--rvk-logo-y, 1.3em); right: var(--rvk-logo-x, 1.5em); }
.rvk-logo--bl { bottom: var(--rvk-logo-y, 1.3em); left: var(--rvk-logo-x, 1.5em); }
.rvk-logo--br { bottom: var(--rvk-logo-y, 1.3em); right: var(--rvk-logo-x, 1.5em); }
.rvk-logo--ml { top: 50%; left: var(--rvk-logo-x, 1.5em); transform: translateY(-50%); }
.rvk-logo--mr { top: 50%; right: var(--rvk-logo-x, 1.5em); transform: translateY(-50%); }
.rvk-logo--tc { top: var(--rvk-logo-y, 1.3em); left: 50%; transform: translateX(-50%); }
.rvk-logo--bc { bottom: var(--rvk-logo-y, 1.3em); left: 50%; transform: translateX(-50%); }

/* Kopfbereich: Foto + Name */
.rvk-head { display: flex; align-items: center; gap: .85em; margin-top: var(--rvk-head-mt, 0); margin-left: var(--rvk-head-ml, 0); margin-right: var(--rvk-head-mr, 0); }
.rvk-photo {
	flex: none; width: 3.9em; height: 3.9em; border-radius: .6em; overflow: hidden;
	background: rgba(255, 102, 0, .1); display: grid; place-items: center;
}
.rvk-photo.is-round { border-radius: 50%; }
.rvk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvk-initials { font-size: 1.25em; font-weight: 800; color: var(--rvk-accent); letter-spacing: .02em; }
.rvk-id { min-width: 0; }
.rvk-name { display: block; font-size: var(--rvk-name-size, 1.34em); line-height: var(--rvk-name-lh, 1.14); font-weight: var(--rvk-name-weight, 800); letter-spacing: var(--rvk-name-ls, -.01em); text-transform: var(--rvk-name-tt, none); color: var(--rvk-name-color, var(--rvk-ink)); }
.rvk-role { display: block; margin-top: var(--rvk-role-gap, .3em); font-size: var(--rvk-role-size, .68em); font-weight: var(--rvk-role-weight, 700); letter-spacing: var(--rvk-role-ls, .14em); text-transform: var(--rvk-role-tt, uppercase); color: var(--rvk-role-color, var(--rvk-accent)); }
.rvk-firma { display: block; margin-top: var(--rvk-firma-gap, .2em); font-size: var(--rvk-firma-size, .78em); font-weight: var(--rvk-firma-weight, 400); letter-spacing: var(--rvk-firma-ls, 0); text-transform: var(--rvk-firma-tt, none); color: var(--rvk-firma-color, var(--rvk-muted)); }

/* Trennlinie */
.rvk-rule { display: block; height: 1px; background: var(--rvk-line); margin: .95em 0 .8em; }

/* Kontaktzeilen */
.rvk-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.15em; row-gap: var(--rvk-lines-gap, .34em); margin-top: auto; }
.rvk-line { display: flex; align-items: center; gap: var(--rvk-line-gap, .5em); min-width: 0; font-size: var(--rvk-line-size, .8em); font-weight: var(--rvk-line-weight, 400); letter-spacing: var(--rvk-line-ls, 0); line-height: 1.35; text-decoration: none; }
/* Farbe bewusst mit Element-Selektor: sonst überschreibt die globale Linkfarbe des
   Themes/Elementors die verlinkten Zeilen und nur die Adresse behält die Grundfarbe. */
.rvk a.rvk-line, .rvk span.rvk-line { color: var(--rvk-line-color, var(--rvk-ink)); }
.rvk-line svg { width: var(--rvk-icon, 1.1em); height: var(--rvk-icon, 1.1em); flex: none; color: var(--rvk-icon-color, var(--rvk-accent)); }
.rvk-line span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rvk a.rvk-line:hover { color: var(--rvk-line-hover, var(--rvk-accent)); }
/* Icons übernehmen die Textfarbe der Kontaktzeile (ein Farbwert für beides). */
.rvk--icons-inherit .rvk-line svg { color: var(--rvk-icon-color, inherit); }
.rvk-addr { margin-top: .6em; font-size: var(--rvk-addr-size, .74em); font-weight: var(--rvk-addr-weight, 400); line-height: var(--rvk-addr-lh, 1.45); color: var(--rvk-addr-color, var(--rvk-line-color, var(--rvk-muted))); font-style: normal; }

/* Rückseite (nur bei festem Kartenmaß sinnvoll) */
.rvk--flip .rvk-card { perspective: 1500px; }
.rvk--flip .rvk-inner { transform-style: preserve-3d; transition: transform .7s cubic-bezier(.4, .2, .2, 1); }
.rvk--flip .rvk-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rvk--flip .rvk-face--back { transform: rotateY(180deg); }
.rvk--flip .rvk-card:hover .rvk-inner,
.rvk--flip .rvk-flipbtn:focus + .rvk-inner { transform: rotateY(180deg); }
.rvk-face--back {
	align-items: center; justify-content: center; text-align: center; gap: .7em;
	background: var(--rvk-back-bg, var(--rvk-accent));
	border-color: transparent; color: #fff;
}
.rvk-back-logo { max-width: 9em; line-height: 0; }
.rvk-back-logo img { display: block; width: 100%; height: auto; }
.rvk-claim { font-size: .82em; letter-spacing: .06em; line-height: 1.5; color: inherit; }
/* Nur als Tastatur-Einstieg gedacht: darf die Links der Vorderseite nicht überdecken. */
.rvk-flipbtn { position: absolute; inset: 0; border: 0; background: transparent; pointer-events: none; }
.rvk-flipbtn:focus-visible { outline: 2px solid var(--rvk-accent); outline-offset: 3px; }

/* Editor-Hinweis */
.rvk-empty { padding: 20px; border: 1px dashed var(--rvk-line); border-radius: 12px; color: var(--rvk-muted); font-size: 14px; text-align: center; }

@media (max-width: 480px) {
	.rvk-lines { grid-template-columns: 1fr; }
}

/* ---------- Inhaltsbereich & randabfallendes Foto-Panel ---------- */
.rvk-body { display: flex; flex-direction: column; width: 100%; height: 100%; min-width: 0; }

.rvk--photo-panel .rvk-face--front { flex-direction: row; padding: 0; }
.rvk--photo-panel.rvk--panel-right .rvk-face--front { flex-direction: row-reverse; }
.rvk--photo-panel .rvk-body { padding: var(--rvk-pad-y) var(--rvk-pad-x); }
.rvk-panel {
	flex: none; align-self: stretch; width: var(--rvk-panel, 38%);
	overflow: hidden; background: rgba(255, 102, 0, .1);
	display: grid; place-items: center;
}
.rvk-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rvk-panel .rvk-initials { font-size: 2.2em; }
/* Panel folgt der Kartenrundung an den Außenkanten */
.rvk--photo-panel .rvk-panel { border-radius: calc(var(--rvk-radius) - var(--rvk-border-w, 1px)) 0 0 calc(var(--rvk-radius) - var(--rvk-border-w, 1px)); }
.rvk--photo-panel.rvk--panel-right .rvk-panel { border-radius: 0 calc(var(--rvk-radius) - var(--rvk-border-w, 1px)) calc(var(--rvk-radius) - var(--rvk-border-w, 1px)) 0; }

@media (max-width: 480px) {
	.rvk--photo-panel .rvk-body { padding: calc(var(--rvk-pad-y) * .8) calc(var(--rvk-pad-x) * .8); }
}

/* ---------- Inhaltsverteilung & Ausrichtung ---------- */
.rvk--ca-top .rvk-body { justify-content: flex-start; }
.rvk--ca-top .rvk-lines { margin-top: .7em; }
.rvk--ca-center .rvk-body { justify-content: center; }
.rvk--ca-center .rvk-lines { margin-top: .9em; }
.rvk--ta-center .rvk-body { text-align: center; }
.rvk--ta-center .rvk-head { justify-content: center; }
.rvk--ta-center .rvk-line { justify-content: center; }
.rvk--ta-center .rvk-rule { margin-left: auto; margin-right: auto; }
.rvk-logo--inline { position: static; margin: 0 0 .9em; max-width: 6em; line-height: 0; }
.rvk--ta-center .rvk-logo--inline { margin-left: auto; margin-right: auto; }

/* Hintergrundbild (optional) */
.rvk-face--front.has-bg { background-size: cover; background-position: center; }

/* ============================ VORLAGEN ============================
   Vorlagen setzen nur Grundwerte – eigene Farben/Größen aus den
   Stil-Reglern haben höhere Spezifität und gewinnen immer. */

/* Zentriert: Foto über dem Namen, alles mittig, kurze Akzentlinie */
.rvk--t-center .rvk-body { text-align: center; }
.rvk--t-center .rvk-head { flex-direction: column; gap: .55em; justify-content: center; }
.rvk--t-center .rvk-line { justify-content: center; }
.rvk--t-center .rvk-rule { width: 3em; height: 2px; background: var(--rvk-accent); margin-left: auto; margin-right: auto; }

/* Kopfzeile farbig: Name-Block als farbiges Band über die volle Breite */
.rvk--t-band .rvk-face--front { padding: 0; }
.rvk--t-band .rvk-body { padding: 0; }
.rvk--t-band .rvk-head { background: var(--rvk-accent); padding: 1.05em var(--rvk-pad-x); }
.rvk--t-band .rvk-name, .rvk--t-band .rvk-role, .rvk--t-band .rvk-firma { color: #fff; }
.rvk--t-band .rvk-rule { display: none; }
.rvk--t-band .rvk-lines { padding: 0 var(--rvk-pad-x) var(--rvk-pad-y); }
.rvk--t-band .rvk-addr { padding: 0 var(--rvk-pad-x) var(--rvk-pad-y); margin-top: -.3em; }

/* Minimal: ohne Trennlinie, ruhige Graustufen, weit gesperrte Position */
.rvk--t-minimal .rvk-rule { display: none; }
.rvk--t-minimal .rvk-role { color: var(--rvk-muted); letter-spacing: .2em; }
.rvk--t-minimal .rvk-line svg { color: var(--rvk-muted); }
.rvk--t-minimal .rvk-name { font-weight: 700; letter-spacing: -.02em; }

/* Dunkel: eleganter dunkler Grund */
.rvk--t-dark { --rvk-bg: #101a26; --rvk-ink: #f2f6fa; --rvk-muted: #9fb0c2; --rvk-line: rgba(255, 255, 255, .16); }

/* Fußzeile farbig: Kontaktdaten in einem Farbband am unteren Rand */
.rvk--t-footer .rvk-rule { display: none; }
.rvk--t-footer .rvk-lines {
	background: var(--rvk-accent); color: #fff;
	margin: auto calc(var(--rvk-pad-x) * -1) calc(var(--rvk-pad-y) * -1);
	padding: .85em var(--rvk-pad-x);
}
.rvk--t-footer a.rvk-line, .rvk--t-footer span.rvk-line, .rvk--t-footer .rvk-line svg { color: #fff; }
.rvk--t-footer .rvk-addr { display: none; }
.rvk--photo-panel.rvk--t-footer .rvk-lines { margin-bottom: calc(var(--rvk-pad-y) * -1); }

/* Seitenstreifen: kräftige Farbfläche links, Inhalt daneben */
.rvk--t-stripe .rvk-face--front { padding-left: calc(var(--rvk-pad-x) + 2.6em); }
.rvk--t-stripe .rvk-face--front::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.2em;
	background: var(--rvk-accent);
}
.rvk--t-stripe .rvk-rule { display: none; }
.rvk--photo-panel.rvk--t-stripe .rvk-face--front { padding-left: 0; }
.rvk--photo-panel.rvk--t-stripe .rvk-face--front::before { display: none; }

/* ---------- Adresse: Platzierung & Ausrichtung ---------- */
.rvk-addr--above { margin: 0 0 .55em; }
.rvk-addr--below { margin-top: .6em; }
.rvk-head .rvk-addr, .rvk-addr--head { margin: .35em 0 0; }
.rvk-logo--above { margin: 0 0 .9em; }
.rvk-addr--right { text-align: right; }
.rvk-addr--center { text-align: center; }
.rvk-logo--below { margin: .9em 0 0; }

/* Logo im Textfluss (über/unter dem Namen) */
.rvk-logo--inline { position: static; transform: none; }

/* ---------- Namensblock: Position ---------- */
.rvk--head-middle .rvk-head { margin-top: auto; margin-bottom: auto; }
.rvk--head-bottom .rvk-head { margin-top: auto; }
.rvk--head-hl .rvk-head { justify-content: flex-start; }
.rvk--head-hc .rvk-head { justify-content: center; text-align: center; }
.rvk--head-hr .rvk-head { justify-content: flex-end; text-align: right; }
.rvk--head-hc .rvk-id, .rvk--head-hr .rvk-id { flex: 0 1 auto; }

/* ---------- Adresse als Kontaktzeile: mehrzeilig statt abgeschnitten ---------- */
.rvk-line--addr { align-items: flex-start; }
.rvk-line--addr svg { margin-top: .18em; }
.rvk-line--addr span { white-space: normal; overflow: visible; text-overflow: clip; }