/* ==============================
   Turbo Disco V2 - mods.css
   MITTEL modernisiert 2026
   Klar sichtbar moderner als V1
   Identitaet (Petrol, Struktur)
   bleibt erhalten
   ============================== */

/* ---- Open Sans lokal (kein Google-CDN) ---- */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/open-sans-latin.woff2") format("woff2");
}

/* ---- Design-Tokens ---- */
:root {
  --petrol:       #333333;
  --petrol-mid:   #4a4a4a;
  --petrol-light: #6a6a6a;
  --wa-green:     #25d366;
  --bg:           #f4f5f6;
  --white:        #ffffff;
  --text:         #1a1a1a;
  --border:       #d8dde0;
  --radius-card:  14px;
  --radius-btn:   50px;
  --shadow-card:  0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-hover: 0 6px 24px rgba(0,0,0,0.13);
  --font-main:    "Open Sans", Arial, Helvetica, sans-serif;
  --transition:   0.22s ease;
}

/* ---- Grundlayout ---- */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main) !important;
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
  background: var(--bg) !important;
}

.container {
  background: var(--white) !important;
  max-width: 1100px !important;
}

/* ---- Typographie ---- */
h1 {
  font-family: var(--font-main) !important;
  font-size: clamp(1.8rem, 5vw, 2.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--petrol) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 0.6em !important;
  text-transform: none !important;
}

h2 {
  font-family: var(--font-main) !important;
  font-size: clamp(1.4rem, 3.5vw, 2.1rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: var(--petrol) !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 0.5em !important;
  text-transform: none !important;
}

h3 {
  font-family: var(--font-main) !important;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--petrol) !important;
  background: none !important;
  padding: 0 0 0.3em !important;
  border-bottom: 2px solid var(--petrol) !important;
  margin-bottom: 0.8em !important;
  text-transform: none !important;
}

h4 {
  font-family: var(--font-main) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--petrol) !important;
  text-transform: none !important;
}

p {
  font-family: var(--font-main) !important;
  line-height: 1.8 !important;
  color: var(--text) !important;
  margin-bottom: 1.1em !important;
}

a {
  color: var(--petrol) !important;
  transition: color var(--transition), opacity var(--transition) !important;
}
a:hover {
  color: var(--petrol-light) !important;
  text-decoration: none !important;
}

/* ---- Header: sticky + Petrol-Trennlinie ---- */
#header {
  background: var(--white) !important;
  border-bottom: 1px solid #e7e9eb !important;
  padding-top: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important;
}

#header .container {
  box-shadow: none !important;
  padding: 8px 24px !important;
}

#logo img {
  max-height: 72px !important;
  width: auto !important;
}

/* ---- Navigation ---- */
#globalnav > li > a,
#globalnav > li > span {
  font-family: var(--font-main) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--petrol) !important;
  padding: 7px 13px !important;
  border-radius: 6px !important;
  transition: background var(--transition), color var(--transition) !important;
}

#globalnav > li > a:hover {
  background: var(--petrol) !important;
  color: var(--white) !important;
  opacity: 1 !important;
}

#globalnav li.act > a,
#globalnav li.act > span {
  background: var(--petrol) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
  padding: 7px 13px !important;
}

/* Flyout-Untermenus */
#globalnav .flyout > ul {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-hover) !important;
  padding: 6px 0 !important;
}

#globalnav .flyout li a {
  font-family: var(--font-main) !important;
  font-size: 0.87rem !important;
  color: var(--petrol) !important;
  padding: 7px 14px !important;
  transition: background var(--transition) !important;
}

#globalnav .flyout li a:hover {
  background: rgba(0,0,0,0.08) !important;
  color: var(--petrol) !important;
}

/* ---- Hero Slider: full-bleed, prominenter ---- */
/* Der Slider sitzt in .container > #content > .row > .col.span12 > #window
   Wir brechen ihn mit negativen Margins aus dem Container aus */
#window,
#content > .row:first-child .slider,
.col.span12 .slider:only-child,
.col.span12 #window {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  overflow: hidden !important;
}

.slider, #window {
  overflow: hidden !important;
  position: relative !important;
}

.slider .stage { font-size: 0 !important; }

.slider img,
#window img,
.slider .step img {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  border: 0 !important;
}

/* Petrol-Trennlinie unter Slider */
.slider::after,
#window::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--petrol) 0%, var(--petrol-light) 100%);
  pointer-events: none;
}

/* Erste Row im #content soll keinen Abstand nach oben haben */
#content > .row:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- Sektionen: Luft + leichter Zebra-Rhythmus ---- */
section, .section {
  padding: 3.5rem 2rem !important;
  margin: 0 !important;
  border-top: none !important;
}

/* Sanfter Zebra-Rhythmus nur auf direkte Kinder von #content */
#content > section:nth-child(even),
#content > .section:nth-child(even) {
  background: #f8fafb !important;
}

#content .row, #content .row-full {
  margin-bottom: 2rem !important;
}

/* ---- Cards statt harter .textborder-Rahmen ---- */
.textborder {
  border: none !important;
  box-shadow: var(--shadow-card) !important;
  border-radius: var(--radius-card) !important;
  padding: 2rem 2.25rem !important;
  background: var(--white) !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  margin-bottom: 1.5rem !important;
}

.textborder:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-3px) !important;
}

/* h3 in Card: keinen extra Unterstrich */
.textborder h3 {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0.5em !important;
  font-size: 1.12rem !important;
}

/* ---- CTAs / Buttons ---- */
.button, input[type="submit"], button[type="submit"], a.button {
  font-family: var(--font-main) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  background: var(--petrol) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--radius-btn) !important;
  padding: 0.7rem 1.9rem !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22) !important;
  text-decoration: none !important;
}

.button:hover, input[type="submit"]:hover, a.button:hover {
  background: var(--petrol-mid) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3) !important;
  color: var(--white) !important;
}

/* ---- Formularfelder ---- */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
  font-family: var(--font-main) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 1rem !important;
  transition: border-color var(--transition) !important;
  background: var(--white) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--petrol) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.12) !important;
}

/* ---- Galerie: modernes Raster + Hover-Zoom ---- */
.galerie-grid, .gallery, #gallery,
[id*="galerie"], [class*="galerie"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
}

.galerie-grid img, .gallery img, #gallery img,
[id*="galerie"] img, [class*="galerie"] img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  cursor: pointer !important;
}

.galerie-grid img:hover, .gallery img:hover, #gallery img:hover,
[id*="galerie"] img:hover, [class*="galerie"] img:hover {
  transform: scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

/* ---- Preistabellen ---- */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-main) !important;
  margin-bottom: 1.5rem !important;
}

