.elementor-kit-6{--e-global-color-primary:#062863;--e-global-color-secondary:#0A3A8C;--e-global-color-text:#12151C;--e-global-color-accent:#062863;--e-global-color-978526b:#3D4658;--e-global-color-eb04061:#4B5565;--e-global-color-a2c5549:#5B6577;--e-global-color-94a4c6b:#5D6775;--e-global-color-d9a0e76:#F7F8FB;--e-global-color-9945f0e:#EEF1F6;--e-global-color-4bab1ea:#E7EAF1;--e-global-color-1c5c819:#E1E5EE;--e-global-color-75732ee:#D3D9E6;--e-global-color-1e46861:#F2F5FB;--e-global-typography-primary-font-family:"Geist";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Geist Mono";--e-global-typography-accent-font-weight:500;background-color:var( --e-global-color-d9a0e76 );color:var( --e-global-color-text );font-family:"Geist", Sans-serif;font-size:16px;font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );font-weight:600;}.elementor-kit-6 h1{font-size:64px;font-weight:600;}.elementor-kit-6 h2{font-size:34px;}.elementor-kit-6 h3{font-size:17px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{border-style:none;border-radius:8px 8px 8px 8px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 h1{font-size:46px;}.elementor-kit-6 h2{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:15px;}.elementor-kit-6 h1{font-size:34px;}.elementor-kit-6 h2{font-size:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@media ( max-width: 767px ) {

	/* Nimmt dem Hamburger den Bezugsrahmen: Elementor positioniert das Dropdown bei
	   aktiver Option „Ausdehnen" per JavaScript relativ zum Menue-Widget. Ohne diesen
	   Bezug faellt es auf den inneren Kopfzeilen-Container zurueck, der den
	   Seitenabstand bereits mitbringt. */
	.scit-main-menu.elementor-widget-nav-menu {
		position: static !important;
	}

	/* left und width schreibt Elementor als Inline-Stil – nur !important kommt dagegen an. */
	.scit-main-menu .elementor-nav-menu--dropdown {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		transform: none !important;
		margin-left: 0 !important;
	}
}

.scit-leistungen-home { counter-reset: svc; }
.scit-leistungen-its { counter-reset: svc; }
.scit-leistungen-web { counter-reset: svc; }
.scit-leistung { counter-increment: svc; }
.scit-leistung-nr::before {
  content: counter(svc, decimal-leading-zero);
  font-family: 'Geist Mono', monospace;
  color: #062863;
  display: block;
  float: left;
}

.its-leistungen-cont {
    overflow: hidden;
}

.scit-leistungen-its a{
    font-weight: 400;
}

.pnmb p {
    margin-bottom: 0;
}

.sc-dot{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #062863;
  display: inline-block;
  animation: scPulse 2.4s ease-in-out infinite;
}

.scit-checks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 26px;
}

.scit-checks li{
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #5b6577;
}

.scit-checks li::before{
  content: "✓";
  color: #062863;
  font-weight: 700;
  flex: none;
}

.scit-leistungen-home .elementor-loop-container{
  --grid-column-gap: 0 !important;
  --grid-row-gap: 0 !important;
  border: 1px solid #e1e5ee !important;
  border-radius: 14px;
  overflow: hidden;
}

.scit-leistungen-home .e-loop-item{
  background: #fff !important;
  border-top: 1px solid #e1e5ee !important;
  border-left: 1px solid #e1e5ee !important;
}

@media (min-width: 1025px){
  .scit-leistungen-home .e-loop-item:nth-of-type(3n+1){ border-left: none !important; }
  .scit-leistungen-home .e-loop-item:nth-of-type(-n+3){ border-top: none !important; }
}

