/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1758077112
Updated: 2025-09-17 04:45:12

*/












/* ==== Pfadvariante wählen ==== */
/* 1) RELATIV (empfohlen, wenn diese CSS in /hello-elementor-child/ liegt) */
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-100.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-100italic.woff2") format("woff2"); font-weight:100; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-200.woff2") format("woff2"); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-200italic.woff2") format("woff2"); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-300.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-300italic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-regular.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-500italic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-600italic.woff2") format("woff2"); font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-700.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-700italic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-800italic.woff2") format("woff2"); font-weight:800; font-style:italic; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat Local"; src:url("./assets/fonts/montserrat/montserrat-v30-latin-900italic.woff2") format("woff2"); font-weight:900; font-style:italic; font-display:swap; }

/* 2) ALTERNATIV: ABSOLUTER PFAD
@font-face{ font-family:"Montserrat"; src:url("/wp-content/themes/hello-elementor-child/assets/fonts/montserrat/montserrat-v30-latin-100.woff2") format("woff2"); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("/wp-content/themes/hello-elementor-child/assets/fonts/montserrat/montserrat-v30-latin-100italic.woff2") format("woff2"); font-weight:100; font-style:italic; font-display:swap; }
... (gleiche 18 Zeilen mit absolutem Pfad)
*/







/* aclonica-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Aclonica';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/aclonica/aclonica-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}








/* roboto-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url('./assets/fonts/roboto/roboto-v48-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 100;
  src: url('./assets/fonts/roboto/roboto-v48-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('./assets/fonts/roboto/roboto-v48-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('./assets/fonts/roboto/roboto-v48-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('./assets/fonts/roboto/roboto-v48-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('./assets/fonts/roboto/roboto-v48-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('./assets/fonts/roboto/roboto-v48-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('./assets/fonts/roboto/roboto-v48-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('./assets/fonts/roboto/roboto-v48-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('./assets/fonts/roboto/roboto-v48-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('./assets/fonts/roboto/roboto-v48-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('./assets/fonts/roboto/roboto-v48-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('./assets/fonts/roboto/roboto-v48-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('./assets/fonts/roboto/roboto-v48-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('./assets/fonts/roboto/roboto-v48-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 800;
  src: url('./assets/fonts/roboto/roboto-v48-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('./assets/fonts/roboto/roboto-v48-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('./assets/fonts/roboto/roboto-v48-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}






















.video-container {
	display: flex;
	flex-flow: column wrap;
	align-content: space-between;
	/* Your container needs a fixed height, and it 
	* needs to be taller than your tallest column. */
	height: 1200px; 
	width: 100%;
}

/* Re-order items into 3 rows */
.video-item:nth-child(3n+1) { order: 1; }
.video-item:nth-child(3n+2) { order: 2; }
.video-item:nth-child(3n)   { order: 3; }

/* Force new columns */
.video-container::before,
.video-container::after {
	content: "";
	flex-basis: 100%;
	width: 0;
	order: 2;
}









/* ======================================
   Remove HEADER AND FOOTER!
   ====================================== */

.site-header, .site-footer
 {
    background-color: #02010100;
    display: none;
}




/* ======================================
   Remove ORIGINAL COMMENT BLOCK! - to only see the widget
   ====================================== */
.wp-block-comments{
	display:none;
}




/* ======================================
   FILE: brighton2025-slider.css
   PURPOSE: Stil für Navbar + 100%-Hero-Slider (bildzentriert, luftig)
   ====================================== */

