.elementor-kit-12{--e-global-color-primary:#111213;--e-global-color-secondary:#0E7C86;--e-global-color-text:#1F2328;--e-global-color-accent:#C93F19;--e-global-color-e3cd3ce:#A93712;--e-global-color-445bafa:#C93F19;--e-global-color-9f3e351:#1B4332;--e-global-color-42d8a9c:#F2F4F7;--e-global-color-0bbd0ba:#F7F5F2;--e-global-color-1b325bc:#E4572E;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.6em;--e-global-typography-primary-letter-spacing:0.5px;--e-global-typography-primary-word-spacing:0px;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:19px;--e-global-typography-secondary-font-weight:600;--e-global-typography-secondary-line-height:1.5em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-secondary-word-spacing:0px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-text-letter-spacing:0.2px;--e-global-typography-text-word-spacing:0px;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-size:17px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:0.3px;--e-global-typography-accent-word-spacing:0px;background-color:#F7F5F2;color:var( --e-global-color-text );font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;line-height:1.6;letter-spacing:0px;}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}.elementor-kit-12 a{color:#C93F19;font-family:"Inter", Sans-serif;font-weight:500;word-spacing:0.2px;}.elementor-kit-12 h1{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:56px;font-weight:800;line-height:1.15;letter-spacing:-0.5px;}.elementor-kit-12 h2{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:40px;font-weight:700;line-height:1.20;word-spacing:0px;}.elementor-kit-12 h3{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:32px;font-weight:700;line-height:1.25;letter-spacing:0px;}.elementor-kit-12 h4{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:24px;font-weight:600;line-height:1.30;letter-spacing:0px;word-spacing:0px;}.elementor-kit-12 h5{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:20px;font-weight:600;line-height:1.35;letter-spacing:0;word-spacing:0;}.elementor-kit-12 h6{color:var( --e-global-color-primary );font-family:"Manrope", Sans-serif;font-size:18px;font-weight:600;line-height:1.40;letter-spacing:0;word-spacing:0;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;--container-default-padding-top:24px;--container-default-padding-right:24px;--container-default-padding-bottom:24px;--container-default-padding-left:24px;}.elementor-widget:not(:last-child){--kit-widget-spacing:16px;}.elementor-element{--widgets-spacing:16px 16px;--widgets-spacing-row:16px;--widgets-spacing-column:16px;}{}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:1025px){.elementor-kit-12{font-size:17px;}.elementor-kit-12 h1{font-size:44px;}.elementor-kit-12 h2{font-size:32px;}.elementor-kit-12 h3{font-size:28px;}.elementor-kit-12 h4{font-size:22px;}.elementor-kit-12 h5{font-size:18px;}.elementor-kit-12 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:768px){.elementor-kit-12{font-size:16px;}.elementor-kit-12 h1{font-size:36px;}.elementor-kit-12 h2{font-size:28px;}.elementor-kit-12 h3{font-size:24px;line-height:1.25;}.elementor-kit-12 h4{font-size:20px;}.elementor-kit-12 h5{font-size:18px;line-height:1.35;word-spacing:0;}.elementor-kit-12 h6{font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Manrope:wght@400;500;700&display=swap');

/* ===== 2) HERO CONTAINER ===== */
.sb-hero{
  position: relative; isolation: isolate;
  min-height: calc(100vh - 80px);      /* ggf. an Headerhöhe anpassen */
  background: center / cover no-repeat;
  padding: 0 20px;
  background-color:#0a100e; /* CHANGE: Fallback-Farbe für Kontrast, falls kein Bild */
}
.sb-hero::before{ /* Lesbarkeits-Overlay */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,16,14,.60) 0%, rgba(0,0,0,0) 42%),
    linear-gradient(135deg, rgba(167,139,111,.38) 0%, rgba(0,0,0,0) 62%);
}

/* Optional: dezentes Parallax (nur Desktop) */
@media (min-width:1025px){
  .sb-hero::after{
    content:""; position:absolute; inset:-3% -3%; z-index:-1;
    background: inherit; background-size:cover; background-position:center;
    will-change: transform; transform: translateY(-2.2%);
  }
  .sb-hero.animate-parallax::after{ animation: sb-parallax-float 3.5s ease-out forwards; }
}
@keyframes sb-parallax-float{ from{transform:translateY(-4%);} to{transform:translateY(0%);} }