@media (max-width: 1024px){
  .scit-leistungen-home .e-loop-item:last-child:nth-of-type(odd){
    grid-column: 1 / -1;
  }
  
  .scit-checks{
      grid-template-columns: 1fr;
      gap: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  .scit-leistungen-home .e-loop-item:nth-of-type(2n+1){ border-left: none !important; }
  .scit-leistungen-home .e-loop-item:nth-of-type(-n+2){ border-top: none !important; }
}

@media (max-width: 767px){
    .scit-leistungen .elementor-loop-container,
    .scit-leistungen-home .elementor-loop-container{
      grid-auto-rows: 240px !important;
    }
    
}

@keyframes scPulse{
  0%, 100% { opacity: .35; transform: scale(1);    }
  50%      { opacity: .9;  transform: scale(1.35); }
}

@media (prefers-reduced-motion: reduce){
  .sc-dot{ animation: none; opacity: .9; }
}

/* === SCIT Profil-Bausteine – Anfang (von Claude gesetzt, Block nicht umbenennen) === */
/**
 * Profilseiten – Gestaltung der Shortcode-Bausteine.
 *
 * Die Werte stammen eins zu eins aus dem Entwurf („System coreIT Website.dc.html",
 * Abschnitt Profil). Sie stehen als Variablen ganz oben, damit sie sich in Elementor
 * unter „Erweitert → Eigenes CSS" überschreiben lassen, ohne dass hier jemand
 * nachbessern muss.
 *
 * Betrifft die Ausgaben von [scit_vcard_button], [scit_profil_links] und [scit_qr].
 */

:root {
	--scit-grund: #ffffff;
	--scit-rand: #d3d9e6;
	--scit-trenner: #e1e5ee;
	--scit-text: #12151c;
	--scit-text-leise: #5b6577;
	--scit-akzent: #062863;
	--scit-akzent-text: #eef2f8;
	--scit-flaeche: #f7f8fb;
	--scit-radius: 10px;

	/* Wie weit sich etwas beim Überfahren anhebt. Gilt für alle Bausteine unten und
	   für die Klasse .scit-heben. Der Entwurf verwendet 3 px. */
	--scit-hebung: 3px;
}

/* ------------------------------------------------------------------ *
 * .scit-heben – eigener Schwebe-Effekt statt Elementors „Float"
 *
 * Elementors Hover-Animation „Float" hebt fest um 8 px an, eine Einstellung dafür
 * gibt es nicht. Diese Klasse macht dasselbe, nur einstellbar: Klasse unter
 * „Erweitert → CSS-Klassen" eintragen, Elementors Hover-Animation dabei auf „Keine"
 * lassen.
 *
 * Abweichende Höhe für ein einzelnes Element – im Widget unter
 * „Erweitert → Eigenes CSS":
 *     .elementor-kit-6 { --scit-hebung: 8px; }
 * ------------------------------------------------------------------ */

.scit-heben {
	transition: transform .3s ease-out;
}

.scit-heben:hover,
.scit-heben:focus-visible,
.scit-heben:focus-within {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
}

/**
 * Elementors eigene Animation „Schweben" umbiegen.
 *
 * Zwei Selektoren, weil die Animationsklasse je nach Widget unterschiedlich sitzt:
 * beim Button am inneren <a class="elementor-button">, bei Containern und Bildern am
 * Element selbst. Beide brauchen drei Klassen, um Elementors eigene Regel
 * (.elementor-animation-float:hover, zwei Klassen) zu überstimmen.
 */
.elementor-element .elementor-animation-float:hover,
.elementor-element .elementor-animation-float:focus,
.elementor-element .elementor-animation-float:active,
.elementor-element.elementor-animation-float:hover,
.elementor-element.elementor-animation-float:focus,
.elementor-element.elementor-animation-float:active {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
}

/* ------------------------------------------------------------------ *
 * [scit_vcard_button] – „+ Zu Kontakten hinzufügen"
 * ------------------------------------------------------------------ */

.scit-vcard-button {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	background: var( --scit-akzent );
	border: 0;
	border-radius: var( --scit-radius );
	color: var( --scit-akzent-text );
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.scit-vcard-button:hover,
.scit-vcard-button:focus-visible {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
	color: var( --scit-akzent-text );
}

/* ------------------------------------------------------------------ *
 * [scit_profil_links] – LinkedIn, Website, Bewertung …
 * ------------------------------------------------------------------ */

.scit-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

/**
 * Volle Breite auch dann, wenn das Shortcode-Widget in einem Container mit Richtung
 * „Reihe" steckt: Dort bekommt ein Widget nur seine Inhaltsbreite, die Liste bliebe
 * schmal. Sauberer wäre es, die Breite am Widget selbst zu setzen (Erweitert → Breite)
 * oder den Container auf „Spalte" zu stellen – das hier greift ohne Nacharbeit.
 */
.elementor-widget-shortcode:has( .scit-links ) {
	width: 100%;
	align-self: stretch;
}

.scit-links__eintrag {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 16px;
	background: var( --scit-grund );
	border: 1px solid var( --scit-rand );
	border-radius: var( --scit-radius );
	color: var( --scit-text );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .2s ease;
}

.scit-links__eintrag:hover,
.scit-links__eintrag:focus-visible {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
	color: var( --scit-text );
}

/* Das Kästchen vor der Beschriftung. */
.scit-links__zeichen {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var( --scit-flaeche );
	border: 1px solid rgba( 6, 40, 99, .35 );
	border-radius: 7px;
	color: var( --scit-akzent );
	font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1;
}

/* Elementor liefert die Zeichen als eingebettetes SVG … */
.scit-links__zeichen svg {
	display: block;
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* … der Rückfall sind die frei eingetippten Zeichen wie ↗ oder ★. */
.scit-links__zeichen i {
	font-size: 12px;
	line-height: 1;
}

/* ------------------------------------------------------------------ *
 * [scit_qr] – der QR-Code
 * ------------------------------------------------------------------ */

.scit-qr {
	display: inline-block;
	overflow: hidden;
	background: var( --scit-flaeche );
	border: 1px solid var( --scit-trenner );
	border-radius: var( --scit-radius );
	line-height: 0;
}

.scit-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Optional: QR-Code und Hinweistext nebeneinander wie im Entwurf.
   Dafür ein HTML-Widget mit
   <div class="scit-qr-zeile">[scit_qr groesse="200"]<span class="scit-qr-zeile__text">…</span></div> */
.scit-qr-zeile {
	display: flex;
	align-items: center;
	gap: 16px;
}

.scit-qr-zeile__text {
	font-size: 12.5px;
	line-height: 1.5;
	color: var( --scit-text-leise );
}

/* ------------------------------------------------------------------ *
 * Rücksicht auf abgeschaltete Bewegung
 * ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.scit-heben,
	.scit-vcard-button,
	.scit-links__eintrag {
		transition: none;
	}

	.scit-heben:hover,
	.scit-heben:focus-visible,
	.scit-heben:focus-within,
	.elementor-element .elementor-animation-float:hover,
	.elementor-element.elementor-animation-float:hover,
	.scit-vcard-button:hover,
	.scit-vcard-button:focus-visible,
	.scit-links__eintrag:hover,
	.scit-links__eintrag:focus-visible {
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Für die Schaltflächen, die du mit Elementor baust
 *
 * Trage die Klasse unter „Erweitert → CSS-Klassen" beim Button-Widget ein.
 * `scit-knopf`      ist die dunkle Hauptschaltfläche (Zu Kontakten hinzufügen).
 * `scit-knopf-hell` sind die hellen (Anrufen, E-Mail, Termin buchen).
 *
 * Beide ziehen sich auf die volle Breite ihres Containers. Elementor kann das auch
 * selbst – Button-Widget → Inhalt → Ausrichtung → Blocksatz.
 * ------------------------------------------------------------------ */

.scit-knopf .elementor-button {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	padding: 15px;
	background: var( --scit-akzent );
	border: 0;
	border-radius: var( --scit-radius );
	color: var( --scit-akzent-text );
	font-size: 16px;
	font-weight: 700;
	transition: transform .25s ease, background .25s ease;
}

.scit-knopf .elementor-button:hover {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
	color: var( --scit-akzent-text );
}

.scit-knopf-hell .elementor-button {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	background: var( --scit-grund );
	border: 1px solid var( --scit-rand );
	border-radius: var( --scit-radius );
	padding: 13px;
	color: var( --scit-text );
	font-size: 14.5px;
	font-weight: 600;
	transition: transform .25s ease, border-color .25s ease;
}

.scit-knopf-hell .elementor-button:hover {
	transform: translateY( calc( var( --scit-hebung ) * -1 ) );
	color: var( --scit-text );
}

@media ( prefers-reduced-motion: reduce ) {
	.scit-knopf .elementor-button,
	.scit-knopf-hell .elementor-button {
		transition: none;
	}

	.scit-knopf .elementor-button:hover,
	.scit-knopf-hell .elementor-button:hover {
		transform: none;
	}
}
/* ------------------------------------------------------------------ *
 * [scit_bewertung] – einzelne Schaltfläche im Stil der Verweisliste
 *
 * Sieht aus wie ein Eintrag aus [scit_profil_links], zieht sich aber nicht über
 * die volle Breite. Ausrichtung über das Attribut am Kurzcode:
 *     [scit_bewertung ausrichtung="mitte"]
 * ------------------------------------------------------------------ */

.scit-links--knapp {
	align-items: flex-start;
}

/* Nur so breit wie Zeichen + Beschriftung. */
.scit-links--knapp .scit-links__eintrag {
	width: auto;
}

.scit-links--knapp.scit-links--mitte {
	align-items: center;
}

.scit-links--knapp.scit-links--rechts {
	align-items: flex-end;
}
/* === SCIT Profil-Bausteine – Ende === *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist';
	font-display: swap;
	src: url('https://system-coreit.de/wp-content/uploads/2026/06/Geist-VariableFont_wght.woff2') format('woff2'),
		url('https://system-coreit.de/wp-content/uploads/2026/06/Geist-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Geist Mono';
	font-display: swap;
	src: url('https://system-coreit.de/wp-content/uploads/2026/06/GeistMono-VariableFont_wght.woff2') format('woff2'),
		url('https://system-coreit.de/wp-content/uploads/2026/06/GeistMono-VariableFont_wght.ttf') format('truetype');
}
/* End Custom Fonts CSS */