/*
Theme Name: 123-Service (VN Child)
Theme URI: https://123-service.vision-nine.com
Author: Vision Nine Studio
Description: Child-Theme für 123-Service (A&O TEC GmbH). Dark-first Navy + Orange, Familjen Grotesk (OFL) self-hosted, Notch-Signatur.
Author URI: https://vision-nine.com
Template: vn-foundation
Version: 0.57.1
License: Proprietary
Text Domain: 123-service-wp
*/

/* ==========================================================================
   0 · Self-Hosted Font — Familjen Grotesk (OFL, woff2 latin subset)
   4 Gewichte 400/500/600/700. Einzige Schrift, kein Mono.
   ========================================================================== */
@font-face {
	font-family: 'Familjen Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 400;
	src: url('assets/src/fonts/familjen-grotesk-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Familjen Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 500;
	src: url('assets/src/fonts/familjen-grotesk-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Familjen Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 600;
	src: url('assets/src/fonts/familjen-grotesk-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Familjen Grotesk';
	font-style: normal;
	font-display: swap;
	font-weight: 700;
	src: url('assets/src/fonts/familjen-grotesk-700.woff2') format('woff2');
}

/* ==========================================================================
   1 · Brand Tokens — V5 Dark-First Finovate-Style
   ========================================================================== */
:root {
	/* --- Color (Dark-first: Navy als Body-Background) --- */
	--brand-bg:             #001D36;     /* Navy — Default Body */
	--brand-bg-soft:        #0A2840;     /* Navy-soft — secondary surface */
	--brand-bg-deep:        #001426;     /* Navy-deep — deepest */
	--brand-fg:             #FFFFFF;     /* White — Default Text */
	--brand-muted:          color-mix(in srgb, var(--brand-on-dark) 72%, transparent);
	--brand-faint:          color-mix(in srgb, var(--brand-on-dark) 45%, transparent);
	--brand-hairline:       rgba(255, 255, 255, 0.10);
	--brand-hairline-soft:  rgba(255, 255, 255, 0.06);

	/* V6 — CI-Farben: Navy + Orange + White (KEIN Cream — Kundenentscheidung 21.05.2026).
	   Ehemals "cream"-Sections werden navy-Variations für Section-Differentiation. */
	--brand-cream:          #0A2840;     /* navy-soft elevated (statt cream) */
	--brand-cream-soft:     #0F3050;     /* noch deeper navy-Variation */
	--brand-white:          #FFFFFF;     /* echtes Weiß für Cards/Akzente */
	--brand-fg-on-light:    #FFFFFF;     /* Text auf navy-Variations = weiß */
	--brand-muted-on-light: color-mix(in srgb, var(--brand-on-dark) 72%, transparent);
	--brand-hairline-on-light: rgba(255, 255, 255, 0.10);

	/* Brand semantics — Navy als Primary */
	--brand-navy:           #001D36;
	--brand-navy-soft:      #0A2840;
	--brand-navy-deep:      #001426;

	/* CI-Orange (unverändert) */
	--brand-orange:         #EB5D3D;
	--brand-orange-hover:   #F47654;
	--brand-orange-deep:    #D04425;
	--brand-orange-soft:    #FCD9CE;
	--brand-orange-tint:    rgba(235, 93, 61, 0.12);

	/* Legacy aliases (für bestehende class-references) */
	--brand-bg-white:       var(--brand-white);
	--brand-on-dark:        #FFFFFF;
	--brand-on-dark-strong: #FFFFFF;
	--brand-on-dark-muted:  color-mix(in srgb, var(--brand-on-dark) 72%, transparent);
	--brand-on-dark-faint:  color-mix(in srgb, var(--brand-on-dark) 45%, transparent);
	--brand-on-dark-line:   rgba(255, 255, 255, 0.12);

	/* --- Font: Familjen Grotesk für alles (Display, Body, Labels, Buttons, Zahlen). Kein Mono. --- */
	--font-display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body:    'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-mono:    'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- Type Scale — Golden Ratio φ 1.618 (Basis Body 16→18px, fluid).
	   φ trägt die großen Sprünge (Body→H2→H1→Display), H3 = ×√φ als sanfte
	   Zwischenstufe. Mobile-Min → Desktop-Max via clamp. Siehe DESIGN-SYSTEM.md §2. */
	--type-display:    clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);   /* 40 → 76 */
	--type-h1:         clamp(2rem, 1.5rem + 2.5vw, 2.9375rem);   /* 32 → 47 */
	--type-h2:         clamp(1.75rem, 1.45rem + 1.5vw, 2.25rem);   /* 28 → 36 */
	--type-h3:         clamp(1.25rem, 1.1rem + 0.75vw, 1.4375rem); /* 20 → 23 */
	--type-h4:         clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);  /* 18 → 20 (Lead) */
	--type-body-lg:    clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17 → 19 */
	--type-body:       clamp(1rem, 0.95rem + 0.25vw, 1.125rem);   /* 16 → 18 */
	--type-body-sm:    0.9375rem;                                  /* 15 */
	--type-micro:      0.8125rem;                                  /* 13 */
	--type-mono:       0.75rem;                                    /* 12 Mono-Label */

	/* --- Border-Radius — weiche Logo-Rundung (Konstante ab 03.07.2026) --- */
	--radius-btn:      12px;   /* Buttons/Nav-Dock: gerundet, kein voller Pill */
	--radius-card:     18px;   /* Karten, Bilder, Panels */
	--radius-card-sm:  10px;   /* Mini-Fotos, kleine Chips */
	--radius-card-lg:  24px;
	--radius-pill:     999px;  /* echte Pills: Status-Badges, Punkte */
	--radius-img:      18px;

	/* --- Notch-Mask (Brand-Signatur): diagonal gekappte Ecke o.li + u.re.
	   Siehe DESIGN-SYSTEM.md §3.1. Anwenden via .vn-mask / .vn-img--mask. --- */
	--notch-card: 16px;
	--notch-btn:  10px;
	--notch-img:  22px;

	/* --- Spacing --- */
	--sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
	--sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem;
	--sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem;
	--sp-10: 8rem; --sp-11: 12rem;

	/* --- Container (px: Root-font ist 18px via --type-body, rem-Maße wären 12,5% zu groß) --- */
	--page-max:     1480px;
	--page-narrow:  900px;
	--page-text:    720px;
	--gutter:       clamp(1.25rem, 4vw, 3rem);

	/* --- Header (Floating Dock) --- */
	--header-h:        64px;
	--header-status-h: 0px;
	--dock-offset-y:   18px;
	--dock-offset-x:   16px;

	/* --- Motion (taste + emil-design-eng): starke ease-out, UI < 300ms --- */
	--d-snap:           0.16s;
	--d-medium:         0.28s;
	--d-slow:           0.5s;
	--ease-out:         cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out:      cubic-bezier(0.77, 0, 0.175, 1);

	--z-base: 1; --z-header: 100; --z-overlay: 500;
}

/* ==========================================================================
   2 · Reset & Body-Defaults (Light-first)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	color-scheme: dark;
	scroll-behavior: smooth;
}

html, body {
	margin: 0; padding: 0;
	background: var(--brand-bg);
	color: var(--brand-fg);
	font-family: var(--font-body);
	font-size: var(--type-body);
	font-weight: 400;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
	font-family: var(--font-display);
	font-weight: 500;                  /* Finovate: medium, NICHT bold */
	line-height: 1.08;
	letter-spacing: -0.015em;
	color: inherit;
	text-wrap: pretty;                 /* natürlicher line-break statt forced balance */
	margin: 0;
}
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); font-weight: 500; }