/* ===== 3) HEADLINE (H1) ===== */
.sb-hero .elementor-heading-title{ /* Absicherung */
  color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.35);
  position:relative; z-index:2;
}
.hero-title,
.sb-hero .elementor-heading-title.hero-title{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:700;
  font-size:clamp(36px, 6vw, 80px);
  line-height:1.1;
  letter-spacing:-0.012em;
  color:#fff !important;
  text-shadow:0 3px 8px rgba(0,0,0,.45);
  text-align:center;
  margin:0 auto .9rem;
  max-width:820px;
  opacity:0; animation: sb-fade-in .6s ease-out .05s forwards;
  text-wrap: balance; /* CHANGE: sanftere Zeilenumbrüche, wo unterstützt */
}
@keyframes sb-fade-in{ to{opacity:1;} }

/* zarte Linie unter der Headline */
.sb-hero .hero-title{ position: relative; padding-bottom:.35rem; }
.sb-hero .hero-title::after{
  content:""; position:absolute; left:50%; bottom:-.10rem; transform:translateX(-50%);
  width:clamp(84px, 12vw, 140px); height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  opacity:.9;
}

/* Pfote als i-Punkt – im Text: Perspect<span class="paw-i">ı</span>ve */
.hero-title .paw-i{ position:relative; display:inline-block; line-height:1; }
.hero-title .paw-i::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%) scale(1);
  top:-0.22em; width:.44em; height:.44em;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'><circle cx='18' cy='20' r='6'/><circle cx='32' cy='16' r='6'/><circle cx='46' cy='20' r='6'/><path d='M14 42c0-8 8-14 18-14s18 6 18 14-8 12-18 12S14 50 14 42z'/></svg>");
  pointer-events:none; animation:pawZoom 1.2s ease-out forwards;
}
@keyframes pawZoom{
  0%{transform:translateX(-50%) scale(0); opacity:0;}
  60%{transform:translateX(-50%) scale(1.15); opacity:1;}
  100%{transform:translateX(-50%) scale(1); opacity:1;}
}

/* ===== 4) TAGLINE (rechter Fließtext) ===== */
:root{
  --tg-font:"Manrope", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --tg-size:19px;                 /* Basisgröße Desktop */
  --tg-line:1.45;                 /* kompakter Zeilenabstand */
  --tg-width:520px;               /* max. Zeilenlänge Desktop */
}
.sb-hero .tagline{
  position:absolute !important;
  right:6.5vw !important;
  top:55% !important;             /* 54–58% nach Geschmack */
  transform:translateY(-50%) !important;
  z-index:2;

  max-width:var(--tg-width);
  font-family:var(--tg-font);
  font-size:var(--tg-size) !important;
  line-height:var(--tg-line) !important;
  font-weight:500 !important;
  color:#fff !important;
  text-shadow:0 2px 5px rgba(0,0,0,.35) !important;
  margin:0 !important; text-align:left !important; letter-spacing:0;
}
.sb-hero .tagline p{ margin:0 0 .45em; }
.sb-hero .tagline p:last-child{ margin-bottom:0; }
.sb-hero .tagline p:first-child strong{
  font-weight:600; font-size:inherit; letter-spacing:0;
}
.sb-hero .tagline em{ font-style:normal; opacity:1; color:inherit; } /* kein Kursiv */

/* ===== 5) RESPONSIVE ===== */
@media (max-width:1440px){
  :root{ --tg-width:500px; }
  .sb-hero .tagline{ right:5vw !important; }
}
@media (max-width:1024px){
  :root{ --tg-size:18px; --tg-width:460px; }
  .sb-hero{ min-height:calc(90vh - 70px); }
  .sb-hero::after{ display:none !important; } /* Parallax aus */
}

/* ==== HANDY FIX (ohne Glasbox, unten rechts, kurze Zeilen) ==== */
/* CHANGE: globales overflow-x entfernen – nur im Hero clippen */
.sb-hero{ overflow-x: clip; } 
/* Fallback, falls clip nicht unterstützt: */
/* .sb-hero{ overflow-x:hidden; } */

