.elementor-kit-6{--e-global-color-primary:#E41E20;--e-global-color-secondary:#111111;--e-global-color-text:#111111;--e-global-color-accent:#E41E20;--e-global-color-sharriwhite:#FFFFFF;--e-global-color-sharrigrey50:#F5F5F4;--e-global-color-sharrigrey200:#E4E4E2;--e-global-color-sharrigrey600:#6B6B68;--e-global-typography-primary-font-family:"Inter";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:#FFFFFF;color:#111111;font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;line-height:28px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#E41E20;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:768px){.elementor-kit-6{font-size:16px;line-height:26px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --color-primary:#E41E20; --color-black:#111111; --color-white:#FFFFFF; --color-surface-alt:#F5F5F4; --color-border:#E4E4E2; --color-text-muted:#6B6B68; --color-surface-dark-alt:#1C1C1C; --color-border-dark:#333333; --font-base:Inter; --space-xs:8px; --space-s:16px; --space-m:24px; --space-l:32px; --space-xl:48px; --space-2xl:64px; --space-3xl:96px; --space-section:128px; --container-width:1200px; --text-width:720px; --gutter:32px; --text-hero:72px; --text-h1:56px; --text-h2:40px; --text-h1-mobile:36px; --text-title:28px; --text-h3:24px; --text-lead:20px; --text-body:18px; --text-body-s:16px; --text-small:14px; --text-label:13px; }
/* Start custom CSS *//* ==== K.F. Sharri – site custom CSS ===========================
   Only what Elementor V4 can't do. Each block: what + why.
   Lives in Site Settings › Custom CSS; this file is the repo copy –
   keep both in sync. */

/* --- Font: Inter variable, all weights ------------------------ */
/* why: Custom Fonts registers the variable file as weight 400 only, so
   600/700/800 would render as regular (exception, see README) */
@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/2026/10/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* --- Base: focus, anchors, hyphenation ----------------------- */
/* why: no V4 setting for :focus-visible, anchor offset under the sticky
   header, or hyphenation */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
[id] { scroll-margin-top: 104px; }
@media (max-width: 768px) {
  [id] { scroll-margin-top: 88px; }
  /* only soft hyphens (­) split words – auto-hyphenation tore up
     headings and the red highlight (responsive check 15.10.2026) */
  h1, h2, h3 { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; }
}

/* --- Headings: red highlight box on <em> ---------------------- */
/* why: inline element inside a heading (mark the word as italic in the editor) */
h1 em, h2 em {
  font-style: normal; color: var(--color-white); background: var(--color-primary);
  padding: 0 .12em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --- Class: eyebrow – red bar in front ------------------------ */
/* why: pseudo-element */
.eyebrow::before {
  content: ""; display: inline-block; width: 24px; height: 3px;
  margin-right: 12px; vertical-align: middle; background: currentColor;
}
/* a wrapped second line starts under the text, not under the bar */
.eyebrow { padding-left: 36px; text-indent: -36px; }

/* --- Class: link-arrow – arrow after (or before) the link ----- */
/* why: pseudo-element, decorative */
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow-back::after { content: none; }
.link-arrow-back::before { content: "←"; transition: transform .2s; }
.link-arrow-back:hover::before { transform: translateX(-4px); }
/* mobile: the class switches to inline-block so the arrow follows the
   last word of a wrapped label instead of sitting far right */
@media (max-width: 768px) {
  .link-arrow::after { display: inline-block; margin-left: 8px; }
  .link-arrow-back::before { display: inline-block; margin-right: 8px; }
}

/* --- Match card: trend arrow next to the table position ------- */
/* why: inline <span> inside the paragraph (grey = unchanged, see content) */
.standing-value span { color: var(--color-text-muted); font-size: .8em; }

/* --- Class: card – hover on the whole card, teaser clamp ------ */
/* why: parent hover, line clamp */
.card:hover .card-photo { transform: scale(1.05); }
.card:hover .card-title { color: var(--color-primary); }
.card-teaser { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Class: hero / team-tile – gradients and hover bar -------- */
/* why: overlay pseudo-elements, parent hover */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(17,17,17,.75) 0%, rgba(17,17,17,.2) 60%),
    linear-gradient(to top, rgba(17,17,17,.9) 0%, rgba(17,17,17,0) 60%);
}
.team-tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(17,17,17,.9), rgba(17,17,17,0) 65%);
}
.team-tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2;
  background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.team-tile:hover .team-tile-photo { transform: scale(1.05); }
.team-tile:hover::after { transform: scaleX(1); }