p { margin: 0; }

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--d-snap) var(--ease-out);
}

.tabular, [data-tabular] {
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3 · Inline-Accent-Pattern — Finovate Signature
   ========================================================================== */

/* Inline-Color: "Eine Hand. Eine Verantwortung." — selected word color */
.vn-accent {
	color: var(--brand-orange);
}
.vn-accent--navy { color: var(--brand-navy); }

/* Stabilo-Marker: "You're Getting" mit Orange-Soft-Background hinter Text */
.vn-mark {
	display: inline-block;
	padding: 0.05em 0.35em 0.15em;
	background: var(--brand-orange-soft);
	color: var(--brand-navy);
	border-radius: 6px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* Small caption-eyebrow above headlines */
.vn-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand-muted);
	margin: 0;
}
.vn-eyebrow--on-dark { color: var(--brand-on-dark-muted); }
.vn-eyebrow__dot {
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--brand-orange);
	border-radius: 999px;
	flex-shrink: 0;
}

/* ==========================================================================
   4 · Layout Helpers
   ========================================================================== */
.vn-section {
	padding-block: clamp(4.5rem, 9vw, 9rem);
	position: relative;
}
/* Farbkonzept (06.07.2026): EIN durchgängiger Blauton als Sektions-Hintergrund.
   Navy = Bühne (Standard) · Weiß = genau 1 Beweis-/Zusagen-Sektion pro Seite ·
   Orange = genau 1 Handlungs-Sektion (Final-CTA).
   navy-soft/navy-deep sind KEINE Sektions-Hintergründe mehr, bleiben aber als
   Flächen-Farben für Karten/Panels INNERHALB von Sektionen erhalten (Tokens
   --brand-navy-soft/--brand-navy-deep unverändert). Die Modifier bleiben im
   Markup bestehen und mappen alle auf Navy. */
