/* ============================================================================
   it-sicherheit.io — Design-System "Vertrauensblau"
   Redesign 2026-06-09
   ----------------------------------------------------------------------------
   Ziel: Konsistentes, seriöses B2B-Erscheinungsbild für IT-Security.
   Dunkle Navy-Basis + EIN Signalblau-Akzent + viel Weißraum.
   Ersetzt: Hacker-Grün (#29B14C), Code-Schrift Fira Code, Gutenberg-Wildwuchs.

   Strategie: Wir überschreiben die zentralen CSS-Variablen von Blocksy
   (--theme-palette-color-1..8) und der Theme-Tokens. Da Elementor seine
   Globals auf eben diese Blocksy-Variablen mappt, reskinnt ein Remap dieser
   8 Farben Theme UND Elementor in einem Schritt.
   ============================================================================ */

:root {
	/* --- Marken-Tokens ------------------------------------------------------ */
	--itsi-base:         #0B1426; /* Tiefnavy   – Hero, Footer, Dark-Sections   */
	--itsi-surface:      #131F36; /* Navy       – Karten/Boxen auf Dunkel        */
	--itsi-accent:       #2563EB; /* Signalblau – CTAs, Links, aktive Elemente   */
	--itsi-accent-600:   #1D4FD7; /* Hover-Blau                                  */
	--itsi-accent-light: #38BDF8; /* Cyan       – feine Linien, Icons, Hover     */
	--itsi-text:         #1F2733; /* Anthrazit  – Fließtext auf Hell             */
	--itsi-text-muted:   #5A6B82; /* Schiefer   – Sekundärtext, Labels           */
	--itsi-text-invert:  #E8EEF6; /* Off-White  – Text auf Dunkel                */
	--itsi-bg:           #F7F9FC; /* Nebelweiß  – Standard-Seitenhintergrund     */
	--itsi-surface-lt:   #FFFFFF; /* Reinweiß   – Karten auf Hell                */
	--itsi-border:       #D8E0EA; /* Stahlgrau  – Rahmen, Trenner                */
	--itsi-teal:         #0F9D8C; /* Sober-Teal – sparsam für "abgesichert"      */

	/* --- Blocksy-Palette remappen (steuert Theme + Elementor-Globals) -------
	   !important auf den Custom Properties stellt sicher, dass unser Remap die
	   hochspezifische Inline-:root-Definition von Blocksy zuverlässig schlägt,
	   unabhängig von der Ladereihenfolge der Stylesheets. */
	--theme-palette-color-1: #FFFFFF !important; /* weiß (unverändert)                      */
	--theme-palette-color-2: #1F2733 !important; /* war #000000 -> Anthrazit (Text/Headings)*/
	--theme-palette-color-3: #2563EB !important; /* war #29B14C Grün -> Signalblau (Akzent) */
	--theme-palette-color-4: #0B1426 !important; /* war #192a3d -> Tiefnavy (Dark-BG)       */
	--theme-palette-color-5: #D8E0EA !important; /* war #e1e8ed -> Stahlgrau (Border)       */
	--theme-palette-color-6: #EDF1F6 !important; /* war #f2f5f7 -> Helle Fläche             */
	--theme-palette-color-7: #F7F9FC !important; /* war #FAFBFC -> Nebelweiß (BG)           */
	--theme-palette-color-8: #FFFFFF !important; /* weiß (unverändert)                      */

	/* --- Theme-Tokens (Links, Headings, Schriften) -------------------------- */
	--theme-link-color:           var(--itsi-accent) !important;
	--theme-link-hover-color:     var(--itsi-accent-600) !important;
	--theme-headings-color:       var(--itsi-text) !important;
	--theme-font-family:          'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	--theme-headings-font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;

	/* --- Abstands-Raster (8px-Basis) --------------------------------------- */
	--itsi-radius:   8px;
	--itsi-shadow:   0 6px 24px rgba(11, 20, 38, 0.08);
	--itsi-shadow-h: 0 10px 30px rgba(37, 99, 235, 0.18);
}

