/*
 Theme Name:   Hello Elementor Child – Bauer Auerbach
 Theme URI:    https://bauer-auerbach.de
 Description:  Child-Theme für Hello Elementor mit modernem Design-System (nur Elementor Free).
 Author:       Familie Bauer
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  hello-elementor-child
*/

/* ==========================================================================
   Design-Tokens
   ========================================================================== */
:root {
	/* Farben aus dem Logo */
	--ba-bg:          #f6f8fb;
	--ba-surface:     #ffffff;
	--ba-text:        #2d3338;   /* Logo-Anthrazit */
	--ba-muted:       #66707a;
	--ba-primary:     #1763c0;   /* Logo-Blau */
	--ba-primary-dk:  #104a94;
	--ba-accent:      #4d93e6;   /* helleres Blau für Hover/Akzente */
	--ba-line:        #e1e7ef;

	--ba-radius:      16px;
	--ba-shadow:      0 10px 30px rgba(23, 60, 110, .08);
	--ba-shadow-lg:   0 18px 45px rgba(23, 60, 110, .16);

	--ba-font-head:   "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ba-font-body:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ==========================================================================
   Basis
   ========================================================================== */
html { scroll-behavior: smooth; }

body {
	background: var(--ba-bg);
	color: var(--ba-text);
	font-family: var(--ba-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--ba-font-head);
	color: var(--ba-text);
	line-height: 1.15;
	letter-spacing: -.02em;
	text-transform: none;           /* statt durchgehender Versalien */
}
h1 { font-size: clamp(2.2rem, 4.5vw + 1rem, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 2.5vw + 1rem, 2.8rem); font-weight: 600; }
h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); font-weight: 600; }

a { color: var(--ba-primary); transition: color .2s; }
a:hover { color: var(--ba-accent); }

:focus-visible {
	outline: 3px solid var(--ba-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   Hilfsklassen (im Elementor unter „Erweitert → CSS-Klassen“ eintragen)
   ========================================================================== */

/* Hero: Vollbild-Bild mit dunklem Verlauf */
.ba-hero {
	min-height: 88vh;
	position: relative;
	color: #fff;
}
.ba-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,30,45,.25) 0%, rgba(20,30,45,.72) 100%);
	pointer-events: none;
}
.ba-hero > * { position: relative; z-index: 1; }
.ba-hero h1, .ba-hero .elementor-heading-title { color: #fff; }

/* Karten (Hobbys) */
.ba-card {
	background: var(--ba-surface);
	border-radius: var(--ba-radius);
	box-shadow: var(--ba-shadow);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease;
}
.ba-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--ba-shadow-lg);
}
.ba-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .6s ease;
}
.ba-card:hover img { transform: scale(1.05); }

/* Kleiner Überzeile-Text */
.ba-eyebrow {
	font-family: var(--ba-font-body);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ba-accent);
}

/* Buttons */
.elementor-button,
.ba-btn {
	background: var(--ba-primary);
	color: #fff;
	border-radius: 999px;
	padding: .85em 1.8em;
	font-weight: 600;
	transition: background .2s, transform .2s;
}
.elementor-button:hover,
.ba-btn:hover {
	background: var(--ba-primary-dk);
	color: #fff;
	transform: translateY(-2px);
}

/* Trenner */
.elementor-divider-separator { border-color: var(--ba-line) !important; }

/* Weiche Einblend-Animation (ohne JS) */
@media (prefers-reduced-motion: no-preference) {
	.ba-fade { animation: ba-fade .8s ease both; }
	@keyframes ba-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* Mobil */
@media (max-width: 767px) {
	body { font-size: 1rem; }
	.ba-hero { min-height: 70vh; }
}