.vn-section--cream     { background: var(--brand-navy); color: var(--brand-on-dark); }
.vn-section--white     { background: var(--brand-white); color: var(--brand-navy); }
.vn-section--navy      { background: var(--brand-navy); color: var(--brand-on-dark); }
.vn-section--navy-soft { background: var(--brand-navy); color: var(--brand-on-dark); }
.vn-section--navy-deep { background: var(--brand-navy); color: var(--brand-on-dark); }
.vn-section--orange    { background: var(--brand-orange); color: #fff; }

/* Heading-Override für WHITE-Sections (auf #fff muss Text dunkel sein) */
.vn-section--white h1,
.vn-section--white h2,
.vn-section--white h3,
.vn-section--white h4,
.vn-section--white h5,
.vn-section--white p,
.vn-section--white li,
.vn-section--white [class*="__headline"],
.vn-section--white [class*="__title"],
.vn-section--white .eyebrow,
.vn-section--white .vn-eyebrow {
	color: var(--brand-navy) !important;
}
.vn-section--white .vn-eyebrow,
.vn-section--white .eyebrow {
	color: var(--brand-orange) !important;
}

.vn-container {
	max-width: var(--page-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.vn-container--narrow { max-width: var(--page-narrow); }

/* ==========================================================================
   5 · Buttons V7 — Logo-Match (border-radius 6px) + Geist Mono Caps + Arrow-Slide
   ========================================================================== */
.vn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	padding: 0.9375rem 1.5rem;
	background: var(--brand-orange);
	color: var(--brand-on-dark);
	border: 1px solid transparent;
	border-radius: var(--radius-btn);
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
	white-space: nowrap;
	cursor: pointer;
	position: relative;
}
.vn-btn:hover {
	background: var(--brand-orange-hover);
}

/* Arrow-Slide-Hover (diagonal nach oben-rechts) — funktioniert für jedes Pfeil-SVG, Icon oder Text-Pfeil im Button */
.vn-btn svg,
.vn-btn .vn-arrow {
	transition: transform 0.18s var(--ease-out);
	flex-shrink: 0;
}
.vn-btn:hover svg,
.vn-btn:hover .vn-arrow {
	transform: translate(6px, -6px);
}

/* Tiny circle-icon link (Finovate "Learn more" pattern) */
.vn-arrow-icon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 500;
	color: inherit;
}
.vn-arrow-icon__circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	background: var(--brand-orange);
	color: var(--brand-on-dark);
	border-radius: 999px;
	transition: transform var(--d-snap) var(--ease-out);
}
.vn-arrow-icon:hover .vn-arrow-icon__circle {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   6 · Cards — generic Finovate-Card patterns
   ========================================================================== */
.vn-card {
	background: var(--brand-navy-soft);          /* Dark-first card */
	color: var(--brand-on-dark);
	border-radius: var(--radius-card);
	padding: clamp(1.5rem, 2.5vw, 2rem);
}
.vn-card--cream {
	background: var(--brand-cream);
	color: var(--brand-fg-on-light);
}
.vn-card--white {
	background: var(--brand-white);
	color: var(--brand-navy);
}
.vn-card--white h1,
.vn-card--white h2,
.vn-card--white h3,
.vn-card--white h4,
.vn-card--white p,
.vn-card--white [class*="__headline"],
.vn-card--white [class*="__title"] {
	color: var(--brand-navy);
}
.vn-card--orange {
	background: var(--brand-orange);
	color: var(--brand-navy);                   /* Dark text auf Orange */
}
.vn-card--hairline {
	border: 1px solid var(--brand-hairline);
}

/* ==========================================================================
   7 · Reveal Animations DEAKTIVIERT (Content immer sichtbar)
   ========================================================================== */
.r-up, .r-up.is-visible {
	opacity: 1;
	transform: none;
}

/* Skip-Link — A11y */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
	padding: 0.5rem 1rem;
	background: var(--brand-orange);
	color: var(--brand-on-dark);
	font-size: var(--type-micro);
	text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Selection */
::selection {
	background: var(--brand-orange);
	color: var(--brand-on-dark);
}


/* Hide legacy mono-label / mono-index globally (Finovate-pattern: no mono cruft) */
.mono-label, .mono-index, .section-tag {
	font-family: var(--font-body) !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* ==========================================================================
   8 · Page-Transition Overlay (Bogen-Mask-Reveal — V1-Pattern)
   ========================================================================== */
/* Default: ohne JS unsichtbar (Fail-safe). */
.pt-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	display: none;
}
/* JS-ready: Overlay vom ersten Paint an sichtbar, Orange deckt Viewport.
   Wird durch die CSS-Open-Animation gerichtet (siehe @keyframes vn-pt-open). */
.js-pt-ready .pt-overlay { display: block; }
/* Aktive Navigation (Link-Close, BFCache-restore): explizit anzeigen. */
.pt-overlay.is-active { display: block; }

.pt-overlay__mask {
	position: absolute;
	inset: 0;
	background: var(--brand-orange);
	-webkit-mask-image: linear-gradient(#000, #000), var(--vn-bogen-svg, url('assets/src/images/bogen-mask.svg'));
	        mask-image: linear-gradient(#000, #000), var(--vn-bogen-svg, url('assets/src/images/bogen-mask.svg'));
	/* Default = covering state (Orange deckt Viewport, kleines Loch). */
	-webkit-mask-size: 100% 100%, 140px 131px;
	        mask-size: 100% 100%, 140px 131px;
	-webkit-mask-position: center, center;
	        mask-position: center, center;
	-webkit-mask-repeat: no-repeat, no-repeat;
	        mask-repeat: no-repeat, no-repeat;
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	will-change: mask-size;
}

/* CSS-Open-Animation: läuft automatisch beim ersten Paint, sobald .js-pt-ready gesetzt ist.
   Mask-Loch wächst von 140px → 700vmax → Orange peelt weg. */
@keyframes vn-pt-open {
	from {
		-webkit-mask-size: 100% 100%, 140px 131px;
		        mask-size: 100% 100%, 140px 131px;
	}
	to {
		-webkit-mask-size: 100% 100%, 700vmax 654vmax;
		        mask-size: 100% 100%, 700vmax 654vmax;
	}
}
.js-pt-ready .pt-overlay__mask {
	animation: vn-pt-open 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Bei aktiver Close-Animation (JS-getrieben) keine CSS-Animation drüber. */
.pt-overlay.is-active .pt-overlay__mask {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.pt-overlay { display: none !important; }
	.js-pt-ready .pt-overlay { display: none !important; }
}