/* --- Partner logo band: endless rows -------------------------- */
/* why: keyframe animation, edge fade mask, pause on hover */
.logo-band {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.logo-track { animation: logo-scroll 70s linear infinite; }
.logo-track:has(.logo-tile-large) { animation-duration: 45s; }
.logo-row-reverse .logo-track { animation-direction: reverse; }
.logo-row-reverse + .logo-row .logo-track { animation-duration: 64s; }
.logo-row:hover .logo-track, .logo-row:focus-within .logo-track { animation-play-state: paused; }

/* --- Class: logo-tile – red tile, white logo on hover --------- */
/* why: parent hover, CSS filter / blend mode (a single filter function is
   dropped from a global class, so logo-mono lives here) */
.elementor .logo-mono { filter: brightness(0); }
a.logo-tile:hover, a.logo-tile:focus-visible { background: var(--color-primary); border-color: var(--color-primary); }
a.logo-tile:hover .logo-image, a.logo-tile:focus-visible .logo-image { filter: brightness(0) invert(1); }
/* logo files without transparency (JPEG / white background) */
a.logo-tile:hover .logo-flat, a.logo-tile:focus-visible .logo-flat {
  filter: grayscale(1) brightness(.7) contrast(20) invert(1); mix-blend-mode: screen; transition: none;
}
a.logo-tile:hover .logo-tag, a.logo-tile:focus-visible .logo-tag { background: var(--color-black); }

/* --- Partner page: the same rows as a grid -------------------- */
/* why: reuse the row components (one place to maintain a partner) */
.elementor .logo-grid-first .logo-set, .elementor .logo-grid-second .logo-set { display: contents; }
.elementor .logo-grid-first .logo-tile, .elementor .logo-grid-second .logo-tile { width: 100%; }
.elementor .logo-grid-first .logo-tile { height: 152px; }
.elementor .logo-grid-first .logo-image { max-height: 88px; }
.elementor .logo-grid-second .logo-tile { height: 96px; }
.elementor .logo-grid-second .logo-image { max-height: 52px; }
@media (max-width: 768px) {
  .elementor .logo-grid-first .logo-tile { height: 112px; padding: var(--space-xs); }
  .elementor .logo-grid-first .logo-image { max-height: 64px; }
  .elementor .logo-grid-second .logo-tile { height: 72px; padding: var(--space-xs); }
  .elementor .logo-grid-second .logo-image { max-height: 40px; }
}
/* small phones: two columns, three made the logos unreadable */
@media (max-width: 480px) {
  .elementor .logo-grid-second { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the page shows every partner already → hide the footer's partner band */
body:has(.logo-grid-first) .elementor-location-footer .section:has(.logo-band) { display: none; }

/* --- Between phone and tablet (600–768 px) -------------------- */
/* why: no V4 breakpoint here (mobile = up to 768 px). One column made news
   images ~530 px high: cards go horizontal, team tiles side by side,
   the club name shows next to the crest again */
@media (min-width: 600px) and (max-width: 768px) {
  .elementor .card { display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: var(--space-m); align-content: start; }
  .elementor .card > * { grid-column: 2; }
  .elementor .card > .card-image { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
  .elementor .grid-2:has(> .team-tile) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .header-logo-name, .elementor .header-logo-sub { display: block; }
}

/* --- Class: timeline-item – square marker --------------------- */
/* why: pseudo-element */
.timeline-item::before {
  content: ""; position: absolute; left: -9px; top: 6px; width: 15px; height: 15px;
  background: var(--color-white); border: 3px solid var(--color-primary);
}

/* --- Class: prose – article body from the WordPress editor ---- */
/* why: the post content is not built from Elementor elements */
.elementor .prose p { font-size: var(--text-lead); line-height: 32px; margin-bottom: var(--space-m); }
.elementor .prose p:first-child { font-size: var(--text-h3); line-height: 36px; font-weight: 700; }
.elementor .prose h2 { margin: var(--space-xl) 0 var(--space-s); font-size: var(--text-title); line-height: 36px; }
.elementor .prose h3 { margin: var(--space-l) 0 var(--space-xs); }
.elementor .prose ul { margin: 0 0 var(--space-m); padding-left: var(--space-m); }
.elementor .prose-legal p, .elementor .prose-legal p:first-child { font-size: var(--text-body); line-height: 28px; font-weight: 400; margin-bottom: var(--space-s); }
@media (max-width: 768px) {
  .elementor .prose p { font-size: var(--text-body); line-height: 28px; }
  .elementor .prose p:first-child { font-size: var(--text-lead); line-height: 30px; }
  .elementor .prose-legal p, .elementor .prose-legal p:first-child { font-size: var(--text-body-s); line-height: 26px; }
}

/* --- Links inside running text ------------------------------- */
/* why: inline links take the text colour (red only in article text and
   form notes); no V4 setting for links inside a paragraph */
.elementor p a, .elementor span a { color: inherit; }
.elementor .prose a, .elementor .form-check a, .elementor .form-message a { color: var(--color-primary); overflow-wrap: anywhere; }
.elementor .contact-bar p a { font-weight: 700; }

/* --- Plugin output: Yoast breadcrumbs ------------------------- */
/* why: markup comes from the plugin */
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-white); }

/* --- Forms: select arrow, focus ring, red checkbox ------------ */
/* why: form control styling has no V4 setting */
.form-select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-black) 50%), linear-gradient(135deg, var(--color-black) 50%, transparent 50%);
  background-position: calc(100% - 22px) 26px, calc(100% - 16px) 26px;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: 0; border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary);
}
.elementor .form-check input {
  -webkit-appearance: auto; appearance: auto; clip-path: none; opacity: 1; background: none;
  flex-shrink: 0; width: 24px; height: 24px; margin: 0; accent-color: var(--color-primary);
}