:root{
  --b25-primary: #15b8c1;
  --b25-primary-600:#0ea6af;
  --b25-text: #ffffff;
  --b25-muted: rgba(255,255,255,.78);
  --b25-overlay: rgba(0,0,0,.35);
  --b25-overlay-strong: rgba(0,0,0,.45);
	
  /* Globale Scrim-Intensität (einfach drehbar) */
  --b25-ov-top: .35;     /* Deckkraft oben */
  --b25-ov-bottom: .60;  /* Deckkraft unten */
  --b25-ov-tint: 0 0% 0%;/* HSL: "schwarz" als Grundfarbe */
  --b25-ov-radial: 182 60% 35%; /* leichte kühle Tönung (optional) */
	
	

  --b25-radius: 16px;
  --b25-shadow: 0 20px 40px rgba(0,0,0,.35);
  --b25-ease: 420ms cubic-bezier(.22,.61,.36,1);
	
	
  /* H1 Größe (min / „fluss“ / max) */
  --b25-h1-min: 28px;      /* sehr kleine Viewports */
  --b25-h1-fluid: 4.5vw;   /* Wachstum mit Breite - höher ⇒ H1 wächst stärker mit, kleiner ⇒ dezenter. */
  --b25-h1-max: 180px;      /* große Screens - hochsetzen, wenn man auf Big-Screens noch mehr Größe will.*/
	
  --b25-h1-track-min: 0.08em;
  --b25-h1-track-max: 0.64em;
	
  /* H1 Tracking (Buchstabenabstand) – skaliert mit der Breite
  --b25-h1-track: clamp(0.08em, 1vw, 0.22em);
  --b25-h1-track: clamp(0.12em, 1.8vw, 0.42em);  */
  --b25-h1-track: clamp(0.32em, 3.8vw, 0.82em);

  /* P Größe: min / „Fluss“ / max */
  --b25-p-min: 12px;
  --b25-p-fluid: 1.4vw;
  --b25-p-max: 18px;
	
  --b25-p-track-min: 0.12em;
  --b25-p-track-max: 0.28em;
	
  /* P Tracking
  --b25-p-track: clamp(0.12em, 0.35vw, 0.28em);
  --b25-p-track:  clamp(0.16em, 0.9vw, 0.32em); */
  --b25-p-track:  clamp(0.18em, 1.2vw, 0.36em); 
	

  /* Zeilenhöhe */
  --b25-h1-line: 1.05;
  --b25-p-line: 1.55;
	
	
  --b25-edge: 35px; 		   /* fester Abstand von oben & Seiten */
  --b25-burger-w: 34px;        /* Linienbreite im Normalzustand */
  --b25-burger-h: 2px;         /* Liniendicke (dünn) */
  --b25-burger-gap: 8px;       /* vertikaler Abstand zwischen den Linien */
  --b25-burger-color: #fff;    /* Linienfarbe */
  --b25-burger-speed: 260ms;   /* Animationsdauer */
	
  /* symmetrische Safe-Area (kannst du anpassen) */
  /* vorher: clamp(16px, 5vw, 72px) */
  --b25-safe: clamp(3px, 1vw, 12px);
  --b25-caption-max: 1800px; /* optional: mehr Breite erlauben (vorher 1100px) */
	
  /* ==== einheitlicher Unterabstand (35px + Safe-Area) ==== */
  --b25-bottom: calc(var(--b25-edge) + env(safe-area-inset-bottom));
	
/* === Dots vertikal feinjustieren ======================= */
/* Grundwerte (du hast aktuell 12px + 2px Rand) */
  --b25-dot-size: 12px;      /* Innendurchmesser */
  --b25-dot-border: 2px;     /* Ringstärke */
  /* Optischer Lift, damit die Dots „auf“ der 35px-Linie sitzen: 
     Hälfte der Höhe + Rand + optionaler Feintuning-Offset */
  --b25-dot-tweak: 5px;     /* <- hier drehen, wenn’s noch nicht perfekt ist */
	
/* === BRIGHTON2025 — Arrows bottom-right ============================= */
  --b25-nav-size: 50px;      /* Fläche wie PP */
  --b25-nav-gap: 10px;       /* Abstand Prev/Next */
  --b25-nav-stroke: 1.8;       /* Strichstärke (dünn) -> 1.6 .. 2.2 */
	
/* === BRIGHTON2025 — Social-Leiste links mittig ========================== */
  --b25-social-size: 36px;      /* Fläche je Icon */
  --b25-social-gap: 3px;       /* Abstand zwischen Icons */
  --b25-social-stroke: 2.1;     /* Liniendicke der Icons */
	
  /* ===== Regler ===== */
  /* Abstand nur zwischen letztem Icon und Label (additiv zum grid-gap) */
  --b25-social-gap-label: 30px;         /* z.B. 12–20px */

  /* per-Icon Skalen (1 = normal) */
  --b25-ico-scale-facebook: 1.38;       /* Facebook “f” größer */
  --b25-ico-scale-twitter: 1.00;
  --b25-ico-scale-instagram: 1.00;

  /* optional pro-Icon Strichstärke (falls nötig) */
  --b25-ico-stroke-facebook: var(--b25-social-stroke);
  --b25-ico-stroke-twitter:  var(--b25-social-stroke);
  --b25-ico-stroke-instagram:var(--b25-social-stroke);
	
  /* CTA-Farbe (zart-orange). Dreh hier, wenn du eine andere Nuance willst */
  --b25-cta: hsl(28 92% 54%); /* CTA-Farbe (zart-orange) – gern anpassen */
}









/* =========================
   BRIGHTON2025 — Overlay Themes
   nutzten die vorhandene Overlay-Logik
   ========================= */

/* kühle, leicht blaue Tönung */
.b25-ov-azure{
  --b25-ov-top: .32;               /* oben: etwas heller */
  --b25-ov-bottom: .68;            /* unten: stärker */
  --b25-ov-tint: 200 80% 40%;      /* HSL (Hue-Sat-Lightness) - Blauton */
  --b25-ov-radial: 198 90% 45%;    /* radialer Akzent (kühl) */
}

/* warme Sepia-Tönung */
.b25-ov-sepia{
  --b25-ov-top: .20;
  --b25-ov-bottom: .20;
  --b25-ov-tint: 32 60% 22%;       /* braun/sepia als Grundtönung */
  --b25-ov-radial: 38 65% 38%;     /* warmes Highlight */
}

/* warmer Sand-/Amber-Ton (goldene Stunde) */
.b25-ov-sand{
  --b25-ov-top: .30;
  --b25-ov-bottom: .66;
  --b25-ov-tint: 42 55% 36%;       /* sand/beige */
  --b25-ov-radial: 45 70% 48%;     /* warmes, weiches Leuchten */
}

/* frisches Grün/Türkis (emerald) */
.b25-ov-emerald{
  --b25-ov-top: .30;
  --b25-ov-bottom: .66;
  --b25-ov-tint: 162 55% 32%;      /* smaragdgrün */
  --b25-ov-radial: 168 65% 40%;    /* kühler grüner Akzent */
}

/* violett/bläuliche Dämmerung (plum) */
.b25-ov-plum{
  --b25-ov-top: .33;
  --b25-ov-bottom: .70;
  --b25-ov-tint: 268 45% 30%;      /* dunkles Violett */
  --b25-ov-radial: 276 60% 46%;    /* leichtes magenta-blaues Glühen */
}

/* neutral-dunkel (graphite), ohne Farbstich */
.b25-ov-graphite{
  --b25-ov-top: .28;
  --b25-ov-bottom: .64;
  --b25-ov-tint: 0 0% 0%;          /* neutral schwarz/grau */
  --b25-ov-radial: 0 0% 0%;        /* neutraler radialer Schatten */
}








/* =========================
   BRIGHTON2025 — Social-Leiste links mittig
   ========================= */
