/* Wir über uns - Layout im Stil der Firmenbroschüre (TUB.pdf) */

.ub-page { font-family: 'Open Sans', sans-serif; }

/* Seite auf feste Breite begrenzen, seitlich zeigt sich das Hintergrundmuster der Seite (wie auf der Startseite) */
.ub-frame {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 10px 40px rgba(0,0,0,.25);
}
.ub-page img { max-width: 100%; height: auto; display: block; }
.ub-page video { max-width: 100%; width: 100%; height: auto; display: block; }

/* Dezenter 3D-Effekt für alle Grafiken - fügt sie weicher ins Gesamtbild ein */
.ub-page img, .ub-page video {
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 2px 5px rgba(0,0,0,.22);
}

.ub-pdf-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #c0272c;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 14px 28px;
  border-radius: 3px;
  transition: background-color .2s ease;
}
.ub-pdf-download::before {
  content: "\2193";
  font-weight: 700;
}
.ub-pdf-download:hover { background: #9e1f23; }

.ub-hero {
  background: #1c1a1a;
  padding: 46px 20px;
  text-align: center;
  border-bottom: 2px solid #a3181f;
}
.ub-hero h1 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: #fff;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: 1px;
}

.ub-section {
  padding: 60px 20px;
}
.ub-section--dark {
  background: #1c1a1a;
  color: #e6e4e0;
}
.ub-section--light {
  background: #e9e7e2;
  color: #2a2725;
}

