/* =====================================================================
   BERLIVING – Styling der eigenen Elementor-Blöcke
   Ablage: wp-content/themes/reland-child/css/berliving-blocks.css

   Hier liegt das komplette Design der Blöcke. Eine Änderung in dieser
   Datei wirkt auf allen 47 Standortseiten gleichzeitig.
   Die Variablen entsprechen den Farben eurer bestehenden Website.
   ===================================================================== */

:root {
	--bl-gold: #BD9A68;
	--bl-gold-dk: #A6854F;
	--bl-green: #003027;
	--bl-cream: #F6F2EA;
	--bl-paper: #FEFFFB;
	--bl-ink: #202020;
	--bl-body: #797978;
	--bl-line: rgba(189, 154, 104, .30);
	--bl-up: #2F7D5F;
	--bl-down: #A8452F;
	--bl-serif: 'Vidaloka', Georgia, serif;
	--bl-sans: 'Montserrat', sans-serif;
}

/* ---------- Kennzahlen-Leiste ---------- */
.bl-kpis {
	background: var(--bl-cream);
	border-top: 1px solid var(--bl-line);
	border-bottom: 1px solid var(--bl-line);
}

.bl-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.bl-kpi {
	padding: 38px 30px;
	border-left: 1px solid var(--bl-line);
}

.bl-kpi:first-child {
	border-left: 0;
}

.bl-kpi__label {
	font-family: var(--bl-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--bl-gold-dk);
	line-height: 1.5;
}

.bl-kpi__value {
	font-family: var(--bl-serif);
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	color: var(--bl-green);
	line-height: 1;
	margin: 12px 0 6px;
}

.bl-kpi__unit {
	font-size: .46em;
	color: var(--bl-body);
}

.bl-kpi__note {
	font-family: var(--bl-sans);
	font-size: 12px;
	line-height: 1.55;
	color: var(--bl-body);
}

.bl-kpi__trend {
	font-family: var(--bl-sans);
	font-size: 12px;
	font-weight: 600;
	margin-top: 6px;
}

.bl-kpi__trend--up { color: var(--bl-up); }
.bl-kpi__trend--down { color: var(--bl-down); }
.bl-kpi__trend--flat { color: var(--bl-body); }

.bl-kpis__fuss {
	border-top: 1px solid var(--bl-line);
	padding: 16px 30px 22px;
}

.bl-kpis__stern-note,
.bl-kpis__source {
	font-family: var(--bl-sans);
	font-size: 11.5px;
	line-height: 1.6;
	color: #9a9a99;
	margin: 0;
}

/* Erläuterung zum Sternchen steht über der Quelle und ist etwas kräftiger,
   weil sie eine Aussage über die Aktualität des Wertes trifft. */
.bl-kpis__stern-note {
	color: var(--bl-body);
	margin-bottom: 6px;
	text-indent: -9px;
	padding-left: 9px;
}

.bl-kpis__stern-note span {
	color: var(--bl-gold-dk);
	font-weight: 600;
}

/* Sternchen am Wert */
.bl-kpi__stern {
	font-family: var(--bl-sans);
	font-size: .34em;
	color: var(--bl-gold-dk);
	font-weight: 600;
	vertical-align: super;
	margin-left: 1px;
	cursor: help;
}

/* Die Spaltenzahl kommt aus dem Elementor-Panel und wird dort
   pro Breakpoint gesetzt. Diese Regeln sind nur der Fallback,
   falls das Widget ohne Einstellung ausgegeben wird.            */
@media (max-width: 900px) {
	.bl-kpi-grid { grid-template-columns: repeat(2, 1fr); }
	.bl-kpi:nth-child(3) { border-left: 0; }
	.bl-kpi:nth-child(n+3) { border-top: 1px solid var(--bl-line); }
}

@media (max-width: 520px) {
	.bl-kpi-grid { grid-template-columns: 1fr; }
	.bl-kpi { border-left: 0; border-top: 1px solid var(--bl-line); }
	.bl-kpi:first-child { border-top: 0; }
}

/* ---------- Editor-Hinweise (nur im Elementor-Editor sichtbar) ---------- */
.bl-kpi__auto {
	color: var(--bl-gold);
	font-size: 12px;
	margin-left: 4px;
	cursor: help;
}

.bl-kpi.is-platzhalter {
	box-shadow: inset 0 0 0 2px rgba(168, 69, 47, .45);
}

.bl-kpi__hinweis {
	font-family: var(--bl-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bl-down);
	margin-top: 10px;
}


/* =====================================================================
   1 · BODENRICHTWERT-DIAGRAMM
   ===================================================================== */