.brighton2025-social{
  position: fixed;
  left: calc(var(--b25-edge) + env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  gap: var(--b25-social-gap);
  pointer-events: auto;
	
/* Social-Column streng vertikal und mittig ausrichten */
  display: grid;
  grid-auto-flow: row;
  justify-items: center;     /* alles untereinander in einer Linie */
  align-items: center;
  gap: var(--b25-social-gap);
}

.b25-social-link,
.b25-social-link:hover,
.b25-social-link:focus,
.b25-social-link:active{
  inline-size: var(--b25-social-size);
  block-size: var(--b25-social-size);
  display: grid; place-items: center;
  color: var(--b25-dot-muted, rgba(255,255,255));
  text-decoration: none;
  position: relative;
  border-radius: 50%;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}


.b25-social-link:hover,
.b25-social-link:focus-visible{ color: var(--b25-dot-active, rgba(255,255,255,.45)); }

/* Icon-Style */
.b25-social-link svg{
  width: 62%; height: 62%; display:block;
  stroke: currentColor; fill: none;
  stroke-width: var(--b25-social-stroke);
  stroke-linecap: round; stroke-linejoin: round;
}
/* für Facebook-„f“ (gefüllt) */
.b25-social-link svg .fill{ fill: currentColor; stroke: none; }

/* Vertikales Label darunter (sehr dünn & klein) */
.brighton2025-side-label{
  margin: 0;                 /* kein seitlicher Versatz */
  display: inline-block;
  transform-origin: 50% 50%;
  white-space: nowrap;
  color: var(--b25-dot-muted, rgba(255,255,255));
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* font-weight: 300;            dünn */
  letter-spacing: .18em;
  font-size: 14px;              /* klein */
  text-decoration: none !important;
	
	

  writing-mode: vertical-rl; /* vertikal setzen */
  text-orientation: mixed;
  transform: rotate(180deg); /* liest sich wie 90° nach links gedreht */
  line-height: 1;
}


.brighton2025-side-label{
  margin-top: var(--b25-social-gap-label);  /* zusätzlicher Abstand */
}

.brighton2025-side-label:hover{ color: var(--b25-dot-active, rgba(255,255,255,.45)); }





/* ===== per-Icon Anpassungen (nur Größe + optional Stroke) ===== */
.b25-social-link[aria-label="Facebook"] svg{
  transform: scale(var(--b25-ico-scale-facebook));
  transform-origin: 50% 50%;
  stroke-width: var(--b25-ico-stroke-facebook);
}
.b25-social-link[aria-label="Twitter"] svg{
  transform: scale(var(--b25-ico-scale-twitter));
  transform-origin: 50% 50%;
  stroke-width: var(--b25-ico-stroke-twitter);
}
.b25-social-link[aria-label="Instagram"] svg{
  transform: scale(var(--b25-ico-scale-instagram));
  transform-origin: 50% 50%;
  stroke-width: var(--b25-ico-stroke-instagram);
}






/* Menü-Variante der Social-Leiste (immer sichtbar, wenn Menü offen) */
/* Menü-Leiste: unten, horizontal, mittig */
.brighton2025-menu-social{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: var(--b25-bottom);       /* 35px + Safe-Area */
  z-index: 71;
  display: inline-flex;
  align-items: center;
  gap: var(--b25-social-gap);      /* gleicher Icon-Abstand wie links */
  pointer-events: auto;
}

/* Label im Menü: normal horizontal, extra Abstand hinter den Icons */
.brighton2025-menu-social .brighton2025-side-label{
  writing-mode: horizontal-tb;
  transform: none;
  margin: 0 0 0 var(--b25-social-gap-label);  /* größerer Abstand Icon→Text */
  line-height: 1;
}


/* Leiste statt mittig links oder rechts andocken */

/*
.brighton2025-menu-social{ left:auto; right:auto; transform:none;
  left: calc(var(--b25-edge) + env(safe-area-inset-left)); }

.brighton2025-menu-social{ left:auto; transform:none;
  right: calc(var(--b25-edge) + env(safe-area-inset-right)); }
*/





@media (max-width: 815px){
  .brighton2025-social{ display: none !important; }
}









/* ===== Navbar (immer Burger) ===== */
/* Header bleibt da, blockiert aber nichts */
.brighton2025-navbar{
  position: fixed;
  inset: 0 0 auto 0;
  height: 0;
  z-index: 60;          /* unter Brand/Burger, über dem Slider */
}
.brighton2025-navbar-gal{
  position: absolute;
  inset: 0 0 auto 0;
  height: 0;
  z-index: 60;          /* unter Brand/Burger, über dem Slider */
}


/* LOGO/Brand links oben – immer gleicher Abstand */
/* Brand: links oben fix, horizontal, Bild vor Text */
.brighton2025-brand{
  position: fixed;
  top: calc(var(--b25-edge) + env(safe-area-inset-top));
  left: calc(var(--b25-edge) + env(safe-area-inset-left));

  /* horizontal anordnen */
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* Bild zuerst, obwohl im DOM das Text-Node zuerst steht */
  flex-direction: row-reverse; /* <— dreht die Reihenfolge visuell um */

  /* optik */
  color: #fff;
  text-decoration: none !important;

  /* Feste Textgröße (nicht responsive) */
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 24px;     /* <— gewünschte fixe Größe hier anpassen */
  line-height: 1;
  letter-spacing: 0.04em;

  /* Nie umbrechen, nie schrumpfen */
  white-space: nowrap;
  z-index: 80;
}


/* Logo-Bild: fixe Größe, kein Schrumpfen */
.brighton2025-brand img{
  display: block;
  height: 60px !important;        /* <— gewünschte fixe Höhe hier anpassen */
  width: auto;
  flex: 0 0 auto;      /* nicht schrumpfen */
  object-fit: contain;
}


.brighton2025-brand:hover{
  color: rgba(255,255,255,.45);
}




/* Button selbst: nie Hintergrund, nie Shadow (auch nicht beim Hover) */
.brighton2025-burger,
.brighton2025-burger:hover,
.brighton2025-burger:focus {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Layout wie gehabt: oben rechts fix, nur Linien sichtbar */
/* WICHTIG: fix in der rechten oberen Ecke + darüberliegend + klickbar */
.brighton2025-burger{
  position: fixed !important;
  top: calc(var(--b25-edge) + env(safe-area-inset-top));
  right: calc(var(--b25-edge) + env(safe-area-inset-right));
  z-index: 100;                  /* über Menü/Caption */
  pointer-events: auto;

  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;         /* für Shrink von rechts */
  justify-content: center;
  gap: var(--b25-burger-gap);

  width: 44px; height: 44px;
  color: var(--b25-burger-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* Fokus sichtbar lassen */
.brighton2025-burger:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* Die 3 Linien */
.brighton2025-burger .brighton2025-burger-bar{
  display: block;
  width: var(--b25-burger-w);
  height: var(--b25-burger-h);
  background: currentColor;
  border-radius: 999px;
  transform-origin: right center; /* für Hover-Schrumpf */
  transition:
    transform var(--b25-burger-speed) cubic-bezier(.22,.61,.36,1),
    opacity   var(--b25-burger-speed) ease;
  will-change: transform, opacity;
}

/* =========================
   1) Hover-Effekt (nur wenn geschlossen!)
   unten bleibt; Mitte -25%; oben -50%
   ========================= */
.brighton2025-burger[aria-expanded="false"]:hover .brighton2025-burger-bar:nth-child(1){
  transform: scaleX(0.5);
}
.brighton2025-burger[aria-expanded="false"]:hover .brighton2025-burger-bar:nth-child(2){
  transform: scaleX(0.75);
}
.brighton2025-burger[aria-expanded="false"]:hover .brighton2025-burger-bar:nth-child(3){
  transform: scaleX(1);
}

/* =========================
   2) Geöffnet: morph zu X
   - obere Linie runter + 45°
   - mittlere Linie ausblenden
   - untere Linie rauf  -45°
   ========================= */
.brighton2025-burger[aria-expanded="true"] .brighton2025-burger-bar{
  transform-origin: center center; /* für Rotationen */
}

/* Offset von oben/unten zur Mitte = (Gap + Liniendicke) */
.brighton2025-burger[aria-expanded="true"] .brighton2025-burger-bar:nth-child(1){
  transform: translateY(calc(var(--b25-burger-gap) + var(--b25-burger-h))) rotate(45deg) scaleX(1);
}
.brighton2025-burger[aria-expanded="true"] .brighton2025-burger-bar:nth-child(2){
  transform: scaleX(0);
  opacity: 0;
}
.brighton2025-burger[aria-expanded="true"] .brighton2025-burger-bar:nth-child(3){
  transform: translateY(calc(-1 * (var(--b25-burger-gap) + var(--b25-burger-h)))) rotate(-45deg) scaleX(1);
}













/* (Optional) Reset, falls du früher ::before/::after genutzt hast */
.brighton2025-burger .brighton2025-burger-bar::before,
.brighton2025-burger .brighton2025-burger-bar::after{
  content: none !important;
}





/* Overlay-Menü bleibt darunter, aber sichtbar */
.brighton2025-menu{ z-index: 70; }









/* Overlay-Menü */
.brighton2025-menu{
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6,10,14,.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity var(--b25-ease), transform var(--b25-ease), visibility 0s linear var(--b25-ease);
}
.brighton2025-menu.is-open{
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity var(--b25-ease), transform var(--b25-ease);
}
.brighton2025-menu-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(14px, 2.2vw, 22px); text-align: center;
}
.brighton2025-menu-list a{
  color: var(--b25-text); text-decoration: none;
  font-size: clamp(20px, 3.2vw, 42px); letter-spacing: .3px;
}
.brighton2025-menu-list a:hover{ color: #e8feff; }

/* ===== Hero-Slider (100% des Elterncontainers) ===== */
.brighton2025-hero-wrap{ width: 100%; background: #000; }

.brighton2025-slider{
  position: relative; width: 100%; height: 100%;
  overflow: hidden; color: var(--b25-text);
  user-select: none; touch-action: pan-y;
}
.brighton2025-slides{
  display: flex; height: 100%; width: 100%;
  transition: transform var(--b25-ease); will-change: transform;
}
.brighton2025-slide{
  position: relative; min-width: 100%; height: 100%;
  display: grid; place-items: stretch; isolation: isolate; background: #000;
}
.brighton2025-slide img{
  position: absolute; inset: 0; width: 100%; height: 100% !important;
  object-fit: cover; object-position: center;
  filter: contrast(1.03) saturate(1.02);
  z-index: 0;
}








/* Overlay liegt zwischen Bild und Caption, blockiert keine Klicks */
.brighton2025-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none; /* wichtig: keine Interaktionen abfangen */

  /* Variante A: Gradient-Scrim + ganz dezente Radialtönung */
  background:
    linear-gradient(
      to bottom,
      hsl(var(--b25-ov-tint) / var(--b25-ov-top)) 0%,
      hsl(var(--b25-ov-tint) / var(--b25-ov-bottom)) 100%
    ),
    radial-gradient(120% 80% at 10% 10%, hsl(var(--b25-ov-radial) / .14), transparent 60%);
}










/* ======================================
   CENTERED CAPTION + FADE-UP ANIMATION
   ====================================== */

/* Caption vollflächig über dem Slide zentrieren */
/* Caption exakt in die Mitte des Sliders setzen */
/* Exaktes Centering + symmetrische Safe-Area */
/* === Caption exakt über Content-Breite zentrieren === */
.brighton2025-caption{
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);    /* geometrisches Zentrum */
  
  /* WICHTIG: kein fixes width mehr – nur so zählt die Textbreite */
  width: auto !important;
  max-width: min(var(--b25-caption-max), calc(100vw - 2 * var(--b25-safe)));
  margin-inline: var(--b25-safe);
  
  /* Content-Box, die so breit ist wie H1/P */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;

  /* keine inneren Ränder, Safe-Area als Außenabstand */
  padding: 0 !important;
  z-index: 2;
}



.brighton2025-slide{
  container-type: inline-size; /* jetzt funktionieren cqw-Einheiten exakt */
}

/* (Optional, aber empfehlenswert) – Slider-Ebene als Fallback-Container */
.brighton2025-slider{
  container-type: inline-size;
}




/* H1/P nutzen die volle Content-Breite, keine eigenen Seiten-Margins */
.brighton2025-caption h1,
.brighton2025-caption p{
  margin: 0 !important;
  max-width: 100%;
  text-align: center;
  /* lange, untrennbare Wörter dürfen im Notfall brechen statt rauszuragen */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: manual;
}




/* Typo (falls noch nicht gesetzt) */
/* Fluid Headline */
.brighton2025-caption h1{
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(var(--b25-h1-min), 10cqw, var(--b25-h1-max));
  line-height: var(--b25-h1-line);
  text-transform:uppercase;
  margin: 0 0 .5em 0;
  text-wrap: balance;         /* hübscher Zeilenumbruch */
	
  white-space: nowrap;              /* NICHT umbrechen */
  overflow: hidden;                 /* falls extrem — lieber minimal clippen als 2. Zeile */
  text-overflow: clip;
}

/* Fluid CTA */
/* CTA-Button (ersetzt das frühere P) */
.brighton2025-caption .b25-cta{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4em;

  /* Typo wie dein P */
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(var(--b25-p-min), 0.9cqw, var(--b25-p-max));
  line-height: var(--b25-p-line);
  letter-spacing: var(--b25-p-track);
  text-transform: uppercase;

  /* Pill-Optik */
  padding: .45em 0.85em .40em 0.85em;
  border: 2px solid var(--b25-dot-muted, rgba(255,255,255,.45));
  border-radius: 2px;

  /* LTR-Fill – startet ohne Delay */
  background: linear-gradient(90deg, var(--b25-cta) 0 0) no-repeat;
  background-size: 0% 100%;
  color: var(--b25-text, #fff);
  text-decoration: none;
  cursor: pointer;

  /* sofortiger Start (keine Verzögerung) für Fill & Rahmen */
  transition:
    background-size .36s var(--b25-ease) 0s,
    border-color .18s ease 0s,
    color .18s ease 0s;
  will-change: background-size;
}

/* Pfeil „>“ am Ende – vor Hover schon in CTA-Farbe */
.brighton2025-caption .b25-cta::after{
  content: "\00A0\203A";                 /* NBSP + →  (U+2192) */
  display: inline-block;
  margin-left: .2em;
  font-size: 1.15em;                      /* etwas größer als Text */
  font-weight: 600;                        /* klarer Kopf */
  font-family: "Montserrat Local",
               "Segoe UI Symbol","Noto Sans Symbols",
               "Arial Unicode MS",system-ui,sans-serif;
  color: var(--b25-cta);
  transform: translateY(-3px) scale(1.22);
  /* der Pfeil wechselt mit kurzer Verzögerung */
  transition:
    color .24s ease .12s,
    transform .24s ease .12s;
}

/* Hover: sofort Fill + Rahmen, Pfeil etwas später weiß & größer */
.brighton2025-caption .b25-cta:hover{
  border-color: var(--b25-cta);
  background-size: 100% 100%;
}
.brighton2025-caption .b25-cta:hover::after{
  color: #fff;
  transform: translateY(1px) scale(1.32);
}

/* Focus-Ring für Tastatur */
.brighton2025-caption .b25-cta:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px hsl(28 92% 54% / .35);
}

/* Respektiere reduzierte Bewegung */
@media (prefers-reduced-motion: reduce){
  .brighton2025-caption .b25-cta,
  .brighton2025-caption .b25-cta::after{ transition: none; }
}







/* 4) Feinschliff für sehr schmale Captions: Tracking etwas enger */
@container (max-width: 420px){
  .brighton2025-caption h1{
    letter-spacing: clamp(0.06em, 1.1cqw, 0.24em);
  }
  .brighton2025-caption p{
    letter-spacing: clamp(0.10em, .7cqw, 0.22em);
  }
}
/* Ultimativer Rettungsring: wenn’s *extrem* schmal wird, darf H1 brechen */
@container (max-width: 300px){
  .brighton2025-caption h1{
    white-space: normal;
    overflow: visible;
  }
}





/* 5) Fallback für Browser ohne Container-Queries */
@supports not (container-type: inline-size){
  .brighton2025-caption h1{
    font-size: clamp(var(--b25-h1-min), 8vw, var(--b25-h1-max));
    letter-spacing: clamp(var(--b25-h1-track-min), 1.4vw, var(--b25-h1-track-max));
  }
  .brighton2025-caption p{
    font-size: clamp(var(--b25-p-min), 1.6vw, var(--b25-p-max));
    letter-spacing: clamp(var(--b25-p-track-min), .6vw, var(--b25-p-track-max));
  }
}








/* etwas mehr Wumms auf sehr großen Displays (optional) */
@media (min-width: 1600px){
  :root{
    --b25-h1-max: 180px;   /* kannst du auch 120px setzen */
  }
}

/* sehr kleine Phones feinjustieren (optional) */
@media (max-width: 360px){
  :root{
    --b25-h1-min: 34px;
    --b25-p-min: 15px;
  }
}





/* --- dezente Fade-Up-Animation --- */
@keyframes b25-fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}




/* Klasse, die JS beim Slide-Wechsel kurz setzt
.b25-animate-in{
  animation: b25-fadeUp 700ms var(--b25-ease) both;
  will-change: transform, opacity;
}
 */

/* ======================================
   STAGGER: H1 vor P (zentriert)
   ====================================== */

/* P: startet sofort */
.b25-animate-in p{
  animation: b25-fadeUp 640ms var(--b25-ease) both;
}

/* H1: leicht verzögert nach P */
.b25-animate-in h1{
  animation: b25-fadeUp 720ms var(--b25-ease) both;
  animation-delay: 110ms;
}

/* Optional: wenn du später eine Aktionszeile hinzufügst (z. B. Buttons)
.b25-animate-in .brighton2025-actions{
  animation: b25-fadeUp 740ms var(--b25-ease) both;
  animation-delay: 180ms;
}
*/

/* Bewegungen respektvoll reduzieren */
@media (prefers-reduced-motion: reduce){
  .b25-animate-in h1,
  .b25-animate-in p{
    animation: none !important;
  }
}


















/* Bewegungen respektvoll reduzieren */
@media (prefers-reduced-motion: reduce){
  .b25-animate-in{ animation: none !important; }
  .brighton2025-slides{ transition: none !important; }
}





/* ================================
   BRIGHTON2025 — Arrows bottom-right
   ================================ */
/* Pfeile */
/* Grundstil: kein Hintergrund, nur Icon */
.brighton2025-nav{
  position: fixed !important;
  bottom: var(--b25-bottom) !important; /* exakt 35px */
  top: auto !important;                 /* alten Center-Style neutralisieren */
  transform: none !important;
  z-index: 4;

  inline-size: var(--b25-nav-size);
  block-size: var(--b25-nav-size);
  border-radius: 50%;
  border: none !important;
  background: transparent !important;   /* niemals BG */
  padding: 0;
  display: grid; place-items: center;
  color: var(--b25-dot-muted, rgba(255,255,255,.45)); /* wie inaktive Dots */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease, transform .18s ease;
}



/* Positionen rechts unten: Next ganz rechts, Prev davor */
.brighton2025-next{
  right: calc(var(--b25-edge) + env(safe-area-inset-right));
}
.brighton2025-prev{
  right: calc(var(--b25-edge) + env(safe-area-inset-right)
           + var(--b25-nav-size) + var(--b25-nav-gap));
}


/* das eigentliche Pfeil-Icon */
.brighton2025-nav svg{
  width: 62%; height: 62%; display:block;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--b25-nav-stroke);
  stroke-linecap: butt;         /* präzise, nicht rund */
  stroke-linejoin: miter;       /* spitze Ecke */
  stroke-miterlimit: 10;
  vector-effect: non-scaling-stroke;
}






/* Hover: dezenter Kreis hinter dem Pfeil (wie inaktive Dots) */
.brighton2025-nav::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: hsl(0 0% 100% / .12); /* leichtes Weiß wie Dot-muted */
  transform: scale(.9);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
  pointer-events: none;
}
.brighton2025-nav:hover,
.brighton2025-nav:focus-visible{
  color: var(--b25-dot-active, #fff);    /* Pfeil wird heller */
  outline: none;
}
.brighton2025-nav:hover::before,
.brighton2025-nav:focus-visible::before{
  opacity: 1;
  transform: scale(1);
}

/* Klick: sehr dezentes „Aufblitzen“ */
/* Klick: mini-Flash */
.brighton2025-nav:active{ transform: translateY(1px) scale(.98); }
.brighton2025-nav:active::before{ background: hsl(0 0% 100% / .22); }

@media (prefers-reduced-motion: reduce){
  .brighton2025-nav,
  .brighton2025-nav::before{ transition: none; }
}





/* Dots */
/* Dots bleiben mittig — nur den Abstand vereinheitlichen */
.brighton2025-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(
    var(--b25-bottom)                       /* 35px + Safe-Area */
    + (var(--b25-dot-size) / 2)             /* halbe Dot-Höhe */
    + var(--b25-dot-border)                 /* + Border */
    + var(--b25-dot-tweak)                  /* + Feintuning (standard ~18px total) */
  ) !important;
  display: flex !important;
  gap: 1.25rem !important;              /* klarer Abstand */
  z-index: 3;
  padding: 0;
  background: transparent;
}
.brighton2025-dots button{
  inline-size: 12px !important;
  block-size: 12px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  cursor: pointer;
  background: transparent !important;   /* inaktiv = Ring */
  padding: 0 !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

.brighton2025-dots button[aria-selected="true"]{
  background: #fff !important;
  border-color: #fff !important;
  transform: scale(1.2);
}

/* Mobile Finetuning */
@media (max-width: 640px){
  .brighton2025-dots{ bottom: 12px; }
}

/* Light preference: hellere Navbar */
@media (prefers-color-scheme: light){
  .brighton2025-navbar{
    background: linear-gradient(to bottom, rgba(255,255,255,.25), rgba(255,255,255,0));
  }
}








/* BRIGHTON2025 — Full-bleed Hero, egal was das Theme außen macht */
.brighton2025-hero-wrap{
  position: relative;
  height: 100dvh;     /* deine Höhe beibehalten */
  overflow: hidden;

  /* bricht aus dem zentrierten WP-Content heraus */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Fallback, falls irgendein Eltern-Wrapper transform hat */
.brighton2025-hero-wrap { transform: translateZ(0); }











/* ======================================
   FILE: style.css (hello-elementor-child)
   PURPOSE: Lokale Einbindung "Montserrat" (v30, latin, 100–900 + italic)
   ====================================== */



/* Global anwenden */
html, body{
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* falls irgendwo überschrieben wird, zusätzlich: */
.brighton2025-navbar,
.brighton2025-menu{
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}








/* Optional: Navbar-Brand etwas kräftiger */
.brighton2025-brand{ font-weight: 700; }








/* === Tracking zentral setzen (auf der Caption-Ebene) === */
.brighton2025-caption{
  /* H1 enger/weiter hier drehen */
  --b25-h1-track: clamp(0.10em, 1.6vw, 0.30em);

  /* P enger/weiter hier drehen */
  --b25-p-track:  clamp(0.12em, 0.9vw, 0.26em);
}



/* === Und: exakt diese Variablen auch wirklich verwenden === */
.brighton2025-caption h1{
  letter-spacing: var(--b25-h1-track) !important;
}
.brighton2025-caption p{
  letter-spacing: var(--b25-p-track) !important;
}





@supports (container-type: inline-size){
  .brighton2025-caption{
    --b25-h1-track: clamp(0.10em, 1.6cqw, 0.30em);
    --b25-p-track:  clamp(0.12em, 0.9cqw, 0.26em);
  }
}




/* global: mehr Tracking */
.brighton2025-caption{
  --b25-h1-track: clamp(0.28em, 3.1cqw, 0.74em);	/* === Für letter-spacing: exakt diese Variablen verwenden === */
  --b25-p-track:  clamp(0.14em, 0.7cqw, 0.22em);	/* === Für letter-spacing: exakt diese Variablen verwenden === */
}











/* ======================================
   BRIGHTON2025 — Bottom Controls (PP + Dots + Counter)
   ====================================== */

/* Bar unten links, fester Abstand wie Brand/Burger */
.brighton2025-controls{
  position: fixed;
  left: calc(var(--b25-edge) + env(safe-area-inset-left));
  bottom: var(--b25-bottom) !important;  /* exakt 35px */
  z-index: 4; /* über Overlay & Caption, unter Burger */
  display: inline-flex;
  align-items: center;          /* keine Baseline-Verschiebung */
  gap: .75rem;
  padding: 0;
  background: transparent; /* nie BG */
  transform: none;         /* NICHT mehr zentrieren */
  pointer-events: auto;
  line-height: 1;                         /* baseline-drift verhindern */
}



/* killt Theme-Button-Styles kompromisslos */
/* PP-Button: nur Icon, niemals BG/Border/Shadow */
.brighton2025-pp,
.brighton2025-pp:hover,
.brighton2025-pp:focus,
.brighton2025-pp:active{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Play/Pause: nur Icon, kein Ring, kein Hintergrund */
.brighton2025-pp{
  inline-size: 50px;
  block-size: 50px;
  padding: 0;
  border: none;
  background: transparent;                 /* auch beim Hover */
  color: var(--b25-dot-muted, rgba(255,255,255,.45));
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .18s ease, transform .18s ease;
}

.brighton2025-pp:hover,
.brighton2025-pp:focus-visible{
  color: var(--b25-dot-active, #fff);      /* Hover: wie aktiver Dot */
  outline: none;
}
.brighton2025-pp:active{ transform: translateY(1px) scale(.98); }
.brighton2025-pp svg{ width: 56%; height: 56%; display:block; fill: currentColor; }

/* Counter rechts daneben */
.brighton2025-counter{
  color: var(--b25-text, #fff);
  display: inline-flex;
  align-items: end;     /* exakt mittig zum Button */
  gap: .45rem;
  font-family: "Montserrat Local", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;                    /* dünner */
  line-height: 1;          /* kein zusätzliches „Hängen“ nach unten */
}
.brighton2025-counter .curr{
  font-weight: 300;
  font-size: 1.4em;                   /* ~1/3 größer */
  letter-spacing: .06em;
  display: inline-flex;
  align-items: end;     /* exakt mittig zum Button */
}

.brighton2025-counter .sep{ opacity:.75; letter-spacing:.06em; }

.brighton2025-counter .total{ opacity:.85; letter-spacing:.06em; }









/* --- CTA: alte Background-Füllung komplett deaktivieren --- */
.brighton2025-caption .b25-cta,
.brighton2025-caption .b25-cta:hover{
  background: transparent !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;
}

/* --- CTA-Fill via ::before: bleibt animiert, startet sofort --- */
.brighton2025-caption .b25-cta{
  position: relative;
  z-index: 0;
  overflow: hidden;
  transition: border-color .18s ease, color .18s ease;
}
.brighton2025-caption .b25-cta::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--b25-cta, hsl(28 92% 54%));
  transform: scaleX(0);
  transform-origin: left center;        /* L → R */
  transition: transform .36s var(--b25-ease);
  will-change: transform;
  z-index: -1;                          /* unter dem Text */
  pointer-events: none;
}
.brighton2025-caption .b25-cta:hover{
  border-color: var(--b25-cta, hsl(28 92% 54%));
}
.brighton2025-caption .b25-cta:hover::before{
  transform: scaleX(1);                 /* animierte Füllung */
}

/* Pfeil bleibt verzögert */
.brighton2025-caption .b25-cta::after{
  transition: color .24s ease .12s, transform .24s ease .12s;
}
.brighton2025-caption .b25-cta:hover::after{
  color:#fff; transform: translateY(-3px) translateX(3px) scale(1.32);
}










/* ======================================
   PATCHES TO FIX!!!
   ====================================== */
/* === Patch 1: CTA: START VON BORDER & FILL HART SYNCHRONISIEREN === */
:root{ --b25-cta-fill: .36s; }

/* 1) Alte BG-Füllungen UND globale 'transition: all' neutralisieren */
.brighton2025-caption a.b25-cta,
.brighton2025-caption a.b25-cta:hover{
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
  background-position: 0 0 !important;
  background-repeat: no-repeat !important;

  /* nur border/color animieren, ohne Delay */
  transition-property: border-color, color !important;
  transition-duration: .18s, .18s !important;
  transition-timing-function: ease, ease !important;
  transition-delay: 0s, 0s !important;
}

/* 2) Füllung über ::before – sofort starten, NUR transform animieren */
.brighton2025-caption a.b25-cta{
  position: relative; z-index: 0; overflow: hidden;
}

.brighton2025-caption a.b25-cta::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--b25-cta, hsl(28 92% 54%));
  transform: translateZ(0) scaleX(0);      /* Layer warm + Start leer */
  transform-origin: left center;
  will-change: transform;

  /* EXPLIZIT nur transform; kein Delay, hartes !important gegen Theme */
  transition-property: transform !important;
  transition-duration: var(--b25-cta-fill) !important;
  transition-timing-function: var(--b25-ease) !important;
  transition-delay: 0s !important;

  z-index: -1; pointer-events: none;
}

/* 3) Hover: border färbt um, Fill startet im selben Frame */
.brighton2025-caption a.b25-cta:hover{
  border-color: var(--b25-cta, hsl(28 92% 54%)) !important;
}
.brighton2025-caption a.b25-cta:hover::before{
  transform: translateZ(0) scaleX(1) !important;
}








/* ======================================
   PATCHES TO FIX!!!
   ====================================== */
/* === Patch 2: CSS – Progressbar + Fade
/* === Bottom Progress (2–3px) === */
:root{ --b25-progress-h: 3px; }

.b25-progress{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--b25-progress-h);
  background: hsl(0 0% 100% / .12);   /* zarter Track */
  z-index: 6;
  pointer-events: none;
}
.b25-progress__bar{
  display: block;
  width: 100%; height: 100%;
  background: var(--b25-cta, hsl(28 92% 54%));
  transform-origin: left center;
  transform: scaleX(0);
  /* wir animieren per CSS-Animation (pausierbar) */
  animation: b25-progress-run var(--b25-progress-duration, 5500ms) linear 0s forwards;
  animation-play-state: paused; /* läuft erst, wenn JS "running" setzt */
}
@keyframes b25-progress-run{
  from{ transform: scaleX(0); }
  to  { transform: scaleX(1); }
}

/* === Fade-Transition für Slides === */
.brighton2025-slides{ position: relative; }
.brighton2025-slide{
  position: absolute; inset: 0;
  opacity: 0; 
  z-index: 1;
  transition: opacity var(--b25-ease);
}
.brighton2025-slide.is-active{
  opacity: 1; 
  z-index: 2;
}




.brighton2025-slide img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: center;
}










