/* Base */
:root { --brand:#009999; --brand-dark:#055278; }
html, body { height: 100%; }
body {
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  background: #000;
  color: #fff;
  scroll-behavior: smooth;
}

/* Right-top navbar */
.custom-nav { background: transparent; backdrop-filter: none; }
.custom-nav .nav-link { color: #fff; text-transform: lowercase; }
.custom-nav .nav-link:hover { color: #FFFF00; text-decoration: none; }

/* Letter-like visuals */
#particles-js {
  position: fixed; inset: 0; z-index: 0;
}
.background-pattern {
  position: fixed; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 18px 18px; pointer-events: none;
}

/* Sections above bg */
.section-hero, .section-pad, .footer-link { position: relative; z-index: 1; }
.section-hero h1, .section-hero p { color: #fff; }
.section-hero .btn { background: #006699; border: 1px solid #fff; }
.section-hero .btn:hover { background: #055278; }

.section-pad { padding: 100px 0; }
.section-pad .tm-text-primary { color: var(--brand); }

/* Leistungen */
.logo-holder { min-width: 88px; min-height: 48px; display:flex; align-items:center; justify-content:center; }

/* Pricing cards */
.pricing .card-title { letter-spacing: .08em; }
.pricing .display-6 { color: var(--brand); }
.btn-outline-primary { border-color: var(--brand); color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand); color: #fff; }

/* Contact */
.section-contact .contact-box {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: .5rem;
}

.section-impressum p, .section-contact p, .section-pad p { color: #eee; }

.footer-link { color:#fff; text-align:center; padding: 30px 0 40px; }

/* Gallery – ensure it's visible over bg */
.tm-gallery .tm-video-item img { opacity: .9; }
figure.effect-ming { background: rgba(3,12,23,.8); }
figure.effect-ming figcaption::before { box-shadow: 0 0 0 30px rgba(255,255,255,0.12); }

/* Anchor offset for fixed nav */
:target::before {
  content: "";
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

/* Navbar icon color */
.navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }


/* --- Letter compatibility adjustments for Sektion 1 --- */
#particles-js { position: absolute; top: 0; left: 0; width: 100%; height: 99%; z-index: 1000; }
.tm-content { z-index: 1001; }
.cb-slideshow, .cb-slideshow:after { z-index: 0; }
.section-hero { min-height: 100vh; }


@media (max-width: 991.98px) {
  .navbar-collapse { justify-content: flex-end; }
  .navbar-nav { text-align: right; align-items: flex-end; }
}

.offcanvas {
  background: rgba(0, 0, 0, 0.95);
}
.offcanvas .nav-link {
  font-size: 1.2rem;
  padding: 0.75rem 0;
}


/* Larger body text where requested */
#leistungen p.intro, #impressum .right-col p { font-size: 1.1rem; line-height: 1.6; }
#leistungen ul.features{
  list-style: none;
  margin: 0;
  padding: 0;          /* keine Extra-Einrückung am UL */
}


/* Stronger shimmer visibility */
.shimmer, .shimmer-hero {
  font-weight: 800;
  display: inline-block;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, rgba(255,255,255,0.65) 50%, #ffffff 60%, #ffffff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: var(--brand) !important;
  animation: shimmer-move 2.2s linear infinite;
}
@keyframes shimmer-move { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
.section-pad h2.tm-text-primary { color: var(--brand) !important; }


/* Leistungen content box */
#leistungen .tm-about-img-text {
  background: rgba(0,0,0,0.10);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: .5rem;
  padding: 1.25rem;
}


/* White circle bullets with transparent check (stroke only) */
#leistungen ul.features{
  list-style: none;
  margin: 0;
  padding: 0;          /* keine Extra-Einrückung am UL */
}
#leistungen ul.features li {
  position: relative;
  padding-left: 1.5rem;  /* Platz zwischen Icon und Text */
  line-height: 2;
  margin-bottom: .6rem;
  font-size: 1.25rem;    /* falls du die größere Schrift behalten willst */
}

#leistungen ul.features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;                         /* mittig zur Zeile */
  transform: translate(-1.0rem, -50%);  /* nach links hängen + vertikal mittig */
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3Cpath d='M4.5 9l3 3 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 22px 22px;
  pointer-events: none;
}



/* Impressum grid divider */
.impressum-grid{ position:relative; }
@media (min-width: 992px){
  .impressum-grid::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.25); transform:translateX(-.5px); }
}
#impressum .right-col p { font-size: 1.1rem; line-height: 1.6; }


/* (1) Navbar small, bold + underline active */
.custom-nav .nav-link{font-size:.95rem;font-weight:700;color:#fff;}
.custom-nav .nav-link.active{ text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 991.98px){
  .navbar-collapse{ justify-content:flex-end; }
  .navbar-nav{ text-align:right; align-items:flex-end; }
}


/* (2) Buttons: transparent with white border */
.btn, .btn-primary, .btn-outline-primary{
  background: transparent !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  border-radius: .35rem;
  padding: .6rem 1.1rem;
  transition: all .2s ease;
}
.btn:hover,.btn:focus{ background:#fff !important; color:#222 !important; }


/* (3) Strong shimmer for section headings + hero */
.shimmer, .shimmer-hero{
  font-weight: 800;
  display:inline-block;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 35%, rgba(255,255,255,0.5) 50%, #ffffff 65%, #ffffff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color: var(--brand) !important;
  animation: shimmer-move 2s linear infinite;
}
.shimmer-hero{ font-size: clamp(2.6rem, 7vw, 5rem); }
@keyframes shimmer-move{ 0%{background-position:-120% 0} 100%{background-position:120% 0} }
.section-pad h2.tm-text-primary{ color: var(--brand) !important; text-align:center; }


/* (4/5) Leistungen bullets: white circles (no fill) */
#leistungen ul.features{ padding-left: 1.25rem; }
#leistungen ul.features{ color: #fff; } /* bullet color */
#leistungen .tm-about-img-text { overflow: visible; }



/* (5) Leistungen right boxes */
#leistungen .pricing.card{
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}


/* (7) Contact icon spacing */
.section-contact .contact-box i{ width: 1.25rem; text-align:center; margin-right:.4rem; }
.section-contact .contact-box p{ display:flex; align-items:baseline; gap:.4rem; }


/* (8) Impressum layout like photo */
.impressum-grid{ position:relative; }
@media (min-width: 992px){
  .impressum-grid::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.25); transform:translateX(-.5px); }
}
/* Alle Einträge in der linken Spalte rechtsbündig */
.impressum-list {
  text-align: right;
  margin: 0;
  padding: 0;
}