.bl-chart { background: #fff; border: 1px solid var(--bl-line); padding: clamp(24px, 3vw, 38px); margin: 0; }
.bl-chart__titel { font-family: var(--bl-serif); font-size: 20px; color: var(--bl-ink); line-height: 1.2; }
.bl-chart__meta { font-family: var(--bl-sans); font-size: 12px; color: var(--bl-body); margin: 4px 0 26px; }

.bl-bars { display: grid; gap: 13px; }
.bl-bar {
	display: grid;
	grid-template-columns: minmax(90px, 190px) 1fr auto;
	align-items: center; gap: 14px;
	font-family: var(--bl-sans); font-size: 11.5px;
}
.bl-bar__name { color: var(--bl-body); text-align: right; line-height: 1.35; }
.bl-bar__track { background: rgba(32, 32, 32, .06); height: 16px; border-radius: 1px; overflow: hidden; }
.bl-bar__fill { display: block; height: 100%; background: #7f9a92; border-radius: 1px;
	transition: width .8s cubic-bezier(.2, .7, .3, 1); }
.bl-bar__wert { color: var(--bl-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl-bar.is-aktiv .bl-bar__name,
.bl-bar.is-aktiv .bl-bar__wert { color: var(--bl-ink); font-weight: 600; }
.bl-chart__quelle { font-family: var(--bl-sans); font-size: 11.5px; line-height: 1.6;
	color: #9a9a99; margin-top: 24px; }

@media (max-width: 560px) {
	.bl-bar { grid-template-columns: 1fr auto; grid-template-areas: "name wert" "track track"; }
	.bl-bar__name { grid-area: name; text-align: left; }
	.bl-bar__wert { grid-area: wert; }
	.bl-bar__track { grid-area: track; }
}

/* =====================================================================
   2 · MIKROLAGEN
   ===================================================================== */
.bl-lagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bl-line); }
.bl-lage { background: var(--bl-paper); padding: 36px 32px; transition: background .3s, box-shadow .3s; }
.bl-lage:hover { background: #fff; box-shadow: 0 26px 50px -34px rgba(0, 48, 39, .42); position: relative; z-index: 2; }
.bl-lage__idx { font-family: var(--bl-serif); font-size: 13px; color: var(--bl-gold); letter-spacing: .1em; }
.bl-lage__titel { font-family: var(--bl-serif); font-size: 21px; color: var(--bl-ink); margin: 12px 0 14px; line-height: 1.2; }
.bl-lage__text { font-family: var(--bl-sans); font-size: 14px; line-height: 1.78; color: var(--bl-body); }
.bl-lage__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.bl-tag {
	font-family: var(--bl-sans); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
	color: var(--bl-gold-dk); border: 1px solid var(--bl-line);
	background: rgba(192, 154, 97, .14); padding: 5px 11px;
}
.bl-lage__wert {
	margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(32, 32, 32, .10);
	display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
	font-family: var(--bl-sans); font-size: 12.5px; color: var(--bl-body);
}
.bl-lage__wert b { font-family: var(--bl-serif); font-size: 17px; color: var(--bl-green); font-weight: 400; }

/* =====================================================================
   3 · HINWEISBLOCK
   ===================================================================== */
.bl-hinweis {
	display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 42px);
	background: var(--bl-green); color: rgba(255, 255, 255, .80);
	padding: clamp(32px, 4.5vw, 58px); position: relative; overflow: hidden;
}
.bl-hinweis::after {
	content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px;
	border: 1px solid rgba(189, 154, 104, .22); border-radius: 50%;
}
.bl-hinweis__symbol {
	width: 56px; height: 56px; border: 1px solid var(--bl-gold); display: grid; place-items: center;
	color: var(--bl-gold); font-family: var(--bl-serif); font-size: 26px; flex-shrink: 0;
}
.bl-hinweis__body { position: relative; z-index: 1; }
.bl-hinweis__titel { font-family: var(--bl-serif); color: #fff;
	font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 16px; line-height: 1.2; }
.bl-hinweis__text { font-family: var(--bl-sans); font-size: 15px; line-height: 1.82; max-width: 760px; }
.bl-hinweis__text p + p { margin-top: 14px; }
.bl-hinweis__text b, .bl-hinweis__text strong { color: #fff; font-weight: 500; }
.bl-hinweis__liste { list-style: none; display: grid; gap: 14px; margin: 26px 0 0; padding: 0; }
.bl-hinweis__liste li { display: flex; gap: 14px; align-items: flex-start;
	font-family: var(--bl-sans); font-size: 14.5px; line-height: 1.75; }
.bl-hinweis__liste li::before { content: "—"; color: var(--bl-gold); flex-shrink: 0; }
.bl-hinweis__liste b { color: #fff; font-weight: 500; }
.bl-hinweis__schluss { font-family: var(--bl-sans); font-size: 13.5px; line-height: 1.75;
	color: rgba(255, 255, 255, .60); margin-top: 22px; }
.bl-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--bl-sans); font-size: 12.5px; font-weight: 600; letter-spacing: .13em;
	text-transform: uppercase; padding: 17px 34px; margin-top: 32px;
	border: 1px solid transparent; text-decoration: none;
	transition: all .28s cubic-bezier(.2, .7, .3, 1);
}
.bl-btn--gold { background: var(--bl-gold); color: #fff; border-color: var(--bl-gold); }
.bl-btn--gold:hover { background: var(--bl-gold-dk); border-color: var(--bl-gold-dk);
	color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(166, 133, 79, .7); }

@media (max-width: 720px) { .bl-hinweis { grid-template-columns: 1fr; } }

/* =====================================================================
   4 · REFERENZEN
   ===================================================================== */
.bl-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.bl-ref { background: #fff; border: 1px solid rgba(32, 32, 32, .10);
	transition: border-color .3s, transform .3s; }
.bl-ref:hover { border-color: var(--bl-gold); transform: translateY(-4px); }
.bl-ref__bild { aspect-ratio: 3 / 2; overflow: hidden; background: #e8e2d6; }
.bl-ref__bild img { width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.bl-ref:hover .bl-ref__bild img { transform: scale(1.04); }
.bl-ref__body { padding: 26px 26px 30px; }
.bl-ref__status { font-family: var(--bl-sans); font-size: 10.5px; font-weight: 600;
	letter-spacing: .16em; text-transform: uppercase; color: var(--bl-gold-dk); }
.bl-ref__titel { font-family: var(--bl-serif); font-size: 18px; color: var(--bl-ink);
	margin: 10px 0 12px; line-height: 1.35; }
.bl-ref__text { font-family: var(--bl-sans); font-size: 14px; line-height: 1.75; color: var(--bl-body); }
.bl-ref__daten { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px;
	font-family: var(--bl-sans); font-size: 13px; margin: 18px 0 0;
	padding-top: 18px; border-top: 1px solid rgba(32, 32, 32, .10); }
.bl-ref__daten dt { color: var(--bl-body); }
.bl-ref__daten dd { color: var(--bl-ink); text-align: right; font-weight: 500; margin: 0; }
.bl-ref.is-platzhalter { box-shadow: inset 0 0 0 2px rgba(168, 69, 47, .45); }
.bl-ref__hinweis { font-family: var(--bl-sans); font-size: 10px; font-weight: 600;
	letter-spacing: .1em; text-transform: uppercase; color: var(--bl-down); margin-top: 14px; }

/* =====================================================================
   5 · ABLAUF
   ===================================================================== */
.bl-ablauf { list-style: none; display: grid; max-width: 900px; margin: 0 auto; padding: 0; }
.bl-schritt { display: grid; grid-template-columns: 96px 1fr; gap: clamp(20px, 3vw, 40px);
	padding: 34px 0; border-bottom: 1px solid var(--bl-line); }
.bl-schritt:last-child { border-bottom: 0; }
.bl-schritt__nr { font-family: var(--bl-serif); font-size: clamp(2.1rem, 4vw, 3rem);
	color: var(--bl-gold); line-height: 1; opacity: .55; transition: opacity .3s; }
.bl-schritt:hover .bl-schritt__nr { opacity: 1; }
.bl-schritt__titel { font-family: var(--bl-serif); font-size: 20px; color: var(--bl-ink);
	margin-bottom: 10px; line-height: 1.2; }
.bl-schritt__text { font-family: var(--bl-sans); font-size: 14.5px; line-height: 1.8; color: var(--bl-body); }
.bl-schritt__dauer { display: block; font-family: var(--bl-sans); font-size: 11px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--bl-gold-dk); margin-top: 12px; }

@media (max-width: 600px) { .bl-schritt { grid-template-columns: 1fr; gap: 8px; } }

/* =====================================================================
   Editor-Warnung – erscheint nie auf der Website
   ===================================================================== */
.bl-editor-warnung {
	font-family: var(--bl-sans); font-size: 13px; line-height: 1.6;
	background: rgba(168, 69, 47, .07); border: 1px dashed rgba(168, 69, 47, .5);
	color: var(--bl-down); padding: 18px 22px;
}