table th {
  background: var(--petrol) !important;
  color: var(--white) !important;
  padding: 11px 16px !important;
  font-weight: 600 !important;
  text-align: left !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

table td {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 0.95rem !important;
  color: var(--text) !important;
}

table tr:last-child td { border-bottom: none !important; }
table tr:nth-child(even) { background: #f8fafb !important; }
table tr:hover { background: rgba(0,0,0,0.04) !important; }

/* ---- Footer dunkel (Petrol) ---- */
#footer { background: var(--petrol) !important; }

#globalfooter {
  background: var(--petrol) !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 2rem 0 !important;
  font-family: var(--font-main) !important;
  font-size: 0.87rem !important;
  box-shadow: none !important;
  white-space: normal !important;
}

#globalfooter a {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  width: auto !important;
  float: none !important;
  display: inline-block !important;
  margin: 3px 2px !important;
  transition: color var(--transition), background var(--transition) !important;
  text-decoration: none !important;
}

#globalfooter a:hover {
  color: var(--white) !important;
  background: rgba(255,255,255,0.12) !important;
}

.copyright {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important;
}

/* ---- WhatsApp Floating Button ---- */
.wa-float {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 60px !important;
  height: 60px !important;
  background: var(--wa-green) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.28) !important;
  z-index: 9999 !important;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  text-decoration: none !important;
}

.wa-float:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35) !important;
}

/* ---- Scroll-Reveal ---- */
.td-hidden {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.td-hidden.td-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Responsive Mobile ---- */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; font-size: 15px !important; }
  #header { position: relative !important; }
  section, .section { padding: 2.25rem 1.25rem !important; }
  .textborder { padding: 1.5rem 1.125rem !important; border-radius: 10px !important; }
  h1 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.2rem, 5vw, 1.6rem) !important; }
  .slider img, #window img { max-height: 260px !important; }
  .galerie-grid, .gallery, #gallery {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  .galerie-grid img, .gallery img, #gallery img { height: 125px !important; }
  table { font-size: 0.85rem !important; }
  table th, table td { padding: 8px 10px !important; }
}

@media (max-width: 480px) {
  section, .section { padding: 1.75rem 0.9rem !important; }
  .textborder { padding: 1.25rem 0.9rem !important; }
  .galerie-grid, .gallery, #gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Fix 13.06.: Blocksatz/Silbentrennung reisst Text auf dem Handy auseinander -> linksbuendig */
.text, .text_frontpage, .textborder, .textborder p, .text p, .text_frontpage p, p, li {
  text-align: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  -ms-hyphens: manual !important;
}

/* Fix 13.06.: cleaner / ruhiger — Scroll-Reveal aus, Hover dezenter */
.td-hidden, .td-hidden.td-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
.wa-float:hover { transform: scale(1.04) !important; }

/* ============================================================
   Fix 14.06.: Mobile-Layout fluid machen.
   Andy-Feedback "warum so schlecht am Handy?": main.css naglet
   .container in den Media-Queries auf feste 480px / 320px
   (altes eZ-Publish-Stufen-Raster) -> Inhalt klebt in schmaler
   Spalte mit leerem Rand statt full-bleed. Hier auf 100% gezogen.
   Greift nur <=768px, Desktop bleibt unangetastet.
   ============================================================ */
@media (max-width: 768px) {
  .container,
  body.fixed .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .container .row,
  body.fixed .container .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #content .col,
  .span1, .span2, .span3, .span4, .span5 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  #header .container { padding-left: 14px !important; padding-right: 14px !important; }
}

/* Fix 14.06.: fixed wa-float blaeht Doc-Breite auf (nur Screenshot-Artefakt, aber sauber halten) */
@media (max-width: 768px) { html { overflow-x: hidden !important; } }

/* Fix 14.06.: Desktop begrenzt Slider auf Bildbreite (zentriert) -> kein zu-hoher Hero.
   Mobile bleibt full-bleed (Basis-Block). Identische Selektoren = klare Kaskade. */
@media (min-width: 769px) {
  #window,
  #content > .row:first-child .slider,
  .col.span12 .slider:only-child,
  .col.span12 #window {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 1000px !important;
  }
}

/* Fix 14.06.: Moderne Galerie als CSS-Grid (Andys 11 kuratierte Event-Fotos).
   Ersetzt das alte inline-teaser-Layout. */
.popup-gallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 10px !important;
}
.popup-gallery > span { display: none !important; }
.popup-gallery a {
  display: block !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  cursor: pointer !important;
}
.popup-gallery a img {
  width: 100% !important;
  height: 210px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform .3s ease !important;
}
.popup-gallery a:hover img { transform: scale(1.06) !important; }
.popup-gallery .contenthover { display: none !important; }
@media (max-width: 600px) {
  .popup-gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .popup-gallery a img { height: 150px !important; }
}

/* Fix 14.06.: alte .gallery-Grid-Regel traf die umschliessende SECTION.gallery und schob die Galerie nach rechts. Wrapper zurueck auf block, nur .popup-gallery ist das Grid. */
section.gallery, .no-border.gallery { display: block !important; }

/* Fix 15.06.: eZ-Publish negative .row-margins (Gutter-System) schoben Spalten/Karten ueber den Container hinaus (Ueberlappung rechts). Mit border-box + col-padding nicht noetig -> neutralisieren. Slider-full-bleed haengt an #window, bleibt. */
.container .row, #content .row .row { margin-left: 0 !important; margin-right: 0 !important; }

/* Fix 15.06.: feste .row width:980px (main.css) passte nicht in die durch mods.css gepolsterte Section (2rem) -> Ueberlauf rechts. Row fluid machen. */
.container .row { width: auto !important; max-width: 100% !important; }

/* Fix 15.06.: contenthover.js klont jedes Galerie-Foto in .ch_wrapper (+ altes Petrol-Overlay) -> 11 Fotos rendern doppelt (22). Modernes Grid will nur das Original-img mit CSS-Hover-Zoom. Klon ausblenden, Original sichern. Root zusaetzlich in Galerie.html (Init auf .not(.popup-gallery img) gescoped). */
.popup-gallery a .ch_wrapper { display: none !important; }
.popup-gallery a > img { display: block !important; }

