/* ==========================================================================
   March Design – Theme-Basis (Design-System, Header, Footer)
   Animationsfrei, performant, mobil-optimiert.
   ========================================================================== */

/* ---- Fonts ------------------------------------------------------------- */
/* Manrope (Hausschrift der Kundin) – variable Webfont, lokal im Theme, SIL OFL
   (assets/fonts/Manrope-OFL.txt). Ein File deckt alle Staerken 200-800 ab:
   Fliesstext 500, fett 700, Headlines duenn 300 / fett 800. */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-latin-ext.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design-Tokens ----------------------------------------------------- */
:root {
	--md-accent: #00c7cc;
	--md-accent-dark: #158493; /* Nebenfarbe laut Kundin */
	--md-dark: #0c0c0c;
	--md-text: #444;
	--md-text-light: rgba(255, 255, 255, 0.82);
	--md-muted: #8a8a8a;
	--md-light: #ffffff;
	--md-line: rgba(0, 0, 0, 0.12);
	--md-line-light: rgba(255, 255, 255, 0.18);

	--md-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--md-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Eine gemeinsame linke Kante fuer alle Sektionen (Kundenfeedback: keine
	   unterschiedlichen Inhaltsbreiten) – "wide" ist bewusst gleich breit. */
	--md-container: 1360px;
	--md-container-wide: 1360px;
	--md-gutter: clamp(20px, 5vw, 70px);

	--md-header-h: 84px;
	--md-radius: 0; /* keine abgerundeten Ecken */

	--md-pad-sm: clamp(28px, 5vw, 56px);
	--md-pad-md: clamp(56px, 9vw, 120px);
	--md-pad-lg: clamp(90px, 14vw, 200px);
}

/* ---- Reset / Basis ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--md-font-body);
	font-weight: 500;
	font-size: 17px;
	line-height: 1.65;
	color: var(--md-text-light);
	background: var(--md-dark);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; line-height: 1.05; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--md-accent); color: var(--md-dark); }

/* ---- Underline für Textlinks -------------------------------------------
   Linie erscheint beim Hover (statisch, ohne Animation). Gilt für
   Fließtext-/Footer-Links; Buttons, Menü, Kacheln und Filter sind bewusst
   ausgenommen. */
.md-footer__menu a,
.md-footer__copy .md-link,
.md-socials__list a,
.md-text__body a,
.md-split__body a,
.md-mediatext__text a,
.md-cols__content a,
.md-heading__text a,
.md-accordion__inner a,
.md-facts__intro a,
.md-testimonial__quote a,
.md-contact__list a,
.md-pagecta__text a,
.md-page__content p a,
.md-single__content a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	padding-bottom: 2px;
}
.md-footer__menu a:hover,
.md-footer__copy .md-link:hover,
.md-socials__list a:hover,
.md-text__body a:hover,
.md-split__body a:hover,
.md-mediatext__text a:hover,
.md-cols__content a:hover,
.md-heading__text a:hover,
.md-accordion__inner a:hover,
.md-facts__intro a:hover,
.md-testimonial__quote a:hover,
.md-contact__list a:hover,
.md-pagecta__text a:hover,
.md-page__content p a:hover,
.md-single__content a:hover {
	background-size: 100% 1px;
}

/* ---- Hilfs-Layout: Container / Bleed ----------------------------------- */
.md-container {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding-inline: var(--md-gutter);
}
.md-container--wide { max-width: var(--md-container-wide); }
.md-bleed { width: 100%; padding-inline: 0; }

.md-shell {
	width: 100%;
	max-width: var(--md-container);
	margin-inline: auto;
	padding: var(--md-pad-md) var(--md-gutter);
}

/* Screenreader / Skip-Link */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	word-wrap: normal !important;
}
.md-skip-link:focus {
	position: fixed; top: 12px; left: 12px; z-index: 1000;
	width: auto; height: auto; clip: auto; clip-path: none;
	padding: 12px 18px; background: var(--md-dark); color: #fff; border-radius: 8px;
}

/* Elementor: Standard-Seiteninhalt randlos, damit volle Breite greift */
.md-page__content > .elementor { width: 100%; }
.md-main { display: block; }

/* ==========================================================================
   Header
   ========================================================================== */
/* Keine Leiste: Header liegt fix und transparent ueber der Seite */
.md-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: transparent;
}
.md-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--md-header-h);
	max-width: var(--md-container-wide);
	margin-inline: auto;
	padding-inline: var(--md-gutter);
}
/* Logo und Menue-Schalter exakt auf einer Mittellinie: keine Zeilenhoehe,
   die unter dem Bild Luft erzeugt */
.md-header__logo { display: flex; align-items: center; line-height: 0; }
.md-header__logo a { display: flex; align-items: center; }
.md-header__logo img,
.md-header__logo .custom-logo { width: auto; height: clamp(48px, 4.5vw, 64px); display: block; }
/* Logo-Farbe automatisch je nach Hintergrund hinter dem Header:
   hell -> schwarzes Logo, dunkel (Klasse md-on-dark via JS) -> weisses Logo. */
.md-header__logo .md-logo--light { display: none; }
body.md-on-dark .md-header__logo .md-logo--dark,
body.md-nav-open .md-header__logo .md-logo--dark { display: none; }
body.md-on-dark .md-header__logo .md-logo--light,
body.md-nav-open .md-header__logo .md-logo--light { display: block; }
body.md-on-dark .custom-logo,
body.md-nav-open .custom-logo { filter: brightness(0) invert(1); }