/* --- Header: sticky, top bar scrolls away --------------------- */
/* why: the header is a Theme Builder part; only its outer wrapper can
   stick. -36px = height of the top bar */
.elementor-location-header { position: sticky; top: -36px; z-index: 50; }

/* --- Class: main-nav – WordPress menu (nav-menu widget, V3) --- */
/* why: V3 widget output; no dropdown arrow, look as in the design.
   The .elementor prefix is needed to win over the widget's own CSS. */
.elementor .main-nav { margin-left: auto; }
.elementor .main-nav .elementor-nav-menu--main .elementor-item {
  padding: var(--space-l) 12px; font-size: var(--text-body-s); line-height: 24px; font-weight: 600; color: var(--color-black);
}
.elementor .main-nav .elementor-item:hover, .elementor .main-nav .elementor-item:focus,
.elementor .main-nav .elementor-item.elementor-item-active { color: var(--color-primary); }
.elementor .main-nav .sub-arrow { display: none; }
.elementor .main-nav .elementor-nav-menu--dropdown { background: var(--color-white); border: 1px solid var(--color-border); }
.elementor .main-nav .elementor-nav-menu--dropdown a {
  padding: var(--space-xs) var(--space-s); font-size: var(--text-body-s); line-height: 24px; font-weight: 600;
  color: var(--color-black); background: none;
}
.elementor .main-nav .elementor-nav-menu--dropdown a:hover, .elementor .main-nav .elementor-nav-menu--dropdown a:focus,
.elementor .main-nav .elementor-nav-menu--dropdown a.elementor-item-active { color: var(--color-primary); background: none; }
.elementor .main-nav .elementor-menu-toggle { width: 48px; height: 48px; padding: 12px; background: none; color: var(--color-black); }
/* burger menu (tablet and mobile): panel under the header, button stays visible;
   top needs !important because the widget script sets an inline top */
@media (max-width: 1024px) {
  .elementor .main-nav { order: 3; margin-left: 0; position: static; }
  .elementor .header-actions { margin-left: auto; }
  .elementor .main-nav nav.elementor-nav-menu--dropdown {
    position: absolute; top: 100% !important; left: 0; right: 0; width: auto; margin: 0;
    padding: var(--space-s) var(--gutter) var(--space-l); border-width: 0 0 1px 0;
  }
  /* open panel scrolls when it is taller than the screen (landscape phones,
     320×568); 108px = top bar + header. !important beats the widget's own
     max-height */
  .elementor .main-nav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown {
    max-height: calc(100dvh - 108px) !important; overflow-y: auto; overscroll-behavior: contain;
  }
  .elementor .main-nav nav.elementor-nav-menu--dropdown > ul > li > a { padding: var(--space-s) 0; border-bottom: 1px solid var(--color-border); }
  /* submenus always open; !important beats the inline style set by the widget script */
  .elementor .main-nav nav.elementor-nav-menu--dropdown .sub-menu { display: block !important; border: 0; padding: 0 0 var(--space-xs) var(--space-s); }
  .elementor .main-nav nav.elementor-nav-menu--dropdown .sub-menu a { padding: var(--space-xs) var(--space-s); border: 0; }
}
@media (max-width: 768px) {
  .elementor .main-nav nav.elementor-nav-menu--dropdown { padding: var(--space-s); }
}

/* --- Motion: respect reduced motion --------------------------- */
/* why: no V4 setting */
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; }
  .logo-row { overflow-x: auto; }
  .card-photo, .team-tile-photo, .team-tile::after, .link-arrow::after, .link-arrow-back::before { transition: none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://kfsharri.de/wp-content/uploads/2026/10/InterVariable.woff2') format('woff2');
}
/* End Custom Fonts CSS */