/* ============================================================
   TWIN BAU² — Polish layer
   Loaded AFTER styles.css and site.css.
   Every block here is a deliberate fix or refinement.
   ============================================================ */

/* ------------------------------------------------------------
   GUARD: prevent any horizontal scroll on the whole page.
   If a single child overflows (long phone number, wide image,
   absolute-positioned helper, etc.) the page should clip rather
   than become wider than the viewport.
   ------------------------------------------------------------ */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.tb-section, .tb-container, .tb-nav-inner {
  max-width: 100%;
}
img, svg, video { max-width: 100%; height: auto; }

/* ------------------------------------------------------------
   00. NAV — lift above absolute-positioned elements, and
   give it a solid opaque background. backdrop-filter blur is
   elegant but renders inconsistently (older Safari, Firefox
   without the flag, embedded webviews, some print/PDF flows).
   A clean opaque band reads as confident and editorial.
   ------------------------------------------------------------ */
.tb-nav {
  z-index: 100;
  background: var(--tb-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ------------------------------------------------------------
   01. NAV — fix wrapping & burger threshold
   The links wrap onto two lines between ~880px and 1024px
   because all five links + CTA + logo don't fit. Move the
   mobile-burger breakpoint up so the burger appears earlier.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .tb-nav-links { display: none; }
  .tb-nav-burger { display: flex; }
  .tb-nav-mobile { display: flex; }
  .tb-nav-inner > .tb-btn { display: none; }
}

/* Slightly tighter nav padding gives the desktop layout more
   breathing room before it collapses to the burger */
.tb-nav-inner {
  padding: 18px 32px;
  gap: 32px;
}
.tb-nav-links { gap: 30px; }

/* Active link indicator — subtle, no movement on hover */
.tb-nav-links a {
  position: relative;
  padding: 6px 0;
}
.tb-nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--tb-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.tb-nav-links a:hover { color: var(--tb-ink); }
.tb-nav-links a:hover::after { transform: scaleX(1); }

/* ------------------------------------------------------------
   02. HERO — rein in the headline
   The clamp went up to 104px which on a 1280px viewport reads
   shouty rather than confident. Slightly more conservative
   max, tighter min, and a max-width that keeps "MIT PRÄZISION."
   from dominating its own line.
   ------------------------------------------------------------ */
.tb-hero-title {
  font-size: clamp(44px, 6.2vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0 0 32px;
  max-width: 16ch;
}

/* The accent <em> needs vertical breathing room. The 4px
   underline currently sits 2px below baseline and the next
   block (paragraph) starts right after, so descenders crash
   into the line. */
.tb-accent-em {
  border-bottom-width: 3px;
  padding-bottom: 6px;
  display: inline-block;
  line-height: 1.05;
}

/* Hero sub gets more space below the title's underline */
.tb-hero-sub {
  margin-top: 12px;
  font-size: clamp(15px, 1.2vw, 17px);
}

/* ------------------------------------------------------------
   03. HERO STAT BOX — fix z-index + integrate visually
   The stat box sits over the hero image but its z-index is
   undefined, so on scroll it pokes above the sticky nav.
   Also: it was floating awkwardly — anchor it cleaner.
   ------------------------------------------------------------ */
.tb-hero-img-wrap { z-index: 1; }
.tb-hero-stat {
  z-index: 2;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.35);
}
/* Make sure the wrap has bottom space so the protruding stat box
   doesn't overlap the next section */
.tb-hero-img-wrap { margin-bottom: 56px; }

/* ------------------------------------------------------------
   04. EYEBROW — lighter, more editorial
   The current background+border-left looks like a callout box.
   Switching to a hairline rule beneath reads more "magazine".
   ------------------------------------------------------------ */
.tb-eyebrow {
  background: transparent;
  border-left: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--tb-line);
  margin-bottom: 28px;
}
.tb-section-dark .tb-eyebrow,
.tb-eyebrow-light {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

/* Triangle dot stays — it's a nice brand mark — but smaller */
.tb-dot { width: 6px; height: 6px; }

/* ------------------------------------------------------------
   05. SECTION RHYTHM — slightly tighter
   120px between sections is generous on laptops; 96px reads
   spacious without feeling empty.
   ------------------------------------------------------------ */
.tb-section { padding: 96px 0; }
@media (max-width: 1024px) {
  .tb-section { padding: 72px 0; }
}

/* ------------------------------------------------------------
   06. SERVICE CARDS — refine the hover
   The 3px amber bar at top is nice. Add a subtle inner shift
   so the whole card feels alive, and tighten the title size.
   ------------------------------------------------------------ */
.tb-service {
  padding: 40px 32px 36px;
  transition: background .25s ease, transform .25s ease;
}
.tb-service:hover {
  background: #FBF9F5;
  transform: translateY(-2px);
}
.tb-service-title {
  font-size: 20px;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.tb-service-num {
  font-size: 11px;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

/* ------------------------------------------------------------
   07. WHY-US (DARK SECTION) — add column rules
   The 4 cells sit on a flat dark background. A 1px vertical
   rule between them gives the grid structure without adding
   visual weight.
   ------------------------------------------------------------ */
.tb-why-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.tb-why-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 32px;
}
@media (max-width: 1024px) {
  .tb-why-cell { padding: 32px 24px; }
}

/* ------------------------------------------------------------
   08. STIMMEN (testimonials) — dark cards on light section.
   Previous attempt used a near-white card on a cream section,
   which gave almost no contrast against the section bg and made
   the white text unreadable. Inverting to dark ink cards gives
   premium feel, full contrast, and matches the "Warum wir"
   section's dark treatment elsewhere on the page.
   ------------------------------------------------------------ */
.tb-stimme {
  background: var(--tb-ink) !important;
  color: #fff !important;
  border-top: 3px solid var(--tb-accent);
  padding: 30px 28px 26px;
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.35);
}

/* The quote — white, with a subtle opening-quote mark in amber */
.tb-stimme-quote {
  font-family: 'Archivo', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff !important;
  margin: 0 0 24px;
  position: relative;
}

/* Separator between quote and customer */
.tb-stimme-foot {
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding-top: 16px;
}

/* Customer name + location */
.tb-stimme-foot > div > div:first-child {
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
}
.tb-stimme-foot > div > div:last-child {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
  font-size: 12px;
}

/* Amber initial chip stays — looks great on dark */
.tb-stimme .tb-avatar-sm {
  background: var(--tb-accent) !important;
  color: var(--tb-ink) !important;
  font-weight: 700;
}

/* Stars: keep amber */
.tb-stimme .tb-stars {
  color: var(--tb-accent);
  letter-spacing: 2px;
  font-size: 14px;
}

/* ------------------------------------------------------------
   08b. STIMMEN — hide initials chip
   The two-letter initial chips (FR, SH, PW, AL) felt redundant
   alongside the full names. Hide them and let the name+location
   sit flush left in the foot row.
   ------------------------------------------------------------ */
.tb-stimme .tb-avatar-sm { display: none !important; }
.tb-stimme-foot {
  gap: 0 !important;
}

/* ------------------------------------------------------------
   08b. PROJECT CARDS — fix iOS Safari blue button text
   The project cards are <button> elements. iOS Safari renders
   button text in -webkit-text-fill-color blue if no explicit
   color cascades down. Force ink color on all text inside.
   ------------------------------------------------------------ */
.tb-project,
.tb-project * {
  color: var(--tb-ink);
  -webkit-text-fill-color: var(--tb-ink);
}
.tb-project .tb-project-loc,
.tb-project .tb-project-loc * {
  color: var(--tb-muted);
  -webkit-text-fill-color: var(--tb-muted);
}
.tb-project .tb-project-year,
.tb-project .tb-project-year * {
  color: #fff;
  -webkit-text-fill-color: #fff;
}
.tb-project .tb-project-arrow {
  color: var(--tb-accent);
  -webkit-text-fill-color: var(--tb-accent);
}
.tb-project:hover .tb-project-arrow,
.tb-project:focus-visible .tb-project-arrow {
  color: var(--tb-ink);
  -webkit-text-fill-color: var(--tb-ink);
}
/* Ensure button itself has no UA styling */
button.tb-project {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font: inherit;
}

/* ------------------------------------------------------------
   09. CONTACT — fix leftover purple gradient bug
   site.css line 151 still references the old purple palette
   (176,122,255). Override with the amber accent.
   ------------------------------------------------------------ */
.tb-contact-row:not(.tb-contact-row-static):hover {
  background: linear-gradient(
    90deg,
    rgba(201, 150, 42, 0.08),
    transparent 60%
  );
}
.tb-form-hint {
  background: rgba(201, 150, 42, 0.08);
  border-color: rgba(201, 150, 42, 0.28);
}

/* ------------------------------------------------------------
   09b. CONTACT — mobile sizing fix
   Two real problems on phones:
   1. Phone number rendered at 22px !important made content
      too wide. Scaled to 17px on mobile.
   2. Grid 1fr without minmax(0, 1fr) refuses to shrink past
      the largest child's intrinsic width. Forces 418px+ width
      in a 390px viewport, breaking the layout.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  /* Stack contact grid AND allow children to shrink properly */
  .tb-contact-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tb-contact-left, .tb-contact-form {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .tb-contact-row {
    gap: 12px !important;
    padding: 18px 0;
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }
  .tb-contact-row .tb-contact-val {
    font-size: 17px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .tb-contact-row .tb-contact-label {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }
  .tb-contact-meta-num { font-size: 22px !important; }
  .tb-contact-meta-lbl { font-size: 9px !important; }
  .tb-contact-row-text { min-width: 0; }
  .tb-contact-row-arrow { font-size: 14px; }

  /* Section-dark "ERZÄHLEN SIE UNS VON IHREM PROJEKT" headline
     needs to shrink on mobile or the long word "PROJEKT" pushes
     the dark contact section beyond viewport */
  .tb-section-dark .tb-h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Dark-section body copy: allow wrap-anywhere as well */
  .tb-section-dark .tb-body {
    overflow-wrap: anywhere;
  }
}

/* ------------------------------------------------------------
   10. BUTTONS — slightly more refined press feedback
   ------------------------------------------------------------ */
.tb-btn-amber {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.04);
}
.tb-btn-amber:hover {
  background: #D9A535;
  transform: translateY(-1px);
}
.tb-btn-amber:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------
   11. FOOTER — link hover shift, matches contact rows
   ------------------------------------------------------------ */
.tb-footer a {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}
.tb-footer a:hover {
  color: var(--tb-accent);
  transform: translateX(2px);
}

/* ------------------------------------------------------------
   12. MOBILE — fix the headline overflow
   The screenshot shows letters cut off both sides. Two things:
   (a) container padding was 20px but on 360px screens the
       headline still bleeds because letter-spacing pushes wide,
   (b) the explicit max-width: 14ch fights small screens.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .tb-hero { padding: 56px 0 32px; }
  .tb-hero-title {
    font-size: clamp(34px, 9.5vw, 52px);
    letter-spacing: -0.025em;
    max-width: none;
    margin-bottom: 24px;
  }
  .tb-hero-center { padding-top: 24px; padding-bottom: 32px; }

  /* The big stat box covers half the hero image on mobile.
     Move it back inside the image, smaller. */
  .tb-hero-stat {
    transform: none;
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 12px 14px;
    gap: 14px;
  }
  .tb-hero-img-wrap { margin-bottom: 24px; }

  /* Accent em needs less underline on small screens */
  .tb-accent-em { border-bottom-width: 2px; padding-bottom: 4px; }

  /* Section heads were 72px → 48px on mobile already.
     Hero gets a touch more nav clearance. */
  .tb-section-head { margin-bottom: 40px; }
}