.impressum-list li {
  margin-bottom: .8rem;
  font-size: 1.1rem;
  line-height: 1.6;
}

.impressum-list li strong {
  margin-left: .5rem;     /* kleiner Abstand zwischen Wert und Label */
  white-space: nowrap;    /* Label bricht nicht um */
}

.impressum-list li strong {
  min-width: 10ch;        /* fester Platz für das Label (z. B. 10 Zeichen breit) */
  margin-right: .5rem;    /* Abstand zwischen Label und Text */
}

#impressum .right-col h3, #impressum .right-col h5{ color:#fff; font-weight:800; font-size: 1.5rem; margin-bottom:.5rem; }
#impressum .right-col p{ font-size: 1.15rem; line-height: 1.6; }

.custom-nav .navbar-brand{ color:#fff; }

/* Nav: subtle background after scroll */
.custom-nav.scrolled{
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background 200ms ease, backdrop-filter 200ms ease, box-shadow 200ms ease;
}

#impressum h3 {
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

#impressum .text-end {
  text-align: right;  /* sorgt für rechtsbündige Ausrichtung */
}

/* Schimmer-Effekt für Überschriften */
.shimmer-heading {
  font-weight: 800 !important;
  display: inline-block;
  text-align: center !important;
  width: 100%;          /* sorgt dafür, dass das Zentrieren auch bei H2 wirkt */
 background: linear-gradient(
    90deg,
    rgba(255,255,255,0.85) 0%,
    #ffffff 40%,
    #ffffff 50%,
    rgba(255,255,255,0.85) 60%,
    rgba(255,255,255,0.75) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-size: 200% auto;
  color: transparent !important;
  animation: shimmer-boost 1.8s linear infinite;
  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 18px rgba(255,255,255,0.55);  /* leichtes „Glühen“ */
}

@keyframes shimmer-move {
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}

/* Hero-Zeile oben etwas kompakter, damit der Effekt konzentrierter wirkt */
#handler .shimmer-heading{
  font-size: clamp(1.6rem, 5vw, 2.4rem) !important; /* kleiner als bisher */
  letter-spacing: .5px;
}

/* Paket Boxen */
.paket-title {
  font-size: 1.8rem;     /* größer als normal */
  font-weight: 800;
  margin-bottom: .5rem;
}

