/*
Theme Name: Familie Lottes
Theme URI: https://www.lottes.org
Author: Familie Lottes
Description: Schlichtes, freundliches Block-Theme für die Familienwebseite der Familie Lottes in Berlin – mit direktem Zugang zum STRATO Webportal.
Version: 1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: familie-lottes
*/

body { -webkit-font-smoothing: antialiased; }

/* Kopfbereich – liegt transparent über dem Himmel */
.lottes-header { padding-top: 1.1rem; padding-bottom: 1.1rem; background: #8ECDE8; }
.lottes-header .wp-block-site-title { font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: 1.3rem; }
.lottes-header .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.lottes-header p { color: var(--wp--preset--color--ink) !important; opacity: .75; }

/* Hauptbereich */
main.wp-block-group { padding-top: 2.5rem; padding-bottom: 4rem; }
main.lottes-front { padding-top: 0; margin-top: 0; }

/* Begrüßung mit Berlin-Skyline */
.lottes-hero {
	position: relative;
	margin-top: 0 !important;
	padding-top: clamp(2.5rem, 7vw, 5.5rem) !important;
	padding-bottom: clamp(400px, 42vw, 700px) !important;
	background:
		url("assets/berlin-skyline.svg") center bottom / max(100%, 1100px) auto no-repeat,
		linear-gradient(180deg, #8ECDE8 0%, #BFE4F2 40%, #FBE9CC 82%, #FFE2B4 100%);
	overflow: hidden;
}
.lottes-hero > * { position: relative; animation: lottes-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.lottes-hero > *:nth-child(2) { animation-delay: .12s; }
.lottes-hero > *:nth-child(3) { animation-delay: .24s; }
.lottes-kicker {
	display: inline-block;
	padding: .45rem 1rem;
	border-radius: 999px;
	background: rgba(255,255,255,.7);
	backdrop-filter: blur(6px);
	box-shadow: 0 6px 20px -10px rgba(30,60,80,.4);
	font-size: .95rem;
	font-weight: 600;
	color: var(--wp--preset--color--teal);
}
.lottes-hero h1 { line-height: 1.08; margin-top: 1rem; text-wrap: balance; }
.lottes-name {
	background: linear-gradient(90deg, #2F6B60, #D9473B 60%, #E8A33D);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.lottes-intro { font-size: clamp(1.05rem, 2.2vw, 1.3rem); max-width: 36rem; margin-left: auto !important; margin-right: auto !important; color: #3D4B52; text-wrap: balance; }

/* Login-Karten – schweben über der Spree */
.lottes-cards { position: relative; z-index: 2; margin-top: -56px !important; max-width: 380px !important; margin-left: auto !important; margin-right: auto !important; }
.lottes-cards .lottes-card { align-items: center; text-align: center; }
.lottes-card {
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	padding: 2rem;
	gap: .6rem;
	height: 100%;
	box-shadow: 0 24px 50px -28px rgba(30,50,60,.45), 0 2px 6px rgba(30,50,60,.06);
	transition: transform .25s ease, box-shadow .25s ease;
}
.lottes-card:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 34px 60px -28px rgba(30,50,60,.5); }
.lottes-card h3 { margin: 0; font-size: 1.5rem; }
.lottes-card .wp-block-buttons { margin-top: auto; padding-top: .5rem; }
.lottes-icon {
	display: grid; place-items: center;
	width: 3.4rem; height: 3.4rem; margin: 0;
	border-radius: 18px;
	font-size: 1.7rem;
	background: #E3F3F0;
}
.lottes-icon-alt { background: #FDEFD6; }
.lottes-card:hover .lottes-icon { animation: lottes-wiggle .5s ease; }

/* Grüße von der Spree */
.lottes-berlin { margin-top: 4.5rem !important; }
.lottes-berlin h2 { margin-top: .25rem; }
.lottes-bear { font-size: 2.6rem; margin: 0; animation: lottes-bob 3s ease-in-out infinite; }

/* Fußbereich */
.lottes-footer { padding-top: 1.25rem; padding-bottom: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); margin-top: 0; }
.lottes-footer a { color: inherit; }

@keyframes lottes-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lottes-wiggle { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } }
@keyframes lottes-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 781px) {
	.lottes-cards { margin-top: -36px !important; }
}
@media (max-width: 600px) {
	.lottes-hero { background-size: 820px auto, auto !important; background-position: 47% bottom, center !important; padding-bottom: 330px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.lottes-hero > *, .lottes-bear, .lottes-card:hover .lottes-icon { animation: none; }
	.lottes-card, .lottes-card:hover { transition: none; transform: none; }
}