/* ============================================================
   custom.css – Moderne Ergänzungen zum Massively-Template
   Energy Technic Solutions
   Lädt NACH main.css und überschreibt nur gezielt einzelne
   Stellen. Die Markenidentität (Akzent #18bfef) bleibt erhalten.
   ============================================================ */

:root {
	--brand:        #18bfef;
	--brand-dark:   #129ec7;
	--ink:          #1f262d;
	--muted:        #7a8089;
	--surface:      #2b333c;
	--radius:       12px;
	--shadow:       0 10px 30px -12px rgba(0, 0, 0, 0.55);
	--shadow-soft:  0 4px 14px -6px rgba(0, 0, 0, 0.4);
}

/* ---- Sanftes Einblenden der Seite ------------------------- */
@media (prefers-reduced-motion: no-preference) {
	#wrapper.fade-in > * {
		animation: etFade 0.7s ease both;
	}
	@keyframes etFade {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: none; }
	}
}

/* ---- Karten in der Beitragsübersicht modernisieren -------- */
.posts article {
	border-radius: var(--radius);
	padding: 1.75em 1.5em 1.5em;
	background: rgba(255, 255, 255, 0.015);
	border: solid 1px rgba(255, 255, 255, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.posts article:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
	border-color: rgba(24, 191, 239, 0.4);
}
.posts article .image.fit img {
	border-radius: 8px;
}

/* ---- Buttons: etwas weicher und mit klarem Fokus ---------- */
input[type="submit"], input[type="reset"], input[type="button"],
button, .button {
	border-radius: 8px;
	transition: background-color 0.25s ease, color 0.25s ease,
				box-shadow 0.25s ease, transform 0.15s ease;
}
.button.primary {
	background-color: var(--brand);
	color: #fff !important;
	box-shadow: var(--shadow-soft);
}
.button.primary:hover { background-color: var(--brand-dark); }
.button:active { transform: translateY(1px); }

a:focus-visible, button:focus-visible, .button:focus-visible,
input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
}

/* ---- Leistungsliste mit Häkchen --------------------------- */
.leistungsliste {
	list-style: none;
	padding-left: 0;
	columns: 2;
	column-gap: 2.5em;
}
.leistungsliste li {
	padding-left: 1.6em;
	position: relative;
	margin-bottom: 0.55em;
	break-inside: avoid;
}
.leistungsliste li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--brand);
	font-weight: 700;
}
@media (max-width: 736px) {
	.leistungsliste { columns: 1; }
}

/* ---- Preisliste / Tabelle --------------------------------- */
.preisliste { width: 100%; }
.preisliste th {
	background: var(--brand);
	color: #fff;
	text-align: left;
}
.preisliste td:last-child {
	white-space: nowrap;
	font-weight: 700;
	color: var(--brand);
}
.preisliste small { color: var(--muted); font-weight: 400; }
.preisliste tbody tr:hover { background: rgba(24, 191, 239, 0.06); }

.bildunterschrift {
	font-size: 0.85em;
	color: var(--muted);
	font-style: italic;
	margin-top: 0.5em;
}

/* ---- Besucherzähler --------------------------------------- */
#counter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
	justify-content: center;
	padding: 1em 1.5em;
	margin: 0 auto;
	font-size: 0.8em;
	letter-spacing: 0.05em;
	color: var(--muted);
	border-top: solid 1px rgba(255, 255, 255, 0.08);
}
#counter span { white-space: nowrap; }
#counter span:nth-child(1) { color: var(--brand); font-weight: 600; }

/* ---- Datenschutz / Lesbarkeit langer Texte ---------------- */
.datenschutz h2 { margin-top: 1.5em; }
.datenschutz h3 { color: var(--brand); }

/* ---- Footer-Kontaktleiste sichtbar machen ----------------- */
#footer { border-top: solid 1px rgba(255, 255, 255, 0.08); }

/* ---- Dashboard-Hinweis ------------------------------------ */
.post .actions { margin-top: 1.5em; }