/* ============================================================
   CREOVATE – Footer Styles
   ============================================================ */

/* ---------- Design-Variablen ---------- */
:root{
  --footer-bg:#2a2c2d;
  --footer-pad:30px;
  --footer-rad:30px;
  --link-blue:#b0d4ff;
}

/* ---------- Grundstruktur ---------- */
#colophon{
  padding:10px 20px 80px;
  box-sizing:border-box;
}
.footer-box{
  background:var(--footer-bg);
  border-radius:var(--footer-rad);
  padding:var(--footer-pad);
  max-width:1496px;
  width:100%;
  margin:0 auto;
  color:#fff;
  box-sizing:border-box;
}

/* ============================================================
   DESKTOP  ≥ 768 px
   ============================================================ */
.footer-test-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  font-family:Arial,Helvetica,sans-serif;
}
.footer-test-table td{
  border:none;
  padding:0 0;
  vertical-align:top;
  text-align:left;
  font-size:1rem;
  color:#fff;
}
.footer-test-table ul{list-style:none;margin:0;padding:0;}
.footer-test-table a{color:var(--link-blue);text-decoration:none;}

/* Quote */
td.quote-desktop{
  font-size:1.6rem;
  font-weight:600;
  line-height:1.4;
}

/* Spaltenbreiten */
.footer-test-table td:first-child {width:60%;padding-right:100px;}
.footer-test-table td:nth-child(2){width:20%;}
.footer-test-table td:nth-child(3){width:20%;}

/* Logo-Block Desktop */
.logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;        /* Logo, Titel, Subtitel zentriert  */
  gap:6px;
  text-align:center;
}
.logo-wrap svg{fill:#fff;width:160px;height:auto;}
.logo-title{font-size:1.2rem; margin-top: -25px; font-weight:500;letter-spacing:.04em;}
.logo-sub{font-size:.7rem; margin-top: -10px;font-weight:300;opacity:.85;}
/* Zelle unten links */
.logo-cell{vertical-align:bottom;text-align:left;}

/* Copyright unten rechts */
.footer-test-table .copyright-wrap{vertical-align:bottom;text-align:right;}

/* ============================================================
   MOBILE  < 768 px
   ============================================================ */
.mobile-layout{display:none;}
.mobile-layout .block{
  box-sizing:border-box;
  border:none;
  padding:18px 15px;         /* innen kompakt */
}
.mobile-layout .block-row{
  display:flex;
  gap:0;
  margin-bottom:0;
}
.mobile-layout .block-row .block{flex:1;}
.mobile-layout ul{list-style:none;margin:0;padding:0;}
.mobile-layout a{color:var(--link-blue);text-decoration:none;}

/* Quote Mobile */
.mobile-layout .block1 p{
  font-size:1.3rem;
  font-weight:500;
  line-height:1.1;
  margin:0 0 8px 0;
}

/* Logo-Block Mobile */
.mobile-layout .block4{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;   /* unten */
  align-items:flex-start;     /* links */
  text-align:center;          /* Inhalt zentriert */
}
.mobile-layout .block4 .logo-wrap{align-items:center;text-align:center;}
.mobile-layout .block4 svg{width:90px;height:auto;fill:#fff;}

/* Copyright Mobile */
.mobile-layout .block7{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
}

/* -----------------------------------------------------------------
   Logo-Block (Desktop) – Block links, Inhalt zentriert
   ----------------------------------------------------------------- */
.footer-test-table tr:last-child td:first-child{
  vertical-align: bottom;      /* unten */
  text-align: left;            /* links in der Zelle */
}

.footer-test-table tr:last-child td:first-child .logo-wrap{
  display: inline-flex;        /* nur so breit wie Inhalt */
  flex-direction: column;
  align-items: center;         /* Logo, Titel, Subtitel zentriert */
  text-align: center;
  gap: 6px;
  margin: 0;                   /* kein auto-margin, bleibt links */
}

/* ---------- Breakpoint-Umschaltung ---------- */
@media(max-width:767px){
  .footer-test-table{display:none;}
  .mobile-layout{display:block;}

  /* Seitenränder anpassen */
  #colophon{padding-left:8px;padding-right:8px;padding-top: 0;}
  .footer-box{padding:10px 20px 10px 20px;}
}