/* ===================================================
   Mobile Ansicht für Mobile / Tablet / Large
   =================================================== */
/* Brand: auf Phone nur Logo (Text ausblenden) */
/* unter ~640px nur das Logo zeigen, Text im Link “unsichtbar” machen */
@media (max-width: 640px){
  .brighton2025-brand{
    font-size: 0 !important;      /* Text-Node verschwindet */
    letter-spacing: 0 !important;
  }
  .brighton2025-brand img{
    height: 30px;                  /* gern anpassen */
  }
  /* optional: etwas weniger Abstand links/oben auf Phone */
  :root{ --b25-edge: 20px; }
}


/* Default: Mobile (<= 815px) nur Dots */
@media (max-width: 815px){
  .brighton2025-slider .brighton2025-pp,
  .brighton2025-slider .brighton2025-nav,
  .brighton2025-slider .brighton2025-counter{ display: none !important; }
}




/* Optionen via Klassen auf dem Slider steuerbar:
PP/Pfeile doch behalten → Klasse b25-mobile-keep-controls auf .brighton2025-slider
Dots auf Mobile ausblenden → Klasse b25-mobile-hide-dots auf .brighton2025-slider
-------------------------------------------
So benutzt du’s (HTML-Beispiel):
<div class="brighton2025-slider b25-mobile-keep-controls">…</div>
<!-- oder -->
<div class="brighton2025-slider b25-mobile-hide-dots">…</div>
----------------------------------------------
*/


