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

   Bewusst kräftig/industriell statt elegant: harte Kanten, dicke
   Konturlinien, satte Blockfarben, versetzte "Sticker"-Schatten statt
   weicher Weichzeichner-Schatten. Eine Kanzlei bekommt Serifen und
   sanfte Kurven; ein Dachdeckerbetrieb bekommt das Werkzeug-Regal.
   ============================================================= */

:root{
	/* Palette — Schiefer/Terrakotta/Zink, bewusst eigenständig von
	   growenmedia.com und von der Navy/Gold-Palette der Kanzlei-Demo. */
	--schiefer:#22252A;
	--schiefer-deep:#111316;
	--schiefer-tint:#E4E1DB;
	--terrakotta:#D14E2A;
	--terrakotta-deep:#8A3419; /* WCAG-AA-Kontrast (4,5:1) auf --schiefer-tint und --creme */
	--terrakotta-tint:#F5E9DF;
	--zink:#C7CBCE; /* kalter Grauton für Konturen/Trennlinien, Anleihe an Zinkblech */
	--creme:#F6F3EC;
	--surface:#FFFFFF;
	--text:#1B1D21;
	--text-soft:#4B4F56;
	--text-mute:#5A5E64; /* Kontrastprüfung wie --text-soft: mindestens 4,5:1 auf Creme */
	--line:rgba(27,29,33,0.16);
	--line-strong:var(--schiefer);

	/* Layout */
	--wrap-max:1200px;
	--gutter:clamp(20px, 4vw, 32px);
	--section-y:clamp(56px, 8vw, 104px);
	/* Fast keine Rundung — Kanten bleiben Kanten, kein Kanzlei-Softlook. */
	--radius:2px;
	--radius-sm:2px;
	--kontur:3px;

	/* "Sticker"-Schatten: harter Versatz statt Weichzeichner, in
	   Markenfarbe statt neutralem Schwarz. */
	--shadow-sm:5px 5px 0 var(--schiefer);
	--shadow-md:8px 8px 0 var(--schiefer);
	--shadow-sm-invers:5px 5px 0 var(--terrakotta);

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

	/* Fluid type: skaliert stufenlos statt an Breakpoints zu springen */
	--step-h1:clamp(2.375rem, 1.05rem + 3.8vw, 4rem);
	--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{
	-webkit-text-size-adjust:100%;
}

body{
	background:var(--creme);
	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:'Inter', sans-serif;
	font-weight:900;
	letter-spacing:-0.015em;
	line-height:1.1;
	text-wrap:balance;
	color:var(--schiefer);
}

h1{font-size:var(--step-h1);}
h2{font-size:var(--step-h2);}
h3{font-size:var(--step-h3); font-weight:800;}

/* 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: gestempeltes Etikett statt schlichter Farbschrift ----------
   Bewusst als umrandete Box statt reiner Textfarbe — liest sich wie ein
   Werkzeugkisten-Label, nicht wie eine dezente Rubrik-Angabe. */
.kicker{
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-family:'Inter', sans-serif;
	font-weight:800;
	font-size:0.75rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--schiefer);
	background:var(--surface);
	border:2px solid var(--schiefer);
	padding:5px 12px;
	margin-bottom:14px;
}
/* Kleines Dreieck statt Punkt — auch das kleinste Detail zitiert eine
   Dachspitze. */
.kicker::before{
	content:"";
	width:0; height:0;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-bottom:8px solid var(--terrakotta);
	flex-shrink:0;
}

.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 ----------
   Rechteckig, dick umrandet, mit Versatz-Schatten, der beim Klick/Hover
   "eingedrückt" wird — haptisches statt schwebendes Feedback. */
.cta-button{
	display:inline-flex;
	align-items:center;
	gap:10px;
	padding:14px 26px;
	border:var(--kontur) solid var(--schiefer);
	border-radius:var(--radius);
	background:var(--surface);
	color:var(--schiefer);
	font-weight:800;
	font-size:0.9375rem;
	text-transform:uppercase;
	letter-spacing:0.02em;
	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{
	transform:translate(5px, 5px);
	box-shadow:0 0 0 var(--schiefer);
}
.cta-button svg{width:18px; height:18px; transition:transform var(--dauer) var(--ease);}
.cta-button:hover svg{transform:translateX(3px);}

.cta-button.ist-terrakotta{
	background:var(--terrakotta); color:var(--creme); border-color:var(--schiefer-deep);
	box-shadow:var(--shadow-sm);
}
.cta-button.ist-terrakotta:hover{background:var(--terrakotta-deep); color:var(--creme);}

/* ---------- Scroll-Reveal ----------
   Bewusst ohne Start-Opacity von 0: automatisierte Tools (PageSpeed
   Insights u.ä.) scrollen die Seite nie und lösen den IntersectionObserver
   unterhalb des ersten Viewports daher nie aus — bei opacity:0 würde
   jeglicher Text darin dauerhaft mit 1:1-Kontrast (unsichtbar) gemessen und
   fälschlich als Kontrastfehler gemeldet. Das Hochgleiten allein reicht als
   Effekt und hält Text jederzeit vollständig lesbar. */
.reveal{
	transform:translateY(22px);
	transition:transform 0.7s var(--ease);
	transition-delay:var(--verzoegerung, 0ms);
}
.reveal.ist-sichtbar{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{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:2px solid var(--terrakotta);
	background:var(--schiefer); color:var(--terrakotta-tint);
	font-size:15px; font-weight:700; text-decoration:none;
	outline:none;
}

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