/* Very narrow phones (≤360px) — last guard against overflow */
@media (max-width: 380px) {
  .tb-container { padding: 0 16px; }
  .tb-hero-title { font-size: clamp(28px, 9vw, 38px); }
  .tb-h2 { font-size: clamp(24px, 8vw, 36px); }
}

/* ------------------------------------------------------------
   13. ACCESSIBILITY — better focus rings on dark sections
   ------------------------------------------------------------ */
.tb-section-dark a:focus-visible,
.tb-section-dark button:focus-visible,
.tb-section-dark input:focus-visible,
.tb-section-dark select:focus-visible,
.tb-section-dark textarea:focus-visible {
  outline-color: var(--tb-accent);
  outline-offset: 3px;
}

/* Reduced motion: kill the hover transforms */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .tb-btn:hover,
  .tb-service:hover,
  .tb-footer a:hover { transform: none; }
}

/* ------------------------------------------------------------
   14. IMAGE PLACEHOLDERS
   Used when an admin slot hasn't been uploaded yet, or when an
   <img> fails to load. Replaces the diagonal-striped boxes.
   ------------------------------------------------------------ */
.tb-placeholder {
  background:
    linear-gradient(135deg,
      transparent 0,
      transparent 49.5%,
      var(--tb-line) 49.5%,
      var(--tb-line) 50.5%,
      transparent 50.5%,
      transparent 100%),
    #DAD6CE;
  position: relative;
}
.tb-placeholder::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--tb-accent);
  border-left: 2px solid var(--tb-accent);
}
.tb-placeholder::after {
  content: '';
  position: absolute;
  bottom: 12px; right: 12px;
  width: 14px; height: 14px;
  border-bottom: 2px solid var(--tb-accent);
  border-right: 2px solid var(--tb-accent);
}