/* Option 1: Controls trotzdem zeigen
@media (max-width: 815px){
  .brighton2025-slider.b25-mobile-keep-controls .brighton2025-pp,
  .brighton2025-slider.b25-mobile-keep-controls .brighton2025-nav{
    display: grid !important;     /* gleiche Layout-Form wie Desktop
  }
}

/* Option 2: Dots auf Mobile verstecken
@media (max-width: 815px){
  .brighton2025-slider.b25-mobile-hide-dots .brighton2025-dots{
    display: none !important;
  }
}
 */







/* Geräte ohne Hover (Phones/Tablets): Hover-Effekte neutralisieren */
@media (hover: none){
  /* Burger: kein Hover-Schrumpf, nur Tap-Animation (X-Morph bleibt) */
  .brighton2025-burger[aria-expanded="false"] .brighton2025-burger-bar{ transform: none !important; }

  /* CTA: kein verzögertes Pfeil-Spiel, Fill kürzer */
  .brighton2025-caption .b25-cta::before{
    transition-duration: .24s !important;
  }
  .brighton2025-caption .b25-cta::after{
    transition: none !important;   /* Pfeil reagiert direkt */
  }
}






/* Tablet: Headlines moderater, CTA kompakter */
@media (min-width: 641px) and (max-width: 1024px){
  :root{
    --b25-h1-max: 120px;                /* vorher 180px */
  }
  .brighton2025-caption .b25-cta{
    padding: .5em 1em .45em 1em;
  }
}