/* ============================================================================
   TYPOGRAFIE
   Fließtext: Inter | Headlines: Space Grotesk | (Fira Code wird verdrängt)
   ============================================================================ */
body,
.ct-container,
p, li, td, th, label, input, textarea, select, .elementor-widget-container {
	font-family: var(--theme-font-family);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.elementor-heading-title,
.wp-block-heading {
	font-family: var(--theme-headings-font-family);
	letter-spacing: -0.01em;
	color: var(--itsi-text);
}

/* Großzügige, ruhige Größen (rem-Skala auf 16px-Basis) */
h1, .elementor-heading-title.elementor-size-xxl { font-size: clamp(2.1rem, 4vw, 3rem);  line-height: 1.15; font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); line-height: 1.2;  font-weight: 600; }
h3 { font-size: clamp(1.3rem, 2vw, 1.5rem);  line-height: 1.3;  font-weight: 600; }
body { font-size: 1rem; line-height: 1.65; color: var(--itsi-text); }
p { max-width: 68ch; }

/* Menü-Schrift: Fira Code (Code-Font) konsequent durch Space Grotesk ersetzen.
   !important, weil Blocksy die Menü-Schrift per Inline-Style hoch spezifisch setzt. */
.ct-header a,
#header .menu a,
.ct-main-navigation a,
[class*="ct-"] .menu-item a {
	font-family: 'Space Grotesk', 'Inter', sans-serif !important;
	letter-spacing: 0 !important;
}

/* ============================================================================
   HEADER & NAVIGATION
   Schwarzer Header -> Tiefnavy. Grüne Hover-/Linkfarben -> Signalblau/Cyan.
   ============================================================================ */
#header [data-row],
.ct-header,
header#masthead {
	background-color: var(--itsi-base) !important;
}

/* Menü-Links: helle Schrift auf Navy, Cyan beim Hover (war Grün) */
.ct-header .menu-item > a,
.ct-main-navigation .menu-item > a {
	color: var(--itsi-text-invert) !important;
}
.ct-header .menu-item > a:hover,
.ct-header .current-menu-item > a,
.ct-main-navigation .menu-item > a:hover {
	color: var(--itsi-accent-light) !important;
}

/* Dropdown-Hintergrund auf Navy-Surface */
.ct-header .sub-menu,
.menu-item .sub-menu {
	background-color: var(--itsi-surface) !important;
	border-top: 2px solid var(--itsi-accent);
}

/* Einheitliche, ruhige Versalien-Optik für die Hauptnavigation
   (gleicht unterschiedliche Schreibweisen der Menü-Labels aus). */
.ct-header .menu > .menu-item > a,
.ct-main-navigation > ul > .menu-item > a {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9rem;
	font-weight: 600;
}