.paket-subtitle {
  font-size: 1rem;       /* kleiner, dezenter */
  font-weight: 400;
  margin-bottom: 1rem;
}

.paket-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;           /* oder Markenfarbe */
  margin-bottom: 1rem;
}

.paket-price .paket-tax {
  display: block;        /* in neuer Zeile */
  font-size: 0.85rem;
  font-weight: 400;
  color: #ccc;
  margin-top: .25rem;
}

.highlight-text {
  font-weight: 600;   /* noch fetter */
  font-size: 1.50rem; /* optional etwas größer */
}

/* Dunklere Boxen in Leistungen, Paketen und Kontakt */
#leistungen .tm-about-img-text,
#leistungen .pricing.card,
.section-contact .contact-box {
  background: rgba(0,0,0,0.65) !important;   /* dunkler: 65% Deckkraft */
  border-color: rgba(255,255,255,0.20) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);   /* dezenter Tiefeneffekt */
}

/* Optional: leichtes Glas-Effekt-Feeling */
#leistungen .tm-about-img-text,
.section-contact .contact-box {
  backdrop-filter: blur(4px);
}

/* Standard: linksbündig auf schmalen Bildschirmen */
#impressum .impressum-list {
  text-align: left;
}

/* Ab mittlerer Bildschirmgröße (Bootstrap Breakpoint md = 768px) 
   wieder rechtsbündig wie gewünscht */
@media (min-width: 992px) {
  #impressum .impressum-list {
    text-align: right;
  }
}


/* Aktiver Menüpunkt: fett + Unterstrich */
.custom-nav .nav-link.active{
  color:#FFFF00;
  font-weight:700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Beim Hover nicht die Unterstreichung verlieren, wenn aktiv */
.custom-nav .nav-link.active:hover{
  text-decoration: underline;
}


/* ==== Aktive Navigationslinks klar sichtbar ==== */
.custom-nav .nav-link.active{
  color:#FFFF00 !important;
  font-weight:700 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.custom-nav .nav-link.active:hover{
  text-decoration: underline !important;
}

.custom-nav .nav-link:hover { color: #FFFF00; text-decoration: none; }


/* Aktiver Menüpunkt: sichtbarer Unterstrich – robust ohne text-decoration */
.custom-nav .nav-link { position: relative; display: inline-block; padding-bottom: .25rem; }

.custom-nav .nav-link.active {
  font-weight: 700;
  color: #FFFF00 !important;
  box-shadow: inset 0 -3px 0 0 #FFFF00; /* gelbe Linie unten */
}

/* (Optional) beim Hover die Linie behalten */
.custom-nav .nav-link.active:hover {
  box-shadow: inset 0 -3px 0 0 #FFFF00;
}

.custom-nav .nav-link { position: relative; display: inline-block; padding-bottom: .35rem; }
.custom-nav .nav-link.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px; background:#FFFF00; border-radius:1px;
}

/* Aktiver Menüpunkt: fett + gelber Unterstrich */
nav.custom-nav .nav-link.active {
  font-weight: 700 !important;
  color: #FFFF00 !important;
  border-bottom: 3px solid #FFFF00 !important;
  padding-bottom: 2px;
}


/* === FINAL: Active nav underline (robust) === */
/* === Active nav underline: komplett weiß, dünn === */
nav.custom-nav .nav-link { 
  position: relative; 
  display:inline-block; 
  padding-bottom: .2rem; 
}

nav.custom-nav .nav-link.active {
  color: #ffffff !important;
  font-weight: 700 !important;
  border-bottom: 2px solid #ffffff !important; /* weißer Unterstrich */
}

nav.custom-nav .nav-link.active:hover { 
  border-bottom-color: #ffffff !important; 
}

/* Aktiver Menüpunkt: weißer Unterstrich */
/* ==== Menü: aktive Link-Markierung fixen (gelb komplett entfernen) ==== */

/* 1) Legacy-Styles neutralisieren (gelbe Linie/box-shadow etc.) */
nav.custom-nav .navbar-nav .nav-link.active,
nav.custom-nav .navbar-nav .nav-link.active:hover {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;   /* alte gelbe Linie sicher weg */
}

/* 2) Weiße Unterlinie nur über ::after zeichnen */
nav.custom-nav .navbar-nav .nav-link.active {
  position: relative;
  padding-bottom: .2rem;         /* kleiner Abstand zur Linie */
}
nav.custom-nav .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #ffffff;           /* rein weiß */
  border-radius: 1px;
}

/* 3) Verhindern, dass Hover wieder gelb färbt */
nav.custom-nav .navbar-nav .nav-link.active:hover {
  color: #ffffff !important;
}

/* ===== Portfolio ===== */
.portfolio-section{
  background: linear-gradient(135deg, #0f0f0f 0%, #151a2b 100%);
  padding: 100px 24px;
}
.portfolio-wrap{ max-width: 1280px; margin: 0 auto; }
.portfolio-heading{
  font-size: 40px; font-weight: 800; text-align: center; margin: 0 0 36px;
  color: #fff;
  letter-spacing: .2px;
}

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
}
@media (max-width: 1100px){ .portfolio-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 780px){  .portfolio-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){  .portfolio-grid{ grid-template-columns: 1fr; } }

.tile{
  position: relative; border-radius: 14px; overflow: hidden; cursor: pointer;
  background: #1a1f2f;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.16);
}
.tile img{
  width: 100%; height: 190px; object-fit: cover; display: block;
  filter: saturate(1.05) contrast(1.02);
}

/* Overlay (Name + Button) */
.tile figcaption{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.65) 28%, rgba(0,0,0,.0) 60%);
  opacity: 0; transition: opacity .25s ease;
}
.tile:hover figcaption{ opacity: 1; }