/* Fix 15.06. (Andy): mobiles Menue als Hamburger (Animation 15) — .nav_mobile war voll ausgeklappt = zu grosser Bereich. */
@media (max-width: 768px){
  #nav-burger{ display:flex !important; flex-direction:row; align-items:center; justify-content:center; gap:11px;
    width:auto; min-width:200px; max-width:88%; padding:12px 26px; margin:8px auto 4px; box-sizing:border-box;
    background:#f4f5f6 !important; border:1px solid #d8dde0 !important; border-radius:50px; cursor:pointer; }
  #nav-burger .bi{ display:flex; flex-direction:column; gap:4px; width:22px; flex:0 0 auto; }
  #nav-burger .bi i{ display:block; width:100%; height:2.5px; background:#333; border-radius:2px;
    transition:transform .3s ease, opacity .2s ease; }
  #nav-burger .bl{ font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#333; }
  #nav-burger.open .bi i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  #nav-burger.open .bi i:nth-child(2){ opacity:0; }
  #nav-burger.open .bi i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  ul#globalnav.nav_mobile{ max-height:0 !important; overflow:hidden !important; margin:0 auto !important;
    transition:max-height .42s ease; }
  ul#globalnav.nav_mobile.open{ max-height:640px !important; }
  ul#globalnav.nav_mobile li{ opacity:0; transform:translateY(-6px);
    transition:opacity .3s ease, transform .3s ease; }
  ul#globalnav.nav_mobile.open li{ opacity:1; transform:none; }
  ul#globalnav.nav_mobile.open li:nth-child(2){ transition-delay:.05s; }
  ul#globalnav.nav_mobile.open li:nth-child(3){ transition-delay:.10s; }
  ul#globalnav.nav_mobile.open li:nth-child(4){ transition-delay:.15s; }
  ul#globalnav.nav_mobile.open li:nth-child(5){ transition-delay:.20s; }
  ul#globalnav.nav_mobile.open li:nth-child(6){ transition-delay:.25s; }
}
@media (min-width: 769px){ #nav-burger{ display:none !important; } }

/* Fix 15.06. (Andy): "alles mittig" auf Mobil — Andy-Zentrierung */
@media (max-width: 768px){
  #logo, #logo img{ float:none !important; display:block !important; margin-left:auto !important; margin-right:auto !important; }
  #logo{ text-align:center !important; padding-left:0 !important; padding-right:0 !important; }
  .phone.mobile{ text-align:center !important; }
  .phone.mobile img.flip{ float:none !important; display:inline-block !important; }
  #content .textborder, #content .head, #content .head h3, #content .text, #content .text p{ text-align:center !important; }
}

/* Anim 02 (Andy 15.06.): grauer Balken faehrt von rechts ein, DANN Farbe von links (Richtungs-Wipe) */
#logo a{ display:inline-block; position:relative; }
#logo a::after{ content:""; position:absolute; inset:0; pointer-events:none; clip-path:inset(0 0 0 100%);
  -webkit-backdrop-filter:grayscale(1); backdrop-filter:grayscale(1); }
@keyframes barInRight{ 0%{ clip-path:inset(0 0 0 100%); } 100%{ clip-path:inset(0 0 0 0); } }
@keyframes colorFromLeft{ 0%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 0 100%); } }
@media (prefers-reduced-motion: no-preference){
  #logo::after{ animation:barInRight .7s ease-out both; }
  #logo a::after{ animation:colorFromLeft 1.1s ease-out .15s both; }
}
/* Anim 04 (Andy): Scroll-Reveal — Endzustand sichtbar (data-reveal nur per JS gesetzt, no-JS = sichtbar) */
@keyframes tdSlideUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  [data-reveal]:not(.in-view){ opacity:0; }
  [data-reveal].in-view{ animation:tdSlideUp .6s cubic-bezier(.22,.7,.2,1) both; }
}

/* Fix 15.06. (Andy): mobiles Menue heller/integrierter statt dunkler Fremdkoerper — Andy: Menue heller */
@media (max-width: 768px){
  ul#globalnav.nav_mobile.open{ background:#fff !important; border:1px solid #d8dde0 !important;
    border-radius:12px !important; box-shadow:0 4px 16px rgba(0,0,0,.07) !important;
    width:auto !important; max-width:320px; margin:8px auto 0 !important; padding:5px 0 !important; }
  ul#globalnav.nav_mobile li{ border:0 !important; border-bottom:1px solid #eef0f1 !important; }
  ul#globalnav.nav_mobile li:last-child{ border-bottom:0 !important; }
  ul#globalnav.nav_mobile li > a, ul#globalnav.nav_mobile li > span{
    display:block !important; padding:12px 18px !important; text-align:center !important;
    background:transparent !important; color:#333 !important; border-radius:0 !important;
    font-weight:600 !important; }
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{
    background:#eceef0 !important; color:#1a1a1a !important; }
}

