/* =============================================================
   Kanzlei Cremer & Thelen — base
   LOAD THIS FIRST. header-footer.css und content.css hängen von
   den hier definierten Tokens, dem Reset und dem Container ab.
   ============================================================= */

:root{
	/* Palette — Navy/Gold/Creme, bewusst eigenständig von growenmedia.com */
	--navy:#152A43;
	--navy-deep:#0D1B2E;
	--navy-tint:#E9EDF2;
	--gold:#B08D57;
	--gold-deep:#8C6D3F;
	--gold-tint:#F3ECDD;
	--cream:#FAF7F2;
	--surface:#FFFFFF;
	--text:#1C2430;
	--text-soft:#55606E;
	--text-mute:#6B7684;
	--line:rgba(21,42,67,0.12);
	--line-strong:rgba(21,42,67,0.24);

	/* Layout */
	--wrap-max:1200px;
	--gutter:clamp(20px, 4vw, 32px);
	--section-y:clamp(56px, 8vw, 104px);
	--radius:14px;
	--radius-sm:9px;

	/* Schatten */
	--shadow-sm:0 2px 10px rgba(13,27,46,0.07);
	--shadow-md:0 16px 36px rgba(13,27,46,0.14);

	/* Timing für Interaktionen */
	--ease:cubic-bezier(.22,.61,.36,1);
	--dauer:0.5s;

	/* Fluid type: skaliert stufenlos statt an Breakpoints zu springen */
	--step-h1:clamp(2.25rem, 1.1rem + 3.4vw, 3.75rem);
	--step-h2:clamp(1.625rem, 1.25rem + 1.4vw, 2.25rem);
	--step-h3:clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--step-lead:clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

*{box-sizing:border-box; margin:0; padding:0;}

html{
	scroll-behavior:smooth;
	-webkit-text-size-adjust:100%;
}

body{
	background:var(--cream);
	color:var(--text);
	font-family:'Inter', sans-serif;
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
}

a{color:inherit;}

img,svg,video{max-width:100%; height:auto;}

h1,h2,h3{
	font-family:'Fraunces', serif;
	font-weight:600;
	letter-spacing:-0.01em;
	line-height:1.15;
	text-wrap:balance;
	color:var(--navy);
}

h1{font-size:var(--step-h1);}
h2{font-size:var(--step-h2);}
h3{font-size:var(--step-h3); font-family:'Inter', sans-serif; font-weight:700;}

/* the container every section sits in */
.wrap{
	width:100%;
	max-width:var(--wrap-max);
	margin-inline:auto;
	padding-inline:var(--gutter);
}

section{padding-block:var(--section-y);}

.kicker{
	display:inline-block;
	font-family:'Inter', sans-serif;
	font-weight:600;
	font-size:0.8125rem;
	letter-spacing:0.06em;
	text-transform:uppercase;
	color:var(--gold-deep);
	margin-bottom:10px;
}

.section-head{
	max-width:62ch;
	margin-bottom:clamp(28px, 4vw, 44px);
}
.section-head p{
	font-size:var(--step-lead);
	color:var(--text-soft);
	margin-top:12px;
}

/* ---------- generischer CTA-Button ---------- */
.cta-button{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 26px;
	border-radius:999px;
	background:var(--navy);
	color:var(--gold-tint);
	font-weight:600;
	font-size:0.95rem;
	text-decoration:none;
	box-shadow:var(--shadow-sm);
	transition:transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease), background var(--dauer) var(--ease);
}
.cta-button:hover{
	background:var(--navy-deep);
	box-shadow:var(--shadow-md);
	transform:translateY(-2px);
}
.cta-button svg{width:18px; height:18px; transition:transform var(--dauer) var(--ease);}
.cta-button:hover svg{transform:translateX(3px);}

.cta-button.ist-gold{background:var(--gold); color:var(--navy-deep);}
.cta-button.ist-gold:hover{background:var(--gold-deep); color:var(--gold-tint);}

/* ---------- Scroll-Reveal ---------- */
.reveal{
	opacity:0;
	transform:translateY(22px);
	transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.ist-sichtbar{opacity:1; transform:none;}

/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto;}
	*,*::before,*::after{
		animation-duration:.01ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.01ms !important;
	}
	.reveal{opacity:1; transform:none;}
}

/* ---------- accessibility helpers ---------- */
.screen-reader-text{
	position:absolute !important;
	width:1px; height:1px;
	margin:-1px; padding:0; border:0;
	overflow:hidden; clip-path:inset(50%);
	white-space:nowrap;
}

.skip-link:focus{
	position:fixed !important;
	top:12px; left:12px; z-index:100;
	width:auto; height:auto; margin:0;
	clip-path:none; overflow:visible;
	padding:12px 18px; border-radius:9px;
	background:var(--navy); color:var(--gold-tint);
	font-size:15px; font-weight:500; text-decoration:none;
	outline:2px solid var(--gold); outline-offset:2px;
}

:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}