/*
Theme Name: Tech-Lokal
Theme URI: https://dein-ki-lokal.de
Author: dein-ki-lokal / Abid Mares
Description: FSE block theme for dein-ki-lokal.de — Webdesign + KI-Dienstleistungen für lokale Unternehmen. Mood: Stripe-Whitespace + Wirtshaus-Wärme. Bernstein-Akzent.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: dkl-tech-lokal
*/

/* Theme uses theme.json for almost all styling. Minimal custom CSS only where blocks can't reach. */

/* Brand-Lockup: Inline-span Akzent für "lokal" — Pattern aus brand_lockup_inline_span. */
.dkl-brand-lockup .dkl-brand-accent {
	color: var(--wp--preset--color--primary);
}

/* Skip-link für A11y (WCAG 2.4.1) */
.dkl-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.dkl-skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg-card);
	z-index: 999999;
	font-weight: 600;
	border-radius: 8px;
}

/* DE-Komposita brauchen hyphens für Mobile-Layout-Robustheit (Pattern: mobile_qa_a11y) */
body, p, h1, h2, h3, h4 {
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphenate-limit-chars: 7 4 4;
}

/* Tier-Card Hover (subtile Animation, weiche Schatten) */
.dkl-tier-card {
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dkl-tier-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -12px rgba(200, 135, 10, 0.18);
}

/* Tier-Card "Empfehlung"-Badge */
.dkl-tier-card--featured {
	border: 2px solid var(--wp--preset--color--primary);
	position: relative;
}
.dkl-tier-card--featured::before {
	content: "Empfehlung";
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--bg-card);
	padding: 4px 14px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}