/* CTA-Menüpunkt "Beratung anfragen" als kompakter blauer Button (nicht volle Headerhöhe) */
.menu-item.itsi-nav-cta {
	display: flex !important;
	align-items: center;
	margin-left: 0.5em;
}
.menu-item.itsi-nav-cta > a,
.menu-item.itsi-nav-cta > a.ct-menu-link {
	background-color: var(--itsi-accent) !important;
	color: #FFFFFF !important;
	border-radius: var(--itsi-radius);
	padding: 0.6em 1.25em !important;
	line-height: 1.2 !important;
	min-height: 0 !important;   /* Blocksy-Menühöhe aufheben */
	height: auto !important;
	align-self: center !important;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.menu-item.itsi-nav-cta > a:hover {
	background-color: var(--itsi-accent-600) !important;
	color: #FFFFFF !important;
	transform: translateY(-2px);
	box-shadow: var(--itsi-shadow-h);
}

/* ============================================================================
   BUTTONS / CTAs
   Einheitlich Signalblau, dezenter Hover (Anheben + weicher Schatten).
   ============================================================================ */
.ct-button,
.wp-block-button__link,
.wp-element-button,
.elementor-button,
button[type="submit"],
input[type="submit"],
.forminator-button,
.wpforms-submit {
	background-color: var(--itsi-accent) !important;
	border: 1px solid var(--itsi-accent) !important;
	color: #FFFFFF !important;
	border-radius: var(--itsi-radius) !important;
	font-family: var(--theme-headings-font-family);
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: none;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.ct-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.forminator-button:hover,
.wpforms-submit:hover {
	background-color: var(--itsi-accent-600) !important;
	border-color: var(--itsi-accent-600) !important;
	transform: translateY(-2px);
	box-shadow: var(--itsi-shadow-h) !important;
}

/* Sekundärer (Outline-)Button, falls verwendet */
.elementor-button.is-outline,
.ct-button.ct-button-secondary {
	background-color: transparent !important;
	color: var(--itsi-accent) !important;
}

/* ============================================================================
   LINKS
   ============================================================================ */
a { color: var(--itsi-accent); }
a:hover { color: var(--itsi-accent-600); }

/* Auf dunklen Sektionen: Links/Headings hell halten */
.ct-section-dark a,
[style*="0B1426"] a,
[style*="192a3d"] a { color: var(--itsi-accent-light); }

/* ============================================================================
   KARTEN / BOXEN  – ruhige Hover, feine Rahmen statt harter Schatten
   ============================================================================ */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.ct-card,
.wp-block-group.is-style-card {
	border-radius: var(--itsi-radius);
	transition: transform .18s ease, box-shadow .2s ease;
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	transform: translateY(-3px);
}

/* ============================================================================
   FORMULARE  – ruhige Felder, blauer Fokus-Ring
   ============================================================================ */
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], textarea, select {
	border: 1px solid var(--itsi-border) !important;
	border-radius: var(--itsi-radius) !important;
	background: var(--itsi-surface-lt);
	color: var(--itsi-text);
	transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, textarea:focus, select:focus {
	border-color: var(--itsi-accent) !important;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
	outline: none;
}

/* ============================================================================
   FORMINATOR-FORMULARE  – Button blau (statt schwarz), Links blau (statt grün)
   Höhere Spezifität nötig: Forminator stylt den Button selbst sehr spezifisch;
   der Datenschutz-Link trägt ein Inline-Grün (#29B14C), das nur !important schlägt.
   ============================================================================ */
.forminator-ui.forminator-custom-form button.forminator-button,
.forminator-ui.forminator-custom-form button.forminator-button-submit,
button.forminator-button-submit {
	background-color: var(--itsi-accent) !important;
	background-image: none !important;
	border-color: var(--itsi-accent) !important;
	color: #FFFFFF !important;
	border-radius: var(--itsi-radius) !important;
	font-family: var(--theme-headings-font-family);
	font-weight: 600;
}
.forminator-ui.forminator-custom-form button.forminator-button:hover,
button.forminator-button-submit:hover {
	background-color: var(--itsi-accent-600) !important;
	border-color: var(--itsi-accent-600) !important;
}
/* Inline-Grün in Formular-Links (Datenschutz) -> Signalblau */
.forminator-ui a,
.forminator-custom-form a,
.forminator-checkbox-label a,
.forminator-field a {
	color: var(--itsi-accent) !important;
	text-decoration: underline;
}

/* ============================================================================
   FOOTER  – Tiefnavy, heller Text
   ============================================================================ */
.ct-footer,
#footer,
footer[data-row] {
	background-color: var(--itsi-base) !important;
	color: var(--itsi-text-invert) !important;
}
.ct-footer a, #footer a { color: var(--itsi-text-invert) !important; }
.ct-footer a:hover, #footer a:hover { color: var(--itsi-accent-light) !important; }

/* ============================================================================
   DEZENTE TECHNISCHE DESIGNELEMENTE (statt Hacker-Klischees)
   Feine Akzentlinie oben an dunklen Sektionen.
   ============================================================================ */
.itsi-accent-rule { height: 3px; width: 64px; background: var(--itsi-accent); border: 0; margin: 1rem 0; }

/* Auswahl-Markierung in Markenfarbe */
::selection { background: var(--itsi-accent); color: #fff; }

/* Body-Hintergrund auf Nebelweiß */
body { background-color: var(--itsi-bg); }