.tile-title{
  color: #fff; font-weight: 700; font-size: 16px; text-align: center; margin-bottom: 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

/* „Live-Vorschau“-Button im Overlay */
.tile .live-btn{
  appearance: none; border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(135deg,#00aaff 0%,#00ffd5 50%,#00ff88 100%);
  color: #fff; font-weight: 600; font-size: 14px;
  padding: 8px 14px; border-radius: 999px;
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.tile .live-btn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.tile .live-btn:active{ transform: translateY(0); }

/* kleine Variante, falls du sehr viele Kacheln hast */
@media (max-width: 360px){
  .tile img{ height: 160px; }
}

.navbar .navbar-brand span {
  font-weight: 700 !important; /* fett */
  color: #000 !important;      /* schwarz */
  font-size: 1.25rem;
}

#handler h1, 
#handler .hero-title {
  font-size: 2.50rem !important;
  font-weight: 700;
  color: #fff;
}

.navbar .navbar-brand img {
  height: 48px;   /* größer */
  width: auto;
  margin-right: 10px;
}

.navbar .navbar-brand .brand-text {
  font-weight: 700;
  color: #ffffff !important;  /* weiß */
  font-size: 1.25rem;
}

.navbar-nav .nav-link {
  font-size: 0.9rem;  /* kleiner als Standard */
  font-weight: 500;
}

/* Impressum Überschrift auf Mobile linksbündig */
@media (max-width: 768px) {
  #impressum h3 {
    text-align: left !important;
  }
}


/* === Leistungen: Bullet-Icons sauber ausrichten (mehrzeilig & einzeilig) === */
#leistungen ul.features{
  list-style: none; margin: 0; padding: 0;
}

/* FLEX-Layout statt absolute Positionierung */
#leistungen ul.features li{
  display: flex;
  align-items: flex-start;      /* Icon an den oberen Zeilenbeginn */
  gap: .65rem;                  /* Abstand Icon–Text */
  line-height: 1.9;
  margin-bottom: .7rem;
  padding-left: 0;              /* alte Einzüge aus */
  margin-left: 0;
}

/* Icon als flexibles Kästchen – KEIN position:absolute mehr */
#leistungen ul.features li::before{
  content: "";
  flex: 0 0 20px;
  width: 30px; height: 30px;
  background-repeat: no-repeat;
  background-size: 20px 30px;
  /* leicht nach unten, damit 1-zeilige Punkte optisch passen */
  margin-top: .20em;            /* bei Bedarf auf .12–.25em feinjustieren */
  /* dein weißer Kreis + Haken */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='none' stroke='%23FFFFFF' stroke-width='2'/%3E%3Cpath d='M4.5 9l3 3 6-6' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Alte, kollidierende Regeln sicher neutralisieren */
#leistungen ul.features li::before{
  position: static !important;  /* falls früher absolute war */
  top: auto !important; left: auto !important;
  transform: none !important;
}

/* Promo-Karte unter den Paketen */
.promo-card{
  background: rgba(0,0,0,0.6);
  border: 1px dashed rgba(255,255,255,0.35);
}
.promo-card .promo-badge{
  display:inline-block;
  padding: .2rem .55rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #111;
  background: #fff;
  border-radius: 999px;
}
.promo-card h3{ color:#fff; }
.promo-card p{ color:#ddd; }