/* "Menü"-Schalter rechts */
.md-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	color: var(--md-dark);
	padding: 0;
	line-height: 1;
}
body.md-on-dark .md-menu-toggle,
body.md-nav-open .md-menu-toggle { color: #fff; }
.md-menu-toggle__label { font-weight: 700; font-size: 0.95rem; line-height: 1; }
/* 3 Striche, vertikal mittig zum "Menü"-Text */
.md-menu-toggle__icon { position: relative; display: inline-block; width: 24px; height: 14px; flex-shrink: 0; }
.md-menu-toggle__icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
}
.md-menu-toggle__icon span:nth-child(1) { top: 0; }
.md-menu-toggle__icon span:nth-child(2) { top: 6px; }
.md-menu-toggle__icon span:nth-child(3) { top: 12px; }
body.md-nav-open .md-menu-toggle__icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.md-nav-open .md-menu-toggle__icon span:nth-child(2) { opacity: 0; }
body.md-nav-open .md-menu-toggle__icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* ==========================================================================
   Fullscreen-Menü-Overlay
   ========================================================================== */
.md-mnav {
	position: fixed;
	inset: 0;
	z-index: 150; /* unter dem Header (200), Logo + Menü bleiben klickbar */
	display: none;
	background: var(--md-dark);
	overflow-y: auto;
	padding: calc(var(--md-header-h) + 10px) var(--md-gutter) 40px;
}
.md-mnav.is-open { display: grid; place-items: center; }
body.md-nav-open { overflow: hidden; }
.md-mnav__menu { list-style: none; margin: 0; padding: 0; text-align: center; }
.md-mnav__menu li { margin: 0; }
.md-mnav__menu a {
	display: block;
	color: #fff;
	font-family: var(--md-font-display);
	font-weight: 800;
	text-transform: uppercase;
	/* Kleiner, damit alle Menuepunkte ohne Scrollen auf den Bildschirm passen
	   (zusaetzlich an die Bildschirmhoehe gekoppelt) */
	font-size: min(clamp(1.6rem, 4.5vw, 4rem), 8vh);
	line-height: 1.35;
}
/* Hover/Fokus: Menüpunkt in Türkis (statisch, keine Animation) */
.md-mnav__menu a:hover,
.md-mnav__menu a:focus-visible,
.md-mnav__menu .current-menu-item > a { color: var(--md-accent); }

/* Mobil: kleinere Menüpunkte (breite Schrift, z. B. „GRAFIKDESIGN") + Überlauf-Schutz */
.md-mnav__menu a { overflow-wrap: break-word; }
@media (max-width: 560px) {
	.md-mnav__menu a { font-size: min(clamp(1.3rem, 6.5vw, 1.8rem), 7vh); line-height: 1.6; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.md-footer {
	background: var(--md-dark);
	color: var(--md-text-light);
	padding-block: clamp(36px, 6vw, 70px);
}
.md-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--md-container-wide);
	margin-inline: auto;
	padding-inline: var(--md-gutter);
}
.md-footer__copy { font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.md-footer__copy .md-link { color: #fff; }
.md-footer__copy .md-link:hover { color: var(--md-accent); }
/* Fußmenü (Impressum, Datenschutz …) neben Jahr + Name */
.md-footer__menu { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.md-footer__menu a { color: #fff; }
.md-footer__menu a:hover { color: var(--md-accent); }
.md-socials { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.md-socials__label { font-size: 0.85rem; color: var(--md-muted); }
.md-socials__list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.md-socials__list a { font-weight: 700; }
.md-socials__list a:hover { color: var(--md-accent); }
/* Social-Links: Icon (lokales SVG) + Name; Darstellung im Customizer waehlbar */
.md-socials__link { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.md-socials__icon { width: 22px; height: 22px; flex: none; fill: currentColor; }
.md-socials--icons .md-socials__list { gap: 8px 14px; }
.md-socials--icons .md-socials__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.md-socials--icons .md-socials__link { background-image: none; padding: 6px; margin: -6px; }
.md-socials--icons .md-socials__icon { width: 24px; height: 24px; }

/* ==========================================================================
   Allgemeine Inhaltselemente (Blog/Seiten ohne Elementor)
   ========================================================================== */
.md-page__content { width: 100%; }
.md-archive-header { margin-bottom: 2rem; }
.md-archive-title { font-family: var(--md-font-display); font-weight: 800; }
.md-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px; }
.md-post-card__media img { border-radius: var(--md-radius); }
.md-post-card__title { margin-top: 16px; font-size: 1.4rem; }
.md-post-card__title a:hover { color: var(--md-accent); }

/* 404 */
.md-404 { text-align: center; }
.md-404__code { font-family: var(--md-font-display); font-weight: 800; font-size: clamp(80px, 18vw, 200px); color: var(--md-accent); line-height: 1; margin: 0; }
.md-404__title { font-family: var(--md-font-display); font-weight: 800; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 880px) {
	.md-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Keine Animationen – global
   Entfernt saemtliche Uebergaenge und Animationen, auch solche, die Elementor
   oder Plugins mitbringen (z. B. Elementor-Eingangsanimationen). Hover-
   Zustaende bleiben erhalten, schalten aber ohne Verzoegerung um.
   ========================================================================== */
*,
*::before,
*::after {
	transition: none !important;
	animation: none !important;
	scroll-behavior: auto !important;
}
/* Elementor blendet Elemente mit Eingangsanimation zunaechst aus – immer zeigen */
.elementor-invisible { visibility: visible !important; }