/* When an actual image is present and loaded, hide the diagonal
   placeholder lines but keep the surface color as image fallback */
.tb-placeholder:has(img[src][src]:not([src=""])) {
  background: #DAD6CE;
}
.tb-placeholder:has(img[src][src]:not([src=""]))::before,
.tb-placeholder:has(img[src][src]:not([src=""]))::after {
  display: none;
}

/* Hero & about: the image lives inside a .tb-placeholder, so the
   diagonal pattern is the natural empty state. Nothing else needed. */

/* ------------------------------------------------------------
   15. MOBILE — Modal gallery + Hero crop fixes
   On phones, the project-modal gallery was forced to 1 column
   making each photo huge and the modal painful to scroll.
   Force 2 columns on mobile.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Project modal: keep gallery as 2 columns even on mobile,
     so users can see multiple photos without endless scrolling */
  .tb-modal-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }

  /* Modal card needs less padding on mobile, otherwise too much
     of the screen is wasted on margins */
  .tb-modal { padding: 16px 8px !important; }
  .tb-modal-card { padding: 32px 20px 24px !important; }
  .tb-modal-close { top: 12px; right: 12px; }
  .tb-modal-title { font-size: clamp(24px, 6vw, 32px) !important; }

  /* The big project-cover image inside the modal: smaller aspect
     ratio so it fits in one screen */
  .tb-modal-cover .tb-placeholder { aspect-ratio: 4 / 3 !important; }
}