@media (max-width:768px){
  .sb-hero{ padding:60px 0 28px; }  /* oben Platz für Header/Mobile-Nav */

  .sb-hero .tagline{
    position:absolute !important;
    top:auto !important;
    bottom:13vh !important;
    right:6vw !important; left:auto !important;
    transform:none !important;

    max-width:72vw !important;
    font-size:15.5px !important;
    line-height:1.42 !important;

    background:none !important;             /* KEINE Glasbox */
    box-shadow:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    text-align:left !important;
  }
  .sb-hero .tagline p{ margin:0 0 .4em !important; }
}
@media (max-width:380px){
  .sb-hero .tagline{
    bottom:12vh !important; right:5vw !important;
    max-width:78vw !important; font-size:14.5px !important; line-height:1.4 !important;
  }
}

/* ===== 6) ACCESSIBILITY ===== */
@media (prefers-reduced-motion:reduce){
  .sb-hero .hero-title, .sb-hero .tagline{
    animation:none !important; opacity:1 !important; transform:translateY(0) !important;
  }
  .sb-hero::after{ animation:none !important; }
  .sb-hero .hero-title .paw-i::after{ animation:none !important; } /* CHANGE: Pfote auch stoppen */
}

/* === Headline (H1) nach oben schieben – nur Optik, Layout bleibt stabil === */
/* CHANGE: nur auf großen Screens kräftig verschieben, Tablet sanfter, Mobile gar nicht */
@media (min-width:1025px){
  .sb-hero .hero-title{
    transform: translateY(-28vh) !important; /* vorher -35vh → etwas sicherer bzgl. kleinen Laptops */
    margin-top: 0 !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .hero-title{
    transform: translateY(-14vh) !important;
    margin-top: 0 !important;
  }
}
@media (max-width:768px){
  .sb-hero .hero-title{
    transform: none !important;
    margin-top: 0 !important;
  }
}
/* === TAGLINE unten rechts – Desktop & Tablet === */

/* Desktop (≥1025px) */
@media (min-width:1025px){
  .sb-hero .tagline{
    top:auto !important;
    bottom:10vh !important;                 /* feintunen: 8–14vh */
    right:clamp(24px, 6vw, 96px) !important;
    transform:none !important;

    max-width:clamp(420px, 34vw, 560px);    /* bündige Breite */
    text-align:right !important;            /* Variante A: rechtsbündig */
    /* Falls du linksbündig willst, nimm stattdessen:
       text-align:left !important;
    */
  }
}

/* Tablet (769–1024px) */
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .tagline{
    top:auto !important;
    bottom:12vh !important;
    right:5vw !important;
    transform:none !important;

    max-width:46vw !important;
    font-size:17.5px !important;
    text-align:right !important;            /* oder left – Geschmackssache */
  }
}
/* === Tagline unten rechts, aber linksbündig === */
/* Desktop (≥1025px) */
@media (min-width:1025px){
  .sb-hero .tagline{
    top:auto !important;
    bottom:10vh !important;
    right:clamp(24px, 6vw, 96px) !important;
    left:auto !important;
    transform:none !important;

    max-width:clamp(420px, 32vw, 560px) !important;
    text-align:left !important;
    -webkit-hyphens:auto; hyphens:auto;      /* schönere Trennungen (HTML lang="de") */
    text-wrap:balance;                        /* sofern unterstützt */
  }
  /* erzwungene Zeilenumbrüche im Text entfernen (nur Desktop) */
  .sb-hero .tagline br{ display:none; }
}

/* Tablet (769–1024px) */
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .tagline{
    top:auto !important;
    bottom:12vh !important;
    right:5vw !important;
    transform:none !important;

    max-width:46vw !important;
    font-size:17.5px !important;
    text-align:left !important;
    -webkit-hyphens:auto; hyphens:auto;
    text-wrap:balance;
  }
  .sb-hero .tagline br{ display:none; }
}
/* letzte Zeile als eigener Block, mit etwas Luft nach oben */
.sb-hero .tagline .tagline-last {
  display:block;
  margin-top:.65em;
}