/* Große Screens/TV: Headline größer, Tracking etwas enger */
@media (min-width: 1920px){
  :root{
    --b25-h1-max: 220px;
  }
  .brighton2025-caption h1{
    letter-spacing: clamp(0.08em, 1.2cqw, 0.28em);
  }
}





























	
	
	
	
	
	
	
	
	










	
	/* =========================================
   B25 – Viewer-Overlay (lightGallery & Magnific)
   ========================================= */

/* --- lightGallery (von Royal/Essential Addons häufig genutzt) --- */
/* dunkler Backdrop + sicher über dem Popup (z-index) */
.lg-backdrop{
  background: rgba(0,0,0,.86) !important; /* Helligkeit hier anpassen */
  opacity: 1 !important;
  z-index: 1000005;            /* > sg-popup (999910) */
}
/* optional: zusätzlich minimale Tönung unter dem Bild */
.lg-outer{
  background: rgba(0,0,0,.86) !important;
  z-index: 1000006;            /* über dem Backdrop */
}

/* --- Magnific Popup (manche Widgets nutzen das) --- */
.mfp-bg{
  background: rgba(0,0,0,.86) !important;
  opacity: 1 !important;
  z-index: 1000005 !important;
}
.mfp-wrap{
  z-index: 1000006 !important;
}

/* (Optional) Wenn der Viewer offen ist, die Galerie im Popup leicht abdunkeln/beruhigen */
body.lg-on #sgpb-popup-dialog-main-div .wpr-grid{
  filter: brightness(.7) blur(1px);
  transition: filter .2s ease;
}