/* Fix 15.06. (Andy): Telefon-Block raus (Icon zu WhatsApp-aehnlich) + CTA "Kostenlos anfragen" unter Slider + Menue-Schrift einheitlich */
.phone.desktop, .phone.mobile { display:none !important; }
@media (max-width: 768px){
  #nav-burger .bl,
  ul#globalnav.nav_mobile li > a, ul#globalnav.nav_mobile li > span{
    font-family: var(--font-main) !important; letter-spacing:.05em !important; text-transform:uppercase !important; }
  #nav-burger .bl{ font-weight:600 !important; }
}
.td-cta .cta-panel{ background:#fff; border:1px solid #d8dde0; border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.06); padding:26px 22px; text-align:center; max-width:560px; margin:0 auto; }
.td-cta .cta-text{ margin:0 0 16px; color:#5a5e62; font-size:1rem; line-height:1.5; }
.td-cta .cta-btn{ display:inline-flex; align-items:center; gap:10px; background:#25d366 !important; color:#fff !important; font-weight:700; font-size:1.04rem;
  letter-spacing:.02em; padding:15px 36px; border-radius:50px; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .22s ease, box-shadow .22s ease, background .22s ease; }
.td-cta .cta-btn:hover{ transform:translateY(-3px); background:#1eb858; box-shadow:0 10px 24px rgba(0,0,0,.24); }

.td-cta .cta-btn svg{ width:20px; height:20px; flex:0 0 auto; }

/* Fix 15.06. (Andy): Header einheitlich (Desktop wie Mobil) — zentriertes Logo + ausklappbares MENÜ; CTA nur Button */
ul#globalnav.nav_desktop { display:none !important; }
ul#globalnav.nav_mobile  { display:block !important; }
#nav-burger{ display:flex !important; flex-direction:row; align-items:center; justify-content:center; gap:11px;
  width:auto; min-width:200px; max-width:88%; padding:12px 26px; margin:8px auto 4px; box-sizing:border-box;
  background:#f4f5f6 !important; border:1px solid #d8dde0 !important; border-radius:50px; cursor:pointer; }
#nav-burger .bi{ display:flex; flex-direction:column; gap:4px; width:22px; flex:0 0 auto; }
#nav-burger .bi i{ display:block; width:100%; height:2.5px; background:#333; border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
#nav-burger .bl{ font-family:var(--font-main); font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#333; }
#nav-burger.open .bi i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
#nav-burger.open .bi i:nth-child(2){ opacity:0; }
#nav-burger.open .bi i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
ul#globalnav.nav_mobile{ max-height:0 !important; overflow:hidden !important; margin:0 auto !important; transition:max-height .42s ease; }
ul#globalnav.nav_mobile.open{ max-height:640px !important; background:#fff !important; border:1px solid #d8dde0 !important;
  border-radius:12px !important; box-shadow:0 4px 16px rgba(0,0,0,.07) !important; width:auto !important; max-width:320px; margin:8px auto 0 !important; padding:5px 0 !important; }
ul#globalnav.nav_mobile li{ border:0 !important; border-bottom:1px solid #eef0f1 !important; opacity:0; transform:translateY(-6px); transition:opacity .3s ease, transform .3s ease; }
ul#globalnav.nav_mobile li:last-child{ border-bottom:0 !important; }
ul#globalnav.nav_mobile.open li{ opacity:1; transform:none; }
ul#globalnav.nav_mobile li > a, ul#globalnav.nav_mobile li > span{ display:block !important; padding:12px 18px !important; text-align:center !important;
  background:transparent !important; color:#333 !important; border-radius:0 !important; font-family:var(--font-main) !important; font-weight:600 !important; letter-spacing:.05em !important; text-transform:uppercase !important; }
ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{ background:#eceef0 !important; color:#1a1a1a !important; }
/* Logo zentriert auf allen Breiten (leere Telefon-Spalte raus, Logo-Spalte voll) */
#header .row > .col.span5 { display:none !important; }
#header .row > .col.span7 { width:100% !important; float:none !important; }
#logo, #logo a, #logo img { float:none !important; }
#logo { text-align:center !important; padding:0 !important; }
#logo img { margin-left:auto !important; margin-right:auto !important; display:block !important; }
/* CTA: nur der gruene Button, keine weisse Karte/Text drumherum */
.td-cta .cta-panel{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }

/* Fix 15.06. (Andy): alte links-fixierte logo_animation-Linie passte nicht zum zentrierten Logo -> aus + zentrierte graue Linie unterm Logo */
#animationSandbox{ display:none !important; }
#logo{ position:relative; }
#logo::after{ content:""; display:block; width:min(300px,80%); height:5px; margin:6px auto 0; border-radius:3px;
  background:linear-gradient(90deg, rgba(150,156,161,0), rgba(150,156,161,.55) 25%, rgba(150,156,161,.55) 75%, rgba(150,156,161,0)); }

/* Fix 15.06. (Andy): Logo etwas tiefer + Menue/Tel-Zeile unter Slider + Foto ohne weissen Rahmen */
#header .container{ padding-top:18px !important; }
#globalnav-wrapper{ background:transparent !important; padding:0 !important; }
.td-menurow{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:8px; margin:14px 8px 8px; max-width:none; }
.td-menurow > #nav-burger, .td-menurow > .td-wa{ flex:1 1 0; min-width:0 !important; max-width:none !important; width:auto !important; margin:0 !important; }
.td-tel{ font-family:var(--font-main); font-weight:600; font-size:14px; line-height:1.25; color:#333; text-decoration:none; display:flex; flex-direction:column; text-align:center; }
.td-photo{ background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
.td-photo .head{ display:none !important; }
.td-photo .text{ padding:0 !important; }
.td-photo img{ border:0 !important; box-shadow:none !important; border-radius:8px; }

/* Fix 15.06. (Andy): graue Linie weg + gleicher Abstand oben/unten + WhatsApp-Button unter Menue */
#header .container{ padding-top:20px !important; padding-bottom:20px !important; }
#globalnav-wrapper{ text-align:center; }
.td-wa{ display:flex !important; align-items:center; justify-content:center; gap:6px;
  background:#f4f5f6 !important; border:1px solid #d8dde0 !important; color:#333 !important;
  font-family:var(--font-main) !important; font-weight:600 !important; font-size:13px !important; letter-spacing:.05em;
  text-transform:uppercase !important;
  padding:11px 8px !important; border-radius:50px !important; text-decoration:none; box-shadow:none !important; transition:background .22s ease; }
.td-wa:hover{ background:#eceef0 !important; transform:none !important; box-shadow:none !important; }
.td-wa svg{ width:22px; height:22px; flex:0 0 auto; color:#25d366 !important; }
.td-wa .wal{ line-height:1.15; }

/* Fix 15.06. (Andy): Extra-Abstand Header->Slider weg, damit oben/unten symmetrisch — Andy-Symmetrie */
#main, .container#main{ padding-top:0 !important; margin-top:0 !important; }
#content{ padding-top:0 !important; margin-top:0 !important; }
#header{ margin-bottom:0 !important; }

/* Fix 15.06. (Andy): Header-Schatten (fuzzy grauer Balken im Spalt) weg — Andy: Header-Schatten weg */
#header{ box-shadow:none !important; }

/* Fix 15.06. (Andy): dunkler 6px-Petrol-Balken unter Slider (.slider::after/#window::after) raus + Abstand Menue */
.slider::after, #window::after{ display:none !important; }
#globalnav-wrapper{ margin-top:-8px !important; }

/* Fix 15.06. (Andy): Pills hatten EXAKT Body-Farbe (244,245,246) + fast unsichtbaren Rahmen -> verschwammen. Andy: hoeher + duenne dunkle Linie (Kontrast wie Welcome-Feld, das schon #1a1a1a-Rahmen hat). */
#nav-burger, .td-wa{ border:1px solid #1a1a1a !important; }
#nav-burger{ padding-top:15px !important; padding-bottom:15px !important; }
.td-wa{ padding-top:15px !important; padding-bottom:15px !important; }

/* Fix 15.06. (Andy): Welcome-Kasten (der Kasten mit der Schrift) etwas groesser + naeher an die Raender (~34px Seitenrand -> ~18px). */
#content .col.span8 > .textborder{ margin-left:-16px !important; margin-right:-16px !important; padding:26px 20px !important; }

/* Fix 15.06. (Andy): Abstand UNTER der Pill-Zeile = Abstand DARUEBER (war 88px vs 26px). Quelle: Wrapper-Row margin-bottom 32px + Welcome-Section padding-top 28px -> beide 0, bleibt ~28px (= fixe Zeile-im-Wrapper) ≈ gapAbove 26px. */
#globalnav-wrapper > .row{ margin-bottom:0 !important; }
#globalnav-wrapper + section.no-border{ padding-top:0 !important; }

/* Fix 15.06. (Andy): Logo-Anim beim Laden langsamer (war ~1,25s, 'bekommt man kaum mit'). Balken .7->1.0s, Farbe sequenziell danach (Delay .9s, 1.5s) -> ~2,4s, deutlich sichtbar. */
@media (prefers-reduced-motion: no-preference){
  #logo::after{ animation:barInRight 1.0s ease-out both !important; }
  #logo a::after{ animation:colorFromLeft 1.5s ease-out .9s both !important; }
}

/* Fix 15.06. (Andy): Welcome-Kasten hatte border:0 (nur Schatten) -> duenner schwarzer Rand wie die Buttons. */
#content .col.span8 > .textborder{ border:1px solid #1a1a1a !important; border-radius:8px !important; }

/* Fix 15.06. (Andy): Welcome-Kasten war zu 'riesig' -> NICHT Text loeschen (Rueckgaengig), sondern Absatz-Zwischenraeume + Innenabstand verdichten. */
#content .col.span8 > .textborder{ padding-top:18px !important; padding-bottom:18px !important; }
#content .col.span8 > .textborder .head h3{ margin:0 0 10px !important; line-height:1.3 !important; }
#content .col.span8 > .textborder .text_frontpage p{ margin:0 0 9px !important; line-height:1.45 !important; }
#content .col.span8 > .textborder .text_frontpage p:last-child{ margin-bottom:0 !important; }

/* Fix 15.06. (Andy Desktop): Seite wirkte leer 'ohne Rahmen' — weisses #main-Blatt (980px) ging im fast gleich hellen Body unter. Body grauer + #main sichtbar rahmen (Logo-Header bleibt darueber). */
@media (min-width:769px){
  body{ background:#e5e8ea !important; }
  #main, .container#main{
    background:#fff !important;
    border:1px solid #d3d7da !important;
    border-radius:12px !important;
    box-shadow:0 6px 30px rgba(0,0,0,.08) !important;
    overflow:hidden !important;
    padding-bottom:30px !important;
    margin:18px auto 34px !important;
  }
}
/* Fix 15.06. (Andy): Pills etwas grauer (beide Plattformen). */
#nav-burger, .td-wa{ background:#e4e7ea !important; }
#nav-burger:hover, .td-wa:hover{ background:#dadee1 !important; }
/* Fix 15.06. (Andy): Menue-Unterpunkt beim Hover/Klick dunkler. */
ul#globalnav li a:hover, ul#globalnav li a:focus{ background:#d3d8db !important; color:#1a1a1a !important; }
ul#globalnav li a:active, ul#globalnav li.act > a{ background:#c1c7cb !important; color:#1a1a1a !important; }

/* Fix 15.06. (Andy refine): Desktop fuellte links/rechts zu wenig (Container nur 980px) -> auf 1140 verbreitert; Slider bis 1100 (Bild 980 nativ, 1.12x = ok). Pills deutlicher grauer. */
@media (min-width:769px){
  #main, .container#main{ width:auto !important; max-width:1140px !important; }
  #window, #content > .row:first-child .slider, .col.span12 .slider:only-child, .col.span12 #window{ max-width:1100px !important; }
}
#nav-burger, .td-wa{ background:#dce0e3 !important; }
#nav-burger:hover, .td-wa:hover{ background:#d2d7da !important; }

/* Fix 15.06. (Andy): Slider war durch Hochskalieren (980 nativ -> 1100) unscharf bei 125% -> zurueck auf native 980 (scharf), zentriert im 1140-Rahmen. */
@media (min-width:769px){
  #window, #content > .row:first-child .slider, .col.span12 .slider:only-child, .col.span12 #window{ max-width:980px !important; }
}
/* Fix 15.06. (Andy): Foto + Welcome-Feld auf gleiche Hoehe (Row -> Flex stretch, Foto fuellt per object-fit). Desktop only. */
@media (min-width:769px){
  #content .row:has(> .col.span4):has(> .col.span8){ display:flex !important; align-items:stretch !important; }
  #content .col.span4 > .td-photo, #content .col.span4 > .td-photo .text{ height:100% !important; }
  #content .col.span4 > .td-photo .text{ display:flex !important; }
  #content .col.span4 > .td-photo img{ height:100% !important; width:100% !important; object-fit:cover !important; object-position:center !important; border-radius:8px !important; }
}

/* Fix 15.06. (Andy): Slider abgerundete Ecken (Konsistenz mit Rahmen/Boxen 8-12px). Desktop only (mobil bleibt full-bleed). */
@media (min-width:769px){
  #window, .slider{ border-radius:8px !important; overflow:hidden !important; }
}

/* Fix 15.06. (Andy): aktives Menue-Item dunkler — Regel Z.637/679 (#eceef0, .nav_mobile-Spezifitaet) ueberschrieb meine. Gleiche Spezifitaet, spaeter -> gewinnt. */
ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{ background:#c1c7cb !important; color:#1a1a1a !important; }

/* Fix 15.06. (Andy): Grau in den Pills 'passt ueberhaupt nicht' -> Kontrast ueber Schatten statt Grau-Fuellung. Weisse Pills + weiche Elevation, kein harter schwarzer Rand (nur dezente Hairline). */
#nav-burger, .td-wa{
  background:#ffffff !important;
  border:1px solid #ebedef !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important;
  transition:box-shadow .2s ease, transform .2s ease !important;
}
#nav-burger:hover, .td-wa:hover{
  background:#ffffff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.17), 0 2px 6px rgba(0,0,0,.10) !important;
  transform:translateY(-1px) !important;
}

/* Fix 15.06. (Andy): andere Bloecke auch Schatten-basiert (konsistent mit Pills) — schwarzen Rand weg, weiss + weiche Elevation. NICHT das Foto (.td-photo). */
#content .textborder:not(.td-photo){
  background:#fff !important;
  border:1px solid #ebedef !important;
  box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important;
}
/* Fix 15.06. (Andy): Foto KEIN Schatten, aber besser einpassen — Inset statt buendig auf der Blatt-Kante (Desktop). */
@media (min-width:769px){
  #content .col.span4 > .td-photo{ margin:14px 0 !important; height:calc(100% - 28px) !important; box-shadow:none !important; }
  #content .col.span4 > .td-photo img{ border-radius:10px !important; }
}

/* Fix 15.06. (Andy): Welcome-Rahmen von schwarz auf Hairline (frueher gesetzte #1a1a1a-Regel hatte hoehere Spezifitaet) — passend zur Schatten-Optik. */
#content .col.span8 > .textborder{ border:1px solid #ebedef !important; }

/* Fix 15.06. (Andy): mehr Abstand zwischen Menue-Zeile und Content (Textblock+Foto) auf Desktop — war nur 8px. Section nach dem Menue-Wrapper bekommt padding-top. (Mobil bleibt kompakt/symmetrisch.) */
@media (min-width:769px){
  #globalnav-wrapper + section.no-border{ padding-top:36px !important; }
}

/* Fix 15.06. (Andy): mehr Abstand zwischen Slider (Bild oben) und Menue/WhatsApp-Zeile auf Desktop — war 14px. Wrapper margin-top -8 -> 20 (Delta +28 -> ~42px, passt zu 44px darunter). Mobil unveraendert. */
@media (min-width:769px){
  #globalnav-wrapper{ margin-top:20px !important; }
}

/* Fix 15.06. (Andy): Content im weissen Blatt vertikal ausbalancieren — oben (Blatt->Slider) war 1px, unten (Content->Blatt) 119px. Ueberschuss unten kuerzen + symmetrisches Padding oben/unten (~50px). Desktop only. */
@media (min-width:769px){
  #main, .container#main{ padding-top:50px !important; padding-bottom:50px !important; }
  #content section.no-border:last-of-type{ padding-bottom:0 !important; }
  #content .col.span8 > .textborder{ margin-bottom:0 !important; }
}

/* Fix 15.06. (Andy): restliche Trailing-Margins (Spalten/Row) unter dem Content nullen, damit unten = oben (~51px). */
@media (min-width:769px){
  #content .col.span8, #content .col.span4{ margin-bottom:0 !important; }
  #content > .row:last-child, #content .row:last-of-type{ margin-bottom:0 !important; }
}

/* Fix 15.06. (Andy): einheitlicher Schatten-Effekt auf Galerie-Kacheln + Videos; Start-Foto doch MIT Schatten (revidiert 'kein Schatten'); Galerie-Hero-Bild. */
.popup-gallery a{ box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important; }
#content iframe[src*='youtube']{ box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important; border-radius:8px !important; display:block; }
#content .col.span4 > .td-photo{ box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important; border-radius:10px !important; }
.td-hero-img{ display:block; width:100%; height:auto; border-radius:8px; }
@media (min-width:769px){ .td-hero{ max-width:980px; margin-left:auto !important; margin-right:auto !important; } }

/* Fix 15.06.: Hero-Bild auf volle Breite zwingen (Theme-img-Regel druckte es auf 193px). Cap 980 (Bild nativ 980, kein Upscale), zentriert wie Slider. */
.td-hero{ width:100% !important; }
.td-hero .col.span12{ width:100% !important; float:none !important; }
img.td-hero-img{ width:100% !important; max-width:980px !important; height:auto !important; margin:0 auto !important; }

/* Fix 15.06. (Andy): Start-Foto-Schatten deutlicher — gleicher Wert wie Boxen war auf dem hellen Foto kaum sichtbar. Etwas kraeftiger, damit klar wahrnehmbar. */
#content .col.span4 > .td-photo{ box-shadow:0 5px 16px rgba(0,0,0,.22), 0 2px 6px rgba(0,0,0,.12) !important; }

/* Fix 15.06. (Andy): Foto wieder exakt gleich gross wie der Kasten links — Inset aus (20) raus (Schatten gibt jetzt die Definition statt des Abstands). */
@media (min-width:769px){
  #content .col.span4 > .td-photo{ margin-top:0 !important; margin-bottom:0 !important; height:100% !important; }
}

/* Fix 15.06. (Andy): zu blass / fehlt Kontrast -> duenne dunkle Umrandung an Pills + Boxen + Foto (Schatten bleibt). */
#nav-burger, .td-wa,
#content .textborder:not(.td-photo),
#content .col.span8 > .textborder,
#content .col.span4 > .td-photo{ border:1px solid #1a1a1a !important; }

/* Fix 15.06. (Andy): geoeffnetes Menue — weisser Rand oben/unten weg + sichtbare Trennlinien zwischen den Punkten. */
ul#globalnav.nav_mobile.open{ padding:0 !important; }
ul#globalnav.nav_mobile li{ border-bottom:1px solid #c4c9cd !important; }
ul#globalnav.nav_mobile li:last-child{ border-bottom:0 !important; }

/* Fix 15.06. (Andy): Desktop alles ~110% groesser. */
@media (min-width:769px){
  #main, .container#main{ zoom:1.1; }
  #logo{ zoom:1.1; }
}

/* Fix 15.06. (Andy Desktop): Menue/WhatsApp-Buttons schmaler (nicht breiter als Slider 980) + kleinerer Eck-Radius. */
@media (min-width:769px){
  .td-menurow{ max-width:980px !important; margin-left:auto !important; margin-right:auto !important; }
  #nav-burger, .td-wa{ border-radius:10px !important; }
}
/* Andy: statt weiss lieber grau (beide Plattformen). */
#nav-burger, .td-wa{ background:#e6e9eb !important; }
#nav-burger:hover, .td-wa:hover{ background:#dde1e4 !important; }

/* Fix 15.06. (Andy): Content-Reihen/Boxen + Galerie-Hero auf Slider-Breite vereinheitlichen (alle gleich breit, zentriert, nicht breiter als Slider). Desktop only. */
@media (min-width:769px){
  #content > .row, #content .row{ max-width:980px !important; margin-left:auto !important; margin-right:auto !important; }
}

/* Fix 15.06. (Andy): Section-Seitenpadding nullen, damit ALLE Boxen + Hero exakt Slider-Breite haben (war 964 vs 1034). Desktop. */
@media (min-width:769px){
  #content section{ padding-left:0 !important; padding-right:0 !important; }
  .td-hero{ padding-left:0 !important; padding-right:0 !important; }
}

/* Fix 15.06. (Andy): Welcome-Heading auf Desktop zentrieren (war left-aligned -> wirkte nach links verrutscht). */
@media (min-width:769px){
  #content .col.span8 > .textborder .head h3{ text-align:center !important; }
}

/* Fix 15.06. (Andy): Desktop — Pills durch horizontale Nav-Leiste ersetzen (Home/Leistungen/Fotoservice/Galerie/Preise/WhatsApp/Kontakt). Mobil unveraendert. */
@media (min-width:769px){
  .td-menurow, #nav-burger{ display:none !important; }
  ul#globalnav.nav_mobile{
    max-height:none !important; overflow:visible !important;
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    justify-content:stretch !important; align-items:stretch !important;
    width:auto !important; max-width:980px !important; margin:0 auto !important; padding:0 !important;
    background:#e6e9eb !important; border:1px solid #1a1a1a !important; border-radius:10px !important;
    box-shadow:0 2px 8px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08) !important; }
  ul#globalnav.nav_mobile li{
    flex:1 1 0 !important; border:0 !important; border-right:1px solid #c4c9cd !important;
    opacity:1 !important; transform:none !important; transition:none !important; margin:0 !important; }
  ul#globalnav.nav_mobile li:last-child{ border-right:0 !important; }
  ul#globalnav.nav_mobile li > a, ul#globalnav.nav_mobile li > span{
    display:flex !important; align-items:center; justify-content:center;
    padding:14px 8px !important; white-space:nowrap !important; height:100% !important;
    font-size:13px !important; font-weight:600 !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:#333 !important; background:transparent !important; }
  ul#globalnav.nav_mobile li > a:hover{ background:#dadee1 !important; }
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{ background:#cfd4d7 !important; color:#1a1a1a !important; }
  ul#globalnav.nav_mobile li.nav-wa > a{ color:#1a7f37 !important; font-weight:700 !important; }
}
@media (max-width:768px){
  ul#globalnav.nav_mobile li.nav-wa{ display:none !important; }
}

/* Fix 15.06. (Andy): Desktop-Nav-Leiste polierter (war 'unfertig') — Ecken klippen sauber, weisser Aktiv-Tab, mehr Hoehe/Hover. */
@media (min-width:769px){
  ul#globalnav.nav_mobile{ overflow:hidden !important; }
  ul#globalnav.nav_mobile li > a, ul#globalnav.nav_mobile li > span{ padding-top:15px !important; padding-bottom:15px !important; transition:background .15s ease !important; }
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{ background:#ffffff !important; color:#1a1a1a !important; font-weight:700 !important; }
  ul#globalnav.nav_mobile li > a:hover{ background:#eef0f1 !important; }
}

/* Fix 15.06. (Andy): Abstaende zwischen Text-Kaesten enger (Sections hatten 56px oben+unten -> 16px), Box-Margin raus. Desktop. */
@media (min-width:769px){
  #content section{ padding-top:16px !important; padding-bottom:16px !important; }
  #content .textborder{ margin-bottom:0 !important; }
}

/* Fix 15.06. (Andy): Nav-Bar etwas mehr grau + WhatsApp-Punkt schwarze Schrift + gruenes Icon (ganz rechts via JS). */
@media (min-width:769px){
  ul#globalnav.nav_mobile{ background:#dce0e3 !important; }
  ul#globalnav.nav_mobile li.nav-wa > a{ color:#1a1a1a !important; font-weight:700 !important; gap:7px !important; }
  ul#globalnav.nav_mobile li.nav-wa > a svg{ width:18px !important; height:18px !important; color:#25d366 !important; flex:0 0 auto !important; }
}
/* Mobil-Pills auch etwas mehr grau (Konsistenz) */
#nav-burger, .td-wa{ background:#dce0e3 !important; }

/* Fix 15.06. (Andy): WhatsApp richtige Schreibweise (nicht uppercase) + Desktop weniger fett. (Logo = echtes WA-Brand-SVG aus project.js, gruene Blase + weisser Hoerer.) */
.nav-wa .wal, .td-wa .wal{ text-transform:none !important; }
@media (min-width:769px){
  ul#globalnav.nav_mobile li.nav-wa > a{ font-weight:600 !important; }
}

/* Fix 15.06. (Andy): Balken insgesamt etwas grauer + aktiver weisser Tab NICHT fett. */
@media (min-width:769px){
  ul#globalnav.nav_mobile{ background:#d2d7da !important; }
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{ font-weight:600 !important; }
}
#nav-burger, .td-wa{ background:#d2d7da !important; }

/* Fix 15.06. (Andy): Menue-Balken uneinheitlich (Handy zu grau, Desktop zu blass) -> EIN mittlerer Grauton ueberall, konsistent Handy + Desktop. */
ul#globalnav.nav_mobile,
ul#globalnav.nav_mobile.open,
#nav-burger,
.td-wa{ background:#cdd2d6 !important; }
#nav-burger:hover, .td-wa:hover{ background:#c2c8cc !important; }

/* Fix 15.06. (Andy): Oberes Bild jeder Seite gleich gross. Slider (#window, Bilder 980x399) = 1034x421 Desktop / 159 hoch Mobil. Galerie-Hero (.td-hero-img) hatte abweichendes Verhaeltnis -> auf exakt dieselbe Box zwingen. */
img.td-hero-img{
  width:100% !important;
  max-width:1034px !important;
  aspect-ratio:980 / 399 !important;
  height:auto !important;
  object-fit:cover !important;
  display:block !important;
  margin:0 auto !important;
}
/* Mobil: Hero full-bleed wie der Slider (#window nutzt 100vw) -> gleiche Breite 390 statt im gepolsterten Container 321. */
@media (max-width:768px){
  img.td-hero-img{
    margin-left:calc(-50vw + 50%) !important;
    margin-right:calc(-50vw + 50%) !important;
    width:100vw !important;
    max-width:100vw !important;
  }
}

/* Fix 16.06. (Andy): gleicher Hex wirkte Desktop blass / Mobil kraeftig (volle Pills vs duenne Leiste m. weissem Aktiv-Tab). Perceptuell angleichen: Desktop-Leiste 1 Tick dunkler, Mobil-Pills 1 Tick heller. */
@media (min-width:769px){
  ul#globalnav.nav_mobile{ background:#bfc5c9 !important; }
}
@media (max-width:768px){
  ul#globalnav.nav_mobile, ul#globalnav.nav_mobile.open{ background:#dde1e4 !important; }
  /* Fix 16.06. abend (Andy): Pillen-Ton zwischen alt (#dde1e4) und fast-weiss (#f4f5f6) -> Mitte. */
  #nav-burger, .td-wa{ background:#e8ebed !important; }
  #nav-burger:hover, .td-wa:hover{ background:#dde1e4 !important; }
}

/* Fix 16.06. abend (Andy): Desktop-Tabs OHNE Schatten, alle im neuen Handy-Grau (#e8ebed), HOME nur fett als Aktiv-Marker. */
@media (min-width:769px){
  ul#globalnav.nav_mobile > li{ background:#e8ebed !important; box-shadow:none !important; }
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{
    background:transparent !important;
    color:#1a1a1a !important;
    font-weight:700 !important;
  }
}

/* Fix 16.06.: <h1> (SEO/A11y) optisch identisch zur bisherigen .head h3 — kein Layout-Sprung. */
#content .head h1{
  font-size:1.12rem !important; font-weight:600 !important; line-height:1.3 !important;
  color:#333 !important; margin:0 0 10px !important; text-align:center !important;
  font-family:"Open Sans",Arial,Helvetica,sans-serif !important;
  text-transform:none !important; letter-spacing:normal !important;
}

/* Fix 16.06.: YouTube Klick-zum-Laden (DSGVO — kein Google-Kontakt vor Klick). Galerie. */
.yt-embed{ position:relative; width:100%; height:264px; background:#1a1a1a; border-radius:8px; overflow:hidden; margin-bottom:8px; }
.yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.yt-embed iframe{ display:block; width:100%; height:100%; border:0; }
.yt-play{ position:absolute; inset:0; width:100%; height:100%; border:0; cursor:pointer;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.50)); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; font-family:inherit; }
.yt-play .yt-ico{ font-size:24px; color:#ff0000; background:#fff; border-radius:50%;
  width:56px; height:56px; display:flex; align-items:center; justify-content:center; padding-left:4px; transition:transform .15s ease; }
.yt-play .yt-txt{ display:flex; flex-direction:column; gap:3px; font-size:15px; font-weight:600; }
.yt-play .yt-txt small{ font-size:11px; font-weight:400; opacity:.78; }
.yt-play:hover .yt-ico{ transform:scale(1.09); }

/* Andy 16.06.: ALLE Content-Kaesten gleiche Breite + enger, einheitlicher Hoehenabstand (Desktop + Mobil). */
@media (min-width:769px){
  #content .row{ width:auto !important; max-width:1034px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; }
  #content section{ padding-top:7px !important; padding-bottom:7px !important; }
  #content .textborder{ margin-bottom:0 !important; }
}
@media (max-width:768px){
  /* verschachteltes section/Spalten-Padding neutralisieren -> identische Breite */
  #content section, #content .row{ padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; width:auto !important; }
  #content [class*="span"]{ width:100% !important; padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; }
  #content .textborder{ width:auto !important; max-width:none !important; margin:0 12px 12px 12px !important; }
  /* Welcome-Box (span8) hatte global margin:-16px -> auf Mobil neutralisieren (sonst Ueberlauf) */
  #content .col.span8 > .textborder{ margin-left:12px !important; margin-right:12px !important; padding:18px 16px !important; }
  #content section{ padding-top:0 !important; padding-bottom:0 !important; }
}

/* Fix 16.06. abend (Andy): aktiver Desktop-Tab war transparent (nur fett) -> kaum erkennbar. Jetzt wieder dunkler gefuellt (deutlich dunkler als die hellen #e8ebed-Tabs), ohne Schatten. */
@media (min-width:769px){
  ul#globalnav.nav_mobile li.act > a, ul#globalnav.nav_mobile li.act > span{
    background:#b9c0c4 !important;
    color:#1a1a1a !important;
    font-weight:700 !important;
  }
}

/* Andy 16.06.: Kundenstimmen "Das sagen meine Gaeste" — ruhiges Karten-Raster (Konzept A), an Weiss/Grau-Stil angepasst (dezenter Rand statt hartem Schatten). */
.td-stimmen-titel{ font-size:1.12rem; font-weight:600; line-height:1.3; color:#333; margin:0 0 6px; text-align:center;
  font-family:var(--font-main); text-transform:none; letter-spacing:normal; }
.td-stimmen-sub{ text-align:center !important; color:#5f5f5f; font-size:.92rem; margin:0 0 22px; }
.td-stimmen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.td-stimme{ background:#fff; border:1px solid #d8dde0; border-radius:8px; padding:20px 20px 18px;
  margin:0; display:flex; flex-direction:column; gap:9px; }
.td-stimme-q{ font-family:Georgia,serif; font-size:38px; line-height:.1; color:#d8dde0; height:16px; }
.td-stimme-stars{ color:#f5b50a; font-size:13px; letter-spacing:1px; }
.td-stimme blockquote{ margin:0; font-size:.95rem; line-height:1.55; color:#333; font-style:normal; quotes:none; }
.td-stimme figcaption{ margin-top:auto; font-weight:600; color:#1a1a1a; font-size:.9rem; }
@media (max-width:768px){
  /* Mobil: ganzer Block (Titel/Untertitel/Karten) weg vom Bildschirmrand. */
  .td-stimmen{ padding-left:16px !important; padding-right:16px !important; }
  .td-stimmen-grid{ grid-template-columns:1fr; margin:0; }
}
/* Andy 16.06.: mehr Abstand zwischen Welcome-Block und Kundenstimmen (Box-Breiten-Regel drueckte alle Sections auf ~7px). Hoehere Spezifitaet als #content section. */
#content section.td-stimmen-sec{ margin-top:48px !important; }
@media (max-width:768px){
  #content section.td-stimmen-sec{ margin-top:30px !important; }
}

/* Andy 17.06.: Intro-Splash — Logo gross zentriert, Graustufe -> Farbe (langsam), dann fade-out. Reuse des Farbeinlaufs vom Header-Logo. */
#td-splash{ position:fixed; inset:0; z-index:99999; background:#fff; display:flex; align-items:center; justify-content:center;
  animation:tdSplashOut .7s ease 2.9s forwards; }
.td-splash-inner{ display:flex; flex-direction:column; align-items:center;
  animation:tdSplashLogoIn .8s cubic-bezier(.22,.7,.2,1) both; }
.td-splash-logo{ position:relative; display:inline-block; width:min(78vw,520px); line-height:0; }
.td-splash-logo img{ display:block; width:100%; height:auto; }
.td-splash-wipe{ position:absolute; inset:0; pointer-events:none; clip-path:inset(0 0 0 0);
  -webkit-backdrop-filter:grayscale(1); backdrop-filter:grayscale(1);
  animation:tdSplashColor 1.8s ease-out .7s both; }
/* grauer Balken faehrt von rechts ein (wie Header-Logo barInRight) — Andy fand ihn schoen */
.td-splash-bar{ display:block; width:min(300px,72%); height:6px; margin-top:16px; border-radius:3px;
  background:linear-gradient(90deg, rgba(150,156,161,0), rgba(150,156,161,.6) 25%, rgba(150,156,161,.6) 75%, rgba(150,156,161,0));
  clip-path:inset(0 0 0 100%); animation:barInRight .9s ease-out .5s both; }
@keyframes tdSplashColor{ 0%{ clip-path:inset(0 0 0 0); } 100%{ clip-path:inset(0 0 0 100%); } }
@keyframes tdSplashLogoIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }
@keyframes tdSplashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.td-nosplash #td-splash{ display:none !important; }
@media (prefers-reduced-motion: reduce){ #td-splash{ display:none !important; animation:none !important; } }

/* Andy 17.06.: Kundenstimmen = feste Kaesten (Desktop 2x3 ueber .td-stimmen-grid, Mobil 3 gestapelt),
   in jedem Kasten rotiert zeitversetzt ein anderer Kommentar rein (Slide+Fade). */
.td-stimmen-rot .td-box{ position:relative; overflow:hidden; height:228px; }
.td-stimmen-rot .td-box .td-stimme{ position:absolute; inset:0; margin:0;
  transition:opacity .55s ease, transform .55s ease; }
.td-stimmen-rot .td-box .td-stimme.td-enter{ opacity:0; transform:translateY(16px); }
.td-stimmen-rot .td-box .td-stimme.td-leave{ opacity:0; transform:translateY(-16px); }
.td-stimmen-rot .td-stimme blockquote{ display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:6; line-clamp:6; overflow:hidden; }
@media (max-width:768px){
  .td-stimmen-rot .td-box{ height:222px; }
  .td-stimmen-rot .td-box:nth-child(n+4){ display:none; }      /* Mobil nur 3 Kaesten */
  .td-stimmen-rot .td-stimme blockquote{ -webkit-line-clamp:5; line-clamp:5; }
}
@media (prefers-reduced-motion: reduce){
  .td-stimmen-rot .td-box .td-stimme{ transition:none; }
}

/* Andy 17.06.: Seitentitel auf Leistungen visuell ausblenden, H1 bleibt fuer SEO */
.td-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}