/* super-clean: keine Silbentrennung & schöne Umbrüche */
.sb-hero .tagline{
  -webkit-hyphens:none; hyphens:none;
  text-wrap:balance;
}

/* falls deine Tagline noch zu breit/eng wirkt: feinjustieren */
@media (min-width:1025px){
  .sb-hero .tagline{ max-width:clamp(420px, 31vw, 540px) !important; }
}
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .tagline{ max-width:46vw !important; }
}
/* Letzte Zeile als eigener Block + etwas Abstand nach oben */
.sb-hero .tagline .tagline-last{
  display:block;
  margin-top:.65em;
  white-space:nowrap;              /* auf Desktop 1 Zeile */
  -webkit-hyphens:none; hyphens:none;
}

@media (max-width:1024px){
  .sb-hero .tagline .tagline-last{ white-space:normal; } /* Tablet/Phone darf umbrechen */
}

/* Optional: harte <br> im Tagline-Text auf großen Screens ausblenden,
   damit der Umbruch natürlich aussieht */
@media (min-width:769px){
  .sb-hero .tagline br{ display:none; }
}
/* === Tagline breiter machen → weniger Zeilen (Desktop/Tablet) === */

/* große Desktops ≥1280px */
@media (min-width:1280px){
  .sb-hero .tagline{
    max-width: min(44vw, 680px) !important;   /* vorher ~520–560 → jetzt bis 680 */
    right: clamp(24px, 5.5vw, 120px) !important;
    line-height: 1.42 !important;
    -webkit-hyphens: none; hyphens: none;     /* keine Silbentrennung → cleanere Zeilen */
    text-wrap: balance;
  }
}

/* Laptops 1025–1279px */
@media (min-width:1025px) and (max-width:1279px){
  .sb-hero .tagline{
    max-width: min(48vw, 620px) !important;   /* etwas schmaler als ganz groß */
  }
}

/* Tablet 769–1024px */
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .tagline{
    max-width: 54vw !important;               /* dezent breiter als vorher */
  }
}

/* Letzte Zeile bleibt separat – falls noch nicht gesetzt */
.sb-hero .tagline .tagline-last{
  display:block; margin-top:.7em; white-space:nowrap;
}
@media (max-width:1024px){
  .sb-hero .tagline .tagline-last{ white-space:normal; }
}
/* === 1) HEADLINE höher (H1) === */
@media (min-width:1280px){
  .sb-hero .hero-title{ transform: translateY(-34vh) !important; } /* höher */
}
@media (min-width:1025px) and (max-width:1279px){
  .sb-hero .hero-title{ transform: translateY(-35vh) !important; }
}
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .hero-title{ transform: translateY(-12vh) !important; } /* Tablet etwas höher */
}
/* auf Mobile bleibt sie zentriert – nichts ändern */

/* === 2) TAGLINE „von unten“ einfliegen (Desktop/Tablet) === */
@media (min-width:769px){
  .sb-hero .tagline{
    opacity: 0;
    transform: translateY(18px) !important;     /* Start: minimal tiefer */
    animation: sb-tagline-rise .7s ease-out .15s forwards;
    will-change: transform, opacity;
  }
}
@keyframes sb-tagline-rise{
  to { opacity: 1; transform: translateY(0) !important; }
}