/* ------------------------------------------------------------
   15b. MODAL — kill transparent gaps around images
   On screenshots the modal-card background was bleeding through
   between gallery images. The card needs an opaque solid bg.
   ------------------------------------------------------------ */
.tb-modal-card {
  background: var(--tb-bg) !important;
}
.tb-modal-gallery .tb-placeholder {
  background: var(--tb-line);   /* visible while image loads */
}
.tb-modal-gallery img,
.tb-modal-cover img {
  display: block;
  background: var(--tb-line);
}

/* ------------------------------------------------------------
   16. HERO IMAGE — better mobile aspect ratio
   On desktop the hero wrap is 16:7 (very wide cinematic). On a
   mobile portrait phone that looks tiny because the height is
   determined by the narrow viewport width × 7/16 ≈ 175px tall.
   Switch to a 4:3 ratio on phones so the photo gets enough
   vertical room and reads as an actual hero image.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .tb-hero-img-wrap .tb-placeholder {
    aspect-ratio: 4 / 3 !important;
  }
  /* The big "120+ / 7 Jahre" stat box was positioned for a wide
     hero. Re-anchor for the new taller aspect. */
  .tb-hero-stat {
    bottom: 16px !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    padding: 14px 18px !important;
    gap: 16px !important;
  }
  .tb-hero-stat-num { font-size: 28px !important; }
  .tb-hero-stat-lbl { font-size: 10px !important; }
}

