/* =========================================================
   DYNA werbung+design – Text-Struktur & Scroll Reveal
   Ergaenzt css/style.css (HTML5 UP «Highlights»)
   ========================================================= */

:root {
	--dm-accent: #1a9389;      /* Akzent der bestehenden Vorlage (Button) */
	--dm-text: #61686b;
	--dm-line: #dddddd;
	--dm-green: #1a9389;       /* Gruen fuer Einleitung = Akzentfarbe der Vorlage */
	--dm-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Schrift: Ubuntu, lokal eingebunden (kein Google-Server) ---------- */
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/ubuntu-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ubuntu-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/ubuntu-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ubuntu-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Ubuntu'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ubuntu-latin-700-normal.woff2') format('woff2'); }

body, input, select, textarea, button, .button,
h1, h2, h3, h4, h5, h6, p, li, a {
	font-family: 'Ubuntu', Helvetica, Arial, sans-serif !important;
}

/* ---------- Header ---------- */
#header .dm-tagline {
	margin: 1.5em 0 0;
	font-size: .8em;
	letter-spacing: .25em;
	text-transform: lowercase;
	color: inherit;
	opacity: .9;
}

/* ---------- Lead / Claim ---------- */
.dm-lead {
	font-size: 1em;
	line-height: 1.6;
	color: var(--dm-green);
	margin-bottom: 1em;
}

/* ---------- Branchen: gestapelte Liste, ohne Rahmen ---------- */
ul.dm-chips {
	list-style: none;
	padding: 0;
	margin: 0 0 2em;
	text-align: center;
}
ul.dm-chips li {
	display: block;
	padding: .2em 0;
	font-size: 1em;
	line-height: 1.6;
	color: var(--dm-text);
}
ul.dm-chips li:last-child {
	font-style: italic;
	opacity: .8;
}

/* ---------- Leistungsfelder ---------- */
.dm-services {
	margin: 2em 0;
	text-align: left;
}
.dm-service {
	padding: 1.1em 0 1.1em 1em;
	border-left: 2px solid var(--dm-line);
	margin-bottom: .6em;
	transition: border-color .3s ease;
}
.dm-service:hover {
	border-left-color: var(--dm-accent);
}
.dm-service h3 {
	margin: 0 0 .35em;
	font-size: .8em;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--dm-accent);
	font-weight: 700;
}
.dm-service p {
	margin: 0;
	font-size: 1em;
	line-height: 1.6;
}

/* ---------- Team (Footer) ---------- */
/* Vorlage setzt Footer-Absaetze auf 1.15em – angleichen an den Fliesstext */
#footer .container p { font-size: 1em; }
.dm-cta {
	font-size: 1em;
	line-height: 1.5;
	font-weight: 700;
	color: var(--dm-text);
	margin-bottom: .75em;
}
ul.dm-team {
	list-style: none;
	padding: 0;
	margin: 2em 0;
}
ul.dm-team li {
	padding: .75em 0;
	border-top: 1px solid var(--dm-line);
	font-size: 1em;
	line-height: 1.55;
	color: var(--dm-text);
}
ul.dm-team li:last-child { border-bottom: 1px solid var(--dm-line); }
ul.dm-team strong {
	display: block;
	color: var(--dm-accent);
	letter-spacing: .05em;
}
.dm-contact { margin-bottom: 2em; }
.dm-logo {
	display: block;
	width: 120px;           /* 20 % kleiner als bisher (150 px) */
	height: auto;
	margin: 2.5em auto 1.5em;
}

/* =========================================================
   Scroll Reveal, gestaffelt (staggered fade-in-up)
   Greift nur, wenn JS die Klasse .dm-motion setzt.
   Ohne JS / bei «Bewegung reduzieren» ist alles sichtbar.
   ========================================================= */
.dm-motion .dm-r {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition:
		opacity .7s var(--dm-ease),
		transform .7s var(--dm-ease);
	transition-delay: calc(var(--dm-i, 0) * var(--dm-step, 90ms));
	will-change: opacity, transform;
}
.dm-motion .dm-r.is-in {
	opacity: 1;
	transform: none;
}
/* Chips: kuerzerer Weg, schnellere Staffelung */
.dm-motion ul.dm-chips > .dm-r { transform: translate3d(0, 12px, 0); }
.dm-motion ul.dm-chips > .dm-r.is-in { transform: none; }

/* Linie unter den Titeln zeichnet sich (Underline Draw) */
.dm-motion header.major.dm-r h2::after,
.dm-motion header.major.dm-r h1::after {
	transform: scaleX(0);
	transition: transform .9s var(--dm-ease) .25s;
}
.dm-motion header.major.dm-r.is-in h2::after,
.dm-motion header.major.dm-r.is-in h1::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.dm-motion .dm-r { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media print {
	.dm-motion .dm-r { opacity: 1 !important; transform: none !important; }
}