/* Motion-Respekt */
@media (prefers-reduced-motion: reduce){
  .sb-hero .tagline{ animation: none !important; opacity:1 !important; transform:none !important; }
}
/* Container selbst nicht animieren */
@media (min-width:769px){
  .sb-hero .tagline{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Zeile-für-Zeile (Delay per --d aus dem HTML) */
.sb-hero .tl-line{
  display:block;
  opacity:0;
  transform:translateY(14px);
  animation: tl-rise .8s ease-out forwards;
  animation-delay: var(--d, .1s);
  -webkit-hyphens:none; hyphens:none;
  text-wrap:balance;
}
@keyframes tl-rise{ to{ opacity:1; transform:translateY(0); } }

/* letzte Zeile separat, Desktop möglichst in 1 Zeile */
.sb-hero .tagline-last{ margin-top:.7em; white-space:nowrap; }
@media (max-width:1024px){ .sb-hero .tagline-last{ white-space:normal; } }

/* harte <br> sicherheitshalber aus */
@media (min-width:769px){ .sb-hero .tagline br{ display:none; } }
/* === STARTSEITE FINETUNE === */

/* 1) H1 oben noch lesbarer – dezentes Top-Overlay + etwas stärkerer Schatten */
@media (min-width:1025px){
  .sb-hero::before{
    background:
      linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 24%),
      linear-gradient(135deg, rgba(167,139,111,.38) 0%, rgba(0,0,0,0) 62%) !important;
  }
  .sb-hero .hero-title{
    text-shadow: 0 3px 12px rgba(0,0,0,.35) !important;
  }
}

/* 2) Tagline noch ruhiger – minimal mehr Zeilenabstand + etwas tiefer */
@media (min-width:1280px){
  .sb-hero .tagline{
    line-height: 1.46 !important;
    bottom: 11vh !important;
  }
}

/* Optional: auf Laptops einen Tick höher lassen (feiner Ausgleich) */
@media (min-width:1025px) and (max-width:1279px){
  .sb-hero .tagline{ bottom: 12vh !important; }
}
/* Paare zusammenhalten – Desktop/Tablet */
.sb-hero .nobr{ white-space:nowrap; }

/* Auf Handy darf wieder umbrechen, damit nichts übersteht */
@media (max-width:768px){
  .sb-hero .nobr{ white-space:normal; }
}
/* breiter = weniger Zeilen, kein hartes Trennen */
@media (min-width:1280px){
  .sb-hero .tagline{
    max-width: min(46vw, 720px) !important;
    line-height: 1.46 !important;
  }
}
@media (min-width:1025px) and (max-width:1279px){
  .sb-hero .tagline{ max-width: min(48vw, 660px) !important; }
}

/* keine Silbentrennung in den animierten Zeilen */
.sb-hero .tl-line{
  -webkit-hyphens: none; hyphens: none;
  word-break: normal; overflow-wrap: normal;
}

/* harte <br> sicherheitshalber weg auf großen Screens */
@media (min-width:769px){
  .sb-hero .tagline br{ display:none !important; }
}                         
/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Manrope:wght@400;500;700&display=swap');

/* ===== TUNING-VARS ===== */
:root{
  --tg-right: 6.5vw;   /* kleiner = weiter nach rechts (z.B. 5.5vw) */
  --tg-bottom: 11.5vh; /* 9–13vh nach Geschmack */
  --tg-step: 5.2ch;    /* Treppen-Stufe: „leicht kleiner“ */
  --tl-dur: 1.25s;     /* Animationsdauer pro Zeile (etwas ruhiger) */
}

/* ===== HERO BASIS ===== */
.sb-hero{
  position:relative; isolation:isolate;
  min-height:calc(100vh - 80px);
  background:center / cover no-repeat;
  padding:0 20px; background-color:#0a100e; overflow-x:clip;
}
.sb-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* Lesbarkeits-Overlay: oben + unten minimal stärker */
  background:
    linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,0) 22%),
    linear-gradient(0deg,   rgba(0,0,0,.26) 0%, rgba(0,0,0,0) 28%),
    linear-gradient(135deg, rgba(167,139,111,.34) 0%, rgba(0,0,0,0) 62%);
}