/* ------------------------------------------------------------
   17. FOOTER — kompakter und professioneller auf Mobile
   Standardmäßig stacken die 4 Spalten untereinander und der
   Footer wird sehr lang. Auf Mobile 2 Spalten verwenden um
   Höhe zu reduzieren.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .tb-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }
  /* Brand-Block (TWIN BAU² + Slogan) volle Breite oben */
  .tb-footer-grid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .tb-footer-h {
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 12px !important;
  }
  .tb-footer a, .tb-footer span {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .tb-footer-tag {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .tb-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-top: 24px !important;
    font-size: 12px !important;
  }
}
/* ------------------------------------------------------------
   18. eRecht24 LOGO + COOKIE HINWEIS
   ------------------------------------------------------------ */
.tb-footer-erecht24 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 24px;
}
.tb-footer-erecht24-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.tb-footer-erecht24 img {
  height: 28px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.tb-footer-erecht24 a:hover img { opacity: 1; }
@media (max-width: 600px) {
  .tb-footer-erecht24 {
    flex-direction: column;
    gap: 8px;
    padding: 24px 0 4px;
  }
}

/* Cookie-Hinweis-Streifen (kein Banner mit Buttons, da
   keine zustimmungspflichtigen Cookies verwendet werden) */
.tb-cookie-notice {
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 200;
  background: var(--tb-ink);
  color: #fff;
  border-left: 3px solid var(--tb-accent);
  padding: 14px 18px;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.4);
  max-width: 720px;
  margin: 0 auto;
  animation: tb-cookie-rise .35s ease both;
}
@keyframes tb-cookie-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.tb-cookie-notice-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.tb-cookie-notice-text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.tb-cookie-notice-text a {
  color: var(--tb-accent);
  text-decoration: underline;
}
.tb-cookie-notice-text a:hover {
  color: #fff;
}
.tb-cookie-notice-close {
  background: var(--tb-accent);
  color: var(--tb-ink);
  border: 0;
  padding: 8px 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}
.tb-cookie-notice-close:hover {
  filter: brightness(1.1);
}
@media (max-width: 600px) {
  .tb-cookie-notice {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 12px 14px;
  }
  .tb-cookie-notice-text { font-size: 12px; }
  .tb-cookie-notice-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .tb-cookie-notice-close { align-self: flex-end; }
}

/* ============================================================
   19. FOOTER — größeres Logo, schönere Hierarchie
   ============================================================ */

/* Logo im Footer größer und prominenter */
.tb-footer .tb-logo-light {
  font-size: 28px;
  letter-spacing: 0.04em;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 18px;
}
.tb-footer .tb-logo-light sup {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 2px;
  color: var(--tb-accent);
  font-weight: 600;
}

/* Tagline-Text nach Logo */
.tb-footer-tag {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 280px;
}

/* Überschriften der Spalten — feiner und elegantere Spacing */
.tb-footer-h {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tb-accent);
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}
/* Dünne Akzent-Linie unter jeder Spaltenüberschrift */
.tb-footer-h::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: rgba(201, 150, 42, 0.5);
}

/* Footer-Links — etwas besseres Spacing und Hover */
.tb-footer a {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.7;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.15s ease;
}
.tb-footer a:hover {
  color: #fff;
}

/* "München, Deutschland" subtiler */
.tb-footer span[style*="rgba(255,255,255,0.55)"] {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
}

/* Schöne Trennlinie zwischen den Footer-Spalten und dem Copyright-Bereich */
.tb-footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.tb-footer-bottom a {
  display: inline;
  padding: 0;
  color: rgba(255, 255, 255, 0.55);
}
.tb-footer-bottom a:hover {
  color: var(--tb-accent);
}

/* Mehr Padding im Footer insgesamt */
.tb-footer {
  padding-top: 64px;
  padding-bottom: 0;
}
.tb-footer-grid {
  padding-bottom: 32px;
}

/* MOBILE: Footer auf Mobile professioneller */
@media (max-width: 600px) {
  .tb-footer { padding-top: 48px; }

  .tb-footer .tb-logo-light {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .tb-footer-tag {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .tb-footer-h {
    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px;
  }
  .tb-footer a {
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding: 3px 0;
  }
  .tb-footer-bottom {
    margin-top: 28px;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 11px;
  }
  /* Trennlinie zwischen Brand-Block und Spalten auf Mobile */
  .tb-footer-grid > div:first-child {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 16px;
  }
}