.ub-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.ub-heading {
  margin: 0 0 26px;
}
.ub-heading::after {
  content: "";
  display: table;
  clear: both;
}
.ub-heading .ub-cap {
  font-family: 'Tangerine', cursive;
  font-weight: 700;
  font-size: 76px;
  line-height: 0.55;
  color: #c0272c;
  float: left;
  margin-right: 8px;
}
.ub-heading .ub-txt {
  font-family: 'EB Garamond', serif;
  font-variant: small-caps;
  letter-spacing: 1.5px;
  font-size: 22px;
  line-height: 1.3;
  display: inline;
}
.ub-section--dark .ub-heading .ub-txt { color: #fff; }
.ub-section--light .ub-heading .ub-txt { color: #2a2725; }
.ub-heading-line2 { display: inline-block; margin-top: 10px; }

.ub-section--dark p, .ub-section--light p { line-height: 26px; margin-bottom: 18px; }

.ub-list { margin: 0 0 18px; padding: 0; list-style: none; }
.ub-list li { position: relative; padding-left: 18px; line-height: 26px; }
.ub-list li::before { content: "•"; color: #c0272c; position: absolute; left: 0; }
.ub-section--dark .ub-list li { color: #a8a49d; }

.ub-cols { display: flex; gap: 40px; flex-wrap: wrap; }
.ub-cols--center { align-items: center; }
.ub-col { flex: 1 1 320px; }

.ub-photostack { display: flex; flex-direction: column; gap: 14px; }
.ub-photostack img { box-shadow: 0 2px 12px rgba(0,0,0,.35); }

.ub-signature { font-family: 'EB Garamond', serif; font-style: italic; font-size: 19px; }
.ub-signature-img { width: 190px; height: auto; margin-top: 12px; }

/* Vorwort: schwarze Rauch-Bildspalte links, heller Textbereich rechts (wie im PDF) */
.ub-vorwort { display: flex; flex-wrap: wrap; align-items: stretch; }
.ub-vorwort-media {
  position: relative;
  flex: 1 1 342px;
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: #1c1a1a;
  overflow: hidden;
}
.ub-vorwort-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('img/ueberuns/smoke-texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 2% 0%;
  animation: ub-smoke-drift-tr 34s ease-in-out infinite alternate;
  z-index: 0;
}
.ub-vorwort-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1c1a1a;
  opacity: .45;
  z-index: 1;
}
.ub-vorwort-media .ub-smoke-canvas { z-index: 2; }
.ub-vorwort-media img, .ub-vorwort-media video { position: relative; z-index: 3; box-shadow: 0 2px 14px rgba(0,0,0,.5); }
.ub-vorwort-text { flex: 1 1 480px; box-sizing: border-box; padding: 60px 40px 24px; }
.ub-vorwort-text > p:last-child { margin-bottom: 0; }
.ub-portrait-wrap { position: relative; z-index: 3; align-self: flex-end; width: 47%; }
.ub-vehicle-wrap {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  width: 79%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 200px;
}
@keyframes ub-smoke-drift-tr {
  0%   { background-position: 2% 0%; }
  50%  { background-position: 12% 0%; }
  100% { background-position: 6% 0%; }
}
@media (prefers-reduced-motion: reduce) {
  .ub-smokesection, .ub-vorwort-media::after { animation: none; }
}
.ub-portrait-caption {
  display: block;
  margin-top: 8px;
  color: #d81f2a;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
}

@media (max-width: 700px) {
  .ub-vorwort-media { padding: 24px; }
  .ub-vorwort-text { padding: 40px 20px; }
}

/* Bildbanner (Unsere Stärken) - fügt sich in die Textbreite/-optik des hellen Bereichs ein */
.ub-photoband {
  border-radius: 3px;
  overflow: hidden;
  height: 220px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Volle Breite bis zum Rahmen (nicht auf die Textspalte begrenzt) */
.ub-photoband-full {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
}
@media (max-width: 700px) {
  .ub-photoband-full { height: 150px; }
}

.ub-fullphoto { width: 100%; }
.ub-fullphoto img { width: 100%; }

.ub-tworow { display: flex; gap: 14px; flex-wrap: wrap; }
.ub-tworow > div { flex: 1 1 300px; }
.ub-tworow figcaption {
  text-align: center; font-size: 13px; color: #b6b3ae; margin-top: 6px; letter-spacing: .5px;
}

/* Gleich große, leicht schwebende Grafiken (Callcenter / Liefergebiet) */
.ub-tworow--float { align-items: center; }
.ub-floatbox {
  height: 300px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 18px 34px rgba(0,0,0,.45);
  animation: ub-float 6s ease-in-out infinite;
  will-change: transform;
}
.ub-floatbox img { width: 100%; height: 100%; object-fit: cover; }
.ub-floatbox a { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* Schweben ohne festen Zuschnitt (z.B. Bilderstapel mit wechselnden Seitenverhältnissen) */
img.ub-float-plain {
  border-radius: 4px;
  box-shadow: 0 18px 34px rgba(0,0,0,.45);
  animation: ub-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes ub-float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ub-floatbox, .ub-float-plain { animation: none; }
}

@media (max-width: 700px) {
  .ub-floatbox { height: 200px; }
}

/* Eigenes, schlankes Zoom-Overlay (unabhängig vom alten Lightbox-Plugin) */
.ub-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,9,9,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  padding: 30px;
  box-sizing: border-box;
}
.ub-zoom-overlay.is-open { display: flex; }
.ub-zoom-overlay img {
  max-width: 94vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  border-radius: 3px;
}

.ub-smokesection {
  position: relative;
  background-color: #100f0f;
  background-image: url('img/ueberuns/smoke-texture.jpg');
  background-repeat: no-repeat;
  background-size: 130% auto;
  background-position: 45% 30%;
  animation: ub-smoke-drift 34s ease-in-out infinite alternate;
  overflow: hidden;
}
@keyframes ub-smoke-drift {
  0%   { background-position: 38% 22%; background-size: 128% auto; }
  50%  { background-position: 58% 38%; background-size: 148% auto; }
  100% { background-position: 44% 46%; background-size: 132% auto; }
}
.ub-smokesection::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10,9,9,.72);
  z-index: 0;
}
.ub-smoke-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.ub-smokesection .ub-inner { position: relative; z-index: 2; }
.ub-smokesection .ub-heading .ub-txt { color: #fff; }
.ub-smokesection p { color: #f2f0ec; }
.ub-dtv-wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ub-dtv-logo { width: 150px; height: auto; background: #fff; padding: 8px 12px; border-radius: 3px; }
.ub-dtv-badge { width: 84px; height: auto; transform: rotate(-10deg); position: relative; top: 22px; }

@media (max-width: 700px) {
  .ub-hero h1 { font-size: 30px; }
  .ub-heading .ub-cap { font-size: 58px; }
  .ub-heading .ub-txt { font-size: 18px; }
  .ub-cols { gap: 24px; }
  .ub-section { padding: 40px 16px; }
  .ub-photoband { height: 150px; }
}