/* ===== HEADLINE ===== */
.sb-hero .elementor-heading-title{ color:#fff !important; position:relative; z-index:2; }
.hero-title{
  font-family:"Fraunces", Georgia, serif; font-weight:700;
  font-size:clamp(36px,6vw,80px); line-height:1.1; letter-spacing:-.010em;
  text-align:center; margin:0 auto .9rem; max-width:820px; text-wrap:balance;
  opacity:0; animation: sb-fade-in .6s ease-out .05s forwards;
}
@keyframes sb-fade-in{ to{opacity:1;} }
/* zarte Linie */
.sb-hero .hero-title{ position:relative; padding-bottom:.35rem; }
.sb-hero .hero-title::after{
  content:""; position:absolute; left:50%; bottom:-.10rem; transform:translateX(-50%);
  width:110px; height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
}
/* Pfote als i-Punkt – setz in der H1 das i so: Perspect<span class="paw-i">i</span>ve */
.hero-title .paw-i{ position:relative; display:inline-block; line-height:1; }
.hero-title .paw-i::after{
  content:""; position:absolute; left:50%; top:-0.22em; transform:translateX(-50%);
  width:.44em; height:.44em; background:no-repeat center/contain;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'><circle cx='18' cy='20' r='6'/><circle cx='32' cy='16' r='6'/><circle cx='46' cy='20' r='6'/><path d='M14 42c0-8 8-14 18-14s18 6 18 14-8 12-18 12S14 50 14 42z'/></svg>");
}

/* H1 höher (Desktop) */
@media (min-width:1280px){ .sb-hero .hero-title{ transform:translateY(-34vh) !important; } }
@media (min-width:1025px) and (max-width:1279px){ .sb-hero .hero-title{ transform:translateY(-22vh) !important; } }
@media (min-width:769px)  and (max-width:1024px){ .sb-hero .hero-title{ transform:translateY(-12vh) !important; } }

/* ===== TAGLINE – POSITION & LOOK ===== */
.sb-hero .tagline{
  position:absolute !important; z-index:2;
  color:#fff !important; font-family:"Manrope",system-ui,sans-serif;
  font-size:19px !important; font-weight:500 !important;
  text-shadow:0 2px 5px rgba(0,0,0,.35) !important;
  text-align:left !important;
}
@media (min-width:1280px){
  .sb-hero .tagline{
    right:var(--tg-right) !important; bottom:var(--tg-bottom) !important; transform:none !important;
    max-width:min(45vw,700px) !important; line-height:1.48 !important;
  }
}
@media (min-width:1025px) and (max-width:1279px){
  .sb-hero .tagline{
    right:var(--tg-right) !important; bottom:12vh !important;
    max-width:min(48vw,660px) !important; line-height:1.46 !important;
  }
}
@media (min-width:769px) and (max-width:1024px){
  .sb-hero .tagline{
    right:5vw !important; bottom:12vh !important;
    max-width:60vw !important; line-height:1.46 !important;
  }
}

/* ===== TAGLINE – STAGGER & TREPPE ===== */
@media (min-width:769px){
  .sb-hero .tagline br{ display:none !important; }            /* harte <br> vermeiden */
  .sb-hero .tl-line{
    display:block; width:max-content; white-space:nowrap;     /* je Span 1 Zeile */
    margin-left: calc(var(--i,0) * var(--tg-step));           /* Treppen-Einzug */
    opacity:0; transform:translateY(14px);
    animation: tl-rise var(--tl-dur) ease-out forwards;
    animation-delay: var(--d,.2s);                            /* Delay aus HTML */
    -webkit-hyphens:none; hyphens:none;
  }
  .sb-hero .tagline .tagline-last{ margin-top:.75em; white-space:nowrap; }
}
@keyframes tl-rise{ to{ opacity:1; transform:translateY(0); } }

/* Pärchen fix (optional im Text nutzen) */
.sb-hero .tagline .nobr{ white-space:nowrap; }

/* ===== MOBILE ===== */
@media (max-width:768px){
  .sb-hero{ padding:60px 0 28px; }
  .sb-hero .tagline{
    top:auto !important; bottom:13vh !important; right:6vw !important; left:auto !important;
    transform:none !important; max-width:72vw !important; font-size:15.5px !important; line-height:1.42 !important;
    text-shadow:0 1px 4px rgba(0,0,0,.35) !important;
  }
  .sb-hero .tl-line, .sb-hero .tagline .tagline-last{
    white-space:normal !important; animation:none !important; opacity:1 !important; transform:none !important;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion:reduce){
  .sb-hero .tl-line{ animation:none !important; opacity:1 !important; transform:none !important; }
}
/* === Tagline: Position + Treppe + Fade (Hard Override) === */
:root{
  --tg-right: 6vw;    /* kleiner = weiter nach rechts */
  --tg-bottom: 12vh;  /* Abstand vom unteren Rand */
  --tg-step: 6ch;     /* Treppen-Stufe (größer = mehr Einzug) */
  --tl-dur: 1.15s;    /* Animationsdauer pro Zeile */
}

@media (min-width:769px){
  .sb-hero .tagline{
    position:absolute !important;
    right: var(--tg-right) !important;
    bottom: var(--tg-bottom) !important;
    transform:none !important;
    max-width:none !important;           /* keine vererbte Breite */
    line-height:1.46 !important;
    color:#fff !important;
  }

  /* alles linksbündig erzwingen – egal, was Elementor/Spalte setzt */
  .sb-hero .tagline, .sb-hero .tagline *{ text-align:left !important; }

  /* harte <br> verhindern */
  .sb-hero .tagline br{ display:none !important; }

  /* Treppe je Zeile + Fade-up (unten zuerst, wegen --d im HTML) */
  .sb-hero .tl-line{
    display:block !important;
    width:max-content !important;
    white-space:nowrap !important;               /* jede Zeile 1-zeilig */
    margin-left: calc(var(--i,0) * var(--tg-step)) !important; /* Treppe */
    opacity:0; transform:translateY(14px);
    animation: tl-rise var(--tl-dur) ease-out forwards;
    animation-delay: var(--d,.2s);
  }
  .sb-hero .tagline .tagline-last{
    margin-top:.8em !important;
  }
}

@media (max-width:768px){
  /* mobil normal umbrechen, ohne Animation */
  .sb-hero .tagline{
    right:6vw !important; bottom:13vh !important; max-width:72vw !important;
    text-align:left !important;
  }
  .sb-hero .tl-line, .sb-hero .tagline .tagline-last{
    white-space:normal !important; animation:none !important; opacity:1 !important; transform:none !important;
  }
}

@keyframes tl-rise{ to{ opacity:1; transform:translateY(0); } }
/* === STRAIGHT STACK: linksbündig, ohne Treppe, mit kleiner werdenden Zeilen === */
@media (min-width:769px){
  /* Links bündig erzwingen, egal was Elementor macht */
  .sb-hero .tagline, .sb-hero .tagline *{ text-align:left !important; }

  /* Keine Treppe mehr */
  .sb-hero .tl-line{
    margin-left:0 !important;
    width:max-content !important;      /* jede Zeile bleibt in sich 1-zeilig */
    white-space:nowrap !important;
    letter-spacing:.002em;
  }

  /* Zeilen werden nach unten hin leicht kleiner */
  .sb-hero .tl-line:nth-child(1){ font-size:1em !important; }
  .sb-hero .tl-line:nth-child(2){ font-size:.97em !important; }
  .sb-hero .tl-line:nth-child(3){ font-size:.94em !important; }
  .sb-hero .tl-line.tagline-last{
    font-size:.92em !important;
    margin-top:.8em !important;        /* Abstand zur Zeile darüber */
    white-space:nowrap !important;
  }
}

/* Mobil/Tablet: natürlich umbrechen, kein Zwang zu 1-Zeile */
@media (max-width:768px){
  .sb-hero .tl-line,
  .sb-hero .tagline .tagline-last{
    white-space:normal !important;
    width:auto !important;
  }
}
/* === Tagline weiter nach rechts + breiter (untere Hunde-Zone) === */
:root{
  /* Feintuning hier: */
  --spot-right: 7vw;  /* kleiner = weiter rechts (z.B. 11vw, 10.5vw) */
  --spot-width: 40vw;  /* größer = breiter/längere Zeilen (z.B. 42–44vw) */
}

@media (min-width:1025px){
  .sb-hero .tagline{
    right: var(--spot-right) !important;
    max-width: var(--spot-width) !important;
    line-height: 1.50 !important;          /* etwas mehr Luft für die längeren Zeilen */
    text-align: left !important;
  }
  /* schönere Umbrüche, keine Silbentrennung */
  .sb-hero .tl-line{
    white-space: normal !important;
    text-wrap: balance;
    -webkit-hyphens: none; hyphens: none;
  }
}/* End custom CSS */